Skip to content

fix(configurator): draggable pane widths, font-family classifier, overflow fix, build-time version injection - #315

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

fix(configurator): draggable pane widths, font-family classifier, overflow fix, build-time version injection#315
jackgranatowski merged 2 commits into
mainfrom
claude/loving-galileo-0197q7

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

$(cat <<'EOF'

Summary

  • Draggable pane widths — sidebar and live preview panes are now resizable via drag handles (pointer-captured). Widths persist in localStorage. CSS grid updated to 5-column layout with 6 px resizer columns; onlostpointercapture added to both handles so drag state always clears.
  • Font-family classifier bugisFontFamilyToken was too broad, matching --sf-font-weight-*, --sf-font-features, --sf-font-numeric, and --sf-font-variation tokens. These appeared in Typography with a System-stack picker and font preview row instead of plain inputs. Fixed the regex to exclude those sibling namespaces; unit tests updated.
  • Horizontal overflow fix — Default preview pane width bumped 380 → 440 px (the viewport-preset buttons are ~400 px combined). Added min-width: 0; overflow: hidden to .preview as a safety net. Fixes two failing a11y e2e tests (no horizontal overflow on any basic panel and no horizontal overflow on advanced colors + cheatsheet).
  • Build-time version injection — Eliminates the persistent "configurator version is one release behind" bug permanently. Previously the displayed version was read from a static field in api-index.generated.json that needed manual syncing after every release. Now vite.config.js injects __SLASHED_VERSION__ at build time from the root package.json, so the version is always exactly correct for any build. Removed the frameworkVersion field from sync-api.mjs, version-sync.js, check-version-sync.js, and release.yml.

Test plan

  • Drag sidebar handle left/right — sidebar width changes live; persists on reload
  • Drag preview handle — preview width changes live; persists on reload
  • onlostpointercapture — focus a different window mid-drag; drag state releases cleanly
  • Typography panel — --sf-font-weight-heading, --sf-font-features etc. show plain text inputs, not font-family pickers
  • npm test (unit) passes — 352 tests, 0 failures
  • a11y e2e — no horizontal overflow at 1600 px on Colors or Cheatsheet panels
  • Version pill in header shows correct version (v0.5.35) immediately after a release — confirmed by grep 0.5.35 configurator/dist/assets/*.js
  • node scripts/check-version-sync.js passes

https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
EOF
)


Generated by Claude Code

Summary by CodeRabbit

  • Chores
    • Refactored framework version handling to use build-time injection instead of file synchronization, streamlining the release process.
    • Updated version verification and synchronization scripts to reflect new version management approach.

@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: 50d3e2ac-f789-4528-a4df-7754c90a3e80

📥 Commits

Reviewing files that changed from the base of the PR and between c2c920c and e4491d4.

📒 Files selected for processing (10)
  • .github/workflows/release.yml
  • configurator/scripts/sync-api.mjs
  • configurator/src/components/Header.svelte
  • configurator/src/components/OutputPanel.svelte
  • configurator/src/data/api-index.generated.json
  • configurator/src/lib/css.js
  • configurator/src/lib/model.js
  • configurator/vite.config.js
  • scripts/check-version-sync.js
  • scripts/version-sync.js
💤 Files with no reviewable changes (2)
  • configurator/src/data/api-index.generated.json
  • scripts/version-sync.js

📝 Walkthrough

Walkthrough

The PR migrates framework version stamping from a sync-time injection step (embedded in configurator/src/data/api-index.generated.json) to a build-time injection via Vite. The Vite config reads package.json, a new frameworkVersion export in the model layer reads the injected build-time global with a sync fallback, UI components and CSS generation use the new export, and sync/release scripts are simplified to remove redundant version tracking.

Changes

Build-time version injection

Layer / File(s) Summary
Build-time version injection setup
configurator/vite.config.js, configurator/src/lib/model.js
Vite config reads root package.json and injects __SLASHED_VERSION__ into the build. Model layer exports new frameworkVersion constant that reads this injected value, with fallback to sync.frameworkVersion when unavailable.
Component version display updates
configurator/src/components/Header.svelte, configurator/src/components/OutputPanel.svelte, configurator/src/lib/css.js
Header, OutputPanel, and CSS module now import and use the new frameworkVersion export from the model instead of reading from the sync object.
Sync script and release workflow cleanup
configurator/scripts/sync-api.mjs, configurator/src/data/api-index.generated.json, scripts/version-sync.js, scripts/check-version-sync.js, .github/workflows/release.yml
Sync-api script removes frameworkVersion from generated output with comments explaining build-time injection. Version-sync and check-version-sync scripts remove the redundant frameworkVersion sync/validation step. Release workflow stops staging the generated api-index file.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • codeslash-dev/SLASHED#149: Both PRs modify the release/version synchronization flow by updating .github/workflows/release.yml and scripts/version-sync.js to change how version artifacts are staged and synced.
  • codeslash-dev/SLASHED#309: Both PRs modify the release workflow and configurator/src/data/api-index.generated.json's version stamping, with potential staging and versioning conflicts.
  • codeslash-dev/SLASHED#147: Both PRs update scripts/version-sync.js to change which files and fields are updated during release version syncing.
🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The PR title lists multiple unrelated fixes (draggable pane widths, font-family classifier, overflow fix, build-time version injection) but the provided raw_summary covers only the build-time version injection work across 9 files. Clarify whether the raw_summary represents the complete changeset for this PR, or if it is partial. If partial, confirm the title accurately reflects all changes included.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
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.

Comment thread configurator/src/lib/css.js Fixed
claude added 2 commits June 12, 2026 20:49
…ne release bug

Previously the displayed framework version was read from a static field
(`_sync.frameworkVersion`) in `api-index.generated.json`. That field had
to be updated in sync with `package.json` on every release, creating a
persistent class of drift:

  - The sync-main CI job ran version-sync.js but initially omitted the
    file from `git add` (fix #1: 720e339). Later the git add was added
    (fix #2: 1a3e949). But post-release PR merges from branches developed
    pre-release kept overwriting main's correct value with the old one,
    causing CI failures and manual re-syncs every release cycle.

Root fix: remove frameworkVersion from api-index.generated.json entirely
and inject it at Vite build time via `define.__SLASHED_VERSION__` in
vite.config.js, reading directly from the root package.json.

Results:
- The version displayed in the header/output drawer is always exactly
  the package.json version that was current when `vite build` ran — no
  separate sync step, no committed JSON field to maintain.
- sync-api.mjs no longer writes frameworkVersion to the generated index.
- version-sync.js no longer patches api-index.generated.json.
- check-version-sync.js no longer checks api-index frameworkVersion.
- release.yml sync-main no longer stages api-index.generated.json.
- model.js falls back to sync.frameworkVersion for any dev builds that
  bypass Vite (e.g. direct node imports in unit tests).

https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
@jackgranatowski
jackgranatowski force-pushed the claude/loving-galileo-0197q7 branch from bf88f2d to e4491d4 Compare June 12, 2026 20:49
@jackgranatowski

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 13, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

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