@takazudo/zudo-doc 0.1.0

package/dist/code-syntax/code-block-enhancer-script.js

@@ -0,0 +1,165 @@
+import {
+  AFTER_NAVIGATE_EVENT,
+  BEFORE_NAVIGATE_EVENT
+} from "../transitions/page-events.js";
+const CODE_BLOCK_ENHANCER_SCRIPT = `(function () {
+  // Single shared ResizeObserver for all code blocks on the page.
+  var wrapButtons = new Map();
+  var resizeObserver = new ResizeObserver(function (entries) {
+    for (var i = 0; i < entries.length; i++) {
+      var btn = wrapButtons.get(entries[i].target);
+      if (btn) updateWrapVisibility(entries[i].target, btn);
+    }
+  });
+
+  function enhanceCodeBlocks() {
+    // Selector covers two shapes:
+    //   1. pre.syntect-... from the syntect highlighter (the class
+    //      is anchored or merged with other classes).
+    //   2. bare pre inside .tab-panel (TabItem) wrappers where some
+    //      pipelines emit class-less pre elements.
+    // No backticks in this comment: this whole script body lives inside
+    // a template literal in the host .ts module, so an inline backtick
+    // would close the literal and make 'panel' a free identifier.
+    var pres = document.querySelectorAll(
+      'pre[class*="syntect-"], .tab-panel pre',
+    );
+
+    for (var pi = 0; pi < pres.length; pi++) {
+      var pre = pres[pi];
+      if (pre.dataset.enhanced) continue;
+      pre.dataset.enhanced = "true";
+
+      var codeEl = pre.querySelector("code");
+      if (!codeEl) continue;
+      var rawCode = codeEl.textContent || "";
+
+      // Wrap <pre> in a container so buttons stay fixed during horizontal scroll.
+      var wrapper = document.createElement("div");
+      wrapper.className = "code-block-wrapper";
+      var parent = pre.parentNode;
+      if (!parent) continue;
+      parent.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+
+      // Button group (appended to wrapper, not pre).
+      var group = document.createElement("div");
+      group.className = "code-buttons";
+
+      // Word wrap toggle (only shown when content overflows).
+      var wrapBtn = createWrapButton(pre);
+      group.appendChild(wrapBtn);
+
+      // Copy button.
+      var copyBtn = createCopyButton(rawCode);
+      group.appendChild(copyBtn);
+
+      wrapper.appendChild(group);
+
+      // Track and observe for overflow changes.
+      wrapButtons.set(pre, wrapBtn);
+      updateWrapVisibility(pre, wrapBtn);
+      resizeObserver.observe(pre);
+    }
+  }
+
+  function createCopyButton(code) {
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "code-btn code-btn-copy";
+    btn.setAttribute("aria-label", "Copy code");
+    btn.innerHTML =
+      '<svg class="code-icon code-icon-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>' +
+      '</svg>' +
+      '<svg class="code-icon code-icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<polyline points="20 6 9 17 4 12"/>' +
+      '</svg>';
+
+    var copyTimeout;
+    var announce = document.querySelector(".code-block-sr-announce");
+
+    btn.addEventListener("click", async function () {
+      var success = true;
+      try {
+        await navigator.clipboard.writeText(code);
+      } catch (_) {
+        // Fallback for older browsers.
+        var textarea = document.createElement("textarea");
+        textarea.value = code;
+        textarea.style.cssText = "position:fixed;opacity:0;pointer-events:none";
+        document.body.appendChild(textarea);
+        textarea.select();
+        success = document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      if (success) {
+        btn.classList.add("copied");
+        if (announce) announce.textContent = "Copied!";
+        clearTimeout(copyTimeout);
+        copyTimeout = setTimeout(function () {
+          btn.classList.remove("copied");
+          if (announce) announce.textContent = "";
+        }, 1500);
+      }
+    });
+
+    return btn;
+  }
+
+  function createWrapButton(pre) {
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "code-btn code-btn-wrap";
+    btn.setAttribute("aria-label", "Toggle word wrap");
+    btn.setAttribute("aria-pressed", "false");
+    btn.innerHTML =
+      '<svg class="code-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<polyline points="17 10 21 6 17 2" />' +
+        '<path d="M3 6h18" />' +
+        '<path d="M21 18H7" />' +
+        '<polyline points="11 22 7 18 11 14" />' +
+      '</svg>';
+
+    btn.addEventListener("click", function () {
+      var isWrapped = pre.classList.toggle("word-wrap");
+      btn.classList.toggle("active", isWrapped);
+      btn.setAttribute("aria-pressed", String(isWrapped));
+    });
+
+    return btn;
+  }
+
+  function updateWrapVisibility(pre, btn) {
+    // Keep visible when active (user needs to toggle back).
+    var isActive = btn.classList.contains("active");
+    btn.style.display = isActive || pre.scrollWidth > pre.clientWidth ? "" : "none";
+  }
+
+  // Clean up stale references before navigating away. Under zfb's
+  // Strategy B SPA navigation the body is replaced in place (head and
+  // html survive), so the OLD pre nodes the ResizeObserver was watching
+  // go away \u2014 unobserve them so the observer doesn't keep detached
+  // references, then clear the wrapButtons Map so the next
+  // enhanceCodeBlocks pass can repopulate it cleanly.
+  document.addEventListener(${JSON.stringify(BEFORE_NAVIGATE_EVENT)}, function () {
+    wrapButtons.forEach(function (_btn, el) {
+      resizeObserver.unobserve(el);
+    });
+    wrapButtons.clear();
+  });
+
+  // Run on initial load.
+  enhanceCodeBlocks();
+
+  // Re-run after every page-navigate-end signal (zfb:after-swap under
+  // Strategy B SPA navigation). The IIFE itself only runs on the first
+  // load \u2014 zfb's deselectScripts marks identical inline scripts in
+  // the new body as already-executed \u2014 so this listener is the path
+  // by which the new body's <pre> elements get enhanced.
+  document.addEventListener(${JSON.stringify(AFTER_NAVIGATE_EVENT)}, enhanceCodeBlocks);
+})();`;
+export {
+  CODE_BLOCK_ENHANCER_SCRIPT
+};

package/dist/code-syntax/code-block-enhancer.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+/**
+ * Drop-in JSX replacement for `src/components/code-block-enhancer.astro`.
+ *
+ * Include **once** in the layout. Renders the screen-reader announce region
+ * and emits the code-block enhancer init script via `dangerouslySetInnerHTML`.
+ *
+ * The script:
+ * - Wraps each `<pre class="syntect-*">` in a `.code-block-wrapper` container.
+ * - Adds a copy-to-clipboard button and a word-wrap toggle button.
+ * - Observes resize events to hide the wrap button when content fits.
+ * - Handles before-navigate cleanup and after-navigate re-init for View
+ *   Transitions. Event names come from `BEFORE_NAVIGATE_EVENT` /
+ *   `AFTER_NAVIGATE_EVENT` in `../transitions/page-events.ts`.
+ */
+declare function CodeBlockEnhancer(): JSX.Element;
+
+export { CodeBlockEnhancer, CodeBlockEnhancer as default };

package/dist/code-syntax/code-block-enhancer.js

@@ -0,0 +1,13 @@
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { CODE_BLOCK_ENHANCER_SCRIPT } from "./code-block-enhancer-script.js";
+function CodeBlockEnhancer() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { class: "code-block-sr-announce", "aria-live": "polite" }),
+    /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: CODE_BLOCK_ENHANCER_SCRIPT } })
+  ] });
+}
+var code_block_enhancer_default = CodeBlockEnhancer;
+export {
+  CodeBlockEnhancer,
+  code_block_enhancer_default as default
+};

package/dist/code-syntax/index.d.ts

@@ -0,0 +1,8 @@
+export { CodeBlockEnhancer, CodeBlockEnhancer as CodeBlockEnhancerDefault } from './code-block-enhancer.js';
+export { CODE_BLOCK_ENHANCER_SCRIPT } from './code-block-enhancer-script.js';
+export { MermaidInit, MermaidInit as MermaidInitDefault, MermaidInitProps } from './mermaid-init.js';
+export { MERMAID_CDN_MODULE_URL, MERMAID_INIT_SCRIPT, buildMermaidInitScript } from './mermaid-init-script.js';
+export { Tabs, Tabs as TabsDefault, TabsProps } from './tabs.js';
+export { TabsInit, TabsInit as TabsInitDefault } from './tabs-init.js';
+export { TABS_INIT_SCRIPT } from './tabs-init-script.js';
+import 'preact';

package/dist/code-syntax/index.js

@@ -0,0 +1,29 @@
+import { CodeBlockEnhancer, default as default2 } from "./code-block-enhancer.js";
+import { CODE_BLOCK_ENHANCER_SCRIPT } from "./code-block-enhancer-script.js";
+import {
+  MermaidInit,
+  default as default3
+} from "./mermaid-init.js";
+import {
+  MERMAID_INIT_SCRIPT,
+  MERMAID_CDN_MODULE_URL,
+  buildMermaidInitScript
+} from "./mermaid-init-script.js";
+import { Tabs, default as default4 } from "./tabs.js";
+import { TabsInit, default as default5 } from "./tabs-init.js";
+import { TABS_INIT_SCRIPT } from "./tabs-init-script.js";
+export {
+  CODE_BLOCK_ENHANCER_SCRIPT,
+  CodeBlockEnhancer,
+  default2 as CodeBlockEnhancerDefault,
+  MERMAID_CDN_MODULE_URL,
+  MERMAID_INIT_SCRIPT,
+  MermaidInit,
+  default3 as MermaidInitDefault,
+  TABS_INIT_SCRIPT,
+  Tabs,
+  default4 as TabsDefault,
+  TabsInit,
+  default5 as TabsInitDefault,
+  buildMermaidInitScript
+};

package/dist/code-syntax/mermaid-init-script.d.ts

@@ -0,0 +1,51 @@
+/**
+ * ESM CDN URL the inline init script imports `mermaid` from. esm.sh
+ * resolves npm package specifiers to publishable ESM modules.
+ *
+ * Pinned to a specific minor.patch (not the bare `@11` major) so the
+ * runtime version is byte-stable across deploys; floating on the major
+ * would silently pull in upstream theme-API or behaviour changes the
+ * SSR-time mermaid in package.json hasn't been pinned to. Bump policy:
+ * raise this string in the same PR that bumps `mermaid` in
+ * package.json so the SSR-time and runtime mermaid versions stay
+ * matched. Cross-major jumps need an extra parity smoke (`pnpm build`
+ * and a manual diagram render) since esm.sh's exports drift between
+ * majors.
+ *
+ * Exported (rather than baked into the template) so consumers and
+ * tests can override the URL — e.g. self-hosted mirrors, version-
+ * locked deployments — without re-templating the whole script.
+ */
+declare const MERMAID_CDN_MODULE_URL = "https://esm.sh/mermaid@11.4.1";
+/**
+ * Build the inline init script with a caller-supplied module URL.
+ *
+ * Why a builder (vs. just exporting `MERMAID_INIT_SCRIPT`): the
+ * constant interpolates `MERMAID_CDN_MODULE_URL` at module-load time,
+ * so reassigning the exported binding has no runtime effect — ESM
+ * exports are read-only and the script string is already frozen by
+ * the time consumers see it. Hosts that need a self-hosted /
+ * version-pinned / CSP-allowlisted mermaid URL call this builder
+ * with their URL and pass the result to `<MermaidInit script={…}/>`
+ * (or to their own `<script dangerouslySetInnerHTML>` site).
+ *
+ * The default-URL flow stays available via `MERMAID_INIT_SCRIPT`
+ * (built once below by calling this builder with
+ * `MERMAID_CDN_MODULE_URL`) so existing callers keep working
+ * unchanged.
+ */
+declare function buildMermaidInitScript(cdnUrl: string): string;
+/**
+ * Default-URL init script. Built once at module load by passing
+ * `MERMAID_CDN_MODULE_URL` to `buildMermaidInitScript`. Kept as the
+ * primary export for backward compatibility — `<MermaidInit/>` (no
+ * props) and any direct consumer that grabs this string both end up
+ * importing mermaid from `https://esm.sh/mermaid@11`.
+ *
+ * For a custom URL (self-hosted mirror, version-pinned package,
+ * CSP-allowlisted host) call `buildMermaidInitScript(yourUrl)` and
+ * pass the result to `<MermaidInit script={…}/>`.
+ */
+declare const MERMAID_INIT_SCRIPT: string;
+
+export { MERMAID_CDN_MODULE_URL, MERMAID_INIT_SCRIPT, buildMermaidInitScript };

package/dist/code-syntax/mermaid-init-script.js

@@ -0,0 +1,225 @@
+import { AFTER_NAVIGATE_EVENT } from "../transitions/page-events.js";
+const MERMAID_CDN_MODULE_URL = "https://esm.sh/mermaid@11.4.1";
+function buildMermaidInitScript(cdnUrl) {
+  const safeUrlLiteral = JSON.stringify(cdnUrl).replace(
+    /<\/(script)/gi,
+    "<\\/$1"
+  );
+  return `(function () {
+  /**
+   * Syntactically pick the matching arg from a CSS \`light-dark(a, b)\`
+   * value, based on the active theme attribute on \`:root\`.
+   *
+   * zudolab/zudo-doc#1458: mermaid 11.4.1 ships khroma 2.1.0, which
+   * does not understand the CSS \`light-dark()\` function. CSS custom
+   * properties on \`:root\` are written as \`light-dark(#hex-light,
+   * #hex-dark)\` when colorMode is configured (see
+   * \`generateLightDarkCssProperties\` in
+   * \`src/config/color-scheme-utils.ts\`), and \`getPropertyValue\`
+   * returns them as the literal string. The earlier resolveColor
+   * temp-element trick \u2014 assigning the value to \`el.style.color\` and
+   * reading \`getComputedStyle\` \u2014 was unreliable in production
+   * (depends on browser \`light-dark()\` support and on
+   * \`color-scheme\` propagating to the temp element), so we parse
+   * the function syntactically here.
+   *
+   * Returns the picked hex on success, or \`null\` if the input is not
+   * a \`light-dark(...)\` value (caller falls back to resolveColor for
+   * \`oklch(...)\`, \`rgb(...)\`, etc.). When the theme attribute is
+   * missing \u2014 first paint before the color-scheme bootstrap runs, or
+   * a host that does not configure colorMode \u2014 returns the light arg
+   * as a deterministic default.
+   */
+  function parseLightDark(raw, theme) {
+    if (!raw) return null;
+    var m = raw.match(/^\\s*light-dark\\s*\\(\\s*([^,]+?)\\s*,\\s*([^)]+?)\\s*\\)\\s*$/);
+    if (!m) return null;
+    return theme === "dark" ? m[2] : m[1];
+  }
+
+  /**
+   * Resolve a CSS value to a hex color (#rrggbb).
+   * CSS custom properties return raw values from getComputedStyle (e.g.
+   * "light-dark(#fff, #000)") which mermaid cannot parse. This uses a
+   * temporary element so the browser resolves any CSS function to a
+   * concrete rgb() value, then converts it to hex.
+   *
+   * \`light-dark(...)\` is now handled syntactically in
+   * \`parseLightDark\` above (zudolab/zudo-doc#1458) \u2014 this function
+   * remains as a fallback for any other CSS function value
+   * (\`oklch(...)\`, \`rgb(...)\`, named colors, etc.).
+   */
+  function resolveColor(value) {
+    if (!value) return value;
+    if (/^#[0-9a-fA-F]{3}$/.test(value)) {
+      return "#" + value[1] + value[1] + value[2] + value[2] + value[3] + value[3];
+    }
+    if (/^#[0-9a-fA-F]{6}$/.test(value)) return value;
+    if (/^#[0-9a-fA-F]{8}$/.test(value)) return value.slice(0, 7);
+    if (/^#[0-9a-fA-F]{4}$/.test(value)) {
+      return "#" + value[1] + value[1] + value[2] + value[2] + value[3] + value[3];
+    }
+    var el = document.createElement("div");
+    el.style.display = "none";
+    el.style.color = value;
+    document.body.appendChild(el);
+    var resolved;
+    try {
+      resolved = getComputedStyle(el).color;
+    } finally {
+      el.remove();
+    }
+    var m = resolved.match(/(d+)/g);
+    if (m && m.length >= 3) {
+      return "#" + m.slice(0, 3).map(function (n) { return Number(n).toString(16).padStart(2, "0"); }).join("");
+    }
+    return value;
+  }
+
+  async function initMermaid() {
+    var els = document.querySelectorAll("[data-mermaid]:not([data-mermaid-rendered])");
+    if (els.length === 0) return;
+
+    try {
+      // Wave 13 (zudolab/zudo-doc#1355 Topic 4): import mermaid from a
+      // public ESM CDN URL because the inline <script> reaches the
+      // browser without a bundler \u2014 bare specifiers like "mermaid"
+      // cannot be resolved at runtime. See the file header for the
+      // full trade-off rationale.
+      var mod = await import(${safeUrlLiteral});
+      var mermaid = mod.default;
+      var s = getComputedStyle(document.documentElement);
+      // Read the active theme attribute that the color-scheme-provider
+      // bootstrap pins on :root (see
+      // packages/zudo-doc/src/theme/color-scheme-provider.tsx).
+      // parseLightDark uses this to pick the matching arg from
+      // \`light-dark(#a, #b)\` tokens before they reach mermaid /
+      // khroma (zudolab/zudo-doc#1458).
+      var theme = document.documentElement.getAttribute("data-theme");
+      // Read a custom property, resolve through the temporary-element
+      // round-trip to a hex color, and return undefined when the
+      // property is unset on :root. mermaid.initialize crashes (khroma
+      // "Unsupported color format: ''") if a theme variable is the
+      // empty string, but tolerates undefined as "use the default" \u2014
+      // so unset host tokens fall back to mermaid's own theme palette.
+      var v = function (name) {
+        var raw = s.getPropertyValue(name).trim();
+        if (!raw) return undefined;
+        // light-dark() is parsed syntactically against the active
+        // data-theme attribute \u2014 khroma 2.1.0 cannot parse the
+        // function form (zudolab/zudo-doc#1458). Other CSS function
+        // values (oklch(...), rgb(...), etc.) still go through the
+        // temp-element resolveColor path below.
+        var picked = parseLightDark(raw, theme);
+        if (picked) {
+          var resolvedPicked = resolveColor(picked);
+          return resolvedPicked || undefined;
+        }
+        var resolved = resolveColor(raw);
+        return resolved || undefined;
+      };
+      var bg = v("--zd-bg");
+      // Leave luminance as NaN when --zd-bg is not yet on :root. The
+      // Number.isNaN guard below maps NaN to darkMode:true, which is
+      // mermaid's safer default \u2014 light text on dark fills survives
+      // the page eventually flipping into dark mode without a
+      // re-render, whereas the inverse produces unreadable diagrams
+      // on dark backgrounds. The MutationObserver on the root style
+      // attribute (registered further down) will reinit with real
+      // luminance once ColorSchemeProvider populates the custom
+      // properties.
+      var luminance = NaN;
+      if (bg && bg.charAt(0) === "#" && bg.length === 7) {
+        var hex = bg.replace("#", "");
+        var r = parseInt(hex.substring(0, 2), 16) / 255;
+        var g = parseInt(hex.substring(2, 4), 16) / 255;
+        var b = parseInt(hex.substring(4, 6), 16) / 255;
+        luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+      }
+      // Build themeVariables dynamically so undefined values don't
+      // reach khroma's color parser. mermaid's defaults fill in the
+      // gaps for any host token that is unset (e.g. when the consumer
+      // has not yet mounted ColorSchemeProvider on :root).
+      var themeVariables = {
+        darkMode: Number.isNaN(luminance) ? true : luminance < 0.5,
+        background: "transparent",
+        fontFamily: "inherit",
+      };
+      function setIfDefined(key, value) {
+        if (value !== undefined) themeVariables[key] = value;
+      }
+      var nodeBg = v("--zd-mermaid-node-bg");
+      var textColor = v("--zd-mermaid-text");
+      var lineColor = v("--zd-mermaid-line");
+      var noteBg = v("--zd-mermaid-note-bg");
+      var labelBg = v("--zd-mermaid-label-bg");
+      setIfDefined("primaryColor", nodeBg);
+      setIfDefined("primaryTextColor", textColor);
+      setIfDefined("primaryBorderColor", lineColor);
+      setIfDefined("lineColor", lineColor);
+      setIfDefined("secondaryColor", noteBg);
+      setIfDefined("tertiaryColor", noteBg);
+      setIfDefined("edgeLabelBackground", labelBg);
+      setIfDefined("labelTextColor", textColor);
+      setIfDefined("transitionColor", lineColor);
+      setIfDefined("transitionLabelColor", textColor);
+      setIfDefined("stateLabelColor", textColor);
+      setIfDefined("noteBkgColor", noteBg);
+      setIfDefined("noteTextColor", textColor);
+      setIfDefined("noteBorderColor", lineColor);
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: "base",
+        themeVariables: themeVariables,
+      });
+      await mermaid.run({ nodes: Array.from(els) });
+      els.forEach(function (el) { el.setAttribute("data-mermaid-rendered", ""); });
+    } catch (e) {
+      console.error("[mermaid-init] Failed to render mermaid diagrams:", e);
+    }
+  }
+
+  /** Re-render all mermaid diagrams (clear rendered state so initMermaid picks them up). */
+  function reinitMermaid() {
+    document.querySelectorAll("[data-mermaid-rendered]").forEach(function (el) {
+      el.removeAttribute("data-mermaid-rendered");
+      // Remove rendered SVG so mermaid regenerates from source text.
+      var svg = el.querySelector("svg");
+      if (svg) svg.remove();
+    });
+    initMermaid();
+  }
+
+  // First-paint render \u2014 under zfb's Strategy B SPA navigation,
+  // AFTER_NAVIGATE_EVENT (zfb:after-swap) does NOT fire on the initial
+  // page load (only post-swap), so we have to invoke initMermaid()
+  // synchronously at script-evaluation time to render diagrams on the
+  // landing page. The listener below covers the re-render path for
+  // every subsequent SPA hop. zudolab/zudo-doc#1523.
+  initMermaid();
+  document.addEventListener(${JSON.stringify(AFTER_NAVIGATE_EVENT)}, function () { initMermaid(); });
+
+  // Re-render mermaid when:
+  //   * the color-tweak panel mutates :root[style] (custom properties), or
+  //   * the theme-toggle flips :root[data-theme] between "light" / "dark"
+  //     (zudolab/zudo-doc#1458 \u2014 diagram colors are baked into the rendered
+  //     SVG, so we have to clear data-mermaid-rendered and re-run with
+  //     the new theme's hex picks from parseLightDark).
+  // Debounced so a synchronous flip of both attributes triggers a
+  // single re-render.
+  var tweakTimer;
+  new MutationObserver(function () {
+    clearTimeout(tweakTimer);
+    tweakTimer = setTimeout(reinitMermaid, 300);
+  }).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["style", "data-theme"],
+  });
+})();`;
+}
+const MERMAID_INIT_SCRIPT = buildMermaidInitScript(MERMAID_CDN_MODULE_URL);
+export {
+  MERMAID_CDN_MODULE_URL,
+  MERMAID_INIT_SCRIPT,
+  buildMermaidInitScript
+};

package/dist/code-syntax/mermaid-init.d.ts

@@ -0,0 +1,48 @@
+import { JSX } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+/**
+ * Props for `<MermaidInit/>`.
+ *
+ * Either knob is optional — by default the component emits the
+ * pre-built `MERMAID_INIT_SCRIPT` constant (esm.sh @11 URL).
+ *
+ * `script` wins over `cdnUrl` when both are provided so a fully
+ * hand-rolled script can short-circuit the builder entirely.
+ */
+interface MermaidInitProps {
+    /**
+     * Override the mermaid module URL the inline script imports at
+     * runtime. Use this for self-hosted mirrors, version-pinned
+     * packages, or CSP-allowlisted domains. The component re-builds
+     * the script with this URL via `buildMermaidInitScript`.
+     *
+     * Ignored when `script` is also provided.
+     */
+    cdnUrl?: string;
+    /**
+     * Replace the entire script body verbatim. Bypasses the
+     * `cdnUrl`-driven builder; use when the caller wants to ship a
+     * fully customised init routine (different theme palette wiring,
+     * extra mermaid plugins, etc.).
+     */
+    script?: string;
+}
+/**
+ * Drop-in JSX replacement for `src/components/mermaid-init.astro`.
+ *
+ * Include **once** in the layout. Emits the mermaid init script via
+ * `dangerouslySetInnerHTML`. The script lazily imports mermaid only when
+ * `[data-mermaid]` elements are found on the page, so pages without any
+ * mermaid diagrams pay zero runtime cost.
+ *
+ * The script hooks into `AFTER_NAVIGATE_EVENT` (from
+ * `../transitions/page-events.ts`) for View Transitions support and into
+ * a `MutationObserver` on `:root[style]` to re-render when the user
+ * changes the color scheme via the color-tweak panel.
+ */
+declare function MermaidInit(props?: MermaidInitProps): JSX.Element;
+
+export { MermaidInit, type MermaidInitProps, MermaidInit as default };

package/dist/code-syntax/mermaid-init.js

@@ -0,0 +1,14 @@
+import { jsx } from "preact/jsx-runtime";
+import {
+  MERMAID_INIT_SCRIPT,
+  buildMermaidInitScript
+} from "./mermaid-init-script.js";
+function MermaidInit(props = {}) {
+  const script = props.script ?? (props.cdnUrl ? buildMermaidInitScript(props.cdnUrl) : MERMAID_INIT_SCRIPT);
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+}
+var mermaid_init_default = MermaidInit;
+export {
+  MermaidInit,
+  mermaid_init_default as default
+};

package/dist/code-syntax/tabs-init-script.d.ts

@@ -0,0 +1,3 @@
+declare const TABS_INIT_SCRIPT: string;
+
+export { TABS_INIT_SCRIPT };