@motion-proto/live-tokens 0.84.0 → 0.86.0

package/src/editor/core/store/editorPersistence.ts

@@ -14,13 +14,13 @@
  */
 
 import { get } from 'svelte/store';
-import type { EditorState } from './editorTypes';
+import type { EditorState, WashScale } from './editorTypes';
 import { storageKey } from './editorConfig';
 import { store } from './editorCore';
 import { quietGet, quietSet } from '../storage/storage';
 import { isGradientSlot, makeDefaultGradients } from '../themes/slices/gradients';
 import { seedShadowsFromDom } from '../themes/slices/shadows';
-import { makeDefaultScrimTokens, makeDefaultTintTokens } from '../themes/slices/washes';
+import { makeDefaultWashScale, type WashFamily } from '../themes/slices/washes';
 import { sanitizeHarmonyAxes } from '../palettes/colorHarmony';
 import {
   renameBackgroundPaletteKey,
@@ -78,34 +78,57 @@ function migrateGradients(state: EditorState): EditorState {
 // calls `Object.entries(slice.config)` unconditionally, so backfill the
 // required fields and drop any non-object slice before the state reaches the
 // renderer. Spread preserves optional fields like `unlinked`.
-// The washes slice was `overlays: { tokens, hoverTokens }` before the scrim and
-// tint renames, and `hydrate` shallow-merges, so a persisted state from an
-// older build replaces `washes` wholesale and arrives without `tints`.
-// `washesToVars` iterates both lists unconditionally, so reshape here: carry the
-// stops across under their new names, and rewrite the variable each one carries.
-const WASH_VAR_RENAMES: Record<string, string> = {
-  '--overlay-low': '--scrim-low',
-  '--overlay': '--scrim',
-  '--overlay-high': '--scrim-high',
-  '--hover-low': '--tint-low',
-  '--hover': '--tint',
-  '--hover-high': '--tint-high',
+// A persisted washes slice can predate two reshapes. Before the scrim and tint
+// renames it was `overlays: { tokens, hoverTokens }`; until 0.85.0 each family
+// was a list of `{variable, alias, opacity}` stops, each carrying its own
+// colour. `hydrate` shallow-merges, so an older build's `washes` arrives whole
+// in that shape, and `washesToVars` reads `color` and `stops` unconditionally.
+// Reshape here: the family takes the base stop's colour, and each stop its
+// opacity under the new variable.
+const LEGACY_STOP_OPACITY_VARS: Record<string, string> = {
+  '--overlay-low': '--scrim-opacity-low',
+  '--overlay': '--scrim-opacity',
+  '--overlay-high': '--scrim-opacity-high',
+  '--scrim-low': '--scrim-opacity-low',
+  '--scrim': '--scrim-opacity',
+  '--scrim-high': '--scrim-opacity-high',
+  '--hover-low': '--tint-opacity-low',
+  '--hover': '--tint-opacity',
+  '--hover-high': '--tint-opacity-high',
+  '--tint-low': '--tint-opacity-low',
+  '--tint': '--tint-opacity',
+  '--tint-high': '--tint-opacity-high',
 };
 
 type LegacyWashes = {
+  scrim?: unknown;
+  tint?: unknown;
   scrims?: unknown;
   tints?: unknown;
   hoverTokens?: unknown;
   tokens?: unknown;
 };
 
-/** Carry a persisted stop list forward, or fall back to the shipped defaults. */
-function washList(raw: unknown, fallback: () => EditorState['washes']['scrims']) {
-  if (!Array.isArray(raw) || raw.length === 0) return fallback();
-  const carried = raw
-    .filter((t): t is EditorState['washes']['scrims'][number] => !!t && typeof t === 'object' && 'variable' in t)
-    .map((t) => ({ ...t, variable: WASH_VAR_RENAMES[t.variable] ?? t.variable }));
-  return carried.length > 0 ? carried : fallback();
+type LegacyStop = { variable: string; alias?: unknown; opacity?: unknown };
+
+function isScale(raw: unknown): raw is WashScale {
+  return !!raw && typeof raw === 'object'
+    && typeof (raw as WashScale).color === 'string'
+    && Array.isArray((raw as WashScale).stops);
+}
+
+function washScale(current: unknown, legacyList: unknown, family: WashFamily): WashScale {
+  if (isScale(current)) return current;
+  const scale = makeDefaultWashScale(family);
+  if (!Array.isArray(legacyList)) return scale;
+  const stops = legacyList.filter((t): t is LegacyStop => !!t && typeof t === 'object' && 'variable' in t);
+  const base = stops.find((t) => LEGACY_STOP_OPACITY_VARS[t.variable] === `--${family}-opacity`) ?? stops[0];
+  if (typeof base?.alias === 'string') scale.color = base.alias;
+  for (const t of stops) {
+    const stop = scale.stops.find((s) => s.variable === LEGACY_STOP_OPACITY_VARS[t.variable]);
+    if (stop && typeof t.opacity === 'number') stop.opacity = t.opacity;
+  }
+  return scale;
 }
 
 export function normalizeWashes(state: EditorState): EditorState {
@@ -113,8 +136,8 @@ export function normalizeWashes(state: EditorState): EditorState {
   const legacy = ((state as unknown as { overlays?: LegacyWashes }).overlays ?? {}) as LegacyWashes;
   const next = { ...state } as EditorState & { overlays?: unknown };
   next.washes = {
-    scrims: washList(washes.scrims ?? legacy.tokens, makeDefaultScrimTokens),
-    tints: washList(washes.tints ?? washes.hoverTokens ?? legacy.hoverTokens, makeDefaultTintTokens),
+    scrim: washScale(washes.scrim, washes.scrims ?? legacy.tokens, 'scrim'),
+    tint: washScale(washes.tint, washes.tints ?? washes.hoverTokens ?? legacy.hoverTokens, 'tint'),
   };
   delete next.overlays;
   return next;

package/src/editor/core/store/editorStore.ts

@@ -152,12 +152,8 @@ export {
 export {
   washesToVars,
   WASH_VAR_NAMES,
-  applyWashVarsToState,
   makeDefaultWashesState,
-  makeDefaultScrimTokens,
-  makeDefaultTintTokens,
-  washTokenToCss,
-  parseWashCss,
+  makeDefaultWashScale,
 } from '../themes/slices/washes';
 
 export {

package/src/editor/core/store/editorTypes.ts

@@ -23,16 +23,20 @@ export interface ShadowOverrideFlags {
   distance: boolean; blur: boolean; size: boolean;
 }
 
-/** A wash: an aliased color token + an opacity. Emits as
- *  `color-mix(in srgb, var(<alias>) <opacity%>, transparent)`. Scrims dim what
- *  is behind them; tints shade the surface they sit on. */
-export interface WashToken {
+/** One opacity stop of a wash family, emitted as a bare number. */
+export interface WashStop {
   variable: string;
   label: string;
-  alias: string;
   opacity: number;
 }
 
+/** A wash family: one aliased colour and its opacity stops. Scrims dim what is
+ *  behind them; tints shade the surface they sit on. */
+export interface WashScale {
+  color: string;
+  stops: WashStop[];
+}
+
 export interface ColumnsState {
   count: number;
   maxWidth: number;
@@ -113,8 +117,8 @@ export interface EditorState {
     overrides: Record<string, ShadowOverrideFlags>;
   };
   washes: {
-    scrims: WashToken[];
-    tints: WashToken[];
+    scrim: WashScale;
+    tint: WashScale;
   };
   columns: ColumnsState;
   components: Record<string, ComponentSlice>;

package/src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts

@@ -0,0 +1,56 @@
+import type { Migration } from './index';
+
+/**
+ * A screen's scrim is one fill again (2026-09-21).
+ *
+ * From 0.84.0 Dialog and ImageLightbox read `-scrim-color` and
+ * `-scrim-opacity` and mixed them where they painted. The theme now composes
+ * `--scrim-low`, `--scrim`, and `--scrim-high` from its own colour and
+ * strengths, so a screen picks one of those stops as `-scrim-surface`, the way
+ * a hover picks a `--tint-*` stop.
+ *
+ * The scale's colour at one of its strengths becomes that stop. Any other pair
+ * becomes the `color-mix()` the screen used to paint, so the page looks the
+ * same.
+ */
+const STOPS: Record<string, string> = {
+  '--scrim-opacity-low': '--scrim-low',
+  '--scrim-opacity': '--scrim',
+  '--scrim-opacity-high': '--scrim-high',
+};
+
+const PAIR = /^--(imagelightbox|dialog)-scrim-(color|opacity)$/;
+
+const ref = (value: string) => (value.startsWith('--') ? `var(${value})` : value);
+
+function fill(color: string, opacity: string): string {
+  if (color === '--scrim-color' && STOPS[opacity]) return STOPS[opacity];
+  if (opacity === '1') return color;
+  const pct = Number.isFinite(Number(opacity))
+    ? `${Number(opacity) * 100}%`
+    : `calc(${ref(opacity)} * 100%)`;
+  return `color-mix(in srgb, ${ref(color)} ${pct}, transparent)`;
+}
+
+export const componentMigration_2026_09_21_scrimSurface: Migration = {
+  id: '2026-09-21-scrim-surface',
+  fromVersion: 37,
+  toVersion: 38,
+  appliesTo: 'component-config',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    const pairs: Record<string, { color?: string; opacity?: string }> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = PAIR.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      (pairs[match[1]] ??= {})[match[2] as 'color' | 'opacity'] = value;
+    }
+    for (const [id, { color = '--scrim-color', opacity = '--scrim-opacity-high' }] of Object.entries(pairs)) {
+      out[`--${id}-scrim-surface`] = fill(color, opacity);
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-21-wash-color-and-opacity.ts

@@ -0,0 +1,51 @@
+import type { Migration } from './index';
+
+/**
+ * A wash family's colour and its strengths, apart (2026-09-21).
+ *
+ * A theme stored each `--scrim-*` and `--tint-*` stop as a composed fill,
+ * `color-mix(in srgb, var(<colour>) N%, transparent)`, so the colour was
+ * restated three times and the fill overrode the one tokens.css composes from
+ * `--scrim-color` and `--scrim-opacity-*`. That left Dialog and ImageLightbox,
+ * which read the pair, deaf to every theme's scrim.
+ *
+ * Each family now stores `--<family>-color` and `--<family>-opacity-*`. The
+ * base stop gives the colour, falling back to the first stop that parses. A
+ * stop that does not parse is a hand-written fill: it stays, so the page keeps
+ * painting what the theme's author chose.
+ */
+const FAMILIES = ['scrim', 'tint'] as const;
+
+const COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i;
+const PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+
+function parseFill(raw: string): { color: string; opacity: number } | null {
+  const s = raw.trim();
+  const mix = s.match(COLOR_MIX_RE);
+  if (mix) return { color: mix[1], opacity: Math.min(100, Number(mix[2])) / 100 };
+  const plain = s.match(PLAIN_VAR_RE);
+  return plain ? { color: plain[1], opacity: 1 } : null;
+}
+
+export const colorsAndTypeMigration_2026_09_21_washColorAndOpacity: Migration = {
+  id: '2026-09-21-wash-color-and-opacity',
+  fromVersion: 8,
+  toVersion: 9,
+  appliesTo: 'colors-and-type',
+  apply(rawVars) {
+    const out = { ...rawVars };
+    for (const family of FAMILIES) {
+      let color: string | null = null;
+      for (const suffix of ['', '-low', '-high']) {
+        const key = `--${family}${suffix}`;
+        const parsed = out[key] === undefined ? null : parseFill(out[key]);
+        if (!parsed) continue;
+        color ??= parsed.color;
+        out[`--${family}-opacity${suffix}`] = String(parsed.opacity);
+        delete out[key];
+      }
+      if (color) out[`--${family}-color`] = `var(${color})`;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/index.ts

@@ -81,6 +81,8 @@ import { componentMigration_2026_09_13_indicator } from './2026-09-13-indicator'
 import { componentMigration_2026_09_13_sectiondividerSurface } from './2026-09-13-sectiondivider-surface';
 import { componentMigration_2026_09_20_imagelightboxScrim } from './2026-09-20-imagelightbox-scrim';
 import { componentMigration_2026_09_20_scrimColorAndOpacity } from './2026-09-20-scrim-color-and-opacity';
+import { colorsAndTypeMigration_2026_09_21_washColorAndOpacity } from './2026-09-21-wash-color-and-opacity';
+import { componentMigration_2026_09_21_scrimSurface } from './2026-09-21-scrim-surface';
 import { componentMigration_2026_09_13_cornerbadgePrefix } from './2026-09-13-cornerbadge-prefix';
 import { componentMigration_2026_09_13_toggleLabel } from './2026-09-13-toggle-label';
 import { componentMigration_2026_09_13_collapsiblesectionOpen } from './2026-09-13-collapsiblesection-open';
@@ -136,6 +138,8 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_09_13_badgeBrand,
   componentMigration_2026_09_20_imagelightboxScrim,
   componentMigration_2026_09_20_scrimColorAndOpacity,
+  colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
+  componentMigration_2026_09_21_scrimSurface,
 ];
 
 function countFor(kind: 'colors-and-type' | 'component-config'): number {

package/src/editor/core/themes/slices/washes.ts

@@ -1,107 +1,89 @@
 /**
- * Washes slice — a wash is a translucent layer of color, stored as
- * `{alias, opacity}` and emitted as
- * `color-mix(in srgb, var(<alias>) <pct>%, transparent)`, so it follows its
- * aliased source token (a brand-color shift propagates without re-editing
- * every stop).
+ * Washes slice — a wash is a translucent layer of color. Each family holds one
+ * colour, aliased to a theme token, and three opacity stops. The theme emits
+ * the colour and the stops; tokens.css composes the `--scrim-*` and `--tint-*`
+ * fills from them, so the strength moves without restating the colour.
  *
  * Two families, opposite jobs. A **scrim** dims what sits behind it, which is
- * what a modal needs. A **tint** shades the surface it sits on, which is what
- * a hover needs. They are not interchangeable: scrims alias a near-black
- * surface, tints alias the text color, so a tint lightens a dark theme and
- * darkens a light one without picking a direction.
- *
- * Defaults diverge from tokens.css by design: the editor starts from a
- * neutral alias and tokens.css continues to win until first edit.
+ * what a modal needs, so its stops run dark. A **tint** shades the surface it
+ * sits on, which is what a hover needs, so its stops run faint. Scrims alias a
+ * near-black surface and tints the text color, so a tint lightens a dark theme
+ * and darkens a light one without picking a direction.
  */
-import type { EditorState, WashToken } from '../../store/editorTypes';
+import type { EditorState, WashScale } from '../../store/editorTypes';
 
-export function makeDefaultScrimTokens(): WashToken[] {
-  return [
-    { variable: '--scrim-low',  label: 'Low',  alias: '--surface-neutral-lowest', opacity: 0.38 },
-    { variable: '--scrim',      label: 'Base', alias: '--surface-neutral-lowest', opacity: 0.51 },
-    { variable: '--scrim-high', label: 'High', alias: '--surface-neutral-lowest', opacity: 0.64 },
-  ];
-}
+export type WashFamily = 'scrim' | 'tint';
+
+export const WASH_FAMILIES: readonly WashFamily[] = ['scrim', 'tint'];
 
-export function makeDefaultTintTokens(): WashToken[] {
-  return [
-    { variable: '--tint-low',  label: 'Low',  alias: '--text-primary', opacity: 0.05 },
-    { variable: '--tint',      label: 'Base', alias: '--text-primary', opacity: 0.1  },
-    { variable: '--tint-high', label: 'High', alias: '--text-primary', opacity: 0.15 },
-  ];
+export function makeDefaultWashScale(family: WashFamily): WashScale {
+  if (family === 'scrim') {
+    return {
+      color: '--surface-neutral-lowest',
+      stops: [
+        { variable: '--scrim-opacity-low',  label: 'Low',  opacity: 0.7 },
+        { variable: '--scrim-opacity',      label: 'Base', opacity: 0.8 },
+        { variable: '--scrim-opacity-high', label: 'High', opacity: 0.9 },
+      ],
+    };
+  }
+  return {
+    color: '--text-primary',
+    stops: [
+      { variable: '--tint-opacity-low',  label: 'Low',  opacity: 0.05 },
+      { variable: '--tint-opacity',      label: 'Base', opacity: 0.1  },
+      { variable: '--tint-opacity-high', label: 'High', opacity: 0.15 },
+    ],
+  };
 }
 
 export function makeDefaultWashesState(): EditorState['washes'] {
   return {
-    scrims: makeDefaultScrimTokens(),
-    tints: makeDefaultTintTokens(),
+    scrim: makeDefaultWashScale('scrim'),
+    tint: makeDefaultWashScale('tint'),
   };
 }
 
-export const WASH_VAR_NAMES = [
-  '--scrim-low', '--scrim', '--scrim-high',
-  '--tint-low', '--tint', '--tint-high',
-] as const;
+export const washColorVar = (family: WashFamily) => `--${family}-color`;
 
-export function washTokenToCss(t: WashToken): string {
-  const pct = Math.round(t.opacity * 100);
-  if (pct >= 100) return `var(${t.alias})`;
-  return `color-mix(in srgb, var(${t.alias}) ${pct}%, transparent)`;
-}
+export const WASH_VAR_NAMES: readonly string[] = WASH_FAMILIES.flatMap((family) => [
+  washColorVar(family),
+  ...makeDefaultWashScale(family).stops.map((s) => s.variable),
+]);
 
-const COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
 const PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
 
-export function parseWashCss(raw: string): { alias: string; opacity: number } | null {
-  const s = raw.trim();
-  const mix = s.match(COLOR_MIX_RE);
-  if (mix) {
-    const pct = parseInt(mix[2], 10);
-    if (!Number.isFinite(pct)) return null;
-    return { alias: mix[1], opacity: Math.max(0, Math.min(100, pct)) / 100 };
-  }
-  const plain = s.match(PLAIN_VAR_RE);
-  if (plain) return { alias: plain[1], opacity: 1 };
-  return null;
-}
-
 export function washesToVars(w: EditorState['washes']): Record<string, string> {
   const out: Record<string, string> = {};
-  for (const t of w.scrims) out[t.variable] = washTokenToCss(t);
-  for (const t of w.tints) out[t.variable] = washTokenToCss(t);
+  for (const family of WASH_FAMILIES) {
+    out[washColorVar(family)] = `var(${w[family].color})`;
+    for (const s of w[family].stops) out[s.variable] = String(s.opacity);
+  }
   return out;
 }
 
-export function applyWashVarsToState(washes: EditorState['washes'], vars: Record<string, string>): void {
-  const applyTo = (list: WashToken[]) => {
-    for (const t of list) {
-      const raw = vars[t.variable];
-      if (!raw) continue;
-      const parsed = parseWashCss(raw);
-      if (!parsed) continue;
-      t.alias = parsed.alias;
-      t.opacity = parsed.opacity;
-    }
-  };
-  applyTo(washes.scrims);
-  applyTo(washes.tints);
-}
-
 /**
- * Loader: route wash entries from a freshly-loaded theme's vars bag into
- * `next.washes` and remove them from the bag — but only when the value parses
- * as the new format (color-mix / plain var). Legacy rgba values pass through to
- * the cssVars bag so the DOM still paints them; the user's next edit in the
- * picker promotes them to the typed slice.
+ * Loader: route a freshly-loaded theme's wash entries into `next.washes` and
+ * remove them from the bag. A colour that is not a plain `var()` stays in the
+ * bag so the DOM still paints it.
  */
 export function loadWashesFromVars(
   next: EditorState,
   rawVars: Record<string, string>,
 ): void {
-  applyWashVarsToState(next.washes, rawVars);
-  for (const name of WASH_VAR_NAMES) {
-    const raw = rawVars[name];
-    if (raw && parseWashCss(raw) !== null) delete rawVars[name];
+  for (const family of WASH_FAMILIES) {
+    const scale = next.washes[family];
+    const colorVar = washColorVar(family);
+    const color = rawVars[colorVar]?.trim().match(PLAIN_VAR_RE);
+    if (color) {
+      scale.color = color[1];
+      delete rawVars[colorVar];
+    }
+    for (const s of scale.stops) {
+      const n = Number(rawVars[s.variable]);
+      if (rawVars[s.variable] === undefined || !Number.isFinite(n)) continue;
+      s.opacity = Math.max(0, Math.min(1, n));
+      delete rawVars[s.variable];
+    }
   }
 }

package/src/editor/overlay/LiveEditorOverlay.svelte

@@ -47,6 +47,8 @@
     projectRoot = INJECTED_PROJECT_ROOT
   }: Props = $props();
 
+  let activeLink = $derived(navLinks.find((l) => l.path === $route));
+
   // Dev-only; skip inside iframe (editor route embeds this app).
   const isDev = import.meta.env.DEV;
   const isInIframe = typeof window !== 'undefined' && window.parent !== window;
@@ -677,22 +679,19 @@
 
     {#if open && navLinks.length > 0}
       <div class="seg-group" transition:fade={BTN_FADE}>
-        <span class="seg-label">Active Page:</span>
-        <div class="seg-bar" role="tablist" aria-label="Underlying page">
-          {#each navLinks as link (link.path)}
-            <button
-              type="button"
-              role="tab"
-              class="seg-pill"
-              class:active={$route === link.path}
-              aria-selected={$route === link.path}
-              disabled={link.disabled}
-              onclick={() => navigate(link.path)}
-            >
-              {#if link.icon}<i class="fas {link.icon}"></i>{/if}
-              <span>{link.label}</span>
-            </button>
-          {/each}
+        <label class="seg-label" for="lt-active-page">Active Page:</label>
+        <div class="page-select">
+          {#if activeLink?.icon}<i class="fas {activeLink.icon} page-icon"></i>{/if}
+          <select
+            id="lt-active-page"
+            value={$route}
+            onchange={(e) => navigate(e.currentTarget.value)}
+          >
+            {#each navLinks as link (link.path)}
+              <option value={link.path} disabled={link.disabled}>{link.label}</option>
+            {/each}
+          </select>
+          <i class="fas fa-chevron-down page-caret"></i>
         </div>
       </div>
     {/if}
@@ -1116,61 +1115,55 @@
     color: var(--ui-text-primary, #fff);
   }
 
-  .seg-bar {
+  .page-select {
+    position: relative;
     display: inline-flex;
     align-items: center;
-    gap: var(--ui-space-4, 4px);
-    padding: 3px;
+  }
+
+  .page-select select {
+    appearance: none;
+    color-scheme: dark;
+    padding: var(--ui-space-4, 4px) calc(var(--ui-space-8, 8px) + 20px) var(--ui-space-4, 4px) var(--ui-space-8, 8px);
     background: rgba(0, 0, 0, 0.55);
     border: 1px solid rgba(255, 255, 255, 0.28);
     border-radius: var(--ui-radius-lg, 6px);
-    box-shadow:
-      inset 0 1px 0 rgba(0, 0, 0, 0.5),
-      0 0 0 1px rgba(0, 0, 0, 0.4);
-  }
-
-  .seg-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-4, 4px);
-    padding: var(--ui-space-4, 4px) var(--ui-space-8, 8px);
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 3px;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--ui-text-primary, #fff);
     font-family: inherit;
     font-size: var(--ui-font-size-md, 16px);
     font-weight: var(--ui-font-weight-medium, 500);
     cursor: pointer;
-    transition:
-      background var(--ui-transition-fast, 120ms ease),
-      color var(--ui-transition-fast, 120ms ease),
-      border-color var(--ui-transition-fast, 120ms ease);
+    transition: border-color var(--ui-transition-fast, 120ms ease);
   }
 
-  .seg-pill i {
-    font-size: var(--ui-font-size-md, 16px);
-    opacity: 0.85;
+  .page-icon ~ select {
+    padding-left: calc(var(--ui-space-8, 8px) + 24px);
   }
 
-  .seg-pill:hover:not(:disabled) {
-    color: rgba(255, 255, 255, 0.9);
+  .page-select select:hover {
+    border-color: rgba(255, 255, 255, 0.5);
   }
 
-  .seg-pill:disabled {
-    color: rgba(255, 255, 255, 0.28);
-    cursor: not-allowed;
+  .page-select select:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
   }
 
-  .seg-pill:disabled i {
-    opacity: 0.5;
+  .page-icon,
+  .page-caret {
+    position: absolute;
+    pointer-events: none;
+    color: rgba(255, 255, 255, 0.6);
   }
 
-  /* Outlined (not filled) so this reads as sibling to iframe's switcher, not a twin. */
-  .seg-pill.active {
-    color: var(--ui-text-primary, #fff);
-    border-color: rgba(255, 255, 255, 0.5);
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
+  .page-icon {
+    left: var(--ui-space-8, 8px);
+    font-size: var(--ui-font-size-md, 16px);
+  }
+
+  .page-caret {
+    right: var(--ui-space-8, 8px);
+    font-size: var(--ui-font-size-xs, 12px);
   }
 
   .frame-wrap {

package/src/editor/pages/ComponentEditorPage.svelte

@@ -193,7 +193,7 @@
     </div>
     {#if drawerOpen}
       <div class="sidebar-footer">
-        <ThemePanel showComponentsLink={false} />
+        <ThemePanel />
       </div>
     {/if}
   </nav>