@mieweb/ui 0.6.1-dev.132 → 0.6.1-dev.134

package/dist/chunk-FZQAF3WA.cjs

@@ -0,0 +1,154 @@
+'use strict';
+
+var chunkUL3PQ7HL_cjs = require('./chunk-UL3PQ7HL.cjs');
+var DOMPurify = require('dompurify');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
+
+var mermaidInstance = null;
+var mermaidReady = null;
+var mermaidTheme = "default";
+function currentTheme() {
+  return document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "default";
+}
+function buildConfig(theme) {
+  const base = {
+    startOnLoad: false,
+    theme,
+    securityLevel: "strict"
+  };
+  if (theme === "dark") {
+    base.themeVariables = {
+      nodeBorder: "#6b7280",
+      mainBkg: "#4a4a4a",
+      nodeTextColor: "#ffffff",
+      clusterBkg: "#374151",
+      titleColor: "#ffffff",
+      edgeLabelBackground: "#374151",
+      lineColor: "#9ca3af"
+    };
+  }
+  return base;
+}
+async function getMermaid() {
+  const theme = currentTheme();
+  if (mermaidInstance) {
+    if (theme !== mermaidTheme) {
+      mermaidTheme = theme;
+      mermaidInstance.initialize(buildConfig(theme));
+    }
+    return mermaidInstance;
+  }
+  if (!mermaidReady) {
+    mermaidReady = import(
+      /* @vite-ignore */
+      'mermaid'
+    ).then((mod) => {
+      const m = mod.default;
+      mermaidTheme = currentTheme();
+      m.initialize(buildConfig(mermaidTheme));
+      mermaidInstance = m;
+      return m;
+    });
+  }
+  return mermaidReady;
+}
+function sanitiseSvg(svg) {
+  return DOMPurify__default.default.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    // Allow <style> so mermaid's embedded CSS applies, and <foreignObject>
+    // so node label text renders (mermaid escapes its content in strict mode).
+    ADD_TAGS: ["style", "foreignObject"],
+    ADD_ATTR: [
+      "style",
+      "class",
+      "dominant-baseline",
+      "text-anchor",
+      "font-size",
+      "font-family",
+      "marker-end",
+      "marker-start",
+      "marker-mid",
+      "stroke-dasharray",
+      "stroke-width"
+    ],
+    FORBID_TAGS: ["script"],
+    FORBID_ATTR: ["onload", "onerror", "onclick", "onmouseover"]
+  });
+}
+var MermaidBlock = ({ code, id }) => {
+  const [svg, setSvg] = react.useState("");
+  const [error, setError] = react.useState("");
+  const [loading, setLoading] = react.useState(true);
+  const diagramLabel = react.useMemo(() => {
+    const firstWord = code.trim().split(/[\s\n]/)[0]?.toLowerCase() ?? "";
+    const typeMap = {
+      graph: "Flowchart",
+      flowchart: "Flowchart",
+      sequencediagram: "Sequence diagram",
+      classdiagram: "Class diagram",
+      statediagram: "State diagram",
+      "statediagram-v2": "State diagram",
+      erdiagram: "Entity relationship diagram",
+      gantt: "Gantt chart",
+      pie: "Pie chart",
+      journey: "User journey diagram",
+      gitgraph: "Git graph",
+      mindmap: "Mind map",
+      timeline: "Timeline",
+      quadrantchart: "Quadrant chart"
+    };
+    return `${typeMap[firstWord] ?? "Mermaid"} diagram`;
+  }, [code]);
+  const render = react.useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const mermaid = await getMermaid();
+      await mermaid.parse(code);
+      const { svg: rendered } = await mermaid.render(`mermaid-${id}`, code);
+      setSvg(sanitiseSvg(rendered));
+    } catch (err) {
+      setError(err.message ?? "Failed to render diagram");
+    } finally {
+      setLoading(false);
+    }
+  }, [code, id]);
+  react.useEffect(() => {
+    void render();
+  }, [render]);
+  react.useEffect(() => {
+    const observer = new MutationObserver(() => void render());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => observer.disconnect();
+  }, [render]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkUL3PQ7HL_cjs.FenceBlock,
+    {
+      code,
+      language: "mermaid",
+      supportsRawView: true,
+      error: error || void 0,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-primary-500 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "mermaid-svg flex justify-center p-4",
+          role: "img",
+          "aria-label": diagramLabel,
+          dangerouslySetInnerHTML: { __html: svg }
+        }
+      )
+    }
+  );
+};
+
+exports.MermaidBlock = MermaidBlock;
+//# sourceMappingURL=chunk-FZQAF3WA.cjs.map
+//# sourceMappingURL=chunk-FZQAF3WA.cjs.map

package/dist/chunk-FZQAF3WA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Markdown/MermaidBlock.tsx"],"names":["DOMPurify","useState","useMemo","useCallback","useEffect","jsx","FenceBlock"],"mappings":"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","file":"chunk-FZQAF3WA.cjs","sourcesContent":["/**\n * MermaidBlock — Renders Mermaid diagrams.\n * Requires `mermaid` to be installed by the consumer (optional peer dependency).\n */\nimport DOMPurify from 'dompurify';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { FenceBlock } from './FenceBlock';\n\ninterface MermaidBlockProps {\n  code: string;\n  id: string;\n}\n\ntype MermaidApi = {\n  initialize: (config: Record<string, unknown>) => void;\n  parse: (text: string) => Promise<unknown>;\n  render: (id: string, text: string) => Promise<{ svg: string }>;\n};\n\nlet mermaidInstance: MermaidApi | null = null;\nlet mermaidReady: Promise<MermaidApi> | null = null;\nlet mermaidTheme: 'dark' | 'default' = 'default';\n\nfunction currentTheme(): 'dark' | 'default' {\n  return document.documentElement.classList.contains('dark') ||\n    document.documentElement.getAttribute('data-theme') === 'dark'\n    ? 'dark'\n    : 'default';\n}\n\nfunction buildConfig(theme: 'dark' | 'default'): Record<string, unknown> {\n  const base: Record<string, unknown> = {\n    startOnLoad: false,\n    theme,\n    securityLevel: 'strict',\n  };\n  if (theme === 'dark') {\n    base.themeVariables = {\n      nodeBorder: '#6b7280',\n      mainBkg: '#4a4a4a',\n      nodeTextColor: '#ffffff',\n      clusterBkg: '#374151',\n      titleColor: '#ffffff',\n      edgeLabelBackground: '#374151',\n      lineColor: '#9ca3af',\n    };\n  }\n  return base;\n}\n\nasync function getMermaid(): Promise<MermaidApi> {\n  const theme = currentTheme();\n  if (mermaidInstance) {\n    if (theme !== mermaidTheme) {\n      mermaidTheme = theme;\n      mermaidInstance.initialize(buildConfig(theme));\n    }\n    return mermaidInstance;\n  }\n  if (!mermaidReady) {\n    mermaidReady = import(/* @vite-ignore */ 'mermaid').then((mod) => {\n      const m = (mod as { default: MermaidApi }).default;\n      mermaidTheme = currentTheme();\n      m.initialize(buildConfig(mermaidTheme));\n      mermaidInstance = m;\n      return m;\n    });\n  }\n  return mermaidReady;\n}\n\nfunction sanitiseSvg(svg: string): string {\n  return DOMPurify.sanitize(svg, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // Allow <style> so mermaid's embedded CSS applies, and <foreignObject>\n    // so node label text renders (mermaid escapes its content in strict mode).\n    ADD_TAGS: ['style', 'foreignObject'],\n    ADD_ATTR: [\n      'style',\n      'class',\n      'dominant-baseline',\n      'text-anchor',\n      'font-size',\n      'font-family',\n      'marker-end',\n      'marker-start',\n      'marker-mid',\n      'stroke-dasharray',\n      'stroke-width',\n    ],\n    FORBID_TAGS: ['script'],\n    FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover'],\n  }) as string;\n}\n\nexport const MermaidBlock: React.FC<MermaidBlockProps> = ({ code, id }) => {\n  const [svg, setSvg] = useState<string>('');\n  const [error, setError] = useState<string>('');\n  const [loading, setLoading] = useState(true);\n\n  // Derive an accessible label from the diagram's declared type (first keyword).\n  const diagramLabel = useMemo(() => {\n    const firstWord =\n      code\n        .trim()\n        .split(/[\\s\\n]/)[0]\n        ?.toLowerCase() ?? '';\n    const typeMap: Record<string, string> = {\n      graph: 'Flowchart',\n      flowchart: 'Flowchart',\n      sequencediagram: 'Sequence diagram',\n      classdiagram: 'Class diagram',\n      statediagram: 'State diagram',\n      'statediagram-v2': 'State diagram',\n      erdiagram: 'Entity relationship diagram',\n      gantt: 'Gantt chart',\n      pie: 'Pie chart',\n      journey: 'User journey diagram',\n      gitgraph: 'Git graph',\n      mindmap: 'Mind map',\n      timeline: 'Timeline',\n      quadrantchart: 'Quadrant chart',\n    };\n    return `${typeMap[firstWord] ?? 'Mermaid'} diagram`;\n  }, [code]);\n\n  const render = useCallback(async () => {\n    setLoading(true);\n    setError('');\n    try {\n      const mermaid = await getMermaid();\n      await mermaid.parse(code);\n      const { svg: rendered } = await mermaid.render(`mermaid-${id}`, code);\n      setSvg(sanitiseSvg(rendered));\n    } catch (err) {\n      setError((err as Error).message ?? 'Failed to render diagram');\n    } finally {\n      setLoading(false);\n    }\n  }, [code, id]);\n\n  useEffect(() => {\n    void render();\n  }, [render]);\n\n  // Re-render when the page theme changes (dark ↔ light)\n  useEffect(() => {\n    const observer = new MutationObserver(() => void render());\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme'],\n    });\n    return () => observer.disconnect();\n  }, [render]);\n\n  return (\n    <FenceBlock\n      code={code}\n      language=\"mermaid\"\n      supportsRawView\n      error={error || undefined}\n    >\n      {loading ? (\n        <div className=\"flex items-center justify-center p-8\">\n          <div className=\"border-primary-500 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent\" />\n        </div>\n      ) : (\n        <div\n          className=\"mermaid-svg flex justify-center p-4\"\n          role=\"img\"\n          aria-label={diagramLabel}\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      )}\n    </FenceBlock>\n  );\n};\n"]}

package/dist/chunk-MHJMUKLA.js

@@ -0,0 +1,89 @@
+import { Button } from './chunk-ZVSW2KS6.js';
+import { Eye, Code, Check, ClipboardCopy } from 'lucide-react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FenceBlock = ({
+  code,
+  language,
+  supportsRawView = false,
+  error,
+  children,
+  headerActions
+}) => {
+  const [copyState, setCopyState] = useState("idle");
+  const [showRaw, setShowRaw] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const scheduleReset = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopyState("idle"), 2e3);
+  }, []);
+  const handleCopy = useCallback(async () => {
+    if (copyState === "copying") return;
+    setCopyState("copying");
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopyState("success");
+      scheduleReset();
+    } catch {
+      try {
+        const textarea = document.createElement("textarea");
+        textarea.value = code;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+        setCopyState("success");
+      } catch {
+        setCopyState("error");
+      }
+      scheduleReset();
+    }
+  }, [code, copyState, scheduleReset]);
+  return /* @__PURE__ */ jsxs("div", { className: "group relative my-3 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-[#1a1d24]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-neutral-200 px-3 py-1.5 dark:border-white/[0.08]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-neutral-500 dark:text-neutral-400", children: language ? language.charAt(0).toUpperCase() + language.slice(1) : "Text" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        headerActions,
+        supportsRawView && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setShowRaw((v) => !v),
+            "aria-label": showRaw ? "Show rendered view" : "Show raw code",
+            className: "h-7 w-7 p-0",
+            children: showRaw ? /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: handleCopy,
+            "aria-label": "Copy code",
+            className: "h-7 w-7 p-0",
+            children: copyState === "success" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(ClipboardCopy, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-300", children: error }),
+      /* @__PURE__ */ jsx("pre", { className: "mt-2 overflow-x-auto text-xs whitespace-pre-wrap text-neutral-600 dark:text-neutral-400", children: /* @__PURE__ */ jsx("code", { children: code }) })
+    ] }) : showRaw ? /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-3 text-sm", children: /* @__PURE__ */ jsx("code", { children: code }) }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children })
+  ] });
+};
+
+export { FenceBlock };
+//# sourceMappingURL=chunk-MHJMUKLA.js.map
+//# sourceMappingURL=chunk-MHJMUKLA.js.map

package/dist/chunk-MHJMUKLA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Markdown/FenceBlock.tsx"],"names":[],"mappings":"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","file":"chunk-MHJMUKLA.js","sourcesContent":["/**\n * FenceBlock — Base wrapper for code blocks with copy, raw view toggle, and errors.\n */\nimport { Check, ClipboardCopy, Code, Eye } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../Button';\n\nexport interface FenceBlockProps {\n  code: string;\n  language?: string;\n  supportsRawView?: boolean;\n  error?: string;\n  children: React.ReactNode;\n  /** Extra buttons rendered in the header before the copy button */\n  headerActions?: React.ReactNode;\n}\n\ntype CopyState = 'idle' | 'copying' | 'success' | 'error';\n\nexport const FenceBlock: React.FC<FenceBlockProps> = ({\n  code,\n  language,\n  supportsRawView = false,\n  error,\n  children,\n  headerActions,\n}) => {\n  const [copyState, setCopyState] = useState<CopyState>('idle');\n  const [showRaw, setShowRaw] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  const scheduleReset = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(() => setCopyState('idle'), 2000);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (copyState === 'copying') return;\n    setCopyState('copying');\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopyState('success');\n      scheduleReset();\n    } catch {\n      try {\n        const textarea = document.createElement('textarea');\n        textarea.value = code;\n        textarea.style.position = 'fixed';\n        textarea.style.opacity = '0';\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n        setCopyState('success');\n      } catch {\n        setCopyState('error');\n      }\n      scheduleReset();\n    }\n  }, [code, copyState, scheduleReset]);\n\n  return (\n    <div className=\"group relative my-3 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-[#1a1d24]\">\n      <div className=\"flex items-center justify-between border-b border-neutral-200 px-3 py-1.5 dark:border-white/[0.08]\">\n        <span className=\"text-xs font-medium text-neutral-500 dark:text-neutral-400\">\n          {language\n            ? language.charAt(0).toUpperCase() + language.slice(1)\n            : 'Text'}\n        </span>\n        <div className=\"flex items-center gap-1\">\n          {headerActions}\n          {supportsRawView && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowRaw((v) => !v)}\n              aria-label={showRaw ? 'Show rendered view' : 'Show raw code'}\n              className=\"h-7 w-7 p-0\"\n            >\n              {showRaw ? (\n                <Eye className=\"h-3.5 w-3.5\" />\n              ) : (\n                <Code className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleCopy}\n            aria-label=\"Copy code\"\n            className=\"h-7 w-7 p-0\"\n          >\n            {copyState === 'success' ? (\n              <Check className=\"h-3.5 w-3.5 text-green-500\" />\n            ) : (\n              <ClipboardCopy className=\"h-3.5 w-3.5\" />\n            )}\n          </Button>\n        </div>\n      </div>\n\n      {error ? (\n        <div className=\"p-3\">\n          <div className=\"rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-300\">\n            {error}\n          </div>\n          <pre className=\"mt-2 overflow-x-auto text-xs whitespace-pre-wrap text-neutral-600 dark:text-neutral-400\">\n            <code>{code}</code>\n          </pre>\n        </div>\n      ) : showRaw ? (\n        <pre className=\"overflow-x-auto p-3 text-sm\">\n          <code>{code}</code>\n        </pre>\n      ) : (\n        <div className=\"overflow-x-auto\">{children}</div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/chunk-NCRYCG5G.js

@@ -0,0 +1,135 @@
+import { FenceBlock } from './chunk-MHJMUKLA.js';
+import { Button } from './chunk-ZVSW2KS6.js';
+import { Code, Eye, Maximize2 } from 'lucide-react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function isFullDocument(html) {
+  return /<!DOCTYPE|<html/i.test(html);
+}
+function wrapFragment(html) {
+  return `<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:14px}</style></head>
+<body>${html}</body>
+</html>`;
+}
+var HtmlPreviewBlock = ({
+  code,
+  id
+}) => {
+  const [showPreview, setShowPreview] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const iframeRef = useRef(null);
+  const [iframeHeight, setIframeHeight] = useState(200);
+  const srcdoc = isFullDocument(code) ? code : wrapFragment(code);
+  useEffect(() => {
+    function handleMessage(event) {
+      if (event.origin !== "null" && event.origin !== window.location.origin)
+        return;
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      if (event.data?.type === "HTML_PREVIEW_RESIZE" && event.data?.id === id) {
+        setIframeHeight(Math.min(Math.max(event.data.height, 200), 4e3));
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [id]);
+  useEffect(() => {
+    if (!expanded) return;
+    function handleKey(e) {
+      if (e.key === "Escape") setExpanded(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [expanded]);
+  const togglePreview = useCallback(() => setShowPreview((v) => !v), []);
+  const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: togglePreview,
+        className: "h-7 gap-1 px-2 text-xs",
+        children: [
+          showPreview ? /* @__PURE__ */ jsx(Code, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }),
+          showPreview ? "Code" : "Preview"
+        ]
+      }
+    ),
+    showPreview && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setExpanded(true),
+        className: "h-7 w-7 p-0",
+        "aria-label": "Expand preview",
+        children: /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FenceBlock, { code, language: "html", headerActions, children: /* @__PURE__ */ jsx("div", { className: "relative", children: showPreview ? /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref: iframeRef,
+        srcDoc: srcdoc,
+        sandbox: "allow-scripts allow-forms",
+        referrerPolicy: "no-referrer",
+        className: "w-full border-0",
+        style: { height: iframeHeight },
+        title: "HTML Preview"
+      }
+    ) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-3 text-sm", children: /* @__PURE__ */ jsx("code", { children: code }) }) }) }),
+    expanded && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "HTML Preview",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close preview",
+              className: "absolute inset-0 h-full w-full cursor-default border-0 bg-transparent p-0",
+              onClick: () => setExpanded(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-neutral-200 px-4 py-2 dark:border-neutral-700", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "HTML Preview" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => setExpanded(false),
+                  children: "Close"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "iframe",
+              {
+                srcDoc: srcdoc,
+                sandbox: "allow-scripts allow-forms",
+                referrerPolicy: "no-referrer",
+                className: "h-full w-full border-0",
+                title: "HTML Preview (expanded)"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+export { HtmlPreviewBlock };
+//# sourceMappingURL=chunk-NCRYCG5G.js.map
+//# sourceMappingURL=chunk-NCRYCG5G.js.map

package/dist/chunk-NCRYCG5G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Markdown/HtmlPreviewBlock.tsx"],"names":[],"mappings":"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","file":"chunk-NCRYCG5G.js","sourcesContent":["/** Sandboxed iframe preview for HTML code blocks. */\nimport { Code, Eye, Maximize2 } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../Button';\nimport { FenceBlock } from './FenceBlock';\n\ninterface HtmlPreviewBlockProps {\n  code: string;\n  id: string;\n}\n\nfunction isFullDocument(html: string): boolean {\n  return /<!DOCTYPE|<html/i.test(html);\n}\n\nfunction wrapFragment(html: string): string {\n  return `<!DOCTYPE html>\n<html>\n<head><meta charset=\"utf-8\"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:14px}</style></head>\n<body>${html}</body>\n</html>`;\n}\n\nexport const HtmlPreviewBlock: React.FC<HtmlPreviewBlockProps> = ({\n  code,\n  id,\n}) => {\n  const [showPreview, setShowPreview] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const [iframeHeight, setIframeHeight] = useState(200);\n\n  const srcdoc = isFullDocument(code) ? code : wrapFragment(code);\n\n  useEffect(() => {\n    function handleMessage(event: globalThis.MessageEvent) {\n      // Sandboxed srcDoc iframes report origin \"null\"; validate source to prevent spoofing.\n      if (event.origin !== 'null' && event.origin !== window.location.origin)\n        return;\n      if (event.source !== iframeRef.current?.contentWindow) return;\n      if (event.data?.type === 'HTML_PREVIEW_RESIZE' && event.data?.id === id) {\n        setIframeHeight(Math.min(Math.max(event.data.height, 200), 4000));\n      }\n    }\n    window.addEventListener('message', handleMessage);\n    return () => window.removeEventListener('message', handleMessage);\n  }, [id]);\n\n  useEffect(() => {\n    if (!expanded) return;\n    function handleKey(e: KeyboardEvent) {\n      if (e.key === 'Escape') setExpanded(false);\n    }\n    document.addEventListener('keydown', handleKey);\n    return () => document.removeEventListener('keydown', handleKey);\n  }, [expanded]);\n\n  const togglePreview = useCallback(() => setShowPreview((v) => !v), []);\n\n  const headerActions = (\n    <>\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        onClick={togglePreview}\n        className=\"h-7 gap-1 px-2 text-xs\"\n      >\n        {showPreview ? (\n          <Code className=\"h-3 w-3\" />\n        ) : (\n          <Eye className=\"h-3 w-3\" />\n        )}\n        {showPreview ? 'Code' : 'Preview'}\n      </Button>\n      {showPreview && (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => setExpanded(true)}\n          className=\"h-7 w-7 p-0\"\n          aria-label=\"Expand preview\"\n        >\n          <Maximize2 className=\"h-3 w-3\" />\n        </Button>\n      )}\n    </>\n  );\n\n  return (\n    <>\n      <FenceBlock code={code} language=\"html\" headerActions={headerActions}>\n        <div className=\"relative\">\n          {showPreview ? (\n            <iframe\n              ref={iframeRef}\n              srcDoc={srcdoc}\n              // `allow-scripts` lets previewed HTML run its own JS (charts, demos,\n              // and the optional resize-postMessage handshake). It is intentionally\n              // NOT paired with `allow-same-origin`, so the content runs in an\n              // opaque (null) origin with no access to this page, cookies, or storage.\n              sandbox=\"allow-scripts allow-forms\"\n              referrerPolicy=\"no-referrer\"\n              className=\"w-full border-0\"\n              style={{ height: iframeHeight }}\n              title=\"HTML Preview\"\n            />\n          ) : (\n            <pre className=\"overflow-x-auto p-3 text-sm\">\n              <code>{code}</code>\n            </pre>\n          )}\n        </div>\n      </FenceBlock>\n\n      {expanded && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"HTML Preview\"\n        >\n          <button\n            type=\"button\"\n            aria-label=\"Close preview\"\n            className=\"absolute inset-0 h-full w-full cursor-default border-0 bg-transparent p-0\"\n            onClick={() => setExpanded(false)}\n          />\n          <div className=\"relative h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900\">\n            <div className=\"flex items-center justify-between border-b border-neutral-200 px-4 py-2 dark:border-neutral-700\">\n              <span className=\"text-sm font-medium\">HTML Preview</span>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setExpanded(false)}\n              >\n                Close\n              </Button>\n            </div>\n            <iframe\n              srcDoc={srcdoc}\n              sandbox=\"allow-scripts allow-forms\"\n              referrerPolicy=\"no-referrer\"\n              className=\"h-full w-full border-0\"\n              title=\"HTML Preview (expanded)\"\n            />\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"]}