@signalsandsorcery/plugin-sdk 2.25.1 → 2.28.1

package/dist/index.js

@@ -47,6 +47,8 @@ __export(index_exports, {
   FX_DISPLAY_LABELS: () => FX_DISPLAY_LABELS,
   FX_ENGINE_PLUGIN_NAMES: () => FX_ENGINE_PLUGIN_NAMES,
   FX_PRESET_CONFIGS: () => FX_PRESET_CONFIGS,
+  FadeModal: () => FadeModal,
+  FadeTrackRow: () => FadeTrackRow,
   FxToggleBar: () => FxToggleBar,
   GUTTER_W: () => GUTTER_W,
   ImportTrackModal: () => ImportTrackModal,
@@ -65,6 +67,7 @@ __export(index_exports, {
   SamplePackCTACard: () => SamplePackCTACard,
   ScrollingWaveform: () => ScrollingWaveform,
   SorceryProgressBar: () => SorceryProgressBar,
+  TEXTURAL_ROLES: () => TEXTURAL_ROLES,
   TrackDrawer: () => TrackDrawer,
   TrackMeterStrip: () => TrackMeterStrip,
   TrackRow: () => TrackRow,
@@ -72,17 +75,21 @@ __export(index_exports, {
   WaveformView: () => WaveformView,
   analyzeWavPeak: () => analyzeWavPeak,
   asCrossfadeMeta: () => asCrossfadeMeta,
+  asFadeMeta: () => asFadeMeta,
   buildCrossfadeInpaintPrompt: () => buildCrossfadeInpaintPrompt,
   buildCrossfadeVolumeCurves: () => buildCrossfadeVolumeCurves,
+  buildFadeVolumeCurve: () => buildFadeVolumeCurve,
   calculateTimeBasedTarget: () => calculateTimeBasedTarget,
   cellToPx: () => cellToPx,
   centerScrollTop: () => centerScrollTop,
   computePeaks: () => computePeaks,
   dbToSlider: () => dbToSlider,
+  defaultFadeGesture: () => defaultFadeGesture,
   drawWaveform: () => drawWaveform,
   formatConcurrentTracks: () => formatConcurrentTracks,
   moveItem: () => moveItem,
   parseCrossfadePairs: () => parseCrossfadePairs,
+  parseFades: () => parseFades,
   pickTopKWeighted: () => pickTopKWeighted,
   pitchToName: () => pitchToName,
   pxToCell: () => pxToCell,
@@ -2570,6 +2577,8 @@ function parseCrossfadePairs(sceneData) {
       sliderPos: g.origin.meta.sliderPos,
       originDbId: g.origin.dbId,
       targetDbId: g.target.dbId,
+      originSourceDbId: g.origin.meta.sourceTrackDbId,
+      targetSourceDbId: g.target.meta.sourceTrackDbId,
       originSourceName: g.origin.meta.sourceName,
       originSoundLabel: g.origin.meta.soundLabel,
       targetSourceName: g.target.meta.sourceName,
@@ -2673,9 +2682,448 @@ function buildCrossfadeInpaintPrompt(input) {
   return lines.join("\n");
 }
 
-// src/components/ImportTrackModal.tsx
-var import_react11 = require("react");
+// src/fade-meta.ts
+function asFadeMeta(val) {
+  if (!val || typeof val !== "object") return null;
+  const m = val;
+  if (m.direction !== "in" && m.direction !== "out") return null;
+  if (m.gesture !== "volume" && m.gesture !== "build") return null;
+  return {
+    direction: m.direction,
+    gesture: m.gesture,
+    sourceTrackDbId: typeof m.sourceTrackDbId === "string" ? m.sourceTrackDbId : "",
+    sourceSceneId: typeof m.sourceSceneId === "string" ? m.sourceSceneId : "",
+    sourceName: typeof m.sourceName === "string" ? m.sourceName : "",
+    soundLabel: typeof m.soundLabel === "string" ? m.soundLabel : "",
+    sliderPos: typeof m.sliderPos === "number" ? m.sliderPos : 0.5
+  };
+}
+function parseFades(sceneData) {
+  const out = [];
+  for (const [key, val] of Object.entries(sceneData)) {
+    const match = /^track:(.+):fade$/.exec(key);
+    if (!match) continue;
+    const meta = asFadeMeta(val);
+    if (!meta) continue;
+    out.push({ dbId: match[1], meta });
+  }
+  return out;
+}
+function buildFadeVolumeCurve(bars, bpm, direction, sliderPos, gesture, steps = 32) {
+  const durationSeconds = bars * 4 * 60 / Math.max(1, bpm);
+  if (gesture === "build") {
+    return [
+      { time: 0, db: 0 },
+      { time: Math.round(durationSeconds * 1e3) / 1e3, db: 0 }
+    ];
+  }
+  const s = Math.min(0.98, Math.max(0.02, sliderPos));
+  const round = (n) => Math.round(n * 1e3) / 1e3;
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const x = i / steps;
+    const time = round(x * durationSeconds);
+    const theta = x <= s ? x / s * (Math.PI / 4) : Math.PI / 4 + (x - s) / (1 - s) * (Math.PI / 4);
+    const gain = direction === "out" ? Math.cos(theta) : Math.sin(theta);
+    points.push({ time, db: Math.round(gainToDb(gain) * 100) / 100 });
+  }
+  return points;
+}
+var TEXTURAL_ROLES = /* @__PURE__ */ new Set([
+  "pads",
+  "pad",
+  "strings",
+  "atmospheres",
+  "atmosphere",
+  "atmos",
+  "drones",
+  "drone",
+  "soundscapes",
+  "soundscape"
+]);
+function defaultFadeGesture(role) {
+  if (!role) return "build";
+  const norm = role.toLowerCase().replace(/[\s_-]+/g, " ").trim();
+  if (TEXTURAL_ROLES.has(norm)) return "volume";
+  for (const token of norm.split(" ")) {
+    if (TEXTURAL_ROLES.has(token)) return "volume";
+  }
+  return "build";
+}
+
+// src/components/FadeTrackRow.tsx
+var import_react11 = __toESM(require("react"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
+function FadeCaption({
+  layer,
+  direction,
+  gesture
+}) {
+  const tag = direction === "in" ? "Fade in" : "Fade out";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] text-sas-text truncate", title: layer.sourceName ?? layer.name, children: layer.sourceName ?? layer.name }),
+    layer.soundLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
+      "\xB7 ",
+      layer.soundLabel
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", title: `Fade gesture: ${gesture}`, children: [
+      "\xB7 ",
+      gesture
+    ] })
+  ] });
+}
+function FadeTrackRow({
+  layer,
+  direction,
+  gesture,
+  sliderPos = 0.5,
+  onMuteToggle,
+  onSoloToggle,
+  onVolumeChange,
+  onPanChange,
+  onDelete,
+  onSliderChange,
+  levels,
+  accentColor = "#9333EA"
+}) {
+  const [confirmDelete, setConfirmDelete] = import_react11.default.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";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      "data-testid": "fade-track-row",
+      className: "w-full rounded-sm border border-sas-border bg-sas-panel/40 overflow-hidden",
+      style: { borderLeftColor: accentColor, borderLeftWidth: "3px" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "span",
+            {
+              "data-testid": "fade-direction-badge",
+              className: "text-[10px] font-bold uppercase tracking-wide",
+              style: { color: accentColor },
+              children: badge
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              "data-testid": "fade-delete-button",
+              onClick: () => setConfirmDelete(true),
+              className: "text-sas-danger/70 hover:text-sas-danger px-1 transition-colors text-sm",
+              title: "Delete fade",
+              "aria-label": "Delete fade",
+              children: "x"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          TrackRow,
+          {
+            track: { id: layer.trackId, name: "", role: layer.role },
+            runtimeState: layer.runtimeState,
+            fxDetailState: EMPTY_FX_DETAIL_STATE,
+            drawerOpen: false,
+            drawerTab: "fx",
+            levels,
+            accentColor,
+            contentSlot: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FadeCaption, { layer, direction, gesture }),
+            onMuteToggle,
+            onSoloToggle,
+            onVolumeChange,
+            onPanChange
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "fade-slider-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "span",
+            {
+              className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
+              title: leftLabel,
+              children: leftLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "input",
+            {
+              type: "range",
+              "data-testid": "fade-slider",
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: sliderPos,
+              disabled: !onSliderChange,
+              onChange: onSliderChange ? (e) => onSliderChange(Number(e.target.value)) : void 0,
+              style: { accentColor },
+              className: "flex-1 disabled:opacity-60 disabled:cursor-not-allowed",
+              "aria-label": "Fade position"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "span",
+            {
+              className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
+              title: rightLabel,
+              children: rightLabel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ConfirmDialog,
+          {
+            open: confirmDelete,
+            title: "Delete fade?",
+            message: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "This fade track will be permanently removed from this scene. This cannot be undone." }),
+            confirmLabel: "Delete",
+            onConfirm: () => {
+              setConfirmDelete(false);
+              onDelete();
+            },
+            onCancel: () => setConfirmDelete(false),
+            testIdPrefix: "fade-delete-confirm"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/FadeModal.tsx
+var import_react12 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function shortId(dbId) {
+  return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
+}
+var normRole = (r) => (r ?? "").toLowerCase().trim();
+function computeOrphans(from, to, excludeSet) {
+  const bucket = (list) => {
+    const m = /* @__PURE__ */ new Map();
+    for (const t of list) {
+      const k = normRole(t.role);
+      const arr = m.get(k);
+      if (arr) arr.push(t);
+      else m.set(k, [t]);
+    }
+    return m;
+  };
+  const fromByRole = bucket(from);
+  const toByRole = bucket(to);
+  const roles = /* @__PURE__ */ new Set([...fromByRole.keys(), ...toByRole.keys()]);
+  const fadeOut = [];
+  const fadeIn = [];
+  for (const role of roles) {
+    const f = fromByRole.get(role) ?? [];
+    const t = toByRole.get(role) ?? [];
+    const shared = Math.min(f.length, t.length);
+    fadeOut.push(...f.slice(shared));
+    fadeIn.push(...t.slice(shared));
+  }
+  return {
+    fadeOut: fadeOut.filter((x) => !excludeSet.has(x.dbId)),
+    fadeIn: fadeIn.filter((x) => !excludeSet.has(x.dbId))
+  };
+}
+function OrphanRow({
+  track,
+  gesture,
+  selected,
+  disabled,
+  onSelect,
+  testId
+}) {
+  const primary = track.prompt?.trim() || track.name;
+  const meta = [track.role, shortId(track.dbId), gesture].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      "data-testid": testId,
+      "data-value": track.dbId,
+      onClick: onSelect,
+      disabled,
+      className: `w-full text-left px-2 py-1.5 rounded-sm border transition-colors disabled:opacity-50 ${selected ? "bg-sas-accent/15 border-sas-accent" : "bg-sas-panel border-sas-border hover:border-sas-accent/50"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
+        meta && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
+      ]
+    }
+  );
+}
+function FadeModal({
+  host,
+  open,
+  fromSceneId,
+  toSceneId,
+  fromSceneName,
+  toSceneName,
+  excludeSourceDbIds,
+  onClose,
+  onCreate,
+  testIdPrefix = "fade-modal"
+}) {
+  const [load, setLoad] = (0, import_react12.useState)({ status: "loading" });
+  const [selectedDbId, setSelectedDbId] = (0, import_react12.useState)("");
+  const [isCreating, setIsCreating] = (0, import_react12.useState)(false);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const [fromName, setFromName] = (0, import_react12.useState)(null);
+  const [toName, setToName] = (0, import_react12.useState)(null);
+  const cancelRef = (0, import_react12.useRef)(null);
+  const refresh = (0, import_react12.useCallback)(async () => {
+    if (!host.listSceneFamilyTracks) {
+      setLoad({ status: "error", message: "This host does not support fades." });
+      return;
+    }
+    setLoad({ status: "loading" });
+    try {
+      const [from, to, fName, tName] = 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)
+      ]);
+      setFromName(fName);
+      setToName(tName);
+      setLoad({ status: "ready", from, to });
+    } catch (err) {
+      setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
+    }
+  }, [host, fromSceneId, toSceneId]);
+  (0, import_react12.useEffect)(() => {
+    if (open) {
+      setError(null);
+      setIsCreating(false);
+      setSelectedDbId("");
+      void refresh();
+    }
+  }, [open, refresh]);
+  const excludeSet = (0, import_react12.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const { fadeOut, fadeIn } = (0, import_react12.useMemo)(
+    () => load.status === "ready" ? computeOrphans(load.from, load.to, excludeSet) : { fadeOut: [], fadeIn: [] },
+    [load, excludeSet]
+  );
+  const allOrphans = (0, import_react12.useMemo)(
+    () => [
+      ...fadeOut.map((t) => ({ track: t, direction: "out" })),
+      ...fadeIn.map((t) => ({ track: t, direction: "in" }))
+    ],
+    [fadeOut, fadeIn]
+  );
+  (0, import_react12.useEffect)(() => {
+    if (!allOrphans.some((o) => o.track.dbId === selectedDbId)) {
+      setSelectedDbId(allOrphans[0]?.track.dbId ?? "");
+    }
+  }, [allOrphans, selectedDbId]);
+  const selected = allOrphans.find((o) => o.track.dbId === selectedDbId) ?? null;
+  const canCreate = !isCreating && !!selected;
+  const handleClose = (0, import_react12.useCallback)(() => {
+    if (!isCreating) onClose();
+  }, [isCreating, onClose]);
+  const handleCreate = (0, import_react12.useCallback)(async () => {
+    if (!selected) return;
+    setIsCreating(true);
+    setError(null);
+    try {
+      await onCreate(
+        { dbId: selected.track.dbId, name: selected.track.name, role: selected.track.role },
+        selected.direction,
+        defaultFadeGesture(selected.track.role)
+      );
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create fade.");
+      setIsCreating(false);
+    }
+  }, [selected, onCreate, onClose]);
+  const fromLabel = fromName ?? fromSceneName ?? null;
+  const toLabel = toName ?? toSceneName ?? null;
+  if (!open) return null;
+  const renderSection = (heading, list, section) => {
+    if (list.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "block", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": heading,
+          "data-testid": `${testIdPrefix}-${section === "out" ? "fade-out" : "fade-in"}-list`,
+          className: "mt-1 space-y-1 max-h-40 overflow-y-auto pr-0.5",
+          children: list.map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            OrphanRow,
+            {
+              track: t,
+              gesture: defaultFadeGesture(t.role),
+              selected: t.dbId === selectedDbId,
+              disabled: isCreating,
+              onSelect: () => setSelectedDbId(t.dbId),
+              testId: `${testIdPrefix}-option-${t.dbId}`
+            },
+            t.dbId
+          ))
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: "bg-sas-panel border border-sas-border rounded-md shadow-xl w-[420px] max-w-[92vw] p-4 space-y-3",
+      onClick: (e) => e.stopPropagation(),
+      "data-testid": `${testIdPrefix}-box`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add fade" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+          "Tracks with no counterpart between",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
+          " and",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
+          " can gracefully fade out (leaving) or fade in (entering) across this transition."
+        ] }),
+        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
+        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
+        load.status === "ready" && (allOrphans.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", "data-testid": `${testIdPrefix}-empty`, children: "Every track has a counterpart in the other scene \u2014 nothing to fade. Use \u201C+ Crossfade\u201D to bridge matching tracks." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          renderSection(`Fade out${fromLabel ? ` (from ${fromLabel})` : ""}`, fadeOut, "out"),
+          renderSection(`Fade in${toLabel ? ` (to ${toLabel})` : ""}`, fadeIn, "in")
+        ] })),
+        error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              ref: cancelRef,
+              "data-testid": `${testIdPrefix}-cancel`,
+              onClick: onClose,
+              disabled: isCreating,
+              className: "px-3 py-1 text-xs rounded-sm border border-sas-border text-sas-muted hover:text-sas-text disabled:opacity-50",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              "data-testid": `${testIdPrefix}-confirm`,
+              onClick: handleCreate,
+              disabled: !canCreate,
+              className: `px-3 py-1 text-xs rounded-sm border transition-colors ${canCreate ? "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: isCreating ? "Generating fade\u2026" : "Create fade"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/ImportTrackModal.tsx
+var import_react13 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ImportTrackModal({
   host,
   open,
@@ -2687,10 +3135,10 @@ function ImportTrackModal({
   onPick,
   onPortTrack
 }) {
-  const [load, setLoad] = (0, import_react11.useState)({ status: "loading" });
-  const [selectedSceneId, setSelectedSceneId] = (0, import_react11.useState)(null);
-  const [importingTrackId, setImportingTrackId] = (0, import_react11.useState)(null);
-  const refresh = (0, import_react11.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react13.useState)({ status: "loading" });
+  const [selectedSceneId, setSelectedSceneId] = (0, import_react13.useState)(null);
+  const [importingTrackId, setImportingTrackId] = (0, import_react13.useState)(null);
+  const refresh = (0, import_react13.useCallback)(async () => {
     if (!host.listImportableTracks) {
       setLoad({ status: "error", message: "This host does not support importing tracks." });
       return;
@@ -2706,14 +3154,14 @@ function ImportTrackModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load scenes." });
     }
   }, [host, mode, onPortTrack]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (open) {
       setSelectedSceneId(null);
       setImportingTrackId(null);
       void refresh();
     }
   }, [open, refresh]);
-  const handleImport = (0, import_react11.useCallback)(
+  const handleImport = (0, import_react13.useCallback)(
     async (track, sourceSceneId, sceneName, isSameScene) => {
       if (isSameScene && onPortTrack) {
         if (!track.importable) return;
@@ -2754,16 +3202,16 @@ function ImportTrackModal({
   if (!open) return null;
   const scenes = load.status === "ready" ? load.scenes : [];
   const selectedScene = scenes.find((s) => s.sceneId === selectedSceneId) ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: "w-[420px] max-h-[70vh] overflow-hidden flex flex-col rounded-md border border-sas-border bg-sas-panel shadow-xl",
       onClick: (e) => e.stopPropagation(),
       "data-testid": `${testIdPrefix}-modal`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
-            selectedScene && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+            selectedScene && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 className: "text-sas-muted hover:text-sas-accent text-xs",
@@ -2772,9 +3220,9 @@ function ImportTrackModal({
                 children: "\u2190"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               className: "text-sas-muted hover:text-sas-accent text-sm",
@@ -2784,30 +3232,30 @@ function ImportTrackModal({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "overflow-y-auto p-2 flex-1", children: [
-          load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-loading`, children: "Loading scenes\u2026" }),
-          load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "py-8 text-center text-xs text-red-400", "data-testid": `${testIdPrefix}-error`, children: load.message }),
-          load.status === "ready" && scenes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-empty`, children: mode === "sound" ? "No other scenes have a sound to import." : "No other scenes have a compatible track to import." }),
-          load.status === "ready" && scenes.length > 0 && !selectedScene && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "overflow-y-auto p-2 flex-1", children: [
+          load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-loading`, children: "Loading scenes\u2026" }),
+          load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-8 text-center text-xs text-red-400", "data-testid": `${testIdPrefix}-error`, children: load.message }),
+          load.status === "ready" && scenes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-empty`, children: mode === "sound" ? "No other scenes have a sound to import." : "No other scenes have a compatible track to import." }),
+          load.status === "ready" && scenes.length > 0 && !selectedScene && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "button",
             {
               className: "w-full flex items-center justify-between px-2 py-1.5 rounded-sm border border-sas-border bg-sas-panel-alt text-left text-xs text-sas-text hover:border-sas-accent hover:text-sas-accent transition-colors",
               onClick: () => setSelectedSceneId(scene.sceneId),
               "data-testid": `${testIdPrefix}-scene`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: scene.sceneName }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-sas-muted", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate", children: scene.sceneName }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-sas-muted", children: [
                   scene.tracks.length,
                   " \u2192"
                 ] })
               ]
             }
           ) }, scene.sceneId)) }),
-          selectedScene && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-track-list`, children: selectedScene.tracks.map((track) => {
+          selectedScene && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-track-list`, children: selectedScene.tracks.map((track) => {
             const busy = importingTrackId === track.trackId;
             const gated = mode === "track" && !track.importable;
             const disabled = gated || busy;
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               "button",
               {
                 className: `w-full flex items-center justify-between px-2 py-1.5 rounded-sm border text-left text-xs transition-colors ${disabled ? "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed" : "bg-sas-panel-alt border-sas-border text-sas-text hover:border-sas-accent hover:text-sas-accent"}`,
@@ -2817,14 +3265,14 @@ function ImportTrackModal({
                 "data-testid": `${testIdPrefix}-track`,
                 "data-importable": mode === "sound" || track.importable ? "true" : "false",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "truncate", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "truncate", children: [
                     track.name,
-                    track.role ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-sas-muted", children: [
+                    track.role ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-sas-muted", children: [
                       " \xB7 ",
                       track.role
                     ] }) : null
                   ] }),
-                  busy ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sas-muted", children: "\u2298" }) : null
+                  busy ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sas-muted", children: "\u2298" }) : null
                 ]
               }
             ) }, track.dbId);
@@ -2836,8 +3284,38 @@ function ImportTrackModal({
 }
 
 // src/components/CrossfadeModal.tsx
-var import_react12 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function shortId2(dbId) {
+  return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
+}
+function CandidateRow({
+  track,
+  selected,
+  disabled,
+  onSelect,
+  testId
+}) {
+  const primary = track.prompt?.trim() || track.name;
+  const meta = [track.role, shortId2(track.dbId)].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      "data-testid": testId,
+      "data-value": track.dbId,
+      onClick: onSelect,
+      disabled,
+      className: `w-full text-left px-2 py-1.5 rounded-sm border transition-colors disabled:opacity-50 ${selected ? "bg-sas-accent/15 border-sas-accent" : "bg-sas-panel border-sas-border hover:border-sas-accent/50"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
+        meta && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
+      ]
+    }
+  );
+}
 function CrossfadeModal({
   host,
   open,
@@ -2845,34 +3323,40 @@ function CrossfadeModal({
   toSceneId,
   fromSceneName,
   toSceneName,
+  excludeSourceDbIds,
   onClose,
   onCreate,
   testIdPrefix = "crossfade-modal"
 }) {
-  const [load, setLoad] = (0, import_react12.useState)({ status: "loading" });
-  const [originDbId, setOriginDbId] = (0, import_react12.useState)("");
-  const [targetDbId, setTargetDbId] = (0, import_react12.useState)("");
-  const [isCreating, setIsCreating] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const cancelRef = (0, import_react12.useRef)(null);
-  const refresh = (0, import_react12.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react14.useState)({ status: "loading" });
+  const [originDbId, setOriginDbId] = (0, import_react14.useState)("");
+  const [targetDbId, setTargetDbId] = (0, import_react14.useState)("");
+  const [isCreating, setIsCreating] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [fromName, setFromName] = (0, import_react14.useState)(null);
+  const [toName, setToName] = (0, import_react14.useState)(null);
+  const cancelRef = (0, import_react14.useRef)(null);
+  const refresh = (0, import_react14.useCallback)(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support crossfade tracks." });
       return;
     }
     setLoad({ status: "loading" });
     try {
-      const [origin, target] = await Promise.all([
+      const [origin, target, fName, tName] = await Promise.all([
         host.listSceneFamilyTracks(fromSceneId),
-        host.listSceneFamilyTracks(toSceneId)
+        host.listSceneFamilyTracks(toSceneId),
+        host.getSceneName ? host.getSceneName(fromSceneId) : Promise.resolve(null),
+        host.getSceneName ? host.getSceneName(toSceneId) : Promise.resolve(null)
       ]);
+      setFromName(fName);
+      setToName(tName);
       setLoad({ status: "ready", origin, target });
-      setOriginDbId(origin[0]?.dbId ?? "");
     } catch (err) {
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
     }
   }, [host, fromSceneId, toSceneId]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (open) {
       setError(null);
       setIsCreating(false);
@@ -2881,27 +3365,32 @@ function CrossfadeModal({
       void refresh();
     }
   }, [open, refresh]);
-  const originTrack = (0, import_react12.useMemo)(
-    () => load.status === "ready" ? load.origin.find((t) => t.dbId === originDbId) ?? null : null,
-    [load, originDbId]
+  const excludeSet = (0, import_react14.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originCandidates = (0, import_react14.useMemo)(
+    () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
+    [load, excludeSet]
   );
-  const originRole = originTrack?.role;
-  const targetCandidates = (0, import_react12.useMemo)(() => {
-    if (load.status !== "ready") return [];
-    if (!originRole) return load.target;
-    return load.target.filter((t) => t.role === originRole);
-  }, [load, originRole]);
-  (0, import_react12.useEffect)(() => {
+  const targetCandidates = (0, import_react14.useMemo)(
+    () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
+    [load, excludeSet]
+  );
+  (0, import_react14.useEffect)(() => {
+    if (!originCandidates.some((t) => t.dbId === originDbId)) {
+      setOriginDbId(originCandidates[0]?.dbId ?? "");
+    }
+  }, [originCandidates, originDbId]);
+  (0, import_react14.useEffect)(() => {
     if (!targetCandidates.some((t) => t.dbId === targetDbId)) {
       setTargetDbId(targetCandidates[0]?.dbId ?? "");
     }
   }, [targetCandidates, targetDbId]);
+  const originTrack = originCandidates.find((t) => t.dbId === originDbId) ?? null;
   const targetTrack = targetCandidates.find((t) => t.dbId === targetDbId) ?? null;
   const canCreate = !isCreating && !!originTrack && !!targetTrack;
-  const handleClose = (0, import_react12.useCallback)(() => {
+  const handleClose = (0, import_react14.useCallback)(() => {
     if (!isCreating) onClose();
   }, [isCreating, onClose]);
-  const handleCreate = (0, import_react12.useCallback)(async () => {
+  const handleCreate = (0, import_react14.useCallback)(async () => {
     if (!originTrack || !targetTrack) return;
     setIsCreating(true);
     setError(null);
@@ -2916,79 +3405,100 @@ function CrossfadeModal({
       setIsCreating(false);
     }
   }, [originTrack, targetTrack, onCreate, onClose]);
+  const fromLabel = fromName ?? fromSceneName ?? null;
+  const toLabel = toName ?? toSceneName ?? null;
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: "bg-sas-panel border border-sas-border rounded-md shadow-xl w-[420px] max-w-[92vw] p-4 space-y-3",
       onClick: (e) => e.stopPropagation(),
       "data-testid": `${testIdPrefix}-box`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add crossfade" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add crossfade" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
           "Bridge a track from",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sas-text", children: fromSceneName ?? "the origin scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
           " into one from",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sas-text", children: toSceneName ?? "the target scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
           ". Both layers share one generated part; each keeps its own preset."
         ] }),
-        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
-        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
-        load.status === "ready" && (load.origin.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
+        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
+        load.status === "ready" && (originCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             className: "text-xs text-sas-muted py-4 text-center",
             "data-testid": `${testIdPrefix}-empty-origin`,
-            children: "No matching tracks in the origin scene. Add one there first."
+            children: [
+              "No available tracks in ",
+              fromLabel ?? "the origin scene",
+              ". Add one (or free one from another crossfade) first."
+            ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "Origin (top)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "select",
+        ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+              "Origin ",
+              fromLabel ? `(${fromLabel})` : "(top)"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
               {
-                "data-testid": `${testIdPrefix}-origin-select`,
-                value: originDbId,
-                onChange: (e) => setOriginDbId(e.target.value),
-                disabled: isCreating,
-                className: "sas-input w-full mt-0.5 text-xs",
-                children: load.origin.map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("option", { value: t.dbId, children: [
-                  t.name,
-                  t.role ? ` \xB7 ${t.role}` : ""
-                ] }, t.dbId))
+                role: "radiogroup",
+                "aria-label": "Origin track",
+                "data-testid": `${testIdPrefix}-origin-list`,
+                className: "mt-1 space-y-1 max-h-40 overflow-y-auto pr-0.5",
+                children: originCandidates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  CandidateRow,
+                  {
+                    track: t,
+                    selected: t.dbId === originDbId,
+                    disabled: isCreating,
+                    onSelect: () => setOriginDbId(t.dbId),
+                    testId: `${testIdPrefix}-origin-option-${t.dbId}`
+                  },
+                  t.dbId
+                ))
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
-              "Target (bottom)",
-              originRole ? ` \xB7 ${originRole}` : ""
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+              "Target ",
+              toLabel ? `(${toLabel})` : "(bottom)"
             ] }),
-            targetCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "text-xs text-sas-danger mt-0.5", "data-testid": `${testIdPrefix}-empty-target`, children: [
-              "No ",
-              originRole ?? "matching",
-              " track in the target scene to crossfade into."
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "select",
+            targetCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-xs text-sas-danger mt-0.5", "data-testid": `${testIdPrefix}-empty-target`, children: [
+              "No available tracks in ",
+              toLabel ?? "the target scene",
+              " to crossfade into."
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
               {
-                "data-testid": `${testIdPrefix}-target-select`,
-                value: targetDbId,
-                onChange: (e) => setTargetDbId(e.target.value),
-                disabled: isCreating,
-                className: "sas-input w-full mt-0.5 text-xs",
-                children: targetCandidates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("option", { value: t.dbId, children: [
-                  t.name,
-                  t.role ? ` \xB7 ${t.role}` : ""
-                ] }, t.dbId))
+                role: "radiogroup",
+                "aria-label": "Target track",
+                "data-testid": `${testIdPrefix}-target-list`,
+                className: "mt-1 space-y-1 max-h-40 overflow-y-auto pr-0.5",
+                children: targetCandidates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  CandidateRow,
+                  {
+                    track: t,
+                    selected: t.dbId === targetDbId,
+                    disabled: isCreating,
+                    onSelect: () => setTargetDbId(t.dbId),
+                    testId: `${testIdPrefix}-target-option-${t.dbId}`
+                  },
+                  t.dbId
+                ))
               }
             )
           ] })
         ] })),
-        error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               ref: cancelRef,
@@ -2999,7 +3509,7 @@ function CrossfadeModal({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               "data-testid": `${testIdPrefix}-confirm`,
@@ -3016,8 +3526,8 @@ function CrossfadeModal({
 }
 
 // src/components/DownloadPackButton.tsx
-var import_react13 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function formatSize(bytes) {
   if (!bytes || bytes <= 0) return "";
   const gb = bytes / 1024 ** 3;
@@ -3033,10 +3543,10 @@ var DownloadPackButton = ({
   variant = "compact",
   onDownloadComplete
 }) => {
-  const [status, setStatus] = (0, import_react13.useState)("idle");
-  const [progress, setProgress] = (0, import_react13.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
+  const [status, setStatus] = (0, import_react15.useState)("idle");
+  const [progress, setProgress] = (0, import_react15.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     const unsub = host.onSamplePackProgress(packId, (p) => {
       setStatus(p.status);
       setProgress(p.progress);
@@ -3051,7 +3561,7 @@ var DownloadPackButton = ({
     });
     return unsub;
   }, [host, packId, onDownloadComplete]);
-  const handleClick = (0, import_react13.useCallback)(async () => {
+  const handleClick = (0, import_react15.useCallback)(async () => {
     if (status !== "idle" && status !== "error") return;
     try {
       setStatus("downloading");
@@ -3105,8 +3615,8 @@ var DownloadPackButton = ({
   } else {
     className = `${baseClasses} text-sas-muted hover:text-sas-accent border-sas-border hover:border-sas-accent`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         "data-testid": `download-pack-button-${packId}`,
@@ -3117,12 +3627,12 @@ var DownloadPackButton = ({
         children: buttonLabel
       }
     ),
-    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
+    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
   ] });
 };
 
 // src/components/SamplePackCTACard.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SamplePackCTACard = ({
   host,
   pack,
@@ -3130,7 +3640,7 @@ var SamplePackCTACard = ({
   onDownloadComplete
 }) => {
   if (status === "checking") {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         "data-testid": `sample-pack-cta-checking-${pack.packId}`,
@@ -3141,16 +3651,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__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       "data-testid": `sample-pack-cta-${pack.packId}`,
       className: "flex flex-col items-center justify-center py-12 px-6 text-center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-base text-sas-text mb-1", children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-base text-sas-text mb-1", children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           DownloadPackButton,
           {
             host,
@@ -3167,7 +3677,7 @@ var SamplePackCTACard = ({
 };
 
 // src/components/WaveformView.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/components/waveform.ts
 function computePeaks(audioBuffer, bins, targetSamples) {
@@ -3230,7 +3740,7 @@ function drawWaveform(canvas, peaks, options = {}) {
 }
 
 // src/components/WaveformView.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var WaveformView = ({
   host,
   filePath,
@@ -3239,9 +3749,9 @@ var WaveformView = ({
   fillStyle,
   targetSamples
 }) => {
-  const canvasRef = (0, import_react14.useRef)(null);
-  const [peaks, setPeaks] = (0, import_react14.useState)(null);
-  (0, import_react14.useEffect)(() => {
+  const canvasRef = (0, import_react16.useRef)(null);
+  const [peaks, setPeaks] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     let cancelled = false;
     let audioContext = null;
     (async () => {
@@ -3267,7 +3777,7 @@ var WaveformView = ({
       cancelled = true;
     };
   }, [host, filePath, bins, targetSamples]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!peaks) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -3278,7 +3788,7 @@ var WaveformView = ({
     observer.observe(canvas);
     return () => observer.disconnect();
   }, [peaks, fillStyle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -3289,8 +3799,8 @@ var WaveformView = ({
 };
 
 // src/components/ScrollingWaveform.tsx
-var import_react15 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ScrollingWaveform = ({
   getPeakDb,
   active,
@@ -3298,11 +3808,11 @@ var ScrollingWaveform = ({
   className,
   fillStyle
 }) => {
-  const canvasRef = (0, import_react15.useRef)(null);
-  const ringRef = (0, import_react15.useRef)(new Float32Array(columns));
-  const writeIdxRef = (0, import_react15.useRef)(0);
-  const rafRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const canvasRef = (0, import_react17.useRef)(null);
+  const ringRef = (0, import_react17.useRef)(new Float32Array(columns));
+  const writeIdxRef = (0, import_react17.useRef)(0);
+  const rafRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (ringRef.current.length !== columns) {
       const next = new Float32Array(columns);
       const prev = ringRef.current;
@@ -3314,7 +3824,7 @@ var ScrollingWaveform = ({
       writeIdxRef.current = writeIdxRef.current % columns;
     }
   }, [columns]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!active) {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -3366,7 +3876,7 @@ var ScrollingWaveform = ({
       }
     };
   }, [active, getPeakDb, fillStyle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -3377,8 +3887,8 @@ var ScrollingWaveform = ({
 };
 
 // src/components/OffsetScrubber.tsx
-var import_react16 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SLIDER_HEIGHT_PX = 28;
 var TICK_HEIGHT_PX = 14;
 var DOWNBEAT_TICK_HEIGHT_PX = 22;
@@ -3391,40 +3901,40 @@ function OffsetScrubber({
   onChange,
   disabled = false
 }) {
-  const trackRef = (0, import_react16.useRef)(null);
-  const [draftOffset, setDraftOffset] = (0, import_react16.useState)(offsetSamples);
-  const [isDragging, setIsDragging] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const trackRef = (0, import_react18.useRef)(null);
+  const [draftOffset, setDraftOffset] = (0, import_react18.useState)(offsetSamples);
+  const [isDragging, setIsDragging] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     if (!isDragging) setDraftOffset(offsetSamples);
   }, [offsetSamples, isDragging]);
   const sampleRate = cuePoints?.sample_rate ?? 44100;
   const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
-  const beatsForRange = (0, import_react16.useMemo)(() => {
+  const beatsForRange = (0, import_react18.useMemo)(() => {
     return Math.round(60 / projectBpm * sampleRate);
   }, [projectBpm, sampleRate]);
   const rangeSamples = beatsForRange * meter;
-  const sampleToFraction = (0, import_react16.useCallback)(
+  const sampleToFraction = (0, import_react18.useCallback)(
     (sample) => {
       const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
       return (clamped + rangeSamples) / (2 * rangeSamples);
     },
     [rangeSamples]
   );
-  const fractionToSample = (0, import_react16.useCallback)(
+  const fractionToSample = (0, import_react18.useCallback)(
     (fraction) => {
       const clamped = Math.max(0, Math.min(1, fraction));
       return Math.round(clamped * 2 * rangeSamples - rangeSamples);
     },
     [rangeSamples]
   );
-  const snapTargets = (0, import_react16.useMemo)(() => {
+  const snapTargets = (0, import_react18.useMemo)(() => {
     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 = (0, import_react16.useCallback)(
+  const snapToBeat = (0, import_react18.useCallback)(
     (sample) => {
       if (snapTargets.length === 0) return sample;
       let best = snapTargets[0];
@@ -3440,7 +3950,7 @@ function OffsetScrubber({
     },
     [snapTargets]
   );
-  const handlePointerDown = (0, import_react16.useCallback)(
+  const handlePointerDown = (0, import_react18.useCallback)(
     (e) => {
       if (disabled || !cuePoints) return;
       e.preventDefault();
@@ -3474,7 +3984,7 @@ function OffsetScrubber({
     },
     [disabled, cuePoints, fractionToSample, onChange, snapToBeat]
   );
-  const handleResetToZero = (0, import_react16.useCallback)(() => {
+  const handleResetToZero = (0, import_react18.useCallback)(() => {
     if (disabled) return;
     setDraftOffset(0);
     onChange(0);
@@ -3482,7 +3992,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 = (0, import_react16.useMemo)(() => {
+  const ticks = (0, import_react18.useMemo)(() => {
     if (!cuePoints) return [];
     const downbeat = cuePoints.beats[0] ?? 0;
     return cuePoints.beats.map((b, i) => {
@@ -3493,9 +4003,9 @@ function OffsetScrubber({
     });
   }, [cuePoints, sampleToFraction]);
   const isDisabled = disabled || !cuePoints || cuePoints.beats.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         ref: trackRef,
@@ -3511,7 +4021,7 @@ function OffsetScrubber({
         "aria-valuenow": draftOffset,
         "aria-disabled": isDisabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               "aria-hidden": "true",
@@ -3519,7 +4029,7 @@ function OffsetScrubber({
               style: { left: "50%" }
             }
           ),
-          ticks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          ticks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               "data-testid": t.isDownbeat ? "offset-tick-downbeat" : "offset-tick",
@@ -3534,7 +4044,7 @@ function OffsetScrubber({
             },
             t.i
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               "data-testid": "offset-scrubber-thumb",
@@ -3551,7 +4061,7 @@ function OffsetScrubber({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "span",
       {
         "data-testid": "offset-scrubber-readout",
@@ -3559,7 +4069,7 @@ function OffsetScrubber({
         children: formatOffset(draftOffset, sampleRate)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       {
         type: "button",
@@ -3571,7 +4081,7 @@ function OffsetScrubber({
         children: "\u2316"
       }
     ),
-    bpmMismatch && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    bpmMismatch && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "span",
       {
         "data-testid": "offset-bpm-mismatch",
@@ -3643,13 +4153,13 @@ function synthesizeCuePoints({
 }
 
 // src/hooks/useSceneState.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 function useSceneState(activeSceneId, initialValue) {
-  const [stateMap, setStateMap] = (0, import_react17.useState)(() => /* @__PURE__ */ new Map());
-  const activeSceneIdRef = (0, import_react17.useRef)(activeSceneId);
+  const [stateMap, setStateMap] = (0, import_react19.useState)(() => /* @__PURE__ */ new Map());
+  const activeSceneIdRef = (0, import_react19.useRef)(activeSceneId);
   activeSceneIdRef.current = activeSceneId;
   const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
-  const setForCurrentScene = (0, import_react17.useCallback)((value) => {
+  const setForCurrentScene = (0, import_react19.useCallback)((value) => {
     const sid = activeSceneIdRef.current;
     if (sid === null) return;
     setStateMap((prev) => {
@@ -3660,7 +4170,7 @@ function useSceneState(activeSceneId, initialValue) {
       return newMap;
     });
   }, [initialValue]);
-  const setForScene = (0, import_react17.useCallback)((sceneId, value) => {
+  const setForScene = (0, import_react19.useCallback)((sceneId, value) => {
     setStateMap((prev) => {
       const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
       const next = typeof value === "function" ? value(current) : value;
@@ -3673,10 +4183,10 @@ function useSceneState(activeSceneId, initialValue) {
 }
 
 // src/hooks/useAnySolo.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 function useAnySolo(host) {
-  const [anySolo, setAnySolo] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [anySolo, setAnySolo] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     let active = true;
     const refresh = () => {
       host.isAnySoloActive().then((v) => {
@@ -3695,7 +4205,7 @@ function useAnySolo(host) {
 }
 
 // src/hooks/useSoundHistory.ts
-var import_react19 = require("react");
+var import_react21 = require("react");
 var EMPTY = { entries: [], cursor: -1 };
 function sameDescriptor(a, b) {
   if (a === b) return true;
@@ -3707,14 +4217,14 @@ function sameDescriptor(a, b) {
 }
 function useSoundHistory(applySound, opts = {}) {
   const max = Math.max(2, opts.max ?? 24);
-  const applyRef = (0, import_react19.useRef)(applySound);
+  const applyRef = (0, import_react21.useRef)(applySound);
   applyRef.current = applySound;
-  const onChangeRef = (0, import_react19.useRef)(opts.onChange);
+  const onChangeRef = (0, import_react21.useRef)(opts.onChange);
   onChangeRef.current = opts.onChange;
-  const dataRef = (0, import_react19.useRef)({});
-  const [, setVersion] = (0, import_react19.useState)(0);
-  const bump = (0, import_react19.useCallback)(() => setVersion((v) => v + 1), []);
-  const commit = (0, import_react19.useCallback)(
+  const dataRef = (0, import_react21.useRef)({});
+  const [, setVersion] = (0, import_react21.useState)(0);
+  const bump = (0, import_react21.useCallback)(() => setVersion((v) => v + 1), []);
+  const commit = (0, import_react21.useCallback)(
     (trackId, next, notify) => {
       dataRef.current = { ...dataRef.current, [trackId]: next };
       bump();
@@ -3722,7 +4232,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const record = (0, import_react19.useCallback)(
+  const record = (0, import_react21.useCallback)(
     (trackId, descriptor, label) => {
       const h = dataRef.current[trackId];
       const current = h && h.cursor >= 0 ? h.entries[h.cursor] : void 0;
@@ -3737,7 +4247,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [max, commit]
   );
-  const restoreTo = (0, import_react19.useCallback)(
+  const restoreTo = (0, import_react21.useCallback)(
     async (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length || index === h.cursor) return false;
@@ -3747,7 +4257,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const undo = (0, import_react19.useCallback)(
+  const undo = (0, import_react21.useCallback)(
     (trackId) => {
       const h = dataRef.current[trackId];
       if (!h || h.cursor <= 0) return Promise.resolve(false);
@@ -3755,7 +4265,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [restoreTo]
   );
-  const toggleFavorite = (0, import_react19.useCallback)(
+  const toggleFavorite = (0, import_react21.useCallback)(
     (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length) return;
@@ -3764,7 +4274,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const restore = (0, import_react19.useCallback)(
+  const restore = (0, import_react21.useCallback)(
     (trackId, state) => {
       const entries = Array.isArray(state?.entries) ? [...state.entries] : [];
       const raw = typeof state?.cursor === "number" ? state.cursor : entries.length - 1;
@@ -3773,15 +4283,15 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const list = (0, import_react19.useCallback)(
+  const list = (0, import_react21.useCallback)(
     (trackId) => dataRef.current[trackId] ?? EMPTY,
     []
   );
-  const canUndo = (0, import_react19.useCallback)((trackId) => {
+  const canUndo = (0, import_react21.useCallback)((trackId) => {
     const h = dataRef.current[trackId];
     return !!h && h.cursor > 0;
   }, []);
-  const clear = (0, import_react19.useCallback)(
+  const clear = (0, import_react21.useCallback)(
     (trackId) => {
       if (dataRef.current[trackId]) {
         const next = { ...dataRef.current };
@@ -3793,18 +4303,18 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const reset = (0, import_react19.useCallback)(() => {
+  const reset = (0, import_react21.useCallback)(() => {
     dataRef.current = {};
     bump();
   }, [bump]);
-  return (0, import_react19.useMemo)(
+  return (0, import_react21.useMemo)(
     () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
     [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
   );
 }
 
 // src/hooks/useTrackReorder.ts
-var import_react20 = require("react");
+var import_react22 = require("react");
 function moveItem(arr, from, to) {
   const next = arr.slice();
   if (from === to || from < 0 || to < 0 || from >= next.length || to >= next.length) {
@@ -3821,12 +4331,12 @@ function useTrackReorder({
   getId,
   onError
 }) {
-  const [draggingIndex, setDraggingIndex] = (0, import_react20.useState)(null);
-  const [dragOverIndex, setDragOverIndex] = (0, import_react20.useState)(null);
-  const fromRef = (0, import_react20.useRef)(null);
-  const itemsRef = (0, import_react20.useRef)(items);
+  const [draggingIndex, setDraggingIndex] = (0, import_react22.useState)(null);
+  const [dragOverIndex, setDragOverIndex] = (0, import_react22.useState)(null);
+  const fromRef = (0, import_react22.useRef)(null);
+  const itemsRef = (0, import_react22.useRef)(items);
   itemsRef.current = items;
-  const dragPropsFor = (0, import_react20.useCallback)(
+  const dragPropsFor = (0, import_react22.useCallback)(
     (index) => ({
       handleProps: {
         draggable: true,
@@ -3888,7 +4398,7 @@ function useTrackReorder({
 }
 
 // src/constants/sdk-version.ts
-var PLUGIN_SDK_VERSION = "2.25.0";
+var PLUGIN_SDK_VERSION = "2.28.0";
 
 // src/utils/format-concurrent-tracks.ts
 function formatConcurrentTracks(ctx) {
@@ -4049,6 +4559,8 @@ function pickTopKWeighted(scored, options = {}) {
   FX_DISPLAY_LABELS,
   FX_ENGINE_PLUGIN_NAMES,
   FX_PRESET_CONFIGS,
+  FadeModal,
+  FadeTrackRow,
   FxToggleBar,
   GUTTER_W,
   ImportTrackModal,
@@ -4067,6 +4579,7 @@ function pickTopKWeighted(scored, options = {}) {
   SamplePackCTACard,
   ScrollingWaveform,
   SorceryProgressBar,
+  TEXTURAL_ROLES,
   TrackDrawer,
   TrackMeterStrip,
   TrackRow,
@@ -4074,17 +4587,21 @@ function pickTopKWeighted(scored, options = {}) {
   WaveformView,
   analyzeWavPeak,
   asCrossfadeMeta,
+  asFadeMeta,
   buildCrossfadeInpaintPrompt,
   buildCrossfadeVolumeCurves,
+  buildFadeVolumeCurve,
   calculateTimeBasedTarget,
   cellToPx,
   centerScrollTop,
   computePeaks,
   dbToSlider,
+  defaultFadeGesture,
   drawWaveform,
   formatConcurrentTracks,
   moveItem,
   parseCrossfadePairs,
+  parseFades,
   pickTopKWeighted,
   pitchToName,
   pxToCell,