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

package/dist/capabilities.js

@@ -27,8 +27,8 @@ export const ASTRO_CAPABILITIES = [
     { feature: "diagram", support: "full", rendersAs: "`<Diagram>` (source + pre-rendered SVG)" },
     { feature: "youtube", support: "full", rendersAs: "`<YouTube>`" },
     // ── Components ───────────────────────────────────────────
-    { feature: "callout", support: "full", rendersAs: "`<Alert variant>` with the authored type kept as `data-type`" },
-    { feature: "details", support: "full", rendersAs: "`<CollapsibleAlert variant title open icon>` (`title`, or its alias `summary`)" },
+    { feature: "callout", support: "full", rendersAs: "`<Alert variant icon>` with the authored type kept as `data-type`; `collapsed`/`collapsible` → `<CollapsibleAlert>` (a `<details>`), as render-html; the title is inline Markdown" },
+    { feature: "details", support: "full", rendersAs: "`<CollapsibleAlert variant title open icon>` (`title`, or its alias `summary`, inline Markdown in a `title` slot)" },
     { feature: "details-sheet", support: "full", rendersAs: "`<DetailsSheet>` around the CollapsibleAlert: `<db-details-sheet>` opens it as a right-hand native `<dialog>`; without the script it stays a collapsible block" },
     { feature: "theme", support: "full", rendersAs: "a `<div class=\"dark …\" data-theme>`: the theme re-declares its tokens on `.dark`, so the subtree turns dark" },
     { feature: "tabs-variant", support: "full", rendersAs: "TabsList/TabsTrigger given the variant's classes (TAB_VARIANTS), merged over their base" },

package/dist/serialize.js

@@ -875,13 +875,54 @@ function calloutToAstro(node, ctx) {
         "type", "variant", "title", "icon", "class",
     ]);
     const inner = childrenToAstro(node, ctx);
+    // An authored title is inline Markdown (`Before \`harbor init\``), as render-html reads it (MD-002);
+    // the default label is text
+    const titleNodes = explicitTitle && explicitTitle.length > 0 ? titleInline(title) : [{ type: "text", text: title }];
+    const plainTitle = isPlainCaption(titleNodes);
+    // `collapsed` / `collapsible`: a disclosure, as render-html draws it (MD-001)
+    if (isCollapsibleCallout(node.props)) {
+        ctx.imports.add("details");
+        const attrs = [`variant="${escapeAttr(collapsibleVariant(variant))}"`, componentAttr("title", plainTitle ? captionText(titleNodes) : title).trimStart()];
+        if (calloutStartsOpen(node.props))
+            attrs.push("open");
+        const slot = plainTitle ? "" : `\n  <Fragment slot="title">${renderInline(titleNodes, ctx)}</Fragment>`;
+        const collapsiblePassthrough = renderPassthroughAttrs(node.props, ["type", "variant", "title", "icon", "class", "collapsed", "collapsible", "open"]);
+        return `<CollapsibleAlert ${attrs.join(" ")}${iconAttr}${classAttr}${collapsiblePassthrough}>${slot}
+${indentStr(inner, 2)}
+</CollapsibleAlert>`;
+    }
     return `<Alert variant="${escapeAttr(variant)}"${iconAttr}${classAttr}${passthrough}>
-  <AlertTitle>${escapeTemplate(title)}</AlertTitle>
+  <AlertTitle>${plainTitle ? escapeTemplate(captionText(titleNodes)) : renderInline(titleNodes, ctx)}</AlertTitle>
   <AlertDescription>
 ${indentStr(inner, 4)}
   </AlertDescription>
 </Alert>`;
 }
+/**
+ * A presence flag: `open`, `open=""`, `open="true"` and `true` are on; absent, `false` and `"false"` are
+ * off. A bare `{open}` parses as "" (falsy), and "false" is truthy, so a plain truth test got both wrong
+ * (MD-003). render-html reads flags with the same rule (`flagOn`).
+ */
+function flagOn(v) {
+    return v !== undefined && v !== null && v !== false && v !== "false";
+}
+/** CollapsibleAlert's variants; `plain` is chrome (no tint, icon or role). */
+const COLLAPSIBLE_VARIANTS = new Set(["plain", "destructive", "note", "abstract", "info", "tip", "success", "question", "warning", "failure", "danger", "bug", "example", "quote"]);
+/** A disclosure's variant: lower-cased, aliases mapped, anything CollapsibleAlert does not draw → note. */
+function collapsibleVariant(raw) {
+    const v = raw.toLowerCase();
+    const mapped = CALLOUT_VARIANT_MAP[v] ?? v;
+    return COLLAPSIBLE_VARIANTS.has(mapped) ? mapped : "note";
+}
+/** A callout with `collapsible` on or any `collapsed` is a disclosure (render-html's `callout`). */
+function isCollapsibleCallout(props) {
+    return flagOn(props?.collapsible) || (props?.collapsed !== undefined && props?.collapsed !== null);
+}
+/** It starts open when `collapsed` is off (`collapsed="false"`) or `open` is on. */
+function calloutStartsOpen(props) {
+    const c = props?.collapsed;
+    return c === false || c === "false" || flagOn(props?.open);
+}
 /**
  * Merge a default class string with an optional user-provided class string.
  * Concatenates (user classes appended) so utility frameworks like Tailwind
@@ -1022,13 +1063,17 @@ function genericContainerToAstro(node, ctx) {
 function detailsToAstro(node, ctx) {
     ctx.imports.add("details");
     // `variant` as documented; `type` as dogsbay-ssg (and callouts) read it.
-    const variant = node.props?.variant ?? node.props?.type ?? "note";
+    // Aliases (`caution` → danger) and unknown names (→ note) as render-html maps them
+    const variant = collapsibleVariant(node.props?.variant ?? node.props?.type ?? "note");
     // `summary` is dogsbay-md's alias for the title (`:::details{summary="…"}`)
     const title = node.props?.title ?? node.props?.summary ?? "Details";
-    const open = node.props?.open;
+    const open = flagOn(node.props?.open);
     const icon = node.props?.icon;
     const inner = childrenToAstro(node, ctx);
-    const attrs = [`variant="${escapeAttr(variant)}"`, componentAttr("title", title).trimStart()];
+    // The title is inline Markdown, as in render-html: plain text stays the `title` prop
+    const titleNodes = titleInline(title);
+    const plainTitle = isPlainCaption(titleNodes);
+    const attrs = [`variant="${escapeAttr(variant)}"`, componentAttr("title", plainTitle ? captionText(titleNodes) : title).trimStart()];
     if (open)
         attrs.push("open");
     if (icon)
@@ -1037,7 +1082,8 @@ function detailsToAstro(node, ctx) {
     const passthrough = renderPassthroughAttrs(node.props, [
         "variant", "type", "title", "open", "icon", "class", "summary", "sheet",
     ]);
-    const alert = `<CollapsibleAlert ${attrs.join(" ")}${classAttr}${passthrough}>
+    const slot = plainTitle ? "" : `\n  <Fragment slot="title">${renderInline(titleNodes, ctx)}</Fragment>`;
+    const alert = `<CollapsibleAlert ${attrs.join(" ")}${classAttr}${passthrough}>${slot}
 ${indentStr(inner, 2)}
 </CollapsibleAlert>`;
     // `sheet`: the same details, opened as a side sheet by <db-details-sheet>
@@ -1123,10 +1169,25 @@ function captionInline(caption) {
     return parseInline(caption);
 }
 const isPlainCaption = (nodes) => nodes.every((n) => n.type === "text" && !n.bold && !n.italic && !n.strikethrough);
+/**
+ * Formatting tags with no attributes, the HTML a title keeps (a raw `<details><summary><code>x</code>`
+ * becomes the title `<code>x</code>`). render-html has the same list.
+ */
+const TITLE_TAG = /^<\/?(?:code|kbd|b|strong|i|em|s|del|mark|sub|sup|br)\s*\/?>$/i;
+/**
+ * A callout or details title: inline Markdown, and any other raw HTML is TEXT. Importers write
+ * plain-text titles with angle brackets (`Map<K, V>`, `List<String>`), which as HTML dropped words,
+ * and a title with `<img onerror=…>` ran a script in the summary. render-html reads titles the same way.
+ */
+function titleInline(title) {
+    return captionInline(title).map((n) => (n.type === "html-inline" && !TITLE_TAG.test(n.html.trim()) ? { type: "text", text: n.html } : n));
+}
+/** A plain caption's text (escapes undone by the parse). */
+const captionText = (nodes) => nodes.map((n) => (n.type === "text" ? n.text : "")).join("");
 function captionToAstro(caption, ctx) {
     const nodes = captionInline(caption);
     return isPlainCaption(nodes)
-        ? escapeTemplate(nodes.map((n) => (n.type === "text" ? n.text : "")).join(""))
+        ? escapeTemplate(captionText(nodes))
         : renderInline(nodes, ctx);
 }
 function tableToAstro(node, ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/format-astro",
-  "version": "0.2.0-beta.128",
+  "version": "0.2.0-beta.129",
   "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.128",
-    "@dogsbay/render-html": "0.2.0-beta.128",
-    "@dogsbay/serialize-core": "0.2.0-beta.128",
-    "@dogsbay/site-files": "0.2.0-beta.128",
-    "@dogsbay/types": "0.2.0-beta.128",
-    "@dogsbay/ui": "0.2.0-beta.128"
+    "@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"
   },
   "repository": {
     "type": "git",