@signalsandsorcery/plugin-sdk 2.36.2 → 2.38.2

package/dist/index.js

@@ -82,6 +82,7 @@ __export(index_exports, {
   TRANSITION_DESIGNER_DRAFT_KEY: () => TRANSITION_DESIGNER_DRAFT_KEY,
   TrackDrawer: () => TrackDrawer,
   TrackExternalFxSection: () => TrackExternalFxSection,
+  TrackFreezeSection: () => TrackFreezeSection,
   TrackMeterStrip: () => TrackMeterStrip,
   TrackRow: () => TrackRow,
   TransitionDesigner: () => TransitionDesigner,
@@ -152,6 +153,7 @@ __export(index_exports, {
   useSceneState: () => useSceneState,
   useSoundHistory: () => useSoundHistory,
   useTrackExternalFx: () => useTrackExternalFx,
+  useTrackFreeze: () => useTrackFreeze,
   useTrackLevel: () => useTrackLevel,
   useTrackLevels: () => useTrackLevels,
   useTrackMeter: () => useTrackMeter,
@@ -228,11 +230,11 @@ var EMPTY_FX_DETAIL_STATE = {
 };
 
 // src/components/TrackRow.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_lucide_react = require("lucide-react");
 
 // src/components/TrackDrawer.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/constants/fx-presets.ts
 var EQ_PRESETS = {
@@ -1214,14 +1216,132 @@ function TrackExternalFxSection({
   );
 }
 
-// src/components/TrackDrawer.tsx
+// src/components/TrackFreezeSection.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var STALE_LABELS = {
+  midi: "MIDI changed",
+  preset: "preset changed",
+  instrument: "instrument changed",
+  "external-fx": "FX changed",
+  role: "role changed"
+};
+function TrackFreezeSection({
+  state,
+  busy,
+  error,
+  onFreeze,
+  onUnfreeze
+}) {
+  const frozen = state?.frozen === true;
+  const stale = frozen && state?.stale === true;
+  const missing = state?.missingDeps ?? [];
+  const unfreezeBlocked = frozen && missing.length > 0;
+  const statusLine = !state ? "Reading freeze state\u2026" : !frozen ? state.latentFreshFreeze ? "Live \u2014 a fresh stem is cached, freezing is instant." : "Live \u2014 playing through the instrument and FX chain." : stale ? `\u26A0\uFE0F\u2744 Frozen (stale) \u2014 ${state.staleReasons.map((r) => STALE_LABELS[r] ?? r).join(", ")} since the stem rendered. Playback keeps the old stem until you re-freeze.` : "\u2744 Frozen \u2014 playing the rendered stem. Mixer (volume \xB7 pan \xB7 mute \xB7 solo) stays live.";
+  const primaryLabel = busy === "freeze" ? "Rendering stem\u2026" : busy === "unfreeze" ? "Restoring chain\u2026" : !frozen ? "\u2744 Freeze track" : stale ? "\u2744 Re-freeze (render new stem)" : "Unfreeze track";
+  const primaryAction = !frozen || stale ? onFreeze : onUnfreeze;
+  const primaryDisabled = busy !== null || !state || frozen && !stale && unfreezeBlocked;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-freeze-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-sas-muted/80 leading-snug", "data-testid": "sdk-freeze-status", children: statusLine }),
+    frozen && missing.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: "text-[11px] leading-snug rounded-sm border border-sas-border bg-sas-panel-alt px-2 py-1.5 text-sas-muted",
+        "data-testid": "sdk-freeze-missing-deps",
+        children: [
+          "Missing on this machine:",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sas-accent", children: missing.map((d) => d.name).join(", ") }),
+          ". ",
+          "Install (or rescan plugins if blacklisted) to unfreeze \u2014 the frozen sound keeps playing meanwhile."
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-testid": "sdk-freeze-primary",
+        disabled: primaryDisabled,
+        onClick: primaryAction,
+        className: `w-full py-2 text-xs font-medium rounded-sm border transition-colors ${primaryDisabled ? "border-sas-border text-sas-muted/40 cursor-not-allowed" : "border-sas-accent bg-sas-accent/20 text-sas-accent hover:bg-sas-accent/40"}`,
+        title: !frozen ? "Render this track to audio and disable its plugins (mix controls stay live)" : stale ? "Sound inputs changed \u2014 render a fresh stem" : unfreezeBlocked ? "Unfreeze needs the missing plugins installed" : "Remove the stem and re-enable the instrument + FX chain",
+        children: primaryLabel
+      }
+    ),
+    frozen && stale && !unfreezeBlocked && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-testid": "sdk-freeze-unfreeze-secondary",
+        disabled: busy !== null,
+        onClick: onUnfreeze,
+        className: "w-full py-1.5 text-[11px] rounded-sm border border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent transition-colors",
+        children: "Unfreeze instead (back to live editing)"
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-red-400 leading-snug", "data-testid": "sdk-freeze-error", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[10px] text-sas-muted/50 leading-snug", children: "Frozen tracks survive missing plugins and travel inside project backups. The stem is kept after unfreezing, so re-freezing an unchanged track is instant." })
+  ] });
+}
+
+// src/hooks/useTrackFreeze.ts
+var import_react4 = require("react");
+function useTrackFreeze(host, trackId) {
+  const enabled = !!host && typeof host.getTrackFreezeState === "function";
+  const [state, setState] = (0, import_react4.useState)(null);
+  const [busy, setBusy] = (0, import_react4.useState)(null);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const refresh = (0, import_react4.useCallback)(async () => {
+    if (!enabled || !host?.getTrackFreezeState) return;
+    try {
+      setState(await host.getTrackFreezeState(trackId));
+    } catch {
+      setState(null);
+    }
+  }, [enabled, host, trackId]);
+  (0, import_react4.useEffect)(() => {
+    void refresh();
+  }, [refresh]);
+  (0, import_react4.useEffect)(() => {
+    if (!enabled) return void 0;
+    const onFreezeChanged = () => {
+      void refresh();
+    };
+    window.addEventListener("sas:freeze-changed", onFreezeChanged);
+    return () => window.removeEventListener("sas:freeze-changed", onFreezeChanged);
+  }, [enabled, refresh]);
+  const run = (0, import_react4.useCallback)(
+    async (action) => {
+      if (!host) return;
+      const method = action === "freeze" ? host.freezeTrack : host.unfreezeTrack;
+      if (typeof method !== "function") return;
+      setBusy(action);
+      setError(null);
+      try {
+        setState(await method.call(host, trackId));
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+        void refresh();
+      } finally {
+        setBusy(null);
+      }
+    },
+    [host, trackId, refresh]
+  );
+  const freeze = (0, import_react4.useCallback)(() => run("freeze"), [run]);
+  const unfreeze = (0, import_react4.useCallback)(() => run("unfreeze"), [run]);
+  return { enabled, state, busy, error, refresh, freeze, unfreeze };
+}
+
+// src/components/TrackDrawer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var TAB_LABELS = {
   fx: "FX",
   pick: "Pick",
   history: "History",
   import: "Import",
-  edit: "Edit"
+  edit: "Edit",
+  freeze: "\u2744 Freeze"
 };
 function TrackDrawer({
   activeTab,
@@ -1233,6 +1353,7 @@ function TrackDrawer({
   onFxDryWetChange,
   fxDisabled = false,
   externalFxHost,
+  freeze,
   instruments = [],
   currentPluginId = null,
   isLoading = false,
@@ -1255,23 +1376,27 @@ function TrackDrawer({
   editSnap,
   onAuditionNote
 }) {
-  const [search, setSearch] = (0, import_react4.useState)("");
+  const [search, setSearch] = (0, import_react5.useState)("");
   const fxEnabled = !!onFxToggle;
   const pickEnabled = !!onSelect;
   const historyEnabled = !!onRestoreSound;
   const importEnabled = !!onImportSound;
   const editEnabled = !!onNotesChange;
-  const enabledTabs = (0, import_react4.useMemo)(() => {
+  const internalFreeze = useTrackFreeze(freeze ? void 0 : externalFxHost, trackId);
+  const fz = freeze ?? internalFreeze;
+  const freezeEnabled = fz.enabled;
+  const enabledTabs = (0, import_react5.useMemo)(() => {
     const tabs = [];
     if (fxEnabled) tabs.push("fx");
     if (pickEnabled) tabs.push("pick");
     if (historyEnabled) tabs.push("history");
     if (importEnabled) tabs.push("import");
     if (editEnabled) tabs.push("edit");
+    if (freezeEnabled) tabs.push("freeze");
     return tabs;
-  }, [fxEnabled, pickEnabled, historyEnabled, importEnabled, editEnabled]);
+  }, [fxEnabled, pickEnabled, historyEnabled, importEnabled, editEnabled, freezeEnabled]);
   const SURGE_XT_DEFAULT_ID = "Surge XT";
-  const filtered = (0, import_react4.useMemo)(() => {
+  const filtered = (0, import_react5.useMemo)(() => {
     let all = instruments.filter((i) => i.name !== "Surge XT");
     if (search.trim()) {
       const q = search.toLowerCase();
@@ -1291,12 +1416,12 @@ function TrackDrawer({
   const history = soundHistory ?? [];
   const effectiveTab = enabledTabs.includes(activeTab) ? activeTab : enabledTabs[0] ?? "fx";
   const tabClass = (active) => `px-2 py-0.5 text-xs rounded-sm transition-colors ${active ? "bg-sas-accent/20 text-sas-accent font-medium" : "text-sas-muted hover:text-sas-accent"}`;
-  const strip = enabledTabs.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const strip = enabledTabs.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       className: "flex items-center gap-1 border-b border-sas-border pb-1",
       "data-testid": "sdk-drawer-tabs",
-      children: enabledTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: enabledTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -1310,9 +1435,9 @@ function TrackDrawer({
     }
   ) : null;
   const currentSound = soundHistoryCursor >= 0 && soundHistoryCursor < history.length ? history[soundHistoryCursor].label : null;
-  const header = strip || currentSound ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1", "data-testid": "sdk-drawer-header", children: [
+  const header = strip || currentSound ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1", "data-testid": "sdk-drawer-header", children: [
     strip,
-    currentSound && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    currentSound && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "span",
       {
         className: "text-[10px] text-sas-muted/60 truncate px-0.5",
@@ -1321,10 +1446,41 @@ function TrackDrawer({
       }
     )
   ] }) : null;
+  if (effectiveTab === "freeze") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-freeze", children: [
+      header,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        TrackFreezeSection,
+        {
+          state: fz.state,
+          busy: fz.busy,
+          error: fz.error,
+          onFreeze: () => void fz.freeze(),
+          onUnfreeze: () => void fz.unfreeze()
+        }
+      )
+    ] });
+  }
+  if (fz.state?.frozen === true) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-frozen-lock", children: [
+      header,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[11px] text-sas-muted/80 leading-snug rounded-sm border border-sas-border bg-sas-panel-alt px-2 py-2", children: "\u2744 This track is frozen \u2014 it plays its rendered stem, so sound editing here would be inaudible. Volume, pan, mute and solo stay live." }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          "data-testid": "sdk-drawer-frozen-goto",
+          onClick: () => onTabChange?.("freeze"),
+          className: "w-full py-2 text-xs font-medium rounded-sm border border-sas-accent bg-sas-accent/20 text-sas-accent hover:bg-sas-accent/40 transition-colors",
+          children: "Open the Freeze tab to unfreeze"
+        }
+      )
+    ] });
+  }
   if (effectiveTab === "edit") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-edit", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-edit", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         PianoRollEditor,
         {
           notes: editNotes ?? [],
@@ -1339,9 +1495,9 @@ function TrackDrawer({
     ] });
   }
   if (effectiveTab === "fx") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-fx", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-fx", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FxToggleBar,
         {
           trackId,
@@ -1352,20 +1508,20 @@ function TrackDrawer({
           disabled: fxDisabled
         }
       ),
-      externalFxHost && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TrackExternalFxSection, { host: externalFxHost, trackId, disabled: fxDisabled })
+      externalFxHost && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TrackExternalFxSection, { host: externalFxHost, trackId, disabled: fxDisabled })
     ] });
   }
   if (effectiveTab === "import") {
     const soundNoun = /preset/i.test(importSoundLabel ?? "") ? "preset" : /sample/i.test(importSoundLabel ?? "") ? "sample" : "sound";
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-import", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-import", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-[11px] text-sas-muted/70 leading-snug", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-[11px] text-sas-muted/70 leading-snug", children: [
         "Copy the sound from a matching track in another scene \u2014 your MIDI stays, only the",
         " ",
         soundNoun,
         " changes."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "button",
         {
           type: "button",
@@ -1383,16 +1539,16 @@ function TrackDrawer({
   }
   if (effectiveTab === "history") {
     const order = history.map((_, i) => i).reverse();
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", children: [
       header,
-      history.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      history.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           className: "text-xs text-sas-muted/60 text-center py-3",
           "data-testid": "sdk-history-empty",
           children: "No sounds yet \u2014 shuffle to build history."
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "ul",
         {
           className: "flex flex-col gap-1 max-h-[160px] overflow-y-auto",
@@ -1400,8 +1556,8 @@ function TrackDrawer({
           children: order.map((i) => {
             const entry = history[i];
             const isCurrent = i === soundHistoryCursor;
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -1411,12 +1567,12 @@ function TrackDrawer({
                   className: `flex-1 min-w-0 flex items-center justify-between px-2 py-1.5 rounded-sm border text-left text-xs transition-colors ${isCurrent ? "border-sas-accent bg-sas-accent/20 text-sas-accent cursor-default" : "border-sas-border bg-sas-panel-alt text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
                   title: isCurrent ? "Current sound" : `Restore: ${entry.label}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: entry.label }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] text-sas-muted/60 flex-shrink-0 ml-2", children: isCurrent ? "\u25CF current" : "restore" })
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: entry.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] text-sas-muted/60 flex-shrink-0 ml-2", children: isCurrent ? "\u25CF current" : "restore" })
                   ]
                 }
               ),
-              onToggleFavorite && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              onToggleFavorite && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1434,10 +1590,10 @@ function TrackDrawer({
     ] });
   }
   if (effectiveTab === "pick" && editorStage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             onClick: () => onBackToInstruments?.(),
@@ -1445,9 +1601,9 @@ function TrackDrawer({
             children: "\u2190 Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs text-sas-muted font-medium truncate flex-1", children: selectedInstrumentName ?? "Plugin" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-sas-muted font-medium truncate flex-1", children: selectedInstrumentName ?? "Plugin" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           onClick: () => onShowEditor?.(),
@@ -1459,10 +1615,10 @@ function TrackDrawer({
   }
   const isDefaultSelected = currentPluginId === null;
   const isSelected = (pluginId) => pluginId === currentPluginId;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2", children: [
     header,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "input",
         {
           type: "text",
@@ -1472,7 +1628,7 @@ function TrackDrawer({
           className: "sas-input flex-1 px-2 py-1 text-xs"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           onClick: () => onRefresh?.(),
@@ -1483,54 +1639,54 @@ function TrackDrawer({
         }
       )
     ] }),
-    isLoading && instruments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    isLoading && instruments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "button",
         {
           onClick: () => onSelect?.(SURGE_XT_DEFAULT_ID),
           className: `flex flex-col items-start px-2 py-1.5 rounded-sm border text-left transition-colors ${isDefaultSelected ? "border-sas-accent bg-sas-accent/20 text-sas-accent" : "border-sas-border bg-sas-panel-alt text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
           title: "Surge XT \u2014 Default instrument",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
               isDefaultSelected && "\u2713 ",
               "Surge XT"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: "Default" })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: "Default" })
           ]
         },
         "__surge-xt-default__"
       ),
       filtered.map((inst) => {
         const selected = isSelected(inst.pluginId);
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
             onClick: () => onSelect?.(inst.pluginId),
             className: `flex flex-col items-start px-2 py-1.5 rounded-sm border text-left transition-colors ${selected ? "border-sas-accent bg-sas-accent/20 text-sas-accent" : inst.missing ? "border-amber-500/50 bg-amber-500/10 text-amber-400 hover:border-amber-500" : "border-sas-border bg-sas-panel-alt text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
             title: `${inst.name} by ${inst.manufacturer} (${inst.type.toUpperCase()})${inst.missing ? " \u2014 MISSING" : ""}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
                 selected && "\u2713 ",
                 inst.name
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: inst.manufacturer || inst.type.toUpperCase() })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: inst.manufacturer || inst.type.toUpperCase() })
             ]
           },
           inst.pluginId
         );
       }),
-      filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-span-2 text-xs text-sas-muted/60 text-center py-2", children: search.trim() ? "No matches" : "No other plugins found" })
+      filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col-span-2 text-xs text-sas-muted/60 text-center py-2", children: search.trim() ? "No matches" : "No other plugins found" })
     ] })
   ] });
 }
 
 // src/components/ConfirmDialog.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/Modal.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Modal({
   open,
   onClose,
@@ -1540,7 +1696,7 @@ function Modal({
   closeOnEscape = true,
   initialFocusRef
 }) {
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (closeOnEscape && e.key === "Escape") {
@@ -1554,7 +1710,7 @@ function Modal({
   }, [open, onClose, closeOnEscape, initialFocusRef]);
   if (!open) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         className: "fixed inset-0 z-[1000] flex items-center justify-center bg-black/60",
@@ -1568,7 +1724,7 @@ function Modal({
 }
 
 // src/components/ConfirmDialog.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ConfirmDialog({
   open,
   title,
@@ -1580,8 +1736,8 @@ function ConfirmDialog({
   onCancel,
   testIdPrefix = "confirm-dialog"
 }) {
-  const cancelRef = (0, import_react6.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Modal, { open, onClose: onCancel, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  const cancelRef = (0, import_react7.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Modal, { open, onClose: onCancel, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "w-[360px] max-w-[90vw] flex flex-col rounded-md border border-sas-border bg-sas-panel shadow-xl",
@@ -1591,8 +1747,8 @@ function ConfirmDialog({
       "aria-label": title,
       "data-testid": `${testIdPrefix}-modal`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-4 py-3 border-b border-sas-border", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium text-sas-text", "data-testid": `${testIdPrefix}-title`, children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-4 py-3 border-b border-sas-border", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-medium text-sas-text", "data-testid": `${testIdPrefix}-title`, children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: "px-4 py-3 text-xs text-sas-muted leading-relaxed break-words",
@@ -1600,8 +1756,8 @@ function ConfirmDialog({
             children: message
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-end gap-2 px-4 py-3 border-t border-sas-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-end gap-2 px-4 py-3 border-t border-sas-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               ref: cancelRef,
@@ -1612,7 +1768,7 @@ function ConfirmDialog({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -1629,7 +1785,7 @@ function ConfirmDialog({
 }
 
 // src/components/LevelMeter.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var COLOR_GREEN = "#2BD576";
 var COLOR_ORANGE = "#F5A623";
 var COLOR_RED = "#FF4D5E";
@@ -1657,7 +1813,7 @@ var LevelMeter = ({
   const widthPct = active ? dbToPct(peakDb) : 0;
   const showPeak = peakHoldDb != null && active && peakHoldDb > -60;
   const peakHoldPct = showPeak ? dbToPct(peakHoldDb) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: `sas-level-meter ${className ?? ""}`,
@@ -1668,7 +1824,7 @@ var LevelMeter = ({
         gap: compact ? 0 : 6
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             style: {
@@ -1682,8 +1838,8 @@ var LevelMeter = ({
               minWidth: compact ? 0 : 60
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { position: "absolute", inset: 0, background: METER_GRADIENT } }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { position: "absolute", inset: 0, background: METER_GRADIENT } }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   style: {
@@ -1697,7 +1853,7 @@ var LevelMeter = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   "data-testid": `${id}-segments`,
@@ -1710,7 +1866,7 @@ var LevelMeter = ({
                   }
                 }
               ),
-              showPeak && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showPeak && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   "data-testid": `${id}-peak`,
@@ -1731,7 +1887,7 @@ var LevelMeter = ({
             ]
           }
         ),
-        !compact && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        !compact && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             style: {
@@ -1744,7 +1900,7 @@ var LevelMeter = ({
             children: active && peakDb > -120 ? `${peakDb.toFixed(0)} dB` : "\u2014"
           }
         ),
-        clipped && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        clipped && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             "data-testid": `${id}-clip`,
@@ -1769,7 +1925,7 @@ var LevelMeter = ({
 };
 
 // src/hooks/useTrackLevels.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var meterDiagRLast = /* @__PURE__ */ new Map();
 var POLL_INTERVAL_MS = 33;
 var HIDDEN_RECHECK_MS = 250;
@@ -1780,9 +1936,9 @@ function isHidden() {
   return typeof document !== "undefined" && document.hidden === true;
 }
 function useTrackLevels(host, enabled = true) {
-  const mapRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
-  const listenersRef = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
-  const handleRef = (0, import_react7.useRef)(null);
+  const mapRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
+  const listenersRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
+  const handleRef = (0, import_react8.useRef)(null);
   if (handleRef.current === null) {
     handleRef.current = {
       getLevel: (trackId) => mapRef.current.get(trackId) ?? null,
@@ -1794,7 +1950,7 @@ function useTrackLevels(host, enabled = true) {
       }
     };
   }
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const notify = () => {
       listenersRef.current.forEach((l) => l());
     };
@@ -1864,8 +2020,8 @@ function sameLevel(a, b) {
   return a.peakDb === b.peakDb && a.clipped === b.clipped;
 }
 function useTrackLevel(handle, trackId) {
-  const [level, setLevel] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const [level, setLevel] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
     if (!handle) {
       setLevel(null);
       return;
@@ -1889,11 +2045,11 @@ function sameMeter(a, b) {
   return a.active === b.active && a.clipped === b.clipped && a.peakDb === b.peakDb && Math.round(a.peakHoldDb * 2) === Math.round(b.peakHoldDb * 2);
 }
 function useTrackMeter(handle, trackId) {
-  const [view, setView] = (0, import_react7.useState)(IDLE_METER_VIEW);
-  const heldDbRef = (0, import_react7.useRef)(METER_FLOOR_DB);
-  const heldAtRef = (0, import_react7.useRef)(0);
-  const lastTickRef = (0, import_react7.useRef)(0);
-  (0, import_react7.useEffect)(() => {
+  const [view, setView] = (0, import_react8.useState)(IDLE_METER_VIEW);
+  const heldDbRef = (0, import_react8.useRef)(METER_FLOOR_DB);
+  const heldAtRef = (0, import_react8.useRef)(0);
+  const lastTickRef = (0, import_react8.useRef)(0);
+  (0, import_react8.useEffect)(() => {
     if (!handle) {
       heldDbRef.current = METER_FLOOR_DB;
       lastTickRef.current = 0;
@@ -1936,8 +2092,8 @@ function useTrackMeter(handle, trackId) {
   return view;
 }
 function useTransportPlaying(host) {
-  const [playing, setPlaying] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const [playing, setPlaying] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     if (!host) {
       setPlaying(false);
       return;
@@ -1965,7 +2121,7 @@ function useTransportPlaying(host) {
 }
 
 // src/components/TrackMeterStrip.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var TrackMeterStrip = ({
   levels,
   trackId,
@@ -1973,12 +2129,12 @@ var TrackMeterStrip = ({
   className
 }) => {
   const meter = useTrackMeter(levels, trackId);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       "data-testid": "sdk-track-meter",
       className: `w-full px-2 py-1 bg-sas-panel-alt border border-t-0 border-sas-border ${roundBottom ? "rounded-b-sm" : ""} ${className ?? ""}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         LevelMeter,
         {
           compact: true,
@@ -1994,7 +2150,7 @@ var TrackMeterStrip = ({
 };
 
 // src/components/VolumeSlider.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/utils/volume-conversion.ts
 var SLIDER_UNITY = 0.75;
@@ -2016,7 +2172,7 @@ function dbToSlider(db) {
 }
 
 // src/components/VolumeSlider.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function formatDb(value) {
   const db = sliderToDb(value);
   if (db <= -60) return "-\u221E dB";
@@ -2024,12 +2180,12 @@ function formatDb(value) {
   return `${sign}${db.toFixed(1)} dB`;
 }
 function useDebouncedCallback(callback, delay) {
-  const timeoutRef = (0, import_react8.useRef)(null);
-  const callbackRef = (0, import_react8.useRef)(callback);
-  (0, import_react8.useEffect)(() => {
+  const timeoutRef = (0, import_react9.useRef)(null);
+  const callbackRef = (0, import_react9.useRef)(callback);
+  (0, import_react9.useEffect)(() => {
     callbackRef.current = callback;
   }, [callback]);
-  const debouncedCallback = (0, import_react8.useCallback)(
+  const debouncedCallback = (0, import_react9.useCallback)(
     (...args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -2040,7 +2196,7 @@ function useDebouncedCallback(callback, delay) {
     },
     [delay]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -2055,15 +2211,15 @@ var VolumeSlider = ({
   disabled = false,
   className = ""
 }) => {
-  const [localValue, setLocalValue] = (0, import_react8.useState)(value);
-  const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [localValue, setLocalValue] = (0, import_react9.useState)(value);
+  const [isDragging, setIsDragging] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     if (!isDragging) {
       setLocalValue(value);
     }
   }, [value, isDragging]);
   const debouncedOnChange = useDebouncedCallback(onChange, 50);
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react9.useCallback)(
     (e) => {
       const newValue = parseFloat(e.target.value);
       setLocalValue(newValue);
@@ -2071,19 +2227,19 @@ var VolumeSlider = ({
     },
     [debouncedOnChange]
   );
-  const handleMouseDown = (0, import_react8.useCallback)(() => {
+  const handleMouseDown = (0, import_react9.useCallback)(() => {
     setIsDragging(true);
   }, []);
-  const handleMouseUp = (0, import_react8.useCallback)(() => {
+  const handleMouseUp = (0, import_react9.useCallback)(() => {
     setIsDragging(false);
     onChange(localValue);
   }, [localValue, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       className: `flex items-center ${className}`,
       title: `Volume: ${formatDb(localValue)}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "input",
         {
           type: "range",
@@ -2123,8 +2279,8 @@ var VolumeSlider = ({
 };
 
 // src/components/PanSlider.tsx
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function toPanDisplay(value) {
   if (Math.abs(value) < 0.02) {
     return "Center";
@@ -2133,12 +2289,12 @@ function toPanDisplay(value) {
   return value < 0 ? `L${percent}` : `R${percent}`;
 }
 function useDebouncedCallback2(callback, delay) {
-  const timeoutRef = (0, import_react9.useRef)(null);
-  const callbackRef = (0, import_react9.useRef)(callback);
-  (0, import_react9.useEffect)(() => {
+  const timeoutRef = (0, import_react10.useRef)(null);
+  const callbackRef = (0, import_react10.useRef)(callback);
+  (0, import_react10.useEffect)(() => {
     callbackRef.current = callback;
   }, [callback]);
-  const debouncedCallback = (0, import_react9.useCallback)(
+  const debouncedCallback = (0, import_react10.useCallback)(
     (...args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -2149,7 +2305,7 @@ function useDebouncedCallback2(callback, delay) {
     },
     [delay]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -2164,15 +2320,15 @@ var PanSlider = ({
   disabled = false,
   className = ""
 }) => {
-  const [localValue, setLocalValue] = (0, import_react9.useState)(value);
-  const [isDragging, setIsDragging] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [localValue, setLocalValue] = (0, import_react10.useState)(value);
+  const [isDragging, setIsDragging] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     if (!isDragging) {
       setLocalValue(value);
     }
   }, [value, isDragging]);
   const debouncedOnChange = useDebouncedCallback2(onChange, 50);
-  const handleChange = (0, import_react9.useCallback)(
+  const handleChange = (0, import_react10.useCallback)(
     (e) => {
       const newValue = parseFloat(e.target.value);
       setLocalValue(newValue);
@@ -2180,23 +2336,23 @@ var PanSlider = ({
     },
     [debouncedOnChange]
   );
-  const handleMouseDown = (0, import_react9.useCallback)(() => {
+  const handleMouseDown = (0, import_react10.useCallback)(() => {
     setIsDragging(true);
   }, []);
-  const handleMouseUp = (0, import_react9.useCallback)(() => {
+  const handleMouseUp = (0, import_react10.useCallback)(() => {
     setIsDragging(false);
     onChange(localValue);
   }, [localValue, onChange]);
-  const handleDoubleClick = (0, import_react9.useCallback)(() => {
+  const handleDoubleClick = (0, import_react10.useCallback)(() => {
     setLocalValue(0);
     onChange(0);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       className: `flex items-center ${className}`,
       title: `Pan: ${toPanDisplay(localValue)}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "input",
         {
           type: "range",
@@ -2237,8 +2393,8 @@ var PanSlider = ({
 };
 
 // src/components/SorceryProgressBar.tsx
-var import_react10 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function calculateTimeBasedTarget(elapsedMs, estimatedDurationMs) {
   const t = elapsedMs / estimatedDurationMs;
   if (t <= 0) return 0;
@@ -2283,20 +2439,20 @@ function SorceryProgressBar({
   onProgressChange,
   estimatedDurationMs
 }) {
-  const [progress, setProgress] = (0, import_react10.useState)(initialProgress);
-  const timerRef = (0, import_react10.useRef)(null);
-  const isLoadingRef = (0, import_react10.useRef)(false);
-  const hasStartedRef = (0, import_react10.useRef)(false);
-  const startTimeRef = (0, import_react10.useRef)(0);
-  const onProgressChangeRef = (0, import_react10.useRef)(onProgressChange);
-  const onCompleteRef = (0, import_react10.useRef)(onComplete);
+  const [progress, setProgress] = (0, import_react11.useState)(initialProgress);
+  const timerRef = (0, import_react11.useRef)(null);
+  const isLoadingRef = (0, import_react11.useRef)(false);
+  const hasStartedRef = (0, import_react11.useRef)(false);
+  const startTimeRef = (0, import_react11.useRef)(0);
+  const onProgressChangeRef = (0, import_react11.useRef)(onProgressChange);
+  const onCompleteRef = (0, import_react11.useRef)(onComplete);
   onProgressChangeRef.current = onProgressChange;
   onCompleteRef.current = onComplete;
-  const initialProgressRef = (0, import_react10.useRef)(initialProgress);
+  const initialProgressRef = (0, import_react11.useRef)(initialProgress);
   initialProgressRef.current = initialProgress;
-  const estimatedDurationMsRef = (0, import_react10.useRef)(estimatedDurationMs);
+  const estimatedDurationMsRef = (0, import_react11.useRef)(estimatedDurationMs);
   estimatedDurationMsRef.current = estimatedDurationMs;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const wasLoading = isLoadingRef.current;
     isLoadingRef.current = isLoading;
     if (isLoading && !wasLoading) {
@@ -2358,12 +2514,12 @@ function SorceryProgressBar({
   const displayProgress = Math.floor(progress);
   const isComplete = !isLoading && progress === 100;
   const transitionDuration = progress < 50 ? "300ms" : progress < 80 ? "500ms" : "700ms";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: `relative w-full ${heightClass} bg-sas-panel-alt border border-sas-border rounded-sm overflow-hidden shadow-inner`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: `
@@ -2381,13 +2537,13 @@ function SorceryProgressBar({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: isLoading && progress < 100 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "font-mono text-xs text-sas-accent font-bold drop-shadow-md tracking-wider", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: isLoading && progress < 100 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "font-mono text-xs text-sas-accent font-bold drop-shadow-md tracking-wider", children: [
           statusText,
           " ",
           displayProgress,
           "%"
-        ] }) : isComplete ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-mono text-xs text-sas-text font-bold drop-shadow-md tracking-wider", children: completeText }) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ] }) : isComplete ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-mono text-xs text-sas-text font-bold drop-shadow-md tracking-wider", children: completeText }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: "absolute inset-0 pointer-events-none opacity-10",
@@ -2473,7 +2629,7 @@ function parseLLMNoteResponse(content) {
 }
 
 // src/components/TrackRow.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function TrackRow({
   track,
   prompt,
@@ -2533,7 +2689,9 @@ function TrackRow({
   levels
 }) {
   const { muted: isMuted, solo: isSoloed, volume: currentVolume, pan: currentPan } = runtimeState;
-  const [confirmDelete, setConfirmDelete] = import_react11.default.useState(false);
+  const [confirmDelete, setConfirmDelete] = import_react12.default.useState(false);
+  const freeze = useTrackFreeze(externalFxHost, track.id);
+  const freezeBadge = freeze.state?.frozen === true ? freeze.state.missingDeps.length > 0 ? "missing" : freeze.state.stale ? "stale" : "frozen" : null;
   const needsGeneration = !!(prompt?.trim() && !hasMidi && !isGenerating);
   const hasFxActive = Object.values(fxDetailState).some(
     (d) => d.enabled
@@ -2543,8 +2701,8 @@ function TrackRow({
   const handleKeyDown = promptEnterToGenerate(() => onGenerate?.(), !onGenerate);
   const borderColorStyle = needsGeneration ? void 0 : accentColor;
   const borderClass = needsGeneration ? "border-amber-400 animate-pulse" : "border-sas-border";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { "data-testid": "sdk-track-row-wrapper", className: "w-full", ...drag?.rowProps ?? {}, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-testid": "sdk-track-row-wrapper", className: "w-full", ...drag?.rowProps ?? {}, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         "data-testid": "sdk-track-row",
@@ -2554,7 +2712,7 @@ function TrackRow({
           borderLeftWidth: "3px"
         },
         children: [
-          drag && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          drag && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               "data-testid": "sdk-drag-handle",
@@ -2562,10 +2720,10 @@ function TrackRow({
               className: "flex-shrink-0 self-stretch flex items-center -ml-0.5 pr-0.5 text-sas-muted/40 hover:text-sas-muted cursor-grab active:cursor-grabbing relative z-30",
               title: "Drag to reorder",
               "aria-label": "Drag to reorder track",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react.GripVertical, { className: "w-3.5 h-3.5", strokeWidth: 2 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react.GripVertical, { className: "w-3.5 h-3.5", strokeWidth: 2 })
             }
           ),
-          isGenerating && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute left-0 top-0 bottom-0 right-44 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          isGenerating && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute left-0 top-0 bottom-0 right-44 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             SorceryProgressBar,
             {
               isLoading: true,
@@ -2576,14 +2734,14 @@ function TrackRow({
               estimatedDurationMs: estimatedGenerationMs
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               "data-testid": "sdk-track-content",
               className: `flex flex-col flex-1 min-w-0 relative z-10 transition-opacity ${soloedOut ? "opacity-40" : ""}`,
               title: soloedOut ? "Silenced \u2014 another track is soloed" : void 0,
               children: [
-                contentSlot ? contentSlot : onPromptChange ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                contentSlot ? contentSlot : onPromptChange ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2596,10 +2754,10 @@ function TrackRow({
                     className: "sas-input w-full px-2 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
-                  track.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] text-sas-muted/60 truncate pl-2 flex-shrink-0 max-w-[80px]", title: track.name, children: track.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "vol:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
+                  track.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[10px] text-sas-muted/60 truncate pl-2 flex-shrink-0 max-w-[80px]", title: track.name, children: track.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "vol:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     VolumeSlider,
                     {
                       value: currentVolume,
@@ -2608,8 +2766,8 @@ function TrackRow({
                       className: "flex-1 min-w-[40px]"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "pan:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "pan:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     PanSlider,
                     {
                       value: currentPan,
@@ -2622,27 +2780,27 @@ function TrackRow({
               ]
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          error && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               "data-testid": "sdk-error-indicator",
               className: "flex-shrink-0 relative z-10 self-stretch flex items-center px-1 group cursor-help",
               title: error,
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   import_lucide_react.AlertCircle,
                   {
                     className: "w-5 h-5 text-red-500 animate-pulse",
                     strokeWidth: 2.5
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-red-900/95 text-red-100 text-xs rounded shadow-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 max-w-[200px] truncate", children: error })
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-red-900/95 text-red-100 text-xs rounded shadow-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 max-w-[200px] truncate", children: error })
               ] })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-0.5 flex-shrink-0 relative z-30 justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-1 items-center", children: [
-              onGenerate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-0.5 flex-shrink-0 relative z-30 justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-1 items-center", children: [
+              onGenerate && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-generate-button",
@@ -2653,7 +2811,7 @@ function TrackRow({
                   children: "Create"
                 }
               ),
-              onCopy && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              onCopy && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-copy-button",
@@ -2664,7 +2822,7 @@ function TrackRow({
                   children: "Copy"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-mute-button",
@@ -2674,7 +2832,7 @@ function TrackRow({
                   children: "M"
                 }
               ),
-              onDelete && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              onDelete && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-delete-button",
@@ -2685,8 +2843,8 @@ function TrackRow({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-1 items-center", children: [
-              onShuffle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-1 items-center", children: [
+              onShuffle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-shuffle-button",
@@ -2697,7 +2855,16 @@ function TrackRow({
                   children: "Shuffle"
                 }
               ),
-              onToggleFxDrawer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              freezeBadge && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  "data-testid": "sdk-track-freeze-badge",
+                  className: `px-1 py-0.5 text-xs leading-none rounded-sm self-center ${freezeBadge === "frozen" ? "text-sas-accent" : "text-amber-400"}`,
+                  title: freezeBadge === "frozen" ? "Frozen \u2014 playing the rendered stem (mixer stays live)" : freezeBadge === "stale" ? "Frozen (stale) \u2014 sound edited since the stem rendered; re-freeze in the drawer" : `Frozen \u2014 plugin(s) missing on this machine: ${freeze.state?.missingDeps.map((d) => d.name).join(", ")}`,
+                  children: freezeBadge === "frozen" ? "\u2744" : freezeBadge === "stale" ? "\u26A0\u2744" : "\u2744!"
+                }
+              ),
+              onToggleFxDrawer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-fx-button",
@@ -2708,7 +2875,7 @@ function TrackRow({
                   children: "FX"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-solo-button",
@@ -2719,7 +2886,7 @@ function TrackRow({
                   children: "S"
                 }
               ),
-              onToggleDrawer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              onToggleDrawer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-plugin-button",
@@ -2727,7 +2894,7 @@ function TrackRow({
                   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" : soundTabOpen ? "bg-sas-accent border-sas-accent text-sas-bg" : instrumentMissing ? "bg-amber-500/20 text-amber-400 hover:bg-amber-500/40" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"}`,
                   title: `Sound \u2014 presets & history${instrumentMissing ? " (instrument missing)" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react.ChevronDown, { className: "w-3 h-3", strokeWidth: 2.5 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react.ChevronDown, { className: "w-3 h-3", strokeWidth: 2.5 })
                 }
               )
             ] })
@@ -2735,13 +2902,13 @@ function TrackRow({
         ]
       }
     ),
-    levels && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TrackMeterStrip, { levels, trackId: track.id, roundBottom: !drawerOpen }),
-    drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    levels && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TrackMeterStrip, { levels, trackId: track.id, roundBottom: !drawerOpen }),
+    drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         "data-testid": "sdk-track-drawer",
         className: "border border-t-0 border-sas-border bg-sas-bg rounded-b-sm px-3 py-2 max-h-[260px] overflow-y-auto",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           TrackDrawer,
           {
             activeTab: drawerTab,
@@ -2752,6 +2919,7 @@ function TrackRow({
             onFxPresetChange,
             onFxDryWetChange,
             externalFxHost,
+            freeze,
             fxDisabled: isGenerating,
             instruments: availableInstruments,
             currentPluginId: currentInstrumentPluginId ?? null,
@@ -2778,13 +2946,13 @@ function TrackRow({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ConfirmDialog,
       {
         open: confirmDelete,
         title: "Delete track?",
-        message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sas-text", children: track.name?.trim() || "This track" }),
+        message: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sas-text", children: track.name?.trim() || "This track" }),
           " will be permanently removed from this scene. This cannot be undone."
         ] }),
         confirmLabel: "Delete",
@@ -2800,13 +2968,13 @@ function TrackRow({
 }
 
 // src/components/CrossfadeTrackRow.tsx
-var import_react12 = __toESM(require("react"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react13 = __toESM(require("react"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function LayerCaption({ tag, layer }) {
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
       "\xB7 ",
       layer.soundLabel
     ] })
@@ -2825,8 +2993,8 @@ function CrossfadeTrackRow({
   levels,
   accentColor = "#9333EA"
 }) {
-  const [confirmDelete, setConfirmDelete] = import_react12.default.useState(false);
-  const renderLayer = (layer, slot, tag) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const [confirmDelete, setConfirmDelete] = import_react13.default.useState(false);
+  const renderLayer = (layer, slot, tag) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     TrackRow,
     {
       track: { id: layer.trackId, name: "", role: layer.role },
@@ -2836,23 +3004,23 @@ function CrossfadeTrackRow({
       drawerTab: "fx",
       levels,
       accentColor,
-      contentSlot: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LayerCaption, { tag, layer }),
+      contentSlot: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LayerCaption, { tag, layer }),
       onMuteToggle,
       onSoloToggle,
       onVolumeChange: (v) => onVolumeChange(slot, v),
       onPanChange: (p) => onPanChange(slot, p)
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       "data-testid": "crossfade-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", { className: "text-[10px] font-bold uppercase tracking-wide", style: { color: accentColor }, children: "\u21C4 Crossfade" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", style: { color: accentColor }, children: "\u21C4 Crossfade" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
               "data-testid": "crossfade-delete-button",
@@ -2865,8 +3033,8 @@ function CrossfadeTrackRow({
           )
         ] }),
         renderLayer(origin, "origin", "Origin"),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "crossfade-slider-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "crossfade-slider-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
@@ -2874,7 +3042,7 @@ function CrossfadeTrackRow({
               children: origin.sourceName ?? origin.name
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "range",
@@ -2890,7 +3058,7 @@ function CrossfadeTrackRow({
               "aria-label": "Crossfade position"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
@@ -2900,12 +3068,12 @@ function CrossfadeTrackRow({
           )
         ] }),
         renderLayer(target, "target", "Target"),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           ConfirmDialog,
           {
             open: confirmDelete,
             title: "Delete crossfade?",
-            message: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "This crossfade pair (both layers) will be permanently removed from this scene. This cannot be undone." }),
+            message: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "This crossfade pair (both layers) will be permanently removed from this scene. This cannot be undone." }),
             confirmLabel: "Delete",
             onConfirm: () => {
               setConfirmDelete(false);
@@ -3178,22 +3346,22 @@ function defaultFadeGesture(role) {
 }
 
 // src/components/FadeTrackRow.tsx
-var import_react13 = __toESM(require("react"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function FadeCaption({
   layer,
   direction,
   gesture
 }) {
   const tag = direction === "in" ? "Fade in" : "Fade out";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
       "\xB7 ",
       layer.soundLabel
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", title: `Fade gesture: ${gesture}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", title: `Fade gesture: ${gesture}`, children: [
       "\xB7 ",
       gesture
     ] })
@@ -3214,20 +3382,20 @@ function FadeTrackRow({
   levels,
   accentColor = "#9333EA"
 }) {
-  const [confirmDelete, setConfirmDelete] = import_react13.default.useState(false);
+  const [confirmDelete, setConfirmDelete] = import_react14.default.useState(false);
   const leftLabel = direction === "in" ? "(silent)" : layer.sourceName ?? layer.name;
   const rightLabel = direction === "in" ? layer.sourceName ?? layer.name : "(silent)";
   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__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
               "data-testid": "fade-direction-badge",
@@ -3236,7 +3404,7 @@ function FadeTrackRow({
               children: badge
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               "data-testid": "fade-delete-button",
@@ -3248,7 +3416,7 @@ function FadeTrackRow({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           TrackRow,
           {
             track: { id: layer.trackId, name: "", role: layer.role },
@@ -3258,15 +3426,15 @@ function FadeTrackRow({
             drawerTab: "fx",
             levels,
             accentColor,
-            contentSlot: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FadeCaption, { layer, direction, gesture }),
+            contentSlot: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FadeCaption, { layer, direction, gesture }),
             onMuteToggle,
             onSoloToggle,
             onVolumeChange,
             onPanChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "fade-slider-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "fade-slider-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
@@ -3274,7 +3442,7 @@ function FadeTrackRow({
               children: leftLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "input",
             {
               type: "range",
@@ -3290,7 +3458,7 @@ function FadeTrackRow({
               "aria-label": "Fade position"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
@@ -3299,12 +3467,12 @@ function FadeTrackRow({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           ConfirmDialog,
           {
             open: confirmDelete,
             title: "Delete fade?",
-            message: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "This fade track will be permanently removed from this scene. This cannot be undone." }),
+            message: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: "This fade track will be permanently removed from this scene. This cannot be undone." }),
             confirmLabel: "Delete",
             onConfirm: () => {
               setConfirmDelete(false);
@@ -3320,21 +3488,21 @@ function FadeTrackRow({
 }
 
 // src/components/GroupFadeTrackRow.tsx
-var import_react14 = __toESM(require("react"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react15 = __toESM(require("react"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MemberCaption({
   member,
   direction
 }) {
   const tag = direction === "in" ? "Fade in" : "Fade out";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
-    member.memberLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: member.memberLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[11px] text-sas-text truncate", title: member.sourceName ?? member.name, children: member.sourceName ?? member.name }),
-    member.soundLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: member.soundLabel, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
+    member.memberLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: member.memberLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[11px] text-sas-text truncate", title: member.sourceName ?? member.name, children: member.sourceName ?? member.name }),
+    member.soundLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: member.soundLabel, children: [
       "\xB7 ",
       member.soundLabel
     ] }),
-    !member.memberLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: [
+    !member.memberLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: [
       "\xB7 ",
       tag
     ] })
@@ -3357,22 +3525,22 @@ function GroupFadeTrackRow({
   levels,
   accentColor = "#9333EA"
 }) {
-  const [confirmDelete, setConfirmDelete] = import_react14.default.useState(false);
+  const [confirmDelete, setConfirmDelete] = import_react15.default.useState(false);
   const allMuted = members.length > 0 && members.every((m) => m.runtimeState.muted);
   const allSolo = members.length > 0 && members.every((m) => m.runtimeState.solo);
   const badge = direction === "in" ? "\u2197 Fade in" : "\u2198 Fade out";
   const leftLabel = direction === "in" ? "(silent)" : groupLabel;
   const rightLabel = direction === "in" ? groupLabel : "(silent)";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       "data-testid": "group-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_runtime15.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60 gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60 gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "span",
               {
                 "data-testid": "group-fade-direction-badge",
@@ -3381,7 +3549,7 @@ function GroupFadeTrackRow({
                 children: badge
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "span",
               {
                 "data-testid": "group-fade-label",
@@ -3391,8 +3559,8 @@ function GroupFadeTrackRow({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 "data-testid": "group-fade-mute-button",
@@ -3402,7 +3570,7 @@ function GroupFadeTrackRow({
                 children: "M"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 "data-testid": "group-fade-solo-button",
@@ -3412,7 +3580,7 @@ function GroupFadeTrackRow({
                 children: "S"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 "data-testid": "group-fade-delete-button",
@@ -3425,7 +3593,7 @@ function GroupFadeTrackRow({
             )
           ] })
         ] }),
-        members.map((member) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        members.map((member) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           TrackRow,
           {
             track: { id: member.trackId, name: "", role: member.role },
@@ -3435,7 +3603,7 @@ function GroupFadeTrackRow({
             drawerTab: "fx",
             levels,
             accentColor,
-            contentSlot: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemberCaption, { member, direction }),
+            contentSlot: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemberCaption, { member, direction }),
             onMuteToggle: () => onMemberMuteToggle(member.trackId),
             onSoloToggle: () => onMemberSoloToggle(member.trackId),
             onVolumeChange: (vol) => onMemberVolumeChange(member.trackId, vol),
@@ -3443,8 +3611,8 @@ function GroupFadeTrackRow({
           },
           member.trackId
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "group-fade-slider-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "group-fade-slider-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
@@ -3452,7 +3620,7 @@ function GroupFadeTrackRow({
               children: leftLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "input",
             {
               type: "range",
@@ -3468,7 +3636,7 @@ function GroupFadeTrackRow({
               "aria-label": "Group fade position"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
@@ -3477,12 +3645,12 @@ function GroupFadeTrackRow({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           ConfirmDialog,
           {
             open: confirmDelete,
             title: "Delete group fade?",
-            message: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            message: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
               "All ",
               members.length,
               " member tracks of this fade will be permanently removed from this scene. This cannot be undone."
@@ -3502,8 +3670,8 @@ function GroupFadeTrackRow({
 }
 
 // src/components/FadeModal.tsx
-var import_react15 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function shortId(dbId) {
   return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
 }
@@ -3546,7 +3714,7 @@ function OrphanRow({
 }) {
   const primary = track.prompt?.trim() || track.name;
   const meta = [track.role, shortId(track.dbId), gesture].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "button",
     {
       type: "button",
@@ -3558,8 +3726,8 @@ function OrphanRow({
       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 })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
+        meta && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
       ]
     }
   );
@@ -3576,14 +3744,14 @@ function FadeModal({
   onCreate,
   testIdPrefix = "fade-modal"
 }) {
-  const [load, setLoad] = (0, import_react15.useState)({ status: "loading" });
-  const [selectedDbId, setSelectedDbId] = (0, import_react15.useState)("");
-  const [isCreating, setIsCreating] = (0, import_react15.useState)(false);
-  const [error, setError] = (0, import_react15.useState)(null);
-  const [fromName, setFromName] = (0, import_react15.useState)(null);
-  const [toName, setToName] = (0, import_react15.useState)(null);
-  const cancelRef = (0, import_react15.useRef)(null);
-  const refresh = (0, import_react15.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react16.useState)({ status: "loading" });
+  const [selectedDbId, setSelectedDbId] = (0, import_react16.useState)("");
+  const [isCreating, setIsCreating] = (0, import_react16.useState)(false);
+  const [error, setError] = (0, import_react16.useState)(null);
+  const [fromName, setFromName] = (0, import_react16.useState)(null);
+  const [toName, setToName] = (0, import_react16.useState)(null);
+  const cancelRef = (0, import_react16.useRef)(null);
+  const refresh = (0, import_react16.useCallback)(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support fades." });
       return;
@@ -3603,7 +3771,7 @@ function FadeModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
     }
   }, [host, fromSceneId, toSceneId]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (open) {
       setError(null);
       setIsCreating(false);
@@ -3611,29 +3779,29 @@ function FadeModal({
       void refresh();
     }
   }, [open, refresh]);
-  const excludeSet = (0, import_react15.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const { fadeOut, fadeIn } = (0, import_react15.useMemo)(
+  const excludeSet = (0, import_react16.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const { fadeOut, fadeIn } = (0, import_react16.useMemo)(
     () => load.status === "ready" ? computeOrphans(load.from, load.to, excludeSet) : { fadeOut: [], fadeIn: [] },
     [load, excludeSet]
   );
-  const allOrphans = (0, import_react15.useMemo)(
+  const allOrphans = (0, import_react16.useMemo)(
     () => [
       ...fadeOut.map((t) => ({ track: t, direction: "out" })),
       ...fadeIn.map((t) => ({ track: t, direction: "in" }))
     ],
     [fadeOut, fadeIn]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.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_react15.useCallback)(() => {
+  const handleClose = (0, import_react16.useCallback)(() => {
     if (!isCreating) onClose();
   }, [isCreating, onClose]);
-  const handleCreate = (0, import_react15.useCallback)(async () => {
+  const handleCreate = (0, import_react16.useCallback)(async () => {
     if (!selected) return;
     setIsCreating(true);
     setError(null);
@@ -3654,16 +3822,16 @@ function FadeModal({
   if (!open) return null;
   const renderSection = (heading, list, section) => {
     if (list.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "block", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: heading }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "block", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime16.jsx)(
+          children: list.map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             OrphanRow,
             {
               track: t,
@@ -3679,32 +3847,32 @@ function FadeModal({
       )
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime16.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add fade" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add fade" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
           "Tracks with no counterpart between",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
           " and",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.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_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" && (allOrphans.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
+        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.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_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
           renderSection(`Fade out${fromLabel ? ` (from ${fromLabel})` : ""}`, fadeOut, "out"),
           renderSection(`Fade in${toLabel ? ` (to ${toLabel})` : ""}`, fadeIn, "in")
         ] })),
-        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)(
+        error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               ref: cancelRef,
@@ -3715,7 +3883,7 @@ function FadeModal({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               "data-testid": `${testIdPrefix}-confirm`,
@@ -3732,8 +3900,8 @@ function FadeModal({
 }
 
 // src/components/ImportTrackModal.tsx
-var import_react16 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ImportTrackModal({
   host,
   open,
@@ -3745,10 +3913,10 @@ function ImportTrackModal({
   onPick,
   onPortTrack
 }) {
-  const [load, setLoad] = (0, import_react16.useState)({ status: "loading" });
-  const [selectedSceneId, setSelectedSceneId] = (0, import_react16.useState)(null);
-  const [importingTrackId, setImportingTrackId] = (0, import_react16.useState)(null);
-  const refresh = (0, import_react16.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react17.useState)({ status: "loading" });
+  const [selectedSceneId, setSelectedSceneId] = (0, import_react17.useState)(null);
+  const [importingTrackId, setImportingTrackId] = (0, import_react17.useState)(null);
+  const refresh = (0, import_react17.useCallback)(async () => {
     if (!host.listImportableTracks) {
       setLoad({ status: "error", message: "This host does not support importing tracks." });
       return;
@@ -3764,14 +3932,14 @@ function ImportTrackModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load scenes." });
     }
   }, [host, mode, onPortTrack]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (open) {
       setSelectedSceneId(null);
       setImportingTrackId(null);
       void refresh();
     }
   }, [open, refresh]);
-  const handleImport = (0, import_react16.useCallback)(
+  const handleImport = (0, import_react17.useCallback)(
     async (track, sourceSceneId, sceneName, isSameScene) => {
       if (isSameScene && onPortTrack) {
         if (!track.importable) return;
@@ -3812,16 +3980,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_runtime17.jsx)(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
-            selectedScene && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
+            selectedScene && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "button",
               {
                 className: "text-sas-muted hover:text-sas-accent text-xs",
@@ -3830,9 +3998,9 @@ function ImportTrackModal({
                 children: "\u2190"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
               className: "text-sas-muted hover:text-sas-accent text-sm",
@@ -3842,30 +4010,30 @@ function ImportTrackModal({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "overflow-y-auto p-2 flex-1", children: [
-          load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.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_runtime17.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_runtime17.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "overflow-y-auto p-2 flex-1", children: [
+          load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.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_runtime18.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_runtime18.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsx)("span", { className: "truncate", children: scene.sceneName }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-sas-muted", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate", children: scene.sceneName }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-sas-muted", children: [
                   scene.tracks.length,
                   " \u2192"
                 ] })
               ]
             }
           ) }, scene.sceneId)) }),
-          selectedScene && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-track-list`, children: selectedScene.tracks.map((track) => {
+          selectedScene && /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime18.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"}`,
@@ -3875,14 +4043,14 @@ function ImportTrackModal({
                 "data-testid": `${testIdPrefix}-track`,
                 "data-importable": mode === "sound" || track.importable ? "true" : "false",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "truncate", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "truncate", children: [
                     track.name,
-                    track.role ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-sas-muted", children: [
+                    track.role ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-sas-muted", children: [
                       " \xB7 ",
                       track.role
                     ] }) : null
                   ] }),
-                  busy ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sas-muted", children: "\u2298" }) : null
+                  busy ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sas-muted", children: "\u2298" }) : null
                 ]
               }
             ) }, track.dbId);
@@ -3894,8 +4062,8 @@ function ImportTrackModal({
 }
 
 // src/components/CrossfadeModal.tsx
-var import_react17 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function shortId2(dbId) {
   return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
 }
@@ -3908,7 +4076,7 @@ function CandidateRow({
 }) {
   const primary = track.prompt?.trim() || track.name;
   const meta = [track.role, shortId2(track.dbId)].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       type: "button",
@@ -3920,8 +4088,8 @@ function CandidateRow({
       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_runtime18.jsx)("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
-        meta && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
+        meta && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
       ]
     }
   );
@@ -3938,15 +4106,15 @@ function CrossfadeModal({
   onCreate,
   testIdPrefix = "crossfade-modal"
 }) {
-  const [load, setLoad] = (0, import_react17.useState)({ status: "loading" });
-  const [originDbId, setOriginDbId] = (0, import_react17.useState)("");
-  const [targetDbId, setTargetDbId] = (0, import_react17.useState)("");
-  const [isCreating, setIsCreating] = (0, import_react17.useState)(false);
-  const [error, setError] = (0, import_react17.useState)(null);
-  const [fromName, setFromName] = (0, import_react17.useState)(null);
-  const [toName, setToName] = (0, import_react17.useState)(null);
-  const cancelRef = (0, import_react17.useRef)(null);
-  const refresh = (0, import_react17.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react18.useState)({ status: "loading" });
+  const [originDbId, setOriginDbId] = (0, import_react18.useState)("");
+  const [targetDbId, setTargetDbId] = (0, import_react18.useState)("");
+  const [isCreating, setIsCreating] = (0, import_react18.useState)(false);
+  const [error, setError] = (0, import_react18.useState)(null);
+  const [fromName, setFromName] = (0, import_react18.useState)(null);
+  const [toName, setToName] = (0, import_react18.useState)(null);
+  const cancelRef = (0, import_react18.useRef)(null);
+  const refresh = (0, import_react18.useCallback)(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support crossfade tracks." });
       return;
@@ -3966,7 +4134,7 @@ function CrossfadeModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
     }
   }, [host, fromSceneId, toSceneId]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (open) {
       setError(null);
       setIsCreating(false);
@@ -3975,21 +4143,21 @@ function CrossfadeModal({
       void refresh();
     }
   }, [open, refresh]);
-  const excludeSet = (0, import_react17.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const originCandidates = (0, import_react17.useMemo)(
+  const excludeSet = (0, import_react18.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originCandidates = (0, import_react18.useMemo)(
     () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const targetCandidates = (0, import_react17.useMemo)(
+  const targetCandidates = (0, import_react18.useMemo)(
     () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!originCandidates.some((t) => t.dbId === originDbId)) {
       setOriginDbId(originCandidates[0]?.dbId ?? "");
     }
   }, [originCandidates, originDbId]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!targetCandidates.some((t) => t.dbId === targetDbId)) {
       setTargetDbId(targetCandidates[0]?.dbId ?? "");
     }
@@ -3997,10 +4165,10 @@ function CrossfadeModal({
   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_react17.useCallback)(() => {
+  const handleClose = (0, import_react18.useCallback)(() => {
     if (!isCreating) onClose();
   }, [isCreating, onClose]);
-  const handleCreate = (0, import_react17.useCallback)(async () => {
+  const handleCreate = (0, import_react18.useCallback)(async () => {
     if (!originTrack || !targetTrack) return;
     setIsCreating(true);
     setError(null);
@@ -4018,26 +4186,26 @@ function CrossfadeModal({
   const fromLabel = fromName ?? fromSceneName ?? null;
   const toLabel = toName ?? toSceneName ?? null;
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime18.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add crossfade" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add crossfade" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
           "Bridge a track from",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
           " into one from",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime18.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
-        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsxs)(
+        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
+        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsxs)(
           "div",
           {
             className: "text-xs text-sas-muted py-4 text-center",
@@ -4048,20 +4216,20 @@ function CrossfadeModal({
               ". Add one (or free one from another crossfade) first."
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
               "Origin ",
               fromLabel ? `(${fromLabel})` : "(top)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "div",
               {
                 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_runtime18.jsx)(
+                children: originCandidates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   CandidateRow,
                   {
                     track: t,
@@ -4075,23 +4243,23 @@ function CrossfadeModal({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
               "Target ",
               toLabel ? `(${toLabel})` : "(bottom)"
             ] }),
-            targetCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "text-xs text-sas-danger mt-0.5", "data-testid": `${testIdPrefix}-empty-target`, children: [
+            targetCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime18.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "div",
               {
                 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_runtime18.jsx)(
+                children: targetCandidates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   CandidateRow,
                   {
                     track: t,
@@ -4106,9 +4274,9 @@ function CrossfadeModal({
             )
           ] })
         ] })),
-        error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "button",
             {
               ref: cancelRef,
@@ -4119,7 +4287,7 @@ function CrossfadeModal({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "button",
             {
               "data-testid": `${testIdPrefix}-confirm`,
@@ -4136,10 +4304,10 @@ function CrossfadeModal({
 }
 
 // src/components/TransitionDesigner.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/hooks/useTrackReorder.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function moveItem(arr, from, to) {
   const next = arr.slice();
   if (from === to || from < 0 || to < 0 || from >= next.length || to >= next.length) {
@@ -4156,12 +4324,12 @@ function useTrackReorder({
   getId,
   onError
 }) {
-  const [draggingIndex, setDraggingIndex] = (0, import_react18.useState)(null);
-  const [dragOverIndex, setDragOverIndex] = (0, import_react18.useState)(null);
-  const fromRef = (0, import_react18.useRef)(null);
-  const itemsRef = (0, import_react18.useRef)(items);
+  const [draggingIndex, setDraggingIndex] = (0, import_react19.useState)(null);
+  const [dragOverIndex, setDragOverIndex] = (0, import_react19.useState)(null);
+  const fromRef = (0, import_react19.useRef)(null);
+  const itemsRef = (0, import_react19.useRef)(items);
   itemsRef.current = items;
-  const dragPropsFor = (0, import_react18.useCallback)(
+  const dragPropsFor = (0, import_react19.useCallback)(
     (index) => ({
       handleProps: {
         draggable: true,
@@ -4343,7 +4511,7 @@ function dbIdsFromKeys(keys) {
 }
 
 // src/components/TransitionDesigner.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var CROSSFADE_ESTIMATE_MS = 15e3;
 var FADE_ESTIMATE_MS = 11e3;
 var CREATE_ALL_CONCURRENCY = 5;
@@ -4370,44 +4538,44 @@ function TransitionDesigner({
   testIdPrefix = "transition-designer"
 }) {
   const fadeOnly = !onCreateCrossfade;
-  const [load, setLoad] = (0, import_react19.useState)({ status: "loading" });
-  const [fromName, setFromName] = (0, import_react19.useState)(null);
-  const [toName, setToName] = (0, import_react19.useState)(null);
-  const [originSlots, setOriginSlots] = (0, import_react19.useState)([]);
-  const [targetSlots, setTargetSlots] = (0, import_react19.useState)([]);
-  const [creatingKeys, setCreatingKeys] = (0, import_react19.useState)(() => /* @__PURE__ */ new Set());
-  const [rowErrors, setRowErrors] = (0, import_react19.useState)({});
-  const [rowEffects, setRowEffects] = (0, import_react19.useState)({});
-  const rowEffectsRef = (0, import_react19.useRef)(rowEffects);
+  const [load, setLoad] = (0, import_react20.useState)({ status: "loading" });
+  const [fromName, setFromName] = (0, import_react20.useState)(null);
+  const [toName, setToName] = (0, import_react20.useState)(null);
+  const [originSlots, setOriginSlots] = (0, import_react20.useState)([]);
+  const [targetSlots, setTargetSlots] = (0, import_react20.useState)([]);
+  const [creatingKeys, setCreatingKeys] = (0, import_react20.useState)(() => /* @__PURE__ */ new Set());
+  const [rowErrors, setRowErrors] = (0, import_react20.useState)({});
+  const [rowEffects, setRowEffects] = (0, import_react20.useState)({});
+  const rowEffectsRef = (0, import_react20.useRef)(rowEffects);
   rowEffectsRef.current = rowEffects;
   const audioEffectsEnabled = !!onCreateAudioTransition;
-  const excludeRef = (0, import_react19.useRef)(excludeSourceDbIds);
+  const excludeRef = (0, import_react20.useRef)(excludeSourceDbIds);
   excludeRef.current = excludeSourceDbIds;
-  const originSlotsRef = (0, import_react19.useRef)(originSlots);
+  const originSlotsRef = (0, import_react20.useRef)(originSlots);
   originSlotsRef.current = originSlots;
-  const targetSlotsRef = (0, import_react19.useRef)(targetSlots);
+  const targetSlotsRef = (0, import_react20.useRef)(targetSlots);
   targetSlotsRef.current = targetSlots;
-  const creatingKeysRef = (0, import_react19.useRef)(creatingKeys);
+  const creatingKeysRef = (0, import_react20.useRef)(creatingKeys);
   creatingKeysRef.current = creatingKeys;
-  const dragRef = (0, import_react19.useRef)(null);
-  const [dragging, setDragging] = (0, import_react19.useState)(null);
-  const [dragOver, setDragOver] = (0, import_react19.useState)(null);
-  const excludeSet = (0, import_react19.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const originPool = (0, import_react19.useMemo)(
+  const dragRef = (0, import_react20.useRef)(null);
+  const [dragging, setDragging] = (0, import_react20.useState)(null);
+  const [dragOver, setDragOver] = (0, import_react20.useState)(null);
+  const excludeSet = (0, import_react20.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originPool = (0, import_react20.useMemo)(
     () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const targetPool = (0, import_react19.useMemo)(
+  const targetPool = (0, import_react20.useMemo)(
     () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const originById = (0, import_react19.useMemo)(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
-  const targetById = (0, import_react19.useMemo)(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
-  const originByIdRef = (0, import_react19.useRef)(originById);
+  const originById = (0, import_react20.useMemo)(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
+  const targetById = (0, import_react20.useMemo)(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
+  const originByIdRef = (0, import_react20.useRef)(originById);
   originByIdRef.current = originById;
-  const targetByIdRef = (0, import_react19.useRef)(targetById);
+  const targetByIdRef = (0, import_react20.useRef)(targetById);
   targetByIdRef.current = targetById;
-  const refresh = (0, import_react19.useCallback)(async () => {
+  const refresh = (0, import_react20.useCallback)(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support transition tracks." });
       return;
@@ -4450,10 +4618,10 @@ function TransitionDesigner({
       });
     }
   }, [host, fromSceneId, toSceneId, transitionSceneId, mapColumnSubjects]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     void refresh();
   }, [refresh]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (load.status !== "ready") return;
     const [po, pt] = padPair(
       reconcileSlots(originSlotsRef.current, originPool.map((t) => t.dbId)),
@@ -4462,7 +4630,7 @@ function TransitionDesigner({
     if (!slotsEqual(po, originSlotsRef.current)) setOriginSlots(po);
     if (!slotsEqual(pt, targetSlotsRef.current)) setTargetSlots(pt);
   }, [originPool, targetPool, load.status]);
-  const mutate = (0, import_react19.useCallback)(
+  const mutate = (0, import_react20.useCallback)(
     (nextOrigin, nextTarget) => {
       const norm = normalizeSlots(nextOrigin, nextTarget);
       const [po, pt] = padPair(norm.originOrder, norm.targetOrder);
@@ -4475,7 +4643,7 @@ function TransitionDesigner({
     },
     [host, transitionSceneId]
   );
-  const setRowEffect = (0, import_react19.useCallback)(
+  const setRowEffect = (0, import_react20.useCallback)(
     (sourceDbId, effect) => {
       setRowEffects((prev) => {
         const next = { ...prev, [sourceDbId]: effect };
@@ -4489,7 +4657,7 @@ function TransitionDesigner({
     },
     [host, transitionSceneId]
   );
-  const insertGapAbove = (0, import_react19.useCallback)(
+  const insertGapAbove = (0, import_react20.useCallback)(
     (col, index) => {
       const slots = col === "origin" ? originSlots : targetSlots;
       const next = [...slots.slice(0, index), null, ...slots.slice(index)];
@@ -4498,7 +4666,7 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const removeGap = (0, import_react19.useCallback)(
+  const removeGap = (0, import_react20.useCallback)(
     (col, index) => {
       const slots = col === "origin" ? originSlots : targetSlots;
       const next = slots.filter((_, i) => i !== index);
@@ -4507,7 +4675,7 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const handleDrop = (0, import_react19.useCallback)(
+  const handleDrop = (0, import_react20.useCallback)(
     (col, to) => {
       const from = dragRef.current;
       dragRef.current = null;
@@ -4519,8 +4687,8 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const rows = (0, import_react19.useMemo)(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
-  const fadeOnlyRows = (0, import_react19.useMemo)(
+  const rows = (0, import_react20.useMemo)(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
+  const fadeOnlyRows = (0, import_react20.useMemo)(
     () => fadeOnly ? [
       ...originPool.map((t) => ({
         originId: t.dbId,
@@ -4535,18 +4703,18 @@ function TransitionDesigner({
     ] : [],
     [fadeOnly, originPool, targetPool]
   );
-  const fadeOnlyRowsRef = (0, import_react19.useRef)(fadeOnlyRows);
+  const fadeOnlyRowsRef = (0, import_react20.useRef)(fadeOnlyRows);
   fadeOnlyRowsRef.current = fadeOnlyRows;
   const effectiveRows = fadeOnly ? fadeOnlyRows : rows;
-  const creatingDbIds = (0, import_react19.useMemo)(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
-  const eligibleCount = (0, import_react19.useMemo)(
+  const creatingDbIds = (0, import_react20.useMemo)(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
+  const eligibleCount = (0, import_react20.useMemo)(
     () => effectiveRows.filter((r) => {
       const k = rowKey(r);
       return k !== null && !creatingKeys.has(k);
     }).length,
     [effectiveRows, creatingKeys]
   );
-  const createRow = (0, import_react19.useCallback)(
+  const createRow = (0, import_react20.useCallback)(
     async (row) => {
       const key = rowKey(row);
       if (!key || !row.type || creatingKeysRef.current.has(key)) return;
@@ -4601,7 +4769,7 @@ function TransitionDesigner({
     },
     [onCreateCrossfade, onCreateFade, onCreateAudioTransition]
   );
-  const createAll = (0, import_react19.useCallback)(async () => {
+  const createAll = (0, import_react20.useCallback)(async () => {
     const source = fadeOnly ? fadeOnlyRowsRef.current : buildRowSlots(originSlotsRef.current, targetSlotsRef.current);
     const eligible = source.filter((r) => {
       const k = rowKey(r);
@@ -4670,15 +4838,15 @@ function TransitionDesigner({
     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__ */ (0, import_jsx_runtime19.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "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__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "button",
               {
                 type: "button",
@@ -4695,7 +4863,7 @@ function TransitionDesigner({
     }
     const primary = track ? track.prompt?.trim() || track.name : slotId;
     const meta = track ? [track.role, shortId3(track.dbId)].filter(Boolean).join(" \xB7 ") : "missing";
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         ...cellDragProps(col, index, locked),
@@ -4703,13 +4871,13 @@ function TransitionDesigner({
         "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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-start gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-text truncate", children: primary }),
-            meta && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-xs text-sas-text truncate", children: primary }),
+            meta && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "button",
             {
               type: "button",
@@ -4732,26 +4900,26 @@ function TransitionDesigner({
     const key = rowKey(row);
     const isCreatingThis = key !== null && creatingKeys.has(key);
     const errMsg = key !== null ? rowErrors[key] : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         "data-testid": `${testIdPrefix}-row-${i}`,
         className: "grid grid-cols-[1fr_auto] gap-2 items-center",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               "data-testid": `${testIdPrefix}-subject-${slotId}`,
               className: `rounded-sm border border-sas-border bg-sas-panel px-2 py-1.5 ${isCreatingThis ? "opacity-60" : ""}`,
               title: track ? track.dbId : "Track no longer available",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-text truncate", children: track ? track.prompt?.trim() || track.name : slotId }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: track ? [track.role, shortId3(track.dbId)].filter(Boolean).join(" \xB7 ") : "missing" })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-xs text-sas-text truncate", children: track ? track.prompt?.trim() || track.name : slotId }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: track ? [track.role, shortId3(track.dbId)].filter(Boolean).join(" \xB7 ") : "missing" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "span",
               {
                 "data-testid": `${testIdPrefix}-type-${i}`,
@@ -4759,7 +4927,7 @@ function TransitionDesigner({
                 children: row.type ? TYPE_LABEL[row.type] : "\u2014"
               }
             ),
-            isCreatingThis ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            isCreatingThis ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               SorceryProgressBar,
               {
                 isLoading: true,
@@ -4767,7 +4935,7 @@ function TransitionDesigner({
                 statusText: "CREATING",
                 estimatedDurationMs: fadeEstimateMs ?? FADE_ESTIMATE_MS
               }
-            ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "button",
               {
                 type: "button",
@@ -4777,7 +4945,7 @@ function TransitionDesigner({
                 children: "Create"
               }
             ),
-            errMsg && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            errMsg && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "span",
               {
                 "data-testid": `${testIdPrefix}-row-error-${i}`,
@@ -4794,18 +4962,18 @@ function TransitionDesigner({
   if (fadeOnly) {
     const outRows = fadeOnlyRows.filter((r) => r.type === "fade-out");
     const inRows = fadeOnlyRows.filter((r) => r.type === "fade-in");
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sas-text", children: fromLabel }),
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sas-text", children: fromLabel }),
           " \u2192",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sas-text", children: toLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sas-text", children: toLabel }),
           familyLabel ? ` \xB7 ${familyLabel}` : "",
           " \xB7 each entry fades on its own \u2014 origin fades out, target fades in."
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
-          creatingKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+          creatingKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "span",
             {
               className: "text-[10px] text-sas-accent whitespace-nowrap",
@@ -4816,7 +4984,7 @@ function TransitionDesigner({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "button",
             {
               type: "button",
@@ -4833,26 +5001,26 @@ function TransitionDesigner({
           )
         ] })
       ] }),
-      load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
-      load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-danger py-6 text-center", "data-testid": `${testIdPrefix}-error`, children: load.message }),
-      load.status === "ready" && (fadeOnlyRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
+      load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
+      load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-xs text-sas-danger py-6 text-center", "data-testid": `${testIdPrefix}-error`, children: load.message }),
+      load.status === "ready" && (fadeOnlyRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
         "Nothing to fade in this panel for either scene. Add tracks to ",
         fromLabel,
         " or ",
         toLabel,
         " ",
         "first (or free one by deleting an existing fade)."
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-3", children: [
-        outRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-fade-out-section`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-3", children: [
+        outRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-fade-out-section`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
             "Origin (",
             fromLabel,
             ") \u2014 fades out"
           ] }),
           outRows.map((row, i) => renderFadeOnlyRow(row, i))
         ] }),
-        inRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-fade-in-section`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+        inRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-fade-in-section`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
             "Target (",
             toLabel,
             ") \u2014 fades in"
@@ -4862,22 +5030,22 @@ function TransitionDesigner({
       ] }))
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sas-text", children: fromLabel }),
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sas-text", children: fromLabel }),
         " \u2192",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sas-text", children: toLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
-        creatingKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+        creatingKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
           creatingKeys.size,
           " creating\u2026"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "button",
           {
             type: "button",
@@ -4894,49 +5062,49 @@ function TransitionDesigner({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
         "Origin (",
         fromLabel,
         ")"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
         "Target (",
         toLabel,
         ")"
       ] })
     ] }),
-    load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
-    load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
+    load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
+    load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsxs)("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__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-2", children: rows.map((row, i) => {
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime19.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           "data-testid": `${testIdPrefix}-row-${i}`,
           className: "grid grid-cols-[1fr_auto_1fr] gap-2 items-center",
           children: [
             renderCell("origin", i, row.originId),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
-              !row.type ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
+              !row.type ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              ) : audioEffectsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "select",
                   {
                     "data-testid": `${testIdPrefix}-effect-${i}`,
@@ -4946,11 +5114,11 @@ function TransitionDesigner({
                       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__ */ (0, import_jsx_runtime19.jsx)("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
+                    children: AUDIO_EFFECTS.map((eff) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   "data-testid": `${testIdPrefix}-type-${i}`,
@@ -4958,7 +5126,7 @@ function TransitionDesigner({
                   children: TYPE_LABEL[row.type]
                 }
               ),
-              isCreatingThis ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              isCreatingThis ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 SorceryProgressBar,
                 {
                   isLoading: true,
@@ -4966,7 +5134,7 @@ function TransitionDesigner({
                   statusText: "CREATING",
                   estimatedDurationMs: row.type === "crossfade" ? CROSSFADE_ESTIMATE_MS : FADE_ESTIMATE_MS
                 }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4977,7 +5145,7 @@ function TransitionDesigner({
                   children: "Create"
                 }
               ),
-              errMsg && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              errMsg && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   "data-testid": `${testIdPrefix}-row-error-${i}`,
@@ -4996,8 +5164,8 @@ function TransitionDesigner({
 }
 
 // src/components/PanelMasterStrip.tsx
-var import_react20 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function PanelMasterStrip({
   bus,
   levels = null,
@@ -5016,22 +5184,22 @@ function PanelMasterStrip({
   onToggleFxEnabled,
   onShowFxEditor
 }) {
-  const [search, setSearch] = (0, import_react20.useState)("");
-  const filtered = (0, import_react20.useMemo)(() => {
+  const [search, setSearch] = (0, import_react21.useState)("");
+  const filtered = (0, import_react21.useMemo)(() => {
     const q = search.trim().toLowerCase();
     if (!q) return availableFx;
     return availableFx.filter(
       (fx) => fx.name.toLowerCase().includes(q) || fx.manufacturer.toLowerCase().includes(q)
     );
   }, [availableFx, search]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       "data-testid": "panel-master-strip",
       className: `flex flex-col gap-1 px-2 py-1.5 rounded-sm border border-sas-border border-l-2 border-l-sas-accent/50 bg-sas-accent/5 transition-opacity ${soloedOut ? "opacity-40" : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "span",
             {
               className: "text-[9px] font-bold tracking-widest text-sas-muted/70 select-none",
@@ -5039,8 +5207,8 @@ function PanelMasterStrip({
               children: "BUS"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-w-[8rem] flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 min-w-[8rem] flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               VolumeSlider,
               {
                 value: dbToSlider(bus.volume),
@@ -5048,8 +5216,8 @@ function PanelMasterStrip({
                 disabled
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-px", "data-testid": "bus-meter", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-px", "data-testid": "bus-meter", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 LevelMeter,
                 {
                   peakDb: levels?.leftDb ?? -120,
@@ -5059,7 +5227,7 @@ function PanelMasterStrip({
                   "data-testid": "bus-meter-left"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 LevelMeter,
                 {
                   peakDb: levels?.rightDb ?? -120,
@@ -5070,7 +5238,7 @@ function PanelMasterStrip({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               "data-testid": "bus-mute-button",
@@ -5081,7 +5249,7 @@ function PanelMasterStrip({
               children: "M"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               "data-testid": "bus-solo-button",
@@ -5092,14 +5260,14 @@ function PanelMasterStrip({
               children: "S"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-1 max-w-[45%] min-w-0 overflow-x-auto", children: bus.fx.map((fx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-1 max-w-[45%] min-w-0 overflow-x-auto", children: bus.fx.map((fx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "span",
             {
               "data-testid": `bus-fx-chip-${fx.index}`,
               className: `flex items-center gap-1 px-1.5 py-0.5 rounded-sm border text-[10px] whitespace-nowrap ${fx.enabled ? "border-sas-accent/60 text-sas-accent bg-sas-accent/10" : "border-sas-border text-sas-muted/50 bg-sas-panel"}`,
               title: `${fx.name}${fx.enabled ? "" : " (bypassed)"}`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     "data-testid": `bus-fx-toggle-${fx.index}`,
@@ -5110,7 +5278,7 @@ function PanelMasterStrip({
                     children: fx.enabled ? "\u25CF" : "\u25CB"
                   }
                 ),
-                onShowFxEditor ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                onShowFxEditor ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     "data-testid": `bus-fx-edit-${fx.index}`,
@@ -5120,8 +5288,8 @@ function PanelMasterStrip({
                     title: `Open ${fx.name} editor`,
                     children: fx.name
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "max-w-[80px] truncate", children: fx.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "max-w-[80px] truncate", children: fx.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     "data-testid": `bus-fx-remove-${fx.index}`,
@@ -5136,7 +5304,7 @@ function PanelMasterStrip({
             },
             `${fx.index}:${fx.pluginId}`
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               "data-testid": "bus-fx-add-button",
@@ -5148,9 +5316,9 @@ function PanelMasterStrip({
             }
           )
         ] }),
-        fxPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { "data-testid": "bus-fx-picker", className: "flex flex-col gap-2 pt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        fxPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-testid": "bus-fx-picker", className: "flex flex-col gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "input",
               {
                 type: "text",
@@ -5160,7 +5328,7 @@ function PanelMasterStrip({
                 className: "sas-input flex-1 px-2 py-1 text-xs"
               }
             ),
-            onRefreshFx && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            onRefreshFx && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: () => onRefreshFx(),
@@ -5171,8 +5339,8 @@ function PanelMasterStrip({
               }
             )
           ] }),
-          fxLoading && availableFx.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
-            filtered.map((fx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          fxLoading && availableFx.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
+            filtered.map((fx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "button",
               {
                 "data-testid": `bus-fx-pick-${fx.pluginId}`,
@@ -5180,13 +5348,13 @@ function PanelMasterStrip({
                 className: "flex flex-col items-start px-2 py-1.5 rounded-sm border text-left transition-colors border-sas-border bg-sas-panel-alt text-sas-muted hover:border-sas-accent hover:text-sas-accent",
                 title: `${fx.name} by ${fx.manufacturer} (${fx.type.toUpperCase()})`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-medium truncate w-full", children: fx.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: fx.manufacturer || fx.type.toUpperCase() })
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs font-medium truncate w-full", children: fx.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: fx.manufacturer || fx.type.toUpperCase() })
                 ]
               },
               fx.pluginId
             )),
-            filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "col-span-3 text-xs text-sas-muted/60 text-center py-2", children: search.trim() ? "No matches" : "No FX plugins found" })
+            filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "col-span-3 text-xs text-sas-muted/60 text-center py-2", children: search.trim() ? "No matches" : "No FX plugins found" })
           ] })
         ] })
       ]
@@ -5195,18 +5363,18 @@ function PanelMasterStrip({
 }
 
 // src/hooks/usePanelBus.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var LEVELS_POLL_MS = 66;
 function usePanelBus(host, activeSceneId) {
   const supported = typeof host.getPanelBusState === "function";
-  const [bus, setBus] = (0, import_react21.useState)(null);
-  const [levels, setLevels] = (0, import_react21.useState)(null);
-  const [availableFx, setAvailableFx] = (0, import_react21.useState)([]);
-  const [fxLoading, setFxLoading] = (0, import_react21.useState)(false);
-  const [fxPickerOpen, setFxPickerOpen] = (0, import_react21.useState)(false);
-  const fxLoadedRef = (0, import_react21.useRef)(false);
-  const loadSeqRef = (0, import_react21.useRef)(0);
-  const reload = (0, import_react21.useCallback)(async () => {
+  const [bus, setBus] = (0, import_react22.useState)(null);
+  const [levels, setLevels] = (0, import_react22.useState)(null);
+  const [availableFx, setAvailableFx] = (0, import_react22.useState)([]);
+  const [fxLoading, setFxLoading] = (0, import_react22.useState)(false);
+  const [fxPickerOpen, setFxPickerOpen] = (0, import_react22.useState)(false);
+  const fxLoadedRef = (0, import_react22.useRef)(false);
+  const loadSeqRef = (0, import_react22.useRef)(0);
+  const reload = (0, import_react22.useCallback)(async () => {
     if (!supported || !activeSceneId || !host.getPanelBusState) {
       setBus(null);
       return;
@@ -5218,12 +5386,12 @@ function usePanelBus(host, activeSceneId) {
     } catch {
     }
   }, [host, activeSceneId, supported]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     setBus(null);
     setFxPickerOpen(false);
     void reload();
   }, [reload]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!supported || !activeSceneId || !bus?.engaged || !host.getPanelBusLevels) {
       setLevels(null);
       return;
@@ -5245,7 +5413,7 @@ function usePanelBus(host, activeSceneId) {
       clearInterval(id);
     };
   }, [supported, activeSceneId, bus?.engaged, host]);
-  const loadFxList = (0, import_react21.useCallback)(
+  const loadFxList = (0, import_react22.useCallback)(
     async (opts) => {
       if (!supported || !host.getAvailableFx) return;
       if (fxLoadedRef.current && !opts.force && !opts.rescan) return;
@@ -5261,14 +5429,14 @@ function usePanelBus(host, activeSceneId) {
     },
     [host, supported]
   );
-  const openPicker = (0, import_react21.useCallback)(
+  const openPicker = (0, import_react22.useCallback)(
     (open) => {
       setFxPickerOpen(open);
       if (open) void loadFxList({});
     },
     [loadFxList]
   );
-  const mutate = (0, import_react21.useCallback)(
+  const mutate = (0, import_react22.useCallback)(
     (fn) => {
       if (!fn || !activeSceneId) return;
       void (async () => {
@@ -5312,8 +5480,8 @@ function usePanelBus(host, activeSceneId) {
 }
 
 // src/components/DownloadPackButton.tsx
-var import_react22 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function formatSize(bytes) {
   if (!bytes || bytes <= 0) return "";
   const gb = bytes / 1024 ** 3;
@@ -5329,10 +5497,10 @@ var DownloadPackButton = ({
   variant = "compact",
   onDownloadComplete
 }) => {
-  const [status, setStatus] = (0, import_react22.useState)("idle");
-  const [progress, setProgress] = (0, import_react22.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, import_react22.useState)(null);
-  (0, import_react22.useEffect)(() => {
+  const [status, setStatus] = (0, import_react23.useState)("idle");
+  const [progress, setProgress] = (0, import_react23.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react23.useState)(null);
+  (0, import_react23.useEffect)(() => {
     const unsub = host.onSamplePackProgress(packId, (p) => {
       setStatus(p.status);
       setProgress(p.progress);
@@ -5347,7 +5515,7 @@ var DownloadPackButton = ({
     });
     return unsub;
   }, [host, packId, onDownloadComplete]);
-  const handleClick = (0, import_react22.useCallback)(async () => {
+  const handleClick = (0, import_react23.useCallback)(async () => {
     if (status !== "idle" && status !== "error") return;
     try {
       setStatus("downloading");
@@ -5401,8 +5569,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_runtime21.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "button",
       {
         "data-testid": `download-pack-button-${packId}`,
@@ -5413,12 +5581,12 @@ var DownloadPackButton = ({
         children: buttonLabel
       }
     ),
-    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime22.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_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var SamplePackCTACard = ({
   host,
   pack,
@@ -5426,7 +5594,7 @@ var SamplePackCTACard = ({
   onDownloadComplete
 }) => {
   if (status === "checking") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         "data-testid": `sample-pack-cta-checking-${pack.packId}`,
@@ -5437,16 +5605,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_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime22.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_runtime22.jsx)("div", { className: "text-base text-sas-text mb-1", children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("div", { className: "text-base text-sas-text mb-1", children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           DownloadPackButton,
           {
             host,
@@ -5463,7 +5631,7 @@ var SamplePackCTACard = ({
 };
 
 // src/components/WaveformView.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/waveform.ts
 function computePeaks(audioBuffer, bins, targetSamples) {
@@ -5526,7 +5694,7 @@ function drawWaveform(canvas, peaks, options = {}) {
 }
 
 // src/components/WaveformView.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var WaveformView = ({
   host,
   filePath,
@@ -5535,9 +5703,9 @@ var WaveformView = ({
   fillStyle,
   targetSamples
 }) => {
-  const canvasRef = (0, import_react23.useRef)(null);
-  const [peaks, setPeaks] = (0, import_react23.useState)(null);
-  (0, import_react23.useEffect)(() => {
+  const canvasRef = (0, import_react24.useRef)(null);
+  const [peaks, setPeaks] = (0, import_react24.useState)(null);
+  (0, import_react24.useEffect)(() => {
     let cancelled = false;
     let audioContext = null;
     (async () => {
@@ -5563,7 +5731,7 @@ var WaveformView = ({
       cancelled = true;
     };
   }, [host, filePath, bins, targetSamples]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!peaks) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -5574,7 +5742,7 @@ var WaveformView = ({
     observer.observe(canvas);
     return () => observer.disconnect();
   }, [peaks, fillStyle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -5585,8 +5753,8 @@ var WaveformView = ({
 };
 
 // src/components/ScrollingWaveform.tsx
-var import_react24 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var ScrollingWaveform = ({
   getPeakDb,
   active,
@@ -5594,11 +5762,11 @@ var ScrollingWaveform = ({
   className,
   fillStyle
 }) => {
-  const canvasRef = (0, import_react24.useRef)(null);
-  const ringRef = (0, import_react24.useRef)(new Float32Array(columns));
-  const writeIdxRef = (0, import_react24.useRef)(0);
-  const rafRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  const canvasRef = (0, import_react25.useRef)(null);
+  const ringRef = (0, import_react25.useRef)(new Float32Array(columns));
+  const writeIdxRef = (0, import_react25.useRef)(0);
+  const rafRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
     if (ringRef.current.length !== columns) {
       const next = new Float32Array(columns);
       const prev = ringRef.current;
@@ -5610,7 +5778,7 @@ var ScrollingWaveform = ({
       writeIdxRef.current = writeIdxRef.current % columns;
     }
   }, [columns]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!active) {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -5662,7 +5830,7 @@ var ScrollingWaveform = ({
       }
     };
   }, [active, getPeakDb, fillStyle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -5673,8 +5841,8 @@ var ScrollingWaveform = ({
 };
 
 // src/components/OffsetScrubber.tsx
-var import_react25 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var SLIDER_HEIGHT_PX = 28;
 var TICK_HEIGHT_PX = 14;
 var DOWNBEAT_TICK_HEIGHT_PX = 22;
@@ -5687,40 +5855,40 @@ function OffsetScrubber({
   onChange,
   disabled = false
 }) {
-  const trackRef = (0, import_react25.useRef)(null);
-  const [draftOffset, setDraftOffset] = (0, import_react25.useState)(offsetSamples);
-  const [isDragging, setIsDragging] = (0, import_react25.useState)(false);
-  (0, import_react25.useEffect)(() => {
+  const trackRef = (0, import_react26.useRef)(null);
+  const [draftOffset, setDraftOffset] = (0, import_react26.useState)(offsetSamples);
+  const [isDragging, setIsDragging] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     if (!isDragging) setDraftOffset(offsetSamples);
   }, [offsetSamples, isDragging]);
   const sampleRate = cuePoints?.sample_rate ?? 44100;
   const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
-  const beatsForRange = (0, import_react25.useMemo)(() => {
+  const beatsForRange = (0, import_react26.useMemo)(() => {
     return Math.round(60 / projectBpm * sampleRate);
   }, [projectBpm, sampleRate]);
   const rangeSamples = beatsForRange * meter;
-  const sampleToFraction = (0, import_react25.useCallback)(
+  const sampleToFraction = (0, import_react26.useCallback)(
     (sample) => {
       const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
       return (clamped + rangeSamples) / (2 * rangeSamples);
     },
     [rangeSamples]
   );
-  const fractionToSample = (0, import_react25.useCallback)(
+  const fractionToSample = (0, import_react26.useCallback)(
     (fraction) => {
       const clamped = Math.max(0, Math.min(1, fraction));
       return Math.round(clamped * 2 * rangeSamples - rangeSamples);
     },
     [rangeSamples]
   );
-  const snapTargets = (0, import_react25.useMemo)(() => {
+  const snapTargets = (0, import_react26.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_react25.useCallback)(
+  const snapToBeat = (0, import_react26.useCallback)(
     (sample) => {
       if (snapTargets.length === 0) return sample;
       let best = snapTargets[0];
@@ -5736,7 +5904,7 @@ function OffsetScrubber({
     },
     [snapTargets]
   );
-  const handlePointerDown = (0, import_react25.useCallback)(
+  const handlePointerDown = (0, import_react26.useCallback)(
     (e) => {
       if (disabled || !cuePoints) return;
       e.preventDefault();
@@ -5770,7 +5938,7 @@ function OffsetScrubber({
     },
     [disabled, cuePoints, fractionToSample, onChange, snapToBeat]
   );
-  const handleResetToZero = (0, import_react25.useCallback)(() => {
+  const handleResetToZero = (0, import_react26.useCallback)(() => {
     if (disabled) return;
     setDraftOffset(0);
     onChange(0);
@@ -5778,7 +5946,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_react25.useMemo)(() => {
+  const ticks = (0, import_react26.useMemo)(() => {
     if (!cuePoints) return [];
     const downbeat = cuePoints.beats[0] ?? 0;
     return cuePoints.beats.map((b, i) => {
@@ -5789,9 +5957,9 @@ function OffsetScrubber({
     });
   }, [cuePoints, sampleToFraction]);
   const isDisabled = disabled || !cuePoints || cuePoints.beats.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "div",
       {
         ref: trackRef,
@@ -5807,7 +5975,7 @@ function OffsetScrubber({
         "aria-valuenow": draftOffset,
         "aria-disabled": isDisabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               "aria-hidden": "true",
@@ -5815,7 +5983,7 @@ function OffsetScrubber({
               style: { left: "50%" }
             }
           ),
-          ticks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          ticks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               "data-testid": t.isDownbeat ? "offset-tick-downbeat" : "offset-tick",
@@ -5830,7 +5998,7 @@ function OffsetScrubber({
             },
             t.i
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               "data-testid": "offset-scrubber-thumb",
@@ -5847,7 +6015,7 @@ function OffsetScrubber({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "span",
       {
         "data-testid": "offset-scrubber-readout",
@@ -5855,7 +6023,7 @@ function OffsetScrubber({
         children: formatOffset(draftOffset, sampleRate)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         type: "button",
@@ -5867,7 +6035,7 @@ function OffsetScrubber({
         children: "\u2316"
       }
     ),
-    bpmMismatch && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    bpmMismatch && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "span",
       {
         "data-testid": "offset-bpm-mismatch",
@@ -5939,16 +6107,16 @@ function synthesizeCuePoints({
 }
 
 // src/panel-core/useGeneratorPanelCore.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/hooks/useSceneState.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function useSceneState(activeSceneId, initialValue) {
-  const [stateMap, setStateMap] = (0, import_react26.useState)(() => /* @__PURE__ */ new Map());
-  const activeSceneIdRef = (0, import_react26.useRef)(activeSceneId);
+  const [stateMap, setStateMap] = (0, import_react27.useState)(() => /* @__PURE__ */ new Map());
+  const activeSceneIdRef = (0, import_react27.useRef)(activeSceneId);
   activeSceneIdRef.current = activeSceneId;
   const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
-  const setForCurrentScene = (0, import_react26.useCallback)((value) => {
+  const setForCurrentScene = (0, import_react27.useCallback)((value) => {
     const sid = activeSceneIdRef.current;
     if (sid === null) return;
     setStateMap((prev) => {
@@ -5959,7 +6127,7 @@ function useSceneState(activeSceneId, initialValue) {
       return newMap;
     });
   }, [initialValue]);
-  const setForScene = (0, import_react26.useCallback)((sceneId, value) => {
+  const setForScene = (0, import_react27.useCallback)((sceneId, value) => {
     setStateMap((prev) => {
       const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
       const next = typeof value === "function" ? value(current) : value;
@@ -5972,10 +6140,10 @@ function useSceneState(activeSceneId, initialValue) {
 }
 
 // src/hooks/useAnySolo.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 function useAnySolo(host) {
-  const [anySolo, setAnySolo] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const [anySolo, setAnySolo] = (0, import_react28.useState)(false);
+  (0, import_react28.useEffect)(() => {
     let active = true;
     const refresh = () => {
       host.isAnySoloActive().then((v) => {
@@ -5994,7 +6162,7 @@ function useAnySolo(host) {
 }
 
 // src/hooks/useSoundHistory.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 var EMPTY = { entries: [], cursor: -1 };
 function sameDescriptor(a, b) {
   if (a === b) return true;
@@ -6006,14 +6174,14 @@ function sameDescriptor(a, b) {
 }
 function useSoundHistory(applySound, opts = {}) {
   const max = Math.max(2, opts.max ?? 24);
-  const applyRef = (0, import_react28.useRef)(applySound);
+  const applyRef = (0, import_react29.useRef)(applySound);
   applyRef.current = applySound;
-  const onChangeRef = (0, import_react28.useRef)(opts.onChange);
+  const onChangeRef = (0, import_react29.useRef)(opts.onChange);
   onChangeRef.current = opts.onChange;
-  const dataRef = (0, import_react28.useRef)({});
-  const [, setVersion] = (0, import_react28.useState)(0);
-  const bump = (0, import_react28.useCallback)(() => setVersion((v) => v + 1), []);
-  const commit = (0, import_react28.useCallback)(
+  const dataRef = (0, import_react29.useRef)({});
+  const [, setVersion] = (0, import_react29.useState)(0);
+  const bump = (0, import_react29.useCallback)(() => setVersion((v) => v + 1), []);
+  const commit = (0, import_react29.useCallback)(
     (trackId, next, notify) => {
       dataRef.current = { ...dataRef.current, [trackId]: next };
       bump();
@@ -6021,7 +6189,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const record = (0, import_react28.useCallback)(
+  const record = (0, import_react29.useCallback)(
     (trackId, descriptor, label) => {
       const h = dataRef.current[trackId];
       const current = h && h.cursor >= 0 ? h.entries[h.cursor] : void 0;
@@ -6036,7 +6204,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [max, commit]
   );
-  const restoreTo = (0, import_react28.useCallback)(
+  const restoreTo = (0, import_react29.useCallback)(
     async (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length || index === h.cursor) return false;
@@ -6046,7 +6214,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const undo = (0, import_react28.useCallback)(
+  const undo = (0, import_react29.useCallback)(
     (trackId) => {
       const h = dataRef.current[trackId];
       if (!h || h.cursor <= 0) return Promise.resolve(false);
@@ -6054,7 +6222,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [restoreTo]
   );
-  const toggleFavorite = (0, import_react28.useCallback)(
+  const toggleFavorite = (0, import_react29.useCallback)(
     (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length) return;
@@ -6063,7 +6231,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const restore = (0, import_react28.useCallback)(
+  const restore = (0, import_react29.useCallback)(
     (trackId, state) => {
       const entries = Array.isArray(state?.entries) ? [...state.entries] : [];
       const raw = typeof state?.cursor === "number" ? state.cursor : entries.length - 1;
@@ -6072,15 +6240,15 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const list = (0, import_react28.useCallback)(
+  const list = (0, import_react29.useCallback)(
     (trackId) => dataRef.current[trackId] ?? EMPTY,
     []
   );
-  const canUndo = (0, import_react28.useCallback)((trackId) => {
+  const canUndo = (0, import_react29.useCallback)((trackId) => {
     const h = dataRef.current[trackId];
     return !!h && h.cursor > 0;
   }, []);
-  const clear = (0, import_react28.useCallback)(
+  const clear = (0, import_react29.useCallback)(
     (trackId) => {
       if (dataRef.current[trackId]) {
         const next = { ...dataRef.current };
@@ -6092,11 +6260,11 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const reset = (0, import_react28.useCallback)(() => {
+  const reset = (0, import_react29.useCallback)(() => {
     dataRef.current = {};
     bump();
   }, [bump]);
-  return (0, import_react28.useMemo)(
+  return (0, import_react29.useMemo)(
     () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
     [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
   );
@@ -6172,7 +6340,7 @@ function resolveTrackGroups(parsedGroups, tracks, getDbId, opts = {}) {
 }
 
 // src/panel-core/useTransitionOps.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 function useTransitionOps({
   host,
   adapter,
@@ -6189,8 +6357,8 @@ function useTransitionOps({
   resolvedFades
 }) {
   const { identity } = adapter;
-  const appliedFadeAutomationRef = (0, import_react29.useRef)(/* @__PURE__ */ new Set());
-  const applyCrossfadeAutomation = (0, import_react29.useCallback)(
+  const appliedFadeAutomationRef = (0, import_react30.useRef)(/* @__PURE__ */ new Set());
+  const applyCrossfadeAutomation = (0, import_react30.useCallback)(
     async (originTrackId, targetTrackId, bars, bpm, sliderPos) => {
       if (host.setTrackVolumeAutomation) {
         const curves = buildCrossfadeVolumeCurves(bars, bpm, sliderPos);
@@ -6207,7 +6375,7 @@ function useTransitionOps({
     },
     [host]
   );
-  const applyFadeAutomation = (0, import_react29.useCallback)(
+  const applyFadeAutomation = (0, import_react30.useCallback)(
     async (trackId, direction, bars, bpm, sliderPos, gesture) => {
       if (!host.setTrackVolumeAutomation) return;
       const points = buildFadeVolumeCurve(bars, bpm, direction, sliderPos, gesture);
@@ -6216,7 +6384,7 @@ function useTransitionOps({
     },
     [host]
   );
-  const copyTrackFx = (0, import_react29.useCallback)(
+  const copyTrackFx = (0, import_react30.useCallback)(
     async (newTrackId, sourceDbId) => {
       if (typeof host.copyTrackFxFrom !== "function") return;
       try {
@@ -6233,8 +6401,8 @@ function useTransitionOps({
     },
     [host]
   );
-  const [isCreatingCrossfade, setIsCreatingCrossfade] = (0, import_react29.useState)(false);
-  const handleCreateCrossfade = (0, import_react29.useCallback)(
+  const [isCreatingCrossfade, setIsCreatingCrossfade] = (0, import_react30.useState)(false);
+  const handleCreateCrossfade = (0, import_react30.useCallback)(
     async (origin, target) => {
       const scene = activeSceneId;
       const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
@@ -6364,9 +6532,9 @@ function useTransitionOps({
       loadTracks
     ]
   );
-  const [isCreatingGroupFade, setIsCreatingGroupFade] = (0, import_react29.useState)(false);
-  const [isCreatingFade, setIsCreatingFade] = (0, import_react29.useState)(false);
-  const handleCreateFade = (0, import_react29.useCallback)(
+  const [isCreatingGroupFade, setIsCreatingGroupFade] = (0, import_react30.useState)(false);
+  const [isCreatingFade, setIsCreatingFade] = (0, import_react30.useState)(false);
+  const handleCreateFade = (0, import_react30.useCallback)(
     async (selection, direction, gesture) => {
       const scene = activeSceneId;
       const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
@@ -6477,7 +6645,7 @@ function useTransitionOps({
       loadTracks
     ]
   );
-  const handleCrossfadeMute = (0, import_react29.useCallback)(
+  const handleCrossfadeMute = (0, import_react30.useCallback)(
     (pair) => {
       const newMuted = !pair.origin.runtimeState.muted;
       for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
@@ -6492,7 +6660,7 @@ function useTransitionOps({
     },
     [host, setTracks]
   );
-  const handleCrossfadeSolo = (0, import_react29.useCallback)(
+  const handleCrossfadeSolo = (0, import_react30.useCallback)(
     (pair) => {
       const newSolo = !pair.origin.runtimeState.solo;
       for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
@@ -6507,7 +6675,7 @@ function useTransitionOps({
     },
     [host, setTracks]
   );
-  const handleCrossfadeDelete = (0, import_react29.useCallback)(
+  const handleCrossfadeDelete = (0, import_react30.useCallback)(
     async (pair) => {
       try {
         for (const member of [pair.origin, pair.target]) {
@@ -6533,8 +6701,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, setCrossfadePairsMeta, setTracks]
   );
-  const crossfadeSliderTimers = (0, import_react29.useRef)({});
-  const handleCrossfadeSlider = (0, import_react29.useCallback)(
+  const crossfadeSliderTimers = (0, import_react30.useRef)({});
+  const handleCrossfadeSlider = (0, import_react30.useCallback)(
     (pair, pos) => {
       setCrossfadePairsMeta(
         (prev) => prev.map((p) => p.groupId === pair.groupId ? { ...p, sliderPos: pos } : p)
@@ -6567,7 +6735,7 @@ function useTransitionOps({
     },
     [host, activeSceneId, applyCrossfadeAutomation, setCrossfadePairsMeta]
   );
-  const handleFadeDelete = (0, import_react29.useCallback)(
+  const handleFadeDelete = (0, import_react30.useCallback)(
     async (fade) => {
       try {
         await host.deleteTrack(fade.track.handle.id);
@@ -6587,8 +6755,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, setFadesMeta, setTracks]
   );
-  const fadeSliderTimers = (0, import_react29.useRef)({});
-  const handleFadeSlider = (0, import_react29.useCallback)(
+  const fadeSliderTimers = (0, import_react30.useRef)({});
+  const handleFadeSlider = (0, import_react30.useCallback)(
     (fade, pos) => {
       setFadesMeta(
         (prev) => prev.map((f) => f.dbId === fade.dbId ? { ...f, meta: { ...f.meta, sliderPos: pos } } : f)
@@ -6618,7 +6786,7 @@ function useTransitionOps({
     },
     [host, activeSceneId, applyFadeAutomation, setFadesMeta]
   );
-  const handleCreateVerbatimGroupFade = (0, import_react29.useCallback)(
+  const handleCreateVerbatimGroupFade = (0, import_react30.useCallback)(
     async (subject, direction) => {
       const groupAdapter = adapter.transitionGroup;
       if (!groupAdapter) throw new Error("This panel does not support group fades.");
@@ -6733,8 +6901,8 @@ function useTransitionOps({
       loadTracks
     ]
   );
-  const groupFadeSliderTimers = (0, import_react29.useRef)({});
-  const handleGroupFadeSlider = (0, import_react29.useCallback)(
+  const groupFadeSliderTimers = (0, import_react30.useRef)({});
+  const handleGroupFadeSlider = (0, import_react30.useCallback)(
     (group, pos) => {
       setFadesMeta(
         (prev) => prev.map(
@@ -6773,7 +6941,7 @@ function useTransitionOps({
     },
     [host, activeSceneId, applyFadeAutomation, setFadesMeta]
   );
-  const handleGroupFadeDelete = (0, import_react29.useCallback)(
+  const handleGroupFadeDelete = (0, import_react30.useCallback)(
     async (group) => {
       const suffixes = ["fade", ...adapter.transitionGroup?.cleanupKeySuffixes ?? []];
       try {
@@ -6800,8 +6968,8 @@ function useTransitionOps({
     },
     [host, adapter, activeSceneId, setFadesMeta, setTracks]
   );
-  const lastResyncKeyRef = (0, import_react29.useRef)("");
-  (0, import_react29.useEffect)(() => {
+  const lastResyncKeyRef = (0, import_react30.useRef)("");
+  (0, import_react30.useEffect)(() => {
     if (!host.getTrackSound || resolvedCrossfadePairs.length === 0 && resolvedFades.length === 0) {
       return;
     }
@@ -6842,7 +7010,7 @@ function useTransitionOps({
       cancelled = true;
     };
   }, [resolvedCrossfadePairs, resolvedFades, host, adapter]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!host.setTrackVolumeAutomation || resolvedFades.length === 0) return;
     void (async () => {
       const mc = await host.getMusicalContext();
@@ -6880,7 +7048,7 @@ function useTransitionOps({
 }
 
 // src/panel-core/useGeneratorPanelCore.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var EMPTY_PLACEHOLDERS = [];
 function useGeneratorPanelCore({
   ui,
@@ -6900,8 +7068,8 @@ function useGeneratorPanelCore({
   } = ui;
   const { identity, features } = adapter;
   const logTag = identity.logTag;
-  const adapterRef = (0, import_react30.useRef)(adapter);
-  (0, import_react30.useEffect)(() => {
+  const adapterRef = (0, import_react31.useRef)(adapter);
+  (0, import_react31.useEffect)(() => {
     if (adapterRef.current !== adapter) {
       adapterRef.current = adapter;
       console.warn(
@@ -6911,27 +7079,27 @@ function useGeneratorPanelCore({
   }, [adapter, logTag]);
   const supportsMeters = typeof host.getTrackLevels === "function";
   const trackLevels = useTrackLevels(host, isExpanded);
-  const [tracks, setTracks] = (0, import_react30.useState)([]);
-  const [isLoadingTracks, setIsLoadingTracks] = (0, import_react30.useState)(false);
-  const [importOpen, setImportOpen] = (0, import_react30.useState)(false);
-  const [soundImportTarget, setSoundImportTarget] = (0, import_react30.useState)(null);
-  const [designerView, setDesignerView] = (0, import_react30.useState)(false);
-  const [transitionSourceTotal, setTransitionSourceTotal] = (0, import_react30.useState)(0);
-  const [crossfadePairsMeta, setCrossfadePairsMeta] = (0, import_react30.useState)([]);
-  const [fadesMeta, setFadesMeta] = (0, import_react30.useState)([]);
-  const [genericGroupMetas, setGenericGroupMetas] = (0, import_react30.useState)({});
+  const [tracks, setTracks] = (0, import_react31.useState)([]);
+  const [isLoadingTracks, setIsLoadingTracks] = (0, import_react31.useState)(false);
+  const [importOpen, setImportOpen] = (0, import_react31.useState)(false);
+  const [soundImportTarget, setSoundImportTarget] = (0, import_react31.useState)(null);
+  const [designerView, setDesignerView] = (0, import_react31.useState)(false);
+  const [transitionSourceTotal, setTransitionSourceTotal] = (0, import_react31.useState)(0);
+  const [crossfadePairsMeta, setCrossfadePairsMeta] = (0, import_react31.useState)([]);
+  const [fadesMeta, setFadesMeta] = (0, import_react31.useState)([]);
+  const [genericGroupMetas, setGenericGroupMetas] = (0, import_react31.useState)({});
   const [isComposing, , setIsComposingForScene] = useSceneState(activeSceneId, false);
   const [placeholders, , setPlaceholdersForScene] = useSceneState(
     activeSceneId,
     EMPTY_PLACEHOLDERS
   );
-  const saveTimeoutRefs = (0, import_react30.useRef)({});
-  const editLoadStartedRef = (0, import_react30.useRef)(/* @__PURE__ */ new Set());
-  const [availableInstruments, setAvailableInstruments] = (0, import_react30.useState)([]);
-  const [instrumentsLoading, setInstrumentsLoading] = (0, import_react30.useState)(false);
-  const engineToDbIdRef = (0, import_react30.useRef)(/* @__PURE__ */ new Map());
-  const tracksLoadedForSceneRef = (0, import_react30.useRef)(null);
-  const persistSoundHistory = (0, import_react30.useCallback)(
+  const saveTimeoutRefs = (0, import_react31.useRef)({});
+  const editLoadStartedRef = (0, import_react31.useRef)(/* @__PURE__ */ new Set());
+  const [availableInstruments, setAvailableInstruments] = (0, import_react31.useState)([]);
+  const [instrumentsLoading, setInstrumentsLoading] = (0, import_react31.useState)(false);
+  const engineToDbIdRef = (0, import_react31.useRef)(/* @__PURE__ */ new Map());
+  const tracksLoadedForSceneRef = (0, import_react31.useRef)(null);
+  const persistSoundHistory = (0, import_react31.useCallback)(
     (trackId, state) => {
       if (!activeSceneId) return;
       const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
@@ -6951,7 +7119,7 @@ function useGeneratorPanelCore({
     setItems: setTracks,
     getId: (t) => t.handle.dbId
   });
-  const loadTracks = (0, import_react30.useCallback)(
+  const loadTracks = (0, import_react31.useCallback)(
     async (incremental = false) => {
       const sceneAtStart = activeSceneId;
       if (!sceneAtStart) {
@@ -7076,18 +7244,18 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId, soundHistory, adapter, logTag]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     loadTracks();
   }, [loadTracks]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const t of tracks) {
       map.set(t.handle.id, t.handle.dbId);
     }
     engineToDbIdRef.current = map;
   }, [tracks]);
-  const loadedCompletedIdsRef = (0, import_react30.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react30.useEffect)(() => {
+  const loadedCompletedIdsRef = (0, import_react31.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react31.useEffect)(() => {
     if (placeholders.length === 0) {
       loadedCompletedIdsRef.current.clear();
       return;
@@ -7106,16 +7274,16 @@ function useGeneratorPanelCore({
       loadTracks(true);
     }
   }, [placeholders, loadTracks, logTag]);
-  const adoptAndLoad = (0, import_react30.useCallback)(() => {
+  const adoptAndLoad = (0, import_react31.useCallback)(() => {
     loadTracks(true);
   }, [loadTracks]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const unsub = host.onEngineReady(() => {
       adoptAndLoad();
     });
     return unsub;
   }, [host, adoptAndLoad]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (typeof host.onAfterAgentMutation !== "function") return;
     let timer = null;
     const unsub = host.onAfterAgentMutation(() => {
@@ -7130,13 +7298,13 @@ function useGeneratorPanelCore({
       if (timer) clearTimeout(timer);
     };
   }, [host, loadTracks]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const unsub = host.onTrackStateChange((trackId, state) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: state } : t));
     });
     return unsub;
   }, [host]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!features.bulkComposePlaceholders) return;
     console.log(`[${logTag}] Subscribing to composeProgress`);
     const unsub = host.onComposeProgress((event) => {
@@ -7170,7 +7338,7 @@ function useGeneratorPanelCore({
     });
     return unsub;
   }, [host, setIsComposingForScene, setPlaceholdersForScene, features.bulkComposePlaceholders, logTag]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const refs = saveTimeoutRefs;
     return () => {
       for (const timeout of Object.values(refs.current)) {
@@ -7178,9 +7346,9 @@ function useGeneratorPanelCore({
       }
     };
   }, []);
-  const isAddingTrackRef = (0, import_react30.useRef)(false);
-  const [isAddingTrack, setIsAddingTrack] = (0, import_react30.useState)(false);
-  const handleAddTrack = (0, import_react30.useCallback)(async () => {
+  const isAddingTrackRef = (0, import_react31.useRef)(false);
+  const [isAddingTrack, setIsAddingTrack] = (0, import_react31.useState)(false);
+  const handleAddTrack = (0, import_react31.useCallback)(async () => {
     if (isAddingTrackRef.current) return;
     if (!activeSceneId) {
       host.showToast("warning", "Select SCENE");
@@ -7228,7 +7396,7 @@ function useGeneratorPanelCore({
       setIsAddingTrack(false);
     }
   }, [host, adapter, identity, activeSceneId, isConnected, isAuthenticated, tracks.length, onExpandSelf, loadTracks, logTag]);
-  const handlePortTrack = (0, import_react30.useCallback)(
+  const handlePortTrack = (0, import_react31.useCallback)(
     async (sel) => {
       if (!activeSceneId) {
         host.showToast("warning", "Select SCENE");
@@ -7291,7 +7459,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, identity, activeSceneId, isConnected, tracks.length, loadTracks]
   );
-  const handleSoundImportPick = (0, import_react30.useCallback)(
+  const handleSoundImportPick = (0, import_react31.useCallback)(
     async (sel) => {
       const target = soundImportTarget;
       if (!target || !host.getTrackSound) {
@@ -7322,8 +7490,8 @@ function useGeneratorPanelCore({
     },
     [soundImportTarget, host, adapter, identity.familyKey, soundHistory]
   );
-  const [isExportingMidi, setIsExportingMidi] = (0, import_react30.useState)(false);
-  const handleExportMidi = (0, import_react30.useCallback)(async () => {
+  const [isExportingMidi, setIsExportingMidi] = (0, import_react31.useState)(false);
+  const handleExportMidi = (0, import_react31.useCallback)(async () => {
     if (isExportingMidi) return;
     setIsExportingMidi(true);
     try {
@@ -7354,10 +7522,10 @@ function useGeneratorPanelCore({
   const xfFromId = sceneContext?.transitionFromSceneId ?? null;
   const xfToId = sceneContext?.transitionToSceneId ?? null;
   const canCrossfade = features.transitionDesigner && sceneContext?.sceneType === "transition" && !!xfFromId && !!xfToId && !!host.listSceneFamilyTracks;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!canCrossfade) setDesignerView(false);
   }, [canCrossfade]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!canCrossfade || !xfFromId || !xfToId || !host.listSceneFamilyTracks) {
       setTransitionSourceTotal(0);
       return;
@@ -7373,12 +7541,12 @@ function useGeneratorPanelCore({
     };
   }, [canCrossfade, xfFromId, xfToId, host]);
   const transitionDone = crossfadePairsMeta.length * 2 + fadesMeta.length;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!onHeaderContent) return;
     const addDisabled = needsContract || !isConnected || !activeSceneId || tracks.length >= identity.maxTracks || isAddingTrack;
     onHeaderContent(
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-1 items-center", children: [
-        features.importTracks && (!canCrossfade || !designerView) && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-1 items-center", children: [
+        features.importTracks && (!canCrossfade || !designerView) && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "button",
           {
             "data-testid": `import-from-scene-${identity.familyKey}-button`,
@@ -7392,7 +7560,7 @@ function useGeneratorPanelCore({
             children: identity.importTrackLabel ?? "Import Track"
           }
         ),
-        (!canCrossfade || !designerView) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        (!canCrossfade || !designerView) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "button",
           {
             "data-testid": `add-${identity.familyKey}-track-button`,
@@ -7408,7 +7576,7 @@ function useGeneratorPanelCore({
             children: identity.addTrackLabel ?? "Add Track"
           }
         ),
-        canCrossfade && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        canCrossfade && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "button",
           {
             "data-testid": `${identity.familyKey}-view-toggle`,
@@ -7427,7 +7595,7 @@ function useGeneratorPanelCore({
             title: designerView ? "Back to the track list" : "Open the transition designer",
             className: "relative overflow-hidden px-2 py-0.5 text-[10px] font-medium rounded-sm border border-sas-accent/40 text-sas-accent transition-colors hover:border-sas-accent disabled:opacity-50",
             children: [
-              transitionSourceTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              transitionSourceTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "span",
                 {
                   className: "absolute inset-y-0 left-0 bg-sas-accent/25",
@@ -7435,7 +7603,7 @@ function useGeneratorPanelCore({
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "relative", children: [
                 "\u21C4 ",
                 designerView ? "Transition" : "Tracks",
                 transitionSourceTotal > 0 ? ` ${transitionDone}/${transitionSourceTotal}` : ""
@@ -7466,7 +7634,7 @@ function useGeneratorPanelCore({
     identity,
     features.importTracks
   ]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!onLoading) return;
     const anyGenerating = tracks.some((t) => t.isGenerating);
     onLoading(isLoadingTracks || anyGenerating || isBulkActive);
@@ -7474,7 +7642,7 @@ function useGeneratorPanelCore({
       onLoading(false);
     };
   }, [onLoading, isLoadingTracks, tracks, isBulkActive]);
-  const handleDeleteTrack = (0, import_react30.useCallback)(
+  const handleDeleteTrack = (0, import_react31.useCallback)(
     async (trackId) => {
       try {
         await host.deleteTrack(trackId);
@@ -7490,7 +7658,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId]
   );
-  const handlePromptChange = (0, import_react30.useCallback)(
+  const handlePromptChange = (0, import_react31.useCallback)(
     (trackId, prompt) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, prompt } : t));
       const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
@@ -7506,7 +7674,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId]
   );
-  const resolvedGenericGroups = (0, import_react30.useMemo)(() => {
+  const resolvedGenericGroups = (0, import_react31.useMemo)(() => {
     const out = {};
     for (const ext of adapter.groupExtensions ?? []) {
       out[ext.metaKey] = resolveTrackGroups(
@@ -7520,18 +7688,18 @@ function useGeneratorPanelCore({
     }
     return out;
   }, [adapter, genericGroupMetas, tracks]);
-  const genericGroupMemberDbIds = (0, import_react30.useMemo)(() => {
+  const genericGroupMemberDbIds = (0, import_react31.useMemo)(() => {
     const s = /* @__PURE__ */ new Set();
     for (const r of Object.values(resolvedGenericGroups)) {
       for (const dbId of r.memberDbIds) s.add(dbId);
     }
     return s;
   }, [resolvedGenericGroups]);
-  const engineToDbId = (0, import_react30.useCallback)(
+  const engineToDbId = (0, import_react31.useCallback)(
     (trackId) => engineToDbIdRef.current.get(trackId) ?? trackId,
     []
   );
-  const updateTrack = (0, import_react30.useCallback)(
+  const updateTrack = (0, import_react31.useCallback)(
     (trackId, patch) => {
       setTracks(
         (prev) => prev.map(
@@ -7541,18 +7709,18 @@ function useGeneratorPanelCore({
     },
     []
   );
-  const markEditLoaded = (0, import_react30.useCallback)((trackId) => {
+  const markEditLoaded = (0, import_react31.useCallback)((trackId) => {
     editLoadStartedRef.current.add(trackId);
   }, []);
-  const tracksRef = (0, import_react30.useRef)(tracks);
-  (0, import_react30.useEffect)(() => {
+  const tracksRef = (0, import_react31.useRef)(tracks);
+  (0, import_react31.useEffect)(() => {
     tracksRef.current = tracks;
   }, [tracks]);
-  const resolvedGenericGroupsRef = (0, import_react30.useRef)(resolvedGenericGroups);
-  (0, import_react30.useEffect)(() => {
+  const resolvedGenericGroupsRef = (0, import_react31.useRef)(resolvedGenericGroups);
+  (0, import_react31.useEffect)(() => {
     resolvedGenericGroupsRef.current = resolvedGenericGroups;
   }, [resolvedGenericGroups]);
-  const makeServices = (0, import_react30.useCallback)(() => {
+  const makeServices = (0, import_react31.useCallback)(() => {
     return {
       host,
       activeSceneId,
@@ -7571,7 +7739,7 @@ function useGeneratorPanelCore({
       resolvedGroups: (metaKey) => resolvedGenericGroupsRef.current[metaKey]?.resolved ?? []
     };
   }, [host, activeSceneId, updateTrack, loadTracks, soundHistory, engineToDbId, markEditLoaded, identity, adapter]);
-  const handleGenerate = (0, import_react30.useCallback)(
+  const handleGenerate = (0, import_react31.useCallback)(
     async (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track || !track.prompt.trim()) return;
@@ -7598,7 +7766,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, tracks, isAuthenticated, makeServices]
   );
-  const handleMuteToggle = (0, import_react30.useCallback)(
+  const handleMuteToggle = (0, import_react31.useCallback)(
     (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -7618,7 +7786,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const handleSoloToggle = (0, import_react30.useCallback)(
+  const handleSoloToggle = (0, import_react31.useCallback)(
     (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -7638,7 +7806,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const handleVolumeChange = (0, import_react30.useCallback)(
+  const handleVolumeChange = (0, import_react31.useCallback)(
     (trackId, volume) => {
       setTracks(
         (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, volume } } : t)
@@ -7648,7 +7816,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handlePanChange = (0, import_react30.useCallback)(
+  const handlePanChange = (0, import_react31.useCallback)(
     (trackId, pan) => {
       setTracks(
         (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, pan } } : t)
@@ -7658,7 +7826,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleShuffle = (0, import_react30.useCallback)(
+  const handleShuffle = (0, import_react31.useCallback)(
     async (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -7700,7 +7868,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, tracks, soundHistory, logTag]
   );
-  const handleCopy = (0, import_react30.useCallback)(
+  const handleCopy = (0, import_react31.useCallback)(
     async (trackId) => {
       try {
         const newHandle = await host.duplicateTrack(trackId);
@@ -7713,7 +7881,7 @@ function useGeneratorPanelCore({
     },
     [host, loadTracks]
   );
-  const handleFxToggle = (0, import_react30.useCallback)(
+  const handleFxToggle = (0, import_react31.useCallback)(
     (trackId, category, enabled) => {
       setTracks(
         (prev) => prev.map(
@@ -7736,7 +7904,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleFxPresetChange = (0, import_react30.useCallback)(
+  const handleFxPresetChange = (0, import_react31.useCallback)(
     (trackId, category, presetIndex) => {
       setTracks(
         (prev) => prev.map(
@@ -7762,7 +7930,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleFxDryWetChange = (0, import_react30.useCallback)(
+  const handleFxDryWetChange = (0, import_react31.useCallback)(
     (trackId, category, value) => {
       setTracks(
         (prev) => prev.map(
@@ -7774,7 +7942,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const toggleFxDrawer = (0, import_react30.useCallback)(
+  const toggleFxDrawer = (0, import_react31.useCallback)(
     (trackId) => {
       setTracks(
         (prev) => prev.map((t) => {
@@ -7796,7 +7964,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const loadEditNotes = (0, import_react30.useCallback)(
+  const loadEditNotes = (0, import_react31.useCallback)(
     async (trackId) => {
       try {
         const mc = await host.getMusicalContext();
@@ -7814,7 +7982,7 @@ function useGeneratorPanelCore({
     },
     [host, logTag]
   );
-  const handleNotesChange = (0, import_react30.useCallback)(
+  const handleNotesChange = (0, import_react31.useCallback)(
     (trackId, notes) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editNotes: notes } : t));
       const key = `edit:${trackId}`;
@@ -7844,7 +8012,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleTabChange = (0, import_react30.useCallback)(
+  const handleTabChange = (0, import_react31.useCallback)(
     (trackId, tab) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, drawerOpen: true, drawerTab: tab } : t));
       if (tab === "fx") {
@@ -7869,10 +8037,10 @@ function useGeneratorPanelCore({
     },
     [host, availableInstruments.length, instrumentsLoading, loadEditNotes]
   );
-  const handleProgressChange = (0, import_react30.useCallback)((trackId, pct) => {
+  const handleProgressChange = (0, import_react31.useCallback)((trackId, pct) => {
     setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, generationProgress: pct } : t));
   }, []);
-  const handleToggleDrawer = (0, import_react30.useCallback)((trackId) => {
+  const handleToggleDrawer = (0, import_react31.useCallback)((trackId) => {
     setTracks(
       (prev) => prev.map((t) => {
         if (t.handle.id !== trackId) return t;
@@ -7881,7 +8049,7 @@ function useGeneratorPanelCore({
       })
     );
   }, []);
-  const handleInstrumentSelect = (0, import_react30.useCallback)(
+  const handleInstrumentSelect = (0, import_react31.useCallback)(
     async (trackId, pluginId) => {
       const isDefaultInstrument = pluginId === (identity.defaultInstrumentPluginId ?? "Surge XT");
       if (isDefaultInstrument) {
@@ -7934,7 +8102,7 @@ function useGeneratorPanelCore({
     },
     [host, identity.defaultInstrumentPluginId, logTag]
   );
-  const handleShowEditor = (0, import_react30.useCallback)(
+  const handleShowEditor = (0, import_react31.useCallback)(
     async (trackId) => {
       try {
         await host.showInstrumentEditor(trackId);
@@ -7945,12 +8113,12 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleBackToInstruments = (0, import_react30.useCallback)((trackId) => {
+  const handleBackToInstruments = (0, import_react31.useCallback)((trackId) => {
     setTracks(
       (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editorStage: false } : t)
     );
   }, []);
-  const handleRefreshInstruments = (0, import_react30.useCallback)(() => {
+  const handleRefreshInstruments = (0, import_react31.useCallback)(() => {
     setInstrumentsLoading(true);
     host.getAvailableInstruments().then((instruments) => {
       setAvailableInstruments(instruments);
@@ -7959,13 +8127,13 @@ function useGeneratorPanelCore({
       setInstrumentsLoading(false);
     });
   }, [host]);
-  const onAuditionNote = (0, import_react30.useCallback)(
+  const onAuditionNote = (0, import_react31.useCallback)(
     (trackId, pitch, velocity, ms) => {
       void host.auditionNote(trackId, pitch, velocity, ms);
     },
     [host]
   );
-  const { resolvedCrossfadePairs, crossfadeMemberDbIds } = (0, import_react30.useMemo)(() => {
+  const { resolvedCrossfadePairs, crossfadeMemberDbIds } = (0, import_react31.useMemo)(() => {
     const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
     const pairs = [];
     const members = /* @__PURE__ */ new Set();
@@ -7980,7 +8148,7 @@ function useGeneratorPanelCore({
     }
     return { resolvedCrossfadePairs: pairs, crossfadeMemberDbIds: members };
   }, [tracks, crossfadePairsMeta]);
-  const { resolvedFades, fadeMemberDbIds } = (0, import_react30.useMemo)(() => {
+  const { resolvedFades, fadeMemberDbIds } = (0, import_react31.useMemo)(() => {
     const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
     const list = [];
     const members = /* @__PURE__ */ new Set();
@@ -7993,7 +8161,7 @@ function useGeneratorPanelCore({
     }
     return { resolvedFades: list, fadeMemberDbIds: members };
   }, [tracks, fadesMeta]);
-  const { singles: resolvedSingleFades, groups: resolvedGroupFades } = (0, import_react30.useMemo)(
+  const { singles: resolvedSingleFades, groups: resolvedGroupFades } = (0, import_react31.useMemo)(
     () => splitFadeEntries(resolvedFades),
     [resolvedFades]
   );
@@ -8012,7 +8180,7 @@ function useGeneratorPanelCore({
     resolvedCrossfadePairs,
     resolvedFades
   });
-  const setGroupMute = (0, import_react30.useCallback)(
+  const setGroupMute = (0, import_react31.useCallback)(
     (trackIds, muted) => {
       for (const id of trackIds) {
         setTracks(
@@ -8024,7 +8192,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const setGroupSolo = (0, import_react30.useCallback)(
+  const setGroupSolo = (0, import_react31.useCallback)(
     (trackIds, solo) => {
       for (const id of trackIds) {
         setTracks(
@@ -8036,7 +8204,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const deleteGroup = (0, import_react30.useCallback)(
+  const deleteGroup = (0, import_react31.useCallback)(
     async (members, cleanupKeySuffixes) => {
       for (const member of members) {
         try {
@@ -8056,7 +8224,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId, loadTracks]
   );
-  const handlers = (0, import_react30.useMemo)(
+  const handlers = (0, import_react31.useMemo)(
     () => ({
       promptChange: handlePromptChange,
       generate: (trackId) => {
@@ -8172,8 +8340,8 @@ function useGeneratorPanelCore({
 }
 
 // src/panel-core/GeneratorPanelShell.tsx
-var import_react31 = __toESM(require("react"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react32 = __toESM(require("react"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function GeneratorPanelShell({ core, slots }) {
   const {
     ui,
@@ -8229,7 +8397,7 @@ function GeneratorPanelShell({ core, slots }) {
   const { host, activeSceneId, isAuthenticated, sceneContext, onSelectScene, onOpenContract } = ui;
   const panelBus = usePanelBus(host, activeSceneId);
   const { identity, features } = adapter;
-  const buildRowProps = (0, import_react31.useCallback)(
+  const buildRowProps = (0, import_react32.useCallback)(
     (track, drag) => {
       const id = track.handle.id;
       const pickerProps = features.instrumentPicker ? {
@@ -8329,12 +8497,12 @@ function GeneratorPanelShell({ core, slots }) {
     ]
   );
   if (!activeSceneId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         "data-testid": `no-scene-placeholder-${identity.familyKey}`,
         className: "flex items-center justify-center py-8",
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "button",
           {
             onClick: () => onSelectScene?.(),
@@ -8346,12 +8514,12 @@ function GeneratorPanelShell({ core, slots }) {
     );
   }
   if (!sceneContext?.hasContract) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         "data-testid": `no-contract-placeholder-${identity.familyKey}`,
         className: "flex items-center justify-center py-8",
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "button",
           {
             onClick: () => onOpenContract?.(),
@@ -8363,7 +8531,7 @@ function GeneratorPanelShell({ core, slots }) {
     );
   }
   if (features.bulkComposePlaceholders && isComposing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SorceryProgressBar, { isLoading: true, statusText: "COMPOSING...", heightClass: "h-10" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SorceryProgressBar, { isLoading: true, statusText: "COMPOSING...", heightClass: "h-10" }) });
   }
   const activePlaceholders = features.bulkComposePlaceholders ? placeholders : [];
   if (activePlaceholders.length > 0) {
@@ -8374,18 +8542,18 @@ function GeneratorPanelShell({ core, slots }) {
         tracksByDbId.set(t.handle.id, t);
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: activePlaceholders.map((ph) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: activePlaceholders.map((ph) => {
       const loadedTrack = ph.status === "completed" ? tracksByDbId.get(ph.id) : void 0;
       if (loadedTrack) {
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TrackRow, { ...buildRowProps(loadedTrack) }, ph.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TrackRow, { ...buildRowProps(loadedTrack) }, ph.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           "data-testid": "bulk-placeholder-track",
           className: "relative rounded-sm border w-full overflow-hidden border-sas-border bg-sas-panel-alt",
           style: { borderLeftColor: identity.placeholderAccentColor, borderLeftWidth: "3px" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SorceryProgressBar, { isLoading: true, statusText: "CONJURING MIDI...", heightClass: "h-10" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SorceryProgressBar, { isLoading: true, statusText: "CONJURING MIDI...", heightClass: "h-10" })
         },
         ph.id
       );
@@ -8397,13 +8565,13 @@ function GeneratorPanelShell({ core, slots }) {
     supportsMeters,
     levels: supportsMeters ? trackLevels : void 0,
     handlers,
-    renderDefaultTrackRow: (track, overrides, drag) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TrackRow, { ...{ ...buildRowProps(track, drag), ...overrides ?? {} } }, track.handle.id),
+    renderDefaultTrackRow: (track, overrides, drag) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TrackRow, { ...{ ...buildRowProps(track, drag), ...overrides ?? {} } }, track.handle.id),
     setGroupMute,
     setGroupSolo,
     deleteGroup
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: [
-    features.importTracks && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: [
+    features.importTracks && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       ImportTrackModal,
       {
         host,
@@ -8416,7 +8584,7 @@ function GeneratorPanelShell({ core, slots }) {
         testIdPrefix: `${identity.familyKey}-import`
       }
     ),
-    features.importTracks && host.listImportableTracks && host.getTrackSound && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    features.importTracks && host.listImportableTracks && host.getTrackSound && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       ImportTrackModal,
       {
         host,
@@ -8431,7 +8599,7 @@ function GeneratorPanelShell({ core, slots }) {
       }
     ),
     slots?.modals,
-    canCrossfade && xfFromId && xfToId && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: designerView ? "contents" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    canCrossfade && xfFromId && xfToId && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: designerView ? "contents" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       TransitionDesigner,
       {
         host,
@@ -8450,8 +8618,8 @@ function GeneratorPanelShell({ core, slots }) {
         testIdPrefix: `${identity.familyKey}-transition-designer`
       }
     ) }),
-    !(designerView && canCrossfade) && (isLoadingTracks ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sas-muted text-xs text-center py-4", children: "Loading tracks..." }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-      panelBus.supported && panelBus.bus && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    !(designerView && canCrossfade) && (isLoadingTracks ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sas-muted text-xs text-center py-4", children: "Loading tracks..." }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      panelBus.supported && panelBus.bus && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         PanelMasterStrip,
         {
           bus: panelBus.bus,
@@ -8472,7 +8640,7 @@ function GeneratorPanelShell({ core, slots }) {
         }
       ),
       slots?.beforeRows,
-      resolvedCrossfadePairs.map((pair) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      resolvedCrossfadePairs.map((pair) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         CrossfadeTrackRow,
         {
           accentColor: identity.transitionAccentColor,
@@ -8509,7 +8677,7 @@ function GeneratorPanelShell({ core, slots }) {
         },
         pair.groupId
       )),
-      resolvedSingleFades.map((fade) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      resolvedSingleFades.map((fade) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         FadeTrackRow,
         {
           accentColor: identity.transitionAccentColor,
@@ -8534,7 +8702,7 @@ function GeneratorPanelShell({ core, slots }) {
         },
         fade.dbId
       )),
-      resolvedGroupFades.map((group) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      resolvedGroupFades.map((group) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         GroupFadeTrackRow,
         {
           accentColor: identity.transitionAccentColor,
@@ -8570,20 +8738,20 @@ function GeneratorPanelShell({ core, slots }) {
         group.groupId
       )),
       (adapter.groupExtensions ?? []).flatMap(
-        (ext) => (resolvedGenericGroups[ext.metaKey]?.resolved ?? []).filter((group) => !group.members.every((m) => fadeMemberDbIds.has(m.dbId))).map((group) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react31.default.Fragment, { children: ext.renderGroup(group, groupCtx) }, `${ext.metaKey}:${group.groupId}`))
+        (ext) => (resolvedGenericGroups[ext.metaKey]?.resolved ?? []).filter((group) => !group.members.every((m) => fadeMemberDbIds.has(m.dbId))).map((group) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react32.default.Fragment, { children: ext.renderGroup(group, groupCtx) }, `${ext.metaKey}:${group.groupId}`))
       ),
       tracks.map((track, index) => {
         if (crossfadeMemberDbIds.has(track.handle.dbId) || fadeMemberDbIds.has(track.handle.dbId) || genericGroupMemberDbIds.has(track.handle.dbId)) {
           return null;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TrackRow, { ...buildRowProps(track, reorder.dragPropsFor(index)) }, track.handle.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TrackRow, { ...buildRowProps(track, reorder.dragPropsFor(index)) }, track.handle.id);
       }),
       slots?.afterRows
     ] })),
     features.exportMidi && !designerView && !isLoadingTracks && tracks.length > 0 && (() => {
       const hasAnyMidi = tracks.some((t) => t.hasMidi);
       const exportDisabled = isExportingMidi || !hasAnyMidi;
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           "data-testid": "export-midi-tracks-button",
@@ -9073,7 +9241,7 @@ Your previous ensemble had these problems \u2014 fix them while keeping everythi
 }
 
 // src/constants/sdk-version.ts
-var PLUGIN_SDK_VERSION = "2.45.0";
+var PLUGIN_SDK_VERSION = "2.46.0";
 
 // src/utils/format-concurrent-tracks.ts
 function formatConcurrentTracks(ctx) {
@@ -9282,6 +9450,7 @@ function pickTopKWeighted(scored, options = {}) {
   TRANSITION_DESIGNER_DRAFT_KEY,
   TrackDrawer,
   TrackExternalFxSection,
+  TrackFreezeSection,
   TrackMeterStrip,
   TrackRow,
   TransitionDesigner,
@@ -9352,6 +9521,7 @@ function pickTopKWeighted(scored, options = {}) {
   useSceneState,
   useSoundHistory,
   useTrackExternalFx,
+  useTrackFreeze,
   useTrackLevel,
   useTrackLevels,
   useTrackMeter,