@signalsandsorcery/plugin-sdk 2.28.1 → 2.35.1

package/dist/index.mjs

@@ -1343,6 +1343,7 @@ var LevelMeter = ({
 
 // src/hooks/useTrackLevels.ts
 import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+var meterDiagRLast = /* @__PURE__ */ new Map();
 var POLL_INTERVAL_MS = 33;
 var HIDDEN_RECHECK_MS = 250;
 var METER_FLOOR_DB = -120;
@@ -1474,6 +1475,11 @@ function useTrackMeter(handle, trackId) {
     }
     const update = () => {
       const level = handle.getLevel(trackId);
+      const dNow = Date.now();
+      if ((meterDiagRLast.get(trackId) ?? 0) < dNow - 3e3) {
+        meterDiagRLast.set(trackId, dNow);
+        console.log(`[MeterDiagR] lookup trackId=${trackId} \u2192 ${level === null ? "MISS (no level for this id)" : "hit"}`);
+      }
       const now = performance.now();
       const dtSec = lastTickRef.current ? Math.max(0, (now - lastTickRef.current) / 1e3) : 0;
       lastTickRef.current = now;
@@ -2175,8 +2181,7 @@ function TrackRow({
                 {
                   "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"}`,
+                  className: `px-1.5 py-0.5 text-xs font-bold rounded transition-colors ${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"
                 }
@@ -2427,6 +2432,18 @@ function CrossfadeTrackRow({
 }
 
 // src/crossfade-meta.ts
+function hashString(s) {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = (h << 5) + h ^ s.charCodeAt(i) | 0;
+  return (h >>> 0).toString(36);
+}
+function soundIdentity(snap) {
+  if (!snap) return "";
+  if (snap.kind === "preset") return `p:${hashString(snap.state)}`;
+  if (snap.kind === "sample") return `s:${snap.samplePath}`;
+  if (snap.kind === "instrument") return `i:${snap.instrumentId ?? ""}:${hashString(JSON.stringify(snap.zones))}`;
+  return "";
+}
 var EQUAL_POWER_GAIN = 0.707;
 function asCrossfadeMeta(val) {
   if (!val || typeof val !== "object") return null;
@@ -2576,9 +2593,11 @@ function asFadeMeta(val) {
   const m = val;
   if (m.direction !== "in" && m.direction !== "out") return null;
   if (m.gesture !== "volume" && m.gesture !== "build") return null;
+  const effect = m.effect === "stutter" || m.effect === "chopped" || m.effect === "delay" || m.effect === "fade" ? m.effect : void 0;
   return {
     direction: m.direction,
     gesture: m.gesture,
+    effect,
     sourceTrackDbId: typeof m.sourceTrackDbId === "string" ? m.sourceTrackDbId : "",
     sourceSceneId: typeof m.sourceSceneId === "string" ? m.sourceSceneId : "",
     sourceName: typeof m.sourceName === "string" ? m.sourceName : "",
@@ -2665,6 +2684,7 @@ function FadeTrackRow({
   layer,
   direction,
   gesture,
+  effect,
   sliderPos = 0.5,
   onMuteToggle,
   onSoloToggle,
@@ -2678,7 +2698,8 @@ function FadeTrackRow({
   const [confirmDelete, setConfirmDelete] = React10.useState(false);
   const leftLabel = direction === "in" ? "(silent)" : layer.sourceName ?? layer.name;
   const rightLabel = direction === "in" ? layer.sourceName ?? layer.name : "(silent)";
-  const badge = direction === "in" ? "\u2197 Fade in" : "\u2198 Fade out";
+  const verb = effect && effect !== "fade" ? effect.charAt(0).toUpperCase() + effect.slice(1) : "Fade";
+  const badge = direction === "in" ? `\u2197 ${verb} in` : `\u2198 ${verb} out`;
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -3413,880 +3434,3809 @@ function CrossfadeModal({
   ) });
 }
 
-// src/components/DownloadPackButton.tsx
-import { useCallback as useCallback7, useEffect as useEffect9, useState as useState10 } from "react";
-import { jsx as jsx17, jsxs as jsxs13 } 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`;
+// src/components/TransitionDesigner.tsx
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef10, useState as useState11 } from "react";
+
+// src/hooks/useTrackReorder.ts
+import { useCallback as useCallback7, useRef as useRef9, useState as useState10 } 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;
 }
-var DownloadPackButton = ({
+function useTrackReorder({
   host,
-  packId,
-  displayName,
-  sizeBytes,
-  variant = "compact",
-  onDownloadComplete
-}) => {
-  const [status, setStatus] = useState10("idle");
-  const [progress, setProgress] = useState10(0);
-  const [errorMessage, setErrorMessage] = useState10(null);
-  useEffect9(() => {
-    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 = useCallback7(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");
+  items,
+  setItems,
+  getId,
+  onError
+}) {
+  const [draggingIndex, setDraggingIndex] = useState10(null);
+  const [dragOverIndex, setDragOverIndex] = useState10(null);
+  const fromRef = useRef9(null);
+  const itemsRef = useRef9(items);
+  itemsRef.current = items;
+  const dragPropsFor = useCallback7(
+    (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/transition-designer-meta.ts
+var TRANSITION_DESIGNER_DRAFT_KEY = "transitionDesigner:draft";
+var AUDIO_EFFECTS = ["fade", "stutter", "chopped", "delay"];
+var AUDIO_EFFECT_LABEL = {
+  fade: "Fade",
+  stutter: "Stutter",
+  chopped: "Chopped",
+  delay: "Delay"
+};
+function asAudioEffect(v) {
+  return v === "fade" || v === "stutter" || v === "chopped" || v === "delay" ? v : null;
+}
+function rowType(hasOrigin, hasTarget) {
+  if (hasOrigin && hasTarget) return "crossfade";
+  if (hasOrigin) return "fade-out";
+  if (hasTarget) return "fade-in";
+  return null;
+}
+function asTransitionDesignerDraft(val) {
+  if (!val || typeof val !== "object") return null;
+  const d = val;
+  const clean = (a) => Array.isArray(a) ? a.filter((x) => x === null || typeof x === "string") : [];
+  const cleanEffects = (e) => {
+    const out = {};
+    if (e && typeof e === "object") {
+      for (const [k, v] of Object.entries(e)) {
+        const eff = asAudioEffect(v);
+        if (eff) out[k] = eff;
       }
-    } 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";
+    return out;
+  };
+  return {
+    originOrder: clean(d.originOrder),
+    targetOrder: clean(d.targetOrder),
+    rowEffects: cleanEffects(d.rowEffects)
+  };
+}
+function reconcileSlots(saved, poolIds) {
+  const pool = new Set(poolIds);
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const slot of saved ?? []) {
+    if (slot === null) {
+      out.push(null);
+      continue;
+    }
+    if (pool.has(slot) && !seen.has(slot)) {
+      out.push(slot);
+      seen.add(slot);
     }
-  })();
-  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__ */ jsxs13("div", { children: [
-    /* @__PURE__ */ jsx17(
-      "button",
-      {
-        "data-testid": `download-pack-button-${packId}`,
-        onClick: handleClick,
-        disabled: isDisabled,
-        className,
-        title: tooltip,
-        children: buttonLabel
-      }
-    ),
-    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
-  ] });
-};
-
-// src/components/SamplePackCTACard.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-var SamplePackCTACard = ({
-  host,
-  pack,
-  status,
-  onDownloadComplete
-}) => {
-  if (status === "checking") {
-    return /* @__PURE__ */ jsx18(
-      "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__ */ jsxs14(
-    "div",
-    {
-      "data-testid": `sample-pack-cta-${pack.packId}`,
-      className: "flex flex-col items-center justify-center py-12 px-6 text-center",
-      children: [
-        /* @__PURE__ */ jsx18("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
-        /* @__PURE__ */ jsx18("div", { className: "text-base text-sas-text mb-1", children: headline }),
-        /* @__PURE__ */ jsx18("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
-        /* @__PURE__ */ jsx18(
-          DownloadPackButton,
-          {
-            host,
-            packId: pack.packId,
-            displayName: pack.displayName,
-            sizeBytes: pack.sizeBytes,
-            variant: "large",
-            onDownloadComplete
-          }
-        )
-      ]
+  for (const id of poolIds) {
+    if (!seen.has(id)) {
+      out.push(id);
+      seen.add(id);
     }
+  }
+  return out;
+}
+function buildRowSlots(originSlots, targetSlots) {
+  const n = Math.max(originSlots.length, targetSlots.length);
+  const rows = [];
+  for (let i = 0; i < n; i++) {
+    const originId = originSlots[i] ?? null;
+    const targetId = targetSlots[i] ?? null;
+    rows.push({ originId, targetId, type: rowType(originId !== null, targetId !== null) });
+  }
+  return rows;
+}
+function normalizeSlots(originSlots, targetSlots) {
+  const rows = buildRowSlots(originSlots, targetSlots).filter(
+    (r) => r.originId !== null || r.targetId !== null
   );
-};
-
-// src/components/WaveformView.tsx
-import { useEffect as useEffect10, useRef as useRef9, useState as useState11 } 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 trimTrailing = (a) => {
+    let end = a.length;
+    while (end > 0 && a[end - 1] === null) end--;
+    return a.slice(0, end);
+  };
+  return {
+    originOrder: trimTrailing(rows.map((r) => r.originId)),
+    targetOrder: trimTrailing(rows.map((r) => r.targetId))
+  };
+}
+function padSlots(slots, n) {
+  if (slots.length >= n) return slots.slice();
+  return [...slots, ...new Array(n - slots.length).fill(null)];
+}
+function padPair(originSlots, targetSlots) {
+  const n = Math.max(originSlots.length, targetSlots.length);
+  return [padSlots(originSlots, n), padSlots(targetSlots, n)];
+}
+function slotsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
   }
-  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;
+  return true;
+}
+function rowKey(row) {
+  if (row.type === "crossfade") return `xf:${row.originId}|${row.targetId}`;
+  if (row.type === "fade-out") return `fo:${row.originId}`;
+  if (row.type === "fade-in") return `fi:${row.targetId}`;
+  return null;
+}
+function dbIdsFromKeys(keys) {
+  const out = /* @__PURE__ */ new Set();
+  for (const k of keys) {
+    const body = k.slice(3);
+    if (k.startsWith("xf:")) {
+      const sep = body.indexOf("|");
+      out.add(body.slice(0, sep));
+      out.add(body.slice(sep + 1));
+    } else {
+      out.add(body);
     }
-    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));
   }
+  return out;
 }
 
-// src/components/WaveformView.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var WaveformView = ({
+// src/components/TransitionDesigner.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var CROSSFADE_ESTIMATE_MS = 15e3;
+var FADE_ESTIMATE_MS = 11e3;
+var CREATE_ALL_CONCURRENCY = 5;
+var TYPE_LABEL = {
+  crossfade: "Crossfade",
+  "fade-out": "Fade out",
+  "fade-in": "Fade in"
+};
+function shortId3(dbId) {
+  return dbId.length > 8 ? dbId.slice(0, 8) : dbId;
+}
+function TransitionDesigner({
   host,
-  filePath,
-  bins = 256,
-  className,
-  fillStyle,
-  targetSamples
-}) => {
-  const canvasRef = useRef9(null);
-  const [peaks, setPeaks] = useState11(null);
-  useEffect10(() => {
-    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]);
-  useEffect10(() => {
-    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__ */ jsx19(
-    "canvas",
-    {
-      ref: canvasRef,
-      "data-testid": "waveform-view",
-      className: className ?? "w-full h-10"
-    }
+  fromSceneId,
+  toSceneId,
+  transitionSceneId,
+  excludeSourceDbIds,
+  onCreateCrossfade,
+  onCreateFade,
+  onCreateAudioTransition,
+  familyLabel,
+  testIdPrefix = "transition-designer"
+}) {
+  const [load, setLoad] = useState11({ status: "loading" });
+  const [fromName, setFromName] = useState11(null);
+  const [toName, setToName] = useState11(null);
+  const [originSlots, setOriginSlots] = useState11([]);
+  const [targetSlots, setTargetSlots] = useState11([]);
+  const [creatingKeys, setCreatingKeys] = useState11(() => /* @__PURE__ */ new Set());
+  const [rowErrors, setRowErrors] = useState11({});
+  const [rowEffects, setRowEffects] = useState11({});
+  const rowEffectsRef = useRef10(rowEffects);
+  rowEffectsRef.current = rowEffects;
+  const audioEffectsEnabled = !!onCreateAudioTransition;
+  const excludeRef = useRef10(excludeSourceDbIds);
+  excludeRef.current = excludeSourceDbIds;
+  const originSlotsRef = useRef10(originSlots);
+  originSlotsRef.current = originSlots;
+  const targetSlotsRef = useRef10(targetSlots);
+  targetSlotsRef.current = targetSlots;
+  const creatingKeysRef = useRef10(creatingKeys);
+  creatingKeysRef.current = creatingKeys;
+  const dragRef = useRef10(null);
+  const [dragging, setDragging] = useState11(null);
+  const [dragOver, setDragOver] = useState11(null);
+  const excludeSet = useMemo5(() => new Set(excludeSourceDbIds ?? []), [excludeSourceDbIds]);
+  const originPool = useMemo5(
+    () => load.status === "ready" ? load.origin.filter((t) => !excludeSet.has(t.dbId)) : [],
+    [load, excludeSet]
   );
-};
-
-// src/components/ScrollingWaveform.tsx
-import { useEffect as useEffect11, useRef as useRef10 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ScrollingWaveform = ({
-  getPeakDb,
-  active,
-  columns = 256,
-  className,
-  fillStyle
-}) => {
-  const canvasRef = useRef10(null);
-  const ringRef = useRef10(new Float32Array(columns));
-  const writeIdxRef = useRef10(0);
-  const rafRef = useRef10(null);
-  useEffect11(() => {
-    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]);
-  useEffect11(() => {
-    if (!active) {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
+  const targetPool = useMemo5(
+    () => load.status === "ready" ? load.target.filter((t) => !excludeSet.has(t.dbId)) : [],
+    [load, excludeSet]
+  );
+  const originById = useMemo5(() => new Map(originPool.map((t) => [t.dbId, t])), [originPool]);
+  const targetById = useMemo5(() => new Map(targetPool.map((t) => [t.dbId, t])), [targetPool]);
+  const originByIdRef = useRef10(originById);
+  originByIdRef.current = originById;
+  const targetByIdRef = useRef10(targetById);
+  targetByIdRef.current = targetById;
+  const refresh = useCallback8(async () => {
+    if (!host.listSceneFamilyTracks) {
+      setLoad({ status: "error", message: "This host does not support transition tracks." });
       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__ */ jsx20(
-    "canvas",
-    {
-      ref: canvasRef,
-      "data-testid": "scrolling-waveform",
-      className: className ?? "w-full h-12"
+    setLoad({ status: "loading" });
+    try {
+      const [origin, target, fName, tName, draftRaw] = await Promise.all([
+        host.listSceneFamilyTracks(fromSceneId),
+        host.listSceneFamilyTracks(toSceneId),
+        host.getSceneName ? host.getSceneName(fromSceneId) : Promise.resolve(null),
+        host.getSceneName ? host.getSceneName(toSceneId) : Promise.resolve(null),
+        host.getSceneData ? host.getSceneData(transitionSceneId, TRANSITION_DESIGNER_DRAFT_KEY) : Promise.resolve(null)
+      ]);
+      const draft = asTransitionDesignerDraft(draftRaw);
+      const exSet = new Set(excludeRef.current ?? []);
+      const originIds = origin.filter((t) => !exSet.has(t.dbId)).map((t) => t.dbId);
+      const targetIds = target.filter((t) => !exSet.has(t.dbId)).map((t) => t.dbId);
+      const [po, pt] = padPair(
+        reconcileSlots(draft?.originOrder, originIds),
+        reconcileSlots(draft?.targetOrder, targetIds)
+      );
+      setOriginSlots(po);
+      setTargetSlots(pt);
+      setRowEffects(draft?.rowEffects ?? {});
+      setFromName(fName);
+      setToName(tName);
+      setLoad({ status: "ready", origin, target });
+    } catch (err) {
+      setLoad({
+        status: "error",
+        message: err instanceof Error ? err.message : "Failed to load tracks."
+      });
     }
+  }, [host, fromSceneId, toSceneId, transitionSceneId]);
+  useEffect9(() => {
+    void refresh();
+  }, [refresh]);
+  useEffect9(() => {
+    if (load.status !== "ready") return;
+    const [po, pt] = padPair(
+      reconcileSlots(originSlotsRef.current, originPool.map((t) => t.dbId)),
+      reconcileSlots(targetSlotsRef.current, targetPool.map((t) => t.dbId))
+    );
+    if (!slotsEqual(po, originSlotsRef.current)) setOriginSlots(po);
+    if (!slotsEqual(pt, targetSlotsRef.current)) setTargetSlots(pt);
+  }, [originPool, targetPool, load.status]);
+  const mutate = useCallback8(
+    (nextOrigin, nextTarget) => {
+      const norm = normalizeSlots(nextOrigin, nextTarget);
+      const [po, pt] = padPair(norm.originOrder, norm.targetOrder);
+      setOriginSlots(po);
+      setTargetSlots(pt);
+      if (host.setSceneData) {
+        host.setSceneData(transitionSceneId, TRANSITION_DESIGNER_DRAFT_KEY, { ...norm, rowEffects: rowEffectsRef.current }).catch(() => {
+        });
+      }
+    },
+    [host, transitionSceneId]
   );
-};
-
-// src/components/OffsetScrubber.tsx
-import { useCallback as useCallback8, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef11, useState as useState12 } from "react";
-import { jsx as jsx21, jsxs as jsxs15 } 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 trackRef = useRef11(null);
-  const [draftOffset, setDraftOffset] = useState12(offsetSamples);
-  const [isDragging, setIsDragging] = useState12(false);
-  useEffect12(() => {
-    if (!isDragging) setDraftOffset(offsetSamples);
-  }, [offsetSamples, isDragging]);
-  const sampleRate = cuePoints?.sample_rate ?? 44100;
-  const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
-  const beatsForRange = useMemo5(() => {
-    return Math.round(60 / projectBpm * sampleRate);
-  }, [projectBpm, sampleRate]);
-  const rangeSamples = beatsForRange * meter;
-  const sampleToFraction = useCallback8(
-    (sample) => {
-      const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
-      return (clamped + rangeSamples) / (2 * rangeSamples);
+  const setRowEffect = useCallback8(
+    (sourceDbId, effect) => {
+      setRowEffects((prev) => {
+        const next = { ...prev, [sourceDbId]: effect };
+        if (host.setSceneData) {
+          const norm = normalizeSlots(originSlotsRef.current, targetSlotsRef.current);
+          host.setSceneData(transitionSceneId, TRANSITION_DESIGNER_DRAFT_KEY, { ...norm, rowEffects: next }).catch(() => {
+          });
+        }
+        return next;
+      });
     },
-    [rangeSamples]
+    [host, transitionSceneId]
   );
-  const fractionToSample = useCallback8(
-    (fraction) => {
-      const clamped = Math.max(0, Math.min(1, fraction));
-      return Math.round(clamped * 2 * rangeSamples - rangeSamples);
+  const insertGapAbove = useCallback8(
+    (col, index) => {
+      const slots = col === "origin" ? originSlots : targetSlots;
+      const next = [...slots.slice(0, index), null, ...slots.slice(index)];
+      if (col === "origin") mutate(next, targetSlots);
+      else mutate(originSlots, next);
     },
-    [rangeSamples]
+    [originSlots, targetSlots, mutate]
   );
-  const snapTargets = useMemo5(() => {
-    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 = useCallback8(
-    (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;
+  const removeGap = useCallback8(
+    (col, index) => {
+      const slots = col === "origin" ? originSlots : targetSlots;
+      const next = slots.filter((_, i) => i !== index);
+      if (col === "origin") mutate(next, targetSlots);
+      else mutate(originSlots, next);
     },
-    [snapTargets]
+    [originSlots, targetSlots, mutate]
   );
-  const handlePointerDown = useCallback8(
-    (e) => {
-      if (disabled || !cuePoints) return;
-      e.preventDefault();
-      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);
+  const handleDrop = useCallback8(
+    (col, to) => {
+      const from = dragRef.current;
+      dragRef.current = null;
+      setDragging(null);
+      setDragOver(null);
+      if (!from || from.col !== col || from.index === to) return;
+      if (col === "origin") mutate(moveItem(originSlots, from.index, to), targetSlots);
+      else mutate(originSlots, moveItem(targetSlots, from.index, to));
     },
-    [disabled, cuePoints, fractionToSample, onChange, snapToBeat]
+    [originSlots, targetSlots, mutate]
   );
-  const handleResetToZero = useCallback8(() => {
-    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 = useMemo5(() => {
-    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 };
+  const rows = useMemo5(() => buildRowSlots(originSlots, targetSlots), [originSlots, targetSlots]);
+  const creatingDbIds = useMemo5(() => dbIdsFromKeys(creatingKeys), [creatingKeys]);
+  const eligibleCount = useMemo5(
+    () => rows.filter((r) => {
+      const k = rowKey(r);
+      return k !== null && !creatingKeys.has(k);
+    }).length,
+    [rows, creatingKeys]
+  );
+  const createRow = useCallback8(
+    async (row) => {
+      const key = rowKey(row);
+      if (!key || !row.type || creatingKeysRef.current.has(key)) return;
+      setCreatingKeys((prev) => new Set(prev).add(key));
+      setRowErrors((prev) => {
+        if (!(key in prev)) return prev;
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      try {
+        if (row.type === "crossfade") {
+          const o = row.originId ? originByIdRef.current.get(row.originId) : void 0;
+          const t = row.targetId ? targetByIdRef.current.get(row.targetId) : void 0;
+          if (!o || !t) throw new Error("Track is no longer available \u2014 refresh and retry.");
+          await onCreateCrossfade(
+            { dbId: o.dbId, name: o.name, role: o.role },
+            { dbId: t.dbId, name: t.name, role: t.role }
+          );
+        } else if (row.type === "fade-out") {
+          const o = row.originId ? originByIdRef.current.get(row.originId) : void 0;
+          if (!o) throw new Error("Track is no longer available \u2014 refresh and retry.");
+          const eff = rowEffectsRef.current[o.dbId] ?? "fade";
+          if (eff !== "fade" && onCreateAudioTransition) {
+            await onCreateAudioTransition({ dbId: o.dbId, name: o.name, role: o.role }, "out", eff);
+          } else {
+            await onCreateFade({ dbId: o.dbId, name: o.name, role: o.role }, "out", defaultFadeGesture(o.role));
+          }
+        } else {
+          const t = row.targetId ? targetByIdRef.current.get(row.targetId) : void 0;
+          if (!t) throw new Error("Track is no longer available \u2014 refresh and retry.");
+          const eff = rowEffectsRef.current[t.dbId] ?? "fade";
+          if (eff !== "fade" && onCreateAudioTransition) {
+            await onCreateAudioTransition({ dbId: t.dbId, name: t.name, role: t.role }, "in", eff);
+          } else {
+            await onCreateFade({ dbId: t.dbId, name: t.name, role: t.role }, "in", defaultFadeGesture(t.role));
+          }
+        }
+      } catch (err) {
+        setRowErrors((prev) => ({
+          ...prev,
+          [key]: err instanceof Error ? err.message : "Failed to create transition."
+        }));
+      } finally {
+        setCreatingKeys((prev) => {
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+      }
+    },
+    [onCreateCrossfade, onCreateFade, onCreateAudioTransition]
+  );
+  const createAll = useCallback8(async () => {
+    const eligible = buildRowSlots(originSlotsRef.current, targetSlotsRef.current).filter((r) => {
+      const k = rowKey(r);
+      return k !== null && !creatingKeysRef.current.has(k);
     });
-  }, [cuePoints, sampleToFraction]);
-  const isDisabled = disabled || !cuePoints || cuePoints.beats.length === 0;
-  return /* @__PURE__ */ jsxs15("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
-    /* @__PURE__ */ jsx21("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
-    /* @__PURE__ */ jsxs15(
+    if (eligible.length === 0) return;
+    let cursor = 0;
+    const worker = async () => {
+      while (cursor < eligible.length) {
+        const row = eligible[cursor];
+        cursor += 1;
+        await createRow(row);
+      }
+    };
+    await Promise.all(
+      Array.from({ length: Math.min(CREATE_ALL_CONCURRENCY, eligible.length) }, () => worker())
+    );
+  }, [createRow]);
+  const fromLabel = fromName ?? "origin";
+  const toLabel = toName ?? "target";
+  const cellDragProps = (col, index, locked) => ({
+    draggable: !locked,
+    onDragStart: (e) => {
+      if (locked) return;
+      dragRef.current = { col, index };
+      setDragging({ col, index });
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+        try {
+          e.dataTransfer.setData("text/plain", String(index));
+        } catch {
+        }
+      }
+    },
+    onDragEnd: () => {
+      dragRef.current = null;
+      setDragging(null);
+      setDragOver(null);
+    },
+    onDragEnter: (e) => {
+      const d = dragRef.current;
+      if (!d || d.col !== col) return;
+      e.preventDefault();
+      setDragOver({ col, index });
+    },
+    onDragOver: (e) => {
+      const d = dragRef.current;
+      if (!d || d.col !== col) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    },
+    onDragLeave: () => {
+      setDragOver((cur) => cur && cur.col === col && cur.index === index ? null : cur);
+    },
+    onDrop: (e) => {
+      e.preventDefault();
+      handleDrop(col, index);
+    }
+  });
+  const renderCell = (col, index, slotId) => {
+    const byId = col === "origin" ? originById : targetById;
+    const track = slotId ? byId.get(slotId) : void 0;
+    const locked = slotId !== null && creatingDbIds.has(slotId);
+    const isDragging = dragging?.col === col && dragging.index === index;
+    const isDragTarget = dragOver?.col === col && dragOver.index === index && !isDragging;
+    const base = "group relative rounded-sm border px-2 py-1.5 text-left transition-colors select-none";
+    const tone = isDragTarget ? "border-sas-accent bg-sas-accent/10" : "border-sas-border bg-sas-panel";
+    if (slotId === null) {
+      return /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          ...cellDragProps(col, index, false),
+          "data-testid": `${testIdPrefix}-${col}-gap-${index}`,
+          className: `${base} ${tone} border-dashed flex items-center justify-between ${isDragging ? "opacity-40" : "opacity-70"}`,
+          children: [
+            /* @__PURE__ */ jsx17("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted", children: "\u2014 gap \u2014" }),
+            /* @__PURE__ */ jsx17(
+              "button",
+              {
+                type: "button",
+                "data-testid": `${testIdPrefix}-${col}-remove-gap-${index}`,
+                onClick: () => removeGap(col, index),
+                title: "Remove gap",
+                className: "text-[10px] text-sas-muted hover:text-sas-danger",
+                children: "\u2715"
+              }
+            )
+          ]
+        }
+      );
+    }
+    const primary = track ? track.prompt?.trim() || track.name : slotId;
+    const meta = track ? [track.role, shortId3(track.dbId)].filter(Boolean).join(" \xB7 ") : "missing";
+    return /* @__PURE__ */ jsx17(
       "div",
       {
-        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: [
-          /* @__PURE__ */ jsx21(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "absolute top-0 bottom-0 w-px bg-sas-accent/40",
-              style: { left: "50%" }
-            }
-          ),
-          ticks.map((t) => /* @__PURE__ */ jsx21(
-            "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
-              }
-            },
-            t.i
-          )),
-          /* @__PURE__ */ jsx21(
-            "div",
+        ...cellDragProps(col, index, locked),
+        "data-testid": `${testIdPrefix}-${col}-cell-${slotId}`,
+        "data-value": slotId,
+        className: `${base} ${tone} ${isDragging ? "opacity-40" : ""} ${locked ? "opacity-60" : "cursor-grab active:cursor-grabbing"}`,
+        title: track ? track.dbId : "Track no longer available",
+        children: /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsx17("span", { className: "text-sas-muted/60 text-xs leading-tight pt-0.5", "aria-hidden": true, children: "\u283F" }),
+          /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-text truncate", children: primary }),
+            meta && /* @__PURE__ */ jsx17("div", { className: "text-[10px] text-sas-muted truncate mt-0.5", children: meta })
+          ] }),
+          /* @__PURE__ */ jsx17(
+            "button",
             {
-              "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"
-              }
+              type: "button",
+              "data-testid": `${testIdPrefix}-${col}-insert-gap-${index}`,
+              onClick: () => insertGapAbove(col, index),
+              disabled: locked,
+              title: "Insert a gap above (make this a fade)",
+              className: "text-[10px] text-sas-muted opacity-0 group-hover:opacity-100 hover:text-sas-accent disabled:opacity-30",
+              children: "+gap"
             }
           )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx21(
-      "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__ */ jsx21(
-      "button",
-      {
-        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"
-      }
-    ),
-    bpmMismatch && /* @__PURE__ */ jsx21(
-      "span",
-      {
-        "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"
+        ] })
       }
-    )
+    );
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-box`, children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-3 pb-1 border-b border-sas-border", children: [
+      /* @__PURE__ */ jsxs13("p", { className: "text-[11px] text-sas-muted leading-snug min-w-0", children: [
+        /* @__PURE__ */ jsx17("span", { className: "text-sas-text", children: fromLabel }),
+        " \u2192",
+        " ",
+        /* @__PURE__ */ jsx17("span", { className: "text-sas-text", children: toLabel }),
+        familyLabel ? ` \xB7 ${familyLabel}` : "",
+        " \xB7 line up a track on each side to crossfade; leave one blank (or insert a gap) to fade."
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 shrink-0", children: [
+        creatingKeys.size > 0 && /* @__PURE__ */ jsxs13("span", { className: "text-[10px] text-sas-accent whitespace-nowrap", "data-testid": `${testIdPrefix}-creating-count`, children: [
+          creatingKeys.size,
+          " creating\u2026"
+        ] }),
+        /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            type: "button",
+            "data-testid": `${testIdPrefix}-create-all`,
+            onClick: createAll,
+            disabled: eligibleCount === 0,
+            title: "Create every staged transition at once (runs several concurrently)",
+            className: `px-2 py-0.5 text-[10px] font-medium rounded-sm border transition-colors whitespace-nowrap ${eligibleCount > 0 ? "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: [
+              "Create all",
+              eligibleCount > 0 ? ` (${eligibleCount})` : ""
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-[1fr_auto_1fr] gap-2", children: [
+      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate", children: [
+        "Origin (",
+        fromLabel,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx17("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted text-center px-2", children: "Transition" }),
+      /* @__PURE__ */ jsxs13("span", { className: "text-[10px] uppercase tracking-wide text-sas-muted truncate text-right", children: [
+        "Target (",
+        toLabel,
+        ")"
+      ] })
+    ] }),
+    load.status === "loading" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-muted py-6 text-center", children: "Loading tracks\u2026" }),
+    load.status === "error" && /* @__PURE__ */ jsx17("div", { className: "text-xs text-sas-danger py-6 text-center", "data-testid": `${testIdPrefix}-error`, children: load.message }),
+    load.status === "ready" && (rows.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "text-xs text-sas-muted py-6 text-center", "data-testid": `${testIdPrefix}-empty`, children: [
+      "No tracks to arrange in this panel for either scene. Add tracks to ",
+      fromLabel,
+      " or ",
+      toLabel,
+      " ",
+      "first (or free one by deleting an existing crossfade/fade)."
+    ] }) : /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: rows.map((row, i) => {
+      const key = rowKey(row);
+      const isCreatingThis = key !== null && creatingKeys.has(key);
+      const errMsg = key !== null ? rowErrors[key] : void 0;
+      return /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          "data-testid": `${testIdPrefix}-row-${i}`,
+          className: "grid grid-cols-[1fr_auto_1fr] gap-2 items-center",
+          children: [
+            renderCell("origin", i, row.originId),
+            /* @__PURE__ */ jsxs13("div", { className: "w-[160px] flex flex-col items-center gap-1", children: [
+              !row.type ? /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-sas-muted/50", children: "\u2014" }) : row.type === "crossfade" ? /* @__PURE__ */ jsx17(
+                "span",
+                {
+                  "data-testid": `${testIdPrefix}-type-${i}`,
+                  className: "text-[10px] font-medium px-1.5 py-0.5 rounded-sm border border-sas-accent/50 text-sas-accent",
+                  children: TYPE_LABEL[row.type]
+                }
+              ) : audioEffectsEnabled ? /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", "data-testid": `${testIdPrefix}-type-${i}`, children: [
+                /* @__PURE__ */ jsx17(
+                  "select",
+                  {
+                    "data-testid": `${testIdPrefix}-effect-${i}`,
+                    value: rowEffects[row.originId ?? row.targetId] ?? "fade",
+                    onChange: (e) => {
+                      const id = row.originId ?? row.targetId;
+                      if (id) setRowEffect(id, e.target.value);
+                    },
+                    className: "text-[10px] bg-sas-panel border border-sas-border rounded-sm px-1 py-0.5 text-sas-text",
+                    children: AUDIO_EFFECTS.map((eff) => /* @__PURE__ */ jsx17("option", { value: eff, children: AUDIO_EFFECT_LABEL[eff] }, eff))
+                  }
+                ),
+                /* @__PURE__ */ jsx17("span", { className: "text-[9px] text-sas-muted", children: row.type === "fade-out" ? "out" : "in" })
+              ] }) : /* @__PURE__ */ jsx17(
+                "span",
+                {
+                  "data-testid": `${testIdPrefix}-type-${i}`,
+                  className: "text-[10px] font-medium px-1.5 py-0.5 rounded-sm border border-sas-border text-sas-muted",
+                  children: TYPE_LABEL[row.type]
+                }
+              ),
+              isCreatingThis ? /* @__PURE__ */ jsx17("div", { className: "w-full", children: /* @__PURE__ */ jsx17(
+                SorceryProgressBar,
+                {
+                  isLoading: true,
+                  heightClass: "h-5",
+                  statusText: "CREATING",
+                  estimatedDurationMs: row.type === "crossfade" ? CROSSFADE_ESTIMATE_MS : FADE_ESTIMATE_MS
+                }
+              ) }) : /* @__PURE__ */ jsx17(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": `${testIdPrefix}-create-${i}`,
+                  onClick: () => createRow(row),
+                  disabled: !row.type,
+                  className: `w-full px-2 py-0.5 text-[10px] font-medium rounded-sm border transition-colors ${row.type ? "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: "Create"
+                }
+              ),
+              errMsg && /* @__PURE__ */ jsx17(
+                "span",
+                {
+                  "data-testid": `${testIdPrefix}-row-error-${i}`,
+                  className: "text-[10px] text-sas-danger text-center leading-tight",
+                  children: errMsg
+                }
+              )
+            ] }),
+            renderCell("target", i, row.targetId)
+          ]
+        },
+        i
+      );
+    }) }))
   ] });
 }
-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/DownloadPackButton.tsx
+import { useCallback as useCallback9, useEffect as useEffect10, useState as useState12 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+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`;
 }
-
-// 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);
-  }
+var DownloadPackButton = ({
+  host,
+  packId,
+  displayName,
+  sizeBytes,
+  variant = "compact",
+  onDownloadComplete
+}) => {
+  const [status, setStatus] = useState12("idle");
+  const [progress, setProgress] = useState12(0);
+  const [errorMessage, setErrorMessage] = useState12(null);
+  useEffect10(() => {
+    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 = useCallback9(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__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx18(
+      "button",
+      {
+        "data-testid": `download-pack-button-${packId}`,
+        onClick: handleClick,
+        disabled: isDisabled,
+        className,
+        title: tooltip,
+        children: buttonLabel
+      }
+    ),
+    variant === "large" && status === "error" && errorMessage && /* @__PURE__ */ jsx18("div", { className: "text-xs text-sas-danger mt-2", "data-testid": `download-pack-error-${packId}`, children: errorMessage })
+  ] });
+};
+
+// src/components/SamplePackCTACard.tsx
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var SamplePackCTACard = ({
+  host,
+  pack,
+  status,
+  onDownloadComplete
+}) => {
+  if (status === "checking") {
+    return /* @__PURE__ */ jsx19(
+      "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__ */ jsxs15(
+    "div",
+    {
+      "data-testid": `sample-pack-cta-${pack.packId}`,
+      className: "flex flex-col items-center justify-center py-12 px-6 text-center",
+      children: [
+        /* @__PURE__ */ jsx19("div", { className: "text-sm uppercase tracking-wide text-sas-muted mb-2", children: status === "stale" ? "Update available" : "Sample library not installed" }),
+        /* @__PURE__ */ jsx19("div", { className: "text-base text-sas-text mb-1", children: headline }),
+        /* @__PURE__ */ jsx19("div", { className: "text-xs text-sas-muted mb-6 max-w-md", children: sublabel }),
+        /* @__PURE__ */ jsx19(
+          DownloadPackButton,
+          {
+            host,
+            packId: pack.packId,
+            displayName: pack.displayName,
+            sizeBytes: pack.sizeBytes,
+            variant: "large",
+            onDownloadComplete
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/WaveformView.tsx
+import { useEffect as useEffect11, useRef as useRef11, useState as useState13 } 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/WaveformView.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var WaveformView = ({
+  host,
+  filePath,
+  bins = 256,
+  className,
+  fillStyle,
+  targetSamples
+}) => {
+  const canvasRef = useRef11(null);
+  const [peaks, setPeaks] = useState13(null);
+  useEffect11(() => {
+    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]);
+  useEffect11(() => {
+    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__ */ jsx20(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-testid": "waveform-view",
+      className: className ?? "w-full h-10"
+    }
+  );
+};
+
+// src/components/ScrollingWaveform.tsx
+import { useEffect as useEffect12, useRef as useRef12 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ScrollingWaveform = ({
+  getPeakDb,
+  active,
+  columns = 256,
+  className,
+  fillStyle
+}) => {
+  const canvasRef = useRef12(null);
+  const ringRef = useRef12(new Float32Array(columns));
+  const writeIdxRef = useRef12(0);
+  const rafRef = useRef12(null);
+  useEffect12(() => {
+    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]);
+  useEffect12(() => {
+    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__ */ jsx21(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-testid": "scrolling-waveform",
+      className: className ?? "w-full h-12"
+    }
+  );
+};
+
+// src/components/OffsetScrubber.tsx
+import { useCallback as useCallback10, useEffect as useEffect13, useMemo as useMemo6, useRef as useRef13, useState as useState14 } from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+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 trackRef = useRef13(null);
+  const [draftOffset, setDraftOffset] = useState14(offsetSamples);
+  const [isDragging, setIsDragging] = useState14(false);
+  useEffect13(() => {
+    if (!isDragging) setDraftOffset(offsetSamples);
+  }, [offsetSamples, isDragging]);
+  const sampleRate = cuePoints?.sample_rate ?? 44100;
+  const detectedBpm = cuePoints?.detected_bpm ?? projectBpm;
+  const beatsForRange = useMemo6(() => {
+    return Math.round(60 / projectBpm * sampleRate);
+  }, [projectBpm, sampleRate]);
+  const rangeSamples = beatsForRange * meter;
+  const sampleToFraction = useCallback10(
+    (sample) => {
+      const clamped = Math.max(-rangeSamples, Math.min(rangeSamples, sample));
+      return (clamped + rangeSamples) / (2 * rangeSamples);
+    },
+    [rangeSamples]
+  );
+  const fractionToSample = useCallback10(
+    (fraction) => {
+      const clamped = Math.max(0, Math.min(1, fraction));
+      return Math.round(clamped * 2 * rangeSamples - rangeSamples);
+    },
+    [rangeSamples]
+  );
+  const snapTargets = useMemo6(() => {
+    if (!cuePoints || cuePoints.beats.length === 0) return [];
+    const downbeat = cuePoints.beats[0];
+    const positives = cuePoints.beats.map((b) => b - downbeat);
+    const negatives = positives.slice(1).map((p) => -p);
+    return [...negatives, ...positives].sort((a, b) => a - b);
+  }, [cuePoints]);
+  const snapToBeat = useCallback10(
+    (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 = useCallback10(
+    (e) => {
+      if (disabled || !cuePoints) return;
+      e.preventDefault();
+      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 = useCallback10(() => {
+    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 = useMemo6(() => {
+    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__ */ jsxs16("div", { "data-testid": "offset-scrubber", className: "flex items-center gap-2 w-full", children: [
+    /* @__PURE__ */ jsx22("span", { className: "text-[9px] text-sas-muted/60 uppercase tracking-wide flex-shrink-0", children: "Align" }),
+    /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        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: [
+          /* @__PURE__ */ jsx22(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-0 bottom-0 w-px bg-sas-accent/40",
+              style: { left: "50%" }
+            }
+          ),
+          ticks.map((t) => /* @__PURE__ */ jsx22(
+            "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
+              }
+            },
+            t.i
+          )),
+          /* @__PURE__ */ jsx22(
+            "div",
+            {
+              "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__ */ jsx22(
+      "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__ */ jsx22(
+      "button",
+      {
+        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"
+      }
+    ),
+    bpmMismatch && /* @__PURE__ */ jsx22(
+      "span",
+      {
+        "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/panel-core/useGeneratorPanelCore.tsx
+import { useState as useState19, useEffect as useEffect16, useCallback as useCallback14, useRef as useRef17, useMemo as useMemo8 } from "react";
+
+// src/hooks/useSceneState.ts
+import { useState as useState15, useCallback as useCallback11, useRef as useRef14 } from "react";
+function useSceneState(activeSceneId, initialValue) {
+  const [stateMap, setStateMap] = useState15(() => /* @__PURE__ */ new Map());
+  const activeSceneIdRef = useRef14(activeSceneId);
+  activeSceneIdRef.current = activeSceneId;
+  const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
+  const setForCurrentScene = useCallback11((value) => {
+    const sid = activeSceneIdRef.current;
+    if (sid === null) return;
+    setStateMap((prev) => {
+      const current = prev.has(sid) ? prev.get(sid) : initialValue;
+      const next = typeof value === "function" ? value(current) : value;
+      const newMap = new Map(prev);
+      newMap.set(sid, next);
+      return newMap;
+    });
+  }, [initialValue]);
+  const setForScene = useCallback11((sceneId, value) => {
+    setStateMap((prev) => {
+      const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
+      const next = typeof value === "function" ? value(current) : value;
+      const newMap = new Map(prev);
+      newMap.set(sceneId, next);
+      return newMap;
+    });
+  }, [initialValue]);
+  return [currentValue, setForCurrentScene, setForScene];
+}
+
+// src/hooks/useAnySolo.ts
+import { useEffect as useEffect14, useState as useState16 } from "react";
+function useAnySolo(host) {
+  const [anySolo, setAnySolo] = useState16(false);
+  useEffect14(() => {
+    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 useCallback12, useMemo as useMemo7, useRef as useRef15, useState as useState17 } 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 = useRef15(applySound);
+  applyRef.current = applySound;
+  const onChangeRef = useRef15(opts.onChange);
+  onChangeRef.current = opts.onChange;
+  const dataRef = useRef15({});
+  const [, setVersion] = useState17(0);
+  const bump = useCallback12(() => setVersion((v) => v + 1), []);
+  const commit = useCallback12(
+    (trackId, next, notify) => {
+      dataRef.current = { ...dataRef.current, [trackId]: next };
+      bump();
+      if (notify) onChangeRef.current?.(trackId, next);
+    },
+    [bump]
+  );
+  const record = useCallback12(
+    (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 = useCallback12(
+    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 = useCallback12(
+    (trackId) => {
+      const h = dataRef.current[trackId];
+      if (!h || h.cursor <= 0) return Promise.resolve(false);
+      return restoreTo(trackId, h.cursor - 1);
+    },
+    [restoreTo]
+  );
+  const toggleFavorite = useCallback12(
+    (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 = useCallback12(
+    (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 = useCallback12(
+    (trackId) => dataRef.current[trackId] ?? EMPTY,
+    []
+  );
+  const canUndo = useCallback12((trackId) => {
+    const h = dataRef.current[trackId];
+    return !!h && h.cursor > 0;
+  }, []);
+  const clear = useCallback12(
+    (trackId) => {
+      if (dataRef.current[trackId]) {
+        const next = { ...dataRef.current };
+        delete next[trackId];
+        dataRef.current = next;
+        bump();
+      }
+      onChangeRef.current?.(trackId, EMPTY);
+    },
+    [bump]
+  );
+  const reset = useCallback12(() => {
+    dataRef.current = {};
+    bump();
+  }, [bump]);
+  return useMemo7(
+    () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
+    [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
+  );
+}
+
+// src/panel-core/track-state.ts
+function newTrackState(handle, overrides = {}) {
   return {
-    schema: 1,
-    sample_rate: safeSampleRate,
-    detected_bpm: safeBpm,
-    downbeat_sample: 0,
-    beats,
-    detected_at: (/* @__PURE__ */ new Date()).toISOString()
+    handle,
+    prompt: "",
+    role: "",
+    runtimeState: { id: handle.id, muted: false, solo: false, volume: 0.75, pan: 0 },
+    fxDetailState: { ...EMPTY_FX_DETAIL_STATE },
+    drawerOpen: false,
+    drawerTab: "fx",
+    editorStage: false,
+    isGenerating: false,
+    error: null,
+    hasMidi: false,
+    generationProgress: 0,
+    editNotes: [],
+    editBars: 4,
+    editBpm: 120,
+    instrumentPluginId: handle.instrumentPluginId ?? null,
+    instrumentName: handle.instrumentName ?? null,
+    instrumentMissing: false,
+    shuffleHistory: /* @__PURE__ */ new Set(),
+    ...overrides
   };
 }
 
-// src/hooks/useSceneState.ts
-import { useState as useState13, useCallback as useCallback9, useRef as useRef12 } from "react";
-function useSceneState(activeSceneId, initialValue) {
-  const [stateMap, setStateMap] = useState13(() => /* @__PURE__ */ new Map());
-  const activeSceneIdRef = useRef12(activeSceneId);
-  activeSceneIdRef.current = activeSceneId;
-  const currentValue = activeSceneId !== null && stateMap.has(activeSceneId) ? stateMap.get(activeSceneId) : initialValue;
-  const setForCurrentScene = useCallback9((value) => {
-    const sid = activeSceneIdRef.current;
-    if (sid === null) return;
-    setStateMap((prev) => {
-      const current = prev.has(sid) ? prev.get(sid) : initialValue;
-      const next = typeof value === "function" ? value(current) : value;
-      const newMap = new Map(prev);
-      newMap.set(sid, next);
-      return newMap;
+// src/panel-core/panel-helpers.ts
+function trackDataKey(dbId, suffix) {
+  return `track:${dbId}:${suffix}`;
+}
+function pluginFxToToggleFx(sdkState) {
+  const result = { ...EMPTY_FX_DETAIL_STATE };
+  for (const category of ["eq", "compressor", "chorus", "phaser", "delay", "reverb"]) {
+    const sdkCat = sdkState[category];
+    if (sdkCat) {
+      result[category] = {
+        enabled: sdkCat.enabled,
+        presetIndex: sdkCat.presetIndex,
+        dryWet: sdkCat.dryWet
+      };
+    }
+  }
+  return result;
+}
+function parseLLMNoteResponse(content) {
+  try {
+    let jsonStr = content.trim();
+    const fenceMatch = jsonStr.match(/```(?:json)?\s*\n?([\s\S]*?)```/);
+    if (fenceMatch) {
+      jsonStr = fenceMatch[1].trim();
+    }
+    const parsed = JSON.parse(jsonStr);
+    if (typeof parsed !== "object" || parsed === null || !("notes" in parsed)) {
+      return null;
+    }
+    const obj = parsed;
+    if (!Array.isArray(obj.notes)) {
+      return null;
+    }
+    const validNotes = [];
+    for (const raw of obj.notes) {
+      if (typeof raw !== "object" || raw === null) continue;
+      const note = raw;
+      const pitch = typeof note.pitch === "number" ? note.pitch : NaN;
+      const startBeat = typeof note.startBeat === "number" ? note.startBeat : NaN;
+      const durationBeats = typeof note.durationBeats === "number" ? note.durationBeats : NaN;
+      const velocity = typeof note.velocity === "number" ? note.velocity : NaN;
+      if (!isNaN(pitch) && pitch >= 0 && pitch <= 127 && !isNaN(startBeat) && startBeat >= 0 && !isNaN(durationBeats) && durationBeats > 0 && !isNaN(velocity) && velocity >= 1 && velocity <= 127) {
+        validNotes.push({
+          pitch: Math.round(pitch),
+          startBeat,
+          durationBeats,
+          velocity: Math.round(velocity)
+        });
+      }
+    }
+    const role = typeof obj.role === "string" ? obj.role : void 0;
+    return { notes: validNotes, role };
+  } catch {
+    return null;
+  }
+}
+
+// src/panel-core/group-meta.ts
+function parseTrackGroups(sceneData, spec) {
+  const pattern = new RegExp(`^track:(.+):${spec.metaKey}$`);
+  const groups = /* @__PURE__ */ new Map();
+  for (const [key, val] of Object.entries(sceneData)) {
+    const match = pattern.exec(key);
+    if (!match) continue;
+    const meta = spec.asMeta(val);
+    if (!meta) continue;
+    const groupId = spec.groupIdOf(meta);
+    const list = groups.get(groupId) ?? [];
+    list.push({ dbId: match[1], meta });
+    groups.set(groupId, list);
+  }
+  const out = [];
+  for (const [groupId, members] of groups) {
+    if (spec.sortMembers) members.sort(spec.sortMembers);
+    out.push({ groupId, members });
+  }
+  return out;
+}
+function resolveTrackGroups(parsedGroups, tracks, getDbId, opts = {}) {
+  const byDbId = /* @__PURE__ */ new Map();
+  for (const t of tracks) byDbId.set(getDbId(t), t);
+  const resolved = [];
+  const memberDbIds = /* @__PURE__ */ new Set();
+  const staleMemberDbIds = [];
+  for (const parsed of parsedGroups) {
+    const live = { groupId: parsed.groupId, members: [] };
+    for (const member of parsed.members) {
+      const track = byDbId.get(member.dbId);
+      if (track) live.members.push({ dbId: member.dbId, meta: member.meta, track });
+      else staleMemberDbIds.push(member.dbId);
+    }
+    if (live.members.length === 0) continue;
+    const complete = opts.isComplete ? opts.isComplete(live, parsed) : live.members.length === parsed.members.length;
+    if (!complete) continue;
+    resolved.push(live);
+    for (const m of live.members) memberDbIds.add(m.dbId);
+  }
+  return { resolved, memberDbIds, staleMemberDbIds };
+}
+
+// src/panel-core/useTransitionOps.ts
+import { useCallback as useCallback13, useEffect as useEffect15, useRef as useRef16, useState as useState18 } from "react";
+function useTransitionOps({
+  host,
+  adapter,
+  activeSceneId,
+  isConnected,
+  isAuthenticated,
+  sceneContext,
+  tracks,
+  setTracks,
+  loadTracks,
+  setCrossfadePairsMeta,
+  setFadesMeta,
+  resolvedCrossfadePairs,
+  resolvedFades
+}) {
+  const { identity } = adapter;
+  const appliedFadeAutomationRef = useRef16(/* @__PURE__ */ new Set());
+  const applyCrossfadeAutomation = useCallback13(
+    async (originTrackId, targetTrackId, bars, bpm, sliderPos) => {
+      if (host.setTrackVolumeAutomation) {
+        const curves = buildCrossfadeVolumeCurves(bars, bpm, sliderPos);
+        await host.setTrackVolumeAutomation(originTrackId, curves.origin).catch(() => {
+        });
+        await host.setTrackVolumeAutomation(targetTrackId, curves.target).catch(() => {
+        });
+      } else {
+        await host.setTrackVolume(originTrackId, EQUAL_POWER_GAIN).catch(() => {
+        });
+        await host.setTrackVolume(targetTrackId, EQUAL_POWER_GAIN).catch(() => {
+        });
+      }
+    },
+    [host]
+  );
+  const applyFadeAutomation = useCallback13(
+    async (trackId, direction, bars, bpm, sliderPos, gesture) => {
+      if (!host.setTrackVolumeAutomation) return;
+      const points = buildFadeVolumeCurve(bars, bpm, direction, sliderPos, gesture);
+      await host.setTrackVolumeAutomation(trackId, points).catch(() => {
+      });
+    },
+    [host]
+  );
+  const [isCreatingCrossfade, setIsCreatingCrossfade] = useState18(false);
+  const handleCreateCrossfade = useCallback13(
+    async (origin, target) => {
+      const scene = activeSceneId;
+      const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
+      const toSceneId = sceneContext?.transitionToSceneId ?? "";
+      if (!scene) throw new Error("No active scene.");
+      if (!isConnected) throw new Error("Systems not connected.");
+      if (!isAuthenticated) throw new Error("Please sign in to generate the bridge.");
+      if (tracks.length + 2 > identity.maxTracks) {
+        throw new Error("Not enough track slots for a crossfade.");
+      }
+      setIsCreatingCrossfade(true);
+      const created = [];
+      try {
+        const role = target.role ?? origin.role ?? "";
+        const mc = await host.getMusicalContext();
+        const [originMidi, targetMidi, originKey, targetKey] = await Promise.all([
+          host.readImportableTrackMidi ? host.readImportableTrackMidi(origin.dbId) : Promise.resolve({ clips: [] }),
+          host.readImportableTrackMidi ? host.readImportableTrackMidi(target.dbId) : Promise.resolve({ clips: [] }),
+          host.getSceneKey ? host.getSceneKey(fromSceneId) : Promise.resolve(null),
+          host.getSceneKey ? host.getSceneKey(toSceneId) : Promise.resolve(null)
+        ]);
+        const userPrompt = buildCrossfadeInpaintPrompt({
+          role,
+          bars: mc.bars,
+          originName: origin.name,
+          targetName: target.name,
+          originKey: originKey ? `${originKey.key} ${originKey.mode}` : null,
+          targetKey: targetKey ? `${targetKey.key} ${targetKey.mode}` : null,
+          originNotes: originMidi.clips[0]?.notes ?? [],
+          targetNotes: targetMidi.clips[0]?.notes ?? []
+        });
+        const llm = await host.generateWithLLM({
+          system: adapter.buildSystemPrompt(host.getValidRoles()),
+          user: userPrompt,
+          responseFormat: "json"
+        });
+        const parsed = adapter.parseNotesResponse(llm.content);
+        if (!parsed || parsed.notes.length === 0) {
+          throw new Error("The bridge generator returned no notes.");
+        }
+        const notes = await host.postProcessMidi(parsed.notes, {
+          quantize: true,
+          removeOverlaps: true
+        });
+        const clip = {
+          startTime: 0,
+          endTime: mc.bars * 4 * 60 / mc.bpm,
+          tempo: mc.bpm,
+          notes
+        };
+        const top = await host.createTrack({
+          name: `${identity.trackNamePrefix}-${Date.now()}-xf-o`,
+          ...adapter.createTrackOptions()
+        });
+        created.push(top);
+        const bottom = await host.createTrack({
+          name: `${identity.trackNamePrefix}-${Date.now()}-xf-t`,
+          ...adapter.createTrackOptions()
+        });
+        created.push(bottom);
+        if (role) {
+          await host.setTrackRole(top.id, role).catch(() => {
+          });
+          await host.setTrackRole(bottom.id, role).catch(() => {
+          });
+        }
+        await host.writeMidiClip(top.id, clip);
+        await host.writeMidiClip(bottom.id, clip);
+        const copySound = async (newTrackId, sourceDbId) => {
+          if (!host.getTrackSound) return "default";
+          const snap = await host.getTrackSound(sourceDbId);
+          if (!snap || snap.kind !== adapter.sound.acceptedSnapshotKind) return "default";
+          return adapter.sound.copySnapshot(newTrackId, snap);
+        };
+        const originLabel = await copySound(top.id, origin.dbId);
+        const targetLabel = await copySound(bottom.id, target.dbId);
+        await applyCrossfadeAutomation(top.id, bottom.id, mc.bars, mc.bpm, 0.5);
+        const groupId = top.dbId;
+        const originMeta = {
+          groupId,
+          slot: "origin",
+          partnerDbId: bottom.dbId,
+          sourceTrackDbId: origin.dbId,
+          sourceSceneId: fromSceneId,
+          sourceName: origin.name,
+          soundLabel: originLabel,
+          sliderPos: 0.5
+        };
+        const targetMeta = {
+          groupId,
+          slot: "target",
+          partnerDbId: top.dbId,
+          sourceTrackDbId: target.dbId,
+          sourceSceneId: toSceneId,
+          sourceName: target.name,
+          soundLabel: targetLabel,
+          sliderPos: 0.5
+        };
+        await host.setSceneData(scene, `track:${top.dbId}:crossfade`, originMeta);
+        await host.setSceneData(scene, `track:${bottom.dbId}:crossfade`, targetMeta);
+        await loadTracks(true);
+        host.showToast("success", "Crossfade created", `${origin.name} \u2192 ${target.name}`);
+      } catch (err) {
+        for (const h of [...created].reverse()) {
+          try {
+            await host.deleteTrack(h.id);
+          } catch {
+          }
+        }
+        throw err instanceof Error ? err : new Error(String(err));
+      } finally {
+        setIsCreatingCrossfade(false);
+      }
+    },
+    [
+      host,
+      adapter,
+      identity,
+      activeSceneId,
+      isConnected,
+      isAuthenticated,
+      tracks.length,
+      sceneContext,
+      applyCrossfadeAutomation,
+      loadTracks
+    ]
+  );
+  const [isCreatingFade, setIsCreatingFade] = useState18(false);
+  const handleCreateFade = useCallback13(
+    async (selection, direction, gesture) => {
+      const scene = activeSceneId;
+      const fromSceneId = sceneContext?.transitionFromSceneId ?? "";
+      const toSceneId = sceneContext?.transitionToSceneId ?? "";
+      if (!scene) throw new Error("No active scene.");
+      if (!isConnected) throw new Error("Systems not connected.");
+      if (!isAuthenticated) throw new Error("Please sign in to generate the fade.");
+      if (tracks.length + 1 > identity.maxTracks) {
+        throw new Error("Not enough track slots for a fade.");
+      }
+      setIsCreatingFade(true);
+      const created = [];
+      try {
+        const role = selection.role ?? "";
+        const sourceSceneId = direction === "out" ? fromSceneId : toSceneId;
+        const mc = await host.getMusicalContext();
+        const [srcMidi, srcKey] = await Promise.all([
+          host.readImportableTrackMidi ? host.readImportableTrackMidi(selection.dbId) : Promise.resolve({ clips: [] }),
+          host.getSceneKey ? host.getSceneKey(sourceSceneId) : Promise.resolve(null)
+        ]);
+        const srcNotes = srcMidi.clips[0]?.notes ?? [];
+        const keyStr = srcKey ? `${srcKey.key} ${srcKey.mode}` : null;
+        const userPrompt = buildCrossfadeInpaintPrompt({
+          role,
+          bars: mc.bars,
+          originName: direction === "out" ? selection.name : "silence",
+          targetName: direction === "in" ? selection.name : "silence",
+          originKey: direction === "out" ? keyStr : null,
+          targetKey: direction === "in" ? keyStr : null,
+          originNotes: direction === "out" ? srcNotes : [],
+          targetNotes: direction === "in" ? srcNotes : []
+        });
+        const llm = await host.generateWithLLM({
+          system: adapter.buildSystemPrompt(host.getValidRoles()),
+          user: userPrompt,
+          responseFormat: "json"
+        });
+        const parsed = adapter.parseNotesResponse(llm.content);
+        if (!parsed || parsed.notes.length === 0) {
+          throw new Error("The fade generator returned no notes.");
+        }
+        const notes = await host.postProcessMidi(parsed.notes, {
+          quantize: true,
+          removeOverlaps: true
+        });
+        const clip = {
+          startTime: 0,
+          endTime: mc.bars * 4 * 60 / mc.bpm,
+          tempo: mc.bpm,
+          notes
+        };
+        const track = await host.createTrack({
+          name: `${identity.trackNamePrefix}-${Date.now()}-fade-${direction}`,
+          ...adapter.createTrackOptions()
+        });
+        created.push(track);
+        if (role) await host.setTrackRole(track.id, role).catch(() => {
+        });
+        await host.writeMidiClip(track.id, clip);
+        let soundLabel = "default";
+        if (host.getTrackSound) {
+          const snap = await host.getTrackSound(selection.dbId);
+          if (snap && snap.kind === adapter.sound.acceptedSnapshotKind) {
+            soundLabel = await adapter.sound.copySnapshot(track.id, snap);
+          }
+        }
+        await applyFadeAutomation(track.id, direction, mc.bars, mc.bpm, 0.5, gesture);
+        appliedFadeAutomationRef.current.add(track.id);
+        const meta = {
+          direction,
+          gesture,
+          sourceTrackDbId: selection.dbId,
+          sourceSceneId,
+          sourceName: selection.name,
+          soundLabel,
+          sliderPos: 0.5
+        };
+        await host.setSceneData(scene, `track:${track.dbId}:fade`, meta);
+        await loadTracks(true);
+        host.showToast(
+          "success",
+          direction === "in" ? "Fade in created" : "Fade out created",
+          selection.name
+        );
+      } catch (err) {
+        for (const h of [...created].reverse()) {
+          try {
+            await host.deleteTrack(h.id);
+          } catch {
+          }
+        }
+        throw err instanceof Error ? err : new Error(String(err));
+      } finally {
+        setIsCreatingFade(false);
+      }
+    },
+    [
+      host,
+      adapter,
+      identity,
+      activeSceneId,
+      isConnected,
+      isAuthenticated,
+      tracks.length,
+      sceneContext,
+      applyFadeAutomation,
+      loadTracks
+    ]
+  );
+  const handleCrossfadeMute = useCallback13(
+    (pair) => {
+      const newMuted = !pair.origin.runtimeState.muted;
+      for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
+        setTracks(
+          (prev) => prev.map(
+            (t) => t.handle.id === id ? { ...t, runtimeState: { ...t.runtimeState, muted: newMuted } } : t
+          )
+        );
+        host.setTrackMute(id, newMuted).catch(() => {
+        });
+      }
+    },
+    [host, setTracks]
+  );
+  const handleCrossfadeSolo = useCallback13(
+    (pair) => {
+      const newSolo = !pair.origin.runtimeState.solo;
+      for (const id of [pair.origin.handle.id, pair.target.handle.id]) {
+        setTracks(
+          (prev) => prev.map(
+            (t) => t.handle.id === id ? { ...t, runtimeState: { ...t.runtimeState, solo: newSolo } } : t
+          )
+        );
+        host.setTrackSolo(id, newSolo).catch(() => {
+        });
+      }
+    },
+    [host, setTracks]
+  );
+  const handleCrossfadeDelete = useCallback13(
+    async (pair) => {
+      try {
+        for (const member of [pair.origin, pair.target]) {
+          await host.deleteTrack(member.handle.id);
+          if (activeSceneId) {
+            await host.deleteSceneData(activeSceneId, `track:${member.handle.dbId}:crossfade`);
+          }
+        }
+        setCrossfadePairsMeta((prev) => prev.filter((p) => p.groupId !== pair.groupId));
+        setTracks(
+          (prev) => prev.filter(
+            (t) => t.handle.id !== pair.origin.handle.id && t.handle.id !== pair.target.handle.id
+          )
+        );
+        host.showToast("success", "Crossfade removed");
+      } catch (err) {
+        host.showToast(
+          "error",
+          "Failed to delete crossfade",
+          err instanceof Error ? err.message : String(err)
+        );
+      }
+    },
+    [host, activeSceneId, setCrossfadePairsMeta, setTracks]
+  );
+  const crossfadeSliderTimers = useRef16({});
+  const handleCrossfadeSlider = useCallback13(
+    (pair, pos) => {
+      setCrossfadePairsMeta(
+        (prev) => prev.map((p) => p.groupId === pair.groupId ? { ...p, sliderPos: pos } : p)
+      );
+      if (crossfadeSliderTimers.current[pair.groupId]) {
+        clearTimeout(crossfadeSliderTimers.current[pair.groupId]);
+      }
+      crossfadeSliderTimers.current[pair.groupId] = setTimeout(() => {
+        void (async () => {
+          const mc = await host.getMusicalContext();
+          await applyCrossfadeAutomation(
+            pair.origin.handle.id,
+            pair.target.handle.id,
+            mc.bars,
+            mc.bpm,
+            pos
+          );
+          if (activeSceneId) {
+            const sceneData = await host.getAllSceneData(activeSceneId);
+            for (const dbId of [pair.originDbId, pair.targetDbId]) {
+              const meta = asCrossfadeMeta(sceneData[`track:${dbId}:crossfade`]);
+              if (meta) {
+                host.setSceneData(activeSceneId, `track:${dbId}:crossfade`, { ...meta, sliderPos: pos }).catch(() => {
+                });
+              }
+            }
+          }
+        })();
+      }, 200);
+    },
+    [host, activeSceneId, applyCrossfadeAutomation, setCrossfadePairsMeta]
+  );
+  const handleFadeDelete = useCallback13(
+    async (fade) => {
+      try {
+        await host.deleteTrack(fade.track.handle.id);
+        if (activeSceneId) {
+          await host.deleteSceneData(activeSceneId, `track:${fade.dbId}:fade`);
+        }
+        setFadesMeta((prev) => prev.filter((f) => f.dbId !== fade.dbId));
+        setTracks((prev) => prev.filter((t) => t.handle.id !== fade.track.handle.id));
+        host.showToast("success", "Fade removed");
+      } catch (err) {
+        host.showToast(
+          "error",
+          "Failed to delete fade",
+          err instanceof Error ? err.message : String(err)
+        );
+      }
+    },
+    [host, activeSceneId, setFadesMeta, setTracks]
+  );
+  const fadeSliderTimers = useRef16({});
+  const handleFadeSlider = useCallback13(
+    (fade, pos) => {
+      setFadesMeta(
+        (prev) => prev.map((f) => f.dbId === fade.dbId ? { ...f, meta: { ...f.meta, sliderPos: pos } } : f)
+      );
+      if (fadeSliderTimers.current[fade.dbId]) clearTimeout(fadeSliderTimers.current[fade.dbId]);
+      fadeSliderTimers.current[fade.dbId] = setTimeout(() => {
+        void (async () => {
+          const mc = await host.getMusicalContext();
+          await applyFadeAutomation(
+            fade.track.handle.id,
+            fade.meta.direction,
+            mc.bars,
+            mc.bpm,
+            pos,
+            fade.meta.gesture
+          );
+          if (activeSceneId) {
+            const sceneData = await host.getAllSceneData(activeSceneId);
+            const meta = asFadeMeta(sceneData[`track:${fade.dbId}:fade`]);
+            if (meta) {
+              host.setSceneData(activeSceneId, `track:${fade.dbId}:fade`, { ...meta, sliderPos: pos }).catch(() => {
+              });
+            }
+          }
+        })();
+      }, 200);
+    },
+    [host, activeSceneId, applyFadeAutomation, setFadesMeta]
+  );
+  const lastResyncKeyRef = useRef16("");
+  useEffect15(() => {
+    if (!host.getTrackSound || resolvedCrossfadePairs.length === 0 && resolvedFades.length === 0) {
+      return;
+    }
+    const resyncKey = [
+      ...resolvedCrossfadePairs.map(
+        (p) => `${p.origin.handle.dbId}<${p.originSourceDbId}|${p.target.handle.dbId}<${p.targetSourceDbId}`
+      ),
+      ...resolvedFades.map((f) => `${f.track.handle.dbId}<${f.meta.sourceTrackDbId}`)
+    ].join(",");
+    if (resyncKey === lastResyncKeyRef.current) return;
+    lastResyncKeyRef.current = resyncKey;
+    let cancelled = false;
+    const reapplyIfDrifted = async (layerTrackId, layerDbId, sourceDbId) => {
+      if (!host.getTrackSound || cancelled) return;
+      const [sourceSnap, layerSnap] = await Promise.all([
+        host.getTrackSound(sourceDbId),
+        host.getTrackSound(layerDbId)
+      ]);
+      if (cancelled || !sourceSnap || sourceSnap.kind !== adapter.sound.acceptedSnapshotKind) {
+        return;
+      }
+      if (soundIdentity(sourceSnap) === soundIdentity(layerSnap)) return;
+      try {
+        await adapter.sound.copySnapshot(layerTrackId, sourceSnap);
+      } catch {
+      }
+    };
+    void (async () => {
+      for (const pair of resolvedCrossfadePairs) {
+        await reapplyIfDrifted(pair.origin.handle.id, pair.origin.handle.dbId, pair.originSourceDbId);
+        await reapplyIfDrifted(pair.target.handle.id, pair.target.handle.dbId, pair.targetSourceDbId);
+      }
+      for (const fade of resolvedFades) {
+        await reapplyIfDrifted(fade.track.handle.id, fade.track.handle.dbId, fade.meta.sourceTrackDbId);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedCrossfadePairs, resolvedFades, host, adapter]);
+  useEffect15(() => {
+    if (!host.setTrackVolumeAutomation || resolvedFades.length === 0) return;
+    void (async () => {
+      const mc = await host.getMusicalContext();
+      for (const fade of resolvedFades) {
+        const id = fade.track.handle.id;
+        if (appliedFadeAutomationRef.current.has(id)) continue;
+        appliedFadeAutomationRef.current.add(id);
+        await applyFadeAutomation(
+          id,
+          fade.meta.direction,
+          mc.bars,
+          mc.bpm,
+          fade.meta.sliderPos,
+          fade.meta.gesture
+        );
+      }
+    })();
+  }, [resolvedFades, host, applyFadeAutomation]);
+  return {
+    isCreatingCrossfade,
+    isCreatingFade,
+    handleCreateCrossfade,
+    handleCreateFade,
+    handleCrossfadeMute,
+    handleCrossfadeSolo,
+    handleCrossfadeDelete,
+    handleCrossfadeSlider,
+    handleFadeDelete,
+    handleFadeSlider
+  };
+}
+
+// src/panel-core/useGeneratorPanelCore.tsx
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var EMPTY_PLACEHOLDERS = [];
+function useGeneratorPanelCore({
+  ui,
+  adapter
+}) {
+  const {
+    host,
+    activeSceneId,
+    isAuthenticated,
+    isConnected,
+    onHeaderContent,
+    onLoading,
+    sceneContext,
+    onOpenContract,
+    onExpandSelf,
+    isExpanded
+  } = ui;
+  const { identity, features } = adapter;
+  const logTag = identity.logTag;
+  const adapterRef = useRef17(adapter);
+  useEffect16(() => {
+    if (adapterRef.current !== adapter) {
+      adapterRef.current = adapter;
+      console.warn(
+        `[${logTag}] GeneratorPanelAdapter identity changed between renders \u2014 wrap it in useMemo(() => createAdapter(host), [host]) to avoid load loops.`
+      );
+    }
+  }, [adapter, logTag]);
+  const supportsMeters = typeof host.getTrackLevels === "function";
+  const trackLevels = useTrackLevels(host, isExpanded);
+  const [tracks, setTracks] = useState19([]);
+  const [isLoadingTracks, setIsLoadingTracks] = useState19(false);
+  const [importOpen, setImportOpen] = useState19(false);
+  const [soundImportTarget, setSoundImportTarget] = useState19(null);
+  const [designerView, setDesignerView] = useState19(false);
+  const [transitionSourceTotal, setTransitionSourceTotal] = useState19(0);
+  const [crossfadePairsMeta, setCrossfadePairsMeta] = useState19([]);
+  const [fadesMeta, setFadesMeta] = useState19([]);
+  const [genericGroupMetas, setGenericGroupMetas] = useState19({});
+  const [isComposing, , setIsComposingForScene] = useSceneState(activeSceneId, false);
+  const [placeholders, , setPlaceholdersForScene] = useSceneState(
+    activeSceneId,
+    EMPTY_PLACEHOLDERS
+  );
+  const saveTimeoutRefs = useRef17({});
+  const editLoadStartedRef = useRef17(/* @__PURE__ */ new Set());
+  const [availableInstruments, setAvailableInstruments] = useState19([]);
+  const [instrumentsLoading, setInstrumentsLoading] = useState19(false);
+  const engineToDbIdRef = useRef17(/* @__PURE__ */ new Map());
+  const tracksLoadedForSceneRef = useRef17(null);
+  const persistSoundHistory = useCallback14(
+    (trackId, state) => {
+      if (!activeSceneId) return;
+      const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
+      host.setSceneData(activeSceneId, trackDataKey(dbId, "soundHistory"), state).catch(() => {
+      });
+    },
+    [host, activeSceneId]
+  );
+  const soundHistory = useSoundHistory(adapter.sound.applySound, {
+    max: adapter.sound.historyMax,
+    onChange: persistSoundHistory
+  });
+  const anySolo = useAnySolo(host);
+  const reorder = useTrackReorder({
+    host,
+    items: tracks,
+    setItems: setTracks,
+    getId: (t) => t.handle.dbId
+  });
+  const loadTracks = useCallback14(
+    async (incremental = false) => {
+      const sceneAtStart = activeSceneId;
+      if (!sceneAtStart) {
+        setTracks([]);
+        setCrossfadePairsMeta([]);
+        setFadesMeta([]);
+        setGenericGroupMetas({});
+        tracksLoadedForSceneRef.current = null;
+        setIsLoadingTracks(false);
+        return;
+      }
+      if (!incremental && tracksLoadedForSceneRef.current !== sceneAtStart) {
+        setTracks([]);
+      }
+      tracksLoadedForSceneRef.current = sceneAtStart;
+      if (!incremental) soundHistory.reset();
+      const isStale = () => tracksLoadedForSceneRef.current !== sceneAtStart;
+      if (!incremental) setIsLoadingTracks(true);
+      try {
+        await host.adoptSceneTracks();
+        if (isStale()) return;
+        const handles = await host.getPluginTracks();
+        if (isStale()) return;
+        const sceneData = await host.getAllSceneData(sceneAtStart);
+        if (isStale()) return;
+        const idMap = /* @__PURE__ */ new Map();
+        for (const h of handles) {
+          idMap.set(h.id, h.dbId);
+        }
+        engineToDbIdRef.current = idMap;
+        const trackStates = [];
+        for (const handle of handles) {
+          let runtimeState = {
+            id: handle.id,
+            muted: false,
+            solo: false,
+            volume: 0.75,
+            pan: 0
+          };
+          let hasMidi = false;
+          try {
+            const info = await host.getTrackInfo(handle.id);
+            runtimeState = {
+              id: handle.id,
+              muted: info.muted,
+              solo: info.soloed,
+              volume: info.volume,
+              pan: info.pan
+            };
+            hasMidi = info.hasMidi;
+          } catch {
+          }
+          let fxDetailState = newTrackState(handle).fxDetailState;
+          try {
+            const fxState = await host.getTrackFxState(handle.id);
+            fxDetailState = pluginFxToToggleFx(fxState);
+          } catch {
+          }
+          const promptKey = trackDataKey(handle.dbId, "prompt");
+          let prompt = typeof sceneData[promptKey] === "string" ? sceneData[promptKey] : "";
+          if (!prompt && handle.prompt) {
+            prompt = handle.prompt;
+            host.setSceneData(sceneAtStart, promptKey, prompt).catch(() => {
+            });
+          }
+          if (!hasMidi && handle.role) {
+            hasMidi = true;
+          }
+          let instrumentMissing = false;
+          if (handle.instrumentPluginId) {
+            try {
+              const instrDescriptor = await host.getTrackInstrument(handle.id);
+              if (instrDescriptor?.missing) {
+                instrumentMissing = true;
+              }
+            } catch {
+            }
+          }
+          trackStates.push(
+            newTrackState(handle, {
+              prompt,
+              role: handle.role ?? "",
+              runtimeState,
+              fxDetailState,
+              hasMidi,
+              instrumentMissing
+            })
+          );
+        }
+        if (isStale()) return;
+        setTracks((prev) => {
+          const prevByDbId = new Map(prev.map((p) => [p.handle.dbId, p]));
+          return trackStates.map((ts) => {
+            const carry = prevByDbId.get(ts.handle.dbId);
+            return carry ? { ...ts, editNotes: carry.editNotes, editBars: carry.editBars, editBpm: carry.editBpm } : ts;
+          });
+        });
+        for (const ts of trackStates) {
+          const persisted = sceneData[trackDataKey(ts.handle.dbId, "soundHistory")];
+          if (persisted && typeof persisted === "object") {
+            soundHistory.restore(ts.handle.id, persisted);
+          }
+        }
+        if (!isStale()) {
+          setCrossfadePairsMeta(parseCrossfadePairs(sceneData));
+          setFadesMeta(parseFades(sceneData));
+          if (adapter.groupExtensions && adapter.groupExtensions.length > 0) {
+            const map = {};
+            for (const ext of adapter.groupExtensions) {
+              map[ext.metaKey] = parseTrackGroups(sceneData, ext);
+            }
+            setGenericGroupMetas(map);
+          }
+        }
+      } catch (error) {
+        console.error(`[${logTag}] Failed to load tracks:`, error);
+      } finally {
+        if (tracksLoadedForSceneRef.current === sceneAtStart) {
+          setIsLoadingTracks(false);
+        }
+      }
+    },
+    [host, activeSceneId, soundHistory, adapter, logTag]
+  );
+  useEffect16(() => {
+    loadTracks();
+  }, [loadTracks]);
+  useEffect16(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const t of tracks) {
+      map.set(t.handle.id, t.handle.dbId);
+    }
+    engineToDbIdRef.current = map;
+  }, [tracks]);
+  const loadedCompletedIdsRef = useRef17(/* @__PURE__ */ new Set());
+  useEffect16(() => {
+    if (placeholders.length === 0) {
+      loadedCompletedIdsRef.current.clear();
+      return;
+    }
+    const newCompleted = placeholders.filter(
+      (ph) => ph.status === "completed" && !loadedCompletedIdsRef.current.has(ph.id)
+    );
+    if (newCompleted.length > 0) {
+      for (const ph of newCompleted) {
+        loadedCompletedIdsRef.current.add(ph.id);
+      }
+      console.log(
+        `[${logTag}] ${newCompleted.length} track(s) completed, reloading. IDs:`,
+        newCompleted.map((ph) => ph.id)
+      );
+      loadTracks(true);
+    }
+  }, [placeholders, loadTracks, logTag]);
+  const adoptAndLoad = useCallback14(() => {
+    loadTracks(true);
+  }, [loadTracks]);
+  useEffect16(() => {
+    const unsub = host.onEngineReady(() => {
+      adoptAndLoad();
     });
-  }, [initialValue]);
-  const setForScene = useCallback9((sceneId, value) => {
-    setStateMap((prev) => {
-      const current = prev.has(sceneId) ? prev.get(sceneId) : initialValue;
-      const next = typeof value === "function" ? value(current) : value;
-      const newMap = new Map(prev);
-      newMap.set(sceneId, next);
-      return newMap;
+    return unsub;
+  }, [host, adoptAndLoad]);
+  useEffect16(() => {
+    if (typeof host.onAfterAgentMutation !== "function") return;
+    let timer = null;
+    const unsub = host.onAfterAgentMutation(() => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = null;
+        loadTracks(true);
+      }, 500);
     });
-  }, [initialValue]);
-  return [currentValue, setForCurrentScene, setForScene];
-}
-
-// src/hooks/useAnySolo.ts
-import { useEffect as useEffect13, useState as useState14 } from "react";
-function useAnySolo(host) {
-  const [anySolo, setAnySolo] = useState14(false);
-  useEffect13(() => {
-    let active = true;
-    const refresh = () => {
-      host.isAnySoloActive().then((v) => {
-        if (active) setAnySolo(v);
-      }).catch(() => {
+    return () => {
+      unsub?.();
+      if (timer) clearTimeout(timer);
+    };
+  }, [host, loadTracks]);
+  useEffect16(() => {
+    const unsub = host.onTrackStateChange((trackId, state) => {
+      setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: state } : t));
+    });
+    return unsub;
+  }, [host]);
+  useEffect16(() => {
+    if (!features.bulkComposePlaceholders) return;
+    console.log(`[${logTag}] Subscribing to composeProgress`);
+    const unsub = host.onComposeProgress((event) => {
+      const targetScene = event.sceneId;
+      if (!targetScene) return;
+      console.log(
+        `[${logTag}] composeProgress event:`,
+        event.phase,
+        "sceneId:",
+        targetScene,
+        "placeholders:",
+        event.placeholders?.length ?? "none"
+      );
+      switch (event.phase) {
+        case "planning":
+          setIsComposingForScene(targetScene, true);
+          setPlaceholdersForScene(targetScene, []);
+          break;
+        case "generating":
+          setIsComposingForScene(targetScene, false);
+          if (event.placeholders) {
+            setPlaceholdersForScene(targetScene, event.placeholders);
+          }
+          break;
+        case "complete":
+        case "error":
+          setIsComposingForScene(targetScene, false);
+          setPlaceholdersForScene(targetScene, EMPTY_PLACEHOLDERS);
+          break;
+      }
+    });
+    return unsub;
+  }, [host, setIsComposingForScene, setPlaceholdersForScene, features.bulkComposePlaceholders, logTag]);
+  useEffect16(() => {
+    const refs = saveTimeoutRefs;
+    return () => {
+      for (const timeout of Object.values(refs.current)) {
+        clearTimeout(timeout);
+      }
+    };
+  }, []);
+  const isAddingTrackRef = useRef17(false);
+  const [isAddingTrack, setIsAddingTrack] = useState19(false);
+  const handleAddTrack = useCallback14(async () => {
+    if (isAddingTrackRef.current) return;
+    if (!activeSceneId) {
+      host.showToast("warning", "Select SCENE");
+      return;
+    }
+    if (!isConnected) {
+      host.showToast("warning", "Systems not connected");
+      return;
+    }
+    if (!isAuthenticated) {
+      host.showToast("warning", "Sign In Required", "Please sign in to add tracks");
+      return;
+    }
+    if (tracks.length >= identity.maxTracks) return;
+    isAddingTrackRef.current = true;
+    setIsAddingTrack(true);
+    try {
+      const handle = await host.createTrack({
+        name: `${identity.trackNamePrefix}-${Date.now()}`,
+        ...adapter.createTrackOptions()
+      });
+      setTracks((prev) => [...prev, newTrackState(handle)]);
+      onExpandSelf?.();
+      setTimeout(() => {
+        const inputs = document.querySelectorAll(
+          `[data-testid="${identity.familyKey}-section"] [data-testid="sdk-prompt-input"]`
+        );
+        if (inputs.length > 0) {
+          inputs[inputs.length - 1].focus();
+        }
+      }, 350);
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : "Unknown error";
+      host.showToast("error", "Failed to create track", msg);
+    } finally {
+      isAddingTrackRef.current = false;
+      setIsAddingTrack(false);
+    }
+  }, [host, adapter, identity, activeSceneId, isConnected, isAuthenticated, tracks.length, onExpandSelf]);
+  const handlePortTrack = useCallback14(
+    async (sel) => {
+      if (!activeSceneId) {
+        host.showToast("warning", "Select SCENE");
+        return;
+      }
+      if (!isConnected) {
+        host.showToast("warning", "Systems not connected");
+        return;
+      }
+      if (tracks.length >= identity.maxTracks) {
+        host.showToast("warning", "Track limit reached");
+        return;
+      }
+      if (!host.readImportableTrackMidi) return;
+      let handle = null;
+      try {
+        handle = await host.createTrack({
+          name: `${identity.trackNamePrefix}-${Date.now()}`,
+          ...adapter.createTrackOptions()
+        });
+        if (sel.role) {
+          try {
+            await host.setTrackRole(handle.id, sel.role);
+          } catch {
+          }
+        }
+        const midi = await host.readImportableTrackMidi(sel.sourceTrackDbId);
+        const notes = midi.clips[0]?.notes ?? [];
+        if (notes.length > 0) {
+          const mc = await host.getMusicalContext();
+          await host.writeMidiClip(handle.id, {
+            startTime: 0,
+            endTime: mc.bars * 4 * 60 / mc.bpm,
+            tempo: mc.bpm,
+            notes
+          });
+        }
+        await adapter.applyPortedTrackSound(handle, sel.role);
+        host.showToast(
+          "success",
+          `Imported to ${identity.familyKey}`,
+          notes.length ? `${sel.trackName} \u2192 ${identity.familyKey}` : `${sel.trackName} (no MIDI yet)`
+        );
+        await loadTracks(true);
+      } catch (err) {
+        if (handle) {
+          try {
+            await host.deleteTrack(handle.id);
+          } catch {
+          }
+        }
+        host.showToast("error", "Import failed", err instanceof Error ? err.message : String(err));
+      }
+    },
+    [host, adapter, identity, activeSceneId, isConnected, tracks.length, loadTracks]
+  );
+  const handleSoundImportPick = useCallback14(
+    async (sel) => {
+      const target = soundImportTarget;
+      if (!target || !host.getTrackSound) {
+        setSoundImportTarget(null);
+        return;
+      }
+      const noun = adapter.sound.importNoun;
+      const nounTitle = noun.charAt(0).toUpperCase() + noun.slice(1);
+      try {
+        const snap = await host.getTrackSound(sel.sourceTrackDbId);
+        if (!snap || snap.kind !== adapter.sound.acceptedSnapshotKind) {
+          host.showToast(
+            "error",
+            `No ${noun} to import`,
+            `${sel.trackName} has no ${identity.familyKey} ${noun}.`
+          );
+          return;
+        }
+        const descriptor = adapter.sound.descriptorFromSnapshot(snap);
+        await adapter.sound.applySound(target.handle.id, descriptor);
+        soundHistory.record(target.handle.id, descriptor, snap.label);
+        host.showToast("success", `${nounTitle} imported`, `${snap.label} \u2192 ${target.handle.name}`);
+      } catch (err) {
+        host.showToast("error", "Import failed", err instanceof Error ? err.message : String(err));
+      } finally {
+        setSoundImportTarget(null);
+      }
+    },
+    [soundImportTarget, host, adapter, identity.familyKey, soundHistory]
+  );
+  const [isExportingMidi, setIsExportingMidi] = useState19(false);
+  const handleExportMidi = useCallback14(async () => {
+    if (isExportingMidi) return;
+    setIsExportingMidi(true);
+    try {
+      const result = await host.exportTracksAsMidiBundle({
+        defaultName: identity.exportDefaultName ?? "midi-tracks"
       });
+      if (result.success) {
+        const filename = result.filePath.split("/").pop() || result.filePath;
+        const skippedNote = result.skippedCount > 0 ? ` (${result.skippedCount} empty track${result.skippedCount === 1 ? "" : "s"} skipped)` : "";
+        host.showToast(
+          "success",
+          "MIDI exported",
+          `${result.trackCount} track${result.trackCount === 1 ? "" : "s"} \u2192 ${filename}${skippedNote}`
+        );
+      } else if (!("canceled" in result && result.canceled)) {
+        const errMsg = "error" in result ? result.error : "Unknown error";
+        host.showToast("error", "Export failed", errMsg);
+      }
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      host.showToast("error", "Export failed", msg);
+    } finally {
+      setIsExportingMidi(false);
+    }
+  }, [host, identity.exportDefaultName, isExportingMidi]);
+  const isBulkActive = !!(isComposing || placeholders.length > 0);
+  const needsContract = !sceneContext?.hasContract;
+  const xfFromId = sceneContext?.transitionFromSceneId ?? null;
+  const xfToId = sceneContext?.transitionToSceneId ?? null;
+  const canCrossfade = features.transitionDesigner && sceneContext?.sceneType === "transition" && !!xfFromId && !!xfToId && !!host.listSceneFamilyTracks;
+  useEffect16(() => {
+    if (!canCrossfade) setDesignerView(false);
+  }, [canCrossfade]);
+  useEffect16(() => {
+    if (!canCrossfade || !xfFromId || !xfToId || !host.listSceneFamilyTracks) {
+      setTransitionSourceTotal(0);
+      return;
+    }
+    let cancelled = false;
+    void Promise.all([host.listSceneFamilyTracks(xfFromId), host.listSceneFamilyTracks(xfToId)]).then(([a, b]) => {
+      if (!cancelled) setTransitionSourceTotal(a.length + b.length);
+    }).catch(() => {
+      if (!cancelled) setTransitionSourceTotal(0);
+    });
+    return () => {
+      cancelled = true;
     };
-    refresh();
-    const unsub = host.onTrackStateChange(() => refresh());
+  }, [canCrossfade, xfFromId, xfToId, host]);
+  const transitionDone = crossfadePairsMeta.length * 2 + fadesMeta.length;
+  useEffect16(() => {
+    if (!onHeaderContent) return;
+    const addDisabled = needsContract || !isConnected || !activeSceneId || tracks.length >= identity.maxTracks || isAddingTrack;
+    onHeaderContent(
+      /* @__PURE__ */ jsxs17("div", { className: "flex gap-1 items-center", children: [
+        features.importTracks && (!canCrossfade || !designerView) && host.listImportableTracks && /* @__PURE__ */ jsx23(
+          "button",
+          {
+            "data-testid": `import-from-scene-${identity.familyKey}-button`,
+            onClick: (e) => {
+              e.stopPropagation();
+              onExpandSelf?.();
+              setImportOpen(true);
+            },
+            disabled: !activeSceneId || needsContract,
+            className: `px-2 py-0.5 text-[10px] font-medium rounded-sm border transition-colors ${!activeSceneId || needsContract ? "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed" : "bg-sas-panel-alt border-sas-border text-sas-muted hover:border-sas-accent hover:text-sas-accent"}`,
+            children: identity.importTrackLabel ?? "Import Track"
+          }
+        ),
+        (!canCrossfade || !designerView) && /* @__PURE__ */ jsx23(
+          "button",
+          {
+            "data-testid": `add-${identity.familyKey}-track-button`,
+            onClick: (e) => {
+              e.stopPropagation();
+              if (needsContract) {
+                onOpenContract?.();
+                return;
+              }
+              handleAddTrack();
+            },
+            className: `px-2 py-0.5 text-[10px] font-medium rounded-sm border transition-colors ${addDisabled ? "bg-sas-panel border-sas-border text-sas-muted/50 cursor-not-allowed" : "bg-sas-accent/10 border-sas-accent/30 text-sas-accent hover:bg-sas-accent/20"}`,
+            children: identity.addTrackLabel ?? "Add Track"
+          }
+        ),
+        canCrossfade && /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            "data-testid": `${identity.familyKey}-view-toggle`,
+            onClick: (e) => {
+              e.stopPropagation();
+              if (!designerView) {
+                if (needsContract) {
+                  onOpenContract?.();
+                  return;
+                }
+                onExpandSelf?.();
+              }
+              setDesignerView((v) => !v);
+            },
+            disabled: !designerView && needsContract,
+            title: designerView ? "Back to the track list" : "Open the transition designer",
+            className: "relative overflow-hidden px-2 py-0.5 text-[10px] font-medium rounded-sm border border-sas-accent/40 text-sas-accent transition-colors hover:border-sas-accent disabled:opacity-50",
+            children: [
+              transitionSourceTotal > 0 && /* @__PURE__ */ jsx23(
+                "span",
+                {
+                  className: "absolute inset-y-0 left-0 bg-sas-accent/25",
+                  style: { width: `${Math.min(100, transitionDone / transitionSourceTotal * 100)}%` },
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsxs17("span", { className: "relative", children: [
+                "\u21C4 ",
+                designerView ? "Transition" : "Tracks",
+                transitionSourceTotal > 0 ? ` ${transitionDone}/${transitionSourceTotal}` : ""
+              ] })
+            ]
+          }
+        )
+      ] })
+    );
     return () => {
-      active = false;
-      unsub();
+      onHeaderContent(null);
     };
-  }, [host]);
-  return anySolo;
-}
-
-// src/hooks/useSoundHistory.ts
-import { useCallback as useCallback10, useMemo as useMemo6, useRef as useRef13, useState as useState15 } 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 = useRef13(applySound);
-  applyRef.current = applySound;
-  const onChangeRef = useRef13(opts.onChange);
-  onChangeRef.current = opts.onChange;
-  const dataRef = useRef13({});
-  const [, setVersion] = useState15(0);
-  const bump = useCallback10(() => setVersion((v) => v + 1), []);
-  const commit = useCallback10(
-    (trackId, next, notify) => {
-      dataRef.current = { ...dataRef.current, [trackId]: next };
-      bump();
-      if (notify) onChangeRef.current?.(trackId, next);
+  }, [
+    onHeaderContent,
+    needsContract,
+    isConnected,
+    activeSceneId,
+    tracks.length,
+    isAddingTrack,
+    handleAddTrack,
+    onOpenContract,
+    host,
+    canCrossfade,
+    designerView,
+    transitionDone,
+    transitionSourceTotal,
+    onExpandSelf,
+    identity,
+    features.importTracks
+  ]);
+  useEffect16(() => {
+    if (!onLoading) return;
+    const anyGenerating = tracks.some((t) => t.isGenerating);
+    onLoading(isLoadingTracks || anyGenerating || isBulkActive);
+    return () => {
+      onLoading(false);
+    };
+  }, [onLoading, isLoadingTracks, tracks, isBulkActive]);
+  const handleDeleteTrack = useCallback14(
+    async (trackId) => {
+      try {
+        await host.deleteTrack(trackId);
+        const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
+        if (activeSceneId) {
+          await host.deleteSceneData(activeSceneId, trackDataKey(dbId, "prompt"));
+        }
+        setTracks((prev) => prev.filter((t) => t.handle.id !== trackId));
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : "Unknown error";
+        host.showToast("error", "Failed to delete track", msg);
+      }
+    },
+    [host, activeSceneId]
+  );
+  const handlePromptChange = useCallback14(
+    (trackId, prompt) => {
+      setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, prompt } : t));
+      const dbId = engineToDbIdRef.current.get(trackId) ?? trackId;
+      if (saveTimeoutRefs.current[trackId]) {
+        clearTimeout(saveTimeoutRefs.current[trackId]);
+      }
+      saveTimeoutRefs.current[trackId] = setTimeout(() => {
+        if (activeSceneId) {
+          host.setSceneData(activeSceneId, trackDataKey(dbId, "prompt"), prompt).catch(() => {
+          });
+        }
+      }, 500);
+    },
+    [host, activeSceneId]
+  );
+  const resolvedGenericGroups = useMemo8(() => {
+    const out = {};
+    for (const ext of adapter.groupExtensions ?? []) {
+      out[ext.metaKey] = resolveTrackGroups(
+        genericGroupMetas[ext.metaKey] ?? [],
+        tracks,
+        (t) => t.handle.dbId,
+        {
+          isComplete: ext.isComplete
+        }
+      );
+    }
+    return out;
+  }, [adapter, genericGroupMetas, tracks]);
+  const genericGroupMemberDbIds = useMemo8(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const r of Object.values(resolvedGenericGroups)) {
+      for (const dbId of r.memberDbIds) s.add(dbId);
+    }
+    return s;
+  }, [resolvedGenericGroups]);
+  const engineToDbId = useCallback14(
+    (trackId) => engineToDbIdRef.current.get(trackId) ?? trackId,
+    []
+  );
+  const updateTrack = useCallback14(
+    (trackId, patch) => {
+      setTracks(
+        (prev) => prev.map(
+          (t) => t.handle.id === trackId ? typeof patch === "function" ? patch(t) : { ...t, ...patch } : t
+        )
+      );
+    },
+    []
+  );
+  const markEditLoaded = useCallback14((trackId) => {
+    editLoadStartedRef.current.add(trackId);
+  }, []);
+  const tracksRef = useRef17(tracks);
+  useEffect16(() => {
+    tracksRef.current = tracks;
+  }, [tracks]);
+  const resolvedGenericGroupsRef = useRef17(resolvedGenericGroups);
+  useEffect16(() => {
+    resolvedGenericGroupsRef.current = resolvedGenericGroups;
+  }, [resolvedGenericGroups]);
+  const makeServices = useCallback14(() => {
+    return {
+      host,
+      activeSceneId,
+      tracks: tracksRef.current,
+      updateTrack,
+      setTracks,
+      reloadTracks: loadTracks,
+      soundHistory,
+      engineToDbId,
+      trackDataKey,
+      markEditLoaded,
+      createFamilyTrack: (nameSuffix = "") => host.createTrack({
+        name: `${identity.trackNamePrefix}-${Date.now()}${nameSuffix}`,
+        ...adapter.createTrackOptions()
+      }),
+      resolvedGroups: (metaKey) => resolvedGenericGroupsRef.current[metaKey]?.resolved ?? []
+    };
+  }, [host, activeSceneId, updateTrack, loadTracks, soundHistory, engineToDbId, markEditLoaded, identity, adapter]);
+  const handleGenerate = useCallback14(
+    async (trackId) => {
+      const track = tracks.find((t) => t.handle.id === trackId);
+      if (!track || !track.prompt.trim()) return;
+      if (!isAuthenticated) {
+        host.showToast("warning", "Sign In Required", "Please sign in to generate MIDI");
+        return;
+      }
+      setTracks(
+        (prev) => prev.map(
+          (t) => t.handle.id === trackId ? { ...t, isGenerating: true, error: null, generationProgress: 0 } : t
+        )
+      );
+      try {
+        await adapter.generation.generate(track, makeServices());
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : "Generation failed";
+        setTracks(
+          (prev) => prev.map(
+            (t) => t.handle.id === trackId ? { ...t, isGenerating: false, error: msg, generationProgress: 0 } : t
+          )
+        );
+        host.showToast("error", "Generation failed", msg);
+      }
+    },
+    [host, adapter, tracks, isAuthenticated, makeServices]
+  );
+  const handleMuteToggle = useCallback14(
+    (trackId) => {
+      const track = tracks.find((t) => t.handle.id === trackId);
+      if (!track) return;
+      const newMuted = !track.runtimeState.muted;
+      setTracks(
+        (prev) => prev.map(
+          (t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, muted: newMuted } } : t
+        )
+      );
+      host.setTrackMute(trackId, newMuted).catch(() => {
+        setTracks(
+          (prev) => prev.map(
+            (t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, muted: !newMuted } } : t
+          )
+        );
+      });
+    },
+    [host, tracks]
+  );
+  const handleSoloToggle = useCallback14(
+    (trackId) => {
+      const track = tracks.find((t) => t.handle.id === trackId);
+      if (!track) return;
+      const newSolo = !track.runtimeState.solo;
+      setTracks(
+        (prev) => prev.map(
+          (t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, solo: newSolo } } : t
+        )
+      );
+      host.setTrackSolo(trackId, newSolo).catch(() => {
+        setTracks(
+          (prev) => prev.map(
+            (t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, solo: !newSolo } } : t
+          )
+        );
+      });
+    },
+    [host, tracks]
+  );
+  const handleVolumeChange = useCallback14(
+    (trackId, volume) => {
+      setTracks(
+        (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, volume } } : t)
+      );
+      host.setTrackVolume(trackId, volume).catch(() => {
+      });
+    },
+    [host]
+  );
+  const handlePanChange = useCallback14(
+    (trackId, pan) => {
+      setTracks(
+        (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, runtimeState: { ...t.runtimeState, pan } } : t)
+      );
+      host.setTrackPan(trackId, pan).catch(() => {
+      });
+    },
+    [host]
+  );
+  const handleShuffle = useCallback14(
+    async (trackId) => {
+      const track = tracks.find((t) => t.handle.id === trackId);
+      if (!track) return;
+      if (soundHistory.list(trackId).entries.length === 0) {
+        try {
+          const cap = await adapter.sound.captureSoundDescriptor(trackId);
+          if (cap) soundHistory.record(trackId, cap.descriptor, adapter.sound.previousSoundLabel);
+        } catch {
+        }
+      }
+      try {
+        let result;
+        let nextHistory;
+        try {
+          result = await adapter.shuffle.shuffle(track, Array.from(track.shuffleHistory));
+          nextHistory = new Set(track.shuffleHistory);
+        } catch (firstErr) {
+          if (adapter.shuffle.isExhaustedError(firstErr)) {
+            nextHistory = /* @__PURE__ */ new Set();
+            result = await adapter.shuffle.shuffle(track, []);
+          } else {
+            throw firstErr;
+          }
+        }
+        nextHistory.add(result.appliedName);
+        setTracks(
+          (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, shuffleHistory: nextHistory } : t)
+        );
+        try {
+          const cap = await adapter.sound.captureSoundDescriptor(trackId);
+          if (cap) soundHistory.record(trackId, cap.descriptor, result.appliedName);
+        } catch {
+        }
+        console.log(`[${logTag}] Sound shuffled: ${result.appliedName} (history ${nextHistory.size})`);
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : "Shuffle failed";
+        host.showToast("error", "Shuffle failed", msg);
+      }
+    },
+    [host, adapter, tracks, soundHistory, logTag]
+  );
+  const handleCopy = useCallback14(
+    async (trackId) => {
+      try {
+        const newHandle = await host.duplicateTrack(trackId);
+        await loadTracks();
+        host.showToast("success", "Track duplicated", newHandle.name);
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : "Copy failed";
+        host.showToast("error", "Copy failed", msg);
+      }
+    },
+    [host, loadTracks]
+  );
+  const handleFxToggle = useCallback14(
+    (trackId, category, enabled) => {
+      setTracks(
+        (prev) => prev.map(
+          (t) => t.handle.id === trackId ? { ...t, fxDetailState: { ...t.fxDetailState, [category]: { ...t.fxDetailState[category], enabled } } } : t
+        )
+      );
+      host.toggleTrackFx(trackId, category, enabled).catch(() => {
+        setTracks(
+          (prev) => prev.map(
+            (t) => t.handle.id === trackId ? {
+              ...t,
+              fxDetailState: {
+                ...t.fxDetailState,
+                [category]: { ...t.fxDetailState[category], enabled: !enabled }
+              }
+            } : t
+          )
+        );
+      });
+    },
+    [host]
+  );
+  const handleFxPresetChange = useCallback14(
+    (trackId, category, presetIndex) => {
+      setTracks(
+        (prev) => prev.map(
+          (t) => t.handle.id === trackId ? { ...t, fxDetailState: { ...t.fxDetailState, [category]: { ...t.fxDetailState[category], presetIndex } } } : t
+        )
+      );
+      host.setTrackFxPreset(trackId, category, presetIndex).then((result) => {
+        if (result.dryWet !== void 0) {
+          setTracks(
+            (prev) => prev.map(
+              (t) => t.handle.id === trackId ? {
+                ...t,
+                fxDetailState: {
+                  ...t.fxDetailState,
+                  [category]: { ...t.fxDetailState[category], dryWet: result.dryWet }
+                }
+              } : t
+            )
+          );
+        }
+      }).catch(() => {
+      });
+    },
+    [host]
+  );
+  const handleFxDryWetChange = useCallback14(
+    (trackId, category, value) => {
+      setTracks(
+        (prev) => prev.map(
+          (t) => t.handle.id === trackId ? { ...t, fxDetailState: { ...t.fxDetailState, [category]: { ...t.fxDetailState[category], dryWet: value } } } : t
+        )
+      );
+      host.setTrackFxDryWet(trackId, category, value).catch(() => {
+      });
     },
-    [bump]
+    [host]
   );
-  const record = useCallback10(
-    (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);
+  const toggleFxDrawer = useCallback14(
+    (trackId) => {
+      setTracks(
+        (prev) => prev.map((t) => {
+          if (t.handle.id !== trackId) return t;
+          const onFx = t.drawerOpen && t.drawerTab === "fx";
+          return { ...t, drawerOpen: !onFx, drawerTab: "fx", editorStage: false };
+        })
+      );
+      const track = tracks.find((t) => t.handle.id === trackId);
+      const wasOnFx = !!track && track.drawerOpen && track.drawerTab === "fx";
+      if (track && !wasOnFx) {
+        host.getTrackFxState(trackId).then((fxState) => {
+          setTracks(
+            (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, fxDetailState: pluginFxToToggleFx(fxState) } : t)
+          );
+        }).catch(() => {
+        });
       }
-      commit(trackId, { entries, cursor: entries.length - 1 }, true);
     },
-    [max, commit]
+    [host, tracks]
   );
-  const restoreTo = useCallback10(
-    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;
+  const loadEditNotes = useCallback14(
+    async (trackId) => {
+      try {
+        const mc = await host.getMusicalContext();
+        let notes = [];
+        if (typeof host.readMidiNotes === "function") {
+          const result = await host.readMidiNotes(trackId);
+          notes = result.clips[0]?.notes ?? [];
+        }
+        setTracks(
+          (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editNotes: notes, editBars: mc.bars, editBpm: mc.bpm } : t)
+        );
+      } catch (err) {
+        console.warn(`[${logTag}] Failed to load MIDI for editing:`, err);
+      }
     },
-    [commit]
+    [host, logTag]
   );
-  const undo = useCallback10(
-    (trackId) => {
-      const h = dataRef.current[trackId];
-      if (!h || h.cursor <= 0) return Promise.resolve(false);
-      return restoreTo(trackId, h.cursor - 1);
+  const handleNotesChange = useCallback14(
+    (trackId, notes) => {
+      setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editNotes: notes } : t));
+      const key = `edit:${trackId}`;
+      if (saveTimeoutRefs.current[key]) {
+        clearTimeout(saveTimeoutRefs.current[key]);
+      }
+      saveTimeoutRefs.current[key] = setTimeout(() => {
+        void (async () => {
+          try {
+            if (notes.length === 0) {
+              await host.clearMidi(trackId);
+            } else {
+              const mc = await host.getMusicalContext();
+              await host.writeMidiClip(trackId, {
+                startTime: 0,
+                endTime: mc.bars * 4 * 60 / mc.bpm,
+                tempo: mc.bpm,
+                notes
+              });
+            }
+          } catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            host.showToast("error", "Failed to save edit", msg);
+          }
+        })();
+      }, 300);
     },
-    [restoreTo]
+    [host]
   );
-  const toggleFavorite = useCallback10(
-    (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);
+  const handleTabChange = useCallback14(
+    (trackId, tab) => {
+      setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, drawerOpen: true, drawerTab: tab } : t));
+      if (tab === "fx") {
+        host.getTrackFxState(trackId).then((fxState) => {
+          setTracks(
+            (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, fxDetailState: pluginFxToToggleFx(fxState) } : t)
+          );
+        }).catch(() => {
+        });
+      } else if (tab === "pick" && availableInstruments.length === 0 && !instrumentsLoading) {
+        setInstrumentsLoading(true);
+        host.getAvailableInstruments().then((instruments) => {
+          setAvailableInstruments(instruments);
+        }).catch(() => {
+        }).finally(() => {
+          setInstrumentsLoading(false);
+        });
+      } else if (tab === "edit" && !editLoadStartedRef.current.has(trackId)) {
+        editLoadStartedRef.current.add(trackId);
+        void loadEditNotes(trackId);
+      }
     },
-    [commit]
+    [host, availableInstruments.length, instrumentsLoading, loadEditNotes]
   );
-  const restore = useCallback10(
-    (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);
+  const handleProgressChange = useCallback14((trackId, pct) => {
+    setTracks((prev) => prev.map((t) => t.handle.id === trackId ? { ...t, generationProgress: pct } : t));
+  }, []);
+  const handleToggleDrawer = useCallback14((trackId) => {
+    setTracks(
+      (prev) => prev.map((t) => {
+        if (t.handle.id !== trackId) return t;
+        const onSound = t.drawerOpen && t.drawerTab !== "fx";
+        return { ...t, drawerOpen: !onSound, drawerTab: "history", editorStage: false };
+      })
+    );
+  }, []);
+  const handleInstrumentSelect = useCallback14(
+    async (trackId, pluginId) => {
+      const isDefaultInstrument = pluginId === (identity.defaultInstrumentPluginId ?? "Surge XT");
+      if (isDefaultInstrument) {
+        setTracks(
+          (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, drawerOpen: false, editorStage: false } : t)
+        );
+        try {
+          await host.setTrackInstrument(trackId, pluginId);
+          const descriptor = await host.getTrackInstrument(trackId);
+          setTracks(
+            (prev) => prev.map(
+              (t) => t.handle.id === trackId ? {
+                ...t,
+                instrumentPluginId: descriptor?.pluginId ?? null,
+                instrumentName: descriptor?.name ?? null,
+                instrumentMissing: descriptor?.missing ?? false
+              } : t
+            )
+          );
+        } catch (err) {
+          const msg = err instanceof Error ? err.message : "Failed to load instrument";
+          host.showToast("error", "Instrument load failed", msg);
+        }
+        return;
+      }
+      setTracks(
+        (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, drawerTab: "pick", editorStage: true } : t)
+      );
+      try {
+        await host.setTrackInstrument(trackId, pluginId);
+        const descriptor = await host.getTrackInstrument(trackId);
+        setTracks(
+          (prev) => prev.map(
+            (t) => t.handle.id === trackId ? {
+              ...t,
+              instrumentPluginId: descriptor?.pluginId ?? null,
+              instrumentName: descriptor?.name ?? null,
+              instrumentMissing: descriptor?.missing ?? false
+            } : t
+          )
+        );
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Failed to load instrument";
+        console.error(`[${logTag}] Failed to set instrument:`, err);
+        host.showToast("error", "Instrument load failed", msg);
+        setTracks(
+          (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editorStage: false } : t)
+        );
+      }
     },
-    [commit]
+    [host, identity.defaultInstrumentPluginId, logTag]
   );
-  const list = useCallback10(
-    (trackId) => dataRef.current[trackId] ?? EMPTY,
-    []
+  const handleShowEditor = useCallback14(
+    async (trackId) => {
+      try {
+        await host.showInstrumentEditor(trackId);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Failed to open editor";
+        host.showToast("error", "Editor failed", msg);
+      }
+    },
+    [host]
   );
-  const canUndo = useCallback10((trackId) => {
-    const h = dataRef.current[trackId];
-    return !!h && h.cursor > 0;
+  const handleBackToInstruments = useCallback14((trackId) => {
+    setTracks(
+      (prev) => prev.map((t) => t.handle.id === trackId ? { ...t, editorStage: false } : t)
+    );
   }, []);
-  const clear = useCallback10(
-    (trackId) => {
-      if (dataRef.current[trackId]) {
-        const next = { ...dataRef.current };
-        delete next[trackId];
-        dataRef.current = next;
-        bump();
+  const handleRefreshInstruments = useCallback14(() => {
+    setInstrumentsLoading(true);
+    host.getAvailableInstruments().then((instruments) => {
+      setAvailableInstruments(instruments);
+    }).catch(() => {
+    }).finally(() => {
+      setInstrumentsLoading(false);
+    });
+  }, [host]);
+  const onAuditionNote = useCallback14(
+    (trackId, pitch, velocity, ms) => {
+      void host.auditionNote(trackId, pitch, velocity, ms);
+    },
+    [host]
+  );
+  const { resolvedCrossfadePairs, crossfadeMemberDbIds } = useMemo8(() => {
+    const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
+    const pairs = [];
+    const members = /* @__PURE__ */ new Set();
+    for (const p of crossfadePairsMeta) {
+      const origin = byDbId.get(p.originDbId);
+      const target = byDbId.get(p.targetDbId);
+      if (origin && target) {
+        pairs.push({ ...p, origin, target });
+        members.add(p.originDbId);
+        members.add(p.targetDbId);
+      }
+    }
+    return { resolvedCrossfadePairs: pairs, crossfadeMemberDbIds: members };
+  }, [tracks, crossfadePairsMeta]);
+  const { resolvedFades, fadeMemberDbIds } = useMemo8(() => {
+    const byDbId = new Map(tracks.map((t) => [t.handle.dbId, t]));
+    const list = [];
+    const members = /* @__PURE__ */ new Set();
+    for (const f of fadesMeta) {
+      const track = byDbId.get(f.dbId);
+      if (track) {
+        list.push({ ...f, track });
+        members.add(f.dbId);
+      }
+    }
+    return { resolvedFades: list, fadeMemberDbIds: members };
+  }, [tracks, fadesMeta]);
+  const transition = useTransitionOps({
+    host,
+    adapter,
+    activeSceneId,
+    isConnected,
+    isAuthenticated,
+    sceneContext,
+    tracks,
+    setTracks,
+    loadTracks,
+    setCrossfadePairsMeta,
+    setFadesMeta,
+    resolvedCrossfadePairs,
+    resolvedFades
+  });
+  const setGroupMute = useCallback14(
+    (trackIds, muted) => {
+      for (const id of trackIds) {
+        setTracks(
+          (prev) => prev.map((t) => t.handle.id === id ? { ...t, runtimeState: { ...t.runtimeState, muted } } : t)
+        );
+        host.setTrackMute(id, muted).catch(() => {
+        });
       }
-      onChangeRef.current?.(trackId, EMPTY);
     },
-    [bump]
+    [host]
   );
-  const reset = useCallback10(() => {
-    dataRef.current = {};
-    bump();
-  }, [bump]);
-  return useMemo6(
-    () => ({ record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite }),
-    [record, undo, restoreTo, list, canUndo, clear, reset, restore, toggleFavorite]
+  const setGroupSolo = useCallback14(
+    (trackIds, solo) => {
+      for (const id of trackIds) {
+        setTracks(
+          (prev) => prev.map((t) => t.handle.id === id ? { ...t, runtimeState: { ...t.runtimeState, solo } } : t)
+        );
+        host.setTrackSolo(id, solo).catch(() => {
+        });
+      }
+    },
+    [host]
+  );
+  const deleteGroup = useCallback14(
+    async (members, cleanupKeySuffixes) => {
+      for (const member of members) {
+        try {
+          await host.deleteTrack(member.engineId);
+        } catch {
+        }
+        if (activeSceneId) {
+          for (const suffix of cleanupKeySuffixes) {
+            await host.deleteSceneData(activeSceneId, trackDataKey(member.dbId, suffix)).catch(() => {
+            });
+          }
+        }
+      }
+      const gone = new Set(members.map((m) => m.engineId));
+      setTracks((prev) => prev.filter((t) => !gone.has(t.handle.id)));
+      await loadTracks(true);
+    },
+    [host, activeSceneId, loadTracks]
+  );
+  const handlers = useMemo8(
+    () => ({
+      promptChange: handlePromptChange,
+      generate: (trackId) => {
+        void handleGenerate(trackId);
+      },
+      shuffle: (trackId) => {
+        void handleShuffle(trackId);
+      },
+      copy: (trackId) => {
+        void handleCopy(trackId);
+      },
+      delete: (trackId) => {
+        void handleDeleteTrack(trackId);
+      },
+      muteToggle: handleMuteToggle,
+      soloToggle: handleSoloToggle,
+      volumeChange: handleVolumeChange,
+      panChange: handlePanChange,
+      tabChange: handleTabChange,
+      toggleDrawer: handleToggleDrawer,
+      toggleFxDrawer,
+      notesChange: handleNotesChange,
+      progressChange: handleProgressChange
+    }),
+    [
+      handlePromptChange,
+      handleGenerate,
+      handleShuffle,
+      handleCopy,
+      handleDeleteTrack,
+      handleMuteToggle,
+      handleSoloToggle,
+      handleVolumeChange,
+      handlePanChange,
+      handleTabChange,
+      handleToggleDrawer,
+      toggleFxDrawer,
+      handleNotesChange,
+      handleProgressChange
+    ]
   );
+  return {
+    ui,
+    adapter,
+    tracks,
+    setTracks,
+    isLoadingTracks,
+    loadTracks,
+    engineToDbId,
+    supportsMeters,
+    trackLevels,
+    anySolo,
+    reorder,
+    soundHistory,
+    isComposing,
+    placeholders,
+    isAddingTrack,
+    isExportingMidi,
+    designerView,
+    canCrossfade,
+    needsContract,
+    xfFromId,
+    xfToId,
+    importOpen,
+    setImportOpen,
+    soundImportTarget,
+    setSoundImportTarget,
+    handleSoundImportPick,
+    handlePortTrack,
+    transition,
+    crossfadePairsMeta,
+    fadesMeta,
+    resolvedCrossfadePairs,
+    crossfadeMemberDbIds,
+    resolvedFades,
+    fadeMemberDbIds,
+    resolvedGenericGroups,
+    genericGroupMemberDbIds,
+    availableInstruments,
+    instrumentsLoading,
+    handlers,
+    handleGenerate,
+    handleShuffle,
+    handleAddTrack,
+    handleDeleteTrack,
+    handleExportMidi,
+    handlePromptChange,
+    handleMuteToggle,
+    handleSoloToggle,
+    handleVolumeChange,
+    handlePanChange,
+    handleTabChange,
+    handleToggleDrawer,
+    toggleFxDrawer,
+    handleNotesChange,
+    handleProgressChange,
+    handleCopy,
+    handleFxToggle,
+    handleFxPresetChange,
+    handleFxDryWetChange,
+    handleInstrumentSelect,
+    handleShowEditor,
+    handleBackToInstruments,
+    handleRefreshInstruments,
+    onAuditionNote,
+    makeServices,
+    setGroupMute,
+    setGroupSolo,
+    deleteGroup
+  };
 }
 
-// src/hooks/useTrackReorder.ts
-import { useCallback as useCallback11, useRef as useRef14, useState as useState16 } 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;
+// src/panel-core/GeneratorPanelShell.tsx
+import React20, { useCallback as useCallback15 } from "react";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+function GeneratorPanelShell({ core, slots }) {
+  const {
+    ui,
+    adapter,
+    tracks,
+    isLoadingTracks,
+    supportsMeters,
+    trackLevels,
+    anySolo,
+    reorder,
+    soundHistory,
+    isComposing,
+    placeholders,
+    designerView,
+    canCrossfade,
+    xfFromId,
+    xfToId,
+    importOpen,
+    setImportOpen,
+    soundImportTarget,
+    setSoundImportTarget,
+    handleSoundImportPick,
+    handlePortTrack,
+    transition,
+    crossfadePairsMeta,
+    fadesMeta,
+    resolvedCrossfadePairs,
+    crossfadeMemberDbIds,
+    resolvedFades,
+    fadeMemberDbIds,
+    resolvedGenericGroups,
+    genericGroupMemberDbIds,
+    availableInstruments,
+    instrumentsLoading,
+    handlers,
+    isExportingMidi,
+    handleExportMidi,
+    handleFxToggle,
+    handleFxPresetChange,
+    handleFxDryWetChange,
+    handleInstrumentSelect,
+    handleShowEditor,
+    handleBackToInstruments,
+    handleRefreshInstruments,
+    onAuditionNote,
+    loadTracks,
+    makeServices,
+    setGroupMute,
+    setGroupSolo,
+    deleteGroup
+  } = core;
+  const { host, activeSceneId, isAuthenticated, sceneContext, onSelectScene, onOpenContract } = ui;
+  const { identity, features } = adapter;
+  const buildRowProps = useCallback15(
+    (track, drag) => {
+      const id = track.handle.id;
+      const pickerProps = features.instrumentPicker ? {
+        instrumentName: track.instrumentName,
+        instrumentMissing: track.instrumentMissing,
+        onToggleDrawer: () => handlers.toggleDrawer(id),
+        availableInstruments,
+        currentInstrumentPluginId: track.instrumentPluginId,
+        onInstrumentSelect: (pluginId) => handleInstrumentSelect(id, pluginId),
+        instrumentsLoading,
+        onRefreshInstruments: handleRefreshInstruments,
+        editorStage: track.editorStage,
+        onShowEditor: () => handleShowEditor(id),
+        onBackToInstruments: () => handleBackToInstruments(id)
+      } : {};
+      const importSoundProps = features.importTracks ? {
+        onImportSound: () => setSoundImportTarget(track),
+        importSoundLabel: adapter.sound.importSoundLabel
+      } : {};
+      const props = {
+        ...drag ? { drag } : {},
+        track: { id, name: track.handle.name, role: track.role },
+        levels: supportsMeters ? trackLevels : void 0,
+        prompt: track.prompt,
+        runtimeState: {
+          muted: track.runtimeState.muted,
+          solo: track.runtimeState.solo,
+          volume: track.runtimeState.volume,
+          pan: track.runtimeState.pan
+        },
+        soloedOut: anySolo && !track.runtimeState.solo,
+        fxDetailState: track.fxDetailState,
+        drawerOpen: track.drawerOpen,
+        drawerTab: track.drawerTab,
+        onTabChange: (tab) => handlers.tabChange(id, tab),
+        isGenerating: track.isGenerating,
+        isAuthenticated,
+        error: track.error,
+        hasMidi: track.hasMidi,
+        generationProgress: track.generationProgress,
+        estimatedGenerationMs: identity.estimatedGenerationMs,
+        onPromptChange: (prompt) => handlers.promptChange(id, prompt),
+        onGenerate: () => handlers.generate(id),
+        onShuffle: () => handlers.shuffle(id),
+        onCopy: () => handlers.copy(id),
+        onDelete: () => handlers.delete(id),
+        onMuteToggle: () => handlers.muteToggle(id),
+        onSoloToggle: () => handlers.soloToggle(id),
+        onVolumeChange: (vol) => handlers.volumeChange(id, vol),
+        onPanChange: (pan) => handlers.panChange(id, pan),
+        onFxToggle: (cat, enabled) => handleFxToggle(id, cat, enabled),
+        onFxPresetChange: (cat, idx) => handleFxPresetChange(id, cat, idx),
+        onFxDryWetChange: (cat, val) => handleFxDryWetChange(id, cat, val),
+        onToggleFxDrawer: () => handlers.toggleFxDrawer(id),
+        onProgressChange: (pct) => handlers.progressChange(id, pct),
+        accentColor: identity.accentColor,
+        ...pickerProps,
+        soundHistory: soundHistory.list(id).entries,
+        soundHistoryCursor: soundHistory.list(id).cursor,
+        onRestoreSound: (i) => {
+          void soundHistory.restoreTo(id, i);
+        },
+        onToggleFavorite: (i) => soundHistory.toggleFavorite(id, i),
+        ...importSoundProps,
+        editNotes: track.editNotes,
+        onNotesChange: (notes) => handlers.notesChange(id, notes),
+        editBars: track.editBars,
+        editBpm: track.editBpm,
+        editSnap: 0.25,
+        onAuditionNote: (pitch, vel, ms) => onAuditionNote(id, pitch, vel, ms)
+      };
+      return adapter.mapTrackRowProps ? adapter.mapTrackRowProps(track, props) : props;
+    },
+    [
+      features.instrumentPicker,
+      features.importTracks,
+      adapter,
+      supportsMeters,
+      trackLevels,
+      anySolo,
+      isAuthenticated,
+      identity,
+      handlers,
+      availableInstruments,
+      instrumentsLoading,
+      handleInstrumentSelect,
+      handleRefreshInstruments,
+      handleShowEditor,
+      handleBackToInstruments,
+      setSoundImportTarget,
+      soundHistory,
+      handleFxToggle,
+      handleFxPresetChange,
+      handleFxDryWetChange,
+      onAuditionNote
+    ]
+  );
+  if (!activeSceneId) {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        "data-testid": `no-scene-placeholder-${identity.familyKey}`,
+        className: "flex items-center justify-center py-8",
+        children: /* @__PURE__ */ jsx24(
+          "button",
+          {
+            onClick: () => onSelectScene?.(),
+            className: "text-sas-muted text-xs hover:text-sas-accent transition-colors underline underline-offset-2",
+            children: "Select a Scene"
+          }
+        )
+      }
+    );
   }
-  const [moved] = next.splice(from, 1);
-  next.splice(to, 0, moved);
-  return next;
-}
-function useTrackReorder({
-  host,
-  items,
-  setItems,
-  getId,
-  onError
-}) {
-  const [draggingIndex, setDraggingIndex] = useState16(null);
-  const [dragOverIndex, setDragOverIndex] = useState16(null);
-  const fromRef = useRef14(null);
-  const itemsRef = useRef14(items);
-  itemsRef.current = items;
-  const dragPropsFor = useCallback11(
-    (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 {
-            }
+  if (!sceneContext?.hasContract) {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        "data-testid": `no-contract-placeholder-${identity.familyKey}`,
+        className: "flex items-center justify-center py-8",
+        children: /* @__PURE__ */ jsx24(
+          "button",
+          {
+            onClick: () => onOpenContract?.(),
+            className: "text-sas-muted text-xs hover:text-sas-accent transition-colors underline underline-offset-2",
+            children: "Generate a Contract"
           }
+        )
+      }
+    );
+  }
+  if (features.bulkComposePlaceholders && isComposing) {
+    return /* @__PURE__ */ jsx24("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2", children: /* @__PURE__ */ jsx24(SorceryProgressBar, { isLoading: true, statusText: "COMPOSING...", heightClass: "h-10" }) });
+  }
+  const activePlaceholders = features.bulkComposePlaceholders ? placeholders : [];
+  if (activePlaceholders.length > 0) {
+    const tracksByDbId = /* @__PURE__ */ new Map();
+    for (const t of tracks) {
+      tracksByDbId.set(t.handle.dbId, t);
+      if (t.handle.id !== t.handle.dbId) {
+        tracksByDbId.set(t.handle.id, t);
+      }
+    }
+    return /* @__PURE__ */ jsx24("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: activePlaceholders.map((ph) => {
+      const loadedTrack = ph.status === "completed" ? tracksByDbId.get(ph.id) : void 0;
+      if (loadedTrack) {
+        return /* @__PURE__ */ jsx24(TrackRow, { ...buildRowProps(loadedTrack) }, ph.id);
+      }
+      return /* @__PURE__ */ jsx24(
+        "div",
+        {
+          "data-testid": "bulk-placeholder-track",
+          className: "relative rounded-sm border w-full overflow-hidden border-sas-border bg-sas-panel-alt",
+          style: { borderLeftColor: identity.placeholderAccentColor, borderLeftWidth: "3px" },
+          children: /* @__PURE__ */ jsx24(SorceryProgressBar, { isLoading: true, statusText: "CONJURING MIDI...", heightClass: "h-10" })
         },
-        onDragEnd: () => {
-          fromRef.current = null;
-          setDraggingIndex(null);
-          setDragOverIndex(null);
-        }
-      },
-      rowProps: {
-        onDragEnter: (e) => {
-          if (fromRef.current === null) return;
-          e.preventDefault();
-          setDragOverIndex(index);
+        ph.id
+      );
+    }) });
+  }
+  const groupCtx = {
+    services: makeServices(),
+    anySolo,
+    supportsMeters,
+    levels: supportsMeters ? trackLevels : void 0,
+    handlers,
+    renderDefaultTrackRow: (track, overrides, drag) => /* @__PURE__ */ jsx24(TrackRow, { ...{ ...buildRowProps(track, drag), ...overrides ?? {} } }, track.handle.id),
+    setGroupMute,
+    setGroupSolo,
+    deleteGroup
+  };
+  return /* @__PURE__ */ jsxs18("div", { "data-testid": `${identity.familyKey}-section`, className: "p-2 space-y-2", children: [
+    features.importTracks && host.listImportableTracks && /* @__PURE__ */ jsx24(
+      ImportTrackModal,
+      {
+        host,
+        open: importOpen,
+        onClose: () => setImportOpen(false),
+        onImported: () => {
+          void loadTracks(true);
         },
-        onDragOver: (e) => {
-          if (fromRef.current === null) return;
-          e.preventDefault();
-          if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-          setDragOverIndex((cur) => cur === index ? cur : index);
+        onPortTrack: host.readImportableTrackMidi ? handlePortTrack : void 0,
+        testIdPrefix: `${identity.familyKey}-import`
+      }
+    ),
+    features.importTracks && host.listImportableTracks && host.getTrackSound && /* @__PURE__ */ jsx24(
+      ImportTrackModal,
+      {
+        host,
+        mode: "sound",
+        open: !!soundImportTarget,
+        title: adapter.sound.importSoundLabel,
+        onClose: () => setSoundImportTarget(null),
+        onImported: () => {
         },
-        onDragLeave: () => {
-          setDragOverIndex((cur) => cur === index ? null : cur);
+        onPick: handleSoundImportPick,
+        testIdPrefix: `${identity.familyKey}-sound-import`
+      }
+    ),
+    slots?.modals,
+    canCrossfade && xfFromId && xfToId && /* @__PURE__ */ jsx24("div", { className: designerView ? "contents" : "hidden", children: /* @__PURE__ */ jsx24(
+      TransitionDesigner,
+      {
+        host,
+        fromSceneId: xfFromId,
+        toSceneId: xfToId,
+        transitionSceneId: activeSceneId ?? "",
+        excludeSourceDbIds: [
+          ...crossfadePairsMeta.flatMap((p) => [p.originSourceDbId, p.targetSourceDbId]),
+          ...fadesMeta.map((f) => f.meta.sourceTrackDbId)
+        ],
+        onCreateCrossfade: transition.handleCreateCrossfade,
+        onCreateFade: transition.handleCreateFade,
+        familyLabel: identity.familyLabel,
+        testIdPrefix: `${identity.familyKey}-transition-designer`
+      }
+    ) }),
+    !(designerView && canCrossfade) && (isLoadingTracks ? /* @__PURE__ */ jsx24("div", { className: "text-sas-muted text-xs text-center py-4", children: "Loading tracks..." }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+      slots?.beforeRows,
+      resolvedCrossfadePairs.map((pair) => /* @__PURE__ */ jsx24(
+        CrossfadeTrackRow,
+        {
+          accentColor: identity.transitionAccentColor,
+          levels: supportsMeters ? trackLevels : void 0,
+          sliderPos: pair.sliderPos,
+          origin: {
+            trackId: pair.origin.handle.id,
+            name: pair.origin.handle.name,
+            role: pair.origin.role,
+            sourceName: pair.originSourceName,
+            soundLabel: pair.originSoundLabel,
+            runtimeState: pair.origin.runtimeState
+          },
+          target: {
+            trackId: pair.target.handle.id,
+            name: pair.target.handle.name,
+            role: pair.target.role,
+            sourceName: pair.targetSourceName,
+            soundLabel: pair.targetSoundLabel,
+            runtimeState: pair.target.runtimeState
+          },
+          onMuteToggle: () => transition.handleCrossfadeMute(pair),
+          onSoloToggle: () => transition.handleCrossfadeSolo(pair),
+          onVolumeChange: (slot, vol) => handlers.volumeChange(
+            slot === "origin" ? pair.origin.handle.id : pair.target.handle.id,
+            vol
+          ),
+          onPanChange: (slot, pan) => handlers.panChange(
+            slot === "origin" ? pair.origin.handle.id : pair.target.handle.id,
+            pan
+          ),
+          onSliderChange: (pos) => transition.handleCrossfadeSlider(pair, pos),
+          onDelete: () => transition.handleCrossfadeDelete(pair)
         },
-        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);
-          });
+        pair.groupId
+      )),
+      resolvedFades.map((fade) => /* @__PURE__ */ jsx24(
+        FadeTrackRow,
+        {
+          accentColor: identity.transitionAccentColor,
+          levels: supportsMeters ? trackLevels : void 0,
+          direction: fade.meta.direction,
+          gesture: fade.meta.gesture,
+          sliderPos: fade.meta.sliderPos,
+          layer: {
+            trackId: fade.track.handle.id,
+            name: fade.track.handle.name,
+            role: fade.track.role,
+            sourceName: fade.meta.sourceName,
+            soundLabel: fade.meta.soundLabel,
+            runtimeState: fade.track.runtimeState
+          },
+          onMuteToggle: () => handlers.muteToggle(fade.track.handle.id),
+          onSoloToggle: () => handlers.soloToggle(fade.track.handle.id),
+          onVolumeChange: (vol) => handlers.volumeChange(fade.track.handle.id, vol),
+          onPanChange: (pan) => handlers.panChange(fade.track.handle.id, pan),
+          onSliderChange: (pos) => transition.handleFadeSlider(fade, pos),
+          onDelete: () => transition.handleFadeDelete(fade)
+        },
+        fade.dbId
+      )),
+      (adapter.groupExtensions ?? []).flatMap(
+        (ext) => (resolvedGenericGroups[ext.metaKey]?.resolved ?? []).map((group) => /* @__PURE__ */ jsx24(React20.Fragment, { children: ext.renderGroup(group, groupCtx) }, `${ext.metaKey}:${group.groupId}`))
+      ),
+      tracks.map((track, index) => {
+        if (crossfadeMemberDbIds.has(track.handle.dbId) || fadeMemberDbIds.has(track.handle.dbId) || genericGroupMemberDbIds.has(track.handle.dbId)) {
+          return null;
         }
-      },
-      isDragging: draggingIndex === index,
-      isDragTarget: dragOverIndex === index && draggingIndex !== index
-    }),
-    [host, setItems, getId, onError, draggingIndex, dragOverIndex]
-  );
-  return { dragPropsFor, draggingIndex, dragOverIndex };
+        return /* @__PURE__ */ jsx24(TrackRow, { ...buildRowProps(track, reorder.dragPropsFor(index)) }, track.handle.id);
+      }),
+      slots?.afterRows
+    ] })),
+    features.exportMidi && !designerView && !isLoadingTracks && tracks.length > 0 && (() => {
+      const hasAnyMidi = tracks.some((t) => t.hasMidi);
+      const exportDisabled = isExportingMidi || !hasAnyMidi;
+      return /* @__PURE__ */ jsx24("div", { className: "pt-2", children: /* @__PURE__ */ jsx24(
+        "button",
+        {
+          "data-testid": "export-midi-tracks-button",
+          onClick: handleExportMidi,
+          disabled: exportDisabled,
+          title: isExportingMidi ? "Exporting..." : !hasAnyMidi ? "Generate MIDI on at least one track first" : "Export all tracks as a ZIP of .mid files",
+          className: `w-full px-2 py-1.5 text-[10px] uppercase tracking-wide rounded-sm border transition-colors ${exportDisabled ? "text-sas-muted/40 border-transparent hover:border-sas-accent cursor-not-allowed" : "text-sas-muted hover:text-sas-accent border-sas-border hover:border-sas-accent"}`,
+          children: isExportingMidi ? "Exporting..." : "Export Tracks"
+        }
+      ) });
+    })()
+  ] });
+}
+
+// src/panel-core/surge-sound-adapter.ts
+async function getInstrument(host, trackId) {
+  try {
+    const plugins = await host.getTrackPlugins(trackId);
+    const instrument = plugins.find(
+      (p) => !p.name.includes("Volume") && !p.name.includes("Pan") && !p.name.includes("Level")
+    );
+    if (!instrument) return null;
+    return { index: instrument.index, isRaw: !instrument.name.includes("Surge") };
+  } catch {
+    return null;
+  }
+}
+function createSurgeSoundAdapter(host, overrides = {}) {
+  const applySound = async (trackId, descriptor) => {
+    const { state, stateType } = descriptor;
+    const inst = await getInstrument(host, trackId);
+    if (!inst) return;
+    if (stateType === "raw") await host.setRawPluginState(trackId, inst.index, state);
+    else await host.setPluginState(trackId, inst.index, state);
+  };
+  return {
+    applySound,
+    captureSoundDescriptor: async (trackId) => {
+      const inst = await getInstrument(host, trackId);
+      if (!inst) return null;
+      const state = inst.isRaw ? await host.getRawPluginState(trackId, inst.index) : await host.getPluginState(trackId, inst.index);
+      return { descriptor: { state, stateType: inst.isRaw ? "raw" : "valuetree" } };
+    },
+    copySnapshot: async (trackId, snap) => {
+      if (snap.kind !== "preset") return "default";
+      await applySound(trackId, { state: snap.state, stateType: snap.stateType });
+      await host.persistTrackPresetState?.(trackId, {
+        state: snap.state,
+        stateType: snap.stateType ?? "valuetree",
+        name: snap.label
+      }).catch(() => {
+      });
+      return snap.label;
+    },
+    descriptorFromSnapshot: (snap) => {
+      const preset = snap;
+      return { state: preset.state, stateType: preset.stateType };
+    },
+    acceptedSnapshotKind: "preset",
+    historyMax: overrides.historyMax ?? 12,
+    importSoundLabel: overrides.importSoundLabel ?? "Import Preset",
+    importNoun: "preset",
+    previousSoundLabel: "Previous preset"
+  };
 }
 
 // src/constants/sdk-version.ts
-var PLUGIN_SDK_VERSION = "2.28.0";
+var PLUGIN_SDK_VERSION = "2.35.0";
 
 // src/utils/format-concurrent-tracks.ts
 function formatConcurrentTracks(ctx) {
@@ -4429,6 +7379,8 @@ function pickTopKWeighted(scored, options = {}) {
   return top[top.length - 1].item;
 }
 export {
+  AUDIO_EFFECTS,
+  AUDIO_EFFECT_LABEL,
   ConfirmDialog,
   CrossfadeModal,
   CrossfadeTrackRow,
@@ -4450,6 +7402,7 @@ export {
   FadeTrackRow,
   FxToggleBar,
   GUTTER_W,
+  GeneratorPanelShell,
   ImportTrackModal,
   TrackDrawer as InstrumentDrawer,
   LevelMeter,
@@ -4467,44 +7420,68 @@ export {
   ScrollingWaveform,
   SorceryProgressBar,
   TEXTURAL_ROLES,
+  TRANSITION_DESIGNER_DRAFT_KEY,
   TrackDrawer,
   TrackMeterStrip,
   TrackRow,
+  TransitionDesigner,
   VolumeSlider,
   WaveformView,
   analyzeWavPeak,
+  asAudioEffect,
   asCrossfadeMeta,
   asFadeMeta,
+  asTransitionDesignerDraft,
   buildCrossfadeInpaintPrompt,
   buildCrossfadeVolumeCurves,
   buildFadeVolumeCurve,
+  buildRowSlots,
   calculateTimeBasedTarget,
   cellToPx,
   centerScrollTop,
   computePeaks,
+  createSurgeSoundAdapter,
+  dbIdsFromKeys,
   dbToSlider,
   defaultFadeGesture,
   drawWaveform,
   formatConcurrentTracks,
+  hashString,
   moveItem,
+  newTrackState,
+  normalizeSlots,
+  padPair,
+  padSlots,
   parseCrossfadePairs,
   parseFades,
+  parseLLMNoteResponse,
+  parseTrackGroups,
   pickTopKWeighted,
   pitchToName,
+  pluginFxToToggleFx,
   pxToCell,
+  reconcileSlots,
   resizeNoteDuration,
+  resolveTrackGroups,
+  rowKey,
+  rowType,
   scorePromptMatch,
   sliderToDb,
+  slotsEqual,
+  soundIdentity,
   synthesizeCuePoints,
   tokenizePrompt,
+  trackDataKey,
   transposeNotes,
   useAnySolo,
+  useGeneratorPanelCore,
   useSceneState,
   useSoundHistory,
   useTrackLevel,
   useTrackLevels,
   useTrackMeter,
   useTrackReorder,
+  useTransitionOps,
   useTransportPlaying
 };
 //# sourceMappingURL=index.mjs.map