@brett_lamy/docstream 1.9.1 → 1.11.0

package/src/strudel/StrudelPlayer.tsx

@@ -0,0 +1,317 @@
+import { lazy, Suspense, useEffect, useId, useRef, useState, useSyncExternalStore } from "react"
+import { Code2, Loader2, Pause, Play, SlidersHorizontal, Undo2 } from "lucide-react"
+import { HighlightedCode } from "../docs/HighlightedCode"
+import {
+  DEFAULT_SAMPLES,
+  getStrudelSnapshot,
+  playStrudel,
+  stopStrudel,
+  strudelNow,
+  subscribeStrudel,
+  updateStrudel,
+  type StrudelHap,
+  type StrudelPattern,
+} from "./engine"
+
+// The rack parses the code (acorn + the mini-notation parser); it loads the first time someone opens it.
+const StrudelRack = lazy(() => import("./StrudelRack"))
+
+export interface StrudelPlayerProps {
+  /** Strudel pattern code (what you would type at strudel.cc). */
+  code?: string
+  /** URL of a `.strudel` file to load when `code` is absent. */
+  src?: string
+  title?: string
+  className?: string
+  /** Show the code under the player from the start. Defaults to false. */
+  showCode?: boolean
+  /** Sample banks to load before the first play. Defaults to the Tidal dirt-samples. */
+  samples?: readonly string[]
+  /** Offer the equipment rack (generated from the code) behind a toggle. Defaults to true. */
+  rack?: boolean
+  /** Open the rack from the start. */
+  showRack?: boolean
+  /** Called with the code after every rack edit. */
+  onCodeChange?: (code: string) => void
+}
+
+type Source = { kind: "loading" } | { kind: "error"; message: string } | { kind: "ready"; code: string }
+
+const NOTE = /^([a-g])([#bs]*)(-?\d+)?$/i
+const STEPS: Record<string, number> = { c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11 }
+
+// A vertical position for an event: its pitch when it has one, else a stable lane per sample name.
+function pitch(value: unknown): number | null {
+  if (typeof value === "number") return value
+  if (!value || typeof value !== "object") return null
+  const v = value as Record<string, unknown>
+  if (typeof v.note === "number") return v.note
+  if (typeof v.note === "string") {
+    const m = NOTE.exec(v.note)
+    if (m) {
+      const accidental = [...m[2]!].reduce((n, c) => n + (c === "b" ? -1 : 1), 0)
+      return STEPS[m[1]!.toLowerCase()]! + accidental + (Number(m[3] ?? 3) + 1) * 12
+    }
+  }
+  if (typeof v.freq === "number") return 69 + 12 * Math.log2(v.freq / 440)
+  if (typeof v.n === "number" && typeof v.s !== "string") return v.n
+  if (typeof v.s === "string") {
+    let h = 0
+    for (const c of v.s) h = (h * 31 + c.charCodeAt(0)) | 0
+    return (Math.abs(h) % 24) + (typeof v.n === "number" ? v.n : 0)
+  }
+  return null
+}
+
+const num = (t: number | { valueOf(): number }) => Number(t.valueOf())
+
+// Scrolling piano roll: two cycles centered on the playhead, onsets only. Idle: quiet bars.
+function drawRoll(canvas: HTMLCanvasElement, pattern: StrudelPattern | null, now: number | null) {
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return
+  const dpr = Math.min(window.devicePixelRatio || 1, 2)
+  const w = Math.max(1, Math.round(canvas.clientWidth * dpr))
+  const h = Math.max(1, Math.round(canvas.clientHeight * dpr))
+  if (canvas.width !== w || canvas.height !== h) {
+    canvas.width = w
+    canvas.height = h
+  }
+  ctx.clearRect(0, 0, w, h)
+  ctx.fillStyle = getComputedStyle(canvas).color
+  if (!pattern || now === null) {
+    ctx.globalAlpha = 0.18
+    const bars = 48
+    for (let i = 0; i < bars; i++) {
+      const bh = (0.2 + 0.6 * Math.abs(Math.sin(i * 1.7) * Math.cos(i * 0.6))) * h
+      ctx.fillRect((i / bars) * w + 1, (h - bh) / 2, w / bars - 3 * dpr, bh)
+    }
+    ctx.globalAlpha = 1
+    return
+  }
+  const begin = now - 1, end = now + 1
+  let haps: StrudelHap[]
+  try {
+    haps = pattern.queryArc(begin, end).filter((hap) => hap.whole && num(hap.whole.begin) === num(hap.part.begin))
+  } catch {
+    return
+  }
+  const pitches = haps.map((hap) => pitch(hap.value))
+  const known = pitches.filter((p): p is number => p !== null)
+  const lo = known.length ? Math.min(...known) : 0
+  const hi = known.length ? Math.max(...known) : 1
+  const range = Math.max(hi - lo, 11)
+  const pad = 4 * dpr
+  const lane = Math.max(3 * dpr, Math.min(10 * dpr, (h - 2 * pad) / (range + 1)))
+  const x = (t: number) => ((t - begin) / (end - begin)) * w
+  haps.forEach((hap, i) => {
+    const p = pitches[i] ?? lo
+    const s = num(hap.whole!.begin), e = num(hap.whole!.end)
+    const y = h - pad - lane - ((p - lo + (range - (hi - lo)) / 2) / range) * (h - 2 * pad - lane)
+    ctx.globalAlpha = s <= now && now < e ? 1 : s > now ? 0.45 : 0.25
+    ctx.fillRect(x(s), y, Math.max(2 * dpr, x(e) - x(s) - 1.5 * dpr), lane)
+  })
+  ctx.globalAlpha = 0.6
+  ctx.fillRect(w / 2 - dpr / 2, 0, dpr, h)
+  ctx.globalAlpha = 1
+}
+
+/** A live-coded music player: Strudel (strudel.cc) runs the pattern in this page, no iframe. */
+export function StrudelPlayer({
+  code,
+  src,
+  title,
+  className,
+  showCode = false,
+  samples = DEFAULT_SAMPLES,
+  rack = true,
+  showRack = false,
+  onCodeChange,
+}: StrudelPlayerProps) {
+  const id = useId()
+  const [source, setSource] = useState<Source>(() => (code !== undefined ? { kind: "ready", code } : { kind: "loading" }))
+  const [codeOpen, setCodeOpen] = useState(showCode)
+  const [rackOpen, setRackOpen] = useState(showRack)
+  // The rack edits a working copy; `playable` is that copy with the rack's mutes and solos applied.
+  const [edited, setEdited] = useState<string | null>(null)
+  const [playable, setPlayable] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [cycle, setCycle] = useState(0)
+  const pattern = useRef<StrudelPattern | null>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const snapshot = useSyncExternalStore(subscribeStrudel, getStrudelSnapshot, getStrudelSnapshot)
+  const status = snapshot.owner === id ? snapshot.status : "idle"
+
+  useEffect(() => {
+    if (code !== undefined) {
+      setSource({ kind: "ready", code })
+      return
+    }
+    if (!src) {
+      setSource({ kind: "error", message: "no pattern" })
+      return
+    }
+    let live = true
+    setSource({ kind: "loading" })
+    fetch(src)
+      .then((res) => {
+        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`.trim())
+        return res.text()
+      })
+      .then((text) => live && setSource({ kind: "ready", code: text }))
+      .catch((err: unknown) => live && setSource({ kind: "error", message: err instanceof Error ? err.message : String(err) }))
+    return () => {
+      live = false
+    }
+  }, [code, src])
+
+  // Stop our pattern when the player unmounts or its code changes underneath it.
+  const ready = source.kind === "ready" ? source.code : null
+  useEffect(() => {
+    setEdited(null)
+    setPlayable(null)
+    return () => void stopStrudel(id)
+  }, [id, ready])
+  const current = edited ?? ready
+  const toPlay = playable ?? current
+
+  // Live edits: while playing, swap in the new pattern without stopping.
+  useEffect(() => {
+    if (status !== "playing" || !toPlay) return
+    const timer = setTimeout(() => {
+      updateStrudel(id, toPlay).then(
+        (p) => {
+          if (p) pattern.current = p
+          setError(null)
+        },
+        (err: unknown) => setError(err instanceof Error ? err.message : String(err)),
+      )
+    }, 120)
+    return () => clearTimeout(timer)
+  }, [toPlay])
+
+  const edit = (next: string) => {
+    setEdited(next)
+    onCodeChange?.(next)
+  }
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    if (status !== "playing") {
+      drawRoll(canvas, null, null)
+      const resize = new ResizeObserver(() => drawRoll(canvas, null, null))
+      resize.observe(canvas)
+      return () => resize.disconnect()
+    }
+    let frame = 0
+    let shown = -1
+    const tick = () => {
+      const now = strudelNow()
+      drawRoll(canvas, pattern.current, now)
+      const whole = now === null ? 0 : Math.floor(now) + 1
+      if (whole !== shown) setCycle((shown = whole))
+      frame = requestAnimationFrame(tick)
+    }
+    tick()
+    return () => cancelAnimationFrame(frame)
+  }, [status])
+
+  const toggle = async () => {
+    if (!toPlay) return
+    if (status !== "idle") {
+      await stopStrudel(id)
+      return
+    }
+    setError(null)
+    try {
+      pattern.current = await playStrudel(id, toPlay, samples)
+    } catch (err) {
+      if (err instanceof Error && err.message === "superseded") return
+      setError(err instanceof Error ? err.message : String(err))
+    }
+  }
+
+  const label = title ?? (src ? src.split(/[?#]/)[0]!.split("/").pop()! : "Strudel pattern")
+  const codeId = `${id}-code`
+  const sub =
+    source.kind === "error"
+      ? `Couldn't load: ${source.message}`
+      : source.kind === "loading"
+        ? "Loading…"
+        : status === "loading"
+          ? "Loading sounds…"
+          : status === "playing"
+            ? `Cycle ${cycle}`
+            : "Strudel"
+  return (
+    <figure className={`docstream-strudel ${className ?? ""}`.trim()} data-state={status}>
+      <div className="docstream-strudel__bar">
+        <button
+          type="button"
+          className="docstream-strudel__play"
+          onClick={toggle}
+          disabled={source.kind !== "ready"}
+          aria-label={status === "idle" ? `Play ${label}` : `Stop ${label}`}
+        >
+          {status === "loading" ? (
+            <Loader2 className="docstream-strudel__spin" size={18} />
+          ) : status === "playing" ? (
+            <Pause size={18} />
+          ) : (
+            <Play size={18} />
+          )}
+        </button>
+        <div className="docstream-strudel__meta">
+          <span className="docstream-strudel__title">{label}</span>
+          <span className="docstream-strudel__sub" aria-live="polite">
+            {sub}
+          </span>
+        </div>
+        <canvas ref={canvasRef} className="docstream-strudel__roll" aria-hidden="true" />
+        {source.kind === "ready" && rack && (
+          <button
+            type="button"
+            className="docstream-strudel__toggle"
+            aria-expanded={rackOpen}
+            aria-label={rackOpen ? "Hide equipment" : "Show equipment"}
+            onClick={() => setRackOpen((open) => !open)}
+          >
+            <SlidersHorizontal size={16} />
+          </button>
+        )}
+        {source.kind === "ready" && (
+          <button
+            type="button"
+            className="docstream-strudel__toggle"
+            aria-expanded={codeOpen}
+            aria-controls={codeId}
+            aria-label={codeOpen ? "Hide code" : "Show code"}
+            onClick={() => setCodeOpen((open) => !open)}
+          >
+            <Code2 size={16} />
+          </button>
+        )}
+      </div>
+      {error && (
+        <div className="docstream-strudel__error" role="alert">
+          {error}
+        </div>
+      )}
+      {current !== null && rack && rackOpen && (
+        <Suspense fallback={<div className="docstream-strudel__sub">Loading equipment…</div>}>
+          {edited !== null && edited !== ready && (
+            <button type="button" className="docstream-strudel__revert" onClick={() => edit(ready!)}>
+              <Undo2 size={13} aria-hidden="true" /> Revert edits
+            </button>
+          )}
+          <StrudelRack code={current} onChange={edit} onPlayableChange={setPlayable} />
+        </Suspense>
+      )}
+      {current !== null && codeOpen && (
+        <div id={codeId} className="docstream-strudel__code">
+          <HighlightedCode code={current.trim()} language="javascript" />
+        </div>
+      )}
+    </figure>
+  )
+}

package/src/strudel/StrudelRack.tsx

@@ -0,0 +1,312 @@
+/* The rack: equipment generated from a Strudel song's syntax tree. Every track becomes a device — mute/solo,
+   a gain fader, its sound and scale, a step grid for its pattern, and a knob for each effect it uses (plus any
+   you add) — and the song gets a master strip with the tempo. Every control edits the code in place (edit.ts),
+   so the code stays the source of truth: what you turn is what you'd have typed. */
+import { useEffect, useMemo, useState } from "react"
+import { AudioWaveform, Drum, KeyboardMusic, Plus, X } from "lucide-react"
+import { miniAtoms, type MiniAtom } from "./ast/mini"
+import { findCall, parseStrudel, StrudelSyntaxError, type StrudelArg, type StrudelCall, type StrudelSong, type StrudelTrack } from "./ast/program"
+import { formatNumber, isAudible, mixCode, removeMethod, setMethod, setMiniAtom, setMiniSource, setTempo, type StrudelMix } from "./ast/edit"
+import { Fader, Knob, defaultFormat } from "./controls"
+import { StepGrid } from "./StepGrid"
+
+export interface StrudelRackProps {
+  code: string
+  onChange: (code: string) => void
+  /** The code to play for the current mute/solo mix (the written code with silenced tracks). */
+  onPlayableChange?: (code: string) => void
+  className?: string
+}
+
+interface Param {
+  label: string
+  min: number
+  max: number
+  default: number
+  log?: boolean
+  format?: (v: number) => string
+}
+
+const hz = (v: number) => (v >= 1000 ? `${+(v / 1000).toFixed(1)}k` : v.toFixed(0))
+const pct = (v: number) => `${Math.round(v * 100)}`
+
+/** Effects the rack knows how to draw, in display order. Others still parse; they just get no knob. */
+export const STRUDEL_PARAMS: Record<string, Param> = {
+  lpf: { label: "Cutoff", min: 40, max: 16000, default: 1200, log: true, format: hz },
+  cutoff: { label: "Cutoff", min: 40, max: 16000, default: 1200, log: true, format: hz },
+  lpq: { label: "Reso", min: 0, max: 30, default: 5 },
+  hpf: { label: "Low cut", min: 20, max: 8000, default: 200, log: true, format: hz },
+  attack: { label: "Attack", min: 0, max: 2, default: 0.01 },
+  decay: { label: "Decay", min: 0, max: 2, default: 0.2 },
+  sustain: { label: "Sustain", min: 0, max: 1, default: 0.6, format: pct },
+  release: { label: "Release", min: 0, max: 4, default: 0.3 },
+  vib: { label: "Vibrato", min: 0, max: 16, default: 4 },
+  vibmod: { label: "Vib depth", min: 0, max: 2, default: 0.2 },
+  shape: { label: "Shape", min: 0, max: 1, default: 0.3, format: pct },
+  distort: { label: "Drive", min: 0, max: 5, default: 0.5 },
+  crush: { label: "Crush", min: 1, max: 16, default: 4 },
+  coarse: { label: "Coarse", min: 1, max: 32, default: 4 },
+  speed: { label: "Speed", min: -2, max: 4, default: 1 },
+  pan: { label: "Pan", min: 0, max: 1, default: 0.5, format: (v) => (Math.abs(v - 0.5) < 0.02 ? "C" : v < 0.5 ? `L${Math.round((0.5 - v) * 200)}` : `R${Math.round((v - 0.5) * 200)}`) },
+  room: { label: "Reverb", min: 0, max: 1, default: 0.4, format: pct },
+  size: { label: "Size", min: 0, max: 8, default: 2 },
+  delay: { label: "Delay", min: 0, max: 1, default: 0.3, format: pct },
+  delaytime: { label: "Time", min: 0.01, max: 1, default: 0.25, log: true },
+  delayfeedback: { label: "Feedback", min: 0, max: 0.95, default: 0.5, format: pct },
+}
+
+const SYNTHS = ["sine", "triangle", "square", "sawtooth", "supersaw", "pulse", "white", "pink", "brown"]
+const NOTES = ["C", "C#", "Db", "D", "D#", "Eb", "E", "F", "F#", "Gb", "G", "G#", "Ab", "A", "A#", "Bb", "B"]
+const MODES = ["major", "minor", "dorian", "phrygian", "lydian", "mixolydian", "aeolian", "locrian", "major pentatonic", "minor pentatonic", "chromatic", "whole tone", "harmonic minor", "melodic minor", "blues"]
+
+type Mini = Extract<StrudelArg, { kind: "mini" }>
+
+const firstNumber = (call: StrudelCall | null) => (call?.args[0]?.kind === "number" ? call.args[0].value : null)
+const staticMini = (call: StrudelCall | null): Mini | null => {
+  const a = call?.args[0]
+  return a?.kind === "mini" && a.mini ? a : null
+}
+
+/** A name for a track: its label, the sounds of a drum row, or its role and synth. */
+export function trackName(track: StrudelTrack): string {
+  if (track.label) return track.label
+  const head = "args" in track.chain.head ? track.chain.head : null
+  if (track.kind === "drums") {
+    const mini = staticMini(findCall(track.chain, "s") ?? findCall(track.chain, "sound"))
+    const names = mini ? [...new Set(miniAtoms(mini.mini!, { ops: false }).filter((a) => !a.rest).map((a) => a.value.split(":")[0]!))] : []
+    return names.length ? names.slice(0, 4).join(" · ") : "Drums"
+  }
+  const scale = staticMini(findCall(track.chain, "scale"))
+  const octave = Number(/(\d)/.exec(scale?.source ?? "")?.[1] ?? NaN)
+  const chords = staticMini(head)?.source.includes(",")
+  const role = chords ? "Chords" : octave <= 2 ? "Bass" : octave >= 4 ? "Lead" : head?.name === "note" || head?.name === "n" ? "Keys" : "Synth"
+  return track.sound ? `${role} · ${track.sound}` : role
+}
+
+function Device({
+  song,
+  track,
+  mix,
+  onMix,
+  onChange,
+}: {
+  song: StrudelSong
+  track: StrudelTrack
+  mix: StrudelMix
+  onMix: (kind: "mute" | "solo") => void
+  onChange: (code: string) => void
+}) {
+  const { code } = song
+  const chain = track.chain
+  const head = "args" in chain.head ? chain.head : null
+  const pattern = staticMini(head) ?? (chain.head.name === "" && "literal" in chain.head && chain.head.literal?.kind === "mini" ? chain.head.literal : null)
+  const soundCall = findCall(chain, "s") ?? findCall(chain, "sound")
+  const sound = staticMini(soundCall)
+  const soundAtoms = sound ? miniAtoms(sound.mini!, { ops: false }) : []
+  const synth = soundAtoms.length === 1 && SYNTHS.includes(soundAtoms[0]!.value) ? soundAtoms[0]! : null
+  const scale = staticMini(findCall(chain, "scale"))
+  const scaleMatch = scale ? /^([A-Ga-g][#b]?)(\d*):(.+)$/.exec(scale.source) : null
+  const gainCall = findCall(chain, "gain")
+  const gain = firstNumber(gainCall)
+  const present = Object.keys(STRUDEL_PARAMS).filter((p) => findCall(chain, p))
+  const missing = Object.keys(STRUDEL_PARAMS).filter((p) => !present.includes(p) && p !== "cutoff")
+  const audible = isAudible(track, mix)
+  const name = trackName(track)
+  const Icon = track.kind === "drums" ? Drum : track.kind === "melodic" ? KeyboardMusic : AudioWaveform
+
+  const set = (method: string, value: number) => onChange(setMethod(code, chain, method, formatNumber(value)))
+  const setAtom = (mini: Mini) => (atom: MiniAtom, text: string) => onChange(setMiniAtom(code, mini, atom, text))
+
+  return (
+    <section className="strudel-device" data-kind={track.kind} data-audible={audible} aria-label={name}>
+      <header className="strudel-device__head">
+        <Icon size={15} aria-hidden="true" />
+        <span className="strudel-device__name" title={code.slice(track.start, track.end)}>
+          {name}
+        </span>
+        <button type="button" className="strudel-device__toggle" data-kind="mute" aria-pressed={mix.muted?.has(track.index) || track.muted} onClick={() => onMix("mute")} title="Mute">
+          M
+        </button>
+        <button type="button" className="strudel-device__toggle" data-kind="solo" aria-pressed={!!mix.solo?.has(track.index)} onClick={() => onMix("solo")} title="Solo">
+          S
+        </button>
+      </header>
+      <div className="strudel-device__body">
+        <Fader
+          label="Gain"
+          value={gain ?? 1}
+          min={0}
+          max={1.5}
+          defaultValue={1}
+          disabled={!!gainCall && gain === null}
+          {...(gainCall && gain === null ? { display: "∿", title: "Modulated by a pattern" } : {})}
+          format={pct}
+          onChange={(v) => set("gain", v)}
+        />
+        <div className="strudel-device__main">
+          {(synth || scaleMatch) && (
+            <div className="strudel-device__selects">
+              {synth && (
+                <label>
+                  <span>Sound</span>
+                  <select value={synth.value} onChange={(e) => onChange(setMiniAtom(code, sound!, synth, e.target.value))}>
+                    {SYNTHS.map((s) => (
+                      <option key={s}>{s}</option>
+                    ))}
+                  </select>
+                </label>
+              )}
+              {scaleMatch && (
+                <label>
+                  <span>Key</span>
+                  <select
+                    value={scaleMatch[1]!.toUpperCase().replace(/^([A-G])B$/, "$1b")}
+                    onChange={(e) => onChange(setMiniSource(code, scale!, `${e.target.value}${scaleMatch[2]}:${scaleMatch[3]}`))}
+                  >
+                    {NOTES.map((n) => (
+                      <option key={n}>{n}</option>
+                    ))}
+                  </select>
+                  <select value={scaleMatch[3]} onChange={(e) => onChange(setMiniSource(code, scale!, `${scaleMatch[1]}${scaleMatch[2]}:${e.target.value}`))}>
+                    {(MODES.includes(scaleMatch[3]!) ? MODES : [scaleMatch[3]!, ...MODES]).map((m) => (
+                      <option key={m}>{m}</option>
+                    ))}
+                  </select>
+                </label>
+              )}
+            </div>
+          )}
+          {pattern?.mini && <StepGrid mini={pattern.mini} onAtomChange={setAtom(pattern)} label={`${name} steps`} />}
+          {!pattern && sound?.mini && !synth && <StepGrid mini={sound.mini} onAtomChange={setAtom(sound)} label={`${name} sounds`} />}
+          {pattern?.error && <p className="strudel-device__error">{pattern.error.message}</p>}
+          <div className="strudel-device__knobs">
+            {present.map((p) => {
+              const call = findCall(chain, p)!
+              const value = firstNumber(call)
+              const spec = STRUDEL_PARAMS[p]!
+              return (
+                <div key={p} className="strudel-device__knob">
+                  <Knob
+                    label={spec.label}
+                    value={value ?? spec.default}
+                    min={spec.min}
+                    max={spec.max}
+                    {...(spec.log ? { log: true } : {})}
+                    defaultValue={spec.default}
+                    format={spec.format ?? defaultFormat}
+                    disabled={value === null}
+                    {...(value === null ? { display: "∿", title: `${p} is modulated: ${code.slice(call.argsRange.start, call.argsRange.end)}` } : {})}
+                    onChange={(v) => set(p, v)}
+                  />
+                  <button type="button" className="strudel-device__remove" aria-label={`Remove ${spec.label}`} onClick={() => onChange(removeMethod(code, chain, p))}>
+                    <X size={10} />
+                  </button>
+                </div>
+              )
+            })}
+            {missing.length > 0 && (
+              <label className="strudel-device__add" title="Add an effect">
+                <Plus size={14} aria-hidden="true" />
+                <select
+                  aria-label={`Add an effect to ${name}`}
+                  value=""
+                  onChange={(e) => e.target.value && set(e.target.value, STRUDEL_PARAMS[e.target.value]!.default)}
+                >
+                  <option value="">Add…</option>
+                  {missing.map((p) => (
+                    <option key={p} value={p}>
+                      {STRUDEL_PARAMS[p]!.label} ({p})
+                    </option>
+                  ))}
+                </select>
+              </label>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Equipment generated from Strudel code. Controlled: `code` in, edited code out through `onChange`. */
+export function StrudelRack({ code, onChange, onPlayableChange, className }: StrudelRackProps) {
+  const parsed = useMemo((): { song: StrudelSong } | { error: string } => {
+    try {
+      return { song: parseStrudel(code) }
+    } catch (err) {
+      return { error: err instanceof StrudelSyntaxError ? `Syntax error: ${err.message}` : String(err) }
+    }
+  }, [code])
+  const [muted, setMuted] = useState<ReadonlySet<number>>(() => new Set())
+  const [solo, setSolo] = useState<ReadonlySet<number>>(() => new Set())
+  const song = "song" in parsed ? parsed.song : null
+  const mix = useMemo(() => ({ muted, solo }), [muted, solo])
+
+  useEffect(() => {
+    if (song) onPlayableChange?.(mixCode(song, mix))
+  }, [song, mix])
+
+  if (!song) {
+    return (
+      <div className={`strudel-rack ${className ?? ""}`.trim()}>
+        <p className="strudel-rack__error" role="alert">
+          {"error" in parsed ? parsed.error : ""}
+        </p>
+      </div>
+    )
+  }
+
+  const toggle = (set: ReadonlySet<number>, i: number) => {
+    const next = new Set(set)
+    if (!next.delete(i)) next.add(i)
+    return next
+  }
+  const cps = song.tempo?.cps
+  const master = song.masterChain
+  const postgain = master ? firstNumber(findCall(master, "postgain")) : null
+
+  return (
+    <div className={`strudel-rack ${className ?? ""}`.trim()}>
+      <div className="strudel-rack__master" role="group" aria-label="Master">
+        <span className="strudel-rack__title">Master</span>
+        <Knob
+          label="Tempo"
+          value={cps && Number.isFinite(cps) ? cps : 0.5}
+          min={0.1}
+          max={2}
+          defaultValue={0.5}
+          format={(v) => `${Math.round(v * 240)} bpm`}
+          onChange={(v) => onChange(setTempo(song, v))}
+        />
+        {master && (
+          <Knob
+            label="Output"
+            value={postgain ?? 1}
+            min={0}
+            max={2}
+            defaultValue={1}
+            format={pct}
+            onChange={(v) => onChange(setMethod(code, master, "postgain", formatNumber(v)))}
+          />
+        )}
+        <span className="strudel-rack__summary">
+          {song.tracks.length} track{song.tracks.length === 1 ? "" : "s"}
+          {song.layout === "stack" ? " · stack" : song.layout === "labels" ? " · $:" : ""}
+        </span>
+      </div>
+      {song.tracks.length === 0 && <p className="strudel-rack__error">No pattern found.</p>}
+      {song.tracks.map((t) => (
+        <Device
+          key={t.index}
+          song={song}
+          track={t}
+          mix={mix}
+          onChange={onChange}
+          onMix={(kind) => (kind === "mute" ? setMuted(toggle(muted, t.index)) : setSolo(toggle(solo, t.index)))}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default StrudelRack