@glyphjs/components 0.5.1 → 0.7.0

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+import * as _glyphjs_types from '@glyphjs/types';
 import { GlyphComponentProps, InlineNode, GlyphComponentDefinition, GraphNode, GraphEdge } from '@glyphjs/types';
 import { ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -381,6 +382,8 @@ interface ArchitectureData {
     children: ArchitectureNode[];
     edges: ArchitectureEdge[];
     layout?: 'top-down' | 'left-right' | 'bottom-up';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    showZoomControls?: boolean;
 }
 interface PositionedArchNode {
     id: string;
@@ -421,7 +424,7 @@ interface ArchitectureLayout {
 }
 declare function computeArchitectureLayout(data: ArchitectureData): Promise<ArchitectureLayout>;
 
-declare function Architecture({ data, container, }: GlyphComponentProps<ArchitectureData>): ReactElement;
+declare function Architecture({ data, container, block, }: GlyphComponentProps<ArchitectureData>): ReactElement;
 
 declare const architectureDefinition: GlyphComponentDefinition<ArchitectureData>;
 
@@ -745,4 +748,6 @@ declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<A
 
 declare const annotateDefinition: GlyphComponentDefinition<AnnotateData>;
 
-export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+declare const allComponentDefinitions: readonly [_glyphjs_types.GlyphComponentDefinition<CalloutData>, _glyphjs_types.GlyphComponentDefinition<unknown>, _glyphjs_types.GlyphComponentDefinition<StepsData>, _glyphjs_types.GlyphComponentDefinition<TableData>, _glyphjs_types.GlyphComponentDefinition<TabsData>, _glyphjs_types.GlyphComponentDefinition<TimelineData>, _glyphjs_types.GlyphComponentDefinition<GraphData>, _glyphjs_types.GlyphComponentDefinition<RelationData>, _glyphjs_types.GlyphComponentDefinition<KpiData>, _glyphjs_types.GlyphComponentDefinition<AccordionData>, _glyphjs_types.GlyphComponentDefinition<ComparisonData>, _glyphjs_types.GlyphComponentDefinition<CodeDiffData>, _glyphjs_types.GlyphComponentDefinition<FlowchartData>, _glyphjs_types.GlyphComponentDefinition<FileTreeData>, _glyphjs_types.GlyphComponentDefinition<SequenceData>, _glyphjs_types.GlyphComponentDefinition<ArchitectureData>, _glyphjs_types.GlyphComponentDefinition<MindMapData>, _glyphjs_types.GlyphComponentDefinition<EquationData>, _glyphjs_types.GlyphComponentDefinition<QuizData>, _glyphjs_types.GlyphComponentDefinition<CardData>, _glyphjs_types.GlyphComponentDefinition<InfographicData>, _glyphjs_types.GlyphComponentDefinition<PollData>, _glyphjs_types.GlyphComponentDefinition<RatingData>, _glyphjs_types.GlyphComponentDefinition<RankerData>, _glyphjs_types.GlyphComponentDefinition<SliderData>, _glyphjs_types.GlyphComponentDefinition<MatrixData>, _glyphjs_types.GlyphComponentDefinition<FormData>, _glyphjs_types.GlyphComponentDefinition<KanbanData>, _glyphjs_types.GlyphComponentDefinition<AnnotateData>];
+
+export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as _glyphjs_types from '@glyphjs/types';
 import { GlyphComponentProps, InlineNode, GlyphComponentDefinition, GraphNode, GraphEdge } from '@glyphjs/types';
 import { ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -381,6 +382,8 @@ interface ArchitectureData {
     children: ArchitectureNode[];
     edges: ArchitectureEdge[];
     layout?: 'top-down' | 'left-right' | 'bottom-up';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    showZoomControls?: boolean;
 }
 interface PositionedArchNode {
     id: string;
@@ -421,7 +424,7 @@ interface ArchitectureLayout {
 }
 declare function computeArchitectureLayout(data: ArchitectureData): Promise<ArchitectureLayout>;
 
-declare function Architecture({ data, container, }: GlyphComponentProps<ArchitectureData>): ReactElement;
+declare function Architecture({ data, container, block, }: GlyphComponentProps<ArchitectureData>): ReactElement;
 
 declare const architectureDefinition: GlyphComponentDefinition<ArchitectureData>;
 
@@ -745,4 +748,6 @@ declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<A
 
 declare const annotateDefinition: GlyphComponentDefinition<AnnotateData>;
 
-export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+declare const allComponentDefinitions: readonly [_glyphjs_types.GlyphComponentDefinition<CalloutData>, _glyphjs_types.GlyphComponentDefinition<unknown>, _glyphjs_types.GlyphComponentDefinition<StepsData>, _glyphjs_types.GlyphComponentDefinition<TableData>, _glyphjs_types.GlyphComponentDefinition<TabsData>, _glyphjs_types.GlyphComponentDefinition<TimelineData>, _glyphjs_types.GlyphComponentDefinition<GraphData>, _glyphjs_types.GlyphComponentDefinition<RelationData>, _glyphjs_types.GlyphComponentDefinition<KpiData>, _glyphjs_types.GlyphComponentDefinition<AccordionData>, _glyphjs_types.GlyphComponentDefinition<ComparisonData>, _glyphjs_types.GlyphComponentDefinition<CodeDiffData>, _glyphjs_types.GlyphComponentDefinition<FlowchartData>, _glyphjs_types.GlyphComponentDefinition<FileTreeData>, _glyphjs_types.GlyphComponentDefinition<SequenceData>, _glyphjs_types.GlyphComponentDefinition<ArchitectureData>, _glyphjs_types.GlyphComponentDefinition<MindMapData>, _glyphjs_types.GlyphComponentDefinition<EquationData>, _glyphjs_types.GlyphComponentDefinition<QuizData>, _glyphjs_types.GlyphComponentDefinition<CardData>, _glyphjs_types.GlyphComponentDefinition<InfographicData>, _glyphjs_types.GlyphComponentDefinition<PollData>, _glyphjs_types.GlyphComponentDefinition<RatingData>, _glyphjs_types.GlyphComponentDefinition<RankerData>, _glyphjs_types.GlyphComponentDefinition<SliderData>, _glyphjs_types.GlyphComponentDefinition<MatrixData>, _glyphjs_types.GlyphComponentDefinition<FormData>, _glyphjs_types.GlyphComponentDefinition<KanbanData>, _glyphjs_types.GlyphComponentDefinition<AnnotateData>];
+
+export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };

package/dist/index.js

@@ -1,4 +1,4 @@
-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 { accordionSchema, calloutSchema, chartSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema, graphSchema, relationSchema, kpiSchema, comparisonSchema, codediffSchema, flowchartSchema, filetreeSchema, sequenceSchema, architectureSchema, mindmapSchema, equationSchema, quizSchema, cardSchema, infographicSchema, pollSchema, ratingSchema, rankerSchema, sliderSchema, matrixSchema, formSchema, kanbanSchema, annotateSchema } from '@glyphjs/schemas';
 import { RichText } from '@glyphjs/runtime';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
@@ -246,6 +246,22 @@ function ChartAccessibleTable({
     }
   );
 }
+function inferAxisKeys(series, explicitX, explicitY) {
+  if (explicitX && explicitY) return { xKey: explicitX, yKey: explicitY };
+  const sample = series[0]?.data[0];
+  if (!sample) return { xKey: explicitX ?? "x", yKey: explicitY ?? "y" };
+  let inferredX;
+  let inferredY;
+  for (const [key, value] of Object.entries(sample)) {
+    if (!inferredX && typeof value === "string") inferredX = key;
+    if (!inferredY && typeof value === "number") inferredY = key;
+    if (inferredX && inferredY) break;
+  }
+  return {
+    xKey: explicitX ?? inferredX ?? "x",
+    yKey: explicitY ?? inferredY ?? "y"
+  };
+}
 function computeScales(width, height, type, series, xKey, yKey, margin) {
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
@@ -386,9 +402,9 @@ function Chart({
   const svgRef = useRef(null);
   const tooltipRef = useRef(null);
   const [width, setWidth] = useState(DEFAULT_WIDTH);
+  const [isLoading, setIsLoading] = useState(true);
   const { type, series, xAxis, yAxis, legend } = data;
-  const xKey = xAxis?.key ?? "x";
-  const yKey = yAxis?.key ?? "y";
+  const { xKey, yKey } = inferAxisKeys(series, xAxis?.key, yAxis?.key);
   const height = DEFAULT_HEIGHT;
   const isCompact = containerCtx.tier === "compact";
   const margin = isCompact ? {
@@ -449,6 +465,7 @@ function Chart({
     if (legend) {
       renderLegend(sel, series, margin.left, margin.top, isCompact ? "10px" : void 0);
     }
+    setIsLoading(false);
   }, [
     scales,
     type,
@@ -470,6 +487,7 @@ function Chart({
     "div",
     {
       ref: containerRef,
+      "data-glyph-loading": isLoading || void 0,
       style: {
         position: "relative",
         width: "100%",
@@ -1331,6 +1349,13 @@ var timelineDefinition = {
 // src/utils/measureText.ts
 var measurementCache = /* @__PURE__ */ new WeakMap();
 function measurePlainText(text, style) {
+  if (typeof document === "undefined") {
+    const avgCharWidth = parseInt(style.fontSize) * 0.6;
+    return {
+      width: text.length * avgCharWidth,
+      height: parseInt(style.fontSize) * 1.2
+    };
+  }
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -1348,6 +1373,10 @@ function measurePlainText(text, style) {
   return { width, height };
 }
 function measureHtmlText(content, style) {
+  if (typeof document === "undefined") {
+    const plainText = flattenInlineNodes(content);
+    return measurePlainText(plainText, style);
+  }
   const cached = measurementCache.get(content);
   if (cached) {
     return cached;
@@ -1376,6 +1405,28 @@ function measureHtmlText(content, style) {
   measurementCache.set(content, dimensions);
   return dimensions;
 }
+function flattenInlineNodes(nodes) {
+  return nodes.map((node) => {
+    switch (node.type) {
+      case "text":
+        return node.value;
+      case "inlineCode":
+        return node.value;
+      case "strong":
+      case "emphasis":
+      case "delete":
+        return flattenInlineNodes(node.children);
+      case "link":
+        return flattenInlineNodes(node.children);
+      case "image":
+        return node.alt ?? "";
+      case "break":
+        return "\n";
+      default:
+        return "";
+    }
+  }).join("");
+}
 function inlineNodesToHtml(nodes) {
   return nodes.map((node) => {
     switch (node.type) {
@@ -1401,6 +1452,9 @@ function inlineNodesToHtml(nodes) {
   }).join("");
 }
 function escapeHtml(str) {
+  if (typeof document === "undefined") {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
   const div = document.createElement("div");
   div.textContent = str;
   return div.innerHTML;
@@ -1607,16 +1661,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") {
@@ -1989,6 +2043,7 @@ function Graph({
   const svgRef = useRef(null);
   const rootRef = useRef(null);
   const groupIndex = useRef(/* @__PURE__ */ new Map());
+  const [isLoading, setIsLoading] = useState(true);
   const layoutResult = useMemo(() => {
     const direction = resolveLayout(data);
     if (direction === "force") {
@@ -2029,9 +2084,10 @@ function Graph({
     if (rootElement) {
       rootRef.current = rootElement;
     }
+    setIsLoading(false);
   }, [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: [
+  return /* @__PURE__ */ jsxs("div", { className: "glyph-graph-container", "data-glyph-loading": isLoading || void 0, children: [
     /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
       /* @__PURE__ */ jsx(
         "svg",
@@ -3774,7 +3830,7 @@ var DIRECTION_MAP = {
   "bottom-up": "UP"
 };
 function buildElkNode(node) {
-  if (node.type === "zone" && node.children?.length) {
+  if (node.children?.length) {
     return {
       id: node.id,
       labels: [{ text: node.label }],
@@ -3818,7 +3874,7 @@ function collectNodes(elkNode, nodeMap, offsetX, offsetY, nodes, zones, depth, z
   const absX = offsetX + (elkNode.x ?? 0);
   const absY = offsetY + (elkNode.y ?? 0);
   const original = nodeMap.get(elkNode.id);
-  if (original?.type === "zone" && elkNode.children?.length) {
+  if (original?.children?.length && elkNode.children?.length) {
     zones.push({
       id: elkNode.id,
       label: original.label,
@@ -3855,7 +3911,7 @@ function flattenNodeMap(children, map) {
 function buildAncestorMap(children, ancestors, map) {
   for (const node of children) {
     map.set(node.id, [...ancestors]);
-    if (node.type === "zone" && node.children) {
+    if (node.children?.length) {
       buildAncestorMap(node.children, [...ancestors, node.id], map);
     }
   }
@@ -4013,7 +4069,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);
@@ -4026,10 +4082,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) {
@@ -4097,10 +4155,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) => {
@@ -4112,67 +4179,78 @@ 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",
+      "data-glyph-loading": !layout || void 0,
+      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 = [];
   for (const child of children) {
-    if (child.type === "zone" && child.children) {
+    if (child.children?.length) {
       result.push(...flattenNodes(child.children, child.label));
     } else {
       result.push({ id: child.id, label: child.label, zone });
@@ -4183,7 +4261,7 @@ function flattenNodes(children, zone) {
 function countLeafNodes(children) {
   let count = 0;
   for (const child of children) {
-    if (child.type === "zone" && child.children) {
+    if (child.children?.length) {
       count += countLeafNodes(child.children);
     } else {
       count++;
@@ -5504,6 +5582,10 @@ function renderRatingGroup(items, keyPrefix) {
     );
   }) }, keyPrefix);
 }
+function cssEscape(value) {
+  if (typeof CSS !== "undefined" && CSS.escape) return CSS.escape(value);
+  return value.replace(/([^\w-])/g, "\\$1");
+}
 function Infographic({
   data,
   block,
@@ -5556,7 +5638,7 @@ function Infographic({
     borderLeft: "3px solid var(--glyph-infographic-accent, #3b82f6)",
     paddingLeft: "var(--glyph-spacing-sm, 0.5rem)"
   };
-  const printCss = useGrid ? `@media print { #${CSS.escape(baseId)} [data-layout="grid"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } #${CSS.escape(baseId)} [data-layout="grid"] > div { break-inside: avoid; } }` : "";
+  const printCss = useGrid ? `@media print { #${cssEscape(baseId)} [data-layout="grid"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } #${cssEscape(baseId)} [data-layout="grid"] > div { break-inside: avoid; } }` : "";
   let progressColorOffset = 0;
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Infographic", style: containerStyle11, children: [
     printCss && /* @__PURE__ */ jsx("style", { children: printCss }),
@@ -7362,6 +7444,39 @@ var annotateDefinition = {
   render: Annotate
 };
 
-export { Accordion, Annotate, Architecture, Callout, Card, Chart, CodeDiff, Comparison, Equation, FileTree, Flowchart, Form, Graph, Infographic, Kanban, Kpi, Matrix, MindMap, Poll, Quiz, Ranker, Rating, Relation, Sequence, Slider, Steps, Table, Tabs, Timeline, accordionDefinition, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+// src/index.ts
+var allComponentDefinitions = [
+  calloutDefinition,
+  chartDefinition,
+  stepsDefinition,
+  tableDefinition,
+  tabsDefinition,
+  timelineDefinition,
+  graphDefinition,
+  relationDefinition,
+  kpiDefinition,
+  accordionDefinition,
+  comparisonDefinition,
+  codeDiffDefinition,
+  flowchartDefinition,
+  fileTreeDefinition,
+  sequenceDefinition,
+  architectureDefinition,
+  mindMapDefinition,
+  equationDefinition,
+  quizDefinition,
+  cardDefinition,
+  infographicDefinition,
+  pollDefinition,
+  ratingDefinition,
+  rankerDefinition,
+  sliderDefinition,
+  matrixDefinition,
+  formDefinition,
+  kanbanDefinition,
+  annotateDefinition
+];
+
+export { Accordion, Annotate, Architecture, Callout, Card, Chart, CodeDiff, Comparison, Equation, FileTree, Flowchart, Form, Graph, Infographic, Kanban, Kpi, Matrix, MindMap, Poll, Quiz, Ranker, Rating, Relation, Sequence, Slider, Steps, Table, Tabs, Timeline, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map