From 23c53270f6ff733478b4c5a70bf045af95560cbd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 2 Jul 2026 07:14:00 +0000
Subject: [PATCH] refactor(configurator): shape-guard localStorage reads,
 migrate lucide-svelte, document preview singleton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SL-019: reuse savedThemes.ts's isStringRecord() shape guard in
persistence.ts's loadInitialOverrides() instead of trusting
JSON.parse(local) as Record<string,string> unchecked — malformed or
wrong-shaped localStorage now falls back to {} instead of passing through.

SL-021: verified already resolved (no motion dependency or imports remain).

SL-022: migrate lucide-svelte -> @lucide/svelte across all 9 importing
files (import-source only, no icon renames needed — verified via tsc/
svelte-check/build after the full migration).

SL-025: document why previewResolver.svelte.ts's previewVersion is a
deliberate module-level singleton rather than component-scoped state.

SL-018 and SL-015 were investigated but required no changes: SL-018's
'error' saveState and its StudioHeader render branch were already fully
implemented in an earlier batch; SL-015's premise (two competing
`overrides` membership idioms to unify) doesn't hold in this codebase —
only the `in` idiom is used, consistently, across ~120 call sites in ~15
files, well beyond the ~15-site estimate in the remediation plan.
---
 configurator/package-lock.json                | 23 +++++++++----------
 configurator/package.json                     |  4 ++--
 configurator/src/App.svelte                   |  2 +-
 .../src/components/DomainPanel.svelte         |  2 +-
 .../components/panels/CheatsheetPanel.svelte  |  2 +-
 .../src/components/panels/ExportPanel.svelte  |  2 +-
 .../src/components/panels/HomePanel.svelte    |  2 +-
 .../src/components/panels/ThemesPanel.svelte  |  2 +-
 .../src/components/shell/PreviewPanel.svelte  |  2 +-
 .../src/components/shell/SidebarNav.svelte    |  2 +-
 .../src/components/shell/StudioHeader.svelte  |  2 +-
 configurator/src/lib/persistence.ts           |  6 ++++-
 .../src/lib/previewResolver.svelte.ts         |  8 +++++++
 configurator/src/lib/savedThemes.ts           |  2 +-
 configurator/tests/persistence.test.js        | 20 +++++++++-------
 15 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/configurator/package-lock.json b/configurator/package-lock.json
index bfe4c941..ed74bc86 100644
--- a/configurator/package-lock.json
+++ b/configurator/package-lock.json
@@ -8,8 +8,8 @@
       "name": "slashed-configurator",
       "version": "0.6.33",
       "dependencies": {
-        "fflate": "^0.8.3",
-        "lucide-svelte": "^0.468.0"
+        "@lucide/svelte": "^1.23.0",
+        "fflate": "^0.8.3"
       },
       "devDependencies": {
         "@playwright/test": "^1.60.0",
@@ -685,6 +685,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lucide/svelte": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.23.0.tgz",
+      "integrity": "sha512-3LQbKXx9vId6Nx4E2Nu2qwgJfdmr5+CVeVJbxe5cy+HcnCRd9QVVtZXqvgBYAV1OJrPmQAf9/3gJWLCpASC/Ng==",
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^5"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.61.1",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
@@ -2719,16 +2728,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/lucide-svelte": {
-      "version": "0.468.0",
-      "resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.468.0.tgz",
-      "integrity": "sha512-n0ecAFtCY5LEeL+PJ1Xj4n3c2gzj8tMpak0KMGnvoSJEjCsCnRB0mekBtJZAo7beyynW9Qj5Um1KfMBAeTNplw==",
-      "deprecated": "Package deprecated. Please use @lucide/svelte instead.",
-      "license": "ISC",
-      "peerDependencies": {
-        "svelte": "^3 || ^4 || ^5.0.0-next.42"
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/configurator/package.json b/configurator/package.json
index 34500122..ac9ba6b8 100644
--- a/configurator/package.json
+++ b/configurator/package.json
@@ -21,8 +21,8 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "fflate": "^0.8.3",
-    "lucide-svelte": "^0.468.0"
+    "@lucide/svelte": "^1.23.0",
+    "fflate": "^0.8.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",
diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index fb436fa0..b6d65bf8 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, untrack } from 'svelte';
-  import { SlidersHorizontal, Eye, RotateCcw } from 'lucide-svelte';
+  import { SlidersHorizontal, Eye, RotateCcw } from '@lucide/svelte';
   import type { PreviewTemplate, SlashedToken } from './types';
   import StudioHeader from './components/shell/StudioHeader.svelte';
   import SidebarNav from './components/shell/SidebarNav.svelte';
diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index 8df3e773..2f9d6d3a 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SlidersHorizontal, List } from 'lucide-svelte';
+  import { SlidersHorizontal, List } from '@lucide/svelte';
   import type { SlashedToken } from '../types';
   import { DOMAIN_PATTERNS, domainOf } from '../lib/domains';
   import HomePanel from './panels/HomePanel.svelte';
diff --git a/configurator/src/components/panels/CheatsheetPanel.svelte b/configurator/src/components/panels/CheatsheetPanel.svelte
index 3b83f4c1..5c791c1c 100644
--- a/configurator/src/components/panels/CheatsheetPanel.svelte
+++ b/configurator/src/components/panels/CheatsheetPanel.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
   import classesData from '../../data/classes.generated.json';
   import tokensData from '../../data/api-index.generated.json';
-  import { Copy, Check } from 'lucide-svelte';
+  import { Copy, Check } from '@lucide/svelte';
 
   const classes = classesData.classes;
   const tokens = tokensData.tokens.filter((t: any) => t.tier === 'PUBLIC' || t.tier === 'PUBLIC-ADVANCED');
diff --git a/configurator/src/components/panels/ExportPanel.svelte b/configurator/src/components/panels/ExportPanel.svelte
index ac1a6d39..c25ef76a 100644
--- a/configurator/src/components/panels/ExportPanel.svelte
+++ b/configurator/src/components/panels/ExportPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Check, Copy, Download, Link } from 'lucide-svelte';
+  import { Check, Copy, Download, Link } from '@lucide/svelte';
   import { generateCSS, buildShareUrl } from '../../lib/codec';
 
   let { overrides }: {
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index 60eda01e..3a695283 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -2,7 +2,7 @@
   import {
     Sparkles, Palette, Type, Ruler, Layout, Square, Layers, Zap,
     Puzzle, Blocks, SwatchBook, ShieldCheck, Package, BookOpen, Save,
-  } from 'lucide-svelte';
+  } from '@lucide/svelte';
   import type { SavedSlot } from '../../types';
   import { listSavedThemes, saveTheme } from '../../lib/savedThemes';
 
diff --git a/configurator/src/components/panels/ThemesPanel.svelte b/configurator/src/components/panels/ThemesPanel.svelte
index f972e078..5c95a3aa 100644
--- a/configurator/src/components/panels/ThemesPanel.svelte
+++ b/configurator/src/components/panels/ThemesPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Save, Trash2, Check } from 'lucide-svelte';
+  import { Save, Trash2, Check } from '@lucide/svelte';
   import type { SavedSlot } from '../../types';
   import { listSavedThemes, saveTheme, deleteTheme } from '../../lib/savedThemes';
 
diff --git a/configurator/src/components/shell/PreviewPanel.svelte b/configurator/src/components/shell/PreviewPanel.svelte
index 06d61482..4beb7898 100644
--- a/configurator/src/components/shell/PreviewPanel.svelte
+++ b/configurator/src/components/shell/PreviewPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Sun, Moon, Smartphone, Tablet, Monitor, RefreshCw, ExternalLink, Columns2 } from 'lucide-svelte';
+  import { Sun, Moon, Smartphone, Tablet, Monitor, RefreshCw, ExternalLink, Columns2 } from '@lucide/svelte';
   import type { PreviewTemplate } from '../../types';
   import { generateCSS } from '../../lib/codec';
   import { computeDerivedOverrides } from '../../lib/persistence';
diff --git a/configurator/src/components/shell/SidebarNav.svelte b/configurator/src/components/shell/SidebarNav.svelte
index 2cea2cb1..d8a0d872 100644
--- a/configurator/src/components/shell/SidebarNav.svelte
+++ b/configurator/src/components/shell/SidebarNav.svelte
@@ -2,7 +2,7 @@
   import {
     Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Sparkles, Puzzle,
     Blocks, SwatchBook, ShieldCheck, Package, BookOpen,
-  } from 'lucide-svelte';
+  } from '@lucide/svelte';
 
   let { activeId, onSelect, overridesByDomain = {} }: {
     activeId: string;
diff --git a/configurator/src/components/shell/StudioHeader.svelte b/configurator/src/components/shell/StudioHeader.svelte
index cf18f2cb..8e4ed757 100644
--- a/configurator/src/components/shell/StudioHeader.svelte
+++ b/configurator/src/components/shell/StudioHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import { Undo2, Redo2, Trash2, Share2, FolderOpen, Check, Save, Loader2, AlertTriangle } from 'lucide-svelte';
+  import { Undo2, Redo2, Trash2, Share2, FolderOpen, Check, Save, Loader2, AlertTriangle } from '@lucide/svelte';
 
   const version = typeof __SLASHED_VERSION__ !== "undefined" ? __SLASHED_VERSION__ : "";
 
diff --git a/configurator/src/lib/persistence.ts b/configurator/src/lib/persistence.ts
index 7b365f8a..3e2fd72b 100644
--- a/configurator/src/lib/persistence.ts
+++ b/configurator/src/lib/persistence.ts
@@ -14,6 +14,7 @@
  * chrome + preview reflect the current overrides immediately.
  */
 import { readShareFromHashIfPresent, encodeOverrides, generateCSS } from "./codec";
+import { isStringRecord } from "./savedThemes";
 
 const LS_KEY = "slashed-studio/overrides/v2";
 
@@ -216,7 +217,10 @@ export function loadInitialOverrides(): Record<string, string> {
   }
   const local = localStorage.getItem(LS_KEY);
   if (local) {
-    try { return JSON.parse(local); } catch { /* fall through */ }
+    try {
+      const parsed: unknown = JSON.parse(local);
+      if (isStringRecord(parsed)) return parsed;
+    } catch { /* fall through */ }
   }
   return {};
 }
diff --git a/configurator/src/lib/previewResolver.svelte.ts b/configurator/src/lib/previewResolver.svelte.ts
index 819eb0ec..c55066c7 100644
--- a/configurator/src/lib/previewResolver.svelte.ts
+++ b/configurator/src/lib/previewResolver.svelte.ts
@@ -34,6 +34,14 @@ let probeDarkEl: HTMLElement | null = null;
 // function is a pure write with no reactive read, so clearing here can't cause loops.
 const resolveCache = new Map<string, string>();
 
+// SL-025: deliberately module-level (not created inside a component/store
+// factory). Every panel across the whole tree resolves colors against the
+// *same* single preview iframe registered via registerPreviewDoc(), so there
+// is exactly one meaningful "preview version" for the app to share — scoping
+// this to a component would just mean re-deriving/passing it down everywhere
+// for no benefit. Wrapped in an object (`.value`) because `$state` on a bare
+// module-level primitive isn't itself reactive outside a component context;
+// consumers read `previewVersion.value`, never reassign `previewVersion`.
 /** Reactive version counter — Svelte runes pick this up via `.value`. */
 export const previewVersion = $state({ value: 0 });
 
diff --git a/configurator/src/lib/savedThemes.ts b/configurator/src/lib/savedThemes.ts
index 364f8026..cb765ef3 100644
--- a/configurator/src/lib/savedThemes.ts
+++ b/configurator/src/lib/savedThemes.ts
@@ -10,7 +10,7 @@ import type { SavedSlot } from "../types";
 
 const LS_KEY = "slashed-studio/themes/v1";
 
-function isStringRecord(value: unknown): value is Record<string, string> {
+export function isStringRecord(value: unknown): value is Record<string, string> {
   return !!value
     && typeof value === "object"
     && !Array.isArray(value)
diff --git a/configurator/tests/persistence.test.js b/configurator/tests/persistence.test.js
index cfe12c97..896839d0 100644
--- a/configurator/tests/persistence.test.js
+++ b/configurator/tests/persistence.test.js
@@ -4,8 +4,8 @@
  * Contract: standalone mode reads/writes localStorage + URL hash; WP-embedded
  * mode (window.slashedApp present) reads PHP-hydrated overrides and writes via
  * REST. Covers both branches of loadInitialOverrides/saveOverrides, including
- * the malformed-localStorage edge case flagged by SL-019 (not fixed in this
- * pass — the assertions below document the current, unguarded behavior).
+ * the malformed-localStorage edge cases fixed by SL-019 (shape-guarded via
+ * savedThemes.ts's isStringRecord()).
  */
 import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
 import registry from '../src/data/token-registry.generated.json';
@@ -87,13 +87,17 @@ describe('loadInitialOverrides — standalone mode', () => {
     expect(loadInitialOverrides()).toEqual({});
   });
 
-  // SL-019 (not fixed here): loadInitialOverrides' standalone/localStorage path
-  // trusts JSON.parse's result as Record<string,string> with no shape guard,
-  // unlike savedThemes.ts's equivalent read path. This test pins today's real
-  // (unguarded) behavior so a future SL-019 fix has a test to update.
-  test('SL-019: currently returns non-object JSON as-is instead of {} (documented gap)', () => {
+  // SL-019: loadInitialOverrides' standalone/localStorage path now reuses
+  // savedThemes.ts's isStringRecord() shape guard, matching that module's
+  // equivalent read path, instead of trusting JSON.parse's result outright.
+  test('SL-019: returns {} for non-object JSON instead of passing it through', () => {
     localStorage.setItem(LS_KEY, JSON.stringify(['not', 'an', 'object']));
-    expect(loadInitialOverrides()).toEqual(['not', 'an', 'object']);
+    expect(loadInitialOverrides()).toEqual({});
+  });
+
+  test('SL-019: returns {} when a value in the stored record is not a string', () => {
+    localStorage.setItem(LS_KEY, JSON.stringify({ [t0]: '5rem', [t1]: 42 }));
+    expect(loadInitialOverrides()).toEqual({});
   });
 });