@glyphjs/components 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { accordionSchema, annotateSchema, architectureSchema, calloutSchema, cardSchema, chartSchema, codediffSchema, comparisonSchema, equationSchema, filetreeSchema, flowchartSchema, formSchema, graphSchema, infographicSchema, kanbanSchema, kpiSchema, matrixSchema, mindmapSchema, pollSchema, quizSchema, rankerSchema, ratingSchema, relationSchema, sequenceSchema, sliderSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema } from '@glyphjs/schemas';
 import { RichText } from '@glyphjs/runtime';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import * as d32 from 'd3';
 import { scaleTime, scaleOrdinal } from 'd3';
@@ -50,7 +50,7 @@ function Callout({ data }) {
   return /* @__PURE__ */ jsxs("div", { role: "note", "aria-label": CALLOUT_LABELS[type], style: containerStyle11, children: [
     /* @__PURE__ */ jsx("span", { style: iconStyle, "aria-hidden": "true", children: CALLOUT_ICONS[type] }),
     /* @__PURE__ */ jsxs("div", { style: bodyStyle3, children: [
-      title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: title }),
+      title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: /* @__PURE__ */ jsx(RichText, { content: title }) }),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RichText, { content }) })
     ] })
   ] });
@@ -1430,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
@@ -1476,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);
@@ -1489,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();
@@ -1548,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);
@@ -1556,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) => {
@@ -1576,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" }),
@@ -1618,7 +1951,7 @@ function Graph({
     ] })
   ] });
 }
-var SR_ONLY_STYLE = {
+var SR_ONLY_STYLE2 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -1742,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) {
@@ -1823,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" }),
@@ -1868,7 +2213,7 @@ function Relation({ data }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE2 = {
+var SR_ONLY_STYLE3 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -2504,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);
@@ -2516,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");
@@ -2539,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`;
@@ -2563,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" }),
@@ -2600,7 +2961,7 @@ function Flowchart({ data, container }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE3 = {
+var SR_ONLY_STYLE4 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3222,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: "#" }),
@@ -3245,7 +3606,7 @@ function Sequence({ data, container }) {
     ] })
   ] });
 }
-var SR_ONLY_STYLE4 = {
+var SR_ONLY_STYLE5 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3651,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" }),
@@ -3695,7 +4056,7 @@ function countLeafNodes(children) {
   }
   return count;
 }
-var SR_ONLY_STYLE5 = {
+var SR_ONLY_STYLE6 = {
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -3883,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)
   ] }) });
@@ -4010,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",