feat: replace configurator with conf-v2 redesign, wire to framework - #418
Merged
Merged
Conversation
Archives the old configurator to configurator-archive/ and replaces it with the new Svelte 5 + Tailwind v4 studio redesign from conf-v2. Framework integration changes: - vite.config.js: inject __SLASHED_VERSION__, base './', fs.allow ['..'] - src/main.ts: import ../../core/*.css layers for chrome dogfooding - src/lib/codec.ts: read token-registry.generated.json (not tokens.json); version from __SLASHED_VERSION__ define (not hardcoded string) - src/App.svelte: read api-index.generated.json (not tokens.json) - src/components/shell/StudioHeader.svelte: version pill uses __SLASHED_VERSION__ - src/components/shell/PreviewPanel.svelte: import dist/slashed.full.css?raw at build time instead of fetching /slashed.full.css at runtime - package.json: slashed-configurator name, sync/predev/prebuild scripts, tailwind + svelte 5 + lucide deps, version matches root 0.6.16 All share URL (hash c=…), import/export, undo/redo, theme presets, and live preview features verified working after build. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017FGqcDvhJ6HEFpT7WRwqib
Rebuilt dist bundles during configurator v2 migration; badge reflects the updated gzip size of the optimal bundle after rebuild. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017FGqcDvhJ6HEFpT7WRwqib
|
Important Review skippedToo many files! This PR contains 190 files, which is 40 over the limit of 150. To get a review, narrow the scope: Upgrade to a paid plan to raise the limit. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (3)
📒 Files selected for processing (190)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ 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 |
PR Summary by QodoReplace configurator with conf-v2 Svelte 5/Tailwind Studio and framework wiring Description
Diagram
High-Level Assessment
Files changed (173)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
5 rules 1. Nested :root CSS
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
Comment on lines
+78
to
+84
| let styleEl = document.getElementById("sf-parent-overrides"); | ||
| if (!styleEl) { | ||
| styleEl = document.createElement("style"); | ||
| styleEl.id = "sf-parent-overrides"; | ||
| document.head.appendChild(styleEl); | ||
| } | ||
| styleEl.textContent = `:root {\n${fa(_ov, { mode: "root", banner: false })}\n}`; |
There was a problem hiding this comment.
1. Nested :root css 🐞 Bug ≡ Correctness
codec.fa({mode:"root"}) already returns a complete :root { ... } block, but both App and
PreviewPanel wrap it again, generating invalid CSS like :root { :root { ... } } so overrides may
not apply. This breaks both the parent-document override injection and the iframe preview override
updates.
Agent Prompt
### Issue description
`codec.fa(..., { mode: "root" })` returns a full `:root { ... }` rule, but callers wrap it in another `:root { ... }`, producing invalid CSS and preventing overrides from applying.
### Issue Context
This happens in both the parent document style injection (`sf-parent-overrides`) and the preview iframe (`slashed-overrides`).
### Fix Focus Areas
- configurator/src/App.svelte[69-85]
- configurator/src/components/shell/PreviewPanel.svelte[165-243]
- configurator/src/lib/codec.ts[161-178]
### Suggested fix
- In `App.svelte`, set `styleEl.textContent` to the output of `fa(_ov, { mode: "root", banner: false })` directly (no additional wrapper).
- In `PreviewPanel.svelte`, in both `buildIframeHTML()` and the `$effect` that updates `slashed-overrides`, write the `fa(..., { mode: "root" })` output directly into the style element (or alternatively switch `fa` to `mode:"layer"` and adjust surrounding CSS accordingly).
- Add a quick assertion/unit check (optional) that the generated style text does not contain `:root` twice at the top-level.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+4
to
+6
| import { fa } from '../../lib/codec'; | ||
| // Import the built framework CSS at Vite compile time — always in sync with dist. | ||
| import frameworkCSSStatic from '../../../../dist/slashed.full.css?raw'; |
There was a problem hiding this comment.
2. Missing dist css import 🐞 Bug ☼ Reliability
PreviewPanel build-imports ../../../../dist/slashed.full.css?raw, but dist/*.css is explicitly gitignored and not generated by the configurator’s predev/prebuild scripts, so Vite can fail to start/build on a clean checkout. This turns the studio into an order-dependent build that breaks when dist/ hasn’t been generated yet.
Agent Prompt
### Issue description
`configurator/src/components/shell/PreviewPanel.svelte` imports `dist/slashed.full.css?raw` at compile time, but the repo gitignores `dist/*.css`, and configurator scripts do not build/generate that file. This can break `npm run dev` / `npm run build` for the configurator on fresh clones.
### Issue Context
- `dist/*.css` is not tracked by git.
- Root build (`npm run build`) generates dist artifacts, but configurator predev/prebuild currently only sync API JSON.
### Fix Focus Areas
- configurator/src/components/shell/PreviewPanel.svelte[1-7]
- configurator/package.json[7-15]
- .gitignore[12-17]
- package.json[34-37]
### Suggested fix (choose one)
1) **Preferred (decouple from dist):** Replace the `dist/slashed.full.css?raw` import with a preview stylesheet built from source layers (e.g., import the needed `core/*.css` inputs and/or bundle them for the iframe), so preview works without prebuilding dist.
2) **If you must use dist:** Update `configurator` scripts (`predev`/`prebuild`) to generate `dist/slashed.full.css` (e.g., run the root bundling step) before starting Vite, and fail with a clear message if generation fails.
3) **Fallback approach:** Revert to runtime fetch with graceful error handling (so dev server can still run even if dist is missing), and optionally cache the CSS after first load.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
…tor v2 Lint CSS: - Exclude configurator-archive/** from stylelint (same treatment as configurator/**) to silence the 89 Tailwind/legacy CSS errors Configurator tests: - Add vitest + @playwright/test + @testing-library/svelte to devDependencies - Add test, test:unit, test:components, pretest:e2e, test:e2e, check:curation scripts to configurator/package.json - vitest.config.js: jsdom env, __SLASHED_VERSION__ define, both tests/ and tests-components/ included; playwright.config.js: 3 engines, preview server - tests/codec.test.js: encode/decode round-trip, URL-safety, error resilience - tests/css.test.js: sanitizeValue, generateCSS, parseCSS - tests/share.test.js: encodeOverrides/readShareFromHash/buildShareUrl round-trip - tests/smoke.test.js: api-index, token-registry, bundles data integrity - tests/curation.test.js: asserts every public knob has a home domain - tests-components/header.test.js: StudioHeader component rendering - tests-e2e/shell.spec.js: load, sidebar nav, undo/redo/share controls - src/lib/domains.ts: extract DOMAIN_PATTERNS from DomainPanel (shared source of truth); DomainPanel.svelte imports from it - src/lib/codec.ts: add named export aliases (encode, decode, sanitizeValue, generateCSS, parseCSS, encodeOverrides, buildShareUrl, readShareFromHash) - scripts/check-curation.mjs: replace broken domains.js import with inline DOMAIN_PATTERNS; fix isExplicitlyClassified to include misc; expand patterns to cover all 686 framework tokens (was 103 orphans, now 0) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017FGqcDvhJ6HEFpT7WRwqib
- Add src/vite-env.d.ts with vite/client reference and __SLASHED_VERSION__ ambient declaration, fixing two svelte-check errors: 1. PreviewPanel: ?raw import now typed via vite/client 2. StudioHeader: declare modifier no longer needed inline in <script> Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017FGqcDvhJ6HEFpT7WRwqib
PreviewPanel.svelte imports dist/slashed.full.css via Vite's ?raw query. The dist CSS files are gitignored and must be produced by `npm run build` at the repo root before the Vite build inside the Configurator tests job can succeed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017FGqcDvhJ6HEFpT7WRwqib
- loads with branding: scope to header element to avoid strict-mode violation when preview panel also renders "SLASHED Studio" text - clicking sidebar items: add data-testid="panel-heading" to the panel heading span in App.svelte; use that locator instead of getByText which matched 4 visually-uppercase "Colors" elements via CSS - share button: skip on Firefox/WebKit — grantPermissions clipboard-* is Chromium-only; the button itself is still wired and tested
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.
Archives the old configurator to configurator-archive/ and replaces it
with the new Svelte 5 + Tailwind v4 studio redesign from conf-v2.
Framework integration changes:
version from SLASHED_VERSION define (not hardcoded string)
at build time instead of fetching /slashed.full.css at runtime
tailwind + svelte 5 + lucide deps, version matches root 0.6.16
All share URL (hash c=…), import/export, undo/redo, theme presets, and
live preview features verified working after build.
Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_017FGqcDvhJ6HEFpT7WRwqib