@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/showcase/VisualsTab.svelte

@@ -1,231 +0,0 @@
-<script lang="ts">
-  import { tick } from 'svelte';
-  import VariablesTab from './VariablesTab.svelte';
-  import TokenFileManager from './TokenFileManager.svelte';
-  import type { TokenFile } from '../lib/tokenTypes';
-  import {
-    saveTokenFile,
-    loadTokenFile,
-    setActiveFile,
-    scrapeCssVariables,
-    clearAllCssVarOverrides,
-    applyCssVariables,
-  } from '../lib/tokenService';
-  import { editorConfigs, activeFileName, configsLoadedFromFile } from '../lib/editorConfigStore';
-  import { get } from 'svelte/store';
-
-  const tokenNavItems = [
-    { id: 'palette-editor', label: 'Palette Editor' },
-    { id: 'spacing', label: 'Spacing' },
-    { id: 'columns', label: 'Columns' },
-    { id: 'border-radius', label: 'Border Radius' },
-    { id: 'typography', label: 'Typography' },
-    { id: 'shadows', label: 'Shadows' },
-    { id: 'overlays', label: 'Overlays' },
-    { id: 'gradients', label: 'Gradients' },
-    { id: 'utility-tokens', label: 'Utility Tokens' }
-  ];
-
-  let selectedTokenSection: string | null = null;
-
-  function scrollToSection(sectionId: string) {
-    selectedTokenSection = sectionId;
-    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
-  }
-
-  let saveSignal = 0;
-  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
-
-  async function handleSave(e: CustomEvent<{ fileName: string; displayName: string }>) {
-    const { fileName, displayName } = e.detail;
-    if (!get(configsLoadedFromFile)) {
-      saveStatus = 'error';
-      console.warn('Save blocked: editor configs were not loaded from a token file.');
-      setTimeout(() => { saveStatus = 'idle'; }, 3000);
-      return;
-    }
-    saveStatus = 'saving';
-    try {
-      // Flush pending Svelte reactive updates so inline CSS vars are current
-      await tick();
-      const cssVariables = scrapeCssVariables();
-      const configs = get(editorConfigs);
-      const now = new Date().toISOString();
-      const tokenFile: TokenFile = {
-        name: displayName,
-        createdAt: now,
-        updatedAt: now,
-        editorConfigs: configs,
-        cssVariables,
-      };
-      await saveTokenFile(fileName, tokenFile);
-      await setActiveFile(fileName);
-      $activeFileName = fileName;
-      // Also trigger localStorage save in all PaletteEditors
-      saveSignal++;
-      saveStatus = 'saved';
-      setTimeout(() => { saveStatus = 'idle'; }, 2000);
-    } catch {
-      saveStatus = 'error';
-      setTimeout(() => { saveStatus = 'idle'; }, 3000);
-    }
-  }
-
-  let variablesTab: VariablesTab;
-
-  async function handleLoad(e: CustomEvent<{ fileName: string }>) {
-    const { fileName } = e.detail;
-    try {
-      const tokenFile = await loadTokenFile(fileName);
-      // Clear current inline CSS vars so stale values don't linger
-      clearAllCssVarOverrides();
-      // Immediately apply the file's pre-computed CSS variables so the site
-      // updates in one shot (shadows, overlays, and all palette vars).
-      if (tokenFile.cssVariables && Object.keys(tokenFile.cssVariables).length > 0) {
-        applyCssVariables(tokenFile.cssVariables);
-      }
-      // Directly push configs to each PaletteEditor via method call
-      if (tokenFile.editorConfigs && Object.keys(tokenFile.editorConfigs).length > 0) {
-        variablesTab.loadAllConfigs(tokenFile.editorConfigs);
-        configsLoadedFromFile.set(true);
-      }
-    } catch {
-      // silent — the UI still shows current state
-    }
-  }
-</script>
-
-<div class="layout">
-  <nav class="sidebar">
-    <div class="sidebar-header">Variables &amp; Tokens</div>
-
-    <div class="nav-items">
-      {#each tokenNavItems as item}
-        <button
-          class="nav-item"
-          class:active={selectedTokenSection === item.id}
-          on:click={() => scrollToSection(item.id)}
-        >
-          <span>{item.label}</span>
-        </button>
-      {/each}
-    </div>
-
-    <div class="sidebar-footer">
-      <TokenFileManager {saveStatus} on:save={handleSave} on:load={handleLoad} />
-    </div>
-  </nav>
-
-  <main class="content">
-    <VariablesTab bind:this={variablesTab} {saveSignal} />
-  </main>
-</div>
-
-<style>
-  .layout {
-    display: grid;
-    grid-template-columns: 240px minmax(0, 1fr);
-    min-height: 100vh;
-    width: 100%;
-    max-width: 1920px;
-    box-sizing: border-box;
-  }
-
-  .sidebar {
-    position: sticky;
-    top: 0;
-    height: calc(100vh - 52px);
-    overflow: hidden;
-    background: black;
-    border-right: 1px solid var(--ui-border-faint);
-    display: flex;
-    z-index: 1;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .sidebar-header {
-    padding: var(--space-16) var(--space-16) var(--space-12);
-    font-size: var(--font-lg);
-    font-weight: var(--font-weight-bold);
-    color: var(--ui-text-primary);
-  }
-
-  .nav-items {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding: 0 var(--space-8);
-    flex-shrink: 0;
-  }
-
-  .nav-item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-8);
-    width: 100%;
-    padding: var(--space-6) var(--space-12) var(--space-6) var(--space-24);
-    background: none;
-    border: none;
-    border-radius: var(--radius-md);
-    color: var(--ui-text-tertiary);
-    font-size: var(--font-md);
-    cursor: pointer;
-    text-align: left;
-    transition: all var(--transition-fast);
-  }
-
-  .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(--space-24) var(--space-32);
-    overflow-y: auto;
-    background: black;
-    min-width: 0;
-    isolation: isolate;
-  }
-
-  /* Narrow desktop: side-by-side windows, ~1280px and below */
-  @media (max-width: 1280px) {
-    .layout {
-      grid-template-columns: 200px minmax(0, 1fr);
-    }
-    .content {
-      padding: var(--space-20) var(--space-20);
-    }
-    .nav-item {
-      padding: var(--space-6) var(--space-8) var(--space-6) var(--space-16);
-    }
-    .sidebar-header {
-      padding: var(--space-12) var(--space-12) var(--space-8);
-    }
-  }
-
-  /* Tight desktop: very narrow, ~1024px and below */
-  @media (max-width: 1024px) {
-    .layout {
-      grid-template-columns: 180px minmax(0, 1fr);
-    }
-    .content {
-      padding: var(--space-16) var(--space-12);
-    }
-    .nav-item span {
-      font-size: var(--font-sm);
-    }
-  }
-
-  .sidebar-footer {
-    flex-shrink: 0;
-    margin-top: auto;
-    padding: var(--space-12) var(--space-8) var(--space-16);
-    border-top: 1px solid var(--ui-border-faint);
-  }
-</style>

package/src/showcase/demos/BadgeDemo.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import Badge from '../../components/Badge.svelte';
-  import TokenMap from '../TokenMap.svelte';
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Badge Component</h2>
-  <p class="demo-description">
-    Pill-shaped badges with variant support. Import from <code>components/Badge.svelte</code>
-  </p>
-
-  <div class="demo-section">
-    <div class="trait-demo-row">
-      <Badge variant="trait">arcane</Badge>
-      <Badge variant="trait">divine</Badge>
-      <Badge variant="trait">primal</Badge>
-      <Badge variant="accent">scenes</Badge>
-      <Badge icon="fa-solid fa-dice-d20">System Agnostic</Badge>
-    </div>
-  </div>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">Tokens</h3>
-    <div class="token-sections">
-      <TokenMap title="info" tokens={[
-        { label: 'BG', variable: '--surface-neutral-higher' },
-        { label: 'Border', variable: '--border-neutral-default' },
-        { label: 'Text', variable: '--text-primary' },
-      ]} />
-      <TokenMap title="accent" tokens={[
-        { label: 'BG', variable: '--surface-neutral-higher' },
-        { label: 'Border', variable: '--border-accent' },
-        { label: 'Text', variable: '--color-accent-300' },
-      ]} />
-      <TokenMap title="trait" tokens={[
-        { label: 'BG', variable: '--surface-primary-high' },
-        { label: 'Border', variable: '--border-primary-strong' },
-        { label: 'Text', variable: '--text-primary' },
-      ]} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .trait-demo-row {
-    display: flex;
-    gap: var(--space-8);
-    flex-wrap: wrap;
-  }
-
-  .token-sections {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-16);
-  }
-</style>

package/src/showcase/demos/CardDemo.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-  import Card from '../../components/Card.svelte';
-  import TokenMap from '../TokenMap.svelte';
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Card Component</h2>
-  <p class="demo-description">
-    Generic card with icon, title, and slotted body. Import from <code>components/Card.svelte</code>
-  </p>
-
-  <div class="demo-section">
-    <div class="card-demo-grid">
-      <Card icon="fas fa-star" iconColor="var(--text-accent)" title="Featured">
-        <p style="margin: 0;">A highlighted card with amber accent.</p>
-      </Card>
-
-      <Card icon="fas fa-shield-alt" iconColor="var(--text-info)" title="Security">
-        <p style="margin: 0;">Card with blue icon color on hover border.</p>
-      </Card>
-
-      <Card icon="fas fa-leaf" iconColor="var(--text-success)" title="Compact" size="compact">
-        <p style="margin: 0;">A compact-sized card variant.</p>
-      </Card>
-
-      <Card title="No Icon">
-        <p style="margin: 0;">Cards work without icons too.</p>
-      </Card>
-    </div>
-  </div>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">Tokens</h3>
-    <TokenMap tokens={[
-      { label: 'Background', variable: '--surface-neutral-high' },
-      { label: 'Border', variable: '--border-neutral-default' },
-      { label: 'Hover Border', variable: '--border-neutral-strong' },
-      { label: 'Title', variable: '--text-primary' },
-      { label: 'Body', variable: '--text-secondary' },
-    ]} />
-  </div>
-</div>
-
-<style>
-  .card-demo-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: var(--space-16);
-  }
-</style>

package/src/showcase/demos/ChoiceButtonsDemo.svelte

@@ -1,192 +0,0 @@
-<script lang="ts">
-  let selectedChoice = 'option-2';
-  function handleChoiceClick(choice: string) {
-    selectedChoice = choice;
-  }
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Button-Based Choice Sets</h2>
-  <p class="demo-description">
-    Interactive example showing all 4 visual states. Click buttons to see selection state.
-  </p>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">Interactive Example</h3>
-    <div class="choice-buttons-container">
-      <button
-        class="choice-button"
-        class:selected={selectedChoice === 'option-1'}
-        on:click={() => handleChoiceClick('option-1')}
-      >
-        <i class="fas fa-star"></i>
-        <span>Default/Hover</span>
-      </button>
-
-      <button
-        class="choice-button"
-        class:selected={selectedChoice === 'option-2'}
-        on:click={() => handleChoiceClick('option-2')}
-      >
-        <i class="fas fa-check"></i>
-        <span>Selected</span>
-      </button>
-
-      <button
-        class="choice-button"
-        class:selected={selectedChoice === 'option-3'}
-        on:click={() => handleChoiceClick('option-3')}
-      >
-        <i class="fas fa-heart"></i>
-        <span>Clickable</span>
-      </button>
-
-      <button
-        class="choice-button"
-        disabled
-      >
-        <i class="fas fa-ban"></i>
-        <span>Disabled</span>
-      </button>
-    </div>
-  </div>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">State Reference</h3>
-    <div class="state-reference">
-      <div class="state-item">
-        <div class="state-label">Default</div>
-        <div class="state-details">
-          <code>background: --surface-neutral-high</code>
-          <code>border: 1px --border-neutral-default</code>
-        </div>
-      </div>
-
-      <div class="state-item">
-        <div class="state-label">Hover</div>
-        <div class="state-details">
-          <code>background: --surface-neutral-higher</code>
-          <code>border-color: --border-neutral-strong</code>
-        </div>
-      </div>
-
-      <div class="state-item">
-        <div class="state-label">Selected</div>
-        <div class="state-details">
-          <code>background: --surface-success-high</code>
-          <code>outline: 2px --border-success</code>
-        </div>
-      </div>
-
-      <div class="state-item">
-        <div class="state-label">Disabled</div>
-        <div class="state-details">
-          <code>opacity: 0.4</code>
-          <code>cursor: not-allowed</code>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .choice-buttons-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-10);
-  }
-
-  .choice-button {
-    display: flex;
-    align-items: center;
-    gap: var(--space-8);
-    padding: var(--space-10) var(--space-16);
-    background: var(--ui-surface-high);
-    border: 1px solid var(--ui-border-default);
-    border-radius: var(--radius-lg);
-    outline: 2px solid transparent;
-    outline-offset: -1px;
-    font-size: var(--font-md);
-    font-weight: 500;
-    color: var(--ui-text-primary);
-    cursor: pointer;
-    transition: all 0.2s;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .choice-button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, var(--ui-hover), transparent);
-    transition: left 0.5s ease;
-  }
-
-  .choice-button:hover::before {
-    left: 100%;
-  }
-
-  .choice-button i {
-    font-size: var(--font-lg);
-    color: var(--ui-text-secondary);
-    transition: color 0.2s;
-  }
-
-  .choice-button:hover:not(:disabled):not(.selected) {
-    background: var(--ui-surface-higher);
-    border-color: var(--ui-border-strong);
-    transform: translateY(-0.0625rem);
-    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
-  }
-
-  .choice-button.selected {
-    background: var(--ui-surface-highest);
-    outline-color: var(--ui-border-strong);
-  }
-
-  .choice-button:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .state-reference {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--space-12);
-  }
-
-  .state-item {
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--space-12);
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-8);
-  }
-
-  .state-label {
-    font-size: var(--font-sm);
-    font-weight: var(--font-weight-semibold);
-    color: var(--ui-text-primary);
-  }
-
-  .state-details {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .state-details code {
-    font-size: var(--font-xs);
-    color: var(--ui-text-tertiary);
-    background: var(--ui-surface-lowest);
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-sm);
-    font-family: var(--ui-font-mono);
-  }
-</style>

package/src/showcase/demos/CollapsibleSectionDemo.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import CollapsibleSection from '../../components/CollapsibleSection.svelte';
-  import TokenMap from '../TokenMap.svelte';
-
-  let demoExpanded = false;
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Collapsible Section Component</h2>
-  <p class="demo-description">
-    Expandable section with chevron toggle. Import from <code>components/CollapsibleSection.svelte</code>
-  </p>
-
-  <div class="demo-section">
-    <div class="collapsible-demo-wrapper">
-      <CollapsibleSection
-        label="Click to expand"
-        expanded={demoExpanded}
-        on:toggle={() => demoExpanded = !demoExpanded}
-      />
-      {#if demoExpanded}
-        <div class="collapsible-demo-content">
-          <p style="margin: 0; color: var(--text-secondary);">
-            This content is revealed when the section is expanded. Any content can go here.
-          </p>
-        </div>
-      {/if}
-    </div>
-  </div>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">Tokens</h3>
-    <TokenMap tokens={[
-      { label: 'Active BG', variable: '--surface-primary-lowest' },
-      { label: 'Active Border', variable: '--color-primary-400' },
-      { label: 'Label', variable: '--text-primary' },
-      { label: 'Toggle Icon', variable: '--text-muted' },
-    ]} />
-  </div>
-</div>
-
-<style>
-  .collapsible-demo-wrapper {
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-  }
-
-  .collapsible-demo-content {
-    padding: var(--space-12) var(--space-16);
-    background: var(--ui-surface-low);
-    border-top: 1px solid var(--ui-border-faint);
-  }
-</style>

package/src/showcase/demos/DialogDemo.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import Button from '../../components/Button.svelte';
-  import Dialog from '../../components/Dialog.svelte';
-  import TokenMap from '../TokenMap.svelte';
-
-  let showDialog = false;
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Dialog Component</h2>
-  <p class="demo-description">
-    Modal dialog with focus management and slide-in animation. Import from <code>components/Dialog.svelte</code>
-  </p>
-
-  <div class="demo-section">
-    <Button variant="secondary" icon="fas fa-external-link-alt" on:click={() => showDialog = true}>
-      Open Dialog
-    </Button>
-
-    <Dialog
-      bind:show={showDialog}
-      title="Sample Dialog"
-      confirmLabel="Save"
-      cancelLabel="Cancel"
-      on:confirm={() => showDialog = false}
-    >
-      <p style="color: var(--text-secondary); margin: 0;">This is the dialog body content. It supports any slotted content including forms, lists, or other components.</p>
-    </Dialog>
-  </div>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">Tokens</h3>
-    <TokenMap tokens={[
-      { label: 'Surface', variable: '--surface-neutral-lowest' },
-      { label: 'Border', variable: '--border-neutral-strong' },
-      { label: 'Header BG', variable: '--empty' },
-      { label: 'Header Border', variable: '--border-neutral-subtle' },
-      { label: 'Title', variable: '--text-primary' },
-      { label: 'Close Icon', variable: '--text-secondary' },
-    ]} />
-  </div>
-</div>

package/src/showcase/demos/InlineEditActionsDemo.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import InlineEditActions from '../../components/InlineEditActions.svelte';
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Inline Edit Actions</h2>
-  <p class="demo-description">
-    Confirm/cancel button pair for inline editing. Import from <code>components/InlineEditActions.svelte</code>
-  </p>
-
-  <div class="demo-section">
-    <div class="inline-edit-demo-row">
-      <span style="color: var(--text-secondary);">Editing value...</span>
-      <InlineEditActions onSave={() => {}} onCancel={() => {}} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .inline-edit-demo-row {
-    display: flex;
-    align-items: center;
-    gap: var(--space-12);
-  }
-</style>