@glyphjs/components 0.3.0 → 0.5.1

package/dist/index.js

@@ -1,6 +1,6 @@
 import { accordionSchema, annotateSchema, architectureSchema, calloutSchema, cardSchema, chartSchema, codediffSchema, comparisonSchema, equationSchema, filetreeSchema, flowchartSchema, formSchema, graphSchema, infographicSchema, kanbanSchema, kpiSchema, matrixSchema, mindmapSchema, pollSchema, quizSchema, rankerSchema, ratingSchema, relationSchema, sequenceSchema, sliderSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema } from '@glyphjs/schemas';
 import { RichText } from '@glyphjs/runtime';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import * as d32 from 'd3';
 import { scaleTime, scaleOrdinal } from 'd3';
@@ -50,7 +50,7 @@ function Callout({ data }) {
   return /* @__PURE__ */ jsxs("div", { role: "note", "aria-label": CALLOUT_LABELS[type], style: containerStyle11, children: [
     /* @__PURE__ */ jsx("span", { style: iconStyle, "aria-hidden": "true", children: CALLOUT_ICONS[type] }),
     /* @__PURE__ */ jsxs("div", { style: bodyStyle3, children: [
-      title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: title }),
+      title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: /* @__PURE__ */ jsx(RichText, { content: title }) }),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RichText, { content }) })
     ] })
   ] });
@@ -62,6 +62,34 @@ var calloutDefinition = {
   schema: calloutSchema,
   render: Callout
 };
+
+// src/utils/inlineToText.ts
+function inlineToText(content) {
+  if (typeof content === "string") {
+    return content;
+  }
+  return content.map((node) => {
+    switch (node.type) {
+      case "text":
+        return node.value;
+      case "strong":
+      case "emphasis":
+      case "delete":
+      case "link":
+        return inlineToText(node.children);
+      case "inlineCode":
+        return node.value;
+      case "image":
+        return node.alt ?? "";
+      case "break":
+        return "\n";
+      default:
+        return "";
+    }
+  }).join("");
+}
+
+// src/chart/render.ts
 var DEFAULT_WIDTH = 600;
 var DEFAULT_HEIGHT = 400;
 var MARGIN = { top: 20, right: 30, bottom: 50, left: 60 };
@@ -109,7 +137,7 @@ function renderAxes(g, xScale, yScale, xAxisConfig, yAxisConfig, innerWidth, inn
   }
   xAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, #1a2035)");
   if (xAxisConfig?.label) {
-    g.append("text").attr("class", "x-label").attr("x", innerWidth / 2).attr("y", innerHeight + MARGIN.bottom - 6).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(xAxisConfig.label);
+    g.append("text").attr("class", "x-label").attr("x", innerWidth / 2).attr("y", innerHeight + MARGIN.bottom - 6).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(inlineToText(xAxisConfig.label));
   }
   const yAxisG = g.append("g").attr("class", "y-axis");
   yAxisG.call(
@@ -117,7 +145,7 @@ function renderAxes(g, xScale, yScale, xAxisConfig, yAxisConfig, innerWidth, inn
   );
   yAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, #1a2035)");
   if (yAxisConfig?.label) {
-    g.append("text").attr("class", "y-label").attr("transform", "rotate(-90)").attr("x", -innerHeight / 2).attr("y", -MARGIN.left + 14).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(yAxisConfig.label);
+    g.append("text").attr("class", "y-label").attr("transform", "rotate(-90)").attr("x", -innerHeight / 2).attr("y", -MARGIN.left + 14).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(inlineToText(yAxisConfig.label));
   }
 }
 function renderGridLines(g, yScale, innerWidth) {
@@ -173,7 +201,7 @@ function renderLegend(sel, series, marginLeft, marginTop, fontSize = "12px") {
     const color3 = COLOR_SCHEME[i % COLOR_SCHEME.length] ?? "var(--glyph-text, #1a2035)";
     const row = legendG.append("g").attr("transform", `translate(0,${String(i * 20)})`);
     row.append("rect").attr("width", 14).attr("height", 14).attr("fill", color3).attr("rx", 2);
-    row.append("text").attr("x", 20).attr("y", 11).attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", fontSize).text(s.name);
+    row.append("text").attr("x", 20).attr("y", 11).attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", fontSize).text(inlineToText(s.name));
   });
 }
 function ChartAccessibleTable({
@@ -204,10 +232,10 @@ function ChartAccessibleTable({
           " chart data"
         ] }),
         series.map((s, si) => /* @__PURE__ */ jsxs("tbody", { children: [
-          /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { colSpan: 2, children: s.name }) }),
+          /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { colSpan: 2, children: inlineToText(s.name) }) }),
           /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { children: xLabel ?? xKey }),
-            /* @__PURE__ */ jsx("th", { children: yLabel ?? yKey })
+            /* @__PURE__ */ jsx("th", { children: xLabel ? inlineToText(xLabel) : xKey }),
+            /* @__PURE__ */ jsx("th", { children: yLabel ? inlineToText(yLabel) : yKey })
           ] }),
           s.data.map((d, di) => /* @__PURE__ */ jsxs("tr", { children: [
             /* @__PURE__ */ jsx("td", { children: String(d[xKey] ?? "") }),
@@ -258,6 +286,7 @@ function renderAllSeries(g, type, series, scales, xKey, yKey, showTooltip, hideT
   const { xScale, xScalePoint, yScale, innerHeight } = scales;
   series.forEach((s, i) => {
     const color3 = COLOR_SCHEME[i % COLOR_SCHEME.length] ?? "#333";
+    const seriesName = inlineToText(s.name);
     switch (type) {
       case "line":
         renderLineSeries(
@@ -269,7 +298,7 @@ function renderAllSeries(g, type, series, scales, xKey, yKey, showTooltip, hideT
           xKey,
           color3,
           i,
-          s.name,
+          seriesName,
           showTooltip,
           hideTooltip
         );
@@ -285,7 +314,7 @@ function renderAllSeries(g, type, series, scales, xKey, yKey, showTooltip, hideT
           innerHeight,
           color3,
           i,
-          s.name,
+          seriesName,
           showTooltip,
           hideTooltip
         );
@@ -302,7 +331,7 @@ function renderAllSeries(g, type, series, scales, xKey, yKey, showTooltip, hideT
           i,
           series.length,
           innerHeight,
-          s.name,
+          seriesName,
           showTooltip,
           hideTooltip
         );
@@ -315,7 +344,7 @@ function renderAllSeries(g, type, series, scales, xKey, yKey, showTooltip, hideT
           xScalePoint,
           yScale,
           scales.innerWidth,
-          s.name,
+          seriesName,
           showTooltip,
           hideTooltip
         );
@@ -695,7 +724,7 @@ function TableHead({
             whiteSpace: "nowrap"
           },
           children: [
-            col.label,
+            /* @__PURE__ */ jsx(RichText, { content: col.label }),
             col.sortable ? sortIndicator(direction) : ""
           ]
         },
@@ -1021,7 +1050,7 @@ function Tabs({ data, block, onInteraction }) {
                     outline: "revert",
                     outlineOffset: "2px"
                   },
-                  children: tab.label
+                  children: /* @__PURE__ */ jsx(RichText, { content: tab.label })
                 },
                 tabId
               );
@@ -1047,7 +1076,7 @@ function Tabs({ data, block, onInteraction }) {
                 color: "var(--glyph-heading, #0a0e1a)",
                 lineHeight: 1.6
               },
-              children: tab.content
+              children: /* @__PURE__ */ jsx(RichText, { content: tab.content })
             },
             panelId
           );
@@ -1298,6 +1327,92 @@ var timelineDefinition = {
   schema: timelineSchema,
   render: Timeline
 };
+
+// src/utils/measureText.ts
+var measurementCache = /* @__PURE__ */ new WeakMap();
+function measurePlainText(text, style) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    const avgCharWidth = parseInt(style.fontSize) * 0.6;
+    return {
+      width: text.length * avgCharWidth,
+      height: parseInt(style.fontSize) * 1.2
+    };
+  }
+  const fontWeight = style.fontWeight ?? "normal";
+  ctx.font = `${fontWeight} ${style.fontSize} ${style.fontFamily}`;
+  const metrics = ctx.measureText(text);
+  const width = metrics.width;
+  const height = parseInt(style.fontSize) * 1.2;
+  return { width, height };
+}
+function measureHtmlText(content, style) {
+  const cached = measurementCache.get(content);
+  if (cached) {
+    return cached;
+  }
+  const container = document.createElement("div");
+  container.style.position = "absolute";
+  container.style.visibility = "hidden";
+  container.style.left = "-9999px";
+  container.style.top = "-9999px";
+  container.style.fontSize = style.fontSize;
+  container.style.fontFamily = style.fontFamily;
+  container.style.fontWeight = style.fontWeight ?? "normal";
+  container.style.whiteSpace = "pre-wrap";
+  container.style.wordBreak = "break-word";
+  if (style.maxWidth) {
+    container.style.maxWidth = `${style.maxWidth}px`;
+  }
+  container.innerHTML = inlineNodesToHtml(content);
+  document.body.appendChild(container);
+  const rect = container.getBoundingClientRect();
+  const dimensions = {
+    width: Math.ceil(rect.width),
+    height: Math.ceil(rect.height)
+  };
+  document.body.removeChild(container);
+  measurementCache.set(content, dimensions);
+  return dimensions;
+}
+function inlineNodesToHtml(nodes) {
+  return nodes.map((node) => {
+    switch (node.type) {
+      case "text":
+        return escapeHtml(node.value);
+      case "strong":
+        return `<strong>${inlineNodesToHtml(node.children)}</strong>`;
+      case "emphasis":
+        return `<em>${inlineNodesToHtml(node.children)}</em>`;
+      case "delete":
+        return `<del>${inlineNodesToHtml(node.children)}</del>`;
+      case "inlineCode":
+        return `<code>${escapeHtml(node.value)}</code>`;
+      case "link":
+        return `<a href="${escapeHtml(node.url)}">${inlineNodesToHtml(node.children)}</a>`;
+      case "image":
+        return `<img src="${escapeHtml(node.src)}" alt="${escapeHtml(node.alt ?? "")}" />`;
+      case "break":
+        return "<br />";
+      default:
+        return "";
+    }
+  }).join("");
+}
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+function measureText(content, style) {
+  if (typeof content === "string") {
+    return measurePlainText(content, style);
+  }
+  return measureHtmlText(content, style);
+}
+
+// src/graph/layout.ts
 var RANKDIR_MAP = {
   "top-down": "TB",
   "left-right": "LR",
@@ -1320,10 +1435,17 @@ function computeDagreLayout(nodes, edges, direction = "top-down") {
   });
   g.setDefaultEdgeLabel(() => ({}));
   for (const node of nodes) {
+    const labelDimensions = measureText(node.label, {
+      fontSize: "13px",
+      fontFamily: "Inter, system-ui, sans-serif",
+      maxWidth: 200
+    });
+    const nodeWidth = Math.max(120, Math.min(250, labelDimensions.width + 40));
+    const nodeHeight = Math.max(40, labelDimensions.height + 20);
     g.setNode(node.id, {
       label: node.label,
-      width: DEFAULT_NODE_WIDTH,
-      height: DEFAULT_NODE_HEIGHT
+      width: nodeWidth,
+      height: nodeHeight
     });
   }
   for (const edge of edges) {
@@ -1430,6 +1552,326 @@ function computeForceLayout(nodes, edges) {
     height: maxY + LAYOUT_PADDING
   };
 }
+function useZoomInteraction({
+  svgRef,
+  rootRef,
+  interactionMode
+}) {
+  const [isActive, setIsActive] = useState(interactionMode === "always");
+  const [hasAttemptedScroll, setHasAttemptedScroll] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    setIsActive(interactionMode === "always");
+    setHasAttemptedScroll(false);
+  }, [interactionMode]);
+  const filterFunction = useCallback(
+    (event) => {
+      if (interactionMode === "always") {
+        return true;
+      }
+      if (interactionMode === "modifier-key") {
+        if (event.type === "mousedown") return true;
+        if (event.type === "wheel") {
+          const wheelEvent = event;
+          const hasModifier = wheelEvent.altKey;
+          if (!hasModifier && !hasAttemptedScroll) {
+            setHasAttemptedScroll(true);
+            setTimeout(() => setHasAttemptedScroll(false), 3e3);
+          }
+          return hasModifier;
+        }
+        return true;
+      }
+      if (interactionMode === "click-to-activate") {
+        return isActive;
+      }
+      return true;
+    },
+    [interactionMode, isActive, hasAttemptedScroll]
+  );
+  useEffect(() => {
+    if (interactionMode !== "modifier-key" || !svgRef.current) return;
+    const svg = svgRef.current;
+    const container = svg.parentElement;
+    if (!container) return;
+    const handleWheel = (event) => {
+      const target = event.target;
+      if (event.altKey && svg.contains(target)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false, capture: true });
+    return () => {
+      container.removeEventListener("wheel", handleWheel, { capture: true });
+    };
+  }, [interactionMode, svgRef]);
+  const zoomBehavior = useMemo(() => {
+    const zoom3 = d32.zoom().scaleExtent([0.1, 4]);
+    if (typeof zoom3.filter === "function") {
+      zoom3.filter(filterFunction);
+    }
+    zoom3.on("zoom", (event) => {
+      if (rootRef.current) {
+        d32.select(rootRef.current).attr("transform", event.transform.toString());
+      }
+    });
+    return zoom3;
+  }, [filterFunction, rootRef]);
+  const handleActivate = useCallback(() => {
+    if (interactionMode === "click-to-activate") {
+      setIsActive(true);
+    }
+  }, [interactionMode]);
+  useEffect(() => {
+    if (interactionMode !== "click-to-activate" || !isActive) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsActive(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [interactionMode, isActive]);
+  useEffect(() => {
+    if (interactionMode !== "click-to-activate" || !isActive) return;
+    const handleClickOutside = (e) => {
+      const container = svgRef.current?.parentElement;
+      if (container && !container.contains(e.target)) {
+        setIsActive(false);
+      }
+    };
+    document.addEventListener("click", handleClickOutside, true);
+    return () => document.removeEventListener("click", handleClickOutside, true);
+  }, [interactionMode, isActive, svgRef]);
+  useEffect(() => {
+    if (svgRef.current) {
+      containerRef.current = svgRef.current.parentElement;
+    }
+  }, [svgRef]);
+  const overlayProps = useMemo(() => {
+    if (interactionMode === "always") return null;
+    if (interactionMode === "modifier-key" && !hasAttemptedScroll) return null;
+    if (interactionMode === "click-to-activate" && isActive) return null;
+    return {
+      mode: interactionMode,
+      isActive,
+      onActivate: handleActivate,
+      width: "100%",
+      height: "100%"
+    };
+  }, [interactionMode, isActive, hasAttemptedScroll, handleActivate]);
+  const zoomIn = useCallback(() => {
+    if (!svgRef.current) return;
+    d32.select(svgRef.current).transition().duration(300).call(zoomBehavior.scaleBy, 1.3);
+  }, [svgRef, zoomBehavior]);
+  const zoomOut = useCallback(() => {
+    if (!svgRef.current) return;
+    d32.select(svgRef.current).transition().duration(300).call(zoomBehavior.scaleBy, 1 / 1.3);
+  }, [svgRef, zoomBehavior]);
+  const resetZoom = useCallback(() => {
+    if (!svgRef.current) return;
+    d32.select(svgRef.current).transition().duration(300).call(zoomBehavior.transform, d32.zoomIdentity);
+  }, [svgRef, zoomBehavior]);
+  return {
+    isActive,
+    overlayProps,
+    zoomBehavior,
+    zoomIn,
+    zoomOut,
+    resetZoom
+  };
+}
+function InteractionOverlay({
+  mode,
+  isActive,
+  onActivate,
+  width,
+  height
+}) {
+  if (mode === "modifier-key") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "glyph-interaction-overlay",
+        style: {
+          ...OVERLAY_BASE_STYLE,
+          width,
+          height,
+          pointerEvents: "none"
+        },
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("div", { style: TOOLTIP_STYLE, children: /* @__PURE__ */ jsx("span", { style: TOOLTIP_TEXT_STYLE, children: "Alt + scroll to zoom" }) })
+      }
+    );
+  }
+  if (mode === "click-to-activate" && !isActive) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "glyph-interaction-overlay",
+          style: {
+            ...OVERLAY_BASE_STYLE,
+            ...ACTIVATION_OVERLAY_STYLE,
+            width,
+            height
+          },
+          onClick: onActivate,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "Click to activate graph interaction",
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onActivate();
+            }
+          },
+          children: /* @__PURE__ */ jsx("div", { style: ACTIVATION_TEXT_STYLE, children: "Click to interact" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: SR_ONLY_STYLE, role: "status", "aria-live": "polite", "aria-atomic": "true", children: "Graph interaction inactive. Click to activate." })
+    ] });
+  }
+  if (mode === "click-to-activate" && isActive) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...OVERLAY_BASE_STYLE,
+            width,
+            height,
+            pointerEvents: "none",
+            border: "2px solid var(--glyph-interaction-active-border, #0a9d7c)",
+            borderRadius: "4px"
+          },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: SR_ONLY_STYLE, role: "status", "aria-live": "polite", "aria-atomic": "true", children: "Graph interaction active. Press Escape to deactivate." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {});
+}
+var OVERLAY_BASE_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 10
+};
+var TOOLTIP_STYLE = {
+  position: "absolute",
+  bottom: "12px",
+  right: "12px",
+  padding: "6px 10px",
+  backgroundColor: "var(--glyph-interaction-tooltip-bg, rgba(26, 32, 53, 0.9))",
+  color: "var(--glyph-interaction-tooltip-text, #f4f6fa)",
+  borderRadius: "4px",
+  fontSize: "12px",
+  fontFamily: "Inter, system-ui, sans-serif",
+  fontWeight: 500,
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+  pointerEvents: "none"
+};
+var TOOLTIP_TEXT_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: "4px"
+};
+var ACTIVATION_OVERLAY_STYLE = {
+  backgroundColor: "var(--glyph-interaction-overlay-bg, rgba(244, 246, 250, 0.8))",
+  cursor: "pointer",
+  transition: "background-color 0.2s ease"
+};
+var ACTIVATION_TEXT_STYLE = {
+  padding: "12px 20px",
+  backgroundColor: "var(--glyph-interaction-tooltip-bg, rgba(26, 32, 53, 0.9))",
+  color: "var(--glyph-interaction-tooltip-text, #f4f6fa)",
+  borderRadius: "6px",
+  fontSize: "14px",
+  fontFamily: "Inter, system-ui, sans-serif",
+  fontWeight: 500,
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)"
+};
+var SR_ONLY_STYLE = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function ZoomControls({ onZoomIn, onZoomOut, onReset }) {
+  return /* @__PURE__ */ jsxs("div", { style: CONTROLS_CONTAINER_STYLE, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onZoomIn,
+        style: BUTTON_STYLE,
+        "aria-label": "Zoom in",
+        title: "Zoom in",
+        type: "button",
+        children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", children: [
+          /* @__PURE__ */ jsx("line", { x1: "8", y1: "4", x2: "8", y2: "12", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx("line", { x1: "4", y1: "8", x2: "12", y2: "8", strokeWidth: "2" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onZoomOut,
+        style: BUTTON_STYLE,
+        "aria-label": "Zoom out",
+        title: "Zoom out",
+        type: "button",
+        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx("line", { x1: "4", y1: "8", x2: "12", y2: "8", strokeWidth: "2" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onReset,
+        style: BUTTON_STYLE,
+        "aria-label": "Reset zoom",
+        title: "Reset zoom",
+        type: "button",
+        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "10", height: "10", strokeWidth: "2", rx: "1" }) })
+      }
+    )
+  ] });
+}
+var CONTROLS_CONTAINER_STYLE = {
+  position: "absolute",
+  top: "12px",
+  right: "12px",
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+  zIndex: 10
+};
+var BUTTON_STYLE = {
+  width: "32px",
+  height: "32px",
+  padding: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "var(--glyph-surface-raised, #f4f6fa)",
+  border: "1px solid var(--glyph-border, #d0d8e4)",
+  borderRadius: "4px",
+  color: "var(--glyph-text, #1a2035)",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
+};
 var GROUP_PALETTE = [
   "#00d4aa",
   // cyan-green
@@ -1476,7 +1918,7 @@ function getThemeVar(container, varName, fallback) {
   return getComputedStyle(container).getPropertyValue(varName).trim() || fallback;
 }
 var ARROW_MARKER_ID = "glyph-graph-arrowhead";
-function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, onNodeClick) {
+function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, zoomBehavior, onNodeClick) {
   const svg = d32.select(svgElement);
   svg.selectAll("*").remove();
   const width = Math.max(layout.width, 200);
@@ -1489,9 +1931,6 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, o
   const nodeStrokeWidth = getThemeVar(container, "--glyph-node-stroke-width", "1.5");
   const nodeFillOpacity = getThemeVar(container, "--glyph-node-fill-opacity", "0.85");
   const root = svg.append("g").attr("class", "glyph-graph-root");
-  const zoomBehavior = d32.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
-    root.attr("transform", event.transform.toString());
-  });
   svg.call(zoomBehavior);
   const navigableNodes = /* @__PURE__ */ new Set();
   const refByAnchor = /* @__PURE__ */ new Map();
@@ -1509,7 +1948,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, o
     if (edge.label) {
       const mid = edge.points[Math.floor(edge.points.length / 2)];
       if (mid) {
-        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-edge-color, #6b7a94)").text(edge.label);
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-edge-color, #6b7a94)").text(inlineToText(edge.label));
       }
     }
   }
@@ -1526,7 +1965,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, o
     } else {
       nodeG.append("rect").attr("x", nodeX).attr("y", nodeY).attr("width", node.width).attr("height", node.height).attr("rx", nodeRadius).attr("ry", nodeRadius).attr("fill", node.style?.["fill"] ?? color3).attr("stroke", node.style?.["stroke"] ?? defaultStroke).attr("stroke-width", node.style?.["stroke-width"] ?? nodeStrokeWidth).attr("opacity", nodeFillOpacity);
     }
-    nodeG.append("text").attr("x", node.x).attr("y", node.y).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-node-label-color, #fff)").attr("pointer-events", "none").text(node.label);
+    nodeG.append("text").attr("x", node.x).attr("y", node.y).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-node-label-color, #fff)").attr("pointer-events", "none").text(inlineToText(node.label));
     if (isNavigable || onNodeClick) {
       nodeG.attr("cursor", "pointer");
       nodeG.on("click", () => {
@@ -1534,7 +1973,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, o
           const ref = refByAnchor.get(node.id);
           if (ref) onNavigate(ref);
         }
-        onNodeClick?.(node.id, node.label);
+        onNodeClick?.(node.id, inlineToText(node.label));
       });
     }
   }
@@ -1548,6 +1987,7 @@ function Graph({
   container
 }) {
   const svgRef = useRef(null);
+  const rootRef = useRef(null);
   const groupIndex = useRef(/* @__PURE__ */ new Map());
   const layoutResult = useMemo(() => {
     const direction = resolveLayout(data);
@@ -1556,6 +1996,12 @@ function Graph({
     }
     return computeDagreLayout(data.nodes, data.edges, direction);
   }, [data]);
+  const { overlayProps, zoomBehavior, zoomIn, zoomOut, resetZoom } = useZoomInteraction({
+    svgRef,
+    rootRef,
+    interactionMode: data.interactionMode ?? "modifier-key",
+    blockId: block.id
+  });
   const handleNodeClick = useMemo(() => {
     if (!onInteraction) return void 0;
     return (nodeId, nodeLabel) => {
@@ -1576,27 +2022,36 @@ function Graph({
       groupIndex.current,
       outgoingRefs,
       onNavigate,
+      zoomBehavior,
       handleNodeClick
     );
-  }, [layoutResult, outgoingRefs, onNavigate, handleNodeClick]);
+    const rootElement = svgRef.current.querySelector(".glyph-graph-root");
+    if (rootElement) {
+      rootRef.current = rootElement;
+    }
+  }, [layoutResult, outgoingRefs, onNavigate, zoomBehavior, handleNodeClick]);
   const ariaLabel = `${data.type} graph with ${data.nodes.length} nodes and ${data.edges.length} edges`;
   return /* @__PURE__ */ jsxs("div", { className: "glyph-graph-container", children: [
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        ref: svgRef,
-        role: "img",
-        "aria-label": ariaLabel,
-        width: "100%",
-        height: "100%",
-        style: {
-          minHeight: container.tier === "compact" ? 200 : 300,
-          maxHeight: container.tier === "compact" ? 500 : 700,
-          display: "block"
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: svgRef,
+          role: "img",
+          "aria-label": ariaLabel,
+          width: "100%",
+          height: "100%",
+          style: {
+            minHeight: container.tier === "compact" ? 200 : 300,
+            maxHeight: container.tier === "compact" ? 500 : 700,
+            display: "block"
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Graph data", style: SR_ONLY_STYLE, children: [
+      ),
+      overlayProps && /* @__PURE__ */ jsx(InteractionOverlay, { ...overlayProps }),
+      /* @__PURE__ */ jsx(ZoomControls, { onZoomIn: zoomIn, onZoomOut: zoomOut, onReset: resetZoom })
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Graph data", style: SR_ONLY_STYLE2, children: [
       /* @__PURE__ */ jsx("caption", { children: "Graph nodes and connections" }),
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { scope: "col", children: "Node" }),
@@ -1610,7 +2065,7 @@ function Graph({
           return `${dir} ${target}${e.label ? ` (${e.label})` : ""}`;
         }).join(", ");
         return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { children: node.label }),
+          /* @__PURE__ */ jsx("td", { children: inlineToText(node.label) }),
           /* @__PURE__ */ jsx("td", { children: node.group ?? "" }),
           /* @__PURE__ */ jsx("td", { children: connections })
         ] }, node.id);
@@ -1618,7 +2073,7 @@ function Graph({
     ] })
   ] });
 }
-var SR_ONLY_STYLE = {
+var SR_ONLY_STYLE2 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -1644,14 +2099,20 @@ var NODE_SEP2 = 60;
 var RANK_SEP2 = 80;
 var EDGE_SEP2 = 10;
 var LAYOUT_PADDING2 = 40;
-var CHAR_WIDTH = 7.5;
 function computeEntitySize(entity) {
   const attrs = entity.attributes ?? [];
   const height = ENTITY_HEADER_HEIGHT + attrs.length * ENTITY_ATTR_HEIGHT + ENTITY_PADDING;
-  let maxTextWidth = entity.label.length * (CHAR_WIDTH + 1);
+  const labelDimensions = measureText(entity.label, {
+    fontSize: "14px",
+    fontFamily: "Inter, system-ui, sans-serif"
+  });
+  let maxTextWidth = labelDimensions.width;
   for (const attr of attrs) {
-    const attrText = `${attr.name}: ${attr.type}`;
-    maxTextWidth = Math.max(maxTextWidth, attrText.length * CHAR_WIDTH);
+    const attrNameDimensions = measureText(attr.name, {
+      fontSize: "12px",
+      fontFamily: "ui-monospace, monospace"
+    });
+    maxTextWidth = Math.max(maxTextWidth, attrNameDimensions.width + 100);
   }
   const width = Math.max(ENTITY_MIN_WIDTH, maxTextWidth + ENTITY_PADDING * 2 + 16);
   return { width, height };
@@ -1742,16 +2203,13 @@ function drawCrowsFoot(g, x, y, angle, symbol) {
     g.append("line").attr("x1", tx - Math.cos(perpAngle) * halfLen).attr("y1", ty - Math.sin(perpAngle) * halfLen).attr("x2", tx + Math.cos(perpAngle) * halfLen).attr("y2", ty + Math.sin(perpAngle) * halfLen).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
   }
 }
-function renderRelation(svgElement, layout) {
+function renderRelation(svgElement, layout, zoomBehavior) {
   const svg = d32.select(svgElement);
   svg.selectAll("*").remove();
   const width = Math.max(layout.width, 200);
   const height = Math.max(layout.height, 200);
   svg.attr("viewBox", `0 0 ${width} ${height}`);
   const root = svg.append("g").attr("class", "glyph-relation-root");
-  const zoomBehavior = d32.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
-    root.attr("transform", event.transform.toString());
-  });
   svg.call(zoomBehavior);
   const entityMap = /* @__PURE__ */ new Map();
   for (const entity of layout.entities) {
@@ -1778,7 +2236,7 @@ function renderRelation(svgElement, layout) {
     if (rel.label) {
       const mid = rel.points[Math.floor(rel.points.length / 2)];
       if (mid) {
-        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 10).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-label, #6b7a94)").text(rel.label);
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 10).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-label, #6b7a94)").text(inlineToText(rel.label));
       }
     }
     const pFirst = rel.points[0];
@@ -1806,7 +2264,7 @@ function renderRelation(svgElement, layout) {
     const headerHeight = ENTITY_HEADER_HEIGHT;
     entityG.append("rect").attr("x", x).attr("y", y).attr("width", entity.width).attr("height", headerHeight).attr("rx", 4).attr("ry", 4).attr("fill", "var(--glyph-relation-header-bg, #00d4aa)");
     entityG.append("rect").attr("x", x).attr("y", y + headerHeight - 4).attr("width", entity.width).attr("height", 4).attr("fill", "var(--glyph-relation-header-bg, #00d4aa)");
-    entityG.append("text").attr("x", entity.x).attr("y", y + headerHeight / 2).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-weight", "bold").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-header-text, #fff)").text(entity.label);
+    entityG.append("text").attr("x", entity.x).attr("y", y + headerHeight / 2).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-weight", "bold").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-header-text, #fff)").text(inlineToText(entity.label));
     if (attrs.length > 0) {
       entityG.append("line").attr("x1", x).attr("y1", y + headerHeight).attr("x2", x + entity.width).attr("y2", y + headerHeight).attr("stroke", "var(--glyph-relation-entity-border, #a8b5c8)").attr("stroke-width", 1);
     }
@@ -1815,7 +2273,7 @@ function renderRelation(svgElement, layout) {
       if (!attr) continue;
       const attrY = y + headerHeight + i * ENTITY_ATTR_HEIGHT + ENTITY_ATTR_HEIGHT / 2 + 4;
       const textEl = entityG.append("text").attr("x", x + ENTITY_PADDING).attr("y", attrY).attr("dy", "0.35em").attr("font-size", "12px").attr("font-family", "system-ui, -apple-system, monospace").attr("fill", "var(--glyph-relation-attr-text, #1a2035)");
-      const nameSpan = textEl.append("tspan").text(attr.name);
+      const nameSpan = textEl.append("tspan").text(inlineToText(attr.name));
       if (attr.primaryKey) {
         nameSpan.attr("font-weight", "bold").attr("text-decoration", "underline");
       }
@@ -1823,29 +2281,44 @@ function renderRelation(svgElement, layout) {
     }
   }
 }
-function Relation({ data }) {
+function Relation({ data, block }) {
   const svgRef = useRef(null);
+  const rootRef = useRef(null);
   const layoutResult = useMemo(() => {
     return computeRelationLayout(data);
   }, [data]);
+  const { overlayProps, zoomBehavior, zoomIn, zoomOut, resetZoom } = useZoomInteraction({
+    svgRef,
+    rootRef,
+    interactionMode: data.interactionMode ?? "modifier-key",
+    blockId: block.id
+  });
   useEffect(() => {
     if (!svgRef.current) return;
-    renderRelation(svgRef.current, layoutResult);
-  }, [layoutResult]);
+    renderRelation(svgRef.current, layoutResult, zoomBehavior);
+    const rootElement = svgRef.current.querySelector(".glyph-relation-root");
+    if (rootElement) {
+      rootRef.current = rootElement;
+    }
+  }, [layoutResult, zoomBehavior]);
   const ariaLabel = `Entity-relationship diagram with ${data.entities.length} entities and ${data.relationships.length} relationships`;
   return /* @__PURE__ */ jsxs("div", { className: "glyph-relation-container", children: [
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        ref: svgRef,
-        role: "img",
-        "aria-label": ariaLabel,
-        width: "100%",
-        height: "100%",
-        style: { minHeight: 300, maxHeight: 700, display: "block" }
-      }
-    ),
-    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Entity-relationship data", style: SR_ONLY_STYLE2, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: svgRef,
+          role: "img",
+          "aria-label": ariaLabel,
+          width: "100%",
+          height: "100%",
+          style: { minHeight: 300, maxHeight: 700, display: "block" }
+        }
+      ),
+      overlayProps && /* @__PURE__ */ jsx(InteractionOverlay, { ...overlayProps }),
+      /* @__PURE__ */ jsx(ZoomControls, { onZoomIn: zoomIn, onZoomOut: zoomOut, onReset: resetZoom })
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Entity-relationship data", style: SR_ONLY_STYLE3, children: [
       /* @__PURE__ */ jsx("caption", { children: "Entities and relationships" }),
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { scope: "col", children: "Entity" }),
@@ -1860,7 +2333,7 @@ function Relation({ data }) {
           return `${dir} ${target} [${r.cardinality}]${r.label ? ` (${r.label})` : ""}`;
         }).join(", ");
         return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { children: entity.label }),
+          /* @__PURE__ */ jsx("td", { children: inlineToText(entity.label) }),
           /* @__PURE__ */ jsx("td", { children: attrs }),
           /* @__PURE__ */ jsx("td", { children: rels })
         ] }, entity.id);
@@ -1868,7 +2341,7 @@ function Relation({ data }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE2 = {
+var SR_ONLY_STYLE3 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -2398,9 +2871,9 @@ function CodeDiff({ data, block }) {
   }
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": summary, style: containerStyle11, children: [
     (beforeLabel || afterLabel) && /* @__PURE__ */ jsxs("div", { style: labelBarStyle, children: [
-      beforeLabel && /* @__PURE__ */ jsx("span", { children: beforeLabel }),
+      beforeLabel && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RichText, { content: beforeLabel }) }),
       beforeLabel && afterLabel && /* @__PURE__ */ jsx("span", { children: "\u2192" }),
-      afterLabel && /* @__PURE__ */ jsx("span", { children: afterLabel })
+      afterLabel && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RichText, { content: afterLabel }) })
     ] }),
     /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx("table", { role: "grid", style: tableStyle2, children: /* @__PURE__ */ jsx("tbody", { children: diffLines.map((line6, i) => /* @__PURE__ */ jsxs(
       "tr",
@@ -2504,7 +2977,7 @@ function renderNodeShape(nodeG, node, fillOpacity, strokeWidth) {
     }
   }
 }
-function renderFlowchart(svgElement, layout) {
+function renderFlowchart(svgElement, layout, zoomBehavior) {
   const svg = d32.select(svgElement);
   svg.selectAll("*").remove();
   const width = Math.max(layout.width, 200);
@@ -2516,9 +2989,6 @@ function renderFlowchart(svgElement, layout) {
   const nodeStrokeWidth = getThemeVar2(container, "--glyph-node-stroke-width", "1.5");
   const nodeFillOpacity = getThemeVar2(container, "--glyph-node-fill-opacity", "0.85");
   const root = svg.append("g").attr("class", "glyph-flowchart-root");
-  const zoomBehavior = d32.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
-    root.attr("transform", event.transform.toString());
-  });
   svg.call(zoomBehavior);
   const lineGen = d32.line().x((d) => d.x).y((d) => d.y).curve(d32.curveBasis);
   const edgeGroup = root.append("g").attr("class", "glyph-flowchart-edges");
@@ -2528,7 +2998,7 @@ function renderFlowchart(svgElement, layout) {
     if (edge.label) {
       const mid = edge.points[Math.floor(edge.points.length / 2)];
       if (mid) {
-        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-text-muted, #6b7a94)").text(edge.label);
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-text-muted, #6b7a94)").text(inlineToText(edge.label));
       }
     }
   }
@@ -2536,19 +3006,34 @@ function renderFlowchart(svgElement, layout) {
   for (const node of layout.nodes) {
     const nodeG = nodeGroup.append("g").attr("class", "glyph-flowchart-node");
     renderNodeShape(nodeG, node, nodeFillOpacity, nodeStrokeWidth);
-    nodeG.append("text").attr("x", node.x).attr("y", node.y).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-node-label-color, #fff)").attr("pointer-events", "none").text(node.label);
+    nodeG.append("text").attr("x", node.x).attr("y", node.y).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-node-label-color, #fff)").attr("pointer-events", "none").text(inlineToText(node.label));
   }
 }
-function Flowchart({ data, container }) {
+function Flowchart({
+  data,
+  block,
+  container
+}) {
   const svgRef = useRef(null);
+  const rootRef = useRef(null);
   const layoutResult = useMemo(() => computeLayout(data.nodes, data.edges, data.direction), [data]);
+  const { overlayProps, zoomBehavior, zoomIn, zoomOut, resetZoom } = useZoomInteraction({
+    svgRef,
+    rootRef,
+    interactionMode: data.interactionMode ?? "modifier-key",
+    blockId: block.id
+  });
   useEffect(() => {
     if (!svgRef.current) return;
-    renderFlowchart(svgRef.current, layoutResult);
-  }, [layoutResult]);
+    renderFlowchart(svgRef.current, layoutResult, zoomBehavior);
+    const rootElement = svgRef.current.querySelector(".glyph-flowchart-root");
+    if (rootElement) {
+      rootRef.current = rootElement;
+    }
+  }, [layoutResult, zoomBehavior]);
   const nodeCount = data.nodes.length;
   const edgeCount = data.edges.length;
-  const ariaLabel = data.title ? `${data.title}: flowchart with ${nodeCount} nodes and ${edgeCount} edges` : `Flowchart with ${nodeCount} nodes and ${edgeCount} edges`;
+  const ariaLabel = data.title ? `${inlineToText(data.title)}: flowchart with ${nodeCount} nodes and ${edgeCount} edges` : `Flowchart with ${nodeCount} nodes and ${edgeCount} edges`;
   return /* @__PURE__ */ jsxs("div", { className: "glyph-flowchart-container", children: [
     data.title && /* @__PURE__ */ jsx(
       "div",
@@ -2560,25 +3045,29 @@ function Flowchart({ data, container }) {
           color: "var(--glyph-heading, #edf0f5)",
           marginBottom: "0.5rem"
         },
-        children: data.title
+        children: /* @__PURE__ */ jsx(RichText, { content: data.title })
       }
     ),
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        ref: svgRef,
-        role: "img",
-        "aria-label": ariaLabel,
-        width: "100%",
-        height: "100%",
-        style: {
-          minHeight: container.tier === "compact" ? 200 : 300,
-          maxHeight: container.tier === "compact" ? 500 : 700,
-          display: "block"
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: svgRef,
+          role: "img",
+          "aria-label": ariaLabel,
+          width: "100%",
+          height: "100%",
+          style: {
+            minHeight: container.tier === "compact" ? 200 : 300,
+            maxHeight: container.tier === "compact" ? 500 : 700,
+            display: "block"
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Flowchart data", style: SR_ONLY_STYLE3, children: [
+      ),
+      overlayProps && /* @__PURE__ */ jsx(InteractionOverlay, { ...overlayProps }),
+      /* @__PURE__ */ jsx(ZoomControls, { onZoomIn: zoomIn, onZoomOut: zoomOut, onReset: resetZoom })
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Flowchart data", style: SR_ONLY_STYLE4, children: [
       /* @__PURE__ */ jsx("caption", { children: "Flowchart nodes and connections" }),
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { scope: "col", children: "Node" }),
@@ -2589,10 +3078,10 @@ function Flowchart({ data, container }) {
         const connections = data.edges.filter((e) => e.from === node.id || e.to === node.id).map((e) => {
           const target = e.from === node.id ? e.to : e.from;
           const dir = e.from === node.id ? "->" : "<-";
-          return `${dir} ${target}${e.label ? ` (${e.label})` : ""}`;
+          return `${dir} ${target}${e.label ? ` (${inlineToText(e.label)})` : ""}`;
         }).join(", ");
         return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { children: node.label }),
+          /* @__PURE__ */ jsx("td", { children: inlineToText(node.label) }),
           /* @__PURE__ */ jsx("td", { children: node.type }),
           /* @__PURE__ */ jsx("td", { children: connections })
         ] }, node.id);
@@ -2600,7 +3089,7 @@ function Flowchart({ data, container }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE3 = {
+var SR_ONLY_STYLE4 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3014,20 +3503,24 @@ function renderActorBox(actor, cx, y, keyPrefix, width = ACTOR_WIDTH, height = A
         strokeWidth: 1.5
       }
     ),
-    /* @__PURE__ */ jsx(
-      "text",
+    /* @__PURE__ */ jsx("foreignObject", { x: cx - width / 2, y, width, height, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        x: cx,
-        y: y + height / 2,
-        dy: "0.35em",
-        textAnchor: "middle",
-        fontSize,
-        fontFamily: "Inter, system-ui, sans-serif",
-        fontWeight: 600,
-        fill: "var(--glyph-text, #d4dae3)",
-        children: actor.label
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          fontSize,
+          fontFamily: "Inter, system-ui, sans-serif",
+          fontWeight: 600,
+          color: "var(--glyph-text, #d4dae3)",
+          textAlign: "center"
+        },
+        children: /* @__PURE__ */ jsx(RichText, { content: actor.label })
       }
-    )
+    ) })
   ] }, `${keyPrefix}-${actor.id}`);
 }
 function renderSelfMessage(x, y, label, idx, fontSize = "12px") {
@@ -3042,18 +3535,19 @@ function renderSelfMessage(x, y, label, idx, fontSize = "12px") {
         markerEnd: "url(#seq-arrow-solid)"
       }
     ),
-    /* @__PURE__ */ jsx(
-      "text",
+    /* @__PURE__ */ jsx("foreignObject", { x: x + SELF_ARC_WIDTH + 6, y, width: 150, height: SELF_ARC_HEIGHT, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        x: x + SELF_ARC_WIDTH + 6,
-        y: y + SELF_ARC_HEIGHT / 2,
-        dy: "0.35em",
-        fontSize,
-        fontFamily: "Inter, system-ui, sans-serif",
-        fill: "var(--glyph-text, #d4dae3)",
-        children: label
+        style: {
+          display: "flex",
+          alignItems: "center",
+          fontSize,
+          fontFamily: "Inter, system-ui, sans-serif",
+          color: "var(--glyph-text, #d4dae3)"
+        },
+        children: /* @__PURE__ */ jsx(RichText, { content: label })
       }
-    )
+    ) })
   ] }, `msg-${idx}`);
 }
 function renderStandardMessage(fromX, toX, y, label, isDashed, idx, fontSize = "12px") {
@@ -3073,18 +3567,20 @@ function renderStandardMessage(fromX, toX, y, label, isDashed, idx, fontSize = "
         markerEnd: `url(#${markerId})`
       }
     ),
-    /* @__PURE__ */ jsx(
-      "text",
+    /* @__PURE__ */ jsx("foreignObject", { x: midX - 75, y: y - 22, width: 150, height: 20, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        x: midX,
-        y: y - 8,
-        textAnchor: "middle",
-        fontSize,
-        fontFamily: "Inter, system-ui, sans-serif",
-        fill: "var(--glyph-text, #d4dae3)",
-        children: label
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          fontSize,
+          fontFamily: "Inter, system-ui, sans-serif",
+          color: "var(--glyph-text, #d4dae3)",
+          textAlign: "center"
+        },
+        children: /* @__PURE__ */ jsx(RichText, { content: label })
       }
-    )
+    ) })
   ] }, `msg-${idx}`);
 }
 function Sequence({ data, container }) {
@@ -3109,7 +3605,7 @@ function Sequence({ data, container }) {
   const firstMsgY = lifelineStartY + MSG_SPACING;
   const lastMsgY = firstMsgY + (messageCount - 1) * MSG_SPACING;
   const svgHeight = lastMsgY + BOTTOM_PADDING + effectiveActorHeight;
-  const ariaLabel = data.title ? `${data.title}: sequence diagram with ${actorCount} actors and ${messageCount} messages` : `Sequence diagram with ${actorCount} actors and ${messageCount} messages`;
+  const ariaLabel = data.title ? `${inlineToText(data.title)}: sequence diagram with ${actorCount} actors and ${messageCount} messages` : `Sequence diagram with ${actorCount} actors and ${messageCount} messages`;
   return /* @__PURE__ */ jsxs("div", { className: "glyph-sequence-container", children: [
     data.title && /* @__PURE__ */ jsx(
       "div",
@@ -3121,7 +3617,7 @@ function Sequence({ data, container }) {
           color: "var(--glyph-heading, #edf0f5)",
           marginBottom: "0.5rem"
         },
-        children: data.title
+        children: /* @__PURE__ */ jsx(RichText, { content: data.title })
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -3222,7 +3718,7 @@ function Sequence({ data, container }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Sequence data", style: SR_ONLY_STYLE4, children: [
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Sequence data", style: SR_ONLY_STYLE5, children: [
       /* @__PURE__ */ jsx("caption", { children: "Sequence messages in order" }),
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { scope: "col", children: "#" }),
@@ -3236,16 +3732,16 @@ function Sequence({ data, container }) {
         const toActor = data.actors.find((a) => a.id === msg.to);
         return /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("td", { children: idx + 1 }),
-          /* @__PURE__ */ jsx("td", { children: fromActor?.label ?? msg.from }),
-          /* @__PURE__ */ jsx("td", { children: toActor?.label ?? msg.to }),
-          /* @__PURE__ */ jsx("td", { children: msg.label }),
+          /* @__PURE__ */ jsx("td", { children: fromActor ? inlineToText(fromActor.label) : msg.from }),
+          /* @__PURE__ */ jsx("td", { children: toActor ? inlineToText(toActor.label) : msg.to }),
+          /* @__PURE__ */ jsx("td", { children: inlineToText(msg.label) }),
           /* @__PURE__ */ jsx("td", { children: msg.type })
         ] }, idx);
       }) })
     ] })
   ] });
 }
-var SR_ONLY_STYLE4 = {
+var SR_ONLY_STYLE5 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3651,7 +4147,7 @@ function Architecture({
         }
       }
     ),
-    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Architecture data", style: SR_ONLY_STYLE5, children: [
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Architecture data", style: SR_ONLY_STYLE6, children: [
       /* @__PURE__ */ jsx("caption", { children: "Architecture nodes and connections" }),
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { scope: "col", children: "Node" }),
@@ -3695,7 +4191,7 @@ function countLeafNodes(children) {
   }
   return count;
 }
-var SR_ONLY_STYLE5 = {
+var SR_ONLY_STYLE6 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3883,7 +4379,7 @@ function layoutTree(data) {
   };
 }
 function renderAccessibleList(root, children) {
-  return /* @__PURE__ */ jsx("ul", { style: SR_ONLY_STYLE6, role: "list", "aria-label": "Mind map structure", children: /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("ul", { style: SR_ONLY_STYLE7, role: "list", "aria-label": "Mind map structure", children: /* @__PURE__ */ jsxs("li", { children: [
     root,
     children.length > 0 && renderAccessibleChildren(children)
   ] }) });
@@ -4010,7 +4506,7 @@ function MindMap({ data, container }) {
     renderAccessibleList(data.root, data.children)
   ] });
 }
-var SR_ONLY_STYLE6 = {
+var SR_ONLY_STYLE7 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -4085,7 +4581,7 @@ function Equation({ data }) {
     const ariaLabel = `Equation: ${data.expression}`;
     return /* @__PURE__ */ jsxs("div", { style: containerStyle, role: "math", "aria-label": ariaLabel, children: [
       error || html === "" ? /* @__PURE__ */ jsx("code", { style: fallbackStyle, children: data.expression }) : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } }),
-      data.label !== void 0 && /* @__PURE__ */ jsx("div", { style: labelStyle2, children: data.label })
+      data.label !== void 0 && /* @__PURE__ */ jsx("div", { style: labelStyle2, children: /* @__PURE__ */ jsx(RichText, { content: data.label }) })
     ] });
   }
   if (data.steps !== void 0 && data.steps.length > 0) {
@@ -4096,10 +4592,10 @@ function Equation({ data }) {
         const { html, error } = renderLatex(step.expression);
         return /* @__PURE__ */ jsxs("div", { style: stepRowStyle, children: [
           error || html === "" ? /* @__PURE__ */ jsx("code", { style: fallbackStyle, children: step.expression }) : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } }),
-          step.annotation !== void 0 && /* @__PURE__ */ jsx("span", { style: annotationStyle, children: step.annotation })
+          step.annotation !== void 0 && /* @__PURE__ */ jsx("span", { style: annotationStyle, children: /* @__PURE__ */ jsx(RichText, { content: step.annotation }) })
         ] }, idx);
       }) }),
-      data.label !== void 0 && /* @__PURE__ */ jsx("div", { style: labelStyle2, children: data.label })
+      data.label !== void 0 && /* @__PURE__ */ jsx("div", { style: labelStyle2, children: /* @__PURE__ */ jsx(RichText, { content: data.label }) })
     ] });
   }
   return /* @__PURE__ */ jsx("div", { style: containerStyle, role: "math", "aria-label": "Empty equation", children: /* @__PURE__ */ jsx("span", { style: { color: "var(--glyph-text-muted, #6b7a94)" }, children: "No equation provided" }) });
@@ -6525,8 +7021,8 @@ function Kanban({
             style: cardStyle(isGrabbed, card.priority),
             onKeyDown: (e) => handleCardKeyDown(e, card.id, col.id, cardIndex),
             children: [
-              /* @__PURE__ */ jsx("div", { style: cardTitleStyle, children: card.title }),
-              card.description && /* @__PURE__ */ jsx("div", { style: cardDescStyle, children: card.description }),
+              /* @__PURE__ */ jsx("div", { style: cardTitleStyle, children: /* @__PURE__ */ jsx(RichText, { content: card.title }) }),
+              card.description && /* @__PURE__ */ jsx("div", { style: cardDescStyle, children: /* @__PURE__ */ jsx(RichText, { content: card.description }) }),
               card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { style: tagContainerStyle, children: card.tags.map((tag) => /* @__PURE__ */ jsx("span", { style: tagStyle, children: tag }, tag)) })
             ]
           },