reframe-video 0.1.3 → 0.3.0

package/preview/src/panel.ts

@@ -6,21 +6,34 @@
 
 import {
   EASE_NAMES,
+  MOTION_OPS,
   PROPS_BY_TYPE,
   isColor,
+  composeScene,
+  compileScene,
+  evaluate,
+  type CompiledScene,
+  type MotionOpName,
   type NodeIR,
   type OverlayDoc,
   type PropValue,
+  type SceneIR,
   type TimelineIR,
 } from "@reframe/core";
 import type { EditorStore } from "./store.js";
 
-const NUMERIC_DEFAULTS: Record<string, number> = { opacity: 1, scale: 1, rotation: 0 };
+const NUMERIC_DEFAULTS: Record<string, number> = { opacity: 1, scale: 1, scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 };
 const RANGES: Record<string, [number, number, number]> = {
   opacity: [0, 1, 0.01],
   progress: [0, 1, 0.01],
   scale: [0, 3, 0.01],
+  scaleX: [0, 3, 0.01],
+  scaleY: [0, 3, 0.01],
   rotation: [-360, 360, 1],
+  skewX: [-60, 60, 1],
+  skewY: [-60, 60, 1],
+  curviness: [0, 2, 0.05],
+  amount: [0, 3, 0.1],
 };
 const ANCHORS = [
   "top-left", "top-center", "top-right",
@@ -53,6 +66,107 @@ function findNode(nodes: NodeIR[], id: string): NodeIR | null {
   return null;
 }
 
+type Bz = [number, number, number, number];
+const round3 = (n: number) => Math.round(n * 1000) / 1000;
+const cubic = (t: number, a: number, b: number, c: number, d: number) => {
+  const u = 1 - t;
+  return u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * d;
+};
+
+/** A draggable cubic-bezier ease editor (GSAP CustomEase pattern). Dragging a
+ *  control point writes {cubicBezier:[x1,y1,x2,y2]} via store.setTimelineEase. */
+function buildEaseEditor(label: string, current: unknown, store: EditorStore): HTMLCanvasElement {
+  const S = 150;
+  const PAD = 22;
+  const Y0 = -0.45;
+  const Y1 = 1.45;
+  const SPAN = Y1 - Y0;
+  const bz: Bz =
+    current && typeof current === "object" && "cubicBezier" in current
+      ? ([...(current as { cubicBezier: number[] }).cubicBezier] as Bz)
+      : [0.33, 0, 0.67, 1];
+  const c = el("canvas", { style: "background:#0e0f15;border-radius:8px;cursor:grab;touch-action:none;display:block" });
+  c.width = S;
+  c.height = S;
+  const cx = c.getContext("2d")!;
+  const toPx = (ex: number, ey: number): [number, number] => [
+    PAD + ex * (S - 2 * PAD),
+    S - PAD - ((ey - Y0) / SPAN) * (S - 2 * PAD),
+  ];
+  const toEase = (px: number, py: number): [number, number] => [
+    (px - PAD) / (S - 2 * PAD),
+    Y0 + ((S - PAD - py) / (S - 2 * PAD)) * SPAN,
+  ];
+  function render() {
+    cx.clearRect(0, 0, S, S);
+    const [gx0, gy0] = toPx(0, 0);
+    const [gx1, gy1] = toPx(1, 1);
+    cx.strokeStyle = "#23252f";
+    cx.lineWidth = 1;
+    cx.strokeRect(Math.min(gx0, gx1), Math.min(gy0, gy1), Math.abs(gx1 - gx0), Math.abs(gy1 - gy0));
+    const P1 = toPx(bz[0], bz[1]);
+    const P2 = toPx(bz[2], bz[3]);
+    cx.strokeStyle = "#3a3f55";
+    cx.beginPath();
+    cx.moveTo(gx0, gy0);
+    cx.lineTo(P1[0], P1[1]);
+    cx.moveTo(gx1, gy1);
+    cx.lineTo(P2[0], P2[1]);
+    cx.stroke();
+    cx.strokeStyle = "#7d9aff";
+    cx.lineWidth = 2;
+    cx.beginPath();
+    for (let i = 0; i <= 48; i++) {
+      const t = i / 48;
+      const [px, py] = toPx(cubic(t, 0, bz[0], bz[2], 1), cubic(t, 0, bz[1], bz[3], 1));
+      if (i) cx.lineTo(px, py);
+      else cx.moveTo(px, py);
+    }
+    cx.stroke();
+    for (const [hx, hy] of [P1, P2]) {
+      cx.beginPath();
+      cx.arc(hx, hy, 5, 0, Math.PI * 2);
+      cx.fillStyle = "#fff";
+      cx.fill();
+      cx.strokeStyle = "#7d9aff";
+      cx.lineWidth = 2;
+      cx.stroke();
+    }
+  }
+  let dragIdx = -1;
+  const localPos = (ev: PointerEvent): [number, number] => {
+    const r = c.getBoundingClientRect();
+    return [((ev.clientX - r.left) * S) / r.width, ((ev.clientY - r.top) * S) / r.height];
+  };
+  c.addEventListener("pointerdown", (ev) => {
+    const [mx, my] = localPos(ev);
+    const P1 = toPx(bz[0], bz[1]);
+    const P2 = toPx(bz[2], bz[3]);
+    dragIdx = Math.hypot(P1[0] - mx, P1[1] - my) <= 11 ? 0 : Math.hypot(P2[0] - mx, P2[1] - my) <= 11 ? 1 : -1;
+    if (dragIdx >= 0) c.setPointerCapture(ev.pointerId);
+  });
+  c.addEventListener("pointermove", (ev) => {
+    if (dragIdx < 0) return;
+    let [ex, ey] = toEase(...localPos(ev));
+    ex = Math.max(0, Math.min(1, ex));
+    ey = Math.max(Y0, Math.min(Y1, ey));
+    if (dragIdx === 0) {
+      bz[0] = ex;
+      bz[1] = ey;
+    } else {
+      bz[2] = ex;
+      bz[3] = ey;
+    }
+    render();
+    store.setTimelineEase(label, [round3(bz[0]), round3(bz[1]), round3(bz[2]), round3(bz[3])]);
+  });
+  c.addEventListener("pointerup", () => {
+    dragIdx = -1;
+  });
+  render();
+  return c;
+}
+
 /** Value editor for one PropValue; numbers get ranges where it makes sense. */
 function makeControl(
   prop: string,
@@ -100,6 +214,286 @@ function makeControl(
   return row;
 }
 
+// --- variation grid: seeded perturbations of the editable motion ---
+function mulberry32(seed: number): () => number {
+  let a = (seed >>> 0) || 1;
+  return () => {
+    a = (a + 0x6d2b79f5) | 0;
+    let x = Math.imul(a ^ (a >>> 15), 1 | a);
+    x = (x + Math.imul(x ^ (x >>> 7), 61 | x)) ^ x;
+    return ((x ^ (x >>> 14)) >>> 0) / 4294967296;
+  };
+}
+const clampN = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, n));
+
+function firstMotionPathTarget(tl: TimelineIR | undefined): string | null {
+  let found: string | null = null;
+  const walk = (s: TimelineIR) => {
+    if (found) return;
+    if (s.kind === "motionPath") found = s.target;
+    if ("children" in s) s.children.forEach(walk);
+  };
+  if (tl) walk(tl);
+  return found;
+}
+
+/** A seeded variation of the current motion (curviness + interior waypoints +
+ *  ease curves jittered) as an overlay, built on top of the current draft. */
+function makeVariant(draft: OverlayDoc, compiled: CompiledScene, seed: number): OverlayDoc {
+  const rng = mulberry32(Math.imul(seed, 2654435761));
+  const v: OverlayDoc = structuredClone(draft);
+  const tl = (v.timeline ??= {});
+  const walk = (s: TimelineIR) => {
+    if (s.kind === "motionPath" && s.label) {
+      const cur = tl[s.label] ?? {};
+      const baseCurv = (cur.curviness ?? s.curviness ?? 1) as number;
+      const basePts = (cur.points ?? s.points) as [number, number][];
+      tl[s.label] = {
+        ...cur,
+        curviness: clampN(baseCurv + (rng() - 0.5) * 1.3, 0, 2),
+        points: basePts.map((p, i, arr) =>
+          i === 0 || i === arr.length - 1
+            ? p
+            : [Math.round(p[0] + (rng() - 0.5) * 130), Math.round(p[1] + (rng() - 0.5) * 130)],
+        ),
+      };
+    } else if ((s.kind === "to" || s.kind === "tween") && s.label) {
+      const cur = tl[s.label] ?? {};
+      const curEase = cur.ease ?? ("ease" in s ? s.ease : undefined);
+      const bz = (
+        curEase && typeof curEase === "object" && "cubicBezier" in curEase
+          ? [...curEase.cubicBezier]
+          : [0.33, 0, 0.67, 1]
+      ) as number[];
+      tl[s.label] = {
+        ...cur,
+        ease: {
+          cubicBezier: [
+            clampN(bz[0]! + (rng() - 0.5) * 0.4, 0, 1),
+            clampN(bz[1]! + (rng() - 0.5) * 1.2, -0.4, 1.5),
+            clampN(bz[2]! + (rng() - 0.5) * 0.4, 0, 1),
+            clampN(bz[3]! + (rng() - 0.5) * 1.2, -0.4, 1.5),
+          ],
+        },
+      };
+    }
+    if ("children" in s) s.children.forEach(walk);
+  };
+  if (compiled.ir.timeline) walk(compiled.ir.timeline);
+  return v;
+}
+
+/** Draw the target node's trail (position over time) into a thumbnail canvas. */
+function renderThumb(c: HTMLCanvasElement, base: SceneIR, variant: OverlayDoc, target: string) {
+  const cx = c.getContext("2d")!;
+  cx.fillStyle = "#0e0f15";
+  cx.fillRect(0, 0, c.width, c.height);
+  let compiled: CompiledScene;
+  try {
+    compiled = compileScene(composeScene(base, variant).ir);
+  } catch {
+    return;
+  }
+  const D = compiled.duration;
+  const W = compiled.ir.size.width;
+  const H = compiled.ir.size.height;
+  const sc = Math.min(c.width / W, c.height / H) * 0.9;
+  const ox = (c.width - W * sc) / 2;
+  const oy = (c.height - H * sc) / 2;
+  const pts: [number, number][] = [];
+  for (let i = 0; i <= 28; i++) {
+    const op = evaluate(compiled, (i / 28) * D).find((o) => o.id === target);
+    if (op) pts.push([ox + op.transform[4] * sc, oy + op.transform[5] * sc]);
+  }
+  if (pts.length < 2) return;
+  cx.strokeStyle = "#7d9aff";
+  cx.lineWidth = 1.5;
+  cx.beginPath();
+  pts.forEach((p, i) => (i ? cx.lineTo(p[0], p[1]) : cx.moveTo(p[0], p[1])));
+  cx.stroke();
+  for (const p of pts) {
+    cx.beginPath();
+    cx.arc(p[0], p[1], 1.4, 0, Math.PI * 2);
+    cx.fillStyle = "#9db4ff";
+    cx.fill();
+  }
+}
+
+/** "vary ×4" → seeded motion variations as adoptable trail thumbnails
+ *  (recognition over recall). Click one to adopt; click vary again to branch. */
+function renderVariations(root: HTMLElement, store: EditorStore) {
+  const target = firstMotionPathTarget(store.compiled.ir.timeline);
+  if (!target) return; // a trail needs a motionPath to preview
+  root.append(el("h3", {}, "Variations"));
+  const grid = el("div", { style: "display:flex;gap:6px;flex-wrap:wrap;margin:4px 0" });
+  let round = 0;
+  const btn = el("button", { title: "generate motion variations" }, "vary ×4");
+  btn.addEventListener("click", () => {
+    grid.replaceChildren();
+    for (let k = 1; k <= 4; k++) {
+      const variant = makeVariant(store.draft, store.compiled, k + round * 4 + 1);
+      const c = el("canvas", { title: "click to adopt this motion", style: "border-radius:6px;cursor:pointer;border:1px solid #333" });
+      c.width = 150;
+      c.height = 92;
+      renderThumb(c, store.base, variant, target);
+      c.addEventListener("click", () => store.importDraft(variant));
+      grid.append(c);
+    }
+    round++;
+  });
+  root.append(btn, grid);
+}
+
+/** "Add motion ▸ <op>" on the selected node + a list of added ops (amount + remove).
+ *  Single-select only — bulk add-motion for a multi-selection lives in the Multi panel. */
+function renderMotionOps(root: HTMLElement, store: EditorStore) {
+  const selId = store.selectedIds.length === 1 ? store.selectedIds[0]! : null;
+  if (selId) {
+    root.append(el("h3", {}, "Add motion"));
+    const sel = el("select");
+    for (const op of MOTION_OPS) sel.append(el("option", { value: op }, op));
+    const add = el("button", { title: "add this motion to the selected node" }, "+ add");
+    add.addEventListener("click", () => store.addMotionOp(sel.value as MotionOpName, selId));
+    root.append(el("div", { class: "prop-row" }, el("label", {}, `▸ ${selId}`), sel, add));
+    // a motionless top-level node can get its FIRST move (a path to a destination)
+    if (!store.hasMotionPath(selId) && store.isTopLevel(selId)) {
+      if (store.pendingMove === selId) {
+        const cancel = el("button", { title: "cancel" }, "cancel");
+        cancel.addEventListener("click", () => store.disarmMove());
+        const armed = el("div", { class: "prop-row" }, el("label", {}, "▸ click a destination on the canvas…"), cancel);
+        armed.querySelector("label")!.setAttribute("style", "color:#7d9aff");
+        root.append(armed);
+      } else {
+        const mv = el("button", { title: "give this node a move: then click where it should go" }, "+ move");
+        mv.addEventListener("click", () => store.armMove(selId));
+        root.append(el("div", { class: "prop-row" }, el("label", {}, "▸ no motion yet"), mv));
+        root.append(el("div", { class: "hint" }, "or double-click the canvas to set a destination"));
+      }
+    }
+  }
+  if (store.addedOps.size > 0) {
+    root.append(el("h3", {}, "Added motion"));
+    for (const [label, op] of store.addedOps) {
+      const head = el("div", {}, `${op.name} `, el("span", { class: "kind" }, `→ ${op.target}`));
+      const rm = el("button", { class: "revert", title: "remove" }, "✕");
+      rm.addEventListener("click", () => store.removeMotionOp(label));
+      head.append(rm);
+      const card = el("div", { class: "step-card" }, head);
+      const amtRow = makeControl(
+        "amount",
+        op.opts.amount ?? 1,
+        false,
+        (v) => store.setOpAmount(label, Number(v)),
+        () => undefined,
+      );
+      amtRow.prepend(el("label", {}, "amount"));
+      card.append(amtRow);
+      root.append(card);
+    }
+  }
+}
+
+/** Pull <path> data out of pasted SVG markup → path nodes (fill/stroke + a
+ *  scale that fits the art to ~40% of the frame, pivoting on the viewBox centre). */
+function svgToPathNodes(markup: string, store: EditorStore): number {
+  const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
+  if (doc.querySelector("parsererror")) return 0;
+  const svg = doc.querySelector("svg");
+  const paths = Array.from(doc.querySelectorAll("path")).filter((p) => p.getAttribute("d"));
+  if (paths.length === 0) return 0;
+  // viewBox (or width/height) gives the art box → centre pivot + a fit scale
+  const vb = (svg?.getAttribute("viewBox") ?? "").split(/[ ,]+/).map(Number);
+  const vw = vb.length === 4 ? vb[2]! : Number(svg?.getAttribute("width")) || 100;
+  const vh = vb.length === 4 ? vb[3]! : Number(svg?.getAttribute("height")) || 100;
+  const ox = (vb.length === 4 ? vb[0]! : 0) + vw / 2;
+  const oy = (vb.length === 4 ? vb[1]! : 0) + vh / 2;
+  const fit = Math.min((store.base.size.width * 0.4) / vw, (store.base.size.height * 0.4) / vh);
+  for (const p of paths) {
+    store.addNode("path", {
+      d: p.getAttribute("d")!,
+      ...(p.getAttribute("fill") && p.getAttribute("fill") !== "none" ? { fill: p.getAttribute("fill") } : {}),
+      ...(p.getAttribute("stroke") ? { stroke: p.getAttribute("stroke") } : {}),
+      originX: ox,
+      originY: oy,
+      scale: Math.round(fit * 1000) / 1000,
+    });
+  }
+  return paths.length;
+}
+
+/** "Add node" — every IR type. image/svg need input (a src / pasted markup). */
+function renderAddNode(root: HTMLElement, store: EditorStore) {
+  root.append(el("h3", {}, "Add node"));
+  const row = el("div", { class: "prop-row" }, el("label", {}, "▸ new"));
+  for (const type of ["text", "rect", "ellipse", "line"] as const) {
+    const b = el("button", { title: `add a ${type} at scene centre` }, type);
+    b.addEventListener("click", () => store.addNode(type));
+    row.append(b);
+  }
+  const img = el("button", { title: "add an image (URL, or a path relative to the scene file)" }, "image");
+  img.addEventListener("click", () => {
+    const src = prompt("Image URL or path (relative to the scene file):", "");
+    if (src) store.addNode("image", { src });
+  });
+  const svg = el("button", { title: "paste SVG markup → vector path node(s) (e.g. a logo)" }, "svg / logo");
+  svg.addEventListener("click", () => {
+    const markup = prompt("Paste SVG markup:", "");
+    if (!markup) return;
+    if (svgToPathNodes(markup, store) === 0) alert("no <path d=…> found in that SVG");
+  });
+  row.append(img, svg);
+  root.append(row);
+}
+
+/** Multi-selection editor: common props (shared value or "mixed") edited on all
+ *  at once, plus bulk actions. Per-anchor scale/rotation/skew just works (set per id). */
+function renderMultiProps(root: HTMLElement, store: EditorStore, ir: SceneIR) {
+  const sel = store.selectedIds.map((id) => findNode(ir.nodes, id)).filter((n): n is NodeIR => !!n);
+  if (sel.length < 2) return;
+  root.append(el("h3", {}, `Multi · ${sel.length} selected`));
+
+  // bulk actions: add motion to all, hide all, delete the overlay-added ones
+  const actions = el("div", { class: "prop-row" });
+  const opSel = el("select", { title: "motion to add to every selected node" });
+  for (const op of MOTION_OPS) opSel.append(el("option", { value: op }, op));
+  const addMo = el("button", {}, "+ motion");
+  addMo.addEventListener("click", () => {
+    for (const n of sel) store.addMotionOp(opSel.value as MotionOpName, n.id);
+  });
+  const hideAll = el("button", { title: "hide all (opacity 0)" }, "hide");
+  hideAll.addEventListener("click", () => store.setNodeProps(sel.map((n) => ({ id: n.id, prop: "opacity", value: 0 }))));
+  const delAdded = el("button", { title: "delete the overlay-added ones" }, "delete added");
+  delAdded.addEventListener("click", () => {
+    for (const id of sel.map((n) => n.id)) store.removeNode(id);
+  });
+  actions.append(opSel, addMo, hideAll, delAdded);
+  root.append(actions);
+
+  // common props = present in EVERY selected node's type (ordered by the first)
+  const lists = sel.map((n) => PROPS_BY_TYPE[n.type]);
+  const common = PROPS_BY_TYPE[sel[0]!.type].filter((p) => p !== "anchor" && lists.every((l) => l.includes(p)));
+  for (const prop of common) {
+    const vals = sel.map((n) => {
+      const props = n.props as unknown as Record<string, PropValue | undefined>;
+      return props[prop] ?? (prop in NUMERIC_DEFAULTS ? NUMERIC_DEFAULTS[prop] : undefined);
+    });
+    const firstVal = vals[0];
+    if (firstVal === undefined) continue; // optional prop unset on all
+    const mixed = vals.some((v) => v !== firstVal);
+    const row = makeControl(
+      prop,
+      firstVal, // show the primary's value; the label flags when they differ
+      false,
+      (v) => store.setNodeProps(sel.map((n) => ({ id: n.id, prop, value: v }))),
+      () => undefined,
+    );
+    const label = el("label", {}, prop);
+    if (mixed) label.append(el("span", { class: "scope" }, " (mixed)"));
+    row.prepend(label);
+    root.append(row);
+  }
+}
+
 export function buildPanel(store: EditorStore, root: HTMLElement) {
   let reportBox: HTMLElement | null = null;
 
@@ -128,6 +522,11 @@ export function buildPanel(store: EditorStore, root: HTMLElement) {
     dur.prepend(el("label", {}, "duration (s)"));
     root.append(dur);
 
+    // --- variations + add-node + add-motion (motion ops) ---
+    renderVariations(root, store);
+    renderAddNode(root, store);
+    renderMotionOps(root, store);
+
     // --- node tree ---
     root.append(el("h3", {}, "Nodes"));
     const renderTree = (nodes: NodeIR[], depth: number) => {
@@ -135,23 +534,43 @@ export function buildPanel(store: EditorStore, root: HTMLElement) {
         const edits = store.nodeEditCount(node.id);
         const item = el(
           "div",
-          { class: `tree-item${store.selectedId === node.id ? " selected" : ""}` },
+          { class: `tree-item${store.selectedIds.includes(node.id) ? " selected" : ""}` },
           el("span", { style: `padding-left:${depth * 14}px` }, `${node.id} `),
           el("span", { class: "badge" }, edits > 0 ? `●${edits}` : ""),
         );
-        item.addEventListener("click", () => store.select(node.id));
+        item.addEventListener("click", (ev) => store.select(node.id, ev.shiftKey || ev.metaKey || ev.ctrlKey));
         root.append(item);
         if (node.type === "group") renderTree(node.children, depth + 1);
       }
     };
     renderTree(ir.nodes, 0);
 
-    // --- selected node props with scope expansion ---
-    if (store.selectedId) {
-      const node = findNode(ir.nodes, store.selectedId);
+    // --- multi-selection: common props edited on all at once ---
+    if (store.selectedIds.length > 1) {
+      renderMultiProps(root, store, ir);
+    }
+
+    // --- selected node props with scope expansion (single selection) ---
+    if (store.selectedIds.length === 1) {
+      const node = findNode(ir.nodes, store.selectedIds[0]!);
       if (node) {
         const id = node.id;
         root.append(el("h3", {}, `Props: ${id} (${node.type})`));
+        const added = store.isAddedNode(id);
+        const actions = el("div", { class: "prop-row" });
+        const dup = el("button", { title: "duplicate this node" }, "duplicate");
+        dup.addEventListener("click", () => store.duplicateNode(id));
+        actions.append(dup);
+        if (added) {
+          const del = el("button", { title: "remove this overlay-added node" }, "delete");
+          del.addEventListener("click", () => store.removeNode(id));
+          actions.append(del);
+        } else {
+          const hide = el("button", { title: "base node — hide it (opacity 0) instead of deleting" }, "hide");
+          hide.addEventListener("click", () => store.hideNode(id));
+          actions.append(hide);
+        }
+        root.append(actions);
         const props = node.props as unknown as Record<string, PropValue | undefined>;
         const states = ir.states ?? {};
         const initial = ir.initial;
@@ -229,6 +648,28 @@ export function buildPanel(store: EditorStore, root: HTMLElement) {
           () => store.unsetTimelineParam(b.name, "scale"));
         scaleRow.prepend(el("label", {}, "scale"));
         card.append(scaleRow);
+
+        // the intent graph: nodes this beat OWNS (track group) + its member
+        // labels (the motion-graph lanes under it) as markers.
+        if ((b.nodes ?? []).length > 0) {
+          const group = el("div", { class: "beat-group" });
+          for (const id of b.nodes!) {
+            const known = findNode(ir.nodes, id) !== null;
+            const lane = el("div", { class: `beat-lane${known ? "" : " missing"}${store.selectedId === id ? " selected" : ""}` }, `◢ ${id}`);
+            if (known) lane.addEventListener("click", () => store.select(id));
+            group.append(lane);
+          }
+          card.append(group);
+        }
+        const memberLabels: string[] = [];
+        const collectLabels = (tl: TimelineIR) => {
+          if ("label" in tl && tl.label !== undefined) memberLabels.push(tl.label);
+          if ("children" in tl) tl.children.forEach(collectLabels);
+        };
+        b.children.forEach(collectLabels);
+        if (memberLabels.length > 0) {
+          card.append(el("div", { class: "beat-markers" }, memberLabels.map((l) => `▸${l}`).join("  ")));
+        }
         root.append(card);
       }
     }
@@ -257,6 +698,23 @@ export function buildPanel(store: EditorStore, root: HTMLElement) {
         );
         durRow.prepend(el("label", {}, "duration"));
         card.append(durRow);
+        if (step.kind === "motionPath") {
+          const cvRow = makeControl(
+            "curviness",
+            step.curviness ?? 1,
+            store.hasTimelineEdit(label, "curviness"),
+            (v) => store.setTimelineParam(label, "curviness", Number(v)),
+            () => store.unsetTimelineParam(label, "curviness"),
+          );
+          cvRow.prepend(el("label", {}, "curviness"));
+          card.append(cvRow);
+          // auto-rotate: turn the node to face its direction of travel
+          const ar = el("input", { type: "checkbox" }) as HTMLInputElement;
+          ar.checked = store.motionPathAutoRotate(label);
+          ar.addEventListener("change", () => store.setAutoRotate(label, ar.checked));
+          const arRow = el("div", { class: "prop-row" }, el("label", {}, "auto-rotate"), ar);
+          card.append(arRow);
+        }
         if (step.kind === "to" || step.kind === "tween") {
           const easeSelect = el("select");
           const current = "ease" in step ? step.ease : undefined;
@@ -266,8 +724,20 @@ export function buildPanel(store: EditorStore, root: HTMLElement) {
           easeSelect.addEventListener("change", () => {
             if (easeSelect.value !== "__custom") store.setTimelineParam(label, "ease", easeSelect.value);
           });
-          const easeRow = el("div", { class: `prop-row${store.hasTimelineEdit(label, "ease") ? " edited" : ""}` }, el("label", {}, "ease"), easeSelect);
-          card.append(easeRow);
+          // ✎ toggles an inline draggable cubic-bezier curve editor for this step
+          const curveBtn = el("button", { class: "mini", title: "edit ease curve" }, "✎");
+          const editorBox = el("div", { style: "display:none;margin-top:6px" });
+          curveBtn.addEventListener("click", () => {
+            if (editorBox.style.display === "none") {
+              editorBox.replaceChildren(buildEaseEditor(label, "ease" in step ? step.ease : undefined, store));
+              editorBox.style.display = "block";
+            } else {
+              editorBox.replaceChildren();
+              editorBox.style.display = "none";
+            }
+          });
+          const easeRow = el("div", { class: `prop-row${store.hasTimelineEdit(label, "ease") ? " edited" : ""}` }, el("label", {}, "ease"), easeSelect, curveBtn);
+          card.append(easeRow, editorBox);
         }
         if (step.kind === "to") {
           const stRow = makeControl(