@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/component-editor/SectionDividerEditor.svelte

@@ -1,265 +0,0 @@
-<script module lang="ts">
-  import { buildSiblings } from './scaffolding/siblings';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
-
-  export const component = 'sectiondivider';
-
-  type Variant = 'canvas' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special';
-  const variants: { key: Variant; title: string }[] = [
-    { key: 'primary', title: 'Primary' },
-    { key: 'accent', title: 'Accent' },
-    { key: 'neutral', title: 'Neutral' },
-    { key: 'special', title: 'Special' },
-    { key: 'canvas', title: 'Canvas' },
-    { key: 'alternate', title: 'Alternate' },
-  ];
-
-  /** Frame tokens for a variant. Gradient tokens are owned by GradientCard, and
-   *  outline thickness/color are rendered nested under the title TypeEditor;
-   *  both are emitted only for `allTokens` (reset/registry) — not for the
-   *  per-state token grid. */
-  function frameTokens(v: Variant): Token[] {
-    return [
-      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--sectiondivider-${v}-padding` },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--sectiondivider-${v}-radius` },
-      { label: 'border color', canBeLinked: true, groupKey: 'border', variable: `--sectiondivider-${v}-border` },
-      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--sectiondivider-${v}-border-width` },
-      { label: 'drop shadow', canBeLinked: true, groupKey: 'shadow', variable: `--sectiondivider-${v}-shadow` },
-    ];
-  }
-  /** Title outline tokens — rendered inside the title TypeEditor (not the
-   *  property grid) but registered here so reset/linkage still see them. */
-  function titleOutlineTokens(v: Variant): Token[] {
-    return [
-      { label: 'outline thickness', canBeLinked: true, groupKey: 'title-border-width', variable: `--sectiondivider-${v}-title-border-width` },
-      { label: 'outline color', canBeLinked: true, groupKey: 'title-stroke-color', variable: `--sectiondivider-${v}-title-stroke-color` },
-    ];
-  }
-  function gradientTokens(v: Variant): Token[] {
-    return [
-      { label: 'gradient angle', groupKey: 'angle', variable: `--sectiondivider-${v}-gradient-angle` },
-      { label: 'gradient stop 1 color', groupKey: 'color', variable: `--sectiondivider-${v}-gradient-stop-1-color` },
-      { label: 'gradient stop 1 position', groupKey: 'position', variable: `--sectiondivider-${v}-gradient-stop-1-position` },
-      { label: 'gradient stop 2 color', groupKey: 'color', variable: `--sectiondivider-${v}-gradient-stop-2-color` },
-      { label: 'gradient stop 2 position', groupKey: 'position', variable: `--sectiondivider-${v}-gradient-stop-2-position` },
-      { label: 'gradient stop 3 color', groupKey: 'color', variable: `--sectiondivider-${v}-gradient-stop-3-color` },
-      { label: 'gradient stop 3 position', groupKey: 'position', variable: `--sectiondivider-${v}-gradient-stop-3-position` },
-    ];
-  }
-  function variantTokens(v: Variant): Token[] {
-    return [...frameTokens(v), ...titleOutlineTokens(v), ...gradientTokens(v)];
-  }
-
-  /** Two type groups per variant: title and description. The TypeEditor
-   *  fieldset visually groups each color with its font-shape props. The
-   *  title fieldset also nests the SVG-text outline width + color so those
-   *  controls sit with the typography that drives them. */
-  function variantTypeGroups(v: Variant): TypeGroupConfig[] {
-    return [
-      {
-        legend: 'title',
-        colorVariable: `--sectiondivider-${v}-title`,
-        familyVariable: `--sectiondivider-${v}-title-font-family`,
-        sizeVariable: `--sectiondivider-${v}-title-font-size`,
-        weightVariable: `--sectiondivider-${v}-title-font-weight`,
-        lineHeightVariable: `--sectiondivider-${v}-title-line-height`,
-        outlineWidthVariable: `--sectiondivider-${v}-title-border-width`,
-        outlineColorVariable: `--sectiondivider-${v}-title-stroke-color`,
-      },
-      {
-        legend: 'description',
-        colorVariable: `--sectiondivider-${v}-description`,
-        familyVariable: `--sectiondivider-${v}-description-font-family`,
-        sizeVariable: `--sectiondivider-${v}-description-font-size`,
-        weightVariable: `--sectiondivider-${v}-description-font-weight`,
-        lineHeightVariable: `--sectiondivider-${v}-description-line-height`,
-      },
-    ];
-  }
-
-  /** Token registry entries for the type-group properties. Colors are emitted
-   *  with canBeLinked so the LinkedBlock keeps the cross-variant linkage they
-   *  ship with (title/description colors share the same theme defaults across
-   *  every variant). */
-  function variantTypeGroupTokens(v: Variant): Token[] {
-    return [
-      { label: 'title color', canBeLinked: true, groupKey: 'title-color', variable: `--sectiondivider-${v}-title` },
-      { label: 'title font family', canBeLinked: true, groupKey: 'title-font-family', variable: `--sectiondivider-${v}-title-font-family` },
-      { label: 'title font size', canBeLinked: true, groupKey: 'title-font-size', variable: `--sectiondivider-${v}-title-font-size` },
-      { label: 'title font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: `--sectiondivider-${v}-title-font-weight` },
-      { label: 'title line height', canBeLinked: true, groupKey: 'title-line-height', variable: `--sectiondivider-${v}-title-line-height` },
-      { label: 'description color', canBeLinked: true, groupKey: 'description-color', variable: `--sectiondivider-${v}-description` },
-      { label: 'description font family', canBeLinked: true, groupKey: 'description-font-family', variable: `--sectiondivider-${v}-description-font-family` },
-      { label: 'description font size', canBeLinked: true, groupKey: 'description-font-size', variable: `--sectiondivider-${v}-description-font-size` },
-      { label: 'description font weight', canBeLinked: true, groupKey: 'description-font-weight', variable: `--sectiondivider-${v}-description-font-weight` },
-      { label: 'description line height', canBeLinked: true, groupKey: 'description-line-height', variable: `--sectiondivider-${v}-description-line-height` },
-    ];
-  }
-
-  export const allTokens: Token[] = variants.flatMap((v) => [
-    ...variantTokens(v.key),
-    ...variantTypeGroupTokens(v.key),
-  ]);
-
-  // Linked block contexts: every linkable token registers under its variant name.
-  // Gradient stops are intentionally absent — they're variant-defining and never link.
-  const LINKED_GROUP_KEYS = [
-    'padding', 'radius',
-    'border', 'border-width', 'shadow',
-    'title-border-width', 'title-stroke-color',
-    'title-color', 'title-font-family', 'title-font-size', 'title-font-weight', 'title-line-height',
-    'description-color', 'description-font-family', 'description-font-size', 'description-font-weight', 'description-line-height',
-  ] as const;
-  const linkableContexts = new Map<string, string>(
-    variants.flatMap((v) =>
-      [...variantTokens(v.key), ...variantTypeGroupTokens(v.key)]
-        .filter((t) => t.groupKey && (LINKED_GROUP_KEYS as readonly string[]).includes(t.groupKey))
-        .map((t) => [t.variable, v.key] as const),
-    ),
-  );
-
-  const variantOptions = variants.map((v) => ({ value: v.key, label: v.title }));
-</script>
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import SectionDivider from '../components/SectionDivider.svelte';
-  import VariantGroup from './scaffolding/VariantGroup.svelte';
-  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import GradientCard from './scaffolding/GradientCard.svelte';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
-  import { editorState } from '../lib/editorStore';
-  import { setCssVar } from '../lib/cssVarSync';
-  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
-
-  let testTitle = $state('Section Title');
-  let showDescription = $state(true);
-  let descriptionText = $state('This text is meant to provide additional context or meaning.');
-
-  const bgVar = '--backdrop-sectiondivider-surface';
-
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(bgVar)) {
-      setCssVar(bgVar, 'var(--surface-canvas)');
-    }
-  });
-
-  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  // The gradient tokens are owned by GradientCard, so the property grid only
-  // shows the frame tokens (padding/radius/outline). Gradient tokens still
-  // live in `allTokens` so they participate in reset and the registry.
-  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(frameTokens(v), linked.varSet));
-</script>
-
-<ComponentEditorBase {component} title="Section Divider" description="Full-width section banner with display font and palette variants. Import from <code>components/SectionDivider.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  {#snippet config()}
-  
-      <label class="text-field">
-        <span>Test title</span>
-        <input type="text" bind:value={testTitle} placeholder="Section Title" />
-      </label>
-      <label class="checkbox-field">
-        <input type="checkbox" bind:checked={showDescription} />
-        <span>Show description</span>
-      </label>
-      <label class="text-field text-field-wide">
-        <span>Description text</span>
-        <input type="text" bind:value={descriptionText} placeholder="Description text" />
-      </label>
-      <label class="backdrop-config">
-        <span>Sample background</span>
-        <div class="picker-slot">
-          <UIPaletteSelector variable={bgVar} />
-        </div>
-      </label>
-    
-  {/snippet}
-  {#each variants as v}
-    <VariantGroup
-      name={v.key}
-      title={v.title}
-      states={{ [v.key]: visibleVariantTokens(v.key) }}
-      typeGroups={{ [v.key]: variantTypeGroups(v.key) }}
-      {component}
-      siblings={buildSiblings(
-        variants.map((x) => x.key),
-        v.key,
-        (sv) => ({ [sv]: variantTokens(sv) }),
-        (sv) => ({ [sv]: variantTypeGroups(sv) }),
-      )}
-    >
-      <ShadowBackdrop mode="color" colorVariable={bgVar} padding="32px">
-        <SectionDivider
-          title={testTitle || v.title}
-          variant={v.key}
-          description={showDescription ? descriptionText : undefined}
-        />
-      </ShadowBackdrop>
-      {#snippet compositeControls(_stateName)}
-        <span class="gradient-section-label">Gradient</span>
-        <GradientCard {component} prefix={`--sectiondivider-${v.key}`} />
-      {/snippet}
-    </VariantGroup>
-  {/each}
-</ComponentEditorBase>
-
-<style>
-  .text-field,
-  .checkbox-field {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-  }
-
-  .checkbox-field {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .checkbox-field input {
-    margin: 0;
-    cursor: pointer;
-  }
-
-  .text-field input {
-    padding: var(--ui-space-4) var(--ui-space-8);
-    background: var(--ui-surface-input);
-    color: var(--ui-text-primary);
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--ui-radius-sm);
-    font-family: var(--ui-font-mono);
-    font-size: var(--ui-font-size-xs);
-    min-width: 16rem;
-  }
-
-  .text-field-wide input {
-    min-width: 28rem;
-  }
-
-  .backdrop-config {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-  }
-
-  .picker-slot {
-    min-width: 8rem;
-  }
-
-  .picker-slot :global(.ui-token-selector) {
-    width: 100%;
-  }
-
-  .gradient-section-label {
-    display: block;
-    margin-top: var(--ui-space-8);
-    font-size: var(--ui-font-size-md);
-    font-weight: 500;
-    color: var(--ui-text-primary);
-  }
-</style>

package/src/component-editor/scaffolding/DividerEditor.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { CSS_VAR_CHANGE_EVENT } from '../../lib/cssVarSync';
-  import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
-  import UIVariantSelector from '../../ui/UIVariantSelector.svelte';
-  import { BORDER_WIDTH, DIVIDER_HEIGHT } from '../../ui/variantScales';
-  import FieldsetWrapper from './FieldsetWrapper.svelte';
-
-  
-  interface Props {
-    colorVariable?: string | undefined;
-    colorLabel?: string | undefined;
-    widthVariable?: string | undefined;
-    widthLabel?: string | undefined;
-    heightVariable?: string | undefined;
-    heightLabel?: string | undefined;
-    /** When set, writes persist through the editor store under this component. */
-    component?: string | undefined;
-  }
-
-  let {
-    colorVariable = undefined,
-    colorLabel = undefined,
-    widthVariable = undefined,
-    widthLabel = undefined,
-    heightVariable = undefined,
-    heightLabel = undefined,
-    component = undefined
-  }: Props = $props();
-
-  let heightResolved = $state('');
-
-  function readHeight() {
-    if (!heightVariable) {
-      heightResolved = '';
-      return;
-    }
-    heightResolved = getComputedStyle(document.documentElement)
-      .getPropertyValue(heightVariable)
-      .trim();
-  }
-
-  function handleVarChange(e: Event) {
-    const detail = (e as CustomEvent<{ name: string }>).detail;
-    if (detail?.name === heightVariable) readHeight();
-  }
-
-  onMount(() => {
-    readHeight();
-    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
-  });
-
-  onDestroy(() => {
-    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
-  });
-
-  let heightIsZero = $derived(/^0+(?:\.0+)?(px|rem|em|%)?$/.test(heightResolved));
-  let siblingDisabled = $derived(heightIsZero);
-</script>
-
-<FieldsetWrapper legend="divider">
-  {#if colorVariable}
-    <div class="entry">
-      <UIPaletteSelector variable={colorVariable} {component} disabled={siblingDisabled} onchange={readHeight} />
-      <span class="label">{colorLabel ?? ''}</span>
-    </div>
-  {/if}
-  {#if widthVariable}
-    <div class="entry">
-      <UIVariantSelector variable={widthVariable} {component} disabled={siblingDisabled} {...BORDER_WIDTH} onchange={readHeight} />
-      <span class="label">{widthLabel ?? ''}</span>
-    </div>
-  {/if}
-  {#if heightVariable}
-    <div class="entry">
-      <UIVariantSelector variable={heightVariable} {component} {...DIVIDER_HEIGHT} onchange={readHeight} />
-      <span class="label">{heightLabel ?? ''}</span>
-    </div>
-  {/if}
-</FieldsetWrapper>
-
-<style>
-  .entry {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-2);
-  }
-
-  .label {
-    font-size: var(--ui-font-size-sm);
-    color: var(--ui-text-secondary);
-    padding-left: var(--ui-space-2);
-  }
-</style>

package/src/component-editor/scaffolding/GradientCard.svelte

@@ -1,296 +0,0 @@
-<script lang="ts">
-  /**
-   * Composite editor for a 3-stop linear gradient defined as flat per-variant
-   * tokens (angle + 3× color + 3× position). Renders:
-   *   - a live gradient ribbon with diamond handles below each stop's position
-   *   - a UIPaletteSelector for the currently-selected stop's color
-   *   - an AngleDial bound to the angle token
-   *
-   * The component writes literals (`Ndeg`, `N%`) back through `setComponentAlias`
-   * when the user drags; the picker writes its own token/literal ref via
-   * UIPaletteSelector. Reads resolve through `tokenRegistry$` so values
-   * authored as `var(--gradient-angle-diagonal)` show their resolved degrees.
-   */
-  import { setComponentAlias } from '../../lib/editorStore';
-  import { tokenRegistry$ } from '../../lib/tokenRegistry';
-  import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
-  import AngleDial from './AngleDial.svelte';
-
-  
-  interface Props {
-    component: string;
-    /** Prefix shared by all 7 token names — e.g. `--sectiondivider-canvas`. */
-    prefix: string;
-  }
-
-  let { component, prefix }: Props = $props();
-
-  type StopIndex = 1 | 2 | 3;
-  const STOPS: readonly StopIndex[] = [1, 2, 3] as const;
-
-  let angleVar = $derived(`${prefix}-gradient-angle`);
-  function stopColorVar(i: StopIndex): string {
-    return `${prefix}-gradient-stop-${i}-color`;
-  }
-  function stopPositionVar(i: StopIndex): string {
-    return `${prefix}-gradient-stop-${i}-position`;
-  }
-
-  type Registry = typeof $tokenRegistry$;
-
-  /** Walk the alias chain and read the terminal declared value as a literal.
-   *  The registry is passed in explicitly so the reactive expressions below
-   *  can see `$tokenRegistry$` as a dependency (Svelte's static analysis can't
-   *  peek into function bodies). */
-  function resolveLiteralWith(reg: Registry, varName: string): string | null {
-    const chain = reg.resolveAliasChain(varName);
-    const terminal = chain[chain.length - 1];
-    const decl = reg.getDeclaredValue(terminal);
-    if (decl === null) return null;
-    const m = decl.match(/^var\((--[a-z0-9-]+)\)$/i);
-    return m ? reg.getDeclaredValue(m[1]) ?? null : decl.trim();
-  }
-
-  function parseNumberFromCss(raw: string | null, unit: 'deg' | '%'): number | null {
-    if (!raw) return null;
-    const m = raw.trim().match(new RegExp(`^(-?\\d+(?:\\.\\d+)?)\\s*${unit}$`));
-    return m ? parseFloat(m[1]) : null;
-  }
-
-  let angleDeg = $derived(parseNumberFromCss(resolveLiteralWith($tokenRegistry$, angleVar), 'deg') ?? 135);
-  let positions = $derived([
-    parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(1)), '%') ?? 0,
-    parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(2)), '%') ?? 50,
-    parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(3)), '%') ?? 100,
-  ] as [number, number, number]);
-
-  // Reference the per-stop CSS var directly so the cascade fills in the
-  // component's CSS defaults when the user hasn't overridden a stop. Reading
-  // `aliases[...]` alone would miss defaults (no override → `#888`) even
-  // though the component is rendering the color via its own `:root` block.
-  let stopColors = $derived(([1, 2, 3] as StopIndex[]).map((i) => `var(${stopColorVar(i)})`) as [string, string, string]);
-
-  // Build the live gradient string from current positions + colors so the
-  // ribbon reflects edits even mid-drag (before the component re-renders via
-  // its own CSS var consumption).
-  let ribbonBg = $derived(`linear-gradient(90deg, ${stopColors
-    .map((c, i) => `${c} ${positions[i]}%`)
-    .join(', ')})`);
-
-  let selected: StopIndex = $state(1);
-
-  function setAngle(deg: number) {
-    setComponentAlias(component, angleVar, { kind: 'literal', value: `${Math.round(deg)}deg` });
-  }
-
-  function setPosition(i: StopIndex, pct: number) {
-    const clamped = Math.max(0, Math.min(100, Math.round(pct * 10) / 10));
-    setComponentAlias(component, stopPositionVar(i), { kind: 'literal', value: `${clamped}%` });
-  }
-
-  // ── Position handle drag ────────────────────────────────────────────────
-  let barEl: HTMLDivElement | undefined = $state();
-  let dragIndex: StopIndex | null = $state(null);
-
-  function pctFromEvent(e: PointerEvent): number {
-    const rect = barEl!.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    return (x / rect.width) * 100;
-  }
-
-  function onHandleDown(e: PointerEvent, i: StopIndex) {
-    selected = i;
-    dragIndex = i;
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-    setPosition(i, pctFromEvent(e));
-  }
-  function onHandleMove(e: PointerEvent) {
-    if (dragIndex === null) return;
-    setPosition(dragIndex, pctFromEvent(e));
-  }
-  function onHandleUp(e: PointerEvent) {
-    if (dragIndex === null) return;
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
-    dragIndex = null;
-  }
-
-  function onPositionInput(i: StopIndex, e: Event) {
-    const v = parseFloat((e.target as HTMLInputElement).value);
-    if (Number.isFinite(v)) setPosition(i, v);
-  }
-</script>
-
-<div class="gradient-card">
-  <div class="ribbon-wrap">
-    <div class="ribbon" bind:this={barEl} style="background: {ribbonBg};"></div>
-    <div class="handles">
-      {#each STOPS as i}
-        <button
-          type="button"
-          class="handle"
-          class:selected={selected === i}
-          class:dragging={dragIndex === i}
-          style="left: {positions[i - 1]}%; --stop-color: {stopColors[i - 1]};"
-          onpointerdown={(e) => onHandleDown(e, i)}
-          onpointermove={onHandleMove}
-          onpointerup={onHandleUp}
-          onpointercancel={onHandleUp}
-          title="Stop {i} ({positions[i - 1]}%)"
-          aria-label="Gradient stop {i}"
-        >
-          <span class="handle-diamond"></span>
-        </button>
-      {/each}
-    </div>
-  </div>
-
-  <div class="stop-edit-row">
-    <span class="row-label">Stop {selected}</span>
-    <label class="pos-input">
-      <input
-        type="number"
-        min="0"
-        max="100"
-        step="0.1"
-        value={positions[selected - 1]}
-        onchange={(e) => onPositionInput(selected, e)}
-      />
-      <span class="suffix">%</span>
-    </label>
-    <div class="picker-slot">
-      <UIPaletteSelector variable={stopColorVar(selected)} {component} />
-    </div>
-    <div class="angle-slot">
-      <AngleDial value={angleDeg} onchange={(d) => setAngle(d.value)} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .gradient-card {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-12);
-    padding: var(--ui-space-12);
-    background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-md);
-  }
-
-  .ribbon-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-8);
-  }
-
-  .ribbon {
-    position: relative;
-    height: 2.25rem;
-    border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-default);
-  }
-
-  .handles {
-    position: relative;
-    height: 1.25rem;
-  }
-
-  /* The button is a generous (1.25rem) transparent hit target so the diamond
-     can stay visually small while remaining easy to grab/drag. The visible
-     marker lives in `.handle-diamond` inside. */
-  .handle {
-    position: absolute;
-    top: 0;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-left: -0.625rem;
-    padding: 0;
-    background: transparent;
-    border: none;
-    cursor: ew-resize;
-    touch-action: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .handle-diamond {
-    width: 0.7rem;
-    height: 0.7rem;
-    background: var(--stop-color, var(--ui-surface-high));
-    border: 1px solid var(--ui-border-default);
-    transform: rotate(45deg);
-    border-radius: 1px;
-    transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
-  }
-
-  .handle:hover .handle-diamond {
-    border-color: var(--ui-text-secondary);
-  }
-
-  .handle.selected .handle-diamond {
-    border-color: var(--ui-text-primary);
-    box-shadow: 0 0 0 1px var(--ui-text-primary);
-  }
-
-  .handle.dragging {
-    z-index: 2;
-  }
-  .handle.dragging .handle-diamond {
-    border-color: var(--ui-text-primary);
-    box-shadow: 0 0 0 2px var(--ui-text-primary);
-  }
-
-  /* Selected-stop row: label, position readout, color picker, then angle dial
-     inline on the right. The selector width matches TokenLayout's
-     `--token-selector-w` so this row aligns with the property grid below. */
-  .stop-edit-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-space-12);
-  }
-
-  .row-label {
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-    white-space: nowrap;
-  }
-
-  .picker-slot {
-    width: 8rem;
-    min-width: 0;
-  }
-
-  .pos-input {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-  }
-
-  .pos-input input {
-    width: 4rem;
-    padding: var(--ui-space-2) var(--ui-space-6);
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-text-primary);
-    font-family: var(--ui-font-mono);
-    font-size: var(--ui-font-size-sm);
-    text-align: right;
-  }
-
-  .pos-input input::-webkit-outer-spin-button,
-  .pos-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-
-  .suffix {
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-tertiary);
-  }
-
-  .angle-slot {
-    margin-left: auto;
-  }
-</style>