@xenosystem/blocks 0.4.0 → 0.5.0

package/dist/time/index.js

@@ -0,0 +1,4658 @@
+import {
+  __reExport
+} from "../chunk-2KG3PWR4.js";
+
+// src/time/transport/panel.ts
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/time/transport/manifest.ts
+import { WELL_KNOWN_PORT_SCHEMAS } from "@xenosystem/panel-sdk";
+var transportManifest = {
+  id: "xeno.core.transport",
+  version: "0.1.0",
+  title: "Transport",
+  icon: "play",
+  description: "Playback transport: play/pause/stop/record, seek and scrub, shuttle, loop and in/out points, with a dead-reckoned 60fps playhead readout in frames, timecode, seconds or bars. Emits intents; the host owns the clock.",
+  author: "XENO Core",
+  defaultSlot: "bottom",
+  inputs: [
+    {
+      id: "clock",
+      name: "Playhead Clock",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.PLAYHEAD_CLOCK,
+      description: "XenoPlayheadClock { playing, originTick, originTime, rateTicksPerSecond, loop? }. Push at 2\u201310 Hz AND immediately whenever playing/rate/loop changes; the panel extrapolates 60fps between pushes."
+    },
+    {
+      id: "timebase",
+      name: "Timebase",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.TIMEBASE,
+      description: "XenoTimebase { ticksPerSecond, display, fps?, dropFrame?, bpm?, timeSignature?, tempoMap?, displayOrigin? }. Only ticksPerSecond affects geometry; the rest is formatting."
+    },
+    {
+      id: "duration",
+      name: "Duration",
+      type: "number",
+      description: "Total length in ticks. Read LIVE on every frame so the playhead clamps to a document that shortens."
+    },
+    {
+      id: "state",
+      name: "Transport State",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.TRANSPORT_STATE,
+      description: "{ recording?, armed?, metronome?, loopEnabled?, punch?, preroll?, bpm? } \u2014 an ABSENT key hides its control (the auto-hide rule)."
+    }
+  ],
+  outputs: [
+    {
+      id: "intent",
+      name: "Intent",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.TRANSPORT_INTENT,
+      description: "XenoTransportIntent \u2014 play/pause/toggle/stop/record/seek/step/shuttle/goToStart/goToEnd/setLoop/setInOut/setMetronome/setTempo. The ONLY output that changes anything."
+    },
+    {
+      id: "seekPreview",
+      name: "Seek (live)",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS.TRANSPORT_INTENT,
+      description: "{ tick } while scrubbing (throttled). NOT a commit \u2014 the terminal seek arrives on `intent`."
+    }
+  ],
+  commands: [
+    { id: "play", title: "Play", description: "Start playback.", parameters: {}, shortcut: "Space" },
+    { id: "pause", title: "Pause", description: "Pause playback.", parameters: {} },
+    { id: "toggle_play", title: "Play / Pause", description: "Toggle playback.", parameters: {} },
+    { id: "stop", title: "Stop", description: "Stop and return per host policy.", parameters: {} },
+    { id: "record", title: "Record", description: "Start or stop recording.", parameters: {
+      recording: { type: "boolean", description: "true starts, false stops" }
+    } },
+    { id: "seek", title: "Seek", description: "Move the playhead to a tick.", parameters: {
+      tick: { type: "number", description: "Target tick (integer)", required: true }
+    } },
+    { id: "step_forward", title: "Step Forward", description: "Step forward.", parameters: {
+      amount: { type: "number", description: "How many units (default 1)" },
+      unit: { type: "string", description: "frame | second | bar | marker" }
+    } },
+    { id: "step_backward", title: "Step Backward", description: "Step backward.", parameters: {
+      amount: { type: "number", description: "How many units (default 1)" },
+      unit: { type: "string", description: "frame | second | bar | marker" }
+    } },
+    { id: "go_to_start", title: "Go To Start", description: "Jump to the beginning.", parameters: {} },
+    { id: "go_to_end", title: "Go To End", description: "Jump to the end.", parameters: {} },
+    { id: "shuttle", title: "Shuttle", description: "Set the shuttle rate (\xD7 normal speed; negative reverses).", parameters: {
+      rate: { type: "number", description: "Rate multiplier", required: true }
+    } },
+    { id: "set_loop", title: "Set Loop", description: "Set the loop range.", parameters: {
+      startTick: { type: "number", description: "Loop start" },
+      endTick: { type: "number", description: "Loop end" },
+      enabled: { type: "boolean", description: "Enable the loop" }
+    } },
+    { id: "toggle_loop", title: "Toggle Loop", description: "Enable/disable looping.", parameters: {} },
+    { id: "set_in_point", title: "Set In Point", description: "Set the in point at the playhead (or a tick).", parameters: {
+      tick: { type: "number", description: "Tick (defaults to the playhead)" }
+    } },
+    { id: "set_out_point", title: "Set Out Point", description: "Set the out point at the playhead (or a tick).", parameters: {
+      tick: { type: "number", description: "Tick (defaults to the playhead)" }
+    } },
+    { id: "clear_in_out", title: "Clear In/Out", description: "Clear the in and out points.", parameters: {} },
+    { id: "set_tempo", title: "Set Tempo", description: "Set the tempo in BPM.", parameters: {
+      bpm: { type: "number", description: "Quarter-notes per minute", required: true }
+    } },
+    { id: "toggle_metronome", title: "Toggle Metronome", description: "Enable/disable the metronome.", parameters: {} },
+    { id: "set_time_display", title: "Set Time Display", description: "Switch the readout unit.", parameters: {
+      display: { type: "string", description: "frames | timecode | seconds | bars", required: true }
+    } }
+  ],
+  config: [
+    {
+      key: "display",
+      label: "Time display",
+      type: "select",
+      defaultValue: "",
+      options: [
+        { label: "From timebase", value: "" },
+        { label: "Timecode", value: "timecode" },
+        { label: "Frames", value: "frames" },
+        { label: "Seconds", value: "seconds" },
+        { label: "Bars & beats", value: "bars" }
+      ],
+      description: "Override the timebase display unit. Empty = follow the host timebase."
+    },
+    { key: "clickReadoutCycles", label: "Click readout to cycle units", type: "boolean", defaultValue: true },
+    { key: "showRecord", label: "Record button", type: "boolean", defaultValue: true, description: "Also requires `state.recording` to be present." },
+    { key: "showLoop", label: "Loop button", type: "boolean", defaultValue: true },
+    { key: "showMetronome", label: "Metronome button", type: "boolean", defaultValue: true },
+    { key: "showPunch", label: "Punch button", type: "boolean", defaultValue: true },
+    { key: "showPreroll", label: "Pre-roll control", type: "boolean", defaultValue: true },
+    { key: "showBpm", label: "BPM control", type: "boolean", defaultValue: true },
+    { key: "showShuttle", label: "Shuttle controls", type: "boolean", defaultValue: true },
+    { key: "showScrubber", label: "Seek scrubber", type: "boolean", defaultValue: true },
+    { key: "showInOut", label: "In / out points", type: "boolean", defaultValue: true },
+    {
+      key: "shuttleRates",
+      label: "Shuttle rates",
+      type: "json",
+      defaultValue: [1, 2, 4, 8],
+      description: "Speed multipliers cycled by the shuttle buttons; negated for reverse."
+    },
+    {
+      key: "jklShuttle",
+      label: "J/K/L shuttle",
+      type: "boolean",
+      defaultValue: true,
+      description: "Motion/Resolve keyboard shuttle: J reverse, K pause, L forward, K+J / K+L nudge."
+    },
+    { key: "stepUnit", label: "Step unit", type: "select", defaultValue: "frame", options: [
+      { label: "Frame", value: "frame" },
+      { label: "Second", value: "second" },
+      { label: "Bar", value: "bar" },
+      { label: "Marker", value: "marker" }
+    ] },
+    { key: "seekThrottleMs", label: "Scrub throttle (ms)", type: "number", defaultValue: 16 }
+  ],
+  capabilities: ["storage.local"],
+  sdk: "^1.0.0",
+  trust: "trusted"
+};
+
+// src/time/transport/types.ts
+var types_exports = {};
+__reExport(types_exports, time_core_star);
+import * as time_core_star from "@xenosystem/time-core";
+
+// src/time/transport/clock.ts
+var clock_exports = {};
+__reExport(clock_exports, time_core_star2);
+import * as time_core_star2 from "@xenosystem/time-core";
+
+// src/time/transport/format.ts
+var format_exports = {};
+__reExport(format_exports, time_core_star3);
+import * as time_core_star3 from "@xenosystem/time-core";
+
+// src/time/transport/throttle.ts
+var throttle_exports = {};
+__reExport(throttle_exports, time_core_star4);
+import * as time_core_star4 from "@xenosystem/time-core";
+
+// src/time/transport/controller.ts
+var STORAGE_DISPLAY = "display";
+var asString = (v, fallback) => typeof v === "string" ? v : fallback;
+var asNumber = (v, fallback) => typeof v === "number" && Number.isFinite(v) ? v : fallback;
+var asBool = (v, fallback) => typeof v === "boolean" ? v : fallback;
+var TransportPanelController = class {
+  host;
+  nowFn;
+  seekThrottle;
+  // ── Host-owned inputs ─────────────────────────────────────────────────────
+  clock = types_exports.IDLE_CLOCK;
+  timebase = types_exports.DEFAULT_TIMEBASE;
+  durationTicks = 0;
+  state = {};
+  // ── View state ────────────────────────────────────────────────────────────
+  displayOverride = null;
+  scrubbing = false;
+  scrubTick = 0;
+  shuttleIndex = 0;
+  lastRenderedTick = -1;
+  /** J/K/L: `true` while K is held (K+J / K+L are nudges, not shuttles). */
+  kHeld = false;
+  // ── Config ────────────────────────────────────────────────────────────────
+  configDisplay = null;
+  clickReadoutCycles = true;
+  showRecord = true;
+  showLoop = true;
+  showMetronome = true;
+  showPunch = true;
+  showPreroll = true;
+  showBpm = true;
+  showShuttle = true;
+  showScrubber = true;
+  showInOut = true;
+  shuttleRates = [1, 2, 4, 8];
+  jklShuttle = true;
+  stepUnit = "frame";
+  revision = 0;
+  disposed = false;
+  listeners = /* @__PURE__ */ new Set();
+  unsubConfig = null;
+  constructor(host, options = {}) {
+    this.host = host;
+    this.nowFn = options.now ?? (() => {
+      const perf = globalThis.performance;
+      return perf ? perf.now() : Date.now();
+    });
+    this.readConfig();
+    this.seekThrottle = (0, throttle_exports.createThrottle)(
+      (tick) => this.host.emit("seekPreview", { tick }),
+      Math.max(0, asNumber(host.config.seekThrottleMs, 16)),
+      options.throttleClock
+    );
+    this.unsubConfig = host.onConfigChange(() => {
+      this.readConfig();
+      this.notify();
+    });
+  }
+  /** Load the persisted display-unit preference. */
+  async load() {
+    try {
+      const stored = await this.host.storage.get(STORAGE_DISPLAY);
+      if (stored && format_exports.DISPLAY_CYCLE.includes(stored)) {
+        this.displayOverride = stored;
+        this.notify();
+      }
+    } catch (err) {
+      this.host.log("warn", "transport: failed to load persisted display unit", err);
+    }
+  }
+  readConfig() {
+    const cfg = this.host.config;
+    const display = asString(cfg.display, "");
+    this.configDisplay = format_exports.DISPLAY_CYCLE.includes(display) ? display : null;
+    this.clickReadoutCycles = asBool(cfg.clickReadoutCycles, true);
+    this.showRecord = asBool(cfg.showRecord, true);
+    this.showLoop = asBool(cfg.showLoop, true);
+    this.showMetronome = asBool(cfg.showMetronome, true);
+    this.showPunch = asBool(cfg.showPunch, true);
+    this.showPreroll = asBool(cfg.showPreroll, true);
+    this.showBpm = asBool(cfg.showBpm, true);
+    this.showShuttle = asBool(cfg.showShuttle, true);
+    this.showScrubber = asBool(cfg.showScrubber, true);
+    this.showInOut = asBool(cfg.showInOut, true);
+    const rates = Array.isArray(cfg.shuttleRates) ? cfg.shuttleRates.filter((r) => typeof r === "number" && r > 0) : [];
+    this.shuttleRates = rates.length > 0 ? rates : [1, 2, 4, 8];
+    this.jklShuttle = asBool(cfg.jklShuttle, true);
+    const unit = asString(cfg.stepUnit, "frame");
+    this.stepUnit = unit === "second" || unit === "bar" || unit === "marker" ? unit : "frame";
+  }
+  // ── Inputs ────────────────────────────────────────────────────────────────
+  /** Accept a clock push. Each push SNAPS the extrapolation to host truth. */
+  setClock(input) {
+    const next = (0, types_exports.normalizeClock)(input);
+    if (!next) {
+      this.host.log("warn", "transport: ignored an invalid clock input");
+      return;
+    }
+    this.clock = next;
+    this.lastRenderedTick = -1;
+    this.notify();
+  }
+  /** Accept a timebase push. */
+  setTimebase(input) {
+    const next = (0, types_exports.normalizeTimebase)(input);
+    if (!next) {
+      this.host.log("warn", "transport: ignored an invalid timebase input");
+      return;
+    }
+    this.timebase = next;
+    this.notify();
+  }
+  /** Accept the live duration (ticks). */
+  setDuration(input) {
+    this.durationTicks = Math.max(0, (0, types_exports.toTick)(asNumber(input, 0)));
+    this.notify();
+  }
+  /** Accept the transport state. Absent keys hide their controls. */
+  setState(input) {
+    this.state = input && typeof input === "object" ? input : {};
+    this.notify();
+  }
+  /** The current clock (host truth, not the extrapolation). */
+  getClock() {
+    return this.clock;
+  }
+  /** The current timebase. */
+  getTimebase() {
+    return this.timebase;
+  }
+  /** The live duration in ticks. */
+  getDuration() {
+    return this.durationTicks;
+  }
+  /** The transport state. */
+  getState() {
+    return this.state;
+  }
+  /** `playing` is HOST-authoritative — the panel only reports it. */
+  isPlaying() {
+    return this.clock.playing;
+  }
+  /** Whether the display should keep animating (a moving playhead only). */
+  isAnimating() {
+    return (0, clock_exports.isAnimating)(this.clock) && !this.scrubbing;
+  }
+  // ── The extrapolated playhead ─────────────────────────────────────────────
+  /**
+   * The tick to display right now: the scrub position while scrubbing, else the dead-reckoned
+   * extrapolation, always clamped against the LIVE duration.
+   */
+  getCurrentTick() {
+    if (this.scrubbing) return (0, types_exports.clampTick)(this.scrubTick, this.durationTicks);
+    return (0, clock_exports.extrapolateTick)({
+      clock: this.clock,
+      now: this.nowFn(),
+      durationTicks: this.durationTicks
+    });
+  }
+  /**
+   * Advance the display. The view calls this each animation frame; it notifies **only when the
+   * integer tick actually changed**, so a paused transport or a sub-tick frame costs nothing.
+   *
+   * @returns `true` if listeners were notified.
+   */
+  pump() {
+    const tick = this.getCurrentTick();
+    if (tick === this.lastRenderedTick) return false;
+    this.lastRenderedTick = tick;
+    this.notify();
+    return true;
+  }
+  /** The formatted readout for the current position. */
+  getReadout() {
+    return (0, format_exports.formatTick)(this.getCurrentTick(), this.timebase, this.getDisplay());
+  }
+  /** The formatted duration. */
+  getDurationReadout() {
+    return (0, format_exports.formatTick)(this.durationTicks, this.timebase, this.getDisplay());
+  }
+  /** Playback progress `0..1` (0 when the duration is unknown). */
+  getProgress() {
+    if (this.durationTicks <= 0) return 0;
+    return Math.min(1, Math.max(0, this.getCurrentTick() / this.durationTicks));
+  }
+  // ── Display unit ──────────────────────────────────────────────────────────
+  /** The effective display unit: panel override → config → the host timebase. */
+  getDisplay() {
+    return this.displayOverride ?? this.configDisplay ?? this.timebase.display;
+  }
+  /** Set the display unit (persisted). */
+  async setDisplay(display) {
+    if (!format_exports.DISPLAY_CYCLE.includes(display)) return;
+    this.displayOverride = display;
+    try {
+      await this.host.storage.set(STORAGE_DISPLAY, display);
+    } catch (err) {
+      this.host.log("warn", "transport: failed to persist display unit", err);
+    }
+    this.notify();
+  }
+  /** Cycle to the next display unit (the readout click). */
+  cycleDisplay() {
+    if (!this.clickReadoutCycles) return;
+    void this.setDisplay((0, format_exports.nextDisplay)(this.getDisplay()));
+  }
+  // ── Intents (the ONLY mutation channel) ───────────────────────────────────
+  emit(intent) {
+    this.host.emit("intent", intent);
+  }
+  /** Start playback. */
+  play() {
+    this.emit({ kind: "play" });
+  }
+  /** Pause playback. */
+  pause() {
+    this.emit({ kind: "pause" });
+  }
+  /** Toggle playback. The host decides — the panel never flips `playing` itself. */
+  togglePlay() {
+    this.emit({ kind: "toggle" });
+  }
+  /** Stop (the host decides whether that returns to start). */
+  stop() {
+    this.shuttleIndex = 0;
+    this.emit({ kind: "stop" });
+  }
+  /** Start/stop recording. */
+  record(recording) {
+    this.emit({ kind: "record", recording: recording ?? !this.state.recording });
+  }
+  /** Seek to a tick (clamped to the live duration). */
+  seek(tick) {
+    this.emit({ kind: "seek", tick: (0, types_exports.clampTick)(tick, this.durationTicks) });
+  }
+  /** Step by whole units. */
+  step(delta, unit) {
+    const amount = Number.isFinite(delta) ? Math.trunc(delta) : 0;
+    if (amount === 0) return;
+    this.emit({ kind: "step", delta: amount, unit: unit ?? this.stepUnit });
+  }
+  /** Jump to the start. */
+  goToStart() {
+    this.emit({ kind: "goToStart" });
+  }
+  /** Jump to the end. */
+  goToEnd() {
+    this.emit({ kind: "goToEnd" });
+  }
+  /** Set the shuttle rate directly (negative reverses). */
+  shuttle(rate) {
+    if (!Number.isFinite(rate)) return;
+    this.emit({ kind: "shuttle", rate });
+  }
+  /** The configured shuttle rates. */
+  getShuttleRates() {
+    return this.shuttleRates;
+  }
+  /**
+   * Step through the shuttle rates in a direction — the classic J/L behaviour: each press moves one
+   * notch up the ladder, crossing zero to reverse.
+   *
+   * @param direction - `+1` faster forward, `-1` faster reverse.
+   * @returns The rate emitted.
+   */
+  shuttleStep(direction) {
+    const dir = direction >= 0 ? 1 : -1;
+    const max = this.shuttleRates.length;
+    const next = Math.max(-max, Math.min(max, this.shuttleIndex + dir));
+    this.shuttleIndex = next;
+    const rate = next === 0 ? 0 : Math.sign(next) * (this.shuttleRates[Math.abs(next) - 1] ?? 1);
+    this.shuttle(rate);
+    return rate;
+  }
+  /** The current shuttle ladder position (0 = stopped). */
+  getShuttleIndex() {
+    return this.shuttleIndex;
+  }
+  /** Set (or clear) the loop range. */
+  setLoop(loop) {
+    this.emit({ kind: "setLoop", loop });
+  }
+  /** Toggle looping, preserving the existing range. */
+  toggleLoop() {
+    const loop = this.clock.loop;
+    if (!loop) {
+      this.emit({ kind: "setLoop", loop: null });
+      return;
+    }
+    this.emit({ kind: "setLoop", loop: { ...loop, enabled: loop.enabled === false } });
+  }
+  /** Set the in point (defaults to the playhead). */
+  setInPoint(tick) {
+    const inTick = (0, types_exports.clampTick)(tick ?? this.getCurrentTick(), this.durationTicks);
+    this.emit({ kind: "setInOut", inTick, outTick: this.clock.loop?.endTick ?? null });
+  }
+  /** Set the out point (defaults to the playhead). */
+  setOutPoint(tick) {
+    const outTick = (0, types_exports.clampTick)(tick ?? this.getCurrentTick(), this.durationTicks);
+    this.emit({ kind: "setInOut", inTick: this.clock.loop?.startTick ?? null, outTick });
+  }
+  /** Clear both in/out points. */
+  clearInOut() {
+    this.emit({ kind: "setInOut", inTick: null, outTick: null });
+  }
+  /** Toggle the metronome. */
+  toggleMetronome() {
+    this.emit({ kind: "setMetronome", enabled: !this.state.metronome });
+  }
+  /** Set the tempo. */
+  setTempo(bpm) {
+    if (!Number.isFinite(bpm) || bpm <= 0) return;
+    this.emit({ kind: "setTempo", bpm });
+  }
+  // ── Scrubbing (preview → commit) ──────────────────────────────────────────
+  /** Whether a scrub is in progress. */
+  isScrubbing() {
+    return this.scrubbing;
+  }
+  /** Begin a scrub at a tick. */
+  beginScrub(tick) {
+    this.scrubbing = true;
+    this.scrubTick = (0, types_exports.clampTick)(tick, this.durationTicks);
+    this.notify();
+  }
+  /** Update the scrub — emits a throttled `seekPreview`, never a commit. */
+  updateScrub(tick) {
+    if (!this.scrubbing) return;
+    this.scrubTick = (0, types_exports.clampTick)(tick, this.durationTicks);
+    this.seekThrottle.call(this.scrubTick);
+    this.notify();
+  }
+  /** Finish the scrub — flushes the preview and commits ONE `seek` intent. */
+  endScrub() {
+    if (!this.scrubbing) return;
+    this.scrubbing = false;
+    this.seekThrottle.cancel();
+    this.seek(this.scrubTick);
+    this.notify();
+  }
+  /** Abandon the scrub without seeking. */
+  cancelScrub() {
+    if (!this.scrubbing) return;
+    this.scrubbing = false;
+    this.seekThrottle.cancel();
+    this.notify();
+  }
+  /** Convert a scrubber fraction `0..1` to a tick. */
+  fractionToTick(fraction) {
+    const f = Math.min(1, Math.max(0, Number.isFinite(fraction) ? fraction : 0));
+    return (0, types_exports.clampTick)(Math.round(f * this.durationTicks), this.durationTicks);
+  }
+  // ── Control visibility (the auto-hide rule) ───────────────────────────────
+  /** Whether a control renders: its config flag AND the host declaring the state key. */
+  showsControl(control) {
+    switch (control) {
+      case "record":
+        return this.showRecord && this.state.recording !== void 0;
+      case "loop":
+        return this.showLoop && this.state.loopEnabled !== void 0;
+      case "metronome":
+        return this.showMetronome && this.state.metronome !== void 0;
+      case "punch":
+        return this.showPunch && this.state.punch !== void 0;
+      case "preroll":
+        return this.showPreroll && this.state.preroll !== void 0;
+      case "bpm":
+        return this.showBpm && this.state.bpm !== void 0;
+      case "shuttle":
+        return this.showShuttle;
+      case "scrubber":
+        return this.showScrubber;
+      case "inOut":
+        return this.showInOut;
+      default:
+        return false;
+    }
+  }
+  // ── Keyboard (incl. J/K/L shuttle) ────────────────────────────────────────
+  /**
+   * Handle a key. Returns `true` when consumed.
+   *
+   * Space toggles; Home/End jump; ←/→ step; and with `jklShuttle` on, J/K/L drive the Motion /
+   * Resolve shuttle — **K held + J or L nudges one frame** instead of shuttling.
+   */
+  handleKey(event, phase = "down") {
+    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+    if (phase === "up") {
+      if (this.jklShuttle && key === "k") {
+        this.kHeld = false;
+        return true;
+      }
+      return false;
+    }
+    if (event.ctrl || event.meta) return false;
+    switch (key) {
+      case " ":
+      case "Spacebar":
+        this.togglePlay();
+        return true;
+      case "Home":
+        this.goToStart();
+        return true;
+      case "End":
+        this.goToEnd();
+        return true;
+      case "ArrowLeft":
+        this.step(-1, event.shift ? "second" : void 0);
+        return true;
+      case "ArrowRight":
+        this.step(1, event.shift ? "second" : void 0);
+        return true;
+      default:
+        break;
+    }
+    if (!this.jklShuttle) return false;
+    switch (key) {
+      case "j":
+        if (this.kHeld) this.step(-1, "frame");
+        else this.shuttleStep(-1);
+        return true;
+      case "k":
+        this.kHeld = true;
+        this.shuttleIndex = 0;
+        this.shuttle(0);
+        return true;
+      case "l":
+        if (this.kHeld) this.step(1, "frame");
+        else this.shuttleStep(1);
+        return true;
+      default:
+        return false;
+    }
+  }
+  /** Whether K is currently held (the J/K/L nudge modifier). */
+  isKHeld() {
+    return this.kHeld;
+  }
+  // ── Host onInput / onCommand routing ──────────────────────────────────────
+  /** Route a host `onInput(id, value)` call. */
+  onInput(id, value) {
+    switch (id) {
+      case "clock":
+        this.setClock(value);
+        break;
+      case "timebase":
+        this.setTimebase(value);
+        break;
+      case "duration":
+        this.setDuration(value);
+        break;
+      case "state":
+        this.setState(value);
+        break;
+      default:
+        break;
+    }
+  }
+  /** Route a host `onCommand(id, params)` call. */
+  async onCommand(id, params) {
+    switch (id) {
+      case "play":
+        this.play();
+        return { ok: true };
+      case "pause":
+        this.pause();
+        return { ok: true };
+      case "toggle_play":
+        this.togglePlay();
+        return { ok: true };
+      case "stop":
+        this.stop();
+        return { ok: true };
+      case "record":
+        this.record(typeof params.recording === "boolean" ? params.recording : void 0);
+        return { ok: true };
+      case "seek": {
+        const tick = asNumber(params.tick, Number.NaN);
+        if (!Number.isFinite(tick)) throw new Error("seek: `tick` must be a number");
+        this.seek((0, types_exports.toTick)(tick));
+        return { ok: true, tick: (0, types_exports.clampTick)(tick, this.durationTicks) };
+      }
+      case "step_forward":
+      case "step_backward": {
+        const amount = Math.max(1, Math.trunc(asNumber(params.amount, 1)));
+        const unit = asString(params.unit, "");
+        this.step(id === "step_forward" ? amount : -amount, unit || void 0);
+        return { ok: true };
+      }
+      case "go_to_start":
+        this.goToStart();
+        return { ok: true };
+      case "go_to_end":
+        this.goToEnd();
+        return { ok: true };
+      case "shuttle": {
+        const rate = asNumber(params.rate, Number.NaN);
+        if (!Number.isFinite(rate)) throw new Error("shuttle: `rate` must be a number");
+        this.shuttle(rate);
+        return { ok: true };
+      }
+      case "set_loop": {
+        const startTick = asNumber(params.startTick, Number.NaN);
+        const endTick = asNumber(params.endTick, Number.NaN);
+        if (!Number.isFinite(startTick) || !Number.isFinite(endTick)) {
+          throw new Error("set_loop: `startTick` and `endTick` are required");
+        }
+        this.setLoop({ startTick: (0, types_exports.toTick)(startTick), endTick: (0, types_exports.toTick)(endTick), enabled: asBool(params.enabled, true) });
+        return { ok: true };
+      }
+      case "toggle_loop":
+        this.toggleLoop();
+        return { ok: true };
+      case "set_in_point":
+        this.setInPoint(Number.isFinite(asNumber(params.tick, Number.NaN)) ? (0, types_exports.toTick)(asNumber(params.tick, 0)) : void 0);
+        return { ok: true };
+      case "set_out_point":
+        this.setOutPoint(Number.isFinite(asNumber(params.tick, Number.NaN)) ? (0, types_exports.toTick)(asNumber(params.tick, 0)) : void 0);
+        return { ok: true };
+      case "clear_in_out":
+        this.clearInOut();
+        return { ok: true };
+      case "set_tempo": {
+        const bpm = asNumber(params.bpm, Number.NaN);
+        if (!Number.isFinite(bpm) || bpm <= 0) throw new Error("set_tempo: `bpm` must be a positive number");
+        this.setTempo(bpm);
+        return { ok: true };
+      }
+      case "toggle_metronome":
+        this.toggleMetronome();
+        return { ok: true };
+      case "set_time_display": {
+        const display = asString(params.display, "");
+        if (!format_exports.DISPLAY_CYCLE.includes(display)) {
+          throw new Error("set_time_display: `display` must be frames | timecode | seconds | bars");
+        }
+        await this.setDisplay(display);
+        return { ok: true, display };
+      }
+      default:
+        throw new Error(`transport: unknown command '${id}'`);
+    }
+  }
+  // ── Serialization ─────────────────────────────────────────────────────────
+  serialize() {
+    return { displayOverride: this.displayOverride };
+  }
+  deserialize(state) {
+    const s = state;
+    if (!s || typeof s !== "object") return;
+    if (s.displayOverride && format_exports.DISPLAY_CYCLE.includes(s.displayOverride)) {
+      this.displayOverride = s.displayOverride;
+    } else if (s.displayOverride === null) {
+      this.displayOverride = null;
+    }
+    this.notify();
+  }
+  // ── Observer surface ──────────────────────────────────────────────────────
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getRevision() {
+    return this.revision;
+  }
+  notify() {
+    this.revision += 1;
+    for (const listener of [...this.listeners]) listener();
+  }
+  /** Release timers and subscriptions. Idempotent. */
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.seekThrottle.cancel();
+    this.unsubConfig?.();
+    this.unsubConfig = null;
+    this.listeners.clear();
+  }
+};
+function ticksPerStep(unit, timebase) {
+  switch (unit) {
+    case "second":
+      return Math.round(timebase.ticksPerSecond);
+    case "bar": {
+      const bpm = timebase.bpm ?? 120;
+      const meter = timebase.timeSignature ?? [4, 4];
+      const beats = meter[0] > 0 ? meter[0] : 4;
+      const secondsPerBeat = 60 / bpm * (4 / (meter[1] > 0 ? meter[1] : 4));
+      return (0, types_exports.secondsToTicks)(secondsPerBeat * beats, timebase);
+    }
+    case "frame":
+    default: {
+      const fps = timebase.fps ?? timebase.ticksPerSecond;
+      return Math.max(1, Math.round(timebase.ticksPerSecond / (fps > 0 ? fps : 1)));
+    }
+  }
+}
+
+// src/time/transport/react/TransportPanelView.tsx
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+
+// 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" })
+  ] });
+}
+
+// src/time/transport/react/TransportPanelView.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function TransportPanelView({ controller }) {
+  const subscribe = useCallback((cb) => controller.subscribe(cb), [controller]);
+  const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const rafRef = useRef(null);
+  const scrubRef = useRef(null);
+  const animating = controller.isAnimating();
+  useEffect(() => {
+    if (!animating) return;
+    const raf = globalThis.requestAnimationFrame;
+    const cancel = globalThis.cancelAnimationFrame;
+    if (!raf || !cancel) return;
+    const loop = () => {
+      controller.pump();
+      rafRef.current = raf(loop);
+    };
+    rafRef.current = raf(loop);
+    return () => {
+      if (rafRef.current !== null) cancel(rafRef.current);
+      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 onKeyDown = useCallback(
+    (e) => {
+      if (controller.handleKey({ key: e.key, ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey }, "down")) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [controller]
+  );
+  const onKeyUp = useCallback(
+    (e) => {
+      controller.handleKey({ key: e.key }, "up");
+    },
+    [controller]
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: S.root,
+      className: "xeno-transport-panel",
+      onKeyDown,
+      onKeyUp,
+      tabIndex: 0,
+      role: "group",
+      "aria-label": "Transport",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: S.row, children: [
+          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToStart(), title: "Go to start", "aria-label": "Go to start", children: /* @__PURE__ */ jsx2(StartIcon, {}) }),
+          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(-1), title: "Step back", "aria-label": "Step back", children: /* @__PURE__ */ jsx2(StepBackIcon, {}) }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(-1), title: "Shuttle reverse (J)", "aria-label": "Shuttle reverse", children: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}) }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              style: { ...S.iconBtn, ...S.primaryBtn },
+              onClick: () => controller.togglePlay(),
+              title: playing ? "Pause (Space)" : "Play (Space)",
+              "aria-label": playing ? "Pause" : "Play",
+              "aria-pressed": playing,
+              children: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.stop(), title: "Stop", "aria-label": "Stop", children: /* @__PURE__ */ jsx2(StopIcon, {}) }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(1), title: "Shuttle forward (L)", "aria-label": "Shuttle forward", children: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}) }),
+          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(1), title: "Step forward", "aria-label": "Step forward", children: /* @__PURE__ */ jsx2(StepForwardIcon, {}) }),
+          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToEnd(), title: "Go to end", "aria-label": "Go to end", children: /* @__PURE__ */ jsx2(EndIcon, {}) }),
+          controller.showsControl("record") && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              style: { ...S.iconBtn, color: state.recording ? "var(--xeno-danger)" : void 0, opacity: state.recording ? 1 : 0.7 },
+              onClick: () => controller.record(),
+              title: "Record",
+              "aria-label": "Record",
+              "aria-pressed": !!state.recording,
+              children: /* @__PURE__ */ jsx2(RecordIcon, {})
+            }
+          ),
+          controller.showsControl("loop") && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              style: { ...S.iconBtn, opacity: state.loopEnabled ? 1 : 0.4 },
+              onClick: () => controller.toggleLoop(),
+              title: "Loop",
+              "aria-label": "Loop",
+              "aria-pressed": !!state.loopEnabled,
+              children: /* @__PURE__ */ jsx2(LoopIcon, {})
+            }
+          ),
+          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              style: { ...S.iconBtn, opacity: state.metronome ? 1 : 0.4 },
+              onClick: () => controller.toggleMetronome(),
+              title: "Metronome",
+              "aria-label": "Metronome",
+              "aria-pressed": !!state.metronome,
+              children: /* @__PURE__ */ jsx2(MetronomeIcon, {})
+            }
+          ),
+          controller.showsControl("punch") && /* @__PURE__ */ jsx2("button", { type: "button", style: { ...S.chipBtn, opacity: state.punch ? 1 : 0.4 }, "aria-pressed": !!state.punch, title: "Punch", children: "PUNCH" }),
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              style: S.readout,
+              onClick: () => controller.cycleDisplay(),
+              title: "Click to change time display",
+              "aria-label": `Position ${controller.getReadout()}`,
+              children: [
+                /* @__PURE__ */ jsx2("span", { style: S.readoutValue, children: controller.getReadout() }),
+                /* @__PURE__ */ jsx2("span", { style: S.readoutUnit, children: (0, format_exports.displayLabel)(controller.getDisplay()) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { style: S.duration, children: controller.getDurationReadout() }),
+          controller.showsControl("bpm") && /* @__PURE__ */ jsxs2("label", { style: S.bpm, children: [
+            /* @__PURE__ */ jsx2("span", { style: S.bpmLabel, children: "BPM" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "number",
+                value: state.bpm ?? 120,
+                onChange: (e) => controller.setTempo(Number(e.target.value)),
+                style: S.bpmInput,
+                "aria-label": "Tempo"
+              }
+            )
+          ] }),
+          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2("span", { style: S.inOut, children: [
+            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setInPoint(), title: "Set in point", children: "IN" }),
+            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setOutPoint(), title: "Set out point", children: "OUT" })
+          ] })
+        ] }),
+        controller.showsControl("scrubber") && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ref: scrubRef,
+            style: S.scrubTrack,
+            onPointerDown: onScrubDown,
+            onPointerMove: onScrubMove,
+            onPointerUp: onScrubUp,
+            onPointerCancel: () => controller.cancelScrub(),
+            role: "slider",
+            "aria-label": "Playhead",
+            "aria-valuemin": 0,
+            "aria-valuemax": controller.getDuration(),
+            "aria-valuenow": controller.getCurrentTick(),
+            "aria-valuetext": controller.getReadout(),
+            tabIndex: 0,
+            children: [
+              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubFill, width: `${controller.getProgress() * 100}%` } }),
+              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubKnob, left: `${controller.getProgress() * 100}%` } })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var S = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 3,
+    padding: "4px 6px",
+    fontSize: 11,
+    color: "var(--xeno-text)",
+    background: "var(--xeno-canvas)",
+    userSelect: "none",
+    outline: "none"
+  },
+  row: { display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap" },
+  iconBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 20,
+    height: 18,
+    padding: 0,
+    border: "none",
+    borderRadius: 2,
+    background: "var(--xeno-border-subtle)",
+    color: "inherit",
+    cursor: "pointer",
+    flex: "0 0 auto"
+  },
+  primaryBtn: { background: "var(--xeno-control)", width: 26 },
+  chipBtn: {
+    height: 18,
+    padding: "0 5px",
+    border: "none",
+    borderRadius: 2,
+    background: "var(--xeno-border-subtle)",
+    color: "inherit",
+    cursor: "pointer",
+    fontSize: 9,
+    letterSpacing: "0.05em",
+    flex: "0 0 auto"
+  },
+  readout: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: 4,
+    height: 18,
+    padding: "0 6px",
+    marginLeft: 4,
+    border: "1px solid var(--xeno-border)",
+    borderRadius: 2,
+    background: "var(--xeno-canvas)",
+    color: "inherit",
+    cursor: "pointer",
+    flex: "0 0 auto"
+  },
+  readoutValue: { fontVariantNumeric: "tabular-nums", fontSize: 12, letterSpacing: "0.02em" },
+  readoutUnit: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
+  duration: {
+    fontVariantNumeric: "tabular-nums",
+    fontSize: 10,
+    color: "var(--xeno-muted)",
+    flex: "0 0 auto"
+  },
+  bpm: { display: "flex", alignItems: "center", gap: 3, flex: "0 0 auto" },
+  bpmLabel: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
+  bpmInput: {
+    width: 42,
+    height: 18,
+    background: "var(--xeno-canvas)",
+    color: "inherit",
+    border: "1px solid var(--xeno-border)",
+    borderRadius: 2,
+    fontSize: 11,
+    padding: "0 4px",
+    outline: "none",
+    fontVariantNumeric: "tabular-nums"
+  },
+  inOut: { display: "flex", gap: 2, flex: "0 0 auto" },
+  scrubTrack: {
+    position: "relative",
+    height: 8,
+    borderRadius: 2,
+    background: "var(--xeno-border-subtle)",
+    cursor: "pointer",
+    touchAction: "none",
+    outline: "none"
+  },
+  scrubFill: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    background: "var(--xeno-control)",
+    borderRadius: 2,
+    pointerEvents: "none"
+  },
+  scrubKnob: {
+    position: "absolute",
+    top: -1,
+    width: 3,
+    height: 10,
+    marginLeft: -1,
+    background: "var(--xeno-text)",
+    borderRadius: 1,
+    pointerEvents: "none"
+  }
+};
+
+// src/time/transport/panel.ts
+function createTransportPanel(options = {}) {
+  return {
+    manifest: transportManifest,
+    activate(host) {
+      const controller = new TransportPanelController(host, options);
+      void controller.load();
+      let root = null;
+      return {
+        render(el) {
+          root = createRoot(el);
+          root.render(createElement(TransportPanelView, { controller }));
+          return () => {
+            root?.unmount();
+            root = null;
+          };
+        },
+        onInput(id, value) {
+          controller.onInput(id, value);
+        },
+        onCommand(id, params) {
+          return controller.onCommand(id, params);
+        },
+        serialize() {
+          return controller.serialize();
+        },
+        deserialize(state) {
+          controller.deserialize(state);
+        },
+        dispose() {
+          root?.unmount();
+          root = null;
+          controller.dispose();
+        }
+      };
+    }
+  };
+}
+var transportPanel = createTransportPanel();
+
+// src/time/timeline/panel.ts
+import { createElement as createElement2 } from "react";
+import { createRoot as createRoot2 } from "react-dom/client";
+import {
+  bindConfig,
+  configBool,
+  configNumber,
+  configString,
+  hasFields,
+  isRecord
+} from "@xenosystem/panel-sdk";
+
+// src/time/timeline/controller.ts
+import {
+  clampTick as clampTick3,
+  extrapolateTick as extrapolateTick3,
+  normalizeClock as normalizeClock3,
+  normalizeTimebase as normalizeTimebase3,
+  createThrottle as createThrottle3,
+  DEFAULT_TIMEBASE as DEFAULT_TIMEBASE3,
+  IDLE_CLOCK as IDLE_CLOCK3
+} from "@xenosystem/time-core";
+
+// src/time/timeline/scale.ts
+var DEFAULT_ZOOM = { min: 5e-4, max: 64 };
+var XenoTimeScale = class _XenoTimeScale {
+  pxPerTick;
+  scrollTick;
+  scrollTopPx;
+  widthPx;
+  heightPx;
+  gutterPx;
+  constructor(state, geometry) {
+    this.widthPx = Math.max(1, finiteOr(geometry.widthPx, 1));
+    this.heightPx = Math.max(0, finiteOr(geometry.heightPx, 0));
+    this.gutterPx = Math.max(0, Math.min(finiteOr(geometry.gutterPx, 0), this.widthPx - 1));
+    this.pxPerTick = Math.max(Number.MIN_VALUE, finiteOr(state.pxPerTick, 1));
+    this.scrollTick = Math.max(0, finiteOr(state.scrollTick, 0));
+    this.scrollTopPx = Math.max(0, finiteOr(state.scrollTopPx, 0));
+  }
+  /** Width of the lane area — the container minus the gutter. Always ≥ 1. */
+  get lanePx() {
+    return Math.max(1, this.widthPx - this.gutterPx);
+  }
+  /** Ticks visible in the lane area. */
+  get spanTicks() {
+    return this.lanePx / this.pxPerTick;
+  }
+  /** The tick at the right edge of the lane area. */
+  get endTick() {
+    return this.scrollTick + this.spanTicks;
+  }
+  /**
+   * Container-relative x → tick.
+   *
+   * @param x - Pixels from the **container's** left edge (`event.clientX - rect.left`).
+   * @returns The tick under that pixel. May be negative left of the origin.
+   *
+   * @example
+   * ```ts
+   * const rect = el.getBoundingClientRect()
+   * const tick = scale.xToTick(event.clientX - rect.left)
+   * ```
+   */
+  xToTick(x) {
+    return this.scrollTick + (finiteOr(x, 0) - this.gutterPx) / this.pxPerTick;
+  }
+  /**
+   * Tick → container-relative x.
+   *
+   * @param tick - A tick.
+   * @returns Pixels from the container's left edge.
+   */
+  tickToX(tick) {
+    return this.gutterPx + (finiteOr(tick, 0) - this.scrollTick) * this.pxPerTick;
+  }
+  /**
+   * A tick DURATION → a pixel width.
+   *
+   * Deliberately separate from {@link tickToX}, because rounding is **not associative**:
+   * `durationToPx(b - a)` and `tickToX(b) - tickToX(a)` differ by up to a pixel, and mixing them is
+   * how a clip's right edge ends up one pixel from its neighbour's left edge at some zoom levels and
+   * overlapping at others. Pick one per axis and never mix.
+   *
+   * @param ticks - A duration in ticks.
+   * @returns Width in CSS px.
+   */
+  durationToPx(ticks) {
+    return finiteOr(ticks, 0) * this.pxPerTick;
+  }
+  /** A pixel distance → a tick distance. Used for screen-space thresholds. */
+  pxToTicks(px) {
+    return finiteOr(px, 0) / this.pxPerTick;
+  }
+  /** Is this x inside the lane area (rather than the gutter)? */
+  isInLane(x) {
+    return x >= this.gutterPx && x <= this.widthPx;
+  }
+  /** A copy with new state. */
+  with(state) {
+    return new _XenoTimeScale(
+      {
+        pxPerTick: state.pxPerTick ?? this.pxPerTick,
+        scrollTick: state.scrollTick ?? this.scrollTick,
+        scrollTopPx: state.scrollTopPx ?? this.scrollTopPx
+      },
+      { widthPx: this.widthPx, heightPx: this.heightPx, gutterPx: this.gutterPx }
+    );
+  }
+  /** A copy with new geometry. */
+  resized(geometry) {
+    return new _XenoTimeScale(
+      { pxPerTick: this.pxPerTick, scrollTick: this.scrollTick, scrollTopPx: this.scrollTopPx },
+      {
+        widthPx: geometry.widthPx ?? this.widthPx,
+        heightPx: geometry.heightPx ?? this.heightPx,
+        gutterPx: geometry.gutterPx ?? this.gutterPx
+      }
+    );
+  }
+};
+function finiteOr(value, fallback) {
+  return Number.isFinite(value) ? value : fallback;
+}
+function zoomAboutCursor(scale, x, factor, bounds = DEFAULT_ZOOM, maxTick = Number.POSITIVE_INFINITY) {
+  const anchorTick = scale.xToTick(x);
+  const requested = scale.pxPerTick * (Number.isFinite(factor) && factor > 0 ? factor : 1);
+  const pxPerTick = Math.min(bounds.max, Math.max(bounds.min, requested));
+  const laneX = x - scale.gutterPx;
+  const scrollTick = anchorTick - laneX / pxPerTick;
+  return {
+    pxPerTick,
+    scrollTick: clampScroll(scrollTick, pxPerTick, scale.lanePx, maxTick),
+    scrollTopPx: scale.scrollTopPx
+  };
+}
+function wheelZoomFactor(deltaY, sensitivity = 0.01) {
+  const raw = Number.isFinite(deltaY) ? deltaY : 0;
+  const clamped = Math.max(-10, Math.min(10, raw));
+  return Math.pow(2, -clamped * sensitivity * 10);
+}
+function isZoomGesture(event, zoomModifier = "alt") {
+  if (event.ctrlKey) return true;
+  if (zoomModifier === "alt") return event.altKey === true;
+  if (zoomModifier === "meta") return event.metaKey === true;
+  return false;
+}
+function clampScroll(scrollTick, pxPerTick, lanePx, maxTick) {
+  if (!Number.isFinite(scrollTick)) return 0;
+  if (!Number.isFinite(maxTick)) return Math.max(0, scrollTick);
+  const limit = Math.max(0, maxTick - lanePx / pxPerTick / 2);
+  return Math.max(0, Math.min(scrollTick, limit));
+}
+function zoomToFit(fromTick, toTick3, lanePx, bounds = DEFAULT_ZOOM) {
+  const span = Math.max(1, toTick3 - fromTick);
+  const pxPerTick = Math.min(bounds.max, Math.max(bounds.min, Math.max(1, lanePx) / span));
+  return { pxPerTick, scrollTick: Math.max(0, fromTick) };
+}
+function scrollToReveal(scale, tick, marginPx = 24, maxTick = Number.POSITIVE_INFINITY) {
+  const margin = scale.pxToTicks(marginPx);
+  const target = Math.max(0, tick);
+  if (target < scale.scrollTick + margin) {
+    return clampScroll(target - margin, scale.pxPerTick, scale.lanePx, maxTick);
+  }
+  if (target > scale.endTick - margin) {
+    return clampScroll(target - scale.spanTicks + margin, scale.pxPerTick, scale.lanePx, maxTick);
+  }
+  return scale.scrollTick;
+}
+
+// src/time/timeline/layout.ts
+function buildRowLayout(tracks, collapsedPx = 20) {
+  const offsets = new Float64Array(tracks.length + 1);
+  let total = 0;
+  for (let i = 0; i < tracks.length; i += 1) {
+    offsets[i] = total;
+    const track = tracks[i];
+    const height = track.collapsed ? collapsedPx : track.heightPx;
+    total += Number.isFinite(height) && height > 0 ? height : collapsedPx;
+  }
+  offsets[tracks.length] = total;
+  return { offsets, totalPx: total };
+}
+function visibleRows(layout, scrollTopPx, viewportPx, overscan = 1) {
+  const count = layout.offsets.length - 1;
+  if (count <= 0) return { first: 0, last: 0 };
+  const top = Math.max(0, scrollTopPx);
+  const bottom = top + Math.max(0, viewportPx);
+  let first = binarySearchOffset(layout.offsets, top, count);
+  while (first > 0 && layout.offsets[first] > top) first -= 1;
+  let last = first;
+  while (last < count && layout.offsets[last] < bottom) last += 1;
+  return {
+    first: Math.max(0, first - overscan),
+    last: Math.min(count, last + overscan)
+  };
+}
+function rowAtY(layout, y) {
+  const count = layout.offsets.length - 1;
+  if (count <= 0 || y < 0 || y >= layout.totalPx) return -1;
+  return Math.min(count - 1, binarySearchOffset(layout.offsets, y, count));
+}
+function binarySearchOffset(offsets, value, count) {
+  let low = 0;
+  let high = count - 1;
+  let result = 0;
+  while (low <= high) {
+    const mid = low + high >> 1;
+    if (offsets[mid] <= value) {
+      result = mid;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return result;
+}
+function visibleClips(track, clips, startTick, endTick) {
+  const ids = track.clipIds;
+  if (ids.length === 0) return [];
+  let low = 0;
+  let high = ids.length - 1;
+  let rightmost = -1;
+  while (low <= high) {
+    const mid = low + high >> 1;
+    const clip = clips[ids[mid]];
+    if (clip && clip.startTick < endTick) {
+      rightmost = mid;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  if (rightmost < 0) return [];
+  const out = [];
+  for (let i = rightmost; i >= 0; i -= 1) {
+    const clip = clips[ids[i]];
+    if (!clip) continue;
+    if (clip.endTick <= startTick) break;
+    out.push(clip);
+  }
+  out.reverse();
+  return out;
+}
+function renderTier(widthPx, breakpoints = [40, 120]) {
+  if (widthPx < breakpoints[0]) return "sliver";
+  if (widthPx < breakpoints[1]) return "compact";
+  return "full";
+}
+function dedupeByColumn(clips, scale, minGapPx = 1) {
+  const out = [];
+  let lastX = Number.NEGATIVE_INFINITY;
+  for (const clip of clips) {
+    const x = scale.tickToX(clip.startTick);
+    const width = scale.durationToPx(clip.endTick - clip.startTick);
+    if (width >= minGapPx || x - lastX >= minGapPx) {
+      out.push(clip);
+      lastX = x;
+    }
+  }
+  return out;
+}
+function computeVisible(arrangement, scale, options = {}) {
+  const rows = buildRowLayout(arrangement.tracks, options.collapsedPx);
+  const laneHeight = Math.max(0, scale.heightPx - (options.rulerPx ?? 0));
+  const { first, last } = visibleRows(rows, scale.scrollTopPx, laneHeight, options.overscan ?? 1);
+  const startTick = scale.scrollTick;
+  const endTick = scale.endTick;
+  const tracks = [];
+  for (let i = first; i < last; i += 1) {
+    const track = arrangement.tracks[i];
+    if (!track) continue;
+    const topPx = rows.offsets[i];
+    const heightPx = rows.offsets[i + 1] - topPx;
+    const clips = track.collapsed ? [] : visibleClips(track, arrangement.clips, startTick, endTick);
+    tracks.push({
+      track,
+      index: i,
+      topPx,
+      heightPx,
+      clips: options.dedupe === false ? clips : dedupeByColumn(clips, scale)
+    });
+  }
+  return { rows, tracks };
+}
+
+// src/time/timeline/ruler.ts
+import { effectiveFps as effectiveFps2, formatTick as formatTick3 } from "@xenosystem/time-core";
+var MIN_MAJOR_PX = 120;
+var MIN_MINOR_PX = 8;
+var SECOND_LADDER = [
+  { seconds: 1e-3, subdivisions: 10, medium: 5 },
+  { seconds: 0.01, subdivisions: 10, medium: 5 },
+  { seconds: 0.1, subdivisions: 10, medium: 5 },
+  { seconds: 0.5, subdivisions: 5, medium: 0 },
+  { seconds: 1, subdivisions: 10, medium: 5 },
+  { seconds: 2, subdivisions: 4, medium: 2 },
+  { seconds: 5, subdivisions: 5, medium: 0 },
+  { seconds: 10, subdivisions: 10, medium: 5 },
+  { seconds: 15, subdivisions: 3, medium: 0 },
+  { seconds: 30, subdivisions: 6, medium: 3 },
+  { seconds: 60, subdivisions: 4, medium: 2 },
+  { seconds: 120, subdivisions: 4, medium: 2 },
+  { seconds: 300, subdivisions: 5, medium: 0 },
+  { seconds: 600, subdivisions: 10, medium: 5 },
+  { seconds: 900, subdivisions: 3, medium: 0 },
+  { seconds: 1800, subdivisions: 6, medium: 3 },
+  { seconds: 3600, subdivisions: 4, medium: 2 },
+  { seconds: 7200, subdivisions: 4, medium: 2 },
+  { seconds: 21600, subdivisions: 6, medium: 3 },
+  { seconds: 43200, subdivisions: 4, medium: 2 },
+  { seconds: 86400, subdivisions: 4, medium: 2 }
+];
+var FRAME_STEPS = [1, 2, 5, 10, 15, 30];
+function chooseRung(scale, timebase) {
+  const tps = Math.max(1, timebase.ticksPerSecond);
+  if (timebase.display === "frames" || timebase.display === "timecode") {
+    const fps = effectiveFps2(timebase) || 30;
+    const ticksPerFrame = tps / fps;
+    for (const frames of FRAME_STEPS) {
+      const majorTicks2 = ticksPerFrame * frames;
+      if (scale.durationToPx(majorTicks2) >= MIN_MAJOR_PX) {
+        const subdivisions = frames === 1 ? 1 : frames === 15 ? 3 : frames === 30 ? 6 : frames;
+        return { majorTicks: majorTicks2, subdivisions, medium: subdivisions % 2 === 0 ? subdivisions / 2 : 0 };
+      }
+    }
+  }
+  if (timebase.display === "bars") return chooseBarRung(scale, timebase);
+  for (const rung of SECOND_LADDER) {
+    const majorTicks2 = rung.seconds * tps;
+    if (scale.durationToPx(majorTicks2) >= MIN_MAJOR_PX) {
+      return { majorTicks: majorTicks2, subdivisions: rung.subdivisions, medium: rung.medium };
+    }
+  }
+  const last = SECOND_LADDER[SECOND_LADDER.length - 1];
+  let majorTicks = last.seconds * tps;
+  while (scale.durationToPx(majorTicks) < MIN_MAJOR_PX && majorTicks < Number.MAX_SAFE_INTEGER / 4) {
+    majorTicks *= 2;
+  }
+  return { majorTicks, subdivisions: 4, medium: 2 };
+}
+function chooseBarRung(scale, timebase) {
+  const tps = Math.max(1, timebase.ticksPerSecond);
+  const bpm = timebase.bpm && timebase.bpm > 0 ? timebase.bpm : 120;
+  const numerator = timebase.timeSignature?.[0] ?? 4;
+  const denominator = timebase.timeSignature?.[1] ?? 4;
+  const ticksPerQuarter = 60 / bpm * tps;
+  const ticksPerBeat = ticksPerQuarter * (4 / denominator);
+  const ticksPerBar = ticksPerBeat * numerator;
+  if (scale.durationToPx(ticksPerBar) < MIN_MAJOR_PX) {
+    let majorTicks2 = ticksPerBar;
+    while (scale.durationToPx(majorTicks2) < MIN_MAJOR_PX && majorTicks2 < Number.MAX_SAFE_INTEGER / 4) {
+      majorTicks2 *= 2;
+    }
+    return { majorTicks: majorTicks2, subdivisions: numerator, medium: 0 };
+  }
+  let majorTicks = ticksPerBar;
+  let subdivisions = numerator;
+  if (scale.durationToPx(ticksPerBeat) >= MIN_MAJOR_PX) {
+    majorTicks = ticksPerBeat;
+    subdivisions = 2;
+    while (scale.durationToPx(majorTicks / 2) >= MIN_MAJOR_PX && majorTicks > 1) {
+      majorTicks /= 2;
+    }
+  }
+  return { majorTicks, subdivisions, medium: subdivisions % 2 === 0 ? subdivisions / 2 : 0 };
+}
+function rulerTicks(scale, timebase, options = {}) {
+  const { majorTicks, subdivisions, medium } = chooseRung(scale, timebase);
+  if (!Number.isFinite(majorTicks) || majorTicks <= 0) return [];
+  const minorTicks = majorTicks / Math.max(1, subdivisions);
+  const drawMinors = scale.durationToPx(minorTicks) >= MIN_MINOR_PX;
+  const step = drawMinors ? minorTicks : majorTicks;
+  const perMajor = drawMinors ? Math.max(1, subdivisions) : 1;
+  const firstMajorIndex = Math.floor(scale.scrollTick / majorTicks);
+  const startTick = firstMajorIndex * majorTicks;
+  const out = [];
+  const label = options.label ?? ((tick) => formatTick3(tick, timebase));
+  const maxTicks = Math.ceil(scale.lanePx / Math.max(1, scale.durationToPx(step))) + perMajor + 2;
+  for (let i = 0; i < maxTicks; i += 1) {
+    const tick = startTick + i * step;
+    const x = scale.tickToX(tick);
+    if (x > scale.widthPx) break;
+    if (x < scale.gutterPx - 1) continue;
+    const indexInMajor = i % perMajor;
+    const weight = indexInMajor === 0 ? "major" : medium > 0 && indexInMajor === medium ? "medium" : "minor";
+    out.push({
+      tick: Math.round(tick),
+      x,
+      weight,
+      label: weight === "major" ? label(Math.round(tick)) : void 0
+    });
+  }
+  return out;
+}
+function gridTicksFor(scale, timebase) {
+  const { majorTicks, subdivisions } = chooseRung(scale, timebase);
+  const minor = majorTicks / Math.max(1, subdivisions);
+  return scale.durationToPx(minor) >= MIN_MINOR_PX ? minor : majorTicks;
+}
+
+// src/time/timeline/snap.ts
+var DEFAULT_SNAP = { mode: "both", thresholdPx: 10, gridTicks: 0 };
+var TRIM_SNAP_PX = 5;
+function collectSnapTargets(arrangement, excludeClipIds, playheadTick, window) {
+  const excluded = new Set(excludeClipIds);
+  const out = [{ tick: 0, kind: "origin" }];
+  if (playheadTick !== null) out.push({ tick: playheadTick, kind: "playhead" });
+  for (const marker of arrangement.markers ?? []) {
+    if (marker.tick >= window.startTick && marker.tick <= window.endTick) {
+      out.push({ tick: marker.tick, kind: "marker", id: marker.id });
+    }
+    if (marker.endTick !== void 0 && marker.endTick >= window.startTick && marker.endTick <= window.endTick) {
+      out.push({ tick: marker.endTick, kind: "marker", id: marker.id });
+    }
+  }
+  for (const track of arrangement.tracks) {
+    for (const clipId of track.clipIds) {
+      if (excluded.has(clipId)) continue;
+      const clip = arrangement.clips[clipId];
+      if (!clip) continue;
+      if (clip.endTick < window.startTick || clip.startTick > window.endTick) continue;
+      out.push({ tick: clip.startTick, kind: "clipStart", id: clip.id });
+      out.push({ tick: clip.endTick, kind: "clipEnd", id: clip.id });
+    }
+  }
+  return out;
+}
+function snapDelta(sourceTicks, rawDelta, candidates, scale, config = DEFAULT_SNAP) {
+  const rounded = Math.round(rawDelta);
+  if (config.mode === "off" || sourceTicks.length === 0) {
+    return { deltaTicks: rounded, target: null };
+  }
+  const thresholdTicks = scale.pxToTicks(Math.max(0, config.thresholdPx));
+  if (!Number.isFinite(thresholdTicks) || thresholdTicks <= 0) {
+    return { deltaTicks: rounded, target: null };
+  }
+  let bestDistance = thresholdTicks;
+  let bestDelta = rounded;
+  let bestTarget = null;
+  let bestSource;
+  const useTargets = config.mode === "targets" || config.mode === "both";
+  const useGrid = (config.mode === "grid" || config.mode === "both") && config.gridTicks > 0;
+  for (const source of sourceTicks) {
+    const moved = source + rawDelta;
+    if (useTargets) {
+      for (const candidate of candidates) {
+        const distance = Math.abs(candidate.tick - moved);
+        if (distance < bestDistance) {
+          bestDistance = distance;
+          bestDelta = candidate.tick - source;
+          bestTarget = candidate;
+          bestSource = source;
+        }
+      }
+    }
+    if (useGrid) {
+      const gridTick = Math.round(moved / config.gridTicks) * config.gridTicks;
+      const distance = Math.abs(gridTick - moved);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        bestDelta = gridTick - source;
+        bestTarget = { tick: gridTick, kind: "grid" };
+        bestSource = source;
+      }
+    }
+  }
+  return { deltaTicks: Math.round(bestDelta), target: bestTarget, sourceTick: bestSource };
+}
+function snapTick(tick, candidates, scale, config = DEFAULT_SNAP) {
+  const result = snapDelta([0], tick, candidates, scale, config);
+  return { tick: result.deltaTicks, target: result.target };
+}
+function snapWouldFight(scale, ticksPerFrame = 1) {
+  return scale.durationToPx(ticksPerFrame) >= 24;
+}
+function withSnapModifier(config, inverted) {
+  if (!inverted) return config;
+  return { ...config, mode: config.mode === "off" ? "both" : "off" };
+}
+
+// src/time/timeline/drag.ts
+var DRAG_THRESHOLD_PX = 4;
+var DRAG_THRESHOLD_SQ = DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX;
+var COPY_THRESHOLD_SQ = 12 * 12;
+var EDGE_ZONE_PX = 10;
+var EDGE_ZONE_MIN_CLIP_PX = 3 * EDGE_ZONE_PX;
+function edgeZone(offsetPx, widthPx) {
+  if (widthPx < EDGE_ZONE_MIN_CLIP_PX) return null;
+  if (offsetPx <= EDGE_ZONE_PX) return "start";
+  if (offsetPx >= widthPx - EDGE_ZONE_PX) return "end";
+  return null;
+}
+function beginDrag(options) {
+  const { target, tool } = options;
+  const origin = {};
+  for (const clip of options.clips) {
+    origin[clip.id] = { startTick: clip.startTick, endTick: clip.endTick, trackId: clip.trackId };
+  }
+  const base2 = {
+    tool,
+    startX: options.x,
+    startY: options.y,
+    startTick: options.tick,
+    clipIds: options.clips.map((c) => c.id),
+    origin,
+    startTrackIndex: options.trackIndex,
+    modifiers: options.modifiers ?? {},
+    moved: false,
+    deltaTicks: 0,
+    deltaTracks: 0
+  };
+  if (tool === "hand") return { ...base2, kind: "pan" };
+  if (tool === "razor") return null;
+  switch (target.kind) {
+    case "ruler":
+      return { ...base2, kind: "scrub" };
+    case "marker":
+      return { ...base2, kind: "marker", markerId: target.markerId };
+    case "trackDivider":
+      return { ...base2, kind: "trackHeight", trackId: target.trackId, startHeightPx: options.startHeightPx };
+    case "clipEdgeStart":
+      return { ...base2, kind: "trimStart", edgeTick: options.tick };
+    case "clipEdgeEnd":
+      return { ...base2, kind: "trimEnd", edgeTick: options.tick };
+    case "clip":
+      return { ...base2, kind: "move" };
+    case "lane":
+      return {
+        ...base2,
+        kind: "marquee",
+        clipIds: [],
+        marquee: { fromTick: options.tick, toTick: options.tick, fromY: options.y, toY: options.y }
+      };
+    default:
+      return null;
+  }
+}
+function passedThreshold(state, x, y) {
+  if (state.moved) return true;
+  const dx = x - state.startX;
+  const dy = y - state.startY;
+  const threshold = state.modifiers.copy ? COPY_THRESHOLD_SQ : DRAG_THRESHOLD_SQ;
+  return dx * dx + dy * dy >= threshold;
+}
+function previewDrag(state, deltaTicks, deltaTracks, trackIds) {
+  const clips = {};
+  for (const id of state.clipIds) {
+    const from = state.origin[id];
+    if (!from) continue;
+    if (state.kind === "move") {
+      const currentIndex = trackIds.indexOf(from.trackId);
+      const nextIndex = Math.max(0, Math.min(trackIds.length - 1, currentIndex + deltaTracks));
+      clips[id] = {
+        startTick: from.startTick + deltaTicks,
+        endTick: from.endTick + deltaTicks,
+        trackId: trackIds[nextIndex] ?? from.trackId
+      };
+    } else if (state.kind === "trimStart") {
+      const startTick = Math.min(from.startTick + deltaTicks, from.endTick - 1);
+      clips[id] = { startTick, endTick: from.endTick, trackId: from.trackId };
+    } else if (state.kind === "trimEnd") {
+      const endTick = Math.max(from.endTick + deltaTicks, from.startTick + 1);
+      clips[id] = { startTick: from.startTick, endTick, trackId: from.trackId };
+    } else {
+      clips[id] = { ...from };
+    }
+  }
+  return { clips, marquee: state.marquee };
+}
+function commitDrag(state, trimMode = "standard") {
+  if (!state.moved) return null;
+  switch (state.kind) {
+    case "move": {
+      if (state.deltaTicks === 0 && state.deltaTracks === 0) return null;
+      const toTrackId = state.deltaTracks !== 0 ? state.origin[state.clipIds[0]]?.trackId : void 0;
+      return state.modifiers.copy ? { kind: "duplicate", clipIds: state.clipIds, deltaTicks: state.deltaTicks } : { kind: "move", clipIds: state.clipIds, deltaTicks: state.deltaTicks, toTrackId };
+    }
+    case "trimStart":
+    case "trimEnd": {
+      if (state.deltaTicks === 0) return null;
+      const clipId = state.clipIds[0];
+      const from = clipId ? state.origin[clipId] : void 0;
+      if (!clipId || !from) return null;
+      const edge = state.kind === "trimStart" ? "start" : "end";
+      const toTick3 = edge === "start" ? Math.min(from.startTick + state.deltaTicks, from.endTick - 1) : Math.max(from.endTick + state.deltaTicks, from.startTick + 1);
+      return { kind: "trim", clipId, edge, toTick: toTick3, mode: trimMode };
+    }
+    case "trackHeight": {
+      if (!state.trackId || state.startHeightPx === void 0) return null;
+      return { kind: "setTrackHeight", trackId: state.trackId, heightPx: state.startHeightPx };
+    }
+    case "marker": {
+      if (!state.markerId || state.deltaTicks === 0) return null;
+      return { kind: "moveMarker", markerId: state.markerId, toTick: state.startTick + state.deltaTicks };
+    }
+    // A marquee, a scrub and a pan change the view or the selection, not the document.
+    default:
+      return null;
+  }
+}
+function trimModeFor(tool) {
+  if (tool === "ripple") return "ripple";
+  if (tool === "roll") return "roll";
+  return "standard";
+}
+function clipsInMarquee(marquee, rows, tracks, clips) {
+  const fromTick = Math.min(marquee.fromTick, marquee.toTick);
+  const toTick3 = Math.max(marquee.fromTick, marquee.toTick);
+  const fromY = Math.min(marquee.fromY, marquee.toY);
+  const toY = Math.max(marquee.fromY, marquee.toY);
+  const out = [];
+  for (let i = 0; i < tracks.length; i += 1) {
+    const top = rows.offsets[i];
+    const bottom = rows.offsets[i + 1];
+    if (bottom <= fromY || top >= toY) continue;
+    for (const clipId of tracks[i].clipIds) {
+      const clip = clips[clipId];
+      if (clip && clip.startTick < toTick3 && clip.endTick > fromTick) out.push(clipId);
+    }
+  }
+  return out;
+}
+
+// src/time/timeline/tiles.ts
+var DEFAULT_MAX_BYTES = 48 * 1024 * 1024;
+function zoomBucket(pxPerTick) {
+  if (!Number.isFinite(pxPerTick) || pxPerTick <= 0) return 0;
+  return Math.round(Math.log2(pxPerTick));
+}
+function tileKey(parts) {
+  return [
+    parts.sourceId,
+    Math.round(parts.startTick),
+    Math.round(parts.endTick),
+    parts.zoomBucket,
+    Math.round(parts.heightPx)
+  ].join("|");
+}
+function sourceRangeFor(clip, fromTick, toTick3) {
+  if (typeof clip.sourceInTick !== "number") return null;
+  const visibleStart = Math.max(clip.startTick, fromTick);
+  const visibleEnd = Math.min(clip.endTick, toTick3);
+  if (visibleEnd <= visibleStart) return null;
+  const offset = visibleStart - clip.startTick;
+  return {
+    startTick: clip.sourceInTick + offset,
+    endTick: clip.sourceInTick + offset + (visibleEnd - visibleStart)
+  };
+}
+function alignToTileGrid(range, tileTicks) {
+  const step = Math.max(1, Math.round(tileTicks));
+  const first = Math.floor(range.startTick / step) * step;
+  const out = [];
+  for (let t = first; t < range.endTick && out.length < 256; t += step) {
+    out.push({ startTick: t, endTick: t + step });
+  }
+  return out;
+}
+function tileWidthTicks(scale, random = Math.random) {
+  const nominal = scale.pxToTicks(scale.lanePx);
+  const multiplier = 1.4 + random() * 0.4;
+  return Math.max(1, Math.round(nominal * multiplier));
+}
+var XenoTileCache = class {
+  tiles = /* @__PURE__ */ new Map();
+  maxBytes;
+  random;
+  clock = 0;
+  bytes = 0;
+  /** Keys already asked for, so a request is never sent twice while one is in flight. */
+  pending = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.maxBytes = Math.max(1, options.maxBytes ?? DEFAULT_MAX_BYTES);
+    this.random = options.random ?? Math.random;
+  }
+  /** Bytes currently held. */
+  get sizeBytes() {
+    return this.bytes;
+  }
+  /** Tiles currently held. */
+  get size() {
+    return this.tiles.size;
+  }
+  /**
+   * Find a usable tile for a request.
+   *
+   * 🔴 Satisfied by **containment**, not equality: a cached tile whose source range *covers* the
+   * request, at the same zoom bucket and height, is a hit. That is what makes scrolling produce hits
+   * instead of thrash, and it is why tiles are rendered wider than the viewport.
+   *
+   * @param request - Source identity, range, zoom bucket, height.
+   * @returns A tile that covers it, or `null`.
+   */
+  find(request) {
+    const exact = this.tiles.get(tileKey(request));
+    if (exact) {
+      exact.usedAt = this.clock += 1;
+      return exact;
+    }
+    for (const tile of this.tiles.values()) {
+      if (tile.sourceId === request.sourceId && tile.zoomBucket === request.zoomBucket && tile.heightPx === request.heightPx && tile.startTick <= request.startTick && tile.endTick >= request.endTick) {
+        tile.usedAt = this.clock += 1;
+        return tile;
+      }
+    }
+    return null;
+  }
+  /**
+   * Record a tile the host returned.
+   *
+   * @param tile - Everything but the LRU stamp.
+   * @returns The stored tile.
+   */
+  put(tile) {
+    this.pending.delete(tile.key);
+    const existing = this.tiles.get(tile.key);
+    if (existing) this.evictOne(existing);
+    const bytes = tile.bytes ?? Math.max(
+      1,
+      Math.round((tile.endTick - tile.startTick) * 0 + tile.heightPx * 4 * estimateWidth(tile))
+    );
+    const stored = { ...tile, bytes, usedAt: this.clock += 1 };
+    this.tiles.set(stored.key, stored);
+    this.bytes += bytes;
+    this.trim();
+    return stored;
+  }
+  /** Has a request for this key already gone out? */
+  isPending(key) {
+    return this.pending.has(key);
+  }
+  /**
+   * Mark a key as requested.
+   *
+   * Coalescing matters: without it, every frame of a scroll re-asks the host for the same tile, and
+   * a decode queue that is already behind falls further behind.
+   *
+   * @param key - The tile key.
+   * @returns `false` when a request was already outstanding.
+   */
+  markPending(key) {
+    if (this.pending.has(key)) return false;
+    this.pending.add(key);
+    return true;
+  }
+  /** Abandon an outstanding request — the tile scrolled out of view. */
+  cancelPending(key) {
+    this.pending.delete(key);
+  }
+  /** A tile width in ticks for the current zoom, jittered. */
+  widthTicks(scale) {
+    return tileWidthTicks(scale, this.random);
+  }
+  /** Drop everything for one source — it was edited, or its media changed. */
+  invalidateSource(sourceId) {
+    let removed = 0;
+    for (const tile of [...this.tiles.values()]) {
+      if (tile.sourceId === sourceId) {
+        this.evictOne(tile);
+        removed += 1;
+      }
+    }
+    return removed;
+  }
+  /** Release everything, closing bitmaps. */
+  clear() {
+    for (const tile of [...this.tiles.values()]) this.evictOne(tile);
+    this.pending.clear();
+  }
+  /** Evict least-recently-used tiles until inside the budget. */
+  trim() {
+    if (this.bytes <= this.maxBytes) return;
+    const ordered = [...this.tiles.values()].sort((a, b) => a.usedAt - b.usedAt);
+    for (const tile of ordered) {
+      if (this.bytes <= this.maxBytes) break;
+      this.evictOne(tile);
+    }
+  }
+  /** Remove one tile and release its bitmap. */
+  evictOne(tile) {
+    this.tiles.delete(tile.key);
+    this.bytes = Math.max(0, this.bytes - tile.bytes);
+    const bitmap = tile.bitmap;
+    if (bitmap && typeof bitmap.close === "function") {
+      try {
+        bitmap.close();
+      } catch {
+      }
+    }
+  }
+};
+function estimateWidth(tile) {
+  return Math.max(1, Math.min(4096, Math.round(tile.endTick - tile.startTick)));
+}
+function blitTile(ctx, tile, x, y, width, height) {
+  if (!tile?.bitmap) return false;
+  try {
+    if (typeof ImageData !== "undefined" && tile.bitmap instanceof ImageData) {
+      ctx.putImageData(tile.bitmap, Math.round(x), Math.round(y));
+    } else {
+      ctx.drawImage(tile.bitmap, x, y, width, height);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/time/timeline/controller.ts
+var EMPTY_ARRANGEMENT = {
+  timebase: DEFAULT_TIMEBASE3,
+  durationTicks: 0,
+  tracks: [],
+  clips: {},
+  rev: 0
+};
+var TimelineController = class {
+  host;
+  listeners = /* @__PURE__ */ new Set();
+  now;
+  zoomBounds;
+  crossTrackDrag;
+  multiSelect;
+  marqueeEnabled;
+  virtualize;
+  rulerPx;
+  scale;
+  arrangement = EMPTY_ARRANGEMENT;
+  clock = IDLE_CLOCK3;
+  tool;
+  snapMode;
+  selection = { clipIds: [] };
+  /**
+   * The live gesture.
+   *
+   * 🔴 A field on the controller, **not a closure local in an event handler**. The reference
+   * implementation keeps drag bookkeeping in variables the move handler closes over, and loses the
+   * commit whenever a re-render swaps the closure.
+   */
+  drag = null;
+  preview = null;
+  tiles;
+  emitPreview;
+  emitViewport;
+  snapshot = null;
+  cachedVisible = null;
+  constructor(options) {
+    this.host = options.host;
+    this.now = options.host.now ?? (() => Date.now());
+    this.zoomBounds = options.zoom ?? DEFAULT_ZOOM;
+    this.crossTrackDrag = options.crossTrackDrag ?? true;
+    this.multiSelect = options.multiSelect ?? true;
+    this.marqueeEnabled = options.marquee ?? true;
+    this.virtualize = options.virtualize ?? true;
+    this.rulerPx = options.rulerPx ?? 22;
+    this.tool = options.tool ?? "select";
+    this.snapMode = options.snapMode ?? "both";
+    this.tiles = options.tileCache ?? new XenoTileCache();
+    this.scale = new XenoTimeScale(
+      { pxPerTick: 0.5, scrollTick: 0, scrollTopPx: 0 },
+      { widthPx: 800, heightPx: 400, gutterPx: options.gutterPx ?? 140 }
+    );
+    const throttleMs = options.throttleMs ?? 100;
+    const throttleClock = {
+      now: this.now,
+      setTimer: (cb, ms) => setTimeout(cb, ms),
+      clearTimer: (handle) => clearTimeout(handle)
+    };
+    this.emitPreview = createThrottle3(
+      (op) => this.host.emit("opPreview", op),
+      throttleMs,
+      throttleClock
+    );
+    this.emitViewport = createThrottle3(() => this.publishViewport(), throttleMs, throttleClock);
+  }
+  /* ── Subscription ──────────────────────────────────────────────────────── */
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  getState = () => {
+    if (!this.snapshot) {
+      const visible = this.computeVisibleCached();
+      this.snapshot = {
+        scale: this.scale,
+        arrangement: this.arrangement === EMPTY_ARRANGEMENT ? null : this.arrangement,
+        timebase: this.arrangement.timebase,
+        tool: this.tool,
+        snap: this.snapConfig(),
+        selection: this.selection,
+        preview: this.preview,
+        visible: visible.tracks,
+        rows: visible.rows,
+        playheadTick: this.playheadTick(),
+        playing: this.clock.playing === true,
+        durationTicks: this.arrangement.durationTicks
+      };
+    }
+    return this.snapshot;
+  };
+  notify() {
+    this.snapshot = null;
+    for (const listener of this.listeners) listener();
+  }
+  /* ── Host input ────────────────────────────────────────────────────────── */
+  /**
+   * Install a new arrangement.
+   *
+   * The re-walk is gated on `rev`: an identical revision is a no-op, so a host that re-pushes on
+   * every animation frame costs nothing.
+   *
+   * @param arrangement - The host's arrangement.
+   * @returns Whether anything changed.
+   */
+  setArrangement(arrangement) {
+    if (arrangement.rev === this.arrangement.rev && arrangement === this.arrangement) return false;
+    this.arrangement = {
+      ...arrangement,
+      // A rejected timebase falls back rather than propagating `null` — the ruler must still draw.
+      timebase: normalizeTimebase3(arrangement.timebase) ?? this.arrangement.timebase ?? DEFAULT_TIMEBASE3,
+      markers: arrangement.markers ?? []
+    };
+    this.cachedVisible = null;
+    const live = this.selection.clipIds.filter((id) => this.arrangement.clips[id]);
+    if (live.length !== this.selection.clipIds.length) this.selection = { ...this.selection, clipIds: live };
+    this.notify();
+    this.emitViewport.call(void 0);
+    return true;
+  }
+  /**
+   * Install a playhead clock push.
+   *
+   * A malformed push is **ignored**, not installed: the last good clock keeps extrapolating, which
+   * is far better than a playhead that jumps to zero because one message was wrong.
+   */
+  setClock(clock) {
+    const normalized = normalizeClock3(clock);
+    if (!normalized) return;
+    this.clock = normalized;
+    this.notify();
+  }
+  /** Install an externally-driven selection. */
+  setSelection(selection, emit = false) {
+    const clipIds = selection.clipIds.filter((id) => this.arrangement.clips[id]);
+    this.selection = { ...selection, clipIds };
+    if (emit) this.host.emit("selection", this.selection);
+    this.notify();
+  }
+  /** Record a tile the host returned. */
+  setLaneTile(tile) {
+    const parsed = parseTileKey(tile.key);
+    if (!parsed) {
+      this.tiles.cancelPending(tile.key);
+      return;
+    }
+    this.tiles.put({ key: tile.key, bitmap: tile.bitmap, ...parsed });
+    this.notify();
+  }
+  /** The tile cache, for the renderer. */
+  get tileCache() {
+    return this.tiles;
+  }
+  /* ── Geometry ──────────────────────────────────────────────────────────── */
+  /** Tell the controller how big it is. */
+  resize(widthPx, heightPx, gutterPx) {
+    const next = this.scale.resized({ widthPx, heightPx, gutterPx });
+    if (next.widthPx === this.scale.widthPx && next.heightPx === this.scale.heightPx && next.gutterPx === this.scale.gutterPx) {
+      return;
+    }
+    this.scale = next;
+    this.cachedVisible = null;
+    this.notify();
+    this.emitViewport.call(void 0);
+  }
+  /** The current scale. */
+  get timeScale() {
+    return this.scale;
+  }
+  /**
+   * Zoom about a pointer.
+   *
+   * @param x - Container-relative pointer x.
+   * @param factor - Zoom multiplier.
+   */
+  zoomAt(x, factor) {
+    this.scale = this.scale.with(
+      zoomAboutCursor(this.scale, x, factor, this.zoomBounds, this.arrangement.durationTicks)
+    );
+    this.cachedVisible = null;
+    this.notify();
+    this.emitViewport.call(void 0);
+  }
+  /**
+   * Handle a wheel event.
+   *
+   * @param event - Deltas, modifiers, and the container-relative x.
+   */
+  wheel(event) {
+    if (event.zoom) {
+      this.zoomAt(event.x, wheelZoomFactor(event.deltaY ?? 0));
+      return;
+    }
+    const dx = event.deltaX ?? 0;
+    const dy = event.deltaY ?? 0;
+    this.scrollBy(this.scale.pxToTicks(dx), dy);
+  }
+  /** Scroll by a tick delta and a pixel delta. */
+  scrollBy(deltaTicks, deltaTopPx) {
+    this.scrollTo(this.scale.scrollTick + deltaTicks, this.scale.scrollTopPx + deltaTopPx);
+  }
+  /** Scroll to an absolute position. The ONE place scroll is written. */
+  scrollTo(scrollTick, scrollTopPx) {
+    const rows = this.computeVisibleCached().rows;
+    const maxTop = Math.max(0, rows.totalPx - Math.max(0, this.scale.heightPx - this.rulerPx));
+    this.scale = this.scale.with({
+      scrollTick: clampScroll(
+        scrollTick,
+        this.scale.pxPerTick,
+        this.scale.lanePx,
+        this.arrangement.durationTicks
+      ),
+      scrollTopPx: Math.max(0, Math.min(scrollTopPx, maxTop))
+    });
+    this.cachedVisible = null;
+    this.notify();
+    this.emitViewport.call(void 0);
+  }
+  /** Fit the whole arrangement, or a range, into the lane. */
+  zoomToFitRange(fromTick = 0, toTick3 = this.arrangement.durationTicks) {
+    const fitted = zoomToFit(fromTick, toTick3, this.scale.lanePx, this.zoomBounds);
+    this.scale = this.scale.with(fitted);
+    this.cachedVisible = null;
+    this.notify();
+    this.emitViewport.call(void 0);
+  }
+  /* ── Tools and snapping ────────────────────────────────────────────────── */
+  /** Change the active tool. Ignored mid-gesture — the mode is frozen at mousedown. */
+  setTool(tool) {
+    if (this.drag) return;
+    this.tool = tool;
+    this.notify();
+  }
+  /** Change snapping. */
+  setSnapMode(mode) {
+    this.snapMode = mode;
+    this.notify();
+  }
+  /** The snap config for the current zoom, with the visible grid. */
+  snapConfig(trimming = false) {
+    const gridTicks = gridTicksFor(this.scale, this.arrangement.timebase);
+    const mode = snapWouldFight(this.scale) ? "off" : this.snapMode;
+    return {
+      ...DEFAULT_SNAP,
+      mode,
+      gridTicks,
+      thresholdPx: trimming ? TRIM_SNAP_PX : DEFAULT_SNAP.thresholdPx
+    };
+  }
+  /* ── Gestures ──────────────────────────────────────────────────────────── */
+  /**
+   * Begin a gesture.
+   *
+   * @param options - What was hit and where.
+   * @returns Whether a gesture started.
+   */
+  pointerDown(options) {
+    const clips = options.clips ?? (options.target.clipId ? this.gestureClips(options.target.clipId, options.modifiers?.additive) : []);
+    if (!this.marqueeEnabled && options.target.kind === "lane") return false;
+    this.drag = beginDrag({ ...options, tool: this.tool, clips });
+    if (!this.drag) return false;
+    this.preview = null;
+    this.notify();
+    return true;
+  }
+  /**
+   * Update the live gesture.
+   *
+   * @param x - Container-relative pointer x.
+   * @param y - Container-relative pointer y.
+   * @param modifiers - Modifiers **as of now** — the snap invert is re-read every move.
+   */
+  pointerMove(x, y, modifiers = {}) {
+    const drag = this.drag;
+    if (!drag) return;
+    if (!passedThreshold(drag, x, y)) return;
+    drag.moved = true;
+    const tick = this.scale.xToTick(x);
+    if (drag.kind === "marquee") {
+      drag.marquee = {
+        fromTick: drag.startTick,
+        toTick: tick,
+        fromY: drag.startY + this.scale.scrollTopPx - this.rulerPx,
+        toY: y + this.scale.scrollTopPx - this.rulerPx
+      };
+      this.preview = { clips: {}, marquee: drag.marquee };
+      this.notify();
+      return;
+    }
+    if (drag.kind === "pan") {
+      this.scrollBy(-this.scale.pxToTicks(x - drag.startX), -(y - drag.startY));
+      drag.startX = x;
+      drag.startY = y;
+      return;
+    }
+    if (drag.kind === "scrub") {
+      const snapped2 = this.snapAbsolute(tick, [], modifiers.snapInvert === true);
+      this.preview = { clips: {}, playheadTick: snapped2 };
+      this.host.emit("seekPreview", { tick: snapped2 });
+      this.notify();
+      return;
+    }
+    const trimming = drag.kind === "trimStart" || drag.kind === "trimEnd";
+    const config = withSnapModifier(this.snapConfig(trimming), modifiers.snapInvert === true);
+    const rawDelta = tick - drag.startTick;
+    const sourceTicks = this.gestureEdges(drag);
+    const candidates = collectSnapTargets(
+      this.arrangement,
+      drag.clipIds,
+      this.playheadTick(),
+      { startTick: this.scale.scrollTick, endTick: this.scale.endTick }
+    );
+    const snapped = snapDelta(sourceTicks, rawDelta, candidates, this.scale, config);
+    drag.deltaTicks = snapped.deltaTicks;
+    if (drag.kind === "move" && this.crossTrackDrag && !modifiers.constrain) {
+      const rows = this.computeVisibleCached().rows;
+      const fromRow = rowAtY(rows, drag.startY + this.scale.scrollTopPx - this.rulerPx);
+      const toRow = rowAtY(rows, y + this.scale.scrollTopPx - this.rulerPx);
+      drag.deltaTracks = fromRow >= 0 && toRow >= 0 ? toRow - fromRow : 0;
+    } else {
+      drag.deltaTracks = 0;
+    }
+    this.preview = previewDrag(
+      drag,
+      drag.deltaTicks,
+      drag.deltaTracks,
+      this.arrangement.tracks.map((t) => t.id)
+    );
+    const op = commitDrag(drag, trimModeFor(drag.tool));
+    if (op) this.emitPreview.call(op);
+    this.notify();
+  }
+  /**
+   * Finish the gesture, emitting **at most one** op.
+   *
+   * @returns The op that was emitted, or `null`.
+   */
+  pointerUp() {
+    const drag = this.drag;
+    this.drag = null;
+    this.preview = null;
+    if (!drag) return null;
+    if (drag.kind === "marquee" && drag.marquee && drag.moved) {
+      const rows = this.computeVisibleCached().rows;
+      const ids = clipsInMarquee(drag.marquee, rows, this.arrangement.tracks, this.arrangement.clips);
+      this.applySelection(ids, drag.modifiers.additive === true);
+      this.notify();
+      return null;
+    }
+    if (drag.kind === "scrub") {
+      const tick = drag.startTick + drag.deltaTicks;
+      this.host.emit("intent", { kind: "seek", tick: this.clampToDuration(tick) });
+      this.notify();
+      return null;
+    }
+    if (!drag.moved) {
+      if (drag.kind === "move" && drag.clipIds.length > 0) {
+        this.applySelection(drag.clipIds, drag.modifiers.additive === true);
+      } else if (drag.kind === "marquee") {
+        this.applySelection([], false);
+      }
+      this.notify();
+      return null;
+    }
+    const op = commitDrag(drag, trimModeFor(drag.tool));
+    if (op) this.host.emit("op", op);
+    this.notify();
+    return op;
+  }
+  /** Abandon the gesture. Nothing was mutated, so there is nothing to roll back. */
+  cancelDrag() {
+    if (!this.drag) return;
+    this.drag = null;
+    this.preview = null;
+    this.notify();
+  }
+  /** Is a gesture live? */
+  get dragging() {
+    return this.drag !== null;
+  }
+  /* ── Direct operations ─────────────────────────────────────────────────── */
+  /** Split the selection, or every clip, at a tick. */
+  split(atTick, all = false) {
+    const tick = this.clampToDuration(atTick);
+    const op = all ? { kind: "splitAll", atTick: tick } : { kind: "split", clipIds: this.selection.clipIds, atTick: tick };
+    if (!all && this.selection.clipIds.length === 0) return null;
+    this.host.emit("op", op);
+    return op;
+  }
+  /** Delete the selection. */
+  deleteSelection(ripple = false) {
+    if (this.selection.clipIds.length === 0) return null;
+    const op = { kind: "delete", clipIds: this.selection.clipIds, ripple };
+    this.host.emit("op", op);
+    return op;
+  }
+  /** Emit any op. The single door for the view's buttons. */
+  dispatchOp(op) {
+    this.host.emit("op", op);
+  }
+  /* ── Selection ─────────────────────────────────────────────────────────── */
+  applySelection(clipIds, additive) {
+    const next = additive && this.multiSelect ? [.../* @__PURE__ */ new Set([...this.selection.clipIds, ...clipIds])] : [...new Set(clipIds)];
+    this.selection = { ...this.selection, clipIds: this.multiSelect ? next : next.slice(0, 1) };
+    this.host.emit("selection", this.selection);
+  }
+  /** Select a clip, or add it to the selection. */
+  selectClip(clipId, additive = false) {
+    this.applySelection([clipId], additive);
+    this.notify();
+  }
+  /** Clear the selection. */
+  clearSelection() {
+    this.applySelection([], false);
+    this.notify();
+  }
+  /**
+   * Move the selection to an adjacent clip.
+   *
+   * Keyboard clip and track navigation, which none of the surveyed products has — and which is what
+   * makes the panel usable without a mouse at all.
+   *
+   * @param direction - Where to go.
+   * @returns The newly selected clip, or `null`.
+   */
+  navigate(direction) {
+    const current = this.selection.clipIds[0];
+    const tracks = this.arrangement.tracks;
+    if (tracks.length === 0) return null;
+    const clip = current ? this.arrangement.clips[current] : void 0;
+    let trackIndex = clip ? tracks.findIndex((t) => t.id === clip.trackId) : 0;
+    if (trackIndex < 0) trackIndex = 0;
+    if (direction === "up" || direction === "down") {
+      const nextIndex = Math.max(0, Math.min(tracks.length - 1, trackIndex + (direction === "down" ? 1 : -1)));
+      const track2 = tracks[nextIndex];
+      const anchor = clip ? clip.startTick : this.playheadTick();
+      const nearest = nearestClip(track2, this.arrangement.clips, anchor);
+      if (!nearest) return null;
+      this.applySelection([nearest.id], false);
+      this.revealClip(nearest);
+      return nearest;
+    }
+    const track = tracks[trackIndex];
+    const ids = track.clipIds;
+    const position = clip ? ids.indexOf(clip.id) : -1;
+    const nextPosition = direction === "next" ? position + 1 : position - 1;
+    const nextId = ids[nextPosition];
+    if (!nextId) return null;
+    const next = this.arrangement.clips[nextId];
+    if (!next) return null;
+    this.applySelection([next.id], false);
+    this.revealClip(next);
+    return next;
+  }
+  /** Scroll the minimum distance to bring a clip on screen. */
+  revealClip(clip) {
+    const scrollTick = scrollToReveal(this.scale, clip.startTick, 24, this.arrangement.durationTicks);
+    if (scrollTick !== this.scale.scrollTick) {
+      this.scrollTo(scrollTick, this.scale.scrollTopPx);
+    } else {
+      this.notify();
+    }
+  }
+  /* ── Playhead ──────────────────────────────────────────────────────────── */
+  /**
+   * The playhead right now.
+   *
+   * Dead-reckoned from the last host push, and **clamped against the LIVE duration every read** —
+   * an arrangement that shrinks while playing would otherwise leave the playhead extrapolating past
+   * the end of a document that no longer goes that far.
+   */
+  playheadTick() {
+    return extrapolateTick3({
+      clock: this.clock,
+      now: this.now(),
+      durationTicks: this.durationOrMax()
+    });
+  }
+  clampToDuration(tick) {
+    return clampTick3(tick, this.durationOrMax());
+  }
+  /** The duration to clamp against; an unset duration must not clamp everything to zero. */
+  durationOrMax() {
+    const duration = this.arrangement.durationTicks;
+    return duration > 0 ? duration : Number.MAX_SAFE_INTEGER;
+  }
+  /* ── Tiles ─────────────────────────────────────────────────────────────── */
+  /**
+   * Ask the host for any lane tiles the visible clips need.
+   *
+   * Requests are coalesced by key, so a scroll does not re-ask for a tile already in flight.
+   *
+   * @returns The requests emitted.
+   */
+  requestTiles() {
+    const visible = this.computeVisibleCached();
+    const bucket = zoomBucket(this.scale.pxPerTick);
+    const out = [];
+    for (const row of visible.tracks) {
+      if (row.track.collapsed) continue;
+      for (const clip of row.clips) {
+        if (!clip.sourceId) continue;
+        const range = sourceRangeFor(clip, this.scale.scrollTick, this.scale.endTick);
+        if (!range) continue;
+        const key = tileKey({
+          sourceId: clip.sourceId,
+          startTick: range.startTick,
+          endTick: range.endTick,
+          zoomBucket: bucket,
+          heightPx: row.heightPx
+        });
+        if (this.tiles.find({ sourceId: clip.sourceId, ...range, zoomBucket: bucket, heightPx: row.heightPx })) {
+          continue;
+        }
+        if (!this.tiles.markPending(key)) continue;
+        const request = {
+          key,
+          clipId: clip.id,
+          trackId: row.track.id,
+          startTick: range.startTick,
+          endTick: range.endTick,
+          widthPx: Math.max(1, Math.round(this.scale.durationToPx(range.endTick - range.startTick))),
+          heightPx: row.heightPx,
+          dpr: 1
+        };
+        out.push(request);
+        this.host.emit("laneTileRequest", request);
+      }
+    }
+    return out;
+  }
+  /* ── Viewport ──────────────────────────────────────────────────────────── */
+  publishViewport() {
+    const visible = this.computeVisibleCached();
+    this.host.emit("viewport", {
+      startTick: Math.round(this.scale.scrollTick),
+      endTick: Math.round(this.scale.endTick),
+      pxPerTick: this.scale.pxPerTick,
+      scrollTopPx: this.scale.scrollTopPx,
+      trackIds: visible.tracks.map((row) => row.track.id)
+    });
+  }
+  /* ── Internals ─────────────────────────────────────────────────────────── */
+  /**
+   * The visible set, recomputed only when something that affects it moved.
+   *
+   * Computing it once per read rather than once per access is what keeps a render from doing the
+   * culling walk several times for the same frame.
+   */
+  computeVisibleCached() {
+    const key = `${this.scale.pxPerTick}|${this.scale.scrollTick}|${this.scale.scrollTopPx}|${this.scale.widthPx}|${this.scale.heightPx}`;
+    if (this.cachedVisible && this.cachedVisible.rev === this.arrangement.rev && this.cachedVisible.key === key) {
+      return this.cachedVisible.value;
+    }
+    const value = computeVisible(this.arrangement, this.scale, {
+      overscan: this.virtualize ? 1 : Number.MAX_SAFE_INTEGER,
+      rulerPx: this.rulerPx
+    });
+    this.cachedVisible = { rev: this.arrangement.rev, key, value };
+    return value;
+  }
+  /** The clips a gesture on `clipId` should move. */
+  gestureClips(clipId, additive) {
+    const clip = this.arrangement.clips[clipId];
+    if (!clip) return [];
+    const selected = this.selection.clipIds;
+    const ids = selected.includes(clipId) ? selected : additive ? [...selected, clipId] : [clipId];
+    const out = [];
+    for (const id of ids) {
+      const found = this.arrangement.clips[id];
+      if (!found) continue;
+      out.push(found);
+      for (const linked of found.linkedIds ?? []) {
+        const partner = this.arrangement.clips[linked];
+        if (partner && !ids.includes(linked)) out.push(partner);
+      }
+    }
+    return out;
+  }
+  /** Every edge a gesture moves, for delta snapping. */
+  gestureEdges(drag) {
+    const out = [];
+    for (const id of drag.clipIds) {
+      const from = drag.origin[id];
+      if (!from) continue;
+      if (drag.kind === "trimStart") out.push(from.startTick);
+      else if (drag.kind === "trimEnd") out.push(from.endTick);
+      else {
+        out.push(from.startTick);
+        out.push(from.endTick);
+      }
+    }
+    return out.length > 0 ? out : [drag.startTick];
+  }
+  /** Snap a bare tick, for the scrub. */
+  snapAbsolute(tick, exclude, invert) {
+    const config = withSnapModifier(this.snapConfig(), invert);
+    const candidates = collectSnapTargets(this.arrangement, exclude, null, {
+      startTick: this.scale.scrollTick,
+      endTick: this.scale.endTick
+    });
+    const result = snapDelta([0], tick, candidates, this.scale, config);
+    return this.clampToDuration(result.deltaTicks);
+  }
+  /* ── Persistence ───────────────────────────────────────────────────────── */
+  /** Preferences only — never the arrangement, never the selection, never a tile. */
+  serialize() {
+    return {
+      tool: this.tool,
+      snapMode: this.snapMode,
+      pxPerTick: this.scale.pxPerTick,
+      scrollTick: Math.round(this.scale.scrollTick),
+      scrollTopPx: Math.round(this.scale.scrollTopPx)
+    };
+  }
+  /** Restore preferences. */
+  deserialize(state) {
+    if (state.tool) this.tool = state.tool;
+    if (state.snapMode) this.snapMode = state.snapMode;
+    this.scale = this.scale.with({
+      pxPerTick: typeof state.pxPerTick === "number" && state.pxPerTick > 0 ? state.pxPerTick : this.scale.pxPerTick,
+      scrollTick: typeof state.scrollTick === "number" ? state.scrollTick : this.scale.scrollTick,
+      scrollTopPx: typeof state.scrollTopPx === "number" ? state.scrollTopPx : this.scale.scrollTopPx
+    });
+    this.cachedVisible = null;
+    this.notify();
+  }
+  /** Release timers, listeners and every cached bitmap. */
+  dispose() {
+    this.emitPreview.cancel();
+    this.emitViewport.cancel();
+    this.listeners.clear();
+    this.tiles.clear();
+    this.drag = null;
+    this.preview = null;
+  }
+};
+function parseTileKey(key) {
+  const parts = key.split("|");
+  if (parts.length !== 5) return null;
+  const [sourceId, startTick, endTick, bucket, heightPx] = parts;
+  const numbers = [startTick, endTick, bucket, heightPx].map(Number);
+  if (!sourceId || numbers.some((n) => !Number.isFinite(n))) return null;
+  return {
+    sourceId,
+    startTick: numbers[0],
+    endTick: numbers[1],
+    zoomBucket: numbers[2],
+    heightPx: numbers[3]
+  };
+}
+function nearestClip(track, clips, tick) {
+  let best = null;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (const id of track.clipIds) {
+    const clip = clips[id];
+    if (!clip) continue;
+    const distance = clip.startTick <= tick && clip.endTick > tick ? 0 : Math.min(Math.abs(clip.startTick - tick), Math.abs(clip.endTick - tick));
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      best = clip;
+    }
+  }
+  return best;
+}
+
+// src/time/timeline/manifest.ts
+var TIMELINE_PANEL_ID = "xeno.core.timeline";
+var timelineManifest = {
+  id: TIMELINE_PANEL_ID,
+  version: "0.1.0",
+  title: "Timeline",
+  icon: "timeline",
+  description: "The arrangement core: a tempo-aware ruler with zoom-to-cursor, virtualized variable-height tracks, culled clip rects, move/trim/split as intents, snapping, marquee selection, an extrapolated playhead, and the host lane-tile round-trip.",
+  defaultSlot: "bottom",
+  inputs: [
+    {
+      id: "arrangement",
+      name: "Arrangement",
+      type: "object",
+      description: "The host-owned arrangement: timebase, duration, tracks, clips, markers, rev. Read-only; the panel re-walks only when rev moves.",
+      multiple: false
+    },
+    {
+      id: "clock",
+      name: "Clock",
+      type: "object",
+      description: "A XenoPlayheadClock push at 2-10Hz. The panel dead-reckons 60fps from it. `playing` is host-authoritative.",
+      multiple: false
+    },
+    {
+      id: "selection",
+      name: "Selection",
+      type: "object",
+      description: "Externally-driven selection, for syncing with an inspector or a layers panel.",
+      multiple: false
+    },
+    {
+      id: "laneTile",
+      name: "Lane Tile",
+      type: "object",
+      description: "The host's answer to a laneTileRequest. The panel BLITS it and never interprets it \u2014 which is why this panel needs no gpu, fs or lib capability.",
+      multiple: true
+    },
+    {
+      id: "overlays",
+      name: "Overlays",
+      type: "array",
+      description: "Host-drawn time-range strips: cache segments, loop brace, punch region, warp markers.",
+      multiple: false
+    }
+  ],
+  outputs: [
+    {
+      id: "op",
+      name: "Operation",
+      type: "object",
+      description: "A XenoTimelineOp \u2014 the ONLY mutation channel, and an INTENT. The host may refuse, clamp or reinterpret it; the panel renders nothing until a new arrangement arrives."
+    },
+    {
+      id: "opPreview",
+      name: "Operation Preview",
+      type: "object",
+      description: "The live gesture, throttled. NEVER history \u2014 a drag produces many of these and exactly one `op`."
+    },
+    {
+      id: "selection",
+      name: "Selection",
+      type: "object",
+      description: "What is selected now."
+    },
+    {
+      id: "intent",
+      name: "Transport Intent",
+      type: "object",
+      description: "Transport intents from ruler scrubbing, in the SAME shape as xeno.core.transport emits \u2014 so a host wires one handler for both panels."
+    },
+    {
+      id: "seekPreview",
+      name: "Seek Preview",
+      type: "object",
+      description: "A throttled scrub position. No commit, no history."
+    },
+    {
+      id: "laneTileRequest",
+      name: "Lane Tile Request",
+      type: "object",
+      description: "A request for lane pixels over a SOURCE tick range. Answer on `laneTile`. Coalesced \u2014 the panel never re-asks for a tile already in flight."
+    },
+    {
+      id: "viewport",
+      name: "Viewport",
+      type: "object",
+      description: "What is on screen, so a host can prefetch decode and render caches. The panel owns scroll and zoom and EMITS them; it never reads them back."
+    },
+    {
+      id: "contextMenuRequest",
+      name: "Context Menu Request",
+      type: "object",
+      description: "A right-click, with what was under it. The host owns the menu."
+    }
+  ],
+  commands: [
+    {
+      id: "set_tool",
+      title: "Set Tool",
+      description: "Change the active tool. Ignored mid-gesture \u2014 the mode is frozen at mousedown.",
+      parameters: { tool: { type: "string", description: "select|razor|ripple|roll|slip|slide|hand|zoom", required: true } }
+    },
+    {
+      id: "set_snap",
+      title: "Set Snapping",
+      description: "off | grid | targets | both.",
+      parameters: { mode: { type: "string", description: "Snap mode", required: true } }
+    },
+    {
+      id: "zoom_to_fit",
+      title: "Zoom to Fit",
+      description: "Fit a tick range into the lane. Omit both for the whole arrangement.",
+      parameters: {
+        fromTick: { type: "number", description: "Range start" },
+        toTick: { type: "number", description: "Range end" }
+      }
+    },
+    {
+      id: "split",
+      title: "Split",
+      description: "Split the selection at a tick. Emits an op; returns null when nothing is selected.",
+      parameters: {
+        atTick: { type: "number", description: "Where to cut", required: true },
+        all: { type: "boolean", description: "Cut every clip, not just the selection" }
+      }
+    },
+    {
+      id: "delete_selection",
+      title: "Delete Selection",
+      description: "Delete the selected clips.",
+      parameters: { ripple: { type: "boolean", description: "Close the gap" } }
+    },
+    {
+      id: "select_clip",
+      title: "Select Clip",
+      description: "Select a clip, or add it to the selection.",
+      parameters: {
+        clipId: { type: "string", description: "Clip id", required: true },
+        additive: { type: "boolean", description: "Add rather than replace" }
+      }
+    },
+    {
+      id: "clear_selection",
+      title: "Clear Selection",
+      description: "Deselect everything.",
+      parameters: {}
+    },
+    {
+      id: "navigate",
+      title: "Navigate",
+      description: "Move the selection to an adjacent clip and scroll it into view. next|previous|up|down.",
+      parameters: { direction: { type: "string", description: "next|previous|up|down", required: true } }
+    },
+    {
+      id: "scroll_to",
+      title: "Scroll To",
+      description: "Scroll to an absolute position.",
+      parameters: {
+        scrollTick: { type: "number", description: "Left edge tick" },
+        scrollTopPx: { type: "number", description: "Vertical scroll" }
+      }
+    }
+  ],
+  config: [
+    {
+      key: "tool",
+      label: "Default tool",
+      type: "select",
+      defaultValue: "select",
+      options: [
+        { label: "Select", value: "select" },
+        { label: "Razor", value: "razor" },
+        { label: "Ripple", value: "ripple" },
+        { label: "Roll", value: "roll" },
+        { label: "Slip", value: "slip" },
+        { label: "Slide", value: "slide" },
+        { label: "Hand", value: "hand" }
+      ],
+      description: "Which tool a fresh panel starts with."
+    },
+    {
+      key: "snapMode",
+      label: "Snapping",
+      type: "select",
+      defaultValue: "both",
+      options: [
+        { label: "Off", value: "off" },
+        { label: "Grid", value: "grid" },
+        { label: "Clips & markers", value: "targets" },
+        { label: "Both", value: "both" }
+      ],
+      description: "What a drag snaps to. The threshold is in screen pixels, so it works at any zoom."
+    },
+    {
+      key: "crossTrackDrag",
+      label: "Allow cross-track drag",
+      type: "boolean",
+      defaultValue: true,
+      description: "Whether a clip can be dragged onto another track."
+    },
+    {
+      key: "multiSelect",
+      label: "Multi-select",
+      type: "boolean",
+      defaultValue: true,
+      description: "Allow more than one clip to be selected."
+    },
+    {
+      key: "marquee",
+      label: "Marquee select",
+      type: "boolean",
+      defaultValue: true,
+      description: "Drag in empty lane space to select a rectangle of clips."
+    },
+    {
+      key: "virtualize",
+      label: "Virtualize",
+      type: "boolean",
+      defaultValue: true,
+      description: "Render only visible rows and clips. On by default \u2014 50 tracks x 2000 clips is the parity floor."
+    },
+    {
+      key: "throttleMs",
+      label: "Preview throttle",
+      type: "number",
+      defaultValue: 100,
+      description: "How often opPreview and viewport are emitted during a gesture, in ms.",
+      placeholder: "100"
+    },
+    {
+      key: "trackHeightPx",
+      label: "Default track height",
+      type: "number",
+      defaultValue: 56,
+      description: "Height of a track that does not declare one.",
+      placeholder: "56"
+    }
+  ],
+  // The whole point of the tile round-trip.
+  capabilities: ["storage.local"],
+  sdk: "^1.0.0"
+};
+
+// 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/workbench/primitives/react";
+import { formatTick as formatTick4 } from "@xenosystem/time-core";
+import { jsx as jsx3, jsxs as jsxs3 } 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" }
+];
+function TimelinePanelView({ controller }) {
+  const state = useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
+  const containerRef = useRef2(null);
+  useEffect2(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      controller.resize(rect.width, rect.height);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [controller]);
+  const localPoint = useCallback2((event) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
+  }, []);
+  const onWheel = useCallback2(
+    (event) => {
+      const { x } = localPoint(event);
+      controller.wheel({
+        deltaX: event.deltaX,
+        deltaY: event.deltaY,
+        x,
+        zoom: event.ctrlKey || event.altKey
+      });
+    },
+    [controller, localPoint]
+  );
+  const onPointerDown = useCallback2(
+    (event) => {
+      const { x, y } = localPoint(event);
+      const scale2 = state.scale;
+      const tick = Math.round(scale2.xToTick(x));
+      if (y < RULER_PX) {
+        controller.pointerDown({
+          target: { kind: "ruler" },
+          x,
+          y,
+          tick,
+          trackIndex: -1,
+          modifiers: { additive: event.shiftKey }
+        });
+        event.target.setPointerCapture?.(event.pointerId);
+        return;
+      }
+      const hit = hitTest(state, x, y);
+      controller.pointerDown({
+        target: hit.target,
+        x,
+        y,
+        tick,
+        trackIndex: hit.trackIndex,
+        modifiers: { additive: event.shiftKey, copy: event.altKey }
+      });
+      event.target.setPointerCapture?.(event.pointerId);
+    },
+    [controller, localPoint, state]
+  );
+  const onPointerMove = useCallback2(
+    (event) => {
+      if (!controller.dragging) return;
+      const { x, y } = localPoint(event);
+      controller.pointerMove(x, y, { snapInvert: event.shiftKey, constrain: event.metaKey });
+    },
+    [controller, localPoint]
+  );
+  const onPointerUp = useCallback2(() => {
+    controller.pointerUp();
+  }, [controller]);
+  const onKeyDown = useCallback2(
+    (event) => {
+      const map = {
+        ArrowRight: "next",
+        ArrowLeft: "previous",
+        ArrowUp: "up",
+        ArrowDown: "down"
+      };
+      const direction = map[event.key];
+      if (direction) {
+        event.preventDefault();
+        controller.navigate(direction);
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        controller.deleteSelection(event.shiftKey);
+        return;
+      }
+      if (event.key === "Escape") controller.cancelDrag();
+    },
+    [controller]
+  );
+  const scale = state.scale;
+  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(
+      Toolbar,
+      {
+        left: /* @__PURE__ */ jsx3(ToolbarGroup, { children: TOOLS.map((tool) => /* @__PURE__ */ jsx3(
+          "button",
+          {
+            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
+          },
+          tool.id
+        )) }),
+        right: /* @__PURE__ */ jsxs3(ToolbarGroup, { end: true, children: [
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsx3("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(
+      "div",
+      {
+        ref: containerRef,
+        tabIndex: 0,
+        role: "application",
+        "aria-label": "Timeline",
+        style: SURFACE,
+        onWheel,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onPointerCancel: onPointerUp,
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsx3("div", { style: { ...RULER, height: RULER_PX }, children: ticks.map((tick) => /* @__PURE__ */ jsx3(
+            "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__ */ jsx3("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: [
+            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) => {
+                  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(
+                    ClipRect,
+                    {
+                      clip,
+                      left: x - scale.gutterPx,
+                      width,
+                      selected: selected.has(clip.id)
+                    },
+                    clip.id
+                  );
+                }) })
+              ] }, row.track.id);
+            }),
+            preview?.marquee ? /* @__PURE__ */ jsx3(
+              "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)
+                }
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx3("div", { style: { ...PLAYHEAD, left: Math.floor(scale.tickToX(state.playheadTick)) } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      StatusBar,
+      {
+        left: state.arrangement ? `${state.arrangement.tracks.length} tracks` : void 0,
+        right: /* @__PURE__ */ jsx3("span", { className: "tabular-nums", children: formatTick4(state.playheadTick, state.timebase) })
+      }
+    )
+  ] });
+}
+function ClipRect({
+  clip,
+  left,
+  width,
+  selected
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-clip-id": clip.id,
+      title: clip.name ?? clip.id,
+      style: {
+        position: "absolute",
+        left,
+        width,
+        top: 2,
+        bottom: 2,
+        // Rectangles with a corner radius. Never a circle.
+        borderRadius: 2,
+        background: selected ? "var(--xeno-control)" : "var(--xeno-border)",
+        border: `1px solid ${selected ? "var(--xeno-active)" : "var(--xeno-control)"}`,
+        overflow: "hidden",
+        fontSize: 10,
+        lineHeight: "14px",
+        padding: width >= 40 ? "0 4px" : 0,
+        whiteSpace: "nowrap",
+        color: "var(--xeno-text)",
+        boxSizing: "border-box"
+      },
+      children: width >= 40 ? clip.name ?? "" : null
+    }
+  );
+}
+function hitTest(state, x, y) {
+  const scale = state.scale;
+  if (x < scale.gutterPx) return { target: { kind: "lane" }, trackIndex: -1 };
+  const contentY = y - RULER_PX + scale.scrollTopPx;
+  for (const row of state.visible) {
+    if (contentY < row.topPx || contentY >= row.topPx + row.heightPx) continue;
+    for (const clip of row.clips) {
+      const clipX = scale.tickToX(clip.startTick);
+      const width = scale.durationToPx(clip.endTick - clip.startTick);
+      if (x < clipX || x > clipX + width) continue;
+      const zone = edgeZone(x - clipX, width);
+      return {
+        target: {
+          kind: zone === "start" ? "clipEdgeStart" : zone === "end" ? "clipEdgeEnd" : "clip",
+          clipId: clip.id,
+          trackId: row.track.id
+        },
+        trackIndex: row.index
+      };
+    }
+    return { target: { kind: "lane", trackId: row.track.id }, trackIndex: row.index };
+  }
+  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,
+  left: 0,
+  right: 0,
+  borderBottom: "1px solid var(--xeno-border)"
+};
+var TICK_LABEL = {
+  position: "absolute",
+  left: 3,
+  top: -12,
+  fontSize: 9,
+  color: "var(--xeno-active)",
+  whiteSpace: "nowrap"
+};
+var GUTTER = {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  bottom: 0,
+  borderRight: "1px solid var(--xeno-border)",
+  borderBottom: "1px solid var(--xeno-border-subtle)",
+  display: "flex",
+  alignItems: "center",
+  padding: "0 6px",
+  boxSizing: "border-box"
+};
+var TRACK_NAME = {
+  fontSize: 10,
+  color: "var(--xeno-text)",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var LANE = {
+  position: "absolute",
+  right: 0,
+  top: 0,
+  bottom: 0,
+  borderBottom: "1px solid var(--xeno-border-subtle)"
+};
+var MARQUEE = {
+  position: "absolute",
+  border: "1px solid var(--xeno-active)",
+  background: "var(--xeno-border-subtle)",
+  pointerEvents: "none"
+};
+var PLAYHEAD = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: 1,
+  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"
+  };
+}
+
+// src/time/timeline/panel.ts
+var TOOLS2 = [
+  "select",
+  "razor",
+  "ripple",
+  "roll",
+  "slip",
+  "slide",
+  "hand",
+  "zoom"
+];
+var SNAP_MODES = ["off", "grid", "targets", "both"];
+function createTimelinePanel(options = {}) {
+  return {
+    manifest: timelineManifest,
+    activate(host) {
+      const initial = host.config ?? {};
+      const controller = new TimelineController({
+        host: { emit: (portId, value) => host.emit(portId, value) },
+        tool: toolOf(configString(initial, "tool", "select")),
+        snapMode: snapOf(configString(initial, "snapMode", "both")),
+        crossTrackDrag: configBool(initial, "crossTrackDrag", true),
+        multiSelect: configBool(initial, "multiSelect", true),
+        marquee: configBool(initial, "marquee", true),
+        virtualize: configBool(initial, "virtualize", true),
+        throttleMs: configNumber(initial, "throttleMs", 100)
+      });
+      const resolve = (config) => ({
+        trackHeightPx: configNumber(config, "trackHeightPx", 56),
+        virtualize: configBool(config, "virtualize", true)
+      });
+      let renderConfig = resolve(initial);
+      let unrender = null;
+      let root = null;
+      let currentEl = null;
+      const draw = (el) => {
+        unrender?.();
+        if (options.render) {
+          unrender = options.render(el, { controller, config: renderConfig });
+          return;
+        }
+        root = createRoot2(el);
+        root.render(createElement2(TimelinePanelView, { controller, ...renderConfig }));
+        unrender = () => {
+          root?.unmount();
+          root = null;
+        };
+      };
+      const unbindConfig = bindConfig(host, (config) => {
+        renderConfig = resolve(config);
+        const tool = toolOf(configString(config, "tool", "select"));
+        const snap = snapOf(configString(config, "snapMode", "both"));
+        controller.setTool(tool);
+        controller.setSnapMode(snap);
+        if (currentEl) draw(currentEl);
+      });
+      return {
+        render(el) {
+          currentEl = el;
+          draw(el);
+        },
+        onInput(portId, value) {
+          if (portId === "arrangement") {
+            if (hasFields(value, "tracks", "clips", "rev") && Array.isArray(value.tracks) && isRecord(value.clips)) {
+              controller.setArrangement(value);
+            }
+          } else if (portId === "clock") {
+            if (isRecord(value)) controller.setClock(value);
+          } else if (portId === "selection") {
+            if (isRecord(value) && Array.isArray(value.clipIds)) {
+              controller.setSelection(value);
+            }
+          } else if (portId === "laneTile") {
+            if (isRecord(value) && typeof value.key === "string") {
+              controller.setLaneTile(value);
+            }
+          }
+        },
+        async onCommand(commandId, params) {
+          switch (commandId) {
+            case "set_tool":
+              controller.setTool(toolOf(String(params.tool)));
+              return true;
+            case "set_snap":
+              controller.setSnapMode(snapOf(String(params.mode)));
+              return true;
+            case "zoom_to_fit":
+              controller.zoomToFitRange(
+                typeof params.fromTick === "number" ? params.fromTick : 0,
+                typeof params.toTick === "number" ? params.toTick : void 0
+              );
+              return true;
+            case "split":
+              return controller.split(Number(params.atTick), params.all === true);
+            case "delete_selection":
+              return controller.deleteSelection(params.ripple === true);
+            case "select_clip":
+              controller.selectClip(String(params.clipId), params.additive === true);
+              return true;
+            case "clear_selection":
+              controller.clearSelection();
+              return true;
+            case "navigate":
+              return controller.navigate(navigationOf(String(params.direction)));
+            case "scroll_to":
+              controller.scrollTo(
+                typeof params.scrollTick === "number" ? params.scrollTick : controller.timeScale.scrollTick,
+                typeof params.scrollTopPx === "number" ? params.scrollTopPx : controller.timeScale.scrollTopPx
+              );
+              return true;
+            default:
+              return;
+          }
+        },
+        // 🔴 U6: preferences, never content. No arrangement, no selection, no tile.
+        serialize() {
+          return controller.serialize();
+        },
+        deserialize(state) {
+          if (isRecord(state)) controller.deserialize(state);
+        },
+        // 🔴 U4: everything taken in activate is released here — listeners, timers, and every
+        // cached ImageBitmap (whose pixels live outside the JS heap).
+        dispose() {
+          unbindConfig();
+          currentEl = null;
+          unrender?.();
+          unrender = null;
+          controller.dispose();
+        }
+      };
+    }
+  };
+}
+function toolOf(value) {
+  return TOOLS2.includes(value) ? value : "select";
+}
+function snapOf(value) {
+  return SNAP_MODES.includes(value) ? value : "both";
+}
+function navigationOf(value) {
+  return value === "previous" || value === "up" || value === "down" ? value : "next";
+}
+var timelinePanel = createTimelinePanel();
+
+// src/time/timeline/types.ts
+function clipsOverlap(a, b) {
+  return a.startTick < b.endTick && b.startTick < a.endTick;
+}
+function clipDuration(clip) {
+  return Math.max(0, clip.endTick - clip.startTick);
+}
+function hasSourceWindow(clip) {
+  return typeof clip.sourceInTick === "number" && typeof clip.sourceOutTick === "number";
+}
+
+// src/time/calendar/panel.ts
+import { createElement as createElement3 } from "react";
+import { createRoot as createRoot3 } from "react-dom/client";
+import {
+  isRecord as isRecord2,
+  bindConfig as bindConfig2
+} from "@xenosystem/panel-sdk";
+import { unwrapResult } from "@xenosystem/data-core";
+
+// src/time/calendar/layout.ts
+import { bucketKey, formatValue, parseTime, zonedParts } from "@xenosystem/data-core";
+
+// src/time/calendar/types.ts
+var ALL_CALENDAR_MODES = Object.freeze([
+  "month",
+  "week",
+  "day",
+  "agenda",
+  "timeline"
+]);
+function daysInMonth(year, month) {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function dayKey(year, month, day) {
+  return `${year}-${pad2(month)}-${pad2(day)}`;
+}
+function parseDayKey(key) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(key);
+  if (!m) return null;
+  return { year: Number(m[1]), month: Number(m[2]), day: Number(m[3]) };
+}
+function isoWeekday(key) {
+  const parts = parseDayKey(key);
+  if (!parts) return 1;
+  const dow = new Date(Date.UTC(parts.year, parts.month - 1, parts.day)).getUTCDay();
+  return dow === 0 ? 7 : dow;
+}
+function addDays(key, days) {
+  const parts = parseDayKey(key);
+  if (!parts) return key;
+  const d = new Date(Date.UTC(parts.year, parts.month - 1, parts.day + days));
+  return dayKey(d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate());
+}
+function addMonths(key, months) {
+  const parts = parseDayKey(key);
+  if (!parts) return key;
+  const total = parts.year * 12 + (parts.month - 1) + months;
+  const year = Math.floor(total / 12);
+  const month = total % 12 + 1;
+  return dayKey(year, month, Math.min(parts.day, daysInMonth(year, month)));
+}
+function gridStart(monthKey, firstDayOfWeek) {
+  const parts = parseDayKey(monthKey);
+  if (!parts) return monthKey;
+  const first = dayKey(parts.year, parts.month, 1);
+  const weekday = isoWeekday(first);
+  const offset = (weekday - firstDayOfWeek + 7) % 7;
+  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";
+  return "neutral";
+}
+function columnMap(result) {
+  return new Map((result?.columns ?? []).map((c) => [c.id, c]));
+}
+
+// src/time/calendar/layout.ts
+function minutesOf(value, column, timeZone) {
+  const parsed = parseTime(value, column?.type);
+  if (!parsed || parsed.dateOnly) return null;
+  const parts = zonedParts(parsed.epoch, timeZone);
+  return parts.hour * 60 + parts.minute;
+}
+function deriveEvents(result, options) {
+  const columns = columnMap(result);
+  const startColumn = columns.get(options.dateColumnId);
+  const endColumn = options.endDateColumnId ? columns.get(options.endDateColumnId) : void 0;
+  const titleColumn = options.titleColumnId ? columns.get(options.titleColumnId) : result.columns.find((c) => c.role === "identifier") ?? result.columns.find((c) => c.type === "string");
+  const events = [];
+  for (const row of result.rows) {
+    const rawStart = row.values[options.dateColumnId] ?? null;
+    const parsedStart = parseTime(rawStart, startColumn?.type);
+    if (!parsedStart) continue;
+    const startKey = bucketKey(parsedStart, "day", options.timeZone);
+    let endKey = startKey;
+    if (options.endDateColumnId) {
+      const parsedEnd = parseTime(row.values[options.endDateColumnId] ?? null, endColumn?.type);
+      if (parsedEnd) endKey = bucketKey(parsedEnd, "day", options.timeZone);
+      if (endKey < startKey) endKey = startKey;
+    }
+    const startMinutes = minutesOf(rawStart, startColumn, options.timeZone);
+    const endMinutes = options.endDateColumnId ? minutesOf(row.values[options.endDateColumnId] ?? null, endColumn, options.timeZone) : null;
+    const fields = {};
+    for (const columnId of options.chipFields ?? []) {
+      const column = columns.get(columnId);
+      if (column) fields[columnId] = formatValue(row.values[columnId] ?? null, column);
+    }
+    events.push({
+      id: row.id,
+      title: titleColumn ? formatValue(row.values[titleColumn.id] ?? null, titleColumn) : row.id,
+      startKey,
+      endKey,
+      startMinutes,
+      endMinutes,
+      multiDay: endKey !== startKey,
+      // All-day when the source is a calendar date, or when no clock is present.
+      allDay: startMinutes === null,
+      fields: Object.keys(fields).length > 0 ? fields : void 0,
+      status: options.statusColumnId ? row.values[options.statusColumnId] ?? null : void 0,
+      row
+    });
+  }
+  return events.sort((a, b) => {
+    if (a.startKey !== b.startKey) return a.startKey < b.startKey ? -1 : 1;
+    const am = a.startMinutes ?? -1;
+    const bm = b.startMinutes ?? -1;
+    if (am !== bm) return am - bm;
+    return a.id < b.id ? -1 : 1;
+  });
+}
+function buildCells(events, options) {
+  const max = Math.max(1, options.maxChipsPerCell ?? 3);
+  const cells = [];
+  for (let i = 0; i < options.days; i += 1) {
+    const key = addDays(options.start, i);
+    const parts = key.split("-");
+    const covering = events.filter((e) => e.startKey <= key && e.endKey >= key);
+    cells.push({
+      key,
+      day: Number(parts[2]),
+      inPeriod: options.periodMonth ? key.startsWith(options.periodMonth) : true,
+      today: options.today === key,
+      events: covering.slice(0, max),
+      overflow: Math.max(0, covering.length - max)
+    });
+  }
+  return cells;
+}
+function packOverlaps(events) {
+  const timed = events.filter((e) => e.startMinutes !== null);
+  const placed = [];
+  for (const event of timed) {
+    const start = event.startMinutes ?? 0;
+    const end = event.endMinutes !== null && event.endMinutes > start ? event.endMinutes : start + 30;
+    const taken = new Set(
+      placed.filter((p) => p.start < end && p.end > start).map((p) => p.column)
+    );
+    let column = 0;
+    while (taken.has(column)) column += 1;
+    placed.push({ event, column, start, end });
+  }
+  return placed.map((p) => {
+    const cluster = placed.filter((q) => q.start < p.end && q.end > p.start);
+    const columns = Math.max(...cluster.map((q) => q.column)) + 1;
+    return { event: p.event, column: p.column, columns };
+  });
+}
+function todayKey(timeZone, now = Date.now()) {
+  const parts = zonedParts(now, timeZone);
+  return dayKey(parts.year, parts.month, parts.day);
+}
+function weekStart(key, firstDayOfWeek) {
+  const offset = (isoWeekday(key) - firstDayOfWeek + 7) % 7;
+  return addDays(key, -offset);
+}
+function rowInWindow(row, columnId, column, from, to) {
+  const parsed = parseTime(row.values[columnId] ?? null, column?.type);
+  if (!parsed) return false;
+  const start = Date.parse(from);
+  const end = Date.parse(to);
+  return parsed.epoch >= start && parsed.epoch < end;
+}
+
+// src/time/calendar/controller.ts
+var counter = 0;
+var defaultMakeId = () => `cal-${(counter += 1).toString(36)}`;
+function resolveZone(zone) {
+  if (!zone || zone === "local") {
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    } catch {
+      return "UTC";
+    }
+  }
+  return zone;
+}
+var CalendarController = class {
+  host;
+  makeId;
+  now;
+  listeners = /* @__PURE__ */ new Set();
+  firstDayOfWeek;
+  maxChipsPerCell;
+  allowDrag;
+  derive;
+  result = null;
+  viewMode;
+  anchor;
+  selection = [];
+  window = null;
+  snapshot = null;
+  constructor(options) {
+    this.host = options.host;
+    this.makeId = options.host.makeId ?? defaultMakeId;
+    this.now = options.host.now ?? (() => Date.now());
+    this.firstDayOfWeek = clampWeekday(options.firstDayOfWeek ?? 1);
+    this.maxChipsPerCell = Math.max(1, options.maxChipsPerCell ?? 3);
+    this.allowDrag = options.allowDrag !== false;
+    this.derive = {
+      dateColumnId: options.dateColumnId ?? "",
+      endDateColumnId: options.endDateColumnId,
+      timeZone: resolveZone(options.timeZone),
+      titleColumnId: options.titleColumnId,
+      chipFields: options.chipFields,
+      statusColumnId: options.statusColumnId
+    };
+    this.viewMode = options.initial?.viewMode ?? options.viewMode ?? "month";
+    this.anchor = options.initial?.anchor ?? todayKey(this.derive.timeZone, this.now());
+    if (options.initial?.selection) this.selection = [...options.initial.selection];
+  }
+  /* ── Subscription ──────────────────────────────────────────────────────── */
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  getState = () => {
+    if (!this.snapshot) {
+      const events = this.events();
+      this.snapshot = {
+        viewMode: this.viewMode,
+        window: this.window,
+        cells: this.cells(events),
+        events,
+        selection: this.selection,
+        empty: events.length === 0,
+        partial: this.result?.status === "partial",
+        errorMessage: this.result?.status === "error" ? this.result.error?.message ?? null : null,
+        configProblem: this.configProblem()
+      };
+    }
+    return this.snapshot;
+  };
+  notify() {
+    this.snapshot = null;
+    for (const listener of this.listeners) listener();
+  }
+  /** Why the panel cannot render, as a sentence. A blank grid explains nothing. */
+  configProblem() {
+    if (!this.derive.dateColumnId) return "Set a date column to place rows on the calendar.";
+    if (!this.result) return null;
+    const column = columnMap(this.result).get(this.derive.dateColumnId);
+    if (!column) return `The date column \u201C${this.derive.dateColumnId}\u201D is not in this result.`;
+    const temporal = column.type === "date" || column.type === "datetime";
+    if (!temporal) {
+      return `\u201C${column.name}\u201D is a ${column.type} column. Declare it as date or datetime.`;
+    }
+    return null;
+  }
+  /* ── Inputs ────────────────────────────────────────────────────────────── */
+  /** Receive a result. */
+  setResult(result) {
+    this.result = result;
+    this.notify();
+  }
+  /** Receive an externally set window (a host driving navigation). Does not re-emit. */
+  setWindow(window) {
+    this.window = window;
+    const parts = window.from.slice(0, 10);
+    if (parseDayKey(parts)) this.anchor = parts;
+    this.notify();
+  }
+  /** Receive a host-driven selection. */
+  setSelection(rowIds) {
+    this.selection = [...rowIds];
+    this.notify();
+  }
+  /* ── Derivation ────────────────────────────────────────────────────────── */
+  /** Events derived from the current result. */
+  events() {
+    if (!this.result || !this.derive.dateColumnId) return [];
+    if (this.configProblem()) return [];
+    return deriveEvents(this.result, this.derive);
+  }
+  /** The visible day cells for the current mode. */
+  cells(events = this.events()) {
+    const geometry = this.geometry();
+    if (!geometry) return [];
+    return buildCells(events, {
+      start: geometry.start,
+      days: geometry.days,
+      periodMonth: this.viewMode === "month" ? this.anchor.slice(0, 7) : null,
+      today: todayKey(this.derive.timeZone, this.now()),
+      maxChipsPerCell: this.maxChipsPerCell
+    });
+  }
+  /** Grid geometry for the current mode. `null` for agenda/timeline, which are not grids. */
+  geometry() {
+    const parts = parseDayKey(this.anchor);
+    if (!parts) return null;
+    switch (this.viewMode) {
+      case "month": {
+        const start = gridStart(this.anchor, this.firstDayOfWeek);
+        return { start, days: 42 };
+      }
+      case "week":
+        return { start: weekStart(this.anchor, this.firstDayOfWeek), days: 7 };
+      case "day":
+        return { start: this.anchor, days: 1 };
+      default:
+        return null;
+    }
+  }
+  /**
+   * The window the current view covers.
+   *
+   * Agenda and timeline follow the month, so navigation stays meaningful in every mode.
+   */
+  computeWindow() {
+    if (!this.derive.dateColumnId) return null;
+    const parts = parseDayKey(this.anchor);
+    if (!parts) return null;
+    let start;
+    let days;
+    if (this.viewMode === "week") {
+      start = weekStart(this.anchor, this.firstDayOfWeek);
+      days = 7;
+    } else if (this.viewMode === "day") {
+      start = this.anchor;
+      days = 1;
+    } else {
+      start = dayKey(parts.year, parts.month, 1);
+      days = daysInMonth(parts.year, parts.month);
+    }
+    return {
+      from: `${start}T00:00:00`,
+      // EXCLUSIVE end — an inclusive one double-counts the boundary day between two windows.
+      to: `${addDays(start, days)}T00:00:00`,
+      columnId: this.derive.dateColumnId,
+      timeZone: this.derive.timeZone
+    };
+  }
+  /**
+   * Emit the window and the matching query.
+   *
+   * **This is the port that makes calendar a panel**: the visible range is the fetch key, so moving
+   * a month is a re-fetch, not a re-projection.
+   */
+  emitWindow(force = false) {
+    const window = this.computeWindow();
+    if (!window) return null;
+    if (!force && this.window && JSON.stringify(window) === JSON.stringify(this.window)) {
+      return null;
+    }
+    this.window = window;
+    this.host.emit("window", window);
+    const query = {
+      window,
+      sorts: [{ columnId: window.columnId, direction: "asc" }]
+    };
+    this.host.emit("queryRequest", { requestId: this.makeId(), reason: "window", query });
+    this.notify();
+    return window;
+  }
+  /* ── Navigation ────────────────────────────────────────────────────────── */
+  /** Switch view mode and re-emit the window. */
+  setViewMode(mode) {
+    if (!ALL_CALENDAR_MODES.includes(mode)) return false;
+    if (this.viewMode === mode) return true;
+    this.viewMode = mode;
+    this.emitWindow();
+    this.notify();
+    return true;
+  }
+  /** Step forward or back by one period. */
+  navigate(direction) {
+    if (this.viewMode === "week") this.anchor = addDays(this.anchor, 7 * direction);
+    else if (this.viewMode === "day") this.anchor = addDays(this.anchor, direction);
+    else this.anchor = addMonths(this.anchor, direction);
+    this.emitWindow();
+  }
+  /** Jump to today, in the DECLARED zone — never the runtime's, unless that is what was declared. */
+  goToToday() {
+    this.anchor = todayKey(this.derive.timeZone, this.now());
+    this.emitWindow();
+  }
+  /** Jump to a specific day. */
+  goToDate(key) {
+    if (!parseDayKey(key)) return false;
+    this.anchor = key;
+    this.emitWindow();
+    return true;
+  }
+  /** The anchor day key. */
+  anchorKey() {
+    return this.anchor;
+  }
+  /* ── Interaction ───────────────────────────────────────────────────────── */
+  /** Select events. */
+  select(rowIds, additive = false) {
+    const next = additive ? (() => {
+      const set = new Set(this.selection);
+      for (const id of rowIds) {
+        if (set.has(id)) set.delete(id);
+        else set.add(id);
+      }
+      return [...set];
+    })() : [...rowIds];
+    if (next.length === this.selection.length && next.every((id, i) => id === this.selection[i])) {
+      return;
+    }
+    this.selection = next;
+    this.host.emit("selection", next);
+    this.notify();
+  }
+  /** Open an event. */
+  activateRow(rowId) {
+    if (!this.events().some((e) => e.id === rowId)) return false;
+    this.host.emit("rowActivate", { rowId });
+    return true;
+  }
+  /** Click an empty slot — the create affordance. */
+  activateSlot(date, time) {
+    if (!parseDayKey(date)) return false;
+    this.host.emit("slotActivate", { date, time });
+    return true;
+  }
+  /**
+   * Drag-to-reschedule — an INTENT. The host writes and republishes.
+   *
+   * The new value carries the target day and, for a timed event, the original clock time: dropping
+   * an event on a day should move the day, not silently reset it to midnight.
+   *
+   * @returns `true` when an intent was emitted.
+   */
+  rescheduleTo(rowId, targetDate, targetMinutes) {
+    if (!this.allowDrag) return false;
+    const event = this.events().find((e) => e.id === rowId);
+    if (!event || !parseDayKey(targetDate)) return false;
+    if (event.startKey === targetDate && targetMinutes === void 0) return false;
+    const minutes = targetMinutes ?? event.startMinutes;
+    const value = minutes === null || minutes === void 0 ? targetDate : `${targetDate}T${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}:00`;
+    const edit = {
+      rowId,
+      columnId: this.derive.dateColumnId,
+      value,
+      previousValue: event.row.values[this.derive.dateColumnId] ?? null,
+      gestureId: this.makeId()
+    };
+    if (this.derive.endDateColumnId && event.multiDay) {
+      const span = daysBetween(event.startKey, event.endKey);
+      edit.endColumnId = this.derive.endDateColumnId;
+      edit.endValue = addDays(targetDate, span);
+    }
+    this.host.emit("edit", edit);
+    return true;
+  }
+  /** Ask the host to open a context menu. */
+  requestContextMenu(rowIds, x, y) {
+    this.host.emit("contextMenuRequest", { rowIds: [...rowIds], x, y });
+  }
+  /* ── Persistence ───────────────────────────────────────────────────────── */
+  /** Serialize. View mode, anchor and selection — never a result, never events. */
+  serialize() {
+    return { viewMode: this.viewMode, anchor: this.anchor, selection: [...this.selection] };
+  }
+  /** Restore. Does not emit. */
+  deserialize(state) {
+    if (state.viewMode && ALL_CALENDAR_MODES.includes(state.viewMode)) this.viewMode = state.viewMode;
+    if (state.anchor && parseDayKey(state.anchor)) this.anchor = state.anchor;
+    if (state.selection) this.selection = [...state.selection];
+    this.notify();
+  }
+  /** The resolved zone — exposed so a host can render it. */
+  timeZone() {
+    return this.derive.timeZone;
+  }
+  /** Drop listeners. */
+  dispose() {
+    this.listeners.clear();
+  }
+};
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+function clampWeekday(n) {
+  const v = Math.floor(Number(n));
+  return Number.isFinite(v) && v >= 1 && v <= 7 ? v : 1;
+}
+function daysBetween(from, to) {
+  const a = parseDayKey(from);
+  const b = parseDayKey(to);
+  if (!a || !b) return 0;
+  return Math.round(
+    (Date.UTC(b.year, b.month - 1, b.day) - Date.UTC(a.year, a.month - 1, a.day)) / 864e5
+  );
+}
+
+// src/time/calendar/manifest.ts
+import { WELL_KNOWN_PORT_SCHEMAS as WELL_KNOWN_PORT_SCHEMAS2 } from "@xenosystem/panel-sdk";
+var CALENDAR_PANEL_ID = "xeno.core.calendar";
+var calendarManifest = {
+  id: CALENDAR_PANEL_ID,
+  version: "0.1.0",
+  title: "Calendar",
+  icon: "calendar",
+  description: "Month, week, day, agenda and timeline views over a result set. The visible window is an output that drives the query, and every date is bucketed through a mandatory time zone.",
+  defaultSlot: "center",
+  inputs: [
+    {
+      id: "result",
+      name: "Result",
+      type: "object",
+      schema: WELL_KNOWN_PORT_SCHEMAS2.RESULT_SET,
+      description: "The rows to place. Identity comes from row ids, never from position.",
+      multiple: false
+    },
+    {
+      id: "window",
+      name: "Window",
+      type: "object",
+      description: "An externally set window (a host driving navigation). Does not re-emit.",
+      multiple: false
+    },
+    {
+      id: "selection",
+      name: "Selection",
+      type: "array",
+      description: "Host-driven selection.",
+      multiple: false
+    }
+  ],
+  outputs: [
+    {
+      id: "window",
+      name: "Window",
+      type: "object",
+      description: "THE discriminator: {from, to, columnId, timeZone}. Month navigation re-fetches \u2014 the window is the fetch key, not a projection."
+    },
+    {
+      id: "queryRequest",
+      name: "Query Request",
+      type: "object",
+      // The {requestId, query} ENVELOPE — what this port actually emits. It wore the bare-query
+      // tag until that collision let a bare-query producer wire into `connectors.query`. (C2)
+      schema: WELL_KNOWN_PORT_SCHEMAS2.QUERY_REQUEST,
+      description: "The query the new window implies, carrying that window verbatim."
+    },
+    { id: "selection", name: "Selection", type: "array", description: "Selected row ids." },
+    {
+      id: "edit",
+      name: "Edit",
+      type: "object",
+      description: "A drag-to-reschedule INTENT. The host writes; one gestureId, one undo entry. A span keeps its duration."
+    },
+    {
+      id: "slotActivate",
+      name: "Slot Activated",
+      type: "object",
+      description: "An empty slot was clicked: {date, time?}. The create affordance."
+    },
+    { id: "rowActivate", name: "Row Activated", type: "object", description: "An event was opened." },
+    {
+      id: "contextMenuRequest",
+      name: "Context Menu Request",
+      type: "object",
+      description: "The host opens its own menu."
+    }
+  ],
+  commands: [
+    {
+      id: "set_view_mode",
+      title: "Set View Mode",
+      description: "month | week | day | agenda | timeline.",
+      parameters: { mode: { type: "string", description: "View mode", required: true } }
+    },
+    {
+      id: "navigate",
+      title: "Navigate",
+      description: "Step one period forward or back, re-emitting the window.",
+      parameters: { direction: { type: "number", description: "1 or -1", required: true } }
+    },
+    {
+      id: "go_to_today",
+      title: "Go To Today",
+      description: "Jump to today in the DECLARED zone.",
+      parameters: {}
+    },
+    {
+      id: "go_to_date",
+      title: "Go To Date",
+      description: "Jump to a day key (YYYY-MM-DD).",
+      parameters: { date: { type: "string", description: "Day key", required: true } }
+    },
+    {
+      id: "select_events",
+      title: "Select Events",
+      description: "Replace or toggle the selection.",
+      parameters: {
+        rowIds: { type: "array", description: "Row ids", required: true },
+        additive: { type: "boolean", description: "Toggle membership" }
+      }
+    },
+    {
+      id: "reschedule",
+      title: "Reschedule",
+      description: "Move an event. Emits an intent; the host writes.",
+      parameters: {
+        rowId: { type: "string", description: "Row id", required: true },
+        date: { type: "string", description: "Target day key", required: true },
+        time: { type: "number", description: "Minutes from midnight" }
+      }
+    },
+    {
+      id: "get_events",
+      title: "Get Events",
+      description: "Return the derived events.",
+      parameters: {}
+    }
+  ],
+  config: [
+    {
+      key: "viewMode",
+      label: "View",
+      type: "select",
+      defaultValue: "month",
+      options: [
+        { label: "Month", value: "month" },
+        { label: "Week", value: "week" },
+        { label: "Day", value: "day" },
+        { label: "Agenda", value: "agenda" },
+        { label: "Timeline", value: "timeline" }
+      ],
+      description: "Timeline is the Gantt/duration-bar mode \u2014 anything with a time axis is calendar, per the family rule."
+    },
+    {
+      key: "firstDayOfWeek",
+      label: "Week starts on",
+      type: "number",
+      defaultValue: 1,
+      description: "1 = Monday, 7 = Sunday. CONFIG, not a constant \u2014 post is Monday-first and notes is Sunday-first, so a calendar that assumes either is wrong for half its users.",
+      placeholder: "1"
+    },
+    {
+      key: "dateColumnId",
+      label: "Date column",
+      type: "text",
+      description: "The start column. Required \u2014 without it the panel says so rather than rendering blank.",
+      placeholder: "due_at"
+    },
+    {
+      key: "endDateColumnId",
+      label: "End column",
+      type: "text",
+      description: "For multi-day spans and durations.",
+      placeholder: "ends_at"
+    },
+    {
+      key: "timeZone",
+      label: "Time zone",
+      type: "text",
+      defaultValue: "local",
+      description: 'IANA zone, or "local". EXPLICIT by design: both shipped calendar bugs in the ecosystem are a zone nobody declared.',
+      placeholder: "Europe/Bucharest"
+    },
+    {
+      key: "maxChipsPerCell",
+      label: "Chips per day",
+      type: "number",
+      defaultValue: 3,
+      description: "Before an overflow indicator appears.",
+      placeholder: "3"
+    },
+    {
+      key: "chipFields",
+      label: "Chip fields",
+      type: "json",
+      description: "Extra column ids to show on a chip.",
+      placeholder: '["owner"]'
+    },
+    {
+      key: "titleColumnId",
+      label: "Title column",
+      type: "text",
+      description: "Chip title. Defaults to the first identifier column.",
+      placeholder: "name"
+    },
+    {
+      key: "statusColumnId",
+      label: "Status column",
+      type: "text",
+      description: "Drives chip tone.",
+      placeholder: "status"
+    },
+    {
+      key: "businessHours",
+      label: "Business hours",
+      type: "json",
+      description: "Minutes from midnight \u2014 shades the working day in week/day views.",
+      placeholder: '{"start":540,"end":1080}'
+    },
+    {
+      key: "slotMinutes",
+      label: "Slot size",
+      type: "number",
+      defaultValue: 30,
+      description: "Minutes per row in week/day views.",
+      placeholder: "30"
+    },
+    {
+      key: "allowDrag",
+      label: "Allow reschedule",
+      type: "boolean",
+      defaultValue: true,
+      description: "Permit drag-to-reschedule."
+    },
+    {
+      key: "emptyHint",
+      label: "Empty hint",
+      type: "text",
+      description: "Say how to add something, not that there is nothing.",
+      placeholder: "Click a day to schedule something."
+    }
+  ],
+  capabilities: ["storage.local"],
+  sdk: "^1.1.0"
+};
+
+// src/time/calendar/react/CalendarPanelView.tsx
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+import {
+  Badge,
+  EmptyState as EmptyState2,
+  ErrorState,
+  IconButton,
+  Row,
+  RowList,
+  ScrollArea,
+  SegmentedControl,
+  StatusBar as StatusBar2,
+  TextButton,
+  Toolbar as Toolbar2,
+  ToolbarGroup as ToolbarGroup2
+} from "@xenosystem/workbench/primitives/react";
+
+// src/time/calendar/react/icons.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ChevronGlyph({ direction }) {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      width: 11,
+      height: 11,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      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" })
+    }
+  );
+}
+
+// src/time/calendar/react/CalendarPanelView.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+function CalendarPanelView({
+  controller,
+  firstDayOfWeek = 1,
+  emptyHint
+}) {
+  const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
+  const toolbar = /* @__PURE__ */ jsx5(
+    Toolbar2,
+    {
+      left: /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx5(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "left" }),
+            label: "Previous",
+            onClick: () => controller.navigate(-1)
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "right" }),
+            label: "Next",
+            onClick: () => controller.navigate(1)
+          }
+        ),
+        /* @__PURE__ */ jsx5(TextButton, { onClick: () => controller.goToToday(), children: "Today" }),
+        /* @__PURE__ */ jsx5("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(
+          SegmentedControl,
+          {
+            size: "sm",
+            label: "View",
+            options: [
+              { value: "month", label: "M" },
+              { value: "week", label: "W" },
+              { value: "day", label: "D" },
+              { value: "agenda", label: "Agenda" },
+              { value: "timeline", label: "Timeline" }
+            ],
+            value: state.viewMode,
+            onChange: (mode) => controller.setViewMode(mode)
+          }
+        )
+      ] })
+    }
+  );
+  const body = (() => {
+    if (state.configProblem) {
+      return /* @__PURE__ */ jsx5(EmptyState2, { title: "Not configured", hint: state.configProblem });
+    }
+    if (state.errorMessage) {
+      return /* @__PURE__ */ jsx5(ErrorState, { title: "Could not load events", message: state.errorMessage });
+    }
+    if (state.empty) {
+      return /* @__PURE__ */ jsx5(
+        EmptyState2,
+        {
+          title: "Nothing scheduled",
+          hint: emptyHint ?? "Click a day to schedule something."
+        }
+      );
+    }
+    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(
+        Row,
+        {
+          label: event.title,
+          meta: event.multiDay ? `${event.startKey} \u2192 ${event.endKey}` : event.startKey,
+          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
+        },
+        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(
+        "div",
+        {
+          style: {
+            fontSize: 9,
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            opacity: 0.6,
+            padding: "2px 4px"
+          },
+          children: WEEKDAYS[(firstDayOfWeek - 1 + i) % 7]
+        },
+        i
+      )) }) : null,
+      /* @__PURE__ */ jsx5("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 1 }, children: state.cells.map((cell) => /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          onClick: () => controller.activateSlot(cell.key),
+          style: {
+            minHeight: 56,
+            padding: 3,
+            cursor: "pointer",
+            opacity: cell.inPeriod ? 1 : 0.4,
+            background: cell.today ? "var(--xeno-border-subtle)" : "var(--xeno-border-subtle)",
+            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: [
+              "+",
+              cell.overflow,
+              " more"
+            ] }) : null
+          ]
+        },
+        cell.key
+      )) })
+    ] });
+  })();
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+    toolbar,
+    body,
+    /* @__PURE__ */ jsx5(
+      StatusBar2,
+      {
+        left: `${state.events.length} event${state.events.length === 1 ? "" : "s"}`,
+        right: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
+      }
+    )
+  ] });
+}
+function Chip({
+  event,
+  controller,
+  state
+}) {
+  const selected = state.selection.includes(event.id);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        controller.select([event.id], e.ctrlKey || e.metaKey);
+      },
+      onDoubleClick: (e) => {
+        e.stopPropagation();
+        controller.activateRow(event.id);
+      },
+      onContextMenu: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        controller.requestContextMenu([event.id], e.clientX, e.clientY);
+      },
+      title: event.multiDay ? `${event.startKey} \u2192 ${event.endKey}` : event.title,
+      style: {
+        fontSize: 9,
+        padding: "1px 3px",
+        marginTop: 1,
+        borderRadius: 2,
+        background: selected ? "var(--xeno-control)" : "var(--xeno-border-subtle)",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        cursor: "pointer"
+      },
+      children: [
+        event.allDay ? null : /* @__PURE__ */ jsx5("span", { style: { opacity: 0.6, marginRight: 3, fontVariantNumeric: "tabular-nums" }, children: formatMinutes(event.startMinutes) }),
+        event.title
+      ]
+    }
+  );
+}
+function formatMinutes(minutes) {
+  if (minutes === null) return "";
+  return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+}
+
+// src/time/calendar/panel.ts
+function createCalendarPanel(options = {}) {
+  return {
+    manifest: calendarManifest,
+    activate(host) {
+      const config = host.config ?? {};
+      const firstDayOfWeek = numberConfig(config.firstDayOfWeek, 1);
+      const controller = new CalendarController({
+        host: { emit: (portId, value) => host.emit(portId, value) },
+        viewMode: config.viewMode ?? "month",
+        firstDayOfWeek,
+        dateColumnId: typeof config.dateColumnId === "string" ? config.dateColumnId : void 0,
+        endDateColumnId: typeof config.endDateColumnId === "string" ? config.endDateColumnId : void 0,
+        timeZone: typeof config.timeZone === "string" ? config.timeZone : "local",
+        maxChipsPerCell: numberConfig(config.maxChipsPerCell, 3),
+        chipFields: parseJson(config.chipFields),
+        titleColumnId: typeof config.titleColumnId === "string" ? config.titleColumnId : void 0,
+        statusColumnId: typeof config.statusColumnId === "string" ? config.statusColumnId : void 0,
+        slotMinutes: numberConfig(config.slotMinutes, 30),
+        allowDrag: config.allowDrag !== false
+      });
+      const resolve = (config2) => ({
+        firstDayOfWeek,
+        emptyHint: typeof config2.emptyHint === "string" ? config2.emptyHint : void 0
+      });
+      let renderConfig = resolve(host.config ?? {});
+      let unrender = null;
+      let root = null;
+      let currentEl = null;
+      const draw = (el) => {
+        unrender?.();
+        if (options.render) {
+          unrender = options.render(el, { controller, config: renderConfig });
+        } else {
+          root = createRoot3(el);
+          root.render(createElement3(CalendarPanelView, { controller, ...renderConfig }));
+          unrender = () => {
+            root?.unmount();
+            root = null;
+          };
+        }
+        controller.emitWindow(true);
+      };
+      const unbindConfig = bindConfig2(host, (config2) => {
+        renderConfig = resolve(config2);
+        if (currentEl) draw(currentEl);
+      });
+      return {
+        render(el) {
+          currentEl = el;
+          draw(el);
+        },
+        onInput(portId, value) {
+          if (portId === "result") {
+            const opened = unwrapResult(value);
+            if (opened) controller.setResult(opened.result);
+          } else if (portId === "window") {
+            if (isRecord2(value)) controller.setWindow(value);
+          } else if (portId === "selection") {
+            controller.setSelection(Array.isArray(value) ? value : []);
+          }
+        },
+        async onCommand(commandId, params) {
+          switch (commandId) {
+            case "set_view_mode":
+              return controller.setViewMode(params.mode);
+            case "navigate":
+              controller.navigate(Number(params.direction) < 0 ? -1 : 1);
+              return true;
+            case "go_to_today":
+              controller.goToToday();
+              return true;
+            case "go_to_date":
+              return controller.goToDate(String(params.date));
+            case "select_events":
+              controller.select(
+                Array.isArray(params.rowIds) ? params.rowIds : [],
+                params.additive === true
+              );
+              return true;
+            case "reschedule":
+              return controller.rescheduleTo(
+                String(params.rowId),
+                String(params.date),
+                typeof params.time === "number" ? params.time : void 0
+              );
+            case "get_events":
+              return controller.events().map((e) => ({
+                id: e.id,
+                title: e.title,
+                startKey: e.startKey,
+                endKey: e.endKey,
+                allDay: e.allDay,
+                multiDay: e.multiDay
+              }));
+            default:
+              return;
+          }
+        },
+        serialize() {
+          return controller.serialize();
+        },
+        deserialize(state) {
+          controller.deserialize(state ?? {});
+        },
+        dispose() {
+          unbindConfig();
+          currentEl = null;
+          unrender?.();
+          unrender = null;
+          controller.dispose();
+        }
+      };
+    }
+  };
+}
+function parseJson(value) {
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return void 0;
+  }
+}
+function numberConfig(value, fallback) {
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(n) && n > 0 ? n : fallback;
+}
+var calendarPanel = createCalendarPanel();
+var export_BAR_SUBDIVISION = format_exports.BAR_SUBDIVISION;
+var export_DEFAULT_TIMEBASE = types_exports.DEFAULT_TIMEBASE;
+var export_DISPLAY_CYCLE = format_exports.DISPLAY_CYCLE;
+var export_IDLE_CLOCK = types_exports.IDLE_CLOCK;
+var export_clampTick = types_exports.clampTick;
+var export_clockAt = clock_exports.clockAt;
+var export_createThrottle = throttle_exports.createThrottle;
+var export_displayLabel = format_exports.displayLabel;
+var export_effectiveFps = types_exports.effectiveFps;
+var export_extrapolateTick = clock_exports.extrapolateTick;
+var export_formatBars = format_exports.formatBars;
+var export_formatFrames = format_exports.formatFrames;
+var export_formatSeconds = format_exports.formatSeconds;
+var export_formatTick = format_exports.formatTick;
+var export_formatTimecode = format_exports.formatTimecode;
+var export_frameToTick = format_exports.frameToTick;
+var export_isAnimating = clock_exports.isAnimating;
+var export_nextDisplay = format_exports.nextDisplay;
+var export_normalizeClock = types_exports.normalizeClock;
+var export_normalizeTimebase = types_exports.normalizeTimebase;
+var export_secondsToTicks = types_exports.secondsToTicks;
+var export_tickToFrame = format_exports.tickToFrame;
+var export_ticksToBarsBeats = format_exports.ticksToBarsBeats;
+var export_ticksToSeconds = types_exports.ticksToSeconds;
+var export_toTick = types_exports.toTick;
+var export_wrapIntoLoop = clock_exports.wrapIntoLoop;
+export {
+  ALL_CALENDAR_MODES,
+  export_BAR_SUBDIVISION as BAR_SUBDIVISION,
+  CALENDAR_PANEL_ID,
+  CalendarController,
+  CalendarPanelView,
+  DEFAULT_SNAP,
+  export_DEFAULT_TIMEBASE as DEFAULT_TIMEBASE,
+  DEFAULT_ZOOM,
+  export_DISPLAY_CYCLE as DISPLAY_CYCLE,
+  DRAG_THRESHOLD_PX,
+  EDGE_ZONE_MIN_CLIP_PX,
+  EDGE_ZONE_PX,
+  export_IDLE_CLOCK as IDLE_CLOCK,
+  MIN_MAJOR_PX,
+  MIN_MINOR_PX,
+  TIMELINE_PANEL_ID,
+  TRIM_SNAP_PX,
+  TimelineController,
+  TimelinePanelView,
+  TransportPanelController,
+  TransportPanelView,
+  XenoTileCache,
+  XenoTimeScale,
+  addDays,
+  addMonths,
+  alignToTileGrid,
+  beginDrag,
+  blitTile,
+  buildCells,
+  buildRowLayout,
+  calendarManifest,
+  calendarPanel,
+  chooseRung,
+  clampScroll,
+  export_clampTick as clampTick,
+  clipDuration,
+  clipsInMarquee,
+  clipsOverlap,
+  export_clockAt as clockAt,
+  collectSnapTargets,
+  commitDrag,
+  computeVisible,
+  createCalendarPanel,
+  export_createThrottle as createThrottle,
+  createTimelinePanel,
+  createTransportPanel,
+  dayKey,
+  daysInMonth,
+  dedupeByColumn,
+  deriveEvents,
+  export_displayLabel as displayLabel,
+  edgeZone,
+  export_effectiveFps as effectiveFps,
+  export_extrapolateTick as extrapolateTick,
+  export_formatBars as formatBars,
+  export_formatFrames as formatFrames,
+  export_formatSeconds as formatSeconds,
+  export_formatTick as formatTick,
+  export_formatTimecode as formatTimecode,
+  export_frameToTick as frameToTick,
+  gridStart,
+  gridTicksFor,
+  hasSourceWindow,
+  export_isAnimating as isAnimating,
+  isZoomGesture,
+  isoWeekday,
+  export_nextDisplay as nextDisplay,
+  export_normalizeClock as normalizeClock,
+  export_normalizeTimebase as normalizeTimebase,
+  packOverlaps,
+  parseDayKey,
+  passedThreshold,
+  previewDrag,
+  renderTier,
+  rowAtY,
+  rowInWindow,
+  rulerTicks,
+  scrollToReveal,
+  export_secondsToTicks as secondsToTicks,
+  snapDelta,
+  snapTick,
+  snapWouldFight,
+  sourceRangeFor,
+  statusTone,
+  export_tickToFrame as tickToFrame,
+  ticksPerStep,
+  export_ticksToBarsBeats as ticksToBarsBeats,
+  export_ticksToSeconds as ticksToSeconds,
+  tileKey,
+  tileWidthTicks,
+  timelineManifest,
+  timelinePanel,
+  export_toTick as toTick,
+  todayKey,
+  transportManifest,
+  transportPanel,
+  trimModeFor,
+  visibleClips,
+  visibleRows,
+  weekStart,
+  wheelZoomFactor,
+  withSnapModifier,
+  export_wrapIntoLoop as wrapIntoLoop,
+  zoomAboutCursor,
+  zoomBucket,
+  zoomToFit
+};