@signalsandsorcery/plugin-sdk 2.28.1 → 2.34.1

package/dist/index.mjs

@@ -1343,6 +1343,7 @@ var LevelMeter = ({
 
 // src/hooks/useTrackLevels.ts
 import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+var meterDiagRLast = /* @__PURE__ */ new Map();
 var POLL_INTERVAL_MS = 33;
 var HIDDEN_RECHECK_MS = 250;
 var METER_FLOOR_DB = -120;
@@ -1474,6 +1475,11 @@ function useTrackMeter(handle, trackId) {
     }
     const update = () => {
       const level = handle.getLevel(trackId);
+      const dNow = Date.now();
+      if ((meterDiagRLast.get(trackId) ?? 0) < dNow - 3e3) {
+        meterDiagRLast.set(trackId, dNow);
+        console.log(`[MeterDiagR] lookup trackId=${trackId} \u2192 ${level === null ? "MISS (no level for this id)" : "hit"}`);
+      }
       const now = performance.now();
       const dtSec = lastTickRef.current ? Math.max(0, (now - lastTickRef.current) / 1e3) : 0;
       lastTickRef.current = now;
@@ -2175,8 +2181,7 @@ function TrackRow({
                 {
                   "data-testid": "sdk-mute-button",
                   onClick: onMuteToggle,
-                  disabled: isGenerating,
-                  className: `px-1.5 py-0.5 text-xs font-bold rounded transition-colors ${isGenerating ? "bg-sas-panel text-sas-muted/50 cursor-not-allowed" : isMuted ? "bg-red-600 text-white" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"}`,
+                  className: `px-1.5 py-0.5 text-xs font-bold rounded transition-colors ${isMuted ? "bg-red-600 text-white" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"}`,
                   title: isMuted ? "Unmute track" : "Mute track",
                   children: "M"
                 }
@@ -2427,6 +2432,18 @@ function CrossfadeTrackRow({
 }
 
 // src/crossfade-meta.ts
+function hashString(s) {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = (h << 5) + h ^ s.charCodeAt(i) | 0;
+  return (h >>> 0).toString(36);
+}
+function soundIdentity(snap) {
+  if (!snap) return "";
+  if (snap.kind === "preset") return `p:${hashString(snap.state)}`;
+  if (snap.kind === "sample") return `s:${snap.samplePath}`;
+  if (snap.kind === "instrument") return `i:${snap.instrumentId ?? ""}:${hashString(JSON.stringify(snap.zones))}`;
+  return "";
+}
 var EQUAL_POWER_GAIN = 0.707;
 function asCrossfadeMeta(val) {
   if (!val || typeof val !== "object") return null;
@@ -2576,9 +2593,11 @@ function asFadeMeta(val) {
   const m = val;
   if (m.direction !== "in" && m.direction !== "out") return null;
   if (m.gesture !== "volume" && m.gesture !== "build") return null;
+  const effect = m.effect === "stutter" || m.effect === "chopped" || m.effect === "delay" || m.effect === "fade" ? m.effect : void 0;
   return {
     direction: m.direction,
     gesture: m.gesture,
+    effect,
     sourceTrackDbId: typeof m.sourceTrackDbId === "string" ? m.sourceTrackDbId : "",
     sourceSceneId: typeof m.sourceSceneId === "string" ? m.sourceSceneId : "",
     sourceName: typeof m.sourceName === "string" ? m.sourceName : "",
@@ -2665,6 +2684,7 @@ function FadeTrackRow({
   layer,
   direction,
   gesture,
+  effect,
   sliderPos = 0.5,
   onMuteToggle,
   onSoloToggle,
@@ -2678,7 +2698,8 @@ function FadeTrackRow({
   const [confirmDelete, setConfirmDelete] = React10.useState(false);
   const leftLabel = direction === "in" ? "(silent)" : layer.sourceName ?? layer.name;
   const rightLabel = direction === "in" ? layer.sourceName ?? layer.name : "(silent)";
-  const badge = direction === "in" ? "\u2197 Fade in" : "\u2198 Fade out";
+  const verb = effect && effect !== "fade" ? effect.charAt(0).toUpperCase() + effect.slice(1) : "Fade";
+  const badge = direction === "in" ? `\u2197 ${verb} in` : `\u2198 ${verb} out`;
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -3413,9 +3434,701 @@ function CrossfadeModal({
   ) });
 }
 
-// src/components/DownloadPackButton.tsx
-import { useCallback as useCallback7, useEffect as useEffect9, useState as useState10 } from "react";
+// src/components/TransitionDesigner.tsx
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef10, useState as useState11 } from "react";
+
+// src/hooks/useTrackReorder.ts
+import { useCallback as useCallback7, useRef as useRef9, useState as useState10 } from "react";
+function moveItem(arr, from, to) {
+  const next = arr.slice();
+  if (from === to || from < 0 || to < 0 || from >= next.length || to >= next.length) {
+    return next;
+  }
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return next;
+}
+function useTrackReorder({
+  host,
+  items,
+  setItems,
+  getId,
+  onError
+}) {
+  const [draggingIndex, setDraggingIndex] = useState10(null);
+  const [dragOverIndex, setDragOverIndex] = useState10(null);
+  const fromRef = useRef9(null);
+  const itemsRef = useRef9(items);
+  itemsRef.current = items;
+  const dragPropsFor = useCallback7(
+    (index) => ({
+      handleProps: {
+        draggable: true,
+        onDragStart: (e) => {
+          fromRef.current = index;
+          setDraggingIndex(index);
+          if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = "move";
+            try {
+              e.dataTransfer.setData("text/plain", String(index));
+            } catch {
+            }
+          }
+        },
+        onDragEnd: () => {
+          fromRef.current = null;
+          setDraggingIndex(null);
+          setDragOverIndex(null);
+        }
+      },
+      rowProps: {
+        onDragEnter: (e) => {
+          if (fromRef.current === null) return;
+          e.preventDefault();
+          setDragOverIndex(index);
+        },
+        onDragOver: (e) => {
+          if (fromRef.current === null) return;
+          e.preventDefault();
+          if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+          setDragOverIndex((cur) => cur === index ? cur : index);
+        },
+        onDragLeave: () => {
+          setDragOverIndex((cur) => cur === index ? null : cur);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          const from = fromRef.current;
+          fromRef.current = null;
+          setDraggingIndex(null);
+          setDragOverIndex(null);
+          if (from === null || from === index) return;
+          const prev = itemsRef.current;
+          const next = moveItem(prev, from, index);
+          setItems(next);
+          const ids = next.map(getId);
+          Promise.resolve(host.reorderTracks(ids)).catch((err) => {
+            setItems(prev);
+            onError?.(err);
+          });
+        }
+      },
+      isDragging: draggingIndex === index,
+      isDragTarget: dragOverIndex === index && draggingIndex !== index
+    }),
+    [host, setItems, getId, onError, draggingIndex, dragOverIndex]
+  );
+  return { dragPropsFor, draggingIndex, dragOverIndex };
+}
+
+// src/transition-designer-meta.ts
+var TRANSITION_DESIGNER_DRAFT_KEY = "transitionDesigner:draft";
+var AUDIO_EFFECTS = ["fade", "stutter", "chopped", "delay"];
+var AUDIO_EFFECT_LABEL = {
+  fade: "Fade",
+  stutter: "Stutter",
+  chopped: "Chopped",
+  delay: "Delay"
+};
+function asAudioEffect(v) {
+  return v === "fade" || v === "stutter" || v === "chopped" || v === "delay" ? v : null;
+}
+function rowType(hasOrigin, hasTarget) {
+  if (hasOrigin && hasTarget) return "crossfade";
+  if (hasOrigin) return "fade-out";
+  if (hasTarget) return "fade-in";
+  return null;
+}
+function asTransitionDesignerDraft(val) {
+  if (!val || typeof val !== "object") return null;
+  const d = val;
+  const clean = (a) => Array.isArray(a) ? a.filter((x) => x === null || typeof x === "string") : [];
+  const cleanEffects = (e) => {
+    const out = {};
+    if (e && typeof e === "object") {
+      for (const [k, v] of Object.entries(e)) {
+        const eff = asAudioEffect(v);
+        if (eff) out[k] = eff;
+      }
+    }
+    return out;
+  };
+  return {
+    originOrder: clean(d.originOrder),
+    targetOrder: clean(d.targetOrder),
+    rowEffects: cleanEffects(d.rowEffects)
+  };
+}
+function reconcileSlots(saved, poolIds) {
+  const pool = new Set(poolIds);
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const slot of saved ?? []) {
+    if (slot === null) {
+      out.push(null);
+      continue;
+    }
+    if (pool.has(slot) && !seen.has(slot)) {
+      out.push(slot);
+      seen.add(slot);
+    }
+  }
+  for (const id of poolIds) {
+    if (!seen.has(id)) {
+      out.push(id);
+      seen.add(id);
+    }
+  }
+  return out;
+}
+function buildRowSlots(originSlots, targetSlots) {
+  const n = Math.max(originSlots.length, targetSlots.length);
+  const rows = [];
+  for (let i = 0; i < n; i++) {
+    const originId = originSlots[i] ?? null;
+    const targetId = targetSlots[i] ?? null;
+    rows.push({ originId, targetId, type: rowType(originId !== null, targetId !== null) });
+  }
+  return rows;
+}
+function normalizeSlots(originSlots, targetSlots) {
+  const rows = buildRowSlots(originSlots, targetSlots).filter(
+    (r) => r.originId !== null || r.targetId !== null
+  );
+  const trimTrailing = (a) => {
+    let end = a.length;
+    while (end > 0 && a[end - 1] === null) end--;
+    return a.slice(0, end);
+  };
+  return {
+    originOrder: trimTrailing(rows.map((r) => r.originId)),
+    targetOrder: trimTrailing(rows.map((r) => r.targetId))
+  };
+}
+function padSlots(slots, n) {
+  if (slots.length >= n) return slots.slice();
+  return [...slots, ...new Array(n - slots.length).fill(null)];
+}
+function padPair(originSlots, targetSlots) {
+  const n = Math.max(originSlots.length, targetSlots.length);
+  return [padSlots(originSlots, n), padSlots(targetSlots, n)];
+}
+function slotsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+function rowKey(row) {
+  if (row.type === "crossfade") return `xf:${row.originId}|${row.targetId}`;
+  if (row.type === "fade-out") return `fo:${row.originId}`;
+  if (row.type === "fade-in") return `fi:${row.targetId}`;
+  return null;
+}
+function dbIdsFromKeys(keys) {
+  const out = /* @__PURE__ */ new Set();
+  for (const k of keys) {
+    const body = k.slice(3);
+    if (k.startsWith("xf:")) {
+      const sep = body.indexOf("|");
+      out.add(body.slice(0, sep));
+      out.add(body.slice(sep + 1));
+    } else {
+      out.add(body);
+    }
+  }
+  return out;
+}
+
+// src/components/TransitionDesigner.tsx
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var CROSSFADE_ESTIMATE_MS = 15e3;
+var FADE_ESTIMATE_MS = 11e3;
+var CREATE_ALL_CONCURRENCY = 5;
+var TYPE_LABEL = {
+  crossfade: "Crossfade",
+  "fade-out": "Fade out",
+  "fade-in": "Fade in"
+};
+function shortId3(dbId) {
+  return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
+}
+function TransitionDesigner({
+  host,
+  fromSceneId,
+  toSceneId,
+  transitionSceneId,
+  excludeSourceDbIds,
+  onCreateCrossfade,
+  onCreateFade,
+  onCreateAudioTransition,
+  familyLabel,
+  testIdPrefix = "transition-designer"
+}) {
+  const [load, setLoad] = useState11({ status: "loading" });
+  const [fromName, setFromName] = useState11(null);
+  const [toName, setToName] = useState11(null);
+  const [originSlots, setOriginSlots] = useState11([]);
+  const [targetSlots, setTargetSlots] = useState11([]);
+  const [creatingKeys, setCreatingKeys] = useState11(() => /* @__PURE__ */ new Set());
+  const [rowErrors, setRowErrors] = useState11({});
+  const [rowEffects, setRowEffects] = useState11({});
+  const rowEffectsRef = useRef10(rowEffects);
+  rowEffectsRef.current = rowEffects;
+  const audioEffectsEnabled = !!onCreateAudioTransition;
+  const excludeRef = useRef10(excludeSourceDbIds);
+  excludeRef.current = excludeSourceDbIds;
+  const originSlotsRef = useRef10(originSlots);
+  originSlotsRef.current = originSlots;
+  const targetSlotsRef = useRef10(targetSlots);
+  targetSlotsRef.current = targetSlots;
+  const creatingKeysRef = useRef10(creatingKeys);
+  creatingKeysRef.current = creatingKeys;
+  const dragRef = useRef10(null);
+  const [dragging, setDragging] = useState11(null);
+  const [dragOver, setDragOver] = useState11(null);
+  const excludeSet = useMemo5(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originPool = useMemo5(
+    () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
+    [load, excludeSet]
+  );
+  const targetPool = useMemo5(
+    () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
+    [load, excludeSet]
+  );
+  const originById = useMemo5(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
+  const targetById = useMemo5(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
+  const originByIdRef = useRef10(originById);
+  originByIdRef.current = originById;
+  const targetByIdRef = useRef10(targetById);
+  targetByIdRef.current = targetById;
+  const refresh = useCallback8(async () => {
+    if (!host.listSceneFamilyTracks) {
+      setLoad({ status: "error", message: "This host does not support transition tracks." });
+      return;
+    }
+    setLoad({ status: "loading" });
+    try {
+      const [origin, target, fName, tName, draftRaw] = await Promise.all([
+        host.listSceneFamilyTracks(fromSceneId),
+        host.listSceneFamilyTracks(toSceneId),
+        host.getSceneName ? host.getSceneName(fromSceneId) : Promise.resolve(null),
+        host.getSceneName ? host.getSceneName(toSceneId) : Promise.resolve(null),
+        host.getSceneData ? host.getSceneData(transitionSceneId, TRANSITION_DESIGNER_DRAFT_KEY) : Promise.resolve(null)
+      ]);
+      const draft = asTransitionDesignerDraft(draftRaw);
+      const exSet = new Set(excludeRef.current ?? []);
+      const originIds = origin.filter((t) => !exSet.has(t.dbId)).map((t) => t.dbId);
+      const targetIds = target.filter((t) => !exSet.has(t.dbId)).map((t) => t.dbId);
+      const [po, pt] = padPair(
+        reconcileSlots(draft?.originOrder, originIds),
+        reconcileSlots(draft?.targetOrder, targetIds)
+      );
+      setOriginSlots(po);
+      setTargetSlots(pt);
+      setRowEffects(draft?.rowEffects ?? {});
+      setFromName(fName);
+      setToName(tName);
+      setLoad({ status: "ready", origin, target });
+    } catch (err) {
+      setLoad({
+        status: "error",
+        message: err instanceof Error ? err.message : "Failed to load tracks."
+      });
+    }
+  }, [host, fromSceneId, toSceneId, transitionSceneId]);
+  useEffect9(() => {
+    void refresh();
+  }, [refresh]);
+  useEffect9(() => {
+    if (load.status !== "ready") return;
+    const [po, pt] = padPair(
+      reconcileSlots(originSlotsRef.current, originPool.map((t) => t.dbId)),
+      reconcileSlots(targetSlotsRef.current, targetPool.map((t) => t.dbId))
+    );
+    if (!slotsEqual(po, originSlotsRef.current)) setOriginSlots(po);
+    if (!slotsEqual(pt, targetSlotsRef.current)) setTargetSlots(pt);
+  }, [originPool, targetPool, load.status]);
+  const mutate = useCallback8(
+    (nextOrigin, nextTarget) => {
+      const norm = normalizeSlots(nextOrigin, nextTarget);
+      const [po, pt] = padPair(norm.originOrder, norm.targetOrder);
+      setOriginSlots(po);
+      setTargetSlots(pt);
+      if (host.setSceneData) {
+        host.setSceneData(transitionSceneId, TRANSITION_DESIGNER_DRAFT_KEY, { ...norm, rowEffects: rowEffectsRef.current }).catch(() => {
+        });
+      }
+    },
+    [host, transitionSceneId]
+  );
+  const setRowEffect = useCallback8(
+    (sourceDbId, effect) => {
+      setRowEffects((prev) => {
+        const next = { ...prev, [sourceDbId]: effect };
+        if (host.setSceneData) {
+          const norm = normalizeSlots(originSlotsRef.current, targetSlotsRef.current);
+          host.setSceneData(transitionSceneId, TRANSITION_DESIGNER_DRAFT_KEY, { ...norm, rowEffects: next }).catch(() => {
+          });
+        }
+        return next;
+      });
+    },
+    [host, transitionSceneId]
+  );
+  const insertGapAbove = useCallback8(
+    (col, index) => {
+      const slots = col === "origin" ? originSlots : targetSlots;
+      const next = [...slots.slice(0, index), null, ...slots.slice(index)];
+      if (col === "origin") mutate(next, targetSlots);
+      else mutate(originSlots, next);
+    },
+    [originSlots, targetSlots, mutate]
+  );
+  const removeGap = useCallback8(
+    (col, index) => {
+      const slots = col === "origin" ? originSlots : targetSlots;
+      const next = slots.filter((_, i) => i !== index);
+      if (col === "origin") mutate(next, targetSlots);
+      else mutate(originSlots, next);
+    },
+    [originSlots, targetSlots, mutate]
+  );
+  const handleDrop = useCallback8(
+    (col, to) => {
+      const from = dragRef.current;
+      dragRef.current = null;
+      setDragging(null);
+      setDragOver(null);
+      if (!from || from.col !== col || from.index === to) return;
+      if (col === "origin") mutate(moveItem(originSlots, from.index, to), targetSlots);
+      else mutate(originSlots, moveItem(targetSlots, from.index, to));
+    },
+    [originSlots, targetSlots, mutate]
+  );
+  const rows = useMemo5(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
+  const creatingDbIds = useMemo5(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
+  const eligibleCount = useMemo5(
+    () => rows.filter((r) => {
+      const k = rowKey(r);
+      return k !== null && !creatingKeys.has(k);
+    }).length,
+    [rows, creatingKeys]
+  );
+  const createRow = useCallback8(
+    async (row) => {
+      const key = rowKey(row);
+      if (!key || !row.type || creatingKeysRef.current.has(key)) return;
+      setCreatingKeys((prev) => new Set(prev).add(key));
+      setRowErrors((prev) => {
+        if (!(key in prev)) return prev;
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      try {
+        if (row.type === "crossfade") {
+          const o = row.originId ? originByIdRef.current.get(row.originId) : void 0;
+          const t = row.targetId ? targetByIdRef.current.get(row.targetId) : void 0;
+          if (!o || !t) throw new Error("Track is no longer available \u2014 refresh and retry.");
+          await onCreateCrossfade(
+            { dbId: o.dbId, name: o.name, role: o.role },
+            { dbId: t.dbId, name: t.name, role: t.role }
+          );
+        } else if (row.type === "fade-out") {
+          const o = row.originId ? originByIdRef.current.get(row.originId) : void 0;
+          if (!o) throw new Error("Track is no longer available \u2014 refresh and retry.");
+          const eff = rowEffectsRef.current[o.dbId] ?? "fade";
+          if (eff !== "fade" && onCreateAudioTransition) {
+            await onCreateAudioTransition({ dbId: o.dbId, name: o.name, role: o.role }, "out", eff);
+          } else {
+            await onCreateFade({ dbId: o.dbId, name: o.name, role: o.role }, "out", defaultFadeGesture(o.role));
+          }
+        } else {
+          const t = row.targetId ? targetByIdRef.current.get(row.targetId) : void 0;
+          if (!t) throw new Error("Track is no longer available \u2014 refresh and retry.");
+          const eff = rowEffectsRef.current[t.dbId] ?? "fade";
+          if (eff !== "fade" && onCreateAudioTransition) {
+            await onCreateAudioTransition({ dbId: t.dbId, name: t.name, role: t.role }, "in", eff);
+          } else {
+            await onCreateFade({ dbId: t.dbId, name: t.name, role: t.role }, "in", defaultFadeGesture(t.role));
+          }
+        }
+      } catch (err) {
+        setRowErrors((prev) => ({
+          ...prev,
+          [key]: err instanceof Error ? err.message : "Failed to create transition."
+        }));
+      } finally {
+        setCreatingKeys((prev) => {
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+      }
+    },
+    [onCreateCrossfade, onCreateFade, onCreateAudioTransition]
+  );
+  const createAll = useCallback8(async () => {
+    const eligible = buildRowSlots(originSlotsRef.current, targetSlotsRef.current).filter((r) => {
+      const k = rowKey(r);
+      return k !== null && !creatingKeysRef.current.has(k);
+    });
+    if (eligible.length === 0) return;
+    let cursor = 0;
+    const worker = async () => {
+      while (cursor < eligible.length) {
+        const row = eligible[cursor];
+        cursor += 1;
+        await createRow(row);
+      }
+    };
+    await Promise.all(
+      Array.from({ length: Math.min(CREATE_ALL_CONCURRENCY, eligible.length) }, () => worker())
+    );
+  }, [createRow]);
+  const fromLabel = fromName ?? "origin";
+  const toLabel = toName ?? "target";
+  const cellDragProps = (col, index, locked) => ({
+    draggable: !locked,
+    onDragStart: (e) => {
+      if (locked) return;
+      dragRef.current = { col, index };
+      setDragging({ col, index });
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+        try {
+          e.dataTransfer.setData("text/plain", String(index));
+        } catch {
+        }
+      }
+    },
+    onDragEnd: () => {
+      dragRef.current = null;
+      setDragging(null);
+      setDragOver(null);
+    },
+    onDragEnter: (e) => {
+      const d = dragRef.current;
+      if (!d || d.col !== col) return;
+      e.preventDefault();
+      setDragOver({ col, index });
+    },
+    onDragOver: (e) => {
+      const d = dragRef.current;
+      if (!d || d.col !== col) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    },
+    onDragLeave: () => {
+      setDragOver((cur) => cur && cur.col === col && cur.index === index ? null : cur);
+    },
+    onDrop: (e) => {
+      e.preventDefault();
+      handleDrop(col, index);
+    }
+  });
+  const renderCell = (col, index, slotId) => {
+    const byId = col === "origin" ? originById : targetById;
+    const track = slotId ? byId.get(slotId) : void 0;
+    const locked = slotId !== null && creatingDbIds.has(slotId);
+    const isDragging = dragging?.col === col && dragging.index === index;
+    const isDragTarget = dragOver?.col === col && dragOver.index === index && !isDragging;
+    const base = "group relative rounded-sm border px-2 py-1.5 text-left transition-colors select-none";
+    const tone = isDragTarget ? "border-sas-accent bg-sas-accent/10" : "border-sas-border bg-sas-panel";
+    if (slotId === null) {
+      return /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          ...cellDragProps(col, index, false),
+          "data-testid": `${testIdPrefix}-${col}-gap-${index}`,
+          className: `${base} ${tone} border-dashed flex items-center justify-between ${isDragging ? "opacity-40" : "opacity-70"}`,
+          children: [
+            /* @__PURE__ */ jsx17("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
+            /* @__PURE__ */ jsx17(
+              "button",
+              {
+                type: "button",
+                "data-testid": `${testIdPrefix}-${col}-remove-gap-${index}`,
+                onClick: () => removeGap(col, index),
+                title: "Remove gap",
+                className: "text-[10px] text-sas-muted hover:text-sas-danger",
+                children: "\u2715"
+              }
+            )
+          ]
+        }
+      );
+    }
+    const primary = track ? track.prompt?.trim() || track.name : slotId;
+    const meta = track ? [track.role, shortId3(track.dbId)].filter(Boolean).join(" \xB7 ") : "missing";
+    return /* @__PURE__ */ jsx17(
+      "div",
+      {
+        ...cellDragProps(col, index, locked),
+        "data-testid": `${testIdPrefix}-${col}-cell-${slotId}`,
+        "data-value": slotId,
+        className: `${base} ${tone} ${isDragging ? "opacity-40" : ""} ${locked ? "opacity-60" : "cursor-grab active:cursor-grabbing"}`,
+        title: track ? track.dbId : "Track no longer available",
+        children: /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsx17("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
+          /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-text truncate", children: primary }),
+            meta && /* @__PURE__ */ jsx17("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
+          ] }),
+          /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              "data-testid": `${testIdPrefix}-${col}-insert-gap-${index}`,
+              onClick: () => insertGapAbove(col, index),
+              disabled: locked,
+              title: "Insert a gap above (make this a fade)",
+              className: "text-[10px] text-sas-muted opacity-0 group-hover:opacity-100 hover:text-sas-accent disabled:opacity-30",
+              children: "+gap"
+            }
+          )
+        ] })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
+      /* @__PURE__ */ jsxs13("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
+        /* @__PURE__ */ jsx17("span", { className: "text-sas-text", children: fromLabel }),
+        " \u2192",
+        " ",
+        /* @__PURE__ */ jsx17("span", { className: "text-sas-text", children: toLabel }),
+        familyLabel ? ` \xB7 ${familyLabel}` : "",
+        " \xB7 line up a track on each side to crossfade; leave one blank (or insert a gap) to fade."
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 shrink-0", children: [
+        creatingKeys.size > 0 && /* @__PURE__ */ jsxs13("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
+          creatingKeys.size,
+          " creating\u2026"
+        ] }),
+        /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            type: "button",
+            "data-testid": `${testIdPrefix}-create-all`,
+            onClick: createAll,
+            disabled: eligibleCount === 0,
+            title: "Create every staged transition at once (runs several concurrently)",
+            className: `px-2 py-0.5 text-[10px] font-medium rounded-sm border transition-colors whitespace-nowrap ${eligibleCount > 0 ? "bg-sas-accent/20 border-sas-accent text-sas-accent hover:bg-sas-accent hover:text-sas-bg" : "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed"}`,
+            children: [
+              "Create all",
+              eligibleCount > 0 ? ` (${eligibleCount})` : ""
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
+      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
+        "Origin (",
+        fromLabel,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx17("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
+      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
+        "Target (",
+        toLabel,
+        ")"
+      ] })
+    ] }),
+    load.status === "loading" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
+    load.status === "error" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-danger py-6 text-center", "data-testid": `${testIdPrefix}-error`, children: load.message }),
+    load.status === "ready" && (rows.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
+      "No tracks to arrange in this panel for either scene. Add tracks to ",
+      fromLabel,
+      " or ",
+      toLabel,
+      " ",
+      "first (or free one by deleting an existing crossfade/fade)."
+    ] }) : /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: rows.map((row, i) => {
+      const key = rowKey(row);
+      const isCreatingThis = key !== null && creatingKeys.has(key);
+      const errMsg = key !== null ? rowErrors[key] : void 0;
+      return /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          "data-testid": `${testIdPrefix}-row-${i}`,
+          className: "grid grid-cols-[1fr_auto_1fr] gap-2 items-center",
+          children: [
+            renderCell("origin", i, row.originId),
+            /* @__PURE__ */ jsxs13("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
+              !row.type ? /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ jsx17(
+                "span",
+                {
+                  "data-testid": `${testIdPrefix}-type-${i}`,
+                  className: "text-[10px] font-medium px-1.5 py-0.5 rounded-sm border border-sas-accent/50 text-sas-accent",
+                  children: TYPE_LABEL[row.type]
+                }
+              ) : audioEffectsEnabled ? /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
+                /* @__PURE__ */ jsx17(
+                  "select",
+                  {
+                    "data-testid": `${testIdPrefix}-effect-${i}`,
+                    value: rowEffects[row.originId ?? row.targetId] ?? "fade",
+                    onChange: (e) => {
+                      const id = row.originId ?? row.targetId;
+                      if (id) setRowEffect(id, e.target.value);
+                    },
+                    className: "text-[10px] bg-sas-panel border border-sas-border rounded-sm px-1 py-0.5 text-sas-text",
+                    children: AUDIO_EFFECTS.map((eff) => /* @__PURE__ */ jsx17("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
+                  }
+                ),
+                /* @__PURE__ */ jsx17("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
+              ] }) : /* @__PURE__ */ jsx17(
+                "span",
+                {
+                  "data-testid": `${testIdPrefix}-type-${i}`,
+                  className: "text-[10px] font-medium px-1.5 py-0.5 rounded-sm border border-sas-border text-sas-muted",
+                  children: TYPE_LABEL[row.type]
+                }
+              ),
+              isCreatingThis ? /* @__PURE__ */ jsx17("div", { className: "w-full", children: /* @__PURE__ */ jsx17(
+                SorceryProgressBar,
+                {
+                  isLoading: true,
+                  heightClass: "h-5",
+                  statusText: "CREATING",
+                  estimatedDurationMs: row.type === "crossfade" ? CROSSFADE_ESTIMATE_MS : FADE_ESTIMATE_MS
+                }
+              ) }) : /* @__PURE__ */ jsx17(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": `${testIdPrefix}-create-${i}`,
+                  onClick: () => createRow(row),
+                  disabled: !row.type,
+                  className: `w-full px-2 py-0.5 text-[10px] font-medium rounded-sm border transition-colors ${row.type ? "bg-sas-accent/20 border-sas-accent text-sas-accent hover:bg-sas-accent hover:text-sas-bg" : "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed"}`,
+                  children: "Create"
+                }
+              ),
+              errMsg && /* @__PURE__ */ jsx17(
+                "span",
+                {
+                  "data-testid": `${testIdPrefix}-row-error-${i}`,
+                  className: "text-[10px] text-sas-danger text-center leading-tight",
+                  children: errMsg
+                }
+              )
+            ] }),
+            renderCell("target", i, row.targetId)
+          ]
+        },
+        i
+      );
+    }) }))
+  ] });
+}
+
+// src/components/DownloadPackButton.tsx
+import { useCallback as useCallback9, useEffect as useEffect10, useState as useState12 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (!bytes || bytes <= 0) return "";
   const gb = bytes / 1024 ** 3;
@@ -3431,10 +4144,10 @@ var DownloadPackButton = ({
   variant = "compact",
   onDownloadComplete
 }) => {
-  const [status, setStatus] = useState10("idle");
-  const [progress, setProgress] = useState10(0);
-  const [errorMessage, setErrorMessage] = useState10(null);
-  useEffect9(() => {
+  const [status, setStatus] = useState12("idle");
+  const [progress, setProgress] = useState12(0);
+  const [errorMessage, setErrorMessage] = useState12(null);
+  useEffect10(() => {
     const unsub = host.onSamplePackProgress(packId, (p) => {
       setStatus(p.status);
       setProgress(p.progress);
@@ -3449,7 +4162,7 @@ var DownloadPackButton = ({
     });
     return unsub;
   }, [host, packId, onDownloadComplete]);
-  const handleClick = useCallback7(async () => {
+  const handleClick = useCallback9(async () => {
     if (status !== "idle" && status !== "error") return;
     try {
       setStatus("downloading");
@@ -3503,8 +4216,8 @@ var DownloadPackButton = ({
   } else {
     className = `${baseClasses} text-sas-muted hover:text-sas-accent border-sas-border hover:border-sas-accent`;
   }
-  return /* @__PURE__ */ jsxs13("div", { children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx18(
       "button",
       {
         "data-testid": `download-pack-button-${packId}`,
@@ -3515,12 +4228,12 @@ var DownloadPackButton = ({
         children: buttonLabel
       }
     ),
-    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
+    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ jsx18("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
   ] });
 };
 
 // src/components/SamplePackCTACard.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var SamplePackCTACard = ({
   host,
   pack,
@@ -3528,7 +4241,7 @@ var SamplePackCTACard = ({
   onDownloadComplete
 }) => {
   if (status === "checking") {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         "data-testid": `sample-pack-cta-checking-${pack.packId}`,
@@ -3539,16 +4252,16 @@ var SamplePackCTACard = ({
   }
   const headline = status === "stale" ? `${pack.displayName} update available` : `${pack.displayName} not installed`;
   const sublabel = status === "stale" ? `A newer version is available for download.` : pack.description;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-testid": `sample-pack-cta-${pack.packId}`,
       className: "flex flex-col items-center justify-center py-12 px-6 text-center",
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
-        /* @__PURE__ */ jsx18("div", { className: "text-base text-sas-text mb-1", children: headline }),
-        /* @__PURE__ */ jsx18("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
+        /* @__PURE__ */ jsx19("div", { className: "text-base text-sas-text mb-1", children: headline }),
+        /* @__PURE__ */ jsx19("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
+        /* @__PURE__ */ jsx19(
           DownloadPackButton,
           {
             host,
@@ -3565,7 +4278,7 @@ var SamplePackCTACard = ({
 };
 
 // src/components/WaveformView.tsx
-import { useEffect as useEffect10, useRef as useRef9, useState as useState11 } from "react";
+import { useEffect as useEffect11, useRef as useRef11, useState as useState13 } from "react";
 
 // src/components/waveform.ts
 function computePeaks(audioBuffer, bins, targetSamples) {
@@ -3628,7 +4341,7 @@ function drawWaveform(canvas, peaks, options = {}) {
 }
 
 // src/components/WaveformView.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var WaveformView = ({
   host,
   filePath,
@@ -3637,9 +4350,9 @@ var WaveformView = ({
   fillStyle,
   targetSamples
 }) => {
-  const canvasRef = useRef9(null);
-  const [peaks, setPeaks] = useState11(null);
-  useEffect10(() => {
+  const canvasRef = useRef11(null);
+  const [peaks, setPeaks] = useState13(null);
+  useEffect11(() => {
     let cancelled = false;
     let audioContext = null;
     (async () => {
@@ -3665,7 +4378,7 @@ var WaveformView = ({
       cancelled = true;
     };
   }, [host, filePath, bins, targetSamples]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!peaks) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -3676,7 +4389,7 @@ var WaveformView = ({
     observer.observe(canvas);
     return () => observer.disconnect();
   }, [peaks, fillStyle]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "canvas",
     {
       ref: canvasRef,
@@ -3687,8 +4400,8 @@ var WaveformView = ({
 };
 
 // src/components/ScrollingWaveform.tsx
-import { useEffect as useEffect11, useRef as useRef10 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useRef as useRef12 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ScrollingWaveform = ({
   getPeakDb,
   active,
@@ -3696,11 +4409,11 @@ var ScrollingWaveform = ({
   className,
   fillStyle
 }) => {
-  const canvasRef = useRef10(null);
-  const ringRef = useRef10(new Float32Array(columns));
-  const writeIdxRef = useRef10(0);
-  const rafRef = useRef10(null);
-  useEffect11(() => {
+  const canvasRef = useRef12(null);
+  const ringRef = useRef12(new Float32Array(columns));
+  const writeIdxRef = useRef12(0);
+  const rafRef = useRef12(null);
+  useEffect12(() => {
     if (ringRef.current.length !== columns) {
       const next = new Float32Array(columns);
       const prev = ringRef.current;
@@ -3712,7 +4425,7 @@ var ScrollingWaveform = ({
       writeIdxRef.current = writeIdxRef.current % columns;
     }
   }, [columns]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!active) {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -3764,7 +4477,7 @@ var ScrollingWaveform = ({
       }
     };
   }, [active, getPeakDb, fillStyle]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "canvas",
     {
       ref: canvasRef,
@@ -3775,8 +4488,8 @@ var ScrollingWaveform = ({
 };
 
 // src/components/OffsetScrubber.tsx
-import { useCallback as useCallback8, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef11, useState as useState12 } from "react";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useCallback as useCallback10, useEffect as useEffect13, useMemo as useMemo6, useRef as useRef13, useState as useState14 } from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var SLIDER_HEIGHT_PX = 28;
 var TICK_HEIGHT_PX = 14;
 var DOWNBEAT_TICK_HEIGHT_PX = 22;
@@ -3789,40 +4502,40 @@ function OffsetScrubber({
   onChange,
   disabled = false
 }) {
-  const trackRef = useRef11(null);
-  const [draftOffset, setDraftOffset] = useState12(offsetSamples);
-  const [isDragging, setIsDragging] = useState12(false);
-  useEffect12(() => {
+  const trackRef = useRef13(null);
+  const [draftOffset, setDraftOffset] = useState14(offsetSamples);
+  const [isDragging, setIsDragging] = useState14(false);
+  useEffect13(() => {
     if (!isDragging) setDraftOffset(offsetSamples);
   }, [offsetSamples, isDragging]);
   const sampleRate = cuePoints?.sample_rate ?? 44100;
   const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
-  const beatsForRange = useMemo5(() => {
+  const beatsForRange = useMemo6(() => {
     return Math.round(60 / projectBpm * sampleRate);
   }, [projectBpm, sampleRate]);
   const rangeSamples = beatsForRange * meter;
-  const sampleToFraction = useCallback8(
+  const sampleToFraction = useCallback10(
     (sample) => {
       const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
       return (clamped + rangeSamples) / (2 * rangeSamples);
     },
     [rangeSamples]
   );
-  const fractionToSample = useCallback8(
+  const fractionToSample = useCallback10(
     (fraction) => {
       const clamped = Math.max(0, Math.min(1, fraction));
       return Math.round(clamped * 2 * rangeSamples - rangeSamples);
     },
     [rangeSamples]
   );
-  const snapTargets = useMemo5(() => {
+  const snapTargets = useMemo6(() => {
     if (!cuePoints || cuePoints.beats.length === 0) return [];
     const downbeat = cuePoints.beats[0];
     const positives = cuePoints.beats.map((b) => b - downbeat);
     const negatives = positives.slice(1).map((p) => -p);
     return [...negatives, ...positives].sort((a, b) => a - b);
   }, [cuePoints]);
-  const snapToBeat = useCallback8(
+  const snapToBeat = useCallback10(
     (sample) => {
       if (snapTargets.length === 0) return sample;
       let best = snapTargets[0];
@@ -3838,7 +4551,7 @@ function OffsetScrubber({
     },
     [snapTargets]
   );
-  const handlePointerDown = useCallback8(
+  const handlePointerDown = useCallback10(
     (e) => {
       if (disabled || !cuePoints) return;
       e.preventDefault();
@@ -3872,7 +4585,7 @@ function OffsetScrubber({
     },
     [disabled, cuePoints, fractionToSample, onChange, snapToBeat]
   );
-  const handleResetToZero = useCallback8(() => {
+  const handleResetToZero = useCallback10(() => {
     if (disabled) return;
     setDraftOffset(0);
     onChange(0);
@@ -3880,7 +4593,7 @@ function OffsetScrubber({
   const thumbFraction = sampleToFraction(draftOffset);
   const thumbLeftPct = `${(thumbFraction * 100).toFixed(2)}%`;
   const bpmMismatch = cuePoints?.detected_bpm != null && Math.abs(cuePoints.detected_bpm - projectBpm) > 1;
-  const ticks = useMemo5(() => {
+  const ticks = useMemo6(() => {
     if (!cuePoints) return [];
     const downbeat = cuePoints.beats[0] ?? 0;
     return cuePoints.beats.map((b, i) => {
@@ -3891,9 +4604,9 @@ function OffsetScrubber({
     });
   }, [cuePoints, sampleToFraction]);
   const isDisabled = disabled || !cuePoints || cuePoints.beats.length === 0;
-  return /* @__PURE__ */ jsxs15("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
-    /* @__PURE__ */ jsx21("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ jsx22("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
+    /* @__PURE__ */ jsxs16(
       "div",
       {
         ref: trackRef,
@@ -3909,7 +4622,7 @@ function OffsetScrubber({
         "aria-valuenow": draftOffset,
         "aria-disabled": isDisabled,
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "div",
             {
               "aria-hidden": "true",
@@ -3917,7 +4630,7 @@ function OffsetScrubber({
               style: { left: "50%" }
             }
           ),
-          ticks.map((t) => /* @__PURE__ */ jsx21(
+          ticks.map((t) => /* @__PURE__ */ jsx22(
             "div",
             {
               "data-testid": t.isDownbeat ? "offset-tick-downbeat" : "offset-tick",
@@ -3932,7 +4645,7 @@ function OffsetScrubber({
             },
             t.i
           )),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "div",
             {
               "data-testid": "offset-scrubber-thumb",
@@ -3949,7 +4662,7 @@ function OffsetScrubber({
         ]
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "span",
       {
         "data-testid": "offset-scrubber-readout",
@@ -3957,7 +4670,7 @@ function OffsetScrubber({
         children: formatOffset(draftOffset, sampleRate)
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -3969,7 +4682,7 @@ function OffsetScrubber({
         children: "\u2316"
       }
     ),
-    bpmMismatch && /* @__PURE__ */ jsx21(
+    bpmMismatch && /* @__PURE__ */ jsx22(
       "span",
       {
         "data-testid": "offset-bpm-mismatch",
@@ -4041,13 +4754,13 @@ function synthesizeCuePoints({
 }
 
 // src/hooks/useSceneState.ts
-import { useState as useState13, useCallback as useCallback9, useRef as useRef12 } from "react";
+import { useState as useState15, useCallback as useCallback11, useRef as useRef14 } from "react";
 function useSceneState(activeSceneId, initialValue) {
-  const [stateMap, setStateMap] = useState13(() => /* @__PURE__ */ new Map());
-  const activeSceneIdRef = useRef12(activeSceneId);
+  const [stateMap, setStateMap] = useState15(() => /* @__PURE__ */ new Map());
+  const activeSceneIdRef = useRef14(activeSceneId);
   activeSceneIdRef.current = activeSceneId;
   const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
-  const setForCurrentScene = useCallback9((value) => {
+  const setForCurrentScene = useCallback11((value) => {
     const sid = activeSceneIdRef.current;
     if (sid === null) return;
     setStateMap((prev) => {
@@ -4058,7 +4771,7 @@ function useSceneState(activeSceneId, initialValue) {
       return newMap;
     });
   }, [initialValue]);
-  const setForScene = useCallback9((sceneId, value) => {
+  const setForScene = useCallback11((sceneId, value) => {
     setStateMap((prev) => {
       const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
       const next = typeof value === "function" ? value(current) : value;
@@ -4071,10 +4784,10 @@ function useSceneState(activeSceneId, initialValue) {
 }
 
 // src/hooks/useAnySolo.ts
-import { useEffect as useEffect13, useState as useState14 } from "react";
+import { useEffect as useEffect14, useState as useState16 } from "react";
 function useAnySolo(host) {
-  const [anySolo, setAnySolo] = useState14(false);
-  useEffect13(() => {
+  const [anySolo, setAnySolo] = useState16(false);
+  useEffect14(() => {
     let active = true;
     const refresh = () => {
       host.isAnySoloActive().then((v) => {
@@ -4093,7 +4806,7 @@ function useAnySolo(host) {
 }
 
 // src/hooks/useSoundHistory.ts
-import { useCallback as useCallback10, useMemo as useMemo6, useRef as useRef13, useState as useState15 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo7, useRef as useRef15, useState as useState17 } from "react";
 var EMPTY = { entries: [], cursor: -1 };
 function sameDescriptor(a, b) {
   if (a === b) return true;
@@ -4105,14 +4818,14 @@ function sameDescriptor(a, b) {
 }
 function useSoundHistory(applySound, opts = {}) {
   const max = Math.max(2, opts.max ?? 24);
-  const applyRef = useRef13(applySound);
+  const applyRef = useRef15(applySound);
   applyRef.current = applySound;
-  const onChangeRef = useRef13(opts.onChange);
+  const onChangeRef = useRef15(opts.onChange);
   onChangeRef.current = opts.onChange;
-  const dataRef = useRef13({});
-  const [, setVersion] = useState15(0);
-  const bump = useCallback10(() => setVersion((v) => v + 1), []);
-  const commit = useCallback10(
+  const dataRef = useRef15({});
+  const [, setVersion] = useState17(0);
+  const bump = useCallback12(() => setVersion((v) => v + 1), []);
+  const commit = useCallback12(
     (trackId, next, notify) => {
       dataRef.current = { ...dataRef.current, [trackId]: next };
       bump();
@@ -4120,7 +4833,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const record = useCallback10(
+  const record = useCallback12(
     (trackId, descriptor, label) => {
       const h = dataRef.current[trackId];
       const current = h && h.cursor >= 0 ? h.entries[h.cursor] : void 0;
@@ -4135,7 +4848,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [max, commit]
   );
-  const restoreTo = useCallback10(
+  const restoreTo = useCallback12(
     async (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length || index === h.cursor) return false;
@@ -4145,7 +4858,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const undo = useCallback10(
+  const undo = useCallback12(
     (trackId) => {
       const h = dataRef.current[trackId];
       if (!h || h.cursor <= 0) return Promise.resolve(false);
@@ -4153,7 +4866,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [restoreTo]
   );
-  const toggleFavorite = useCallback10(
+  const toggleFavorite = useCallback12(
     (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length) return;
@@ -4162,7 +4875,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const restore = useCallback10(
+  const restore = useCallback12(
     (trackId, state) => {
       const entries = Array.isArray(state?.entries) ? [...state.entries] : [];
       const raw = typeof state?.cursor === "number" ? state.cursor : entries.length - 1;
@@ -4171,15 +4884,15 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const list = useCallback10(
+  const list = useCallback12(
     (trackId) => dataRef.current[trackId] ?? EMPTY,
     []
   );
-  const canUndo = useCallback10((trackId) => {
+  const canUndo = useCallback12((trackId) => {
     const h = dataRef.current[trackId];
     return !!h && h.cursor > 0;
   }, []);
-  const clear = useCallback10(
+  const clear = useCallback12(
     (trackId) => {
       if (dataRef.current[trackId]) {
         const next = { ...dataRef.current };
@@ -4191,102 +4904,18 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const reset = useCallback10(() => {
+  const reset = useCallback12(() => {
     dataRef.current = {};
     bump();
   }, [bump]);
-  return useMemo6(
+  return useMemo7(
     () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
     [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
   );
 }
 
-// src/hooks/useTrackReorder.ts
-import { useCallback as useCallback11, useRef as useRef14, useState as useState16 } from "react";
-function moveItem(arr, from, to) {
-  const next = arr.slice();
-  if (from === to || from < 0 || to < 0 || from >= next.length || to >= next.length) {
-    return next;
-  }
-  const [moved] = next.splice(from, 1);
-  next.splice(to, 0, moved);
-  return next;
-}
-function useTrackReorder({
-  host,
-  items,
-  setItems,
-  getId,
-  onError
-}) {
-  const [draggingIndex, setDraggingIndex] = useState16(null);
-  const [dragOverIndex, setDragOverIndex] = useState16(null);
-  const fromRef = useRef14(null);
-  const itemsRef = useRef14(items);
-  itemsRef.current = items;
-  const dragPropsFor = useCallback11(
-    (index) => ({
-      handleProps: {
-        draggable: true,
-        onDragStart: (e) => {
-          fromRef.current = index;
-          setDraggingIndex(index);
-          if (e.dataTransfer) {
-            e.dataTransfer.effectAllowed = "move";
-            try {
-              e.dataTransfer.setData("text/plain", String(index));
-            } catch {
-            }
-          }
-        },
-        onDragEnd: () => {
-          fromRef.current = null;
-          setDraggingIndex(null);
-          setDragOverIndex(null);
-        }
-      },
-      rowProps: {
-        onDragEnter: (e) => {
-          if (fromRef.current === null) return;
-          e.preventDefault();
-          setDragOverIndex(index);
-        },
-        onDragOver: (e) => {
-          if (fromRef.current === null) return;
-          e.preventDefault();
-          if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-          setDragOverIndex((cur) => cur === index ? cur : index);
-        },
-        onDragLeave: () => {
-          setDragOverIndex((cur) => cur === index ? null : cur);
-        },
-        onDrop: (e) => {
-          e.preventDefault();
-          const from = fromRef.current;
-          fromRef.current = null;
-          setDraggingIndex(null);
-          setDragOverIndex(null);
-          if (from === null || from === index) return;
-          const prev = itemsRef.current;
-          const next = moveItem(prev, from, index);
-          setItems(next);
-          const ids = next.map(getId);
-          Promise.resolve(host.reorderTracks(ids)).catch((err) => {
-            setItems(prev);
-            onError?.(err);
-          });
-        }
-      },
-      isDragging: draggingIndex === index,
-      isDragTarget: dragOverIndex === index && draggingIndex !== index
-    }),
-    [host, setItems, getId, onError, draggingIndex, dragOverIndex]
-  );
-  return { dragPropsFor, draggingIndex, dragOverIndex };
-}
-
 // src/constants/sdk-version.ts
-var PLUGIN_SDK_VERSION = "2.28.0";
+var PLUGIN_SDK_VERSION = "2.34.0";
 
 // src/utils/format-concurrent-tracks.ts
 function formatConcurrentTracks(ctx) {
@@ -4429,6 +5058,8 @@ function pickTopKWeighted(scored, options = {}) {
   return top[top.length - 1].item;
 }
 export {
+  AUDIO_EFFECTS,
+  AUDIO_EFFECT_LABEL,
   ConfirmDialog,
   CrossfadeModal,
   CrossfadeTrackRow,
@@ -4467,34 +5098,49 @@ export {
   ScrollingWaveform,
   SorceryProgressBar,
   TEXTURAL_ROLES,
+  TRANSITION_DESIGNER_DRAFT_KEY,
   TrackDrawer,
   TrackMeterStrip,
   TrackRow,
+  TransitionDesigner,
   VolumeSlider,
   WaveformView,
   analyzeWavPeak,
+  asAudioEffect,
   asCrossfadeMeta,
   asFadeMeta,
+  asTransitionDesignerDraft,
   buildCrossfadeInpaintPrompt,
   buildCrossfadeVolumeCurves,
   buildFadeVolumeCurve,
+  buildRowSlots,
   calculateTimeBasedTarget,
   cellToPx,
   centerScrollTop,
   computePeaks,
+  dbIdsFromKeys,
   dbToSlider,
   defaultFadeGesture,
   drawWaveform,
   formatConcurrentTracks,
+  hashString,
   moveItem,
+  normalizeSlots,
+  padPair,
+  padSlots,
   parseCrossfadePairs,
   parseFades,
   pickTopKWeighted,
   pitchToName,
   pxToCell,
+  reconcileSlots,
   resizeNoteDuration,
+  rowKey,
+  rowType,
   scorePromptMatch,
   sliderToDb,
+  slotsEqual,
+  soundIdentity,
   synthesizeCuePoints,
   tokenizePrompt,
   transposeNotes,