From 4ee8e1933e9d1dd13e3649ba4d9aec6d9d002baf Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 9 Oct 2026 12:45:15 +0200
Subject: [PATCH 1/4] feat(parse): mark incomplete block components with $.ac
 while streaming

Auto-close (markIncomplete, on in streaming parses) writes the stage of the innermost block component it had to close on its closer: ':: <!-- auto-close: name|props|content -->'. Block closers now accept a trailing HTML comment; the components plugin reads the auto-close one into $.ac on the component and, for 'content', on its last slot.

Also: close a code fence still open inside a component before the component closer, keep a typed '::' closer under dropTrailingOpeners, and add a Streaming toggle to the /play options.
---
 AGENTS.md                                     |  10 +-
 docs/app/components/Playground.vue            |  11 +-
 .../1.getting-started/2.document-model.md     |  11 ++
 docs/content/2.syntax/2.components.md         |   8 ++
 docs/content/5.reference/2.auto-close.md      |   7 +
 .../SPEC/COMARK/component-closer-comment.md   |  49 +++++++
 .../src/internal/parse/auto-close/index.ts    | 121 +++++++++++++++++-
 .../src/internal/parse/token-processor.ts     |   3 +
 packages/comark/src/parse.ts                  |   1 +
 packages/comark/src/plugins/components.ts     |  44 ++++++-
 packages/comark/src/types.ts                  |  10 ++
 packages/comark/test/auto-close.test.ts       |  50 ++++++++
 packages/comark/test/streaming.test.ts        |  65 ++++++++++
 13 files changed, 379 insertions(+), 11 deletions(-)
 create mode 100644 packages/comark/SPEC/COMARK/component-closer-comment.md

diff --git a/AGENTS.md b/AGENTS.md
index 595ef91e0..bcb9d69ac 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -657,8 +657,14 @@ autoCloseMarkdown('hello *', { dropTrailingOpeners: true }) // 'hello'
 
 Key options: `linkMode: 'protocol' | 'text-only'`, `math` (default false; on in parse),
 `dropTrailingOpeners` (default false; on when parsing with `streaming: true`),
-`incompleteLinkPlaceholder`, `incompleteImagePlaceholder`, `frontmatter`, `syntax`, `attributes`.
-Behavioral SPEC: `packages/comark/SPEC/auto-close.md` (run via `test/auto-close-spec.test.ts`).
+`incompleteLinkPlaceholder`, `incompleteImagePlaceholder`, `frontmatter`, `syntax`, `attributes`,
+`markIncomplete` (default false; on when parsing with `streaming: true`).
+
+`markIncomplete` writes the stage of the innermost block component auto-close had to close on
+its closer: `::al` → `::al\n:: <!-- auto-close: name -->` (`name` | `props` | `content`). The
+`comark_block` rule in `src/plugins/components.ts` accepts a trailing HTML comment on any closer
+(dropped), and reads an `auto-close:` one into `tokenOpen.meta.ac`; the token processor turns it
+into `$.ac` on the component (and on its last slot for `content`). Behavioral SPEC: `packages/comark/SPEC/auto-close.md` (run via `test/auto-close-spec.test.ts`).
 
 ## Markdown Document Model
 
diff --git a/docs/app/components/Playground.vue b/docs/app/components/Playground.vue
index eb20cf7c7..5d89f770e 100644
--- a/docs/app/components/Playground.vue
+++ b/docs/app/components/Playground.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { parseMarkdown } from 'comark'
+import { createMarkdownParser, parseMarkdown } from 'comark'
 import shiki from '@comark/nuxt/plugins/shiki'
 import rangi from '@comark/nuxt/plugins/rangi'
 import math from '@comark/nuxt/plugins/math'
@@ -90,6 +90,7 @@ const parseOptions = useLocalStorage(
     autoUnwrap: true,
     autoClose: true,
     linkify: true,
+    streaming: false,
   },
   { mergeDefaults: true }
 )
@@ -205,6 +206,11 @@ const parseOptionDefs = [
     label: 'Auto Convert urls to links',
     icon: 'i-lucide-link',
   },
+  {
+    key: 'streaming',
+    label: 'Streaming',
+    icon: 'i-lucide-radio',
+  },
 ] as const
 
 const activePlugins = computed<ComarkPlugin[]>(() =>
@@ -252,12 +258,13 @@ async function updatePreview(): Promise<void> {
   parsing.value = true
   const start = performance.now()
   try {
-    const result = await parseMarkdown(markdown.value, {
+    const parse = createMarkdownParser({
       plugins: activePlugins.value,
       autoUnwrap: parseOptions.value.autoUnwrap,
       autoClose: parseOptions.value.autoClose,
       linkify: parseOptions.value.linkify ?? true,
     })
+    const result = await parse(markdown.value, { streaming: parseOptions.value.streaming })
     document.value = result
     parseTime.value = Math.round((performance.now() - start) * 10) / 10
     nodeCount.value = countNodes(result.nodes)
diff --git a/docs/content/1.getting-started/2.document-model.md b/docs/content/1.getting-started/2.document-model.md
index ec64434c2..318e90a10 100644
--- a/docs/content/1.getting-started/2.document-model.md
+++ b/docs/content/1.getting-started/2.document-model.md
@@ -174,12 +174,23 @@ interface ElementNodeAttributes {
     line?: number
     html?: 0 | 1
     block?: 0 | 1
+    ac?: 'name' | 'props' | 'content'
   }
 }
 ```
 
 Treat `$` as structural metadata. Component props and standard HTML attributes live alongside it.
 
+While parsing with `{ streaming: true }`, the innermost block component that is still being typed carries `$.ac`, so a renderer can show a placeholder instead of flashing a half-typed component:
+
+| `$.ac` | The stream stopped while typing | Example |
+| --- | --- | --- |
+| `'name'` | the component name | `::al` |
+| `'props'` | the `{...}` props, or a YAML props block | `::alert{type="in` |
+| `'content'` | the body | `::alert` then `some text` |
+
+With `'content'`, the component's last slot (`template`) carries it too. Parent components and finished components have no `$.ac`, so a finished stream matches a non-streaming parse.
+
 ### Comment nodes
 
 Comments use `null` as their tag:
diff --git a/docs/content/2.syntax/2.components.md b/docs/content/2.syntax/2.components.md
index d5e9d41ab..ccb9d95a8 100644
--- a/docs/content/2.syntax/2.components.md
+++ b/docs/content/2.syntax/2.components.md
@@ -55,6 +55,14 @@ Card content with **markdown** support
 ```
 ::
 
+A closing fence may be followed by an HTML comment, which is dropped:
+
+```mdc
+::note
+Remember to save.
+:: <!-- end of note -->
+```
+
 ## Inline
 
 Inline components use the `:component-name` syntax and can be placed within text:
diff --git a/docs/content/5.reference/2.auto-close.md b/docs/content/5.reference/2.auto-close.md
index cea804c1a..4075fd35f 100644
--- a/docs/content/5.reference/2.auto-close.md
+++ b/docs/content/5.reference/2.auto-close.md
@@ -134,6 +134,13 @@ autoCloseMarkdown('::::outer\n:::inner\n::component')
 // '::::outer\n:::inner\n::component\n::\n:::\n::::'
 ```
 
+With `markIncomplete: true` (on in streaming parses), the closer of the innermost component also records where the stream stopped. The parser turns it into `$.ac` on that component. See [The `$` metadata](/getting-started/document-model#attributes).
+
+```typescript
+autoCloseMarkdown('::alert\nContent', { markIncomplete: true })
+// '::alert\nContent\n:: <!-- auto-close: content -->'
+```
+
 #### Props and attributes
 
 Components with props are handled correctly:
diff --git a/packages/comark/SPEC/COMARK/component-closer-comment.md b/packages/comark/SPEC/COMARK/component-closer-comment.md
new file mode 100644
index 000000000..44b6f9afd
--- /dev/null
+++ b/packages/comark/SPEC/COMARK/component-closer-comment.md
@@ -0,0 +1,49 @@
+## Input
+
+```md
+::note
+Hello
+:: <!-- end of note -->
+
+After
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "note",
+      {},
+      "Hello"
+    ],
+    [
+      "p",
+      {},
+      "After"
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<note>
+  Hello
+</note>
+<p>After</p>
+```
+
+## Markdown
+
+```md
+::note
+Hello
+::
+
+After
+```
diff --git a/packages/comark/src/internal/parse/auto-close/index.ts b/packages/comark/src/internal/parse/auto-close/index.ts
index be6c1e9e2..a757b4676 100644
--- a/packages/comark/src/internal/parse/auto-close/index.ts
+++ b/packages/comark/src/internal/parse/auto-close/index.ts
@@ -20,6 +20,15 @@ import { closeTables } from './table.ts'
 export const INCOMPLETE_LINK_PLACEHOLDER = 'comark:incomplete-link'
 export const INCOMPLETE_IMAGE_PLACEHOLDER = 'comark:incomplete-image'
 
+/**
+ * Where a streamed block component stopped when auto-close had to close it:
+ *
+ * - `name` — the opener is still being typed (`::al`)
+ * - `props` — the `{...}` props, or a YAML props block, are still open (`::alert{type="in`)
+ * - `content` — name and props are done, the body is still open (`::alert\nsome text`)
+ */
+export type IncompleteStage = 'name' | 'props' | 'content'
+
 export type LinkMode = 'protocol' | 'text-only'
 
 export interface AutoCloseOptions {
@@ -48,6 +57,12 @@ export interface AutoCloseOptions {
    * Enabled automatically when `parseMarkdown(..., { streaming: true })`.
    */
   dropTrailingOpeners?: boolean
+  /**
+   * Write the stage of the innermost block component auto-close had to close as a
+   * comment on its closer (`:: <!-- auto-close: content -->`); the components plugin
+   * reads it into `$.ac`. Default false. Enabled when `parseMarkdown(..., { streaming: true })`.
+   */
+  markIncomplete?: boolean
   /** Auto-close incomplete links (`[text`). Default true. */
   links?: boolean
   /** Auto-close incomplete images (`![alt`). Default true. */
@@ -144,7 +159,11 @@ export function autoCloseMarkdown(markdown: string, options: AutoCloseOptions =
 
   if (doc.fmOpen && doc.fmContent) result = closeDelimiterLine(result, '-', 3)
 
-  if (o.syntax) result = closeComponents(result, source, doc.comps, doc.start >= 0)
+  if (o.syntax) {
+    // Inside open raw HTML the closers stay text, so there is nothing to mark.
+    const mark = options.markIncomplete === true && !doc.raw
+    result = closeComponents(result, source, doc.comps, doc.start >= 0, doc.fence, mark)
+  }
 
   return result
 }
@@ -157,6 +176,9 @@ interface Component {
   depth: number
   indent: string
   yaml: boolean
+  /** Line of the opener. */
+  line: number
+  stage: IncompleteStage
 }
 
 interface DocState {
@@ -171,6 +193,10 @@ interface DocState {
   /** The document ends inside a table block. */
   table: boolean
   comps: Component[]
+  /** Closer for a code fence still open inside a component (indent + fence run), else `''`. */
+  fence: string
+  /** The document ends inside raw HTML (`<pre>`, `<script>`, ...). */
+  raw: boolean
 }
 
 const RAW_TEXT_OPEN_RE = /^<(script|pre|style|textarea)(\s|>|$)/i
@@ -200,6 +226,7 @@ function scanBlocks(src: string, o: Opts): DocState {
   const comps: Component[] = []
   let fenceLen = 0
   let fenceCh = 0
+  let fenceLs = 0
   let raw: RawTag | null = null
   let fmOpen = false
   let fmContent = false
@@ -238,6 +265,7 @@ function scanBlocks(src: string, o: Opts): DocState {
           if (!(c0 === 96 && isIncompleteInlineFence(src, st, en))) {
             fenceLen = run
             fenceCh = c0
+            fenceLs = ls
             shielded = i
             continue
           }
@@ -276,6 +304,8 @@ function scanBlocks(src: string, o: Opts): DocState {
     if (dashes && comps.length > 0) {
       const top = comps[comps.length - 1]
       top.yaml = !top.yaml
+      // Only a `---` right under the opener starts a YAML props block.
+      top.stage = top.yaml && i === top.line + 1 ? 'props' : 'content'
       continue
     }
 
@@ -284,7 +314,8 @@ function scanBlocks(src: string, o: Opts): DocState {
     if (o.syntax && c0 === 58 /* : */) {
       let colons = 1
       while (st + colons < en && src.charCodeAt(st + colons) === 58) colons++
-      const bare = st + colons === en
+      // A closer may carry a trailing comment: `:: <!-- note -->`.
+      const bare = isCloserTail(src, st + colons, en)
       if (bare && i === n - 1 && comps.length === 0) {
         // Trailing bare `::` — drop it so it does not flash as text.
         docEnd = ls
@@ -293,7 +324,14 @@ function scanBlocks(src: string, o: Opts): DocState {
       }
       if (colons >= 2) {
         if (!bare && isNameStart(src.charCodeAt(st + colons))) {
-          comps.push({ depth: colons, indent: src.slice(ls, st), yaml: false })
+          comps.push({
+            depth: colons,
+            indent: src.slice(ls, st),
+            yaml: false,
+            line: i,
+            // Any line after the opener means its name and props are done.
+            stage: i === n - 1 ? openerStage(src, st + colons, en) : 'content',
+          })
         } else if (bare && comps.length > 0 && comps[comps.length - 1].depth === colons) {
           comps.pop()
         }
@@ -301,7 +339,27 @@ function scanBlocks(src: string, o: Opts): DocState {
     }
   }
 
-  const doc: DocState = { start: -1, end: -1, docEnd, fmOpen, fmContent, mathOpen, table, comps }
+  // A fence still open inside a component must close before the component does,
+  // otherwise the appended `::` lands in the code block.
+  let fence = ''
+  if (fenceLen !== 0 && comps.length > 0) {
+    let st = fenceLs
+    while (isIndentCode(src.charCodeAt(st))) st++
+    fence = src.slice(fenceLs, st) + String.fromCharCode(fenceCh).repeat(fenceLen)
+  }
+
+  const doc: DocState = {
+    start: -1,
+    end: -1,
+    docEnd,
+    fmOpen,
+    fmContent,
+    mathOpen,
+    table,
+    comps,
+    fence,
+    raw: raw !== null,
+  }
 
   // Nothing is healed while a shielded region is still open at EOF.
   if (fenceLen !== 0 || raw !== null || fmOpen || mathOpen) return doc
@@ -828,14 +886,22 @@ function closeDelimiterLine(text: string, ch: string, width: number): string {
 }
 
 /** Closes an open props brace and every open component fence, innermost first. */
-function closeComponents(result: string, source: string, comps: Component[], healShorthand: boolean): string {
+function closeComponents(
+  result: string,
+  source: string,
+  comps: Component[],
+  healShorthand: boolean,
+  fence: string,
+  mark: boolean
+): string {
+  if (fence !== '') result += (result.endsWith('\n') ? '' : '\n') + fence
   const lineStart = result.lastIndexOf('\n') + 1
   const shorthand = healShorthand && /^:[a-z$][\w$-]*\{/i.test(result.slice(lineStart).trimStart())
   if (!source.includes('::') && !shorthand) return result
 
   // `::alert{type="info` → close the quote and the brace.
   let brace = -1
-  for (let i = result.length - 1; i >= lineStart; i--) {
+  for (let i = fence === '' ? result.length - 1 : -1; i >= lineStart; i--) {
     const c = result.charCodeAt(i)
     if (c === 125 /* } */) break
     if (c === 123 /* { */) {
@@ -873,10 +939,45 @@ function closeComponents(result: string, source: string, comps: Component[], hea
     const c = comps[i]
     if (c.yaml) out += '\n' + c.indent + '---'
     out += '\n' + c.indent + ':'.repeat(c.depth)
+    // Only the innermost component is still being typed; parents just wait on it.
+    if (mark && i === comps.length - 1) out += ' <!-- auto-close: ' + c.stage + ' -->'
   }
   return out
 }
 
+/**
+ * The stage of a block opener from its own line alone. A `{` still open at EOL is
+ * props; anything past the name (a closed `{...}`, `[...]`, text) is content.
+ */
+function openerStage(src: string, from: number, limit: number): IncompleteStage {
+  let i = from
+  while (i < limit && isNameChar(src.charCodeAt(i))) i++
+  if (i === limit) return 'name'
+  if (src.charCodeAt(i) !== 123 /* { */) return 'content'
+  let quote = 0
+  for (i++; i < limit; i++) {
+    const c = src.charCodeAt(i)
+    if (quote !== 0) {
+      if (c === 92 /* \ */) i++
+      else if (c === quote) quote = 0
+    } else if (c === 34 || c === 39) quote = c
+    else if (c === 125 /* } */) return 'content'
+  }
+  return 'props'
+}
+
+/** `[\w$-]` */
+function isNameChar(c: number): boolean {
+  return isNameStart(c) || (c >= 48 && c <= 57) || c === 95 /* _ */ || c === 45 /* - */
+}
+
+/** The rest of a `::` line makes it a closer: nothing, or only an HTML comment. */
+function isCloserTail(src: string, from: number, end: number): boolean {
+  while (from < end && isSpaceCode(src.charCodeAt(from))) from++
+  if (from === end) return true
+  return end - from >= 7 && src.startsWith('<!--', from) && src.startsWith('-->', end - 3)
+}
+
 const ZWSP_RE = /\u200B/g
 const TRAILING_ZWSP_RE = /\u200B+$/
 const SETEXT_RE = /^(?:-{1,2}|={1,2})$/
@@ -927,6 +1028,14 @@ function dropTrailingOpeners(text: string, inlineCode: boolean): string {
   }
   if (i === ws) return text
 
+  // A `::` run on its own line is a component closer, not a half-typed opener.
+  // Dropping it would reopen a finished component (`::alert\nContent\n::`).
+  if (text.charCodeAt(i) === 58 /* : */ && (i === 0 || text.charCodeAt(i - 1) === 10)) {
+    let colons = 0
+    while (i + colons < ws && text.charCodeAt(i + colons) === 58) colons++
+    if (colons >= 2 && i + colons === ws) return text
+  }
+
   let allDollar = true
   let allTick = true
   for (let k = i; k < ws; k++) {
diff --git a/packages/comark/src/internal/parse/token-processor.ts b/packages/comark/src/internal/parse/token-processor.ts
index 0c7790a79..1e5bfa5e3 100644
--- a/packages/comark/src/internal/parse/token-processor.ts
+++ b/packages/comark/src/internal/parse/token-processor.ts
@@ -314,6 +314,8 @@ function processBlockToken(
   if (token.type === 'mdc_block_open') {
     const componentName = token.tag || 'component'
     const attrs = processAttributes(token.attrs)
+    // Streaming stage the components plugin read off this component's closer.
+    if (token.meta?.ac) attrs.$ = { ac: token.meta.ac }
     // Process children until mdc_block_close, handling slots (#slotname)
     const children = processBlockChildrenWithSlots(tokens, startIndex + 1, 'mdc_block_close', state)
 
@@ -500,6 +502,7 @@ function processBlockChildrenWithSlots(
           if (slotKey.startsWith('#')) {
             const slotName = slotKey.substring(1)
             const slotAttrs = processAttributes(token.attrs.slice(1))
+            if (token.meta?.ac) slotAttrs.$ = { ac: token.meta.ac }
 
             // Save previous slot if any
             if (currentSlotName !== null && currentSlotChildren.length > 0) {
diff --git a/packages/comark/src/parse.ts b/packages/comark/src/parse.ts
index 232b890e1..ec8146a69 100644
--- a/packages/comark/src/parse.ts
+++ b/packages/comark/src/parse.ts
@@ -185,6 +185,7 @@ export function createMarkdownParser<const TPlugins extends readonly ComarkPlugi
             attributes: hasPlugin('components') || hasPlugin('attributes'),
             math: hasPlugin('math'), // enables blockMath + inlineMath
             dropTrailingOpeners: opts.streaming === true,
+            markIncomplete: opts.streaming === true,
           })
         )
       }
diff --git a/packages/comark/src/plugins/components.ts b/packages/comark/src/plugins/components.ts
index 75ea3d6fd..2bae17fb2 100644
--- a/packages/comark/src/plugins/components.ts
+++ b/packages/comark/src/plugins/components.ts
@@ -34,6 +34,32 @@ function isValidComponentName(name: string): boolean {
   return RE_COMPONENT_NAME.test(name)
 }
 
+/**
+ * When `src[from, max)` is a single HTML comment (`<!-- ... -->`, trailing spaces
+ * allowed), the index of its `-->`, else -1.
+ */
+function closerComment(src: string, from: number, max: number): number {
+  if (!src.startsWith('<!--', from)) return -1
+  let end = max
+  while (end > from && (src.charCodeAt(end - 1) === 32 || src.charCodeAt(end - 1) === 9)) end--
+  if (end - from < 7 || !src.startsWith('-->', end - 3)) return -1
+  const close = src.indexOf('-->', from + 4)
+  return close === end - 3 ? close : -1
+}
+
+const AUTO_CLOSE_STAGES = new Set(['name', 'props', 'content'])
+
+/**
+ * The stage auto-close wrote into a closer comment (`<!-- auto-close: content -->`),
+ * read from the comment body `src[from, to)`. Any other comment is just a comment.
+ */
+function autoCloseStage(src: string, from: number, to: number): string | undefined {
+  const body = src.slice(from, to).trim()
+  if (!body.startsWith('auto-close:')) return undefined
+  const stage = body.slice(11).trim()
+  return AUTO_CLOSE_STAGES.has(stage) ? stage : undefined
+}
+
 const blockYamlLines: Record<string, string> = {
   '---': '---',
   '```yaml [props]': '```',
@@ -97,6 +123,7 @@ const markdownItComarkBlock: PluginSimple = (md) => {
       let pos: number
       let nextLine: number
       let auto_closed = false
+      let incomplete: string | undefined
       let start = state.bMarks[startLine] + state.tShift[startLine]
       let max = state.eMarks[startLine]
       const indent = state.sCount[startLine]
@@ -190,7 +217,9 @@ const markdownItComarkBlock: PluginSimple = (md) => {
 
         pos = state.skipSpaces(pos)
 
-        if (pos < max) {
+        // A closer may carry a trailing HTML comment: `:: <!-- note -->`.
+        const comment = pos < max ? closerComment(state.src, pos, max) : -1
+        if (pos < max && comment === -1) {
           // A new nested block opens with same marker count
           nestingDepth++
           continue
@@ -201,6 +230,7 @@ const markdownItComarkBlock: PluginSimple = (md) => {
           continue
         }
 
+        if (comment !== -1) incomplete = autoCloseStage(state.src, pos + 4, comment)
         auto_closed = true
         break
       }
@@ -217,6 +247,7 @@ const markdownItComarkBlock: PluginSimple = (md) => {
       tokenOpen.block = true
       tokenOpen.info = params.name
       tokenOpen.map = [startLine, nextLine]
+      if (incomplete) tokenOpen.meta = { ac: incomplete }
 
       params.props?.forEach(([key, value]) => {
         if (key === 'class') tokenOpen.attrJoin(key, value)
@@ -245,6 +276,17 @@ const markdownItComarkBlock: PluginSimple = (md) => {
 
       state.env.comarkBlockTokens.shift()
 
+      // The body still being typed is the last slot, when there is one.
+      if (incomplete === 'content') {
+        for (let i = state.tokens.length - 1; state.tokens[i] !== tokenOpen; i--) {
+          const t = state.tokens[i]
+          if (t.type === 'mdc_block_slot' && t.nesting === 1 && t.level === tokenOpen.level + 1) {
+            t.meta = { ac: incomplete }
+            break
+          }
+        }
+      }
+
       const tokenClose = state.push('mdc_block_close', params.name, -1)
       tokenClose.map = [startLine, nextLine]
       tokenClose.markup = state.src.slice(start, pos)
diff --git a/packages/comark/src/types.ts b/packages/comark/src/types.ts
index 97c65b935..f6ba1e708 100644
--- a/packages/comark/src/types.ts
+++ b/packages/comark/src/types.ts
@@ -28,6 +28,16 @@ export type ElementNodeAttributes = {
     line?: number
     html?: 0 | 1
     block?: 0 | 1
+    /**
+     * Streaming only: where the innermost block component still being typed stopped,
+     * so a renderer can show a placeholder. When it is `content`, the component's
+     * last slot (`template`) carries it too. Never forwarded as a prop.
+     *
+     * - `name` — the opener is still being typed (`::al`)
+     * - `props` — the `{...}` props or a YAML props block are still open (`::alert{type="in`)
+     * - `content` — the body is still open (`::alert\nsome text`)
+     */
+    ac?: 'name' | 'props' | 'content'
   }
 }
 
diff --git a/packages/comark/test/auto-close.test.ts b/packages/comark/test/auto-close.test.ts
index 1353ff5b5..50516b80e 100644
--- a/packages/comark/test/auto-close.test.ts
+++ b/packages/comark/test/auto-close.test.ts
@@ -814,7 +814,57 @@ describe('autoCloseMarkdown - syntax option', () => {
   })
 })
 
+describe('autoCloseMarkdown - markIncomplete', () => {
+  const mark = (md: string) => autoCloseMarkdown(md, { markIncomplete: true })
+
+  it('writes the stage on the closer of the component it had to close', () => {
+    expect(mark('::al')).toBe('::al\n:: <!-- auto-close: name -->')
+    expect(mark('::alert')).toBe('::alert\n:: <!-- auto-close: name -->')
+    expect(mark('::alert{props')).toBe('::alert{props}\n:: <!-- auto-close: props -->')
+    expect(mark('::alert{type="info')).toBe('::alert{type="info"}\n:: <!-- auto-close: props -->')
+    expect(mark('::hello{.class}\nsome data')).toBe('::hello{.class}\nsome data\n:: <!-- auto-close: content -->')
+    expect(mark('::alert\n')).toBe('::alert\n\n:: <!-- auto-close: content -->')
+  })
+
+  it('treats an open YAML props block as props, whatever the opener looks like', () => {
+    expect(mark('::alert\n---\ntype: x')).toBe('::alert\n---\ntype: x\n---\n:: <!-- auto-close: props -->')
+    expect(mark('::alert{.x}\n---\ntype: x')).toBe('::alert{.x}\n---\ntype: x\n---\n:: <!-- auto-close: props -->')
+    expect(mark('::alert\n---\ntype: x\n---\nBody')).toBe(
+      '::alert\n---\ntype: x\n---\nBody\n:: <!-- auto-close: content -->'
+    )
+  })
+
+  it('marks only the innermost component', () => {
+    expect(mark(':::outer\n  ::inner\n  text')).toBe(
+      ':::outer\n  ::inner\n  text\n  :: <!-- auto-close: content -->\n:::'
+    )
+  })
+
+  it('adds nothing to closed components, with or without a closer comment', () => {
+    expect(mark('::alert\nContent\n::')).toBe('::alert\nContent\n::')
+    expect(mark('::alert\nx\n:: <!-- note -->')).toBe('::alert\nx\n:: <!-- note -->')
+  })
+
+  it('is off by default', () => {
+    expect(autoCloseMarkdown('::alert\nContent')).toBe('::alert\nContent\n::')
+  })
+})
+
+describe('autoCloseMarkdown - code fence inside a component', () => {
+  it('closes the fence before the component', () => {
+    expect(autoCloseMarkdown('::alert\n```js\ncode')).toBe('::alert\n```js\ncode\n```\n::')
+    expect(autoCloseMarkdown('::alert\n  ~~~~\ncode\n')).toBe('::alert\n  ~~~~\ncode\n  ~~~~\n::')
+  })
+
+  it('leaves a fence outside any component alone', () => {
+    expect(autoCloseMarkdown('```js\ncode')).toBe('```js\ncode')
+  })
+})
+
 describe('autoCloseMarkdown - dropTrailingOpeners', () => {
+  it('keeps a component closer on its own line', () => {
+    expect(autoCloseMarkdown('::alert\nContent\n::', { dropTrailingOpeners: true })).toBe('::alert\nContent\n::')
+  })
   it('drops a trailing space-flanked opener', () => {
     expect(autoCloseMarkdown('hello *', { dropTrailingOpeners: true })).toBe('hello')
     expect(autoCloseMarkdown('hello **', { dropTrailingOpeners: true })).toBe('hello')
diff --git a/packages/comark/test/streaming.test.ts b/packages/comark/test/streaming.test.ts
index 06b9a211e..758c01964 100644
--- a/packages/comark/test/streaming.test.ts
+++ b/packages/comark/test/streaming.test.ts
@@ -370,6 +370,71 @@ describe('streaming mode', () => {
     })
   })
 
+  describe('incomplete component stage', () => {
+    const stage = (node: unknown) => (node as ElementNode)[1].$?.ac
+    const streamed = async (md: string) => (await createMarkdownParser()(md, { streaming: true })).nodes
+
+    it('stamps the three stages as a block component streams in', async () => {
+      expect(stage((await streamed('::al'))[0])).toBe('name')
+      expect(stage((await streamed('::alert'))[0])).toBe('name')
+      expect(stage((await streamed('::alert{props'))[0])).toBe('props')
+      expect(stage((await streamed('::alert{type="info'))[0])).toBe('props')
+      expect(stage((await streamed('::alert{.x}\n---\ntype: x'))[0])).toBe('props')
+      expect(stage((await streamed('::hello{.class}\nsome data'))[0])).toBe('content')
+    })
+
+    it('stamps the open slot along with its component', async () => {
+      const card = (await streamed('::card\n#title\nDone\n#body\nSome'))[0] as ElementNode
+      expect(stage(card)).toBe('content')
+      expect(stage(card[2])).toBeUndefined()
+      expect(stage(card[3])).toBe('content')
+    })
+
+    it('stamps only the innermost open component', async () => {
+      const outer = (await streamed('::outer\n:::inner\ntext'))[0] as ElementNode
+      expect(stage(outer)).toBeUndefined()
+      expect(stage(outer[2])).toBe('content')
+    })
+
+    it('stamps a component nested in a list', async () => {
+      const ul = (await streamed('- item\n  ::alert\n  text'))[0] as ElementNode
+      expect(stage((ul[2] as ElementNode)[3])).toBe('content')
+    })
+
+    it('stamps a component whose code fence is still open, keeping the code clean', async () => {
+      const alert = (await streamed('::alert\n```js\ncode'))[0] as ElementNode
+      expect(stage(alert)).toBe('content')
+      expect(JSON.stringify(alert)).not.toContain('::')
+    })
+
+    it('does not stamp finished components', async () => {
+      const nodes = await streamed('::note\nDone\n::\n\n::alert\nPartial')
+      expect(stage(nodes[0])).toBeUndefined()
+      expect(stage(nodes.at(-1))).toBe('content')
+
+      const closed = await streamed('::alert\nContent\n::')
+      expect(closed).toHaveLength(1)
+      expect(stage(closed[0])).toBeUndefined()
+    })
+
+    it('keeps the stamp on the incremental tail, not on reused nodes', async () => {
+      const parse = createMarkdownParser()
+      await parse('::note\nDone\n::\n', { streaming: true })
+      const next = await parse('::note\nDone\n::\n\n::alert\nPartial', { streaming: true })
+      expect(stage(next.nodes[0])).toBeUndefined()
+      expect(stage(next.nodes.at(-1))).toBe('content')
+    })
+
+    it('never stamps a non-streaming parse', async () => {
+      const parse = createMarkdownParser()
+      expect(stage((await parse('::alert\nContent')).nodes[0])).toBeUndefined()
+      expect((await parse('::note\nhi\n:: <!-- just a note -->\n\nafter')).nodes).toEqual([
+        ['note', {}, 'hi'],
+        ['p', {}, 'after'],
+      ])
+    })
+  })
+
   describe('independent parser instances', () => {
     it('each createMarkdownParser instance has independent state', async () => {
       const parse1 = createMarkdownParser()

From dd248cfa636e6274d21267dbc94dbfcd3c255e89 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 9 Oct 2026 12:51:38 +0200
Subject: [PATCH 2/4] docs: drop closer comment note from components syntax

---
 docs/content/2.syntax/2.components.md | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/docs/content/2.syntax/2.components.md b/docs/content/2.syntax/2.components.md
index ccb9d95a8..a44dd9d5b 100644
--- a/docs/content/2.syntax/2.components.md
+++ b/docs/content/2.syntax/2.components.md
@@ -55,13 +55,6 @@ Card content with **markdown** support
 ```
 ::
 
-A closing fence may be followed by an HTML comment, which is dropped:
-
-```mdc
-::note
-Remember to save.
-:: <!-- end of note -->
-```
 
 ## Inline
 

From e39e807e056f12624f3d4e1856dd9c40222cba42 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 9 Oct 2026 15:39:20 +0200
Subject: [PATCH 3/4] test(autoclose): add Components section to auto-close
 SPEC

---
 packages/comark/SPEC/auto-close.md           | 303 +++++++++++++++++++
 packages/comark/test/auto-close-spec.test.ts |   5 +-
 packages/comark/test/spec-runner.mjs         |   8 +
 3 files changed, 314 insertions(+), 2 deletions(-)

diff --git a/packages/comark/SPEC/auto-close.md b/packages/comark/SPEC/auto-close.md
index ddfdae166..46f9db937 100644
--- a/packages/comark/SPEC/auto-close.md
+++ b/packages/comark/SPEC/auto-close.md
@@ -42,6 +42,8 @@ Self-healing markdown for streaming. Completes incomplete syntax so partial AI o
 | `comparisonOperators` | `true` | escape `>` followed by a digit at the start of a list item (`- > 25` → `- \> 25`) (changes final output) |
 | `dropTrailingOpeners` | `false` (`true` when `streaming: true`) | drop a trailing opener after whitespace at EOF (`hello *` → `hello`) |
 | `setextGuard` | `true` when `streaming: true` | append U+200B to a 1–2 char `-`/`=` line under a paragraph so it does not flash as a heading |
+| `syntax` | `false` (`true` in the Components section) | close Comark block components (`::name`) |
+| `markIncomplete` | `false` (`true` in the Components section) | write `<!-- auto-close: <stage> -->` on the closer of the innermost component it had to close |
 
 Legacy aliases accepted for one release: `katex` → `blockMath`, `math` and `inlineKatex` → `inlineMath`.
 
@@ -3490,3 +3492,304 @@ Dropping a partial closer is safe: the heal still emits the full one.
 - ~~strike.~
 + ~~strike.~~
 ```
+
+---
+
+## Components
+
+Comark block components (`::name`) still open at EOF. These cases run with `syntax: true` and `markIncomplete: true` (what a streaming parse uses); the rest of this SPEC runs with both off.
+
+1. **Close innermost first.** Every open component gets its closer (`::`, `:::`, …) at the end, innermost first, at the indentation of its opener.
+2. **Mark only the innermost component.** Its closer carries `<!-- auto-close: <stage> -->`; the parser turns it into `$.ac` on that component. Parents get a plain closer.
+3. **Stages.** `name` — the opener is the last line with nothing after the name (`::alert`). `props` — the opener's `{...}` is still open on the last line, or a YAML props block (`---` right under the opener) is still open. `content` — anything else.
+4. **Shielded regions close first.** A code fence still open inside a component is closed before the component, so its closer is not swallowed as code.
+5. **Open raw HTML hides the marker.** Inside an unclosed `<pre>`, `<script>`, `<style>` or `<textarea>` the closers stay text, so no marker is written.
+6. **Closed means closed.** A closer may carry a trailing HTML comment (`:: <!-- note -->`); it still closes its component.
+
+### Name stage
+
+```diff
+- ::a
++ ::a\n:: <!-- auto-close: name -->
+```
+
+```diff
+- ::alert
++ ::alert\n:: <!-- auto-close: name -->
+```
+
+```diff
+- ::alert-box
++ ::alert-box\n:: <!-- auto-close: name -->
+```
+
+```diff
+- ::$alert
++ ::$alert\n:: <!-- auto-close: name -->
+```
+
+```diff
+- ::alert   
++ ::alert   \n:: <!-- auto-close: name -->
+```
+
+### Props stage
+
+```diff
+- ::alert{
++ ::alert{}\n:: <!-- auto-close: props -->
+```
+
+```diff
+- ::alert{props
++ ::alert{props}\n:: <!-- auto-close: props -->
+```
+
+```diff
+- ::alert{.cls
++ ::alert{.cls}\n:: <!-- auto-close: props -->
+```
+
+```diff
+- ::alert{type="info
++ ::alert{type="info"}\n:: <!-- auto-close: props -->
+```
+
+```diff
+- ::alert{type='info
++ ::alert{type='info'}\n:: <!-- auto-close: props -->
+```
+
+
+A finished `{...}` on the last line is not props any more:
+
+```diff
+- ::alert{type="info"}
++ ::alert{type="info"}\n:: <!-- auto-close: content -->
+```
+
+```diff
+- ::alert[Title]
++ ::alert[Title]\n:: <!-- auto-close: content -->
+```
+
+### YAML props
+
+A `---` right under the opener starts a YAML props block, with or without `{...}` on the opener.
+
+```diff
+- ::alert\n---
++ ::alert\n---\n---\n:: <!-- auto-close: props -->
+```
+
+```diff
+- ::alert\n---\ntype: info
++ ::alert\n---\ntype: info\n---\n:: <!-- auto-close: props -->
+```
+
+```diff
+- ::alert{.x}\n---\ntype: info
++ ::alert{.x}\n---\ntype: info\n---\n:: <!-- auto-close: props -->
+```
+
+A half-typed closing `---` is completed:
+
+```diff
+- ::alert\n---\ntype: info\n--
++ ::alert\n---\ntype: info\n---\n:: <!-- auto-close: props -->
+```
+
+Once the YAML block is closed the stage is content:
+
+```diff
+- ::alert\n---\ntype: info\n---
++ ::alert\n---\ntype: info\n---\n:: <!-- auto-close: content -->
+```
+
+```diff
+- ::alert\n---\ntype: info\n---\nBody
++ ::alert\n---\ntype: info\n---\nBody\n:: <!-- auto-close: content -->
+```
+
+### Content stage
+
+```diff
+- ::alert\n
++ ::alert\n\n:: <!-- auto-close: content -->
+```
+
+```diff
+- ::alert\nSome text
++ ::alert\nSome text\n:: <!-- auto-close: content -->
+```
+
+```diff
+- ::alert{type="info"}\nSome **bold** text
++ ::alert{type="info"}\nSome **bold** text\n:: <!-- auto-close: content -->
+```
+
+Inline healing happens before the closer is appended:
+
+```diff
+- ::alert\nSome **bold
++ ::alert\nSome **bold**\n:: <!-- auto-close: content -->
+```
+
+### Slots
+
+```diff
+- ::card\n#title
++ ::card\n#title\n:: <!-- auto-close: content -->
+```
+
+```diff
+- ::card\n#title\nHello\n#body\nSome
++ ::card\n#title\nHello\n#body\nSome\n:: <!-- auto-close: content -->
+```
+
+### Nesting
+
+Only the innermost open component is marked; closers follow the opener indentation.
+
+```diff
+- ::outer\n:::inner\ntext
++ ::outer\n:::inner\ntext\n::: <!-- auto-close: content -->\n::
+```
+
+```diff
+- :::outer\n  ::inner\n  text
++ :::outer\n  ::inner\n  text\n  :: <!-- auto-close: content -->\n:::
+```
+
+```diff
+- ::::a\n:::b\n::c
++ ::::a\n:::b\n::c\n:: <!-- auto-close: name -->\n:::\n::::
+```
+
+```diff
+- ::outer\n:::inner{type="x
++ ::outer\n:::inner{type="x"}\n::: <!-- auto-close: props -->\n::
+```
+
+A finished child leaves its parent as the innermost open component:
+
+```diff
+- ::outer\n:::inner\nDone\n:::\nmore
++ ::outer\n:::inner\nDone\n:::\nmore\n:: <!-- auto-close: content -->
+```
+
+### Components in lists and after other content
+
+```diff
+- - item\n  ::alert\n  text
++ - item\n  ::alert\n  text\n  :: <!-- auto-close: content -->
+```
+
+```diff
+- ::note\nDone\n::\n\n::alert\nPartial
++ ::note\nDone\n::\n\n::alert\nPartial\n:: <!-- auto-close: content -->
+```
+
+### Code fences inside a component
+
+An open fence is closed first, with the same run and indentation as its opener.
+
+```diff
+- ::alert\n```js\ncode
++ ::alert\n```js\ncode\n```\n:: <!-- auto-close: content -->
+```
+
+```diff
+- ::alert\n````\ncode
++ ::alert\n````\ncode\n````\n:: <!-- auto-close: content -->
+```
+
+```diff
+- ::alert\n  ~~~\ncode\n
++ ::alert\n  ~~~\ncode\n  ~~~\n:: <!-- auto-close: content -->
+```
+
+`::` inside the fence is code, not a closer:
+
+```diff
+- ::alert\n```md\n::\n
++ ::alert\n```md\n::\n```\n:: <!-- auto-close: content -->
+```
+
+A closed fence needs nothing extra:
+
+```diff
+- ::alert\n```js\ncode\n```
++ ::alert\n```js\ncode\n```\n:: <!-- auto-close: content -->
+```
+
+An open fence outside any component stays open:
+
+```diff
+- ```js\ncode
++ ```js\ncode
+```
+
+### Raw HTML
+
+The closers land inside the raw HTML as text, so no marker is written.
+
+```diff
+- ::alert\n<pre>\nx
++ ::alert\n<pre>\nx\n::
+```
+
+```diff
+- ::alert\n<pre>\nx\n</pre>\nafter
++ ::alert\n<pre>\nx\n</pre>\nafter\n:: <!-- auto-close: content -->
+```
+
+### Closed components
+
+```diff
+- ::alert\nContent\n::
++ ::alert\nContent\n::
+```
+
+```diff
+- ::alert\nContent\n::\n
++ ::alert\nContent\n::\n
+```
+
+```diff
+- ::alert\nContent\n:: <!-- note -->
++ ::alert\nContent\n:: <!-- note -->
+```
+
+```diff
+- ::alert\nContent\n::   <!-- note -->  
++ ::alert\nContent\n::   <!-- note -->  
+```
+
+Any other text after the colons is a new opener, not a closer:
+
+```diff
+- ::alert\nContent\n:: not a comment
++ ::alert\nContent\n:: not a comment\n:: <!-- auto-close: content -->
+```
+
+### Streaming (`streaming: true`)
+
+A closer typed without a trailing newline is kept:
+
+```diff opts="streaming: true"
+- ::alert\nContent\n::
++ ::alert\nContent\n::
+```
+
+A bare trailing `::` with nothing open is dropped so it does not flash:
+
+```diff opts="streaming: true"
+- text\n::
++ text\n
+```
+
+```diff opts="streaming: true"
+- ::alert
++ ::alert\n:: <!-- auto-close: name -->
+```
diff --git a/packages/comark/test/auto-close-spec.test.ts b/packages/comark/test/auto-close-spec.test.ts
index 8a43b2e1f..d41f3201d 100644
--- a/packages/comark/test/auto-close-spec.test.ts
+++ b/packages/comark/test/auto-close-spec.test.ts
@@ -39,8 +39,9 @@ function map(opts: SpecOptions): Record<string, unknown> {
     // Pass block/inline math independently (comark supports both flags).
     blockMath: generic.blockMath === true,
     inlineMath: generic.inlineMath === true,
-    // SPEC is CommonMark/GFM — disable Comark component closing.
-    syntax: false,
+    // Comark component closing is off except where the SPEC turns it on (Components section).
+    syntax: generic.syntax === true,
+    markIncomplete: generic.markIncomplete === true,
     frontmatter: false,
   }
 }
diff --git a/packages/comark/test/spec-runner.mjs b/packages/comark/test/spec-runner.mjs
index 97ea5f302..8c698154c 100644
--- a/packages/comark/test/spec-runner.mjs
+++ b/packages/comark/test/spec-runner.mjs
@@ -46,6 +46,8 @@ export const DEFAULT_SPEC_OPTIONS = {
   dropTrailingOpeners: false,
   setextGuard: false,
   streaming: false,
+  syntax: false,
+  markIncomplete: false,
 }
 
 const CANONICAL_KEYS = new Set(Object.keys(DEFAULT_SPEC_OPTIONS))
@@ -150,6 +152,10 @@ export function applySectionHints(section, opts) {
   const overrides = {}
   if (/trailing openers/i.test(section)) overrides.dropTrailingOpeners = true
   if (/text-only mode/i.test(section)) overrides.linkMode = 'text-only'
+  if (/^components\b/i.test(section)) {
+    overrides.syntax = true
+    overrides.markIncomplete = true
+  }
   if (Object.keys(overrides).length === 0) return opts
   return resolveOptions({ ...opts, ...overrides })
 }
@@ -603,6 +609,8 @@ export function toGenericAutoCloseOptions(opts) {
     dropTrailingOpeners: opts.dropTrailingOpeners,
     setextGuard: opts.setextGuard,
     streaming: opts.streaming,
+    syntax: opts.syntax,
+    markIncomplete: opts.markIncomplete,
   }
 }
 

From b723f8c994e32e67547128c3c78283e949fdeceb Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 9 Oct 2026 15:39:57 +0200
Subject: [PATCH 4/4] refactor(components): inline dedent helpers and remove
 indent.ts

---
 AGENTS.md                                    |  7 +-
 packages/comark/src/internal/parse/indent.ts | 94 --------------------
 packages/comark/src/plugins/components.ts    | 89 +++++++++++++++++-
 3 files changed, 90 insertions(+), 100 deletions(-)
 delete mode 100644 packages/comark/src/internal/parse/indent.ts

diff --git a/AGENTS.md b/AGENTS.md
index bcb9d69ac..1f4a7223b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -101,7 +101,7 @@ packages/comark/
 │       │   ├── html/         # HTML block/inline rules
 │       │   ├── syntax/       # Component syntax scanners (props, brackets, block params)
 │       │   ├── incremental.ts # Node reuse between streaming parses
-│       │   ├── indent.ts     # Dedent of outdented component children
+
 │       │   ├── unwrap.ts     # `unwrap` option
 │       │   └── auto-unwrap.ts # `autoUnwrap` option
 │       └── stringify/        # AST → markdown string rendering (handlers/ per tag)
@@ -706,9 +706,8 @@ lossless through `parseMarkdown` → `renderMarkdown`:
 **Parse — dedent the children, don't raise the floor.** A child indented *less*
 than its own component marker is never dropped. Each child line is shifted left
 by `min(markerIndent, its own indentation)` and the region is tokenized against
-a zero floor (`comark_block` in `src/plugins/components.ts` via
-`src/internal/parse/indent.ts`, mirroring the line-mark mutation `blockquote`
-uses to strip its markers). Lines inside a
+a zero floor (`comark_block` via `tokenizeDedented()` in `src/plugins/components.ts`,
+mirroring the line-mark mutation `blockquote` uses to strip its markers). Lines inside a
 fenced code block all take the *opening fence's* shift, so the fence and its
 body move together. The shift is all or nothing: a tab that would have to be
 split into columns puts the region back and keeps the marker floor. A component
diff --git a/packages/comark/src/internal/parse/indent.ts b/packages/comark/src/internal/parse/indent.ts
deleted file mode 100644
index a8818ab2b..000000000
--- a/packages/comark/src/internal/parse/indent.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Indentation shifting for a block component's children.
- *
- * A child indented less than its own `::` marker used to be dropped.
- * These helpers shift the region left instead.
- */
-
-import type { StateBlock } from 'markdown-exit'
-
-/**
- * Remove up to `columns` columns of indentation from `line`, in place.
- * Returns `false` when a tab spans the boundary, leaving the line untouched.
- * `bMarks` moves past the consumed characters, so offsets derived from it hold.
- */
-function dedentLine(state: StateBlock, line: number, columns: number): boolean {
-  const lineStart = state.bMarks[line]
-  const max = state.eMarks[line]
-  let pos = lineStart
-  let consumed = 0
-
-  while (pos < max && consumed < columns) {
-    const code = state.src.charCodeAt(pos)
-    if (code === 0x20 /* space */) {
-      consumed++
-    } else if (code === 0x09 /* tab */) {
-      const width = 4 - ((consumed + state.bsCount[line]) % 4)
-      // A tab across the boundary would have to become spaces to be split.
-      if (consumed + width > columns) return false
-      consumed += width
-    } else {
-      // Less indentation than asked for: a fence body left of its own fence.
-      break
-    }
-    pos++
-  }
-
-  if (consumed > 0) {
-    state.bMarks[line] = pos
-    state.bsCount[line] += consumed
-    state.sCount[line] -= consumed
-    state.tShift[line] -= pos - lineStart
-  }
-
-  return true
-}
-
-/**
- * Tokenize `[from, to)` with every line dedented by its entry in `shifts`.
- * Returns `false` when a line resists the shift, leaving the region untouched.
- * All or nothing: a half-shifted region would parse as neither form.
- */
-export function tokenizeDedented(state: StateBlock, from: number, to: number, shifts: number[]): boolean {
-  const bMarks: number[] = []
-  const bsCount: number[] = []
-  const sCount: number[] = []
-  const tShift: number[] = []
-
-  for (let line = from; line < to; line++) {
-    bMarks.push(state.bMarks[line])
-    bsCount.push(state.bsCount[line])
-    sCount.push(state.sCount[line])
-    tShift.push(state.tShift[line])
-    if (!dedentLine(state, line, shifts[line - from])) {
-      restoreLines(state, from, bMarks, bsCount, sCount, tShift)
-      return false
-    }
-  }
-
-  const blkIndent = state.blkIndent
-  state.blkIndent = 0
-  state.md.block.tokenize(state, from, to)
-  state.blkIndent = blkIndent
-  restoreLines(state, from, bMarks, bsCount, sCount, tShift)
-
-  return true
-}
-
-/** Put back the line marks saved before {@link dedentLine} shifted them. */
-function restoreLines(
-  state: StateBlock,
-  from: number,
-  bMarks: number[],
-  bsCount: number[],
-  sCount: number[],
-  tShift: number[]
-): void {
-  for (let i = 0; i < bMarks.length; i++) {
-    const line = from + i
-    state.bMarks[line] = bMarks[i]
-    state.bsCount[line] = bsCount[i]
-    state.sCount[line] = sCount[i]
-    state.tShift[line] = tShift[i]
-  }
-}
diff --git a/packages/comark/src/plugins/components.ts b/packages/comark/src/plugins/components.ts
index 2bae17fb2..9b83d7f84 100644
--- a/packages/comark/src/plugins/components.ts
+++ b/packages/comark/src/plugins/components.ts
@@ -8,13 +8,12 @@
  * @see https://comark.dev/syntax/components
  */
 
-import type { PluginSimple, Token } from 'markdown-exit'
+import type { PluginSimple, StateBlock, Token } from 'markdown-exit'
 import type { MarkdownItPlugin } from '../types.ts'
 import { defineComarkPlugin } from '../utils/helpers.ts'
 import { findClosingBracket, parseBracketContent } from '../internal/parse/syntax/brackets.ts'
 import { parseBlockParams } from '../internal/parse/syntax/block-params.ts'
 import { parseYaml } from '../internal/yaml.ts'
-import { tokenizeDedented } from '../internal/parse/indent.ts'
 
 /**
  * A component name must start with a letter or `$`, followed by word chars,
@@ -60,6 +59,92 @@ function autoCloseStage(src: string, from: number, to: number): string | undefin
   return AUTO_CLOSE_STAGES.has(stage) ? stage : undefined
 }
 
+/**
+ * Remove up to `columns` columns of indentation from `line`, in place.
+ * Returns `false` when a tab spans the boundary, leaving the line untouched.
+ * `bMarks` moves past the consumed characters, so offsets derived from it hold.
+ */
+function dedentLine(state: StateBlock, line: number, columns: number): boolean {
+  const lineStart = state.bMarks[line]
+  const max = state.eMarks[line]
+  let pos = lineStart
+  let consumed = 0
+
+  while (pos < max && consumed < columns) {
+    const code = state.src.charCodeAt(pos)
+    if (code === 0x20 /* space */) {
+      consumed++
+    } else if (code === 0x09 /* tab */) {
+      const width = 4 - ((consumed + state.bsCount[line]) % 4)
+      // A tab across the boundary would have to become spaces to be split.
+      if (consumed + width > columns) return false
+      consumed += width
+    } else {
+      // Less indentation than asked for: a fence body left of its own fence.
+      break
+    }
+    pos++
+  }
+
+  if (consumed > 0) {
+    state.bMarks[line] = pos
+    state.bsCount[line] += consumed
+    state.sCount[line] -= consumed
+    state.tShift[line] -= pos - lineStart
+  }
+
+  return true
+}
+
+/**
+ * Tokenize `[from, to)` with every line dedented by its entry in `shifts`.
+ * Returns `false` when a line resists the shift, leaving the region untouched.
+ * All or nothing: a half-shifted region would parse as neither form.
+ */
+function tokenizeDedented(state: StateBlock, from: number, to: number, shifts: number[]): boolean {
+  const bMarks: number[] = []
+  const bsCount: number[] = []
+  const sCount: number[] = []
+  const tShift: number[] = []
+
+  for (let line = from; line < to; line++) {
+    bMarks.push(state.bMarks[line])
+    bsCount.push(state.bsCount[line])
+    sCount.push(state.sCount[line])
+    tShift.push(state.tShift[line])
+    if (!dedentLine(state, line, shifts[line - from])) {
+      restoreLines(state, from, bMarks, bsCount, sCount, tShift)
+      return false
+    }
+  }
+
+  const blkIndent = state.blkIndent
+  state.blkIndent = 0
+  state.md.block.tokenize(state, from, to)
+  state.blkIndent = blkIndent
+  restoreLines(state, from, bMarks, bsCount, sCount, tShift)
+
+  return true
+}
+
+/** Put back the line marks saved before {@link dedentLine} shifted them. */
+function restoreLines(
+  state: StateBlock,
+  from: number,
+  bMarks: number[],
+  bsCount: number[],
+  sCount: number[],
+  tShift: number[]
+): void {
+  for (let i = 0; i < bMarks.length; i++) {
+    const line = from + i
+    state.bMarks[line] = bMarks[i]
+    state.bsCount[line] = bsCount[i]
+    state.sCount[line] = sCount[i]
+    state.tShift[line] = tShift[i]
+  }
+}
+
 const blockYamlLines: Record<string, string> = {
   '---': '---',
   '```yaml [props]': '```',