@xenosystem/blocks 0.12.8 → 0.13.0

package/dist/time/index.js

@@ -1,3 +1,18 @@
+import {
+  EndIcon,
+  LoopIcon,
+  MetronomeIcon,
+  PlayPauseIcon,
+  RecordIcon,
+  ShuttleLeftIcon,
+  ShuttleRightIcon,
+  StartIcon,
+  StepBackIcon,
+  StepForwardIcon,
+  StopIcon,
+  TRANSPORT_ICONS,
+  TRANSPORT_RUNTIME_UNITS
+} from "../chunk-BP4EYOCQ.js";
 import {
   __reExport
 } from "../chunk-2KG3PWR4.js";
@@ -908,7 +923,7 @@ var text = (b) => ({ component: "text", props: { text: b } });
 var button = (icon, label, kind, extra = {}) => ({
   component: "chrome/IconButton",
   ...extra.when ? { when: extra.when } : {},
-  props: { size: { value: "sm" }, icon: { node: { component: `transport/${icon}` } }, label, ...extra.props ?? {} },
+  props: { size: { value: "sm" }, icon: { node: { component: `icons/${icon}` } }, label, ...extra.props ?? {} },
   on: { onClick: ui(kind) }
 });
 var TRANSPORT_DECLARATION = {
@@ -923,27 +938,27 @@ var TRANSPORT_DECLARATION = {
         component: "chrome/Stack",
         props: { direction: { value: "row" }, gap: { value: 3 }, pad: { value: "gutter" } },
         children: [
-          button("StartIcon", { value: "Go to start" }, "goToStart"),
-          button("StepBackIcon", { value: "Step back" }, "stepBack"),
-          button("ShuttleLeftIcon", { value: "Shuttle reverse (J)" }, "shuttleBack", { when: { input: "view.show.shuttle" } }),
+          button("Start", { value: "Go to start" }, "goToStart"),
+          button("StepBack", { value: "Step back" }, "stepBack"),
+          button("ShuttleLeft", { value: "Shuttle reverse (J)" }, "shuttleBack", { when: { input: "view.show.shuttle" } }),
           {
             component: "chrome/IconButton",
             props: {
               size: { value: "sm" },
               variant: { value: "primary" },
-              icon: { node: { component: "transport/PlayPauseIcon", props: { playing: { input: "view.playing" } } } },
+              icon: { node: { component: "icons/PlayPause", props: { playing: { input: "view.playing" } } } },
               label: { input: "view.playLabel" },
               active: { input: "view.playing" }
             },
             on: { onClick: ui("togglePlay") }
           },
-          button("StopIcon", { value: "Stop" }, "stop"),
-          button("ShuttleRightIcon", { value: "Shuttle forward (L)" }, "shuttleForward", { when: { input: "view.show.shuttle" } }),
-          button("StepForwardIcon", { value: "Step forward" }, "stepForward"),
-          button("EndIcon", { value: "Go to end" }, "goToEnd"),
-          button("RecordIcon", { value: "Record" }, "record", { when: { input: "view.show.record" }, props: { variant: { value: "danger" }, active: { input: "view.recording" } } }),
-          button("LoopIcon", { value: "Loop" }, "toggleLoop", { when: { input: "view.show.loop" }, props: { active: { input: "view.loopEnabled" } } }),
-          button("MetronomeIcon", { value: "Metronome" }, "toggleMetronome", { when: { input: "view.show.metronome" }, props: { active: { input: "view.metronome" } } }),
+          button("Stop", { value: "Stop" }, "stop"),
+          button("ShuttleRight", { value: "Shuttle forward (L)" }, "shuttleForward", { when: { input: "view.show.shuttle" } }),
+          button("StepForward", { value: "Step forward" }, "stepForward"),
+          button("End", { value: "Go to end" }, "goToEnd"),
+          button("Record", { value: "Record" }, "record", { when: { input: "view.show.record" }, props: { variant: { value: "danger" }, active: { input: "view.recording" } } }),
+          button("Loop", { value: "Loop" }, "toggleLoop", { when: { input: "view.show.loop" }, props: { active: { input: "view.loopEnabled" } } }),
+          button("Metronome", { value: "Metronome" }, "toggleMetronome", { when: { input: "view.show.metronome" }, props: { active: { input: "view.metronome" } } }),
           { component: "chrome/TextButton", when: { input: "view.show.punch" }, props: { strong: { input: "view.punch" } }, children: [text({ value: "PUNCH" })] },
           {
             component: "chrome/Readout",
@@ -985,100 +1000,8 @@ var TRANSPORT_DECLARATION = {
   }
 };
 
-// src/time/transport/react/icons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var base = (size) => ({
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 1.5,
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  "aria-hidden": true
-});
-function PlayIcon({ size = 12 }) {
-  return /* @__PURE__ */ jsx("svg", { ...base(size), fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7 4.5v15l13-7.5z" }) });
-}
-function PauseIcon({ size = 12 }) {
-  return /* @__PURE__ */ jsxs("svg", { ...base(size), fill: "currentColor", stroke: "none", children: [
-    /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
-    /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
-  ] });
-}
-function StopIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsx("svg", { ...base(size), fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }) });
-}
-function RecordIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsx("svg", { ...base(size), fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "3" }) });
-}
-function StartIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
-    /* @__PURE__ */ jsx("path", { d: "M19 20 9 12l10-8z" }),
-    /* @__PURE__ */ jsx("path", { d: "M5 19V5" })
-  ] });
-}
-function EndIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
-    /* @__PURE__ */ jsx("path", { d: "m5 4 10 8-10 8z" }),
-    /* @__PURE__ */ jsx("path", { d: "M19 5v14" })
-  ] });
-}
-function StepBackIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsx("svg", { ...base(size), children: /* @__PURE__ */ jsx("path", { d: "M15 18 9 12l6-6" }) });
-}
-function StepForwardIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsx("svg", { ...base(size), children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
-}
-function ShuttleLeftIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
-    /* @__PURE__ */ jsx("path", { d: "M11 19 2 12l9-7z" }),
-    /* @__PURE__ */ jsx("path", { d: "M22 19l-9-7 9-7z" })
-  ] });
-}
-function ShuttleRightIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
-    /* @__PURE__ */ jsx("path", { d: "m13 19 9-7-9-7z" }),
-    /* @__PURE__ */ jsx("path", { d: "m2 19 9-7-9-7z" })
-  ] });
-}
-function LoopIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
-    /* @__PURE__ */ jsx("path", { d: "m17 2 4 4-4 4" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 11v-1a4 4 0 0 1 4-4h14" }),
-    /* @__PURE__ */ jsx("path", { d: "m7 22-4-4 4-4" }),
-    /* @__PURE__ */ jsx("path", { d: "M21 13v1a4 4 0 0 1-4 4H3" })
-  ] });
-}
-function MetronomeIcon({ size = 11 }) {
-  return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
-    /* @__PURE__ */ jsx("path", { d: "M9 3h6l4 18H5z" }),
-    /* @__PURE__ */ jsx("path", { d: "m12 18 4-11" })
-  ] });
-}
-function PlayPauseIcon({ playing, size }) {
-  return playing ? /* @__PURE__ */ jsx(PauseIcon, { size }) : /* @__PURE__ */ jsx(PlayIcon, { size });
-}
-var TRANSPORT_ICONS = {
-  "transport/PlayIcon": PlayIcon,
-  "transport/PauseIcon": PauseIcon,
-  "transport/PlayPauseIcon": PlayPauseIcon,
-  "transport/StopIcon": StopIcon,
-  "transport/RecordIcon": RecordIcon,
-  "transport/StartIcon": StartIcon,
-  "transport/EndIcon": EndIcon,
-  "transport/StepBackIcon": StepBackIcon,
-  "transport/StepForwardIcon": StepForwardIcon,
-  "transport/ShuttleLeftIcon": ShuttleLeftIcon,
-  "transport/ShuttleRightIcon": ShuttleRightIcon,
-  "transport/LoopIcon": LoopIcon,
-  "transport/MetronomeIcon": MetronomeIcon
-};
-var TRANSPORT_RUNTIME_UNITS = Object.keys(TRANSPORT_ICONS);
-
 // src/time/transport/react/TransportPanelView.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function TransportPanelView({ controller }) {
   const subscribe = useCallback((cb) => controller.subscribe(cb), [controller]);
   const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
@@ -1118,7 +1041,7 @@ function TransportPanelView({ controller }) {
     },
     [controller]
   );
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     Column,
     {
       className: "xeno-transport-panel",
@@ -1128,28 +1051,28 @@ function TransportPanelView({ controller }) {
       role: "group",
       "aria-label": "Transport",
       children: [
-        /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 3, pad: "gutter", children: [
-          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StartIcon, {}), label: "Go to start", onClick: () => controller.goToStart() }),
-          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepBackIcon, {}), label: "Step back", onClick: () => controller.step(-1) }),
-          view.show.shuttle && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}), label: "Shuttle reverse (J)", onClick: () => controller.shuttleStep(-1) }),
-          /* @__PURE__ */ jsx2(IconButton, { size: "sm", variant: "primary", icon: /* @__PURE__ */ jsx2(PlayPauseIcon, { playing: view.playing }), label: view.playLabel, active: view.playing, onClick: () => controller.togglePlay() }),
-          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StopIcon, {}), label: "Stop", onClick: () => controller.stop() }),
-          view.show.shuttle && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}), label: "Shuttle forward (L)", onClick: () => controller.shuttleStep(1) }),
-          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepForwardIcon, {}), label: "Step forward", onClick: () => controller.step(1) }),
-          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(EndIcon, {}), label: "Go to end", onClick: () => controller.goToEnd() }),
-          view.show.record && /* @__PURE__ */ jsx2(IconButton, { size: "sm", variant: "danger", icon: /* @__PURE__ */ jsx2(RecordIcon, {}), label: "Record", active: view.recording, onClick: () => controller.record() }),
-          view.show.loop && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LoopIcon, {}), label: "Loop", active: view.loopEnabled, onClick: () => controller.toggleLoop() }),
-          view.show.metronome && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(MetronomeIcon, {}), label: "Metronome", active: view.metronome, onClick: () => controller.toggleMetronome() }),
-          view.show.punch && /* @__PURE__ */ jsx2(TextButton, { strong: view.punch, children: "PUNCH" }),
-          /* @__PURE__ */ jsx2(Readout, { value: view.readout, unit: view.displayLabel, label: view.positionLabel, title: "Click to change time display", onClick: () => controller.cycleDisplay() }),
-          /* @__PURE__ */ jsx2(Readout, { size: "sm", value: view.durationReadout }),
-          view.show.bpm && /* @__PURE__ */ jsx2(NumberInput, { caption: "BPM", label: "Tempo", value: view.bpm, onChange: (bpm) => controller.setTempo(bpm) }),
-          view.show.inOut && /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 2, pad: "none", children: [
-            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setInPoint(), children: "IN" }),
-            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setOutPoint(), children: "OUT" })
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 3, pad: "gutter", children: [
+          /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StartIcon, {}), label: "Go to start", onClick: () => controller.goToStart() }),
+          /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StepBackIcon, {}), label: "Step back", onClick: () => controller.step(-1) }),
+          view.show.shuttle && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(ShuttleLeftIcon, {}), label: "Shuttle reverse (J)", onClick: () => controller.shuttleStep(-1) }),
+          /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "primary", icon: /* @__PURE__ */ jsx(PlayPauseIcon, { playing: view.playing }), label: view.playLabel, active: view.playing, onClick: () => controller.togglePlay() }),
+          /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StopIcon, {}), label: "Stop", onClick: () => controller.stop() }),
+          view.show.shuttle && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(ShuttleRightIcon, {}), label: "Shuttle forward (L)", onClick: () => controller.shuttleStep(1) }),
+          /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StepForwardIcon, {}), label: "Step forward", onClick: () => controller.step(1) }),
+          /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(EndIcon, {}), label: "Go to end", onClick: () => controller.goToEnd() }),
+          view.show.record && /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "danger", icon: /* @__PURE__ */ jsx(RecordIcon, {}), label: "Record", active: view.recording, onClick: () => controller.record() }),
+          view.show.loop && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(LoopIcon, {}), label: "Loop", active: view.loopEnabled, onClick: () => controller.toggleLoop() }),
+          view.show.metronome && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(MetronomeIcon, {}), label: "Metronome", active: view.metronome, onClick: () => controller.toggleMetronome() }),
+          view.show.punch && /* @__PURE__ */ jsx(TextButton, { strong: view.punch, children: "PUNCH" }),
+          /* @__PURE__ */ jsx(Readout, { value: view.readout, unit: view.displayLabel, label: view.positionLabel, title: "Click to change time display", onClick: () => controller.cycleDisplay() }),
+          /* @__PURE__ */ jsx(Readout, { size: "sm", value: view.durationReadout }),
+          view.show.bpm && /* @__PURE__ */ jsx(NumberInput, { caption: "BPM", label: "Tempo", value: view.bpm, onChange: (bpm) => controller.setTempo(bpm) }),
+          view.show.inOut && /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, pad: "none", children: [
+            /* @__PURE__ */ jsx(TextButton, { onClick: () => controller.setInPoint(), children: "IN" }),
+            /* @__PURE__ */ jsx(TextButton, { onClick: () => controller.setOutPoint(), children: "OUT" })
           ] })
         ] }),
-        view.show.scrubber && /* @__PURE__ */ jsx2(Slider, { progress: view.progress, label: "Playhead", valueMin: 0, valueMax: view.duration, valueNow: view.currentTick, valueText: view.readout, onScrub: scrub })
+        view.show.scrubber && /* @__PURE__ */ jsx(Slider, { progress: view.progress, label: "Playhead", valueMin: 0, valueMax: view.duration, valueNow: view.currentTick, valueText: view.readout, onScrub: scrub })
       ]
     }
   );
@@ -1705,7 +1628,7 @@ function beginDrag(options) {
   for (const clip of options.clips) {
     origin[clip.id] = { startTick: clip.startTick, endTick: clip.endTick, trackId: clip.trackId };
   }
-  const base2 = {
+  const base = {
     tool,
     startX: options.x,
     startY: options.y,
@@ -1718,24 +1641,24 @@ function beginDrag(options) {
     deltaTicks: 0,
     deltaTracks: 0
   };
-  if (tool === "hand") return { ...base2, kind: "pan" };
+  if (tool === "hand") return { ...base, kind: "pan" };
   if (tool === "razor") return null;
   switch (target.kind) {
     case "ruler":
-      return { ...base2, kind: "scrub" };
+      return { ...base, kind: "scrub" };
     case "marker":
-      return { ...base2, kind: "marker", markerId: target.markerId };
+      return { ...base, kind: "marker", markerId: target.markerId };
     case "trackDivider":
-      return { ...base2, kind: "trackHeight", trackId: target.trackId, startHeightPx: options.startHeightPx };
+      return { ...base, kind: "trackHeight", trackId: target.trackId, startHeightPx: options.startHeightPx };
     case "clipEdgeStart":
-      return { ...base2, kind: "trimStart", edgeTick: options.tick };
+      return { ...base, kind: "trimStart", edgeTick: options.tick };
     case "clipEdgeEnd":
-      return { ...base2, kind: "trimEnd", edgeTick: options.tick };
+      return { ...base, kind: "trimEnd", edgeTick: options.tick };
     case "clip":
-      return { ...base2, kind: "move" };
+      return { ...base, kind: "move" };
     case "lane":
       return {
-        ...base2,
+        ...base,
         kind: "marquee",
         clipIds: [],
         marquee: { fromTick: options.tick, toTick: options.tick, fromY: options.y, toY: options.y }
@@ -2930,7 +2853,7 @@ var timelineManifest = {
 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 { formatTick as formatTick4 } from "@xenosystem/time-core";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var RULER_PX = 22;
 var TOOLS = [
   { id: "select", label: "Select", key: "V" },
@@ -3038,11 +2961,11 @@ function TimelinePanelView({ controller }) {
   const ticks = state.arrangement ? rulerTicks(scale, state.timebase) : [];
   const selected = new Set(state.selection.clipIds);
   const preview = state.preview;
-  return /* @__PURE__ */ jsxs3("div", { style: SHELL, children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("div", { style: SHELL, children: [
+    /* @__PURE__ */ jsx2(
       Toolbar,
       {
-        left: /* @__PURE__ */ jsx3(ToolbarGroup, { children: TOOLS.map((tool) => /* @__PURE__ */ jsx3(
+        left: /* @__PURE__ */ jsx2(ToolbarGroup, { children: TOOLS.map((tool) => /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -3054,8 +2977,8 @@ function TimelinePanelView({ controller }) {
           },
           tool.id
         )) }),
-        right: /* @__PURE__ */ jsxs3(ToolbarGroup, { end: true, children: [
-          /* @__PURE__ */ jsx3(
+        right: /* @__PURE__ */ jsxs2(ToolbarGroup, { end: true, children: [
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -3066,11 +2989,11 @@ function TimelinePanelView({ controller }) {
               children: "Snap"
             }
           ),
-          /* @__PURE__ */ jsx3("button", { type: "button", title: "Zoom to fit", onClick: () => controller.zoomToFitRange(), style: toolButton(false), children: "Fit" })
+          /* @__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__ */ jsx3(EmptyState, { title: "No arrangement", hint: "Wire a host arrangement into this panel's input." }) : /* @__PURE__ */ jsxs3(
+    !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,
@@ -3085,7 +3008,7 @@ function TimelinePanelView({ controller }) {
         onPointerCancel: onPointerUp,
         onKeyDown,
         children: [
-          /* @__PURE__ */ jsx3("div", { style: { ...RULER, height: RULER_PX }, children: ticks.map((tick) => /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx2("div", { style: { ...RULER, height: RULER_PX }, children: ticks.map((tick) => /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
@@ -3096,20 +3019,20 @@ function TimelinePanelView({ controller }) {
                 height: tick.weight === "major" ? 8 : tick.weight === "medium" ? 5 : 3,
                 background: "var(--xeno-active)"
               },
-              children: tick.label ? /* @__PURE__ */ jsx3("span", { style: TICK_LABEL, className: "tabular-nums", children: tick.label }) : null
+              children: tick.label ? /* @__PURE__ */ jsx2("span", { style: TICK_LABEL, className: "tabular-nums", children: tick.label }) : null
             },
             tick.tick
           )) }),
-          /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", inset: `${RULER_PX}px 0 0 0`, overflow: "hidden" }, children: [
+          /* @__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__ */ jsxs3("div", { style: { position: "absolute", left: 0, right: 0, top, height: row.heightPx }, children: [
-                /* @__PURE__ */ jsx3("div", { style: { ...GUTTER, width: scale.gutterPx }, children: /* @__PURE__ */ jsx3("span", { style: TRACK_NAME, children: row.track.name }) }),
-                /* @__PURE__ */ jsx3("div", { "data-canvas": "timeline-lane", style: { ...LANE, left: scale.gutterPx }, children: row.clips.map((clip) => {
+              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__ */ jsx3(
+                  return /* @__PURE__ */ jsx2(
                     ClipRect,
                     {
                       clip,
@@ -3122,7 +3045,7 @@ function TimelinePanelView({ controller }) {
                 }) })
               ] }, row.track.id);
             }),
-            preview?.marquee ? /* @__PURE__ */ jsx3(
+            preview?.marquee ? /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
@@ -3137,15 +3060,15 @@ function TimelinePanelView({ controller }) {
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsx3("div", { style: { ...PLAYHEAD, left: Math.floor(scale.tickToX(state.playheadTick)) } })
+          /* @__PURE__ */ jsx2("div", { style: { ...PLAYHEAD, left: Math.floor(scale.tickToX(state.playheadTick)) } })
         ]
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       StatusBar,
       {
         left: state.arrangement ? `${state.arrangement.tracks.length} tracks` : void 0,
-        right: /* @__PURE__ */ jsx3("span", { className: "tabular-nums", children: formatTick4(state.playheadTick, state.timebase) })
+        right: /* @__PURE__ */ jsx2("span", { className: "tabular-nums", children: formatTick4(state.playheadTick, state.timebase) })
       }
     )
   ] });
@@ -3156,7 +3079,7 @@ function ClipRect({
   width,
   selected
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-clip-id": clip.id,
@@ -4194,9 +4117,9 @@ import {
 } from "@xenosystem/components/chrome";
 
 // src/time/calendar/react/icons.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function ChevronGlyph({ direction }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       width: 11,
@@ -4208,13 +4131,13 @@ function ChevronGlyph({ direction }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: direction === "left" ? /* @__PURE__ */ jsx4("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" })
+      children: direction === "left" ? /* @__PURE__ */ jsx3("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 
 // src/time/calendar/react/CalendarPanelView.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 function CalendarPanelView({
   controller,
@@ -4222,33 +4145,33 @@ function CalendarPanelView({
   emptyHint
 }) {
   const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
-  const toolbar = /* @__PURE__ */ jsx5(
+  const toolbar = /* @__PURE__ */ jsx4(
     Toolbar2,
     {
-      left: /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx5(
+      left: /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx4(
           IconButton2,
           {
-            icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "left" }),
+            icon: /* @__PURE__ */ jsx4(ChevronGlyph, { direction: "left" }),
             label: "Previous",
             onClick: () => controller.navigate(-1)
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           IconButton2,
           {
-            icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "right" }),
+            icon: /* @__PURE__ */ jsx4(ChevronGlyph, { direction: "right" }),
             label: "Next",
             onClick: () => controller.navigate(1)
           }
         ),
-        /* @__PURE__ */ jsx5(TextButton2, { onClick: () => controller.goToToday(), children: "Today" }),
-        /* @__PURE__ */ jsx5("span", { style: { fontSize: 11, opacity: 0.8 }, children: controller.anchorKey().slice(0, 7) })
+        /* @__PURE__ */ jsx4(TextButton2, { onClick: () => controller.goToToday(), children: "Today" }),
+        /* @__PURE__ */ jsx4("span", { style: { fontSize: 11, opacity: 0.8 }, children: controller.anchorKey().slice(0, 7) })
       ] }),
-      right: /* @__PURE__ */ jsxs4(ToolbarGroup2, { end: true, children: [
-        state.partial ? /* @__PURE__ */ jsx5(Badge, { tone: "warning", title: "Some measures have not finished syncing.", children: "partial" }) : null,
-        /* @__PURE__ */ jsx5(Badge, { title: "Every date is bucketed in this zone.", children: controller.timeZone() }),
-        /* @__PURE__ */ jsx5(
+      right: /* @__PURE__ */ jsxs3(ToolbarGroup2, { end: true, children: [
+        state.partial ? /* @__PURE__ */ jsx4(Badge, { tone: "warning", title: "Some measures have not finished syncing.", children: "partial" }) : null,
+        /* @__PURE__ */ jsx4(Badge, { title: "Every date is bucketed in this zone.", children: controller.timeZone() }),
+        /* @__PURE__ */ jsx4(
           SegmentedControl,
           {
             size: "sm",
@@ -4269,13 +4192,13 @@ function CalendarPanelView({
   );
   const body = (() => {
     if (state.configProblem) {
-      return /* @__PURE__ */ jsx5(EmptyState2, { title: "Not configured", hint: state.configProblem });
+      return /* @__PURE__ */ jsx4(EmptyState2, { title: "Not configured", hint: state.configProblem });
     }
     if (state.errorMessage) {
-      return /* @__PURE__ */ jsx5(ErrorState, { title: "Could not load events", message: state.errorMessage });
+      return /* @__PURE__ */ jsx4(ErrorState, { title: "Could not load events", message: state.errorMessage });
     }
     if (state.empty) {
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx4(
         EmptyState2,
         {
           title: "Nothing scheduled",
@@ -4284,7 +4207,7 @@ function CalendarPanelView({
       );
     }
     if (state.viewMode === "agenda" || state.viewMode === "timeline") {
-      return /* @__PURE__ */ jsx5(ScrollArea, { children: /* @__PURE__ */ jsx5(RowList, { role: "listbox", "aria-label": "Events", children: state.events.map((event) => /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx4(ScrollArea, { children: /* @__PURE__ */ jsx4(RowList, { role: "listbox", "aria-label": "Events", children: state.events.map((event) => /* @__PURE__ */ jsx4(
         Row,
         {
           label: event.title,
@@ -4292,14 +4215,14 @@ function CalendarPanelView({
           selected: state.selection.includes(event.id),
           onClick: () => controller.select([event.id]),
           onDoubleClick: () => controller.activateRow(event.id),
-          trailing: event.status !== void 0 ? /* @__PURE__ */ jsx5(Badge, { tone: statusTone(event.status), children: String(event.status) }) : null
+          trailing: event.status !== void 0 ? /* @__PURE__ */ jsx4(Badge, { tone: statusTone(event.status), children: String(event.status) }) : null
         },
         event.id
       )) }) });
     }
     const columns = state.viewMode === "day" ? 1 : 7;
-    return /* @__PURE__ */ jsxs4(ScrollArea, { children: [
-      columns === 7 ? /* @__PURE__ */ jsx5("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }, children: WEEKDAYS.map((_, i) => /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs3(ScrollArea, { children: [
+      columns === 7 ? /* @__PURE__ */ jsx4("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }, children: WEEKDAYS.map((_, i) => /* @__PURE__ */ jsx4(
         "div",
         {
           style: {
@@ -4313,7 +4236,7 @@ function CalendarPanelView({
         },
         i
       )) }) : null,
-      /* @__PURE__ */ jsx5("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 1 }, children: state.cells.map((cell) => /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsx4("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 1 }, children: state.cells.map((cell) => /* @__PURE__ */ jsxs3(
         "div",
         {
           onClick: () => controller.activateSlot(cell.key),
@@ -4326,9 +4249,9 @@ function CalendarPanelView({
             boxShadow: cell.today ? "inset 0 0 0 1px var(--xeno-control)" : void 0
           },
           children: [
-            /* @__PURE__ */ jsx5("div", { style: { fontSize: 9, opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: cell.day }),
-            cell.events.map((event) => /* @__PURE__ */ jsx5(Chip, { event, controller, state }, event.id)),
-            cell.overflow > 0 ? /* @__PURE__ */ jsxs4("div", { style: { fontSize: 9, opacity: 0.5 }, children: [
+            /* @__PURE__ */ jsx4("div", { style: { fontSize: 9, opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: cell.day }),
+            cell.events.map((event) => /* @__PURE__ */ jsx4(Chip, { event, controller, state }, event.id)),
+            cell.overflow > 0 ? /* @__PURE__ */ jsxs3("div", { style: { fontSize: 9, opacity: 0.5 }, children: [
               "+",
               cell.overflow,
               " more"
@@ -4339,10 +4262,10 @@ function CalendarPanelView({
       )) })
     ] });
   })();
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
     toolbar,
     body,
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx4(
       StatusBar2,
       {
         left: `${state.events.length} event${state.events.length === 1 ? "" : "s"}`,
@@ -4357,7 +4280,7 @@ function Chip({
   state
 }) {
   const selected = state.selection.includes(event.id);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       onClick: (e) => {
@@ -4386,7 +4309,7 @@ function Chip({
         cursor: "pointer"
       },
       children: [
-        event.allDay ? null : /* @__PURE__ */ jsx5("span", { style: { opacity: 0.6, marginRight: 3, fontVariantNumeric: "tabular-nums" }, children: formatMinutes(event.startMinutes) }),
+        event.allDay ? null : /* @__PURE__ */ jsx4("span", { style: { opacity: 0.6, marginRight: 3, fontVariantNumeric: "tabular-nums" }, children: formatMinutes(event.startMinutes) }),
         event.title
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.12.8",
+  "version": "0.13.0",
   "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",
@@ -34,6 +34,10 @@
       "types": "./dist/data/duckdb.d.ts",
       "import": "./dist/data/duckdb.js"
     },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
     "./edit": {
       "types": "./dist/edit/index.d.ts",
       "import": "./dist/edit/index.js"
@@ -60,7 +64,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": ">=0.3.3 <1",
-    "@xenosystem/components": ">=0.17.0 <1",
+    "@xenosystem/components": ">=0.17.1 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": ">=0.0.1",
     "@xenosystem/time-core": "^0.1.0",
@@ -76,7 +80,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.3",
-    "@xenosystem/components": "^0.17.0",
+    "@xenosystem/components": "^0.17.1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": "0.0.1",
     "@xenosystem/time-core": "^0.1.0",