@xenosystem/blocks 0.13.29 → 0.13.31

package/dist/ops/index.d.ts

@@ -1983,7 +1983,7 @@ declare const terminalManifest: PanelManifest;
 /**
  * The Terminal panel AS A DECLARATION — the twenty-fifth block written the §8d way, the fourth
  * DRAWN surface. The CHROME is data: the session strip (a `chrome/TabStrip` of `Tab`s — title, a
- * status chip, a close action), the new-terminal and find actions, the find bar, the empty states,
+ * status chip, a pointer-only close whose keyboard path is Delete on the strip), the new-terminal and find actions, the find bar, the empty states,
  * the cwd and size readouts. The SURFACES are one runtime unit (`terminal/Surfaces`) bound to the
  * controller and the host's emulator factory: one bare `<div>` per session that the emulator owns
  * outright — hidden, never unmounted, when another tab is active, so the on-screen buffer survives.

package/dist/ops/index.js

@@ -2775,7 +2775,7 @@ var TERMINAL_DECLARATION = {
                 node: {
                   component: "chrome/TabStrip",
                   props: { label: { value: "Terminals" }, value: { input: "view.activeId" }, ids: { input: "view.tabIds" } },
-                  on: { onChange: ui3("activate", { id: { arg: "" } }) },
+                  on: { onChange: ui3("activate", { id: { arg: "" } }), onClose: ui3("close", { id: { arg: "" } }) },
                   children: [
                     {
                       component: "chrome/Tab",
@@ -2891,7 +2891,7 @@ function TerminalPanelView({ controller, createEmulator, multiInstance = true })
       view.stripShown ? /* @__PURE__ */ jsx3(
         Toolbar3,
         {
-          left: /* @__PURE__ */ jsx3(TabStrip, { label: "Terminals", value: view.activeId, ids: view.tabIds, onChange: (id) => ui5({ kind: "activate", id }), children: view.tabs.map((t) => /* @__PURE__ */ jsx3(Tab, { selected: t.selected, closeLabel: t.closeLabel, closeIcon: /* @__PURE__ */ jsx3(XGlyph, {}), chip: t.chip ? /* @__PURE__ */ jsx3(Badge3, { tone: t.chipTone, children: t.chip }) : null, onSelect: () => ui5({ kind: "activate", id: t.id }), onClose: () => ui5({ kind: "close", id: t.id }), children: t.title }, t.key)) }),
+          left: /* @__PURE__ */ jsx3(TabStrip, { label: "Terminals", value: view.activeId, ids: view.tabIds, onChange: (id) => ui5({ kind: "activate", id }), onClose: (id) => ui5({ kind: "close", id }), children: view.tabs.map((t) => /* @__PURE__ */ jsx3(Tab, { selected: t.selected, closeLabel: t.closeLabel, closeIcon: /* @__PURE__ */ jsx3(XGlyph, {}), chip: t.chip ? /* @__PURE__ */ jsx3(Badge3, { tone: t.chipTone, children: t.chip }) : null, onSelect: () => ui5({ kind: "activate", id: t.id }), onClose: () => ui5({ kind: "close", id: t.id }), children: t.title }, t.key)) }),
           right: /* @__PURE__ */ jsxs3(ToolbarGroup3, { end: true, children: [
             /* @__PURE__ */ jsx3(IconButton3, { label: "New terminal", icon: /* @__PURE__ */ jsx3(PlusGlyph, {}), onClick: () => ui5({ kind: "open" }) }),
             /* @__PURE__ */ jsx3(TextButton2, { onClick: () => ui5({ kind: "toggleFind" }), children: "Find" })

package/dist/time/index.d.ts

@@ -421,7 +421,7 @@ interface TransportPanelViewModel extends TransportViewState {
     positionLabel: string;
 }
 declare function transportPanelView(state: TransportViewState): TransportPanelViewModel;
-declare const BEHAVIOURS$1: {
+declare const BEHAVIOURS$2: {
     'time/transportPanelView': (inputs: Record<string, unknown>) => TransportPanelViewModel;
 };
 declare const TRANSPORT_DECLARATION: BlockDeclaration;
@@ -1977,7 +1977,60 @@ declare function rulerTicks(scale: XenoTimeScale, timebase: XenoTimebase, option
 declare function gridTicksFor(scale: XenoTimeScale, timebase: XenoTimebase): number;
 
 /**
- * The Timeline view.
+ * The Timeline panel AS A DECLARATION — the twenty-sixth and LAST block written the §8d way, the
+ * fifth DRAWN surface. The CHROME is data: the tool choice (a `chrome/SegmentedControl` — select,
+ * razor, ripple, hand — where four hand-styled `aria-pressed` buttons lived), the snap toggle (a
+ * `chrome/FilterChip`), the fit action, the empty state, the track count and the playhead readout.
+ * The SURFACE is one runtime unit (`timeline/Surface`) bound to the controller: the ruler, the
+ * lanes with their clips, the marquee, the playhead layer, the pointer and keyboard models.
+ *
+ * Presentation contract: input `view` (a {@link TimelineViewModel}), output `ui` (a
+ * {@link TimelineUiIntent}) applied by the runtime to the controller's own methods.
+ */
+
+/** The half of a renderer's config the view reads. */
+interface TimelineViewOptions {
+    trackHeightPx?: number;
+    virtualize?: boolean;
+}
+interface TimelineViewModel {
+    tools: {
+        value: XenoTimelineTool;
+        label: string;
+        title: string;
+    }[];
+    tool: XenoTimelineTool;
+    snapOn: boolean;
+    empty: boolean;
+    drawn: boolean;
+    tracksLabel?: string;
+    playheadLabel: string;
+}
+type TimelineUiIntent = {
+    kind: 'tool';
+    tool: XenoTimelineTool;
+} | {
+    kind: 'snap';
+    on: boolean;
+} | {
+    kind: 'fit';
+};
+/** Derive the view model from the live controller — the runtime calls this on every draw. */
+declare function timelineViewState(c: TimelineController, _options?: TimelineViewOptions): TimelineViewModel;
+/** Apply a `ui` intent to the controller — the runtime's half of the contract. */
+declare function applyTimelineUi(c: TimelineController, intent: TimelineUiIntent): void;
+declare const timelineViewManifest: PanelManifest;
+declare const BEHAVIOURS$1: {
+    'time/timelinePanelView': (inputs: Record<string, unknown>) => TimelineViewModel;
+};
+declare const TIMELINE_DECLARATION: BlockDeclaration;
+
+/**
+ * The Timeline view — the CODE VIEW of `TIMELINE_DECLARATION`, drawing the same
+ * {@link TimelineViewModel} byte-identical (the equivalence suite holds the two together). The one
+ * runtime-bound unit is the SURFACE (`timeline/Surface`: the ruler, the lanes and clips, the
+ * marquee, the playhead, the pointer and keyboard models); the chrome intents go through
+ * `applyTimelineUi`.
  *
  * Composes `@xenosystem/components/chrome`. **The host must import
  * `@xenosystem/workbench/primitives.css`** or this renders unstyled with no error — the most common
@@ -1990,13 +2043,23 @@ declare function gridTicksFor(scale: XenoTimeScale, timebase: XenoTimebase): num
  */
 
 /** Props for {@link TimelinePanelView}. */
-interface TimelinePanelViewProps {
+interface TimelinePanelViewProps extends TimelineViewOptions {
     controller: TimelineController;
-    trackHeightPx?: number;
-    virtualize?: boolean;
 }
 /** The Timeline panel view. */
-declare function TimelinePanelView({ controller }: TimelinePanelViewProps): ReactNode;
+declare function TimelinePanelView({ controller, ...options }: TimelinePanelViewProps): ReactNode;
+/**
+ * The surface — `timeline/Surface` in the declaration, bound to the controller: the ruler (scrubs),
+ * the lanes with their clips, the marquee, the playhead on its own layer, and the pointer and
+ * keyboard models.
+ */
+declare function TimelineSurface({ controller }: {
+    controller: TimelineController;
+}): ReactNode;
+/** The unit names the runtime supplies for this block — what a host's registry check must accept beside the shared families. */
+declare const TIMELINE_RUNTIME_UNITS: readonly ["timeline/Surface"];
+/** The units the runtime registers for `TIMELINE_DECLARATION`, bound to ITS controller. */
+declare function timelineRuntimeComponents(controller: TimelineController): Record<(typeof TIMELINE_RUNTIME_UNITS)[number], React.ComponentType<any>>;
 
 /**
  * The `xeno.core.calendar` contract.
@@ -2540,4 +2603,4 @@ interface CalendarPanelViewProps extends CalendarViewOptions {
 /** The Calendar panel view. */
 declare function CalendarPanelView({ controller, firstDayOfWeek, emptyHint }: CalendarPanelViewProps): ReactNode;
 
-export { ALL_CALENDAR_MODES, type BeginDragOptions, type BuildCellsOptions, BEHAVIOURS as CALENDAR_BEHAVIOURS, CALENDAR_DECLARATION, CALENDAR_PANEL_ID, CALENDAR_RUNTIME_UNITS, CalendarController, type CalendarControllerOptions, type CalendarHostBridge, type CalendarPanelState, CalendarPanelView, type CalendarPanelViewProps, type CalendarRenderContext, type CalendarUiIntent, type CalendarViewAgendaRow, type CalendarViewCell, type CalendarViewChip, type CalendarViewModel, type CalendarViewOptions, type CalendarViewState, type CreateCalendarPanelOptions, type CreateTimelinePanelOptions, type CreateTransportPanelOptions, DEFAULT_SNAP, DEFAULT_ZOOM, DRAG_THRESHOLD_PX, type DeriveOptions, EDGE_ZONE_MIN_CLIP_PX, EDGE_ZONE_PX, MIN_MAJOR_PX, MIN_MINOR_PX, TIMELINE_PANEL_ID, BEHAVIOURS$1 as TRANSPORT_BEHAVIOURS, TRANSPORT_DECLARATION, TRANSPORT_ICONS, TRANSPORT_RUNTIME_UNITS, TRIM_SNAP_PX, TimelineController, type TimelineControllerOptions, type TimelineHostBridge, type TimelinePanelState, TimelinePanelView, type TimelinePanelViewProps, type TimelineRenderConfig, type TimelineRenderContext, type TimelineViewState, type TransportKeyEvent, TransportPanelController, type TransportPanelControllerOptions, type TransportPanelSerialized, TransportPanelView, type TransportPanelViewModel, type TransportPanelViewProps, type TransportUiIntent, type TransportViewState, type XenoArrangement, type XenoCachedTile, type XenoCalendarCell, type XenoCalendarEdit, type XenoCalendarEvent, type XenoCalendarSlotActivate, type XenoCalendarViewMode, type XenoCalendarWindow, type XenoClip, type XenoClipFade, type XenoDragKind, type XenoDragModifiers, type XenoDragPreview, type XenoDragState, type XenoHitTarget, type XenoLaneTile, type XenoLaneTileRequest, type XenoMarker, type XenoOverlaySpan, type XenoRenderTier, type XenoRowLayout, type XenoRulerTick, type XenoSnapCandidate, type XenoSnapConfig, type XenoSnapMode, type XenoSnapResult, type XenoTickWeight, XenoTileCache, type XenoTileCacheOptions, XenoTimeScale, type XenoTimeScaleGeometry, type XenoTimeScaleState, type XenoTimelineOp, type XenoTimelineSelection, type XenoTimelineTool, type XenoTimelineViewport, type XenoTrack, type XenoTrackKind, type XenoTrimMode, type XenoVisibleTrack, type XenoZoomBounds, addDays, addMonths, alignToTileGrid, applyCalendarUi, applyTransportUi, beginDrag, blitTile, buildCells, buildRowLayout, calendarManifest, calendarPanel, calendarViewManifest, calendarViewState, chooseRung, clampScroll, clipDuration, clipsInMarquee, clipsOverlap, collectSnapTargets, commitDrag, computeVisible, createCalendarPanel, createTimelinePanel, createTransportPanel, dayKey, daysInMonth, dedupeByColumn, deriveEvents, edgeZone, formatMinutes, gridStart, gridTicksFor, hasSourceWindow, isZoomGesture, isoWeekday, packOverlaps, parseDayKey, passedThreshold, previewDrag, renderTier, rowAtY, rowInWindow, rulerTicks, scrollToReveal, snapDelta, snapTick, snapWouldFight, sourceRangeFor, statusTone, ticksPerStep, tileKey, tileWidthTicks, timelineManifest, timelinePanel, todayKey, transportManifest, transportPanel, transportPanelView, transportViewManifest, transportViewState, trimModeFor, visibleClips, visibleRows, weekStart, wheelZoomFactor, withSnapModifier, zoomAboutCursor, zoomBucket, zoomToFit };
+export { ALL_CALENDAR_MODES, type BeginDragOptions, type BuildCellsOptions, BEHAVIOURS as CALENDAR_BEHAVIOURS, CALENDAR_DECLARATION, CALENDAR_PANEL_ID, CALENDAR_RUNTIME_UNITS, CalendarController, type CalendarControllerOptions, type CalendarHostBridge, type CalendarPanelState, CalendarPanelView, type CalendarPanelViewProps, type CalendarRenderContext, type CalendarUiIntent, type CalendarViewAgendaRow, type CalendarViewCell, type CalendarViewChip, type CalendarViewModel, type CalendarViewOptions, type CalendarViewState, type CreateCalendarPanelOptions, type CreateTimelinePanelOptions, type CreateTransportPanelOptions, DEFAULT_SNAP, DEFAULT_ZOOM, DRAG_THRESHOLD_PX, type DeriveOptions, EDGE_ZONE_MIN_CLIP_PX, EDGE_ZONE_PX, MIN_MAJOR_PX, MIN_MINOR_PX, BEHAVIOURS$1 as TIMELINE_BEHAVIOURS, TIMELINE_DECLARATION, TIMELINE_PANEL_ID, TIMELINE_RUNTIME_UNITS, BEHAVIOURS$2 as TRANSPORT_BEHAVIOURS, TRANSPORT_DECLARATION, TRANSPORT_ICONS, TRANSPORT_RUNTIME_UNITS, TRIM_SNAP_PX, TimelineController, type TimelineControllerOptions, type TimelineHostBridge, type TimelinePanelState, TimelinePanelView, type TimelinePanelViewProps, type TimelineRenderConfig, type TimelineRenderContext, TimelineSurface, type TimelineUiIntent, type TimelineViewModel, type TimelineViewOptions, type TimelineViewState, type TransportKeyEvent, TransportPanelController, type TransportPanelControllerOptions, type TransportPanelSerialized, TransportPanelView, type TransportPanelViewModel, type TransportPanelViewProps, type TransportUiIntent, type TransportViewState, type XenoArrangement, type XenoCachedTile, type XenoCalendarCell, type XenoCalendarEdit, type XenoCalendarEvent, type XenoCalendarSlotActivate, type XenoCalendarViewMode, type XenoCalendarWindow, type XenoClip, type XenoClipFade, type XenoDragKind, type XenoDragModifiers, type XenoDragPreview, type XenoDragState, type XenoHitTarget, type XenoLaneTile, type XenoLaneTileRequest, type XenoMarker, type XenoOverlaySpan, type XenoRenderTier, type XenoRowLayout, type XenoRulerTick, type XenoSnapCandidate, type XenoSnapConfig, type XenoSnapMode, type XenoSnapResult, type XenoTickWeight, XenoTileCache, type XenoTileCacheOptions, XenoTimeScale, type XenoTimeScaleGeometry, type XenoTimeScaleState, type XenoTimelineOp, type XenoTimelineSelection, type XenoTimelineTool, type XenoTimelineViewport, type XenoTrack, type XenoTrackKind, type XenoTrimMode, type XenoVisibleTrack, type XenoZoomBounds, addDays, addMonths, alignToTileGrid, applyCalendarUi, applyTimelineUi, applyTransportUi, beginDrag, blitTile, buildCells, buildRowLayout, calendarManifest, calendarPanel, calendarViewManifest, calendarViewState, chooseRung, clampScroll, clipDuration, clipsInMarquee, clipsOverlap, collectSnapTargets, commitDrag, computeVisible, createCalendarPanel, createTimelinePanel, createTransportPanel, dayKey, daysInMonth, dedupeByColumn, deriveEvents, edgeZone, formatMinutes, gridStart, gridTicksFor, hasSourceWindow, isZoomGesture, isoWeekday, packOverlaps, parseDayKey, passedThreshold, previewDrag, renderTier, rowAtY, rowInWindow, rulerTicks, scrollToReveal, snapDelta, snapTick, snapWouldFight, sourceRangeFor, statusTone, ticksPerStep, tileKey, tileWidthTicks, timelineManifest, timelinePanel, timelineRuntimeComponents, timelineViewManifest, timelineViewState, todayKey, transportManifest, transportPanel, transportPanelView, transportViewManifest, transportViewState, trimModeFor, visibleClips, visibleRows, weekStart, wheelZoomFactor, withSnapModifier, zoomAboutCursor, zoomBucket, zoomToFit };

package/dist/time/index.js

@@ -2857,17 +2857,118 @@ var timelineManifest = {
 
 // src/time/timeline/react/TimelinePanelView.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { EmptyState, StatusBar, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
+import { Column as Column2, EmptyState, FilterChip, SegmentedControl, StatusBar, Text, TextButton as TextButton2, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
+
+// src/time/timeline/declaration.ts
 import { formatTick as formatTick4 } from "@xenosystem/time-core";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var RULER_PX = 22;
 var TOOLS = [
-  { id: "select", label: "Select", key: "V" },
-  { id: "razor", label: "Razor", key: "C" },
-  { id: "ripple", label: "Ripple", key: "B" },
-  { id: "hand", label: "Hand", key: "H" }
+  { value: "select", label: "Select", title: "Select (V)" },
+  { value: "razor", label: "Razor", title: "Razor (C)" },
+  { value: "ripple", label: "Ripple", title: "Ripple (B)" },
+  { value: "hand", label: "Hand", title: "Hand (H)" }
 ];
-function TimelinePanelView({ controller }) {
+function timelineViewState(c, _options = {}) {
+  const state = c.getState();
+  const tracks = state.arrangement?.tracks.length ?? 0;
+  return {
+    tools: TOOLS,
+    tool: state.tool,
+    snapOn: state.snap.mode !== "off",
+    empty: tracks === 0,
+    drawn: tracks > 0,
+    tracksLabel: state.arrangement ? `${tracks} tracks` : void 0,
+    playheadLabel: formatTick4(state.playheadTick, state.timebase)
+  };
+}
+function applyTimelineUi(c, intent) {
+  switch (intent.kind) {
+    case "tool":
+      c.setTool(intent.tool);
+      break;
+    case "snap":
+      c.setSnapMode(intent.on ? "both" : "off");
+      break;
+    case "fit":
+      c.zoomToFitRange();
+      break;
+  }
+}
+var timelineViewManifest = {
+  id: timelineManifest.id,
+  version: "1.0.0",
+  title: "Timeline",
+  category: "time",
+  layout: { slot: "bottom" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The TimelineViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, tool?, on? } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY2 = { tools: TOOLS, tool: "select", snapOn: true, empty: true, drawn: false, playheadLabel: "" };
+var BEHAVIOURS2 = {
+  "time/timelinePanelView": (inputs) => inputs.view ?? EMPTY2
+};
+var text2 = (b) => ({ component: "text", props: { text: b } });
+var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var TIMELINE_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: timelineViewManifest,
+  behaviour: "time/timelinePanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Tool" }, options: { input: "view.tools" }, value: { input: "view.tool" } }, on: { onChange: ui2("tool", { tool: { arg: "" } }) } } },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/FilterChip", props: { on: { input: "view.snapOn" }, title: { value: "Snapping" } }, children: [text2({ value: "Snap" })], on: { onChange: ui2("snap", { on: { arg: "" } }) } },
+                { component: "chrome/TextButton", children: [text2({ value: "Fit" })], on: { onClick: ui2("fit") } }
+              ]
+            }
+          }
+        }
+      },
+      { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No arrangement" }, hint: { value: "Wire a host arrangement into this panel's input." } } },
+      { component: "timeline/Surface", when: { input: "view.drawn" } },
+      {
+        component: "chrome/StatusBar",
+        props: {
+          left: { node: { component: "chrome/Text", when: { input: "view.tracksLabel" }, props: { role: { value: "number" } }, children: [text2({ input: "view.tracksLabel" })] } },
+          right: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text2({ input: "view.playheadLabel" })] } }
+        }
+      }
+    ]
+  }
+};
+
+// src/time/timeline/react/TimelinePanelView.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RULER_PX = 22;
+function TimelinePanelView({ controller, ...options }) {
+  useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
+  const view = timelineViewState(controller, options);
+  const ui4 = (intent) => applyTimelineUi(controller, intent);
+  return /* @__PURE__ */ jsxs2(Column2, { children: [
+    /* @__PURE__ */ jsx2(
+      Toolbar,
+      {
+        left: /* @__PURE__ */ jsx2(SegmentedControl, { size: "sm", label: "Tool", options: view.tools, value: view.tool, onChange: (tool) => ui4({ kind: "tool", tool }) }),
+        right: /* @__PURE__ */ jsxs2(ToolbarGroup, { end: true, children: [
+          /* @__PURE__ */ jsx2(FilterChip, { on: view.snapOn, title: "Snapping", onChange: (on) => ui4({ kind: "snap", on }), children: "Snap" }),
+          /* @__PURE__ */ jsx2(TextButton2, { onClick: () => ui4({ kind: "fit" }), children: "Fit" })
+        ] })
+      }
+    ),
+    view.empty ? /* @__PURE__ */ jsx2(EmptyState, { title: "No arrangement", hint: "Wire a host arrangement into this panel's input." }) : null,
+    view.drawn ? /* @__PURE__ */ jsx2(TimelineSurface, { controller }) : null,
+    /* @__PURE__ */ jsx2(StatusBar, { left: view.tracksLabel ? /* @__PURE__ */ jsx2(Text, { role: "number", children: view.tracksLabel }) : null, right: /* @__PURE__ */ jsx2(Text, { role: "number", children: view.playheadLabel }) })
+  ] });
+}
+function TimelineSurface({ controller }) {
   const state = useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
   const containerRef = useRef2(null);
   useEffect2(() => {
@@ -2875,7 +2976,7 @@ function TimelinePanelView({ controller }) {
     if (!el) return;
     const measure = () => {
       const rect = el.getBoundingClientRect();
-      controller.resize(rect.width, rect.height);
+      if (rect.width > 0 && rect.height > 0) controller.resize(rect.width, rect.height);
     };
     measure();
     if (typeof ResizeObserver === "undefined") return;
@@ -2967,117 +3068,77 @@ function TimelinePanelView({ controller }) {
   const ticks = state.arrangement ? rulerTicks(scale, state.timebase) : [];
   const selected = new Set(state.selection.clipIds);
   const preview = state.preview;
-  return /* @__PURE__ */ jsxs2("div", { style: SHELL, children: [
-    /* @__PURE__ */ jsx2(
-      Toolbar,
-      {
-        left: /* @__PURE__ */ jsx2(ToolbarGroup, { children: TOOLS.map((tool) => /* @__PURE__ */ jsx2(
-          "button",
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: containerRef,
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Timeline",
+      style: SURFACE,
+      onWheel,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx2("div", { style: { ...RULER, height: RULER_PX }, children: ticks.map((tick) => /* @__PURE__ */ jsx2(
+          "div",
           {
-            type: "button",
-            title: `${tool.label} (${tool.key})`,
-            "aria-pressed": state.tool === tool.id,
-            onClick: () => controller.setTool(tool.id),
-            style: toolButton(state.tool === tool.id),
-            children: tool.label
+            style: {
+              position: "absolute",
+              left: Math.floor(tick.x),
+              bottom: 0,
+              width: 1,
+              height: tick.weight === "major" ? 8 : tick.weight === "medium" ? 5 : 3,
+              background: "var(--xeno-active)"
+            },
+            children: tick.label ? /* @__PURE__ */ jsx2("span", { style: TICK_LABEL, className: "tabular-nums", children: tick.label }) : null
           },
-          tool.id
+          tick.tick
         )) }),
-        right: /* @__PURE__ */ jsxs2(ToolbarGroup, { end: true, children: [
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              title: "Snapping",
-              "aria-pressed": state.snap.mode !== "off",
-              onClick: () => controller.setSnapMode(state.snap.mode === "off" ? "both" : "off"),
-              style: toolButton(state.snap.mode !== "off"),
-              children: "Snap"
-            }
-          ),
-          /* @__PURE__ */ jsx2("button", { type: "button", title: "Zoom to fit", onClick: () => controller.zoomToFitRange(), style: toolButton(false), children: "Fit" })
-        ] })
-      }
-    ),
-    !state.arrangement || state.arrangement.tracks.length === 0 ? /* @__PURE__ */ jsx2(EmptyState, { title: "No arrangement", hint: "Wire a host arrangement into this panel's input." }) : /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        ref: containerRef,
-        tabIndex: 0,
-        role: "application",
-        "aria-label": "Timeline",
-        style: SURFACE,
-        onWheel,
-        onPointerDown,
-        onPointerMove,
-        onPointerUp,
-        onPointerCancel: onPointerUp,
-        onKeyDown,
-        children: [
-          /* @__PURE__ */ jsx2("div", { style: { ...RULER, height: RULER_PX }, children: ticks.map((tick) => /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", inset: `${RULER_PX}px 0 0 0`, overflow: "hidden" }, children: [
+          state.visible.map((row) => {
+            const top = row.topPx - scale.scrollTopPx;
+            return /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", left: 0, right: 0, top, height: row.heightPx }, children: [
+              /* @__PURE__ */ jsx2("div", { style: { ...GUTTER, width: scale.gutterPx }, children: /* @__PURE__ */ jsx2("span", { style: TRACK_NAME, children: row.track.name }) }),
+              /* @__PURE__ */ jsx2("div", { "data-canvas": "timeline-lane", style: { ...LANE, left: scale.gutterPx }, children: row.clips.map((clip) => {
+                const shown = preview?.clips[clip.id] ?? clip;
+                const x = scale.tickToX(shown.startTick);
+                const width = Math.max(1, scale.durationToPx(shown.endTick - shown.startTick));
+                return /* @__PURE__ */ jsx2(
+                  ClipRect,
+                  {
+                    clip,
+                    left: x - scale.gutterPx,
+                    width,
+                    selected: selected.has(clip.id)
+                  },
+                  clip.id
+                );
+              }) })
+            ] }, row.track.id);
+          }),
+          preview?.marquee ? /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
-                position: "absolute",
-                left: Math.floor(tick.x),
-                bottom: 0,
-                width: 1,
-                height: tick.weight === "major" ? 8 : tick.weight === "medium" ? 5 : 3,
-                background: "var(--xeno-active)"
-              },
-              children: tick.label ? /* @__PURE__ */ jsx2("span", { style: TICK_LABEL, className: "tabular-nums", children: tick.label }) : null
-            },
-            tick.tick
-          )) }),
-          /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", inset: `${RULER_PX}px 0 0 0`, overflow: "hidden" }, children: [
-            state.visible.map((row) => {
-              const top = row.topPx - scale.scrollTopPx;
-              return /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", left: 0, right: 0, top, height: row.heightPx }, children: [
-                /* @__PURE__ */ jsx2("div", { style: { ...GUTTER, width: scale.gutterPx }, children: /* @__PURE__ */ jsx2("span", { style: TRACK_NAME, children: row.track.name }) }),
-                /* @__PURE__ */ jsx2("div", { "data-canvas": "timeline-lane", style: { ...LANE, left: scale.gutterPx }, children: row.clips.map((clip) => {
-                  const shown = preview?.clips[clip.id] ?? clip;
-                  const x = scale.tickToX(shown.startTick);
-                  const width = Math.max(1, scale.durationToPx(shown.endTick - shown.startTick));
-                  return /* @__PURE__ */ jsx2(
-                    ClipRect,
-                    {
-                      clip,
-                      left: x - scale.gutterPx,
-                      width,
-                      selected: selected.has(clip.id)
-                    },
-                    clip.id
-                  );
-                }) })
-              ] }, row.track.id);
-            }),
-            preview?.marquee ? /* @__PURE__ */ jsx2(
-              "div",
-              {
-                style: {
-                  ...MARQUEE,
-                  left: Math.min(scale.tickToX(preview.marquee.fromTick), scale.tickToX(preview.marquee.toTick)),
-                  width: Math.abs(
-                    scale.tickToX(preview.marquee.toTick) - scale.tickToX(preview.marquee.fromTick)
-                  ),
-                  top: Math.min(preview.marquee.fromY, preview.marquee.toY) - scale.scrollTopPx,
-                  height: Math.abs(preview.marquee.toY - preview.marquee.fromY)
-                }
+                ...MARQUEE,
+                left: Math.min(scale.tickToX(preview.marquee.fromTick), scale.tickToX(preview.marquee.toTick)),
+                width: Math.abs(
+                  scale.tickToX(preview.marquee.toTick) - scale.tickToX(preview.marquee.fromTick)
+                ),
+                top: Math.min(preview.marquee.fromY, preview.marquee.toY) - scale.scrollTopPx,
+                height: Math.abs(preview.marquee.toY - preview.marquee.fromY)
               }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsx2("div", { style: { ...PLAYHEAD, left: Math.floor(scale.tickToX(state.playheadTick)) } })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      StatusBar,
-      {
-        left: state.arrangement ? `${state.arrangement.tracks.length} tracks` : void 0,
-        right: /* @__PURE__ */ jsx2("span", { className: "tabular-nums", children: formatTick4(state.playheadTick, state.timebase) })
-      }
-    )
-  ] });
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx2("div", { style: { ...PLAYHEAD, left: Math.floor(scale.tickToX(state.playheadTick)) } })
+      ]
+    }
+  );
 }
 function ClipRect({
   clip,
@@ -3136,7 +3197,6 @@ function hitTest(state, x, y) {
   }
   return { target: { kind: "lane" }, trackIndex: -1 };
 }
-var SHELL = { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 };
 var SURFACE = {
   position: "relative",
   flex: 1,
@@ -3201,18 +3261,9 @@ var PLAYHEAD = {
   background: "var(--xeno-text)",
   pointerEvents: "none"
 };
-function toolButton(active) {
-  return {
-    height: 18,
-    padding: "0 6px",
-    fontSize: 10,
-    // Rectangles with a corner radius. No colour, no gradient, no shadow.
-    borderRadius: 2,
-    border: `1px solid ${active ? "var(--xeno-active)" : "var(--xeno-control)"}`,
-    background: active ? "var(--xeno-control)" : "transparent",
-    color: `${active ? "var(--xeno-text)" : "var(--xeno-muted)"}`,
-    cursor: "pointer"
-  };
+var TIMELINE_RUNTIME_UNITS = ["timeline/Surface"];
+function timelineRuntimeComponents(controller) {
+  return { "timeline/Surface": () => /* @__PURE__ */ jsx2(TimelineSurface, { controller }) };
 }
 
 // src/time/timeline/panel.ts
@@ -3434,10 +3485,10 @@ function gridStart(monthKey, firstDayOfWeek) {
   return addDays(first, -offset);
 }
 function statusTone(value) {
-  const text3 = String(value ?? "").toLowerCase();
-  if (/done|complete|published|paid|ok/.test(text3)) return "success";
-  if (/pending|draft|scheduled|review/.test(text3)) return "warning";
-  if (/fail|error|cancel|reject|overdue/.test(text3)) return "error";
+  const text4 = String(value ?? "").toLowerCase();
+  if (/done|complete|published|paid|ok/.test(text4)) return "success";
+  if (/pending|draft|scheduled|review/.test(text4)) return "warning";
+  if (/fail|error|cancel|reject|overdue/.test(text4)) return "error";
   return "neutral";
 }
 function columnMap(result) {
@@ -4110,7 +4161,7 @@ import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   Badge,
   CalendarGrid,
-  Column as Column2,
+  Column as Column3,
   DayCell,
   EmptyState as EmptyState2,
   ErrorState,
@@ -4119,10 +4170,10 @@ import {
   Row,
   RowList,
   ScrollArea,
-  SegmentedControl,
+  SegmentedControl as SegmentedControl2,
   StatusBar as StatusBar2,
-  Text,
-  TextButton as TextButton2,
+  Text as Text2,
+  TextButton as TextButton3,
   Toolbar as Toolbar2,
   ToolbarGroup as ToolbarGroup2,
   WeekdayRow
@@ -4234,7 +4285,7 @@ var calendarViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY2 = {
+var EMPTY3 = {
   anchor: "",
   partial: false,
   timeZone: "UTC",
@@ -4254,12 +4305,12 @@ var EMPTY2 = {
   rows: [],
   countLabel: "0 events"
 };
-var BEHAVIOURS2 = {
-  "time/calendarPanelView": (inputs) => inputs.view ?? EMPTY2
+var BEHAVIOURS3 = {
+  "time/calendarPanelView": (inputs) => inputs.view ?? EMPTY3
 };
 var CALENDAR_RUNTIME_UNITS = [];
-var text2 = (b) => ({ component: "text", props: { text: b } });
-var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var text3 = (b) => ({ component: "text", props: { text: b } });
+var ui3 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var CALENDAR_DECLARATION = {
   format: "xeno.block@1",
   manifest: calendarViewManifest,
@@ -4274,10 +4325,10 @@ var CALENDAR_DECLARATION = {
             node: {
               component: "fragment",
               children: [
-                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Chevron", props: { direction: { value: "left" } } } }, label: { value: "Previous" } }, on: { onClick: ui2("navigate", { direction: { value: -1 } }) } },
-                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Chevron", props: { direction: { value: "right" } } } }, label: { value: "Next" } }, on: { onClick: ui2("navigate", { direction: { value: 1 } }) } },
-                { component: "chrome/TextButton", on: { onClick: ui2("today") }, children: [text2({ value: "Today" })] },
-                { component: "chrome/Text", props: { role: { value: "meta" } }, children: [text2({ input: "view.anchor" })] }
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Chevron", props: { direction: { value: "left" } } } }, label: { value: "Previous" } }, on: { onClick: ui3("navigate", { direction: { value: -1 } }) } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Chevron", props: { direction: { value: "right" } } } }, label: { value: "Next" } }, on: { onClick: ui3("navigate", { direction: { value: 1 } }) } },
+                { component: "chrome/TextButton", on: { onClick: ui3("today") }, children: [text3({ value: "Today" })] },
+                { component: "chrome/Text", props: { role: { value: "meta" } }, children: [text3({ input: "view.anchor" })] }
               ]
             }
           },
@@ -4286,9 +4337,9 @@ var CALENDAR_DECLARATION = {
               component: "chrome/ToolbarGroup",
               props: { end: { value: true } },
               children: [
-                { component: "chrome/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" }, title: { value: "Some measures have not finished syncing." } }, children: [text2({ value: "partial" })] },
-                { component: "chrome/Badge", props: { title: { value: "Every date is bucketed in this zone." } }, children: [text2({ input: "view.timeZone" })] },
-                { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "View" }, options: { input: "view.modes" }, value: { input: "view.viewMode" } }, on: { onChange: ui2("mode", { mode: { arg: "" } }) } }
+                { component: "chrome/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" }, title: { value: "Some measures have not finished syncing." } }, children: [text3({ value: "partial" })] },
+                { component: "chrome/Badge", props: { title: { value: "Every date is bucketed in this zone." } }, children: [text3({ input: "view.timeZone" })] },
+                { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "View" }, options: { input: "view.modes" }, value: { input: "view.viewMode" } }, on: { onChange: ui3("mode", { mode: { arg: "" } }) } }
               ]
             }
           }
@@ -4308,8 +4359,8 @@ var CALENDAR_DECLARATION = {
               {
                 component: "chrome/Row",
                 each: { input: "view.rows", key: "id" },
-                props: { label: { item: "title" }, meta: { item: "meta" }, selected: { item: "selected" }, trailing: { node: { component: "chrome/Badge", when: { item: "status" }, props: { tone: { item: "tone" } }, children: [text2({ item: "status" })] } } },
-                on: { onClick: ui2("select", { id: { item: "id" } }), onDoubleClick: ui2("activateRow", { id: { item: "id" } }) }
+                props: { label: { item: "title" }, meta: { item: "meta" }, selected: { item: "selected" }, trailing: { node: { component: "chrome/Badge", when: { item: "status" }, props: { tone: { item: "tone" } }, children: [text3({ item: "status" })] } } },
+                on: { onClick: ui3("select", { id: { item: "id" } }), onDoubleClick: ui3("activateRow", { id: { item: "id" } }) }
               }
             ]
           }
@@ -4328,18 +4379,18 @@ var CALENDAR_DECLARATION = {
                 component: "chrome/DayCell",
                 each: { input: "view.cells", key: "key" },
                 props: { day: { item: "day" }, label: { item: "label" }, today: { item: "today" }, outside: { item: "outside" }, tabStop: { item: "tabStop" }, overflow: { item: "overflow" } },
-                on: { onActivate: ui2("activateSlot", { key: { item: "key" } }) },
+                on: { onActivate: ui3("activateSlot", { key: { item: "key" } }) },
                 children: [
                   {
                     component: "chrome/EventChip",
                     each: { item: "chips", key: "id" },
                     props: { time: { item: "time" }, selected: { item: "selected" }, title: { item: "tooltip" } },
                     on: {
-                      onClick: ui2("select", { id: { item: "id" }, additive: { arg: "ctrlKey", index: 0 }, meta: { arg: "metaKey", index: 0 } }),
-                      onDoubleClick: ui2("activateRow", { id: { item: "id" } }),
-                      onContextMenuAt: ui2("contextMenu", { id: { item: "id" }, x: { arg: "", index: 0 }, y: { arg: "", index: 1 } })
+                      onClick: ui3("select", { id: { item: "id" }, additive: { arg: "ctrlKey", index: 0 }, meta: { arg: "metaKey", index: 0 } }),
+                      onDoubleClick: ui3("activateRow", { id: { item: "id" } }),
+                      onContextMenuAt: ui3("contextMenu", { id: { item: "id" }, x: { arg: "", index: 0 }, y: { arg: "", index: 1 } })
                     },
-                    children: [text2({ item: "title" })]
+                    children: [text3({ item: "title" })]
                   }
                 ]
               }
@@ -4358,21 +4409,21 @@ var Chevron = ICONS["icons/Chevron"];
 function CalendarPanelView({ controller, firstDayOfWeek, emptyHint }) {
   useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
   const view = calendarViewState(controller, { firstDayOfWeek, emptyHint });
-  const ui3 = (intent) => applyCalendarUi(controller, intent);
-  return /* @__PURE__ */ jsxs3(Column2, { children: [
+  const ui4 = (intent) => applyCalendarUi(controller, intent);
+  return /* @__PURE__ */ jsxs3(Column3, { children: [
     /* @__PURE__ */ jsx3(
       Toolbar2,
       {
         left: /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(IconButton2, { icon: /* @__PURE__ */ jsx3(Chevron, { direction: "left" }), label: "Previous", onClick: () => ui3({ kind: "navigate", direction: -1 }) }),
-          /* @__PURE__ */ jsx3(IconButton2, { icon: /* @__PURE__ */ jsx3(Chevron, { direction: "right" }), label: "Next", onClick: () => ui3({ kind: "navigate", direction: 1 }) }),
-          /* @__PURE__ */ jsx3(TextButton2, { onClick: () => ui3({ kind: "today" }), children: "Today" }),
-          /* @__PURE__ */ jsx3(Text, { role: "meta", children: view.anchor })
+          /* @__PURE__ */ jsx3(IconButton2, { icon: /* @__PURE__ */ jsx3(Chevron, { direction: "left" }), label: "Previous", onClick: () => ui4({ kind: "navigate", direction: -1 }) }),
+          /* @__PURE__ */ jsx3(IconButton2, { icon: /* @__PURE__ */ jsx3(Chevron, { direction: "right" }), label: "Next", onClick: () => ui4({ kind: "navigate", direction: 1 }) }),
+          /* @__PURE__ */ jsx3(TextButton3, { onClick: () => ui4({ kind: "today" }), children: "Today" }),
+          /* @__PURE__ */ jsx3(Text2, { role: "meta", children: view.anchor })
         ] }),
         right: /* @__PURE__ */ jsxs3(ToolbarGroup2, { end: true, children: [
           view.partial ? /* @__PURE__ */ jsx3(Badge, { tone: "warning", title: "Some measures have not finished syncing.", children: "partial" }) : null,
           /* @__PURE__ */ jsx3(Badge, { title: "Every date is bucketed in this zone.", children: view.timeZone }),
-          /* @__PURE__ */ jsx3(SegmentedControl, { size: "sm", label: "View", options: view.modes, value: view.viewMode, onChange: (mode) => ui3({ kind: "mode", mode }) })
+          /* @__PURE__ */ jsx3(SegmentedControl2, { size: "sm", label: "View", options: view.modes, value: view.viewMode, onChange: (mode) => ui4({ kind: "mode", mode }) })
         ] })
       }
     ),
@@ -4386,22 +4437,22 @@ function CalendarPanelView({ controller, firstDayOfWeek, emptyHint }) {
         meta: row.meta,
         selected: row.selected,
         trailing: row.status ? /* @__PURE__ */ jsx3(Badge, { tone: row.tone, children: row.status }) : null,
-        onClick: () => ui3({ kind: "select", id: row.id }),
-        onDoubleClick: () => ui3({ kind: "activateRow", id: row.id })
+        onClick: () => ui4({ kind: "select", id: row.id }),
+        onDoubleClick: () => ui4({ kind: "activateRow", id: row.id })
       },
       row.id
     )) }) }) : null,
     view.grid ? /* @__PURE__ */ jsx3(ScrollArea, { children: /* @__PURE__ */ jsxs3(CalendarGrid, { columns: view.columns, label: view.gridLabel, children: [
       view.weekHeaded ? /* @__PURE__ */ jsx3(WeekdayRow, { days: view.weekdays }) : null,
-      view.cells.map((cell) => /* @__PURE__ */ jsx3(DayCell, { day: cell.day, label: cell.label, today: cell.today, outside: cell.outside, tabStop: cell.tabStop, overflow: cell.overflow, onActivate: () => ui3({ kind: "activateSlot", key: cell.key }), children: cell.chips.map((chip) => /* @__PURE__ */ jsx3(
+      view.cells.map((cell) => /* @__PURE__ */ jsx3(DayCell, { day: cell.day, label: cell.label, today: cell.today, outside: cell.outside, tabStop: cell.tabStop, overflow: cell.overflow, onActivate: () => ui4({ kind: "activateSlot", key: cell.key }), children: cell.chips.map((chip) => /* @__PURE__ */ jsx3(
         EventChip,
         {
           time: chip.time,
           selected: chip.selected,
           title: chip.tooltip,
-          onClick: (e) => ui3({ kind: "select", id: chip.id, additive: e.ctrlKey, meta: e.metaKey }),
-          onDoubleClick: () => ui3({ kind: "activateRow", id: chip.id }),
-          onContextMenuAt: (x, y) => ui3({ kind: "contextMenu", id: chip.id, x, y }),
+          onClick: (e) => ui4({ kind: "select", id: chip.id, additive: e.ctrlKey, meta: e.metaKey }),
+          onDoubleClick: () => ui4({ kind: "activateRow", id: chip.id }),
+          onContextMenuAt: (x, y) => ui4({ kind: "contextMenu", id: chip.id, x, y }),
           children: chip.title
         },
         chip.id
@@ -4570,7 +4621,7 @@ var export_wrapIntoLoop = clock_exports.wrapIntoLoop;
 export {
   ALL_CALENDAR_MODES,
   export_BAR_SUBDIVISION as BAR_SUBDIVISION,
-  BEHAVIOURS2 as CALENDAR_BEHAVIOURS,
+  BEHAVIOURS3 as CALENDAR_BEHAVIOURS,
   CALENDAR_DECLARATION,
   CALENDAR_PANEL_ID,
   CALENDAR_RUNTIME_UNITS,
@@ -4586,7 +4637,10 @@ export {
   export_IDLE_CLOCK as IDLE_CLOCK,
   MIN_MAJOR_PX,
   MIN_MINOR_PX,
+  BEHAVIOURS2 as TIMELINE_BEHAVIOURS,
+  TIMELINE_DECLARATION,
   TIMELINE_PANEL_ID,
+  TIMELINE_RUNTIME_UNITS,
   BEHAVIOURS as TRANSPORT_BEHAVIOURS,
   TRANSPORT_DECLARATION,
   TRANSPORT_ICONS,
@@ -4594,6 +4648,7 @@ export {
   TRIM_SNAP_PX,
   TimelineController,
   TimelinePanelView,
+  TimelineSurface,
   TransportPanelController,
   TransportPanelView,
   XenoTileCache,
@@ -4602,6 +4657,7 @@ export {
   addMonths,
   alignToTileGrid,
   applyCalendarUi,
+  applyTimelineUi,
   applyTransportUi,
   beginDrag,
   blitTile,
@@ -4672,6 +4728,9 @@ export {
   tileWidthTicks,
   timelineManifest,
   timelinePanel,
+  timelineRuntimeComponents,
+  timelineViewManifest,
+  timelineViewState,
   export_toTick as toTick,
   todayKey,
   transportManifest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.13.29",
+  "version": "0.13.31",
   "description": "XENO Blocks — rung 3 of the front ladder: components composed into a contract-bearing unit (manifest: ports, intents, commands, agent surface), rendered by @xenosystem/workbench. ONE package, one subpath per family (/auth, /edit, /data, /time, /ops, /trust, /agent), one named export per block — XENO PACKAGE NAMING - STANDARD.md.",
   "license": "UNLICENSED",
   "type": "module",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": ">=0.3.4 <1",
-    "@xenosystem/components": ">=0.30.0 <1",
+    "@xenosystem/components": ">=0.31.0 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": ">=0.0.1",
     "@xenosystem/elements-react": ">=0.0.1",
@@ -81,7 +81,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.4",
-    "@xenosystem/components": "^0.30.0",
+    "@xenosystem/components": "^0.31.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",