@glyphjs/components 0.1.0

package/dist/index.cjs

@@ -0,0 +1,4925 @@
+'use strict';
+
+var schemas = require('@glyphjs/schemas');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var d32 = require('d3');
+var dagre = require('dagre');
+var katex = require('katex');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var d32__namespace = /*#__PURE__*/_interopNamespace(d32);
+var dagre__default = /*#__PURE__*/_interopDefault(dagre);
+var katex__default = /*#__PURE__*/_interopDefault(katex);
+
+// src/callout/index.ts
+var CALLOUT_ICONS = {
+  info: "\u2139\uFE0F",
+  warning: "\u26A0\uFE0F",
+  error: "\u274C",
+  tip: "\u{1F4A1}"
+};
+var CALLOUT_LABELS = {
+  info: "Information",
+  warning: "Warning",
+  error: "Error",
+  tip: "Tip"
+};
+function Callout({ data }) {
+  const { type, title, content } = data;
+  const containerStyle3 = {
+    backgroundColor: `var(--glyph-callout-${type}-bg)`,
+    borderLeft: `4px solid var(--glyph-callout-${type}-border)`,
+    borderRadius: "var(--glyph-radius-md, 0.1875rem)",
+    padding: "var(--glyph-spacing-md, 1rem)",
+    margin: "var(--glyph-spacing-sm, 0.5rem) 0",
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)",
+    display: "flex",
+    gap: "var(--glyph-spacing-sm, 0.5rem)",
+    alignItems: "flex-start"
+  };
+  const iconStyle = {
+    flexShrink: 0,
+    fontSize: "1.25em",
+    lineHeight: 1
+  };
+  const bodyStyle2 = {
+    flex: 1,
+    minWidth: 0
+  };
+  const titleStyle2 = {
+    fontWeight: 700,
+    marginBottom: "var(--glyph-spacing-xs, 0.25rem)"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "note", "aria-label": CALLOUT_LABELS[type], style: containerStyle3, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: iconStyle, "aria-hidden": "true", children: CALLOUT_ICONS[type] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bodyStyle2, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyle2, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: content })
+    ] })
+  ] });
+}
+
+// src/callout/index.ts
+var calloutDefinition = {
+  type: "ui:callout",
+  schema: schemas.calloutSchema,
+  render: Callout
+};
+var DEFAULT_WIDTH = 600;
+var DEFAULT_HEIGHT = 400;
+var MARGIN = { top: 20, right: 30, bottom: 50, left: 60 };
+var COLOR_SCHEME = [
+  "#00d4aa",
+  // cyan-green
+  "#b44dff",
+  // purple
+  "#22c55e",
+  // green
+  "#e040fb",
+  // magenta
+  "#00e5ff",
+  // teal
+  "#84cc16",
+  // lime
+  "#f472b6",
+  // rose
+  "#fb923c",
+  // orange
+  "#818cf8",
+  // indigo
+  "#38bdf8"
+  // sky
+];
+function getNumericValue(d, key) {
+  const v = d[key];
+  return typeof v === "number" ? v : Number(v);
+}
+function getAllNumericValues(series, key) {
+  return series.flatMap(
+    (s) => s.data.map((d) => getNumericValue(d, key))
+  );
+}
+function renderAxes(g, xScale, yScale, xAxisConfig, yAxisConfig, innerWidth, innerHeight) {
+  const xAxisG = g.append("g").attr("class", "x-axis").attr("transform", `translate(0,${String(innerHeight)})`);
+  if ("bandwidth" in xScale) {
+    xAxisG.call(
+      d32__namespace.axisBottom(xScale)
+    );
+  } else {
+    xAxisG.call(
+      d32__namespace.axisBottom(xScale)
+    );
+  }
+  xAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, #1a2035)");
+  if (xAxisConfig?.label) {
+    g.append("text").attr("class", "x-label").attr("x", innerWidth / 2).attr("y", innerHeight + MARGIN.bottom - 6).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(xAxisConfig.label);
+  }
+  const yAxisG = g.append("g").attr("class", "y-axis");
+  yAxisG.call(
+    d32__namespace.axisLeft(yScale)
+  );
+  yAxisG.selectAll("text, line, path").attr("fill", "var(--glyph-text, #1a2035)").attr("stroke", "var(--glyph-grid, #1a2035)");
+  if (yAxisConfig?.label) {
+    g.append("text").attr("class", "y-label").attr("transform", "rotate(-90)").attr("x", -innerHeight / 2).attr("y", -MARGIN.left + 14).attr("text-anchor", "middle").attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", "12px").text(yAxisConfig.label);
+  }
+}
+function renderGridLines(g, yScale, innerWidth) {
+  g.append("g").attr("class", "grid").selectAll("line").data(yScale.ticks()).join("line").attr("x1", 0).attr("x2", innerWidth).attr("y1", (d) => yScale(d)).attr("y2", (d) => yScale(d)).attr("stroke", "var(--glyph-grid, #1a2035)").attr("stroke-opacity", 0.5).attr("stroke-dasharray", "2,2");
+}
+function renderLineSeries(g, seriesData, xScalePoint, yScale, yKey, xKey, color3, index, seriesName, showTooltip, hideTooltip) {
+  const line6 = d32__namespace.line().x((d) => xScalePoint(d)).y((d) => yScale(getNumericValue(d, yKey)));
+  g.append("path").datum(seriesData).attr("fill", "none").attr("stroke", color3).attr("stroke-width", 2).attr("d", line6);
+  g.selectAll(`.dot-${String(index)}`).data(seriesData).join("circle").attr("class", `dot-${String(index)}`).attr("cx", (d) => xScalePoint(d)).attr("cy", (d) => yScale(getNumericValue(d, yKey))).attr("r", 3.5).attr("fill", color3).attr("cursor", "pointer").on("mouseenter", function(event, d) {
+    showTooltip(event, `${seriesName}: ${String(d[xKey] ?? "")}, ${String(d[yKey] ?? "")}`);
+  }).on("mouseleave", () => hideTooltip());
+}
+function renderAreaSeries(g, seriesData, xScalePoint, yScale, yKey, xKey, innerHeight, color3, index, seriesName, showTooltip, hideTooltip) {
+  const area2 = d32__namespace.area().x((d) => xScalePoint(d)).y0(innerHeight).y1((d) => yScale(getNumericValue(d, yKey)));
+  g.append("path").datum(seriesData).attr("fill", color3).attr("fill-opacity", 0.3).attr("stroke", color3).attr("stroke-width", 1.5).attr("d", area2);
+  g.selectAll(`.dot-${String(index)}`).data(seriesData).join("circle").attr("class", `dot-${String(index)}`).attr("cx", (d) => xScalePoint(d)).attr("cy", (d) => yScale(getNumericValue(d, yKey))).attr("r", 3).attr("fill", color3).attr("cursor", "pointer").on("mouseenter", function(event, d) {
+    showTooltip(event, `${seriesName}: ${String(d[xKey] ?? "")}, ${String(d[yKey] ?? "")}`);
+  }).on("mouseleave", () => hideTooltip());
+}
+function renderBarSeries(g, seriesData, xScale, yScale, yKey, xKey, color3, index, seriesCount, innerHeight, seriesName, showTooltip, hideTooltip) {
+  if (!("bandwidth" in xScale)) return;
+  const band = xScale;
+  const barWidth = band.bandwidth() / seriesCount;
+  g.selectAll(`.bar-${String(index)}`).data(seriesData).join("rect").attr("class", `bar-${String(index)}`).attr("x", (d) => (band(String(d[xKey] ?? "")) ?? 0) + barWidth * index).attr("y", (d) => yScale(getNumericValue(d, yKey))).attr("width", barWidth - 1).attr("height", (d) => innerHeight - yScale(getNumericValue(d, yKey))).attr("fill", color3).attr("cursor", "pointer").on("mouseenter", function(event, d) {
+    showTooltip(event, `${seriesName}: ${String(d[xKey] ?? "")}, ${String(d[yKey] ?? "")}`);
+  }).on("mouseleave", () => hideTooltip());
+}
+function renderOHLCSeries(g, seriesData, xScale, xScalePoint, yScale, innerWidth, seriesName, showTooltip, hideTooltip) {
+  const candleWidth = "bandwidth" in xScale ? xScale.bandwidth() * 0.6 : Math.max(4, innerWidth / (seriesData.length * 2));
+  seriesData.forEach((d) => {
+    const open = getNumericValue(d, "open");
+    const close = getNumericValue(d, "close");
+    const high = getNumericValue(d, "high");
+    const low = getNumericValue(d, "low");
+    const cx = xScalePoint(d);
+    const isBullish = close >= open;
+    const candleColor = isBullish ? "var(--glyph-chart-bullish, #22c55e)" : "var(--glyph-chart-bearish, #f87171)";
+    g.append("line").attr("x1", cx).attr("x2", cx).attr("y1", yScale(high)).attr("y2", yScale(low)).attr("stroke", candleColor).attr("stroke-width", 1);
+    const bodyTop = yScale(Math.max(open, close));
+    const bodyBottom = yScale(Math.min(open, close));
+    const bodyHeight = Math.max(1, bodyBottom - bodyTop);
+    g.append("rect").attr("x", cx - candleWidth / 2).attr("y", bodyTop).attr("width", candleWidth).attr("height", bodyHeight).attr("fill", candleColor).attr("stroke", candleColor).attr("cursor", "pointer").on("mouseenter", (event) => {
+      showTooltip(
+        event,
+        `${seriesName}: O=${String(open)} H=${String(high)} L=${String(low)} C=${String(close)}`
+      );
+    }).on("mouseleave", () => hideTooltip());
+  });
+}
+function renderLegend(sel, series, marginLeft, marginTop, fontSize = "12px") {
+  const legendG = sel.append("g").attr("transform", `translate(${String(marginLeft + 8)},${String(marginTop)})`);
+  series.forEach((s, i) => {
+    const color3 = COLOR_SCHEME[i % COLOR_SCHEME.length] ?? "var(--glyph-text, #1a2035)";
+    const row = legendG.append("g").attr("transform", `translate(0,${String(i * 20)})`);
+    row.append("rect").attr("width", 14).attr("height", 14).attr("fill", color3).attr("rx", 2);
+    row.append("text").attr("x", 20).attr("y", 11).attr("fill", "var(--glyph-text, #1a2035)").attr("font-size", fontSize).text(s.name);
+  });
+}
+function ChartAccessibleTable({
+  type,
+  series,
+  xKey,
+  yKey,
+  xLabel,
+  yLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: 0,
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0,0,0,0)",
+        whiteSpace: "nowrap",
+        border: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("caption", { children: [
+          type,
+          " chart data"
+        ] }),
+        series.map((s, si) => /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan: 2, children: s.name }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { children: xLabel ?? xKey }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { children: yLabel ?? yKey })
+          ] }),
+          s.data.map((d, di) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { children: String(d[xKey] ?? "") }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { children: type === "ohlc" ? `O=${String(d["open"] ?? "")} H=${String(d["high"] ?? "")} L=${String(d["low"] ?? "")} C=${String(d["close"] ?? "")}` : String(d[yKey] ?? "") })
+          ] }, di))
+        ] }, si))
+      ]
+    }
+  );
+}
+function computeScales(width, height, type, series, xKey, yKey, margin) {
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const firstRecord = series[0]?.data[0];
+  const xIsNumeric = firstRecord != null && typeof firstRecord[xKey] === "number";
+  let xScale;
+  let xScalePoint;
+  if (type === "bar" || !xIsNumeric) {
+    const allLabels = series.flatMap(
+      (s) => s.data.map((d) => String(d[xKey] ?? ""))
+    );
+    const uniqueLabels = [...new Set(allLabels)];
+    const band = d32__namespace.scaleBand().domain(uniqueLabels).range([0, innerWidth]).padding(0.2);
+    xScale = band;
+    xScalePoint = (d) => (band(String(d[xKey] ?? "")) ?? 0) + band.bandwidth() / 2;
+  } else {
+    const allX = getAllNumericValues(series, xKey);
+    const linear = d32__namespace.scaleLinear().domain(d32__namespace.extent(allX)).nice().range([0, innerWidth]);
+    xScale = linear;
+    xScalePoint = (d) => linear(getNumericValue(d, xKey));
+  }
+  let yMin;
+  let yMax;
+  if (type === "ohlc") {
+    const lows = getAllNumericValues(series, "low");
+    const highs = getAllNumericValues(series, "high");
+    yMin = d32__namespace.min(lows) ?? 0;
+    yMax = d32__namespace.max(highs) ?? 0;
+  } else {
+    const allY = getAllNumericValues(series, yKey);
+    yMin = d32__namespace.min(allY) ?? 0;
+    yMax = d32__namespace.max(allY) ?? 0;
+  }
+  const yScale = d32__namespace.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0]);
+  return { xScale, xScalePoint, yScale, innerWidth, innerHeight };
+}
+function Chart({
+  data,
+  container: containerCtx
+}) {
+  const containerRef = react.useRef(null);
+  const svgRef = react.useRef(null);
+  const tooltipRef = react.useRef(null);
+  const [width, setWidth] = react.useState(DEFAULT_WIDTH);
+  const { type, series, xAxis, yAxis, legend } = data;
+  const xKey = xAxis?.key ?? "x";
+  const yKey = yAxis?.key ?? "y";
+  const height = DEFAULT_HEIGHT;
+  const isCompact = containerCtx.tier === "compact";
+  const margin = isCompact ? {
+    top: Math.round(MARGIN.top * 0.7),
+    right: Math.round(MARGIN.right * 0.7),
+    bottom: Math.round(MARGIN.bottom * 0.7),
+    left: Math.round(MARGIN.left * 0.7)
+  } : MARGIN;
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const cr = entry.contentRect;
+        if (cr.width > 0) {
+          setWidth(cr.width);
+        }
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+  const showTooltip = react.useCallback((event, text) => {
+    const tip = tooltipRef.current;
+    if (!tip) return;
+    tip.textContent = text;
+    tip.style.display = "block";
+    tip.style.left = `${String(event.offsetX + 12)}px`;
+    tip.style.top = `${String(event.offsetY - 12)}px`;
+  }, []);
+  const hideTooltip = react.useCallback(() => {
+    const tip = tooltipRef.current;
+    if (!tip) return;
+    tip.style.display = "none";
+  }, []);
+  const scales = react.useMemo(
+    () => computeScales(width, height, type, series, xKey, yKey, margin),
+    [width, height, type, series, xKey, yKey, margin]
+  );
+  react.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || series.length === 0) return;
+    const sel = d32__namespace.select(svg);
+    sel.selectAll("*").remove();
+    const { xScale, xScalePoint, yScale, innerWidth, innerHeight } = scales;
+    const g = sel.append("g").attr("transform", `translate(${String(margin.left)},${String(margin.top)})`);
+    renderAxes(g, xScale, yScale, xAxis, yAxis, innerWidth, innerHeight);
+    renderGridLines(g, yScale, innerWidth);
+    series.forEach((s, i) => {
+      const color3 = COLOR_SCHEME[i % COLOR_SCHEME.length] ?? "#333";
+      switch (type) {
+        case "line":
+          renderLineSeries(
+            g,
+            s.data,
+            xScalePoint,
+            yScale,
+            yKey,
+            xKey,
+            color3,
+            i,
+            s.name,
+            showTooltip,
+            hideTooltip
+          );
+          break;
+        case "area":
+          renderAreaSeries(
+            g,
+            s.data,
+            xScalePoint,
+            yScale,
+            yKey,
+            xKey,
+            innerHeight,
+            color3,
+            i,
+            s.name,
+            showTooltip,
+            hideTooltip
+          );
+          break;
+        case "bar":
+          renderBarSeries(
+            g,
+            s.data,
+            xScale,
+            yScale,
+            yKey,
+            xKey,
+            color3,
+            i,
+            series.length,
+            innerHeight,
+            s.name,
+            showTooltip,
+            hideTooltip
+          );
+          break;
+        case "ohlc":
+          renderOHLCSeries(
+            g,
+            s.data,
+            xScale,
+            xScalePoint,
+            yScale,
+            innerWidth,
+            s.name,
+            showTooltip,
+            hideTooltip
+          );
+          break;
+      }
+    });
+    if (legend) {
+      renderLegend(sel, series, margin.left, margin.top, isCompact ? "10px" : void 0);
+    }
+  }, [
+    scales,
+    type,
+    series,
+    xKey,
+    yKey,
+    xAxis,
+    yAxis,
+    legend,
+    margin,
+    isCompact,
+    showTooltip,
+    hideTooltip
+  ]);
+  const ariaLabel = `${type} chart with ${String(series.length)} series: ${series.map((s) => s.name).join(", ")}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        position: "relative",
+        width: "100%",
+        fontFamily: "var(--glyph-font-body, system-ui, sans-serif)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            ref: svgRef,
+            role: "img",
+            "aria-label": ariaLabel,
+            width,
+            height,
+            viewBox: `0 0 ${String(width)} ${String(height)}`,
+            style: { display: "block", maxWidth: "100%", height: "auto" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: tooltipRef,
+            role: "tooltip",
+            "aria-live": "polite",
+            style: {
+              display: "none",
+              position: "absolute",
+              pointerEvents: "none",
+              backgroundColor: "var(--glyph-tooltip-bg, rgba(0,0,0,0.8))",
+              color: "var(--glyph-tooltip-text, #d4dae3)",
+              padding: "4px 8px",
+              borderRadius: "3px",
+              fontSize: "12px",
+              whiteSpace: "nowrap",
+              zIndex: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ChartAccessibleTable,
+          {
+            type,
+            series,
+            xKey,
+            yKey,
+            xLabel: xAxis?.label,
+            yLabel: yAxis?.label
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/chart/index.ts
+var chartDefinition = {
+  type: "ui:chart",
+  schema: schemas.chartSchema,
+  render: Chart
+};
+var STATUS_LABELS = {
+  pending: "Pending",
+  active: "Active",
+  completed: "Completed"
+};
+function Steps({ data }) {
+  const { steps } = data;
+  const listStyle = {
+    listStyle: "none",
+    padding: 0,
+    margin: "var(--glyph-spacing-sm, 0.5rem) 0",
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { role: "list", style: listStyle, children: steps.map((step, index) => {
+    const status = step.status ?? "pending";
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        "aria-label": `Step ${String(index + 1)}: ${step.title} \u2014 ${STATUS_LABELS[status]}`,
+        ...status === "active" ? { "aria-current": "step" } : {},
+        style: itemStyle(isLast),
+        children: [
+          !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: connectorStyle(status) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: indicatorStyle(status), children: status === "completed" ? "\u2713" : "" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bodyStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyle(status), children: step.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: contentStyle(status), children: step.content })
+          ] })
+        ]
+      },
+      index
+    );
+  }) });
+}
+var INDICATOR_SIZE = "1.5rem";
+var CONNECTOR_WIDTH = "2px";
+function colorForStatus(status) {
+  switch (status) {
+    case "pending":
+      return "var(--glyph-steps-pending-color, #7a8599)";
+    case "active":
+      return "var(--glyph-steps-active-color, #00d4aa)";
+    case "completed":
+      return "var(--glyph-steps-completed-color, #22c55e)";
+  }
+}
+function itemStyle(isLast) {
+  return {
+    position: "relative",
+    display: "flex",
+    gap: "var(--glyph-spacing-sm, 0.75rem)",
+    alignItems: "flex-start",
+    paddingBottom: isLast ? 0 : "var(--glyph-spacing-md, 1.25rem)"
+  };
+}
+function connectorStyle(status) {
+  return {
+    position: "absolute",
+    left: `calc(${INDICATOR_SIZE} / 2 - ${CONNECTOR_WIDTH} / 2)`,
+    top: INDICATOR_SIZE,
+    bottom: 0,
+    width: CONNECTOR_WIDTH,
+    backgroundColor: status === "completed" ? "var(--glyph-steps-completed-color, #22c55e)" : "var(--glyph-steps-connector-color, #d0d8e4)"
+  };
+}
+function indicatorStyle(status) {
+  const color3 = colorForStatus(status);
+  return {
+    flexShrink: 0,
+    width: INDICATOR_SIZE,
+    height: INDICATOR_SIZE,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "0.85rem",
+    fontWeight: 700,
+    lineHeight: 1,
+    color: status === "completed" ? "#fff" : color3,
+    backgroundColor: status === "completed" ? color3 : "transparent",
+    border: status === "completed" ? "none" : `${CONNECTOR_WIDTH} solid ${color3}`,
+    boxSizing: "border-box"
+  };
+}
+var bodyStyle = {
+  flex: 1,
+  minWidth: 0,
+  paddingTop: "0.1rem"
+};
+function titleStyle(status) {
+  return {
+    fontWeight: 600,
+    color: status === "pending" ? "var(--glyph-steps-pending-color, #7a8599)" : "var(--glyph-text, #1a2035)"
+  };
+}
+function contentStyle(status) {
+  return {
+    marginTop: "var(--glyph-spacing-xs, 0.25rem)",
+    fontSize: "0.9em",
+    color: status === "pending" ? "var(--glyph-steps-pending-color, #7a8599)" : "var(--glyph-text-muted, #7a8599)"
+  };
+}
+
+// src/steps/index.ts
+var stepsDefinition = {
+  type: "ui:steps",
+  schema: schemas.stepsSchema,
+  render: Steps
+};
+function nextDirection(current) {
+  if (current === "none") return "ascending";
+  if (current === "ascending") return "descending";
+  return "none";
+}
+function computeAggregation(rows, column, fn) {
+  if (fn === "count") {
+    return String(rows.length);
+  }
+  const values = rows.map((r) => r[column]).filter((v) => typeof v === "number" && !Number.isNaN(v));
+  if (values.length === 0) return "";
+  switch (fn) {
+    case "sum":
+      return String(values.reduce((a, b) => a + b, 0));
+    case "avg":
+      return String(values.reduce((a, b) => a + b, 0) / values.length);
+    case "min":
+      return String(Math.min(...values));
+    case "max":
+      return String(Math.max(...values));
+  }
+}
+function sortIndicator(direction) {
+  if (direction === "ascending") return " \u25B2";
+  if (direction === "descending") return " \u25BC";
+  return "";
+}
+function TableAggregationFooter({
+  columns,
+  aggMap,
+  rows
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => {
+    const agg = aggMap.get(col.key);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        style: {
+          padding: "var(--glyph-table-cell-padding, 8px 12px)",
+          borderTop: "2px solid var(--glyph-table-border, #d0d8e4)",
+          fontWeight: "bold",
+          background: "var(--glyph-table-footer-bg, #e8ecf3)",
+          color: "var(--glyph-table-footer-color, inherit)"
+        },
+        children: agg ? computeAggregation(rows, col.key, agg.fn) : ""
+      },
+      col.key
+    );
+  }) }) });
+}
+function Table({ data, container }) {
+  const { columns, rows, aggregation } = data;
+  const [sort, setSort] = react.useState({ column: "", direction: "none" });
+  const [filters, setFilters] = react.useState({});
+  const filteredRows = react.useMemo(() => {
+    return rows.filter((row) => {
+      return columns.every((col) => {
+        if (!col.filterable) return true;
+        const filterValue = filters[col.key];
+        if (!filterValue) return true;
+        const cellValue = String(row[col.key] ?? "").toLowerCase();
+        return cellValue.includes(filterValue.toLowerCase());
+      });
+    });
+  }, [rows, columns, filters]);
+  const sortedRows = react.useMemo(() => {
+    if (sort.direction === "none" || !sort.column) return filteredRows;
+    return [...filteredRows].sort((a, b) => {
+      const aVal = a[sort.column];
+      const bVal = b[sort.column];
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      let cmp = 0;
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        cmp = aVal - bVal;
+      } else {
+        cmp = String(aVal).localeCompare(String(bVal));
+      }
+      return sort.direction === "ascending" ? cmp : -cmp;
+    });
+  }, [filteredRows, sort]);
+  const handleSort = (columnKey) => {
+    setSort((prev) => {
+      if (prev.column === columnKey) {
+        return { column: columnKey, direction: nextDirection(prev.direction) };
+      }
+      return { column: columnKey, direction: "ascending" };
+    });
+  };
+  const handleHeaderKeyDown = (e, columnKey) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSort(columnKey);
+    }
+  };
+  const handleFilterChange = (columnKey, value) => {
+    setFilters((prev) => ({ ...prev, [columnKey]: value }));
+  };
+  const hasFilters = columns.some((c) => c.filterable);
+  const aggMap = react.useMemo(() => {
+    if (!aggregation) return null;
+    const map = /* @__PURE__ */ new Map();
+    for (const agg of aggregation) {
+      map.set(agg.column, { fn: agg.function });
+    }
+    return map;
+  }, [aggregation]);
+  const isCompact = container.tier === "compact";
+  const tableEl = /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      role: "grid",
+      style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        border: "1px solid var(--glyph-table-border, #d0d8e4)",
+        fontFamily: "var(--glyph-font-body, inherit)",
+        fontSize: isCompact ? "0.8125rem" : "var(--glyph-table-font-size, 0.9rem)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => {
+            const isSorted = sort.column === col.key;
+            const direction = isSorted ? sort.direction : "none";
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": col.sortable ? direction : void 0,
+                tabIndex: col.sortable ? 0 : void 0,
+                role: col.sortable ? "columnheader" : void 0,
+                onClick: col.sortable ? () => handleSort(col.key) : void 0,
+                onKeyDown: col.sortable ? (e) => handleHeaderKeyDown(e, col.key) : void 0,
+                style: {
+                  padding: "var(--glyph-table-cell-padding, 8px 12px)",
+                  textAlign: "left",
+                  borderBottom: "2px solid var(--glyph-table-border, #d0d8e4)",
+                  background: "var(--glyph-table-header-bg, #e8ecf3)",
+                  color: "var(--glyph-table-header-color, inherit)",
+                  cursor: col.sortable ? "pointer" : "default",
+                  userSelect: col.sortable ? "none" : void 0,
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  col.label,
+                  col.sortable ? sortIndicator(direction) : ""
+                ]
+              },
+              col.key
+            );
+          }) }),
+          hasFilters && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              scope: "col",
+              style: { padding: "4px 8px", fontWeight: "normal" },
+              children: col.filterable ? /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  "aria-label": `Filter ${col.label}`,
+                  placeholder: `Filter ${col.label}...`,
+                  value: filters[col.key] ?? "",
+                  onChange: (e) => handleFilterChange(col.key, e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: "4px 6px",
+                    border: "1px solid var(--glyph-table-border, #d0d8e4)",
+                    borderRadius: "3px",
+                    fontSize: "inherit",
+                    boxSizing: "border-box",
+                    background: "var(--glyph-surface, #e8ecf3)",
+                    color: "var(--glyph-text, inherit)"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    width: "1px",
+                    height: "1px",
+                    overflow: "hidden",
+                    clip: "rect(0,0,0,0)",
+                    whiteSpace: "nowrap"
+                  },
+                  children: `No filter for ${col.label}`
+                }
+              )
+            },
+            `filter-${col.key}`
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: sortedRows.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+          "tr",
+          {
+            style: {
+              background: rowIdx % 2 === 0 ? "var(--glyph-table-row-bg, transparent)" : "var(--glyph-table-row-alt-bg, #f4f6fa)"
+            },
+            children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                style: {
+                  padding: "var(--glyph-table-cell-padding, 8px 12px)",
+                  borderBottom: "1px solid var(--glyph-table-border, #d0d8e4)",
+                  color: "var(--glyph-table-cell-color, inherit)"
+                },
+                children: String(row[col.key] ?? "")
+              },
+              col.key
+            ))
+          },
+          rowIdx
+        )) }),
+        aggMap && aggMap.size > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableAggregationFooter, { columns, aggMap, rows: sortedRows })
+      ]
+    }
+  );
+  if (isCompact) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto" }, children: tableEl });
+  }
+  return tableEl;
+}
+
+// src/table/index.ts
+var tableDefinition = {
+  type: "ui:table",
+  schema: schemas.tableSchema,
+  render: Table
+};
+function Tabs({ data, block }) {
+  const [activeIndex, setActiveIndex] = react.useState(0);
+  const tabRefs = react.useRef([]);
+  const tabs = data.tabs;
+  const baseId = `glyph-tabs-${block.id}`;
+  const focusTab = react.useCallback(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(index, tabs.length - 1));
+      setActiveIndex(clampedIndex);
+      tabRefs.current[clampedIndex]?.focus();
+    },
+    [tabs.length]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      switch (e.key) {
+        case "ArrowRight": {
+          e.preventDefault();
+          const next = (activeIndex + 1) % tabs.length;
+          focusTab(next);
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          const prev = (activeIndex - 1 + tabs.length) % tabs.length;
+          focusTab(prev);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          focusTab(0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          focusTab(tabs.length - 1);
+          break;
+        }
+      }
+    },
+    [activeIndex, focusTab, tabs.length]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        fontFamily: 'var(--glyph-font-body, "Inter", system-ui, sans-serif)',
+        border: "1px solid var(--glyph-border, #d0d8e4)",
+        borderRadius: "var(--glyph-radius-lg, 0.25rem)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "tablist",
+            "aria-label": "Tabs",
+            style: {
+              display: "flex",
+              borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+              backgroundColor: "var(--glyph-surface, #e8ecf3)",
+              margin: 0,
+              padding: 0
+            },
+            children: tabs.map((tab, index) => {
+              const isActive = index === activeIndex;
+              const tabId = `${baseId}-tab-${String(index)}`;
+              const panelId = `${baseId}-panel-${String(index)}`;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  id: tabId,
+                  ref: (el) => {
+                    tabRefs.current[index] = el;
+                  },
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-controls": panelId,
+                  tabIndex: isActive ? 0 : -1,
+                  onClick: () => setActiveIndex(index),
+                  onKeyDown: handleKeyDown,
+                  style: {
+                    padding: "10px 18px",
+                    border: "none",
+                    borderBottom: isActive ? "2px solid var(--glyph-accent, #00d4aa)" : "2px solid transparent",
+                    background: isActive ? "var(--glyph-surface-raised, #f4f6fa)" : "transparent",
+                    color: isActive ? "var(--glyph-heading, #0a0e1a)" : "var(--glyph-text-muted, #7a8599)",
+                    cursor: "pointer",
+                    fontFamily: "inherit",
+                    fontSize: "0.9rem",
+                    fontWeight: isActive ? 600 : 400,
+                    transition: "color 0.15s, border-color 0.15s, background 0.15s",
+                    outline: "revert",
+                    outlineOffset: "2px"
+                  },
+                  children: tab.label
+                },
+                tabId
+              );
+            })
+          }
+        ),
+        tabs.map((tab, index) => {
+          const isActive = index === activeIndex;
+          const tabId = `${baseId}-tab-${String(index)}`;
+          const panelId = `${baseId}-panel-${String(index)}`;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: panelId,
+              role: "tabpanel",
+              "aria-labelledby": tabId,
+              "aria-live": "polite",
+              hidden: !isActive,
+              tabIndex: 0,
+              style: {
+                padding: "16px",
+                backgroundColor: "var(--glyph-surface-raised, #f4f6fa)",
+                color: "var(--glyph-heading, #0a0e1a)",
+                lineHeight: 1.6
+              },
+              children: tab.content
+            },
+            panelId
+          );
+        })
+      ]
+    }
+  );
+}
+
+// src/tabs/index.ts
+var tabsDefinition = {
+  type: "ui:tabs",
+  schema: schemas.tabsSchema,
+  render: Tabs
+};
+var MARKER_RADIUS = 8;
+var LINE_THICKNESS = 2;
+var EVENT_SPACING_MIN = 80;
+var TYPE_PALETTE = [
+  "var(--glyph-timeline-color-1, #00d4aa)",
+  "var(--glyph-timeline-color-2, #b44dff)",
+  "var(--glyph-timeline-color-3, #22c55e)",
+  "var(--glyph-timeline-color-4, #e040fb)",
+  "var(--glyph-timeline-color-5, #00e5ff)",
+  "var(--glyph-timeline-color-6, #84cc16)",
+  "var(--glyph-timeline-color-7, #f472b6)",
+  "var(--glyph-timeline-color-8, #fb923c)"
+];
+function parseDate(raw) {
+  const d = new Date(raw);
+  if (!isNaN(d.getTime())) return d;
+  const ym = raw.match(/^(\d{4})-(\d{1,2})$/);
+  if (ym && ym[1] && ym[2]) return new Date(+ym[1], +ym[2] - 1, 1);
+  const q1 = raw.match(/^Q([1-4])\s+(\d{4})$/i);
+  if (q1 && q1[1] && q1[2]) return new Date(+q1[2], (+q1[1] - 1) * 3, 1);
+  const q2 = raw.match(/^(\d{4})-Q([1-4])$/i);
+  if (q2 && q2[1] && q2[2]) return new Date(+q2[1], (+q2[2] - 1) * 3, 1);
+  return /* @__PURE__ */ new Date(0);
+}
+function formatDate(raw) {
+  const d = parseDate(raw);
+  if (d.getTime() === 0) return raw;
+  return d.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function isoDate(raw) {
+  return parseDate(raw).toISOString().slice(0, 10);
+}
+function Timeline({ data }) {
+  const { events, orientation = "vertical" } = data;
+  const containerRef = react.useRef(null);
+  const isVertical = orientation === "vertical";
+  const sorted = [...events].map((e) => ({ ...e, _parsed: parseDate(e.date) })).sort((a, b) => a._parsed.getTime() - b._parsed.getTime());
+  const dates = sorted.map((e) => e._parsed);
+  const minDate = dates[0] ?? /* @__PURE__ */ new Date();
+  const maxDate = dates[dates.length - 1] ?? /* @__PURE__ */ new Date();
+  const totalLength = Math.max(sorted.length * EVENT_SPACING_MIN, 400);
+  const timeScale = d32.scaleTime().domain([minDate, maxDate]).range([MARKER_RADIUS + 20, totalLength - MARKER_RADIUS - 20]);
+  const typeValues = [...new Set(events.map((e) => e.type ?? "_default"))];
+  const colorScale = d32.scaleOrdinal().domain(typeValues).range(TYPE_PALETTE);
+  const positioned = sorted.map((e, i) => ({
+    event: e,
+    parsed: e._parsed,
+    position: dates.length === 1 ? totalLength / 2 : timeScale(e._parsed),
+    side: isVertical ? i % 2 === 0 ? "left" : "right" : i % 2 === 0 ? "top" : "bottom"
+  }));
+  const containerStyle3 = {
+    position: "relative",
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)",
+    ...isVertical ? { width: "100%", minHeight: totalLength } : { minHeight: 300, minWidth: totalLength }
+  };
+  const lineStyle = isVertical ? {
+    position: "absolute",
+    left: "50%",
+    top: 0,
+    bottom: 0,
+    width: LINE_THICKNESS,
+    backgroundColor: "var(--glyph-timeline-line, #d0d8e4)",
+    transform: "translateX(-50%)"
+  } : {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    right: 0,
+    height: LINE_THICKNESS,
+    backgroundColor: "var(--glyph-timeline-line, #d0d8e4)",
+    transform: "translateY(-50%)"
+  };
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: containerStyle3,
+      role: "img",
+      "aria-label": `Timeline with ${events.length} events`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: lineStyle, "aria-hidden": "true" }),
+        positioned.map((pe, idx) => {
+          const color3 = colorScale(pe.event.type ?? "_default");
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: eventContainerStyle(pe, isVertical), "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: connectorStyle2(pe, isVertical), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  width: MARKER_RADIUS * 2,
+                  height: MARKER_RADIUS * 2,
+                  borderRadius: "50%",
+                  backgroundColor: color3,
+                  border: "2px solid var(--glyph-timeline-marker-border, var(--glyph-bg, #f4f6fa))",
+                  boxShadow: "0 0 0 2px var(--glyph-border, #d0d8e4)",
+                  flexShrink: 0,
+                  zIndex: 1
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelStyle(pe, isVertical), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--glyph-timeline-date-size, 0.75rem)",
+                    color: "var(--glyph-timeline-date-color, #7a8599)",
+                    fontWeight: 600
+                  },
+                  children: formatDate(pe.event.date)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--glyph-timeline-title-size, 0.9rem)",
+                    fontWeight: 700,
+                    marginTop: 2
+                  },
+                  children: pe.event.title
+                }
+              ),
+              pe.event.description && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--glyph-timeline-desc-size, 0.8rem)",
+                    color: "var(--glyph-timeline-desc-color, #7a8599)",
+                    marginTop: 2
+                  },
+                  children: pe.event.description
+                }
+              )
+            ] })
+          ] }, idx);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "ol",
+          {
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              whiteSpace: "nowrap"
+            },
+            children: sorted.map((e, idx) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: isoDate(e.date), children: formatDate(e.date) }),
+              " \u2014 ",
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: e.title }),
+              e.description ? `: ${e.description}` : ""
+            ] }, idx))
+          }
+        )
+      ]
+    }
+  );
+  if (!isVertical) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", width: "100%" }, children: inner });
+  }
+  return inner;
+}
+function eventContainerStyle(pe, isVertical) {
+  if (isVertical) {
+    const isLeft = pe.side === "left";
+    return {
+      position: "absolute",
+      top: pe.position,
+      left: isLeft ? 0 : "50%",
+      right: isLeft ? "50%" : 0,
+      display: "flex",
+      flexDirection: isLeft ? "row-reverse" : "row",
+      alignItems: "center",
+      gap: 8,
+      transform: "translateY(-50%)"
+    };
+  }
+  const isTop = pe.side === "top";
+  return {
+    position: "absolute",
+    left: pe.position,
+    top: isTop ? 0 : "50%",
+    bottom: isTop ? "50%" : 0,
+    display: "flex",
+    flexDirection: isTop ? "column-reverse" : "column",
+    alignItems: "center",
+    gap: 8,
+    transform: "translateX(-50%)"
+  };
+}
+function connectorStyle2(_pe, isVertical) {
+  if (isVertical) {
+    return {
+      flex: "0 0 20px",
+      height: LINE_THICKNESS,
+      backgroundColor: "var(--glyph-timeline-line, #d0d8e4)"
+    };
+  }
+  return {
+    flex: "0 0 20px",
+    width: LINE_THICKNESS,
+    backgroundColor: "var(--glyph-timeline-line, #d0d8e4)"
+  };
+}
+function labelStyle(pe, isVertical) {
+  if (isVertical) {
+    return {
+      textAlign: pe.side === "left" ? "right" : "left",
+      maxWidth: 200
+    };
+  }
+  return {
+    textAlign: "center",
+    maxWidth: 160
+  };
+}
+
+// src/timeline/index.ts
+var timelineDefinition = {
+  type: "ui:timeline",
+  schema: schemas.timelineSchema,
+  render: Timeline
+};
+var RANKDIR_MAP = {
+  "top-down": "TB",
+  "left-right": "LR",
+  "bottom-up": "BT",
+  radial: "TB"
+};
+var DEFAULT_NODE_WIDTH = 160;
+var DEFAULT_NODE_HEIGHT = 40;
+var NODE_SEP = 50;
+var RANK_SEP = 70;
+var EDGE_SEP = 10;
+var LAYOUT_PADDING = 40;
+function computeDagreLayout(nodes, edges, direction = "top-down") {
+  const g = new dagre__default.default.graphlib.Graph();
+  g.setGraph({
+    rankdir: RANKDIR_MAP[direction] ?? "TB",
+    nodesep: NODE_SEP,
+    ranksep: RANK_SEP,
+    edgesep: EDGE_SEP
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const node of nodes) {
+    g.setNode(node.id, {
+      label: node.label,
+      width: DEFAULT_NODE_WIDTH,
+      height: DEFAULT_NODE_HEIGHT
+    });
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.from, edge.to);
+  }
+  dagre__default.default.layout(g);
+  const positionedNodes = nodes.map((node) => {
+    const dagreNode = g.node(node.id);
+    return {
+      ...node,
+      x: dagreNode.x,
+      y: dagreNode.y,
+      width: dagreNode.width,
+      height: dagreNode.height
+    };
+  });
+  const positionedEdges = edges.map((edge) => {
+    const dagreEdge = g.edge(edge.from, edge.to);
+    return {
+      ...edge,
+      points: dagreEdge.points
+    };
+  });
+  let maxX = 0;
+  let maxY = 0;
+  for (const n of positionedNodes) {
+    const right = n.x + n.width / 2;
+    const bottom = n.y + n.height / 2;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  return {
+    nodes: positionedNodes,
+    edges: positionedEdges,
+    width: maxX + LAYOUT_PADDING,
+    height: maxY + LAYOUT_PADDING
+  };
+}
+function computeForceLayout(nodes, edges) {
+  const simNodes = nodes.map((n) => ({
+    ...n,
+    x: void 0,
+    y: void 0
+  }));
+  const simLinks = edges.map((e) => ({
+    source: e.from,
+    target: e.to
+  }));
+  const simulation = d32__namespace.forceSimulation(simNodes).force(
+    "link",
+    d32__namespace.forceLink(simLinks).id((d) => d.id).distance(120)
+  ).force("charge", d32__namespace.forceManyBody().strength(-300)).force("center", d32__namespace.forceCenter(400, 300)).force("collision", d32__namespace.forceCollide().radius(DEFAULT_NODE_WIDTH / 2 + 10)).stop();
+  const tickCount = 300;
+  for (let i = 0; i < tickCount; i++) {
+    simulation.tick();
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  for (const sn of simNodes) {
+    if ((sn.x ?? 0) < minX) minX = sn.x ?? 0;
+    if ((sn.y ?? 0) < minY) minY = sn.y ?? 0;
+  }
+  const offsetX = -minX + LAYOUT_PADDING + DEFAULT_NODE_WIDTH / 2;
+  const offsetY = -minY + LAYOUT_PADDING + DEFAULT_NODE_HEIGHT / 2;
+  const nodeMap = /* @__PURE__ */ new Map();
+  const positionedNodes = simNodes.map((sn) => {
+    const pn = {
+      id: sn.id,
+      label: sn.label,
+      type: sn.type,
+      style: sn.style,
+      group: sn.group,
+      x: (sn.x ?? 0) + offsetX,
+      y: (sn.y ?? 0) + offsetY,
+      width: DEFAULT_NODE_WIDTH,
+      height: DEFAULT_NODE_HEIGHT
+    };
+    nodeMap.set(sn.id, pn);
+    return pn;
+  });
+  const positionedEdges = edges.map((edge) => {
+    const source = nodeMap.get(edge.from);
+    const target = nodeMap.get(edge.to);
+    return {
+      ...edge,
+      points: [
+        { x: source?.x ?? 0, y: source?.y ?? 0 },
+        { x: target?.x ?? 0, y: target?.y ?? 0 }
+      ]
+    };
+  });
+  let maxX = 0;
+  let maxY = 0;
+  for (const n of positionedNodes) {
+    const right = n.x + n.width / 2;
+    const bottom = n.y + n.height / 2;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  return {
+    nodes: positionedNodes,
+    edges: positionedEdges,
+    width: maxX + LAYOUT_PADDING,
+    height: maxY + LAYOUT_PADDING
+  };
+}
+var GROUP_PALETTE = [
+  "#00d4aa",
+  // cyan-green
+  "#b44dff",
+  // purple
+  "#22c55e",
+  // green
+  "#e040fb",
+  // magenta
+  "#00e5ff",
+  // teal
+  "#84cc16",
+  // lime
+  "#f472b6",
+  // rose
+  "#fb923c",
+  // orange
+  "#818cf8",
+  // indigo
+  "#38bdf8"
+  // sky
+];
+var DEFAULT_NODE_COLOR = "#00d4aa";
+function getGroupColor(group, groupIndex) {
+  if (!group) return GROUP_PALETTE[0];
+  let idx = groupIndex.get(group);
+  if (idx === void 0) {
+    idx = groupIndex.size;
+    groupIndex.set(group, idx);
+  }
+  return GROUP_PALETTE[idx % GROUP_PALETTE.length] ?? DEFAULT_NODE_COLOR;
+}
+var TYPE_LAYOUT_DEFAULTS = {
+  dag: "top-down",
+  flowchart: "top-down",
+  mindmap: "left-right",
+  force: "force"
+};
+function resolveLayout(data) {
+  if (data.layout) return data.layout;
+  return TYPE_LAYOUT_DEFAULTS[data.type] ?? "top-down";
+}
+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) {
+  const svg = d32__namespace.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 defs = svg.append("defs");
+  defs.append("marker").attr("id", ARROW_MARKER_ID).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerWidth", 8).attr("markerHeight", 8).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "var(--glyph-edge-color, #6b7a94)");
+  const container = svgElement.parentElement ?? svgElement;
+  const nodeRadius = getThemeVar(container, "--glyph-node-radius", "3");
+  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__namespace.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();
+  for (const ref of outgoingRefs) {
+    if (ref.sourceAnchor) {
+      navigableNodes.add(ref.sourceAnchor);
+      refByAnchor.set(ref.sourceAnchor, ref);
+    }
+  }
+  const lineGen = d32__namespace.line().x((d) => d.x).y((d) => d.y).curve(d32__namespace.curveBasis);
+  const edgeGroup = root.append("g").attr("class", "glyph-graph-edges");
+  for (const edge of layout.edges) {
+    const edgeG = edgeGroup.append("g").attr("class", "glyph-graph-edge");
+    edgeG.append("path").attr("d", lineGen(edge.points) ?? "").attr("fill", "none").attr("stroke", edge.style?.["stroke"] ?? "var(--glyph-edge-color, #6b7a94)").attr("stroke-width", edge.style?.["stroke-width"] ?? nodeStrokeWidth).attr("marker-end", `url(#${ARROW_MARKER_ID})`).attr("stroke-dasharray", edge.type === "dashed" ? "5,5" : null);
+    if (edge.label) {
+      const mid = edge.points[Math.floor(edge.points.length / 2)];
+      if (mid) {
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-edge-color, #6b7a94)").text(edge.label);
+      }
+    }
+  }
+  const nodeGroup = root.append("g").attr("class", "glyph-graph-nodes");
+  for (const node of layout.nodes) {
+    const nodeG = nodeGroup.append("g").attr("class", "glyph-graph-node");
+    const color3 = getGroupColor(node.group, groupIndex);
+    const isNavigable = navigableNodes.has(node.id);
+    const nodeX = node.x - node.width / 2;
+    const nodeY = node.y - node.height / 2;
+    const defaultStroke = d32__namespace.color(color3)?.darker(0.5)?.toString() ?? "var(--glyph-edge-color, #6b7a94)";
+    if (node.type === "circle") {
+      nodeG.append("circle").attr("cx", node.x).attr("cy", node.y).attr("r", Math.min(node.width, node.height) / 2).attr("fill", node.style?.["fill"] ?? color3).attr("stroke", node.style?.["stroke"] ?? defaultStroke).attr("stroke-width", node.style?.["stroke-width"] ?? nodeStrokeWidth).attr("opacity", nodeFillOpacity);
+    } else {
+      nodeG.append("rect").attr("x", nodeX).attr("y", nodeY).attr("width", node.width).attr("height", node.height).attr("rx", nodeRadius).attr("ry", nodeRadius).attr("fill", node.style?.["fill"] ?? color3).attr("stroke", node.style?.["stroke"] ?? defaultStroke).attr("stroke-width", node.style?.["stroke-width"] ?? nodeStrokeWidth).attr("opacity", nodeFillOpacity);
+    }
+    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);
+    if (isNavigable) {
+      nodeG.attr("cursor", "pointer");
+      nodeG.on("click", () => {
+        const ref = refByAnchor.get(node.id);
+        if (ref) onNavigate(ref);
+      });
+    }
+  }
+}
+function Graph({
+  data,
+  outgoingRefs,
+  onNavigate,
+  container
+}) {
+  const svgRef = react.useRef(null);
+  const groupIndex = react.useRef(/* @__PURE__ */ new Map());
+  const layoutResult = react.useMemo(() => {
+    const direction = resolveLayout(data);
+    if (direction === "force") {
+      return computeForceLayout(data.nodes, data.edges);
+    }
+    return computeDagreLayout(data.nodes, data.edges, direction);
+  }, [data]);
+  react.useEffect(() => {
+    if (!svgRef.current) return;
+    renderGraph(svgRef.current, layoutResult, groupIndex.current, outgoingRefs, onNavigate);
+  }, [layoutResult, outgoingRefs, onNavigate]);
+  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: [
+    /* @__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: "block"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "sr-only", "aria-label": "Graph data", style: SR_ONLY_STYLE, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("caption", { children: "Graph 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: "Group" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Connections" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.nodes.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.group ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: connections })
+        ] }, node.id);
+      }) })
+    ] })
+  ] });
+}
+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
+};
+
+// src/graph/index.ts
+var graphDefinition = {
+  type: "ui:graph",
+  schema: schemas.graphSchema,
+  render: Graph
+};
+var ENTITY_MIN_WIDTH = 180;
+var ENTITY_HEADER_HEIGHT = 32;
+var ENTITY_ATTR_HEIGHT = 22;
+var ENTITY_PADDING = 12;
+var NODE_SEP2 = 60;
+var RANK_SEP2 = 80;
+var EDGE_SEP2 = 10;
+var LAYOUT_PADDING2 = 40;
+var CHAR_WIDTH = 7.5;
+function computeEntitySize(entity) {
+  const attrs = entity.attributes ?? [];
+  const height = ENTITY_HEADER_HEIGHT + attrs.length * ENTITY_ATTR_HEIGHT + ENTITY_PADDING;
+  let maxTextWidth = entity.label.length * (CHAR_WIDTH + 1);
+  for (const attr of attrs) {
+    const attrText = `${attr.name}: ${attr.type}`;
+    maxTextWidth = Math.max(maxTextWidth, attrText.length * CHAR_WIDTH);
+  }
+  const width = Math.max(ENTITY_MIN_WIDTH, maxTextWidth + ENTITY_PADDING * 2 + 16);
+  return { width, height };
+}
+function computeRelationLayout(data) {
+  const direction = data.layout ?? "top-down";
+  const rankdir = direction === "left-right" ? "LR" : "TB";
+  const g = new dagre__default.default.graphlib.Graph();
+  g.setGraph({
+    rankdir,
+    nodesep: NODE_SEP2,
+    ranksep: RANK_SEP2,
+    edgesep: EDGE_SEP2
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  const sizeMap = /* @__PURE__ */ new Map();
+  for (const entity of data.entities) {
+    const size = computeEntitySize(entity);
+    sizeMap.set(entity.id, size);
+    g.setNode(entity.id, {
+      label: entity.label,
+      width: size.width,
+      height: size.height
+    });
+  }
+  for (const rel of data.relationships) {
+    g.setEdge(rel.from, rel.to);
+  }
+  dagre__default.default.layout(g);
+  const positionedEntities = data.entities.map((entity) => {
+    const dagreNode = g.node(entity.id);
+    const size = sizeMap.get(entity.id) ?? {
+      width: ENTITY_MIN_WIDTH,
+      height: ENTITY_HEADER_HEIGHT
+    };
+    return {
+      ...entity,
+      x: dagreNode.x,
+      y: dagreNode.y,
+      width: size.width,
+      height: size.height
+    };
+  });
+  const positionedRelationships = data.relationships.map((rel) => {
+    const dagreEdge = g.edge(rel.from, rel.to);
+    return {
+      ...rel,
+      points: dagreEdge.points
+    };
+  });
+  let maxX = 0;
+  let maxY = 0;
+  for (const e of positionedEntities) {
+    const right = e.x + e.width / 2;
+    const bottom = e.y + e.height / 2;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  return {
+    entities: positionedEntities,
+    relationships: positionedRelationships,
+    width: maxX + LAYOUT_PADDING2,
+    height: maxY + LAYOUT_PADDING2
+  };
+}
+function parseCardinality(cardinality) {
+  const parts = cardinality.split(":");
+  return { fromSymbol: parts[0] ?? "1", toSymbol: parts[1] ?? "1" };
+}
+function drawCrowsFoot(g, x, y, angle, symbol) {
+  const len = 12;
+  const spread = Math.PI / 6;
+  if (symbol === "N" || symbol === "M") {
+    const cx = x + Math.cos(angle) * len;
+    const cy = y + Math.sin(angle) * len;
+    g.append("line").attr("x1", x).attr("y1", y).attr("x2", cx).attr("y2", cy).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    const lx = x + Math.cos(angle + spread) * len;
+    const ly = y + Math.sin(angle + spread) * len;
+    g.append("line").attr("x1", x).attr("y1", y).attr("x2", lx).attr("y2", ly).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    const rx = x + Math.cos(angle - spread) * len;
+    const ry = y + Math.sin(angle - spread) * len;
+    g.append("line").attr("x1", x).attr("y1", y).attr("x2", rx).attr("y2", ry).attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+  } else {
+    const perpAngle = angle + Math.PI / 2;
+    const halfLen = 8;
+    const tx = x + Math.cos(angle) * 6;
+    const ty = y + Math.sin(angle) * 6;
+    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) {
+  const svg = d32__namespace.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__namespace.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) {
+    entityMap.set(entity.id, entity);
+  }
+  const lineGen = d32__namespace.line().x((d) => d.x).y((d) => d.y).curve(d32__namespace.curveBasis);
+  const edgeGroup = root.append("g").attr("class", "glyph-relation-edges");
+  for (const rel of layout.relationships) {
+    const edgeG = edgeGroup.append("g").attr("class", "glyph-relation-edge");
+    edgeG.append("path").attr("d", lineGen(rel.points) ?? "").attr("fill", "none").attr("stroke", "var(--glyph-relation-line, #6b7a94)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    const { fromSymbol, toSymbol } = parseCardinality(rel.cardinality);
+    const p0 = rel.points[0];
+    const p1 = rel.points[1];
+    if (p0 && p1) {
+      const angleFrom = Math.atan2(p1.y - p0.y, p1.x - p0.x);
+      drawCrowsFoot(edgeG, p0.x, p0.y, angleFrom, fromSymbol);
+    }
+    const pLast = rel.points[rel.points.length - 1];
+    const pPrev = rel.points[rel.points.length - 2];
+    if (pLast && pPrev) {
+      const angleTo = Math.atan2(pPrev.y - pLast.y, pPrev.x - pLast.x);
+      drawCrowsFoot(edgeG, pLast.x, pLast.y, angleTo, toSymbol);
+    }
+    if (rel.label) {
+      const mid = rel.points[Math.floor(rel.points.length / 2)];
+      if (mid) {
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 10).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-label, #6b7a94)").text(rel.label);
+      }
+    }
+    const pFirst = rel.points[0];
+    const pSecond = rel.points[1];
+    if (pFirst && pSecond) {
+      const fromLabelX = pFirst.x + (pSecond.x - pFirst.x) * 0.15;
+      const fromLabelY = pFirst.y + (pSecond.y - pFirst.y) * 0.15 - 10;
+      edgeG.append("text").attr("x", fromLabelX).attr("y", fromLabelY).attr("text-anchor", "middle").attr("font-size", "10px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-cardinality, #6b7a94)").text(fromSymbol);
+    }
+    const pEnd = rel.points[rel.points.length - 1];
+    const pBeforeEnd = rel.points[rel.points.length - 2];
+    if (pEnd && pBeforeEnd) {
+      const toLabelX = pEnd.x + (pBeforeEnd.x - pEnd.x) * 0.15;
+      const toLabelY = pEnd.y + (pBeforeEnd.y - pEnd.y) * 0.15 - 10;
+      edgeG.append("text").attr("x", toLabelX).attr("y", toLabelY).attr("text-anchor", "middle").attr("font-size", "10px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-cardinality, #6b7a94)").text(toSymbol);
+    }
+  }
+  const entityGroup = root.append("g").attr("class", "glyph-relation-entities");
+  for (const entity of layout.entities) {
+    const entityG = entityGroup.append("g").attr("class", "glyph-relation-entity");
+    const x = entity.x - entity.width / 2;
+    const y = entity.y - entity.height / 2;
+    const attrs = entity.attributes ?? [];
+    entityG.append("rect").attr("x", x).attr("y", y).attr("width", entity.width).attr("height", entity.height).attr("rx", 4).attr("ry", 4).attr("fill", "var(--glyph-relation-entity-bg, #f4f6fa)").attr("stroke", "var(--glyph-relation-entity-border, #a8b5c8)").attr("stroke-width", "var(--glyph-node-stroke-width, 1.5)");
+    const headerHeight = ENTITY_HEADER_HEIGHT;
+    entityG.append("rect").attr("x", x).attr("y", y).attr("width", entity.width).attr("height", headerHeight).attr("rx", 4).attr("ry", 4).attr("fill", "var(--glyph-relation-header-bg, #00d4aa)");
+    entityG.append("rect").attr("x", x).attr("y", y + headerHeight - 4).attr("width", entity.width).attr("height", 4).attr("fill", "var(--glyph-relation-header-bg, #00d4aa)");
+    entityG.append("text").attr("x", entity.x).attr("y", y + headerHeight / 2).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "13px").attr("font-weight", "bold").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-relation-header-text, #fff)").text(entity.label);
+    if (attrs.length > 0) {
+      entityG.append("line").attr("x1", x).attr("y1", y + headerHeight).attr("x2", x + entity.width).attr("y2", y + headerHeight).attr("stroke", "var(--glyph-relation-entity-border, #a8b5c8)").attr("stroke-width", 1);
+    }
+    for (let i = 0; i < attrs.length; i++) {
+      const attr = attrs[i];
+      if (!attr) continue;
+      const attrY = y + headerHeight + i * ENTITY_ATTR_HEIGHT + ENTITY_ATTR_HEIGHT / 2 + 4;
+      const textEl = entityG.append("text").attr("x", x + ENTITY_PADDING).attr("y", attrY).attr("dy", "0.35em").attr("font-size", "12px").attr("font-family", "system-ui, -apple-system, monospace").attr("fill", "var(--glyph-relation-attr-text, #1a2035)");
+      const nameSpan = textEl.append("tspan").text(attr.name);
+      if (attr.primaryKey) {
+        nameSpan.attr("font-weight", "bold").attr("text-decoration", "underline");
+      }
+      textEl.append("tspan").attr("fill", "var(--glyph-relation-attr-type, #6b7a94)").text(`: ${attr.type}`);
+    }
+  }
+}
+function Relation({ data }) {
+  const svgRef = react.useRef(null);
+  const layoutResult = react.useMemo(() => {
+    return computeRelationLayout(data);
+  }, [data]);
+  react.useEffect(() => {
+    if (!svgRef.current) return;
+    renderRelation(svgRef.current, layoutResult);
+  }, [layoutResult]);
+  const ariaLabel = `Entity-relationship diagram with ${data.entities.length} entities and ${data.relationships.length} relationships`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "glyph-relation-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": ariaLabel,
+        width: "100%",
+        height: "100%",
+        style: { minHeight: 300, maxHeight: 700, display: "block" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "sr-only", "aria-label": "Entity-relationship data", style: SR_ONLY_STYLE2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("caption", { children: "Entities and relationships" }),
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Entity" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Attributes" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Relationships" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.entities.map((entity) => {
+        const attrs = (entity.attributes ?? []).map((a) => `${a.name}: ${a.type}${a.primaryKey ? " (PK)" : ""}`).join(", ");
+        const rels = data.relationships.filter((r) => r.from === entity.id || r.to === entity.id).map((r) => {
+          const target = r.from === entity.id ? r.to : r.from;
+          const dir = r.from === entity.id ? "->" : "<-";
+          return `${dir} ${target} [${r.cardinality}]${r.label ? ` (${r.label})` : ""}`;
+        }).join(", ");
+        return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: entity.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: attrs }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: rels })
+        ] }, entity.id);
+      }) })
+    ] })
+  ] });
+}
+var SR_ONLY_STYLE2 = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+// src/relation/index.ts
+var relationDefinition = {
+  type: "ui:relation",
+  schema: schemas.relationSchema,
+  render: Relation
+};
+var TREND_SYMBOLS = {
+  up: "\u25B2",
+  down: "\u25BC",
+  flat: "\u2014"
+};
+function resolveSentiment(metric) {
+  if (metric.sentiment) return metric.sentiment;
+  if (metric.trend === "up") return "positive";
+  if (metric.trend === "down") return "negative";
+  return "neutral";
+}
+function buildAriaLabel(metric) {
+  let label = `${metric.label}: ${metric.value}`;
+  if (metric.unit) label += ` ${metric.unit}`;
+  if (metric.delta && metric.trend) {
+    label += `, ${metric.trend} ${metric.delta}`;
+  } else if (metric.delta) {
+    label += `, ${metric.delta}`;
+  }
+  return label;
+}
+function Kpi({ data, block, container }) {
+  const { title, metrics, columns } = data;
+  const baseId = `glyph-kpi-${block.id}`;
+  const authorCols = columns ?? Math.min(metrics.length, 4);
+  let colCount;
+  switch (container.tier) {
+    case "compact":
+      colCount = Math.min(metrics.length, 2);
+      break;
+    case "standard":
+      colCount = Math.min(authorCols, 3);
+      break;
+    default:
+      colCount = authorCols;
+  }
+  const containerStyle3 = {
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)"
+  };
+  const gapCount = colCount - 1;
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: `repeat(auto-fill, minmax(max(120px, calc((100% - ${String(gapCount)}rem) / ${String(colCount)})), 1fr))`,
+    gap: "var(--glyph-spacing-md, 1rem)"
+  };
+  const cardStyle = {
+    background: "var(--glyph-surface-raised, #f4f6fa)",
+    border: "1px solid var(--glyph-border, #d0d8e4)",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    padding: "var(--glyph-spacing-md, 1rem)"
+  };
+  const labelStyle3 = {
+    fontSize: "0.8125rem",
+    color: "var(--glyph-text-muted, #6b7a94)",
+    marginBottom: "var(--glyph-spacing-xs, 0.25rem)"
+  };
+  const valueStyle = {
+    fontSize: "1.75rem",
+    fontWeight: 700,
+    color: "var(--glyph-heading, #0a0e1a)",
+    lineHeight: 1.2
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Key metrics", style: containerStyle3, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          fontWeight: 700,
+          fontSize: "1.125rem",
+          marginBottom: "var(--glyph-spacing-sm, 0.5rem)",
+          color: "var(--glyph-heading, #0a0e1a)"
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: metrics.map((metric, i) => {
+      const sentiment = resolveSentiment(metric);
+      const deltaStyle = {
+        fontSize: "0.875rem",
+        marginTop: "var(--glyph-spacing-xs, 0.25rem)",
+        color: `var(--glyph-kpi-${sentiment}, inherit)`
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": buildAriaLabel(metric), style: cardStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: labelStyle3, children: metric.label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: valueStyle, children: [
+          metric.value,
+          metric.unit && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem", fontWeight: 400, marginLeft: "0.25rem" }, children: metric.unit })
+        ] }),
+        (metric.delta || metric.trend) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: deltaStyle, children: [
+          metric.trend && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { marginRight: "0.25rem" }, children: TREND_SYMBOLS[metric.trend] }),
+          metric.delta
+        ] })
+      ] }, i);
+    }) })
+  ] });
+}
+
+// src/kpi/index.ts
+var kpiDefinition = {
+  type: "ui:kpi",
+  schema: schemas.kpiSchema,
+  render: Kpi
+};
+function Accordion({ data, block }) {
+  const { title, sections, defaultOpen = [], multiple = true } = data;
+  const baseId = `glyph-accordion-${block.id}`;
+  const containerRef = react.useRef(null);
+  const handleToggle = react.useCallback(
+    (e) => {
+      if (multiple) return;
+      const target = e.currentTarget;
+      if (!target.open || !containerRef.current) return;
+      const allDetails = containerRef.current.querySelectorAll("details");
+      for (const details of allDetails) {
+        if (details !== target && details.open) {
+          details.open = false;
+        }
+      }
+    },
+    [multiple]
+  );
+  const containerStyle3 = {
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)",
+    border: "1px solid var(--glyph-border, #d0d8e4)",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    overflow: "hidden"
+  };
+  const sectionStyle = (isLast) => ({
+    borderBottom: isLast ? "none" : "1px solid var(--glyph-border, #d0d8e4)"
+  });
+  const summaryStyle = {
+    padding: "var(--glyph-spacing-md, 1rem)",
+    cursor: "pointer",
+    fontWeight: 600,
+    fontSize: "0.9375rem",
+    background: "var(--glyph-surface, #e8ecf3)",
+    listStyle: "none",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    userSelect: "none"
+  };
+  const contentStyle2 = {
+    padding: "var(--glyph-spacing-md, 1rem)",
+    fontSize: "0.875rem",
+    lineHeight: 1.6
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: baseId,
+      ref: containerRef,
+      role: "region",
+      "aria-label": title ?? "Accordion",
+      style: containerStyle3,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              fontWeight: 700,
+              fontSize: "1.125rem",
+              padding: "var(--glyph-spacing-md, 1rem)",
+              borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+              color: "var(--glyph-heading, #0a0e1a)"
+            },
+            children: title
+          }
+        ),
+        sections.map((section, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "details",
+          {
+            open: defaultOpen.includes(i),
+            onToggle: handleToggle,
+            style: sectionStyle(i === sections.length - 1),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: summaryStyle, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { fontSize: "0.75rem", width: "1rem", flexShrink: 0 }, children: "\u25B8" }),
+                section.title
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: contentStyle2, children: section.content })
+            ]
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+
+// src/accordion/index.ts
+var accordionDefinition = {
+  type: "ui:accordion",
+  schema: schemas.accordionSchema,
+  render: Accordion
+};
+var YES_VALUES = /* @__PURE__ */ new Set(["yes", "true", "full"]);
+var NO_VALUES = /* @__PURE__ */ new Set(["no", "false", "none"]);
+function classifyValue(value) {
+  const lower = value.toLowerCase().trim();
+  if (YES_VALUES.has(lower)) return "yes";
+  if (NO_VALUES.has(lower)) return "no";
+  if (lower === "partial") return "partial";
+  return "text";
+}
+function renderValue(value) {
+  const kind = classifyValue(value);
+  switch (kind) {
+    case "yes":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-label": "Supported",
+          style: { color: "var(--glyph-comparison-yes, #16a34a)", fontSize: "1.25rem" },
+          children: "\u2713"
+        }
+      );
+    case "no":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-label": "Not supported",
+          style: { color: "var(--glyph-comparison-no, #dc2626)", fontSize: "1.25rem" },
+          children: "\u2717"
+        }
+      );
+    case "partial":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-label": "Partially supported",
+          style: { color: "var(--glyph-comparison-partial, #d97706)", fontSize: "1.25rem" },
+          children: "\u25D0"
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
+  }
+}
+function Comparison({
+  data,
+  block,
+  container
+}) {
+  const { title, options, features } = data;
+  const baseId = `glyph-comparison-${block.id}`;
+  const isCompact = container.tier === "compact";
+  const cellPadding = isCompact ? "var(--glyph-spacing-xs, 0.25rem) var(--glyph-spacing-sm, 0.5rem)" : "var(--glyph-spacing-sm, 0.5rem) var(--glyph-spacing-md, 1rem)";
+  const containerStyle3 = {
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)"
+  };
+  const tableStyle = {
+    width: "100%",
+    borderCollapse: "collapse",
+    border: "1px solid var(--glyph-table-border, #d0d8e4)",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    overflow: "hidden",
+    fontSize: isCompact ? "0.8125rem" : "0.875rem"
+  };
+  const thStyle = {
+    padding: cellPadding,
+    textAlign: "center",
+    fontWeight: 600,
+    background: "var(--glyph-table-header-bg, #e8ecf3)",
+    borderBottom: "2px solid var(--glyph-table-border, #d0d8e4)",
+    color: "var(--glyph-heading, #0a0e1a)"
+  };
+  const featureThStyle = {
+    ...thStyle,
+    textAlign: "left"
+  };
+  const rowThStyle = {
+    padding: cellPadding,
+    textAlign: "left",
+    fontWeight: 600,
+    borderBottom: "1px solid var(--glyph-table-border, #d0d8e4)",
+    fontSize: "0.8125rem"
+  };
+  const cellStyle = (rowIndex) => ({
+    padding: cellPadding,
+    textAlign: "center",
+    borderBottom: "1px solid var(--glyph-table-border, #d0d8e4)",
+    background: rowIndex % 2 === 1 ? "var(--glyph-table-row-alt-bg, transparent)" : "transparent"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Comparison", style: containerStyle3, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          fontWeight: 700,
+          fontSize: "1.125rem",
+          marginBottom: "var(--glyph-spacing-sm, 0.5rem)",
+          color: "var(--glyph-heading, #0a0e1a)"
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { role: "grid", style: tableStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: featureThStyle, scope: "col", children: "Feature" }),
+        options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsxs("th", { style: thStyle, scope: "col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: option.name }),
+          option.description && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                fontWeight: 400,
+                fontSize: "0.75rem",
+                color: "var(--glyph-text-muted, #6b7a94)"
+              },
+              children: option.description
+            }
+          )
+        ] }, i))
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: features.map((feature, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            scope: "row",
+            style: {
+              ...rowThStyle,
+              background: rowIndex % 2 === 1 ? "var(--glyph-table-row-alt-bg, transparent)" : "transparent"
+            },
+            children: feature.name
+          }
+        ),
+        options.map((_, colIndex) => {
+          const value = feature.values[colIndex] ?? "";
+          return /* @__PURE__ */ jsxRuntime.jsx("td", { style: cellStyle(rowIndex), children: value ? renderValue(value) : null }, colIndex);
+        })
+      ] }, rowIndex)) })
+    ] }) })
+  ] });
+}
+
+// src/comparison/index.ts
+var comparisonDefinition = {
+  type: "ui:comparison",
+  schema: schemas.comparisonSchema,
+  render: Comparison
+};
+
+// src/codediff/diff.ts
+function dpGet(dp, i, j) {
+  const row = dp[i];
+  if (!row) return 0;
+  return row[j] ?? 0;
+}
+function lineAt(arr, i) {
+  return arr[i] ?? "";
+}
+function computeDiff(before, after) {
+  const a = before.split("\n");
+  const b = after.split("\n");
+  const n = a.length;
+  const m = b.length;
+  const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i2 = 1; i2 <= n; i2++) {
+    for (let j2 = 1; j2 <= m; j2++) {
+      const row = dp[i2];
+      if (!row) continue;
+      if (lineAt(a, i2 - 1) === lineAt(b, j2 - 1)) {
+        row[j2] = dpGet(dp, i2 - 1, j2 - 1) + 1;
+      } else {
+        row[j2] = Math.max(dpGet(dp, i2 - 1, j2), dpGet(dp, i2, j2 - 1));
+      }
+    }
+  }
+  const edits = [];
+  let i = n;
+  let j = m;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && lineAt(a, i - 1) === lineAt(b, j - 1)) {
+      edits.unshift({ kind: "eq", text: lineAt(a, i - 1), oldLineNo: i, newLineNo: j });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dpGet(dp, i, j - 1) >= dpGet(dp, i - 1, j))) {
+      edits.unshift({ kind: "add", text: lineAt(b, j - 1), newLineNo: j });
+      j--;
+    } else {
+      edits.unshift({ kind: "del", text: lineAt(a, i - 1), oldLineNo: i });
+      i--;
+    }
+  }
+  return edits;
+}
+function summarizeDiff(lines) {
+  const added = lines.filter((l) => l.kind === "add").length;
+  const removed = lines.filter((l) => l.kind === "del").length;
+  return `Code diff: ${String(added)} line${added !== 1 ? "s" : ""} added, ${String(removed)} line${removed !== 1 ? "s" : ""} removed`;
+}
+var GUTTER_MARKERS = {
+  add: "+",
+  del: "-",
+  eq: " "
+};
+var ARIA_LABELS = {
+  add: "added",
+  del: "removed",
+  eq: "unchanged"
+};
+function CodeDiff({ data, block }) {
+  const { before, after, beforeLabel, afterLabel } = data;
+  const baseId = `glyph-codediff-${block.id}`;
+  const diffLines = react.useMemo(() => computeDiff(before, after), [before, after]);
+  const summary = react.useMemo(() => summarizeDiff(diffLines), [diffLines]);
+  const containerStyle3 = {
+    fontFamily: 'var(--glyph-font-mono, ui-monospace, "Cascadia Code", "Fira Code", monospace)',
+    fontSize: "0.8125rem",
+    lineHeight: 1.5,
+    color: "var(--glyph-text, #1a2035)",
+    border: "1px solid var(--glyph-border, #d0d8e4)",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    overflow: "hidden"
+  };
+  const labelBarStyle = {
+    display: "flex",
+    gap: "1rem",
+    padding: "var(--glyph-spacing-xs, 0.25rem) var(--glyph-spacing-md, 1rem)",
+    background: "var(--glyph-codediff-gutter-bg, var(--glyph-surface, #e8ecf3))",
+    borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    color: "var(--glyph-text-muted, #6b7a94)"
+  };
+  const tableStyle = {
+    width: "100%",
+    borderCollapse: "collapse",
+    tableLayout: "fixed"
+  };
+  const gutterStyle = {
+    width: "1.5rem",
+    textAlign: "center",
+    userSelect: "none",
+    color: "var(--glyph-text-muted, #6b7a94)",
+    background: "var(--glyph-codediff-gutter-bg, var(--glyph-surface, #e8ecf3))",
+    borderRight: "1px solid var(--glyph-border, #d0d8e4)",
+    verticalAlign: "top",
+    padding: "0 0.25rem"
+  };
+  const lineNoStyle = {
+    width: "2.5rem",
+    textAlign: "right",
+    userSelect: "none",
+    color: "var(--glyph-text-muted, #6b7a94)",
+    paddingRight: "0.5rem",
+    verticalAlign: "top"
+  };
+  const codeStyle = {
+    paddingLeft: "0.5rem",
+    whiteSpace: "pre",
+    overflowX: "auto",
+    verticalAlign: "top"
+  };
+  function rowBg(kind) {
+    if (kind === "add") return "var(--glyph-codediff-add-bg, rgba(22, 163, 106, 0.1))";
+    if (kind === "del") return "var(--glyph-codediff-del-bg, rgba(220, 38, 38, 0.1))";
+    return void 0;
+  }
+  function rowColor(kind) {
+    if (kind === "add") return "var(--glyph-codediff-add-color, inherit)";
+    if (kind === "del") return "var(--glyph-codediff-del-color, inherit)";
+    return void 0;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: baseId, role: "region", "aria-label": summary, style: containerStyle3, children: [
+    (beforeLabel || afterLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelBarStyle, children: [
+      beforeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: beforeLabel }),
+      beforeLabel && afterLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2192" }),
+      afterLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: afterLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { role: "grid", style: tableStyle, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: diffLines.map((line6, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "tr",
+      {
+        "aria-label": ARIA_LABELS[line6.kind],
+        style: { background: rowBg(line6.kind), color: rowColor(line6.kind) },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: gutterStyle, children: GUTTER_MARKERS[line6.kind] }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: lineNoStyle, children: line6.oldLineNo ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: lineNoStyle, children: line6.newLineNo ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: codeStyle, children: line6.text })
+        ]
+      },
+      i
+    )) }) }) })
+  ] });
+}
+
+// src/codediff/index.ts
+var codeDiffDefinition = {
+  type: "ui:codediff",
+  schema: schemas.codediffSchema,
+  render: CodeDiff
+};
+var NODE_WIDTH = 160;
+var NODE_HEIGHT = 40;
+var DECISION_WIDTH = 170;
+var DECISION_HEIGHT = 70;
+var NODE_SEP3 = 50;
+var RANK_SEP3 = 70;
+var LAYOUT_PADDING3 = 40;
+function computeLayout(nodes, edges, direction) {
+  const g = new dagre__default.default.graphlib.Graph();
+  g.setGraph({
+    rankdir: direction === "left-right" ? "LR" : "TB",
+    nodesep: NODE_SEP3,
+    ranksep: RANK_SEP3,
+    edgesep: 10
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const node of nodes) {
+    const isDecision = node.type === "decision";
+    g.setNode(node.id, {
+      label: node.label,
+      width: isDecision ? DECISION_WIDTH : NODE_WIDTH,
+      height: isDecision ? DECISION_HEIGHT : NODE_HEIGHT
+    });
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.from, edge.to);
+  }
+  dagre__default.default.layout(g);
+  const positionedNodes = nodes.map((node) => {
+    const d = g.node(node.id);
+    return { ...node, x: d.x, y: d.y, width: d.width, height: d.height };
+  });
+  const positionedEdges = edges.map((edge) => {
+    const d = g.edge(edge.from, edge.to);
+    return { ...edge, points: d.points };
+  });
+  let maxX = 0;
+  let maxY = 0;
+  for (const n of positionedNodes) {
+    maxX = Math.max(maxX, n.x + n.width / 2);
+    maxY = Math.max(maxY, n.y + n.height / 2);
+  }
+  return {
+    nodes: positionedNodes,
+    edges: positionedEdges,
+    width: maxX + LAYOUT_PADDING3,
+    height: maxY + LAYOUT_PADDING3
+  };
+}
+function getThemeVar2(container, varName, fallback) {
+  return getComputedStyle(container).getPropertyValue(varName).trim() || fallback;
+}
+var ARROW_MARKER_ID2 = "glyph-flowchart-arrowhead";
+function renderNodeShape(nodeG, node, fillOpacity, strokeWidth) {
+  const cx = node.x;
+  const cy = node.y;
+  const w = node.width;
+  const h = node.height;
+  switch (node.type) {
+    case "start":
+    case "end": {
+      nodeG.append("rect").attr("x", cx - w / 2).attr("y", cy - h / 2).attr("width", w).attr("height", h).attr("rx", h / 2).attr("ry", h / 2).attr("fill", "var(--glyph-accent, #00d4aa)").attr("stroke", "var(--glyph-accent-hover, #33e0be)").attr("stroke-width", strokeWidth).attr("opacity", fillOpacity);
+      break;
+    }
+    case "decision": {
+      const top = `${cx},${cy - h / 2}`;
+      const right = `${cx + w / 2},${cy}`;
+      const bottom = `${cx},${cy + h / 2}`;
+      const left = `${cx - w / 2},${cy}`;
+      nodeG.append("polygon").attr("points", `${top} ${right} ${bottom} ${left}`).attr("fill", "var(--glyph-surface-raised, #162038)").attr("stroke", "var(--glyph-accent, #00d4aa)").attr("stroke-width", strokeWidth).attr("opacity", fillOpacity);
+      break;
+    }
+    case "process":
+    default: {
+      nodeG.append("rect").attr("x", cx - w / 2).attr("y", cy - h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr("fill", "var(--glyph-surface-raised, #162038)").attr("stroke", "var(--glyph-border-strong, #2a3550)").attr("stroke-width", strokeWidth).attr("opacity", fillOpacity);
+      break;
+    }
+  }
+}
+function renderFlowchart(svgElement, layout) {
+  const svg = d32__namespace.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 defs = svg.append("defs");
+  defs.append("marker").attr("id", ARROW_MARKER_ID2).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerWidth", 8).attr("markerHeight", 8).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "var(--glyph-edge-color, #6b7a94)");
+  const container = svgElement.parentElement ?? svgElement;
+  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__namespace.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
+    root.attr("transform", event.transform.toString());
+  });
+  svg.call(zoomBehavior);
+  const lineGen = d32__namespace.line().x((d) => d.x).y((d) => d.y).curve(d32__namespace.curveBasis);
+  const edgeGroup = root.append("g").attr("class", "glyph-flowchart-edges");
+  for (const edge of layout.edges) {
+    const edgeG = edgeGroup.append("g").attr("class", "glyph-flowchart-edge");
+    edgeG.append("path").attr("d", lineGen(edge.points) ?? "").attr("fill", "none").attr("stroke", "var(--glyph-edge-color, #6b7a94)").attr("stroke-width", nodeStrokeWidth).attr("marker-end", `url(#${ARROW_MARKER_ID2})`);
+    if (edge.label) {
+      const mid = edge.points[Math.floor(edge.points.length / 2)];
+      if (mid) {
+        edgeG.append("text").attr("x", mid.x).attr("y", mid.y - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "var(--glyph-text-muted, #6b7a94)").text(edge.label);
+      }
+    }
+  }
+  const nodeGroup = root.append("g").attr("class", "glyph-flowchart-nodes");
+  for (const node of layout.nodes) {
+    const nodeG = nodeGroup.append("g").attr("class", "glyph-flowchart-node");
+    renderNodeShape(nodeG, node, nodeFillOpacity, nodeStrokeWidth);
+    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 }) {
+  const svgRef = react.useRef(null);
+  const layoutResult = react.useMemo(() => computeLayout(data.nodes, data.edges, data.direction), [data]);
+  react.useEffect(() => {
+    if (!svgRef.current) return;
+    renderFlowchart(svgRef.current, layoutResult);
+  }, [layoutResult]);
+  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`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "glyph-flowchart-container", children: [
+    data.title && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          fontFamily: "var(--glyph-font-heading, Inter, system-ui, sans-serif)",
+          fontWeight: 600,
+          fontSize: "1rem",
+          color: "var(--glyph-heading, #edf0f5)",
+          marginBottom: "0.5rem"
+        },
+        children: data.title
+      }
+    ),
+    /* @__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: "block"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "sr-only", "aria-label": "Flowchart data", style: SR_ONLY_STYLE3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("caption", { children: "Flowchart 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: "Type" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Connections" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.nodes.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.type }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: connections })
+        ] }, node.id);
+      }) })
+    ] })
+  ] });
+}
+var SR_ONLY_STYLE3 = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+// src/flowchart/index.ts
+var flowchartDefinition = {
+  type: "ui:flowchart",
+  schema: schemas.flowchartSchema,
+  render: Flowchart
+};
+function getFileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "\u{1F1F9}";
+    // 🇹 — TS indicator
+    case "js":
+    case "jsx":
+      return "\u{1F1EF}";
+    // 🇯 — JS indicator
+    case "json":
+      return "\u{1F4CB}";
+    // 📋
+    case "md":
+    case "mdx":
+      return "\u{1F4DD}";
+    // 📝
+    case "css":
+    case "scss":
+    case "less":
+      return "\u{1F3A8}";
+    // 🎨
+    case "html":
+      return "\u{1F310}";
+    // 🌐
+    case "svg":
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+      return "\u{1F5BC}";
+    // 🖼
+    case "yml":
+    case "yaml":
+      return "\u2699";
+    // ⚙
+    default:
+      return "\u{1F4C4}";
+  }
+}
+function TreeItem({
+  node,
+  level,
+  defaultExpanded,
+  flatIndex,
+  focusedIndex,
+  setSize,
+  posInSet,
+  onFocusChange,
+  flatItems
+}) {
+  const [expanded, setExpanded] = react.useState(defaultExpanded);
+  const itemRef = react.useRef(null);
+  const isDir = Array.isArray(node.children) && node.children.length > 0;
+  const isFocused = flatIndex === focusedIndex;
+  const handleToggle = react.useCallback(() => {
+    if (isDir) setExpanded((prev) => !prev);
+  }, [isDir]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      let handled = true;
+      switch (e.key) {
+        case "ArrowDown": {
+          const next = flatIndex + 1;
+          if (next < flatItems.length) onFocusChange(next);
+          break;
+        }
+        case "ArrowUp": {
+          const prev = flatIndex - 1;
+          if (prev >= 0) onFocusChange(prev);
+          break;
+        }
+        case "ArrowRight":
+          if (isDir && !expanded) {
+            setExpanded(true);
+          } else if (isDir && expanded) {
+            const next = flatIndex + 1;
+            if (next < flatItems.length) onFocusChange(next);
+          }
+          break;
+        case "ArrowLeft":
+          if (isDir && expanded) {
+            setExpanded(false);
+          } else if (level > 0) {
+            for (let idx = flatIndex - 1; idx >= 0; idx--) {
+              const item = flatItems[idx];
+              if (item && item.level < level && item.isDir) {
+                onFocusChange(idx);
+                break;
+              }
+            }
+          }
+          break;
+        case "Enter":
+        case " ":
+          handleToggle();
+          break;
+        case "Home":
+          onFocusChange(0);
+          break;
+        case "End":
+          onFocusChange(flatItems.length - 1);
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [flatIndex, flatItems, isDir, expanded, level, onFocusChange, handleToggle]
+  );
+  const icon = isDir ? expanded ? "\u{1F4C2}" : "\u{1F4C1}" : getFileIcon(node.name);
+  const ariaLabel = node.annotation ? `${node.name}, ${node.annotation}` : node.name;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      ref: itemRef,
+      role: "treeitem",
+      "aria-expanded": isDir ? expanded : void 0,
+      "aria-label": ariaLabel,
+      "aria-level": level + 1,
+      "aria-setsize": setSize,
+      "aria-posinset": posInSet,
+      tabIndex: isFocused ? 0 : -1,
+      onKeyDown: handleKeyDown,
+      onClick: (e) => {
+        e.stopPropagation();
+        onFocusChange(flatIndex);
+        handleToggle();
+      },
+      style: {
+        listStyle: "none",
+        cursor: isDir ? "pointer" : "default",
+        padding: "2px 0",
+        outline: "none",
+        borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+        background: isFocused ? "var(--glyph-accent-subtle, rgba(0,212,170,0.1))" : "transparent"
+      },
+      "data-flat-index": flatIndex,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.25rem",
+              paddingLeft: `${level * 1.25}rem`,
+              fontFamily: "var(--glyph-font-mono, monospace)",
+              fontSize: "0.875rem",
+              lineHeight: "1.6",
+              color: "var(--glyph-text, #d4dae3)",
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: "1.25rem", textAlign: "center", flexShrink: 0 }, children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: isDir ? 600 : 400 }, children: node.name }),
+              node.annotation && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "0.75rem",
+                    color: "var(--glyph-text-muted, #6b7a94)",
+                    background: "var(--glyph-surface, #0f1526)",
+                    padding: "0 0.375rem",
+                    borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+                    marginLeft: "0.25rem"
+                  },
+                  children: node.annotation
+                }
+              )
+            ]
+          }
+        ),
+        isDir && expanded && node.children && /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", style: { margin: 0, padding: 0 }, children: node.children.map((child, childIdx) => {
+          const childFlatIndex = getChildFlatIndex(flatItems, flatIndex, childIdx, node.children);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TreeItem,
+            {
+              node: child,
+              level: level + 1,
+              defaultExpanded,
+              flatIndex: childFlatIndex,
+              focusedIndex,
+              setSize: node.children?.length ?? 0,
+              posInSet: childIdx + 1,
+              onFocusChange,
+              flatItems
+            },
+            child.name
+          );
+        }) })
+      ]
+    }
+  );
+}
+function flattenTree(nodes, level) {
+  const result = [];
+  for (const node of nodes) {
+    const isDir = Array.isArray(node.children) && node.children.length > 0;
+    result.push({ node, level, isDir });
+    if (isDir && node.children) {
+      result.push(...flattenTree(node.children, level + 1));
+    }
+  }
+  return result;
+}
+function getChildFlatIndex(flatItems, parentFlatIndex, childIdx, children) {
+  if (!children) return parentFlatIndex + 1;
+  let count = 0;
+  for (let i = parentFlatIndex + 1; i < flatItems.length; i++) {
+    const item = flatItems[i];
+    if (!item) continue;
+    if (item.node === children[count]) {
+      if (count === childIdx) return i;
+      count++;
+    }
+  }
+  return parentFlatIndex + childIdx + 1;
+}
+function FileTree({ data }) {
+  const [focusedIndex, setFocusedIndex] = react.useState(0);
+  const containerRef = react.useRef(null);
+  const flatItems = flattenTree(data.tree, data.root ? 1 : 0);
+  const handleFocusChange = react.useCallback((index) => {
+    setFocusedIndex(index);
+    const container = containerRef.current;
+    if (!container) return;
+    const el = container.querySelector(`[data-flat-index="${String(index)}"]`);
+    el?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "glyph-filetree-container",
+      style: {
+        border: "1px solid var(--glyph-border, #1a2035)",
+        borderRadius: "var(--glyph-radius-md, 0.5rem)",
+        padding: "0.75rem",
+        background: "var(--glyph-surface, #0f1526)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { role: "tree", "aria-label": data.root ?? "File tree", style: { margin: 0, padding: 0 }, children: [
+        data.root && /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            role: "treeitem",
+            "aria-expanded": true,
+            "aria-level": 1,
+            "aria-setsize": 1,
+            "aria-posinset": 1,
+            style: {
+              listStyle: "none",
+              padding: "2px 0"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.25rem",
+                    fontFamily: "var(--glyph-font-mono, monospace)",
+                    fontSize: "0.875rem",
+                    fontWeight: 700,
+                    color: "var(--glyph-heading, #edf0f5)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: "1.25rem", textAlign: "center" }, children: "\u{1F4C2}" }),
+                    data.root
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", style: { margin: 0, padding: 0 }, children: data.tree.map((node, idx) => {
+                const flatIndex = getFlatIndexForTopLevel(flatItems, idx, data.tree);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  TreeItem,
+                  {
+                    node,
+                    level: 1,
+                    defaultExpanded: data.defaultExpanded,
+                    flatIndex,
+                    focusedIndex,
+                    setSize: data.tree.length,
+                    posInSet: idx + 1,
+                    onFocusChange: handleFocusChange,
+                    flatItems
+                  },
+                  node.name
+                );
+              }) })
+            ]
+          }
+        ),
+        !data.root && data.tree.map((node, idx) => {
+          const flatIndex = getFlatIndexForTopLevel(flatItems, idx, data.tree);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TreeItem,
+            {
+              node,
+              level: 0,
+              defaultExpanded: data.defaultExpanded,
+              flatIndex,
+              focusedIndex,
+              setSize: data.tree.length,
+              posInSet: idx + 1,
+              onFocusChange: handleFocusChange,
+              flatItems
+            },
+            node.name
+          );
+        })
+      ] })
+    }
+  );
+}
+function getFlatIndexForTopLevel(flatItems, idx, tree) {
+  let count = 0;
+  for (let i = 0; i < flatItems.length; i++) {
+    const item = flatItems[i];
+    if (item && item.node === tree[count]) {
+      if (count === idx) return i;
+      count++;
+    }
+  }
+  return idx;
+}
+
+// src/filetree/index.ts
+var fileTreeDefinition = {
+  type: "ui:filetree",
+  schema: schemas.filetreeSchema,
+  render: FileTree
+};
+var ACTOR_WIDTH = 120;
+var ACTOR_HEIGHT = 40;
+var ACTOR_GAP = 160;
+var TOP_MARGIN = 20;
+var MSG_SPACING = 50;
+var SELF_ARC_WIDTH = 30;
+var SELF_ARC_HEIGHT = 30;
+var BOTTOM_PADDING = 40;
+var SIDE_PADDING = 40;
+var ARROW_SIZE = 8;
+function renderActorBox(actor, cx, y, keyPrefix, width = ACTOR_WIDTH, height = ACTOR_HEIGHT, fontSize = "13px") {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: cx - width / 2,
+        y,
+        width,
+        height,
+        rx: 4,
+        ry: 4,
+        fill: "var(--glyph-surface-raised, #162038)",
+        stroke: "var(--glyph-border-strong, #2a3550)",
+        strokeWidth: 1.5
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: y + height / 2,
+        dy: "0.35em",
+        textAnchor: "middle",
+        fontSize,
+        fontFamily: "Inter, system-ui, sans-serif",
+        fontWeight: 600,
+        fill: "var(--glyph-text, #d4dae3)",
+        children: actor.label
+      }
+    )
+  ] }, `${keyPrefix}-${actor.id}`);
+}
+function renderSelfMessage(x, y, label, idx, fontSize = "12px") {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: `M ${x} ${y} L ${x + SELF_ARC_WIDTH} ${y} L ${x + SELF_ARC_WIDTH} ${y + SELF_ARC_HEIGHT} L ${x} ${y + SELF_ARC_HEIGHT}`,
+        fill: "none",
+        stroke: "var(--glyph-text, #d4dae3)",
+        strokeWidth: 1.5,
+        markerEnd: "url(#seq-arrow-solid)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: x + SELF_ARC_WIDTH + 6,
+        y: y + SELF_ARC_HEIGHT / 2,
+        dy: "0.35em",
+        fontSize,
+        fontFamily: "Inter, system-ui, sans-serif",
+        fill: "var(--glyph-text, #d4dae3)",
+        children: label
+      }
+    )
+  ] }, `msg-${idx}`);
+}
+function renderStandardMessage(fromX, toX, y, label, isDashed, idx, fontSize = "12px") {
+  const markerId = isDashed ? "seq-arrow-dashed" : "seq-arrow-solid";
+  const midX = (fromX + toX) / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: fromX,
+        y1: y,
+        x2: toX,
+        y2: y,
+        stroke: isDashed ? "var(--glyph-text-muted, #6b7a94)" : "var(--glyph-text, #d4dae3)",
+        strokeWidth: 1.5,
+        strokeDasharray: isDashed ? "6,4" : void 0,
+        markerEnd: `url(#${markerId})`
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: midX,
+        y: y - 8,
+        textAnchor: "middle",
+        fontSize,
+        fontFamily: "Inter, system-ui, sans-serif",
+        fill: "var(--glyph-text, #d4dae3)",
+        children: label
+      }
+    )
+  ] }, `msg-${idx}`);
+}
+function Sequence({ data, container }) {
+  const actorCount = data.actors.length;
+  const messageCount = data.messages.length;
+  const isCompact = container.tier === "compact";
+  const effectiveActorGap = isCompact ? Math.round(ACTOR_GAP * 0.6) : ACTOR_GAP;
+  const effectiveActorWidth = isCompact ? Math.round(ACTOR_WIDTH * 0.7) : ACTOR_WIDTH;
+  const effectiveActorHeight = isCompact ? Math.round(ACTOR_HEIGHT * 0.85) : ACTOR_HEIGHT;
+  const actorFontSize = isCompact ? "11px" : "13px";
+  const msgFontSize = isCompact ? "10px" : "12px";
+  const actorX = /* @__PURE__ */ new Map();
+  for (let i = 0; i < actorCount; i++) {
+    const actor = data.actors[i];
+    if (actor) {
+      actorX.set(actor.id, SIDE_PADDING + i * effectiveActorGap + effectiveActorWidth / 2);
+    }
+  }
+  const svgWidth = SIDE_PADDING * 2 + (actorCount - 1) * effectiveActorGap + effectiveActorWidth;
+  const actorBoxY = TOP_MARGIN;
+  const lifelineStartY = actorBoxY + effectiveActorHeight;
+  const firstMsgY = lifelineStartY + MSG_SPACING;
+  const lastMsgY = firstMsgY + (messageCount - 1) * MSG_SPACING;
+  const svgHeight = lastMsgY + BOTTOM_PADDING + effectiveActorHeight;
+  const ariaLabel = data.title ? `${data.title}: sequence diagram with ${actorCount} actors and ${messageCount} messages` : `Sequence diagram with ${actorCount} actors and ${messageCount} messages`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "glyph-sequence-container", children: [
+    data.title && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          fontFamily: "var(--glyph-font-heading, Inter, system-ui, sans-serif)",
+          fontWeight: 600,
+          fontSize: "1rem",
+          color: "var(--glyph-heading, #edf0f5)",
+          marginBottom: "0.5rem"
+        },
+        children: data.title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        role: "img",
+        "aria-label": ariaLabel,
+        viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+        width: "100%",
+        style: { minHeight: 200, maxHeight: 800, display: "block" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "marker",
+              {
+                id: "seq-arrow-solid",
+                viewBox: "0 0 10 10",
+                refX: 10,
+                refY: 5,
+                markerWidth: ARROW_SIZE,
+                markerHeight: ARROW_SIZE,
+                orient: "auto-start-reverse",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10 Z", fill: "var(--glyph-text, #d4dae3)" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "marker",
+              {
+                id: "seq-arrow-dashed",
+                viewBox: "0 0 10 10",
+                refX: 10,
+                refY: 5,
+                markerWidth: ARROW_SIZE,
+                markerHeight: ARROW_SIZE,
+                orient: "auto-start-reverse",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10 Z", fill: "var(--glyph-text-muted, #6b7a94)" })
+              }
+            )
+          ] }),
+          data.actors.map((actor) => {
+            const cx = actorX.get(actor.id) ?? 0;
+            return renderActorBox(
+              actor,
+              cx,
+              actorBoxY,
+              "actor-top",
+              effectiveActorWidth,
+              effectiveActorHeight,
+              actorFontSize
+            );
+          }),
+          data.actors.map((actor) => {
+            const cx = actorX.get(actor.id) ?? 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: cx,
+                y1: lifelineStartY,
+                x2: cx,
+                y2: lastMsgY + BOTTOM_PADDING / 2,
+                stroke: "var(--glyph-border, #1a2035)",
+                strokeWidth: 1,
+                strokeDasharray: "6,4"
+              },
+              `lifeline-${actor.id}`
+            );
+          }),
+          data.actors.map((actor) => {
+            const cx = actorX.get(actor.id) ?? 0;
+            const bottomY = lastMsgY + BOTTOM_PADDING / 2;
+            return renderActorBox(
+              actor,
+              cx,
+              bottomY,
+              "actor-bottom",
+              effectiveActorWidth,
+              effectiveActorHeight,
+              actorFontSize
+            );
+          }),
+          data.messages.map((msg, idx) => {
+            const y = firstMsgY + idx * MSG_SPACING;
+            const fromX = actorX.get(msg.from) ?? 0;
+            const toX = actorX.get(msg.to) ?? 0;
+            if (msg.type === "self") {
+              return renderSelfMessage(fromX, y, msg.label, idx, msgFontSize);
+            }
+            return renderStandardMessage(
+              fromX,
+              toX,
+              y,
+              msg.label,
+              msg.type === "reply",
+              idx,
+              msgFontSize
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "sr-only", "aria-label": "Sequence data", style: SR_ONLY_STYLE4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("caption", { children: "Sequence messages in order" }),
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "#" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "From" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "To" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Message" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Type" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.messages.map((msg, idx) => {
+        const fromActor = data.actors.find((a) => a.id === msg.from);
+        const toActor = data.actors.find((a) => a.id === msg.to);
+        return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: idx + 1 }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: fromActor?.label ?? msg.from }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: toActor?.label ?? msg.to }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: msg.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: msg.type })
+        ] }, idx);
+      }) })
+    ] })
+  ] });
+}
+var SR_ONLY_STYLE4 = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+// src/sequence/index.ts
+var sequenceDefinition = {
+  type: "ui:sequence",
+  schema: schemas.sequenceSchema,
+  render: Sequence
+};
+
+// src/architecture/layout.ts
+var NODE_WIDTH2 = 120;
+var NODE_HEIGHT_WITH_ICON = 60;
+var NODE_HEIGHT_NO_ICON = 40;
+var ZONE_PADDING_TOP = 30;
+var ZONE_PADDING_SIDES = 15;
+var ZONE_PADDING_BOTTOM = 15;
+var LAYOUT_PADDING4 = 20;
+var DIRECTION_MAP = {
+  "top-down": "DOWN",
+  "left-right": "RIGHT",
+  "bottom-up": "UP"
+};
+function buildElkNode(node) {
+  if (node.type === "zone" && node.children?.length) {
+    return {
+      id: node.id,
+      labels: [{ text: node.label }],
+      children: node.children.map(buildElkNode),
+      layoutOptions: {
+        "elk.padding": `[top=${ZONE_PADDING_TOP},left=${ZONE_PADDING_SIDES},bottom=${ZONE_PADDING_BOTTOM},right=${ZONE_PADDING_SIDES}]`
+      }
+    };
+  }
+  return {
+    id: node.id,
+    width: NODE_WIDTH2,
+    height: node.icon ? NODE_HEIGHT_WITH_ICON : NODE_HEIGHT_NO_ICON,
+    labels: [{ text: node.label }]
+  };
+}
+function buildElkGraph(data) {
+  const direction = DIRECTION_MAP[data.layout ?? "top-down"] ?? "DOWN";
+  return {
+    id: "root",
+    children: data.children.map(buildElkNode),
+    edges: data.edges.map((e, i) => ({
+      id: `e${i}`,
+      sources: [e.from],
+      targets: [e.to],
+      labels: e.label ? [{ text: e.label }] : []
+    })),
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "elk.edgeRouting": "ORTHOGONAL",
+      "elk.direction": direction,
+      "elk.spacing.nodeNode": "20",
+      "elk.layered.spacing.nodeNodeBetweenLayers": "30",
+      "elk.spacing.edgeNode": "10",
+      "elk.spacing.edgeEdge": "8"
+    }
+  };
+}
+function collectNodes(elkNode, nodeMap, offsetX, offsetY, nodes, zones, depth, zoneId) {
+  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) {
+    zones.push({
+      id: elkNode.id,
+      label: original.label,
+      x: absX,
+      y: absY,
+      width: elkNode.width,
+      height: elkNode.height,
+      depth
+    });
+    for (const child of elkNode.children) {
+      collectNodes(child, nodeMap, absX, absY, nodes, zones, depth + 1, elkNode.id);
+    }
+  } else {
+    nodes.push({
+      id: elkNode.id,
+      label: original?.label ?? elkNode.id,
+      icon: original?.icon,
+      x: absX,
+      y: absY,
+      width: elkNode.width,
+      height: elkNode.height,
+      zoneId
+    });
+  }
+}
+function flattenNodeMap(children, map) {
+  for (const node of children) {
+    map.set(node.id, node);
+    if (node.children) {
+      flattenNodeMap(node.children, map);
+    }
+  }
+}
+function buildAncestorMap(children, ancestors, map) {
+  for (const node of children) {
+    map.set(node.id, [...ancestors]);
+    if (node.type === "zone" && node.children) {
+      buildAncestorMap(node.children, [...ancestors, node.id], map);
+    }
+  }
+}
+function findLCA(ancestorsA, ancestorsB) {
+  let lca;
+  const len = Math.min(ancestorsA.length, ancestorsB.length);
+  for (let i = 0; i < len; i++) {
+    if (ancestorsA[i] === ancestorsB[i]) {
+      lca = ancestorsA[i];
+    } else {
+      break;
+    }
+  }
+  return lca;
+}
+function extractEdges(elkEdges, dataEdges, ancestorMap, zoneAbsOffsets) {
+  if (!elkEdges) return [];
+  return elkEdges.map((elkEdge, i) => {
+    const dataEdge = dataEdges[i];
+    if (!dataEdge) {
+      return { from: "", to: "", points: [] };
+    }
+    const srcAncestors = ancestorMap.get(dataEdge.from) ?? [];
+    const tgtAncestors = ancestorMap.get(dataEdge.to) ?? [];
+    const lca = findLCA(srcAncestors, tgtAncestors);
+    const offset = lca ? zoneAbsOffsets.get(lca) ?? { x: 0, y: 0 } : { x: 0, y: 0 };
+    const points = [];
+    if (elkEdge.sections) {
+      for (const section of elkEdge.sections) {
+        points.push({ x: section.startPoint.x + offset.x, y: section.startPoint.y + offset.y });
+        if (section.bendPoints) {
+          for (const bp of section.bendPoints) {
+            points.push({ x: bp.x + offset.x, y: bp.y + offset.y });
+          }
+        }
+        points.push({ x: section.endPoint.x + offset.x, y: section.endPoint.y + offset.y });
+      }
+    }
+    return {
+      from: dataEdge.from,
+      to: dataEdge.to,
+      label: dataEdge.label,
+      type: dataEdge.type,
+      style: dataEdge.style,
+      points
+    };
+  });
+}
+async function computeArchitectureLayout(data) {
+  const ELK = await import('elkjs/lib/elk.bundled.js');
+  const elk = new ELK.default();
+  const elkGraph = buildElkGraph(data);
+  const result = await elk.layout(
+    elkGraph
+  );
+  const nodeMap = /* @__PURE__ */ new Map();
+  flattenNodeMap(data.children, nodeMap);
+  const nodes = [];
+  const zones = [];
+  if (result.children) {
+    for (const child of result.children) {
+      collectNodes(child, nodeMap, 0, 0, nodes, zones, 0);
+    }
+  }
+  const zoneAbsOffsets = /* @__PURE__ */ new Map();
+  for (const z of zones) {
+    zoneAbsOffsets.set(z.id, { x: z.x, y: z.y });
+  }
+  const ancestorMap = /* @__PURE__ */ new Map();
+  buildAncestorMap(data.children, [], ancestorMap);
+  const edges = extractEdges(result.edges, data.edges, ancestorMap, zoneAbsOffsets);
+  let maxX = 0;
+  let maxY = 0;
+  for (const n of nodes) {
+    const right = n.x + n.width;
+    const bottom = n.y + n.height;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  for (const z of zones) {
+    const right = z.x + z.width;
+    const bottom = z.y + z.height;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  for (const e of edges) {
+    for (const p of e.points) {
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+  }
+  return {
+    nodes,
+    zones,
+    edges,
+    width: maxX + LAYOUT_PADDING4,
+    height: maxY + LAYOUT_PADDING4
+  };
+}
+
+// src/architecture/icons.ts
+var ICON_PATHS = {
+  // Rack server
+  server: "M4 4h16v4H4zm0 6h16v4H4zm0 6h16v4H4zM6 6h1v0.5H6zm0 6h1v0.5H6zm0 6h1v0.5H6z",
+  // Cylinder
+  database: "M12 2C7.58 2 4 3.34 4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5c0-1.66-3.58-3-8-3zm0 2c3.87 0 6 1.12 6 1s-2.13 1-6 1-6-0.12-6-1 2.13-1 6-1zM6 7.26C7.53 7.83 9.64 8 12 8s4.47-0.17 6-0.74V10c0 0.88-2.13 2-6 2s-6-1.12-6-2V7.26zm0 5C7.53 12.83 9.64 13 12 13s4.47-0.17 6-0.74V15c0 0.88-2.13 2-6 2s-6-1.12-6-2v-2.74zM12 20c-3.87 0-6-1.12-6-2v-2.74C7.53 15.83 9.64 16 12 16s4.47-0.17 6-0.74V18c0 0.88-2.13 2-6 2z",
+  // Horizontal arrows/bars
+  queue: "M2 7h14l-4-3.5M2 12h18l-4-3.5M2 17h14l-4-3.5",
+  // Lightning bolt
+  cache: "M13 2L3 14h7l-2 8 10-12h-7z",
+  // Branching arrows
+  loadbalancer: "M12 2v6m0 0l-6 6m6-6l6 6m-6-6v0M6 14v4h4m4 0h4v-4M12 8a2 2 0 100-4 2 2 0 000 4z",
+  // Lambda symbol
+  function: "M7 4l5 16M12 4l5 16M5 10h14M5 14h14",
+  // Disk/bucket
+  storage: "M4 6a8 3 0 0116 0v12a8 3 0 01-16 0V6zm0 0a8 3 0 0016 0",
+  // Gateway arch
+  gateway: "M3 21V8a9 9 0 0118 0v13M7 21v-8a5 5 0 0110 0v8M11 3v2m-4 1l1 1m8-1l-1 1",
+  // Person silhouette
+  user: "M12 4a4 4 0 110 8 4 4 0 010-8zm0 10c-4.42 0-8 1.79-8 4v2h16v-2c0-2.21-3.58-4-8-4z",
+  // Cloud shape
+  cloud: "M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z",
+  // Box with lid
+  container: "M2 8l10-5 10 5v10l-10 5-10-5V8zm10-5v20M2 8l10 5 10-5",
+  // Connected nodes
+  network: "M12 2a2 2 0 110 4 2 2 0 010-4zM4 10a2 2 0 110 4 2 2 0 010-4zM20 10a2 2 0 110 4 2 2 0 010-4zM12 18a2 2 0 110 4 2 2 0 010-4zM12 6v12M4 12h16M6 11l5-5M18 11l-5-5M6 13l5 5M18 13l-5 5"
+};
+function renderIcon(g, iconName, x, y, size = 20) {
+  const d = ICON_PATHS[iconName];
+  if (!d) return;
+  const iconG = g.append("g").attr("transform", `translate(${x - size / 2}, ${y - size / 2}) scale(${size / 24})`);
+  iconG.append("path").attr("d", d).attr("fill", "none").attr("stroke", "var(--glyph-icon-stroke, #fff)").attr("stroke-width", "var(--glyph-icon-stroke-width, 1.5)").attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+}
+
+// src/architecture/render.ts
+var NODE_PALETTE = [
+  "#00d4aa",
+  "#b44dff",
+  "#22c55e",
+  "#e040fb",
+  "#00e5ff",
+  "#84cc16",
+  "#f472b6",
+  "#fb923c",
+  "#818cf8",
+  "#38bdf8"
+];
+function zoneBackground(depth) {
+  const alphas = [0.06, 0.1, 0.14, 0.18];
+  const alpha = alphas[Math.min(depth, alphas.length - 1)] ?? 0.18;
+  return `rgba(0,212,170,${alpha})`;
+}
+function getThemeVar3(container, varName, fallback) {
+  return getComputedStyle(container).getPropertyValue(varName).trim() || fallback;
+}
+var ARROW_MARKER_ID3 = "glyph-arch-arrowhead";
+function renderArchitecture(svgElement, layout) {
+  const svg = d32__namespace.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 defs = svg.append("defs");
+  defs.append("marker").attr("id", ARROW_MARKER_ID3).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerWidth", 8).attr("markerHeight", 8).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "var(--glyph-edge-color, #6b7a94)");
+  const container = svgElement.parentElement ?? svgElement;
+  const nodeRadius = getThemeVar3(container, "--glyph-node-radius", "3");
+  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);
+  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) {
+    const zoneG = zoneGroup.append("g").attr("class", "glyph-architecture-zone");
+    zoneG.append("rect").attr("x", zone.x).attr("y", zone.y).attr("width", zone.width).attr("height", zone.height).attr("rx", nodeRadius).attr("ry", nodeRadius).attr("fill", zoneBackground(zone.depth)).attr("stroke", "var(--glyph-accent-muted, #1a4a3a)").attr("stroke-width", 1).attr("stroke-dasharray", "6,3");
+    zoneG.append("text").attr("x", zone.x + 10).attr("y", zone.y + 18).attr("font-size", "12px").attr("font-weight", "bold").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-text-muted, #7a8599)").text(zone.label);
+  }
+  const edgeGroup = root.append("g").attr("class", "glyph-architecture-edges");
+  for (const edge of layout.edges) {
+    if (edge.points.length === 0) continue;
+    const edgeG = edgeGroup.append("g").attr("class", "glyph-architecture-edge");
+    const lineGen = d32__namespace.line().x((d) => d.x).y((d) => d.y);
+    const strokeWidth = edge.type === "data" ? 2.5 : 1.5;
+    const dashArray = edge.type === "async" ? "5,5" : null;
+    edgeG.append("path").attr("d", lineGen(edge.points) ?? "").attr("fill", "none").attr("stroke", edge.style?.["stroke"] ?? "var(--glyph-edge-color, #6b7a94)").attr("stroke-width", edge.style?.["stroke-width"] ?? String(strokeWidth)).attr("marker-end", `url(#${ARROW_MARKER_ID3})`).attr("stroke-dasharray", dashArray);
+    if (edge.label && edge.points.length > 1) {
+      let totalLen = 0;
+      const segments = [];
+      for (let i = 1; i < edge.points.length; i++) {
+        const prev = edge.points[i - 1];
+        const curr = edge.points[i];
+        if (prev && curr) {
+          const dx = curr.x - prev.x;
+          const dy = curr.y - prev.y;
+          const len = Math.sqrt(dx * dx + dy * dy);
+          segments.push(len);
+          totalLen += len;
+        }
+      }
+      let remaining = totalLen / 2;
+      let labelX = edge.points[0]?.x ?? 0;
+      let labelY = edge.points[0]?.y ?? 0;
+      for (let i = 0; i < segments.length; i++) {
+        const segLen = segments[i] ?? 0;
+        const prev = edge.points[i];
+        const curr = edge.points[i + 1];
+        if (prev && curr) {
+          if (remaining <= segLen && segLen > 0) {
+            const t = remaining / segLen;
+            labelX = prev.x + t * (curr.x - prev.x);
+            labelY = prev.y + t * (curr.y - prev.y);
+            break;
+          }
+          remaining -= segLen;
+        }
+      }
+      edgeG.append("text").attr("x", labelX).attr("y", labelY - 8).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-text-muted, #7a8599)").text(edge.label);
+    }
+  }
+  const nodeGroup = root.append("g").attr("class", "glyph-architecture-nodes");
+  for (let nodeIdx = 0; nodeIdx < layout.nodes.length; nodeIdx++) {
+    const node = layout.nodes[nodeIdx];
+    if (!node) continue;
+    const nodeG = nodeGroup.append("g").attr("class", "glyph-architecture-node");
+    const color3 = NODE_PALETTE[nodeIdx % NODE_PALETTE.length] ?? "#00d4aa";
+    const defaultStroke = d32__namespace.color(color3)?.darker(0.5)?.toString() ?? "var(--glyph-edge-color, #6b7a94)";
+    nodeG.append("rect").attr("x", node.x).attr("y", node.y).attr("width", node.width).attr("height", node.height).attr("rx", nodeRadius).attr("ry", nodeRadius).attr("fill", color3).attr("stroke", defaultStroke).attr("stroke-width", nodeStrokeWidth).attr("opacity", nodeFillOpacity);
+    if (node.icon) {
+      renderIcon(nodeG, node.icon, node.x + node.width / 2, node.y + 20, 18);
+      nodeG.append("text").attr("x", node.x + node.width / 2).attr("y", node.y + node.height - 10).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-family", "Inter, system-ui, sans-serif").attr("fill", "var(--glyph-node-label-color, #fff)").attr("pointer-events", "none").text(node.label);
+    } else {
+      nodeG.append("text").attr("x", node.x + node.width / 2).attr("y", node.y + node.height / 2).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 Architecture({
+  data,
+  container
+}) {
+  const svgRef = react.useRef(null);
+  const [layout, setLayout] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    computeArchitectureLayout(data).then((result) => {
+      if (!cancelled) setLayout(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [data]);
+  react.useEffect(() => {
+    if (!svgRef.current || !layout) return;
+    renderArchitecture(svgRef.current, layout);
+  }, [layout]);
+  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_STYLE5, 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) {
+      result.push(...flattenNodes(child.children, child.label));
+    } else {
+      result.push({ id: child.id, label: child.label, zone });
+    }
+  }
+  return result;
+}
+function countLeafNodes(children) {
+  let count = 0;
+  for (const child of children) {
+    if (child.type === "zone" && child.children) {
+      count += countLeafNodes(child.children);
+    } else {
+      count++;
+    }
+  }
+  return count;
+}
+var SR_ONLY_STYLE5 = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+// src/architecture/index.ts
+var architectureDefinition = {
+  type: "ui:architecture",
+  schema: schemas.architectureSchema,
+  render: Architecture
+};
+var MAX_VISIBLE_DEPTH = 4;
+var NODE_RADIUS = 28;
+var ROOT_RADIUS = 34;
+var RADIAL_LEVEL_RADIUS = 130;
+var TREE_LEVEL_HEIGHT = 90;
+var TREE_NODE_HGAP = 140;
+var SVG_PADDING = 60;
+var FONT_SIZE = 12;
+var FONT_FAMILY = "Inter, system-ui, sans-serif";
+var BADGE_FONT_SIZE = 10;
+function countHiddenDescendants(node, currentDepth) {
+  if (currentDepth >= MAX_VISIBLE_DEPTH) {
+    return countAllDescendants(node);
+  }
+  let count = 0;
+  for (const child of node.children ?? []) {
+    count += countHiddenDescendants(child, currentDepth + 1);
+  }
+  return count;
+}
+function countAllDescendants(node) {
+  let count = 1;
+  for (const child of node.children ?? []) {
+    count += countAllDescendants(child);
+  }
+  return count;
+}
+function layoutRadial(data) {
+  const nodes = [];
+  const cx = 0;
+  const cy = 0;
+  nodes.push({
+    label: data.root,
+    x: cx,
+    y: cy,
+    depth: 0,
+    hiddenCount: 0
+  });
+  function placeChildren(children, parentX, parentY, depth, startAngle, endAngle) {
+    if (depth > MAX_VISIBLE_DEPTH) return;
+    const count = children.length;
+    if (count === 0) return;
+    const radius = RADIAL_LEVEL_RADIUS * depth;
+    for (let i = 0; i < count; i++) {
+      const child = children[i];
+      if (!child) continue;
+      const angle = count === 1 ? (startAngle + endAngle) / 2 : startAngle + (endAngle - startAngle) * i / (count - 1);
+      const x = cx + radius * Math.cos(angle);
+      const y = cy + radius * Math.sin(angle);
+      const hidden = countHiddenDescendants(child, depth);
+      nodes.push({
+        label: child.label,
+        x,
+        y,
+        depth,
+        parentX,
+        parentY,
+        hiddenCount: hidden
+      });
+      const childChildren = child.children ?? [];
+      if (childChildren.length > 0 && depth < MAX_VISIBLE_DEPTH) {
+        const spreadAngle = Math.PI / Math.max(count, 2);
+        placeChildren(
+          childChildren,
+          x,
+          y,
+          depth + 1,
+          angle - spreadAngle / 2,
+          angle + spreadAngle / 2
+        );
+      }
+    }
+  }
+  const topChildren = data.children;
+  placeChildren(topChildren, cx, cy, 1, 0, 2 * Math.PI * (1 - 1 / Math.max(topChildren.length, 2)));
+  let minX = 0;
+  let maxX = 0;
+  let minY = 0;
+  let maxY = 0;
+  for (const n of nodes) {
+    if (n.x - ROOT_RADIUS < minX) minX = n.x - ROOT_RADIUS;
+    if (n.x + ROOT_RADIUS > maxX) maxX = n.x + ROOT_RADIUS;
+    if (n.y - ROOT_RADIUS < minY) minY = n.y - ROOT_RADIUS;
+    if (n.y + ROOT_RADIUS > maxY) maxY = n.y + ROOT_RADIUS;
+  }
+  const offsetX = -minX + SVG_PADDING;
+  const offsetY = -minY + SVG_PADDING;
+  for (const n of nodes) {
+    n.x += offsetX;
+    n.y += offsetY;
+    if (n.parentX !== void 0) n.parentX += offsetX;
+    if (n.parentY !== void 0) n.parentY += offsetY;
+  }
+  return {
+    nodes,
+    width: maxX - minX + SVG_PADDING * 2,
+    height: maxY - minY + SVG_PADDING * 2
+  };
+}
+function layoutTree(data) {
+  const nodes = [];
+  function countLeaves(children, depth) {
+    if (depth >= MAX_VISIBLE_DEPTH) return 1;
+    let total = 0;
+    for (const child of children) {
+      const childChildren = child.children ?? [];
+      if (childChildren.length === 0 || depth + 1 >= MAX_VISIBLE_DEPTH) {
+        total += 1;
+      } else {
+        total += countLeaves(childChildren, depth + 1);
+      }
+    }
+    return Math.max(total, 1);
+  }
+  const totalLeaves = Math.max(countLeaves(data.children, 1), 1);
+  const totalWidth = totalLeaves * TREE_NODE_HGAP;
+  const rootX = totalWidth / 2 + SVG_PADDING;
+  const rootY = SVG_PADDING;
+  nodes.push({
+    label: data.root,
+    x: rootX,
+    y: rootY,
+    depth: 0,
+    hiddenCount: 0
+  });
+  function placeTreeChildren(children, parentX, parentY, depth, leftBound, rightBound) {
+    if (depth > MAX_VISIBLE_DEPTH) return;
+    const count = children.length;
+    if (count === 0) return;
+    const y = parentY + TREE_LEVEL_HEIGHT;
+    const slotWidth = (rightBound - leftBound) / count;
+    for (let i = 0; i < count; i++) {
+      const child = children[i];
+      if (!child) continue;
+      const x = leftBound + slotWidth * (i + 0.5);
+      const hidden = countHiddenDescendants(child, depth);
+      nodes.push({
+        label: child.label,
+        x,
+        y,
+        depth,
+        parentX,
+        parentY,
+        hiddenCount: hidden
+      });
+      const childChildren = child.children ?? [];
+      if (childChildren.length > 0 && depth < MAX_VISIBLE_DEPTH) {
+        placeTreeChildren(
+          childChildren,
+          x,
+          y,
+          depth + 1,
+          leftBound + slotWidth * i,
+          leftBound + slotWidth * (i + 1)
+        );
+      }
+    }
+  }
+  placeTreeChildren(data.children, rootX, rootY, 1, SVG_PADDING, totalWidth + SVG_PADDING);
+  let maxY = rootY;
+  for (const n of nodes) {
+    if (n.y > maxY) maxY = n.y;
+  }
+  return {
+    nodes,
+    width: totalWidth + SVG_PADDING * 2,
+    height: maxY + SVG_PADDING + NODE_RADIUS
+  };
+}
+function renderAccessibleList(root, children) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { style: SR_ONLY_STYLE6, role: "list", "aria-label": "Mind map structure", children: /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+    root,
+    children.length > 0 && renderAccessibleChildren(children)
+  ] }) });
+}
+function renderAccessibleChildren(children) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { children: children.map((child, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+    child.label,
+    (child.children ?? []).length > 0 && renderAccessibleChildren(child.children ?? [])
+  ] }, i)) });
+}
+function nodeColor(depth) {
+  if (depth === 0) return "var(--glyph-accent, #6c8aff)";
+  if (depth === 1) return "var(--glyph-surface-raised, #162038)";
+  return "var(--glyph-surface, #0f1526)";
+}
+function nodeStroke(depth) {
+  if (depth === 0) return "var(--glyph-accent, #6c8aff)";
+  return "var(--glyph-border-strong, #2a3550)";
+}
+function countAllNodes(children) {
+  let count = 0;
+  for (const child of children) {
+    count += 1;
+    count += countAllNodes(child.children ?? []);
+  }
+  return count;
+}
+function MindMap({ data, container }) {
+  const isTree = data.layout === "tree";
+  const { nodes, width, height } = isTree ? layoutTree(data) : layoutRadial(data);
+  const totalNodes = 1 + countAllNodes(data.children);
+  const ariaLabel = `Mind map: ${data.root} with ${String(totalNodes)} nodes`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "glyph-mindmap-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        role: "img",
+        "aria-label": ariaLabel,
+        viewBox: `0 0 ${width} ${height}`,
+        width: "100%",
+        style: {
+          minHeight: container.tier === "compact" ? 150 : 200,
+          maxHeight: container.tier === "compact" ? 500 : 800,
+          display: "block"
+        },
+        children: [
+          nodes.map((node, idx) => {
+            if (node.parentX === void 0 || node.parentY === void 0) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: node.parentX,
+                y1: node.parentY,
+                x2: node.x,
+                y2: node.y,
+                stroke: "var(--glyph-border, #1a2035)",
+                strokeWidth: 1.5
+              },
+              `edge-${idx}`
+            );
+          }),
+          nodes.map((node, idx) => {
+            const r = node.depth === 0 ? ROOT_RADIUS : NODE_RADIUS;
+            const isRoot = node.depth === 0;
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: node.x,
+                  cy: node.y,
+                  r,
+                  fill: nodeColor(node.depth),
+                  stroke: nodeStroke(node.depth),
+                  strokeWidth: isRoot ? 2 : 1.5
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  x: node.x,
+                  y: node.y,
+                  dy: "0.35em",
+                  textAnchor: "middle",
+                  fontSize: isRoot ? FONT_SIZE + 1 : FONT_SIZE,
+                  fontFamily: FONT_FAMILY,
+                  fontWeight: isRoot ? 700 : 500,
+                  fill: isRoot ? "var(--glyph-text-on-accent, #ffffff)" : "var(--glyph-text, #d4dae3)",
+                  children: node.label.length > 12 ? `${node.label.slice(0, 11)}...` : node.label
+                }
+              ),
+              node.hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: node.x + r * 0.7,
+                    cy: node.y - r * 0.7,
+                    r: 10,
+                    fill: "var(--glyph-accent, #6c8aff)"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "text",
+                  {
+                    x: node.x + r * 0.7,
+                    y: node.y - r * 0.7,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: BADGE_FONT_SIZE,
+                    fontFamily: FONT_FAMILY,
+                    fontWeight: 600,
+                    fill: "var(--glyph-text-on-accent, #ffffff)",
+                    children: [
+                      "+",
+                      node.hiddenCount
+                    ]
+                  }
+                )
+              ] })
+            ] }, `node-${idx}`);
+          })
+        ]
+      }
+    ),
+    renderAccessibleList(data.root, data.children)
+  ] });
+}
+var SR_ONLY_STYLE6 = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+// src/mindmap/index.ts
+var mindMapDefinition = {
+  type: "ui:mindmap",
+  schema: schemas.mindmapSchema,
+  render: MindMap
+};
+function renderLatex(expression) {
+  try {
+    const html = katex__default.default.renderToString(expression, {
+      throwOnError: false,
+      displayMode: true
+    });
+    return { html, error: false };
+  } catch {
+    return { html: "", error: true };
+  }
+}
+var containerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "0.5rem",
+  padding: "1rem",
+  fontFamily: "Inter, system-ui, sans-serif"
+};
+var labelStyle2 = {
+  fontSize: "0.875rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  marginTop: "0.25rem"
+};
+var stepsContainerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
+  width: "100%"
+};
+var stepRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "1.5rem"
+};
+var annotationStyle = {
+  fontSize: "0.875rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  fontStyle: "italic",
+  minWidth: "120px"
+};
+var fallbackStyle = {
+  fontFamily: '"Fira Code", "Cascadia Code", Consolas, monospace',
+  fontSize: "0.875rem",
+  padding: "0.5rem 1rem",
+  borderRadius: "4px",
+  background: "var(--glyph-surface-raised, #162038)",
+  color: "var(--glyph-text, #d4dae3)",
+  border: "1px solid var(--glyph-border, #1a2035)"
+};
+function Equation({ data }) {
+  if (data.expression !== void 0) {
+    const { html, error } = renderLatex(data.expression);
+    const ariaLabel = `Equation: ${data.expression}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, role: "math", "aria-label": ariaLabel, children: [
+      error || html === "" ? /* @__PURE__ */ jsxRuntime.jsx("code", { style: fallbackStyle, children: data.expression }) : /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: html } }),
+      data.label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: labelStyle2, children: data.label })
+    ] });
+  }
+  if (data.steps !== void 0 && data.steps.length > 0) {
+    const allExpressions = data.steps.map((s) => s.expression).join("; ");
+    const ariaLabel = `Equation steps: ${allExpressions}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, role: "math", "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsContainerStyle, children: data.steps.map((step, idx) => {
+        const { html, error } = renderLatex(step.expression);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stepRowStyle, children: [
+          error || html === "" ? /* @__PURE__ */ jsxRuntime.jsx("code", { style: fallbackStyle, children: step.expression }) : /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: html } }),
+          step.annotation !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: annotationStyle, children: step.annotation })
+        ] }, idx);
+      }) }),
+      data.label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: labelStyle2, children: data.label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, role: "math", "aria-label": "Empty equation", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--glyph-text-muted, #6b7a94)" }, children: "No equation provided" }) });
+}
+
+// src/equation/index.ts
+var equationDefinition = {
+  type: "ui:equation",
+  schema: schemas.equationSchema,
+  render: Equation
+};
+
+// src/quiz/styles.ts
+var containerStyle2 = {
+  fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+  color: "var(--glyph-text, #1a2035)",
+  border: "1px solid var(--glyph-border, #d0d8e4)",
+  borderRadius: "var(--glyph-radius-md, 0.5rem)",
+  overflow: "hidden"
+};
+var headerStyle = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+function questionGroupStyle(isLast) {
+  return {
+    padding: "var(--glyph-spacing-md, 1rem)",
+    borderBottom: isLast ? "none" : "1px solid var(--glyph-border, #d0d8e4)"
+  };
+}
+var questionTextStyle = {
+  fontWeight: 600,
+  fontSize: "0.9375rem",
+  marginBottom: "0.75rem"
+};
+function optionLabelStyle(isSelected, submitted, isCorrectOption, isIncorrectSelection) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 0.75rem",
+    marginBottom: "0.375rem",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    cursor: submitted ? "default" : "pointer",
+    background: submitted ? isCorrectOption ? "var(--glyph-quiz-correct-bg, #dcfce7)" : isIncorrectSelection ? "var(--glyph-quiz-incorrect-bg, #fee2e2)" : "transparent" : isSelected ? "var(--glyph-surface, #e8ecf3)" : "transparent",
+    border: "1px solid",
+    borderColor: submitted ? isCorrectOption ? "var(--glyph-quiz-correct, #16a34a)" : isIncorrectSelection ? "var(--glyph-quiz-incorrect, #dc2626)" : "var(--glyph-border, #d0d8e4)" : isSelected ? "var(--glyph-border, #d0d8e4)" : "transparent",
+    fontSize: "0.875rem",
+    lineHeight: 1.6
+  };
+}
+function buttonStyle(disabled) {
+  return {
+    marginTop: "0.75rem",
+    padding: "0.5rem 1.25rem",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    border: "1px solid var(--glyph-border, #d0d8e4)",
+    background: disabled ? "var(--glyph-surface, #e8ecf3)" : "var(--glyph-surface, #e8ecf3)",
+    color: disabled ? "var(--glyph-border, #d0d8e4)" : "var(--glyph-text, #1a2035)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontWeight: 600,
+    fontSize: "0.875rem"
+  };
+}
+function feedbackStyle(correct) {
+  return {
+    marginTop: "0.75rem",
+    padding: "0.5rem 0.75rem",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    background: correct ? "var(--glyph-quiz-correct-bg, #dcfce7)" : "var(--glyph-quiz-incorrect-bg, #fee2e2)",
+    color: correct ? "var(--glyph-quiz-correct, #16a34a)" : "var(--glyph-quiz-incorrect, #dc2626)",
+    fontWeight: 600,
+    fontSize: "0.875rem"
+  };
+}
+var explanationStyle = {
+  marginTop: "0.5rem",
+  padding: "0.5rem 0.75rem",
+  fontSize: "0.8125rem",
+  lineHeight: 1.6,
+  color: "var(--glyph-text, #1a2035)",
+  background: "var(--glyph-surface, #e8ecf3)",
+  borderRadius: "var(--glyph-radius-md, 0.5rem)"
+};
+var scoreStyle = {
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderTop: "1px solid var(--glyph-border, #d0d8e4)",
+  fontWeight: 700,
+  fontSize: "1rem",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+function isCorrect(question, selected) {
+  if (selected === null) return false;
+  switch (question.type) {
+    case "multiple-choice":
+      return selected === question.answer;
+    case "true-false":
+      return selected === question.answer;
+    case "multi-select": {
+      if (!Array.isArray(selected)) return false;
+      const sorted = [...selected].sort();
+      const expected = [...question.answer].sort();
+      return sorted.length === expected.length && sorted.every((v, i) => v === expected[i]);
+    }
+  }
+}
+function Quiz({ data, block }) {
+  const { questions, showScore = true, title } = data;
+  const baseId = `glyph-quiz-${block.id}`;
+  const [states, setStates] = react.useState(
+    () => questions.map((q) => ({
+      selected: q.type === "multi-select" ? [] : null,
+      submitted: false
+    }))
+  );
+  const updateState = (index, patch) => {
+    setStates((prev) => prev.map((s, i) => i === index ? { ...s, ...patch } : s));
+  };
+  const score = states.reduce((acc, s, i) => {
+    const q = questions[i];
+    if (!q || !s.submitted) return acc;
+    return acc + (isCorrect(q, s.selected) ? 1 : 0);
+  }, 0);
+  const submittedCount = states.filter((s) => s.submitted).length;
+  function renderMultipleChoice(question, qIndex, state) {
+    const selected = typeof state.selected === "number" ? state.selected : null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": question.question, 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;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          style: optionLabelStyle(
+            isSelected,
+            state.submitted,
+            isCorrectOption,
+            isIncorrectSelection
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "radio",
+                role: "radio",
+                name: `${baseId}-q${String(qIndex)}`,
+                checked: isSelected,
+                disabled: state.submitted,
+                onChange: () => updateState(qIndex, { selected: oIndex }),
+                "aria-checked": isSelected
+              }
+            ),
+            option
+          ]
+        },
+        oIndex
+      );
+    }) });
+  }
+  function renderTrueFalse(question, qIndex, state) {
+    const selected = typeof state.selected === "boolean" ? state.selected : null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": question.question, children: [true, false].map((value) => {
+      const isSelected = selected === value;
+      const isCorrectOption = state.submitted && value === question.answer;
+      const isIncorrectSelection = state.submitted && isSelected && value !== question.answer;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          style: optionLabelStyle(
+            isSelected,
+            state.submitted,
+            isCorrectOption,
+            isIncorrectSelection
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "radio",
+                role: "radio",
+                name: `${baseId}-q${String(qIndex)}`,
+                checked: isSelected,
+                disabled: state.submitted,
+                onChange: () => updateState(qIndex, { selected: value }),
+                "aria-checked": isSelected
+              }
+            ),
+            value ? "True" : "False"
+          ]
+        },
+        String(value)
+      );
+    }) });
+  }
+  function renderMultiSelect(question, qIndex, state) {
+    const selected = Array.isArray(state.selected) ? state.selected : [];
+    const toggleOption = (oIndex) => {
+      const next = selected.includes(oIndex) ? selected.filter((v) => v !== oIndex) : [...selected, oIndex];
+      updateState(qIndex, { selected: next });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: question.options.map((option, oIndex) => {
+      const isSelected = selected.includes(oIndex);
+      const isCorrectOption = state.submitted && question.answer.includes(oIndex);
+      const isIncorrectSelection = state.submitted && isSelected && !question.answer.includes(oIndex);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          style: optionLabelStyle(
+            isSelected,
+            state.submitted,
+            isCorrectOption,
+            isIncorrectSelection
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                role: "checkbox",
+                checked: isSelected,
+                disabled: state.submitted,
+                onChange: () => toggleOption(oIndex),
+                "aria-checked": isSelected
+              }
+            ),
+            option
+          ]
+        },
+        oIndex
+      );
+    }) });
+  }
+  function renderQuestion(question, qIndex) {
+    const state = states[qIndex] ?? { selected: null, submitted: false };
+    const isLast = qIndex === questions.length - 1;
+    const hasSelection = question.type === "multi-select" ? Array.isArray(state.selected) && state.selected.length > 0 : state.selected !== null;
+    const correct = state.submitted ? isCorrect(question, state.selected) : false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": `Question ${String(qIndex + 1)}`,
+        style: questionGroupStyle(isLast && !(showScore && submittedCount > 0)),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: questionTextStyle, children: [
+            questions.length > 1 ? `${String(qIndex + 1)}. ` : "",
+            question.question
+          ] }),
+          question.type === "multiple-choice" && renderMultipleChoice(question, qIndex, state),
+          question.type === "true-false" && renderTrueFalse(question, qIndex, state),
+          question.type === "multi-select" && renderMultiSelect(question, qIndex, state),
+          !state.submitted && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !hasSelection,
+              style: buttonStyle(!hasSelection),
+              onClick: () => updateState(qIndex, { submitted: true }),
+              children: "Submit"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-live": "polite", children: [
+            state.submitted && /* @__PURE__ */ jsxRuntime.jsx("div", { style: feedbackStyle(correct), children: correct ? "Correct!" : "Incorrect" }),
+            state.submitted && question.explanation && /* @__PURE__ */ jsxRuntime.jsx("div", { style: explanationStyle, children: question.explanation })
+          ] })
+        ]
+      },
+      qIndex
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Quiz", style: containerStyle2, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: headerStyle, children: title }),
+    questions.map((q, i) => renderQuestion(q, i)),
+    showScore && submittedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: scoreStyle, children: [
+      "Score: ",
+      String(score),
+      " / ",
+      String(questions.length)
+    ] })
+  ] });
+}
+
+// src/quiz/index.ts
+var quizDefinition = {
+  type: "ui:quiz",
+  schema: schemas.quizSchema,
+  render: Quiz
+};
+function getVariantStyle(variant) {
+  switch (variant) {
+    case "outlined":
+      return {
+        border: "2px solid var(--glyph-accent, #0a9d7c)"
+      };
+    case "elevated":
+      return {
+        border: "1px solid var(--glyph-border, #d0d8e4)",
+        boxShadow: "var(--glyph-shadow-md, 0 4px 12px rgba(0,0,0,0.15))"
+      };
+    default:
+      return {
+        border: "1px solid var(--glyph-border, #d0d8e4)"
+      };
+  }
+}
+function Card({ data, block, container }) {
+  const { title, cards, variant = "default", columns } = data;
+  const baseId = `glyph-card-${block.id}`;
+  const authorCols = columns ?? Math.min(cards.length, 3);
+  let colCount;
+  switch (container.tier) {
+    case "compact":
+      colCount = 1;
+      break;
+    case "standard":
+      colCount = Math.min(authorCols, 2);
+      break;
+    default:
+      colCount = authorCols;
+  }
+  const containerStyle3 = {
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)"
+  };
+  const gapCount = colCount - 1;
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: `repeat(auto-fill, minmax(max(200px, calc((100% - ${String(gapCount)}rem) / ${String(colCount)})), 1fr))`,
+    gap: "var(--glyph-spacing-md, 1rem)"
+  };
+  const cardBaseStyle = {
+    ...getVariantStyle(variant),
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    overflow: "hidden",
+    background: "var(--glyph-surface, #e8ecf3)",
+    display: "flex",
+    flexDirection: "column"
+  };
+  const cardBodyStyle = {
+    padding: "var(--glyph-spacing-md, 1rem)",
+    flex: 1,
+    display: "flex",
+    flexDirection: "column"
+  };
+  const imageStyle = {
+    width: "100%",
+    aspectRatio: "16 / 9",
+    objectFit: "cover",
+    display: "block"
+  };
+  const iconStyle = {
+    fontSize: "1.5rem",
+    marginBottom: "var(--glyph-spacing-xs, 0.25rem)"
+  };
+  const titleStyle2 = {
+    fontWeight: 700,
+    fontSize: "1rem",
+    color: "var(--glyph-heading, #0a0e1a)",
+    margin: 0
+  };
+  const subtitleStyle = {
+    fontSize: "0.8125rem",
+    color: "var(--glyph-text-muted, #6b7a94)",
+    marginTop: "var(--glyph-spacing-xs, 0.25rem)"
+  };
+  const bodyStyle2 = {
+    fontSize: "0.875rem",
+    lineHeight: 1.6,
+    marginTop: "var(--glyph-spacing-sm, 0.5rem)",
+    flex: 1
+  };
+  const actionsStyle = {
+    display: "flex",
+    gap: "var(--glyph-spacing-sm, 0.5rem)",
+    marginTop: "var(--glyph-spacing-sm, 0.5rem)",
+    flexWrap: "wrap"
+  };
+  const linkStyle = {
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    color: "var(--glyph-link, #0a9d7c)",
+    textDecoration: "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Cards", style: containerStyle3, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          fontWeight: 700,
+          fontSize: "1.125rem",
+          marginBottom: "var(--glyph-spacing-sm, 0.5rem)",
+          color: "var(--glyph-heading, #0a0e1a)"
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "list", style: gridStyle, children: cards.map((card, i) => /* @__PURE__ */ jsxRuntime.jsxs("article", { role: "listitem", style: cardBaseStyle, children: [
+      card.image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: card.image, alt: card.title, loading: "lazy", style: imageStyle }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardBodyStyle, children: [
+        card.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle, children: card.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyle2, children: card.title }),
+        card.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { style: subtitleStyle, children: card.subtitle }),
+        card.body && /* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle2, children: card.body }),
+        card.actions && card.actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: actionsStyle, children: card.actions.map((action, j) => /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: action.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: linkStyle,
+            children: action.label
+          },
+          j
+        )) })
+      ] })
+    ] }, i)) })
+  ] });
+}
+
+// src/card/index.ts
+var cardDefinition = {
+  type: "ui:card",
+  schema: schemas.cardSchema,
+  render: Card
+};
+function groupConsecutiveItems(items) {
+  const groups = [];
+  for (const item of items) {
+    const last = groups.length > 0 ? groups[groups.length - 1] : void 0;
+    if (last && last.type === item.type) {
+      last.items.push(item);
+    } else {
+      groups.push({ type: item.type, items: [item] });
+    }
+  }
+  return groups;
+}
+function classifySectionWidth(section) {
+  let textCount = 0;
+  let progressCount = 0;
+  let pieCount = 0;
+  let statCount = 0;
+  for (const item of section.items) {
+    switch (item.type) {
+      case "text":
+        textCount++;
+        break;
+      case "progress":
+        progressCount++;
+        break;
+      case "pie":
+        pieCount++;
+        break;
+      case "stat":
+        statCount++;
+        break;
+    }
+  }
+  if (textCount > 0) return "wide";
+  if (progressCount >= 4) return "wide";
+  if (pieCount >= 3) return "wide";
+  if (statCount >= 4) return "wide";
+  return "narrow";
+}
+function computeSectionLayout(sections) {
+  return sections.map((section) => {
+    const width = classifySectionWidth(section);
+    return width === "wide" ? "1 / -1" : void 0;
+  });
+}
+var PROGRESS_COLORS = [
+  "var(--glyph-infographic-color-1, #3b82f6)",
+  "var(--glyph-infographic-color-2, #22c55e)",
+  "var(--glyph-infographic-color-3, #f59e0b)",
+  "var(--glyph-infographic-color-4, #ef4444)"
+];
+function renderStatGroup(items, keyPrefix) {
+  const rowStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "var(--glyph-spacing-md, 1rem)"
+  };
+  const statStyle = {
+    flex: "1 1 120px",
+    minWidth: 0
+  };
+  const valueStyle = {
+    fontSize: "1.75rem",
+    fontWeight: 700,
+    color: "var(--glyph-infographic-value-color, #1d4ed8)",
+    lineHeight: 1.2
+  };
+  const labelStyle3 = {
+    fontSize: "0.8125rem",
+    color: "var(--glyph-infographic-label-color, #475569)",
+    marginTop: "var(--glyph-spacing-xs, 0.25rem)",
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    fontWeight: 600
+  };
+  const descStyle = {
+    fontSize: "0.75rem",
+    color: "var(--glyph-infographic-desc-color, #64748b)",
+    marginTop: "var(--glyph-spacing-xs, 0.25rem)",
+    fontStyle: "italic"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: rowStyle, "data-group": "stat", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: valueStyle, children: item.value }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: labelStyle3, children: item.label }),
+    item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: descStyle, children: item.description })
+  ] }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
+}
+function renderProgressGroup(items, keyPrefix, colorOffset) {
+  const trackStyle = {
+    height: "0.5rem",
+    borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+    background: "var(--glyph-infographic-track, #e0e4ea)",
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-group": "progress", children: items.map((item, i) => {
+    const colorIndex = (colorOffset + i) % PROGRESS_COLORS.length;
+    const fillColor = item.color ?? PROGRESS_COLORS[colorIndex];
+    const fillStyle = {
+      height: "100%",
+      width: `${String(item.value)}%`,
+      borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+      background: fillColor,
+      transition: "width 0.3s ease"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: { marginBottom: "var(--glyph-spacing-sm, 0.5rem)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                marginBottom: "var(--glyph-spacing-xs, 0.25rem)",
+                fontSize: "0.875rem"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--glyph-text, #1a2035)", fontWeight: 600 }, children: item.label }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    style: {
+                      color: "var(--glyph-infographic-value-color, #1d4ed8)",
+                      fontWeight: 700
+                    },
+                    children: [
+                      String(item.value),
+                      "%"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: trackStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "progressbar",
+              "aria-valuenow": item.value,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-label": `${item.label}: ${String(item.value)}%`,
+              style: fillStyle
+            }
+          ) })
+        ]
+      },
+      `${keyPrefix}-${String(i)}`
+    );
+  }) }, keyPrefix);
+}
+function renderFactGroup(items, keyPrefix) {
+  const listStyle = {
+    listStyle: "none",
+    margin: 0,
+    padding: 0
+  };
+  const itemStyle2 = {
+    padding: "var(--glyph-spacing-xs, 0.25rem) 0",
+    fontSize: "0.875rem",
+    color: "var(--glyph-text, #1a2035)",
+    fontWeight: 500
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { style: listStyle, "data-group": "fact", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: itemStyle2, children: [
+    item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        style: {
+          marginRight: "var(--glyph-spacing-xs, 0.25rem)",
+          color: "var(--glyph-infographic-accent, #3b82f6)"
+        },
+        "aria-hidden": "true",
+        children: item.icon
+      }
+    ),
+    item.text
+  ] }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
+}
+function renderTextGroup(items, keyPrefix) {
+  const pStyle = {
+    margin: "0 0 var(--glyph-spacing-sm, 0.5rem) 0",
+    fontSize: "0.875rem",
+    lineHeight: 1.6,
+    color: "var(--glyph-text, #1a2035)",
+    borderLeft: "3px solid var(--glyph-infographic-accent, #3b82f6)",
+    paddingLeft: "var(--glyph-spacing-sm, 0.5rem)"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-group": "text", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { style: pStyle, children: item.content }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
+}
+function renderPieGroup(items, keyPrefix, colorOffset) {
+  const wrapperStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "var(--glyph-spacing-md, 1rem)"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: wrapperStyle, "data-group": "pie", children: items.map((item, i) => {
+    const size = item.size ?? 160;
+    const outerRadius = size / 2;
+    const innerRadius = item.donut ?? true ? outerRadius * 0.55 : 0;
+    const cx = outerRadius;
+    const cy = outerRadius;
+    const total = item.slices.reduce((sum, s) => sum + s.value, 0);
+    let cumAngle = -Math.PI / 2;
+    const paths = [];
+    for (let si = 0; si < item.slices.length; si++) {
+      const slice = item.slices[si];
+      if (!slice) continue;
+      const sliceAngle = slice.value / total * 2 * Math.PI;
+      const startAngle = cumAngle;
+      const endAngle = cumAngle + sliceAngle;
+      cumAngle = endAngle;
+      const sliceColorIndex = (colorOffset + si) % PROGRESS_COLORS.length;
+      const fillColor = slice.color ?? PROGRESS_COLORS[sliceColorIndex];
+      const x1 = cx + outerRadius * Math.cos(startAngle);
+      const y1 = cy + outerRadius * Math.sin(startAngle);
+      const x2 = cx + outerRadius * Math.cos(endAngle);
+      const y2 = cy + outerRadius * Math.sin(endAngle);
+      const largeArc = sliceAngle > Math.PI ? 1 : 0;
+      let d;
+      if (innerRadius > 0) {
+        const ix1 = cx + innerRadius * Math.cos(endAngle);
+        const iy1 = cy + innerRadius * Math.sin(endAngle);
+        const ix2 = cx + innerRadius * Math.cos(startAngle);
+        const iy2 = cy + innerRadius * Math.sin(startAngle);
+        d = [
+          `M ${String(x1)} ${String(y1)}`,
+          `A ${String(outerRadius)} ${String(outerRadius)} 0 ${String(largeArc)} 1 ${String(x2)} ${String(y2)}`,
+          `L ${String(ix1)} ${String(iy1)}`,
+          `A ${String(innerRadius)} ${String(innerRadius)} 0 ${String(largeArc)} 0 ${String(ix2)} ${String(iy2)}`,
+          "Z"
+        ].join(" ");
+      } else {
+        d = [
+          `M ${String(cx)} ${String(cy)}`,
+          `L ${String(x1)} ${String(y1)}`,
+          `A ${String(outerRadius)} ${String(outerRadius)} 0 ${String(largeArc)} 1 ${String(x2)} ${String(y2)}`,
+          "Z"
+        ].join(" ");
+      }
+      paths.push(/* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: fillColor }, si));
+    }
+    const ariaLabel = item.label ? `${item.label}: ${item.slices.map((s) => `${s.label} ${String(s.value)}`).join(", ")}` : `Pie chart: ${item.slices.map((s) => `${s.label} ${String(s.value)}`).join(", ")}`;
+    const legendStyle = {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "var(--glyph-spacing-sm, 0.5rem)",
+      marginTop: "var(--glyph-spacing-xs, 0.25rem)",
+      fontSize: "0.75rem",
+      color: "var(--glyph-text-muted, #6b7a94)"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+      item.label && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            fontSize: "0.875rem",
+            fontWeight: 600,
+            color: "var(--glyph-infographic-heading-color, #1e293b)",
+            marginBottom: "var(--glyph-spacing-xs, 0.25rem)"
+          },
+          children: item.label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: `0 0 ${String(size)} ${String(size)}`,
+          role: "img",
+          "aria-label": ariaLabel,
+          children: paths
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: legendStyle, children: item.slices.map((slice, si) => {
+        const sliceColorIndex = (colorOffset + si) % PROGRESS_COLORS.length;
+        const legendColor = slice.color ?? PROGRESS_COLORS[sliceColorIndex];
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.25rem",
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    display: "inline-block",
+                    width: "0.625rem",
+                    height: "0.625rem",
+                    borderRadius: "2px",
+                    background: legendColor
+                  },
+                  "aria-hidden": "true"
+                }
+              ),
+              slice.label
+            ]
+          },
+          si
+        );
+      }) })
+    ] }, `${keyPrefix}-${String(i)}`);
+  }) }, keyPrefix);
+}
+function renderDividerGroup(items, keyPrefix) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-group": "divider", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      role: "separator",
+      style: {
+        border: "none",
+        borderTop: `1px ${item.style ?? "solid"} var(--glyph-infographic-section-divider, #d0d8e4)`,
+        margin: "var(--glyph-spacing-sm, 0.5rem) 0"
+      }
+    },
+    `${keyPrefix}-${String(i)}`
+  )) }, keyPrefix);
+}
+function renderRatingGroup(items, keyPrefix) {
+  const starColor = "var(--glyph-infographic-star, #f59e0b)";
+  const emptyColor = "var(--glyph-text-muted, #6b7a94)";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-group": "rating", children: items.map((item, i) => {
+    const max2 = item.max ?? 5;
+    const fullStars = Math.floor(item.value);
+    const hasHalf = item.value - fullStars >= 0.5;
+    const stars = [];
+    for (let s = 0; s < max2; s++) {
+      if (s < fullStars) {
+        stars.push(
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: starColor }, "aria-hidden": "true", children: "\u2605" }, s)
+        );
+      } else if (s === fullStars && hasHalf) {
+        stars.push(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              style: { position: "relative", display: "inline-block" },
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: emptyColor }, children: "\u2605" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      position: "absolute",
+                      left: 0,
+                      top: 0,
+                      overflow: "hidden",
+                      width: "50%",
+                      color: starColor
+                    },
+                    children: "\u2605"
+                  }
+                )
+              ]
+            },
+            s
+          )
+        );
+      } else {
+        stars.push(
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: emptyColor }, "aria-hidden": "true", children: "\u2605" }, s)
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "baseline",
+          gap: "var(--glyph-spacing-sm, 0.5rem)",
+          marginBottom: "var(--glyph-spacing-sm, 0.5rem)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: "1.5rem",
+                fontWeight: 700,
+                color: "var(--glyph-heading, #0a0e1a)",
+                lineHeight: 1
+              },
+              children: String(item.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  fontSize: "0.875rem",
+                  color: "var(--glyph-text, #1a2035)",
+                  fontWeight: 600
+                },
+                children: item.label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: { fontSize: "1.125rem", letterSpacing: "0.05em" },
+                "aria-label": `${String(item.value)} out of ${String(max2)} stars`,
+                children: stars
+              }
+            ),
+            item.description && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  fontSize: "0.75rem",
+                  color: "var(--glyph-infographic-desc-color, #64748b)",
+                  marginTop: "var(--glyph-spacing-xs, 0.25rem)",
+                  fontStyle: "italic"
+                },
+                children: item.description
+              }
+            )
+          ] })
+        ]
+      },
+      `${keyPrefix}-${String(i)}`
+    );
+  }) }, keyPrefix);
+}
+function Infographic({
+  data,
+  block,
+  container
+}) {
+  const { title, sections } = data;
+  const baseId = `glyph-infographic-${block.id}`;
+  const useGrid = sections.length >= 2 && container.tier !== "compact";
+  const sectionLayouts = react.useMemo(() => computeSectionLayout(sections), [sections]);
+  const containerStyle3 = {
+    fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
+    color: "var(--glyph-text, #1a2035)",
+    background: "var(--glyph-surface, #e8ecf3)",
+    border: "1px solid var(--glyph-border, #d0d8e4)",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    padding: "var(--glyph-spacing-md, 1rem)"
+  };
+  const titleStyle2 = {
+    fontFamily: "var(--glyph-font-heading, system-ui, sans-serif)",
+    fontWeight: 700,
+    fontSize: "1.25rem",
+    color: "var(--glyph-heading, #0a0e1a)",
+    margin: 0,
+    paddingBottom: "var(--glyph-spacing-sm, 0.5rem)",
+    marginBottom: "var(--glyph-spacing-md, 1rem)",
+    borderBottom: "2px solid var(--glyph-infographic-accent, #3b82f6)",
+    ...useGrid ? { gridColumn: "1 / -1" } : {}
+  };
+  const sectionDividerStyle = {
+    borderTop: "1px solid var(--glyph-infographic-section-divider, #d0d8e4)",
+    paddingTop: "var(--glyph-spacing-md, 1rem)",
+    marginTop: "var(--glyph-spacing-md, 1rem)"
+  };
+  const sectionsGridStyle = {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "var(--glyph-spacing-md, 1rem)",
+    alignItems: "start"
+  };
+  const sectionCardStyle = {
+    background: "var(--glyph-infographic-section-bg, rgba(255, 255, 255, 0.5))",
+    borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+    padding: "var(--glyph-spacing-sm, 0.5rem)"
+  };
+  const headingStyle = {
+    fontWeight: 700,
+    fontSize: "1rem",
+    color: "var(--glyph-infographic-heading-color, #1e293b)",
+    marginBottom: "var(--glyph-spacing-sm, 0.5rem)",
+    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; } }` : "";
+  let progressColorOffset = 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Infographic", style: containerStyle3, children: [
+    printCss && /* @__PURE__ */ jsxRuntime.jsx("style", { children: printCss }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-layout": useGrid ? "grid" : "stack", style: useGrid ? sectionsGridStyle : void 0, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyle2, children: title }),
+      sections.map((section, si) => {
+        const groups = groupConsecutiveItems(section.items);
+        const gridColumn = sectionLayouts[si];
+        const sectionStyle = {
+          ...useGrid ? sectionCardStyle : {},
+          ...gridColumn ? { gridColumn } : {},
+          ...!useGrid && si > 0 ? sectionDividerStyle : {}
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: Object.keys(sectionStyle).length > 0 ? sectionStyle : void 0, children: [
+          section.heading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: headingStyle, children: section.heading }),
+          groups.map((group, gi) => {
+            const key = `s${String(si)}-g${String(gi)}`;
+            switch (group.type) {
+              case "stat":
+                return renderStatGroup(group.items, key);
+              case "progress": {
+                const el = renderProgressGroup(
+                  group.items,
+                  key,
+                  progressColorOffset
+                );
+                progressColorOffset += group.items.length;
+                return el;
+              }
+              case "fact":
+                return renderFactGroup(group.items, key);
+              case "text":
+                return renderTextGroup(group.items, key);
+              case "pie": {
+                const el = renderPieGroup(group.items, key, progressColorOffset);
+                progressColorOffset += group.items.reduce(
+                  (sum, item) => sum + item.slices.length,
+                  0
+                );
+                return el;
+              }
+              case "divider":
+                return renderDividerGroup(group.items, key);
+              case "rating":
+                return renderRatingGroup(group.items, key);
+              default:
+                return null;
+            }
+          })
+        ] }, si);
+      })
+    ] })
+  ] });
+}
+
+// src/infographic/index.ts
+var infographicDefinition = {
+  type: "ui:infographic",
+  schema: schemas.infographicSchema,
+  render: Infographic
+};
+
+exports.Accordion = Accordion;
+exports.Architecture = Architecture;
+exports.Callout = Callout;
+exports.Card = Card;
+exports.Chart = Chart;
+exports.CodeDiff = CodeDiff;
+exports.Comparison = Comparison;
+exports.Equation = Equation;
+exports.FileTree = FileTree;
+exports.Flowchart = Flowchart;
+exports.Graph = Graph;
+exports.Infographic = Infographic;
+exports.Kpi = Kpi;
+exports.MindMap = MindMap;
+exports.Quiz = Quiz;
+exports.Relation = Relation;
+exports.Sequence = Sequence;
+exports.Steps = Steps;
+exports.Table = Table;
+exports.Tabs = Tabs;
+exports.Timeline = Timeline;
+exports.accordionDefinition = accordionDefinition;
+exports.architectureDefinition = architectureDefinition;
+exports.calloutDefinition = calloutDefinition;
+exports.cardDefinition = cardDefinition;
+exports.chartDefinition = chartDefinition;
+exports.codeDiffDefinition = codeDiffDefinition;
+exports.comparisonDefinition = comparisonDefinition;
+exports.computeArchitectureLayout = computeArchitectureLayout;
+exports.computeDagreLayout = computeDagreLayout;
+exports.computeDiff = computeDiff;
+exports.computeForceLayout = computeForceLayout;
+exports.equationDefinition = equationDefinition;
+exports.fileTreeDefinition = fileTreeDefinition;
+exports.flowchartDefinition = flowchartDefinition;
+exports.graphDefinition = graphDefinition;
+exports.infographicDefinition = infographicDefinition;
+exports.kpiDefinition = kpiDefinition;
+exports.mindMapDefinition = mindMapDefinition;
+exports.quizDefinition = quizDefinition;
+exports.relationDefinition = relationDefinition;
+exports.sequenceDefinition = sequenceDefinition;
+exports.stepsDefinition = stepsDefinition;
+exports.tableDefinition = tableDefinition;
+exports.tabsDefinition = tabsDefinition;
+exports.timelineDefinition = timelineDefinition;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map