@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/ui/UICopyPopover.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { copyPopover } from '../lib/copyPopover';
+
+  let bubbleEl: HTMLDivElement | null = null;
+  let bubbleW = 0;
+  let bubbleH = 0;
+
+  $: if (bubbleEl && $copyPopover.visible) {
+    const r = bubbleEl.getBoundingClientRect();
+    bubbleW = r.width;
+    bubbleH = r.height;
+  }
+
+  const GAP = 8;
+
+  $: anchor = $copyPopover.anchor;
+  $: rawLeft = anchor ? anchor.left + anchor.width / 2 - bubbleW / 2 : 0;
+  $: rawTop = anchor ? anchor.top - bubbleH - GAP : 0;
+  $: maxLeft = typeof window !== 'undefined' ? window.innerWidth - bubbleW - 4 : rawLeft;
+  $: clampedLeft = Math.max(4, Math.min(rawLeft, maxLeft));
+  $: clampedTop = Math.max(4, rawTop);
+  $: arrowLeft = anchor ? anchor.left + anchor.width / 2 - clampedLeft : bubbleW / 2;
+</script>
+
+{#if $copyPopover.visible && anchor}
+  <div
+    class="ui-copy-popover"
+    bind:this={bubbleEl}
+    style="top: {clampedTop}px; left: {clampedLeft}px;"
+    role="status"
+    aria-live="polite"
+  >
+    <span class="ui-copy-popover-value">{$copyPopover.value}</span>
+    <span class="ui-copy-popover-arrow" style="left: {arrowLeft}px;"></span>
+  </div>
+{/if}
+
+<style>
+  .ui-copy-popover {
+    position: fixed;
+    z-index: 10000;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-6) var(--ui-space-10);
+    background: var(--ui-surface-highest);
+    color: var(--ui-text-primary);
+    border: 1px solid var(--ui-border-medium);
+    border-radius: var(--ui-radius-lg);
+    box-shadow: var(--ui-shadow-lg);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
+    pointer-events: none;
+    white-space: nowrap;
+    animation: uiCopyPopoverIn 120ms ease-out;
+  }
+
+  .ui-copy-popover-value {
+    color: var(--ui-text-primary);
+  }
+
+  .ui-copy-popover-arrow {
+    position: absolute;
+    bottom: -5px;
+    width: 8px;
+    height: 8px;
+    background: var(--ui-surface-highest);
+    border-right: 1px solid var(--ui-border-medium);
+    border-bottom: 1px solid var(--ui-border-medium);
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  @keyframes uiCopyPopoverIn {
+    from { opacity: 0; transform: translateY(2px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>

package/src/{showcase/EditorDialog.svelte → ui/UIDialog.svelte}

@@ -1,18 +1,24 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { tick, createEventDispatcher } from 'svelte';
 
   export let show: boolean = false;
   export let title: string = '';
   export let cancelLabel: string = 'Cancel';
   export let showCancel: boolean = true;
+  export let confirmLabel: string = '';
+  export let confirmDisabled: boolean = false;
   export let width: string = '500px';
 
+  const dispatch = createEventDispatcher();
+
   let closeButtonRef: HTMLButtonElement;
   let cancelButtonRef: HTMLButtonElement;
+  let confirmButtonRef: HTMLButtonElement;
 
   $: if (show) {
     tick().then(() => {
-      if (showCancel && cancelButtonRef) cancelButtonRef.focus();
+      if (confirmLabel && confirmButtonRef) confirmButtonRef.focus();
+      else if (showCancel && cancelButtonRef) cancelButtonRef.focus();
       else if (closeButtonRef) closeButtonRef.focus();
     });
   }
@@ -20,30 +26,46 @@
   function handleClose() {
     show = false;
   }
+
+  function handleConfirm() {
+    dispatch('confirm');
+  }
 </script>
 
 {#if show}
   <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-  <div class="ed-backdrop" on:click|self={handleClose}>
-    <div class="ed-dialog" style="width: {width}; max-width: {width};">
+  <div class="ui-dialog-backdrop" on:click|self={handleClose}>
+    <div class="ui-dialog" style="width: {width}; max-width: {width};">
       {#if title}
-        <div class="ed-header">
-          <h3 class="ed-title">{title}</h3>
-          <button bind:this={closeButtonRef} class="ed-close" on:click={handleClose} aria-label="Close">
+        <div class="ui-dialog-header">
+          <h3 class="ui-dialog-title">{title}</h3>
+          <button bind:this={closeButtonRef} class="ui-dialog-close" on:click={handleClose} aria-label="Close">
             <i class="fas fa-times"></i>
           </button>
         </div>
       {/if}
 
-      <div class="ed-body">
+      <div class="ui-dialog-body">
         <slot />
       </div>
 
-      {#if showCancel}
-        <div class="ed-footer">
-          <button bind:this={cancelButtonRef} class="ed-btn" on:click={handleClose}>
-            {cancelLabel}
-          </button>
+      {#if showCancel || confirmLabel}
+        <div class="ui-dialog-footer">
+          {#if showCancel}
+            <button bind:this={cancelButtonRef} class="ui-dialog-btn" on:click={handleClose}>
+              {cancelLabel}
+            </button>
+          {/if}
+          {#if confirmLabel}
+            <button
+              bind:this={confirmButtonRef}
+              class="ui-dialog-btn primary"
+              on:click={handleConfirm}
+              disabled={confirmDisabled}
+            >
+              {confirmLabel}
+            </button>
+          {/if}
         </div>
       {/if}
     </div>
@@ -51,7 +73,7 @@
 {/if}
 
 <style>
-  .ed-backdrop {
+  .ui-dialog-backdrop {
     position: fixed;
     top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0, 0, 0, 0.65);
@@ -61,20 +83,20 @@
     z-index: 9999;
   }
 
-  .ed-dialog {
+  .ui-dialog {
     background: #1a1a1a;
     border: 1px solid #444;
     border-radius: 6px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
-    animation: edSlideIn 0.15s ease-out;
+    animation: uiDialogSlideIn 0.15s ease-out;
   }
 
-  @keyframes edSlideIn {
+  @keyframes uiDialogSlideIn {
     from { opacity: 0; transform: translateY(-10px); }
     to   { opacity: 1; transform: translateY(0); }
   }
 
-  .ed-header {
+  .ui-dialog-header {
     padding: 10px 16px;
     border-bottom: 1px solid #333;
     display: flex;
@@ -82,14 +104,14 @@
     align-items: center;
   }
 
-  .ed-title {
+  .ui-dialog-title {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     color: #e0e0e0;
   }
 
-  .ed-close {
+  .ui-dialog-close {
     background: none;
     border: none;
     color: #888;
@@ -103,23 +125,24 @@
     border-radius: 4px;
   }
 
-  .ed-close:hover {
+  .ui-dialog-close:hover {
     background: rgba(255, 255, 255, 0.08);
     color: #ccc;
   }
 
-  .ed-body {
+  .ui-dialog-body {
     padding: 12px 16px;
   }
 
-  .ed-footer {
+  .ui-dialog-footer {
     padding: 10px 16px;
     border-top: 1px solid #333;
     display: flex;
     justify-content: flex-end;
+    gap: 8px;
   }
 
-  .ed-btn {
+  .ui-dialog-btn {
     padding: 6px 14px;
     background: transparent;
     border: 1px solid #555;
@@ -129,9 +152,27 @@
     cursor: pointer;
   }
 
-  .ed-btn:hover {
+  .ui-dialog-btn:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.06);
     border-color: #777;
     color: #e0e0e0;
   }
+
+  .ui-dialog-btn.primary {
+    background: #e8e8e8;
+    border-color: #e8e8e8;
+    color: #1a1a1a;
+    font-weight: 600;
+  }
+
+  .ui-dialog-btn.primary:hover:not(:disabled) {
+    background: #ffffff;
+    border-color: #ffffff;
+    color: #1a1a1a;
+  }
+
+  .ui-dialog-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
 </style>

package/src/ui/UIFontFamilySelector.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { resolveAliasChain } from '../lib/tokenRegistry';
+  import { editorState } from '../lib/editorStore';
+  import { CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
+  import type { FontFamily, FontSource } from '../lib/themeTypes';
+  import UITokenSelector from './UITokenSelector.svelte';
+  import UIOptionList from './UIOptionList.svelte';
+  import UIOptionItem from './UIOptionItem.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let variable: string;
+  export let component: string | undefined = undefined;
+  export let canBeLinked: boolean = false;
+  export let disabled: boolean = false;
+  export let selectionsLocked: boolean = false;
+
+  const options = [
+    { key: 'display', label: 'Display' },
+    { key: 'sans', label: 'Sans' },
+    { key: 'serif', label: 'Serif' },
+    { key: 'mono', label: 'Mono' },
+  ];
+
+  let selector: UITokenSelector;
+  let chosenKey: string | null = null;
+  let chosenFamilyId: string | null = null;
+  let currentStack: string = '';
+  let familyNameByKey: Record<string, string> = {};
+
+  $: fontSources = $editorState.fonts.sources;
+  $: allFamilies = (fontSources as FontSource[]).flatMap((s) => s.families);
+  $: hasProjectFonts = allFamilies.length > 0;
+
+  function parseRef(value: string): string | null {
+    const m = value.match(/var\((--font-[a-z]+)\)/);
+    if (!m) return null;
+    const key = m[1].replace(/^--font-/, '');
+    return options.find((o) => o.key === key) ? key : null;
+  }
+
+  function firstFamilyName(stack: string): string {
+    if (!stack) return '';
+    const first = stack.split(',')[0].trim();
+    return first.replace(/^['"]|['"]$/g, '');
+  }
+
+  function findProjectFamilyByCssName(name: string): FontFamily | null {
+    if (!name) return null;
+    for (const source of fontSources) {
+      for (const fam of source.families) {
+        if (fam.cssName === name) return fam;
+      }
+    }
+    return null;
+  }
+
+  function genericFor(v: string): string {
+    if (v === '--font-mono') return 'monospace';
+    if (v === '--font-serif') return 'serif';
+    return 'sans-serif';
+  }
+
+  function readResolved() {
+    const root = getComputedStyle(document.documentElement);
+    currentStack = root.getPropertyValue(variable).trim();
+    const next: Record<string, string> = {};
+    for (const opt of options) {
+      const stack = root.getPropertyValue(`--font-${opt.key}`).trim();
+      next[opt.key] = firstFamilyName(stack);
+    }
+    familyNameByKey = next;
+  }
+
+  function handleVarChange(e: Event) {
+    const detail = (e as CustomEvent<{ name: string }>).detail;
+    if (detail?.name?.startsWith('--font-')) readResolved();
+  }
+
+  function initFromCurrent() {
+    readResolved();
+    const raw = document.documentElement.style.getPropertyValue(variable).trim();
+    if (raw) {
+      const key = parseRef(raw);
+      if (key) {
+        chosenKey = key;
+        chosenFamilyId = null;
+        return;
+      }
+      const fam = findProjectFamilyByCssName(firstFamilyName(raw));
+      if (fam) {
+        chosenKey = null;
+        chosenFamilyId = fam.id;
+        return;
+      }
+    }
+    for (const alias of resolveAliasChain(variable)) {
+      const key = parseRef(`var(${alias})`);
+      if (key) {
+        chosenKey = key;
+        chosenFamilyId = null;
+        return;
+      }
+    }
+    chosenKey = null;
+    chosenFamilyId = null;
+  }
+
+  function handleReset() {
+    chosenKey = null;
+    chosenFamilyId = null;
+    readResolved();
+    dispatch('change');
+  }
+
+  function selectOption(key: string, close: () => void) {
+    const target = `--font-${key}`;
+    if (target === variable) {
+      selector.writeOverride(null);
+      chosenKey = null;
+    } else {
+      selector.writeOverride(target);
+      chosenKey = key;
+    }
+    chosenFamilyId = null;
+    readResolved();
+    close();
+    dispatch('change');
+  }
+
+  function selectProjectFamily(family: FontFamily, close: () => void) {
+    const stack = `'${family.cssName}', ${genericFor(variable)}`;
+    selector.writeOverride(stack);
+    chosenKey = null;
+    chosenFamilyId = family.id;
+    readResolved();
+    close();
+    dispatch('change');
+  }
+
+  // Re-derive `chosenKey` / `chosenFamilyId` when `variable` changes (the
+  // VariantGroup tabs view reuses the same selector instance across states).
+  let lastSeenVariable: string | null = null;
+  $: if (variable !== lastSeenVariable) {
+    lastSeenVariable = variable;
+    initFromCurrent();
+  }
+
+  onMount(() => {
+    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+  });
+  onDestroy(() => {
+    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+  });
+
+  $: activeLabel = chosenFamilyId
+    ? (allFamilies.find((f) => f.id === chosenFamilyId)?.name ?? 'Project font')
+    : (options.find((o) => o.key === chosenKey)?.label ?? '');
+  $: displayFamily = firstFamilyName(currentStack);
+</script>
+
+<UITokenSelector
+  bind:this={selector}
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  dropdownMinWidth="14rem"
+  on:reset={handleReset}
+  on:var-change={initFromCurrent}
+>
+  <svelte:fragment slot="trigger-title">{activeLabel}</svelte:fragment>
+  <svelte:fragment slot="trigger-meta">{displayFamily || '—'}</svelte:fragment>
+
+  <svelte:fragment let:close>
+    <UIOptionList>
+      {#each options as opt}
+        <UIOptionItem
+          active={chosenKey === opt.key}
+          on:click={() => selectOption(opt.key, close)}
+        >
+          <span slot="preview" class="font-sample" style="font-family: var(--font-{opt.key});">Aa</span>
+          <svelte:fragment slot="label">{opt.label}</svelte:fragment>
+          <svelte:fragment slot="meta">{familyNameByKey[opt.key] ?? ''}</svelte:fragment>
+        </UIOptionItem>
+      {/each}
+
+      {#if hasProjectFonts}
+        <div class="pfs-divider" role="separator"></div>
+        <div class="pfs-section">
+          <div class="pfs-trigger" class:active={chosenFamilyId !== null}>
+            <span class="pfs-label">Project Fonts</span>
+            <span class="pfs-count">{allFamilies.length}</span>
+            <i class="fas fa-chevron-right pfs-chevron" aria-hidden="true"></i>
+          </div>
+          <div class="pfs-submenu">
+            {#each fontSources as source (source.id)}
+              {#if source.families.length > 0}
+                <div class="pfs-source-label">{source.label ?? source.kind}</div>
+                {#each source.families as fam (fam.id)}
+                  <UIOptionItem
+                    active={chosenFamilyId === fam.id}
+                    on:click={() => selectProjectFamily(fam, close)}
+                  >
+                    <span
+                      slot="preview"
+                      class="font-sample"
+                      style="font-family: '{fam.cssName}', {genericFor(variable)};"
+                    >Aa</span>
+                    <svelte:fragment slot="label">{fam.name}</svelte:fragment>
+                  </UIOptionItem>
+                {/each}
+              {/if}
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </UIOptionList>
+  </svelte:fragment>
+</UITokenSelector>
+
+<style>
+  .font-sample {
+    display: inline-block;
+    width: 2.25rem;
+    margin-right: var(--ui-space-8);
+    text-align: center;
+    font-size: var(--ui-font-size-2xl);
+    color: var(--ui-text-primary);
+    line-height: 1;
+  }
+
+  .pfs-divider {
+    height: 1px;
+    background: var(--ui-border-faint);
+    margin: var(--ui-space-4) 0;
+  }
+
+  .pfs-section {
+    position: relative;
+  }
+
+  .pfs-trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-6) var(--ui-space-8);
+    border: 1px solid transparent;
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+    cursor: default;
+  }
+
+  .pfs-section:hover .pfs-trigger,
+  .pfs-trigger.active {
+    background: var(--ui-hover);
+  }
+
+  .pfs-label {
+    flex: 1;
+  }
+
+  .pfs-count {
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+  }
+
+  .pfs-chevron {
+    font-size: 0.625rem;
+    color: var(--ui-text-secondary);
+    width: 0.75rem;
+  }
+
+  .pfs-submenu {
+    display: none;
+    position: absolute;
+    left: 100%;
+    top: calc(-1 * var(--ui-space-4));
+    min-width: 14rem;
+    max-width: 18rem;
+    max-height: 70vh;
+    overflow-y: auto;
+    padding: var(--ui-space-4);
+    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: 1;
+  }
+
+  .pfs-section:hover .pfs-submenu,
+  .pfs-section:focus-within .pfs-submenu {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pfs-source-label {
+    padding: var(--ui-space-4) var(--ui-space-8) var(--ui-space-2);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+</style>