@dogsbay/render-html 0.2.0-beta.129 → 0.2.0-beta.131

package/css/code-rich.css

@@ -86,3 +86,36 @@
   padding: 1px 4px;
   margin: 0 -1px;
 }
+
+/* ── `collapse` fence option: line runs folded behind a toggle ──
+   No script: a checkbox inside the label. Lines hide only where :has() works,
+   so a browser without it shows every line rather than losing them. */
+.code-rich-body .code-collapse-label {
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  /* The code's own colour: a muted label fell under 4.5:1 on the code background */
+  border-block: 1px dashed color-mix(in oklab, currentColor 35%, transparent);
+  font-style: italic;
+}
+.code-rich-body .code-collapse-toggle {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+.code-rich-body .code-collapse-label:has(.code-collapse-toggle:focus-visible) {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+/* The label stays when open, so focus stays on the checkbox and it folds again */
+.code-rich-body .code-collapse-label::before {
+  content: "▸ ";
+}
+.code-rich-body .code-collapse-label:has(.code-collapse-toggle:checked)::before {
+  content: "▾ ";
+}
+.code-rich-body .code-collapse:has(.code-collapse-toggle:not(:checked)) > .code-collapse-lines {
+  display: none;
+}

package/css/docs.css

@@ -65,7 +65,10 @@
   & 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/css/steps.css

@@ -98,6 +98,11 @@
     opacity: 0.6;
   }
 
+  /* A step's title on its own line, above its detail (format-astro and render-html mark it) */
+  .steps-list > li > .step-title {
+    display: block;
+  }
+
 
   .sub-steps-list {
     position: relative;
@@ -147,3 +152,8 @@
     background: var(--color-border);
     opacity: 0.6;
   }
+
+  /* A step's title on its own line, above its detail (format-astro and render-html mark it) */
+  .sub-steps-list > li > .step-title {
+    display: block;
+  }

package/dist/capabilities.js

@@ -10,7 +10,7 @@ export const RENDER_HTML_CAPABILITIES = [
     {
         feature: "code",
         support: "full",
-        rendersAs: "`<db-code-block>` (CodeBlock / CodeRich markup); highlighted only when a Highlighter is passed, plain text otherwise",
+        rendersAs: "`<db-code-block>` (CodeBlock / CodeRich markup, `collapse` runs behind a toggle); highlighted only when a Highlighter is passed, plain text otherwise",
     },
     {
         feature: "math-block",
@@ -51,13 +51,13 @@ export const RENDER_HTML_CAPABILITIES = [
         support: "full",
         rendersAs: "`<db-tabs>` with Tabs.astro markup, synced groups by label; a child that is not a tab stays in reading order around the group",
     },
-    { feature: "steps", support: "full", rendersAs: "`<ol class=\"steps-list\">`; a non-step child is wrapped in its own `<li>`" },
+    { feature: "steps", support: "full", rendersAs: "`<ol class=\"steps-list\">`; a non-step child is wrapped in its own `<li>`; a step's `title` prop, or its leading bold run (`stepLead`), is its title, a block above the detail" },
     {
         feature: "accordion",
         support: "full",
         rendersAs: "`<db-accordion>` with Accordion.astro markup; a child that is not an item stays in reading order around the group",
     },
-    { feature: "cards", support: "full", rendersAs: "a responsive card grid `<div>`" },
+    { feature: "cards", support: "full", rendersAs: "a responsive card grid `<div>`; `cols` 1–6, one column on a phone" },
     { feature: "card", support: "full", rendersAs: "Card.astro markup; icon, title, description, body; linked when `href` is set" },
     { feature: "link-card", support: "full", rendersAs: "LinkCard.astro markup; a body of several blocks renders as a linked Card" },
     { feature: "files", support: "full", rendersAs: "FileTree's markup: folder and file icons, nested" },

package/dist/context.js

@@ -2,6 +2,9 @@
 export const UI_STRINGS = {
     backToContent: "Back to content",
     close: "Close",
+    /** A `collapse` fence's toggle; `{n}` is the number of lines it hides (`collapsedLine` for one). */
+    collapsedLine: "1 collapsed line",
+    collapsedLines: "{n} collapsed lines",
     copyCode: "Copy code",
     details: "Details",
     related: "Related links",

package/dist/lines.d.ts

@@ -44,6 +44,15 @@ export interface Highlighter {
 export declare const PLAIN: Set<string>;
 /** Parse "1,3-5" into [1,3,4,5]. */
 export declare function parseLineRanges(spec: unknown): number[];
+/** Sorted line numbers as contiguous runs: [2,3,4,7] → [[2,4],[7,7]]. */
+export declare function lineRuns(lines: number[]): Array<[number, number]>;
+/**
+ * The fence's `collapse` option (Expressive Code's): each run of lines folded behind a toggle that
+ * names how many lines it hides, as CodeRich.astro draws it. No script: a checkbox in the label, and
+ * code-rich.css shows the lines when it is checked (or always, in a browser without `:has()`).
+ * Works on any highlighter's `<pre><code>`, whose lines are `\n`-separated `<span class="line">`s.
+ */
+export declare function collapseLines(pre: string, lines: number[], label: (count: number) => string): string;
 /** CodeRich's gutter: the line number and a diff marker (+, −, or a space) in one column. */
 export declare function gutterHtml(n: number, kind: string, lineNumbers: boolean, diffs: boolean): string;
 /** Code as escaped text, with the annotations and gutter a highlighted block has. `src` has had its unprocessable markers removed. */

package/dist/lines.js

@@ -26,6 +26,41 @@ export function parseLineRanges(spec) {
     }
     return out;
 }
+/** Sorted line numbers as contiguous runs: [2,3,4,7] → [[2,4],[7,7]]. */
+export function lineRuns(lines) {
+    const sorted = [...new Set(lines)].filter((n) => n > 0).sort((a, b) => a - b);
+    const runs = [];
+    for (const n of sorted) {
+        const last = runs[runs.length - 1];
+        if (last && n === last[1] + 1)
+            last[1] = n;
+        else
+            runs.push([n, n]);
+    }
+    return runs;
+}
+/**
+ * The fence's `collapse` option (Expressive Code's): each run of lines folded behind a toggle that
+ * names how many lines it hides, as CodeRich.astro draws it. No script: a checkbox in the label, and
+ * code-rich.css shows the lines when it is checked (or always, in a browser without `:has()`).
+ * Works on any highlighter's `<pre><code>`, whose lines are `\n`-separated `<span class="line">`s.
+ */
+export function collapseLines(pre, lines, label) {
+    const open = pre.indexOf("<code>");
+    const close = pre.lastIndexOf("</code>");
+    if (open < 0 || close < open || !lines.length)
+        return pre;
+    const parts = pre.slice(open + 6, close).split("\n");
+    for (const [a, b] of lineRuns(lines).reverse()) {
+        if (a > parts.length)
+            continue;
+        const end = Math.min(b, parts.length);
+        const group = `<span class="code-collapse"><label class="code-collapse-label" data-pagefind-ignore><input type="checkbox" class="code-collapse-toggle">${label(end - a + 1)}</label>` +
+            `<span class="code-collapse-lines">${parts.slice(a - 1, end).join("\n")}</span></span>`;
+        parts.splice(a - 1, end - a + 1, group);
+    }
+    return pre.slice(0, open + 6) + parts.join("\n") + pre.slice(close);
+}
 /** CodeRich's gutter: the line number and a diff marker (+, −, or a space) in one column. */
 export function gutterHtml(n, kind, lineNumbers, diffs) {
     if (!lineNumbers && !diffs)

package/dist/render.js

@@ -4,7 +4,7 @@
  * contract comes from `@dogsbay/elements`. Everything is a string, so
  * rendering is synchronous and runs anywhere.
  */
-import { isDetailsSheet, renderAroundGroup } from "@dogsbay/serialize-core";
+import { isDetailsSheet, renderAroundGroup, stepLead, stepTitle } from "@dogsbay/serialize-core";
 import { parseInline } from "@dogsbay/format-dogsbay-md/browser";
 import { attrs, esc, FOREIGN_END, FOREIGN_START, passthrough, slugify, unesc } from "./html.js";
 import { CALLOUTS, hasIcon, icon } from "./icons.js";
@@ -14,7 +14,7 @@ import { CARD_TONE_CLASSES, TAB_VARIANTS, THEME_SCOPES, TONE_CLASSES, lookup } f
 import { fileTreeHtml } from "./file-tree.js";
 import { stripMarkersForCopy } from "./code-markers.js";
 import { icons as ALERT_ICONS, chevronSvg as ALERT_CHEVRON } from "./alert-icons.js";
-import { parseLineRanges, plainHighlighter } from "./lines.js";
+import { collapseLines, parseLineRanges, plainHighlighter } from "./lines.js";
 import { decorateDiffHtml, diffMarksOf, hasDiffMarks, inlineSegmentsToHtml, TAB_GLYPH, tabDiffSignal } from "./diff.js";
 import { scriptUrl } from "./url.js";
 import { API_NODE_TYPES, apiCodeInputs, renderApiNode } from "./api.js";
@@ -425,9 +425,18 @@ function block(n, ctx) {
             return callout(n, ctx);
         case "steps":
             return steps(n, ctx);
-        case "step":
-            // Tight, like the Astro Step: the lead text is not wrapped in <p>.
-            return `<li>${renderInline(n.inline, ctx)}${renderBlocks(n.children, ctx)}</li>`;
+        case "step": {
+            // Tight, like the Astro Step: the lead text is not wrapped in <p>. A `title` prop (Mintlify
+            // `<Step title>`) leads it in bold, as format-astro draws it.
+            // The title on its own line (steps.css: `.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(n);
+            const split = title ? undefined : stepLead(n.inline);
+            const lead = title ? `<strong class="step-title">${esc(title)}</strong>` : split ? `<strong class="step-title">${renderInline(split.title, ctx)}</strong>` : "";
+            const text = renderInline(split ? split.rest : n.inline, ctx);
+            // A space after the title: invisible beside a block, but what a text reader (export) needs
+            return `<li>${lead}${lead && text ? " " : ""}${text}${renderBlocks(n.children, ctx)}</li>`;
+        }
         case "tabs":
             return renderAroundGroup(n, "tab", (g) => tabs(g, ctx), (c) => renderBlocks([c], ctx), "");
         case "tab":
@@ -456,7 +465,10 @@ function block(n, ctx) {
             // A group tone applies to every card that has none of its own
             const tone = str(p.tone);
             const kids = tone ? (n.children ?? []).map((c) => (c.type === "card" && !c.props?.tone ? { ...c, props: { ...c.props, tone } } : c)) : n.children;
-            return `<div${attrs(passthrough(p, "not-prose my-4 grid grid-cols-1 gap-4 sm:grid-cols-2"))}>${renderBlocks(kids, ctx)}</div>\n`;
+            // `cols` as format-astro's cardCols: one column on a phone, up to `cols` (1–6) wider; default 2
+            // A list (`1,3`, `[1,2,3]`: format-astro's own breakpoints) takes its widest
+            const cols = Math.min(6, Math.max(1, Math.round(Number(String(p.cols ?? "").replace(/[[\]\s]/g, "").split(",").pop()) || 2)));
+            return `<div${attrs(passthrough(p, `not-prose my-4 grid grid-cols-1 gap-4 ${GRID_COLS[cols]}`))}>${renderBlocks(kids, ctx)}</div>\n`;
         }
         // A scoped theme: `.dark` re-declares the tokens for its subtree (THEME_SCOPES)
         case "theme": {
@@ -690,10 +702,13 @@ function codeBlock(n, ctx) {
     const title = str(p.title) ?? str(p.filename);
     const { highlights, lineNumbers, diffAdd, diffRemove } = opts;
     const hl = ctx.highlighter ?? plainHighlighter;
-    const pre = hl.code(code, lang, opts);
+    // `collapse`: line runs folded behind a toggle (CodeRich.astro's); the label is not code, so copy the source
+    const collapse = parseLineRanges(p.collapse);
+    const collapsedLabel = (count) => esc((count === 1 ? ctx.t("collapsedLine") : ctx.t("collapsedLines")).replace("{n}", String(count)));
+    const pre = collapseLines(hl.code(code, lang, opts), collapse, collapsedLabel);
     // A block with annotations takes CodeRich's styles, as the Astro pipeline routes it to CodeRich.
     const diffs = diffAdd.length > 0 || diffRemove.length > 0;
-    const rich = lineNumbers || highlights.length > 0 || diffs || code.includes("[!code");
+    const rich = lineNumbers || highlights.length > 0 || diffs || code.includes("[!code") || collapse.length > 0;
     // Plain by its TAG, as CodeBlock.astro: a language the highlighter has no grammar for (mermaid) keeps its label
     const plain = !lang || plainHighlighter.resolve(lang) === "text";
     const copyLabel = esc(ctx.t("copyCode"));
@@ -716,7 +731,7 @@ function codeBlock(n, ctx) {
         "data-lang": lang,
         "data-line-numbers": lineNumbers || undefined,
         // With a gutter or [!code …] markers the text on the page is not the code: copy the source, markers removed.
-        "data-copy-text": str(p.copyText) ?? (lineNumbers || diffs || code.includes("[!code") ? stripMarkersForCopy(code.replace(/\n$/, "")) : undefined),
+        "data-copy-text": str(p.copyText) ?? (lineNumbers || diffs || collapse.length > 0 || code.includes("[!code") ? stripMarkersForCopy(code.replace(/\n$/, "")) : undefined),
     })}>` +
         header +
         floating +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/render-html",
-  "version": "0.2.0-beta.129",
+  "version": "0.2.0-beta.131",
   "description": "Dogsbay MD TreeNode → HTML with the Astro components' markup and classes. No highlighter, math or CSS compiler unless you pass one; Worker- and browser-safe",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,9 +30,9 @@
   "dependencies": {
     "htmlparser2": "^10.1.0",
     "markdown-it": "^14.3.0",
-    "@dogsbay/format-dogsbay-md": "0.2.0-beta.129",
-    "@dogsbay/serialize-core": "0.2.0-beta.129",
-    "@dogsbay/types": "0.2.0-beta.129"
+    "@dogsbay/format-dogsbay-md": "0.2.0-beta.131",
+    "@dogsbay/serialize-core": "0.2.0-beta.131",
+    "@dogsbay/types": "0.2.0-beta.131"
   },
   "peerDependencies": {
     "katex": "^0.16.0"