@usetheo/ui 0.1.0-next.0 → 0.1.0-next.1

package/dist/slide/plugins/mermaid/index.d.ts

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { a as SlidePlugin } from '../../../plugin-Atb0VKtr.js';
+import 'hast';
+import 'mdast';
+import 'zod';
+
+/**
+ * Slide rich-content plugin — Mermaid diagrams.
+ *
+ * Peer-dep: `mermaid` (optional, ~370 KB raw — lazy + opt-in mandatory).
+ * Render is client-only because Mermaid measures DOM nodes during layout;
+ * SSR / static render emits a labelled placeholder + source-code fallback.
+ *
+ * Pipeline contribution (D11 of the rich-content plan):
+ *   - `hastTransform`: detect `<pre><code class="language-mermaid">…</code></pre>`
+ *     and replace with `<div class="theo-slide-mermaid-host" data-theo-mermaid-source="…">`.
+ *   - `components.div`: when div has `data-theo-mermaid-source`, render the
+ *     `<MermaidDiagram>` React component that lazy-imports `mermaid` and
+ *     injects the SVG via `dangerouslySetInnerHTML` after `mermaid.render()`.
+ *
+ * EC-4: complete SVG tag + attribute allow-list (~30 tags) so the rendered SVG
+ * survives sanitize. Critical: without these, sanitize strips the SVG entirely.
+ *
+ * EC-10: SSR placeholder is distinguishable from a render error. Error path
+ * surfaces the Mermaid source code in a `<pre>` so consumers can debug + the
+ * print path still shows the code (PDF cannot run dynamic Mermaid).
+ */
+
+interface MermaidPluginOptions {
+    /** Mermaid theme name. Defaults to `"default"`. */
+    theme?: "default" | "forest" | "dark" | "neutral" | "base";
+}
+/**
+ * React component that renders Mermaid lazily on mount.
+ *
+ * SSR / pre-load: renders the source as `<pre>` + `role="img"` for a11y.
+ * Client: lazy-loads `mermaid`, calls `mermaid.render()`, then injects the
+ *         resulting SVG via `dangerouslySetInnerHTML` so React owns the DOM
+ *         subtree (avoids reconciliation crashes when state flips back to the
+ *         placeholder — `ref.innerHTML` would mutate under React's feet).
+ *
+ * The Mermaid output is a TRUSTED string from the `mermaid` lib itself (not
+ * user-controlled markup) — the user-supplied source is the DSL, not raw HTML.
+ * Using dangerouslySetInnerHTML here is a controlled escape hatch.
+ *
+ * Peer-dep guard: if `import("mermaid")` fails, falls back to the same
+ * pre-formatted source view + an `aria-label` hint (EC-10).
+ */
+declare const MermaidDiagram: FC<{
+    source: string;
+    theme?: string;
+}>;
+declare function mermaidPlugin(opts?: MermaidPluginOptions): SlidePlugin;
+
+export { MermaidDiagram, type MermaidPluginOptions, mermaidPlugin };

package/dist/slide/plugins/mermaid/index.js

@@ -0,0 +1,218 @@
+import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/primitives/slide/plugins/mermaid/index.tsx
+var SVG_TAG_NAMES = [
+  "div",
+  // Custom element used to bridge into our React renderer (mapped via components).
+  "theo-mermaid",
+  // root + grouping
+  "svg",
+  "g",
+  "defs",
+  "use",
+  "symbol",
+  "marker",
+  "pattern",
+  "mask",
+  "clipPath",
+  // shapes
+  "path",
+  "rect",
+  "circle",
+  "ellipse",
+  "line",
+  "polyline",
+  "polygon",
+  // text
+  "text",
+  "tspan",
+  "textPath",
+  "title",
+  "desc",
+  // gradients + filters (used by some flowchart themes)
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "filter",
+  "feGaussianBlur",
+  "feOffset",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feMerge",
+  "feMergeNode",
+  "feFlood",
+  // foreign content (HTML labels)
+  "foreignObject",
+  "span",
+  "br"
+];
+var SVG_ATTRIBUTES = {
+  "*": [
+    "id",
+    "className",
+    "style",
+    "transform",
+    "fill",
+    "stroke",
+    "strokeWidth",
+    "strokeDasharray",
+    "strokeLinecap",
+    "strokeLinejoin",
+    "opacity",
+    "fillOpacity",
+    "strokeOpacity",
+    "ariaLabel",
+    "ariaHidden",
+    "role"
+  ],
+  svg: ["xmlns", "viewBox", "width", "height", "preserveAspectRatio", "xmlnsXlink", "version"],
+  path: ["d", "markerEnd", "markerStart", "markerMid"],
+  rect: ["x", "y", "width", "height", "rx", "ry"],
+  circle: ["cx", "cy", "r"],
+  ellipse: ["cx", "cy", "rx", "ry"],
+  line: ["x1", "y1", "x2", "y2"],
+  polyline: ["points"],
+  polygon: ["points"],
+  text: [
+    "x",
+    "y",
+    "dx",
+    "dy",
+    "textAnchor",
+    "dominantBaseline",
+    "fontSize",
+    "fontFamily",
+    "fontWeight"
+  ],
+  tspan: ["x", "y", "dx", "dy"],
+  textPath: ["xlinkHref", "href", "startOffset"],
+  marker: ["markerUnits", "markerWidth", "markerHeight", "refX", "refY", "orient", "viewBox"],
+  use: ["xlinkHref", "href", "x", "y", "width", "height"],
+  linearGradient: ["x1", "y1", "x2", "y2", "gradientUnits"],
+  radialGradient: ["cx", "cy", "r", "fx", "fy", "gradientUnits"],
+  stop: ["offset", "stopColor", "stopOpacity"],
+  foreignObject: ["x", "y", "width", "height"],
+  div: ["data-state", "data-theo-mermaid-source", "className"],
+  "theo-mermaid": ["source"]
+};
+var MermaidDiagram = ({ source, theme }) => {
+  const [svg, setSvg] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setSvg(null);
+    setError(null);
+    (async () => {
+      try {
+        const mermaid = (await import('mermaid')).default;
+        if (cancelled) return;
+        mermaid.initialize({ startOnLoad: false, theme: theme ?? "default" });
+        const id = `theo-mmd-${Math.random().toString(36).slice(2, 10)}`;
+        const result = await mermaid.render(id, source);
+        if (!cancelled) {
+          setSvg(result.svg);
+        }
+      } catch (e) {
+        if (cancelled) return;
+        const msg = e instanceof Error ? e.message : String(e);
+        const moduleNotFound = msg.includes("Cannot find module") || msg.includes("Could not resolve") || msg.includes("Failed to fetch") || msg.includes("Failed to resolve module") || msg.includes("ERR_MODULE_NOT_FOUND");
+        if (moduleNotFound) {
+          setError("Mermaid not installed. Run: pnpm add mermaid");
+        } else {
+          setError(`Mermaid render failed: ${msg}`);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [source, theme]);
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-theo-slide-mermaid": true,
+        "data-state": "error",
+        role: "img",
+        "aria-label": error,
+        className: "theo-slide-mermaid-host",
+        children: /* @__PURE__ */ jsx("pre", { style: { fontSize: "0.8em", opacity: 0.7, whiteSpace: "pre-wrap" }, children: source })
+      }
+    );
+  }
+  if (svg) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-theo-slide-mermaid": true,
+        "data-state": "ready",
+        role: "img",
+        "aria-label": "Mermaid diagram",
+        className: "theo-slide-mermaid-host",
+        dangerouslySetInnerHTML: { __html: svg }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-theo-slide-mermaid": true,
+      "data-state": "loading",
+      role: "img",
+      "aria-label": "Mermaid diagram",
+      className: "theo-slide-mermaid-host",
+      children: /* @__PURE__ */ jsx("pre", { style: { fontSize: "0.7em", opacity: 0.4, whiteSpace: "pre-wrap" }, children: source })
+    }
+  );
+};
+function mermaidPlugin(opts = {}) {
+  return {
+    name: "mermaid",
+    sanitizeSchemaExtension: {
+      tagNames: SVG_TAG_NAMES,
+      attributes: SVG_ATTRIBUTES
+    },
+    components: {
+      // The hastTransform below replaces mermaid <pre> with a `<div>` carrying
+      // `data-theo-mermaid-source`. We can't override `div` globally — instead,
+      // we use a custom tagName `theo-mermaid` that the React renderer maps.
+      "theo-mermaid": ((props) => /* @__PURE__ */ jsx(MermaidDiagram, { source: props.source ?? "", theme: opts.theme }))
+    },
+    async hastTransform(tree) {
+      let visit;
+      try {
+        visit = (await import('unist-util-visit')).visit;
+      } catch (e) {
+        throw new Error(`[slide/plugins/mermaid] peer-dep 'unist-util-visit' missing: ${e}`);
+      }
+      visit(
+        tree,
+        "element",
+        (node, _idx, parent) => {
+          if (node.tagName !== "code") return;
+          const className = node.properties?.className ?? [];
+          if (!className.includes("language-mermaid")) return;
+          if (!parent || parent.tagName !== "pre") return;
+          const codeNode = node.children?.[0];
+          const source = codeNode && codeNode.type === "text" ? codeNode.value : "";
+          Object.assign(parent, {
+            type: "element",
+            tagName: "theo-mermaid",
+            // Note: `source` is passed as a non-standard property; the React
+            // component picks it up. We avoid `data-*` attributes here so we
+            // don't have to whitelist them in sanitize.
+            properties: { source },
+            children: []
+          });
+        }
+      );
+      return tree;
+    }
+  };
+}
+
+export { MermaidDiagram, mermaidPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/slide/plugins/mermaid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/primitives/slide/plugins/mermaid/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { Element, Root as HastRoot } from \"hast\";\n/**\n * Slide rich-content plugin — Mermaid diagrams.\n *\n * Peer-dep: `mermaid` (optional, ~370 KB raw — lazy + opt-in mandatory).\n * Render is client-only because Mermaid measures DOM nodes during layout;\n * SSR / static render emits a labelled placeholder + source-code fallback.\n *\n * Pipeline contribution (D11 of the rich-content plan):\n *   - `hastTransform`: detect `<pre><code class=\"language-mermaid\">…</code></pre>`\n *     and replace with `<div class=\"theo-slide-mermaid-host\" data-theo-mermaid-source=\"…\">`.\n *   - `components.div`: when div has `data-theo-mermaid-source`, render the\n *     `<MermaidDiagram>` React component that lazy-imports `mermaid` and\n *     injects the SVG via `dangerouslySetInnerHTML` after `mermaid.render()`.\n *\n * EC-4: complete SVG tag + attribute allow-list (~30 tags) so the rendered SVG\n * survives sanitize. Critical: without these, sanitize strips the SVG entirely.\n *\n * EC-10: SSR placeholder is distinguishable from a render error. Error path\n * surfaces the Mermaid source code in a `<pre>` so consumers can debug + the\n * print path still shows the code (PDF cannot run dynamic Mermaid).\n */\nimport { type FC, useEffect, useState } from \"react\";\nimport type { SlidePlugin } from \"../../plugin.js\";\n\n// EC-4: comprehensive SVG tag list (mermaid 11.x output across diagram types).\nconst SVG_TAG_NAMES = [\n  \"div\",\n  // Custom element used to bridge into our React renderer (mapped via components).\n  \"theo-mermaid\",\n  // root + grouping\n  \"svg\",\n  \"g\",\n  \"defs\",\n  \"use\",\n  \"symbol\",\n  \"marker\",\n  \"pattern\",\n  \"mask\",\n  \"clipPath\",\n  // shapes\n  \"path\",\n  \"rect\",\n  \"circle\",\n  \"ellipse\",\n  \"line\",\n  \"polyline\",\n  \"polygon\",\n  // text\n  \"text\",\n  \"tspan\",\n  \"textPath\",\n  \"title\",\n  \"desc\",\n  // gradients + filters (used by some flowchart themes)\n  \"linearGradient\",\n  \"radialGradient\",\n  \"stop\",\n  \"filter\",\n  \"feGaussianBlur\",\n  \"feOffset\",\n  \"feColorMatrix\",\n  \"feComponentTransfer\",\n  \"feComposite\",\n  \"feMerge\",\n  \"feMergeNode\",\n  \"feFlood\",\n  // foreign content (HTML labels)\n  \"foreignObject\",\n  \"span\",\n  \"br\",\n];\n\nconst SVG_ATTRIBUTES: Record<string, string[]> = {\n  \"*\": [\n    \"id\",\n    \"className\",\n    \"style\",\n    \"transform\",\n    \"fill\",\n    \"stroke\",\n    \"strokeWidth\",\n    \"strokeDasharray\",\n    \"strokeLinecap\",\n    \"strokeLinejoin\",\n    \"opacity\",\n    \"fillOpacity\",\n    \"strokeOpacity\",\n    \"ariaLabel\",\n    \"ariaHidden\",\n    \"role\",\n  ],\n  svg: [\"xmlns\", \"viewBox\", \"width\", \"height\", \"preserveAspectRatio\", \"xmlnsXlink\", \"version\"],\n  path: [\"d\", \"markerEnd\", \"markerStart\", \"markerMid\"],\n  rect: [\"x\", \"y\", \"width\", \"height\", \"rx\", \"ry\"],\n  circle: [\"cx\", \"cy\", \"r\"],\n  ellipse: [\"cx\", \"cy\", \"rx\", \"ry\"],\n  line: [\"x1\", \"y1\", \"x2\", \"y2\"],\n  polyline: [\"points\"],\n  polygon: [\"points\"],\n  text: [\n    \"x\",\n    \"y\",\n    \"dx\",\n    \"dy\",\n    \"textAnchor\",\n    \"dominantBaseline\",\n    \"fontSize\",\n    \"fontFamily\",\n    \"fontWeight\",\n  ],\n  tspan: [\"x\", \"y\", \"dx\", \"dy\"],\n  textPath: [\"xlinkHref\", \"href\", \"startOffset\"],\n  marker: [\"markerUnits\", \"markerWidth\", \"markerHeight\", \"refX\", \"refY\", \"orient\", \"viewBox\"],\n  use: [\"xlinkHref\", \"href\", \"x\", \"y\", \"width\", \"height\"],\n  linearGradient: [\"x1\", \"y1\", \"x2\", \"y2\", \"gradientUnits\"],\n  radialGradient: [\"cx\", \"cy\", \"r\", \"fx\", \"fy\", \"gradientUnits\"],\n  stop: [\"offset\", \"stopColor\", \"stopOpacity\"],\n  foreignObject: [\"x\", \"y\", \"width\", \"height\"],\n  div: [\"data-state\", \"data-theo-mermaid-source\", \"className\"],\n  \"theo-mermaid\": [\"source\"],\n};\n\nexport interface MermaidPluginOptions {\n  /** Mermaid theme name. Defaults to `\"default\"`. */\n  theme?: \"default\" | \"forest\" | \"dark\" | \"neutral\" | \"base\";\n}\n\n/**\n * React component that renders Mermaid lazily on mount.\n *\n * SSR / pre-load: renders the source as `<pre>` + `role=\"img\"` for a11y.\n * Client: lazy-loads `mermaid`, calls `mermaid.render()`, then injects the\n *         resulting SVG via `dangerouslySetInnerHTML` so React owns the DOM\n *         subtree (avoids reconciliation crashes when state flips back to the\n *         placeholder — `ref.innerHTML` would mutate under React's feet).\n *\n * The Mermaid output is a TRUSTED string from the `mermaid` lib itself (not\n * user-controlled markup) — the user-supplied source is the DSL, not raw HTML.\n * Using dangerouslySetInnerHTML here is a controlled escape hatch.\n *\n * Peer-dep guard: if `import(\"mermaid\")` fails, falls back to the same\n * pre-formatted source view + an `aria-label` hint (EC-10).\n */\nexport const MermaidDiagram: FC<{ source: string; theme?: string }> = ({ source, theme }) => {\n  const [svg, setSvg] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    // Reset state when source/theme changes so the placeholder shows again\n    // while the new diagram renders.\n    setSvg(null);\n    setError(null);\n    (async () => {\n      try {\n        // biome-ignore lint/suspicious/noExplicitAny: mermaid default export untyped\n        const mermaid: any = (await import(\"mermaid\")).default;\n        if (cancelled) return;\n        mermaid.initialize({ startOnLoad: false, theme: theme ?? \"default\" });\n        const id = `theo-mmd-${Math.random().toString(36).slice(2, 10)}`;\n        const result = await mermaid.render(id, source);\n        if (!cancelled) {\n          setSvg(result.svg);\n        }\n      } catch (e) {\n        if (cancelled) return;\n        const msg = e instanceof Error ? e.message : String(e);\n        // Recognize the various module-resolution failure messages emitted by\n        // Node, Vite, Rollup, Webpack, Vitest, and browser dynamic-import.\n        const moduleNotFound =\n          msg.includes(\"Cannot find module\") ||\n          msg.includes(\"Could not resolve\") ||\n          msg.includes(\"Failed to fetch\") ||\n          msg.includes(\"Failed to resolve module\") ||\n          msg.includes(\"ERR_MODULE_NOT_FOUND\");\n        if (moduleNotFound) {\n          setError(\"Mermaid not installed. Run: pnpm add mermaid\");\n        } else {\n          setError(`Mermaid render failed: ${msg}`);\n        }\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [source, theme]);\n\n  if (error) {\n    return (\n      <div\n        data-theo-slide-mermaid\n        data-state=\"error\"\n        role=\"img\"\n        aria-label={error}\n        className=\"theo-slide-mermaid-host\"\n      >\n        <pre style={{ fontSize: \"0.8em\", opacity: 0.7, whiteSpace: \"pre-wrap\" }}>{source}</pre>\n      </div>\n    );\n  }\n  if (svg) {\n    // SVG is React-owned via dangerouslySetInnerHTML so the next state change\n    // (e.g. new `source` prop → back to placeholder) can unmount cleanly.\n    return (\n      <div\n        data-theo-slide-mermaid\n        data-state=\"ready\"\n        role=\"img\"\n        aria-label=\"Mermaid diagram\"\n        className=\"theo-slide-mermaid-host\"\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: mermaid.render() output is trusted (lib-generated SVG, not user markup)\n        dangerouslySetInnerHTML={{ __html: svg }}\n      />\n    );\n  }\n  return (\n    <div\n      data-theo-slide-mermaid\n      data-state=\"loading\"\n      role=\"img\"\n      aria-label=\"Mermaid diagram\"\n      className=\"theo-slide-mermaid-host\"\n    >\n      <pre style={{ fontSize: \"0.7em\", opacity: 0.4, whiteSpace: \"pre-wrap\" }}>{source}</pre>\n    </div>\n  );\n};\n\nexport function mermaidPlugin(opts: MermaidPluginOptions = {}): SlidePlugin {\n  return {\n    name: \"mermaid\",\n    sanitizeSchemaExtension: {\n      tagNames: SVG_TAG_NAMES,\n      attributes: SVG_ATTRIBUTES,\n    },\n    components: {\n      // The hastTransform below replaces mermaid <pre> with a `<div>` carrying\n      // `data-theo-mermaid-source`. We can't override `div` globally — instead,\n      // we use a custom tagName `theo-mermaid` that the React renderer maps.\n      \"theo-mermaid\": ((props: { source?: string }) => (\n        <MermaidDiagram source={props.source ?? \"\"} theme={opts.theme} />\n      )) as FC<unknown>,\n    },\n    async hastTransform(tree: HastRoot): Promise<HastRoot> {\n      // unist-util-visit is a peer-dep of the slide stack — should always be\n      // present. Guard anyway per EC-2.\n      // biome-ignore lint/suspicious/noExplicitAny: unist-util-visit untyped at runtime\n      let visit: any;\n      try {\n        visit = (await import(\"unist-util-visit\")).visit;\n      } catch (e) {\n        throw new Error(`[slide/plugins/mermaid] peer-dep 'unist-util-visit' missing: ${e}`);\n      }\n      visit(\n        tree,\n        \"element\",\n        (\n          node: Element,\n          _idx: number | undefined,\n          parent: { tagName?: string; type?: string; children?: unknown[] } | undefined,\n        ) => {\n          if (node.tagName !== \"code\") return;\n          const className = (node.properties?.className as string[] | undefined) ?? [];\n          if (!className.includes(\"language-mermaid\")) return;\n          if (!parent || parent.tagName !== \"pre\") return;\n          const codeNode = node.children?.[0];\n          const source = codeNode && codeNode.type === \"text\" ? codeNode.value : \"\";\n          // Replace the entire <pre> with our custom element. hast-util-to-jsx-runtime\n          // maps element tagName to a React component if found in `components` map.\n          Object.assign(parent, {\n            type: \"element\",\n            tagName: \"theo-mermaid\",\n            // Note: `source` is passed as a non-standard property; the React\n            // component picks it up. We avoid `data-*` attributes here so we\n            // don't have to whitelist them in sanitize.\n            properties: { source },\n            children: [],\n          });\n        },\n      );\n      return tree;\n    },\n  };\n}\n"]}

package/dist/slide/plugins/shiki/index.d.ts

@@ -0,0 +1,18 @@
+import { a as SlidePlugin } from '../../../plugin-Atb0VKtr.js';
+import 'hast';
+import 'mdast';
+import 'react';
+import 'zod';
+
+interface ShikiPluginOptions {
+    /** Dual-theme map — light/dark Shiki theme names. Defaults to `github-light` / `github-dark`. */
+    themes?: {
+        light: string;
+        dark: string;
+    };
+    /** Languages to pre-load. Unknown languages pass-through. Defaults to a tech-stack baseline. */
+    langs?: string[];
+}
+declare function shikiPlugin(opts?: ShikiPluginOptions): SlidePlugin;
+
+export { type ShikiPluginOptions, shikiPlugin };

package/dist/slide/plugins/shiki/index.js

@@ -0,0 +1,87 @@
+// src/components/primitives/slide/plugins/shiki/index.ts
+var DEFAULT_LANGS = [
+  "ts",
+  "tsx",
+  "js",
+  "jsx",
+  "python",
+  "go",
+  "rust",
+  "java",
+  "json",
+  "yaml",
+  "bash",
+  "shell",
+  "html",
+  "css",
+  "sql",
+  "markdown"
+];
+function shikiPlugin(opts = {}) {
+  const themes = opts.themes ?? { light: "github-light", dark: "github-dark" };
+  const langs = opts.langs ?? DEFAULT_LANGS;
+  let highlighter = null;
+  let peerDepMissing = false;
+  async function getHighlighter() {
+    if (highlighter) return highlighter;
+    if (peerDepMissing) return null;
+    try {
+      const shiki = await import('shiki');
+      highlighter = await shiki.createHighlighter({
+        themes: [themes.light, themes.dark],
+        langs
+      });
+      return highlighter;
+    } catch (e) {
+      peerDepMissing = true;
+      throw new Error(
+        `[slide/plugins/shiki] peer-dep 'shiki' not installed or failed to load. Run: pnpm add shiki. Original: ${e instanceof Error ? e.message : String(e)}`
+      );
+    }
+  }
+  return {
+    name: "shiki",
+    sanitizeSchemaExtension: {
+      tagNames: ["span", "pre", "code"],
+      // Shiki emits inline `style` and `class` on tokens; "*" applies to every tag.
+      attributes: {
+        "*": ["style", "className"],
+        pre: ["style", "className", "tabIndex"],
+        code: ["style", "className"],
+        span: ["style", "className"]
+      }
+    },
+    async hastTransform(tree) {
+      const hl = await getHighlighter();
+      if (!hl) return tree;
+      const { visit } = await import('unist-util-visit');
+      const { fromHtml } = await import('hast-util-from-html');
+      visit(tree, "element", (node, _idx, parent) => {
+        if (node.tagName !== "code") return;
+        const className = node.properties?.className ?? [];
+        const langClass = className.find((c) => c.startsWith("language-"));
+        if (!langClass) return;
+        const lang = langClass.replace("language-", "");
+        if (!langs.includes(lang)) return;
+        const first = node.children?.[0];
+        const codeText = first && first.type === "text" ? first.value : "";
+        let html;
+        try {
+          html = hl.codeToHtml(codeText, { lang, themes });
+        } catch {
+          return;
+        }
+        const newTree = fromHtml(html, { fragment: true });
+        const top = newTree.children[0];
+        if (parent?.tagName === "pre" && parent.children?.length === 1 && top) {
+          Object.assign(parent, top);
+        }
+      });
+      return tree;
+    }
+  };
+}
+
+export { shikiPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/slide/plugins/shiki/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/primitives/slide/plugins/shiki/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Slide rich-content plugin — Shiki syntax highlighting.\n *\n * Lazy + opt-in (ADR D9, D13 of the rich-content plan). Peer-dep `shiki` is\n * declared optional in `package.json`; the plugin guards every dynamic import\n * so a missing peer-dep is reported (D16) rather than crashing the slide.\n *\n * Pipeline contribution:\n *   - `hastTransform`: walks `<pre><code class=\"language-XXX\">` nodes, replaces\n *     them with the pre-rendered `<pre><code>` tree emitted by Shiki.\n *   - `sanitizeSchemaExtension`: allows `<span>` with `style` and `class`\n *     (Shiki emits inline styles for tokens).\n *\n * Performance:\n *   - Highlighter is created lazily on first use and cached.\n *   - Grammars listed in `langs` are pre-loaded once; unknown langs pass-through\n *     as plain `<pre><code>` (defaultSchema allows that).\n *\n * @example\n *   import { shikiPlugin } from \"@usetheo/ui/slide/plugins/shiki\";\n *   import \"shiki\";  // installed as peer-dep\n *   <Slide markdown={md} plugins={[shikiPlugin({ langs: [\"ts\",\"python\"] })]} />\n */\nimport type { Element, Root as HastRoot } from \"hast\";\nimport type { SlidePlugin } from \"../../plugin.js\";\n\nexport interface ShikiPluginOptions {\n  /** Dual-theme map — light/dark Shiki theme names. Defaults to `github-light` / `github-dark`. */\n  themes?: { light: string; dark: string };\n  /** Languages to pre-load. Unknown languages pass-through. Defaults to a tech-stack baseline. */\n  langs?: string[];\n}\n\nconst DEFAULT_LANGS = [\n  \"ts\",\n  \"tsx\",\n  \"js\",\n  \"jsx\",\n  \"python\",\n  \"go\",\n  \"rust\",\n  \"java\",\n  \"json\",\n  \"yaml\",\n  \"bash\",\n  \"shell\",\n  \"html\",\n  \"css\",\n  \"sql\",\n  \"markdown\",\n];\n\nexport function shikiPlugin(opts: ShikiPluginOptions = {}): SlidePlugin {\n  const themes = opts.themes ?? { light: \"github-light\", dark: \"github-dark\" };\n  const langs = opts.langs ?? DEFAULT_LANGS;\n  // biome-ignore lint/suspicious/noExplicitAny: shiki has no exported type for `Highlighter` at the top level\n  let highlighter: any = null;\n  let peerDepMissing = false;\n\n  // biome-ignore lint/suspicious/noExplicitAny: shiki Highlighter is untyped here\n  async function getHighlighter(): Promise<any> {\n    if (highlighter) return highlighter;\n    if (peerDepMissing) return null;\n    try {\n      const shiki = await import(\"shiki\");\n      highlighter = await shiki.createHighlighter({\n        themes: [themes.light, themes.dark],\n        langs,\n      });\n      return highlighter;\n    } catch (e) {\n      peerDepMissing = true;\n      // Surface via D16 path (composePlugins catches → PLUGIN_ERROR).\n      throw new Error(\n        `[slide/plugins/shiki] peer-dep 'shiki' not installed or failed to load. Run: pnpm add shiki. Original: ${e instanceof Error ? e.message : String(e)}`,\n      );\n    }\n  }\n\n  return {\n    name: \"shiki\",\n    sanitizeSchemaExtension: {\n      tagNames: [\"span\", \"pre\", \"code\"],\n      // Shiki emits inline `style` and `class` on tokens; \"*\" applies to every tag.\n      attributes: {\n        \"*\": [\"style\", \"className\"],\n        pre: [\"style\", \"className\", \"tabIndex\"],\n        code: [\"style\", \"className\"],\n        span: [\"style\", \"className\"],\n      },\n    },\n    async hastTransform(tree: HastRoot): Promise<HastRoot> {\n      const hl = await getHighlighter();\n      if (!hl) return tree; // peer-dep missing AND we've already reported it once\n      const { visit } = await import(\"unist-util-visit\");\n      const { fromHtml } = await import(\"hast-util-from-html\");\n      // Walk: find <code class=\"language-XXX\">, replace its parent <pre> subtree\n      // with the highlighted output (which is also a <pre><code>...</code></pre>).\n      // biome-ignore lint/suspicious/noExplicitAny: hast unist-util-visit untyped here\n      visit(tree, \"element\", (node: Element, _idx: number | undefined, parent: any) => {\n        if (node.tagName !== \"code\") return;\n        const className = (node.properties?.className as string[] | undefined) ?? [];\n        const langClass = className.find((c) => c.startsWith(\"language-\"));\n        if (!langClass) return;\n        const lang = langClass.replace(\"language-\", \"\");\n        if (!langs.includes(lang)) return;\n        const first = node.children?.[0];\n        const codeText = first && first.type === \"text\" ? first.value : \"\";\n        let html: string;\n        try {\n          html = hl.codeToHtml(codeText, { lang, themes });\n        } catch {\n          // Shiki failed on this snippet (e.g. malformed input). Leave the plain\n          // <pre><code> in place — the consumer still gets readable text.\n          return;\n        }\n        const newTree = fromHtml(html, { fragment: true });\n        const top = newTree.children[0];\n        if (parent?.tagName === \"pre\" && parent.children?.length === 1 && top) {\n          Object.assign(parent, top);\n        }\n      });\n      return tree;\n    },\n  };\n}\n"]}