@glyphjs/components 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,5 +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 { jsxs, jsx } from 'react/jsx-runtime';
+import { RichText } from '@glyphjs/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';
@@ -49,8 +50,8 @@ 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 }),
-      /* @__PURE__ */ jsx("div", { children: content })
+      title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: /* @__PURE__ */ jsx(RichText, { content: title }) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RichText, { content }) })
     ] })
   ] });
 }
@@ -528,7 +529,7 @@ function Steps({ data }) {
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: indicatorStyle(status), children: status === "completed" ? "\u2713" : "" }),
           /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
             /* @__PURE__ */ jsx("div", { style: titleStyle(status), children: step.title }),
-            /* @__PURE__ */ jsx("div", { style: contentStyle(status), children: step.content })
+            /* @__PURE__ */ jsx("div", { style: contentStyle(status), children: /* @__PURE__ */ jsx(RichText, { content: step.content }) })
           ] })
         ]
       },
@@ -1187,7 +1188,7 @@ function Timeline({ data }) {
                     fontWeight: 700,
                     marginTop: 2
                   },
-                  children: pe.event.title
+                  children: /* @__PURE__ */ jsx(RichText, { content: pe.event.title })
                 }
               ),
               pe.event.description && /* @__PURE__ */ jsx(
@@ -1198,7 +1199,7 @@ function Timeline({ data }) {
                     color: "var(--glyph-timeline-desc-color, #7a8599)",
                     marginTop: 2
                   },
-                  children: pe.event.description
+                  children: /* @__PURE__ */ jsx(RichText, { content: pe.event.description })
                 }
               )
             ] })
@@ -1216,12 +1217,16 @@ function Timeline({ data }) {
               clipPath: "inset(50%)",
               whiteSpace: "nowrap"
             },
-            children: sorted.map((e, idx) => /* @__PURE__ */ jsxs("li", { children: [
-              /* @__PURE__ */ jsx("time", { dateTime: isoDate(e.date), children: formatDate(e.date) }),
-              " \u2014 ",
-              /* @__PURE__ */ jsx("strong", { children: e.title }),
-              e.description ? `: ${e.description}` : ""
-            ] }, idx))
+            children: sorted.map((e, idx) => {
+              const titleText = typeof e.title === "string" ? e.title : "Event";
+              const descText = typeof e.description === "string" ? e.description : "";
+              return /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("time", { dateTime: isoDate(e.date), children: formatDate(e.date) }),
+                " \u2014 ",
+                /* @__PURE__ */ jsx("strong", { children: titleText }),
+                descText ? `: ${descText}` : ""
+              ] }, idx);
+            })
           }
         )
       ]
@@ -1425,6 +1430,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
@@ -1471,7 +1796,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);
@@ -1484,9 +1809,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();
@@ -1543,6 +1865,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);
@@ -1551,6 +1874,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) => {
@@ -1571,27 +1900,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" }),
@@ -1613,7 +1951,7 @@ function Graph({
     ] })
   ] });
 }
-var SR_ONLY_STYLE = {
+var SR_ONLY_STYLE2 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -1737,16 +2075,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) {
@@ -1818,29 +2153,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" }),
@@ -1863,7 +2213,7 @@ function Relation({ data }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE2 = {
+var SR_ONLY_STYLE3 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -1893,7 +2243,8 @@ function resolveSentiment(metric) {
   return "neutral";
 }
 function buildAriaLabel(metric) {
-  let label = `${metric.label}: ${metric.value}`;
+  const labelText = typeof metric.label === "string" ? metric.label : "Metric";
+  let label = `${labelText}: ${metric.value}`;
   if (metric.unit) label += ` ${metric.unit}`;
   if (metric.delta && metric.trend) {
     label += `, ${metric.trend} ${metric.delta}`;
@@ -1965,7 +2316,7 @@ function Kpi({ data, block, container }) {
         color: `var(--glyph-kpi-${sentiment}, inherit)`
       };
       return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": buildAriaLabel(metric), style: cardStyle2, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle4, children: metric.label }),
+        /* @__PURE__ */ jsx("div", { style: labelStyle4, children: /* @__PURE__ */ jsx(RichText, { content: metric.label }) }),
         /* @__PURE__ */ jsxs("div", { style: valueStyle, children: [
           metric.value,
           metric.unit && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", fontWeight: 400, marginLeft: "0.25rem" }, children: metric.unit })
@@ -2079,7 +2430,7 @@ function Accordion({
                 /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: "0.75rem", width: "1rem", flexShrink: 0 }, children: "\u25B8" }),
                 section.title
               ] }),
-              /* @__PURE__ */ jsx("div", { style: contentStyle2, children: section.content })
+              /* @__PURE__ */ jsx("div", { style: contentStyle2, children: /* @__PURE__ */ jsx(RichText, { content: section.content }) })
             ]
           },
           i
@@ -2098,6 +2449,7 @@ var accordionDefinition = {
 var YES_VALUES = /* @__PURE__ */ new Set(["yes", "true", "full"]);
 var NO_VALUES = /* @__PURE__ */ new Set(["no", "false", "none"]);
 function classifyValue(value) {
+  if (typeof value !== "string") return "text";
   const lower = value.toLowerCase().trim();
   if (YES_VALUES.has(lower)) return "yes";
   if (NO_VALUES.has(lower)) return "no";
@@ -2135,7 +2487,7 @@ function renderValue(value) {
         }
       );
     default:
-      return /* @__PURE__ */ jsx("span", { children: value });
+      return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RichText, { content: value }) });
   }
 }
 function Comparison({
@@ -2231,7 +2583,7 @@ function Comparison({
                     fontSize: "0.75rem",
                     color: "var(--glyph-text-muted, #6b7a94)"
                   },
-                  children: option.description
+                  children: /* @__PURE__ */ jsx(RichText, { content: option.description })
                 }
               )
             ]
@@ -2252,8 +2604,8 @@ function Comparison({
           }
         ),
         options.map((_, colIndex) => {
-          const value = feature.values[colIndex] ?? "";
-          return /* @__PURE__ */ jsx("td", { style: cellStyle2(rowIndex), children: value ? renderValue(value) : null }, colIndex);
+          const value = feature.values[colIndex];
+          return /* @__PURE__ */ jsx("td", { style: cellStyle2(rowIndex), children: value !== void 0 && value !== "" ? renderValue(value) : null }, colIndex);
         })
       ] }, rowIndex)) })
     ] }) })
@@ -2497,7 +2849,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);
@@ -2509,9 +2861,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");
@@ -2532,13 +2881,28 @@ function renderFlowchart(svgElement, layout) {
     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);
   }
 }
-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`;
@@ -2556,22 +2920,26 @@ function Flowchart({ data, container }) {
         children: 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" }),
@@ -2593,7 +2961,7 @@ function Flowchart({ data, container }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE3 = {
+var SR_ONLY_STYLE4 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3215,7 +3583,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: "#" }),
@@ -3238,7 +3606,7 @@ function Sequence({ data, container }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE4 = {
+var SR_ONLY_STYLE5 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3644,7 +4012,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" }),
@@ -3688,7 +4056,7 @@ function countLeafNodes(children) {
   }
   return count;
 }
-var SR_ONLY_STYLE5 = {
+var SR_ONLY_STYLE6 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3876,7 +4244,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)
   ] }) });
@@ -4003,7 +4371,7 @@ function MindMap({ data, container }) {
     renderAccessibleList(data.root, data.children)
   ] });
 }
-var SR_ONLY_STYLE6 = {
+var SR_ONLY_STYLE7 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -4204,7 +4572,8 @@ function isCorrect(question, selected) {
 }
 function renderMultipleChoice(question, qIndex, state, updateState, baseId) {
   const selected = typeof state.selected === "number" ? state.selected : null;
-  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": question.question, children: question.options.map((option, oIndex) => {
+  const ariaLabel = typeof question.question === "string" ? question.question : "Question";
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": ariaLabel, children: question.options.map((option, oIndex) => {
     const isSelected = selected === oIndex;
     const isCorrectOption = state.submitted && oIndex === question.answer;
     const isIncorrectSelection = state.submitted && isSelected && oIndex !== question.answer;
@@ -4230,7 +4599,7 @@ function renderMultipleChoice(question, qIndex, state, updateState, baseId) {
               "aria-checked": isSelected
             }
           ),
-          option
+          /* @__PURE__ */ jsx(RichText, { content: option })
         ]
       },
       oIndex
@@ -4239,7 +4608,8 @@ function renderMultipleChoice(question, qIndex, state, updateState, baseId) {
 }
 function renderTrueFalse(question, qIndex, state, updateState, baseId) {
   const selected = typeof state.selected === "boolean" ? state.selected : null;
-  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": question.question, children: [true, false].map((value) => {
+  const ariaLabel = typeof question.question === "string" ? question.question : "Question";
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": ariaLabel, children: [true, false].map((value) => {
     const isSelected = selected === value;
     const isCorrectOption = state.submitted && value === question.answer;
     const isIncorrectSelection = state.submitted && isSelected && value !== question.answer;
@@ -4303,7 +4673,7 @@ function renderMultiSelect(question, qIndex, state, updateState) {
               "aria-checked": isSelected
             }
           ),
-          option
+          /* @__PURE__ */ jsx(RichText, { content: option })
         ]
       },
       oIndex
@@ -4342,7 +4712,7 @@ function Quiz({ data, block, onInteraction }) {
         children: [
           /* @__PURE__ */ jsxs("div", { style: questionTextStyle, children: [
             questions.length > 1 ? `${String(qIndex + 1)}. ` : "",
-            question.question
+            /* @__PURE__ */ jsx(RichText, { content: question.question })
           ] }),
           question.type === "multiple-choice" && renderMultipleChoice(question, qIndex, state, updateState, baseId),
           question.type === "true-false" && renderTrueFalse(question, qIndex, state, updateState, baseId),
@@ -4366,15 +4736,24 @@ function Quiz({ data, block, onInteraction }) {
                   let selected;
                   switch (question.type) {
                     case "multiple-choice":
-                      selected = typeof state.selected === "number" ? [question.options[state.selected] ?? String(state.selected)] : [];
+                      if (typeof state.selected === "number") {
+                        const opt = question.options[state.selected];
+                        selected = [typeof opt === "string" ? opt : String(state.selected)];
+                      } else {
+                        selected = [];
+                      }
                       break;
                     case "true-false":
                       selected = typeof state.selected === "boolean" ? [state.selected ? "True" : "False"] : [];
                       break;
                     case "multi-select":
-                      selected = Array.isArray(state.selected) ? state.selected.map((idx) => question.options[idx] ?? String(idx)) : [];
+                      selected = Array.isArray(state.selected) ? state.selected.map((idx) => {
+                        const opt = question.options[idx];
+                        return typeof opt === "string" ? opt : String(idx);
+                      }) : [];
                       break;
                   }
+                  const questionText = typeof question.question === "string" ? question.question : "Question";
                   onInteraction({
                     kind: "quiz-submit",
                     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -4382,7 +4761,7 @@ function Quiz({ data, block, onInteraction }) {
                     blockType: block.type,
                     payload: {
                       questionIndex: qIndex,
-                      question: question.question,
+                      question: questionText,
                       selected,
                       correct: correct2,
                       score: { correct: newScore, total: questions.length }
@@ -4395,7 +4774,7 @@ function Quiz({ data, block, onInteraction }) {
           ),
           /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
             state.submitted && /* @__PURE__ */ jsx("div", { style: feedbackStyle(correct), children: correct ? "Correct!" : "Incorrect" }),
-            state.submitted && question.explanation && /* @__PURE__ */ jsx("div", { style: explanationStyle, children: question.explanation })
+            state.submitted && question.explanation && /* @__PURE__ */ jsx("div", { style: explanationStyle, children: /* @__PURE__ */ jsx(RichText, { content: question.explanation }) })
           ] })
         ]
       },
@@ -4533,8 +4912,8 @@ function Card({ data, block, container }) {
       /* @__PURE__ */ jsxs("div", { style: cardBodyStyle, children: [
         card.icon && /* @__PURE__ */ jsx("div", { style: iconStyle, children: card.icon }),
         /* @__PURE__ */ jsx("h3", { style: titleStyle2, children: card.title }),
-        card.subtitle && /* @__PURE__ */ jsx("div", { style: subtitleStyle, children: card.subtitle }),
-        card.body && /* @__PURE__ */ jsx("div", { style: bodyStyle3, children: card.body }),
+        card.subtitle && /* @__PURE__ */ jsx("div", { style: subtitleStyle, children: /* @__PURE__ */ jsx(RichText, { content: card.subtitle }) }),
+        card.body && /* @__PURE__ */ jsx("div", { style: bodyStyle3, children: /* @__PURE__ */ jsx(RichText, { content: card.body }) }),
         card.actions && card.actions.length > 0 && /* @__PURE__ */ jsx("div", { style: actionsStyle, children: card.actions.map((action, j) => /* @__PURE__ */ jsx(
           "a",
           {
@@ -4641,7 +5020,7 @@ function renderStatGroup(items, keyPrefix) {
   return /* @__PURE__ */ jsx("div", { style: rowStyle, "data-group": "stat", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
     /* @__PURE__ */ jsx("div", { style: valueStyle, children: item.value }),
     /* @__PURE__ */ jsx("div", { style: labelStyle4, children: item.label }),
-    item.description && /* @__PURE__ */ jsx("div", { style: descStyle, children: item.description })
+    item.description && /* @__PURE__ */ jsx("div", { style: descStyle, children: /* @__PURE__ */ jsx(RichText, { content: item.description }) })
   ] }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
 }
 function renderProgressGroup(items, keyPrefix, colorOffset) {
@@ -4734,7 +5113,7 @@ function renderFactGroup(items, keyPrefix) {
         children: item.icon
       }
     ),
-    item.text
+    /* @__PURE__ */ jsx(RichText, { content: item.text })
   ] }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
 }
 function renderTextGroup(items, keyPrefix) {
@@ -5216,17 +5595,21 @@ function Poll({ data, block, onInteraction }) {
         blockId: block.id,
         blockType: block.type,
         payload: {
-          selectedOptions: selected.map((i) => options[i] ?? String(i)),
+          selectedOptions: selected.map((i) => {
+            const opt = options[i];
+            return typeof opt === "string" ? opt : String(i);
+          }),
           selectedIndices: [...selected]
         }
       });
     }
   };
   const totalVotes = votes.reduce((a, b) => a + b, 0);
+  const questionAriaLabel = typeof question === "string" ? question : "Poll question";
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Poll", style: containerStyle3, children: [
     title && /* @__PURE__ */ jsx("div", { style: headerStyle2, children: title }),
-    /* @__PURE__ */ jsx("div", { style: questionStyle, children: question }),
-    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": question, style: optionsStyle, children: options.map((option, index) => /* @__PURE__ */ jsxs("label", { style: optionLabelStyle2(selected.includes(index)), children: [
+    /* @__PURE__ */ jsx("div", { style: questionStyle, children: /* @__PURE__ */ jsx(RichText, { content: question }) }),
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": questionAriaLabel, style: optionsStyle, children: options.map((option, index) => /* @__PURE__ */ jsxs("label", { style: optionLabelStyle2(selected.includes(index)), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5238,7 +5621,7 @@ function Poll({ data, block, onInteraction }) {
           "aria-checked": selected.includes(index)
         }
       ),
-      option
+      /* @__PURE__ */ jsx(RichText, { content: option })
     ] }, index)) }),
     !hasVoted && /* @__PURE__ */ jsx(
       "button",
@@ -5257,9 +5640,10 @@ function Poll({ data, block, onInteraction }) {
     showResults && hasVoted && /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", style: resultsStyle, children: options.map((option, index) => {
       const count = votes[index] ?? 0;
       const percentage = totalVotes > 0 ? count / totalVotes * 100 : 0;
+      const optionLabel = typeof option === "string" ? option : "Option";
       return /* @__PURE__ */ jsxs("div", { style: resultRowStyle, children: [
         /* @__PURE__ */ jsxs("div", { style: resultLabelStyle, children: [
-          /* @__PURE__ */ jsx("span", { children: option }),
+          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RichText, { content: option }) }),
           /* @__PURE__ */ jsxs("span", { children: [
             String(count),
             " vote",
@@ -5277,7 +5661,7 @@ function Poll({ data, block, onInteraction }) {
             "aria-valuenow": percentage,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            "aria-label": `${option}: ${String(Math.round(percentage))}%`,
+            "aria-label": `${optionLabel}: ${String(Math.round(percentage))}%`,
             children: /* @__PURE__ */ jsx("div", { style: barFillStyle(percentage) })
           }
         )
@@ -5379,6 +5763,8 @@ function Rating({
     newRatings[itemIndex] = value;
     setRatings(newRatings);
     if (onInteraction) {
+      const item = items[itemIndex];
+      const itemLabel = item ? typeof item.label === "string" ? item.label : "Item" : "";
       onInteraction({
         kind: "rating-change",
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -5386,10 +5772,10 @@ function Rating({
         blockType: block.type,
         payload: {
           itemIndex,
-          itemLabel: items[itemIndex]?.label ?? "",
+          itemLabel,
           value,
-          allRatings: items.map((item, i) => ({
-            label: item.label,
+          allRatings: items.map((item2, i) => ({
+            label: typeof item2.label === "string" ? item2.label : "Item",
             value: i === itemIndex ? value : newRatings[i] ?? null
           }))
         }
@@ -5401,10 +5787,11 @@ function Rating({
     items.map((item, itemIndex) => {
       const currentRating = ratings[itemIndex] ?? null;
       const isLast = itemIndex === items.length - 1;
+      const itemLabelText = typeof item.label === "string" ? item.label : "Item";
       return /* @__PURE__ */ jsxs("div", { style: itemStyle2(isLast), children: [
-        /* @__PURE__ */ jsx("div", { style: itemLabelStyle, children: item.label }),
-        item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle, children: item.description }),
-        /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": `Rate ${item.label}`, style: starsContainerStyle, children: Array.from({ length: scale }, (_, starIndex) => {
+        /* @__PURE__ */ jsx("div", { style: itemLabelStyle, children: /* @__PURE__ */ jsx(RichText, { content: item.label }) }),
+        item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle, children: /* @__PURE__ */ jsx(RichText, { content: item.description }) }),
+        /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": `Rate ${itemLabelText}`, style: starsContainerStyle, children: Array.from({ length: scale }, (_, starIndex) => {
           const value = starIndex + 1;
           const isHovered = hoveredStar !== null && hoveredStar.itemIndex === itemIndex && value <= hoveredStar.value;
           const isFilled = currentRating !== null && value <= currentRating;
@@ -5458,7 +5845,7 @@ function Rating({
               whiteSpace: "nowrap",
               border: 0
             },
-            children: currentRating !== null && `${item.label} rated ${String(currentRating)} out of ${String(scale)}`
+            children: currentRating !== null && `${itemLabelText} rated ${String(currentRating)} out of ${String(scale)}`
           }
         )
       ] }, itemIndex);
@@ -5565,12 +5952,12 @@ function Ranker({
             payload: {
               orderedItems: newItems.map((item, i) => ({
                 id: item.id,
-                label: item.label,
+                label: typeof item.label === "string" ? item.label : "Item",
                 rank: i + 1
               })),
               movedItem: {
                 id: moved.id,
-                label: moved.label,
+                label: typeof moved.label === "string" ? moved.label : "Item",
                 fromRank: fromIndex + 1,
                 toRank: toIndex + 1
               }
@@ -5608,26 +5995,29 @@ function Ranker({
   };
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Ranker", style: containerStyle5, children: [
     title && /* @__PURE__ */ jsx("div", { style: headerStyle4, children: title }),
-    /* @__PURE__ */ jsx("ul", { role: "list", "aria-label": title ?? "Rank items", style: listStyle, children: items.map((item, index) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        role: "listitem",
-        "aria-grabbed": grabbedIndex === index,
-        "aria-label": `${item.label}, rank ${String(index + 1)}`,
-        tabIndex: 0,
-        style: itemStyle3(false, grabbedIndex === index),
-        onKeyDown: (e) => handleKeyDown(e, index),
-        children: [
-          /* @__PURE__ */ jsx("span", { style: gripStyle, "aria-hidden": "true", children: "\u283F" }),
-          /* @__PURE__ */ jsx("span", { style: rankBadgeStyle, children: String(index + 1) }),
-          /* @__PURE__ */ jsxs("div", { style: itemContentStyle, children: [
-            /* @__PURE__ */ jsx("div", { style: itemLabelStyle2, children: item.label }),
-            item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle2, children: item.description })
-          ] })
-        ]
-      },
-      item.id
-    )) }),
+    /* @__PURE__ */ jsx("ul", { role: "list", "aria-label": title ?? "Rank items", style: listStyle, children: items.map((item, index) => {
+      const itemLabelText = typeof item.label === "string" ? item.label : "Item";
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          role: "listitem",
+          "aria-grabbed": grabbedIndex === index,
+          "aria-label": `${itemLabelText}, rank ${String(index + 1)}`,
+          tabIndex: 0,
+          style: itemStyle3(false, grabbedIndex === index),
+          onKeyDown: (e) => handleKeyDown(e, index),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: gripStyle, "aria-hidden": "true", children: "\u283F" }),
+            /* @__PURE__ */ jsx("span", { style: rankBadgeStyle, children: String(index + 1) }),
+            /* @__PURE__ */ jsxs("div", { style: itemContentStyle, children: [
+              /* @__PURE__ */ jsx("div", { style: itemLabelStyle2, children: /* @__PURE__ */ jsx(RichText, { content: item.label }) }),
+              item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle2, children: item.description })
+            ] })
+          ]
+        },
+        item.id
+      );
+    }) }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -5643,7 +6033,7 @@ function Ranker({
           whiteSpace: "nowrap",
           border: 0
         },
-        children: grabbedIndex !== null && `${items[grabbedIndex]?.label ?? ""} grabbed, rank ${String(grabbedIndex + 1)} of ${String(items.length)}. Use arrow keys to move.`
+        children: grabbedIndex !== null && items[grabbedIndex] !== void 0 ? `${typeof items[grabbedIndex].label === "string" ? items[grabbedIndex].label : "Item"} grabbed, rank ${String(grabbedIndex + 1)} of ${String(items.length)}. Use arrow keys to move.` : ""
       }
     )
   ] });
@@ -5729,11 +6119,11 @@ function Slider({
         blockType: block.type,
         payload: {
           parameterId: param.id,
-          parameterLabel: param.label,
+          parameterLabel: typeof param.label === "string" ? param.label : "Parameter",
           value: newValue,
           allValues: parameters.map((p, i) => ({
             id: p.id,
-            label: p.label,
+            label: typeof p.label === "string" ? p.label : "Parameter",
             value: i === paramIndex ? newValue : newValues[i] ?? 0
           }))
         }
@@ -5753,7 +6143,7 @@ function Slider({
       const isLast = index === parameters.length - 1;
       return /* @__PURE__ */ jsxs("div", { style: parameterStyle(isLast), children: [
         /* @__PURE__ */ jsxs("div", { style: parameterHeaderStyle, children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: `${baseId}-${param.id}`, style: parameterLabelStyle, children: param.label }),
+          /* @__PURE__ */ jsx("label", { htmlFor: `${baseId}-${param.id}`, style: parameterLabelStyle, children: /* @__PURE__ */ jsx(RichText, { content: param.label }) }),
           /* @__PURE__ */ jsx("span", { style: parameterValueStyle, "aria-live": "polite", children: formatValue(currentValue, param.unit) })
         ] }),
         /* @__PURE__ */ jsx(
@@ -5866,7 +6256,8 @@ function computeWeightedTotals(rows, columns, values) {
       const weight = col.weight ?? 1;
       total += score * weight;
     }
-    return { rowId: row.id, rowLabel: row.label, total: Math.round(total * 100) / 100 };
+    const rowLabel = typeof row.label === "string" ? row.label : "Row";
+    return { rowId: row.id, rowLabel, total: Math.round(total * 100) / 100 };
   });
 }
 function Matrix({
@@ -5909,9 +6300,9 @@ function Matrix({
             blockType: block.type,
             payload: {
               rowId,
-              rowLabel: row.label,
+              rowLabel: typeof row.label === "string" ? row.label : "Row",
               columnId,
-              columnLabel: col.label,
+              columnLabel: typeof col.label === "string" ? col.label : "Column",
               value: clamped,
               allValues: payloadValues,
               weightedTotals: computeWeightedTotals(rows, columns, newValues)
@@ -5930,7 +6321,7 @@ function Matrix({
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { style: thStyle }),
         columns.map((col) => /* @__PURE__ */ jsxs("th", { style: thStyle, children: [
-          col.label,
+          /* @__PURE__ */ jsx(RichText, { content: col.label }),
           (col.weight ?? 1) !== 1 && /* @__PURE__ */ jsxs("div", { style: weightStyle, children: [
             "\xD7",
             String(col.weight)
@@ -5940,10 +6331,12 @@ function Matrix({
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
         const rowTotal = totals.find((t) => t.rowId === row.id)?.total ?? 0;
+        const rowLabelText = typeof row.label === "string" ? row.label : "Row";
         return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { scope: "row", style: rowHeaderStyle, children: row.label }),
+          /* @__PURE__ */ jsx("th", { scope: "row", style: rowHeaderStyle, children: /* @__PURE__ */ jsx(RichText, { content: row.label }) }),
           columns.map((col) => {
             const cellValue = values[row.id]?.[col.id] ?? 0;
+            const colLabelText = typeof col.label === "string" ? col.label : "Column";
             return /* @__PURE__ */ jsx("td", { style: cellStyle, children: /* @__PURE__ */ jsx(
               "input",
               {
@@ -5952,7 +6345,7 @@ function Matrix({
                 max: scale,
                 value: cellValue,
                 onChange: (e) => handleChange(row.id, col.id, Number(e.target.value)),
-                "aria-label": `Score for ${row.label} on ${col.label}`,
+                "aria-label": `Score for ${rowLabelText} on ${colLabelText}`,
                 style: inputStyle
               }
             ) }, col.id);
@@ -6246,7 +6639,7 @@ function Form({ data, block, onInteraction }) {
   };
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Form", style: containerStyle8, children: [
     title && /* @__PURE__ */ jsx("div", { style: headerStyle7, children: title }),
-    description && /* @__PURE__ */ jsx("div", { style: descriptionStyle, children: description }),
+    description && /* @__PURE__ */ jsx("div", { style: descriptionStyle, children: /* @__PURE__ */ jsx(RichText, { content: description }) }),
     /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: formStyle, noValidate: true, children: [
       fields.map(
         (field) => renderField({ field, baseId, values, validation, submitted, updateValue })
@@ -6633,6 +7026,9 @@ var annotationNoteStyle = {
   marginTop: "0.125rem"
 };
 function computeSegments(text, annotations) {
+  if (typeof text !== "string") {
+    return [{ text: "", start: 0, annotation: null }];
+  }
   if (annotations.length === 0) {
     return [{ text, start: 0, annotation: null }];
   }
@@ -6712,7 +7108,7 @@ function Annotate({
           allAnnotations: newAnnotations.map((a) => ({
             start: a.start,
             end: a.end,
-            text: text.slice(a.start, a.end),
+            text: typeof text === "string" ? text.slice(a.start, a.end) : "",
             label: a.label
           }))
         }
@@ -6738,7 +7134,7 @@ function Annotate({
         title && /* @__PURE__ */ jsx("div", { style: headerStyle9, children: title }),
         /* @__PURE__ */ jsxs("div", { style: bodyStyle2, children: [
           /* @__PURE__ */ jsxs("div", { ref: textRef, role: "document", style: textPaneStyle, onMouseUp: handleMouseUp, children: [
-            segments.map((seg, i) => {
+            typeof text === "string" ? segments.map((seg, i) => {
               if (seg.annotation) {
                 const color3 = labelColorMap.get(seg.annotation.label) ?? "#888";
                 return /* @__PURE__ */ jsx(
@@ -6756,7 +7152,7 @@ function Annotate({
                 );
               }
               return /* @__PURE__ */ jsx("span", { children: seg.text }, i);
-            }),
+            }) : /* @__PURE__ */ jsx(RichText, { content: text }),
             pickerPos && /* @__PURE__ */ jsx(
               "div",
               {
@@ -6795,12 +7191,13 @@ function Annotate({
             /* @__PURE__ */ jsxs("div", { role: "list", children: [
               annotations.map((ann, i) => {
                 const color3 = labelColorMap.get(ann.label) ?? "#888";
+                const annotatedText = typeof text === "string" ? text.slice(ann.start, ann.end) : "";
                 return /* @__PURE__ */ jsxs("div", { role: "listitem", style: annotationItemStyle(color3), children: [
                   /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
                     /* @__PURE__ */ jsx("span", { style: colorDotStyle(color3) }),
                     /* @__PURE__ */ jsx("strong", { style: { fontSize: "0.75rem" }, children: ann.label })
                   ] }),
-                  /* @__PURE__ */ jsx("div", { style: annotationTextStyle, children: text.slice(ann.start, ann.end) }),
+                  /* @__PURE__ */ jsx("div", { style: annotationTextStyle, children: annotatedText }),
                   ann.note && /* @__PURE__ */ jsx("div", { style: annotationNoteStyle, children: ann.note })
                 ] }, i);
               }),