@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/pages/EditorShell.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { get } from 'svelte/store';
+  import VariablesTab from '../ui/VariablesTab.svelte';
+  import ThemeFileManager from '../ui/ThemeFileManager.svelte';
+  import EditorViewSwitcher from '../ui/EditorViewSwitcher.svelte';
+  import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
+  import PresetFileManager from '../ui/PresetFileManager.svelte';
+  import { persistTheme, hydrateTheme } from '../lib/themeService';
+  import { scrollSectionIntoView } from '../lib/scrollSection';
+  import { editorState } from '../lib/editorStore';
+  import { editorView, sidebarCondensed, selectedComponent } from '../lib/editorViewStore';
+  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { listComponents } from '../lib/componentConfigService';
+
+  const tokenNavItems = [
+    { id: 'palette-editor', label: 'Palette Editor', icon: 'fas fa-palette' },
+    { id: 'spacing', label: 'Spacing & Borders', icon: 'fas fa-ruler-combined' },
+    { id: 'columns', label: 'Columns', icon: 'fas fa-columns' },
+    { id: 'border-radius', label: 'Border Radius', icon: 'fas fa-border-style' },
+    { id: 'typography', label: 'Typography', icon: 'fas fa-font' },
+    { id: 'icon-sizes', label: 'Icon Sizes', icon: 'fas fa-expand' },
+    { id: 'shadows', label: 'Shadows', icon: 'fas fa-cloud' },
+    { id: 'overlays', label: 'Overlays', icon: 'fas fa-layer-group' },
+    { id: 'gradients', label: 'Gradients', icon: 'fas fa-droplet' },
+    { id: 'utility-tokens', label: 'Utility Tokens', icon: 'fas fa-sliders' }
+  ];
+
+  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+
+  let selectedTokenSection: string | null = null;
+  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
+
+  let shellEl: HTMLElement | null = null;
+  let shellWidth = 1024;
+  const CONDENSE_BELOW = 520;
+
+  $: condensed = $sidebarCondensed === 'auto' ? shellWidth < CONDENSE_BELOW : $sidebarCondensed;
+
+  const HINT_DELAY_MS = 80;
+  let hintLabel: string | null = null;
+  let hintTop = 0;
+  let hintTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function showHint(label: string, target: HTMLElement) {
+    if (!condensed) return;
+    if (hintTimer) clearTimeout(hintTimer);
+    const top = target.getBoundingClientRect().top + target.offsetHeight / 2;
+    hintTimer = setTimeout(() => {
+      hintLabel = label;
+      hintTop = top;
+    }, HINT_DELAY_MS);
+  }
+
+  function hideHint() {
+    if (hintTimer) {
+      clearTimeout(hintTimer);
+      hintTimer = null;
+    }
+    hintLabel = null;
+  }
+
+  $: if (!condensed) hideHint();
+
+  function scrollToSection(sectionId: string) {
+    selectedTokenSection = sectionId;
+    const el = document.getElementById(sectionId);
+    if (el) scrollSectionIntoView(el);
+  }
+
+  function selectComponent(id: string) {
+    selectedComponent.set(id);
+    hideHint();
+  }
+
+  function toggleCondensed() {
+    sidebarCondensed.update((v) => {
+      const isCondensedNow = v === 'auto' ? shellWidth < CONDENSE_BELOW : v;
+      return !isCondensedNow;
+    });
+  }
+
+  async function handleSave(e: CustomEvent<{ fileName: string; displayName: string }>) {
+    const { fileName, displayName } = e.detail;
+    saveStatus = 'saving';
+    try {
+      await persistTheme(get(editorState), fileName, displayName);
+      saveStatus = 'saved';
+      setTimeout(() => { saveStatus = 'idle'; }, 2000);
+    } catch {
+      saveStatus = 'error';
+      setTimeout(() => { saveStatus = 'idle'; }, 3000);
+    }
+  }
+
+  async function handleLoad(e: CustomEvent<{ fileName: string }>) {
+    try {
+      await hydrateTheme(e.detail.fileName);
+    } catch {
+      // silent
+    }
+  }
+
+  let ro: ResizeObserver | null = null;
+  onMount(async () => {
+    if (shellEl && typeof ResizeObserver !== 'undefined') {
+      ro = new ResizeObserver((entries) => {
+        const w = entries[0]?.contentRect.width;
+        if (typeof w === 'number') shellWidth = w;
+      });
+      ro.observe(shellEl);
+      shellWidth = shellEl.clientWidth;
+    }
+    try {
+      const summaries = await listComponents();
+      validateRegistryAgainstServerScan(summaries.map((s) => s.name));
+    } catch {
+      // server unreachable — skip validation
+    }
+  });
+
+  onDestroy(() => {
+    ro?.disconnect();
+  });
+</script>
+
+<div class="layout" class:condensed bind:this={shellEl}>
+  <nav class="sidebar" class:condensed>
+    <div class="rail-toggle-row">
+      <button
+        type="button"
+        class="rail-toggle"
+        aria-label={condensed ? 'Expand sidebar' : 'Collapse sidebar'}
+        aria-expanded={!condensed}
+        on:click={toggleCondensed}
+      >
+        <i class="fas {condensed ? 'fa-arrow-right' : 'fa-arrow-left'}"></i>
+      </button>
+    </div>
+
+    <EditorViewSwitcher {condensed} />
+
+    {#if $editorView === 'tokens'}
+      <div class="nav-items">
+        {#each tokenNavItems as item}
+          <button
+            class="nav-item"
+            class:active={selectedTokenSection === item.id}
+            on:mouseenter={(e) => showHint(item.label, e.currentTarget)}
+            on:mouseleave={hideHint}
+            on:click={() => scrollToSection(item.id)}
+          >
+            <i class={item.icon}></i>
+            <span class="nav-label">{item.label}</span>
+          </button>
+        {/each}
+      </div>
+      {#if !condensed}
+        <div class="sidebar-footer">
+          <ThemeFileManager {saveStatus} on:save={handleSave} on:load={handleLoad} />
+        </div>
+      {/if}
+    {:else}
+      <div class="nav-items">
+        {#each componentNavItems as item}
+          <button
+            class="nav-item"
+            class:active={$selectedComponent === item.id}
+            on:mouseenter={(e) => showHint(item.label, e.currentTarget)}
+            on:mouseleave={hideHint}
+            on:click={() => selectComponent(item.id)}
+          >
+            <i class={item.icon}></i>
+            <span class="nav-label">{item.label}</span>
+          </button>
+        {/each}
+      </div>
+      {#if !condensed}
+        <div class="sidebar-footer">
+          <PresetFileManager />
+        </div>
+      {/if}
+    {/if}
+  </nav>
+
+  <main class="content">
+    {#if $editorView === 'tokens'}
+      <VariablesTab />
+    {:else}
+      <ComponentsTab selectedComponent={$selectedComponent} />
+    {/if}
+  </main>
+
+  {#if hintLabel !== null && condensed}
+    <div class="rail-hint" style="top: {hintTop}px">{hintLabel}</div>
+  {/if}
+</div>
+
+<style>
+  .layout {
+    --sidebar-w: 240px;
+    display: grid;
+    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
+    min-height: 100vh;
+    width: 100%;
+    max-width: 1920px;
+    box-sizing: border-box;
+    transition: grid-template-columns 220ms ease;
+  }
+
+  .layout.condensed {
+    --sidebar-w: 48px;
+  }
+
+  .sidebar {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: black;
+    border-right: 1px solid var(--ui-border-faint);
+    display: flex;
+    z-index: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .rail-toggle-row {
+    display: flex;
+    justify-content: flex-end;
+    border-bottom: 1px solid var(--ui-border-faint);
+  }
+
+  .rail-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 36px;
+    background: none;
+    border: none;
+    color: var(--ui-text-primary);
+    cursor: pointer;
+    transition: background var(--ui-transition-fast);
+  }
+
+  .rail-toggle:hover {
+    background: var(--ui-hover);
+  }
+
+  .nav-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-4) 0 var(--ui-space-16);
+    flex-shrink: 0;
+  }
+
+  .nav-item {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    width: 100%;
+    height: 36px;
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-md);
+    cursor: pointer;
+    text-align: left;
+    overflow: hidden;
+    transition: color 60ms ease, background 60ms ease;
+  }
+
+  .nav-item i {
+    justify-self: center;
+    width: 1.25rem;
+    text-align: center;
+    font-size: var(--ui-font-size-md);
+    opacity: 0.85;
+  }
+
+  .nav-label {
+    white-space: nowrap;
+    overflow: hidden;
+    opacity: 1;
+    transition: opacity 180ms ease;
+  }
+
+  .layout.condensed .nav-label {
+    opacity: 0;
+  }
+
+  .nav-item:hover {
+    color: var(--ui-text-secondary);
+    background: var(--ui-hover);
+  }
+
+  .nav-item.active {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+  }
+
+  .content {
+    padding: var(--ui-space-24) var(--ui-space-32);
+    overflow-y: auto;
+    background: black;
+    min-width: 0;
+    isolation: isolate;
+  }
+
+  @media (max-width: 1280px) {
+    .content {
+      padding: var(--ui-space-20) var(--ui-space-20);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .content {
+      padding: var(--ui-space-16) var(--ui-space-12);
+    }
+  }
+
+  .sidebar-footer {
+    flex-shrink: 0;
+    margin-top: auto;
+    padding: var(--ui-space-12) var(--ui-space-8) var(--ui-space-16);
+    border-top: 1px solid var(--ui-border-faint);
+  }
+
+  .rail-hint {
+    position: fixed;
+    left: calc(var(--sidebar-w) + var(--ui-space-6));
+    transform: translateY(-50%);
+    z-index: 50;
+    padding: var(--ui-space-4) var(--ui-space-8);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+    white-space: nowrap;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    pointer-events: none;
+  }
+</style>

package/src/styles/_padding.scss

@@ -0,0 +1,34 @@
+// Themed padding helper.
+//
+// Components that expose a single `--<X>-padding` token but want to support
+// the editor's split-into-sides mode must read four per-side overrides
+// (`--<X>-padding-top|right|bottom|left`) and fall back to the parent token
+// when no override is set. Spelling out that four-line var(...) pattern at
+// every call site is noisy and easy to forget — this mixin emits it once.
+//
+// Optional `$h` / `$v` multipliers preserve the historical "horizontal is
+// N× vertical" formula some components encode in their unsplit form
+// (buttons use 2, notifications use 1.33). Pass `$v: 0` for components like
+// TabBar's bar that hardcode zero vertical padding when unsplit.
+//
+// Usage:
+//   @include themed-padding(--button-primary-padding, $h: 2);
+//   @include themed-padding(--segmentedcontrol-bar-padding);
+//   @include themed-padding(--tabbar-bar-padding, $v: 0);
+
+@function _padding-side($base, $factor) {
+  @if $factor == 1 {
+    @return var(#{$base});
+  }
+  @return calc(var(#{$base}) * #{$factor});
+}
+
+@mixin themed-padding($base, $h: 1, $v: 1) {
+  $h-val: _padding-side($base, $h);
+  $v-val: _padding-side($base, $v);
+  padding:
+    var(#{$base}-top, #{$v-val})
+    var(#{$base}-right, #{$h-val})
+    var(#{$base}-bottom, #{$v-val})
+    var(#{$base}-left, #{$h-val});
+}

package/src/styles/fonts.css

@@ -1,18 +1,30 @@
-/* MP Design System - Font Declarations */
-/* This file is copied directly to dist without processing to avoid font inlining */
-/* Both fonts.css and fonts/ are in dist/, so use relative paths */
+/* Generated from the production theme by syncFontsToCss. Do not edit. */
+/* Both fonts.css and fonts/ are in dist/, so relative paths work at runtime. */
 
-/* Astounder Squared BB, Astounder Squared LC BB, Gravita Hum Variable, Fira Code */
+/* Adobe Typekit — fira-code */
 @import url('https://use.typekit.net/jes8oow.css');
 
-/* Faculty Glyphic, Montserrat */
-@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+/* Local — Fraunces */
+@font-face {
+  font-family: "Fraunces";
+  src: url('/src/styles/fonts/Fraunces/Fraunces-roman-latin.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Fraunces";
+  src: url('/src/styles/fonts/Fraunces/Fraunces-italic-latin.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
 
-/* Domine - Variable Font */
+/* Local — Manrope */
 @font-face {
-  font-family: "Domine";
-  src: url('./fonts/Domine/Domine-VariableFont_wght.ttf') format('truetype-variations');
-  font-weight: 400 700;
+  font-family: "Manrope";
+  src: url('/src/styles/fonts/Manrope/Manrope-latin.woff2') format('woff2');
+  font-weight: 200 800;
   font-style: normal;
   font-display: swap;
 }

package/src/styles/form-controls.css

@@ -16,9 +16,9 @@
 
 .form-label {
   margin-bottom: 0;
-  font-size: var(--font-md);
+  font-size: var(--font-size-md);
   color: var(--text-primary);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-light);
 }
 
 /* Horizontal Layout - Label Beside Input/Select */
@@ -63,16 +63,16 @@
   padding: 0 var(--space-16);
   min-height: 2.375rem;  /* ~38px to match button height */
   background: var(--surface-neutral-lowest) !important;
-  border: 1px solid var(--border-neutral-default) !important;
+  border: 1px solid var(--border-neutral) !important;
   border-radius: var(--radius-md);
   color: var(--text-primary) !important;
   font-family: var(--font-sans);
-  font-size: var(--font-md);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-light);
   line-height: var(--line-height-relaxed);
   vertical-align: middle;
   cursor: pointer;
-  transition: all var(--transition-fast);
+  transition: all var(--duration-150);
   /* Prevent clipping */
   overflow: visible !important;
   box-sizing: border-box !important;
@@ -99,7 +99,7 @@
 }
 
 .form-select:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: 2px solid var(--color-brand-500);
   outline-offset: 2px;
 }
 
@@ -111,7 +111,6 @@
   background-color: var(--surface-neutral-lowest) !important;
   border-color: var(--border-neutral-faint) !important;
   color: var(--text-disabled) !important;
-  opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -123,7 +122,7 @@
   color: var(--text-primary) !important;
   padding: var(--space-8) var(--space-12);
   min-height: 2rem;
-  font-size: var(--font-md);
+  font-size: var(--font-size-md);
   font-family: var(--font-sans);
   line-height: var(--line-height-relaxed);
 }
@@ -131,19 +130,18 @@
 /* Disabled options */
 .form-select option:disabled {
   color: var(--text-disabled) !important;
-  opacity: var(--opacity-disabled);
 }
 
 /* Input Field Styling */
 .form-input {
   padding: var(--space-8);
   background: var(--surface-neutral-lowest);
-  border: 1px solid var(--border-neutral-default);
+  border: 1px solid var(--border-neutral);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-sans);
-  font-size: var(--font-md);
-  transition: border-color var(--transition-fast);
+  font-size: var(--font-size-md);
+  transition: border-color var(--duration-150);
 }
 
 .form-input:hover:not(:disabled) {
@@ -158,14 +156,15 @@
 }
 
 .form-input:disabled {
-  opacity: var(--opacity-disabled);
+  background: var(--surface-neutral-lowest);
+  border-color: var(--border-neutral-faint);
+  color: var(--text-disabled);
   cursor: not-allowed;
 }
 
 /* Placeholder text styling */
 .form-input::placeholder {
   color: var(--text-muted);
-  opacity: var(--opacity-muted);
 }
 
 /* Number input spinner buttons */
@@ -186,5 +185,4 @@
 .form-checkbox:disabled,
 .form-radio:disabled {
   cursor: not-allowed;
-  opacity: var(--opacity-disabled);
 }