@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/ui/UIRadio.svelte

@@ -0,0 +1,72 @@
+<!--
+  Custom-styled radio that matches the editor's selection language: a quiet ring
+  in the unselected state (--ui-border-strong stroke, soft black inner fill) and
+  the highlight amber when selected (ring + dot, transparent inside).
+
+  Usage:
+    <UIRadio bind:group={selected} value="alpha" />
+    <UIRadio bind:group={selected} value="beta" disabled />
+-->
+<script lang="ts">
+  /** Value this radio represents within its group. */
+  export let value: string;
+  /** Two-way bound group selection. The radio is checked when `group === value`. */
+  export let group: string;
+  /** Optional native name; omit to let Svelte's `bind:group` wire it automatically. */
+  export let name: string = '';
+  export let disabled: boolean = false;
+</script>
+
+<input
+  type="radio"
+  class="ui-radio"
+  {value}
+  {name}
+  {disabled}
+  bind:group
+  on:change
+/>
+
+<style>
+  .ui-radio {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    border: 1.5px solid var(--ui-border-strong);
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    transition:
+      border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .ui-radio::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--ui-highlight);
+    transform: scale(0);
+    transition: transform 140ms cubic-bezier(0.5, 1.6, 0.5, 1);
+  }
+  .ui-radio:checked {
+    border-color: var(--ui-highlight);
+    background: transparent;
+  }
+  .ui-radio:checked::before {
+    transform: scale(1);
+  }
+  .ui-radio:focus-visible {
+    outline: 2px solid var(--ui-highlight);
+    outline-offset: 1px;
+  }
+  .ui-radio:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+</style>

package/src/ui/UIRadioGroup.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let value: string;
+  export let options: ReadonlyArray<{ value: string; label: string }>;
+  export let name: string;
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+
+  function select(v: string) {
+    if (v === value) return;
+    value = v;
+    dispatch('change', v);
+  }
+</script>
+
+<div class="ui-radio-group" role="radiogroup">
+  {#each options as opt (opt.value)}
+    <label class="ui-radio" class:checked={value === opt.value}>
+      <input
+        type="radio"
+        {name}
+        value={opt.value}
+        checked={value === opt.value}
+        on:change={() => select(opt.value)}
+      />
+      <span>{opt.label}</span>
+    </label>
+  {/each}
+</div>
+
+<style>
+  .ui-radio-group {
+    display: inline-flex;
+    gap: var(--ui-space-20);
+    align-items: center;
+  }
+  .ui-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+    cursor: pointer;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+    user-select: none;
+    transition: color var(--ui-transition-fast);
+  }
+  .ui-radio.checked {
+    color: var(--ui-text-primary);
+  }
+  .ui-radio input {
+    margin: 0;
+    cursor: pointer;
+    accent-color: currentColor;
+  }
+  .ui-radio:not(.checked) input {
+    opacity: 0.5;
+  }
+</style>

package/src/ui/UIRelinkConfirmPopover.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import UIRadio from './UIRadio.svelte';
+  import { keepInViewport } from './keepInViewport';
+
+  type Candidate = { variable: string; alias: string };
+
+  export let candidates: Candidate[];
+  /** Variable whose lock was clicked — its alias is the default selection. */
+  export let initialVariable: string;
+  /** Component prefix to strip when rendering source labels. */
+  export let prefixToStrip: string = '';
+
+  const dispatch = createEventDispatcher<{ confirm: { alias: string }; cancel: void }>();
+
+  type Option = { alias: string; sources: string[] };
+
+  function distinctOptions(list: Candidate[], initial: string): Option[] {
+    const ordered = [...list].sort((a, b) =>
+      a.variable === initial ? -1 : b.variable === initial ? 1 : 0,
+    );
+    const seen = new Map<string, Option>();
+    for (const c of ordered) {
+      const label = prefixToStrip && c.variable.startsWith(prefixToStrip)
+        ? c.variable.slice(prefixToStrip.length)
+        : c.variable;
+      const existing = seen.get(c.alias);
+      if (existing) existing.sources.push(label);
+      else seen.set(c.alias, { alias: c.alias, sources: [label] });
+    }
+    return [...seen.values()];
+  }
+
+  $: options = distinctOptions(candidates, initialVariable);
+  let selected = '';
+  $: if (selected === '' && options.length > 0) selected = options[0].alias;
+
+  function handleConfirm() {
+    if (!selected) return;
+    dispatch('confirm', { alias: selected });
+  }
+
+  function handleCancel() {
+    dispatch('cancel');
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      handleCancel();
+    } else if (e.key === 'Enter' && (e.target as HTMLElement)?.tagName !== 'BUTTON') {
+      e.preventDefault();
+      handleConfirm();
+    }
+  }
+
+  let popoverEl: HTMLDivElement;
+
+  onMount(() => {
+    popoverEl?.focus();
+    document.addEventListener('keydown', handleKeydown, true);
+  });
+
+  onDestroy(() => {
+    document.removeEventListener('keydown', handleKeydown, true);
+  });
+</script>
+
+<div
+  class="ui-relink-popover"
+  role="dialog"
+  aria-label="Confirm link"
+  tabindex="-1"
+  bind:this={popoverEl}
+  use:keepInViewport
+  on:click|stopPropagation
+>
+  <div class="ui-relink-header">
+    {#if options.length > 1}
+      <span class="ui-relink-title">{candidates.length} variants disagree — pick one to broadcast</span>
+    {:else}
+      <span class="ui-relink-title">Link this property across {candidates.length} variants?</span>
+    {/if}
+  </div>
+
+  <div class="ui-relink-body">
+    {#each options as opt}
+      <label class="ui-relink-row">
+        <UIRadio bind:group={selected} value={opt.alias} />
+        <div class="ui-relink-row-info">
+          <code class="ui-relink-alias">{opt.alias}</code>
+          <span class="ui-relink-sources">
+            from {opt.sources.join(', ')}
+          </span>
+        </div>
+      </label>
+    {/each}
+  </div>
+
+  <div class="ui-relink-footer">
+    <button type="button" class="ui-relink-btn ui-relink-btn-cancel" on:click={handleCancel}>Cancel</button>
+    <button type="button" class="ui-relink-btn ui-relink-btn-confirm" on:click={handleConfirm}>Link</button>
+  </div>
+</div>
+
+<style>
+  .ui-relink-popover {
+    position: absolute;
+    top: calc(100% + var(--ui-space-4));
+    right: 0;
+    background: var(--ui-surface-higher);
+    border: 1px solid var(--ui-border-medium);
+    border-radius: var(--ui-radius-md);
+    box-shadow: var(--ui-shadow-lg);
+    z-index: 20;
+    min-width: 18rem;
+    max-width: 24rem;
+    padding: var(--ui-space-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    animation: uiRelinkPopoverIn 120ms ease-out;
+  }
+
+  .ui-relink-popover:focus {
+    outline: none;
+  }
+
+  .ui-relink-header {
+    border-bottom: 1px solid var(--ui-border-faint);
+    padding-bottom: var(--ui-space-6);
+  }
+
+  .ui-relink-title {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+    font-weight: var(--ui-font-weight-medium);
+  }
+
+  .ui-relink-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  .ui-relink-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-4);
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    transition: background var(--ui-transition-fast);
+  }
+
+  .ui-relink-row:hover {
+    background: var(--ui-hover);
+  }
+
+  /* Lift the radio slightly so it visually aligns with the first line of the
+     two-line row label. Selection styling lives in UIRadio. */
+  .ui-relink-row :global(.ui-radio) {
+    margin-top: 0.2rem;
+  }
+
+  .ui-relink-row-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .ui-relink-alias {
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-relink-sources {
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-relink-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--ui-space-6);
+    padding-top: var(--ui-space-4);
+    border-top: 1px solid var(--ui-border-faint);
+  }
+
+  .ui-relink-btn {
+    padding: var(--ui-space-4) var(--ui-space-12);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-medium);
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    transition: all var(--ui-transition-fast);
+  }
+
+  .ui-relink-btn-cancel {
+    background: transparent;
+    border: 1px solid var(--ui-border-default);
+    color: var(--ui-text-secondary);
+  }
+
+  .ui-relink-btn-cancel:hover {
+    background: var(--ui-hover);
+    color: var(--ui-text-primary);
+  }
+
+  .ui-relink-btn-confirm {
+    background: var(--ui-text-accent);
+    border: 1px solid var(--ui-text-accent);
+    color: var(--ui-surface-lowest);
+  }
+
+  .ui-relink-btn-confirm:hover {
+    filter: brightness(1.1);
+  }
+
+  @keyframes uiRelinkPopoverIn {
+    from { opacity: 0; transform: translateY(-2px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>