@signalsandsorcery/plugin-sdk 2.3.1 → 2.24.1

package/dist/index.mjs

@@ -65,414 +65,49 @@ var EMPTY_FX_DETAIL_STATE = {
 };
 
 // src/components/TrackRow.tsx
-import { AlertCircle } from "lucide-react";
+import React8 from "react";
+import { AlertCircle, ChevronDown, GripVertical } from "lucide-react";
 
-// src/components/InstrumentDrawer.tsx
-import { useState, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function InstrumentDrawer({
-  instruments,
-  currentPluginId,
-  isLoading,
-  onSelect,
-  onRefresh,
-  stage = "instruments",
-  onShowEditor,
-  onBackToInstruments,
-  selectedInstrumentName
-}) {
-  const [search, setSearch] = useState("");
-  const SURGE_XT_DEFAULT_ID = "Surge XT";
-  const filtered = useMemo(() => {
-    let all = instruments.filter(
-      (i) => i.name !== "Surge XT"
-    );
-    if (search.trim()) {
-      const q = search.toLowerCase();
-      all = all.filter(
-        (i) => i.name.toLowerCase().includes(q) || i.manufacturer.toLowerCase().includes(q)
-      );
-    }
-    if (currentPluginId) {
-      const selectedIdx = all.findIndex((i) => i.pluginId === currentPluginId);
-      if (selectedIdx > 0) {
-        const [selected] = all.splice(selectedIdx, 1);
-        all.unshift(selected);
-      }
-    }
-    return all;
-  }, [instruments, search, currentPluginId]);
-  const isDefaultSelected = currentPluginId === null;
-  const isSelected = (pluginId) => {
-    return pluginId === currentPluginId;
-  };
-  if (stage === "editor") {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onBackToInstruments?.(),
-            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",
-            children: "\u2190 Back"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-sas-muted font-medium truncate flex-1", children: selectedInstrumentName ?? "Plugin" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onShowEditor?.(),
-          className: "w-full py-2 text-xs font-medium rounded-sm border border-sas-accent bg-sas-accent/20 text-sas-accent hover:bg-sas-accent/40 transition-colors",
-          children: "Open Plugin Editor"
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: search,
-          onChange: (e) => setSearch(e.target.value),
-          placeholder: "Search instruments...",
-          className: "sas-input flex-1 px-2 py-1 text-xs"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onRefresh,
-          disabled: isLoading,
-          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: isLoading ? "..." : "Refresh"
-        }
-      )
-    ] }),
-    isLoading && instruments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-xs text-sas-muted/60 text-center py-3", children: "Scanning plugins..." }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-1 max-h-[140px] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => onSelect(SURGE_XT_DEFAULT_ID),
-          className: `flex flex-col items-start px-2 py-1.5 rounded-sm border text-left transition-colors ${isDefaultSelected ? "border-sas-accent bg-sas-accent/20 text-sas-accent" : "border-sas-border bg-sas-panel-alt text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
-          title: "Surge XT \u2014 Default instrument",
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium truncate w-full", children: [
-              isDefaultSelected && "\u2713 ",
-              "Surge XT"
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: "Default" })
-          ]
-        },
-        "__surge-xt-default__"
-      ),
-      filtered.map((inst) => {
-        const selected = isSelected(inst.pluginId);
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => onSelect(inst.pluginId),
-            className: `flex flex-col items-start px-2 py-1.5 rounded-sm border text-left transition-colors ${selected ? "border-sas-accent bg-sas-accent/20 text-sas-accent" : inst.missing ? "border-amber-500/50 bg-amber-500/10 text-amber-400 hover:border-amber-500" : "border-sas-border bg-sas-panel-alt text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
-            title: `${inst.name} by ${inst.manufacturer} (${inst.type.toUpperCase()})${inst.missing ? " \u2014 MISSING" : ""}`,
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium truncate w-full", children: [
-                selected && "\u2713 ",
-                inst.name
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-[9px] text-sas-muted/50 truncate w-full", children: inst.manufacturer || inst.type.toUpperCase() })
-            ]
-          },
-          inst.pluginId
-        );
-      }),
-      filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "col-span-2 text-xs text-sas-muted/60 text-center py-2", children: search.trim() ? "No matches" : "No other plugins found" })
-    ] })
-  ] });
-}
-
-// src/components/VolumeSlider.tsx
-import { useCallback, useState as useState2, useRef, useEffect } from "react";
+// src/components/TrackDrawer.tsx
+import { useState as useState2, useMemo as useMemo2 } from "react";
 
-// src/utils/volume-conversion.ts
-var SLIDER_UNITY = 0.75;
-var DB_MAX = 6;
-var DB_MIN = -60;
-var EXPONENT = Math.log(Math.pow(10, DB_MAX / 20)) / Math.log(1 / SLIDER_UNITY);
-function sliderToDb(slider) {
-  if (slider <= 0) return DB_MIN;
-  const gain = Math.pow(slider / SLIDER_UNITY, EXPONENT);
-  const db = 20 * Math.log10(gain);
-  return Math.max(DB_MIN, Math.min(DB_MAX, db));
-}
-function dbToSlider(db) {
-  if (db <= DB_MIN) return 0;
-  if (db >= DB_MAX) return 1;
-  const gain = Math.pow(10, db / 20);
-  const slider = SLIDER_UNITY * Math.pow(gain, 1 / EXPONENT);
-  return Math.min(1, Math.max(0, slider));
-}
-
-// src/components/VolumeSlider.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function formatDb(value) {
-  const db = sliderToDb(value);
-  if (db <= -60) return "-\u221E dB";
-  const sign = db >= 0 ? "+" : "";
-  return `${sign}${db.toFixed(1)} dB`;
-}
-function useDebouncedCallback(callback, delay) {
-  const timeoutRef = useRef(null);
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  const debouncedCallback = useCallback(
-    (...args) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+// src/constants/fx-presets.ts
+var EQ_PRESETS = {
+  presets: [
+    {
+      name: "The Smiley",
+      shortLabel: "SM",
+      params: {
+        "Low-shelf freq": 80,
+        "Low-shelf gain": 4,
+        "Low-shelf Q": 0.5,
+        "Mid freq 1": 500,
+        "Mid gain 1": -3,
+        "Mid Q 1": 0.7,
+        "Mid freq 2": 2e3,
+        "Mid gain 2": -2,
+        "Mid Q 2": 0.7,
+        "High-shelf freq": 12e3,
+        "High-shelf gain": 4,
+        "High-shelf Q": 0.5
       }
-      timeoutRef.current = setTimeout(() => {
-        callbackRef.current(...args);
-      }, delay);
     },
-    [delay]
-  );
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return debouncedCallback;
-}
-var VolumeSlider = ({
-  value,
-  onChange,
-  disabled = false,
-  className = ""
-}) => {
-  const [localValue, setLocalValue] = useState2(value);
-  const [isDragging, setIsDragging] = useState2(false);
-  useEffect(() => {
-    if (!isDragging) {
-      setLocalValue(value);
-    }
-  }, [value, isDragging]);
-  const debouncedOnChange = useDebouncedCallback(onChange, 50);
-  const handleChange = useCallback(
-    (e) => {
-      const newValue = parseFloat(e.target.value);
-      setLocalValue(newValue);
-      debouncedOnChange(newValue);
-    },
-    [debouncedOnChange]
-  );
-  const handleMouseDown = useCallback(() => {
-    setIsDragging(true);
-  }, []);
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-    onChange(localValue);
-  }, [localValue, onChange]);
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: `flex items-center ${className}`,
-      title: `Volume: ${formatDb(localValue)}`,
-      children: /* @__PURE__ */ jsx2(
-        "input",
-        {
-          type: "range",
-          min: "0",
-          max: "1",
-          step: "0.01",
-          value: localValue,
-          onChange: handleChange,
-          onMouseDown: handleMouseDown,
-          onMouseUp: handleMouseUp,
-          onTouchStart: handleMouseDown,
-          onTouchEnd: handleMouseUp,
-          disabled,
-          className: `
-          w-full h-1.5 rounded-full appearance-none cursor-pointer
-          bg-gray-700
-          disabled:opacity-50 disabled:cursor-not-allowed
-          [&::-webkit-slider-thumb]:appearance-none
-          [&::-webkit-slider-thumb]:w-3
-          [&::-webkit-slider-thumb]:h-3
-          [&::-webkit-slider-thumb]:rounded-full
-          [&::-webkit-slider-thumb]:bg-sas-accent
-          [&::-webkit-slider-thumb]:cursor-pointer
-          [&::-webkit-slider-thumb]:transition-transform
-          [&::-webkit-slider-thumb]:hover:scale-110
-          [&::-moz-range-thumb]:w-3
-          [&::-moz-range-thumb]:h-3
-          [&::-moz-range-thumb]:rounded-full
-          [&::-moz-range-thumb]:bg-sas-accent
-          [&::-moz-range-thumb]:border-0
-          [&::-moz-range-thumb]:cursor-pointer
-        `
-        }
-      )
-    }
-  );
-};
-
-// src/components/PanSlider.tsx
-import { useCallback as useCallback2, useState as useState3, useRef as useRef2, useEffect as useEffect2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function toPanDisplay(value) {
-  if (Math.abs(value) < 0.02) {
-    return "Center";
-  }
-  const percent = Math.abs(Math.round(value * 100));
-  return value < 0 ? `L${percent}` : `R${percent}`;
-}
-function useDebouncedCallback2(callback, delay) {
-  const timeoutRef = useRef2(null);
-  const callbackRef = useRef2(callback);
-  useEffect2(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  const debouncedCallback = useCallback2(
-    (...args) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      timeoutRef.current = setTimeout(() => {
-        callbackRef.current(...args);
-      }, delay);
-    },
-    [delay]
-  );
-  useEffect2(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return debouncedCallback;
-}
-var PanSlider = ({
-  value,
-  onChange,
-  disabled = false,
-  className = ""
-}) => {
-  const [localValue, setLocalValue] = useState3(value);
-  const [isDragging, setIsDragging] = useState3(false);
-  useEffect2(() => {
-    if (!isDragging) {
-      setLocalValue(value);
-    }
-  }, [value, isDragging]);
-  const debouncedOnChange = useDebouncedCallback2(onChange, 50);
-  const handleChange = useCallback2(
-    (e) => {
-      const newValue = parseFloat(e.target.value);
-      setLocalValue(newValue);
-      debouncedOnChange(newValue);
-    },
-    [debouncedOnChange]
-  );
-  const handleMouseDown = useCallback2(() => {
-    setIsDragging(true);
-  }, []);
-  const handleMouseUp = useCallback2(() => {
-    setIsDragging(false);
-    onChange(localValue);
-  }, [localValue, onChange]);
-  const handleDoubleClick = useCallback2(() => {
-    setLocalValue(0);
-    onChange(0);
-  }, [onChange]);
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className: `flex items-center ${className}`,
-      title: `Pan: ${toPanDisplay(localValue)}`,
-      children: /* @__PURE__ */ jsx3(
-        "input",
-        {
-          type: "range",
-          min: "-1",
-          max: "1",
-          step: "0.01",
-          value: localValue,
-          onChange: handleChange,
-          onMouseDown: handleMouseDown,
-          onMouseUp: handleMouseUp,
-          onTouchStart: handleMouseDown,
-          onTouchEnd: handleMouseUp,
-          onDoubleClick: handleDoubleClick,
-          disabled,
-          className: `
-          w-full h-1.5 rounded-full appearance-none cursor-pointer
-          bg-gray-700
-          disabled:opacity-50 disabled:cursor-not-allowed
-          [&::-webkit-slider-thumb]:appearance-none
-          [&::-webkit-slider-thumb]:w-3
-          [&::-webkit-slider-thumb]:h-3
-          [&::-webkit-slider-thumb]:rounded-full
-          [&::-webkit-slider-thumb]:bg-sas-accent
-          [&::-webkit-slider-thumb]:cursor-pointer
-          [&::-webkit-slider-thumb]:transition-transform
-          [&::-webkit-slider-thumb]:hover:scale-110
-          [&::-moz-range-thumb]:w-3
-          [&::-moz-range-thumb]:h-3
-          [&::-moz-range-thumb]:rounded-full
-          [&::-moz-range-thumb]:bg-sas-accent
-          [&::-moz-range-thumb]:border-0
-          [&::-moz-range-thumb]:cursor-pointer
-        `
-        }
-      )
-    }
-  );
-};
-
-// src/constants/fx-presets.ts
-var EQ_PRESETS = {
-  presets: [
-    {
-      name: "The Smiley",
-      shortLabel: "SM",
-      params: {
-        "Low-shelf freq": 80,
-        "Low-shelf gain": 4,
-        "Low-shelf Q": 0.5,
-        "Mid freq 1": 500,
-        "Mid gain 1": -3,
-        "Mid Q 1": 0.7,
-        "Mid freq 2": 2e3,
-        "Mid gain 2": -2,
-        "Mid Q 2": 0.7,
-        "High-shelf freq": 12e3,
-        "High-shelf gain": 4,
-        "High-shelf Q": 0.5
-      }
-    },
-    {
-      name: "Telephone",
-      shortLabel: "TP",
-      params: {
-        "Low-shelf freq": 400,
-        "Low-shelf gain": -20,
-        "Low-shelf Q": 1,
-        "Mid freq 1": 1e3,
-        "Mid gain 1": 5,
-        "Mid Q 1": 2,
-        "Mid freq 2": 3e3,
-        "Mid gain 2": -5,
-        "Mid Q 2": 1,
-        "High-shelf freq": 5e3,
-        "High-shelf gain": -20,
-        "High-shelf Q": 1
+    {
+      name: "Telephone",
+      shortLabel: "TP",
+      params: {
+        "Low-shelf freq": 400,
+        "Low-shelf gain": -20,
+        "Low-shelf Q": 1,
+        "Mid freq 1": 1e3,
+        "Mid gain 1": 5,
+        "Mid Q 1": 2,
+        "Mid freq 2": 3e3,
+        "Mid gain 2": -5,
+        "Mid Q 2": 1,
+        "High-shelf freq": 5e3,
+        "High-shelf gain": -20,
+        "High-shelf Q": 1
       }
     },
     {
@@ -715,7 +350,7 @@ var FX_PRESET_CONFIGS = {
 };
 
 // src/components/FxToggleBar.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var FX_COLORS = {
   eq: "bg-blue-500",
   compressor: "bg-orange-500",
@@ -732,14 +367,14 @@ var FxToggleBar = ({
   onDryWetChange,
   disabled = false
 }) => {
-  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-1", "data-testid": "fx-toggle-bar", children: FX_CATEGORIES.map((category) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", "data-testid": "fx-toggle-bar", children: FX_CATEGORIES.map((category) => {
     const detail = fxState[category];
     const isActive = detail.enabled;
     const label = FX_DISPLAY_LABELS[category];
     const activeColor = FX_COLORS[category];
     const config = FX_PRESET_CONFIGS[category];
-    return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
           "data-testid": `fx-toggle-${category}`,
@@ -750,7 +385,7 @@ var FxToggleBar = ({
           children: label
         }
       ),
-      config.presets.map((preset, idx) => /* @__PURE__ */ jsx4(
+      config.presets.map((preset, idx) => /* @__PURE__ */ jsx(
         "button",
         {
           "data-testid": `fx-preset-${category}-${idx}`,
@@ -762,7 +397,7 @@ var FxToggleBar = ({
         },
         idx
       )),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx(
         "input",
         {
           type: "range",
@@ -776,7 +411,7 @@ var FxToggleBar = ({
           title: `Dry/Wet: ${Math.round(detail.dryWet * 100)}%`
         }
       ),
-      /* @__PURE__ */ jsxs2("span", { className: "text-[8px] text-sas-muted/50 w-6 text-right flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[8px] text-sas-muted/50 w-6 text-right flex-shrink-0", children: [
         Math.round(detail.dryWet * 100),
         "%"
       ] })
@@ -784,443 +419,3113 @@ var FxToggleBar = ({
   }) });
 };
 
-// src/components/SorceryProgressBar.tsx
-import { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function calculateTimeBasedTarget(elapsedMs, estimatedDurationMs) {
-  const t = elapsedMs / estimatedDurationMs;
-  if (t <= 0) return 0;
-  if (t <= 1) {
-    return 90 * (1 - Math.pow(1 - t, 2.5));
+// src/components/PianoRollEditor.tsx
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PX_PER_BEAT = 24;
+var ROW_HEIGHT = 12;
+var GUTTER_W = 28;
+var DRAG_DEAD_ZONE = 4;
+var RESIZE_HANDLE_PX = 6;
+var SCROLL_MAX_H = 150;
+var NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+var BLACK_KEYS = /* @__PURE__ */ new Set([1, 3, 6, 8, 10]);
+var SNAP_LABELS = {
+  "2": "1/2",
+  "1": "1/4",
+  "0.5": "1/8",
+  "0.25": "1/16",
+  "0.125": "1/32"
+};
+function clamp(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+function snapLabel(s) {
+  return SNAP_LABELS[String(s)] ?? `${s}`;
+}
+function pitchToName(pitch) {
+  const name = NOTE_NAMES[(pitch % 12 + 12) % 12];
+  const octave = Math.floor(pitch / 12) - 1;
+  return `${name}${octave}`;
+}
+function cellToPx(pitch, startBeat, hi) {
+  return { left: startBeat * PX_PER_BEAT, top: (hi - pitch) * ROW_HEIGHT };
+}
+function pxToCell(localX, localY, hi, snap, bars, beatsPerBar) {
+  const totalBeats = bars * beatsPerBar;
+  const pitch = clamp(hi - Math.floor(localY / ROW_HEIGHT), 0, 127);
+  const rawBeat = localX / PX_PER_BEAT;
+  const snapped = Math.round(rawBeat / snap) * snap;
+  const startBeat = clamp(snapped, 0, Math.max(0, totalBeats - snap));
+  return { pitch, startBeat };
+}
+function resizeNoteDuration(startBeat, localX, snap, bars, beatsPerBar) {
+  const totalBeats = bars * beatsPerBar;
+  const snappedEnd = Math.round(localX / PX_PER_BEAT / snap) * snap;
+  const end = clamp(snappedEnd, startBeat + snap, totalBeats);
+  return end - startBeat;
+}
+function centerScrollTop(pitches, hi, rowCount, viewportH) {
+  if (pitches.length === 0) return 0;
+  const sorted = [...pitches].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  const median = sorted.length % 2 === 1 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+  const medianRowCenterPx = (hi - median) * ROW_HEIGHT + ROW_HEIGHT / 2;
+  const maxScroll = Math.max(0, rowCount * ROW_HEIGHT - viewportH);
+  return clamp(medianRowCenterPx - viewportH / 2, 0, maxScroll);
+}
+function transposeNotes(notes, semitones) {
+  return notes.map((n) => ({ ...n, pitch: clamp(n.pitch + semitones, 0, 127) }));
+}
+function PianoRollEditor({
+  notes,
+  onChange,
+  bars,
+  bpm,
+  beatsPerBar = 4,
+  snap = 0.25,
+  snapOptions = [1, 0.5, 0.25],
+  onSnapChange,
+  minPitch = 36,
+  maxPitch = 84,
+  autoFit = true,
+  onAuditionNote,
+  defaultVelocity = 100,
+  disabled = false,
+  className,
+  testId = "sdk-piano-roll"
+}) {
+  const [snapState, setSnapState] = useState(snap);
+  const gridRef = useRef(null);
+  const scrollRef = useRef(null);
+  const dragRef = useRef(null);
+  const didCenterRef = useRef(false);
+  const { lo, hi } = useMemo(() => {
+    if (autoFit && notes.length > 0) {
+      const ps = notes.map((n) => n.pitch);
+      return {
+        lo: Math.max(0, Math.min(minPitch, Math.min(...ps) - 2)),
+        hi: Math.min(127, Math.max(maxPitch, Math.max(...ps) + 2))
+      };
+    }
+    return { lo: minPitch, hi: maxPitch };
+  }, [autoFit, notes, minPitch, maxPitch]);
+  const rowCount = hi - lo + 1;
+  const totalBeats = bars * beatsPerBar;
+  const gridWidth = totalBeats * PX_PER_BEAT;
+  const gridHeight = rowCount * ROW_HEIGHT;
+  const stateRef = useRef({
+    notes,
+    onChange,
+    snapState,
+    hi,
+    bars,
+    beatsPerBar,
+    defaultVelocity,
+    bpm,
+    onAuditionNote,
+    disabled
+  });
+  stateRef.current = {
+    notes,
+    onChange,
+    snapState,
+    hi,
+    bars,
+    beatsPerBar,
+    defaultVelocity,
+    bpm,
+    onAuditionNote,
+    disabled
+  };
+  const localCoords = useCallback((clientX, clientY) => {
+    const rect = gridRef.current?.getBoundingClientRect();
+    return { x: clientX - (rect?.left ?? 0), y: clientY - (rect?.top ?? 0) };
+  }, []);
+  const handlePointerDown = useCallback((e) => {
+    if (stateRef.current.disabled) return;
+    const target = e.target;
+    const noteEl = target.closest('[data-testid="sdk-pr-note"]');
+    const idxAttr = noteEl?.getAttribute("data-index");
+    const onResizeHandle = idxAttr != null && target.closest("[data-resize-handle]") != null;
+    dragRef.current = {
+      mode: idxAttr == null ? "pending-add" : onResizeHandle ? "pending-resize" : "pending-note",
+      index: idxAttr != null ? Number(idxAttr) : -1,
+      startX: e.clientX,
+      startY: e.clientY
+    };
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+  }, []);
+  const handlePointerMove = useCallback((e) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const dist = Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY);
+    if (dist > DRAG_DEAD_ZONE) {
+      if (drag.mode === "pending-note") drag.mode = "drag";
+      else if (drag.mode === "pending-resize") drag.mode = "resize";
+    }
+    const s = stateRef.current;
+    const { x, y } = localCoords(e.clientX, e.clientY);
+    if (drag.mode === "resize") {
+      const note = s.notes[drag.index];
+      if (!note) return;
+      const durationBeats = resizeNoteDuration(note.startBeat, x, s.snapState, s.bars, s.beatsPerBar);
+      if (durationBeats === note.durationBeats) return;
+      const next2 = s.notes.map((n, i) => i === drag.index ? { ...n, durationBeats } : n);
+      s.onChange(next2);
+      return;
+    }
+    if (drag.mode !== "drag") return;
+    const { pitch, startBeat } = pxToCell(x, y, s.hi, s.snapState, s.bars, s.beatsPerBar);
+    const next = s.notes.map((n, i) => i === drag.index ? { ...n, pitch, startBeat } : n);
+    s.onChange(next);
+  }, [localCoords]);
+  const handlePointerUp = useCallback((e) => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (!drag) return;
+    const s = stateRef.current;
+    if (s.disabled) return;
+    if (drag.mode === "pending-note" || drag.mode === "pending-resize") {
+      s.onChange(s.notes.filter((_, i) => i !== drag.index));
+      return;
+    }
+    if (drag.mode === "pending-add") {
+      const { x, y } = localCoords(e.clientX, e.clientY);
+      const { pitch, startBeat } = pxToCell(x, y, s.hi, s.snapState, s.bars, s.beatsPerBar);
+      const note = {
+        pitch,
+        startBeat,
+        durationBeats: s.snapState,
+        velocity: s.defaultVelocity,
+        channel: 0
+      };
+      s.onChange([...s.notes, note]);
+      s.onAuditionNote?.(pitch, s.defaultVelocity, Math.max(1, s.snapState * (60 / s.bpm) * 1e3));
+    }
+  }, [localCoords]);
+  const handlePointerCancel = useCallback(() => {
+    dragRef.current = null;
+  }, []);
+  const handleOctave = useCallback((delta) => {
+    const s = stateRef.current;
+    if (s.disabled) return;
+    didCenterRef.current = false;
+    s.onChange(transposeNotes(s.notes, delta));
+  }, []);
+  const handleSnapChange = useCallback((e) => {
+    const v = Number(e.target.value);
+    setSnapState(v);
+    onSnapChange?.(v);
+  }, [onSnapChange]);
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (notes.length === 0) {
+      didCenterRef.current = false;
+      return;
+    }
+    if (didCenterRef.current || dragRef.current) return;
+    didCenterRef.current = true;
+    const viewportH = el.clientHeight || SCROLL_MAX_H;
+    el.scrollTop = centerScrollTop(
+      notes.map((n) => n.pitch),
+      hi,
+      rowCount,
+      viewportH
+    );
+  }, [notes, hi, rowCount]);
+  const rows = useMemo(() => {
+    const out = [];
+    for (let p = hi; p >= lo; p--) out.push(p);
+    return out;
+  }, [hi, lo]);
+  const gridBg = useMemo(() => {
+    const beatPx = PX_PER_BEAT;
+    const barPx = PX_PER_BEAT * beatsPerBar;
+    return [
+      `repeating-linear-gradient(to right, transparent 0 ${beatPx - 1}px, rgba(255,255,255,0.06) ${beatPx - 1}px ${beatPx}px)`,
+      `repeating-linear-gradient(to right, transparent 0 ${barPx - 1}px, rgba(255,255,255,0.16) ${barPx - 1}px ${barPx}px)`,
+      `repeating-linear-gradient(to bottom, transparent 0 ${ROW_HEIGHT - 1}px, rgba(255,255,255,0.04) ${ROW_HEIGHT - 1}px ${ROW_HEIGHT}px)`
+    ].join(", ");
+  }, [beatsPerBar]);
+  const octaveDisabled = disabled || notes.length === 0;
+  return /* @__PURE__ */ jsxs2("div", { className: `flex flex-col gap-1 ${className ?? ""}`, "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", "data-testid": "sdk-pr-toolbar", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "data-testid": "sdk-pr-octave-down",
+          disabled: octaveDisabled,
+          onClick: () => handleOctave(-12),
+          className: "px-1.5 py-0.5 text-[10px] rounded-sm border border-sas-border text-sas-muted hover:text-sas-accent hover:border-sas-accent transition-colors disabled:opacity-40",
+          title: "Octave down (\u221212 semitones)",
+          children: "Oct \u2212"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "data-testid": "sdk-pr-octave-up",
+          disabled: octaveDisabled,
+          onClick: () => handleOctave(12),
+          className: "px-1.5 py-0.5 text-[10px] rounded-sm border border-sas-border text-sas-muted hover:text-sas-accent hover:border-sas-accent transition-colors disabled:opacity-40",
+          title: "Octave up (+12 semitones)",
+          children: "Oct +"
+        }
+      ),
+      /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-1 text-[10px] text-sas-muted/70 ml-1", children: [
+        "Snap",
+        /* @__PURE__ */ jsx2(
+          "select",
+          {
+            "data-testid": "sdk-pr-snap",
+            value: snapState,
+            disabled,
+            onChange: handleSnapChange,
+            className: "sas-input px-1 py-0.5 text-[10px]",
+            children: snapOptions.map((s) => /* @__PURE__ */ jsx2("option", { value: s, children: snapLabel(s) }, s))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("span", { className: "text-[10px] text-sas-muted/60 ml-auto", "data-testid": "sdk-pr-note-count", children: [
+        notes.length,
+        " ",
+        notes.length === 1 ? "note" : "notes"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: scrollRef,
+        className: "overflow-auto border border-sas-border rounded-sm bg-sas-bg",
+        style: { maxHeight: SCROLL_MAX_H },
+        "data-testid": "sdk-pr-scroll",
+        children: /* @__PURE__ */ jsxs2("div", { className: "flex", style: { width: GUTTER_W + gridWidth }, children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              "data-testid": "sdk-pr-gutter",
+              className: "sticky left-0 z-10 flex-shrink-0 bg-sas-panel-alt",
+              style: { width: GUTTER_W },
+              children: rows.map((p) => /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  "data-testid": "sdk-pr-key",
+                  "data-pitch": p,
+                  className: `flex items-center justify-end pr-1 text-[8px] leading-none border-b border-sas-border/30 ${BLACK_KEYS.has((p % 12 + 12) % 12) ? "bg-sas-bg text-sas-muted/40" : "text-sas-muted/70"}`,
+                  style: { height: ROW_HEIGHT },
+                  children: p % 12 === 0 ? pitchToName(p) : ""
+                },
+                p
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              ref: gridRef,
+              "data-testid": "sdk-pr-grid",
+              className: "relative flex-shrink-0",
+              style: {
+                width: gridWidth,
+                height: gridHeight,
+                backgroundImage: gridBg,
+                cursor: disabled ? "not-allowed" : "crosshair",
+                touchAction: "none"
+              },
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerCancel,
+              children: [
+                notes.map((n, i) => {
+                  const { left, top } = cellToPx(n.pitch, n.startBeat, hi);
+                  const width = Math.max(3, n.durationBeats * PX_PER_BEAT);
+                  const handleW = Math.min(RESIZE_HANDLE_PX, width / 2);
+                  return /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      "data-testid": "sdk-pr-note",
+                      "data-index": i,
+                      "data-pitch": n.pitch,
+                      "data-start-beat": n.startBeat,
+                      "data-duration-beats": n.durationBeats,
+                      className: "absolute rounded-[2px] bg-sas-accent/80 border border-sas-accent hover:bg-sas-accent",
+                      style: { left, top, width, height: ROW_HEIGHT },
+                      title: `${pitchToName(n.pitch)} \xB7 beat ${n.startBeat} \xB7 ${n.durationBeats}\u266A \xB7 vel ${n.velocity}`,
+                      children: !disabled && /* @__PURE__ */ jsx2(
+                        "div",
+                        {
+                          "data-resize-handle": "",
+                          "data-testid": "sdk-pr-note-resize",
+                          className: "absolute top-0 right-0 h-full rounded-r-[2px] hover:bg-sas-bg/40",
+                          style: { width: handleW, cursor: "ew-resize" }
+                        }
+                      )
+                    },
+                    i
+                  );
+                }),
+                notes.length === 0 && /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    "data-testid": "sdk-pr-empty",
+                    className: "absolute inset-0 flex items-center justify-center text-[10px] text-sas-muted/50 pointer-events-none",
+                    children: "No notes \u2014 click to add"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/TrackDrawer.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TAB_LABELS = {
+  fx: "FX",
+  pick: "Pick",
+  history: "History",
+  import: "Import",
+  edit: "Edit"
+};
+function TrackDrawer({
+  activeTab,
+  onTabChange,
+  trackId,
+  fxState,
+  onFxToggle,
+  onFxPresetChange,
+  onFxDryWetChange,
+  fxDisabled = false,
+  instruments = [],
+  currentPluginId = null,
+  isLoading = false,
+  onSelect,
+  onRefresh,
+  editorStage = false,
+  onShowEditor,
+  onBackToInstruments,
+  selectedInstrumentName,
+  soundHistory,
+  soundHistoryCursor = -1,
+  onRestoreSound,
+  onToggleFavorite,
+  onImportSound,
+  importSoundLabel,
+  editNotes,
+  onNotesChange,
+  editBars,
+  editBpm,
+  editSnap,
+  onAuditionNote
+}) {
+  const [search, setSearch] = useState2("");
+  const fxEnabled = !!onFxToggle;
+  const pickEnabled = !!onSelect;
+  const historyEnabled = !!onRestoreSound;
+  const importEnabled = !!onImportSound;
+  const editEnabled = !!onNotesChange;
+  const enabledTabs = useMemo2(() => {
+    const tabs = [];
+    if (fxEnabled) tabs.push("fx");
+    if (pickEnabled) tabs.push("pick");
+    if (historyEnabled) tabs.push("history");
+    if (importEnabled) tabs.push("import");
+    if (editEnabled) tabs.push("edit");
+    return tabs;
+  }, [fxEnabled, pickEnabled, historyEnabled, importEnabled, editEnabled]);
+  const SURGE_XT_DEFAULT_ID = "Surge XT";
+  const filtered = useMemo2(() => {
+    let all = instruments.filter((i) => i.name !== "Surge XT");
+    if (search.trim()) {
+      const q = search.toLowerCase();
+      all = all.filter(
+        (i) => i.name.toLowerCase().includes(q) || i.manufacturer.toLowerCase().includes(q)
+      );
+    }
+    if (currentPluginId) {
+      const selectedIdx = all.findIndex((i) => i.pluginId === currentPluginId);
+      if (selectedIdx > 0) {
+        const [selected] = all.splice(selectedIdx, 1);
+        all.unshift(selected);
+      }
+    }
+    return all;
+  }, [instruments, search, currentPluginId]);
+  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(
+    "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(
+        "button",
+        {
+          type: "button",
+          "data-testid": `sdk-drawer-tab-${tab}`,
+          onClick: () => onTabChange?.(tab),
+          className: tabClass(effectiveTab === tab),
+          children: tab === "history" && history.length > 0 ? `History (${history.length})` : TAB_LABELS[tab]
+        },
+        tab
+      ))
+    }
+  ) : 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: [
+    strip,
+    currentSound && /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: "text-[10px] text-sas-muted/60 truncate px-0.5",
+        title: currentSound,
+        children: currentSound
+      }
+    )
+  ] }) : null;
+  if (effectiveTab === "edit") {
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-edit", children: [
+      header,
+      /* @__PURE__ */ jsx3(
+        PianoRollEditor,
+        {
+          notes: editNotes ?? [],
+          onChange: onNotesChange ?? (() => {
+          }),
+          bars: editBars ?? 4,
+          bpm: editBpm ?? 120,
+          snap: editSnap,
+          onAuditionNote
+        }
+      )
+    ] });
   }
-  const overshootRatio = (elapsedMs - estimatedDurationMs) / estimatedDurationMs;
-  return 90 + 5 * (1 - Math.exp(-overshootRatio * 3));
+  if (effectiveTab === "fx") {
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", "data-testid": "sdk-drawer-fx", children: [
+      header,
+      /* @__PURE__ */ jsx3(
+        FxToggleBar,
+        {
+          trackId,
+          fxState,
+          onToggle: (_t, category, enabled) => onFxToggle?.(category, enabled),
+          onPresetChange: (_t, category, presetIndex) => onFxPresetChange?.(category, presetIndex),
+          onDryWetChange: (_t, category, value) => onFxDryWetChange?.(category, value),
+          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: [
+      header,
+      /* @__PURE__ */ jsxs3("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(
+        "button",
+        {
+          type: "button",
+          "data-testid": "sdk-drawer-import-sound",
+          onClick: onImportSound,
+          className: "w-full px-2 py-1.5 text-[11px] rounded-sm border border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent transition-colors",
+          title: "Copy a sound from a track in another scene (ignores contract)",
+          children: [
+            "\u21EA ",
+            importSoundLabel ?? "Import Sound"
+          ]
+        }
+      )
+    ] });
+  }
+  if (effectiveTab === "history") {
+    const order = history.map((_, i) => i).reverse();
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+      header,
+      history.length === 0 ? /* @__PURE__ */ jsx3(
+        "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(
+        "ul",
+        {
+          className: "flex flex-col gap-1 max-h-[160px] overflow-y-auto",
+          "data-testid": "sdk-history-list",
+          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(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": "sdk-history-entry",
+                  disabled: isCurrent,
+                  onClick: () => onRestoreSound?.(i),
+                  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" })
+                  ]
+                }
+              ),
+              onToggleFavorite && /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": "sdk-history-favorite",
+                  onClick: () => onToggleFavorite(i),
+                  className: `flex-shrink-0 px-1 py-0.5 text-sm leading-none transition-colors ${entry.favorite ? "text-yellow-400" : "text-sas-muted/40 hover:text-yellow-400"}`,
+                  title: entry.favorite ? "Unfavorite" : "Favorite (keeps it from being evicted)",
+                  children: entry.favorite ? "\u2605" : "\u2606"
+                }
+              )
+            ] }, i);
+          })
+        }
+      )
+    ] });
+  }
+  if (effectiveTab === "pick" && editorStage) {
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+      header,
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => onBackToInstruments?.(),
+            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",
+            children: "\u2190 Back"
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { className: "text-xs text-sas-muted font-medium truncate flex-1", children: selectedInstrumentName ?? "Plugin" })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: () => onShowEditor?.(),
+          className: "w-full py-2 text-xs font-medium rounded-sm border border-sas-accent bg-sas-accent/20 text-sas-accent hover:bg-sas-accent/40 transition-colors",
+          children: "Open Plugin Editor"
+        }
+      )
+    ] });
+  }
+  const isDefaultSelected = currentPluginId === null;
+  const isSelected = (pluginId) => pluginId === currentPluginId;
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+    header,
+    /* @__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 instruments...",
+          className: "sas-input flex-1 px-2 py-1 text-xs"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: () => onRefresh?.(),
+          disabled: isLoading,
+          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: isLoading ? "..." : "Refresh"
+        }
+      )
+    ] }),
+    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(
+        "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: [
+              isDefaultSelected && "\u2713 ",
+              "Surge XT"
+            ] }),
+            /* @__PURE__ */ jsx3("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(
+          "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: [
+                selected && "\u2713 ",
+                inst.name
+              ] }),
+              /* @__PURE__ */ jsx3("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" })
+    ] })
+  ] });
+}
+
+// src/components/ConfirmDialog.tsx
+import { useRef as useRef2 } from "react";
+
+// src/components/Modal.tsx
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Modal({
+  open,
+  onClose,
+  children,
+  testIdPrefix = "modal",
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  initialFocusRef
+}) {
+  useEffect(() => {
+    if (!open) return void 0;
+    const onKey = (e) => {
+      if (closeOnEscape && e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    initialFocusRef?.current?.focus();
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, closeOnEscape, initialFocusRef]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "fixed inset-0 z-[1000] flex items-center justify-center bg-black/60",
+        "data-testid": `${testIdPrefix}-overlay`,
+        onClick: closeOnBackdrop ? onClose : void 0,
+        children
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/ConfirmDialog.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = "Delete",
+  cancelLabel = "Cancel",
+  destructive = true,
+  onConfirm,
+  onCancel,
+  testIdPrefix = "confirm-dialog"
+}) {
+  const cancelRef = useRef2(null);
+  return /* @__PURE__ */ jsx5(Modal, { open, onClose: onCancel, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "w-[360px] max-w-[90vw] flex flex-col rounded-md border border-sas-border bg-sas-panel shadow-xl",
+      onClick: (e) => e.stopPropagation(),
+      role: "dialog",
+      "aria-modal": "true",
+      "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(
+          "div",
+          {
+            className: "px-4 py-3 text-xs text-sas-muted leading-relaxed break-words",
+            "data-testid": `${testIdPrefix}-message`,
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-2 px-4 py-3 border-t border-sas-border", children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              ref: cancelRef,
+              type: "button",
+              className: "px-3 py-1 rounded-sm text-xs font-medium border border-sas-border bg-sas-panel-alt text-sas-text hover:border-sas-accent hover:text-sas-accent transition-colors",
+              onClick: onCancel,
+              "data-testid": `${testIdPrefix}-cancel`,
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: `px-3 py-1 rounded-sm text-xs font-medium border transition-colors ${destructive ? "border-sas-danger bg-sas-danger/20 text-sas-danger hover:bg-sas-danger hover:text-sas-bg" : "border-sas-accent bg-sas-accent/20 text-sas-accent hover:bg-sas-accent hover:text-sas-bg"}`,
+              onClick: onConfirm,
+              "data-testid": `${testIdPrefix}-confirm`,
+              children: confirmLabel
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/LevelMeter.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var COLOR_GREEN = "#2BD576";
+var COLOR_ORANGE = "#F5A623";
+var COLOR_RED = "#FF4D5E";
+var COLOR_TRACK_BG = "#121822";
+var COLOR_TRACK_BORDER = "#1F2A3A";
+var COLOR_SEGMENT_GAP = "#0A0E14";
+var COLOR_PEAK = "#F7FFFB";
+var METER_GRADIENT = `linear-gradient(90deg, ${COLOR_GREEN} 0%, ${COLOR_GREEN} 45%, ${COLOR_ORANGE} 72%, ${COLOR_RED} 90%, ${COLOR_RED} 100%)`;
+var SEGMENTS = 22;
+var SEGMENT_GAP_PX = 2;
+function dbToPct(db) {
+  return Math.max(0, Math.min(100, (db + 60) / 60 * 100));
+}
+var LevelMeter = ({
+  peakDb,
+  active,
+  peakHoldDb,
+  clipped,
+  onClearClip,
+  compact = false,
+  className,
+  "data-testid": testId
+}) => {
+  const id = testId ?? "sas-level-meter";
+  const widthPct = active ? dbToPct(peakDb) : 0;
+  const showPeak = peakHoldDb != null && active && peakHoldDb > -60;
+  const peakHoldPct = showPeak ? dbToPct(peakHoldDb) : 0;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `sas-level-meter ${className ?? ""}`,
+      "data-testid": id,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: compact ? 0 : 6
+      },
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              position: "relative",
+              flex: 1,
+              height: compact ? 5 : 7,
+              background: COLOR_TRACK_BG,
+              border: `1px solid ${COLOR_TRACK_BORDER}`,
+              borderRadius: 2,
+              overflow: "hidden",
+              minWidth: compact ? 0 : 60
+            },
+            children: [
+              /* @__PURE__ */ jsx6("div", { style: { position: "absolute", inset: 0, background: METER_GRADIENT } }),
+              /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    left: `${widthPct}%`,
+                    right: 0,
+                    background: COLOR_TRACK_BG,
+                    transition: "left 30ms linear"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  "data-testid": `${id}-segments`,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    pointerEvents: "none",
+                    backgroundImage: `linear-gradient(90deg, transparent 0, transparent calc(100% - ${SEGMENT_GAP_PX}px), ${COLOR_SEGMENT_GAP} calc(100% - ${SEGMENT_GAP_PX}px), ${COLOR_SEGMENT_GAP} 100%)`,
+                    backgroundSize: `calc(100% / ${SEGMENTS}) 100%`
+                  }
+                }
+              ),
+              showPeak && /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  "data-testid": `${id}-peak`,
+                  style: {
+                    position: "absolute",
+                    top: -1,
+                    bottom: -1,
+                    left: `${peakHoldPct}%`,
+                    width: 2,
+                    marginLeft: -1,
+                    background: COLOR_PEAK,
+                    boxShadow: "0 0 4px rgba(247, 255, 251, 0.7)",
+                    transition: "left 80ms linear"
+                  },
+                  title: "Peak"
+                }
+              )
+            ]
+          }
+        ),
+        !compact && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            style: {
+              fontSize: 10,
+              color: "var(--sas-muted, #888)",
+              fontVariantNumeric: "tabular-nums",
+              minWidth: 48,
+              textAlign: "right"
+            },
+            children: active && peakDb > -120 ? `${peakDb.toFixed(0)} dB` : "\u2014"
+          }
+        ),
+        clipped && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "data-testid": `${id}-clip`,
+            onClick: onClearClip,
+            style: {
+              padding: "1px 5px",
+              fontSize: 9,
+              fontWeight: "bold",
+              background: COLOR_RED,
+              color: "#0A0E14",
+              borderRadius: 2,
+              cursor: onClearClip ? "pointer" : "default",
+              marginLeft: compact ? 3 : 0
+            },
+            title: onClearClip ? "Clipped \u2014 click to clear" : "Clipped",
+            children: "CLIP"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/hooks/useTrackLevels.ts
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+var POLL_INTERVAL_MS = 33;
+var HIDDEN_RECHECK_MS = 250;
+var METER_FLOOR_DB = -120;
+var PEAK_HOLD_MS = 1500;
+var PEAK_DECAY_DB_PER_SEC = 24;
+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);
+  if (handleRef.current === null) {
+    handleRef.current = {
+      getLevel: (trackId) => mapRef.current.get(trackId) ?? null,
+      subscribe: (listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+          listenersRef.current.delete(listener);
+        };
+      }
+    };
+  }
+  useEffect2(() => {
+    const notify = () => {
+      listenersRef.current.forEach((l) => l());
+    };
+    const clearToIdle = () => {
+      if (mapRef.current.size > 0) {
+        mapRef.current.clear();
+        notify();
+      }
+    };
+    const canPoll = enabled && !!host && typeof host.getTrackLevels === "function";
+    if (!canPoll) {
+      clearToIdle();
+      return;
+    }
+    let stopped = false;
+    let timer = null;
+    const schedule = (delay) => {
+      if (stopped) return;
+      timer = setTimeout(tick, delay);
+    };
+    const tick = async () => {
+      if (stopped) return;
+      if (isHidden()) {
+        schedule(HIDDEN_RECHECK_MS);
+        return;
+      }
+      try {
+        const levels = await host.getTrackLevels();
+        if (stopped) return;
+        const seen = /* @__PURE__ */ new Set();
+        for (const lvl of levels) {
+          mapRef.current.set(lvl.trackId, lvl);
+          seen.add(lvl.trackId);
+        }
+        for (const key of Array.from(mapRef.current.keys())) {
+          if (!seen.has(key)) mapRef.current.delete(key);
+        }
+        notify();
+      } catch {
+      }
+      schedule(POLL_INTERVAL_MS);
+    };
+    const onVisibility = () => {
+      if (stopped) return;
+      if (!isHidden()) {
+        if (timer) clearTimeout(timer);
+        void tick();
+      }
+    };
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", onVisibility);
+    }
+    void tick();
+    return () => {
+      stopped = true;
+      if (timer) clearTimeout(timer);
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", onVisibility);
+      }
+    };
+  }, [host, enabled]);
+  return handleRef.current;
+}
+function sameLevel(a, b) {
+  if (a === b) return true;
+  if (a === null || b === null) return false;
+  return a.peakDb === b.peakDb && a.clipped === b.clipped;
+}
+function useTrackLevel(handle, trackId) {
+  const [level, setLevel] = useState3(null);
+  useEffect2(() => {
+    if (!handle) {
+      setLevel(null);
+      return;
+    }
+    const update = () => {
+      const next = handle.getLevel(trackId);
+      setLevel((prev) => sameLevel(prev, next) ? prev : next);
+    };
+    update();
+    return handle.subscribe(update);
+  }, [handle, trackId]);
+  return level;
+}
+var IDLE_METER_VIEW = {
+  peakDb: METER_FLOOR_DB,
+  peakHoldDb: METER_FLOOR_DB,
+  clipped: false,
+  active: false
+};
+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(() => {
+    if (!handle) {
+      heldDbRef.current = METER_FLOOR_DB;
+      lastTickRef.current = 0;
+      setView(IDLE_METER_VIEW);
+      return;
+    }
+    const update = () => {
+      const level = handle.getLevel(trackId);
+      const now = performance.now();
+      const dtSec = lastTickRef.current ? Math.max(0, (now - lastTickRef.current) / 1e3) : 0;
+      lastTickRef.current = now;
+      if (level === null) {
+        heldDbRef.current = METER_FLOOR_DB;
+        setView((prev) => sameMeter(prev, IDLE_METER_VIEW) ? prev : IDLE_METER_VIEW);
+        return;
+      }
+      const p = level.peakDb;
+      if (p >= heldDbRef.current) {
+        heldDbRef.current = p;
+        heldAtRef.current = now;
+      } else if (now - heldAtRef.current > PEAK_HOLD_MS) {
+        heldDbRef.current = Math.max(p, heldDbRef.current - PEAK_DECAY_DB_PER_SEC * dtSec);
+      }
+      const next = {
+        peakDb: p,
+        peakHoldDb: heldDbRef.current,
+        clipped: level.clipped,
+        active: true
+      };
+      setView((prev) => sameMeter(prev, next) ? prev : next);
+    };
+    update();
+    return handle.subscribe(update);
+  }, [handle, trackId]);
+  return view;
+}
+function useTransportPlaying(host) {
+  const [playing, setPlaying] = useState3(false);
+  useEffect2(() => {
+    if (!host) {
+      setPlaying(false);
+      return;
+    }
+    let cancelled = false;
+    host.getTransportState().then((state) => {
+      if (!cancelled) setPlaying(!!state.isPlaying);
+    }).catch(() => {
+    });
+    const unsub = host.onTransportEvent?.((evt) => {
+      if (typeof evt.isPlaying === "boolean") {
+        setPlaying(evt.isPlaying);
+      } else if (evt.type === "play") {
+        setPlaying(true);
+      } else if (evt.type === "stop" || evt.type === "pause") {
+        setPlaying(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+      unsub?.();
+    };
+  }, [host]);
+  return playing;
+}
+
+// src/components/TrackMeterStrip.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TrackMeterStrip = ({
+  levels,
+  trackId,
+  roundBottom = true,
+  className
+}) => {
+  const meter = useTrackMeter(levels, trackId);
+  return /* @__PURE__ */ jsx7(
+    "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(
+        LevelMeter,
+        {
+          compact: true,
+          active: meter.active,
+          peakDb: meter.peakDb,
+          peakHoldDb: meter.peakHoldDb,
+          clipped: meter.clipped,
+          "data-testid": `sdk-track-meter-bar-${trackId}`
+        }
+      )
+    }
+  );
+};
+
+// src/components/VolumeSlider.tsx
+import { useCallback as useCallback2, useState as useState4, useRef as useRef4, useEffect as useEffect3 } from "react";
+
+// src/utils/volume-conversion.ts
+var SLIDER_UNITY = 0.75;
+var DB_MAX = 6;
+var DB_MIN = -60;
+var EXPONENT = Math.log(Math.pow(10, DB_MAX / 20)) / Math.log(1 / SLIDER_UNITY);
+function sliderToDb(slider) {
+  if (slider <= 0) return DB_MIN;
+  const gain = Math.pow(slider / SLIDER_UNITY, EXPONENT);
+  const db = 20 * Math.log10(gain);
+  return Math.max(DB_MIN, Math.min(DB_MAX, db));
+}
+function dbToSlider(db) {
+  if (db <= DB_MIN) return 0;
+  if (db >= DB_MAX) return 1;
+  const gain = Math.pow(10, db / 20);
+  const slider = SLIDER_UNITY * Math.pow(gain, 1 / EXPONENT);
+  return Math.min(1, Math.max(0, slider));
+}
+
+// src/components/VolumeSlider.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function formatDb(value) {
+  const db = sliderToDb(value);
+  if (db <= -60) return "-\u221E dB";
+  const sign = db >= 0 ? "+" : "";
+  return `${sign}${db.toFixed(1)} dB`;
+}
+function useDebouncedCallback(callback, delay) {
+  const timeoutRef = useRef4(null);
+  const callbackRef = useRef4(callback);
+  useEffect3(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  const debouncedCallback = useCallback2(
+    (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+  useEffect3(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return debouncedCallback;
+}
+var VolumeSlider = ({
+  value,
+  onChange,
+  disabled = false,
+  className = ""
+}) => {
+  const [localValue, setLocalValue] = useState4(value);
+  const [isDragging, setIsDragging] = useState4(false);
+  useEffect3(() => {
+    if (!isDragging) {
+      setLocalValue(value);
+    }
+  }, [value, isDragging]);
+  const debouncedOnChange = useDebouncedCallback(onChange, 50);
+  const handleChange = useCallback2(
+    (e) => {
+      const newValue = parseFloat(e.target.value);
+      setLocalValue(newValue);
+      debouncedOnChange(newValue);
+    },
+    [debouncedOnChange]
+  );
+  const handleMouseDown = useCallback2(() => {
+    setIsDragging(true);
+  }, []);
+  const handleMouseUp = useCallback2(() => {
+    setIsDragging(false);
+    onChange(localValue);
+  }, [localValue, onChange]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: `flex items-center ${className}`,
+      title: `Volume: ${formatDb(localValue)}`,
+      children: /* @__PURE__ */ jsx8(
+        "input",
+        {
+          type: "range",
+          min: "0",
+          max: "1",
+          step: "0.01",
+          value: localValue,
+          onChange: handleChange,
+          onMouseDown: handleMouseDown,
+          onMouseUp: handleMouseUp,
+          onTouchStart: handleMouseDown,
+          onTouchEnd: handleMouseUp,
+          disabled,
+          className: `
+          w-full h-1.5 rounded-full appearance-none cursor-pointer
+          bg-gray-700
+          disabled:opacity-50 disabled:cursor-not-allowed
+          [&::-webkit-slider-thumb]:appearance-none
+          [&::-webkit-slider-thumb]:w-3
+          [&::-webkit-slider-thumb]:h-3
+          [&::-webkit-slider-thumb]:rounded-full
+          [&::-webkit-slider-thumb]:bg-sas-accent
+          [&::-webkit-slider-thumb]:cursor-pointer
+          [&::-webkit-slider-thumb]:transition-transform
+          [&::-webkit-slider-thumb]:hover:scale-110
+          [&::-moz-range-thumb]:w-3
+          [&::-moz-range-thumb]:h-3
+          [&::-moz-range-thumb]:rounded-full
+          [&::-moz-range-thumb]:bg-sas-accent
+          [&::-moz-range-thumb]:border-0
+          [&::-moz-range-thumb]:cursor-pointer
+        `
+        }
+      )
+    }
+  );
+};
+
+// 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";
+function toPanDisplay(value) {
+  if (Math.abs(value) < 0.02) {
+    return "Center";
+  }
+  const percent = Math.abs(Math.round(value * 100));
+  return value < 0 ? `L${percent}` : `R${percent}`;
+}
+function useDebouncedCallback2(callback, delay) {
+  const timeoutRef = useRef5(null);
+  const callbackRef = useRef5(callback);
+  useEffect4(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  const debouncedCallback = useCallback3(
+    (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+  useEffect4(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return debouncedCallback;
+}
+var PanSlider = ({
+  value,
+  onChange,
+  disabled = false,
+  className = ""
+}) => {
+  const [localValue, setLocalValue] = useState5(value);
+  const [isDragging, setIsDragging] = useState5(false);
+  useEffect4(() => {
+    if (!isDragging) {
+      setLocalValue(value);
+    }
+  }, [value, isDragging]);
+  const debouncedOnChange = useDebouncedCallback2(onChange, 50);
+  const handleChange = useCallback3(
+    (e) => {
+      const newValue = parseFloat(e.target.value);
+      setLocalValue(newValue);
+      debouncedOnChange(newValue);
+    },
+    [debouncedOnChange]
+  );
+  const handleMouseDown = useCallback3(() => {
+    setIsDragging(true);
+  }, []);
+  const handleMouseUp = useCallback3(() => {
+    setIsDragging(false);
+    onChange(localValue);
+  }, [localValue, onChange]);
+  const handleDoubleClick = useCallback3(() => {
+    setLocalValue(0);
+    onChange(0);
+  }, [onChange]);
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: `flex items-center ${className}`,
+      title: `Pan: ${toPanDisplay(localValue)}`,
+      children: /* @__PURE__ */ jsx9(
+        "input",
+        {
+          type: "range",
+          min: "-1",
+          max: "1",
+          step: "0.01",
+          value: localValue,
+          onChange: handleChange,
+          onMouseDown: handleMouseDown,
+          onMouseUp: handleMouseUp,
+          onTouchStart: handleMouseDown,
+          onTouchEnd: handleMouseUp,
+          onDoubleClick: handleDoubleClick,
+          disabled,
+          className: `
+          w-full h-1.5 rounded-full appearance-none cursor-pointer
+          bg-gray-700
+          disabled:opacity-50 disabled:cursor-not-allowed
+          [&::-webkit-slider-thumb]:appearance-none
+          [&::-webkit-slider-thumb]:w-3
+          [&::-webkit-slider-thumb]:h-3
+          [&::-webkit-slider-thumb]:rounded-full
+          [&::-webkit-slider-thumb]:bg-sas-accent
+          [&::-webkit-slider-thumb]:cursor-pointer
+          [&::-webkit-slider-thumb]:transition-transform
+          [&::-webkit-slider-thumb]:hover:scale-110
+          [&::-moz-range-thumb]:w-3
+          [&::-moz-range-thumb]:h-3
+          [&::-moz-range-thumb]:rounded-full
+          [&::-moz-range-thumb]:bg-sas-accent
+          [&::-moz-range-thumb]:border-0
+          [&::-moz-range-thumb]:cursor-pointer
+        `
+        }
+      )
+    }
+  );
+};
+
+// 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";
+function calculateTimeBasedTarget(elapsedMs, estimatedDurationMs) {
+  const t = elapsedMs / estimatedDurationMs;
+  if (t <= 0) return 0;
+  if (t <= 1) {
+    return 90 * (1 - Math.pow(1 - t, 2.5));
+  }
+  const overshootRatio = (elapsedMs - estimatedDurationMs) / estimatedDurationMs;
+  return 90 + 5 * (1 - Math.exp(-overshootRatio * 3));
+}
+function calculateNextProgress(currentProgress) {
+  if (currentProgress < 20) {
+    return currentProgress + Math.random() * 10 + 5;
+  }
+  if (currentProgress < 60) {
+    return currentProgress + Math.random() * 5 + 2;
+  }
+  if (currentProgress < 95) {
+    const remaining = 95 - currentProgress;
+    const increment = remaining * (Math.random() * 0.2 + 0.1);
+    return currentProgress + Math.max(increment, 0.1);
+  }
+  return 95;
+}
+function calculateNextTickInterval(progress) {
+  if (progress < 30) {
+    return Math.random() * 200 + 150;
+  }
+  if (progress < 70) {
+    return Math.random() * 300 + 200;
+  }
+  return Math.random() * 600 + 400;
+}
+var TIME_BASED_TICK_MIN = 200;
+var TIME_BASED_TICK_RANGE = 100;
+function SorceryProgressBar({
+  isLoading,
+  statusText = "CONJURING...",
+  completeText = "COMPLETE",
+  onComplete,
+  heightClass = "h-10",
+  initialProgress = 0,
+  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);
+  onProgressChangeRef.current = onProgressChange;
+  onCompleteRef.current = onComplete;
+  const initialProgressRef = useRef6(initialProgress);
+  initialProgressRef.current = initialProgress;
+  const estimatedDurationMsRef = useRef6(estimatedDurationMs);
+  estimatedDurationMsRef.current = estimatedDurationMs;
+  useEffect5(() => {
+    const wasLoading = isLoadingRef.current;
+    isLoadingRef.current = isLoading;
+    if (isLoading && !wasLoading) {
+      hasStartedRef.current = true;
+      startTimeRef.current = Date.now();
+      const startProgress = initialProgressRef.current > 0 ? initialProgressRef.current : 0;
+      setProgress(startProgress);
+      const duration = estimatedDurationMsRef.current;
+      if (duration && duration > 0) {
+        const tick = () => {
+          setProgress((prev) => {
+            const elapsed = Date.now() - startTimeRef.current;
+            const target = calculateTimeBasedTarget(elapsed, duration);
+            const jitter = (Math.random() - 0.5) * 1;
+            const next = Math.min(Math.max(target + jitter, prev + 0.05), 95);
+            onProgressChangeRef.current?.(next);
+            timerRef.current = setTimeout(tick, TIME_BASED_TICK_MIN + Math.random() * TIME_BASED_TICK_RANGE);
+            return next;
+          });
+        };
+        timerRef.current = setTimeout(tick, TIME_BASED_TICK_MIN);
+      } else {
+        const tick = () => {
+          setProgress((prev) => {
+            if (prev >= 95) {
+              timerRef.current = setTimeout(tick, 1e3);
+              return 95;
+            }
+            const next = Math.min(calculateNextProgress(prev), 95);
+            onProgressChangeRef.current?.(next);
+            const interval = calculateNextTickInterval(next);
+            timerRef.current = setTimeout(tick, interval);
+            return next;
+          });
+        };
+        const firstInterval = calculateNextTickInterval(startProgress);
+        timerRef.current = setTimeout(tick, firstInterval);
+      }
+    } else if (!isLoading && wasLoading && hasStartedRef.current) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setProgress(100);
+      onProgressChangeRef.current?.(100);
+      onCompleteRef.current?.();
+      hasStartedRef.current = false;
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [isLoading]);
+  if (!isLoading && progress === 0) {
+    return null;
+  }
+  const displayProgress = Math.floor(progress);
+  const isComplete = !isLoading && progress === 100;
+  const transitionDuration = progress < 50 ? "300ms" : progress < 80 ? "500ms" : "700ms";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `relative w-full ${heightClass} bg-sas-panel-alt border border-sas-border rounded-sm overflow-hidden shadow-inner`,
+      children: [
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: `
+          h-full
+          bg-gradient-to-r from-sas-accent/70 to-sas-accent
+          shadow-glow-soft
+          sorcery-progress-fill
+          animate-progress-stripes
+          ${progress > 70 ? "animate-progress-pulse" : ""}
+          transition-all ease-out
+        `,
+            style: {
+              width: `${progress}%`,
+              transitionDuration
+            }
+          }
+        ),
+        /* @__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: [
+          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(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none opacity-10",
+            style: {
+              backgroundImage: `repeating-linear-gradient(
+            to bottom,
+            transparent,
+            transparent 2px,
+            rgba(0, 0, 0, 0.3) 2px,
+            rgba(0, 0, 0, 0.3) 4px
+          )`
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TrackRow.tsx
+import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function TrackRow({
+  track,
+  prompt,
+  runtimeState,
+  soloedOut = false,
+  fxDetailState,
+  drawerOpen,
+  drawerTab,
+  onTabChange,
+  isGenerating = false,
+  isAuthenticated = false,
+  error,
+  hasMidi = false,
+  generationProgress = 0,
+  estimatedGenerationMs = 15e3,
+  onPromptChange,
+  onGenerate,
+  onShuffle,
+  onCopy,
+  onDelete,
+  contentSlot,
+  onMuteToggle,
+  onSoloToggle,
+  onVolumeChange,
+  onPanChange,
+  onFxToggle,
+  onFxPresetChange,
+  onFxDryWetChange,
+  onToggleFxDrawer,
+  onProgressChange,
+  accentColor = "#A78BFA",
+  instrumentName,
+  instrumentMissing,
+  onToggleDrawer,
+  availableInstruments,
+  currentInstrumentPluginId,
+  onInstrumentSelect,
+  instrumentsLoading,
+  onRefreshInstruments,
+  editorStage,
+  onShowEditor,
+  onBackToInstruments,
+  soundHistory,
+  soundHistoryCursor,
+  onRestoreSound,
+  onToggleFavorite,
+  onImportSound,
+  importSoundLabel,
+  editNotes,
+  onNotesChange,
+  editBars,
+  editBpm,
+  editSnap,
+  onAuditionNote,
+  drag,
+  levels
+}) {
+  const { muted: isMuted, solo: isSoloed, volume: currentVolume, pan: currentPan } = runtimeState;
+  const [confirmDelete, setConfirmDelete] = React8.useState(false);
+  const needsGeneration = !!(prompt?.trim() && !hasMidi && !isGenerating);
+  const hasFxActive = Object.values(fxDetailState).some(
+    (d) => d.enabled
+  );
+  const fxTabOpen = drawerOpen && drawerTab === "fx";
+  const soundTabOpen = drawerOpen && drawerTab !== "fx";
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && onGenerate) {
+      e.preventDefault();
+      onGenerate();
+    }
+  };
+  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(
+      "div",
+      {
+        "data-testid": "sdk-track-row",
+        className: `relative flex items-stretch gap-1 p-2 ${levels ? "rounded-t-sm" : "rounded-sm"} border w-full overflow-hidden ${borderClass} bg-sas-panel-alt ${drag?.isDragging ? "opacity-40" : ""} ${drag?.isDragTarget ? "ring-2 ring-sas-accent ring-inset" : ""}`,
+        style: {
+          borderLeftColor: needsGeneration ? "#f59e0b" : borderColorStyle,
+          borderLeftWidth: "3px"
+        },
+        children: [
+          drag && /* @__PURE__ */ jsx11(
+            "div",
+            {
+              "data-testid": "sdk-drag-handle",
+              ...drag.handleProps,
+              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 })
+            }
+          ),
+          isGenerating && /* @__PURE__ */ jsx11("div", { className: "absolute left-0 top-0 bottom-0 right-44 z-20", children: /* @__PURE__ */ jsx11(
+            SorceryProgressBar,
+            {
+              isLoading: true,
+              statusText: "CONJURING MIDI...",
+              heightClass: "h-full",
+              initialProgress: generationProgress,
+              onProgressChange,
+              estimatedDurationMs: estimatedGenerationMs
+            }
+          ) }),
+          /* @__PURE__ */ jsxs7(
+            "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(
+                  "input",
+                  {
+                    type: "text",
+                    "data-testid": "sdk-prompt-input",
+                    value: prompt ?? "",
+                    onChange: (e) => onPromptChange(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Describe your part...",
+                    disabled: isGenerating,
+                    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(
+                    VolumeSlider,
+                    {
+                      value: currentVolume,
+                      onChange: onVolumeChange,
+                      disabled: isGenerating,
+                      className: "flex-1 min-w-[40px]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "pan:" }),
+                  /* @__PURE__ */ jsx11(
+                    PanSlider,
+                    {
+                      value: currentPan,
+                      onChange: onPanChange,
+                      disabled: isGenerating,
+                      className: "w-10 flex-shrink-0"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          error && /* @__PURE__ */ jsx11(
+            "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(
+                  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__ */ 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(
+                "button",
+                {
+                  "data-testid": "sdk-generate-button",
+                  onClick: onGenerate,
+                  disabled: !isAuthenticated || isGenerating || !prompt?.trim(),
+                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${!isAuthenticated || isGenerating ? "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed" : needsGeneration ? "bg-amber-500/30 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-sas-bg animate-pulse" : prompt?.trim() ? "bg-sas-accent/20 border-sas-accent text-sas-accent hover:bg-sas-accent hover:text-sas-bg" : "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed"}`,
+                  title: !isAuthenticated ? "Please log in" : isGenerating ? "Generating..." : "Generate MIDI",
+                  children: "Create"
+                }
+              ),
+              onCopy && /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "data-testid": "sdk-copy-button",
+                  onClick: onCopy,
+                  disabled: !hasMidi || isGenerating,
+                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${!hasMidi || isGenerating ? "bg-sas-panel border-sas-border text-sas-muted/30 cursor-not-allowed" : "bg-sas-panel-alt border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
+                  title: hasMidi ? "Duplicate track with different preset" : "Generate MIDI first",
+                  children: "Copy"
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "data-testid": "sdk-mute-button",
+                  onClick: onMuteToggle,
+                  disabled: isGenerating,
+                  className: `px-1.5 py-0.5 text-xs font-bold rounded transition-colors ${isGenerating ? "bg-sas-panel text-sas-muted/50 cursor-not-allowed" : isMuted ? "bg-red-600 text-white" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"}`,
+                  title: isMuted ? "Unmute track" : "Mute track",
+                  children: "M"
+                }
+              ),
+              onDelete && /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "data-testid": "sdk-delete-button",
+                  onClick: () => setConfirmDelete(true),
+                  className: "text-sas-danger/70 hover:text-sas-danger px-1 py-0.5 transition-colors text-sm",
+                  title: "Delete track",
+                  children: "x"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex gap-1 items-center", children: [
+              onShuffle && /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "data-testid": "sdk-shuffle-button",
+                  onClick: onShuffle,
+                  disabled: !hasMidi || isGenerating || !!currentInstrumentPluginId,
+                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${!hasMidi || isGenerating || !!currentInstrumentPluginId ? "bg-sas-panel border-sas-border text-sas-muted/30 cursor-not-allowed" : "bg-sas-panel-alt border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
+                  title: currentInstrumentPluginId ? "Shuffle only works with default Surge XT" : hasMidi ? "Re-roll sound (keep MIDI)" : "Generate MIDI first",
+                  children: "Shuffle"
+                }
+              ),
+              onToggleFxDrawer && /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "data-testid": "sdk-fx-button",
+                  onClick: onToggleFxDrawer,
+                  disabled: isGenerating,
+                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${isGenerating ? "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed" : fxTabOpen ? "bg-sas-accent border-sas-accent text-sas-bg" : hasFxActive ? "bg-sas-accent/20 border-sas-accent text-sas-accent hover:bg-sas-accent hover:text-sas-bg" : "bg-sas-panel-alt border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
+                  title: fxTabOpen ? "Hide FX controls" : "Show FX controls",
+                  children: "FX"
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "data-testid": "sdk-solo-button",
+                  onClick: onSoloToggle,
+                  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" : isSoloed ? "bg-yellow-500 text-black" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"}`,
+                  title: isSoloed ? "Unsolo track" : "Solo track",
+                  children: "S"
+                }
+              ),
+              onToggleDrawer && /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "data-testid": "sdk-plugin-button",
+                  onClick: onToggleDrawer,
+                  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 })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    levels && /* @__PURE__ */ jsx11(TrackMeterStrip, { levels, trackId: track.id, roundBottom: !drawerOpen }),
+    drawerOpen && /* @__PURE__ */ jsx11(
+      "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(
+          TrackDrawer,
+          {
+            activeTab: drawerTab,
+            onTabChange,
+            trackId: track.id,
+            fxState: fxDetailState,
+            onFxToggle,
+            onFxPresetChange,
+            onFxDryWetChange,
+            fxDisabled: isGenerating,
+            instruments: availableInstruments,
+            currentPluginId: currentInstrumentPluginId ?? null,
+            isLoading: instrumentsLoading ?? false,
+            onSelect: onInstrumentSelect,
+            onRefresh: onRefreshInstruments,
+            editorStage,
+            onShowEditor,
+            onBackToInstruments,
+            selectedInstrumentName: instrumentName,
+            soundHistory,
+            soundHistoryCursor,
+            onRestoreSound,
+            onToggleFavorite,
+            onImportSound,
+            importSoundLabel,
+            editNotes,
+            onNotesChange,
+            editBars,
+            editBpm,
+            editSnap,
+            onAuditionNote
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ConfirmDialog,
+      {
+        open: confirmDelete,
+        title: "Delete track?",
+        message: /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx11("span", { className: "text-sas-text", children: track.name?.trim() || "This track" }),
+          " will be permanently removed from this scene. This cannot be undone."
+        ] }),
+        confirmLabel: "Delete",
+        onConfirm: () => {
+          setConfirmDelete(false);
+          onDelete?.();
+        },
+        onCancel: () => setConfirmDelete(false),
+        testIdPrefix: "track-delete-confirm"
+      }
+    )
+  ] });
+}
+
+// src/components/CrossfadeTrackRow.tsx
+import React9 from "react";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } 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: [
+      "\xB7 ",
+      layer.soundLabel
+    ] })
+  ] });
+}
+function CrossfadeTrackRow({
+  origin,
+  target,
+  sliderPos = 0.5,
+  onMuteToggle,
+  onSoloToggle,
+  onVolumeChange,
+  onPanChange,
+  onDelete,
+  onSliderChange,
+  levels,
+  accentColor = "#9333EA"
+}) {
+  const [confirmDelete, setConfirmDelete] = React9.useState(false);
+  const renderLayer = (layer, slot, tag) => /* @__PURE__ */ jsx12(
+    TrackRow,
+    {
+      track: { id: layer.trackId, name: "", role: layer.role },
+      runtimeState: layer.runtimeState,
+      fxDetailState: EMPTY_FX_DETAIL_STATE,
+      drawerOpen: false,
+      drawerTab: "fx",
+      levels,
+      accentColor,
+      contentSlot: /* @__PURE__ */ jsx12(LayerCaption, { tag, layer }),
+      onMuteToggle,
+      onSoloToggle,
+      onVolumeChange: (v) => onVolumeChange(slot, v),
+      onPanChange: (p) => onPanChange(slot, p)
+    }
+  );
+  return /* @__PURE__ */ jsxs8(
+    "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(
+            "button",
+            {
+              "data-testid": "crossfade-delete-button",
+              onClick: () => setConfirmDelete(true),
+              className: "text-sas-danger/70 hover:text-sas-danger px-1 transition-colors text-sm",
+              title: "Delete crossfade pair",
+              "aria-label": "Delete crossfade pair",
+              children: "x"
+            }
+          )
+        ] }),
+        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(
+            "span",
+            {
+              className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] text-right flex-shrink-0",
+              title: origin.sourceName ?? origin.name,
+              children: origin.sourceName ?? origin.name
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              type: "range",
+              "data-testid": "crossfade-slider",
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: sliderPos,
+              disabled: !onSliderChange,
+              onChange: onSliderChange ? (e) => onSliderChange(Number(e.target.value)) : void 0,
+              style: { accentColor },
+              className: "flex-1 disabled:opacity-60 disabled:cursor-not-allowed",
+              "aria-label": "Crossfade position"
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "span",
+            {
+              className: "text-[9px] text-sas-muted/60 truncate max-w-[70px] flex-shrink-0",
+              title: target.sourceName ?? target.name,
+              children: target.sourceName ?? target.name
+            }
+          )
+        ] }),
+        renderLayer(target, "target", "Target"),
+        /* @__PURE__ */ jsx12(
+          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." }),
+            confirmLabel: "Delete",
+            onConfirm: () => {
+              setConfirmDelete(false);
+              onDelete();
+            },
+            onCancel: () => setConfirmDelete(false),
+            testIdPrefix: "crossfade-delete-confirm"
+          }
+        )
+      ]
+    }
+  );
 }
-function calculateNextProgress(currentProgress) {
-  if (currentProgress < 20) {
-    return currentProgress + Math.random() * 10 + 5;
-  }
-  if (currentProgress < 60) {
-    return currentProgress + Math.random() * 5 + 2;
+
+// src/crossfade-meta.ts
+var EQUAL_POWER_GAIN = 0.707;
+function asCrossfadeMeta(val) {
+  if (!val || typeof val !== "object") return null;
+  const m = val;
+  if (typeof m.groupId !== "string" || m.slot !== "origin" && m.slot !== "target") return null;
+  if (typeof m.partnerDbId !== "string") return null;
+  return {
+    groupId: m.groupId,
+    slot: m.slot,
+    partnerDbId: m.partnerDbId,
+    sourceTrackDbId: typeof m.sourceTrackDbId === "string" ? m.sourceTrackDbId : "",
+    sourceSceneId: typeof m.sourceSceneId === "string" ? m.sourceSceneId : "",
+    sourceName: typeof m.sourceName === "string" ? m.sourceName : "",
+    soundLabel: typeof m.soundLabel === "string" ? m.soundLabel : "",
+    sliderPos: typeof m.sliderPos === "number" ? m.sliderPos : 0.5
+  };
+}
+function parseCrossfadePairs(sceneData) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const [key, val] of Object.entries(sceneData)) {
+    const match = /^track:(.+):crossfade$/.exec(key);
+    if (!match) continue;
+    const meta = asCrossfadeMeta(val);
+    if (!meta) continue;
+    const dbId = match[1];
+    const g = groups.get(meta.groupId) ?? {};
+    if (meta.slot === "origin") g.origin = { dbId, meta };
+    else g.target = { dbId, meta };
+    groups.set(meta.groupId, g);
   }
-  if (currentProgress < 95) {
-    const remaining = 95 - currentProgress;
-    const increment = remaining * (Math.random() * 0.2 + 0.1);
-    return currentProgress + Math.max(increment, 0.1);
+  const pairs = [];
+  for (const [groupId, g] of groups) {
+    if (!g.origin || !g.target) continue;
+    pairs.push({
+      groupId,
+      sliderPos: g.origin.meta.sliderPos,
+      originDbId: g.origin.dbId,
+      targetDbId: g.target.dbId,
+      originSourceName: g.origin.meta.sourceName,
+      originSoundLabel: g.origin.meta.soundLabel,
+      targetSourceName: g.target.meta.sourceName,
+      targetSoundLabel: g.target.meta.soundLabel
+    });
   }
-  return 95;
+  return pairs;
 }
-function calculateNextTickInterval(progress) {
-  if (progress < 30) {
-    return Math.random() * 200 + 150;
+
+// src/crossfade-inpaint.ts
+var PITCH_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+function round3(n) {
+  return Math.round(n * 1e3) / 1e3;
+}
+function pitchName(p) {
+  return `${PITCH_NAMES[(p % 12 + 12) % 12]}${Math.floor(p / 12) - 1}`;
+}
+function compactNote(n) {
+  return { pitch: n.pitch, startBeat: round3(n.startBeat), durationBeats: round3(n.durationBeats), velocity: n.velocity };
+}
+function summarize(notes, percussive) {
+  if (notes.length === 0) return "empty (no notes)";
+  const span = round3(Math.max(...notes.map((n) => n.startBeat + n.durationBeats)));
+  if (percussive) return `${notes.length} hits, spans ~${span} beats`;
+  const pitches = notes.map((n) => n.pitch);
+  return `${notes.length} notes, ${pitchName(Math.min(...pitches))}\u2013${pitchName(Math.max(...pitches))}, spans ~${span} beats`;
+}
+function gloss(notes, percussive) {
+  const sorted = [...notes].sort((a, b) => a.startBeat - b.startBeat);
+  const maxEnd = Math.max(...sorted.map((n) => n.startBeat + n.durationBeats));
+  const bars = Math.max(1, Math.ceil(maxEnd / 4));
+  const lines = [];
+  for (let b = 0; b < bars; b++) {
+    const inBar = sorted.filter((n) => n.startBeat >= b * 4 && n.startBeat < (b + 1) * 4);
+    if (inBar.length === 0) continue;
+    const body = percussive ? inBar.map((n) => `${round3(n.startBeat)}(v${n.velocity})`).join(" ") : inBar.map((n) => `${pitchName(n.pitch)}@${round3(n.startBeat)}`).join(" ");
+    lines.push(`    Bar ${b + 1}: ${body}`);
   }
-  if (progress < 70) {
-    return Math.random() * 300 + 200;
+  return lines.join("\n");
+}
+function patternBlock(label, name, key, notes, percussive) {
+  const keyLabel = key ? ` in ${key}` : "";
+  const header = `${label} \u2014 "${name}"${keyLabel} (${summarize(notes, percussive)}):`;
+  if (notes.length === 0) return `${header}
+  (no notes \u2014 treat this end as open)`;
+  return `${header}
+${gloss(notes, percussive)}
+    exact JSON: ${JSON.stringify(notes.map(compactNote))}`;
+}
+function buildCrossfadeInpaintPrompt(input) {
+  const { role, bars, originName, targetName, originKey, targetKey, originNotes, targetNotes } = input;
+  const percussive = input.percussive ?? false;
+  const part = role || (percussive ? "drum" : "melodic");
+  const modulation = originKey && targetKey ? originKey === targetKey ? `stays in ${targetKey}` : `modulates from ${originKey} toward ${targetKey}` : "resolves toward the destination key";
+  const lines = [
+    `TASK \u2014 TRANSITION BRIDGE (musical inpainting).`,
+    `Compose a ${part} part that MORPHS from the ORIGIN pattern into the TARGET pattern across the ${bars} bars`,
+    `of this transition. The Key / BPM / chord progression are given above \u2014 it ${modulation}; honour that`,
+    `frame, don't restate it. Each pattern below is shown as a pitch/rhythm gloss for musicality plus its exact`,
+    `JSON; output your bridge in the same JSON note schema (per the system prompt).`,
+    ``,
+    patternBlock("ORIGIN pattern (where the bridge BEGINS)", originName, originKey, originNotes, percussive),
+    ``,
+    patternBlock("TARGET pattern (where the bridge must ARRIVE)", targetName, targetKey, targetNotes, percussive),
+    ``,
+    `Requirements:`,
+    `- The FIRST bar feels continuous with the ORIGIN \u2014 borrow its register, rhythm, and contour so the seam`,
+    `  from the previous scene is seamless.`,
+    `- Across the middle bars, gradually transform toward the TARGET (shift register / rhythm / motifs step by step).`,
+    `- The LAST bar lands on the TARGET's material and resolves onto the destination chord, so the seam into the`,
+    `  next scene is seamless.`,
+    `- Stay within the transition chord progression above; favour chord tones at the bar boundaries.`,
+    `- This is inpainting between two FIXED endpoints \u2014 a listener should not be able to point to where the`,
+    `  origin ends or the target begins.`
+  ];
+  if (originNotes.length === 0 || targetNotes.length === 0) {
+    lines.push(
+      ``,
+      originNotes.length === 0 && targetNotes.length === 0 ? `(Both endpoints are empty \u2014 compose a short ${part} bridge from the chords alone.)` : originNotes.length === 0 ? `(The ORIGIN is empty \u2014 begin sparse and grow INTO the TARGET.)` : `(The TARGET is empty \u2014 begin from the ORIGIN and dissolve toward the destination chord.)`
+    );
   }
-  return Math.random() * 600 + 400;
+  return lines.join("\n");
 }
-var TIME_BASED_TICK_MIN = 200;
-var TIME_BASED_TICK_RANGE = 100;
-function SorceryProgressBar({
-  isLoading,
-  statusText = "CONJURING...",
-  completeText = "COMPLETE",
-  onComplete,
-  heightClass = "h-10",
-  initialProgress = 0,
-  onProgressChange,
-  estimatedDurationMs
+
+// src/components/ImportTrackModal.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState7 } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function ImportTrackModal({
+  host,
+  open,
+  onClose,
+  onImported,
+  title = "Import track from scene (must match contract)",
+  testIdPrefix = "import-track",
+  mode = "track",
+  onPick,
+  onPortTrack
 }) {
-  const [progress, setProgress] = useState4(initialProgress);
-  const timerRef = useRef3(null);
-  const isLoadingRef = useRef3(false);
-  const hasStartedRef = useRef3(false);
-  const startTimeRef = useRef3(0);
-  const onProgressChangeRef = useRef3(onProgressChange);
-  const onCompleteRef = useRef3(onComplete);
-  onProgressChangeRef.current = onProgressChange;
-  onCompleteRef.current = onComplete;
-  const initialProgressRef = useRef3(initialProgress);
-  initialProgressRef.current = initialProgress;
-  const estimatedDurationMsRef = useRef3(estimatedDurationMs);
-  estimatedDurationMsRef.current = estimatedDurationMs;
-  useEffect3(() => {
-    const wasLoading = isLoadingRef.current;
-    isLoadingRef.current = isLoading;
-    if (isLoading && !wasLoading) {
-      hasStartedRef.current = true;
-      startTimeRef.current = Date.now();
-      const startProgress = initialProgressRef.current > 0 ? initialProgressRef.current : 0;
-      setProgress(startProgress);
-      const duration = estimatedDurationMsRef.current;
-      if (duration && duration > 0) {
-        const tick = () => {
-          setProgress((prev) => {
-            const elapsed = Date.now() - startTimeRef.current;
-            const target = calculateTimeBasedTarget(elapsed, duration);
-            const jitter = (Math.random() - 0.5) * 1;
-            const next = Math.min(Math.max(target + jitter, prev + 0.05), 95);
-            onProgressChangeRef.current?.(next);
-            timerRef.current = setTimeout(tick, TIME_BASED_TICK_MIN + Math.random() * TIME_BASED_TICK_RANGE);
-            return next;
-          });
-        };
-        timerRef.current = setTimeout(tick, TIME_BASED_TICK_MIN);
-      } else {
-        const tick = () => {
-          setProgress((prev) => {
-            if (prev >= 95) {
-              timerRef.current = setTimeout(tick, 1e3);
-              return 95;
-            }
-            const next = Math.min(calculateNextProgress(prev), 95);
-            onProgressChangeRef.current?.(next);
-            const interval = calculateNextTickInterval(next);
-            timerRef.current = setTimeout(tick, interval);
-            return next;
-          });
-        };
-        const firstInterval = calculateNextTickInterval(startProgress);
-        timerRef.current = setTimeout(tick, firstInterval);
+  const [load, setLoad] = useState7({ status: "loading" });
+  const [selectedSceneId, setSelectedSceneId] = useState7(null);
+  const [importingTrackId, setImportingTrackId] = useState7(null);
+  const refresh = useCallback4(async () => {
+    if (!host.listImportableTracks) {
+      setLoad({ status: "error", message: "This host does not support importing tracks." });
+      return;
+    }
+    setLoad({ status: "loading" });
+    try {
+      const wantsPort = mode === "track" && !!onPortTrack;
+      const scenes2 = await host.listImportableTracks(wantsPort ? { includeSameScene: true } : void 0);
+      setLoad({ status: "ready", scenes: scenes2 });
+      const sameScene = scenes2.find((s) => s.sameScene);
+      if (sameScene) setSelectedSceneId(sameScene.sceneId);
+    } catch (err) {
+      setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load scenes." });
+    }
+  }, [host, mode, onPortTrack]);
+  useEffect6(() => {
+    if (open) {
+      setSelectedSceneId(null);
+      setImportingTrackId(null);
+      void refresh();
+    }
+  }, [open, refresh]);
+  const handleImport = useCallback4(
+    async (track, sourceSceneId, sceneName, isSameScene) => {
+      if (isSameScene && onPortTrack) {
+        if (!track.importable) return;
+        setImportingTrackId(track.trackId);
+        try {
+          await onPortTrack({ sourceTrackDbId: track.dbId, trackName: track.name, role: track.role });
+          onClose();
+        } catch (err) {
+          host.showToast?.("error", err instanceof Error ? err.message : "Import failed");
+          setImportingTrackId(null);
+        }
+        return;
       }
-    } else if (!isLoading && wasLoading && hasStartedRef.current) {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
+      if (mode === "sound") {
+        setImportingTrackId(track.trackId);
+        try {
+          await onPick?.({ sourceTrackDbId: track.dbId, trackName: track.name, sceneName });
+          onClose();
+        } catch (err) {
+          host.showToast?.("error", err instanceof Error ? err.message : "Import failed");
+          setImportingTrackId(null);
+        }
+        return;
       }
-      setProgress(100);
-      onProgressChangeRef.current?.(100);
-      onCompleteRef.current?.();
-      hasStartedRef.current = false;
-    }
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
+      if (!track.importable || !host.importTrack) return;
+      setImportingTrackId(track.trackId);
+      try {
+        const handle = await host.importTrack({ sourceSceneId, sourceTrackId: track.trackId });
+        onImported(handle);
+        onClose();
+      } catch (err) {
+        host.showToast?.("error", err instanceof Error ? err.message : "Import failed");
+        setImportingTrackId(null);
       }
-    };
-  }, [isLoading]);
-  if (!isLoading && progress === 0) {
-    return null;
-  }
-  const displayProgress = Math.floor(progress);
-  const isComplete = !isLoading && progress === 100;
-  const transitionDuration = progress < 50 ? "300ms" : progress < 80 ? "500ms" : "700ms";
-  return /* @__PURE__ */ jsxs3(
+    },
+    [host, onImported, onClose, mode, onPick, onPortTrack]
+  );
+  if (!open) return null;
+  const scenes = load.status === "ready" ? load.scenes : [];
+  const selectedScene = scenes.find((s) => s.sceneId === selectedSceneId) ?? null;
+  return /* @__PURE__ */ jsx13(Modal, { open, onClose, testIdPrefix, children: /* @__PURE__ */ jsxs9(
     "div",
     {
-      className: `relative w-full ${heightClass} bg-sas-panel-alt border border-sas-border rounded-sm overflow-hidden shadow-inner`,
+      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__ */ jsx5(
-          "div",
-          {
-            className: `
-          h-full
-          bg-gradient-to-r from-sas-accent/70 to-sas-accent
-          shadow-glow-soft
-          sorcery-progress-fill
-          animate-progress-stripes
-          ${progress > 70 ? "animate-progress-pulse" : ""}
-          transition-all ease-out
-        `,
-            style: {
-              width: `${progress}%`,
-              transitionDuration
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-3 py-2 border-b border-sas-border", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+            selectedScene && /* @__PURE__ */ jsx13(
+              "button",
+              {
+                className: "text-sas-muted hover:text-sas-accent text-xs",
+                onClick: () => setSelectedSceneId(null),
+                "data-testid": `${testIdPrefix}-back`,
+                children: "\u2190"
+              }
+            ),
+            /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium text-sas-text", children: selectedScene ? selectedScene.sceneName : title })
+          ] }),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              className: "text-sas-muted hover:text-sas-accent text-sm",
+              onClick: onClose,
+              "data-testid": `${testIdPrefix}-close`,
+              children: "\u2715"
             }
-          }
-        ),
-        /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 flex items-center justify-center", children: isLoading && progress < 100 ? /* @__PURE__ */ jsxs3("span", { className: "font-mono text-xs text-sas-accent font-bold drop-shadow-md tracking-wider", children: [
-          statusText,
+          )
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "overflow-y-auto p-2 flex-1", children: [
+          load.status === "loading" && /* @__PURE__ */ jsx13("div", { className: "py-8 text-center text-xs text-sas-muted", "data-testid": `${testIdPrefix}-loading`, children: "Loading scenes\u2026" }),
+          load.status === "error" && /* @__PURE__ */ jsx13("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__ */ jsx13("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__ */ jsx13("ul", { className: "flex flex-col gap-1", "data-testid": `${testIdPrefix}-scene-list`, children: scenes.map((scene) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsxs9(
+            "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__ */ jsx13("span", { className: "truncate", children: scene.sceneName }),
+                /* @__PURE__ */ jsxs9("span", { className: "text-sas-muted", children: [
+                  scene.tracks.length,
+                  " \u2192"
+                ] })
+              ]
+            }
+          ) }, scene.sceneId)) }),
+          selectedScene && /* @__PURE__ */ jsx13("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__ */ jsx13("li", { children: /* @__PURE__ */ jsxs9(
+              "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"}`,
+                disabled,
+                title: gated ? track.disabledReason : void 0,
+                onClick: () => void handleImport(track, selectedScene.sceneId, selectedScene.sceneName, !!selectedScene.sameScene),
+                "data-testid": `${testIdPrefix}-track`,
+                "data-importable": mode === "sound" || track.importable ? "true" : "false",
+                children: [
+                  /* @__PURE__ */ jsxs9("span", { className: "truncate", children: [
+                    track.name,
+                    track.role ? /* @__PURE__ */ jsxs9("span", { className: "text-sas-muted", children: [
+                      " \xB7 ",
+                      track.role
+                    ] }) : null
+                  ] }),
+                  busy ? /* @__PURE__ */ jsx13("span", { className: "text-sas-muted", children: "\u2026" }) : gated ? /* @__PURE__ */ jsx13("span", { className: "text-sas-muted", children: "\u2298" }) : null
+                ]
+              }
+            ) }, track.dbId);
+          }) })
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/CrossfadeModal.tsx
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef7, useState as useState8 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function CrossfadeModal({
+  host,
+  open,
+  fromSceneId,
+  toSceneId,
+  fromSceneName,
+  toSceneName,
+  onClose,
+  onCreate,
+  testIdPrefix = "crossfade-modal"
+}) {
+  const [load, setLoad] = useState8({ status: "loading" });
+  const [originDbId, setOriginDbId] = useState8("");
+  const [targetDbId, setTargetDbId] = useState8("");
+  const [isCreating, setIsCreating] = useState8(false);
+  const [error, setError] = useState8(null);
+  const cancelRef = useRef7(null);
+  const refresh = useCallback5(async () => {
+    if (!host.listSceneFamilyTracks) {
+      setLoad({ status: "error", message: "This host does not support crossfade tracks." });
+      return;
+    }
+    setLoad({ status: "loading" });
+    try {
+      const [origin, target] = await Promise.all([
+        host.listSceneFamilyTracks(fromSceneId),
+        host.listSceneFamilyTracks(toSceneId)
+      ]);
+      setLoad({ status: "ready", origin, target });
+      setOriginDbId(origin[0]?.dbId ?? "");
+    } catch (err) {
+      setLoad({ status: "error", message: err instanceof Error ? err.message : "Failed to load tracks." });
+    }
+  }, [host, fromSceneId, toSceneId]);
+  useEffect7(() => {
+    if (open) {
+      setError(null);
+      setIsCreating(false);
+      setOriginDbId("");
+      setTargetDbId("");
+      void refresh();
+    }
+  }, [open, refresh]);
+  const originTrack = useMemo3(
+    () => load.status === "ready" ? load.origin.find((t) => t.dbId === originDbId) ?? null : null,
+    [load, originDbId]
+  );
+  const originRole = originTrack?.role;
+  const targetCandidates = useMemo3(() => {
+    if (load.status !== "ready") return [];
+    if (!originRole) return load.target;
+    return load.target.filter((t) => t.role === originRole);
+  }, [load, originRole]);
+  useEffect7(() => {
+    if (!targetCandidates.some((t) => t.dbId === targetDbId)) {
+      setTargetDbId(targetCandidates[0]?.dbId ?? "");
+    }
+  }, [targetCandidates, targetDbId]);
+  const targetTrack = targetCandidates.find((t) => t.dbId === targetDbId) ?? null;
+  const canCreate = !isCreating && !!originTrack && !!targetTrack;
+  const handleClose = useCallback5(() => {
+    if (!isCreating) onClose();
+  }, [isCreating, onClose]);
+  const handleCreate = useCallback5(async () => {
+    if (!originTrack || !targetTrack) return;
+    setIsCreating(true);
+    setError(null);
+    try {
+      await onCreate(
+        { dbId: originTrack.dbId, name: originTrack.name, role: originTrack.role },
+        { dbId: targetTrack.dbId, name: targetTrack.name, role: targetTrack.role }
+      );
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create crossfade.");
+      setIsCreating(false);
+    }
+  }, [originTrack, targetTrack, onCreate, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx14(Modal, { open, onClose: handleClose, testIdPrefix, initialFocusRef: cancelRef, children: /* @__PURE__ */ jsxs10(
+    "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 crossfade" }),
+        /* @__PURE__ */ jsxs10("p", { className: "text-[11px] text-sas-muted leading-relaxed", children: [
+          "Bridge a track from",
           " ",
-          displayProgress,
-          "%"
-        ] }) : isComplete ? /* @__PURE__ */ jsx5("span", { className: "font-mono text-xs text-sas-text font-bold drop-shadow-md tracking-wider", children: completeText }) : null }),
-        /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx14("span", { className: "text-sas-text", children: fromSceneName ?? "the origin scene" }),
+          " into one from",
+          " ",
+          /* @__PURE__ */ jsx14("span", { className: "text-sas-text", children: toSceneName ?? "the target scene" }),
+          ". Both layers share one generated part; each keeps its own preset."
+        ] }),
+        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" && (load.origin.length === 0 ? /* @__PURE__ */ jsx14(
           "div",
           {
-            className: "absolute inset-0 pointer-events-none opacity-10",
-            style: {
-              backgroundImage: `repeating-linear-gradient(
-            to bottom,
-            transparent,
-            transparent 2px,
-            rgba(0, 0, 0, 0.3) 2px,
-            rgba(0, 0, 0, 0.3) 4px
-          )`
+            className: "text-xs text-sas-muted py-4 text-center",
+            "data-testid": `${testIdPrefix}-empty-origin`,
+            children: "No matching tracks in the origin scene. Add one there first."
+          }
+        ) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsxs10("label", { className: "block", children: [
+            /* @__PURE__ */ jsx14("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "Origin (top)" }),
+            /* @__PURE__ */ jsx14(
+              "select",
+              {
+                "data-testid": `${testIdPrefix}-origin-select`,
+                value: originDbId,
+                onChange: (e) => setOriginDbId(e.target.value),
+                disabled: isCreating,
+                className: "sas-input w-full mt-0.5 text-xs",
+                children: load.origin.map((t) => /* @__PURE__ */ jsxs10("option", { value: t.dbId, children: [
+                  t.name,
+                  t.role ? ` \xB7 ${t.role}` : ""
+                ] }, t.dbId))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs10("label", { className: "block", children: [
+            /* @__PURE__ */ jsxs10("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: [
+              "Target (bottom)",
+              originRole ? ` \xB7 ${originRole}` : ""
+            ] }),
+            targetCandidates.length === 0 ? /* @__PURE__ */ jsxs10("div", { className: "text-xs text-sas-danger mt-0.5", "data-testid": `${testIdPrefix}-empty-target`, children: [
+              "No ",
+              originRole ?? "matching",
+              " track in the target scene to crossfade into."
+            ] }) : /* @__PURE__ */ jsx14(
+              "select",
+              {
+                "data-testid": `${testIdPrefix}-target-select`,
+                value: targetDbId,
+                onChange: (e) => setTargetDbId(e.target.value),
+                disabled: isCreating,
+                className: "sas-input w-full mt-0.5 text-xs",
+                children: targetCandidates.map((t) => /* @__PURE__ */ jsxs10("option", { value: t.dbId, children: [
+                  t.name,
+                  t.role ? ` \xB7 ${t.role}` : ""
+                ] }, t.dbId))
+              }
+            )
+          ] })
+        ] })),
+        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(
+            "button",
+            {
+              ref: cancelRef,
+              "data-testid": `${testIdPrefix}-cancel`,
+              onClick: onClose,
+              disabled: isCreating,
+              className: "px-3 py-1 text-xs rounded-sm border border-sas-border text-sas-muted hover:text-sas-text disabled:opacity-50",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              "data-testid": `${testIdPrefix}-confirm`,
+              onClick: handleCreate,
+              disabled: !canCreate,
+              className: `px-3 py-1 text-xs rounded-sm border transition-colors ${canCreate ? "bg-sas-accent/20 border-sas-accent text-sas-accent hover:bg-sas-accent hover:text-sas-bg" : "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed"}`,
+              children: isCreating ? "Generating bridge\u2026" : "Create crossfade"
             }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/DownloadPackButton.tsx
+import { useCallback as useCallback6, useEffect as useEffect8, useState as useState9 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function formatSize(bytes) {
+  if (!bytes || bytes <= 0) return "";
+  const gb = bytes / 1024 ** 3;
+  if (gb >= 1) return `${gb.toFixed(1)} GB`;
+  const mb = bytes / 1024 ** 2;
+  return `${Math.round(mb)} MB`;
+}
+var DownloadPackButton = ({
+  host,
+  packId,
+  displayName,
+  sizeBytes,
+  variant = "compact",
+  onDownloadComplete
+}) => {
+  const [status, setStatus] = useState9("idle");
+  const [progress, setProgress] = useState9(0);
+  const [errorMessage, setErrorMessage] = useState9(null);
+  useEffect8(() => {
+    const unsub = host.onSamplePackProgress(packId, (p) => {
+      setStatus(p.status);
+      setProgress(p.progress);
+      if (p.status === "error") {
+        setErrorMessage(p.message || "Download failed");
+      } else if (p.status === "complete") {
+        setErrorMessage(null);
+        setTimeout(() => onDownloadComplete?.(), 250);
+      } else {
+        setErrorMessage(null);
+      }
+    });
+    return unsub;
+  }, [host, packId, onDownloadComplete]);
+  const handleClick = useCallback6(async () => {
+    if (status !== "idle" && status !== "error") return;
+    try {
+      setStatus("downloading");
+      setProgress(0);
+      setErrorMessage(null);
+      const result = await host.startSamplePackDownload(packId);
+      if (!result.success) {
+        setStatus("error");
+        setErrorMessage(result.error || "Download failed");
+      }
+    } catch (err) {
+      console.error("[DownloadPackButton] start failed:", err);
+      setStatus("error");
+      setErrorMessage(err instanceof Error ? err.message : String(err));
+    }
+  }, [host, packId, status]);
+  const isWorking = status === "downloading" || status === "verifying" || status === "extracting" || status === "installing";
+  const isDisabled = isWorking || status === "complete";
+  const buttonLabel = (() => {
+    switch (status) {
+      case "downloading":
+        return `${progress}%`;
+      case "verifying":
+        return "Verifying...";
+      case "extracting":
+        return "Extracting...";
+      case "installing":
+        return "Installing...";
+      case "complete":
+        return "Done!";
+      case "error":
+        return "Retry";
+      default:
+        return variant === "large" ? `Download ${displayName}${sizeBytes ? ` (${formatSize(sizeBytes)})` : ""}` : "Download";
+    }
+  })();
+  const tooltip = (() => {
+    if (status === "error") return errorMessage || "Download failed. Click to retry.";
+    if (isWorking) return `${buttonLabel} \u2014 ${displayName}`;
+    if (status === "complete") return "Installation complete";
+    return `Download ${displayName}${sizeBytes ? ` (${formatSize(sizeBytes)})` : ""}`;
+  })();
+  const baseClasses = variant === "large" ? "px-4 py-2 text-sm font-medium rounded border transition-colors" : "px-2 py-0.5 text-[10px] uppercase tracking-wide rounded-sm border transition-colors";
+  let className;
+  if (status === "error") {
+    className = `${baseClasses} text-red-400 border-red-400/50 hover:text-red-300 hover:border-red-300`;
+  } else if (status === "complete") {
+    className = `${baseClasses} text-green-400 border-green-400/50`;
+  } else if (isDisabled) {
+    className = `${baseClasses} text-sas-accent border-sas-accent/50 cursor-wait`;
+  } else {
+    className = `${baseClasses} text-sas-muted hover:text-sas-accent border-sas-border hover:border-sas-accent`;
+  }
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsx15(
+      "button",
+      {
+        "data-testid": `download-pack-button-${packId}`,
+        onClick: handleClick,
+        disabled: isDisabled,
+        className,
+        title: tooltip,
+        children: buttonLabel
+      }
+    ),
+    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ jsx15("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
+  ] });
+};
+
+// src/components/SamplePackCTACard.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var SamplePackCTACard = ({
+  host,
+  pack,
+  status,
+  onDownloadComplete
+}) => {
+  if (status === "checking") {
+    return /* @__PURE__ */ jsx16(
+      "div",
+      {
+        "data-testid": `sample-pack-cta-checking-${pack.packId}`,
+        className: "flex items-center justify-center py-16 text-sas-muted text-sm",
+        children: "Checking sample library..."
+      }
+    );
+  }
+  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__ */ jsxs12(
+    "div",
+    {
+      "data-testid": `sample-pack-cta-${pack.packId}`,
+      className: "flex flex-col items-center justify-center py-12 px-6 text-center",
+      children: [
+        /* @__PURE__ */ jsx16("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
+        /* @__PURE__ */ jsx16("div", { className: "text-base text-sas-text mb-1", children: headline }),
+        /* @__PURE__ */ jsx16("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
+        /* @__PURE__ */ jsx16(
+          DownloadPackButton,
+          {
+            host,
+            packId: pack.packId,
+            displayName: pack.displayName,
+            sizeBytes: pack.sizeBytes,
+            variant: "large",
+            onDownloadComplete
           }
         )
       ]
     }
   );
+};
+
+// src/components/WaveformView.tsx
+import { useEffect as useEffect9, useRef as useRef8, useState as useState10 } from "react";
+
+// src/components/waveform.ts
+function computePeaks(audioBuffer, bins, targetSamples) {
+  const { length, numberOfChannels, sampleRate } = audioBuffer;
+  const channels = [];
+  for (let c = 0; c < numberOfChannels; c++) {
+    channels.push(audioBuffer.getChannelData(c));
+  }
+  const totalForBinning = typeof targetSamples === "number" && targetSamples > length ? targetSamples : length;
+  const samplesPerBin = Math.max(1, Math.floor(totalForBinning / bins));
+  const out = new Float32Array(bins * 2);
+  for (let i = 0; i < bins; i++) {
+    const startIdx = i * samplesPerBin;
+    const endIdx = Math.min(length, startIdx + samplesPerBin);
+    if (startIdx >= length) {
+      out[i * 2] = 0;
+      out[i * 2 + 1] = 0;
+      continue;
+    }
+    let mn = Infinity;
+    let mx = -Infinity;
+    for (let j = startIdx; j < endIdx; j++) {
+      let v = 0;
+      for (let c = 0; c < numberOfChannels; c++) {
+        v += channels[c][j];
+      }
+      v /= numberOfChannels;
+      if (v < mn) mn = v;
+      if (v > mx) mx = v;
+    }
+    if (!Number.isFinite(mn)) mn = 0;
+    if (!Number.isFinite(mx)) mx = 0;
+    out[i * 2] = mn;
+    out[i * 2 + 1] = mx;
+  }
+  return { sampleRate, totalSamples: totalForBinning, peaks: out };
+}
+function drawWaveform(canvas, peaks, options = {}) {
+  const dpr = window.devicePixelRatio || 1;
+  const cssWidth = canvas.clientWidth;
+  const cssHeight = canvas.clientHeight;
+  if (cssWidth === 0 || cssHeight === 0) return;
+  canvas.width = Math.floor(cssWidth * dpr);
+  canvas.height = Math.floor(cssHeight * dpr);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.scale(dpr, dpr);
+  ctx.clearRect(0, 0, cssWidth, cssHeight);
+  ctx.fillStyle = options.fillStyle ?? "rgba(255, 255, 255, 0.4)";
+  const bins = peaks.peaks.length / 2;
+  const mid = cssHeight / 2;
+  for (let x = 0; x < cssWidth; x++) {
+    const binIdx = Math.floor(x / cssWidth * bins);
+    const mn = peaks.peaks[binIdx * 2];
+    const mx = peaks.peaks[binIdx * 2 + 1];
+    const yTop = mid - mx * mid;
+    const yBot = mid - mn * mid;
+    ctx.fillRect(x, yTop, 1, Math.max(1, yBot - yTop));
+  }
 }
 
-// src/components/TrackRow.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function TrackRow({
-  track,
-  prompt,
-  runtimeState,
-  fxDetailState,
-  fxDrawerOpen,
-  isGenerating = false,
-  isAuthenticated = false,
-  error,
-  hasMidi = false,
-  generationProgress = 0,
-  estimatedGenerationMs = 15e3,
-  onPromptChange,
-  onGenerate,
-  onShuffle,
-  onCopy,
-  onDelete,
-  contentSlot,
-  onMuteToggle,
-  onSoloToggle,
-  onVolumeChange,
-  onPanChange,
-  onFxToggle,
-  onFxPresetChange,
-  onFxDryWetChange,
-  onToggleFxDrawer,
-  onProgressChange,
-  accentColor = "#A78BFA",
-  instrumentName,
-  instrumentMissing,
-  instrumentDrawerOpen,
-  onToggleInstrumentDrawer,
-  availableInstruments,
-  currentInstrumentPluginId,
-  onInstrumentSelect,
-  instrumentsLoading,
-  onRefreshInstruments,
-  instrumentDrawerStage,
-  onShowEditor,
-  onBackToInstruments
+// src/components/WaveformView.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var WaveformView = ({
+  host,
+  filePath,
+  bins = 256,
+  className,
+  fillStyle,
+  targetSamples
+}) => {
+  const canvasRef = useRef8(null);
+  const [peaks, setPeaks] = useState10(null);
+  useEffect9(() => {
+    let cancelled = false;
+    let audioContext = null;
+    (async () => {
+      try {
+        const bytes = await host.getAudioFileBytes(filePath);
+        if (cancelled) return;
+        const ContextCtor = window.AudioContext ?? window.webkitAudioContext;
+        audioContext = new ContextCtor();
+        const audioBuffer = await audioContext.decodeAudioData(bytes.slice(0));
+        if (cancelled) return;
+        const computed = computePeaks(audioBuffer, bins, targetSamples);
+        setPeaks(computed);
+      } catch (err) {
+        console.warn("[WaveformView] failed to decode", filePath, err);
+      } finally {
+        if (audioContext) {
+          audioContext.close().catch(() => {
+          });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [host, filePath, bins, targetSamples]);
+  useEffect9(() => {
+    if (!peaks) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    drawWaveform(canvas, peaks, fillStyle ? { fillStyle } : void 0);
+    const observer = new ResizeObserver(() => {
+      drawWaveform(canvas, peaks, fillStyle ? { fillStyle } : void 0);
+    });
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, [peaks, fillStyle]);
+  return /* @__PURE__ */ jsx17(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-testid": "waveform-view",
+      className: className ?? "w-full h-10"
+    }
+  );
+};
+
+// src/components/ScrollingWaveform.tsx
+import { useEffect as useEffect10, useRef as useRef9 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ScrollingWaveform = ({
+  getPeakDb,
+  active,
+  columns = 256,
+  className,
+  fillStyle
+}) => {
+  const canvasRef = useRef9(null);
+  const ringRef = useRef9(new Float32Array(columns));
+  const writeIdxRef = useRef9(0);
+  const rafRef = useRef9(null);
+  useEffect10(() => {
+    if (ringRef.current.length !== columns) {
+      const next = new Float32Array(columns);
+      const prev = ringRef.current;
+      const copyLen = Math.min(prev.length, columns);
+      for (let i = 0; i < copyLen; i++) {
+        next[i] = prev[i];
+      }
+      ringRef.current = next;
+      writeIdxRef.current = writeIdxRef.current % columns;
+    }
+  }, [columns]);
+  useEffect10(() => {
+    if (!active) {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      return;
+    }
+    const tick = () => {
+      const peakDb = getPeakDb();
+      const amp = peakDb <= -120 ? 0 : Math.max(0, Math.min(1, (peakDb + 60) / 60));
+      const ring = ringRef.current;
+      ring[writeIdxRef.current] = amp;
+      writeIdxRef.current = (writeIdxRef.current + 1) % ring.length;
+      const canvas = canvasRef.current;
+      if (canvas) {
+        const dpr = window.devicePixelRatio || 1;
+        const cssW = canvas.clientWidth;
+        const cssH = canvas.clientHeight;
+        if (cssW > 0 && cssH > 0) {
+          if (canvas.width !== Math.floor(cssW * dpr) || canvas.height !== Math.floor(cssH * dpr)) {
+            canvas.width = Math.floor(cssW * dpr);
+            canvas.height = Math.floor(cssH * dpr);
+          }
+          const ctx = canvas.getContext("2d");
+          if (ctx) {
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, cssW, cssH);
+            ctx.fillStyle = fillStyle ?? "#6af2c5";
+            const mid = cssH / 2;
+            const cols = ring.length;
+            const colW = cssW / cols;
+            const start = writeIdxRef.current;
+            for (let x = 0; x < cols; x++) {
+              const ringIdx = (start + x) % cols;
+              const a = ring[ringIdx];
+              const half = a * mid;
+              ctx.fillRect(x * colW, mid - half, Math.max(1, colW), Math.max(1, half * 2));
+            }
+          }
+        }
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [active, getPeakDb, fillStyle]);
+  return /* @__PURE__ */ jsx18(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-testid": "scrolling-waveform",
+      className: className ?? "w-full h-12"
+    }
+  );
+};
+
+// src/components/OffsetScrubber.tsx
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo4, useRef as useRef10, useState as useState11 } from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var SLIDER_HEIGHT_PX = 28;
+var TICK_HEIGHT_PX = 14;
+var DOWNBEAT_TICK_HEIGHT_PX = 22;
+var THUMB_WIDTH_PX = 4;
+function OffsetScrubber({
+  cuePoints,
+  offsetSamples,
+  projectBpm,
+  meter = 4,
+  onChange,
+  disabled = false
 }) {
-  const { muted: isMuted, solo: isSoloed, volume: currentVolume, pan: currentPan } = runtimeState;
-  const needsGeneration = !!(prompt?.trim() && !hasMidi && !isGenerating);
-  const hasFxActive = Object.values(fxDetailState).some(
-    (d) => d.enabled
+  const trackRef = useRef10(null);
+  const [draftOffset, setDraftOffset] = useState11(offsetSamples);
+  const [isDragging, setIsDragging] = useState11(false);
+  useEffect11(() => {
+    if (!isDragging) setDraftOffset(offsetSamples);
+  }, [offsetSamples, isDragging]);
+  const sampleRate = cuePoints?.sample_rate ?? 44100;
+  const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
+  const beatsForRange = useMemo4(() => {
+    return Math.round(60 / projectBpm * sampleRate);
+  }, [projectBpm, sampleRate]);
+  const rangeSamples = beatsForRange * meter;
+  const sampleToFraction = useCallback7(
+    (sample) => {
+      const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
+      return (clamped + rangeSamples) / (2 * rangeSamples);
+    },
+    [rangeSamples]
   );
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey && onGenerate) {
+  const fractionToSample = useCallback7(
+    (fraction) => {
+      const clamped = Math.max(0, Math.min(1, fraction));
+      return Math.round(clamped * 2 * rangeSamples - rangeSamples);
+    },
+    [rangeSamples]
+  );
+  const snapTargets = useMemo4(() => {
+    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 = useCallback7(
+    (sample) => {
+      if (snapTargets.length === 0) return sample;
+      let best = snapTargets[0];
+      let bestDist = Math.abs(sample - best);
+      for (const t of snapTargets) {
+        const d = Math.abs(sample - t);
+        if (d < bestDist) {
+          best = t;
+          bestDist = d;
+        }
+      }
+      return best;
+    },
+    [snapTargets]
+  );
+  const handlePointerDown = useCallback7(
+    (e) => {
+      if (disabled || !cuePoints) return;
       e.preventDefault();
-      onGenerate();
-    }
-  };
-  const borderColorStyle = needsGeneration ? void 0 : accentColor;
-  const borderClass = needsGeneration ? "border-amber-400 animate-pulse" : "border-sas-border";
-  return /* @__PURE__ */ jsxs4("div", { "data-testid": "sdk-track-row-wrapper", className: "w-full", children: [
-    /* @__PURE__ */ jsxs4(
+      const track = trackRef.current;
+      if (!track) return;
+      track.setPointerCapture(e.pointerId);
+      setIsDragging(true);
+      const updateFromEvent = (clientX, shiftHeld) => {
+        const rect = track.getBoundingClientRect();
+        const fraction = (clientX - rect.left) / rect.width;
+        const raw = fractionToSample(fraction);
+        return shiftHeld ? raw : snapToBeat(raw);
+      };
+      setDraftOffset(updateFromEvent(e.clientX, e.shiftKey));
+      const onMove = (ev) => {
+        setDraftOffset(updateFromEvent(ev.clientX, ev.shiftKey));
+      };
+      const onUp = (ev) => {
+        const final = updateFromEvent(ev.clientX, ev.shiftKey);
+        track.releasePointerCapture(e.pointerId);
+        track.removeEventListener("pointermove", onMove);
+        track.removeEventListener("pointerup", onUp);
+        track.removeEventListener("pointercancel", onUp);
+        setIsDragging(false);
+        setDraftOffset(final);
+        onChange(final);
+      };
+      track.addEventListener("pointermove", onMove);
+      track.addEventListener("pointerup", onUp);
+      track.addEventListener("pointercancel", onUp);
+    },
+    [disabled, cuePoints, fractionToSample, onChange, snapToBeat]
+  );
+  const handleResetToZero = useCallback7(() => {
+    if (disabled) return;
+    setDraftOffset(0);
+    onChange(0);
+  }, [disabled, onChange]);
+  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 = useMemo4(() => {
+    if (!cuePoints) return [];
+    const downbeat = cuePoints.beats[0] ?? 0;
+    return cuePoints.beats.map((b, i) => {
+      const offsetCandidate = b - downbeat;
+      const fraction = sampleToFraction(offsetCandidate);
+      const isDownbeat = i === 0;
+      return { i, fraction, isDownbeat };
+    });
+  }, [cuePoints, sampleToFraction]);
+  const isDisabled = disabled || !cuePoints || cuePoints.beats.length === 0;
+  return /* @__PURE__ */ jsxs13("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ jsx19("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
+    /* @__PURE__ */ jsxs13(
       "div",
       {
-        "data-testid": "sdk-track-row",
-        className: `relative flex items-stretch gap-1 p-2 rounded-sm border w-full overflow-hidden ${borderClass} bg-sas-panel-alt`,
-        style: {
-          borderLeftColor: needsGeneration ? "#f59e0b" : borderColorStyle,
-          borderLeftWidth: "3px"
-        },
+        ref: trackRef,
+        "data-testid": "offset-scrubber-track",
+        onPointerDown: handlePointerDown,
+        className: `relative flex-1 min-w-0 rounded-sm select-none ${isDisabled ? "bg-sas-panel cursor-not-allowed opacity-40" : "bg-sas-bg cursor-pointer"}`,
+        style: { height: SLIDER_HEIGHT_PX },
+        title: isDisabled ? "Generate audio first to enable offset alignment" : "Drag to align beat 1. Hold Shift for free, no-snap movement.",
+        role: "slider",
+        "aria-label": "Audio offset alignment",
+        "aria-valuemin": -rangeSamples,
+        "aria-valuemax": rangeSamples,
+        "aria-valuenow": draftOffset,
+        "aria-disabled": isDisabled,
         children: [
-          isGenerating && /* @__PURE__ */ jsx6("div", { className: "absolute left-0 top-0 bottom-0 right-44 z-20", children: /* @__PURE__ */ jsx6(
-            SorceryProgressBar,
+          /* @__PURE__ */ jsx19(
+            "div",
             {
-              isLoading: true,
-              statusText: "CONJURING MIDI...",
-              heightClass: "h-full",
-              initialProgress: generationProgress,
-              onProgressChange,
-              estimatedDurationMs: estimatedGenerationMs
+              "aria-hidden": "true",
+              className: "absolute top-0 bottom-0 w-px bg-sas-accent/40",
+              style: { left: "50%" }
             }
-          ) }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col flex-1 min-w-0 relative z-10", children: [
-            contentSlot ? contentSlot : onPromptChange ? /* @__PURE__ */ jsx6(
-              "input",
-              {
-                type: "text",
-                "data-testid": "sdk-prompt-input",
-                value: prompt ?? "",
-                onChange: (e) => onPromptChange(e.target.value),
-                onKeyDown: handleKeyDown,
-                placeholder: "Describe your part...",
-                disabled: isGenerating,
-                className: "sas-input w-full px-2 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
+          ),
+          ticks.map((t) => /* @__PURE__ */ jsx19(
+            "div",
+            {
+              "data-testid": t.isDownbeat ? "offset-tick-downbeat" : "offset-tick",
+              "aria-hidden": "true",
+              className: t.isDownbeat ? "absolute bg-sas-accent" : "absolute bg-sas-muted/50",
+              style: {
+                left: `${(t.fraction * 100).toFixed(2)}%`,
+                top: (SLIDER_HEIGHT_PX - (t.isDownbeat ? DOWNBEAT_TICK_HEIGHT_PX : TICK_HEIGHT_PX)) / 2,
+                width: 1,
+                height: t.isDownbeat ? DOWNBEAT_TICK_HEIGHT_PX : TICK_HEIGHT_PX
               }
-            ) : null,
-            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 mt-1", children: [
-              track.name && /* @__PURE__ */ jsx6("span", { className: "text-[10px] text-sas-muted/60 truncate pl-2 flex-shrink-0 max-w-[80px]", title: track.name, children: track.name }),
-              /* @__PURE__ */ jsx6("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "vol:" }),
-              /* @__PURE__ */ jsx6(
-                VolumeSlider,
-                {
-                  value: currentVolume,
-                  onChange: onVolumeChange,
-                  disabled: isGenerating,
-                  className: "flex-1 min-w-[40px]"
-                }
-              ),
-              /* @__PURE__ */ jsx6("span", { className: "text-[9px] text-sas-muted/50 flex-shrink-0", children: "pan:" }),
-              /* @__PURE__ */ jsx6(
-                PanSlider,
-                {
-                  value: currentPan,
-                  onChange: onPanChange,
-                  disabled: isGenerating,
-                  className: "w-10 flex-shrink-0"
-                }
-              )
-            ] })
-          ] }),
-          error && /* @__PURE__ */ jsx6(
+            },
+            t.i
+          )),
+          /* @__PURE__ */ jsx19(
             "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__ */ jsxs4("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx6(
-                  AlertCircle,
-                  {
-                    className: "w-5 h-5 text-red-500 animate-pulse",
-                    strokeWidth: 2.5
-                  }
-                ),
-                /* @__PURE__ */ jsx6("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 })
-              ] })
+              "data-testid": "offset-scrubber-thumb",
+              "aria-hidden": "true",
+              className: `absolute top-0 bottom-0 rounded-sm ${isDragging ? "bg-sas-accent" : "bg-sas-accent/80"}`,
+              style: {
+                left: thumbLeftPct,
+                width: THUMB_WIDTH_PX,
+                transform: "translateX(-50%)",
+                pointerEvents: "none"
+              }
             }
-          ),
-          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0.5 flex-shrink-0 relative z-30 justify-center", children: [
-            /* @__PURE__ */ jsxs4("div", { className: "flex gap-1 items-center", children: [
-              onGenerate && /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-generate-button",
-                  onClick: onGenerate,
-                  disabled: !isAuthenticated || isGenerating || !prompt?.trim(),
-                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${!isAuthenticated || isGenerating ? "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed" : needsGeneration ? "bg-amber-500/30 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-sas-bg animate-pulse" : prompt?.trim() ? "bg-sas-accent/20 border-sas-accent text-sas-accent hover:bg-sas-accent hover:text-sas-bg" : "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed"}`,
-                  title: !isAuthenticated ? "Please log in" : isGenerating ? "Generating..." : "Generate MIDI",
-                  children: "Create"
-                }
-              ),
-              onCopy && /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-copy-button",
-                  onClick: onCopy,
-                  disabled: !hasMidi || isGenerating,
-                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${!hasMidi || isGenerating ? "bg-sas-panel border-sas-border text-sas-muted/30 cursor-not-allowed" : "bg-sas-panel-alt border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
-                  title: hasMidi ? "Duplicate track with different preset" : "Generate MIDI first",
-                  children: "Copy"
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-mute-button",
-                  onClick: onMuteToggle,
-                  disabled: isGenerating,
-                  className: `px-1.5 py-0.5 text-xs font-bold rounded transition-colors ${isGenerating ? "bg-sas-panel text-sas-muted/50 cursor-not-allowed" : isMuted ? "bg-red-600 text-white" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"}`,
-                  title: isMuted ? "Unmute track" : "Mute track",
-                  children: "M"
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-delete-button",
-                  onClick: onDelete,
-                  className: "text-sas-danger/70 hover:text-sas-danger px-1 py-0.5 transition-colors text-sm",
-                  title: "Delete track",
-                  children: "x"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs4("div", { className: "flex gap-1 items-center", children: [
-              onShuffle && /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-shuffle-button",
-                  onClick: onShuffle,
-                  disabled: !hasMidi || isGenerating || !!currentInstrumentPluginId,
-                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${!hasMidi || isGenerating || !!currentInstrumentPluginId ? "bg-sas-panel border-sas-border text-sas-muted/30 cursor-not-allowed" : "bg-sas-panel-alt border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
-                  title: currentInstrumentPluginId ? "Shuffle only works with default Surge XT" : hasMidi ? "Re-roll sound (keep MIDI)" : "Generate MIDI first",
-                  children: "Shuffle"
-                }
-              ),
-              onToggleFxDrawer && /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-fx-button",
-                  onClick: onToggleFxDrawer,
-                  disabled: isGenerating,
-                  className: `w-14 py-0.5 rounded-sm text-xs font-medium transition-colors border ${isGenerating ? "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed" : fxDrawerOpen ? "bg-sas-accent border-sas-accent text-sas-bg" : hasFxActive ? "bg-sas-accent/20 border-sas-accent text-sas-accent hover:bg-sas-accent hover:text-sas-bg" : "bg-sas-panel-alt border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
-                  title: fxDrawerOpen ? "Hide FX controls" : "Show FX controls",
-                  children: "FX"
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-solo-button",
-                  onClick: onSoloToggle,
-                  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" : isSoloed ? "bg-yellow-500 text-black" : "bg-sas-panel-alt text-sas-muted hover:bg-sas-border"}`,
-                  title: isSoloed ? "Unsolo track" : "Solo track",
-                  children: "S"
-                }
-              ),
-              onToggleInstrumentDrawer && /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  "data-testid": "sdk-plugin-button",
-                  onClick: onToggleInstrumentDrawer,
-                  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" : instrumentDrawerOpen ? "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: `Plugin: ${instrumentName ?? "Surge XT"}${instrumentMissing ? " (missing)" : ""}`,
-                  children: "P"
-                }
-              )
-            ] })
-          ] })
+          )
         ]
       }
     ),
-    fxDrawerOpen && !instrumentDrawerOpen && /* @__PURE__ */ jsx6("div", { "data-testid": "sdk-fx-drawer", className: "border border-t-0 border-sas-border bg-sas-bg rounded-b-sm px-3 py-2 max-h-[180px] overflow-y-auto", children: /* @__PURE__ */ jsx6(
-      FxToggleBar,
+    /* @__PURE__ */ jsx19(
+      "span",
+      {
+        "data-testid": "offset-scrubber-readout",
+        className: "text-[10px] text-sas-muted/70 tabular-nums flex-shrink-0 min-w-[64px] text-right",
+        children: formatOffset(draftOffset, sampleRate)
+      }
+    ),
+    /* @__PURE__ */ jsx19(
+      "button",
       {
-        trackId: track.id,
-        fxState: fxDetailState,
-        onToggle: (_trackId, category, enabled) => onFxToggle?.(category, enabled),
-        onPresetChange: (_trackId, category, presetIndex) => onFxPresetChange?.(category, presetIndex),
-        onDryWetChange: (_trackId, category, value) => onFxDryWetChange?.(category, value),
-        disabled: isGenerating
+        type: "button",
+        "data-testid": "offset-scrubber-reset",
+        onClick: handleResetToZero,
+        disabled: isDisabled || draftOffset === 0,
+        className: `text-[10px] px-1 py-0.5 rounded-sm border transition-colors flex-shrink-0 ${isDisabled || draftOffset === 0 ? "border-sas-border text-sas-muted/30 cursor-not-allowed" : "border-sas-border text-sas-muted/70 hover:border-sas-accent hover:text-sas-accent"}`,
+        title: "Reset offset to 0 (bar 1)",
+        children: "\u2316"
       }
-    ) }),
-    instrumentDrawerOpen && !fxDrawerOpen && availableInstruments && onInstrumentSelect && onRefreshInstruments && /* @__PURE__ */ jsx6("div", { "data-testid": "sdk-instrument-drawer", className: "border border-t-0 border-sas-border bg-sas-bg rounded-b-sm px-3 py-2", children: /* @__PURE__ */ jsx6(
-      InstrumentDrawer,
+    ),
+    bpmMismatch && /* @__PURE__ */ jsx19(
+      "span",
       {
-        instruments: availableInstruments,
-        currentPluginId: currentInstrumentPluginId ?? null,
-        isLoading: instrumentsLoading ?? false,
-        onSelect: onInstrumentSelect,
-        onRefresh: onRefreshInstruments,
-        stage: instrumentDrawerStage,
-        onShowEditor,
-        onBackToInstruments,
-        selectedInstrumentName: instrumentName
+        "data-testid": "offset-bpm-mismatch",
+        className: "text-[9px] px-1 py-0.5 rounded-sm bg-amber-500/15 text-amber-400 border border-amber-500/30 flex-shrink-0",
+        title: `Detected ${detectedBpm.toFixed(1)} BPM \u2014 beats may not align with project ${projectBpm} BPM grid`,
+        children: "BPM \u2260"
       }
-    ) })
+    )
   ] });
 }
+function formatOffset(samples, sampleRate) {
+  const sign = samples > 0 ? "+" : samples < 0 ? "-" : "";
+  const abs = Math.abs(samples);
+  const ms = Math.round(abs / sampleRate * 1e3);
+  return `${sign}${abs} spl (${sign}${ms} ms)`;
+}
+
+// src/components/wavPeakAnalyzer.ts
+var CLIP_THRESHOLD_LINEAR = 0.891;
+async function analyzeWavPeak(host, filePath) {
+  const bytes = await host.getAudioFileBytes(filePath);
+  const ContextCtor = window.AudioContext ?? window.webkitAudioContext;
+  const audioContext = new ContextCtor();
+  try {
+    const audioBuffer = await audioContext.decodeAudioData(bytes.slice(0));
+    let peak = 0;
+    for (let c = 0; c < audioBuffer.numberOfChannels; c++) {
+      const data = audioBuffer.getChannelData(c);
+      for (let i = 0; i < data.length; i++) {
+        const a = Math.abs(data[i]);
+        if (a > peak) peak = a;
+      }
+    }
+    const peakDb = peak > 1e-6 ? 20 * Math.log10(peak) : -120;
+    return {
+      peakLinear: peak,
+      peakDb,
+      clipped: peak >= CLIP_THRESHOLD_LINEAR - 5e-3
+    };
+  } finally {
+    await audioContext.close().catch(() => {
+    });
+  }
+}
+
+// src/components/synthesizeCuePoints.ts
+function synthesizeCuePoints({
+  bpm,
+  sampleRate,
+  bars,
+  meter = 4
+}) {
+  const safeBpm = bpm > 0 ? bpm : 120;
+  const safeSampleRate = sampleRate > 0 ? sampleRate : 48e3;
+  const samplesPerBeat = Math.round(60 / safeBpm * safeSampleRate);
+  const totalBeats = Math.max(1, Math.round(bars * meter));
+  const beats = [];
+  for (let i = 0; i < totalBeats; i++) {
+    beats.push(i * samplesPerBeat);
+  }
+  return {
+    schema: 1,
+    sample_rate: safeSampleRate,
+    detected_bpm: safeBpm,
+    downbeat_sample: 0,
+    beats,
+    detected_at: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
 
 // src/hooks/useSceneState.ts
-import { useState as useState5, useCallback as useCallback3, useRef as useRef4 } from "react";
+import { useState as useState12, useCallback as useCallback8, useRef as useRef11 } from "react";
 function useSceneState(activeSceneId, initialValue) {
-  const [stateMap, setStateMap] = useState5(() => /* @__PURE__ */ new Map());
-  const activeSceneIdRef = useRef4(activeSceneId);
+  const [stateMap, setStateMap] = useState12(() => /* @__PURE__ */ new Map());
+  const activeSceneIdRef = useRef11(activeSceneId);
   activeSceneIdRef.current = activeSceneId;
   const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
-  const setForCurrentScene = useCallback3((value) => {
+  const setForCurrentScene = useCallback8((value) => {
     const sid = activeSceneIdRef.current;
     if (sid === null) return;
     setStateMap((prev) => {
@@ -1231,7 +3536,7 @@ function useSceneState(activeSceneId, initialValue) {
       return newMap;
     });
   }, [initialValue]);
-  const setForScene = useCallback3((sceneId, value) => {
+  const setForScene = useCallback8((sceneId, value) => {
     setStateMap((prev) => {
       const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
       const next = typeof value === "function" ? value(current) : value;
@@ -1243,32 +3548,433 @@ function useSceneState(activeSceneId, initialValue) {
   return [currentValue, setForCurrentScene, setForScene];
 }
 
+// src/hooks/useAnySolo.ts
+import { useEffect as useEffect12, useState as useState13 } from "react";
+function useAnySolo(host) {
+  const [anySolo, setAnySolo] = useState13(false);
+  useEffect12(() => {
+    let active = true;
+    const refresh = () => {
+      host.isAnySoloActive().then((v) => {
+        if (active) setAnySolo(v);
+      }).catch(() => {
+      });
+    };
+    refresh();
+    const unsub = host.onTrackStateChange(() => refresh());
+    return () => {
+      active = false;
+      unsub();
+    };
+  }, [host]);
+  return anySolo;
+}
+
+// src/hooks/useSoundHistory.ts
+import { useCallback as useCallback9, useMemo as useMemo5, useRef as useRef12, useState as useState14 } from "react";
+var EMPTY = { entries: [], cursor: -1 };
+function sameDescriptor(a, b) {
+  if (a === b) return true;
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+function useSoundHistory(applySound, opts = {}) {
+  const max = Math.max(2, opts.max ?? 24);
+  const applyRef = useRef12(applySound);
+  applyRef.current = applySound;
+  const onChangeRef = useRef12(opts.onChange);
+  onChangeRef.current = opts.onChange;
+  const dataRef = useRef12({});
+  const [, setVersion] = useState14(0);
+  const bump = useCallback9(() => setVersion((v) => v + 1), []);
+  const commit = useCallback9(
+    (trackId, next, notify) => {
+      dataRef.current = { ...dataRef.current, [trackId]: next };
+      bump();
+      if (notify) onChangeRef.current?.(trackId, next);
+    },
+    [bump]
+  );
+  const record = useCallback9(
+    (trackId, descriptor, label) => {
+      const h = dataRef.current[trackId];
+      const current = h && h.cursor >= 0 ? h.entries[h.cursor] : void 0;
+      if (current && sameDescriptor(current.descriptor, descriptor)) return;
+      const entries = [...h ? h.entries : [], { descriptor, label }];
+      while (entries.length > max) {
+        const victim = entries.findIndex((e) => !e.favorite);
+        if (victim === -1) break;
+        entries.splice(victim, 1);
+      }
+      commit(trackId, { entries, cursor: entries.length - 1 }, true);
+    },
+    [max, commit]
+  );
+  const restoreTo = useCallback9(
+    async (trackId, index) => {
+      const h = dataRef.current[trackId];
+      if (!h || index < 0 || index >= h.entries.length || index === h.cursor) return false;
+      await applyRef.current(trackId, h.entries[index].descriptor);
+      commit(trackId, { entries: h.entries, cursor: index }, true);
+      return true;
+    },
+    [commit]
+  );
+  const undo = useCallback9(
+    (trackId) => {
+      const h = dataRef.current[trackId];
+      if (!h || h.cursor <= 0) return Promise.resolve(false);
+      return restoreTo(trackId, h.cursor - 1);
+    },
+    [restoreTo]
+  );
+  const toggleFavorite = useCallback9(
+    (trackId, index) => {
+      const h = dataRef.current[trackId];
+      if (!h || index < 0 || index >= h.entries.length) return;
+      const entries = h.entries.map((e, i) => i === index ? { ...e, favorite: !e.favorite } : e);
+      commit(trackId, { entries, cursor: h.cursor }, true);
+    },
+    [commit]
+  );
+  const restore = useCallback9(
+    (trackId, state) => {
+      const entries = Array.isArray(state?.entries) ? [...state.entries] : [];
+      const raw = typeof state?.cursor === "number" ? state.cursor : entries.length - 1;
+      const cursor = entries.length === 0 ? -1 : Math.min(Math.max(raw, 0), entries.length - 1);
+      commit(trackId, { entries, cursor }, false);
+    },
+    [commit]
+  );
+  const list = useCallback9(
+    (trackId) => dataRef.current[trackId] ?? EMPTY,
+    []
+  );
+  const canUndo = useCallback9((trackId) => {
+    const h = dataRef.current[trackId];
+    return !!h && h.cursor > 0;
+  }, []);
+  const clear = useCallback9(
+    (trackId) => {
+      if (dataRef.current[trackId]) {
+        const next = { ...dataRef.current };
+        delete next[trackId];
+        dataRef.current = next;
+        bump();
+      }
+      onChangeRef.current?.(trackId, EMPTY);
+    },
+    [bump]
+  );
+  const reset = useCallback9(() => {
+    dataRef.current = {};
+    bump();
+  }, [bump]);
+  return useMemo5(
+    () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
+    [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
+  );
+}
+
+// src/hooks/useTrackReorder.ts
+import { useCallback as useCallback10, useRef as useRef13, useState as useState15 } from "react";
+function moveItem(arr, from, to) {
+  const next = arr.slice();
+  if (from === to || from < 0 || to < 0 || from >= next.length || to >= next.length) {
+    return next;
+  }
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return next;
+}
+function useTrackReorder({
+  host,
+  items,
+  setItems,
+  getId,
+  onError
+}) {
+  const [draggingIndex, setDraggingIndex] = useState15(null);
+  const [dragOverIndex, setDragOverIndex] = useState15(null);
+  const fromRef = useRef13(null);
+  const itemsRef = useRef13(items);
+  itemsRef.current = items;
+  const dragPropsFor = useCallback10(
+    (index) => ({
+      handleProps: {
+        draggable: true,
+        onDragStart: (e) => {
+          fromRef.current = index;
+          setDraggingIndex(index);
+          if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = "move";
+            try {
+              e.dataTransfer.setData("text/plain", String(index));
+            } catch {
+            }
+          }
+        },
+        onDragEnd: () => {
+          fromRef.current = null;
+          setDraggingIndex(null);
+          setDragOverIndex(null);
+        }
+      },
+      rowProps: {
+        onDragEnter: (e) => {
+          if (fromRef.current === null) return;
+          e.preventDefault();
+          setDragOverIndex(index);
+        },
+        onDragOver: (e) => {
+          if (fromRef.current === null) return;
+          e.preventDefault();
+          if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+          setDragOverIndex((cur) => cur === index ? cur : index);
+        },
+        onDragLeave: () => {
+          setDragOverIndex((cur) => cur === index ? null : cur);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          const from = fromRef.current;
+          fromRef.current = null;
+          setDraggingIndex(null);
+          setDragOverIndex(null);
+          if (from === null || from === index) return;
+          const prev = itemsRef.current;
+          const next = moveItem(prev, from, index);
+          setItems(next);
+          const ids = next.map(getId);
+          Promise.resolve(host.reorderTracks(ids)).catch((err) => {
+            setItems(prev);
+            onError?.(err);
+          });
+        }
+      },
+      isDragging: draggingIndex === index,
+      isDragTarget: dragOverIndex === index && draggingIndex !== index
+    }),
+    [host, setItems, getId, onError, draggingIndex, dragOverIndex]
+  );
+  return { dragPropsFor, draggingIndex, dragOverIndex };
+}
+
 // src/constants/sdk-version.ts
-var PLUGIN_SDK_VERSION = "2.3.0";
+var PLUGIN_SDK_VERSION = "2.24.0";
+
+// src/utils/format-concurrent-tracks.ts
+function formatConcurrentTracks(ctx) {
+  const tracks = ctx.concurrentTracks;
+  if (!tracks || tracks.length === 0) return "";
+  const lines = [`Concurrent tracks in scene (already generated):`];
+  for (const track of tracks) {
+    const promptStr = track.prompt ? ` prompt="${escapeQuotes(track.prompt)}"` : "";
+    lines.push(`  - role=${track.role ?? "unknown"}${promptStr}`);
+    if (track.notesByChord.length === 0) {
+      lines.push(`    (no notes)`);
+    } else {
+      for (const segment of track.notesByChord) {
+        if (segment.notes.length === 0) continue;
+        lines.push(`    ${formatChordSegment(segment)}`);
+      }
+    }
+    if (track.truncated && typeof track.originalNoteCount === "number") {
+      const dropped = track.originalNoteCount - sumKeptNotes(track.notesByChord);
+      if (dropped > 0) {
+        lines.push(`    \u2026 (${dropped} more notes truncated)`);
+      }
+    }
+  }
+  if (ctx.truncatedTrackCount && ctx.truncatedTrackCount > 0) {
+    lines.push(
+      `  \u2026 (${ctx.truncatedTrackCount} additional track${ctx.truncatedTrackCount === 1 ? "" : "s"} omitted to fit token budget)`
+    );
+  }
+  return lines.join("\n");
+}
+function formatChordSegment(segment) {
+  const [start, end] = segment.chordRangeQn;
+  const notesJson = JSON.stringify(segment.notes.map(compactNote2));
+  return `${segment.chord} (beats ${start}-${end}): ${notesJson}`;
+}
+function compactNote2(n) {
+  return {
+    pitch: n.pitch,
+    startBeat: n.startBeat,
+    durationBeats: n.durationBeats,
+    velocity: n.velocity
+  };
+}
+function escapeQuotes(s) {
+  return s.replace(/"/g, '\\"');
+}
+function sumKeptNotes(segments) {
+  let total = 0;
+  for (const s of segments) total += s.notes.length;
+  return total;
+}
+
+// src/utils/semantic-match.ts
+var STOP_WORDS = /* @__PURE__ */ new Set([
+  "a",
+  "an",
+  "the",
+  "and",
+  "or",
+  "but",
+  "with",
+  "for",
+  "to",
+  "of",
+  "in",
+  "on",
+  "at",
+  "by",
+  "is",
+  "it",
+  "this",
+  "that",
+  "i",
+  "my",
+  "me",
+  "make",
+  "please",
+  "give",
+  "want",
+  "need",
+  "some",
+  "like",
+  "get",
+  "something"
+]);
+function tokenizePrompt(text) {
+  if (!text) return [];
+  const withoutNegatives = text.split(",").map((clause) => clause.trim()).filter((clause) => clause.length > 0 && !/^no\s/i.test(clause)).join(" ");
+  return withoutNegatives.toLowerCase().split(/[^a-z0-9]+/u).filter((tok) => {
+    if (!tok) return false;
+    if (STOP_WORDS.has(tok)) return false;
+    if (/^\d{1,2}$/.test(tok)) return false;
+    return true;
+  });
+}
+function scorePromptMatch(query, candidatePrompts) {
+  const n = candidatePrompts.length;
+  if (n === 0) return [];
+  const queryTokens = Array.from(new Set(tokenizePrompt(query)));
+  if (queryTokens.length === 0) return candidatePrompts.map(() => 0);
+  const candidateTokenSets = candidatePrompts.map((p) => new Set(tokenizePrompt(p)));
+  const idf = /* @__PURE__ */ new Map();
+  for (const token of queryTokens) {
+    let df = 0;
+    for (const set of candidateTokenSets) {
+      if (set.has(token)) df += 1;
+    }
+    if (df > 0) idf.set(token, Math.log(1 + n / df));
+  }
+  let denominator = 0;
+  for (const weight of idf.values()) denominator += weight;
+  if (denominator === 0) return candidatePrompts.map(() => 0);
+  return candidateTokenSets.map((set) => {
+    let numerator = 0;
+    for (const [token, weight] of idf) {
+      if (set.has(token)) numerator += weight;
+    }
+    return numerator / denominator;
+  });
+}
+function pickTopKWeighted(scored, options = {}) {
+  const { k = 5, temperature = 0.3, excludeKeys, rng = Math.random } = options;
+  let pool = scored;
+  if (excludeKeys && excludeKeys.size > 0) {
+    pool = pool.filter((c) => c.key === void 0 || !excludeKeys.has(c.key));
+  }
+  if (pool.length === 0) return null;
+  const sorted = [...pool].sort((a, b) => b.score - a.score);
+  const top = sorted.slice(0, Math.max(1, k));
+  const maxScore = top[0].score;
+  const safeTemp = Math.max(1e-6, temperature);
+  const weights = top.map((c) => Math.exp((c.score - maxScore) / safeTemp));
+  const totalWeight = weights.reduce((sum, w) => sum + w, 0);
+  let threshold = rng() * totalWeight;
+  for (let i = 0; i < top.length; i += 1) {
+    threshold -= weights[i];
+    if (threshold <= 0) return top[i].item;
+  }
+  return top[top.length - 1].item;
+}
 export {
+  ConfirmDialog,
+  CrossfadeModal,
+  CrossfadeTrackRow,
   DB_MAX,
   DB_MIN,
   DEFAULT_FX_CATEGORY_DETAIL,
   DEFAULT_FX_DRY_WET,
+  DRAG_DEAD_ZONE,
+  DownloadPackButton,
   EMPTY_FX_DETAIL_STATE,
   EMPTY_FX_STATE,
+  EQUAL_POWER_GAIN,
   FX_CATEGORIES,
   FX_CHAIN_ORDER,
   FX_DISPLAY_LABELS,
   FX_ENGINE_PLUGIN_NAMES,
   FX_PRESET_CONFIGS,
   FxToggleBar,
-  InstrumentDrawer,
+  GUTTER_W,
+  ImportTrackModal,
+  TrackDrawer as InstrumentDrawer,
+  LevelMeter,
+  Modal,
+  OffsetScrubber,
   PLUGIN_SDK_VERSION,
+  PX_PER_BEAT,
   PanSlider,
+  PianoRollEditor,
   PluginError,
+  RESIZE_HANDLE_PX,
+  ROW_HEIGHT,
   SLIDER_UNITY,
+  SamplePackCTACard,
+  ScrollingWaveform,
   SorceryProgressBar,
+  TrackDrawer,
+  TrackMeterStrip,
   TrackRow,
   VolumeSlider,
+  WaveformView,
+  analyzeWavPeak,
+  asCrossfadeMeta,
+  buildCrossfadeInpaintPrompt,
   calculateTimeBasedTarget,
+  cellToPx,
+  centerScrollTop,
+  computePeaks,
   dbToSlider,
+  drawWaveform,
+  formatConcurrentTracks,
+  moveItem,
+  parseCrossfadePairs,
+  pickTopKWeighted,
+  pitchToName,
+  pxToCell,
+  resizeNoteDuration,
+  scorePromptMatch,
   sliderToDb,
-  useSceneState
+  synthesizeCuePoints,
+  tokenizePrompt,
+  transposeNotes,
+  useAnySolo,
+  useSceneState,
+  useSoundHistory,
+  useTrackLevel,
+  useTrackLevels,
+  useTrackMeter,
+  useTrackReorder,
+  useTransportPlaying
 };
 //# sourceMappingURL=index.mjs.map