MatrixFmPanel.tish

import {
  parseGenBlock
} from '@spacedevin/deck'
import {
  sortedStringKeys,
  syncMatrixFmSpecFromGraph
} from '@spacedevin/deck-synths'
import {
  addMatrixFmOperator,
  removeMatrixFmOperator,
  addMatrixFmFilter,
  removeMatrixFmFilter,
  findModAmount,
  setModAmount,
  addMatrixFmRoute,
  removeMatrixFmRouteAt,
  ensureMatrixFmOpEnv,
  ensureMatrixFmFilterEnv
} from '../model/MatrixFmGraphEdit.tish'
import {
  defaultMatrixFmRawLines
} from '../model/MatrixFmDefaults.tish'
// Sytrus-style Matrix FM editor: operators, modulation matrix, filters, routing.
// Now with SVG signal-flow cables like the Patch editor.

import { h } from '@tishlang/lattish'
import { Knob, WaveIconPicker, IkSelect, accentForGenerator, matrixFmSvgDataUrl, matrixFmLucideIconSvg, isKnobDragging } from './InstrumentKit.tish'
import { emitInstrumentModuleTpl } from '../core/Levels.tish'
import { cablePathD } from './PatchGraphPanel.tish'

// ---- Signal-flow cables for Matrix FM ----
// Module-level state so the imperative SVG repaint works outside the render cycle (like Patch).
let mfmCableRoutes = []
let mfmCableModMatrix = []
let mfmCableDrawPending = false
let mfmCableListenersWired = false

fn drawMfmCables() {
  mfmCableDrawPending = false
  if (typeof globalThis === "undefined" || (globalThis.document === null)) { return }
  let doc = globalThis.document
  let host = doc.getElementById("mfm-cable-host")
  let svg = doc.getElementById("mfm-cables")
  if ((host === null) || (svg === null)) { return }
  let hr = host.getBoundingClientRect()
  let parts = ""
  // Draw routing cables (op/filter → filter/out)
  let ri = 0
  while (ri < mfmCableRoutes.length) {
    let rt = mfmCableRoutes[ri]
    let sk = rt.srcKind ? rt.srcKind : "op"
    let srcElId = sk === "filter" ? "mfm-flt-" + rt.srcId : "mfm-op-" + rt.srcId
    let dk = rt.dstKind ? rt.dstKind : "out"
    let dstElId = dk === "out" ? "mfm-sink-out" : "mfm-flt-" + rt.dstId
    let srcEl = doc.getElementById(srcElId)
    let dstEl = doc.getElementById(dstElId)
    if (srcEl !== null && dstEl !== null) {
      let sr = srcEl.getBoundingClientRect()
      let dr = dstEl.getBoundingClientRect()
      let x1 = sr.right - hr.left
      let y1 = sr.top - hr.top + sr.height / 2
      let x2 = dr.left - hr.left
      let y2 = dr.top - hr.top + dr.height / 2
      let cableClass = dk === "out" ? "patch-cable patch-cable-out" : "patch-cable patch-cable-audio"
      parts = parts + "<path class=\"" + cableClass + "\" d=\"" + cablePathD(x1, y1, x2, y2) + "\" />"
    }
    ri = ri + 1
  }
  // Draw modulation arcs (op → op, from the matrix)
  let mi = 0
  while (mi < mfmCableModMatrix.length) {
    let mm = mfmCableModMatrix[mi]
    let srcEl = doc.getElementById("mfm-op-" + mm.src)
    let dstEl = doc.getElementById("mfm-op-" + mm.dst)
    if (srcEl !== null && dstEl !== null) {
      let sr = srcEl.getBoundingClientRect()
      let dr = dstEl.getBoundingClientRect()
      let x1 = sr.right - hr.left
      let y1 = sr.top - hr.top + sr.height / 2
      let x2 = dr.left - hr.left
      let y2 = dr.top - hr.top + dr.height / 2
      parts = parts + "<path class=\"patch-cable patch-cable-mod\" d=\"" + cablePathD(x1, y1, x2, y2) + "\" />"
    }
    mi = mi + 1
  }
  svg.setAttribute("width", String(Math.round(hr.width)))
  svg.setAttribute("height", String(Math.round(hr.height)))
  svg.innerHTML = parts
}

fn scheduleMfmCableDraw() {
  if (mfmCableDrawPending) { return }
  if (typeof globalThis === "undefined" || typeof globalThis.requestAnimationFrame !== "function") { return }
  mfmCableDrawPending = true
  globalThis.requestAnimationFrame(drawMfmCables)
}

fn wireMfmCableListeners() {
  if (mfmCableListenersWired) { return }
  if (typeof globalThis === "undefined" || typeof globalThis.addEventListener !== "function") { return }
  mfmCableListenersWired = true
  globalThis.addEventListener("resize", scheduleMfmCableDraw)
  globalThis.addEventListener("scroll", scheduleMfmCableDraw, true)
  if (globalThis.document !== null && typeof globalThis.document.addEventListener === "function") {
    globalThis.document.addEventListener("visibilitychange", scheduleMfmCableDraw)
  }
}

fn numOr(x, def) {
  if (typeof x === "number" && x === x) {
    return x
  }
  return def
}

fn freqToSliderStep(hz) {
  let lo = Math.log(20)
  let hi = Math.log(20000)
  let h = hz
  if (h < 20) {
    h = 20
  }
  if (h > 20000) {
    h = 20000
  }
  let t = (Math.log(h) - lo) / (hi - lo)
  return Math.round(t * 1000)
}

fn sliderStepToFreq(sl) {
  let lo = Math.log(20)
  let hi = Math.log(20000)
  let t = sl / 1000
  return Math.round(Math.exp(lo + t * (hi - lo)))
}

/** Same visual timing as basicOsc deck envelope (GeneratorParams). */
fn matrixFmEnvelopePathD(a, d, s, r) {
  let W = 100
  let H = 44
  let hold = 0.12
  let aa = numOr(a, 0)
  let dd = numOr(d, 0)
  let rr = numOr(r, 0)
  if (aa < 0) {
    aa = 0
  }
  if (dd < 0) {
    dd = 0
  }
  if (rr < 0) {
    rr = 0
  }
  let ss = numOr(s, 0.5)
  if (ss < 0) {
    ss = 0
  }
  if (ss > 1) {
    ss = 1
  }
  let T = aa + dd + hold + rr
  if (T < 0.0005) {
    T = 0.0005
  }
  let xA = (aa / T) * W
  let xAD = ((aa + dd) / T) * W
  let xADS = ((aa + dd + hold) / T) * W
  let yS = H * (1 - ss)
  return (
    "M 0 " +
    String(H) +
    " L " +
    String(xA) +
    " 0 L " +
    String(xAD) +
    " " +
    String(yS) +
    " L " +
    String(xADS) +
    " " +
    String(yS) +
    " L " +
    String(W) +
    " " +
    String(H)
  )
}

/** Data-URL SVG as CSS background: same namespace fix as img, and style updates repaint reliably. */
fn matrixFmEnvPreviewBlock(a, d, s, r) {
  let pathD = matrixFmEnvelopePathD(a, d, s, r)
  let svg =
    "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 44\"><path fill=\"none\" stroke=\"#e8c040\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"" +
    pathD +
    "\"/></svg>"
  let url = matrixFmSvgDataUrl(svg)
  return (
    <div
      class="sytrus-env-bg"
      style={{
        backgroundImage: "url(\"" + url + "\")",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center"
      }}
    />
  )
}


// Pure: which FILTERS reach `out` — directly, or through another filter (filter→filter resolved to a
// fixpoint). Exported for tests + the flow cues.
export fn matrixFiltersReachingOut(g) {
  let routes = g.routes ? g.routes : []
  let fOut = {}
  let pass = 0
  while (pass < 8) {
    let i = 0
    while (i < routes.length) {
      let r = routes[i]
      if (r.srcKind === "filter") {
        let reaches = false
        if (r.dstKind === "out") {
          reaches = true
        } else if (r.dstKind === "filter" && fOut[r.dstId] === true) {
          reaches = true
        }
        if (reaches) {
          fOut[r.srcId] = true
        }
      }
      i = i + 1
    }
    pass = pass + 1
  }
  return fOut
}

// Pure: which operators are AUDIBLE — route to `out` directly, or through a filter that reaches out. If there
// are no routes, the engine defaults the first op to out, so mirror that. Exported for tests + the flow cues.
export fn matrixOpsReachingOut(g, opIds) {
  let out = {}
  let routes = g.routes ? g.routes : []
  if (routes.length === 0) {
    if (opIds.length > 0) {
      out[opIds[0]] = true
    }
    return out
  }
  let fOut = matrixFiltersReachingOut(g)
  let j = 0
  while (j < routes.length) {
    let r = routes[j]
    if (r.srcKind === "op") {
      if (r.dstKind === "out") {
        out[r.srcId] = true
      } else if (r.dstKind === "filter" && fOut[r.dstId] === true) {
        out[r.srcId] = true
      }
    }
    j = j + 1
  }
  return out
}

// Compact signal-flow strip — the WHOLE chain on one row: op boxes, then filter boxes, then OUT (left→right).
// ABOVE the row: FM/RM modulation arcs (op→op, dot at the modulated end). BELOW the row: the ROUTING bus as
// arcs (op→filter / op→out / filter→out) — so the filter+routing stage is visible, and a filter with no route
// onward shows as un-lit (a dead end). Lit boxes reach OUT. Positions are computed → pure/testable.
fn matrixFlowStrip(g, opIds, filterIds, reachOut, filterReach) {
  let nOp = opIds.length
  if (nOp === 0) {
    return null
  }
  let nF = filterIds.length
  let padL = 16
  let gap = 54
  let boxW = 30
  let boxH = 24
  let rowY = 48
  let boxTop = rowY - boxH / 2
  let boxBot = rowY + boxH / 2
  let nodeX = {}
  let idx = 0
  let oi = 0
  while (oi < nOp) {
    nodeX["op:" + opIds[oi]] = padL + idx * gap
    idx = idx + 1
    oi = oi + 1
  }
  let fi = 0
  while (fi < nF) {
    nodeX["f:" + filterIds[fi]] = padL + idx * gap
    idx = idx + 1
    fi = fi + 1
  }
  nodeX["out"] = padL + idx * gap
  let w = padL + idx * gap + boxW + 10
  let hgt = 100
  // FM/RM modulation arcs (above the row).
  let arcs = []
  let mods = g.mods ? g.mods : []
  let mi = 0
  while (mi < mods.length) {
    let md = mods[mi]
    let amt = md.amount !== null ? md.amount : 0
    let sx = nodeX["op:" + md.src]
    let dx = nodeX["op:" + md.dst]
    if (amt > 0.0001 && sx !== null && dx !== null && md.src !== md.dst) {
      let x1 = sx + boxW / 2
      let x2 = dx + boxW / 2
      let lift = 18 + Math.abs(x2 - x1) * 0.16
      let midx = (x1 + x2) / 2
      let cls = md.type === "rm" ? "mfm-arc mfm-arc-rm" : "mfm-arc mfm-arc-fm"
      arcs.push(<path class={cls} d={"M " + String(Math.round(x1)) + " " + String(boxTop) + " Q " + String(Math.round(midx)) + " " + String(Math.round(boxTop - lift)) + " " + String(Math.round(x2)) + " " + String(boxTop)} key={"a" + String(mi)} />)
      arcs.push(<circle class={md.type === "rm" ? "mfm-dot mfm-dot-rm" : "mfm-dot mfm-dot-fm"} cx={String(Math.round(x2))} cy={String(Math.round(boxTop))} r="2.6" key={"ad" + String(mi)} />)
    }
    mi = mi + 1
  }
  // Routing bus arcs (below the row): op/filter → filter/out.
  let routeLines = []
  let routes = g.routes ? g.routes : []
  let ri = 0
  while (ri < routes.length) {
    let r = routes[ri]
    let sKey = (r.srcKind === "filter" ? "f:" : "op:") + r.srcId
    let dKey = r.dstKind === "out" ? "out" : ("f:" + r.dstId)
    if (nodeX[sKey] !== null && nodeX[dKey] !== null) {
      let x1 = nodeX[sKey] + boxW / 2
      let x2 = nodeX[dKey] + boxW / 2
      let dip = 16 + Math.abs(x2 - x1) * 0.1
      let midx = (x1 + x2) / 2
      routeLines.push(<path class="mfm-route-line" d={"M " + String(Math.round(x1)) + " " + String(boxBot) + " Q " + String(Math.round(midx)) + " " + String(Math.round(boxBot + dip)) + " " + String(Math.round(x2)) + " " + String(boxBot)} key={"rl" + String(ri)} />)
    }
    ri = ri + 1
  }
  // Nodes.
  let nodes = []
  let nk = 0
  while (nk < nOp) {
    let id = opIds[nk]
    let cls = reachOut[id] === true ? "mfm-op mfm-op-on" : "mfm-op"
    nodes.push(<rect class={cls} x={String(nodeX["op:" + id])} y={String(boxTop)} width={String(boxW)} height={String(boxH)} rx="4" key={"n" + id} />)
    nodes.push(<text class="mfm-op-lbl" x={String(nodeX["op:" + id] + boxW / 2)} y={String(rowY + 3)} key={"nl" + id}>{id}</text>)
    nk = nk + 1
  }
  let fk = 0
  while (fk < nF) {
    let fid = filterIds[fk]
    let fcls = filterReach[fid] === true ? "mfm-filter mfm-filter-on" : "mfm-filter"
    nodes.push(<rect class={fcls} x={String(nodeX["f:" + fid])} y={String(boxTop)} width={String(boxW)} height={String(boxH)} rx="4" key={"fn" + fid} />)
    nodes.push(<text class="mfm-filter-lbl" x={String(nodeX["f:" + fid] + boxW / 2)} y={String(rowY + 3)} key={"fl" + fid}>{"F" + fid}</text>)
    fk = fk + 1
  }
  return (
    <svg class="mfm-flow" viewBox={"0 0 " + String(w) + " " + String(hgt)} preserveAspectRatio="xMinYMid meet">
      {arcs}
      {routeLines}
      {nodes}
      <rect class="mfm-out" x={String(nodeX["out"])} y={String(boxTop)} width="40" height={String(boxH)} rx="4" />
      <text class="mfm-out-lbl" x={String(nodeX["out"] + 20)} y={String(rowY + 3)}>{"OUT"}</text>
    </svg>
  )
}

// mayEdit gates authoring: when false (a co-DJ track you don't own / master-locked) the panel is read-only —
// commit() no-ops and the body gets `instr-readonly` (pointer-events:none) so no control can fire.
export fn MatrixFmPanel(ch, project, setProject, tplMirrorFlush, mayEdit, rt) {
  let canEdit = mayEdit !== false
  if (
    !ch.generatorSpec ||
    ch.generatorSpec.kind !== "matrixFm" ||
    !ch.generatorSpec.raw ||
    ch.generatorSpec.raw.length === 0
  ) {
    ch.generatorSpec = parseGenBlock("matrix_fm", defaultMatrixFmRawLines())
    setProject(project)
  }
  let spec = ch.generatorSpec
  let g = spec.graph
  if (!g.ops) {
    g.ops = {}
  }
  if (!g.opEnvs) {
    g.opEnvs = {}
  }
  if (!g.filterEnvs) {
    g.filterEnvs = {}
  }
  if (!g.filters) {
    g.filters = {}
  }
  if (!g.mods) {
    g.mods = []
  }
  if (!g.routes) {
    g.routes = []
  }

  // Undo snapshot of the gen_block before the current edit — re-synced at rest, FROZEN while a knob drags (so
  // the captured "before" is pre-drag). Same scheme as the patch editor.
  if (rt && canEdit) {
    if (!rt._genSnap) {
      rt._genSnap = {}
    }
    if (!isKnobDragging()) {
      rt._genSnap[ch.id] = emitInstrumentModuleTpl(project, ch.id, "gen")
    }
  }

  // Broadcast the whole matrix gen_block through the gated `gen` ingest door — peers + round-trip + UNDOABLE +
  // MERGES (preserves steps/mix). The matrix knobs commit() on EVERY onInput (per pixel), and ingest swaps
  // ch.generatorSpec.graph; doing that mid-drag would orphan the knobs (and re-parse per pixel). So the
  // broadcast is DEFERRED: a trailing timer that keeps re-deferring WHILE any knob is dragging, firing the one
  // broadcast only once the gesture settles. (Previously matrix edits only mirrored locally — never broadcast.)
  // Unique per-gesture coalesce token (on rt, shared with the patch editor) → each gesture is its OWN undo step
  // (not one giant per-channel step).
  fn nextGenToken() {
    if ((rt === null)) {
      return "0"
    }
    rt._genTokenSeq = (rt._genTokenSeq !== null ? rt._genTokenSeq : 0) + 1
    return String(rt._genTokenSeq)
  }
  fn broadcastFor(chId, inv) {
    if ((rt === null)) {
      return
    }
    let fwd = emitInstrumentModuleTpl(project, chId, "gen")
    if (rt.directiveUndoable) {
      rt.directiveUndoable(fwd, inv, "genblock:" + chId + ":" + nextGenToken())
    } else if (rt.directive) {
      rt.directive(fwd)
    } else if (tplMirrorFlush) {
      tplMirrorFlush()
    }
  }
  // Per-CHANNEL pending broadcast (keyed, not a single global slot): a commit for one channel/edit can never
  // silently cancel another's. If a DIFFERENT edit is already pending on this channel, flush it first rather
  // than drop it. Within one drag every commit shares the frozen snapshot, so prev.inv === inv → just re-defer.
  fn scheduleBroadcast(chId, inv) {
    if ((rt === null) || typeof setTimeout === "undefined") {
      if (tplMirrorFlush) {
        tplMirrorFlush()
      }
      return
    }
    if ((rt._mtxPending === null)) {
      rt._mtxPending = {}
    }
    let prev = rt._mtxPending[chId]
    if (prev !== null && prev.timer !== null) {
      clearTimeout(prev.timer)
      if (prev.inv !== inv) {
        broadcastFor(chId, prev.inv)
      }
    }
    let tmr = setTimeout(() => {
      if (isKnobDragging()) {
        scheduleBroadcast(chId, inv)
        return
      }
      rt._mtxPending[chId] = null
      broadcastFor(chId, inv)
    }, 110)
    rt._mtxPending[chId] = { timer: tmr, inv: inv }
  }
  fn commit() {
    if (!canEdit) {
      return
    }
    // Capture the inverse (pre-edit block) synchronously, BEFORE setProject re-syncs the snapshot.
    let inv = (rt !== null && rt._genSnap !== null) ? rt._genSnap[ch.id] : null
    syncMatrixFmSpecFromGraph(spec)
    setProject(project)
    scheduleBroadcast(ch.id, inv)
  }
  let mfmOwner = "another player"
  if (project.coDjMeta && project.coDjMeta.tracks && project.coDjMeta.tracks[ch.id] && project.coDjMeta.tracks[ch.id].ownerActorId !== null) {
    mfmOwner = String(project.coDjMeta.tracks[ch.id].ownerActorId)
  }

  let accent = accentForGenerator("matrixFm")

  let opIds = sortedStringKeys(g.ops)
  let filterIds = sortedStringKeys(g.filters)
  let reachOut = matrixOpsReachingOut(g, opIds)
  let filterReach = matrixFiltersReachingOut(g)

  let opHeaderCells = []
  let hi = 0
  while (hi < opIds.length) {
    let sid = opIds[hi]
    opHeaderCells.push(
      <th class="sytrus-matrix-th" key={"h" + sid}>
        {sid}
      </th>
    )
    hi = hi + 1
  }

  let matrixRows = []
  let rdi = 0
  while (rdi < opIds.length) {
    let dst = opIds[rdi]
    let rowCells = []
    rowCells.push(
      <th class="sytrus-matrix-rowhdr" key={"r" + dst}>
        {dst}
      </th>
    )
    let sci = 0
    while (sci < opIds.length) {
      let src = opIds[sci]
      if (src === dst) {
        rowCells.push(
          <td class="sytrus-matrix-diag" key={dst + "_" + src}>
            {"·"}
          </td>
        )
      } else {
        let fmV = findModAmount(g, "fm", src, dst)
        let rmV = findModAmount(g, "rm", src, dst)
        let srcCopy = src
        let dstCopy = dst
        let cellActive = fmV > 0.0001 || rmV > 0.0001
        rowCells.push(
          <td class={cellActive ? "sytrus-matrix-cell sytrus-matrix-active" : "sytrus-matrix-cell"} key={dst + "_" + src}>
            <div class="sytrus-mod-pair">
              <label class="sytrus-mod-lbl">
                {"FM"}
                {Knob({
                  label: "FM",
                  value: Math.round(fmV * 100),
                  min: 0,
                  max: 800,
                  step: 1,
                  size: "xs",
                  accent: accent,
                  fmt: (v) => Number(Math.round(v) / 100).toFixed(2),
                  onInput: (v) => {
                    setModAmount(g, "fm", srcCopy, dstCopy, v / 100)
                    commit()
                  }
                })}
              </label>
              <label class="sytrus-mod-lbl">
                {"RM"}
                {Knob({
                  label: "RM",
                  value: Math.round(rmV * 100),
                  min: 0,
                  max: 300,
                  step: 1,
                  size: "xs",
                  accent: accent,
                  fmt: (v) => Number(Math.round(v) / 100).toFixed(2),
                  onInput: (v) => {
                    setModAmount(g, "rm", srcCopy, dstCopy, v / 100)
                    commit()
                  }
                })}
              </label>
            </div>
          </td>
        )
      }
      sci = sci + 1
    }
    matrixRows.push(
      <tr key={"row" + dst}>
        {rowCells}
      </tr>
    )
    rdi = rdi + 1
  }
  // Helper: build inline route knob rows for routes originating from a given source
  fn inlineRouteRows(srcKind, srcId) {
    let rows = []
    let ri = 0
    while (ri < g.routes.length) {
      let rt = g.routes[ri]
      let rsk = rt.srcKind ? rt.srcKind : "op"
      if (rsk === srcKind && rt.srcId === srcId) {
        let ridx = ri
        let dk = rt.dstKind ? rt.dstKind : "out"
        // Dest kind knob: filter / out
        let dstKindOpts = ["filter", "out"]
        let dstKindLabels = ["Flt", "Out"]
        let dstKindIdx = dk === "out" ? 1 : 0
        // Dest id knob
        let dstIdList = filterIds.length > 0 ? filterIds : ["1"]
        let curDstVal = rt.dstId ? rt.dstId : (filterIds.length > 0 ? filterIds[0] : "1")
        let curDstIdIdx = 0
        let dii = 0
        while (dii < dstIdList.length) {
          if (dstIdList[dii] === curDstVal) { curDstIdIdx = dii }
          dii = dii + 1
        }
        rows.push(
          <div class="patch-route" key={"irt" + String(ri)}>
            <span class="patch-route-arrow">{"→"}</span>
            {Knob({
              label: "Dst",
              value: dstKindIdx,
              min: 0, max: 1, step: 1, detents: 2,
              size: "xs", accent: accent,
              fmt: (v) => dstKindLabels[Math.round(v) < 0 ? 0 : (Math.round(v) > 1 ? 1 : Math.round(v))],
              onInput: (v) => {
                let k = Math.round(v)
                if (k < 0) k = 0
                if (k > 1) k = 1
                g.routes[ridx].dstKind = dstKindOpts[k]
                if (dstKindOpts[k] === "out") {
                  g.routes[ridx].dstId = ""
                } else if (filterIds.length > 0) {
                  g.routes[ridx].dstId = filterIds[0]
                }
                commit()
              }
            })}
            {dk !== "out" ? Knob({
              label: "F#",
              value: curDstIdIdx,
              min: 0, max: dstIdList.length - 1, step: 1,
              detents: dstIdList.length,
              size: "xs", accent: accent,
              fmt: (v) => {
                let k = Math.round(v)
                if (k < 0) k = 0
                if (k > dstIdList.length - 1) k = dstIdList.length - 1
                return dstIdList[k]
              },
              onInput: (v) => {
                let k = Math.round(v)
                if (k < 0) k = 0
                if (k > dstIdList.length - 1) k = dstIdList.length - 1
                g.routes[ridx].dstId = dstIdList[k]
                commit()
              }
            }) : null}
            {Knob({
              label: "Vol",
              value: Math.round(numOr(rt.volume, 1) * 100),
              min: 0, max: 100, step: 1,
              size: "xs", accent: accent,
              fmt: (v) => String(Math.round(v)) + "%",
              onInput: (v) => {
                g.routes[ridx].volume = v / 100
                commit()
              }
            })}
            <button type="button" class="sytrus-icon-btn"
              onmousedown={(e) => e.stopPropagation()}
              onclick={() => { removeMatrixFmRouteAt(g, ridx); commit() }}
            >{"×"}</button>
          </div>
        )
      }
      ri = ri + 1
    }
    return rows
  }

  fn addRouteFrom(srcKind, srcId) {
    let dk0 = "out"
    let did0 = ""
    if (filterIds.length > 0) {
      dk0 = "filter"
      did0 = filterIds[0]
    }
    addMatrixFmRoute(g, srcKind, srcId, dk0, did0, 1)
    commit()
  }

  let opStrips = []
  let oi = 0
  while (oi < opIds.length) {
    let oid = opIds[oi]
    ensureMatrixFmOpEnv(g, oid)
    let op = g.ops[oid]
    let ev = g.opEnvs[oid]
    let wv = op.wave ? op.wave : "sine"
    let ratio = op.ratio > 0 ? op.ratio : 1
    let a = numOr(ev.a, 0.005)
    let d = numOr(ev.d, 0.1)
    let s = numOr(ev.s, 0.35)
    let rr = numOr(ev.r, 0.12)
    let oidCopy = oid
    let opRoutes = inlineRouteRows("op", oid)
    opStrips.push(
      <div class={reachOut[oid] === true ? "sytrus-op-card sytrus-op-audible" : "sytrus-op-card"} id={"mfm-op-" + oid} key={"op" + oid}>
        <div class="sytrus-op-card-top">
          <span class="sytrus-op-badge">{"OP " + oid}</span>
          <div style={{ flex: 1 }} />
          <button
            type="button"
            class="sytrus-icon-btn"
            title={"Remove operator"}
            onmousedown={(e) => e.stopPropagation()}
            onclick={() => {
              removeMatrixFmOperator(g, oidCopy)
              commit()
            }}
          >
            {"×"}
          </button>
        </div>
        <div class="sytrus-op-card-mid">
          {WaveIconPicker(wv, (w) => { g.ops[oidCopy].wave = w; commit() }, { accent: accent, choices: ["sine", "triangle", "sawtooth", "square", "noise"] })}
          <div class="ik-knob-grid">
            {Knob({
              label: "Ratio",
              value: Math.round(ratio * 100),
              min: 25,
              max: 3200,
              step: 1,
              accent: accent,
              fmt: (v) => Number(Math.round(v) / 100).toFixed(2) + "×",
              onInput: (v) => {
                g.ops[oidCopy].ratio = v / 100
                commit()
              }
            })}
            {Knob({
              label: "A",
              value: Math.round(a * 1000),
              min: 1,
              max: 500,
              step: 1,
              accent: accent,
              fmt: (v) => String(Math.round(v)) + " ms",
              onInput: (v) => {
                g.opEnvs[oidCopy].a = v / 1000
                commit()
              }
            })}
            {Knob({
              label: "D",
              value: Math.round(d * 1000),
              min: 1,
              max: 800,
              step: 1,
              accent: accent,
              fmt: (v) => String(Math.round(v)) + " ms",
              onInput: (v) => {
                g.opEnvs[oidCopy].d = v / 1000
                commit()
              }
            })}
            {Knob({
              label: "S",
              value: Math.round(s * 100),
              min: 0,
              max: 100,
              step: 1,
              accent: accent,
              fmt: (v) => String(Math.round(v)) + "%",
              onInput: (v) => {
                g.opEnvs[oidCopy].s = v / 100
                commit()
              }
            })}
            {Knob({
              label: "R",
              value: Math.round(rr * 1000),
              min: 1,
              max: 800,
              step: 1,
              accent: accent,
              fmt: (v) => String(Math.round(v)) + " ms",
              onInput: (v) => {
                g.opEnvs[oidCopy].r = v / 1000
                commit()
              }
            })}
          </div>
        </div>
        <div class="sytrus-op-env-wrap">{matrixFmEnvPreviewBlock(a, d, s, rr)}</div>
        <div class="patch-mod-routes">
          {opRoutes.length === 0 ? <span class="patch-route-empty">{"not routed"}</span> : opRoutes}
          <button type="button" class="patch-route-add"
            title={"Add output route from this operator"}
            onmousedown={(e) => e.stopPropagation()}
            onclick={() => addRouteFrom("op", oidCopy)}
          >{"+ →"}</button>
        </div>
      </div>
    )
    oi = oi + 1
  }

  let filterBlocks = []
  let fi = 0
  while (fi < filterIds.length) {
    let fid = filterIds[fi]
    ensureMatrixFmFilterEnv(g, fid)
    let fd = g.filters[fid]
    let fe = g.filterEnvs[fid]
    let ftype = fd.type ? fd.type : "lp24"
    let co = numOr(fd.cutoff, 8000)
    let rq = numOr(fd.res, 0.6)
    let fa = numOr(fe.a, 0.1)
    let fdd = numOr(fe.d, 0.2)
    let fs = numOr(fe.s, 0.3)
    let fr = numOr(fe.r, 0.15)
    let famt = numOr(fe.amount, 0)
    let fidCopy = fid
    let coSlider = freqToSliderStep(co)

    let typeOpts = ["lp12", "lp24", "hp12", "hp24"]
    let typeLabels = ["LP12", "LP24", "HP12", "HP24"]
    let typeIdx = 0
    let tti = 0
    while (tti < typeOpts.length) {
      if (typeOpts[tti] === ftype) {
        typeIdx = tti
      }
      tti = tti + 1
    }
    if (typeIdx < 0) {
      typeIdx = 1
    }

    let fltRoutes = inlineRouteRows("filter", fid)
    filterBlocks.push(
      <div class="sytrus-filter-card" id={"mfm-flt-" + fid} key={"flt" + fid}>
        <div class="sytrus-filter-top">
          <span class="sytrus-filter-badge">{"F " + fid}</span>
          <button
            type="button"
            class="sytrus-icon-btn"
            title={"Remove filter"}
            onmousedown={(e) => e.stopPropagation()}
            onclick={() => {
              removeMatrixFmFilter(g, fidCopy)
              commit()
            }}
          >
            {"×"}
          </button>
        </div>
        <div class="ik-knob-grid">
          {Knob({
            label: "Type",
            value: typeIdx,
            min: 0,
            max: 3,
            step: 1,
            detents: 4,
            size: "md",
            accent: accent,
            fmt: (v) => {
              let k = Math.round(v)
              if (k < 0) k = 0
              if (k > 3) k = 3
              return typeLabels[k]
            },
            onInput: (v) => {
              let k = Math.round(v)
              if (k < 0) k = 0
              if (k > 3) k = 3
              g.filters[fidCopy].type = typeOpts[k]
              commit()
            }
          })}
          {Knob({
            label: "Cutoff",
            value: coSlider,
            min: 0,
            max: 1000,
            step: 1,
            size: "md",
            accent: accent,
            fmt: (v) => String(sliderStepToFreq(v)) + " Hz",
            onInput: (v) => {
              g.filters[fidCopy].cutoff = sliderStepToFreq(v)
              commit()
            }
          })}
          {Knob({
            label: "Res",
            value: Math.round(rq * 100),
            min: 5,
            max: 100,
            step: 1,
            size: "md",
            accent: accent,
            fmt: (v) => Number(Math.round(v) / 100).toFixed(2),
            onInput: (v) => {
              g.filters[fidCopy].res = v / 100
              commit()
            }
          })}
        </div>
        <div class="sytrus-filter-env">
          <span class="sytrus-adsr-lbl">{"Cutoff env ±Hz"}</span>
          <div class="ik-knob-grid">
            {Knob({
              label: "Amt",
              value: Math.round(famt + 4000),
              min: 0,
              max: 8000,
              step: 1,
              size: "md",
              accent: accent,
              fmt: (v) => String(Math.round(v) - 4000) + " Hz",
              onInput: (v) => {
                g.filterEnvs[fidCopy].amount = v - 4000
                commit()
              }
            })}
            {Knob({
              label: "A",
              value: Math.round(fa * 1000),
              min: 1,
              max: 500,
              step: 1,
              size: "md",
              accent: accent,
              fmt: (v) => String(Math.round(v)) + " ms",
              onInput: (v) => {
                g.filterEnvs[fidCopy].a = v / 1000
                commit()
              }
            })}
            {Knob({
              label: "D",
              value: Math.round(fdd * 1000),
              min: 1,
              max: 800,
              step: 1,
              size: "md",
              accent: accent,
              fmt: (v) => String(Math.round(v)) + " ms",
              onInput: (v) => {
                g.filterEnvs[fidCopy].d = v / 1000
                commit()
              }
            })}
            {Knob({
              label: "S",
              value: Math.round(fs * 100),
              min: 0,
              max: 100,
              step: 1,
              size: "md",
              accent: accent,
              fmt: (v) => String(Math.round(v)) + "%",
              onInput: (v) => {
                g.filterEnvs[fidCopy].s = v / 100
                commit()
              }
            })}
            {Knob({
              label: "R",
              value: Math.round(fr * 1000),
              min: 1,
              max: 800,
              step: 1,
              size: "md",
              accent: accent,
              fmt: (v) => String(Math.round(v)) + " ms",
              onInput: (v) => {
                g.filterEnvs[fidCopy].r = v / 1000
                commit()
              }
            })}
          </div>
        </div>
        <div class="sytrus-filter-env-wrap">{matrixFmEnvPreviewBlock(fa, fdd, fs, fr)}</div>
        <div class="patch-mod-routes">
          {fltRoutes.length === 0 ? <span class="patch-route-empty">{"not routed"}</span> : fltRoutes}
          <button type="button" class="patch-route-add"
            title={"Add output route from this filter"}
            onmousedown={(e) => e.stopPropagation()}
            onclick={() => addRouteFrom("filter", fidCopy)}
          >{"+ →"}</button>
        </div>
      </div>
    )
    fi = fi + 1
  }

  let canAddOp = opIds.length < 8
  let canAddFlt = filterIds.length < 6

  // Build modulation matrix cable data (non-zero fm/rm arcs between operators)
  let modCables = []
  let mci = 0
  while (mci < opIds.length) {
    let msrc = opIds[mci]
    let mcj = 0
    while (mcj < opIds.length) {
      let mdst = opIds[mcj]
      if (msrc !== mdst) {
        let fmA = findModAmount(g, "fm", msrc, mdst)
        let rmA = findModAmount(g, "rm", msrc, mdst)
        if (fmA > 0.0001 || rmA > 0.0001) {
          modCables.push({ src: msrc, dst: mdst })
        }
      }
      mcj = mcj + 1
    }
    mci = mci + 1
  }

  // Hand routes + mod arcs to the imperative cable layer
  mfmCableRoutes = g.routes
  mfmCableModMatrix = modCables
  scheduleMfmCableDraw()
  wireMfmCableListeners()

  return (
    <div class={canEdit ? "sytrus-panel" : "sytrus-panel instr-readonly-host"}>
      {canEdit ? null : (
        <div class="instr-locked-hint">{"🔒 owned by " + mfmOwner + " — read only"}</div>
      )}
      <div class="sytrus-panel-head">
        <div class="sytrus-panel-head-l">
          <span class="sytrus-panel-title" title="operators · modulation · filters · bus">{"MATRIX FM"}</span>
          {canEdit ? null : <span class="instr-lock-tag">{"read only"}</span>}
        </div>

      </div>

      <div class="mfm-cable-region" id="mfm-cable-host">
        <svg id="mfm-cables" class="patch-cables" />

        <section class="sytrus-section">
          <div class="sytrus-section-h">
            <span>{"Operators"}</span>
            <button
              type="button"
              class="sytrus-add-btn"
              disabled={!canAddOp}
              onmousedown={(e) => e.stopPropagation()}
              onclick={() => {
                addMatrixFmOperator(g)
                commit()
              }}
            >
              {"+ Op"}
            </button>
          </div>
          <div class="sytrus-op-grid">{opStrips}</div>
        </section>

        <section class="sytrus-section">
          <div class="sytrus-section-h">
            <span>{"Filters"}</span>
            <button
              type="button"
              class="sytrus-add-btn"
              disabled={!canAddFlt}
              onmousedown={(e) => e.stopPropagation()}
              onclick={() => {
                addMatrixFmFilter(g)
                commit()
              }}
            >
              {"+ Filter"}
            </button>
          </div>
          <div class="sytrus-filter-grid">{filterBlocks}</div>
        </section>

        <div class="patch-sink patch-sink-out" id="mfm-sink-out">
          <span class="patch-sink-label">{"► OUT"}</span>
        </div>
      </div>

      <section class="sytrus-section">
        <div class="sytrus-section-h">
          <span>{"Modulation matrix"}</span>
          <span class="sytrus-hint">{"columns = source · rows = destination"}</span>
        </div>
        {opIds.length === 0 ? (
          <p class="sytrus-empty">{"Add an operator to edit the matrix."}</p>
        ) : (
          <div class="sytrus-matrix-wrap">
            <table class="sytrus-matrix">
              <thead>
                <tr>
                  <th class="sytrus-matrix-corner" />
                  {opHeaderCells}
                </tr>
              </thead>
              <tbody>{matrixRows}</tbody>
            </table>
          </div>
        )}
      </section>
    </div>
  )
}

fn routeIdOptions(kind, opIds, filterIds, cur) {
  let opts = []
  if (kind === "filter") {
    let fi = 0
    while (fi < filterIds.length) {
      let id = filterIds[fi]
      opts.push(selOpt(id, id, cur, "roidf" + id))
      fi = fi + 1
    }
    if (opts.length === 0) {
      opts.push(selOpt("1", "1", cur, "roidf1"))
    }
  } else {
    let oi = 0
    while (oi < opIds.length) {
      let id = opIds[oi]
      opts.push(selOpt(id, id, cur, "roido" + id))
      oi = oi + 1
    }
    if (opts.length === 0) {
      opts.push(selOpt("1", "1", cur, "roido1"))
    }
  }
  return opts
}

fn filterIdOptions(filterIds, cur) {
  let opts = []
  let fi = 0
  while (fi < filterIds.length) {
    let id = filterIds[fi]
    opts.push(selOpt(id, id, cur, "fdst" + id))
    fi = fi + 1
  }
  if (opts.length === 0) {
    opts.push(selOpt("1", "1", cur, "fdst1"))
  }
  return opts
}