@motion-proto/live-tokens 0.74.0 → 0.76.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/.claude/skills/live-tokens-check-compliance/SKILL.md +33 -38
  2. package/.claude/skills/live-tokens-create-component/SKILL copy.md +196 -0
  3. package/.claude/skills/live-tokens-create-component/SKILL.md +198 -146
  4. package/.claude/skills/live-tokens-create-component/references/contract-tests.md +95 -52
  5. package/.claude/skills/live-tokens-create-component/references/intrinsics.md +2 -2
  6. package/.claude/skills/live-tokens-create-component/references/linked-siblings.md +2 -2
  7. package/.claude/skills/live-tokens-create-component/references/sketch-mode.md +12 -12
  8. package/.claude/skills/live-tokens-create-component/references/token-naming.md +2 -1
  9. package/.claude/skills/live-tokens-create-page/SKILL.md +187 -0
  10. package/.claude/skills/live-tokens-create-page/references/interaction-sources.md +66 -0
  11. package/.claude/skills/live-tokens-create-page/references/layout-sources.md +87 -0
  12. package/.claude/skills/live-tokens-create-theme/SKILL.md +52 -48
  13. package/.claude/skills/live-tokens-create-theme/references/design-directions.md +1 -1
  14. package/.claude/skills/live-tokens-fix-findings/SKILL.md +69 -60
  15. package/.claude/skills/live-tokens-pick-component/SKILL.md +64 -79
  16. package/.claude/skills/live-tokens-set-colors/SKILL.md +47 -38
  17. package/.claude/skills/live-tokens-set-geometry/SKILL.md +58 -35
  18. package/.claude/skills/live-tokens-set-geometry/references/geometry-anchors.md +5 -3
  19. package/.claude/skills/live-tokens-set-type/SKILL.md +30 -30
  20. package/CHANGELOG.md +138 -0
  21. package/README.md +17 -7
  22. package/bin/check-component.mjs +91 -19
  23. package/bin/check-page.mjs +102 -21
  24. package/bin/cli.mjs +87 -113
  25. package/bin/contractRunner.mjs +945 -0
  26. package/bin/create.mjs +1 -1
  27. package/bin/lib/catalogue.mjs +37 -30
  28. package/bin/lib/findings.mjs +46 -15
  29. package/bin/lib/report.mjs +3 -3
  30. package/bin/lib/tokenVocabulary.mjs +4 -4
  31. package/bin/migrate-routes.mjs +5 -5
  32. package/bin/migrate.mjs +4 -4
  33. package/bin/save-theme.mjs +8 -9
  34. package/bin/set-colors.mjs +9 -11
  35. package/bin/set-geometry.mjs +7 -7
  36. package/bin/set-type.mjs +5 -7
  37. package/bin/setup-claude.mjs +110 -0
  38. package/dist-plugin/{chunk-W6Y4BWFB.js → chunk-6WGFOJXO.js} +22 -0
  39. package/dist-plugin/{chunk-7VRTBGJT.js → chunk-PDNL4NC5.js} +9 -2
  40. package/dist-plugin/{chunk-V3YF6CGT.js → chunk-SWXRVZKT.js} +43 -1
  41. package/dist-plugin/{dataPaths-BhWzd5cL.d.cts → dataPaths-BpIK_Obx.d.cts} +1 -0
  42. package/dist-plugin/{dataPaths-BhWzd5cL.d.ts → dataPaths-BpIK_Obx.d.ts} +1 -0
  43. package/dist-plugin/index.cjs +310 -147
  44. package/dist-plugin/index.d.cts +1 -1
  45. package/dist-plugin/index.d.ts +1 -1
  46. package/dist-plugin/index.js +218 -122
  47. package/dist-plugin/migrateData/index.cjs +66 -2
  48. package/dist-plugin/migrateData/index.d.cts +1 -1
  49. package/dist-plugin/migrateData/index.d.ts +1 -1
  50. package/dist-plugin/migrateData/index.js +3 -3
  51. package/dist-plugin/setColors/index.cjs +61 -4
  52. package/dist-plugin/setColors/index.d.cts +1 -1
  53. package/dist-plugin/setColors/index.d.ts +1 -1
  54. package/dist-plugin/setColors/index.js +5 -5
  55. package/dist-plugin/setGeometry/index.cjs +107 -44
  56. package/dist-plugin/setGeometry/index.d.cts +5 -5
  57. package/dist-plugin/setGeometry/index.d.ts +5 -5
  58. package/dist-plugin/setGeometry/index.js +51 -45
  59. package/dist-plugin/setType/index.cjs +15 -0
  60. package/dist-plugin/setType/index.d.cts +1 -1
  61. package/dist-plugin/setType/index.d.ts +1 -1
  62. package/dist-plugin/setType/index.js +1 -1
  63. package/dist-plugin/tokensCssMigrations/index.d.cts +1 -1
  64. package/dist-plugin/tokensCssMigrations/index.d.ts +1 -1
  65. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  66. package/package.json +35 -8
  67. package/src/app/site.css +19 -9
  68. package/src/editor/bootstrap.ts +2 -0
  69. package/src/editor/component-editor/CollapsibleSectionEditor.svelte +4 -4
  70. package/src/editor/component-editor/DialogEditor.svelte +4 -4
  71. package/src/editor/component-editor/MenuSelectEditor.svelte +4 -1
  72. package/src/editor/component-editor/SegmentedControlEditor.svelte +6 -1
  73. package/src/editor/component-editor/TabBarEditor.svelte +1 -1
  74. package/src/editor/component-editor/TableEditor.svelte +2 -2
  75. package/src/editor/component-editor/scaffolding/TokenLayout.svelte +6 -3
  76. package/src/editor/component-editor/scaffolding/VariantGroup.svelte +41 -20
  77. package/src/editor/core/components/adjustAliases.ts +59 -45
  78. package/src/editor/core/components/aliasKinds.ts +9 -5
  79. package/src/editor/core/preview/themePreview.ts +9 -2
  80. package/src/editor/core/sketch/sketchLayer.ts +22 -0
  81. package/src/editor/core/store/editorStore.ts +10 -1
  82. package/src/editor/core/themes/buildColors.ts +3 -3
  83. package/src/editor/core/themes/liveStateStream.ts +26 -0
  84. package/src/editor/core/themes/migrations/2026-09-07-stroke-role-renames.ts +52 -0
  85. package/src/editor/core/themes/migrations/index.ts +2 -0
  86. package/src/editor/core/themes/themeDocumentSync.ts +22 -11
  87. package/src/editor/core/themes/themeService.ts +9 -2
  88. package/src/editor/pages/ComponentEditorPage.svelte +17 -1
  89. package/src/editor/pages/liveTokensEditorHandle.ts +23 -0
  90. package/src/editor/skill-atlas/SkillAtlas.svelte +75 -573
  91. package/src/editor/skill-atlas/TreeCanvas.svelte +263 -0
  92. package/src/editor/skill-atlas/TreeNodeCard.svelte +136 -53
  93. package/src/editor/skill-atlas/edges.ts +31 -0
  94. package/src/editor/skill-atlas/skillSources.generated.ts +20 -19
  95. package/src/editor/skill-atlas/skillTrees.ts +19 -3840
  96. package/src/editor/skill-atlas/trees/check-compliance.ts +183 -0
  97. package/src/editor/skill-atlas/trees/create-component.ts +275 -0
  98. package/src/editor/skill-atlas/trees/create-page.ts +320 -0
  99. package/src/editor/skill-atlas/trees/create-theme.ts +255 -0
  100. package/src/editor/skill-atlas/trees/fix-findings.ts +469 -0
  101. package/src/editor/skill-atlas/trees/pick-component.ts +300 -0
  102. package/src/editor/skill-atlas/trees/set-colors.ts +148 -0
  103. package/src/editor/skill-atlas/trees/set-geometry.ts +136 -0
  104. package/src/editor/skill-atlas/trees/set-type.ts +142 -0
  105. package/src/editor/skill-atlas/types.ts +3 -4
  106. package/src/editor/skill-atlas/wireLayout.ts +287 -0
  107. package/src/live-tokens/data/themes/autumn.json +15 -15
  108. package/src/live-tokens/data/themes/halloween.json +15 -15
  109. package/src/live-tokens/data/themes/midnight-study.json +15 -15
  110. package/src/live-tokens/data/themes/ocean.json +15 -15
  111. package/src/live-tokens/data/themes/royal-velvet.json +15 -15
  112. package/src/live-tokens/data/themes/sketchy.json +15 -15
  113. package/src/live-tokens/data/themes/spring-meadow.json +15 -15
  114. package/src/live-tokens/data/themes/sunset.json +15 -15
  115. package/src/system/components/Badge.svelte +7 -0
  116. package/src/system/components/Button.svelte +7 -0
  117. package/src/system/components/Callout.svelte +10 -6
  118. package/src/system/components/Card.svelte +23 -4
  119. package/src/system/components/CodeSnippet.svelte +4 -3
  120. package/src/system/components/CollapsibleSection.svelte +23 -8
  121. package/src/system/components/CornerBadge.svelte +6 -0
  122. package/src/system/components/Dialog.svelte +13 -6
  123. package/src/system/components/IconButton.svelte +9 -0
  124. package/src/system/components/Image.svelte +8 -0
  125. package/src/system/components/ImageLightbox.svelte +6 -0
  126. package/src/system/components/InlineEditActions.svelte +7 -0
  127. package/src/system/components/Input.svelte +7 -0
  128. package/src/system/components/MenuSelect.svelte +7 -0
  129. package/src/system/components/Notification.svelte +7 -0
  130. package/src/system/components/Panel.svelte +6 -0
  131. package/src/system/components/ProgressBar.svelte +5 -0
  132. package/src/system/components/RadioButton.svelte +11 -5
  133. package/src/system/components/SectionDivider.svelte +8 -0
  134. package/src/system/components/SegmentedControl.svelte +6 -0
  135. package/src/system/components/SideNavigation.svelte +6 -0
  136. package/src/system/components/Slider.svelte +7 -4
  137. package/src/system/components/TabBar.svelte +15 -9
  138. package/src/system/components/Table.svelte +8 -3
  139. package/src/system/components/Toggle.svelte +4 -4
  140. package/src/system/components/Tooltip.svelte +6 -0
  141. package/src/testing-js/chunk-AO7EZHYV.js +776 -0
  142. package/src/testing-js/chunk-AO7EZHYV.js.map +1 -0
  143. package/src/testing-js/chunk-FAFOAWYL.js +39 -0
  144. package/src/testing-js/chunk-FAFOAWYL.js.map +1 -0
  145. package/src/testing-js/chunk-L73N4NSO.js +23 -0
  146. package/src/testing-js/chunk-L73N4NSO.js.map +1 -0
  147. package/src/testing-js/chunk-LXR3MN6N.js +3063 -0
  148. package/src/testing-js/chunk-LXR3MN6N.js.map +1 -0
  149. package/src/testing-js/chunk-ZMSX6CXR.js +53 -0
  150. package/src/testing-js/chunk-ZMSX6CXR.js.map +1 -0
  151. package/src/testing-js/component-alias.contract.js +81 -0
  152. package/src/testing-js/component-alias.contract.js.map +1 -0
  153. package/src/testing-js/component-editor.contract.js +62 -0
  154. package/src/testing-js/component-editor.contract.js.map +1 -0
  155. package/src/testing-js/component-render.contract.js +568 -0
  156. package/src/testing-js/component-render.contract.js.map +1 -0
  157. package/src/testing-js/index.d.ts +293 -0
  158. package/src/testing-js/index.js +222 -0
  159. package/src/testing-js/index.js.map +1 -0
  160. package/src/testing-js/registry.contract.js +39 -0
  161. package/src/testing-js/registry.contract.js.map +1 -0
  162. package/src/testing-js/vitest-BE6uGF31.d.ts +73 -0
  163. package/src/testing-js/vitest.d.ts +3 -0
  164. package/src/testing-js/vitest.js +13 -0
  165. package/src/testing-js/vitest.js.map +1 -0
  166. package/template/README.md +13 -0
  167. package/template/_gitignore +6 -0
  168. package/template/package.json +3 -1
  169. package/template/src/pages/Home.svelte +4 -18
  170. package/.claude/skills/live-tokens-build-page/SKILL.md +0 -103
  171. package/.claude/skills/live-tokens-build-page/references/layout-sources.md +0 -48
@@ -2,6 +2,16 @@
2
2
  import fs from "fs";
3
3
  import path from "path";
4
4
  var DEFAULT_DATA_DIR = "src/live-tokens/data";
5
+ var TEST_DATA_DIR_ENV = "LIVE_TOKENS_TEST_DATA_DIR";
6
+ function testDataDir() {
7
+ const raw = process.env[TEST_DATA_DIR_ENV];
8
+ return raw && raw.trim() !== "" ? path.resolve(raw.trim()) : void 0;
9
+ }
10
+ var TEST_PACKAGE_DATA_DIR_ENV = "LIVE_TOKENS_TEST_PACKAGE_DATA_DIR";
11
+ function testPackageDataDir() {
12
+ const raw = process.env[TEST_PACKAGE_DATA_DIR_ENV];
13
+ return raw && raw.trim() !== "" ? path.resolve(raw.trim()) : void 0;
14
+ }
5
15
  var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
6
16
  "dataDir",
7
17
  "colorsAndTypeDir",
@@ -35,6 +45,16 @@ function readLiveTokensConfig() {
35
45
  }
36
46
  }
37
47
  function resolveDataDirs(opts = {}) {
48
+ const isolated = testDataDir();
49
+ if (isolated) {
50
+ return {
51
+ dataDir: isolated,
52
+ colorsAndTypeDir: path.join(isolated, "colors-and-type"),
53
+ componentConfigsDir: path.join(isolated, "component-configs"),
54
+ themesDir: path.join(isolated, "themes"),
55
+ sketchStylesDir: path.join(isolated, "sketch-styles")
56
+ };
57
+ }
38
58
  const fileConfig = readLiveTokensConfig();
39
59
  const dataDirRaw = opts.dataDir ?? fileConfig.dataDir ?? DEFAULT_DATA_DIR;
40
60
  const dataDir = path.resolve(dataDirRaw);
@@ -50,6 +70,8 @@ function resolveDataDirs(opts = {}) {
50
70
  }
51
71
 
52
72
  export {
73
+ testDataDir,
74
+ testPackageDataDir,
53
75
  readLiveTokensConfig,
54
76
  resolveDataDirs
55
77
  };
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  CURRENT_COMPONENT_SCHEMA_VERSION,
3
3
  runMigrations
4
- } from "./chunk-V3YF6CGT.js";
4
+ } from "./chunk-SWXRVZKT.js";
5
5
 
6
6
  // vite-plugin/files/versionedFileResourceServer.ts
7
7
  import fs from "fs";
@@ -22,9 +22,11 @@ function versionedFileResourceServer(opts) {
22
22
  function ensureMeta() {
23
23
  if (!fs.existsSync(activePath)) {
24
24
  fs.writeFileSync(activePath, JSON.stringify({ activeFile: defaultName }));
25
+ opts.onWrite?.(activePath);
25
26
  }
26
27
  if (!fs.existsSync(productionPath)) {
27
28
  fs.writeFileSync(productionPath, JSON.stringify({ productionFile: defaultName }));
29
+ opts.onWrite?.(productionPath);
28
30
  }
29
31
  }
30
32
  function filePath(name) {
@@ -89,9 +91,11 @@ function versionedFileResourceServer(opts) {
89
91
  }
90
92
  function setActiveName(name) {
91
93
  fs.writeFileSync(activePath, JSON.stringify({ activeFile: name }));
94
+ opts.onWrite?.(activePath);
92
95
  }
93
96
  function setProductionName(name) {
94
97
  fs.writeFileSync(productionPath, JSON.stringify({ productionFile: name }));
98
+ opts.onWrite?.(productionPath);
95
99
  }
96
100
  function hasWorking() {
97
101
  return fs.existsSync(workingPath);
@@ -107,9 +111,12 @@ function versionedFileResourceServer(opts) {
107
111
  function writeWorking(data) {
108
112
  ensureDir();
109
113
  fs.writeFileSync(workingPath, JSON.stringify(data, null, 2));
114
+ opts.onWrite?.(workingPath);
110
115
  }
111
116
  function clearWorking() {
112
- if (fs.existsSync(workingPath)) fs.unlinkSync(workingPath);
117
+ if (!fs.existsSync(workingPath)) return;
118
+ fs.unlinkSync(workingPath);
119
+ opts.onWrite?.(workingPath);
113
120
  }
114
121
  return {
115
122
  dir,
@@ -880,6 +880,47 @@ var colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys = {
880
880
  }
881
881
  };
882
882
 
883
+ // src/editor/core/themes/migrations/2026-09-07-stroke-role-renames.ts
884
+ var RENAMES2 = {
885
+ tabbar: Object.fromEntries(
886
+ ["default", "hover", "active", "disabled"].map((s) => [
887
+ `--tabbar-${s}-indicator-border-width`,
888
+ `--tabbar-${s}-indicator-width`
889
+ ])
890
+ ),
891
+ collapsiblesection: Object.fromEntries(
892
+ ["default", "hover"].flatMap((s) => [
893
+ [`--collapsiblesection-divider-${s}-border`, `--collapsiblesection-divider-${s}-hairline-color`],
894
+ [`--collapsiblesection-divider-${s}-border-width`, `--collapsiblesection-divider-${s}-hairline-thickness`]
895
+ ])
896
+ ),
897
+ dialog: Object.fromEntries(
898
+ ["header", "footer"].flatMap((part) => [
899
+ [`--dialog-${part}-border`, `--dialog-${part}-divider`],
900
+ [`--dialog-${part}-border-width`, `--dialog-${part}-divider-width`]
901
+ ])
902
+ ),
903
+ table: {
904
+ "--table-default-header-border": "--table-default-header-divider",
905
+ "--table-default-header-border-width": "--table-default-header-divider-width"
906
+ }
907
+ };
908
+ var componentMigration_2026_09_07_strokeRoleRenames = {
909
+ id: "2026-09-07-stroke-role-renames",
910
+ fromVersion: 26,
911
+ toVersion: 27,
912
+ appliesTo: "component-config",
913
+ apply(rawVars, meta) {
914
+ const renames = meta.component ? RENAMES2[meta.component] : void 0;
915
+ if (!renames) return { ...rawVars };
916
+ const out = {};
917
+ for (const [key, value] of Object.entries(rawVars)) {
918
+ out[renames[key] ?? key] = value;
919
+ }
920
+ return out;
921
+ }
922
+ };
923
+
883
924
  // src/editor/core/themes/migrations/index.ts
884
925
  var MIGRATIONS = [
885
926
  colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -915,7 +956,8 @@ var MIGRATIONS = [
915
956
  componentMigration_2026_09_01_tabbarActiveTint,
916
957
  componentMigration_2026_09_01_gateSuffixEnabled,
917
958
  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
918
- colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys
959
+ colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys,
960
+ componentMigration_2026_09_07_strokeRoleRenames
919
961
  ];
920
962
  function countFor(kind) {
921
963
  return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -44,6 +44,7 @@ declare function readLiveTokensConfig(): LiveTokensFileConfig;
44
44
  * Resolve the four data directories for a single plugin/preprocessor.
45
45
  *
46
46
  * Per-folder resolution order (most specific wins):
47
+ * 0. `LIVE_TOKENS_TEST_DATA_DIR`, which redirects all four folders at once
47
48
  * 1. explicit opts (e.g. `opts.colorsAndTypeDir`)
48
49
  * 2. `live-tokens.config.json` field (e.g. `fileConfig.colorsAndTypeDir`)
49
50
  * 3. `<dataDir>/<sub>` where dataDir comes from opts > config file > the
@@ -44,6 +44,7 @@ declare function readLiveTokensConfig(): LiveTokensFileConfig;
44
44
  * Resolve the four data directories for a single plugin/preprocessor.
45
45
  *
46
46
  * Per-folder resolution order (most specific wins):
47
+ * 0. `LIVE_TOKENS_TEST_DATA_DIR`, which redirects all four folders at once
47
48
  * 1. explicit opts (e.g. `opts.colorsAndTypeDir`)
48
49
  * 2. `live-tokens.config.json` field (e.g. `fileConfig.colorsAndTypeDir`)
49
50
  * 3. `<dataDir>/<sub>` where dataDir comes from opts > config file > the