@motion-proto/live-tokens 0.52.1 → 0.53.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 (60) hide show
  1. package/.claude/skills/live-tokens-adjust-shape-space/SKILL.md +7 -1
  2. package/CHANGELOG.md +63 -0
  3. package/bin/adjust.mjs +16 -39
  4. package/bin/generate-theme.mjs +20 -6
  5. package/dist-plugin/adjust/index.cjs +781 -21
  6. package/dist-plugin/adjust/index.d.cts +2 -1
  7. package/dist-plugin/adjust/index.d.ts +2 -1
  8. package/dist-plugin/adjust/index.js +43 -21
  9. package/dist-plugin/{chunk-6OZFXIQI.js → chunk-232GZGQU.js} +207 -12
  10. package/dist-plugin/chunk-NE6N66EE.js +753 -0
  11. package/dist-plugin/{chunk-JIGIIE5P.js → chunk-PB2JTK2H.js} +123 -0
  12. package/dist-plugin/generateColorsAndType/index.cjs +48 -32
  13. package/dist-plugin/generateColorsAndType/index.d.cts +2 -1
  14. package/dist-plugin/generateColorsAndType/index.d.ts +2 -1
  15. package/dist-plugin/generateColorsAndType/index.js +7 -773
  16. package/dist-plugin/{themeTypes-Dky03HL9.d.cts → index-DpTIRZ2H.d.cts} +49 -21
  17. package/dist-plugin/{themeTypes-Dky03HL9.d.ts → index-DpTIRZ2H.d.ts} +49 -21
  18. package/dist-plugin/index.cjs +1159 -85
  19. package/dist-plugin/index.js +102 -80
  20. package/dist-plugin/migrateData/index.cjs +956 -14
  21. package/dist-plugin/migrateData/index.js +10 -3
  22. package/package.json +6 -4
  23. package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte +9 -23
  24. package/src/editor/component-editor/scaffolding/LinkedBlock.svelte +8 -8
  25. package/src/editor/core/components/adjustAliases.ts +49 -22
  26. package/src/editor/core/components/aliasKinds.ts +7 -2
  27. package/src/editor/core/components/componentConfigService.ts +1 -1
  28. package/src/editor/core/store/editorStore.ts +7 -197
  29. package/src/editor/core/store/editorTypes.ts +9 -30
  30. package/src/editor/core/themes/lookSummary.ts +3 -25
  31. package/src/editor/core/themes/migrateComponentConfig.ts +205 -0
  32. package/src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts +1 -1
  33. package/src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts +1 -1
  34. package/src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts +1 -1
  35. package/src/editor/core/themes/parsers/gradient.ts +211 -0
  36. package/src/editor/core/themes/slices/gradients.ts +5 -58
  37. package/src/editor/core/themes/themeService.ts +22 -9
  38. package/src/editor/core/themes/themeTypes.ts +71 -21
  39. package/src/editor/docs/content/themes-workflow.md +9 -11
  40. package/src/editor/docs/content/where-themes-live.md +2 -2
  41. package/src/editor/docs/content.generated.ts +2 -2
  42. package/src/editor/index.ts +1 -0
  43. package/src/editor/styles/ui-editor.css +5 -2
  44. package/src/editor/ui/PaletteEditor.svelte +30 -15
  45. package/src/editor/ui/ThemePanel.svelte +24 -15
  46. package/src/editor/ui/Toggle.svelte +22 -22
  47. package/src/editor/ui/UIPillButton.svelte +1 -1
  48. package/src/editor/ui/UIReveal.svelte +47 -0
  49. package/src/editor/ui/UISquareButton.svelte +1 -1
  50. package/src/editor/ui/colors/ColorsTab.svelte +4 -5
  51. package/src/editor/ui/palette/OverridesPanel.svelte +4 -3
  52. package/src/editor/ui/palette/PaletteJumpButton.svelte +3 -3
  53. package/src/editor/ui/palette/ScaleCurveEditor.svelte +3 -2
  54. package/src/live-tokens/data/themes/autumn.json +77 -41
  55. package/src/live-tokens/data/themes/halloween.json +53 -52
  56. package/src/live-tokens/data/themes/midnight-study.json +136 -68
  57. package/src/live-tokens/data/themes/ocean.json +77 -41
  58. package/src/live-tokens/data/themes/royal-velvet.json +43 -42
  59. package/src/live-tokens/data/themes/spring-meadow.json +86 -52
  60. package/src/live-tokens/data/themes/sunset.json +101 -40
@@ -0,0 +1,753 @@
1
+ // src/editor/core/themes/migrations/2026-04-24-legacy-keys-and-bg-to-canvas.ts
2
+ var LEGACY_KEY_RENAMES = {
3
+ "--empty": "--page-bg",
4
+ "--empty-attachment": "--page-bg-attachment",
5
+ // Orphan exports dropped from tokens.css; no new home — silently discard.
6
+ "--border-neutral": null,
7
+ // Shadow cleanup: these five tokens were removed (low/zero consumers,
8
+ // aesthetic drift). Dialog migrated onto --shadow-2xl; focus rings moved
9
+ // to their own --ring-focus-* namespace, which themes don't carry by
10
+ // default — tokens.css provides the canonical values.
11
+ "--shadow-app": null,
12
+ "--shadow-card": null,
13
+ "--shadow-overlay": null,
14
+ "--shadow-focus": null,
15
+ "--shadow-glow-green": null
16
+ };
17
+ var BG_TO_CANVAS_PREFIXES = ["--color-bg-", "--surface-bg", "--border-bg", "--text-bg"];
18
+ function migrateBgToCanvas(rawVars) {
19
+ for (const oldKey of Object.keys(rawVars)) {
20
+ for (const prefix of BG_TO_CANVAS_PREFIXES) {
21
+ if (!oldKey.startsWith(prefix)) continue;
22
+ const suffix = oldKey.slice(prefix.length);
23
+ if (suffix && !suffix.startsWith("-")) continue;
24
+ const newKey = prefix.replace("-bg", "-canvas") + suffix;
25
+ if (newKey === oldKey) continue;
26
+ const value = rawVars[oldKey];
27
+ delete rawVars[oldKey];
28
+ if (!(newKey in rawVars)) rawVars[newKey] = value;
29
+ break;
30
+ }
31
+ }
32
+ }
33
+ function migrateLegacyKeys(rawVars) {
34
+ for (const [oldKey, newKey] of Object.entries(LEGACY_KEY_RENAMES)) {
35
+ if (!(oldKey in rawVars)) continue;
36
+ const value = rawVars[oldKey];
37
+ delete rawVars[oldKey];
38
+ if (newKey && !(newKey in rawVars)) rawVars[newKey] = value;
39
+ }
40
+ migrateBgToCanvas(rawVars);
41
+ }
42
+ var colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas = {
43
+ id: "2026-04-24-legacy-keys-and-bg-to-canvas",
44
+ fromVersion: 0,
45
+ toVersion: 1,
46
+ appliesTo: "colors-and-type",
47
+ apply(rawVars) {
48
+ const out = { ...rawVars };
49
+ migrateLegacyKeys(out);
50
+ return out;
51
+ }
52
+ };
53
+
54
+ // src/editor/core/themes/migrations/2026-04-24-component-prefix-and-suffix-renames.ts
55
+ var COMPONENT_PREFIX_RENAMES = {
56
+ "--segment-": "--segmentedcontrol-",
57
+ "--collapsible-": "--collapsiblesection-",
58
+ "--progress-": "--progressbar-",
59
+ "--section-divider-": "--sectiondivider-",
60
+ "--radio-": "--radiobutton-",
61
+ "--inline-edit-": "--inlineeditactions-"
62
+ };
63
+ var COMPONENT_SUFFIX_RENAMES = {
64
+ progressbar: [["-track-bg", "-track-surface"]],
65
+ inlineeditactions: [
66
+ ["-bg-hover", "-hover-surface"],
67
+ ["-bg", "-surface"]
68
+ ]
69
+ };
70
+ var componentMigration_2026_04_24_prefixAndSuffixRenames = {
71
+ id: "2026-04-24-component-prefix-and-suffix-renames",
72
+ fromVersion: 0,
73
+ toVersion: 1,
74
+ appliesTo: "component-config",
75
+ apply(rawVars, meta) {
76
+ const component = meta.component ?? "";
77
+ const out = {};
78
+ const suffixRules = COMPONENT_SUFFIX_RENAMES[component] ?? [];
79
+ for (const [oldKey, value] of Object.entries(rawVars)) {
80
+ let key = oldKey;
81
+ if (key === "--detail-nav-bg") key = "--detailnav-surface";
82
+ for (const [oldPrefix, newPrefix] of Object.entries(COMPONENT_PREFIX_RENAMES)) {
83
+ if (key.startsWith(oldPrefix)) {
84
+ key = newPrefix + key.slice(oldPrefix.length);
85
+ break;
86
+ }
87
+ }
88
+ for (const [oldSuffix, newSuffix] of suffixRules) {
89
+ if (key.endsWith(oldSuffix)) {
90
+ key = key.slice(0, -oldSuffix.length) + newSuffix;
91
+ break;
92
+ }
93
+ }
94
+ if (!(key in out)) out[key] = value;
95
+ }
96
+ return out;
97
+ }
98
+ };
99
+
100
+ // src/editor/core/themes/migrations/2026-04-27-segmentedcontrol-disabled-flatten.ts
101
+ var OPTION_DISABLED_PREFIX = "--segmentedcontrol-option-disabled-";
102
+ var DISABLED_PREFIX = "--segmentedcontrol-disabled-";
103
+ var SELECTED_DISABLED_PREFIX = "--segmentedcontrol-selected-disabled-";
104
+ var SELECTED_HOVER_PREFIX = "--segmentedcontrol-selected-hover-";
105
+ var componentMigration_2026_04_27_segmentedcontrolDisabledFlatten = {
106
+ id: "2026-04-27-segmentedcontrol-disabled-flatten",
107
+ fromVersion: 1,
108
+ toVersion: 2,
109
+ appliesTo: "component-config",
110
+ apply(rawVars, meta) {
111
+ if (meta.component !== "segmentedcontrol") return { ...rawVars };
112
+ const out = {};
113
+ for (const [oldKey, value] of Object.entries(rawVars)) {
114
+ let key = oldKey;
115
+ if (key.startsWith(SELECTED_DISABLED_PREFIX)) continue;
116
+ if (key.startsWith(SELECTED_HOVER_PREFIX)) continue;
117
+ if (key.startsWith(OPTION_DISABLED_PREFIX)) {
118
+ key = DISABLED_PREFIX + key.slice(OPTION_DISABLED_PREFIX.length);
119
+ }
120
+ if (!(key in out)) out[key] = value;
121
+ }
122
+ return out;
123
+ }
124
+ };
125
+
126
+ // src/editor/core/themes/migrations/2026-05-08-collapsiblesection-variant-namespace.ts
127
+ var PREFIX = "--collapsiblesection-";
128
+ var STATE_NAMES = /* @__PURE__ */ new Set(["default", "hover", "active", "expanded"]);
129
+ var componentMigration_2026_05_08_collapsiblesectionVariantNamespace = {
130
+ id: "2026-05-08-collapsiblesection-variant-namespace",
131
+ fromVersion: 2,
132
+ toVersion: 3,
133
+ appliesTo: "component-config",
134
+ apply(rawVars, meta) {
135
+ if (meta.component !== "collapsiblesection") return { ...rawVars };
136
+ const out = {};
137
+ for (const [oldKey, value] of Object.entries(rawVars)) {
138
+ let key = oldKey;
139
+ if (key.startsWith(PREFIX)) {
140
+ const tail = key.slice(PREFIX.length);
141
+ const firstSegment = tail.split("-", 1)[0];
142
+ if (STATE_NAMES.has(firstSegment)) {
143
+ key = `${PREFIX}container-${tail}`;
144
+ }
145
+ }
146
+ if (!(key in out)) out[key] = value;
147
+ }
148
+ return out;
149
+ }
150
+ };
151
+
152
+ // src/editor/core/themes/migrations/2026-05-08-collapsiblesection-frame-and-cleanup.ts
153
+ var PFX = "--collapsiblesection-";
154
+ var componentMigration_2026_05_08_collapsiblesectionFrameAndCleanup = {
155
+ id: "2026-05-08-collapsiblesection-frame-and-cleanup",
156
+ fromVersion: 3,
157
+ toVersion: 4,
158
+ appliesTo: "component-config",
159
+ apply(rawVars, meta) {
160
+ if (meta.component !== "collapsiblesection") return { ...rawVars };
161
+ const out = {};
162
+ for (const prop of ["surface", "border", "border-width", "radius"]) {
163
+ const src = `${PFX}container-default-${prop}`;
164
+ if (src in rawVars) {
165
+ out[`${PFX}container-frame-${prop}`] = rawVars[src];
166
+ }
167
+ }
168
+ for (const [key, value] of Object.entries(rawVars)) {
169
+ if (/^--collapsiblesection-chromeless-(default|hover|active)-(border|border-width|radius)$/.test(key)) continue;
170
+ if (/^--collapsiblesection-container-(hover|active)-(border|border-width|radius)$/.test(key)) continue;
171
+ if (/^--collapsiblesection-container-default-(border|border-width|radius)$/.test(key)) continue;
172
+ if (/^--collapsiblesection-divider-(default|hover|active)-radius$/.test(key)) continue;
173
+ if (/^--collapsiblesection-(chromeless|divider|container)-expanded-(border|border-width|radius)$/.test(key)) continue;
174
+ if (/^--collapsiblesection-(chromeless|divider)-expanded-surface$/.test(key)) continue;
175
+ if (!(key in out)) out[key] = value;
176
+ }
177
+ return out;
178
+ }
179
+ };
180
+
181
+ // src/editor/core/themes/migrations/2026-05-10-sectiondivider-gradient-stops.ts
182
+ var PFX2 = "--sectiondivider-";
183
+ var VARIANTS = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
184
+ var OLD_STOP_RE = /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-gradient-stop-\d+$/;
185
+ var componentMigration_2026_05_10_sectiondividerGradientStops = {
186
+ id: "2026-05-10-sectiondivider-gradient-stops",
187
+ fromVersion: 4,
188
+ toVersion: 5,
189
+ appliesTo: "component-config",
190
+ apply(rawVars, meta) {
191
+ if (meta.component !== "sectiondivider") return { ...rawVars };
192
+ const out = {};
193
+ for (const [key, value] of Object.entries(rawVars)) {
194
+ if (OLD_STOP_RE.test(key)) continue;
195
+ out[key] = value;
196
+ }
197
+ const setIfMissing = (key, fallback) => {
198
+ if (!(key in out)) out[key] = fallback;
199
+ };
200
+ for (const v of VARIANTS) {
201
+ const old1 = rawVars[`${PFX2}${v}-gradient-stop-1`];
202
+ const old2 = rawVars[`${PFX2}${v}-gradient-stop-2`];
203
+ const old4 = rawVars[`${PFX2}${v}-gradient-stop-4`];
204
+ setIfMissing(`${PFX2}${v}-gradient-angle`, "--gradient-angle-diagonal");
205
+ setIfMissing(`${PFX2}${v}-gradient-stop-1-color`, old1 ?? `--surface-${v}-highest`);
206
+ setIfMissing(`${PFX2}${v}-gradient-stop-1-position`, "--gradient-stop-start");
207
+ setIfMissing(`${PFX2}${v}-gradient-stop-2-color`, old2 ?? `--surface-${v}-higher`);
208
+ setIfMissing(`${PFX2}${v}-gradient-stop-2-position`, "--gradient-stop-mid");
209
+ setIfMissing(`${PFX2}${v}-gradient-stop-3-color`, old4 ?? `--surface-${v}`);
210
+ setIfMissing(`${PFX2}${v}-gradient-stop-3-position`, "--gradient-stop-end");
211
+ }
212
+ return out;
213
+ }
214
+ };
215
+
216
+ // src/editor/core/themes/migrations/2026-05-13-primary-to-brand.ts
217
+ var PALETTE_STEPS = ["100", "200", "300", "400", "500", "600", "700", "800", "850", "900", "950"];
218
+ var SURFACE_SUFFIXES = ["lowest", "lower", "low", "high", "higher", "highest"];
219
+ var BORDER_SUFFIXES = ["faint", "subtle", "medium", "strong"];
220
+ var TEXT_SUFFIXES = ["secondary", "tertiary", "muted", "disabled"];
221
+ var RENAME_MAP = (() => {
222
+ const m = {};
223
+ for (const step of PALETTE_STEPS) m[`--color-primary-${step}`] = `--color-brand-${step}`;
224
+ m["--surface-primary"] = "--surface-brand";
225
+ for (const suf of SURFACE_SUFFIXES) m[`--surface-primary-${suf}`] = `--surface-brand-${suf}`;
226
+ m["--border-primary"] = "--border-brand";
227
+ for (const suf of BORDER_SUFFIXES) m[`--border-primary-${suf}`] = `--border-brand-${suf}`;
228
+ m["--text-primary-color"] = "--text-brand";
229
+ for (const suf of TEXT_SUFFIXES) m[`--text-primary-${suf}`] = `--text-brand-${suf}`;
230
+ return m;
231
+ })();
232
+ function renameToken(name) {
233
+ return RENAME_MAP[name] ?? name;
234
+ }
235
+ function renameKeys(rawVars) {
236
+ const out = {};
237
+ for (const [k, v] of Object.entries(rawVars)) {
238
+ out[renameToken(k)] = v;
239
+ }
240
+ return out;
241
+ }
242
+ function renameKeysAndValues(rawVars) {
243
+ const out = {};
244
+ for (const [k, v] of Object.entries(rawVars)) {
245
+ out[renameToken(k)] = renameToken(v);
246
+ }
247
+ return out;
248
+ }
249
+ var colorsAndTypeMigration_2026_05_13_primaryToBrand = {
250
+ id: "2026-05-13-primary-to-brand-theme",
251
+ fromVersion: 1,
252
+ toVersion: 2,
253
+ appliesTo: "colors-and-type",
254
+ apply: renameKeys
255
+ };
256
+ var componentMigration_2026_05_13_primaryToBrand = {
257
+ id: "2026-05-13-primary-to-brand-component",
258
+ fromVersion: 5,
259
+ toVersion: 6,
260
+ appliesTo: "component-config",
261
+ apply: renameKeysAndValues
262
+ };
263
+
264
+ // src/editor/core/themes/migrations/2026-05-19-collapsiblesection-drop-frame-surface.ts
265
+ function dropFrameSurface(rawVars, meta) {
266
+ if (meta.component !== "collapsiblesection") return rawVars;
267
+ const { "--collapsiblesection-container-frame-surface": _drop, ...rest } = rawVars;
268
+ return rest;
269
+ }
270
+ var componentMigration_2026_05_19_collapsiblesectionDropFrameSurface = {
271
+ id: "2026-05-19-collapsiblesection-drop-frame-surface",
272
+ fromVersion: 6,
273
+ toVersion: 7,
274
+ appliesTo: "component-config",
275
+ apply: dropFrameSurface
276
+ };
277
+
278
+ // src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts
279
+ var FLAT_RE = /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-gradient-(angle|stop-[123]-(color|position))$/;
280
+ var componentMigration_2026_05_19_sectiondividerRichGradient = {
281
+ id: "2026-05-19-sectiondivider-rich-gradient",
282
+ fromVersion: 7,
283
+ toVersion: 8,
284
+ appliesTo: "component-config",
285
+ apply(rawVars, meta) {
286
+ if (meta.component !== "sectiondivider") return { ...rawVars };
287
+ const out = {};
288
+ for (const [key, value] of Object.entries(rawVars)) {
289
+ if (FLAT_RE.test(key)) continue;
290
+ out[key] = value;
291
+ }
292
+ return out;
293
+ }
294
+ };
295
+
296
+ // src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts
297
+ var VARIANTS2 = ["lg", "md", "sm"];
298
+ var SUFFIX_RENAMES = [
299
+ [/-title-border-width$/, "-title-outline-width"],
300
+ [/-title-stroke-color$/, "-title-outline-color"],
301
+ [
302
+ /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-padding$/,
303
+ "--sectiondivider-$1-spacing"
304
+ ]
305
+ ];
306
+ function renameKeySuffix(key) {
307
+ for (const [re, repl] of SUFFIX_RENAMES) {
308
+ if (re.test(key)) return key.replace(re, repl);
309
+ }
310
+ return key;
311
+ }
312
+ function splitFamilyKey(key) {
313
+ const m = key.match(/^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-(.+)$/);
314
+ if (!m) return null;
315
+ return { family: m[1], suffix: m[2] };
316
+ }
317
+ var componentMigration_2026_05_20_sectiondividerSlimVariants = {
318
+ id: "2026-05-20-sectiondivider-slim-variants",
319
+ fromVersion: 8,
320
+ toVersion: 9,
321
+ appliesTo: "component-config",
322
+ apply(rawVars, meta) {
323
+ if (meta.component !== "sectiondivider") return { ...rawVars };
324
+ const out = {};
325
+ const canvasValues = {};
326
+ for (const [rawKey, value] of Object.entries(rawVars)) {
327
+ const key = renameKeySuffix(rawKey);
328
+ const parts = splitFamilyKey(key);
329
+ if (!parts) {
330
+ out[key] = value;
331
+ continue;
332
+ }
333
+ if (parts.family !== "canvas") continue;
334
+ canvasValues[parts.suffix] = value;
335
+ }
336
+ for (const suffix of Object.keys(canvasValues)) {
337
+ for (const v of VARIANTS2) {
338
+ out[`--sectiondivider-${v}-${suffix}`] = canvasValues[suffix];
339
+ }
340
+ }
341
+ return out;
342
+ }
343
+ };
344
+
345
+ // src/editor/core/themes/migrations/2026-05-21-sectiondivider-spacing-to-padding.ts
346
+ var componentMigration_2026_05_21_sectiondividerSpacingToPadding = {
347
+ id: "2026-05-21-sectiondivider-spacing-to-padding",
348
+ fromVersion: 9,
349
+ toVersion: 10,
350
+ appliesTo: "component-config",
351
+ apply(rawVars, meta) {
352
+ if (meta.component !== "sectiondivider") return { ...rawVars };
353
+ const out = {};
354
+ for (const [key, value] of Object.entries(rawVars)) {
355
+ const renamed = key.replace(
356
+ /^--sectiondivider-(lg|md|sm)-spacing$/,
357
+ "--sectiondivider-$1-padding"
358
+ );
359
+ out[renamed] = value;
360
+ }
361
+ return out;
362
+ }
363
+ };
364
+
365
+ // src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts
366
+ var componentMigration_2026_05_22_sectiondividerIntrinsicsToCss = {
367
+ id: "2026-05-22-sectiondivider-intrinsics-to-css",
368
+ fromVersion: 10,
369
+ toVersion: 11,
370
+ appliesTo: "component-config",
371
+ apply(rawVars, meta) {
372
+ if (meta.component !== "sectiondivider") return { ...rawVars };
373
+ const VARIANTS4 = ["lg", "md", "sm"];
374
+ const prefix = "--sectiondivider-";
375
+ const dropped = /* @__PURE__ */ new Set();
376
+ for (const v of VARIANTS4) {
377
+ dropped.add(`${prefix}${v}-show-eyebrow`);
378
+ dropped.add(`${prefix}${v}-show-description`);
379
+ dropped.add(`${prefix}${v}-show-hairline`);
380
+ dropped.add(`${prefix}${v}-hairline`);
381
+ dropped.add(`${prefix}${v}-eyebrow-uppercase`);
382
+ }
383
+ const out = {};
384
+ for (const [key, value] of Object.entries(rawVars)) {
385
+ if (dropped.has(key)) continue;
386
+ out[key] = value;
387
+ }
388
+ for (const v of VARIANTS4) {
389
+ const showEyebrow = rawVars[`${prefix}${v}-show-eyebrow`];
390
+ if (showEyebrow !== void 0) {
391
+ out[`${prefix}${v}-eyebrow-display`] = showEyebrow === "1" ? "block" : "none";
392
+ }
393
+ const showDesc = rawVars[`${prefix}${v}-show-description`];
394
+ if (showDesc !== void 0) {
395
+ out[`${prefix}${v}-description-display`] = showDesc === "1" ? "flex" : "none";
396
+ }
397
+ const showHair = rawVars[`${prefix}${v}-show-hairline`];
398
+ const oldHair = rawVars[`${prefix}${v}-hairline`];
399
+ const oldHairIsPos = typeof oldHair === "string" && oldHair !== "" && oldHair !== "off";
400
+ let newHair;
401
+ if (showHair === "") newHair = "none";
402
+ else if (showHair === "1") newHair = oldHairIsPos ? oldHair : "above-label";
403
+ else if (oldHair !== void 0) newHair = oldHairIsPos ? oldHair : "none";
404
+ if (newHair !== void 0) {
405
+ out[`${prefix}${v}-hairline`] = newHair;
406
+ }
407
+ const upper = rawVars[`${prefix}${v}-eyebrow-uppercase`];
408
+ if (upper !== void 0) {
409
+ out[`${prefix}${v}-eyebrow-text-transform`] = upper === "1" ? "uppercase" : "none";
410
+ }
411
+ }
412
+ return out;
413
+ }
414
+ };
415
+
416
+ // src/editor/core/themes/migrations/2026-05-24-segmentedcontrol-divider-inset.ts
417
+ var componentMigration_2026_05_24_segmentedcontrolDividerInset = {
418
+ id: "2026-05-24-segmentedcontrol-divider-inset",
419
+ fromVersion: 11,
420
+ toVersion: 12,
421
+ appliesTo: "component-config",
422
+ apply(rawVars, meta) {
423
+ if (meta.component !== "segmentedcontrol") return { ...rawVars };
424
+ const out = {};
425
+ for (const [key, value] of Object.entries(rawVars)) {
426
+ if (key === "--segmentedcontrol-divider-height") continue;
427
+ out[key] = value;
428
+ }
429
+ return out;
430
+ }
431
+ };
432
+
433
+ // src/editor/core/themes/migrations/2026-05-24-promote-state-shared-tokens.ts
434
+ var BUTTON_VARIANTS = ["primary", "secondary", "outline", "success", "danger", "warning"];
435
+ var BUTTON_STATES = ["hover", "disabled"];
436
+ var BUTTON_PROPS = ["padding", "radius", "border-width"];
437
+ var buttonDeadKeys = new Set(
438
+ BUTTON_VARIANTS.flatMap(
439
+ (v) => BUTTON_STATES.flatMap(
440
+ (s) => BUTTON_PROPS.map((p) => `--button-${v}-${s}-${p}`)
441
+ )
442
+ )
443
+ );
444
+ var segmentedcontrolDeadKeys = /* @__PURE__ */ new Set([
445
+ "--segmentedcontrol-selected-icon-size",
446
+ "--segmentedcontrol-option-hover-icon-size",
447
+ "--segmentedcontrol-disabled-icon-size"
448
+ ]);
449
+ var componentMigration_2026_05_24_promoteStateSharedTokens = {
450
+ id: "2026-05-24-promote-state-shared-tokens",
451
+ fromVersion: 12,
452
+ toVersion: 13,
453
+ appliesTo: "component-config",
454
+ apply(rawVars, meta) {
455
+ const dead = meta.component === "button" ? buttonDeadKeys : meta.component === "segmentedcontrol" ? segmentedcontrolDeadKeys : null;
456
+ if (!dead) return { ...rawVars };
457
+ const out = {};
458
+ for (const [key, value] of Object.entries(rawVars)) {
459
+ if (dead.has(key)) continue;
460
+ out[key] = value;
461
+ }
462
+ return out;
463
+ }
464
+ };
465
+
466
+ // src/editor/core/themes/migrations/2026-05-24-progressbar-collapse-variants.ts
467
+ var PRIMARY_PREFIX = "--progressbar-primary-";
468
+ var NEW_PREFIX = "--progressbar-";
469
+ var DROP_PREFIXES = [
470
+ "--progressbar-success-",
471
+ "--progressbar-warning-",
472
+ "--progressbar-danger-",
473
+ "--progressbar-info-"
474
+ ];
475
+ var componentMigration_2026_05_24_progressbarCollapseVariants = {
476
+ id: "2026-05-24-progressbar-collapse-variants",
477
+ fromVersion: 13,
478
+ toVersion: 14,
479
+ appliesTo: "component-config",
480
+ apply(rawVars, meta) {
481
+ if (meta.component !== "progressbar") return { ...rawVars };
482
+ const out = {};
483
+ for (const [oldKey, value] of Object.entries(rawVars)) {
484
+ if (DROP_PREFIXES.some((p) => oldKey.startsWith(p))) continue;
485
+ const key = oldKey.startsWith(PRIMARY_PREFIX) ? NEW_PREFIX + oldKey.slice(PRIMARY_PREFIX.length) : oldKey;
486
+ if (!(key in out)) out[key] = value;
487
+ }
488
+ return out;
489
+ }
490
+ };
491
+
492
+ // src/editor/core/themes/migrations/2026-05-24-collapsiblesection-drop-active-state.ts
493
+ function dropActiveState(rawVars, meta) {
494
+ if (meta.component !== "collapsiblesection") return rawVars;
495
+ const re = /^--collapsiblesection-(chromeless|divider|container)-active-/;
496
+ const out = {};
497
+ for (const [key, value] of Object.entries(rawVars)) {
498
+ if (re.test(key)) continue;
499
+ out[key] = value;
500
+ }
501
+ return out;
502
+ }
503
+ var componentMigration_2026_05_24_collapsiblesectionDropActiveState = {
504
+ id: "2026-05-24-collapsiblesection-drop-active-state",
505
+ fromVersion: 14,
506
+ toVersion: 15,
507
+ appliesTo: "component-config",
508
+ apply: dropActiveState
509
+ };
510
+
511
+ // src/editor/core/themes/migrations/2026-05-25-cornerbadge-flatten-variants.ts
512
+ var VARIANTS3 = ["primary", "accent", "neutral", "alternate", "canvas", "special", "success", "warning", "danger", "info"];
513
+ var RE = new RegExp(`^--corner-badge-(${VARIANTS3.join("|")})-(.+)$`);
514
+ var CURRENT_COLOR_PROPS = /* @__PURE__ */ new Set(["surface", "border", "text"]);
515
+ function flattenVariants(rawVars, meta) {
516
+ if (meta.component !== "cornerbadge") return rawVars;
517
+ const out = {};
518
+ const collected = /* @__PURE__ */ new Map();
519
+ for (const [key, value] of Object.entries(rawVars)) {
520
+ const m = key.match(RE);
521
+ if (m) {
522
+ const prop = m[2];
523
+ if (CURRENT_COLOR_PROPS.has(prop)) {
524
+ out[key] = value;
525
+ continue;
526
+ }
527
+ if (!collected.has(prop)) collected.set(prop, value);
528
+ continue;
529
+ }
530
+ out[key] = value;
531
+ }
532
+ for (const [prop, value] of collected) {
533
+ const flatKey = `--corner-badge-${prop}`;
534
+ if (!(flatKey in out)) out[flatKey] = value;
535
+ }
536
+ return out;
537
+ }
538
+ var componentMigration_2026_05_25_cornerbadgeFlattenVariants = {
539
+ id: "2026-05-25-cornerbadge-flatten-variants",
540
+ fromVersion: 15,
541
+ toVersion: 16,
542
+ appliesTo: "component-config",
543
+ apply: flattenVariants
544
+ };
545
+
546
+ // src/editor/core/themes/migrations/2026-05-26-drop-overlay-extra-stops.ts
547
+ var DROPPED_TO_KEPT = {
548
+ "--overlay-lowest": "--overlay-low",
549
+ "--overlay-lower": "--overlay-low",
550
+ "--overlay-higher": "--overlay-high",
551
+ "--overlay-highest": "--overlay-high"
552
+ };
553
+ var colorsAndTypeMigration_2026_05_26_dropOverlayExtraStops = {
554
+ id: "2026-05-26-drop-overlay-extra-stops-theme",
555
+ fromVersion: 2,
556
+ toVersion: 3,
557
+ appliesTo: "colors-and-type",
558
+ apply(rawVars) {
559
+ const out = {};
560
+ for (const [key, value] of Object.entries(rawVars)) {
561
+ if (key in DROPPED_TO_KEPT) continue;
562
+ out[key] = value;
563
+ }
564
+ return out;
565
+ }
566
+ };
567
+ var componentMigration_2026_05_26_dropOverlayExtraStops = {
568
+ id: "2026-05-26-drop-overlay-extra-stops-component",
569
+ fromVersion: 16,
570
+ toVersion: 17,
571
+ appliesTo: "component-config",
572
+ apply(rawVars) {
573
+ const out = {};
574
+ for (const [key, value] of Object.entries(rawVars)) {
575
+ out[key] = DROPPED_TO_KEPT[value] ?? value;
576
+ }
577
+ return out;
578
+ }
579
+ };
580
+
581
+ // src/editor/core/themes/migrations/2026-05-29-tabbar-indicator-thickness-to-per-state-width.ts
582
+ var TABBAR_STATES = ["default", "hover", "active", "disabled"];
583
+ var OLD_KEY = "--tabbar-bar-indicator-thickness";
584
+ var FALLBACK = "--border-width-2";
585
+ var componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth = {
586
+ id: "2026-05-29-tabbar-indicator-thickness-to-per-state-width",
587
+ fromVersion: 17,
588
+ toVersion: 18,
589
+ appliesTo: "component-config",
590
+ apply(rawVars, meta) {
591
+ if (meta.component !== "tabbar") return { ...rawVars };
592
+ const seed = rawVars[OLD_KEY] ?? FALLBACK;
593
+ const out = {};
594
+ for (const [key, value] of Object.entries(rawVars)) {
595
+ if (key === OLD_KEY) continue;
596
+ out[key] = value;
597
+ }
598
+ for (const state of TABBAR_STATES) {
599
+ const newKey = `--tabbar-${state}-indicator-border-width`;
600
+ if (!(newKey in out)) out[newKey] = seed;
601
+ }
602
+ return out;
603
+ }
604
+ };
605
+
606
+ // src/editor/core/themes/migrations/2026-05-29-segmentedcontrol-small-divider-rename.ts
607
+ var RENAMES = {
608
+ "--segmentedcontrol-divider-small-thickness": "--segmentedcontrol-small-divider-thickness",
609
+ "--segmentedcontrol-divider-small-inset": "--segmentedcontrol-small-divider-inset"
610
+ };
611
+ var componentMigration_2026_05_29_segmentedcontrolSmallDividerRename = {
612
+ id: "2026-05-29-segmentedcontrol-small-divider-rename",
613
+ fromVersion: 18,
614
+ toVersion: 19,
615
+ appliesTo: "component-config",
616
+ apply(rawVars, meta) {
617
+ if (meta.component !== "segmentedcontrol") return { ...rawVars };
618
+ const out = {};
619
+ for (const [key, value] of Object.entries(rawVars)) {
620
+ out[RENAMES[key] ?? key] = value;
621
+ }
622
+ return out;
623
+ }
624
+ };
625
+
626
+ // src/editor/core/themes/migrations/2026-05-29-toggle-derive-track-from-thumb.ts
627
+ var componentMigration_2026_05_29_toggleDeriveTrackFromThumb = {
628
+ id: "2026-05-29-toggle-derive-track-from-thumb",
629
+ fromVersion: 19,
630
+ toVersion: 20,
631
+ appliesTo: "component-config",
632
+ apply(rawVars, meta) {
633
+ if (meta.component !== "toggle") return { ...rawVars };
634
+ const out = {};
635
+ for (const [key, value] of Object.entries(rawVars)) {
636
+ if (key === "--toggle-track-width" || key === "--toggle-track-thickness") continue;
637
+ out[key] = value;
638
+ }
639
+ if (!("--toggle-track-padding" in out)) {
640
+ out["--toggle-track-padding"] = "--space-2";
641
+ }
642
+ return out;
643
+ }
644
+ };
645
+
646
+ // src/editor/core/themes/migrations/2026-08-13-drop-legacy-shape-space-keys.ts
647
+ var DROPPED = /* @__PURE__ */ new Set([
648
+ "--badge-trait-radius",
649
+ "--badge-trait-padding",
650
+ "--sectiondivider-padding",
651
+ "--dialog-primary-default-radius",
652
+ "--dialog-primary-default-padding",
653
+ "--dialog-primary-hover-radius",
654
+ "--dialog-primary-hover-padding",
655
+ "--dialog-secondary-default-radius",
656
+ "--dialog-secondary-default-padding",
657
+ "--dialog-secondary-hover-radius",
658
+ "--dialog-secondary-hover-padding"
659
+ ]);
660
+ var colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys = {
661
+ id: "2026-08-13-drop-legacy-shape-space-keys",
662
+ fromVersion: 3,
663
+ toVersion: 4,
664
+ appliesTo: "colors-and-type",
665
+ apply(rawVars) {
666
+ const out = {};
667
+ for (const [key, value] of Object.entries(rawVars)) {
668
+ if (DROPPED.has(key)) continue;
669
+ out[key] = value;
670
+ }
671
+ return out;
672
+ }
673
+ };
674
+
675
+ // src/editor/core/themes/migrations/2026-08-15-line-height-scale-rename.ts
676
+ var RENAMED = {
677
+ "--line-height-xs": "--line-height-none",
678
+ "--line-height-sm": "--line-height-tighter",
679
+ "--line-height-md": "--line-height-normal",
680
+ "--line-height-lg": "--line-height-relaxed",
681
+ "--line-height-xl": "--line-height-relaxed"
682
+ };
683
+ var REFERENCE = /--line-height-(?:xs|sm|md|lg|xl)(?![\w-])/g;
684
+ function renameValues(rawVars) {
685
+ const out = {};
686
+ for (const [key, value] of Object.entries(rawVars)) {
687
+ out[key] = typeof value === "string" ? value.replace(REFERENCE, (name) => RENAMED[name]) : value;
688
+ }
689
+ return out;
690
+ }
691
+ var colorsAndTypeMigration_2026_08_15_lineHeightScaleRename = {
692
+ id: "2026-08-15-line-height-scale-rename-colors-and-type",
693
+ fromVersion: 4,
694
+ toVersion: 5,
695
+ appliesTo: "colors-and-type",
696
+ apply: renameValues
697
+ };
698
+ var componentMigration_2026_08_15_lineHeightScaleRename = {
699
+ id: "2026-08-15-line-height-scale-rename-component",
700
+ fromVersion: 20,
701
+ toVersion: 21,
702
+ appliesTo: "component-config",
703
+ apply: renameValues
704
+ };
705
+
706
+ // src/editor/core/themes/migrations/index.ts
707
+ var MIGRATIONS = [
708
+ colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
709
+ colorsAndTypeMigration_2026_05_13_primaryToBrand,
710
+ componentMigration_2026_04_24_prefixAndSuffixRenames,
711
+ componentMigration_2026_04_27_segmentedcontrolDisabledFlatten,
712
+ componentMigration_2026_05_08_collapsiblesectionVariantNamespace,
713
+ componentMigration_2026_05_08_collapsiblesectionFrameAndCleanup,
714
+ componentMigration_2026_05_10_sectiondividerGradientStops,
715
+ componentMigration_2026_05_13_primaryToBrand,
716
+ componentMigration_2026_05_19_collapsiblesectionDropFrameSurface,
717
+ componentMigration_2026_05_19_sectiondividerRichGradient,
718
+ componentMigration_2026_05_20_sectiondividerSlimVariants,
719
+ componentMigration_2026_05_21_sectiondividerSpacingToPadding,
720
+ componentMigration_2026_05_22_sectiondividerIntrinsicsToCss,
721
+ componentMigration_2026_05_24_segmentedcontrolDividerInset,
722
+ componentMigration_2026_05_24_promoteStateSharedTokens,
723
+ componentMigration_2026_05_24_progressbarCollapseVariants,
724
+ componentMigration_2026_05_24_collapsiblesectionDropActiveState,
725
+ componentMigration_2026_05_25_cornerbadgeFlattenVariants,
726
+ colorsAndTypeMigration_2026_05_26_dropOverlayExtraStops,
727
+ componentMigration_2026_05_26_dropOverlayExtraStops,
728
+ componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth,
729
+ componentMigration_2026_05_29_segmentedcontrolSmallDividerRename,
730
+ componentMigration_2026_05_29_toggleDeriveTrackFromThumb,
731
+ colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys,
732
+ colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
733
+ componentMigration_2026_08_15_lineHeightScaleRename
734
+ ];
735
+ function countFor(kind) {
736
+ return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
737
+ }
738
+ var CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION = countFor("colors-and-type");
739
+ var CURRENT_COMPONENT_SCHEMA_VERSION = countFor("component-config");
740
+ function runMigrations(kind, fileVersion, rawVars, meta = {}) {
741
+ const applicable = MIGRATIONS.filter((m) => m.appliesTo === kind && m.fromVersion >= fileVersion).sort((a, b) => a.toVersion - b.toVersion);
742
+ let out = { ...rawVars };
743
+ for (const m of applicable) {
744
+ out = m.apply(out, meta);
745
+ }
746
+ return out;
747
+ }
748
+
749
+ export {
750
+ CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
751
+ CURRENT_COMPONENT_SCHEMA_VERSION,
752
+ runMigrations
753
+ };