@motion-proto/live-tokens 0.94.1 → 0.94.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.94.3 — Demo bar chrome
+
+### Fixed
+
+- **The demo's Theme and Sketch bar stays legible in every theme.** The bar
+  painted from the open theme's scrim, and its selects were themed Buttons, so
+  a theme or sketchstyle could leave its labels unreadable. The bar now paints
+  as editor chrome from the `--ui-*` tokens, like the editor overlay, and
+  sketch mode leaves it alone. `ThemeSelect` and `SketchSelect` take a
+  `chrome` prop for the bar. Elsewhere they stay themed.
+
+## 0.94.2 — Palette step confirm
+
+### Fixed
+
+- **Confirming a palette step after a curve change saves the override.** A
+  step left open while a lightness, saturation, or hue curve moved held its
+  draft in a deep reactive proxy. Confirm wrote that proxy into the store,
+  and the next edit failed to clone the state. The editor now keeps the draft
+  as a plain value.
+
+### Changed
+
+- **The demo page's closing quote stands on its own.** The illustration beside
+  it is gone, and the quote sits centered between Layers and Get Started.
+
 ## 0.94.1 — Adopt after a save
 
 ### Fixed

package/package.json

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

package/src/demo/ChromeSelect.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import UIMenuButton from '../editor/ui/UIMenuButton.svelte';
+  import UIOptionList from '../editor/ui/UIOptionList.svelte';
+  import UIOptionItem from '../editor/ui/UIOptionItem.svelte';
+
+  interface Props {
+    label: string;
+    items: { value: string; label: string }[];
+    value: string;
+    /** Trigger text when `value` matches no item. Defaults to the label. */
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    onchange: (value: string) => void;
+  }
+
+  let {
+    label: heading,
+    items,
+    value,
+    placeholder = heading,
+    disabled = false,
+    error = '',
+    onchange,
+  }: Props = $props();
+
+  const selectedLabel = $derived(items.find((item) => item.value === value)?.label ?? placeholder);
+
+  function select(next: string, close: () => void): void {
+    close();
+    if (next === value) return;
+    onchange(next);
+  }
+</script>
+
+<!-- LabeledSelect's twin in the editor's --ui-* chrome. It needs an
+     .editor-page ancestor, which scopes those tokens and hosts the menu. -->
+<div class="chrome-select" inert={disabled || items.length === 0}>
+  <span class="chrome-select-label">{heading}</span>
+
+  <UIMenuButton header={heading} triggerClass="chrome-select-trigger" menuMinWidth="12rem">
+    {#snippet trigger()}
+      <span>{selectedLabel}</span>
+      <i class="fas fa-chevron-down" aria-hidden="true"></i>
+    {/snippet}
+    {#snippet children({ close })}
+      <UIOptionList>
+        {#each items as item (item.value)}
+          <UIOptionItem active={item.value === value} onclick={() => select(item.value, close)}>
+            {#snippet label()}{item.label}{/snippet}
+          </UIOptionItem>
+        {/each}
+      </UIOptionList>
+    {/snippet}
+  </UIMenuButton>
+
+  {#if error}
+    <span class="error" aria-live="polite">{error}</span>
+  {/if}
+</div>
+
+<style>
+  .chrome-select {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+
+  .chrome-select[inert] {
+    opacity: var(--ui-opacity-disabled);
+  }
+
+  .chrome-select-label {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  .chrome-select :global(.chrome-select-trigger) {
+    min-width: 9rem;
+    justify-content: space-between;
+    gap: var(--ui-space-12);
+    padding: var(--ui-space-6) var(--ui-space-10);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+    border: 1px solid var(--ui-border);
+    border-radius: var(--ui-radius-md);
+    transition:
+      background var(--ui-transition-fast),
+      border-color var(--ui-transition-fast);
+  }
+
+  .chrome-select :global(.chrome-select-trigger:hover),
+  .chrome-select :global(.chrome-select-trigger[aria-expanded='true']) {
+    background: var(--ui-surface-highest);
+    border-color: var(--ui-border-higher);
+  }
+
+  .chrome-select :global(.chrome-select-trigger .fa-chevron-down) {
+    font-size: 0.625rem;
+    color: var(--ui-text-secondary);
+  }
+
+  .error {
+    max-width: 20rem;
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-link-broken);
+  }
+</style>

package/src/demo/Demo.svelte

@@ -64,14 +64,6 @@
     margin-top: var(--space-32);
   }
 
-  /* Overlap the offering image up into Layers (top) and butt Get Started
-     against its bottom. -space-64 cancels the grid row-gap; the extra
-     -space-64 on top is the actual overlap — tune that second term to taste. */
-  .kit > :global(.offering) {
-    margin-top: calc(var(--space-64) * -2 + var(--space-8));
-    margin-bottom: calc(var(--space-64) * -1);
-  }
-
   /* Inline code styling cascades into every section via :global descendants. */
   .kit :global(p > code),
   .kit :global(.callout code) {
@@ -89,9 +81,5 @@
       padding: var(--space-32) var(--space-16);
       row-gap: var(--space-48);
     }
-    .kit > :global(.offering) {
-      margin-top: calc(var(--space-48) * -2);
-      margin-bottom: calc(var(--space-48) * -1);
-    }
   }
 </style>

package/src/demo/DemoBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import '../editor/styles/ui-editor.css';
   import ThemeSelect from './ThemeSelect.svelte';
   import SketchSelect from './SketchSelect.svelte';
 
@@ -11,11 +12,14 @@
   } = $props();
 </script>
 
-<div class="demo-bar">
+<!-- Editor chrome, like the overlay: the bar paints from --ui-*, so every
+     theme leaves it legible, and data-live-tokens-chrome keeps sketch mode off
+     it. .editor-page scopes the --ui-* tokens and hosts the selects' menus. -->
+<div class="demo-bar editor-page" data-live-tokens-chrome>
   <div class="bar">
     <div class="pickers">
-      <ThemeSelect inline size="small" onpick={onThemePick} />
-      <SketchSelect inline size="small" onpick={onSketchPick} />
+      <ThemeSelect chrome onpick={onThemePick} />
+      <SketchSelect chrome onpick={onSketchPick} />
     </div>
   </div>
 </div>
@@ -27,9 +31,9 @@
     left: 0;
     right: 0;
     z-index: var(--z-sticky);
-    background: var(--scrim-high);
-    backdrop-filter: blur(var(--blur-md));
-    border-bottom: var(--border-width-1) solid var(--tint-high);
+    --sketch-icon-off: none;
+    background: var(--ui-surface-lower);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   /* The bar repeats the demo's .kit grid, so its content lines up with the
@@ -64,9 +68,6 @@
   @media (max-width: 600px) {
     .demo-bar {
       position: static;
-      background: none;
-      backdrop-filter: none;
-      border-bottom: none;
     }
     .bar {
       padding: var(--space-64) var(--space-16) 0;

package/src/demo/SketchSelect.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
   import LabeledSelect from './LabeledSelect.svelte';
+  import ChromeSelect from './ChromeSelect.svelte';
   import { setSketch, sketchPick, sketchStyles, unsavedSketchStyle } from '../editor/core/sketch';
 
-  let { inline = false, size = 'default', onpick }: { inline?: boolean; size?: 'default' | 'small'; onpick?: (id: string | null) => void } = $props();
+  let {
+    inline = false,
+    size = 'default',
+    chrome = false,
+    onpick,
+  }: {
+    inline?: boolean;
+    size?: 'default' | 'small';
+    /** Paint in the editor's --ui-* chrome; needs an .editor-page ancestor. */
+    chrome?: boolean;
+    onpick?: (id: string | null) => void;
+  } = $props();
 
   // The empty string is the placeholder's value, so off needs a name of its own.
   const OFF = 'none';
@@ -45,14 +57,26 @@
   }
 </script>
 
-<LabeledSelect
-  {inline}
-  {size}
-  label="Sketch"
-  {items}
-  value={selected}
-  placeholder="Custom"
-  disabled={busy}
-  {error}
-  onchange={changeSketch}
-/>
+{#if chrome}
+  <ChromeSelect
+    label="Sketch"
+    {items}
+    value={selected}
+    placeholder="Custom"
+    disabled={busy}
+    {error}
+    onchange={changeSketch}
+  />
+{:else}
+  <LabeledSelect
+    {inline}
+    {size}
+    label="Sketch"
+    {items}
+    value={selected}
+    placeholder="Custom"
+    disabled={busy}
+    {error}
+    onchange={changeSketch}
+  />
+{/if}

package/src/demo/ThemeSelect.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import LabeledSelect from './LabeledSelect.svelte';
+  import ChromeSelect from './ChromeSelect.svelte';
   import { listThemes, applyTheme } from '../editor/core/themes/themeService';
   import { openThemeSlug } from '../editor/core/store/editorConfigStore';
   import { carrySketch } from './sketchCarry';
 
-  let { inline = false, size = 'default', onpick }: { inline?: boolean; size?: 'default' | 'small'; onpick?: (fileName: string) => void } = $props();
+  let {
+    inline = false,
+    size = 'default',
+    chrome = false,
+    onpick,
+  }: {
+    inline?: boolean;
+    size?: 'default' | 'small';
+    /** Paint in the editor's --ui-* chrome; needs an .editor-page ancestor. */
+    chrome?: boolean;
+    onpick?: (fileName: string) => void;
+  } = $props();
 
   let themes = $state<{ value: string; label: string }[]>([]);
   let busy = $state(false);
@@ -40,13 +52,24 @@
 
 <!-- The open theme drives the selection, so applies from the Themes panel or
      another tab show up here too. -->
-<LabeledSelect
-  {inline}
-  {size}
-  label="Theme"
-  items={themes}
-  value={$openThemeSlug}
-  disabled={busy}
-  {error}
-  onchange={changeTheme}
-/>
+{#if chrome}
+  <ChromeSelect
+    label="Theme"
+    items={themes}
+    value={$openThemeSlug}
+    disabled={busy}
+    {error}
+    onchange={changeTheme}
+  />
+{:else}
+  <LabeledSelect
+    {inline}
+    {size}
+    label="Theme"
+    items={themes}
+    value={$openThemeSlug}
+    disabled={busy}
+    {error}
+    onchange={changeTheme}
+  />
+{/if}

package/src/demo/sections/SectionOffering.svelte

@@ -1,10 +1,6 @@
-<script lang="ts">
-  import offeringUrl from '../../system/assets/offering.webp';
-</script>
+<script lang="ts"></script>
 
 <section class="offering">
-  <img class="offering-image" src={offeringUrl} alt="" />
-
   <figure class="offering-quote">
     <blockquote>
       <p>
@@ -23,37 +19,11 @@
     display: grid;
     grid-template-columns: repeat(var(--columns-count), 1fr);
     column-gap: var(--columns-gutter);
-    position: relative;
-    z-index: 1;
-  }
-
-  /* Roughly a third of the content width, parked on the left edge so it
-     overlaps the left-hand card above without dominating the section. */
-  .offering-image {
-    grid-column: 2 / 7;
-    grid-row: 1;
-    display: block;
-    width: 100%;
-    height: auto;
-    border-radius: var(--radius-lg);
-    z-index: 1;
   }
 
-  /* Sits in the open space to the right of the image. No glass background.
-     align-self centers it on the image, then translateY drops it by half the
-     image's upward overlap (the extra -space-64 in Demo.svelte) so it lands in
-     the middle of the actual gap between the cards above and Get Started below. */
   .offering-quote {
-    grid-column: 7 / -2;
-    grid-row: 1;
-    align-self: center;
-    transform: translateY(calc(var(--space-64) / 2));
+    grid-column: 3 / -3;
     margin: 0;
-    /* Align body text to the card text above. The cards split this same span
-       in half, so the right card's left edge sits half a gutter right of line 7;
-       its body text is then inset by the card's --space-20 padding. Match both,
-       and the open quote dangles left into this padding (text-indent on p). */
-    padding-left: calc(var(--columns-gutter) / 2 + var(--space-20));
   }
 
   .offering-quote blockquote {
@@ -104,11 +74,8 @@
   }
 
   @media (max-width: 960px) {
-    .offering-image {
-      grid-column: 2 / 7;
-    }
     .offering-quote {
-      grid-column: 7 / -2;
+      grid-column: 2 / -2;
     }
     .offering-quote p {
       font-size: var(--font-size-xl);
@@ -116,17 +83,8 @@
   }
 
   @media (max-width: 600px) {
-    .offering-image {
-      grid-column: 1 / -1;
-      grid-row: 1;
-    }
     .offering-quote {
       grid-column: 1 / -1;
-      grid-row: 2;
-      align-self: auto;
-      width: auto;
-      margin: var(--space-16) 0 0;
-      padding-left: 0;
     }
     .offering-quote p {
       font-size: var(--font-size-4xl);

package/src/editor/ui/PaletteEditor.svelte

@@ -174,7 +174,10 @@
     edit('curveAutoSmooth', { ...curveAutoSmooth, [key]: value });
   }
 
-  let editing: EditingState = $state(idleState);
+  // `$state.raw`: confirmEdit writes the draft into the store, which
+  // structuredClones on every edit, and a deep `$state` proxy is not cloneable.
+  // Only ever reassigned whole.
+  let editing: EditingState = $state.raw(idleState);
 
   function computePaletteOklch(index: number, base: Oklch): Oklch {
     return computePaletteOklchPure(index, base, lightnessCurve, saturationCurve, curveOffset, hueCurve);

package/src/system/styles/CONVENTIONS.md

@@ -9,7 +9,7 @@ Each file plays a distinct role. Don't merge them without understanding why they
 | File | Scope | Tokens used | Loaded by | Notes |
 |---|---|---|---|---|
 | `tokens.css` | Themed pages | Defines `--color-*`, `--surface-*`, `--text-*`, `--space-*`, … | `main.ts` | **Runtime-edited.** The token editor rewrites this file via the `themeFileApi` Vite plugin. Starter content; consumers replace at will. |
-| `ui-editor.css` | Editor chrome only | Defines `--ui-*` (opaque grayscale, system fonts) | JS-imported by `Editor.svelte` and `ComponentEditorPage.svelte` | Deliberately isolated from the theme system so editor surfaces stay neutral while live theme edits flow through the components being edited. Never load globally. |
+| `ui-editor.css` | Editor chrome only | Defines `--ui-*` (opaque grayscale, system fonts) | JS-imported by `Editor.svelte`, `ComponentEditorPage.svelte`, `ColorsPage.svelte`, and the demo's `DemoBar.svelte` | Deliberately isolated from the theme system so editor surfaces stay neutral while live theme edits flow through the components being edited. Never load globally. |
 | `ui-form-controls.css` | Editor chrome only | Consumes `--ui-*` only | JS-imported by `Editor.svelte` and `ComponentEditorPage.svelte` | `.ui-form-select` / `.ui-form-input` / `.ui-form-field-*` classes. Used by `ProjectFontsSection`, `FontStackEditor`, `DialogEditor`, `NotificationEditor`. Theme-immune — must not reference `--font-*`, `--surface-*`, etc. |
 | `site.css` | Themed pages | Consumes theme tokens | Page-imported by `Home.svelte` | Consumer-facing starter typography for the landing page (unscoped `h1`, `p`, `a`, …). Never load on editor pages. Replaceable starter content — users edit or replace this file to style their own site. Components that slot consumer content (Card body, CollapsibleSection content, SectionKit) defend their body typography against these global rules with `@include slot-prose` (from `styles/_slot-prose.scss`): the mixin pins only the owned type axes (font-family, font-size, font-weight, line-height, color) plus list spacing onto slotted `p`/`ul`/`ol`/`li`, while `a`, `strong`, font-style, letter-spacing and text-transform are left to inherit the page (links stay links, a consumer's italics survive). `prose={false}` opts a slot out entirely, and the `check:slot-prose` guard fails the build on a hand-rolled copy of the pin. The demo page no longer imports it; the demo uses scoped classes and component-owned slot typography instead. |
 | `fonts.css` + `fonts/` | Themed pages only | n/a (`@font-face` only) | `main.ts` | Build-special-cased: copied directly to `dist/` without processing so Vite doesn't inline woff2 files as base64. Starter content; editor's font invariant means these never affect chrome. |