@gblp/circle-of-fifths 0.3.1 → 0.4.0

package/fesm2022/gblp-circle-of-fifths.mjs

@@ -1,6 +1,274 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, signal } from '@angular/core';
+import { input, output, computed, Component, inject, signal, effect } from '@angular/core';
 import { NgClass } from '@angular/common';
+import { ChordService, ChordDiagram } from '@gblp/chord-finder';
+
+const KEYS = [
+    { index: 0, major: 'C', minor: 'Am', sharps: 0, flats: 0 },
+    { index: 1, major: 'G', minor: 'Em', sharps: 1, flats: 0 },
+    { index: 2, major: 'D', minor: 'Bm', sharps: 2, flats: 0 },
+    { index: 3, major: 'A', minor: 'F♯m', sharps: 3, flats: 0 },
+    { index: 4, major: 'E', minor: 'C♯m', sharps: 4, flats: 0 },
+    { index: 5, major: 'B', minor: 'G♯m', sharps: 5, flats: 0 },
+    { index: 6, major: 'F♯', minor: 'D♯m', sharps: 6, flats: 0 },
+    { index: 7, major: 'D♭', minor: 'B♭m', sharps: 0, flats: 5 },
+    { index: 8, major: 'A♭', minor: 'Fm', sharps: 0, flats: 4 },
+    { index: 9, major: 'E♭', minor: 'Cm', sharps: 0, flats: 3 },
+    { index: 10, major: 'B♭', minor: 'Gm', sharps: 0, flats: 2 },
+    { index: 11, major: 'F', minor: 'Dm', sharps: 0, flats: 1 },
+];
+const COPY = {
+    en: {
+        title: 'Circle of Fifths',
+        subtitle: 'Click any major or minor key to highlight its diatonic chords',
+        ariaLabel: 'Circle of Fifths',
+        clickKey: 'Click a key',
+        seeChords: 'to see its chords',
+        deselect: '↩ click to deselect',
+        tonicLegend: 'Tonic (I / i)',
+        majorLegend: 'Major chords (IV, V)',
+        minorLegend: 'Minor chords (ii, iii, vi)',
+        diminishedLegend: 'Diminished (vii° / ii°)',
+        diatonicChords: 'Diatonic Chords',
+        commonProgressions: 'Common Progressions in',
+        generateProgressions: 'Shuffle',
+        chorus: 'Chorus',
+        bridge: 'Bridge',
+        outro: 'Outro',
+        verse: 'Verse',
+        copy: 'Copy',
+        expand: 'Expand',
+        collapse: 'Collapse',
+        transposeLabel: 'Transpose to:',
+        spiceLabels: ['🌶 Spice', '🌶🌶 Spicier', '🔥 Hot!', '↩ Plain'],
+        major: 'Major',
+        minor: 'Minor',
+        diminished: 'diminished',
+        relativeMinor: 'Relative minor',
+        relativeMajor: 'Relative major',
+        showChordDiagrams: 'Show chord diagrams',
+        hideChordDiagrams: 'Hide chord diagrams',
+        previousPosition: 'Previous position',
+        nextPosition: 'Next position',
+        previousPositionAll: 'Previous position (all diagrams)',
+        nextPositionAll: 'Next position (all diagrams)',
+        roles: {
+            tonic: 'Tonic',
+            supertonic: 'Supertonic',
+            mediant: 'Mediant',
+            subdominant: 'Subdominant',
+            dominant: 'Dominant',
+            submediant: 'Submediant',
+            leadingTone: 'Leading Tone',
+            subtonic: 'Subtonic',
+        },
+    },
+    es: {
+        title: 'Círculo de quintas',
+        subtitle: 'Haz clic en una tonalidad mayor o menor para resaltar sus acordes diatónicos',
+        ariaLabel: 'Círculo de quintas',
+        clickKey: 'Haz clic en una tonalidad',
+        seeChords: 'para ver sus acordes',
+        deselect: '↩ haz clic para deseleccionar',
+        tonicLegend: 'Tónica (I / i)',
+        majorLegend: 'Acordes mayores (IV, V)',
+        minorLegend: 'Acordes menores (ii, iii, vi)',
+        diminishedLegend: 'Disminuido (vii° / ii°)',
+        diatonicChords: 'Acordes diatónicos',
+        commonProgressions: 'Progresiones comunes en',
+        generateProgressions: 'Generar nuevos',
+        chorus: 'Coro',
+        bridge: 'Puente',
+        outro: 'Final',
+        verse: 'Estrofa',
+        copy: 'Copiar',
+        expand: 'Expandir',
+        collapse: 'Colapsar',
+        transposeLabel: 'Transponer a:',
+        spiceLabels: ['🌶 Condimentar', '🌶🌶 Más sabor', '🔥 ¡Picante!', '↩ Simple'],
+        major: 'Mayor',
+        minor: 'Menor',
+        diminished: 'disminuido',
+        relativeMinor: 'Relativa menor',
+        relativeMajor: 'Relativa mayor',
+        showChordDiagrams: 'Mostrar acordes de diagramas',
+        hideChordDiagrams: 'Ocultar acordes de diagramas',
+        previousPosition: 'Posición anterior',
+        nextPosition: 'Siguiente posición',
+        previousPositionAll: 'Posición anterior (todos)',
+        nextPositionAll: 'Siguiente posición (todos)',
+        roles: {
+            tonic: 'Tónica',
+            supertonic: 'Supertónica',
+            mediant: 'Mediante',
+            subdominant: 'Subdominante',
+            dominant: 'Dominante',
+            submediant: 'Submediante',
+            leadingTone: 'Sensible',
+            subtonic: 'Subtónica',
+        },
+    },
+};
+
+class CircleOfFifthsWheel {
+    language = input('en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    selectedIndex = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    selectedType = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedType" }] : /* istanbul ignore next */ []));
+    interactive = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    keySelected = output();
+    text = computed(() => COPY[this.language()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    keys = KEYS;
+    CX = 300;
+    CY = 300;
+    KEY_SIG = { inner: 250, outer: 288 };
+    MAJOR = { inner: 172, outer: 250 };
+    MINOR = { inner: 102, outer: 172 };
+    get slice() {
+        const idx = this.selectedIndex();
+        if (idx === null)
+            return null;
+        return {
+            prev: (idx - 1 + 12) % 12,
+            curr: idx,
+            next: (idx + 1) % 12,
+        };
+    }
+    onKeyClick(index, type) {
+        if (!this.interactive())
+            return;
+        this.keySelected.emit({ index, type });
+    }
+    getMajorState(index) {
+        const s = this.slice;
+        if (!s)
+            return '';
+        const type = this.selectedType();
+        if (index === s.curr)
+            return type === 'major' ? 'tonic' : 'scale-major';
+        if (index === s.prev || index === s.next)
+            return 'scale-major';
+        return '';
+    }
+    getMinorState(index) {
+        const s = this.slice;
+        if (!s)
+            return '';
+        const type = this.selectedType();
+        const dimIdx = (s.curr + 2) % 12;
+        if (index === s.curr)
+            return type === 'minor' ? 'tonic' : 'scale-minor';
+        if (index === s.prev || index === s.next)
+            return 'scale-minor';
+        if (index === dimIdx)
+            return 'scale-diminished';
+        return '';
+    }
+    getMajorRole(index) {
+        const s = this.slice;
+        if (!s)
+            return '';
+        const type = this.selectedType();
+        if (type === 'major') {
+            if (index === s.curr)
+                return 'I';
+            if (index === s.prev)
+                return 'IV';
+            if (index === s.next)
+                return 'V';
+        }
+        else {
+            if (index === s.curr)
+                return 'III';
+            if (index === s.prev)
+                return 'VI';
+            if (index === s.next)
+                return 'VII';
+        }
+        return '';
+    }
+    getMinorRole(index) {
+        const s = this.slice;
+        if (!s)
+            return '';
+        const type = this.selectedType();
+        const dimIdx = (s.curr + 2) % 12;
+        if (type === 'major') {
+            if (index === s.curr)
+                return 'vi';
+            if (index === s.prev)
+                return 'ii';
+            if (index === s.next)
+                return 'iii';
+            if (index === dimIdx)
+                return 'vii°';
+        }
+        else {
+            if (index === s.curr)
+                return 'i';
+            if (index === s.prev)
+                return 'iv';
+            if (index === s.next)
+                return 'v';
+            if (index === dimIdx)
+                return 'ii°';
+        }
+        return '';
+    }
+    arcPath(innerR, outerR, index, gap = 1.5) {
+        const mid = index * 30 - 90;
+        const s = (mid - 15 + gap) * (Math.PI / 180);
+        const e = (mid + 15 - gap) * (Math.PI / 180);
+        const cx = this.CX, cy = this.CY;
+        const x1 = cx + outerR * Math.cos(s), y1 = cy + outerR * Math.sin(s);
+        const x2 = cx + outerR * Math.cos(e), y2 = cy + outerR * Math.sin(e);
+        const x3 = cx + innerR * Math.cos(e), y3 = cy + innerR * Math.sin(e);
+        const x4 = cx + innerR * Math.cos(s), y4 = cy + innerR * Math.sin(s);
+        const f = (n) => n.toFixed(2);
+        return `M${f(x1)} ${f(y1)} A${outerR} ${outerR} 0 0 1 ${f(x2)} ${f(y2)} L${f(x3)} ${f(y3)} A${innerR} ${innerR} 0 0 0 ${f(x4)} ${f(y4)}Z`;
+    }
+    textPos(midR, index) {
+        const a = (index * 30 - 90) * (Math.PI / 180);
+        return {
+            x: this.CX + midR * Math.cos(a),
+            y: this.CY + midR * Math.sin(a),
+        };
+    }
+    getAccidentalText(key) {
+        if (key.sharps > 0)
+            return `${key.sharps}♯`;
+        if (key.flats > 0)
+            return `${key.flats}♭`;
+        return '—';
+    }
+    get selectedInfo() {
+        const idx = this.selectedIndex();
+        const type = this.selectedType();
+        if (idx === null || type === null)
+            return null;
+        const key = KEYS[idx];
+        const copy = this.text();
+        const scale = type === 'major' ? copy.major : copy.minor;
+        return {
+            name: type === 'major' ? key.major : key.minor,
+            scale,
+            fullName: `${type === 'major' ? key.major : key.minor} ${scale}`,
+            relativeKey: type === 'major'
+                ? `${copy.relativeMinor}: ${key.minor}`
+                : `${copy.relativeMajor}: ${key.major}`,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CircleOfFifthsWheel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CircleOfFifthsWheel, isStandalone: true, selector: "circle-of-fifths-wheel", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelected" }, host: { properties: { "class.readonly": "!interactive()" } }, ngImport: i0, template: "<div class=\"circle-wrapper\">\n  <svg\n    viewBox=\"0 0 600 600\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.aria-label]=\"text().ariaLabel\"\n  >\n    <!-- \u2500\u2500 Key Signature Ring \u2500\u2500 -->\n    @for (key of keys; track key.index) {\n      <path [attr.d]=\"arcPath(KEY_SIG.inner, KEY_SIG.outer, key.index)\" class=\"keysig-segment\" />\n      <text\n        [attr.x]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).x\"\n        [attr.y]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).y\"\n        class=\"keysig-label\"\n      >\n        {{ getAccidentalText(key) }}\n      </text>\n    }\n\n    <!-- \u2500\u2500 Major Keys Ring \u2500\u2500 -->\n    @for (key of keys; track key.index) {\n      <g\n        [ngClass]=\"['major-group', getMajorState(key.index)]\"\n        (click)=\"onKeyClick(key.index, 'major')\"\n      >\n        <path [attr.d]=\"arcPath(MAJOR.inner, MAJOR.outer, key.index)\" />\n\n        <text\n          [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n          [attr.y]=\"\n            textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y +\n            (getMajorRole(key.index) ? -9 : 0)\n          \"\n          class=\"major-label\"\n        >\n          {{ key.major }}\n        </text>\n\n        @if (getMajorRole(key.index)) {\n          <text\n            [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n            [attr.y]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y + 11\"\n            class=\"role-label\"\n          >\n            {{ getMajorRole(key.index) }}\n          </text>\n        }\n      </g>\n    }\n\n    <!-- \u2500\u2500 Minor Keys Ring \u2500\u2500 -->\n    @for (key of keys; track key.index) {\n      <g\n        [ngClass]=\"['minor-group', getMinorState(key.index)]\"\n        (click)=\"onKeyClick(key.index, 'minor')\"\n      >\n        <path [attr.d]=\"arcPath(MINOR.inner, MINOR.outer, key.index)\" />\n\n        <text\n          [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n          [attr.y]=\"\n            textPos((MINOR.inner + MINOR.outer) / 2, key.index).y +\n            (getMinorRole(key.index) ? -8 : 0)\n          \"\n          class=\"minor-label\"\n        >\n          {{ key.minor }}\n        </text>\n\n        @if (getMinorRole(key.index)) {\n          <text\n            [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n            [attr.y]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).y + 9\"\n            class=\"role-label\"\n          >\n            {{ getMinorRole(key.index) }}\n          </text>\n        }\n      </g>\n    }\n\n    <!-- \u2500\u2500 Outer border \u2500\u2500 -->\n    <circle cx=\"300\" cy=\"300\" r=\"289\" class=\"outer-border\" />\n\n    <!-- \u2500\u2500 Center Circle \u2500\u2500 -->\n    <circle cx=\"300\" cy=\"300\" r=\"99\" class=\"center-circle\" />\n\n    @if (selectedInfo) {\n      <text x=\"300\" y=\"283\" class=\"center-name\">{{ selectedInfo.name }}</text>\n      <text x=\"300\" y=\"304\" class=\"center-scale\">{{ selectedInfo.scale }}</text>\n      <text x=\"300\" y=\"322\" class=\"center-relative\">{{ selectedInfo.relativeKey }}</text>\n      @if (interactive()) {\n        <text x=\"300\" y=\"338\" class=\"center-deselect\">{{ text().deselect }}</text>\n      }\n    } @else if (interactive()) {\n      <text x=\"300\" y=\"293\" class=\"center-hint\">{{ text().clickKey }}</text>\n      <text x=\"300\" y=\"312\" class=\"center-hint-sm\">{{ text().seeChords }}</text>\n    }\n  </svg>\n</div>\n\n<!-- \u2500\u2500 Legend \u2500\u2500 -->\n<div class=\"legend\">\n  <span class=\"legend-item tonic\">{{ text().tonicLegend }}</span>\n  <span class=\"legend-item scale-major\">{{ text().majorLegend }}</span>\n  <span class=\"legend-item scale-minor\">{{ text().minorLegend }}</span>\n  <span class=\"legend-item scale-diminished\">{{ text().diminishedLegend }}</span>\n</div>\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-background-alt: var(--chords-background-alt, #f8fafc);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);display:block;font-family:Segoe UI,system-ui,sans-serif}:host(.readonly) .major-group,:host(.readonly) .minor-group{cursor:default;pointer-events:none}.circle-wrapper{max-width:580px;margin:0 auto}.circle-wrapper svg{display:block;width:100%;height:auto;overflow:visible}.keysig-segment{fill:var(--_chords-text)}.keysig-label{fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-size:12px;font-weight:500;text-anchor:middle;dominant-baseline:central;pointer-events:none}.major-group{cursor:pointer}.major-group path{fill:color-mix(in srgb,var(--_chords-primary) 14%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.major-group:hover path{fill:color-mix(in srgb,var(--_chords-primary) 24%,var(--_chords-surface))}.major-group .major-label{fill:var(--_chords-text);font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.major-group.tonic path{fill:var(--_chords-highlight)}.major-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.major-group.tonic .major-label{fill:var(--_chords-on-primary)}.major-group.scale-major path{fill:var(--_chords-primary)}.major-group.scale-major:hover path{fill:color-mix(in srgb,var(--_chords-primary) 82%,var(--_chords-text))}.major-group.scale-major .major-label{fill:var(--_chords-on-primary)}.minor-group{cursor:pointer}.minor-group path{fill:color-mix(in srgb,var(--_chords-secondary) 10%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.minor-group:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 20%,var(--_chords-surface))}.minor-group .minor-label{fill:color-mix(in srgb,var(--_chords-text) 78%,var(--_chords-muted));font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.minor-group.tonic path{fill:var(--_chords-highlight)}.minor-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.minor-group.tonic .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-minor path{fill:var(--_chords-secondary)}.minor-group.scale-minor:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 82%,var(--_chords-text))}.minor-group.scale-minor .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-diminished path{fill:var(--_chords-danger)}.minor-group.scale-diminished:hover path{fill:color-mix(in srgb,var(--_chords-danger) 82%,var(--_chords-text))}.minor-group.scale-diminished .minor-label{fill:var(--_chords-on-primary)}.role-label{font-size:10px;font-style:italic;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:color-mix(in srgb,var(--_chords-on-primary) 85%,transparent)}.outer-border{fill:none;stroke:var(--_chords-text);stroke-width:2.5}.center-circle{fill:var(--_chords-surface);stroke:var(--_chords-border);stroke-width:2;filter:drop-shadow(0 2px 10px color-mix(in srgb,var(--_chords-text) 8%,transparent))}.center-name{font-size:30px;font-weight:800;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-text);letter-spacing:-.02em}.center-scale{font-size:13px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-muted);text-transform:uppercase;letter-spacing:.08em}.center-relative{font-size:9.5px;font-weight:500;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-deselect{font-size:8px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.center-hint{font-size:16px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-hint-sm{font-size:11px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:16px 0 0}.legend .legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--_chords-muted)}.legend .legend-item:before{content:\"\";display:inline-block;width:14px;height:14px;border-radius:3px}.legend .legend-item.tonic:before{background:var(--_chords-highlight)}.legend .legend-item.scale-major:before{background:var(--_chords-primary)}.legend .legend-item.scale-minor:before{background:var(--_chords-secondary)}.legend .legend-item.scale-diminished:before{background:var(--_chords-danger)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CircleOfFifthsWheel, decorators: [{
+            type: Component,
+            args: [{ selector: 'circle-of-fifths-wheel', standalone: true, imports: [NgClass], host: { '[class.readonly]': '!interactive()' }, template: "<div class=\"circle-wrapper\">\n  <svg\n    viewBox=\"0 0 600 600\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.aria-label]=\"text().ariaLabel\"\n  >\n    <!-- \u2500\u2500 Key Signature Ring \u2500\u2500 -->\n    @for (key of keys; track key.index) {\n      <path [attr.d]=\"arcPath(KEY_SIG.inner, KEY_SIG.outer, key.index)\" class=\"keysig-segment\" />\n      <text\n        [attr.x]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).x\"\n        [attr.y]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).y\"\n        class=\"keysig-label\"\n      >\n        {{ getAccidentalText(key) }}\n      </text>\n    }\n\n    <!-- \u2500\u2500 Major Keys Ring \u2500\u2500 -->\n    @for (key of keys; track key.index) {\n      <g\n        [ngClass]=\"['major-group', getMajorState(key.index)]\"\n        (click)=\"onKeyClick(key.index, 'major')\"\n      >\n        <path [attr.d]=\"arcPath(MAJOR.inner, MAJOR.outer, key.index)\" />\n\n        <text\n          [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n          [attr.y]=\"\n            textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y +\n            (getMajorRole(key.index) ? -9 : 0)\n          \"\n          class=\"major-label\"\n        >\n          {{ key.major }}\n        </text>\n\n        @if (getMajorRole(key.index)) {\n          <text\n            [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n            [attr.y]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y + 11\"\n            class=\"role-label\"\n          >\n            {{ getMajorRole(key.index) }}\n          </text>\n        }\n      </g>\n    }\n\n    <!-- \u2500\u2500 Minor Keys Ring \u2500\u2500 -->\n    @for (key of keys; track key.index) {\n      <g\n        [ngClass]=\"['minor-group', getMinorState(key.index)]\"\n        (click)=\"onKeyClick(key.index, 'minor')\"\n      >\n        <path [attr.d]=\"arcPath(MINOR.inner, MINOR.outer, key.index)\" />\n\n        <text\n          [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n          [attr.y]=\"\n            textPos((MINOR.inner + MINOR.outer) / 2, key.index).y +\n            (getMinorRole(key.index) ? -8 : 0)\n          \"\n          class=\"minor-label\"\n        >\n          {{ key.minor }}\n        </text>\n\n        @if (getMinorRole(key.index)) {\n          <text\n            [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n            [attr.y]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).y + 9\"\n            class=\"role-label\"\n          >\n            {{ getMinorRole(key.index) }}\n          </text>\n        }\n      </g>\n    }\n\n    <!-- \u2500\u2500 Outer border \u2500\u2500 -->\n    <circle cx=\"300\" cy=\"300\" r=\"289\" class=\"outer-border\" />\n\n    <!-- \u2500\u2500 Center Circle \u2500\u2500 -->\n    <circle cx=\"300\" cy=\"300\" r=\"99\" class=\"center-circle\" />\n\n    @if (selectedInfo) {\n      <text x=\"300\" y=\"283\" class=\"center-name\">{{ selectedInfo.name }}</text>\n      <text x=\"300\" y=\"304\" class=\"center-scale\">{{ selectedInfo.scale }}</text>\n      <text x=\"300\" y=\"322\" class=\"center-relative\">{{ selectedInfo.relativeKey }}</text>\n      @if (interactive()) {\n        <text x=\"300\" y=\"338\" class=\"center-deselect\">{{ text().deselect }}</text>\n      }\n    } @else if (interactive()) {\n      <text x=\"300\" y=\"293\" class=\"center-hint\">{{ text().clickKey }}</text>\n      <text x=\"300\" y=\"312\" class=\"center-hint-sm\">{{ text().seeChords }}</text>\n    }\n  </svg>\n</div>\n\n<!-- \u2500\u2500 Legend \u2500\u2500 -->\n<div class=\"legend\">\n  <span class=\"legend-item tonic\">{{ text().tonicLegend }}</span>\n  <span class=\"legend-item scale-major\">{{ text().majorLegend }}</span>\n  <span class=\"legend-item scale-minor\">{{ text().minorLegend }}</span>\n  <span class=\"legend-item scale-diminished\">{{ text().diminishedLegend }}</span>\n</div>\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-background-alt: var(--chords-background-alt, #f8fafc);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);display:block;font-family:Segoe UI,system-ui,sans-serif}:host(.readonly) .major-group,:host(.readonly) .minor-group{cursor:default;pointer-events:none}.circle-wrapper{max-width:580px;margin:0 auto}.circle-wrapper svg{display:block;width:100%;height:auto;overflow:visible}.keysig-segment{fill:var(--_chords-text)}.keysig-label{fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-size:12px;font-weight:500;text-anchor:middle;dominant-baseline:central;pointer-events:none}.major-group{cursor:pointer}.major-group path{fill:color-mix(in srgb,var(--_chords-primary) 14%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.major-group:hover path{fill:color-mix(in srgb,var(--_chords-primary) 24%,var(--_chords-surface))}.major-group .major-label{fill:var(--_chords-text);font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.major-group.tonic path{fill:var(--_chords-highlight)}.major-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.major-group.tonic .major-label{fill:var(--_chords-on-primary)}.major-group.scale-major path{fill:var(--_chords-primary)}.major-group.scale-major:hover path{fill:color-mix(in srgb,var(--_chords-primary) 82%,var(--_chords-text))}.major-group.scale-major .major-label{fill:var(--_chords-on-primary)}.minor-group{cursor:pointer}.minor-group path{fill:color-mix(in srgb,var(--_chords-secondary) 10%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.minor-group:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 20%,var(--_chords-surface))}.minor-group .minor-label{fill:color-mix(in srgb,var(--_chords-text) 78%,var(--_chords-muted));font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.minor-group.tonic path{fill:var(--_chords-highlight)}.minor-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.minor-group.tonic .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-minor path{fill:var(--_chords-secondary)}.minor-group.scale-minor:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 82%,var(--_chords-text))}.minor-group.scale-minor .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-diminished path{fill:var(--_chords-danger)}.minor-group.scale-diminished:hover path{fill:color-mix(in srgb,var(--_chords-danger) 82%,var(--_chords-text))}.minor-group.scale-diminished .minor-label{fill:var(--_chords-on-primary)}.role-label{font-size:10px;font-style:italic;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:color-mix(in srgb,var(--_chords-on-primary) 85%,transparent)}.outer-border{fill:none;stroke:var(--_chords-text);stroke-width:2.5}.center-circle{fill:var(--_chords-surface);stroke:var(--_chords-border);stroke-width:2;filter:drop-shadow(0 2px 10px color-mix(in srgb,var(--_chords-text) 8%,transparent))}.center-name{font-size:30px;font-weight:800;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-text);letter-spacing:-.02em}.center-scale{font-size:13px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-muted);text-transform:uppercase;letter-spacing:.08em}.center-relative{font-size:9.5px;font-weight:500;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-deselect{font-size:8px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.center-hint{font-size:16px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-hint-sm{font-size:11px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:16px 0 0}.legend .legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--_chords-muted)}.legend .legend-item:before{content:\"\";display:inline-block;width:14px;height:14px;border-radius:3px}.legend .legend-item.tonic:before{background:var(--_chords-highlight)}.legend .legend-item.scale-major:before{background:var(--_chords-primary)}.legend .legend-item.scale-minor:before{background:var(--_chords-secondary)}.legend .legend-item.scale-diminished:before{background:var(--_chords-danger)}\n"] }]
+        }], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], selectedType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedType", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], keySelected: [{ type: i0.Output, args: ["keySelected"] }] } });
 
 const PROGRESSIONS = {
     major: [
@@ -104,96 +372,6 @@ const PROGRESSIONS = {
         },
     ],
 };
-const COPY = {
-    en: {
-        title: 'Circle of Fifths',
-        subtitle: 'Click any major or minor key to highlight its diatonic chords',
-        ariaLabel: 'Circle of Fifths',
-        clickKey: 'Click a key',
-        seeChords: 'to see its chords',
-        deselect: '↩ click to deselect',
-        tonicLegend: 'Tonic (I / i)',
-        majorLegend: 'Major chords (IV, V)',
-        minorLegend: 'Minor chords (ii, iii, vi)',
-        diminishedLegend: 'Diminished (vii° / ii°)',
-        diatonicChords: 'Diatonic Chords',
-        commonProgressions: 'Common Progressions in',
-        generateProgressions: 'Shuffle',
-        chorus: 'Chorus',
-        bridge: 'Bridge',
-        outro: 'Outro',
-        verse: 'Verse',
-        copy: 'Copy',
-        expand: 'Expand',
-        collapse: 'Collapse',
-        major: 'Major',
-        minor: 'Minor',
-        diminished: 'diminished',
-        relativeMinor: 'Relative minor',
-        relativeMajor: 'Relative major',
-        roles: {
-            tonic: 'Tonic',
-            supertonic: 'Supertonic',
-            mediant: 'Mediant',
-            subdominant: 'Subdominant',
-            dominant: 'Dominant',
-            submediant: 'Submediant',
-            leadingTone: 'Leading Tone',
-            subtonic: 'Subtonic',
-        },
-    },
-    es: {
-        title: 'Círculo de quintas',
-        subtitle: 'Haz clic en una tonalidad mayor o menor para resaltar sus acordes diatónicos',
-        ariaLabel: 'Círculo de quintas',
-        clickKey: 'Haz clic en una tonalidad',
-        seeChords: 'para ver sus acordes',
-        deselect: '↩ haz clic para deseleccionar',
-        tonicLegend: 'Tónica (I / i)',
-        majorLegend: 'Acordes mayores (IV, V)',
-        minorLegend: 'Acordes menores (ii, iii, vi)',
-        diminishedLegend: 'Disminuido (vii° / ii°)',
-        diatonicChords: 'Acordes diatónicos',
-        commonProgressions: 'Progresiones comunes en',
-        generateProgressions: 'Generar nuevos',
-        chorus: 'Coro',
-        bridge: 'Puente',
-        outro: 'Final',
-        verse: 'Estrofa',
-        copy: 'Copiar',
-        expand: 'Expandir',
-        collapse: 'Colapsar',
-        major: 'Mayor',
-        minor: 'Menor',
-        diminished: 'disminuido',
-        relativeMinor: 'Relativa menor',
-        relativeMajor: 'Relativa mayor',
-        roles: {
-            tonic: 'Tónica',
-            supertonic: 'Supertónica',
-            mediant: 'Mediante',
-            subdominant: 'Subdominante',
-            dominant: 'Dominante',
-            submediant: 'Submediante',
-            leadingTone: 'Sensible',
-            subtonic: 'Subtónica',
-        },
-    },
-};
-const KEYS = [
-    { index: 0, major: 'C', minor: 'Am', sharps: 0, flats: 0 },
-    { index: 1, major: 'G', minor: 'Em', sharps: 1, flats: 0 },
-    { index: 2, major: 'D', minor: 'Bm', sharps: 2, flats: 0 },
-    { index: 3, major: 'A', minor: 'F♯m', sharps: 3, flats: 0 },
-    { index: 4, major: 'E', minor: 'C♯m', sharps: 4, flats: 0 },
-    { index: 5, major: 'B', minor: 'G♯m', sharps: 5, flats: 0 },
-    { index: 6, major: 'F♯', minor: 'D♯m', sharps: 6, flats: 0 },
-    { index: 7, major: 'D♭', minor: 'B♭m', sharps: 0, flats: 5 },
-    { index: 8, major: 'A♭', minor: 'Fm', sharps: 0, flats: 4 },
-    { index: 9, major: 'E♭', minor: 'Cm', sharps: 0, flats: 3 },
-    { index: 10, major: 'B♭', minor: 'Gm', sharps: 0, flats: 2 },
-    { index: 11, major: 'F', minor: 'Dm', sharps: 0, flats: 1 },
-];
 function dimChord(idx) {
     // The diminished chord root is the minor key two steps clockwise (idx+2)
     return KEYS[(idx + 2) % 12].minor.replace(/m$/, '°');
@@ -224,69 +402,129 @@ function buildChordRows(idx, type, copy) {
         ];
     }
 }
+// Suffix to append per numeral at spice levels 1, 2, 3.
+// Minor chords already carry 'm' (e.g. "Dm"), so suffix starts from the number.
+// Diminished chords carry '°' which gets replaced entirely.
+const SPICE_SUFFIXES = {
+    'I': ['maj7', 'maj9', 'maj9'],
+    'ii': ['7', '9', '11'],
+    'iii': ['7', '7', '7'],
+    'IV': ['maj7', 'maj9', 'maj7♯11'],
+    'V': ['7', '9', '13'],
+    'vi': ['7', '9', '11'],
+    'vii°': ['m7♭5', 'm7♭5', 'm7♭5'],
+    'i': ['7', '9', '9'],
+    'iv': ['7', '9', '11'],
+    'v': ['7', '7', '7'],
+    'III': ['maj7', 'maj7', 'maj7'],
+    'VI': ['maj7', 'maj9', 'maj9'],
+    'VII': ['7', '9', '13'],
+    'ii°': ['m7♭5', 'm7♭5', 'm7♭5'],
+};
+function spiceChord(chord, numeral, level) {
+    if (level === 0)
+        return chord;
+    const suffixes = SPICE_SUFFIXES[numeral];
+    if (!suffixes)
+        return chord;
+    const suffix = suffixes[level - 1];
+    // Diminished chords: strip '°', then the suffix already starts with 'm'
+    return chord.endsWith('°') ? chord.slice(0, -1) + suffix : chord + suffix;
+}
 class ChordSectionComponent {
-    chords = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "chords" }] : /* istanbul ignore next */ []));
+    chordService = inject(ChordService);
+    selectedIndex = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    selectedType = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedType" }] : /* istanbul ignore next */ []));
     language = input('en', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
     text = computed(() => COPY[this.language()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    match = computed(() => {
-        const input = this.chords();
-        if (!input.length)
-            return null;
-        const inputSet = new Set(input);
-        let best = null;
-        for (let idx = 0; idx < 12; idx++) {
-            for (const type of ['major', 'minor']) {
-                // chord names are language-independent; COPY.en is a dummy for label fields
-                const score = buildChordRows(idx, type, COPY.en).filter((r) => inputSet.has(r.chord)).length;
-                if (!best || score > best.score)
-                    best = { idx, type, score };
+    diagramsExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "diagramsExpanded" }] : /* istanbul ignore next */ []));
+    // Per-diagram fret position, keyed by ChordSearchResult.id.
+    positionIndices = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionIndices" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // A new key means a new set of diagrams — don't carry stale position
+        // choices over from the previous key's chords.
+        effect(() => {
+            this.selectedIndex();
+            this.selectedType();
+            this.positionIndices.set({});
+        });
+    }
+    toggleDiagrams() {
+        this.diagramsExpanded.update((v) => !v);
+    }
+    positionIndexFor(id) {
+        return this.positionIndices()[id] ?? 0;
+    }
+    stepPosition(id, total, delta) {
+        if (total <= 1)
+            return;
+        this.positionIndices.update((m) => ({
+            ...m,
+            [id]: ((m[id] ?? 0) + delta + total) % total,
+        }));
+    }
+    stepAllPositions(delta) {
+        this.positionIndices.update((m) => {
+            const next = { ...m };
+            for (const result of this.chordDiagrams()) {
+                const total = result.positions.length;
+                if (total <= 1)
+                    continue;
+                next[result.id] = ((next[result.id] ?? 0) + delta + total) % total;
             }
-        }
-        return best && best.score > 0 ? best : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "match" }] : /* istanbul ignore next */ []));
+            return next;
+        });
+    }
     rows = computed(() => {
-        const m = this.match();
-        if (!m)
+        const idx = this.selectedIndex();
+        const type = this.selectedType();
+        if (idx === null || type === null)
             return [];
-        return buildChordRows(m.idx, m.type, this.text());
+        return buildChordRows(idx, type, this.text());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     info = computed(() => {
-        const m = this.match();
-        if (!m)
+        const idx = this.selectedIndex();
+        const type = this.selectedType();
+        if (idx === null || type === null)
             return null;
         const copy = this.text();
-        const key = KEYS[m.idx];
+        const key = KEYS[idx];
         return {
-            fullName: `${m.type === 'major' ? key.major : key.minor} ${m.type === 'major' ? copy.major : copy.minor}`,
-            relativeKey: m.type === 'major'
+            fullName: `${type === 'major' ? key.major : key.minor} ${type === 'major' ? copy.major : copy.minor}`,
+            relativeKey: type === 'major'
                 ? `${copy.relativeMinor}: ${key.minor}`
                 : `${copy.relativeMajor}: ${key.major}`,
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []));
+    chordDiagrams = computed(() => {
+        const rows = this.rows();
+        if (!rows.length)
+            return [];
+        return this.chordService
+            .search(rows.map((r) => r.chord).join(','), this.language())
+            .filter((r) => !r.error && r.positions.length > 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chordDiagrams" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChordSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChordSectionComponent, isStandalone: true, selector: "chord-section", inputs: { chords: { classPropertyName: "chords", publicName: "chords", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (rows().length) {\n  <section class=\"chord-section\">\n    @if (info(); as info) {\n      <h2>{{ info.fullName }} \u2014 {{ text().diatonicChords }}</h2>\n      <p class=\"relative-label\">{{ info.relativeKey }}</p>\n    }\n    <div class=\"chord-grid\">\n      @for (row of rows(); track row.numeral) {\n        <div class=\"chord-card\" [ngClass]=\"row.state\">\n          <div class=\"chord-numeral\">{{ row.numeral }}</div>\n          <div class=\"chord-name\">{{ row.chord }}</div>\n          <div class=\"chord-type\">{{ row.chordType }}</div>\n          <div class=\"chord-role\">{{ row.role }}</div>\n        </div>\n      }\n    </div>\n  </section>\n}\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);display:block;font-family:Segoe UI,system-ui,sans-serif}.chord-section{margin-top:36px;text-align:center}.chord-section h2{margin:0 0 4px;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.chord-section .relative-label{margin:0 0 20px;font-size:.88rem;color:var(--_chords-muted)}.chord-grid{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;padding-bottom:4px}.chord-card{border-radius:12px;padding:12px 14px;min-width:82px;flex-shrink:0;text-align:center;background:color-mix(in srgb,var(--_chords-text) 8%,var(--_chords-surface));border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease}.chord-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 10%,transparent)}.chord-card .chord-numeral{font-size:.85rem;font-weight:700;font-style:italic;color:var(--_chords-muted)}.chord-card .chord-name{font-size:1.4rem;font-weight:800;color:var(--_chords-text);margin:2px 0;letter-spacing:-.02em}.chord-card .chord-type{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.chord-card .chord-role{font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));margin-top:2px}.chord-card.tonic{background:color-mix(in srgb,var(--_chords-highlight) 10%,var(--_chords-surface));border-color:var(--_chords-highlight)}.chord-card.tonic .chord-numeral,.chord-card.tonic .chord-name{color:color-mix(in srgb,var(--_chords-highlight) 58%,var(--_chords-text))}.chord-card.scale-major{background:color-mix(in srgb,var(--_chords-primary) 9%,var(--_chords-surface));border-color:var(--_chords-primary)}.chord-card.scale-major .chord-numeral,.chord-card.scale-major .chord-name{color:color-mix(in srgb,var(--_chords-primary) 65%,var(--_chords-text))}.chord-card.scale-diminished{background:color-mix(in srgb,var(--_chords-danger) 9%,var(--_chords-surface));border-color:var(--_chords-danger)}.chord-card.scale-diminished .chord-numeral,.chord-card.scale-diminished .chord-name{color:color-mix(in srgb,var(--_chords-danger) 65%,var(--_chords-text))}@media(max-width:480px){.chord-card{min-width:75px;padding:10px 12px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChordSectionComponent, isStandalone: true, selector: "chord-section", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (rows().length) {\n  <section class=\"chord-section\">\n    @if (info(); as info) {\n      <h2>{{ info.fullName }} \u2014 {{ text().diatonicChords }}</h2>\n      <p class=\"relative-label\">{{ info.relativeKey }}</p>\n    }\n    <div class=\"chord-grid\">\n      @for (row of rows(); track row.numeral) {\n        <div class=\"chord-card\" [ngClass]=\"row.state\">\n          <div class=\"chord-numeral\">{{ row.numeral }}</div>\n          <div class=\"chord-name\">{{ row.chord }}</div>\n          <div class=\"chord-type\">{{ row.chordType }}</div>\n          <div class=\"chord-role\">{{ row.role }}</div>\n        </div>\n      }\n    </div>\n\n    <button type=\"button\" class=\"btn-diagrams-toggle\" (click)=\"toggleDiagrams()\">\n      {{ diagramsExpanded() ? text().hideChordDiagrams : text().showChordDiagrams }}\n    </button>\n\n    @if (diagramsExpanded()) {\n      <div class=\"diagram-grid-row\">\n        <div class=\"diagram-grid\">\n          @for (result of chordDiagrams(); track result.id) {\n            @if (result.positions[positionIndexFor(result.id)]; as position) {\n              <div class=\"diagram-wrap\">\n                <button\n                  type=\"button\"\n                  class=\"diagram-nav-btn\"\n                  [disabled]=\"result.positions.length <= 1\"\n                  [attr.aria-label]=\"text().previousPosition\"\n                  (click)=\"stepPosition(result.id, result.positions.length, -1)\"\n                >\n                  \u25B2\n                </button>\n                <app-chord-diagram\n                  [title]=\"result.displayName\"\n                  [position]=\"position\"\n                  [positionIndex]=\"positionIndexFor(result.id)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"diagram-nav-btn\"\n                  [disabled]=\"result.positions.length <= 1\"\n                  [attr.aria-label]=\"text().nextPosition\"\n                  (click)=\"stepPosition(result.id, result.positions.length, 1)\"\n                >\n                  \u25BC\n                </button>\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"diagram-group-nav\">\n          <button type=\"button\" [attr.aria-label]=\"text().previousPositionAll\" (click)=\"stepAllPositions(-1)\">\u25B2</button>\n          <button type=\"button\" [attr.aria-label]=\"text().nextPositionAll\" (click)=\"stepAllPositions(1)\">\u25BC</button>\n        </div>\n      </div>\n    }\n  </section>\n}\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);display:block;font-family:Segoe UI,system-ui,sans-serif}.chord-section{margin-top:36px;text-align:center}.chord-section h2{margin:0 0 4px;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.chord-section .relative-label{margin:0 0 20px;font-size:.88rem;color:var(--_chords-muted)}.chord-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chord-card{border-radius:12px;padding:12px 14px;min-width:82px;flex-shrink:0;text-align:center;background:color-mix(in srgb,var(--_chords-text) 8%,var(--_chords-surface));border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease}.chord-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 10%,transparent)}.chord-card .chord-numeral{font-size:.85rem;font-weight:700;font-style:italic;color:var(--_chords-muted)}.chord-card .chord-name{font-size:1.4rem;font-weight:800;color:var(--_chords-text);margin:2px 0;letter-spacing:-.02em}.chord-card .chord-type{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.chord-card .chord-role{font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));margin-top:2px}.chord-card.tonic{background:color-mix(in srgb,var(--_chords-highlight) 10%,var(--_chords-surface));border-color:var(--_chords-highlight)}.chord-card.tonic .chord-numeral,.chord-card.tonic .chord-name{color:color-mix(in srgb,var(--_chords-highlight) 58%,var(--_chords-text))}.chord-card.scale-major{background:color-mix(in srgb,var(--_chords-primary) 9%,var(--_chords-surface));border-color:var(--_chords-primary)}.chord-card.scale-major .chord-numeral,.chord-card.scale-major .chord-name{color:color-mix(in srgb,var(--_chords-primary) 65%,var(--_chords-text))}.chord-card.scale-diminished{background:color-mix(in srgb,var(--_chords-danger) 9%,var(--_chords-surface));border-color:var(--_chords-danger)}.chord-card.scale-diminished .chord-numeral,.chord-card.scale-diminished .chord-name{color:color-mix(in srgb,var(--_chords-danger) 65%,var(--_chords-text))}@media(max-width:480px){.chord-card{min-width:75px;padding:10px 12px}}.btn-diagrams-toggle{display:block;width:100%;margin-top:14px;padding:10px 14px;font-size:.82rem;font-weight:600;border:1px solid var(--_chords-border);border-radius:10px;background:transparent;color:var(--_chords-text);cursor:pointer;transition:border-color .15s,color .15s}.btn-diagrams-toggle:hover{border-color:var(--_chords-primary);color:var(--_chords-primary)}.diagram-grid-row{display:flex;align-items:center;gap:10px;margin-top:16px}.diagram-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));justify-items:center;gap:12px;flex:1 1 auto;min-width:0}.diagram-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:130px}.diagram-nav-btn,.diagram-group-nav button{padding:2px 10px;font-size:.7rem;line-height:1.4;border:1px solid var(--_chords-border);border-radius:8px;background:transparent;color:var(--_chords-muted);cursor:pointer;transition:border-color .15s,color .15s}.diagram-nav-btn:hover:not(:disabled),.diagram-group-nav button:hover:not(:disabled){border-color:var(--_chords-primary);color:var(--_chords-primary)}.diagram-nav-btn:disabled,.diagram-group-nav button:disabled{opacity:.35;cursor:not-allowed}.diagram-nav-btn{width:100%}.diagram-group-nav{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:0 0 auto}.diagram-group-nav button{padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChordDiagram, selector: "app-chord-diagram", inputs: ["title", "position", "positionIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChordSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chord-section', standalone: true, imports: [NgClass], template: "@if (rows().length) {\n  <section class=\"chord-section\">\n    @if (info(); as info) {\n      <h2>{{ info.fullName }} \u2014 {{ text().diatonicChords }}</h2>\n      <p class=\"relative-label\">{{ info.relativeKey }}</p>\n    }\n    <div class=\"chord-grid\">\n      @for (row of rows(); track row.numeral) {\n        <div class=\"chord-card\" [ngClass]=\"row.state\">\n          <div class=\"chord-numeral\">{{ row.numeral }}</div>\n          <div class=\"chord-name\">{{ row.chord }}</div>\n          <div class=\"chord-type\">{{ row.chordType }}</div>\n          <div class=\"chord-role\">{{ row.role }}</div>\n        </div>\n      }\n    </div>\n  </section>\n}\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);display:block;font-family:Segoe UI,system-ui,sans-serif}.chord-section{margin-top:36px;text-align:center}.chord-section h2{margin:0 0 4px;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.chord-section .relative-label{margin:0 0 20px;font-size:.88rem;color:var(--_chords-muted)}.chord-grid{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;padding-bottom:4px}.chord-card{border-radius:12px;padding:12px 14px;min-width:82px;flex-shrink:0;text-align:center;background:color-mix(in srgb,var(--_chords-text) 8%,var(--_chords-surface));border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease}.chord-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 10%,transparent)}.chord-card .chord-numeral{font-size:.85rem;font-weight:700;font-style:italic;color:var(--_chords-muted)}.chord-card .chord-name{font-size:1.4rem;font-weight:800;color:var(--_chords-text);margin:2px 0;letter-spacing:-.02em}.chord-card .chord-type{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.chord-card .chord-role{font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));margin-top:2px}.chord-card.tonic{background:color-mix(in srgb,var(--_chords-highlight) 10%,var(--_chords-surface));border-color:var(--_chords-highlight)}.chord-card.tonic .chord-numeral,.chord-card.tonic .chord-name{color:color-mix(in srgb,var(--_chords-highlight) 58%,var(--_chords-text))}.chord-card.scale-major{background:color-mix(in srgb,var(--_chords-primary) 9%,var(--_chords-surface));border-color:var(--_chords-primary)}.chord-card.scale-major .chord-numeral,.chord-card.scale-major .chord-name{color:color-mix(in srgb,var(--_chords-primary) 65%,var(--_chords-text))}.chord-card.scale-diminished{background:color-mix(in srgb,var(--_chords-danger) 9%,var(--_chords-surface));border-color:var(--_chords-danger)}.chord-card.scale-diminished .chord-numeral,.chord-card.scale-diminished .chord-name{color:color-mix(in srgb,var(--_chords-danger) 65%,var(--_chords-text))}@media(max-width:480px){.chord-card{min-width:75px;padding:10px 12px}}\n"] }]
-        }], propDecorators: { chords: [{ type: i0.Input, args: [{ isSignal: true, alias: "chords", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }] } });
+            args: [{ selector: 'chord-section', standalone: true, imports: [NgClass, ChordDiagram], template: "@if (rows().length) {\n  <section class=\"chord-section\">\n    @if (info(); as info) {\n      <h2>{{ info.fullName }} \u2014 {{ text().diatonicChords }}</h2>\n      <p class=\"relative-label\">{{ info.relativeKey }}</p>\n    }\n    <div class=\"chord-grid\">\n      @for (row of rows(); track row.numeral) {\n        <div class=\"chord-card\" [ngClass]=\"row.state\">\n          <div class=\"chord-numeral\">{{ row.numeral }}</div>\n          <div class=\"chord-name\">{{ row.chord }}</div>\n          <div class=\"chord-type\">{{ row.chordType }}</div>\n          <div class=\"chord-role\">{{ row.role }}</div>\n        </div>\n      }\n    </div>\n\n    <button type=\"button\" class=\"btn-diagrams-toggle\" (click)=\"toggleDiagrams()\">\n      {{ diagramsExpanded() ? text().hideChordDiagrams : text().showChordDiagrams }}\n    </button>\n\n    @if (diagramsExpanded()) {\n      <div class=\"diagram-grid-row\">\n        <div class=\"diagram-grid\">\n          @for (result of chordDiagrams(); track result.id) {\n            @if (result.positions[positionIndexFor(result.id)]; as position) {\n              <div class=\"diagram-wrap\">\n                <button\n                  type=\"button\"\n                  class=\"diagram-nav-btn\"\n                  [disabled]=\"result.positions.length <= 1\"\n                  [attr.aria-label]=\"text().previousPosition\"\n                  (click)=\"stepPosition(result.id, result.positions.length, -1)\"\n                >\n                  \u25B2\n                </button>\n                <app-chord-diagram\n                  [title]=\"result.displayName\"\n                  [position]=\"position\"\n                  [positionIndex]=\"positionIndexFor(result.id)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"diagram-nav-btn\"\n                  [disabled]=\"result.positions.length <= 1\"\n                  [attr.aria-label]=\"text().nextPosition\"\n                  (click)=\"stepPosition(result.id, result.positions.length, 1)\"\n                >\n                  \u25BC\n                </button>\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"diagram-group-nav\">\n          <button type=\"button\" [attr.aria-label]=\"text().previousPositionAll\" (click)=\"stepAllPositions(-1)\">\u25B2</button>\n          <button type=\"button\" [attr.aria-label]=\"text().nextPositionAll\" (click)=\"stepAllPositions(1)\">\u25BC</button>\n        </div>\n      </div>\n    }\n  </section>\n}\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);display:block;font-family:Segoe UI,system-ui,sans-serif}.chord-section{margin-top:36px;text-align:center}.chord-section h2{margin:0 0 4px;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.chord-section .relative-label{margin:0 0 20px;font-size:.88rem;color:var(--_chords-muted)}.chord-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chord-card{border-radius:12px;padding:12px 14px;min-width:82px;flex-shrink:0;text-align:center;background:color-mix(in srgb,var(--_chords-text) 8%,var(--_chords-surface));border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease}.chord-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 10%,transparent)}.chord-card .chord-numeral{font-size:.85rem;font-weight:700;font-style:italic;color:var(--_chords-muted)}.chord-card .chord-name{font-size:1.4rem;font-weight:800;color:var(--_chords-text);margin:2px 0;letter-spacing:-.02em}.chord-card .chord-type{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.chord-card .chord-role{font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));margin-top:2px}.chord-card.tonic{background:color-mix(in srgb,var(--_chords-highlight) 10%,var(--_chords-surface));border-color:var(--_chords-highlight)}.chord-card.tonic .chord-numeral,.chord-card.tonic .chord-name{color:color-mix(in srgb,var(--_chords-highlight) 58%,var(--_chords-text))}.chord-card.scale-major{background:color-mix(in srgb,var(--_chords-primary) 9%,var(--_chords-surface));border-color:var(--_chords-primary)}.chord-card.scale-major .chord-numeral,.chord-card.scale-major .chord-name{color:color-mix(in srgb,var(--_chords-primary) 65%,var(--_chords-text))}.chord-card.scale-diminished{background:color-mix(in srgb,var(--_chords-danger) 9%,var(--_chords-surface));border-color:var(--_chords-danger)}.chord-card.scale-diminished .chord-numeral,.chord-card.scale-diminished .chord-name{color:color-mix(in srgb,var(--_chords-danger) 65%,var(--_chords-text))}@media(max-width:480px){.chord-card{min-width:75px;padding:10px 12px}}.btn-diagrams-toggle{display:block;width:100%;margin-top:14px;padding:10px 14px;font-size:.82rem;font-weight:600;border:1px solid var(--_chords-border);border-radius:10px;background:transparent;color:var(--_chords-text);cursor:pointer;transition:border-color .15s,color .15s}.btn-diagrams-toggle:hover{border-color:var(--_chords-primary);color:var(--_chords-primary)}.diagram-grid-row{display:flex;align-items:center;gap:10px;margin-top:16px}.diagram-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));justify-items:center;gap:12px;flex:1 1 auto;min-width:0}.diagram-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:130px}.diagram-nav-btn,.diagram-group-nav button{padding:2px 10px;font-size:.7rem;line-height:1.4;border:1px solid var(--_chords-border);border-radius:8px;background:transparent;color:var(--_chords-muted);cursor:pointer;transition:border-color .15s,color .15s}.diagram-nav-btn:hover:not(:disabled),.diagram-group-nav button:hover:not(:disabled){border-color:var(--_chords-primary);color:var(--_chords-primary)}.diagram-nav-btn:disabled,.diagram-group-nav button:disabled{opacity:.35;cursor:not-allowed}.diagram-nav-btn{width:100%}.diagram-group-nav{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:0 0 auto}.diagram-group-nav button{padding:10px 8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], selectedType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedType", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }] } });
 class CircleOfFifthsComponent {
     language = input('en', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
     text = computed(() => COPY[this.language()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    CX = 300;
-    CY = 300;
-    KEY_SIG = { inner: 250, outer: 288 };
-    MAJOR = { inner: 172, outer: 250 };
-    MINOR = { inner: 102, outer: 172 };
-    keys = KEYS;
     selectedIndex = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
     selectedType = signal(null, /* @ts-ignore */
@@ -295,15 +533,25 @@ class CircleOfFifthsComponent {
     ...(ngDevMode ? [{ debugName: "activeProgressionDefs" }] : /* istanbul ignore next */ []));
     expandedCards = signal(new Set(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expandedCards" }] : /* istanbul ignore next */ []));
-    get slice() {
-        const idx = this.selectedIndex();
-        if (idx === null)
-            return null;
-        return {
-            prev: (idx - 1 + 12) % 12,
-            curr: idx,
-            next: (idx + 1) % 12,
-        };
+    transposeMap = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transposeMap" }] : /* istanbul ignore next */ []));
+    spiceMap = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spiceMap" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Restore selected key from URL hash (format: #{index}-{type})
+        const [idxStr, type] = location.hash.slice(1).split('-');
+        const idx = Number(idxStr);
+        if (!isNaN(idx) && idx >= 0 && idx < 12 && (type === 'major' || type === 'minor')) {
+            this.selectedIndex.set(idx);
+            this.selectedType.set(type);
+        }
+        // Keep URL hash in sync with selected key
+        effect(() => {
+            const idx = this.selectedIndex();
+            const type = this.selectedType();
+            const hash = idx !== null && type !== null ? `#${idx}-${type}` : '';
+            history.replaceState(null, '', location.pathname + location.search + hash);
+        });
     }
     selectKey(index, type) {
         if (this.selectedIndex() === index && this.selectedType() === type) {
@@ -316,6 +564,8 @@ class CircleOfFifthsComponent {
         }
         this.activeProgressionDefs.set(null);
         this.expandedCards.set(new Set());
+        this.transposeMap.set(new Map());
+        this.spiceMap.set(new Map());
     }
     randomizeProgressions() {
         const type = this.selectedType();
@@ -324,6 +574,8 @@ class CircleOfFifthsComponent {
         // ponytail: sort-shuffle is fine for UI randomness
         this.activeProgressionDefs.set([...PROGRESSIONS[type]].sort(() => Math.random() - 0.5).slice(0, 4));
         this.expandedCards.set(new Set());
+        this.transposeMap.set(new Map());
+        this.spiceMap.set(new Map());
     }
     toggleCard(name) {
         this.expandedCards.update((set) => {
@@ -338,100 +590,26 @@ class CircleOfFifthsComponent {
             : prog.chords.join(', ');
         navigator.clipboard.writeText(text);
     }
-    getMajorState(index) {
-        const s = this.slice;
-        if (!s)
-            return '';
-        const type = this.selectedType();
-        if (index === s.curr)
-            return type === 'major' ? 'tonic' : 'scale-major';
-        if (index === s.prev || index === s.next)
-            return 'scale-major';
-        return '';
-    }
-    getMinorState(index) {
-        const s = this.slice;
-        if (!s)
-            return '';
-        const type = this.selectedType();
-        const dimIdx = (s.curr + 2) % 12;
-        if (index === s.curr)
-            return type === 'minor' ? 'tonic' : 'scale-minor';
-        if (index === s.prev || index === s.next)
-            return 'scale-minor';
-        if (index === dimIdx)
-            return 'scale-diminished';
-        return '';
+    setTranspose(nameEn, targetIdx) {
+        this.transposeMap.update((m) => {
+            const next = new Map(m);
+            targetIdx === this.selectedIndex() ? next.delete(nameEn) : next.set(nameEn, targetIdx);
+            return next;
+        });
     }
-    getMajorRole(index) {
-        const s = this.slice;
-        if (!s)
-            return '';
-        const type = this.selectedType();
-        if (type === 'major') {
-            if (index === s.curr)
-                return 'I';
-            if (index === s.prev)
-                return 'IV';
-            if (index === s.next)
-                return 'V';
-        }
-        else {
-            if (index === s.curr)
-                return 'III';
-            if (index === s.prev)
-                return 'VI';
-            if (index === s.next)
-                return 'VII';
-        }
-        return '';
+    cycleSpice(nameEn) {
+        this.spiceMap.update((m) => {
+            const next = new Map(m);
+            const nextLevel = ((next.get(nameEn) ?? 0) + 1) % 4;
+            nextLevel === 0 ? next.delete(nameEn) : next.set(nameEn, nextLevel);
+            return next;
+        });
     }
-    getMinorRole(index) {
-        const s = this.slice;
-        if (!s)
-            return '';
+    get transposeKeys() {
         const type = this.selectedType();
-        const dimIdx = (s.curr + 2) % 12;
-        if (type === 'major') {
-            if (index === s.curr)
-                return 'vi';
-            if (index === s.prev)
-                return 'ii';
-            if (index === s.next)
-                return 'iii';
-            if (index === dimIdx)
-                return 'vii°';
-        }
-        else {
-            if (index === s.curr)
-                return 'i';
-            if (index === s.prev)
-                return 'iv';
-            if (index === s.next)
-                return 'v';
-            if (index === dimIdx)
-                return 'ii°';
-        }
-        return '';
-    }
-    arcPath(innerR, outerR, index, gap = 1.5) {
-        const mid = index * 30 - 90;
-        const s = (mid - 15 + gap) * (Math.PI / 180);
-        const e = (mid + 15 - gap) * (Math.PI / 180);
-        const cx = this.CX, cy = this.CY;
-        const x1 = cx + outerR * Math.cos(s), y1 = cy + outerR * Math.sin(s);
-        const x2 = cx + outerR * Math.cos(e), y2 = cy + outerR * Math.sin(e);
-        const x3 = cx + innerR * Math.cos(e), y3 = cy + innerR * Math.sin(e);
-        const x4 = cx + innerR * Math.cos(s), y4 = cy + innerR * Math.sin(s);
-        const f = (n) => n.toFixed(2);
-        return `M${f(x1)} ${f(y1)} A${outerR} ${outerR} 0 0 1 ${f(x2)} ${f(y2)} L${f(x3)} ${f(y3)} A${innerR} ${innerR} 0 0 0 ${f(x4)} ${f(y4)}Z`;
-    }
-    textPos(midR, index) {
-        const a = (index * 30 - 90) * (Math.PI / 180);
-        return {
-            x: this.CX + midR * Math.cos(a),
-            y: this.CY + midR * Math.sin(a),
-        };
+        if (!type)
+            return [];
+        return KEYS.map((k) => ({ idx: k.index, name: type === 'major' ? k.major : k.minor }));
     }
     get chordTable() {
         const idx = this.selectedIndex();
@@ -440,16 +618,6 @@ class CircleOfFifthsComponent {
             return [];
         return buildChordRows(idx, type, this.text());
     }
-    get chordNames() {
-        return this.chordTable.map((r) => r.chord);
-    }
-    getAccidentalText(key) {
-        if (key.sharps > 0)
-            return `${key.sharps}♯`;
-        if (key.flats > 0)
-            return `${key.flats}♭`;
-        return '—';
-    }
     get selectedInfo() {
         const idx = this.selectedIndex();
         const type = this.selectedType();
@@ -457,15 +625,7 @@ class CircleOfFifthsComponent {
             return null;
         const key = KEYS[idx];
         const copy = this.text();
-        const scale = type === 'major' ? copy.major : copy.minor;
-        return {
-            name: type === 'major' ? key.major : key.minor,
-            scale,
-            fullName: `${type === 'major' ? key.major : key.minor} ${scale}`,
-            relativeKey: type === 'major'
-                ? `${copy.relativeMinor}: ${key.minor}`
-                : `${copy.relativeMajor}: ${key.major}`,
-        };
+        return { fullName: `${type === 'major' ? key.major : key.minor} ${type === 'major' ? copy.major : copy.minor}` };
     }
     deriveSections(numerals, lookup) {
         const type = this.selectedType();
@@ -495,26 +655,37 @@ class CircleOfFifthsComponent {
         const table = this.chordTable;
         if (!table.length)
             return [];
-        const lookup = new Map(table.map((r) => [r.numeral, r.chord]));
+        const selIdx = this.selectedIndex();
+        const transposeMap = this.transposeMap();
+        const spiceMap = this.spiceMap();
         const language = this.language();
         const type = this.selectedType() === 'major' ? 'major' : 'minor';
         const defs = this.activeProgressionDefs() ?? PROGRESSIONS[type].slice(0, 4);
-        return defs.map((definition) => ({
-            name: definition.name[language],
-            mood: definition.mood[language],
-            genre: definition.genre[language],
-            numerals: definition.numerals,
-            chords: definition.numerals.map((numeral) => lookup.get(numeral) ?? numeral),
-            sections: this.deriveSections(definition.numerals, lookup),
-        }));
+        return defs.map((definition) => {
+            const targetIdx = transposeMap.get(definition.name.en) ?? selIdx;
+            const spiceLevel = spiceMap.get(definition.name.en) ?? 0;
+            const baseRows = buildChordRows(targetIdx, type, this.text());
+            const lookup = new Map(baseRows.map((r) => [r.numeral, spiceChord(r.chord, r.numeral, spiceLevel)]));
+            return {
+                nameEn: definition.name.en,
+                name: definition.name[language],
+                mood: definition.mood[language],
+                genre: definition.genre[language],
+                numerals: definition.numerals,
+                chords: definition.numerals.map((n) => lookup.get(n) ?? n),
+                sections: this.deriveSections(definition.numerals, lookup),
+                transposeIdx: targetIdx,
+                spiceLevel,
+            };
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CircleOfFifthsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CircleOfFifthsComponent, isStandalone: true, selector: "the-chords-circle-of-fifths", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.lang": "language()" } }, ngImport: i0, template: "<div class=\"page\">\n  <header class=\"page-header\">\n    <h1>{{ text().title }}</h1>\n    <p>{{ text().subtitle }}</p>\n  </header>\n\n  <div class=\"circle-wrapper\">\n    <svg\n      viewBox=\"0 0 600 600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [attr.aria-label]=\"text().ariaLabel\"\n    >\n      <!-- \u2500\u2500 Key Signature Ring \u2500\u2500 -->\n      @for (key of keys; track key.index) {\n        <path [attr.d]=\"arcPath(KEY_SIG.inner, KEY_SIG.outer, key.index)\" class=\"keysig-segment\" />\n        <text\n          [attr.x]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).x\"\n          [attr.y]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).y\"\n          class=\"keysig-label\"\n        >\n          {{ getAccidentalText(key) }}\n        </text>\n      }\n\n      <!-- \u2500\u2500 Major Keys Ring \u2500\u2500 -->\n      @for (key of keys; track key.index) {\n        <g\n          [ngClass]=\"['major-group', getMajorState(key.index)]\"\n          (click)=\"selectKey(key.index, 'major')\"\n        >\n          <path [attr.d]=\"arcPath(MAJOR.inner, MAJOR.outer, key.index)\" />\n\n          <text\n            [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n            [attr.y]=\"\n              textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y +\n              (getMajorRole(key.index) ? -9 : 0)\n            \"\n            class=\"major-label\"\n          >\n            {{ key.major }}\n          </text>\n\n          @if (getMajorRole(key.index)) {\n            <text\n              [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n              [attr.y]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y + 11\"\n              class=\"role-label\"\n            >\n              {{ getMajorRole(key.index) }}\n            </text>\n          }\n        </g>\n      }\n\n      <!-- \u2500\u2500 Minor Keys Ring \u2500\u2500 -->\n      @for (key of keys; track key.index) {\n        <g\n          [ngClass]=\"['minor-group', getMinorState(key.index)]\"\n          (click)=\"selectKey(key.index, 'minor')\"\n        >\n          <path [attr.d]=\"arcPath(MINOR.inner, MINOR.outer, key.index)\" />\n\n          <text\n            [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n            [attr.y]=\"\n              textPos((MINOR.inner + MINOR.outer) / 2, key.index).y +\n              (getMinorRole(key.index) ? -8 : 0)\n            \"\n            class=\"minor-label\"\n          >\n            {{ key.minor }}\n          </text>\n\n          @if (getMinorRole(key.index)) {\n            <text\n              [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n              [attr.y]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).y + 9\"\n              class=\"role-label\"\n            >\n              {{ getMinorRole(key.index) }}\n            </text>\n          }\n        </g>\n      }\n\n      <!-- \u2500\u2500 Outer border \u2500\u2500 -->\n      <circle cx=\"300\" cy=\"300\" r=\"289\" class=\"outer-border\" />\n\n      <!-- \u2500\u2500 Center Circle \u2500\u2500 -->\n      <circle cx=\"300\" cy=\"300\" r=\"99\" class=\"center-circle\" />\n\n      @if (selectedInfo) {\n        <text x=\"300\" y=\"283\" class=\"center-name\">{{ selectedInfo.name }}</text>\n        <text x=\"300\" y=\"304\" class=\"center-scale\">{{ selectedInfo.scale }}</text>\n        <text x=\"300\" y=\"322\" class=\"center-relative\">{{ selectedInfo.relativeKey }}</text>\n        <text x=\"300\" y=\"338\" class=\"center-deselect\">{{ text().deselect }}</text>\n      } @else {\n        <text x=\"300\" y=\"293\" class=\"center-hint\">{{ text().clickKey }}</text>\n        <text x=\"300\" y=\"312\" class=\"center-hint-sm\">{{ text().seeChords }}</text>\n      }\n    </svg>\n  </div>\n\n  <!-- \u2500\u2500 Legend \u2500\u2500 -->\n  <div class=\"legend\">\n    <span class=\"legend-item tonic\">{{ text().tonicLegend }}</span>\n    <span class=\"legend-item scale-major\">{{ text().majorLegend }}</span>\n    <span class=\"legend-item scale-minor\">{{ text().minorLegend }}</span>\n    <span class=\"legend-item scale-diminished\">{{ text().diminishedLegend }}</span>\n  </div>\n\n  <chord-section [chords]=\"chordNames\" [language]=\"language()\"></chord-section>\n\n  <!-- \u2500\u2500 Chord Progressions \u2500\u2500 -->\n  @if (progressions.length) {\n    <section class=\"progressions-section\">\n      <div class=\"progressions-header\">\n        <h2>{{ text().commonProgressions }} {{ selectedInfo?.fullName }}</h2>\n        <button class=\"btn-randomize\" (click)=\"randomizeProgressions()\">{{ text().generateProgressions }}</button>\n      </div>\n      <div class=\"progression-list\">\n        @for (prog of progressions; track prog.name) {\n          <div class=\"progression-card\">\n            <div class=\"prog-header\">\n              <span class=\"prog-mood\">{{ prog.mood }}</span>\n              <span class=\"prog-name\">{{ prog.name }}</span>\n              <span class=\"prog-genre\">{{ prog.genre }}</span>\n            </div>\n            <div class=\"prog-chords\">\n              @for (chord of prog.chords; track $index; let last = $last) {\n                <span class=\"prog-chord\">{{ chord }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-numerals\">\n              @for (num of prog.numerals; track $index; let last = $last) {\n                <span>{{ num }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-expand-row\">\n              <button class=\"btn-expand\" (click)=\"toggleCard(prog.name)\">\n                {{ expandedCards().has(prog.name) ? text().collapse : text().expand }}\n              </button>\n              <button class=\"btn-expand\" (click)=\"copyChords(prog)\">\n                {{ text().copy }}\n              </button>\n            </div>\n            @if (expandedCards().has(prog.name)) {\n              <div class=\"prog-sections\">\n                @for (section of prog.sections; track section.label) {\n                  <div class=\"prog-section\">\n                    <div class=\"prog-section-label\">{{ section.label }}</div>\n                    <div class=\"prog-chords\">\n                      @for (chord of section.chords; track $index; let last = $last) {\n                        <span class=\"prog-chord\">{{ chord }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                    <div class=\"prog-numerals\">\n                      @for (num of section.numerals; track $index; let last = $last) {\n                        <span>{{ num }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-background-alt: var(--chords-background-alt, #f8fafc);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);box-sizing:border-box;display:block;min-height:100%;background:var(--_chords-background);color:var(--_chords-text)}:host *,:host *:before,:host *:after{box-sizing:inherit}.page{max-width:720px;margin:0 auto;padding:24px 16px 48px;font-family:Segoe UI,system-ui,sans-serif}.page-header{text-align:center;margin-bottom:28px}.page-header h1{margin:0 0 6px;font-size:2rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.page-header p{margin:0;color:var(--_chords-muted);font-size:.95rem}.circle-wrapper{max-width:580px;margin:0 auto}.circle-wrapper svg{display:block;width:100%;height:auto;overflow:visible}.keysig-segment{fill:var(--_chords-text)}.keysig-label{fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-size:12px;font-weight:500;text-anchor:middle;dominant-baseline:central;pointer-events:none}.major-group{cursor:pointer}.major-group path{fill:color-mix(in srgb,var(--_chords-primary) 14%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.major-group:hover path{fill:color-mix(in srgb,var(--_chords-primary) 24%,var(--_chords-surface))}.major-group .major-label{fill:var(--_chords-text);font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.major-group.tonic path{fill:var(--_chords-highlight)}.major-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.major-group.tonic .major-label{fill:var(--_chords-on-primary)}.major-group.scale-major path{fill:var(--_chords-primary)}.major-group.scale-major:hover path{fill:color-mix(in srgb,var(--_chords-primary) 82%,var(--_chords-text))}.major-group.scale-major .major-label{fill:var(--_chords-on-primary)}.minor-group{cursor:pointer}.minor-group path{fill:color-mix(in srgb,var(--_chords-secondary) 10%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.minor-group:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 20%,var(--_chords-surface))}.minor-group .minor-label{fill:color-mix(in srgb,var(--_chords-text) 78%,var(--_chords-muted));font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.minor-group.tonic path{fill:var(--_chords-highlight)}.minor-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.minor-group.tonic .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-minor path{fill:var(--_chords-secondary)}.minor-group.scale-minor:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 82%,var(--_chords-text))}.minor-group.scale-minor .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-diminished path{fill:var(--_chords-danger)}.minor-group.scale-diminished:hover path{fill:color-mix(in srgb,var(--_chords-danger) 82%,var(--_chords-text))}.minor-group.scale-diminished .minor-label{fill:var(--_chords-on-primary)}.role-label{font-size:10px;font-style:italic;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:color-mix(in srgb,var(--_chords-on-primary) 85%,transparent)}.outer-border{fill:none;stroke:var(--_chords-text);stroke-width:2.5}.center-circle{fill:var(--_chords-surface);stroke:var(--_chords-border);stroke-width:2;filter:drop-shadow(0 2px 10px color-mix(in srgb,var(--_chords-text) 8%,transparent))}.center-name{font-size:30px;font-weight:800;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-text);letter-spacing:-.02em}.center-scale{font-size:13px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-muted);text-transform:uppercase;letter-spacing:.08em}.center-relative{font-size:9.5px;font-weight:500;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-deselect{font-size:8px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.center-hint{font-size:16px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-hint-sm{font-size:11px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:16px 0 0}.legend .legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--_chords-muted)}.legend .legend-item:before{content:\"\";display:inline-block;width:14px;height:14px;border-radius:3px}.legend .legend-item.tonic:before{background:var(--_chords-highlight)}.legend .legend-item.scale-major:before{background:var(--_chords-primary)}.legend .legend-item.scale-minor:before{background:var(--_chords-secondary)}.legend .legend-item.scale-diminished:before{background:var(--_chords-danger)}.progressions-section{margin-top:36px;text-align:center}.progressions-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.progressions-header h2{margin:0;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.btn-randomize{padding:6px 14px;font-size:.8rem;font-weight:600;border:1.5px solid var(--_chords-primary);border-radius:20px;background:transparent;color:var(--_chords-primary);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.btn-randomize:hover{background:var(--_chords-primary);color:var(--_chords-on-primary)}.progression-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(max-width:480px){.progression-list{grid-template-columns:1fr}}.progression-card{background:var(--_chords-surface);border:1.5px solid var(--_chords-border);border-radius:14px;padding:16px 18px;text-align:left;transition:box-shadow .15s ease,transform .15s ease}.progression-card:hover{box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 8%,transparent);transform:translateY(-2px)}.prog-header{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}.prog-mood{font-size:.95rem;font-weight:700;color:var(--_chords-text)}.prog-name{font-size:.75rem;font-weight:600;color:var(--_chords-muted);text-transform:uppercase;letter-spacing:.06em}.prog-genre{margin-left:auto;font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-style:italic}.prog-chords{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}.prog-chord{font-size:1.15rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.prog-numerals{display:flex;align-items:center;gap:6px;font-size:.75rem;font-style:italic;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.prog-expand-row{display:flex;justify-content:flex-end;margin-top:10px}.btn-expand{padding:3px 10px;font-size:.72rem;font-weight:600;border:1px solid var(--_chords-border);border-radius:12px;background:transparent;color:var(--_chords-muted);cursor:pointer;transition:border-color .15s,color .15s}.btn-expand:hover{border-color:var(--_chords-primary);color:var(--_chords-primary)}.prog-sections{margin-top:12px;border-top:1px solid var(--_chords-border);padding-top:10px;display:flex;flex-direction:column;gap:10px}.prog-section{padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--_chords-text) 4%,var(--_chords-surface))}.prog-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--_chords-muted);margin-bottom:5px}.prog-arrow{color:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background));font-size:.8rem}@media(max-width:480px){.page-header h1{font-size:1.5rem}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChordSectionComponent, selector: "chord-section", inputs: ["chords", "language"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CircleOfFifthsComponent, isStandalone: true, selector: "the-chords-circle-of-fifths", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.lang": "language()" } }, ngImport: i0, template: "<div class=\"page\">\n  <header class=\"page-header\">\n    <h1>{{ text().title }}</h1>\n    <p>{{ text().subtitle }}</p>\n  </header>\n\n  <div class=\"circle-and-chords\">\n    <circle-of-fifths-wheel\n      class=\"circle-and-chords-wheel\"\n      [language]=\"language()\"\n      [selectedIndex]=\"selectedIndex()\"\n      [selectedType]=\"selectedType()\"\n      (keySelected)=\"selectKey($event.index, $event.type)\"\n    />\n\n    <chord-section\n      class=\"circle-and-chords-section\"\n      [selectedIndex]=\"selectedIndex()\"\n      [selectedType]=\"selectedType()\"\n      [language]=\"language()\"\n    ></chord-section>\n  </div>\n\n  <!-- \u2500\u2500 Chord Progressions \u2500\u2500 -->\n  @if (progressions.length) {\n    <section class=\"progressions-section\">\n      <div class=\"progressions-header\">\n        <h2>{{ text().commonProgressions }} {{ selectedInfo?.fullName }}</h2>\n        <button class=\"btn-randomize\" (click)=\"randomizeProgressions()\">{{ text().generateProgressions }}</button>\n      </div>\n      <div class=\"progression-list\">\n        @for (prog of progressions; track prog.name) {\n          <div class=\"progression-card\">\n            <div class=\"prog-header\">\n              <span class=\"prog-mood\">{{ prog.mood }}</span>\n              <span class=\"prog-name\">{{ prog.name }}</span>\n              <span class=\"prog-genre\">{{ prog.genre }}</span>\n            </div>\n            <div class=\"prog-chords\">\n              @for (chord of prog.chords; track $index; let last = $last) {\n                <span class=\"prog-chord\">{{ chord }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-numerals\">\n              @for (num of prog.numerals; track $index; let last = $last) {\n                <span>{{ num }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-transpose-row\">\n              <label class=\"prog-transpose-label\">{{ text().transposeLabel }}</label>\n              <select class=\"prog-transpose-select\" (change)=\"setTranspose(prog.nameEn, +$any($event.target).value)\">\n                @for (key of transposeKeys; track key.idx) {\n                  <option [value]=\"key.idx\" [selected]=\"key.idx === prog.transposeIdx\">{{ key.name }}</option>\n                }\n              </select>\n            </div>\n            <div class=\"prog-expand-row\">\n              <button class=\"btn-expand\" (click)=\"toggleCard(prog.name)\">\n                {{ expandedCards().has(prog.name) ? text().collapse : text().expand }}\n              </button>\n              <button class=\"btn-expand\" (click)=\"copyChords(prog)\">\n                {{ text().copy }}\n              </button>\n              <button class=\"btn-spice\" [class.btn-spice--active]=\"prog.spiceLevel > 0\" (click)=\"cycleSpice(prog.nameEn)\">\n                {{ text().spiceLabels[prog.spiceLevel] }}\n              </button>\n            </div>\n            @if (expandedCards().has(prog.name)) {\n              <div class=\"prog-sections\">\n                @for (section of prog.sections; track section.label) {\n                  <div class=\"prog-section\">\n                    <div class=\"prog-section-label\">{{ section.label }}</div>\n                    <div class=\"prog-chords\">\n                      @for (chord of section.chords; track $index; let last = $last) {\n                        <span class=\"prog-chord\">{{ chord }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                    <div class=\"prog-numerals\">\n                      @for (num of section.numerals; track $index; let last = $last) {\n                        <span>{{ num }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-background-alt: var(--chords-background-alt, #f8fafc);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);box-sizing:border-box;display:block;min-height:100%;background:var(--_chords-background);color:var(--_chords-text)}:host *,:host *:before,:host *:after{box-sizing:inherit}.page{max-width:720px;margin:0 auto;padding:24px 16px 48px;font-family:Segoe UI,system-ui,sans-serif}@media(min-width:900px){.page{max-width:1320px}}.circle-and-chords{display:flex;flex-direction:column;gap:24px}@media(min-width:900px){.circle-and-chords{flex-direction:row;align-items:flex-start}}@media(min-width:900px){.circle-and-chords-wheel{flex:0 1 460px}}.circle-and-chords-section{min-width:0}@media(min-width:900px){.circle-and-chords-section{flex:1 1 auto}}.page-header{text-align:center;margin-bottom:28px}.page-header h1{margin:0 0 6px;font-size:2rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.page-header p{margin:0;color:var(--_chords-muted);font-size:.95rem}.progressions-section{margin-top:36px;text-align:center}.progressions-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.progressions-header h2{margin:0;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.btn-randomize{padding:6px 14px;font-size:.8rem;font-weight:600;border:1.5px solid var(--_chords-primary);border-radius:20px;background:transparent;color:var(--_chords-primary);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.btn-randomize:hover{background:var(--_chords-primary);color:var(--_chords-on-primary)}.progression-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(max-width:480px){.progression-list{grid-template-columns:1fr}}.progression-card{background:var(--_chords-surface);border:1.5px solid var(--_chords-border);border-radius:14px;padding:16px 18px;text-align:left;transition:box-shadow .15s ease,transform .15s ease}.progression-card:hover{box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 8%,transparent);transform:translateY(-2px)}.prog-header{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}.prog-mood{font-size:.95rem;font-weight:700;color:var(--_chords-text)}.prog-name{font-size:.75rem;font-weight:600;color:var(--_chords-muted);text-transform:uppercase;letter-spacing:.06em}.prog-genre{margin-left:auto;font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-style:italic}.prog-chords{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}.prog-chord{font-size:1.15rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.prog-numerals{display:flex;align-items:center;gap:6px;font-size:.75rem;font-style:italic;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.prog-transpose-row{display:flex;align-items:center;gap:6px;margin-top:8px}.prog-transpose-label{font-size:.68rem;font-weight:600;color:var(--_chords-muted);white-space:nowrap}.prog-transpose-select{font-size:.72rem;font-weight:600;color:var(--_chords-muted);background:transparent;border:1px solid var(--_chords-border);border-radius:8px;padding:2px 6px;cursor:pointer;transition:border-color .15s,color .15s;appearance:auto}.prog-transpose-select:hover,.prog-transpose-select:focus{border-color:var(--_chords-primary);color:var(--_chords-primary);outline:none}.prog-expand-row{display:flex;justify-content:flex-end;margin-top:10px}.btn-spice{background:transparent;border:1px solid var(--cof-accent, #e09030);border-radius:6px;color:var(--cof-accent, #e09030);cursor:pointer;font-size:.75rem;padding:4px 10px;transition:background .2s,color .2s}.btn-spice:hover{background:var(--cof-accent, #e09030);color:#fff}.btn-spice.btn-spice--active{background:var(--cof-accent, #e09030);color:#fff;font-weight:600}.btn-expand{padding:3px 10px;font-size:.72rem;font-weight:600;border:1px solid var(--_chords-border);border-radius:12px;background:transparent;color:var(--_chords-muted);cursor:pointer;transition:border-color .15s,color .15s}.btn-expand:hover{border-color:var(--_chords-primary);color:var(--_chords-primary)}.prog-sections{margin-top:12px;border-top:1px solid var(--_chords-border);padding-top:10px;display:flex;flex-direction:column;gap:10px}.prog-section{padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--_chords-text) 4%,var(--_chords-surface))}.prog-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--_chords-muted);margin-bottom:5px}.prog-arrow{color:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background));font-size:.8rem}@media(max-width:480px){.page-header h1{font-size:1.5rem}}\n"], dependencies: [{ kind: "component", type: ChordSectionComponent, selector: "chord-section", inputs: ["selectedIndex", "selectedType", "language"] }, { kind: "component", type: CircleOfFifthsWheel, selector: "circle-of-fifths-wheel", inputs: ["language", "selectedIndex", "selectedType", "interactive"], outputs: ["keySelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CircleOfFifthsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-chords-circle-of-fifths', standalone: true, imports: [NgClass, ChordSectionComponent], host: { '[attr.lang]': 'language()' }, template: "<div class=\"page\">\n  <header class=\"page-header\">\n    <h1>{{ text().title }}</h1>\n    <p>{{ text().subtitle }}</p>\n  </header>\n\n  <div class=\"circle-wrapper\">\n    <svg\n      viewBox=\"0 0 600 600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [attr.aria-label]=\"text().ariaLabel\"\n    >\n      <!-- \u2500\u2500 Key Signature Ring \u2500\u2500 -->\n      @for (key of keys; track key.index) {\n        <path [attr.d]=\"arcPath(KEY_SIG.inner, KEY_SIG.outer, key.index)\" class=\"keysig-segment\" />\n        <text\n          [attr.x]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).x\"\n          [attr.y]=\"textPos((KEY_SIG.inner + KEY_SIG.outer) / 2, key.index).y\"\n          class=\"keysig-label\"\n        >\n          {{ getAccidentalText(key) }}\n        </text>\n      }\n\n      <!-- \u2500\u2500 Major Keys Ring \u2500\u2500 -->\n      @for (key of keys; track key.index) {\n        <g\n          [ngClass]=\"['major-group', getMajorState(key.index)]\"\n          (click)=\"selectKey(key.index, 'major')\"\n        >\n          <path [attr.d]=\"arcPath(MAJOR.inner, MAJOR.outer, key.index)\" />\n\n          <text\n            [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n            [attr.y]=\"\n              textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y +\n              (getMajorRole(key.index) ? -9 : 0)\n            \"\n            class=\"major-label\"\n          >\n            {{ key.major }}\n          </text>\n\n          @if (getMajorRole(key.index)) {\n            <text\n              [attr.x]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).x\"\n              [attr.y]=\"textPos((MAJOR.inner + MAJOR.outer) / 2, key.index).y + 11\"\n              class=\"role-label\"\n            >\n              {{ getMajorRole(key.index) }}\n            </text>\n          }\n        </g>\n      }\n\n      <!-- \u2500\u2500 Minor Keys Ring \u2500\u2500 -->\n      @for (key of keys; track key.index) {\n        <g\n          [ngClass]=\"['minor-group', getMinorState(key.index)]\"\n          (click)=\"selectKey(key.index, 'minor')\"\n        >\n          <path [attr.d]=\"arcPath(MINOR.inner, MINOR.outer, key.index)\" />\n\n          <text\n            [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n            [attr.y]=\"\n              textPos((MINOR.inner + MINOR.outer) / 2, key.index).y +\n              (getMinorRole(key.index) ? -8 : 0)\n            \"\n            class=\"minor-label\"\n          >\n            {{ key.minor }}\n          </text>\n\n          @if (getMinorRole(key.index)) {\n            <text\n              [attr.x]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).x\"\n              [attr.y]=\"textPos((MINOR.inner + MINOR.outer) / 2, key.index).y + 9\"\n              class=\"role-label\"\n            >\n              {{ getMinorRole(key.index) }}\n            </text>\n          }\n        </g>\n      }\n\n      <!-- \u2500\u2500 Outer border \u2500\u2500 -->\n      <circle cx=\"300\" cy=\"300\" r=\"289\" class=\"outer-border\" />\n\n      <!-- \u2500\u2500 Center Circle \u2500\u2500 -->\n      <circle cx=\"300\" cy=\"300\" r=\"99\" class=\"center-circle\" />\n\n      @if (selectedInfo) {\n        <text x=\"300\" y=\"283\" class=\"center-name\">{{ selectedInfo.name }}</text>\n        <text x=\"300\" y=\"304\" class=\"center-scale\">{{ selectedInfo.scale }}</text>\n        <text x=\"300\" y=\"322\" class=\"center-relative\">{{ selectedInfo.relativeKey }}</text>\n        <text x=\"300\" y=\"338\" class=\"center-deselect\">{{ text().deselect }}</text>\n      } @else {\n        <text x=\"300\" y=\"293\" class=\"center-hint\">{{ text().clickKey }}</text>\n        <text x=\"300\" y=\"312\" class=\"center-hint-sm\">{{ text().seeChords }}</text>\n      }\n    </svg>\n  </div>\n\n  <!-- \u2500\u2500 Legend \u2500\u2500 -->\n  <div class=\"legend\">\n    <span class=\"legend-item tonic\">{{ text().tonicLegend }}</span>\n    <span class=\"legend-item scale-major\">{{ text().majorLegend }}</span>\n    <span class=\"legend-item scale-minor\">{{ text().minorLegend }}</span>\n    <span class=\"legend-item scale-diminished\">{{ text().diminishedLegend }}</span>\n  </div>\n\n  <chord-section [chords]=\"chordNames\" [language]=\"language()\"></chord-section>\n\n  <!-- \u2500\u2500 Chord Progressions \u2500\u2500 -->\n  @if (progressions.length) {\n    <section class=\"progressions-section\">\n      <div class=\"progressions-header\">\n        <h2>{{ text().commonProgressions }} {{ selectedInfo?.fullName }}</h2>\n        <button class=\"btn-randomize\" (click)=\"randomizeProgressions()\">{{ text().generateProgressions }}</button>\n      </div>\n      <div class=\"progression-list\">\n        @for (prog of progressions; track prog.name) {\n          <div class=\"progression-card\">\n            <div class=\"prog-header\">\n              <span class=\"prog-mood\">{{ prog.mood }}</span>\n              <span class=\"prog-name\">{{ prog.name }}</span>\n              <span class=\"prog-genre\">{{ prog.genre }}</span>\n            </div>\n            <div class=\"prog-chords\">\n              @for (chord of prog.chords; track $index; let last = $last) {\n                <span class=\"prog-chord\">{{ chord }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-numerals\">\n              @for (num of prog.numerals; track $index; let last = $last) {\n                <span>{{ num }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-expand-row\">\n              <button class=\"btn-expand\" (click)=\"toggleCard(prog.name)\">\n                {{ expandedCards().has(prog.name) ? text().collapse : text().expand }}\n              </button>\n              <button class=\"btn-expand\" (click)=\"copyChords(prog)\">\n                {{ text().copy }}\n              </button>\n            </div>\n            @if (expandedCards().has(prog.name)) {\n              <div class=\"prog-sections\">\n                @for (section of prog.sections; track section.label) {\n                  <div class=\"prog-section\">\n                    <div class=\"prog-section-label\">{{ section.label }}</div>\n                    <div class=\"prog-chords\">\n                      @for (chord of section.chords; track $index; let last = $last) {\n                        <span class=\"prog-chord\">{{ chord }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                    <div class=\"prog-numerals\">\n                      @for (num of section.numerals; track $index; let last = $last) {\n                        <span>{{ num }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-background-alt: var(--chords-background-alt, #f8fafc);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);box-sizing:border-box;display:block;min-height:100%;background:var(--_chords-background);color:var(--_chords-text)}:host *,:host *:before,:host *:after{box-sizing:inherit}.page{max-width:720px;margin:0 auto;padding:24px 16px 48px;font-family:Segoe UI,system-ui,sans-serif}.page-header{text-align:center;margin-bottom:28px}.page-header h1{margin:0 0 6px;font-size:2rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.page-header p{margin:0;color:var(--_chords-muted);font-size:.95rem}.circle-wrapper{max-width:580px;margin:0 auto}.circle-wrapper svg{display:block;width:100%;height:auto;overflow:visible}.keysig-segment{fill:var(--_chords-text)}.keysig-label{fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-size:12px;font-weight:500;text-anchor:middle;dominant-baseline:central;pointer-events:none}.major-group{cursor:pointer}.major-group path{fill:color-mix(in srgb,var(--_chords-primary) 14%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.major-group:hover path{fill:color-mix(in srgb,var(--_chords-primary) 24%,var(--_chords-surface))}.major-group .major-label{fill:var(--_chords-text);font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.major-group.tonic path{fill:var(--_chords-highlight)}.major-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.major-group.tonic .major-label{fill:var(--_chords-on-primary)}.major-group.scale-major path{fill:var(--_chords-primary)}.major-group.scale-major:hover path{fill:color-mix(in srgb,var(--_chords-primary) 82%,var(--_chords-text))}.major-group.scale-major .major-label{fill:var(--_chords-on-primary)}.minor-group{cursor:pointer}.minor-group path{fill:color-mix(in srgb,var(--_chords-secondary) 10%,var(--_chords-surface));stroke:var(--_chords-surface);stroke-width:2;transition:fill .18s ease}.minor-group:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 20%,var(--_chords-surface))}.minor-group .minor-label{fill:color-mix(in srgb,var(--_chords-text) 78%,var(--_chords-muted));font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s ease}.minor-group.tonic path{fill:var(--_chords-highlight)}.minor-group.tonic:hover path{fill:color-mix(in srgb,var(--_chords-highlight) 84%,var(--_chords-text))}.minor-group.tonic .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-minor path{fill:var(--_chords-secondary)}.minor-group.scale-minor:hover path{fill:color-mix(in srgb,var(--_chords-secondary) 82%,var(--_chords-text))}.minor-group.scale-minor .minor-label{fill:var(--_chords-on-primary)}.minor-group.scale-diminished path{fill:var(--_chords-danger)}.minor-group.scale-diminished:hover path{fill:color-mix(in srgb,var(--_chords-danger) 82%,var(--_chords-text))}.minor-group.scale-diminished .minor-label{fill:var(--_chords-on-primary)}.role-label{font-size:10px;font-style:italic;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:color-mix(in srgb,var(--_chords-on-primary) 85%,transparent)}.outer-border{fill:none;stroke:var(--_chords-text);stroke-width:2.5}.center-circle{fill:var(--_chords-surface);stroke:var(--_chords-border);stroke-width:2;filter:drop-shadow(0 2px 10px color-mix(in srgb,var(--_chords-text) 8%,transparent))}.center-name{font-size:30px;font-weight:800;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-text);letter-spacing:-.02em}.center-scale{font-size:13px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:var(--_chords-muted);text-transform:uppercase;letter-spacing:.08em}.center-relative{font-size:9.5px;font-weight:500;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-deselect{font-size:8px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.center-hint{font-size:16px;font-weight:600;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.center-hint-sm{font-size:11px;text-anchor:middle;dominant-baseline:auto;fill:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background))}.legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:16px 0 0}.legend .legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--_chords-muted)}.legend .legend-item:before{content:\"\";display:inline-block;width:14px;height:14px;border-radius:3px}.legend .legend-item.tonic:before{background:var(--_chords-highlight)}.legend .legend-item.scale-major:before{background:var(--_chords-primary)}.legend .legend-item.scale-minor:before{background:var(--_chords-secondary)}.legend .legend-item.scale-diminished:before{background:var(--_chords-danger)}.progressions-section{margin-top:36px;text-align:center}.progressions-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.progressions-header h2{margin:0;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.btn-randomize{padding:6px 14px;font-size:.8rem;font-weight:600;border:1.5px solid var(--_chords-primary);border-radius:20px;background:transparent;color:var(--_chords-primary);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.btn-randomize:hover{background:var(--_chords-primary);color:var(--_chords-on-primary)}.progression-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(max-width:480px){.progression-list{grid-template-columns:1fr}}.progression-card{background:var(--_chords-surface);border:1.5px solid var(--_chords-border);border-radius:14px;padding:16px 18px;text-align:left;transition:box-shadow .15s ease,transform .15s ease}.progression-card:hover{box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 8%,transparent);transform:translateY(-2px)}.prog-header{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}.prog-mood{font-size:.95rem;font-weight:700;color:var(--_chords-text)}.prog-name{font-size:.75rem;font-weight:600;color:var(--_chords-muted);text-transform:uppercase;letter-spacing:.06em}.prog-genre{margin-left:auto;font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-style:italic}.prog-chords{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}.prog-chord{font-size:1.15rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.prog-numerals{display:flex;align-items:center;gap:6px;font-size:.75rem;font-style:italic;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.prog-expand-row{display:flex;justify-content:flex-end;margin-top:10px}.btn-expand{padding:3px 10px;font-size:.72rem;font-weight:600;border:1px solid var(--_chords-border);border-radius:12px;background:transparent;color:var(--_chords-muted);cursor:pointer;transition:border-color .15s,color .15s}.btn-expand:hover{border-color:var(--_chords-primary);color:var(--_chords-primary)}.prog-sections{margin-top:12px;border-top:1px solid var(--_chords-border);padding-top:10px;display:flex;flex-direction:column;gap:10px}.prog-section{padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--_chords-text) 4%,var(--_chords-surface))}.prog-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--_chords-muted);margin-bottom:5px}.prog-arrow{color:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background));font-size:.8rem}@media(max-width:480px){.page-header h1{font-size:1.5rem}}\n"] }]
-        }], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }] } });
+            args: [{ selector: 'the-chords-circle-of-fifths', standalone: true, imports: [ChordSectionComponent, CircleOfFifthsWheel], host: { '[attr.lang]': 'language()' }, template: "<div class=\"page\">\n  <header class=\"page-header\">\n    <h1>{{ text().title }}</h1>\n    <p>{{ text().subtitle }}</p>\n  </header>\n\n  <div class=\"circle-and-chords\">\n    <circle-of-fifths-wheel\n      class=\"circle-and-chords-wheel\"\n      [language]=\"language()\"\n      [selectedIndex]=\"selectedIndex()\"\n      [selectedType]=\"selectedType()\"\n      (keySelected)=\"selectKey($event.index, $event.type)\"\n    />\n\n    <chord-section\n      class=\"circle-and-chords-section\"\n      [selectedIndex]=\"selectedIndex()\"\n      [selectedType]=\"selectedType()\"\n      [language]=\"language()\"\n    ></chord-section>\n  </div>\n\n  <!-- \u2500\u2500 Chord Progressions \u2500\u2500 -->\n  @if (progressions.length) {\n    <section class=\"progressions-section\">\n      <div class=\"progressions-header\">\n        <h2>{{ text().commonProgressions }} {{ selectedInfo?.fullName }}</h2>\n        <button class=\"btn-randomize\" (click)=\"randomizeProgressions()\">{{ text().generateProgressions }}</button>\n      </div>\n      <div class=\"progression-list\">\n        @for (prog of progressions; track prog.name) {\n          <div class=\"progression-card\">\n            <div class=\"prog-header\">\n              <span class=\"prog-mood\">{{ prog.mood }}</span>\n              <span class=\"prog-name\">{{ prog.name }}</span>\n              <span class=\"prog-genre\">{{ prog.genre }}</span>\n            </div>\n            <div class=\"prog-chords\">\n              @for (chord of prog.chords; track $index; let last = $last) {\n                <span class=\"prog-chord\">{{ chord }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-numerals\">\n              @for (num of prog.numerals; track $index; let last = $last) {\n                <span>{{ num }}</span>\n                @if (!last) {\n                  <span class=\"prog-arrow\">\u2192</span>\n                }\n              }\n            </div>\n            <div class=\"prog-transpose-row\">\n              <label class=\"prog-transpose-label\">{{ text().transposeLabel }}</label>\n              <select class=\"prog-transpose-select\" (change)=\"setTranspose(prog.nameEn, +$any($event.target).value)\">\n                @for (key of transposeKeys; track key.idx) {\n                  <option [value]=\"key.idx\" [selected]=\"key.idx === prog.transposeIdx\">{{ key.name }}</option>\n                }\n              </select>\n            </div>\n            <div class=\"prog-expand-row\">\n              <button class=\"btn-expand\" (click)=\"toggleCard(prog.name)\">\n                {{ expandedCards().has(prog.name) ? text().collapse : text().expand }}\n              </button>\n              <button class=\"btn-expand\" (click)=\"copyChords(prog)\">\n                {{ text().copy }}\n              </button>\n              <button class=\"btn-spice\" [class.btn-spice--active]=\"prog.spiceLevel > 0\" (click)=\"cycleSpice(prog.nameEn)\">\n                {{ text().spiceLabels[prog.spiceLevel] }}\n              </button>\n            </div>\n            @if (expandedCards().has(prog.name)) {\n              <div class=\"prog-sections\">\n                @for (section of prog.sections; track section.label) {\n                  <div class=\"prog-section\">\n                    <div class=\"prog-section-label\">{{ section.label }}</div>\n                    <div class=\"prog-chords\">\n                      @for (chord of section.chords; track $index; let last = $last) {\n                        <span class=\"prog-chord\">{{ chord }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                    <div class=\"prog-numerals\">\n                      @for (num of section.numerals; track $index; let last = $last) {\n                        <span>{{ num }}</span>\n                        @if (!last) { <span class=\"prog-arrow\">\u2192</span> }\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{--_chords-background: var(--chords-background, #f0f4f8);--_chords-background-alt: var(--chords-background-alt, #f8fafc);--_chords-surface: var(--chords-surface, #ffffff);--_chords-surface-elevated: var(--chords-surface-elevated, #f8fafc);--_chords-text: var(--chords-text, #1e293b);--_chords-muted: var(--chords-muted, #64748b);--_chords-primary: var(--chords-primary, #3b82f6);--_chords-secondary: var(--chords-secondary, #06b6d4);--_chords-highlight: var(--chords-highlight, #f59e0b);--_chords-danger: var(--chords-danger, #a855f7);--_chords-border: var(--chords-border, #e2e8f0);--_chords-on-primary: var(--chords-on-primary, #ffffff);box-sizing:border-box;display:block;min-height:100%;background:var(--_chords-background);color:var(--_chords-text)}:host *,:host *:before,:host *:after{box-sizing:inherit}.page{max-width:720px;margin:0 auto;padding:24px 16px 48px;font-family:Segoe UI,system-ui,sans-serif}@media(min-width:900px){.page{max-width:1320px}}.circle-and-chords{display:flex;flex-direction:column;gap:24px}@media(min-width:900px){.circle-and-chords{flex-direction:row;align-items:flex-start}}@media(min-width:900px){.circle-and-chords-wheel{flex:0 1 460px}}.circle-and-chords-section{min-width:0}@media(min-width:900px){.circle-and-chords-section{flex:1 1 auto}}.page-header{text-align:center;margin-bottom:28px}.page-header h1{margin:0 0 6px;font-size:2rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.page-header p{margin:0;color:var(--_chords-muted);font-size:.95rem}.progressions-section{margin-top:36px;text-align:center}.progressions-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.progressions-header h2{margin:0;font-size:1.25rem;font-weight:700;color:var(--_chords-text)}.btn-randomize{padding:6px 14px;font-size:.8rem;font-weight:600;border:1.5px solid var(--_chords-primary);border-radius:20px;background:transparent;color:var(--_chords-primary);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.btn-randomize:hover{background:var(--_chords-primary);color:var(--_chords-on-primary)}.progression-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(max-width:480px){.progression-list{grid-template-columns:1fr}}.progression-card{background:var(--_chords-surface);border:1.5px solid var(--_chords-border);border-radius:14px;padding:16px 18px;text-align:left;transition:box-shadow .15s ease,transform .15s ease}.progression-card:hover{box-shadow:0 4px 16px color-mix(in srgb,var(--_chords-text) 8%,transparent);transform:translateY(-2px)}.prog-header{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}.prog-mood{font-size:.95rem;font-weight:700;color:var(--_chords-text)}.prog-name{font-size:.75rem;font-weight:600;color:var(--_chords-muted);text-transform:uppercase;letter-spacing:.06em}.prog-genre{margin-left:auto;font-size:.7rem;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background));font-style:italic}.prog-chords{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}.prog-chord{font-size:1.15rem;font-weight:800;color:var(--_chords-text);letter-spacing:-.02em}.prog-numerals{display:flex;align-items:center;gap:6px;font-size:.75rem;font-style:italic;color:color-mix(in srgb,var(--_chords-muted) 72%,var(--_chords-background))}.prog-transpose-row{display:flex;align-items:center;gap:6px;margin-top:8px}.prog-transpose-label{font-size:.68rem;font-weight:600;color:var(--_chords-muted);white-space:nowrap}.prog-transpose-select{font-size:.72rem;font-weight:600;color:var(--_chords-muted);background:transparent;border:1px solid var(--_chords-border);border-radius:8px;padding:2px 6px;cursor:pointer;transition:border-color .15s,color .15s;appearance:auto}.prog-transpose-select:hover,.prog-transpose-select:focus{border-color:var(--_chords-primary);color:var(--_chords-primary);outline:none}.prog-expand-row{display:flex;justify-content:flex-end;margin-top:10px}.btn-spice{background:transparent;border:1px solid var(--cof-accent, #e09030);border-radius:6px;color:var(--cof-accent, #e09030);cursor:pointer;font-size:.75rem;padding:4px 10px;transition:background .2s,color .2s}.btn-spice:hover{background:var(--cof-accent, #e09030);color:#fff}.btn-spice.btn-spice--active{background:var(--cof-accent, #e09030);color:#fff;font-weight:600}.btn-expand{padding:3px 10px;font-size:.72rem;font-weight:600;border:1px solid var(--_chords-border);border-radius:12px;background:transparent;color:var(--_chords-muted);cursor:pointer;transition:border-color .15s,color .15s}.btn-expand:hover{border-color:var(--_chords-primary);color:var(--_chords-primary)}.prog-sections{margin-top:12px;border-top:1px solid var(--_chords-border);padding-top:10px;display:flex;flex-direction:column;gap:10px}.prog-section{padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--_chords-text) 4%,var(--_chords-surface))}.prog-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--_chords-muted);margin-bottom:5px}.prog-arrow{color:color-mix(in srgb,var(--_chords-muted) 42%,var(--_chords-background));font-size:.8rem}@media(max-width:480px){.page-header h1{font-size:1.5rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }] } });
 
 /*
  * Public API Surface of circle-of-fifths-lib
@@ -524,5 +695,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ChordSectionComponent, CircleOfFifthsComponent };
+export { ChordSectionComponent, CircleOfFifthsComponent, CircleOfFifthsWheel };
 //# sourceMappingURL=gblp-circle-of-fifths.mjs.map