@motion-proto/live-tokens 0.1.1 → 0.3.2

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
+  import UIVariantSelector from '../../ui/UIVariantSelector.svelte';
+  import UIFontFamilySelector from '../../ui/UIFontFamilySelector.svelte';
+  import UIFontSizeSelector from '../../ui/UIFontSizeSelector.svelte';
+  import UIFontWeightSelector from '../../ui/UIFontWeightSelector.svelte';
+  import UILineHeightSelector from '../../ui/UILineHeightSelector.svelte';
+  import FieldsetWrapper from './FieldsetWrapper.svelte';
+  import { BORDER_WIDTH } from '../../ui/variantScales';
+
+  export let colorVariable: string;
+  export let colorLabel: string = 'color';
+  export let familyVariable: string | undefined = undefined;
+  export let familyLabel: string = 'family';
+  export let sizeVariable: string | undefined = undefined;
+  export let sizeLabel: string = 'size';
+  export let weightVariable: string | undefined = undefined;
+  export let weightLabel: string = 'weight';
+  export let lineHeightVariable: string | undefined = undefined;
+  export let lineHeightLabel: string = 'line-h';
+  /** Optional outline rows rendered under the typography rows so a text-with-
+      stroke group keeps stroke controls visually nested with the type they
+      drive (e.g. SectionDivider title outline). */
+  export let outlineWidthVariable: string | undefined = undefined;
+  export let outlineWidthLabel: string = 'outline thickness';
+  export let outlineColorVariable: string | undefined = undefined;
+  export let outlineColorLabel: string = 'outline color';
+  /** When set, writes persist through the editor store under this component. */
+  export let component: string | undefined = undefined;
+  /** Legend text for the fieldset. */
+  export let legend: string = 'type';
+</script>
+
+<FieldsetWrapper {legend}>
+  <div class="type-grid">
+    <span class="row-label">{colorLabel}</span>
+    <UIPaletteSelector variable={colorVariable} {component} on:change />
+
+    {#if familyVariable}
+      <span class="row-label">{familyLabel}</span>
+      <UIFontFamilySelector variable={familyVariable} {component} canBeLinked on:change />
+    {/if}
+    {#if weightVariable}
+      <span class="row-label">{weightLabel}</span>
+      <UIFontWeightSelector variable={weightVariable} {component} canBeLinked on:change />
+    {/if}
+    {#if sizeVariable}
+      <span class="row-label">{sizeLabel}</span>
+      <UIFontSizeSelector variable={sizeVariable} {component} canBeLinked on:change />
+    {/if}
+    {#if lineHeightVariable}
+      <span class="row-label">{lineHeightLabel}</span>
+      <UILineHeightSelector variable={lineHeightVariable} {component} canBeLinked on:change />
+    {/if}
+    {#if outlineWidthVariable}
+      <span class="row-label">{outlineWidthLabel}</span>
+      <UIVariantSelector variable={outlineWidthVariable} {component} canBeLinked {...BORDER_WIDTH} on:change />
+    {/if}
+    {#if outlineColorVariable}
+      <span class="row-label">{outlineColorLabel}</span>
+      <UIPaletteSelector variable={outlineColorVariable} {component} canBeLinked on:change />
+    {/if}
+  </div>
+</FieldsetWrapper>
+
+<style>
+  .type-grid {
+    display: grid;
+    grid-template-columns: max-content 8rem 1fr;
+    column-gap: var(--ui-space-10);
+    row-gap: var(--ui-space-6);
+    align-items: center;
+    padding: var(--ui-space-4) var(--ui-space-12);
+  }
+
+  .row-label {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    text-align: left;
+    line-height: 1;
+  }
+</style>

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

@@ -0,0 +1,277 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  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';
+
+  export let name: string;
+  export let title: string;
+  export let tokens: Token[] = [];
+  export let states: Record<string, Token[]> | null = null;
+  /** Per-state type groups; rendered as TypeEditor blocks alongside the state's TokenLayout. */
+  export let typeGroups: Record<string, TypeGroupConfig[]> = {};
+  /** When set, overrides are read from and cleared through the editor store. */
+  export let component: string | undefined = 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. */
+  export let 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. */
+  export let columns: number = 1;
+  /** 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. */
+  export let selectorLabel: string = 'Element';
+
+  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);
+  $: linkedOrder = $linkedOrderStore ?? undefined;
+
+  let activeTab: string = '';
+
+  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);
+        }
+      }
+    });
+  }
+
+  $: copySources = (() => {
+    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;
+  })();
+
+  $: stateNames = states ? Object.keys(states) : [];
+  $: tabsStripVisible = stateNames.length >= 2;
+  $: 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.
+  $: if ($focusedStateStore && stateNames.includes($focusedStateStore) && activeTab !== $focusedStateStore) {
+    activeTab = $focusedStateStore;
+  }
+
+  $: inFocusMode = siblings.length > 0;
+  $: amIFocused = $focusedVariantStore === name;
+  $: shouldRender = !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).
+  $: 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>
+      <slot 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}
+                  on:click={() => { activeTab = s; focusedStateStore.set(s); }}
+                >{s}</button>
+              {/each}
+            </div>
+          {/if}
+          {#if activeTab}
+            <slot name="state-actions" stateName={activeTab} />
+          {/if}
+          {#if copySources.length > 0 && activeTab}
+            <CopyFromMenu
+              toState={activeTab}
+              variantName={name}
+              {copySources}
+              on:select={(e) => pickCopySource(activeTab, e.detail.fromVariant, e.detail.fromState)}
+            />
+          {/if}
+        </div>
+      </div>
+    {/if}
+
+    {#if activeTab && states[activeTab]}
+      {@const stateName = activeTab}
+      <slot name="composite-controls" {stateName} />
+      <span class="section-label">Properties</span>
+      <StateBlock
+        tokens={states[stateName]}
+        typeGroups={typeGroups[stateName] ?? []}
+        {component}
+        {linkedOrder}
+        {columns}
+        on:change
+      />
+    {/if}
+  {:else}
+    <slot activeState="" />
+    <TokenLayout
+      title={name}
+      tokens={tokens}
+      {component}
+      {linkedOrder}
+      on:change
+    />
+  {/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>

package/src/component-editor/scaffolding/buildTypeGroupTokens.ts

@@ -0,0 +1,97 @@
+import type { Token, TypeGroupConfig } from './types';
+
+/** The four font-shape properties on a TypeGroupConfig that share-block sharing
+    targets. Order is the canonical render order and the groupKey order. */
+export const TYPE_FONT_PROPS = [
+  { key: 'familyVariable', label: 'font family', defaultGroupKey: 'font-family' },
+  { key: 'sizeVariable', label: 'font size', defaultGroupKey: 'font-size' },
+  { key: 'weightVariable', label: 'font weight', defaultGroupKey: 'font-weight' },
+  { key: 'lineHeightVariable', label: 'line height', defaultGroupKey: 'line-height' },
+] as const satisfies ReadonlyArray<{
+  key: keyof TypeGroupConfig;
+  label: string;
+  defaultGroupKey: string;
+}>;
+
+export type TypeFontProp = typeof TYPE_FONT_PROPS[number];
+
+export type BuildTypeGroupTokensOptions = {
+  /** Override the default groupKey per property. Receives the prop descriptor and the
+      type-group config it came from. Return a stable string — siblings sharing the same
+      groupKey are linked in the linked block. */
+  groupKeyFor?: (prop: TypeFontProp, group: TypeGroupConfig) => string;
+};
+
+/** Derive the Token[] schema entries for every TypeGroupConfig in `typeGroups`. Each
+    group emits one `colorVariable` token plus up to 4 font-shape tokens (family/size/
+    weight/line-height) for whichever of those are declared on the group. Font-shape
+    tokens carry `canBeLinked: true` and a stable `groupKey` so the linked-block linkage
+    sees them; the color token is emitted plain (no groupKey, not shareable) so it stays
+    out of the linked block while still appearing in the editor's full token surface
+    (used by the reset-button and the design-token resolution test).
+
+    Mirrors the `flatMap`/loop pattern in StandardButtonsEditor and RadioButtonEditor so
+    editors don't have to hand-list 16+ near-identical Token entries. */
+export function buildTypeGroupTokens(
+  typeGroups: Record<string, TypeGroupConfig[]>,
+  options: BuildTypeGroupTokensOptions = {},
+): Token[] {
+  const { groupKeyFor } = options;
+  const tokens: Token[] = [];
+  for (const groups of Object.values(typeGroups)) {
+    for (const group of groups) {
+      tokens.push({ label: group.colorLabel ?? 'color', variable: group.colorVariable });
+      for (const prop of TYPE_FONT_PROPS) {
+        const variable = group[prop.key];
+        if (!variable) continue;
+        const groupKey = groupKeyFor ? groupKeyFor(prop, group) : prop.defaultGroupKey;
+        tokens.push({ label: prop.label, canBeLinked: true, groupKey, variable });
+      }
+    }
+  }
+  return tokens;
+}
+
+/** Color-only counterpart for editors that hand-roll their font-shape tokens (because
+    they use a custom groupKey scheme) but still want their `colorVariable`s in
+    `allTokens` — needed so the reset-button and the design-token resolution test see
+    them. Accepts either the full `Record` shape or a flat group array, so it slots
+    cleanly into both `Object.values(typeGroups).flat()` chains and per-variant
+    `flatMap` constructions.
+
+    Each color token gets a groupKey derived from the colorVariable's last-dash
+    suffix (e.g. `--badge-primary-text` → `text`) so that all variants/states of
+    the same slot are siblings and can be linked in the editor. They start out
+    divergent (one value per variant) and the user can opt in to a single shared
+    value via the link UI. */
+export function buildTypeGroupColorTokens(
+  typeGroups: Record<string, TypeGroupConfig[]> | TypeGroupConfig[],
+): Token[] {
+  const groups: TypeGroupConfig[] = Array.isArray(typeGroups)
+    ? typeGroups
+    : Object.values(typeGroups).flat();
+  return groups.map((g) => {
+    const lastDash = g.colorVariable.lastIndexOf('-');
+    const groupKey = lastDash >= 0 ? g.colorVariable.slice(lastDash + 1) : g.colorVariable;
+    return { label: g.colorLabel ?? 'color', variable: g.colorVariable, groupKey };
+  });
+}
+
+/** Companion helper: derive a `linkableContexts` map mapping every typography variable in
+    `typeGroups` to its state name. Use to build the linked-block context map without
+    spelling out 16+ entries; merge with non-typography entries via spread. */
+export function buildTypeGroupShareableContexts(
+  typeGroups: Record<string, TypeGroupConfig[]>,
+): Array<readonly [string, string]> {
+  const entries: Array<readonly [string, string]> = [];
+  for (const [stateName, groups] of Object.entries(typeGroups)) {
+    for (const group of groups) {
+      for (const prop of TYPE_FONT_PROPS) {
+        const variable = group[prop.key];
+        if (!variable) continue;
+        entries.push([variable, stateName] as const);
+      }
+    }
+  }
+  return entries;
+}

package/src/component-editor/scaffolding/componentSectionType.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from 'svelte';
+
+export type ComponentSection = {
+  id: string;
+  label: string;
+  component: ComponentType;
+  props?: Record<string, unknown>;
+};

package/src/component-editor/scaffolding/componentSources.ts

@@ -0,0 +1,9 @@
+import { componentRegistry } from '../registry';
+
+/**
+ * Resolve a component id to its runtime source file path. Reads from the
+ * single component registry — no parallel mapping to maintain.
+ */
+export function componentSourceFile(component: string): string {
+  return componentRegistry[component as keyof typeof componentRegistry]?.sourceFile ?? '';
+}

package/src/component-editor/scaffolding/defaultSections.ts

@@ -0,0 +1,16 @@
+import type { ComponentSection } from './componentSectionType';
+import { componentRegistryEntries } from '../registry';
+
+/**
+ * Default editor sections — derived from the single component registry. Each
+ * section's `id` is the canonical lowercase component id (matches the runtime
+ * filename, server scan, and `setComponentAlias` key); `label` is the
+ * display string; `component` is the editor Svelte component.
+ *
+ * To add or reorder sections, edit `src/component-editor/registry.ts`.
+ */
+export const defaultSections: ComponentSection[] = componentRegistryEntries.map((entry) => ({
+  id: entry.id,
+  label: entry.label,
+  component: entry.editorComponent,
+}));

package/src/component-editor/scaffolding/editorContext.ts

@@ -0,0 +1,44 @@
+import { getContext, setContext } from 'svelte';
+import { writable, type Writable, type Readable } from 'svelte/store';
+
+const KEY = Symbol('editor-context');
+
+export type EditorContext = {
+  /** Per-variable rank used by TokenLayout to align linked rows; null when no linked block. */
+  linkedOrder: Readable<Map<string, number> | null>;
+  /** Variant currently focused in the preview when multiple sibling variants exist. */
+  focusedVariant: Writable<string | null>;
+  /** Cross-group hint for which state tab to activate. VariantGroups whose `stateNames`
+      contain the value adopt it as their `activeTab`; others ignore it. Used to forward
+      LinkageChart row clicks to the state tab strip when the chart spans states. */
+  focusedState: Writable<string | null>;
+  /** Variable currently hovered in either the per-state Properties grid or the
+      Linked-properties block. Bidirectional cue: a hover in one surface lights up
+      the matching row in the other so the user can see the linkage at a glance. */
+  hoveredLinkedVariable: Writable<string | null>;
+};
+
+/** Internal mutable handle used by ComponentEditorBase. */
+export type EditorContextInternal = EditorContext & {
+  _linkedOrder: Writable<Map<string, number> | null>;
+};
+
+export function createEditorContext(): EditorContextInternal {
+  const _linkedOrder = writable<Map<string, number> | null>(null);
+  const focusedVariant = writable<string | null>(null);
+  const focusedState = writable<string | null>(null);
+  const hoveredLinkedVariable = writable<string | null>(null);
+  const ctx: EditorContextInternal = {
+    linkedOrder: _linkedOrder,
+    focusedVariant,
+    focusedState,
+    hoveredLinkedVariable,
+    _linkedOrder,
+  };
+  setContext(KEY, ctx);
+  return ctx;
+}
+
+export function getEditorContext(): EditorContext | undefined {
+  return getContext(KEY);
+}