@glyphjs/components 0.5.1 → 0.7.0

package/dist/index.cjs

@@ -271,6 +271,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;
@@ -411,9 +427,9 @@ function Chart({
   const svgRef = react.useRef(null);
   const tooltipRef = react.useRef(null);
   const [width, setWidth] = react.useState(DEFAULT_WIDTH);
+  const [isLoading, setIsLoading] = react.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 ? {
@@ -474,6 +490,7 @@ function Chart({
     if (legend) {
       renderLegend(sel, series, margin.left, margin.top, isCompact ? "10px" : void 0);
     }
+    setIsLoading(false);
   }, [
     scales,
     type,
@@ -495,6 +512,7 @@ function Chart({
     "div",
     {
       ref: containerRef,
+      "data-glyph-loading": isLoading || void 0,
       style: {
         position: "relative",
         width: "100%",
@@ -1356,6 +1374,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) {
@@ -1373,6 +1398,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;
@@ -1401,6 +1430,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) {
@@ -1426,6 +1477,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;
@@ -1632,16 +1686,16 @@ function useZoomInteraction({
     };
   }, [interactionMode, svgRef]);
   const zoomBehavior = react.useMemo(() => {
-    const zoom3 = d32__namespace.zoom().scaleExtent([0.1, 4]);
-    if (typeof zoom3.filter === "function") {
-      zoom3.filter(filterFunction);
+    const zoom2 = d32__namespace.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__namespace.select(rootRef.current).attr("transform", event.transform.toString());
       }
     });
-    return zoom3;
+    return zoom2;
   }, [filterFunction, rootRef]);
   const handleActivate = react.useCallback(() => {
     if (interactionMode === "click-to-activate") {
@@ -2014,6 +2068,7 @@ function Graph({
   const svgRef = react.useRef(null);
   const rootRef = react.useRef(null);
   const groupIndex = react.useRef(/* @__PURE__ */ new Map());
+  const [isLoading, setIsLoading] = react.useState(true);
   const layoutResult = react.useMemo(() => {
     const direction = resolveLayout(data);
     if (direction === "force") {
@@ -2054,9 +2109,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__ */ jsxRuntime.jsxs("div", { className: "glyph-graph-container", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "glyph-graph-container", "data-glyph-loading": isLoading || void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
@@ -3799,7 +3855,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 }],
@@ -3843,7 +3899,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,
@@ -3880,7 +3936,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);
     }
   }
@@ -4038,7 +4094,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__namespace.select(svgElement);
   svg.selectAll("*").remove();
   const width = Math.max(layout.width, 200);
@@ -4051,10 +4107,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__namespace.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) {
@@ -4122,10 +4180,19 @@ function renderArchitecture(svgElement, layout) {
 }
 function Architecture({
   data,
-  container
+  container,
+  block
 }) {
   const svgRef = react.useRef(null);
+  const rootRef = react.useRef(null);
+  const containerRef = react.useRef(null);
   const [layout, setLayout] = react.useState(null);
+  const { overlayProps, zoomBehavior, zoomIn, zoomOut, resetZoom } = useZoomInteraction({
+    svgRef,
+    rootRef,
+    interactionMode: data.interactionMode ?? "modifier-key",
+    blockId: block.id
+  });
   react.useEffect(() => {
     let cancelled = false;
     computeArchitectureLayout(data).then((result) => {
@@ -4137,67 +4204,78 @@ function Architecture({
   }, [data]);
   react.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__ */ jsxRuntime.jsxs("div", { className: "glyph-architecture-container", children: [
-    !layout && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("table", { className: "sr-only", "aria-label": "Architecture data", style: SR_ONLY_STYLE6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("caption", { children: "Architecture nodes and connections" }),
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Node" }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Zone" }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Connections" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("tr", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("td", { children: node.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { children: node.zone ?? "" }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { children: connections })
-        ] }, node.id);
-      }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "glyph-architecture-container",
+      "data-glyph-loading": !layout || void 0,
+      style: { position: "relative" },
+      children: [
+        !layout && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(InteractionOverlay, { ...overlayProps }),
+        layout && data.showZoomControls !== false && /* @__PURE__ */ jsxRuntime.jsx(ZoomControls, { onZoomIn: zoomIn, onZoomOut: zoomOut, onReset: resetZoom }),
+        /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "sr-only", "aria-label": "Architecture data", style: SR_ONLY_STYLE6, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("caption", { children: "Architecture nodes and connections" }),
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Node" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Zone" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Connections" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("td", { children: node.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { children: node.zone ?? "" }),
+              /* @__PURE__ */ jsxRuntime.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 });
@@ -4208,7 +4286,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++;
@@ -5529,6 +5607,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,
@@ -5581,7 +5663,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__ */ jsxRuntime.jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Infographic", style: containerStyle11, children: [
     printCss && /* @__PURE__ */ jsxRuntime.jsx("style", { children: printCss }),
@@ -7387,6 +7469,39 @@ var annotateDefinition = {
   render: Annotate
 };
 
+// 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
+];
+
 exports.Accordion = Accordion;
 exports.Annotate = Annotate;
 exports.Architecture = Architecture;
@@ -7417,6 +7532,7 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Timeline = Timeline;
 exports.accordionDefinition = accordionDefinition;
+exports.allComponentDefinitions = allComponentDefinitions;
 exports.annotateDefinition = annotateDefinition;
 exports.architectureDefinition = architectureDefinition;
 exports.calloutDefinition = calloutDefinition;