@motion-proto/live-tokens 0.80.0 → 0.82.0

package/src/demo/TestingLoops.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+
+declare const TestingLoops: Component<{ homeHref?: string }>;
+export default TestingLoops;

package/src/demo/ThemeSelect.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import LabeledSelect from './LabeledSelect.svelte';
+  import { listThemes, applyTheme } from '../editor/core/themes/themeService';
+  import { openThemeSlug } from '../editor/core/store/editorConfigStore';
+  import { carrySketch } from './sketchCarry';
+
+  let { inline = false, size = 'default', onpick }: { inline?: boolean; size?: 'default' | 'small'; onpick?: (fileName: string) => void } = $props();
+
+  let themes = $state<{ value: string; label: string }[]>([]);
+  let busy = $state(false);
+  let error = $state('');
+
+  onMount(async () => {
+    const files = await listThemes();
+    themes = files
+      .map(({ fileName, name }) => ({ value: fileName, label: name || fileName }))
+      .sort((a, b) =>
+        a.value === 'default' ? -1
+          : b.value === 'default' ? 1
+          : a.label.localeCompare(b.label),
+      );
+  });
+
+  async function changeTheme(fileName: string) {
+    if (!fileName || busy) return;
+    busy = true;
+    error = '';
+    try {
+      carrySketch();
+      await applyTheme(fileName);
+      onpick?.(fileName);
+    } catch (reason) {
+      error = reason instanceof Error ? reason.message : 'Could not change theme';
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<!-- The open theme drives the selection, so applies from the Themes panel or
+     another tab show up here too. -->
+<LabeledSelect
+  {inline}
+  {size}
+  label="Theme"
+  items={themes}
+  value={$openThemeSlug}
+  disabled={busy}
+  {error}
+  onchange={changeTheme}
+/>

package/src/demo/sections/SectionClaude.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import Button from '../../system/components/Button.svelte';
+  import CodeSnippet from '../../system/components/CodeSnippet.svelte';
+  import SectionDivider from '../../system/components/SectionDivider.svelte';
+  import Panel from '../../system/components/Panel.svelte';
+  import { navigate } from '../../editor/core/routing/router';
+
+  const skills = [
+    { icon: 'fas fa-list-check', name: 'pick-component' },
+    { icon: 'fas fa-table-columns', name: 'create-page' },
+    { icon: 'fas fa-cube', name: 'create-component' },
+    { icon: 'fas fa-wand-magic-sparkles', name: 'create-theme' },
+    { icon: 'fas fa-palette', name: 'set-colors' },
+    { icon: 'fas fa-font', name: 'set-type' },
+    { icon: 'fas fa-ruler-combined', name: 'set-geometry' },
+    { icon: 'fas fa-clipboard-list', name: 'check-compliance' }
+  ];
+</script>
+
+<section class="claude">
+  <SectionDivider
+    title="With Claude skills (of course)"
+    eyebrow="Pairs with Claude Code"
+  />
+
+  <div class="panel-col">
+    <Panel>
+      <ul class="skills">
+        {#each skills as skill}
+          <li class="skill">
+            <i class="{skill.icon} skill-icon"></i>
+            <span class="skill-name">{skill.name}</span>
+          </li>
+        {/each}
+      </ul>
+    </Panel>
+  </div>
+
+  <div class="copy">
+    <p class="intro">
+      LiveTokens includes eight skills to build new components, themes, and pages, and to check what you have and bring it back into line.
+    </p>
+
+    <div class="install">
+      <CodeSnippet code="npx @motion-proto/live-tokens setup-claude" />
+      <p class="install-caption">Run this once to copy them into your project.</p>
+    </div>
+
+    <div class="atlas">
+      <div class="atlas-actions">
+        <Button variant="primary" onclick={() => navigate('/skills')} icon="fas fa-diagram-project" iconPosition="left">
+          How do skills work?
+        </Button>
+        <Button variant="secondary" onclick={() => navigate('/testing-loops')} icon="fas fa-rotate" iconPosition="left">
+          Testing Loops
+        </Button>
+      </div>
+      <p class="install-caption">
+        Each skill as a decision tree, next to the lines of SKILL.md that decide it.
+      </p>
+    </div>
+  </div>
+</section>
+
+<style>
+  .claude {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(var(--columns-count), 1fr);
+    column-gap: var(--columns-gutter);
+    row-gap: var(--space-8);
+    align-items: start;
+    margin-bottom: var(--space-96);
+  }
+
+  .claude :global(.section-divider) {
+    grid-column: 2 / -2;
+  }
+
+  /* Panel sits on page columns 2, 3, 4; the copy starts on column 5, hard
+     against the panel's right edge. */
+  .panel-col {
+    grid-column: 2 / 5;
+    grid-row: 2;
+    align-self: start;
+    margin-top: var(--space-16);
+  }
+
+  .copy {
+    grid-column: 5 / 11;
+    grid-row: 2;
+    align-self: start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-24);
+    margin-top: var(--space-16);
+  }
+
+  .intro {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-tighter);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .install {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+  }
+
+  .install-caption {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-normal);
+    color: var(--text-secondary);
+  }
+
+  /* No global border-box reset here, so the snippet's own padding+border would
+     overflow its column under content-box. Pin it to border-box to fit exactly. */
+  .install :global(.codesnippet) {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* `.code` sets overflow-x: auto with overflow-y: visible, which the spec
+     promotes to overflow-y: auto — a 1px line-height rounding then trips a
+     spurious vertical scrollbar. Clamp the vertical axis; horizontal scroll
+     for long lines still works. */
+  .install :global(.codesnippet .code) {
+    overflow-y: hidden;
+  }
+
+  .atlas {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-8);
+  }
+
+  .atlas-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-12);
+  }
+
+  .skills {
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-24);
+  }
+
+  .skill {
+    display: flex;
+    align-items: center;
+    gap: var(--space-8);
+  }
+
+  /* Icon + name match the old card header sizing so the skills read identically. */
+  .skill-icon {
+    font-size: var(--icon-size-2xl);
+    color: var(--text-secondary);
+  }
+
+  .skill-name {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-normal);
+    color: var(--text-primary);
+  }
+
+  @media (max-width: 960px) {
+    .claude :global(.section-divider),
+    .panel-col,
+    .copy {
+      grid-column: 1 / -1;
+    }
+
+    .panel-col,
+    .copy {
+      grid-row: auto;
+    }
+  }
+</style>

package/src/demo/sections/SectionFooter.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import SourceLinks from '../SourceLinks.svelte';
+</script>
+
+<footer class="provenance">
+  <div class="colophon">
+    <p class="license">
+      Open source under the
+      <a href="https://github.com/motionproto/live-tokens/blob/main/LICENSE" target="_blank" rel="noopener">MIT License</a>.
+    </p>
+    <p class="copyright">© 2026 Mark Pearce</p>
+  </div>
+
+  <SourceLinks />
+</footer>
+
+<style>
+  .provenance {
+    grid-column: 2 / -2;
+    padding-top: var(--space-24);
+    border-top: var(--border-width-2) solid var(--border-neutral);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-32);
+  }
+
+  .colophon {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .license {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    color: var(--text-secondary);
+  }
+
+  .license a {
+    color: var(--text-brand);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    transition: color var(--duration-150, 150ms) ease;
+  }
+
+  .license a:hover {
+    color: var(--text-primary);
+  }
+
+  .copyright {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--text-secondary);
+  }
+
+  @media (max-width: 960px) {
+    .provenance {
+      grid-column: 1 / -1;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-24);
+    }
+  }
+</style>

package/src/demo/sections/SectionGetStarted.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import CodeSnippet from '../../system/components/CodeSnippet.svelte';
+  import SectionDivider from '../../system/components/SectionDivider.svelte';
+  import Panel from '../../system/components/Panel.svelte';
+
+  const scaffold = `npx @motion-proto/live-tokens create my-app
+cd my-app
+npm install
+npm run dev`;
+</script>
+
+<section class="get-started">
+  <div class="gs-panel">
+    <Panel>
+      <div class="gs-content">
+        <SectionDivider variant="sm" title="Getting Started" />
+
+        <div class="columns">
+          <p class="intro">
+            Creating a new project gives you a starter page with the live&nbsp;editor already wired in. Run the commands,
+            start the dev server, and edit the design system as you build.
+          </p>
+
+          <div class="install">
+            <CodeSnippet code={scaffold} />
+          </div>
+        </div>
+      </div>
+    </Panel>
+  </div>
+</section>
+
+<style>
+  .get-started {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(var(--columns-count), 1fr);
+    column-gap: var(--columns-gutter);
+  }
+
+  .gs-panel {
+    grid-column: 2 / -2;
+    /* The .kit grid can stretch this section's row past its content (min-height:
+       100vh on a short page); keep the panel sized to its content regardless. */
+    align-self: start;
+  }
+
+  /* Single full-width child of the Panel's centering stage; the stage lays its
+     children out in a row, so the section's content must collapse to one item. */
+  .gs-content {
+    width: 100%;
+  }
+
+  /* SectionDivider ships with margin: var(--space-24) 0; as the first child its
+     top margin stacks on the stage padding — zero it out here. */
+  .gs-content :global(.section-divider) {
+    margin-top: 0;
+  }
+
+  /* Code column gets the larger share so the longest scaffold line fits
+     without triggering the snippet's scrollbar. */
+  .columns {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+    gap: var(--space-40);
+    align-items: center;
+  }
+
+  .intro {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-tighter);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  /* No global border-box reset here, so width:100% under content-box would let
+     the snippet's own padding+border overflow its column and eat the panel's
+     right padding. Pin it to border-box so it fills the column exactly. */
+  .install :global(.codesnippet) {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* `.code` sets overflow-x: auto with overflow-y: visible, which the spec
+     promotes to overflow-y: auto — a 1px line-height rounding then trips a
+     spurious vertical scrollbar. Clamp the vertical axis; horizontal scroll
+     for long lines still works. */
+  .install :global(.codesnippet .code) {
+    overflow-y: hidden;
+  }
+
+  @media (max-width: 960px) {
+    .columns {
+      grid-template-columns: 1fr;
+      align-items: stretch;
+    }
+  }
+</style>

package/src/demo/sections/SectionHero.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from '../../system/components/Button.svelte';
+  import FloatingTokenTags from '../FloatingTokenTags.svelte';
+  import { setEditorView } from '../../editor/core/store/editorViewStore';
+  import { overlayOpen } from '../../editor/overlay/overlayState';
+  import SourceLinks from '../SourceLinks.svelte';
+
+  const isDev = import.meta.env.DEV;
+
+  function openOverlay(view: 'tokens' | 'components') {
+    setEditorView(view);
+    if (!get(overlayOpen)) {
+      window.dispatchEvent(new CustomEvent('lt-overlay-toggle'));
+    }
+  }
+</script>
+
+<header class="hero">
+  <div class="hero-kite">
+    <FloatingTokenTags />
+  </div>
+
+  <div class="hero-text">
+    <h1 class="hero-title">
+      LiveTokens<br />
+      <span class="hero-italic">The design system with an editor.</span>
+    </h1>
+
+    <p class="hero-tagline">
+      Design system authoring for Svelte.<br />
+      Edit tokens and components directly in the browser.<br />Ship plain CSS.
+    </p>
+  </div>
+
+  <div class="hero-actions">
+    {#if isDev}
+      <div class="hero-controls">
+        <Button variant="secondary" onclick={() => openOverlay('components')} icon="fas fa-puzzle-piece" iconPosition="left">
+          Browse Components
+        </Button>
+        <Button onclick={() => openOverlay('tokens')} icon="fas fa-sliders" iconPosition="left">
+          Open Token Editor
+        </Button>
+      </div>
+    {:else}
+      <div class="hero-controls">
+        <Button variant="outline" disabled>Editor &nbsp;·&nbsp; dev only</Button>
+      </div>
+    {/if}
+
+    <div class="hero-meta">
+      <SourceLinks compact />
+      <p class="hero-byline">
+        by <a href="mailto:hello@motionproto.com">Mark</a> at
+        <a href="https://motionproto.com/" target="_blank" rel="noopener">MotionProto</a>
+      </p>
+    </div>
+  </div>
+</header>
+
+<style>
+  .hero {
+    grid-column: 1 / -1;
+    position: relative;
+    padding: var(--space-48) 0 var(--space-16);
+    display: grid;
+    grid-template-columns: repeat(var(--columns-count), 1fr);
+    column-gap: var(--columns-gutter);
+  }
+
+  .hero-text {
+    grid-column: 2 / span 5;
+    grid-row: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+    position: relative;
+    padding: var(--space-96) 0 0;
+  }
+
+  .hero-kite {
+    grid-column: 5 / span 8;
+    grid-row: 1;
+    height: 32rem;
+    margin-top: var(--space-16);
+    position: relative;
+  }
+
+  .hero-title {
+    font-family: var(--font-display);
+    font-size: var(--font-size-7xl);
+    font-weight: var(--font-weight-semibold);
+    font-variation-settings: 'opsz' 144, 'SOFT' 30;
+    color: var(--text-primary);
+    line-height: .9;
+    margin: 0;
+  }
+
+  .hero-italic {
+    font-family: var(--heading-xl-font-family);
+    font-size: var(--font-size-6xl);
+    font-weight: var(--font-weight-normal);
+    color: var(--text-brand);
+    font-variation-settings: 'opsz' 144, 'SOFT' 100;
+    white-space: nowrap;
+  }
+
+  .hero-tagline {
+    font-family: var(--body-md-font-family);
+    font-size: var(--font-size-2xl);
+    color: var(--text-primary);
+    line-height: 1.2;
+    max-width: 48rem;
+    margin: var(--space-8) 0 0;
+  }
+
+  /* One row: the CTAs on the left rail, the credits on the right, sharing a
+     top edge so the buttons sit on the brand-mark line. */
+  .hero-actions {
+    grid-column: 2 / -2;
+    grid-row: 2;
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    align-items: start;
+    column-gap: var(--space-32);
+    margin-top: var(--space-16);
+  }
+
+  /* Two cells of one width. Equal `1fr` tracks floored at `max-content` take
+     the wider button's size in an indefinitely-sized parent, so the pair stays
+     even as a theme swap changes the label metrics. */
+  .hero-controls {
+    grid-column: 1;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(max-content, 1fr));
+    column-gap: var(--space-12);
+  }
+
+  .hero-meta {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--space-16);
+    text-align: right;
+  }
+
+  .hero-byline {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--line-height-normal);
+    color: var(--text-secondary);
+    margin: 0;
+  }
+
+  .hero-byline a {
+    color: var(--text-brand);
+    text-decoration: none;
+  }
+
+  .hero-byline a:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 960px) {
+    .hero-kite {
+      grid-column: 1 / -1;
+      grid-row: 1;
+      height: 28rem;
+    }
+    .hero-text {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      padding: 0;
+    }
+    .hero-actions {
+      grid-column: 1 / -1;
+      grid-row: 3;
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: var(--space-16);
+      margin-top: var(--space-12);
+    }
+    .hero-meta {
+      grid-column: 1;
+      align-items: flex-start;
+      text-align: left;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .hero-title {
+      font-size: var(--font-size-5xl);
+    }
+    .hero-controls {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: var(--space-12);
+    }
+  }
+</style>