Add Lydian Chromatic Concept study tab

The current app is organized around four parent scales, their modes, harmonic fields, and comparisons. This is useful, but it does not yet support the class workflow around the Lydian Chromatic Concept: chord quality → target/alvo → parent scale → ordered scale options → improvisation exercise.

If this feature is implemented directly inside JSX or mixed into the existing scale engine, the app will become difficult to expand. The Lydian Chromatic Concept needs its own typed data model and a small pure engine so future teacher-specific harmony content can be added safely.

The app already has a good foundation:

• src/theory/ centralizes scales, modes, chords, constants, and derivation.
• src/hooks/useScaleEngine.ts manages tonic, selected scales, display mode, computed scale results, and comparisons.
• src/components/controls/TonicSelector.tsx already solves the enharmonic UI problem by showing pairs such as C# / Db as one button with two independently clickable halves.
• src/i18n/ already centralizes interface text through stable locale keys.

This task should follow those patterns instead of creating a separate one-off feature.

The Lydian Chromatic material should be treated as a new study mode, not as another item inside the existing four-scale selector. It should have a dedicated tab and its own feature folder.

Implement a first vertical slice of a new Lídio Cromático tab.

1. Add the new tab

Update the tab system to support:

export type TabId = 'scales' | 'harmony' | 'modes' | 'compare' | 'lydianChromatic'

Add localized labels:

pt-BR: Lídio Cromático
en: Lydian Chromatic

Do not redesign the existing tabs. Keep the same visual language.

2. Create a dedicated theory module

Add:

src/theory/lydianChromatic/types.ts
src/theory/lydianChromatic/data.ts
src/theory/lydianChromatic/engine.ts

Suggested types:

export type LydianChromaticChordId =
  | 'maj7'
  | 'maj7Sharp5'
  | 'dom7'
  | 'dom7Alt'
  | 'min7'
  | 'halfDim7'
  | 'dim7'
  | 'sus4Flat9'

export type LydianChromaticScaleId =
  | 'lydian'
  | 'lydianAugmented'
  | 'lydianDiminished'
  | 'lydianFlat7'
  | 'auxiliaryAugmented'
  | 'auxiliaryDiminished'
  | 'auxiliaryDiminishedBlues'

export interface LydianChromaticChordTarget {
  id: LydianChromaticChordId
  symbolTemplate: string
  qualityLabel: string
  genericTargetDegree: string
  parentScaleHint: string
  preferredScaleIds: LydianChromaticScaleId[]
  notes?: string
}

The first data table can be a seed version based on class notes and should be easy to edit later. Do not bury these mappings inside UI components.

3. Create a pure computation function

Add a function similar to:

computeLydianChromaticSelection({
  root,
  chordId,
})

It should return:

{
  root,
  chordSymbol,
  chordTarget,
  targetDegree,
  targetNote,
  parentScale,
  orderedScaleOptions,
}

Use the existing note/interval helpers where possible. If a mapping is uncertain, represent it in data.ts with a clear notes field instead of pretending the rule is final.

4. Add feature components

Add:

src/components/lydianChromatic/LydianChromaticSection.tsx
src/components/lydianChromatic/ChordTargetSelector.tsx
src/components/lydianChromatic/TargetPanel.tsx
src/components/lydianChromatic/ParentScalePanel.tsx
src/components/lydianChromatic/LydianScaleOrderPanel.tsx

The first UI version should include:

• title and short explanation
• root selector using the same enharmonic behavior as TonicSelector
• chord target buttons in generic form:
  • Xmaj7
  • Xmaj7#5
  • X7
  • X7alt
  • Xm7
  • Xm7b5
  • Xdim7
  • X7sus4(b9)
• concrete chord display after root selection:
  • selecting root C and X7alt displays C7alt
• target/alvo display:
  • generic degree
  • concrete note
• parent scale panel:
  • parent scale name
  • notes
  • short explanation
• ordered scale panel:
  • Lydian
  • Lydian Augmented
  • Lydian Diminished
  • Lydian b7
  • Auxiliary Augmented
  • Auxiliary Diminished
  • Auxiliary Diminished Blues
• exercise prompt:
  • "Write one bar of 8 eighth notes using the selected chord and include the target note."

5. Keep theory copy centralized

Do not add long explanation text directly in JSX.

Prefer one of these:

src/theory/lydianChromatic/data.ts
src/theory/dictionary/pt-BR.ts
src/i18n/locales/pt-BR.ts

For this first task, short labels can live in data, but longer explanations should use stable IDs or locale keys.

6. Preserve existing behavior

Do not break:

• scale cards
• harmonic field
• modes
• comparison
• audio playback
• current tonic selection
• localStorage behavior

• This is a first vertical slice, not a complete implementation of the whole Lydian Chromatic Concept.
• The class-note mapping of chord types to targets should be implemented as editable seed data and reviewed later.
• The Russell/Lydian Chromatic scale ordering should be treated as a pedagogical ordered list, not as a replacement for the current major/minor/modes engine.
• Reuse current UI patterns and CSS tokens. Do not introduce a new visual design system.
• Validate with npm run build and npm run lint.
• Keep imports relative; the repo does not use @/ aliases.