@motion-proto/live-tokens 0.80.0 → 0.82.0

package/src/demo/LabeledSelect.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+  import Button from '../system/components/Button.svelte';
+  import MenuSelect from '../system/components/MenuSelect.svelte';
+  import { portal } from '../system/internal/portal';
+
+  interface Props {
+    label: string;
+    items: { value: string; label: string }[];
+    value: string;
+    /** Trigger text when `value` matches no item. Defaults to the label. */
+    placeholder?: string;
+    /** Label beside the trigger instead of above it. */
+    inline?: boolean;
+    size?: 'default' | 'small';
+    disabled?: boolean;
+    error?: string;
+    onchange: (value: string) => void;
+  }
+
+  let {
+    label,
+    items,
+    value,
+    placeholder = label,
+    inline = false,
+    size = 'default',
+    disabled = false,
+    error = '',
+    onchange,
+  }: Props = $props();
+
+  let open = $state(false);
+  let wrapperEl: HTMLDivElement | undefined = $state();
+  let panelEl: HTMLDivElement | undefined = $state();
+  let buttonRef: HTMLButtonElement | undefined = $state();
+
+  const uid = $props.id();
+  const labelId = `${uid}-label`;
+  const buttonId = `${uid}-button`;
+
+  const selectedLabel = $derived(items.find((item) => item.value === value)?.label ?? placeholder);
+
+  /** Deduplicated because the ghosts are keyed by label, and two items may
+      legitimately carry the same one. */
+  const ghostLabels = $derived([...new Set([placeholder, ...items.map((item) => item.label)])]);
+
+  // Button.svelte has no aria-* passthrough, so the popover semantics are
+  // set imperatively on its underlying <button> via the bindable ref.
+  $effect(() => {
+    buttonRef?.setAttribute('aria-haspopup', 'listbox');
+    buttonRef?.setAttribute('aria-expanded', String(open));
+    buttonRef?.setAttribute('id', buttonId);
+    buttonRef?.setAttribute('aria-labelledby', `${labelId} ${buttonId}`);
+  });
+
+  /* Anchored below the trigger, left edges aligned; flips above when the space
+     below runs out, and clamps to the viewport on both axes. Placed rather than
+     laid out because the panel is portaled: it has no ancestor left to position
+     against. Visibility is inline rather than a state flag so the focus below
+     lands on an already-visible item (hidden elements refuse focus). */
+  function position(): void {
+    const btn = buttonRef;
+    const panel = panelEl;
+    if (!btn || !panel) return;
+    const margin = 8;
+    const br = btn.getBoundingClientRect();
+    const pr = panel.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    let left = br.left;
+    if (left + pr.width > vw - margin) left = vw - margin - pr.width;
+    if (left < margin) left = margin;
+
+    let top = br.bottom + margin;
+    if (top + pr.height > vh - margin) {
+      top = br.top - margin - pr.height;
+      if (top < margin) top = margin;
+    }
+
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+    panel.style.visibility = 'visible';
+  }
+
+  $effect(() => {
+    if (!open || !panelEl) return;
+    position();
+    const target =
+      panelEl.querySelector<HTMLButtonElement>('.menuselect-item.selected') ??
+      panelEl.querySelector<HTMLButtonElement>('.menuselect-item');
+    target?.focus();
+    // Fixed to the viewport, so the panel has to be re-placed against a trigger
+    // that scrolls. Capture, to catch scrolls in any pane between here and the
+    // window.
+    window.addEventListener('scroll', position, true);
+    window.addEventListener('resize', position);
+    return () => {
+      window.removeEventListener('scroll', position, true);
+      window.removeEventListener('resize', position);
+    };
+  });
+
+  $effect(() => {
+    if (!open) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      // The panel is portaled out, so it is no longer inside the wrapper and
+      // has to be tested on its own — otherwise picking an item dismisses the
+      // list before the click reaches it.
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (wrapperEl?.contains(target) || panelEl?.contains(target)) return;
+      open = false;
+    };
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        open = false;
+        buttonRef?.focus();
+      }
+    };
+    window.addEventListener('pointerdown', handlePointerDown);
+    window.addEventListener('keydown', handleKeydown);
+    return () => {
+      window.removeEventListener('pointerdown', handlePointerDown);
+      window.removeEventListener('keydown', handleKeydown);
+    };
+  });
+
+  function select(next: string): void {
+    open = false;
+    if (next === value) return;
+    onchange(next);
+  }
+</script>
+
+<div class="labeled-select" class:inline class:small={size === 'small'} bind:this={wrapperEl}>
+  <span class="labeled-select-label" id={labelId}>{label}</span>
+
+  <div class="labeled-select-trigger">
+    <Button
+      bind:buttonRef
+      class="labeled-select-button"
+      fullWidth
+      {size}
+      variant="secondary"
+      disabled={disabled || items.length === 0}
+      icon={open ? 'fas fa-chevron-up' : 'fas fa-chevron-down'}
+      iconPosition="right"
+      onclick={() => (open = !open)}
+    >
+      {selectedLabel}
+    </Button>
+
+    <!-- Ghost copies size the trigger to its widest label so the row never
+         reflows on selection. Real Buttons, so the metrics stay exact. -->
+    {#each ghostLabels as ghost (ghost)}
+      <div class="labeled-select-ghost" aria-hidden="true" inert>
+        <Button class="labeled-select-button" {size} variant="secondary" icon="fas fa-chevron-down" iconPosition="right">
+          {ghost}
+        </Button>
+      </div>
+    {/each}
+  </div>
+
+  {#if open}
+    <div class="labeled-select-panel" bind:this={panelEl} use:portal>
+      <MenuSelect {items} {value} minWidth="12rem" onchange={select} />
+    </div>
+  {/if}
+
+  {#if error}
+    <span class="error" aria-live="polite">{error}</span>
+  {/if}
+</div>
+
+<style>
+  .labeled-select {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-4);
+  }
+
+  .labeled-select.inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-8);
+  }
+
+  .labeled-select-label {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-normal);
+    color: var(--text-secondary);
+  }
+
+  .labeled-select.small .labeled-select-label {
+    font-size: var(--font-size-sm);
+  }
+
+  .labeled-select-trigger {
+    position: relative;
+    display: grid;
+    grid-template-areas: 'trigger';
+  }
+
+  .labeled-select-trigger > :global(*) {
+    grid-area: trigger;
+  }
+
+  .labeled-select-trigger :global(.labeled-select-button) {
+    justify-content: space-between;
+  }
+
+  .labeled-select-ghost {
+    height: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  /* Fixed and portaled to <body>: absolute positioning is clipped by any
+     ancestor overflow (the Home card) and trapped by any stacking context (the
+     demo hero), and the overflow it caused made that ancestor scrollable, so
+     moving focus into the list scrolled the page out from under it. */
+  .labeled-select-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    visibility: hidden;
+  }
+
+  .error {
+    max-width: 20rem;
+    color: var(--text-danger);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+  }
+</style>

package/src/demo/Section.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import SectionDivider from '../system/components/SectionDivider.svelte';
+
+  /** Section wrapper. `variant` picks a SectionDivider preset (lg/md/sm).
+   *  Each preset is fully configured in the editor — typography, colors,
+   *  background, geometry are all owned by the variant. */
+  interface Props {
+    title: string;
+    description?: string;
+    eyebrow?: string;
+    variant?: 'lg' | 'md' | 'sm';
+    gap?: string;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    eyebrow,
+    variant = 'md',
+    gap = 'var(--space-24)',
+    class: className,
+    children,
+  }: Props = $props();
+</script>
+
+<section class={['demo-section', className]} style:gap>
+  <SectionDivider {title} {description} {eyebrow} {variant} />
+  {@render children()}
+</section>
+
+<style>
+  .demo-section {
+    grid-column: 2 / span 10;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 960px) {
+    .demo-section {
+      grid-column: 1 / -1;
+    }
+  }
+</style>

package/src/demo/SketchSelect.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import LabeledSelect from './LabeledSelect.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();
+
+  // The empty string is the placeholder's value, so off needs a name of its own.
+  const OFF = 'none';
+
+  let busy = $state(false);
+  let error = $state('');
+
+  const items = $derived([
+    { value: OFF, label: 'None' },
+    /* The style the open theme carries, when nothing in the pool names it.
+       Without the row the select reads None over a drawn page, and a visitor
+       who picks something else cannot get back. */
+    ...($unsavedSketchStyle ? [{ value: $unsavedSketchStyle.id, label: $unsavedSketchStyle.label }] : []),
+    ...$sketchStyles.map((style) => ({ value: style.id, label: style.label })),
+  ]);
+
+  /* Off is its own choice here, so the picked sketchstyle only shows while the
+     effect is on. Turning it off in the Sketchstyle view leaves that
+     sketchstyle selected there; this reads as None until it is switched back on.
+     Dials moved off every named style land on the placeholder. */
+  const selected = $derived(
+    $sketchPick.state === 'off' ? OFF
+    : $sketchPick.state === 'style' ? $sketchPick.style.id
+    : '',
+  );
+
+  function changeSketch(next: string) {
+    if (busy) return;
+    busy = true;
+    error = '';
+    try {
+      const id = next === OFF ? null : next;
+      setSketch(id);
+      onpick?.(id);
+    } catch (reason) {
+      error = reason instanceof Error ? reason.message : 'Could not apply that sketchstyle';
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<LabeledSelect
+  {inline}
+  {size}
+  label="Sketch"
+  {items}
+  value={selected}
+  placeholder="Custom"
+  disabled={busy}
+  {error}
+  onchange={changeSketch}
+/>

package/src/demo/SourceLinks.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import npmLogoUrl from '../system/assets/npm-mark-white.svg';
+  import githubLogoUrl from '../system/assets/github-mark-white.svg';
+  import { contrastTokenForBackground } from '../system/backdrop';
+
+  let { compact = false }: { compact?: boolean } = $props();
+
+  let navEl: HTMLElement | undefined = $state();
+
+  // Same rule as the kite strings in FloatingTokenTags: the marks are painted
+  // through a mask in whichever invariant token out-contrasts the page
+  // background, so they survive a theme swap or a live token edit.
+  $effect(() => {
+    if (!navEl) return;
+    const el = navEl;
+    let frame = 0;
+    let lastBackground = '';
+    const sync = () => {
+      const background = getComputedStyle(el).getPropertyValue('--page-bg').trim();
+      if (background !== lastBackground) {
+        lastBackground = background;
+        el.style.setProperty('--brand-mark-color', `var(${contrastTokenForBackground(background)})`);
+      }
+      frame = requestAnimationFrame(sync);
+    };
+    sync();
+    return () => cancelAnimationFrame(frame);
+  });
+</script>
+
+<nav class="source-links" class:compact aria-label="Project links" bind:this={navEl}>
+  <a class="brand-link" href="https://www.npmjs.com/package/@motion-proto/live-tokens" target="_blank" rel="noopener">
+    <span class="brand-mark brand-mark--npm" style:--brand-mark-image={`url("${npmLogoUrl}")`}></span>
+    <span class="brand-text">
+      <span class="brand-caption">Published on</span>
+      <span class="brand-name">npm<span class="brand-arrow" aria-hidden="true">↗</span></span>
+    </span>
+  </a>
+  <a class="brand-link" href="https://github.com/motionproto/live-tokens" target="_blank" rel="noopener">
+    <span class="brand-mark brand-mark--github" style:--brand-mark-image={`url("${githubLogoUrl}")`}></span>
+    <span class="brand-text">
+      <span class="brand-caption">Source on</span>
+      <span class="brand-name">GitHub<span class="brand-arrow" aria-hidden="true">↗</span></span>
+    </span>
+  </a>
+</nav>
+
+<style>
+  .source-links {
+    display: flex;
+    align-items: center;
+    gap: var(--space-48);
+    flex: none;
+  }
+
+  .brand-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-16);
+    text-decoration: none;
+  }
+
+  .brand-mark {
+    /* Square chips, sized to the caption + name text stack beside them.
+       The mask URL must stay quoted: Vite inlines these SVGs as data URIs
+       holding single quotes, which an unquoted url() rejects — and a dropped
+       mask paints the whole chip as a solid block. */
+    height: calc(var(--font-size-md) * 1.1 + var(--font-size-2xl) * 1.1 + var(--space-4));
+    width: calc(var(--font-size-md) * 1.1 + var(--font-size-2xl) * 1.1 + var(--space-4));
+    display: block;
+    background-color: var(--brand-mark-color, var(--color-white));
+    -webkit-mask: var(--brand-mark-image) center / contain no-repeat;
+    mask: var(--brand-mark-image) center / contain no-repeat;
+    opacity: 0.8;
+    transition: opacity var(--duration-150, 150ms) ease;
+  }
+
+  /* Solid tile reads heavier than the octocat silhouette — soften and trim to match its optical weight. */
+  .brand-mark--npm {
+    border-radius: var(--radius-md);
+    transform: scale(0.86);
+  }
+
+  .brand-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 2px);
+    line-height: 1.05;
+  }
+
+  .brand-caption {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    letter-spacing: 0.01em;
+    color: var(--text-tertiary);
+  }
+
+  .brand-name {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.25em;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-primary);
+    transition: color var(--duration-150, 150ms) ease;
+  }
+
+  .brand-arrow {
+    position: relative;
+    top: 0.12em;
+    font-size: 1em;
+    opacity: 1;
+    transition: transform var(--duration-150, 150ms) ease;
+  }
+
+  .brand-link:hover .brand-mark {
+    opacity: 1;
+  }
+
+  .brand-link:hover .brand-name {
+    color: var(--text-primary);
+  }
+
+  .brand-link:hover .brand-arrow {
+    transform: translate(0.15em, -0.15em);
+  }
+
+  /* Compact — the in-hero copy, scaled down a step on every axis. */
+  .source-links.compact {
+    gap: var(--space-32);
+  }
+
+  .compact .brand-link {
+    gap: var(--space-12);
+  }
+
+  .compact .brand-mark {
+    height: calc(var(--font-size-sm) * 1.1 + var(--font-size-xl) * 1.1 + var(--space-2));
+    width: calc(var(--font-size-sm) * 1.1 + var(--font-size-xl) * 1.1 + var(--space-2));
+  }
+
+  .compact .brand-caption {
+    font-size: var(--font-size-sm);
+  }
+
+  .compact .brand-name {
+    font-size: var(--font-size-xl);
+  }
+
+  @media (max-width: 960px) {
+    .source-links:not(.compact) {
+      gap: var(--space-24);
+    }
+  }
+</style>