fix(configurator): tabbed Basic/Advanced UI, dark-mode preview, display scale

[jackgranatowski]

This pull request was created by @kiro-agent on behalf of @jackgranatowski 👻

Comment with /kiro fix to address specific feedback or /kiro all to address everything.
_{Learn about Kiro Web}

---

Summary

Audit of the framework's sync state plus three configurator fixes the user asked for. Scope is the framework configurator only — the WP plugin is intentionally untouched (to be done in a later session).

1. Sync audit (findings)

• Everything was in sync except the configurator's generated catalogue, whose framework-version stamp was stale (0.5.30 → should be 0.5.31). The v0.5.31 release commit bumped versions but didn't re-run a full npm run build (which runs configurator:sync). Re-synced here. CI's check-version-sync.js already guards this.
• All indexes (api-index, token-index, registry, token/class references) regenerate with zero diff from source CSS — in sync.
• Test data is current: all 56 Node regression tests pass against freshly regenerated source. Fixed one stale comment ("769-token surface" → count-agnostic; the real surface is 798). The Playwright .spec.js suites need a browser and weren't run in this environment.

2. Dark-mode preview fix

The preview seeded all :root light-dark() defaults onto a non-root stage element and only flipped color-scheme. Per the framework's own core/themes.css, inherited light-dark() custom properties are not re-evaluated that way — which is exactly why the framework re-declares every mode-sensitive token under [data-theme="dark"]. We now resolve light-dark(light, dark) ourselves per theme (new lib/lightdark.js, unit-tested), reproducing the [data-theme] behavior on every engine. This also fixes dark-mode resolution in the WCAG probes.

3. Scale generator — display fonts

Added the Display ramp (--sf-text-display-{s,m,l}, base 2.4–3rem, indices 0/1/2 sharing the text ratio, matching core/tokens.css). The shared scale.js is a byte-for-byte parity module with the plugin, so display steps live in the component (exactly how the plugin does it) — parity preserved. A new kinds prop lets tabs scope the generator (Typography → type+display, Spacing → space).

4. Tabbed Basic/Advanced restructure (parity with the plugin)

The plugin admin app already had tabs + advanced disclosure; the configurator was a flat token list. Brought it to parity:

• Domain tabs: Typography, Spacing, Colors, WCAG, Layout, Borders, Shadows, Motion, More (lib/domains.js classifier covers 100% of tokens — More catches strays so nothing is hidden).
• Global Basic/Advanced toggle in the header. Basic = curated essentials + the basic generator; Advanced = essentials + all generators + the full, searchable domain catalogue.
• New: TabNav (with per-domain override-count badges), DomainPanel. Reuses the existing TokenRow/TokenEditor/OklchPicker/WcagPanel. Removed the now-unused Sidebar.

Testing

• npm run build (framework + configurator) — clean, no Svelte warnings.
• Configurator unit tests: 52 pass (42 existing + 10 new for the light-dark resolver).
• Framework Node regression suite: 56 pass. check-version-sync OK.
• Dark-mode correctness verified by token-derivation analysis: every mode-sensitive token either uses light-dark() (resolved) or derives from a base that does.

Notes / limitations

• No headless browser was available here, so the live UI wasn't visually smoke-tested — worth a quick local npm run dev in configurator/ to eyeball the tabs and dark preview.
• Domain bucketing is heuristic (name-based); a handful of edge tokens (e.g. scrollbar-*) may land in an adjacent tab. Easy to retune in lib/domains.js.

Summary by CodeRabbit

• New Features

  • Domain-centric interface with horizontal tabs for organizing tokens by category
  • Complexity mode toggle (Basic/Advanced) for simplified or detailed editing experiences
  • Display ramp support added to scale generator alongside existing type and space ramps
  • Override count badges displayed on domain tabs

• Improvements

  • Preview theme control relocated to header for easier access
  • Enhanced token search and filtering capabilities
  • Optimized responsive layout for smaller screens

[coderabbitai]

Warning

Review limit reached

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

More reviews will be available in 39 minutes and 10 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

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.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0c96890c-3c93-489c-86ae-b39dd3f879b4

📥 Commits

Reviewing files that changed from the base of the PR and between af3b76a and b3ec7f2.

📒 Files selected for processing (2)

• configurator/src/lib/lightdark.js
• configurator/tests/lightdark.test.js

📝 Walkthrough

Walkthrough

The configurator transitions from a token-list view driven by sidebar category selection to a domain-tabbed interface where each domain renders customized token editors and generators. Dark-mode CSS light-dark() expressions are now explicitly resolved during live preview. The store shape, app routing, header navigation, and component hierarchy are rebuilt accordingly.

Changes

Domain-centric UI and preview system

Layer / File(s)	Summary
Domain classification and metadata configurator/src/lib/domains.js	RULES regex rules classify tokens by domain id; DOMAINS array provides per-domain essentials and generator hints; DOMAIN_BY_ID map enables quick lookup.
Light/dark CSS value resolution configurator/src/lib/lightdark.js, configurator/src/lib/model.js, configurator/tests/lightdark.test.js	splitTopLevelArgs and resolveLightDark parse and resolve light-dark(light, dark) CSS branches; hasTopLevelSpace detects composite values; full test suite validates parsing and branch selection.
UI state store update configurator/src/lib/store.svelte.js	UI state shape changed from view/activeCategory/showAdvanced to domain/mode for tab-driven navigation and complexity-mode toggling.
App layout and domain routing configurator/src/App.svelte	Derives active domain and tool status; conditionally renders WcagPanel or DomainPanel by ui.domain; resets search on domain change; updates layout grid and TabNav/OutputPanel wiring.
Header complexity and theme controls configurator/src/components/Header.svelte	Views navigation replaced with Basic/Advanced mode toggle and Light/Dark preview theme toggle; updated CSS from .hdr__views to .hdr__mode and .hdr__theme controls.
Domain tab strip component configurator/src/components/TabNav.svelte	Renders horizontal domain tabs from DOMAINS, computes per-domain override counts reactively via domainOf token resolution, updates ui.domain on selection with optional badge display.
Domain-specific token editing panel configurator/src/components/DomainPanel.svelte	Renders domain essentials, basic generators, and advanced token catalogue with search/filter UI conditional on ui.mode; groups and filters tokens by internal/modified/query constraints; shows empty/hint states.
Three-ramp scale generator with kinds prop configurator/src/components/ScaleGenerator.svelte	Added kinds prop to expose type/display/space ramps via segmented control; derives steps and defaults from first selected kind; updates preview rows and grid column width.
Preview declaration with light/dark resolution configurator/src/lib/preview.js	buildPreviewDeclarations now resolves light-dark(light, dark) expressions for framework tokens and override values using resolveLightDark with the chosen theme.
Preview hint and theme indicator configurator/src/components/Preview.svelte	Replaced interactive theme toggle with inline hint text displaying current ui.previewTheme and directing theme changes to header; updated CSS for .preview__hint styling.
Copy updates and test docs configurator/src/components/WcagPanel.svelte, tests/api-index-sync.test.js	WcagPanel instructions updated to direct theme switching from header; test comment generalized to drop hard-coded token count reference.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

🚥 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 PR title clearly summarizes three main changes: tabbed UI architecture, Basic/Advanced complexity modes, dark-mode preview support, and display scale support. It is concise, specific, and aligns well with the primary objectives.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/configurator-tabs-darkmode-display

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@configurator/src/lib/lightdark.js`:
- Around line 73-76: The current parentheses depth scan loop (using variables i,
value, depth) ignores quoted strings so parentheses inside quotes prematurely
change depth; modify the loop to track quote context (e.g., a variable like
inQuote or quoteChar) and toggle it when encountering unescaped single or double
quotes, ignore '(' and ')' when inQuote is set, and handle escape characters
(backslash) so escaped quotes don't toggle the quote state; update the loop that
advances i and adjusts depth to consult the quote state while preserving
existing behavior when not quoted.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b02db84e-49e4-4ed8-8b6b-cdc3952d160a

📥 Commits

Reviewing files that changed from the base of the PR and between b577958 and af3b76a.

📒 Files selected for processing (15)

• configurator/src/App.svelte
• configurator/src/components/DomainPanel.svelte
• configurator/src/components/Header.svelte
• configurator/src/components/Preview.svelte
• configurator/src/components/ScaleGenerator.svelte
• configurator/src/components/Sidebar.svelte
• configurator/src/components/TabNav.svelte
• configurator/src/components/WcagPanel.svelte
• configurator/src/lib/domains.js
• configurator/src/lib/lightdark.js
• configurator/src/lib/model.js
• configurator/src/lib/preview.js
• configurator/src/lib/store.svelte.js
• configurator/tests/lightdark.test.js
• tests/api-index-sync.test.js

💤 Files with no reviewable changes (1)

• configurator/src/components/Sidebar.svelte