@dogsbay/format-astro 0.2.0-beta.0

package/dist/serialize.js

@@ -0,0 +1,1197 @@
+/**
+ * Tone palette for `:::grid-item{label="..." tone="..."}` cells.
+ * Each tone is a `bg + text` Tailwind class pair. Used to make grid demos
+ * declarative — authors specify a tone instead of writing the styling.
+ */
+const TONE_CLASSES = {
+    // Primary scale (intensity)
+    "primary": "bg-primary text-primary-foreground",
+    "primary-strong": "bg-primary/80 text-primary-foreground",
+    "primary-medium": "bg-primary/60 text-primary-foreground",
+    "primary-half": "bg-primary/50 text-primary-foreground",
+    "primary-light": "bg-primary/20 text-primary",
+    "primary-soft": "bg-primary/10 text-primary",
+    // Neutral
+    "muted": "bg-muted text-muted-foreground",
+    // Named colors (for layout demos with distinct cells)
+    "blue": "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+    "amber": "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    "green": "bg-green-500/15 text-green-700 dark:text-green-300",
+    "purple": "bg-purple-500/15 text-purple-700 dark:text-purple-300",
+    "red": "bg-red-500/15 text-red-700 dark:text-red-300",
+};
+const COMPONENT_IMPORTS = {
+    "markdown-example": [
+        'import MarkdownExample from "@ui/markdown-example/MarkdownExample.astro";',
+    ],
+    callout: [
+        'import Alert from "@ui/alert/Alert.astro";',
+        'import AlertTitle from "@ui/alert/AlertTitle.astro";',
+        'import AlertDescription from "@ui/alert/AlertDescription.astro";',
+    ],
+    details: [
+        'import CollapsibleAlert from "@ui/alert/CollapsibleAlert.astro";',
+    ],
+    code: [
+        'import CodeBlock from "@ui/code-block/CodeBlock.astro";',
+    ],
+    "code-rich": [
+        'import CodeRich from "@ui/code-rich/CodeRich.astro";',
+        'import "@ui/code-rich/code-rich.css";',
+    ],
+    tabs: [
+        'import Tabs from "@ui/tabs/Tabs.astro";',
+        'import TabsList from "@ui/tabs/TabsList.astro";',
+        'import TabsTrigger from "@ui/tabs/TabsTrigger.astro";',
+        'import TabsContent from "@ui/tabs/TabsContent.astro";',
+    ],
+    table: [
+        'import Table from "@ui/table/Table.astro";',
+        'import TableHeader from "@ui/table/TableHeader.astro";',
+        'import TableBody from "@ui/table/TableBody.astro";',
+        'import TableRow from "@ui/table/TableRow.astro";',
+        'import TableHead from "@ui/table/TableHead.astro";',
+        'import TableCell from "@ui/table/TableCell.astro";',
+    ],
+    diagram: ['import Diagram from "@ui/diagram/Diagram.astro";'],
+    youtube: ['import YouTube from "@ui/youtube/YouTube.astro";'],
+    "math-block": ['import MathKatex from "@ui/math/MathKatex.astro";'],
+    image: ['import BlockImage from "@ui/image/Image.astro";'],
+    "api-class": ['import ApiSymbol from "@ui/api-symbol/ApiSymbol.astro";'],
+    "api-doc": ['import ApiDoc from "@ui/api-doc/ApiDoc.astro";'],
+    "api-params": ['import ApiParams from "@ui/api-params/ApiParams.astro";'],
+    "api-source": ['import ApiSource from "@ui/api-source/ApiSource.astro";'],
+    endpoint: [
+        'import ApiLayout from "@ui/api-layout/ApiLayout.astro";',
+        'import ApiCodePanel from "@ui/api-layout/ApiCodePanel.astro";',
+        'import ExampleBlock from "@ui/api-layout/ExampleBlock.astro";',
+        'import EndpointCard from "@ui/endpoint-card/EndpointCard.astro";',
+        'import EndpointSection from "@ui/endpoint-card/EndpointSection.astro";',
+        'import PropertyList from "@ui/property-list/PropertyList.astro";',
+        'import ResponseTabs from "@ui/response-tabs/ResponseTabs.astro";',
+        'import SchemaViewer from "@ui/schema-viewer/SchemaViewer.astro";',
+        'import CodeSamples from "@ui/code-samples/CodeSamples.astro";',
+    ],
+    steps: [
+        'import Steps from "@ui/steps/Steps.astro";',
+        'import Step from "@ui/steps/Step.astro";',
+    ],
+    substeps: [
+        'import SubSteps from "@ui/steps/SubSteps.astro";',
+    ],
+    grid: [
+        'import Grid from "@ui/grid/Grid.astro";',
+        'import GridItem from "@ui/grid/GridItem.astro";',
+    ],
+    card: [
+        'import Card from "@ui/card/Card.astro";',
+        'import CardContent from "@ui/card/CardContent.astro";',
+    ],
+    accordion: [
+        'import Accordion from "@ui/accordion/Accordion.astro";',
+        'import AccordionItem from "@ui/accordion/AccordionItem.astro";',
+        'import AccordionTrigger from "@ui/accordion/AccordionTrigger.astro";',
+        'import AccordionContent from "@ui/accordion/AccordionContent.astro";',
+    ],
+    "link-card": [
+        'import LinkCard from "@ui/link-card/LinkCard.astro";',
+    ],
+    avatar: [
+        'import Avatar from "@ui/avatar/Avatar.astro";',
+    ],
+};
+// ─── Escaping helpers ─────────────────────────────────────────────
+/** Escape for use inside an Astro {expression}. Uses JSON.stringify for safety. */
+export function escapeExpr(s) {
+    // JSON.stringify handles all special characters (quotes, backslashes, newlines, etc.)
+    // and produces a valid JS string literal. This avoids template literal edge cases
+    // where backtick + brace combinations create false expression boundaries.
+    return JSON.stringify(s);
+}
+/** Escape for use in an HTML attribute value (double-quoted). */
+export function escapeAttr(s) {
+    return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+/** Escape text for use directly in an Astro template (not inside an expression). */
+export function escapeTemplate(s) {
+    let result = "";
+    for (const ch of s) {
+        switch (ch) {
+            case "&":
+                result += "&amp;";
+                break;
+            case "<":
+                result += "&lt;";
+                break;
+            case ">":
+                result += "&gt;";
+                break;
+            case "{":
+                result += '{"{"}';
+                break;
+            case "}":
+                result += '{"}"}';
+                break;
+            default: result += ch;
+        }
+    }
+    return result;
+}
+// ─── Main entry point ─────────────────────────────────────────────
+export function treeToAstro(nodes, options) {
+    const ctx = {
+        imports: new Set(),
+        indent: 0,
+        scripts: new Set(),
+        mode: options?.mode ?? "template",
+        imageOptimization: options?.imageOptimization ?? false,
+        codeBlockTitle: options?.codeBlockTitle ?? true,
+    };
+    const body = nodes.map((n) => nodeToAstro(n, ctx)).filter(Boolean).join("\n");
+    const imports = [];
+    const seen = new Set();
+    for (const key of ctx.imports) {
+        const stmts = COMPONENT_IMPORTS[key];
+        if (stmts) {
+            for (const stmt of stmts) {
+                if (!seen.has(stmt)) {
+                    seen.add(stmt);
+                    imports.push(stmt);
+                }
+            }
+        }
+    }
+    return {
+        body,
+        imports: imports.sort(),
+        scripts: [...ctx.scripts],
+    };
+}
+// ─── Node dispatcher ──────────────────────────────────────────────
+function nodeToAstro(node, ctx) {
+    switch (node.type) {
+        case "prose":
+            return proseToAstro(node, ctx);
+        case "heading":
+            return headingToAstro(node, ctx);
+        case "paragraph":
+            return paragraphToAstro(node, ctx);
+        case "code":
+            return codeToAstro(node, ctx);
+        case "callout":
+            return calloutToAstro(node, ctx);
+        case "details":
+            return detailsToAstro(node, ctx);
+        case "tabs":
+            return tabsToAstro(node, ctx);
+        case "ordered-list":
+            return wrapBlock("ol", "", node, childrenToAstro(node, ctx), ["start"])
+                .replace(/^<ol(\s[^>]*)?>/, (m) => {
+                const start = node.props?.start;
+                if (start && start !== 1) {
+                    return m.replace(/^<ol/, `<ol start="${start}"`);
+                }
+                return m;
+            });
+        case "unordered-list":
+            return wrapBlock("ul", "", node, childrenToAstro(node, ctx));
+        case "list-item":
+            return wrapBlock("li", "", node, leafContent(node, ctx));
+        case "blockquote":
+            return wrapBlock("blockquote", "border-l-4 border-border pl-4 italic text-muted-foreground", node, childrenToAstro(node, ctx));
+        case "hr": {
+            const classAttr = mergeClassAttr("my-8 border-border", node.props?.class);
+            const passthrough = renderPassthroughAttrs(node.props, ["class"]);
+            return `<hr${classAttr}${passthrough} />`;
+        }
+        case "html":
+            // Raw HTML always uses set:html — it may contain anything
+            return `<Fragment set:html={${escapeExpr(node.html ?? "")}} />`;
+        case "table":
+            return tableToAstro(node, ctx);
+        case "thead":
+            ctx.imports.add("table");
+            return `<TableHeader>\n${childrenToAstro(node, ctx)}\n</TableHeader>`;
+        case "tbody":
+            ctx.imports.add("table");
+            return `<TableBody>\n${childrenToAstro(node, ctx)}\n</TableBody>`;
+        case "tr":
+            ctx.imports.add("table");
+            return `<TableRow>\n${childrenToAstro(node, ctx)}\n</TableRow>`;
+        case "th":
+            ctx.imports.add("table");
+            return `<TableHead>${leafContent(node, ctx)}</TableHead>`;
+        case "td":
+            ctx.imports.add("table");
+            return `<TableCell>${leafContent(node, ctx)}</TableCell>`;
+        case "deflist":
+            return wrapBlock("dl", "my-4 space-y-2", node, childrenToAstro(node, ctx));
+        case "dt":
+            return wrapBlock("dt", "font-semibold", node, leafContent(node, ctx));
+        case "dd":
+            return wrapBlock("dd", "ml-6 text-muted-foreground", node, leafContent(node, ctx));
+        case "diagram":
+            return diagramToAstro(node, ctx);
+        case "youtube":
+            return youtubeToAstro(node, ctx);
+        case "math-block":
+            return mathBlockToAstro(node, ctx);
+        case "footnote-list":
+            return footnoteListToAstro(node, ctx);
+        case "footnote-def":
+            return footnoteDefToAstro(node, ctx);
+        case "api-class":
+        case "api-member":
+            return apiSymbolToAstro(node, ctx);
+        case "api-doc":
+            return apiDocToAstro(node, ctx);
+        case "api-params":
+            return apiParamsToAstro(node, ctx);
+        case "api-source":
+            return apiSourceToAstro(node, ctx);
+        case "endpoint":
+            return endpointToAstro(node, ctx);
+        case "html-container":
+            return htmlContainerToAstro(node, ctx);
+        case "example":
+            return exampleToAstro(node, ctx);
+        case "figure": {
+            const caption = node.props?.caption;
+            const inner = childrenToAstro(node, ctx);
+            const body = caption
+                ? `${inner}\n<figcaption class="text-center text-sm text-muted-foreground mt-2">${escapeTemplate(caption)}</figcaption>`
+                : inner;
+            return wrapBlock("figure", "my-4", node, body, ["caption"]);
+        }
+        case "steps":
+            ctx.imports.add("steps");
+            return `<Steps>\n${childrenToAstro(node, ctx)}\n</Steps>`;
+        case "step":
+            ctx.imports.add("steps");
+            return `<Step>\n${leafContent(node, ctx)}\n</Step>`;
+        case "substeps":
+            ctx.imports.add("substeps");
+            ctx.imports.add("steps");
+            return `<SubSteps>\n${childrenToAstro(node, ctx)}\n</SubSteps>`;
+        case "annotation-list":
+            return wrapBlock("div", "my-2 rounded-md border-l-4 border-info/50 bg-info/5 p-4", node, childrenToAstro(node, ctx));
+        case "cards":
+            return cardsToAstro(node, ctx);
+        case "card":
+            // Standalone card — outside :::cards. Renders as a single styled card,
+            // optionally clickable when href is present. Cards inside :::cards are
+            // handled by cardsToAstro and never reach this case.
+            return standaloneCardToAstro(node, ctx);
+        case "link-card":
+            return linkCardToAstro(node, ctx);
+        case "accordion":
+            return accordionToAstro(node, ctx);
+        case "accordion-item":
+            // Bare accordion-item outside an :::accordion wrapper. Wrap it in an
+            // Accordion shell so the output is still a valid widget.
+            return accordionItemToAstro(node, ctx, /*standalone*/ true);
+        case "avatar":
+            return avatarToAstro(node, ctx);
+        case "grid": {
+            ctx.imports.add("grid");
+            // Grid component takes cols/gap/rows as props. User class goes through
+            // as the outer class attribute. Numeric-looking string values (e.g.
+            // cols="3") are coerced to numbers for the JSX prop.
+            const cols = coerceNumericList(node.props?.cols, [1, 2]);
+            const gap = coerceNumeric(node.props?.gap, 4);
+            const rows = node.props?.rows;
+            const classAttr = mergeClassAttr("", node.props?.class);
+            const passthrough = renderPassthroughAttrs(node.props, [
+                "cols", "gap", "rows", "class",
+            ]);
+            const rowsAttr = rows !== undefined ? ` rows={${JSON.stringify(coerceNumeric(rows, 1))}}` : "";
+            return `<Grid cols={${JSON.stringify(cols)}} gap={${JSON.stringify(gap)}}${rowsAttr}${classAttr}${passthrough}>
+${childrenToAstro(node, ctx)}
+</Grid>`;
+        }
+        case "grid-item": {
+            ctx.imports.add("grid");
+            const span = coerceNumeric(node.props?.span, 1);
+            const rowSpan = node.props?.rowSpan;
+            const start = node.props?.start;
+            const label = node.props?.label;
+            const tone = node.props?.tone ?? "primary-light";
+            const attrParts = [`span={${span}}`];
+            if (rowSpan !== undefined)
+                attrParts.push(`rowSpan={${coerceNumeric(rowSpan, 1)}}`);
+            if (start !== undefined)
+                attrParts.push(`start={${coerceNumeric(start, 1)}}`);
+            const classAttr = mergeClassAttr("", node.props?.class);
+            const passthrough = renderPassthroughAttrs(node.props, [
+                "span", "rowSpan", "start", "label", "tone", "class",
+            ]);
+            // When `label` is set, auto-render a styled placeholder cell. The tone
+            // controls the bg/text combo (see TONE_CLASSES). Authors can also pass
+            // their own `class` to override.
+            if (label !== undefined) {
+                const toneClasses = TONE_CLASSES[tone] ?? TONE_CLASSES["primary-light"];
+                return `<GridItem ${attrParts.join(" ")}${classAttr}${passthrough}>
+  <div class="flex h-full min-h-16 items-center justify-center rounded-lg font-mono text-sm font-medium ${toneClasses}">${escapeTemplate(label)}</div>
+</GridItem>`;
+            }
+            return `<GridItem ${attrParts.join(" ")}${classAttr}${passthrough}>
+${childrenToAstro(node, ctx)}
+</GridItem>`;
+        }
+        default:
+            if (node.html)
+                return `<Fragment set:html={${escapeExpr(node.html)}} />`;
+            if (node.children)
+                return childrenToAstro(node, ctx);
+            return "";
+    }
+}
+// ─── Inline rendering ─────────────────────────────────────────────
+/** Render inline nodes as Astro template markup (clean, editable). */
+function inlineToTemplate(nodes) {
+    return nodes.map(inlineNodeToTemplate).join("");
+}
+function inlineNodeToTemplate(node) {
+    switch (node.type) {
+        case "text": {
+            let text = escapeTemplate(node.text);
+            if (node.bold)
+                text = `<strong>${text}</strong>`;
+            if (node.italic)
+                text = `<em>${text}</em>`;
+            if (node.strikethrough)
+                text = `<s>${text}</s>`;
+            return text;
+        }
+        case "link": {
+            const titleAttr = node.title ? ` title="${escapeAttr(node.title)}"` : "";
+            return `<a href="${escapeAttr(node.href)}"${titleAttr}>${inlineToTemplate(node.children)}</a>`;
+        }
+        case "image":
+            return `<img src="${escapeAttr(node.src)}" alt="${escapeAttr(node.alt ?? "")}" loading="lazy" />`;
+        case "code":
+            return `<code>${escapeTemplate(node.text)}</code>`;
+        case "footnote-ref":
+            return `<sup><a href="#fn-${escapeAttr(node.label)}" id="fnref-${escapeAttr(node.label)}" class="text-primary hover:underline">[${escapeTemplate(node.label)}]</a></sup>`;
+        case "kbd":
+            return node.keys.map((k) => `<kbd>${escapeTemplate(k)}</kbd>`).join("+");
+        case "math":
+            return `<code class="math-inline">${escapeTemplate(node.latex)}</code>`;
+        case "icon":
+            return `:${node.name}:`;
+        case "html-inline":
+            // Raw HTML inline — must use set:html to avoid brace issues
+            return `<Fragment set:html={${escapeExpr(node.html)}} />`;
+        case "break":
+            return "<br />";
+        default:
+            return "";
+    }
+}
+/** Render inline nodes as HTML string (for hybrid mode set:html). */
+function inlineToHtml(nodes) {
+    return nodes.map(inlineNodeToHtml).join("");
+}
+function inlineNodeToHtml(node) {
+    switch (node.type) {
+        case "text": {
+            let text = escapeHtml(node.text);
+            if (node.bold)
+                text = `<strong>${text}</strong>`;
+            if (node.italic)
+                text = `<em>${text}</em>`;
+            if (node.strikethrough)
+                text = `<s>${text}</s>`;
+            return text;
+        }
+        case "link": {
+            const titleAttr = node.title ? ` title="${escapeAttr(node.title)}"` : "";
+            return `<a href="${escapeAttr(node.href)}"${titleAttr}>${inlineToHtml(node.children)}</a>`;
+        }
+        case "image":
+            return `<img src="${escapeAttr(node.src)}" alt="${escapeAttr(node.alt ?? "")}" loading="lazy" />`;
+        case "code":
+            return `<code>${escapeHtml(node.text)}</code>`;
+        case "footnote-ref":
+            return `<sup><a href="#fn-${escapeAttr(node.label)}" id="fnref-${escapeAttr(node.label)}" class="text-primary hover:underline">[${escapeHtml(node.label)}]</a></sup>`;
+        case "kbd":
+            return node.keys.map((k) => `<kbd>${escapeHtml(k)}</kbd>`).join("+");
+        case "math":
+            return `<code class="math-inline">${escapeHtml(node.latex)}</code>`;
+        case "icon":
+            return `:${node.name}:`;
+        case "html-inline":
+            return node.html;
+        case "break":
+            return "<br />";
+        default:
+            return "";
+    }
+}
+/** Render inline content in the current mode. */
+function renderInline(nodes, ctx) {
+    if (ctx.mode === "hybrid") {
+        const html = inlineToHtml(nodes);
+        return `<Fragment set:html={${escapeExpr(html)}} />`;
+    }
+    return inlineToTemplate(nodes);
+}
+/** Render an HTML string in the current mode. */
+function renderHtml(html, ctx) {
+    // Always use set:html for pre-rendered HTML — it may contain anything
+    return `<Fragment set:html={${escapeExpr(html)}} />`;
+}
+// ─── Node type handlers ───────────────────────────────────────────
+function proseToAstro(node, ctx) {
+    if (node.inline)
+        return renderInline(node.inline, ctx);
+    if (node.html)
+        return renderHtml(node.html, ctx);
+    return "";
+}
+function headingToAstro(node, ctx) {
+    const level = node.props?.level ?? 1;
+    // `id` takes precedence over `slug` (slug is auto-generated, id is explicit user override)
+    const id = node.props?.id ?? node.props?.slug ?? "";
+    const anchor = id
+        ? `<a href="#${escapeAttr(id)}" class="ml-2 text-muted-foreground opacity-0 group-hover:opacity-100 no-underline" aria-hidden="true" tabindex="-1">&para;</a>`
+        : "";
+    const idAttr = id ? ` id="${escapeAttr(id)}"` : "";
+    const classAttr = mergeClassAttr("group scroll-mt-20", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "level", "slug", "id", "class", "text",
+    ]);
+    if (ctx.mode === "template" && node.inline) {
+        const text = inlineToTemplate(node.inline);
+        return `<h${level}${idAttr}${classAttr}${passthrough}>${text}${anchor}</h${level}>`;
+    }
+    // Hybrid or no inline — use set:html for the whole heading
+    const text = node.inline ? inlineToHtml(node.inline) : node.props?.text ?? "";
+    const html = `<h${level}${idAttr}${classAttr}${passthrough}>${text}${anchor}</h${level}>`;
+    return `<Fragment set:html={${escapeExpr(html)}} />`;
+}
+function paragraphToAstro(node, ctx) {
+    // Two shapes supported: paragraph.inline (flat) or paragraph.children[prose.inline] (Starlight)
+    const inlineNodes = node.inline
+        ?? (node.children?.length === 1 && node.children[0].type === "prose"
+            ? node.children[0].inline
+            : undefined);
+    // Block image detection
+    if (inlineNodes) {
+        const meaningful = inlineNodes.filter((n) => !(n.type === "text" && !n.text.trim()));
+        if (meaningful.length === 1 && meaningful[0].type === "image") {
+            const img = meaningful[0];
+            ctx.imports.add("image");
+            const imgDataAttr = ctx.imageOptimization
+                ? ` imageData={imageMap[${escapeExpr(img.src)}]}`
+                : "";
+            // Forward arbitrary `data-*` / `aria-*` attrs that plugins
+            // may have attached to the wrapping paragraph (e.g.
+            // @dogsbay/plugin-image-zoom tags `data-zoomable="true"` so
+            // the runtime can attach handlers without scanning the DOM).
+            const passthrough = renderPassthroughAttrs(node.props, ["class"]);
+            return `<BlockImage src="${escapeAttr(img.src)}" alt="${escapeAttr(img.alt ?? "")}"${passthrough}${imgDataAttr} />`;
+        }
+    }
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, ["class"]);
+    const hasPAttrs = classAttr || passthrough;
+    if (ctx.mode === "template") {
+        // If we have flat inline, render it directly; otherwise fall back to children dispatch
+        if (node.inline && node.inline.length > 0) {
+            return `<p${classAttr}${passthrough}>${inlineToTemplate(node.inline)}</p>`;
+        }
+        return `<p${classAttr}${passthrough}>${childrenToAstro(node, ctx)}</p>`;
+    }
+    // Hybrid mode
+    if (node.inline && node.inline.length > 0) {
+        if (hasPAttrs) {
+            return `<p${classAttr}${passthrough} set:html={${escapeExpr(inlineToHtml(node.inline))}} />`;
+        }
+        return `<p set:html={${escapeExpr(inlineToHtml(node.inline))}} />`;
+    }
+    const html = (node.children ?? []).map((c) => {
+        if (c.inline)
+            return inlineToHtml(c.inline);
+        return c.html ?? "";
+    }).join("");
+    return `<p${classAttr}${passthrough} set:html={${escapeExpr(html)}} />`;
+}
+function codeToAstro(node, ctx) {
+    // Code content may live on props.code (Starlight convention) or node.html
+    // (dogsbay-md convention). Same for lang — Starlight uses props.lang,
+    // dogsbay-md uses props.language.
+    const lang = node.props?.lang
+        || node.props?.language
+        || "plaintext";
+    const code = node.props?.code
+        ?? node.html
+        ?? "";
+    const title = node.props?.title;
+    const highlights = node.props?.highlights;
+    const lineNumbers = node.props?.lineNumbers;
+    const isRich = lineNumbers || highlights || code.includes("[!code");
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const consumed = [
+        "lang", "language", "code", "title", "highlights", "lineNumbers",
+        "class", "ins", "del", "mark", "collapse",
+    ];
+    const passthrough = renderPassthroughAttrs(node.props, consumed);
+    if (isRich) {
+        ctx.imports.add("code-rich");
+        const attrs = [`code={${escapeExpr(code)}}`, `lang="${escapeAttr(lang)}"`];
+        if (title)
+            attrs.push(`title="${escapeAttr(title)}"`);
+        if (lineNumbers)
+            attrs.push("lineNumbers");
+        if (highlights)
+            attrs.push(`highlights="${escapeAttr(highlights)}"`);
+        return `<CodeRich ${attrs.join(" ")}${classAttr}${passthrough} />`;
+    }
+    ctx.imports.add("code");
+    const attrs = [`code={${escapeExpr(code)}}`, `lang="${escapeAttr(lang)}"`];
+    if (title)
+        attrs.push(`title="${escapeAttr(title)}"`);
+    if (ctx.codeBlockTitle !== true) {
+        attrs.push(`showTitle="${ctx.codeBlockTitle}"`);
+    }
+    return `<CodeBlock ${attrs.join(" ")}${classAttr}${passthrough} />`;
+}
+// Map GitHub alert names (and other aliases) to Alert component variants.
+// The Alert variant palette follows MkDocs Material; not every GitHub name
+// maps 1:1, so we translate at the render boundary.
+const CALLOUT_VARIANT_MAP = {
+    important: "info", // GitHub IMPORTANT (purple) → info (blue/purple accent)
+    caution: "danger", // GitHub CAUTION (red) → danger (red)
+    error: "failure",
+    hint: "tip",
+    attention: "warning",
+};
+function calloutToAstro(node, ctx) {
+    ctx.imports.add("callout");
+    // Callout variant may live on props.variant (Starlight / MkDocs importers)
+    // or props.type (dogsbay-md parser). Support both.
+    const rawVariant = (node.props?.variant
+        ?? node.props?.type
+        ?? "note").toLowerCase();
+    const variant = CALLOUT_VARIANT_MAP[rawVariant] ?? rawVariant;
+    const title = node.props?.title ?? "";
+    const icon = node.props?.icon;
+    const iconAttr = icon ? ` icon="${escapeAttr(icon)}"` : "";
+    // User classes and passthrough attributes (id, data-*, aria-*, style)
+    const classAttr = mergeClassAttr("my-4", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "type", "variant", "title", "icon", "class",
+    ]);
+    const inner = childrenToAstro(node, ctx);
+    return `<Alert variant="${escapeAttr(variant)}"${iconAttr}${classAttr}${passthrough}>
+  <AlertTitle>${escapeTemplate(title)}</AlertTitle>
+  <AlertDescription>
+${indentStr(inner, 4)}
+  </AlertDescription>
+</Alert>`;
+}
+/**
+ * Merge a default class string with an optional user-provided class string.
+ * Concatenates (user classes appended) so utility frameworks like Tailwind
+ * resolve conflicts via component-internal class-variance-authority / tv().
+ */
+function mergeClassAttr(defaults, userClass) {
+    const combined = [defaults, userClass].filter(Boolean).join(" ").trim();
+    return combined ? ` class="${escapeAttr(combined)}"` : "";
+}
+/**
+ * Render attributes not consumed as component props — `id`, `data-*`, `aria-*`,
+ * and `style`. These pass through to the rendered element.
+ */
+function renderPassthroughAttrs(props, consumed) {
+    if (!props)
+        return "";
+    const skip = new Set([...consumed, "source", "children"]);
+    const parts = [];
+    for (const [key, value] of Object.entries(props)) {
+        if (skip.has(key))
+            continue;
+        if (value === undefined || value === null || value === false)
+            continue;
+        if (!/^(id|data-[\w-]+|aria-[\w-]+|style|role|title)$/.test(key))
+            continue;
+        if (value === true) {
+            parts.push(key);
+        }
+        else {
+            parts.push(`${key}="${escapeAttr(String(value))}"`);
+        }
+    }
+    return parts.length ? " " + parts.join(" ") : "";
+}
+/**
+ * Coerce an attribute value to a number, falling back to default.
+ * Accepts: number, numeric string ("3"), or anything → fallback.
+ */
+function coerceNumeric(value, fallback) {
+    if (typeof value === "number")
+        return value;
+    if (typeof value === "string") {
+        const n = Number(value);
+        if (!Number.isNaN(n))
+            return n;
+    }
+    return fallback;
+}
+/**
+ * Coerce a value to a numeric array.
+ * Accepts: number → [n], number[], numeric string → [n], JSON-array string,
+ * comma-separated string → split, otherwise fallback.
+ */
+function coerceNumericList(value, fallback) {
+    if (Array.isArray(value))
+        return value.map((v) => coerceNumeric(v, 0));
+    if (typeof value === "number")
+        return [value];
+    if (typeof value === "string") {
+        const trimmed = value.trim();
+        if (trimmed.startsWith("[")) {
+            try {
+                const parsed = JSON.parse(trimmed);
+                if (Array.isArray(parsed))
+                    return parsed.map((v) => coerceNumeric(v, 0));
+            }
+            catch {
+                // fallthrough
+            }
+        }
+        if (trimmed.includes(",")) {
+            return trimmed.split(",").map((s) => coerceNumeric(s.trim(), 0));
+        }
+        return [coerceNumeric(trimmed, fallback[0])];
+    }
+    return fallback;
+}
+/**
+ * Wrap content in an HTML tag with user-mergeable class + passthrough attrs.
+ * Use for simple block elements like `<ol>`, `<blockquote>`, `<figure>` where
+ * the default class is a utility string.
+ *
+ * `consumed` lists prop keys that are used elsewhere (as component props or
+ * semantic fields) and shouldn't leak into passthrough attrs.
+ */
+function wrapBlock(tag, defaultClass, node, content, consumed = []) {
+    const classAttr = mergeClassAttr(defaultClass, node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, ["class", ...consumed]);
+    const needsNewline = /<\/?[a-zA-Z]/.test(content) && !content.startsWith("<");
+    const sep = content.includes("\n") ? "\n" : "";
+    return `<${tag}${classAttr}${passthrough}>${sep}${content}${sep}</${tag}>`;
+    void needsNewline;
+}
+function detailsToAstro(node, ctx) {
+    ctx.imports.add("details");
+    const variant = node.props?.variant ?? "note";
+    const title = node.props?.title ?? "Details";
+    const open = node.props?.open;
+    const icon = node.props?.icon;
+    const inner = childrenToAstro(node, ctx);
+    const attrs = [`variant="${escapeAttr(variant)}"`, `title="${escapeAttr(title)}"`];
+    if (open)
+        attrs.push("open");
+    if (icon)
+        attrs.push(`icon="${escapeAttr(icon)}"`);
+    const classAttr = mergeClassAttr("my-4", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "variant", "title", "open", "icon", "class", "summary",
+    ]);
+    return `<CollapsibleAlert ${attrs.join(" ")}${classAttr}${passthrough}>
+${indentStr(inner, 2)}
+</CollapsibleAlert>`;
+}
+function tabsToAstro(node, ctx) {
+    ctx.imports.add("tabs");
+    const tabs = node.children ?? [];
+    if (tabs.length === 0)
+        return "";
+    const tabItems = tabs.map((tab, i) => {
+        const title = tab.props?.title || tab.props?.label || tab.props?.value || `Tab ${i + 1}`;
+        const value = tab.props?.value || title;
+        const label = title;
+        return { value, label, node: tab };
+    });
+    const defaultValue = tabItems[0].value;
+    const triggers = tabItems
+        .map((t) => `    <TabsTrigger value="${escapeAttr(t.value)}">${escapeTemplate(t.label)}</TabsTrigger>`)
+        .join("\n");
+    const contents = tabItems
+        .map((t) => {
+        const inner = childrenToAstro(t.node, ctx);
+        return `  <TabsContent value="${escapeAttr(t.value)}">\n${indentStr(inner, 4)}\n  </TabsContent>`;
+    })
+        .join("\n");
+    const classAttr = mergeClassAttr("my-4", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, ["sync", "default", "class"]);
+    return `<Tabs defaultValue="${escapeAttr(defaultValue)}"${classAttr}${passthrough}>
+  <TabsList>
+${triggers}
+  </TabsList>
+${contents}
+</Tabs>`;
+}
+function tableToAstro(node, ctx) {
+    ctx.imports.add("table");
+    const classAttr = mergeClassAttr("my-4", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, ["class"]);
+    return `<Table${classAttr}${passthrough}>\n${childrenToAstro(node, ctx)}\n</Table>`;
+}
+function diagramToAstro(node, ctx) {
+    ctx.imports.add("diagram");
+    const lang = node.props?.lang || "mermaid";
+    const code = node.props?.code ?? "";
+    const svg = node.props?.svg ?? "";
+    const title = node.props?.title;
+    const attrs = [`lang="${escapeAttr(lang)}"`, `code={${escapeExpr(code)}}`, `svg={${escapeExpr(svg)}}`];
+    if (title)
+        attrs.push(`title="${escapeAttr(title)}"`);
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "lang", "code", "svg", "title", "class",
+    ]);
+    return `<Diagram ${attrs.join(" ")}${classAttr}${passthrough} />`;
+}
+function youtubeToAstro(node, ctx) {
+    ctx.imports.add("youtube");
+    const id = node.props?.id ?? "";
+    const title = node.props?.title ?? "";
+    const classAttr = mergeClassAttr("my-4", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, ["id", "title", "class"]);
+    return `<YouTube id="${escapeAttr(id)}" title="${escapeAttr(title)}"${classAttr}${passthrough} />`;
+}
+function mathBlockToAstro(node, ctx) {
+    ctx.imports.add("math-block");
+    const latex = node.props?.latex ?? "";
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, ["latex", "class"]);
+    return `<MathKatex latex={${escapeExpr(latex)}} display${classAttr}${passthrough} />`;
+}
+/**
+ * Render a footnote list as a GitHub-style `<section>` with a
+ * separator rule, an accessibility-only heading, and the ordered
+ * list of definitions. Without the wrapper, the bare `<ol>` reads
+ * as a continuation of whatever bulleted/numbered list precedes
+ * it — which we hit on /docs/ccms/heretto/ where the "Related"
+ * section flowed straight into the footnotes with no break.
+ *
+ * Structure follows GitHub's convention:
+ *   <hr> separator (visible)
+ *   <section data-footnotes aria-labelledby="footnote-label">
+ *     <h2 id="footnote-label" class="sr-only">Footnotes</h2>
+ *     <ol data-footnote-list>...</ol>
+ *   </section>
+ *
+ * The `sr-only` h2 is announced by screen readers as a section
+ * heading without adding visible chrome — writers who want a
+ * visible "Sources" / "References" heading still author it
+ * manually above their `[^N]:` definitions.
+ */
+function footnoteListToAstro(node, ctx) {
+    return [
+        `<hr class="my-8 border-t border-border" data-footnotes-separator />`,
+        `<section class="footnotes" data-footnotes aria-labelledby="footnote-label">`,
+        `  <h2 id="footnote-label" class="sr-only">Footnotes</h2>`,
+        `  <ol class="list-decimal pl-6 space-y-1 text-sm text-muted-foreground" data-footnote-list>`,
+        childrenToAstro(node, ctx),
+        `  </ol>`,
+        `</section>`,
+    ].join("\n");
+}
+function footnoteDefToAstro(node, ctx) {
+    const id = node.props?.id ?? "";
+    const backrefId = node.props?.backrefId ?? "";
+    if (ctx.mode === "template" && node.inline) {
+        const content = inlineToTemplate(node.inline);
+        const backref = backrefId ? ` <a href="#${escapeAttr(backrefId)}" class="text-primary hover:underline">↩</a>` : "";
+        return `<li id="${escapeAttr(id)}" class="text-sm text-muted-foreground">${content}${backref}</li>`;
+    }
+    const content = node.inline ? inlineToHtml(node.inline) : (node.html ?? "");
+    const backref = backrefId ? ` <a href="#${escapeAttr(backrefId)}" class="text-primary hover:underline">↩</a>` : "";
+    return `<li id="${escapeAttr(id)}" class="text-sm text-muted-foreground" set:html={${escapeExpr(content + backref)}} />`;
+}
+function apiSymbolToAstro(node, ctx) {
+    ctx.imports.add("api-class");
+    const name = node.props?.name ?? "";
+    const kind = node.props?.kind ?? "func";
+    const signature = node.props?.signature;
+    const bases = node.props?.bases || [];
+    const level = node.type === "api-class" ? 2 : 3;
+    const attrs = [`name="${escapeAttr(name)}"`, `kind="${escapeAttr(kind)}"`, `level={${level}}`];
+    if (signature)
+        attrs.push(`signature={${escapeExpr(signature)}}`);
+    if (bases.length > 0)
+        attrs.push(`bases={${JSON.stringify(bases)}}`);
+    const inner = childrenToAstro(node, ctx);
+    return `<ApiSymbol ${attrs.join(" ")}>\n${indentStr(inner, 2)}\n</ApiSymbol>`;
+}
+function apiDocToAstro(node, ctx) {
+    ctx.imports.add("api-doc");
+    const html = node.props?.html ?? "";
+    return `<ApiDoc html={${escapeExpr(html)}} />`;
+}
+function apiParamsToAstro(node, ctx) {
+    ctx.imports.add("api-params");
+    const params = node.props?.params ?? [];
+    return `<ApiParams params={${JSON.stringify(params)}} />`;
+}
+function apiSourceToAstro(node, ctx) {
+    ctx.imports.add("api-source");
+    const code = node.props?.code ?? "";
+    const file = node.props?.file;
+    const line = node.props?.line;
+    const attrs = [`code={${escapeExpr(code)}}`];
+    if (file)
+        attrs.push(`file="${escapeAttr(file)}"`);
+    if (line)
+        attrs.push(`line={${line}}`);
+    return `<ApiSource ${attrs.join(" ")} />`;
+}
+/**
+ * Render an OpenAPI operation as `<ApiLayout>` with two slots:
+ *   - `description` — `<EndpointCard>` containing collapsible
+ *     `<EndpointSection>`s for parameters / request body / responses,
+ *     using `<ParameterTable>` / `<SchemaViewer>` / `<ResponseTabs>`.
+ *   - `code` — `<CodeSamples>` and (when present) request / response
+ *     example panels.
+ *
+ * All structured data (parameters, schemas, samples) is JSON-stringified
+ * and passed as Astro props — the components handle the rendering. Only
+ * top-level summary / description text is interpolated into the markup.
+ */
+function endpointToAstro(node, ctx) {
+    ctx.imports.add("endpoint");
+    const props = (node.props ?? {});
+    const method = (props.method || "get").toLowerCase();
+    const path = props.path ?? "";
+    const baseUrl = props.baseUrl ?? "";
+    const summary = props.summary;
+    const description = props.description;
+    const deprecated = props.deprecated === true;
+    const parameters = props.parameters ?? [];
+    const requestBody = props.requestBody ?? [];
+    const responses = props.responses ?? [];
+    const codeSamples = props.codeSamples ?? [];
+    const requestBodyExample = props.requestBodyExample;
+    const cardAttrs = [
+        'slot="description"',
+        `method="${escapeAttr(method)}"`,
+        `path={${escapeExpr(path)}}`,
+    ];
+    if (baseUrl)
+        cardAttrs.push(`baseUrl={${escapeExpr(baseUrl)}}`);
+    if (summary)
+        cardAttrs.push(`summary={${escapeExpr(summary)}}`);
+    if (description)
+        cardAttrs.push(`description={${escapeExpr(description)}}`);
+    if (deprecated)
+        cardAttrs.push("deprecated");
+    // Description column — collapsible sections for parameters, request
+    // body schema, and response schemas. PropertyList (Stripe-style,
+    // grouped by location with per-type colour badges) reads better than
+    // ParameterTable at every viewport width — see
+    // packages/ui/src/property-list/PropertyList.astro.
+    const sections = [];
+    if (parameters.length > 0) {
+        sections.push(`<EndpointSection title="Parameters">\n` +
+            `  <PropertyList parameters={${JSON.stringify(parameters)}} />\n` +
+            `</EndpointSection>`);
+    }
+    if (requestBody.length > 0) {
+        sections.push(`<EndpointSection title="Request body">\n` +
+            `  <SchemaViewer properties={${JSON.stringify(requestBody)}} />\n` +
+            `</EndpointSection>`);
+    }
+    if (responses.length > 0) {
+        sections.push(`<EndpointSection title="Responses">\n` +
+            `  <ResponseTabs responses={${JSON.stringify(responses)}} />\n` +
+            `</EndpointSection>`);
+    }
+    const sectionsBody = sections.length > 0
+        ? `\n${indentStr(sections.join("\n"), 4)}\n  `
+        : "";
+    // Code column — wrapped in <ApiCodePanel> for consistent vertical
+    // rhythm. Code samples first, then a request body example, then one
+    // ExampleBlock per response status that carries a concrete example.
+    // Each ExampleBlock auto-detects language from the response's
+    // contentType (application/json → "json", application/xml → "xml",
+    // etc.).
+    const codePanels = [];
+    if (codeSamples.length > 0) {
+        codePanels.push(`<div>\n` +
+            `  <h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-white/60">Code samples</h3>\n` +
+            `  <CodeSamples samples={${JSON.stringify(codeSamples)}} />\n` +
+            `</div>`);
+    }
+    if (requestBodyExample !== undefined) {
+        const json = JSON.stringify(requestBodyExample, null, 2);
+        codePanels.push(`<ExampleBlock title="Request body" code={${escapeExpr(json)}} lang="json" />`);
+    }
+    for (const r of responses) {
+        if (r.example === undefined)
+            continue;
+        const status = String(r.status ?? "");
+        const contentType = r.contentType;
+        const exampleJson = JSON.stringify(r.example, null, 2);
+        const ctAttr = contentType ? ` contentType={${escapeExpr(contentType)}}` : "";
+        codePanels.push(`<ExampleBlock title="Response ${escapeAttr(status)}" code={${escapeExpr(exampleJson)}}${ctAttr} />`);
+    }
+    const codeBody = codePanels.length > 0
+        ? `\n${indentStr(codePanels.join("\n"), 4)}\n  `
+        : "";
+    return (`<ApiLayout>\n` +
+        `  <EndpointCard ${cardAttrs.join(" ")}>${sectionsBody}</EndpointCard>\n` +
+        `  <ApiCodePanel slot="code">${codeBody}</ApiCodePanel>\n` +
+        `</ApiLayout>`);
+}
+function cardsToAstro(node, ctx) {
+    ctx.imports.add("grid");
+    ctx.imports.add("card");
+    // Grid-level attributes on the :::cards container
+    const outerClass = mergeClassAttr("", node.props?.class);
+    const outerPass = renderPassthroughAttrs(node.props, [
+        "cols", "gap", "rows", "class",
+    ]);
+    // MDX pattern: children are card nodes with title/href/icon props
+    const cardNodes = (node.children ?? []).filter((c) => c.type === "card");
+    if (cardNodes.length > 0) {
+        const cards = cardNodes.map((card) => {
+            const title = card.props?.title ?? "";
+            const href = card.props?.href ?? "";
+            const description = card.props?.description;
+            // Description sources: inline content, children, or props.description.
+            const inner = childrenToAstro(card, ctx)
+                || (card.inline ? inlineToTemplate(card.inline) : "")
+                || (description ? escapeTemplate(description) : "");
+            const titleHtml = title ? `<h3 class="text-base font-semibold">${escapeTemplate(title)}</h3>` : "";
+            const desc = inner
+                ? `<p class="text-sm text-muted-foreground mt-1 [text-decoration:none]">${inner}</p>`
+                : "";
+            const cardDefaultClass = href
+                ? "p-4 hover:border-foreground/20 transition-colors"
+                : "p-4";
+            const cardClassAttr = mergeClassAttr(cardDefaultClass, card.props?.class);
+            const cardPass = renderPassthroughAttrs(card.props, [
+                "title", "href", "description", "icon", "variant", "class",
+            ]);
+            if (href) {
+                return `<Card${cardClassAttr}${cardPass}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" class="[text-decoration:none] text-foreground">\n${titleHtml}\n${desc}\n</a>\n</CardContent>\n</Card>`;
+            }
+            return `<Card${cardClassAttr}${cardPass}>\n<CardContent class="p-0">\n${titleHtml}\n${desc}\n</CardContent>\n</Card>`;
+        }).join("\n");
+        return `<Grid cols={[1, 2]} gap={4}${outerClass}${outerPass}>\n${cards}\n</Grid>`;
+    }
+    // MkDocs pattern: children are unordered-list items
+    const items = (node.children ?? [])
+        .filter((c) => c.type === "unordered-list")
+        .flatMap((ul) => ul.children ?? []);
+    if (items.length > 0) {
+        const cards = items
+            .map((item) => `<Card>\n<CardContent>\n${childrenToAstro(item, ctx)}\n</CardContent>\n</Card>`)
+            .join("\n");
+        return `<Grid cols={[1, 2]} gap={4}>\n${cards}\n</Grid>`;
+    }
+    // Fallback: render children directly in grid
+    return `<Grid cols={[1, 2]} gap={4}>\n${childrenToAstro(node, ctx)}\n</Grid>`;
+}
+/**
+ * Render a standalone `card` TreeNode (outside `:::cards`).
+ *
+ * Same shape as the cards-list path uses for each card, but emitted as a
+ * single block. Title becomes an h3; description is the body. When href is
+ * present the whole card becomes a link target.
+ */
+function standaloneCardToAstro(node, ctx) {
+    ctx.imports.add("card");
+    const title = node.props?.title ?? "";
+    const href = node.props?.href ?? "";
+    const description = node.props?.description;
+    const inner = childrenToAstro(node, ctx)
+        || (node.inline ? inlineToTemplate(node.inline) : "")
+        || (description ? escapeTemplate(description) : "");
+    const titleHtml = title
+        ? `<h3 class="text-base font-semibold">${escapeTemplate(title)}</h3>`
+        : "";
+    const desc = inner
+        ? `<p class="text-sm text-muted-foreground mt-1 [text-decoration:none]">${inner}</p>`
+        : "";
+    const cardDefaultClass = href
+        ? "p-4 hover:border-foreground/20 transition-colors"
+        : "p-4";
+    const classAttr = mergeClassAttr(cardDefaultClass, node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "title", "href", "description", "icon", "variant", "class",
+    ]);
+    if (href) {
+        return `<Card${classAttr}${passthrough}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" class="[text-decoration:none] text-foreground">\n${titleHtml}\n${desc}\n</a>\n</CardContent>\n</Card>`;
+    }
+    return `<Card${classAttr}${passthrough}>\n<CardContent class="p-0">\n${titleHtml}\n${desc}\n</CardContent>\n</Card>`;
+}
+/**
+ * Render a `link-card` TreeNode as the dedicated `<LinkCard>` component.
+ *
+ * LinkCard takes title + description + href as props (no slot for body).
+ * If the parser kept rich body children instead of folding into description,
+ * we fall back to the standalone-card path which can hold arbitrary content.
+ */
+function linkCardToAstro(node, ctx) {
+    const hasRichChildren = (node.children ?? []).length > 0;
+    if (hasRichChildren) {
+        return standaloneCardToAstro(node, ctx);
+    }
+    ctx.imports.add("link-card");
+    const title = node.props?.title ?? "";
+    const description = node.props?.description;
+    const href = node.props?.href ?? "";
+    const titleAttr = ` title="${escapeAttr(title)}"`;
+    const hrefAttr = ` href="${escapeAttr(href)}"`;
+    const descAttr = description ? ` description="${escapeAttr(description)}"` : "";
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "title", "description", "href", "icon", "class",
+    ]);
+    return `<LinkCard${titleAttr}${descAttr}${hrefAttr}${classAttr}${passthrough} />`;
+}
+/**
+ * Render an `accordion` TreeNode and its `accordion-item` children.
+ *
+ * Output mirrors the canonical Starwind/Dogsbay accordion shape:
+ *   <Accordion type defaultValue>
+ *     <AccordionItem value>
+ *       <AccordionTrigger>label</AccordionTrigger>
+ *       <AccordionContent>body</AccordionContent>
+ *     </AccordionItem>
+ *   </Accordion>
+ */
+function accordionToAstro(node, ctx) {
+    ctx.imports.add("accordion");
+    const type = node.props?.type ?? "single";
+    const defaultValue = node.props?.defaultValue;
+    const typeAttr = ` type="${escapeAttr(type)}"`;
+    const defaultAttr = defaultValue !== undefined
+        ? ` defaultValue=${typeof defaultValue === "string"
+            ? `"${escapeAttr(defaultValue)}"`
+            : `{${JSON.stringify(defaultValue)}}`}`
+        : "";
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "type", "defaultValue", "class",
+    ]);
+    const items = (node.children ?? [])
+        .filter((c) => c.type === "accordion-item")
+        .map((item) => accordionItemToAstro(item, ctx, /*standalone*/ false))
+        .join("\n");
+    return `<Accordion${typeAttr}${defaultAttr}${classAttr}${passthrough}>\n${items}\n</Accordion>`;
+}
+function accordionItemToAstro(node, ctx, standalone) {
+    ctx.imports.add("accordion");
+    const value = node.props?.value ?? "item-1";
+    const label = node.props?.label ?? node.props?.title ?? "Item";
+    const valueAttr = ` value="${escapeAttr(value)}"`;
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "value", "label", "title", "class",
+    ]);
+    const body = childrenToAstro(node, ctx)
+        || (node.inline ? inlineToTemplate(node.inline) : "");
+    const itemMarkup = `<AccordionItem${valueAttr}${classAttr}${passthrough}>
+<AccordionTrigger>${escapeTemplate(label)}</AccordionTrigger>
+<AccordionContent>
+${body}
+</AccordionContent>
+</AccordionItem>`;
+    // Bare accordion-item: wrap so the output is still a working widget.
+    if (standalone) {
+        return `<Accordion type="single">\n${itemMarkup}\n</Accordion>`;
+    }
+    return itemMarkup;
+}
+/**
+ * Render an `avatar` TreeNode as the `<Avatar>` component.
+ */
+function avatarToAstro(node, ctx) {
+    ctx.imports.add("avatar");
+    const src = node.props?.src ?? "";
+    const alt = node.props?.alt ?? "";
+    const fallback = node.props?.fallback;
+    const srcAttr = src ? ` src="${escapeAttr(src)}"` : "";
+    const altAttr = ` alt="${escapeAttr(alt)}"`;
+    const fbAttr = fallback ? ` fallback="${escapeAttr(fallback)}"` : "";
+    const classAttr = mergeClassAttr("", node.props?.class);
+    const passthrough = renderPassthroughAttrs(node.props, [
+        "src", "alt", "fallback", "class",
+    ]);
+    return `<Avatar${srcAttr}${altAttr}${fbAttr}${classAttr}${passthrough} />`;
+}
+/**
+ * Render a :::example directive as a MarkdownExample component.
+ *
+ * The parser captured the inner content as `node.props.source` (re-serialized
+ * back to Dogsbay MD text) and kept `node.children` for live rendering.
+ *
+ * The consuming app is expected to provide a `MarkdownExample` component via
+ * its imports (see apps/md-docs/ for a reference implementation).
+ */
+function exampleToAstro(node, ctx) {
+    ctx.imports.add("markdown-example");
+    const source = String(node.props?.source ?? "");
+    const title = node.props?.title;
+    const showFallback = node.props?.fallback === true || node.props?.fallback === "true";
+    const titleAttr = title ? ` title="${escapeAttr(title)}"` : "";
+    const fallbackAttr = showFallback ? " showFallback" : "";
+    const inner = childrenToAstro(node, ctx);
+    return `<MarkdownExample source={${escapeExpr(source)}}${titleAttr}${fallbackAttr}>\n${inner}\n</MarkdownExample>`;
+}
+function htmlContainerToAstro(node, ctx) {
+    const attrs = node.props?.attrs ?? {};
+    const classes = attrs.class ?? "";
+    if (classes.includes("grid") && classes.includes("cards")) {
+        return cardsToAstro(node, ctx);
+    }
+    if (classes.includes("mdx-columns")) {
+        const inner = childrenToAstro(node, ctx);
+        return `<div class="columns-1 sm:columns-2 gap-4 [&_ul]:m-0">\n${inner}\n</div>`;
+    }
+    const inner = childrenToAstro(node, ctx);
+    return `<div>\n${inner}\n</div>`;
+}
+// ─── Utilities ────────────────────────────────────────────────────
+/**
+ * Render a node's content whether it's attached as flat inline (dogsbay-md
+ * parser shape) or as wrapped children (Starlight importer shape). Both
+ * shapes supported; inline comes before children if both present.
+ *
+ * Used for list-item, table cells, step, dt, dd — types that commonly
+ * carry leaf text content directly on the node.
+ */
+function leafContent(node, ctx) {
+    const parts = [];
+    if (node.inline && node.inline.length > 0) {
+        parts.push(inlineToTemplate(node.inline));
+    }
+    if (node.children && node.children.length > 0) {
+        const rendered = childrenToAstro(node, ctx);
+        if (rendered)
+            parts.push(rendered);
+    }
+    return parts.join("\n");
+}
+function childrenToAstro(node, ctx) {
+    if (!node.children || node.children.length === 0)
+        return "";
+    return node.children.map((n) => nodeToAstro(n, ctx)).filter(Boolean).join("\n");
+}
+function indentStr(text, spaces) {
+    const prefix = " ".repeat(spaces);
+    return text
+        .split("\n")
+        .map((line) => (line ? `${prefix}${line}` : line))
+        .join("\n");
+}
+function escapeHtml(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+//# sourceMappingURL=serialize.js.map