@motion-proto/live-tokens 0.78.0 → 0.80.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 (172) hide show
  1. package/.claude/skills/live-tokens-check-compliance/SKILL.md +49 -38
  2. package/.claude/skills/live-tokens-create-component/SKILL.md +23 -28
  3. package/.claude/skills/live-tokens-create-component/references/contract-tests.md +61 -0
  4. package/.claude/skills/live-tokens-create-component/references/sketch-mode.md +2 -2
  5. package/.claude/skills/live-tokens-create-component/references/token-naming.md +6 -15
  6. package/.claude/skills/live-tokens-create-page/SKILL.md +6 -4
  7. package/.claude/skills/live-tokens-create-theme/references/design-directions.md +1 -1
  8. package/.claude/skills/live-tokens-pick-component/SKILL.md +3 -3
  9. package/.claude/skills/live-tokens-set-colors/references/color-anchors.md +1 -1
  10. package/.claude/skills/live-tokens-set-geometry/SKILL.md +1 -1
  11. package/.claude/skills/live-tokens-set-geometry/references/geometry-anchors.md +1 -1
  12. package/CHANGELOG.md +271 -0
  13. package/README.md +10 -16
  14. package/bin/check-component.mjs +154 -551
  15. package/bin/check-page.mjs +57 -541
  16. package/bin/cli.mjs +93 -16
  17. package/bin/contractRunner.mjs +37 -91
  18. package/bin/lib/buildChecks.mjs +32 -0
  19. package/bin/lib/catalogue.mjs +161 -34
  20. package/bin/lib/componentSource.mjs +152 -0
  21. package/bin/lib/cssValues.mjs +9 -0
  22. package/bin/lib/dataDir.mjs +126 -0
  23. package/bin/lib/findings.mjs +103 -12
  24. package/bin/lib/fixers.mjs +64 -0
  25. package/bin/lib/geometry.mjs +92 -0
  26. package/bin/lib/pageSource.mjs +230 -0
  27. package/bin/lib/report.mjs +57 -59
  28. package/bin/lib/tokenVocabulary.mjs +104 -34
  29. package/bin/migrate-build-script.mjs +66 -0
  30. package/bin/migrate.mjs +5 -0
  31. package/bin/rules/componentStructure.mjs +344 -0
  32. package/bin/rules/componentUse.mjs +313 -0
  33. package/bin/rules/importsAndRoutes.mjs +136 -0
  34. package/bin/rules/testRuns.mjs +122 -0
  35. package/bin/rules/tokens.mjs +426 -0
  36. package/bin/setup-claude.mjs +1 -2
  37. package/dist-plugin/{chunk-PDNL4NC5.js → chunk-D4WRIKEZ.js} +7 -2
  38. package/dist-plugin/{chunk-SWXRVZKT.js → chunk-REBHE3ZM.js} +414 -1
  39. package/dist-plugin/index.cjs +470 -19
  40. package/dist-plugin/index.d.cts +1 -0
  41. package/dist-plugin/index.d.ts +1 -0
  42. package/dist-plugin/index.js +87 -55
  43. package/dist-plugin/migrateData/index.cjs +422 -4
  44. package/dist-plugin/migrateData/index.js +2 -2
  45. package/dist-plugin/setColors/index.cjs +414 -1
  46. package/dist-plugin/setColors/index.d.cts +1 -1
  47. package/dist-plugin/setColors/index.d.ts +1 -1
  48. package/dist-plugin/setColors/index.js +1 -1
  49. package/dist-plugin/setGeometry/index.cjs +423 -13
  50. package/dist-plugin/setGeometry/index.d.cts +3 -3
  51. package/dist-plugin/setGeometry/index.d.ts +3 -3
  52. package/dist-plugin/setGeometry/index.js +10 -13
  53. package/dist-plugin/setType/index.d.cts +1 -1
  54. package/dist-plugin/setType/index.d.ts +1 -1
  55. package/dist-plugin/{themeTypes-BxRtuN5V.d.cts → themeTypes-B8_Idrp4.d.cts} +2 -2
  56. package/dist-plugin/{themeTypes-BxRtuN5V.d.ts → themeTypes-B8_Idrp4.d.ts} +2 -2
  57. package/package.json +2 -2
  58. package/src/editor/component-editor/CalloutEditor.svelte +2 -2
  59. package/src/editor/component-editor/CollapsibleSectionEditor.svelte +14 -15
  60. package/src/editor/component-editor/CornerBadgeEditor.svelte +14 -14
  61. package/src/editor/component-editor/DialogEditor.svelte +5 -5
  62. package/src/editor/component-editor/InlineEditActionsEditor.svelte +2 -2
  63. package/src/editor/component-editor/RadioButtonEditor.svelte +21 -21
  64. package/src/editor/component-editor/SectionDividerEditor.svelte +7 -7
  65. package/src/editor/component-editor/SegmentedControlEditor.svelte +5 -5
  66. package/src/editor/component-editor/SideNavigationEditor.svelte +25 -25
  67. package/src/editor/component-editor/TabBarEditor.svelte +6 -6
  68. package/src/editor/component-editor/TableEditor.svelte +6 -6
  69. package/src/editor/component-editor/ToggleEditor.svelte +2 -2
  70. package/src/editor/component-editor/index.ts +3 -0
  71. package/src/editor/component-editor/registry.ts +57 -1
  72. package/src/editor/component-editor/scaffolding/TokenLayout.svelte +14 -14
  73. package/src/editor/component-editor/scaffolding/VariantGroup.svelte +3 -0
  74. package/src/editor/component-editor/scaffolding/types.ts +15 -0
  75. package/src/editor/core/components/adjustAliases.ts +4 -4
  76. package/src/editor/core/components/aliasKinds.ts +20 -19
  77. package/src/editor/core/sketch/sketchLayer.ts +3 -3
  78. package/src/editor/core/themes/migrateComponentConfig.ts +14 -6
  79. package/src/editor/core/themes/migrations/2026-09-13-badge-brand.ts +42 -0
  80. package/src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts +33 -0
  81. package/src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts +70 -0
  82. package/src/editor/core/themes/migrations/2026-09-13-hairline.ts +92 -0
  83. package/src/editor/core/themes/migrations/2026-09-13-indicator.ts +54 -0
  84. package/src/editor/core/themes/migrations/2026-09-13-sectiondivider-surface.ts +36 -0
  85. package/src/editor/core/themes/migrations/2026-09-13-selected-state.ts +124 -0
  86. package/src/editor/core/themes/migrations/2026-09-13-toggle-label.ts +31 -0
  87. package/src/editor/core/themes/migrations/index.ts +16 -0
  88. package/src/editor/core/themes/themeService.ts +3 -3
  89. package/src/editor/core/themes/themeTypes.ts +13 -15
  90. package/src/editor/docs/Docs.svelte +1 -1
  91. package/src/editor/docs/content/light-and-dark.md +3 -3
  92. package/src/editor/docs/content.generated.ts +1 -1
  93. package/src/editor/index.ts +1 -0
  94. package/src/editor/overlay/LiveEditorOverlay.svelte +15 -0
  95. package/src/editor/skill-atlas/SkillAtlas.svelte +4 -4
  96. package/src/editor/skill-atlas/TreeNodeCard.svelte +4 -4
  97. package/src/editor/skill-atlas/skillSources.generated.ts +11 -14
  98. package/src/editor/skill-atlas/skillTrees.ts +1 -3
  99. package/src/editor/skill-atlas/trees/check-compliance.ts +37 -149
  100. package/src/editor/skill-atlas/trees/create-component.ts +62 -64
  101. package/src/editor/skill-atlas/trees/create-page.ts +38 -17
  102. package/src/editor/skill-atlas/trees/pick-component.ts +3 -3
  103. package/src/editor/skill-atlas/trees/set-geometry.ts +1 -1
  104. package/src/editor/ui/UIPaletteSelector.svelte +11 -15
  105. package/src/editor/ui/variantScales.ts +8 -8
  106. package/src/live-tokens/data/themes/autumn.json +188 -188
  107. package/src/live-tokens/data/themes/halloween.json +188 -188
  108. package/src/live-tokens/data/themes/midnight-study.json +245 -245
  109. package/src/live-tokens/data/themes/ocean.json +188 -188
  110. package/src/live-tokens/data/themes/royal-velvet.json +188 -188
  111. package/src/live-tokens/data/themes/sketchy.json +188 -188
  112. package/src/live-tokens/data/themes/spring-meadow.json +188 -188
  113. package/src/live-tokens/data/themes/sunset.json +188 -188
  114. package/src/system/components/Badge.svelte +27 -23
  115. package/src/system/components/Button.svelte +13 -7
  116. package/src/system/components/Callout.svelte +16 -11
  117. package/src/system/components/Card.svelte +22 -15
  118. package/src/system/components/CodeSnippet.svelte +10 -6
  119. package/src/system/components/CollapsibleSection.svelte +81 -76
  120. package/src/system/components/CornerBadge.svelte +78 -72
  121. package/src/system/components/Dialog.svelte +21 -18
  122. package/src/system/components/IconButton.svelte +13 -9
  123. package/src/system/components/Image.svelte +14 -8
  124. package/src/system/components/ImageLightbox.svelte +10 -6
  125. package/src/system/components/InlineEditActions.svelte +17 -14
  126. package/src/system/components/Input.svelte +13 -7
  127. package/src/system/components/MenuSelect.svelte +13 -7
  128. package/src/system/components/Notification.svelte +17 -11
  129. package/src/system/components/Panel.svelte +13 -6
  130. package/src/system/components/ProgressBar.svelte +10 -5
  131. package/src/system/components/RadioButton.svelte +33 -30
  132. package/src/system/components/SectionDivider.svelte +28 -21
  133. package/src/system/components/SegmentedControl.svelte +27 -23
  134. package/src/system/components/SideNavigation.svelte +175 -171
  135. package/src/system/components/Slider.svelte +11 -7
  136. package/src/system/components/TabBar.svelte +53 -49
  137. package/src/system/components/Table.svelte +20 -15
  138. package/src/system/components/Toggle.svelte +14 -10
  139. package/src/system/components/Tooltip.svelte +10 -6
  140. package/src/system/styles/CONVENTIONS.md +3 -4
  141. package/src/testing-js/chunk-3UKGXCDL.js +48 -0
  142. package/src/testing-js/chunk-3UKGXCDL.js.map +1 -0
  143. package/src/testing-js/{chunk-FAFOAWYL.js → chunk-Q3YIAAG3.js} +17 -3
  144. package/src/testing-js/chunk-Q3YIAAG3.js.map +1 -0
  145. package/src/testing-js/{chunk-GNIUPIU2.js → chunk-U7OJE5DU.js} +18 -18
  146. package/src/testing-js/chunk-U7OJE5DU.js.map +1 -0
  147. package/src/testing-js/{chunk-4JQX6WWL.js → chunk-ZMZQZ33J.js} +474 -166
  148. package/src/testing-js/chunk-ZMZQZ33J.js.map +1 -0
  149. package/src/testing-js/component-behavior.contract.js +155 -0
  150. package/src/testing-js/component-behavior.contract.js.map +1 -0
  151. package/src/testing-js/component-editor.contract.js +6 -4
  152. package/src/testing-js/component-editor.contract.js.map +1 -1
  153. package/src/testing-js/component-render.contract.js +14 -10
  154. package/src/testing-js/component-render.contract.js.map +1 -1
  155. package/src/testing-js/index.d.ts +44 -4
  156. package/src/testing-js/index.js +13 -7
  157. package/src/testing-js/index.js.map +1 -1
  158. package/src/testing-js/page-compliance.contract.js +48 -10
  159. package/src/testing-js/page-compliance.contract.js.map +1 -1
  160. package/src/testing-js/registry.contract.js +5 -3
  161. package/src/testing-js/registry.contract.js.map +1 -1
  162. package/src/testing-js/{vitest-C-wNWcoA.d.ts → vitest-BMLIbDs2.d.ts} +8 -2
  163. package/src/testing-js/vitest.d.ts +1 -1
  164. package/src/testing-js/vitest.js +2 -1
  165. package/template/package.json +1 -2
  166. package/template/vite.config.ts +3 -2
  167. package/.claude/skills/live-tokens-create-component/SKILL copy.md +0 -196
  168. package/.claude/skills/live-tokens-fix-findings/SKILL.md +0 -105
  169. package/src/editor/skill-atlas/trees/fix-findings.ts +0 -504
  170. package/src/testing-js/chunk-4JQX6WWL.js.map +0 -1
  171. package/src/testing-js/chunk-FAFOAWYL.js.map +0 -1
  172. package/src/testing-js/chunk-GNIUPIU2.js.map +0 -1
@@ -1705,6 +1705,411 @@ var componentMigration_2026_09_07_strokeRoleRenames = {
1705
1705
  }
1706
1706
  };
1707
1707
 
1708
+ // src/editor/core/themes/migrations/2026-09-13-selected-state.ts
1709
+ var RADIOBUTTON_SUFFIXES = [
1710
+ "dot-border-color",
1711
+ "dot-border-width",
1712
+ "dot-fill",
1713
+ "dot-size",
1714
+ "label",
1715
+ "label-font-family",
1716
+ "label-font-size",
1717
+ "label-font-weight",
1718
+ "label-line-height"
1719
+ ];
1720
+ var TABBAR_SUFFIXES = [
1721
+ "border",
1722
+ "icon-size",
1723
+ "indicator-width",
1724
+ "padding",
1725
+ "surface",
1726
+ "tab-border-color",
1727
+ "tab-border-width",
1728
+ "tab-bottom-radius",
1729
+ "tab-top-radius",
1730
+ "text",
1731
+ "text-font-family",
1732
+ "text-font-size",
1733
+ "text-font-weight",
1734
+ "text-line-height"
1735
+ ];
1736
+ var SIDENAVIGATION_SUFFIXES = {
1737
+ title: [
1738
+ "accent",
1739
+ "accent-width",
1740
+ "border",
1741
+ "border-width",
1742
+ "label",
1743
+ "label-font-family",
1744
+ "label-font-size",
1745
+ "label-font-weight",
1746
+ "label-line-height",
1747
+ "padding",
1748
+ "surface"
1749
+ ],
1750
+ section: [
1751
+ "accent",
1752
+ "accent-width",
1753
+ "surface",
1754
+ "text",
1755
+ "text-font-family",
1756
+ "text-font-size",
1757
+ "text-font-weight",
1758
+ "text-line-height"
1759
+ ],
1760
+ item: [
1761
+ "accent",
1762
+ "accent-width",
1763
+ "padding",
1764
+ "surface",
1765
+ "text",
1766
+ "text-font-family",
1767
+ "text-font-size",
1768
+ "text-font-weight",
1769
+ "text-line-height"
1770
+ ],
1771
+ footer: [
1772
+ "accent",
1773
+ "accent-width",
1774
+ "gap",
1775
+ "icon",
1776
+ "icon-size",
1777
+ "padding",
1778
+ "surface",
1779
+ "text",
1780
+ "text-font-family",
1781
+ "text-font-size",
1782
+ "text-font-weight",
1783
+ "text-line-height"
1784
+ ]
1785
+ };
1786
+ var RENAMES3 = {
1787
+ radiobutton: Object.fromEntries(
1788
+ RADIOBUTTON_SUFFIXES.map((s) => [`--radiobutton-active-${s}`, `--radiobutton-selected-${s}`])
1789
+ ),
1790
+ tabbar: Object.fromEntries(
1791
+ TABBAR_SUFFIXES.map((s) => [`--tabbar-active-${s}`, `--tabbar-selected-${s}`])
1792
+ ),
1793
+ sidenavigation: Object.fromEntries(
1794
+ Object.entries(SIDENAVIGATION_SUFFIXES).flatMap(
1795
+ ([part, suffixes]) => suffixes.map((s) => [
1796
+ `--sidenavigation-${part}-active-${s}`,
1797
+ `--sidenavigation-${part}-selected-${s}`
1798
+ ])
1799
+ )
1800
+ )
1801
+ };
1802
+ var componentMigration_2026_09_13_selectedState = {
1803
+ id: "2026-09-13-selected-state",
1804
+ fromVersion: 27,
1805
+ toVersion: 28,
1806
+ appliesTo: "component-config",
1807
+ apply(rawVars, meta) {
1808
+ const renames = meta.component ? RENAMES3[meta.component] : void 0;
1809
+ if (!renames) return { ...rawVars };
1810
+ const out = {};
1811
+ for (const [key, value] of Object.entries(rawVars)) {
1812
+ out[renames[key] ?? key] = value;
1813
+ }
1814
+ return out;
1815
+ }
1816
+ };
1817
+
1818
+ // src/editor/core/themes/migrations/2026-09-13-hairline.ts
1819
+ var COLLAPSIBLESECTION_SUFFIXES = [
1820
+ "surface",
1821
+ "hairline-color",
1822
+ "padding",
1823
+ "label",
1824
+ "label-font-family",
1825
+ "label-font-size",
1826
+ "label-font-weight",
1827
+ "label-line-height",
1828
+ "icon",
1829
+ "icon-size"
1830
+ ];
1831
+ var COLLAPSIBLESECTION_STATES = ["default", "hover"];
1832
+ var RENAMES4 = {
1833
+ dialog: {
1834
+ "--dialog-header-divider": "--dialog-header-hairline-color",
1835
+ "--dialog-header-divider-width": "--dialog-header-hairline-width",
1836
+ "--dialog-footer-divider": "--dialog-footer-hairline-color",
1837
+ "--dialog-footer-divider-width": "--dialog-footer-hairline-width"
1838
+ },
1839
+ table: {
1840
+ "--table-default-header-divider": "--table-default-header-hairline-color",
1841
+ "--table-default-header-divider-width": "--table-default-header-hairline-width",
1842
+ "--table-default-row-divider": "--table-default-row-hairline-color",
1843
+ "--table-default-row-divider-width": "--table-default-row-hairline-width",
1844
+ "--table-default-column-divider": "--table-default-column-hairline-color",
1845
+ "--table-default-column-divider-width": "--table-default-column-hairline-width"
1846
+ },
1847
+ tabbar: {
1848
+ "--tabbar-bar-divider": "--tabbar-bar-hairline-color",
1849
+ "--tabbar-bar-divider-thickness": "--tabbar-bar-hairline-width"
1850
+ },
1851
+ segmentedcontrol: {
1852
+ "--segmentedcontrol-divider-color": "--segmentedcontrol-hairline-color",
1853
+ "--segmentedcontrol-divider-thickness": "--segmentedcontrol-hairline-width",
1854
+ "--segmentedcontrol-divider-inset": "--segmentedcontrol-hairline-inset",
1855
+ "--segmentedcontrol-small-divider-thickness": "--segmentedcontrol-small-hairline-width",
1856
+ "--segmentedcontrol-small-divider-inset": "--segmentedcontrol-small-hairline-inset"
1857
+ },
1858
+ collapsiblesection: {
1859
+ ...Object.fromEntries(
1860
+ COLLAPSIBLESECTION_STATES.flatMap((state) => [
1861
+ ...COLLAPSIBLESECTION_SUFFIXES.map((s) => [
1862
+ `--collapsiblesection-divider-${state}-${s}`,
1863
+ `--collapsiblesection-hairline-${state}-${s}`
1864
+ ]),
1865
+ [
1866
+ `--collapsiblesection-divider-${state}-hairline-thickness`,
1867
+ `--collapsiblesection-hairline-${state}-hairline-width`
1868
+ ]
1869
+ ])
1870
+ ),
1871
+ "--collapsiblesection-divider-expanded-padding": "--collapsiblesection-hairline-expanded-padding"
1872
+ },
1873
+ sectiondivider: {
1874
+ "--sectiondivider-lg-hairline-thickness": "--sectiondivider-lg-hairline-width",
1875
+ "--sectiondivider-md-hairline-thickness": "--sectiondivider-md-hairline-width",
1876
+ "--sectiondivider-sm-hairline-thickness": "--sectiondivider-sm-hairline-width"
1877
+ }
1878
+ };
1879
+ var componentMigration_2026_09_13_hairline = {
1880
+ id: "2026-09-13-hairline",
1881
+ fromVersion: 28,
1882
+ toVersion: 29,
1883
+ appliesTo: "component-config",
1884
+ apply(rawVars, meta) {
1885
+ const renames = meta.component ? RENAMES4[meta.component] : void 0;
1886
+ if (!renames) return { ...rawVars };
1887
+ const out = {};
1888
+ for (const [key, value] of Object.entries(rawVars)) {
1889
+ out[renames[key] ?? key] = value;
1890
+ }
1891
+ return out;
1892
+ }
1893
+ };
1894
+
1895
+ // src/editor/core/themes/migrations/2026-09-13-indicator.ts
1896
+ var SIDENAVIGATION_PARTS = ["title", "section", "item", "footer"];
1897
+ var SIDENAVIGATION_STATES = ["default", "hover", "selected"];
1898
+ var CALLOUT_VARIANTS = ["info", "success", "warning", "danger"];
1899
+ var RENAMES5 = {
1900
+ sidenavigation: Object.fromEntries(
1901
+ SIDENAVIGATION_PARTS.flatMap(
1902
+ (part) => SIDENAVIGATION_STATES.flatMap((state) => [
1903
+ [
1904
+ `--sidenavigation-${part}-${state}-accent`,
1905
+ `--sidenavigation-${part}-${state}-indicator`
1906
+ ],
1907
+ [
1908
+ `--sidenavigation-${part}-${state}-accent-width`,
1909
+ `--sidenavigation-${part}-${state}-indicator-width`
1910
+ ]
1911
+ ])
1912
+ )
1913
+ ),
1914
+ callout: Object.fromEntries(
1915
+ CALLOUT_VARIANTS.map((v) => [
1916
+ `--callout-${v}-accent-width`,
1917
+ `--callout-${v}-indicator-width`
1918
+ ])
1919
+ )
1920
+ };
1921
+ var componentMigration_2026_09_13_indicator = {
1922
+ id: "2026-09-13-indicator",
1923
+ fromVersion: 29,
1924
+ toVersion: 30,
1925
+ appliesTo: "component-config",
1926
+ apply(rawVars, meta) {
1927
+ const renames = meta.component ? RENAMES5[meta.component] : void 0;
1928
+ if (!renames) return { ...rawVars };
1929
+ const out = {};
1930
+ for (const [key, value] of Object.entries(rawVars)) {
1931
+ out[renames[key] ?? key] = value;
1932
+ }
1933
+ return out;
1934
+ }
1935
+ };
1936
+
1937
+ // src/editor/core/themes/migrations/2026-09-13-sectiondivider-surface.ts
1938
+ var SECTIONDIVIDER_VARIANTS = ["lg", "md", "sm"];
1939
+ var RENAMES6 = {
1940
+ sectiondivider: Object.fromEntries(
1941
+ SECTIONDIVIDER_VARIANTS.map((v) => [
1942
+ `--sectiondivider-${v}-background`,
1943
+ `--sectiondivider-${v}-surface`
1944
+ ])
1945
+ )
1946
+ };
1947
+ var componentMigration_2026_09_13_sectiondividerSurface = {
1948
+ id: "2026-09-13-sectiondivider-surface",
1949
+ fromVersion: 30,
1950
+ toVersion: 31,
1951
+ appliesTo: "component-config",
1952
+ apply(rawVars, meta) {
1953
+ const renames = meta.component ? RENAMES6[meta.component] : void 0;
1954
+ if (!renames) return { ...rawVars };
1955
+ const out = {};
1956
+ for (const [key, value] of Object.entries(rawVars)) {
1957
+ out[renames[key] ?? key] = value;
1958
+ }
1959
+ return out;
1960
+ }
1961
+ };
1962
+
1963
+ // src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
1964
+ var RENAMES7 = {
1965
+ cornerbadge: {
1966
+ "--corner-badge-margin": "--cornerbadge-margin",
1967
+ "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
1968
+ "--corner-badge-inner-radius": "--cornerbadge-inner-radius",
1969
+ "--corner-badge-h-axis-radius": "--cornerbadge-h-axis-radius",
1970
+ "--corner-badge-v-axis-radius": "--cornerbadge-v-axis-radius",
1971
+ "--corner-badge-padding": "--cornerbadge-padding",
1972
+ "--corner-badge-text-font-family": "--cornerbadge-text-font-family",
1973
+ "--corner-badge-text-font-size": "--cornerbadge-text-font-size",
1974
+ "--corner-badge-text-font-weight": "--cornerbadge-text-font-weight",
1975
+ "--corner-badge-text-line-height": "--cornerbadge-text-line-height",
1976
+ "--corner-badge-primary-surface": "--cornerbadge-primary-surface",
1977
+ "--corner-badge-primary-border": "--cornerbadge-primary-border",
1978
+ "--corner-badge-primary-text": "--cornerbadge-primary-text",
1979
+ "--corner-badge-accent-surface": "--cornerbadge-accent-surface",
1980
+ "--corner-badge-accent-border": "--cornerbadge-accent-border",
1981
+ "--corner-badge-accent-text": "--cornerbadge-accent-text",
1982
+ "--corner-badge-neutral-surface": "--cornerbadge-neutral-surface",
1983
+ "--corner-badge-neutral-border": "--cornerbadge-neutral-border",
1984
+ "--corner-badge-neutral-text": "--cornerbadge-neutral-text",
1985
+ "--corner-badge-alternate-surface": "--cornerbadge-alternate-surface",
1986
+ "--corner-badge-alternate-border": "--cornerbadge-alternate-border",
1987
+ "--corner-badge-alternate-text": "--cornerbadge-alternate-text",
1988
+ "--corner-badge-canvas-surface": "--cornerbadge-canvas-surface",
1989
+ "--corner-badge-canvas-border": "--cornerbadge-canvas-border",
1990
+ "--corner-badge-canvas-text": "--cornerbadge-canvas-text",
1991
+ "--corner-badge-special-surface": "--cornerbadge-special-surface",
1992
+ "--corner-badge-special-border": "--cornerbadge-special-border",
1993
+ "--corner-badge-special-text": "--cornerbadge-special-text",
1994
+ "--corner-badge-success-surface": "--cornerbadge-success-surface",
1995
+ "--corner-badge-success-border": "--cornerbadge-success-border",
1996
+ "--corner-badge-success-text": "--cornerbadge-success-text",
1997
+ "--corner-badge-warning-surface": "--cornerbadge-warning-surface",
1998
+ "--corner-badge-warning-border": "--cornerbadge-warning-border",
1999
+ "--corner-badge-warning-text": "--cornerbadge-warning-text",
2000
+ "--corner-badge-danger-surface": "--cornerbadge-danger-surface",
2001
+ "--corner-badge-danger-border": "--cornerbadge-danger-border",
2002
+ "--corner-badge-danger-text": "--cornerbadge-danger-text",
2003
+ "--corner-badge-info-surface": "--cornerbadge-info-surface",
2004
+ "--corner-badge-info-border": "--cornerbadge-info-border",
2005
+ "--corner-badge-info-text": "--cornerbadge-info-text"
2006
+ }
2007
+ };
2008
+ var componentMigration_2026_09_13_cornerbadgePrefix = {
2009
+ id: "2026-09-13-cornerbadge-prefix",
2010
+ fromVersion: 31,
2011
+ toVersion: 32,
2012
+ appliesTo: "component-config",
2013
+ apply(rawVars, meta) {
2014
+ const renames = meta.component ? RENAMES7[meta.component] : void 0;
2015
+ if (!renames) return { ...rawVars };
2016
+ const out = {};
2017
+ for (const [key, value] of Object.entries(rawVars)) {
2018
+ out[renames[key] ?? key] = value;
2019
+ }
2020
+ return out;
2021
+ }
2022
+ };
2023
+
2024
+ // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
2025
+ var RENAMES8 = {
2026
+ toggle: {
2027
+ "--toggle-label-text": "--toggle-label",
2028
+ "--toggle-disabled-label-text": "--toggle-disabled-label"
2029
+ }
2030
+ };
2031
+ var componentMigration_2026_09_13_toggleLabel = {
2032
+ id: "2026-09-13-toggle-label",
2033
+ fromVersion: 32,
2034
+ toVersion: 33,
2035
+ appliesTo: "component-config",
2036
+ apply(rawVars, meta) {
2037
+ const renames = meta.component ? RENAMES8[meta.component] : void 0;
2038
+ if (!renames) return { ...rawVars };
2039
+ const out = {};
2040
+ for (const [key, value] of Object.entries(rawVars)) {
2041
+ out[renames[key] ?? key] = value;
2042
+ }
2043
+ return out;
2044
+ }
2045
+ };
2046
+
2047
+ // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
2048
+ var RENAMES9 = {
2049
+ collapsiblesection: {
2050
+ "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
2051
+ "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
2052
+ "--collapsiblesection-container-expanded-surface": "--collapsiblesection-container-open-surface",
2053
+ "--collapsiblesection-container-expanded-padding": "--collapsiblesection-container-open-padding"
2054
+ }
2055
+ };
2056
+ var componentMigration_2026_09_13_collapsiblesectionOpen = {
2057
+ id: "2026-09-13-collapsiblesection-open",
2058
+ fromVersion: 33,
2059
+ toVersion: 34,
2060
+ appliesTo: "component-config",
2061
+ apply(rawVars, meta) {
2062
+ const renames = meta.component ? RENAMES9[meta.component] : void 0;
2063
+ if (!renames) return { ...rawVars };
2064
+ const out = {};
2065
+ for (const [key, value] of Object.entries(rawVars)) {
2066
+ out[renames[key] ?? key] = value;
2067
+ }
2068
+ return out;
2069
+ }
2070
+ };
2071
+
2072
+ // src/editor/core/themes/migrations/2026-09-13-badge-brand.ts
2073
+ var BADGE_SUFFIXES = [
2074
+ "surface",
2075
+ "text",
2076
+ "border",
2077
+ "text-font-family",
2078
+ "text-font-size",
2079
+ "text-font-weight",
2080
+ "text-line-height",
2081
+ "border-width",
2082
+ "radius",
2083
+ "padding",
2084
+ "shadow",
2085
+ "blur",
2086
+ "icon-size"
2087
+ ];
2088
+ var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
2089
+ var RENAMES10 = {
2090
+ badge: Object.fromEntries(
2091
+ BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
2092
+ ),
2093
+ cornerbadge: Object.fromEntries(
2094
+ CORNERBADGE_SUFFIXES.map((s) => [`--cornerbadge-primary-${s}`, `--cornerbadge-brand-${s}`])
2095
+ )
2096
+ };
2097
+ var componentMigration_2026_09_13_badgeBrand = {
2098
+ id: "2026-09-13-badge-brand",
2099
+ fromVersion: 34,
2100
+ toVersion: 35,
2101
+ appliesTo: "component-config",
2102
+ apply(rawVars, meta) {
2103
+ const renames = meta.component ? RENAMES10[meta.component] : void 0;
2104
+ if (!renames) return { ...rawVars };
2105
+ const out = {};
2106
+ for (const [key, value] of Object.entries(rawVars)) {
2107
+ out[renames[key] ?? key] = value;
2108
+ }
2109
+ return out;
2110
+ }
2111
+ };
2112
+
1708
2113
  // src/editor/core/themes/migrations/index.ts
1709
2114
  var MIGRATIONS = [
1710
2115
  colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1741,7 +2146,15 @@ var MIGRATIONS = [
1741
2146
  componentMigration_2026_09_01_gateSuffixEnabled,
1742
2147
  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
1743
2148
  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys,
1744
- componentMigration_2026_09_07_strokeRoleRenames
2149
+ componentMigration_2026_09_07_strokeRoleRenames,
2150
+ componentMigration_2026_09_13_selectedState,
2151
+ componentMigration_2026_09_13_hairline,
2152
+ componentMigration_2026_09_13_indicator,
2153
+ componentMigration_2026_09_13_sectiondividerSurface,
2154
+ componentMigration_2026_09_13_cornerbadgePrefix,
2155
+ componentMigration_2026_09_13_toggleLabel,
2156
+ componentMigration_2026_09_13_collapsiblesectionOpen,
2157
+ componentMigration_2026_09_13_badgeBrand
1745
2158
  ];
1746
2159
  function countFor(kind) {
1747
2160
  return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -2113,16 +2526,21 @@ function renameSectionDividerObjectSlots(objectPart) {
2113
2526
  }
2114
2527
  }
2115
2528
  if (isFamilyGradient) continue;
2529
+ const backgroundVariant = SIZE_VARIANTS.find((v) => key === `--sectiondivider-${v}-background`);
2530
+ if (backgroundVariant) {
2531
+ out[`--sectiondivider-${backgroundVariant}-surface`] = value;
2532
+ continue;
2533
+ }
2116
2534
  out[key] = value;
2117
2535
  }
2118
2536
  if (canvasGradient !== void 0) {
2119
2537
  for (const v of SIZE_VARIANTS) {
2120
- out[`--sectiondivider-${v}-background`] = canvasGradient;
2538
+ out[`--sectiondivider-${v}-surface`] = canvasGradient;
2121
2539
  }
2122
2540
  }
2123
2541
  return out;
2124
2542
  }
2125
- var SECTIONDIVIDER_VARIANTS = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
2543
+ var SECTIONDIVIDER_VARIANTS2 = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
2126
2544
  function synthesizeSectionDividerGradients(stringPart, objectPart) {
2127
2545
  const GRADIENT_ANGLE_TOKENS = {
2128
2546
  "--gradient-angle-horizontal": 90,
@@ -2154,7 +2572,7 @@ function synthesizeSectionDividerGradients(stringPart, objectPart) {
2154
2572
  if (mix) return { color: mix[1], opacity: parseFloat(mix[2]) };
2155
2573
  return null;
2156
2574
  };
2157
- for (const v of SECTIONDIVIDER_VARIANTS) {
2575
+ for (const v of SECTIONDIVIDER_VARIANTS2) {
2158
2576
  const slot = `--sectiondivider-${v}-gradient`;
2159
2577
  if (slot in objectPart) continue;
2160
2578
  const angleKey = `${slot}-angle`;
@@ -3157,7 +3575,7 @@ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
3157
3575
  };
3158
3576
 
3159
3577
  // vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
3160
- var RENAMES3 = [
3578
+ var RENAMES11 = [
3161
3579
  ["--line-height-xs", "--line-height-none"],
3162
3580
  ["--line-height-sm", "--line-height-tighter"],
3163
3581
  ["--line-height-md", "--line-height-normal"],
@@ -3177,7 +3595,7 @@ var tokensCssMigration_2026_07_20_lineHeightRename = {
3177
3595
  description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
3178
3596
  apply(css) {
3179
3597
  let out = css;
3180
- for (const [oldName, newName] of RENAMES3) out = renameToken2(out, oldName, newName);
3598
+ for (const [oldName, newName] of RENAMES11) out = renameToken2(out, oldName, newName);
3181
3599
  out = removeToken(out, "--line-height-xl");
3182
3600
  out = ensureScale(out, {
3183
3601
  anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
@@ -3410,7 +3828,7 @@ var tokensCssMigration_2026_08_27_editorialLargeSteps = {
3410
3828
  };
3411
3829
 
3412
3830
  // vite-plugin/tokensCssMigrations/migrations/2026-09-01-scrim-rename.ts
3413
- var RENAMES4 = [
3831
+ var RENAMES12 = [
3414
3832
  ["--overlay-low", "--scrim-low"],
3415
3833
  ["--overlay-high", "--scrim-high"],
3416
3834
  ["--overlay", "--scrim"]
@@ -3421,7 +3839,7 @@ var tokensCssMigration_2026_09_01_scrimRename = {
3421
3839
  description: "Rename --overlay-{low,base,high} to --scrim-*; a scrim dims what is behind it",
3422
3840
  apply(css) {
3423
3841
  let out = css;
3424
- for (const [oldName, newName] of RENAMES4) out = renameToken2(out, oldName, newName);
3842
+ for (const [oldName, newName] of RENAMES12) out = renameToken2(out, oldName, newName);
3425
3843
  return out;
3426
3844
  }
3427
3845
  };
@@ -3507,12 +3925,35 @@ function validateTokensCss(input) {
3507
3925
  return missing.sort((a, b) => a.token.localeCompare(b.token));
3508
3926
  }
3509
3927
 
3510
- // vite-plugin/themeFileApi.ts
3928
+ // vite-plugin/buildChecks.ts
3929
+ var import_node_path = __toESM(require("path"), 1);
3511
3930
  var import_node_url = require("url");
3512
3931
  var import_meta = {};
3932
+ var runPackageChecks = async (root) => {
3933
+ const runner = import_node_path.default.resolve(import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)), "..", "bin", "lib", "buildChecks.mjs");
3934
+ const { runBuildChecks } = await import((0, import_node_url.pathToFileURL)(runner).href);
3935
+ return runBuildChecks({ root });
3936
+ };
3937
+ async function checkBeforeBuild({
3938
+ root,
3939
+ logger,
3940
+ run = runPackageChecks
3941
+ }) {
3942
+ const result = await run(root);
3943
+ if (result.errors > 0) {
3944
+ logger.error(result.report);
3945
+ return `live-tokens: the design checks found ${result.errors} error(s). Run the live-tokens-check-compliance skill, or \`npx live-tokens check-page\` and \`npx live-tokens check-component\`, to repair them.`;
3946
+ }
3947
+ (result.warnings > 0 ? logger.warn : logger.info).call(logger, result.report);
3948
+ return null;
3949
+ }
3950
+
3951
+ // vite-plugin/themeFileApi.ts
3952
+ var import_node_url2 = require("url");
3953
+ var import_meta2 = {};
3513
3954
  var PKG_VERSION = (() => {
3514
3955
  try {
3515
- let dir = import_path5.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
3956
+ let dir = import_path5.default.dirname((0, import_node_url2.fileURLToPath)(import_meta2.url));
3516
3957
  for (let i = 0; i < 4; i++) {
3517
3958
  const p = import_path5.default.join(dir, "package.json");
3518
3959
  if (import_fs5.default.existsSync(p)) {
@@ -3570,14 +4011,14 @@ function themeFileApi(opts) {
3570
4011
  const API_BASE = opts.apiBase ?? "/api/live-tokens";
3571
4012
  const consumerComponentDirs = opts.componentsSrcDir ? [import_path5.default.resolve(opts.componentsSrcDir)] : [import_path5.default.resolve("src/components"), import_path5.default.resolve("src/system/components")];
3572
4013
  const packageComponentsDir = import_path5.default.resolve(
3573
- import_path5.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
4014
+ import_path5.default.dirname((0, import_node_url2.fileURLToPath)(import_meta2.url)),
3574
4015
  "..",
3575
4016
  "src",
3576
4017
  "system",
3577
4018
  "components"
3578
4019
  );
3579
4020
  const packageDataDir = testPackageDataDir() ?? import_path5.default.resolve(
3580
- import_path5.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
4021
+ import_path5.default.dirname((0, import_node_url2.fileURLToPath)(import_meta2.url)),
3581
4022
  "..",
3582
4023
  "src",
3583
4024
  "live-tokens",
@@ -4711,15 +5152,14 @@ data: ${JSON.stringify(state)}
4711
5152
  // spelled "no override" that way (normalizeTheme.ts's pointer-
4712
5153
  // resolution loop treats it identically), so it always meant *this
4713
5154
  // install's* default, not something the bundle carries. The
4714
- // completeness fill (Wave 2 of docs/plans/theme-completeness.md) relies
4715
- // on that fall-through: without it, `readComponentConfig(comp,
4716
- // 'default')` answers undefined for every component (no bundle ever
4717
- // carries a `<comp>/default` entry), the fill loop no-ops 25 times, and
4718
- // an incomplete bundle stays incomplete forever — exactly the drift RJC
4719
- // 10 exists to prevent.
5155
+ // completeness fill relies on that fall-through: without it,
5156
+ // `readComponentConfig(comp, 'default')` answers undefined for every
5157
+ // component (no bundle ever carries a `<comp>/default` entry), the
5158
+ // fill loop no-ops 25 times, and an incomplete bundle stays incomplete
5159
+ // forever.
4720
5160
  readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`] ?? (name === "default" ? readComponentConfig(comp, "default") : void 0),
4721
5161
  // Installed components are a property of this install, not of the
4722
- // bundle being imported, so the completeness fill (Wave 2) uses the
5162
+ // bundle being imported, so the completeness fill uses the
4723
5163
  // same list the disk resolver does.
4724
5164
  listComponentNames,
4725
5165
  normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)
@@ -4930,6 +5370,8 @@ data: ${JSON.stringify(state)}
4930
5370
  { method: "DELETE", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed }
4931
5371
  ];
4932
5372
  const isEditorOwnedJson = (file) => file.endsWith(".json") && import_path5.default.resolve(file).startsWith(dataDirs.dataDir + import_path5.default.sep);
5373
+ let buildLogger = null;
5374
+ let buildChecked = false;
4933
5375
  return {
4934
5376
  name: "theme-file-api",
4935
5377
  config() {
@@ -4942,6 +5384,15 @@ data: ${JSON.stringify(state)}
4942
5384
  server: { watch: { ignored: [isEditorOwnedJson] } }
4943
5385
  };
4944
5386
  },
5387
+ configResolved(config) {
5388
+ buildLogger = config.command === "build" && opts.checks !== false ? config.logger : null;
5389
+ },
5390
+ async buildStart() {
5391
+ if (!buildLogger || buildChecked) return;
5392
+ buildChecked = true;
5393
+ const failure = await checkBeforeBuild({ root: process.cwd(), logger: buildLogger });
5394
+ if (failure) this.error(failure);
5395
+ },
4945
5396
  configureServer(server) {
4946
5397
  legacyLayout = detectLegacyLayout({
4947
5398
  dataDir: dataDirs.dataDir,
@@ -13,6 +13,7 @@ interface ThemeFileApiOptions {
13
13
  themesDir?: string;
14
14
  componentsSrcDir?: string;
15
15
  autoMigrate?: boolean;
16
+ checks?: boolean;
16
17
  }
17
18
  declare function themeFileApi(opts: ThemeFileApiOptions): Plugin;
18
19
 
@@ -13,6 +13,7 @@ interface ThemeFileApiOptions {
13
13
  themesDir?: string;
14
14
  componentsSrcDir?: string;
15
15
  autoMigrate?: boolean;
16
+ checks?: boolean;
16
17
  }
17
18
  declare function themeFileApi(opts: ThemeFileApiOptions): Plugin;
18
19