@motion-proto/live-tokens 0.85.0 → 0.86.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 0.86.0 — Video and slides ship as components
+
+### Added
+
+- **VideoLightbox.** A still that fades the page away and plays its clip in
+  the middle of the screen. A click anywhere, the close button, or Escape
+  closes it. Tile, scrim, and close-button chrome are editable, with a hover
+  state for the close button. Every shipped theme carries it, derived from
+  that theme's ImageLightbox so the two match.
+
+- **VideoFrame.** It plays a clip in place from a poster frame, with a play
+  badge or no chrome at all, and falls back to the poster when the clip is
+  not served.
+
+- **SlidePager.** It flips a deck of slides in place. Its full-screen view
+  pages through every slide with the same bar and the arrow keys, and has a
+  close button and Tab stops on its controls. Its chevrons are inline SVG, so
+  it needs no icon font.
+
+  Every shipped theme carries VideoFrame and SlidePager, with frame corners
+  and borders taken from that theme's ImageLightbox and Card. The catalogue
+  entries of the four media components point to each other.
+
+### Changed
+
+- **Every ImageLightbox shows a close button.** A plain lightbox closed only
+  on a click, and nothing on screen said so. The close button now renders for
+  every lightbox and holds focus when the modal opens. An extended lightbox
+  also closes on a click to its unzoomed image; zoomed, a click still pans.
+
+- **The editor overlay picks the active page from a dropdown.** The theme
+  panel's Components and Sketchstyle rows lose their Open buttons, since the
+  view switcher at the top of the panel already opens both. The font pairing
+  moves into the Colors & Type info box.
+
+### Fixed
+
+- **`check-component --tests` collects only the installed package's
+  contracts.** `createVitestConfig` globbed the whole project, so a nested
+  project with its own copy of the package in `node_modules` added that
+  copy's contracts to the run, and they failed against this project's
+  registry. The default now scans the contract files' own directory, the way
+  `createPlaywrightConfig` already did.
+
 ## 0.85.0 — A theme's scrims and tints are a colour and three strengths
 
 ### Changed

package/README.md

@@ -11,7 +11,7 @@ The editor is dev-only. Production builds get plain CSS variables and the compon
 ## Features
 
 - **Live token editing.** Colors, typography, spacing, radii, shadows, motion, palettes, and gradients. Every input writes a CSS variable, so the page repaints with no reload and no build step.
-- **Live component editing.** 26 shipped Svelte components (Button, IconButton, Input, Card, Dialog, Badge, Callout, Table, Tooltip, Toggle, TabBar, SegmentedControl, RadioButton, MenuSelect, ProgressBar, CornerBadge, SectionDivider, CollapsibleSection, Notification, Image, ImageLightbox, CodeSnippet, SideNavigation, Panel, InlineEditActions, Slider) declare their design-token aliases in a `:global(:root)` block. Rewire an alias from the component's editor and it updates everywhere that component is used, on your real pages.
+- **Live component editing.** 29 shipped Svelte components (Button, IconButton, Input, Card, Dialog, Badge, Callout, Table, Tooltip, Toggle, TabBar, SegmentedControl, RadioButton, MenuSelect, ProgressBar, CornerBadge, SectionDivider, CollapsibleSection, Notification, Image, ImageLightbox, VideoLightbox, VideoFrame, SlidePager, CodeSnippet, SideNavigation, Panel, InlineEditActions, Slider) declare their design-token aliases in a `:global(:root)` block. Rewire an alias from the component's editor and it updates everywhere that component is used, on your real pages.
 - **Four dev-only routes.** `/live-tokens/editor` for tokens, `/live-tokens/colors` for palettes, `/live-tokens/components` for per-component aliases, `/live-tokens/docs` for the user guide.
 - **Editor overlay.** Pins to the top right of every dev page and opens the editor in a side panel or floating window, so you edit on the page you are styling. Its "Page Source" button opens the current page's `.svelte` file in VS Code.
 - **Themes.** A theme is a whole look in one file: colors and type plus a config for every component, stored by value. Loading one changes a single pointer file, and nothing your site ships changes until you Adopt. Export a theme and import it into another project to restore the look in one step.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.85.0",
+  "version": "0.86.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/component-editor/SlidePagerEditor.svelte

@@ -0,0 +1,118 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'slidepager';
+
+  // Single variant: the default carries the frame, the bar, the counter and
+  // the control's resting look. Hover and disabled layer on the control alone.
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'surface color', element: 'frame', variable: '--slidepager-frame-surface' },
+      { label: 'border color', element: 'frame', variable: '--slidepager-frame-border' },
+      { label: 'border width', canBeLinked: true, element: 'frame', variable: '--slidepager-frame-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'frame', variable: '--slidepager-frame-radius' },
+      { label: 'shadow', element: 'frame', variable: '--slidepager-frame-shadow' },
+      { label: 'gap', canBeLinked: true, element: 'bar', variable: '--slidepager-bar-gap' },
+      { label: 'padding', canBeLinked: true, element: 'bar', variable: '--slidepager-bar-padding' },
+      { label: 'surface color', element: 'control', variable: '--slidepager-control-surface' },
+      { label: 'border color', element: 'control', variable: '--slidepager-control-border' },
+      { label: 'border width', canBeLinked: true, element: 'control', variable: '--slidepager-control-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'control', variable: '--slidepager-control-radius' },
+      { label: 'size', canBeLinked: true, element: 'control', variable: '--slidepager-control-size' },
+      { label: 'icon color', element: 'control', variable: '--slidepager-control-icon' },
+      { label: 'icon size', canBeLinked: true, element: 'control', variable: '--slidepager-control-icon-size' },
+      { label: 'text color', element: 'counter', variable: '--slidepager-counter-text' },
+      { label: 'font family', element: 'counter', variable: '--slidepager-counter-font-family' },
+      { label: 'font size', element: 'counter', variable: '--slidepager-counter-font-size' },
+      { label: 'font weight', element: 'counter', variable: '--slidepager-counter-font-weight' },
+      { label: 'line height', element: 'counter', variable: '--slidepager-counter-line-height' },
+      { label: 'letter spacing', element: 'counter', variable: '--slidepager-counter-letter-spacing' },
+      { label: 'scrim color', element: 'overlay', variable: '--slidepager-scrim-surface' },
+      { label: 'padding', canBeLinked: true, element: 'overlay', variable: '--slidepager-overlay-padding' },
+      { label: 'close button margin', canBeLinked: true, element: 'overlay', variable: '--slidepager-close-margin' },
+      { label: 'fade duration', element: 'overlay', variable: '--slidepager-overlay-duration' },
+      { label: 'fade easing', element: 'overlay', variable: '--slidepager-overlay-easing' }
+    ],
+    hover: [
+      { label: 'surface color', element: 'control', variable: '--slidepager-control-hover-surface' },
+      { label: 'border color', element: 'control', variable: '--slidepager-control-hover-border' },
+      { label: 'icon color', element: 'control', variable: '--slidepager-control-hover-icon' }
+    ],
+    disabled: [
+      { label: 'surface color', element: 'control', variable: '--slidepager-control-disabled-surface' },
+      { label: 'border color', element: 'control', variable: '--slidepager-control-disabled-border' },
+      { label: 'icon color', element: 'control', variable: '--slidepager-control-disabled-icon' }
+    ]
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import SlidePager, { type SlidePage } from '../../system/components/SlidePager.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import page04 from '../../system/assets/slide-04.webp';
+  import page05 from '../../system/assets/slide-05.webp';
+  import page06 from '../../system/assets/slide-06.webp';
+
+  const demoSlides: SlidePage[] = [
+    { src: page04, alt: 'Types of disabilities: visual, auditory, motor, cognitive', width: 960, height: 540 },
+    { src: page05, alt: 'Permanent, temporary, or situational', width: 960, height: 540 },
+    { src: page06, alt: 'Non-apparent disabilities', width: 960, height: 540 }
+  ];
+
+  // The control's two states are forced on both chevrons at once, so the strip
+  // shows each one without a pointer and without landing on an end slide.
+  function forceClass(activeState: string) {
+    if (activeState === 'hover') return 'force-hover';
+    if (activeState === 'disabled') return 'force-disabled';
+    return '';
+  }
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Slide Pager"
+  description="A deck of slides the reader flips through in place, one at a time. Clicking the frame opens a full-screen read that pages through every slide, with the same bar and a close button. The open preview shows it in place."
+  tokens={allTokens}
+>
+  <VariantGroup
+    name="slidepager"
+    title="Slide Pager"
+    {states}
+    {component}
+    elementOrder={['frame', 'bar', 'control', 'counter', 'overlay']}
+  >
+    {#snippet children({ activeState }: { activeState: string })}
+      <div class="slidepager-demo">
+        <div class="slidepager-demo-inline">
+          <SlidePager slides={demoSlides} index={1} class={forceClass(activeState)} />
+        </div>
+        <div class="slidepager-demo-open">
+          <SlidePager slides={demoSlides} index={1} inline class={forceClass(activeState)} />
+        </div>
+      </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .slidepager-demo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--ui-space-32);
+    width: 100%;
+  }
+
+  .slidepager-demo-inline {
+    flex: 1 1 22rem;
+    max-width: 32rem;
+  }
+
+  .slidepager-demo-open {
+    flex: 1 1 16rem;
+    max-width: 22rem;
+  }
+</style>

package/src/editor/component-editor/VideoFrameEditor.svelte

@@ -0,0 +1,73 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'videoframe';
+
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'surface color', element: 'frame', variable: '--videoframe-frame-surface' },
+      { label: 'clip surface color', element: 'frame', variable: '--videoframe-clip-surface' },
+      { label: 'border color', element: 'frame', variable: '--videoframe-frame-border' },
+      { label: 'border width', canBeLinked: true, element: 'frame', variable: '--videoframe-frame-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'frame', variable: '--videoframe-frame-radius' },
+      { label: 'surface color', element: 'badge', variable: '--videoframe-badge-default-surface' },
+      { label: 'border color', element: 'badge', variable: '--videoframe-badge-default-border' },
+      { label: 'border width', canBeLinked: true, element: 'badge', variable: '--videoframe-badge-default-border-width' },
+      { label: 'size', canBeLinked: true, element: 'badge', variable: '--videoframe-badge-default-size' },
+      { label: 'icon color', element: 'badge', variable: '--videoframe-badge-default-icon' },
+      { label: 'icon size', canBeLinked: true, element: 'badge', variable: '--videoframe-badge-default-icon-size' },
+      { label: 'hover duration', element: 'badge', variable: '--videoframe-badge-duration' },
+      { label: 'hover easing', element: 'badge', variable: '--videoframe-badge-easing' }
+    ],
+    hover: [
+      { label: 'surface color', element: 'badge', variable: '--videoframe-badge-hover-surface' },
+      { label: 'border color', element: 'badge', variable: '--videoframe-badge-hover-border' },
+      { label: 'icon color', element: 'badge', variable: '--videoframe-badge-hover-icon' }
+    ]
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import VideoFrame from '../../system/components/VideoFrame.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import clipUrl from '../../system/assets/watch-navigation.mp4';
+  import posterUrl from '../../system/assets/watch-navigation-poster.webp';
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Video Frame"
+  description="A poster frame that plays its clip in place when clicked."
+  tokens={allTokens}
+>
+  <VariantGroup
+    name="videoframe"
+    title="Video Frame"
+    {states}
+    {component}
+    elementOrder={['frame', 'badge']}
+  >
+    {#snippet children({ activeState }: { activeState: string })}
+      <div class="videoframe-demo">
+        <VideoFrame
+          src={clipUrl}
+          poster={posterUrl}
+          alt="Navigation running on a smartwatch"
+          width={480}
+          height={552}
+          class={activeState === 'hover' ? 'force-hover' : ''}
+        />
+      </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .videoframe-demo {
+    width: 100%;
+    max-width: 14rem;
+  }
+</style>

package/src/editor/component-editor/VideoLightboxEditor.svelte

@@ -0,0 +1,95 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'videolightbox';
+
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'surface color', element: 'tile', variable: '--videolightbox-tile-surface' },
+      { label: 'border color', element: 'tile', variable: '--videolightbox-tile-border' },
+      { label: 'border width', canBeLinked: true, element: 'tile', variable: '--videolightbox-tile-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'tile', variable: '--videolightbox-tile-radius' },
+      { label: 'shadow', element: 'tile', variable: '--videolightbox-tile-shadow' },
+      { label: 'scrim color', element: 'overlay', variable: '--videolightbox-scrim-surface' },
+      { label: 'padding', canBeLinked: true, element: 'overlay', variable: '--videolightbox-overlay-padding' },
+      { label: 'fade duration', element: 'overlay', variable: '--videolightbox-overlay-duration' },
+      { label: 'fade easing', element: 'overlay', variable: '--videolightbox-overlay-easing' },
+      { label: 'surface color', element: 'close', variable: '--videolightbox-chrome-surface' },
+      { label: 'border color', element: 'close', variable: '--videolightbox-chrome-border' },
+      { label: 'border width', canBeLinked: true, element: 'close', variable: '--videolightbox-chrome-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'close', variable: '--videolightbox-chrome-radius' },
+      { label: 'icon color', element: 'close', variable: '--videolightbox-chrome-icon' },
+    ],
+    hover: [
+      { label: 'surface color', element: 'close', variable: '--videolightbox-chrome-hover-surface' },
+    ],
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import VideoLightbox from '../../system/components/VideoLightbox.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import clipUrl from '../../system/assets/watch-navigation.mp4';
+  import posterUrl from '../../system/assets/watch-navigation-poster.webp';
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Video Lightbox"
+  description="A small still that fades the page away and plays its clip in the middle of the screen. Click anywhere, the close button, or Escape to close it. The open preview beside the tile shows the overlay and close button in place."
+  tokens={allTokens}
+>
+  <VariantGroup
+    name="videolightbox"
+    title="Video Lightbox"
+    {states}
+    {component}
+    elementOrder={['tile', 'overlay', 'close']}
+  >
+    {#snippet children({ activeState })}
+    <div class="videolightbox-demo">
+      <div class="videolightbox-demo-tile">
+        <VideoLightbox
+          src={clipUrl}
+          poster={posterUrl}
+          alt="Navigation running on a smartwatch"
+          width={480}
+          height={552}
+        />
+      </div>
+      <div class="videolightbox-demo-open">
+        <VideoLightbox
+          src={clipUrl}
+          poster={posterUrl}
+          width={480}
+          height={552}
+          inline
+          class={activeState === 'hover' ? 'force-hover' : ''}
+        />
+      </div>
+    </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .videolightbox-demo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-32);
+    width: 100%;
+  }
+
+  .videolightbox-demo-tile {
+    width: 8rem;
+  }
+
+  .videolightbox-demo-open {
+    flex: 1 1 18rem;
+    max-width: 28rem;
+  }
+</style>

package/src/editor/component-editor/registry.ts

@@ -24,6 +24,12 @@ import ImageEditor, { allTokens as imageTokens, intrinsics as imageIntrinsics }
 import { catalogue as imageCatalogue } from '../../system/components/Image.svelte';
 import ImageLightboxEditor, { allTokens as imageLightboxTokens } from './ImageLightboxEditor.svelte';
 import { catalogue as imageLightboxCatalogue } from '../../system/components/ImageLightbox.svelte';
+import VideoLightboxEditor, { allTokens as videoLightboxTokens } from './VideoLightboxEditor.svelte';
+import VideoFrameEditor, { allTokens as videoFrameTokens } from './VideoFrameEditor.svelte';
+import { catalogue as videoFrameCatalogue } from '../../system/components/VideoFrame.svelte';
+import SlidePagerEditor, { allTokens as slidePagerTokens } from './SlidePagerEditor.svelte';
+import { catalogue as slidePagerCatalogue } from '../../system/components/SlidePager.svelte';
+import { catalogue as videoLightboxCatalogue } from '../../system/components/VideoLightbox.svelte';
 import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens } from './InlineEditActionsEditor.svelte';
 import { catalogue as inlineEditActionsCatalogue } from '../../system/components/InlineEditActions.svelte';
 import InputEditor, { allTokens as inputTokens } from './InputEditor.svelte';
@@ -81,7 +87,10 @@ type BuiltInComponentId =
   | 'tabbar'
   | 'toggle'
   | 'tooltip'
-  | 'progressbar';
+  | 'progressbar'
+  | 'videolightbox'
+  | 'videoframe'
+  | 'slidepager';
 
 /**
  * Public component id type. Widened to `string` because consumers can register
@@ -255,6 +264,36 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     catalogue: imageLightboxCatalogue,
     origin: 'system',
   },
+  videolightbox: {
+    id: 'videolightbox',
+    label: 'Video Lightbox',
+    icon: 'fas fa-circle-play',
+    sourceFile: 'src/system/components/VideoLightbox.svelte',
+    editorComponent: VideoLightboxEditor,
+    schema: videoLightboxTokens,
+    catalogue: videoLightboxCatalogue,
+    origin: 'system',
+  },
+  videoframe: {
+    id: 'videoframe',
+    label: 'Video Frame',
+    icon: 'fas fa-film',
+    sourceFile: 'src/system/components/VideoFrame.svelte',
+    editorComponent: VideoFrameEditor,
+    schema: videoFrameTokens,
+    catalogue: videoFrameCatalogue,
+    origin: 'system',
+  },
+  slidepager: {
+    id: 'slidepager',
+    label: 'Slide Pager',
+    icon: 'fas fa-images',
+    sourceFile: 'src/system/components/SlidePager.svelte',
+    editorComponent: SlidePagerEditor,
+    schema: slidePagerTokens,
+    catalogue: slidePagerCatalogue,
+    origin: 'system',
+  },
   inlineeditactions: {
     id: 'inlineeditactions',
     label: 'Inline Edit Actions',

package/src/editor/core/sketch/sketchLayer.ts

@@ -192,6 +192,13 @@ const PART_SPECS: readonly PartSpec[] = [
   // Close and the two nav chevrons all carry this class; each is fixed and
   // floats over the photo rather than a scrim of its own.
   { sel: '.image-lightbox-chrome', stem: 'imagelightbox-chrome', positioned: true, unmasked: true },
+  // The trigger inside clips the still, so the tile itself stays unclipped.
+  { sel: '.videolightbox', stem: 'videolightbox-tile' },
+  {
+    sel: '.videolightbox-modal', fill: 'var(--videolightbox-scrim-surface)',
+    stroke: 'transparent', positioned: true, unmasked: true,
+  },
+  { sel: '.videolightbox-close', stem: 'videolightbox-chrome', positioned: true, unmasked: true },
 
   // Status blocks
   ...STATUS_VARIANTS.map((v) => ({ sel: `.callout-${v}`, stem: `callout-${v}` })),

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>