@motion-proto/live-tokens 0.3.7 → 0.5.0

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

@@ -5,16 +5,17 @@
    * gradient convention (0deg = pointing up, increasing clockwise) so the
    * displayed line orients the way the gradient axis will paint.
    */
-  import { createEventDispatcher } from 'svelte';
-
-  export let value: number = 0;
-  export let label: string = 'Angle';
-  export let size: number = 44;
+  interface Props {
+    value?: number;
+    label?: string;
+    size?: number;
+    onchange?: (payload: { value: number }) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: { value: number } }>();
+  let { value = $bindable(0), label = 'Angle', size = 44, onchange }: Props = $props();
 
-  let dialEl: HTMLDivElement;
-  let dragging = false;
+  let dialEl: HTMLDivElement | undefined = $state();
+  let dragging = $state(false);
 
   function normalize(deg: number): number {
     const r = Math.round(deg) % 360;
@@ -25,11 +26,11 @@
     const n = normalize(next);
     if (n === value) return;
     value = n;
-    dispatch('change', { value: n });
+    onchange?.({ value: n });
   }
 
   function angleFromEvent(e: PointerEvent): number {
-    const rect = dialEl.getBoundingClientRect();
+    const rect = dialEl!.getBoundingClientRect();
     const cx = rect.left + rect.width / 2;
     const cy = rect.top + rect.height / 2;
     const dx = e.clientX - cx;
@@ -41,7 +42,7 @@
 
   function onPointerDown(e: PointerEvent) {
     dragging = true;
-    dialEl.setPointerCapture(e.pointerId);
+    dialEl!.setPointerCapture(e.pointerId);
     emit(angleFromEvent(e));
   }
   function onPointerMove(e: PointerEvent) {
@@ -51,7 +52,7 @@
   function onPointerUp(e: PointerEvent) {
     if (!dragging) return;
     dragging = false;
-    dialEl.releasePointerCapture(e.pointerId);
+    dialEl!.releasePointerCapture(e.pointerId);
   }
 
   function onInputChange(e: Event) {
@@ -59,7 +60,7 @@
     if (Number.isFinite(v)) emit(v);
   }
 
-  $: indicatorTransform = `rotate(${value}deg)`;
+  let indicatorTransform = $derived(`rotate(${value}deg)`);
 </script>
 
 <div class="angle-dial-row">
@@ -71,17 +72,17 @@
     class="dial"
     class:dragging
     style="width: {size}px; height: {size}px;"
-    on:pointerdown={onPointerDown}
-    on:pointermove={onPointerMove}
-    on:pointerup={onPointerUp}
-    on:pointercancel={onPointerUp}
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    onpointercancel={onPointerUp}
     role="slider"
     aria-valuemin="0"
     aria-valuemax="360"
     aria-valuenow={value}
     aria-label={label}
     tabindex="0"
-    on:keydown={(e) => {
+    onkeydown={(e) => {
       if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); emit(value - 1); }
       else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); emit(value + 1); }
     }}
@@ -96,7 +97,7 @@
     max="360"
     step="1"
     value={value}
-    on:change={onInputChange}
+    onchange={onInputChange}
   />
   <span class="suffix">°</span>
 </div>

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import DemoHeader from './DemoHeader.svelte';
   import NonStylableConfig from './NonStylableConfig.svelte';
   import LinkedBlock from './LinkedBlock.svelte';
@@ -6,36 +8,58 @@
   import type { Token } from './types';
   import type { LinkedBlockResult } from './linkedBlock';
 
-  export let component: string;
-  export let title: string;
-  export let description: string = '';
-  /** Token list used to drive the reset action in the header. The editor itself
+  
+  
+  
+  interface Props {
+    component: string;
+    title: string;
+    description?: string;
+    /** Token list used to drive the reset action in the header. The editor itself
       is responsible for calling `registerComponentSchema` synchronously. */
-  export let tokens: Token[] = [];
-  /** Optional linked-block result. When provided, the LinkedBlock is rendered
+    tokens?: Token[];
+    /** Optional linked-block result. When provided, the LinkedBlock is rendered
       and hover highlights propagate to VariantGroup children via context. */
-  export let linked: LinkedBlockResult | null = null;
-  /** Canonical {value,label} list of variants in display order. When provided
+    linked?: LinkedBlockResult | null;
+    /** Canonical {value,label} list of variants in display order. When provided
       with 2+ entries, a single variant tab strip is rendered that drives which
       VariantGroup is focused. */
-  export let variants: { value: string; label: string }[] = [];
+    variants?: { value: string; label: string }[];
+    config?: import('svelte').Snippet;
+    children?: import('svelte').Snippet<[any]>;
+  }
+
+  let {
+    component,
+    title,
+    description = '',
+    tokens = [],
+    linked = null,
+    variants = [],
+    config,
+    children
+  }: Props = $props();
 
   const ctx = createEditorContext();
   const { focusedVariant } = ctx;
 
-  $: ctx._linkedOrder.set(linked?.linkedOrder ?? null);
-  $: showVariantTabs = variants.length >= 2;
-  $: if (showVariantTabs && ($focusedVariant === null || !variants.some((v) => v.value === $focusedVariant))) {
-    focusedVariant.set(variants[0].value);
-  }
-  $: resetVariables = tokens.map((t) => t.variable);
+  run(() => {
+    ctx._linkedOrder.set(linked?.linkedOrder ?? null);
+  });
+  let showVariantTabs = $derived(variants.length >= 2);
+  run(() => {
+    if (showVariantTabs && ($focusedVariant === null || !variants.some((v) => v.value === $focusedVariant))) {
+      focusedVariant.set(variants[0].value);
+    }
+  });
+  let resetVariables = $derived(tokens.map((t) => t.variable));
 </script>
 
 <div class="demo-block">
   <DemoHeader {component} {title} {description} {resetVariables} />
-  {#if $$slots.config}
+  {#if config}
     <NonStylableConfig>
-      <slot name="config" />
+      {@render config?.()}
     </NonStylableConfig>
   {/if}
   {#if showVariantTabs}
@@ -47,14 +71,14 @@
           class:active={opt.value === $focusedVariant}
           role="tab"
           aria-selected={opt.value === $focusedVariant}
-          on:click={() => focusedVariant.set(opt.value)}
+          onclick={() => focusedVariant.set(opt.value)}
         >{opt.label}</button>
       {/each}
     </div>
   {/if}
-  <slot focusedVariant={$focusedVariant} />
+  {@render children?.({ focusedVariant: $focusedVariant, })}
   {#if linked}
-    <LinkedBlock {component} {linked} on:change />
+    <LinkedBlock {component} {linked} />
   {/if}
 </div>
 

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

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   declare const __PROJECT_ROOT__: string | undefined;
 </script>
 
@@ -27,18 +27,25 @@
   import ComponentFileMenu from './ComponentFileMenu.svelte';
   import SaveAsDialog from './SaveAsDialog.svelte';
 
-  /** Which component this manager controls (e.g. "button"). */
-  export let component: string;
-  /** Display name shown at the start of the bar (e.g. "Segmented Control"). */
-  export let title: string = '';
-  /** When provided, renders a Reset button that reverts the component to its
+  
+  
+  
+  interface Props {
+    /** Which component this manager controls (e.g. "button"). */
+    component: string;
+    /** Display name shown at the start of the bar (e.g. "Segmented Control"). */
+    title?: string;
+    /** When provided, renders a Reset button that reverts the component to its
       currently-loaded config file (discarding unsaved edits). To switch
       configs or return to default, use the File menu. */
-  export let resetVariables: string[] | null = null;
+    resetVariables?: string[] | null;
+  }
+
+  let { component, title = '', resetVariables = null }: Props = $props();
 
   const projectRoot: string =
     typeof __PROJECT_ROOT__ !== 'undefined' ? (__PROJECT_ROOT__ ?? '') : '';
-  $: sourceFile = componentSourceFile(component);
+  let sourceFile = $derived(componentSourceFile(component));
 
   type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
   let saveStatus: SaveStatus = 'idle';
@@ -49,15 +56,58 @@
     saveStatus = state;
     setTimeout(() => (saveStatus = 'idle'), 2000);
   }
-  let files: ComponentConfigMeta[] = [];
-  let activeFileName = 'default';
-  let currentDisplayName = 'Default';
-  let saveAsDialog = false;
+  let files: ComponentConfigMeta[] = $state([]);
+  let activeFileName = $state('default');
+  let currentDisplayName = $state('Default');
+  let saveAsDialog = $state(false);
 
-  let productionInfo: ComponentProductionInfo | null = null;
+  let productionInfo = $state<ComponentProductionInfo | null>(null);
   type ProductionStatus = 'idle' | 'updating' | 'done' | 'error';
-  let productionUpdateStatus: ProductionStatus = 'idle';
-  let adoptFeedback = '';
+  let productionUpdateStatus: ProductionStatus = $state('idle');
+  let adoptFeedback = $state('');
+
+  let infoOpen = $state(false);
+  let infoBtnEl = $state<HTMLButtonElement | undefined>(undefined);
+  let infoPopoverEl = $state<HTMLDivElement | undefined>(undefined);
+  let infoPopoverReady = $state(false);
+
+  /** Anchor the fixed-position popover centered below the info button.
+      Uses position: fixed so it escapes the sticky header's stacking
+      context (which was letting the side panels paint over it). */
+  function positionInfoPopover(): void {
+    const btn = infoBtnEl;
+    const pop = infoPopoverEl;
+    if (!btn || !pop) return;
+    const br = btn.getBoundingClientRect();
+    const pr = pop.getBoundingClientRect();
+    const margin = 8;
+    let left = br.left + br.width / 2 - pr.width / 2;
+    const vw = window.innerWidth;
+    if (left < margin) left = margin;
+    if (left + pr.width > vw - margin) left = vw - margin - pr.width;
+    pop.style.left = `${left}px`;
+    pop.style.top = `${br.bottom + margin}px`;
+    infoPopoverReady = true;
+  }
+
+  $effect(() => {
+    if (!infoOpen) {
+      infoPopoverReady = false;
+      return;
+    }
+    // Two rAFs: first so Svelte mounts the popover and the bind: ref is set,
+    // second so its rendered width is measurable before we anchor it.
+    let raf1 = requestAnimationFrame(() => {
+      raf1 = requestAnimationFrame(positionInfoPopover);
+    });
+    window.addEventListener('scroll', positionInfoPopover, true);
+    window.addEventListener('resize', positionInfoPopover);
+    return () => {
+      cancelAnimationFrame(raf1);
+      window.removeEventListener('scroll', positionInfoPopover, true);
+      window.removeEventListener('resize', positionInfoPopover);
+    };
+  });
 
   /** Same idle-after-2s pattern for the production-update flash. */
   function flashProductionStatus(state: Exclude<ProductionStatus, 'idle'>) {
@@ -68,9 +118,9 @@
     }, 2000);
   }
 
-  $: compDirty = $componentDirty[component] ?? false;
-  $: isApplied = !!productionInfo && productionInfo.fileName === activeFileName && !compDirty;
-  $: resetDirty = !!resetVariables && compDirty;
+  let compDirty = $derived($componentDirty[component] ?? false);
+  let isApplied = $derived(!!productionInfo && productionInfo.fileName === activeFileName && !compDirty);
+  let resetDirty = $derived(!!resetVariables && compDirty);
 
   async function refreshFiles() {
     // safeFetch returns null on dev-server unavailable / non-2xx — silently
@@ -99,16 +149,28 @@
     await refreshFiles();
     await refreshProduction();
     window.addEventListener('keydown', handleKeydown);
+    document.addEventListener('mousedown', handleDocumentMousedown, true);
   });
 
   onDestroy(() => {
     window.removeEventListener('keydown', handleKeydown);
+    document.removeEventListener('mousedown', handleDocumentMousedown, true);
   });
 
   function handleKeydown(e: KeyboardEvent) {
     if ((e.metaKey || e.ctrlKey) && e.key === 's') {
       e.preventDefault();
       handleSave();
+    } else if (e.key === 'Escape' && infoOpen) {
+      infoOpen = false;
+    }
+  }
+
+  function handleDocumentMousedown(e: MouseEvent) {
+    if (!infoOpen) return;
+    const target = e.target as Element | null;
+    if (target && !target.closest('.cfm-info-btn, .cfm-info-popover')) {
+      infoOpen = false;
     }
   }
 
@@ -166,8 +228,8 @@
     saveAsDialog = true;
   }
 
-  async function confirmSaveAs(e: CustomEvent<{ displayName: string; fileName: string }>) {
-    const { displayName, fileName } = e.detail;
+  async function confirmSaveAs(detail: { displayName: string; fileName: string }) {
+    const { displayName, fileName } = detail;
     saveStatus = 'saving';
     try {
       await persist(fileName, displayName);
@@ -178,8 +240,7 @@
     }
   }
 
-  async function handleLoad(e: CustomEvent<ComponentConfigMeta>) {
-    const file = e.detail;
+  async function handleLoad(file: ComponentConfigMeta) {
     // Multi-step service flow (load + set-active) — if any network call
     // fails, the dialog is already closed and the local state stays on the
     // previous selection. Silent by design; the same boot resilience that
@@ -195,8 +256,7 @@
     }
   }
 
-  async function handleDelete(e: CustomEvent<ComponentConfigMeta>) {
-    const file = e.detail;
+  async function handleDelete(file: ComponentConfigMeta) {
     if (file.fileName === 'default') return;
     // Multi-step service flow (delete + reload-default-on-active-removal).
     // Silent by design — see handleLoad.
@@ -268,7 +328,7 @@
         title="Open {sourceFile} in VS Code"
       >
         <i class="fas fa-code"></i>
-        <span>Source</span>
+        <span>Show component source</span>
       </a>
     {/if}
   </div>
@@ -300,16 +360,16 @@
           {component}
           {files}
           {activeFileName}
-          on:save={handleSave}
-          on:saveAs={openSaveAs}
-          on:openLoad={refreshFiles}
-          on:load={handleLoad}
-          on:delete={handleDelete}
+          onsave={handleSave}
+          onsaveAs={openSaveAs}
+          onopenLoad={refreshFiles}
+          onload={handleLoad}
+          ondelete={handleDelete}
         />
         {#if resetVariables}
           <button
             class="cfm-btn reset-btn"
-            on:click={handleReset}
+            onclick={handleReset}
             disabled={!resetDirty}
             title="Revert unsaved changes to {currentDisplayName}"
           >
@@ -342,7 +402,7 @@
           class:saving={productionUpdateStatus === 'updating'}
           class:saved={productionUpdateStatus === 'done'}
           class:error={productionUpdateStatus === 'error'}
-          on:click={handleUpdateProduction}
+          onclick={handleUpdateProduction}
           disabled={productionUpdateStatus === 'updating' || !productionInfo || (productionInfo.fileName === activeFileName && !compDirty)}
           title={!productionInfo
             ? ''
@@ -359,6 +419,50 @@
             {#if productionUpdateStatus === 'idle'}Adopt{:else if productionUpdateStatus === 'updating'}Adopting{:else if productionUpdateStatus === 'done'}Adopted{:else}Error{/if}
           </span>
         </button>
+        <button
+          type="button"
+          class="cfm-info-btn"
+          aria-label="About Save and Adopt"
+          aria-expanded={infoOpen}
+          bind:this={infoBtnEl}
+          onclick={() => (infoOpen = !infoOpen)}
+        >
+          <i class="fas fa-circle-info"></i>
+        </button>
+        {#if infoOpen}
+          <div
+            class="cfm-info-popover"
+            class:ready={infoPopoverReady}
+            role="dialog"
+            aria-label="About Save and Adopt"
+            bind:this={infoPopoverEl}
+          >
+            <header class="cfm-info-header">
+              <span class="cfm-info-title">Component Configuration</span>
+              <button
+                type="button"
+                class="cfm-info-close"
+                aria-label="Close"
+                onclick={() => (infoOpen = false)}
+              >
+                <i class="fas fa-xmark"></i>
+              </button>
+            </header>
+            <div class="cfm-info-body">
+              <p>
+                Editor and Prod both use a saved file. When they share the
+                <em>same</em> file, <strong>Saved changes</strong> go to into production
+                immediately. They are sharing the configuration.
+              </p>
+              <p>
+                To experiment without changing production,<strong>Save As</strong> a new file first.
+              </p>
+              <p>
+                When ready, click <strong>Adopt</strong> to use the new file on prod.
+              </p>
+            </div>
+          </div>
+        {/if}
         {#if adoptFeedback}
           <span class="cfm-feedback" aria-live="polite">{adoptFeedback}</span>
         {/if}
@@ -371,7 +475,7 @@
   bind:show={saveAsDialog}
   {currentDisplayName}
   {files}
-  on:save={confirmSaveAs}
+  onsave={confirmSaveAs}
 />
 
 <style>
@@ -413,13 +517,15 @@
   .source-link {
     display: inline-flex;
     align-items: center;
-    gap: var(--ui-space-4);
-    padding: var(--ui-space-2) var(--ui-space-6);
+    gap: var(--ui-space-6);
+    height: 26px;
+    padding: 0 14px;
     font-size: var(--ui-font-size-xs);
+    font-weight: 500;
     color: var(--ui-text-secondary);
     text-decoration: none;
     border: 1px solid var(--ui-border-default);
-    border-radius: var(--ui-radius-sm);
+    border-radius: 999px;
     transition: all var(--ui-transition-fast);
   }
 
@@ -553,8 +659,10 @@
   }
 
   /* actions cluster — sits directly next to the filename pill so the
-     buttons stay near the input and don't drift under the open editor panel */
+     buttons stay near the input and don't drift under the open editor panel.
+     position: relative anchors the info popover below the cluster. */
   .cfm-actions {
+    position: relative;
     display: flex;
     align-items: center;
     gap: var(--ui-space-6);
@@ -674,6 +782,121 @@
     50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-highlight) 10%, transparent); }
   }
 
+  /* info button — naked icon, no chrome. The icon itself carries the
+     affordance; hover/active simply brighten its color. */
+  .cfm-info-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ui-space-2) var(--ui-space-4);
+    background: transparent;
+    border: 0;
+    color: var(--ui-text-tertiary);
+    font-size: 1.15rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .cfm-info-btn:hover,
+  .cfm-info-btn[aria-expanded='true'] {
+    color: var(--ui-text-primary);
+  }
+
+  .cfm-info-popover {
+    /* Fixed positioning escapes the sticky header's stacking context,
+       so the popover paints over the side panels. JS in this file
+       anchors it centered below the info button. */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 22rem;
+    max-width: calc(100vw - var(--ui-space-24));
+    padding: 0;
+    background: var(--ui-surface-higher);
+    border: 1px solid var(--ui-border-medium);
+    border-radius: var(--ui-radius-lg);
+    box-shadow: var(--ui-shadow-lg);
+    z-index: 1000;
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-family, system-ui, sans-serif);
+    overflow: hidden;
+    visibility: hidden;
+    animation: cfm-info-in 140ms ease-out;
+  }
+
+  .cfm-info-popover.ready {
+    visibility: visible;
+  }
+
+  .cfm-info-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-10) var(--ui-space-12) var(--ui-space-10) var(--ui-space-16);
+    border-bottom: 1px solid var(--ui-border-subtle);
+  }
+
+  .cfm-info-title {
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-semibold);
+    letter-spacing: -0.01em;
+    line-height: 1.2;
+  }
+
+  .cfm-info-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ui-space-24);
+    height: var(--ui-space-24);
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
+    cursor: pointer;
+    transition: color var(--ui-transition-fast), background var(--ui-transition-fast);
+  }
+
+  .cfm-info-close:hover {
+    color: var(--ui-text-primary);
+    background: var(--ui-hover);
+  }
+
+  .cfm-info-body {
+    padding: var(--ui-space-16);
+  }
+
+  .cfm-info-popover p {
+    margin: 0 0 var(--ui-space-12) 0;
+    font-size: var(--ui-font-size-xs);
+    line-height: 1.55;
+  }
+
+  .cfm-info-popover p:last-child {
+    margin-bottom: 0;
+  }
+
+  .cfm-info-popover strong {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .cfm-info-popover em {
+    font-style: italic;
+    color: var(--ui-text-primary);
+  }
+
+  @keyframes cfm-info-in {
+    from { opacity: 0; transform: translateY(-3px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
   /* narrow viewports: hide button text, keep icons visible */
   @media (max-width: 640px) {
     .cfm-btn span { display: none; }