chore(dist): update gzip size badges to reflect unminified bundles - #314
Conversation
Auto-generated by scripts/bundle.js — falls back to unminified CSS when .min.css is absent, so badge sizes reflect the non-minified gzip footprint. https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
…r + draggable pane widths
## Bug fix: isFontFamilyToken was too broad
`--sf-font-weight-heading`, `--sf-font-features`, `--sf-font-numeric` and
`--sf-font-variation` all share namespace `font` and the `--sf-font-` prefix.
The old check classified them as font-family tokens, so the Typography panel's
"Heading weight" row showed the System/Manual stack picker and a preview line
("Ag — The quick brown fox jumps") instead of a plain text input.
Fix: narrow `isFontFamilyToken` to exclude `weight-*`, `features`, `numeric`
and `variation` via a tighter name-pattern regex. The syntax annotation
`<font-family>` remains the primary signal; the name pattern is the secondary.
Updated `tests/fonts.test.js` to reflect the corrected contract (namespace
alone is not sufficient — font-weight tokens prove it) and added explicit
assertions for every excluded token family.
## Feature: draggable pane widths
All three desktop panes (sidebar, main, live preview) now have variable
widths driven by pointer-captured drag handles:
- Two 6 px `resizer` columns are inserted into the CSS grid between
sidebar/main (`rs1`) and main/preview (`rs2`).
- Widths are stored in `$state` (sidebarWidth, previewWidth) and persisted
in localStorage under `slashed-configurator/pane-widths/v1`.
- Sidebar min/max: 160–500 px · Preview min/max: 260–680 px.
- At ≤ 1100 px the preview becomes a slide-over overlay and the resizers
are hidden; the 1 px left border on `.main` is restored via media query.
- `shell--dragging` class applies `cursor: col-resize` globally during a
drag so the cursor does not flicker when the pointer outruns the handle.
- Double-collapsed state (`--no-sidebar --no-preview`) collapses to the
plain 2-column icon-rail layout unchanged.
https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughAdds pointer-driven, persisted sidebar and preview pane resizing with CSS Grid wiring and responsive breakpoint behavior; tightens font-family token detection and updates tests to match. ChangesInteractive pane resizing system
Font token classification refinement
Sequence DiagramsequenceDiagram
participant User as User pointer event
participant Resizer as Resizer element
participant Handler as onPointerDown/onPointerMove
participant State as sidebarWidth/previewWidth
participant Storage as localStorage
Resizer->>Handler: pointerdown
Handler->>Handler: setPointerCapture
Handler->>State: set draggingPane
User->>Resizer: pointermove
Resizer->>State: update pane width
User->>Resizer: pointerup
Resizer->>Handler: pointerup
Handler->>State: clear draggingPane
Handler->>Storage: persist width
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
configurator/tests/fonts.test.js (1)
41-42: 💤 Low valueConsider adding test case for underscore separator in weight tokens.
The regex pattern includes
weight[-_]to match both hyphen and underscore separators, but the tests only verify hyphen-separated tokens (--sf-font-weight-heading,--sf-font-weight-bold). Consider adding a test case for--sf-font-weight_boldto verify the underscore variant is also excluded.📋 Suggested test case addition
assert.equal(isFontFamilyToken({ name: '--sf-font-weight-heading', namespace: 'font' }), false); assert.equal(isFontFamilyToken({ name: '--sf-font-weight-bold', namespace: 'font' }), false); + assert.equal(isFontFamilyToken({ name: '--sf-font-weight_bold', namespace: 'font' }), false); assert.equal(isFontFamilyToken({ name: '--sf-font-features', namespace: 'font' }), false);🤖 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/fonts.test.js` around lines 41 - 42, Add a test verifying the underscore variant is handled: the current tests for isFontFamilyToken only cover hyphen-separated weight tokens and miss the regex branch matching weight[_-]; update the test file (fonts.test.js) to include an assertion that isFontFamilyToken({ name: '--sf-font-weight_bold', namespace: 'font' }) returns false so the underscore-separated token is also excluded by the function.
🤖 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/App.svelte`:
- Around line 73-96: The drag state can remain stuck when the browser revokes
pointer capture; add onlostpointercapture handlers on both resizer elements to
call endResize so dragging is cleared and the .shell--dragging/cursor state is
removed. Locate the two resizer elements that use startResize/onResizeMove (the
sidebar and preview resizers) and add onlostpointercapture={endResize} to each,
ensuring endResize (already defined) is used to null out dragging and persist
widths.
---
Nitpick comments:
In `@configurator/tests/fonts.test.js`:
- Around line 41-42: Add a test verifying the underscore variant is handled: the
current tests for isFontFamilyToken only cover hyphen-separated weight tokens
and miss the regex branch matching weight[_-]; update the test file
(fonts.test.js) to include an assertion that isFontFamilyToken({ name:
'--sf-font-weight_bold', namespace: 'font' }) returns false so the
underscore-separated token is also excluded by the function.
🪄 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: ee83f78c-c2e7-44c6-877a-e48c2aae7680
⛔ 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 (3)
configurator/src/App.svelteconfigurator/src/lib/fonts.jsconfigurator/tests/fonts.test.js
- Preview default width 380→440px so viewport buttons fit without overflow
- PREVIEW_MIN 260→300px (floor consistent with bar content minimum)
- Add min-width:0;overflow:hidden to .preview to prevent it escaping its
grid column when resized narrow — fixes a11y e2e overflow assertions
- Add onlostpointercapture={endResize} to both resizer handles so drag
state clears if the browser revokes pointer capture (CodeRabbit)
- Add --sf-font-weight_bold underscore variant to isFontFamilyToken tests
https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
Auto-generated by scripts/bundle.js — falls back to unminified CSS when
.min.css is absent, so badge sizes reflect the non-minified gzip footprint.
https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
Summary by CodeRabbit
New Features
Bug Fixes
Style