@signalsandsorcery/plugin-sdk 2.35.2 → 2.35.3

package/dist/index.js

@@ -74,6 +74,7 @@ __export(index_exports, {
   TEXTURAL_ROLES: () => TEXTURAL_ROLES,
   TRANSITION_DESIGNER_DRAFT_KEY: () => TRANSITION_DESIGNER_DRAFT_KEY,
   TrackDrawer: () => TrackDrawer,
+  TrackExternalFxSection: () => TrackExternalFxSection,
   TrackMeterStrip: () => TrackMeterStrip,
   TrackRow: () => TrackRow,
   TransitionDesigner: () => TransitionDesigner,
@@ -130,6 +131,7 @@ __export(index_exports, {
   usePanelBus: () => usePanelBus,
   useSceneState: () => useSceneState,
   useSoundHistory: () => useSoundHistory,
+  useTrackExternalFx: () => useTrackExternalFx,
   useTrackLevel: () => useTrackLevel,
   useTrackLevels: () => useTrackLevels,
   useTrackMeter: () => useTrackMeter,
@@ -206,11 +208,11 @@ var EMPTY_FX_DETAIL_STATE = {
 };
 
 // src/components/TrackRow.tsx
-var import_react9 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_lucide_react = require("lucide-react");
 
 // src/components/TrackDrawer.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/constants/fx-presets.ts
 var EQ_PRESETS = {
@@ -930,8 +932,250 @@ function PianoRollEditor({
   ] });
 }
 
-// src/components/TrackDrawer.tsx
+// src/components/TrackExternalFxSection.tsx
+var import_react3 = require("react");
+
+// src/hooks/useTrackExternalFx.ts
+var import_react2 = require("react");
+function useTrackExternalFx(host, trackId) {
+  const supported = typeof host.getTrackExternalFx === "function";
+  const [fx, setFx] = (0, import_react2.useState)(null);
+  const [availableFx, setAvailableFx] = (0, import_react2.useState)([]);
+  const [fxLoading, setFxLoading] = (0, import_react2.useState)(false);
+  const [pickerOpen, setPickerOpen] = (0, import_react2.useState)(false);
+  const fxLoadedRef = (0, import_react2.useRef)(false);
+  const loadSeqRef = (0, import_react2.useRef)(0);
+  const reload = (0, import_react2.useCallback)(async () => {
+    if (!supported || !trackId || !host.getTrackExternalFx) {
+      setFx(null);
+      return;
+    }
+    const seq = ++loadSeqRef.current;
+    try {
+      const list = await host.getTrackExternalFx(trackId);
+      if (loadSeqRef.current === seq) setFx(list);
+    } catch {
+    }
+  }, [host, trackId, supported]);
+  (0, import_react2.useEffect)(() => {
+    setFx(null);
+    setPickerOpen(false);
+    void reload();
+  }, [reload]);
+  const loadFxList = (0, import_react2.useCallback)(
+    async (force) => {
+      if (!supported || !host.getAvailableFx) return;
+      if (fxLoadedRef.current && !force) return;
+      setFxLoading(true);
+      try {
+        const list = await host.getAvailableFx();
+        setAvailableFx(list);
+        fxLoadedRef.current = true;
+      } catch {
+      } finally {
+        setFxLoading(false);
+      }
+    },
+    [host, supported]
+  );
+  const openPicker = (0, import_react2.useCallback)(
+    (open) => {
+      setPickerOpen(open);
+      if (open) void loadFxList(false);
+    },
+    [loadFxList]
+  );
+  const mutate = (0, import_react2.useCallback)(
+    (fn) => {
+      if (!fn || !trackId) return;
+      void (async () => {
+        try {
+          await fn();
+        } catch {
+        }
+        await reload();
+      })();
+    },
+    [trackId, reload]
+  );
+  return {
+    supported,
+    fx,
+    availableFx,
+    fxLoading,
+    pickerOpen,
+    setPickerOpen: openPicker,
+    refreshFx: () => void loadFxList(true),
+    reload,
+    onAddFx: (pluginId) => mutate(host.loadTrackExternalFx && (async () => {
+      await host.loadTrackExternalFx(trackId, pluginId);
+    })),
+    onRemoveFx: (fxIndex) => mutate(host.removeTrackExternalFx && (() => host.removeTrackExternalFx(trackId, fxIndex))),
+    onToggleFxEnabled: (fxIndex, enabled) => mutate(
+      host.setTrackExternalFxEnabled && (() => host.setTrackExternalFxEnabled(trackId, fxIndex, enabled))
+    ),
+    onShowFxEditor: (fxIndex) => mutate(
+      host.showTrackExternalFxEditor && (() => host.showTrackExternalFxEditor(trackId, fxIndex))
+    )
+  };
+}
+
+// src/components/TrackExternalFxSection.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function TrackExternalFxSection({
+  host,
+  trackId,
+  disabled = false
+}) {
+  const {
+    supported,
+    fx,
+    availableFx,
+    fxLoading,
+    pickerOpen,
+    setPickerOpen,
+    refreshFx,
+    onAddFx,
+    onRemoveFx,
+    onToggleFxEnabled,
+    onShowFxEditor
+  } = useTrackExternalFx(host, trackId);
+  const [search, setSearch] = (0, import_react3.useState)("");
+  const filtered = (0, import_react3.useMemo)(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return availableFx;
+    return availableFx.filter(
+      (candidate) => candidate.name.toLowerCase().includes(q) || candidate.manufacturer.toLowerCase().includes(q)
+    );
+  }, [availableFx, search]);
+  if (!supported) return null;
+  const entries = fx ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      "data-testid": "track-external-fx-section",
+      className: "flex flex-col gap-1.5 pt-2 mt-1 border-t border-sas-border/60",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              className: "text-[9px] font-bold tracking-widest text-sas-muted/70 select-none",
+              title: "Third-party FX inserts (VST3/AU) on this track, before its fader. Settings persist with the project.",
+              children: "3RD-PARTY FX"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto", children: [
+            entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "span",
+              {
+                "data-testid": `track-fx-chip-${entry.index}`,
+                className: `flex items-center gap-1 px-1.5 py-0.5 rounded-sm border text-[10px] whitespace-nowrap ${entry.enabled ? "border-sas-accent/60 text-sas-accent bg-sas-accent/10" : "border-sas-border text-sas-muted/50 bg-sas-panel"}`,
+                title: `${entry.name}${entry.enabled ? "" : " (bypassed)"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "button",
+                    {
+                      "data-testid": `track-fx-toggle-${entry.index}`,
+                      onClick: () => onToggleFxEnabled(entry.index, !entry.enabled),
+                      disabled,
+                      className: "hover:opacity-70 disabled:opacity-50",
+                      title: entry.enabled ? `Bypass ${entry.name}` : `Enable ${entry.name}`,
+                      children: entry.enabled ? "\u25CF" : "\u25CB"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "button",
+                    {
+                      "data-testid": `track-fx-edit-${entry.index}`,
+                      onClick: () => onShowFxEditor(entry.index),
+                      disabled,
+                      className: "max-w-[110px] truncate hover:underline disabled:opacity-50",
+                      title: `Open ${entry.name} editor`,
+                      children: entry.name
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "button",
+                    {
+                      "data-testid": `track-fx-remove-${entry.index}`,
+                      onClick: () => onRemoveFx(entry.index),
+                      disabled,
+                      className: "text-sas-muted/60 hover:text-sas-danger disabled:opacity-50",
+                      title: `Remove ${entry.name} from this track`,
+                      children: "\u2715"
+                    }
+                  )
+                ]
+              },
+              `${entry.index}:${entry.pluginId}`
+            )),
+            entries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] text-sas-muted/40 select-none", children: "none" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              "data-testid": "track-fx-add-button",
+              onClick: () => setPickerOpen(!pickerOpen),
+              disabled,
+              className: `px-1.5 py-0.5 rounded-sm border text-xs whitespace-nowrap transition-colors ${pickerOpen ? "border-sas-accent text-sas-accent bg-sas-accent/10" : "border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"} disabled:opacity-50`,
+              title: pickerOpen ? "Close the FX picker" : "Add a VST3/AU FX plugin to this track",
+              children: pickerOpen ? "FX \u25B4" : "FX +"
+            }
+          )
+        ] }),
+        pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-testid": "track-fx-picker", className: "flex flex-col gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                type: "text",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: "Search FX...",
+                className: "sas-input flex-1 px-2 py-1 text-xs"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => refreshFx(),
+                disabled: fxLoading,
+                className: "px-2 py-1 text-xs rounded-sm border border-sas-border text-sas-muted hover:text-sas-accent hover:border-sas-accent transition-colors disabled:opacity-50",
+                title: "Re-scan plugins",
+                children: fxLoading ? "..." : "Refresh"
+              }
+            )
+          ] }),
+          fxLoading && availableFx.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
+            filtered.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "button",
+              {
+                "data-testid": `track-fx-pick-${candidate.pluginId}`,
+                onClick: () => {
+                  onAddFx(candidate.pluginId);
+                  setPickerOpen(false);
+                },
+                disabled,
+                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 disabled:opacity-50",
+                title: `${candidate.name} by ${candidate.manufacturer} (${candidate.type.toUpperCase()})`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium truncate w-full", children: candidate.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: candidate.manufacturer || candidate.type.toUpperCase() })
+                ]
+              },
+              candidate.pluginId
+            )),
+            filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.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" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/TrackDrawer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var TAB_LABELS = {
   fx: "FX",
   pick: "Pick",
@@ -948,6 +1192,7 @@ function TrackDrawer({
   onFxPresetChange,
   onFxDryWetChange,
   fxDisabled = false,
+  externalFxHost,
   instruments = [],
   currentPluginId = null,
   isLoading = false,
@@ -970,13 +1215,13 @@ function TrackDrawer({
   editSnap,
   onAuditionNote
 }) {
-  const [search, setSearch] = (0, import_react2.useState)("");
+  const [search, setSearch] = (0, import_react4.useState)("");
   const fxEnabled = !!onFxToggle;
   const pickEnabled = !!onSelect;
   const historyEnabled = !!onRestoreSound;
   const importEnabled = !!onImportSound;
   const editEnabled = !!onNotesChange;
-  const enabledTabs = (0, import_react2.useMemo)(() => {
+  const enabledTabs = (0, import_react4.useMemo)(() => {
     const tabs = [];
     if (fxEnabled) tabs.push("fx");
     if (pickEnabled) tabs.push("pick");
@@ -986,7 +1231,7 @@ function TrackDrawer({
     return tabs;
   }, [fxEnabled, pickEnabled, historyEnabled, importEnabled, editEnabled]);
   const SURGE_XT_DEFAULT_ID = "Surge XT";
-  const filtered = (0, import_react2.useMemo)(() => {
+  const filtered = (0, import_react4.useMemo)(() => {
     let all = instruments.filter((i) => i.name !== "Surge XT");
     if (search.trim()) {
       const q = search.toLowerCase();
@@ -1006,12 +1251,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_runtime3.jsx)(
+  const strip = enabledTabs.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.jsx)(
+      children: enabledTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           type: "button",
@@ -1025,9 +1270,9 @@ function TrackDrawer({
     }
   ) : null;
   const currentSound = soundHistoryCursor >= 0 && soundHistoryCursor < history.length ? history[soundHistoryCursor].label : null;
-  const header = strip || currentSound ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1", "data-testid": "sdk-drawer-header", children: [
+  const header = strip || currentSound ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1", "data-testid": "sdk-drawer-header", children: [
     strip,
-    currentSound && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    currentSound && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "span",
       {
         className: "text-[10px] text-sas-muted/60 truncate px-0.5",
@@ -1037,9 +1282,9 @@ function TrackDrawer({
     )
   ] }) : null;
   if (effectiveTab === "edit") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-edit", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-edit", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         PianoRollEditor,
         {
           notes: editNotes ?? [],
@@ -1054,9 +1299,9 @@ function TrackDrawer({
     ] });
   }
   if (effectiveTab === "fx") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-fx", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-fx", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         FxToggleBar,
         {
           trackId,
@@ -1066,20 +1311,21 @@ function TrackDrawer({
           onDryWetChange: (_t, category, value) => onFxDryWetChange?.(category, value),
           disabled: fxDisabled
         }
-      )
+      ),
+      externalFxHost && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-import", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-import", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-[11px] text-sas-muted/70 leading-snug", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           type: "button",
@@ -1097,16 +1343,16 @@ function TrackDrawer({
   }
   if (effectiveTab === "history") {
     const order = history.map((_, i) => i).reverse();
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
       header,
-      history.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      history.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "ul",
         {
           className: "flex flex-col gap-1 max-h-[160px] overflow-y-auto",
@@ -1114,8 +1360,8 @@ function TrackDrawer({
           children: order.map((i) => {
             const entry = history[i];
             const isCurrent = i === soundHistoryCursor;
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -1125,12 +1371,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_runtime3.jsx)("span", { className: "truncate", children: entry.label }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] text-sas-muted/60 flex-shrink-0 ml-2", children: isCurrent ? "\u25CF current" : "restore" })
+                    /* @__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" })
                   ]
                 }
               ),
-              onToggleFavorite && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              onToggleFavorite && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1148,10 +1394,10 @@ function TrackDrawer({
     ] });
   }
   if (effectiveTab === "pick" && editorStage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             onClick: () => onBackToInstruments?.(),
@@ -1159,9 +1405,9 @@ function TrackDrawer({
             children: "\u2190 Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-sas-muted font-medium truncate flex-1", children: selectedInstrumentName ?? "Plugin" })
+        /* @__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_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           onClick: () => onShowEditor?.(),
@@ -1173,10 +1419,10 @@ function TrackDrawer({
   }
   const isDefaultSelected = currentPluginId === null;
   const isSelected = (pluginId) => pluginId === currentPluginId;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
     header,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
           type: "text",
@@ -1186,7 +1432,7 @@ function TrackDrawer({
           className: "sas-input flex-1 px-2 py-1 text-xs"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           onClick: () => onRefresh?.(),
@@ -1197,54 +1443,54 @@ function TrackDrawer({
         }
       )
     ] }),
-    isLoading && instruments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    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)(
         "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_runtime3.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
               isDefaultSelected && "\u2713 ",
               "Surge XT"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: "Default" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium truncate w-full", children: [
                 selected && "\u2713 ",
                 inst.name
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: inst.manufacturer || inst.type.toUpperCase() })
+              /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.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_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" })
     ] })
   ] });
 }
 
 // src/components/ConfirmDialog.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/components/Modal.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Modal({
   open,
   onClose,
@@ -1254,7 +1500,7 @@ function Modal({
   closeOnEscape = true,
   initialFocusRef
 }) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (closeOnEscape && e.key === "Escape") {
@@ -1268,7 +1514,7 @@ function Modal({
   }, [open, onClose, closeOnEscape, initialFocusRef]);
   if (!open) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         className: "fixed inset-0 z-[1000] flex items-center justify-center bg-black/60",
@@ -1282,7 +1528,7 @@ function Modal({
 }
 
 // src/components/ConfirmDialog.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ConfirmDialog({
   open,
   title,
@@ -1294,8 +1540,8 @@ function ConfirmDialog({
   onCancel,
   testIdPrefix = "confirm-dialog"
 }) {
-  const cancelRef = (0, import_react4.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Modal, { open, onClose: onCancel, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  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)(
     "div",
     {
       className: "w-[360px] max-w-[90vw] flex flex-col rounded-md border border-sas-border bg-sas-panel shadow-xl",
@@ -1305,8 +1551,8 @@ function ConfirmDialog({
       "aria-label": title,
       "data-testid": `${testIdPrefix}-modal`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-4 py-3 border-b border-sas-border", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm font-medium text-sas-text", "data-testid": `${testIdPrefix}-title`, children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__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)(
           "div",
           {
             className: "px-4 py-3 text-xs text-sas-muted leading-relaxed break-words",
@@ -1314,8 +1560,8 @@ function ConfirmDialog({
             children: message
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-end gap-2 px-4 py-3 border-t border-sas-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__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)(
             "button",
             {
               ref: cancelRef,
@@ -1326,7 +1572,7 @@ function ConfirmDialog({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -1343,7 +1589,7 @@ function ConfirmDialog({
 }
 
 // src/components/LevelMeter.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var COLOR_GREEN = "#2BD576";
 var COLOR_ORANGE = "#F5A623";
 var COLOR_RED = "#FF4D5E";
@@ -1371,7 +1617,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_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: `sas-level-meter ${className ?? ""}`,
@@ -1382,7 +1628,7 @@ var LevelMeter = ({
         gap: compact ? 0 : 6
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             style: {
@@ -1396,8 +1642,8 @@ var LevelMeter = ({
               minWidth: compact ? 0 : 60
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { position: "absolute", inset: 0, background: METER_GRADIENT } }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { position: "absolute", inset: 0, background: METER_GRADIENT } }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   style: {
@@ -1411,7 +1657,7 @@ var LevelMeter = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   "data-testid": `${id}-segments`,
@@ -1424,7 +1670,7 @@ var LevelMeter = ({
                   }
                 }
               ),
-              showPeak && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              showPeak && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   "data-testid": `${id}-peak`,
@@ -1445,7 +1691,7 @@ var LevelMeter = ({
             ]
           }
         ),
-        !compact && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        !compact && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
             style: {
@@ -1458,7 +1704,7 @@ var LevelMeter = ({
             children: active && peakDb > -120 ? `${peakDb.toFixed(0)} dB` : "\u2014"
           }
         ),
-        clipped && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        clipped && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
             "data-testid": `${id}-clip`,
@@ -1483,7 +1729,7 @@ var LevelMeter = ({
 };
 
 // src/hooks/useTrackLevels.ts
-var import_react5 = require("react");
+var import_react7 = require("react");
 var meterDiagRLast = /* @__PURE__ */ new Map();
 var POLL_INTERVAL_MS = 33;
 var HIDDEN_RECHECK_MS = 250;
@@ -1494,9 +1740,9 @@ function isHidden() {
   return typeof document !== "undefined" && document.hidden === true;
 }
 function useTrackLevels(host, enabled = true) {
-  const mapRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
-  const listenersRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
-  const handleRef = (0, import_react5.useRef)(null);
+  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);
   if (handleRef.current === null) {
     handleRef.current = {
       getLevel: (trackId) => mapRef.current.get(trackId) ?? null,
@@ -1508,7 +1754,7 @@ function useTrackLevels(host, enabled = true) {
       }
     };
   }
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const notify = () => {
       listenersRef.current.forEach((l) => l());
     };
@@ -1578,8 +1824,8 @@ function sameLevel(a, b) {
   return a.peakDb === b.peakDb && a.clipped === b.clipped;
 }
 function useTrackLevel(handle, trackId) {
-  const [level, setLevel] = (0, import_react5.useState)(null);
-  (0, import_react5.useEffect)(() => {
+  const [level, setLevel] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
     if (!handle) {
       setLevel(null);
       return;
@@ -1603,11 +1849,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_react5.useState)(IDLE_METER_VIEW);
-  const heldDbRef = (0, import_react5.useRef)(METER_FLOOR_DB);
-  const heldAtRef = (0, import_react5.useRef)(0);
-  const lastTickRef = (0, import_react5.useRef)(0);
-  (0, import_react5.useEffect)(() => {
+  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)(() => {
     if (!handle) {
       heldDbRef.current = METER_FLOOR_DB;
       lastTickRef.current = 0;
@@ -1650,8 +1896,8 @@ function useTrackMeter(handle, trackId) {
   return view;
 }
 function useTransportPlaying(host) {
-  const [playing, setPlaying] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [playing, setPlaying] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     if (!host) {
       setPlaying(false);
       return;
@@ -1679,7 +1925,7 @@ function useTransportPlaying(host) {
 }
 
 // src/components/TrackMeterStrip.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var TrackMeterStrip = ({
   levels,
   trackId,
@@ -1687,12 +1933,12 @@ var TrackMeterStrip = ({
   className
 }) => {
   const meter = useTrackMeter(levels, trackId);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         LevelMeter,
         {
           compact: true,
@@ -1708,7 +1954,7 @@ var TrackMeterStrip = ({
 };
 
 // src/components/VolumeSlider.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/utils/volume-conversion.ts
 var SLIDER_UNITY = 0.75;
@@ -1730,7 +1976,7 @@ function dbToSlider(db) {
 }
 
 // src/components/VolumeSlider.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function formatDb(value) {
   const db = sliderToDb(value);
   if (db <= -60) return "-\u221E dB";
@@ -1738,12 +1984,12 @@ function formatDb(value) {
   return `${sign}${db.toFixed(1)} dB`;
 }
 function useDebouncedCallback(callback, delay) {
-  const timeoutRef = (0, import_react6.useRef)(null);
-  const callbackRef = (0, import_react6.useRef)(callback);
-  (0, import_react6.useEffect)(() => {
+  const timeoutRef = (0, import_react8.useRef)(null);
+  const callbackRef = (0, import_react8.useRef)(callback);
+  (0, import_react8.useEffect)(() => {
     callbackRef.current = callback;
   }, [callback]);
-  const debouncedCallback = (0, import_react6.useCallback)(
+  const debouncedCallback = (0, import_react8.useCallback)(
     (...args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1754,7 +2000,7 @@ function useDebouncedCallback(callback, delay) {
     },
     [delay]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1769,15 +2015,15 @@ var VolumeSlider = ({
   disabled = false,
   className = ""
 }) => {
-  const [localValue, setLocalValue] = (0, import_react6.useState)(value);
-  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [localValue, setLocalValue] = (0, import_react8.useState)(value);
+  const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     if (!isDragging) {
       setLocalValue(value);
     }
   }, [value, isDragging]);
   const debouncedOnChange = useDebouncedCallback(onChange, 50);
-  const handleChange = (0, import_react6.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (e) => {
       const newValue = parseFloat(e.target.value);
       setLocalValue(newValue);
@@ -1785,19 +2031,19 @@ var VolumeSlider = ({
     },
     [debouncedOnChange]
   );
-  const handleMouseDown = (0, import_react6.useCallback)(() => {
+  const handleMouseDown = (0, import_react8.useCallback)(() => {
     setIsDragging(true);
   }, []);
-  const handleMouseUp = (0, import_react6.useCallback)(() => {
+  const handleMouseUp = (0, import_react8.useCallback)(() => {
     setIsDragging(false);
     onChange(localValue);
   }, [localValue, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       className: `flex items-center ${className}`,
       title: `Volume: ${formatDb(localValue)}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "input",
         {
           type: "range",
@@ -1837,8 +2083,8 @@ var VolumeSlider = ({
 };
 
 // src/components/PanSlider.tsx
-var import_react7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function toPanDisplay(value) {
   if (Math.abs(value) < 0.02) {
     return "Center";
@@ -1847,12 +2093,12 @@ function toPanDisplay(value) {
   return value < 0 ? `L${percent}` : `R${percent}`;
 }
 function useDebouncedCallback2(callback, delay) {
-  const timeoutRef = (0, import_react7.useRef)(null);
-  const callbackRef = (0, import_react7.useRef)(callback);
-  (0, import_react7.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_react7.useCallback)(
+  const debouncedCallback = (0, import_react9.useCallback)(
     (...args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1863,7 +2109,7 @@ function useDebouncedCallback2(callback, delay) {
     },
     [delay]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1878,15 +2124,15 @@ var PanSlider = ({
   disabled = false,
   className = ""
 }) => {
-  const [localValue, setLocalValue] = (0, import_react7.useState)(value);
-  const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
-  (0, import_react7.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 = useDebouncedCallback2(onChange, 50);
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react9.useCallback)(
     (e) => {
       const newValue = parseFloat(e.target.value);
       setLocalValue(newValue);
@@ -1894,23 +2140,23 @@ var PanSlider = ({
     },
     [debouncedOnChange]
   );
-  const handleMouseDown = (0, import_react7.useCallback)(() => {
+  const handleMouseDown = (0, import_react9.useCallback)(() => {
     setIsDragging(true);
   }, []);
-  const handleMouseUp = (0, import_react7.useCallback)(() => {
+  const handleMouseUp = (0, import_react9.useCallback)(() => {
     setIsDragging(false);
     onChange(localValue);
   }, [localValue, onChange]);
-  const handleDoubleClick = (0, import_react7.useCallback)(() => {
+  const handleDoubleClick = (0, import_react9.useCallback)(() => {
     setLocalValue(0);
     onChange(0);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       className: `flex items-center ${className}`,
       title: `Pan: ${toPanDisplay(localValue)}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "input",
         {
           type: "range",
@@ -1951,8 +2197,8 @@ var PanSlider = ({
 };
 
 // src/components/SorceryProgressBar.tsx
-var import_react8 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function calculateTimeBasedTarget(elapsedMs, estimatedDurationMs) {
   const t = elapsedMs / estimatedDurationMs;
   if (t <= 0) return 0;
@@ -1997,20 +2243,20 @@ function SorceryProgressBar({
   onProgressChange,
   estimatedDurationMs
 }) {
-  const [progress, setProgress] = (0, import_react8.useState)(initialProgress);
-  const timerRef = (0, import_react8.useRef)(null);
-  const isLoadingRef = (0, import_react8.useRef)(false);
-  const hasStartedRef = (0, import_react8.useRef)(false);
-  const startTimeRef = (0, import_react8.useRef)(0);
-  const onProgressChangeRef = (0, import_react8.useRef)(onProgressChange);
-  const onCompleteRef = (0, import_react8.useRef)(onComplete);
+  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);
   onProgressChangeRef.current = onProgressChange;
   onCompleteRef.current = onComplete;
-  const initialProgressRef = (0, import_react8.useRef)(initialProgress);
+  const initialProgressRef = (0, import_react10.useRef)(initialProgress);
   initialProgressRef.current = initialProgress;
-  const estimatedDurationMsRef = (0, import_react8.useRef)(estimatedDurationMs);
+  const estimatedDurationMsRef = (0, import_react10.useRef)(estimatedDurationMs);
   estimatedDurationMsRef.current = estimatedDurationMs;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const wasLoading = isLoadingRef.current;
     isLoadingRef.current = isLoading;
     if (isLoading && !wasLoading) {
@@ -2072,12 +2318,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_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             className: `
@@ -2095,13 +2341,13 @@ function SorceryProgressBar({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: isLoading && progress < 100 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono text-xs text-sas-accent font-bold drop-shadow-md tracking-wider", children: [
+        /* @__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: [
           statusText,
           " ",
           displayProgress,
           "%"
-        ] }) : isComplete ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono text-xs text-sas-text font-bold drop-shadow-md tracking-wider", children: completeText }) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ] }) : 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)(
           "div",
           {
             className: "absolute inset-0 pointer-events-none opacity-10",
@@ -2122,7 +2368,7 @@ function SorceryProgressBar({
 }
 
 // src/components/TrackRow.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TrackRow({
   track,
   prompt,
@@ -2151,6 +2397,7 @@ function TrackRow({
   onFxToggle,
   onFxPresetChange,
   onFxDryWetChange,
+  externalFxHost,
   onToggleFxDrawer,
   onProgressChange,
   accentColor = "#A78BFA",
@@ -2181,7 +2428,7 @@ function TrackRow({
   levels
 }) {
   const { muted: isMuted, solo: isSoloed, volume: currentVolume, pan: currentPan } = runtimeState;
-  const [confirmDelete, setConfirmDelete] = import_react9.default.useState(false);
+  const [confirmDelete, setConfirmDelete] = import_react11.default.useState(false);
   const needsGeneration = !!(prompt?.trim() && !hasMidi && !isGenerating);
   const hasFxActive = Object.values(fxDetailState).some(
     (d) => d.enabled
@@ -2196,8 +2443,8 @@ function TrackRow({
   };
   const borderColorStyle = needsGeneration ? void 0 : accentColor;
   const borderClass = needsGeneration ? "border-amber-400 animate-pulse" : "border-sas-border";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-testid": "sdk-track-row-wrapper", className: "w-full", ...drag?.rowProps ?? {}, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  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)(
       "div",
       {
         "data-testid": "sdk-track-row",
@@ -2207,7 +2454,7 @@ function TrackRow({
           borderLeftWidth: "3px"
         },
         children: [
-          drag && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          drag && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
               "data-testid": "sdk-drag-handle",
@@ -2215,10 +2462,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_runtime11.jsx)(import_lucide_react.GripVertical, { className: "w-3.5 h-3.5", strokeWidth: 2 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react.GripVertical, { className: "w-3.5 h-3.5", strokeWidth: 2 })
             }
           ),
-          isGenerating && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute left-0 top-0 bottom-0 right-44 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          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)(
             SorceryProgressBar,
             {
               isLoading: true,
@@ -2229,14 +2476,14 @@ function TrackRow({
               estimatedDurationMs: estimatedGenerationMs
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime11.jsx)(
+                contentSlot ? contentSlot : onPromptChange ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2249,10 +2496,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_runtime11.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
-                  track.name && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "vol:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__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)(
                     VolumeSlider,
                     {
                       value: currentVolume,
@@ -2261,8 +2508,8 @@ function TrackRow({
                       className: "flex-1 min-w-[40px]"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "pan:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  /* @__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)(
                     PanSlider,
                     {
                       value: currentPan,
@@ -2275,27 +2522,27 @@ function TrackRow({
               ]
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          error && /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime11.jsxs)("div", { className: "relative", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   import_lucide_react.AlertCircle,
                   {
                     className: "w-5 h-5 text-red-500 animate-pulse",
                     strokeWidth: 2.5
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.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.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_runtime11.jsxs)("div", { className: "flex flex-col gap-0.5 flex-shrink-0 relative z-30 justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-1 items-center", children: [
-              onGenerate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__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)(
                 "button",
                 {
                   "data-testid": "sdk-generate-button",
@@ -2306,7 +2553,7 @@ function TrackRow({
                   children: "Create"
                 }
               ),
-              onCopy && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              onCopy && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-copy-button",
@@ -2317,7 +2564,7 @@ function TrackRow({
                   children: "Copy"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-mute-button",
@@ -2327,7 +2574,7 @@ function TrackRow({
                   children: "M"
                 }
               ),
-              onDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              onDelete && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-delete-button",
@@ -2338,8 +2585,8 @@ function TrackRow({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-1 items-center", children: [
-              onShuffle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-1 items-center", children: [
+              onShuffle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-shuffle-button",
@@ -2350,7 +2597,7 @@ function TrackRow({
                   children: "Shuffle"
                 }
               ),
-              onToggleFxDrawer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              onToggleFxDrawer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-fx-button",
@@ -2361,7 +2608,7 @@ function TrackRow({
                   children: "FX"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-solo-button",
@@ -2372,7 +2619,7 @@ function TrackRow({
                   children: "S"
                 }
               ),
-              onToggleDrawer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              onToggleDrawer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   "data-testid": "sdk-plugin-button",
@@ -2380,7 +2627,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_runtime11.jsx)(import_lucide_react.ChevronDown, { className: "w-3 h-3", strokeWidth: 2.5 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react.ChevronDown, { className: "w-3 h-3", strokeWidth: 2.5 })
                 }
               )
             ] })
@@ -2388,13 +2635,13 @@ function TrackRow({
         ]
       }
     ),
-    levels && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TrackMeterStrip, { levels, trackId: track.id, roundBottom: !drawerOpen }),
-    drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    levels && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TrackMeterStrip, { levels, trackId: track.id, roundBottom: !drawerOpen }),
+    drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           TrackDrawer,
           {
             activeTab: drawerTab,
@@ -2404,6 +2651,7 @@ function TrackRow({
             onFxToggle,
             onFxPresetChange,
             onFxDryWetChange,
+            externalFxHost,
             fxDisabled: isGenerating,
             instruments: availableInstruments,
             currentPluginId: currentInstrumentPluginId ?? null,
@@ -2430,13 +2678,13 @@ function TrackRow({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ConfirmDialog,
       {
         open: confirmDelete,
         title: "Delete track?",
-        message: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sas-text", children: track.name?.trim() || "This 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" }),
           " will be permanently removed from this scene. This cannot be undone."
         ] }),
         confirmLabel: "Delete",
@@ -2452,13 +2700,13 @@ function TrackRow({
 }
 
 // src/components/CrossfadeTrackRow.tsx
-var import_react10 = __toESM(require("react"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react12 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function LayerCaption({ tag, layer }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] text-sas-text truncate", title: layer.sourceName ?? layer.name, children: layer.sourceName ?? layer.name }),
+    layer.soundLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
       "\xB7 ",
       layer.soundLabel
     ] })
@@ -2477,8 +2725,8 @@ function CrossfadeTrackRow({
   levels,
   accentColor = "#9333EA"
 }) {
-  const [confirmDelete, setConfirmDelete] = import_react10.default.useState(false);
-  const renderLayer = (layer, slot, tag) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const [confirmDelete, setConfirmDelete] = import_react12.default.useState(false);
+  const renderLayer = (layer, slot, tag) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     TrackRow,
     {
       track: { id: layer.trackId, name: "", role: layer.role },
@@ -2488,23 +2736,23 @@ function CrossfadeTrackRow({
       drawerTab: "fx",
       levels,
       accentColor,
-      contentSlot: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayerCaption, { tag, layer }),
+      contentSlot: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LayerCaption, { tag, layer }),
       onMuteToggle,
       onSoloToggle,
       onVolumeChange: (v) => onVolumeChange(slot, v),
       onPanChange: (p) => onPanChange(slot, p)
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime12.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", style: { color: accentColor }, children: "\u21C4 Crossfade" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__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)(
             "button",
             {
               "data-testid": "crossfade-delete-button",
@@ -2517,8 +2765,8 @@ function CrossfadeTrackRow({
           )
         ] }),
         renderLayer(origin, "origin", "Origin"),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "crossfade-slider-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__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)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
@@ -2526,7 +2774,7 @@ function CrossfadeTrackRow({
               children: origin.sourceName ?? origin.name
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "input",
             {
               type: "range",
@@ -2542,7 +2790,7 @@ function CrossfadeTrackRow({
               "aria-label": "Crossfade position"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
@@ -2552,12 +2800,12 @@ function CrossfadeTrackRow({
           )
         ] }),
         renderLayer(target, "target", "Target"),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ConfirmDialog,
           {
             open: confirmDelete,
             title: "Delete crossfade?",
-            message: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: "This crossfade pair (both layers) will be permanently removed from this scene. This cannot be undone." }),
+            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." }),
             confirmLabel: "Delete",
             onConfirm: () => {
               setConfirmDelete(false);
@@ -2800,22 +3048,22 @@ function defaultFadeGesture(role) {
 }
 
 // src/components/FadeTrackRow.tsx
-var import_react11 = __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 FadeCaption({
   layer,
   direction,
   gesture
 }) {
   const tag = direction === "in" ? "Fade in" : "Fade out";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] text-sas-text truncate", title: layer.sourceName ?? layer.name, children: layer.sourceName ?? layer.name }),
-    layer.soundLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
+  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
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", title: `Fade gesture: ${gesture}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", title: `Fade gesture: ${gesture}`, children: [
       "\xB7 ",
       gesture
     ] })
@@ -2836,20 +3084,20 @@ function FadeTrackRow({
   levels,
   accentColor = "#9333EA"
 }) {
-  const [confirmDelete, setConfirmDelete] = import_react11.default.useState(false);
+  const [confirmDelete, setConfirmDelete] = import_react13.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_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       "data-testid": "fade-track-row",
       className: "w-full rounded-sm border border-sas-border bg-sas-panel/40 overflow-hidden",
       style: { borderLeftColor: accentColor, borderLeftWidth: "3px" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__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",
             {
               "data-testid": "fade-direction-badge",
@@ -2858,7 +3106,7 @@ function FadeTrackRow({
               children: badge
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
               "data-testid": "fade-delete-button",
@@ -2870,7 +3118,7 @@ function FadeTrackRow({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           TrackRow,
           {
             track: { id: layer.trackId, name: "", role: layer.role },
@@ -2880,15 +3128,15 @@ function FadeTrackRow({
             drawerTab: "fx",
             levels,
             accentColor,
-            contentSlot: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FadeCaption, { layer, direction, gesture }),
+            contentSlot: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FadeCaption, { layer, direction, gesture }),
             onMuteToggle,
             onSoloToggle,
             onVolumeChange,
             onPanChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "fade-slider-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__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)(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
@@ -2896,7 +3144,7 @@ function FadeTrackRow({
               children: leftLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "range",
@@ -2912,7 +3160,7 @@ function FadeTrackRow({
               "aria-label": "Fade 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",
@@ -2921,12 +3169,12 @@ function FadeTrackRow({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           ConfirmDialog,
           {
             open: confirmDelete,
             title: "Delete fade?",
-            message: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "This fade track will be permanently removed from this scene. This cannot be undone." }),
+            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." }),
             confirmLabel: "Delete",
             onConfirm: () => {
               setConfirmDelete(false);
@@ -2942,8 +3190,8 @@ function FadeTrackRow({
 }
 
 // src/components/FadeModal.tsx
-var import_react12 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function shortId(dbId) {
   return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
 }
@@ -2986,7 +3234,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_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "button",
     {
       type: "button",
@@ -2998,8 +3246,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_runtime14.jsx)("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
-        meta && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
+        meta && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
       ]
     }
   );
@@ -3016,14 +3264,14 @@ function FadeModal({
   onCreate,
   testIdPrefix = "fade-modal"
 }) {
-  const [load, setLoad] = (0, import_react12.useState)({ status: "loading" });
-  const [selectedDbId, setSelectedDbId] = (0, import_react12.useState)("");
-  const [isCreating, setIsCreating] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const [fromName, setFromName] = (0, import_react12.useState)(null);
-  const [toName, setToName] = (0, import_react12.useState)(null);
-  const cancelRef = (0, import_react12.useRef)(null);
-  const refresh = (0, import_react12.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react14.useState)({ status: "loading" });
+  const [selectedDbId, setSelectedDbId] = (0, import_react14.useState)("");
+  const [isCreating, setIsCreating] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [fromName, setFromName] = (0, import_react14.useState)(null);
+  const [toName, setToName] = (0, import_react14.useState)(null);
+  const cancelRef = (0, import_react14.useRef)(null);
+  const refresh = (0, import_react14.useCallback)(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support fades." });
       return;
@@ -3043,7 +3291,7 @@ function FadeModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
     }
   }, [host, fromSceneId, toSceneId]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (open) {
       setError(null);
       setIsCreating(false);
@@ -3051,29 +3299,29 @@ function FadeModal({
       void refresh();
     }
   }, [open, refresh]);
-  const excludeSet = (0, import_react12.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const { fadeOut, fadeIn } = (0, import_react12.useMemo)(
+  const excludeSet = (0, import_react14.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const { fadeOut, fadeIn } = (0, import_react14.useMemo)(
     () => load.status === "ready" ? computeOrphans(load.from, load.to, excludeSet) : { fadeOut: [], fadeIn: [] },
     [load, excludeSet]
   );
-  const allOrphans = (0, import_react12.useMemo)(
+  const allOrphans = (0, import_react14.useMemo)(
     () => [
       ...fadeOut.map((t) => ({ track: t, direction: "out" })),
       ...fadeIn.map((t) => ({ track: t, direction: "in" }))
     ],
     [fadeOut, fadeIn]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!allOrphans.some((o) => o.track.dbId === selectedDbId)) {
       setSelectedDbId(allOrphans[0]?.track.dbId ?? "");
     }
   }, [allOrphans, selectedDbId]);
   const selected = allOrphans.find((o) => o.track.dbId === selectedDbId) ?? null;
   const canCreate = !isCreating && !!selected;
-  const handleClose = (0, import_react12.useCallback)(() => {
+  const handleClose = (0, import_react14.useCallback)(() => {
     if (!isCreating) onClose();
   }, [isCreating, onClose]);
-  const handleCreate = (0, import_react12.useCallback)(async () => {
+  const handleCreate = (0, import_react14.useCallback)(async () => {
     if (!selected) return;
     setIsCreating(true);
     setError(null);
@@ -3094,16 +3342,16 @@ function FadeModal({
   if (!open) return null;
   const renderSection = (heading, list, section) => {
     if (list.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "block", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: heading }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "block", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
           role: "radiogroup",
           "aria-label": heading,
           "data-testid": `${testIdPrefix}-${section === "out" ? "fade-out" : "fade-in"}-list`,
           className: "mt-1 space-y-1 max-h-40 overflow-y-auto pr-0.5",
-          children: list.map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          children: list.map((t) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             OrphanRow,
             {
               track: t,
@@ -3119,32 +3367,32 @@ function FadeModal({
       )
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: "bg-sas-panel border border-sas-border rounded-md shadow-xl w-[420px] max-w-[92vw] p-4 space-y-3",
       onClick: (e) => e.stopPropagation(),
       "data-testid": `${testIdPrefix}-box`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add fade" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-bold text-sas-text", children: "Add fade" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
           "Tracks with no counterpart between",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
           " and",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
           " can gracefully fade out (leaving) or fade in (entering) across this transition."
         ] }),
-        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
-        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
-        load.status === "ready" && (allOrphans.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", "data-testid": `${testIdPrefix}-empty`, children: "Every track has a counterpart in the other scene \u2014 nothing to fade. Use \u201C+ Crossfade\u201D to bridge matching tracks." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
+        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
           renderSection(`Fade out${fromLabel ? ` (from ${fromLabel})` : ""}`, fadeOut, "out"),
           renderSection(`Fade in${toLabel ? ` (to ${toLabel})` : ""}`, fadeIn, "in")
         ] })),
-        error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               ref: cancelRef,
@@ -3155,7 +3403,7 @@ function FadeModal({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               "data-testid": `${testIdPrefix}-confirm`,
@@ -3172,8 +3420,8 @@ function FadeModal({
 }
 
 // src/components/ImportTrackModal.tsx
-var import_react13 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ImportTrackModal({
   host,
   open,
@@ -3185,10 +3433,10 @@ function ImportTrackModal({
   onPick,
   onPortTrack
 }) {
-  const [load, setLoad] = (0, import_react13.useState)({ status: "loading" });
-  const [selectedSceneId, setSelectedSceneId] = (0, import_react13.useState)(null);
-  const [importingTrackId, setImportingTrackId] = (0, import_react13.useState)(null);
-  const refresh = (0, import_react13.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react15.useState)({ status: "loading" });
+  const [selectedSceneId, setSelectedSceneId] = (0, import_react15.useState)(null);
+  const [importingTrackId, setImportingTrackId] = (0, import_react15.useState)(null);
+  const refresh = (0, import_react15.useCallback)(async () => {
     if (!host.listImportableTracks) {
       setLoad({ status: "error", message: "This host does not support importing tracks." });
       return;
@@ -3204,14 +3452,14 @@ function ImportTrackModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load scenes." });
     }
   }, [host, mode, onPortTrack]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (open) {
       setSelectedSceneId(null);
       setImportingTrackId(null);
       void refresh();
     }
   }, [open, refresh]);
-  const handleImport = (0, import_react13.useCallback)(
+  const handleImport = (0, import_react15.useCallback)(
     async (track, sourceSceneId, sceneName, isSameScene) => {
       if (isSameScene && onPortTrack) {
         if (!track.importable) return;
@@ -3252,16 +3500,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_runtime15.jsx)(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime15.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
-            selectedScene && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+            selectedScene && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 className: "text-sas-muted hover:text-sas-accent text-xs",
@@ -3270,9 +3518,9 @@ function ImportTrackModal({
                 children: "\u2190"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               className: "text-sas-muted hover:text-sas-accent text-sm",
@@ -3282,30 +3530,30 @@ function ImportTrackModal({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "overflow-y-auto p-2 flex-1", children: [
-          load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-loading`, children: "Loading scenes\u2026" }),
-          load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-8 text-center text-xs text-red-400", "data-testid": `${testIdPrefix}-error`, children: load.message }),
-          load.status === "ready" && scenes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-empty`, children: mode === "sound" ? "No other scenes have a sound to import." : "No other scenes have a compatible track to import." }),
-          load.status === "ready" && scenes.length > 0 && !selectedScene && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "overflow-y-auto p-2 flex-1", children: [
+          load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.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_runtime16.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_runtime16.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime15.jsx)("span", { className: "truncate", children: scene.sceneName }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-sas-muted", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: scene.sceneName }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-sas-muted", children: [
                   scene.tracks.length,
                   " \u2192"
                 ] })
               ]
             }
           ) }, scene.sceneId)) }),
-          selectedScene && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-track-list`, children: selectedScene.tracks.map((track) => {
+          selectedScene && /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.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"}`,
@@ -3315,14 +3563,14 @@ function ImportTrackModal({
                 "data-testid": `${testIdPrefix}-track`,
                 "data-importable": mode === "sound" || track.importable ? "true" : "false",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "truncate", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "truncate", children: [
                     track.name,
-                    track.role ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-sas-muted", children: [
+                    track.role ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-sas-muted", children: [
                       " \xB7 ",
                       track.role
                     ] }) : null
                   ] }),
-                  busy ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sas-muted", children: "\u2298" }) : null
+                  busy ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sas-muted", children: "\u2298" }) : null
                 ]
               }
             ) }, track.dbId);
@@ -3334,8 +3582,8 @@ function ImportTrackModal({
 }
 
 // src/components/CrossfadeModal.tsx
-var import_react14 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function shortId2(dbId) {
   return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
 }
@@ -3348,7 +3596,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_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "button",
     {
       type: "button",
@@ -3360,8 +3608,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_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 })
       ]
     }
   );
@@ -3378,15 +3626,15 @@ function CrossfadeModal({
   onCreate,
   testIdPrefix = "crossfade-modal"
 }) {
-  const [load, setLoad] = (0, import_react14.useState)({ status: "loading" });
-  const [originDbId, setOriginDbId] = (0, import_react14.useState)("");
-  const [targetDbId, setTargetDbId] = (0, import_react14.useState)("");
-  const [isCreating, setIsCreating] = (0, import_react14.useState)(false);
-  const [error, setError] = (0, import_react14.useState)(null);
-  const [fromName, setFromName] = (0, import_react14.useState)(null);
-  const [toName, setToName] = (0, import_react14.useState)(null);
-  const cancelRef = (0, import_react14.useRef)(null);
-  const refresh = (0, import_react14.useCallback)(async () => {
+  const [load, setLoad] = (0, import_react16.useState)({ status: "loading" });
+  const [originDbId, setOriginDbId] = (0, import_react16.useState)("");
+  const [targetDbId, setTargetDbId] = (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 crossfade tracks." });
       return;
@@ -3406,7 +3654,7 @@ function CrossfadeModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
     }
   }, [host, fromSceneId, toSceneId]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (open) {
       setError(null);
       setIsCreating(false);
@@ -3415,21 +3663,21 @@ function CrossfadeModal({
       void refresh();
     }
   }, [open, refresh]);
-  const excludeSet = (0, import_react14.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const originCandidates = (0, import_react14.useMemo)(
+  const excludeSet = (0, import_react16.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originCandidates = (0, import_react16.useMemo)(
     () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const targetCandidates = (0, import_react14.useMemo)(
+  const targetCandidates = (0, import_react16.useMemo)(
     () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!originCandidates.some((t) => t.dbId === originDbId)) {
       setOriginDbId(originCandidates[0]?.dbId ?? "");
     }
   }, [originCandidates, originDbId]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!targetCandidates.some((t) => t.dbId === targetDbId)) {
       setTargetDbId(targetCandidates[0]?.dbId ?? "");
     }
@@ -3437,10 +3685,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_react14.useCallback)(() => {
+  const handleClose = (0, import_react16.useCallback)(() => {
     if (!isCreating) onClose();
   }, [isCreating, onClose]);
-  const handleCreate = (0, import_react14.useCallback)(async () => {
+  const handleCreate = (0, import_react16.useCallback)(async () => {
     if (!originTrack || !targetTrack) return;
     setIsCreating(true);
     setError(null);
@@ -3458,26 +3706,26 @@ function CrossfadeModal({
   const fromLabel = fromName ?? fromSceneName ?? null;
   const toLabel = toName ?? toSceneName ?? null;
   if (!open) return null;
-  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 crossfade" }),
-        /* @__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 crossfade" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
           "Bridge a track from",
           " ",
-          /* @__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" }),
           " into one from",
           " ",
-          /* @__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" }),
           ". Both layers share one generated part; each keeps its own preset."
         ] }),
-        load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
-        load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
-        load.status === "ready" && (originCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        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" && (originCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
             className: "text-xs text-sas-muted py-4 text-center",
@@ -3488,20 +3736,20 @@ function CrossfadeModal({
               ". Add one (or free one from another crossfade) first."
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
               "Origin ",
               fromLabel ? `(${fromLabel})` : "(top)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime16.jsx)(
+                children: originCandidates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   CandidateRow,
                   {
                     track: t,
@@ -3515,23 +3763,23 @@ function CrossfadeModal({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
               "Target ",
               toLabel ? `(${toLabel})` : "(bottom)"
             ] }),
-            targetCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-xs text-sas-danger mt-0.5", "data-testid": `${testIdPrefix}-empty-target`, children: [
+            targetCandidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-xs text-sas-danger mt-0.5", "data-testid": `${testIdPrefix}-empty-target`, children: [
               "No available tracks in ",
               toLabel ?? "the target scene",
               " to crossfade into."
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime16.jsx)(
+                children: targetCandidates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   CandidateRow,
                   {
                     track: t,
@@ -3546,9 +3794,9 @@ function CrossfadeModal({
             )
           ] })
         ] })),
-        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,
@@ -3559,7 +3807,7 @@ function CrossfadeModal({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               "data-testid": `${testIdPrefix}-confirm`,
@@ -3576,10 +3824,10 @@ function CrossfadeModal({
 }
 
 // src/components/TransitionDesigner.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/hooks/useTrackReorder.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 function moveItem(arr, from, to) {
   const next = arr.slice();
   if (from === to || from < 0 || to < 0 || from >= next.length || to >= next.length) {
@@ -3596,12 +3844,12 @@ function useTrackReorder({
   getId,
   onError
 }) {
-  const [draggingIndex, setDraggingIndex] = (0, import_react15.useState)(null);
-  const [dragOverIndex, setDragOverIndex] = (0, import_react15.useState)(null);
-  const fromRef = (0, import_react15.useRef)(null);
-  const itemsRef = (0, import_react15.useRef)(items);
+  const [draggingIndex, setDraggingIndex] = (0, import_react17.useState)(null);
+  const [dragOverIndex, setDragOverIndex] = (0, import_react17.useState)(null);
+  const fromRef = (0, import_react17.useRef)(null);
+  const itemsRef = (0, import_react17.useRef)(items);
   itemsRef.current = items;
-  const dragPropsFor = (0, import_react15.useCallback)(
+  const dragPropsFor = (0, import_react17.useCallback)(
     (index) => ({
       handleProps: {
         draggable: true,
@@ -3783,7 +4031,7 @@ function dbIdsFromKeys(keys) {
 }
 
 // src/components/TransitionDesigner.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var CROSSFADE_ESTIMATE_MS = 15e3;
 var FADE_ESTIMATE_MS = 11e3;
 var CREATE_ALL_CONCURRENCY = 5;
@@ -3807,44 +4055,44 @@ function TransitionDesigner({
   familyLabel,
   testIdPrefix = "transition-designer"
 }) {
-  const [load, setLoad] = (0, import_react16.useState)({ status: "loading" });
-  const [fromName, setFromName] = (0, import_react16.useState)(null);
-  const [toName, setToName] = (0, import_react16.useState)(null);
-  const [originSlots, setOriginSlots] = (0, import_react16.useState)([]);
-  const [targetSlots, setTargetSlots] = (0, import_react16.useState)([]);
-  const [creatingKeys, setCreatingKeys] = (0, import_react16.useState)(() => /* @__PURE__ */ new Set());
-  const [rowErrors, setRowErrors] = (0, import_react16.useState)({});
-  const [rowEffects, setRowEffects] = (0, import_react16.useState)({});
-  const rowEffectsRef = (0, import_react16.useRef)(rowEffects);
+  const [load, setLoad] = (0, import_react18.useState)({ status: "loading" });
+  const [fromName, setFromName] = (0, import_react18.useState)(null);
+  const [toName, setToName] = (0, import_react18.useState)(null);
+  const [originSlots, setOriginSlots] = (0, import_react18.useState)([]);
+  const [targetSlots, setTargetSlots] = (0, import_react18.useState)([]);
+  const [creatingKeys, setCreatingKeys] = (0, import_react18.useState)(() => /* @__PURE__ */ new Set());
+  const [rowErrors, setRowErrors] = (0, import_react18.useState)({});
+  const [rowEffects, setRowEffects] = (0, import_react18.useState)({});
+  const rowEffectsRef = (0, import_react18.useRef)(rowEffects);
   rowEffectsRef.current = rowEffects;
   const audioEffectsEnabled = !!onCreateAudioTransition;
-  const excludeRef = (0, import_react16.useRef)(excludeSourceDbIds);
+  const excludeRef = (0, import_react18.useRef)(excludeSourceDbIds);
   excludeRef.current = excludeSourceDbIds;
-  const originSlotsRef = (0, import_react16.useRef)(originSlots);
+  const originSlotsRef = (0, import_react18.useRef)(originSlots);
   originSlotsRef.current = originSlots;
-  const targetSlotsRef = (0, import_react16.useRef)(targetSlots);
+  const targetSlotsRef = (0, import_react18.useRef)(targetSlots);
   targetSlotsRef.current = targetSlots;
-  const creatingKeysRef = (0, import_react16.useRef)(creatingKeys);
+  const creatingKeysRef = (0, import_react18.useRef)(creatingKeys);
   creatingKeysRef.current = creatingKeys;
-  const dragRef = (0, import_react16.useRef)(null);
-  const [dragging, setDragging] = (0, import_react16.useState)(null);
-  const [dragOver, setDragOver] = (0, import_react16.useState)(null);
-  const excludeSet = (0, import_react16.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const originPool = (0, import_react16.useMemo)(
+  const dragRef = (0, import_react18.useRef)(null);
+  const [dragging, setDragging] = (0, import_react18.useState)(null);
+  const [dragOver, setDragOver] = (0, import_react18.useState)(null);
+  const excludeSet = (0, import_react18.useMemo)(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originPool = (0, import_react18.useMemo)(
     () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const targetPool = (0, import_react16.useMemo)(
+  const targetPool = (0, import_react18.useMemo)(
     () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const originById = (0, import_react16.useMemo)(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
-  const targetById = (0, import_react16.useMemo)(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
-  const originByIdRef = (0, import_react16.useRef)(originById);
+  const originById = (0, import_react18.useMemo)(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
+  const targetById = (0, import_react18.useMemo)(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
+  const originByIdRef = (0, import_react18.useRef)(originById);
   originByIdRef.current = originById;
-  const targetByIdRef = (0, import_react16.useRef)(targetById);
+  const targetByIdRef = (0, import_react18.useRef)(targetById);
   targetByIdRef.current = targetById;
-  const refresh = (0, import_react16.useCallback)(async () => {
+  const refresh = (0, import_react18.useCallback)(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support transition tracks." });
       return;
@@ -3879,10 +4127,10 @@ function TransitionDesigner({
       });
     }
   }, [host, fromSceneId, toSceneId, transitionSceneId]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     void refresh();
   }, [refresh]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (load.status !== "ready") return;
     const [po, pt] = padPair(
       reconcileSlots(originSlotsRef.current, originPool.map((t) => t.dbId)),
@@ -3891,7 +4139,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_react16.useCallback)(
+  const mutate = (0, import_react18.useCallback)(
     (nextOrigin, nextTarget) => {
       const norm = normalizeSlots(nextOrigin, nextTarget);
       const [po, pt] = padPair(norm.originOrder, norm.targetOrder);
@@ -3904,7 +4152,7 @@ function TransitionDesigner({
     },
     [host, transitionSceneId]
   );
-  const setRowEffect = (0, import_react16.useCallback)(
+  const setRowEffect = (0, import_react18.useCallback)(
     (sourceDbId, effect) => {
       setRowEffects((prev) => {
         const next = { ...prev, [sourceDbId]: effect };
@@ -3918,7 +4166,7 @@ function TransitionDesigner({
     },
     [host, transitionSceneId]
   );
-  const insertGapAbove = (0, import_react16.useCallback)(
+  const insertGapAbove = (0, import_react18.useCallback)(
     (col, index) => {
       const slots = col === "origin" ? originSlots : targetSlots;
       const next = [...slots.slice(0, index), null, ...slots.slice(index)];
@@ -3927,7 +4175,7 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const removeGap = (0, import_react16.useCallback)(
+  const removeGap = (0, import_react18.useCallback)(
     (col, index) => {
       const slots = col === "origin" ? originSlots : targetSlots;
       const next = slots.filter((_, i) => i !== index);
@@ -3936,7 +4184,7 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const handleDrop = (0, import_react16.useCallback)(
+  const handleDrop = (0, import_react18.useCallback)(
     (col, to) => {
       const from = dragRef.current;
       dragRef.current = null;
@@ -3948,16 +4196,16 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const rows = (0, import_react16.useMemo)(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
-  const creatingDbIds = (0, import_react16.useMemo)(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
-  const eligibleCount = (0, import_react16.useMemo)(
+  const rows = (0, import_react18.useMemo)(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
+  const creatingDbIds = (0, import_react18.useMemo)(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
+  const eligibleCount = (0, import_react18.useMemo)(
     () => rows.filter((r) => {
       const k = rowKey(r);
       return k !== null && !creatingKeys.has(k);
     }).length,
     [rows, creatingKeys]
   );
-  const createRow = (0, import_react16.useCallback)(
+  const createRow = (0, import_react18.useCallback)(
     async (row) => {
       const key = rowKey(row);
       if (!key || !row.type || creatingKeysRef.current.has(key)) return;
@@ -4011,7 +4259,7 @@ function TransitionDesigner({
     },
     [onCreateCrossfade, onCreateFade, onCreateAudioTransition]
   );
-  const createAll = (0, import_react16.useCallback)(async () => {
+  const createAll = (0, import_react18.useCallback)(async () => {
     const eligible = buildRowSlots(originSlotsRef.current, targetSlotsRef.current).filter((r) => {
       const k = rowKey(r);
       return k !== null && !creatingKeysRef.current.has(k);
@@ -4079,15 +4327,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_runtime17.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "button",
               {
                 type: "button",
@@ -4104,7 +4352,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_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         ...cellDragProps(col, index, locked),
@@ -4112,13 +4360,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_runtime17.jsxs)("div", { className: "flex items-start gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-xs text-sas-text truncate", children: primary }),
-            meta && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-xs text-sas-text truncate", children: primary }),
+            meta && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
               type: "button",
@@ -4134,22 +4382,22 @@ function TransitionDesigner({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sas-text", children: fromLabel }),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sas-text", children: fromLabel }),
         " \u2192",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sas-text", children: toLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
-        creatingKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+        creatingKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
           creatingKeys.size,
           " creating\u2026"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "button",
           {
             type: "button",
@@ -4166,49 +4414,49 @@ function TransitionDesigner({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
         "Origin (",
         fromLabel,
         ")"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
         "Target (",
         toLabel,
         ")"
       ] })
     ] }),
-    load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
-    load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsxs)("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
+    load.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
+    load.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.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_runtime17.jsx)("div", { className: "space-y-2", children: rows.map((row, i) => {
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsxs)("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
-              !row.type ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
+              !row.type ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime17.jsxs)("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              ) : audioEffectsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "select",
                   {
                     "data-testid": `${testIdPrefix}-effect-${i}`,
@@ -4218,11 +4466,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_runtime17.jsx)("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
+                    children: AUDIO_EFFECTS.map((eff) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "span",
                 {
                   "data-testid": `${testIdPrefix}-type-${i}`,
@@ -4230,7 +4478,7 @@ function TransitionDesigner({
                   children: TYPE_LABEL[row.type]
                 }
               ),
-              isCreatingThis ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              isCreatingThis ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 SorceryProgressBar,
                 {
                   isLoading: true,
@@ -4238,7 +4486,7 @@ function TransitionDesigner({
                   statusText: "CREATING",
                   estimatedDurationMs: row.type === "crossfade" ? CROSSFADE_ESTIMATE_MS : FADE_ESTIMATE_MS
                 }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4249,7 +4497,7 @@ function TransitionDesigner({
                   children: "Create"
                 }
               ),
-              errMsg && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              errMsg && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "span",
                 {
                   "data-testid": `${testIdPrefix}-row-error-${i}`,
@@ -4268,10 +4516,11 @@ function TransitionDesigner({
 }
 
 // src/components/PanelMasterStrip.tsx
-var import_react17 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function PanelMasterStrip({
   bus,
+  levels = null,
   availableFx = [],
   fxLoading = false,
   soloedOut = false,
@@ -4287,22 +4536,22 @@ function PanelMasterStrip({
   onToggleFxEnabled,
   onShowFxEditor
 }) {
-  const [search, setSearch] = (0, import_react17.useState)("");
-  const filtered = (0, import_react17.useMemo)(() => {
+  const [search, setSearch] = (0, import_react19.useState)("");
+  const filtered = (0, import_react19.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_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       "data-testid": "panel-master-strip",
-      className: `flex flex-col gap-1 px-2 py-1.5 rounded-sm border border-sas-border bg-sas-panel-alt/50 transition-opacity ${soloedOut ? "opacity-40" : ""}`,
+      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_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "span",
             {
               className: "text-[9px] font-bold tracking-widest text-sas-muted/70 select-none",
@@ -4310,15 +4559,38 @@ function PanelMasterStrip({
               children: "BUS"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            VolumeSlider,
-            {
-              value: dbToSlider(bus.volume),
-              onChange: (sliderValue) => onVolumeChange(sliderToDb(sliderValue)),
-              disabled
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-w-[8rem] flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              VolumeSlider,
+              {
+                value: dbToSlider(bus.volume),
+                onChange: (sliderValue) => onVolumeChange(sliderToDb(sliderValue)),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-px", "data-testid": "bus-meter", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                LevelMeter,
+                {
+                  peakDb: levels?.leftDb ?? -120,
+                  active: levels != null,
+                  clipped: levels?.clipped,
+                  compact: true,
+                  "data-testid": "bus-meter-left"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                LevelMeter,
+                {
+                  peakDb: levels?.rightDb ?? -120,
+                  active: levels != null,
+                  compact: true,
+                  "data-testid": "bus-meter-right"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "button",
             {
               "data-testid": "bus-mute-button",
@@ -4329,7 +4601,7 @@ function PanelMasterStrip({
               children: "M"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "button",
             {
               "data-testid": "bus-solo-button",
@@ -4340,14 +4612,14 @@ function PanelMasterStrip({
               children: "S"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto", children: bus.fx.map((fx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.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_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     "data-testid": `bus-fx-toggle-${fx.index}`,
@@ -4358,7 +4630,7 @@ function PanelMasterStrip({
                     children: fx.enabled ? "\u25CF" : "\u25CB"
                   }
                 ),
-                onShowFxEditor ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                onShowFxEditor ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     "data-testid": `bus-fx-edit-${fx.index}`,
@@ -4368,8 +4640,8 @@ function PanelMasterStrip({
                     title: `Open ${fx.name} editor`,
                     children: fx.name
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "max-w-[80px] truncate", children: fx.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "max-w-[80px] truncate", children: fx.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     "data-testid": `bus-fx-remove-${fx.index}`,
@@ -4384,21 +4656,21 @@ function PanelMasterStrip({
             },
             `${fx.index}:${fx.pluginId}`
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "button",
             {
               "data-testid": "bus-fx-add-button",
               onClick: () => onToggleFxPicker(!fxPickerOpen),
               disabled,
               className: `px-1.5 py-0.5 rounded-sm border text-xs whitespace-nowrap transition-colors ${fxPickerOpen ? "border-sas-accent text-sas-accent bg-sas-accent/10" : "border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"} disabled:opacity-50`,
-              title: "Add an FX plugin to the panel bus",
-              children: "FX +"
+              title: fxPickerOpen ? "Close the FX picker" : "Add an FX plugin to the panel bus",
+              children: fxPickerOpen ? "FX \u25B4" : "FX +"
             }
           )
         ] }),
-        fxPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-testid": "bus-fx-picker", className: "flex flex-col gap-2 pt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        fxPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { "data-testid": "bus-fx-picker", className: "flex flex-col gap-2 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "input",
               {
                 type: "text",
@@ -4408,7 +4680,7 @@ function PanelMasterStrip({
                 className: "sas-input flex-1 px-2 py-1 text-xs"
               }
             ),
-            onRefreshFx && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            onRefreshFx && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "button",
               {
                 onClick: () => onRefreshFx(),
@@ -4419,8 +4691,8 @@ function PanelMasterStrip({
               }
             )
           ] }),
-          fxLoading && availableFx.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
-            filtered.map((fx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          fxLoading && availableFx.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
+            filtered.map((fx) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "button",
               {
                 "data-testid": `bus-fx-pick-${fx.pluginId}`,
@@ -4428,13 +4700,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_runtime18.jsx)("span", { className: "text-xs font-medium truncate w-full", children: fx.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: fx.manufacturer || fx.type.toUpperCase() })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-medium truncate w-full", children: fx.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime18.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_runtime19.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" })
           ] })
         ] })
       ]
@@ -4443,16 +4715,18 @@ function PanelMasterStrip({
 }
 
 // src/hooks/usePanelBus.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
+var LEVELS_POLL_MS = 66;
 function usePanelBus(host, activeSceneId) {
   const supported = typeof host.getPanelBusState === "function";
-  const [bus, setBus] = (0, import_react18.useState)(null);
-  const [availableFx, setAvailableFx] = (0, import_react18.useState)([]);
-  const [fxLoading, setFxLoading] = (0, import_react18.useState)(false);
-  const [fxPickerOpen, setFxPickerOpen] = (0, import_react18.useState)(false);
-  const fxLoadedRef = (0, import_react18.useRef)(false);
-  const loadSeqRef = (0, import_react18.useRef)(0);
-  const reload = (0, import_react18.useCallback)(async () => {
+  const [bus, setBus] = (0, import_react20.useState)(null);
+  const [levels, setLevels] = (0, import_react20.useState)(null);
+  const [availableFx, setAvailableFx] = (0, import_react20.useState)([]);
+  const [fxLoading, setFxLoading] = (0, import_react20.useState)(false);
+  const [fxPickerOpen, setFxPickerOpen] = (0, import_react20.useState)(false);
+  const fxLoadedRef = (0, import_react20.useRef)(false);
+  const loadSeqRef = (0, import_react20.useRef)(0);
+  const reload = (0, import_react20.useCallback)(async () => {
     if (!supported || !activeSceneId || !host.getPanelBusState) {
       setBus(null);
       return;
@@ -4464,12 +4738,34 @@ function usePanelBus(host, activeSceneId) {
     } catch {
     }
   }, [host, activeSceneId, supported]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setBus(null);
     setFxPickerOpen(false);
     void reload();
   }, [reload]);
-  const loadFxList = (0, import_react18.useCallback)(
+  (0, import_react20.useEffect)(() => {
+    if (!supported || !activeSceneId || !bus?.engaged || !host.getPanelBusLevels) {
+      setLevels(null);
+      return;
+    }
+    let cancelled = false;
+    const tick = async () => {
+      if (typeof document !== "undefined" && document.hidden) return;
+      try {
+        const next = await host.getPanelBusLevels(activeSceneId);
+        if (!cancelled) setLevels(next);
+      } catch {
+        if (!cancelled) setLevels(null);
+      }
+    };
+    void tick();
+    const id = setInterval(() => void tick(), LEVELS_POLL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [supported, activeSceneId, bus?.engaged, host]);
+  const loadFxList = (0, import_react20.useCallback)(
     async (force) => {
       if (!supported || !host.getAvailableFx) return;
       if (fxLoadedRef.current && !force) return;
@@ -4485,14 +4781,14 @@ function usePanelBus(host, activeSceneId) {
     },
     [host, supported]
   );
-  const openPicker = (0, import_react18.useCallback)(
+  const openPicker = (0, import_react20.useCallback)(
     (open) => {
       setFxPickerOpen(open);
       if (open) void loadFxList(false);
     },
     [loadFxList]
   );
-  const mutate = (0, import_react18.useCallback)(
+  const mutate = (0, import_react20.useCallback)(
     (fn) => {
       if (!fn || !activeSceneId) return;
       void (async () => {
@@ -4508,6 +4804,7 @@ function usePanelBus(host, activeSceneId) {
   return {
     supported,
     bus,
+    levels,
     availableFx,
     fxLoading,
     fxPickerOpen,
@@ -4535,8 +4832,8 @@ function usePanelBus(host, activeSceneId) {
 }
 
 // src/components/DownloadPackButton.tsx
-var import_react19 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function formatSize(bytes) {
   if (!bytes || bytes <= 0) return "";
   const gb = bytes / 1024 ** 3;
@@ -4552,10 +4849,10 @@ var DownloadPackButton = ({
   variant = "compact",
   onDownloadComplete
 }) => {
-  const [status, setStatus] = (0, import_react19.useState)("idle");
-  const [progress, setProgress] = (0, import_react19.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, import_react19.useState)(null);
-  (0, import_react19.useEffect)(() => {
+  const [status, setStatus] = (0, import_react21.useState)("idle");
+  const [progress, setProgress] = (0, import_react21.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react21.useState)(null);
+  (0, import_react21.useEffect)(() => {
     const unsub = host.onSamplePackProgress(packId, (p) => {
       setStatus(p.status);
       setProgress(p.progress);
@@ -4570,7 +4867,7 @@ var DownloadPackButton = ({
     });
     return unsub;
   }, [host, packId, onDownloadComplete]);
-  const handleClick = (0, import_react19.useCallback)(async () => {
+  const handleClick = (0, import_react21.useCallback)(async () => {
     if (status !== "idle" && status !== "error") return;
     try {
       setStatus("downloading");
@@ -4624,8 +4921,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_runtime19.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "button",
       {
         "data-testid": `download-pack-button-${packId}`,
@@ -4636,12 +4933,12 @@ var DownloadPackButton = ({
         children: buttonLabel
       }
     ),
-    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime20.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_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SamplePackCTACard = ({
   host,
   pack,
@@ -4649,7 +4946,7 @@ var SamplePackCTACard = ({
   onDownloadComplete
 }) => {
   if (status === "checking") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         "data-testid": `sample-pack-cta-checking-${pack.packId}`,
@@ -4660,16 +4957,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_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime20.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_runtime20.jsx)("div", { className: "text-base text-sas-text mb-1", children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsx)("div", { className: "text-base text-sas-text mb-1", children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           DownloadPackButton,
           {
             host,
@@ -4686,7 +4983,7 @@ var SamplePackCTACard = ({
 };
 
 // src/components/WaveformView.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/waveform.ts
 function computePeaks(audioBuffer, bins, targetSamples) {
@@ -4749,7 +5046,7 @@ function drawWaveform(canvas, peaks, options = {}) {
 }
 
 // src/components/WaveformView.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var WaveformView = ({
   host,
   filePath,
@@ -4758,9 +5055,9 @@ var WaveformView = ({
   fillStyle,
   targetSamples
 }) => {
-  const canvasRef = (0, import_react20.useRef)(null);
-  const [peaks, setPeaks] = (0, import_react20.useState)(null);
-  (0, import_react20.useEffect)(() => {
+  const canvasRef = (0, import_react22.useRef)(null);
+  const [peaks, setPeaks] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
     let cancelled = false;
     let audioContext = null;
     (async () => {
@@ -4786,7 +5083,7 @@ var WaveformView = ({
       cancelled = true;
     };
   }, [host, filePath, bins, targetSamples]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!peaks) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -4797,7 +5094,7 @@ var WaveformView = ({
     observer.observe(canvas);
     return () => observer.disconnect();
   }, [peaks, fillStyle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -4808,8 +5105,8 @@ var WaveformView = ({
 };
 
 // src/components/ScrollingWaveform.tsx
-var import_react21 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ScrollingWaveform = ({
   getPeakDb,
   active,
@@ -4817,11 +5114,11 @@ var ScrollingWaveform = ({
   className,
   fillStyle
 }) => {
-  const canvasRef = (0, import_react21.useRef)(null);
-  const ringRef = (0, import_react21.useRef)(new Float32Array(columns));
-  const writeIdxRef = (0, import_react21.useRef)(0);
-  const rafRef = (0, import_react21.useRef)(null);
-  (0, import_react21.useEffect)(() => {
+  const canvasRef = (0, import_react23.useRef)(null);
+  const ringRef = (0, import_react23.useRef)(new Float32Array(columns));
+  const writeIdxRef = (0, import_react23.useRef)(0);
+  const rafRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     if (ringRef.current.length !== columns) {
       const next = new Float32Array(columns);
       const prev = ringRef.current;
@@ -4833,7 +5130,7 @@ var ScrollingWaveform = ({
       writeIdxRef.current = writeIdxRef.current % columns;
     }
   }, [columns]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!active) {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -4885,7 +5182,7 @@ var ScrollingWaveform = ({
       }
     };
   }, [active, getPeakDb, fillStyle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -4896,8 +5193,8 @@ var ScrollingWaveform = ({
 };
 
 // src/components/OffsetScrubber.tsx
-var import_react22 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var SLIDER_HEIGHT_PX = 28;
 var TICK_HEIGHT_PX = 14;
 var DOWNBEAT_TICK_HEIGHT_PX = 22;
@@ -4910,40 +5207,40 @@ function OffsetScrubber({
   onChange,
   disabled = false
 }) {
-  const trackRef = (0, import_react22.useRef)(null);
-  const [draftOffset, setDraftOffset] = (0, import_react22.useState)(offsetSamples);
-  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const trackRef = (0, import_react24.useRef)(null);
+  const [draftOffset, setDraftOffset] = (0, import_react24.useState)(offsetSamples);
+  const [isDragging, setIsDragging] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     if (!isDragging) setDraftOffset(offsetSamples);
   }, [offsetSamples, isDragging]);
   const sampleRate = cuePoints?.sample_rate ?? 44100;
   const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
-  const beatsForRange = (0, import_react22.useMemo)(() => {
+  const beatsForRange = (0, import_react24.useMemo)(() => {
     return Math.round(60 / projectBpm * sampleRate);
   }, [projectBpm, sampleRate]);
   const rangeSamples = beatsForRange * meter;
-  const sampleToFraction = (0, import_react22.useCallback)(
+  const sampleToFraction = (0, import_react24.useCallback)(
     (sample) => {
       const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
       return (clamped + rangeSamples) / (2 * rangeSamples);
     },
     [rangeSamples]
   );
-  const fractionToSample = (0, import_react22.useCallback)(
+  const fractionToSample = (0, import_react24.useCallback)(
     (fraction) => {
       const clamped = Math.max(0, Math.min(1, fraction));
       return Math.round(clamped * 2 * rangeSamples - rangeSamples);
     },
     [rangeSamples]
   );
-  const snapTargets = (0, import_react22.useMemo)(() => {
+  const snapTargets = (0, import_react24.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_react22.useCallback)(
+  const snapToBeat = (0, import_react24.useCallback)(
     (sample) => {
       if (snapTargets.length === 0) return sample;
       let best = snapTargets[0];
@@ -4959,7 +5256,7 @@ function OffsetScrubber({
     },
     [snapTargets]
   );
-  const handlePointerDown = (0, import_react22.useCallback)(
+  const handlePointerDown = (0, import_react24.useCallback)(
     (e) => {
       if (disabled || !cuePoints) return;
       e.preventDefault();
@@ -4993,7 +5290,7 @@ function OffsetScrubber({
     },
     [disabled, cuePoints, fractionToSample, onChange, snapToBeat]
   );
-  const handleResetToZero = (0, import_react22.useCallback)(() => {
+  const handleResetToZero = (0, import_react24.useCallback)(() => {
     if (disabled) return;
     setDraftOffset(0);
     onChange(0);
@@ -5001,7 +5298,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_react22.useMemo)(() => {
+  const ticks = (0, import_react24.useMemo)(() => {
     if (!cuePoints) return [];
     const downbeat = cuePoints.beats[0] ?? 0;
     return cuePoints.beats.map((b, i) => {
@@ -5012,9 +5309,9 @@ function OffsetScrubber({
     });
   }, [cuePoints, sampleToFraction]);
   const isDisabled = disabled || !cuePoints || cuePoints.beats.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         ref: trackRef,
@@ -5030,7 +5327,7 @@ function OffsetScrubber({
         "aria-valuenow": draftOffset,
         "aria-disabled": isDisabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               "aria-hidden": "true",
@@ -5038,7 +5335,7 @@ function OffsetScrubber({
               style: { left: "50%" }
             }
           ),
-          ticks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          ticks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               "data-testid": t.isDownbeat ? "offset-tick-downbeat" : "offset-tick",
@@ -5053,7 +5350,7 @@ function OffsetScrubber({
             },
             t.i
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               "data-testid": "offset-scrubber-thumb",
@@ -5070,7 +5367,7 @@ function OffsetScrubber({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "span",
       {
         "data-testid": "offset-scrubber-readout",
@@ -5078,7 +5375,7 @@ function OffsetScrubber({
         children: formatOffset(draftOffset, sampleRate)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         type: "button",
@@ -5090,7 +5387,7 @@ function OffsetScrubber({
         children: "\u2316"
       }
     ),
-    bpmMismatch && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    bpmMismatch && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "span",
       {
         "data-testid": "offset-bpm-mismatch",
@@ -5162,16 +5459,16 @@ function synthesizeCuePoints({
 }
 
 // src/panel-core/useGeneratorPanelCore.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/hooks/useSceneState.ts
-var import_react23 = require("react");
+var import_react25 = require("react");
 function useSceneState(activeSceneId, initialValue) {
-  const [stateMap, setStateMap] = (0, import_react23.useState)(() => /* @__PURE__ */ new Map());
-  const activeSceneIdRef = (0, import_react23.useRef)(activeSceneId);
+  const [stateMap, setStateMap] = (0, import_react25.useState)(() => /* @__PURE__ */ new Map());
+  const activeSceneIdRef = (0, import_react25.useRef)(activeSceneId);
   activeSceneIdRef.current = activeSceneId;
   const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
-  const setForCurrentScene = (0, import_react23.useCallback)((value) => {
+  const setForCurrentScene = (0, import_react25.useCallback)((value) => {
     const sid = activeSceneIdRef.current;
     if (sid === null) return;
     setStateMap((prev) => {
@@ -5182,7 +5479,7 @@ function useSceneState(activeSceneId, initialValue) {
       return newMap;
     });
   }, [initialValue]);
-  const setForScene = (0, import_react23.useCallback)((sceneId, value) => {
+  const setForScene = (0, import_react25.useCallback)((sceneId, value) => {
     setStateMap((prev) => {
       const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
       const next = typeof value === "function" ? value(current) : value;
@@ -5195,10 +5492,10 @@ function useSceneState(activeSceneId, initialValue) {
 }
 
 // src/hooks/useAnySolo.ts
-var import_react24 = require("react");
+var import_react26 = require("react");
 function useAnySolo(host) {
-  const [anySolo, setAnySolo] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const [anySolo, setAnySolo] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     let active = true;
     const refresh = () => {
       host.isAnySoloActive().then((v) => {
@@ -5217,7 +5514,7 @@ function useAnySolo(host) {
 }
 
 // src/hooks/useSoundHistory.ts
-var import_react25 = require("react");
+var import_react27 = require("react");
 var EMPTY = { entries: [], cursor: -1 };
 function sameDescriptor(a, b) {
   if (a === b) return true;
@@ -5229,14 +5526,14 @@ function sameDescriptor(a, b) {
 }
 function useSoundHistory(applySound, opts = {}) {
   const max = Math.max(2, opts.max ?? 24);
-  const applyRef = (0, import_react25.useRef)(applySound);
+  const applyRef = (0, import_react27.useRef)(applySound);
   applyRef.current = applySound;
-  const onChangeRef = (0, import_react25.useRef)(opts.onChange);
+  const onChangeRef = (0, import_react27.useRef)(opts.onChange);
   onChangeRef.current = opts.onChange;
-  const dataRef = (0, import_react25.useRef)({});
-  const [, setVersion] = (0, import_react25.useState)(0);
-  const bump = (0, import_react25.useCallback)(() => setVersion((v) => v + 1), []);
-  const commit = (0, import_react25.useCallback)(
+  const dataRef = (0, import_react27.useRef)({});
+  const [, setVersion] = (0, import_react27.useState)(0);
+  const bump = (0, import_react27.useCallback)(() => setVersion((v) => v + 1), []);
+  const commit = (0, import_react27.useCallback)(
     (trackId, next, notify) => {
       dataRef.current = { ...dataRef.current, [trackId]: next };
       bump();
@@ -5244,7 +5541,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const record = (0, import_react25.useCallback)(
+  const record = (0, import_react27.useCallback)(
     (trackId, descriptor, label) => {
       const h = dataRef.current[trackId];
       const current = h && h.cursor >= 0 ? h.entries[h.cursor] : void 0;
@@ -5259,7 +5556,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [max, commit]
   );
-  const restoreTo = (0, import_react25.useCallback)(
+  const restoreTo = (0, import_react27.useCallback)(
     async (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length || index === h.cursor) return false;
@@ -5269,7 +5566,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const undo = (0, import_react25.useCallback)(
+  const undo = (0, import_react27.useCallback)(
     (trackId) => {
       const h = dataRef.current[trackId];
       if (!h || h.cursor <= 0) return Promise.resolve(false);
@@ -5277,7 +5574,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [restoreTo]
   );
-  const toggleFavorite = (0, import_react25.useCallback)(
+  const toggleFavorite = (0, import_react27.useCallback)(
     (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length) return;
@@ -5286,7 +5583,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const restore = (0, import_react25.useCallback)(
+  const restore = (0, import_react27.useCallback)(
     (trackId, state) => {
       const entries = Array.isArray(state?.entries) ? [...state.entries] : [];
       const raw = typeof state?.cursor === "number" ? state.cursor : entries.length - 1;
@@ -5295,15 +5592,15 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const list = (0, import_react25.useCallback)(
+  const list = (0, import_react27.useCallback)(
     (trackId) => dataRef.current[trackId] ?? EMPTY,
     []
   );
-  const canUndo = (0, import_react25.useCallback)((trackId) => {
+  const canUndo = (0, import_react27.useCallback)((trackId) => {
     const h = dataRef.current[trackId];
     return !!h && h.cursor > 0;
   }, []);
-  const clear = (0, import_react25.useCallback)(
+  const clear = (0, import_react27.useCallback)(
     (trackId) => {
       if (dataRef.current[trackId]) {
         const next = { ...dataRef.current };
@@ -5315,11 +5612,11 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const reset = (0, import_react25.useCallback)(() => {
+  const reset = (0, import_react27.useCallback)(() => {
     dataRef.current = {};
     bump();
   }, [bump]);
-  return (0, import_react25.useMemo)(
+  return (0, import_react27.useMemo)(
     () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
     [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
   );
@@ -5452,7 +5749,7 @@ function resolveTrackGroups(parsedGroups, tracks, getDbId, opts = {}) {
 }
 
 // src/panel-core/useTransitionOps.ts
-var import_react26 = require("react");
+var import_react28 = require("react");
 function useTransitionOps({
   host,
   adapter,
@@ -5469,8 +5766,8 @@ function useTransitionOps({
   resolvedFades
 }) {
   const { identity } = adapter;
-  const appliedFadeAutomationRef = (0, import_react26.useRef)(/* @__PURE__ */ new Set());
-  const applyCrossfadeAutomation = (0, import_react26.useCallback)(
+  const appliedFadeAutomationRef = (0, import_react28.useRef)(/* @__PURE__ */ new Set());
+  const applyCrossfadeAutomation = (0, import_react28.useCallback)(
     async (originTrackId, targetTrackId, bars, bpm, sliderPos) => {
       if (host.setTrackVolumeAutomation) {
         const curves = buildCrossfadeVolumeCurves(bars, bpm, sliderPos);
@@ -5487,7 +5784,7 @@ function useTransitionOps({
     },
     [host]
   );
-  const applyFadeAutomation = (0, import_react26.useCallback)(
+  const applyFadeAutomation = (0, import_react28.useCallback)(
     async (trackId, direction, bars, bpm, sliderPos, gesture) => {
       if (!host.setTrackVolumeAutomation) return;
       const points = buildFadeVolumeCurve(bars, bpm, direction, sliderPos, gesture);
@@ -5496,8 +5793,8 @@ function useTransitionOps({
     },
     [host]
   );
-  const [isCreatingCrossfade, setIsCreatingCrossfade] = (0, import_react26.useState)(false);
-  const handleCreateCrossfade = (0, import_react26.useCallback)(
+  const [isCreatingCrossfade, setIsCreatingCrossfade] = (0, import_react28.useState)(false);
+  const handleCreateCrossfade = (0, import_react28.useCallback)(
     async (origin, target) => {
       const scene = activeSceneId;
       const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
@@ -5625,8 +5922,8 @@ function useTransitionOps({
       loadTracks
     ]
   );
-  const [isCreatingFade, setIsCreatingFade] = (0, import_react26.useState)(false);
-  const handleCreateFade = (0, import_react26.useCallback)(
+  const [isCreatingFade, setIsCreatingFade] = (0, import_react28.useState)(false);
+  const handleCreateFade = (0, import_react28.useCallback)(
     async (selection, direction, gesture) => {
       const scene = activeSceneId;
       const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
@@ -5736,7 +6033,7 @@ function useTransitionOps({
       loadTracks
     ]
   );
-  const handleCrossfadeMute = (0, import_react26.useCallback)(
+  const handleCrossfadeMute = (0, import_react28.useCallback)(
     (pair) => {
       const newMuted = !pair.origin.runtimeState.muted;
       for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
@@ -5751,7 +6048,7 @@ function useTransitionOps({
     },
     [host, setTracks]
   );
-  const handleCrossfadeSolo = (0, import_react26.useCallback)(
+  const handleCrossfadeSolo = (0, import_react28.useCallback)(
     (pair) => {
       const newSolo = !pair.origin.runtimeState.solo;
       for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
@@ -5766,7 +6063,7 @@ function useTransitionOps({
     },
     [host, setTracks]
   );
-  const handleCrossfadeDelete = (0, import_react26.useCallback)(
+  const handleCrossfadeDelete = (0, import_react28.useCallback)(
     async (pair) => {
       try {
         for (const member of [pair.origin, pair.target]) {
@@ -5792,8 +6089,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, setCrossfadePairsMeta, setTracks]
   );
-  const crossfadeSliderTimers = (0, import_react26.useRef)({});
-  const handleCrossfadeSlider = (0, import_react26.useCallback)(
+  const crossfadeSliderTimers = (0, import_react28.useRef)({});
+  const handleCrossfadeSlider = (0, import_react28.useCallback)(
     (pair, pos) => {
       setCrossfadePairsMeta(
         (prev) => prev.map((p) => p.groupId === pair.groupId ? { ...p, sliderPos: pos } : p)
@@ -5826,7 +6123,7 @@ function useTransitionOps({
     },
     [host, activeSceneId, applyCrossfadeAutomation, setCrossfadePairsMeta]
   );
-  const handleFadeDelete = (0, import_react26.useCallback)(
+  const handleFadeDelete = (0, import_react28.useCallback)(
     async (fade) => {
       try {
         await host.deleteTrack(fade.track.handle.id);
@@ -5846,8 +6143,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, setFadesMeta, setTracks]
   );
-  const fadeSliderTimers = (0, import_react26.useRef)({});
-  const handleFadeSlider = (0, import_react26.useCallback)(
+  const fadeSliderTimers = (0, import_react28.useRef)({});
+  const handleFadeSlider = (0, import_react28.useCallback)(
     (fade, pos) => {
       setFadesMeta(
         (prev) => prev.map((f) => f.dbId === fade.dbId ? { ...f, meta: { ...f.meta, sliderPos: pos } } : f)
@@ -5877,8 +6174,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, applyFadeAutomation, setFadesMeta]
   );
-  const lastResyncKeyRef = (0, import_react26.useRef)("");
-  (0, import_react26.useEffect)(() => {
+  const lastResyncKeyRef = (0, import_react28.useRef)("");
+  (0, import_react28.useEffect)(() => {
     if (!host.getTrackSound || resolvedCrossfadePairs.length === 0 && resolvedFades.length === 0) {
       return;
     }
@@ -5919,7 +6216,7 @@ function useTransitionOps({
       cancelled = true;
     };
   }, [resolvedCrossfadePairs, resolvedFades, host, adapter]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!host.setTrackVolumeAutomation || resolvedFades.length === 0) return;
     void (async () => {
       const mc = await host.getMusicalContext();
@@ -5953,7 +6250,7 @@ function useTransitionOps({
 }
 
 // src/panel-core/useGeneratorPanelCore.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var EMPTY_PLACEHOLDERS = [];
 function useGeneratorPanelCore({
   ui,
@@ -5973,8 +6270,8 @@ function useGeneratorPanelCore({
   } = ui;
   const { identity, features } = adapter;
   const logTag = identity.logTag;
-  const adapterRef = (0, import_react27.useRef)(adapter);
-  (0, import_react27.useEffect)(() => {
+  const adapterRef = (0, import_react29.useRef)(adapter);
+  (0, import_react29.useEffect)(() => {
     if (adapterRef.current !== adapter) {
       adapterRef.current = adapter;
       console.warn(
@@ -5984,27 +6281,27 @@ function useGeneratorPanelCore({
   }, [adapter, logTag]);
   const supportsMeters = typeof host.getTrackLevels === "function";
   const trackLevels = useTrackLevels(host, isExpanded);
-  const [tracks, setTracks] = (0, import_react27.useState)([]);
-  const [isLoadingTracks, setIsLoadingTracks] = (0, import_react27.useState)(false);
-  const [importOpen, setImportOpen] = (0, import_react27.useState)(false);
-  const [soundImportTarget, setSoundImportTarget] = (0, import_react27.useState)(null);
-  const [designerView, setDesignerView] = (0, import_react27.useState)(false);
-  const [transitionSourceTotal, setTransitionSourceTotal] = (0, import_react27.useState)(0);
-  const [crossfadePairsMeta, setCrossfadePairsMeta] = (0, import_react27.useState)([]);
-  const [fadesMeta, setFadesMeta] = (0, import_react27.useState)([]);
-  const [genericGroupMetas, setGenericGroupMetas] = (0, import_react27.useState)({});
+  const [tracks, setTracks] = (0, import_react29.useState)([]);
+  const [isLoadingTracks, setIsLoadingTracks] = (0, import_react29.useState)(false);
+  const [importOpen, setImportOpen] = (0, import_react29.useState)(false);
+  const [soundImportTarget, setSoundImportTarget] = (0, import_react29.useState)(null);
+  const [designerView, setDesignerView] = (0, import_react29.useState)(false);
+  const [transitionSourceTotal, setTransitionSourceTotal] = (0, import_react29.useState)(0);
+  const [crossfadePairsMeta, setCrossfadePairsMeta] = (0, import_react29.useState)([]);
+  const [fadesMeta, setFadesMeta] = (0, import_react29.useState)([]);
+  const [genericGroupMetas, setGenericGroupMetas] = (0, import_react29.useState)({});
   const [isComposing, , setIsComposingForScene] = useSceneState(activeSceneId, false);
   const [placeholders, , setPlaceholdersForScene] = useSceneState(
     activeSceneId,
     EMPTY_PLACEHOLDERS
   );
-  const saveTimeoutRefs = (0, import_react27.useRef)({});
-  const editLoadStartedRef = (0, import_react27.useRef)(/* @__PURE__ */ new Set());
-  const [availableInstruments, setAvailableInstruments] = (0, import_react27.useState)([]);
-  const [instrumentsLoading, setInstrumentsLoading] = (0, import_react27.useState)(false);
-  const engineToDbIdRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
-  const tracksLoadedForSceneRef = (0, import_react27.useRef)(null);
-  const persistSoundHistory = (0, import_react27.useCallback)(
+  const saveTimeoutRefs = (0, import_react29.useRef)({});
+  const editLoadStartedRef = (0, import_react29.useRef)(/* @__PURE__ */ new Set());
+  const [availableInstruments, setAvailableInstruments] = (0, import_react29.useState)([]);
+  const [instrumentsLoading, setInstrumentsLoading] = (0, import_react29.useState)(false);
+  const engineToDbIdRef = (0, import_react29.useRef)(/* @__PURE__ */ new Map());
+  const tracksLoadedForSceneRef = (0, import_react29.useRef)(null);
+  const persistSoundHistory = (0, import_react29.useCallback)(
     (trackId, state) => {
       if (!activeSceneId) return;
       const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
@@ -6024,7 +6321,7 @@ function useGeneratorPanelCore({
     setItems: setTracks,
     getId: (t) => t.handle.dbId
   });
-  const loadTracks = (0, import_react27.useCallback)(
+  const loadTracks = (0, import_react29.useCallback)(
     async (incremental = false) => {
       const sceneAtStart = activeSceneId;
       if (!sceneAtStart) {
@@ -6149,18 +6446,18 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId, soundHistory, adapter, logTag]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     loadTracks();
   }, [loadTracks]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.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_react27.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react27.useEffect)(() => {
+  const loadedCompletedIdsRef = (0, import_react29.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react29.useEffect)(() => {
     if (placeholders.length === 0) {
       loadedCompletedIdsRef.current.clear();
       return;
@@ -6179,16 +6476,16 @@ function useGeneratorPanelCore({
       loadTracks(true);
     }
   }, [placeholders, loadTracks, logTag]);
-  const adoptAndLoad = (0, import_react27.useCallback)(() => {
+  const adoptAndLoad = (0, import_react29.useCallback)(() => {
     loadTracks(true);
   }, [loadTracks]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const unsub = host.onEngineReady(() => {
       adoptAndLoad();
     });
     return unsub;
   }, [host, adoptAndLoad]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (typeof host.onAfterAgentMutation !== "function") return;
     let timer = null;
     const unsub = host.onAfterAgentMutation(() => {
@@ -6203,13 +6500,13 @@ function useGeneratorPanelCore({
       if (timer) clearTimeout(timer);
     };
   }, [host, loadTracks]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.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_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!features.bulkComposePlaceholders) return;
     console.log(`[${logTag}] Subscribing to composeProgress`);
     const unsub = host.onComposeProgress((event) => {
@@ -6243,7 +6540,7 @@ function useGeneratorPanelCore({
     });
     return unsub;
   }, [host, setIsComposingForScene, setPlaceholdersForScene, features.bulkComposePlaceholders, logTag]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const refs = saveTimeoutRefs;
     return () => {
       for (const timeout of Object.values(refs.current)) {
@@ -6251,9 +6548,9 @@ function useGeneratorPanelCore({
       }
     };
   }, []);
-  const isAddingTrackRef = (0, import_react27.useRef)(false);
-  const [isAddingTrack, setIsAddingTrack] = (0, import_react27.useState)(false);
-  const handleAddTrack = (0, import_react27.useCallback)(async () => {
+  const isAddingTrackRef = (0, import_react29.useRef)(false);
+  const [isAddingTrack, setIsAddingTrack] = (0, import_react29.useState)(false);
+  const handleAddTrack = (0, import_react29.useCallback)(async () => {
     if (isAddingTrackRef.current) return;
     if (!activeSceneId) {
       host.showToast("warning", "Select SCENE");
@@ -6293,7 +6590,7 @@ function useGeneratorPanelCore({
       setIsAddingTrack(false);
     }
   }, [host, adapter, identity, activeSceneId, isConnected, isAuthenticated, tracks.length, onExpandSelf]);
-  const handlePortTrack = (0, import_react27.useCallback)(
+  const handlePortTrack = (0, import_react29.useCallback)(
     async (sel) => {
       if (!activeSceneId) {
         host.showToast("warning", "Select SCENE");
@@ -6350,7 +6647,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, identity, activeSceneId, isConnected, tracks.length, loadTracks]
   );
-  const handleSoundImportPick = (0, import_react27.useCallback)(
+  const handleSoundImportPick = (0, import_react29.useCallback)(
     async (sel) => {
       const target = soundImportTarget;
       if (!target || !host.getTrackSound) {
@@ -6381,8 +6678,8 @@ function useGeneratorPanelCore({
     },
     [soundImportTarget, host, adapter, identity.familyKey, soundHistory]
   );
-  const [isExportingMidi, setIsExportingMidi] = (0, import_react27.useState)(false);
-  const handleExportMidi = (0, import_react27.useCallback)(async () => {
+  const [isExportingMidi, setIsExportingMidi] = (0, import_react29.useState)(false);
+  const handleExportMidi = (0, import_react29.useCallback)(async () => {
     if (isExportingMidi) return;
     setIsExportingMidi(true);
     try {
@@ -6413,10 +6710,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_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!canCrossfade) setDesignerView(false);
   }, [canCrossfade]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!canCrossfade || !xfFromId || !xfToId || !host.listSceneFamilyTracks) {
       setTransitionSourceTotal(0);
       return;
@@ -6432,12 +6729,12 @@ function useGeneratorPanelCore({
     };
   }, [canCrossfade, xfFromId, xfToId, host]);
   const transitionDone = crossfadePairsMeta.length * 2 + fadesMeta.length;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!onHeaderContent) return;
     const addDisabled = needsContract || !isConnected || !activeSceneId || tracks.length >= identity.maxTracks || isAddingTrack;
     onHeaderContent(
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-1 items-center", children: [
-        features.importTracks && (!canCrossfade || !designerView) && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-1 items-center", children: [
+        features.importTracks && (!canCrossfade || !designerView) && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             "data-testid": `import-from-scene-${identity.familyKey}-button`,
@@ -6451,7 +6748,7 @@ function useGeneratorPanelCore({
             children: identity.importTrackLabel ?? "Import Track"
           }
         ),
-        (!canCrossfade || !designerView) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        (!canCrossfade || !designerView) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             "data-testid": `add-${identity.familyKey}-track-button`,
@@ -6467,7 +6764,7 @@ function useGeneratorPanelCore({
             children: identity.addTrackLabel ?? "Add Track"
           }
         ),
-        canCrossfade && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        canCrossfade && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "button",
           {
             "data-testid": `${identity.familyKey}-view-toggle`,
@@ -6486,7 +6783,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_runtime24.jsx)(
+              transitionSourceTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "span",
                 {
                   className: "absolute inset-y-0 left-0 bg-sas-accent/25",
@@ -6494,7 +6791,7 @@ function useGeneratorPanelCore({
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "relative", children: [
                 "\u21C4 ",
                 designerView ? "Transition" : "Tracks",
                 transitionSourceTotal > 0 ? ` ${transitionDone}/${transitionSourceTotal}` : ""
@@ -6525,7 +6822,7 @@ function useGeneratorPanelCore({
     identity,
     features.importTracks
   ]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!onLoading) return;
     const anyGenerating = tracks.some((t) => t.isGenerating);
     onLoading(isLoadingTracks || anyGenerating || isBulkActive);
@@ -6533,7 +6830,7 @@ function useGeneratorPanelCore({
       onLoading(false);
     };
   }, [onLoading, isLoadingTracks, tracks, isBulkActive]);
-  const handleDeleteTrack = (0, import_react27.useCallback)(
+  const handleDeleteTrack = (0, import_react29.useCallback)(
     async (trackId) => {
       try {
         await host.deleteTrack(trackId);
@@ -6549,7 +6846,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId]
   );
-  const handlePromptChange = (0, import_react27.useCallback)(
+  const handlePromptChange = (0, import_react29.useCallback)(
     (trackId, prompt) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, prompt } : t));
       const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
@@ -6565,7 +6862,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId]
   );
-  const resolvedGenericGroups = (0, import_react27.useMemo)(() => {
+  const resolvedGenericGroups = (0, import_react29.useMemo)(() => {
     const out = {};
     for (const ext of adapter.groupExtensions ?? []) {
       out[ext.metaKey] = resolveTrackGroups(
@@ -6579,18 +6876,18 @@ function useGeneratorPanelCore({
     }
     return out;
   }, [adapter, genericGroupMetas, tracks]);
-  const genericGroupMemberDbIds = (0, import_react27.useMemo)(() => {
+  const genericGroupMemberDbIds = (0, import_react29.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_react27.useCallback)(
+  const engineToDbId = (0, import_react29.useCallback)(
     (trackId) => engineToDbIdRef.current.get(trackId) ?? trackId,
     []
   );
-  const updateTrack = (0, import_react27.useCallback)(
+  const updateTrack = (0, import_react29.useCallback)(
     (trackId, patch) => {
       setTracks(
         (prev) => prev.map(
@@ -6600,18 +6897,18 @@ function useGeneratorPanelCore({
     },
     []
   );
-  const markEditLoaded = (0, import_react27.useCallback)((trackId) => {
+  const markEditLoaded = (0, import_react29.useCallback)((trackId) => {
     editLoadStartedRef.current.add(trackId);
   }, []);
-  const tracksRef = (0, import_react27.useRef)(tracks);
-  (0, import_react27.useEffect)(() => {
+  const tracksRef = (0, import_react29.useRef)(tracks);
+  (0, import_react29.useEffect)(() => {
     tracksRef.current = tracks;
   }, [tracks]);
-  const resolvedGenericGroupsRef = (0, import_react27.useRef)(resolvedGenericGroups);
-  (0, import_react27.useEffect)(() => {
+  const resolvedGenericGroupsRef = (0, import_react29.useRef)(resolvedGenericGroups);
+  (0, import_react29.useEffect)(() => {
     resolvedGenericGroupsRef.current = resolvedGenericGroups;
   }, [resolvedGenericGroups]);
-  const makeServices = (0, import_react27.useCallback)(() => {
+  const makeServices = (0, import_react29.useCallback)(() => {
     return {
       host,
       activeSceneId,
@@ -6630,7 +6927,7 @@ function useGeneratorPanelCore({
       resolvedGroups: (metaKey) => resolvedGenericGroupsRef.current[metaKey]?.resolved ?? []
     };
   }, [host, activeSceneId, updateTrack, loadTracks, soundHistory, engineToDbId, markEditLoaded, identity, adapter]);
-  const handleGenerate = (0, import_react27.useCallback)(
+  const handleGenerate = (0, import_react29.useCallback)(
     async (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track || !track.prompt.trim()) return;
@@ -6657,7 +6954,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, tracks, isAuthenticated, makeServices]
   );
-  const handleMuteToggle = (0, import_react27.useCallback)(
+  const handleMuteToggle = (0, import_react29.useCallback)(
     (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -6677,7 +6974,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const handleSoloToggle = (0, import_react27.useCallback)(
+  const handleSoloToggle = (0, import_react29.useCallback)(
     (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -6697,7 +6994,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const handleVolumeChange = (0, import_react27.useCallback)(
+  const handleVolumeChange = (0, import_react29.useCallback)(
     (trackId, volume) => {
       setTracks(
         (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, volume } } : t)
@@ -6707,7 +7004,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handlePanChange = (0, import_react27.useCallback)(
+  const handlePanChange = (0, import_react29.useCallback)(
     (trackId, pan) => {
       setTracks(
         (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, pan } } : t)
@@ -6717,7 +7014,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleShuffle = (0, import_react27.useCallback)(
+  const handleShuffle = (0, import_react29.useCallback)(
     async (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -6759,7 +7056,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, tracks, soundHistory, logTag]
   );
-  const handleCopy = (0, import_react27.useCallback)(
+  const handleCopy = (0, import_react29.useCallback)(
     async (trackId) => {
       try {
         const newHandle = await host.duplicateTrack(trackId);
@@ -6772,7 +7069,7 @@ function useGeneratorPanelCore({
     },
     [host, loadTracks]
   );
-  const handleFxToggle = (0, import_react27.useCallback)(
+  const handleFxToggle = (0, import_react29.useCallback)(
     (trackId, category, enabled) => {
       setTracks(
         (prev) => prev.map(
@@ -6795,7 +7092,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleFxPresetChange = (0, import_react27.useCallback)(
+  const handleFxPresetChange = (0, import_react29.useCallback)(
     (trackId, category, presetIndex) => {
       setTracks(
         (prev) => prev.map(
@@ -6821,7 +7118,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleFxDryWetChange = (0, import_react27.useCallback)(
+  const handleFxDryWetChange = (0, import_react29.useCallback)(
     (trackId, category, value) => {
       setTracks(
         (prev) => prev.map(
@@ -6833,7 +7130,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const toggleFxDrawer = (0, import_react27.useCallback)(
+  const toggleFxDrawer = (0, import_react29.useCallback)(
     (trackId) => {
       setTracks(
         (prev) => prev.map((t) => {
@@ -6855,7 +7152,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const loadEditNotes = (0, import_react27.useCallback)(
+  const loadEditNotes = (0, import_react29.useCallback)(
     async (trackId) => {
       try {
         const mc = await host.getMusicalContext();
@@ -6873,7 +7170,7 @@ function useGeneratorPanelCore({
     },
     [host, logTag]
   );
-  const handleNotesChange = (0, import_react27.useCallback)(
+  const handleNotesChange = (0, import_react29.useCallback)(
     (trackId, notes) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editNotes: notes } : t));
       const key = `edit:${trackId}`;
@@ -6903,7 +7200,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleTabChange = (0, import_react27.useCallback)(
+  const handleTabChange = (0, import_react29.useCallback)(
     (trackId, tab) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, drawerOpen: true, drawerTab: tab } : t));
       if (tab === "fx") {
@@ -6928,10 +7225,10 @@ function useGeneratorPanelCore({
     },
     [host, availableInstruments.length, instrumentsLoading, loadEditNotes]
   );
-  const handleProgressChange = (0, import_react27.useCallback)((trackId, pct) => {
+  const handleProgressChange = (0, import_react29.useCallback)((trackId, pct) => {
     setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, generationProgress: pct } : t));
   }, []);
-  const handleToggleDrawer = (0, import_react27.useCallback)((trackId) => {
+  const handleToggleDrawer = (0, import_react29.useCallback)((trackId) => {
     setTracks(
       (prev) => prev.map((t) => {
         if (t.handle.id !== trackId) return t;
@@ -6940,7 +7237,7 @@ function useGeneratorPanelCore({
       })
     );
   }, []);
-  const handleInstrumentSelect = (0, import_react27.useCallback)(
+  const handleInstrumentSelect = (0, import_react29.useCallback)(
     async (trackId, pluginId) => {
       const isDefaultInstrument = pluginId === (identity.defaultInstrumentPluginId ?? "Surge XT");
       if (isDefaultInstrument) {
@@ -6993,7 +7290,7 @@ function useGeneratorPanelCore({
     },
     [host, identity.defaultInstrumentPluginId, logTag]
   );
-  const handleShowEditor = (0, import_react27.useCallback)(
+  const handleShowEditor = (0, import_react29.useCallback)(
     async (trackId) => {
       try {
         await host.showInstrumentEditor(trackId);
@@ -7004,12 +7301,12 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleBackToInstruments = (0, import_react27.useCallback)((trackId) => {
+  const handleBackToInstruments = (0, import_react29.useCallback)((trackId) => {
     setTracks(
       (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editorStage: false } : t)
     );
   }, []);
-  const handleRefreshInstruments = (0, import_react27.useCallback)(() => {
+  const handleRefreshInstruments = (0, import_react29.useCallback)(() => {
     setInstrumentsLoading(true);
     host.getAvailableInstruments().then((instruments) => {
       setAvailableInstruments(instruments);
@@ -7018,13 +7315,13 @@ function useGeneratorPanelCore({
       setInstrumentsLoading(false);
     });
   }, [host]);
-  const onAuditionNote = (0, import_react27.useCallback)(
+  const onAuditionNote = (0, import_react29.useCallback)(
     (trackId, pitch, velocity, ms) => {
       void host.auditionNote(trackId, pitch, velocity, ms);
     },
     [host]
   );
-  const { resolvedCrossfadePairs, crossfadeMemberDbIds } = (0, import_react27.useMemo)(() => {
+  const { resolvedCrossfadePairs, crossfadeMemberDbIds } = (0, import_react29.useMemo)(() => {
     const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
     const pairs = [];
     const members = /* @__PURE__ */ new Set();
@@ -7039,7 +7336,7 @@ function useGeneratorPanelCore({
     }
     return { resolvedCrossfadePairs: pairs, crossfadeMemberDbIds: members };
   }, [tracks, crossfadePairsMeta]);
-  const { resolvedFades, fadeMemberDbIds } = (0, import_react27.useMemo)(() => {
+  const { resolvedFades, fadeMemberDbIds } = (0, import_react29.useMemo)(() => {
     const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
     const list = [];
     const members = /* @__PURE__ */ new Set();
@@ -7067,7 +7364,7 @@ function useGeneratorPanelCore({
     resolvedCrossfadePairs,
     resolvedFades
   });
-  const setGroupMute = (0, import_react27.useCallback)(
+  const setGroupMute = (0, import_react29.useCallback)(
     (trackIds, muted) => {
       for (const id of trackIds) {
         setTracks(
@@ -7079,7 +7376,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const setGroupSolo = (0, import_react27.useCallback)(
+  const setGroupSolo = (0, import_react29.useCallback)(
     (trackIds, solo) => {
       for (const id of trackIds) {
         setTracks(
@@ -7091,7 +7388,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const deleteGroup = (0, import_react27.useCallback)(
+  const deleteGroup = (0, import_react29.useCallback)(
     async (members, cleanupKeySuffixes) => {
       for (const member of members) {
         try {
@@ -7111,7 +7408,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId, loadTracks]
   );
-  const handlers = (0, import_react27.useMemo)(
+  const handlers = (0, import_react29.useMemo)(
     () => ({
       promptChange: handlePromptChange,
       generate: (trackId) => {
@@ -7225,8 +7522,8 @@ function useGeneratorPanelCore({
 }
 
 // src/panel-core/GeneratorPanelShell.tsx
-var import_react28 = __toESM(require("react"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react30 = __toESM(require("react"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function GeneratorPanelShell({ core, slots }) {
   const {
     ui,
@@ -7281,7 +7578,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_react28.useCallback)(
+  const buildRowProps = (0, import_react30.useCallback)(
     (track, drag) => {
       const id = track.handle.id;
       const pickerProps = features.instrumentPicker ? {
@@ -7333,6 +7630,7 @@ function GeneratorPanelShell({ core, slots }) {
         onVolumeChange: (vol) => handlers.volumeChange(id, vol),
         onPanChange: (pan) => handlers.panChange(id, pan),
         onFxToggle: (cat, enabled) => handleFxToggle(id, cat, enabled),
+        externalFxHost: host,
         onFxPresetChange: (cat, idx) => handleFxPresetChange(id, cat, idx),
         onFxDryWetChange: (cat, val) => handleFxDryWetChange(id, cat, val),
         onToggleFxDrawer: () => handlers.toggleFxDrawer(id),
@@ -7380,12 +7678,12 @@ function GeneratorPanelShell({ core, slots }) {
     ]
   );
   if (!activeSceneId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         "data-testid": `no-scene-placeholder-${identity.familyKey}`,
         className: "flex items-center justify-center py-8",
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "button",
           {
             onClick: () => onSelectScene?.(),
@@ -7397,12 +7695,12 @@ function GeneratorPanelShell({ core, slots }) {
     );
   }
   if (!sceneContext?.hasContract) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         "data-testid": `no-contract-placeholder-${identity.familyKey}`,
         className: "flex items-center justify-center py-8",
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "button",
           {
             onClick: () => onOpenContract?.(),
@@ -7414,7 +7712,7 @@ function GeneratorPanelShell({ core, slots }) {
     );
   }
   if (features.bulkComposePlaceholders && isComposing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SorceryProgressBar, { isLoading: true, statusText: "COMPOSING...", heightClass: "h-10" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SorceryProgressBar, { isLoading: true, statusText: "COMPOSING...", heightClass: "h-10" }) });
   }
   const activePlaceholders = features.bulkComposePlaceholders ? placeholders : [];
   if (activePlaceholders.length > 0) {
@@ -7425,18 +7723,18 @@ function GeneratorPanelShell({ core, slots }) {
         tracksByDbId.set(t.handle.id, t);
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: activePlaceholders.map((ph) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime25.jsx)(TrackRow, { ...buildRowProps(loadedTrack) }, ph.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TrackRow, { ...buildRowProps(loadedTrack) }, ph.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime25.jsx)(SorceryProgressBar, { isLoading: true, statusText: "CONJURING MIDI...", heightClass: "h-10" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SorceryProgressBar, { isLoading: true, statusText: "CONJURING MIDI...", heightClass: "h-10" })
         },
         ph.id
       );
@@ -7448,13 +7746,13 @@ function GeneratorPanelShell({ core, slots }) {
     supportsMeters,
     levels: supportsMeters ? trackLevels : void 0,
     handlers,
-    renderDefaultTrackRow: (track, overrides, drag) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TrackRow, { ...{ ...buildRowProps(track, drag), ...overrides ?? {} } }, track.handle.id),
+    renderDefaultTrackRow: (track, overrides, drag) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TrackRow, { ...{ ...buildRowProps(track, drag), ...overrides ?? {} } }, track.handle.id),
     setGroupMute,
     setGroupSolo,
     deleteGroup
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: [
-    features.importTracks && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: [
+    features.importTracks && host.listImportableTracks && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ImportTrackModal,
       {
         host,
@@ -7467,7 +7765,7 @@ function GeneratorPanelShell({ core, slots }) {
         testIdPrefix: `${identity.familyKey}-import`
       }
     ),
-    features.importTracks && host.listImportableTracks && host.getTrackSound && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    features.importTracks && host.listImportableTracks && host.getTrackSound && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ImportTrackModal,
       {
         host,
@@ -7482,7 +7780,7 @@ function GeneratorPanelShell({ core, slots }) {
       }
     ),
     slots?.modals,
-    canCrossfade && xfFromId && xfToId && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: designerView ? "contents" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    canCrossfade && xfFromId && xfToId && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: designerView ? "contents" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       TransitionDesigner,
       {
         host,
@@ -7499,11 +7797,12 @@ function GeneratorPanelShell({ core, slots }) {
         testIdPrefix: `${identity.familyKey}-transition-designer`
       }
     ) }),
-    !(designerView && canCrossfade) && (isLoadingTracks ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sas-muted text-xs text-center py-4", children: "Loading tracks..." }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      panelBus.supported && panelBus.bus && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    !(designerView && canCrossfade) && (isLoadingTracks ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sas-muted text-xs text-center py-4", children: "Loading tracks..." }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+      panelBus.supported && panelBus.bus && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         PanelMasterStrip,
         {
           bus: panelBus.bus,
+          levels: panelBus.levels,
           availableFx: panelBus.availableFx,
           fxLoading: panelBus.fxLoading,
           soloedOut: anySolo && !panelBus.bus.soloed,
@@ -7520,7 +7819,7 @@ function GeneratorPanelShell({ core, slots }) {
         }
       ),
       slots?.beforeRows,
-      resolvedCrossfadePairs.map((pair) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      resolvedCrossfadePairs.map((pair) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         CrossfadeTrackRow,
         {
           accentColor: identity.transitionAccentColor,
@@ -7557,7 +7856,7 @@ function GeneratorPanelShell({ core, slots }) {
         },
         pair.groupId
       )),
-      resolvedFades.map((fade) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      resolvedFades.map((fade) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         FadeTrackRow,
         {
           accentColor: identity.transitionAccentColor,
@@ -7583,20 +7882,20 @@ function GeneratorPanelShell({ core, slots }) {
         fade.dbId
       )),
       (adapter.groupExtensions ?? []).flatMap(
-        (ext) => (resolvedGenericGroups[ext.metaKey]?.resolved ?? []).map((group) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react28.default.Fragment, { children: ext.renderGroup(group, groupCtx) }, `${ext.metaKey}:${group.groupId}`))
+        (ext) => (resolvedGenericGroups[ext.metaKey]?.resolved ?? []).map((group) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react30.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_runtime25.jsx)(TrackRow, { ...buildRowProps(track, reorder.dragPropsFor(index)) }, track.handle.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime25.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           "data-testid": "export-midi-tracks-button",
@@ -7664,7 +7963,7 @@ function createSurgeSoundAdapter(host, overrides = {}) {
 }
 
 // src/constants/sdk-version.ts
-var PLUGIN_SDK_VERSION = "2.37.0";
+var PLUGIN_SDK_VERSION = "2.39.0";
 
 // src/utils/format-concurrent-tracks.ts
 function formatConcurrentTracks(ctx) {
@@ -7852,6 +8151,7 @@ function pickTopKWeighted(scored, options = {}) {
   TEXTURAL_ROLES,
   TRANSITION_DESIGNER_DRAFT_KEY,
   TrackDrawer,
+  TrackExternalFxSection,
   TrackMeterStrip,
   TrackRow,
   TransitionDesigner,
@@ -7908,6 +8208,7 @@ function pickTopKWeighted(scored, options = {}) {
   usePanelBus,
   useSceneState,
   useSoundHistory,
+  useTrackExternalFx,
   useTrackLevel,
   useTrackLevels,
   useTrackMeter,