@glyphjs/components 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { accordionSchema, architectureSchema, calloutSchema, cardSchema, chartSchema, codediffSchema, comparisonSchema, equationSchema, filetreeSchema, flowchartSchema, graphSchema, infographicSchema, kpiSchema, mindmapSchema, quizSchema, relationSchema, sequenceSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema } from '@glyphjs/schemas';
+import { accordionSchema, annotateSchema, architectureSchema, calloutSchema, cardSchema, chartSchema, codediffSchema, comparisonSchema, equationSchema, filetreeSchema, flowchartSchema, formSchema, graphSchema, infographicSchema, kanbanSchema, kpiSchema, matrixSchema, mindmapSchema, pollSchema, quizSchema, rankerSchema, ratingSchema, relationSchema, sequenceSchema, sliderSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema } from '@glyphjs/schemas';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import * as d32 from 'd3';
@@ -21,7 +21,7 @@ var CALLOUT_LABELS = {
 };
 function Callout({ data }) {
   const { type, title, content } = data;
-  const containerStyle3 = {
+  const containerStyle11 = {
     backgroundColor: `var(--glyph-callout-${type}-bg)`,
     borderLeft: `4px solid var(--glyph-callout-${type}-border)`,
     borderRadius: "var(--glyph-radius-md, 0.1875rem)",
@@ -38,7 +38,7 @@ function Callout({ data }) {
     fontSize: "1.25em",
     lineHeight: 1
   };
-  const bodyStyle2 = {
+  const bodyStyle3 = {
     flex: 1,
     minWidth: 0
   };
@@ -46,9 +46,9 @@ function Callout({ data }) {
     fontWeight: 700,
     marginBottom: "var(--glyph-spacing-xs, 0.25rem)"
   };
-  return /* @__PURE__ */ jsxs("div", { role: "note", "aria-label": CALLOUT_LABELS[type], style: containerStyle3, children: [
+  return /* @__PURE__ */ jsxs("div", { role: "note", "aria-label": CALLOUT_LABELS[type], style: containerStyle11, children: [
     /* @__PURE__ */ jsx("span", { style: iconStyle, "aria-hidden": "true", children: CALLOUT_ICONS[type] }),
-    /* @__PURE__ */ jsxs("div", { style: bodyStyle2, children: [
+    /* @__PURE__ */ jsxs("div", { style: bodyStyle3, children: [
       title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: title }),
       /* @__PURE__ */ jsx("div", { children: content })
     ] })
@@ -253,9 +253,104 @@ function computeScales(width, height, type, series, xKey, yKey, margin) {
   const yScale = d32.scaleLinear().domain([yMin, yMax]).nice().range([innerHeight, 0]);
   return { xScale, xScalePoint, yScale, innerWidth, innerHeight };
 }
+function renderAllSeries(g, type, series, scales, xKey, yKey, showTooltip, hideTooltip) {
+  const { xScale, xScalePoint, yScale, innerHeight } = scales;
+  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,
+          scales.innerWidth,
+          s.name,
+          showTooltip,
+          hideTooltip
+        );
+        break;
+    }
+  });
+}
+function attachChartInteraction(g, type, series, xKey, yKey, block, onInteraction) {
+  if (!onInteraction) return;
+  series.forEach((s, seriesIdx) => {
+    const className = type === "bar" ? `bar-${String(seriesIdx)}` : `dot-${String(seriesIdx)}`;
+    g.selectAll(`.${className}`).on(
+      "click",
+      (_event, d) => {
+        const dataIdx = s.data.indexOf(d);
+        onInteraction({
+          kind: "chart-select",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          blockId: block.id,
+          blockType: block.type,
+          payload: {
+            seriesIndex: seriesIdx,
+            dataIndex: dataIdx >= 0 ? dataIdx : 0,
+            label: String(d[xKey] ?? ""),
+            value: getNumericValue(d, yKey)
+          }
+        });
+      }
+    );
+  });
+}
 function Chart({
   data,
-  container: containerCtx
+  block,
+  container: containerCtx,
+  onInteraction
 }) {
   const containerRef = useRef(null);
   const svgRef = useRef(null);
@@ -308,76 +403,19 @@ function Chart({
     if (!svg || series.length === 0) return;
     const sel = d32.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;
-      }
-    });
+    renderAxes(
+      g,
+      scales.xScale,
+      scales.yScale,
+      xAxis,
+      yAxis,
+      scales.innerWidth,
+      scales.innerHeight
+    );
+    renderGridLines(g, scales.yScale, scales.innerWidth);
+    renderAllSeries(g, type, series, scales, xKey, yKey, showTooltip, hideTooltip);
+    attachChartInteraction(g, type, series, xKey, yKey, block, onInteraction);
     if (legend) {
       renderLegend(sel, series, margin.left, margin.top, isCompact ? "10px" : void 0);
     }
@@ -393,7 +431,9 @@ function Chart({
     margin,
     isCompact,
     showTooltip,
-    hideTooltip
+    hideTooltip,
+    onInteraction,
+    block
   ]);
   const ariaLabel = `${type} chart with ${String(series.length)} series: ${series.map((s) => s.name).join(", ")}`;
   return /* @__PURE__ */ jsxs(
@@ -467,14 +507,14 @@ var STATUS_LABELS = {
 };
 function Steps({ data }) {
   const { steps } = data;
-  const listStyle = {
+  const listStyle2 = {
     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__ */ jsx("ol", { role: "list", style: listStyle, children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx("ol", { role: "list", style: listStyle2, children: steps.map((step, index) => {
     const status = step.status ?? "pending";
     const isLast = index === steps.length - 1;
     return /* @__PURE__ */ jsxs(
@@ -621,7 +661,95 @@ function TableAggregationFooter({
     );
   }) }) });
 }
-function Table({ data, container }) {
+function TableHead({
+  columns,
+  sort,
+  hasFilters,
+  filters,
+  onSort,
+  onHeaderKeyDown,
+  onFilterChange
+}) {
+  return /* @__PURE__ */ jsxs("thead", { children: [
+    /* @__PURE__ */ jsx("tr", { children: columns.map((col) => {
+      const isSorted = sort.column === col.key;
+      const direction = isSorted ? sort.direction : "none";
+      return /* @__PURE__ */ 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 ? () => onSort(col.key) : void 0,
+          onKeyDown: col.sortable ? (e) => onHeaderKeyDown(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__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        style: { padding: "4px 8px", fontWeight: "normal" },
+        children: col.filterable ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            "aria-label": `Filter ${col.label}`,
+            placeholder: `Filter ${col.label}...`,
+            value: filters[col.key] ?? "",
+            onChange: (e) => onFilterChange(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__ */ 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}`
+    )) })
+  ] });
+}
+function Table({
+  data,
+  block,
+  container,
+  onInteraction
+}) {
   const { columns, rows, aggregation } = data;
   const [sort, setSort] = useState({ column: "", direction: "none" });
   const [filters, setFilters] = useState({});
@@ -654,12 +782,27 @@ function Table({ data, container }) {
     });
   }, [filteredRows, sort]);
   const handleSort = (columnKey) => {
-    setSort((prev) => {
-      if (prev.column === columnKey) {
-        return { column: columnKey, direction: nextDirection(prev.direction) };
-      }
-      return { column: columnKey, direction: "ascending" };
-    });
+    const newDirection = sort.column === columnKey ? nextDirection(sort.direction) : "ascending";
+    setSort({ column: columnKey, direction: newDirection });
+    if (onInteraction) {
+      const eventDir = newDirection === "ascending" ? "asc" : newDirection === "descending" ? "desc" : "none";
+      onInteraction({
+        kind: "table-sort",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          column: columnKey,
+          direction: eventDir,
+          state: {
+            sort: newDirection === "none" ? null : { column: columnKey, direction: eventDir },
+            filters,
+            visibleRowCount: filteredRows.length,
+            totalRowCount: rows.length
+          }
+        }
+      });
+    }
   };
   const handleHeaderKeyDown = (e, columnKey) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -668,7 +811,38 @@ function Table({ data, container }) {
     }
   };
   const handleFilterChange = (columnKey, value) => {
-    setFilters((prev) => ({ ...prev, [columnKey]: value }));
+    const newFilters = { ...filters, [columnKey]: value };
+    setFilters(newFilters);
+    if (onInteraction) {
+      const newVisibleCount = rows.filter(
+        (row) => columns.every((col) => {
+          if (!col.filterable) return true;
+          const fv = newFilters[col.key];
+          if (!fv) return true;
+          return String(row[col.key] ?? "").toLowerCase().includes(fv.toLowerCase());
+        })
+      ).length;
+      const eventSort = sort.direction === "none" || !sort.column ? null : {
+        column: sort.column,
+        direction: sort.direction === "ascending" ? "asc" : "desc"
+      };
+      onInteraction({
+        kind: "table-filter",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          column: columnKey,
+          value,
+          state: {
+            sort: eventSort,
+            filters: newFilters,
+            visibleRowCount: newVisibleCount,
+            totalRowCount: rows.length
+          }
+        }
+      });
+    }
   };
   const hasFilters = columns.some((c) => c.filterable);
   const aggMap = useMemo(() => {
@@ -692,79 +866,18 @@ function Table({ data, container }) {
         fontSize: isCompact ? "0.8125rem" : "var(--glyph-table-font-size, 0.9rem)"
       },
       children: [
-        /* @__PURE__ */ jsxs("thead", { children: [
-          /* @__PURE__ */ jsx("tr", { children: columns.map((col) => {
-            const isSorted = sort.column === col.key;
-            const direction = isSorted ? sort.direction : "none";
-            return /* @__PURE__ */ 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__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              scope: "col",
-              style: { padding: "4px 8px", fontWeight: "normal" },
-              children: col.filterable ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
+          TableHead,
+          {
+            columns,
+            sort,
+            hasFilters,
+            filters,
+            onSort: handleSort,
+            onHeaderKeyDown: handleHeaderKeyDown,
+            onFilterChange: handleFilterChange
+          }
+        ),
         /* @__PURE__ */ jsx("tbody", { children: sortedRows.map((row, rowIdx) => /* @__PURE__ */ jsx(
           "tr",
           {
@@ -802,18 +915,28 @@ var tableDefinition = {
   schema: tableSchema,
   render: Table
 };
-function Tabs({ data, block }) {
+function Tabs({ data, block, onInteraction }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const tabRefs = useRef([]);
   const tabs = data.tabs;
   const baseId = `glyph-tabs-${block.id}`;
-  const focusTab = useCallback(
+  const selectTab = useCallback(
     (index) => {
       const clampedIndex = Math.max(0, Math.min(index, tabs.length - 1));
       setActiveIndex(clampedIndex);
       tabRefs.current[clampedIndex]?.focus();
+      const tab = tabs[clampedIndex];
+      if (tab) {
+        onInteraction?.({
+          kind: "tab-select",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          blockId: block.id,
+          blockType: block.type,
+          payload: { tabIndex: clampedIndex, tabLabel: tab.label }
+        });
+      }
     },
-    [tabs.length]
+    [tabs, block.id, block.type, onInteraction]
   );
   const handleKeyDown = useCallback(
     (e) => {
@@ -821,28 +944,28 @@ function Tabs({ data, block }) {
         case "ArrowRight": {
           e.preventDefault();
           const next = (activeIndex + 1) % tabs.length;
-          focusTab(next);
+          selectTab(next);
           break;
         }
         case "ArrowLeft": {
           e.preventDefault();
           const prev = (activeIndex - 1 + tabs.length) % tabs.length;
-          focusTab(prev);
+          selectTab(prev);
           break;
         }
         case "Home": {
           e.preventDefault();
-          focusTab(0);
+          selectTab(0);
           break;
         }
         case "End": {
           e.preventDefault();
-          focusTab(tabs.length - 1);
+          selectTab(tabs.length - 1);
           break;
         }
       }
     },
-    [activeIndex, focusTab, tabs.length]
+    [activeIndex, selectTab, tabs.length]
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -881,7 +1004,7 @@ function Tabs({ data, block }) {
                   "aria-selected": isActive,
                   "aria-controls": panelId,
                   tabIndex: isActive ? 0 : -1,
-                  onClick: () => setActiveIndex(index),
+                  onClick: () => selectTab(index),
                   onKeyDown: handleKeyDown,
                   style: {
                     padding: "10px 18px",
@@ -993,7 +1116,7 @@ function Timeline({ data }) {
     position: dates.length === 1 ? totalLength / 2 : timeScale(e._parsed),
     side: isVertical ? i % 2 === 0 ? "left" : "right" : i % 2 === 0 ? "top" : "bottom"
   }));
-  const containerStyle3 = {
+  const containerStyle11 = {
     position: "relative",
     fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
     color: "var(--glyph-text, #1a2035)",
@@ -1020,7 +1143,7 @@ function Timeline({ data }) {
     "div",
     {
       ref: containerRef,
-      style: containerStyle3,
+      style: containerStyle11,
       role: "img",
       "aria-label": `Timeline with ${events.length} events`,
       children: [
@@ -1348,7 +1471,7 @@ function getThemeVar(container, varName, fallback) {
   return getComputedStyle(container).getPropertyValue(varName).trim() || fallback;
 }
 var ARROW_MARKER_ID = "glyph-graph-arrowhead";
-function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate) {
+function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate, onNodeClick) {
   const svg = d32.select(svgElement);
   svg.selectAll("*").remove();
   const width = Math.max(layout.width, 200);
@@ -1399,19 +1522,24 @@ function renderGraph(svgElement, layout, groupIndex, outgoingRefs, onNavigate) {
       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) {
+    if (isNavigable || onNodeClick) {
       nodeG.attr("cursor", "pointer");
       nodeG.on("click", () => {
-        const ref = refByAnchor.get(node.id);
-        if (ref) onNavigate(ref);
+        if (isNavigable) {
+          const ref = refByAnchor.get(node.id);
+          if (ref) onNavigate(ref);
+        }
+        onNodeClick?.(node.id, node.label);
       });
     }
   }
 }
 function Graph({
   data,
+  block,
   outgoingRefs,
   onNavigate,
+  onInteraction,
   container
 }) {
   const svgRef = useRef(null);
@@ -1423,10 +1551,29 @@ function Graph({
     }
     return computeDagreLayout(data.nodes, data.edges, direction);
   }, [data]);
+  const handleNodeClick = useMemo(() => {
+    if (!onInteraction) return void 0;
+    return (nodeId, nodeLabel) => {
+      onInteraction({
+        kind: "graph-node-click",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: { nodeId, nodeLabel }
+      });
+    };
+  }, [onInteraction, block.id, block.type]);
   useEffect(() => {
     if (!svgRef.current) return;
-    renderGraph(svgRef.current, layoutResult, groupIndex.current, outgoingRefs, onNavigate);
-  }, [layoutResult, outgoingRefs, onNavigate]);
+    renderGraph(
+      svgRef.current,
+      layoutResult,
+      groupIndex.current,
+      outgoingRefs,
+      onNavigate,
+      handleNodeClick
+    );
+  }, [layoutResult, outgoingRefs, onNavigate, handleNodeClick]);
   const ariaLabel = `${data.type} graph with ${data.nodes.length} nodes and ${data.edges.length} edges`;
   return /* @__PURE__ */ jsxs("div", { className: "glyph-graph-container", children: [
     /* @__PURE__ */ jsx(
@@ -1770,7 +1917,7 @@ function Kpi({ data, block, container }) {
     default:
       colCount = authorCols;
   }
-  const containerStyle3 = {
+  const containerStyle11 = {
     fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
     color: "var(--glyph-text, #1a2035)"
   };
@@ -1780,13 +1927,13 @@ function Kpi({ data, block, container }) {
     gridTemplateColumns: `repeat(auto-fill, minmax(max(120px, calc((100% - ${String(gapCount)}rem) / ${String(colCount)})), 1fr))`,
     gap: "var(--glyph-spacing-md, 1rem)"
   };
-  const cardStyle = {
+  const cardStyle2 = {
     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 = {
+  const labelStyle4 = {
     fontSize: "0.8125rem",
     color: "var(--glyph-text-muted, #6b7a94)",
     marginBottom: "var(--glyph-spacing-xs, 0.25rem)"
@@ -1797,7 +1944,7 @@ function Kpi({ data, block, container }) {
     color: "var(--glyph-heading, #0a0e1a)",
     lineHeight: 1.2
   };
-  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Key metrics", style: containerStyle3, children: [
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Key metrics", style: containerStyle11, children: [
     title && /* @__PURE__ */ jsx(
       "div",
       {
@@ -1817,8 +1964,8 @@ function Kpi({ data, block, container }) {
         marginTop: "var(--glyph-spacing-xs, 0.25rem)",
         color: `var(--glyph-kpi-${sentiment}, inherit)`
       };
-      return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": buildAriaLabel(metric), style: cardStyle, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle3, children: metric.label }),
+      return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": buildAriaLabel(metric), style: cardStyle2, children: [
+        /* @__PURE__ */ jsx("div", { style: labelStyle4, children: metric.label }),
         /* @__PURE__ */ jsxs("div", { style: valueStyle, children: [
           metric.value,
           metric.unit && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", fontWeight: 400, marginLeft: "0.25rem" }, children: metric.unit })
@@ -1838,25 +1985,41 @@ var kpiDefinition = {
   schema: kpiSchema,
   render: Kpi
 };
-function Accordion({ data, block }) {
+function Accordion({
+  data,
+  block,
+  onInteraction
+}) {
   const { title, sections, defaultOpen = [], multiple = true } = data;
   const baseId = `glyph-accordion-${block.id}`;
   const containerRef = useRef(null);
   const handleToggle = useCallback(
-    (e) => {
-      if (multiple) return;
+    (e, sectionIndex) => {
       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;
+      const expanded = target.open;
+      if (!multiple && expanded && containerRef.current) {
+        const allDetails = containerRef.current.querySelectorAll("details");
+        for (const details of allDetails) {
+          if (details !== target && details.open) {
+            details.open = false;
+          }
         }
       }
+      onInteraction?.({
+        kind: "accordion-toggle",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          sectionIndex,
+          sectionTitle: sections[sectionIndex]?.title ?? "",
+          expanded
+        }
+      });
     },
-    [multiple]
+    [multiple, sections, block.id, block.type, onInteraction]
   );
-  const containerStyle3 = {
+  const containerStyle11 = {
     fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
     color: "var(--glyph-text, #1a2035)",
     border: "1px solid var(--glyph-border, #d0d8e4)",
@@ -1890,7 +2053,7 @@ function Accordion({ data, block }) {
       ref: containerRef,
       role: "region",
       "aria-label": title ?? "Accordion",
-      style: containerStyle3,
+      style: containerStyle11,
       children: [
         title && /* @__PURE__ */ jsx(
           "div",
@@ -1909,7 +2072,7 @@ function Accordion({ data, block }) {
           "details",
           {
             open: defaultOpen.includes(i),
-            onToggle: handleToggle,
+            onToggle: (e) => handleToggle(e, i),
             style: sectionStyle(i === sections.length - 1),
             children: [
               /* @__PURE__ */ jsxs("summary", { style: summaryStyle, children: [
@@ -1978,17 +2141,18 @@ function renderValue(value) {
 function Comparison({
   data,
   block,
-  container
+  container,
+  onInteraction
 }) {
   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 = {
+  const containerStyle11 = {
     fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
     color: "var(--glyph-text, #1a2035)"
   };
-  const tableStyle = {
+  const tableStyle2 = {
     width: "100%",
     borderCollapse: "collapse",
     border: "1px solid var(--glyph-table-border, #d0d8e4)",
@@ -1996,7 +2160,7 @@ function Comparison({
     overflow: "hidden",
     fontSize: isCompact ? "0.8125rem" : "0.875rem"
   };
-  const thStyle = {
+  const thStyle2 = {
     padding: cellPadding,
     textAlign: "center",
     fontWeight: 600,
@@ -2005,7 +2169,7 @@ function Comparison({
     color: "var(--glyph-heading, #0a0e1a)"
   };
   const featureThStyle = {
-    ...thStyle,
+    ...thStyle2,
     textAlign: "left"
   };
   const rowThStyle = {
@@ -2015,13 +2179,13 @@ function Comparison({
     borderBottom: "1px solid var(--glyph-table-border, #d0d8e4)",
     fontSize: "0.8125rem"
   };
-  const cellStyle = (rowIndex) => ({
+  const cellStyle2 = (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__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Comparison", style: containerStyle3, children: [
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Comparison", style: containerStyle11, children: [
     title && /* @__PURE__ */ jsx(
       "div",
       {
@@ -2034,23 +2198,46 @@ function Comparison({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { role: "grid", style: tableStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { role: "grid", style: tableStyle2, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { style: featureThStyle, scope: "col", children: "Feature" }),
-        options.map((option, i) => /* @__PURE__ */ jsxs("th", { style: thStyle, scope: "col", children: [
-          /* @__PURE__ */ jsx("div", { children: option.name }),
-          option.description && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                fontWeight: 400,
-                fontSize: "0.75rem",
-                color: "var(--glyph-text-muted, #6b7a94)"
-              },
-              children: option.description
-            }
-          )
-        ] }, i))
+        options.map((option, i) => /* @__PURE__ */ jsxs(
+          "th",
+          {
+            style: {
+              ...thStyle2,
+              ...onInteraction ? { cursor: "pointer" } : {}
+            },
+            scope: "col",
+            onClick: onInteraction ? () => {
+              onInteraction({
+                kind: "comparison-select",
+                timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                blockId: block.id,
+                blockType: block.type,
+                payload: {
+                  optionIndex: i,
+                  optionName: option.name
+                }
+              });
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { children: option.name }),
+              option.description && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontWeight: 400,
+                    fontSize: "0.75rem",
+                    color: "var(--glyph-text-muted, #6b7a94)"
+                  },
+                  children: option.description
+                }
+              )
+            ]
+          },
+          i
+        ))
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: features.map((feature, rowIndex) => /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx(
@@ -2066,7 +2253,7 @@ function Comparison({
         ),
         options.map((_, colIndex) => {
           const value = feature.values[colIndex] ?? "";
-          return /* @__PURE__ */ jsx("td", { style: cellStyle(rowIndex), children: value ? renderValue(value) : null }, colIndex);
+          return /* @__PURE__ */ jsx("td", { style: cellStyle2(rowIndex), children: value ? renderValue(value) : null }, colIndex);
         })
       ] }, rowIndex)) })
     ] }) })
@@ -2144,7 +2331,7 @@ function CodeDiff({ data, block }) {
   const baseId = `glyph-codediff-${block.id}`;
   const diffLines = useMemo(() => computeDiff(before, after), [before, after]);
   const summary = useMemo(() => summarizeDiff(diffLines), [diffLines]);
-  const containerStyle3 = {
+  const containerStyle11 = {
     fontFamily: 'var(--glyph-font-mono, ui-monospace, "Cascadia Code", "Fira Code", monospace)',
     fontSize: "0.8125rem",
     lineHeight: 1.5,
@@ -2163,7 +2350,7 @@ function CodeDiff({ data, block }) {
     fontWeight: 600,
     color: "var(--glyph-text-muted, #6b7a94)"
   };
-  const tableStyle = {
+  const tableStyle2 = {
     width: "100%",
     borderCollapse: "collapse",
     tableLayout: "fixed"
@@ -2202,13 +2389,13 @@ function CodeDiff({ data, block }) {
     if (kind === "del") return "var(--glyph-codediff-del-color, inherit)";
     return void 0;
   }
-  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": summary, style: containerStyle3, children: [
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": summary, style: containerStyle11, children: [
     (beforeLabel || afterLabel) && /* @__PURE__ */ jsxs("div", { style: labelBarStyle, children: [
       beforeLabel && /* @__PURE__ */ jsx("span", { children: beforeLabel }),
       beforeLabel && afterLabel && /* @__PURE__ */ jsx("span", { children: "\u2192" }),
       afterLabel && /* @__PURE__ */ jsx("span", { children: afterLabel })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx("table", { role: "grid", style: tableStyle, children: /* @__PURE__ */ jsx("tbody", { children: diffLines.map((line6, i) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx("table", { role: "grid", style: tableStyle2, children: /* @__PURE__ */ jsx("tbody", { children: diffLines.map((line6, i) => /* @__PURE__ */ jsxs(
       "tr",
       {
         "aria-label": ARIA_LABELS[line6.kind],
@@ -2474,15 +2661,25 @@ function TreeItem({
   setSize,
   posInSet,
   onFocusChange,
-  flatItems
+  flatItems,
+  parentPath,
+  onSelect
 }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const itemRef = useRef(null);
   const isDir = Array.isArray(node.children) && node.children.length > 0;
   const isFocused = flatIndex === focusedIndex;
+  const path = parentPath ? `${parentPath}/${node.name}` : node.name;
   const handleToggle = useCallback(() => {
-    if (isDir) setExpanded((prev) => !prev);
-  }, [isDir]);
+    if (isDir) {
+      setExpanded((prev) => {
+        onSelect?.(path, "directory", !prev);
+        return !prev;
+      });
+    } else {
+      onSelect?.(path, "file");
+    }
+  }, [isDir, path, onSelect]);
   const handleKeyDown = useCallback(
     (e) => {
       let handled = true;
@@ -2614,7 +2811,9 @@ function TreeItem({
               setSize: node.children?.length ?? 0,
               posInSet: childIdx + 1,
               onFocusChange,
-              flatItems
+              flatItems,
+              parentPath: path,
+              onSelect
             },
             child.name
           );
@@ -2647,7 +2846,11 @@ function getChildFlatIndex(flatItems, parentFlatIndex, childIdx, children) {
   }
   return parentFlatIndex + childIdx + 1;
 }
-function FileTree({ data }) {
+function FileTree({
+  data,
+  block,
+  onInteraction
+}) {
   const [focusedIndex, setFocusedIndex] = useState(0);
   const containerRef = useRef(null);
   const flatItems = flattenTree(data.tree, data.root ? 1 : 0);
@@ -2658,6 +2861,18 @@ function FileTree({ data }) {
     const el = container.querySelector(`[data-flat-index="${String(index)}"]`);
     el?.focus();
   }, []);
+  const handleSelect = useCallback(
+    (path, type, expanded) => {
+      onInteraction?.({
+        kind: "filetree-select",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: { path, type, expanded }
+      });
+    },
+    [onInteraction, block.id, block.type]
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -2714,7 +2929,9 @@ function FileTree({ data }) {
                     setSize: data.tree.length,
                     posInSet: idx + 1,
                     onFocusChange: handleFocusChange,
-                    flatItems
+                    flatItems,
+                    parentPath: data.root ?? "",
+                    onSelect: handleSelect
                   },
                   node.name
                 );
@@ -2735,7 +2952,9 @@ function FileTree({ data }) {
               setSize: data.tree.length,
               posInSet: idx + 1,
               onFocusChange: handleFocusChange,
-              flatItems
+              flatItems,
+              parentPath: "",
+              onSelect: handleSelect
             },
             node.name
           );
@@ -3983,7 +4202,115 @@ function isCorrect(question, selected) {
     }
   }
 }
-function Quiz({ data, block }) {
+function renderMultipleChoice(question, qIndex, state, updateState, baseId) {
+  const selected = typeof state.selected === "number" ? state.selected : null;
+  return /* @__PURE__ */ 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__ */ jsxs(
+      "label",
+      {
+        style: optionLabelStyle(
+          isSelected,
+          state.submitted,
+          isCorrectOption,
+          isIncorrectSelection
+        ),
+        children: [
+          /* @__PURE__ */ 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, updateState, baseId) {
+  const selected = typeof state.selected === "boolean" ? state.selected : null;
+  return /* @__PURE__ */ 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__ */ jsxs(
+      "label",
+      {
+        style: optionLabelStyle(
+          isSelected,
+          state.submitted,
+          isCorrectOption,
+          isIncorrectSelection
+        ),
+        children: [
+          /* @__PURE__ */ 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, updateState) {
+  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__ */ 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__ */ jsxs(
+      "label",
+      {
+        style: optionLabelStyle(
+          isSelected,
+          state.submitted,
+          isCorrectOption,
+          isIncorrectSelection
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              role: "checkbox",
+              checked: isSelected,
+              disabled: state.submitted,
+              onChange: () => toggleOption(oIndex),
+              "aria-checked": isSelected
+            }
+          ),
+          option
+        ]
+      },
+      oIndex
+    );
+  }) });
+}
+function Quiz({ data, block, onInteraction }) {
   const { questions, showScore = true, title } = data;
   const baseId = `glyph-quiz-${block.id}`;
   const [states, setStates] = useState(
@@ -4001,114 +4328,6 @@ function Quiz({ data, block }) {
     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__ */ 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__ */ jsxs(
-        "label",
-        {
-          style: optionLabelStyle(
-            isSelected,
-            state.submitted,
-            isCorrectOption,
-            isIncorrectSelection
-          ),
-          children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsxs(
-        "label",
-        {
-          style: optionLabelStyle(
-            isSelected,
-            state.submitted,
-            isCorrectOption,
-            isIncorrectSelection
-          ),
-          children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsxs(
-        "label",
-        {
-          style: optionLabelStyle(
-            isSelected,
-            state.submitted,
-            isCorrectOption,
-            isIncorrectSelection
-          ),
-          children: [
-            /* @__PURE__ */ 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;
@@ -4125,16 +4344,52 @@ function Quiz({ data, block }) {
             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),
+          question.type === "multiple-choice" && renderMultipleChoice(question, qIndex, state, updateState, baseId),
+          question.type === "true-false" && renderTrueFalse(question, qIndex, state, updateState, baseId),
+          question.type === "multi-select" && renderMultiSelect(question, qIndex, state, updateState),
           !state.submitted && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               disabled: !hasSelection,
               style: buttonStyle(!hasSelection),
-              onClick: () => updateState(qIndex, { submitted: true }),
+              onClick: () => {
+                updateState(qIndex, { submitted: true });
+                if (onInteraction) {
+                  const correct2 = isCorrect(question, state.selected);
+                  const newScore = states.reduce((acc, s, i) => {
+                    if (i === qIndex) return acc + (correct2 ? 1 : 0);
+                    const q = questions[i];
+                    if (!q || !s.submitted) return acc;
+                    return acc + (isCorrect(q, s.selected) ? 1 : 0);
+                  }, 0);
+                  let selected;
+                  switch (question.type) {
+                    case "multiple-choice":
+                      selected = typeof state.selected === "number" ? [question.options[state.selected] ?? String(state.selected)] : [];
+                      break;
+                    case "true-false":
+                      selected = typeof state.selected === "boolean" ? [state.selected ? "True" : "False"] : [];
+                      break;
+                    case "multi-select":
+                      selected = Array.isArray(state.selected) ? state.selected.map((idx) => question.options[idx] ?? String(idx)) : [];
+                      break;
+                  }
+                  onInteraction({
+                    kind: "quiz-submit",
+                    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                    blockId: block.id,
+                    blockType: block.type,
+                    payload: {
+                      questionIndex: qIndex,
+                      question: question.question,
+                      selected,
+                      correct: correct2,
+                      score: { correct: newScore, total: questions.length }
+                    }
+                  });
+                }
+              },
               children: "Submit"
             }
           ),
@@ -4197,7 +4452,7 @@ function Card({ data, block, container }) {
     default:
       colCount = authorCols;
   }
-  const containerStyle3 = {
+  const containerStyle11 = {
     fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
     color: "var(--glyph-text, #1a2035)"
   };
@@ -4242,7 +4497,7 @@ function Card({ data, block, container }) {
     color: "var(--glyph-text-muted, #6b7a94)",
     marginTop: "var(--glyph-spacing-xs, 0.25rem)"
   };
-  const bodyStyle2 = {
+  const bodyStyle3 = {
     fontSize: "0.875rem",
     lineHeight: 1.6,
     marginTop: "var(--glyph-spacing-sm, 0.5rem)",
@@ -4260,7 +4515,7 @@ function Card({ data, block, container }) {
     color: "var(--glyph-link, #0a9d7c)",
     textDecoration: "none"
   };
-  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Cards", style: containerStyle3, children: [
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Cards", style: containerStyle11, children: [
     title && /* @__PURE__ */ jsx(
       "div",
       {
@@ -4279,7 +4534,7 @@ function Card({ data, block, container }) {
         card.icon && /* @__PURE__ */ jsx("div", { style: iconStyle, children: card.icon }),
         /* @__PURE__ */ jsx("h3", { style: titleStyle2, children: card.title }),
         card.subtitle && /* @__PURE__ */ jsx("div", { style: subtitleStyle, children: card.subtitle }),
-        card.body && /* @__PURE__ */ jsx("div", { style: bodyStyle2, children: card.body }),
+        card.body && /* @__PURE__ */ jsx("div", { style: bodyStyle3, children: card.body }),
         card.actions && card.actions.length > 0 && /* @__PURE__ */ jsx("div", { style: actionsStyle, children: card.actions.map((action, j) => /* @__PURE__ */ jsx(
           "a",
           {
@@ -4369,7 +4624,7 @@ function renderStatGroup(items, keyPrefix) {
     color: "var(--glyph-infographic-value-color, #1d4ed8)",
     lineHeight: 1.2
   };
-  const labelStyle3 = {
+  const labelStyle4 = {
     fontSize: "0.8125rem",
     color: "var(--glyph-infographic-label-color, #475569)",
     marginTop: "var(--glyph-spacing-xs, 0.25rem)",
@@ -4385,7 +4640,7 @@ function renderStatGroup(items, keyPrefix) {
   };
   return /* @__PURE__ */ jsx("div", { style: rowStyle, "data-group": "stat", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
     /* @__PURE__ */ jsx("div", { style: valueStyle, children: item.value }),
-    /* @__PURE__ */ jsx("div", { style: labelStyle3, children: item.label }),
+    /* @__PURE__ */ jsx("div", { style: labelStyle4, children: item.label }),
     item.description && /* @__PURE__ */ jsx("div", { style: descStyle, children: item.description })
   ] }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
 }
@@ -4456,18 +4711,18 @@ function renderProgressGroup(items, keyPrefix, colorOffset) {
   }) }, keyPrefix);
 }
 function renderFactGroup(items, keyPrefix) {
-  const listStyle = {
+  const listStyle2 = {
     listStyle: "none",
     margin: 0,
     padding: 0
   };
-  const itemStyle2 = {
+  const itemStyle4 = {
     padding: "var(--glyph-spacing-xs, 0.25rem) 0",
     fontSize: "0.875rem",
     color: "var(--glyph-text, #1a2035)",
     fontWeight: 500
   };
-  return /* @__PURE__ */ jsx("ul", { style: listStyle, "data-group": "fact", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { style: itemStyle2, children: [
+  return /* @__PURE__ */ jsx("ul", { style: listStyle2, "data-group": "fact", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { style: itemStyle4, children: [
     item.icon && /* @__PURE__ */ jsx(
       "span",
       {
@@ -4744,7 +4999,7 @@ function Infographic({
   const baseId = `glyph-infographic-${block.id}`;
   const useGrid = sections.length >= 2 && container.tier !== "compact";
   const sectionLayouts = useMemo(() => computeSectionLayout(sections), [sections]);
-  const containerStyle3 = {
+  const containerStyle11 = {
     fontFamily: "var(--glyph-font-body, system-ui, sans-serif)",
     color: "var(--glyph-text, #1a2035)",
     background: "var(--glyph-surface, #e8ecf3)",
@@ -4789,7 +5044,7 @@ function Infographic({
   };
   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__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Infographic", style: containerStyle3, children: [
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Infographic", style: containerStyle11, children: [
     printCss && /* @__PURE__ */ jsx("style", { children: printCss }),
     /* @__PURE__ */ jsxs("div", { "data-layout": useGrid ? "grid" : "stack", style: useGrid ? sectionsGridStyle : void 0, children: [
       title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: title }),
@@ -4850,6 +5105,1731 @@ var infographicDefinition = {
   render: Infographic
 };
 
-export { Accordion, Architecture, Callout, Card, Chart, CodeDiff, Comparison, Equation, FileTree, Flowchart, Graph, Infographic, Kpi, MindMap, Quiz, Relation, Sequence, Steps, Table, Tabs, Timeline, accordionDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, graphDefinition, infographicDefinition, kpiDefinition, mindMapDefinition, quizDefinition, relationDefinition, sequenceDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+// src/poll/styles.ts
+var 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"
+};
+var headerStyle2 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+var questionStyle = {
+  fontWeight: 600,
+  fontSize: "0.9375rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  paddingBottom: "0.5rem"
+};
+var optionsStyle = {
+  padding: "0 var(--glyph-spacing-md, 1rem)",
+  paddingBottom: "var(--glyph-spacing-md, 1rem)"
+};
+function optionLabelStyle2(selected) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 0.75rem",
+    marginBottom: "0.375rem",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    cursor: "pointer",
+    background: selected ? "var(--glyph-surface, #e8ecf3)" : "transparent",
+    border: "1px solid",
+    borderColor: selected ? "var(--glyph-border, #d0d8e4)" : "transparent",
+    fontSize: "0.875rem",
+    lineHeight: 1.6
+  };
+}
+var voteButtonStyle = {
+  margin: "0 var(--glyph-spacing-md, 1rem) var(--glyph-spacing-md, 1rem)",
+  padding: "0.5rem 1.25rem",
+  borderRadius: "var(--glyph-radius-md, 0.5rem)",
+  border: "1px solid var(--glyph-border, #d0d8e4)",
+  background: "var(--glyph-surface, #e8ecf3)",
+  color: "var(--glyph-text, #1a2035)",
+  cursor: "pointer",
+  fontWeight: 600,
+  fontSize: "0.875rem"
+};
+var resultsStyle = {
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderTop: "1px solid var(--glyph-border, #d0d8e4)"
+};
+var resultRowStyle = {
+  marginBottom: "0.5rem"
+};
+var resultLabelStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "0.8125rem",
+  marginBottom: "0.25rem"
+};
+var barTrackStyle = {
+  height: "0.5rem",
+  borderRadius: "0.25rem",
+  background: "var(--glyph-poll-bar-bg, var(--glyph-surface, #e8ecf3))",
+  overflow: "hidden"
+};
+function barFillStyle(percentage) {
+  return {
+    height: "100%",
+    width: `${String(percentage)}%`,
+    borderRadius: "0.25rem",
+    background: "var(--glyph-poll-bar-fill, var(--glyph-accent, #0a9d7c))",
+    transition: "width 0.3s ease"
+  };
+}
+function Poll({ data, block, onInteraction }) {
+  const { question, options, multiple = false, showResults = true, title } = data;
+  const baseId = `glyph-poll-${block.id}`;
+  const [selected, setSelected] = useState([]);
+  const [votes, setVotes] = useState(() => options.map(() => 0));
+  const [hasVoted, setHasVoted] = useState(false);
+  const toggleOption = (index) => {
+    if (hasVoted) return;
+    if (multiple) {
+      setSelected(
+        (prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+      );
+    } else {
+      setSelected([index]);
+    }
+  };
+  const handleVote = () => {
+    if (selected.length === 0 || hasVoted) return;
+    const newVotes = [...votes];
+    for (const idx of selected) {
+      newVotes[idx] = (newVotes[idx] ?? 0) + 1;
+    }
+    setVotes(newVotes);
+    setHasVoted(true);
+    if (onInteraction) {
+      onInteraction({
+        kind: "poll-vote",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          selectedOptions: selected.map((i) => options[i] ?? String(i)),
+          selectedIndices: [...selected]
+        }
+      });
+    }
+  };
+  const totalVotes = votes.reduce((a, b) => a + b, 0);
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Poll", style: containerStyle3, children: [
+    title && /* @__PURE__ */ jsx("div", { style: headerStyle2, children: title }),
+    /* @__PURE__ */ jsx("div", { style: questionStyle, children: question }),
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": question, style: optionsStyle, children: options.map((option, index) => /* @__PURE__ */ jsxs("label", { style: optionLabelStyle2(selected.includes(index)), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: multiple ? "checkbox" : "radio",
+          name: `${baseId}-option`,
+          checked: selected.includes(index),
+          disabled: hasVoted,
+          onChange: () => toggleOption(index),
+          "aria-checked": selected.includes(index)
+        }
+      ),
+      option
+    ] }, index)) }),
+    !hasVoted && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: selected.length === 0,
+        style: {
+          ...voteButtonStyle,
+          opacity: selected.length === 0 ? 0.5 : 1,
+          cursor: selected.length === 0 ? "not-allowed" : "pointer"
+        },
+        onClick: handleVote,
+        children: "Vote"
+      }
+    ),
+    showResults && hasVoted && /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", style: resultsStyle, children: options.map((option, index) => {
+      const count = votes[index] ?? 0;
+      const percentage = totalVotes > 0 ? count / totalVotes * 100 : 0;
+      return /* @__PURE__ */ jsxs("div", { style: resultRowStyle, children: [
+        /* @__PURE__ */ jsxs("div", { style: resultLabelStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: option }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            String(count),
+            " vote",
+            count !== 1 ? "s" : "",
+            " (",
+            String(Math.round(percentage)),
+            "%)"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: barTrackStyle,
+            role: "progressbar",
+            "aria-valuenow": percentage,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": `${option}: ${String(Math.round(percentage))}%`,
+            children: /* @__PURE__ */ jsx("div", { style: barFillStyle(percentage) })
+          }
+        )
+      ] }, index);
+    }) })
+  ] });
+}
+
+// src/poll/index.ts
+var pollDefinition = {
+  type: "ui:poll",
+  schema: pollSchema,
+  render: Poll
+};
+
+// src/rating/styles.ts
+var containerStyle4 = {
+  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 headerStyle3 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+function itemStyle2(isLast) {
+  return {
+    padding: "var(--glyph-spacing-md, 1rem)",
+    borderBottom: isLast ? "none" : "1px solid var(--glyph-border, #d0d8e4)"
+  };
+}
+var itemLabelStyle = {
+  fontWeight: 600,
+  fontSize: "0.9375rem",
+  marginBottom: "0.25rem"
+};
+var itemDescriptionStyle = {
+  fontSize: "0.8125rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  marginBottom: "0.5rem"
+};
+var starsContainerStyle = {
+  display: "flex",
+  gap: "0.25rem",
+  alignItems: "center"
+};
+function starButtonStyle(filled, hovered) {
+  return {
+    background: "none",
+    border: "none",
+    padding: "0.125rem",
+    cursor: "pointer",
+    fontSize: "1.25rem",
+    lineHeight: 1,
+    color: filled || hovered ? "var(--glyph-rating-star-fill, #f59e0b)" : "var(--glyph-rating-star-empty, var(--glyph-border, #d0d8e4))",
+    transition: "color 0.15s ease"
+  };
+}
+function numberButtonStyle(selected) {
+  return {
+    minWidth: "2rem",
+    height: "2rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+    border: "1px solid var(--glyph-border, #d0d8e4)",
+    background: selected ? "var(--glyph-accent, #0a9d7c)" : "transparent",
+    color: selected ? "#fff" : "var(--glyph-text, #1a2035)",
+    cursor: "pointer",
+    fontWeight: 600,
+    fontSize: "0.875rem",
+    transition: "background 0.15s ease, color 0.15s ease"
+  };
+}
+var scaleLabelsStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "0.75rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  marginTop: "0.375rem"
+};
+function Rating({
+  data,
+  block,
+  onInteraction
+}) {
+  const { title, scale = 5, mode = "star", labels, items } = data;
+  const baseId = `glyph-rating-${block.id}`;
+  const [ratings, setRatings] = useState(() => items.map(() => null));
+  const [hoveredStar, setHoveredStar] = useState(null);
+  const handleRate = (itemIndex, value) => {
+    const newRatings = [...ratings];
+    newRatings[itemIndex] = value;
+    setRatings(newRatings);
+    if (onInteraction) {
+      onInteraction({
+        kind: "rating-change",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          itemIndex,
+          itemLabel: items[itemIndex]?.label ?? "",
+          value,
+          allRatings: items.map((item, i) => ({
+            label: item.label,
+            value: i === itemIndex ? value : newRatings[i] ?? null
+          }))
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Rating", style: containerStyle4, children: [
+    title && /* @__PURE__ */ jsx("div", { style: headerStyle3, children: title }),
+    items.map((item, itemIndex) => {
+      const currentRating = ratings[itemIndex] ?? null;
+      const isLast = itemIndex === items.length - 1;
+      return /* @__PURE__ */ jsxs("div", { style: itemStyle2(isLast), children: [
+        /* @__PURE__ */ jsx("div", { style: itemLabelStyle, children: item.label }),
+        item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle, children: item.description }),
+        /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": `Rate ${item.label}`, style: starsContainerStyle, children: Array.from({ length: scale }, (_, starIndex) => {
+          const value = starIndex + 1;
+          const isHovered = hoveredStar !== null && hoveredStar.itemIndex === itemIndex && value <= hoveredStar.value;
+          const isFilled = currentRating !== null && value <= currentRating;
+          if (mode === "number") {
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": currentRating === value,
+                "aria-label": `${String(value)} out of ${String(scale)}`,
+                style: numberButtonStyle(currentRating === value),
+                onClick: () => handleRate(itemIndex, value),
+                children: String(value)
+              },
+              starIndex
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": currentRating === value,
+              "aria-label": `${String(value)} out of ${String(scale)} stars`,
+              style: starButtonStyle(isFilled, isHovered),
+              onClick: () => handleRate(itemIndex, value),
+              onMouseEnter: () => setHoveredStar({ itemIndex, value }),
+              onMouseLeave: () => setHoveredStar(null),
+              children: "\u2605"
+            },
+            starIndex
+          );
+        }) }),
+        labels && /* @__PURE__ */ jsxs("div", { style: scaleLabelsStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: labels.low }),
+          /* @__PURE__ */ jsx("span", { children: labels.high })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-live": "polite",
+            style: {
+              position: "absolute",
+              width: "1px",
+              height: "1px",
+              padding: 0,
+              margin: "-1px",
+              overflow: "hidden",
+              clip: "rect(0,0,0,0)",
+              whiteSpace: "nowrap",
+              border: 0
+            },
+            children: currentRating !== null && `${item.label} rated ${String(currentRating)} out of ${String(scale)}`
+          }
+        )
+      ] }, itemIndex);
+    })
+  ] });
+}
+
+// src/rating/index.ts
+var ratingDefinition = {
+  type: "ui:rating",
+  schema: ratingSchema,
+  render: Rating
+};
+
+// src/ranker/styles.ts
+var containerStyle5 = {
+  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 headerStyle4 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+var listStyle = {
+  listStyle: "none",
+  margin: 0,
+  padding: 0
+};
+function itemStyle3(isDragging, isGrabbed) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    padding: "0.75rem var(--glyph-spacing-md, 1rem)",
+    borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+    background: isDragging ? "var(--glyph-accent-subtle, #e6f6f2)" : "transparent",
+    cursor: isGrabbed ? "grabbing" : "grab",
+    userSelect: "none",
+    transition: "background 0.15s ease",
+    outline: isGrabbed ? "2px solid var(--glyph-accent, #0a9d7c)" : "none",
+    outlineOffset: "-2px"
+  };
+}
+var rankBadgeStyle = {
+  minWidth: "1.75rem",
+  height: "1.75rem",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  background: "var(--glyph-surface, #e8ecf3)",
+  fontWeight: 700,
+  fontSize: "0.8125rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  flexShrink: 0
+};
+var itemContentStyle = {
+  flex: 1,
+  minWidth: 0
+};
+var itemLabelStyle2 = {
+  fontWeight: 600,
+  fontSize: "0.9375rem"
+};
+var itemDescriptionStyle2 = {
+  fontSize: "0.8125rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  marginTop: "0.125rem"
+};
+var gripStyle = {
+  color: "var(--glyph-text-muted, #6b7a94)",
+  fontSize: "1rem",
+  flexShrink: 0
+};
+function Ranker({
+  data,
+  block,
+  onInteraction
+}) {
+  const { title, items: initialItems } = data;
+  const baseId = `glyph-ranker-${block.id}`;
+  const [items, setItems] = useState(initialItems);
+  const [grabbedIndex, setGrabbedIndex] = useState(null);
+  const moveItem = useCallback(
+    (fromIndex, toIndex) => {
+      if (fromIndex === toIndex) return;
+      setItems((prevItems) => {
+        const newItems = [...prevItems];
+        const [moved] = newItems.splice(fromIndex, 1);
+        if (!moved) return prevItems;
+        newItems.splice(toIndex, 0, moved);
+        if (onInteraction) {
+          onInteraction({
+            kind: "ranker-reorder",
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            blockId: block.id,
+            blockType: block.type,
+            payload: {
+              orderedItems: newItems.map((item, i) => ({
+                id: item.id,
+                label: item.label,
+                rank: i + 1
+              })),
+              movedItem: {
+                id: moved.id,
+                label: moved.label,
+                fromRank: fromIndex + 1,
+                toRank: toIndex + 1
+              }
+            }
+          });
+        }
+        return newItems;
+      });
+    },
+    [block.id, block.type, onInteraction]
+  );
+  const handleKeyDown = (e, index) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      if (grabbedIndex === null) {
+        setGrabbedIndex(index);
+      } else {
+        setGrabbedIndex(null);
+      }
+    } else if (e.key === "Escape") {
+      setGrabbedIndex(null);
+    } else if (e.key === "ArrowUp" && grabbedIndex !== null) {
+      e.preventDefault();
+      if (grabbedIndex > 0) {
+        moveItem(grabbedIndex, grabbedIndex - 1);
+        setGrabbedIndex(grabbedIndex - 1);
+      }
+    } else if (e.key === "ArrowDown" && grabbedIndex !== null) {
+      e.preventDefault();
+      if (grabbedIndex < items.length - 1) {
+        moveItem(grabbedIndex, grabbedIndex + 1);
+        setGrabbedIndex(grabbedIndex + 1);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Ranker", style: containerStyle5, children: [
+    title && /* @__PURE__ */ jsx("div", { style: headerStyle4, children: title }),
+    /* @__PURE__ */ jsx("ul", { role: "list", "aria-label": title ?? "Rank items", style: listStyle, children: items.map((item, index) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        role: "listitem",
+        "aria-grabbed": grabbedIndex === index,
+        "aria-label": `${item.label}, rank ${String(index + 1)}`,
+        tabIndex: 0,
+        style: itemStyle3(false, grabbedIndex === index),
+        onKeyDown: (e) => handleKeyDown(e, index),
+        children: [
+          /* @__PURE__ */ jsx("span", { style: gripStyle, "aria-hidden": "true", children: "\u283F" }),
+          /* @__PURE__ */ jsx("span", { style: rankBadgeStyle, children: String(index + 1) }),
+          /* @__PURE__ */ jsxs("div", { style: itemContentStyle, children: [
+            /* @__PURE__ */ jsx("div", { style: itemLabelStyle2, children: item.label }),
+            item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle2, children: item.description })
+          ] })
+        ]
+      },
+      item.id
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-live": "assertive",
+        style: {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: 0,
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          border: 0
+        },
+        children: grabbedIndex !== null && `${items[grabbedIndex]?.label ?? ""} grabbed, rank ${String(grabbedIndex + 1)} of ${String(items.length)}. Use arrow keys to move.`
+      }
+    )
+  ] });
+}
+
+// src/ranker/index.ts
+var rankerDefinition = {
+  type: "ui:ranker",
+  schema: rankerSchema,
+  render: Ranker
+};
+
+// src/slider/styles.ts
+var containerStyle6 = {
+  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 headerStyle5 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+function parameterStyle(isLast) {
+  return {
+    padding: "var(--glyph-spacing-md, 1rem)",
+    borderBottom: isLast ? "none" : "1px solid var(--glyph-border, #d0d8e4)"
+  };
+}
+var parameterHeaderStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: "0.5rem"
+};
+var parameterLabelStyle = {
+  fontWeight: 600,
+  fontSize: "0.9375rem"
+};
+var parameterValueStyle = {
+  fontSize: "0.9375rem",
+  fontWeight: 600,
+  color: "var(--glyph-accent, #0a9d7c)",
+  fontVariantNumeric: "tabular-nums"
+};
+var rangeInputStyle = {
+  width: "100%",
+  margin: 0,
+  accentColor: "var(--glyph-slider-fill, var(--glyph-accent, #0a9d7c))"
+};
+var rangeLabelsStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "0.75rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  marginTop: "0.25rem"
+};
+function Slider({
+  data,
+  block,
+  onInteraction
+}) {
+  const { title, parameters } = data;
+  const baseId = `glyph-slider-${block.id}`;
+  const [values, setValues] = useState(
+    () => parameters.map((p) => p.value ?? p.min ?? 0)
+  );
+  const handleChange = (paramIndex, newValue) => {
+    const newValues = [...values];
+    newValues[paramIndex] = newValue;
+    setValues(newValues);
+    const param = parameters[paramIndex];
+    if (!param) return;
+    if (onInteraction) {
+      onInteraction({
+        kind: "slider-change",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          parameterId: param.id,
+          parameterLabel: param.label,
+          value: newValue,
+          allValues: parameters.map((p, i) => ({
+            id: p.id,
+            label: p.label,
+            value: i === paramIndex ? newValue : newValues[i] ?? 0
+          }))
+        }
+      });
+    }
+  };
+  const formatValue = (value, unit) => {
+    return unit ? `${String(value)}${unit}` : String(value);
+  };
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Slider", style: containerStyle6, children: [
+    title && /* @__PURE__ */ jsx("div", { style: headerStyle5, children: title }),
+    parameters.map((param, index) => {
+      const min2 = param.min ?? 0;
+      const max2 = param.max ?? 100;
+      const step = param.step ?? 1;
+      const currentValue = values[index] ?? min2;
+      const isLast = index === parameters.length - 1;
+      return /* @__PURE__ */ jsxs("div", { style: parameterStyle(isLast), children: [
+        /* @__PURE__ */ jsxs("div", { style: parameterHeaderStyle, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${baseId}-${param.id}`, style: parameterLabelStyle, children: param.label }),
+          /* @__PURE__ */ jsx("span", { style: parameterValueStyle, "aria-live": "polite", children: formatValue(currentValue, param.unit) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${baseId}-${param.id}`,
+            type: "range",
+            min: min2,
+            max: max2,
+            step,
+            value: currentValue,
+            onChange: (e) => handleChange(index, Number(e.target.value)),
+            "aria-valuemin": min2,
+            "aria-valuemax": max2,
+            "aria-valuenow": currentValue,
+            "aria-valuetext": formatValue(currentValue, param.unit),
+            style: rangeInputStyle
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: rangeLabelsStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: formatValue(min2, param.unit) }),
+          /* @__PURE__ */ jsx("span", { children: formatValue(max2, param.unit) })
+        ] })
+      ] }, param.id);
+    })
+  ] });
+}
+
+// src/slider/index.ts
+var sliderDefinition = {
+  type: "ui:slider",
+  schema: sliderSchema,
+  render: Slider
+};
+
+// src/matrix/styles.ts
+var containerStyle7 = {
+  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: "auto"
+};
+var headerStyle6 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+var tableStyle = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: "0.875rem"
+};
+var thStyle = {
+  padding: "0.625rem 0.75rem",
+  textAlign: "center",
+  fontWeight: 600,
+  borderBottom: "2px solid var(--glyph-border, #d0d8e4)",
+  background: "var(--glyph-table-header-bg, var(--glyph-surface, #e8ecf3))",
+  whiteSpace: "nowrap"
+};
+var rowHeaderStyle = {
+  padding: "0.625rem 0.75rem",
+  textAlign: "left",
+  fontWeight: 600,
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  borderRight: "1px solid var(--glyph-border, #d0d8e4)",
+  whiteSpace: "nowrap"
+};
+var cellStyle = {
+  padding: "0.375rem 0.5rem",
+  textAlign: "center",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)"
+};
+var inputStyle = {
+  width: "3.5rem",
+  padding: "0.25rem 0.375rem",
+  textAlign: "center",
+  border: "1px solid var(--glyph-border, #d0d8e4)",
+  borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+  background: "transparent",
+  color: "var(--glyph-text, #1a2035)",
+  fontSize: "0.875rem",
+  fontVariantNumeric: "tabular-nums"
+};
+var weightStyle = {
+  fontSize: "0.6875rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  fontWeight: 400
+};
+var totalCellStyle = {
+  padding: "0.625rem 0.75rem",
+  textAlign: "center",
+  fontWeight: 700,
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  background: "var(--glyph-surface, #e8ecf3)",
+  fontVariantNumeric: "tabular-nums"
+};
+var totalHeaderStyle = {
+  ...thStyle,
+  borderLeft: "2px solid var(--glyph-border, #d0d8e4)"
+};
+function computeWeightedTotals(rows, columns, values) {
+  return rows.map((row) => {
+    let total = 0;
+    for (const col of columns) {
+      const score = values[row.id]?.[col.id] ?? 0;
+      const weight = col.weight ?? 1;
+      total += score * weight;
+    }
+    return { rowId: row.id, rowLabel: row.label, total: Math.round(total * 100) / 100 };
+  });
+}
+function Matrix({
+  data,
+  block,
+  onInteraction
+}) {
+  const { title, scale = 5, showTotals = true, columns, rows } = data;
+  const baseId = `glyph-matrix-${block.id}`;
+  const [values, setValues] = useState(() => {
+    const init = {};
+    for (const row of rows) {
+      const rowMap = {};
+      for (const col of columns) {
+        rowMap[col.id] = 0;
+      }
+      init[row.id] = rowMap;
+    }
+    return init;
+  });
+  const handleChange = useCallback(
+    (rowId, columnId, value) => {
+      const clamped = Math.max(0, Math.min(scale, value));
+      setValues((prevValues) => {
+        const newValues = Object.fromEntries(
+          Object.entries(prevValues).map(([k, v]) => [k, { ...v }])
+        );
+        if (!newValues[rowId]) newValues[rowId] = {};
+        newValues[rowId] = { ...newValues[rowId], [columnId]: clamped };
+        const row = rows.find((r) => r.id === rowId);
+        const col = columns.find((c) => c.id === columnId);
+        if (onInteraction && row && col) {
+          const payloadValues = Object.fromEntries(
+            Object.entries(newValues).map(([k, v]) => [k, { ...v }])
+          );
+          onInteraction({
+            kind: "matrix-change",
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            blockId: block.id,
+            blockType: block.type,
+            payload: {
+              rowId,
+              rowLabel: row.label,
+              columnId,
+              columnLabel: col.label,
+              value: clamped,
+              allValues: payloadValues,
+              weightedTotals: computeWeightedTotals(rows, columns, newValues)
+            }
+          });
+        }
+        return newValues;
+      });
+    },
+    [scale, rows, columns, block.id, block.type, onInteraction]
+  );
+  const totals = computeWeightedTotals(rows, columns, values);
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Decision Matrix", style: containerStyle7, children: [
+    title && /* @__PURE__ */ jsx("div", { style: headerStyle6, children: title }),
+    /* @__PURE__ */ jsxs("table", { role: "grid", style: tableStyle, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { style: thStyle }),
+        columns.map((col) => /* @__PURE__ */ jsxs("th", { style: thStyle, children: [
+          col.label,
+          (col.weight ?? 1) !== 1 && /* @__PURE__ */ jsxs("div", { style: weightStyle, children: [
+            "\xD7",
+            String(col.weight)
+          ] })
+        ] }, col.id)),
+        showTotals && /* @__PURE__ */ jsx("th", { style: totalHeaderStyle, children: "Total" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
+        const rowTotal = totals.find((t) => t.rowId === row.id)?.total ?? 0;
+        return /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", style: rowHeaderStyle, children: row.label }),
+          columns.map((col) => {
+            const cellValue = values[row.id]?.[col.id] ?? 0;
+            return /* @__PURE__ */ jsx("td", { style: cellStyle, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 0,
+                max: scale,
+                value: cellValue,
+                onChange: (e) => handleChange(row.id, col.id, Number(e.target.value)),
+                "aria-label": `Score for ${row.label} on ${col.label}`,
+                style: inputStyle
+              }
+            ) }, col.id);
+          }),
+          showTotals && /* @__PURE__ */ jsx("td", { style: totalCellStyle, children: String(rowTotal) })
+        ] }, row.id);
+      }) })
+    ] })
+  ] });
+}
+
+// src/matrix/index.ts
+var matrixDefinition = {
+  type: "ui:matrix",
+  schema: matrixSchema,
+  render: Matrix
+};
+
+// src/form/styles.ts
+var containerStyle8 = {
+  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 headerStyle7 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  paddingBottom: "0.25rem",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+var descriptionStyle = {
+  fontSize: "0.875rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  padding: "0 var(--glyph-spacing-md, 1rem)",
+  paddingBottom: "var(--glyph-spacing-sm, 0.5rem)"
+};
+var formStyle = {
+  padding: "var(--glyph-spacing-md, 1rem)"
+};
+var fieldStyle = {
+  marginBottom: "var(--glyph-spacing-md, 1rem)"
+};
+var labelStyle3 = {
+  display: "block",
+  fontWeight: 600,
+  fontSize: "0.875rem",
+  marginBottom: "0.375rem"
+};
+var requiredStyle = {
+  color: "var(--glyph-form-error, #dc2626)",
+  marginLeft: "0.25rem"
+};
+var textInputStyle = {
+  width: "100%",
+  padding: "0.5rem 0.75rem",
+  border: "1px solid var(--glyph-border, #d0d8e4)",
+  borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+  background: "transparent",
+  color: "var(--glyph-text, #1a2035)",
+  fontSize: "0.875rem",
+  fontFamily: "inherit",
+  boxSizing: "border-box"
+};
+var selectInputStyle = {
+  ...textInputStyle,
+  appearance: "auto"
+};
+var checkboxLabelStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  fontSize: "0.875rem",
+  cursor: "pointer"
+};
+var rangeValueStyle = {
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: "var(--glyph-accent, #0a9d7c)",
+  marginLeft: "0.5rem",
+  fontVariantNumeric: "tabular-nums"
+};
+var submitButtonStyle = {
+  padding: "0.625rem 1.5rem",
+  borderRadius: "var(--glyph-radius-md, 0.5rem)",
+  border: "1px solid var(--glyph-accent, #0a9d7c)",
+  background: "var(--glyph-accent, #0a9d7c)",
+  color: "#fff",
+  cursor: "pointer",
+  fontWeight: 600,
+  fontSize: "0.875rem",
+  marginTop: "var(--glyph-spacing-sm, 0.5rem)"
+};
+function invalidStyle(isInvalid) {
+  if (!isInvalid) return {};
+  return {
+    borderColor: "var(--glyph-form-error, #dc2626)"
+  };
+}
+function renderField({
+  field,
+  baseId,
+  values,
+  validation,
+  submitted,
+  updateValue
+}) {
+  const isInvalid = validation[field.id] === true;
+  const fieldId = `${baseId}-${field.id}`;
+  switch (field.type) {
+    case "text":
+      return /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, style: labelStyle3, children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { style: requiredStyle, "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: fieldId,
+            type: "text",
+            value: values[field.id] ?? "",
+            onChange: (e) => updateValue(field.id, e.target.value),
+            placeholder: field.placeholder,
+            disabled: submitted,
+            "aria-required": field.required,
+            "aria-invalid": isInvalid,
+            style: { ...textInputStyle, ...invalidStyle(isInvalid) }
+          }
+        )
+      ] }, field.id);
+    case "textarea":
+      return /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, style: labelStyle3, children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { style: requiredStyle, "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: fieldId,
+            value: values[field.id] ?? "",
+            onChange: (e) => updateValue(field.id, e.target.value),
+            placeholder: field.placeholder,
+            rows: field.rows ?? 4,
+            disabled: submitted,
+            "aria-required": field.required,
+            "aria-invalid": isInvalid,
+            style: {
+              ...textInputStyle,
+              ...invalidStyle(isInvalid),
+              resize: "vertical",
+              fontFamily: "inherit"
+            }
+          }
+        )
+      ] }, field.id);
+    case "select":
+      return /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, style: labelStyle3, children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { style: requiredStyle, "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            id: fieldId,
+            value: values[field.id] ?? "",
+            onChange: (e) => updateValue(field.id, e.target.value),
+            disabled: submitted,
+            "aria-required": field.required,
+            style: selectInputStyle,
+            children: field.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+          }
+        )
+      ] }, field.id);
+    case "checkbox":
+      return /* @__PURE__ */ jsx("div", { style: fieldStyle, children: /* @__PURE__ */ jsxs("label", { style: checkboxLabelStyle, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: fieldId,
+            type: "checkbox",
+            checked: values[field.id] ?? false,
+            onChange: (e) => updateValue(field.id, e.target.checked),
+            disabled: submitted
+          }
+        ),
+        field.label
+      ] }) }, field.id);
+    case "range": {
+      const min2 = field.min ?? 0;
+      const max2 = field.max ?? 100;
+      const step = field.step ?? 1;
+      const currentValue = values[field.id] ?? min2;
+      const displayValue = field.unit ? `${String(currentValue)}${field.unit}` : String(currentValue);
+      return /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, style: labelStyle3, children: [
+          field.label,
+          /* @__PURE__ */ jsx("span", { style: rangeValueStyle, children: displayValue })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: fieldId,
+            type: "range",
+            min: min2,
+            max: max2,
+            step,
+            value: currentValue,
+            onChange: (e) => updateValue(field.id, Number(e.target.value)),
+            disabled: submitted,
+            "aria-valuemin": min2,
+            "aria-valuemax": max2,
+            "aria-valuenow": currentValue,
+            "aria-valuetext": displayValue,
+            style: { width: "100%", accentColor: "var(--glyph-accent, #0a9d7c)" }
+          }
+        )
+      ] }, field.id);
+    }
+  }
+}
+function Form({ data, block, onInteraction }) {
+  const { title, description, submitLabel = "Submit", fields } = data;
+  const baseId = `glyph-form-${block.id}`;
+  const [values, setValues] = useState(() => {
+    const init = {};
+    for (const field of fields) {
+      switch (field.type) {
+        case "text":
+        case "textarea":
+          init[field.id] = field.default ?? "";
+          break;
+        case "select":
+          init[field.id] = field.default ?? field.options[0] ?? "";
+          break;
+        case "checkbox":
+          init[field.id] = field.default ?? false;
+          break;
+        case "range":
+          init[field.id] = field.default ?? field.min ?? 0;
+          break;
+      }
+    }
+    return init;
+  });
+  const [submitted, setSubmitted] = useState(false);
+  const [validation, setValidation] = useState({});
+  const updateValue = (fieldId, value) => {
+    setValues((prev) => ({ ...prev, [fieldId]: value }));
+    if (validation[fieldId]) {
+      setValidation((prev) => ({ ...prev, [fieldId]: false }));
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const errors = {};
+    for (const field of fields) {
+      if ("required" in field && field.required) {
+        const val = values[field.id];
+        if (val === "" || val === void 0) {
+          errors[field.id] = true;
+        }
+      }
+    }
+    if (Object.keys(errors).length > 0) {
+      setValidation(errors);
+      return;
+    }
+    setSubmitted(true);
+    if (onInteraction) {
+      onInteraction({
+        kind: "form-submit",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          values: { ...values },
+          fields: fields.map((f) => ({
+            id: f.id,
+            label: f.label,
+            type: f.type,
+            value: values[f.id] !== void 0 ? values[f.id] : ""
+          }))
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Form", style: containerStyle8, children: [
+    title && /* @__PURE__ */ jsx("div", { style: headerStyle7, children: title }),
+    description && /* @__PURE__ */ jsx("div", { style: descriptionStyle, children: description }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: formStyle, noValidate: true, children: [
+      fields.map(
+        (field) => renderField({ field, baseId, values, validation, submitted, updateValue })
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: submitted,
+          style: {
+            ...submitButtonStyle,
+            opacity: submitted ? 0.5 : 1,
+            cursor: submitted ? "default" : "pointer"
+          },
+          children: submitted ? "Submitted" : submitLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/form/index.ts
+var formDefinition = {
+  type: "ui:form",
+  schema: formSchema,
+  render: Form
+};
+
+// src/kanban/styles.ts
+var containerStyle9 = {
+  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 headerStyle8 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+var boardStyle = {
+  display: "flex",
+  gap: "var(--glyph-spacing-sm, 0.5rem)",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  overflowX: "auto",
+  minHeight: "200px"
+};
+function columnStyle(isOver) {
+  return {
+    flex: "1 1 0",
+    minWidth: "180px",
+    background: isOver ? "var(--glyph-accent-subtle, #e6f6f2)" : "var(--glyph-kanban-column-bg, var(--glyph-surface, #e8ecf3))",
+    borderRadius: "var(--glyph-radius-md, 0.5rem)",
+    padding: "var(--glyph-spacing-sm, 0.5rem)",
+    display: "flex",
+    flexDirection: "column",
+    transition: "background 0.15s ease"
+  };
+}
+var columnHeaderStyle = {
+  fontWeight: 700,
+  fontSize: "0.8125rem",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  padding: "0.375rem 0.5rem",
+  marginBottom: "0.375rem",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center"
+};
+var columnCountStyle = {
+  fontSize: "0.6875rem",
+  fontWeight: 400,
+  color: "var(--glyph-text-muted, #6b7a94)"
+};
+function cardStyle(isGrabbed, priority) {
+  const priorityColors = {
+    high: "var(--glyph-kanban-priority-high, #dc2626)",
+    medium: "var(--glyph-kanban-priority-medium, #f59e0b)",
+    low: "var(--glyph-kanban-priority-low, #22c55e)"
+  };
+  return {
+    background: "var(--glyph-kanban-card-bg, var(--glyph-surface-raised, #f4f6fa))",
+    border: `1px solid var(--glyph-kanban-card-border, var(--glyph-border, #d0d8e4))`,
+    borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+    padding: "0.625rem 0.75rem",
+    marginBottom: "0.375rem",
+    cursor: isGrabbed ? "grabbing" : "grab",
+    userSelect: "none",
+    boxShadow: isGrabbed ? "var(--glyph-kanban-drag-shadow, var(--glyph-shadow-md, 0 4px 12px rgba(0,0,0,0.15)))" : "none",
+    borderLeft: priority && priorityColors[priority] ? `3px solid ${priorityColors[priority]}` : void 0,
+    outline: isGrabbed ? "2px solid var(--glyph-accent, #0a9d7c)" : "none",
+    outlineOffset: "-2px"
+  };
+}
+var cardTitleStyle = {
+  fontWeight: 600,
+  fontSize: "0.875rem",
+  marginBottom: "0.25rem"
+};
+var cardDescStyle = {
+  fontSize: "0.75rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  lineHeight: 1.4
+};
+var tagContainerStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.25rem",
+  marginTop: "0.375rem"
+};
+var tagStyle = {
+  fontSize: "0.625rem",
+  fontWeight: 600,
+  padding: "0.125rem 0.375rem",
+  borderRadius: "9999px",
+  background: "var(--glyph-accent-subtle, #e6f6f2)",
+  color: "var(--glyph-accent, #0a9d7c)"
+};
+var limitStyle = {
+  fontSize: "0.625rem",
+  color: "var(--glyph-text-muted, #6b7a94)"
+};
+function Kanban({
+  data,
+  block,
+  onInteraction
+}) {
+  const { title } = data;
+  const baseId = `glyph-kanban-${block.id}`;
+  const [columns, setColumns] = useState(
+    () => data.columns.map((col) => ({ ...col, cards: [...col.cards] }))
+  );
+  const [grabbed, setGrabbed] = useState(null);
+  const moveCard = (cardId, sourceColId, destColId, destIndex) => {
+    const newColumns = columns.map((col) => ({
+      ...col,
+      cards: [...col.cards]
+    }));
+    const sourceCol = newColumns.find((c) => c.id === sourceColId);
+    const destCol = newColumns.find((c) => c.id === destColId);
+    if (!sourceCol || !destCol) return;
+    const cardIndex = sourceCol.cards.findIndex((c) => c.id === cardId);
+    if (cardIndex === -1) return;
+    const [card] = sourceCol.cards.splice(cardIndex, 1);
+    if (!card) return;
+    destCol.cards.splice(destIndex, 0, card);
+    setColumns(newColumns);
+    if (onInteraction) {
+      onInteraction({
+        kind: "kanban-move",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          cardId: card.id,
+          cardTitle: card.title,
+          sourceColumnId: sourceColId,
+          sourceColumnTitle: sourceCol.title,
+          destinationColumnId: destColId,
+          destinationColumnTitle: destCol.title,
+          position: destIndex,
+          allColumns: newColumns.map((c) => ({
+            id: c.id,
+            title: c.title,
+            cardIds: c.cards.map((card2) => card2.id)
+          }))
+        }
+      });
+    }
+  };
+  const handleCardKeyDown = (e, cardId, columnId, cardIndex) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      if (grabbed === null) {
+        setGrabbed({ cardId, columnId, cardIndex });
+      } else {
+        setGrabbed(null);
+      }
+    } else if (e.key === "Escape") {
+      setGrabbed(null);
+    } else if (grabbed && grabbed.cardId === cardId) {
+      const colIndex = columns.findIndex((c) => c.id === grabbed.columnId);
+      const col = columns[colIndex];
+      if (!col) return;
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (grabbed.cardIndex > 0) {
+          moveCard(cardId, grabbed.columnId, grabbed.columnId, grabbed.cardIndex - 1);
+          setGrabbed({ ...grabbed, cardIndex: grabbed.cardIndex - 1 });
+        }
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (grabbed.cardIndex < col.cards.length - 1) {
+          moveCard(cardId, grabbed.columnId, grabbed.columnId, grabbed.cardIndex + 1);
+          setGrabbed({ ...grabbed, cardIndex: grabbed.cardIndex + 1 });
+        }
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (colIndex > 0) {
+          const prevCol = columns[colIndex - 1];
+          if (!prevCol) return;
+          const newIndex = prevCol.cards.length;
+          moveCard(cardId, grabbed.columnId, prevCol.id, newIndex);
+          setGrabbed({ cardId, columnId: prevCol.id, cardIndex: newIndex });
+        }
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (colIndex < columns.length - 1) {
+          const nextCol = columns[colIndex + 1];
+          if (!nextCol) return;
+          const newIndex = nextCol.cards.length;
+          moveCard(cardId, grabbed.columnId, nextCol.id, newIndex);
+          setGrabbed({ cardId, columnId: nextCol.id, cardIndex: newIndex });
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Kanban Board", style: containerStyle9, children: [
+    title && /* @__PURE__ */ jsx("div", { style: headerStyle8, children: title }),
+    /* @__PURE__ */ jsx("div", { style: boardStyle, children: columns.map((col) => /* @__PURE__ */ jsxs("div", { style: columnStyle(false), children: [
+      /* @__PURE__ */ jsxs("div", { style: columnHeaderStyle, children: [
+        /* @__PURE__ */ jsx("span", { children: col.title }),
+        /* @__PURE__ */ jsxs("span", { style: columnCountStyle, children: [
+          String(col.cards.length),
+          col.limit !== void 0 && /* @__PURE__ */ jsxs("span", { style: limitStyle, children: [
+            " / ",
+            String(col.limit)
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { role: "list", "aria-label": col.title, children: col.cards.map((card, cardIndex) => {
+        const isGrabbed = grabbed !== null && grabbed.cardId === card.id;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "listitem",
+            "aria-grabbed": isGrabbed,
+            "aria-label": `${card.title}${card.priority ? `, ${card.priority} priority` : ""}`,
+            tabIndex: 0,
+            style: cardStyle(isGrabbed, card.priority),
+            onKeyDown: (e) => handleCardKeyDown(e, card.id, col.id, cardIndex),
+            children: [
+              /* @__PURE__ */ jsx("div", { style: cardTitleStyle, children: card.title }),
+              card.description && /* @__PURE__ */ jsx("div", { style: cardDescStyle, children: card.description }),
+              card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { style: tagContainerStyle, children: card.tags.map((tag) => /* @__PURE__ */ jsx("span", { style: tagStyle, children: tag }, tag)) })
+            ]
+          },
+          card.id
+        );
+      }) })
+    ] }, col.id)) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-live": "assertive",
+        style: {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: 0,
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          border: 0
+        },
+        children: grabbed !== null && `${columns.find((c) => c.id === grabbed.columnId)?.cards[grabbed.cardIndex]?.title ?? "Card"} grabbed in ${columns.find((c) => c.id === grabbed.columnId)?.title ?? "column"}. Use arrow keys to move.`
+      }
+    )
+  ] });
+}
+
+// src/kanban/index.ts
+var kanbanDefinition = {
+  type: "ui:kanban",
+  schema: kanbanSchema,
+  render: Kanban
+};
+
+// src/annotate/styles.ts
+var containerStyle10 = {
+  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 headerStyle9 = {
+  fontWeight: 700,
+  fontSize: "1.125rem",
+  padding: "var(--glyph-spacing-md, 1rem)",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-heading, #0a0e1a)"
+};
+var bodyStyle2 = {
+  display: "flex",
+  minHeight: "200px"
+};
+var textPaneStyle = {
+  flex: 1,
+  padding: "var(--glyph-spacing-md, 1rem)",
+  fontFamily: "var(--glyph-font-mono, ui-monospace, monospace)",
+  fontSize: "0.8125rem",
+  lineHeight: 1.8,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  position: "relative",
+  cursor: "text"
+};
+var labelPickerStyle = {
+  position: "absolute",
+  zIndex: 10,
+  background: "var(--glyph-surface-raised, #f4f6fa)",
+  border: "1px solid var(--glyph-border, #d0d8e4)",
+  borderRadius: "var(--glyph-radius-sm, 0.375rem)",
+  boxShadow: "var(--glyph-shadow-md, 0 4px 12px rgba(0,0,0,0.15))",
+  padding: "0.25rem 0",
+  minWidth: "120px"
+};
+function labelOptionStyle() {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.375rem 0.75rem",
+    cursor: "pointer",
+    fontSize: "0.8125rem",
+    background: "transparent",
+    border: "none",
+    width: "100%",
+    textAlign: "left",
+    color: "var(--glyph-text, #1a2035)"
+  };
+}
+function colorDotStyle(color3) {
+  return {
+    width: "0.625rem",
+    height: "0.625rem",
+    borderRadius: "50%",
+    background: color3,
+    flexShrink: 0
+  };
+}
+var sidebarStyle = {
+  width: "220px",
+  borderLeft: "1px solid var(--glyph-border, #d0d8e4)",
+  background: "var(--glyph-annotate-sidebar-bg, var(--glyph-surface, #e8ecf3))",
+  overflow: "auto"
+};
+var sidebarHeaderStyle = {
+  fontWeight: 700,
+  fontSize: "0.75rem",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  padding: "0.75rem",
+  borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+  color: "var(--glyph-text-muted, #6b7a94)"
+};
+function annotationItemStyle(color3) {
+  return {
+    padding: "0.5rem 0.75rem",
+    borderBottom: "1px solid var(--glyph-border, #d0d8e4)",
+    borderLeft: `3px solid ${color3}`,
+    fontSize: "0.75rem"
+  };
+}
+var annotationTextStyle = {
+  fontFamily: "var(--glyph-font-mono, ui-monospace, monospace)",
+  fontSize: "0.6875rem",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  marginTop: "0.25rem",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var annotationNoteStyle = {
+  fontSize: "0.6875rem",
+  fontStyle: "italic",
+  color: "var(--glyph-text-muted, #6b7a94)",
+  marginTop: "0.125rem"
+};
+function computeSegments(text, annotations) {
+  if (annotations.length === 0) {
+    return [{ text, start: 0, annotation: null }];
+  }
+  const sorted = [...annotations].sort((a, b) => a.start - b.start);
+  const segments = [];
+  let cursor = 0;
+  for (const ann of sorted) {
+    if (ann.start > cursor) {
+      segments.push({ text: text.slice(cursor, ann.start), start: cursor, annotation: null });
+    }
+    segments.push({
+      text: text.slice(ann.start, ann.end),
+      start: ann.start,
+      annotation: ann
+    });
+    cursor = ann.end;
+  }
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor), start: cursor, annotation: null });
+  }
+  return segments;
+}
+function Annotate({
+  data,
+  block,
+  onInteraction
+}) {
+  const { title, labels, text } = data;
+  const baseId = `glyph-annotate-${block.id}`;
+  const [annotations, setAnnotations] = useState(data.annotations ?? []);
+  const [pickerPos, setPickerPos] = useState(null);
+  const [pendingSelection, setPendingSelection] = useState(null);
+  const textRef = useRef(null);
+  const handleMouseUp = useCallback(() => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || !textRef.current) return;
+    const range = selection.getRangeAt(0);
+    if (!range || !textRef.current.contains(range.commonAncestorContainer)) return;
+    const selectedText = selection.toString();
+    if (!selectedText.trim()) return;
+    const preCaretRange = document.createRange();
+    preCaretRange.selectNodeContents(textRef.current);
+    preCaretRange.setEnd(range.startContainer, range.startOffset);
+    const startOffset = preCaretRange.toString().length;
+    const endOffset = startOffset + selectedText.length;
+    const rect = range.getBoundingClientRect();
+    const containerRect = textRef.current.getBoundingClientRect();
+    setPendingSelection({ start: startOffset, end: endOffset, text: selectedText });
+    setPickerPos({
+      x: rect.left - containerRect.left,
+      y: rect.bottom - containerRect.top + 4
+    });
+  }, []);
+  const selectLabel = (labelName) => {
+    if (!pendingSelection) return;
+    const newAnnotation = {
+      start: pendingSelection.start,
+      end: pendingSelection.end,
+      label: labelName
+    };
+    const newAnnotations = [...annotations, newAnnotation];
+    setAnnotations(newAnnotations);
+    setPickerPos(null);
+    setPendingSelection(null);
+    window.getSelection()?.removeAllRanges();
+    if (onInteraction) {
+      onInteraction({
+        kind: "annotate-create",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        blockId: block.id,
+        blockType: block.type,
+        payload: {
+          start: newAnnotation.start,
+          end: newAnnotation.end,
+          selectedText: pendingSelection.text,
+          label: labelName,
+          allAnnotations: newAnnotations.map((a) => ({
+            start: a.start,
+            end: a.end,
+            text: text.slice(a.start, a.end),
+            label: a.label
+          }))
+        }
+      });
+    }
+  };
+  const closePicker = (e) => {
+    if (e.target.closest("[data-label-picker]")) return;
+    setPickerPos(null);
+    setPendingSelection(null);
+  };
+  const segments = computeSegments(text, annotations);
+  const labelColorMap = new Map(labels.map((l) => [l.name, l.color]));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: baseId,
+      role: "region",
+      "aria-label": title ?? "Annotate",
+      style: containerStyle10,
+      onClick: closePicker,
+      children: [
+        title && /* @__PURE__ */ jsx("div", { style: headerStyle9, children: title }),
+        /* @__PURE__ */ jsxs("div", { style: bodyStyle2, children: [
+          /* @__PURE__ */ jsxs("div", { ref: textRef, role: "document", style: textPaneStyle, onMouseUp: handleMouseUp, children: [
+            segments.map((seg, i) => {
+              if (seg.annotation) {
+                const color3 = labelColorMap.get(seg.annotation.label) ?? "#888";
+                return /* @__PURE__ */ jsx(
+                  "mark",
+                  {
+                    style: {
+                      backgroundColor: `${color3}33`,
+                      borderBottom: `2px solid ${color3}`,
+                      padding: "0 1px"
+                    },
+                    title: `${seg.annotation.label}${seg.annotation.note ? `: ${seg.annotation.note}` : ""}`,
+                    children: seg.text
+                  },
+                  i
+                );
+              }
+              return /* @__PURE__ */ jsx("span", { children: seg.text }, i);
+            }),
+            pickerPos && /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "menu",
+                "data-label-picker": true,
+                style: {
+                  ...labelPickerStyle,
+                  left: `${String(pickerPos.x)}px`,
+                  top: `${String(pickerPos.y)}px`
+                },
+                children: labels.map((label) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    role: "menuitem",
+                    style: labelOptionStyle(),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      selectLabel(label.name);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: colorDotStyle(label.color) }),
+                      label.name
+                    ]
+                  },
+                  label.name
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: sidebarStyle, role: "complementary", "aria-label": "Annotations", children: [
+            /* @__PURE__ */ jsxs("div", { style: sidebarHeaderStyle, children: [
+              "Annotations (",
+              String(annotations.length),
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { role: "list", children: [
+              annotations.map((ann, i) => {
+                const color3 = labelColorMap.get(ann.label) ?? "#888";
+                return /* @__PURE__ */ jsxs("div", { role: "listitem", style: annotationItemStyle(color3), children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: colorDotStyle(color3) }),
+                    /* @__PURE__ */ jsx("strong", { style: { fontSize: "0.75rem" }, children: ann.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { style: annotationTextStyle, children: text.slice(ann.start, ann.end) }),
+                  ann.note && /* @__PURE__ */ jsx("div", { style: annotationNoteStyle, children: ann.note })
+                ] }, i);
+              }),
+              annotations.length === 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: "0.75rem",
+                    fontSize: "0.75rem",
+                    color: "var(--glyph-text-muted, #6b7a94)"
+                  },
+                  children: "Select text to add annotations."
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/annotate/index.ts
+var annotateDefinition = {
+  type: "ui:annotate",
+  schema: annotateSchema,
+  render: Annotate
+};
+
+export { Accordion, Annotate, Architecture, Callout, Card, Chart, CodeDiff, Comparison, Equation, FileTree, Flowchart, Form, Graph, Infographic, Kanban, Kpi, Matrix, MindMap, Poll, Quiz, Ranker, Rating, Relation, Sequence, Slider, Steps, Table, Tabs, Timeline, accordionDefinition, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map