@motion-proto/live-tokens 0.54.2 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.55.0 — A focused palette arrives ready
+
+### Changed
+
+- **A palette focused before mount opens without the reveal.** `paletteEditorOpen`
+  started false and flipped in an effect, so a deep link that set the focus
+  ahead of mount landed the visitor mid-animation, reading as a page still
+  loading. The editor now reads the pending focus when it constructs and opens
+  on the first frame; the scroll that brings it into view jumps rather than
+  gliding, since nothing expanded for the motion to match. A jump from the
+  Colors view, where the editor is already mounted, keeps its reveal.
+
+- **"Base color must appear in palette" moved to the family band.** The toggle
+  sets `anchorToBase`, which is family-level config persisted in the theme,
+  but it sat in the base-colour panel among the controls that edit the colour's
+  *value* — and it only occupied a row of its own because it wrapped out of that
+  panel's title row. It now sits beside the family's name as
+  "Must appear in palette", the swatch alongside supplying the subject the label
+  drops; the full sentence stays as its title. The colour panel closes back up
+  to a title row and its sliders. Collapsed families are untouched: the setting
+  shows only while that family's editor is open, so a page of ten collapsed
+  palettes does not repeat it ten times.
+
+- **The palette band holds two columns at every width.** With the setting on
+  the band's row, a band too narrow for it wrapped the buttons to the left edge,
+  under the swatch. The setting sits in the identity column instead, a third
+  line under the hex — name, value and constraint all describe the family and
+  share its left rail — which leaves the buttons a column of their own that no
+  width takes away. They wrap among themselves against the right edge before the
+  cluster ever drops a line. The swatch keeps its square: the taller column
+  would otherwise stretch the chip into a rectangle.
+
 ## 0.54.2 — Palette focus is public API
 
 ### Added

package/package.json

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

package/src/editor/ui/PaletteEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
+  import { get } from 'svelte/store';
   import { oklchToHexClamped, type Oklch } from '../core/palettes/oklch';
   import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, hueCurveConfig } from './curveEngine';
   import ColorEditPanel from './ColorEditPanel.svelte';
@@ -114,7 +115,14 @@
   }
 
   let showDerived = $state(false);
-  let paletteEditorOpen = $state(false);
+  // A deep link sets the focus before this mounts, so the controls are open on
+  // the first frame: UIReveal's `{#if}` never toggles and there is no reveal to
+  // sit through. Landing mid-animation reads as a page still loading.
+  // svelte-ignore state_referenced_locally
+  // The mount-time value is the whole point: a family's label is fixed for the
+  // life of the instance (PALETTE_SPECS keys the `{#each}` by it).
+  const focusedOnMount = get(pendingPaletteFocus) === label;
+  let paletteEditorOpen = $state(focusedOnMount);
   let rootEl: HTMLElement | undefined = $state();
 
   // Arriving from the Colors view's Edit button: open this family's controls and
@@ -123,7 +131,11 @@
     if ($pendingPaletteFocus !== label) return;
     pendingPaletteFocus.set(null);
     paletteEditorOpen = true;
-    tick().then(() => rootEl?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+    // Nothing expanded when we opened on mount, so there is no motion for a
+    // smooth scroll to match — jump, and the first frame is the final state.
+    tick().then(() =>
+      rootEl?.scrollIntoView({ behavior: focusedOnMount ? 'auto' : 'smooth', block: 'start' }),
+    );
   });
 
   function setLightnessCurve(a: CurveAnchor[]) { edit('lightnessCurve', a); }
@@ -536,6 +548,18 @@
     onStartEdit={startBaseEdit}
     onCopyBaseHex={copyHex}
   >
+    {#snippet setting()}
+      <!-- The family's own swatch and name sit alongside, so the label drops
+           its subject; the title carries the full sentence. -->
+      <span class="base-anchor-toggle" title="Base color must appear in palette">
+        <Toggle
+          checked={anchorToBase}
+          onchange={(v) => setAnchorToBase(v ?? !anchorToBase)}
+          label="Must appear in palette"
+        />
+      </span>
+    {/snippet}
+
     {#snippet actions()}
       <PaletteJumpButton family={label} {displayLabel} target="wheel" />
       <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
@@ -563,18 +587,7 @@
           onCancel={cancelEdit}
           onRemoveOverride={() => {}}
           onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
-        >
-          {#snippet actions()}
-            <div class="base-anchor-toggle">
-              <Toggle
-                checked={anchorToBase}
-                onchange={(v) => setAnchorToBase(v ?? !anchorToBase)}
-                label="Base color must appear in palette"
-                labelFirst
-              />
-            </div>
-          {/snippet}
-        </ColorEditPanel>
+        />
       </div>
     </div>
   </UIReveal>
@@ -988,8 +1001,10 @@
     min-width: 0;
   }
 
+  /* A box of its own so the title has something to hover; placement in the
+     band belongs to PaletteBase. */
   .base-anchor-toggle {
-    margin-left: auto;
+    display: flex;
   }
 
   .curve-grid-span {

package/src/editor/ui/palette/PaletteBase.svelte

@@ -18,6 +18,9 @@
     onStartEdit: () => void;
     onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
     actions?: Snippet;
+    /** A family-level setting, shown beside the name while this family's
+     *  editor is open. Collapsed families keep the band to identity + actions. */
+    setting?: Snippet;
   }
 
   let {
@@ -29,10 +32,15 @@
     copiedKey,
     onStartEdit,
     onCopyBaseHex,
-    actions
+    actions,
+    setting
   }: Props = $props();
 
   let baseHex = $derived(oklchToHexClamped(baseColor.l, baseColor.c, baseColor.h));
+
+  // `pinnedOpen || isEditingBase` is exactly when the base panel shows: editing
+  // the base implies both a panel and a colour to put in it.
+  let showSetting = $derived(!!setting && (pinnedOpen || isEditingBase));
 </script>
 
 <div class="editor-top">
@@ -64,6 +72,10 @@
           aria-hidden="true"
         ></i>
       </button>
+
+      {#if showSetting}
+        <div class="header-setting">{@render setting?.()}</div>
+      {/if}
     </div>
   </div>
 
@@ -100,12 +112,28 @@
   .header-actions {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
     gap: var(--ui-space-8);
   }
 
+  /* Third line of the identity, under the hex: name, value, constraint all
+     describe the family and share its left rail. Keeping it out of the band's
+     row is what leaves the buttons a column of their own at every width. */
+  .header-setting {
+    display: flex;
+    align-items: center;
+    margin-top: var(--ui-space-4);
+  }
+
+  /* The setting makes the identity column taller than the swatch, and the row
+     stretches its items; left alone the chip would grow into a rectangle. It is
+     a colour sample, so it stays square and hangs from the top of the column. */
   .header-swatch {
     width: 4.5rem;
     min-height: 4.5rem;
+    aspect-ratio: 1;
+    align-self: flex-start;
     border-radius: var(--ui-radius-md);
     border: 2px solid var(--ui-border);
     flex-shrink: 0;