@motion-proto/live-tokens 0.7.1 → 0.8.0

package/src/editor/ui/FontStackEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { flip } from 'svelte/animate';
+  import { cubicOut } from 'svelte/easing';
   import type {
     FontFamily,
     FontSource,
@@ -12,7 +14,11 @@
   import { applyFontStacks, SYSTEM_CASCADES } from '../core/fonts/fontLoader';
 
   const SYSTEM_PRESETS: SystemCascadePreset[] = ['system-ui-sans', 'system-ui-serif', 'system-ui-mono'];
-  const GENERIC_VALUES: GenericFamily[] = ['sans-serif', 'serif', 'monospace', 'cursive', 'fantasy'];
+  // `cursive` and `fantasy` are CSS-spec generics whose rendering varies wildly
+  // across OSes (cursive → Comic Sans / Snell Roundhand; fantasy → Impact /
+  // Papyrus). They're rarely what a designer means by "fallback," so we don't
+  // offer them in the editor.
+  const GENERIC_VALUES: GenericFamily[] = ['sans-serif', 'serif', 'monospace'];
 
   const STACK_VARIABLES: FontStackVariable[] = [
     '--font-display',
@@ -21,18 +27,55 @@
     '--font-mono',
   ];
 
+  // Each stack's terminal fallback (bottom slot). It's locked to system or
+  // generic so text always renders even if every project font 404s. The
+  // fallback maps by stack variable; chosen to match the stack's purpose.
+  const TERMINAL_FALLBACK_BY_VAR: Record<FontStackVariable, GenericFamily> = {
+    '--font-display': 'serif',
+    '--font-sans': 'sans-serif',
+    '--font-serif': 'serif',
+    '--font-mono': 'monospace',
+  };
+
+  // The single matching System UI preset paired with each stack — the only two
+  // options offered in the terminal slot's dropdown.
+  const TERMINAL_SYSTEM_BY_VAR: Record<FontStackVariable, SystemCascadePreset> = {
+    '--font-display': 'system-ui-serif',
+    '--font-sans': 'system-ui-sans',
+    '--font-serif': 'system-ui-serif',
+    '--font-mono': 'system-ui-mono',
+  };
+
   let fontSourcesList = $derived($editorState.fonts.sources);
   let fontStacksList = $derived($editorState.fonts.stacks);
   let allFamilies = $derived((fontSourcesList as FontSource[]).flatMap((s) => s.families.map((f) => ({ ...f, sourceLabel: s.label ?? s.kind }))));
   let familyById = $derived(new Map<string, FontFamily>(allFamilies.map((f) => [f.id, f])));
 
+  /** Ensure the slot list ends in a system/generic terminal. If it doesn't,
+   *  append the variable's default generic so the stack is always renderable. */
+  function withTerminalFallback(variable: FontStackVariable, slots: FontStackSlot[]): FontStackSlot[] {
+    const fallback: FontStackSlot = { kind: 'generic', value: TERMINAL_FALLBACK_BY_VAR[variable] };
+    if (slots.length === 0) return [fallback];
+    const last = slots[slots.length - 1];
+    if (last.kind === 'project') return [...slots, fallback];
+    return slots;
+  }
+
   function ensureAllStacksPresent(current: FontStack[]): FontStack[] {
     const byVar = new Map(current.map((s) => [s.variable, s]));
-    return STACK_VARIABLES.map((v) => byVar.get(v) ?? { variable: v, slots: [{ kind: 'generic', value: 'sans-serif' } as FontStackSlot] });
+    return STACK_VARIABLES.map((v) => {
+      const stack = byVar.get(v);
+      const slots = withTerminalFallback(v, stack?.slots ?? []);
+      return stack ? { ...stack, slots } : { variable: v, slots };
+    });
   }
 
   let stacks = $derived(ensureAllStacksPresent(fontStacksList));
 
+  function variableLabel(v: string): string {
+    return v.replace(/^--/, '').split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+  }
+
   function slotKey(slot: FontStackSlot): string {
     if (slot.kind === 'project') return `project:${slot.familyId}`;
     if (slot.kind === 'system') return `system:${slot.preset}`;
@@ -103,19 +146,37 @@
       newSlot = { kind: 'system', preset };
     }
     updateStack(variable, (slots) => {
-      slots.push(newSlot);
+      // Insert above the terminal fallback (always the last slot) so the
+      // terminal stays at the bottom.
+      const insertAt = Math.max(0, slots.length - 1);
+      slots.splice(insertAt, 0, newSlot);
       return slots;
     });
   }
 
+  /* Drag UX: the source row lifts (opacity, shadow); a white insertion bar
+     sits in the gap between rows at the projected drop position. The array
+     is only mutated on drop. animate:flip then slides every row to its new
+     spot, so the commit doesn't snap.
+
+     Only the drag handle is `draggable="true"` — putting it on the whole row
+     swallowed clicks on the inner <button>/<select> in real browsers because
+     mousedown started a drag gesture before `click` could fire. The handle
+     starts the drag and calls setDragImage(rowEl, ...) so the visual drag
+     image is still the whole row. */
   let dragSource: { variable: FontStackVariable; index: number } | null = $state(null);
-  let dragOver: { variable: FontStackVariable; index: number; position: 'before' | 'on' | 'after' } | null = $state(null);
+  let dragOver: { variable: FontStackVariable; index: number; position: 'before' | 'after' } | null = $state(null);
 
   function onDragStart(e: DragEvent, variable: FontStackVariable, index: number) {
     if (!e.dataTransfer) return;
     dragSource = { variable, index };
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('application/x-font-slot', JSON.stringify({ variable, index }));
+    const rowEl = (e.currentTarget as HTMLElement).closest('.slot-row') as HTMLElement | null;
+    if (rowEl) {
+      const rect = rowEl.getBoundingClientRect();
+      e.dataTransfer.setDragImage(rowEl, e.clientX - rect.left, e.clientY - rect.top);
+    }
   }
 
   function onDragOver(e: DragEvent, variable: FontStackVariable, index: number) {
@@ -124,9 +185,12 @@
     e.preventDefault();
     if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const y = e.clientY - rect.top;
-    const third = rect.height / 3;
-    const position = y < third ? 'before' : y > rect.height - third ? 'after' : 'on';
+    let position: 'before' | 'after' = e.clientY - rect.top < rect.height / 2 ? 'before' : 'after';
+    // Terminal fallback stays at the bottom — never accept a drop after it.
+    const stack = stacks.find((s) => s.variable === variable);
+    if (stack && index === stack.slots.length - 1 && position === 'after') {
+      position = 'before';
+    }
     dragOver = { variable, index, position };
   }
 
@@ -137,12 +201,12 @@
   function onDrop(e: DragEvent, variable: FontStackVariable, index: number) {
     e.preventDefault();
     const slotPayload = e.dataTransfer?.getData('application/x-font-slot');
-    const position = dragOver?.position ?? 'on';
+    const position = dragOver?.position ?? 'before';
     dragOver = null;
     if (!slotPayload) return;
     const src = JSON.parse(slotPayload) as { variable: FontStackVariable; index: number };
     if (src.variable !== variable) return;
-    if (src.index === index && position === 'on') return;
+    if (src.index === index) return;
     updateStack(variable, (slots) => {
       const [moved] = slots.splice(src.index, 1);
       let target = index;
@@ -163,63 +227,82 @@
   {#each stacks as stack (stack.variable)}
     <div class="font-stack">
       <div class="stack-header">
-        <span class="stack-variable">{stack.variable}</span>
+        <span class="stack-variable">{variableLabel(stack.variable)}</span>
       </div>
       <div class="font-stack-list">
-        {#each stack.slots as slot, i (i + ':' + slotKey(slot))}
+        {#each stack.slots as slot, i (slotKey(slot))}
+          {@const isTerminal = i === stack.slots.length - 1}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div
             class="slot-row"
-            class:drop-on={dragOver?.variable === stack.variable && dragOver?.index === i && dragOver?.position === 'on'}
+            class:terminal={isTerminal}
             class:drop-before={dragOver?.variable === stack.variable && dragOver?.index === i && dragOver?.position === 'before'}
             class:drop-after={dragOver?.variable === stack.variable && dragOver?.index === i && dragOver?.position === 'after'}
             class:dragging={dragSource?.variable === stack.variable && dragSource?.index === i}
-            draggable="true"
-            ondragstart={(e) => onDragStart(e, stack.variable, i)}
             ondragover={(e) => onDragOver(e, stack.variable, i)}
             ondragleave={onDragLeave}
             ondrop={(e) => onDrop(e, stack.variable, i)}
             ondragend={onDragEnd}
+            animate:flip={{ duration: 220, easing: cubicOut }}
           >
-            <span class="drag-handle" aria-hidden="true">⋮⋮</span>
-            <span class="slot-position">{i + 1}.</span>
-            <div class="slot-main">
-              <span
-                class="slot-preview"
-                style="font-family: {slotCssValue(slot)};{stack.variable === '--font-display' ? ' font-size: var(--ui-font-size-2xl);' : ''}"
-              >The quick brown fox jumps over the lazy dog</span>
+            <div class="slot-controls">
+              {#if isTerminal}
+                <i class="fas fa-lock slot-locked-glyph" aria-hidden="true" title="Final fallback — can't be removed"></i>
+              {:else}
+                <span
+                  class="drag-handle"
+                  aria-hidden="true"
+                  draggable="true"
+                  ondragstart={(e) => onDragStart(e, stack.variable, i)}
+                >⋮⋮</span>
+              {/if}
+              <span class="slot-position">{i + 1}.</span>
               <select
                 class="ui-form-select slot-select"
                 value={slotKey(slot)}
                 onchange={(e) => onSelectChange(e, stack.variable, i)}
               >
-                {#if allFamilies.length > 0}
-                  <optgroup label="Project fonts">
-                    {#each allFamilies as fam}
-                      <option value={`project:${fam.id}`}>{fam.name}</option>
+                {#if isTerminal}
+                  {@const sys = TERMINAL_SYSTEM_BY_VAR[stack.variable]}
+                  {@const gen = TERMINAL_FALLBACK_BY_VAR[stack.variable]}
+                  <option value={`system:${sys}`}>{sys === 'system-ui-sans' ? 'System UI (sans)' : sys === 'system-ui-serif' ? 'System UI (serif)' : 'System UI (mono)'}</option>
+                  <option value={`generic:${gen}`}>{gen}</option>
+                {:else}
+                  {#if allFamilies.length > 0}
+                    <optgroup label="Project fonts">
+                      {#each allFamilies as fam}
+                        <option value={`project:${fam.id}`}>{fam.name}</option>
+                      {/each}
+                    </optgroup>
+                  {/if}
+                  <optgroup label="System cascade">
+                    {#each SYSTEM_PRESETS as p}
+                      <option value={`system:${p}`}>{p === 'system-ui-sans' ? 'System UI (sans)' : p === 'system-ui-serif' ? 'System UI (serif)' : 'System UI (mono)'}</option>
+                    {/each}
+                  </optgroup>
+                  <optgroup label="Generic">
+                    {#each GENERIC_VALUES as g}
+                      <option value={`generic:${g}`}>{g}</option>
                     {/each}
                   </optgroup>
                 {/if}
-                <optgroup label="System cascade">
-                  {#each SYSTEM_PRESETS as p}
-                    <option value={`system:${p}`}>{p === 'system-ui-sans' ? 'System UI (sans)' : p === 'system-ui-serif' ? 'System UI (serif)' : 'System UI (mono)'}</option>
-                  {/each}
-                </optgroup>
-                <optgroup label="Generic">
-                  {#each GENERIC_VALUES as g}
-                    <option value={`generic:${g}`}>{g}</option>
-                  {/each}
-                </optgroup>
               </select>
+              {#if isTerminal}
+                <span class="slot-remove-placeholder" aria-hidden="true"></span>
+              {:else}
+                <button
+                  type="button"
+                  class="slot-remove"
+                  aria-label="Remove slot"
+                  title="Remove"
+                  onclick={() => removeSlot(stack.variable, i)}
+                >×</button>
+              {/if}
             </div>
-            <button
-              type="button"
-              class="slot-remove"
-              aria-label="Remove slot"
-              title="Remove"
-              onclick={() => removeSlot(stack.variable, i)}
-              disabled={stack.slots.length <= 1}
-            >×</button>
+            <span
+              class="slot-preview"
+              style="font-family: {slotCssValue(slot)};{stack.variable === '--font-display' ? ' font-size: var(--ui-font-size-2xl);' : ''}"
+            >The quick brown fox jumps over the lazy dog</span>
           </div>
         {/each}
       </div>
@@ -233,47 +316,104 @@
 <style>
   .font-stacks-columns {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
-    gap: var(--ui-space-8);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--ui-space-24);
   }
 
+  @media (max-width: 720px) {
+    .font-stacks-columns {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Track: each font family is a bordered channel that the slot cards drop into.
+     The interior sits a step deeper than the page surface, so the slot cards
+     (surface-low) read as raised inside the depression. */
   .font-stack {
+    position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-6);
-    padding: var(--ui-space-12);
-    background: none;
+    gap: var(--ui-space-12);
+    padding: var(--ui-space-20) var(--ui-space-12) var(--ui-space-16);
+    background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-md);
+    border-radius: var(--ui-radius-lg);
   }
 
+  /* Legend: knock through the top border like a native <fieldset>'s <legend>.
+     Editor content bg is solid black; the header paints over the border line
+     to cut it. */
   .stack-header {
+    position: absolute;
+    top: 0;
+    left: var(--ui-space-12);
+    transform: translateY(-50%);
     display: flex;
     align-items: center;
+    padding: 0 var(--ui-space-6);
+    background: black;
+    line-height: 1;
   }
 
   .stack-variable {
-    font-family: var(--ui-font-mono);
-    font-size: var(--ui-font-size-md);
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-bold);
     color: var(--ui-text-primary);
   }
 
   .font-stack-list {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-4);
+    gap: var(--ui-space-8);
   }
 
   .slot-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-10);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
+    background: var(--ui-surface-low);
+    position: relative;
+    transition:
+      opacity var(--ui-transition-fast),
+      transform var(--ui-transition-fast),
+      border-color var(--ui-transition-fast);
+  }
+  .slot-row:hover { border-color: var(--ui-border); }
+
+  .slot-controls {
     display: grid;
     grid-template-columns: auto auto 1fr auto;
     align-items: center;
-    gap: var(--ui-space-6);
-    padding: var(--ui-space-4) 0;
-    border-bottom: 1px solid var(--ui-border-low);
-    position: relative;
+    gap: var(--ui-space-8);
+  }
+
+  /* Reorder UX: a thin white bar sits in the existing 8px gap between rows
+     as the insertion indicator. The bar is absolutely positioned and consumes
+     no layout space, so the parent track stays the same height. On drop, the
+     array commits and animate:flip slides each row to its new position. */
+  .slot-row.drop-before::before,
+  .slot-row.drop-after::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--ui-text-primary);
+    border-radius: 1px;
+    box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
+  }
+  .slot-row.drop-before::before { top: -5px; }
+  .slot-row.drop-after::after   { bottom: -5px; }
+
+  .slot-row.dragging {
+    opacity: 0.55;
+    z-index: 2;
+    border-color: var(--ui-border-high);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
   }
-  .slot-row:last-child { border-bottom: none; }
 
   .drag-handle {
     cursor: grab;
@@ -281,22 +421,27 @@
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-md);
     line-height: 1;
-    letter-spacing: -2px;
   }
   .slot-row.dragging .drag-handle { cursor: grabbing; }
-  .slot-row.dragging { opacity: 0.55; }
 
-  .slot-row.drop-on { outline: 2px solid var(--ui-focus, #5eb2ff); outline-offset: -2px; }
-  .slot-row.drop-before::before,
-  .slot-row.drop-after::after {
-    content: '';
-    position: absolute;
-    left: 0; right: 0;
-    height: 2px;
-    background: var(--ui-focus, #5eb2ff);
+  /* Terminal-row lock glyph sits in the drag-handle's grid track; the row's
+     right-hand X column is left empty (see .slot-remove-placeholder) so the
+     lock is the only chrome and reads as "this row is fixed." */
+  .slot-locked-glyph {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    opacity: 0.55;
+  }
+
+  /* Empty grid track on terminal rows where the X button sits on others,
+     so columns stay aligned. */
+  .slot-remove-placeholder {
+    width: 1.5rem;
+    height: 1.5rem;
   }
-  .slot-row.drop-before::before { top: -1px; }
-  .slot-row.drop-after::after { bottom: -1px; }
 
   .slot-position {
     font-size: var(--ui-font-size-md);
@@ -305,13 +450,6 @@
     text-align: right;
   }
 
-  .slot-main {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-2);
-    min-width: 0;
-  }
-
   .slot-preview {
     font-size: var(--ui-font-size-md);
     color: var(--ui-text-primary);