@glyphjs/components 0.4.0 → 0.6.0

package/dist/index.js

@@ -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) {
@@ -1485,16 +1607,16 @@ function useZoomInteraction({
     };
   }, [interactionMode, svgRef]);
   const zoomBehavior = useMemo(() => {
-    const zoom3 = d32.zoom().scaleExtent([0.1, 4]);
-    if (typeof zoom3.filter === "function") {
-      zoom3.filter(filterFunction);
+    const zoom2 = d32.zoom().scaleExtent([0.1, 4]);
+    if (typeof zoom2.filter === "function") {
+      zoom2.filter(filterFunction);
     }
-    zoom3.on("zoom", (event) => {
+    zoom2.on("zoom", (event) => {
       if (rootRef.current) {
         d32.select(rootRef.current).attr("transform", event.transform.toString());
       }
     });
-    return zoom3;
+    return zoom2;
   }, [filterFunction, rootRef]);
   const handleActivate = useCallback(() => {
     if (interactionMode === "click-to-activate") {
@@ -1826,7 +1948,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, z
     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));
       }
     }
   }
@@ -1843,7 +1965,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, z
     } 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", () => {
@@ -1851,7 +1973,7 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, z
           const ref = refByAnchor.get(node.id);
           if (ref) onNavigate(ref);
         }
-        onNodeClick?.(node.id, node.label);
+        onNodeClick?.(node.id, inlineToText(node.label));
       });
     }
   }
@@ -1943,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);
@@ -1977,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 };
@@ -2108,7 +2236,7 @@ function renderRelation(svgElement, layout, zoomBehavior) {
     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];
@@ -2136,7 +2264,7 @@ function renderRelation(svgElement, layout, zoomBehavior) {
     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);
     }
@@ -2145,7 +2273,7 @@ function renderRelation(svgElement, layout, zoomBehavior) {
       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");
       }
@@ -2205,7 +2333,7 @@ function Relation({ data, block }) {
           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);
@@ -2743,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",
@@ -2870,7 +2998,7 @@ function renderFlowchart(svgElement, layout, zoomBehavior) {
     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));
       }
     }
   }
@@ -2878,7 +3006,7 @@ function renderFlowchart(svgElement, layout, zoomBehavior) {
   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({
@@ -2905,7 +3033,7 @@ function Flowchart({
   }, [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",
@@ -2917,7 +3045,7 @@ function Flowchart({
           color: "var(--glyph-heading, #edf0f5)",
           marginBottom: "0.5rem"
         },
-        children: data.title
+        children: /* @__PURE__ */ jsx(RichText, { content: data.title })
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
@@ -2950,10 +3078,10 @@ function Flowchart({
         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);
@@ -3375,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") {
@@ -3403,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") {
@@ -3434,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 }) {
@@ -3470,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",
@@ -3482,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(
@@ -3597,9 +3732,9 @@ 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);
       }) })
@@ -3878,7 +4013,7 @@ function getThemeVar3(container, varName, fallback) {
   return getComputedStyle(container).getPropertyValue(varName).trim() || fallback;
 }
 var ARROW_MARKER_ID3 = "glyph-arch-arrowhead";
-function renderArchitecture(svgElement, layout) {
+function renderArchitecture(svgElement, layout, rootRef, zoomBehavior) {
   const svg = d32.select(svgElement);
   svg.selectAll("*").remove();
   const width = Math.max(layout.width, 200);
@@ -3891,10 +4026,12 @@ function renderArchitecture(svgElement, layout) {
   const nodeStrokeWidth = getThemeVar3(container, "--glyph-node-stroke-width", "1.5");
   const nodeFillOpacity = getThemeVar3(container, "--glyph-node-fill-opacity", "0.85");
   const root = svg.append("g").attr("class", "glyph-architecture-root");
-  const zoomBehavior = d32.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
-    root.attr("transform", event.transform.toString());
-  });
-  svg.call(zoomBehavior);
+  if (rootRef) {
+    rootRef.current = root.node();
+  }
+  if (zoomBehavior) {
+    svg.call(zoomBehavior);
+  }
   const sortedZones = [...layout.zones].sort((a, b) => a.depth - b.depth);
   const zoneGroup = root.append("g").attr("class", "glyph-architecture-zones");
   for (const zone of sortedZones) {
@@ -3962,10 +4099,19 @@ function renderArchitecture(svgElement, layout) {
 }
 function Architecture({
   data,
-  container
+  container,
+  block
 }) {
   const svgRef = useRef(null);
+  const rootRef = useRef(null);
+  const containerRef = useRef(null);
   const [layout, setLayout] = useState(null);
+  const { overlayProps, zoomBehavior, zoomIn, zoomOut, resetZoom } = useZoomInteraction({
+    svgRef,
+    rootRef,
+    interactionMode: data.interactionMode ?? "modifier-key",
+    blockId: block.id
+  });
   useEffect(() => {
     let cancelled = false;
     computeArchitectureLayout(data).then((result) => {
@@ -3977,62 +4123,72 @@ function Architecture({
   }, [data]);
   useEffect(() => {
     if (!svgRef.current || !layout) return;
-    renderArchitecture(svgRef.current, layout);
-  }, [layout]);
+    renderArchitecture(svgRef.current, layout, rootRef, zoomBehavior);
+  }, [layout, zoomBehavior]);
   const nodeCount = countLeafNodes(data.children);
   const edgeCount = data.edges.length;
   const ariaLabel = data.title ? `${data.title}: architecture diagram with ${nodeCount} nodes and ${edgeCount} connections` : `Architecture diagram with ${nodeCount} nodes and ${edgeCount} connections`;
   const flatNodes = flattenNodes(data.children);
-  return /* @__PURE__ */ jsxs("div", { className: "glyph-architecture-container", children: [
-    !layout && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: "2rem",
-          textAlign: "center",
-          color: "var(--glyph-text-muted, #7a8599)",
-          fontFamily: "Inter, system-ui, sans-serif",
-          fontSize: "13px"
-        },
-        children: "Computing layout..."
-      }
-    ),
-    /* @__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: layout ? "block" : "none"
-        }
-      }
-    ),
-    /* @__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" }),
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Zone" }),
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Connections" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: flatNodes.map((node) => {
-        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})` : ""}`;
-        }).join(", ");
-        return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { children: node.label }),
-          /* @__PURE__ */ jsx("td", { children: node.zone ?? "" }),
-          /* @__PURE__ */ jsx("td", { children: connections })
-        ] }, node.id);
-      }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "glyph-architecture-container",
+      style: { position: "relative" },
+      children: [
+        !layout && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "2rem",
+              textAlign: "center",
+              color: "var(--glyph-text-muted, #7a8599)",
+              fontFamily: "Inter, system-ui, sans-serif",
+              fontSize: "13px"
+            },
+            children: "Computing layout..."
+          }
+        ),
+        /* @__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: layout ? "block" : "none"
+            }
+          }
+        ),
+        layout && overlayProps && /* @__PURE__ */ jsx(InteractionOverlay, { ...overlayProps }),
+        layout && data.showZoomControls !== false && /* @__PURE__ */ jsx(ZoomControls, { onZoomIn: zoomIn, onZoomOut: zoomOut, onReset: resetZoom }),
+        /* @__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" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Zone" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Connections" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: flatNodes.map((node) => {
+            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})` : ""}`;
+            }).join(", ");
+            return /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { children: node.label }),
+              /* @__PURE__ */ jsx("td", { children: node.zone ?? "" }),
+              /* @__PURE__ */ jsx("td", { children: connections })
+            ] }, node.id);
+          }) })
+        ] })
+      ]
+    }
+  );
 }
 function flattenNodes(children, zone) {
   const result = [];
@@ -4446,7 +4602,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) {
@@ -4457,10 +4613,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" }) });
@@ -6886,8 +7042,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)) })
             ]
           },