fix: re-sync mobile domain panel overflow fix from framework

SLASHED-for-WP/admin-app/.vendored-manifest.json

@@ -3,205 +3,205 @@
     "description": "Files vendored from the SLASHED framework configurator. DO NOT edit directly — make changes in codeslash-dev/SLASHED → configurator/src/ and re-run npm run sync.",
     "frameworkRepo": "https://github.com/codeslash-dev/SLASHED",
     "configuratorSrc": "configurator/src/",
-    "source": "github:codeslash-dev/slashed@main",
-    "syncedAt": "2026-07-01T01:34:09.798Z"
+    "source": "local",
+    "syncedAt": "2026-07-01T06:21:42.649Z"
   },
   "vendoredFiles": [
     {
       "file": "src/app.css",
-      "source": "github:codeslash-dev/slashed/configurator/src/app.css@main"
+      "source": "local:configurator/src/app.css"
     },
     {
       "file": "src/App.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/App.svelte@main"
+      "source": "local:configurator/src/App.svelte"
     },
     {
       "file": "src/components/CommandPalette.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/CommandPalette.svelte@main"
+      "source": "local:configurator/src/components/CommandPalette.svelte"
     },
     {
       "file": "src/components/DomainPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/DomainPanel.svelte@main"
+      "source": "local:configurator/src/components/DomainPanel.svelte"
     },
     {
       "file": "src/components/inputs/ClampField.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ClampField.svelte@main"
+      "source": "local:configurator/src/components/inputs/ClampField.svelte"
     },
     {
       "file": "src/components/inputs/ColorInput.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ColorInput.svelte@main"
+      "source": "local:configurator/src/components/inputs/ColorInput.svelte"
     },
     {
       "file": "src/components/inputs/OklchColorDesk.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/OklchColorDesk.svelte@main"
+      "source": "local:configurator/src/components/inputs/OklchColorDesk.svelte"
     },
     {
       "file": "src/components/inputs/PowerKnobRow.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/PowerKnobRow.svelte@main"
+      "source": "local:configurator/src/components/inputs/PowerKnobRow.svelte"
     },
     {
       "file": "src/components/inputs/RangeWithNumber.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/RangeWithNumber.svelte@main"
+      "source": "local:configurator/src/components/inputs/RangeWithNumber.svelte"
     },
     {
       "file": "src/components/inputs/SliderRow.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/SliderRow.svelte@main"
+      "source": "local:configurator/src/components/inputs/SliderRow.svelte"
     },
     {
       "file": "src/components/inputs/TokenRow.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/TokenRow.svelte@main"
+      "source": "local:configurator/src/components/inputs/TokenRow.svelte"
     },
     {
       "file": "src/components/panels/AllTokensTab.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/AllTokensTab.svelte@main"
+      "source": "local:configurator/src/components/panels/AllTokensTab.svelte"
     },
     {
       "file": "src/components/panels/BordersPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/BordersPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/BordersPanel.svelte"
     },
     {
       "file": "src/components/panels/CheatsheetPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/CheatsheetPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/CheatsheetPanel.svelte"
     },
     {
       "file": "src/components/panels/ColorsPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ColorsPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/ColorsPanel.svelte"
     },
     {
       "file": "src/components/panels/EffectsPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/EffectsPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/EffectsPanel.svelte"
     },
     {
       "file": "src/components/panels/ExportPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ExportPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/ExportPanel.svelte"
     },
     {
       "file": "src/components/panels/GenericTokenPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/GenericTokenPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/GenericTokenPanel.svelte"
     },
     {
       "file": "src/components/panels/HomePanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/HomePanel.svelte@main"
+      "source": "local:configurator/src/components/panels/HomePanel.svelte"
     },
     {
       "file": "src/components/panels/LayoutPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/LayoutPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/LayoutPanel.svelte"
     },
     {
       "file": "src/components/panels/MacrosPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MacrosPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/MacrosPanel.svelte"
     },
     {
       "file": "src/components/panels/MiscPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MiscPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/MiscPanel.svelte"
     },
     {
       "file": "src/components/panels/MotionPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MotionPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/MotionPanel.svelte"
     },
     {
       "file": "src/components/panels/ShadowsPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ShadowsPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/ShadowsPanel.svelte"
     },
     {
       "file": "src/components/panels/SpacingPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/SpacingPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/SpacingPanel.svelte"
     },
     {
       "file": "src/components/panels/ThemesPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ThemesPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/ThemesPanel.svelte"
     },
     {
       "file": "src/components/panels/TypographyPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/TypographyPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/TypographyPanel.svelte"
     },
     {
       "file": "src/components/panels/WcagPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/panels/WcagPanel.svelte@main"
+      "source": "local:configurator/src/components/panels/WcagPanel.svelte"
     },
     {
       "file": "src/components/shell/PreviewPanel.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/shell/PreviewPanel.svelte@main"
+      "source": "local:configurator/src/components/shell/PreviewPanel.svelte"
     },
     {
       "file": "src/components/shell/SidebarNav.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/shell/SidebarNav.svelte@main"
+      "source": "local:configurator/src/components/shell/SidebarNav.svelte"
     },
     {
       "file": "src/components/shell/StatusBar.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StatusBar.svelte@main"
+      "source": "local:configurator/src/components/shell/StatusBar.svelte"
     },
     {
       "file": "src/components/shell/StudioHeader.svelte",
-      "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StudioHeader.svelte@main"
+      "source": "local:configurator/src/components/shell/StudioHeader.svelte"
     },
     {
       "file": "src/data/api-index.generated.json",
-      "source": "github:codeslash-dev/slashed/configurator/src/data/api-index.generated.json@main"
+      "source": "local:configurator/src/data/api-index.generated.json"
     },
     {
       "file": "src/data/bundles.generated.json",
-      "source": "github:codeslash-dev/slashed/configurator/src/data/bundles.generated.json@main"
+      "source": "local:configurator/src/data/bundles.generated.json"
     },
     {
       "file": "src/data/classes.generated.json",
-      "source": "github:codeslash-dev/slashed/configurator/src/data/classes.generated.json@main"
+      "source": "local:configurator/src/data/classes.generated.json"
     },
     {
       "file": "src/data/domain-patterns.json",
-      "source": "github:codeslash-dev/slashed/configurator/src/data/domain-patterns.json@main"
+      "source": "local:configurator/src/data/domain-patterns.json"
     },
     {
       "file": "src/data/token-registry.generated.json",
-      "source": "github:codeslash-dev/slashed/configurator/src/data/token-registry.generated.json@main"
+      "source": "local:configurator/src/data/token-registry.generated.json"
     },
     {
       "file": "src/lib/basics.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/basics.ts@main"
+      "source": "local:configurator/src/lib/basics.ts"
     },
     {
       "file": "src/lib/codec.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/codec.ts@main"
+      "source": "local:configurator/src/lib/codec.ts"
     },
     {
       "file": "src/lib/colorUtils.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/colorUtils.ts@main"
+      "source": "local:configurator/src/lib/colorUtils.ts"
     },
     {
       "file": "src/lib/domains.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/domains.ts@main"
+      "source": "local:configurator/src/lib/domains.ts"
     },
     {
       "file": "src/lib/lumlockerPreview.svelte.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/lumlockerPreview.svelte.ts@main"
+      "source": "local:configurator/src/lib/lumlockerPreview.svelte.ts"
     },
     {
       "file": "src/lib/persistence.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/persistence.ts@main"
+      "source": "local:configurator/src/lib/persistence.ts"
     },
     {
       "file": "src/lib/powerKnobs.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/powerKnobs.ts@main"
+      "source": "local:configurator/src/lib/powerKnobs.ts"
     },
     {
       "file": "src/lib/previewResolver.svelte.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/previewResolver.svelte.ts@main"
+      "source": "local:configurator/src/lib/previewResolver.svelte.ts"
     },
     {
       "file": "src/lib/savedThemes.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/lib/savedThemes.ts@main"
+      "source": "local:configurator/src/lib/savedThemes.ts"
     },
     {
       "file": "src/main.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/main.ts@main"
+      "source": "local:configurator/src/main.ts"
     },
     {
       "file": "src/types.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/types.ts@main"
+      "source": "local:configurator/src/types.ts"
     },
     {
       "file": "src/vite-env.d.ts",
-      "source": "github:codeslash-dev/slashed/configurator/src/vite-env.d.ts@main"
+      "source": "local:configurator/src/vite-env.d.ts"
     }
   ]
 }

SLASHED-for-WP/admin-app/src/App.svelte

@@ -241,6 +241,21 @@
   });
 </script>
 
+{#snippet foldToggleButton(view: "controls" | "preview", Icon: typeof SlidersHorizontal, label: string)}
+  <button
+    onclick={() => { mobileView = view; }}
+    aria-pressed={mobileView === view}
+    class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
+      mobileView === view ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
+    }`}
+  >
+    <Icon class="w-3.5 h-3.5" /> {label}
+    {#if view === "preview" && overridesCount > 0}
+      <span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black">{overridesCount > 9 ? "9+" : overridesCount}</span>
+    {/if}
+  </button>
+{/snippet}
+
 <div class="{embedded ? 'w-full h-full' : 'w-screen h-screen'} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans">
   <!-- Top header bar -->
   <StudioHeader
@@ -257,6 +272,14 @@
     onSave={handleSave}
   />
 
+  <!-- Mobile fold toggle: switch between the controls panel and the live
+       preview. Lives right under the header (not at the bottom) so it's
+       visible without scrolling and doesn't compete with the status bar. -->
+  <div class="md:hidden flex items-stretch border-b border-white/8 bg-[#0d0d14] shrink-0">
+    {@render foldToggleButton("controls", SlidersHorizontal, "Controls")}
+    {@render foldToggleButton("preview", Eye, "Preview")}
+  </div>
+
   <!-- Main body: sidebar + left panel + preview -->
   <div class="flex flex-1 min-h-0">
     <!-- Icon nav rail — hidden on mobile while the preview is folded open -->
@@ -268,8 +291,10 @@
       />
     </div>
 
-    <!-- Left domain panel — full width on mobile, fixed 360px on desktop -->
-    <div class={`w-full md:w-[360px] shrink-0 bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
+    <!-- Left domain panel — fills remaining row width on mobile (the icon
+         rail above already claims its own space, so w-full here would mean
+         100% of the whole row and overflow past it), fixed 360px on desktop -->
+    <div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
       <!-- Panel heading -->
       <div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0">
         <span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1">
@@ -308,31 +333,6 @@
     </div>
   </div>
 
-  <!-- Mobile fold toggle: switch between the controls panel and the live preview -->
-  <div class="md:hidden flex items-stretch border-t border-white/8 bg-[#0d0d14] shrink-0">
-    <button
-      onclick={() => { mobileView = "controls"; }}
-      aria-pressed={mobileView === "controls"}
-      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
-        mobileView === "controls" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
-      }`}
-    >
-      <SlidersHorizontal class="w-3.5 h-3.5" /> Controls
-    </button>
-    <button
-      onclick={() => { mobileView = "preview"; }}
-      aria-pressed={mobileView === "preview"}
-      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
-        mobileView === "preview" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
-      }`}
-    >
-      <Eye class="w-3.5 h-3.5" /> Preview
-      {#if overridesCount > 0}
-        <span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black">{overridesCount > 9 ? "9+" : overridesCount}</span>
-      {/if}
-    </button>
-  </div>
-
   <!-- Status bar -->
   <StatusBar
     {overridesCount}

SLASHED-for-WP/admin-app/src/AppOverlay.svelte

@@ -6,6 +6,7 @@
   import CommandPalette from './components/CommandPalette.svelte';
   import { fa } from './lib/codec';
   import { loadInitialOverrides, injectLivePreview, saveOverrides } from './lib/persistence';
+  import { registerPreviewDoc } from './lib/previewResolver.svelte';
   import { domainOf } from './lib/domains';
   import tokensRaw from './data/api-index.generated.json';
   import {
@@ -94,7 +95,22 @@
     }
   }
 
-  $effect(() => { injectLivePreview(overrides); });
+  // Panels (e.g. ColorsPanel's semantic preview) resolve real computed colors
+  // via previewResolver, which normally reads them out of the dedicated
+  // preview iframe App.svelte/PreviewPanel renders. The overlay has no such
+  // iframe — the host page itself *is* the live preview, per the class doc
+  // comment in class-frontend-configurator.php — so without registering it
+  // here, resolveColor()/resolveColorForTheme() always return "" and every
+  // swatch that depends on them (the whole Semantic colors grid) renders
+  // blank/transparent instead of the resolved color.
+  $effect(() => {
+    injectLivePreview(overrides);
+    // registerPreviewDoc() bumps previewVersion itself (on both the
+    // first-registration and already-registered paths), so panels reading
+    // previewVersion.value re-resolve on every override change without a
+    // separate explicit bump here.
+    registerPreviewDoc(document);
+  });
 
   // On desktop push page content left; on mobile the panel is a full overlay.
   $effect(() => {