@dogsbay/format-astro 0.2.0-beta.129 → 0.2.0-beta.130

package/dist/capabilities.js

@@ -9,9 +9,8 @@ export const ASTRO_CAPABILITIES = [
     { feature: "table", support: "full", rendersAs: "`<Table>` (block content in cells; caption prop or slot)" },
     {
         feature: "code",
-        support: "partial",
-        rendersAs: "`<CodeBlock>`, or `<CodeRich>` with line numbers / highlights / diff / `[!code]` notation",
-        note: "Title, language, highlights, line numbers, diff marks and copyText survive. The `collapse` fence option is consumed and not emitted: the block renders expanded, unrecorded.",
+        support: "full",
+        rendersAs: "`<CodeBlock>`, or `<CodeRich>` with line numbers / highlights / diff / `[!code]` notation / `collapse` (line runs behind a toggle)",
     },
     { feature: "math-block", support: "full", rendersAs: "`<MathKatex display>` (KaTeX at build time)" },
     { feature: "deflist", support: "full", rendersAs: "`<dl><dt><dd>`" },
@@ -34,12 +33,7 @@ export const ASTRO_CAPABILITIES = [
     { feature: "tabs-variant", support: "full", rendersAs: "TabsList/TabsTrigger given the variant's classes (TAB_VARIANTS), merged over their base" },
     { feature: "tone", support: "full", rendersAs: "each card's border and tint from the tone (CARD_TONE_CLASSES); a group tone applies to every card without one" },
     { feature: "tabs", support: "full", rendersAs: "`<Tabs>` / `<TabsTrigger>` / `<TabsContent>` (`<db-tabs>`), sync keys kept" },
-    {
-        feature: "steps",
-        support: "partial",
-        rendersAs: "`<Steps>` / `<Step>` / `<SubSteps>`",
-        note: "A step's body renders; a `title` PROP on a step is not emitted (titles carried in the step's own content, as dogsbay-md writes them, survive).",
-    },
+    { feature: "steps", support: "full", rendersAs: "`<Steps>` / `<Step>` / `<SubSteps>`; a step's `title` prop (Mintlify `<Step title>`) leads it in bold" },
     {
         feature: "accordion",
         support: "full",
@@ -48,15 +42,10 @@ export const ASTRO_CAPABILITIES = [
     {
         feature: "cards",
         support: "partial",
-        rendersAs: "`<Grid>` of `<Card>`",
-        note: "The grid is always `cols={[1, 2]}`: a `cols` prop is ignored. When the group has `card` children, any non-card child is dropped; in the MkDocs list form, non-list children are dropped and a list item whose content is inline (a tight list) renders an EMPTY card.",
-    },
-    {
-        feature: "card",
-        support: "partial",
-        rendersAs: "`<Card>` with title, description, body and optional link",
-        note: "Outside a card group, an icon that is an image PATH is passed to `<Icon name>`, which renders nothing for it — the logo disappears (inside a group it becomes an `<img>`).",
+        rendersAs: "`<Grid>` of `<Card>`; `cols` (1–6) is one column on a phone and up to `cols` wider, as render-html",
+        note: "When the group has `card` children, any non-card child is dropped; in the MkDocs list form, non-list children are dropped and a list item whose content is inline (a tight list) renders an EMPTY card.",
     },
+    { feature: "card", support: "full", rendersAs: "`<Card>` with title, description, body, optional link, and an icon NAME (`<Icon>`) or image PATH (`<img>`)" },
     { feature: "link-card", support: "full", rendersAs: "`<LinkCard>`; with body content, a linked `<Card>`" },
     { feature: "files", support: "full", rendersAs: "`<FileTree items>`, folders from nesting or a trailing `/`" },
     { feature: "grid", support: "full", rendersAs: "`<Grid cols gap rows>` / `<GridItem>`" },

package/dist/serialize.js

@@ -1,4 +1,4 @@
-import { walkInline, applyTextFlags, renderLeaf, indent, isSafeHref, apiPageLayout, apiSymbolLevels, renderAroundGroup, isDetailsSheet, } from "@dogsbay/serialize-core";
+import { walkInline, applyTextFlags, renderLeaf, indent, isSafeHref, apiPageLayout, apiSymbolLevels, renderAroundGroup, isDetailsSheet, stepLead, stepTitle, } from "@dogsbay/serialize-core";
 import { parseInline } from "@dogsbay/format-dogsbay-md";
 import { decorateDiff, hasDiffMarks } from "./diff-decoration.js";
 import { TAB_GLYPH, tabDiffSignal } from "@dogsbay/render-html/diff";
@@ -367,9 +367,16 @@ function nodeToAstroBase(node, ctx) {
         case "steps":
             ctx.imports.add("steps");
             return `<Steps>\n${childrenToAstro(node, ctx)}\n</Steps>`;
-        case "step":
+        case "step": {
             ctx.imports.add("steps");
-            return `<Step>\n${leafContent(node, ctx)}\n</Step>`;
+            // A `title` prop (Mintlify `<Step title>`) leads the step in bold, as render-html draws it
+            // The title on its own line (Steps.astro: `.step-title` is a block): from the prop, or the
+            // step's leading bold run (stepLead), which Markdown otherwise runs into the detail
+            const title = stepTitle(node);
+            const split = title ? undefined : stepLead(node.inline);
+            const lead = title ? `<strong class="step-title">${escapeTemplate(title)}</strong>\n` : split ? `<strong class="step-title">${renderInline(split.title, ctx)}</strong>\n` : "";
+            return `<Step>\n${lead}${leafContent(split ? { ...node, inline: split.rest } : node, ctx)}\n</Step>`;
+        }
         case "substeps":
             ctx.imports.add("substeps");
             ctx.imports.add("steps");
@@ -738,7 +745,9 @@ function codeToAstro(node, ctx, figure) {
     const copyText = node.props?.copyText;
     const diffAdd = lineSpec(node.props?.diffAdd, node.props?.ins);
     const diffRemove = lineSpec(node.props?.diffRemove, node.props?.del);
-    const isRich = lineNumbers || highlights || code.includes("[!code") || Boolean(diffAdd || diffRemove);
+    // Expressive Code's `collapse`: line runs folded behind a toggle (`{2-4, 9}` or `2-4,9`)
+    const collapse = lineSpec(node.props?.collapse)?.replace(/[{}\s]/g, "") || undefined;
+    const isRich = lineNumbers || highlights || code.includes("[!code") || Boolean(diffAdd || diffRemove) || Boolean(collapse);
     const classAttr = mergeClassAttr(figure?.classes ?? "", node.props?.class);
     const figureAttrs = figure?.attrs ?? "";
     // The component with its caption slot filled, or self-closing
@@ -763,6 +772,8 @@ function codeToAstro(node, ctx, figure) {
             attrs.push(`diffAdd="${escapeAttr(diffAdd)}"`);
         if (diffRemove)
             attrs.push(`diffRemove="${escapeAttr(diffRemove)}"`);
+        if (collapse)
+            attrs.push(`collapse="${escapeAttr(collapse)}"`);
         return close("CodeRich", `<CodeRich ${attrs.join(" ")}${classAttr}${passthrough}${figureAttrs}`);
     }
     ctx.imports.add("code");
@@ -1460,6 +1471,18 @@ function wholeCardLink(yes, fn) {
 }
 /** A card's title: not-prose, or docs.css's h3 rule (1.25rem, 2rem above) applies inside the card. */
 const CARD_TITLE_CLASS = "not-prose m-0 border-0 p-0 text-base font-semibold";
+/**
+ * A card group's columns, responsive as render-html draws them (its GRID_COLS): one column on a
+ * phone, then up to `cols` (1–6) by Grid's breakpoints (0, 640, 768, 1024). Default 2. A list
+ * (`cols="1,2,3"`) is the author's own breakpoints and passes through.
+ */
+function cardCols(raw) {
+    const list = coerceNumericList(raw, [2]);
+    if (list.length > 1)
+        return list;
+    const n = Math.min(6, Math.max(1, Math.round(list[0]) || 2));
+    return n === 1 ? [1] : n === 2 ? [1, 2] : n <= 4 ? [1, 2, 2, n] : [1, 3, 3, n];
+}
 function cardsToAstro(node, ctx) {
     ctx.imports.add("grid");
     ctx.imports.add("card");
@@ -1515,7 +1538,7 @@ function cardsToAstro(node, ctx) {
             }
             return `<Card${cardClassAttr}${cardPass}>\n<CardContent class="p-0">\n${iconHtml}\n${titleHtml}\n${desc}\n</CardContent>\n</Card>`;
         }).join("\n");
-        return `<Grid cols={[1, 2]} gap={4}${outerClass}${outerPass}>\n${cards}\n</Grid>`;
+        return `<Grid cols={[${cardCols(node.props?.cols).join(", ")}]} gap={4}${outerClass}${outerPass}>\n${cards}\n</Grid>`;
     }
     // MkDocs pattern: children are unordered-list items
     const items = (node.children ?? [])
@@ -1525,10 +1548,10 @@ function cardsToAstro(node, ctx) {
         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>`;
+        return `<Grid cols={[${cardCols(node.props?.cols).join(", ")}]} 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>`;
+    return `<Grid cols={[${cardCols(node.props?.cols).join(", ")}]} gap={4}>\n${childrenToAstro(node, ctx)}\n</Grid>`;
 }
 /**
  * Render a standalone `card` TreeNode (outside `:::cards`).
@@ -1549,13 +1572,8 @@ function standaloneCardToAstro(node, ctx) {
         || (node.inline ? wholeCardLink(!!href, () => inlineToTemplate(node.inline)) : "")
         || (description ? escapeTemplate(description) : "");
     const descTag = blocks ? "div" : "p";
-    // Icon renders inline before the title (same shape as the
-    // cards-list path). Resolved at build time via @dogsbay/icons.
-    let iconHtml = "";
-    if (icon) {
-        ctx.imports.add("icon");
-        iconHtml = `<Icon name="${escapeAttr(icon)}" class="size-5 mb-2 text-muted-foreground" />`;
-    }
+    // Icon renders inline before the title, a name or an image path, as in a card group
+    const iconHtml = icon ? cardIconHtml(icon, title, ctx) : "";
     const titleHtml = title
         ? `<h3 class="${CARD_TITLE_CLASS}">${escapeTemplate(title)}</h3>`
         : "";

package/dist/theme-css.js

@@ -128,7 +128,10 @@ export function generateGlobalCss() {
   & li > * + *:not(.dba-api *) { margin-top: 0.75rem; }
 
   & ul:not(.dba-api *) { list-style: disc; padding-left: 1.5rem; margin: 0.75rem 0; }
-  & ol:not(.dba-api *) { list-style: decimal; padding-left: 1.5rem; margin: 0.75rem 0; }
+  /* Not a step list, nor a list inside one: Steps.astro draws their numbers as circles, and this
+     rule (one class and an element) outranked its .steps-list { list-style: none }, so each step
+     showed its "2." beside its circle */
+  & ol:not(.dba-api *):not(.steps-list, .sub-steps-list, .steps-list ol) { list-style: decimal; padding-left: 1.5rem; margin: 0.75rem 0; }
   & li:not(.dba-api *) { margin: 0.25rem 0; }
   & li > ul:not(.dba-api *), & li > ol:not(.dba-api *) { margin: 0.25rem 0; }
   /* A file tree draws its own folder and file icons (files/markup.ts): the list rules above gave it bullets too */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/format-astro",
-  "version": "0.2.0-beta.129",
+  "version": "0.2.0-beta.130",
   "description": "Astro format plugin for Dogsbay — export TreeNode[] to Astro component markup",
   "type": "module",
   "main": "dist/index.js",
@@ -32,12 +32,12 @@
   "license": "MIT",
   "dependencies": {
     "markdown-it": "^14.3.0",
-    "@dogsbay/format-dogsbay-md": "0.2.0-beta.129",
-    "@dogsbay/serialize-core": "0.2.0-beta.129",
-    "@dogsbay/render-html": "0.2.0-beta.129",
-    "@dogsbay/site-files": "0.2.0-beta.129",
-    "@dogsbay/types": "0.2.0-beta.129",
-    "@dogsbay/ui": "0.2.0-beta.129"
+    "@dogsbay/format-dogsbay-md": "0.2.0-beta.130",
+    "@dogsbay/render-html": "0.2.0-beta.130",
+    "@dogsbay/serialize-core": "0.2.0-beta.130",
+    "@dogsbay/site-files": "0.2.0-beta.130",
+    "@dogsbay/types": "0.2.0-beta.130",
+    "@dogsbay/ui": "0.2.0-beta.130"
   },
   "repository": {
     "type": "git",