Skip to content

chore(dist): update gzip size badges to reflect unminified bundles - #314

Merged
jackgranatowski merged 3 commits into
mainfrom
claude/loving-galileo-0197q7
Jun 12, 2026
Merged

chore(dist): update gzip size badges to reflect unminified bundles#314
jackgranatowski merged 3 commits into
mainfrom
claude/loving-galileo-0197q7

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

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

    • Sidebar and preview panes are now live, pointer-resizable; widths persist across sessions.
  • Bug Fixes

    • Improved font detection for more accurate font choices in the UI.
  • Style

    • Preview layout clipping and overflow handling improved for more stable rendering.

claude added 2 commits June 12, 2026 15:08
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
@coderabbitai

coderabbitai Bot commented Jun 12, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e8978544-76f8-41f7-8b19-5a72ed28f697

📥 Commits

Reviewing files that changed from the base of the PR and between 8be56ac and b3ca15a.

📒 Files selected for processing (3)
  • configurator/src/App.svelte
  • configurator/src/components/Preview.svelte
  • configurator/tests/fonts.test.js
✅ Files skipped from review due to trivial changes (1)
  • configurator/src/components/Preview.svelte
🚧 Files skipped from review as they are similar to previous changes (2)
  • configurator/tests/fonts.test.js
  • configurator/src/App.svelte

📝 Walkthrough

Walkthrough

Adds 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.

Changes

Interactive pane resizing system

Layer / File(s) Summary
Resize state and drag handlers
configurator/src/App.svelte
Width storage schema, clamped localStorage load/save, Svelte reactive pane widths and drag state, and pointer-capture handlers that update and persist widths.
Resizer elements and bindings
configurator/src/App.svelte
Adds conditional sidebar and preview resizer elements wired to shared handlers and exposes widths via inline CSS variables.
Grid layout and preview container updates
configurator/src/App.svelte, configurator/src/components/Preview.svelte
Refactors .shell to use --shell-sw/--shell-pw, adds modifier classes for no-preview/no-sidebar states, and updates .preview to min-width: 0; overflow: hidden.
Resizer visuals and interaction styles
configurator/src/App.svelte
Positions resizers via grid-area, disables touch-action, and implements centered divider visuals that change on hover/drag with dragging-mode cursor/user-select overrides.
Responsive breakpoint behavior
configurator/src/App.svelte
Hides .resizer at max-width:1100px and restores .main left border to preserve separation when the preview becomes an overlay.

Font token classification refinement

Layer / File(s) Summary
Token classification and test parity
configurator/src/lib/fonts.js, configurator/tests/fonts.test.js
isFontFamilyToken now returns true only for tokens with font-family syntax or a narrowly matched --sf-font-* name (negative-lookahead to exclude weight/features/numeric/variation); tests updated to assert the stricter behavior.

Sequence Diagram

sequenceDiagram
  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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • codeslash-dev/SLASHED#312: Both PRs modify the same component's narrow-viewport (≤1100px) preview behavior and layout/styling, with overlapping breakpoint logic.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Title check ⚠️ Warning The PR title mentions updating gzip size badges, but the actual changes involve sidebar/preview resizing, font-family token detection, and layout fixes with no modifications to gzip size badges or dist files. Update the PR title to accurately reflect the main changes: sidebar/preview resizer implementation with pointer capture, font-family token detection refinement, and layout overflow fixes.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
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 docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/loving-galileo-0197q7

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
configurator/tests/fonts.test.js (1)

41-42: 💤 Low value

Consider 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_bold to 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

📥 Commits

Reviewing files that changed from the base of the PR and between fcb5322 and 8be56ac.

⛔ Files ignored due to path filters (2)
  • dist/badge-essential.json is excluded by !**/dist/**
  • dist/badge-optimal.json is excluded by !**/dist/**
📒 Files selected for processing (3)
  • configurator/src/App.svelte
  • configurator/src/lib/fonts.js
  • configurator/tests/fonts.test.js

Comment thread configurator/src/App.svelte
- 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
@jackgranatowski
jackgranatowski merged commit 917d562 into main Jun 12, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants