@motion-proto/live-tokens 0.7.1 → 0.8.0

package/src/editor/ui/GradientEditor.svelte

@@ -1,50 +1,76 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  /**
-   * Visual gradient editor. Stops are draggable diamond handles below a live
-   * ribbon; only the selected stop exposes its position + color controls (the
-   * old list of every stop is replaced by this single-row pattern, mirroring
-   * GradientCard.svelte). Stops can be added/removed with a minimum of two.
-   */
+    // Visual gradient editor: draggable stop diamonds on a live ribbon.
+  // Bound to a GradientSource (theme via `variable`, or component via `source`).
   import { tick, onMount } from 'svelte';
-  import {
-    editorState,
-    setGradient,
-    setGradientType,
-    setGradientAngle,
-    setGradientStop,
-    addGradientStop,
-    removeGradientStop,
-  } from '../core/store/editorStore';
+  import { get } from 'svelte/store';
   import type { GradientType, GradientTokenStop } from '../core/store/editorTypes';
+  import {
+    themeGradientSource,
+    snapshotGradient,
+    type GradientSource,
+    type GradientSourceSnapshot,
+  } from '../core/store/gradientSource';
   import GradientStopPicker from './GradientStopPicker.svelte';
   import AngleDial from '../component-editor/scaffolding/AngleDial.svelte';
+  import RadialShapePad from '../component-editor/scaffolding/RadialShapePad.svelte';
+  import UISegmentedControl from './UISegmentedControl.svelte';
+  import UIPillButton from './UIPillButton.svelte';
+  import { snapTokenToFamily } from '../core/palettes/familySwap';
 
   interface Props {
-    variable: string;
+    /** Theme-gradient mode: variable name (e.g. `--gradient-1`). */
+    variable?: string;
+    /** Component-gradient mode: source adapter. Wins over `variable`. */
+    source?: GradientSource;
+    /** Header label above the ribbon; turns the editor into a 2-col grid. */
+    sectionLabel?: string;
+    /** Stable id for per-stop picker scratch vars. */
+    stopIdPrefix?: string;
+    /** Greys out tokens outside this family prefix in the stop picker. */
+    familyFilter?: string | null;
+    /** Show the "None" segment so the user can clear the fill outright. */
+    showNone?: boolean;
+    /** Called when the user picks "None" so the parent can zero ancillary tokens. */
+    onNone?: () => void;
     onsave?: () => void;
     oncancel?: () => void;
   }
 
-  let { variable, onsave, oncancel }: Props = $props();
-
-  /** Deep snapshot of the gradient at editor open, used to restore on Cancel. */
-  let snapshot: { type: GradientType; angle: number; stops: GradientTokenStop[] } | null = null;
+  let {
+    variable,
+    source,
+    sectionLabel,
+    stopIdPrefix,
+    familyFilter = null,
+    showNone = false,
+    onNone,
+    onsave,
+    oncancel,
+  }: Props = $props();
+
+  // Captured once: callers remount when the target gradient changes.
+  // svelte-ignore state_referenced_locally
+  const gradientSource: GradientSource = source ?? themeGradientSource(variable!);
+  // Local const so Svelte 5's `$<store>` auto-subscription works.
+  const gradientSourceCurrent = gradientSource.current;
+  // svelte-ignore state_referenced_locally
+  const stopKeyPrefix: string = stopIdPrefix ?? variable ?? 'gradient-edit';
+
+  // Snapshot at open, restored on Cancel.
+  let snapshot: GradientSourceSnapshot | null = null;
   onMount(() => {
-    const g = $editorState.gradients.tokens.find((t) => t.variable === variable);
-    if (g) {
-      snapshot = { type: g.type, angle: g.angle, stops: g.stops.map((s) => ({ ...s })) };
-    }
+    snapshot = snapshotGradient(gradientSource);
   });
 
   function save() { onsave?.(); }
   function cancel() {
-    if (snapshot) setGradient(variable, snapshot);
+    if (snapshot) gradientSource.setAll(snapshot);
     oncancel?.();
   }
 
-  let gradient = $derived($editorState.gradients.tokens.find((t) => t.variable === variable));
+  let gradient = $derived($gradientSourceCurrent);
   let stopCount = $derived(gradient?.stops.length ?? 0);
 
   let selected = $state(0);
@@ -54,16 +80,20 @@
   });
 
   function setType(type: GradientType) {
-    setGradientType(variable, type);
+    gradientSource.setType(type);
   }
 
   function onAngleChange(detail: { value: number }) {
-    setGradientAngle(variable, detail.value);
+    gradientSource.setAngle(detail.value);
+  }
+
+  function onAspectChange(detail: { x: number; y: number }) {
+    gradientSource.setAspect(detail);
   }
 
   function setPosition(i: number, pct: number) {
     const clamped = Math.max(0, Math.min(100, Math.round(pct * 10) / 10));
-    setGradientStop(variable, i, { position: clamped });
+    gradientSource.setStop(i, { position: clamped });
   }
 
   function onPositionInput(e: Event) {
@@ -72,23 +102,44 @@
   }
 
   function handleStopChange(i: number, payload: { color: string; opacity: number }) {
-    setGradientStop(variable, i, { color: payload.color, opacity: payload.opacity });
+    // Picking a real color while `none` promotes to `solid`; `transparent` keeps `none`.
+    if (gradient?.type === 'none' && payload.color !== 'transparent') {
+      gradientSource.setType('solid');
+    }
+    gradientSource.setStop(i, { color: payload.color, opacity: payload.opacity });
+  }
+
+  // Mono on: snap to family. Mono off: mark off-palette so family swaps skip it.
+  function handleMonoToggle(i: number, mono: boolean) {
+    if (mono && familyFilter) {
+      const stop = gradient?.stops[i];
+      if (stop) {
+        const snapped = snapTokenToFamily(stop.color, familyFilter);
+        gradientSource.setStop(i, { monochrome: true, color: snapped });
+        return;
+      }
+    }
+    gradientSource.setStop(i, { monochrome: mono });
   }
 
-  /** Insert a stop at the given percentage, inheriting color/opacity from the
-   *  given source stop. Selects the newly inserted stop once the store sort
-   *  settles. */
-  async function insertStopAt(pct: number, source: GradientTokenStop) {
+  function stopValueLabel(stop: GradientTokenStop): string {
+    const op = stop.opacity ?? 100;
+    const base = stop.color.startsWith('--') ? stop.color.slice(2) : stop.color;
+    return op < 100 ? `${base} (${Math.round(op)}%)` : base;
+  }
+
+  // Inserts at pct inheriting from source stop, then selects after the sort settles.
+  async function insertStopAt(pct: number, sourceStop: GradientTokenStop) {
     const clamped = Math.max(0, Math.min(100, Math.round(pct * 10) / 10));
-    addGradientStop(variable, {
+    gradientSource.addStop({
       position: clamped,
-      color: source.color,
-      opacity: source.opacity ?? 100,
+      color: sourceStop.color,
+      opacity: sourceStop.opacity ?? 100,
     });
     await tick();
-    const after = $editorState.gradients.tokens.find((t) => t.variable === variable);
+    const after = get(gradientSource.current);
     if (after) {
-      const idx = after.stops.findIndex((s) => s.position === clamped && s.color === source.color);
+      const idx = after.stops.findIndex((s) => s.position === clamped && s.color === sourceStop.color);
       if (idx >= 0) selected = idx;
     }
   }
@@ -96,8 +147,7 @@
   function addStop() {
     if (!gradient) return;
     const stops = gradient.stops;
-    // Insert after the currently-selected stop, midway to its right neighbour
-    // (or to 100% if it's the last stop).
+    // Midway to the right neighbour, or to 100% if last.
     const anchor = stops[selected] ?? stops[stops.length - 1];
     const next = stops[selected + 1];
     const newPos = next
@@ -106,13 +156,19 @@
     insertStopAt(newPos, anchor);
   }
 
-  /** Click on the ribbon body inserts a stop at that position, picking up the
-   *  color/opacity of the closest existing stop so the new handle starts from
-   *  a sensible color rather than a default. */
+  // Inserts a stop at click position, inheriting from the nearest existing stop.
   function onRibbonClick(e: MouseEvent) {
     if (!gradient || e.button !== 0) return;
     const rect = barEl!.getBoundingClientRect();
-    const pct = ((e.clientX - rect.left) / rect.width) * 100;
+    const x = e.clientX - rect.left;
+    let pct: number;
+    if (gradient.type === 'radial') {
+      // Radial: both halves map to the same distance from center.
+      const half = rect.width / 2;
+      pct = (Math.abs(x - half) / half) * 100;
+    } else {
+      pct = (x / rect.width) * 100;
+    }
     const nearest = gradient.stops.reduce(
       (best, s) => (Math.abs(s.position - pct) < Math.abs(best.position - pct) ? s : best),
       gradient.stops[0],
@@ -122,23 +178,32 @@
 
   function removeSelected() {
     if (!gradient || gradient.stops.length <= 2) return;
-    removeGradientStop(variable, selected);
+    gradientSource.removeStop(selected);
     if (selected > 0) selected -= 1;
   }
 
-  // ── Ribbon handle drag ─────────────────────────────────────────────────
+  // Ribbon handle drag
   let barEl: HTMLDivElement | undefined = $state();
   let dragIndex: number | null = $state(null);
+  // Drag origin side on radial ribbon: lets pointer x map symmetrically to stop position.
+  let dragSide: 'left' | 'right' | null = $state(null);
 
   function pctFromEvent(e: PointerEvent): number {
     const rect = barEl!.getBoundingClientRect();
     const x = e.clientX - rect.left;
+    if (gradient?.type === 'radial') {
+      const half = rect.width / 2;
+      return dragSide === 'left'
+        ? ((half - x) / half) * 100
+        : ((x - half) / half) * 100;
+    }
     return (x / rect.width) * 100;
   }
 
-  function onHandleDown(e: PointerEvent, i: number) {
+  function onHandleDown(e: PointerEvent, i: number, side: 'left' | 'right' | null = null) {
     selected = i;
     dragIndex = i;
+    dragSide = side;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
     setPosition(i, pctFromEvent(e));
   }
@@ -150,133 +215,275 @@
     if (dragIndex === null) return;
     (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
     dragIndex = null;
+    dragSide = null;
+  }
+
+  // Synthesise ribbon background from the snapshot so it renders before the
+  // CSS var has been pushed to :root. Radial mirrors stops across 50%.
+  function stopColorCss(s: GradientTokenStop): string {
+    const base = s.color.startsWith('--') ? `var(${s.color})` : s.color;
+    const op = s.opacity ?? 100;
+    return op >= 100 ? base : `color-mix(in srgb, ${base} ${Math.round(op)}%, transparent)`;
   }
 
-  // Stop colors rendered into the diamonds: token refs become var(...).
+  let ribbonBg = $derived.by(() => {
+    if (!gradient) return 'transparent';
+    if (gradient.type === 'none') return 'transparent';
+    if (gradient.type === 'solid') {
+      const first = gradient.stops[0];
+      return first ? stopColorCss(first) : 'transparent';
+    }
+    const sorted = gradient.stops.slice().sort((a, b) => a.position - b.position);
+    if (gradient.type === 'radial') {
+      const leftStops = sorted.slice().reverse().map((s) => `${stopColorCss(s)} ${50 - s.position / 2}%`);
+      const rightStops = sorted.map((s) => `${stopColorCss(s)} ${50 + s.position / 2}%`);
+      return `linear-gradient(90deg, ${[...leftStops, ...rightStops].join(', ')})`;
+    }
+    const stopsCss = sorted.map((s) => `${stopColorCss(s)} ${s.position}%`).join(', ');
+    return `linear-gradient(90deg, ${stopsCss})`;
+  });
+
+  // Flat (solid/none) = single-stop passive UI. Linear/radial show full chrome.
+  let isFlat = $derived(gradient?.type === 'solid' || gradient?.type === 'none');
+  let isNone = $derived(gradient?.type === 'none');
+  let isRadial = $derived(gradient?.type === 'radial');
+  let isLinear = $derived(gradient?.type === 'linear');
+  // Right column carries the radial pad or angle dial.
+  let hasAside = $derived(isRadial || isLinear);
+
   let stopSwatches = $derived((gradient?.stops ?? []).map((s) => {
     const base = s.color.startsWith('--') ? `var(${s.color})` : s.color;
     const op = s.opacity ?? 100;
     return op >= 100 ? base : `color-mix(in srgb, ${base} ${Math.round(op)}%, transparent)`;
   }));
+
+  type TypeChoice = 'none' | 'solid' | 'linear' | 'radial';
+  let typeOptions = $derived(
+    [
+      ...(showNone ? [{ value: 'none' as TypeChoice, label: 'None' }] : []),
+      { value: 'solid' as TypeChoice, label: 'Solid' },
+      { value: 'linear' as TypeChoice, label: 'Linear' },
+      { value: 'radial' as TypeChoice, label: 'Radial' },
+    ],
+  );
+
+  function onTypeSelect(next: TypeChoice) {
+    setType(next as GradientType);
+    if (next === 'none') onNone?.();
+  }
 </script>
 
 {#if gradient}
-  <div class="gradient-editor">
-    <div class="ribbon-wrap">
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <div
-        class="ribbon"
-        bind:this={barEl}
-        style="background: var({variable});"
-        onclick={onRibbonClick}
-        role="button"
-        tabindex="-1"
-        aria-label="Click to add a gradient stop"
-      ></div>
-      <div class="handles">
-        {#each gradient.stops as stop, i (i)}
-          <button
-            type="button"
-            class="handle"
-            class:selected={selected === i}
-            class:dragging={dragIndex === i}
-            style="left: {stop.position}%; --stop-color: {stopSwatches[i]};"
-            onpointerdown={(e) => onHandleDown(e, i)}
-            onpointermove={onHandleMove}
-            onpointerup={onHandleUp}
-            onpointercancel={onHandleUp}
-            title={`Stop ${i + 1} (${stop.position}%)`}
-            aria-label={`Gradient stop ${i + 1}`}
-          >
-            <span class="handle-diamond"></span>
-          </button>
-        {/each}
+  <div class="gradient-editor" class:has-pad={hasAside}>
+    {#if sectionLabel || hasAside}
+      <div class="editor-header editor-section-left">
+        <span class="editor-section-label">{sectionLabel ?? ''}</span>
+        {#if !isFlat}
+          <div class="stop-actions">
+            <UIPillButton
+              variant="secondary"
+              size="compact"
+              icon="fa-plus"
+              title="Add stop"
+              onclick={addStop}
+            >Add stop</UIPillButton>
+            <UIPillButton
+              variant="secondary"
+              size="compact"
+              icon="fa-times"
+              title={gradient.stops.length <= 2 ? 'Gradient needs at least two stops' : 'Remove selected stop'}
+              disabled={gradient.stops.length <= 2}
+              onclick={removeSelected}
+            >Remove stop</UIPillButton>
+          </div>
+        {/if}
       </div>
-    </div>
-
-    <div class="controls-row">
-      <div class="type-toggle" role="radiogroup">
-        <button
-          type="button"
-          class:active={gradient.type === 'linear'}
-          onclick={() => setType('linear')}
-        >Linear</button>
-        <button
-          type="button"
-          class:active={gradient.type === 'radial'}
-          onclick={() => setType('radial')}
-        >Radial</button>
+      {#if isRadial}
+        <span class="editor-section-label editor-section-right">Gradient shape</span>
+      {:else if isLinear}
+        <span class="editor-section-label editor-section-right">Gradient angle</span>
+      {/if}
+    {/if}
+    <div class="ribbon-stack">
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+          class="ribbon"
+          class:solid={isFlat}
+          class:none={isNone}
+          class:radial={isRadial}
+          bind:this={barEl}
+          style="background: {ribbonBg};"
+          onclick={isFlat ? undefined : onRibbonClick}
+          role={isFlat ? 'presentation' : 'button'}
+          tabindex="-1"
+          aria-label={isNone ? 'No fill' : isFlat ? 'Solid color preview' : isRadial ? 'Click the right side to add a gradient stop' : 'Click to add a gradient stop'}
+        >
+          {#if isRadial}<span class="center-divider" aria-hidden="true"></span>{/if}
+        </div>
+        {#if !isFlat}
+          <div class="handles" class:radial={isRadial}>
+            {#if isRadial}
+              {#each gradient.stops as stop, i (`mirror-${i}`)}
+                <button
+                  type="button"
+                  class="handle"
+                  class:selected={selected === i}
+                  class:dragging={dragIndex === i && dragSide === 'left'}
+                  style="left: {50 - stop.position / 2}%; --stop-color: {stopSwatches[i]};"
+                  onpointerdown={(e) => onHandleDown(e, i, 'left')}
+                  onpointermove={onHandleMove}
+                  onpointerup={onHandleUp}
+                  onpointercancel={onHandleUp}
+                  title={`Stop ${i + 1} (${stop.position}%) — linked pair`}
+                  aria-label={`Gradient stop ${i + 1}, mirrored side`}
+                >
+                  <span class="handle-diamond"></span>
+                </button>
+              {/each}
+            {/if}
+            {#each gradient.stops as stop, i (i)}
+              <button
+                type="button"
+                class="handle"
+                class:selected={selected === i}
+                class:dragging={dragIndex === i && dragSide !== 'left'}
+                style="left: {isRadial ? 50 + stop.position / 2 : stop.position}%; --stop-color: {stopSwatches[i]};"
+                onpointerdown={(e) => onHandleDown(e, i, isRadial ? 'right' : null)}
+                onpointermove={onHandleMove}
+                onpointerup={onHandleUp}
+                onpointercancel={onHandleUp}
+                title={`Stop ${i + 1} (${stop.position}%)`}
+                aria-label={`Gradient stop ${i + 1}`}
+              >
+                <span class="handle-diamond"></span>
+              </button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {#if gradient.type === 'radial'}
+      <div class="ribbon-pad">
+        <RadialShapePad
+          x={gradient.aspectX ?? 1}
+          y={gradient.aspectY ?? 1}
+          onchange={onAspectChange}
+        />
       </div>
-      {#if gradient.type === 'linear'}
-        <div class="angle-slot">
-          <AngleDial value={gradient.angle} onchange={onAngleChange} />
+    {:else if gradient.type === 'linear'}
+      <div class="ribbon-pad ribbon-pad-linear">
+        <AngleDial value={gradient.angle} size={64} orientation="vertical" label="" onchange={onAngleChange} />
+      </div>
+    {/if}
+
+    <div class="lower-row">
+      <UISegmentedControl
+        value={gradient.type as TypeChoice}
+        options={typeOptions}
+        ariaLabel="Gradient fill type"
+        onchange={onTypeSelect}
+      />
+      {#if gradient.stops[selected]}
+        {@const stop = gradient.stops[selected]}
+        {@const stopMono = stop.monochrome !== false}
+        <div class="stop-edit-row">
+          <span class="row-label">{isFlat ? 'Color' : `Stop ${selected + 1}`}</span>
+          {#if !isFlat}
+            <label class="pos-input">
+              <input
+                type="number"
+                min="0"
+                max="100"
+                step="0.1"
+                value={stop.position}
+                onchange={onPositionInput}
+              />
+              <span class="suffix">%</span>
+            </label>
+          {/if}
+          <div class="picker-column">
+            <div class="picker-slot">
+              <GradientStopPicker
+                stopId={`${stopKeyPrefix}-${selected}`}
+                color={stop.color}
+                opacity={stop.opacity ?? 100}
+                familyFilter={stopMono ? familyFilter : null}
+                onchange={(payload) => handleStopChange(selected, payload)}
+              />
+            </div>
+            {#if familyFilter !== null}
+              <label class="stop-mono-check">
+                <input
+                  type="checkbox"
+                  checked={stopMono}
+                  onchange={(e) => handleMonoToggle(selected, (e.currentTarget as HTMLInputElement).checked)}
+                />
+                <span>Monochrome</span>
+              </label>
+            {/if}
+          </div>
+          <span class="stop-value-text" title={stopValueLabel(stop)}>{stopValueLabel(stop)}</span>
         </div>
       {/if}
-      <div class="spacer"></div>
-      <button
-        type="button"
-        class="ghost-btn"
-        onclick={addStop}
-        title="Add stop"
-      >
-        <i class="fas fa-plus"></i> Add stop
-      </button>
-      <button
-        type="button"
-        class="ghost-btn"
-        onclick={removeSelected}
-        disabled={gradient.stops.length <= 2}
-        title={gradient.stops.length <= 2 ? 'Gradient needs at least two stops' : 'Remove selected stop'}
-      >
-        <i class="fas fa-times"></i> Remove
-      </button>
     </div>
 
-    {#if gradient.stops[selected]}
-      <div class="stop-edit-row">
-        <span class="row-label">Stop {selected + 1}</span>
-        <label class="pos-input">
-          <input
-            type="number"
-            min="0"
-            max="100"
-            step="0.1"
-            value={gradient.stops[selected].position}
-            onchange={onPositionInput}
-          />
-          <span class="suffix">%</span>
-        </label>
-        <div class="picker-slot">
-          <GradientStopPicker
-            stopId={`${variable}-${selected}`}
-            color={gradient.stops[selected].color}
-            opacity={gradient.stops[selected].opacity ?? 100}
-            onchange={(payload) => handleStopChange(selected, payload)}
-          />
-        </div>
+    {#if onsave || oncancel}
+      <div class="footer-row">
+        <UIPillButton variant="secondary" size="compact" onclick={cancel}>Cancel</UIPillButton>
+        <UIPillButton variant="primary" size="compact" onclick={save}>Save</UIPillButton>
       </div>
     {/if}
-
-    <div class="footer-row">
-      <button type="button" class="ghost-btn" onclick={cancel}>Cancel</button>
-      <button type="button" class="primary-btn" onclick={save}>Save</button>
-    </div>
   </div>
 {/if}
 
 <style>
+  /* Header labels share grid tracks with the ribbon + pad below them. */
   .gradient-editor {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--ui-space-12);
+    width: 100%;
+    min-width: 0;
+  }
+  .gradient-editor.has-pad {
+    grid-template-columns: minmax(0, 1fr) max-content;
+    column-gap: var(--ui-space-16);
+  }
+
+  .editor-section-label {
+    font-size: var(--ui-font-size-md);
+    font-weight: 500;
+    color: var(--ui-text-primary);
+    line-height: 1;
+  }
+  .editor-section-left { grid-column: 1; }
+  .editor-section-right { grid-column: 2; }
+
+  /* Header doubles as a toolbar: label left, Add/Remove flush right. */
+  .editor-header {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
     gap: var(--ui-space-12);
-    width: 100%;
     min-width: 0;
   }
 
-  .ribbon-wrap {
+  .ribbon-stack {
+    grid-column: 1;
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
+    min-width: 0;
+  }
+
+  /* min-height reserves the radial pad's full height so swapping types doesn't shift the lower row. */
+  .ribbon-pad {
+    grid-column: 2;
+    align-self: start;
+    min-height: 94px;
+  }
+  .ribbon-pad-linear {
+    display: flex;
+    justify-content: center;
   }
 
   .ribbon {
@@ -287,13 +494,35 @@
     cursor: copy;
   }
 
+  /* Flat ribbon: passive swatch, no click affordance. */
+  .ribbon.solid {
+    cursor: default;
+  }
+
+  /* Radial: left half is a mirror, so suppress the copy cursor across the whole ribbon. */
+  .ribbon.radial {
+    cursor: default;
+  }
+
+  /* Marks the radial center (position 0). */
+  .center-divider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 1px;
+    background: var(--ui-border);
+    pointer-events: none;
+    transform: translateX(-0.5px);
+  }
+
+
   .handles {
     position: relative;
     height: 1.25rem;
   }
 
-  /* Button is a generous (1.25rem) transparent hit target; the visible marker
-     lives in `.handle-diamond` inside. Mirrors GradientCard. */
+  /* 1.25rem hit target; visible marker is the inner .handle-diamond. */
   .handle {
     position: absolute;
     top: 0;
@@ -337,75 +566,83 @@
     box-shadow: 0 0 0 2px var(--ui-text-primary);
   }
 
-  .controls-row {
+
+  /* Per-gradient controls under the ribbon: type selector + stop edit row. */
+  .lower-row {
+    grid-column: 1 / -1;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: var(--ui-space-12);
     flex-wrap: wrap;
   }
 
-  .spacer { flex: 1 1 auto; }
-
-  .type-toggle {
+  .stop-actions {
     display: inline-flex;
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-md);
-    overflow: hidden;
-  }
-
-  .type-toggle button {
-    padding: var(--ui-space-4) var(--ui-space-12);
-    background: transparent;
-    border: none;
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-sm);
-    cursor: pointer;
-    font-family: inherit;
+    align-items: center;
+    gap: var(--ui-space-6);
+    flex: 0 0 auto;
   }
 
-  .type-toggle button.active {
-    background: var(--ui-surface-high);
-    color: var(--ui-text-primary);
+  /* Row 1: label / percent / picker / slug. Row 2: Monochrome under picker. */
+  .stop-edit-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--ui-space-12);
+    flex: 1 1 18rem;
+    min-width: 0;
   }
-
-  .type-toggle button + button {
-    border-left: 1px solid var(--ui-border-low);
+  .stop-edit-row > .row-label,
+  .stop-edit-row > .pos-input,
+  .stop-edit-row > .stop-value-text {
+    line-height: 1.75rem;
   }
 
-  .ghost-btn {
-    display: inline-flex;
-    align-items: center;
+  .picker-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
     gap: var(--ui-space-6);
-    padding: var(--ui-space-4) var(--ui-space-10);
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-sm);
-    cursor: pointer;
-    font-family: inherit;
+    flex: 0 0 auto;
   }
 
-  .ghost-btn:hover:not(:disabled) {
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border);
+  /* Hide picker's built-in meta; we render the slug ourselves. */
+  .stop-edit-row :global(.ui-ts-meta-text) {
+    display: none;
   }
 
-  .ghost-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+  /* Stop slug, mirrors UITokenSelector meta typography. */
+  .stop-value-text {
+    flex: 1 1 0;
+    min-width: 0;
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .stop-edit-row {
-    display: flex;
-    flex-wrap: wrap;
+  .stop-mono-check {
+    display: inline-flex;
     align-items: center;
-    gap: var(--ui-space-12);
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    user-select: none;
+    flex: 0 0 auto;
   }
+  .stop-mono-check:hover { color: var(--ui-text-primary); }
+  .stop-mono-check input { margin: 0; cursor: pointer; }
 
+  /* Peers the section label; 1.5rem left-pad aligns with the ribbon's content edge. */
   .row-label {
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-md);
+    font-weight: 500;
+    color: var(--ui-text-primary);
+    line-height: 1;
+    padding-left: 1.5rem;
     white-space: nowrap;
   }
 
@@ -418,7 +655,7 @@
   }
 
   .pos-input input {
-    width: 4.5rem;
+    width: 2.25rem;
     padding: var(--ui-space-2) var(--ui-space-6);
     background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-low);
@@ -437,34 +674,17 @@
     color: var(--ui-text-tertiary);
   }
 
+  /* 8rem matches the property-row token selector width (see TokenLayout). */
   .picker-slot {
-    flex: 1 1 12rem;
-    min-width: 8rem;
+    flex: 0 0 auto;
+    width: 8rem;
   }
 
   .footer-row {
+    grid-column: 1 / -1;
     display: flex;
     justify-content: flex-end;
     gap: var(--ui-space-8);
     padding-top: var(--ui-space-4);
   }
-
-  .primary-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-    padding: var(--ui-space-4) var(--ui-space-12);
-    background: var(--ui-surface-high);
-    border: 1px solid var(--ui-border-high);
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-text-primary);
-    font-size: var(--ui-font-size-sm);
-    cursor: pointer;
-    font-family: inherit;
-  }
-
-  .primary-btn:hover {
-    background: var(--ui-surface-higher);
-    border-color: var(--ui-border-higher);
-  }
 </style>