@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/files/icons.tsx

@@ -1,118 +0,0 @@
-// The rail's icon set: hand-drawn 24-viewBox strokes at 1.5, tinted by the CSS
-// `color` of whatever wraps them. Still no icon dependency — but a family of
-// consistent strokes, where the old unicode glyphs never read as one voice.
-//
-// Sized by CSS (`.layer-kind svg`, `.layer-flag svg`), never by attributes, so
-// one rule owns the scale everywhere the set appears.
-import type { ReactElement, ReactNode } from "react";
-
-function icon(children: ReactNode): ReactElement {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      {children}
-    </svg>
-  );
-}
-
-/** One icon per layer kind — the same grammar Figma settled: a lone diamond is
- *  an instance, four diamonds are a definition. */
-const KIND_ICONS: Record<string, ReactElement> = {
-  text: icon(<path d="M6 6h12M12 6v13" />),
-  image: icon(
-    <>
-      <rect x="3.5" y="5" width="17" height="14" rx="2" />
-      <circle cx="9" cy="9.5" r="1.5" />
-      <path d="m4.5 17 4-4 4 4 3-3 4 4" />
-    </>,
-  ),
-  video: icon(
-    <>
-      <rect x="3.5" y="5" width="17" height="14" rx="2" />
-      <path d="M10.5 9.5v5l4-2.5z" />
-    </>,
-  ),
-  rect: icon(<rect x="4.5" y="6.5" width="15" height="11" rx="1.5" />),
-  ellipse: icon(<circle cx="12" cy="12" r="7.5" />),
-  line: icon(<path d="M5.5 18.5 18.5 5.5" />),
-  arrow: icon(<path d="M6 18 18 6M9 6h9v9" />),
-  path: icon(<path d="M4.5 19.5c7 0 8-15 15-15" />),
-  // Angle brackets: the one glyph nobody has to be told means markup.
-  html: icon(<path d="m9 8-4 4 4 4M15 8l4 4-4 4" />),
-  group: icon(
-    <>
-      <rect x="4" y="4" width="12" height="12" rx="2" />
-      <path d="M20 9v9a2 2 0 0 1-2 2H9" />
-    </>,
-  ),
-  device: icon(
-    <>
-      <rect x="7" y="3.5" width="10" height="17" rx="2" />
-      <path d="M10.5 17.5h3" />
-    </>,
-  ),
-  mesh: icon(<path d="M12 3.5 19.5 8v8L12 20.5 4.5 16V8z" />),
-  cloner: icon(
-    <>
-      <rect x="4.5" y="4.5" width="6" height="6" rx="1" />
-      <rect x="13.5" y="4.5" width="6" height="6" rx="1" />
-      <rect x="4.5" y="13.5" width="6" height="6" rx="1" />
-      <rect x="13.5" y="13.5" width="6" height="6" rx="1" />
-    </>,
-  ),
-  instance: icon(<path d="m12 4 8 8-8 8-8-8z" />),
-};
-
-const FALLBACK = icon(<path d="m12 6 6 6-6 6-6-6z" />);
-
-export function kindIcon(kind: string): ReactElement {
-  return KIND_ICONS[kind] ?? FALLBACK;
-}
-
-/** A shot row: a clapperboard. */
-export const SCENE_ICON = icon(
-  <>
-    <rect x="3.5" y="5" width="17" height="14" rx="2" />
-    <path d="M3.5 9.5h17M9 5.5l1.5 4M14 5.5l1.5 4" />
-  </>,
-);
-
-/** A component definition: the four-diamond glyph. */
-export const COMPONENT_ICON = icon(
-  <path d="M12 3.5 15 6.5 12 9.5 9 6.5zM17.5 9l3 3-3 3-3-3zM12 14.5l3 3-3 3-3-3zM6.5 9l3 3-3 3-3-3z" />,
-);
-
-export const EYE_ICON = icon(
-  <>
-    <path d="M3.5 12S6.5 6 12 6s8.5 6 8.5 6-3 6-8.5 6S3.5 12 3.5 12z" />
-    <circle cx="12" cy="12" r="2.5" />
-  </>,
-);
-
-export const EYE_OFF_ICON = icon(
-  <>
-    <path d="M3.5 12S6.5 6 12 6s8.5 6 8.5 6-3 6-8.5 6S3.5 12 3.5 12z" />
-    <path d="m5 4.5 14 15" />
-  </>,
-);
-
-export const LOCK_ICON = icon(
-  <>
-    <rect x="5.5" y="10.5" width="13" height="9" rx="2" />
-    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" />
-  </>,
-);
-
-export const UNLOCK_ICON = icon(
-  <>
-    <rect x="5.5" y="10.5" width="13" height="9" rx="2" />
-    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 6.8-1.2" />
-  </>,
-);

package/src/panels/header/DocSwitcher.tsx

@@ -1,85 +0,0 @@
-// Which scene is open, and how to open another one.
-//
-// A `<select>` and not a custom popover, deliberately: it is the one control in
-// this chrome that has to work before anything else does (there is no document
-// yet), and the native element brings keyboard navigation, type-ahead and a
-// scrolling list that never leaves the viewport for free.
-import { useState } from "react";
-import { useShotEditor, useStore } from "../../state/context.js";
-
-export function DocSwitcher() {
-  const store = useStore();
-  const shots = useShotEditor((s) => s.shots);
-  const name = useShotEditor((s) => s.name);
-  const [creating, setCreating] = useState(false);
-  const [draft, setDraft] = useState("");
-
-  const create = (): void => {
-    const trimmed = draft.trim();
-    setCreating(false);
-    setDraft("");
-    if (trimmed.length > 0) void store.createShot(trimmed);
-  };
-
-  if (creating) {
-    return (
-      <form
-        className="doc-switcher"
-        onSubmit={(e) => {
-          e.preventDefault();
-          create();
-        }}
-      >
-        <input
-          className="doc-switcher-input"
-          autoFocus
-          value={draft}
-          placeholder="scene name"
-          aria-label="New scene name"
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") {
-              e.stopPropagation();
-              setCreating(false);
-              setDraft("");
-            }
-          }}
-        />
-      </form>
-    );
-  }
-
-  return (
-    <div className="doc-switcher">
-      <select
-        className="doc-switcher-select"
-        aria-label="Open scene"
-        value={name ?? ""}
-        onChange={(e) => {
-          const next = e.target.value;
-          // Closing DROPS the in-memory document, so the debounced autosave has
-          // to land first — the same order `openShot` uses. `flush` rejects
-          // when it could not write, which leaves the scene open with the
-          // failure already on screen instead of discarding it.
-          if (next === "") void store.flush().then(() => store.closeShot(), () => {});
-          else void store.openShot(next);
-        }}
-      >
-        <option value="">{shots.length === 0 ? "no scenes yet" : "choose a scene…"}</option>
-        {shots.map((s) => (
-          <option key={s.name} value={s.name}>
-            {s.name}
-          </option>
-        ))}
-      </select>
-      <button
-        type="button"
-        className="doc-switcher-new"
-        title="New scene"
-        onClick={() => setCreating(true)}
-      >
-        +
-      </button>
-    </div>
-  );
-}

package/src/panels/header/TransportBar.tsx

@@ -1,86 +0,0 @@
-// Play, pause, and the playhead.
-//
-// ── THE ONE THING WORTH READING ──────────────────────────────────────────
-//
-// Playback is a rAF loop that converts WALL TIME into an INTEGER FRAME and
-// seeks to it. It never accumulates frames per tick.
-//
-// The difference matters: `frame++` per rAF makes playback speed a function of
-// the monitor's refresh rate (a 120Hz laptop plays a 30fps shot at double
-// speed) and makes a dropped frame permanently shift everything after it.
-// Deriving the frame from elapsed time instead means the preview plays at the
-// document's own rate on any display, drops frames under load rather than
-// slowing down, and — because the seek target is `round(elapsed * fps)` — puts
-// the same integer frame on screen that the export will render.
-import { useEffect, useRef } from "react";
-import { docDurationFrames } from "@dailies-studio/shot/doc";
-import { useShotEditor, useStore } from "../../state/context.js";
-
-/** The slider and the readout — the two things that show the frame — in their
- *  own component, so the per-frame tick during playback re-renders them alone
- *  and never the play button or the rAF loop's owner above. */
-function TransportScrub({ total, playing }: { total: number; playing: boolean }) {
-  const store = useStore();
-  const frame = useShotEditor((s) => s.frame);
-  return (
-    <>
-      <input
-        className="transport-scrub"
-        type="range"
-        min={0}
-        max={Math.max(0, total - 1)}
-        step={1}
-        value={frame}
-        aria-label="Playhead"
-        onChange={(e) => {
-          // Scrubbing pauses. A transport that kept playing under the pointer
-          // would fight the drag on every rAF.
-          if (playing) store.setPlaying(false);
-          store.seek(Number(e.target.value));
-        }}
-      />
-      <span className="transport-readout" data-testid="frame-readout">
-        {frame} / {Math.max(0, total - 1)}
-      </span>
-    </>
-  );
-}
-
-export function TransportBar() {
-  const store = useStore();
-  const playing = useShotEditor((s) => s.playing);
-  const doc = useShotEditor((s) => s.doc);
-  const total = doc === null ? 0 : docDurationFrames(doc);
-  const fps = doc === null ? 30 : doc.fps.num / doc.fps.den;
-
-  const startedAt = useRef(0);
-  const startedFrame = useRef(0);
-  useEffect(() => {
-    if (!playing || doc === null || total <= 0) return;
-    startedAt.current = performance.now();
-    startedFrame.current = store.getState().frame;
-    let raf = 0;
-    const tick = (): void => {
-      const elapsed = (performance.now() - startedAt.current) / 1000;
-      const target = startedFrame.current + Math.round(elapsed * fps);
-      store.seek(((target % total) + total) % total);
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [playing, doc, total, fps, store]);
-
-  return (
-    <div className="transport">
-      <button
-        type="button"
-        className="transport-play"
-        title={playing ? "Pause (Space)" : "Play (Space)"}
-        onClick={() => store.setPlaying(!playing)}
-      >
-        {playing ? "❚❚" : "▶"}
-      </button>
-      <TransportScrub total={total} playing={playing} />
-    </div>
-  );
-}

package/src/panels/inspector/animate/BlockTiming.tsx

@@ -1,341 +0,0 @@
-// The focused block's params, timing and easing.
-//
-// ── WHY THIS IS NOT `KeyframeEditor` ───────────────────────────────────
-//
-// `@dailies-studio/timeline`'s ease editor is a fine component and its INPUTS
-// are keyframe-shaped: `refs: KeyframeAddr[]` and a `TimelineGesture` whose
-// capture emits `{kind:"setEase", refs}`. There are no keyframes in this lane,
-// so every one of those would be a fabricated address. What DOES transfer is
-// everything pure: `EASE_PRESETS`, `matchPreset`, `SPRING_DEFAULT`, and the pad
-// geometry `padToPx`/`pxToPad`. Those are imported, not re-derived, so the two
-// chromes cannot disagree about what "Ease Out" means.
-//
-// ── THE SPRING WART, AND THE TAIL THAT ADMITS IT ───────────────────────
-//
-// A spring has an INTRINSIC duration in seconds. So dragging a spring block's
-// right edge changes where its window CLIPS, not how fast it settles — which is
-// correct physics and matches springs everywhere else in the engine, but is
-// invisible unless the UI says so. It says so twice: the duration field is
-// disabled with the reason attached, and the preview draws the part of the
-// settle that falls OUTSIDE the block window as a dashed tail. If the tail is
-// long, the block is cutting the spring off mid-flight, and the author can see
-// exactly that.
-import { useRef } from "react";
-import {
-  blockProgressAt,
-  motionPresets,
-  presetsForSlot,
-  MIN_ANIMATE_FRAMES,
-} from "@dailies-studio/shot/doc";
-import type { AnimBlock } from "@dailies-studio/shot/doc";
-import { EASE_PRESETS, SPRING_DEFAULT, easeSelection, padToPx, pxToPad } from "@dailies-studio/timeline";
-import type { PadGeom } from "@dailies-studio/timeline";
-import { InspectorRow, InspectorSection, NumberField, polylinePoints } from "@dailies-studio/ui";
-import type { Ease, SpringEase, Value } from "@dailies-studio/engine";
-import type { PointerEvent as ReactPointerEvent } from "react";
-import { useShotEditor, useStore } from "../../../state/context.js";
-import { ParamRow } from "../ParamRow.js";
-import { useFocusedBlock } from "./useBlocks.js";
-
-const PAD_GEOM: PadGeom = { width: 216, height: 132, padY: 30 };
-const PREVIEW_W = 216;
-const PREVIEW_H = 72;
-const PREVIEW_PAD = 8;
-const PREVIEW_SAMPLES = 96;
-/** How far past the block's own window the settle tail is drawn, as a multiple
- *  of the window. Two windows is enough to show a spring that has not settled
- *  and short enough that a settled one draws a flat stub. */
-const TAIL_FACTOR = 2;
-
-export function BlockTiming() {
-  const store = useStore();
-  // A STATE SLICE OR NULL, never a fresh fallback object: a selector that
-  // mints `{num: 30, den: 1}` per call gives useSyncExternalStore a snapshot
-  // that is never Object.is-stable, which is an infinite re-render the moment
-  // this mounts with no document. Unreachable today only because the
-  // inspector early-returns on a null doc — this keeps it unreachable.
-  const fps = useShotEditor((s) => s.doc?.fps ?? null) ?? { num: 30, den: 1 };
-  const ref = useFocusedBlock();
-  if (ref === null) return null;
-  const { layer, block } = ref;
-  const preset = motionPresets[block.preset];
-  const duration = Math.max(1, Math.trunc(block.durationFrames));
-  const spring = block.ease?.type === "spring";
-
-  return (
-    <InspectorSection title="Timing" persistKey="shot:animate:timing">
-      <InspectorRow>
-        <NumberField
-          value={block.frame}
-          label="Start"
-          ariaLabel="Block start"
-          min={0}
-          step={1}
-          onCommit={(next) => store.setBlockTiming(layer.id, block.id, Math.max(0, next), duration)}
-        />
-        <NumberField
-          value={duration}
-          label="Frames"
-          ariaLabel="Block frames"
-          min={MIN_ANIMATE_FRAMES}
-          step={1}
-          // A spring's duration is set by its physics. The field still SHOWS the
-          // window (it is real: it is where the block stops contributing), it
-          // just refuses to pretend that changing it retimes the motion.
-          disabled={spring}
-          {...(spring ? { title: "A spring settles in its own time — edit stiffness and damping." } : {})}
-          onCommit={(next) =>
-            store.setBlockTiming(layer.id, block.id, block.frame, Math.max(MIN_ANIMATE_FRAMES, next))
-          }
-        />
-      </InspectorRow>
-
-      {preset !== undefined &&
-        preset.params.map((spec) => (
-          <ParamRow
-            key={spec.name}
-            spec={spec}
-            value={paramValue(block, spec.name, spec.default)}
-            onCommit={(next) => store.setBlockParams(layer.id, block.id, { [spec.name]: next })}
-          />
-        ))}
-
-      <EaseControl
-        {...(block.ease === undefined ? {} : { ease: block.ease })}
-        onEase={(ease) => store.setBlockEase(layer.id, block.id, ease)}
-        onScrub={(ease) => store.setBlockEase(layer.id, block.id, ease)}
-      />
-      <SettlePreview block={block} fps={fps} />
-
-      {/* The preset itself is swappable in place, so "make that a slide instead"
-          keeps the block's timing and easing rather than deleting and redoing. */}
-      <InspectorRow label="Preset">
-        <select
-          className="select"
-          aria-label="Block preset"
-          value={block.preset}
-          onChange={(e) => store.setBlockPreset(layer.id, block.id, e.target.value)}
-        >
-          {presetsForSlot(block.slot).map((p) => (
-            <option key={p.id} value={p.id}>
-              {p.label}
-            </option>
-          ))}
-        </select>
-      </InspectorRow>
-    </InspectorSection>
-  );
-}
-
-function paramValue(block: AnimBlock, name: string, fallback: Value): Value {
-  const v = block.params[name];
-  return v === undefined ? fallback : v;
-}
-
-// ---- easing ------------------------------------------------------------------
-
-/**
- * The ease row, plus whichever editor the chosen ease needs.
- *
- * Takes an `Ease` and not a block, because the CAMERA's shots carry one too and
- * `clipProgress01` reads it from both the same way. Two ease editors would be
- * two places for "Ease Out" to mean something slightly different, which is the
- * whole reason `EASE_PRESETS` is imported rather than re-declared.
- */
-export function EaseControl(props: {
-  ease?: Ease;
-  /** What the select is called. The subject differs between the two callers and
-   *  the accessible name has to say which one the author is looking at. */
-  ariaLabel?: string;
-  onEase(ease: Ease): void;
-  onScrub(ease: Ease): void;
-}) {
-  const ease = props.ease;
-  // `easeSelection` takes a LIST because the shared editor is multi-select. One
-  // block is a list of one, and reusing it keeps "Custom" meaning exactly what
-  // it means in the other two chromes.
-  const sel = easeSelection(ease === undefined ? [] : [ease]);
-
-  return (
-    <>
-      <InspectorRow label="Ease">
-        <select
-          className="select"
-          aria-label={props.ariaLabel ?? "Block ease"}
-          value={sel.selectValue}
-          onChange={(e) => {
-            const preset = EASE_PRESETS.find((p) => p.id === e.target.value);
-            if (preset !== undefined) props.onEase(preset.ease);
-          }}
-        >
-          {EASE_PRESETS.map((p) => (
-            <option key={p.id} value={p.id}>
-              {p.label}
-            </option>
-          ))}
-          {sel.selectValue === "custom" && (
-            <option value="custom" disabled>
-              Custom
-            </option>
-          )}
-          {sel.selectValue === "mixed" && (
-            <option value="mixed" disabled>
-              —
-            </option>
-          )}
-        </select>
-      </InspectorRow>
-      {sel.ease?.type === "bezier" && <BezierPad handles={sel.ease.handles} onEase={props.onScrub} />}
-      {sel.ease?.type === "spring" && <SpringFields spring={sel.ease} onEase={props.onEase} />}
-    </>
-  );
-}
-
-function BezierPad(props: {
-  handles: readonly [number, number, number, number];
-  onEase(ease: Ease): void;
-}) {
-  const svgRef = useRef<SVGSVGElement | null>(null);
-  const drag = useRef<{ index: 0 | 1; base: [number, number, number, number] } | null>(null);
-
-  const down =
-    (index: 0 | 1) =>
-    (e: ReactPointerEvent<SVGCircleElement>): void => {
-      if (e.button !== 0) return;
-      e.currentTarget.setPointerCapture(e.pointerId);
-      const h = props.handles;
-      drag.current = { index, base: [h[0], h[1], h[2], h[3]] };
-    };
-
-  const move = (e: ReactPointerEvent<SVGCircleElement>): void => {
-    const d = drag.current;
-    const svg = svgRef.current;
-    if (d === null || svg === null) return;
-    const rect = svg.getBoundingClientRect();
-    const [x, y] = pxToPad(PAD_GEOM, e.clientX - rect.left, e.clientY - rect.top);
-    // Rebuilt from the DRAG-START handles, so the untouched one cannot creep as
-    // the live value it is being compared against changes underneath.
-    const handles: [number, number, number, number] =
-      d.index === 0 ? [x, y, d.base[2], d.base[3]] : [d.base[0], d.base[1], x, y];
-    props.onEase({ type: "bezier", handles });
-  };
-
-  const up = (e: ReactPointerEvent<SVGCircleElement>): void => {
-    if (drag.current === null) return;
-    drag.current = null;
-    e.currentTarget.releasePointerCapture(e.pointerId);
-  };
-
-  const h = props.handles;
-  const [ax, ay] = padToPx(PAD_GEOM, 0, 0);
-  const [bx, by] = padToPx(PAD_GEOM, 1, 1);
-  const [x1, y1] = padToPx(PAD_GEOM, h[0], h[1]);
-  const [x2, y2] = padToPx(PAD_GEOM, h[2], h[3]);
-  const handle = (index: 0 | 1) => ({
-    className: "insp-pad-handle",
-    r: 4.5,
-    onPointerDown: down(index),
-    onPointerMove: move,
-    onPointerUp: up,
-    onPointerCancel: () => {
-      drag.current = null;
-    },
-  });
-
-  return (
-    <svg ref={svgRef} className="insp-pad" width={PAD_GEOM.width} height={PAD_GEOM.height}>
-      <rect
-        className="insp-pad-box"
-        x={0.5}
-        y={PAD_GEOM.padY + 0.5}
-        width={PAD_GEOM.width - 1}
-        height={PAD_GEOM.height - 2 * PAD_GEOM.padY - 1}
-        rx={3}
-      />
-      <path className="insp-pad-curve" d={`M ${ax} ${ay} C ${x1} ${y1} ${x2} ${y2} ${bx} ${by}`} />
-      <line className="insp-pad-arm" x1={ax} y1={ay} x2={x1} y2={y1} />
-      <line className="insp-pad-arm" x1={bx} y1={by} x2={x2} y2={y2} />
-      <circle {...handle(0)} cx={x1} cy={y1} />
-      <circle {...handle(1)} cx={x2} cy={y2} />
-    </svg>
-  );
-}
-
-const SPRING_FIELDS = [
-  { key: "stiffness", label: "Stiffness", min: 1, max: 1000, step: 1 },
-  { key: "damping", label: "Damping", min: 0, max: 200, step: 0.5 },
-  { key: "mass", label: "Mass", min: 0.05, max: 20, step: 0.05 },
-] as const;
-
-function SpringFields(props: { spring: SpringEase; onEase(ease: Ease): void }) {
-  return (
-    <InspectorRow>
-      {SPRING_FIELDS.map((f) => (
-        <NumberField
-          key={f.key}
-          value={props.spring[f.key]}
-          label={f.label}
-          ariaLabel={`Spring ${f.label.toLowerCase()}`}
-          min={f.min}
-          max={f.max}
-          step={f.step}
-          onCommit={(v) => props.onEase({ ...SPRING_DEFAULT, ...props.spring, [f.key]: v })}
-        />
-      ))}
-    </InspectorRow>
-  );
-}
-
-// ---- the preview, and the tail --------------------------------------------------
-
-function SettlePreview(props: { block: AnimBlock; fps: { num: number; den: number } }) {
-  const { block, fps } = props;
-  const duration = Math.max(1, Math.trunc(block.durationFrames));
-  const spring = block.ease?.type === "spring";
-  // Sampled through `blockProgressAt` — the SAME function the renderer folds
-  // with. A preview drawn from a local re-implementation of the ease would
-  // eventually disagree with the pixels, which is the one thing a preview must
-  // never do.
-  const to = block.frame + (spring ? duration * (1 + TAIL_FACTOR) : duration);
-  const samples: Array<{ frame: number; value: number }> = [];
-  for (let i = 0; i < PREVIEW_SAMPLES; i += 1) {
-    const frame = block.frame + ((to - block.frame) * i) / (PREVIEW_SAMPLES - 1);
-    samples.push({ frame, value: blockProgressAt(block, frame, fps) ?? 0 });
-  }
-  const line = polylinePoints(samples, PREVIEW_W, PREVIEW_H, PREVIEW_PAD);
-  if (line === null) return null;
-  // The window's right edge in preview px, so the tail is drawn from exactly
-  // where the block stops contributing.
-  const edgeX = spring ? (duration / (to - block.frame)) * PREVIEW_W : PREVIEW_W;
-
-  return (
-    <div className="insp-preview animate-preview" data-testid="block-preview">
-      <svg width={PREVIEW_W} height={PREVIEW_H}>
-        {/* One polyline, clipped twice: solid inside the window, dashed after.
-            Two <polyline>s over the same points with opposite clips beats
-            splitting the sample array, because the split point then cannot land
-            between two samples and jitter as the duration changes. */}
-        <defs>
-          <clipPath id="blk-in">
-            <rect x={0} y={0} width={edgeX} height={PREVIEW_H} />
-          </clipPath>
-          <clipPath id="blk-out">
-            <rect x={edgeX} y={0} width={PREVIEW_W - edgeX} height={PREVIEW_H} />
-          </clipPath>
-        </defs>
-        <polyline className={spring ? "is-spring" : ""} points={line.points} clipPath="url(#blk-in)" />
-        {spring && (
-          <>
-            <polyline className="is-tail" points={line.points} clipPath="url(#blk-out)" />
-            <line className="animate-preview-edge" x1={edgeX} y1={0} x2={edgeX} y2={PREVIEW_H} />
-          </>
-        )}
-      </svg>
-      {spring && (
-        <span className="insp-dim animate-preview-note">
-          dashed = after the block ends; the spring holds at its clipped value
-        </span>
-      )}
-    </div>
-  );
-}