@motion-proto/live-tokens 0.78.0 → 0.80.0

package/src/editor/skill-atlas/skillTrees.ts

@@ -7,9 +7,8 @@ import { pickComponent } from './trees/pick-component';
 import { createPage } from './trees/create-page';
 import { createComponent } from './trees/create-component';
 import { checkCompliance } from './trees/check-compliance';
-import { fixFindings } from './trees/fix-findings';
 
-// Tab order: the theme route and its three set skills, the page path, then the audit pair.
+// Tab order: the theme route and its three set skills, the page path, then the audit.
 export const skillTrees: Record<string, SkillTree> = {
   'create-theme': createTheme,
   'set-colors': setColors,
@@ -19,5 +18,4 @@ export const skillTrees: Record<string, SkillTree> = {
   'create-page': createPage,
   'create-component': createComponent,
   'check-compliance': checkCompliance,
-  'fix-findings': fixFindings,
 };

package/src/editor/skill-atlas/trees/check-compliance.ts

@@ -2,182 +2,70 @@ import type { SkillTree } from '../types';
 
 export const checkCompliance: SkillTree = {
   "id": "live-tokens-check-compliance",
-  "digest": "sha256:6ec5bd44eeee644c",
+  "digest": "sha256:d6a1cdc3c9aead66",
   "title": "check-compliance",
-  "tagline": "Check to Ensure Live Tokens Is Used",
+  "tagline": "Check and Fix a Project's Use of Live Tokens",
   "nodes": [
     {
       "id": "cc2-trig",
       "row": 0,
       "kind": "trigger",
-      "title": "Review design-system compliance",
-      "desc": "Checks for correct use of components, properties, and tokens.",
+      "title": "Check and fix design-system compliance",
+      "desc": "Checks for correct use of components, properties, and tokens, and fixes what it finds.",
       "lines": [3, 3],
-      "anchor": "description: Report an existing project's adherence to @moti"
+      "anchor": "description: Check an existing @motion-proto/live-tokens pro"
     },
     {
-      "id": "cc2-run",
+      "id": "cc2-check",
       "row": 1,
       "kind": "cli",
-      "title": "Generate the compliance report",
-      "desc": "Provides a report of fixes for the fix-findings skill",
-      "lines": [8, 8],
-      "anchor": "Run `npx live-tokens report`. The CLI prints a report with t"
+      "title": "Run the checks",
+      "desc": "Both checkers bring tokens.css up to the installed package and apply every fix they can, then return the fixes beside the judgment calls that remain.",
+      "lines": [14, 18],
+      "anchor": "Run both checkers with `--json`. Each first brings `tokens.c",
+      "anchorEnd": "```"
     },
     {
-      "id": "cc2-sections",
+      "id": "cc2-judge",
       "row": 2,
-      "kind": "chipset",
-      "title": "Read the report sections",
-      "desc": "Fixes in the report are listed by section.",
-      "lines": [19, 19],
-      "anchor": "Read each section of the report with the Report sections tab",
-      "chips": [
-        {
-          "label": "Pending token migrations",
-          "lines": [32, 32],
-          "anchor": "| Pending token migrations (`migrations`) | Whether `tokens."
-        },
-        {
-          "label": "Checker findings by rule",
-          "lines": [33, 33],
-          "anchor": "| Checker findings by rule (`findings.pages`, `findings.comp"
-        },
-        {
-          "label": "Tokens a component never reads",
-          "lines": [34, 34],
-          "anchor": "| Tokens a component never reads (`components[].unread`) | T"
-        },
-        {
-          "label": "Component registration",
-          "lines": [35, 35],
-          "anchor": "| Component registration (`components[].registered`) | Wheth"
-        },
-        {
-          "label": "Component usage comment",
-          "lines": [36, 36],
-          "anchor": "| Component usage comment (`components[].described`) | Wheth"
-        },
-        {
-          "label": "Components each page renders",
-          "lines": [37, 37],
-          "anchor": "| Components each page renders (`usage.byPage`) | Which comp"
-        },
-        {
-          "label": "Shipped components no page renders",
-          "lines": [38, 38],
-          "anchor": "| Shipped components no page renders (`usage.unusedShipped`)"
-        },
-        {
-          "label": "Project components unregistered or unused",
-          "lines": [39, 39],
-          "anchor": "| Project components unregistered or unused (`usage.customUn"
-        }
-      ]
+      "kind": "gate",
+      "title": "Make the judgment calls",
+      "desc": "Each judgment call carries its guidance. Make each call, then run the checks again.",
+      "lines": [19, 21],
+      "anchor": "Read what remains. Each finding carries the fields under Fin",
+      "anchorEnd": "Make every repair in the group from its `guidance`, within S"
     },
     {
-      "id": "cc2-drill-q",
+      "id": "cc2-reply",
       "row": 3,
-      "kind": "decide",
-      "title": "Get details",
-      "desc": "A finding may need more about one component or one token scale, such as space or color.",
-      "lines": [20, 20],
-      "anchor": "When a finding needs component or token scale details, run t",
-      "chips": [
-        {
-          "label": "component",
-          "lines": [26, 26],
-          "anchor": "For one component, run `npx live-tokens components <id>`. Fo"
-        },
-        {
-          "label": "token scale",
-          "lines": [26, 26],
-          "anchor": "For one component, run `npx live-tokens components <id>`. Fo"
-        },
-        {
-          "label": "continue with classification",
-          "lines": [21, 21],
-          "anchor": "Classify each finding as Mechanical, Judgement, or Deliberat"
-        }
-      ]
-    },
-    {
-      "id": "cc2-component",
-      "row": 4,
-      "kind": "cli",
-      "title": "Inspect the component",
-      "desc": "Shows one component's props and usage.",
-      "lines": [26, 26],
-      "anchor": "For one component, run `npx live-tokens components <id>`. Fo"
-    },
-    {
-      "id": "cc2-scale",
-      "row": 4,
-      "kind": "cli",
-      "title": "Inspect the token scale",
-      "desc": "Shows every token in one scale, such as space or color, with its value.",
-      "lines": [26, 26],
-      "anchor": "For one component, run `npx live-tokens components <id>`. Fo"
-    },
-    {
-      "id": "cc2-classify",
-      "row": 6,
-      "kind": "chipset",
-      "title": "Classify the findings",
-      "desc": "Mechanical maps a value to an existing token.\nJudgement asks the user to decide.\nDeliberate records a decision the project made.",
-      "lines": [21, 21],
-      "anchor": "Classify each finding as Mechanical, Judgement, or Deliberat"
-    },
-    {
-      "id": "cc2-handoff",
-      "row": 7,
-      "kind": "hand",
-      "title": "live-tokens-fix-findings",
-      "desc": "Reply with the findings and the fixes, in the order the repair skill takes them, and hand it the list.",
-      "lines": [22, 24],
-      "anchor": "Reply with the findings of each section in the table's order",
-      "anchorEnd": "End with the hand-off: run **live-tokens-fix-findings** on t"
+      "kind": "done",
+      "title": "Reply with the results",
+      "desc": "The fixes, the judgment calls made, the findings left with their reasons, and both exit codes.",
+      "lines": [25, 29],
+      "anchor": "Reply with:",
+      "anchorEnd": "both checker commands with their exit codes"
     }
   ],
   "edges": [
     {
-      "to": "cc2-run",
-      "from": "cc2-trig"
-    },
-    {
-      "to": "cc2-sections",
-      "from": "cc2-run"
-    },
-    {
-      "to": "cc2-drill-q",
-      "from": "cc2-sections"
-    },
-    {
-      "to": "cc2-component",
-      "from": "cc2-drill-q",
-      "label": "component"
-    },
-    {
-      "to": "cc2-scale",
-      "from": "cc2-drill-q",
-      "label": "token scale"
-    },
-    {
-      "to": "cc2-classify",
-      "from": "cc2-drill-q",
-      "label": "continue with classification"
+      "from": "cc2-trig",
+      "to": "cc2-check"
     },
     {
-      "to": "cc2-classify",
-      "from": "cc2-component"
+      "from": "cc2-check",
+      "to": "cc2-judge",
+      "label": "judgment calls"
     },
     {
-      "to": "cc2-classify",
-      "from": "cc2-scale"
+      "from": "cc2-check",
+      "to": "cc2-reply",
+      "label": "fixed"
     },
     {
-      "to": "cc2-handoff",
-      "from": "cc2-classify"
+      "from": "cc2-judge",
+      "to": "cc2-check",
+      "label": "rerun",
+      "back": true
     }
   ]
 };

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,51 +195,37 @@ 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-reply",
+      "row": 8,
       "kind": "step",
       "title": "Reply with the result",
-      "desc": "The files, the id, the props, and each check's result.",
+      "desc": "The files, the id, the props, and the result of check-component, the Svelte check, and the build.",
       "lines": [18, 18],
       "anchor": "Reply with the files, the id, the props, and each check's re"
     },
     {
       "id": "cc-page",
-      "row": 8,
+      "row": 9,
       "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,7 +256,19 @@ export const createComponent: SkillTree = {
     },
     {
       "from": "cc-checks",
-      "to": "cc-reply"
+      "to": "cc-repair",
+      "label": "findings"
+    },
+    {
+      "from": "cc-repair",
+      "to": "cc-checks",
+      "label": "rerun",
+      "back": true
+    },
+    {
+      "from": "cc-checks",
+      "to": "cc-reply",
+      "label": "exit 0"
     },
     {
       "from": "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",