@signalsandsorcery/plugin-sdk 2.35.1 → 2.35.3

package/dist/index.mjs

@@ -65,11 +65,11 @@ var EMPTY_FX_DETAIL_STATE = {
 };
 
 // src/components/TrackRow.tsx
-import React8 from "react";
+import React9 from "react";
 import { AlertCircle, ChevronDown, GripVertical } from "lucide-react";
 
 // src/components/TrackDrawer.tsx
-import { useState as useState2, useMemo as useMemo2 } from "react";
+import { useState as useState4, useMemo as useMemo3 } from "react";
 
 // src/constants/fx-presets.ts
 var EQ_PRESETS = {
@@ -789,8 +789,250 @@ function PianoRollEditor({
   ] });
 }
 
-// src/components/TrackDrawer.tsx
+// src/components/TrackExternalFxSection.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/hooks/useTrackExternalFx.ts
+import { useCallback as useCallback2, useEffect, useRef as useRef2, useState as useState2 } from "react";
+function useTrackExternalFx(host, trackId) {
+  const supported = typeof host.getTrackExternalFx === "function";
+  const [fx, setFx] = useState2(null);
+  const [availableFx, setAvailableFx] = useState2([]);
+  const [fxLoading, setFxLoading] = useState2(false);
+  const [pickerOpen, setPickerOpen] = useState2(false);
+  const fxLoadedRef = useRef2(false);
+  const loadSeqRef = useRef2(0);
+  const reload = useCallback2(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]);
+  useEffect(() => {
+    setFx(null);
+    setPickerOpen(false);
+    void reload();
+  }, [reload]);
+  const loadFxList = useCallback2(
+    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 = useCallback2(
+    (open) => {
+      setPickerOpen(open);
+      if (open) void loadFxList(false);
+    },
+    [loadFxList]
+  );
+  const mutate = useCallback2(
+    (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
 import { jsx as jsx3, jsxs as jsxs3 } from "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] = useState3("");
+  const filtered = useMemo2(() => {
+    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__ */ jsxs3(
+    "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__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsxs3("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto", children: [
+            entries.map((entry) => /* @__PURE__ */ jsxs3(
+              "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__ */ jsx3(
+                    "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__ */ jsx3(
+                    "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__ */ jsx3(
+                    "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__ */ jsx3("span", { className: "text-[10px] text-sas-muted/40 select-none", children: "none" })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsxs3("div", { "data-testid": "track-fx-picker", className: "flex flex-col gap-2 pt-1", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx3(
+              "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__ */ jsx3(
+              "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__ */ jsx3("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
+            filtered.map((candidate) => /* @__PURE__ */ jsxs3(
+              "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__ */ jsx3("span", { className: "text-xs font-medium truncate w-full", children: candidate.name }),
+                  /* @__PURE__ */ jsx3("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: candidate.manufacturer || candidate.type.toUpperCase() })
+                ]
+              },
+              candidate.pluginId
+            )),
+            filtered.length === 0 && /* @__PURE__ */ jsx3("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
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var TAB_LABELS = {
   fx: "FX",
   pick: "Pick",
@@ -807,6 +1049,7 @@ function TrackDrawer({
   onFxPresetChange,
   onFxDryWetChange,
   fxDisabled = false,
+  externalFxHost,
   instruments = [],
   currentPluginId = null,
   isLoading = false,
@@ -829,13 +1072,13 @@ function TrackDrawer({
   editSnap,
   onAuditionNote
 }) {
-  const [search, setSearch] = useState2("");
+  const [search, setSearch] = useState4("");
   const fxEnabled = !!onFxToggle;
   const pickEnabled = !!onSelect;
   const historyEnabled = !!onRestoreSound;
   const importEnabled = !!onImportSound;
   const editEnabled = !!onNotesChange;
-  const enabledTabs = useMemo2(() => {
+  const enabledTabs = useMemo3(() => {
     const tabs = [];
     if (fxEnabled) tabs.push("fx");
     if (pickEnabled) tabs.push("pick");
@@ -845,7 +1088,7 @@ function TrackDrawer({
     return tabs;
   }, [fxEnabled, pickEnabled, historyEnabled, importEnabled, editEnabled]);
   const SURGE_XT_DEFAULT_ID = "Surge XT";
-  const filtered = useMemo2(() => {
+  const filtered = useMemo3(() => {
     let all = instruments.filter((i) => i.name !== "Surge XT");
     if (search.trim()) {
       const q = search.toLowerCase();
@@ -865,12 +1108,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__ */ jsx3(
+  const strip = enabledTabs.length > 1 ? /* @__PURE__ */ jsx4(
     "div",
     {
       className: "flex items-center gap-1 border-b border-sas-border pb-1",
       "data-testid": "sdk-drawer-tabs",
-      children: enabledTabs.map((tab) => /* @__PURE__ */ jsx3(
+      children: enabledTabs.map((tab) => /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -884,9 +1127,9 @@ function TrackDrawer({
     }
   ) : null;
   const currentSound = soundHistoryCursor >= 0 && soundHistoryCursor < history.length ? history[soundHistoryCursor].label : null;
-  const header = strip || currentSound ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", "data-testid": "sdk-drawer-header", children: [
+  const header = strip || currentSound ? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", "data-testid": "sdk-drawer-header", children: [
     strip,
-    currentSound && /* @__PURE__ */ jsx3(
+    currentSound && /* @__PURE__ */ jsx4(
       "span",
       {
         className: "text-[10px] text-sas-muted/60 truncate px-0.5",
@@ -896,9 +1139,9 @@ function TrackDrawer({
     )
   ] }) : null;
   if (effectiveTab === "edit") {
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-edit", children: [
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-edit", children: [
       header,
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         PianoRollEditor,
         {
           notes: editNotes ?? [],
@@ -913,9 +1156,9 @@ function TrackDrawer({
     ] });
   }
   if (effectiveTab === "fx") {
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-fx", children: [
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-fx", children: [
       header,
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         FxToggleBar,
         {
           trackId,
@@ -925,20 +1168,21 @@ function TrackDrawer({
           onDryWetChange: (_t, category, value) => onFxDryWetChange?.(category, value),
           disabled: fxDisabled
         }
-      )
+      ),
+      externalFxHost && /* @__PURE__ */ jsx4(TrackExternalFxSection, { host: externalFxHost, trackId, disabled: fxDisabled })
     ] });
   }
   if (effectiveTab === "import") {
     const soundNoun = /preset/i.test(importSoundLabel ?? "") ? "preset" : /sample/i.test(importSoundLabel ?? "") ? "sample" : "sound";
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-import", children: [
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-import", children: [
       header,
-      /* @__PURE__ */ jsxs3("p", { className: "text-[11px] text-sas-muted/70 leading-snug", children: [
+      /* @__PURE__ */ jsxs4("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__ */ jsxs3(
+      /* @__PURE__ */ jsxs4(
         "button",
         {
           type: "button",
@@ -956,16 +1200,16 @@ function TrackDrawer({
   }
   if (effectiveTab === "history") {
     const order = history.map((_, i) => i).reverse();
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
       header,
-      history.length === 0 ? /* @__PURE__ */ jsx3(
+      history.length === 0 ? /* @__PURE__ */ jsx4(
         "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__ */ jsx3(
+      ) : /* @__PURE__ */ jsx4(
         "ul",
         {
           className: "flex flex-col gap-1 max-h-[160px] overflow-y-auto",
@@ -973,8 +1217,8 @@ function TrackDrawer({
           children: order.map((i) => {
             const entry = history[i];
             const isCurrent = i === soundHistoryCursor;
-            return /* @__PURE__ */ jsxs3("li", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxs3(
+            return /* @__PURE__ */ jsxs4("li", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs4(
                 "button",
                 {
                   type: "button",
@@ -984,12 +1228,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__ */ jsx3("span", { className: "truncate", children: entry.label }),
-                    /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-sas-muted/60 flex-shrink-0 ml-2", children: isCurrent ? "\u25CF current" : "restore" })
+                    /* @__PURE__ */ jsx4("span", { className: "truncate", children: entry.label }),
+                    /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-sas-muted/60 flex-shrink-0 ml-2", children: isCurrent ? "\u25CF current" : "restore" })
                   ]
                 }
               ),
-              onToggleFavorite && /* @__PURE__ */ jsx3(
+              onToggleFavorite && /* @__PURE__ */ jsx4(
                 "button",
                 {
                   type: "button",
@@ -1007,10 +1251,10 @@ function TrackDrawer({
     ] });
   }
   if (effectiveTab === "pick" && editorStage) {
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
       header,
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx4(
           "button",
           {
             onClick: () => onBackToInstruments?.(),
@@ -1018,9 +1262,9 @@ function TrackDrawer({
             children: "\u2190 Back"
           }
         ),
-        /* @__PURE__ */ jsx3("span", { className: "text-xs text-sas-muted font-medium truncate flex-1", children: selectedInstrumentName ?? "Plugin" })
+        /* @__PURE__ */ jsx4("span", { className: "text-xs text-sas-muted font-medium truncate flex-1", children: selectedInstrumentName ?? "Plugin" })
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           onClick: () => onShowEditor?.(),
@@ -1032,10 +1276,10 @@ function TrackDrawer({
   }
   const isDefaultSelected = currentPluginId === null;
   const isSelected = (pluginId) => pluginId === currentPluginId;
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
     header,
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "text",
@@ -1045,7 +1289,7 @@ function TrackDrawer({
           className: "sas-input flex-1 px-2 py-1 text-xs"
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           onClick: () => onRefresh?.(),
@@ -1056,54 +1300,54 @@ function TrackDrawer({
         }
       )
     ] }),
-    isLoading && instruments.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxs3(
+    isLoading && instruments.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
+      /* @__PURE__ */ jsxs4(
         "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__ */ jsxs3("span", { className: "text-xs font-medium truncate w-full", children: [
+            /* @__PURE__ */ jsxs4("span", { className: "text-xs font-medium truncate w-full", children: [
               isDefaultSelected && "\u2713 ",
               "Surge XT"
             ] }),
-            /* @__PURE__ */ jsx3("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: "Default" })
+            /* @__PURE__ */ jsx4("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__ */ jsxs3(
+        return /* @__PURE__ */ jsxs4(
           "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__ */ jsxs3("span", { className: "text-xs font-medium truncate w-full", children: [
+              /* @__PURE__ */ jsxs4("span", { className: "text-xs font-medium truncate w-full", children: [
                 selected && "\u2713 ",
                 inst.name
               ] }),
-              /* @__PURE__ */ jsx3("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: inst.manufacturer || inst.type.toUpperCase() })
+              /* @__PURE__ */ jsx4("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: inst.manufacturer || inst.type.toUpperCase() })
             ]
           },
           inst.pluginId
         );
       }),
-      filtered.length === 0 && /* @__PURE__ */ jsx3("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__ */ jsx4("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
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 
 // src/components/Modal.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Modal({
   open,
   onClose,
@@ -1113,7 +1357,7 @@ function Modal({
   closeOnEscape = true,
   initialFocusRef
 }) {
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (closeOnEscape && e.key === "Escape") {
@@ -1127,7 +1371,7 @@ function Modal({
   }, [open, onClose, closeOnEscape, initialFocusRef]);
   if (!open) return null;
   return createPortal(
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "div",
       {
         className: "fixed inset-0 z-[1000] flex items-center justify-center bg-black/60",
@@ -1141,7 +1385,7 @@ function Modal({
 }
 
 // src/components/ConfirmDialog.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
   title,
@@ -1153,8 +1397,8 @@ function ConfirmDialog({
   onCancel,
   testIdPrefix = "confirm-dialog"
 }) {
-  const cancelRef = useRef2(null);
-  return /* @__PURE__ */ jsx5(Modal, { open, onClose: onCancel, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs4(
+  const cancelRef = useRef3(null);
+  return /* @__PURE__ */ jsx6(Modal, { open, onClose: onCancel, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: "w-[360px] max-w-[90vw] flex flex-col rounded-md border border-sas-border bg-sas-panel shadow-xl",
@@ -1164,8 +1408,8 @@ function ConfirmDialog({
       "aria-label": title,
       "data-testid": `${testIdPrefix}-modal`,
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "px-4 py-3 border-b border-sas-border", children: /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-sas-text", "data-testid": `${testIdPrefix}-title`, children: title }) }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("div", { className: "px-4 py-3 border-b border-sas-border", children: /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-sas-text", "data-testid": `${testIdPrefix}-title`, children: title }) }),
+        /* @__PURE__ */ jsx6(
           "div",
           {
             className: "px-4 py-3 text-xs text-sas-muted leading-relaxed break-words",
@@ -1173,8 +1417,8 @@ function ConfirmDialog({
             children: message
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-2 px-4 py-3 border-t border-sas-border", children: [
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-2 px-4 py-3 border-t border-sas-border", children: [
+          /* @__PURE__ */ jsx6(
             "button",
             {
               ref: cancelRef,
@@ -1185,7 +1429,7 @@ function ConfirmDialog({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1202,7 +1446,7 @@ function ConfirmDialog({
 }
 
 // src/components/LevelMeter.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var COLOR_GREEN = "#2BD576";
 var COLOR_ORANGE = "#F5A623";
 var COLOR_RED = "#FF4D5E";
@@ -1230,7 +1474,7 @@ var LevelMeter = ({
   const widthPct = active ? dbToPct(peakDb) : 0;
   const showPeak = peakHoldDb != null && active && peakHoldDb > -60;
   const peakHoldPct = showPeak ? dbToPct(peakHoldDb) : 0;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: `sas-level-meter ${className ?? ""}`,
@@ -1241,7 +1485,7 @@ var LevelMeter = ({
         gap: compact ? 0 : 6
       },
       children: [
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             style: {
@@ -1255,8 +1499,8 @@ var LevelMeter = ({
               minWidth: compact ? 0 : 60
             },
             children: [
-              /* @__PURE__ */ jsx6("div", { style: { position: "absolute", inset: 0, background: METER_GRADIENT } }),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7("div", { style: { position: "absolute", inset: 0, background: METER_GRADIENT } }),
+              /* @__PURE__ */ jsx7(
                 "div",
                 {
                   style: {
@@ -1270,7 +1514,7 @@ var LevelMeter = ({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "div",
                 {
                   "data-testid": `${id}-segments`,
@@ -1283,7 +1527,7 @@ var LevelMeter = ({
                   }
                 }
               ),
-              showPeak && /* @__PURE__ */ jsx6(
+              showPeak && /* @__PURE__ */ jsx7(
                 "div",
                 {
                   "data-testid": `${id}-peak`,
@@ -1304,7 +1548,7 @@ var LevelMeter = ({
             ]
           }
         ),
-        !compact && /* @__PURE__ */ jsx6(
+        !compact && /* @__PURE__ */ jsx7(
           "span",
           {
             style: {
@@ -1317,7 +1561,7 @@ var LevelMeter = ({
             children: active && peakDb > -120 ? `${peakDb.toFixed(0)} dB` : "\u2014"
           }
         ),
-        clipped && /* @__PURE__ */ jsx6(
+        clipped && /* @__PURE__ */ jsx7(
           "span",
           {
             "data-testid": `${id}-clip`,
@@ -1342,7 +1586,7 @@ var LevelMeter = ({
 };
 
 // src/hooks/useTrackLevels.ts
-import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
 var meterDiagRLast = /* @__PURE__ */ new Map();
 var POLL_INTERVAL_MS = 33;
 var HIDDEN_RECHECK_MS = 250;
@@ -1353,9 +1597,9 @@ function isHidden() {
   return typeof document !== "undefined" && document.hidden === true;
 }
 function useTrackLevels(host, enabled = true) {
-  const mapRef = useRef3(/* @__PURE__ */ new Map());
-  const listenersRef = useRef3(/* @__PURE__ */ new Set());
-  const handleRef = useRef3(null);
+  const mapRef = useRef4(/* @__PURE__ */ new Map());
+  const listenersRef = useRef4(/* @__PURE__ */ new Set());
+  const handleRef = useRef4(null);
   if (handleRef.current === null) {
     handleRef.current = {
       getLevel: (trackId) => mapRef.current.get(trackId) ?? null,
@@ -1367,7 +1611,7 @@ function useTrackLevels(host, enabled = true) {
       }
     };
   }
-  useEffect2(() => {
+  useEffect3(() => {
     const notify = () => {
       listenersRef.current.forEach((l) => l());
     };
@@ -1437,8 +1681,8 @@ function sameLevel(a, b) {
   return a.peakDb === b.peakDb && a.clipped === b.clipped;
 }
 function useTrackLevel(handle, trackId) {
-  const [level, setLevel] = useState3(null);
-  useEffect2(() => {
+  const [level, setLevel] = useState5(null);
+  useEffect3(() => {
     if (!handle) {
       setLevel(null);
       return;
@@ -1462,11 +1706,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] = useState3(IDLE_METER_VIEW);
-  const heldDbRef = useRef3(METER_FLOOR_DB);
-  const heldAtRef = useRef3(0);
-  const lastTickRef = useRef3(0);
-  useEffect2(() => {
+  const [view, setView] = useState5(IDLE_METER_VIEW);
+  const heldDbRef = useRef4(METER_FLOOR_DB);
+  const heldAtRef = useRef4(0);
+  const lastTickRef = useRef4(0);
+  useEffect3(() => {
     if (!handle) {
       heldDbRef.current = METER_FLOOR_DB;
       lastTickRef.current = 0;
@@ -1509,8 +1753,8 @@ function useTrackMeter(handle, trackId) {
   return view;
 }
 function useTransportPlaying(host) {
-  const [playing, setPlaying] = useState3(false);
-  useEffect2(() => {
+  const [playing, setPlaying] = useState5(false);
+  useEffect3(() => {
     if (!host) {
       setPlaying(false);
       return;
@@ -1538,7 +1782,7 @@ function useTransportPlaying(host) {
 }
 
 // src/components/TrackMeterStrip.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var TrackMeterStrip = ({
   levels,
   trackId,
@@ -1546,12 +1790,12 @@ var TrackMeterStrip = ({
   className
 }) => {
   const meter = useTrackMeter(levels, trackId);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "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__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         LevelMeter,
         {
           compact: true,
@@ -1567,7 +1811,7 @@ var TrackMeterStrip = ({
 };
 
 // src/components/VolumeSlider.tsx
-import { useCallback as useCallback2, useState as useState4, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { useCallback as useCallback3, useState as useState6, useRef as useRef5, useEffect as useEffect4 } from "react";
 
 // src/utils/volume-conversion.ts
 var SLIDER_UNITY = 0.75;
@@ -1589,7 +1833,7 @@ function dbToSlider(db) {
 }
 
 // src/components/VolumeSlider.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function formatDb(value) {
   const db = sliderToDb(value);
   if (db <= -60) return "-\u221E dB";
@@ -1597,12 +1841,12 @@ function formatDb(value) {
   return `${sign}${db.toFixed(1)} dB`;
 }
 function useDebouncedCallback(callback, delay) {
-  const timeoutRef = useRef4(null);
-  const callbackRef = useRef4(callback);
-  useEffect3(() => {
+  const timeoutRef = useRef5(null);
+  const callbackRef = useRef5(callback);
+  useEffect4(() => {
     callbackRef.current = callback;
   }, [callback]);
-  const debouncedCallback = useCallback2(
+  const debouncedCallback = useCallback3(
     (...args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1613,7 +1857,7 @@ function useDebouncedCallback(callback, delay) {
     },
     [delay]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1628,15 +1872,15 @@ var VolumeSlider = ({
   disabled = false,
   className = ""
 }) => {
-  const [localValue, setLocalValue] = useState4(value);
-  const [isDragging, setIsDragging] = useState4(false);
-  useEffect3(() => {
+  const [localValue, setLocalValue] = useState6(value);
+  const [isDragging, setIsDragging] = useState6(false);
+  useEffect4(() => {
     if (!isDragging) {
       setLocalValue(value);
     }
   }, [value, isDragging]);
   const debouncedOnChange = useDebouncedCallback(onChange, 50);
-  const handleChange = useCallback2(
+  const handleChange = useCallback3(
     (e) => {
       const newValue = parseFloat(e.target.value);
       setLocalValue(newValue);
@@ -1644,19 +1888,19 @@ var VolumeSlider = ({
     },
     [debouncedOnChange]
   );
-  const handleMouseDown = useCallback2(() => {
+  const handleMouseDown = useCallback3(() => {
     setIsDragging(true);
   }, []);
-  const handleMouseUp = useCallback2(() => {
+  const handleMouseUp = useCallback3(() => {
     setIsDragging(false);
     onChange(localValue);
   }, [localValue, onChange]);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       className: `flex items-center ${className}`,
       title: `Volume: ${formatDb(localValue)}`,
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(
         "input",
         {
           type: "range",
@@ -1696,8 +1940,8 @@ var VolumeSlider = ({
 };
 
 // src/components/PanSlider.tsx
-import { useCallback as useCallback3, useState as useState5, useRef as useRef5, useEffect as useEffect4 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useState as useState7, useRef as useRef6, useEffect as useEffect5 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function toPanDisplay(value) {
   if (Math.abs(value) < 0.02) {
     return "Center";
@@ -1706,12 +1950,12 @@ function toPanDisplay(value) {
   return value < 0 ? `L${percent}` : `R${percent}`;
 }
 function useDebouncedCallback2(callback, delay) {
-  const timeoutRef = useRef5(null);
-  const callbackRef = useRef5(callback);
-  useEffect4(() => {
+  const timeoutRef = useRef6(null);
+  const callbackRef = useRef6(callback);
+  useEffect5(() => {
     callbackRef.current = callback;
   }, [callback]);
-  const debouncedCallback = useCallback3(
+  const debouncedCallback = useCallback4(
     (...args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1722,7 +1966,7 @@ function useDebouncedCallback2(callback, delay) {
     },
     [delay]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -1737,15 +1981,15 @@ var PanSlider = ({
   disabled = false,
   className = ""
 }) => {
-  const [localValue, setLocalValue] = useState5(value);
-  const [isDragging, setIsDragging] = useState5(false);
-  useEffect4(() => {
+  const [localValue, setLocalValue] = useState7(value);
+  const [isDragging, setIsDragging] = useState7(false);
+  useEffect5(() => {
     if (!isDragging) {
       setLocalValue(value);
     }
   }, [value, isDragging]);
   const debouncedOnChange = useDebouncedCallback2(onChange, 50);
-  const handleChange = useCallback3(
+  const handleChange = useCallback4(
     (e) => {
       const newValue = parseFloat(e.target.value);
       setLocalValue(newValue);
@@ -1753,23 +1997,23 @@ var PanSlider = ({
     },
     [debouncedOnChange]
   );
-  const handleMouseDown = useCallback3(() => {
+  const handleMouseDown = useCallback4(() => {
     setIsDragging(true);
   }, []);
-  const handleMouseUp = useCallback3(() => {
+  const handleMouseUp = useCallback4(() => {
     setIsDragging(false);
     onChange(localValue);
   }, [localValue, onChange]);
-  const handleDoubleClick = useCallback3(() => {
+  const handleDoubleClick = useCallback4(() => {
     setLocalValue(0);
     onChange(0);
   }, [onChange]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       className: `flex items-center ${className}`,
       title: `Pan: ${toPanDisplay(localValue)}`,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         "input",
         {
           type: "range",
@@ -1810,8 +2054,8 @@ var PanSlider = ({
 };
 
 // src/components/SorceryProgressBar.tsx
-import { useState as useState6, useEffect as useEffect5, useRef as useRef6 } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState8, useEffect as useEffect6, useRef as useRef7 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function calculateTimeBasedTarget(elapsedMs, estimatedDurationMs) {
   const t = elapsedMs / estimatedDurationMs;
   if (t <= 0) return 0;
@@ -1856,20 +2100,20 @@ function SorceryProgressBar({
   onProgressChange,
   estimatedDurationMs
 }) {
-  const [progress, setProgress] = useState6(initialProgress);
-  const timerRef = useRef6(null);
-  const isLoadingRef = useRef6(false);
-  const hasStartedRef = useRef6(false);
-  const startTimeRef = useRef6(0);
-  const onProgressChangeRef = useRef6(onProgressChange);
-  const onCompleteRef = useRef6(onComplete);
+  const [progress, setProgress] = useState8(initialProgress);
+  const timerRef = useRef7(null);
+  const isLoadingRef = useRef7(false);
+  const hasStartedRef = useRef7(false);
+  const startTimeRef = useRef7(0);
+  const onProgressChangeRef = useRef7(onProgressChange);
+  const onCompleteRef = useRef7(onComplete);
   onProgressChangeRef.current = onProgressChange;
   onCompleteRef.current = onComplete;
-  const initialProgressRef = useRef6(initialProgress);
+  const initialProgressRef = useRef7(initialProgress);
   initialProgressRef.current = initialProgress;
-  const estimatedDurationMsRef = useRef6(estimatedDurationMs);
+  const estimatedDurationMsRef = useRef7(estimatedDurationMs);
   estimatedDurationMsRef.current = estimatedDurationMs;
-  useEffect5(() => {
+  useEffect6(() => {
     const wasLoading = isLoadingRef.current;
     isLoadingRef.current = isLoading;
     if (isLoading && !wasLoading) {
@@ -1931,12 +2175,12 @@ function SorceryProgressBar({
   const displayProgress = Math.floor(progress);
   const isComplete = !isLoading && progress === 100;
   const transitionDuration = progress < 50 ? "300ms" : progress < 80 ? "500ms" : "700ms";
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: `relative w-full ${heightClass} bg-sas-panel-alt border border-sas-border rounded-sm overflow-hidden shadow-inner`,
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             className: `
@@ -1954,13 +2198,13 @@ function SorceryProgressBar({
             }
           }
         ),
-        /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 flex items-center justify-center", children: isLoading && progress < 100 ? /* @__PURE__ */ jsxs6("span", { className: "font-mono text-xs text-sas-accent font-bold drop-shadow-md tracking-wider", children: [
+        /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 flex items-center justify-center", children: isLoading && progress < 100 ? /* @__PURE__ */ jsxs7("span", { className: "font-mono text-xs text-sas-accent font-bold drop-shadow-md tracking-wider", children: [
           statusText,
           " ",
           displayProgress,
           "%"
-        ] }) : isComplete ? /* @__PURE__ */ jsx10("span", { className: "font-mono text-xs text-sas-text font-bold drop-shadow-md tracking-wider", children: completeText }) : null }),
-        /* @__PURE__ */ jsx10(
+        ] }) : isComplete ? /* @__PURE__ */ jsx11("span", { className: "font-mono text-xs text-sas-text font-bold drop-shadow-md tracking-wider", children: completeText }) : null }),
+        /* @__PURE__ */ jsx11(
           "div",
           {
             className: "absolute inset-0 pointer-events-none opacity-10",
@@ -1981,7 +2225,7 @@ function SorceryProgressBar({
 }
 
 // src/components/TrackRow.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function TrackRow({
   track,
   prompt,
@@ -2010,6 +2254,7 @@ function TrackRow({
   onFxToggle,
   onFxPresetChange,
   onFxDryWetChange,
+  externalFxHost,
   onToggleFxDrawer,
   onProgressChange,
   accentColor = "#A78BFA",
@@ -2040,7 +2285,7 @@ function TrackRow({
   levels
 }) {
   const { muted: isMuted, solo: isSoloed, volume: currentVolume, pan: currentPan } = runtimeState;
-  const [confirmDelete, setConfirmDelete] = React8.useState(false);
+  const [confirmDelete, setConfirmDelete] = React9.useState(false);
   const needsGeneration = !!(prompt?.trim() && !hasMidi && !isGenerating);
   const hasFxActive = Object.values(fxDetailState).some(
     (d) => d.enabled
@@ -2055,8 +2300,8 @@ function TrackRow({
   };
   const borderColorStyle = needsGeneration ? void 0 : accentColor;
   const borderClass = needsGeneration ? "border-amber-400 animate-pulse" : "border-sas-border";
-  return /* @__PURE__ */ jsxs7("div", { "data-testid": "sdk-track-row-wrapper", className: "w-full", ...drag?.rowProps ?? {}, children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8("div", { "data-testid": "sdk-track-row-wrapper", className: "w-full", ...drag?.rowProps ?? {}, children: [
+    /* @__PURE__ */ jsxs8(
       "div",
       {
         "data-testid": "sdk-track-row",
@@ -2066,7 +2311,7 @@ function TrackRow({
           borderLeftWidth: "3px"
         },
         children: [
-          drag && /* @__PURE__ */ jsx11(
+          drag && /* @__PURE__ */ jsx12(
             "div",
             {
               "data-testid": "sdk-drag-handle",
@@ -2074,10 +2319,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__ */ jsx11(GripVertical, { className: "w-3.5 h-3.5", strokeWidth: 2 })
+              children: /* @__PURE__ */ jsx12(GripVertical, { className: "w-3.5 h-3.5", strokeWidth: 2 })
             }
           ),
-          isGenerating && /* @__PURE__ */ jsx11("div", { className: "absolute left-0 top-0 bottom-0 right-44 z-20", children: /* @__PURE__ */ jsx11(
+          isGenerating && /* @__PURE__ */ jsx12("div", { className: "absolute left-0 top-0 bottom-0 right-44 z-20", children: /* @__PURE__ */ jsx12(
             SorceryProgressBar,
             {
               isLoading: true,
@@ -2088,14 +2333,14 @@ function TrackRow({
               estimatedDurationMs: estimatedGenerationMs
             }
           ) }),
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs8(
             "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__ */ jsx11(
+                contentSlot ? contentSlot : onPromptChange ? /* @__PURE__ */ jsx12(
                   "input",
                   {
                     type: "text",
@@ -2108,10 +2353,10 @@ function TrackRow({
                     className: "sas-input w-full px-2 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
                   }
                 ) : null,
-                /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 mt-1", children: [
-                  track.name && /* @__PURE__ */ jsx11("span", { className: "text-[10px] text-sas-muted/60 truncate pl-2 flex-shrink-0 max-w-[80px]", title: track.name, children: track.name }),
-                  /* @__PURE__ */ jsx11("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "vol:" }),
-                  /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 mt-1", children: [
+                  track.name && /* @__PURE__ */ jsx12("span", { className: "text-[10px] text-sas-muted/60 truncate pl-2 flex-shrink-0 max-w-[80px]", title: track.name, children: track.name }),
+                  /* @__PURE__ */ jsx12("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "vol:" }),
+                  /* @__PURE__ */ jsx12(
                     VolumeSlider,
                     {
                       value: currentVolume,
@@ -2120,8 +2365,8 @@ function TrackRow({
                       className: "flex-1 min-w-[40px]"
                     }
                   ),
-                  /* @__PURE__ */ jsx11("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "pan:" }),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx12("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "pan:" }),
+                  /* @__PURE__ */ jsx12(
                     PanSlider,
                     {
                       value: currentPan,
@@ -2134,27 +2379,27 @@ function TrackRow({
               ]
             }
           ),
-          error && /* @__PURE__ */ jsx11(
+          error && /* @__PURE__ */ jsx12(
             "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__ */ jsxs7("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx11(
+              children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx12(
                   AlertCircle,
                   {
                     className: "w-5 h-5 text-red-500 animate-pulse",
                     strokeWidth: 2.5
                   }
                 ),
-                /* @__PURE__ */ jsx11("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__ */ jsx12("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__ */ jsxs7("div", { className: "flex flex-col gap-0.5 flex-shrink-0 relative z-30 justify-center", children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex gap-1 items-center", children: [
-              onGenerate && /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-0.5 flex-shrink-0 relative z-30 justify-center", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex gap-1 items-center", children: [
+              onGenerate && /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-generate-button",
@@ -2165,7 +2410,7 @@ function TrackRow({
                   children: "Create"
                 }
               ),
-              onCopy && /* @__PURE__ */ jsx11(
+              onCopy && /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-copy-button",
@@ -2176,7 +2421,7 @@ function TrackRow({
                   children: "Copy"
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-mute-button",
@@ -2186,7 +2431,7 @@ function TrackRow({
                   children: "M"
                 }
               ),
-              onDelete && /* @__PURE__ */ jsx11(
+              onDelete && /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-delete-button",
@@ -2197,8 +2442,8 @@ function TrackRow({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex gap-1 items-center", children: [
-              onShuffle && /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsxs8("div", { className: "flex gap-1 items-center", children: [
+              onShuffle && /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-shuffle-button",
@@ -2209,7 +2454,7 @@ function TrackRow({
                   children: "Shuffle"
                 }
               ),
-              onToggleFxDrawer && /* @__PURE__ */ jsx11(
+              onToggleFxDrawer && /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-fx-button",
@@ -2220,7 +2465,7 @@ function TrackRow({
                   children: "FX"
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-solo-button",
@@ -2231,7 +2476,7 @@ function TrackRow({
                   children: "S"
                 }
               ),
-              onToggleDrawer && /* @__PURE__ */ jsx11(
+              onToggleDrawer && /* @__PURE__ */ jsx12(
                 "button",
                 {
                   "data-testid": "sdk-plugin-button",
@@ -2239,7 +2484,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__ */ jsx11(ChevronDown, { className: "w-3 h-3", strokeWidth: 2.5 })
+                  children: /* @__PURE__ */ jsx12(ChevronDown, { className: "w-3 h-3", strokeWidth: 2.5 })
                 }
               )
             ] })
@@ -2247,13 +2492,13 @@ function TrackRow({
         ]
       }
     ),
-    levels && /* @__PURE__ */ jsx11(TrackMeterStrip, { levels, trackId: track.id, roundBottom: !drawerOpen }),
-    drawerOpen && /* @__PURE__ */ jsx11(
+    levels && /* @__PURE__ */ jsx12(TrackMeterStrip, { levels, trackId: track.id, roundBottom: !drawerOpen }),
+    drawerOpen && /* @__PURE__ */ jsx12(
       "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__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           TrackDrawer,
           {
             activeTab: drawerTab,
@@ -2263,6 +2508,7 @@ function TrackRow({
             onFxToggle,
             onFxPresetChange,
             onFxDryWetChange,
+            externalFxHost,
             fxDisabled: isGenerating,
             instruments: availableInstruments,
             currentPluginId: currentInstrumentPluginId ?? null,
@@ -2289,13 +2535,13 @@ function TrackRow({
         )
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       ConfirmDialog,
       {
         open: confirmDelete,
         title: "Delete track?",
-        message: /* @__PURE__ */ jsxs7(Fragment, { children: [
-          /* @__PURE__ */ jsx11("span", { className: "text-sas-text", children: track.name?.trim() || "This track" }),
+        message: /* @__PURE__ */ jsxs8(Fragment, { children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-sas-text", children: track.name?.trim() || "This track" }),
           " will be permanently removed from this scene. This cannot be undone."
         ] }),
         confirmLabel: "Delete",
@@ -2311,13 +2557,13 @@ function TrackRow({
 }
 
 // src/components/CrossfadeTrackRow.tsx
-import React9 from "react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import React10 from "react";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function LayerCaption({ tag, layer }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
-    /* @__PURE__ */ jsx12("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
-    /* @__PURE__ */ jsx12("span", { className: "text-[11px] text-sas-text truncate", title: layer.sourceName ?? layer.name, children: layer.sourceName ?? layer.name }),
-    layer.soundLabel && /* @__PURE__ */ jsxs8("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
+    /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
+    /* @__PURE__ */ jsx13("span", { className: "text-[11px] text-sas-text truncate", title: layer.sourceName ?? layer.name, children: layer.sourceName ?? layer.name }),
+    layer.soundLabel && /* @__PURE__ */ jsxs9("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
       "\xB7 ",
       layer.soundLabel
     ] })
@@ -2336,8 +2582,8 @@ function CrossfadeTrackRow({
   levels,
   accentColor = "#9333EA"
 }) {
-  const [confirmDelete, setConfirmDelete] = React9.useState(false);
-  const renderLayer = (layer, slot, tag) => /* @__PURE__ */ jsx12(
+  const [confirmDelete, setConfirmDelete] = React10.useState(false);
+  const renderLayer = (layer, slot, tag) => /* @__PURE__ */ jsx13(
     TrackRow,
     {
       track: { id: layer.trackId, name: "", role: layer.role },
@@ -2347,23 +2593,23 @@ function CrossfadeTrackRow({
       drawerTab: "fx",
       levels,
       accentColor,
-      contentSlot: /* @__PURE__ */ jsx12(LayerCaption, { tag, layer }),
+      contentSlot: /* @__PURE__ */ jsx13(LayerCaption, { tag, layer }),
       onMuteToggle,
       onSoloToggle,
       onVolumeChange: (v) => onVolumeChange(slot, v),
       onPanChange: (p) => onPanChange(slot, p)
     }
   );
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "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__ */ jsxs8("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-[10px] font-bold uppercase tracking-wide", style: { color: accentColor }, children: "\u21C4 Crossfade" }),
-          /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
+          /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-wide", style: { color: accentColor }, children: "\u21C4 Crossfade" }),
+          /* @__PURE__ */ jsx13(
             "button",
             {
               "data-testid": "crossfade-delete-button",
@@ -2376,8 +2622,8 @@ function CrossfadeTrackRow({
           )
         ] }),
         renderLayer(origin, "origin", "Origin"),
-        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "crossfade-slider-row", children: [
-          /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "crossfade-slider-row", children: [
+          /* @__PURE__ */ jsx13(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
@@ -2385,7 +2631,7 @@ function CrossfadeTrackRow({
               children: origin.sourceName ?? origin.name
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "input",
             {
               type: "range",
@@ -2401,7 +2647,7 @@ function CrossfadeTrackRow({
               "aria-label": "Crossfade position"
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
@@ -2411,12 +2657,12 @@ function CrossfadeTrackRow({
           )
         ] }),
         renderLayer(target, "target", "Target"),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           ConfirmDialog,
           {
             open: confirmDelete,
             title: "Delete crossfade?",
-            message: /* @__PURE__ */ jsx12(Fragment2, { children: "This crossfade pair (both layers) will be permanently removed from this scene. This cannot be undone." }),
+            message: /* @__PURE__ */ jsx13(Fragment2, { children: "This crossfade pair (both layers) will be permanently removed from this scene. This cannot be undone." }),
             confirmLabel: "Delete",
             onConfirm: () => {
               setConfirmDelete(false);
@@ -2659,22 +2905,22 @@ function defaultFadeGesture(role) {
 }
 
 // src/components/FadeTrackRow.tsx
-import React10 from "react";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import React11 from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function FadeCaption({
   layer,
   direction,
   gesture
 }) {
   const tag = direction === "in" ? "Fade in" : "Fade out";
-  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
-    /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
-    /* @__PURE__ */ jsx13("span", { className: "text-[11px] text-sas-text truncate", title: layer.sourceName ?? layer.name, children: layer.sourceName ?? layer.name }),
-    layer.soundLabel && /* @__PURE__ */ jsxs9("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1.5 min-w-0 px-2 py-0.5", children: [
+    /* @__PURE__ */ jsx14("span", { className: "text-[9px] font-bold uppercase tracking-wide text-sas-accent flex-shrink-0", children: tag }),
+    /* @__PURE__ */ jsx14("span", { className: "text-[11px] text-sas-text truncate", title: layer.sourceName ?? layer.name, children: layer.sourceName ?? layer.name }),
+    layer.soundLabel && /* @__PURE__ */ jsxs10("span", { className: "text-[9px] text-sas-muted/60 truncate flex-shrink-0", title: layer.soundLabel, children: [
       "\xB7 ",
       layer.soundLabel
     ] }),
-    /* @__PURE__ */ jsxs9("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", title: `Fade gesture: ${gesture}`, children: [
+    /* @__PURE__ */ jsxs10("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", title: `Fade gesture: ${gesture}`, children: [
       "\xB7 ",
       gesture
     ] })
@@ -2695,20 +2941,20 @@ function FadeTrackRow({
   levels,
   accentColor = "#9333EA"
 }) {
-  const [confirmDelete, setConfirmDelete] = React10.useState(false);
+  const [confirmDelete, setConfirmDelete] = React11.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__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "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__ */ jsxs9("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
-          /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-2 py-1 bg-sas-panel-alt/60", children: [
+          /* @__PURE__ */ jsx14(
             "span",
             {
               "data-testid": "fade-direction-badge",
@@ -2717,7 +2963,7 @@ function FadeTrackRow({
               children: badge
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "button",
             {
               "data-testid": "fade-delete-button",
@@ -2729,7 +2975,7 @@ function FadeTrackRow({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           TrackRow,
           {
             track: { id: layer.trackId, name: "", role: layer.role },
@@ -2739,15 +2985,15 @@ function FadeTrackRow({
             drawerTab: "fx",
             levels,
             accentColor,
-            contentSlot: /* @__PURE__ */ jsx13(FadeCaption, { layer, direction, gesture }),
+            contentSlot: /* @__PURE__ */ jsx14(FadeCaption, { layer, direction, gesture }),
             onMuteToggle,
             onSoloToggle,
             onVolumeChange,
             onPanChange
           }
         ),
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "fade-slider-row", children: [
-          /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 px-3 py-1.5", "data-testid": "fade-slider-row", children: [
+          /* @__PURE__ */ jsx14(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
@@ -2755,7 +3001,7 @@ function FadeTrackRow({
               children: leftLabel
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "range",
@@ -2771,7 +3017,7 @@ function FadeTrackRow({
               "aria-label": "Fade position"
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "span",
             {
               className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
@@ -2780,12 +3026,12 @@ function FadeTrackRow({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           ConfirmDialog,
           {
             open: confirmDelete,
             title: "Delete fade?",
-            message: /* @__PURE__ */ jsx13(Fragment3, { children: "This fade track will be permanently removed from this scene. This cannot be undone." }),
+            message: /* @__PURE__ */ jsx14(Fragment3, { children: "This fade track will be permanently removed from this scene. This cannot be undone." }),
             confirmLabel: "Delete",
             onConfirm: () => {
               setConfirmDelete(false);
@@ -2801,8 +3047,8 @@ function FadeTrackRow({
 }
 
 // src/components/FadeModal.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef7, useState as useState7 } from "react";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef8, useState as useState9 } from "react";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function shortId(dbId) {
   return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
 }
@@ -2845,7 +3091,7 @@ function OrphanRow({
 }) {
   const primary = track.prompt?.trim() || track.name;
   const meta = [track.role, shortId(track.dbId), gesture].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "button",
     {
       type: "button",
@@ -2857,8 +3103,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__ */ jsx14("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
-        meta && /* @__PURE__ */ jsx14("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
+        /* @__PURE__ */ jsx15("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
+        meta && /* @__PURE__ */ jsx15("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
       ]
     }
   );
@@ -2875,14 +3121,14 @@ function FadeModal({
   onCreate,
   testIdPrefix = "fade-modal"
 }) {
-  const [load, setLoad] = useState7({ status: "loading" });
-  const [selectedDbId, setSelectedDbId] = useState7("");
-  const [isCreating, setIsCreating] = useState7(false);
-  const [error, setError] = useState7(null);
-  const [fromName, setFromName] = useState7(null);
-  const [toName, setToName] = useState7(null);
-  const cancelRef = useRef7(null);
-  const refresh = useCallback4(async () => {
+  const [load, setLoad] = useState9({ status: "loading" });
+  const [selectedDbId, setSelectedDbId] = useState9("");
+  const [isCreating, setIsCreating] = useState9(false);
+  const [error, setError] = useState9(null);
+  const [fromName, setFromName] = useState9(null);
+  const [toName, setToName] = useState9(null);
+  const cancelRef = useRef8(null);
+  const refresh = useCallback5(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support fades." });
       return;
@@ -2902,7 +3148,7 @@ function FadeModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
     }
   }, [host, fromSceneId, toSceneId]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (open) {
       setError(null);
       setIsCreating(false);
@@ -2910,29 +3156,29 @@ function FadeModal({
       void refresh();
     }
   }, [open, refresh]);
-  const excludeSet = useMemo3(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const { fadeOut, fadeIn } = useMemo3(
+  const excludeSet = useMemo4(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const { fadeOut, fadeIn } = useMemo4(
     () => load.status === "ready" ? computeOrphans(load.from, load.to, excludeSet) : { fadeOut: [], fadeIn: [] },
     [load, excludeSet]
   );
-  const allOrphans = useMemo3(
+  const allOrphans = useMemo4(
     () => [
       ...fadeOut.map((t) => ({ track: t, direction: "out" })),
       ...fadeIn.map((t) => ({ track: t, direction: "in" }))
     ],
     [fadeOut, fadeIn]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     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 = useCallback4(() => {
+  const handleClose = useCallback5(() => {
     if (!isCreating) onClose();
   }, [isCreating, onClose]);
-  const handleCreate = useCallback4(async () => {
+  const handleCreate = useCallback5(async () => {
     if (!selected) return;
     setIsCreating(true);
     setError(null);
@@ -2953,16 +3199,16 @@ function FadeModal({
   if (!open) return null;
   const renderSection = (heading, list, section) => {
     if (list.length === 0) return null;
-    return /* @__PURE__ */ jsxs10("div", { className: "block", children: [
-      /* @__PURE__ */ jsx14("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: heading }),
-      /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsxs11("div", { className: "block", children: [
+      /* @__PURE__ */ jsx15("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: heading }),
+      /* @__PURE__ */ jsx15(
         "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__ */ jsx14(
+          children: list.map((t) => /* @__PURE__ */ jsx15(
             OrphanRow,
             {
               track: t,
@@ -2978,32 +3224,32 @@ function FadeModal({
       )
     ] });
   };
-  return /* @__PURE__ */ jsx14(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx15(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs11(
     "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__ */ jsx14("h3", { className: "text-sm font-bold text-sas-text", children: "Add fade" }),
-        /* @__PURE__ */ jsxs10("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+        /* @__PURE__ */ jsx15("h3", { className: "text-sm font-bold text-sas-text", children: "Add fade" }),
+        /* @__PURE__ */ jsxs11("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
           "Tracks with no counterpart between",
           " ",
-          /* @__PURE__ */ jsx14("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
+          /* @__PURE__ */ jsx15("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
           " and",
           " ",
-          /* @__PURE__ */ jsx14("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
+          /* @__PURE__ */ jsx15("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__ */ jsx14("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
-        load.status === "error" && /* @__PURE__ */ jsx14("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
-        load.status === "ready" && (allOrphans.length === 0 ? /* @__PURE__ */ jsx14("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__ */ jsxs10(Fragment4, { children: [
+        load.status === "loading" && /* @__PURE__ */ jsx15("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
+        load.status === "error" && /* @__PURE__ */ jsx15("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
+        load.status === "ready" && (allOrphans.length === 0 ? /* @__PURE__ */ jsx15("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__ */ jsxs11(Fragment4, { children: [
           renderSection(`Fade out${fromLabel ? ` (from ${fromLabel})` : ""}`, fadeOut, "out"),
           renderSection(`Fade in${toLabel ? ` (to ${toLabel})` : ""}`, fadeIn, "in")
         ] })),
-        error && /* @__PURE__ */ jsx14("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
-        /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2 pt-1", children: [
-          /* @__PURE__ */ jsx14(
+        error && /* @__PURE__ */ jsx15("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx15(
             "button",
             {
               ref: cancelRef,
@@ -3014,7 +3260,7 @@ function FadeModal({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               "data-testid": `${testIdPrefix}-confirm`,
@@ -3031,8 +3277,8 @@ function FadeModal({
 }
 
 // src/components/ImportTrackModal.tsx
-import { useCallback as useCallback5, useEffect as useEffect7, useState as useState8 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect8, useState as useState10 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function ImportTrackModal({
   host,
   open,
@@ -3044,10 +3290,10 @@ function ImportTrackModal({
   onPick,
   onPortTrack
 }) {
-  const [load, setLoad] = useState8({ status: "loading" });
-  const [selectedSceneId, setSelectedSceneId] = useState8(null);
-  const [importingTrackId, setImportingTrackId] = useState8(null);
-  const refresh = useCallback5(async () => {
+  const [load, setLoad] = useState10({ status: "loading" });
+  const [selectedSceneId, setSelectedSceneId] = useState10(null);
+  const [importingTrackId, setImportingTrackId] = useState10(null);
+  const refresh = useCallback6(async () => {
     if (!host.listImportableTracks) {
       setLoad({ status: "error", message: "This host does not support importing tracks." });
       return;
@@ -3063,14 +3309,14 @@ function ImportTrackModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load scenes." });
     }
   }, [host, mode, onPortTrack]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (open) {
       setSelectedSceneId(null);
       setImportingTrackId(null);
       void refresh();
     }
   }, [open, refresh]);
-  const handleImport = useCallback5(
+  const handleImport = useCallback6(
     async (track, sourceSceneId, sceneName, isSameScene) => {
       if (isSameScene && onPortTrack) {
         if (!track.importable) return;
@@ -3111,16 +3357,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__ */ jsx15(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx16(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ jsxs12(
     "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__ */ jsxs11("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
-          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-            selectedScene && /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+            selectedScene && /* @__PURE__ */ jsx16(
               "button",
               {
                 className: "text-sas-muted hover:text-sas-accent text-xs",
@@ -3129,9 +3375,9 @@ function ImportTrackModal({
                 children: "\u2190"
               }
             ),
-            /* @__PURE__ */ jsx15("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
+            /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
           ] }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               className: "text-sas-muted hover:text-sas-accent text-sm",
@@ -3141,30 +3387,30 @@ function ImportTrackModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "overflow-y-auto p-2 flex-1", children: [
-          load.status === "loading" && /* @__PURE__ */ jsx15("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-loading`, children: "Loading scenes\u2026" }),
-          load.status === "error" && /* @__PURE__ */ jsx15("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__ */ jsx15("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__ */ jsx15("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs12("div", { className: "overflow-y-auto p-2 flex-1", children: [
+          load.status === "loading" && /* @__PURE__ */ jsx16("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-loading`, children: "Loading scenes\u2026" }),
+          load.status === "error" && /* @__PURE__ */ jsx16("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__ */ jsx16("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__ */ jsx16("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ jsx16("li", { children: /* @__PURE__ */ jsxs12(
             "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__ */ jsx15("span", { className: "truncate", children: scene.sceneName }),
-                /* @__PURE__ */ jsxs11("span", { className: "text-sas-muted", children: [
+                /* @__PURE__ */ jsx16("span", { className: "truncate", children: scene.sceneName }),
+                /* @__PURE__ */ jsxs12("span", { className: "text-sas-muted", children: [
                   scene.tracks.length,
                   " \u2192"
                 ] })
               ]
             }
           ) }, scene.sceneId)) }),
-          selectedScene && /* @__PURE__ */ jsx15("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-track-list`, children: selectedScene.tracks.map((track) => {
+          selectedScene && /* @__PURE__ */ jsx16("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__ */ jsx15("li", { children: /* @__PURE__ */ jsxs11(
+            return /* @__PURE__ */ jsx16("li", { children: /* @__PURE__ */ jsxs12(
               "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"}`,
@@ -3174,14 +3420,14 @@ function ImportTrackModal({
                 "data-testid": `${testIdPrefix}-track`,
                 "data-importable": mode === "sound" || track.importable ? "true" : "false",
                 children: [
-                  /* @__PURE__ */ jsxs11("span", { className: "truncate", children: [
+                  /* @__PURE__ */ jsxs12("span", { className: "truncate", children: [
                     track.name,
-                    track.role ? /* @__PURE__ */ jsxs11("span", { className: "text-sas-muted", children: [
+                    track.role ? /* @__PURE__ */ jsxs12("span", { className: "text-sas-muted", children: [
                       " \xB7 ",
                       track.role
                     ] }) : null
                   ] }),
-                  busy ? /* @__PURE__ */ jsx15("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ jsx15("span", { className: "text-sas-muted", children: "\u2298" }) : null
+                  busy ? /* @__PURE__ */ jsx16("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ jsx16("span", { className: "text-sas-muted", children: "\u2298" }) : null
                 ]
               }
             ) }, track.dbId);
@@ -3193,8 +3439,8 @@ function ImportTrackModal({
 }
 
 // src/components/CrossfadeModal.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef8, useState as useState9 } from "react";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef9, useState as useState11 } from "react";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function shortId2(dbId) {
   return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
 }
@@ -3207,7 +3453,7 @@ function CandidateRow({
 }) {
   const primary = track.prompt?.trim() || track.name;
   const meta = [track.role, shortId2(track.dbId)].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "button",
     {
       type: "button",
@@ -3219,8 +3465,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__ */ jsx16("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
-        meta && /* @__PURE__ */ jsx16("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
+        /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-text truncate", title: primary, children: primary }),
+        meta && /* @__PURE__ */ jsx17("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", title: track.dbId, children: meta })
       ]
     }
   );
@@ -3237,15 +3483,15 @@ function CrossfadeModal({
   onCreate,
   testIdPrefix = "crossfade-modal"
 }) {
-  const [load, setLoad] = useState9({ status: "loading" });
-  const [originDbId, setOriginDbId] = useState9("");
-  const [targetDbId, setTargetDbId] = useState9("");
-  const [isCreating, setIsCreating] = useState9(false);
-  const [error, setError] = useState9(null);
-  const [fromName, setFromName] = useState9(null);
-  const [toName, setToName] = useState9(null);
-  const cancelRef = useRef8(null);
-  const refresh = useCallback6(async () => {
+  const [load, setLoad] = useState11({ status: "loading" });
+  const [originDbId, setOriginDbId] = useState11("");
+  const [targetDbId, setTargetDbId] = useState11("");
+  const [isCreating, setIsCreating] = useState11(false);
+  const [error, setError] = useState11(null);
+  const [fromName, setFromName] = useState11(null);
+  const [toName, setToName] = useState11(null);
+  const cancelRef = useRef9(null);
+  const refresh = useCallback7(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support crossfade tracks." });
       return;
@@ -3265,7 +3511,7 @@ function CrossfadeModal({
       setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
     }
   }, [host, fromSceneId, toSceneId]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (open) {
       setError(null);
       setIsCreating(false);
@@ -3274,21 +3520,21 @@ function CrossfadeModal({
       void refresh();
     }
   }, [open, refresh]);
-  const excludeSet = useMemo4(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const originCandidates = useMemo4(
+  const excludeSet = useMemo5(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originCandidates = useMemo5(
     () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const targetCandidates = useMemo4(
+  const targetCandidates = useMemo5(
     () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!originCandidates.some((t) => t.dbId === originDbId)) {
       setOriginDbId(originCandidates[0]?.dbId ?? "");
     }
   }, [originCandidates, originDbId]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!targetCandidates.some((t) => t.dbId === targetDbId)) {
       setTargetDbId(targetCandidates[0]?.dbId ?? "");
     }
@@ -3296,10 +3542,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 = useCallback6(() => {
+  const handleClose = useCallback7(() => {
     if (!isCreating) onClose();
   }, [isCreating, onClose]);
-  const handleCreate = useCallback6(async () => {
+  const handleCreate = useCallback7(async () => {
     if (!originTrack || !targetTrack) return;
     setIsCreating(true);
     setError(null);
@@ -3317,26 +3563,26 @@ function CrossfadeModal({
   const fromLabel = fromName ?? fromSceneName ?? null;
   const toLabel = toName ?? toSceneName ?? null;
   if (!open) return null;
-  return /* @__PURE__ */ jsx16(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx17(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs13(
     "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__ */ jsx16("h3", { className: "text-sm font-bold text-sas-text", children: "Add crossfade" }),
-        /* @__PURE__ */ jsxs12("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+        /* @__PURE__ */ jsx17("h3", { className: "text-sm font-bold text-sas-text", children: "Add crossfade" }),
+        /* @__PURE__ */ jsxs13("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
           "Bridge a track from",
           " ",
-          /* @__PURE__ */ jsx16("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
+          /* @__PURE__ */ jsx17("span", { className: "text-sas-text", children: fromLabel ?? "the origin scene" }),
           " into one from",
           " ",
-          /* @__PURE__ */ jsx16("span", { className: "text-sas-text", children: toLabel ?? "the target scene" }),
+          /* @__PURE__ */ jsx17("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__ */ jsx16("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
-        load.status === "error" && /* @__PURE__ */ jsx16("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
-        load.status === "ready" && (originCandidates.length === 0 ? /* @__PURE__ */ jsxs12(
+        load.status === "loading" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-muted py-4 text-center", children: "Loading tracks\u2026" }),
+        load.status === "error" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-danger py-4 text-center", children: load.message }),
+        load.status === "ready" && (originCandidates.length === 0 ? /* @__PURE__ */ jsxs13(
           "div",
           {
             className: "text-xs text-sas-muted py-4 text-center",
@@ -3347,20 +3593,20 @@ function CrossfadeModal({
               ". Add one (or free one from another crossfade) first."
             ]
           }
-        ) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
-          /* @__PURE__ */ jsxs12("div", { className: "block", children: [
-            /* @__PURE__ */ jsxs12("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+        ) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+          /* @__PURE__ */ jsxs13("div", { className: "block", children: [
+            /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
               "Origin ",
               fromLabel ? `(${fromLabel})` : "(top)"
             ] }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               "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__ */ jsx16(
+                children: originCandidates.map((t) => /* @__PURE__ */ jsx17(
                   CandidateRow,
                   {
                     track: t,
@@ -3374,23 +3620,23 @@ function CrossfadeModal({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs12("div", { className: "block", children: [
-            /* @__PURE__ */ jsxs12("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "block", children: [
+            /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
               "Target ",
               toLabel ? `(${toLabel})` : "(bottom)"
             ] }),
-            targetCandidates.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "text-xs text-sas-danger mt-0.5", "data-testid": `${testIdPrefix}-empty-target`, children: [
+            targetCandidates.length === 0 ? /* @__PURE__ */ jsxs13("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__ */ jsx16(
+            ] }) : /* @__PURE__ */ jsx17(
               "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__ */ jsx16(
+                children: targetCandidates.map((t) => /* @__PURE__ */ jsx17(
                   CandidateRow,
                   {
                     track: t,
@@ -3405,9 +3651,9 @@ function CrossfadeModal({
             )
           ] })
         ] })),
-        error && /* @__PURE__ */ jsx16("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex justify-end gap-2 pt-1", children: [
-          /* @__PURE__ */ jsx16(
+        error && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-danger", "data-testid": `${testIdPrefix}-error`, children: error }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx17(
             "button",
             {
               ref: cancelRef,
@@ -3418,7 +3664,7 @@ function CrossfadeModal({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               "data-testid": `${testIdPrefix}-confirm`,
@@ -3435,10 +3681,10 @@ function CrossfadeModal({
 }
 
 // src/components/TransitionDesigner.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef10, useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef11, useState as useState13 } from "react";
 
 // src/hooks/useTrackReorder.ts
-import { useCallback as useCallback7, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback8, useRef as useRef10, useState as useState12 } from "react";
 function moveItem(arr, from, to) {
   const next = arr.slice();
   if (from === to || from < 0 || to < 0 || from >= next.length || to >= next.length) {
@@ -3455,12 +3701,12 @@ function useTrackReorder({
   getId,
   onError
 }) {
-  const [draggingIndex, setDraggingIndex] = useState10(null);
-  const [dragOverIndex, setDragOverIndex] = useState10(null);
-  const fromRef = useRef9(null);
-  const itemsRef = useRef9(items);
+  const [draggingIndex, setDraggingIndex] = useState12(null);
+  const [dragOverIndex, setDragOverIndex] = useState12(null);
+  const fromRef = useRef10(null);
+  const itemsRef = useRef10(items);
   itemsRef.current = items;
-  const dragPropsFor = useCallback7(
+  const dragPropsFor = useCallback8(
     (index) => ({
       handleProps: {
         draggable: true,
@@ -3642,7 +3888,7 @@ function dbIdsFromKeys(keys) {
 }
 
 // src/components/TransitionDesigner.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var CROSSFADE_ESTIMATE_MS = 15e3;
 var FADE_ESTIMATE_MS = 11e3;
 var CREATE_ALL_CONCURRENCY = 5;
@@ -3666,44 +3912,44 @@ function TransitionDesigner({
   familyLabel,
   testIdPrefix = "transition-designer"
 }) {
-  const [load, setLoad] = useState11({ status: "loading" });
-  const [fromName, setFromName] = useState11(null);
-  const [toName, setToName] = useState11(null);
-  const [originSlots, setOriginSlots] = useState11([]);
-  const [targetSlots, setTargetSlots] = useState11([]);
-  const [creatingKeys, setCreatingKeys] = useState11(() => /* @__PURE__ */ new Set());
-  const [rowErrors, setRowErrors] = useState11({});
-  const [rowEffects, setRowEffects] = useState11({});
-  const rowEffectsRef = useRef10(rowEffects);
+  const [load, setLoad] = useState13({ status: "loading" });
+  const [fromName, setFromName] = useState13(null);
+  const [toName, setToName] = useState13(null);
+  const [originSlots, setOriginSlots] = useState13([]);
+  const [targetSlots, setTargetSlots] = useState13([]);
+  const [creatingKeys, setCreatingKeys] = useState13(() => /* @__PURE__ */ new Set());
+  const [rowErrors, setRowErrors] = useState13({});
+  const [rowEffects, setRowEffects] = useState13({});
+  const rowEffectsRef = useRef11(rowEffects);
   rowEffectsRef.current = rowEffects;
   const audioEffectsEnabled = !!onCreateAudioTransition;
-  const excludeRef = useRef10(excludeSourceDbIds);
+  const excludeRef = useRef11(excludeSourceDbIds);
   excludeRef.current = excludeSourceDbIds;
-  const originSlotsRef = useRef10(originSlots);
+  const originSlotsRef = useRef11(originSlots);
   originSlotsRef.current = originSlots;
-  const targetSlotsRef = useRef10(targetSlots);
+  const targetSlotsRef = useRef11(targetSlots);
   targetSlotsRef.current = targetSlots;
-  const creatingKeysRef = useRef10(creatingKeys);
+  const creatingKeysRef = useRef11(creatingKeys);
   creatingKeysRef.current = creatingKeys;
-  const dragRef = useRef10(null);
-  const [dragging, setDragging] = useState11(null);
-  const [dragOver, setDragOver] = useState11(null);
-  const excludeSet = useMemo5(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
-  const originPool = useMemo5(
+  const dragRef = useRef11(null);
+  const [dragging, setDragging] = useState13(null);
+  const [dragOver, setDragOver] = useState13(null);
+  const excludeSet = useMemo6(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originPool = useMemo6(
     () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const targetPool = useMemo5(
+  const targetPool = useMemo6(
     () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
     [load, excludeSet]
   );
-  const originById = useMemo5(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
-  const targetById = useMemo5(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
-  const originByIdRef = useRef10(originById);
+  const originById = useMemo6(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
+  const targetById = useMemo6(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
+  const originByIdRef = useRef11(originById);
   originByIdRef.current = originById;
-  const targetByIdRef = useRef10(targetById);
+  const targetByIdRef = useRef11(targetById);
   targetByIdRef.current = targetById;
-  const refresh = useCallback8(async () => {
+  const refresh = useCallback9(async () => {
     if (!host.listSceneFamilyTracks) {
       setLoad({ status: "error", message: "This host does not support transition tracks." });
       return;
@@ -3738,10 +3984,10 @@ function TransitionDesigner({
       });
     }
   }, [host, fromSceneId, toSceneId, transitionSceneId]);
-  useEffect9(() => {
+  useEffect10(() => {
     void refresh();
   }, [refresh]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (load.status !== "ready") return;
     const [po, pt] = padPair(
       reconcileSlots(originSlotsRef.current, originPool.map((t) => t.dbId)),
@@ -3750,7 +3996,7 @@ function TransitionDesigner({
     if (!slotsEqual(po, originSlotsRef.current)) setOriginSlots(po);
     if (!slotsEqual(pt, targetSlotsRef.current)) setTargetSlots(pt);
   }, [originPool, targetPool, load.status]);
-  const mutate = useCallback8(
+  const mutate = useCallback9(
     (nextOrigin, nextTarget) => {
       const norm = normalizeSlots(nextOrigin, nextTarget);
       const [po, pt] = padPair(norm.originOrder, norm.targetOrder);
@@ -3763,7 +4009,7 @@ function TransitionDesigner({
     },
     [host, transitionSceneId]
   );
-  const setRowEffect = useCallback8(
+  const setRowEffect = useCallback9(
     (sourceDbId, effect) => {
       setRowEffects((prev) => {
         const next = { ...prev, [sourceDbId]: effect };
@@ -3777,7 +4023,7 @@ function TransitionDesigner({
     },
     [host, transitionSceneId]
   );
-  const insertGapAbove = useCallback8(
+  const insertGapAbove = useCallback9(
     (col, index) => {
       const slots = col === "origin" ? originSlots : targetSlots;
       const next = [...slots.slice(0, index), null, ...slots.slice(index)];
@@ -3786,7 +4032,7 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const removeGap = useCallback8(
+  const removeGap = useCallback9(
     (col, index) => {
       const slots = col === "origin" ? originSlots : targetSlots;
       const next = slots.filter((_, i) => i !== index);
@@ -3795,7 +4041,7 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const handleDrop = useCallback8(
+  const handleDrop = useCallback9(
     (col, to) => {
       const from = dragRef.current;
       dragRef.current = null;
@@ -3807,16 +4053,16 @@ function TransitionDesigner({
     },
     [originSlots, targetSlots, mutate]
   );
-  const rows = useMemo5(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
-  const creatingDbIds = useMemo5(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
-  const eligibleCount = useMemo5(
+  const rows = useMemo6(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
+  const creatingDbIds = useMemo6(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
+  const eligibleCount = useMemo6(
     () => rows.filter((r) => {
       const k = rowKey(r);
       return k !== null && !creatingKeys.has(k);
     }).length,
     [rows, creatingKeys]
   );
-  const createRow = useCallback8(
+  const createRow = useCallback9(
     async (row) => {
       const key = rowKey(row);
       if (!key || !row.type || creatingKeysRef.current.has(key)) return;
@@ -3870,7 +4116,7 @@ function TransitionDesigner({
     },
     [onCreateCrossfade, onCreateFade, onCreateAudioTransition]
   );
-  const createAll = useCallback8(async () => {
+  const createAll = useCallback9(async () => {
     const eligible = buildRowSlots(originSlotsRef.current, targetSlotsRef.current).filter((r) => {
       const k = rowKey(r);
       return k !== null && !creatingKeysRef.current.has(k);
@@ -3938,15 +4184,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__ */ jsxs13(
+      return /* @__PURE__ */ jsxs14(
         "div",
         {
           ...cellDragProps(col, index, false),
           "data-testid": `${testIdPrefix}-${col}-gap-${index}`,
           className: `${base} ${tone} border-dashed flex items-center justify-between ${isDragging ? "opacity-40" : "opacity-70"}`,
           children: [
-            /* @__PURE__ */ jsx17("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
+            /* @__PURE__ */ jsx18(
               "button",
               {
                 type: "button",
@@ -3963,7 +4209,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__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       "div",
       {
         ...cellDragProps(col, index, locked),
@@ -3971,13 +4217,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__ */ jsxs13("div", { className: "flex items-start gap-1", children: [
-          /* @__PURE__ */ jsx17("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
-          /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-text truncate", children: primary }),
-            meta && /* @__PURE__ */ jsx17("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
+        children: /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsx18("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
+          /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx18("div", { className: "text-xs text-sas-text truncate", children: primary }),
+            meta && /* @__PURE__ */ jsx18("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
           ] }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             "button",
             {
               type: "button",
@@ -3993,22 +4239,22 @@ function TransitionDesigner({
       }
     );
   };
-  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
-      /* @__PURE__ */ jsxs13("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
-        /* @__PURE__ */ jsx17("span", { className: "text-sas-text", children: fromLabel }),
+  return /* @__PURE__ */ jsxs14("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
+      /* @__PURE__ */ jsxs14("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
+        /* @__PURE__ */ jsx18("span", { className: "text-sas-text", children: fromLabel }),
         " \u2192",
         " ",
-        /* @__PURE__ */ jsx17("span", { className: "text-sas-text", children: toLabel }),
+        /* @__PURE__ */ jsx18("span", { className: "text-sas-text", children: toLabel }),
         familyLabel ? ` \xB7 ${familyLabel}` : "",
         " \xB7 line up a track on each side to crossfade; leave one blank (or insert a gap) to fade."
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 shrink-0", children: [
-        creatingKeys.size > 0 && /* @__PURE__ */ jsxs13("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
+      /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 shrink-0", children: [
+        creatingKeys.size > 0 && /* @__PURE__ */ jsxs14("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
           creatingKeys.size,
           " creating\u2026"
         ] }),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "button",
           {
             type: "button",
@@ -4025,49 +4271,49 @@ function TransitionDesigner({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
-      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
+      /* @__PURE__ */ jsxs14("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
         "Origin (",
         fromLabel,
         ")"
       ] }),
-      /* @__PURE__ */ jsx17("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
-      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
+      /* @__PURE__ */ jsx18("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
+      /* @__PURE__ */ jsxs14("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
         "Target (",
         toLabel,
         ")"
       ] })
     ] }),
-    load.status === "loading" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
-    load.status === "error" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-danger py-6 text-center", "data-testid": `${testIdPrefix}-error`, children: load.message }),
-    load.status === "ready" && (rows.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
+    load.status === "loading" && /* @__PURE__ */ jsx18("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
+    load.status === "error" && /* @__PURE__ */ jsx18("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__ */ jsxs14("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
       "No tracks to arrange in this panel for either scene. Add tracks to ",
       fromLabel,
       " or ",
       toLabel,
       " ",
       "first (or free one by deleting an existing crossfade/fade)."
-    ] }) : /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: rows.map((row, i) => {
+    ] }) : /* @__PURE__ */ jsx18("div", { className: "space-y-2", children: rows.map((row, i) => {
       const key = rowKey(row);
       const isCreatingThis = key !== null && creatingKeys.has(key);
       const errMsg = key !== null ? rowErrors[key] : void 0;
-      return /* @__PURE__ */ jsxs13(
+      return /* @__PURE__ */ jsxs14(
         "div",
         {
           "data-testid": `${testIdPrefix}-row-${i}`,
           className: "grid grid-cols-[1fr_auto_1fr] gap-2 items-center",
           children: [
             renderCell("origin", i, row.originId),
-            /* @__PURE__ */ jsxs13("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
-              !row.type ? /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsxs14("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
+              !row.type ? /* @__PURE__ */ jsx18("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ jsx18(
                 "span",
                 {
                   "data-testid": `${testIdPrefix}-type-${i}`,
                   className: "text-[10px] font-medium px-1.5 py-0.5 rounded-sm border border-sas-accent/50 text-sas-accent",
                   children: TYPE_LABEL[row.type]
                 }
-              ) : audioEffectsEnabled ? /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
-                /* @__PURE__ */ jsx17(
+              ) : audioEffectsEnabled ? /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
+                /* @__PURE__ */ jsx18(
                   "select",
                   {
                     "data-testid": `${testIdPrefix}-effect-${i}`,
@@ -4077,11 +4323,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__ */ jsx17("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
+                    children: AUDIO_EFFECTS.map((eff) => /* @__PURE__ */ jsx18("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
                   }
                 ),
-                /* @__PURE__ */ jsx17("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
-              ] }) : /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx18("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
+              ] }) : /* @__PURE__ */ jsx18(
                 "span",
                 {
                   "data-testid": `${testIdPrefix}-type-${i}`,
@@ -4089,7 +4335,7 @@ function TransitionDesigner({
                   children: TYPE_LABEL[row.type]
                 }
               ),
-              isCreatingThis ? /* @__PURE__ */ jsx17("div", { className: "w-full", children: /* @__PURE__ */ jsx17(
+              isCreatingThis ? /* @__PURE__ */ jsx18("div", { className: "w-full", children: /* @__PURE__ */ jsx18(
                 SorceryProgressBar,
                 {
                   isLoading: true,
@@ -4097,7 +4343,7 @@ function TransitionDesigner({
                   statusText: "CREATING",
                   estimatedDurationMs: row.type === "crossfade" ? CROSSFADE_ESTIMATE_MS : FADE_ESTIMATE_MS
                 }
-              ) }) : /* @__PURE__ */ jsx17(
+              ) }) : /* @__PURE__ */ jsx18(
                 "button",
                 {
                   type: "button",
@@ -4108,7 +4354,7 @@ function TransitionDesigner({
                   children: "Create"
                 }
               ),
-              errMsg && /* @__PURE__ */ jsx17(
+              errMsg && /* @__PURE__ */ jsx18(
                 "span",
                 {
                   "data-testid": `${testIdPrefix}-row-error-${i}`,
@@ -4126,9 +4372,325 @@ function TransitionDesigner({
   ] });
 }
 
+// src/components/PanelMasterStrip.tsx
+import { useMemo as useMemo7, useState as useState14 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function PanelMasterStrip({
+  bus,
+  levels = null,
+  availableFx = [],
+  fxLoading = false,
+  soloedOut = false,
+  disabled = false,
+  fxPickerOpen,
+  onToggleFxPicker,
+  onRefreshFx,
+  onVolumeChange,
+  onMuteToggle,
+  onSoloToggle,
+  onAddFx,
+  onRemoveFx,
+  onToggleFxEnabled,
+  onShowFxEditor
+}) {
+  const [search, setSearch] = useState14("");
+  const filtered = useMemo7(() => {
+    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__ */ jsxs15(
+    "div",
+    {
+      "data-testid": "panel-master-strip",
+      className: `flex flex-col gap-1 px-2 py-1.5 rounded-sm border border-sas-border border-l-2 border-l-sas-accent/50 bg-sas-accent/5 transition-opacity ${soloedOut ? "opacity-40" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx19(
+            "span",
+            {
+              className: "text-[9px] font-bold tracking-widest text-sas-muted/70 select-none",
+              title: "Panel mix bus \u2014 volume, mute/solo and FX applied to this panel's summed output",
+              children: "BUS"
+            }
+          ),
+          /* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-[8rem] flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx19(
+              VolumeSlider,
+              {
+                value: dbToSlider(bus.volume),
+                onChange: (sliderValue) => onVolumeChange(sliderToDb(sliderValue)),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-px", "data-testid": "bus-meter", children: [
+              /* @__PURE__ */ jsx19(
+                LevelMeter,
+                {
+                  peakDb: levels?.leftDb ?? -120,
+                  active: levels != null,
+                  clipped: levels?.clipped,
+                  compact: true,
+                  "data-testid": "bus-meter-left"
+                }
+              ),
+              /* @__PURE__ */ jsx19(
+                LevelMeter,
+                {
+                  peakDb: levels?.rightDb ?? -120,
+                  active: levels != null,
+                  compact: true,
+                  "data-testid": "bus-meter-right"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx19(
+            "button",
+            {
+              "data-testid": "bus-mute-button",
+              onClick: onMuteToggle,
+              disabled,
+              className: `px-1.5 py-0.5 text-xs font-bold rounded transition-colors ${bus.muted ? "bg-red-600 text-white" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"} disabled:opacity-50`,
+              title: bus.muted ? "Unmute panel bus" : "Mute panel bus (silences the whole panel)",
+              children: "M"
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            "button",
+            {
+              "data-testid": "bus-solo-button",
+              onClick: onSoloToggle,
+              disabled,
+              className: `px-1.5 py-0.5 text-xs font-bold rounded transition-colors ${bus.soloed ? "bg-amber-500 text-black" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"} disabled:opacity-50`,
+              title: bus.soloed ? "Unsolo panel bus" : "Solo this panel (silences other panels/tracks in scope)",
+              children: "S"
+            }
+          ),
+          /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1 max-w-[45%] min-w-0 overflow-x-auto", children: bus.fx.map((fx) => /* @__PURE__ */ jsxs15(
+            "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__ */ jsx19(
+                  "button",
+                  {
+                    "data-testid": `bus-fx-toggle-${fx.index}`,
+                    onClick: () => onToggleFxEnabled(fx.index, !fx.enabled),
+                    disabled,
+                    className: "hover:opacity-70 disabled:opacity-50",
+                    title: fx.enabled ? `Bypass ${fx.name}` : `Enable ${fx.name}`,
+                    children: fx.enabled ? "\u25CF" : "\u25CB"
+                  }
+                ),
+                onShowFxEditor ? /* @__PURE__ */ jsx19(
+                  "button",
+                  {
+                    "data-testid": `bus-fx-edit-${fx.index}`,
+                    onClick: () => onShowFxEditor(fx.index),
+                    disabled,
+                    className: "max-w-[80px] truncate hover:underline disabled:opacity-50",
+                    title: `Open ${fx.name} editor`,
+                    children: fx.name
+                  }
+                ) : /* @__PURE__ */ jsx19("span", { className: "max-w-[80px] truncate", children: fx.name }),
+                /* @__PURE__ */ jsx19(
+                  "button",
+                  {
+                    "data-testid": `bus-fx-remove-${fx.index}`,
+                    onClick: () => onRemoveFx(fx.index),
+                    disabled,
+                    className: "text-sas-muted/60 hover:text-sas-danger disabled:opacity-50",
+                    title: `Remove ${fx.name} from the bus`,
+                    children: "\u2715"
+                  }
+                )
+              ]
+            },
+            `${fx.index}:${fx.pluginId}`
+          )) }),
+          /* @__PURE__ */ jsx19(
+            "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: fxPickerOpen ? "Close the FX picker" : "Add an FX plugin to the panel bus",
+              children: fxPickerOpen ? "FX \u25B4" : "FX +"
+            }
+          )
+        ] }),
+        fxPickerOpen && /* @__PURE__ */ jsxs15("div", { "data-testid": "bus-fx-picker", className: "flex flex-col gap-2 pt-1", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx19(
+              "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"
+              }
+            ),
+            onRefreshFx && /* @__PURE__ */ jsx19(
+              "button",
+              {
+                onClick: () => onRefreshFx(),
+                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__ */ jsx19("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
+            filtered.map((fx) => /* @__PURE__ */ jsxs15(
+              "button",
+              {
+                "data-testid": `bus-fx-pick-${fx.pluginId}`,
+                onClick: () => onAddFx(fx.pluginId),
+                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__ */ jsx19("span", { className: "text-xs font-medium truncate w-full", children: fx.name }),
+                  /* @__PURE__ */ jsx19("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: fx.manufacturer || fx.type.toUpperCase() })
+                ]
+              },
+              fx.pluginId
+            )),
+            filtered.length === 0 && /* @__PURE__ */ jsx19("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/hooks/usePanelBus.ts
+import { useCallback as useCallback10, useEffect as useEffect11, useRef as useRef12, useState as useState15 } from "react";
+var LEVELS_POLL_MS = 66;
+function usePanelBus(host, activeSceneId) {
+  const supported = typeof host.getPanelBusState === "function";
+  const [bus, setBus] = useState15(null);
+  const [levels, setLevels] = useState15(null);
+  const [availableFx, setAvailableFx] = useState15([]);
+  const [fxLoading, setFxLoading] = useState15(false);
+  const [fxPickerOpen, setFxPickerOpen] = useState15(false);
+  const fxLoadedRef = useRef12(false);
+  const loadSeqRef = useRef12(0);
+  const reload = useCallback10(async () => {
+    if (!supported || !activeSceneId || !host.getPanelBusState) {
+      setBus(null);
+      return;
+    }
+    const seq = ++loadSeqRef.current;
+    try {
+      const state = await host.getPanelBusState(activeSceneId);
+      if (loadSeqRef.current === seq) setBus(state);
+    } catch {
+    }
+  }, [host, activeSceneId, supported]);
+  useEffect11(() => {
+    setBus(null);
+    setFxPickerOpen(false);
+    void reload();
+  }, [reload]);
+  useEffect11(() => {
+    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 = useCallback10(
+    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 = useCallback10(
+    (open) => {
+      setFxPickerOpen(open);
+      if (open) void loadFxList(false);
+    },
+    [loadFxList]
+  );
+  const mutate = useCallback10(
+    (fn) => {
+      if (!fn || !activeSceneId) return;
+      void (async () => {
+        try {
+          await fn();
+        } catch {
+        }
+        await reload();
+      })();
+    },
+    [activeSceneId, reload]
+  );
+  return {
+    supported,
+    bus,
+    levels,
+    availableFx,
+    fxLoading,
+    fxPickerOpen,
+    setFxPickerOpen: openPicker,
+    refreshFx: () => void loadFxList(true),
+    reload,
+    onVolumeChange: (volumeDb) => mutate(host.setPanelBusVolume && (() => host.setPanelBusVolume(activeSceneId, volumeDb))),
+    onMuteToggle: () => mutate(
+      host.setPanelBusMute && (() => host.setPanelBusMute(activeSceneId, !(bus?.muted ?? false)))
+    ),
+    onSoloToggle: () => mutate(
+      host.setPanelBusSolo && (() => host.setPanelBusSolo(activeSceneId, !(bus?.soloed ?? false)))
+    ),
+    onAddFx: (pluginId) => mutate(host.loadPanelBusFx && (async () => {
+      await host.loadPanelBusFx(activeSceneId, pluginId);
+    })),
+    onRemoveFx: (fxIndex) => mutate(host.removePanelBusFx && (() => host.removePanelBusFx(activeSceneId, fxIndex))),
+    onToggleFxEnabled: (fxIndex, enabled) => mutate(
+      host.setPanelBusFxEnabled && (() => host.setPanelBusFxEnabled(activeSceneId, fxIndex, enabled))
+    ),
+    onShowFxEditor: (fxIndex) => mutate(
+      host.showPanelBusFxEditor && (() => host.showPanelBusFxEditor(activeSceneId, fxIndex))
+    )
+  };
+}
+
 // src/components/DownloadPackButton.tsx
-import { useCallback as useCallback9, useEffect as useEffect10, useState as useState12 } from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback11, useEffect as useEffect12, useState as useState16 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (!bytes || bytes <= 0) return "";
   const gb = bytes / 1024 ** 3;
@@ -4144,10 +4706,10 @@ var DownloadPackButton = ({
   variant = "compact",
   onDownloadComplete
 }) => {
-  const [status, setStatus] = useState12("idle");
-  const [progress, setProgress] = useState12(0);
-  const [errorMessage, setErrorMessage] = useState12(null);
-  useEffect10(() => {
+  const [status, setStatus] = useState16("idle");
+  const [progress, setProgress] = useState16(0);
+  const [errorMessage, setErrorMessage] = useState16(null);
+  useEffect12(() => {
     const unsub = host.onSamplePackProgress(packId, (p) => {
       setStatus(p.status);
       setProgress(p.progress);
@@ -4162,7 +4724,7 @@ var DownloadPackButton = ({
     });
     return unsub;
   }, [host, packId, onDownloadComplete]);
-  const handleClick = useCallback9(async () => {
+  const handleClick = useCallback11(async () => {
     if (status !== "idle" && status !== "error") return;
     try {
       setStatus("downloading");
@@ -4216,8 +4778,8 @@ var DownloadPackButton = ({
   } else {
     className = `${baseClasses} text-sas-muted hover:text-sas-accent border-sas-border hover:border-sas-accent`;
   }
-  return /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsx20(
       "button",
       {
         "data-testid": `download-pack-button-${packId}`,
@@ -4228,12 +4790,12 @@ var DownloadPackButton = ({
         children: buttonLabel
       }
     ),
-    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ jsx18("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
+    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ jsx20("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
   ] });
 };
 
 // src/components/SamplePackCTACard.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var SamplePackCTACard = ({
   host,
   pack,
@@ -4241,7 +4803,7 @@ var SamplePackCTACard = ({
   onDownloadComplete
 }) => {
   if (status === "checking") {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx21(
       "div",
       {
         "data-testid": `sample-pack-cta-checking-${pack.packId}`,
@@ -4252,16 +4814,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__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       "data-testid": `sample-pack-cta-${pack.packId}`,
       className: "flex flex-col items-center justify-center py-12 px-6 text-center",
       children: [
-        /* @__PURE__ */ jsx19("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
-        /* @__PURE__ */ jsx19("div", { className: "text-base text-sas-text mb-1", children: headline }),
-        /* @__PURE__ */ jsx19("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx21("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
+        /* @__PURE__ */ jsx21("div", { className: "text-base text-sas-text mb-1", children: headline }),
+        /* @__PURE__ */ jsx21("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
+        /* @__PURE__ */ jsx21(
           DownloadPackButton,
           {
             host,
@@ -4278,7 +4840,7 @@ var SamplePackCTACard = ({
 };
 
 // src/components/WaveformView.tsx
-import { useEffect as useEffect11, useRef as useRef11, useState as useState13 } from "react";
+import { useEffect as useEffect13, useRef as useRef13, useState as useState17 } from "react";
 
 // src/components/waveform.ts
 function computePeaks(audioBuffer, bins, targetSamples) {
@@ -4341,7 +4903,7 @@ function drawWaveform(canvas, peaks, options = {}) {
 }
 
 // src/components/WaveformView.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var WaveformView = ({
   host,
   filePath,
@@ -4350,9 +4912,9 @@ var WaveformView = ({
   fillStyle,
   targetSamples
 }) => {
-  const canvasRef = useRef11(null);
-  const [peaks, setPeaks] = useState13(null);
-  useEffect11(() => {
+  const canvasRef = useRef13(null);
+  const [peaks, setPeaks] = useState17(null);
+  useEffect13(() => {
     let cancelled = false;
     let audioContext = null;
     (async () => {
@@ -4378,7 +4940,7 @@ var WaveformView = ({
       cancelled = true;
     };
   }, [host, filePath, bins, targetSamples]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!peaks) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -4389,7 +4951,7 @@ var WaveformView = ({
     observer.observe(canvas);
     return () => observer.disconnect();
   }, [peaks, fillStyle]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     "canvas",
     {
       ref: canvasRef,
@@ -4400,8 +4962,8 @@ var WaveformView = ({
 };
 
 // src/components/ScrollingWaveform.tsx
-import { useEffect as useEffect12, useRef as useRef12 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useRef as useRef14 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var ScrollingWaveform = ({
   getPeakDb,
   active,
@@ -4409,11 +4971,11 @@ var ScrollingWaveform = ({
   className,
   fillStyle
 }) => {
-  const canvasRef = useRef12(null);
-  const ringRef = useRef12(new Float32Array(columns));
-  const writeIdxRef = useRef12(0);
-  const rafRef = useRef12(null);
-  useEffect12(() => {
+  const canvasRef = useRef14(null);
+  const ringRef = useRef14(new Float32Array(columns));
+  const writeIdxRef = useRef14(0);
+  const rafRef = useRef14(null);
+  useEffect14(() => {
     if (ringRef.current.length !== columns) {
       const next = new Float32Array(columns);
       const prev = ringRef.current;
@@ -4425,7 +4987,7 @@ var ScrollingWaveform = ({
       writeIdxRef.current = writeIdxRef.current % columns;
     }
   }, [columns]);
-  useEffect12(() => {
+  useEffect14(() => {
     if (!active) {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -4477,7 +5039,7 @@ var ScrollingWaveform = ({
       }
     };
   }, [active, getPeakDb, fillStyle]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     "canvas",
     {
       ref: canvasRef,
@@ -4488,8 +5050,8 @@ var ScrollingWaveform = ({
 };
 
 // src/components/OffsetScrubber.tsx
-import { useCallback as useCallback10, useEffect as useEffect13, useMemo as useMemo6, useRef as useRef13, useState as useState14 } from "react";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useEffect as useEffect15, useMemo as useMemo8, useRef as useRef15, useState as useState18 } from "react";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var SLIDER_HEIGHT_PX = 28;
 var TICK_HEIGHT_PX = 14;
 var DOWNBEAT_TICK_HEIGHT_PX = 22;
@@ -4502,40 +5064,40 @@ function OffsetScrubber({
   onChange,
   disabled = false
 }) {
-  const trackRef = useRef13(null);
-  const [draftOffset, setDraftOffset] = useState14(offsetSamples);
-  const [isDragging, setIsDragging] = useState14(false);
-  useEffect13(() => {
+  const trackRef = useRef15(null);
+  const [draftOffset, setDraftOffset] = useState18(offsetSamples);
+  const [isDragging, setIsDragging] = useState18(false);
+  useEffect15(() => {
     if (!isDragging) setDraftOffset(offsetSamples);
   }, [offsetSamples, isDragging]);
   const sampleRate = cuePoints?.sample_rate ?? 44100;
   const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
-  const beatsForRange = useMemo6(() => {
+  const beatsForRange = useMemo8(() => {
     return Math.round(60 / projectBpm * sampleRate);
   }, [projectBpm, sampleRate]);
   const rangeSamples = beatsForRange * meter;
-  const sampleToFraction = useCallback10(
+  const sampleToFraction = useCallback12(
     (sample) => {
       const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
       return (clamped + rangeSamples) / (2 * rangeSamples);
     },
     [rangeSamples]
   );
-  const fractionToSample = useCallback10(
+  const fractionToSample = useCallback12(
     (fraction) => {
       const clamped = Math.max(0, Math.min(1, fraction));
       return Math.round(clamped * 2 * rangeSamples - rangeSamples);
     },
     [rangeSamples]
   );
-  const snapTargets = useMemo6(() => {
+  const snapTargets = useMemo8(() => {
     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 = useCallback10(
+  const snapToBeat = useCallback12(
     (sample) => {
       if (snapTargets.length === 0) return sample;
       let best = snapTargets[0];
@@ -4551,7 +5113,7 @@ function OffsetScrubber({
     },
     [snapTargets]
   );
-  const handlePointerDown = useCallback10(
+  const handlePointerDown = useCallback12(
     (e) => {
       if (disabled || !cuePoints) return;
       e.preventDefault();
@@ -4585,7 +5147,7 @@ function OffsetScrubber({
     },
     [disabled, cuePoints, fractionToSample, onChange, snapToBeat]
   );
-  const handleResetToZero = useCallback10(() => {
+  const handleResetToZero = useCallback12(() => {
     if (disabled) return;
     setDraftOffset(0);
     onChange(0);
@@ -4593,7 +5155,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 = useMemo6(() => {
+  const ticks = useMemo8(() => {
     if (!cuePoints) return [];
     const downbeat = cuePoints.beats[0] ?? 0;
     return cuePoints.beats.map((b, i) => {
@@ -4604,9 +5166,9 @@ function OffsetScrubber({
     });
   }, [cuePoints, sampleToFraction]);
   const isDisabled = disabled || !cuePoints || cuePoints.beats.length === 0;
-  return /* @__PURE__ */ jsxs16("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
-    /* @__PURE__ */ jsx22("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
-    /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ jsx24("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
+    /* @__PURE__ */ jsxs18(
       "div",
       {
         ref: trackRef,
@@ -4622,7 +5184,7 @@ function OffsetScrubber({
         "aria-valuenow": draftOffset,
         "aria-disabled": isDisabled,
         children: [
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx24(
             "div",
             {
               "aria-hidden": "true",
@@ -4630,7 +5192,7 @@ function OffsetScrubber({
               style: { left: "50%" }
             }
           ),
-          ticks.map((t) => /* @__PURE__ */ jsx22(
+          ticks.map((t) => /* @__PURE__ */ jsx24(
             "div",
             {
               "data-testid": t.isDownbeat ? "offset-tick-downbeat" : "offset-tick",
@@ -4645,7 +5207,7 @@ function OffsetScrubber({
             },
             t.i
           )),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx24(
             "div",
             {
               "data-testid": "offset-scrubber-thumb",
@@ -4662,7 +5224,7 @@ function OffsetScrubber({
         ]
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx24(
       "span",
       {
         "data-testid": "offset-scrubber-readout",
@@ -4670,7 +5232,7 @@ function OffsetScrubber({
         children: formatOffset(draftOffset, sampleRate)
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx24(
       "button",
       {
         type: "button",
@@ -4682,7 +5244,7 @@ function OffsetScrubber({
         children: "\u2316"
       }
     ),
-    bpmMismatch && /* @__PURE__ */ jsx22(
+    bpmMismatch && /* @__PURE__ */ jsx24(
       "span",
       {
         "data-testid": "offset-bpm-mismatch",
@@ -4754,16 +5316,16 @@ function synthesizeCuePoints({
 }
 
 // src/panel-core/useGeneratorPanelCore.tsx
-import { useState as useState19, useEffect as useEffect16, useCallback as useCallback14, useRef as useRef17, useMemo as useMemo8 } from "react";
+import { useState as useState23, useEffect as useEffect18, useCallback as useCallback16, useRef as useRef19, useMemo as useMemo10 } from "react";
 
 // src/hooks/useSceneState.ts
-import { useState as useState15, useCallback as useCallback11, useRef as useRef14 } from "react";
+import { useState as useState19, useCallback as useCallback13, useRef as useRef16 } from "react";
 function useSceneState(activeSceneId, initialValue) {
-  const [stateMap, setStateMap] = useState15(() => /* @__PURE__ */ new Map());
-  const activeSceneIdRef = useRef14(activeSceneId);
+  const [stateMap, setStateMap] = useState19(() => /* @__PURE__ */ new Map());
+  const activeSceneIdRef = useRef16(activeSceneId);
   activeSceneIdRef.current = activeSceneId;
   const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
-  const setForCurrentScene = useCallback11((value) => {
+  const setForCurrentScene = useCallback13((value) => {
     const sid = activeSceneIdRef.current;
     if (sid === null) return;
     setStateMap((prev) => {
@@ -4774,7 +5336,7 @@ function useSceneState(activeSceneId, initialValue) {
       return newMap;
     });
   }, [initialValue]);
-  const setForScene = useCallback11((sceneId, value) => {
+  const setForScene = useCallback13((sceneId, value) => {
     setStateMap((prev) => {
       const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
       const next = typeof value === "function" ? value(current) : value;
@@ -4787,10 +5349,10 @@ function useSceneState(activeSceneId, initialValue) {
 }
 
 // src/hooks/useAnySolo.ts
-import { useEffect as useEffect14, useState as useState16 } from "react";
+import { useEffect as useEffect16, useState as useState20 } from "react";
 function useAnySolo(host) {
-  const [anySolo, setAnySolo] = useState16(false);
-  useEffect14(() => {
+  const [anySolo, setAnySolo] = useState20(false);
+  useEffect16(() => {
     let active = true;
     const refresh = () => {
       host.isAnySoloActive().then((v) => {
@@ -4809,7 +5371,7 @@ function useAnySolo(host) {
 }
 
 // src/hooks/useSoundHistory.ts
-import { useCallback as useCallback12, useMemo as useMemo7, useRef as useRef15, useState as useState17 } from "react";
+import { useCallback as useCallback14, useMemo as useMemo9, useRef as useRef17, useState as useState21 } from "react";
 var EMPTY = { entries: [], cursor: -1 };
 function sameDescriptor(a, b) {
   if (a === b) return true;
@@ -4821,14 +5383,14 @@ function sameDescriptor(a, b) {
 }
 function useSoundHistory(applySound, opts = {}) {
   const max = Math.max(2, opts.max ?? 24);
-  const applyRef = useRef15(applySound);
+  const applyRef = useRef17(applySound);
   applyRef.current = applySound;
-  const onChangeRef = useRef15(opts.onChange);
+  const onChangeRef = useRef17(opts.onChange);
   onChangeRef.current = opts.onChange;
-  const dataRef = useRef15({});
-  const [, setVersion] = useState17(0);
-  const bump = useCallback12(() => setVersion((v) => v + 1), []);
-  const commit = useCallback12(
+  const dataRef = useRef17({});
+  const [, setVersion] = useState21(0);
+  const bump = useCallback14(() => setVersion((v) => v + 1), []);
+  const commit = useCallback14(
     (trackId, next, notify) => {
       dataRef.current = { ...dataRef.current, [trackId]: next };
       bump();
@@ -4836,7 +5398,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const record = useCallback12(
+  const record = useCallback14(
     (trackId, descriptor, label) => {
       const h = dataRef.current[trackId];
       const current = h && h.cursor >= 0 ? h.entries[h.cursor] : void 0;
@@ -4851,7 +5413,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [max, commit]
   );
-  const restoreTo = useCallback12(
+  const restoreTo = useCallback14(
     async (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length || index === h.cursor) return false;
@@ -4861,7 +5423,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const undo = useCallback12(
+  const undo = useCallback14(
     (trackId) => {
       const h = dataRef.current[trackId];
       if (!h || h.cursor <= 0) return Promise.resolve(false);
@@ -4869,7 +5431,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [restoreTo]
   );
-  const toggleFavorite = useCallback12(
+  const toggleFavorite = useCallback14(
     (trackId, index) => {
       const h = dataRef.current[trackId];
       if (!h || index < 0 || index >= h.entries.length) return;
@@ -4878,7 +5440,7 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const restore = useCallback12(
+  const restore = useCallback14(
     (trackId, state) => {
       const entries = Array.isArray(state?.entries) ? [...state.entries] : [];
       const raw = typeof state?.cursor === "number" ? state.cursor : entries.length - 1;
@@ -4887,15 +5449,15 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [commit]
   );
-  const list = useCallback12(
+  const list = useCallback14(
     (trackId) => dataRef.current[trackId] ?? EMPTY,
     []
   );
-  const canUndo = useCallback12((trackId) => {
+  const canUndo = useCallback14((trackId) => {
     const h = dataRef.current[trackId];
     return !!h && h.cursor > 0;
   }, []);
-  const clear = useCallback12(
+  const clear = useCallback14(
     (trackId) => {
       if (dataRef.current[trackId]) {
         const next = { ...dataRef.current };
@@ -4907,11 +5469,11 @@ function useSoundHistory(applySound, opts = {}) {
     },
     [bump]
   );
-  const reset = useCallback12(() => {
+  const reset = useCallback14(() => {
     dataRef.current = {};
     bump();
   }, [bump]);
-  return useMemo7(
+  return useMemo9(
     () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
     [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
   );
@@ -5044,7 +5606,7 @@ function resolveTrackGroups(parsedGroups, tracks, getDbId, opts = {}) {
 }
 
 // src/panel-core/useTransitionOps.ts
-import { useCallback as useCallback13, useEffect as useEffect15, useRef as useRef16, useState as useState18 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect17, useRef as useRef18, useState as useState22 } from "react";
 function useTransitionOps({
   host,
   adapter,
@@ -5061,8 +5623,8 @@ function useTransitionOps({
   resolvedFades
 }) {
   const { identity } = adapter;
-  const appliedFadeAutomationRef = useRef16(/* @__PURE__ */ new Set());
-  const applyCrossfadeAutomation = useCallback13(
+  const appliedFadeAutomationRef = useRef18(/* @__PURE__ */ new Set());
+  const applyCrossfadeAutomation = useCallback15(
     async (originTrackId, targetTrackId, bars, bpm, sliderPos) => {
       if (host.setTrackVolumeAutomation) {
         const curves = buildCrossfadeVolumeCurves(bars, bpm, sliderPos);
@@ -5079,7 +5641,7 @@ function useTransitionOps({
     },
     [host]
   );
-  const applyFadeAutomation = useCallback13(
+  const applyFadeAutomation = useCallback15(
     async (trackId, direction, bars, bpm, sliderPos, gesture) => {
       if (!host.setTrackVolumeAutomation) return;
       const points = buildFadeVolumeCurve(bars, bpm, direction, sliderPos, gesture);
@@ -5088,8 +5650,8 @@ function useTransitionOps({
     },
     [host]
   );
-  const [isCreatingCrossfade, setIsCreatingCrossfade] = useState18(false);
-  const handleCreateCrossfade = useCallback13(
+  const [isCreatingCrossfade, setIsCreatingCrossfade] = useState22(false);
+  const handleCreateCrossfade = useCallback15(
     async (origin, target) => {
       const scene = activeSceneId;
       const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
@@ -5217,8 +5779,8 @@ function useTransitionOps({
       loadTracks
     ]
   );
-  const [isCreatingFade, setIsCreatingFade] = useState18(false);
-  const handleCreateFade = useCallback13(
+  const [isCreatingFade, setIsCreatingFade] = useState22(false);
+  const handleCreateFade = useCallback15(
     async (selection, direction, gesture) => {
       const scene = activeSceneId;
       const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
@@ -5328,7 +5890,7 @@ function useTransitionOps({
       loadTracks
     ]
   );
-  const handleCrossfadeMute = useCallback13(
+  const handleCrossfadeMute = useCallback15(
     (pair) => {
       const newMuted = !pair.origin.runtimeState.muted;
       for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
@@ -5343,7 +5905,7 @@ function useTransitionOps({
     },
     [host, setTracks]
   );
-  const handleCrossfadeSolo = useCallback13(
+  const handleCrossfadeSolo = useCallback15(
     (pair) => {
       const newSolo = !pair.origin.runtimeState.solo;
       for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
@@ -5358,7 +5920,7 @@ function useTransitionOps({
     },
     [host, setTracks]
   );
-  const handleCrossfadeDelete = useCallback13(
+  const handleCrossfadeDelete = useCallback15(
     async (pair) => {
       try {
         for (const member of [pair.origin, pair.target]) {
@@ -5384,8 +5946,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, setCrossfadePairsMeta, setTracks]
   );
-  const crossfadeSliderTimers = useRef16({});
-  const handleCrossfadeSlider = useCallback13(
+  const crossfadeSliderTimers = useRef18({});
+  const handleCrossfadeSlider = useCallback15(
     (pair, pos) => {
       setCrossfadePairsMeta(
         (prev) => prev.map((p) => p.groupId === pair.groupId ? { ...p, sliderPos: pos } : p)
@@ -5418,7 +5980,7 @@ function useTransitionOps({
     },
     [host, activeSceneId, applyCrossfadeAutomation, setCrossfadePairsMeta]
   );
-  const handleFadeDelete = useCallback13(
+  const handleFadeDelete = useCallback15(
     async (fade) => {
       try {
         await host.deleteTrack(fade.track.handle.id);
@@ -5438,8 +6000,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, setFadesMeta, setTracks]
   );
-  const fadeSliderTimers = useRef16({});
-  const handleFadeSlider = useCallback13(
+  const fadeSliderTimers = useRef18({});
+  const handleFadeSlider = useCallback15(
     (fade, pos) => {
       setFadesMeta(
         (prev) => prev.map((f) => f.dbId === fade.dbId ? { ...f, meta: { ...f.meta, sliderPos: pos } } : f)
@@ -5469,8 +6031,8 @@ function useTransitionOps({
     },
     [host, activeSceneId, applyFadeAutomation, setFadesMeta]
   );
-  const lastResyncKeyRef = useRef16("");
-  useEffect15(() => {
+  const lastResyncKeyRef = useRef18("");
+  useEffect17(() => {
     if (!host.getTrackSound || resolvedCrossfadePairs.length === 0 && resolvedFades.length === 0) {
       return;
     }
@@ -5511,7 +6073,7 @@ function useTransitionOps({
       cancelled = true;
     };
   }, [resolvedCrossfadePairs, resolvedFades, host, adapter]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (!host.setTrackVolumeAutomation || resolvedFades.length === 0) return;
     void (async () => {
       const mc = await host.getMusicalContext();
@@ -5545,7 +6107,7 @@ function useTransitionOps({
 }
 
 // src/panel-core/useGeneratorPanelCore.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var EMPTY_PLACEHOLDERS = [];
 function useGeneratorPanelCore({
   ui,
@@ -5565,8 +6127,8 @@ function useGeneratorPanelCore({
   } = ui;
   const { identity, features } = adapter;
   const logTag = identity.logTag;
-  const adapterRef = useRef17(adapter);
-  useEffect16(() => {
+  const adapterRef = useRef19(adapter);
+  useEffect18(() => {
     if (adapterRef.current !== adapter) {
       adapterRef.current = adapter;
       console.warn(
@@ -5576,27 +6138,27 @@ function useGeneratorPanelCore({
   }, [adapter, logTag]);
   const supportsMeters = typeof host.getTrackLevels === "function";
   const trackLevels = useTrackLevels(host, isExpanded);
-  const [tracks, setTracks] = useState19([]);
-  const [isLoadingTracks, setIsLoadingTracks] = useState19(false);
-  const [importOpen, setImportOpen] = useState19(false);
-  const [soundImportTarget, setSoundImportTarget] = useState19(null);
-  const [designerView, setDesignerView] = useState19(false);
-  const [transitionSourceTotal, setTransitionSourceTotal] = useState19(0);
-  const [crossfadePairsMeta, setCrossfadePairsMeta] = useState19([]);
-  const [fadesMeta, setFadesMeta] = useState19([]);
-  const [genericGroupMetas, setGenericGroupMetas] = useState19({});
+  const [tracks, setTracks] = useState23([]);
+  const [isLoadingTracks, setIsLoadingTracks] = useState23(false);
+  const [importOpen, setImportOpen] = useState23(false);
+  const [soundImportTarget, setSoundImportTarget] = useState23(null);
+  const [designerView, setDesignerView] = useState23(false);
+  const [transitionSourceTotal, setTransitionSourceTotal] = useState23(0);
+  const [crossfadePairsMeta, setCrossfadePairsMeta] = useState23([]);
+  const [fadesMeta, setFadesMeta] = useState23([]);
+  const [genericGroupMetas, setGenericGroupMetas] = useState23({});
   const [isComposing, , setIsComposingForScene] = useSceneState(activeSceneId, false);
   const [placeholders, , setPlaceholdersForScene] = useSceneState(
     activeSceneId,
     EMPTY_PLACEHOLDERS
   );
-  const saveTimeoutRefs = useRef17({});
-  const editLoadStartedRef = useRef17(/* @__PURE__ */ new Set());
-  const [availableInstruments, setAvailableInstruments] = useState19([]);
-  const [instrumentsLoading, setInstrumentsLoading] = useState19(false);
-  const engineToDbIdRef = useRef17(/* @__PURE__ */ new Map());
-  const tracksLoadedForSceneRef = useRef17(null);
-  const persistSoundHistory = useCallback14(
+  const saveTimeoutRefs = useRef19({});
+  const editLoadStartedRef = useRef19(/* @__PURE__ */ new Set());
+  const [availableInstruments, setAvailableInstruments] = useState23([]);
+  const [instrumentsLoading, setInstrumentsLoading] = useState23(false);
+  const engineToDbIdRef = useRef19(/* @__PURE__ */ new Map());
+  const tracksLoadedForSceneRef = useRef19(null);
+  const persistSoundHistory = useCallback16(
     (trackId, state) => {
       if (!activeSceneId) return;
       const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
@@ -5616,7 +6178,7 @@ function useGeneratorPanelCore({
     setItems: setTracks,
     getId: (t) => t.handle.dbId
   });
-  const loadTracks = useCallback14(
+  const loadTracks = useCallback16(
     async (incremental = false) => {
       const sceneAtStart = activeSceneId;
       if (!sceneAtStart) {
@@ -5741,18 +6303,18 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId, soundHistory, adapter, logTag]
   );
-  useEffect16(() => {
+  useEffect18(() => {
     loadTracks();
   }, [loadTracks]);
-  useEffect16(() => {
+  useEffect18(() => {
     const map = /* @__PURE__ */ new Map();
     for (const t of tracks) {
       map.set(t.handle.id, t.handle.dbId);
     }
     engineToDbIdRef.current = map;
   }, [tracks]);
-  const loadedCompletedIdsRef = useRef17(/* @__PURE__ */ new Set());
-  useEffect16(() => {
+  const loadedCompletedIdsRef = useRef19(/* @__PURE__ */ new Set());
+  useEffect18(() => {
     if (placeholders.length === 0) {
       loadedCompletedIdsRef.current.clear();
       return;
@@ -5771,16 +6333,16 @@ function useGeneratorPanelCore({
       loadTracks(true);
     }
   }, [placeholders, loadTracks, logTag]);
-  const adoptAndLoad = useCallback14(() => {
+  const adoptAndLoad = useCallback16(() => {
     loadTracks(true);
   }, [loadTracks]);
-  useEffect16(() => {
+  useEffect18(() => {
     const unsub = host.onEngineReady(() => {
       adoptAndLoad();
     });
     return unsub;
   }, [host, adoptAndLoad]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (typeof host.onAfterAgentMutation !== "function") return;
     let timer = null;
     const unsub = host.onAfterAgentMutation(() => {
@@ -5795,13 +6357,13 @@ function useGeneratorPanelCore({
       if (timer) clearTimeout(timer);
     };
   }, [host, loadTracks]);
-  useEffect16(() => {
+  useEffect18(() => {
     const unsub = host.onTrackStateChange((trackId, state) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: state } : t));
     });
     return unsub;
   }, [host]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!features.bulkComposePlaceholders) return;
     console.log(`[${logTag}] Subscribing to composeProgress`);
     const unsub = host.onComposeProgress((event) => {
@@ -5835,7 +6397,7 @@ function useGeneratorPanelCore({
     });
     return unsub;
   }, [host, setIsComposingForScene, setPlaceholdersForScene, features.bulkComposePlaceholders, logTag]);
-  useEffect16(() => {
+  useEffect18(() => {
     const refs = saveTimeoutRefs;
     return () => {
       for (const timeout of Object.values(refs.current)) {
@@ -5843,9 +6405,9 @@ function useGeneratorPanelCore({
       }
     };
   }, []);
-  const isAddingTrackRef = useRef17(false);
-  const [isAddingTrack, setIsAddingTrack] = useState19(false);
-  const handleAddTrack = useCallback14(async () => {
+  const isAddingTrackRef = useRef19(false);
+  const [isAddingTrack, setIsAddingTrack] = useState23(false);
+  const handleAddTrack = useCallback16(async () => {
     if (isAddingTrackRef.current) return;
     if (!activeSceneId) {
       host.showToast("warning", "Select SCENE");
@@ -5885,7 +6447,7 @@ function useGeneratorPanelCore({
       setIsAddingTrack(false);
     }
   }, [host, adapter, identity, activeSceneId, isConnected, isAuthenticated, tracks.length, onExpandSelf]);
-  const handlePortTrack = useCallback14(
+  const handlePortTrack = useCallback16(
     async (sel) => {
       if (!activeSceneId) {
         host.showToast("warning", "Select SCENE");
@@ -5942,7 +6504,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, identity, activeSceneId, isConnected, tracks.length, loadTracks]
   );
-  const handleSoundImportPick = useCallback14(
+  const handleSoundImportPick = useCallback16(
     async (sel) => {
       const target = soundImportTarget;
       if (!target || !host.getTrackSound) {
@@ -5973,8 +6535,8 @@ function useGeneratorPanelCore({
     },
     [soundImportTarget, host, adapter, identity.familyKey, soundHistory]
   );
-  const [isExportingMidi, setIsExportingMidi] = useState19(false);
-  const handleExportMidi = useCallback14(async () => {
+  const [isExportingMidi, setIsExportingMidi] = useState23(false);
+  const handleExportMidi = useCallback16(async () => {
     if (isExportingMidi) return;
     setIsExportingMidi(true);
     try {
@@ -6005,10 +6567,10 @@ function useGeneratorPanelCore({
   const xfFromId = sceneContext?.transitionFromSceneId ?? null;
   const xfToId = sceneContext?.transitionToSceneId ?? null;
   const canCrossfade = features.transitionDesigner && sceneContext?.sceneType === "transition" && !!xfFromId && !!xfToId && !!host.listSceneFamilyTracks;
-  useEffect16(() => {
+  useEffect18(() => {
     if (!canCrossfade) setDesignerView(false);
   }, [canCrossfade]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!canCrossfade || !xfFromId || !xfToId || !host.listSceneFamilyTracks) {
       setTransitionSourceTotal(0);
       return;
@@ -6024,12 +6586,12 @@ function useGeneratorPanelCore({
     };
   }, [canCrossfade, xfFromId, xfToId, host]);
   const transitionDone = crossfadePairsMeta.length * 2 + fadesMeta.length;
-  useEffect16(() => {
+  useEffect18(() => {
     if (!onHeaderContent) return;
     const addDisabled = needsContract || !isConnected || !activeSceneId || tracks.length >= identity.maxTracks || isAddingTrack;
     onHeaderContent(
-      /* @__PURE__ */ jsxs17("div", { className: "flex gap-1 items-center", children: [
-        features.importTracks && (!canCrossfade || !designerView) && host.listImportableTracks && /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsxs19("div", { className: "flex gap-1 items-center", children: [
+        features.importTracks && (!canCrossfade || !designerView) && host.listImportableTracks && /* @__PURE__ */ jsx25(
           "button",
           {
             "data-testid": `import-from-scene-${identity.familyKey}-button`,
@@ -6043,7 +6605,7 @@ function useGeneratorPanelCore({
             children: identity.importTrackLabel ?? "Import Track"
           }
         ),
-        (!canCrossfade || !designerView) && /* @__PURE__ */ jsx23(
+        (!canCrossfade || !designerView) && /* @__PURE__ */ jsx25(
           "button",
           {
             "data-testid": `add-${identity.familyKey}-track-button`,
@@ -6059,7 +6621,7 @@ function useGeneratorPanelCore({
             children: identity.addTrackLabel ?? "Add Track"
           }
         ),
-        canCrossfade && /* @__PURE__ */ jsxs17(
+        canCrossfade && /* @__PURE__ */ jsxs19(
           "button",
           {
             "data-testid": `${identity.familyKey}-view-toggle`,
@@ -6078,7 +6640,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__ */ jsx23(
+              transitionSourceTotal > 0 && /* @__PURE__ */ jsx25(
                 "span",
                 {
                   className: "absolute inset-y-0 left-0 bg-sas-accent/25",
@@ -6086,7 +6648,7 @@ function useGeneratorPanelCore({
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsxs17("span", { className: "relative", children: [
+              /* @__PURE__ */ jsxs19("span", { className: "relative", children: [
                 "\u21C4 ",
                 designerView ? "Transition" : "Tracks",
                 transitionSourceTotal > 0 ? ` ${transitionDone}/${transitionSourceTotal}` : ""
@@ -6117,7 +6679,7 @@ function useGeneratorPanelCore({
     identity,
     features.importTracks
   ]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!onLoading) return;
     const anyGenerating = tracks.some((t) => t.isGenerating);
     onLoading(isLoadingTracks || anyGenerating || isBulkActive);
@@ -6125,7 +6687,7 @@ function useGeneratorPanelCore({
       onLoading(false);
     };
   }, [onLoading, isLoadingTracks, tracks, isBulkActive]);
-  const handleDeleteTrack = useCallback14(
+  const handleDeleteTrack = useCallback16(
     async (trackId) => {
       try {
         await host.deleteTrack(trackId);
@@ -6141,7 +6703,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId]
   );
-  const handlePromptChange = useCallback14(
+  const handlePromptChange = useCallback16(
     (trackId, prompt) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, prompt } : t));
       const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
@@ -6157,7 +6719,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId]
   );
-  const resolvedGenericGroups = useMemo8(() => {
+  const resolvedGenericGroups = useMemo10(() => {
     const out = {};
     for (const ext of adapter.groupExtensions ?? []) {
       out[ext.metaKey] = resolveTrackGroups(
@@ -6171,18 +6733,18 @@ function useGeneratorPanelCore({
     }
     return out;
   }, [adapter, genericGroupMetas, tracks]);
-  const genericGroupMemberDbIds = useMemo8(() => {
+  const genericGroupMemberDbIds = useMemo10(() => {
     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 = useCallback14(
+  const engineToDbId = useCallback16(
     (trackId) => engineToDbIdRef.current.get(trackId) ?? trackId,
     []
   );
-  const updateTrack = useCallback14(
+  const updateTrack = useCallback16(
     (trackId, patch) => {
       setTracks(
         (prev) => prev.map(
@@ -6192,18 +6754,18 @@ function useGeneratorPanelCore({
     },
     []
   );
-  const markEditLoaded = useCallback14((trackId) => {
+  const markEditLoaded = useCallback16((trackId) => {
     editLoadStartedRef.current.add(trackId);
   }, []);
-  const tracksRef = useRef17(tracks);
-  useEffect16(() => {
+  const tracksRef = useRef19(tracks);
+  useEffect18(() => {
     tracksRef.current = tracks;
   }, [tracks]);
-  const resolvedGenericGroupsRef = useRef17(resolvedGenericGroups);
-  useEffect16(() => {
+  const resolvedGenericGroupsRef = useRef19(resolvedGenericGroups);
+  useEffect18(() => {
     resolvedGenericGroupsRef.current = resolvedGenericGroups;
   }, [resolvedGenericGroups]);
-  const makeServices = useCallback14(() => {
+  const makeServices = useCallback16(() => {
     return {
       host,
       activeSceneId,
@@ -6222,7 +6784,7 @@ function useGeneratorPanelCore({
       resolvedGroups: (metaKey) => resolvedGenericGroupsRef.current[metaKey]?.resolved ?? []
     };
   }, [host, activeSceneId, updateTrack, loadTracks, soundHistory, engineToDbId, markEditLoaded, identity, adapter]);
-  const handleGenerate = useCallback14(
+  const handleGenerate = useCallback16(
     async (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track || !track.prompt.trim()) return;
@@ -6249,7 +6811,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, tracks, isAuthenticated, makeServices]
   );
-  const handleMuteToggle = useCallback14(
+  const handleMuteToggle = useCallback16(
     (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -6269,7 +6831,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const handleSoloToggle = useCallback14(
+  const handleSoloToggle = useCallback16(
     (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -6289,7 +6851,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const handleVolumeChange = useCallback14(
+  const handleVolumeChange = useCallback16(
     (trackId, volume) => {
       setTracks(
         (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, volume } } : t)
@@ -6299,7 +6861,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handlePanChange = useCallback14(
+  const handlePanChange = useCallback16(
     (trackId, pan) => {
       setTracks(
         (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, pan } } : t)
@@ -6309,7 +6871,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleShuffle = useCallback14(
+  const handleShuffle = useCallback16(
     async (trackId) => {
       const track = tracks.find((t) => t.handle.id === trackId);
       if (!track) return;
@@ -6351,7 +6913,7 @@ function useGeneratorPanelCore({
     },
     [host, adapter, tracks, soundHistory, logTag]
   );
-  const handleCopy = useCallback14(
+  const handleCopy = useCallback16(
     async (trackId) => {
       try {
         const newHandle = await host.duplicateTrack(trackId);
@@ -6364,7 +6926,7 @@ function useGeneratorPanelCore({
     },
     [host, loadTracks]
   );
-  const handleFxToggle = useCallback14(
+  const handleFxToggle = useCallback16(
     (trackId, category, enabled) => {
       setTracks(
         (prev) => prev.map(
@@ -6387,7 +6949,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleFxPresetChange = useCallback14(
+  const handleFxPresetChange = useCallback16(
     (trackId, category, presetIndex) => {
       setTracks(
         (prev) => prev.map(
@@ -6413,7 +6975,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleFxDryWetChange = useCallback14(
+  const handleFxDryWetChange = useCallback16(
     (trackId, category, value) => {
       setTracks(
         (prev) => prev.map(
@@ -6425,7 +6987,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const toggleFxDrawer = useCallback14(
+  const toggleFxDrawer = useCallback16(
     (trackId) => {
       setTracks(
         (prev) => prev.map((t) => {
@@ -6447,7 +7009,7 @@ function useGeneratorPanelCore({
     },
     [host, tracks]
   );
-  const loadEditNotes = useCallback14(
+  const loadEditNotes = useCallback16(
     async (trackId) => {
       try {
         const mc = await host.getMusicalContext();
@@ -6465,7 +7027,7 @@ function useGeneratorPanelCore({
     },
     [host, logTag]
   );
-  const handleNotesChange = useCallback14(
+  const handleNotesChange = useCallback16(
     (trackId, notes) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editNotes: notes } : t));
       const key = `edit:${trackId}`;
@@ -6495,7 +7057,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleTabChange = useCallback14(
+  const handleTabChange = useCallback16(
     (trackId, tab) => {
       setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, drawerOpen: true, drawerTab: tab } : t));
       if (tab === "fx") {
@@ -6520,10 +7082,10 @@ function useGeneratorPanelCore({
     },
     [host, availableInstruments.length, instrumentsLoading, loadEditNotes]
   );
-  const handleProgressChange = useCallback14((trackId, pct) => {
+  const handleProgressChange = useCallback16((trackId, pct) => {
     setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, generationProgress: pct } : t));
   }, []);
-  const handleToggleDrawer = useCallback14((trackId) => {
+  const handleToggleDrawer = useCallback16((trackId) => {
     setTracks(
       (prev) => prev.map((t) => {
         if (t.handle.id !== trackId) return t;
@@ -6532,7 +7094,7 @@ function useGeneratorPanelCore({
       })
     );
   }, []);
-  const handleInstrumentSelect = useCallback14(
+  const handleInstrumentSelect = useCallback16(
     async (trackId, pluginId) => {
       const isDefaultInstrument = pluginId === (identity.defaultInstrumentPluginId ?? "Surge XT");
       if (isDefaultInstrument) {
@@ -6585,7 +7147,7 @@ function useGeneratorPanelCore({
     },
     [host, identity.defaultInstrumentPluginId, logTag]
   );
-  const handleShowEditor = useCallback14(
+  const handleShowEditor = useCallback16(
     async (trackId) => {
       try {
         await host.showInstrumentEditor(trackId);
@@ -6596,12 +7158,12 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const handleBackToInstruments = useCallback14((trackId) => {
+  const handleBackToInstruments = useCallback16((trackId) => {
     setTracks(
       (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editorStage: false } : t)
     );
   }, []);
-  const handleRefreshInstruments = useCallback14(() => {
+  const handleRefreshInstruments = useCallback16(() => {
     setInstrumentsLoading(true);
     host.getAvailableInstruments().then((instruments) => {
       setAvailableInstruments(instruments);
@@ -6610,13 +7172,13 @@ function useGeneratorPanelCore({
       setInstrumentsLoading(false);
     });
   }, [host]);
-  const onAuditionNote = useCallback14(
+  const onAuditionNote = useCallback16(
     (trackId, pitch, velocity, ms) => {
       void host.auditionNote(trackId, pitch, velocity, ms);
     },
     [host]
   );
-  const { resolvedCrossfadePairs, crossfadeMemberDbIds } = useMemo8(() => {
+  const { resolvedCrossfadePairs, crossfadeMemberDbIds } = useMemo10(() => {
     const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
     const pairs = [];
     const members = /* @__PURE__ */ new Set();
@@ -6631,7 +7193,7 @@ function useGeneratorPanelCore({
     }
     return { resolvedCrossfadePairs: pairs, crossfadeMemberDbIds: members };
   }, [tracks, crossfadePairsMeta]);
-  const { resolvedFades, fadeMemberDbIds } = useMemo8(() => {
+  const { resolvedFades, fadeMemberDbIds } = useMemo10(() => {
     const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
     const list = [];
     const members = /* @__PURE__ */ new Set();
@@ -6659,7 +7221,7 @@ function useGeneratorPanelCore({
     resolvedCrossfadePairs,
     resolvedFades
   });
-  const setGroupMute = useCallback14(
+  const setGroupMute = useCallback16(
     (trackIds, muted) => {
       for (const id of trackIds) {
         setTracks(
@@ -6671,7 +7233,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const setGroupSolo = useCallback14(
+  const setGroupSolo = useCallback16(
     (trackIds, solo) => {
       for (const id of trackIds) {
         setTracks(
@@ -6683,7 +7245,7 @@ function useGeneratorPanelCore({
     },
     [host]
   );
-  const deleteGroup = useCallback14(
+  const deleteGroup = useCallback16(
     async (members, cleanupKeySuffixes) => {
       for (const member of members) {
         try {
@@ -6703,7 +7265,7 @@ function useGeneratorPanelCore({
     },
     [host, activeSceneId, loadTracks]
   );
-  const handlers = useMemo8(
+  const handlers = useMemo10(
     () => ({
       promptChange: handlePromptChange,
       generate: (trackId) => {
@@ -6817,8 +7379,8 @@ function useGeneratorPanelCore({
 }
 
 // src/panel-core/GeneratorPanelShell.tsx
-import React20, { useCallback as useCallback15 } from "react";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import React22, { useCallback as useCallback17 } from "react";
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function GeneratorPanelShell({ core, slots }) {
   const {
     ui,
@@ -6871,8 +7433,9 @@ function GeneratorPanelShell({ core, slots }) {
     deleteGroup
   } = core;
   const { host, activeSceneId, isAuthenticated, sceneContext, onSelectScene, onOpenContract } = ui;
+  const panelBus = usePanelBus(host, activeSceneId);
   const { identity, features } = adapter;
-  const buildRowProps = useCallback15(
+  const buildRowProps = useCallback17(
     (track, drag) => {
       const id = track.handle.id;
       const pickerProps = features.instrumentPicker ? {
@@ -6924,6 +7487,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),
@@ -6971,12 +7535,12 @@ function GeneratorPanelShell({ core, slots }) {
     ]
   );
   if (!activeSceneId) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
         "data-testid": `no-scene-placeholder-${identity.familyKey}`,
         className: "flex items-center justify-center py-8",
-        children: /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsx26(
           "button",
           {
             onClick: () => onSelectScene?.(),
@@ -6988,12 +7552,12 @@ function GeneratorPanelShell({ core, slots }) {
     );
   }
   if (!sceneContext?.hasContract) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
         "data-testid": `no-contract-placeholder-${identity.familyKey}`,
         className: "flex items-center justify-center py-8",
-        children: /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsx26(
           "button",
           {
             onClick: () => onOpenContract?.(),
@@ -7005,7 +7569,7 @@ function GeneratorPanelShell({ core, slots }) {
     );
   }
   if (features.bulkComposePlaceholders && isComposing) {
-    return /* @__PURE__ */ jsx24("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2", children: /* @__PURE__ */ jsx24(SorceryProgressBar, { isLoading: true, statusText: "COMPOSING...", heightClass: "h-10" }) });
+    return /* @__PURE__ */ jsx26("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2", children: /* @__PURE__ */ jsx26(SorceryProgressBar, { isLoading: true, statusText: "COMPOSING...", heightClass: "h-10" }) });
   }
   const activePlaceholders = features.bulkComposePlaceholders ? placeholders : [];
   if (activePlaceholders.length > 0) {
@@ -7016,18 +7580,18 @@ function GeneratorPanelShell({ core, slots }) {
         tracksByDbId.set(t.handle.id, t);
       }
     }
-    return /* @__PURE__ */ jsx24("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: activePlaceholders.map((ph) => {
+    return /* @__PURE__ */ jsx26("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__ */ jsx24(TrackRow, { ...buildRowProps(loadedTrack) }, ph.id);
+        return /* @__PURE__ */ jsx26(TrackRow, { ...buildRowProps(loadedTrack) }, ph.id);
       }
-      return /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx26(
         "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__ */ jsx24(SorceryProgressBar, { isLoading: true, statusText: "CONJURING MIDI...", heightClass: "h-10" })
+          children: /* @__PURE__ */ jsx26(SorceryProgressBar, { isLoading: true, statusText: "CONJURING MIDI...", heightClass: "h-10" })
         },
         ph.id
       );
@@ -7039,13 +7603,13 @@ function GeneratorPanelShell({ core, slots }) {
     supportsMeters,
     levels: supportsMeters ? trackLevels : void 0,
     handlers,
-    renderDefaultTrackRow: (track, overrides, drag) => /* @__PURE__ */ jsx24(TrackRow, { ...{ ...buildRowProps(track, drag), ...overrides ?? {} } }, track.handle.id),
+    renderDefaultTrackRow: (track, overrides, drag) => /* @__PURE__ */ jsx26(TrackRow, { ...{ ...buildRowProps(track, drag), ...overrides ?? {} } }, track.handle.id),
     setGroupMute,
     setGroupSolo,
     deleteGroup
   };
-  return /* @__PURE__ */ jsxs18("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: [
-    features.importTracks && host.listImportableTracks && /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs20("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: [
+    features.importTracks && host.listImportableTracks && /* @__PURE__ */ jsx26(
       ImportTrackModal,
       {
         host,
@@ -7058,7 +7622,7 @@ function GeneratorPanelShell({ core, slots }) {
         testIdPrefix: `${identity.familyKey}-import`
       }
     ),
-    features.importTracks && host.listImportableTracks && host.getTrackSound && /* @__PURE__ */ jsx24(
+    features.importTracks && host.listImportableTracks && host.getTrackSound && /* @__PURE__ */ jsx26(
       ImportTrackModal,
       {
         host,
@@ -7073,7 +7637,7 @@ function GeneratorPanelShell({ core, slots }) {
       }
     ),
     slots?.modals,
-    canCrossfade && xfFromId && xfToId && /* @__PURE__ */ jsx24("div", { className: designerView ? "contents" : "hidden", children: /* @__PURE__ */ jsx24(
+    canCrossfade && xfFromId && xfToId && /* @__PURE__ */ jsx26("div", { className: designerView ? "contents" : "hidden", children: /* @__PURE__ */ jsx26(
       TransitionDesigner,
       {
         host,
@@ -7090,9 +7654,29 @@ function GeneratorPanelShell({ core, slots }) {
         testIdPrefix: `${identity.familyKey}-transition-designer`
       }
     ) }),
-    !(designerView && canCrossfade) && (isLoadingTracks ? /* @__PURE__ */ jsx24("div", { className: "text-sas-muted text-xs text-center py-4", children: "Loading tracks..." }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+    !(designerView && canCrossfade) && (isLoadingTracks ? /* @__PURE__ */ jsx26("div", { className: "text-sas-muted text-xs text-center py-4", children: "Loading tracks..." }) : /* @__PURE__ */ jsxs20(Fragment6, { children: [
+      panelBus.supported && panelBus.bus && /* @__PURE__ */ jsx26(
+        PanelMasterStrip,
+        {
+          bus: panelBus.bus,
+          levels: panelBus.levels,
+          availableFx: panelBus.availableFx,
+          fxLoading: panelBus.fxLoading,
+          soloedOut: anySolo && !panelBus.bus.soloed,
+          fxPickerOpen: panelBus.fxPickerOpen,
+          onToggleFxPicker: panelBus.setFxPickerOpen,
+          onRefreshFx: panelBus.refreshFx,
+          onVolumeChange: panelBus.onVolumeChange,
+          onMuteToggle: panelBus.onMuteToggle,
+          onSoloToggle: panelBus.onSoloToggle,
+          onAddFx: panelBus.onAddFx,
+          onRemoveFx: panelBus.onRemoveFx,
+          onToggleFxEnabled: panelBus.onToggleFxEnabled,
+          onShowFxEditor: panelBus.onShowFxEditor
+        }
+      ),
       slots?.beforeRows,
-      resolvedCrossfadePairs.map((pair) => /* @__PURE__ */ jsx24(
+      resolvedCrossfadePairs.map((pair) => /* @__PURE__ */ jsx26(
         CrossfadeTrackRow,
         {
           accentColor: identity.transitionAccentColor,
@@ -7129,7 +7713,7 @@ function GeneratorPanelShell({ core, slots }) {
         },
         pair.groupId
       )),
-      resolvedFades.map((fade) => /* @__PURE__ */ jsx24(
+      resolvedFades.map((fade) => /* @__PURE__ */ jsx26(
         FadeTrackRow,
         {
           accentColor: identity.transitionAccentColor,
@@ -7155,20 +7739,20 @@ function GeneratorPanelShell({ core, slots }) {
         fade.dbId
       )),
       (adapter.groupExtensions ?? []).flatMap(
-        (ext) => (resolvedGenericGroups[ext.metaKey]?.resolved ?? []).map((group) => /* @__PURE__ */ jsx24(React20.Fragment, { children: ext.renderGroup(group, groupCtx) }, `${ext.metaKey}:${group.groupId}`))
+        (ext) => (resolvedGenericGroups[ext.metaKey]?.resolved ?? []).map((group) => /* @__PURE__ */ jsx26(React22.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__ */ jsx24(TrackRow, { ...buildRowProps(track, reorder.dragPropsFor(index)) }, track.handle.id);
+        return /* @__PURE__ */ jsx26(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__ */ jsx24("div", { className: "pt-2", children: /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx26("div", { className: "pt-2", children: /* @__PURE__ */ jsx26(
         "button",
         {
           "data-testid": "export-midi-tracks-button",
@@ -7236,7 +7820,7 @@ function createSurgeSoundAdapter(host, overrides = {}) {
 }
 
 // src/constants/sdk-version.ts
-var PLUGIN_SDK_VERSION = "2.35.0";
+var PLUGIN_SDK_VERSION = "2.39.0";
 
 // src/utils/format-concurrent-tracks.ts
 function formatConcurrentTracks(ctx) {
@@ -7411,6 +7995,7 @@ export {
   PLUGIN_SDK_VERSION,
   PX_PER_BEAT,
   PanSlider,
+  PanelMasterStrip,
   PianoRollEditor,
   PluginError,
   RESIZE_HANDLE_PX,
@@ -7422,6 +8007,7 @@ export {
   TEXTURAL_ROLES,
   TRANSITION_DESIGNER_DRAFT_KEY,
   TrackDrawer,
+  TrackExternalFxSection,
   TrackMeterStrip,
   TrackRow,
   TransitionDesigner,
@@ -7475,8 +8061,10 @@ export {
   transposeNotes,
   useAnySolo,
   useGeneratorPanelCore,
+  usePanelBus,
   useSceneState,
   useSoundHistory,
+  useTrackExternalFx,
   useTrackLevel,
   useTrackLevels,
   useTrackMeter,