fix(configurator): dedupe cross-panel controls; full Google Fonts catalogue with mono target

[jackgranatowski]

Summary

Follow-up to #632 — a redundancy pass across every control panel plus fonts-loader DX, addressing user-reported issues: the scale multipliers appeared twice (under the fluid generators AND in the typography Advanced group), the Google Font loader had no Mono target, and the font dropdown covered only 27 curated families.

• Typography multiplier dedupe. The Advanced power-knob group contained only the two multipliers (--sf-text-scale, --sf-text-display-scale) that already have dedicated sliders under the fluid generators. The typography knob domain and the Advanced block are removed; the dedicated sliders inherit the knobs' wider 0.5–2 range.
• Focus ring gets one home (Borders). The --sf-focus-ring-width knob is removed from the Colors panel and the style picker moves from Misc into Borders' Focus ring section — width, offset, color, style and the live preview now live together.
• Components object-fit dedupe. The reduced (cover/contain) duplicate of the global --sf-object-fit picker is removed; Misc owns the full one. A programmatic scan of tokens edited in 2+ panels confirms the only remaining cross-panel editors are intentional (WCAG auto-fix touching color sources; the shared fluid viewport range labelled "(shared)").
• Fonts DX: the Google Font loader gains a Mono target (--sf-font-mono, monospace fallback), and the curated 27-font dropdown + free-text pair is replaced by a single autocomplete input backed by the full Google Fonts catalogue — google-fonts.generated.json, 1942 families + categories generated from fonts.google.com/metadata/fonts, sorted by popularity.

Type

• fix
• feat
• docs
• chore / tooling

Checklist

• Conventional Commit messages (feat:, fix:, docs:, …) — enforced by commitlint
• npm run lint:css passes (stylelint) — no CSS source touched (configurator-only)
• npm run build rebuilds dist/ (bundles are git-ignored; CI rebuilds and stamps headers)
• npm test passes — configurator suite 186/186 (three fewer cases than before: they iterated the removed power knobs), svelte-check 0 errors, check:curation OK
• Version references in sync if any version-related file changed (npm run check:version) — n/a, no version files touched
• LLM guide reviewed/updated if core/*.css, optional/*.css, or token-registry.json changed (npm run check:llm-guide) — n/a, framework untouched
• Generated artifacts regenerated, not hand-edited — google-fonts.generated.json is machine-generated from the Google Fonts metadata endpoint
• CHANGELOG.md updated under ## [Unreleased] (for user-facing changes) — configurator-internal UI changes
• Breaking changes include migration docs — no breaking changes

Notes

Browser-verified with Playwright against the built app: exactly two multiplier rows in typography (one per generator, no Advanced group), 1942 options in the font datalist, the Mono target writes --sf-font-mono, Ring style renders inside Borders' Focus ring section, the Colors focus knob and Misc focus-ring-style section are gone, zero runtime errors.

🤖 Generated with Claude Code

https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN

---

Generated by Claude Code

Summary by CodeRabbit

• New Features

  • Added focus ring style selection to the Borders panel.
  • Expanded font search to the full Google Fonts catalogue.
  • Added support for applying fonts to body, headings, or monospace text.
  • Added a shortcut to open the contrast tool from Text contrast settings.

• Improvements

  • Updated Text contrast controls to use dedicated contrast settings.
  • Expanded fluid typography scale ranges.
  • Removed obsolete media fit, focus ring, and advanced typography controls.

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 39 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: bb4bea6c-e71b-404f-a7f0-077f22530ea4

📥 Commits

Reviewing files that changed from the base of the PR and between 2109884 and 88ce9c4.

📒 Files selected for processing (1)

• configurator/src/components/panels/BordersPanel.svelte

📝 Walkthrough

Walkthrough

The configurator updates focus-ring and contrast controls, expands Google Font selection to the full catalogue with mono support, changes typography scale controls, and removes obsolete object-fit, focus-ring, and typography power-knob controls.

Changes

Configurator control consolidation

Layer / File(s)	Summary
Focus ring and contrast controls configurator/src/components/panels/BordersPanel.svelte, configurator/src/components/panels/ColorsPanel.svelte	Adds focus-ring style buttons, scopes Text contrast to contrast knobs, and adds a WCAG contrast-tool action.
Typography font and scale controls configurator/src/components/panels/TypographyPanel.svelte, configurator/src/lib/powerKnobs.ts	Uses the full Google Fonts catalogue, supports body/heading/mono targets, widens scale controls, and removes typography power knobs.
Obsolete panel control removal configurator/src/components/panels/ComponentsPanel.svelte, configurator/src/components/panels/MiscPanel.svelte	Removes the global object-fit control and the miscellaneous focus-ring style section and state.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• codeslash-dev/SLASHED#429: Related Text contrast UI and WCAG tool integration.
• codeslash-dev/SLASHED#631: Related typography scale controls and power-knob changes.
• codeslash-dev/SLASHED#632: Related focus-ring UI changes in BordersPanel.svelte.

Suggested labels: codex

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the two main themes: deduping cross-panel controls and expanding Google Fonts support with a mono target.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/configurator-controls-audit-zqi10q

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

This PR is a cross-panel deduplication and font-loader DX pass on the configurator. It removes duplicate occurrences of the two scale-multiplier sliders (which previously appeared both in the fluid generators and in a separate "Advanced" power-knob group), consolidates focus-ring controls (width, offset, color, and style) into a single Borders section, removes the reduced --sf-object-fit picker from ComponentsPanel, and upgrades the Google Font loader from a 27-entry curated dropdown to a single autocomplete input backed by the full 1,942-family catalogue.

• Deduplication: Typography power-knob domain removed from powerKnobs.ts; the two multiplier sliders adopt the knobs' wider 0.5–2 range; focus-ring style picker migrated from MiscPanel to BordersPanel; limited object-fit picker removed from ComponentsPanel.
• Font loader: google-fonts.generated.json (~70 KB, single-line array of {f, c} objects) replaces the hard-coded 27-name array; applyCustomFont now handles a third "mono" target that writes 'FontName', monospace to --sf-font-mono.

Confidence Score: 4/5

Safe to merge — all deduplication targets are fully cleaned up, no dead references remain, and the font loader correctly handles the new mono target.

The control-panel cleanup is thorough: no stale references to removed knobs or state variables were found across any of the affected panels. The mono font target correctly writes to --sf-font-mono with a monospace fallback. The one nit is that the focus ring preview label in BordersPanel is now static ('Focus preview') where the old MiscPanel version showed the live style name — the visual ring still reflects the CSS variable correctly, so this is cosmetic only.

TypographyPanel.svelte — the new datalist-based font loader and the slider step/range change are the most behaviour-affecting parts of the diff and warrant a quick sanity check against the running configurator.

Important Files Changed

Filename	Overview
configurator/src/components/panels/BordersPanel.svelte	Adds the focus-ring style picker (reusing BORDER_STYLES) inside the Focus ring section alongside the existing width/offset/color controls; the live preview element keeps correct CSS-variable references but drops the dynamic style-name text label.
configurator/src/components/panels/ColorsPanel.svelte	Removes the focusKnobs filter and the --sf-focus-ring-width PowerKnobRow that duplicated the slider already present in BordersPanel.
configurator/src/components/panels/ComponentsPanel.svelte	Removes the reduced cover/contain object-fit picker; the full picker in MiscPanel remains authoritative.
configurator/src/components/panels/MiscPanel.svelte	Removes the entire Focus ring style section (state variable, button grid, and preview) now that BordersPanel owns it; cleanup is complete with no dangling references.
configurator/src/components/panels/TypographyPanel.svelte	Replaces 27-font curated dropdown with a datalist-backed autocomplete over 1,942 entries; adds Mono target for --sf-font-mono; widens multiplier slider range to 0.5–2 (coarser step 0.05 vs old 0.01); removes KNOBS_BY_DOMAIN/PowerKnobRow imports.
configurator/src/data/google-fonts.generated.json	Machine-generated 70 KB single-line JSON array of {f, c} objects (family + category); replaces the hard-coded 27-entry list.
configurator/src/lib/powerKnobs.ts	Removes the 'typography' domain (--sf-text-scale and --sf-text-display-scale knobs) since those tokens now have dedicated SliderRow controls; no remaining callers reference KNOBS_BY_DOMAIN['typography'].

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User types in autocomplete input] --> B{Selects font from datalist?}
    B -- Yes --> C[oninput fires / googleFontChoice = g.f]
    B -- No, typed directly --> C
    C --> D[Clicks target button: body / heading / mono]
    D --> E[customFontTarget updated]
    E --> F[Clicks 'Load & apply']
    F --> G[applyCustomFont fontName, target]
    G --> H[injectGoogleFont: appends link to document.head]
    H --> I{Target?}
    I -- body --> J["onSet('--sf-font-body', 'FontName, sans-serif')"]
    I -- heading --> K["onSet('--sf-font-heading', 'FontName, sans-serif')"]
    I -- mono --> L["onSet('--sf-font-mono', 'FontName, monospace')"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[User types in autocomplete input] --> B{Selects font from datalist?}
    B -- Yes --> C[oninput fires / googleFontChoice = g.f]
    B -- No, typed directly --> C
    C --> D[Clicks target button: body / heading / mono]
    D --> E[customFontTarget updated]
    E --> F[Clicks 'Load & apply']
    F --> G[applyCustomFont fontName, target]
    G --> H[injectGoogleFont: appends link to document.head]
    H --> I{Target?}
    I -- body --> J["onSet('--sf-font-body', 'FontName, sans-serif')"]
    I -- heading --> K["onSet('--sf-font-heading', 'FontName, sans-serif')"]
    I -- mono --> L["onSet('--sf-font-mono', 'FontName, monospace')"]

Loading

Comments Outside Diff (1)

1. configurator/src/components/panels/BordersPanel.svelte, line 274-277 (link)

   The focus ring preview element now shows static "Focus preview" text, whereas the old MiscPanel implementation used a reactive expression (Focus ring · {focusRingStyle}) so the text updated to reflect the active style. The visual outline still changes correctly via CSS variables, but the text label no longer confirms which style is selected. Adding a reactive expression restores that confirmation without needing a new state variable.

   Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

_{Reviews (1): Last reviewed commit: "fix(configurator): dedupe cross-panel co..." | Re-trigger Greptile}