@mieweb/ui 0.6.1-dev.148 → 0.6.1-dev.150

package/dist/components/SuperChat/plugins/index.js

@@ -0,0 +1,1181 @@
+import { useTextRenderContext } from '../../../chunk-I6CY5C6A.js';
+import { LightboxModal } from '../../../chunk-ASLZUFH4.js';
+import '../../../chunk-UHPQYBXQ.js';
+import { cn } from '../../../chunk-F3SOEIN2.js';
+import * as React2 from 'react';
+import rehypeHighlight from 'rehype-highlight';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import rehypeKatex from 'rehype-katex';
+import remarkMath from 'remark-math';
+import { createPortal } from 'react-dom';
+
+function CopyablePre({
+  node: _node,
+  ...props
+}) {
+  const ref = React2.useRef(null);
+  const [copied, setCopied] = React2.useState(false);
+  const onCopy = React2.useCallback(() => {
+    const text = ref.current?.innerText ?? "";
+    if (!text) return;
+    const copy = navigator.clipboard?.writeText(text);
+    if (!copy) return;
+    void copy.then(
+      () => {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      },
+      () => {
+      }
+    );
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "superchat-code", className: "group relative my-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onCopy,
+        "aria-label": copied ? "Copied" : "Copy code",
+        className: "absolute top-2 right-2 rounded-md bg-neutral-700/80 px-2 py-1 text-xs text-neutral-100 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-neutral-600 focus-visible:opacity-100",
+        children: copied ? "Copied" : "Copy"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        ...props,
+        ref,
+        className: cn(
+          "overflow-x-auto rounded-lg bg-neutral-900 p-3 text-sm text-neutral-100 dark:bg-neutral-950",
+          props.className
+        )
+      }
+    )
+  ] });
+}
+function createCodePlugin() {
+  return {
+    name: "code",
+    // `detect: false` + ignoreMissing keeps it predictable for streamed output.
+    rehypePlugins: [[rehypeHighlight, { detect: false, ignoreMissing: true }]],
+    components: {
+      pre: CopyablePre
+    },
+    // `.hljs-*` token classes are already permitted by the base schema's
+    // broadened `className` allow-list on code/pre/span.
+    sanitizeSchema: {
+      attributes: {
+        code: ["className"],
+        span: ["className"]
+      }
+    }
+  };
+}
+var KATEX_TAGS = [
+  "span",
+  "svg",
+  "path",
+  "line",
+  "math",
+  "semantics",
+  "annotation",
+  "mrow",
+  "mi",
+  "mo",
+  "mn",
+  "ms",
+  "mtext",
+  "msup",
+  "msub",
+  "msubsup",
+  "mfrac",
+  "msqrt",
+  "mroot",
+  "mover",
+  "munder",
+  "munderover",
+  "mtable",
+  "mtr",
+  "mtd",
+  "mspace",
+  "mpadded",
+  "mphantom",
+  "menclose",
+  "mstyle"
+];
+function createMathPlugin() {
+  return {
+    name: "math",
+    remarkPlugins: [remarkMath],
+    // `output: 'htmlAndMathml'` (KaTeX default) gives accessible MathML too.
+    rehypePlugins: [[rehypeKatex, { throwOnError: false }]],
+    sanitizeSchema: {
+      tagNames: KATEX_TAGS,
+      attributes: {
+        "*": ["className"],
+        span: ["className", "style", "ariaHidden"],
+        svg: [
+          "xmlns",
+          "width",
+          "height",
+          "viewBox",
+          "preserveAspectRatio",
+          "style"
+        ],
+        path: ["d"],
+        line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth"],
+        math: ["xmlns", "display"],
+        annotation: ["encoding"]
+      }
+    }
+  };
+}
+var GENUI_TAG = "genui-widget";
+function textOf(node) {
+  if (node.type === "text") return node.value ?? "";
+  return (node.children ?? []).map(textOf).join("");
+}
+function isGenuiPre(node) {
+  if (node.tagName !== "pre") return false;
+  const code = node.children?.find((c) => c.tagName === "code");
+  const className = code?.properties?.className;
+  const classes = Array.isArray(className) ? className : [className];
+  return classes.some(
+    (c) => typeof c === "string" && (c === "language-genui" || c === "genui")
+  );
+}
+function rehypeGenui() {
+  return (tree) => {
+    const walk = (node) => {
+      if (!node.children) return;
+      node.children = node.children.map((child) => {
+        if (isGenuiPre(child)) {
+          const code = child.children?.find((c) => c.tagName === "code");
+          const raw = code ? textOf(code) : "";
+          return {
+            type: "element",
+            tagName: GENUI_TAG,
+            properties: {},
+            children: [{ type: "text", value: raw }]
+          };
+        }
+        walk(child);
+        return child;
+      });
+    };
+    walk(tree);
+  };
+}
+function PendingCard({ label }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "superchat-genui-pending",
+      className: "my-2 flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-300",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-3 w-3 animate-spin rounded-full border-2 border-neutral-400 border-t-transparent",
+            "aria-hidden": "true"
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function InertFallback({ raw }) {
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      "data-slot": "superchat-genui-fallback",
+      className: "my-2 overflow-x-auto rounded-lg bg-neutral-900 p-3 text-sm text-neutral-100 dark:bg-neutral-950",
+      children: /* @__PURE__ */ jsx("code", { children: raw })
+    }
+  );
+}
+function ErrorCard({ message }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "superchat-genui-error",
+      role: "alert",
+      className: "my-2 rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-700 dark:bg-red-900/30 dark:text-red-300",
+      children: message
+    }
+  );
+}
+function parsePayload(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return { ok: false };
+  try {
+    const value = JSON.parse(trimmed);
+    if (!value || typeof value.widget !== "string") return { ok: false };
+    return { ok: true, value };
+  } catch {
+    return { ok: false };
+  }
+}
+async function validate(schema, data) {
+  if (!schema) return { ok: true, value: data };
+  const result = await schema["~standard"].validate(data);
+  if ("issues" in result && result.issues) {
+    return {
+      ok: false,
+      message: result.issues.map((i) => i.message).join("; ") || "Invalid widget payload"
+    };
+  }
+  return { ok: true, value: result.value };
+}
+function usePrefetchTrigger(policy, ref) {
+  const [ready, setReady] = React2.useState(policy === "eager");
+  React2.useEffect(() => {
+    if (ready) return;
+    if (policy === "idle") {
+      const requestIdle = window.requestIdleCallback;
+      const cancelIdle = window.cancelIdleCallback;
+      let idleId = null;
+      let timeoutId = null;
+      if (requestIdle) {
+        idleId = requestIdle(() => setReady(true));
+      } else {
+        timeoutId = window.setTimeout(() => setReady(true), 200);
+      }
+      return () => {
+        if (idleId !== null && cancelIdle) cancelIdle(idleId);
+        if (timeoutId !== null) window.clearTimeout(timeoutId);
+      };
+    }
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setReady(true);
+      return;
+    }
+    const obs = new IntersectionObserver((entries) => {
+      if (entries.some((e) => e.isIntersecting)) {
+        setReady(true);
+        obs.disconnect();
+      }
+    });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [policy, ready, ref]);
+  return ready;
+}
+function GenUIBlock({ raw, registry }) {
+  const { messageId, streaming } = useTextRenderContext();
+  const placeholderRef = React2.useRef(null);
+  const parsed = React2.useMemo(() => parsePayload(raw), [raw]);
+  const entry = parsed.ok ? registry[parsed.value.widget] : void 0;
+  const policy = entry?.prefetch ?? (parsed.ok ? parsed.value.prefetch : void 0) ?? "visible";
+  const codeReady = usePrefetchTrigger(policy, placeholderRef);
+  const [Loaded, setLoaded] = React2.useState(null);
+  const [validated, setValidated] = React2.useState(null);
+  React2.useEffect(() => {
+    if (!entry || !codeReady) return;
+    let active = true;
+    void entry.component().then((m) => {
+      if (active) setLoaded(() => m.default);
+    }).catch(() => {
+      if (active)
+        setValidated({ ok: false, message: "Failed to load widget" });
+    });
+    return () => {
+      active = false;
+    };
+  }, [entry, codeReady]);
+  React2.useEffect(() => {
+    if (!entry || !parsed.ok || streaming) return;
+    let active = true;
+    const props = parsed.value.props;
+    void (async () => {
+      const result = await validate(entry.schema, props);
+      if (!active) return;
+      if (result.ok && entry.prefetchData) {
+        try {
+          await entry.prefetchData(result.value);
+        } catch {
+        }
+      }
+      if (active) setValidated(result);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [entry, parsed, streaming]);
+  if (!parsed.ok) {
+    if (streaming) {
+      return /* @__PURE__ */ jsx("div", { ref: placeholderRef, children: /* @__PURE__ */ jsx(PendingCard, { label: "Preparing widget\u2026" }) });
+    }
+    return /* @__PURE__ */ jsx(InertFallback, { raw });
+  }
+  if (parsed.ok && !entry) return /* @__PURE__ */ jsx(InertFallback, { raw });
+  if (streaming || !Loaded || !validated) {
+    return /* @__PURE__ */ jsx("div", { ref: placeholderRef, children: /* @__PURE__ */ jsx(PendingCard, { label: "Preparing widget\u2026" }) });
+  }
+  if (!validated.ok) return /* @__PURE__ */ jsx(ErrorCard, { message: validated.message });
+  const meta = {
+    name: parsed.value.widget,
+    version: parsed.value.version,
+    messageId,
+    streaming
+  };
+  return /* @__PURE__ */ jsx(Loaded, { data: validated.value, meta });
+}
+function createGenUIPlugin(registry) {
+  const GenUIWidgetComponent = (props) => {
+    const raw = React2.Children.toArray(props.children).filter((c) => typeof c === "string").join("");
+    return /* @__PURE__ */ jsx(GenUIBlock, { raw, registry });
+  };
+  return {
+    name: "genui",
+    rehypePlugins: [rehypeGenui],
+    components: {
+      [GENUI_TAG]: GenUIWidgetComponent
+    },
+    sanitizeSchema: {
+      tagNames: [GENUI_TAG]
+    }
+  };
+}
+var MERMAID_TAG = "mermaid-diagram";
+function textOf2(node) {
+  if (node.type === "text") return node.value ?? "";
+  return (node.children ?? []).map(textOf2).join("");
+}
+function isMermaidPre(node) {
+  if (node.tagName !== "pre") return false;
+  const code = node.children?.find((c) => c.tagName === "code");
+  const className = code?.properties?.className;
+  const classes = Array.isArray(className) ? className : [className];
+  return classes.some(
+    (c) => typeof c === "string" && (c === "language-mermaid" || c === "mermaid")
+  );
+}
+function rehypeMermaid() {
+  return (tree) => {
+    const walk = (node) => {
+      if (!node.children) return;
+      node.children = node.children.map((child) => {
+        if (isMermaidPre(child)) {
+          const code = child.children?.find((c) => c.tagName === "code");
+          const raw = code ? textOf2(code) : "";
+          return {
+            type: "element",
+            tagName: MERMAID_TAG,
+            properties: {},
+            children: [{ type: "text", value: raw }]
+          };
+        }
+        walk(child);
+        return child;
+      });
+    };
+    walk(tree);
+  };
+}
+function PendingCard2({ label }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "superchat-mermaid-pending",
+      className: "my-2 flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-300",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-3 w-3 animate-spin rounded-full border-2 border-neutral-400 border-t-transparent",
+            "aria-hidden": "true"
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function InertFallback2({ raw }) {
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      "data-slot": "superchat-mermaid-fallback",
+      className: "my-2 overflow-x-auto rounded-lg bg-neutral-900 p-3 text-sm text-neutral-100 dark:bg-neutral-950",
+      children: /* @__PURE__ */ jsx("code", { children: raw })
+    }
+  );
+}
+var mermaidReady = null;
+var mermaidTheme = null;
+function loadMermaid(dark) {
+  const theme = dark ? "dark" : "default";
+  if (!mermaidReady || mermaidTheme !== theme) {
+    mermaidReady = (mermaidReady ?? import('mermaid').then(({ default: mermaid }) => mermaid)).then((mermaid) => {
+      mermaidTheme = theme;
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme
+      });
+      return mermaid;
+    });
+  }
+  return mermaidReady;
+}
+var mermaidSeq = 0;
+function MermaidDiagram({ code }) {
+  const { streaming } = useTextRenderContext();
+  const [svg, setSvg] = React2.useState(null);
+  const [failed, setFailed] = React2.useState(false);
+  const idRef = React2.useRef(`superchat-mermaid-${mermaidSeq += 1}`);
+  const source = code.trim();
+  React2.useEffect(() => {
+    if (streaming || !source) return;
+    let active = true;
+    setSvg(null);
+    setFailed(false);
+    const dark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+    void loadMermaid(dark).then((mermaid) => mermaid.render(idRef.current, source)).then(({ svg: rendered }) => {
+      if (active) setSvg(rendered);
+    }).catch(() => {
+      if (active) setFailed(true);
+    });
+    return () => {
+      active = false;
+    };
+  }, [source, streaming]);
+  if (!source && !streaming) return /* @__PURE__ */ jsx(InertFallback2, { raw: code });
+  if (failed) return /* @__PURE__ */ jsx(InertFallback2, { raw: code });
+  if (streaming || svg === null) {
+    return /* @__PURE__ */ jsx(PendingCard2, { label: "Rendering diagram\u2026" });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "superchat-mermaid",
+      className: "my-2 overflow-x-auto",
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+function createMermaidPlugin() {
+  const MermaidComponent = (props) => {
+    const raw = React2.Children.toArray(props.children).filter((c) => typeof c === "string").join("");
+    return /* @__PURE__ */ jsx(MermaidDiagram, { code: raw });
+  };
+  return {
+    name: "mermaid",
+    rehypePlugins: [rehypeMermaid],
+    components: {
+      [MERMAID_TAG]: MermaidComponent
+    },
+    sanitizeSchema: {
+      tagNames: [MERMAID_TAG]
+    }
+  };
+}
+function filenameFromUrl(url, alt) {
+  if (alt && alt.trim()) return alt.trim();
+  try {
+    const path = new URL(url, "http://localhost").pathname;
+    const last = path.split("/").filter(Boolean).pop();
+    return last || "image";
+  } catch {
+    return "image";
+  }
+}
+function ZoomableImage({
+  node: _node,
+  ...props
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const src = typeof props.src === "string" ? props.src : "";
+  const alt = typeof props.alt === "string" ? props.alt : "";
+  const attachment = React2.useMemo(() => {
+    if (!src) return null;
+    return {
+      id: src,
+      type: "image",
+      url: src,
+      filename: filenameFromUrl(src, alt),
+      size: 0,
+      mimeType: "image/*",
+      state: "uploaded",
+      alt
+    };
+  }, [src, alt]);
+  if (!src) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        "aria-label": alt ? `View image: ${alt}` : "View image",
+        className: "focus-visible:ring-primary-500 my-2 inline-block cursor-zoom-in rounded-lg focus-visible:ring-2 focus-visible:outline-none",
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            ...props,
+            alt,
+            className: cn(
+              "max-h-80 max-w-full rounded-lg object-contain",
+              props.className
+            )
+          }
+        )
+      }
+    ),
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        LightboxModal,
+        {
+          attachment,
+          onClose: () => setOpen(false)
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function createImagePlugin() {
+  return {
+    name: "image",
+    components: {
+      img: ZoomableImage
+    },
+    // Allow inline (`data:`) and object-URL (`blob:`) image sources in addition
+    // to the default http/https, so pasted/attached images render. These are
+    // safe for `<img>` (scripts in SVG loaded via `src` do not execute).
+    sanitizeSchema: {
+      protocols: { src: ["data", "blob"] }
+    }
+  };
+}
+var NitroTableGrid = React2.lazy(() => import('../../../nitroTableGrid-FWRCDE4N.js'));
+function textOf3(node) {
+  if (node.type === "text") return node.value ?? "";
+  return (node.children ?? []).map(textOf3).join("");
+}
+function rowsOf(parent) {
+  return (parent?.children ?? []).filter((c) => c.tagName === "tr");
+}
+function cellsOf(row, tag) {
+  return (row.children ?? []).filter((c) => c.tagName === tag);
+}
+function parseTable(node) {
+  if (!node || node.tagName !== "table") return null;
+  const thead = node.children?.find((c) => c.tagName === "thead");
+  const tbody = node.children?.find((c) => c.tagName === "tbody");
+  const headerRow = rowsOf(thead)[0];
+  if (!headerRow) return null;
+  const headers = cellsOf(headerRow, "th").map((c) => textOf3(c).trim());
+  if (headers.length === 0) return null;
+  const seen = /* @__PURE__ */ new Map();
+  const keys = headers.map((h) => {
+    const base = h || "column";
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return count === 0 ? base : `${base} (${count + 1})`;
+  });
+  const rows = rowsOf(tbody).map((tr) => {
+    const cells = cellsOf(tr, "td");
+    const row = {};
+    keys.forEach((key, i) => {
+      row[key] = cells[i] ? textOf3(cells[i]).trim() : "";
+    });
+    return row;
+  });
+  return { headers: keys, rows };
+}
+function HtmlTable({
+  node: _node,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "my-2 overflow-x-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ...props,
+      className: cn(
+        "w-full border-collapse text-sm [&_td]:border [&_td]:border-neutral-200 [&_td]:px-2 [&_td]:py-1 dark:[&_td]:border-neutral-700 [&_th]:border [&_th]:border-neutral-200 [&_th]:px-2 [&_th]:py-1 [&_th]:text-left dark:[&_th]:border-neutral-700",
+        props.className
+      )
+    }
+  ) });
+}
+var GridErrorBoundary = class extends React2.Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    if (this.state.failed) return this.props.fallback;
+    return this.props.children;
+  }
+};
+function createNitroTablePlugin() {
+  const NitroTable = (props) => {
+    const node = props.node;
+    const fallback = /* @__PURE__ */ jsx(
+      HtmlTable,
+      {
+        ...props
+      }
+    );
+    const parsed = React2.useMemo(() => parseTable(node), [node]);
+    if (!parsed) return fallback;
+    return /* @__PURE__ */ jsx(GridErrorBoundary, { fallback, children: /* @__PURE__ */ jsx(React2.Suspense, { fallback, children: /* @__PURE__ */ jsx(NitroTableGrid, { headers: parsed.headers, rows: parsed.rows }) }) });
+  };
+  return {
+    name: "nitro-table",
+    components: {
+      table: NitroTable
+    }
+  };
+}
+
+// src/components/SuperChat/render/attachmentCache.ts
+var DB_NAME = "mieweb-superchat";
+var STORE = "attachments";
+var META_STORE = "attachments_meta";
+var DB_VERSION = 2;
+var DEFAULT_MAX_BYTES = 100 * 1024 * 1024;
+var maxBytes = DEFAULT_MAX_BYTES;
+function hasIndexedDB() {
+  return typeof window !== "undefined" && !!window.indexedDB;
+}
+function openDB() {
+  if (!hasIndexedDB()) return Promise.resolve(null);
+  return new Promise((resolve) => {
+    let req;
+    try {
+      req = window.indexedDB.open(DB_NAME, DB_VERSION);
+    } catch {
+      resolve(null);
+      return;
+    }
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE)) {
+        db.createObjectStore(STORE, { keyPath: "id" });
+      }
+      if (!db.objectStoreNames.contains(META_STORE)) {
+        db.createObjectStore(META_STORE, { keyPath: "id" });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => resolve(null);
+  });
+}
+function tx(db, mode) {
+  return db.transaction(STORE, mode).objectStore(STORE);
+}
+function readAllMeta(db) {
+  return new Promise((resolve) => {
+    try {
+      const req = db.transaction(META_STORE, "readonly").objectStore(META_STORE).getAll();
+      req.onsuccess = () => resolve(req.result ?? []);
+      req.onerror = () => resolve([]);
+    } catch {
+      resolve([]);
+    }
+  });
+}
+async function touch(id) {
+  const db = await openDB();
+  if (!db) return;
+  await new Promise((resolve) => {
+    try {
+      const store = db.transaction(META_STORE, "readwrite").objectStore(META_STORE);
+      const getReq = store.get(id);
+      getReq.onsuccess = () => {
+        const meta = getReq.result;
+        if (meta) {
+          meta.lastAccessed = Date.now();
+          store.put(meta);
+        }
+        resolve();
+      };
+      getReq.onerror = () => resolve();
+    } catch {
+      resolve();
+    } finally {
+      db.close();
+    }
+  });
+}
+async function prune() {
+  const db = await openDB();
+  if (!db) return;
+  try {
+    const metas = await readAllMeta(db);
+    let total = metas.reduce((sum, m) => sum + (m.size || 0), 0);
+    if (total <= maxBytes) return;
+    const byAge = metas.slice().sort((a, b) => (a.lastAccessed || 0) - (b.lastAccessed || 0));
+    const victims = [];
+    for (const meta of byAge) {
+      if (total <= maxBytes) break;
+      if (metas.length - victims.length <= 1) break;
+      victims.push(meta.id);
+      total -= meta.size || 0;
+    }
+    if (!victims.length) return;
+    await new Promise((resolve) => {
+      try {
+        const t = db.transaction([STORE, META_STORE], "readwrite");
+        const blobs = t.objectStore(STORE);
+        const meta = t.objectStore(META_STORE);
+        for (const id of victims) {
+          blobs.delete(id);
+          meta.delete(id);
+        }
+        t.oncomplete = () => resolve();
+        t.onerror = () => resolve();
+      } catch {
+        resolve();
+      }
+    });
+  } finally {
+    db.close();
+  }
+}
+function dataUrlToBlob(dataUrl) {
+  const match = /^data:([^;,]*)(;base64)?,([\s\S]*)$/.exec(dataUrl);
+  if (!match) return null;
+  const mime = match[1] || "application/octet-stream";
+  const isBase64 = Boolean(match[2]);
+  const data = match[3];
+  try {
+    if (isBase64) {
+      const binary = window.atob(data);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i += 1) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      return new window.Blob([bytes], { type: mime });
+    }
+    return new window.Blob([decodeURIComponent(data)], { type: mime });
+  } catch {
+    return null;
+  }
+}
+var attachmentCache = {
+  /** Whether a persistent IndexedDB store is available in this environment. */
+  isAvailable: hasIndexedDB,
+  /**
+   * Tune the cache. `maxBytes` is the eviction budget (default 100 MB); when a
+   * `put` pushes the total past it, least-recently-used entries are dropped
+   * until it fits. Set `Infinity` to disable eviction.
+   */
+  configure(options) {
+    if (typeof options.maxBytes === "number" && options.maxBytes >= 0) {
+      maxBytes = options.maxBytes;
+    }
+  },
+  /** Total bytes currently held by the cache (0 when unavailable). */
+  async usage() {
+    const db = await openDB();
+    if (!db) return 0;
+    try {
+      const metas = await readAllMeta(db);
+      return metas.reduce((sum, m) => sum + (m.size || 0), 0);
+    } finally {
+      db.close();
+    }
+  },
+  /**
+   * Persist an attachment's bytes by id. Pass a `blob` or a `dataUrl`. Resolves
+   * to `true` when stored, `false` if unavailable or the input was unusable.
+   * Writing past the configured `maxBytes` evicts least-recently-used entries.
+   */
+  async put(input) {
+    const db = await openDB();
+    if (!db) return false;
+    const blob = input.blob ?? (input.dataUrl ? dataUrlToBlob(input.dataUrl) : null);
+    if (!blob) {
+      db.close();
+      return false;
+    }
+    const now = Date.now();
+    const entry = {
+      id: input.id,
+      name: input.name,
+      type: input.type || blob.type || "application/octet-stream",
+      blob,
+      size: blob.size,
+      cachedAt: now,
+      lastAccessed: now
+    };
+    const stored = await new Promise((resolve) => {
+      try {
+        const t = db.transaction([STORE, META_STORE], "readwrite");
+        t.objectStore(STORE).put(entry);
+        t.objectStore(META_STORE).put({
+          id: entry.id,
+          size: entry.size,
+          lastAccessed: now
+        });
+        t.oncomplete = () => resolve(true);
+        t.onerror = () => resolve(false);
+      } catch {
+        resolve(false);
+      } finally {
+        db.close();
+      }
+    });
+    if (stored) await prune();
+    return stored;
+  },
+  /** Read a cached attachment (blob + metadata) by id, or `undefined`. */
+  async get(id) {
+    const db = await openDB();
+    if (!db) return void 0;
+    const entry = await new Promise((resolve) => {
+      try {
+        const req = tx(db, "readonly").get(id);
+        req.onsuccess = () => resolve(req.result ?? void 0);
+        req.onerror = () => resolve(void 0);
+      } catch {
+        resolve(void 0);
+      } finally {
+        db.close();
+      }
+    });
+    if (entry) void touch(id);
+    return entry;
+  },
+  /**
+   * Resolve a fresh `blob:` object URL for a cached attachment, or `undefined`
+   * if it isn't cached. **The caller owns the URL** and must
+   * `URL.revokeObjectURL` it when done (the {@link useAttachmentUrl} hook does
+   * this automatically).
+   */
+  async getObjectURL(id) {
+    const entry = await attachmentCache.get(id);
+    if (!entry) return void 0;
+    try {
+      return window.URL.createObjectURL(entry.blob);
+    } catch {
+      return void 0;
+    }
+  },
+  /** Remove a cached attachment by id. */
+  async delete(id) {
+    const db = await openDB();
+    if (!db) return;
+    await new Promise((resolve) => {
+      try {
+        const t = db.transaction([STORE, META_STORE], "readwrite");
+        t.objectStore(STORE).delete(id);
+        t.objectStore(META_STORE).delete(id);
+        t.oncomplete = () => resolve();
+        t.onerror = () => resolve();
+      } catch {
+        resolve();
+      } finally {
+        db.close();
+      }
+    });
+  },
+  /** Drop every cached attachment. */
+  async clear() {
+    const db = await openDB();
+    if (!db) return;
+    await new Promise((resolve) => {
+      try {
+        const t = db.transaction([STORE, META_STORE], "readwrite");
+        t.objectStore(STORE).clear();
+        t.objectStore(META_STORE).clear();
+        t.oncomplete = () => resolve();
+        t.onerror = () => resolve();
+      } catch {
+        resolve();
+      } finally {
+        db.close();
+      }
+    });
+  }
+};
+var ATTACHMENT_TAG = "superchat-attachment";
+var ATTACHMENT_FENCE = "superchat-attachment";
+function attachmentMarkdown(payload) {
+  return ["```superchat-attachment", JSON.stringify(payload), "```"].join("\n");
+}
+function useAttachmentUrl(id, fallbackSrc) {
+  const [url, setUrl] = React2.useState(void 0);
+  const [status, setStatus] = React2.useState("idle");
+  React2.useEffect(() => {
+    let active = true;
+    let created;
+    if (!id && !fallbackSrc) {
+      setUrl(void 0);
+      setStatus("idle");
+      return;
+    }
+    setStatus("loading");
+    void (async () => {
+      if (id) {
+        const cached = await attachmentCache.getObjectURL(id);
+        if (!active) {
+          if (cached) window.URL.revokeObjectURL(cached);
+          return;
+        }
+        if (cached) {
+          created = cached;
+          setUrl(cached);
+          setStatus("ready");
+          return;
+        }
+      }
+      if (!active) return;
+      setUrl(fallbackSrc);
+      setStatus(fallbackSrc ? "ready" : "missing");
+    })();
+    return () => {
+      active = false;
+      if (created) window.URL.revokeObjectURL(created);
+    };
+  }, [id, fallbackSrc]);
+  return { url, status };
+}
+var ICON_PROPS = {
+  width: 20,
+  height: 20,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.75,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+function FileGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { ...ICON_PROPS, children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z" })
+  ] });
+}
+function DownloadGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { ...ICON_PROPS, width: 16, height: 16, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
+    /* @__PURE__ */ jsx("path", { d: "m7 12 5 5 5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 21h14" })
+  ] });
+}
+function kindOf(type) {
+  if (type.startsWith("image/")) return "image";
+  if (type.startsWith("video/")) return "video";
+  if (type.startsWith("audio/")) return "audio";
+  if (type === "application/pdf") return "pdf";
+  return "file";
+}
+function FileChip({
+  name,
+  url,
+  unavailable
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-neutral-500 dark:text-neutral-400", children: /* @__PURE__ */ jsx(FileGlyph, {}) }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm", children: name }),
+    url && !unavailable ? /* @__PURE__ */ jsx("span", { className: "text-neutral-400", children: /* @__PURE__ */ jsx(DownloadGlyph, {}) }) : null
+  ] });
+  const className = cn(
+    "my-2 flex max-w-sm items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2 dark:border-neutral-700 dark:bg-neutral-800",
+    unavailable && "opacity-60"
+  );
+  if (url && !unavailable) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: url,
+        download: name,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        title: name,
+        className: cn(
+          className,
+          "hover:border-neutral-300 hover:bg-neutral-100 dark:hover:border-neutral-600 dark:hover:bg-neutral-700"
+        ),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className, title: name, children: [
+    content,
+    unavailable ? /* @__PURE__ */ jsx("span", { className: "text-xs whitespace-nowrap text-neutral-400", children: "unavailable offline" }) : null
+  ] });
+}
+function AttachmentBlock({ payload }) {
+  const { id, type, name, src } = payload;
+  const { url, status } = useAttachmentUrl(id || void 0, src);
+  const kind = kindOf(type);
+  React2.useEffect(() => {
+    if (!id || !src || !attachmentCache.isAvailable()) return;
+    let active = true;
+    void attachmentCache.get(id).then((existing) => {
+      if (active && !existing) {
+        void attachmentCache.put({ id, name, type, dataUrl: src });
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [id, src, name, type]);
+  if (status === "loading") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "superchat-attachment",
+        className: "my-2 h-10 max-w-sm animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800",
+        "aria-label": `Loading ${name}`
+      }
+    );
+  }
+  if (!url) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "superchat-attachment", children: /* @__PURE__ */ jsx(FileChip, { name, unavailable: true }) });
+  }
+  let body;
+  switch (kind) {
+    case "image":
+      body = /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: url,
+          alt: name,
+          className: "max-h-80 max-w-full rounded-lg object-contain"
+        }
+      );
+      break;
+    case "video":
+      body = /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: url,
+          controls: true,
+          className: "max-h-80 max-w-full rounded-lg bg-black",
+          children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+        }
+      );
+      break;
+    case "audio":
+      body = /* @__PURE__ */ jsxs("div", { className: "max-w-sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 truncate text-xs text-neutral-500 dark:text-neutral-400", children: name }),
+        /* @__PURE__ */ jsx("audio", { src: url, controls: true, className: "w-full", children: /* @__PURE__ */ jsx("track", { kind: "captions" }) })
+      ] });
+      break;
+    case "pdf":
+      body = /* @__PURE__ */ jsxs("div", { className: "max-w-2xl overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 px-3 py-1.5 dark:border-neutral-700 dark:bg-neutral-800", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm", title: name, children: name }),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: url,
+              download: name,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-primary-700 hover:text-primary-800 dark:text-primary-300 inline-flex items-center gap-1 text-xs whitespace-nowrap",
+              children: [
+                /* @__PURE__ */ jsx(DownloadGlyph, {}),
+                "Open"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("iframe", { src: url, title: name, className: "h-96 w-full bg-white" })
+      ] });
+      break;
+    default:
+      body = /* @__PURE__ */ jsx(FileChip, { name, url });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-slot": "superchat-attachment", children: body });
+}
+function textOf4(node) {
+  if (node.type === "text") return node.value ?? "";
+  return (node.children ?? []).map(textOf4).join("");
+}
+function isAttachmentPre(node) {
+  if (node.tagName !== "pre") return false;
+  const code = node.children?.find((c) => c.tagName === "code");
+  const className = code?.properties?.className;
+  const classes = Array.isArray(className) ? className : [className];
+  return classes.some(
+    (c) => typeof c === "string" && (c === `language-${ATTACHMENT_FENCE}` || c === ATTACHMENT_FENCE)
+  );
+}
+function rehypeAttachment() {
+  return (tree) => {
+    const walk = (node) => {
+      if (!node.children) return;
+      node.children = node.children.map((child) => {
+        if (isAttachmentPre(child)) {
+          const code = child.children?.find((c) => c.tagName === "code");
+          const raw = code ? textOf4(code) : "";
+          return {
+            type: "element",
+            tagName: ATTACHMENT_TAG,
+            properties: {},
+            children: [{ type: "text", value: raw }]
+          };
+        }
+        walk(child);
+        return child;
+      });
+    };
+    walk(tree);
+  };
+}
+function childText(children) {
+  return React2.Children.toArray(children).map((c) => typeof c === "string" ? c : "").join("");
+}
+function sanitizeSrc(src) {
+  if (!src) return void 0;
+  if (/^(?:blob:|https?:\/\/)/i.test(src)) return src;
+  const dataMatch = /^data:([\w.+-]+\/[\w.+-]+)?[;,]/i.exec(src);
+  if (dataMatch) {
+    const mime = (dataMatch[1] ?? "text/plain").toLowerCase();
+    const EXECUTABLE_MIME = /^(?:text\/html|application\/xhtml\+xml|image\/svg\+xml|text\/xml|application\/xml)$/;
+    return EXECUTABLE_MIME.test(mime) ? void 0 : src;
+  }
+  return void 0;
+}
+function parsePayload2(raw) {
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed.type !== "string") return null;
+    const src = typeof parsed.src === "string" ? sanitizeSrc(parsed.src) : void 0;
+    if (!parsed.id && !src) return null;
+    return {
+      id: typeof parsed.id === "string" ? parsed.id : void 0,
+      type: parsed.type,
+      name: typeof parsed.name === "string" ? parsed.name : "attachment",
+      src
+    };
+  } catch {
+    return null;
+  }
+}
+function AttachmentElement({
+  node: _node,
+  children
+}) {
+  const payload = parsePayload2(childText(children));
+  if (!payload) return null;
+  return /* @__PURE__ */ jsx(AttachmentBlock, { payload });
+}
+function createAttachmentPlugin() {
+  return {
+    name: "attachment",
+    rehypePlugins: [rehypeAttachment],
+    components: {
+      [ATTACHMENT_TAG]: AttachmentElement
+    },
+    // The payload rides as a text child; only the custom tag needs allow-listing.
+    sanitizeSchema: {
+      tagNames: [ATTACHMENT_TAG]
+    }
+  };
+}
+
+export { ATTACHMENT_FENCE, ATTACHMENT_TAG, GENUI_TAG, MERMAID_TAG, attachmentCache, attachmentMarkdown, createAttachmentPlugin, createCodePlugin, createGenUIPlugin, createImagePlugin, createMathPlugin, createMermaidPlugin, createNitroTablePlugin, useAttachmentUrl };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map