@elabs-ai/components-editor 4.1.0 → 5.0.0

package/src/mermaid-diagram/mermaid-diagram.test.tsx

@@ -7,9 +7,10 @@ const renderMock = vi.fn(async (_id: string, chart: string) => {
     svg: `<svg data-chart="ok"><g class="node"><rect></rect><text>Microsoft Graph API</text></g><g class="node"><rect></rect><text>Worker</text></g></svg>`,
   };
 });
+const initializeMock = vi.fn();
 
 vi.mock("mermaid", () => ({
-  default: { initialize: vi.fn(), render: renderMock },
+  default: { initialize: initializeMock, render: renderMock },
 }));
 
 import { MermaidDiagram } from "./mermaid-diagram";

package/src/mermaid-diagram/mermaid-diagram.tsx

@@ -13,7 +13,7 @@
  * never show a diagram never download the engine. Invalid sources render an
  * inline error block (message + source), never a thrown render.
  */
-import { Button, Dialog, DialogContent, DialogTitle } from "@elabs-ai/components-ui";
+import { Button, Dialog, DialogContent, DialogTitle, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { Download, Maximize2 } from "lucide-react";
 import { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from "react";
@@ -67,6 +67,39 @@ const TOKEN_VARS: Record<string, string> = {
 
 let renderSeq = 0;
 
+/**
+ * Serializes every `mermaid.initialize()` + `mermaid.render()` pair across
+ * every `MermaidDiagram` instance on the page.
+ *
+ * The `mermaid` package configures itself through ONE module-level global
+ * (`mermaid.initialize`/`setConfig`) — `render()` takes no per-call config —
+ * so two diagrams rendering concurrently (e.g. under different `data-theme`
+ * scopes, or just two diagrams mounting together) can interleave: instance A
+ * calls `initialize({theme: A})`, then before A's `render()` finishes reading
+ * it, instance B calls `initialize({theme: B})` and A's diagram comes out
+ * themed as B. Routing every render through this queue makes "initialize,
+ * then render" atomic with respect to every other instance.
+ */
+let mermaidRenderQueue: Promise<unknown> = Promise.resolve();
+
+function withMermaidLock<T>(task: () => Promise<T>): Promise<T> {
+  const result = mermaidRenderQueue.then(task, task);
+  // Never let a failed render break the chain for the next caller.
+  mermaidRenderQueue = result.then(
+    () => undefined,
+    () => undefined,
+  );
+  return result;
+}
+
+/**
+ * How long to let `chart` sit unchanged before actually rendering it — a
+ * source streamed in token-by-token (an LLM authoring one live) would
+ * otherwise trigger a full mermaid parse + layout on every partial,
+ * malformed intermediate string.
+ */
+const RENDER_DEBOUNCE_MS = 300;
+
 /**
  * Search-hit strokes for rendered nodes — token-driven, shared by the inline
  * render and the expanded viewer (a `<style>` is document-global wherever it
@@ -127,7 +160,7 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
   function MermaidDiagram(
     {
       chart,
-      label = "Diagram",
+      label: labelProp,
       copyable = true,
       expandable = true,
       highlightTerm,
@@ -137,6 +170,8 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
     },
     ref,
   ) {
+    const { t } = useLocale();
+    const label = labelProp ?? t("editor.mermaidDiagram.label");
     const hostRef = useRef<HTMLDivElement | null>(null);
     const svgHostRef = useRef<HTMLDivElement | null>(null);
     const [svg, setSvg] = useState<string | null>(null);
@@ -151,7 +186,10 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
       a.href = url;
       a.download = `${label.toLowerCase().replace(/[^a-z0-9]+/g, "-") || "diagram"}.svg`;
       a.click();
-      URL.revokeObjectURL(url);
+      // Defer the revoke past the current task: some browsers (Safari) start
+      // the save asynchronously off the click and cancel it if the object URL
+      // is invalidated too early.
+      setTimeout(() => URL.revokeObjectURL(url), 0);
     };
     // Bumped by the observer when the governing data-theme changes.
     const [themeVersion, setThemeVersion] = useState(0);
@@ -173,43 +211,52 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
         setError(null);
         return;
       }
-      (async () => {
-        try {
-          const mermaid = (await import("mermaid")).default;
+      // Debounce: a `chart` fed from a streaming source changes on every
+      // token, and a mermaid parse + layout is not cheap enough to run on
+      // every one of those partial, often-invalid intermediate strings — wait
+      // for the source to sit still for RENDER_DEBOUNCE_MS first.
+      const timer = setTimeout(() => {
+        void withMermaidLock(async () => {
           if (cancelled) return;
-          mermaid.initialize({
-            startOnLoad: false,
-            securityLevel: "strict",
-            suppressErrorRendering: true,
-            theme: "base",
-            themeVariables: resolveThemeVariables(host),
-          });
-          const render = (source: string) => mermaid.render(`brand-mermaid-${++renderSeq}`, source);
-          let out;
           try {
-            out = await render(chart);
-          } catch (firstErr) {
-            // Reserved-keyword node ids ("graph[...]", "end[...]") are the
-            // most common authoring mistake — remediate the id (labels stay)
-            // and retry once instead of failing the reader.
-            const token = offendingToken(
-              firstErr instanceof Error ? firstErr.message : String(firstErr),
-            );
-            const fixed = token ? remediateReservedIds(chart, token) : null;
-            if (!fixed) throw firstErr;
-            out = await render(fixed);
+            const mermaid = (await import("mermaid")).default;
+            if (cancelled) return;
+            mermaid.initialize({
+              startOnLoad: false,
+              securityLevel: "strict",
+              suppressErrorRendering: true,
+              theme: "base",
+              themeVariables: resolveThemeVariables(host),
+            });
+            const render = (source: string) =>
+              mermaid.render(`brand-mermaid-${++renderSeq}`, source);
+            let out;
+            try {
+              out = await render(chart);
+            } catch (firstErr) {
+              // Reserved-keyword node ids ("graph[...]", "end[...]") are the
+              // most common authoring mistake — remediate the id (labels stay)
+              // and retry once instead of failing the reader.
+              const token = offendingToken(
+                firstErr instanceof Error ? firstErr.message : String(firstErr),
+              );
+              const fixed = token ? remediateReservedIds(chart, token) : null;
+              if (!fixed) throw firstErr;
+              out = await render(fixed);
+            }
+            if (cancelled) return;
+            setSvg(out.svg);
+            setError(null);
+          } catch (err) {
+            if (cancelled) return;
+            setSvg(null);
+            setError(err instanceof Error ? err.message : String(err));
           }
-          if (cancelled) return;
-          setSvg(out.svg);
-          setError(null);
-        } catch (err) {
-          if (cancelled) return;
-          setSvg(null);
-          setError(err instanceof Error ? err.message : String(err));
-        }
-      })();
+        });
+      }, RENDER_DEBOUNCE_MS);
       return () => {
         cancelled = true;
+        clearTimeout(timer);
       };
     }, [chart, themeVersion]);
 
@@ -248,7 +295,7 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
               <Button
                 variant="outline"
                 size="icon-sm"
-                aria-label="Expand diagram"
+                aria-label={t("editor.mermaidDiagram.expand")}
                 onClick={() => setExpanded(true)}
               >
                 <Maximize2 className="size-3.5" />
@@ -257,7 +304,7 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
             <Button
               variant="outline"
               size="icon-sm"
-              aria-label="Download diagram as SVG"
+              aria-label={t("editor.mermaidDiagram.downloadSvg")}
               onClick={downloadSvg}
             >
               <Download className="size-3.5" />
@@ -266,7 +313,7 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
               <CopyButton
                 value={chart}
                 label={false}
-                aria-label="Copy diagram source"
+                aria-label={t("editor.mermaidDiagram.copySource")}
                 size="icon-sm"
               />
             ) : null}
@@ -277,7 +324,9 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
             role="alert"
             className="space-y-2 border-s-2 border-s-destructive bg-destructive/10 p-3 text-body"
           >
-            <p className="font-medium text-destructive-text">Diagram failed to render</p>
+            <p className="font-medium text-destructive-text">
+              {t("editor.mermaidDiagram.renderFailed")}
+            </p>
             <p className="text-muted-foreground">{error}</p>
             <pre className="overflow-x-auto rounded bg-muted p-2 font-mono text-code text-foreground">
               {chart}
@@ -298,7 +347,7 @@ export const MermaidDiagram = forwardRef<HTMLDivElement, MermaidDiagramProps>(
         ) : (
           <div
             role="status"
-            aria-label="Rendering diagram…"
+            aria-label={t("editor.mermaidDiagram.rendering")}
             className="h-24 animate-pulse rounded-md bg-surface-muted motion-reduce:animate-none"
           />
         )}

package/src/mermaid-diagram/mermaid-viewer.tsx

@@ -5,7 +5,7 @@
  * drag-pan, fit/100% controls, and a left search panel that filters the
  * RENDERED nodes, highlights every hit and zooms to the selected one.
  */
-import { Button, Input } from "@elabs-ai/components-ui";
+import { Button, Input, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { Maximize, Minus, Plus } from "lucide-react";
 import {
@@ -79,6 +79,7 @@ export function diagramNodeLabel(node: Element): string {
 }
 
 export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
+  const { t } = useLocale();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const stageRef = useRef<HTMLDivElement | null>(null);
   const [transform, setTransform] = useState<Transform>({ scale: 1, tx: 0, ty: 0 });
@@ -188,10 +189,10 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
     if (!container) return;
     userDrivenRef.current = true;
     const rect = container.getBoundingClientRect();
-    setTransform((t) => {
-      const scale = clampScale(t.scale * factor);
-      const px = (clientX - rect.left - t.tx) / t.scale;
-      const py = (clientY - rect.top - t.ty) / t.scale;
+    setTransform((prev) => {
+      const scale = clampScale(prev.scale * factor);
+      const px = (clientX - rect.left - prev.tx) / prev.scale;
+      const py = (clientY - rect.top - prev.ty) / prev.scale;
       return { scale, tx: clientX - rect.left - px * scale, ty: clientY - rect.top - py * scale };
     });
   }, []);
@@ -210,13 +211,13 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
     if (!container || !svgEl || !node) return;
     userDrivenRef.current = true;
     setActiveHit(id);
-    setTransform((t) => {
+    setTransform((prev) => {
       const nodeRect = node.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
       // Node center in svg-space (invert the current transform).
-      const cx = (nodeRect.left + nodeRect.width / 2 - containerRect.left - t.tx) / t.scale;
-      const cy = (nodeRect.top + nodeRect.height / 2 - containerRect.top - t.ty) / t.scale;
-      const scale = clampScale(Math.max(t.scale, 1.25));
+      const cx = (nodeRect.left + nodeRect.width / 2 - containerRect.left - prev.tx) / prev.scale;
+      const cy = (nodeRect.top + nodeRect.height / 2 - containerRect.top - prev.ty) / prev.scale;
+      const scale = clampScale(Math.max(prev.scale, 1.25));
       return {
         scale,
         tx: containerRect.width / 2 - cx * scale,
@@ -239,8 +240,8 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
   const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
     const drag = dragRef.current;
     if (!drag) return;
-    setTransform((t) => ({
-      ...t,
+    setTransform((prev) => ({
+      ...prev,
       tx: drag.tx + (e.clientX - drag.x),
       ty: drag.ty + (e.clientY - drag.y),
     }));
@@ -256,8 +257,8 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
         <Input
           autoFocus
           type="search"
-          placeholder="Find in diagram…"
-          aria-label="Find in diagram"
+          placeholder={t("editor.mermaidViewer.findPlaceholder")}
+          aria-label={t("editor.mermaidViewer.findLabel")}
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           spellCheck={false}
@@ -265,8 +266,8 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
         />
         <p aria-live="polite" className="px-1 pt-1.5 text-meta text-muted-foreground tabular-nums">
           {q.length >= 2
-            ? `${matches.length} ${matches.length === 1 ? "node" : "nodes"}`
-            : `${hits.length} nodes · type to filter`}
+            ? t("editor.mermaidViewer.matchCount", { count: matches.length })
+            : t("editor.mermaidViewer.nodeCountHint", { count: hits.length })}
         </p>
         <ul className="m-0 mt-1 min-h-0 flex-1 list-none overflow-auto p-0">
           {(q.length >= 2 ? matches : hits).map((hit) => (
@@ -297,7 +298,7 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
           <Button
             variant="outline"
             size="icon-sm"
-            aria-label="Zoom out"
+            aria-label={t("editor.mermaidViewer.zoomOut")}
             onClick={() => zoomCenter(1 / 1.25)}
           >
             <Minus className="size-3.5" />
@@ -305,7 +306,7 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
           <Button
             variant="outline"
             size="icon-sm"
-            aria-label="Zoom in"
+            aria-label={t("editor.mermaidViewer.zoomIn")}
             onClick={() => zoomCenter(1.25)}
           >
             <Plus className="size-3.5" />
@@ -314,10 +315,10 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
             variant="outline"
             size="sm"
             className="h-7 px-2 font-mono text-meta tabular-nums"
-            aria-label="Reset zoom to 100%"
+            aria-label={t("editor.mermaidViewer.resetZoom")}
             onClick={() => {
               userDrivenRef.current = true;
-              setTransform((t) => ({ ...t, scale: 1 }));
+              setTransform((prev) => ({ ...prev, scale: 1 }));
             }}
           >
             {Math.round(transform.scale * 100)}%
@@ -325,7 +326,7 @@ export function MermaidViewer({ svg, label }: { svg: string; label: string }) {
           <Button
             variant="outline"
             size="icon-sm"
-            aria-label="Fit diagram"
+            aria-label={t("editor.mermaidViewer.fitDiagram")}
             onClick={() => {
               // An explicit fit hands control back: keep fitting on resize.
               userDrivenRef.current = false;

package/src/monaco.ts

@@ -0,0 +1,21 @@
+"use client";
+
+/**
+ * The `monaco-editor` namespace, as its own subpath (ADR 0006 subpath exports).
+ *
+ * The root barrel (`.`) exports lightweight chrome — `CopyButton`,
+ * `EDITOR_LANGUAGES`, `languageLabel` — that a consumer should be able to
+ * import WITHOUT pulling Monaco in at all: the editing surfaces
+ * (`CodeEditor`, `DiffEditor`, `MarkdownEditor`) already own lazy-loading the
+ * engine themselves. Re-exporting the whole `monaco-editor` namespace from
+ * that SAME barrel defeated that split — `import { CopyButton } from
+ * "@elabs-ai/components-editor"` pulled megabytes of Monaco and touched
+ * browser globals at import time, breaking SSR/RSC for a component that never
+ * renders the editor.
+ *
+ * A consumer that needs to build a custom editor, or wire Monaco commands
+ * directly, imports this subpath instead:
+ *
+ *   import { monaco } from "@elabs-ai/components-editor/monaco";
+ */
+export * as monaco from "monaco-editor";