@motion-proto/live-tokens 0.6.2 → 0.8.0

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

@@ -1,62 +0,0 @@
-<script lang="ts">
-  interface Props {
-    children?: import('svelte').Snippet;
-  }
-
-  let { children }: Props = $props();
-  /** Section that gathers render-time toggles a component accepts as props
-      (e.g. dismissible, action buttons, hover shimmer, show icons). */
-</script>
-
-<section class="config-block">
-  <header class="config-header">
-    <h3 class="config-title">Configuration</h3>
-    <p class="config-description">Component accepts multiple properties that can change its layout. Use these to preview.</p>
-  </header>
-  <div class="config-controls">
-    {@render children?.()}
-  </div>
-</section>
-
-<style>
-  .config-block {
-    margin-top: var(--ui-space-12);
-    padding: var(--ui-space-12);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-md);
-    background: var(--ui-surface-low);
-  }
-
-  .config-header {
-    margin-bottom: var(--ui-space-12);
-  }
-
-  .config-title {
-    margin: 0;
-    font-size: var(--ui-font-size-md);
-    font-weight: 500;
-    color: var(--ui-text-primary);
-  }
-
-  .config-description {
-    margin: var(--ui-space-2) 0 0;
-    font-size: var(--ui-font-size-sm);
-    color: var(--ui-text-secondary);
-  }
-
-  .config-controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ui-space-16);
-    align-items: center;
-  }
-
-  .config-controls :global(label) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-    font-size: var(--ui-font-size-sm);
-    color: var(--ui-text-secondary);
-    cursor: pointer;
-  }
-</style>

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

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import newspaperBg from '../../assets/newspaper.webp';
-
-  
-  
-  interface Props {
-    mode?: 'image' | 'color';
-    /** CSS var name (set by ShadowBackdropControls) the backdrop reads when in color mode. */
-    colorVariable: string;
-    /** Padding around the slotted preview. Set to '0' when the slotted component should cover the full backdrop area (e.g. dialog overlay). */
-    padding?: string;
-    children?: import('svelte').Snippet;
-  }
-
-  let {
-    mode = 'image',
-    colorVariable,
-    padding = '128px',
-    children
-  }: Props = $props();
-
-  let backgroundStyle =
-    $derived(mode === 'image'
-      ? `padding: ${padding}; background-image: url(${newspaperBg}); background-size: cover; background-position: center; background-repeat: no-repeat;`
-      : `padding: ${padding}; background: var(${colorVariable}, #1a1a1a);`);
-</script>
-
-<div class="shadow-backdrop" style={backgroundStyle}>
-  {@render children?.()}
-</div>
-
-<style>
-  .shadow-backdrop {
-    border-radius: var(--ui-radius-md);
-    overflow: hidden;
-  }
-</style>

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

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import UIRadioGroup from '../../ui/UIRadioGroup.svelte';
-  import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
-  import { setCssVar } from '../../lib/cssVarSync';
-
-  type Mode = 'image' | 'color';
-  
-  interface Props {
-    mode?: Mode;
-    /** Editor-scoped CSS var the picker writes to (must end with `-surface` to allow gradients). */
-    colorVariable: string;
-  }
-
-  let { mode = $bindable('image'), colorVariable }: Props = $props();
-
-  const options: ReadonlyArray<{ value: Mode; label: string }> = [
-    { value: 'image', label: 'Image' },
-    { value: 'color', label: 'Color' },
-  ];
-
-  // Editor-only backdrop vars aren't persisted to disk; seed surface-canvas as
-  // the default selection on first mount so the picker reads as surface-canvas
-  // and the color-mode preview matches.
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(colorVariable)) {
-      setCssVar(colorVariable, 'var(--surface-canvas)');
-    }
-  });
-</script>
-
-<label class="backdrop-config">
-  <span>Sample background</span>
-  <div class="backdrop-row">
-    <UIRadioGroup
-      bind:value={mode}
-      name="shadow-backdrop-mode-{Math.random().toString(36).slice(2, 8)}"
-      {options}
-    />
-    <div class="picker-slot">
-      <UIPaletteSelector variable={colorVariable} disabled={mode !== 'color'} />
-    </div>
-  </div>
-</label>
-
-<style>
-  .backdrop-row {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-16);
-    padding: var(--ui-space-4) var(--ui-space-8);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-sm);
-  }
-  .picker-slot {
-    min-width: 8rem;
-  }
-  .picker-slot :global(.ui-token-selector) {
-    width: 100%;
-  }
-</style>

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

@@ -1,132 +0,0 @@
-<script lang="ts">
-  /**
-   * Shared inner block rendered inside a single state in VariantGroup.
-   *
-   * Both the tabs branch and the list branch of VariantGroup render the same
-   * `<TypeEditor>` (when a state has type groups) followed by `<TokenLayout>`,
-   * differing only in the surrounding chrome (preview placement, toggles,
-   * tab strip). This component owns the duplicated inner block so a per-state
-   * control change happens in exactly one place.
-   */
-  import TokenLayout from './TokenLayout.svelte';
-  import TypeEditor from './TypeEditor.svelte';
-  import type { Token, TypeGroupConfig } from './types';
-
-  
-  
-  
-  
-  
-  interface Props {
-    /** Tokens for this state, fed to `<TokenLayout>`. */
-    tokens: Token[];
-    /** Type groups for this state; rendered as a row of `<TypeEditor>` blocks. */
-    typeGroups?: TypeGroupConfig[];
-    /** Forwarded to TypeEditor and TokenLayout so writes persist through the editor store. */
-    component?: string | undefined;
-    /** Per-variable rank passed through to TokenLayout for linked-block alignment. */
-    linkedOrder?: Map<string, number> | undefined;
-    /** Render the token grid with N visual columns. >1 spreads a long property
-      list horizontally; only meaningful for state-blocks without typeGroups
-      (the two-col flex layout already partitions screen real estate when
-      typeGroups are present). */
-    columns?: number;
-    onchange?: () => void;
-  }
-
-  let {
-    tokens,
-    typeGroups = [],
-    component = undefined,
-    linkedOrder = undefined,
-    columns = 1,
-    onchange,
-  }: Props = $props();
-
-  let hasTypeGroups = $derived(typeGroups.length > 0);
-</script>
-
-<div class="state-controls" class:two-col={hasTypeGroups}>
-  {#if hasTypeGroups}
-    <div class="state-type-groups">
-      {#each typeGroups as tg}
-        <TypeEditor
-          legend={tg.legend ?? 'type'}
-          colorVariable={tg.colorVariable}
-          colorLabel={tg.colorLabel ?? 'text color'}
-          familyVariable={tg.familyVariable}
-          familyLabel={tg.familyLabel ?? 'font family'}
-          sizeVariable={tg.sizeVariable}
-          sizeLabel={tg.sizeLabel ?? 'font size'}
-          weightVariable={tg.weightVariable}
-          weightLabel={tg.weightLabel ?? 'font weight'}
-          lineHeightVariable={tg.lineHeightVariable}
-          lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
-          outlineWidthVariable={tg.outlineWidthVariable}
-          outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
-          outlineColorVariable={tg.outlineColorVariable}
-          outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
-          {component}
-          {onchange}
-        />
-      {/each}
-    </div>
-  {/if}
-  <TokenLayout
-    title=""
-    {tokens}
-    {component}
-    {linkedOrder}
-    {columns}
-    {onchange}
-  />
-</div>
-
-<style>
-  .state-controls {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--ui-space-12);
-    align-items: start;
-    margin-top: var(--ui-space-4);
-  }
-
-  .state-controls.two-col {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ui-space-16) var(--ui-space-16);
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
-
-  .state-type-groups {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--ui-space-16);
-    align-items: flex-start;
-  }
-
-  /* Inside a state's two-col layout the fieldset frame is redundant with the
-     surrounding state card. Flatten the border/padding but keep the legend so
-     each block ("title", "body text", …) is identifiable. */
-  .state-controls.two-col .state-type-groups :global(.fieldset-wrapper) {
-    border: none;
-    padding: 0;
-  }
-
-  .state-controls.two-col .state-type-groups :global(.fieldset-wrapper.active) {
-    outline: none;
-  }
-
-  .state-controls.two-col .state-type-groups :global(.fieldset-legend) {
-    padding: 0 var(--ui-space-4) var(--ui-space-4);
-  }
-
-  /* The general-properties column has no legend of its own; pad it down by
-     one legend-line so its first row aligns with the first row of the
-     adjacent type-group. */
-  .state-controls.two-col > :global(.token-group) {
-    padding-top: calc(var(--ui-font-size-xs) + var(--ui-space-4));
-  }
-</style>

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

@@ -1,310 +0,0 @@
-<script lang="ts">
-  import { writable } from 'svelte/store';
-  import type { Snippet } from 'svelte';
-  import TokenLayout from './TokenLayout.svelte';
-  import StateBlock from './StateBlock.svelte';
-  import CopyFromMenu from './CopyFromMenu.svelte';
-  import { mutate } from '../../lib/editorStore';
-  import { getEditorContext } from './editorContext';
-  import type { Token, TypeGroupConfig } from './types';
-  import type { Sibling } from './siblings';
-
-  interface Props {
-    name: string;
-    title: string;
-    tokens?: Token[];
-    states?: Record<string, Token[]> | null;
-    /** Per-state type groups; rendered as TypeEditor blocks alongside the state's TokenLayout. */
-    typeGroups?: Record<string, TypeGroupConfig[]>;
-    /** When set, overrides are read from and cleared through the editor store. */
-    component?: string | undefined;
-    /** Sibling variants of this component (excludes self). When non-empty,
-        a "Copy from" menu is rendered that lets the user pull token values from
-        a sibling's same-state into the current state. */
-    siblings?: Sibling[];
-    /** Forwarded to StateBlock → TokenLayout. >1 lays out the property grid
-        across multiple visual columns (column-major flow). Useful for
-        single-text components like Button whose 8-10 properties stretch the
-        panel vertically when stacked single-column. */
-    columns?: number;
-    /** Label rendered above the state-tab selector strip. Defaults to "Element"
-        because most strips mix structural parts (e.g. bar, frame) with
-        component states; "States" would mislabel the parts. Editors can override
-        when every tab on the strip really is a state. */
-    selectorLabel?: string;
-    /** Forwarded to StateBlock — fires when a token is mutated. */
-    onchange?: () => void;
-    /** Default snippet: receives the active state name; renders the live preview. */
-    children?: Snippet<[{ activeState: string }]>;
-    /** Right-aligned controls in the state-tabs strip (e.g. per-state toggles). */
-    stateActions?: Snippet<[string]>;
-    /** Rendered above the property grid when a state is active. */
-    compositeControls?: Snippet<[string]>;
-  }
-
-  let {
-    name,
-    title,
-    tokens = [],
-    states = null,
-    typeGroups = {},
-    component = undefined,
-    siblings = [],
-    columns = 1,
-    selectorLabel = 'Element',
-    onchange,
-    children,
-    stateActions,
-    compositeControls,
-  }: Props = $props();
-
-  const editorCtx = getEditorContext();
-  const linkedOrderStore = editorCtx?.linkedOrder ?? writable<Map<string, number> | null>(null);
-  const focusedVariantStore = editorCtx?.focusedVariant ?? writable<string | null>(null);
-  const focusedStateStore = editorCtx?.focusedState ?? writable<string | null>(null);
-  let linkedOrder = $derived($linkedOrderStore ?? undefined);
-
-  let activeTab: string = $state('');
-
-  const TYPE_PROPS = ['colorVariable', 'familyVariable', 'sizeVariable', 'weightVariable', 'lineHeightVariable', 'outlineWidthVariable', 'outlineColorVariable'] as const;
-
-  function pickCopySource(toState: string, fromVariant: string, fromState: string) {
-    if (!component || !states) return;
-    const isSelfVariant = fromVariant === name;
-    const sibling = isSelfVariant ? null : siblings.find((s) => s.name === fromVariant);
-    if (!isSelfVariant && !sibling) return;
-    const srcTokens = (isSelfVariant ? states[fromState] : sibling!.states[fromState]) ?? [];
-    const dstTokens = states[toState] ?? [];
-    const srcTypeGroups = (isSelfVariant ? typeGroups[fromState] : sibling!.typeGroups?.[fromState]) ?? [];
-    const dstTypeGroups = typeGroups[toState] ?? [];
-
-    mutate(`copy ${fromVariant}/${fromState} → ${name}/${toState}`, (s) => {
-      const slice = s.components[component!] ?? (s.components[component!] = { activeFile: 'default', aliases: {}, config: {} });
-      const apply = (srcVar: string, dstVar: string) => {
-        if (srcVar === dstVar) return;
-        if (srcVar in slice.aliases) slice.aliases[dstVar] = slice.aliases[srcVar];
-        else delete slice.aliases[dstVar];
-      };
-      const minLen = Math.min(srcTokens.length, dstTokens.length);
-      for (let i = 0; i < minLen; i++) apply(srcTokens[i].variable, dstTokens[i].variable);
-      const minTypeGroups = Math.min(srcTypeGroups.length, dstTypeGroups.length);
-      for (let g = 0; g < minTypeGroups; g++) {
-        const srcType = srcTypeGroups[g];
-        const dstType = dstTypeGroups[g];
-        for (const prop of TYPE_PROPS) {
-          const srcVar = srcType[prop];
-          const dstVar = dstType[prop];
-          if (srcVar && dstVar) apply(srcVar, dstVar);
-        }
-      }
-    });
-  }
-
-  let copySources = $derived.by(() => {
-    const fromSiblings = siblings.map((s) => ({
-      name: s.name,
-      label: s.label,
-      states: Object.keys(s.states),
-    }));
-    const ownStates = states ? Object.keys(states) : [];
-    if (ownStates.length >= 2) {
-      return [{ name, label: title, states: ownStates }, ...fromSiblings];
-    }
-    return fromSiblings;
-  });
-
-  let stateNames = $derived(states ? Object.keys(states) : []);
-  let tabsStripVisible = $derived(stateNames.length >= 2);
-  $effect(() => {
-    if (stateNames.length > 0 && !stateNames.includes(activeTab)) {
-      activeTab = stateNames[0];
-    }
-  });
-  // Cross-group hint from chart row clicks: adopt it if it names one of our states.
-  $effect(() => {
-    if ($focusedStateStore && stateNames.includes($focusedStateStore) && activeTab !== $focusedStateStore) {
-      activeTab = $focusedStateStore;
-    }
-  });
-
-  let inFocusMode = $derived(siblings.length > 0);
-  let amIFocused = $derived($focusedVariantStore === name);
-  let shouldRender = $derived(!inFocusMode || amIFocused);
-  // Mirror this group's active state back to the shared store when this is the
-  // focused variant, so the linked-block row + chart selection track the user's
-  // state-tab clicks (not just chart-row clicks).
-  $effect(() => {
-    if (amIFocused && activeTab && stateNames.includes(activeTab) && $focusedStateStore !== activeTab) {
-      focusedStateStore.set(activeTab);
-    }
-  });
-
-</script>
-
-{#if shouldRender}
-<div class="demo-section variant-group">
-  {#if !inFocusMode}
-  <div class="variant-header">
-    <h3 class="demo-subtitle">{title}</h3>
-  </div>
-  {/if}
-
-  {#if states}
-    <!-- Preview at top, then state tabs + Copy from, then properties for active tab. -->
-    <div class="tabs-preview">
-      <span class="section-label">Preview</span>
-      {@render children?.({ activeState: activeTab })}
-    </div>
-
-    {#if tabsStripVisible || (copySources.length > 0 && activeTab)}
-      <div class="tabs-states-block">
-        {#if tabsStripVisible}
-          <span class="section-label">{selectorLabel}</span>
-        {/if}
-        <div class="tabs-selectors">
-          {#if tabsStripVisible}
-            <div class="state-tabs" role="tablist">
-              {#each stateNames as s}
-                <button
-                  type="button"
-                  class="state-tab-btn"
-                  class:active={activeTab === s}
-                  role="tab"
-                  aria-selected={activeTab === s}
-                  onclick={() => { activeTab = s; focusedStateStore.set(s); }}
-                >{s}</button>
-              {/each}
-            </div>
-          {/if}
-          {#if activeTab}
-            {@render stateActions?.(activeTab)}
-          {/if}
-          {#if copySources.length > 0 && activeTab}
-            <CopyFromMenu
-              toState={activeTab}
-              variantName={name}
-              {copySources}
-              onselect={(d) => pickCopySource(activeTab, d.fromVariant, d.fromState)}
-            />
-          {/if}
-        </div>
-      </div>
-    {/if}
-
-    {#if activeTab && states[activeTab]}
-      {@const stateName = activeTab}
-      {@render compositeControls?.(stateName)}
-      <span class="section-label">Properties</span>
-      <StateBlock
-        tokens={states[stateName]}
-        typeGroups={typeGroups[stateName] ?? []}
-        {component}
-        {linkedOrder}
-        {columns}
-        {onchange}
-      />
-    {/if}
-  {:else}
-    {@render children?.({ activeState: '' })}
-    <TokenLayout
-      title={name}
-      tokens={tokens}
-      {component}
-      {linkedOrder}
-      {onchange}
-    />
-  {/if}
-
-</div>
-{/if}
-
-<style>
-  .variant-group {
-    padding: var(--ui-space-16);
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-md);
-    gap: var(--ui-space-12);
-  }
-
-  .variant-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--ui-space-12);
-  }
-
-  .variant-header .demo-subtitle {
-    margin: 0;
-    font-size: var(--ui-font-size-2xl);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-primary);
-  }
-
-  .tabs-preview {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-8);
-  }
-
-  .tabs-states-block {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-8);
-  }
-
-  .tabs-selectors {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-12);
-  }
-
-  .state-tabs {
-    display: inline-flex;
-    flex-wrap: wrap;
-    gap: var(--ui-space-4);
-    padding: var(--ui-space-4);
-    background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-md);
-  }
-
-  .state-tab-btn {
-    padding: var(--ui-space-6) var(--ui-space-12);
-    background: none;
-    border: none;
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-weight-medium);
-    text-transform: capitalize;
-    cursor: pointer;
-    transition: color var(--ui-transition-fast), background var(--ui-transition-fast);
-  }
-
-  .state-tab-btn:hover:not(.active) {
-    color: var(--ui-text-primary);
-    background: var(--ui-hover);
-  }
-
-  .state-tab-btn.active {
-    color: var(--ui-text-primary);
-    background: var(--ui-surface-high);
-    box-shadow: 0 0 0 1px var(--ui-border-default);
-  }
-
-  .section-label {
-    display: block;
-    margin: 0;
-    font-size: var(--ui-font-size-md);
-    font-weight: 500;
-    color: var(--ui-text-primary);
-  }
-
-  /* The Properties label is a direct child of .variant-group (which doesn't
-     apply a flex gap), so space it from the tabs strip above. */
-  .variant-group > .section-label {
-    margin-top: var(--ui-space-8);
-  }
-
-</style>