diff --git a/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/chain-ui.js b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/chain-ui.js
new file mode 100644
index 0000000..ba3d779
--- /dev/null
+++ b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/chain-ui.js
@@ -0,0 +1,1002 @@
+/**
+ * ShapeSeq Chain Builder UI — vertical stack of primitive cards
+ *
+ * Pedalboard-style chain editor: expandable cards with param sliders,
+ * drag-to-reorder, delete, add-primitive palette, generator combine toggle.
+ * Mobile-first, dark glass theme matching the immersive playground.
+ *
+ * All styles are inline (no external CSS dependency).
+ *
+ * @module shapeseq/chain-ui
+ */
+
+import { PRIMITIVE_REGISTRY } from './primitives.js';
+
+// ── Category colors ──────────────────────────────────────────────────
+
+const CATEGORY_COLORS = {
+  generator: '#ff6a00',
+  processor: '#00ccff',
+  timing:    '#ffcc00',
+  converter: '#88ff00',
+};
+
+// ── Inject styles once ───────────────────────────────────────────────
+
+let stylesInjected = false;
+
+function injectStyles() {
+  if (stylesInjected) return;
+  stylesInjected = true;
+
+  const css = `
+/* ── Chain Builder container ─────────────────────────────────── */
+
+.chain-builder {
+  --cb-glass-bg: rgba(13, 13, 13, 0.72);
+  --cb-glass-border: rgba(255, 255, 255, 0.08);
+  --cb-glass-blur: 16px;
+  --cb-text: #e0e0e0;
+  --cb-text-dim: #888;
+  --cb-radius: 12px;
+  --cb-radius-sm: 8px;
+  --cb-accent: #ff6a00;
+
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 13px;
+  color: var(--cb-text);
+}
+
+/* ── Primitive card ──────────────────────────────────────────── */
+
+.chain-card {
+  position: relative;
+  background: var(--cb-glass-bg);
+  backdrop-filter: blur(var(--cb-glass-blur));
+  -webkit-backdrop-filter: blur(var(--cb-glass-blur));
+  border: 1px solid var(--cb-glass-border);
+  border-radius: var(--cb-radius);
+  overflow: hidden;
+  transition: box-shadow 0.2s, transform 0.15s;
+}
+
+.chain-card.dragging {
+  opacity: 0.7;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  transform: scale(1.03);
+  z-index: 100;
+}
+
+.chain-card-left-border {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-radius: var(--cb-radius) 0 0 var(--cb-radius);
+}
+
+/* ── Card header ─────────────────────────────────────────────── */
+
+.chain-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 10px 10px 14px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.chain-card-drag {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  cursor: grab;
+  touch-action: none;
+  padding: 4px 2px;
+  opacity: 0.4;
+  transition: opacity 0.15s;
+}
+
+.chain-card-drag:hover,
+.chain-card-drag:active {
+  opacity: 0.8;
+}
+
+.chain-card-drag span {
+  display: block;
+  width: 14px;
+  height: 2px;
+  background: var(--cb-text);
+  border-radius: 1px;
+}
+
+.chain-card-name {
+  flex: 1;
+  font-weight: 600;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chain-card-badge {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--cb-text-dim);
+  white-space: nowrap;
+}
+
+.chain-card-summary {
+  font-size: 11px;
+  color: var(--cb-text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 140px;
+}
+
+.chain-card-delete {
+  background: none;
+  border: none;
+  color: var(--cb-text-dim);
+  font-size: 16px;
+  padding: 4px 6px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+  line-height: 1;
+}
+
+.chain-card-delete:hover,
+.chain-card-delete:active {
+  color: #ff4466;
+  background: rgba(255, 68, 102, 0.12);
+}
+
+.chain-card-expand-icon {
+  font-size: 10px;
+  color: var(--cb-text-dim);
+  transition: transform 0.2s;
+}
+
+.chain-card.expanded .chain-card-expand-icon {
+  transform: rotate(90deg);
+}
+
+/* ── Card body (params) ──────────────────────────────────────── */
+
+.chain-card-body {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.25s ease;
+}
+
+.chain-card.expanded .chain-card-body {
+  max-height: 600px;
+}
+
+.chain-card-params {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 14px 12px 14px;
+}
+
+/* ── Param slider row ────────────────────────────────────────── */
+
+.chain-param-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chain-param-label {
+  font-size: 11px;
+  color: var(--cb-text-dim);
+  min-width: 80px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chain-param-slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.08);
+  outline: none;
+  cursor: pointer;
+}
+
+.chain-param-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--cb-text);
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+
+.chain-param-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--cb-text);
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+
+.chain-param-value {
+  font-size: 11px;
+  color: var(--cb-text-dim);
+  min-width: 32px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── NISPS live indicator ────────────────────────────────────── */
+
+.chain-param-row.nisps-live .chain-param-slider {
+  box-shadow: 0 0 0 2px rgba(0, 140, 255, 0.5);
+  animation: nisps-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes nisps-pulse {
+  0%, 100% { box-shadow: 0 0 0 2px rgba(0, 140, 255, 0.3); }
+  50% { box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.7); }
+}
+
+/* ── Add button ──────────────────────────────────────────────── */
+
+.chain-add-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px;
+  border: 2px dashed rgba(255, 255, 255, 0.12);
+  border-radius: var(--cb-radius);
+  background: transparent;
+  color: var(--cb-text-dim);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.chain-add-btn:hover,
+.chain-add-btn:active {
+  border-color: var(--cb-accent);
+  color: var(--cb-accent);
+}
+
+/* ── Generator combine mode toggle ───────────────────────────── */
+
+.chain-combine-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 0 4px;
+}
+
+.chain-combine-label {
+  font-size: 11px;
+  color: var(--cb-text-dim);
+}
+
+.chain-combine-btn {
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--cb-text);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  min-width: 60px;
+  text-align: center;
+}
+
+.chain-combine-btn:hover,
+.chain-combine-btn:active {
+  border-color: var(--cb-accent);
+  background: rgba(255, 106, 0, 0.1);
+}
+
+/* ── Palette modal ───────────────────────────────────────────── */
+
+.chain-palette-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  animation: palette-fade-in 0.15s ease;
+}
+
+@keyframes palette-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.chain-palette {
+  width: 100%;
+  max-width: 420px;
+  max-height: 80vh;
+  overflow-y: auto;
+  background: rgba(20, 20, 20, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px 16px 0 0;
+  padding: 16px 12px 24px;
+  animation: palette-slide-up 0.2s ease;
+}
+
+@keyframes palette-slide-up {
+  from { transform: translateY(40px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.chain-palette-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--cb-text, #e0e0e0);
+  text-align: center;
+  margin-bottom: 12px;
+}
+
+.chain-palette-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.12s;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+  color: #e0e0e0;
+}
+
+.chain-palette-item:hover,
+.chain-palette-item:active {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.chain-palette-item-color {
+  width: 4px;
+  height: 36px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.chain-palette-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.chain-palette-item-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.chain-palette-item-meta {
+  font-size: 11px;
+  color: #888;
+  margin-top: 2px;
+}
+
+/* ── Drop indicator ──────────────────────────────────────────── */
+
+.chain-drop-indicator {
+  height: 3px;
+  background: var(--cb-accent, #ff6a00);
+  border-radius: 2px;
+  margin: -2px 8px;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.chain-drop-indicator.active {
+  opacity: 1;
+}
+`;
+
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+// ── ChainBuilderUI ───────────────────────────────────────────────────
+
+export class ChainBuilderUI {
+  /**
+   * @param {{ container: HTMLElement, chain: import('./chain.js').Chain, eventBus: { emit: Function, on: Function } }} opts
+   */
+  constructor({ container, chain, eventBus }) {
+    injectStyles();
+
+    /** @type {HTMLElement} */
+    this._container = container;
+    /** @type {import('./chain.js').Chain} */
+    this._chain = chain;
+    /** @type {{ emit: Function, on: Function }} */
+    this._bus = eventBus;
+
+    /** @private @type {Set<number>} flat param indices controlled by NISPS */
+    this._liveParams = new Set();
+
+    /** @private @type {Function|null} */
+    this._paramChangeCb = null;
+
+    /** @private @type {Set<number>} indices of expanded cards */
+    this._expandedCards = new Set();
+
+    /** @private @type {Float32Array|null} current param values for display */
+    this._currentParams = null;
+
+    // ── Drag state ──
+    /** @private */
+    this._dragIndex = -1;
+    /** @private */
+    this._dragEl = null;
+    /** @private */
+    this._dragStartY = 0;
+    /** @private */
+    this._dragOffsetY = 0;
+    /** @private @type {HTMLElement|null} */
+    this._cardList = null;
+
+    // ── Palette overlay ref ──
+    /** @private @type {HTMLElement|null} */
+    this._paletteOverlay = null;
+
+    // ── Bound handlers for cleanup ──
+    this._onPointerMove = this._handlePointerMove.bind(this);
+    this._onPointerUp = this._handlePointerUp.bind(this);
+
+    this.render();
+  }
+
+  // ── Public API ─────────────────────────────────────────────────────
+
+  /**
+   * Rebuild the entire UI from current chain state.
+   */
+  render() {
+    this._container.innerHTML = '';
+    this._container.classList.add('chain-builder');
+
+    const primitives = this._chain.getPrimitives();
+
+    // Card list wrapper
+    const cardList = document.createElement('div');
+    cardList.style.display = 'flex';
+    cardList.style.flexDirection = 'column';
+    cardList.style.gap = '6px';
+    this._cardList = cardList;
+
+    // Compute flat param offset for each primitive
+    let flatOffset = 0;
+    for (let i = 0; i < primitives.length; i++) {
+      const prim = primitives[i];
+      const card = this._createCard(prim, i, flatOffset);
+      cardList.appendChild(card);
+      flatOffset += prim.paramCount;
+    }
+
+    this._container.appendChild(cardList);
+
+    // Add button
+    const addBtn = document.createElement('button');
+    addBtn.className = 'chain-add-btn';
+    addBtn.innerHTML = '<span style="font-size:18px;line-height:1">+</span> Add Primitive';
+    addBtn.addEventListener('click', () => this._openPalette());
+    this._container.appendChild(addBtn);
+
+    // Generator combine mode toggle
+    const toggle = this._createCombineToggle();
+    this._container.appendChild(toggle);
+  }
+
+  /**
+   * Update which flat param indices are NISPS-controlled (pulsing indicator).
+   * @param {Array<number>} paramIndices
+   */
+  setLiveParams(paramIndices) {
+    this._liveParams = new Set(paramIndices);
+    // Update existing rows without full re-render
+    const rows = this._container.querySelectorAll('.chain-param-row');
+    rows.forEach((row) => {
+      const idx = parseInt(row.dataset.flatIndex, 10);
+      if (isNaN(idx)) return;
+      if (this._liveParams.has(idx)) {
+        row.classList.add('nisps-live');
+      } else {
+        row.classList.remove('nisps-live');
+      }
+    });
+  }
+
+  /**
+   * Register a callback for manual slider changes.
+   * @param {(flatParamIndex: number, value: number) => void} callback
+   */
+  onParamChange(callback) {
+    this._paramChangeCb = callback;
+  }
+
+  /**
+   * Update displayed param values without re-rendering.
+   * @param {Float32Array|Array<number>} params - flat param array
+   */
+  updateParamValues(params) {
+    this._currentParams = params;
+    const sliders = this._container.querySelectorAll('.chain-param-slider');
+    sliders.forEach((slider) => {
+      const idx = parseInt(slider.dataset.flatIndex, 10);
+      if (!isNaN(idx) && idx < params.length) {
+        slider.value = params[idx];
+        // Update adjacent value display
+        const valEl = slider.parentElement && slider.parentElement.querySelector('.chain-param-value');
+        if (valEl) {
+          valEl.textContent = params[idx].toFixed(2);
+        }
+      }
+    });
+  }
+
+  /**
+   * Cleanup all DOM and listeners.
+   */
+  destroy() {
+    this._closePalette();
+    document.removeEventListener('pointermove', this._onPointerMove);
+    document.removeEventListener('pointerup', this._onPointerUp);
+    this._container.innerHTML = '';
+    this._container.classList.remove('chain-builder');
+    this._paramChangeCb = null;
+  }
+
+  // ── Card creation ──────────────────────────────────────────────────
+
+  /**
+   * @private
+   * @param {import('./primitive.js').Primitive} prim
+   * @param {number} chainIndex
+   * @param {number} flatOffset - flat param offset for this primitive
+   * @returns {HTMLElement}
+   */
+  _createCard(prim, chainIndex, flatOffset) {
+    const card = document.createElement('div');
+    card.className = 'chain-card';
+    card.dataset.chainIndex = chainIndex;
+    if (this._expandedCards.has(chainIndex)) {
+      card.classList.add('expanded');
+    }
+
+    const catColor = CATEGORY_COLORS[prim.category] || '#888';
+
+    // Left color border
+    const leftBorder = document.createElement('div');
+    leftBorder.className = 'chain-card-left-border';
+    leftBorder.style.background = catColor;
+    card.appendChild(leftBorder);
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'chain-card-header';
+
+    // Drag handle
+    const drag = document.createElement('div');
+    drag.className = 'chain-card-drag';
+    drag.innerHTML = '<span></span><span></span><span></span>';
+    drag.addEventListener('pointerdown', (e) => this._handleDragStart(e, chainIndex, card));
+    header.appendChild(drag);
+
+    // Name
+    const name = document.createElement('span');
+    name.className = 'chain-card-name';
+    name.textContent = prim.name;
+    header.appendChild(name);
+
+    // Category badge
+    const badge = document.createElement('span');
+    badge.className = 'chain-card-badge';
+    badge.textContent = prim.category;
+    badge.style.color = catColor;
+    header.appendChild(badge);
+
+    // Summary (collapsed key params)
+    const summary = document.createElement('span');
+    summary.className = 'chain-card-summary';
+    summary.textContent = this._buildSummary(prim, flatOffset);
+    header.appendChild(summary);
+
+    // Expand chevron
+    const chevron = document.createElement('span');
+    chevron.className = 'chain-card-expand-icon';
+    chevron.textContent = '\u25B6'; // right-pointing triangle
+    header.appendChild(chevron);
+
+    // Delete button
+    const del = document.createElement('button');
+    del.className = 'chain-card-delete';
+    del.textContent = '\u00D7'; // multiplication sign as X
+    del.title = 'Remove';
+    del.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this._removePrimitive(chainIndex);
+    });
+    header.appendChild(del);
+
+    // Toggle expand on header click (but not on drag handle or delete)
+    header.addEventListener('click', (e) => {
+      if (e.target.closest('.chain-card-drag') || e.target.closest('.chain-card-delete')) return;
+      this._toggleExpand(chainIndex, card);
+    });
+
+    card.appendChild(header);
+
+    // Body (params)
+    const body = document.createElement('div');
+    body.className = 'chain-card-body';
+
+    const paramsDiv = document.createElement('div');
+    paramsDiv.className = 'chain-card-params';
+
+    for (let pi = 0; pi < prim.paramSchema.length; pi++) {
+      const schema = prim.paramSchema[pi];
+      const flatIdx = flatOffset + pi;
+      const row = this._createParamRow(schema, flatIdx, prim);
+      paramsDiv.appendChild(row);
+    }
+
+    body.appendChild(paramsDiv);
+    card.appendChild(body);
+
+    return card;
+  }
+
+  /**
+   * @private
+   */
+  _buildSummary(prim, flatOffset) {
+    const schema = prim.paramSchema;
+    const maxShow = Math.min(3, schema.length);
+    const parts = [];
+    for (let i = 0; i < maxShow; i++) {
+      const val = this._currentParams
+        ? this._currentParams[flatOffset + i]
+        : schema[i].default;
+      parts.push(schema[i].name + ':' + (val !== undefined ? val.toFixed(2) : schema[i].default.toFixed(2)));
+    }
+    return parts.join('  ');
+  }
+
+  /**
+   * @private
+   */
+  _createParamRow(schema, flatIdx, prim) {
+    const row = document.createElement('div');
+    row.className = 'chain-param-row';
+    row.dataset.flatIndex = flatIdx;
+    if (this._liveParams.has(flatIdx)) {
+      row.classList.add('nisps-live');
+    }
+
+    const label = document.createElement('span');
+    label.className = 'chain-param-label';
+    label.textContent = schema.name;
+    row.appendChild(label);
+
+    const slider = document.createElement('input');
+    slider.type = 'range';
+    slider.className = 'chain-param-slider';
+    slider.min = '0';
+    slider.max = '1';
+    slider.step = '0.001';
+    slider.dataset.flatIndex = flatIdx;
+
+    const currentVal = this._currentParams
+      ? this._currentParams[flatIdx]
+      : schema.default;
+    slider.value = currentVal !== undefined ? currentVal : schema.default;
+
+    const valDisplay = document.createElement('span');
+    valDisplay.className = 'chain-param-value';
+    valDisplay.textContent = parseFloat(slider.value).toFixed(2);
+
+    slider.addEventListener('input', () => {
+      const v = parseFloat(slider.value);
+      valDisplay.textContent = v.toFixed(2);
+      if (this._paramChangeCb) {
+        this._paramChangeCb(flatIdx, v);
+      }
+    });
+
+    row.appendChild(slider);
+    row.appendChild(valDisplay);
+
+    return row;
+  }
+
+  // ── Expand / collapse ──────────────────────────────────────────────
+
+  /**
+   * @private
+   */
+  _toggleExpand(chainIndex, cardEl) {
+    if (this._expandedCards.has(chainIndex)) {
+      this._expandedCards.delete(chainIndex);
+      cardEl.classList.remove('expanded');
+    } else {
+      this._expandedCards.add(chainIndex);
+      cardEl.classList.add('expanded');
+    }
+  }
+
+  // ── Add / remove primitives ────────────────────────────────────────
+
+  /**
+   * @private
+   */
+  _removePrimitive(chainIndex) {
+    this._chain.removePrimitive(chainIndex);
+    // Adjust expanded set
+    const newExpanded = new Set();
+    for (const idx of this._expandedCards) {
+      if (idx < chainIndex) newExpanded.add(idx);
+      else if (idx > chainIndex) newExpanded.add(idx - 1);
+      // idx === chainIndex is removed
+    }
+    this._expandedCards = newExpanded;
+    this.render();
+    this._bus.emit('ui.chainEdit', { action: 'remove', index: chainIndex });
+  }
+
+  /**
+   * @private
+   */
+  _addPrimitive(registryKey) {
+    const Ctor = PRIMITIVE_REGISTRY[registryKey];
+    if (!Ctor) return;
+    const instance = new Ctor();
+    this._chain.addPrimitive(instance);
+    this.render();
+    this._bus.emit('ui.chainEdit', { action: 'add', name: registryKey });
+  }
+
+  // ── Palette ────────────────────────────────────────────────────────
+
+  /**
+   * @private
+   */
+  _openPalette() {
+    if (this._paletteOverlay) return;
+
+    const overlay = document.createElement('div');
+    overlay.className = 'chain-palette-overlay';
+
+    const palette = document.createElement('div');
+    palette.className = 'chain-palette';
+
+    const title = document.createElement('div');
+    title.className = 'chain-palette-title';
+    title.textContent = 'Add Primitive';
+    palette.appendChild(title);
+
+    const keys = Object.keys(PRIMITIVE_REGISTRY);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const CtorRef = PRIMITIVE_REGISTRY[key];
+      // Instantiate temporarily to read metadata
+      const temp = new CtorRef();
+
+      const item = document.createElement('button');
+      item.className = 'chain-palette-item';
+
+      const colorBar = document.createElement('div');
+      colorBar.className = 'chain-palette-item-color';
+      colorBar.style.background = CATEGORY_COLORS[temp.category] || '#888';
+      item.appendChild(colorBar);
+
+      const info = document.createElement('div');
+      info.className = 'chain-palette-item-info';
+
+      const nameEl = document.createElement('div');
+      nameEl.className = 'chain-palette-item-name';
+      nameEl.textContent = temp.name;
+      info.appendChild(nameEl);
+
+      const meta = document.createElement('div');
+      meta.className = 'chain-palette-item-meta';
+      meta.textContent = temp.category + '  \u00B7  ' + temp.paramCount + ' params';
+      info.appendChild(meta);
+
+      item.appendChild(info);
+
+      item.addEventListener('click', () => {
+        this._closePalette();
+        this._addPrimitive(key);
+      });
+
+      palette.appendChild(item);
+    }
+
+    overlay.appendChild(palette);
+
+    // Close on overlay click (outside palette)
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) {
+        this._closePalette();
+      }
+    });
+
+    document.body.appendChild(overlay);
+    this._paletteOverlay = overlay;
+  }
+
+  /**
+   * @private
+   */
+  _closePalette() {
+    if (this._paletteOverlay) {
+      this._paletteOverlay.remove();
+      this._paletteOverlay = null;
+    }
+  }
+
+  // ── Generator combine mode toggle ──────────────────────────────────
+
+  /**
+   * @private
+   */
+  _createCombineToggle() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'chain-combine-toggle';
+
+    const label = document.createElement('span');
+    label.className = 'chain-combine-label';
+    label.textContent = 'Gen combine:';
+    wrapper.appendChild(label);
+
+    const btn = document.createElement('button');
+    btn.className = 'chain-combine-btn';
+    btn.textContent = this._chain.generatorCombineMode === 'additive' ? 'Add' : 'Mul';
+
+    btn.addEventListener('click', () => {
+      if (this._chain.generatorCombineMode === 'additive') {
+        this._chain.generatorCombineMode = 'multiplicative';
+        btn.textContent = 'Mul';
+      } else {
+        this._chain.generatorCombineMode = 'additive';
+        btn.textContent = 'Add';
+      }
+      this._bus.emit('ui.chainEdit', { action: 'combineMode', mode: this._chain.generatorCombineMode });
+    });
+
+    wrapper.appendChild(btn);
+    return wrapper;
+  }
+
+  // ── Drag-to-reorder (pointer events) ───────────────────────────────
+
+  /**
+   * @private
+   */
+  _handleDragStart(e, chainIndex, cardEl) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this._dragIndex = chainIndex;
+    this._dragEl = cardEl;
+    this._dragStartY = e.clientY;
+    this._dragOffsetY = 0;
+
+    cardEl.classList.add('dragging');
+    cardEl.setPointerCapture(e.pointerId);
+
+    document.addEventListener('pointermove', this._onPointerMove);
+    document.addEventListener('pointerup', this._onPointerUp);
+  }
+
+  /**
+   * @private
+   */
+  _handlePointerMove(e) {
+    if (this._dragIndex < 0 || !this._dragEl || !this._cardList) return;
+
+    const dy = e.clientY - this._dragStartY;
+    this._dragOffsetY = dy;
+    this._dragEl.style.transform = 'translateY(' + dy + 'px) scale(1.03)';
+
+    // Determine drop target by checking which card we're over
+    const cards = this._cardList.querySelectorAll('.chain-card');
+    const dragRect = this._dragEl.getBoundingClientRect();
+    const dragCenter = dragRect.top + dragRect.height / 2;
+
+    let targetIndex = this._dragIndex;
+    for (let i = 0; i < cards.length; i++) {
+      if (i === this._dragIndex) continue;
+      const rect = cards[i].getBoundingClientRect();
+      const center = rect.top + rect.height / 2;
+      if (this._dragIndex < i && dragCenter > center) {
+        targetIndex = i;
+      } else if (this._dragIndex > i && dragCenter < center) {
+        targetIndex = i;
+      }
+    }
+
+    this._dragTargetIndex = targetIndex;
+  }
+
+  /**
+   * @private
+   */
+  _handlePointerUp(e) {
+    document.removeEventListener('pointermove', this._onPointerMove);
+    document.removeEventListener('pointerup', this._onPointerUp);
+
+    if (this._dragEl) {
+      this._dragEl.classList.remove('dragging');
+      this._dragEl.style.transform = '';
+    }
+
+    const from = this._dragIndex;
+    const to = this._dragTargetIndex !== undefined ? this._dragTargetIndex : from;
+
+    this._dragIndex = -1;
+    this._dragEl = null;
+    this._dragTargetIndex = undefined;
+
+    if (from !== to && from >= 0) {
+      // Adjust expanded set for the move
+      const newExpanded = new Set();
+      for (const idx of this._expandedCards) {
+        if (idx === from) {
+          newExpanded.add(to);
+        } else {
+          let adjusted = idx;
+          if (from < to) {
+            if (idx > from && idx <= to) adjusted = idx - 1;
+          } else {
+            if (idx >= to && idx < from) adjusted = idx + 1;
+          }
+          newExpanded.add(adjusted);
+        }
+      }
+      this._expandedCards = newExpanded;
+
+      this._chain.movePrimitive(from, to);
+      this.render();
+      this._bus.emit('ui.chainEdit', { action: 'reorder', from: from, to: to });
+    }
+  }
+}
diff --git a/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/chain.js b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/chain.js
new file mode 100644
index 0000000..7e0f88d
--- /dev/null
+++ b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/chain.js
@@ -0,0 +1,319 @@
+/**
+ * ShapeSeq Chain — sequential pipeline runner with generator combination modes
+ *
+ * Evaluates an ordered list of primitives as a sequential pipeline:
+ *   1. Generators run first, combined via additive or multiplicative merge
+ *   2. Processors transform the pattern in chain order
+ *   3. Converters run in chain order
+ *   4. Timing modifiers annotate last
+ *
+ * Params are distributed flat across primitives in chain order.
+ * Each primitive gets a deterministic PRNG stream via fork(masterPRNG, index).
+ *
+ * Port-ready: explicit state, typed arrays, no closures in hot path.
+ *
+ * @module shapeseq/chain
+ */
+
+import { createPattern, mergePatterns } from './pattern.js';
+import { createPRNG, fork } from './prng.js';
+
+// ── Category execution order ────────────────────────────────────────
+
+const PHASE_ORDER = ['generator', 'processor', 'converter', 'timing'];
+
+// ── Chain class ─────────────────────────────────────────────────────
+
+export class Chain {
+  constructor() {
+    /** @private @type {Array<import('./primitive.js').Primitive>} */
+    this._primitives = [];
+
+    /** @type {'additive'|'multiplicative'} */
+    this.generatorCombineMode = 'additive';
+
+    /** @private @type {number} */
+    this._masterSeed = 0;
+
+    /**
+     * Per-primitive state objects, indexed by position in chain.
+     * Populated after evaluate() calls; used for freeze support.
+     * @private @type {Array<Object>}
+     */
+    this._primitiveStates = [];
+  }
+
+  // ── Primitive management ────────────────────────────────────────
+
+  /**
+   * Append a primitive to the end of the chain.
+   * @param {import('./primitive.js').Primitive} primitive
+   */
+  addPrimitive(primitive) {
+    this._primitives.push(primitive);
+    this._primitiveStates.push(primitive.getState());
+  }
+
+  /**
+   * Remove the primitive at the given index.
+   * @param {number} index
+   */
+  removePrimitive(index) {
+    const idx = index | 0;
+    if (idx < 0 || idx >= this._primitives.length) {
+      throw new RangeError('removePrimitive: index ' + index + ' out of range [0, ' + (this._primitives.length - 1) + ']');
+    }
+    this._primitives.splice(idx, 1);
+    this._primitiveStates.splice(idx, 1);
+  }
+
+  /**
+   * Insert a primitive at the given index, shifting others right.
+   * @param {number} index
+   * @param {import('./primitive.js').Primitive} primitive
+   */
+  insertPrimitive(index, primitive) {
+    const idx = index | 0;
+    if (idx < 0 || idx > this._primitives.length) {
+      throw new RangeError('insertPrimitive: index ' + index + ' out of range [0, ' + this._primitives.length + ']');
+    }
+    this._primitives.splice(idx, 0, primitive);
+    this._primitiveStates.splice(idx, 0, primitive.getState());
+  }
+
+  /**
+   * Move a primitive from one position to another.
+   * @param {number} fromIndex
+   * @param {number} toIndex
+   */
+  movePrimitive(fromIndex, toIndex) {
+    const from = fromIndex | 0;
+    const to = toIndex | 0;
+    const len = this._primitives.length;
+    if (from < 0 || from >= len) {
+      throw new RangeError('movePrimitive: fromIndex ' + fromIndex + ' out of range [0, ' + (len - 1) + ']');
+    }
+    if (to < 0 || to >= len) {
+      throw new RangeError('movePrimitive: toIndex ' + toIndex + ' out of range [0, ' + (len - 1) + ']');
+    }
+
+    const [prim] = this._primitives.splice(from, 1);
+    const [state] = this._primitiveStates.splice(from, 1);
+    this._primitives.splice(to, 0, prim);
+    this._primitiveStates.splice(to, 0, state);
+  }
+
+  /**
+   * Get the current list of primitives (shallow copy).
+   * @returns {Array<import('./primitive.js').Primitive>}
+   */
+  getPrimitives() {
+    return this._primitives.slice();
+  }
+
+  // ── Configuration ───────────────────────────────────────────────
+
+  /**
+   * Total parameter count across all primitives in the chain.
+   * @returns {number}
+   */
+  get totalParamCount() {
+    let total = 0;
+    for (let i = 0; i < this._primitives.length; i++) {
+      total += this._primitives[i].paramCount;
+    }
+    return total;
+  }
+
+  /**
+   * Get a flat list of all param schemas across all primitives,
+   * annotated with their primitive and param indices.
+   *
+   * @returns {Array<{ primitiveIndex: number, paramIndex: number, schema: Object }>}
+   */
+  getParamSchemas() {
+    const result = [];
+    for (let pi = 0; pi < this._primitives.length; pi++) {
+      const prim = this._primitives[pi];
+      const schema = prim.paramSchema;
+      for (let si = 0; si < schema.length; si++) {
+        result.push({
+          primitiveIndex: pi,
+          paramIndex: si,
+          schema: schema[si],
+        });
+      }
+    }
+    return result;
+  }
+
+  // ── Evaluation ──────────────────────────────────────────────────
+
+  /**
+   * Evaluate the chain, producing a pattern description.
+   *
+   * Pipeline order:
+   *   1. Generators — combined via generatorCombineMode
+   *   2. Processors — sequential transform
+   *   3. Converters — sequential transform
+   *   4. Timing modifiers — annotate last
+   *
+   * @param {Float32Array|Array<number>} params - flat param array distributed across primitives
+   * @param {number} stepCount - number of steps in the output pattern
+   * @param {number} masterSeed - seed for the master PRNG
+   * @returns {{ steps: Array, stepCount: number, metadata: Object }}
+   */
+  evaluate(params, stepCount, masterSeed) {
+    const primitives = this._primitives;
+    const primCount = primitives.length;
+
+    // Create master PRNG from seed
+    const masterPRNG = createPRNG(masterSeed >>> 0);
+
+    // ── Bucket primitives by category, preserving chain order ──
+
+    /** @type {Array<{ index: number, prim: Object }>} */
+    const generators = [];
+    const processors = [];
+    const converters = [];
+    const timingMods = [];
+
+    for (let i = 0; i < primCount; i++) {
+      const entry = { index: i, prim: primitives[i] };
+      switch (primitives[i].category) {
+        case 'generator':  generators.push(entry); break;
+        case 'processor':  processors.push(entry); break;
+        case 'converter':  converters.push(entry); break;
+        case 'timing':     timingMods.push(entry); break;
+      }
+    }
+
+    // ── Compute param offsets per primitive ──
+
+    const paramOffsets = new Array(primCount);
+    let offset = 0;
+    for (let i = 0; i < primCount; i++) {
+      paramOffsets[i] = offset;
+      offset += primitives[i].paramCount;
+    }
+
+    // ── Helper: run a single primitive ──
+
+    const self = this;
+
+    function runPrimitive(entry, inputPattern) {
+      const idx = entry.index;
+      const prim = entry.prim;
+      const pOffset = paramOffsets[idx];
+      const pCount = prim.paramCount;
+
+      // Slice params for this primitive
+      const primParams = new Float32Array(pCount);
+      for (let p = 0; p < pCount; p++) {
+        primParams[p] = pOffset + p < params.length ? +params[pOffset + p] : prim.paramSchema[p].default;
+      }
+
+      // Fork a deterministic PRNG for this primitive
+      const primRNG = fork(masterPRNG, idx);
+
+      // Get current state
+      const state = self._primitiveStates[idx] || prim.getState();
+
+      // Process
+      const result = prim.process(primParams, inputPattern, state, primRNG);
+
+      // Store updated state
+      self._primitiveStates[idx] = result.nextState;
+
+      return result.patternDesc;
+    }
+
+    // ── Phase 1: Generators ──
+
+    let pattern;
+
+    if (generators.length === 0) {
+      // Default pattern: all steps triggered
+      pattern = createPattern(stepCount);
+      for (let i = 0; i < stepCount; i++) {
+        pattern.steps[i].trigger = true;
+      }
+    } else if (generators.length === 1) {
+      // Single generator — no merge needed
+      pattern = runPrimitive(generators[0], createPattern(stepCount));
+    } else {
+      // Multiple generators — run each, then merge
+      let merged = runPrimitive(generators[0], createPattern(stepCount));
+      for (let g = 1; g < generators.length; g++) {
+        const next = runPrimitive(generators[g], createPattern(stepCount));
+        merged = mergePatterns(merged, next, this.generatorCombineMode);
+      }
+      pattern = merged;
+    }
+
+    // ── Phase 2: Processors ──
+
+    for (let i = 0; i < processors.length; i++) {
+      pattern = runPrimitive(processors[i], pattern);
+    }
+
+    // ── Phase 3: Converters ──
+
+    for (let i = 0; i < converters.length; i++) {
+      pattern = runPrimitive(converters[i], pattern);
+    }
+
+    // ── Phase 4: Timing modifiers ──
+
+    for (let i = 0; i < timingMods.length; i++) {
+      pattern = runPrimitive(timingMods[i], pattern);
+    }
+
+    return pattern;
+  }
+
+  // ── State management (for freeze) ──────────────────────────────
+
+  /**
+   * Get serializable state for all primitives in the chain.
+   * @returns {Array<Object>}
+   */
+  getState() {
+    const states = new Array(this._primitives.length);
+    for (let i = 0; i < this._primitives.length; i++) {
+      states[i] = this._primitiveStates[i] || this._primitives[i].getState();
+    }
+    return states;
+  }
+
+  /**
+   * Restore all primitive states from a previously serialized state array.
+   * @param {Array<Object>} states
+   */
+  setState(states) {
+    if (!Array.isArray(states)) {
+      throw new TypeError('setState expects an array of state objects');
+    }
+    const len = Math.min(states.length, this._primitives.length);
+    for (let i = 0; i < len; i++) {
+      this._primitives[i].setState(states[i]);
+      this._primitiveStates[i] = states[i];
+    }
+  }
+
+  /**
+   * Get the master PRNG seed.
+   * @returns {number}
+   */
+  getMasterSeed() {
+    return this._masterSeed;
+  }
+
+  /**
+   * Set the master PRNG seed.
+   * @param {number} seed - 32-bit integer seed
+   */
+  setMasterSeed(seed) {
+    this._masterSeed = seed >>> 0;
+  }
+}
diff --git a/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/primitive.js b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/primitive.js
new file mode 100644
index 0000000..ebec5b6
--- /dev/null
+++ b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/primitive.js
@@ -0,0 +1,246 @@
+/**
+ * ShapeSeq Primitive Base Class and Param Schema System
+ *
+ * Base class for all sequencing primitives (generators, processors,
+ * timing modifiers, converters). Defines the param schema format,
+ * symbolic process() interface, and state management for freeze support.
+ *
+ * Port-ready: explicit state, no closures, typed arrays where possible.
+ *
+ * @module shapeseq/primitive
+ */
+
+// ── Valid primitive categories ──────────────────────────────────────
+
+export const CATEGORIES = Object.freeze([
+  'generator',
+  'processor',
+  'timing',
+  'converter',
+]);
+
+// ── Param schema defaults ───────────────────────────────────────────
+
+const DEFAULT_SCALED_RANGE = 0.3;
+
+// ── Boundary enforcement helpers ────────────────────────────────────
+
+/**
+ * Clamp a value to [0, 1].
+ * @param {number} v
+ * @returns {number}
+ */
+function clamp01(v) {
+  return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+
+/**
+ * Wrap a value into [0, 1) with modular arithmetic.
+ * @param {number} v
+ * @returns {number}
+ */
+function wrap01(v) {
+  const m = v % 1;
+  return m < 0 ? m + 1 : m;
+}
+
+/**
+ * Apply boundary enforcement to a raw param value.
+ *
+ * @param {number} value - raw [0,1] value (or delta-adjusted value)
+ * @param {{ boundary: string, scaledRange?: number }} schema - param schema entry
+ * @param {number|null} frozenValue - frozen value for 'scaled' boundary (null if not frozen)
+ * @returns {number}
+ */
+export function applyBoundary(value, schema, frozenValue) {
+  switch (schema.boundary) {
+    case 'wrap':
+      return wrap01(value);
+    case 'scaled': {
+      if (frozenValue === null || frozenValue === undefined) {
+        return clamp01(value);
+      }
+      const range = schema.scaledRange !== undefined ? schema.scaledRange : DEFAULT_SCALED_RANGE;
+      const lo = frozenValue - range;
+      const hi = frozenValue + range;
+      // Map [0,1] input to [lo, hi], then clamp to [0,1]
+      const mapped = lo + value * (hi - lo);
+      return clamp01(mapped);
+    }
+    case 'clamp':
+    default:
+      return clamp01(value);
+  }
+}
+
+// ── Param schema validation ─────────────────────────────────────────
+
+/**
+ * Validate a single param schema entry.
+ * Throws on invalid entries for fast fail during development.
+ *
+ * @param {{ name: string, default: number, boundary: string, scaledRange?: number }} entry
+ * @param {number} index - position in schema array (for error messages)
+ */
+function validateSchemaEntry(entry, index) {
+  if (!entry || typeof entry !== 'object') {
+    throw new TypeError('paramSchema[' + index + '] must be an object');
+  }
+  if (typeof entry.name !== 'string' || entry.name.length === 0) {
+    throw new TypeError('paramSchema[' + index + '].name must be a non-empty string');
+  }
+  if (typeof entry.default !== 'number' || entry.default < 0 || entry.default > 1) {
+    throw new RangeError('paramSchema[' + index + '].default must be in [0,1], got ' + entry.default);
+  }
+  if (entry.boundary !== 'clamp' && entry.boundary !== 'wrap' && entry.boundary !== 'scaled') {
+    throw new TypeError(
+      "paramSchema[" + index + "].boundary must be 'clamp', 'wrap', or 'scaled', got '" + entry.boundary + "'"
+    );
+  }
+  if (entry.boundary === 'scaled') {
+    const sr = entry.scaledRange;
+    if (sr !== undefined && (typeof sr !== 'number' || sr <= 0 || sr > 1)) {
+      throw new RangeError('paramSchema[' + index + '].scaledRange must be in (0,1], got ' + sr);
+    }
+  }
+}
+
+// ── Primitive base class ────────────────────────────────────────────
+
+export class Primitive {
+  /**
+   * @param {string} name - unique identifier for this primitive type
+   * @param {string} category - one of CATEGORIES
+   * @param {Array<{ name: string, default: number, boundary: string, scaledRange?: number }>} paramSchema
+   */
+  constructor(name, category, paramSchema) {
+    if (typeof name !== 'string' || name.length === 0) {
+      throw new TypeError('Primitive name must be a non-empty string');
+    }
+    if (CATEGORIES.indexOf(category) === -1) {
+      throw new TypeError(
+        "Primitive category must be one of [" + CATEGORIES.join(', ') + "], got '" + category + "'"
+      );
+    }
+    if (!Array.isArray(paramSchema)) {
+      throw new TypeError('paramSchema must be an array');
+    }
+
+    // Validate each entry
+    for (let i = 0; i < paramSchema.length; i++) {
+      validateSchemaEntry(paramSchema[i], i);
+    }
+
+    /** @type {string} */
+    this.name = name;
+
+    /** @type {string} */
+    this.category = category;
+
+    /**
+     * Frozen copy of the param schema. Each entry:
+     *   { name: string, default: number, boundary: 'clamp'|'wrap'|'scaled', scaledRange?: number }
+     * @type {Array<Object>}
+     */
+    this.paramSchema = Object.freeze(paramSchema.map(function (entry) {
+      const frozen = {
+        name: entry.name,
+        default: entry.default,
+        boundary: entry.boundary,
+      };
+      if (entry.boundary === 'scaled') {
+        frozen.scaledRange = entry.scaledRange !== undefined ? entry.scaledRange : DEFAULT_SCALED_RANGE;
+      }
+      return Object.freeze(frozen);
+    }));
+
+    /** @private */
+    this._seed = 0;
+  }
+
+  // ── Param utilities ─────────────────────────────────────────────
+
+  /**
+   * Total number of parameters this primitive exposes.
+   * @returns {number}
+   */
+  get paramCount() {
+    return this.paramSchema.length;
+  }
+
+  /**
+   * Get default param values as a Float32Array, one per schema entry.
+   * @returns {Float32Array}
+   */
+  getDefaults() {
+    const count = this.paramSchema.length;
+    const defaults = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+      defaults[i] = this.paramSchema[i].default;
+    }
+    return defaults;
+  }
+
+  // ── Symbolic processing ─────────────────────────────────────────
+
+  /**
+   * Transform a pattern description. Subclasses MUST override this.
+   *
+   * - Generators ignore patternDesc and create a new one (using createPattern())
+   * - Processors/timing modifiers clone and transform patternDesc
+   * - The rng param is a PRNG state from prng.js; consume via next(rng)
+   *   and return the consumed state in the result
+   *
+   * @param {Float32Array|Array<number>} params - param values, one per schema entry, each [0,1]
+   * @param {{ steps: Array, stepCount: number, metadata: Object }} patternDesc - input pattern
+   * @param {Object} state - primitive-specific state (from previous process() call or getState())
+   * @param {{ state: number }} rng - PRNG state object from prng.js
+   * @returns {{ patternDesc: { steps: Array, stepCount: number, metadata: Object }, nextState: Object }}
+   */
+  process(params, patternDesc, state, rng) {
+    void params; void patternDesc; void state; void rng;
+    throw new Error(this.name + '.process() must be overridden by subclass');
+  }
+
+  // ── State management (for freeze) ──────────────────────────────
+
+  /**
+   * Get serializable state for this primitive.
+   * Stateless primitives return {}. Stateful primitives (e.g. Pitch Walker)
+   * override to include their internal state.
+   *
+   * @returns {Object}
+   */
+  getState() {
+    return {};
+  }
+
+  /**
+   * Restore primitive state from a previously serialized state object.
+   * Stateless primitives are a no-op. Stateful primitives override.
+   *
+   * @param {Object} _state
+   */
+  setState(_state) {
+    // no-op for stateless primitives
+  }
+
+  /**
+   * Get the PRNG seed associated with this primitive.
+   * Used by freeze-as-algorithm to replay identical sequences.
+   *
+   * @returns {number}
+   */
+  getSeed() {
+    return this._seed;
+  }
+
+  /**
+   * Set the PRNG seed for this primitive.
+   *
+   * @param {number} seed - 32-bit integer seed
+   */
+  setSeed(seed) {
+    this._seed = seed >>> 0;
+  }
+}
diff --git a/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/primitives.js b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/primitives.js
new file mode 100644
index 0000000..9e21cf8
--- /dev/null
+++ b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/primitives.js
@@ -0,0 +1,505 @@
+/**
+ * ShapeSeq Sequencing Primitives
+ *
+ * All 8 primitives for the ShapeSeq generative sequencing system.
+ * Each extends Primitive and implements process(params, patternDesc, state, rng).
+ *
+ * Port-ready: explicit state, no closures, seeded PRNG, typed arrays.
+ *
+ * @module shapeseq/primitives
+ */
+
+import { Primitive } from './primitive.js';
+import { createPattern, clonePattern, setStep } from './pattern.js';
+import { next, nextInt } from './prng.js';
+
+// ── Helper: map [0,1] float to integer range [lo, hi] ──────────────
+
+function mapToInt(value, lo, hi) {
+  const clamped = value < 0 ? 0 : value > 1 ? 1 : value;
+  return lo + Math.floor(clamped * (hi - lo + 1 - 1e-9));
+}
+
+// ── 1. EuclideanRhythm ──────────────────────────────────────────────
+
+/**
+ * Bjorklund algorithm: distribute `pulses` as evenly as possible
+ * across `steps`, then apply rotation.
+ */
+function bjorklund(steps, pulses) {
+  if (pulses >= steps) {
+    const result = new Array(steps);
+    for (let i = 0; i < steps; i++) result[i] = true;
+    return result;
+  }
+  if (pulses <= 0) {
+    const result = new Array(steps);
+    for (let i = 0; i < steps; i++) result[i] = false;
+    return result;
+  }
+
+  // Build pattern using Bjorklund's algorithm
+  let groups = [];
+  for (let i = 0; i < pulses; i++) groups.push([true]);
+  for (let i = 0; i < steps - pulses; i++) groups.push([false]);
+
+  while (true) {
+    const remainder = groups.length - pulses;
+    if (remainder <= 1) break;
+    const minLen = Math.min(pulses, remainder);
+    const newGroups = [];
+    for (let i = 0; i < minLen; i++) {
+      newGroups.push(groups[i].concat(groups[groups.length - 1 - i]));
+    }
+    // Keep any leftovers
+    const leftStart = minLen;
+    const leftEnd = groups.length - minLen;
+    for (let i = leftStart; i < leftEnd; i++) {
+      newGroups.push(groups[i]);
+    }
+    groups = newGroups;
+    pulses = minLen;
+    if (pulses <= 1) break;
+  }
+
+  // Flatten groups
+  const result = [];
+  for (let i = 0; i < groups.length; i++) {
+    for (let j = 0; j < groups[i].length; j++) {
+      result.push(groups[i][j]);
+    }
+  }
+  return result;
+}
+
+export class EuclideanRhythm extends Primitive {
+  constructor() {
+    super('EuclideanRhythm', 'generator', [
+      { name: 'steps', default: 0.5, boundary: 'clamp' },
+      { name: 'pulses', default: 0.5, boundary: 'clamp' },
+      { name: 'rotation', default: 0.0, boundary: 'wrap' },
+    ]);
+  }
+
+  process(params, patternDesc, state, rng) {
+    const stepCount = patternDesc.stepCount;
+    const steps = mapToInt(params[0], 2, stepCount);
+    const pulses = mapToInt(params[1], 0, steps);
+    const rotation = mapToInt(params[2], 0, steps - 1);
+
+    const rhythm = bjorklund(steps, pulses);
+    const pattern = createPattern(stepCount);
+
+    for (let i = 0; i < stepCount; i++) {
+      if (i < steps) {
+        const srcIdx = (i - rotation + steps) % steps;
+        if (rhythm[srcIdx]) {
+          setStep(pattern, i, { trigger: true });
+        }
+      }
+      // Steps beyond `steps` remain untriggered (default)
+    }
+
+    return { patternDesc: pattern, nextState: {} };
+  }
+}
+
+// ── 2. ProbabilityGate ──────────────────────────────────────────────
+
+export class ProbabilityGate extends Primitive {
+  constructor() {
+    super('ProbabilityGate', 'processor', [
+      { name: 'density', default: 0.7, boundary: 'clamp' },
+      { name: 'accentProbability', default: 0.3, boundary: 'clamp' },
+    ]);
+  }
+
+  process(params, patternDesc, state, rng) {
+    const density = params[0];
+    const accentProb = params[1];
+    const pattern = clonePattern(patternDesc);
+    let currentRng = rng;
+
+    for (let i = 0; i < pattern.stepCount; i++) {
+      const step = pattern.steps[i];
+      if (step.trigger) {
+        // Coin flip for survival
+        const r1 = next(currentRng);
+        currentRng = r1.nextState;
+
+        if (r1.value >= density) {
+          step.trigger = false;
+          step.accent = false;
+        } else {
+          // Accent coin flip
+          const r2 = next(currentRng);
+          currentRng = r2.nextState;
+          step.accent = r2.value < accentProb;
+        }
+      }
+    }
+
+    return { patternDesc: pattern, nextState: {} };
+  }
+}
+
+// ── 3. PitchWalker ──────────────────────────────────────────────────
+
+export class PitchWalker extends Primitive {
+  constructor() {
+    super('PitchWalker', 'generator', [
+      { name: 'stepSize', default: 0.3, boundary: 'clamp' },
+      { name: 'directionBias', default: 0.5, boundary: 'clamp' },
+      { name: 'gravity', default: 0.3, boundary: 'clamp' },
+      { name: 'range', default: 0.8, boundary: 'clamp' },
+    ]);
+
+    /** @private */
+    this._position = 0.5;
+  }
+
+  getState() {
+    return { position: this._position };
+  }
+
+  setState(savedState) {
+    if (savedState && typeof savedState.position === 'number') {
+      this._position = savedState.position;
+    }
+  }
+
+  process(params, patternDesc, state, rng) {
+    const stepSize = params[0];
+    const directionBias = params[1];
+    const gravity = params[2];
+    const range = params[3];
+
+    // Restore position from state if provided
+    let position = (state && typeof state.position === 'number')
+      ? state.position
+      : this._position;
+
+    const pattern = createPattern(patternDesc.stepCount);
+    let currentRng = rng;
+
+    // Use incoming pattern's triggers if available, otherwise all triggered
+    const srcSteps = patternDesc.steps;
+
+    for (let i = 0; i < patternDesc.stepCount; i++) {
+      const triggered = srcSteps[i].trigger;
+
+      if (triggered) {
+        // Random walk step
+        const r1 = next(currentRng);
+        currentRng = r1.nextState;
+
+        // Direction: bias + gravity toward center
+        const gravityPull = (0.5 - position) * gravity;
+        const biasOffset = (directionBias - 0.5) * 2; // [-1, 1]
+        const direction = biasOffset + gravityPull;
+
+        // Random component: [-1, 1] scaled by stepSize
+        const randomComponent = (r1.value * 2 - 1) * stepSize * range;
+        const delta = direction * stepSize * 0.5 + randomComponent;
+
+        position = position + delta;
+        // Clamp to [0, 1]
+        if (position < 0) position = 0;
+        if (position > 1) position = 1;
+
+        setStep(pattern, i, { trigger: true, pitch: position });
+      }
+      // Untriggered steps keep default pitch, trigger=false
+    }
+
+    this._position = position;
+
+    return {
+      patternDesc: pattern,
+      nextState: { position: position },
+    };
+  }
+}
+
+// ── 4. Ratchet ──────────────────────────────────────────────────────
+
+export class Ratchet extends Primitive {
+  constructor() {
+    super('Ratchet', 'timing', [
+      { name: 'maxDivision', default: 0.5, boundary: 'clamp' },
+      { name: 'probability', default: 0.5, boundary: 'clamp' },
+    ]);
+  }
+
+  process(params, patternDesc, state, rng) {
+    const maxDiv = mapToInt(params[0], 1, 4);
+    const probability = params[1];
+    const pattern = clonePattern(patternDesc);
+    let currentRng = rng;
+
+    for (let i = 0; i < pattern.stepCount; i++) {
+      const step = pattern.steps[i];
+      if (step.trigger) {
+        const r1 = next(currentRng);
+        currentRng = r1.nextState;
+
+        if (r1.value < probability && maxDiv > 1) {
+          // Pick a subdivision count in [2, maxDiv]
+          const r2 = nextInt(currentRng, 2, maxDiv);
+          currentRng = r2.nextState;
+          step.subdivisions = r2.value;
+        }
+      }
+    }
+
+    return { patternDesc: pattern, nextState: {} };
+  }
+}
+
+// ── 5. SwingGroove ──────────────────────────────────────────────────
+
+export class SwingGroove extends Primitive {
+  constructor() {
+    super('SwingGroove', 'timing', [
+      { name: 'swingAmount', default: 0.0, boundary: 'clamp' },
+      { name: 'swingGrid', default: 0.0, boundary: 'clamp' },
+    ]);
+  }
+
+  process(params, patternDesc, state, rng) {
+    const swingAmount = params[0];
+    const pattern = clonePattern(patternDesc);
+
+    // Max swing = 0.33 (triplet feel)
+    const maxOffset = 0.33;
+    const offset = swingAmount * maxOffset;
+
+    // Apply swing to every other step (odd-indexed steps)
+    for (let i = 1; i < pattern.stepCount; i += 2) {
+      pattern.steps[i].timeOffset = offset;
+    }
+
+    return { patternDesc: pattern, nextState: {} };
+  }
+}
+
+// ── 6. DensityMorph ─────────────────────────────────────────────────
+
+export class DensityMorph extends Primitive {
+  constructor() {
+    super('DensityMorph', 'generator', [
+      { name: 'density', default: 0.5, boundary: 'clamp' },
+      { name: 'clustering', default: 0.0, boundary: 'clamp' },
+    ]);
+  }
+
+  process(params, patternDesc, state, rng) {
+    const density = params[0];
+    const clustering = params[1];
+    const stepCount = patternDesc.stepCount;
+    const pattern = createPattern(stepCount);
+    const numTriggers = Math.floor(density * stepCount);
+
+    if (numTriggers <= 0) {
+      return { patternDesc: pattern, nextState: {} };
+    }
+    if (numTriggers >= stepCount) {
+      for (let i = 0; i < stepCount; i++) {
+        setStep(pattern, i, { trigger: true });
+      }
+      return { patternDesc: pattern, nextState: {} };
+    }
+
+    let currentRng = rng;
+
+    if (clustering < 0.01) {
+      // Even spread: Euclidean-like placement
+      for (let i = 0; i < numTriggers; i++) {
+        const idx = Math.floor((i * stepCount) / numTriggers);
+        setStep(pattern, idx, { trigger: true });
+      }
+    } else if (clustering > 0.99) {
+      // Full clustering: contiguous burst
+      const r1 = nextInt(currentRng, 0, stepCount - 1);
+      currentRng = r1.nextState;
+      const startPos = r1.value;
+      for (let i = 0; i < numTriggers; i++) {
+        const idx = (startPos + i) % stepCount;
+        setStep(pattern, idx, { trigger: true });
+      }
+    } else {
+      // Interpolate: place triggers with clustering-dependent spread
+      // Use a "center of mass" approach:
+      // Pick a random center, then distribute triggers around it
+      // with spread inversely proportional to clustering
+      const r1 = next(currentRng);
+      currentRng = r1.nextState;
+      const center = r1.value * stepCount;
+
+      // Spread factor: low clustering = large spread, high = tight
+      const spreadRadius = (1 - clustering) * stepCount * 0.5;
+
+      // Score each step by distance from center (wrapping)
+      const scores = new Float32Array(stepCount);
+      for (let i = 0; i < stepCount; i++) {
+        // Wrapped distance from center
+        let dist = Math.abs(i - center);
+        if (dist > stepCount * 0.5) dist = stepCount - dist;
+        // Add small random jitter to break ties
+        const r2 = next(currentRng);
+        currentRng = r2.nextState;
+        scores[i] = dist / (spreadRadius + 0.001) + r2.value * 0.01;
+      }
+
+      // Select the numTriggers steps with lowest scores
+      const indices = new Array(stepCount);
+      for (let i = 0; i < stepCount; i++) indices[i] = i;
+      indices.sort(function (a, b) { return scores[a] - scores[b]; });
+
+      for (let i = 0; i < numTriggers; i++) {
+        setStep(pattern, indices[i], { trigger: true });
+      }
+    }
+
+    return { patternDesc: pattern, nextState: {} };
+  }
+}
+
+// ── 7. IntervalLock ─────────────────────────────────────────────────
+
+const SCALES = [
+  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // chromatic
+  [0, 2, 4, 5, 7, 9, 11],                   // major
+  [0, 2, 3, 5, 7, 8, 10],                   // natural minor
+  [0, 2, 3, 5, 7, 8, 11],                   // harmonic minor
+  [0, 2, 4, 7, 9],                           // pentatonic major
+  [0, 3, 5, 7, 10],                          // pentatonic minor
+  [0, 3, 5, 6, 7, 10],                       // blues
+  [0, 2, 3, 5, 7, 9, 10],                   // dorian
+  [0, 2, 4, 5, 7, 9, 10],                   // mixolydian
+  [0, 2, 4, 6, 8, 10],                       // whole tone
+  [0, 2, 3, 5, 6, 8, 9, 11],               // diminished
+];
+
+export class IntervalLock extends Primitive {
+  constructor() {
+    super('IntervalLock', 'converter', [
+      { name: 'root', default: 0.0, boundary: 'clamp' },
+      { name: 'mode', default: 0.0, boundary: 'clamp' },
+      { name: 'octaveRange', default: 0.25, boundary: 'clamp' },
+    ]);
+  }
+
+  process(params, patternDesc, state, rng) {
+    const root = mapToInt(params[0], 0, 11);
+    const scaleIdx = mapToInt(params[1], 0, SCALES.length - 1);
+    const octaveRange = mapToInt(params[2], 1, 4);
+    const scale = SCALES[scaleIdx];
+
+    const pattern = clonePattern(patternDesc);
+
+    // Build the full set of MIDI notes in this scale + root + range
+    const notes = [];
+    for (let oct = 0; oct < octaveRange; oct++) {
+      for (let i = 0; i < scale.length; i++) {
+        const midiNote = root + scale[i] + oct * 12;
+        if (midiNote <= 127) {
+          notes.push(midiNote);
+        }
+      }
+    }
+
+    if (notes.length === 0) {
+      return { patternDesc: pattern, nextState: {} };
+    }
+
+    for (let i = 0; i < pattern.stepCount; i++) {
+      const step = pattern.steps[i];
+      // Quantize pitch [0,1] to nearest note in our scale
+      const targetIdx = Math.round(step.pitch * (notes.length - 1));
+      const clampedIdx = targetIdx < 0 ? 0 : targetIdx >= notes.length ? notes.length - 1 : targetIdx;
+      // Store as MIDI note / 127 to stay in [0,1]
+      step.pitch = notes[clampedIdx] / 127;
+    }
+
+    return { patternDesc: pattern, nextState: {} };
+  }
+}
+
+// ── 8. VelocityShaper ───────────────────────────────────────────────
+
+export class VelocityShaper extends Primitive {
+  constructor() {
+    super('VelocityShaper', 'processor', [
+      { name: 'curveType', default: 0.0, boundary: 'clamp' },
+      { name: 'depth', default: 0.5, boundary: 'clamp' },
+      { name: 'phase', default: 0.0, boundary: 'wrap' },
+    ]);
+  }
+
+  process(params, patternDesc, state, rng) {
+    const curveIdx = mapToInt(params[0], 0, 4);
+    const depth = params[1];
+    const phase = params[2];
+    const pattern = clonePattern(patternDesc);
+    const stepCount = pattern.stepCount;
+    let currentRng = rng;
+
+    for (let i = 0; i < stepCount; i++) {
+      const step = pattern.steps[i];
+      if (!step.trigger) continue;
+
+      // Phase-shifted position
+      const pos = ((i / stepCount) + phase) % 1;
+      let shapeValue;
+
+      switch (curveIdx) {
+        case 0: // flat
+          shapeValue = 1.0;
+          break;
+        case 1: // accent-every-N (accent every 4th step)
+          shapeValue = ((i + Math.floor(phase * stepCount)) % 4 === 0) ? 1.0 : 0.5;
+          break;
+        case 2: // crescendo
+          shapeValue = pos;
+          break;
+        case 3: // decrescendo
+          shapeValue = 1.0 - pos;
+          break;
+        case 4: { // random
+          const r1 = next(currentRng);
+          currentRng = r1.nextState;
+          shapeValue = r1.value;
+          break;
+        }
+        default:
+          shapeValue = 1.0;
+      }
+
+      // Apply depth: interpolate between uniform (1.0) and shaped
+      // depth=0 means all same velocity (base), depth=1 means full shape
+      const baseVelocity = 0.7;
+      const shaped = shapeValue;
+      step.velocity = baseVelocity * (1 - depth) + shaped * depth;
+
+      // Clamp
+      if (step.velocity < 0) step.velocity = 0;
+      if (step.velocity > 1) step.velocity = 1;
+    }
+
+    return { patternDesc: pattern, nextState: {} };
+  }
+}
+
+// ── Registry ────────────────────────────────────────────────────────
+
+export const PRIMITIVE_REGISTRY = {
+  EuclideanRhythm: EuclideanRhythm,
+  ProbabilityGate: ProbabilityGate,
+  PitchWalker: PitchWalker,
+  Ratchet: Ratchet,
+  SwingGroove: SwingGroove,
+  DensityMorph: DensityMorph,
+  IntervalLock: IntervalLock,
+  VelocityShaper: VelocityShaper,
+};
diff --git a/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/sequencer.js b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/sequencer.js
new file mode 100644
index 0000000..31d1d84
--- /dev/null
+++ b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/sequencer.js
@@ -0,0 +1,304 @@
+/**
+ * ShapeSeq Engine — central orchestrator
+ *
+ * Wires together the sequence MLP, param mapping, primitive chain,
+ * projection layer, clock engine, and C15 bridge.
+ *
+ * Main loop (triggered by setSequenceInputs):
+ *   1. Forward inputs to sequenceIML
+ *   2. Run MLP inference to get 16 outputs
+ *   3. Map 16 outputs to N primitive params via param-map
+ *   4. Evaluate the chain to produce a pattern description
+ *   5. Apply projection transforms
+ *   6. Schedule the pattern on the clock
+ *
+ * Bridge integration:
+ *   - Subscribes to seq.noteOn / seq.noteOff on the event bus
+ *   - Forwards to C15Bridge.noteOn / noteOff
+ *   - Tracks active notes to avoid orphans
+ *
+ * @module shapeseq/sequencer
+ */
+
+import { createSequenceIML, SEQ_N_OUTPUTS } from './seq-iml.js';
+import { Chain } from './chain.js';
+import { ClockEngine } from './clock.js';
+import { map } from './param-map.js';
+import { createProjectionChain, applyProjection, PRESETS } from './projection.js';
+import { SEQ } from './event-bus.js';
+import {
+  EuclideanRhythm,
+  ProbabilityGate,
+  PitchWalker,
+  IntervalLock,
+  VelocityShaper,
+} from './primitives.js';
+
+// ── Defaults ─────────────────────────────────────────────────────────
+
+const DEFAULT_BPM = 120;
+const DEFAULT_STEP_COUNT = 8;
+const DEFAULT_MASTER_SEED = 42;
+const DEFAULT_SPREAD = 0.6;
+
+// ── ShapeSeqEngine ───────────────────────────────────────────────────
+
+export class ShapeSeqEngine {
+  /**
+   * @param {{ audioContext: AudioContext, eventBus: import('./event-bus.js').EventBus, c15Bridge: import('../synth/c15-bridge.js').C15Bridge }} opts
+   */
+  constructor({ audioContext, eventBus, c15Bridge }) {
+    if (!audioContext) throw new TypeError('ShapeSeqEngine requires an audioContext');
+    if (!eventBus) throw new TypeError('ShapeSeqEngine requires an eventBus');
+    if (!c15Bridge) throw new TypeError('ShapeSeqEngine requires a c15Bridge');
+
+    /** @private */ this._audioCtx = audioContext;
+    /** @private */ this._bus = eventBus;
+    /** @private */ this._c15 = c15Bridge;
+
+    /** @private */ this._sequenceIML = null;
+    /** @private */ this._chain = null;
+    /** @private */ this._clock = null;
+    /** @private */ this._projectionChain = null;
+
+    /** @private */ this._stepCount = DEFAULT_STEP_COUNT;
+    /** @private */ this._masterSeed = DEFAULT_MASTER_SEED;
+    /** @private */ this._playing = false;
+    /** @private */ this._initialized = false;
+
+    // Track active notes for orphan prevention
+    /** @private @type {Set<number>} */
+    this._activeNotes = new Set();
+
+    // Bound handlers for event bus (stored for cleanup)
+    /** @private */
+    this._onNoteOn = (data) => this._handleNoteOn(data);
+    /** @private */
+    this._onNoteOff = (data) => this._handleNoteOff(data);
+  }
+
+  // ── Lifecycle ──────────────────────────────────────────────────────
+
+  /**
+   * Initialize all subsystems: create sequence IML, default chain,
+   * clock, and projection chain. Must be called before start().
+   */
+  async init() {
+    // 1. Create the sequence MLP
+    this._sequenceIML = await createSequenceIML();
+
+    // Randomize weights with default spread
+    this._sequenceIML.drawWeights(DEFAULT_SPREAD);
+
+    // 2. Create the default primitive chain
+    this._chain = new Chain();
+    this._chain.addPrimitive(new EuclideanRhythm());
+    this._chain.addPrimitive(new ProbabilityGate());
+    this._chain.addPrimitive(new PitchWalker());
+    this._chain.addPrimitive(new IntervalLock());
+    this._chain.addPrimitive(new VelocityShaper());
+    this._chain.setMasterSeed(this._masterSeed);
+
+    // 3. Set up the clock
+    this._clock = new ClockEngine(this._audioCtx, this._bus);
+    this._clock.bpm = DEFAULT_BPM;
+
+    // 4. Create default projection chain (expressive preset)
+    const result = createProjectionChain(PRESETS.expressive);
+    if (!result.valid) {
+      throw new Error('Default projection chain invalid: ' + result.error);
+    }
+    this._projectionChain = result;
+
+    // 5. Subscribe to event bus for C15 bridge integration
+    this._bus.on(SEQ.NOTE_ON, this._onNoteOn);
+    this._bus.on(SEQ.NOTE_OFF, this._onNoteOff);
+
+    this._initialized = true;
+  }
+
+  /**
+   * Start the clock. Requires init() to have been called.
+   */
+  start() {
+    if (!this._initialized) {
+      throw new Error('ShapeSeqEngine.start() called before init()');
+    }
+    if (this._playing) return;
+
+    this._playing = true;
+    this._clock.start();
+  }
+
+  /**
+   * Stop the clock and release all active notes.
+   */
+  stop() {
+    if (!this._playing) return;
+
+    this._playing = false;
+    this._clock.stop();
+    this._releaseAllNotes();
+  }
+
+  /**
+   * Full cleanup: stop playback, unsubscribe from events, destroy IML.
+   */
+  destroy() {
+    this.stop();
+
+    // Unsubscribe from event bus
+    this._bus.off(SEQ.NOTE_ON, this._onNoteOn);
+    this._bus.off(SEQ.NOTE_OFF, this._onNoteOff);
+
+    // Destroy the sequence IML instance
+    if (this._sequenceIML) {
+      this._sequenceIML.destroy();
+      this._sequenceIML = null;
+    }
+
+    this._chain = null;
+    this._clock = null;
+    this._projectionChain = null;
+    this._initialized = false;
+  }
+
+  // ── Configuration ──────────────────────────────────────────────────
+
+  /**
+   * Update the clock tempo.
+   * @param {number} bpm
+   */
+  setTempo(bpm) {
+    if (this._clock) {
+      this._clock.setTempo(bpm);
+    }
+  }
+
+  /**
+   * Set the number of steps in the generated pattern.
+   * @param {number} count
+   */
+  setStepCount(count) {
+    const c = Math.max(1, count | 0);
+    this._stepCount = c;
+  }
+
+  /**
+   * Set the projection preset by name.
+   * @param {'expressive'|'percussive'|'fullRange'} presetName
+   */
+  setProjectionPreset(presetName) {
+    const preset = PRESETS[presetName];
+    if (!preset) {
+      throw new Error('Unknown projection preset: ' + presetName);
+    }
+    const result = createProjectionChain(preset);
+    if (!result.valid) {
+      throw new Error('Projection chain invalid: ' + result.error);
+    }
+    this._projectionChain = result;
+  }
+
+  // ── Chain access (for UI binding) ──────────────────────────────────
+
+  /** @returns {Chain} */
+  getChain() { return this._chain; }
+
+  /** @returns {ClockEngine} */
+  getClock() { return this._clock; }
+
+  /** @returns {WasmIML} */
+  getSequenceIML() { return this._sequenceIML; }
+
+  // ── Input routing ──────────────────────────────────────────────────
+
+  /**
+   * Feed new input values to the sequence MLP and run the full pipeline:
+   * MLP inference -> param mapping -> chain evaluation -> projection -> clock scheduling.
+   *
+   * Call this each frame with the routed input values (e.g., [x, y]).
+   *
+   * @param {number[]} values - input array (typically [x, y])
+   */
+  setSequenceInputs(values) {
+    if (!this._initialized || !this._sequenceIML) return;
+
+    // 1. Forward inputs to the sequence IML
+    this._sequenceIML.setInputs(values);
+
+    // 2. Run MLP inference
+    this._sequenceIML.process();
+
+    // 3. Get the 16 MLP outputs
+    const mlpOutputs = this._sequenceIML.getOutputs();
+
+    // 4. Map 16 outputs to N primitive params
+    const paramCount = this._chain.totalParamCount;
+    const mappedParams = map(mlpOutputs, paramCount);
+
+    // 5. Evaluate the chain to produce a pattern description
+    const patternDesc = this._chain.evaluate(mappedParams, this._stepCount, this._masterSeed);
+
+    // 6. Apply projection transforms
+    const projectedPattern = applyProjection(this._projectionChain, patternDesc);
+
+    // 7. Schedule the pattern on the clock
+    this._clock.schedulePattern(projectedPattern);
+  }
+
+  // ── ML control ─────────────────────────────────────────────────────
+
+  /** @returns {boolean} */
+  get isPlaying() {
+    return this._playing;
+  }
+
+  // ── Bridge integration (private) ───────────────────────────────────
+
+  /**
+   * Handle seq.noteOn events from the event bus.
+   * Converts [0,1] pitch to MIDI note number and forwards to C15.
+   *
+   * @private
+   * @param {Object} data - { pitch, velocity, stepIndex, time, accent, isSubdivision }
+   */
+  _handleNoteOn(data) {
+    // pitch comes from the projection layer; after RangeMap it's already
+    // in MIDI note range (e.g., 48-84). Round to nearest integer.
+    const midiNote = Math.round(data.pitch) | 0;
+    const velocity = data.velocity;
+
+    // Clamp to valid MIDI range
+    const note = midiNote < 0 ? 0 : midiNote > 127 ? 127 : midiNote;
+    const vel = velocity < 0 ? 0 : velocity > 1 ? 1 : velocity;
+
+    this._c15.noteOn(note, vel);
+    this._activeNotes.add(note);
+  }
+
+  /**
+   * Handle seq.noteOff events from the event bus.
+   *
+   * @private
+   * @param {Object} data - { pitch, velocity, stepIndex, time }
+   */
+  _handleNoteOff(data) {
+    const midiNote = Math.round(data.pitch) | 0;
+    const note = midiNote < 0 ? 0 : midiNote > 127 ? 127 : midiNote;
+
+    this._c15.noteOff(note);
+    this._activeNotes.delete(note);
+  }
+
+  /**
+   * Release all currently active notes to avoid orphaned noteOns.
+   * @private
+   */
+  _releaseAllNotes() {
+    for (const note of this._activeNotes) {
+      this._c15.noteOff(note);
+    }
+    this._activeNotes.clear();
+  }
+}
diff --git a/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/step-viz.js b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/step-viz.js
new file mode 100644
index 0000000..8682c0c
--- /dev/null
+++ b/.claude/worktrees/agent-ae87fe47/playground/js/shapeseq/step-viz.js
@@ -0,0 +1,328 @@
+/**
+ * ShapeSeq Circular Step Visualizer
+ *
+ * Renders steps arranged in a circle (heptagon, tridecagon, etc.)
+ * with pitch mapped to radial distance, velocity to node size,
+ * and accent to color brightness.
+ *
+ * Designed for 60fps rendering — no allocations in the render loop.
+ * Port-ready: explicit state, no closures in hot paths.
+ *
+ * @module shapeseq/step-viz
+ */
+
+import { SEQ } from './event-bus.js';
+
+// ── Constants (pre-allocated, shared across instances) ──────────────
+
+const TWO_PI = Math.PI * 2;
+const HALF_PI = Math.PI * 0.5;
+
+// Color constants
+const COLOR_INACTIVE = 'rgba(255, 255, 255, 0.15)';
+const COLOR_ACTIVE = '#00ccff';
+const COLOR_CURRENT = '#ff6a00';
+const COLOR_ACCENT = '#ffcc00';
+const COLOR_BG = '#0d0d0d';
+
+// Glow colors (pre-computed rgba strings)
+const GLOW_ACTIVE = 'rgba(0, 204, 255, 0.3)';
+const GLOW_CURRENT = 'rgba(255, 106, 0, 0.4)';
+const GLOW_ACCENT = 'rgba(255, 204, 0, 0.35)';
+
+// Layout
+const PADDING_RATIO = 0.08;       // canvas padding as fraction of min dimension
+const OUTER_RADIUS_RATIO = 0.90;  // outer ring at 90% of available radius
+const INNER_RADIUS_RATIO = 0.30;  // inner ring at 30% of available radius
+
+// Node sizing
+const NODE_MIN_RADIUS = 4;
+const NODE_MAX_RADIUS = 18;
+const NODE_OUTLINE_WIDTH = 1.5;
+
+// Current-step indicator
+const INDICATOR_EXTRA_RADIUS = 8;
+const INDICATOR_LINE_WIDTH = 2;
+
+// Center dot
+const CENTER_DOT_RADIUS = 3;
+
+// ── StepVisualizer ──────────────────────────────────────────────────
+
+export class StepVisualizer {
+  /**
+   * @param {{ canvas: HTMLCanvasElement, eventBus: import('./event-bus.js').EventBus }} opts
+   */
+  constructor({ canvas, eventBus }) {
+    this._canvas = canvas;
+    this._ctx = canvas.getContext('2d');
+    this._bus = eventBus;
+
+    // State
+    this._pattern = null;       // current pattern description
+    this._currentStep = -1;     // playback position (-1 = none)
+    this._width = 0;
+    this._height = 0;
+    this._cx = 0;              // center x
+    this._cy = 0;              // center y
+    this._maxRadius = 0;       // max ring radius in pixels
+
+    // Pre-allocated arrays to avoid per-frame allocation.
+    // Sized lazily when pattern is set.
+    this._nodeX = null;        // Float64Array — screen x per step
+    this._nodeY = null;        // Float64Array — screen y per step
+    this._nodeR = null;        // Float64Array — rendered radius per step
+
+    // Interaction
+    this._tapCallback = null;
+    this._onPointerDown = this._handlePointerDown.bind(this);
+
+    // Event bus subscription
+    this._onStep = this._handleStep.bind(this);
+    this._bus.on(SEQ.STEP, this._onStep);
+
+    // Canvas interaction
+    this._canvas.addEventListener('pointerdown', this._onPointerDown);
+
+    // Initial sizing
+    this.resize(canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height);
+  }
+
+  // ── Public API ──────────────────────────────────────────────────
+
+  /**
+   * Update the displayed pattern.
+   * @param {{ steps: Array, stepCount: number, metadata: Object }} patternDesc
+   */
+  setPattern(patternDesc) {
+    this._pattern = patternDesc;
+    const count = patternDesc ? patternDesc.stepCount : 0;
+
+    // (Re)allocate coordinate buffers only when step count changes
+    if (!this._nodeX || this._nodeX.length !== count) {
+      this._nodeX = new Float64Array(count);
+      this._nodeY = new Float64Array(count);
+      this._nodeR = new Float64Array(count);
+    }
+
+    this._computeLayout();
+  }
+
+  /**
+   * Update the playback position.
+   * @param {number} index — step index (0-based), or -1 for none
+   */
+  setCurrentStep(index) {
+    this._currentStep = index;
+  }
+
+  /**
+   * Draw one frame. Call from requestAnimationFrame.
+   */
+  render() {
+    const ctx = this._ctx;
+    const w = this._width;
+    const h = this._height;
+
+    // Clear
+    ctx.fillStyle = COLOR_BG;
+    ctx.fillRect(0, 0, w, h);
+
+    if (!this._pattern || this._pattern.stepCount === 0) return;
+
+    const steps = this._pattern.steps;
+    const count = this._pattern.stepCount;
+    const cx = this._cx;
+    const cy = this._cy;
+
+    // Draw connecting ring (subtle guide circle at midpoint radius)
+    const midRadius = this._maxRadius * ((OUTER_RADIUS_RATIO + INNER_RADIUS_RATIO) * 0.5);
+    ctx.beginPath();
+    ctx.arc(cx, cy, midRadius, 0, TWO_PI);
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.06)';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    // Center dot
+    ctx.beginPath();
+    ctx.arc(cx, cy, CENTER_DOT_RADIUS, 0, TWO_PI);
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
+    ctx.fill();
+
+    // Draw connector line from center to current step
+    if (this._currentStep >= 0 && this._currentStep < count) {
+      const si = this._currentStep;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy);
+      ctx.lineTo(this._nodeX[si], this._nodeY[si]);
+      ctx.strokeStyle = 'rgba(255, 106, 0, 0.2)';
+      ctx.lineWidth = INDICATOR_LINE_WIDTH;
+      ctx.stroke();
+    }
+
+    // Draw step nodes
+    for (let i = 0; i < count; i++) {
+      const step = steps[i];
+      const nx = this._nodeX[i];
+      const ny = this._nodeY[i];
+      const nr = this._nodeR[i];
+      const isCurrent = i === this._currentStep;
+
+      if (isCurrent) {
+        // Outer glow for current step
+        ctx.beginPath();
+        ctx.arc(nx, ny, nr + INDICATOR_EXTRA_RADIUS, 0, TWO_PI);
+        ctx.fillStyle = GLOW_CURRENT;
+        ctx.fill();
+      }
+
+      if (step.trigger) {
+        // Glow behind active nodes
+        if (!isCurrent) {
+          const glowColor = step.accent ? GLOW_ACCENT : GLOW_ACTIVE;
+          ctx.beginPath();
+          ctx.arc(nx, ny, nr + 4, 0, TWO_PI);
+          ctx.fillStyle = glowColor;
+          ctx.fill();
+        }
+
+        // Filled node
+        ctx.beginPath();
+        ctx.arc(nx, ny, nr, 0, TWO_PI);
+        if (isCurrent) {
+          ctx.fillStyle = COLOR_CURRENT;
+        } else if (step.accent) {
+          ctx.fillStyle = COLOR_ACCENT;
+        } else {
+          ctx.fillStyle = COLOR_ACTIVE;
+        }
+        ctx.fill();
+      } else {
+        // Dim outline only for untriggered steps
+        ctx.beginPath();
+        ctx.arc(nx, ny, nr, 0, TWO_PI);
+        ctx.strokeStyle = isCurrent ? COLOR_CURRENT : COLOR_INACTIVE;
+        ctx.lineWidth = NODE_OUTLINE_WIDTH;
+        ctx.stroke();
+      }
+    }
+  }
+
+  /**
+   * Handle canvas resize.
+   * @param {number} width — CSS pixels
+   * @param {number} height — CSS pixels
+   */
+  resize(width, height) {
+    const dpr = window.devicePixelRatio || 1;
+    this._canvas.width = width * dpr;
+    this._canvas.height = height * dpr;
+    this._ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    this._width = width;
+    this._height = height;
+    this._cx = width * 0.5;
+    this._cy = height * 0.5;
+
+    const minDim = Math.min(width, height);
+    this._maxRadius = (minDim * 0.5) * (1 - PADDING_RATIO * 2);
+
+    this._computeLayout();
+  }
+
+  /**
+   * Register a tap callback.
+   * @param {function(number): void} callback — receives step index
+   */
+  onStepTap(callback) {
+    this._tapCallback = callback;
+  }
+
+  /**
+   * Unsubscribe from event bus and remove DOM listeners.
+   */
+  destroy() {
+    this._bus.off(SEQ.STEP, this._onStep);
+    this._canvas.removeEventListener('pointerdown', this._onPointerDown);
+    this._tapCallback = null;
+    this._pattern = null;
+  }
+
+  // ── Private ─────────────────────────────────────────────────────
+
+  /**
+   * Re-compute node positions from current pattern + canvas size.
+   * Called when pattern or size changes — NOT per frame.
+   */
+  _computeLayout() {
+    if (!this._pattern || !this._nodeX) return;
+
+    const steps = this._pattern.steps;
+    const count = this._pattern.stepCount;
+    const cx = this._cx;
+    const cy = this._cy;
+    const maxR = this._maxRadius;
+    const outerR = maxR * OUTER_RADIUS_RATIO;
+    const innerR = maxR * INNER_RADIUS_RATIO;
+    const radiusRange = outerR - innerR;
+
+    // Angular step: start at top (-PI/2), go clockwise
+    const angleStep = TWO_PI / count;
+
+    for (let i = 0; i < count; i++) {
+      const step = steps[i];
+      const angle = -HALF_PI + angleStep * i;
+
+      // Pitch -> radial distance: low pitch = outer, high pitch = inner
+      const pitchNorm = step.pitch; // 0 = low (outer), 1 = high (inner)
+      const r = outerR - pitchNorm * radiusRange;
+
+      this._nodeX[i] = cx + Math.cos(angle) * r;
+      this._nodeY[i] = cy + Math.sin(angle) * r;
+
+      // Velocity -> node size
+      this._nodeR[i] = NODE_MIN_RADIUS + step.velocity * (NODE_MAX_RADIUS - NODE_MIN_RADIUS);
+    }
+  }
+
+  /**
+   * Handle seq.step events from the event bus.
+   */
+  _handleStep(data) {
+    if (typeof data.stepIndex === 'number') {
+      this._currentStep = data.stepIndex;
+    }
+  }
+
+  /**
+   * Handle pointer down on the canvas for tap interaction.
+   */
+  _handlePointerDown(e) {
+    if (!this._tapCallback || !this._pattern) return;
+
+    const rect = this._canvas.getBoundingClientRect();
+    const px = e.clientX - rect.left;
+    const py = e.clientY - rect.top;
+    const count = this._pattern.stepCount;
+
+    // Find closest step within hit radius
+    let bestIdx = -1;
+    let bestDistSq = Infinity;
+
+    for (let i = 0; i < count; i++) {
+      const dx = px - this._nodeX[i];
+      const dy = py - this._nodeY[i];
+      const distSq = dx * dx + dy * dy;
+      // Hit area is the node radius + some tolerance
+      const hitR = this._nodeR[i] + 12;
+      if (distSq < hitR * hitR && distSq < bestDistSq) {
+        bestDistSq = distSq;
+        bestIdx = i;
+      }
+    }
+
+    if (bestIdx >= 0) {
+      this._tapCallback(bestIdx);
+    }
+  }
+}
diff --git a/playground/TODOS.md b/playground/TODOS.md
index 4aa9f57..d545325 100644
--- a/playground/TODOS.md
+++ b/playground/TODOS.md
@@ -1,9 +1,9 @@
 
 
 ## synth view Immersive UI
-- [ ] add hover tooltip for each parameter slider
-- [ ] hovering on the name of a module/group at the top should open a little drawer panel that allows us to set
-	- [ ] minimum and maximum values for each parameter (similar to what tame does)
-	- [ ] a curve parameter that's normalised and goes between logarithmic and exponential, with a little graph to visualise, to skew the distribution in either direction
-- [ ] if the audio engine hasn't been initialised yet, the play button at the top left should be pulsing and have an orange highlight
-	
+- [x] add hover tooltip for each parameter slider (canvas tooltip follows mouse, shows name/value/range/curve)
+- [x] hovering on the name of a module/group at the top should open a little drawer panel that allows us to set
+	- [x] minimum and maximum values for each parameter (dual-thumb range slider)
+	- [x] a curve parameter that's normalised and goes between logarithmic and exponential, with a little graph to visualise, to skew the distribution in either direction (per-param draggable canvas + group master curve with relative adjustment)
+	- [x] mute toggle per parameter (removes from NISPS, replaces with fixed value slider)
+- [x] if the audio engine hasn't been initialised yet, the play button at the top left should be pulsing and have an orange highlight
diff --git a/playground/a-immersive.html b/playground/a-immersive.html
index 165263d..941e9df 100644
--- a/playground/a-immersive.html
+++ b/playground/a-immersive.html
@@ -54,19 +54,26 @@
     </select>
   </div>
 
+  <!-- MIDI CC quick controls (shown in midi-cc mode, mirrors synth quick controls layout) -->
+  <div class="midi-cc-quick-controls hidden" id="midi-cc-quick-controls">
+    <button class="play-btn" id="midi-cc-enable-btn" title="Enable MIDI output">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M4 9v2M6 7v4M8 8v3M10 7v4M12 9v2"/>
+      </svg>
+    </button>
+    <select class="preset-select" id="midi-cc-output-select" title="MIDI output device">
+      <option value="">No device</option>
+    </select>
+    <span class="synth-status" id="midi-cc-status" style="font-size:0.65rem;opacity:0.7"></span>
+  </div>
+
   <!-- Fullscreen flow field canvas -->
   <canvas id="vis-canvas"></canvas>
 
   <!-- Synth visualization canvas -->
   <canvas id="synth-vis-canvas"></canvas>
 
-  <!-- ShapeSeq UI (hidden by default, enabled with ?shapeseq=1) -->
-  <div class="shapeseq-container hidden" id="shapeseq-container">
-    <canvas id="shapeseq-viz"></canvas>
-    <div class="shapeseq-chain-wrap" id="shapeseq-chain"></div>
-  </div>
-
-  <!-- Heatmap strip (top) -->
+  <!-- Heatmap strip (top) — bars are click/draggable -->
   <div class="heatmap-strip" id="heatmap-strip">
     <div class="heatmap-cells" id="heatmap-cells"></div>
     <div class="heatmap-tooltip" id="heatmap-tooltip"></div>
@@ -95,60 +102,122 @@
     </div>
   </div>
 
-  <!-- RL floating buttons -->
+  <!-- RL floating buttons (with undo between/below) -->
   <div class="rl-buttons" id="rl-buttons">
     <button class="rl-btn rl-down" id="btn-thumbsdown" title="Explore more"><span class="rl-icon">&minus;</span><span class="key-num">1</span></button>
     <button class="rl-btn rl-up" id="btn-thumbsup" title="Keep this"><span class="rl-icon">+</span><span class="key-num">2</span></button>
+    <button class="rl-undo-btn" id="btn-undo" title="Undo last action">
+      <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 7h6a4 4 0 0 1 0 8H7"/><path d="M3 7l3-3M3 7l3 3"/>
+      </svg>
+    </button>
   </div>
 
-  <!-- Bottom sheet -->
-  <div class="bottom-sheet collapsed" id="bottom-sheet">
-    <!-- Floating mode bar (sticky inside sheet) -->
-    <div class="floating-bar" id="floating-bar">
-      <div class="pill-toggle pill-toggle-sm" id="input-toggle">
-        <button class="pill-opt active" data-input="joystick">Joystick</button>
-        <button class="pill-opt" data-input="hands">Hands</button>
+  <!-- Status line (floating, minimal) -->
+  <div class="status-line" id="status-line">
+    <span id="status-text">0 examples &middot; untrained</span>
+  </div>
+
+  <!-- Right-side dock (macOS-style) -->
+  <div class="dock" id="dock">
+    <button class="dock-icon" data-drawer="training" title="Training">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 8h10"/><rect x="1" y="5" width="3" height="6" rx="0.5"/><rect x="12" y="5" width="3" height="6" rx="0.5"/><rect x="3" y="6.5" width="2" height="3" rx="0.3"/><rect x="11" y="6.5" width="2" height="3" rx="0.3"/>
+      </svg>
+      <span class="dock-label">Train</span>
+    </button>
+    <button class="dock-icon" data-drawer="mode" title="Input / Output mode">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="5" cy="5" r="2"/><circle cx="11" cy="11" r="2"/><path d="M3 13L13 3"/>
+      </svg>
+      <span class="dock-label">Mode</span>
+    </button>
+    <button class="dock-icon" data-drawer="synth" title="Synth controls">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M2 10c2-4 4-4 6 0s4-4 6 0"/>
+      </svg>
+      <span class="dock-label">Synth</span>
+    </button>
+    <button class="dock-icon" data-drawer="params" title="Engine parameters">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="8" cy="8" r="3"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41"/>
+      </svg>
+      <span class="dock-label">Engine</span>
+    </button>
+    <button class="dock-icon" data-drawer="help" title="Help">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="8" cy="8" r="6"/><path d="M6 6a2 2 0 0 1 4 0c0 1.5-2 1.5-2 3"/><circle cx="8" cy="12" r="0.5" fill="currentColor"/>
+      </svg>
+      <span class="dock-label">Help</span>
+    </button>
+  </div>
+
+  <!-- Drawer panels (stack on right side, left of dock) -->
+  <div class="drawer-stack" id="drawer-stack">
+    <!-- Training drawer -->
+    <div class="drawer hidden" id="drawer-training" data-drawer="training">
+      <div class="drawer-header">
+        <span>Training</span>
+        <button class="drawer-close" data-drawer="training">&times;</button>
       </div>
-      <div class="pill-toggle pill-toggle-sm" id="output-toggle-float">
-        <button class="pill-opt active" data-mode="visual">Visual</button>
-        <button class="pill-opt" data-mode="synth">Synth</button>
+      <div class="drawer-body">
+        <div class="action-row" id="examples-actions">
+          <button class="action-btn" id="btn-add-example">Add Example</button>
+          <button class="action-btn accent" id="btn-train">Train</button>
+          <button class="action-btn dim" id="btn-clear-examples">Clear Ex</button>
+          <button class="action-btn dim" id="btn-clear">Clear All</button>
+          <button class="action-btn dim" id="btn-randomize">Randomize</button>
+        </div>
+        <div class="preset-row" id="preset-row">
+          <span class="preset-label">Presets</span>
+          <button class="preset-chip" data-preset="calm-to-chaotic">Calm/Chaos</button>
+          <button class="preset-chip" data-preset="rainbow-sweep">Rainbow</button>
+          <button class="preset-chip" data-preset="vortex">Vortex</button>
+          <button class="preset-chip" data-preset="spiral">Spiral</button>
+          <button class="preset-chip" data-preset="embers">Embers</button>
+        </div>
+        <div class="loss-section">
+          <label>Loss History</label>
+          <canvas id="loss-canvas" width="280" height="80"></canvas>
+        </div>
       </div>
-      <button class="float-btn accent" id="btn-train-bar" title="Train on examples">Train</button>
-      <button class="float-btn" id="btn-randomize-bar" title="Randomize weights">Randomize</button>
-      <button class="float-btn" id="btn-clear-examples-bar" title="Clear examples">Clear Ex</button>
-      <button class="follow-pill" id="follow-pill" title="Toggle follow mode">Follow</button>
-      <button class="osc-pill" id="osc-pill" title="Connect OSC output">OSC</button>
-      <button class="chevron-btn" id="chevron-btn" title="Expand panel">&#9650;</button>
     </div>
 
-    <!-- Status line -->
-    <div class="sheet-status" id="sheet-status">
-      <span id="status-text">0 examples &middot; untrained</span>
+    <!-- Mode drawer -->
+    <div class="drawer hidden" id="drawer-mode" data-drawer="mode">
+      <div class="drawer-header">
+        <span>Mode</span>
+        <button class="drawer-close" data-drawer="mode">&times;</button>
+      </div>
+      <div class="drawer-body">
+        <div class="mode-group">
+          <span class="mode-label">Input</span>
+          <div class="pill-toggle pill-toggle-sm" id="input-toggle">
+            <button class="pill-opt active" data-input="joystick">Joystick</button>
+            <button class="pill-opt" data-input="hands">Hands</button>
+          </div>
+        </div>
+        <div class="mode-group">
+          <span class="mode-label">Output</span>
+          <div class="pill-toggle pill-toggle-sm" id="output-toggle-float">
+            <button class="pill-opt active" data-mode="visual">Visual</button>
+            <button class="pill-opt" data-mode="synth">Synth</button>
+            <button class="pill-opt" data-mode="midi-cc">MIDI CC</button>
+          </div>
+        </div>
+        <div class="mode-group">
+          <button class="follow-pill" id="follow-pill" title="Toggle follow mode">Follow</button>
+        </div>
+      </div>
     </div>
 
-    <!-- Sheet content -->
-    <div class="sheet-content" id="sheet-content">
-      <!-- Examples mode actions -->
-      <div class="action-row" id="examples-actions">
-        <button class="action-btn" id="btn-add-example">Add Example</button>
-        <button class="action-btn accent" id="btn-train">Train</button>
-        <button class="action-btn dim" id="btn-clear-examples">Clear Examples</button>
-        <button class="action-btn dim" id="btn-clear">Clear All</button>
-        <button class="action-btn dim" id="btn-randomize">Randomize</button>
+    <!-- Synth drawer -->
+    <div class="drawer hidden" id="drawer-synth" data-drawer="synth">
+      <div class="drawer-header">
+        <span>Synth</span>
+        <button class="drawer-close" data-drawer="synth">&times;</button>
       </div>
-
-      <!-- Preset palette -->
-      <div class="preset-row" id="preset-row">
-        <span class="preset-label">Presets</span>
-        <button class="preset-chip" data-preset="calm-to-chaotic">Calm/Chaos</button>
-        <button class="preset-chip" data-preset="rainbow-sweep">Rainbow</button>
-        <button class="preset-chip" data-preset="vortex">Vortex</button>
-        <button class="preset-chip" data-preset="spiral">Spiral</button>
-        <button class="preset-chip" data-preset="embers">Embers</button>
-      </div>
-
-      <!-- Synth controls -->
-      <div class="synth-panel hidden" id="synth-panel">
+      <div class="drawer-body" id="synth-panel">
         <div class="synth-row">
           <button class="action-btn accent" id="synth-start">Start Audio</button>
           <span class="synth-status" id="synth-status">Stopped</span>
@@ -190,31 +259,43 @@
         <div class="synth-row" id="midi-status-row" style="display:none">
           <span class="synth-status" id="midi-status"></span>
         </div>
-        <div class="synth-row osc-row-panel" id="osc-row">
-          <label>OSC Output</label>
-          <button class="action-btn" id="osc-toggle">Connect</button>
-          <span class="synth-status" id="osc-status">Off</span>
+      </div>
+    </div>
+
+    <!-- MIDI CC drawer (param management) -->
+    <div class="drawer hidden" id="drawer-midi-cc" data-drawer="midi-cc">
+      <div class="drawer-header">
+        <span>MIDI CC</span>
+        <button class="drawer-close" data-drawer="midi-cc">&times;</button>
+      </div>
+      <div class="drawer-body" id="midi-cc-panel">
+        <div class="synth-row">
+          <label>Parameters</label>
+          <span id="midi-cc-count">8</span>
+          <button class="action-btn" id="midi-cc-add" title="Add CC parameter">+</button>
+          <button class="action-btn" id="midi-cc-remove" title="Remove last CC parameter">&minus;</button>
         </div>
+        <div class="synth-row">
+          <button class="action-btn" id="midi-cc-import">Import</button>
+          <button class="action-btn" id="midi-cc-export">Export</button>
+        </div>
+        <div id="midi-cc-param-list"></div>
       </div>
+    </div>
 
-      <!-- Loss plot -->
-      <div class="loss-section">
-        <label>Loss History</label>
-        <canvas id="loss-canvas" width="280" height="80"></canvas>
+    <!-- Params drawer (NISPS engine tuning) -->
+    <div class="drawer hidden" id="drawer-params" data-drawer="params">
+      <div class="drawer-header">
+        <span>Engine</span>
+        <button class="drawer-close" data-drawer="params">&times;</button>
+      </div>
+      <div class="drawer-body">
+        <div class="engine-params" id="engine-params"></div>
       </div>
-
-      <!-- Advanced: raw param sliders -->
-      <details class="advanced-section">
-        <summary>Advanced: Raw Parameters</summary>
-        <div class="raw-params" id="raw-params"></div>
-      </details>
     </div>
   </div>
 
-  <!-- Help button -->
-  <button class="help-btn" id="help-btn" title="Help">?</button>
-
-  <!-- Help modal -->
+  <!-- Help modal (unchanged) -->
   <div class="help-overlay hidden" id="help-overlay">
     <div class="help-modal" id="help-modal">
       <button class="help-close" id="help-close">&times;</button>
@@ -243,7 +324,7 @@
           <li><strong>Train</strong> fits the network to your saved examples</li>
           <li><strong>+ / &minus; feedback</strong> nudges the network: + reinforces the current mapping, &minus; adds exploration noise</li>
           <li>Switch between <strong>Visual</strong> (particle flow field) and <strong>Synth</strong> (C15 synthesizer) output modes</li>
-          <li>The <strong>heatmap bar</strong> at the top shows all output parameters at a glance</li>
+          <li>The <strong>heatmap bar</strong> at the top shows all output parameters at a glance &mdash; drag any bar to set its value</li>
         </ul>
       </div>
 
@@ -253,10 +334,13 @@
           <tr><th colspan="2">Touch / Mouse</th></tr>
           <tr><td>Drag joystick</td><td>Move through parameter space</td></tr>
           <tr><td>+ / &minus; buttons</td><td>Positive / negative feedback</td></tr>
-          <tr><td>Bottom bar</td><td>Train, Randomize, Clear, Follow mode</td></tr>
+          <tr><td>Undo (between +/&minus;)</td><td>Revert last feedback action</td></tr>
+          <tr><td>Drag heatmap bar</td><td>Set parameter value directly</td></tr>
+          <tr><td>Right-side dock</td><td>Training, Mode, Synth, Params drawers</td></tr>
           <tr><th colspan="2">Keyboard</th></tr>
           <tr><td><kbd>1</kbd></td><td>Negative feedback (&minus;)</td></tr>
           <tr><td><kbd>2</kbd></td><td>Positive feedback (+)</td></tr>
+          <tr><td><kbd>Z</kbd></td><td>Undo</td></tr>
           <tr><th colspan="2">Gamepad (Steam Deck, Xbox, etc.)</th></tr>
           <tr><td>Left stick</td><td>Joystick control</td></tr>
           <tr><td>LB (left bumper)</td><td>Negative feedback</td></tr>
@@ -269,7 +353,7 @@
 
       <div class="help-section">
         <h3>Hand Tracking</h3>
-        <p>Toggle to <strong>Hands</strong> mode in the bottom bar to use your webcam for input.</p>
+        <p>Toggle to <strong>Hands</strong> mode in the Mode drawer to use your webcam for input.</p>
         <ul>
           <li><strong>Right hand</strong> controls parameters &mdash; palm position, finger curls, spread, rotation, and pinch map to 14 input dimensions</li>
           <li><strong>Left hand</strong> gives feedback via gestures:</li>
@@ -282,16 +366,6 @@
         </ul>
       </div>
 
-      <div class="help-section">
-        <h3>Tips</h3>
-        <ul>
-          <li>Start with <strong>Randomize</strong> a few times to hear/see different mappings, then use feedback to refine</li>
-          <li>Use <strong>Follow</strong> mode to let the joystick wander automatically while you give feedback</li>
-          <li>In Synth mode, press the <strong>play button</strong> (top left, pulses orange when audio is off) to start audio, then explore</li>
-          <li>Tap a heatmap cell to see which parameter it controls</li>
-        </ul>
-      </div>
-
       <div class="help-section">
         <h3>Synth Controls</h3>
         <ul>
@@ -299,84 +373,16 @@
           <li><strong>Hover any bar</strong> in the synth visualizer to see parameter name, current value, range, and curve</li>
           <li><strong>Hover a group name</strong> (e.g. "Env A", "Osc B") at the top to open its control drawer:</li>
           <ul>
-            <li><strong>Group curve</strong> &mdash; drag the top graph vertically to shape the response curve for the whole group (adjusts all param curves relatively)</li>
-            <li><strong>Per-param curve</strong> &mdash; drag each small graph to shape that parameter individually (down&nbsp;=&nbsp;exponential, up&nbsp;=&nbsp;logarithmic)</li>
+            <li><strong>Group curve</strong> &mdash; drag the top graph vertically to shape the response curve for the whole group</li>
+            <li><strong>Per-param curve</strong> &mdash; drag each small graph to shape that parameter individually</li>
             <li><strong>Min/Max range</strong> &mdash; dual-thumb slider constrains the parameter's output range</li>
-            <li><strong>Mute (M)</strong> &mdash; removes the parameter from NISPS control; its bar disappears and you get a manual value slider instead</li>
+            <li><strong>Mute (M)</strong> &mdash; removes the parameter from NISPS control</li>
           </ul>
-          <li><strong>MIDI input</strong> &mdash; connect a MIDI controller and it will be detected automatically; MIDI notes trigger the synth directly</li>
-          <li><strong>Arpeggiator</strong> &mdash; expand the bottom bar to access the built-in arpeggiator with tempo, octave range, offset, and chord progression controls; press Pause to stop it</li>
+          <li><strong>MIDI input</strong> &mdash; connect a MIDI controller and it will be detected automatically</li>
+          <li><strong>Arpeggiator</strong> &mdash; open the Synth drawer in the dock to access tempo, octave range, offset, and chord progression controls</li>
         </ul>
       </div>
 
-      <div class="help-section">
-        <h3>OSC Output</h3>
-        <p>Send NISPS parameters to any OSC-capable software (SuperCollider, Max/MSP, Pure Data, TouchDesigner, Ableton, etc.) via a small bridge script that runs on your computer.</p>
-
-        <div class="help-osc-steps">
-          <p><strong>1. Download the bridge</strong></p>
-          <div class="help-download-row">
-            <button class="help-download-btn" id="osc-download-bin">Download for <span id="osc-platform-name">your OS</span></button>
-            <button class="help-download-btn help-download-alt" id="osc-download-src">Source (.ts)</button>
-          </div>
-          <p class="help-dim">Binary is standalone, no runtime needed. Source requires <a href="https://deno.land" target="_blank" rel="noopener">Deno</a> or <a href="https://nodejs.org" target="_blank" rel="noopener">Node.js</a>.</p>
-
-          <p><strong>2. Run</strong></p>
-          <pre class="help-code" id="osc-run-instructions">./nisps-osc-bridge</pre>
-
-          <p><strong>3. Connect</strong></p>
-          <p>Click the <strong>OSC</strong> button in the bottom bar (visible in all modes). The dot turns green when connected. You can also find a Connect button in the synth panel when expanded.</p>
-        </div>
-
-        <p style="margin-top:10px"><strong>Configuration</strong></p>
-        <table class="help-keys">
-          <tr><td><kbd>--osc-port 9000</kbd></td><td>Target port (default: 57120 / SuperCollider)</td></tr>
-          <tr><td><kbd>--osc-host 192.168.1.5</kbd></td><td>Target IP (default: 127.0.0.1)</td></tr>
-          <tr><td><kbd>--osc-prefix /my</kbd></td><td>Address prefix (default: /nisps)</td></tr>
-          <tr><td><kbd>--ws-port 8000</kbd></td><td>WebSocket listen port (default: 8765)</td></tr>
-          <tr><td><kbd>--bundle</kbd></td><td>Send OSC bundles instead of individual messages</td></tr>
-        </table>
-
-        <p style="margin-top:10px"><strong>OSC addresses</strong></p>
-        <p>Each parameter is sent as <code>/nisps/&lt;Param_Name&gt; &lt;float 0&ndash;1&gt;</code>. All 126 synth parameters are available. Values reflect your current preset, curves, and tame settings. Examples:</p>
-        <pre class="help-code">/nisps/Env_A_Att 0.35
-/nisps/SVF_Flt_Cut 0.72
-/nisps/Reverb_Mix 0.15</pre>
-
-        <details class="help-details">
-          <summary>SuperCollider example</summary>
-          <pre class="help-code">// Listen for all NISPS params
-OSCdef(\nisps, { |msg, time|
-    msg.postln;
-}, '/nisps/*');
-
-// Map a specific param to a synth
-OSCdef(\cutoff, { |msg|
-    ~synth.set(\freq, msg[1].linexp(0, 1, 200, 8000));
-}, '/nisps/SVF_Flt_Cut');</pre>
-        </details>
-
-        <details class="help-details">
-          <summary>Pure Data example</summary>
-          <pre class="help-code">[netreceive -u -b 57120]
-|
-[oscparse]
-|
-[route /nisps]
-|
-[route /Env_A_Att /SVF_Flt_Cut ...]</pre>
-        </details>
-
-        <details class="help-details">
-          <summary>Max/MSP example</summary>
-          <pre class="help-code">[udpreceive 57120]
-|
-[OSC-route /nisps/Env_A_Att]
-|
-[scale 0. 1. 200. 8000.]</pre>
-        </details>
-      </div>
-
       <button class="help-got-it" id="help-got-it">Got it</button>
     </div>
   </div>
diff --git a/playground/css/a-immersive.css b/playground/css/a-immersive.css
index 3d3aeae..d41e320 100644
--- a/playground/css/a-immersive.css
+++ b/playground/css/a-immersive.css
@@ -1,5 +1,5 @@
 /* NISPS Immersive — Design A */
-/* Full-viewport canvas with floating translucent overlays */
+/* Full-viewport canvas with floating overlays + dock/drawer UI */
 
 * {
   margin: 0;
@@ -20,6 +20,8 @@
   --radius: 12px;
   --radius-sm: 8px;
   --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --dock-width: 48px;
+  --dock-gap: 8px;
 }
 
 html, body {
@@ -63,18 +65,6 @@ html, body {
   color: var(--accent);
 }
 
-/* ---- Output mode toggle (floating) ---- */
-.pill-toggle-sm {
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.pill-toggle-sm .pill-opt {
-  padding: 3px 10px;
-  font-size: 11px;
-}
-
 /* ---- Fullscreen canvas ---- */
 #vis-canvas,
 #synth-vis-canvas {
@@ -98,26 +88,6 @@ html, body {
   display: none;
 }
 
-/* ---- ShapeSeq container (synth mode, feature-flagged) ---- */
-.shapeseq-container {
-  position: fixed;
-  inset: 0;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  background: #0d0d0d;
-  overflow: hidden;
-}
-.shapeseq-container.hidden { display: none; }
-#shapeseq-viz { width: 100%; flex: 0 0 45%; min-height: 0; }
-.shapeseq-chain-wrap {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-  padding-bottom: calc(120px + var(--safe-bottom, 0px));
-}
-
 /* ---- Glass mixin ---- */
 .glass {
   background: var(--glass-bg);
@@ -126,7 +96,7 @@ html, body {
   border: 1px solid var(--glass-border);
 }
 
-/* ---- Heatmap strip (top) ---- */
+/* ---- Heatmap strip (top) — interactive bars ---- */
 .heatmap-strip {
   position: fixed;
   top: 0;
@@ -163,10 +133,15 @@ html, body {
   overflow: hidden;
 }
 
+.heatmap-cell.dragging {
+  cursor: ew-resize;
+}
+
 .heatmap-cell-bar {
   height: 100%;
   border-radius: 0 1px 1px 0;
   transition: width 0.15s;
+  pointer-events: none;
 }
 
 .heatmap-cell:hover .heatmap-cell-bar {
@@ -196,7 +171,7 @@ html, body {
 /* ---- Floating joystick with integrated map ---- */
 .joystick-container {
   position: fixed;
-  bottom: 136px;
+  bottom: 100px;
   left: 24px;
   width: 160px;
   height: 160px;
@@ -284,7 +259,7 @@ html, body {
 /* ---- Hand tracking PIP ---- */
 .hand-pip {
   position: fixed;
-  bottom: 136px;
+  bottom: 100px;
   left: 24px;
   width: 180px;
   height: 135px;
@@ -302,7 +277,6 @@ html, body {
 }
 
 .hand-pip video {
-  /* Hidden — only used as MediaPipe source, not displayed */
   position: absolute;
   width: 1px;
   height: 1px;
@@ -387,7 +361,7 @@ html, body {
 .dev-panel {
   position: fixed;
   top: 60px;
-  right: 16px;
+  right: calc(var(--dock-width) + 24px);
   width: 220px;
   z-index: 90;
   background: rgba(10, 10, 10, 0.92);
@@ -535,14 +509,17 @@ html, body {
   display: block;
 }
 
-/* ---- RL floating buttons ---- */
+/* ---- RL floating buttons (with undo) ---- */
 .rl-buttons {
   position: fixed;
-  bottom: 92px; /* just above 88px collapsed sheet */
+  bottom: 36px;
   left: 50%;
   transform: translateX(-50%);
-  display: flex;
-  gap: 32px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 12px;
+  justify-items: center;
   z-index: 45;
   transition: opacity 0.3s;
 }
@@ -620,200 +597,246 @@ html, body {
   100% { transform: scale(1); }
 }
 
-/* ---- Floating mode bar (sticky inside sheet) ---- */
-.floating-bar {
-  position: sticky;
-  top: 0;
-  z-index: 45;
+/* Undo button — small, between/below the +/- */
+.rl-undo-btn {
+  grid-column: 1 / -1;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-dim);
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  padding: 6px 12px;
-  background: rgba(13, 13, 13, 0.85);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid var(--glass-border);
-}
-
-/* Float button (randomize in floating bar) */
-.float-btn {
-  padding: 4px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-dim);
-  font-size: 12px;
-  cursor: pointer;
+  padding: 0;
   transition: all 0.15s;
+  opacity: 0.4;
 }
 
-.float-btn:active {
-  background: rgba(255, 106, 0, 0.15);
-  color: var(--accent);
-}
-
-.float-btn.accent {
-  border-color: rgba(255, 106, 0, 0.3);
-  color: var(--accent);
-}
-
-.follow-pill {
-  padding: 4px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-dim);
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.follow-pill.active {
-  background: rgba(255, 106, 0, 0.15);
-  border-color: rgba(255, 106, 0, 0.4);
-  color: var(--accent);
-}
-
-.osc-pill {
-  padding: 4px 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text-dim);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-  cursor: pointer;
-  transition: all 0.15s;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-/* Dot indicator before text */
-.osc-pill::before {
-  content: '';
-  flex-shrink: 0;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  transition: all 0.15s;
-}
-
-.osc-pill:hover {
+.rl-undo-btn:hover {
+  opacity: 0.8;
   border-color: rgba(255, 255, 255, 0.25);
   color: var(--text);
 }
 
-.osc-pill:hover::before {
-  background: rgba(255, 255, 255, 0.4);
+.rl-undo-btn:active {
+  transform: scale(0.9);
+  opacity: 1;
 }
 
-.osc-pill.connected {
-  background: rgba(0, 200, 120, 0.12);
-  border-color: rgba(0, 200, 120, 0.35);
-  color: #00c878;
+.rl-undo-btn.has-undo {
+  opacity: 0.7;
 }
 
-.osc-pill.connected::before {
-  background: #00c878;
-  box-shadow: 0 0 4px rgba(0, 200, 120, 0.5);
+.rl-undo-btn.flash {
+  animation: rl-flash 0.25s ease-out;
 }
 
-.osc-pill.connecting {
-  background: rgba(255, 200, 0, 0.08);
-  border-color: rgba(255, 200, 0, 0.25);
-  color: #ffc800;
+/* ---- Status line (floating, minimal) ---- */
+.status-line {
+  position: fixed;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px 12px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.4);
+  font-size: 10px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 40;
 }
 
-.osc-pill.connecting::before {
-  background: #ffc800;
-  animation: osc-pulse 1s ease-in-out infinite;
+/* ---- Right-side dock (macOS-style) ---- */
+.dock {
+  position: fixed;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  z-index: 50;
+  padding: 8px 4px;
+  border-radius: 16px;
+  background: rgba(13, 13, 13, 0.5);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-@keyframes osc-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
+.dock-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  padding: 0;
+  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  position: relative;
 }
 
-.chevron-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: 1px solid var(--glass-border);
+.dock-label {
+  font-size: 7px;
+  letter-spacing: 0.3px;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+  line-height: 1;
+}
+
+/* macOS magnification effect */
+.dock-icon:hover {
+  transform: scale(1.35);
+  color: var(--text);
   background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.08);
+  z-index: 2;
+}
+
+.dock-icon:hover .dock-label {
+  opacity: 1;
+}
+
+/* Adjacent icons scale slightly on hover (approximation) */
+.dock-icon:hover + .dock-icon {
+  transform: scale(1.12);
+}
+
+.dock-icon:has(+ .dock-icon:hover) {
+  transform: scale(1.12);
+}
+
+/* Active state (drawer is open) */
+.dock-icon.active {
+  color: var(--accent);
+  background: rgba(255, 106, 0, 0.08);
+  border-color: rgba(255, 106, 0, 0.2);
+}
+
+.dock-icon.active .dock-label {
+  opacity: 0.8;
+  color: var(--accent);
+}
+
+.dock-icon:active {
+  transform: scale(0.95);
+}
+
+/* ---- Drawer stack (right side, left of dock) ---- */
+.drawer-stack {
+  position: fixed;
+  right: calc(var(--dock-width) + 16px);
+  top: 28px;
+  bottom: 28px;
+  width: 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 45;
+  pointer-events: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+
+.drawer-stack::-webkit-scrollbar {
+  display: none;
+}
+
+/* Individual drawer panel */
+.drawer {
+  pointer-events: auto;
+  width: 100%;
+  max-height: 400px;
+  overflow-y: auto;
+  background: rgba(13, 13, 13, 0.88);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-sm);
+  animation: drawerSlideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  flex-shrink: 0;
+}
+
+.drawer.hidden {
+  display: none;
+}
+
+@keyframes drawerSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.drawer::-webkit-scrollbar {
+  width: 3px;
+}
+
+.drawer::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.drawer::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.drawer-close {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: transparent;
   color: var(--text-dim);
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  padding: 0;
+  line-height: 1;
+  transition: all 0.15s;
 }
 
-.chevron-btn:active {
-  background: rgba(255, 255, 255, 0.12);
+.drawer-close:hover {
+  border-color: var(--accent);
+  color: var(--accent);
 }
 
-.chevron-btn.open {
-  transform: rotate(180deg);
+.drawer-body {
+  padding: 8px 10px 10px;
 }
 
-/* ---- Bottom sheet ---- */
-.bottom-sheet {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 40;
-  background: rgba(13, 13, 13, 0.75);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-top: 1px solid var(--glass-border);
-  border-radius: 0;
-  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
-  height: 88px;
-  overflow: hidden;
-  padding-bottom: var(--safe-bottom);
-  will-change: height;
-}
-
-.bottom-sheet.expanded {
-  height: 60vh;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Sheet status line */
-.sheet-status {
-  padding: 8px 16px;
-  font-size: 12px;
-  color: var(--text-dim);
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Sheet content */
-.sheet-content {
-  padding: 0 16px 16px;
-}
-
-/* Mode row */
-.mode-row {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 12px;
-}
-
-/* Pill toggle */
+/* ---- Pill toggle (used in mode drawer) ---- */
 .pill-toggle {
   display: inline-flex;
   border-radius: 6px;
@@ -822,6 +845,17 @@ html, body {
   background: rgba(255, 255, 255, 0.04);
 }
 
+.pill-toggle-sm {
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.pill-toggle-sm .pill-opt {
+  padding: 3px 10px;
+  font-size: 11px;
+}
+
 .pill-opt {
   padding: 6px 18px;
   background: none;
@@ -838,22 +872,56 @@ html, body {
   font-weight: 600;
 }
 
-/* Action buttons row */
+/* Mode group row */
+.mode-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.mode-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 48px;
+}
+
+/* Follow pill */
+.follow-pill {
+  padding: 4px 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.follow-pill.active {
+  background: rgba(255, 106, 0, 0.15);
+  border-color: rgba(255, 106, 0, 0.4);
+  color: var(--accent);
+}
+
+/* ---- Action buttons (inside drawers) ---- */
 .action-row {
   display: flex;
-  gap: 8px;
+  gap: 6px;
   flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 12px;
+  justify-content: flex-start;
+  margin-bottom: 8px;
 }
 
 .action-btn {
-  padding: 8px 16px;
-  border-radius: 6px;
+  padding: 5px 10px;
+  border-radius: 5px;
   border: 1px solid var(--glass-border);
   background: rgba(255, 255, 255, 0.06);
   color: var(--text);
-  font-size: 13px;
+  font-size: 11px;
   cursor: pointer;
   transition: all 0.15s;
   touch-action: manipulation;
@@ -890,28 +958,27 @@ html, body {
 /* Preset row */
 .preset-row {
   display: flex;
-  gap: 6px;
+  gap: 4px;
   align-items: center;
   flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .preset-label {
-  font-size: 11px;
+  font-size: 9px;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  margin-right: 4px;
+  margin-right: 2px;
 }
 
 .preset-chip {
-  padding: 4px 12px;
-  border-radius: 6px;
+  padding: 3px 8px;
+  border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.04);
   color: var(--text-dim);
-  font-size: 12px;
+  font-size: 10px;
   cursor: pointer;
   transition: all 0.15s;
   touch-action: manipulation;
@@ -922,114 +989,90 @@ html, body {
   color: var(--accent);
 }
 
-/* Synth panel */
-.synth-panel {
-  margin-bottom: 16px;
-}
-
-.synth-panel.hidden {
-  display: none;
-}
-
+/* Synth panel (inside synth drawer) */
 .synth-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 
 .synth-row label {
-  font-size: 12px;
+  font-size: 10px;
   color: var(--text-dim);
-  min-width: 80px;
+  min-width: 60px;
 }
 
 .synth-row input[type="range"] {
   flex: 1;
   accent-color: var(--accent);
-  height: 4px;
+  height: 3px;
 }
 
 .synth-row select {
   flex: 1;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid var(--glass-border);
-  border-radius: 6px;
+  border-radius: 5px;
   color: var(--text);
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-/* OSC row in synth panel — visual separator from arp controls above */
-.osc-row-panel {
-  margin-top: 6px;
-  padding-top: 10px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 3px 6px;
+  font-size: 10px;
 }
 
 .synth-status {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-dim);
 }
 
 /* Loss section */
 .loss-section {
-  margin-bottom: 12px;
+  margin-bottom: 4px;
 }
 
 .loss-section label {
-  font-size: 11px;
+  font-size: 9px;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   display: block;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
 }
 
 #loss-canvas {
   width: 100%;
-  height: 80px;
+  height: 60px;
   border-radius: var(--radius-sm);
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--glass-border);
 }
 
-/* Advanced section */
-.advanced-section {
-  margin-top: 8px;
-}
-
-.advanced-section summary {
-  font-size: 12px;
-  color: var(--text-dim);
-  cursor: pointer;
-  padding: 6px 0;
-}
-
+/* Raw parameters (inside params drawer) */
 .raw-params {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 4px;
+  gap: 3px;
   max-height: 300px;
   overflow-y: auto;
-  padding: 8px 0;
+  padding: 4px 0;
 }
 
 .raw-param {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 11px;
+  gap: 6px;
+  font-size: 10px;
+  position: relative;
 }
 
 .raw-param-label {
-  width: 70px;
+  width: 56px;
   color: var(--text-dim);
   text-align: right;
   flex-shrink: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 9px;
 }
 
 .raw-param input[type="range"] {
@@ -1039,18 +1082,15 @@ html, body {
 }
 
 .raw-param-val {
-  width: 36px;
+  width: 32px;
   color: var(--text-dim);
   text-align: left;
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
+  font-size: 9px;
 }
 
 /* Tooltip for raw param sliders */
-.raw-param {
-  position: relative;
-}
-
 .raw-param[data-tooltip]:hover::after {
   content: attr(data-tooltip);
   position: absolute;
@@ -1068,6 +1108,48 @@ html, body {
   z-index: 50;
 }
 
+/* ---- Engine params ---- */
+.engine-params {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.engine-param {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+}
+
+.engine-param-label {
+  width: 64px;
+  color: var(--text-dim);
+  text-align: right;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 9px;
+  cursor: help;
+}
+
+.engine-param input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent);
+  height: 3px;
+}
+
+.engine-param-val {
+  width: 42px;
+  color: var(--text-dim);
+  text-align: left;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  font-size: 9px;
+}
+
 /* ---- Synth quick controls (play button next to back) ---- */
 .synth-quick-controls {
   position: fixed;
@@ -1465,48 +1547,188 @@ html, body {
   border-radius: 2px;
 }
 
-/* ---- Scrollbar styling ---- */
-.bottom-sheet::-webkit-scrollbar {
-  width: 4px;
+/* ---- Heatmap Param Popup ---- */
+.param-popup {
+  position: fixed;
+  z-index: 50;
+  width: 260px;
+  background: rgba(13, 13, 13, 0.92);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-sm);
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 0.15s, transform 0.15s;
 }
 
-.bottom-sheet::-webkit-scrollbar-track {
+.param-popup.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.pp-header {
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.pp-body {
+  padding: 6px 10px 8px;
+}
+
+.pp-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  min-height: 28px;
+}
+
+.pp-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 38px;
+  flex-shrink: 0;
+}
+
+.pp-curve-canvas {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+}
+
+.pp-val {
+  font-size: 10px;
+  color: var(--text-dim);
+  min-width: 55px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.pp-range-wrap {
+  position: relative;
+  flex: 1;
+  height: 16px;
+  min-width: 0;
+}
+
+.pp-range-wrap .gd-range-fill {
+  position: absolute;
+  top: 50%;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 2px;
+  transform: translateY(-50%);
+  opacity: 0.6;
+}
+
+.pp-range-wrap .gd-range-input {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
   background: transparent;
+  cursor: pointer;
+  pointer-events: none;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
-.bottom-sheet::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+.pp-range-wrap .gd-range-input::-webkit-slider-runnable-track {
+  height: 3px;
+  background: transparent;
   border-radius: 2px;
 }
 
-/* ---- Help button ---- */
-.help-btn {
-  position: fixed;
-  bottom: 96px;
-  right: 12px;
-  z-index: 45;
-  width: 32px;
-  height: 32px;
+.pp-range-wrap .gd-range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: auto;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
-  border: 1px solid var(--glass-border);
-  background: var(--glass-bg);
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
-  color: var(--text-dim);
-  font-size: 16px;
-  font-weight: 700;
+  border: 1px solid rgba(255, 255, 255, 0.2);
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.15s;
-  padding: 0;
-  line-height: 1;
+  margin-top: -3.5px;
 }
 
-.help-btn:hover, .help-btn:active {
-  border-color: var(--accent);
-  color: var(--accent);
+.pp-range-wrap .gd-range-min::-webkit-slider-thumb {
+  background: #4488ff;
+}
+
+.pp-range-wrap .gd-range-max::-webkit-slider-thumb {
+  background: #ff6a00;
+}
+
+.pp-freeze-row {
+  padding-top: 4px;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.pp-freeze-btn {
+  padding: 3px 10px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.1s;
+}
+
+.pp-freeze-btn:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.pp-freeze-btn.frozen {
+  background: rgba(80, 160, 255, 0.2);
+  border-color: rgba(80, 160, 255, 0.5);
+  color: #50a0ff;
+}
+
+.pp-val-slider {
+  flex: 1;
+  min-width: 0;
+  accent-color: #50a0ff;
+  height: 16px;
+}
+
+/* Frozen heatmap cell indicator */
+.heatmap-cell.heatmap-cell-frozen .heatmap-cell-bar {
+  opacity: 0.4;
+}
+
+.heatmap-cell.heatmap-cell-frozen::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 2px,
+    rgba(80, 160, 255, 0.15) 2px,
+    rgba(80, 160, 255, 0.15) 4px
+  );
+  pointer-events: none;
 }
 
 /* ---- Help modal ---- */
@@ -1675,118 +1897,6 @@ html, body {
   background: rgba(255, 106, 0, 0.25);
 }
 
-/* Help OSC section */
-.help-osc-steps {
-  margin: 8px 0;
-}
-
-.help-osc-steps p {
-  margin: 10px 0 4px;
-  font-size: 12px;
-}
-
-.help-download-row {
-  display: flex;
-  gap: 8px;
-  margin: 4px 0;
-  flex-wrap: wrap;
-}
-
-.help-download-btn {
-  display: inline-block;
-  padding: 8px 20px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 106, 0, 0.4);
-  background: rgba(255, 106, 0, 0.12);
-  color: var(--accent);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.help-download-alt {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: var(--glass-border);
-  color: var(--text-dim);
-  font-weight: 500;
-}
-
-.help-download-alt:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: var(--text-dim);
-  color: var(--text);
-}
-
-.help-download-btn:hover {
-  background: rgba(255, 106, 0, 0.25);
-  border-color: var(--accent);
-}
-
-.help-download-btn:active {
-  background: rgba(255, 106, 0, 0.35);
-}
-
-.help-dim {
-  font-size: 11px !important;
-  color: var(--text-dim) !important;
-  margin: 4px 0 8px !important;
-}
-
-.help-dim a {
-  color: var(--accent);
-  text-decoration: none;
-}
-
-.help-dim a:hover {
-  text-decoration: underline;
-}
-
-.help-code {
-  display: block;
-  padding: 8px 10px;
-  margin: 4px 0 8px;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--text);
-  white-space: pre;
-  overflow-x: auto;
-}
-
-.help-section code {
-  padding: 1px 5px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.06);
-  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 11px;
-}
-
-.help-details {
-  margin: 6px 0;
-}
-
-.help-details summary {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text);
-  cursor: pointer;
-  padding: 4px 0;
-  transition: color 0.15s;
-}
-
-.help-details summary:hover {
-  color: var(--accent);
-}
-
-.help-details[open] summary {
-  color: var(--accent);
-  margin-bottom: 2px;
-}
-
 /* Help modal scrollbar */
 .help-modal::-webkit-scrollbar {
   width: 4px;
@@ -1806,7 +1916,7 @@ html, body {
   .joystick-container {
     width: 180px;
     height: 180px;
-    bottom: 156px;
+    bottom: 120px;
     left: 32px;
   }
 
@@ -1818,26 +1928,96 @@ html, body {
   .hand-pip {
     width: 200px;
     height: 150px;
-    bottom: 156px;
+    bottom: 120px;
     left: 32px;
   }
 
-  .rl-buttons {
-    bottom: 92px;
-    gap: 32px;
-  }
-
   .rl-btn {
     width: 72px;
     height: 72px;
     font-size: 32px;
   }
-}
 
-@media (min-width: 1024px) {
-  .bottom-sheet {
-    max-width: 600px;
-    left: 50%;
-    transform: translateX(-50%);
+  .drawer-stack {
+    width: 280px;
   }
 }
+
+@media (max-width: 480px) {
+  .dock {
+    right: 4px;
+    padding: 6px 2px;
+  }
+
+  .dock-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  .drawer-stack {
+    right: calc(var(--dock-width) + 4px);
+    width: 220px;
+  }
+
+  .rl-btn {
+    width: 56px;
+    height: 56px;
+  }
+
+  .rl-icon {
+    font-size: 24px;
+  }
+}
+
+/* ---- MIDI CC mode ---- */
+.midi-cc-quick-controls {
+  position: fixed;
+  top: 45px;
+  left: 52px;
+  z-index: 30;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.midi-cc-quick-controls .preset-select {
+  max-width: 160px;
+}
+
+.midi-cc-param-row {
+  padding: 4px 8px !important;
+  margin-bottom: 2px;
+}
+
+/* Text/number inputs in param popup (for MIDI CC editing) */
+.pp-text-input,
+.pp-num-input {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  padding: 3px 6px;
+  outline: none;
+  flex: 1;
+}
+
+.pp-text-input:focus,
+.pp-num-input:focus {
+  border-color: rgba(255, 106, 0, 0.4);
+}
+
+.pp-num-input {
+  width: 50px;
+  flex: 0 0 auto;
+}
+
+#midi-cc-count {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8rem;
+  opacity: 0.8;
+  min-width: 20px;
+  text-align: center;
+}
diff --git a/playground/js/a-app.js b/playground/js/a-app.js
index c02ddc6..d5a1e1c 100644
--- a/playground/js/a-app.js
+++ b/playground/js/a-app.js
@@ -6,48 +6,9 @@ import { FlowFieldVisualizer } from './ui/visualizer.js';
 import { C15Bridge } from './synth/c15-bridge.js';
 import { Arpeggiator } from './synth/arpeggiator.js';
 import { MIDIInput } from './synth/midi-input.js';
-import { InputPipeline } from './ui/input-pipeline.js';
-import { initControlSurfaceUI } from './ui/control-surface-ui.js';
-import { JoyMapEnhanced } from './ui/joy-map-enhanced.js';
-
-// Phase 2: Pinning + History
-import { SnapshotStack } from './ui/snapshot-stack.js';
-import { ABCompare } from './ui/ab-compare.js';
-import { RegionPinManager } from './ui/region-pin.js';
-import { ParamPinManager } from './ui/param-pin.js';
-import { initPhase2UI } from './ui/phase2-ui.js';
-
-// Phase 3: Pressure, Auto-Explore, Heatmap
-import { initPhase3UI } from './ui/phase3-ui.js';
-
-// Phase 4: Output Pipeline + Visualization + Polish
-import { OutputPipeline } from './ui/output-pipeline.js';
-import { initPhase4UI } from './ui/phase4-ui.js';
-
-// ---- ShapeSeq (feature-flagged, enable with ?shapeseq=1) ----
-const ENABLE_SHAPESEQ = new URLSearchParams(window.location.search).get('shapeseq') === '1';
-let _shapeSeqImports = null;
-async function getShapeSeqModules() {
-  if (_shapeSeqImports) return _shapeSeqImports;
-  const [seqMod, vizMod, uiMod, busMod] = await Promise.all([
-    import('./shapeseq/sequencer.js'),
-    import('./shapeseq/step-viz.js'),
-    import('./shapeseq/chain-ui.js'),
-    import('./shapeseq/event-bus.js'),
-  ]);
-  _shapeSeqImports = {
-    ShapeSeqEngine: seqMod.ShapeSeqEngine,
-    StepVisualizer: vizMod.StepVisualizer,
-    ChainBuilderUI: uiMod.ChainBuilderUI,
-    getDefaultBus: busMod.getDefaultBus,
-  };
-  return _shapeSeqImports;
-}
-let shapeSeq = null;
-let stepViz = null;
-let chainUI = null;
 import { SYNTH_PARAM_MAP, SYNTH_PARAM_NAMES, SYNTH_PARAM_COLORS, applyCurve, applyGroupOverride } from './synth/param-map.js';
-import { OSCOutput } from './synth/osc-output.js';
+import { MIDIOutput } from './midi/midi-output.js';
+import { loadCCMap, saveCCMap, createCCParam, exportCCMap, importCCMap, CC_NAMES } from './midi/midi-cc-map.js';
 import { GamepadInput } from './ui/gamepad.js';
 import { HandTracker } from './ui/hand-tracker.js';
 import { createDevPanel } from './ui/dev-panel.js';
@@ -59,7 +20,7 @@ const N_HAND_INPUTS = 14;
 const N_INPUTS = N_JOY_INPUTS; // default (joystick)
 const N_VISUAL_OUTPUTS = 20;
 const N_SYNTH_OUTPUTS = SYNTH_PARAM_MAP.length; // 126
-const N_OUTPUTS = N_SYNTH_OUTPUTS; // MLP always produces full output; visual uses first 20
+let N_OUTPUTS = N_SYNTH_OUTPUTS; // Dynamic — changes with output mode
 const STORAGE_KEY = 'nisps-a-immersive';
 
 const VISUAL_PARAM_NAMES = [
@@ -114,36 +75,33 @@ let handTracker = null;
 let visualizer;
 let synthVisualizer;
 let c15 = null;
-let oscOutput = null;
 let arpeggiator = null;
 let midiInput = null;
 
 let outputMode = 'visual';
+
+// ---- MIDI CC state ----
+let midiOutput = null;
+let midiCCMap = loadCCMap();
+// Per-param overrides for MIDI CC mode (same shape as visual overrides)
+let midiCCOverrides = midiCCMap.map(p => ({
+  min: p.min, max: p.max, curve: p.curve, frozen: p.muted, fixedValue: p.fixedValue,
+}));
+const MIDI_CC_PARAM_COLORS = [];
+// Generate distinct colors for CC params
+function _generateCCColors(n) {
+  MIDI_CC_PARAM_COLORS.length = 0;
+  for (let i = 0; i < n; i++) {
+    const hue = (i * 137.508) % 360; // golden angle
+    MIDI_CC_PARAM_COLORS.push(`hsl(${hue}, 70%, 60%)`);
+  }
+}
+_generateCCColors(midiCCMap.length);
+
 // tame level is now baked into groupOverrides defaults at init time (see ?tame URL param)
 let spreadLevel = 0.6;
 let noiseLevel = 0.05;
-const rlExplorationDecay = 0.97;
-
-// Control surface (Phase 1)
-let inputPipeline = null;
-let controlSurface = null;
-let joyMapEnhanced = null;
-let _lastFrameTime = 0;
-let _lastPipeX = 0.5, _lastPipeY = 0.5; // cached pipeline output for getCurrentInputs()
-
-// Phase 2: Pinning + History
-let snapshotStack = null;
-let abCompare = null;
-let regionPins = null;
-let paramPins = null;
-let phase2UI = null;
-
-// Phase 3: Pressure, Auto-Explore, Heatmap
-let phase3 = null;
-
-// Phase 4: Output Pipeline + Visualization + Polish
-let outputPipeline = null;
-let phase4 = null;
+let rlExplorationDecay = 0.97;
 
 // Joystick state
 let joyX = 0.5;
@@ -152,9 +110,6 @@ let joyDragging = false;
 let joyFollowMode = false;
 let joyTrail = [];
 
-// Sheet state
-let sheetExpanded = false;
-
 // Gamepad
 let gamepad;
 
@@ -166,13 +121,25 @@ let $canvas, $heatmapCells, $heatmapTooltip;
 let $joystickContainer, $joyMap, $joyMapCtx;
 let $noiseRing, $followBadge;
 let $rlButtons, $btnThumbsUp, $btnThumbsDown;
-let $bottomSheet, $statusText;
-let $sheetContent;
-let $synthPanel, $lossCanvas, $lossCtx;
-let $rawParams;
-let $floatingBar, $chevronBtn, $followPill;
+let $statusText;
+let $lossCanvas, $lossCtx;
+let $engineParams;
+let $followPill;
 let $synthVisCanvas;
 
+// Undo stack — stores weight snapshots before RL actions
+const undoStack = [];
+const MAX_UNDO = 20;
+
+// ---- Visual Overrides: per-param curve/min/max/freeze for visual mode ----
+const visualOverrides = VISUAL_PARAM_NAMES.map(() => ({
+  min: 0,
+  max: 1,
+  curve: 0.5,
+  frozen: false,
+  fixedValue: 0.5,
+}));
+
 // ---- Synth Sections (for SynthVisualizer) ----
 const SYNTH_SECTIONS = [
   { name: 'Env A', count: 7, color: '#4488ff' },
@@ -518,28 +485,14 @@ class SynthVisualizer {
       const barH = val * maxBarHeight;
       const barY = topPad + usableHeight - barH;
 
-      // Phase 2: Dim pinned param bars
-      const isPinned = paramPins && paramPins.isPinned(i);
-
-      // Bar with slight transparency (dimmer if pinned)
-      ctx.fillStyle = sec.color + (isPinned ? '66' : 'cc');
+      // Bar with slight transparency
+      ctx.fillStyle = sec.color + 'cc';
       ctx.fillRect(x, barY, Math.max(barWidth - 0.5, 1), barH);
 
       // Bright top edge
-      ctx.fillStyle = isPinned ? (sec.color + '88') : sec.color;
+      ctx.fillStyle = sec.color;
       ctx.fillRect(x, barY, Math.max(barWidth - 0.5, 1), Math.min(2 * dpr, barH));
 
-      // Phase 2: Draw small lock indicator on pinned params
-      if (isPinned) {
-        const dotR = Math.max(2 * dpr, barWidth * 0.2);
-        const dotX = x + barWidth / 2;
-        const dotY = topPad + usableHeight + 6 * dpr;
-        ctx.fillStyle = 'rgba(255, 180, 0, 0.8)';
-        ctx.beginPath();
-        ctx.arc(dotX, dotY, dotR, 0, Math.PI * 2);
-        ctx.fill();
-      }
-
       x += barWidth;
     }
 
@@ -749,6 +702,44 @@ function padPresetOutputs(outputs) {
   return padded;
 }
 
+// ---- MLP Resize ----
+// Returns the target output count for a given mode
+function outputCountForMode(mode) {
+  if (mode === 'visual') return N_VISUAL_OUTPUTS;
+  if (mode === 'synth') return N_SYNTH_OUTPUTS;
+  if (mode === 'midi-cc') return midiCCMap.length;
+  return N_SYNTH_OUTPUTS;
+}
+
+/**
+ * Recreate IML instances with a new output count.
+ * Resets all weights and training data.
+ */
+async function resizeMLP(newOutputCount) {
+  if (newOutputCount === N_OUTPUTS) return;
+  N_OUTPUTS = newOutputCount;
+
+  imlJoy = await WasmIML.create(N_JOY_INPUTS, N_OUTPUTS, [32, 48, 64], 1000, 1.0, 0.00001);
+  imlJoy.setLogger(msg => console.log('[NISPS:joy]', msg));
+  imlHand = await WasmIML.create(N_HAND_INPUTS, N_OUTPUTS, [48, 48, 64], 1000, 1.0, 0.00001);
+  imlHand.setLogger(msg => console.log('[NISPS:hand]', msg));
+  iml = (inputMode === 'joystick') ? imlJoy : imlHand;
+
+  // Reset dependent state
+  rawParamValues = new Array(N_OUTPUTS).fill(0.5);
+
+  // Randomize with current spread
+  imlJoy.drawWeights(spreadLevel);
+  imlHand.drawWeights(spreadLevel);
+
+  // Re-run inference
+  iml.setInput(0, joyX);
+  iml.setInput(1, joyY);
+  iml.process();
+
+  console.log(`[NISPS] MLP resized to ${N_OUTPUTS} outputs`);
+}
+
 // ---- Init ----
 async function init() {
   // Parse ?tame URL param
@@ -784,21 +775,9 @@ async function init() {
   midiInput = new MIDIInput(c15);
   initMIDIControls();
 
-  // OSC output
-  oscOutput = new OSCOutput();
-  oscOutput.onStatusChange = (msg, connected) => {
-    const el = document.getElementById('osc-status');
-    const btn = document.getElementById('osc-toggle');
-    const pill = document.getElementById('osc-pill');
-    if (el) el.textContent = msg;
-    if (btn) btn.textContent = connected ? 'Disconnect' : 'Connect';
-    if (pill) {
-      pill.classList.toggle('connected', connected);
-      pill.classList.toggle('connecting', oscOutput.enabled && !connected);
-      pill.title = connected ? `OSC connected: ${msg}` : 'Connect OSC output';
-    }
-  };
-  wireOSCControls();
+  // MIDI Output
+  midiOutput = new MIDIOutput();
+  initMIDICCControls();
 
   // DOM refs
   $heatmapCells = document.getElementById('heatmap-cells');
@@ -814,28 +793,23 @@ async function init() {
   $btnThumbsUp = document.getElementById('btn-thumbsup');
   $btnThumbsDown = document.getElementById('btn-thumbsdown');
 
-  $bottomSheet = document.getElementById('bottom-sheet');
   $statusText = document.getElementById('status-text');
 
-  $sheetContent = document.getElementById('sheet-content');
-  $synthPanel = document.getElementById('synth-panel');
   $lossCanvas = document.getElementById('loss-canvas');
   $lossCtx = $lossCanvas.getContext('2d');
-  $rawParams = document.getElementById('raw-params');
+  $engineParams = document.getElementById('engine-params');
 
-  $floatingBar = document.getElementById('floating-bar');
-  $chevronBtn = document.getElementById('chevron-btn');
   $followPill = document.getElementById('follow-pill');
 
   // Build heatmap cells
   buildHeatmap();
 
   // Build raw param sliders
-  buildRawParams();
+  buildEngineParams();
 
   // Wire events
   wireJoystick();
-  wireBottomSheet();
+  wireDock();
   wireControls();
   wireSynthControls();
   wireGamepad();
@@ -844,25 +818,15 @@ async function init() {
   createDevPanel(() => handTracker);
   wireQuickPlayControls();
   wireGroupDrawer();
+  wireParamPopup();
   wireHelp();
 
   // Resize
   window.addEventListener('resize', onResize);
   onResize();
 
-  // ---- Control Surface (Phase 1) — init before loadState so restore works ----
-  inputPipeline = new InputPipeline();
-  const csUI = initControlSurfaceUI();
-  controlSurface = csUI.surface;
-
-  // ---- Phase 2: Data models — init before loadState so restore works ----
-  snapshotStack = new SnapshotStack(20);
-  abCompare = new ABCompare();
-  regionPins = new RegionPinManager();
-  paramPins = new ParamPinManager(N_OUTPUTS);
-
   // Restore saved state (if any)
-  loadState();
+  await loadState();
 
   // Wire synth preset selector
   wireSynthPresets();
@@ -877,150 +841,12 @@ async function init() {
     if ($ps) $ps.value = activeSynthPresetId;
   }
 
-  // Enhanced joy-map (replaces drawJoyMap)
-  joyMapEnhanced = new JoyMapEnhanced($joyMap, {
-    onTrailTap: (pos) => {
-      joyX = pos.x;
-      joyY = pos.y;
-      onJoystickMove();
-    },
-    getTrainingData: () => ({
-      features: iml.dataset.features,
-      labels: iml.dataset.labels,
-    }),
-  });
-
-  // ---- Phase 2: UI (data models already created above, before loadState) ----
-  phase2UI = initPhase2UI({
-    snapshotStack,
-    abCompare,
-    regionPins,
-    paramPins,
-    getWeights: () => iml._getFlatWeights(),
-    setWeights: (w) => { iml._setFlatWeights(w); },
-    getNoiseLevel: () => noiseLevel,
-    setNoiseLevel: (n) => { noiseLevel = n; updateNoiseRing(); },
-    getZoomLevel: () => inputPipeline ? inputPipeline.getZoomLevel() : 1.0,
-    getZoomWindow: () => inputPipeline ? inputPipeline.getZoomWindow() : null,
-    getTrainingData: () => ({
-      features: iml.dataset.features,
-      labels: iml.dataset.labels,
-    }),
-    runInference: () => {
-      iml.inputUpdated = true;
-      iml.process();
-      const outputs = iml.getOutputs();
-      routeOutputs(outputs);
-      updateHeatmap(outputs);
-      syncRawParamsFromOutputs(outputs);
-      updateStatus();
-    },
-    joyMapCanvas: $joyMap,
-    synthVisualizer,
-  });
-
-  // Sync region pin overlays to the enhanced joy-map
-  document.addEventListener('regionpin:sync', (e) => {
-    if (joyMapEnhanced) {
-      joyMapEnhanced.setPinnedRegions(e.detail.regions);
-    }
-  });
-
-  // ---- Phase 3: Pressure, Auto-Explore, Input Heatmap ----
-  phase3 = initPhase3UI({
-    onAutoExplore: ({ intensity }) => {
-      const csParams = controlSurface ? controlSurface.getParams() : null;
-      const noiseCap = csParams ? csParams.noiseCap : (0.3 * (1 - spreadLevel) + 0.05 * spreadLevel);
-      const growth = csParams ? csParams.noiseGrowth : 1.5;
-      let effectiveGrowth = growth * intensity;
-      if (csParams && csParams.zoomAwareFeedback && inputPipeline) {
-        effectiveGrowth *= inputPipeline.getZoomLevel();
-      }
-      noiseLevel = Math.min(noiseLevel * effectiveGrowth, noiseCap);
-      const pinMask = paramPins ? paramPins.getPinMask() : null;
-      iml.moveWeights(noiseLevel, spreadLevel, pinMask);
-      const outputs = iml.getOutputs();
-      routeOutputs(outputs);
-      updateHeatmap(outputs);
-      syncRawParamsFromOutputs(outputs);
-      updateStatus();
-      updateNoiseRing();
-      if (phase3) phase3.updateHeatmap();
-    },
-    getZoomLevel: () => inputPipeline ? inputPipeline.getZoomLevel() : 1.0,
-    inferFn: (inputs) => {
-      if (inputMode === 'hands') return [];
-      const savedInput = [...iml.inputState];
-      const savedUpdated = iml.inputUpdated;
-      iml.setInput(0, inputs[0]);
-      iml.setInput(1, inputs[1]);
-      iml.inputUpdated = true;
-      iml.process();
-      const result = [...iml.getOutputs()];
-      for (let i = 0; i < savedInput.length; i++) iml.inputState[i] = savedInput[i];
-      iml.inputUpdated = savedUpdated;
-      return result;
-    },
-    getZoomWindow: () => inputPipeline ? inputPipeline.getZoomWindow() : null,
-  });
-
-  // Wire heatmap into the enhanced joy-map
-  if (joyMapEnhanced && phase3) {
-    joyMapEnhanced.setHeatmap(phase3.heatmap);
-  }
-
-  // ---- Phase 4: Output Pipeline + Visualization + Polish ----
-  outputPipeline = new OutputPipeline(N_OUTPUTS);
-  phase4 = initPhase4UI({
-    outputPipeline,
-    iml,
-    controlSurface,
-    getGroupOverrides: () => groupOverrides,
-    getActiveSynthPresetId: () => activeSynthPresetId,
-    inputPipeline,
-    onSessionLoad: (preset) => {
-      if (preset.controlSurface && controlSurface) {
-        controlSurface.setState(preset.controlSurface);
-      }
-      if (preset.inputPipeline && inputPipeline) {
-        inputPipeline.setConfig(preset.inputPipeline);
-      }
-      if (preset.outputPipeline && outputPipeline) {
-        outputPipeline.setConfig(preset.outputPipeline);
-      }
-      if (preset.synthPresetId) {
-        applyPreset(preset.synthPresetId);
-      }
-      if (inputMode === 'joystick') onJoystickMove();
-    },
-  });
-
-  // Wire control surface changes to pipeline + RL params
-  document.addEventListener('controlsurface:change', (e) => {
-    const p = e.detail;
-    if (p._phase3) return; // Phase 3 drawer events handled internally
-    // Input pipeline
-    inputPipeline.setConfig({
-      zoom: p.zoom,
-      deadzone: p.deadzone,
-      inputCurve: p.inputCurve,
-      smoothing: p.smoothing,
-      momentumZoom: p.momentumZoom,
-      invertX: p.invertX,
-      invertY: p.invertY,
-    });
-    // Sync spread (used by moveWeights and randomise)
-    spreadLevel = p.spread;
-    // Phase 4: wire output pipeline params
-    if (outputPipeline) {
-      if (p.outputSmoothing !== undefined) outputPipeline.setSmoothing(p.outputSmoothing);
-      if (p.outputSlewRate !== undefined) outputPipeline.setSlewRate(p.outputSlewRate);
-      if (p.globalCurve !== undefined) outputPipeline.setGlobalCurve(p.globalCurve);
-    }
-  });
-
-  // Initial inference — run through pipeline for consistency
-  if (inputMode === 'joystick') onJoystickMove();
+  // Initial inference
+  iml.setInput(0, joyX);
+  iml.setInput(1, joyY);
+  iml.process();
+  routeOutputs(iml.getOutputs());
+  updateHeatmap(iml.getOutputs());
   updateStatus();
   drawJoyMap();
   drawLossPlot();
@@ -1036,9 +862,10 @@ async function init() {
 function buildHeatmap() {
   $heatmapCells.innerHTML = '';
   const isSynth = outputMode === 'synth';
-  const count = isSynth ? N_SYNTH_OUTPUTS : N_VISUAL_OUTPUTS;
-  const names = isSynth ? SYNTH_PARAM_NAMES : VISUAL_PARAM_NAMES;
-  const colors = isSynth ? SYNTH_PARAM_COLORS : VISUAL_PARAM_COLORS;
+  const isMidiCC = outputMode === 'midi-cc';
+  const count = isMidiCC ? midiCCMap.length : isSynth ? N_SYNTH_OUTPUTS : N_VISUAL_OUTPUTS;
+  const names = isMidiCC ? midiCCMap.map(p => p.name) : isSynth ? SYNTH_PARAM_NAMES : VISUAL_PARAM_NAMES;
+  const colors = isMidiCC ? MIDI_CC_PARAM_COLORS : isSynth ? SYNTH_PARAM_COLORS : VISUAL_PARAM_COLORS;
 
   for (let i = 0; i < count; i++) {
     const cell = document.createElement('div');
@@ -1052,21 +879,83 @@ function buildHeatmap() {
     bar.style.height = '100%';
     cell.appendChild(bar);
 
+    // Tooltip on hover (quick info) + click to open popup
     cell.addEventListener('pointerenter', (e) => {
+      if (cell._dragging) return;
       const outputs = iml.getOutputs();
-      $heatmapTooltip.textContent = `${names[i]}: ${outputs[i].toFixed(3)}`;
+      $heatmapTooltip.textContent = `${names[i]}: ${outputs[i].toFixed(3)}  ▾`;
       $heatmapTooltip.classList.add('visible');
       const rect = cell.getBoundingClientRect();
       $heatmapTooltip.style.left = `${rect.left}px`;
     });
     cell.addEventListener('pointerleave', () => {
-      $heatmapTooltip.classList.remove('visible');
+      if (!cell._dragging) $heatmapTooltip.classList.remove('visible');
+      // Delay hide popup so user can move to it
+      if (activePopupParam === i) {
+        popupHideTimer = setTimeout(() => hideParamPopup(), 300);
+      }
+    });
+
+    // Click opens popup; drag sets parameter value
+    cell.addEventListener('pointerdown', (e) => {
+      e.preventDefault();
+      cell._downX = e.clientX;
+      cell._downY = e.clientY;
+      cell._didDrag = false;
+      cell._dragging = true;
+      cell.classList.add('dragging');
+      cell.setPointerCapture(e.pointerId);
+    });
+    cell.addEventListener('pointermove', (e) => {
+      if (!cell._dragging) return;
+      const dx = Math.abs(e.clientX - cell._downX);
+      const dy = Math.abs(e.clientY - cell._downY);
+      if (dx > 3 || dy > 3) cell._didDrag = true;
+      if (cell._didDrag) setHeatmapValue(i, e, cell);
+    });
+    cell.addEventListener('pointerup', () => {
+      cell._dragging = false;
+      cell.classList.remove('dragging');
+      if (!cell._didDrag) {
+        // Click — toggle popup
+        clearTimeout(popupHideTimer);
+        if (activePopupParam === i) {
+          hideParamPopup();
+        } else {
+          showParamPopup(i, cell);
+        }
+      }
+    });
+    cell.addEventListener('pointercancel', () => {
+      cell._dragging = false;
+      cell.classList.remove('dragging');
     });
 
     $heatmapCells.appendChild(cell);
   }
 }
 
+function setHeatmapValue(paramIndex, e, cell) {
+  const rect = cell.getBoundingClientRect();
+  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+  // If frozen, dragging updates the fixed value directly
+  const ov = getParamOverride(paramIndex);
+  if (ov && ov.frozen) {
+    ov.fixedValue = x;
+  }
+  rawParamValues[paramIndex] = x;
+  routeOutputs(rawParamValues);
+  updateHeatmap(rawParamValues);
+  syncRawParamsFromOutputs(rawParamValues);
+  // Update tooltip
+  const isSynth = outputMode === 'synth';
+  const isMidiCC = outputMode === 'midi-cc';
+  const names = isMidiCC ? midiCCMap.map(p => p.name) : isSynth ? SYNTH_PARAM_NAMES : VISUAL_PARAM_NAMES;
+  $heatmapTooltip.textContent = `${names[paramIndex]}: ${x.toFixed(3)}`;
+  $heatmapTooltip.classList.add('visible');
+  $heatmapTooltip.style.left = `${rect.left}px`;
+}
+
 function updateHeatmap(outputs) {
   const cells = $heatmapCells.children;
   for (let i = 0; i < cells.length && i < outputs.length; i++) {
@@ -1075,27 +964,298 @@ function updateHeatmap(outputs) {
       const pct = Math.max(2, Math.round(outputs[i] * 100));
       bar.style.width = pct + '%';
     }
+    // Dim frozen/muted cells
+    const ov = getParamOverride(i);
+    if (ov) {
+      cells[i].classList.toggle('heatmap-cell-frozen', !!ov.frozen);
+    }
   }
 }
 
+/** Get the override object for a heatmap param (works in both visual & synth mode) */
+function getParamOverride(paramIndex) {
+  if (outputMode === 'synth') {
+    const mapping = paramToSection[paramIndex];
+    if (!mapping) return null;
+    const p = groupOverrides[mapping.si].params[mapping.li];
+    // Expose as { min, max, curve, frozen, fixedValue } — map 'muted' to 'frozen'
+    return {
+      get min() { return p.min; }, set min(v) { p.min = v; },
+      get max() { return p.max; }, set max(v) { p.max = v; },
+      get curve() { return p.curve; }, set curve(v) { p.curve = v; },
+      get frozen() { return p.muted; }, set frozen(v) { p.muted = v; },
+      get fixedValue() { return p.fixedValue; }, set fixedValue(v) { p.fixedValue = v; },
+    };
+  } else if (outputMode === 'midi-cc') {
+    return midiCCOverrides[paramIndex] || null;
+  } else {
+    return visualOverrides[paramIndex] || null;
+  }
+}
+
+// ---- Param Popup (hover menu on heatmap cells) ----
+function wireParamPopup() {
+  $paramPopup = document.createElement('div');
+  $paramPopup.className = 'param-popup';
+  $paramPopup.innerHTML = '<div class="pp-header"></div><div class="pp-body"></div>';
+  document.body.appendChild($paramPopup);
+
+  $paramPopup.addEventListener('pointerenter', () => {
+    clearTimeout(popupHideTimer);
+  });
+  $paramPopup.addEventListener('pointerleave', () => {
+    popupHideTimer = setTimeout(() => hideParamPopup(), 300);
+  });
+}
+
+function showParamPopup(paramIndex, cell) {
+  if (activePopupParam === paramIndex) return;
+  activePopupParam = paramIndex;
+
+  const isSynth = outputMode === 'synth';
+  const isMidiCC = outputMode === 'midi-cc';
+  const names = isMidiCC ? midiCCMap.map(p => p.name) : isSynth ? SYNTH_PARAM_NAMES : VISUAL_PARAM_NAMES;
+  const colors = isMidiCC ? MIDI_CC_PARAM_COLORS : isSynth ? SYNTH_PARAM_COLORS : VISUAL_PARAM_COLORS;
+  const name = names[paramIndex];
+  const color = colors[paramIndex];
+  const ov = getParamOverride(paramIndex);
+  if (!ov) return;
+
+  const header = $paramPopup.querySelector('.pp-header');
+  header.textContent = name;
+  header.style.color = color;
+
+  const body = $paramPopup.querySelector('.pp-body');
+  body.innerHTML = '';
+
+  // -- MIDI CC specific: name, CC#, channel editors --
+  if (isMidiCC) {
+    const ccParam = midiCCMap[paramIndex];
+    // Editable name
+    const nameRow = document.createElement('div');
+    nameRow.className = 'pp-row';
+    const nameLabel = document.createElement('span');
+    nameLabel.className = 'pp-label';
+    nameLabel.textContent = 'Name';
+    const nameInput = document.createElement('input');
+    nameInput.type = 'text';
+    nameInput.value = ccParam.name;
+    nameInput.className = 'pp-text-input';
+    nameInput.addEventListener('change', () => {
+      ccParam.name = nameInput.value;
+      header.textContent = nameInput.value;
+      buildHeatmap();
+      updateHeatmap(iml.getOutputs());
+      saveCCMap(midiCCMap);
+    });
+    nameRow.appendChild(nameLabel);
+    nameRow.appendChild(nameInput);
+    body.appendChild(nameRow);
+
+    // CC number
+    const ccRow = document.createElement('div');
+    ccRow.className = 'pp-row';
+    const ccLabel = document.createElement('span');
+    ccLabel.className = 'pp-label';
+    ccLabel.textContent = 'CC#';
+    const ccInput = document.createElement('input');
+    ccInput.type = 'number';
+    ccInput.min = '0';
+    ccInput.max = '127';
+    ccInput.value = ccParam.cc;
+    ccInput.className = 'pp-num-input';
+    ccInput.addEventListener('change', () => {
+      ccParam.cc = parseInt(ccInput.value) || 0;
+      // Auto-name if name matches old CC name
+      if (CC_NAMES[ccParam.cc]) {
+        ccParam.name = CC_NAMES[ccParam.cc];
+        nameInput.value = ccParam.name;
+        header.textContent = ccParam.name;
+        buildHeatmap();
+        updateHeatmap(iml.getOutputs());
+      }
+      saveCCMap(midiCCMap);
+    });
+    ccRow.appendChild(ccLabel);
+    ccRow.appendChild(ccInput);
+    body.appendChild(ccRow);
+
+    // Channel
+    const chRow = document.createElement('div');
+    chRow.className = 'pp-row';
+    const chLabel = document.createElement('span');
+    chLabel.className = 'pp-label';
+    chLabel.textContent = 'Ch';
+    const chInput = document.createElement('input');
+    chInput.type = 'number';
+    chInput.min = '1';
+    chInput.max = '16';
+    chInput.value = ccParam.channel;
+    chInput.className = 'pp-num-input';
+    chInput.addEventListener('change', () => {
+      ccParam.channel = Math.max(1, Math.min(16, parseInt(chInput.value) || 1));
+      chInput.value = ccParam.channel;
+      saveCCMap(midiCCMap);
+    });
+    chRow.appendChild(chLabel);
+    chRow.appendChild(chInput);
+    body.appendChild(chRow);
+  }
+
+  // -- Curve row --
+  const curveRow = document.createElement('div');
+  curveRow.className = 'pp-row';
+
+  const curveLabel = document.createElement('span');
+  curveLabel.className = 'pp-label';
+  curveLabel.textContent = 'Curve';
+
+  const curveCanvas = document.createElement('canvas');
+  curveCanvas.className = 'pp-curve-canvas';
+  curveCanvas.width = 36;
+  curveCanvas.height = 36;
+
+  const curveVal = document.createElement('span');
+  curveVal.className = 'pp-val';
+  curveVal.textContent = ov.curve.toFixed(2);
+
+  function redrawCurve() {
+    _drawCurveOnCanvas(curveCanvas, ov.curve, color);
+  }
+
+  _wireCurveDrag(curveCanvas, () => ov.curve, (v) => {
+    ov.curve = v;
+    curveVal.textContent = v.toFixed(2);
+    redrawCurve();
+    routeOutputs(iml.getOutputs());
+  });
+  redrawCurve();
+
+  curveRow.appendChild(curveLabel);
+  curveRow.appendChild(curveCanvas);
+  curveRow.appendChild(curveVal);
+  body.appendChild(curveRow);
+
+  // -- Min/Max row --
+  const rangeRow = document.createElement('div');
+  rangeRow.className = 'pp-row';
+
+  const rangeLabel = document.createElement('span');
+  rangeLabel.className = 'pp-label';
+  rangeLabel.textContent = 'Range';
+
+  const rangeWrap = document.createElement('div');
+  rangeWrap.className = 'pp-range-wrap';
+
+  const rangeFill = document.createElement('div');
+  rangeFill.className = 'gd-range-fill';
+
+  const minSlider = document.createElement('input');
+  minSlider.type = 'range'; minSlider.min = '0'; minSlider.max = '1'; minSlider.step = '0.01';
+  minSlider.value = ov.min;
+  minSlider.className = 'gd-range-input gd-range-min';
+
+  const maxSlider = document.createElement('input');
+  maxSlider.type = 'range'; maxSlider.min = '0'; maxSlider.max = '1'; maxSlider.step = '0.01';
+  maxSlider.value = ov.max;
+  maxSlider.className = 'gd-range-input gd-range-max';
+
+  const rangeValSpan = document.createElement('span');
+  rangeValSpan.className = 'pp-val';
+
+  function updateRangeFill() {
+    rangeFill.style.left = `${ov.min * 100}%`;
+    rangeFill.style.width = `${(ov.max - ov.min) * 100}%`;
+    rangeValSpan.textContent = `${ov.min.toFixed(2)}–${ov.max.toFixed(2)}`;
+  }
+  updateRangeFill();
+
+  minSlider.addEventListener('input', () => {
+    ov.min = parseFloat(minSlider.value);
+    if (ov.min > ov.max) { ov.max = ov.min; maxSlider.value = ov.max; }
+    updateRangeFill();
+    routeOutputs(iml.getOutputs());
+  });
+  maxSlider.addEventListener('input', () => {
+    ov.max = parseFloat(maxSlider.value);
+    if (ov.max < ov.min) { ov.min = ov.max; minSlider.value = ov.min; }
+    updateRangeFill();
+    routeOutputs(iml.getOutputs());
+  });
+
+  rangeWrap.appendChild(rangeFill);
+  rangeWrap.appendChild(minSlider);
+  rangeWrap.appendChild(maxSlider);
+
+  rangeRow.appendChild(rangeLabel);
+  rangeRow.appendChild(rangeWrap);
+  rangeRow.appendChild(rangeValSpan);
+  body.appendChild(rangeRow);
+
+  // -- Freeze row --
+  const freezeRow = document.createElement('div');
+  freezeRow.className = 'pp-row pp-freeze-row';
+
+  const freezeBtn = document.createElement('button');
+  freezeBtn.className = 'pp-freeze-btn' + (ov.frozen ? ' frozen' : '');
+  freezeBtn.textContent = ov.frozen ? 'Frozen' : 'Freeze';
+  freezeBtn.title = ov.frozen ? 'Unfreeze — re-enable NISPS control' : 'Freeze — lock value, disable NISPS';
+
+  const valSlider = document.createElement('input');
+  valSlider.type = 'range'; valSlider.min = '0'; valSlider.max = '1'; valSlider.step = '0.01';
+  valSlider.value = ov.fixedValue;
+  valSlider.className = 'pp-val-slider';
+  if (!ov.frozen) valSlider.style.display = 'none';
+
+  const valDisplay = document.createElement('span');
+  valDisplay.className = 'pp-val';
+  valDisplay.textContent = ov.frozen ? ov.fixedValue.toFixed(2) : '';
+
+  freezeBtn.addEventListener('click', () => {
+    ov.frozen = !ov.frozen;
+    freezeBtn.classList.toggle('frozen', ov.frozen);
+    freezeBtn.textContent = ov.frozen ? 'Frozen' : 'Freeze';
+    freezeBtn.title = ov.frozen ? 'Unfreeze — re-enable NISPS control' : 'Freeze — lock value, disable NISPS';
+    valSlider.style.display = ov.frozen ? '' : 'none';
+    valDisplay.textContent = ov.frozen ? ov.fixedValue.toFixed(2) : '';
+    // When freezing, capture the current output value
+    if (ov.frozen) {
+      const outputs = iml.getOutputs();
+      ov.fixedValue = outputs[paramIndex];
+      valSlider.value = ov.fixedValue;
+      valDisplay.textContent = ov.fixedValue.toFixed(2);
+    }
+    routeOutputs(iml.getOutputs());
+  });
+
+  valSlider.addEventListener('input', () => {
+    ov.fixedValue = parseFloat(valSlider.value);
+    valDisplay.textContent = ov.fixedValue.toFixed(2);
+    routeOutputs(iml.getOutputs());
+  });
+
+  freezeRow.appendChild(freezeBtn);
+  freezeRow.appendChild(valSlider);
+  freezeRow.appendChild(valDisplay);
+  body.appendChild(freezeRow);
+
+  // Position below the heatmap cell
+  const cellRect = cell.getBoundingClientRect();
+  const popupWidth = 260;
+  let left = cellRect.left + cellRect.width / 2 - popupWidth / 2;
+  left = Math.max(4, Math.min(left, window.innerWidth - popupWidth - 4));
+  $paramPopup.style.left = `${left}px`;
+  $paramPopup.style.top = `${cellRect.bottom + 4}px`;
+  $paramPopup.classList.add('visible');
+}
+
+function hideParamPopup() {
+  activePopupParam = -1;
+  if ($paramPopup) $paramPopup.classList.remove('visible');
+}
+
 // ---- Joy Map (merged joystick + minimap) ----
 function drawJoyMap() {
-  // Use enhanced joy-map if available
-  if (joyMapEnhanced) {
-    joyMapEnhanced.draw({
-      joyX,
-      joyY,
-      // effectiveX/Y are set in onJoystickMove; for draw we show zoom window + cursor
-      zoomWindow: inputPipeline ? inputPipeline.getZoomWindow() : null,
-      zoomLevel: inputPipeline ? inputPipeline.getZoomLevel() : 1.0,
-      noiseLevel,
-      outputMode,
-      frozen: inputPipeline ? inputPipeline.isFrozen() : false,
-    });
-    return;
-  }
-
-  // Legacy fallback
   const canvas = $joyMap;
   const ctx = $joyMapCtx;
   const w = canvas.width;
@@ -1282,24 +1442,8 @@ function updateFollowUI() {
 
 function onJoystickMove() {
   if (inputMode !== 'joystick') return;
-
-  // Process through input pipeline (zoom, deadzone, curve, smoothing, momentum)
-  const now = performance.now();
-  const dt = _lastFrameTime > 0 ? (now - _lastFrameTime) / 1000 : 1 / 60;
-  _lastFrameTime = now;
-
-  const pipeResult = inputPipeline
-    ? inputPipeline.process(joyX, joyY, dt)
-    : { x: joyX, y: joyY, frozen: false };
-
-  // Cache for getCurrentInputs() (avoids re-processing and mutating state)
-  _lastPipeX = pipeResult.x;
-  _lastPipeY = pipeResult.y;
-
-  if (pipeResult.frozen) return; // Input frozen (zoom at zero)
-
-  iml.setInput(0, pipeResult.x);
-  iml.setInput(1, pipeResult.y);
+  iml.setInput(0, joyX);
+  iml.setInput(1, joyY);
   iml.process();
 
   const outputs = iml.getOutputs();
@@ -1308,14 +1452,9 @@ function onJoystickMove() {
 
   syncRawParamsFromOutputs(outputs);
 
-  // Trail (enhanced joy-map handles this now, legacy trail kept for compat)
+  // Trail
   joyTrail.push({ x: joyX, y: joyY, t: Date.now() });
   if (joyTrail.length > 30) joyTrail.shift();
-
-  // Enhanced trail records in input-space coords
-  if (joyMapEnhanced) {
-    joyMapEnhanced.addTrailPoint(joyX, joyY, inputPipeline ? inputPipeline.getZoomLevel() : 1.0);
-  }
 }
 
 // ---- Output routing ----
@@ -1324,25 +1463,13 @@ function onJoystickMove() {
 const _lastSentParams = new Float32Array(N_OUTPUTS);
 const PARAM_DEAD_ZONE = 0.002; // ~0.2% change threshold
 let _lastParamSendTime = 0;
-let _lastRouteTime = 0;
 const PARAM_SEND_INTERVAL = 50; // max ~20fps for synth param updates
 
 function routeOutputs(outputs) {
-  // Phase 4: Output Pipeline (curve, smoothing, slew, freeze)
-  let pipelined = outputs;
-  if (outputPipeline) {
-    const now = performance.now();
-    const dt = _lastRouteTime > 0 ? (now - _lastRouteTime) / 1000 : 1 / 60;
-    _lastRouteTime = now;
-    pipelined = outputPipeline.process(outputs, dt);
-  }
-
-  let overridden = null;
-
   if (outputMode === 'synth') {
-    overridden = new Array(pipelined.length);
-    for (let i = 0; i < pipelined.length; i++) {
-      overridden[i] = applyGroupOverrides(pipelined[i], i);
+    const overridden = new Array(outputs.length);
+    for (let i = 0; i < outputs.length; i++) {
+      overridden[i] = applyGroupOverrides(outputs[i], i);
     }
     // Visualizer always gets every frame (it's local, no buffer)
     synthVisualizer.setParams(overridden);
@@ -1361,29 +1488,75 @@ function routeOutputs(outputs) {
         }
       }
     }
+  } else if (outputMode === 'midi-cc') {
+    // MIDI CC output — route through overrides then send CC messages
+    if (midiOutput && midiOutput.enabled && midiOutput.activeOutput) {
+      const messages = [];
+      for (let i = 0; i < midiCCMap.length && i < outputs.length; i++) {
+        const ccParam = midiCCMap[i];
+        const ov = midiCCOverrides[i];
+        if (!ov || ov.frozen) {
+          if (ov) messages.push({ channel: ccParam.channel, cc: ccParam.cc, value: Math.round(ov.fixedValue * 127) });
+          continue;
+        }
+        const v = applyGroupOverride(outputs[i], ov.curve, ov.min, ov.max);
+        messages.push({ channel: ccParam.channel, cc: ccParam.cc, value: Math.round(v * 127) });
+      }
+      midiOutput.sendBatch(messages);
+    }
   } else {
-    visualizer.setParams(Array.from(pipelined).slice(0, N_VISUAL_OUTPUTS));
-  }
-
-  // OSC output — sends in both modes (has its own throttle + dead-zone).
-  // In synth mode sends post-override values; in visual mode sends raw outputs.
-  if (oscOutput) {
-    oscOutput.sendParams(overridden || Array.from(pipelined));
+    const vis = new Array(N_VISUAL_OUTPUTS);
+    for (let i = 0; i < N_VISUAL_OUTPUTS; i++) {
+      const vo = visualOverrides[i];
+      if (vo.frozen) {
+        vis[i] = vo.fixedValue;
+      } else {
+        vis[i] = applyGroupOverride(outputs[i], vo.curve, vo.min, vo.max);
+      }
+    }
+    visualizer.setParams(vis);
   }
 }
 
 // ---- Bottom sheet ----
-function wireBottomSheet() {
-  // Chevron toggle
-  $chevronBtn.addEventListener('click', () => {
-    sheetExpanded = !sheetExpanded;
-    if (sheetExpanded) {
-      $bottomSheet.classList.add('expanded');
-      $chevronBtn.classList.add('open');
-    } else {
-      $bottomSheet.classList.remove('expanded');
-      $chevronBtn.classList.remove('open');
+// ---- Dock & Drawer system ----
+function wireDock() {
+  const dock = document.getElementById('dock');
+
+  // Toggle drawers on dock icon click
+  dock.addEventListener('click', (e) => {
+    const icon = e.target.closest('.dock-icon');
+    if (!icon) return;
+    const drawerId = icon.dataset.drawer;
+
+    // Special case: help opens modal instead of drawer
+    if (drawerId === 'help') {
+      document.getElementById('help-overlay').classList.remove('hidden');
+      return;
     }
+
+    const drawer = document.getElementById(`drawer-${drawerId}`);
+    if (!drawer) return;
+
+    const isOpen = !drawer.classList.contains('hidden');
+    if (isOpen) {
+      drawer.classList.add('hidden');
+      icon.classList.remove('active');
+    } else {
+      drawer.classList.remove('hidden');
+      icon.classList.add('active');
+    }
+  });
+
+  // Close buttons inside drawers
+  document.querySelectorAll('.drawer-close').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const drawerId = btn.dataset.drawer;
+      const drawer = document.getElementById(`drawer-${drawerId}`);
+      if (drawer) drawer.classList.add('hidden');
+      const icon = dock.querySelector(`.dock-icon[data-drawer="${drawerId}"]`);
+      if (icon) icon.classList.remove('active');
+    });
   });
 
   // Follow pill toggle
@@ -1394,7 +1567,7 @@ function wireBottomSheet() {
 
 // ---- Controls wiring ----
 function wireControls() {
-  // Output mode toggle (floating bar)
+  // Output mode toggle (in mode drawer)
   document.querySelectorAll('#output-toggle-float .pill-opt').forEach(btn => {
     btn.addEventListener('click', () => {
       syncOutputToggles(btn.dataset.mode);
@@ -1402,20 +1575,20 @@ function wireControls() {
     });
   });
 
-  // Action buttons
+  // Action buttons (in training drawer)
   document.getElementById('btn-add-example').addEventListener('click', onAddExample);
   document.getElementById('btn-train').addEventListener('click', onTrain);
-  document.getElementById('btn-train-bar').addEventListener('click', onTrain);
   document.getElementById('btn-clear').addEventListener('click', onClear);
   document.getElementById('btn-clear-examples').addEventListener('click', onClearExamples);
-  document.getElementById('btn-clear-examples-bar').addEventListener('click', onClearExamples);
   document.getElementById('btn-randomize').addEventListener('click', onRandomize);
-  document.getElementById('btn-randomize-bar').addEventListener('click', onRandomize);
 
   // RL buttons
   $btnThumbsUp.addEventListener('click', onThumbsUp);
   $btnThumbsDown.addEventListener('click', onThumbsDown);
 
+  // Undo button
+  document.getElementById('btn-undo').addEventListener('click', onUndo);
+
   // Presets
   document.querySelectorAll('.preset-chip').forEach(chip => {
     chip.addEventListener('click', () => loadPreset(chip.dataset.preset));
@@ -1507,8 +1680,11 @@ async function _setInputModeInner(mode) {
       document.getElementById('hand-status').classList.remove('tracking');
     }
 
-    // Re-run through pipeline so MLP sees processed coords
-    onJoystickMove();
+    iml.setInput(0, joyX);
+    iml.setInput(1, joyY);
+    iml.process();
+    routeOutputs(iml.getOutputs());
+    updateHeatmap(iml.getOutputs());
   }
 
   updateStatus();
@@ -1519,9 +1695,7 @@ function getCurrentInputs() {
   if (inputMode === 'hands' && handTracker) {
     return [...handTracker.features];
   }
-  // Return pipeline-processed coords (what the MLP actually sees),
-  // not raw joyX/joyY, so examples are recorded in the correct input space
-  return [_lastPipeX, _lastPipeY];
+  return [joyX, joyY];
 }
 
 function setCurrentInputs() {
@@ -1529,9 +1703,8 @@ function setCurrentInputs() {
     const f = handTracker.features;
     for (let i = 0; i < f.length; i++) iml.setInput(i, f[i]);
   } else {
-    // Use cached pipeline output (matches what MLP sees during inference)
-    iml.setInput(0, _lastPipeX);
-    iml.setInput(1, _lastPipeY);
+    iml.setInput(0, joyX);
+    iml.setInput(1, joyY);
   }
 }
 
@@ -1590,60 +1763,65 @@ function syncOutputToggles(mode) {
   document.querySelectorAll('#output-toggle-float .pill-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
 }
 
-function setOutputMode(mode) {
+async function setOutputMode(mode, { skipConfirm = false } = {}) {
+  const targetOutputs = outputCountForMode(mode);
+  const needsResize = targetOutputs !== N_OUTPUTS;
+
+  // Warn about weight reset if resizing (skip during state restore)
+  if (needsResize && !skipConfirm && iml.dataset.features.length > 0) {
+    if (!confirm(`Switching to ${mode} mode requires ${targetOutputs} outputs (currently ${N_OUTPUTS}). This will reset the neural network weights and training data. Continue?`)) {
+      syncOutputToggles(outputMode); // revert pill UI
+      return;
+    }
+  }
+
   outputMode = mode;
   hideGroupDrawer();
+  hideParamPopup();
+
+  // Resize MLP if needed
+  if (needsResize) {
+    await resizeMLP(targetOutputs);
+  }
+
   buildHeatmap();
   updateHeatmap(iml.getOutputs());
 
   const heatmapStrip = document.getElementById('heatmap-strip');
   const synthQuickControls = document.getElementById('synth-quick-controls');
-
-  const shapeseqContainer = document.getElementById('shapeseq-container');
+  const midiCCQuickControls = document.getElementById('midi-cc-quick-controls');
 
   if (mode === 'synth') {
-    $synthPanel.classList.remove('hidden');
     $canvas.classList.add('hidden-canvas');
     $synthVisCanvas.classList.add('active');
     heatmapStrip.classList.add('hidden');
     synthQuickControls.classList.remove('hidden');
+    if (midiCCQuickControls) midiCCQuickControls.classList.add('hidden');
     synthVisualizer.enableInteraction(true);
-    // Pulse play button if audio not yet started
     const qp = document.getElementById('quick-play');
     if (qp) qp.classList.toggle('audio-needs-init', !(c15 && c15.running));
-    // Show ShapeSeq UI if feature-flagged
-    if (ENABLE_SHAPESEQ && shapeseqContainer) {
-      shapeseqContainer.classList.remove('hidden');
-      if (stepViz) {
-        const vizCanvas = document.getElementById('shapeseq-viz');
-        if (vizCanvas) {
-          const rect = vizCanvas.getBoundingClientRect();
-          stepViz.resize(rect.width, rect.height);
-        }
-      }
-    }
+  } else if (mode === 'midi-cc') {
+    $canvas.classList.add('hidden-canvas');
+    $synthVisCanvas.classList.remove('active');
+    heatmapStrip.classList.remove('hidden');
+    synthQuickControls.classList.add('hidden');
+    if (midiCCQuickControls) midiCCQuickControls.classList.remove('hidden');
+    synthVisualizer.enableInteraction(false);
   } else {
-    $synthPanel.classList.add('hidden');
     $canvas.classList.remove('hidden-canvas');
     $synthVisCanvas.classList.remove('active');
     heatmapStrip.classList.remove('hidden');
     synthQuickControls.classList.add('hidden');
+    if (midiCCQuickControls) midiCCQuickControls.classList.add('hidden');
     synthVisualizer.enableInteraction(false);
-    // Hide ShapeSeq UI
-    if (shapeseqContainer) shapeseqContainer.classList.add('hidden');
   }
 
   routeOutputs(iml.getOutputs());
-  buildRawParams();
+  buildEngineParams();
   syncRawParamsFromOutputs(iml.getOutputs());
 }
 
 function updateNoiseRing() {
-  // When enhanced joy-map is active, noise ring is drawn on canvas — hide CSS version
-  if (joyMapEnhanced) {
-    $noiseRing.className = 'noise-ring';
-    return;
-  }
   if (noiseLevel > 0.15) {
     $noiseRing.className = 'noise-ring active high';
   } else if (noiseLevel > 0.01) {
@@ -1665,15 +1843,11 @@ function onAddExample() {
 
 function onTrain() {
   if (iml.isTraining) return;
-  // Phase 2: auto-snapshot before training
-  if (phase2UI) phase2UI.pushSnapshot('before train');
   flash('btn-train');
   trainModelAsync();
 }
 
 function onRandomize() {
-  // Phase 2: auto-snapshot before randomize
-  if (phase2UI) phase2UI.pushSnapshot('before randomize');
   iml.randomiseWeights(spreadLevel);
   setCurrentInputs();
   iml.process();
@@ -1683,7 +1857,6 @@ function onRandomize() {
   syncRawParamsFromOutputs(outputs);
   noiseLevel = 0.05;
   updateStatus();
-  if (phase3) phase3.updateHeatmap();
 }
 
 function onClearExamples() {
@@ -1704,53 +1877,68 @@ function onClear() {
   drawJoyMap();
 }
 
+// ---- Undo ----
+function pushUndoSnapshot() {
+  const snapshot = {
+    weights: iml._getFlatWeights ? iml._getFlatWeights() : (iml.mlp ? iml.mlp.getWeights() : null),
+    noiseLevel,
+    exampleCount: iml.exampleCount,
+  };
+  if (snapshot.weights) {
+    undoStack.push(snapshot);
+    if (undoStack.length > MAX_UNDO) undoStack.shift();
+    updateUndoButton();
+  }
+}
+
+function onUndo() {
+  if (undoStack.length === 0) return;
+  const snapshot = undoStack.pop();
+  if (iml._setFlatWeights && Array.isArray(snapshot.weights)) {
+    iml._setFlatWeights(snapshot.weights);
+  } else if (iml.mlp && snapshot.weights) {
+    iml.mlp.setWeights(snapshot.weights);
+  }
+  noiseLevel = snapshot.noiseLevel;
+  iml.process();
+  const outputs = iml.getOutputs();
+  routeOutputs(outputs);
+  updateHeatmap(outputs);
+  syncRawParamsFromOutputs(outputs);
+  updateStatus();
+  updateNoiseRing();
+  updateUndoButton();
+  flash('btn-undo');
+}
+
+function updateUndoButton() {
+  const btn = document.getElementById('btn-undo');
+  if (btn) btn.classList.toggle('has-undo', undoStack.length > 0);
+}
+
 // ---- RL mode ----
 function onThumbsUp() {
   if (iml.isTraining) return;
 
+  pushUndoSnapshot();
   const inputs = getCurrentInputs();
   const outputs = [...iml.getOutputs()];
   iml.addExample(inputs, outputs);
 
-  // Use control surface params if available, else legacy
-  const csParams = controlSurface ? controlSurface.getParams() : null;
-  const decay = csParams ? csParams.noiseDecay : rlExplorationDecay;
-  const floor = csParams ? csParams.noiseFloor : 0.005;
-  // Phase 3: pressure/hold modulates decay strength
-  const p3Intensity = phase3 ? phase3.pressure.getIntensity() : 1.0;
-  const modulatedDecay = 1 - (1 - decay) * p3Intensity;
-  noiseLevel *= modulatedDecay;
-  noiseLevel = Math.max(noiseLevel, floor);
+  noiseLevel *= rlExplorationDecay;
+  noiseLevel = Math.max(noiseLevel, 0.005);
 
   flash('btn-thumbsup');
   updateNoiseRing();
   trainModelAsync();
-  if (phase3) phase3.updateHeatmap();
 }
 
 function onThumbsDown() {
-  // Phase 2: auto-snapshot before thumbs-down
-  if (phase2UI) phase2UI.pushSnapshot('before thumbs-down');
+  pushUndoSnapshot();
+  const noiseCap = 0.3 * (1 - spreadLevel) + 0.05 * spreadLevel;
+  noiseLevel = Math.min(noiseLevel * 1.5, noiseCap);
 
-  // Use control surface params if available, else legacy
-  const csParams = controlSurface ? controlSurface.getParams() : null;
-  const noiseCap = csParams ? csParams.noiseCap : (0.3 * (1 - spreadLevel) + 0.05 * spreadLevel);
-  const growth = csParams ? csParams.noiseGrowth : 1.5;
-
-  // Zoom-aware feedback: scale noise by zoom level
-  let effectiveGrowth = growth;
-  if (csParams && csParams.zoomAwareFeedback && inputPipeline) {
-    effectiveGrowth *= inputPipeline.getZoomLevel();
-  }
-  // Phase 3: pressure/hold modulates noise growth
-  const p3DownIntensity = phase3 ? phase3.pressure.getIntensity() : 1.0;
-  effectiveGrowth *= p3DownIntensity;
-
-  noiseLevel = Math.min(noiseLevel * effectiveGrowth, noiseCap);
-
-  // Phase 2: pass param pin mask to moveWeights (pinned outputs are not perturbed)
-  const pinMask = paramPins ? paramPins.getPinMask() : null;
-  iml.moveWeights(noiseLevel, spreadLevel, pinMask);
+  iml.moveWeights(noiseLevel, spreadLevel);
 
   const outputs = iml.getOutputs();
   routeOutputs(outputs);
@@ -1759,7 +1947,6 @@ function onThumbsDown() {
   updateStatus();
   updateNoiseRing();
   flash('btn-thumbsdown');
-  if (phase3) phase3.updateHeatmap();
 }
 
 // ---- Training ----
@@ -1769,39 +1956,8 @@ function trainModel() {
 }
 
 // Async — used for interactive training (thumbs-up, train button)
-// Phase 2: includes pinned region examples and freezes pinned param labels.
 function trainModelAsync(onDone) {
-  // Phase 2: Inject pinned region examples into the dataset before training.
-  // These anchor behavior in pinned regions and can't be evicted by FIFO.
-  if (regionPins && regionPins.count > 0) {
-    const pinned = regionPins.getPinnedExamples();
-    for (let i = 0; i < pinned.features.length; i++) {
-      iml.addExample(pinned.features[i], pinned.labels[i]);
-    }
-  }
-
-  // Phase 2: If any output params are pinned, freeze their labels to current
-  // inferred values so the network maintains its mapping for those outputs.
-  if (paramPins && paramPins.pinnedCount > 0) {
-    const mask = paramPins.getPinMask();
-    const currentOutputs = iml.getOutputs();
-    const labels = iml.dataset.labels;
-    for (let i = 0; i < labels.length; i++) {
-      for (let j = 0; j < labels[i].length; j++) {
-        if (mask[j]) {
-          labels[i][j] = currentOutputs[j];
-        }
-      }
-    }
-  }
-
-  // Phase 4: Capture weights before training for gradient flow analysis
-  if (phase4) phase4.captureBeforeTrain();
-
   iml.trainAsync(({ loss, outputs }) => {
-    // Phase 4: Capture weights after training for gradient flow analysis
-    if (phase4) phase4.captureAfterTrain();
-
     routeOutputs(outputs);
     updateHeatmap(outputs);
     syncRawParamsFromOutputs(outputs);
@@ -1857,6 +2013,7 @@ function updateStatus() {
   text += ` \u00b7 noise ${noiseLevel.toFixed(3)}`;
 
   $statusText.textContent = text;
+  syncEngineParams();
 }
 
 // ---- Loss plot ----
@@ -1888,89 +2045,110 @@ function drawLossPlot() {
 }
 
 // ---- Raw param sliders ----
-function buildRawParams() {
-  $rawParams.innerHTML = '';
-  const isSynth = outputMode === 'synth';
-  const count = isSynth ? N_SYNTH_OUTPUTS : N_VISUAL_OUTPUTS;
-  const names = isSynth ? SYNTH_PARAM_NAMES : VISUAL_PARAM_NAMES;
+// ---- Engine Parameters (NISPS tuning) ----
+function buildEngineParams() {
+  const container = $engineParams;
+  if (!container) return;
+  container.innerHTML = '';
 
-  for (let i = 0; i < count; i++) {
+  const params = [
+    {
+      label: 'Spread', key: 'spread',
+      get: () => spreadLevel, set: (v) => { spreadLevel = v; },
+      min: 0, max: 1, step: 0.01,
+      desc: 'Weight init scale & RL noise regime (0=polarised, 1=centered)',
+    },
+    {
+      label: 'Noise', key: 'noise',
+      get: () => noiseLevel, set: (v) => { noiseLevel = v; updateNoiseRing(); },
+      min: 0, max: 0.5, step: 0.001,
+      desc: 'Current RL exploration noise level',
+    },
+    {
+      label: 'RL Decay', key: 'rlDecay',
+      get: () => rlExplorationDecay, set: (v) => { rlExplorationDecay = v; },
+      min: 0.8, max: 1.0, step: 0.005,
+      desc: 'Noise decay per thumbs-up (lower = faster convergence)',
+    },
+    {
+      label: 'Learn Rate', key: 'lr',
+      get: () => iml.learningRate, set: (v) => { iml.learningRate = v; },
+      min: 0.01, max: 5.0, step: 0.01,
+      desc: 'MLP training learning rate',
+    },
+    {
+      label: 'Max Iters', key: 'maxIter',
+      get: () => iml.maxIterations, set: (v) => { iml.maxIterations = Math.round(v); },
+      min: 50, max: 5000, step: 50,
+      desc: 'Max training iterations per train() call',
+    },
+    {
+      label: 'Convergence', key: 'conv',
+      get: () => iml.convergenceThreshold, set: (v) => { iml.convergenceThreshold = v; },
+      min: 0.000001, max: 0.01, step: 0.000001,
+      desc: 'Stop training when loss drops below this',
+    },
+  ];
+
+  for (const p of params) {
     const row = document.createElement('div');
-    row.className = 'raw-param';
-    row.dataset.tooltip = `${names[i]}: ${rawParamValues[i].toFixed(2)}`;
+    row.className = 'engine-param';
 
     const label = document.createElement('span');
-    label.className = 'raw-param-label';
-    label.textContent = names[i];
+    label.className = 'engine-param-label';
+    label.textContent = p.label;
+    label.title = p.desc;
 
     const slider = document.createElement('input');
     slider.type = 'range';
-    slider.min = '0';
-    slider.max = '1';
-    slider.step = '0.01';
-    slider.value = rawParamValues[i];
-    slider.dataset.index = i;
+    slider.min = String(p.min);
+    slider.max = String(p.max);
+    slider.step = String(p.step);
+    slider.value = p.get();
 
     const val = document.createElement('span');
-    val.className = 'raw-param-val';
-    val.textContent = rawParamValues[i].toFixed(2);
+    val.className = 'engine-param-val';
+    val.textContent = formatEngineVal(p.get(), p.step);
 
     slider.addEventListener('input', () => {
-      const idx = parseInt(slider.dataset.index);
-      rawParamValues[idx] = parseFloat(slider.value);
-      val.textContent = rawParamValues[idx].toFixed(2);
-      row.dataset.tooltip = `${names[idx]}: ${rawParamValues[idx].toFixed(2)}`;
-      routeOutputs(rawParamValues);
-      updateHeatmap(rawParamValues);
+      const v = parseFloat(slider.value);
+      p.set(v);
+      val.textContent = formatEngineVal(v, p.step);
     });
 
     row.appendChild(label);
     row.appendChild(slider);
     row.appendChild(val);
-    $rawParams.appendChild(row);
+    container.appendChild(row);
+
+    // Store ref for live updates
+    row._paramDef = p;
+    row._slider = slider;
+    row._val = val;
   }
 }
 
+function formatEngineVal(v, step) {
+  if (step < 0.0001) return v.toExponential(1);
+  if (step < 0.01) return v.toFixed(3);
+  if (step < 1) return v.toFixed(2);
+  return String(Math.round(v));
+}
+
+function syncEngineParams() {
+  if (!$engineParams) return;
+  const rows = $engineParams.querySelectorAll('.engine-param');
+  rows.forEach(row => {
+    const p = row._paramDef;
+    if (!p) return;
+    const v = p.get();
+    row._slider.value = v;
+    row._val.textContent = formatEngineVal(v, parseFloat(row._slider.step));
+  });
+}
+
 function syncRawParamsFromOutputs(outputs) {
   rawParamValues = [...outputs];
-  const rows = $rawParams.querySelectorAll('.raw-param');
-  rows.forEach((row, i) => {
-    if (i < outputs.length) {
-      const s = row.querySelector('input[type="range"]');
-      if (s) {
-        s.value = outputs[i];
-        s.nextElementSibling.textContent = outputs[i].toFixed(2);
-      }
-      const name = row.querySelector('.raw-param-label')?.textContent || `p${i}`;
-      row.dataset.tooltip = `${name}: ${outputs[i].toFixed(2)}`;
-    }
-  });
-}
-
-// ---- ShapeSeq lazy init (feature-flagged) ----
-async function ensureShapeSeqInit() {
-  if (!ENABLE_SHAPESEQ) return;
-  if (shapeSeq) return;
-  if (!c15 || !c15.audioContext) return;
-  try {
-    const mods = await getShapeSeqModules();
-    const eventBus = mods.getDefaultBus(c15.audioContext);
-    shapeSeq = new mods.ShapeSeqEngine({ audioContext: c15.audioContext, eventBus, c15Bridge: c15 });
-    await shapeSeq.init();
-    const seqVizCanvas = document.getElementById('shapeseq-viz');
-    const seqChainContainer = document.getElementById('shapeseq-chain');
-    if (seqVizCanvas && !stepViz) {
-      stepViz = new mods.StepVisualizer({ canvas: seqVizCanvas, eventBus });
-      const rect = seqVizCanvas.getBoundingClientRect();
-      if (rect.width > 0 && rect.height > 0) stepViz.resize(rect.width, rect.height);
-    }
-    if (seqChainContainer && !chainUI) {
-      chainUI = new mods.ChainBuilderUI({ container: seqChainContainer, chain: shapeSeq.getChain(), eventBus });
-    }
-    console.log('[NISPS] ShapeSeq initialized');
-  } catch (err) {
-    console.error('[NISPS] ShapeSeq init failed:', err);
-  }
 }
 
 // ---- Synth controls ----
@@ -1982,6 +2160,7 @@ function wireSynthControls() {
   const arpTempo = document.getElementById('arp-tempo');
   const arpOctaves = document.getElementById('arp-octaves');
   const arpOffset = document.getElementById('arp-offset');
+  if (!startBtn || !volumeSlider || !arpToggle) return;
 
   startBtn.addEventListener('click', async () => {
     const quickPlay = document.getElementById('quick-play');
@@ -1993,7 +2172,6 @@ function wireSynthControls() {
       if (quickPlay) quickPlay.classList.add('audio-needs-init');
     } else {
       await c15.start();
-      await ensureShapeSeqInit();
       startBtn.textContent = 'Stop Audio';
       if (quickPlay) quickPlay.classList.remove('audio-needs-init');
       routeOutputs(iml.getOutputs());
@@ -2044,22 +2222,6 @@ function wireSynthControls() {
   });
 }
 
-// ---- OSC Output ----
-function toggleOSC() {
-  if (oscOutput.connected || oscOutput.enabled) {
-    oscOutput.disconnect();
-  } else {
-    oscOutput.connect();
-  }
-}
-
-function wireOSCControls() {
-  const toggle = document.getElementById('osc-toggle');
-  const pill = document.getElementById('osc-pill');
-  if (toggle) toggle.addEventListener('click', toggleOSC);
-  if (pill) pill.addEventListener('click', toggleOSC);
-}
-
 // ---- MIDI Input ----
 async function initMIDIControls() {
   const row = document.getElementById('midi-row');
@@ -2107,6 +2269,164 @@ async function initMIDIControls() {
   });
 }
 
+// ---- MIDI CC Controls ----
+async function initMIDICCControls() {
+  const enableBtn = document.getElementById('midi-cc-enable-btn');
+  const outputSelect = document.getElementById('midi-cc-output-select');
+  const statusEl = document.getElementById('midi-cc-status');
+  const countEl = document.getElementById('midi-cc-count');
+  const addBtn = document.getElementById('midi-cc-add');
+  const removeBtn = document.getElementById('midi-cc-remove');
+  const importBtn = document.getElementById('midi-cc-import');
+  const exportBtn = document.getElementById('midi-cc-export');
+
+  if (!enableBtn || !outputSelect) return;
+
+  const available = await midiOutput.init();
+
+  function populateOutputs() {
+    const outputs = midiOutput.getOutputs();
+    outputSelect.innerHTML = '<option value="">No device</option>' +
+      outputs.map(o => `<option value="${o.id}">${o.name}</option>`).join('');
+  }
+
+  if (available) {
+    populateOutputs();
+    midiOutput.onOutputsChange = () => populateOutputs();
+  }
+
+  midiOutput.onStatusChange = (msg) => {
+    if (statusEl) statusEl.textContent = msg;
+  };
+
+  enableBtn.addEventListener('click', () => {
+    midiOutput.toggle();
+    enableBtn.classList.toggle('playing', midiOutput.enabled);
+  });
+
+  outputSelect.addEventListener('change', (e) => {
+    midiOutput.selectOutput(e.target.value || null);
+    if (e.target.value) midiOutput.enable();
+    enableBtn.classList.toggle('playing', midiOutput.enabled);
+  });
+
+  // Update count display
+  function updateCountDisplay() {
+    if (countEl) countEl.textContent = midiCCMap.length;
+  }
+  updateCountDisplay();
+
+  // Add CC param
+  if (addBtn) {
+    addBtn.addEventListener('click', async () => {
+      midiCCMap.push(createCCParam(74, 1));
+      midiCCOverrides.push({ min: 0, max: 1, curve: 0.5, frozen: false, fixedValue: 0.5 });
+      _generateCCColors(midiCCMap.length);
+      saveCCMap(midiCCMap);
+      updateCountDisplay();
+
+      // Resize MLP if we're in midi-cc mode
+      if (outputMode === 'midi-cc') {
+        await resizeMLP(midiCCMap.length);
+        buildHeatmap();
+        updateHeatmap(iml.getOutputs());
+      }
+    });
+  }
+
+  // Remove last CC param
+  if (removeBtn) {
+    removeBtn.addEventListener('click', async () => {
+      if (midiCCMap.length <= 1) return;
+      midiCCMap.pop();
+      midiCCOverrides.pop();
+      _generateCCColors(midiCCMap.length);
+      saveCCMap(midiCCMap);
+      updateCountDisplay();
+
+      if (outputMode === 'midi-cc') {
+        await resizeMLP(midiCCMap.length);
+        buildHeatmap();
+        updateHeatmap(iml.getOutputs());
+      }
+    });
+  }
+
+  // Export
+  if (exportBtn) {
+    exportBtn.addEventListener('click', () => {
+      const json = exportCCMap(midiCCMap);
+      navigator.clipboard.writeText(json).then(
+        () => { if (statusEl) statusEl.textContent = 'Copied to clipboard'; },
+        () => {
+          // Fallback: prompt
+          prompt('Copy this JSON:', json);
+        }
+      );
+    });
+  }
+
+  // Import
+  if (importBtn) {
+    importBtn.addEventListener('click', async () => {
+      const json = prompt('Paste MIDI CC map JSON:');
+      if (!json) return;
+      const parsed = importCCMap(json);
+      if (!parsed) {
+        alert('Invalid MIDI CC map JSON');
+        return;
+      }
+      midiCCMap.length = 0;
+      midiCCMap.push(...parsed);
+      midiCCOverrides.length = 0;
+      midiCCOverrides.push(...parsed.map(p => ({
+        min: p.min ?? 0, max: p.max ?? 1, curve: p.curve ?? 0.5,
+        frozen: p.muted ?? false, fixedValue: p.fixedValue ?? 0.5,
+      })));
+      _generateCCColors(midiCCMap.length);
+      saveCCMap(midiCCMap);
+      updateCountDisplay();
+
+      if (outputMode === 'midi-cc') {
+        await resizeMLP(midiCCMap.length);
+        buildHeatmap();
+        updateHeatmap(iml.getOutputs());
+      }
+    });
+  }
+
+  // Build the per-param editor in the drawer
+  buildMidiCCParamList();
+}
+
+function buildMidiCCParamList() {
+  const container = document.getElementById('midi-cc-param-list');
+  if (!container) return;
+  container.innerHTML = '';
+
+  for (let i = 0; i < midiCCMap.length; i++) {
+    const p = midiCCMap[i];
+    const row = document.createElement('div');
+    row.className = 'synth-row midi-cc-param-row';
+    row.style.borderLeft = `3px solid ${MIDI_CC_PARAM_COLORS[i] || '#888'}`;
+
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'midi-cc-param-name';
+    nameSpan.textContent = `${p.name}`;
+    nameSpan.style.flex = '1';
+    nameSpan.style.fontSize = '0.75rem';
+
+    const ccSpan = document.createElement('span');
+    ccSpan.style.opacity = '0.6';
+    ccSpan.style.fontSize = '0.65rem';
+    ccSpan.textContent = `CC${p.cc} Ch${p.channel}`;
+
+    row.appendChild(nameSpan);
+    row.appendChild(ccSpan);
+    container.appendChild(row);
+  }
+}
+
 // ---- Gamepad ----
 function wireGamepad() {
   gamepad = new GamepadInput({
@@ -2142,15 +2462,6 @@ function wireKeyboard() {
   window.addEventListener('keydown', (e) => {
     if (e.repeat) return;
 
-    if (e.key === 'Escape') {
-      if (sheetExpanded) {
-        sheetExpanded = false;
-        $bottomSheet.classList.remove('expanded');
-        $chevronBtn.classList.remove('open');
-        return;
-      }
-    }
-
     // Don't intercept keys when an input/select has focus
     const tag = document.activeElement?.tagName;
     if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
@@ -2161,6 +2472,9 @@ function wireKeyboard() {
     } else if (e.key === '2' || e.code === 'Numpad2') {
       e.preventDefault();
       onThumbsUp();
+    } else if (e.key === 'z' || e.key === 'Z') {
+      e.preventDefault();
+      onUndo();
     }
   });
 }
@@ -2189,6 +2503,8 @@ function wireQuickPlayControls() {
   const quickBpm = document.getElementById('quick-bpm');
   const quickBpmVal = document.getElementById('quick-bpm-val');
 
+  if (!quickPlay || !quickPlayIcon || !quickVol || !quickBpm) return;
+
   const playIconSVG = '<path d="M4 2l10 6-10 6z"/>';
   const pauseIconSVG = '<rect x="3" y="2" width="4" height="12"/><rect x="9" y="2" width="4" height="12"/>';
 
@@ -2210,7 +2526,6 @@ function wireQuickPlayControls() {
       if (arpToggle) arpToggle.textContent = 'Play';
     } else {
       await c15.start();
-      await ensureShapeSeqInit();
       arpeggiator.start();
       routeOutputs(iml.getOutputs());
       // Also update the bottom sheet controls
@@ -2246,6 +2561,11 @@ let $groupDrawer = null;
 let activeDrawerSection = -1;
 let drawerHideTimer = null;
 
+// ---- Heatmap param popup ----
+let $paramPopup = null;
+let activePopupParam = -1;
+let popupHideTimer = null;
+
 function wireGroupDrawer() {
   // Create the drawer DOM element once
   $groupDrawer = document.createElement('div');
@@ -2562,19 +2882,11 @@ function hideGroupDrawer() {
 // ---- Resize ----
 function onResize() {
   hideGroupDrawer();
+  hideParamPopup();
   visualizer.resize();
   visualizer.initParticles();
   synthVisualizer.resize();
 
-  // Resize ShapeSeq step viz if visible
-  if (ENABLE_SHAPESEQ && stepViz && outputMode === 'synth') {
-    const vizCanvas = document.getElementById('shapeseq-viz');
-    if (vizCanvas) {
-      const rect = vizCanvas.getBoundingClientRect();
-      if (rect.width > 0 && rect.height > 0) stepViz.resize(rect.width, rect.height);
-    }
-  }
-
   // Resize joy-map canvas to match container
   const size = $joystickContainer.offsetWidth;
   if (size > 0) {
@@ -2584,127 +2896,29 @@ function onResize() {
   }
 }
 
-// ---- OSC bridge download ----
-// GitHub releases URL — update this when the repo is set up
-const OSC_RELEASE_BASE = 'https://github.com/MusicallyEmbodiedML/MEMLNaut-NISPS/releases/latest/download';
-
-function detectPlatform() {
-  const ua = navigator.userAgent.toLowerCase();
-  const platform = navigator.platform?.toLowerCase() || '';
-
-  if (ua.includes('win')) return { os: 'windows', arch: 'x86_64', label: 'Windows', ext: '.exe' };
-  if (ua.includes('mac') || platform.includes('mac')) {
-    // Check for Apple Silicon via WebGL renderer or default to ARM (most modern Macs)
-    const canvas = document.createElement('canvas');
-    const gl = canvas.getContext('webgl');
-    const renderer = gl?.getParameter(gl.RENDERER)?.toLowerCase() || '';
-    const isIntel = renderer.includes('intel') || ua.includes('intel');
-    return isIntel
-      ? { os: 'macos', arch: 'x86_64', label: 'macOS (Intel)', ext: '' }
-      : { os: 'macos', arch: 'arm64', label: 'macOS (Apple Silicon)', ext: '' };
-  }
-  if (ua.includes('linux')) {
-    const isArm = platform.includes('arm') || platform.includes('aarch');
-    return isArm
-      ? { os: 'linux', arch: 'arm64', label: 'Linux (ARM)', ext: '' }
-      : { os: 'linux', arch: 'x86_64', label: 'Linux', ext: '' };
-  }
-  return { os: 'linux', arch: 'x86_64', label: 'Linux', ext: '' };
-}
-
-function downloadOSCBinary() {
-  const p = detectPlatform();
-  const filename = `nisps-osc-bridge-${p.os}-${p.arch}${p.ext}`;
-  const url = `${OSC_RELEASE_BASE}/${filename}`;
-  window.open(url, '_blank');
-}
-
-function downloadOSCSource() {
-  // Download bridge.ts directly — it's self-contained with Deno
-  fetch('osc-bridge/bridge.ts').then(r => r.blob()).then(blob => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'nisps-osc-bridge.ts';
-    a.click();
-    URL.revokeObjectURL(url);
-  }).catch(() => {
-    alert('Failed to download. Make sure the server is serving the osc-bridge/ directory.');
-  });
-}
-
-function initOSCDownloadUI() {
-  const p = detectPlatform();
-
-  // Set platform name in button
-  const platformName = document.getElementById('osc-platform-name');
-  if (platformName) platformName.textContent = p.label;
-
-  // Set run instructions based on OS
-  const instructions = document.getElementById('osc-run-instructions');
-  if (instructions) {
-    if (p.os === 'windows') {
-      instructions.textContent = 'nisps-osc-bridge-windows-x86_64.exe';
-    } else if (p.os === 'macos') {
-      instructions.textContent =
-        `# First time only: allow the binary to run\n` +
-        `chmod +x nisps-osc-bridge-macos-${p.arch}\n` +
-        `xattr -d com.apple.quarantine nisps-osc-bridge-macos-${p.arch}\n\n` +
-        `./nisps-osc-bridge-macos-${p.arch}`;
-    } else {
-      instructions.textContent =
-        `chmod +x nisps-osc-bridge-linux-${p.arch}\n` +
-        `./nisps-osc-bridge-linux-${p.arch}`;
-    }
-  }
-}
-
 // ---- Help modal ----
 function wireHelp() {
   const overlay = document.getElementById('help-overlay');
-  const btnOpen = document.getElementById('help-btn');
   const btnClose = document.getElementById('help-close');
   const btnGotIt = document.getElementById('help-got-it');
 
-  function show() { overlay.classList.remove('hidden'); }
   function hide() { overlay.classList.add('hidden'); localStorage.setItem('nisps-help-seen', '1'); }
 
-  btnOpen.addEventListener('click', show);
+  // Help is opened via dock icon (handled in wireDock)
   btnClose.addEventListener('click', hide);
   btnGotIt.addEventListener('click', hide);
   overlay.addEventListener('click', (e) => { if (e.target === overlay) hide(); });
 
-  // OSC bridge download buttons
-  initOSCDownloadUI();
-  const oscDlBin = document.getElementById('osc-download-bin');
-  const oscDlSrc = document.getElementById('osc-download-src');
-  if (oscDlBin) oscDlBin.addEventListener('click', (e) => { e.stopPropagation(); downloadOSCBinary(); });
-  if (oscDlSrc) oscDlSrc.addEventListener('click', (e) => { e.stopPropagation(); downloadOSCSource(); });
-
   // Show on first visit
-  if (!localStorage.getItem('nisps-help-seen')) show();
+  if (!localStorage.getItem('nisps-help-seen')) overlay.classList.remove('hidden');
 }
 
 // ---- Animation ----
 function animate() {
-  // Phase 3: tick auto-explore timer and pressure indicators
-  const _animNow = performance.now();
-  const _animDt = _lastFrameTime > 0 ? (_animNow - _lastFrameTime) / 1000 : 1 / 60;
-  if (phase3) phase3.tick(_animDt);
-
   if (gamepad) gamepad.poll();
   if (outputMode === 'synth') {
     synthVisualizer.draw();
-    // ShapeSeq: route inputs and render step viz (feature-flagged)
-    if (ENABLE_SHAPESEQ && shapeSeq && shapeSeq.isPlaying) {
-      if (inputMode === 'hands' && handTracker && handTracker.active && handTracker.features) {
-        shapeSeq.setSequenceInputs([handTracker.features[0], handTracker.features[1]]);
-      } else {
-        shapeSeq.setSequenceInputs([joyX, joyY]);
-      }
-    }
-    if (ENABLE_SHAPESEQ && stepViz) stepViz.render();
-  } else {
+  } else if (outputMode === 'visual') {
     visualizer.draw();
   }
   requestAnimationFrame(animate);
@@ -2732,17 +2946,9 @@ function saveState() {
       joyX,
       joyY,
       groupOverrides,
+      visualOverrides,
+      midiCCOverrides,
       synthPresetId: activeSynthPresetId,
-      controlSurface: controlSurface ? controlSurface.getState() : null,
-      inputPipeline: inputPipeline ? inputPipeline.getConfig() : null,
-      // Phase 2: Pinning + History
-      snapshotStack: snapshotStack ? snapshotStack.getState() : null,
-      regionPins: regionPins ? regionPins.getState() : null,
-      paramPins: paramPins ? paramPins.getState() : null,
-      // Phase 3
-      phase3: phase3 ? phase3.getConfig() : null,
-      // Phase 4
-      outputPipeline: outputPipeline ? outputPipeline.getConfig() : null,
     };
     localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
   } catch (e) {
@@ -2750,7 +2956,7 @@ function saveState() {
   }
 }
 
-function loadState() {
+async function loadState() {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
     if (!raw) return;
@@ -2802,6 +3008,30 @@ function loadState() {
       }
     }
 
+    // Restore visual overrides
+    if (Array.isArray(state.visualOverrides)) {
+      for (let i = 0; i < state.visualOverrides.length && i < visualOverrides.length; i++) {
+        const sv = state.visualOverrides[i], vo = visualOverrides[i];
+        if (typeof sv.min === 'number') vo.min = sv.min;
+        if (typeof sv.max === 'number') vo.max = sv.max;
+        if (typeof sv.curve === 'number') vo.curve = sv.curve;
+        if (typeof sv.frozen === 'boolean') vo.frozen = sv.frozen;
+        if (typeof sv.fixedValue === 'number') vo.fixedValue = sv.fixedValue;
+      }
+    }
+
+    // Restore MIDI CC overrides
+    if (Array.isArray(state.midiCCOverrides)) {
+      for (let i = 0; i < state.midiCCOverrides.length && i < midiCCOverrides.length; i++) {
+        const sv = state.midiCCOverrides[i], ov = midiCCOverrides[i];
+        if (typeof sv.min === 'number') ov.min = sv.min;
+        if (typeof sv.max === 'number') ov.max = sv.max;
+        if (typeof sv.curve === 'number') ov.curve = sv.curve;
+        if (typeof sv.frozen === 'boolean') ov.frozen = sv.frozen;
+        if (typeof sv.fixedValue === 'number') ov.fixedValue = sv.fixedValue;
+      }
+    }
+
     // Restore synth preset id (just track it, don't re-apply — groupOverrides already restored above)
     if (typeof state.synthPresetId === 'string') {
       activeSynthPresetId = state.synthPresetId;
@@ -2809,37 +3039,10 @@ function loadState() {
 
     // Restore output mode
     if (state.outputMode && state.outputMode !== outputMode) {
-      setOutputMode(state.outputMode);
+      await setOutputMode(state.outputMode, { skipConfirm: true });
       syncOutputToggles(outputMode);
     }
 
-    // Restore control surface state
-    if (state.controlSurface && controlSurface) {
-      controlSurface.setState(state.controlSurface);
-    }
-    if (state.inputPipeline && inputPipeline) {
-      inputPipeline.setConfig(state.inputPipeline);
-    }
-
-    // Phase 2: Restore pinning + history state
-    if (state.snapshotStack && snapshotStack) {
-      snapshotStack.setState(state.snapshotStack);
-    }
-    if (state.regionPins && regionPins) {
-      regionPins.setState(state.regionPins);
-    }
-    if (state.paramPins && paramPins) {
-      paramPins.setState(state.paramPins);
-    }
-    // Phase 3: restore config
-    if (state.phase3 && phase3) {
-      phase3.setConfig(state.phase3);
-    }
-    // Phase 4: restore output pipeline
-    if (state.outputPipeline && outputPipeline) {
-      outputPipeline.setConfig(state.outputPipeline);
-    }
-
     // Note: don't auto-restore inputMode='hands' — requires camera permission
     console.log(`[NISPS] Restored ${state.features?.length || 0} joy examples, ${state.handFeatures?.length || 0} hand examples from storage`);
   } catch (e) {
diff --git a/playground/js/midi/midi-cc-map.js b/playground/js/midi/midi-cc-map.js
new file mode 100644
index 0000000..8ff18ef
--- /dev/null
+++ b/playground/js/midi/midi-cc-map.js
@@ -0,0 +1,104 @@
+// MIDI CC Map — user-defined CC parameter definitions
+// Each param maps one MLP output to a MIDI CC message.
+
+const STORAGE_KEY = 'nisps-midi-cc-map';
+
+// Default starter set — common CC numbers
+const DEFAULT_CC_MAP = [
+  { name: 'Cutoff',    cc: 74, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+  { name: 'Resonance', cc: 71, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+  { name: 'Attack',    cc: 73, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+  { name: 'Release',   cc: 72, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+  { name: 'Mod Wheel', cc:  1, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+  { name: 'Volume',    cc:  7, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+  { name: 'Pan',       cc: 10, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+  { name: 'Expression',cc: 11, channel: 1, min: 0, max: 1, curve: 0.5, muted: false, fixedValue: 0.5 },
+];
+
+// Well-known CC names for auto-labeling
+const CC_NAMES = {
+  1: 'Mod Wheel', 2: 'Breath', 5: 'Portamento Time', 7: 'Volume', 10: 'Pan',
+  11: 'Expression', 64: 'Sustain', 65: 'Portamento', 66: 'Sostenuto',
+  67: 'Soft Pedal', 70: 'Sound Variation', 71: 'Resonance', 72: 'Release',
+  73: 'Attack', 74: 'Cutoff', 75: 'Decay', 76: 'Vib Rate', 77: 'Vib Depth',
+  78: 'Vib Delay', 91: 'Reverb', 92: 'Tremolo', 93: 'Chorus', 94: 'Detune',
+  95: 'Phaser',
+};
+
+/**
+ * Create a fresh CC param with defaults.
+ * @param {number} [cc=74] — CC number
+ * @param {number} [channel=1] — MIDI channel 1-16
+ * @returns {object} CC param definition
+ */
+export function createCCParam(cc = 74, channel = 1) {
+  return {
+    name: CC_NAMES[cc] || `CC ${cc}`,
+    cc,
+    channel,
+    min: 0,
+    max: 1,
+    curve: 0.5,
+    muted: false,
+    fixedValue: 0.5,
+  };
+}
+
+/**
+ * Load CC map from localStorage, or return default.
+ * @returns {Array} CC param definitions
+ */
+export function loadCCMap() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const saved = JSON.parse(raw);
+      if (Array.isArray(saved) && saved.length > 0) return saved;
+    }
+  } catch (e) {
+    console.warn('[MIDI CC] Failed to load map:', e);
+  }
+  return DEFAULT_CC_MAP.map(p => ({ ...p }));
+}
+
+/**
+ * Save CC map to localStorage.
+ * @param {Array} ccMap
+ */
+export function saveCCMap(ccMap) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(ccMap));
+  } catch (e) {
+    console.warn('[MIDI CC] Failed to save map:', e);
+  }
+}
+
+/**
+ * Export CC map as JSON string (for sharing).
+ * @param {Array} ccMap
+ * @returns {string}
+ */
+export function exportCCMap(ccMap) {
+  return JSON.stringify(ccMap, null, 2);
+}
+
+/**
+ * Import CC map from JSON string.
+ * @param {string} json
+ * @returns {Array|null} parsed map or null on failure
+ */
+export function importCCMap(json) {
+  try {
+    const parsed = JSON.parse(json);
+    if (!Array.isArray(parsed) || parsed.length === 0) return null;
+    // Validate shape
+    for (const p of parsed) {
+      if (typeof p.cc !== 'number' || typeof p.channel !== 'number') return null;
+    }
+    return parsed;
+  } catch (e) {
+    return null;
+  }
+}
+
+export { CC_NAMES, DEFAULT_CC_MAP };
diff --git a/playground/js/midi/midi-output.js b/playground/js/midi/midi-output.js
new file mode 100644
index 0000000..479d4d6
--- /dev/null
+++ b/playground/js/midi/midi-output.js
@@ -0,0 +1,147 @@
+// MIDI Output — sends CC messages to external MIDI devices
+// Uses Web MIDI API, complementary to midi-input.js
+
+export class MIDIOutput {
+  constructor() {
+    this.enabled = false;
+    this.midiAccess = null;
+    this.selectedOutputId = null;
+    this.activeOutput = null;
+    this._onStatusChange = null;
+    this._onOutputsChange = null;
+    this._boundOnStateChange = this._onStateChange.bind(this);
+
+    // Throttling
+    this._lastSentCC = new Map(); // key: `${channel}-${cc}` -> value
+    this._lastSendTime = 0;
+    this.sendInterval = 50; // ms — max ~20 sends/sec
+    this.deadZone = 1; // skip if CC value hasn't changed by at least 1
+  }
+
+  set onStatusChange(fn) { this._onStatusChange = fn; }
+  set onOutputsChange(fn) { this._onOutputsChange = fn; }
+
+  _status(msg) {
+    console.log('[MIDI Out]', msg);
+    this._onStatusChange?.(msg);
+  }
+
+  /** Request MIDI access. Returns true if available. */
+  async init() {
+    if (this.midiAccess) return true;
+
+    if (!navigator.requestMIDIAccess) {
+      this._status('Web MIDI not supported');
+      return false;
+    }
+
+    try {
+      this.midiAccess = await navigator.requestMIDIAccess({ sysex: false });
+      this.midiAccess.onstatechange = this._boundOnStateChange;
+      this._status('MIDI output available');
+      return true;
+    } catch (err) {
+      this._status(`MIDI access denied: ${err.message}`);
+      return false;
+    }
+  }
+
+  /** Get list of available MIDI outputs as [{id, name}] */
+  getOutputs() {
+    if (!this.midiAccess) return [];
+    const outputs = [];
+    for (const [id, output] of this.midiAccess.outputs) {
+      outputs.push({ id, name: output.name || `MIDI Output ${id}` });
+    }
+    return outputs;
+  }
+
+  /** Select a specific MIDI output by id */
+  selectOutput(outputId) {
+    this.selectedOutputId = outputId;
+    this.activeOutput = null;
+    this._lastSentCC.clear();
+
+    if (!this.midiAccess || !outputId) return;
+    const output = this.midiAccess.outputs.get(outputId);
+    if (output) {
+      this.activeOutput = output;
+      this._status(`Selected: ${output.name}`);
+    }
+  }
+
+  enable() {
+    if (this.enabled) return;
+    this.enabled = true;
+    this._status('MIDI output enabled');
+  }
+
+  disable() {
+    if (!this.enabled) return;
+    this.enabled = false;
+    this._status('MIDI output disabled');
+  }
+
+  toggle() {
+    if (this.enabled) this.disable();
+    else this.enable();
+  }
+
+  /**
+   * Send a CC message. channel is 1-16, cc is 0-127, value is 0-127.
+   * Applies dead-zone filtering (skips if value unchanged).
+   */
+  sendCC(channel, cc, value) {
+    if (!this.enabled || !this.activeOutput) return;
+
+    const ch = Math.max(0, Math.min(15, (channel - 1) | 0));
+    const ccNum = Math.max(0, Math.min(127, cc | 0));
+    const val = Math.max(0, Math.min(127, value | 0));
+
+    // Dead-zone filter
+    const key = `${ch}-${ccNum}`;
+    const lastVal = this._lastSentCC.get(key);
+    if (lastVal !== undefined && Math.abs(val - lastVal) < this.deadZone) return;
+
+    this._lastSentCC.set(key, val);
+    this.activeOutput.send([0xB0 | ch, ccNum, val]);
+  }
+
+  /**
+   * Send multiple CC values at once (throttled).
+   * @param {Array<{channel: number, cc: number, value: number}>} messages
+   */
+  sendBatch(messages) {
+    if (!this.enabled || !this.activeOutput) return;
+
+    const now = performance.now();
+    if (now - this._lastSendTime < this.sendInterval) return;
+    this._lastSendTime = now;
+
+    for (const msg of messages) {
+      this.sendCC(msg.channel, msg.cc, msg.value);
+    }
+  }
+
+  _onStateChange(e) {
+    this._onOutputsChange?.(this.getOutputs());
+    // Reconnect if selected device was re-plugged
+    if (this.selectedOutputId && this.enabled) {
+      const output = this.midiAccess.outputs.get(this.selectedOutputId);
+      if (output) {
+        this.activeOutput = output;
+      } else {
+        this.activeOutput = null;
+      }
+    }
+  }
+
+  destroy() {
+    this.disable();
+    if (this.midiAccess) {
+      this.midiAccess.onstatechange = null;
+    }
+    this.midiAccess = null;
+    this.activeOutput = null;
+  }
+}
diff --git a/playground/js/synth/arpeggiator-worker.js b/playground/js/synth/arpeggiator-worker.js
index 1565179..e4ac49f 100644
--- a/playground/js/synth/arpeggiator-worker.js
+++ b/playground/js/synth/arpeggiator-worker.js
@@ -7,7 +7,16 @@ const HEADER_SIZE = 3;
 const MESSAGE_SIZE = 4;
 const RING_CAPACITY = 512;
 
+// Cmin7 inversions: root [0,3,7,10], 1st [3,7,10,12], 2nd [7,10,12,15], 3rd [10,12,15,19]
+const CMIN7_INVERSIONS = [
+  [0, 3, 7, 10],
+  [3, 7, 10, 12],
+  [7, 10, 12, 15],
+  [10, 12, 15, 19],
+];
+
 const PROGRESSIONS = {
+  'Cmin7-rand': null, // special case: random inversions
   'I-vi-IV-V': [[0,4,7],[9,12,16],[5,9,12],[7,11,14]],
   'I-IV-vi-V': [[0,4,7],[5,9,12],[9,12,16],[7,11,14]],
   'i-VI-III-VII': [[0,3,7],[8,12,15],[3,7,10],[10,14,17]],
@@ -44,9 +53,12 @@ let playing = false;
 let bpm = 120;
 let octaves = 2;
 let octaveOffset = 0;
-let progression = 'I-vi-IV-V';
+let progression = 'Cmin7-rand';
+let direction = 'updown'; // 'up' or 'updown'
 let chordIndex = 0;
 let noteIndex = 0;
+let ascending = true; // for updown mode
+let currentInversion = null; // cached Cmin7 inversion for current cycle
 let lastNote = -1;
 let timer = null;
 
@@ -58,17 +70,27 @@ function scheduleNext() {
   timer = setTimeout(scheduleNext, noteDuration);
 }
 
-function playNextNote() {
-  const chords = PROGRESSIONS[progression] || PROGRESSIONS['I-vi-IV-V'];
-
-  // Release previous note
-  if (lastNote >= 0) {
-    ringWrite(MESSAGE_TYPE.NOTE_OFF, lastNote, 0);
-  }
-
-  const chord = chords[chordIndex];
+function getChordNotes() {
   const baseNote = 48 + (octaveOffset * 12);
 
+  if (progression === 'Cmin7-rand') {
+    // Pick a random inversion once per cycle, cache until next chord advance
+    if (!currentInversion) {
+      currentInversion = CMIN7_INVERSIONS[Math.floor(Math.random() * CMIN7_INVERSIONS.length)];
+    }
+    const inv = currentInversion;
+    const notes = [];
+    for (let oct = 0; oct < octaves; oct++) {
+      for (const interval of inv) {
+        const note = baseNote + interval + (oct * 12);
+        if (note >= 0 && note <= 127) notes.push(note);
+      }
+    }
+    return notes;
+  }
+
+  const chords = PROGRESSIONS[progression] || PROGRESSIONS['I-vi-IV-V'];
+  const chord = chords[chordIndex];
   const notes = [];
   for (let oct = 0; oct < octaves; oct++) {
     for (const interval of chord) {
@@ -76,19 +98,55 @@ function playNextNote() {
       if (note >= 0 && note <= 127) notes.push(note);
     }
   }
+  return notes;
+}
 
+function advanceIndex(notes) {
+  const chords = PROGRESSIONS[progression];
+  const chordCount = (progression === 'Cmin7-rand') ? 1 : (chords ? chords.length : 1);
+
+  if (direction === 'updown' && notes.length > 1) {
+    if (ascending) {
+      noteIndex++;
+      if (noteIndex >= notes.length) {
+        ascending = false;
+        noteIndex = notes.length - 2; // bounce back, skip the top note
+      }
+    } else {
+      noteIndex--;
+      if (noteIndex <= 0) {
+        ascending = true;
+        noteIndex = 0;
+        chordIndex = (chordIndex + 1) % chordCount;
+        currentInversion = null; // pick new random inversion next cycle
+      }
+    }
+  } else {
+    // up only
+    noteIndex++;
+    if (noteIndex >= notes.length) {
+      noteIndex = 0;
+      chordIndex = (chordIndex + 1) % chordCount;
+      currentInversion = null; // pick new random inversion next cycle
+    }
+  }
+}
+
+function playNextNote() {
+  // Release previous note
+  if (lastNote >= 0) {
+    ringWrite(MESSAGE_TYPE.NOTE_OFF, lastNote, 0);
+  }
+
+  const notes = getChordNotes();
   if (notes.length === 0) return;
 
-  const note = notes[noteIndex % notes.length];
+  const note = notes[Math.min(noteIndex, notes.length - 1)];
   const velocity = 0.6 + Math.random() * 0.2;
   ringWrite(MESSAGE_TYPE.NOTE_ON, note, velocity);
   lastNote = note;
 
-  noteIndex++;
-  if (noteIndex >= notes.length) {
-    noteIndex = 0;
-    chordIndex = (chordIndex + 1) % chords.length;
-  }
+  advanceIndex(notes);
 }
 
 function start() {
@@ -96,6 +154,8 @@ function start() {
   playing = true;
   chordIndex = 0;
   noteIndex = 0;
+  ascending = true;
+  currentInversion = null;
   scheduleNext();
   postMessage({ type: 'state', playing: true });
 }
@@ -133,6 +193,7 @@ self.onmessage = (e) => {
       if ('octaves' in data) octaves = data.octaves;
       if ('octaveOffset' in data) octaveOffset = data.octaveOffset;
       if ('progression' in data) progression = data.progression;
+      if ('direction' in data) direction = data.direction;
       break;
   }
 };
diff --git a/playground/js/synth/arpeggiator.js b/playground/js/synth/arpeggiator.js
index a49f2b3..c191bbf 100644
--- a/playground/js/synth/arpeggiator.js
+++ b/playground/js/synth/arpeggiator.js
@@ -11,11 +11,16 @@ export class Arpeggiator {
     this._bpm = 120;
     this._octaves = 2;
     this._octaveOffset = 0;
-    this._progression = 'I-vi-IV-V';
+    this._progression = 'Cmin7-rand';
+    this._direction = 'updown';
   }
 
   get progressionNames() {
-    return ['I-vi-IV-V', 'I-IV-vi-V', 'i-VI-III-VII', 'I-V-vi-IV'];
+    return ['Cmin7-rand', 'I-vi-IV-V', 'I-IV-vi-V', 'i-VI-III-VII', 'I-V-vi-IV'];
+  }
+
+  get directionNames() {
+    return ['up', 'updown'];
   }
 
   get playing() { return this._playing; }
@@ -44,6 +49,12 @@ export class Arpeggiator {
     this._send('set', { progression: v });
   }
 
+  get direction() { return this._direction; }
+  set direction(v) {
+    this._direction = v;
+    this._send('set', { direction: v });
+  }
+
   _ensureWorker() {
     if (this._worker) return;
 
@@ -70,6 +81,7 @@ export class Arpeggiator {
       octaves: this._octaves,
       octaveOffset: this._octaveOffset,
       progression: this._progression,
+      direction: this._direction,
     });
   }
 
diff --git a/playground/js/ui/control-surface-ui.js b/playground/js/ui/control-surface-ui.js
index 1dd2fb8..238137a 100644
--- a/playground/js/ui/control-surface-ui.js
+++ b/playground/js/ui/control-surface-ui.js
@@ -106,7 +106,7 @@ export function initControlSurfaceUI() {
   surface.applyPreset('default');
 
   // --- Floating bar: compound axis sliders ---
-  const $floatingBar = document.getElementById('floating-bar');
+  const $barContent = document.querySelector('.floating-bar-content') || document.getElementById('floating-bar');
   const axisContainer = document.createElement('div');
   axisContainer.className = 'cs-axes';
   axisContainer.innerHTML = `
@@ -124,13 +124,7 @@ export function initControlSurfaceUI() {
     </div>
   `;
 
-  // Insert before the chevron button
-  const $chevron = document.getElementById('chevron-btn');
-  if ($chevron) {
-    $floatingBar.insertBefore(axisContainer, $chevron);
-  } else {
-    $floatingBar.appendChild(axisContainer);
-  }
+  $barContent.appendChild(axisContainer);
 
   // Wire axis sliders
   const axisSliders = {};
diff --git a/playground/js/ui/control-surface.js b/playground/js/ui/control-surface.js
index 84576a3..6bf8daf 100644
--- a/playground/js/ui/control-surface.js
+++ b/playground/js/ui/control-surface.js
@@ -23,8 +23,8 @@ const MEMORY_TABLE = [
 
 const PRECISION_TABLE = [
   [0.0, { inputCurve: 1.0, deadzone: 0.0,  smoothing: 0.0,  slewRate: 1.0, momentumZoom: 'off' }],
-  [0.5, { inputCurve: 1.5, deadzone: 0.05, smoothing: 0.15, slewRate: 0.3, momentumZoom: 'gentle' }],
-  [1.0, { inputCurve: 3.0, deadzone: 0.15, smoothing: 0.40, slewRate: 0.1, momentumZoom: 'strong' }],
+  [0.5, { inputCurve: 1.5, deadzone: 0.05, smoothing: 0.15, slewRate: 0.3, momentumZoom: 'off' }],
+  [1.0, { inputCurve: 3.0, deadzone: 0.15, smoothing: 0.40, slewRate: 0.1, momentumZoom: 'off' }],
 ];
 
 // ---- Control Presets ----
diff --git a/playground/js/ui/input-pipeline.js b/playground/js/ui/input-pipeline.js
index 34fde31..49ef8d1 100644
--- a/playground/js/ui/input-pipeline.js
+++ b/playground/js/ui/input-pipeline.js
@@ -40,7 +40,7 @@ export const SMOOTHING_MAX = 0.95;
 /** @type {string} Default momentum-zoom mode */
 export const DEFAULT_MOMENTUM_ZOOM = 'off';
 /** @type {string} Default anchor mode */
-export const DEFAULT_ANCHOR_MODE = 'auto';
+export const DEFAULT_ANCHOR_MODE = 'center';
 /** @type {number} Default velocity estimation window in ms */
 export const DEFAULT_VELOCITY_WINDOW = 150;
 
@@ -218,6 +218,18 @@ export class InputPipeline {
     x = applyDeadzone(x, this._deadzone);
     y = applyDeadzone(y, this._deadzone);
 
+    // --- 1.5. Circular clamp ---
+    // Constrain input to a unit circle (radius 0.5 centered at 0.5,0.5)
+    // so the reachable input space matches the circular joystick UI.
+    const cx = x - 0.5;
+    const cy = y - 0.5;
+    const dist = Math.sqrt(cx * cx + cy * cy);
+    if (dist > 0.5) {
+      const scale = 0.5 / dist;
+      x = 0.5 + cx * scale;
+      y = 0.5 + cy * scale;
+    }
+
     // --- 2. Zoom ---
     const anchorX = this._resolveAnchorX();
     const anchorY = this._resolveAnchorY();
@@ -401,24 +413,34 @@ export class InputPipeline {
   }
 
   /**
-   * Get the zoom window bounds in [0,1] space — useful for minimap rendering.
-   * Returns the rectangle of input space that the joystick currently covers.
-   * @returns {{ x1: number, y1: number, x2: number, y2: number }}
+   * Get the zoom window as a circle in [0,1] space — for minimap rendering.
+   * Returns center + radius of the input space the joystick currently covers.
+   * @returns {{ cx: number, cy: number, r: number }}
    */
   getZoomWindow() {
     const anchorX = this._resolveAnchorX();
     const anchorY = this._resolveAnchorY();
-    const baseZoomX = this._zoomX != null ? this._zoomX : this._zoom;
-    const baseZoomY = this._zoomY != null ? this._zoomY : this._zoom;
-    const effZoomX = clamp(baseZoomX * this._momentumZoomMultiplier, ZOOM_MIN, ZOOM_MAX);
-    const effZoomY = clamp(baseZoomY * this._momentumZoomMultiplier, ZOOM_MIN, ZOOM_MAX);
-    const halfX = effZoomX / 2;
-    const halfY = effZoomY / 2;
+    const baseZoom = this._zoomX != null ? this._zoomX : this._zoom;
+    const effZoom = clamp(baseZoom * this._momentumZoomMultiplier, ZOOM_MIN, ZOOM_MAX);
     return {
-      x1: clamp(anchorX - halfX, 0, 1),
-      y1: clamp(anchorY - halfY, 0, 1),
-      x2: clamp(anchorX + halfX, 0, 1),
-      y2: clamp(anchorY + halfY, 0, 1),
+      cx: anchorX,
+      cy: anchorY,
+      r: effZoom / 2,
+    };
+  }
+
+  /**
+   * Get the zoom window as an axis-aligned bounding rect in [0,1] space.
+   * For consumers that need {x1, y1, x2, y2} (heatmap, region pinning).
+   * @returns {{ x1: number, y1: number, x2: number, y2: number }}
+   */
+  getZoomWindowRect() {
+    const { cx, cy, r } = this.getZoomWindow();
+    return {
+      x1: clamp(cx - r, 0, 1),
+      y1: clamp(cy - r, 0, 1),
+      x2: clamp(cx + r, 0, 1),
+      y2: clamp(cy + r, 0, 1),
     };
   }
 
diff --git a/playground/js/ui/joy-map-enhanced.js b/playground/js/ui/joy-map-enhanced.js
index e0a9ff9..cf57739 100644
--- a/playground/js/ui/joy-map-enhanced.js
+++ b/playground/js/ui/joy-map-enhanced.js
@@ -311,53 +311,39 @@ export class JoyMapEnhanced {
 
   // ---- Zoom window ----
 
+  /**
+   * Normalize zoom window to { cx, cy, r } circle format.
+   */
   _normalizeZoomWindow(zw, zoomLevel) {
-    if (zw && typeof zw.x1 === 'number') return zw;
+    if (zw && typeof zw.cx === 'number') return zw;
     // Synthesize from zoomLevel centered on 0.5
-    const half = zoomLevel / 2;
-    return {
-      x1: 0.5 - half,
-      y1: 0.5 - half,
-      x2: 0.5 + half,
-      y2: 0.5 + half
-    };
+    return { cx: 0.5, cy: 0.5, r: zoomLevel / 2 };
   }
 
   // ---- Drawing layers ----
 
   _drawDimOverlay(ctx, w, h, zw) {
-    if (zw.x1 <= 0 && zw.y1 <= 0 && zw.x2 >= 1 && zw.y2 >= 1) return; // no zoom
+    if (zw.r >= 0.5) return; // no zoom — circle covers entire space
 
-    // Draw dim overlay over the entire area, then clear the zoom window
+    // Draw dim overlay over the entire area, cut out the zoom circle
     ctx.save();
     ctx.fillStyle = DIM_OVERLAY;
 
-    // Use even-odd rule: outer rect minus zoom rect
+    const zcx = zw.cx * w;
+    const zcy = (1 - zw.cy) * h;
+    const zr = zw.r * Math.min(w, h);
+
+    // Even-odd: outer rect minus inner circle
     ctx.beginPath();
     ctx.rect(0, 0, w, h);
-    // Zoom window rect (Y inverted)
-    const zx1 = zw.x1 * w;
-    const zy1 = (1 - zw.y2) * h;
-    const zx2 = zw.x2 * w;
-    const zy2 = (1 - zw.y1) * h;
-    const zw_ = zx2 - zx1;
-    const zh_ = zy2 - zy1;
-    // Draw inner rect counter-clockwise for even-odd
-    ctx.moveTo(zx1, zy1);
-    ctx.lineTo(zx1, zy1 + zh_);
-    ctx.lineTo(zx1 + zw_, zy1 + zh_);
-    ctx.lineTo(zx1 + zw_, zy1);
-    ctx.closePath();
+    ctx.arc(zcx, zcy, zr, 0, Math.PI * 2, true); // counter-clockwise for cutout
     ctx.fill('evenodd');
     ctx.restore();
   }
 
   _drawGrid(ctx, w, h, zw, zoomLevel) {
     // Determine grid density based on zoom
-    // zoom 1.0 -> 4x4, 0.5 -> 8x8, 0.25 -> 16x16, etc.
-    // Base divisions = 4, multiply by 1/zoomLevel
-    const baseDivisions = 4;
-    const zoomScale = Math.max(zw.x2 - zw.x1, zw.y2 - zw.y1);
+    const zoomScale = zw.r * 2;
 
     // We draw multiple grid levels with fading
     // Level 0: 4x4 (always)
@@ -418,22 +404,25 @@ export class JoyMapEnhanced {
   }
 
   _drawZoomWindowBorder(ctx, w, h, zw) {
-    if (zw.x1 <= 0 && zw.y1 <= 0 && zw.x2 >= 1 && zw.y2 >= 1) return;
+    if (zw.r >= 0.5) return; // no zoom
 
-    const x1 = zw.x1 * w;
-    const y1 = (1 - zw.y2) * h;
-    const rw = (zw.x2 - zw.x1) * w;
-    const rh = (zw.y2 - zw.y1) * h;
+    const zcx = zw.cx * w;
+    const zcy = (1 - zw.cy) * h;
+    const zr = zw.r * Math.min(w, h);
 
     // Fill
+    ctx.beginPath();
+    ctx.arc(zcx, zcy, zr, 0, Math.PI * 2);
     ctx.fillStyle = ZOOM_WINDOW_FILL;
-    ctx.fillRect(x1, y1, rw, rh);
+    ctx.fill();
 
     // Border
+    ctx.beginPath();
+    ctx.arc(zcx, zcy, zr, 0, Math.PI * 2);
     ctx.strokeStyle = ZOOM_WINDOW_BORDER;
     ctx.lineWidth = 1.5;
     ctx.setLineDash([4, 3]);
-    ctx.strokeRect(x1, y1, rw, rh);
+    ctx.stroke();
     ctx.setLineDash([]);
   }
 
diff --git a/playground/js/ui/phase4-ui.js b/playground/js/ui/phase4-ui.js
index e869df3..5fab772 100644
--- a/playground/js/ui/phase4-ui.js
+++ b/playground/js/ui/phase4-ui.js
@@ -144,8 +144,8 @@ export function initPhase4UI(opts) {
 // ---------------------------------------------------------------------------
 
 function createFreezeButton(outputPipeline) {
-  const $floatingBar = document.getElementById('floating-bar');
-  if (!$floatingBar) {
+  const $barContent = document.querySelector('.floating-bar-content') || document.getElementById('floating-bar');
+  if (!$barContent) {
     console.warn('[Phase4] floating-bar not found');
     return document.createElement('button');
   }
@@ -163,13 +163,7 @@ function createFreezeButton(outputPipeline) {
     btn.title = frozen ? 'Unfreeze output' : 'Freeze output';
   });
 
-  // Insert before the chevron
-  const $chevron = document.getElementById('chevron-btn');
-  if ($chevron) {
-    $floatingBar.insertBefore(btn, $chevron);
-  } else {
-    $floatingBar.appendChild(btn);
-  }
+  $barContent.appendChild(btn);
 
   return btn;
 }