@motion-proto/live-tokens 0.79.0 → 0.80.0

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

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const checkCompliance: SkillTree = {
   "id": "live-tokens-check-compliance",
-  "digest": "sha256:7ea9c74741740d5c",
+  "digest": "sha256:d6a1cdc3c9aead66",
   "title": "check-compliance",
   "tagline": "Check and Fix a Project's Use of Live Tokens",
   "nodes": [
@@ -11,237 +11,37 @@ export const checkCompliance: SkillTree = {
       "row": 0,
       "kind": "trigger",
       "title": "Check and fix design-system compliance",
-      "desc": "Checks for correct use of components, properties, and tokens, and fixes the project until both checkers exit 0.",
+      "desc": "Checks for correct use of components, properties, and tokens, and fixes what it finds.",
       "lines": [3, 3],
       "anchor": "description: Check an existing @motion-proto/live-tokens pro"
     },
-    {
-      "id": "cc2-run",
-      "row": 1,
-      "kind": "cli",
-      "title": "Generate the compliance report",
-      "desc": "One run reads the whole project: pending migrations, component facts, findings, and usage.",
-      "lines": [14, 14],
-      "anchor": "Run `npx live-tokens report --json`. Read it in its own key "
-    },
-    {
-      "id": "cc2-sections",
-      "row": 2,
-      "kind": "chipset",
-      "title": "Read the report sections",
-      "desc": "The report's own key order, from project facts to usage.",
-      "lines": [37, 46],
-      "anchor": "## Report sections",
-      "anchorEnd": "| Project components unused (`usage.customUnused`) | The pro",
-      "chips": [
-        {
-          "label": "Pending token migrations",
-          "lines": [41, 41],
-          "anchor": "| Pending token migrations (`migrations`) | Whether `tokens."
-        },
-        {
-          "label": "Component facts",
-          "lines": [42, 42],
-          "anchor": "| Component facts (`components[]`) | Every component the pro"
-        },
-        {
-          "label": "Checker findings by rule",
-          "lines": [43, 43],
-          "anchor": "| Checker findings by rule (`findings.pages`, `findings.comp"
-        },
-        {
-          "label": "Components each page renders",
-          "lines": [44, 44],
-          "anchor": "| Components each page renders (`usage.byPage`) | Which comp"
-        },
-        {
-          "label": "Shipped components no page renders",
-          "lines": [45, 45],
-          "anchor": "| Shipped components no page renders (`usage.unusedShipped`)"
-        },
-        {
-          "label": "Project components unused",
-          "lines": [46, 46],
-          "anchor": "| Project components unused (`usage.customUnused`) | The pro"
-        }
-      ]
-    },
-    {
-      "id": "cc2-migrate",
-      "row": 3,
-      "kind": "cli",
-      "title": "Run the token migrations",
-      "desc": "Bring tokens.css up to the installed package and heal the data tree. A stale file shows as unknown tokens.",
-      "lines": [15, 15],
-      "anchor": "Run `npx live-tokens migrate --check` to see the plan, then "
-    },
     {
       "id": "cc2-check",
-      "row": 4,
+      "row": 1,
       "kind": "cli",
-      "title": "Run both checkers",
-      "desc": "Each applies every auto repair, checks again, and returns the fixes beside the findings that remain.",
-      "lines": [16, 20],
-      "anchor": "Run both checkers with `--json`. Each first applies every fi",
+      "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-read",
-      "row": 5,
-      "kind": "chipset",
-      "title": "Read what remains",
-      "desc": "Every finding left carries its guidance and a repair of choice or authored.",
-      "lines": [21, 21],
-      "anchor": "Read what remains. Each finding carries the fields under Fin",
-      "chips": [
-        {
-          "label": "guidance",
-          "lines": [55, 55],
-          "anchor": "| `guidance` | How to make the repair: the token for the rol"
-        },
-        {
-          "label": "repair",
-          "lines": [56, 56],
-          "anchor": "| `repair` | `auto`, `choice`, or `authored`. See Repair lev"
-        },
-        {
-          "label": "exception",
-          "lines": [57, 57],
-          "anchor": "| `exception` | The narrower config entry that records a dec"
-        },
-        {
-          "label": "details",
-          "lines": [58, 58],
-          "anchor": "| `details` | Per-rule data the message already states in pr"
-        }
-      ]
-    },
-    {
-      "id": "cc2-group",
-      "row": 6,
-      "kind": "step",
-      "title": "Group findings by rule",
-      "desc": "Errors first, largest group first. Warnings only when the repair scope includes them.",
-      "lines": [22, 22],
-      "anchor": "Group the findings by rule. Take the largest error group fir"
-    },
-    {
-      "id": "cc2-repair",
-      "row": 7,
-      "kind": "chipset",
-      "title": "Repair from guidance",
-      "desc": "Every repair follows its finding's guidance, within the scope rules.",
-      "lines": [23, 23],
-      "anchor": "Make every repair in the group from its `guidance`, within S",
-      "chips": [
-        {
-          "label": "choice",
-          "lines": [65, 65],
-          "anchor": "**`choice`.** A role or an ambiguous value determines the fi"
-        },
-        {
-          "label": "authored",
-          "lines": [66, 66],
-          "anchor": "**`authored`.** New code is the fix: a runtime that has to s"
-        },
-        {
-          "label": "No new tokens",
-          "lines": [70, 70],
-          "anchor": "Add no token to `tokens.css`. Map a literal with no matching"
-        },
-        {
-          "label": "Name the shift",
-          "lines": [71, 71],
-          "anchor": "When the nearest token differs from the literal, use the tok"
-        },
-        {
-          "label": "Deliberate exceptions",
-          "lines": [72, 72],
-          "anchor": "Any finding, at any repair level, can stay as a deliberate e"
-        }
-      ]
-    },
-    {
-      "id": "cc2-rerun",
-      "row": 8,
-      "kind": "cli",
-      "title": "Rerun both checkers",
-      "desc": "Run both checkers again to see what remains.",
-      "lines": [24, 24],
-      "anchor": "Run both checkers again. When repairable findings remain in "
-    },
-    {
-      "id": "cc2-repeat",
-      "row": 9,
-      "kind": "gate",
-      "title": "Regroup the remaining findings",
-      "desc": "Findings a token can fix go back through grouping.",
-      "lines": [24, 24],
-      "anchor": "Run both checkers again. When repairable findings remain in "
-    },
-    {
-      "id": "cc2-unresolved",
-      "row": 9,
-      "kind": "step",
-      "title": "Record the unresolved findings",
-      "desc": "A finding no token fits stays, and the reply says why.",
-      "lines": [70, 70],
-      "anchor": "Add no token to `tokens.css`. Map a literal with no matching"
-    },
-    {
-      "id": "cc2-strict",
-      "row": 10,
-      "kind": "cli",
-      "title": "Run strict checks",
-      "desc": "Strict mode counts every warning as an error.",
-      "lines": [25, 25],
-      "anchor": "When the errors are clear, run both checkers with `--strict`"
-    },
-    {
-      "id": "cc2-warnings",
-      "row": 11,
-      "kind": "decide",
-      "title": "Warning scope",
-      "desc": "Warnings are cleared when the request includes them. Otherwise the user chooses.",
-      "lines": [25, 26],
-      "anchor": "When the errors are clear, run both checkers with `--strict`",
-      "anchorEnd": "When the repair scope includes warnings, return to step 5 wi"
-    },
-    {
-      "id": "cc2-warning-loop",
-      "row": 12,
+      "id": "cc2-judge",
+      "row": 2,
       "kind": "gate",
-      "title": "Include warnings in the repair scope",
-      "desc": "The warnings go back through grouping, with --strict on every run.",
-      "lines": [26, 26],
-      "anchor": "When the repair scope includes warnings, return to step 5 wi"
-    },
-    {
-      "id": "cc2-build",
-      "row": 13,
-      "kind": "step",
-      "title": "Gate the existing build",
-      "desc": "check:design runs both checkers with --no-fix, and the build runs it first once both exit 0.",
-      "lines": [76, 76],
-      "anchor": "When `package.json` has no `check:design` script, add `\"chec"
+      "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-reply",
-      "row": 14,
-      "kind": "chipset",
-      "title": "Reply with the results",
-      "desc": "The report's picture, the fixes the checkers applied, the remaining changes by rule, the findings left with their reasons, and both exit codes.",
-      "lines": [28, 33],
-      "anchor": "Reply with:",
-      "anchorEnd": "both checker commands with their exit codes"
-    },
-    {
-      "id": "cc2-done",
-      "row": 15,
+      "row": 3,
       "kind": "done",
-      "title": "Results complete",
-      "desc": "Both checkers pass, or every finding left has a reason.",
-      "lines": [28, 33],
+      "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"
     }
@@ -249,100 +49,23 @@ export const checkCompliance: SkillTree = {
   "edges": [
     {
       "from": "cc2-trig",
-      "to": "cc2-run"
-    },
-    {
-      "from": "cc2-run",
-      "to": "cc2-sections"
-    },
-    {
-      "from": "cc2-sections",
-      "to": "cc2-migrate"
-    },
-    {
-      "from": "cc2-migrate",
       "to": "cc2-check"
     },
     {
       "from": "cc2-check",
-      "to": "cc2-read",
-      "label": "findings"
+      "to": "cc2-judge",
+      "label": "judgment calls"
     },
     {
       "from": "cc2-check",
-      "to": "cc2-strict",
-      "label": "exit 0"
+      "to": "cc2-reply",
+      "label": "fixed"
     },
     {
-      "from": "cc2-read",
-      "to": "cc2-group"
-    },
-    {
-      "from": "cc2-group",
-      "to": "cc2-repair"
-    },
-    {
-      "from": "cc2-repair",
-      "to": "cc2-rerun"
-    },
-    {
-      "from": "cc2-rerun",
-      "to": "cc2-repeat",
-      "label": "repairable findings"
-    },
-    {
-      "from": "cc2-repeat",
-      "to": "cc2-group",
-      "label": "return to step 5",
+      "from": "cc2-judge",
+      "to": "cc2-check",
+      "label": "rerun",
       "back": true
-    },
-    {
-      "from": "cc2-rerun",
-      "to": "cc2-unresolved",
-      "label": "no token fits"
-    },
-    {
-      "from": "cc2-unresolved",
-      "to": "cc2-reply"
-    },
-    {
-      "from": "cc2-rerun",
-      "to": "cc2-strict",
-      "label": "errors clear"
-    },
-    {
-      "from": "cc2-strict",
-      "to": "cc2-warnings",
-      "label": "warnings"
-    },
-    {
-      "from": "cc2-strict",
-      "to": "cc2-build",
-      "label": "strict checks pass"
-    },
-    {
-      "from": "cc2-warnings",
-      "to": "cc2-warning-loop",
-      "label": "repair scope includes warnings"
-    },
-    {
-      "from": "cc2-warnings",
-      "to": "cc2-build",
-      "label": "user defers warnings"
-    },
-    {
-      "from": "cc2-warning-loop",
-      "to": "cc2-group",
-      "label": "use --strict",
-      "back": true
-    },
-    {
-      "from": "cc2-build",
-      "to": "cc2-reply"
-    },
-    {
-      "from": "cc2-reply",
-      "to": "cc2-done"
     }
   ]
 };

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

@@ -210,27 +210,18 @@ export const createComponent: SkillTree = {
       "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,
+      "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": 10,
+      "row": 9,
       "kind": "hand",
       "title": "live-tokens-create-page",
       "desc": "The component is done. Placing it on a page is the next skill.",
@@ -276,13 +267,9 @@ export const createComponent: SkillTree = {
     },
     {
       "from": "cc-checks",
-      "to": "cc-build",
+      "to": "cc-reply",
       "label": "exit 0"
     },
-    {
-      "from": "cc-build",
-      "to": "cc-reply"
-    },
     {
       "from": "cc-reply",
       "to": "cc-page"

package/src/system/components/CollapsibleSection.svelte

@@ -74,18 +74,15 @@
       </div>
    {:else}
       <div class="section-header" class:open>
-         <div class="section-toggle">
-            <button
-               type="button"
-               class="section-toggle-button"
-               onclick={fireToggle}
-               aria-label={open ? 'Collapse section' : 'Expand section'}
-               aria-expanded={open}
-            >
-               <i class="fas fa-chevron-right toggle-icon"></i>
-            </button>
+         <button
+            type="button"
+            class="section-toggle-button section-toggle"
+            onclick={fireToggle}
+            aria-expanded={open}
+         >
+            <i class="fas fa-chevron-right toggle-icon" aria-hidden="true"></i>
             <span class="section-label">{label}</span>
-         </div>
+         </button>
          {@render summary?.()}
       </div>
    {/if}
@@ -199,11 +196,14 @@
       }
    }
 
-   .section-toggle {
-      display: flex;
-      align-items: center;
+   /* The whole unlinked header toggles, so the button carries the label and
+      fills the row; a summary snippet still sits beside it. */
+   .section-toggle-button.section-toggle {
       gap: var(--space-8);
-      flex-shrink: 0;
+      flex: 1 1 auto;
+      min-width: 0;
+      justify-content: flex-start;
+      text-align: start;
    }
 
    /* Linked header: chevron is a sibling button next to the label link, not a

package/template/package.json

@@ -5,10 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "npm run check:design && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:design": "live-tokens check-page --no-fix && live-tokens check-component --no-fix",
     "test:design": "live-tokens check-component --tests && live-tokens check-page --tests",
     "postinstall": "live-tokens setup-claude --force || exit 0"
   },

package/template/vite.config.ts

@@ -5,8 +5,9 @@ import { themeFileApi } from '@motion-proto/live-tokens/vite-plugin';
 export default defineConfig({
   plugins: [
     svelte({ preprocess: vitePreprocess() }),
-    // Dev-only: persists editor changes to src/system/styles/tokens.css and
-    // the JSON under src/live-tokens/data/. No effect on `vite build`.
+    // In dev, persists editor changes to src/system/styles/tokens.css and the
+    // JSON under src/live-tokens/data/. In `vite build`, runs the design checks
+    // first and stops the build on an error.
     themeFileApi({ tokensCssPath: 'src/system/styles/tokens.css' }),
   ],
 });