fix(configurator): track viewport changes live + dedupe count helpers

Findings from a 7-angle static review of the IA-restructure diff plus a
behavioral Playwright sweep (console-clean across every route in both
modes at 1600/1000/480px; hostile-input sanitisation; corrupt-storage
recovery; import round-trip; generator edge inputs; theme gallery):

- App: the narrow-viewport check is now a matchMedia change listener —
  shrinking the window dismisses the preview overlay instead of dropping
  a scrim over the app, and widening it back restores the desktop pane
  (previously the preview stayed closed forever after one resize)
- model.js: new modifiedCountsByDomain() shared by Sidebar badges and
  the Home checklist, so the two counts can never drift
- store: openOutputDrawer() helper deduplicates the header pill and
  Home shortcut logic
- Home: 'start here' pointer hoisted to a derived (was an O(n^2)
  findIndex re-run inside the each template)
- domains.js: docs links base URL extracted to DOCS_BASE_URL
- tests: border presets now pin the framework default radii (4/8/12px)
  so a framework retune redesigns the presets instead of silently
  skewing their semantics

https://claude.ai/code/session_01DCCWK2EPSRdhBDZ7f25NxT

Author: claude

configurator/src/App.svelte

@@ -57,8 +57,17 @@
 
   // On narrow viewports the preview is a slide-over overlay, so it must start
   // closed — opening a full-width scrim on first paint would bury the panel.
+  // The media query is tracked live: shrinking the window dismisses the
+  // overlay instead of dropping a scrim onto the app, and widening it back
+  // restores the desktop pane (its default-open state).
   $effect(() => {
-    if (window.matchMedia('(max-width: 1100px)').matches) ui.previewOpen = false;
+    const mql = window.matchMedia('(max-width: 1100px)');
+    if (mql.matches) ui.previewOpen = false;
+    const onChange = (e) => {
+      ui.previewOpen = !e.matches;
+    };
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
   });
 
   // Keyboard shortcuts: '/' focuses the search box; 'b'/'a' switch mode;

configurator/src/components/DomainPanel.svelte

@@ -14,7 +14,7 @@
    * so each domain is just curation — no bespoke per-field code.
    */
   import { allTokens, groupTokens, matchesQuery, tokenByName } from '../lib/model.js';
-  import { domainOf, KNOBS_BY_DOMAIN } from '../lib/domains.js';
+  import { domainOf, KNOBS_BY_DOMAIN, DOCS_BASE_URL } from '../lib/domains.js';
   import { BASIC_BY_DOMAIN } from '../lib/basics.js';
   import { BRAND_COLOR_KEYS } from '../lib/brandColors.js';
   import { ui, overrides, patchOverrides } from '../lib/store.svelte.js';
@@ -319,7 +319,7 @@
       {#if domain.docsPath}
         <p class="panel__docs">
           <a
-            href="https://github.com/codeslash-dev/SLASHED/blob/main/{domain.docsPath}"
+            href="{DOCS_BASE_URL}{domain.docsPath}"
             target="_blank"
             rel="noreferrer"
           >Learn more about {domain.label.toLowerCase()} in the framework docs →</a>

configurator/src/components/Header.svelte

@@ -14,7 +14,7 @@
    * reachable. Keyboard shortcut: `/` focuses the search box.
    */
   import { sync, allTokens } from '../lib/model.js';
-  import { ui, overrides, overrideCount, history, undo, redo } from '../lib/store.svelte.js';
+  import { ui, overrides, overrideCount, history, undo, redo, openOutputDrawer } from '../lib/store.svelte.js';
 
   const totalTokens = allTokens.length;
   const modCount = $derived(Object.keys(overrides).length);
@@ -41,12 +41,7 @@
       {#if modCount > 0}
         <button
           class="hdr__pill hdr__pill--mod hdr__pill--btn"
-          onclick={() => {
-            ui.outputOpen = true;
-            requestAnimationFrame(() => {
-              document.querySelector('.out')?.scrollIntoView({ block: 'end', behavior: 'smooth' });
-            });
-          }}
+          onclick={openOutputDrawer}
           title="{modCount} active override{modCount === 1 ? '' : 's'} — open the export drawer"
         >
           {modCount} customised · Export CSS

configurator/src/components/Home.svelte

@@ -8,33 +8,19 @@
    * customised, so the screen doubles as orientation ("what do I change per
    * project?") and progress tracking ("what have I already touched?").
    */
-  import { DOMAINS, BASIC_DOMAIN_IDS, domainOf } from '../lib/domains.js';
-  import { tokenByName } from '../lib/model.js';
-  import { ui, overrides } from '../lib/store.svelte.js';
+  import { DOMAINS, BASIC_DOMAIN_IDS } from '../lib/domains.js';
+  import { modifiedCountsByDomain } from '../lib/model.js';
+  import { ui, overrides, openOutputDrawer } from '../lib/store.svelte.js';
 
   const rows = $derived(DOMAINS.filter((d) => BASIC_DOMAIN_IDS.includes(d.id)));
 
-  // Domain id → number of currently-overridden tokens (same logic as Sidebar).
-  const mods = $derived.by(() => {
-    const c = {};
-    for (const name of Object.keys(overrides)) {
-      const t = tokenByName.get(name);
-      if (!t) continue;
-      const id = domainOf(t);
-      c[id] = (c[id] || 0) + 1;
-    }
-    return c;
-  });
+  // Domain id → number of currently-overridden tokens (same map as Sidebar).
+  const mods = $derived.by(() => modifiedCountsByDomain(overrides));
 
   const totalMods = $derived(Object.keys(overrides).length);
 
-  function openExport() {
-    ui.outputOpen = true;
-    // The drawer lives at the bottom of the shell — bring it into view.
-    requestAnimationFrame(() => {
-      document.querySelector('.out')?.scrollIntoView({ block: 'end', behavior: 'smooth' });
-    });
-  }
+  // The first untouched non-tool domain gets the "start here" pointer.
+  const startId = $derived(rows.find((r) => !r.tool && !mods[r.id])?.id ?? null);
 </script>
 
 <section class="home">
@@ -47,14 +33,14 @@
       (<kbd class="cfg-kbd">A</kbd>).
     </p>
     {#if totalMods > 0}
-      <button class="home__export" onclick={openExport} title="Open the output drawer with your override CSS">
+      <button class="home__export" onclick={openOutputDrawer} title="Open the output drawer with your override CSS">
         {totalMods} token{totalMods === 1 ? '' : 's'} customised — Export CSS ↓
       </button>
     {/if}
   </header>
 
   <ul class="home__list">
-    {#each rows as d, i (d.id)}
+    {#each rows as d (d.id)}
       <li>
         <button class="home__row" onclick={() => (ui.domain = d.id)}>
           <span class="home__icon" aria-hidden="true">{d.icon}</span>
@@ -67,7 +53,7 @@
               <span class="home__count">presets</span>
             {:else if mods[d.id]}
               <span class="home__count home__count--mod">{mods[d.id]} customised</span>
-            {:else if !d.tool && i === rows.findIndex((r) => !r.tool && !mods[r.id])}
+            {:else if d.id === startId}
               <span class="home__count home__count--start">start here →</span>
             {:else}
               <span class="home__count">defaults</span>

configurator/src/components/Sidebar.svelte

@@ -13,7 +13,7 @@
    * icon font — keeps the configurator a single self-contained bundle.
    */
   import { DOMAINS, BASIC_DOMAIN_IDS, domainOf } from '../lib/domains.js';
-  import { allTokens, tokenByName } from '../lib/model.js';
+  import { allTokens, modifiedCountsByDomain } from '../lib/model.js';
   import { ui, overrides } from '../lib/store.svelte.js';
 
   // Basic mode shows the per-project checklist only (6 domains + Themes),
@@ -36,16 +36,7 @@
   });
 
   // Domain id → number of currently-overridden tokens (the "modified" badge).
-  const mods = $derived.by(() => {
-    const c = {};
-    for (const name of Object.keys(overrides)) {
-      const t = tokenByName.get(name);
-      if (!t) continue;
-      const id = domainOf(t);
-      c[id] = (c[id] || 0) + 1;
-    }
-    return c;
-  });
+  const mods = $derived.by(() => modifiedCountsByDomain(overrides));
 </script>
 
 <aside class="side" class:side--narrow={!ui.sidebarOpen} aria-label="Categories">

configurator/src/lib/domains.js

@@ -21,6 +21,12 @@
  */
 import { basicControlTokens } from './basics.js';
 
+/**
+ * Base URL for the per-domain "Learn more" docs links (joined with each
+ * domain's `docsPath`). Single definition so a repo move is a one-line fix.
+ */
+export const DOCS_BASE_URL = 'https://github.com/codeslash-dev/SLASHED/blob/main/';
+
 /**
  * Domains surfaced in BASIC mode (plus the synthetic Home screen).
  *

configurator/src/lib/model.js

@@ -7,6 +7,7 @@
  * rune-free means it is trivially unit-testable and re-usable.
  */
 import data from '../data/api-index.generated.json' with { type: 'json' };
+import { domainOf } from './domains.js';
 
 /** Sync metadata (framework version, generated timestamp, counts). */
 export const sync = data._sync ?? {};
@@ -22,6 +23,25 @@ export const defaultsByName = new Map(
   allTokens.map((t) => [t.name, t.value ?? ''])
 );
 
+/**
+ * Domain id -> number of currently-overridden tokens it owns. Shared by the
+ * Sidebar badges and the Home checklist so the two counts can never drift.
+ * Unknown override names (stale storage) are skipped, matching loadOverrides.
+ *
+ * @param {Record<string, string>} overrides token name -> value
+ * @returns {Record<string, number>}
+ */
+export function modifiedCountsByDomain(overrides) {
+  const c = {};
+  for (const name of Object.keys(overrides)) {
+    const t = tokenByName.get(name);
+    if (!t) continue;
+    const id = domainOf(t);
+    c[id] = (c[id] || 0) + 1;
+  }
+  return c;
+}
+
 /**
  * Compute the dependents-count map for an arbitrary token list.
  *

configurator/src/lib/store.svelte.js

@@ -249,6 +249,19 @@ export function deleteSavedTheme(id) {
 
 // ───────────────────────────── helpers ────────────────────────────────────
 
+/**
+ * Expand the output drawer and bring it into view. Shared by the header
+ * "N customised — Export CSS" pill and the Home checklist shortcut.
+ */
+export function openOutputDrawer() {
+  ui.outputOpen = true;
+  if (typeof document === 'undefined') return;
+  // The drawer lives at the bottom of the shell — scroll after it expands.
+  requestAnimationFrame(() => {
+    document.querySelector('.out')?.scrollIntoView({ block: 'end', behavior: 'smooth' });
+  });
+}
+
 /** Count of active overrides (non-reactive helper for one-off reads). */
 export function overrideCount() {
   return Object.keys(overrides).length;

configurator/tests/style-presets.test.js

@@ -70,6 +70,16 @@ describe('preset list invariants', () => {
     });
   }
 
+  test('border presets stay anchored to the framework default radii', () => {
+    // The preset semantics encode knowledge of the defaults: Subtle is half
+    // of 4/8/12px, Rounded IS 4/8/12px, Pill scales beyond them. If the
+    // framework retunes its radius steps this must fail so the presets get
+    // redesigned alongside (same parity idea as the fluid-engine defaults).
+    assert.equal(tokenByName.get('--sf-radius-s').value, 'calc(4px * var(--sf-radius-scale))');
+    assert.equal(tokenByName.get('--sf-radius-m').value, 'calc(8px * var(--sf-radius-scale))');
+    assert.equal(tokenByName.get('--sf-radius-l').value, 'calc(12px * var(--sf-radius-scale))');
+  });
+
   test('STYLE_PRESETS_BY_DOMAIN keys are borders + shadows with titles', () => {
     assert.deepEqual(Object.keys(STYLE_PRESETS_BY_DOMAIN).sort(), ['borders', 'shadows']);
     for (const def of Object.values(STYLE_PRESETS_BY_DOMAIN)) {