Merge pull request #315 from codeslash-dev/claude/loving-galileo-0197q7

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

Author: jackgranatowski

.github/workflows/release.yml

@@ -186,7 +186,7 @@ jobs:
         run: |
           git config user.name  "github-actions[bot]"
           git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git add package.json package-lock.json docs/roadmap.md CHANGELOG.md configurator/src/data/api-index.generated.json
+          git add package.json package-lock.json docs/roadmap.md CHANGELOG.md
           if git diff --cached --quiet; then
             echo "Nothing to commit — version artifacts on main already match ${{ steps.ver.outputs.tag }}."
           else

configurator/scripts/sync-api.mjs

@@ -45,21 +45,6 @@ const ANNOTATIONS_FILE = path.join(FRAMEWORK_ROOT, 'docs', 'token-annotations.js
 const OUT_DIR = path.join(CONFIGURATOR_ROOT, 'src', 'data');
 const OUT = path.join(OUT_DIR, 'api-index.generated.json');
 
-/**
- * Read the framework's package version, used only as a display/sync stamp.
- * Falls back to an empty string when the file is unavailable.
- * @returns {string}
- */
-function readFrameworkVersion() {
-  try {
-    const pkg = JSON.parse(
-      fs.readFileSync(path.join(FRAMEWORK_ROOT, 'package.json'), 'utf8')
-    );
-    return typeof pkg.version === 'string' ? pkg.version : '';
-  } catch {
-    return '';
-  }
-}
 
 /**
  * Read the optional token-annotations.json overlay. Returns null if the file
@@ -180,7 +165,10 @@ function main() {
     _sync: {
       generatedBy: 'configurator/scripts/sync-api.mjs',
       source: path.relative(FRAMEWORK_ROOT, SOURCE).split(path.sep).join('/'),
-      frameworkVersion: readFrameworkVersion(),
+      // frameworkVersion is intentionally NOT stored here. It is injected at
+      // Vite build time (vite.config.js `define.__SLASHED_VERSION__`) from the
+      // root package.json, so it always matches the build and never needs a
+      // separate sync step.
       // Content hash of the projected catalogue. Unlike a wall-clock stamp it
       // only changes when the tokens themselves change, so re-running the sync
       // produces no diff unless the framework API actually moved.
@@ -206,8 +194,7 @@ function main() {
 
   console.log(
     `[configurator:sync] ${path.relative(FRAMEWORK_ROOT, OUT)} ← ` +
-      `${out._sync.source} (${tokens.length} tokens, framework ` +
-      `${out._sync.frameworkVersion || 'unknown'})`
+      `${out._sync.source} (${tokens.length} tokens)`
   );
 }
 

configurator/src/components/Header.svelte

@@ -13,7 +13,7 @@
    * Below ~760px the labels collapse to icons but every control stays
    * reachable. Keyboard shortcut: `/` focuses the search box.
    */
-  import { sync, allTokens } from '../lib/model.js';
+  import { sync, allTokens, frameworkVersion } from '../lib/model.js';
   import { ui, overrides, overrideCount, history, undo, redo, openOutputDrawer } from '../lib/store.svelte.js';
 
   const totalTokens = allTokens.length;
@@ -30,9 +30,9 @@
       <p class="hdr__sub">Edit every framework token. Generate override CSS.</p>
     </div>
     <div class="hdr__pills">
-      {#if sync.frameworkVersion}
+      {#if frameworkVersion}
         <span class="hdr__pill" title="Synced from {sync.source} (catalogue {sync.tokensHash})">
-          v{sync.frameworkVersion}
+          v{frameworkVersion}
         </span>
       {/if}
       <span class="hdr__pill hdr__pill--muted" title="{totalTokens} tokens in the live catalogue">

configurator/src/components/OutputPanel.svelte

@@ -11,7 +11,7 @@
    * customised" pill keeps the user oriented even with the body hidden.
    */
   import { overrides, ui, storage, replaceOverrides, clearAll } from '../lib/store.svelte.js';
-  import { sync, defaultsByName, tokenByName } from '../lib/model.js';
+  import { sync, defaultsByName, tokenByName, frameworkVersion } from '../lib/model.js';
   import { generateCSS, parseCSS } from '../lib/css.js';
   import { copyText, COPY_FEEDBACK_MS } from '../lib/clipboard.js';
 
@@ -211,7 +211,7 @@
 
     <footer class="out__foot">
       Synced from <code>{sync.source}</code> · framework
-      <code>{sync.frameworkVersion || 'unknown'}</code> ·
+      <code>{frameworkVersion || 'unknown'}</code> ·
       {sync.counts?.tokens ?? 0} tokens in catalogue
     </footer>
   {/if}

configurator/src/data/api-index.generated.json

@@ -2,7 +2,6 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "frameworkVersion": "0.5.36",
     "tokensHash": "64c1ee7ddc47",
     "bundles": [
       "essential",

configurator/src/lib/css.js

@@ -7,7 +7,7 @@
  * the cascade, so these win without `!important`). A bare `:root { … }` mode is
  * also offered for consumers who don't use cascade layers.
  */
-import { sync } from './model.js';
+import { frameworkVersion } from './model.js';
 
 /**
  * Sanitize a single declaration value so it cannot break out of its CSS
@@ -51,7 +51,7 @@ export function generateCSS(overrides, opts = {}) {
 
   let out = '';
   if (banner) {
-    const v = sync.frameworkVersion ? ` v${sync.frameworkVersion}` : '';
+    const v = frameworkVersion ? ` v${frameworkVersion}` : '';
     out +=
       `/* SLASHED override tokens${v} — generated by the SLASHED configurator.\n` +
       `   Load this AFTER the SLASHED stylesheet. ${names.length} token${

configurator/src/lib/model.js

@@ -9,9 +9,17 @@
 import data from '../data/api-index.generated.json' with { type: 'json' };
 import { domainOf } from './domains.js';
 
-/** Sync metadata (framework version, generated timestamp, counts). */
+/** Sync metadata (catalogue hash, counts — NOT frameworkVersion, which is injected at build time). */
 export const sync = data._sync ?? {};
 
+/**
+ * Framework version, injected at Vite build time from the root package.json.
+ * Declared as `string` via vite.config.js `define`, guaranteed to match
+ * whatever package.json version was current when `vite build` ran.
+ */
+// eslint-disable-next-line no-undef
+export const frameworkVersion = typeof __SLASHED_VERSION__ !== 'undefined' ? __SLASHED_VERSION__ : (sync.frameworkVersion ?? '');
+
 /** Every token row from the synced catalogue. */
 export const allTokens = Array.isArray(data.tokens) ? data.tokens : [];
 

configurator/vite.config.js

@@ -1,6 +1,15 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
+// Read the framework's package.json for the version stamp. Using the file
+// directly (rather than package.json imports) keeps this compatible with both
+// ESM and CJS Vite configs, and avoids assert{type:'json'} compat issues.
+const pkg = JSON.parse(
+  readFileSync(resolve(import.meta.dirname, '../package.json'), 'utf8')
+);
+
 /**
  * Build config for the standalone SLASHED configurator.
  *
@@ -12,10 +21,17 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
  * `base: './'` keeps every asset reference relative so the built site in
  * dist/ can be hosted from any sub-path (GitHub Pages project site, a CDN
  * folder, file://, etc.) without reconfiguration.
+ *
+ * `__SLASHED_VERSION__` is injected at build time from the root package.json
+ * so the version pill in the header is always exactly the version that was
+ * built — no separate sync step needed, no off-by-one after releases.
  */
 export default defineConfig({
   base: './',
   plugins: [svelte()],
+  define: {
+    __SLASHED_VERSION__: JSON.stringify(pkg.version),
+  },
   build: {
     target: 'es2022',
     sourcemap: true,

scripts/check-version-sync.js

@@ -7,6 +7,10 @@
 //   1. package-lock.json version (root and packages[""]) === package.json
 //   2. docs/roadmap.md "Current version" === package.json
 //
+// Note: configurator/src/data/api-index.generated.json no longer stores a
+// frameworkVersion field — the version is injected at Vite build time from the
+// root package.json (vite.config.js define.__SLASHED_VERSION__), so it is
+// always exactly the version that was built and never needs a sync step.
 // Run locally with: node scripts/check-version-sync.js
 // Wired into CI (.github/workflows/ci.yml).
 
@@ -46,15 +50,6 @@ if (!m) {
   );
 }
 
-// 3. configurator generated index frameworkVersion must match package.json.
-const genIndex = JSON.parse(read('configurator/src/data/api-index.generated.json'));
-const genVersion = genIndex?._sync?.frameworkVersion;
-if (genVersion !== version) {
-  errors.push(
-    `configurator/src/data/api-index.generated.json frameworkVersion "${genVersion}" != package.json "${version}" — run \`npm run configurator:sync\``,
-  );
-}
-
 if (errors.length) {
   console.error('version-sync check FAILED:');
   for (const e of errors) console.error(`  - ${e}`);

scripts/version-sync.js

@@ -55,17 +55,6 @@ changed += sync(
   `roadmap version = ${version}`
 ) ? 1 : 0;
 
-// ── configurator/src/data/api-index.generated.json ──────────────────────────
-// A release bumps package.json but doesn't rebuild the configurator, so without
-// this the panel keeps showing the PREVIOUS version every release. Bump the
-// stamp here too (guarded by check-version-sync.js).
-changed += sync(
-  'configurator/src/data/api-index.generated.json',
-  new RegExp(`("frameworkVersion":\\s*")${SEMVER_RE.source}(")`),
-  `$1${version}$2`,
-  `configurator api-index frameworkVersion = ${version}`
-) ? 1 : 0;
-
 // ── Summary ─────────────────────────────────────────────────────────────────
 if (changed === 0) {
   console.log('\nAll version references are already up to date.\n');