@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/component-editor/registry.ts

@@ -0,0 +1,246 @@
+import type { ComponentType, SvelteComponent } from 'svelte';
+import type { Token } from './scaffolding/types';
+import { registerComponentSchema } from '../lib/editorStore';
+
+import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
+import CalloutEditor, { allTokens as calloutTokens } from './CalloutEditor.svelte';
+import CornerBadgeEditor, { allTokens as cornerBadgeTokens } from './CornerBadgeEditor.svelte';
+import StandardButtonsEditor, { allTokens as buttonTokens } from './StandardButtonsEditor.svelte';
+import CardEditor, { allTokens as cardTokens } from './CardEditor.svelte';
+import CollapsibleSectionEditor, { allTokens as collapsibleSectionTokens } from './CollapsibleSectionEditor.svelte';
+import DialogEditor, { allTokens as dialogTokens } from './DialogEditor.svelte';
+import ImageEditor, { allTokens as imageTokens } from './ImageEditor.svelte';
+import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens } from './InlineEditActionsEditor.svelte';
+import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
+import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
+import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
+import SectionDividerEditor, { allTokens as sectionDividerTokens } from './SectionDividerEditor.svelte';
+import SegmentedControlEditor, { allTokens as segmentedControlTokens } from './SegmentedControlEditor.svelte';
+import TableEditor, { allTokens as tableTokens } from './TableEditor.svelte';
+import TabBarEditor, { allTokens as tabBarTokens } from './TabBarEditor.svelte';
+import TooltipEditor, { allTokens as tooltipTokens } from './TooltipEditor.svelte';
+
+export type ComponentId =
+  | 'segmentedcontrol'
+  | 'button'
+  | 'notification'
+  | 'dialog'
+  | 'radiobutton'
+  | 'card'
+  | 'badge'
+  | 'callout'
+  | 'cornerbadge'
+  | 'image'
+  | 'inlineeditactions'
+  | 'sectiondivider'
+  | 'collapsiblesection'
+  | 'table'
+  | 'tabbar'
+  | 'tooltip'
+  | 'progressbar';
+
+export interface RegistryEntry {
+  /** Canonical id — lowercase, matches the runtime component filename + server scan + `setComponentAlias` key. */
+  id: ComponentId;
+  /** Human-readable label for nav and section headers. */
+  label: string;
+  /** FontAwesome icon class for the nav rail. */
+  icon: string;
+  /** Path to the runtime component, relative to repo root. */
+  sourceFile: string;
+  /** The Svelte editor component to mount in the page. */
+  editorComponent: ComponentType<SvelteComponent>;
+  /** Flat token list — the editor's declarative description of its token surface. */
+  schema: Token[];
+}
+
+/**
+ * Single source of truth for every component editor. Each entry binds the
+ * canonical id to its label, icon, source file, editor component, and token
+ * schema. Display order in the nav rail is sorted alphabetically by label
+ * (see `componentRegistryEntries` below) — order in this object literal does
+ * not affect the UI.
+ *
+ * Adding a component:
+ *   1. Author `src/components/<Name>.svelte` (declares CSS vars in `:global(:root)`)
+ *   2. Author `src/component-editor/<Name>Editor.svelte` (exports `allTokens` from a `<script context="module">` block)
+ *   3. Add an entry below.
+ */
+export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = Object.freeze({
+  segmentedcontrol: {
+    id: 'segmentedcontrol',
+    label: 'Segmented Control',
+    icon: 'fas fa-hand-pointer',
+    sourceFile: 'src/components/SegmentedControl.svelte',
+    editorComponent: SegmentedControlEditor,
+    schema: segmentedControlTokens,
+  },
+  button: {
+    id: 'button',
+    label: 'Button',
+    icon: 'fas fa-square',
+    sourceFile: 'src/components/Button.svelte',
+    editorComponent: StandardButtonsEditor,
+    schema: buttonTokens,
+  },
+  notification: {
+    id: 'notification',
+    label: 'Notification',
+    icon: 'fas fa-bell',
+    sourceFile: 'src/components/Notification.svelte',
+    editorComponent: NotificationEditor,
+    schema: notificationTokens,
+  },
+  dialog: {
+    id: 'dialog',
+    label: 'Dialog',
+    icon: 'fas fa-window-restore',
+    sourceFile: 'src/components/Dialog.svelte',
+    editorComponent: DialogEditor,
+    schema: dialogTokens,
+  },
+  radiobutton: {
+    id: 'radiobutton',
+    label: 'Radio Button',
+    icon: 'fas fa-dot-circle',
+    sourceFile: 'src/components/RadioButton.svelte',
+    editorComponent: RadioButtonEditor,
+    schema: radioButtonTokens,
+  },
+  card: {
+    id: 'card',
+    label: 'Card',
+    icon: 'fas fa-id-card',
+    sourceFile: 'src/components/Card.svelte',
+    editorComponent: CardEditor,
+    schema: cardTokens,
+  },
+  badge: {
+    id: 'badge',
+    label: 'Badge',
+    icon: 'fas fa-tag',
+    sourceFile: 'src/components/Badge.svelte',
+    editorComponent: BadgeEditor,
+    schema: badgeTokens,
+  },
+  callout: {
+    id: 'callout',
+    label: 'Callout',
+    icon: 'fas fa-quote-left',
+    sourceFile: 'src/components/Callout.svelte',
+    editorComponent: CalloutEditor,
+    schema: calloutTokens,
+  },
+  cornerbadge: {
+    id: 'cornerbadge',
+    label: 'Corner Badge',
+    icon: 'fas fa-tags',
+    sourceFile: 'src/components/CornerBadge.svelte',
+    editorComponent: CornerBadgeEditor,
+    schema: cornerBadgeTokens,
+  },
+  image: {
+    id: 'image',
+    label: 'Image',
+    icon: 'fas fa-image',
+    sourceFile: 'src/components/Image.svelte',
+    editorComponent: ImageEditor,
+    schema: imageTokens,
+  },
+  inlineeditactions: {
+    id: 'inlineeditactions',
+    label: 'Inline Edit Actions',
+    icon: 'fas fa-pen',
+    sourceFile: 'src/components/InlineEditActions.svelte',
+    editorComponent: InlineEditActionsEditor,
+    schema: inlineEditActionsTokens,
+  },
+  sectiondivider: {
+    id: 'sectiondivider',
+    label: 'Section Divider',
+    icon: 'fas fa-minus',
+    sourceFile: 'src/components/SectionDivider.svelte',
+    editorComponent: SectionDividerEditor,
+    schema: sectionDividerTokens,
+  },
+  collapsiblesection: {
+    id: 'collapsiblesection',
+    label: 'Collapsible Section',
+    icon: 'fas fa-chevron-down',
+    sourceFile: 'src/components/CollapsibleSection.svelte',
+    editorComponent: CollapsibleSectionEditor,
+    schema: collapsibleSectionTokens,
+  },
+  table: {
+    id: 'table',
+    label: 'Table',
+    icon: 'fas fa-table',
+    sourceFile: 'src/components/Table.svelte',
+    editorComponent: TableEditor,
+    schema: tableTokens,
+  },
+  tabbar: {
+    id: 'tabbar',
+    label: 'Tab Bar',
+    icon: 'fas fa-columns',
+    sourceFile: 'src/components/TabBar.svelte',
+    editorComponent: TabBarEditor,
+    schema: tabBarTokens,
+  },
+  tooltip: {
+    id: 'tooltip',
+    label: 'Tooltip',
+    icon: 'fas fa-comment-dots',
+    sourceFile: 'src/components/Tooltip.svelte',
+    editorComponent: TooltipEditor,
+    schema: tooltipTokens,
+  },
+  progressbar: {
+    id: 'progressbar',
+    label: 'Progress Bar',
+    icon: 'fas fa-tasks',
+    sourceFile: 'src/components/ProgressBar.svelte',
+    editorComponent: ProgressBarEditor,
+    schema: progressBarTokens,
+  },
+});
+
+/** Display-ordered list of registry entries — sorted alphabetically by label. Iteration order matches the nav rail. */
+export const componentRegistryEntries: ReadonlyArray<RegistryEntry> = Object.freeze(
+  Object.values(componentRegistry).sort((a, b) => a.label.localeCompare(b.label)),
+);
+
+/** All canonical component ids, in display order. */
+export const componentIds: ReadonlyArray<ComponentId> = Object.freeze(
+  componentRegistryEntries.map((e) => e.id),
+);
+
+// Eager schema registration. Replaces the side-effect-on-import pattern that
+// each editor module previously used (top-of-script `registerComponentSchema(...)`).
+// Runs once at module load, before any editor instance mounts.
+for (const entry of componentRegistryEntries) {
+  registerComponentSchema(entry.id, entry.schema);
+}
+
+/**
+ * Validate that the server's filesystem scan matches the registry's id list.
+ * Logs a warning when ids drift. Called at boot from the editor page.
+ */
+export function validateRegistryAgainstServerScan(serverIds: ReadonlyArray<string>): void {
+  const registrySet = new Set<string>(componentIds);
+  const serverSet = new Set<string>(serverIds);
+  const missingOnServer = componentIds.filter((id) => !serverSet.has(id));
+  const extraOnServer = serverIds.filter((id) => !registrySet.has(id));
+  if (missingOnServer.length > 0) {
+    console.warn(
+      '[componentRegistry] registered components missing from server scan:',
+      missingOnServer.join(', '),
+    );
+  }
+  if (extraOnServer.length > 0) {
+    console.warn(
+      '[componentRegistry] components on disk not in registry (will be ignored by editor):',
+      extraOnServer.join(', '),
+    );
+  }
+}

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

@@ -0,0 +1,185 @@
+<script lang="ts">
+  /**
+   * Compact rotary control for an angle (0–360°). Drag the dial to rotate;
+   * type into the input for an exact value. The internal angle uses the CSS
+   * 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;
+
+  const dispatch = createEventDispatcher<{ change: { value: number } }>();
+
+  let dialEl: HTMLDivElement;
+  let dragging = false;
+
+  function normalize(deg: number): number {
+    const r = Math.round(deg) % 360;
+    return r < 0 ? r + 360 : r;
+  }
+
+  function emit(next: number) {
+    const n = normalize(next);
+    if (n === value) return;
+    value = n;
+    dispatch('change', { value: n });
+  }
+
+  function angleFromEvent(e: PointerEvent): number {
+    const rect = dialEl.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const dx = e.clientX - cx;
+    const dy = e.clientY - cy;
+    // atan2 yields 0 at +x axis, increasing counterclockwise. Convert to the
+    // CSS gradient convention (0 at +y up, clockwise positive).
+    return (Math.atan2(dx, -dy) * 180) / Math.PI;
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    dragging = true;
+    dialEl.setPointerCapture(e.pointerId);
+    emit(angleFromEvent(e));
+  }
+  function onPointerMove(e: PointerEvent) {
+    if (!dragging) return;
+    emit(angleFromEvent(e));
+  }
+  function onPointerUp(e: PointerEvent) {
+    if (!dragging) return;
+    dragging = false;
+    dialEl.releasePointerCapture(e.pointerId);
+  }
+
+  function onInputChange(e: Event) {
+    const v = parseFloat((e.target as HTMLInputElement).value);
+    if (Number.isFinite(v)) emit(v);
+  }
+
+  $: indicatorTransform = `rotate(${value}deg)`;
+</script>
+
+<div class="angle-dial-row">
+  {#if label}
+    <span class="dial-label">{label}:</span>
+  {/if}
+  <div
+    bind:this={dialEl}
+    class="dial"
+    class:dragging
+    style="width: {size}px; height: {size}px;"
+    on:pointerdown={onPointerDown}
+    on:pointermove={onPointerMove}
+    on:pointerup={onPointerUp}
+    on:pointercancel={onPointerUp}
+    role="slider"
+    aria-valuemin="0"
+    aria-valuemax="360"
+    aria-valuenow={value}
+    aria-label={label}
+    tabindex="0"
+    on:keydown={(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); }
+    }}
+  >
+    <div class="indicator" style="transform: {indicatorTransform}"></div>
+    <div class="hub"></div>
+  </div>
+  <input
+    class="num"
+    type="number"
+    min="0"
+    max="360"
+    step="1"
+    value={value}
+    on:change={onInputChange}
+  />
+  <span class="suffix">°</span>
+</div>
+
+<style>
+  .angle-dial-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+
+  .dial-label {
+    user-select: none;
+  }
+
+  .dial {
+    position: relative;
+    border-radius: 50%;
+    background: var(--ui-surface-lowest);
+    border: 1px solid var(--ui-border-default);
+    cursor: grab;
+    flex: none;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+  }
+
+  .dial:focus-visible {
+    outline: 2px solid var(--ui-border-focus, var(--color-brand-500));
+    outline-offset: 2px;
+  }
+
+  .dial.dragging {
+    cursor: grabbing;
+  }
+
+  /* Indicator: a 1px-wide line from center to edge. Origin is the bottom
+     center so rotating by N degrees points the line N degrees clockwise from
+     12 o'clock, matching CSS `linear-gradient(Ndeg, ...)`. */
+  .indicator {
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    width: 2px;
+    height: 50%;
+    margin-left: -1px;
+    background: var(--ui-text-primary);
+    border-radius: 1px;
+    transform-origin: 50% 100%;
+    pointer-events: none;
+  }
+
+  .hub {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 4px;
+    height: 4px;
+    margin-left: -2px;
+    margin-top: -2px;
+    border-radius: 50%;
+    background: var(--ui-text-primary);
+    pointer-events: none;
+  }
+
+  .num {
+    width: 3.25rem;
+    padding: var(--ui-space-2) var(--ui-space-6);
+    background: var(--ui-surface-lowest);
+    border: 1px solid var(--ui-border-faint);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-sm);
+    text-align: right;
+  }
+
+  .num::-webkit-outer-spin-button,
+  .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+
+  .suffix {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+    user-select: none;
+  }
+</style>

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

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import DemoHeader from './DemoHeader.svelte';
+  import NonStylableConfig from './NonStylableConfig.svelte';
+  import LinkedBlock from './LinkedBlock.svelte';
+  import { createEditorContext } from './editorContext';
+  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
+      is responsible for calling `registerComponentSchema` synchronously. */
+  export let 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
+      with 2+ entries, a single variant tab strip is rendered that drives which
+      VariantGroup is focused. */
+  export let variants: { value: string; label: string }[] = [];
+
+  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);
+</script>
+
+<div class="demo-block">
+  <DemoHeader {component} {title} {description} {resetVariables} />
+  {#if $$slots.config}
+    <NonStylableConfig>
+      <slot name="config" />
+    </NonStylableConfig>
+  {/if}
+  {#if showVariantTabs}
+    <div class="variant-tabs" role="tablist">
+      {#each variants as opt}
+        <button
+          type="button"
+          class="variant-tab-btn"
+          class:active={opt.value === $focusedVariant}
+          role="tab"
+          aria-selected={opt.value === $focusedVariant}
+          on:click={() => focusedVariant.set(opt.value)}
+        >{opt.label}</button>
+      {/each}
+    </div>
+  {/if}
+  <slot focusedVariant={$focusedVariant} />
+  {#if linked}
+    <LinkedBlock {component} {linked} on:change />
+  {/if}
+</div>
+
+<style>
+  .variant-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);
+    align-self: flex-start;
+  }
+
+  .variant-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-md);
+    font-weight: var(--ui-font-weight-semibold);
+    text-transform: capitalize;
+    cursor: pointer;
+    transition: color var(--ui-transition-fast), background var(--ui-transition-fast);
+  }
+
+  .variant-tab-btn:hover:not(.active) {
+    color: var(--ui-text-primary);
+    background: var(--ui-hover);
+  }
+
+  .variant-tab-btn.active {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+    box-shadow: 0 0 0 1px var(--ui-border-default);
+  }
+</style>