@motion-proto/live-tokens 0.78.0 → 0.79.0

package/dist-plugin/index.cjs

@@ -1705,6 +1705,411 @@ var componentMigration_2026_09_07_strokeRoleRenames = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-13-selected-state.ts
+var RADIOBUTTON_SUFFIXES = [
+  "dot-border-color",
+  "dot-border-width",
+  "dot-fill",
+  "dot-size",
+  "label",
+  "label-font-family",
+  "label-font-size",
+  "label-font-weight",
+  "label-line-height"
+];
+var TABBAR_SUFFIXES = [
+  "border",
+  "icon-size",
+  "indicator-width",
+  "padding",
+  "surface",
+  "tab-border-color",
+  "tab-border-width",
+  "tab-bottom-radius",
+  "tab-top-radius",
+  "text",
+  "text-font-family",
+  "text-font-size",
+  "text-font-weight",
+  "text-line-height"
+];
+var SIDENAVIGATION_SUFFIXES = {
+  title: [
+    "accent",
+    "accent-width",
+    "border",
+    "border-width",
+    "label",
+    "label-font-family",
+    "label-font-size",
+    "label-font-weight",
+    "label-line-height",
+    "padding",
+    "surface"
+  ],
+  section: [
+    "accent",
+    "accent-width",
+    "surface",
+    "text",
+    "text-font-family",
+    "text-font-size",
+    "text-font-weight",
+    "text-line-height"
+  ],
+  item: [
+    "accent",
+    "accent-width",
+    "padding",
+    "surface",
+    "text",
+    "text-font-family",
+    "text-font-size",
+    "text-font-weight",
+    "text-line-height"
+  ],
+  footer: [
+    "accent",
+    "accent-width",
+    "gap",
+    "icon",
+    "icon-size",
+    "padding",
+    "surface",
+    "text",
+    "text-font-family",
+    "text-font-size",
+    "text-font-weight",
+    "text-line-height"
+  ]
+};
+var RENAMES3 = {
+  radiobutton: Object.fromEntries(
+    RADIOBUTTON_SUFFIXES.map((s) => [`--radiobutton-active-${s}`, `--radiobutton-selected-${s}`])
+  ),
+  tabbar: Object.fromEntries(
+    TABBAR_SUFFIXES.map((s) => [`--tabbar-active-${s}`, `--tabbar-selected-${s}`])
+  ),
+  sidenavigation: Object.fromEntries(
+    Object.entries(SIDENAVIGATION_SUFFIXES).flatMap(
+      ([part, suffixes]) => suffixes.map((s) => [
+        `--sidenavigation-${part}-active-${s}`,
+        `--sidenavigation-${part}-selected-${s}`
+      ])
+    )
+  )
+};
+var componentMigration_2026_09_13_selectedState = {
+  id: "2026-09-13-selected-state",
+  fromVersion: 27,
+  toVersion: 28,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES3[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-hairline.ts
+var COLLAPSIBLESECTION_SUFFIXES = [
+  "surface",
+  "hairline-color",
+  "padding",
+  "label",
+  "label-font-family",
+  "label-font-size",
+  "label-font-weight",
+  "label-line-height",
+  "icon",
+  "icon-size"
+];
+var COLLAPSIBLESECTION_STATES = ["default", "hover"];
+var RENAMES4 = {
+  dialog: {
+    "--dialog-header-divider": "--dialog-header-hairline-color",
+    "--dialog-header-divider-width": "--dialog-header-hairline-width",
+    "--dialog-footer-divider": "--dialog-footer-hairline-color",
+    "--dialog-footer-divider-width": "--dialog-footer-hairline-width"
+  },
+  table: {
+    "--table-default-header-divider": "--table-default-header-hairline-color",
+    "--table-default-header-divider-width": "--table-default-header-hairline-width",
+    "--table-default-row-divider": "--table-default-row-hairline-color",
+    "--table-default-row-divider-width": "--table-default-row-hairline-width",
+    "--table-default-column-divider": "--table-default-column-hairline-color",
+    "--table-default-column-divider-width": "--table-default-column-hairline-width"
+  },
+  tabbar: {
+    "--tabbar-bar-divider": "--tabbar-bar-hairline-color",
+    "--tabbar-bar-divider-thickness": "--tabbar-bar-hairline-width"
+  },
+  segmentedcontrol: {
+    "--segmentedcontrol-divider-color": "--segmentedcontrol-hairline-color",
+    "--segmentedcontrol-divider-thickness": "--segmentedcontrol-hairline-width",
+    "--segmentedcontrol-divider-inset": "--segmentedcontrol-hairline-inset",
+    "--segmentedcontrol-small-divider-thickness": "--segmentedcontrol-small-hairline-width",
+    "--segmentedcontrol-small-divider-inset": "--segmentedcontrol-small-hairline-inset"
+  },
+  collapsiblesection: {
+    ...Object.fromEntries(
+      COLLAPSIBLESECTION_STATES.flatMap((state) => [
+        ...COLLAPSIBLESECTION_SUFFIXES.map((s) => [
+          `--collapsiblesection-divider-${state}-${s}`,
+          `--collapsiblesection-hairline-${state}-${s}`
+        ]),
+        [
+          `--collapsiblesection-divider-${state}-hairline-thickness`,
+          `--collapsiblesection-hairline-${state}-hairline-width`
+        ]
+      ])
+    ),
+    "--collapsiblesection-divider-expanded-padding": "--collapsiblesection-hairline-expanded-padding"
+  },
+  sectiondivider: {
+    "--sectiondivider-lg-hairline-thickness": "--sectiondivider-lg-hairline-width",
+    "--sectiondivider-md-hairline-thickness": "--sectiondivider-md-hairline-width",
+    "--sectiondivider-sm-hairline-thickness": "--sectiondivider-sm-hairline-width"
+  }
+};
+var componentMigration_2026_09_13_hairline = {
+  id: "2026-09-13-hairline",
+  fromVersion: 28,
+  toVersion: 29,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES4[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-indicator.ts
+var SIDENAVIGATION_PARTS = ["title", "section", "item", "footer"];
+var SIDENAVIGATION_STATES = ["default", "hover", "selected"];
+var CALLOUT_VARIANTS = ["info", "success", "warning", "danger"];
+var RENAMES5 = {
+  sidenavigation: Object.fromEntries(
+    SIDENAVIGATION_PARTS.flatMap(
+      (part) => SIDENAVIGATION_STATES.flatMap((state) => [
+        [
+          `--sidenavigation-${part}-${state}-accent`,
+          `--sidenavigation-${part}-${state}-indicator`
+        ],
+        [
+          `--sidenavigation-${part}-${state}-accent-width`,
+          `--sidenavigation-${part}-${state}-indicator-width`
+        ]
+      ])
+    )
+  ),
+  callout: Object.fromEntries(
+    CALLOUT_VARIANTS.map((v) => [
+      `--callout-${v}-accent-width`,
+      `--callout-${v}-indicator-width`
+    ])
+  )
+};
+var componentMigration_2026_09_13_indicator = {
+  id: "2026-09-13-indicator",
+  fromVersion: 29,
+  toVersion: 30,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES5[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-sectiondivider-surface.ts
+var SECTIONDIVIDER_VARIANTS = ["lg", "md", "sm"];
+var RENAMES6 = {
+  sectiondivider: Object.fromEntries(
+    SECTIONDIVIDER_VARIANTS.map((v) => [
+      `--sectiondivider-${v}-background`,
+      `--sectiondivider-${v}-surface`
+    ])
+  )
+};
+var componentMigration_2026_09_13_sectiondividerSurface = {
+  id: "2026-09-13-sectiondivider-surface",
+  fromVersion: 30,
+  toVersion: 31,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES6[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+var RENAMES7 = {
+  cornerbadge: {
+    "--corner-badge-margin": "--cornerbadge-margin",
+    "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
+    "--corner-badge-inner-radius": "--cornerbadge-inner-radius",
+    "--corner-badge-h-axis-radius": "--cornerbadge-h-axis-radius",
+    "--corner-badge-v-axis-radius": "--cornerbadge-v-axis-radius",
+    "--corner-badge-padding": "--cornerbadge-padding",
+    "--corner-badge-text-font-family": "--cornerbadge-text-font-family",
+    "--corner-badge-text-font-size": "--cornerbadge-text-font-size",
+    "--corner-badge-text-font-weight": "--cornerbadge-text-font-weight",
+    "--corner-badge-text-line-height": "--cornerbadge-text-line-height",
+    "--corner-badge-primary-surface": "--cornerbadge-primary-surface",
+    "--corner-badge-primary-border": "--cornerbadge-primary-border",
+    "--corner-badge-primary-text": "--cornerbadge-primary-text",
+    "--corner-badge-accent-surface": "--cornerbadge-accent-surface",
+    "--corner-badge-accent-border": "--cornerbadge-accent-border",
+    "--corner-badge-accent-text": "--cornerbadge-accent-text",
+    "--corner-badge-neutral-surface": "--cornerbadge-neutral-surface",
+    "--corner-badge-neutral-border": "--cornerbadge-neutral-border",
+    "--corner-badge-neutral-text": "--cornerbadge-neutral-text",
+    "--corner-badge-alternate-surface": "--cornerbadge-alternate-surface",
+    "--corner-badge-alternate-border": "--cornerbadge-alternate-border",
+    "--corner-badge-alternate-text": "--cornerbadge-alternate-text",
+    "--corner-badge-canvas-surface": "--cornerbadge-canvas-surface",
+    "--corner-badge-canvas-border": "--cornerbadge-canvas-border",
+    "--corner-badge-canvas-text": "--cornerbadge-canvas-text",
+    "--corner-badge-special-surface": "--cornerbadge-special-surface",
+    "--corner-badge-special-border": "--cornerbadge-special-border",
+    "--corner-badge-special-text": "--cornerbadge-special-text",
+    "--corner-badge-success-surface": "--cornerbadge-success-surface",
+    "--corner-badge-success-border": "--cornerbadge-success-border",
+    "--corner-badge-success-text": "--cornerbadge-success-text",
+    "--corner-badge-warning-surface": "--cornerbadge-warning-surface",
+    "--corner-badge-warning-border": "--cornerbadge-warning-border",
+    "--corner-badge-warning-text": "--cornerbadge-warning-text",
+    "--corner-badge-danger-surface": "--cornerbadge-danger-surface",
+    "--corner-badge-danger-border": "--cornerbadge-danger-border",
+    "--corner-badge-danger-text": "--cornerbadge-danger-text",
+    "--corner-badge-info-surface": "--cornerbadge-info-surface",
+    "--corner-badge-info-border": "--cornerbadge-info-border",
+    "--corner-badge-info-text": "--cornerbadge-info-text"
+  }
+};
+var componentMigration_2026_09_13_cornerbadgePrefix = {
+  id: "2026-09-13-cornerbadge-prefix",
+  fromVersion: 31,
+  toVersion: 32,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES7[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
+var RENAMES8 = {
+  toggle: {
+    "--toggle-label-text": "--toggle-label",
+    "--toggle-disabled-label-text": "--toggle-disabled-label"
+  }
+};
+var componentMigration_2026_09_13_toggleLabel = {
+  id: "2026-09-13-toggle-label",
+  fromVersion: 32,
+  toVersion: 33,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES8[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
+var RENAMES9 = {
+  collapsiblesection: {
+    "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
+    "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
+    "--collapsiblesection-container-expanded-surface": "--collapsiblesection-container-open-surface",
+    "--collapsiblesection-container-expanded-padding": "--collapsiblesection-container-open-padding"
+  }
+};
+var componentMigration_2026_09_13_collapsiblesectionOpen = {
+  id: "2026-09-13-collapsiblesection-open",
+  fromVersion: 33,
+  toVersion: 34,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES9[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-badge-brand.ts
+var BADGE_SUFFIXES = [
+  "surface",
+  "text",
+  "border",
+  "text-font-family",
+  "text-font-size",
+  "text-font-weight",
+  "text-line-height",
+  "border-width",
+  "radius",
+  "padding",
+  "shadow",
+  "blur",
+  "icon-size"
+];
+var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
+var RENAMES10 = {
+  badge: Object.fromEntries(
+    BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
+  ),
+  cornerbadge: Object.fromEntries(
+    CORNERBADGE_SUFFIXES.map((s) => [`--cornerbadge-primary-${s}`, `--cornerbadge-brand-${s}`])
+  )
+};
+var componentMigration_2026_09_13_badgeBrand = {
+  id: "2026-09-13-badge-brand",
+  fromVersion: 34,
+  toVersion: 35,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES10[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1741,7 +2146,15 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_gateSuffixEnabled,
   componentMigration_2026_09_02_sectiondividerDropTitleOutline,
   colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys,
-  componentMigration_2026_09_07_strokeRoleRenames
+  componentMigration_2026_09_07_strokeRoleRenames,
+  componentMigration_2026_09_13_selectedState,
+  componentMigration_2026_09_13_hairline,
+  componentMigration_2026_09_13_indicator,
+  componentMigration_2026_09_13_sectiondividerSurface,
+  componentMigration_2026_09_13_cornerbadgePrefix,
+  componentMigration_2026_09_13_toggleLabel,
+  componentMigration_2026_09_13_collapsiblesectionOpen,
+  componentMigration_2026_09_13_badgeBrand
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -2113,16 +2526,21 @@ function renameSectionDividerObjectSlots(objectPart) {
       }
     }
     if (isFamilyGradient) continue;
+    const backgroundVariant = SIZE_VARIANTS.find((v) => key === `--sectiondivider-${v}-background`);
+    if (backgroundVariant) {
+      out[`--sectiondivider-${backgroundVariant}-surface`] = value;
+      continue;
+    }
     out[key] = value;
   }
   if (canvasGradient !== void 0) {
     for (const v of SIZE_VARIANTS) {
-      out[`--sectiondivider-${v}-background`] = canvasGradient;
+      out[`--sectiondivider-${v}-surface`] = canvasGradient;
     }
   }
   return out;
 }
-var SECTIONDIVIDER_VARIANTS = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
+var SECTIONDIVIDER_VARIANTS2 = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
 function synthesizeSectionDividerGradients(stringPart, objectPart) {
   const GRADIENT_ANGLE_TOKENS = {
     "--gradient-angle-horizontal": 90,
@@ -2154,7 +2572,7 @@ function synthesizeSectionDividerGradients(stringPart, objectPart) {
     if (mix) return { color: mix[1], opacity: parseFloat(mix[2]) };
     return null;
   };
-  for (const v of SECTIONDIVIDER_VARIANTS) {
+  for (const v of SECTIONDIVIDER_VARIANTS2) {
     const slot = `--sectiondivider-${v}-gradient`;
     if (slot in objectPart) continue;
     const angleKey = `${slot}-angle`;
@@ -3157,7 +3575,7 @@ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
 };
 
 // vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
-var RENAMES3 = [
+var RENAMES11 = [
   ["--line-height-xs", "--line-height-none"],
   ["--line-height-sm", "--line-height-tighter"],
   ["--line-height-md", "--line-height-normal"],
@@ -3177,7 +3595,7 @@ var tokensCssMigration_2026_07_20_lineHeightRename = {
   description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
   apply(css) {
     let out = css;
-    for (const [oldName, newName] of RENAMES3) out = renameToken2(out, oldName, newName);
+    for (const [oldName, newName] of RENAMES11) out = renameToken2(out, oldName, newName);
     out = removeToken(out, "--line-height-xl");
     out = ensureScale(out, {
       anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
@@ -3410,7 +3828,7 @@ var tokensCssMigration_2026_08_27_editorialLargeSteps = {
 };
 
 // vite-plugin/tokensCssMigrations/migrations/2026-09-01-scrim-rename.ts
-var RENAMES4 = [
+var RENAMES12 = [
   ["--overlay-low", "--scrim-low"],
   ["--overlay-high", "--scrim-high"],
   ["--overlay", "--scrim"]
@@ -3421,7 +3839,7 @@ var tokensCssMigration_2026_09_01_scrimRename = {
   description: "Rename --overlay-{low,base,high} to --scrim-*; a scrim dims what is behind it",
   apply(css) {
     let out = css;
-    for (const [oldName, newName] of RENAMES4) out = renameToken2(out, oldName, newName);
+    for (const [oldName, newName] of RENAMES12) out = renameToken2(out, oldName, newName);
     return out;
   }
 };
@@ -4711,15 +5129,14 @@ data: ${JSON.stringify(state)}
       // spelled "no override" that way (normalizeTheme.ts's pointer-
       // resolution loop treats it identically), so it always meant *this
       // install's* default, not something the bundle carries. The
-      // completeness fill (Wave 2 of docs/plans/theme-completeness.md) relies
-      // on that fall-through: without it, `readComponentConfig(comp,
-      // 'default')` answers undefined for every component (no bundle ever
-      // carries a `<comp>/default` entry), the fill loop no-ops 25 times, and
-      // an incomplete bundle stays incomplete forever — exactly the drift RJC
-      // 10 exists to prevent.
+      // completeness fill relies on that fall-through: without it,
+      // `readComponentConfig(comp, 'default')` answers undefined for every
+      // component (no bundle ever carries a `<comp>/default` entry), the
+      // fill loop no-ops 25 times, and an incomplete bundle stays incomplete
+      // forever.
       readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`] ?? (name === "default" ? readComponentConfig(comp, "default") : void 0),
       // Installed components are a property of this install, not of the
-      // bundle being imported, so the completeness fill (Wave 2) uses the
+      // bundle being imported, so the completeness fill uses the
       // same list the disk resolver does.
       listComponentNames,
       normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-PDNL4NC5.js";
+} from "./chunk-D4WRIKEZ.js";
 import {
   formatGradientValue,
   palettesToVars,
@@ -16,7 +16,7 @@ import {
 } from "./chunk-O6GQ6GBH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-SWXRVZKT.js";
+} from "./chunk-REBHE3ZM.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
@@ -1432,15 +1432,14 @@ data: ${JSON.stringify(state)}
       // spelled "no override" that way (normalizeTheme.ts's pointer-
       // resolution loop treats it identically), so it always meant *this
       // install's* default, not something the bundle carries. The
-      // completeness fill (Wave 2 of docs/plans/theme-completeness.md) relies
-      // on that fall-through: without it, `readComponentConfig(comp,
-      // 'default')` answers undefined for every component (no bundle ever
-      // carries a `<comp>/default` entry), the fill loop no-ops 25 times, and
-      // an incomplete bundle stays incomplete forever — exactly the drift RJC
-      // 10 exists to prevent.
+      // completeness fill relies on that fall-through: without it,
+      // `readComponentConfig(comp, 'default')` answers undefined for every
+      // component (no bundle ever carries a `<comp>/default` entry), the
+      // fill loop no-ops 25 times, and an incomplete bundle stays incomplete
+      // forever.
       readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`] ?? (name === "default" ? readComponentConfig(comp, "default") : void 0),
       // Installed components are a property of this install, not of the
-      // bundle being imported, so the completeness fill (Wave 2) uses the
+      // bundle being imported, so the completeness fill uses the
       // same list the disk resolver does.
       listComponentNames,
       normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)