InstrumentStack.tish

import {
  parseGenBlock
} from '@spacedevin/deck'
import {
  defaultMatrixFmRawLines
} from '../model/MatrixFmDefaults.tish'
import {
  defaultPatchRawLines
} from '../model/PatchGraphEdit.tish'
// The instrument as a chain of hardware-style modules. Top→bottom is the signal path, and each module
// maps to exactly one deck block (shown as a badge on its header):
//   Generator (voice picker + per-voice designer + amp envelope) → `gen` / `gen_block`
//   Pitch     (octave · arp · chord)                             → `voice`
//   Filter/FX (cutoff · res · drive · lfo · reverb)              → `fx`
// The sequencer/euclidean lives in the channel rack (it edits `steps`), not here. Picking a voice and
// every pill is a ch.* edit or rt.emit that re-folds to deck — the UI stays a pure deck client.

import { h, Fragment } from '@tishlang/lattish'
import { defaultParamsForGeneratorId, generatorDescriptionById } from '@spacedevin/deck-synths'
import {
  deepCloneParams,
  addInstrumentPreset,
  removeInstrumentPreset,
  applyInstrumentPresetToChannel,
  ensureInstrumentPresets
} from '../model/InstrumentPresets.tish'
import { promptName } from './PromptModal.tish'
import { PanelHeader, PresetBar } from './PresetBar.tish'
import { macroCatalog, assignMacroToChannel } from '../model/MacroVoice.tish'
import { compileGeneratorToPatchLines } from '../model/PatchCompile.tish'
import { emitInstrumentModuleTpl } from '../core/Levels.tish'
import { GeneratorParamPanel } from './GeneratorParams.tish'
import { accentForGenerator, Knob, IkSelect, EnvDisplay, WaveIconPicker, LucideIcon } from './InstrumentKit.tish'
import { channelDeck } from '../model/DeckRouting.tish'
import { actorMayEditTrack } from '../codj/Merge.tish'
import { MatrixFmPanel } from './MatrixFmPanel.tish'
import { PatchGraphPanel } from './PatchGraphPanel.tish'
import { MacroDesignerPanel } from './MacroDesignerPanel.tish'
import { RichTplEditor } from './RichTplEditor.tish'
import { gainToDb, vertLeverEl } from './deck/DeckMixer.tish'
import { ensureCoDjMeta, setMasterLock } from '../codj/CoDjMeta.tish'

let VOICE_GROUPS = [
  { title: "Oscillators", voices: [["basicOsc", "Osc"], ["fmTone", "FM"], ["chiptune", "Chiptune"]] },
  { title: "Retro Chips", voices: [["nes2a03", "2A03"], ["gameBoyDmg", "LR35902"], ["c64sid", "MOS 6581"], ["ym2612", "YM2612"], ["sn76489", "SN76489"], ["spc700", "SPC700"], ["gbaDirectSound", "GBA PCM"]] },
  { title: "Texture", voices: [["noiseBurst", "Noise"], ["pad", "Pad"], ["bell", "Bell"]] },
  { title: "Strings", voices: [["guitar", "Guitar"], ["arco", "Arco"]] },
  { title: "Keys", voices: [["tine", "Tine EP"]] },
  { title: "Mallets", voices: [["halo", "Halo"]] },
  { title: "Vox", voices: [["formantVocal", "Formant"], ["ttsVocal", "TTS"], ["meSpeakVocal", "meSpeak"], ["syncChoir", "Sync Choir"]] },
  { title: "Lead", voices: [["aether", "Aether"], ["syncLead", "Sync Lead"]] },
  { title: "Analog", voices: [["obSync", "OB Sync"], ["laserSync", "Laser Sync"]] },
  { title: "Percussion", voices: [["drumSynth", "Drum"], ["clap", "Clap"], ["cymbal", "Cymbal"]] },
  { title: "Modular", voices: [["matrixFm", "Matrix FM"], ["patch", "Patch"]] },
  { title: "Kick designer", voices: [["kick_edm", "EDM"], ["kick_deep", "Deep"], ["kick_distorted", "Distort"]] },
  {
    title: "Bass designer",
    voices: [
      ["acid303", "Acid 303"],
      ["sub808", "Sub 808"],
      ["reeseBass", "Reese Bass"],
      ["bass_reese_punch", "Punch"],
      ["bass_reese_sc", "Reese SC"],
      ["bass_wobble", "Wobble"]
    ]
  }
]

fn isMacroVoice(key) {
  let mc = macroCatalog()
  let i = 0
  while (i < mc.length) {
    if (mc[i].name === key) {
      return true
    }
    i = i + 1
  }
  return false
}

fn activeVoiceKey(ch) {
  if (ch.macroName !== null) {
    return ch.macroName
  }
  return ch.generatorId ? ch.generatorId : "basicOsc"
}

fn voiceLabel(key) {
  let gi = 0
  while (gi < VOICE_GROUPS.length) {
    let grp = VOICE_GROUPS[gi]
    let vi = 0
    while (vi < grp.voices.length) {
      let voice = grp.voices[vi]
      if (voice[0] === key) {
        return voice[1]
      }
      vi = vi + 1
    }
    gi = gi + 1
  }
  return key
}

/// The canonical voice switch (engines reset params + seed graph specs; macros expand to a patch).
fn pickVoice(project, ch, key, setProject, tplMirrorFlush) {
  let prevId = activeVoiceKey(ch)
  let prevLabel = voiceLabel(prevId)
  let isDefaultName = ch.name === prevLabel || 
                      ch.name === "Kick" || 
                      ch.name === "Snare" || 
                      ch.name === "Hat" || 
                      ch.name === "Bass" || 
                      ch.name === "Synth" || 
                      ch.name === "Pad" || 
                      ch.name === "Bell" ||
                      ch.name === "Osc" ||
                      ch.name === "FM" ||
                      ch.name === "Noise" ||
                      ch.name === "Arco" ||
                      ch.name === "Guitar" ||
                      ch.name === "Tine" ||
                      ch.name === "Halo" ||
                      ch.name === "Formant" ||
                      ch.name === "meSpeak" ||
                      ch.name === "TTS" ||
                      ch.name === "Aether" ||
                      ch.name === "Patch" ||
                      ch.name === "Matrix FM" ||
                      ch.name === "basicOsc"

  let nextLabel = isMacroVoice(key) ? key : voiceLabel(key)
  if (isDefaultName) {
    ch.name = nextLabel
  }
  if (isMacroVoice(key)) {
    assignMacroToChannel(ch, key, project.userMacros)
  } else {
    // Capture the OUTGOING sound before we overwrite it, so "switch to Patch" can reduce it losslessly.
    let prevId = ch.generatorId
    let prevParams = ch.generatorParams
    let prevSpec = ch.generatorSpec
    let keptPatchSpec = null
    if (
      key === "patch" &&
      prevId === "patch" &&
      ch.generatorSpec &&
      ch.generatorSpec.graph &&
      ch.generatorSpec.raw &&
      ch.generatorSpec.raw.length > 0
    ) {
      keptPatchSpec = ch.generatorSpec
    }
    ch.macroName = null
    ch.macroParams = null
    ch.generatorId = key
    ch.generatorParams = deepCloneParams(defaultParamsForGeneratorId(key))
    if (key === "matrixFm") {
      if (
        !ch.generatorSpec ||
        ch.generatorSpec.kind !== "matrixFm" ||
        !ch.generatorSpec.raw ||
        ch.generatorSpec.raw.length === 0
      ) {
        ch.generatorSpec = parseGenBlock("matrix_fm", defaultMatrixFmRawLines())
      }
    } else {
      if (key === "patch") {
        // Patch is the universal substrate: compile the previous voice into an equivalent graph so the
        // sound is preserved. An already-patch (incl. an expanded macro) keeps its graph.
        if (keptPatchSpec !== null) {
          ch.generatorSpec = keptPatchSpec
        } else {
          let compiled = compileGeneratorToPatchLines(prevId, prevParams, prevSpec)
          let lines = compiled !== null ? compiled : defaultPatchRawLines()
          ch.generatorSpec = parseGenBlock("patch", lines)
        }
      } else {
        // A fixed generator reads generatorParams, not a graph — drop any stale spec so emit doesn't
        // write an orphan gen_block.
        ch.generatorSpec = null
      }
    }
  }
  setProject(project)
  if (tplMirrorFlush) {
    setTimeout(() => {
      tplMirrorFlush()
    }, 0)
  }
}

fn voiceDropdown(project, ch, setProject, tplMirrorFlush, rt, deckColor, badgeText) {
  let active = activeVoiceKey(ch)
  let opts = []
  let gi = 0
  while (gi < VOICE_GROUPS.length) {
    let grp = VOICE_GROUPS[gi]
    opts.push({ value: "", label: grp.title, isHeader: true })
    let vi = 0
    while (vi < grp.voices.length) {
      let voice = grp.voices[vi]
      opts.push({ value: voice[0], label: voice[1] })
      vi = vi + 1
    }
    gi = gi + 1
  }

  let activeLabel = badgeText
  let oi = 0
  while (oi < opts.length) {
    if (!opts[oi].isHeader && opts[oi].value === active) {
      activeLabel = opts[oi].label
      break
    }
    oi = oi + 1
  }

  return IkSelect({
    class: "voice-badge-select",
    style: {
      color: deckColor,
      borderColor: deckColor + "66",
      background: deckColor + "11",
      borderStyle: "solid",
      borderWidth: "1px"
    },
    value: active,
    placeholder: activeLabel,
    options: opts,
    accent: deckColor,
    onChange: (v) => {
      if (v && v.length > 0) {
        pickVoice(project, ch, v, setProject, tplMirrorFlush)
      }
    }
  })
}


// Maps a voice/fx field name to its deck emit address (used by the pitch selector knobs + fx controls);
// every edit is one rt.emit through the gated ingest door.
fn fieldAddress(field) {
  if (field === "arp") {
    return "voice/arp"
  }
  if (field === "arpRate") {
    return "voice/arprate"
  }
  if (field === "inversion") {
    return "voice/inversion"
  }
  if (field === "chord") {
    return "voice/chord"
  }
  if (field === "strum") {
    return "voice/strum"
  }
  if (field === "reverbSend") {
    return "fx/reverb"
  }
  if (field === "drive") {
    return "fx/drive"
  }
  if (field === "filterCutoff") {
    return "fx/cutoff"
  }
  if (field === "filterQ") {
    return "fx/res"
  }
  if (field === "lfoRate") {
    return "fx/lfo_rate"
  }
  if (field === "lfoDepth") {
    return "fx/lfo_depth"
  }
  return "gen/" + field
}

// Stepped selector knob for the Pitch module: a discrete dial with one detent dot per option,
// the current one lit. octaveKnob is numeric (emits the octave directly); selectorKnob maps a
// label index to a string. msKnob is a continuous dial for millisecond values.

fn msKnob(label, ch, field, maxMs, rt, accent) {
  let ms = ch[field] !== null ? ch[field] : 0
  return Knob({
    label: label,
    value: ms, min: 0, max: maxMs, step: 1,
    disp: String(Math.round(ms)) + "ms",
    accent: accent,
    valueInside: true,
    size: "sm",
    onInput: (nv) => {
      if (rt && rt.emit) {
        rt.emit("track/" + ch.id + "/" + fieldAddress(field), nv)
      }
    }
  })
}

// Per-track VOLUME — the channel's mix gain (0..150%). Lives in the FX row; writes through the gated
// `track/<id>/mix/gain` door (same door the deck fader uses), so the move broadcasts + round-trips.
fn volKnob(ch, rt, accent) {
  // Gain lives at ch.gain (the `mix gain` deck field — Apply.tish writes there, mixLine reads it), NOT ch.mix.gain.
  let g = (typeof ch.gain === "number") ? ch.gain : 0.85
  return Knob({
    label: "Vol",
    value: g, min: 0, max: 1.5, step: 0.01,
    fmt: (x) => String(Math.round(x * 100)) + "%",
    accent: accent,
    valueInside: true,
    size: "sm",
    onInput: (nv) => {
      if (rt && rt.emit) {
        rt.emit("track/" + ch.id + "/mix/gain", nv)
      }
    }
  })
}

export fn octaveKnob(ch, rt, accent) {
  let cur = ch.octave !== null ? ch.octave : 0
  return Knob({
    label: "Octave",
    value: cur,
    min: -2,
    max: 2,
    step: 1,
    detents: 5,
    accent: accent,
    valueInside: true,
    size: "sm",
    fmt: (x) => {
      let n = Math.round(x)
      return n > 0 ? "+" + String(n) : String(n)
    },
    onInput: (x) => {
      if (rt && rt.emit) {
        rt.emit("track/" + ch.id + "/voice/octave", Math.round(x))
      }
    }
  })
}

export fn selectorKnob(label, ch, field, defs, rt, accent) {
  let curStr = ch[field] !== null ? ch[field] : defs[0][1]
  let n = defs.length
  let curIdx = 0
  let i = 0
  while (i < n) {
    if (defs[i][1] === curStr) {
      curIdx = i
    }
    i = i + 1
  }
  fn clampIdx(x) {
    let k = Math.round(x)
    if (k < 0) {
      k = 0
    }
    if (k > n - 1) {
      k = n - 1
    }
    return k
  }
  return Knob({
    label: label,
    value: curIdx,
    min: 0,
    max: n - 1,
    step: 1,
    detents: n,
    accent: accent,
    valueInside: true,
    size: "sm",
    fmt: (x) => defs[clampIdx(x)][0],
    onInput: (x) => {
      if (rt && rt.emit) {
        rt.emit("track/" + ch.id + "/" + fieldAddress(field), defs[clampIdx(x)][1])
      }
    }
  })
}

// ---- module card chrome + per-module Designer⇄Raw reduction ----

fn moduleRawActive(ctx, module) {
  let rt = ctx.rt
  return rt !== null && rt.moduleRaw !== null && rt.moduleRaw[ctx.ch.id + "/" + module] === true
}

fn setModuleRaw(ctx, module, on) {
  let rt = ctx.rt
  if (!rt) {
    return
  }
  if (!rt.moduleRaw) {
    rt.moduleRaw = {}
  }
  rt.moduleRaw[ctx.ch.id + "/" + module] = on
  ctx.setProject(ctx.project)
}

// Matrix FM / Patch open their full editor in a modal (they don't fit a grid card). Transient UI state on rt,
// same mechanism as the Designer/Raw toggle.
fn closeGenModal(rt, project, setProject) {
  if (rt) {
    rt.genModal = null
    if (setProject) {
      setProject(project)
    }
  }
}

fn ModuleCard(title, tplBlock, module, ctx, children, wide, extraClass) {
  let hasRaw = module !== null && module !== ""
  let raw = hasRaw && moduleRawActive(ctx, module)
  let cardClass = wide ? "instr-module instr-module-wide" : "instr-module"
  if (extraClass !== null && extraClass !== "") {
    cardClass = cardClass + " " + extraClass
  }
  // When the code (raw deck) view is active this module takes over the whole panel — the CSS hides its sibling
  // row and lets the editor fill the width/height (see .instr-module-raw-active).
  if (raw) {
    cardClass = cardClass + " instr-module-raw-active"
  }
  let body = children
  if (raw) {
    // The current gen_block for this module — shown in the editor AND used as the undo inverse (the pre-edit
    // text), since onCommit fires on blur with the new text and this closure captures the pre-edit value.
    let curTpl = emitInstrumentModuleTpl(ctx.project, ctx.ch.id, module)
    // A fragment doesn't need the "deck 1" document header shown in the editor — strip it for DISPLAY only, then
    // re-add it on apply so the round-trip (and the undo inverse, which keeps the original) is unchanged.
    let displayTpl = curTpl
    if (displayTpl.substring(0, 4) === "tpl ") {
      let nlPos = displayTpl.indexOf("\n")
      if (nlPos >= 0) {
        displayTpl = displayTpl.substring(nlPos + 1)
      }
      while (displayTpl.indexOf("\n") === 0) {
        displayTpl = displayTpl.substring(1)
      }
    }
    body = RichTplEditor(
      ctx.rt,
      "rawed-" + ctx.ch.id + "-" + module,
      displayTpl,
      (text) => {
        if ((ctx.rt === null)) {
          return
        }
        let full = text.substring(0, 4) === "tpl " ? text : "deck 1\n\n" + text
        if (ctx.rt.directiveUndoable) {
          ctx.rt.directiveUndoable(full, curTpl, "rawedit:" + ctx.ch.id + ":" + module)
        } else if (ctx.rt.directive) {
          ctx.rt.directive(full)
        }
      }
    )
  }
  let accent = ctx.accent
  let headStyle = accent ? { borderLeftColor: accent, background: accent + "11" } : {}
  let tplStyle = accent ? { color: accent } : {}
  let toggleStyle = accent ? { borderColor: accent + "33" } : {}
  let headerTooltip = null
  if (title === "Sound" && ctx.ch) {
    headerTooltip = generatorDescriptionById(ctx.ch.generatorId || "basicOsc")
  }
  return (
    <section class={cardClass}>
      <div class="instr-module-head" style={headStyle} title={headerTooltip}>
        <span class="instr-module-title">{title}</span>
        {hasRaw ? (
          <span class="instr-module-toggle" style={toggleStyle}>
            <button type="button" class={raw ? "imt-btn" : "imt-btn imt-on"} title="Designer (knobs)" style={!raw && accent ? { background: accent + "33", color: accent } : {}} onclick={() => setModuleRaw(ctx, module, false)}>{LucideIcon("sliders")}</button>
            <button type="button" class={raw ? "imt-btn imt-on" : "imt-btn"} title="Raw (deck)" style={raw && accent ? { background: accent + "33", color: accent } : {}} onclick={() => setModuleRaw(ctx, module, true)}>{LucideIcon("code")}</button>
          </span>
        ) : null}
        {tplBlock !== "" ? <span class="instr-module-tpl" style={tplStyle}>{tplBlock}</span> : null}
      </div>
      <div class="instr-module-body">{body}</div>
    </section>
  )
}

fn voiceDesigner(project, ch, gid, setProject, tplMirrorFlush, rt, inModal) {
  let isMacro = ch.macroName !== null
  // Ownership gate: the modular patch/matrix editors mutate the project locally + broadcast, so a non-owner
  // (a co-DJ track you don't own, or a master-locked track) must not author edits — else the optimistic
  // local state diverges from the gated-rejected broadcast. actorMayEditTrack respects ownership + masterLock;
  // the local actor is rt.coDjActorId (defaults to "human", which owns everything in a solo session).
  let selfActor = (rt && rt.coDjActorId) ? rt.coDjActorId : "human"
  let mayEdit = actorMayEditTrack(project, ch.id, selfActor, false)
  // ONLY a bare Matrix FM or Patch voice is edited in a modal — their graph editors don't fit a grid card.
  // Inline they collapse to a launcher button; the real editor renders only in the modal (inModal=true). EVERY
  // other voice renders fully inline in its card — INCLUDING a macro built ON a patch/matrix graph (its gid is
  // "patch"/"matrixFm" but it's authored through the small MacroDesignerPanel, NOT the raw graph), so a macro
  // must never trigger the modal regardless of its underlying generator.
  let isModular = (gid === "matrixFm" || gid === "patch") && !isMacro
  if (isModular && !inModal) {
    let label = gid === "patch" ? "Patch" : "Matrix FM"
    return (
      <div class="instr-params-wrap">
        <button type="button" class="gen-open-modal" onclick={() => { if (rt) { rt.genModal = ch.id; setProject(project) } }}>{"⤢ Edit " + label}</button>
      </div>
    )
  }
  return (
    <Fragment>
      <div class="instr-params-wrap">{GeneratorParamPanel(ch, project, setProject, tplMirrorFlush, rt)}</div>
      {gid === "matrixFm" ? (
        <div class="matrixfm-panel-wrap">{MatrixFmPanel(ch, project, setProject, tplMirrorFlush, mayEdit, rt)}</div>
      ) : null}
      {isMacro ? (
        <div class="macro-panel-wrap">{MacroDesignerPanel(ch, project, setProject, tplMirrorFlush)}</div>
      ) : null}
      {gid === "patch" && !isMacro ? (
        <div class="patch-panel-wrap">{PatchGraphPanel(ch, project, setProject, rt, mayEdit)}</div>
      ) : null}
    </Fragment>
  )
}

// Instrument preset load/save — the SAME shared PresetBar the sequence/session/rack headers use, so it
// looks and behaves identically. Loads by name (instrumentPresets carry the full sound) and saves a named
// snapshot of the current channel.
fn instrumentPresetBar(project, ch, setProject, tplMirrorFlush) {
  fn onLoad(name) {
    let pi = 0
    while (pi < project.instrumentPresets.length) {
      if (project.instrumentPresets[pi].name === name) {
        applyInstrumentPresetToChannel(ch, project.instrumentPresets[pi])
        setProject(project)
        if (tplMirrorFlush) {
          tplMirrorFlush()
        }
        return
      }
      pi = pi + 1
    }
  }
  fn onSave() {
    promptName("Save instrument preset as", ch.name + " sound", (nm) => {
      addInstrumentPreset(project, nm, ch)
      setProject(project)
    })
  }
  fn onDelete(name) {
    removeInstrumentPreset(project, name)
    setProject(project)
  }
  return PresetBar("Preset", project.instrumentPresets, onLoad, onSave, "", onDelete)
}

fn SoundModule(ctx, gid) {
  // Modular designers (Matrix FM / Patch / a frozen macro graph) need more room than a small box.
  let wide = gid === "matrixFm" || gid === "patch" || ctx.ch.macroName !== null
  return ModuleCard(
    "Sound",
    "",
    "gen",
    ctx,
    voiceDesigner(ctx.project, ctx.ch, gid, ctx.setProject, ctx.tplMirrorFlush, ctx.rt, false),
    wide
  )
}

fn PitchModule(ctx) {
  let ch = ctx.ch
  let rt = ctx.rt
  let accent = accentForGenerator(ch.generatorId)
  let arpDefs = [["Off", "off"], ["Up", "up"], ["Down", "down"], ["Up-Down", "updown"], ["Random", "random"]]
  let arpRateDefs = [["Auto", "auto"], ["1/8", "1/8"], ["1/16", "1/16"], ["1/32", "1/32"]]
  let chordDefs = [["Off", "off"], ["Major", "major"], ["Minor", "minor"], ["Dom7", "dom7"], ["Maj7", "maj7"], ["Min7", "min7"], ["Dim", "dim"], ["Aug", "aug"], ["Sus4", "sus4"], ["Add9", "add9"]]
  let invDefs = [["Root", "root"], ["1st", "1st"], ["2nd", "2nd"]]
  return ModuleCard(
    "FX",
    "",
    "voice",
    ctx,
    <div class="instr-pitch-knobs" style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
      {volKnob(ch, rt, accent)}
      {octaveKnob(ch, rt, accent)}
      {selectorKnob("Chord", ch, "chord", chordDefs, rt, accent)}
      {selectorKnob("Inv", ch, "inversion", invDefs, rt, accent)}
      {selectorKnob("Arp", ch, "arp", arpDefs, rt, accent)}
      {selectorKnob("Rate", ch, "arpRate", arpRateDefs, rt, accent)}
      {msKnob("Strum", ch, "strum", 150, rt, accent)}
    </div>
  )
}


fn deckWaveColorHex(deck) {
  if (deck === "B") {
    return "#e879f9"
  }
  if (deck === "C") {
    return "#f59e0b"
  }
  if (deck === "D") {
    return "#4ade80"
  }
  return "#22d3ee"
}

export fn InstrumentStack(project, selectedCh, setProjectFromUI, tplMirrorFlush, rt, activeDeck) {
  ensureInstrumentPresets(project)
  
  let targetChannels = []
  let deckColor = ""
  
  if (activeDeck !== null && activeDeck !== "") {
    deckColor = deckWaveColorHex(activeDeck)
    let i = 0
    while (i < project.channels.length) {
      let ch = project.channels[i]
      if (ch && channelDeck(project, ch) === activeDeck) {
        targetChannels.push(ch)
      }
      i = i + 1
    }
  } else {
    let ch = null
    if (selectedCh >= 0 && selectedCh < project.channels.length) {
      ch = project.channels[selectedCh]
    }
    if (ch) {
      targetChannels.push(ch)
      deckColor = deckWaveColorHex(channelDeck(project, ch))
    }
  }
  
  if (targetChannels.length === 0) {
    let hint = activeDeck !== null && activeDeck !== ""
      ? "No instruments routed to deck " + activeDeck + ". Assign a track to this deck in the mixer or deck."
      : "Select a channel in the rack."
    let title = activeDeck !== null && activeDeck !== ""
      ? "DECK " + activeDeck + " // INSTRUMENTS"
      : "INSTRUMENT"
    let color = activeDeck !== null && activeDeck !== ""
      ? deckWaveColorHex(activeDeck)
      : "var(--border, #2a2a2a)"
    return (
      <section class="panel instr-stack-panel" style={{ borderColor: color + "55" }}>
        <h2 style={activeDeck ? { color: color } : {}}>{title}</h2>
        <p class="instr-panel-hint">{hint}</p>
      </section>
    )
  }
  
  let cards = []
  let k = 0
  while (k < targetChannels.length) {
    let ch = targetChannels[k]
    let gid = ch.generatorId ? ch.generatorId : "basicOsc"
    let ctx = { project: project, ch: ch, rt: rt, setProject: setProjectFromUI, tplMirrorFlush: tplMirrorFlush, accent: deckColor }
    
    let badgeText = "SYNTH"
    if (gid === "noiseBurst" || gid === "drumSynth" || gid === "clap" || gid === "cymbal") {
      badgeText = "DRUM"
    } else if (gid === "tine" || gid === "bell") {
      badgeText = "KEYS"
    }
    
    let acc = deckColor
    let chId = ch.id

    // The stem waveform: narrower + visually punchier (see .instr-head-mixer .dk-stem-wave). The per-track
    // gain knob that used to sit beside it is gone — deck/channel volume lives on the deck strip + mixer.
    let waveformEl = (
      <div class="dk-fader-wave">
        <canvas class={"dk-stem-wave dk-wave-" + chId} width="40" height="20" />
      </div>
    )

    ensureCoDjMeta(project)
    let meta = project.coDjMeta.tracks[ch.id]
    let locked = meta !== null && meta.masterLock === true

    cards.push(
      <section
        class="panel instr-stack-panel"
        style={{
          borderTopColor: deckColor,
          borderTopWidth: "2px",
          borderTopStyle: "solid",
          borderLeft: "none",
          borderRight: "none",
          borderBottom: "none",
          background: "transparent",
          margin: "0",
          borderRadius: "0",
          paddingLeft: "0",
          paddingRight: "0"
        }}
        key={"ic-" + ch.id}
      >
        {PanelHeader(
          <Fragment>
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
              <span class="deck-nav-dot" style={{ background: deckColor, boxShadow: "0 0 8px " + deckColor }}></span>
              <input
                type="text"
                class="instr-name-input"
                value={ch.name}
                onchange={(e) => {
                  let newName = e.target.value.trim()
                  if (newName.length > 0) {
                    if (rt && rt.emit) {
                      rt.emit("track/" + ch.id + "/name", newName)
                    } else {
                      ch.name = newName
                      setProjectFromUI(project)
                    }
                  }
                }}
                onkeydown={(e) => {
                  if (e.key === "Enter") {
                    e.target.blur()
                  }
                }}
                title="Hover or double click to edit track name"
              />
              <div class="sg-gutter-ctl" style={{ display: "flex", gap: "3px", marginRight: "4px" }}>
                {(rt !== null && rt.coDjWs && rt.coDjWs.readyState === 1) ? (
                  <button
                    type="button"
                    class="sg-deck-chip sg-deck-chip-locked"
                    style={{
                      borderColor: deckColor,
                      color: deckColor,
                      boxShadow: "0 0 6px " + deckColor + "33",
                      width: "17px",
                      height: "17px",
                      fontSize: "0.58rem",
                      padding: "0",
                      lineHeight: "15px",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center"
                    }}
                    title="Decks are locked in a co-DJ session — fixed per player (A=P1, B=P2, C=P3, D=P4)"
                  >
                    {channelDeck(project, ch)}
                  </button>
                ) : IkSelect({
                  // A select LIST (A/B/C/D) so you can jump straight to any deck instead of cycling through them.
                  class: "sg-deck-select",
                  value: channelDeck(project, ch),
                  options: [{ value: "A", label: "A" }, { value: "B", label: "B" }, { value: "C", label: "C" }, { value: "D", label: "D" }],
                  style: { borderColor: deckColor, color: deckColor, boxShadow: "0 0 6px " + deckColor + "33" },
                  onChange: (v) => {
                    ch.deckSlot = v === "B" ? 1 : v === "C" ? 2 : v === "D" ? 3 : 0
                    ch.actorLane = ch.deckSlot === 0 ? "" : "client"
                    setProjectFromUI(project)
                    if (rt && rt.touchMixer) {
                      rt.touchMixer()
                    }
                  }
                })}
                <button
                  type="button"
                  class={ch.mute ? "sg-tog sg-tog-on" : "sg-tog"}
                  title="Mute"
                  onclick={(e) => {
                    e.stopPropagation()
                    if (rt && rt.emit) {
                      rt.emit("track/" + ch.id + "/mix/mute", !ch.mute)
                    }
                  }}
                >
                  {LucideIcon("volume-x")}
                </button>
                <button
                  type="button"
                  class={ch.solo ? "sg-tog sg-tog-solo" : "sg-tog"}
                  title="Solo"
                  onclick={(e) => {
                    e.stopPropagation()
                    if (rt && rt.emit) {
                      rt.emit("track/" + ch.id + "/mix/solo", !ch.solo)
                    }
                  }}
                >
                  {LucideIcon("headphones")}
                </button>
                <button
                  type="button"
                  class={locked ? "sg-tog sg-tog-lock" : "sg-tog"}
                  title="Master-lock (agents can't overwrite)"
                  onclick={(e) => {
                    e.stopPropagation()
                    setMasterLock(project, ch.id, !locked)
                    setProjectFromUI(project)
                  }}
                >
                  {LucideIcon("lock")}
                </button>
              </div>
              {voiceDropdown(project, ch, setProjectFromUI, tplMirrorFlush, rt, deckColor, badgeText)}
              <button
                type="button"
                class="btn-deck btn-deck-outline"
                style={{
                  marginTop: 0,
                  padding: "0.2rem 0.35rem",
                  borderColor: ch.clipInstrMode === "store" ? "rgba(232, 148, 92, 0.7)" : deckColor + "44",
                  color: ch.clipInstrMode === "store" ? "var(--accent-warm, #e8945c)" : "#999",
                  background: ch.clipInstrMode === "store" ? "rgba(232, 148, 92, 0.1)" : "transparent"
                }}
                title={ch.clipInstrMode === "store" ? "Per-Pattern: Instrument parameters are stored in the active session program. Click to switch to Global (shared)." : "Global: Instrument parameters are shared across all patterns. Click to switch to Per-Pattern (individual)."}
                onclick={() => {
                  ch.clipInstrMode = ch.clipInstrMode === "store" ? "sync" : "store"
                  setProjectFromUI(project)
                }}
              >
                {ch.clipInstrMode === "store" ? (
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: "block" }}>
                    <rect x="2" y="3" width="20" height="18" rx="2" ry="2"/>
                    <line x1="2" y1="13" x2="22" y2="13"/>
                    <line x1="6" y1="13" x2="6" y2="21"/>
                    <line x1="10" y1="13" x2="10" y2="21"/>
                    <line x1="14" y1="13" x2="14" y2="21"/>
                    <line x1="18" y1="13" x2="18" y2="21"/>
                  </svg>
                ) : (
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: "block" }}>
                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                  </svg>
                )}
              </button>
            </div>
          </Fragment>,
          <div class="instr-head-mixer" style={{ display: "flex", alignItems: "center", gap: "0.8rem" }}>
            {instrumentPresetBar(project, ch, setProjectFromUI, tplMirrorFlush)}
            {waveformEl}
          </div>
        )}
        <div class="instr-modules-row">
          {SoundModule(ctx, gid)}
          {PitchModule(ctx)}
        </div>
      </section>
    )
    k = k + 1
  }
  
  let modalEl = null
  if (rt && rt.genModal) {
    let mch = null
    let mi = 0
    while (mi < project.channels.length) {
      if (project.channels[mi].id === rt.genModal) {
        mch = project.channels[mi]
      }
      mi = mi + 1
    }
    if (mch) {
      let mgid = mch.generatorId ? mch.generatorId : "basicOsc"
      modalEl = (
        <div class="gen-modal-backdrop" onmousedown={(e) => { if (e.target === e.currentTarget) { closeGenModal(rt, project, setProjectFromUI) } }}>
          <div class="gen-modal">
            <div class="gen-modal-head">
              <span class="gen-modal-title">{mch.name}</span>
              <button type="button" class="gen-modal-close" onclick={() => closeGenModal(rt, project, setProjectFromUI)}>{"✕"}</button>
            </div>
            <div class="gen-modal-body">
              {voiceDesigner(project, mch, mgid, setProjectFromUI, tplMirrorFlush, rt, true)}
            </div>
          </div>
        </div>
      )
    }
  }
  if (activeDeck !== null && activeDeck !== "") {
    // Fill out the last row of the 3-wide grid with EMPTY slots (slightly different background) — a reserved
    // zone for a future "fun" element. Only when there's at least one instrument and the row isn't already full.
    if (cards.length > 0) {
      let rem = cards.length % 3
      let fill = rem === 0 ? 0 : 3 - rem
      let f = 0
      while (f < fill) {
        cards.push(<div class="instr-empty-slot" key={"empty-slot-" + String(f)} />)
        f = f + 1
      }
    }
    return <Fragment><div class="instr-stack-host"><div class="instr-grid-container">{cards}</div></div>{modalEl}</Fragment>
  }
  return <Fragment><div class="instr-stack-host">{cards}</div>{modalEl}</Fragment>
}