feat(configurator): Misc → coherent "System" panel (follow-up)

configurator/src/App.svelte

@@ -21,7 +21,7 @@
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
     layout: "Layout", borders: "Shape", depth: "Depth", motion: "Motion",
-    macros: "Macros", misc: "Misc", components: "Components",
+    macros: "Macros", misc: "System", components: "Components",
     changes: "Changes", themes: "Presets", wcag: "Accessibility",
     setup: "Install & export", cheatsheet: "Reference",
   };
@@ -59,6 +59,17 @@
   // Transient feedback after an import (the old flow failed silently).
   let importStatus = $state<string | null>(null);
   let importStatusTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function navigateTo(domainId: string, token?: string) {
+    domain = domainId;
+    if (token) {
+      focusNonce += 1;
+      focusRequest = { token, nonce: focusNonce };
+    } else {
+      focusRequest = null;
+    }
+    mobileView = "controls";
+  }
   // On narrow screens the controls panel and the live preview can't both fit, so
   // we show one at a time and let the user fold between them (desktop shows both).
   let mobileView = $state<"controls" | "preview">("controls");
@@ -342,7 +353,7 @@
     <div class={`shrink-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
       <SidebarNav
         activeId={domain}
-        onSelect={(d) => { domain = d; focusRequest = null; }}
+        onSelect={(d) => { navigateTo(d); }}
         overridesByDomain={domainBadges}
       />
     </div>
@@ -382,7 +393,7 @@
           onReset={handleReset}
           onBulkChange={handleBulkChange}
           onApplyTheme={handleApplyTheme}
-          onSelectDomain={(d) => { domain = d; focusRequest = null; }}
+          onSelectDomain={(d) => { navigateTo(d); }}
           onResetAll={handleResetAll}
         />
       </div>
@@ -420,11 +431,7 @@
       tokens={ALL_TOKENS}
       {overrides}
       onNavigate={(d, token) => {
-        domain = d;
-        if (token) { focusNonce += 1; focusRequest = { token, nonce: focusNonce }; }
-        else focusRequest = null;
-        // On mobile, deep-linking into a token means we want the controls side.
-        mobileView = "controls";
+        navigateTo(d, token);
       }}
       onClose={() => { showPalette = false; }}
     />

configurator/src/components/CommandPalette.svelte

@@ -17,18 +17,24 @@
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
     layout: "Layout", borders: "Shape", depth: "Depth", motion: "Motion",
-    macros: "Macros", misc: "Misc", components: "Components",
+    macros: "Macros", misc: "System", components: "Components",
     changes: "Changes", wcag: "Accessibility", themes: "Presets",
     setup: "Install & export", cheatsheet: "Reference",
   };
 
   // Navigation destinations — makes this a real command palette (jump to any
   // panel/tool), not just a token search.
+  const NAV_ALIASES: Record<string, string[]> = {
+    borders: ["border", "radius", "shape"], shadows: ["shadow", "depth"],
+    effects: ["effect"], wcag: ["accessibility", "contrast"],
+    themes: ["theme", "preset"], setup: ["install", "export"],
+    cheatsheet: ["reference", "classes"], misc: ["system"],
+  };
   const NAV = [
     "home", "colors", "typography", "spacing", "borders", "motion",
     "layout", "depth", "macros", "components", "misc",
     "changes", "wcag", "themes", "setup", "cheatsheet",
-  ].map((id) => ({ id, label: DOMAIN_LABELS[id] ?? id }));
+  ].map((id) => ({ id, label: DOMAIN_LABELS[id] ?? id, terms: [id, ...(NAV_ALIASES[id] ?? [])] }));
 
   type Result =
     | { kind: "nav"; id: string; label: string }
@@ -38,7 +44,9 @@
     const q = query.trim().toLowerCase();
     // Navigation matches (all destinations when empty, so the palette is useful
     // before typing).
-    const nav: Result[] = (q ? NAV.filter((n) => n.label.toLowerCase().includes(q)) : NAV)
+    const nav: Result[] = (q ? NAV.filter((n) =>
+      n.label.toLowerCase().includes(q) || n.terms.some((term) => term.includes(q))
+    ) : NAV)
       .map((n) => ({ kind: "nav", id: n.id, label: n.label }));
 
     const tokenMatches: Result[] = [];

configurator/src/components/panels/ChangesPanel.svelte

@@ -18,7 +18,7 @@
   const DOMAIN_LABEL: Record<string, string> = {
     colors: "Colors", typography: "Typography", spacing: "Spacing", layout: "Layout",
     borders: "Shape", depth: "Depth", motion: "Motion",
-    macros: "Macros", components: "Components", misc: "Misc",
+    macros: "Macros", components: "Components", misc: "System",
   };
 
   let summary = $derived(summarizeChanges(tokens, overrides));

configurator/src/components/panels/HomePanel.svelte

@@ -34,7 +34,7 @@
         { id: "depth",      icon: Layers,    label: "Depth",      desc: "Shadows, glow, blur & opacity" },
         { id: "macros",     icon: Blocks,    label: "Macros",     desc: "Flow, prose, aspect & scrim" },
         { id: "components", icon: Component, label: "Components", desc: "Button & card component tokens" },
-        { id: "misc",       icon: Puzzle,    label: "Misc",       desc: "Z-index & remaining tokens" },
+        { id: "misc",       icon: Puzzle,    label: "System",     desc: "Layering, sizing, media, selection" },
       ],
     },
     {

configurator/src/components/panels/MiscPanel.svelte

@@ -57,8 +57,24 @@
 
 <div class="p-4 space-y-6">
 
-  <!-- Touch target moved to the Accessibility panel (WCAG 2.5.5 control; now
-       classifies there so badge/Reset match where it's edited). -->
+  <!-- Touch target moved to the Accessibility panel; focus ring moved to
+       Accessibility; both now classify there so badge/Reset match. -->
+
+  <!-- Overview of the low-level system areas this panel groups. -->
+  <div class="rounded-lg bg-black/3 dark:bg-white/3 border border-black/6 dark:border-white/6 p-3">
+    <p class="text-[10px] text-slate-500 leading-relaxed">
+      Low-level system tokens, grouped by area:
+      <span class="font-semibold text-slate-600 dark:text-slate-400">Layering</span>,
+      <span class="font-semibold text-slate-600 dark:text-slate-400">Text &amp; selection</span>,
+      <span class="font-semibold text-slate-600 dark:text-slate-400">Sizing</span> &amp;
+      <span class="font-semibold text-slate-600 dark:text-slate-400">Icons</span>,
+      <span class="font-semibold text-slate-600 dark:text-slate-400">Media</span>, and
+      <span class="font-semibold text-slate-600 dark:text-slate-400">device / forms</span>.
+    </p>
+  </div>
+
+  <!-- LAYERING -->
+  <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Layering</div>
 
   <!-- Z-INDEX -->
   <Section title="Z-index layers" bind:open={showZIndex}>
@@ -84,6 +100,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
+  <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Text &amp; selection</div>
+
   <!-- SELECTION -->
   <Section title="Text selection" bind:open={showTextSelection}>
       <div class="space-y-2">
@@ -161,6 +179,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
+  <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Sizing</div>
+
   <!-- COMPONENT SIZES -->
   <Section title="Component size scale" bind:open={showComponentSizes}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
@@ -196,6 +216,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
+  <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Links &amp; caret</div>
+
   <!-- CARET & LINKS -->
   <Section title="Caret &amp; links" bind:open={showCaretLinks}>
       <div>
@@ -257,6 +279,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
+  <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Icons</div>
+
   <!-- ICON SIZES -->
   <Section title="Icon sizes" bind:open={showIconSizes}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
@@ -290,6 +314,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
+  <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Media</div>
+
   <!-- OBJECT FIT / POSITION -->
   <Section title="Object fit" bind:open={showObjectFit}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">Default values for <span class="font-mono text-slate-600 dark:text-slate-400">.sf-media</span> images and replaced elements.</p>
@@ -328,6 +354,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
+  <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Device &amp; forms</div>
+
   <!-- SAFE AREA INSETS -->
   <Section title="Safe area insets" bind:open={showSafeArea}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
@@ -387,7 +415,7 @@
   <!-- PREVIEW NOTE -->
   <div class="rounded-lg bg-black/3 dark:bg-white/3 border border-black/6 dark:border-white/6 p-3">
     <p class="text-[10px] text-slate-500 leading-relaxed">
-      Selection colors, caret, links, focus ring, borders and sizes all render in the
+      Selection colors, caret, links, borders and sizes all render in the
       live preview (try the <span class="text-slate-600 dark:text-slate-400 font-semibold">Components</span> template).
       <span class="text-slate-600 dark:text-slate-400 font-semibold">Scroll behavior</span> applies to the page
       itself and can't be shown in the static canvas.

configurator/src/components/shell/SidebarNav.svelte

@@ -34,7 +34,7 @@
         { id: "depth",      icon: Layers,    label: "Depth" },
         { id: "macros",     icon: Blocks,    label: "Macros" },
         { id: "components", icon: Component, label: "Components" },
-        { id: "misc",       icon: Puzzle,    label: "Misc" },
+        { id: "misc",       icon: Puzzle,    label: "System" },
       ],
     },
     {

configurator/src/data/domain-map.json

@@ -49,7 +49,7 @@
     "stack": "layout",
     "header": "layout",
     "sticky": "layout",
-    "safe": "layout",
+
     "breakout": "layout",
     "box": "layout",
     "bg": "layout",
@@ -92,6 +92,7 @@
     "size": "misc",
     "object": "misc",
     "scrollbar": "misc",
+    "safe": "misc",
     "is": "misc",
 
     "focus": "wcag",

configurator/tests-e2e/shell.spec.js

@@ -6,7 +6,7 @@ import { watchErrors, gotoClean, navButton } from './helpers.js';
 
 const NAV_LABELS = [
   'Home', 'Colors', 'Typography', 'Spacing', 'Shape',
-  'Layout', 'Depth', 'Motion', 'Macros', 'Misc', 'Components',
+  'Layout', 'Depth', 'Motion', 'Macros', 'System', 'Components',
   'Changes', 'Accessibility', 'Presets', 'Install & export', 'Reference',
 ];
 

configurator/tests/domains.test.ts

@@ -47,6 +47,11 @@ describe('domainOf', () => {
     expect(classifyKnown('--sf-z-modal')).toBe('misc');
   });
 
+  test('safe-area insets classify to the System (misc) panel, where they are edited', () => {
+    expect(domainOf('--sf-safe-top')).toBe('misc');
+    expect(domainOf('--sf-safe-bottom')).toBe('misc');
+  });
+
   test('per-token exceptions override their namespace default', () => {
     // `content` defaults to spacing, but these two are genuinely elsewhere.
     expect(domainOf('--sf-content-gap')).toBe('spacing');