@motion-proto/live-tokens 0.94.2 → 0.95.0

package/src/demo/SketchSelect.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
   import LabeledSelect from './LabeledSelect.svelte';
+  import ChromeSelect from './ChromeSelect.svelte';
   import { setSketch, sketchPick, sketchStyles, unsavedSketchStyle } from '../editor/core/sketch';
 
-  let { inline = false, size = 'default', onpick }: { inline?: boolean; size?: 'default' | 'small'; onpick?: (id: string | null) => void } = $props();
+  let {
+    inline = false,
+    size = 'default',
+    chrome = false,
+    onpick,
+  }: {
+    inline?: boolean;
+    size?: 'default' | 'small';
+    /** Paint in the editor's --ui-* chrome; needs an .editor-page ancestor. */
+    chrome?: boolean;
+    onpick?: (id: string | null) => void;
+  } = $props();
 
   // The empty string is the placeholder's value, so off needs a name of its own.
   const OFF = 'none';
@@ -45,14 +57,26 @@
   }
 </script>
 
-<LabeledSelect
-  {inline}
-  {size}
-  label="Sketch"
-  {items}
-  value={selected}
-  placeholder="Custom"
-  disabled={busy}
-  {error}
-  onchange={changeSketch}
-/>
+{#if chrome}
+  <ChromeSelect
+    label="Sketch"
+    {items}
+    value={selected}
+    placeholder="Custom"
+    disabled={busy}
+    {error}
+    onchange={changeSketch}
+  />
+{:else}
+  <LabeledSelect
+    {inline}
+    {size}
+    label="Sketch"
+    {items}
+    value={selected}
+    placeholder="Custom"
+    disabled={busy}
+    {error}
+    onchange={changeSketch}
+  />
+{/if}

package/src/demo/SourceLinks.svelte

@@ -48,9 +48,10 @@
 <style>
   .source-links {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-48);
-    flex: none;
+    column-gap: var(--space-48);
+    row-gap: var(--space-16);
   }
 
   .brand-link {
@@ -148,9 +149,9 @@
     font-size: var(--font-size-xl);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .source-links:not(.compact) {
-      gap: var(--space-24);
+      column-gap: var(--space-24);
     }
   }
 </style>

package/src/demo/TestingLoops.svelte

@@ -30,6 +30,13 @@
     if (id) document.getElementById(id)?.scrollIntoView({ block: 'start' });
   });
 
+  function armName(arm: { skills: boolean; lookup: boolean }) {
+    if (arm.skills && arm.lookup) return 'Skills and lookup';
+    if (arm.skills) return 'Skills only';
+    if (arm.lookup) return 'Lookup only';
+    return 'Neither';
+  }
+
   function jump(event: MouseEvent, id: string) {
     event.preventDefault();
     contentsOpen = false;
@@ -68,7 +75,7 @@
       <h2 id="skills-title">LiveTokens skills</h2>
       <div class="text-columns skills-overview">
         <div>
-          <p>The CLI checks verify that skill output uses the design system and works correctly in the browser. They cover token use, component behavior, and page layout. Skills make design decisions and the CLI verifies the code.</p>
+          <p>The CLI checks verify that skill output uses the design system and works correctly in the browser. They cover token use, component behavior, and page layout. Skills make design decisions and the checker verifies the code.</p>
           <p>The package includes eight skills, and one setup command copies them into your project.</p>
         </div>
         <ul class="skill-stack">
@@ -356,29 +363,27 @@
   <section class="chapter" id="measured-value" aria-labelledby="measured-value-title">
     <div class="chapter-body">
       <h2 id="measured-value-title">Measured value</h2>
-      <p>An eval asked an agent to choose a component for {result.requirements} requirements. It ran in four arms of {result.runsPerArm} runs each: with and without the skills, and with and without the CLI. The arms chose the same components, with one miss among 144 answers, and differ in turns, time, and cost.</p>
+      <p>An eval asked an agent to choose a component for {result.requirements} requirements. It ran in four arms of {result.runsPerArm} runs each: with and without the skills, and with and without the lookup, the <code>live-tokens components</code> command that lists each component with its entry and props. The arms chose the same components, with one miss among 144 answers, and differ in turns, time, and cost.</p>
       <div class="eval-results">
         <Table>
           <table aria-label="Eval arms">
             <thead>
               <tr>
-                <th scope="col">Skills</th>
-                <th scope="col">CLI</th>
-                <th scope="col">Requirements right</th>
+                <th scope="col">Arm</th>
+                <th scope="col">Accuracy</th>
                 <th scope="col">Turns</th>
                 <th scope="col">Seconds</th>
                 <th scope="col">Cost</th>
               </tr>
             </thead>
             <tbody>
-              {#each result.arms as arm (`${arm.skills}-${arm.cli}`)}
+              {#each result.arms as arm (`${arm.skills}-${arm.lookup}`)}
                 <tr>
-                  <td>{arm.skills ? 'Yes' : 'No'}</td>
-                  <td>{arm.cli ? 'Yes' : 'No'}</td>
-                  <td>{arm.rowsRight}</td>
-                  <td>{arm.turns}</td>
-                  <td>{arm.seconds}</td>
-                  <td>{arm.cost}</td>
+                  <td>{armName(arm)}</td>
+                  <td data-label="Accuracy">{arm.rowsRight}</td>
+                  <td data-label="Turns">{arm.turns}</td>
+                  <td data-label="Seconds">{arm.seconds}</td>
+                  <td data-label="Cost">{arm.cost}</td>
                 </tr>
               {/each}
             </tbody>
@@ -386,10 +391,10 @@
         </Table>
       </div>
       <ul class="eval-summary">
-        <li><strong>Turns:</strong> the skill saves turns only through the CLI command. Without the CLI, the skill arm takes as many turns as the agent with neither.</li>
-        <li><strong>Time and cost:</strong> the skills and the CLI each save time on their own, and together the run costs less than half as much as with neither.</li>
+        <li><strong>Turns:</strong> the skill saves turns only through the lookup. Without the lookup, the skill arm takes as many turns as the agent with neither.</li>
+        <li><strong>Time and cost:</strong> the skills and the lookup each save time on their own, and together the run costs less than half as much as with neither.</li>
         <li><strong>Accuracy:</strong> every arm scores about the same. The choices come from the entries in the component files.</li>
-        <li><strong>Change since 2026-09-20:</strong> in that run, no agent without the skills found the CLI; this time 2 of 3 did, so that arm varies from run to run.</li>
+        <li><strong>Change since 2026-09-20:</strong> in that run, no agent without the skills found the lookup; this time 2 of 3 did, so that arm varies from run to run.</li>
       </ul>
       <div class="text-columns">
         <div>
@@ -456,9 +461,11 @@
     display: grid;
     grid-template-columns: repeat(var(--columns-count), minmax(var(--space-0), 1fr));
     column-gap: var(--columns-gutter);
+    box-sizing: content-box;
     max-width: var(--columns-max-width);
     margin-inline: auto;
-    padding: var(--space-48) var(--space-32) var(--space-64);
+    padding-block: var(--space-48) var(--space-64);
+    padding-inline: var(--columns-margin);
     color: var(--text-primary);
   }
 
@@ -664,6 +671,16 @@
     width: auto;
   }
 
+  /* The panel's stage padding sized for a figure makes a one-line toggle a tall slab. */
+  .contents {
+    --panel-stage-padding: var(--space-4);
+    --panel-stage-inline-padding: var(--space-8);
+  }
+
+  .contents :global(.panel) {
+    justify-content: flex-start;
+  }
+
   .contents-body {
     width: 100%;
     min-width: var(--space-0);
@@ -775,6 +792,24 @@
     overflow-x: auto;
   }
 
+  /* A phone frame scrolls the diagram, and the default overlay bar is too thin
+     to signal it. The standard scrollbar-width has no length value, and setting
+     it would disable these pseudo-elements in Chromium. */
+  .figure-scroll::-webkit-scrollbar {
+    height: var(--space-32);
+  }
+
+  .figure-scroll::-webkit-scrollbar-track {
+    background: var(--surface-neutral-low);
+    border-radius: var(--radius-full);
+  }
+
+  .figure-scroll::-webkit-scrollbar-thumb {
+    background: var(--surface-neutral-higher);
+    border: var(--border-width-1) solid var(--border-neutral);
+    border-radius: var(--radius-full);
+  }
+
   /* Inside the figure's subgrid, so 1 / 7 lines up with the text column. */
   figcaption {
     grid-column: 1 / 7;
@@ -950,10 +985,16 @@
       display: block;
     }
 
+    /* The top leaves room for the fixed editor toolbar above the back link. */
     .loops {
-      grid-template-columns: minmax(var(--space-0), 1fr);
-      /* Leave room for the fixed editor toolbar above the back link. */
-      padding: var(--space-64) var(--space-20) var(--space-48);
+      padding-block: var(--space-64) var(--space-48);
+    }
+
+    /* Both outrank the 1023px block's `.chapter-body > *`, so without this
+       they keep the 2 / -2 inset the rest of the chapter drops. */
+    .chapter-body > h1,
+    .chapter-body > .eval-results {
+      grid-column: 1 / -1;
     }
 
     h1 {
@@ -972,5 +1013,73 @@
       padding-block: var(--space-32);
     }
 
+    /* A phone leaves too little width for side-by-side columns, so each row stacks into a card. */
+    :is(.rule-group, .eval-results) :global(.table-wrapper :is(table, tbody, tr, td)) {
+      display: block;
+      min-width: var(--space-0);
+    }
+
+    :is(.rule-group, .eval-results) :global(.table-wrapper thead) {
+      display: none;
+    }
+
+    /* The row's first cell takes the table's header style and captions the card. */
+    :is(.rule-group, .eval-results) :global(.table-wrapper td:first-child) {
+      border-right: none;
+      border-bottom: var(--table-default-header-hairline-width) solid var(--table-default-header-hairline-color);
+      background: var(--table-default-header-surface);
+      color: var(--table-default-header-text);
+      font-family: var(--table-default-header-font-family);
+      font-size: var(--table-default-header-font-size);
+      font-weight: var(--table-default-header-font-weight);
+      line-height: var(--table-default-header-line-height);
+      /* Half again as tall as a body row, so each card's caption marks a break between rules. */
+      padding-top: calc(var(--table-default-cell-padding-top, var(--table-default-cell-padding)) * 1.5 + 0.25lh);
+      padding-bottom: calc(var(--table-default-cell-padding-bottom, var(--table-default-cell-padding)) * 1.5 + 0.25lh);
+    }
+
+    .rule-group :global(.table-wrapper td:last-child) {
+      padding-bottom: calc(var(--table-default-cell-padding-bottom, var(--table-default-cell-padding)) + 0.5lh);
+    }
+
+    .eval-results :global(.table-wrapper tr:not(:last-child) td:last-child) {
+      border-bottom: var(--table-default-header-hairline-width) solid var(--table-default-header-hairline-color);
+    }
+
+    /* Each rule stands as its own box: the wrapper hands its chrome to every row.
+       Visible overflow keeps the wrapper's scroll box from clipping each row's shadow. */
+    .rule-group :global(.table-wrapper) {
+      overflow: visible;
+      background: none;
+      border: none;
+      border-radius: var(--radius-none);
+      box-shadow: none;
+    }
+
+    .rule-group :global(.table-wrapper tbody) {
+      display: grid;
+      gap: var(--space-12);
+    }
+
+    .rule-group :global(.table-wrapper tr) {
+      overflow: hidden;
+      background: var(--table-default-surface);
+      border: var(--table-default-border-width) solid var(--table-default-border);
+      border-radius: var(--table-default-radius);
+      box-shadow: var(--table-default-shadow);
+    }
+
+    /* The hidden header row named these columns, so each value carries its own label. */
+    .eval-results :global(.table-wrapper td[data-label]) {
+      display: grid;
+      grid-template-columns: minmax(var(--space-0), 2fr) minmax(var(--space-0), 3fr);
+      column-gap: var(--space-12);
+      border-right: none;
+    }
+
+    .eval-results :global(.table-wrapper td[data-label]::before) {
+      content: attr(data-label);
+      font-weight: var(--table-default-header-font-weight);
+    }
   }
 </style>

package/src/demo/ThemeSelect.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import LabeledSelect from './LabeledSelect.svelte';
+  import ChromeSelect from './ChromeSelect.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 {
+    inline = false,
+    size = 'default',
+    chrome = false,
+    onpick,
+  }: {
+    inline?: boolean;
+    size?: 'default' | 'small';
+    /** Paint in the editor's --ui-* chrome; needs an .editor-page ancestor. */
+    chrome?: boolean;
+    onpick?: (fileName: string) => void;
+  } = $props();
 
   let themes = $state<{ value: string; label: string }[]>([]);
   let busy = $state(false);
@@ -40,13 +52,24 @@
 
 <!-- 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}
-/>
+{#if chrome}
+  <ChromeSelect
+    label="Theme"
+    items={themes}
+    value={$openThemeSlug}
+    disabled={busy}
+    {error}
+    onchange={changeTheme}
+  />
+{:else}
+  <LabeledSelect
+    {inline}
+    {size}
+    label="Theme"
+    items={themes}
+    value={$openThemeSlug}
+    disabled={busy}
+    {error}
+    onchange={changeTheme}
+  />
+{/if}

package/src/demo/evalResults.ts

@@ -1,7 +1,7 @@
-/** One arm of an eval: the same case run with or without the skills, and with or without the CLI. */
+/** One arm of an eval: the same case run with or without the skills, and with or without the lookup command. */
 export interface EvalArm {
   skills: boolean;
-  cli: boolean;
+  lookup: boolean;
   rowsRight: string;
   turns: string;
   seconds: string;
@@ -28,7 +28,7 @@ export const pickComponentEval: EvalResult = {
   arms: [
     {
       skills: true,
-      cli: true,
+      lookup: true,
       rowsRight: '12 of 12 in all 3 runs',
       turns: '9 to 10',
       seconds: '46 to 76',
@@ -36,15 +36,15 @@ export const pickComponentEval: EvalResult = {
     },
     {
       skills: false,
-      cli: true,
-      rowsRight: '12 of 12 in all 3 runs; 2 of 3 found the CLI on their own',
+      lookup: true,
+      rowsRight: '12 of 12 in all 3 runs; 2 of 3 found the lookup on their own',
       turns: '15 to 17',
       seconds: '65 to 102',
       cost: '$0.63 to $0.74',
     },
     {
       skills: true,
-      cli: false,
+      lookup: false,
       rowsRight: '12 of 12 in all 3 runs',
       turns: '14 to 20',
       seconds: '66 to 84',
@@ -52,7 +52,7 @@ export const pickComponentEval: EvalResult = {
     },
     {
       skills: false,
-      cli: false,
+      lookup: false,
       rowsRight: '11 of 12 in one run, which missed requirement 12',
       turns: '17 to 20',
       seconds: '113 to 169',

package/src/demo/sections/SectionClaude.svelte

@@ -66,28 +66,26 @@
   .claude {
     grid-column: 1 / -1;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
     row-gap: var(--space-8);
     align-items: start;
-    margin-bottom: var(--space-96);
   }
 
   .claude :global(.section-divider) {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
   }
 
-  /* Panel sits on page columns 2, 3, 4; the copy starts on column 5, hard
+  /* Panel sits on page columns 2 to 5; the copy starts on column 6, hard
      against the panel's right edge. */
   .panel-col {
-    grid-column: 2 / 5;
+    grid-column: 2 / 6;
     grid-row: 2;
     align-self: start;
     margin-top: var(--space-16);
   }
 
   .copy {
-    grid-column: 5 / 11;
+    grid-column: 6 / -2;
     grid-row: 2;
     align-self: start;
     display: flex;
@@ -98,7 +96,7 @@
 
   .intro {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-tighter);
     font-weight: var(--font-weight-semibold);
     color: var(--text-primary);
@@ -114,7 +112,7 @@
   .install-caption {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     line-height: var(--line-height-normal);
     color: var(--text-secondary);
   }
@@ -171,17 +169,16 @@
 
   .skill-name {
     font-family: var(--font-sans);
-    font-size: var(--font-size-2xl);
+    font-size: var(--heading-md-font-size);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-normal);
     color: var(--text-primary);
   }
 
-  @media (max-width: 960px) {
-    .claude :global(.section-divider),
+  @media (max-width: 1200px) {
     .panel-col,
     .copy {
-      grid-column: 1 / -1;
+      grid-column: var(--kit-content);
     }
 
     .panel-col,
@@ -189,4 +186,14 @@
       grid-row: auto;
     }
   }
+
+  @media (max-width: 600px) {
+    .atlas {
+      align-items: stretch;
+    }
+
+    .atlas-actions {
+      flex-direction: column;
+    }
+  }
 </style>

package/src/demo/sections/SectionFooter.svelte

@@ -16,7 +16,7 @@
 
 <style>
   .provenance {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     padding-top: var(--space-24);
     border-top: var(--border-width-2) solid var(--border-neutral);
     display: flex;
@@ -34,7 +34,7 @@
   .license {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-lg);
+    font-size: var(--body-lg-font-size);
     color: var(--text-secondary);
   }
 
@@ -52,13 +52,12 @@
   .copyright {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     color: var(--text-secondary);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .provenance {
-      grid-column: 1 / -1;
       flex-direction: column;
       align-items: flex-start;
       gap: var(--space-24);

package/src/demo/sections/SectionGetStarted.svelte

@@ -34,12 +34,11 @@ npm run dev`;
   .get-started {
     grid-column: 1 / -1;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
   }
 
   .gs-panel {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     /* 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;
@@ -68,7 +67,7 @@ npm run dev`;
 
   .intro {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-tighter);
     font-weight: var(--font-weight-semibold);
     color: var(--text-primary);
@@ -91,9 +90,9 @@ npm run dev`;
     overflow-y: hidden;
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .columns {
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
       align-items: stretch;
     }
   }