fix(stringify): render block component children of list items on their own line (#252)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Farnabaz <farnabaz@gmail.com>

Author: 3 people

packages/comark/SPEC/COMARK/component-block-in-list-item.md

@@ -0,0 +1,79 @@
+## Input
+
+```md
+- *item one*
+  ::block
+  #body
+  ### Heading
+  ::
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "ul",
+      {},
+      [
+        "li",
+        {},
+        [
+          "p",
+          {},
+          [
+            "em",
+            {},
+            "item one"
+          ]
+        ],
+        [
+          "block",
+          {},
+          [
+            "template",
+            {
+              "name": "body"
+            },
+            [
+              "h3",
+              {
+                "id": "heading"
+              },
+              "Heading"
+            ]
+          ]
+        ]
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<ul>
+  <li>
+    <p><em>item one</em></p>
+    <block>
+      <template name="body">
+        <h3 id="heading">Heading</h3>
+      </template>
+    </block>
+  </li>
+</ul>
+```
+
+## Markdown
+
+```md
+- *item one*
+  ::block
+  #body
+  ### Heading
+  ::
+```

packages/comark/src/internal/stringify/handlers/li.ts

@@ -26,25 +26,36 @@ export async function li(node: ComarkElement, state: State) {
   }
 
   const prefixWidth = prefix.length
+
+  // Direct text children render sibling components inline.
+  const hasInlineContent = children.some((child) => typeof child === 'string')
+
   let result = ''
 
   for (const child of children) {
-    const rendered = await state.one(child, state, node)
-    if (result && Array.isArray(child)) {
-      if (blockElements.has(child[0] as string)) {
-        // Block-level child: put on its own line and indent to align with list prefix
-        const indented = indent(rendered, { width: prefixWidth })
+    if (Array.isArray(child)) {
+      const tag = child[0] as string
+
+      if (result && blockElements.has(tag)) {
+        const indented = indent(await state.one(child, state, node), { width: prefixWidth })
         result = result.trimEnd() + '\n' + indented.trimEnd() + '\n'
         continue
       }
 
-      if (child[0] === 'p') {
-        const indented = indent(rendered, { width: prefixWidth })
+      if (result && tag === 'p') {
+        const indented = indent(await state.one(child, state, node), { width: prefixWidth })
         result = result.trimEnd() + '\n\n' + indented.trimEnd() + '\n'
         continue
       }
+
+      // No parent → mdc skips its own nesting indentation, so li owns it here.
+      if (!hasInlineContent && !(tag in state.handlers)) {
+        const indented = indent(await state.one(child, state), { width: prefixWidth, ignoreFirstLine: !result })
+        result = result ? result.trimEnd() + '\n' + indented.trimEnd() + '\n' : indented.trimEnd() + '\n'
+        continue
+      }
     }
-    result += rendered
+    result += await state.one(child, state, node)
   }
   result = result.trim()