@motion-proto/live-tokens 0.78.0 → 0.79.0

package/src/editor/skill-atlas/trees/create-component.ts

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const createComponent: SkillTree = {
   "id": "live-tokens-create-component",
-  "digest": "sha256:6f7b5810d03739a0",
+  "digest": "sha256:64a50a8081b1f789",
   "title": "create-component",
   "tagline": "Create a LiveTokens Component",
   "nodes": [
@@ -26,27 +26,27 @@ export const createComponent: SkillTree = {
       "chips": [
         {
           "label": "Config",
-          "lines": [41, 41],
+          "lines": [43, 43],
           "anchor": "Read the project's `package.json`, `live-tokens.config.json`"
         },
         {
           "label": "Catalogue",
-          "lines": [42, 42],
+          "lines": [44, 44],
           "anchor": "Run `npx live-tokens components`. The list holds every compo"
         },
         {
           "label": "Token scales",
-          "lines": [43, 43],
+          "lines": [45, 45],
           "anchor": "Run `npx live-tokens tokens --scale <name>` for each token s"
         },
         {
           "label": "Shipped pair",
-          "lines": [44, 44],
+          "lines": [46, 46],
           "anchor": "Read a shipped runtime and editor pair: `Toggle` for interac"
         },
         {
           "label": "Suffixes",
-          "lines": [45, 45],
+          "lines": [47, 47],
           "anchor": "Read `references/token-naming.md` for the suffixes that sele"
         }
       ]
@@ -62,31 +62,31 @@ export const createComponent: SkillTree = {
       "chips": [
         {
           "label": "Design model",
-          "lines": [20, 35],
+          "lines": [20, 37],
           "anchor": "## Design model",
-          "anchorEnd": "Props carry content and behavior: a value, a label, a callba"
+          "anchorEnd": "Prop names follow the shipped components. `label` names a co"
         },
         {
           "label": "Parts, variants, and states",
-          "lines": [49, 65],
+          "lines": [51, 67],
           "anchor": "## Variants and states",
           "anchorEnd": "A component supplies its variants. The page chooses the one "
         },
         {
           "label": "Property map",
-          "lines": [69, 82],
+          "lines": [71, 84],
           "anchor": "Before writing a file, identify the component's parts, text ",
           "anchorEnd": "Assign from the tokens the project has. Match the token scal"
         },
         {
           "label": "Name shape",
-          "lines": [84, 96],
+          "lines": [86, 98],
           "anchor": "A property name starts with the component id and ends with t",
           "anchorEnd": "For a state that affects several parts, follow Toggle: `--to"
         },
         {
           "label": "Shipped role names",
-          "lines": [98, 98],
+          "lines": [100, 100],
           "anchor": "Name a role as the shipped component that paints the same th"
         }
       ]
@@ -95,36 +95,36 @@ export const createComponent: SkillTree = {
       "id": "cc-runtime",
       "row": 3,
       "kind": "chipset",
-      "title": "Write the component runtime ",
-      "desc": "Start with the usage comment. Declare every property with its token, and read it in the CSS.",
+      "title": "Write the component runtime",
+      "desc": "Start with the catalogue export. Declare every property with its token, and read it in the CSS.",
       "lines": [14, 14],
-      "anchor": "Write the runtime file: the usage comment and the `:global(:",
+      "anchor": "Write the runtime file: the catalogue export and the `:globa",
       "chips": [
         {
-          "label": "Usage comment",
-          "lines": [104, 111],
-          "anchor": "Open the file with an HTML comment in the shape every shippe",
-          "anchorEnd": "-->"
+          "label": "Catalogue entry",
+          "lines": [106, 118],
+          "anchor": "Open the file with a `<script module lang=\"ts\">` block that ",
+          "anchorEnd": "```"
         },
         {
           "label": "Root block",
-          "lines": [114, 142],
+          "lines": [120, 148],
           "anchor": "Declare every editable property in a literal `:global(:root)",
           "anchorEnd": "The excerpt shows the chain for part of the property map. Ev"
         },
         {
           "label": "Intrinsics",
-          "lines": [142, 142],
+          "lines": [148, 148],
           "anchor": "The excerpt shows the chain for part of the property map. Ev"
         },
         {
           "label": "Sketch mode",
-          "lines": [215, 215],
+          "lines": [223, 223],
           "anchor": "Every component joins the sketch layer: read `references/ske"
         },
         {
           "label": "Fixed overlays",
-          "lines": [217, 217],
+          "lines": [225, 225],
           "anchor": "A fixed overlay portals to `<body>`: read `references/fixed-"
         }
       ]
@@ -140,22 +140,22 @@ export const createComponent: SkillTree = {
       "chips": [
         {
           "label": "Schema",
-          "lines": [148, 148],
+          "lines": [154, 154],
           "anchor": "A `<script module>` block exports `component`, the id, and `"
         },
         {
           "label": "Preview props",
-          "lines": [149, 149],
+          "lines": [155, 155],
           "anchor": "The instance script imports the runtime component and the ed"
         },
         {
           "label": "Markup",
-          "lines": [150, 150],
+          "lines": [156, 156],
           "anchor": "The markup mounts `ComponentEditorBase` with one `VariantGro"
         },
         {
           "label": "Linked siblings",
-          "lines": [186, 186],
+          "lines": [192, 192],
           "anchor": "When variants share a value, read `references/linked-sibling"
         }
       ]
@@ -171,23 +171,23 @@ export const createComponent: SkillTree = {
       "chips": [
         {
           "label": "Shared module",
-          "lines": [190, 204],
+          "lines": [196, 212],
           "anchor": "Register the component in `src/registerComponents.ts`, a reg",
           "anchorEnd": "});"
         },
         {
           "label": "Import and name it",
-          "lines": [207, 207],
+          "lines": [215, 215],
           "anchor": "Import the module from `src/main.ts`, before `bootLiveTokens"
         },
         {
           "label": "Contract",
-          "lines": [207, 207],
+          "lines": [215, 215],
           "anchor": "Import the module from `src/main.ts`, before `bootLiveTokens"
         },
         {
           "label": "First-party",
-          "lines": [211, 211],
+          "lines": [219, 219],
           "anchor": "Inside the live-tokens repository, a first-party component k"
         }
       ]
@@ -195,38 +195,33 @@ export const createComponent: SkillTree = {
     {
       "id": "cc-checks",
       "row": 6,
-      "kind": "chipset",
-      "title": "Run the checks",
-      "desc": "Get a report from check-compliance, then run check-component --tests until it passes with the contract's suites covered.",
-      "lines": [17, 17],
-      "anchor": "Run **live-tokens-check-compliance**, then `npx live-tokens ",
-      "chips": [
-        {
-          "label": "Compliance and tests",
-          "lines": [221, 221],
-          "anchor": "Run **live-tokens-check-compliance** and address its finding"
-        },
-        {
-          "label": "Svelte check and build",
-          "lines": [222, 222],
-          "anchor": "Run the project's Svelte check and its build."
-        },
-        {
-          "label": "Component tests",
-          "lines": [17, 17],
-          "anchor": "Run **live-tokens-check-compliance**, then `npx live-tokens "
-        },
-        {
-          "label": "Rule table",
-          "lines": [227, 237],
-          "anchor": "| `fix` | Section |",
-          "anchorEnd": "| `coverage` | Add the missing contract, or complete the run"
-        }
-      ]
+      "kind": "cli",
+      "title": "Run check-component",
+      "desc": "check-component <id> --tests --strict --json applies every auto repair, runs the contract suites, and returns the fixes beside the remaining findings and coverage by rule.",
+      "lines": [229, 229],
+      "anchor": "Run `npx live-tokens check-component <id> --tests --strict -"
     },
     {
-      "id": "cc-reply",
+      "id": "cc-repair",
       "row": 7,
+      "kind": "gate",
+      "title": "Repair from guidance",
+      "desc": "Each remaining finding carries its guidance. Make each repair, then run check-component again until coverage is complete.",
+      "lines": [230, 230],
+      "anchor": "Each remaining finding carries a rule id, a line, and its `g"
+    },
+    {
+      "id": "cc-build",
+      "row": 8,
+      "kind": "step",
+      "title": "Run the Svelte check and the build",
+      "desc": "Both run once check-component exits 0.",
+      "lines": [231, 231],
+      "anchor": "Run the project's Svelte check and its build."
+    },
+    {
+      "id": "cc-reply",
+      "row": 9,
       "kind": "step",
       "title": "Reply with the result",
       "desc": "The files, the id, the props, and each check's result.",
@@ -235,11 +230,11 @@ export const createComponent: SkillTree = {
     },
     {
       "id": "cc-page",
-      "row": 8,
+      "row": 10,
       "kind": "hand",
       "title": "live-tokens-create-page",
       "desc": "The component is done. Placing it on a page is the next skill.",
-      "lines": [241, 241],
+      "lines": [236, 236],
       "anchor": "Then place the component on a page with **live-tokens-create"
     }
   ],
@@ -270,6 +265,22 @@ export const createComponent: SkillTree = {
     },
     {
       "from": "cc-checks",
+      "to": "cc-repair",
+      "label": "findings"
+    },
+    {
+      "from": "cc-repair",
+      "to": "cc-checks",
+      "label": "rerun",
+      "back": true
+    },
+    {
+      "from": "cc-checks",
+      "to": "cc-build",
+      "label": "exit 0"
+    },
+    {
+      "from": "cc-build",
       "to": "cc-reply"
     },
     {

package/src/editor/skill-atlas/trees/create-page.ts

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const createPage: SkillTree = {
   "id": "live-tokens-create-page",
-  "digest": "sha256:7d816fe66d20567c",
+  "digest": "sha256:0d78d225ef7199e2",
   "title": "create-page",
   "tagline": "Create a Page Using Live Tokens",
   "nodes": [
@@ -210,43 +210,52 @@ export const createPage: SkillTree = {
     {
       "id": "cp-check",
       "row": 8,
-      "kind": "step",
-      "title": "Run both checkers",
-      "desc": "live-tokens-check-compliance reads the source. check-page --tests --strict proves the rendered page at its route. Both reports go to live-tokens-fix-findings until the page is clean.",
-      "lines": [20, 20],
-      "anchor": "Run **live-tokens-check-compliance** and `npx live-tokens ch"
+      "kind": "cli",
+      "title": "Run check-page",
+      "desc": "check-page --tests --strict --json applies every auto repair, proves the rendered page at its own route, and returns the fixes beside the remaining findings.",
+      "lines": [168, 168],
+      "anchor": "Run `npx live-tokens check-page <file> --tests --strict --js"
     },
     {
-      "id": "cp-verify",
+      "id": "cp-repair",
       "row": 9,
+      "kind": "gate",
+      "title": "Repair from guidance",
+      "desc": "Each remaining finding carries its guidance. Make each repair, then run check-page again.",
+      "lines": [170, 170],
+      "anchor": "Each remaining finding carries a rule id, a line, and its `g"
+    },
+    {
+      "id": "cp-verify",
+      "row": 10,
       "kind": "chipset",
       "title": "Check the page in the browser",
       "desc": "The checkers cannot see a layout. Open the page at its width and check each line.",
-      "lines": [170, 186],
+      "lines": [172, 188],
       "anchor": "The checkers cannot see a layout. Open the page at the width",
       "anchorEnd": "`references/interaction-sources.md` names the sources for th",
       "chips": [
         {
           "label": "Structure",
-          "lines": [172, 176],
+          "lines": [174, 178],
           "anchor": "The first section holds what the user came for.",
           "anchorEnd": "The containers in a section align at the bottom."
         },
         {
           "label": "Actions",
-          "lines": [177, 180],
+          "lines": [179, 182],
           "anchor": "The actions sit where the eye goes last, with the one primar",
           "anchorEnd": "An action that runs longer than a moment shows progress in a"
         },
         {
           "label": "Fields",
-          "lines": [181, 182],
+          "lines": [183, 184],
           "anchor": "Every field has a default, and Reset restores it.",
           "anchorEnd": "Secondary settings sit in a `CollapsibleSection`. Every cont"
         },
         {
           "label": "Words and access",
-          "lines": [183, 184],
+          "lines": [185, 186],
           "anchor": "Labels use the user's words, such as \"Export slices\".",
           "anchorEnd": "Every `img` has `alt` text. Focus order follows the reading "
         }
@@ -254,19 +263,19 @@ export const createPage: SkillTree = {
     },
     {
       "id": "cp-read",
-      "row": 10,
+      "row": 11,
       "kind": "step",
       "title": "Read the page twice",
       "desc": "From a distance only the sections show. Up close, every border and bar earns its place or goes.",
-      "lines": [188, 188],
+      "lines": [190, 190],
       "anchor": "Then read the page from a distance: the sections and their e"
     },
     {
       "id": "cp-reply",
-      "row": 11,
+      "row": 12,
       "kind": "done",
       "title": "Reply with the result",
-      "desc": "The sections and the layout each took, the components placed, the route, and the compliance result.",
+      "desc": "The sections and the layout each took, the components placed, the route, and the check-page result.",
       "lines": [21, 21],
       "anchor": "Reply with the sections and the layout each took, the compon"
     }
@@ -306,7 +315,19 @@ export const createPage: SkillTree = {
     },
     {
       "from": "cp-check",
-      "to": "cp-verify"
+      "to": "cp-repair",
+      "label": "findings"
+    },
+    {
+      "from": "cp-repair",
+      "to": "cp-check",
+      "label": "rerun",
+      "back": true
+    },
+    {
+      "from": "cp-check",
+      "to": "cp-verify",
+      "label": "exit 0"
     },
     {
       "from": "cp-verify",

package/src/editor/skill-atlas/trees/pick-component.ts

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const pickComponent: SkillTree = {
   "id": "live-tokens-pick-component",
-  "digest": "sha256:5e4ca458665c95fd",
+  "digest": "sha256:fa031772b2802175",
   "title": "pick-component",
   "tagline": "Select a component from the catalogue",
   "nodes": [
@@ -139,7 +139,7 @@ export const pickComponent: SkillTree = {
       "desc": "Use a component from the catalogue if one fits, otherwise build a new one.",
       "lines": [92, 96],
       "anchor": "## Nothing fits",
-      "anchorEnd": "`npx live-tokens components <id>` prints one component's usa",
+      "anchorEnd": "`npx live-tokens components <id>` prints one component's cat",
       "chips": [
         {
           "label": "shipped component",
@@ -170,7 +170,7 @@ export const pickComponent: SkillTree = {
       "title": "Check the component",
       "desc": "See the component's props and usage before placing it.",
       "lines": [96, 96],
-      "anchor": "`npx live-tokens components <id>` prints one component's usa"
+      "anchor": "`npx live-tokens components <id>` prints one component's cat"
     },
     {
       "id": "pk-native",

package/src/editor/skill-atlas/trees/set-geometry.ts

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const setGeometry: SkillTree = {
   "id": "live-tokens-set-geometry",
-  "digest": "sha256:fbe78a12bbd4791a",
+  "digest": "sha256:adba9f61a4113c03",
   "title": "set-geometry",
   "tagline": "Set Spacing, Corner Radius, Line Weight",
   "nodes": [

package/src/editor/ui/UIPaletteSelector.svelte

@@ -18,11 +18,7 @@
 
   /** Tokens that match the surface/fill suffix but live in <color>-only CSS contexts
       (color-mix, box-shadow color slot) where a gradient would invalidate the declaration. */
-  const GRADIENT_DENYLIST = new Set<string>([
-    '--radiobutton-default-surface',
-    '--radiobutton-hover-surface',
-    '--radiobutton-active-surface',
-  ]);
+  const GRADIENT_DENYLIST = new Set<string>([]);
 
   /** Slot kinds where a gradient is a renderable assignment. */
   function acceptsGradient(name: string): boolean {
@@ -135,7 +131,7 @@
 
   let selector: UITokenSelector | undefined = $state();
   let selectedFamily: string | null = $state(null);
-  let selectedTab: Category = $state('palette');
+  let selectedCategory: Category = $state('palette');
 
   /** Compass-rose layout for the orientation grid. Angles follow the CSS
    *  linear-gradient convention (0° points up, 90° points right). */
@@ -459,7 +455,7 @@
     if (familyFilter && name !== familyFilter) return;
     selectedFamily = name;
     if (name === chosenFamily && chosenCategory) {
-      selectedTab = chosenCategory;
+      selectedCategory = chosenCategory;
     }
   }
 
@@ -575,8 +571,8 @@
     const family = selectedFamily;
     const tabs = availableTabs;
     untrack(() => {
-      if (family && !tabs.find(t => t.id === selectedTab)) {
-        selectedTab = 'palette';
+      if (family && !tabs.find(t => t.id === selectedCategory)) {
+        selectedCategory = 'palette';
       }
     });
   });
@@ -674,14 +670,14 @@
           {#each availableTabs as tab}
             <button
               class="tab-btn"
-              class:selected={selectedTab === tab.id}
+              class:selected={selectedCategory === tab.id}
               class:assigned={chosenCategory === tab.id && chosenFamily === selectedFamily}
-              onclick={() => selectedTab = tab.id}
+              onclick={() => selectedCategory = tab.id}
             >{tab.label}</button>
           {/each}
         </div>
 
-        {#if selectedTab === 'palette'}
+        {#if selectedCategory === 'palette'}
           <div class="step-grid">
             {#each paletteSteps as step}
               <button
@@ -694,7 +690,7 @@
               </button>
             {/each}
           </div>
-        {:else if selectedTab === 'surface'}
+        {:else if selectedCategory === 'surface'}
           <div class="step-grid">
             {#each surfaceSteps as step}
               <button
@@ -707,7 +703,7 @@
               </button>
             {/each}
           </div>
-        {:else if selectedTab === 'border'}
+        {:else if selectedCategory === 'border'}
           <div class="step-grid">
             {#each borderSteps as step}
               <button
@@ -720,7 +716,7 @@
               </button>
             {/each}
           </div>
-        {:else if selectedTab === 'text'}
+        {:else if selectedCategory === 'text'}
           <div class="step-grid">
             {#each (selectedFamily === 'neutral' ? neutralTextSteps : textSteps) as step}
               <button

package/src/editor/ui/variantScales.ts

@@ -102,10 +102,10 @@ export const SHADOW: VariantScaleEntry = {
   ],
 };
 
-/** Used by `*-divider-height` / `*-track-height` variables; values come from the `--space-*` scale,
- *  not a dedicated `--divider-height-*` scale. The label-set differs from BORDER_WIDTH so a divider
- *  can pick from larger heights (up to 100%). */
-export const DIVIDER_HEIGHT: VariantScaleEntry = {
+/** Used by `*-track-height` variables; values come from the `--space-*` scale,
+ *  not a dedicated height scale. The label-set differs from BORDER_WIDTH so a
+ *  track can pick from larger heights (up to 100%). */
+export const TRACK_HEIGHT: VariantScaleEntry = {
   varPrefix: '--space-',
   options: [
     { key: '0', label: 'None', value: '0px' },
@@ -135,12 +135,12 @@ export const DURATION: VariantScaleEntry = {
   ],
 };
 
-/** Used by `*-divider-inset` variables (margin-block trimmed off a stretched
- *  divider). Labels describe the resulting divider, not the inset value: 0
- *  inset = bar-height divider ("Full"); larger insets = shorter divider.
+/** Used by `*-hairline-inset` variables (margin-block trimmed off a stretched
+ *  hairline). Labels describe the resulting line, not the inset value: 0
+ *  inset = bar-height line ("Full"); larger insets = shorter line.
  *  Replaces the percentage-height approach that collapsed to 0 in
  *  auto-height flex parents. */
-export const DIVIDER_INSET: VariantScaleEntry = {
+export const HAIRLINE_INSET: VariantScaleEntry = {
   varPrefix: '--space-',
   options: [
     { key: '0', label: 'Full', value: '0px' },