@xenosystem/blocks 0.11.6 → 0.12.1

package/dist/time/index.d.ts

@@ -1,4 +1,4 @@
-import { PanelHost, PanelModule, PanelManifest } from '@xenosystem/block-sdk';
+import { PanelHost, PanelModule, PanelManifest, BlockDeclaration } from '@xenosystem/block-sdk';
 import { ThrottleClock, XenoPlayheadClock, XenoTimebase, XenoTransportState, XenoTick, XenoStepUnit, XenoLoopRange } from '@xenosystem/time-core';
 export { BAR_SUBDIVISION, BarsBeats, DEFAULT_TIMEBASE, DISPLAY_CYCLE, ExtrapolateInput, IDLE_CLOCK, ThrottleClock, Throttled, XenoLoopRange, XenoPlayheadClock, XenoStepUnit, XenoTempoEntry, XenoTick, XenoTimeDisplay, XenoTimeSignature, XenoTimebase, XenoTransportIntent, XenoTransportState, clampTick, clockAt, createThrottle, displayLabel, effectiveFps, extrapolateTick, formatBars, formatFrames, formatSeconds, formatTick, formatTimecode, frameToTick, isAnimating, nextDisplay, normalizeClock, normalizeTimebase, secondsToTicks, tickToFrame, ticksToBarsBeats, ticksToSeconds, toTick, wrapIntoLoop } from '@xenosystem/time-core';
 import { ReactElement, ReactNode } from 'react';
@@ -208,7 +208,15 @@ declare function ticksPerStep(unit: XenoStepUnit, timebase: XenoTimebase): numbe
  */
 
 /** Options for {@link createTransportPanel}. */
-type CreateTransportPanelOptions = TransportPanelControllerOptions;
+interface CreateTransportPanelOptions extends TransportPanelControllerOptions {
+    /**
+     * Draw the strip yourself — a host that mounts the block AS ITS DECLARATION renders
+     * `TRANSPORT_DECLARATION` from `transportViewState(controller)` here and applies `ui` intents with
+     * `applyTransportUi`. Default: the code view. The RAF pump and the keyboard model stay with the
+     * controller either way: `controller.pump()` while `isAnimating()`, `controller.handleKey()` on the root.
+     */
+    render?: (root: HTMLElement, controller: TransportPanelController) => () => void;
+}
 /**
  * Build the Transport panel module.
  *
@@ -239,8 +247,9 @@ declare const transportManifest: PanelManifest;
  * transport is not moving. That is the whole 60fps-without-streaming trick — no per-frame IPC, no
  * idle wakeups.
  *
- * Monochrome, dense, rectangles with small corner radius, square knobs, no circles, no shadows
- * (DESIGN_SYSTEM §2/§3/§4).
+ * It draws the same model as `TRANSPORT_DECLARATION` (`transportPanelView(transportViewState(c))`);
+ * the declaration test holds the two byte-identical. The scrub gesture arrives from the Slider as a
+ * FRACTION and is mapped to a tick by the controller, exactly as the declaration's `ui` intent is.
  *
  * @module
  */
@@ -251,6 +260,158 @@ interface TransportPanelViewProps {
 }
 declare function TransportPanelView({ controller }: TransportPanelViewProps): ReactElement;
 
+/**
+ * Inline transport glyphs at lucide geometry, **strokeWidth 1.5** (DESIGN_SYSTEM §6). Zero runtime
+ * dependencies — no `lucide-react` import. Shapes are rectangles and triangles only; the record
+ * glyph is a rounded SQUARE, never a circle (§3 "no circles anywhere").
+ *
+ * @module
+ */
+
+interface IconProps {
+    size?: number;
+}
+/** lucide `play` (filled for weight at small sizes). */
+declare function PlayIcon({ size }: IconProps): ReactElement;
+/** lucide `pause`. */
+declare function PauseIcon({ size }: IconProps): ReactElement;
+/** lucide `square` — stop. */
+declare function StopIcon({ size }: IconProps): ReactElement;
+/** Record — a rounded SQUARE (the XENO shape language has no circles). */
+declare function RecordIcon({ size }: IconProps): ReactElement;
+/** lucide `skip-back` — go to start. */
+declare function StartIcon({ size }: IconProps): ReactElement;
+/** lucide `skip-forward` — go to end. */
+declare function EndIcon({ size }: IconProps): ReactElement;
+/** Step one unit back. */
+declare function StepBackIcon({ size }: IconProps): ReactElement;
+/** Step one unit forward. */
+declare function StepForwardIcon({ size }: IconProps): ReactElement;
+/** lucide `rewind` — shuttle reverse. */
+declare function ShuttleLeftIcon({ size }: IconProps): ReactElement;
+/** lucide `fast-forward` — shuttle forward. */
+declare function ShuttleRightIcon({ size }: IconProps): ReactElement;
+/** lucide `repeat` — loop. */
+declare function LoopIcon({ size }: IconProps): ReactElement;
+/** A metronome pendulum. */
+declare function MetronomeIcon({ size }: IconProps): ReactElement;
+/** Play or pause, decided by a prop — one node in a declaration instead of two switched by `when`. */
+declare function PlayPauseIcon({ playing, size }: {
+    playing?: boolean;
+    size?: number;
+}): ReactElement;
+/**
+ * The glyphs by registry name, for a declaration (`transport/PlayIcon`). Block-local until the
+ * elements icon set lands, then these resolve to `icons/*` and this map goes.
+ */
+declare const TRANSPORT_ICONS: {
+    'transport/PlayIcon': typeof PlayIcon;
+    'transport/PauseIcon': typeof PauseIcon;
+    'transport/PlayPauseIcon': typeof PlayPauseIcon;
+    'transport/StopIcon': typeof StopIcon;
+    'transport/RecordIcon': typeof RecordIcon;
+    'transport/StartIcon': typeof StartIcon;
+    'transport/EndIcon': typeof EndIcon;
+    'transport/StepBackIcon': typeof StepBackIcon;
+    'transport/StepForwardIcon': typeof StepForwardIcon;
+    'transport/ShuttleLeftIcon': typeof ShuttleLeftIcon;
+    'transport/ShuttleRightIcon': typeof ShuttleRightIcon;
+    'transport/LoopIcon': typeof LoopIcon;
+    'transport/MetronomeIcon': typeof MetronomeIcon;
+};
+
+/**
+ * The transport strip AS A DECLARATION — the fourth block written the §8d way (auth gate, agent,
+ * account, transport), and the first whose runtime is a real-time controller.
+ *
+ * Presentation contract: input `view` (a {@link TransportViewState} the runtime derives from the
+ * controller on every change and every animation frame), output `ui` (a {@link TransportUiIntent}),
+ * applied by the runtime to the controller's own methods. The declaration holds no state and does no
+ * time maths: the readout, the progress and the ARIA triple arrive already computed, and a scrub is
+ * a FRACTION of the track (the slider owns its geometry; `fractionToTick` stays in the controller).
+ *
+ * The code view (`TransportPanelView`) renders the same model through `transportPanelView`; the
+ * test holds the two byte-identical in every state the controller can be driven into.
+ */
+
+/** What the runtime pushes on `view` — everything the strip shows, already formatted. */
+interface TransportViewState {
+    playing: boolean;
+    recording: boolean;
+    loopEnabled: boolean;
+    metronome: boolean;
+    punch: boolean;
+    bpm: number;
+    show: {
+        shuttle: boolean;
+        record: boolean;
+        loop: boolean;
+        metronome: boolean;
+        punch: boolean;
+        bpm: boolean;
+        inOut: boolean;
+        scrubber: boolean;
+    };
+    readout: string;
+    displayLabel: string;
+    durationReadout: string;
+    progress: number;
+    duration: number;
+    currentTick: number;
+}
+type TransportUiIntent = {
+    kind: 'goToStart';
+} | {
+    kind: 'stepBack';
+} | {
+    kind: 'shuttleBack';
+} | {
+    kind: 'togglePlay';
+} | {
+    kind: 'stop';
+} | {
+    kind: 'shuttleForward';
+} | {
+    kind: 'stepForward';
+} | {
+    kind: 'goToEnd';
+} | {
+    kind: 'record';
+} | {
+    kind: 'toggleLoop';
+} | {
+    kind: 'toggleMetronome';
+} | {
+    kind: 'cycleDisplay';
+} | {
+    kind: 'setTempo';
+    bpm: number;
+} | {
+    kind: 'setIn';
+} | {
+    kind: 'setOut';
+} | {
+    kind: 'scrub';
+    fraction: number;
+    phase: 'begin' | 'move' | 'end' | 'cancel';
+};
+/** Derive the view state from the live controller — the runtime calls this on every draw. */
+declare function transportViewState(c: TransportPanelController): TransportViewState;
+/** Apply a `ui` intent to the controller — the runtime's half of the contract. */
+declare function applyTransportUi(c: TransportPanelController, intent: TransportUiIntent): void;
+declare const transportViewManifest: PanelManifest;
+/** The view model both renderers draw from: the state plus every derived label. */
+interface TransportPanelViewModel extends TransportViewState {
+    stopped: boolean;
+    playLabel: string;
+    positionLabel: string;
+}
+declare function transportPanelView(state: TransportViewState): TransportPanelViewModel;
+declare const BEHAVIOURS: {
+    'time/transportPanelView': (inputs: Record<string, unknown>) => TransportPanelViewModel;
+};
+declare const TRANSPORT_DECLARATION: BlockDeclaration;
+
 /**
  * `XenoTimeScale` — **the only thing in this package that converts between pixels and ticks.**
  *
@@ -2258,4 +2419,4 @@ interface CalendarPanelViewProps {
 /** The Calendar panel view. */
 declare function CalendarPanelView({ controller, firstDayOfWeek, emptyHint, }: CalendarPanelViewProps): ReactNode;
 
-export { ALL_CALENDAR_MODES, type BeginDragOptions, type BuildCellsOptions, CALENDAR_PANEL_ID, CalendarController, type CalendarControllerOptions, type CalendarHostBridge, type CalendarPanelState, CalendarPanelView, type CalendarPanelViewProps, type CalendarRenderContext, 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, 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 TransportPanelViewProps, 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, beginDrag, blitTile, buildCells, buildRowLayout, calendarManifest, calendarPanel, chooseRung, clampScroll, clipDuration, clipsInMarquee, clipsOverlap, collectSnapTargets, commitDrag, computeVisible, createCalendarPanel, createTimelinePanel, createTransportPanel, dayKey, daysInMonth, dedupeByColumn, deriveEvents, edgeZone, 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, trimModeFor, visibleClips, visibleRows, weekStart, wheelZoomFactor, withSnapModifier, zoomAboutCursor, zoomBucket, zoomToFit };
+export { ALL_CALENDAR_MODES, type BeginDragOptions, type BuildCellsOptions, CALENDAR_PANEL_ID, CalendarController, type CalendarControllerOptions, type CalendarHostBridge, type CalendarPanelState, CalendarPanelView, type CalendarPanelViewProps, type CalendarRenderContext, 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 as TRANSPORT_BEHAVIOURS, TRANSPORT_DECLARATION, TRANSPORT_ICONS, 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, applyTransportUi, beginDrag, blitTile, buildCells, buildRowLayout, calendarManifest, calendarPanel, chooseRung, clampScroll, clipDuration, clipsInMarquee, clipsOverlap, collectSnapTargets, commitDrag, computeVisible, createCalendarPanel, createTimelinePanel, createTransportPanel, dayKey, daysInMonth, dedupeByColumn, deriveEvents, edgeZone, 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 };

package/dist/time/index.js

@@ -782,6 +782,209 @@ function ticksPerStep(unit, timebase) {
 import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import { Column, IconButton, NumberInput, Readout, Slider, Stack, TextButton } from "@xenosystem/components/chrome";
 
+// src/time/transport/declaration.ts
+function transportViewState(c) {
+  const state = c.getState();
+  return {
+    playing: c.isPlaying(),
+    recording: !!state.recording,
+    loopEnabled: !!state.loopEnabled,
+    metronome: !!state.metronome,
+    punch: !!state.punch,
+    bpm: state.bpm ?? 120,
+    show: {
+      shuttle: c.showsControl("shuttle"),
+      record: c.showsControl("record"),
+      loop: c.showsControl("loop"),
+      metronome: c.showsControl("metronome"),
+      punch: c.showsControl("punch"),
+      bpm: c.showsControl("bpm"),
+      inOut: c.showsControl("inOut"),
+      scrubber: c.showsControl("scrubber")
+    },
+    readout: c.getReadout(),
+    displayLabel: (0, format_exports.displayLabel)(c.getDisplay()),
+    durationReadout: c.getDurationReadout(),
+    progress: c.getProgress(),
+    duration: c.getDuration(),
+    currentTick: c.getCurrentTick()
+  };
+}
+function applyTransportUi(c, intent) {
+  switch (intent.kind) {
+    case "goToStart":
+      c.goToStart();
+      break;
+    case "stepBack":
+      c.step(-1);
+      break;
+    case "shuttleBack":
+      c.shuttleStep(-1);
+      break;
+    case "togglePlay":
+      c.togglePlay();
+      break;
+    case "stop":
+      c.stop();
+      break;
+    case "shuttleForward":
+      c.shuttleStep(1);
+      break;
+    case "stepForward":
+      c.step(1);
+      break;
+    case "goToEnd":
+      c.goToEnd();
+      break;
+    case "record":
+      c.record();
+      break;
+    case "toggleLoop":
+      c.toggleLoop();
+      break;
+    case "toggleMetronome":
+      c.toggleMetronome();
+      break;
+    case "cycleDisplay":
+      c.cycleDisplay();
+      break;
+    case "setTempo":
+      c.setTempo(intent.bpm);
+      break;
+    case "setIn":
+      c.setInPoint();
+      break;
+    case "setOut":
+      c.setOutPoint();
+      break;
+    case "scrub": {
+      const tick = c.fractionToTick(intent.fraction);
+      if (intent.phase === "begin") c.beginScrub(tick);
+      else if (intent.phase === "move") c.updateScrub(tick);
+      else if (intent.phase === "end") c.endScrub();
+      else c.cancelScrub();
+      break;
+    }
+  }
+}
+var transportViewManifest = {
+  id: transportManifest.id,
+  version: "1.0.0",
+  title: "Transport",
+  category: "time",
+  layout: { slot: "bottom" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The TransportViewState the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, bpm?, fraction?, phase? } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+function transportPanelView(state) {
+  return {
+    ...state,
+    stopped: !state.playing,
+    playLabel: state.playing ? "Pause (Space)" : "Play (Space)",
+    positionLabel: `Position ${state.readout}`
+  };
+}
+var EMPTY = {
+  playing: false,
+  recording: false,
+  loopEnabled: false,
+  metronome: false,
+  punch: false,
+  bpm: 120,
+  show: { shuttle: false, record: false, loop: false, metronome: false, punch: false, bpm: false, inOut: false, scrubber: true },
+  readout: "",
+  displayLabel: "",
+  durationReadout: "",
+  progress: 0,
+  duration: 0,
+  currentTick: 0
+};
+var BEHAVIOURS = {
+  "time/transportPanelView": (inputs) => transportPanelView(inputs.view ?? EMPTY)
+};
+var ui = (kind) => ({ emit: "ui", value: { object: { kind: { value: kind } } } });
+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 ?? {} },
+  on: { onClick: ui(kind) }
+});
+var TRANSPORT_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: transportViewManifest,
+  behaviour: "time/transportPanelView",
+  composition: {
+    component: "chrome/Column",
+    props: { className: { value: "xeno-transport-panel" }, tabIndex: { value: 0 }, role: { value: "group" }, "aria-label": { value: "Transport" } },
+    children: [
+      {
+        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" } }),
+          {
+            component: "chrome/IconButton",
+            props: {
+              size: { value: "sm" },
+              variant: { value: "primary" },
+              icon: { node: { component: "transport/PlayPauseIcon", 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" } } }),
+          { component: "chrome/TextButton", when: { input: "view.show.punch" }, props: { strong: { input: "view.punch" } }, children: [text({ value: "PUNCH" })] },
+          {
+            component: "chrome/Readout",
+            props: { value: { input: "view.readout" }, unit: { input: "view.displayLabel" }, label: { input: "view.positionLabel" }, title: { value: "Click to change time display" } },
+            on: { onClick: ui("cycleDisplay") }
+          },
+          { component: "chrome/Readout", props: { size: { value: "sm" }, value: { input: "view.durationReadout" } } },
+          {
+            component: "chrome/NumberInput",
+            when: { input: "view.show.bpm" },
+            props: { caption: { value: "BPM" }, label: { value: "Tempo" }, value: { input: "view.bpm" } },
+            on: { onChange: { emit: "ui", value: { object: { kind: { value: "setTempo" }, bpm: { arg: "" } } } } }
+          },
+          {
+            component: "chrome/Stack",
+            when: { input: "view.show.inOut" },
+            props: { direction: { value: "row" }, gap: { value: 2 }, pad: { value: "none" } },
+            children: [
+              { component: "chrome/TextButton", on: { onClick: ui("setIn") }, children: [text({ value: "IN" })] },
+              { component: "chrome/TextButton", on: { onClick: ui("setOut") }, children: [text({ value: "OUT" })] }
+            ]
+          }
+        ]
+      },
+      {
+        component: "chrome/Slider",
+        when: { input: "view.show.scrubber" },
+        props: {
+          progress: { input: "view.progress" },
+          label: { value: "Playhead" },
+          valueMin: { value: 0 },
+          valueMax: { input: "view.duration" },
+          valueNow: { input: "view.currentTick" },
+          valueText: { input: "view.readout" }
+        },
+        on: { onScrub: { emit: "ui", value: { object: { kind: { value: "scrub" }, fraction: { arg: "" }, phase: { arg: "", index: 1 } } } } }
+      }
+    ]
+  }
+};
+
 // src/time/transport/react/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var base = (size) => ({
@@ -854,6 +1057,24 @@ function MetronomeIcon({ size = 11 }) {
     /* @__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
+};
 
 // src/time/transport/react/TransportPanelView.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -879,40 +1100,8 @@ function TransportPanelView({ controller }) {
       rafRef.current = null;
     };
   }, [controller, animating]);
-  const playing = controller.isPlaying();
-  const state = controller.getState();
-  const tickFromPointer = useCallback(
-    (clientX) => {
-      const el = scrubRef.current;
-      if (!el) return 0;
-      const rect = el.getBoundingClientRect();
-      return controller.fractionToTick(rect.width > 0 ? (clientX - rect.left) / rect.width : 0);
-    },
-    [controller]
-  );
-  const onScrubDown = useCallback(
-    (e) => {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      controller.beginScrub(tickFromPointer(e.clientX));
-    },
-    [controller, tickFromPointer]
-  );
-  const onScrubMove = useCallback(
-    (e) => {
-      if (controller.isScrubbing()) controller.updateScrub(tickFromPointer(e.clientX));
-    },
-    [controller, tickFromPointer]
-  );
-  const onScrubUp = useCallback(
-    (e) => {
-      try {
-        e.currentTarget.releasePointerCapture(e.pointerId);
-      } catch {
-      }
-      controller.endScrub();
-    },
-    [controller]
-  );
+  const view = transportPanelView(transportViewState(controller));
+  const scrub = useCallback((fraction, phase) => applyTransportUi(controller, { kind: "scrub", fraction, phase }), [controller]);
   const onKeyDown = useCallback(
     (e) => {
       if (controller.handleKey({ key: e.key, ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey }, "down")) {
@@ -941,59 +1130,25 @@ function TransportPanelView({ controller }) {
         /* @__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) }),
-          controller.showsControl("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: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {}),
-              label: playing ? "Pause (Space)" : "Play (Space)",
-              active: playing,
-              onClick: () => controller.togglePlay()
-            }
-          ),
+          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() }),
-          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}), label: "Shuttle forward (L)", onClick: () => controller.shuttleStep(1) }),
+          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() }),
-          controller.showsControl("record") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", variant: "danger", icon: /* @__PURE__ */ jsx2(RecordIcon, {}), label: "Record", active: !!state.recording, onClick: () => controller.record() }),
-          controller.showsControl("loop") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LoopIcon, {}), label: "Loop", active: !!state.loopEnabled, onClick: () => controller.toggleLoop() }),
-          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(MetronomeIcon, {}), label: "Metronome", active: !!state.metronome, onClick: () => controller.toggleMetronome() }),
-          controller.showsControl("punch") && /* @__PURE__ */ jsx2(TextButton, { strong: !!state.punch, children: "PUNCH" }),
-          /* @__PURE__ */ jsx2(
-            Readout,
-            {
-              value: controller.getReadout(),
-              unit: (0, format_exports.displayLabel)(controller.getDisplay()),
-              label: `Position ${controller.getReadout()}`,
-              title: "Click to change time display",
-              onClick: () => controller.cycleDisplay()
-            }
-          ),
-          /* @__PURE__ */ jsx2(Readout, { size: "sm", value: controller.getDurationReadout() }),
-          controller.showsControl("bpm") && /* @__PURE__ */ jsx2(NumberInput, { caption: "BPM", label: "Tempo", value: state.bpm ?? 120, onChange: (bpm) => controller.setTempo(bpm) }),
-          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 2, pad: "none", children: [
+          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" })
           ] })
         ] }),
-        controller.showsControl("scrubber") && /* @__PURE__ */ jsx2(
-          Slider,
-          {
-            trackRef: scrubRef,
-            progress: controller.getProgress(),
-            label: "Playhead",
-            valueMin: 0,
-            valueMax: controller.getDuration(),
-            valueNow: controller.getCurrentTick(),
-            valueText: controller.getReadout(),
-            onPointerDown: onScrubDown,
-            onPointerMove: onScrubMove,
-            onPointerUp: onScrubUp,
-            onPointerCancel: () => controller.cancelScrub()
-          }
-        )
+        view.show.scrubber && /* @__PURE__ */ jsx2(Slider, { progress: view.progress, label: "Playhead", valueMin: 0, valueMax: view.duration, valueNow: view.currentTick, valueText: view.readout, onScrub: scrub })
       ]
     }
   );
@@ -1004,11 +1159,20 @@ function createTransportPanel(options = {}) {
   return {
     manifest: transportManifest,
     activate(host) {
-      const controller = new TransportPanelController(host, options);
+      const { render: customRender, ...controllerOptions } = options;
+      const controller = new TransportPanelController(host, controllerOptions);
       void controller.load();
       let root = null;
+      let unrender = null;
       return {
         render(el) {
+          if (customRender) {
+            unrender = customRender(el, controller);
+            return () => {
+              unrender?.();
+              unrender = null;
+            };
+          }
           root = createRoot(el);
           root.render(createElement(TransportPanelView, { controller }));
           return () => {
@@ -1031,6 +1195,8 @@ function createTransportPanel(options = {}) {
         dispose() {
           root?.unmount();
           root = null;
+          unrender?.();
+          unrender = null;
           controller.dispose();
         }
       };
@@ -3338,10 +3504,10 @@ function gridStart(monthKey, firstDayOfWeek) {
   return addDays(first, -offset);
 }
 function statusTone(value) {
-  const text = String(value ?? "").toLowerCase();
-  if (/done|complete|published|paid|ok/.test(text)) return "success";
-  if (/pending|draft|scheduled|review/.test(text)) return "warning";
-  if (/fail|error|cancel|reject|overdue/.test(text)) return "error";
+  const text2 = String(value ?? "").toLowerCase();
+  if (/done|complete|published|paid|ok/.test(text2)) return "success";
+  if (/pending|draft|scheduled|review/.test(text2)) return "warning";
+  if (/fail|error|cancel|reject|overdue/.test(text2)) return "error";
   return "neutral";
 }
 function columnMap(result) {
@@ -4403,6 +4569,9 @@ export {
   MIN_MAJOR_PX,
   MIN_MINOR_PX,
   TIMELINE_PANEL_ID,
+  BEHAVIOURS as TRANSPORT_BEHAVIOURS,
+  TRANSPORT_DECLARATION,
+  TRANSPORT_ICONS,
   TRIM_SNAP_PX,
   TimelineController,
   TimelinePanelView,
@@ -4413,6 +4582,7 @@ export {
   addDays,
   addMonths,
   alignToTileGrid,
+  applyTransportUi,
   beginDrag,
   blitTile,
   buildCells,
@@ -4483,6 +4653,9 @@ export {
   todayKey,
   transportManifest,
   transportPanel,
+  transportPanelView,
+  transportViewManifest,
+  transportViewState,
   trimModeFor,
   visibleClips,
   visibleRows,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.11.6",
+  "version": "0.12.1",
   "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",
@@ -59,8 +59,8 @@
   },
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
-    "@xenosystem/block-sdk": "^0.3.0",
-    "@xenosystem/components": ">=0.15.0 <1",
+    "@xenosystem/block-sdk": ">=0.3.2 <1",
+    "@xenosystem/components": ">=0.16.0 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": ">=0.0.1",
     "@xenosystem/time-core": "^0.1.0",
@@ -75,8 +75,8 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@xenosystem/block-sdk": "^0.3.1",
-    "@xenosystem/components": "^0.15.0",
+    "@xenosystem/block-sdk": "^0.3.2",
+    "@xenosystem/components": "^0.16.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": "0.0.1",
     "@xenosystem/time-core": "^0.1.0",