<!--
  ChordVest v2026.3.2 — Proprietary Software
  Copyright (c) 2026 deciBelboy. All rights reserved.
  Unauthorised copying, modification or distribution is strictly prohibited.
  Contact: www.decibelboy.com
-->

<!--
  ══════════════════════════════════════════════════════════════════════
  SESSION MODE — CHORD LANE AS HARMONIC CONTROLLER
  Design notes for future implementation. Do not remove.
  ══════════════════════════════════════════════════════════════════════

  OVERVIEW
  ────────
  ChordVest's chord lane is the harmonic spine of a VestApps session.
  When Session Mode is active, ChordVest broadcasts chord state to all
  other open Vest apps via an extended VestLink protocol. Each receiving
  app opts in with a toggle and adjusts its behaviour accordingly.

  VESTLINK SCHEMA EXTENSION
  ─────────────────────────
  Add these fields to the VestLink state object when Session Mode is on:

    {
      "bpm": 88,
      "root": 5,
      "scale": "major",
      "ts": 1712345678901,
      "transport": "play",

      // NEW — chord lane session fields:
      "sessionMode": true,
      "chordStep": 12,           // current playhead position in chord lane (0-63)
      "chordLaneLength": 32,     // active loop length (16 | 32 | 64)
      "chord": {                 // the chord active at chordStep
        "degree": 3,             // 0-6, diatonic scale degree
        "row": "mid",            // "mid" | "high" | "seventh"
        "arp": false,            // whether arp mode is on for this step
        "midiNotes": [48,52,55], // resolved MIDI notes — receivers don't need theory
        "rootMidi": 48,          // just the root note — for AcidVest bass lock
        "durationSteps": 4       // how many steps this chord lasts before changing
      },
      "chordLane": [...]         // full 64-entry lane array — sent once on connect/edit only
    }

  TIMING STRATEGY — CRITICAL
  ──────────────────────────
  Do NOT write to VestLink on every scheduler step — localStorage writes
  at 16th-note resolution (125ms at 120bpm) will cause jank.

  Instead, use a TWO-CHANNEL approach:
    1. Full lane sync  — write chordLane array to localStorage once:
                         on Session Mode enable, on any lane edit, on connect.
                         Receiving apps cache this and calculate locally.
    2. Step broadcasts — each receiving app maintains its OWN step counter
                         locked to BPM. It calculates currentChordStep =
                         (localStep % chordLaneLength) itself, reads from
                         its cached copy of chordLane. No per-step writes needed.
    3. Transport sync  — play/stop via existing VestLink transport field.
                         Receivers reset their step counter to 0 on play.

  This eliminates latency entirely. Chord changes feel tight because each
  app is running its own clock, not waiting for a localStorage event.

  CHORD DURATION
  ──────────────
  "durationSteps" in the chord object tells receiving apps how long the
  current chord lasts. Calculate it by scanning forward from chordStep
  until either a different chord or an empty cell is found. This lets
  StringVest and ArpVest make phrasing decisions (e.g. don't cut a note
  right before a chord change).

  HOW EACH APP FOLLOWS THE CHORD LANE
  ─────────────────────────────────────

  StringVest / ArpVest — "Follow Chord" toggle
    • When ON: weight note selection toward chord tones.
      Current note picker uses: pickNote(scaleNotes)
      Change to:                pickNote(scaleNotes, chordMidiNotes, weight=3)
      Chord tones get 3× probability vs non-chord scale tones.
      chord.midiNotes already contains the resolved MIDI — map back to
      scale positions by checking which scale degrees match.
    • The generative sequencer needs no other changes. The weighting
      does the harmonic work automatically.
    • Add toggle to sequencer bar: [FOLLOW CHORD ○/●]
    • On chord change: don't interrupt a playing note — apply new weights
      from the next generated step onward.

  AcidVest — "Lock Root" toggle
    • When ON: override the acid bassline root note with chord.rootMidi.
    • The acid sequencer plays its existing pattern but transposes each
      note relative to the new root instead of the manually-set root.
    • On chord change: apply immediately on the next acid step (not mid-note).
    • Add toggle to acid panel: [LOCK ROOT ○/●]
    • chord.rootMidi is pre-resolved so AcidVest needs no music theory.

  DrumVest
    • No harmonic following needed. Drums continue as-is.
    • Could optionally react to chord.arp flag to add a rhythmic fill
      marker — nice-to-have, not essential.

  KarplusVest / PulseVest / GlitchVest / TapeVest
    • Follow same pattern as StringVest if they have note generators.
    • GlitchVest / TapeVest are texture-based — no chord following needed.

  SESSION MODE UI IN CHORDVEST
  ──────────────────────────────
  Add to transport cluster (next to VestLink badge):
    • [SESSION ○/●] toggle button — enables extended VestLink broadcasting
    • When active: badge shows "Session · N apps" instead of peer count
    • Chord lane header shows a small broadcast indicator when session active

  IMPLEMENTATION ORDER
  ────────────────────
  1. Add SESSION toggle to ChordVest transport + extend vlWrite() to
     include chord lane fields when session is active.
  2. Add "Follow Chord" toggle to StringVest — wire to weighted note picker.
  3. Add "Lock Root" toggle to AcidVest — wire to root note override.
  4. Add ArpVest follow if applicable.
  5. Test: ChordVest + StringVest + AcidVest in three tabs, Session ON in all.
  ══════════════════════════════════════════════════════════════════════
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="canonical" href="https://vestsoundworks.com/standalone/chordvest.html">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ChordVest — Theory-free QWERTY chord instrument with recording | Vest Sound Works</title>
<meta property="og:title" content="ChordVest — Free Browser Chord Instrument">
<meta property="og:description" content="A theory-free QWERTY chord instrument with 10 scales, arpeggiator, reverb and recording. Free, no install, runs in your browser.">
<meta property="og:url" content="https://vestsoundworks.com/standalone/chordvest.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://vestsoundworks.com/icons/icon-512.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ChordVest — Free Browser Chord Instrument">
<meta name="twitter:description" content="A theory-free QWERTY chord instrument with 10 scales, arpeggiator, reverb and recording. Free, no install, runs in your browser.">
<meta name="twitter:image" content="https://vestsoundworks.com/icons/icon-512.png">
<meta name="theme-color" content="#110f18">
<meta name="application-name" content="ChordVest">
<meta name="description" content="ChordVest — Theory-free QWERTY chord instrument with recording, reverb and suite sync.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎼</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../vest-theme.css">
<style>
:root {
  --bg:       #110f18;
  --panel:    #1a1828;
  --panel2:   #222035;
  --border:   #2c2a40;
  --border2:  #3c3858;
  --purple:   #c8a0ff;
  --c1:       #f0cc44;
  --c2:       #ff6860;
  --c3:       #60d4ff;
  --c4:       #80f4a8;
  --c5:       #ffaa44;
  --text-dim: #d4aaff;
  --text-mid: #e8d4ff;
  --text:     #f0edff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
:focus { outline: none; }

.skip-link { position:absolute; top:-100px; left:0; background:var(--c1); color:#110f18; padding:8px 16px; font-family:'DM Mono',monospace; font-size:0.75rem; letter-spacing:2px; z-index:9999; border-radius:0 0 6px 0; text-decoration:none; font-weight:500; }
.skip-link:focus { top:0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  padding: 0 0 100px;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(200,160,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 100%, rgba(96,212,255,0.04) 0%, transparent 60%);
}

/* ── HEADER ── */
header {
  background: linear-gradient(180deg, #0e0c1a, #080610);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.logo { font-family:'Syne',sans-serif; font-weight:800; font-size:1.35rem; letter-spacing:-0.5px; color:var(--c1); user-select:none; }
.logo span { color:var(--purple); }
.logo-ver { font-family:'DM Mono',monospace; font-size:0.65rem; letter-spacing:3px; color:var(--text-dim); font-weight:400; margin-left:8px; vertical-align:middle; }

.header-center { display:flex; align-items:center; gap:12px; }
.transport-cluster { display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:5px 10px; }
.bpm-display { display:flex; align-items:center; gap:4px; }
.bpm-label { font-size:0.6rem; letter-spacing:3px; color:var(--text-dim); text-transform:uppercase; }
.bpm-num { font-size:1.1rem; font-weight:500; color:var(--c3); min-width:36px; text-align:center; cursor:ns-resize; user-select:none; }
.bpm-btn { background:none; border:1px solid var(--border2); color:var(--text-dim); border-radius:4px; min-width:44px; min-height:44px; font-size:0.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.12s; }
.bpm-btn:hover { border-color:var(--c3); color:var(--c3); }
.bpm-btn:focus-visible { outline:2px solid var(--c3); outline-offset:2px; }

.play-btn { background:var(--panel2); border:1px solid var(--c4); color:var(--c4); border-radius:6px; padding:5px 16px; font-family:'DM Mono',monospace; font-size:0.75rem; letter-spacing:2px; cursor:pointer; transition:all 0.12s; min-width:80px; min-height:44px; animation:playPulse 2.4s ease-in-out infinite; }
.play-btn:hover { background:rgba(128,244,168,0.10); animation:none; }
.play-btn:focus-visible { outline:2px solid var(--c4); outline-offset:2px; }
.play-btn.playing { background:rgba(128,244,168,0.12); border-color:var(--c2); color:var(--c2); animation:playPulse 1.2s ease-in-out infinite; }
@keyframes playPulse { 0%,100%{box-shadow:0 0 8px rgba(128,244,168,0.3)} 50%{box-shadow:0 0 24px rgba(128,244,168,0.7)} }

.latch-btn { background:none; border:1px solid var(--border2); color:var(--text-dim); border-radius:4px; padding:4px 10px; font-family:'DM Mono',monospace; font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all 0.12s; min-height:44px; }
.latch-btn:hover { border-color:var(--purple); color:var(--purple); }
.latch-btn:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.latch-btn.on { border-color:var(--purple); color:var(--purple); background:rgba(200,160,255,0.1); }

.latch-arp-stack { display:flex; flex-direction:column; gap:4px; }

.arp-toggle-btn {
  background:none; border:1px solid var(--border2); color:var(--text-dim);
  border-radius:4px; padding:0 10px;
  font-family:'DM Mono',monospace; font-size:0.55rem; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:all 0.12s; min-height:22px; line-height:1;
}
.arp-toggle-btn:hover { border-color:var(--c5); color:var(--c5); }
.arp-toggle-btn:focus-visible { outline:2px solid var(--c5); outline-offset:2px; }
.arp-toggle-btn.on { border-color:var(--c5); color:var(--c5); background:rgba(255,170,68,0.12); }

.header-right { display:flex; align-items:center; gap:8px; }

.vl-badge { font-family:'DM Mono',monospace; font-size:0.6rem; letter-spacing:2px; padding:4px 10px; border-radius:20px; border:1px solid var(--border2); color:var(--text-dim); background:transparent; cursor:pointer; transition:all 0.18s; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
.vl-badge:hover { border-color:var(--c4); color:var(--c4); }
.vl-badge.active { color:var(--c4); border-color:var(--c4); background:rgba(128,244,168,0.07); }
.vl-badge:focus-visible { outline:2px solid var(--c4); outline-offset:2px; }

nav { display:flex; gap:14px; }
.nav-a { font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); text-decoration:none; transition:color 0.12s; padding:4px 0; }
.nav-a:hover { color:var(--c2); }
.nav-a:focus-visible { outline:2px solid var(--c2); outline-offset:2px; border-radius:2px; }
.nav-a.nav-home { color:var(--c4); }
.nav-a.nav-home:hover { color:var(--c4); opacity:0.75; }
.nav-a.nav-bmc { color:#FFDD00; }

/* ── WRAP ── */
.wrap { max-width:1100px; margin:0 auto; padding:20px 16px 100px; display:flex; flex-direction:column; gap:16px; }

@media (min-width: 1200px) {
  body { padding: 0 24px; }
  header, .wrap { max-width:1600px; }
  .wrap { display:grid; grid-template-columns:1fr 380px; grid-template-rows:auto; column-gap:20px; padding:24px 24px 100px; }
  .primary-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
  .utility-col { display:flex; flex-direction:column; gap:16px; grid-column:2; grid-row:1 / -1; min-width:0; }
}

/* ── PANELS ── */
.panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.3); }

.panel-header {
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; cursor:pointer;
  border-bottom:1px solid transparent;
  transition:background 0.12s;
  user-select:none;
}
.panel-header:hover { background:rgba(255,255,255,0.02); }
.panel.open .panel-header { border-bottom-color:var(--border); }
.panel-header-label { font-size:0.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-mid); flex:1; }
.panel-header-arrow { color:var(--text-dim); font-size:0.8rem; transition:transform 0.2s; }
.panel.open .panel-header .panel-header-arrow { transform:rotate(180deg); }

.panel-body { padding:14px 18px 18px; display:none; }
.panel.open .panel-body { display:block; }

.section-tag {
  font-size:0.6rem; letter-spacing:3px; text-transform:uppercase;
  padding:0 0 12px; color:var(--text-dim);
  display:flex; align-items:center; gap:8px;
}

.sdot { width:7px; height:7px; border-radius:50%; background:var(--border2); transition:background 0.1s, box-shadow 0.1s; flex-shrink:0; }
.sdot.on { background:var(--purple); box-shadow:0 0 8px rgba(200,160,255,0.6); }

/* ── SEQ BUTTONS (shared style) ── */
.seq-btn {
  font-family:'DM Mono',monospace;
  font-size:0.65rem; letter-spacing:2px; text-transform:uppercase;
  padding:6px 12px; border-radius:5px;
  border:1px solid var(--border2); color:var(--text-mid); background:var(--panel2);
  cursor:pointer; transition:all 0.12s; white-space:nowrap; min-height:44px;
}
.seq-btn:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.seq-btn:hover { border-color:var(--purple); color:var(--purple); }
.seq-btn.active { border-color:var(--purple); color:var(--purple); background:rgba(200,160,255,0.1); }

/* ── KEY · SCALE · ARP SELECTORS ── */
.ksa-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.ksa-group { display:flex; flex-direction:column; gap:6px; flex:1; min-width:80px; }
.ksa-label { font-size:0.6rem; letter-spacing:4px; text-transform:uppercase; color:var(--text-dim); }
.vest-select {
  appearance:none; -webkit-appearance:none;
  background:var(--panel2); border:1px solid var(--border2);
  border-radius:5px; color:var(--text-mid);
  font-family:'DM Mono',monospace; font-size:0.75rem;
  padding:0 32px 0 12px; height:44px;
  cursor:pointer; outline:none; width:100%;
  transition:border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d4aaff'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.vest-select:focus { border-color:var(--purple); }
.vest-select:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.vest-select option { background:var(--panel2); color:var(--text-mid); }

/* ── CHORD KEYBOARD ── */
.kb-rows { display:flex; flex-direction:column; gap:6px; }
.kb-row { display:flex; gap:5px; flex-wrap:nowrap; }

.chord-key {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-width:0; flex:1; height:88px;
  border-radius:6px; border:1px solid var(--border2); background:var(--panel2);
  cursor:pointer; transition:all 0.08s; user-select:none;
  position:relative; overflow:hidden;
}
.chord-key:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.chord-key::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.03) 0%,transparent 60%); pointer-events:none; }

.ck-qwerty { font-size:0.5rem; letter-spacing:2px; text-transform:uppercase; color:var(--border2); font-weight:300; }
.ck-mood { font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-mid); font-weight:500; }
.ck-sub { font-size:0.55rem; letter-spacing:1px; color:var(--border2); }

.kb-row-top .chord-key { border-color:rgba(96,212,255,0.2); }
.kb-row-top .chord-key .ck-mood { color:var(--c3); }
.kb-row-top .chord-key .ck-sub { color:rgba(96,212,255,0.4); }
.kb-row-mid .chord-key { border-color:rgba(200,160,255,0.25); }
.kb-row-mid .chord-key .ck-mood { color:var(--purple); }
.kb-row-btm .chord-key { border-color:rgba(240,204,68,0.2); }
.kb-row-btm .chord-key .ck-mood { color:var(--c1); }
.kb-row-btm .chord-key .ck-sub { color:rgba(240,204,68,0.4); }

.chord-key.pressed { transform:scale(0.96); }
.kb-row-top .chord-key.pressed { background:rgba(96,212,255,0.15); border-color:var(--c3); box-shadow:0 0 18px rgba(96,212,255,0.3); }
.kb-row-mid .chord-key.pressed { background:rgba(200,160,255,0.15); border-color:var(--purple); box-shadow:0 0 18px rgba(200,160,255,0.35); }
.kb-row-btm .chord-key.pressed { background:rgba(240,204,68,0.12); border-color:var(--c1); box-shadow:0 0 18px rgba(240,204,68,0.25); }

.chord-hint { font-size:0.6rem; letter-spacing:2px; color:var(--border2); padding-top:10px; }

/* ── CHORD LANE ── */
.lane-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.lane-controls-right { margin-left:auto; display:flex; gap:6px; align-items:center; }

.rec-mode-btn { min-height:44px; }
.rec-mode-btn.perform { border-color:var(--c2); color:var(--c2); background:rgba(255,104,96,0.08); }
.rec-mode-btn.perform:hover { border-color:var(--c2); color:var(--c2); }

.loop-btns { display:flex; }
.loop-btn { font-family:'DM Mono',monospace; font-size:0.65rem; letter-spacing:2px; padding:0 13px; height:44px; background:var(--panel2); border:1px solid var(--border2); color:var(--text-dim); cursor:pointer; transition:all 0.13s; }
.loop-btn:first-child { border-radius:4px 0 0 4px; }
.loop-btn:last-child { border-radius:0 4px 4px 0; border-left:none; }
.loop-btn:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.loop-btn.active { border-color:var(--purple); color:var(--purple); background:rgba(200,160,255,0.1); }

.clear-btn { font-family:'DM Mono',monospace; font-size:0.65rem; letter-spacing:3px; text-transform:uppercase; padding:0 14px; height:44px; background:var(--panel2); border:1px solid var(--border2); color:var(--text-dim); cursor:pointer; border-radius:4px; transition:all 0.15s; }
.clear-btn:focus-visible { outline:2px solid var(--c2); outline-offset:2px; }
.clear-btn:hover { border-color:var(--c2); color:var(--c2); }

.chord-lane { display:grid; grid-template-columns:repeat(32,1fr); gap:3px; min-width:0; }

.lane-cell {
  height:52px; border-radius:4px;
  border:1px solid var(--border); background:var(--panel2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; position:relative; overflow:hidden;
  transition:border-color 0.1s, background 0.1s; cursor:pointer; min-width:0;
}
.lane-cell:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.lane-cell-num { font-size:0.42rem; color:var(--border2); letter-spacing:0.5px; position:absolute; top:3px; left:4px; }
.lane-cell-label { font-size:0.6rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--border2); font-weight:500; line-height:1; }
.lane-cell-row { font-size:0.42rem; color:var(--border2); }

.lane-cell[data-row="mid"].has-chord { background:rgba(200,160,255,0.08); border-color:rgba(200,160,255,0.35); }
.lane-cell[data-row="mid"].has-chord .lane-cell-label { color:var(--purple); }
.lane-cell[data-row="mid"].has-chord .lane-cell-row { color:rgba(200,160,255,0.5); }
.lane-cell[data-row="high"].has-chord { background:rgba(96,212,255,0.07); border-color:rgba(96,212,255,0.3); }
.lane-cell[data-row="high"].has-chord .lane-cell-label { color:var(--c3); }
.lane-cell[data-row="high"].has-chord .lane-cell-row { color:rgba(96,212,255,0.5); }
.lane-cell[data-row="seventh"].has-chord { background:rgba(240,204,68,0.07); border-color:rgba(240,204,68,0.3); }
.lane-cell[data-row="seventh"].has-chord .lane-cell-label { color:var(--c1); }
.lane-cell[data-row="seventh"].has-chord .lane-cell-row { color:rgba(240,204,68,0.5); }

.lane-cell.playhead { border-color:var(--c4) !important; box-shadow:inset 0 0 10px rgba(128,244,168,0.15); }
.lane-cell.playhead::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--c4); box-shadow:0 0 6px rgba(128,244,168,0.8); }
.lane-cell.step-cursor { border-color:var(--c5) !important; background:rgba(255,170,68,0.08) !important; }

/* Arp cells get a spinning indicator dot in the top-right corner */
.lane-cell[data-arp="1"].has-chord::before {
  content: '⟳';
  position: absolute; top: 2px; right: 3px;
  font-size: 0.45rem; color: var(--c5);
  opacity: 0.8;
}

/* ── SOUND ENGINE ── */
.waveform-row { display:flex; gap:5px; margin-bottom:20px; flex-wrap:wrap; }
.wave-btn { font-family:'DM Mono',monospace; font-size:0.6rem; letter-spacing:2px; text-transform:uppercase; padding:6px 12px; min-height:44px; border-radius:4px; border:1px solid var(--border2); background:var(--panel2); color:var(--text-dim); cursor:pointer; transition:all 0.13s; }
.wave-btn:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.wave-btn.active { border-color:var(--purple); color:var(--purple); background:rgba(200,160,255,0.1); }

.knobs-col { display:flex; flex-direction:column; gap:18px; }
.knob-row { display:flex; align-items:center; gap:16px; }
.knob-outer { width:58px; height:58px; cursor:ns-resize; user-select:none; flex-shrink:0; touch-action:none; }
.knob-svg { width:58px; height:58px; display:block; }
.knob-info { display:flex; flex-direction:column; gap:2px; }
.knob-name { font-size:0.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); }
.knob-val { font-size:0.8rem; font-weight:500; color:var(--text-mid); }

/* ── SESSION ── */
.session-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sess-btn { font-family:'DM Mono',monospace; font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; padding:0 16px; height:44px; border-radius:5px; border:1px solid var(--border2); background:var(--panel2); color:var(--text-dim); cursor:pointer; transition:all 0.15s; }
.sess-btn:focus-visible { outline:2px solid var(--c4); outline-offset:2px; }
.sess-btn:hover { border-color:var(--c4); color:var(--c4); background:rgba(128,244,168,0.06); }
.sess-btn-locked { opacity:0.35; cursor:not-allowed; pointer-events:none; }
.sess-btn-locked:hover { border-color:var(--border2); color:var(--text-dim); background:var(--panel2); }
.pro-badge {
  font-family:'DM Mono',monospace;
  font-size:0.5rem; letter-spacing:2.5px; text-transform:uppercase;
  padding:3px 8px; border-radius:20px;
  border:1px solid rgba(240,204,68,0.5);
  color:var(--c1); background:rgba(240,204,68,0.07);
  white-space:nowrap; user-select:none;
}
#importFileInput { display:none; }

/* ── ARP GEN KNOBS ── */
.arp-gen-knobs { display:flex; flex-direction:column; }
.status-bar { font-size:0.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); padding:4px 0; min-height:20px; }
.status-bar span { color:var(--purple); }

/* ── FOOTER ── */
.app-footer { font-size:0.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--border2); text-align:center; padding:16px 0 8px; }
.app-footer a { color:var(--text-dim); text-decoration:none; }
.app-footer a:hover { color:var(--c2); }

/* ── LANE DELETE BUTTON ── */
.lane-del-btn {
  display: none;
  position: absolute; top: 2px; right: 3px;
  font-size: 0.45rem; line-height: 1;
  color: var(--c2); cursor: pointer;
  padding: 2px 3px; border-radius: 2px;
  z-index: 2;
  transition: opacity 0.1s;
}
.lane-cell.has-chord:hover .lane-del-btn,
.lane-cell.has-chord:focus-visible .lane-del-btn { display: block; }

/* ── LANE DRAG & DROP ── */
.lane-cell[draggable="true"] { cursor: grab; }
.lane-cell.has-chord[draggable="true"] { cursor: grab; }
.lane-cell.dragging { opacity: 0.4; }
.lane-cell.drag-over { border-color: var(--c5) !important; background: rgba(255,170,68,0.12) !important; box-shadow: 0 0 0 1px var(--c5); }

/* ── STANDALONE: hide module's internal transport row (header provides it) ── */
.cv-transport { display: none !important; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .header-right { display:none; }
  .chord-key { height:72px; }
  .kb-row { gap:3px; }
  .ck-mood { font-size:0.65rem; }
  .chord-lane { gap:2px; }
  .lane-cell { height:44px; }
  .lane-cell-label { font-size:0.5rem; }
}

/* ── MIDI Learn Panel ── */
.midi-panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.35); }
.midi-body { padding:14px 18px 18px; display:flex; flex-direction:column; gap:10px; }
.midi-st { font-size:0.7rem; letter-spacing:2px; color:var(--text-dim); }
.midi-st.ok { color:var(--c4); }
.ml-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:0.7rem; }
.ml-row:last-child { border-bottom:none; }
.ml-row.learning { background:rgba(200,160,255,0.06); border-radius:4px; padding-left:6px; animation:mlLearnP 0.7s ease-in-out infinite; }
@keyframes mlLearnP { 0%,100%{opacity:1} 50%{opacity:0.5} }
.ml-label { flex:1; color:var(--text-mid); }
.ml-cc { color:var(--c1); min-width:44px; }
.ml-btn { font-size:0.6rem; letter-spacing:2px; padding:6px 10px; border-radius:4px; border:1px solid var(--border2); color:var(--text-dim); background:var(--panel2); cursor:pointer; min-height:44px; font-family:'DM Mono',monospace; transition:all 0.12s; }
.ml-btn:hover { border-color:var(--purple); color:var(--purple); }
.ml-btn:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.ml-status-txt { font-size:0.65rem; letter-spacing:2px; color:var(--text-dim); padding:6px 0; }
.ml-status-txt.listening { color:var(--purple); animation:mlLearnP 0.7s ease-in-out infinite; }
@media (max-width: 768px) {
  .midi-panel > .midi-body { display:none; }
  .midi-panel.open > .midi-body { display:flex; }
}
/* Hide per-instrument MIDI panel — global VestMidi panel handles this */
.midi-panel,
.midi-learn-panel,
.midi-inst-panel { display: none !important; }
</style>
</head>
<body>
<a href="#mainContent" class="skip-link">Skip to main content</a>

<header>
  <div class="logo">Chord<span>Vest</span><span class="logo-ver">v2026.3.2</span></div>
  <div class="header-center">
    <div class="transport-cluster">
      <div class="bpm-display">
        <div class="bpm-label">BPM</div>
        <button class="bpm-btn" id="bpmDn" aria-label="Decrease BPM">−</button>
        <div class="bpm-num" id="bpmDisplay" role="spinbutton" aria-label="BPM" aria-valuenow="88" aria-valuemin="20" aria-valuemax="250">88</div>
        <button class="bpm-btn" id="bpmUp" aria-label="Increase BPM">+</button>
      </div>
      <button class="play-btn" id="playBtn" aria-label="Play / Stop">▶ PLAY</button>
      <div class="latch-arp-stack">
        <button class="latch-btn" id="latchBtn" aria-pressed="false">LATCH</button>
        <button class="arp-toggle-btn" id="arpToggleBtn" aria-pressed="false">ARP</button>
      </div>
      <button class="latch-btn" id="metroBtn" aria-pressed="false" title="Metronome — syncs to BPM">METRO</button>
    </div>
  </div>
  <div class="header-right">
    <button class="vl-badge" id="vlBadge" title="VestLink — sync BPM, Key &amp; Scale across all open Vest apps">VestLink Off</button>
    <nav>
      <a class='nav-a nav-home' href='/'>← VestApps</a>
      <a href="https://buymeacoffee.com/decibelboy" class="nav-a nav-bmc" target="_blank" rel="noopener">☕ Support</a>
      <a href="#" class="nav-a" id="qsBtn" onclick="showQS();return false">Quick Start</a>
    </nav>
  </div>
</header>

<div id="mount"></div>

<!-- instrument panels are now rendered by instruments/chordvest.js -->
<!--REMOVED_MAIN_START-->
      <div class="panel-header" data-panel="panelKey">
        <div class="sdot on"></div>
        <span class="panel-header-label">Key &middot; Scale &middot; Arp</span>
        <span class="panel-header-arrow">▾</span>
      </div>
      <div class="panel-body">
        <div class="ksa-row">
          <div class="ksa-group">
            <label class="ksa-label" for="keySelect">Key</label>
            <select class="vest-select" id="keySelect"></select>
          </div>
          <div class="ksa-group">
            <label class="ksa-label" for="scaleSelect">Scale</label>
            <select class="vest-select" id="scaleSelect"></select>
          </div>
          <div class="ksa-group">
            <label class="ksa-label" for="arpSelect">Arp</label>
            <select class="vest-select" id="arpSelect">
              <option value="rise">Rise</option>
              <option value="fall">Fall</option>
              <option value="rise-fall">Rise &amp; Fall</option>
              <option value="fall-rise">Fall &amp; Rise</option>
              <option value="gen">Generative</option>
            </select>
          </div>
        </div>
        <div class="arp-gen-knobs" id="arpGenKnobs" style="display:none; margin-top:16px;">
          <div class="knob-row">
            <div class="knob-outer" id="arpNotesKnob" tabindex="0" role="slider" aria-label="Notes" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0.5"></div>
            <div class="knob-info">
              <span class="knob-name">Notes</span>
              <span class="knob-val" id="kv-arpNotes">50%</span>
            </div>
          </div>
          <div class="knob-row" style="margin-top:14px">
            <div class="knob-outer" id="arpAmountKnob" tabindex="0" role="slider" aria-label="Amount" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0.5"></div>
            <div class="knob-info">
              <span class="knob-name">Amount</span>
              <span class="knob-val" id="kv-arpAmount">50%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Chord Keyboard -->
    <div class="panel open" id="panelKb">
      <div class="panel-header" data-panel="panelKb">
        <div class="sdot on"></div>
        <span class="panel-header-label">Chord Keyboard</span>
        <span class="panel-header-arrow">▾</span>
      </div>
      <div class="panel-body">
        <div class="kb-rows" id="kbRows"></div>
        <div class="chord-hint">Hold SHIFT to arpeggiate · SPACE = latch · Top row = +octave · Bottom row = +7th</div>
      </div>
    </div>

    <!-- Chord Lane -->
    <div class="panel open" id="panelLane">
      <div class="panel-header" data-panel="panelLane">
        <div class="sdot" id="recDot"></div>
        <span class="panel-header-label">Chord Lane</span>
        <span class="panel-header-arrow">▾</span>
      </div>
      <div class="panel-body">
        <div class="lane-controls">
          <button class="seq-btn rec-mode-btn" id="recModeBtn">STEP MODE</button>
          <div class="loop-btns">
            <button class="loop-btn active" id="loop16Btn" data-len="16">16</button>
            <button class="loop-btn" id="loop32Btn" data-len="32">32</button>
            <button class="loop-btn" id="loop64Btn" data-len="64">64</button>
          </div>
          <div class="lane-controls-right">
            <div class="status-bar" id="statusBar">READY</div>
            <button class="clear-btn" id="clearLaneBtn">CLEAR</button>
          </div>
        </div>
        <div class="chord-lane" id="chordLane"></div>
      </div>
    </div>

  </div><!-- /primary-col -->

  <!-- UTILITY COLUMN -->
  <div class="utility-col">

    <!-- Sound Engine -->
    <div class="panel open" id="panelEngine">
      <div class="panel-header" data-panel="panelEngine">
        <div class="sdot on"></div>
        <span class="panel-header-label">Sound Engine</span>
        <span class="panel-header-arrow">▾</span>
      </div>
      <div class="panel-body">
        <div class="pill-label" style="margin-bottom:8px">Waveform</div>
        <div class="waveform-row" id="waveformRow">
          <button class="wave-btn active" data-wave="triangle">TRI</button>
          <button class="wave-btn" data-wave="sine">SINE</button>
          <button class="wave-btn" data-wave="sawtooth">SAW</button>
          <button class="wave-btn" data-wave="square">SQR</button>
          <button class="wave-btn" data-wave="karplus">KRP</button>
        </div>
        <div class="knobs-col" id="knobsCol"></div>
      </div>
    </div>

    <!-- Session -->
    <div class="panel open" id="panelSession">
      <div class="panel-header" data-panel="panelSession">
        <div class="sdot"></div>
        <span class="panel-header-label">Session</span>
        <span class="panel-header-arrow">▾</span>
      </div>
      <div class="panel-body">
        <div class="session-row">
          <button class="sess-btn sess-btn-locked" id="exportBtn" disabled aria-disabled="true">↓ Export</button>
          <button class="sess-btn sess-btn-locked" id="importBtn" disabled aria-disabled="true">↑ Import</button>
          <input type="file" id="importFileInput" accept=".json">
          <span class="pro-badge">PRO</span>
        </div>
      </div>
    </div>

    <!-- MIDI Learn -->
    <div class="midi-panel open" id="midiPanel" role="region" aria-label="MIDI Learn">
      <div class="panel-header" data-panel="midiPanel">
        <span class="panel-header-label">MIDI</span>
        <span class="panel-header-arrow">▾</span>
      </div>
      <div class="midi-body">
        <div class="section-tag" style="padding:0 0 4px">MIDI Learn</div>
        <div class="midi-st" id="midiStatus">MIDI — not connected</div>
        <div id="mlStatusTxt" class="ml-status-txt">READY — click LEARN on a row then move a controller</div>
        <div id="mlTable"></div>
        <button class="seq-btn" onclick="mlClearAll()" style="margin-top:6px">Clear All</button>
      </div>
    </div>


<footer class="app-footer">
  ChordVest v2026.3.2 &nbsp;·&nbsp; by <a href="https://www.decibelboy.com" target="_blank" rel="noopener">deciBelboy</a>
</footer>

<script src="../instruments/chordvest.js"></script>
<script>
// ══════════════════════════════════════════════════════════════
// ChordVest standalone — mount module + wire header controls + VestLink
// ══════════════════════════════════════════════════════════════

const cv = ChordVest.mount(document.getElementById('mount'), null, null);

// ── Header Transport Controls ──
const hdrPlay  = document.getElementById('playBtn');
const hdrBpmDn = document.getElementById('bpmDn');
const hdrBpmUp = document.getElementById('bpmUp');
const hdrBpmDisplay = document.getElementById('bpmDisplay');
const hdrLatch = document.getElementById('latchBtn');
const hdrArp   = document.getElementById('arpToggleBtn');
const hdrMetro = document.getElementById('metroBtn');

let playing = false;

function cvTogglePlay() {
  if (!playing) {
    cv.start(); playing = true;
    if (hdrPlay) { hdrPlay.textContent = '■ STOP'; hdrPlay.classList.add('playing'); }
    if (!vlApplyingTransport) vlWrite('play');
  } else {
    cv.stop(); playing = false;
    if (hdrPlay) { hdrPlay.textContent = '▶ PLAY'; hdrPlay.classList.remove('playing'); }
    if (!vlApplyingTransport) vlWrite('stop');
  }
}

if (hdrPlay) hdrPlay.addEventListener('click', cvTogglePlay);
if (hdrLatch) hdrLatch.addEventListener('click', () => cv.toggleLatch());
if (hdrArp)   hdrArp.addEventListener('click', () => cv.toggleArp());
if (hdrMetro) hdrMetro.addEventListener('click', () => cv.toggleMetro());

function setBpm(v) {
  cv.setBpm(v);
  if (hdrBpmDisplay) hdrBpmDisplay.textContent = cv.getParams().bpm;
  vlWrite();
}
let bpmInterval = null;
if (hdrBpmUp) {
  hdrBpmUp.addEventListener('click', () => setBpm(cv.getParams().bpm + 1));
  hdrBpmUp.addEventListener('mousedown', () => { bpmInterval = setInterval(() => setBpm(cv.getParams().bpm + 1), 80); });
}
if (hdrBpmDn) {
  hdrBpmDn.addEventListener('click', () => setBpm(cv.getParams().bpm - 1));
  hdrBpmDn.addEventListener('mousedown', () => { bpmInterval = setInterval(() => setBpm(cv.getParams().bpm - 1), 80); });
}
document.addEventListener('mouseup', () => { clearInterval(bpmInterval); bpmInterval = null; });
if (hdrBpmDisplay) hdrBpmDisplay.textContent = cv.getParams().bpm;

// ══════════════════════════════════════════════════════════════
// VESTLINK LOCAL SYNC v1
// ══════════════════════════════════════════════════════════════
// TODO — SESSION MODE EXTENSION (see top-of-file design notes)
// When session mode is added, vlWrite() needs two new behaviours:
//   1. On session enable / lane edit: write full chordLane array to
//      localStorage under a separate key: vestlink_chordlane_ChordVest
//      Receiving apps read this once and cache it locally.
//   2. vlWrite() signature stays the same for heartbeats/transport.
//      Do NOT add per-step writes here — receivers run their own clocks.
// New vlWrite() fields when sessionMode is true:
//   sessionMode: true
//   chordLaneLength: state.loopLength
//   chord: { degree, row, arp, midiNotes, rootMidi, durationSteps }
//   chordStep: state.currentStep  ← only on transport play/stop, not heartbeat
// ──────────────────────────────────────────────────────────────
const VL_APP      = 'ChordVest';
const VL_KEY      = `vestlink_${VL_APP}`;
const VL_PREFIX   = 'vestlink_';
const VL_HB_MS    = 2000;
const VL_PEER_TTL = 5000;

// Note/scale constants mirroring the module (needed for VestLink state serialisation)
const VL_NOTES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
const VL_SCALE_KEYS = ['major','naturalMinor','pentatonicMajor','pentatonicMinor','blues','dorian','phrygian','mixolydian','harmonicMinor','wholeTone'];

// VestLink uses the same lowercase scale keys as ChordVest's SCALES object.
// Direct 1:1 mapping — no conversion needed for keys present in both.
// Legacy title-case keys from older apps are handled in the FROM map.
const VL_SCALE_TO_VL   = Object.fromEntries(VL_SCALE_KEYS.map(k => [k, k]));
const VL_SCALE_FROM_VL = {
  // Current lowercase keys (direct pass-through)
  ...Object.fromEntries(VL_SCALE_KEYS.map(k => [k, k])),
  // Legacy title-case keys from older VestApps (StringVest, DrumVest etc.)
  'Major':'major', 'Minor':'naturalMinor', 'Dorian':'dorian',
  'Mixolydian':'mixolydian', 'Phrygian':'phrygian',
  'naturalminor':'naturalMinor'
};

let vlActive = false, vlHbTimer = null, vlPeers = {}, vlApplyingTransport = false;

function vlWrite(transport) {
  if (!vlActive) return;
  try {
    const p = cv.getParams();
    const rootIdx = VL_NOTES.indexOf(p.key);
    const vlState = {
      bpm:   p.bpm,
      root:  rootIdx >= 0 ? rootIdx : 0,
      scale: VL_SCALE_TO_VL[p.scale] || 'major',
      ts:    Date.now()
    };
    if (transport) vlState.transport = transport;
    localStorage.setItem(VL_KEY, JSON.stringify(vlState));
  } catch(e) {}
}

function vlScan() {
  const now = Date.now(); vlPeers = {};
  try {
    for (let i = 0; i < localStorage.length; i++) {
      const k = localStorage.key(i); if (!k || !k.startsWith(VL_PREFIX)) continue;
      const appId = k.slice(VL_PREFIX.length); if (appId === VL_APP) continue;
      try {
        const s = JSON.parse(localStorage.getItem(k) || 'null');
        if (s && s.ts && (now - s.ts) < VL_PEER_TTL) vlPeers[appId] = s;
      } catch(_) {}
    }
  } catch(_) {}
  const entries = Object.values(vlPeers).sort((a, b) => b.ts - a.ts);
  if (entries.length) vlApplyState(entries[0]);
  vlUpdateBadge();
}

function vlApplyState(s) {
  if (!s) return;
  const p = cv.getParams();

  // BPM
  if (typeof s.bpm === 'number' && s.bpm >= 20 && s.bpm <= 250 && s.bpm !== p.bpm) {
    cv.setBpm(s.bpm);
    if (hdrBpmDisplay) hdrBpmDisplay.textContent = s.bpm;
  }

  // Root note → key name
  if (typeof s.root === 'number' && s.root >= 0 && s.root <= 11) {
    const newKey = VL_NOTES[s.root];
    if (newKey && newKey !== p.key) cv.setRoot(s.root);
  }

  // Scale
  if (s.scale) {
    const newScale = VL_SCALE_FROM_VL[s.scale] || VL_SCALE_FROM_VL[s.scale.toLowerCase()] || s.scale;
    if (VL_SCALE_KEYS.includes(newScale) && newScale !== p.scale) cv.setScale(newScale);
  }

  // Transport — guarded against broadcast loop
  if (s.transport === 'play' && !playing) {
    vlApplyingTransport = true;
    cv.start(); playing = true;
    if (hdrPlay) { hdrPlay.textContent = '■ STOP'; hdrPlay.classList.add('playing'); }
    vlApplyingTransport = false;
  }
  if (s.transport === 'stop' && playing) {
    vlApplyingTransport = true;
    cv.stop(); playing = false;
    if (hdrPlay) { hdrPlay.textContent = '▶ PLAY'; hdrPlay.classList.remove('playing'); }
    vlApplyingTransport = false;
  }
}

function vlUpdateBadge() {
  const badge = document.getElementById('vlBadge'); if (!badge) return;
  badge.classList.toggle('active', vlActive);
  if (!vlActive) { badge.textContent = 'VestLink Off'; return; }
  const peers = Object.keys(vlPeers);
  if      (peers.length === 0) badge.textContent = 'VestLink ·';
  else if (peers.length === 1) badge.textContent = `⟳ ${peers[0]}`;
  else                         badge.textContent = `⟳ ${peers.length} peers`;
}

window.addEventListener('storage', e => {
  if (!vlActive || !e.key || !e.key.startsWith(VL_PREFIX)) return;
  const appId = e.key.slice(VL_PREFIX.length); if (appId === VL_APP) return;
  try {
    const s = JSON.parse(e.newValue || 'null');
    if (s && s.ts && (Date.now() - s.ts) < VL_PEER_TTL) {
      vlPeers[appId] = s; vlApplyState(s); vlUpdateBadge();
    } else { delete vlPeers[appId]; vlUpdateBadge(); }
  } catch(_) {}
});

function vlStartHeartbeat() {
  vlStopHeartbeat();
  vlHbTimer = setInterval(() => {
    if (!vlActive) return;
    vlWrite();
    const now = Date.now(); let changed = false;
    for (const id in vlPeers) { if ((now - vlPeers[id].ts) >= VL_PEER_TTL) { delete vlPeers[id]; changed = true; } }
    if (changed) vlUpdateBadge();
  }, VL_HB_MS);
}
function vlStopHeartbeat() { clearInterval(vlHbTimer); vlHbTimer = null; }

document.getElementById('vlBadge').addEventListener('click', () => {
  vlActive = !vlActive;
  if (vlActive) { vlScan(); vlWrite(); vlStartHeartbeat(); }
  else { vlStopHeartbeat(); try { localStorage.removeItem(VL_KEY); } catch(e){} vlPeers = {}; vlUpdateBadge(); }
});

// Transport broadcasting is handled by cvTogglePlay() above.
// BPM VestLink publishing is handled by setBpm() above.

// ══════════════════════════════════════════════════════════════
</script>
<script src="../vest-ui-filter.js"></script>
<script>VestUIFilter.init();</script>
</body>
</html>