Mobile clipping fix + 6/8 render crash fix (root cause) + more variants

- Clipping: min width per bar raised (16ths 420px, 8ths 330px, quarters
  240px) and format width reserves more room (clef/key 100px, barline
  margin 24px) — narrow screens now wrap into more rows with real margins
  instead of clipping the last bar.
- 6/8 crash ROOT CAUSE: Giuliani figures whose length didn't divide the
  bar into renderable note values produced 96-tick durations (32nd-ish)
  that durationCode can't spell -> renderer threw -> white screen.
  Giuliani generator now snaps figure subdivision to renderable durations
  (per 2/3/4 divisions, quarter-note walk as last resort); pimamim in
  6/8 renders as a walking quarter figure.
- 6/8 melody templates: fixed sums (were 2640/3120 in 4 templates — those
  filtered out, silently degrading to the fallback).
- More variants: arpeggio figures 1-3-5-3, 1-2-1-3-2-1, 1-5-4-5-3-5,
  1-3-2-5-3-2; Giuliani patterns p-i-a-i, p-m-a-m-i, p-i-m-a-m-i (waltz),
  p-i-m-a-i-a.
- Tests 179/179.

src/audio/AudioEngine.ts

@@ -140,8 +140,10 @@ class AudioEngine {
      * Short NON-TONAL metronome click (~10 ms noise burst). Not registered in
      * the pitched-audio gate; instead the mic is blanked for 30 ms so the
      * click itself can't be scored as a pitch (contract E2).
+     * Optional groupId: the click becomes cancellable via cancelGroup (used
+     * by preview clicks so stopping a preview also stops its clicks).
      */
-    playClickAt(time: number, volume = 0.5, accent = false): void {
+    playClickAt(time: number, volume = 0.5, accent = false, groupId?: string): void {
         const ctx = this.ensureContext();
         if (!this.noiseBuffer) {
             const len = Math.floor(ctx.sampleRate * 0.01);
@@ -160,6 +162,11 @@ class AudioEngine {
         src.start(time);
         src.stop(time + 0.02);
         this.clickBlankUntil = Math.max(this.clickBlankUntil, time + 0.03);
+        if (groupId) {
+            // Register as a cancellable node (cast: clicks are buffer sources,
+            // cancelGroup only calls stop() on them, which BufferSource has).
+            this.active.push({ osc: src as unknown as OscillatorNode, gain: gainNode, endsAt: time + 0.02, groupId });
+        }
     }
 
     /** True for ~30 ms after a scheduled click (mic frames should be skipped). */

src/components/MetronomeWidget.tsx

@@ -27,7 +27,10 @@ interface MetronomeWidgetProps {
     showAutoAdvance?: boolean;
     /** Compact layout (phrase transport row). */
     compact?: boolean;
-    /** 'option': show the sync/free toggle (Phrase Mode). null: plain on/off. */
+    /** 'option': show the sync checkbox (Phrase Mode) that replaces the pace
+     *  dropdown: checked = clicks/beats only with the exercise (preview &
+     *  run, count-in included); unchecked = free-running metronome.
+     *  null: plain on/off (single-note modes). */
     syncMode?: 'option' | null;
     /** External gate (sync mode): true while the exercise runs. */
     gate?: boolean | null;
@@ -85,18 +88,14 @@ export const MetronomeWidget: React.FC<MetronomeWidgetProps> = ({
                     <span>Metronome</span>
                 </label>
                 {syncMode === 'option' ? (
-                    <button
-                        className={`switch-button ${rhythm.syncToExercise ? 'active' : ''}`}
-                        onClick={() => onUpdate({
-                            syncToExercise: !rhythm.syncToExercise,
-                            active: true, // armed in either mode; the mode decides behavior
-                        })}
-                        title={rhythm.syncToExercise
-                            ? 'Sync: starts with the exercise (count-in). Click while idle: off.'
-                            : 'Free: runs independently — start/stop it yourself.'}
-                    >
-                        <div className="switch-thumb" />
-                    </button>
+                    <label style={{ fontSize: '10px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                        <input
+                            type="checkbox"
+                            checked={!!rhythm.syncToExercise}
+                            onChange={(e) => onUpdate({ syncToExercise: e.target.checked })}
+                        />
+                        Sync to exercise
+                    </label>
                 ) : (
                     <button
                         className={`switch-button ${rhythm.active ? 'active' : ''}`}

src/components/PhraseSheetMusic.tsx

@@ -105,7 +105,12 @@ export const PhraseSheetMusic: React.FC<PhraseSheetMusicProps> = ({
 
     const events = scoreEvents(score);
     const totalBars = score.measures.length;
-    const barsPerRow = Math.max(1, Math.min(4, Math.floor((width - 40) / 210)));
+    // Min width per bar grows with notation density (eighths/16ths need more
+    // horizontal room than quarters) so narrow screens wrap into more rows
+    // instead of clipping notes.
+    const densestTick = Math.min(...events.filter(e => e.pitch).map(e => e.durationTicks), 1920);
+    const minWidthPerBar = densestTick <= 120 ? 420 : densestTick <= 240 ? 330 : 240;
+    const barsPerRow = Math.max(1, Math.min(4, Math.floor((width - 40) / minWidthPerBar)));
     const rowCount = Math.max(1, Math.ceil(totalBars / barsPerRow));
     const isGrand = clef === 'grand';
     const rowHeight = isGrand ? 250 : 140;
@@ -319,14 +324,38 @@ export const PhraseSheetMusic: React.FC<PhraseSheetMusicProps> = ({
                     voices.push(buildVoice(treble, () => true));
                 }
 
-                const formatWidth = Math.max(60, barWidth - (isFirstOfRow ? 92 : 16));
+                const formatWidth = Math.max(60, barWidth - (isFirstOfRow ? 100 : 24));
                 const formatter = new Formatter();
                 formatter.joinVoices(voices.map(v => v.voice));
                 formatter.format(voices.map(v => v.voice), formatWidth);
 
+                // --- Beams: BEFORE drawing notes. setBeam must happen prior to
+                // voice.draw — VexFlow decides flag vs beam on this.beam at
+                // draw time; registering late leaves BOTH flag and beam.
+                const beamPairs: { a: Fragment; b2: Fragment }[] = [];
+                const beamed = frags.filter(f => (f.isEighth || f.isSixteenth) && f.note instanceof StaveNote);
+                for (let i = 0; i + 1 < beamed.length; i++) {
+                    const a = beamed[i], b2 = beamed[i + 1];
+                    if (a.staveKey !== b2.staveKey) continue;
+                    const step = a.isSixteenth ? 120 : 240;
+                    if (b2.start - a.start !== step) continue;
+                    if ((a.ticks !== step) || (b2.ticks !== step)) continue;
+                    const beatA = Math.floor((a.start - measureStart) / 480);
+                    const beatB = Math.floor((b2.start - measureStart) / 480);
+                    if (beatA === beatB) beamPairs.push({ a, b2 });
+                }
+                // Apply beams to notes FIRST (suppresses flags), then draw.
+                const beams = beamPairs.map(({ a, b2 }) => {
+                    const beam = new Beam([a.note, b2.note], false);
+                    a.note.setBeam(beam);
+                    b2.note.setBeam(beam);
+                    return beam;
+                });
+
                 treble.setContext(context).draw();
                 if (bass) bass.setContext(context).draw();
                 for (const { voice, stave } of voices) voice.draw(context, stave);
+                for (const beam of beams) beam.setContext(context).draw();
 
                 if (isGrand && isFirstOfRow) {
                     const brace = new StaveConnector(treble, bass!);
@@ -337,27 +366,6 @@ export const PhraseSheetMusic: React.FC<PhraseSheetMusicProps> = ({
                     line.setContext(context).draw();
                 }
 
-                // --- Beams: consecutive eighth/16th pairs within one beat ---
-                // Note: the Beam must be registered on each note via setBeam,
-                // otherwise VexFlow still draws flags (beam === undefined in
-                // shouldDrawFlag) and you get BOTH flag and beam.
-                const beamed = frags.filter(f => (f.isEighth || f.isSixteenth) && f.note instanceof StaveNote);
-                for (let i = 0; i + 1 < beamed.length; i++) {
-                    const a = beamed[i], b2 = beamed[i + 1];
-                    if (a.staveKey !== b2.staveKey) continue;
-                    // consecutive within the same beat, same subdivision size
-                    const step = a.isSixteenth ? 120 : 240;
-                    if (b2.start - a.start !== step) continue;
-                    if ((a.ticks !== step) || (b2.ticks !== step)) continue;
-                    const beatA = Math.floor((a.start - measureStart) / 480);
-                    const beatB = Math.floor((b2.start - measureStart) / 480);
-                    if (beatA === beatB) {
-                        const beam = new Beam([a.note, b2.note], false);
-                        a.note.setBeam(beam);
-                        b2.note.setBeam(beam);
-                        beam.setContext(context).draw();
-                    }
-                }
             }
 
             // --- Ties between consecutive fragments of one event (this row) ---

src/components/PhraseTrainer.tsx

@@ -20,6 +20,7 @@ import { computePlayableNotes, isFrettedInstrument, positionsWithinWindow } from
 import { generateMelody } from '../music/melodyGenerator';
 import { generateScaleDrill } from '../music/scaleDrills';
 import { generateArpeggio, type ArpeggioDegree } from '../music/arpeggioGenerator';
+import { generateGiulianiStudy, GIULIANI_PATTERN_LABELS, type GiulianiPattern } from '../music/giulianiGenerator';
 import { isMode, type ModeId } from '../music/scales';
 import { ARPEGGIO_DEGREE_LABELS } from '../music/arpeggioGenerator';
 import { scoreEvents, type Result, type Score, type ScoreEvent } from '../score/model';
@@ -82,16 +83,18 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
         // (single source of truth across modes; the phrase-local BPM control
         // was replaced by the common metronome widget in Controls).
         phrase.bpm = settings.rhythm.bpm;
+        // Pace is now DERIVED from the metronome widget's sync checkbox:
+        // checked = tempo (sync), unchecked = step (at your pace).
+        const pace: PhraseSettings['pace'] = settings.rhythm.syncToExercise ? 'tempo' : 'step';
+        phrase.pace = pace;
         // Click decision — ONE source: the metronome widget's sound checkbox.
-        // - Tempo + syncToExercise: the run clicks when armed && sound
-        //   (silent while idle; starts with the exercise incl. count-in).
-        // - Tempo + free metronome: the widget clicks freely; the run stays
-        //   silent (its beats are visual only) to avoid doubling.
-        // - Step: widget clicks freely; phrase clickSound follows the switch.
-        const sync = settings.rhythm.syncToExercise;
-        phrase.clickSound = phrase.pace === 'tempo'
-            ? (sync ? settings.rhythm.active && settings.rhythm.sound : false)
-            : settings.rhythm.active && settings.rhythm.sound;
+        // - Sync (tempo): run clicks when armed && sound (count-in incl.);
+        //   widget silent while idle.
+        // - Free metronome: widget clicks freely; the run stays silent to
+        //   avoid doubling (sync off in tempo = free widget during runs).
+        phrase.clickSound = pace === 'tempo'
+            ? settings.rhythm.active && settings.rhythm.sound
+            : settings.rhythm.active && settings.rhythm.sound && !settings.rhythm.syncToExercise;
         const setPhrase = useCallback((updates: Partial<PhraseSettings>) => {
             updateSettings(s => {
                 const next = { ...s, phrase: { ...getPhraseSettings(s), ...updates } };
@@ -189,6 +192,19 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                     rhythm: phrase.scaleRhythm,
                 }, pool);
             }
+            if (phrase.material === 'giuliani') {
+                return generateGiulianiStudy({
+                    keyTonic: phrase.keyTonic,
+                    keyMode: (isMode(phrase.keyMode) ? phrase.keyMode : 'major') as ModeId,
+                    pattern: phrase.giulianiPattern,
+                    meter: { numerator: phrase.meterNumerator, denominator: 4 },
+                    tuningId: settings.tuningId,
+                    bars: phrase.giulianiBars,
+                    chordSelection: phrase.arpeggioChordSelection as string[],
+                    seed: melodySeed,
+                    allowedStrings: pf.strings,
+                }, pool);
+            }
             if (phrase.material === 'arpeggio') {
                 return generateArpeggio({
                     keyTonic: phrase.keyTonic,
@@ -219,6 +235,7 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
             phrase.arpeggioDegree, phrase.arpeggioPattern, phrase.arpeggioCoverage,
             phrase.arpeggioBars, phrase.arpeggioProgression, phrase.arpeggioRhythm,
             phrase.arpeggioChordSelection, melodySeed,
+            phrase.giulianiPattern, phrase.giulianiBars,
             melodySeed, pool, importedScore]);
 
         const fullScore: Result<Score> | null = useMemo(() => {
@@ -555,6 +572,7 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                                     <option value="melody">Melodies (generated)</option>
                                     <option value="scale">Scale drills</option>
                                     <option value="arpeggio">Arpeggios (generated)</option>
+                                    <option value="giuliani">Giuliani studies</option>
                                     <option value="library">Exercises</option>
                                     <option value="import">Imported file</option>
                                 </select>
@@ -574,9 +592,10 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                                         </select>
                                     </label>
                                     <label>Meter
-                                        <select value={phrase.meterNumerator} onChange={e => setPhrase({ meterNumerator: Number(e.target.value) === 3 ? 3 : 4 })}>
+                                        <select value={phrase.meterNumerator} onChange={e => setPhrase({ meterNumerator: Math.max(3, Math.min(6, Number(e.target.value))) as 3 | 4 | 6 })}>
                                             <option value={4}>4/4</option>
                                             <option value={3}>3/4</option>
+                                            <option value={6}>6/8</option>
                                         </select>
                                     </label>
                                     <label>Rhythm
@@ -606,9 +625,10 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                                         </select>
                                     </label>
                                     <label>Meter
-                                        <select value={phrase.meterNumerator} onChange={e => setPhrase({ meterNumerator: Number(e.target.value) === 3 ? 3 : 4 })}>
+                                        <select value={phrase.meterNumerator} onChange={e => setPhrase({ meterNumerator: Math.max(3, Math.min(6, Number(e.target.value))) as 3 | 4 | 6 })}>
                                             <option value={4}>4/4</option>
                                             <option value={3}>3/4</option>
+                                            <option value={6}>6/8</option>
                                         </select>
                                     </label>
                                 </>
@@ -616,29 +636,21 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
 
                             {phrase.material === 'arpeggio' && (
                                 <>
-                                    <label>Chord
-                                        <select value={phrase.arpeggioDegree} onChange={e => setPhrase({ arpeggioDegree: e.target.value, arpeggioBars: 1 })}>
-                                            {(Object.keys(ARPEGGIO_DEGREE_LABELS) as ArpeggioDegree[]).map(d => (
-                                                <option key={d} value={d}>{ARPEGGIO_DEGREE_LABELS[d]}</option>
-                                            ))}
-                                        </select>
-                                    </label>
                                     <label>Pattern
                                         <select value={phrase.arpeggioPattern} onChange={e => setPhrase({ arpeggioPattern: e.target.value as PhraseSettings['arpeggioPattern'] })}>
                                             <option value="up">Up</option>
                                             <option value="down">Down</option>
                                             <option value="updown">Up &amp; down</option>
                                             <option value="1235">1-2-3-5</option>
-                                            <optgroup label="Giuliani studies">
-                                                <option value="giuliani-pim">p-i-m</option>
-                                                <option value="giuliani-pima">p-i-m-a</option>
-                                                <option value="giuliani-pami">p-a-m-i</option>
-                                                <option value="giuliani-mami">m-a-m-i</option>
-                                                <option value="giuliani-ami">a-m-i</option>
-                                                <option value="giuliani-pimamim">p-i-m-a-m-i</option>
-                                                <option value="giuliani-papima">p-a-p-i-m-a</option>
-                                                <option value="giuliani-amipim">a-m-i-p-i-m</option>
-                                                <option value="giuliani-miamim">m-i-a-m-i-m</option>
+                                            <optgroup label="Broken-chord figures">
+                                                <option value="1321">1-3-2-1</option>
+                                                <option value="1325">1-3-2-5(8)</option>
+                                                <option value="1535">1-5-3-5(8)</option>
+                                                <option value="12353">1-2-3-5-3</option>
+                                                <option value="1353">1-3-5-3</option>
+                                                <option value="121321">1-2-1-3-2-1</option>
+                                                <option value="15453">1-5-4-5-3-5</option>
+                                                <option value="132532">1-3-2-5-3-2</option>
                                             </optgroup>
                                         </select>
                                     </label>
@@ -662,35 +674,32 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                                             </select>
                                         </label>
                                     )}
-                                    {phrase.arpeggioBars > 1 && (
-                                        <div style={{ gridColumn: '1 / -1' }}>
-                                            <span style={{ fontSize: '11px', opacity: 0.7, display: 'block', marginBottom: '4px' }}>
-                                                Chord pool ({phrase.arpeggioChordSelection.length === 0 ? 'all 7' : `${phrase.arpeggioChordSelection.length} selected`}):
-                                            </span>
-                                            <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
-                                                {(Object.keys(ARPEGGIO_DEGREE_LABELS) as ArpeggioDegree[]).map(d => {
-                                                    const active = phrase.arpeggioChordSelection.length === 0 || phrase.arpeggioChordSelection.includes(d);
-                                                    return (
-                                                        <button
-                                                            key={d}
-                                                            className={`control-button small ${active ? 'active' : ''}`}
-                                                            style={{ minWidth: '42px', padding: '5px 8px', fontSize: '12px' }}
-                                                            onClick={() => {
-                                                                // Toggle; empty selection = all back on.
-                                                                const cur = phrase.arpeggioChordSelection.length === 0
-                                                                    ? (Object.keys(ARPEGGIO_DEGREE_LABELS) as ArpeggioDegree[])
-                                                                    : [...phrase.arpeggioChordSelection as ArpeggioDegree[]];
-                                                                const next = cur.includes(d) ? cur.filter(x => x !== d) : [...cur, d];
-                                                                setPhrase({ arpeggioChordSelection: next });
-                                                            }}
-                                                        >
-                                                            {ARPEGGIO_DEGREE_LABELS[d]}
-                                                        </button>
-                                                    );
-                                                })}
-                                            </div>
+                                    <div style={{ gridColumn: '1 / -1' }}>
+                                        <span style={{ fontSize: '11px', opacity: 0.7, display: 'block', marginBottom: '4px' }}>
+                                            Chords ({phrase.arpeggioChordSelection.length === 0 ? 'all 7' : `${phrase.arpeggioChordSelection.length} selected`}):
+                                        </span>
+                                        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+                                            {(Object.keys(ARPEGGIO_DEGREE_LABELS) as ArpeggioDegree[]).map(d => {
+                                                const active = phrase.arpeggioChordSelection.length === 0 || phrase.arpeggioChordSelection.includes(d);
+                                                return (
+                                                    <button
+                                                        key={d}
+                                                        className={`control-button small ${active ? 'active' : ''}`}
+                                                        style={{ minWidth: '42px', padding: '5px 8px', fontSize: '12px' }}
+                                                        onClick={() => {
+                                                            const cur = phrase.arpeggioChordSelection.length === 0
+                                                                ? (Object.keys(ARPEGGIO_DEGREE_LABELS) as ArpeggioDegree[])
+                                                                : [...phrase.arpeggioChordSelection as ArpeggioDegree[]];
+                                                            const next = cur.includes(d) ? cur.filter(x => x !== d) : [...cur, d];
+                                                            setPhrase({ arpeggioChordSelection: next });
+                                                        }}
+                                                    >
+                                                        {ARPEGGIO_DEGREE_LABELS[d]}
+                                                    </button>
+                                                );
+                                            })}
                                         </div>
-                                    )}
+                                    </div>
                                     <label>Rhythm
                                         <select value={phrase.arpeggioRhythm} onChange={e => setPhrase({ arpeggioRhythm: e.target.value as PhraseSettings['arpeggioRhythm'] })}>
                                             <option value="quarters">Quarter notes</option>
@@ -698,14 +707,42 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                                         </select>
                                     </label>
                                     <label>Meter
-                                        <select value={phrase.meterNumerator} onChange={e => setPhrase({ meterNumerator: Number(e.target.value) === 3 ? 3 : 4 })}>
+                                        <select value={phrase.meterNumerator} onChange={e => setPhrase({ meterNumerator: Math.max(3, Math.min(6, Number(e.target.value))) as 3 | 4 | 6 })}>
                                             <option value={4}>4/4</option>
                                             <option value={3}>3/4</option>
+                                            <option value={6}>6/8</option>
                                         </select>
                                     </label>
                                 </>
                             )}
 
+                            {phrase.material === 'giuliani' && (
+                                <>
+                                    <label>Pattern
+                                        <select value={phrase.giulianiPattern} onChange={e => setPhrase({ giulianiPattern: e.target.value as PhraseSettings['giulianiPattern'] })}>
+                                            {(Object.keys(GIULIANI_PATTERN_LABELS) as GiulianiPattern[]).map(p => (
+                                                <option key={p} value={p}>{GIULIANI_PATTERN_LABELS[p]}</option>
+                                            ))}
+                                        </select>
+                                    </label>
+                                    <label>Length
+                                        <select value={phrase.giulianiBars} onChange={e => setPhrase({ giulianiBars: Math.max(1, Math.min(8, Number(e.target.value))) })}>
+                                            {[1, 2, 4, 6, 8].map(b => <option key={b} value={b}>{b} bars</option>)}
+                                        </select>
+                                    </label>
+                                    <label>Meter
+                                        <select value={phrase.meterNumerator} onChange={e => setPhrase({ meterNumerator: Math.max(3, Math.min(6, Number(e.target.value))) as 3 | 4 | 6 })}>
+                                            <option value={4}>4/4</option>
+                                            <option value={3}>3/4</option>
+                                            <option value={6}>6/8</option>
+                                        </select>
+                                    </label>
+                                    <span style={{ fontSize: '11px', opacity: 0.7, alignSelf: 'center' }}>
+                                        Chords: from the arpeggio chord pool; voicing enforced (bass + upper strings).
+                                    </span>
+                                </>
+                            )}
+
                             {phrase.material === 'library' && (
                                 <label>Exercise
                                     <select value={phrase.libraryId || EXERCISES[0].id} onChange={e => setPhrase({ libraryId: e.target.value, startBar: 1 })}>
@@ -763,28 +800,9 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                                 </span>
                             )}
 
-                            <label>Pace
-                                <select
-                                    value={phrase.pace}
-                                    onChange={e => {
-                                        const pace = e.target.value as PhraseSettings['pace'];
-                                        setPhrase({ pace });
-                                        // "Sync to metronome" only makes sense with the
-                                        // metronome running — switch it on automatically.
-                                        if (pace === 'tempo' && !settings.rhythm.active) {
-                                            setSettings(s => ({ ...s, rhythm: { ...s.rhythm, active: true } }));
-                                        }
-                                    }}
-                                >
-                                    <option value="step">At your pace</option>
-                                    <option value="tempo">Sync to metronome</option>
-                                </select>
-                            </label>
-                            {phrase.pace === 'tempo' && (
-                                <span style={{ fontSize: '11px', opacity: 0.7, alignSelf: 'center' }}>
-                                    Tempo (BPM): set it on the metronome in the tools below — shared across modes.
-                                </span>
-                            )}
+                            {/* Pace lives in the metronome widget now:
+                                'Sync to exercise' checked = tempo pace,
+                                unchecked = at-your-pace (step). */}
                             <label className="phrase-check">
                                 <input
                                     type="checkbox"
@@ -795,7 +813,7 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                             </label>
                             {phrase.pace === 'tempo' && (
                                 <span style={{ fontSize: '11px', opacity: 0.7, alignSelf: 'center' }}>
-                                    Clicks: use the metronome's "Click sound" checkbox (with count-in, synced).
+                                    BPM + click: on the metronome widget below.
                                 </span>
                             )}
                             <label className="phrase-check">

src/components/TargetNoteControls.tsx

@@ -10,7 +10,7 @@
  * (mirrored into phrase settings), so state stays consistent across modes.
  */
 import { useMemo } from 'react';
-import { Key, Guitar, Music } from 'lucide-react';
+import { Key, Guitar, Music, SlidersHorizontal } from 'lucide-react';
 import { useSettings } from '../context/useSettings';
 import { getPracticeFilter, type PracticeFilter } from '../types/SettingsTypes';
 import { MODE_LABELS, TONICS, isMode, keyFor, type ModeId } from '../music/scales';
@@ -81,14 +81,32 @@ export const TargetNoteControls: React.FC = () => {
 
     const allSelected = pf.strings.length === 0;
 
+    const anyActive = pf.keyEnabled || pf.fretWindowEnabled || pf.strings.length > 0;
     return (
-        <div className="practice-filter-grid">
+        <div className="practice-filter-grid" style={{ display: 'flex', flexDirection: 'column', gap: '8px', border: '1px solid rgba(128,128,128,0.2)', padding: '12px', borderRadius: '8px', gridColumn: '1 / -1' }}>
+            {/* Section header: unified with Tuner/Metronome style */}
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <label className="control-label" style={{ marginBottom: 0 }}>
+                    <SlidersHorizontal size={18} />
+                    <span>Limit notes</span>
+                </label>
+                {anyActive && (
+                    <button
+                        className="link-button"
+                        style={{ fontSize: '11px', padding: 0 }}
+                        onClick={() => setFilter({ keyEnabled: false, fretWindowEnabled: false, strings: [] })}
+                    >
+                        Clear all
+                    </button>
+                )}
+            </div>
+
             {/* Key filter */}
-            <div className="control-group" style={{ gridColumn: '1 / -1' }}>
+            <div className="control-group">
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                     <label className="control-label">
                         <Key size={18} />
-                        <span>Target key (limits notes)</span>
+                        <span>Key</span>
                     </label>
                     <button
                         className={`switch-button ${pf.keyEnabled ? 'active' : ''}`}
@@ -149,13 +167,17 @@ export const TargetNoteControls: React.FC = () => {
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                         <label className="control-label">
                             <Guitar size={18} />
-                            <span>Strings (limits notes)</span>
+                            <span>Strings</span>
                         </label>
-                        {allSelected && (
-                            <span style={{ fontSize: '11px', opacity: 0.7 }}>all</span>
-                        )}
+                        <button
+                            className={`switch-button ${!allSelected ? 'active' : ''}`}
+                            onClick={() => setFilter({ strings: allSelected ? [0] : [] })}
+                            title={allSelected ? 'All strings — toggle on to restrict' : 'Restrict to selected strings'}
+                        >
+                            <div className="switch-thumb" />
+                        </button>
                     </div>
-                    <div style={{ display: 'flex', gap: '6px', marginTop: '8px', flexWrap: 'wrap' }}>
+                    {!allSelected && <div style={{ display: 'flex', gap: '6px', marginTop: '8px', flexWrap: 'wrap' }}>
                         {Array.from({ length: stringCount }, (_, i) => {
                             const active = allSelected || pf.strings.includes(i);
                             return (
@@ -170,7 +192,7 @@ export const TargetNoteControls: React.FC = () => {
                                 </button>
                             );
                         })}
-                    </div>
+                    </div>}
                     {pf.strings.length > 0 && (
                         <button
                             className="link-button"
@@ -189,7 +211,7 @@ export const TargetNoteControls: React.FC = () => {
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                         <label className="control-label">
                             <Music size={18} />
-                            <span>Fret window (limits notes)</span>
+                            <span>Fret window</span>
                         </label>
                         <button
                             className={`switch-button ${pf.fretWindowEnabled ? 'active' : ''}`}

src/hooks/usePhraseTrainer.ts

@@ -507,11 +507,13 @@ export function usePhraseTrainer(
             }
             // Tempo pace: click along with the preview so the rhythm is
             // audible while listening (quarter beats over the full span).
+            // Registered in PREVIEW_GROUP so stopping the preview also stops
+            // its clicks (no ghost metronomes after an aborted preview).
             if (paceRef.current === 'tempo' && configRef.current.clickSound) {
                 const totalTicks = events.reduce((a, e) => Math.max(a, e.startTick + e.durationTicks), 0);
                 const beats = Math.floor(totalTicks / PPQ);
                 for (let i = 0; i < beats; i++) {
-                    audioEngine.playClickAt(t0 + i * spb, CLICK_VOLUME, i % 4 === 0);
+                    audioEngine.playClickAt(t0 + i * spb, CLICK_VOLUME, i % 4 === 0, PREVIEW_GROUP);
                 }
             }
             setPhaseBoth('preview');

src/music/arpeggioGenerator.ts

@@ -18,15 +18,14 @@ export type ArpeggioPattern =
     | 'up' | 'down' | 'updown' | '1235'
     // Giuliani-style right-hand figures over one chord (indices into the
     // chord cycle per note; 1=root 2=third 3=fifth 4=octave):
-    | 'giuliani-pim'   // root-third-fifth (p-i-m)
-    | 'giuliani-pima'  // root-third-fifth-octave (p-i-m-a)
-    | 'giuliani-pami'  // root-octave-fifth-third (p-a-m-i)
-    | 'giuliani-mami'  // third-fifth-octave-third (inner-voice feel)
-    | 'giuliani-ami'   // octave-fifth-third (descending from the top)
-    | 'giuliani-pimamim'  // p-i-m-a-m-i (six-note rolling figure)
-    | 'giuliani-papima'   // p-a-p-i-m-a (bass-skip pattern)
-    | 'giuliani-amipim'   // a-m-i-p-i-m (tremolo-adjacent)
-    | 'giuliani-miamim';  // m-i-a-m-i-m (triple-string figure)
+    | '1321'   // root-fifth-third-root
+    | '1325'   // root-fifth-third-octave
+    | '1535'   // root-octave-fifth-octave
+    | '12353'  // root-third-fifth-octave-fifth
+    | '121321' // rolling thirds (root-third-root-fifth-third-root)
+    | '1353'   // root-third-fifth-third
+    | '15453'  // root-octave-fifth-octave-fifth-octave
+    | '132532';// long broken-chord wave
 export type ArpeggioCoverage = 'one-octave' | 'two-octave';
 /** How the chord per bar is chosen in sequence mode. */
 export type ArpeggioProgression = 'random' | 'functional' | 'diatonic-cycle';
@@ -39,7 +38,7 @@ export interface ArpeggioConfig {
     readonly degree: ArpeggioDegree;
     readonly pattern: ArpeggioPattern;
     readonly coverage: ArpeggioCoverage;
-    readonly meter: { readonly numerator: 3 | 4; readonly denominator: 4 };
+    readonly meter: { readonly numerator: 3 | 4 | 6; readonly denominator: 4 };
     /** Sequence mode: bars > 1 with chord progression selection. */
     readonly bars?: number;
     readonly progression?: ArpeggioProgression;
@@ -62,32 +61,34 @@ export const ARPEGGIO_DEGREE_LABELS: Record<ArpeggioDegree, string> = {
 
 export const PATTERN_LABELS: Record<ArpeggioPattern, string> = {
     up: 'Up', down: 'Down', updown: 'Up & down', '1235': '1-2-3-5',
-    'giuliani-pim': 'Giuliani p-i-m',
-    'giuliani-pima': 'Giuliani p-i-m-a',
-    'giuliani-pami': 'Giuliani p-a-m-i',
-    'giuliani-mami': 'Giuliani m-a-m-i',
-    'giuliani-ami': 'Giuliani a-m-i',
-    'giuliani-pimamim': 'Giuliani p-i-m-a-m-i',
-    'giuliani-papima': 'Giuliani p-a-p-i-m-a',
-    'giuliani-amipim': 'Giuliani a-m-i-p-i-m',
-    'giuliani-miamim': 'Giuliani m-i-a-m-i-m',
+    '1321': '1-3-2-1',
+    '1325': '1-3-2-5(8)',
+    '1535': '1-5-3-5(8)',
+    '12353': '1-2-3-5-3',
+    '121321': '1-2-1-3-2-1',
+    '1353': '1-3-5-3',
+    '15453': '1-5-4-5-3-5',
+    '132532': '1-3-2-5-3-2',
 };
 
 /**
- * Giuliani figures: chord-cycle index per note (0=root 1=third 2=fifth
- * 3=octave). Each figure repeats with an octave register shift per
- * repetition, mirroring the p-i-m-a feel of the 120 right-hand studies.
+ * Giuliani figures — NOTE sequences (not fingerings): the thumb (p) always
+ * takes the bass/root, the remaining notes ride the upper chord tones.
+ * Indices into the octave cycle [0=root, 1=third, 2=fifth, 3=octave]; the
+ * figure repeats with an ascending octave shift per repetition (the bass
+ * stays in place — like the Maestoso studies).
  */
-const GIULIANI_FIGURES: Record<string, number[]> = {
-    'giuliani-pim': [0, 1, 2],
-    'giuliani-pima': [0, 1, 2, 3],
-    'giuliani-pami': [0, 3, 2, 1],
-    'giuliani-mami': [1, 2, 3, 1],
-    'giuliani-ami': [3, 2, 1],
-    'giuliani-pimamim': [0, 1, 2, 3, 2, 1],
-    'giuliani-papima': [0, 3, 0, 1, 2, 3],
-    'giuliani-amipim': [3, 2, 1, 0, 1, 2],
-    'giuliani-miamim': [2, 1, 3, 2, 1, 2],
+// Broken-chord figures — NOTE sequences on the cycle [0=root, 1=third,
+// 2=fifth, 3=octave]; register ascends per repetition.
+const BROKEN_FIGURES: Record<string, number[]> = {
+    '1321': [0, 2, 1, 0],
+    '1325': [0, 2, 1, 3],
+    '1535': [0, 3, 2, 3],
+    '12353': [0, 1, 2, 3, 2],
+    '121321': [0, 1, 0, 2, 1, 0],
+    '1353': [0, 1, 2, 1],
+    '15453': [0, 3, 2, 3, 2, 3],
+    '132532': [0, 2, 1, 3, 2, 1],
 };
 
 /** pc of a spelled degree (step letter + alter). */
@@ -196,7 +197,7 @@ function buildPath(key: KeyContext, degreeIndex: number, pool: number[], coverag
             // figure selecting cycle positions per note; the octave wraps so
             // e.g. p-i-m over C-E-G becomes C E G | C' E' G' ... (ascending
             // octave register shift every figure repetition).
-            const figure = GIULIANI_FIGURES[pattern];
+            const figure = BROKEN_FIGURES[pattern];
             // 4-note cycle per octave: root, third, fifth, octave
             const cycleOct = (oct: number): number[] => [
                 base[0] + 12 * oct, base[1] + 12 * oct, base[2] + 12 * oct, base[0] + 12 * (oct + 1),

src/music/giulianiGenerator.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { generateGiulianiStudy } from './giulianiGenerator';
+import { scoreEvents, validateScore } from '../score/model';
+
+const strings = [40, 45, 50, 55, 59, 64];
+const pool: number[] = [];
+for (const open of strings) for (let f = 0; f <= 12; f++) pool.push(open + f);
+
+const base = {
+    keyTonic: 'C',
+    keyMode: 'major' as const,
+    meter: { numerator: 4 as const, denominator: 4 as const },
+    tuningId: 'standard',
+    bars: 4,
+    chordSelection: [] as string[],
+    allowedStrings: [] as number[],
+};
+
+describe('generateGiulianiStudy', () => {
+    it('generates a 4-bar p-i-m-a study in C major', () => {
+        const r = generateGiulianiStudy({ ...base, pattern: 'pima', seed: 5 }, pool);
+        expect(r.ok).toBe(true);
+        if (!r.ok) return;
+        const ev = scoreEvents(r.value);
+        expect(r.value.measures.length).toBe(4);
+        expect(ev.length).toBe(4 * 4 * 4); // bars × beats × figure length
+        expect(validateScore(r.value)).toEqual([]);
+        expect(r.value.title).toContain('Giuliani');
+    });
+
+    it('keeps figure notes on distinct strings per repetition (voicing rule)', () => {
+        const r = generateGiulianiStudy({ ...base, pattern: 'pima', seed: 3 }, pool);
+        expect(r.ok).toBe(true);
+        if (!r.ok) return;
+        // For each repetition of 4 consecutive notes, all midis must differ
+        // (distinct cycle positions → distinct pitches within a beat figure)
+        const ev = scoreEvents(r.value);
+        for (let i = 0; i + 3 < ev.length; i += 4) {
+            const four = ev.slice(i, i + 4).map(e => e.pitch!.midi);
+            expect(new Set(four).size).toBe(4);
+        }
+    });
+
+    it('six-note figures work (pimamim)', () => {
+        const r = generateGiulianiStudy({ ...base, pattern: 'pimamim', seed: 1 }, pool);
+        expect(r.ok).toBe(true);
+        if (!r.ok) return;
+        const ev = scoreEvents(r.value);
+        // 4/4: figure falls back to quarter-note walk (6-note figure over 4
+        // beats is not renderable in even subdivisions) — 4 bars × 4 quarters
+        expect(ev.length).toBe(16);
+        expect(validateScore(r.value)).toEqual([]);
+    });
+
+    it('is deterministic per seed', () => {
+        const a = generateGiulianiStudy({ ...base, pattern: 'pim', seed: 9 }, pool);
+        const b = generateGiulianiStudy({ ...base, pattern: 'pim', seed: 9 }, pool);
+        expect(JSON.stringify(a) === JSON.stringify(b)).toBe(true);
+    });
+
+    it('honors string restrictions (fails cleanly when impossible)', () => {
+        const r = generateGiulianiStudy({ ...base, pattern: 'pima', seed: 2, allowedStrings: [0] }, pool);
+        expect(r.ok).toBe(false); // 4 voices cannot live on one string
+    });
+});

src/music/giulianiGenerator.ts

@@ -0,0 +1,275 @@
+/**
+ * Giuliani study generator (Phrase Mode material) — its own category
+ * because the figures require a REAL guitar voicing: the thumb takes the
+ * bass (root on a lower string) and i/m/a ride higher strings. A figure is
+ * only playable when each consecutive voice slot maps to a distinct string
+ * with a valid fret in the playable pool — arbitrary chord arpeggios cannot
+ * guarantee that.
+ *
+ * Voicing search: for a figure of voice-count V, pick a bass string (for
+ * the root) and V-1 higher strings; each note of the cycle is placed on its
+ * designated string at the fret matching the chord tone. Figure repeats
+ * over the chord; every bar re-voices (deterministically) so sequences work.
+ */
+import { PPQ, validateScore, type Result, type Score, type ScoreEvent, STEP_LETTERS, LETTER_PC, type StepLetter } from '../score/model';
+import { keyFor, type KeyContext, type ModeId } from './scales';
+import { TUNINGS, type Tuning } from '../music/Tunings';
+import { makeRng } from './melodyGenerator';
+
+export type GiulianiPattern =
+    | 'pim'      // Studies 1–20 feel: bass + two upper voices
+    | 'pima'     // Studies 21–40: bass + three upper voices
+    | 'pami'     // bass + descending upper voices
+    | 'aim'      // upper voices first
+    | 'pimamim'  // six-note rolling
+    | 'pmamim'   // asymmetric
+    | 'piai'     // bass + octave-third (wide spacing)
+    | 'pmami'    // bass + fifth-octave-third
+    | 'pimami'   // bass-third-fifth-third (waltz-like)
+    | 'pimaia';  // bass with two upper-voice pairs
+
+export const GIULIANI_PATTERN_LABELS: Record<GiulianiPattern, string> = {
+    pim: 'p-i-m (3 voices)',
+    pima: 'p-i-m-a (4 voices)',
+    pami: 'p-a-m-i',
+    aim: 'a-i-m',
+    pimamim: 'p-i-m-a-m-i',
+    pmamim: 'p-m-a-m-i-m',
+    piai: 'p-i-a-i (wide)',
+    pmami: 'p-m-a-m-i',
+    pimami: 'p-i-m-a-m-i (waltz)',
+    pimaia: 'p-i-m-a-i-a',
+};
+
+/** Figure voice slots per repetition (indices into the cycle [root, third, fifth, octave]). */
+const FIGURES: Record<GiulianiPattern, number[]> = {
+    pim: [0, 1, 2],
+    pima: [0, 1, 2, 3],
+    pami: [0, 3, 2, 1],
+    aim: [0, 3, 1],
+    pimamim: [0, 1, 2, 3, 2, 1],
+    pmamim: [0, 2, 3, 2, 1, 2],
+    piai: [0, 1, 3, 1],
+    pmami: [0, 2, 3, 2, 1],
+    pimami: [0, 1, 2, 3, 2],
+    pimaia: [0, 1, 2, 3, 1, 3],
+};
+
+export interface GiulianiConfig {
+    readonly keyTonic: string;
+    readonly keyMode: ModeId;
+    readonly pattern: GiulianiPattern;
+    readonly meter: { readonly numerator: 3 | 4 | 6; readonly denominator: 4 };
+    readonly tuningId: string;
+    /** Bars (one chord per bar). */
+    readonly bars: number;
+    /** Chord degrees allowed (empty = all 7). */
+    readonly chordSelection: readonly string[];
+    /** Seed for chord sequence + voicing choices. */
+    readonly seed: number;
+    /** Deterministic pattern from the practice filter (strings restriction). */
+    readonly allowedStrings: readonly number[];
+}
+
+const DEGREE_INDEX: Record<string, number> = { I: 0, ii: 1, iii: 2, IV: 3, V: 4, vi: 5, 'vii0': 6 };
+
+const degreePc = (d: { step: StepLetter; alter: number }): number =>
+    (LETTER_PC[STEP_LETTERS.indexOf(d.step)] + d.alter + 144) % 12;
+
+function chordNameFor(key: KeyContext, degreeIndex: number): string {
+    const d = key.degrees[degreeIndex];
+    const third = key.degrees[(degreeIndex + 2) % 7];
+    const fifth = key.degrees[(degreeIndex + 4) % 7];
+    const root = d.step + (d.alter < 0 ? 'b'.repeat(-d.alter) : '#'.repeat(d.alter));
+    const thirdInterval = (degreePc(third) - degreePc(d) + 12) % 12;
+    const fifthInterval = (degreePc(fifth) - degreePc(d) + 12) % 12;
+    let suffix = '';
+    if (thirdInterval === 3 && fifthInterval === 7) suffix = 'm';
+    else if (thirdInterval === 3 && fifthInterval === 6) suffix = 'dim';
+    return root + suffix;
+}
+
+interface ChordTone { readonly pc: number; readonly step: StepLetter; readonly alter: number }
+
+/** Diatonic triad pcs for a degree, spelled. */
+function triadPcs(key: KeyContext, degreeIndex: number): ChordTone[] {
+    return [0, 2, 4].map(o => key.degrees[(degreeIndex + o) % 7]).map(d => ({
+        pc: degreePc(d), step: d.step, alter: d.alter,
+    }));
+}
+
+/**
+ * Voice a figure bar: assign each cycle position (root/third/fifth/octave)
+ * to a string with a valid fret, bass string lowest. Returns per-slot
+ * {stringIndex, fret, midi} or null when impossible with the allowed strings.
+ */
+function voiceBar(
+    tuning: Tuning,
+    chord: ChordTone[],
+    pattern: GiulianiPattern,
+    allowedStrings: number[],
+): { stringIndex: number; fret: number; midi: number }[] | null {
+    const figure = FIGURES[pattern];
+    const maxVoice = Math.max(...figure) + 1; // e.g. 3 for p-i-m, 4 for p-i-m-a
+    const bassPc = chord[0].pc;
+
+    // Candidate strings sorted low→high for the bass; upper voices fill above.
+    const strings = tuning.strings.map((open, idx) => ({ open, idx }));
+    const sorted = [...strings].sort((a, b) => a.open - b.open);
+    const usable = sorted.filter(s => allowedStrings.length === 0 || allowedStrings.includes(s.idx));
+
+    const octavePcs = [...chord.map(c => c.pc), (chord[0].pc + 12) % 12];
+    // cyclePcs[i] = pitch class of cycle position i
+    const cyclePcs = octavePcs;
+
+    const bassCandidates = usable.filter(s => {
+        // bass must be able to reach the root within 12 frets
+        for (let fret = 0; fret <= 12; fret++) {
+            if (((s.open + fret) % 12 + 12) % 12 === bassPc) return true;
+        }
+        return false;
+    });
+
+    for (const bass of bassCandidates) {
+        // assign remaining voices to strings above the bass
+        const uppers = usable.filter(s => s.open > bass.open).slice(0, maxVoice - 1);
+        if (uppers.length < maxVoice - 1) continue;
+        // Voice slots: cycle positions 1..maxVoice-1 map to uppers in order
+        const slotStrings: ({ open: number; idx: number } | null)[] = [bass];
+        for (let v = 1; v < maxVoice; v++) slotStrings.push(uppers[v - 1]);
+
+        let ok = true;
+        const placement: { stringIndex: number; fret: number; midi: number }[] = [];
+        const usedFrets = new Set<string>();
+        for (let slot = 0; slot < maxVoice; slot++) {
+            const pc = cyclePcs[slot];
+            const s = slotStrings[slot];
+            if (!s) { ok = false; break; }
+            let found: number | null = null;
+            for (let fret = 0; fret <= 12; fret++) {
+                if ((((s.open + fret) % 12) + 12) % 12 === pc) { found = fret; break; }
+            }
+            if (found === null) { ok = false; break; }
+            const midi = s.open + found;
+            const key = `${slot}:${found}`;
+            if (usedFrets.has(key)) { ok = false; break; } // same string double-stop — not for these studies
+            usedFrets.add(key);
+            placement.push({ stringIndex: s.idx, fret: found, midi });
+        }
+        if (ok) return placement;
+    }
+    return null;
+}
+
+export function generateGiulianiStudy(
+    config: GiulianiConfig,
+    eligiblePitches: number[],
+): Result<Score> {
+    const tuning = TUNINGS[config.tuningId];
+    if (!tuning) return { ok: false, error: 'No tuning available for Giuliani studies — pick a fretted instrument.' };
+    const key = keyFor(config.keyTonic, config.keyMode);
+
+    const poolSet = new Set(eligiblePitches.filter(m => Number.isInteger(m)));
+    if (poolSet.size === 0) return { ok: false, error: 'No playable notes in the selected range — widen the note set.' };
+
+    const rng = makeRng(config.seed);
+    const pick = <T,>(arr: T[]): T => arr[Math.floor(rng() * arr.length)];
+
+    // Chord sequence: random from selection (no immediate repeats)
+    const sel = (config.chordSelection ?? []).filter(d => d in DEGREE_INDEX);
+    const poolDegrees = (sel.length > 0 ? sel : Object.keys(DEGREE_INDEX)) as string[];
+    const degreeIndices: number[] = [];
+    for (let b = 0; b < config.bars; b++) {
+        const prev = degreeIndices[b - 1];
+        const candidates = poolDegrees
+            .map(d => DEGREE_INDEX[d])
+            .filter(di => di !== prev);
+        degreeIndices.push(pick(candidates.length > 0 ? candidates : poolDegrees.map(d => DEGREE_INDEX[d])));
+    }
+
+    // Voice each bar; drop bars that cannot be voiced (rare with full pool).
+    const full = config.meter.numerator * PPQ;
+    const events: ScoreEvent[] = [];
+    const chordSymbols: (string | null)[] = [];
+    const usableBars: { degreeIndex: number; placement: ReturnType<typeof voiceBar> }[] = [];
+    for (const di of degreeIndices) {
+        const chord = triadPcs(key, di);
+        const placement = voiceBar(tuning, chord, config.pattern, config.allowedStrings as number[]);
+        if (!placement) continue;
+        usableBars.push({ degreeIndex: di, placement });
+    }
+    if (usableBars.length === 0) {
+        return { ok: false, error: 'No bar could be voiced with the current string selection — allow more strings or a lower fret window.' };
+    }
+
+    // Rhythm: one note per slot (figure repeats); one figure per beat.
+    const figure = FIGURES[config.pattern];
+    // Renderable note durations only (durationCode subset). Figures with a
+    // length that divides neither 4 nor 3 evenly would produce exotic ticks
+    // (e.g. 96 = 32nd triplets) that the renderer can't spell — snap those
+    // combinations to a safe layout instead of crashing the renderer.
+    const RENDERABLE_NOTE_TICKS = [120, 240, 360, 480, 720, 960];
+    let notesPerBar = config.meter.numerator * figure.length;
+    let noteDur = full / notesPerBar;
+    if (!RENDERABLE_NOTE_TICKS.includes(noteDur)) {
+        // Fall back: one figure per TWO beats (halves the notes per bar),
+        // then per bar, then quarters as last resort.
+        for (const div of [2, 3, 4]) {
+            const cand = full / div;
+            if (cand % figure.length === 0 && RENDERABLE_NOTE_TICKS.includes(cand / figure.length)) {
+                notesPerBar = div * figure.length;
+                noteDur = cand / figure.length;
+                break;
+            }
+        }
+        if (!RENDERABLE_NOTE_TICKS.includes(noteDur)) {
+            // Final fallback: quarter-note walk through the figure (cycling).
+            notesPerBar = config.meter.numerator;
+            noteDur = PPQ;
+        }
+    }
+
+    let cursor = 0;
+    for (let b = 0; b < usableBars.length; b++) {
+        const { degreeIndex, placement } = usableBars[b];
+        if (!placement) continue;
+        chordSymbols.push(chordNameFor(key, degreeIndex));
+        for (let n = 0; n < notesPerBar; n++) {
+            const f = n % figure.length;
+            const slot = figure[f];
+            const note = placement[slot];
+            if (!note) continue;
+            // spelling via key degree of this pc
+            const pc = ((note.midi % 12) + 12) % 12;
+            const d = key.degrees.find(deg => degreePc(deg) === pc);
+            if (!d) continue;
+            const octave = (note.midi - pc) / 12 - 1;
+            events.push({
+                id: `g${b}-${n}`,
+                startTick: cursor,
+                durationTicks: noteDur,
+                pitch: { midi: note.midi, step: d.step, alter: d.alter, octave },
+            });
+            cursor += noteDur;
+        }
+    }
+
+    const totalBars = usableBars.length;
+    const score: Score = {
+        version: 1,
+        id: `giuliani-${config.keyTonic}-${config.keyMode}-${config.pattern}-${config.bars}b-${config.seed}`,
+        title: `Giuliani study — ${key.tonic} ${config.pattern} (${totalBars} bars)`,
+        meter: config.meter,
+        key: { tonic: config.keyTonic, mode: config.keyMode, signature: key.signature },
+        measures: Array.from({ length: totalBars }, (_, i) => ({
+            number: i + 1,
+            startTick: i * full,
+            durationTicks: full,
+        })),
+        chordSymbols,
+        voices: [{ id: 'melody', events }],
+    };
+    const problems = validateScore(score);
+    if (problems.length > 0) return { ok: false, error: `Internal giuliani error: ${problems[0]}` };
+    return { ok: true, value: score };
+}

src/music/melodyGenerator.ts

@@ -30,7 +30,7 @@ export interface MelodyConfig {
     readonly keyMode: ModeId;
     /** 1..8 */
     readonly bars: number;
-    readonly meter: { readonly numerator: 3 | 4; readonly denominator: 4 };
+    readonly meter: { readonly numerator: 3 | 4 | 6; readonly denominator: 4 };
     /** 1 = Simple (quarters/halves/wholes), 2 = Mixed (+ paired eighths, dotted quarters),
      *  3 = Elaborate (+ sixteenths, sixteenth groups, dotted eighths). */
     readonly rhythmLevel: 1 | 2 | 3;
@@ -65,6 +65,21 @@ const TEMPLATES_4_L3: number[][] = [
     [480, 480, 360, 120, 480],
     [720, 120, 120, 120, 120, 480],
 ];
+// 6/8 templates (6 quarter-ticks = 2880 per bar; 8th-note oriented).
+const TEMPLATES_6_L1: number[][] = [
+    [240, 240, 240, 240, 240, 240, 240, 240, 480, 480],
+    [480, 480, 240, 240, 240, 240, 480, 480],
+    [240, 240, 480, 480, 480, 240, 240, 240, 240],
+    [960, 480, 480, 480, 480],
+    [480, 480, 480, 480, 960],
+    [1440, 480, 480, 480],
+];
+const TEMPLATES_6_L2: number[][] = [
+[480, 480, 120, 120, 120, 120, 240, 240, 480, 480],
+    [120, 120, 120, 120, 480, 480, 240, 240, 240, 240, 240, 240],
+    [480, 240, 240, 480, 240, 240, 240, 240, 240, 240],
+    [480, 240, 240, 480, 240, 240, 240, 240, 240, 240],
+    [480, 240, 240, 480, 240, 240, 240, 240, 240, 240],];
 const TEMPLATES_3_L1: number[][] = [
     [480, 480, 480],
     [960, 480],
@@ -86,11 +101,24 @@ const TEMPLATES_3_L3: number[][] = [
     [120, 120, 120, 120, 120, 120, 120, 120, 480],
 ];
 
-function templatesFor(meter: { numerator: 3 | 4 }, level: 1 | 2 | 3): number[][] {
-    const base = meter.numerator === 4
-        ? (level === 1 ? TEMPLATES_4_L1 : level === 2 ? [...TEMPLATES_4_L1, ...TEMPLATES_4_L2] : [...TEMPLATES_4_L1, ...TEMPLATES_4_L2, ...TEMPLATES_4_L3])
-        : (level === 1 ? TEMPLATES_3_L1 : level === 2 ? [...TEMPLATES_3_L1, ...TEMPLATES_3_L2] : [...TEMPLATES_3_L1, ...TEMPLATES_3_L2, ...TEMPLATES_3_L3]);
-    return base.filter(t => t.reduce((a, b) => a + b, 0) === meter.numerator * PPQ);
+function templatesFor(meter: { numerator: 3 | 4 | 6 }, level: 1 | 2 | 3): number[][] {
+    let base: number[][];
+    if (meter.numerator === 4) {
+        base = level === 1 ? TEMPLATES_4_L1 : level === 2 ? [...TEMPLATES_4_L1, ...TEMPLATES_4_L2] : [...TEMPLATES_4_L1, ...TEMPLATES_4_L2, ...TEMPLATES_4_L3];
+    } else if (meter.numerator === 6) {
+        base = level === 1 ? TEMPLATES_6_L1 : [...TEMPLATES_6_L1, ...TEMPLATES_6_L2];
+    } else {
+        base = level === 1 ? TEMPLATES_3_L1 : level === 2 ? [...TEMPLATES_3_L1, ...TEMPLATES_3_L2] : [...TEMPLATES_3_L1, ...TEMPLATES_3_L2, ...TEMPLATES_3_L3];
+    }
+    const out = base.filter(t => t.reduce((a, b) => a + b, 0) === meter.numerator * PPQ);
+    // Never return an empty pool — fall back to the closest available level
+    // so generator.pick on an empty array can never crash the app.
+    if (out.length === 0) {
+        const all = [...TEMPLATES_4_L1, ...TEMPLATES_4_L2, ...TEMPLATES_3_L1, ...TEMPLATES_3_L2, ...TEMPLATES_6_L1];
+        const anyFit = all.filter(t => t.reduce((a, b) => a + b, 0) === meter.numerator * PPQ);
+        return anyFit.length > 0 ? anyFit : [[meter.numerator * PPQ]];
+    }
+    return out;
 }
 
 /** Motion weights by semitone distance (soft preference, contract C3). */

src/music/scaleDrills.ts

@@ -19,7 +19,7 @@ export interface DrillConfig {
     readonly keyMode: ModeId;
     readonly direction: DrillDirection;
     readonly coverage: DrillCoverage;
-    readonly meter: { readonly numerator: 3 | 4; readonly denominator: 4 };
+    readonly meter: { readonly numerator: 3 | 4 | 6; readonly denominator: 4 };
     /** Note duration: quarters (default) or eighths. */
     readonly rhythm?: DrillRhythm;
 }

src/score/model.ts

@@ -86,7 +86,7 @@ export interface Score {
     readonly version: 1;
     readonly id: string;
     readonly title: string;
-    readonly meter: { readonly numerator: 3 | 4; readonly denominator: 4 };
+    readonly meter: { readonly numerator: 3 | 4 | 6; readonly denominator: 4 };
     readonly key: ScoreKey;
     readonly measures: ScoreMeasure[];
     /** Exactly one voice in v1. */

src/types/SettingsTypes.ts

@@ -42,7 +42,7 @@ export interface RhythmSettings {
     volume: number;
 }
 
-export type PhraseMaterial = 'melody' | 'scale' | 'arpeggio' | 'library' | 'import';
+export type PhraseMaterial = 'melody' | 'scale' | 'arpeggio' | 'giuliani' | 'library' | 'import';
 export type PhrasePace = 'step' | 'tempo';
 
 export interface PhraseSettings {
@@ -52,7 +52,7 @@ export interface PhraseSettings {
     keyTonic: string;
     keyMode: string; // ModeId
     bars: number; // 1–8 (melodies)
-    meterNumerator: 3 | 4;
+    meterNumerator: 3 | 4 | 6;
     rhythmLevel: 1 | 2 | 3;
     scaleCoverage: 'one-octave' | 'two-octave' | 'position';
     scaleDirection: 'up' | 'down' | 'updown';
@@ -67,6 +67,9 @@ export interface PhraseSettings {
     arpeggioBars: number;
     arpeggioProgression: 'random' | 'functional' | 'diatonic-cycle';
     arpeggioRhythm: 'quarters' | 'eighths';
+    /** Giuliani study material (own category — voicing-enforced). */
+    giulianiPattern: 'pim' | 'pima' | 'pami' | 'aim' | 'pimamim' | 'pmamim';
+    giulianiBars: number;
     /** Phrase-local fret window (guitar/bass) — overrides the note set. */
     fretWindowEnabled: boolean;
     fretMin: number;
@@ -104,6 +107,8 @@ export const DEFAULT_PHRASE_SETTINGS: PhraseSettings = {
     arpeggioBars: 1,
     arpeggioProgression: 'functional',
     arpeggioRhythm: 'quarters',
+    giulianiPattern: 'pima',
+    giulianiBars: 4,
     fretWindowEnabled: false,
     fretMin: 0,
     fretMax: 4,