@xenosystem/blocks 0.13.30 → 0.13.32

package/dist/edit/index.js

@@ -7696,7 +7696,7 @@ var curveManifest = {
 
 // src/edit/curve/react/CurvePanelView.tsx
 import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
-import { Column as Column5, EmptyState as EmptyState4, StatusBar as StatusBar3, Text as Text5, TextButton as TextButton3, Toolbar as Toolbar3, ToolbarGroup } from "@xenosystem/components/chrome";
+import { Column as Column5, DrawnSurface, EmptyState as EmptyState4, StatusBar as StatusBar3, Text as Text5, TextButton as TextButton3, Toolbar as Toolbar3, ToolbarGroup } from "@xenosystem/components/chrome";
 
 // src/edit/curve/declaration.ts
 import { formatTick } from "@xenosystem/time-core";
@@ -7895,13 +7895,10 @@ function CurveSurface({ controller }) {
   const selected = new Set(state.selection.keys.map(keyRefId));
   const channels = state.curves?.channels ?? [];
   return /* @__PURE__ */ jsx7(
-    "div",
+    DrawnSurface,
     {
       ref: containerRef,
-      tabIndex: 0,
-      role: "application",
-      "aria-label": "Curve editor",
-      style: SURFACE,
+      label: "Curve editor",
       onWheel,
       onPointerDown,
       onPointerMove,
@@ -8026,15 +8023,6 @@ function Handles({
     ] }, side);
   }) });
 }
-var SURFACE = {
-  position: "relative",
-  flex: 1,
-  minHeight: 0,
-  overflow: "hidden",
-  outline: "none",
-  userSelect: "none",
-  touchAction: "none"
-};
 var CURVE_RUNTIME_UNITS = ["curve/Surface"];
 function curveRuntimeComponents(controller) {
   return { "curve/Surface": () => /* @__PURE__ */ jsx7(CurveSurface, { controller }) };
@@ -8646,7 +8634,7 @@ var viewportManifest = {
 
 // src/edit/viewport/react/ViewportPanelView.tsx
 import { useEffect as useEffect6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
-import { Badge as Badge4, Overlay, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
+import { Badge as Badge4, DrawnSurface as DrawnSurface2, Overlay, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
 
 // src/edit/viewport/declaration.ts
 function viewportViewState(c, options = {}) {
@@ -8730,12 +8718,11 @@ function ViewportSurface({ controller, overlays, background, children }) {
   }, [controller]);
   const hidden = new Set(state.hiddenSlots);
   return /* @__PURE__ */ jsxs7(
-    "div",
+    DrawnSurface2,
     {
       ref: containerRef,
-      tabIndex: 0,
-      role: "application",
-      "aria-label": "Viewport",
+      label: "Viewport",
+      focused: state.focused,
       onFocus: () => controller.setFocused(true),
       onBlur: () => controller.setFocused(false),
       onKeyDown: (event) => controller.routeKey("down", event.nativeEvent),
@@ -8756,19 +8743,7 @@ function ViewportSurface({ controller, overlays, background, children }) {
       onPointerLeave: (event) => controller.routePointer("leave", event.nativeEvent),
       onWheel: (event) => controller.routePointer("wheel", event.nativeEvent),
       onContextMenu: (event) => event.preventDefault(),
-      style: {
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        minHeight: 0,
-        overflow: "hidden",
-        outline: "none",
-        background: background ?? "transparent",
-        // A focused viewport must be visibly focused, or the element-scoped keyboard model is
-        // invisible to the person using it.
-        boxShadow: state.focused ? "inset 0 0 0 1px var(--xeno-control)" : void 0,
-        touchAction: "none"
-      },
+      style: { width: "100%", height: "100%", background: background ?? "transparent" },
       children: [
         /* @__PURE__ */ jsx8(
           "canvas",
@@ -11893,7 +11868,7 @@ var nodegraphManifest = {
 
 // src/edit/nodegraph/react/NodeGraphPanelView.tsx
 import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useSyncExternalStore as useSyncExternalStore9 } from "react";
-import { Column as Column8, EmptyState as EmptyState7, StatusBar as StatusBar7, Text as Text8, TextButton as TextButton6, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+import { Badge as Badge7, Column as Column8, DrawnSurface as DrawnSurface3, EmptyState as EmptyState7, Overlay as Overlay2, StatusBar as StatusBar7, Text as Text8, TextButton as TextButton6, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
 
 // src/edit/nodegraph/declaration.ts
 function nodegraphViewState(c, _options = {}) {
@@ -12066,13 +12041,10 @@ function NodeGraphSurface({ controller }) {
   const selectedNodes = new Set(state.selection.nodeIds);
   const selectedEdges = new Set(state.selection.edgeIds);
   return /* @__PURE__ */ jsxs10(
-    "div",
+    DrawnSurface3,
     {
       ref: containerRef,
-      tabIndex: 0,
-      role: "application",
-      "aria-label": "Node graph",
-      style: SURFACE2,
+      label: "Node graph",
       onWheel,
       onPointerDown,
       onPointerMove,
@@ -12124,7 +12096,7 @@ function NodeGraphSurface({ controller }) {
             ] })
           }
         ),
-        preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx11("div", { style: REASON, children: preview.connection.verdict.reason }) : null
+        preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx11(Overlay2, { anchor: "bottom-left", children: /* @__PURE__ */ jsx11(Badge7, { children: preview.connection.verdict.reason }) }) : null
       ]
     }
   );
@@ -12248,27 +12220,6 @@ function Port({
     )
   ] });
 }
-var SURFACE2 = {
-  position: "relative",
-  flex: 1,
-  minHeight: 0,
-  overflow: "hidden",
-  outline: "none",
-  userSelect: "none",
-  touchAction: "none"
-};
-var REASON = {
-  position: "absolute",
-  left: 8,
-  bottom: 8,
-  padding: "2px 6px",
-  fontSize: 10,
-  borderRadius: 2,
-  border: "1px solid var(--xeno-control)",
-  background: "var(--xeno-elevated)",
-  color: "var(--xeno-text)",
-  pointerEvents: "none"
-};
 var NODEGRAPH_RUNTIME_UNITS = ["nodegraph/Surface"];
 function nodegraphRuntimeComponents(controller) {
   return { "nodegraph/Surface": () => /* @__PURE__ */ jsx11(NodeGraphSurface, { controller }) };
@@ -13500,7 +13451,7 @@ var treeManifest = {
 // src/edit/tree/react/TreePanelView.tsx
 import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef9, useSyncExternalStore as useSyncExternalStore10 } from "react";
 import {
-  Badge as Badge7,
+  Badge as Badge8,
   Column as Column9,
   EmptyState as EmptyState8,
   ErrorState,
@@ -13850,15 +13801,15 @@ function TreePanelView({ controller, ...options }) {
       ] }),
       meta: /* @__PURE__ */ jsxs11(Fragment8, { children: [
         r.chipLoading ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: "loading\u2026" }) : null,
-        r.chipError ? /* @__PURE__ */ jsx12(Badge7, { tone: "error", children: r.chipErrorText }) : null,
+        r.chipError ? /* @__PURE__ */ jsx12(Badge8, { tone: "error", children: r.chipErrorText }) : null,
         r.chipLoadMore ? /* @__PURE__ */ jsx12(TextButton7, { onClick: () => ui10({ kind: "loadMore", id: r.id }), children: "load more\u2026" }) : null,
-        r.chipTruncated ? /* @__PURE__ */ jsx12(Badge7, { tone: "warning", children: r.chipTruncatedText }) : null,
+        r.chipTruncated ? /* @__PURE__ */ jsx12(Badge8, { tone: "warning", children: r.chipTruncatedText }) : null,
         r.chipEmpty ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: "empty" }) : null
       ] }),
       trailing: /* @__PURE__ */ jsxs11(Fragment8, { children: [
         r.columns.map((c) => /* @__PURE__ */ jsx12(Text9, { role: "number", children: c.text }, c.key)),
         r.glyphs.map((g) => /* @__PURE__ */ jsx12(Text9, { role: "meta", title: g.title, children: icon(g.iconName, g.iconText) }, g.key)),
-        r.badges.map((b) => /* @__PURE__ */ jsx12(Badge7, { tone: b.tone, children: b.text }, b.key)),
+        r.badges.map((b) => /* @__PURE__ */ jsx12(Badge8, { tone: b.tone, children: b.text }, b.key)),
         r.actions.map((a) => /* @__PURE__ */ jsx12(IconButton7, { size: "sm", icon: icon(a.iconName, a.iconText), label: a.label, disabled: a.disabled, onClick: () => ui10({ kind: "action", id: a.rowId, actionId: a.actionId }) }, a.key))
       ] }),
       onExpandedChange: () => ui10({ kind: "toggleExpanded", id: r.id }),

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, DrawnSurface, 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,74 @@ 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(
+    DrawnSurface,
+    {
+      ref: containerRef,
+      label: "Timeline",
+      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,16 +3194,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,
-  minHeight: 0,
-  overflow: "hidden",
-  outline: "none",
-  userSelect: "none",
-  touchAction: "none"
-};
 var RULER = {
   position: "absolute",
   top: 0,
@@ -3201,18 +3249,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 +3473,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 +4149,7 @@ import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   Badge,
   CalendarGrid,
-  Column as Column2,
+  Column as Column3,
   DayCell,
   EmptyState as EmptyState2,
   ErrorState,
@@ -4119,10 +4158,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 +4273,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 +4293,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 +4313,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 +4325,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 +4347,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 +4367,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 +4397,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 +4425,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 +4609,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 +4625,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 +4636,7 @@ export {
   TRIM_SNAP_PX,
   TimelineController,
   TimelinePanelView,
+  TimelineSurface,
   TransportPanelController,
   TransportPanelView,
   XenoTileCache,
@@ -4602,6 +4645,7 @@ export {
   addMonths,
   alignToTileGrid,
   applyCalendarUi,
+  applyTimelineUi,
   applyTransportUi,
   beginDrag,
   blitTile,
@@ -4672,6 +4716,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.30",
+  "version": "0.13.32",
   "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.31.0 <1",
+    "@xenosystem/components": ">=0.32.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.31.0",
+    "@xenosystem/components": "^0.32.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",