@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/levels/standard/static-standard.js

@@ -0,0 +1,187 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  NO_SPLITTER_ENVELOPES,
+  splitContentIntoBlocksWith
+} from "../../display/markdown-classification/processors/utils/content-splitter-core.js";
+import { RichContentDepthProvider } from "../depth.js";
+import { fenceNestsInnerFences } from "@ai-matrx/content-ir/source";
+import MarkdownPreviewBlock from "../../display/blocks/markdown-preview/MarkdownPreviewBlock.js";
+import { StandardBlock } from "./StandardBlocks.js";
+import XmlBlock from "../../display/blocks/xml/XmlBlock.js";
+import { isQuotedSourceXmlBlock } from "@ai-matrx/content-ir/surfaces";
+import { tokenizeXml } from "../../display/blocks/xml/xml-tokenize.js";
+import {
+  computeDocumentNumbering,
+  documentFootnoteSource
+} from "../../markdown-core/syntax/document-numbering.js";
+import { DocumentNumberingProvider } from "../../markdown-core/syntax/elements/DocumentNumbering.js";
+import { RemoteImageGate } from "../prose/remote-image-policy.js";
+const SECTION_TYPES = /* @__PURE__ */ new Set([
+  "info",
+  "task",
+  "plan",
+  "database",
+  "private",
+  "event",
+  "tool",
+  "thinking",
+  "reasoning",
+  "consolidated_reasoning"
+]);
+const XML_LANGUAGES = /* @__PURE__ */ new Set(["xml", "svg"]);
+const MUTED_SECTIONS = /* @__PURE__ */ new Set([
+  "thinking",
+  "reasoning",
+  "consolidated_reasoning"
+]);
+function StaticBlock({
+  block,
+  depth,
+  cap,
+  Prose,
+  numbering
+}) {
+  const { type, content } = block;
+  if (type === "text" || type === "table") {
+    if (!content.trim()) return null;
+    return /* @__PURE__ */ jsx(
+      Prose,
+      {
+        content,
+        numbering,
+        renderNested: depth + 1 <= cap ? (source) => /* @__PURE__ */ jsx(
+          StaticStandard,
+          {
+            source,
+            depth: depth + 1,
+            cap,
+            Prose,
+            numbering
+          }
+        ) : void 0
+      }
+    );
+  }
+  if (SECTION_TYPES.has(type) && depth + 1 <= cap) {
+    if (!content.trim()) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-rich-content-section": type,
+        className: MUTED_SECTIONS.has(type) ? "my-2 border-l-2 border-border pl-3 text-muted-foreground" : "my-2",
+        children: /* @__PURE__ */ jsx(StaticStandard, { source: content, depth: depth + 1, cap, Prose, numbering })
+      }
+    );
+  }
+  if (type === "code" && fenceNestsInnerFences(block.language?.toLowerCase()) && depth + 1 <= cap) {
+    return /* @__PURE__ */ jsx(RichContentDepthProvider, { depth, cap, children: /* @__PURE__ */ jsx(
+      MarkdownPreviewBlock,
+      {
+        content,
+        renderedPreview: /* @__PURE__ */ jsx(StaticStandard, { source: content, depth: depth + 1, cap, Prose, numbering })
+      }
+    ) });
+  }
+  const xmlLanguage = type === "svg" ? "svg" : type === "code" ? block.language?.toLowerCase() : void 0;
+  if (xmlLanguage && XML_LANGUAGES.has(xmlLanguage) && depth + 1 <= cap) {
+    const renderedProse = {};
+    tokenizeXml(content).forEach((token, idx) => {
+      if (token.type === "markdown" && token.text?.trim()) {
+        renderedProse[idx] = /* @__PURE__ */ jsx(
+          StaticStandard,
+          {
+            source: token.text,
+            depth: depth + 1,
+            cap,
+            Prose,
+            numbering
+          }
+        );
+      }
+    });
+    return /* @__PURE__ */ jsx(RichContentDepthProvider, { depth, cap, children: /* @__PURE__ */ jsx(
+      XmlBlock,
+      {
+        content,
+        language: xmlLanguage,
+        renderedProse,
+        quotedSource: isQuotedSourceXmlBlock(block)
+      }
+    ) });
+  }
+  if (type === "image" && block.src) {
+    return /* @__PURE__ */ jsx(RemoteImageGate, { src: block.src, alt: block.alt, block: true, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: block.src,
+        alt: block.alt || "",
+        referrerPolicy: "no-referrer",
+        className: "my-2 h-auto max-w-full rounded-md object-contain"
+      }
+    ) });
+  }
+  if (type === "accent-divider" || type === "heavy-divider") {
+    return /* @__PURE__ */ jsx("hr", { className: "my-4 border-border" });
+  }
+  return /* @__PURE__ */ jsx(RichContentDepthProvider, { depth, cap, children: /* @__PURE__ */ jsx(
+    StandardBlock,
+    {
+      block: {
+        type,
+        content,
+        language: block.language,
+        src: block.src,
+        alt: block.alt,
+        // The fence meta (title, highlighted lines) — fence-meta.ts.
+        metadata: block.metadata
+      }
+    }
+  ) });
+}
+function StaticStandard({
+  source,
+  depth,
+  cap,
+  className,
+  Prose,
+  numbering
+}) {
+  const blocks = splitContentIntoBlocksWith(source, NO_SPLITTER_ENVELOPES);
+  const isRoot = numbering === void 0;
+  const docNumbering = numbering ?? computeDocumentNumbering(source);
+  const body = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-rich-content": "standard",
+      "data-matrx-doc-root": "",
+      className: className ?? "min-w-0",
+      children: [
+        blocks.map((block, index) => /* @__PURE__ */ jsx(
+          StaticBlock,
+          {
+            block,
+            depth,
+            cap,
+            Prose,
+            numbering: docNumbering
+          },
+          index
+        )),
+        isRoot && documentFootnoteSource(docNumbering) ? /* @__PURE__ */ jsx(
+          StaticBlock,
+          {
+            block: { type: "text", content: documentFootnoteSource(docNumbering) },
+            depth,
+            cap,
+            Prose,
+            numbering: docNumbering
+          }
+        ) : null
+      ]
+    }
+  );
+  return isRoot ? /* @__PURE__ */ jsx(DocumentNumberingProvider, { source, children: body }) : body;
+}
+export {
+  StaticStandard
+};

package/dist/levels/standard/stream-holdback.d.ts

@@ -0,0 +1,2 @@
+/** Heal the tail of a still-streaming nested source before it is split. */
+export declare function healStreamingTail(source: string): string;

package/dist/levels/standard/stream-holdback.js

@@ -0,0 +1,77 @@
+import { fenceLineKinds } from "@ai-matrx/content-ir/source";
+import {
+  isGfmDelimiterRow,
+  startsLikeTableRow,
+  trailingTableStart
+} from "../../display/markdown-classification/processors/utils/gfm-table-lines.js";
+const TEX_SIGNAL = /\\[A-Za-z]+|[\\^_{}]/;
+function openFenceStart(source) {
+  const kinds = fenceLineKinds(source);
+  let open = -1;
+  let openAt = -1;
+  let offset = 0;
+  source.split("\n").forEach((line, i) => {
+    if (kinds[i] === "open") {
+      open = i;
+      openAt = offset;
+    } else if (kinds[i] !== "body") open = -1;
+    offset += line.length + 1;
+  });
+  return open === -1 ? -1 : openAt;
+}
+function holdBackTable(text) {
+  const lines = text.split("\n");
+  let end = lines.length;
+  while (end > 0 && lines[end - 1].trim() === "") end--;
+  const start = trailingTableStart(lines, end);
+  if (start === end) return text;
+  const rows = lines.slice(start, end);
+  const hasDelimiter = rows.some((row) => isGfmDelimiterRow(row));
+  if (!hasDelimiter) {
+    return lines.slice(0, start).join("\n");
+  }
+  const last = rows[rows.length - 1].trimEnd();
+  if (end === lines.length && startsLikeTableRow(rows[0]) && !last.endsWith("|")) {
+    return lines.slice(0, end - 1).join("\n");
+  }
+  return text;
+}
+function holdBackMath(text) {
+  const displays = [...text.matchAll(/\$\$/g)];
+  if (displays.length % 2 === 1) {
+    return text.slice(0, displays[displays.length - 1].index);
+  }
+  for (const [open, close] of [
+    ["\\[", "\\]"],
+    ["\\(", "\\)"]
+  ]) {
+    const at = text.lastIndexOf(open);
+    if (at !== -1 && text.indexOf(close, at + open.length) === -1) {
+      return text.slice(0, at);
+    }
+  }
+  const lineStart = text.lastIndexOf("\n") + 1;
+  const lastLine = text.slice(lineStart).replace(/\$\$/g, "  ");
+  const dollars = [...lastLine.matchAll(/(?<!\\)\$/g)];
+  if (dollars.length % 2 === 1) {
+    const at = dollars[dollars.length - 1].index;
+    if (TEX_SIGNAL.test(lastLine.slice(at + 1))) {
+      return text.slice(0, lineStart + at);
+    }
+  }
+  return text;
+}
+function healStreamingTail(source) {
+  const lastNewline = source.lastIndexOf("\n");
+  const lastLine = source.slice(lastNewline + 1);
+  if (/^\s*`{1,2}\s*$/.test(lastLine)) return source.slice(0, lastNewline + 1);
+  const partialTag = /<\/?[A-Za-z][\w:-]*(?:\s[^<>]*)?$/.exec(lastLine);
+  if (partialTag) {
+    return source.slice(0, lastNewline + 1 + partialTag.index);
+  }
+  if (openFenceStart(source) !== -1) return source;
+  return holdBackMath(holdBackTable(source));
+}
+export {
+  healStreamingTail
+};

package/dist/mermaid/MermaidFullscreen.d.ts

@@ -0,0 +1,17 @@
+/**
+ * MermaidFullscreen — a full-viewport overlay that shows a diagram large, with
+ * the renderer's pan/zoom. Rendered through a portal to document.body so it
+ * escapes any chat/canvas overflow clipping. Esc or the close button exits;
+ * clicking the empty margin also exits. Reused by the chat block header and any
+ * other surface that wants a "view fullscreen" affordance.
+ */
+import React from "react";
+import type { MermaidRenderOptions } from "./types.js";
+interface MermaidFullscreenProps {
+    source: string;
+    options: MermaidRenderOptions;
+    title?: string | null;
+    onClose: () => void;
+}
+export declare function MermaidFullscreen({ source, options, title, onClose, }: MermaidFullscreenProps): React.ReactPortal | null;
+export {};

package/dist/mermaid/MermaidFullscreen.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { SimpleTooltip } from "../utils/lifted/Tooltip.js";
+console.log(
+  "%c[MERMAID IMPORT TEST] components/mermaid/MermaidFullscreen.tsx",
+  "color: #fff; background: #7c3aed; font-weight: bold; padding: 2px 6px; border-radius: 3px;"
+);
+import { cn } from "@ai-matrx/design-system";
+import { MermaidRenderer } from "./MermaidRenderer.js";
+function MermaidFullscreen({
+  source,
+  options,
+  title,
+  onClose
+}) {
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [onClose]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-[120] flex flex-col bg-background/98 backdrop-blur-sm",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title ?? "Diagram (fullscreen)",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-2 pt-safe", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title ?? "Diagram" }),
+            /* @__PURE__ */ jsx(SimpleTooltip, { text: "Exit fullscreen (Esc)", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Exit fullscreen",
+                onClick: onClose,
+                className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-4", children: /* @__PURE__ */ jsx(
+            MermaidRenderer,
+            {
+              source,
+              options,
+              fillHeight: true,
+              className: cn("h-full w-full")
+            }
+          ) })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  MermaidFullscreen
+};

package/dist/mermaid/MermaidRenderer.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { type LadderResult } from "./sanitize.js";
+import type { MermaidRenderOptions } from "./types.js";
+interface MermaidRendererProps {
+    source: string;
+    options: MermaidRenderOptions;
+    isStreamActive?: boolean;
+    className?: string;
+    hideViewportControls?: boolean;
+    /** Receives the live SVG element after each injection (visual-mode hook). */
+    onSvgMounted?: (el: SVGSVGElement | null) => void;
+    /** Called whenever a ladder pass finishes (diagnostics for editors). */
+    onLadderResult?: (result: LadderResult) => void;
+    /** Px cap on the diagram frame height (inline/chat). See MermaidViewport. */
+    viewportMaxHeight?: number;
+    /** Frame fills its parent's height (canvas workbench, fullscreen). */
+    fillHeight?: boolean;
+}
+export declare function MermaidRenderer({ source, options: baseOptions, isStreamActive, className, hideViewportControls, onSvgMounted, onLadderResult, viewportMaxHeight, fillHeight, }: MermaidRendererProps): React.JSX.Element;
+export {};

package/dist/mermaid/MermaidRenderer.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { useEffect, useId, useRef, useState } from "react";
+console.log(
+  "%c[MERMAID IMPORT TEST] components/mermaid/MermaidRenderer.tsx",
+  "color: #fff; background: #7c3aed; font-weight: bold; padding: 2px 6px; border-radius: 3px;"
+);
+import { useDrawWhenNear } from "./lazy-draw.js";
+import { Copy, TriangleAlert } from "lucide-react";
+import { toast } from "../host/toast.js";
+import { Skeleton } from "@ai-matrx/design-system";
+import { cn } from "@ai-matrx/design-system";
+import { detectDiagramType, extractMermaidTitle } from "./diagram-type.js";
+import { getCatalogEntry } from "./catalog.js";
+import { MermaidViewport } from "./MermaidViewport.js";
+import {
+  MermaidRenderSupersededError,
+  preloadMermaid,
+  renderMermaid,
+  supersedeMermaidRender,
+  validateMermaid
+} from "./runtime.js";
+import {
+  humanizeMermaidError,
+  parseWithLadder
+} from "./sanitize.js";
+import { renderOptionsKey } from "./types.js";
+import { ErrorAlchemyMenu } from "../host/ErrorActions.js";
+const STREAMING_DEBOUNCE_MS = 300;
+const SETTLED_DEBOUNCE_MS = 250;
+const PIE_LEGEND_STACK_BELOW_PX = 520;
+function MermaidRenderer({
+  source,
+  options: baseOptions,
+  isStreamActive = false,
+  className,
+  hideViewportControls,
+  onSvgMounted,
+  onLadderResult,
+  viewportMaxHeight,
+  fillHeight
+}) {
+  const [lastGoodSvg, setLastGoodSvg] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const epochRef = useRef(0);
+  const rendererId = useId();
+  const onLadderResultRef = useRef(onLadderResult);
+  const frameRef = useRef(null);
+  const { shouldDraw, markDrawn } = useDrawWhenNear(frameRef);
+  useEffect(() => {
+    onLadderResultRef.current = onLadderResult;
+  });
+  useEffect(() => {
+    preloadMermaid();
+  }, []);
+  const isPie = detectDiagramType(source) === "pie";
+  const [frameEl, setFrameEl] = useState(null);
+  const [narrowFrame, setNarrowFrame] = useState(false);
+  useEffect(() => {
+    if (!isPie || !frameEl) return void 0;
+    const observer = new ResizeObserver(([entry]) => {
+      const width = entry?.contentRect.width ?? 0;
+      if (width > 0) setNarrowFrame(width < PIE_LEGEND_STACK_BELOW_PX);
+    });
+    observer.observe(frameEl);
+    return () => observer.disconnect();
+  }, [isPie, frameEl]);
+  const options = isPie ? { ...baseOptions, pieLegend: narrowFrame ? "bottom" : "right" } : baseOptions;
+  const optionsKey = renderOptionsKey(options);
+  useEffect(() => {
+    const trimmed = source.trim();
+    if (!shouldDraw) return void 0;
+    if (!trimmed) {
+      return void 0;
+    }
+    const epoch = ++epochRef.current;
+    const timer = setTimeout(
+      async () => {
+        try {
+          if (!isStreamActive) {
+            let directRenderError;
+            try {
+              const { svg } = await renderMermaid(trimmed, options, rendererId);
+              if (epoch !== epochRef.current) return;
+              setLastGoodSvg(svg);
+              setFailure(null);
+              return;
+            } catch (err) {
+              directRenderError = err;
+            }
+            const validation = await validateMermaid(trimmed);
+            if (epoch !== epochRef.current) return;
+            if (validation.ok) throw directRenderError;
+          }
+          const ladder = await parseWithLadder(trimmed, validateMermaid, {
+            streaming: isStreamActive
+          });
+          if (epoch !== epochRef.current) return;
+          onLadderResultRef.current?.(ladder);
+          if (ladder.valid) {
+            const { svg } = await renderMermaid(
+              ladder.source,
+              options,
+              rendererId
+            );
+            if (epoch !== epochRef.current) return;
+            setLastGoodSvg(svg);
+            setFailure(null);
+          } else if (!isStreamActive) {
+            setFailure(ladder);
+          }
+        } catch (err) {
+          if (err instanceof MermaidRenderSupersededError) return;
+          if (epoch !== epochRef.current) return;
+          if (!isStreamActive) {
+            console.warn(
+              "[MermaidRenderer] render threw after validation passed:",
+              err
+            );
+            setFailure({
+              source: trimmed,
+              valid: false,
+              fixes: [],
+              error: humanizeMermaidError(
+                err instanceof Error ? err.message : String(err)
+              )
+            });
+          }
+        }
+      },
+      isStreamActive ? STREAMING_DEBOUNCE_MS : SETTLED_DEBOUNCE_MS
+    );
+    return () => {
+      clearTimeout(timer);
+      supersedeMermaidRender(rendererId);
+    };
+  }, [source, optionsKey, isStreamActive, rendererId, shouldDraw]);
+  useEffect(() => {
+    if (lastGoodSvg || failure) markDrawn();
+  });
+  const diagramType = detectDiagramType(source);
+  const label = getCatalogEntry(diagramType).label;
+  const title = extractMermaidTitle(source);
+  const hasSource = source.trim().length > 0;
+  const showSvg = hasSource ? lastGoodSvg : null;
+  const showFailure = hasSource ? failure : null;
+  if (showFailure && !isStreamActive && !showSvg) {
+    return /* @__PURE__ */ jsx(
+      MermaidErrorCard,
+      {
+        failure: showFailure,
+        originalSource: source,
+        className
+      }
+    );
+  }
+  if (!showSvg) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (el) => {
+          frameRef.current = el;
+          setFrameEl(el);
+        },
+        className: cn("space-y-2 p-3", fillHeight && "h-full", className),
+        "aria-busy": "true",
+        "aria-label": shouldDraw ? "Drawing the diagram" : "Diagram \u2014 drawn when it scrolls into view",
+        children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref: (el) => {
+        frameRef.current = el;
+        setFrameEl(el);
+      },
+      role: "img",
+      "aria-label": title ?? `${label} diagram`,
+      className: cn("m-0", fillHeight && "flex h-full flex-col", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          MermaidViewport,
+          {
+            svg: showSvg,
+            className: fillHeight ? "min-h-0 flex-1" : void 0,
+            hideControls: hideViewportControls,
+            onSvgMounted,
+            maxFrameHeight: viewportMaxHeight,
+            fillHeight
+          }
+        ),
+        showFailure && !isStreamActive && // The final source failed but a partial render succeeded earlier —
+        // keep the diagram visible and surface the problem under it.
+        /* @__PURE__ */ jsx("figcaption", { className: "mt-1", children: /* @__PURE__ */ jsx(MermaidErrorCard, { failure: showFailure, originalSource: source }) })
+      ]
+    }
+  );
+}
+function MermaidErrorCard({
+  failure,
+  originalSource,
+  className
+}) {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const [showSource, setShowSource] = useState(false);
+  const copyOriginal = async () => {
+    await copyText(originalSource, "Diagram source copied");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: "This diagram could not be drawn" }),
+            humanizeMermaidError(failure.error) && /* @__PURE__ */ jsx("p", { className: "break-words text-xs text-muted-foreground", children: humanizeMermaidError(failure.error) }),
+            failure.fixes.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              "Attempted repairs: ",
+              failure.fixes.map((f) => f.rule).join(", ")
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-0.5", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-xs font-medium text-primary hover:underline",
+                  onClick: () => setShowSource((v) => !v),
+                  children: showSource ? "Hide source" : "Show source"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline",
+                  onClick: copyOriginal,
+                  children: [
+                    /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }),
+                    "Copy source"
+                  ]
+                }
+              )
+            ] }),
+            showSource && /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-64 overflow-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: originalSource })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+      ]
+    }
+  );
+}
+export {
+  MermaidRenderer
+};

package/dist/mermaid/MermaidView.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Thin chrome-free views over MermaidRenderer (no card, no toolbar):
+ *
+ *  - MermaidView          — Redux-connected: user preferences + app theme,
+ *                           with per-artifact metadata overrides. For app
+ *                           surfaces (artifact wrapper, canvas, demos).
+ *  - StandaloneMermaidView — Defaults + painted DOM theme via useThemeMode().
+ *                           For public share pages whose tree has no store.
+ */
+import React from "react";
+import { type MermaidArtifactMetadata } from "./types.js";
+interface MermaidViewProps {
+    source: string;
+    /** Per-artifact overrides (canvas_items.content.metadata shape). */
+    metadata?: MermaidArtifactMetadata | null;
+    isStreamActive?: boolean;
+    className?: string;
+    hideViewportControls?: boolean;
+    onSvgMounted?: (el: SVGSVGElement | null) => void;
+    /** Px cap on the diagram frame height (inline/chat). See MermaidViewport. */
+    viewportMaxHeight?: number;
+    /** Frame fills its parent's height (canvas workbench, fullscreen). */
+    fillHeight?: boolean;
+}
+export declare function MermaidView({ source, metadata, isStreamActive, className, hideViewportControls, onSvgMounted, viewportMaxHeight, fillHeight, }: MermaidViewProps): React.JSX.Element;
+export declare function StandaloneMermaidView({ source, metadata, className, viewportMaxHeight, fillHeight, }: Pick<MermaidViewProps, "source" | "metadata" | "className" | "viewportMaxHeight" | "fillHeight">): React.JSX.Element;
+export {};