Configurator v2: dogfooded chrome, shareable URLs, bundle picker, SVG icons & preview-first panels - #374
Merged
Conversation
…anels Replace the emoji domain icons with a self-contained inline-SVG stroke set (Icon.svelte + lib/icons.js) that inherits the dogfooded theme colour via currentColor — no binary assets. Swap at every render site (sidebar, home, panel header) and add the Overview "home" glyph. Make the inline live preview the FIRST thing in every token category and open by default (Colors leads with its Semantic-roles map for parity), instead of a collapsed card near the bottom of the settings zone. Fix the Layout preview, which was useless: container max-widths all dwarf the editor panel, so the old `min(100%, var())` clamp rendered all four bars identical. Measure each container's resolved width via hidden probes carrying the live cascade and draw bars to true relative scale (with px labels), plus aspect-ratio tiles and real-size sizing swatches (header/touch/icon). Enrich the Effects preview: opacity shown as a real UI state and a scrim-gradient sample. Tests: new icon tripwire (every domain icon resolves, no emoji leaks); layout preview asserts proportional probes + aspect/sizing tiles; e2e updated for the open, preview-first, distinct-width behaviour. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
📝 WalkthroughWalkthroughIntroduces an ChangesSVG Icon System and Lead Preview Card
Sequence Diagram(s)sequenceDiagram
participant User
rect rgba(70, 130, 180, 0.5)
Note over User,DomainPanel: Open domain panel
end
User->>DomainPanel: click domain in Sidebar
DomainPanel->>DomainPanel: render lead <details open> card
DomainPanel->>DomainPreview: pass previewSpec + cascade styles
rect rgba(100, 160, 100, 0.5)
Note over DomainPreview,ProbeEls: Layout domain only
end
DomainPreview->>ProbeEls: mount hidden probe elements
ProbeEls-->>DomainPreview: getBoundingClientRect() pixel widths
DomainPreview->>DomainPreview: compute percentages per container token
DomainPreview-->>User: visible stage (bar fills, ratio tiles, sizing swatches, opacity chips, scrim)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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 docstrings
🧪 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.
🧹 Nitpick comments (1)
configurator/tests-e2e/domain-preview.spec.js (1)
40-52: 🧹 Nitpick | 🔵 Trivial | 💤 Low valueConsider stricter distinctness assertion for robustness.
The current test verifies at least 2 distinct widths exist, which correctly catches the regression where all containers clamped to identical widths. However, with 4 container tokens of different sizes, you'd typically expect 3-4 distinct widths.
Consider strengthening line 51 to check for at least 3 distinct values:
expect(new Set(widths.map((w) => Math.round(w))).size, 'most widths are distinct').toBeGreaterThanOrEqual(3);This would provide higher confidence that proportional scaling is working correctly across all containers, not just that they're not all identical.
That said, the current assertion is sufficient for the stated goal of preventing the clamp-to-100% regression.
🤖 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-e2e/domain-preview.spec.js` around lines 40 - 52, Strengthen the distinctness assertion in the test to ensure higher confidence in proportional scaling across all containers. Locate the expect statement at line 51 that checks the size of the Set of rounded widths using toBeGreaterThan(1), and change it to use toBeGreaterThanOrEqual(3) instead. This verifies that at least 3 out of 4 container widths are distinct, rather than just confirming they're not all identical. Optionally update the assertion message from 'widths are not all identical' to 'most widths are distinct' for better clarity.
🤖 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.
Nitpick comments:
In `@configurator/tests-e2e/domain-preview.spec.js`:
- Around line 40-52: Strengthen the distinctness assertion in the test to ensure
higher confidence in proportional scaling across all containers. Locate the
expect statement at line 51 that checks the size of the Set of rounded widths
using toBeGreaterThan(1), and change it to use toBeGreaterThanOrEqual(3)
instead. This verifies that at least 3 out of 4 container widths are distinct,
rather than just confirming they're not all identical. Optionally update the
assertion message from 'widths are not all identical' to 'most widths are
distinct' for better clarity.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: b4011d3b-415d-472a-995f-995ed40b316b
📒 Files selected for processing (11)
configurator/src/components/DomainPanel.svelteconfigurator/src/components/DomainPreview.svelteconfigurator/src/components/Home.svelteconfigurator/src/components/Icon.svelteconfigurator/src/components/Sidebar.svelteconfigurator/src/lib/domainPreviews.jsconfigurator/src/lib/domains.jsconfigurator/src/lib/icons.jsconfigurator/tests-components/domain-preview.test.jsconfigurator/tests-components/icon.test.jsconfigurator/tests-e2e/domain-preview.spec.js
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 11 files
You’re at about 95% of the monthly reviewed-line limit. You may want to disable incremental reviews to conserve quota. Reviews will continue until that limit is exceeded. If you need help avoiding interruptions, please contact contact@cubic.dev.
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.
Configurator v2
Evolves the existing, well-tested configurator into a living showcase of SLASHED. The tested core logic (
model.js,css.js,color.js,contrast.js,fluidEngine.js,historyOps.js) is preserved; this PR layers on the v2 workstreams.What's in here
Dogfood the chrome — the UI is now built from SLASHED's own tokens.
app.cssdefines its--cfg-*names as aliases onto--sf-*(--cfg-bg: var(--sf-color-bg),--cfg-accent: var(--sf-color-primary), …), the chrome theme flips the framework's own[data-theme], and user overrides stay scoped to the preview stage (never:root).Shareable config URLs —
share.js+codec.jsencode the override map into a compact binary config code in the URL, so a configuration is bookmarkable/shareable with no deploy.Bundle / module picker — an Install panel (
bundles.js,BundlePicker.svelte) reads an auto-syncedbundles.generated.json(frombundle.config.jsonviasync-api.mjs) and emits a complete drop-in<link>/@importsnippet plus the override layer.Inline SVG icon set — replaces every emoji domain/nav icon with a single self-contained stroke sprite (
Icon.svelte+lib/icons.js) that inherits theme color viacurrentColor. No binary assets, no icon font.Useful, preview-first domain panels — each token category now opens with its live preview as the first, expanded element (Colors leads with Semantic roles). The Layout preview was rebuilt: container widths now render to true relative scale (computed proportionally instead of all clamping to 100%), alongside aspect-ratio tiles and real-dimension sizing swatches. Effects gained a realistic opacity/scrim demo.
Test hardening — vitest component tests (incl. a new icon-coverage test),
@axe-core/playwrighta11y checks, firefox + webkit cross-browser projects, a curation tripwire (check-curation.mjs) that flags uncurated public knobs, and an updated domain-preview e2e spec. CI runs the full matrix.Verification
cd configurator && npm test(unit + component) andnpm run test:e2e(flows + a11y + cross-browser) green locally.npm run check:versiongreen — no version bump; configurator stays pinned to the root framework version.🤖 Generated with Claude Code
Generated by Claude Code
Summary by cubic
Replaced emoji icons with a self-contained inline SVG set and made every token panel preview-first. Rebuilt the Layout preview to show true relative widths, with new ratio and sizing samples.
Icon.svelte+lib/icons.js; used in sidebar, home, and panel headers. Inherits theme viacurrentColor. No icon font.Written for commit 8c42293. Summary will update on new commits.
Summary by CodeRabbit
New Features
Style