@glyphjs/components 0.6.0 → 0.7.1

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;
@@ -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);
     }
   }
@@ -4159,6 +4215,7 @@ function Architecture({
     {
       ref: containerRef,
       className: "glyph-architecture-container",
+      "data-glyph-loading": !layout || void 0,
       style: { position: "relative" },
       children: [
         !layout && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4218,7 +4275,7 @@ function Architecture({
 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 });
@@ -4229,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++;
@@ -5550,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,
@@ -5602,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 }),
@@ -7408,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;
@@ -7438,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;