feat(configurator): Basic/Advanced/Power IA restructure - #311
Merged
Conversation
…ers) Full proposal for reorganising the configurator's information architecture, inspired by the panel DX of Automatic.css 4.0 adapted to SLASHED's buildless model: - Basic mode becomes a curated per-project checklist: 11 main colors, fluid type/space generators, basic layout/border/shadow options - Quick Knobs (global multipliers) demoted out of Basic into a fenced 'Power knobs' group inside Advanced - Generators write fluid-engine scalars instead of baked clamp() output - Home/checklist screen, per-panel intro copy, friendly labels with raw-token info popovers - Five implementation phases with file-level targets https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
…reen Phase 1 of the Basic/Advanced/Power IA restructure: - Quick Knobs no longer render in Basic; they move to a collapsed, warning-styled 'Power knobs' group at the bottom of each Advanced panel, with per-domain powerIntro copy explaining their reach - Basic sidebar shows only the per-project checklist (6 domains + Themes) plus a new Home row - New Home screen: setup checklist with per-domain customised counts and an 'Export CSS' shortcut into the output drawer - Basic search now renders curated-surface hits and offers an 'N more matches in Advanced' switch that preserves the query - Per-domain intro copy on Basic panels - Essentials sync fixes: +--sf-font-weight-heading, +--sf-color-border, --sf-space-content -> --sf-content-gap (canonical knob), --sf-radius-full demoted to Advanced - Output drawer expansion lifted into the shared ui store - domains tests extended: basic ids, intro/powerIntro presence, knob tokens verified against the catalogue https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
Phase 2 of the Basic/Advanced/Power IA restructure: - New lib/basics.js: single source of truth for the curated Basic surface — grouped controls with friendly labels and help text for typography, spacing, layout, borders and shadows (colors keep the 11 brand/status pair rows) - domains.js essentials now derive from basics.js, so the curated card and the search surface can never drift apart - TokenRow gains optional label/help/showRawInfo props: Basic rows render a friendly title with an i-popover revealing the raw token name (click-to-copy), catalogue description, framework default and 'drives N' reach; Advanced rows are untouched - DomainPanel Basic branch renders the curated groups as cards - New tests/basics.test.js: every curated control must exist in the catalogue with a non-empty default, labels unique, help present, essentials in lockstep with basics.js https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
Phase 3 of the Basic/Advanced/Power IA restructure: - New lib/fluidEngine.js: the framework derives every fluid step live from registered scalars (pow() inside clamp()), so the generator now writes those scalars in one history step instead of baking nine per-step clamp() expressions. Defaults are cleared rather than written; the ramp's per-step tokens are nulled in the same patch so previously baked overrides can't mask the live engine - ScaleGenerator: seeds knobs from live overrides, disables ratio selects on the display ramp (shared with the type scale), surfaces the shared-viewport warning, adds a 'Reset viewport range' affordance; falls back to the old per-step path only when a scalar is missing from the catalogue - New lib/stylePresets.js + StylePresetRow: one-click Corner style (Sharp/Subtle/Rounded/Pill) and Shadow style (None/Subtle/Soft/ Strong) rows on the Basic borders/shadows panels — single undo step, radius values keep the --sf-radius-scale factor, shadow presets steer --sf-shadow-strength preserving the dark-mode boost - New tests: fluid-engine (scalar existence + default parity + patch semantics), style-presets (token existence, sanitiser round-trip, one all-null default per list, uniform key sets); knob default parity added to the existing registry suite https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
Phase 4 of the IA restructure (orientation polish): - Each token domain links to its framework doc (docs/theming.md, docs/layout.md, docs/motion.md, docs/tokens.md) from the panel footer - The header 'modified' pill becomes a button: 'N customised — Export CSS' opens and scrolls to the output drawer https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
Phase 5 of the IA restructure: - IA-REDESIGN.md rewritten as the as-shipped architecture record with generic phrasing throughout (no competitor product names) - ROADMAP.md: vendor mention replaced with generic phrasing; new 'Shipped' section for the Basic/Advanced/Power restructure - README.md: feature list refreshed (Basic checklist, Power knobs, scalar-writing generators, style presets) and the framework-upgrade ritual documented (npm run sync && npm test) - New guard test in smoke.test.js scans every authored .md/.svelte/.js under configurator/ and fails on any vendor name, enforcing the constraint permanently https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
Regenerated by scripts/bundle.js during the test run; the committed values (52.7/64.1 kB) were stale — the minified bundles gzip to 15.3/19.3 kB, verified independently with zlib. https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
|
Warning Review limit reached
More reviews will be available in 26 minutes and 11 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe PR implements a tiered Basic/Advanced/Power UI redesign for the configurator. It introduces a curated Basic token surface organized per domain, a Home landing page showing domain checklists, fluid engine integration for scalar-based scale generation, one-click style presets for borders/shadows, and comprehensive test lockstep coverage to synchronize with the framework's token catalogue. ChangesConfigurator Basic/Advanced/Power IA Redesign
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
configurator/IA-REDESIGN.md (1)
18-18: ⚡ Quick winHardcoded token count could drift.
The "841 tokens" is a snapshot value that will become stale as the framework evolves. The test suite validates token existence and structure but does not assert this specific total. Consider either removing the exact count ("all tokens reachable") or adding a comment indicating it reflects the count at implementation time.
🤖 Prompt for 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. In `@configurator/IA-REDESIGN.md` at line 18, Update the sentence that reads "all 841 tokens reachable" so it doesn't hardcode a mutable token count: either remove the numeric total entirely or change it to a time‑scoped note such as "all tokens reachable (841 at time of writing)"; edit the phrase "all 841 tokens reachable" in IA‑REDESIGN.md to reflect one of these options so the document won't drift as the token set changes.configurator/tests/smoke.test.js (1)
117-143: ⚡ Quick winConsider expanding the skip list and vendor regex.
The current implementation skips
node_modules,dist, and.svelte-kit, which covers common build artifacts. However, consider:
- Additional directories: You may want to skip
coverage/,.git/,build/, or any other generated/cache directories.- Vendor regex scope: The pattern
/\bacss\b|automatic\.css/ispecifically targets one competitor. If the goal is vendor neutrality more broadly, document whether other product names should be added or if this is intentionally scoped.- Generated files within src: The skip logic excludes directories but not individual generated files (e.g.,
api-index.generated.json). If generated data files might contain vendor references from upstream sources, consider filtering by filename patterns as well.💡 Optional enhancement
- const SKIP_DIRS = new Set(['node_modules', 'dist', '.svelte-kit']); + const SKIP_DIRS = new Set(['node_modules', 'dist', '.svelte-kit', 'coverage', '.git', 'build']);And consider adding a comment documenting the vendor regex scope:
+ // Product constraint: configurator stays vendor-neutral. This regex targets + // known competitor product names that should never appear in authored content. const VENDOR_RE = /\bacss\b|automatic\.css/i;🤖 Prompt for 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. In `@configurator/tests/smoke.test.js` around lines 117 - 143, The test's SKIP_DIRS and VENDOR_RE are too narrow: update the SKIP_DIRS Set (referenced in SKIP_DIRS) to include additional generated/cache dirs like 'coverage', '.git', 'build' (and any project-specific generated folders) and adjust the file-filtering in walk (function walk) to ignore common generated filenames (e.g., *.generated.*, api-index.generated.json) or add a filename skip check; also expand or document VENDOR_RE (the regex VENDOR_RE) to include other vendor product names you want to ban or add a comment describing its intentional scope so the test 'no vendor / competitor product names in authored files' reflects broader vendor-neutral requirements.
🤖 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/fluidEngine.js`:
- Around line 94-97: The num(v) helper currently does
String(parseFloat(Number(v).toFixed(4))) which first rounds to 4 decimals then
strips trailing zeros; if you need to preserve exactly four decimal places
change num to return Number(v).toFixed(4) (and coerce/validate v as a number) so
values like 1.99995 -> "2.0000" and 1.00001 -> "1.0000"; if instead you want to
keep up-to-4-decimal trimmed formatting, keep the current logic but add a
comment documenting that parseFloat intentionally strips trailing zeros.
Reference: function num in fluidEngine.js.
---
Nitpick comments:
In `@configurator/IA-REDESIGN.md`:
- Line 18: Update the sentence that reads "all 841 tokens reachable" so it
doesn't hardcode a mutable token count: either remove the numeric total entirely
or change it to a time‑scoped note such as "all tokens reachable (841 at time of
writing)"; edit the phrase "all 841 tokens reachable" in IA‑REDESIGN.md to
reflect one of these options so the document won't drift as the token set
changes.
In `@configurator/tests/smoke.test.js`:
- Around line 117-143: The test's SKIP_DIRS and VENDOR_RE are too narrow: update
the SKIP_DIRS Set (referenced in SKIP_DIRS) to include additional
generated/cache dirs like 'coverage', '.git', 'build' (and any project-specific
generated folders) and adjust the file-filtering in walk (function walk) to
ignore common generated filenames (e.g., *.generated.*,
api-index.generated.json) or add a filename skip check; also expand or document
VENDOR_RE (the regex VENDOR_RE) to include other vendor product names you want
to ban or add a comment describing its intentional scope so the test 'no vendor
/ competitor product names in authored files' reflects broader vendor-neutral
requirements.
🪄 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: be8fc19a-1014-4697-ad8b-b38d4e129b66
⛔ Files ignored due to path filters (2)
dist/badge-essential.jsonis excluded by!**/dist/**dist/badge-optimal.jsonis excluded by!**/dist/**
📒 Files selected for processing (23)
configurator/IA-REDESIGN.mdconfigurator/README.mdconfigurator/ROADMAP.mdconfigurator/src/App.svelteconfigurator/src/components/DomainPanel.svelteconfigurator/src/components/Header.svelteconfigurator/src/components/Home.svelteconfigurator/src/components/OutputPanel.svelteconfigurator/src/components/ScaleGenerator.svelteconfigurator/src/components/Sidebar.svelteconfigurator/src/components/StylePresetRow.svelteconfigurator/src/components/TokenRow.svelteconfigurator/src/lib/basics.jsconfigurator/src/lib/domains.jsconfigurator/src/lib/fluidEngine.jsconfigurator/src/lib/store.svelte.jsconfigurator/src/lib/stylePresets.jsconfigurator/tests/basics.test.jsconfigurator/tests/domains.test.jsconfigurator/tests/fluid-engine.test.jsconfigurator/tests/smoke.test.jsconfigurator/tests/style-presets.test.jsconfigurator/tests/themes.test.js
- fluidEngine num(): document the intentional trailing-zero stripping (trimmed form matches framework defaults; entry() compares numerically) - smoke vendor-guard: widen the dir skip list (build, coverage, .git, test-results) and document the regex scope - IA-REDESIGN.md: time-scope the token count so the doc can't drift https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
This was referenced Jun 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restructures the configurator's information architecture so Basic mode is a per-project checklist and the atomic-reach controls are fenced away — following the conventions that make the best framework configurators approachable, adapted to SLASHED's buildless model (no save/regenerate cycle; every edit is a live override with instant preview and CSS export).
Basic = per-project checklist
src/lib/basics.js, single source of truth): friendly labels ("Content width", not--sf-container-default), help text, and an ⓘ popover revealing the raw token name (click-to-copy), description, default and "drives N" reach.Power knobs out of Basic
--sf-space-scaledrives 45 tokens,--sf-shadow-strength14, …) no longer render in Basic. They move to a collapsed, warning-styled ⚡ Power knobs group at the bottom of each Advanced panel, with per-domain warning copy.Generators write the live fluid engine
core/tokens.cssderives every fluid step at use-time from registered scalars, so the scale generators now write those scalars (src/lib/fluidEngine.js) in one history step instead of baking nine per-stepclamp()expressions. Defaults are cleared rather than written; per-step tokens are nulled in the same patch so stale baked overrides can't mask the engine.One-click style presets
* var(--sf-radius-scale)so the power knob stays live) and Shadow style (None / Subtle / Soft / Strong — steer--sf-shadow-strength, preserving the dark-mode boost). Single undo step; presets null what they don't set so they never mask each other.Framework sync enforced by tests
basics,fluid-engine,style-presets) + knob default-parity pin every curated control, preset patch and engine scalar to the live catalogue. Upgrade ritual:npm run sync && npm test— a vanished token or drifted default fails CI instead of rendering a dead control.Docs
IA-REDESIGN.mdrewritten as the as-shipped architecture record; ROADMAP + README refreshed.Testing
cd configurator && npm test— 345/345 (node --test)tests/api-index-sync.test.js— greennpm run build— cleanhttps://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT
Generated by Claude Code
Summary by CodeRabbit
Release Notes
New Features
Documentation