@zkmake/three-cameras 0.0.0 → 0.2.0

package/dist/mount-BAkbs7K2.js

@@ -0,0 +1,1974 @@
+import { _ as poseToCode, a as writeChannel, c as PRESET_BEZIERS, h as capturePose, i as sampleChannel, l as applyEase, n as CHANNEL_LABELS, o as CameraLab, r as readChannel, s as EASES, t as CHANNELS } from "./channels-Dp6gFE5b.js";
+import { Matrix4, Plane, Ray, Vector3 } from "three";
+import { HudTheme, mountDevPanel } from "@zkmake/three-meter/ui";
+//#region src/ui/styles.ts
+/** The panel's stylesheet, injected once. Palettes by `data-theme` on `.tcm`. */
+const CAMERA_PANEL_STYLES = `
+/* Inside a dev-panel card the tokens come from three-meter's (\`--perf-*\`), so the panels match;
+   on its own (in a host's tab) the same palette is the fallback. */
+.tcm {
+  --tcm-bg: var(--perf-bg, rgba(22, 24, 29, 0.92));
+  --tcm-fg: var(--perf-fg, #e6e8eb);
+  --tcm-dim: var(--perf-muted, #8b909a);
+  --tcm-line: var(--perf-border, rgba(255, 255, 255, 0.12));
+  --tcm-field: var(--perf-row, rgba(255, 255, 255, 0.04));
+  --tcm-hover: var(--perf-row, rgba(255, 255, 255, 0.04));
+  --tcm-accent: var(--perf-accent, #60a5fa);
+  --tcm-accent-soft: rgba(96, 165, 250, 0.14);
+  --tcm-live: #34d399;
+  box-sizing: border-box;
+  color: var(--tcm-fg);
+  font: 11px/1.35 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+.tcm[data-theme="light"] {
+  --tcm-bg: rgba(250, 250, 252, 0.94);
+  --tcm-fg: #1a1c21;
+  --tcm-dim: #6b7079;
+  --tcm-line: rgba(0, 0, 0, 0.12);
+  --tcm-field: rgba(0, 0, 0, 0.05);
+  --tcm-hover: rgba(0, 0, 0, 0.05);
+  --tcm-accent: #2563eb;
+  --tcm-accent-soft: rgba(37, 99, 235, 0.1);
+  --tcm-live: #047857;
+}
+.tcm *, .tcm *::before, .tcm *::after { box-sizing: inherit; }
+.tcm button { font: inherit; color: inherit; }
+
+.tcm-panel { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px; }
+/* In the dev-panel card: a fixed width (the frame's cap raised to fit), the list scrolling
+   inside the card's height. */
+.perf-hud.tcm-frame { max-width: min(23rem, calc(100vw - 48px)); }
+/* With the timeline: one panel across the bottom of the screen, anchored (no drag grip), the
+   camera list as the timeline's sidebar. Compact, the list alone. */
+.perf-hud.tcm-combined-frame .perf-hud__drag { display: none; }
+/* Full width: the control discs go in a row on the open side, above the panel on the bottom
+   edge and below it on the top, so the panel can reach both sides of the screen. */
+.perf-hud.tcm-combined-frame:not(.tcm-compact) { width: calc(100vw - 20px); max-width: none; }
+.perf-hud.tcm-combined-frame:not(.tcm-compact) .perf-hud__tools { left: auto; right: 4px; flex-direction: row; }
+.perf-hud.tcm-combined-frame:not(.tcm-compact)[data-edge="bottom"] .perf-hud__tools { top: auto; bottom: calc(100% + 6px); }
+.perf-hud.tcm-combined-frame:not(.tcm-compact)[data-edge="top"] .perf-hud__tools { top: calc(100% + 6px); }
+.perf-hud.tcm-combined-frame:not(.tcm-compact) .perf-hud__hotspot { right: -10px; left: -10px; }
+.perf-hud.tcm-combined-frame:not(.tcm-compact)[data-edge="bottom"] .perf-hud__hotspot { top: -40px; bottom: -10px; }
+.perf-hud.tcm-combined-frame:not(.tcm-compact)[data-edge="top"] .perf-hud__hotspot { top: -10px; bottom: -40px; }
+.tcm-shell { display: flex; flex-direction: column; min-height: 0; }
+.tcm-shell > .tcm-timeline.is-combined { width: 100%; max-height: min(28rem, 40vh); }
+.tcm-shell > .tcm-panel { width: 22rem; max-width: 100%; }
+.tcm-timeline.is-combined { min-height: 0; padding-bottom: 6px; }
+.tcm-timeline.is-combined .tcm-tl { flex: 1; min-height: 0; grid-template-columns: 21rem minmax(0, 1fr); overflow-y: auto; }
+.tcm-timeline.is-combined .tcm-tl-names { display: block; border-right: 1px solid var(--tcm-line); }
+.tcm-timeline.is-combined .tcm-tl-names > .tcm-panel { padding: 0 6px 0 0; }
+.tcm-timeline.is-combined .tcm-panel .tcm-list { overflow: visible; }
+.tcm-timeline.is-combined .tcm-panel .tcm-toolbar,
+.tcm-timeline.is-combined .tcm-ruler { position: sticky; top: 0; z-index: 2; height: 30px; background: var(--tcm-bg); }
+.tcm-timeline.is-combined .tcm-panel .tcm-toolbar { align-items: center; }
+.tcm-timeline.is-combined .tcm-tl-area { margin-left: 0; }
+.tcm-timeline.is-combined .tcm-lanes { position: relative; display: block; }
+.tcm-timeline.is-combined .tcm-lane { position: absolute; left: 0; right: 0; border-bottom: 0; border-top: 1px solid var(--tcm-line); }
+.tcm-timeline.is-combined .tcm-lane[hidden] { display: none; }
+.tcm-timeline.is-combined .tcm-lane.is-inert { cursor: default; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--tcm-field) 6px 7px); }
+.tcm-timeline.is-combined .tcm-key { top: calc(var(--tcm-head, 24px) / 2); }
+.tcm-timeline.is-combined .tcm-graph-side { padding: 6px 0 4px; }
+
+/* Compact, the list alone: the brand row, with the count. */
+/* Collapsed: a small widget with the picked camera, and nothing else. */
+.perf-hud.tcm-compact .tcm-shell > :not(.tcm-mini) { display: none; }
+.perf-hud.tcm-frame.tcm-compact .perf-hud__brand-detail { display: none; }
+.tcm-mini { display: none; }
+.perf-hud.tcm-compact .tcm-mini {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 10rem;
+  max-width: 18rem;
+  margin: 0 6px 6px;
+  padding: 3px 8px 3px 4px;
+  border: 1px solid var(--tcm-line);
+  border-radius: 5px;
+  background: var(--tcm-field);
+  text-align: left;
+  cursor: pointer;
+}
+.tcm-mini:hover { border-color: var(--tcm-accent); }
+.tcm-mini:focus-visible { outline: 1px solid var(--tcm-accent); }
+.tcm-mini-kind { display: grid; place-items: center; color: var(--tcm-dim); }
+.tcm-mini.is-live .tcm-mini-kind { color: var(--tcm-live); }
+.tcm-mini.is-viewing .tcm-mini-kind { color: var(--tcm-accent); }
+.tcm-mini-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.tcm-mini-clock { margin-left: auto; color: var(--tcm-dim); font-variant-numeric: tabular-nums; }
+.perf-hud.tcm-compact .perf-hud__brand { padding-bottom: 6px; }
+
+.tcm-toolbar { display: flex; gap: 6px; }
+.tcm-search {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--tcm-line);
+  border-radius: 4px;
+  background: var(--tcm-field);
+  padding: 4px 6px;
+  color: inherit;
+  font: inherit;
+}
+.tcm-search::placeholder { color: var(--tcm-dim); }
+.tcm-search:focus { outline: 1px solid var(--tcm-accent); outline-offset: 0; }
+
+.tcm-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  flex: none;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--tcm-dim);
+  cursor: pointer;
+}
+.tcm-icon:hover:not(:disabled) { background: var(--tcm-hover); color: var(--tcm-fg); }
+.tcm-icon:focus-visible { outline: 1px solid var(--tcm-accent); }
+.tcm-icon:disabled { visibility: hidden; }
+.tcm-icon[aria-pressed="true"] { color: var(--tcm-accent); background: var(--tcm-accent-soft); }
+/* Line icons; the graph and the ease editor draw their own. */
+.tcm svg:not(.tcm-graph-svg, .tcm-ease svg) {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.tcm-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; min-height: 0; }
+.tcm-row { border-radius: 5px; border: 1px solid transparent; }
+.tcm-row.is-hidden { display: none; }
+.tcm-row.is-open { border-color: var(--tcm-line); background: var(--tcm-field); }
+.tcm-head {
+  display: grid;
+  grid-template-columns: 32px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 4px;
+  border-radius: 5px;
+}
+.tcm-row:not(.is-open) .tcm-head:hover { background: var(--tcm-hover); }
+.tcm-kind {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--tcm-line);
+  border-radius: 5px;
+  color: var(--tcm-dim);
+}
+.tcm-row.is-live .tcm-kind { color: var(--tcm-live); border-color: color-mix(in srgb, var(--tcm-live) 45%, transparent); }
+.tcm-text {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+.tcm-name-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+.tcm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.tcm-badge { flex: none; color: var(--tcm-dim); }
+.tcm-badge:empty { display: none; }
+.tcm-badge.is-live, .tcm-badge.is-viewing { display: inline-flex; align-items: center; gap: 4px; }
+.tcm-badge.is-live { color: var(--tcm-live); }
+.tcm-badge.is-viewing { color: var(--tcm-accent); }
+.tcm-badge.is-live::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: tcm-pulse 1.6s ease-in-out infinite;
+}
+@keyframes tcm-pulse { 50% { opacity: 0.25; } }
+@media (prefers-reduced-motion: reduce) { .tcm-badge.is-live::before { animation: none; } }
+.tcm-row.is-viewing .tcm-kind { color: var(--tcm-accent); border-color: color-mix(in srgb, var(--tcm-accent) 50%, transparent); }
+.tcm-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tcm-dim); }
+.tcm-actions { display: flex; gap: 2px; }
+.tcm-chevron svg { transition: rotate 120ms; }
+.tcm-row.is-open .tcm-chevron svg { rotate: 180deg; }
+
+.tcm-details {
+  display: none;
+  gap: 8px;
+  padding: 2px 8px 8px;
+}
+.tcm-row.is-open .tcm-details { display: grid; }
+.tcm-group { display: grid; gap: 3px; }
+.tcm-term { color: var(--tcm-dim); }
+.tcm-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
+.tcm-fields--lens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.tcm-num {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  border: 1px solid var(--tcm-line);
+  border-radius: 4px;
+  background: var(--tcm-field);
+}
+.tcm-num:focus-within { border-color: var(--tcm-accent); }
+.tcm-scrub {
+  flex: none;
+  padding: 0 5px;
+  color: var(--tcm-dim);
+  cursor: ew-resize;
+  user-select: none;
+  touch-action: none;
+}
+.tcm-scrub:hover { color: var(--tcm-fg); }
+.tcm-num input {
+  width: 100%;
+  min-width: 0;
+  padding: 3px 5px 3px 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.tcm-num input::-webkit-inner-spin-button, .tcm-num input::-webkit-outer-spin-button { appearance: none; margin: 0; }
+.tcm-num input:focus { outline: none; }
+.tcm-readout { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
+.tcm-readout dt { color: var(--tcm-dim); }
+.tcm-readout dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.tcm-buttons { display: flex; gap: 6px; }
+.tcm-text-button {
+  border: 1px solid var(--tcm-line);
+  border-radius: 4px;
+  background: var(--tcm-field);
+  padding: 3px 8px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.tcm-text-button:hover { border-color: var(--tcm-accent); }
+.tcm-text-button:focus-visible { outline: 1px solid var(--tcm-accent); }
+.tcm-views { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.tcm-views:empty { display: none; }
+.tcm-view { display: flex; align-items: center; border: 1px solid var(--tcm-line); border-radius: 4px; }
+.tcm-view .tcm-icon { width: 20px; height: 20px; }
+.tcm-view .tcm-icon svg { width: 12px; height: 12px; }
+.tcm-view-go {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 6px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.tcm-view-go svg { width: 12px; height: 12px; }
+.tcm-view-go:hover { color: var(--tcm-accent); }
+.tcm-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 4px 4px 8px;
+  border-radius: 5px;
+  background: var(--tcm-accent-soft);
+  color: var(--tcm-accent);
+}
+.tcm-banner[hidden] { display: none; }
+.tcm-status { color: var(--tcm-dim); padding: 0 4px; }
+.tcm-status:empty { display: none; }
+.tcm-empty { color: var(--tcm-dim); padding: 6px 4px; }
+.tcm-row.is-selected:not(.is-open) .tcm-head { background: var(--tcm-hover); }
+.tcm-keys { color: var(--tcm-accent); }
+
+/* Timeline */
+.tcm-timeline { display: flex; flex-direction: column; gap: 6px; padding: 8px; outline: none; }
+.tcm-transport, .tcm-inspector { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.tcm-spacer { flex: 1; }
+.tcm-clock { min-width: 9.5em; padding: 0 6px; font-variant-numeric: tabular-nums; }
+.tcm-timeline.is-engaged .tcm-clock { color: var(--tcm-accent); }
+.tcm-length { display: inline-flex; align-items: center; gap: 4px; color: var(--tcm-dim); }
+.tcm-length input, .tcm-inspector select {
+  width: 4.5em;
+  padding: 2px 4px;
+  border: 1px solid var(--tcm-line);
+  border-radius: 4px;
+  background: var(--tcm-field);
+  color: var(--tcm-fg);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+}
+.tcm-inspector select { width: auto; }
+.tcm-length input:focus, .tcm-inspector select:focus { outline: 1px solid var(--tcm-accent); }
+.tcm-add-key { display: inline-flex; align-items: center; gap: 5px; max-width: 14em; }
+.tcm-add-key span { overflow: hidden; text-overflow: ellipsis; }
+.tcm-add-key svg { width: 12px; height: 12px; color: var(--tcm-accent); }
+.tcm-add-key:disabled { opacity: 0.4; cursor: default; }
+.tcm-inspector { padding: 4px 6px; border-radius: 5px; background: var(--tcm-field); }
+.tcm-inspector[hidden] { display: none; }
+.tcm-inspector-title { font-weight: 600; margin-right: 4px; }
+
+.tcm-tl { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); }
+.tcm-tl-names { display: grid; grid-auto-rows: 24px; grid-template-rows: 20px; }
+.tcm-tl-corner { border-bottom: 1px solid var(--tcm-line); }
+.tcm-tl-name {
+  overflow: hidden;
+  padding: 0 8px 0 2px;
+  border: 0;
+  border-bottom: 1px solid var(--tcm-line);
+  background: none;
+  color: var(--tcm-dim);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.tcm-tl-name:hover, .tcm-tl-name.is-selected { color: var(--tcm-fg); }
+.tcm-tl-name.is-selected { font-weight: 600; }
+.tcm-tl-area { position: relative; min-width: 0; margin-right: 8px; }
+.tcm-ruler {
+  position: relative;
+  height: 20px;
+  border-bottom: 1px solid var(--tcm-line);
+  cursor: ew-resize;
+  touch-action: none;
+}
+.tcm-tick { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--tcm-line); }
+.tcm-tick.is-major { height: 8px; background: var(--tcm-dim); }
+.tcm-tick b {
+  position: absolute;
+  bottom: 9px;
+  left: 0;
+  transform: translateX(-50%);
+  color: var(--tcm-dim);
+  font-weight: 400;
+  font-size: 10px;
+}
+.tcm-lanes { display: grid; grid-auto-rows: 24px; }
+.tcm-lane { position: relative; border-bottom: 1px solid var(--tcm-line); cursor: crosshair; touch-action: none; }
+.tcm-lane.is-selected { background: var(--tcm-hover); }
+.tcm-key {
+  position: absolute;
+  top: 50%;
+  width: 11px;
+  height: 11px;
+  padding: 0;
+  border: 1px solid var(--tcm-bg);
+  border-radius: 2px;
+  background: var(--tcm-accent);
+  transform: translate(-50%, -50%) rotate(45deg);
+  cursor: grab;
+  touch-action: none;
+}
+.tcm-key.is-hold { border-radius: 0; background: var(--tcm-dim); }
+.tcm-key.is-picked { outline: 2px solid var(--tcm-fg); outline-offset: 1px; }
+.tcm-key:active { cursor: grabbing; }
+.tcm-key:focus-visible { outline: 2px solid var(--tcm-accent); outline-offset: 2px; }
+.tcm-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  margin-left: -0.5px;
+  background: #f87171;
+  pointer-events: none;
+}
+.tcm-playhead::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -4px;
+  border: 4.5px solid transparent;
+  border-top-color: #f87171;
+}
+.tcm-tl-empty { padding: 2px 4px; }
+
+/* Keys | Graph */
+.tcm-modes { display: inline-flex; margin-left: 4px; border: 1px solid var(--tcm-line); border-radius: 5px; overflow: hidden; }
+.tcm-modes button { padding: 2px 8px; border: 0; background: none; color: var(--tcm-dim); cursor: pointer; }
+.tcm-modes button[aria-checked="true"] { background: var(--tcm-accent-soft); color: var(--tcm-accent); }
+.tcm-modes button:focus-visible { outline: 1px solid var(--tcm-accent); outline-offset: -2px; }
+
+/* Lane names with the motion-path toggle */
+.tcm-tl-row { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--tcm-line); }
+.tcm-tl-row .tcm-tl-name { flex: 1; min-width: 0; height: 100%; border-bottom: 0; }
+.tcm-trail { width: 20px; height: 20px; margin-right: 4px; }
+.tcm-trail svg { width: 13px; height: 13px; }
+.tcm-trail:disabled { visibility: hidden; }
+
+/* Graph view: the channel list in the names column, the plot under the ruler. */
+.tcm-graph, .tcm-graph-side { display: none; }
+.tcm-timeline.is-graph .tcm-lanes, .tcm-timeline.is-graph .tcm-tl-row { display: none; }
+.tcm-timeline.is-graph .tcm-tl-names { grid-auto-rows: auto; }
+.tcm-timeline.is-graph .tcm-graph { display: block; }
+.tcm-timeline.is-graph .tcm-graph-side { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; padding: 6px 6px 0 0; }
+.tcm-graph-svg { display: block; touch-action: none; overflow: visible; }
+.tcm-grid { stroke: var(--tcm-line); stroke-width: 1; }
+.tcm-key-line { stroke: var(--tcm-line); stroke-dasharray: 2 3; }
+.tcm-curve { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
+.tcm-dot { stroke: var(--tcm-bg); stroke-width: 1.5; cursor: grab; }
+.tcm-dot:hover { stroke: var(--tcm-fg); }
+.tcm-dot.is-picked { stroke: var(--tcm-fg); stroke-width: 2; }
+.tcm-graph-empty { fill: var(--tcm-dim); font: inherit; }
+.tcm-graph-axis { fill: var(--tcm-dim); font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
+.tcm-chan {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  border: 1px solid var(--tcm-line);
+  border-radius: 4px;
+  background: none;
+  color: var(--tcm-dim);
+  cursor: pointer;
+}
+.tcm-chan::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tcm-chan, currentColor); opacity: 0.35; }
+.tcm-chan[aria-pressed="true"] { color: var(--tcm-fg); border-color: color-mix(in srgb, var(--tcm-chan, var(--tcm-accent)) 55%, transparent); }
+.tcm-chan[aria-pressed="true"]::before { opacity: 1; }
+.tcm-chan--mode::before { display: none; }
+.tcm-chan:focus-visible { outline: 1px solid var(--tcm-accent); }
+
+/* Ease curve editor, in the key inspector */
+.tcm-ease { display: flex; }
+.tcm-ease svg { display: block; overflow: visible; touch-action: none; }
+.tcm-ease:has(svg:empty) { display: none; }
+.tcm-ease-box { fill: none; stroke: var(--tcm-line); }
+.tcm-ease-curve { fill: none; stroke: var(--tcm-accent); stroke-width: 2; }
+.tcm-ease-arm { stroke: var(--tcm-dim); stroke-width: 1; }
+.tcm-ease-handle { fill: var(--tcm-accent); stroke: var(--tcm-bg); stroke-width: 1.5; cursor: grab; }
+.tcm-ease-handle:hover { stroke: var(--tcm-fg); }
+`;
+const STYLE_ID = "zkmake-three-cameras-styles";
+/** Add the stylesheet to `document.head` once. */
+const injectStyles = () => {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = CAMERA_PANEL_STYLES;
+	document.head.append(style);
+};
+//#endregion
+//#region src/ui/panel.ts
+/** Live badges and open rows update this often, ms. */
+const TICK_MS = 250;
+/** Per field: the step a typed arrow key takes and what a pixel of scrubbing adds. */
+const FIELDS = {
+	px: {
+		label: "x",
+		step: .01,
+		perPixel: .02
+	},
+	py: {
+		label: "y",
+		step: .01,
+		perPixel: .02
+	},
+	pz: {
+		label: "z",
+		step: .01,
+		perPixel: .02
+	},
+	rx: {
+		label: "x",
+		step: .1,
+		perPixel: .5
+	},
+	ry: {
+		label: "y",
+		step: .1,
+		perPixel: .5
+	},
+	rz: {
+		label: "z",
+		step: .1,
+		perPixel: .5
+	},
+	fov: {
+		label: "fov",
+		step: .1,
+		perPixel: .2,
+		min: 1
+	},
+	near: {
+		label: "near",
+		step: .01,
+		perPixel: .005,
+		min: 1e-4
+	},
+	far: {
+		label: "far",
+		step: 1,
+		perPixel: .5,
+		min: .001
+	},
+	zoom: {
+		label: "zoom",
+		step: .01,
+		perPixel: .005,
+		min: .01
+	}
+};
+/** Line icons on a 24 grid, stroked in the text colour (styles.ts). */
+const KIND_ICONS = {
+	perspective: "<rect x=\"2\" y=\"7\" width=\"12\" height=\"10\" rx=\"2\"/><path d=\"m14 10.5 7-4v11l-7-4\"/>",
+	orthographic: "<rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M3 12h18\"/>",
+	array: "<rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\"/><rect x=\"13\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\"/><rect x=\"3\" y=\"13\" width=\"8\" height=\"8\" rx=\"1.5\"/><rect x=\"13\" y=\"13\" width=\"8\" height=\"8\" rx=\"1.5\"/>",
+	cube: "<path d=\"M12 3 20 7.5v9L12 21l-8-4.5v-9Z\"/><path d=\"m4 7.5 8 4.5 8-4.5M12 12v9\"/>",
+	other: "<circle cx=\"12\" cy=\"12\" r=\"8\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"
+};
+const ICONS$1 = {
+	look: "<path d=\"M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+	frustum: "<path d=\"M3 12 20 5v14Z\"/><path d=\"M20 5v14\"/><circle cx=\"3\" cy=\"12\" r=\"1\"/>",
+	chevron: "<path d=\"m6 9 6 6 6-6\"/>",
+	refresh: "<path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>",
+	go: "<path d=\"M5 12h14\"/><path d=\"m13 6 6 6-6 6\"/>",
+	path: "<path d=\"M3 18c3-8 7-1 10-7s5-5 8-5\"/><circle cx=\"3\" cy=\"18\" r=\"1.5\"/><circle cx=\"21\" cy=\"6\" r=\"1.5\"/>",
+	remove: "<path d=\"M6 6l12 12M18 6 6 18\"/>"
+};
+const svg$1 = (paths) => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
+const icon$1 = (name, label, extra = "") => `<button type="button" class="tcm-icon ${extra}" data-action="${name}" title="${label}" aria-label="${label}">${svg$1(ICONS$1[name])}</button>`;
+const trim$1 = (value, digits = 2) => {
+	const fixed = value.toFixed(digits);
+	return fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+};
+const range = (near, far) => `${trim$1(near)}–${trim$1(far)}`;
+const triple = (values, digits = 2) => values.map((value) => trim$1(value, digits)).join("  ");
+const escape$1 = (text) => text.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+/** A camera's name as a JS identifier, for copied code: `orbit view` → `orbitView`. */
+const identifier = (name) => {
+	const joined = name.split(/[^A-Za-z0-9]+/).filter(Boolean).map((word, index) => index === 0 ? word.toLowerCase() : word[0].toUpperCase() + word.slice(1)).join("");
+	return /^[A-Za-z_]/.test(joined) ? joined : `camera${joined}`;
+};
+/** The row's second line: how it projects, at a glance. */
+const describe = (entry, details) => {
+	const projection = details?.projection;
+	const parts = [];
+	if (entry.kind === "cube") parts.push("cube · 6 faces");
+	else if (projection?.fov !== void 0) {
+		parts.push(`fov ${trim$1(projection.fov, 1)}°`, range(projection.near, projection.far));
+		if (projection.aspect !== void 0) parts.push(trim$1(projection.aspect));
+	} else if (projection) parts.push("ortho", `zoom ${trim$1(projection.zoom)}`, range(projection.near, projection.far));
+	else parts.push(entry.kind);
+	if (entry.keys > 0) parts.push(`${entry.keys} key${entry.keys === 1 ? "" : "s"}`);
+	else if (entry.moving && entry.inScene) parts.push("moving");
+	if (!entry.inScene) parts.push("not in scene");
+	return parts.join(" · ");
+};
+/** Facts that aren't edited here, under the fields. */
+const readoutOf = (entry, details) => {
+	const { projection } = details;
+	const rows = [["world", triple(details.position)]];
+	if (projection?.aspect !== void 0) rows.push(["aspect", trim$1(projection.aspect, 3)]);
+	if (projection?.left !== void 0) rows.push(["frustum", `l ${trim$1(projection.left)} r ${trim$1(projection.right)} t ${trim$1(projection.top)} b ${trim$1(projection.bottom)}`]);
+	rows.push(["drawing", entry.live ? `${entry.fps} fps` : "no"]);
+	rows.push(["in", entry.inScene ? entry.path.join(" › ") || "scene" : "the renderer only (not in the scene)"]);
+	return rows.map(([term, value]) => `<dt>${term}</dt><dd>${escape$1(value)}</dd>`).join("");
+};
+const numberField = (key) => {
+	const { label, step, min } = FIELDS[key];
+	return `<label class="tcm-num"><span class="tcm-scrub" data-scrub="${key}" title="Drag to change: Shift for fine, Alt for coarse">${label}</span><input type="number" data-field="${key}" step="${step}"${min === void 0 ? "" : ` min="${min}"`} inputmode="decimal" /></label>`;
+};
+/** The values a field shows, from the camera now. */
+const valuesOf = (details) => {
+	const [px, py, pz] = details.local.position;
+	const [rx, ry, rz] = details.local.rotation;
+	const projection = details.projection;
+	return {
+		px,
+		py,
+		pz,
+		rx,
+		ry,
+		rz,
+		...projection ? {
+			near: projection.near,
+			far: projection.far,
+			zoom: projection.zoom,
+			fov: projection.fov
+		} : {}
+	};
+};
+const formatField = (key, value) => trim$1(value, key.startsWith("r") || key === "fov" ? 2 : 4);
+const createCameraPanel = (lab, { paths = false } = {}) => {
+	injectStyles();
+	const element = document.createElement("div");
+	element.className = "tcm tcm-panel";
+	element.innerHTML = `
+    <div class="tcm-toolbar">
+      <input type="search" class="tcm-search" placeholder="Filter by name…" autocomplete="off" spellcheck="false" aria-label="Filter cameras" />
+      ${icon$1("refresh", "Look for new cameras")}
+    </div>
+    <div class="tcm-banner" hidden><span></span><button type="button" class="tcm-text-button" data-action="look-back">Back</button></div>
+    <ul class="tcm-list"></ul>
+    <div class="tcm-empty" hidden>No cameras yet. The one the renderer draws with shows up on its first frame.</div>
+    <div class="tcm-status" role="status"></div>
+  `;
+	const search = element.querySelector(".tcm-search");
+	const list = element.querySelector(".tcm-list");
+	const empty = element.querySelector(".tcm-empty");
+	const status = element.querySelector(".tcm-status");
+	const banner = element.querySelector(".tcm-banner");
+	const bannerText = banner.querySelector("span");
+	const rows = /* @__PURE__ */ new Map();
+	const renderListeners = /* @__PURE__ */ new Set();
+	let timer = null;
+	/** The field being scrubbed: the tick leaves it alone. */
+	let scrubbing = null;
+	const say = (message) => {
+		status.textContent = message;
+	};
+	const attempt = (work) => {
+		try {
+			say("");
+			work();
+		} catch (error) {
+			say(error.message.replace(/^three-cameras: /, ""));
+		}
+	};
+	/** Read one field (or its x/y/z group) into a patch and set it. */
+	const apply = (id, controls, key) => {
+		const read = (field) => Number(controls.fields.get(field)?.value);
+		const patch = {};
+		if (key.startsWith("p")) {
+			const values = [
+				read("px"),
+				read("py"),
+				read("pz")
+			];
+			if (values.every(Number.isFinite)) patch.position = values;
+		} else if (key.startsWith("r")) {
+			const values = [
+				read("rx"),
+				read("ry"),
+				read("rz")
+			];
+			if (values.every(Number.isFinite)) patch.rotation = values;
+		} else {
+			const value = read(key);
+			const min = FIELDS[key].min;
+			if (Number.isFinite(value) && (min === void 0 || value >= min)) patch[key] = value;
+		}
+		attempt(() => lab.set(id, patch));
+	};
+	const buildControls = (row, entry) => {
+		const lens = entry.kind === "perspective" ? [
+			"fov",
+			"near",
+			"far",
+			"zoom"
+		] : entry.kind === "orthographic" ? [
+			"zoom",
+			"near",
+			"far"
+		] : [];
+		row.details.innerHTML = `
+      <div class="tcm-group"><span class="tcm-term">position</span><div class="tcm-fields">${numberField("px")}${numberField("py")}${numberField("pz")}</div></div>
+      <div class="tcm-group"><span class="tcm-term">rotation °</span><div class="tcm-fields">${numberField("rx")}${numberField("ry")}${numberField("rz")}</div></div>
+      ${lens.length > 0 ? `<div class="tcm-group"><span class="tcm-term">lens</span><div class="tcm-fields tcm-fields--lens">${lens.map(numberField).join("")}</div></div>` : ""}
+      <dl class="tcm-readout"></dl>
+      ${entry.projects ? `<div class="tcm-buttons">
+              <button type="button" class="tcm-text-button" data-action="copy" title="Copy three.js that sets this camera up as it is now">Copy as code</button>
+              <button type="button" class="tcm-text-button" data-action="save" title="Save where it is and how it projects, to fly back to">Save view</button>
+              <button type="button" class="tcm-text-button" data-action="bake" title="Turn where it's moved lately into keys on its track, to edit the path" hidden>Bake to keys</button>
+            </div>
+            <ul class="tcm-views" aria-label="Saved views"></ul>` : ""}
+    `;
+		const fields = /* @__PURE__ */ new Map();
+		for (const input of row.details.querySelectorAll("input[data-field]")) fields.set(input.dataset.field, input);
+		const controls = {
+			fields,
+			readout: row.details.querySelector(".tcm-readout"),
+			views: row.details.querySelector(".tcm-views") ?? document.createElement("ul"),
+			copy: row.details.querySelector("[data-action=\"copy\"]") ?? document.createElement("button"),
+			viewsDrawn: ""
+		};
+		const id = entry.id;
+		for (const [key, input] of fields) {
+			input.addEventListener("input", () => apply(id, controls, key));
+			input.addEventListener("blur", () => {
+				const details = lab.details(id);
+				const value = details ? valuesOf(details)[key] : void 0;
+				if (value !== void 0) input.value = formatField(key, value);
+			});
+		}
+		for (const handle of row.details.querySelectorAll("[data-scrub]")) {
+			const key = handle.dataset.scrub;
+			const input = fields.get(key);
+			handle.addEventListener("pointerdown", (event) => {
+				event.preventDefault();
+				handle.setPointerCapture(event.pointerId);
+				scrubbing = input;
+				const startX = event.clientX;
+				const startValue = Number(input.value) || 0;
+				const { perPixel, min } = FIELDS[key];
+				const onMove = (move) => {
+					const scale = move.shiftKey ? .1 : move.altKey ? 10 : 1;
+					let value = startValue + (move.clientX - startX) * perPixel * scale;
+					if (min !== void 0) value = Math.max(min, value);
+					input.value = formatField(key, value);
+					apply(id, controls, key);
+				};
+				const onUp = () => {
+					scrubbing = null;
+					handle.removeEventListener("pointermove", onMove);
+					handle.removeEventListener("pointerup", onUp);
+					handle.removeEventListener("pointercancel", onUp);
+				};
+				handle.addEventListener("pointermove", onMove);
+				handle.addEventListener("pointerup", onUp);
+				handle.addEventListener("pointercancel", onUp);
+			});
+		}
+		return controls;
+	};
+	const drawViews = (row, entry) => {
+		const controls = row.controls;
+		const views = lab.views(entry.id);
+		const drawn = views.map((view) => `${view.id}:${view.name}`).join("|");
+		if (drawn === controls.viewsDrawn) return;
+		controls.viewsDrawn = drawn;
+		controls.views.innerHTML = views.map((view) => `<li class="tcm-view" data-view="${escape$1(view.id)}">
+          <button type="button" class="tcm-view-go" data-action="go" title="Fly back to ${escape$1(view.name)}">${svg$1(ICONS$1.go)}<span>${escape$1(view.name)}</span></button>
+          ${icon$1("remove", `Forget ${escape$1(view.name)}`)}
+        </li>`).join("");
+	};
+	const makeRow = (entry) => {
+		const li = document.createElement("li");
+		const id = entry.id;
+		li.className = "tcm-row";
+		li.innerHTML = `
+      <div class="tcm-head">
+        <span class="tcm-kind" title="${entry.kind} camera">${svg$1(KIND_ICONS[entry.kind])}</span>
+        <button type="button" class="tcm-text" data-action="open" aria-expanded="false" title="Pick to edit">
+          <span class="tcm-name-line"><span class="tcm-name"></span><span class="tcm-badge"></span></span>
+          <span class="tcm-meta"></span>
+        </button>
+        <div class="tcm-actions">
+          ${paths ? icon$1("path", "Show its motion path in the scene") : ""}
+          ${icon$1("look", "Look through it")}
+          ${icon$1("frustum", "Show its frustum in the scene")}
+          ${icon$1("chevron", "Edit", "tcm-chevron")}
+        </div>
+      </div>
+      <div class="tcm-details"></div>
+    `;
+		const row = {
+			li,
+			name: li.querySelector(".tcm-name"),
+			badge: li.querySelector(".tcm-badge"),
+			meta: li.querySelector(".tcm-meta"),
+			look: li.querySelector("[data-action=\"look\"]"),
+			helper: li.querySelector("[data-action=\"frustum\"]"),
+			path: li.querySelector("[data-action=\"path\"]"),
+			details: li.querySelector(".tcm-details"),
+			controls: null,
+			open: false
+		};
+		row.name.textContent = id;
+		row.name.title = id;
+		li.addEventListener("click", (event) => {
+			const target = event.target.closest("[data-action]");
+			const action = target?.dataset.action;
+			const current = lab.entry(id);
+			if (!current || !action) return;
+			if (action === "open" || action === "chevron") {
+				row.open = !row.open;
+				if (row.open) lab.select(id);
+				if (row.open && !row.controls) row.controls = buildControls(row, current);
+				update(row, current);
+			} else if (action === "look") attempt(() => lab.lookThrough(current.viewing ? null : id));
+			else if (action === "path") attempt(() => lab.setTrail(id, !current.trail));
+			else if (action === "frustum") attempt(() => lab.setHelper(id, !current.helper));
+			else if (action === "copy") copyCode(row, current);
+			else if (action === "bake") {
+				if (current.keys === 0 || window.confirm(`Replace ${id}'s ${current.keys} keys with its recorded move?`)) attempt(() => {
+					const keys = lab.bakeMotion(id);
+					say(`Baked ${keys.length} keys from ${id}'s last few seconds: drag their dots in the scene.`);
+				});
+			} else if (action === "save") attempt(() => lab.saveView(id));
+			else if (action === "go" || action === "remove") {
+				const viewId = target.closest("[data-view]")?.dataset.view;
+				if (viewId) attempt(() => action === "go" ? lab.goToView(id, viewId) : lab.deleteView(id, viewId));
+			}
+		});
+		return row;
+	};
+	const copyCode = async (row, entry) => {
+		const code = poseToCode(capturePose(entry.camera), identifier(entry.id));
+		const button = row.controls.copy;
+		try {
+			await navigator.clipboard.writeText(code);
+			button.textContent = "Copied";
+		} catch {
+			say("The clipboard is blocked here. The code is logged to the console instead.");
+			console.log(code);
+		}
+		setTimeout(() => {
+			button.textContent = "Copy as code";
+		}, 1200);
+	};
+	const update = (row, entry) => {
+		const open = row.open;
+		const details = lab.details(entry.id);
+		row.li.classList.toggle("is-live", entry.live);
+		row.li.classList.toggle("is-open", open);
+		row.li.classList.toggle("is-viewing", entry.viewing);
+		row.li.classList.toggle("is-selected", entry.selected);
+		row.badge.className = `tcm-badge${entry.viewing ? " is-viewing" : entry.live ? " is-live" : ""}`;
+		row.badge.textContent = entry.viewing ? "viewing" : entry.standingIn ? "replaced" : entry.live ? `live · ${entry.fps} fps` : "";
+		row.meta.textContent = describe(entry, details);
+		row.meta.title = row.meta.textContent;
+		row.look.disabled = !entry.projects || !lab.watching;
+		row.look.setAttribute("aria-pressed", String(entry.viewing));
+		row.look.title = entry.viewing ? "Stop looking through it" : "Look through it";
+		row.look.setAttribute("aria-label", row.look.title);
+		row.helper.disabled = !entry.canHelp;
+		row.helper.setAttribute("aria-pressed", String(entry.helper));
+		row.helper.title = entry.helper ? "Hide its frustum" : "Show its frustum in the scene";
+		row.helper.setAttribute("aria-label", row.helper.title);
+		if (row.path) {
+			row.path.disabled = entry.keys === 0;
+			row.path.setAttribute("aria-pressed", String(entry.trail));
+			row.path.title = entry.trail ? "Hide its motion path" : "Show its motion path in the scene";
+			row.path.setAttribute("aria-label", row.path.title);
+		}
+		for (const toggle of row.li.querySelectorAll("[data-action=\"open\"], [data-action=\"chevron\"]")) toggle.setAttribute("aria-expanded", String(open));
+		if (!open || !details || !row.controls) return;
+		const values = valuesOf(details);
+		for (const [key, input] of row.controls.fields) {
+			const value = values[key];
+			if (value !== void 0 && input !== document.activeElement && input !== scrubbing) input.value = formatField(key, value);
+		}
+		row.controls.readout.innerHTML = readoutOf(entry, details);
+		const bake = row.details.querySelector("[data-action=\"bake\"]");
+		if (bake) bake.hidden = !entry.recorded;
+		drawViews(row, entry);
+	};
+	const filter = () => {
+		const query = search.value.trim().toLowerCase();
+		for (const [id, row] of rows) row.li.classList.toggle("is-hidden", query.length > 0 && !id.toLowerCase().includes(query));
+	};
+	/** Rows in, rows out, then every row's live state. */
+	const render = () => {
+		const entries = lab.entries();
+		const ids = new Set(entries.map((entry) => entry.id));
+		for (const [id, row] of rows) if (!ids.has(id)) {
+			row.li.remove();
+			rows.delete(id);
+		}
+		for (const entry of entries) {
+			let row = rows.get(entry.id);
+			if (!row) {
+				row = makeRow(entry);
+				rows.set(entry.id, row);
+				list.append(row.li);
+			}
+			update(row, entry);
+		}
+		const viewing = entries.find((entry) => entry.viewing);
+		const standIn = entries.find((entry) => entry.standingIn);
+		banner.hidden = !viewing;
+		bannerText.textContent = viewing ? `Looking through ${viewing.id}${standIn ? ` in place of ${standIn.id}` : ""}` : "";
+		empty.hidden = entries.length > 0;
+		filter();
+		element.dataset.count = String(entries.length);
+		element.dispatchEvent(new CustomEvent("tcm-count", { detail: entries.length }));
+		for (const listener of renderListeners) listener();
+	};
+	element.querySelector("[data-action=\"refresh\"]").addEventListener("click", () => lab.refresh());
+	banner.querySelector("button").addEventListener("click", () => attempt(() => lab.lookThrough(null)));
+	search.addEventListener("input", filter);
+	const unsubscribe = lab.subscribe(render);
+	const setActive = (active) => {
+		if (active && !timer) {
+			lab.refresh();
+			render();
+			timer = setInterval(() => {
+				lab.refresh();
+				render();
+			}, TICK_MS);
+		} else if (!active && timer) {
+			clearInterval(timer);
+			timer = null;
+		}
+	};
+	render();
+	setActive(true);
+	return {
+		element,
+		setTheme: (theme) => {
+			if (element.closest(".perf-hud__card")) delete element.dataset.theme;
+			else element.dataset.theme = theme;
+		},
+		refresh: () => lab.refresh(),
+		setActive,
+		row: (id) => rows.get(id)?.li ?? null,
+		onRender: (listener) => {
+			renderListeners.add(listener);
+			return () => {
+				renderListeners.delete(listener);
+			};
+		},
+		dispose: () => {
+			setActive(false);
+			unsubscribe();
+			renderListeners.clear();
+			element.remove();
+		}
+	};
+};
+//#endregion
+//#region src/ui/path-editor.ts
+/**
+* Editing motion paths in the scene: the key dots on a camera's path are handles. Hover one and
+* the cursor becomes a hand; drag it and the key moves, on a plane facing the view through where it
+* was (Shift: straight up or down), so the path and the camera's move reshape as you go.
+*
+* It listens on the renderer's canvas in the capture phase and takes only presses that land on a
+* dot, so orbit controls and the app's own handlers get every other press.
+*/
+/** A dot within this many CSS pixels of the pointer is under it. */
+const HIT_PX = 10;
+const createPathEditor = (lab, canvas, { onPick } = {}) => {
+	const inverseProjection = new Matrix4();
+	const point = new Vector3();
+	let restoreCursor = null;
+	let dragging = false;
+	/** The main view's rectangle on the canvas, in CSS pixels from its top left. */
+	const viewRect = (view) => {
+		const box = canvas.getBoundingClientRect();
+		const scale = canvas.width > 0 ? box.width / canvas.width : 1;
+		const { x, y, z: width, w: height } = view.viewport;
+		return {
+			left: box.left + x * scale,
+			top: box.top + box.height - (y + height) * scale,
+			width: width * scale,
+			height: height * scale
+		};
+	};
+	/** The dot under the pointer, nearest first. */
+	const hitAt = (clientX, clientY) => {
+		const view = lab.viewTransform();
+		if (!view) return null;
+		const rect = viewRect(view);
+		const toView = view.world.clone().invert();
+		let best = null;
+		let bestDistance = HIT_PX;
+		for (const handle of lab.keyHandles()) {
+			point.copy(handle.position).applyMatrix4(toView).applyMatrix4(view.projection);
+			if (point.z < -1 || point.z > 1) continue;
+			const x = rect.left + (point.x + 1) / 2 * rect.width;
+			const y = rect.top + (1 - point.y) / 2 * rect.height;
+			const distance = Math.hypot(x - clientX, y - clientY);
+			if (distance < bestDistance) {
+				bestDistance = distance;
+				best = handle;
+			}
+		}
+		return best;
+	};
+	/** The ray from the view through a screen point. */
+	const rayAt = (clientX, clientY) => {
+		const view = lab.viewTransform();
+		if (!view) return null;
+		const rect = viewRect(view);
+		const ndcX = (clientX - rect.left) / rect.width * 2 - 1;
+		const ndcY = -((clientY - rect.top) / rect.height * 2 - 1);
+		inverseProjection.copy(view.projection).invert();
+		const near = new Vector3(ndcX, ndcY, -1).applyMatrix4(inverseProjection).applyMatrix4(view.world);
+		const far = new Vector3(ndcX, ndcY, 1).applyMatrix4(inverseProjection).applyMatrix4(view.world);
+		return {
+			ray: new Ray(near, far.sub(near).normalize()),
+			view
+		};
+	};
+	const setCursor = (cursor) => {
+		if (cursor) {
+			restoreCursor ??= canvas.style.cursor;
+			canvas.style.cursor = cursor;
+		} else if (restoreCursor !== null) {
+			canvas.style.cursor = restoreCursor;
+			restoreCursor = null;
+		}
+	};
+	const onHover = (event) => {
+		if (!dragging) setCursor(hitAt(event.clientX, event.clientY) ? "grab" : null);
+	};
+	const onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		const hit = hitAt(event.clientX, event.clientY);
+		const start = hit ? rayAt(event.clientX, event.clientY) : null;
+		if (!hit || !start) return;
+		event.stopImmediatePropagation();
+		event.preventDefault();
+		canvas.setPointerCapture(event.pointerId);
+		dragging = true;
+		setCursor("grabbing");
+		onPick?.(hit.camera, hit.key);
+		lab.select(hit.camera);
+		const key = lab.keys(hit.camera).find((other) => other.id === hit.key);
+		if (key) lab.seek(key.time);
+		const origin = hit.position.clone();
+		const facing = new Vector3(0, 0, -1).transformDirection(start.view.world);
+		const plane = new Plane().setFromNormalAndCoplanarPoint(facing, origin);
+		const level = facing.clone().setY(0);
+		const upright = new Plane().setFromNormalAndCoplanarPoint(level.lengthSq() > 1e-6 ? level.normalize() : new Vector3(0, 0, 1), origin);
+		const grabbed = start.ray.intersectPlane(plane, new Vector3()) ?? origin.clone();
+		const grabbedUpright = start.ray.intersectPlane(upright, new Vector3()) ?? origin.clone();
+		const onMove = (move) => {
+			const next = rayAt(move.clientX, move.clientY);
+			if (!next) return;
+			let target;
+			if (move.shiftKey) {
+				const hitUpright = next.ray.intersectPlane(upright, new Vector3());
+				target = hitUpright ? origin.clone().setY(origin.y + hitUpright.y - grabbedUpright.y) : null;
+			} else {
+				const hitPlane = next.ray.intersectPlane(plane, new Vector3());
+				target = hitPlane ? origin.clone().add(hitPlane.sub(grabbed)) : null;
+			}
+			if (target) try {
+				lab.moveKeyTo(hit.camera, hit.key, target);
+			} catch {}
+		};
+		const onUp = () => {
+			canvas.removeEventListener("pointermove", onMove);
+			canvas.removeEventListener("pointerup", onUp);
+			canvas.removeEventListener("pointercancel", onUp);
+			dragging = false;
+			setCursor(null);
+		};
+		canvas.addEventListener("pointermove", onMove);
+		canvas.addEventListener("pointerup", onUp);
+		canvas.addEventListener("pointercancel", onUp);
+	};
+	canvas.addEventListener("pointermove", onHover);
+	canvas.addEventListener("pointerdown", onPointerDown, { capture: true });
+	return {
+		/** For tests and hosts: the dot under a screen point, if any. */
+		hitAt,
+		dispose: () => {
+			canvas.removeEventListener("pointermove", onHover);
+			canvas.removeEventListener("pointerdown", onPointerDown, { capture: true });
+			setCursor(null);
+		}
+	};
+};
+//#endregion
+//#region src/ui/ease-editor.ts
+/**
+* The ease curve editor: the move from the picked key to the next as a curve of progress over
+* time, CSS `cubic-bezier` style, with its two handles to drag. Reshaping a preset turns it into
+* a custom curve starting from the preset's shape. Handles go outside 0–1 upward and downward for
+* overshoot and anticipation; time stays in order (0–1).
+*/
+const W = 132;
+const H = 104;
+/** The unit square's corners in the editor. */
+const LEFT = 22;
+const TOP = 22;
+const BOTTOM = 82;
+const px = (x) => LEFT + x * 98;
+const py = (y) => BOTTOM - y * 60;
+const unx = (value) => (value - LEFT) / 98;
+const uny = (value) => (BOTTOM - value) / 60;
+const handlesOf = (key) => {
+	if (key.ease === "hold") return null;
+	return key.ease === "custom" ? key.bezier ?? PRESET_BEZIERS.linear : PRESET_BEZIERS[key.ease];
+};
+const createEaseEditor = ({ onCommit }) => {
+	const element = document.createElement("div");
+	element.className = "tcm-ease";
+	element.innerHTML = `<svg viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" role="img" aria-label="Ease into the next key"></svg>`;
+	const svg = element.querySelector("svg");
+	let key = null;
+	let hasNext = false;
+	/** Handles being dragged, before they're committed. */
+	let draft = null;
+	const paint = () => {
+		if (!key) {
+			svg.innerHTML = "";
+			return;
+		}
+		if (!hasNext) {
+			svg.innerHTML = `<text x="${W / 2}" y="${H / 2}" text-anchor="middle" class="tcm-graph-empty">last key: no move after it</text>`;
+			return;
+		}
+		const handles = draft ?? handlesOf(key);
+		const ease = draft ? "custom" : key.ease;
+		const bezier = draft ?? key.bezier;
+		const curve = [];
+		for (let i = 0; i <= 48; i += 1) {
+			const t = i / 48;
+			curve.push(`${i === 0 ? "M" : "L"}${px(t).toFixed(1)} ${py(applyEase(ease, t, bezier)).toFixed(1)}`);
+		}
+		if (ease === "hold") curve.push(`L${px(1)} ${py(1)}`);
+		const box = `<rect class="tcm-ease-box" x="${LEFT}" y="${TOP}" width="98" height="60"/><line class="tcm-grid" x1="${px(0)}" y1="${py(0)}" x2="${px(1)}" y2="${py(1)}"/>`;
+		const labels = `<text class="tcm-graph-axis" x="${LEFT}" y="96">time</text><text class="tcm-graph-axis" x="4" y="14">progress</text>`;
+		const arms = handles ? `<line class="tcm-ease-arm" x1="${px(0)}" y1="${py(0)}" x2="${px(handles[0])}" y2="${py(handles[1])}"/><line class="tcm-ease-arm" x1="${px(1)}" y1="${py(1)}" x2="${px(handles[2])}" y2="${py(handles[3])}"/><circle class="tcm-ease-handle" data-handle="0" cx="${px(handles[0])}" cy="${py(handles[1])}" r="5"><title>Drag to reshape</title></circle><circle class="tcm-ease-handle" data-handle="1" cx="${px(handles[2])}" cy="${py(handles[3])}" r="5"><title>Drag to reshape</title></circle>` : "";
+		svg.innerHTML = `${box}${labels}<path class="tcm-ease-curve" d="${curve.join("")}"/>${arms}`;
+	};
+	svg.addEventListener("pointerdown", (event) => {
+		const handle = event.target.dataset?.handle;
+		if (!key || handle === void 0) return;
+		const start = handlesOf(key);
+		if (!start) return;
+		event.preventDefault();
+		svg.setPointerCapture(event.pointerId);
+		draft = [...start];
+		const box = svg.getBoundingClientRect();
+		const scaleX = W / Math.max(box.width, 1);
+		const scaleY = H / Math.max(box.height, 1);
+		const index = handle === "0" ? 0 : 2;
+		const onMove = (move) => {
+			const hx = unx((move.clientX - box.left) * scaleX);
+			const hy = uny((move.clientY - box.top) * scaleY);
+			draft[index] = Math.min(1, Math.max(0, hx));
+			draft[index + 1] = Math.min(2, Math.max(-1, hy));
+			paint();
+		};
+		const onUp = () => {
+			svg.removeEventListener("pointermove", onMove);
+			svg.removeEventListener("pointerup", onUp);
+			svg.removeEventListener("pointercancel", onUp);
+			const committed = draft.map((value) => Math.round(value * 1e3) / 1e3);
+			draft = null;
+			onCommit(committed);
+		};
+		svg.addEventListener("pointermove", onMove);
+		svg.addEventListener("pointerup", onUp);
+		svg.addEventListener("pointercancel", onUp);
+	});
+	return {
+		element,
+		/** Whether a handle is being dragged: the timeline holds its rebuilds meanwhile. */
+		get dragging() {
+			return draft !== null;
+		},
+		set: (next, nextExists) => {
+			key = next;
+			hasNext = nextExists;
+			if (!draft) paint();
+		}
+	};
+};
+//#endregion
+//#region src/ui/graph.ts
+/**
+* The graph editor: the picked camera's channels over time, drawn from the track as it plays (so
+* the path's bends and the eases show), with a dot per key per channel. Drag a dot up or down to
+* change that value in the key, or sideways to retime the key (the first few pixels pick which).
+* Click between keys to pick the segment there, double-click to add a key.
+*
+* Channels are stretched to their own ranges by default, so metres and degrees share one plot;
+* "values" draws them on one shared scale instead.
+*/
+const HEIGHT = 150;
+const PAD = 12;
+const SNAP$1 = .1;
+const DRAG_PX$1 = 4;
+const COLORS = {
+	px: "#f87171",
+	py: "#4ade80",
+	pz: "#60a5fa",
+	rx: "#fca5a5",
+	ry: "#86efac",
+	rz: "#93c5fd",
+	fov: "#fbbf24",
+	zoom: "#fbbf24",
+	near: "#c4b5fd",
+	far: "#f0abfc"
+};
+const SHORT = {
+	px: "x",
+	py: "y",
+	pz: "z",
+	rx: "rx",
+	ry: "ry",
+	rz: "rz",
+	fov: "fov",
+	zoom: "zoom",
+	near: "near",
+	far: "far"
+};
+const trim = (value) => {
+	const text = value.toFixed(Math.abs(value) >= 100 ? 0 : 2);
+	return text.includes(".") ? text.replace(/\.?0+$/, "") : text;
+};
+/** An angle moved by whole turns to sit nearest `near`, so a key dot lands on its unwrapped curve. */
+const nearestTurn = (value, near) => value + Math.round((near - value) / 360) * 360;
+const createGraph = (lab, options) => {
+	const side = document.createElement("div");
+	const plot = document.createElement("div");
+	side.className = "tcm-graph-side";
+	plot.className = "tcm-graph";
+	plot.innerHTML = `<svg class="tcm-graph-svg" height="${HEIGHT}" role="img" aria-label="Camera channels over time"></svg>`;
+	const svg = plot.querySelector("svg");
+	const visible = /* @__PURE__ */ new Set([
+		"px",
+		"py",
+		"pz",
+		"fov"
+	]);
+	let normalize = true;
+	/** Scales held still during a drag, so the value under the pointer doesn't slide. */
+	let frozen = null;
+	let lastScales = /* @__PURE__ */ new Map();
+	let width = 600;
+	const keysOf = () => {
+		const camera = options.camera();
+		return camera ? lab.keys(camera) : [];
+	};
+	/** Channels this track has, fov only for a perspective camera. */
+	const available = (keys) => CHANNELS.filter((channel) => keys.some((key) => readChannel(key.pose, channel) !== void 0));
+	const shown = (keys) => {
+		const channels = available(keys).filter((channel) => visible.has(channel));
+		return channels.length > 0 ? channels : available(keys).filter((channel) => channel === "zoom");
+	};
+	const x = (time) => time / Math.max(lab.timeline().duration, .001) * width;
+	const y = (value, scale) => 138 - (value - scale.min) / Math.max(scale.max - scale.min, 1e-9) * 126;
+	const rangeOf = (values) => {
+		let min = Math.min(...values);
+		let max = Math.max(...values);
+		if (max - min < 1e-6) {
+			min -= 1;
+			max += 1;
+		}
+		const pad = (max - min) * .08;
+		return {
+			min: min - pad,
+			max: max + pad
+		};
+	};
+	const paintSide = (keys) => {
+		const channels = available(keys);
+		side.innerHTML = `${channels.map((channel) => `<button type="button" class="tcm-chan" data-channel="${channel}" aria-pressed="${visible.has(channel)}" style="--tcm-chan:${COLORS[channel]}" title="${CHANNEL_LABELS[channel]}">${SHORT[channel]}</button>`).join("")}<button type="button" class="tcm-chan tcm-chan--mode" data-graph-mode aria-pressed="${!normalize}" title="${normalize ? "Each channel stretched to its own range. Click for true values on one scale." : "True values on one scale. Click to stretch each channel to its own range."}">values</button>`;
+	};
+	const paint = () => {
+		const keys = keysOf();
+		const duration = lab.timeline().duration;
+		width = Math.max(plot.clientWidth, 100);
+		svg.setAttribute("width", String(width));
+		svg.setAttribute("viewBox", `0 0 ${width} ${HEIGHT}`);
+		paintSide(keys);
+		if (keys.length === 0) {
+			svg.innerHTML = `<text x="${width / 2}" y="${HEIGHT / 2}" text-anchor="middle" class="tcm-graph-empty">${options.camera() ? "No keys on this camera yet: press Key, or double-click here" : "Pick a camera to see its track"}</text>`;
+			return;
+		}
+		const channels = shown(keys);
+		const samples = Math.min(400, Math.max(40, Math.round(width / 3)));
+		const curves = new Map(channels.map((channel) => [channel, sampleChannel(keys, channel, 0, duration, samples)]));
+		const scales = /* @__PURE__ */ new Map();
+		if (frozen) for (const [channel, scale] of frozen) scales.set(channel, scale);
+		else if (normalize) for (const [channel, points] of curves) scales.set(channel, rangeOf(points.map(([, value]) => value)));
+		else {
+			const all = rangeOf([...curves.values()].flatMap((points) => points.map(([, value]) => value)));
+			for (const channel of channels) scales.set(channel, all);
+		}
+		lastScales = scales;
+		const picked = options.picked();
+		const grid = [
+			.25,
+			.5,
+			.75
+		].map((share) => {
+			const at = PAD + share * 126;
+			return `<line class="tcm-grid" x1="0" x2="${width}" y1="${at}" y2="${at}"/>`;
+		}).join("");
+		const shared = !normalize && channels[0] ? scales.get(channels[0]) : null;
+		const axis = shared ? `<text class="tcm-graph-axis" x="4" y="21">${trim(shared.max)}</text><text class="tcm-graph-axis" x="4" y="135">${trim(shared.min)}</text>` : "";
+		const keyLines = keys.map((key) => `<line class="tcm-key-line" x1="${x(key.time)}" x2="${x(key.time)}" y1="0" y2="${HEIGHT}"/>`).join("");
+		const lines = channels.map((channel) => {
+			const scale = scales.get(channel);
+			return `<path class="tcm-curve" d="${curves.get(channel).map(([time, value], index) => `${index === 0 ? "M" : "L"}${x(time).toFixed(1)} ${y(value, scale).toFixed(1)}`).join("")}" stroke="${COLORS[channel]}"/>`;
+		}).join("");
+		const dots = channels.flatMap((channel) => {
+			const scale = scales.get(channel);
+			const points = curves.get(channel);
+			return keys.map((key) => {
+				let value = readChannel(key.pose, channel);
+				if (channel.startsWith("r")) {
+					const near = points.reduce((best, point) => Math.abs(point[0] - key.time) < Math.abs(best[0] - key.time) ? point : best);
+					value = nearestTurn(value, near[1]);
+				}
+				const isPicked = picked?.key === key.id;
+				return `<circle class="tcm-dot${isPicked ? " is-picked" : ""}" cx="${x(key.time)}" cy="${y(value, scale)}" r="${isPicked ? 5 : 4}" fill="${COLORS[channel]}" data-key="${key.id}" data-channel="${channel}" data-value="${value}"><title>${CHANNEL_LABELS[channel]} ${trim(value)} at ${key.time.toFixed(2)} s</title></circle>`;
+			});
+		}).join("");
+		svg.innerHTML = grid + axis + keyLines + lines + dots;
+	};
+	side.addEventListener("click", (event) => {
+		const button = event.target.closest("button");
+		if (!button) return;
+		if (button.dataset.graphMode !== void 0) normalize = !normalize;
+		else {
+			const channel = button.dataset.channel;
+			if (visible.has(channel)) visible.delete(channel);
+			else visible.add(channel);
+		}
+		paint();
+	});
+	const timeAt = (clientX) => {
+		const box = svg.getBoundingClientRect();
+		return Math.min(1, Math.max(0, (clientX - box.left) / Math.max(box.width, 1))) * lab.timeline().duration;
+	};
+	svg.addEventListener("pointerdown", (event) => {
+		const camera = options.camera();
+		const target = event.target;
+		if (!camera) return;
+		const keys = lab.keys(camera);
+		if (!target.classList.contains("tcm-dot")) {
+			const time = timeAt(event.clientX);
+			const segment = [...keys].reverse().find((key) => key.time <= time) ?? null;
+			options.onPick(segment ? {
+				camera,
+				key: segment.id
+			} : null);
+			lab.seek(time);
+			return;
+		}
+		const keyId = target.dataset.key;
+		const channel = target.dataset.channel;
+		const startValue = Number(target.dataset.value);
+		const key = keys.find((other) => other.id === keyId);
+		if (!key) return;
+		event.preventDefault();
+		svg.setPointerCapture(event.pointerId);
+		options.onPick({
+			camera,
+			key: keyId
+		});
+		options.onDrag(true);
+		frozen = new Map(lastScales);
+		lab.seek(key.time);
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const startPose = key.pose;
+		const duration = lab.timeline().duration;
+		const scale = frozen.get(channel) ?? {
+			min: 0,
+			max: 1
+		};
+		let axis = null;
+		const onMove = (move) => {
+			const dx = move.clientX - startX;
+			const dy = move.clientY - startY;
+			if (!axis) {
+				if (Math.hypot(dx, dy) < DRAG_PX$1) return;
+				axis = Math.abs(dx) > Math.abs(dy) ? "time" : "value";
+			}
+			try {
+				if (axis === "time") {
+					const raw = key.time + dx / width * duration;
+					const time = Math.min(duration, Math.max(0, move.shiftKey ? raw : Math.round(raw / SNAP$1) * SNAP$1));
+					lab.updateKey(camera, keyId, { time });
+					lab.seek(time);
+				} else {
+					const perPixel = (scale.max - scale.min) / 126;
+					const value = startValue - dy * perPixel * (move.shiftKey ? .1 : 1);
+					lab.updateKey(camera, keyId, { pose: writeChannel(startPose, channel, value) });
+				}
+				paint();
+			} catch (error) {
+				options.say(error.message.replace(/^three-cameras: /, ""));
+			}
+		};
+		const onUp = () => {
+			svg.removeEventListener("pointermove", onMove);
+			svg.removeEventListener("pointerup", onUp);
+			svg.removeEventListener("pointercancel", onUp);
+			frozen = null;
+			options.onDrag(false);
+			paint();
+		};
+		svg.addEventListener("pointermove", onMove);
+		svg.addEventListener("pointerup", onUp);
+		svg.addEventListener("pointercancel", onUp);
+	});
+	svg.addEventListener("dblclick", (event) => {
+		const camera = options.camera();
+		if (camera && !event.target.classList.contains("tcm-dot")) try {
+			const key = lab.addKey(camera, { time: Math.round(timeAt(event.clientX) / SNAP$1) * SNAP$1 });
+			options.onPick({
+				camera,
+				key: key.id
+			});
+		} catch (error) {
+			options.say(error.message.replace(/^three-cameras: /, ""));
+		}
+	});
+	const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => paint());
+	resize?.observe(plot);
+	return {
+		side,
+		plot,
+		paint,
+		dispose: () => {
+			resize?.disconnect();
+		}
+	};
+};
+//#endregion
+//#region src/ui/timeline.ts
+/** Keys snap to this, s, unless Shift is held. */
+const SNAP = .1;
+/** A press that moves less than this, px, is a click. */
+const DRAG_PX = 3;
+const ICONS = {
+	start: "<path d=\"M6 5v14\"/><path d=\"M18 5 9 12l9 7Z\"/>",
+	play: "<path d=\"M7 4v16l13-8Z\"/>",
+	pause: "<path d=\"M8 5v14M16 5v14\"/>",
+	stop: "<rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1.5\"/>",
+	loop: "<path d=\"M17 2l4 4-4 4\"/><path d=\"M3 11V9a3 3 0 0 1 3-3h15\"/><path d=\"m7 22-4-4 4-4\"/><path d=\"M21 13v2a3 3 0 0 1-3 3H3\"/>",
+	key: "<path d=\"M12 3 21 12 12 21 3 12Z\"/>",
+	trail: "<path d=\"M3 18c3-8 7-1 10-7s5-5 8-5\"/><circle cx=\"3\" cy=\"18\" r=\"1.5\"/><circle cx=\"21\" cy=\"6\" r=\"1.5\"/>"
+};
+const EASE_LABELS = {
+	"ease-in-out": "ease in-out",
+	linear: "linear",
+	"ease-in": "ease in",
+	"ease-out": "ease out",
+	hold: "hold",
+	custom: "custom curve"
+};
+const svg = (paths) => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
+const icon = (action, paths, label) => `<button type="button" class="tcm-icon" data-action="${action}" title="${label}" aria-label="${label}">${svg(paths)}</button>`;
+const escape = (text) => text.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+const seconds = (value) => value.toFixed(2);
+/** Ruler steps: labelled every `major` s, a tick every `minor`. */
+const rulerSteps = (duration) => {
+	const major = duration <= 12 ? 1 : duration <= 30 ? 5 : duration <= 120 ? 10 : 30;
+	return {
+		major,
+		minor: major / (major === 1 ? 4 : 5)
+	};
+};
+const createTimelinePanel = (lab, { sidebar } = {}) => {
+	injectStyles();
+	const element = document.createElement("div");
+	element.className = "tcm tcm-timeline";
+	element.tabIndex = -1;
+	element.innerHTML = `
+    <div class="tcm-transport">
+      ${icon("start", ICONS.start, "To the start")}
+      <button type="button" class="tcm-icon tcm-play" data-action="play" title="Play (Space)" aria-label="Play">${svg(ICONS.play)}</button>
+      ${icon("stop", ICONS.stop, "Stop, and let the cameras go")}
+      ${icon("loop", ICONS.loop, "Loop")}
+      <div class="tcm-modes" role="radiogroup" aria-label="View">
+        <button type="button" role="radio" aria-checked="true" data-action="mode" data-mode="keys" title="Keys: a lane per camera">Keys</button>
+        <button type="button" role="radio" aria-checked="false" data-action="mode" data-mode="graph" title="Graph: the picked camera's channels over time">Graph</button>
+      </div>
+      <span class="tcm-clock"></span>
+      <label class="tcm-length" title="The timeline's length">length <input type="number" min="1" step="1" inputmode="decimal" /> s</label>
+      <span class="tcm-spacer"></span>
+      <button type="button" class="tcm-text-button tcm-add-key" data-action="add-key">${svg(ICONS.key)}<span>Key</span></button>
+    </div>
+    <div class="tcm-tl">
+      <div class="tcm-tl-names"><div class="tcm-tl-corner"></div></div>
+      <div class="tcm-tl-area">
+        <div class="tcm-ruler" title="Drag to scrub"></div>
+        <div class="tcm-lanes"></div>
+        <div class="tcm-playhead"></div>
+      </div>
+    </div>
+    <div class="tcm-inspector" hidden>
+      <span class="tcm-inspector-title"></span>
+      <label class="tcm-length">at <input type="number" min="0" step="0.1" data-key-field="time" inputmode="decimal" /> s</label>
+      <span class="tcm-ease-slot"></span>
+      <select data-key-field="ease" aria-label="Ease into the next key">${EASES.map((ease) => `<option value="${ease}">${EASE_LABELS[ease]}</option>`).join("")}</select>
+      <span class="tcm-spacer"></span>
+      <button type="button" class="tcm-text-button" data-action="key-update" title="Re-key it from the camera as it is now">Update</button>
+      <button type="button" class="tcm-text-button" data-action="key-delete" title="Delete the key (Delete)">Delete</button>
+    </div>
+    <div class="tcm-empty tcm-tl-empty" hidden>Pick a camera and press Key, or double-click its lane, to start a track.</div>
+    <div class="tcm-status" role="status"></div>
+  `;
+	const $ = (selector) => element.querySelector(selector);
+	const playButton = $("[data-action=\"play\"]");
+	const loopButton = $("[data-action=\"loop\"]");
+	const clock = $(".tcm-clock");
+	const lengthInput = $(".tcm-transport .tcm-length input");
+	const addKey = $("[data-action=\"add-key\"]");
+	const addKeyLabel = addKey.querySelector("span");
+	const names = $(".tcm-tl-names");
+	const area = $(".tcm-tl-area");
+	const ruler = $(".tcm-ruler");
+	const lanes = $(".tcm-lanes");
+	const playhead = $(".tcm-playhead");
+	const inspector = $(".tcm-inspector");
+	const inspectorTitle = $(".tcm-inspector-title");
+	const keyTime = $("[data-key-field=\"time\"]");
+	const keyEase = $("[data-key-field=\"ease\"]");
+	const empty = $(".tcm-tl-empty");
+	const status = $(".tcm-status");
+	let picked = null;
+	let dragging = false;
+	let frame = 0;
+	let rulerFor = -1;
+	let mode = "keys";
+	const say = (message) => {
+		status.textContent = message;
+	};
+	const attempt = (work) => {
+		try {
+			say("");
+			work();
+		} catch (error) {
+			say(error.message.replace(/^three-cameras: /, ""));
+		}
+	};
+	const tracked = () => lab.entries().filter((entry) => entry.projects);
+	const graph = createGraph(lab, {
+		camera: () => target(tracked())?.id ?? null,
+		picked: () => picked,
+		onPick: (next) => {
+			picked = next;
+			paintInspector();
+		},
+		onDrag: (active) => {
+			dragging = active;
+			if (!active) render();
+		},
+		say: (message) => say(message)
+	});
+	const ease = createEaseEditor({ onCommit: (bezier) => {
+		if (picked) {
+			const { camera, key } = picked;
+			attempt(() => lab.updateKey(camera, key, { bezier }));
+		}
+	} });
+	if (sidebar) {
+		element.classList.add("is-combined");
+		names.replaceChildren(sidebar.element);
+		area.insertBefore(graph.side, playhead);
+	} else names.append(graph.side);
+	area.insertBefore(graph.plot, playhead);
+	$(".tcm-ease-slot").replaceWith(ease.element);
+	/** The camera "Key" acts on: the picked one, else the first that can be keyed. */
+	const target = (entries) => entries.find((entry) => entry.selected) ?? entries[0] ?? null;
+	const timeAt = (clientX) => {
+		const box = ruler.getBoundingClientRect();
+		const share = box.width > 0 ? (clientX - box.left) / box.width : 0;
+		return Math.min(1, Math.max(0, share)) * lab.timeline().duration;
+	};
+	const percent = (time) => `${time / Math.max(lab.timeline().duration, .001) * 100}%`;
+	/** Playhead, clock and play button: every frame while playing, else on changes. */
+	const paintClock = () => {
+		const state = lab.timeline();
+		playhead.style.left = percent(state.time);
+		clock.textContent = `${seconds(state.time)} / ${seconds(state.duration)} s`;
+		playButton.innerHTML = svg(state.playing ? ICONS.pause : ICONS.play);
+		playButton.title = state.playing ? "Pause (Space)" : "Play (Space)";
+		playButton.setAttribute("aria-label", state.playing ? "Pause" : "Play");
+		element.classList.toggle("is-engaged", state.engaged);
+		element.dispatchEvent(new CustomEvent("tcm-clock", { detail: `${seconds(state.time)} / ${seconds(state.duration)} s` }));
+		if (state.playing && !frame) {
+			const tick = () => {
+				paintClock();
+				frame = lab.timeline().playing ? requestAnimationFrame(tick) : 0;
+			};
+			frame = requestAnimationFrame(tick);
+		}
+	};
+	const paintRuler = (duration) => {
+		if (rulerFor === duration) return;
+		rulerFor = duration;
+		const { major, minor } = rulerSteps(duration);
+		const ticks = [];
+		for (let at = 0; at <= duration + 1e-6; at += minor) {
+			const isMajor = Math.abs(at / major - Math.round(at / major)) < 1e-6;
+			ticks.push(`<span class="tcm-tick${isMajor ? " is-major" : ""}" style="left:${at / duration * 100}%">${isMajor ? `<b>${Math.round(at)}</b>` : ""}</span>`);
+		}
+		ruler.innerHTML = ticks.join("");
+	};
+	const pickedKey = () => picked ? lab.keys(picked.camera).find((key) => key.id === picked.key) ?? null : null;
+	const paintInspector = () => {
+		const key = pickedKey();
+		inspector.hidden = !key;
+		if (!key || !picked) {
+			ease.set(null, false);
+			return;
+		}
+		const keys = lab.keys(picked.camera);
+		ease.set(key, keys.indexOf(key) < keys.length - 1);
+		inspectorTitle.textContent = `${picked.camera} key`;
+		if (document.activeElement !== keyTime) keyTime.value = seconds(key.time);
+		keyEase.value = key.ease;
+	};
+	/** Lanes and keys, from the lab. Skipped mid-drag so the dragged key isn't rebuilt under the pointer. */
+	const render = () => {
+		if (dragging || ease.dragging) return;
+		const state = lab.timeline();
+		const entries = tracked();
+		const aim = target(entries);
+		paintRuler(state.duration);
+		if (document.activeElement !== lengthInput) lengthInput.value = String(Math.round(state.duration * 100) / 100);
+		loopButton.setAttribute("aria-pressed", String(state.loop));
+		addKey.disabled = !aim;
+		addKeyLabel.textContent = aim ? `Key ${aim.id}` : "Key";
+		addKey.title = aim ? `Key ${aim.id} as it is now, at the playhead` : "No camera to key";
+		element.classList.toggle("is-graph", mode === "graph");
+		for (const button of element.querySelectorAll("[data-action=\"mode\"]")) button.setAttribute("aria-checked", String(button.dataset.mode === mode));
+		const laneEntries = sidebar ? lab.entries() : entries;
+		if (!sidebar) {
+			names.querySelectorAll(".tcm-tl-row").forEach((node) => node.remove());
+			names.insertBefore(document.createRange().createContextualFragment(entries.map((entry) => `<div class="tcm-tl-row">
+              <button type="button" class="tcm-tl-name${entry.selected ? " is-selected" : ""}" data-camera="${escape(entry.id)}" title="Pick ${escape(entry.id)}">${escape(entry.id)}</button>
+              <button type="button" class="tcm-icon tcm-trail" data-action="trail" data-camera="${escape(entry.id)}" aria-pressed="${entry.trail}" title="${entry.trail ? "Hide" : "Show"} its motion path in the scene" aria-label="${entry.trail ? "Hide" : "Show"} ${escape(entry.id)}'s motion path"${entry.keys === 0 ? " disabled" : ""}>${svg(ICONS.trail)}</button>
+            </div>`).join("")), graph.side);
+		}
+		lanes.innerHTML = laneEntries.map((entry) => {
+			const keys = lab.keys(entry.id).map((key) => {
+				return `<button type="button" class="tcm-key${picked?.camera === entry.id && picked.key === key.id ? " is-picked" : ""}${key.ease === "hold" ? " is-hold" : ""}" data-key="${escape(key.id)}" style="left:${percent(key.time)}" title="${seconds(key.time)} s · ${EASE_LABELS[key.ease]}" aria-label="${escape(entry.id)} key at ${seconds(key.time)} s"></button>`;
+			}).join("");
+			return `<div class="tcm-lane${entry.selected ? " is-selected" : ""}${entry.projects ? "" : " is-inert"}" data-camera="${escape(entry.id)}"${entry.projects ? ` title="Double-click to key ${escape(entry.id)} here"` : ""}>${keys}</div>`;
+		}).join("");
+		if (picked && !pickedKey()) picked = null;
+		empty.hidden = mode === "graph" || entries.some((entry) => entry.keys > 0);
+		paintInspector();
+		paintClock();
+		if (mode === "graph") graph.paint();
+		syncLanes();
+	};
+	/** With a sidebar: each lane at its camera row's height and place, keys on the row's header. */
+	const syncLanes = () => {
+		if (!sidebar || mode === "graph") return;
+		const origin = lanes.getBoundingClientRect().top;
+		let bottom = 0;
+		for (const lane of lanes.querySelectorAll(".tcm-lane")) {
+			const row = sidebar.row(lane.dataset.camera ?? "");
+			if (!row || row.offsetParent === null || row.classList.contains("is-hidden")) {
+				lane.hidden = true;
+				continue;
+			}
+			const box = row.getBoundingClientRect();
+			const head = row.querySelector(".tcm-head")?.getBoundingClientRect().height ?? box.height;
+			lane.hidden = false;
+			lane.style.top = `${box.top - origin}px`;
+			lane.style.height = `${box.height}px`;
+			lane.style.setProperty("--tcm-head", `${head}px`);
+			bottom = Math.max(bottom, box.bottom - origin);
+		}
+		lanes.style.height = `${bottom}px`;
+	};
+	ruler.addEventListener("pointerdown", (event) => {
+		ruler.setPointerCapture(event.pointerId);
+		lab.seek(timeAt(event.clientX));
+		const onMove = (move) => lab.seek(timeAt(move.clientX));
+		const onUp = () => {
+			ruler.removeEventListener("pointermove", onMove);
+			ruler.removeEventListener("pointerup", onUp);
+			ruler.removeEventListener("pointercancel", onUp);
+		};
+		ruler.addEventListener("pointermove", onMove);
+		ruler.addEventListener("pointerup", onUp);
+		ruler.addEventListener("pointercancel", onUp);
+	});
+	lanes.addEventListener("pointerdown", (event) => {
+		const keyButton = event.target.closest(".tcm-key");
+		const lane = event.target.closest(".tcm-lane");
+		const camera = lane?.dataset.camera;
+		if (!lane || !camera) return;
+		if (!keyButton) {
+			lab.select(camera);
+			lab.seek(timeAt(event.clientX));
+			return;
+		}
+		const keyId = keyButton.dataset.key;
+		const key = lab.keys(camera).find((other) => other.id === keyId);
+		if (!key) return;
+		dragging = true;
+		event.preventDefault();
+		picked = {
+			camera,
+			key: keyId
+		};
+		lab.select(camera);
+		keyButton.setPointerCapture(event.pointerId);
+		const startX = event.clientX;
+		const box = lanes.getBoundingClientRect();
+		const duration = lab.timeline().duration;
+		let moved = false;
+		let time = key.time;
+		const onMove = (move) => {
+			if (!moved && Math.abs(move.clientX - startX) < DRAG_PX) return;
+			moved = true;
+			const raw = key.time + (move.clientX - startX) / Math.max(box.width, 1) * duration;
+			const snapped = move.shiftKey ? raw : Math.round(raw / SNAP) * SNAP;
+			time = Math.min(duration, Math.max(0, snapped));
+			keyButton.style.left = percent(time);
+			keyButton.title = `${seconds(time)} s`;
+		};
+		const onUp = () => {
+			keyButton.removeEventListener("pointermove", onMove);
+			keyButton.removeEventListener("pointerup", onUp);
+			keyButton.removeEventListener("pointercancel", onUp);
+			dragging = false;
+			if (moved) attempt(() => lab.updateKey(camera, keyId, { time }));
+			else lab.seek(key.time);
+			render();
+		};
+		keyButton.addEventListener("pointermove", onMove);
+		keyButton.addEventListener("pointerup", onUp);
+		keyButton.addEventListener("pointercancel", onUp);
+	});
+	lanes.addEventListener("dblclick", (event) => {
+		const camera = event.target.closest(".tcm-lane")?.dataset.camera;
+		if (camera && !event.target.closest(".tcm-key")) attempt(() => {
+			const key = lab.addKey(camera, { time: Math.round(timeAt(event.clientX) / SNAP) * SNAP });
+			picked = {
+				camera,
+				key: key.id
+			};
+		});
+	});
+	names.addEventListener("click", (event) => {
+		const camera = event.target.closest(".tcm-tl-name")?.dataset.camera;
+		if (camera) lab.select(camera);
+	});
+	element.addEventListener("click", (event) => {
+		const action = event.target.closest("[data-action]")?.dataset.action;
+		const state = lab.timeline();
+		if (action === "start") lab.seek(0);
+		else if (action === "play") {
+			if (state.playing) lab.pause();
+			else lab.play();
+		} else if (action === "stop") lab.stop();
+		else if (action === "loop") lab.setLoop(!state.loop);
+		else if (action === "mode") {
+			mode = event.target.closest("[data-mode]")?.dataset.mode === "graph" ? "graph" : "keys";
+			render();
+		} else if (action === "trail") {
+			const camera = event.target.closest("[data-camera]")?.dataset.camera;
+			const entry = camera ? lab.entry(camera) : null;
+			if (camera && entry) attempt(() => lab.setTrail(camera, !entry.trail));
+		} else if (action === "add-key") {
+			const aim = target(tracked());
+			if (aim) attempt(() => {
+				const key = lab.addKey(aim.id);
+				picked = {
+					camera: aim.id,
+					key: key.id
+				};
+			});
+		} else if (action === "key-update" && picked) {
+			const { camera, key } = picked;
+			attempt(() => lab.updateKey(camera, key, { recapture: true }));
+		} else if (action === "key-delete" && picked) {
+			const { camera, key } = picked;
+			picked = null;
+			attempt(() => lab.deleteKey(camera, key));
+		}
+	});
+	lengthInput.addEventListener("change", () => {
+		const value = Number(lengthInput.value);
+		if (Number.isFinite(value) && value > 0) lab.setDuration(value);
+	});
+	keyTime.addEventListener("change", () => {
+		const value = Number(keyTime.value);
+		if (picked && Number.isFinite(value) && value >= 0) {
+			const { camera, key } = picked;
+			attempt(() => lab.updateKey(camera, key, { time: value }));
+		}
+	});
+	keyEase.addEventListener("change", () => {
+		if (picked) {
+			const { camera, key } = picked;
+			attempt(() => lab.updateKey(camera, key, { ease: keyEase.value }));
+		}
+	});
+	element.addEventListener("keydown", (event) => {
+		if (event.target.closest("input, select, textarea")) return;
+		if (event.key === " ") {
+			event.preventDefault();
+			if (lab.timeline().playing) lab.pause();
+			else lab.play();
+		} else if ((event.key === "Delete" || event.key === "Backspace") && picked) {
+			const { camera, key } = picked;
+			picked = null;
+			attempt(() => lab.deleteKey(camera, key));
+		}
+	});
+	area.addEventListener("pointerdown", () => element.focus({ preventScroll: true }));
+	const unsubscribe = lab.subscribe(render);
+	const unsubscribeSidebar = sidebar?.onRender(syncLanes);
+	const resize = sidebar && typeof ResizeObserver !== "undefined" ? new ResizeObserver(syncLanes) : null;
+	if (sidebar) resize?.observe(sidebar.element);
+	render();
+	return {
+		element,
+		setTheme: (theme) => {
+			if (element.closest(".perf-hud__card")) delete element.dataset.theme;
+			else element.dataset.theme = theme;
+		},
+		dispose: () => {
+			cancelAnimationFrame(frame);
+			graph.dispose();
+			resize?.disconnect();
+			unsubscribeSidebar?.();
+			unsubscribe();
+			element.remove();
+		}
+	};
+};
+//#endregion
+//#region src/ui/mount.ts
+/**
+* The panel in the zkmake dev-panel frame (three-meter's `mountDevPanel`), so it docks, wakes,
+* dims and toggles exactly like the three-meter HUD: drag grip, expand/compact and dim-on-leave
+* discs beside a card with the brand label on top. One call for a vanilla three app.
+*
+* With the timeline (the default) it's one full-width panel anchored to the bottom of the screen:
+* the camera list as the timeline's left sidebar, each camera's row beside its lane. Without the
+* timeline, it's the camera list, docked and draggable like the other dev panels. Collapsed, either
+* is a small widget with the picked camera (else the one looked through, else a live one); a click
+* on it expands the panel again.
+*/
+const readFlag = (key) => {
+	try {
+		return localStorage.getItem(key);
+	} catch {
+		return null;
+	}
+};
+const writeFlag = (key, value) => {
+	try {
+		localStorage.setItem(key, value);
+	} catch {}
+};
+/** A JSON value in localStorage under one key, with a fallback when it's missing or unreadable. */
+const localJson = (key, fallback, valid) => ({
+	load: () => {
+		try {
+			const parsed = JSON.parse(localStorage.getItem(key) ?? "null");
+			return valid(parsed) ? parsed : fallback;
+		} catch {
+			return fallback;
+		}
+	},
+	save: (value) => {
+		try {
+			localStorage.setItem(key, JSON.stringify(value));
+		} catch {}
+	}
+});
+const isObject = (value) => value !== null && typeof value === "object";
+const mountCameraPanel = (options) => {
+	const key = options.storageKey === null ? null : options.storageKey ?? "three-cameras";
+	const store = options.store ?? (key ? localJson(`${key}:views`, {}, isObject) : void 0);
+	const trackStore = options.trackStore ?? (key ? localJson(`${key}:tracks`, { tracks: {} }, (value) => isObject(value) && isObject(value.tracks)) : void 0);
+	const lab = new CameraLab({
+		...options,
+		...store ? { store } : {},
+		...trackStore ? { trackStore } : {}
+	});
+	const theme = new HudTheme(options.theme ?? "system");
+	const withTimeline = options.timeline !== false;
+	const panel = createCameraPanel(lab, { paths: withTimeline });
+	const timeline = withTimeline ? createTimelinePanel(lab, { sidebar: panel }) : null;
+	const content = document.createElement("div");
+	const mini = document.createElement("button");
+	content.className = "tcm-shell";
+	mini.type = "button";
+	mini.className = "tcm tcm-mini";
+	content.append(mini, timeline?.element ?? panel.element);
+	const compactKey = key ? `${key}:compact` : null;
+	let count = Number(panel.element.dataset.count ?? 0);
+	let clock = timeline ? `${lab.timeline().time.toFixed(2)} / ${lab.timeline().duration.toFixed(2)} s` : "";
+	const paintDetail = () => {
+		const cameras = `${count} camera${count === 1 ? "" : "s"}`;
+		frame.detail.textContent = clock ? `${cameras} · ${clock}` : cameras;
+	};
+	const escape = (text) => text.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+	/** The collapsed widget: the picked camera, else the one looked through, else a live one. */
+	const paintMini = () => {
+		if (!frame.element.classList.contains("tcm-compact")) return;
+		const entries = lab.entries();
+		const shown = entries.find((entry) => entry.selected) ?? entries.find((entry) => entry.viewing) ?? entries.find((entry) => entry.live) ?? entries[0];
+		const state = lab.timeline();
+		mini.classList.toggle("is-live", Boolean(shown?.live));
+		mini.classList.toggle("is-viewing", Boolean(shown?.viewing));
+		mini.title = shown ? `${shown.id}: expand the panel` : "Expand the panel";
+		mini.setAttribute("aria-label", mini.title);
+		mini.innerHTML = shown ? `<span class="tcm-mini-kind">${svg$1(KIND_ICONS[shown.kind])}</span><span class="tcm-mini-name">${escape(shown.id)}</span><span class="tcm-badge${shown.viewing ? " is-viewing" : shown.live ? " is-live" : ""}">${shown.viewing ? "viewing" : shown.live ? `${shown.fps} fps` : ""}</span>${timeline && state.playing ? `<span class="tcm-mini-clock">${state.time.toFixed(1)} s</span>` : ""}` : `<span class="tcm-mini-name">no cameras yet</span>`;
+	};
+	let miniTimer = null;
+	const setCompact = (compact) => {
+		frame.element.classList.toggle("tcm-compact", compact);
+		panel.setActive(!compact);
+		if (compact && !miniTimer) miniTimer = setInterval(paintMini, 500);
+		else if (!compact && miniTimer) {
+			clearInterval(miniTimer);
+			miniTimer = null;
+		}
+		paintMini();
+		if (compactKey) writeFlag(compactKey, compact ? "1" : "0");
+		frame.refresh();
+	};
+	const frame = mountDevPanel({
+		brand: "three-cameras",
+		content,
+		defaultPlacement: timeline ? {
+			edge: "bottom",
+			align: "start"
+		} : options.defaultPlacement ?? {
+			edge: "right",
+			align: "start"
+		},
+		label: "Cameras",
+		onToggle: () => setCompact(!frame.element.classList.contains("tcm-compact")),
+		storageKey: key ? `${key}:${timeline ? "dock" : "panel"}` : null,
+		theme,
+		toggleLabel: "Collapse or expand the panel",
+		...options.container ? { parent: options.container } : {}
+	});
+	frame.element.classList.add("tcm-frame");
+	if (timeline) frame.element.classList.add("tcm-combined-frame");
+	mini.addEventListener("click", () => setCompact(false));
+	const canvas = options.renderer?.domElement;
+	const paths = timeline && typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement ? createPathEditor(lab, canvas) : null;
+	const unsubscribeMini = lab.subscribe(paintMini);
+	const onCount = (event) => {
+		count = Number(event.detail);
+		paintDetail();
+	};
+	const onClock = (event) => {
+		clock = String(event.detail);
+		paintDetail();
+	};
+	panel.element.addEventListener("tcm-count", onCount);
+	timeline?.element.addEventListener("tcm-clock", onClock);
+	paintDetail();
+	const stored = compactKey ? readFlag(compactKey) : null;
+	setCompact(stored === null ? options.compact === true : stored === "1");
+	const paintTheme = () => {
+		panel.setTheme(theme.resolved);
+		timeline?.setTheme(theme.resolved);
+	};
+	const unsubscribeTheme = theme.subscribe(paintTheme);
+	paintTheme();
+	return {
+		lab,
+		element: frame.element,
+		setCompact,
+		setTheme: (mode) => theme.setMode(mode),
+		dispose: () => {
+			if (miniTimer) clearInterval(miniTimer);
+			unsubscribeMini();
+			paths?.dispose();
+			unsubscribeTheme();
+			theme.dispose();
+			panel.element.removeEventListener("tcm-count", onCount);
+			timeline?.element.removeEventListener("tcm-clock", onClock);
+			panel.dispose();
+			timeline?.dispose();
+			frame.dispose();
+			lab.dispose();
+		}
+	};
+};
+//#endregion
+export { CAMERA_PANEL_STYLES as a, createCameraPanel as i, createTimelinePanel as n, injectStyles as o, createPathEditor as r, mountCameraPanel as t };
+
+//# sourceMappingURL=mount-BAkbs7K2.js.map