@motion-proto/live-tokens 0.82.0 → 0.84.0

package/bin/rules/componentStructure.mjs

@@ -37,7 +37,7 @@ export const componentRules = {
     severity: 'warn',
     repair: 'authored',
     guidance:
-      "Add the catalogue export to the runtime's <script module> block, with description, useFor, and notFor as string literals. The message names the field that is missing or malformed, and `npx live-tokens components <id>` prints the entry once it is there.",
+      "Add the catalogue export to the runtime's <script module> block, with description and whenToUse as string literals, and whenNotToUse as an array of { when, use? } rows: `when` names the condition that rules this component out, and `use` names the sibling component id that fits instead. A row with no sibling to name takes no `use`. A component with no disqualifying condition takes `whenNotToUse: []`. An optional constraints array states each rule of use as one sentence. The message names the field that is missing or malformed, and `npx live-tokens components <id>` prints the entry once it is there.",
   },
   'state-after-property': {
     severity: 'error',
@@ -111,21 +111,29 @@ export function checkFiles({ root, runtimePath, editorPath }, record) {
   return { editorMissing, runtimeMissing };
 }
 
-export function checkRuntime({ id, Id, root, runtimePath, runtime, blocks, intrinsic }, record) {
+export function checkRuntime({ id, Id, root, runtimePath, runtime, blocks, intrinsic, vocab }, record) {
   // Runtime: the file exports the `catalogue` that says what the component
   // is for. Without it the component is pickable but unexplained.
   const catalogue = catalogueOf(runtime);
   if (!catalogue) {
     record(
       'missing-description',
-      `${relative(root, runtimePath)}: has no catalogue export. Say what ${Id} is for, and what it is not for`,
+      `${relative(root, runtimePath)}: has no catalogue export. Say what ${Id} is for and when not to use it`,
     );
   } else {
-    for (const requiredField of ['description', 'useFor', 'notFor']) {
+    for (const requiredField of ['description', 'whenToUse', 'whenNotToUse']) {
       if (!catalogue[requiredField]) {
         record('missing-description', `${relative(root, runtimePath)}: catalogue has no ${requiredField}`);
       }
     }
+    for (const row of catalogue.whenNotToUse ?? []) {
+      if (row.use && !vocab.components.has(row.use)) {
+        record(
+          'missing-description',
+          `${relative(root, runtimePath)}: catalogue whenNotToUse names "${row.use}", which is not a component id`,
+        );
+      }
+    }
   }
 
   // Runtime: :global(:root) block present.

package/dist-plugin/{chunk-REBHE3ZM.js → chunk-FD4FVDOC.js}

@@ -1176,8 +1176,56 @@ var componentMigration_2026_09_13_sectiondividerSurface = {
   }
 };
 
-// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+// src/editor/core/themes/migrations/2026-09-20-imagelightbox-scrim.ts
 var RENAMES7 = {
+  "--imagelightbox-overlay-surface": "--imagelightbox-scrim-surface"
+};
+var componentMigration_2026_09_20_imagelightboxScrim = {
+  id: "2026-09-20-imagelightbox-scrim",
+  fromVersion: 35,
+  toVersion: 36,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "imagelightbox") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMES7[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-20-scrim-color-and-opacity.ts
+var STOPS = {
+  "--scrim-low": "--scrim-opacity-low",
+  "--scrim": "--scrim-opacity",
+  "--scrim-high": "--scrim-opacity-high"
+};
+var SURFACE = /^--(imagelightbox|dialog)-scrim-surface$/;
+var componentMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  fromVersion: 36,
+  toVersion: 37,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = SURFACE.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      const stem = `--${match[1]}-scrim`;
+      const stop = STOPS[value];
+      out[`${stem}-color`] = stop ? "--scrim-color" : value;
+      out[`${stem}-opacity`] = stop ?? "1";
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1227,7 +1275,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
   toVersion: 32,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES7[meta.component] : void 0;
+    const renames = meta.component ? RENAMES8[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1238,7 +1286,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
-var RENAMES8 = {
+var RENAMES9 = {
   toggle: {
     "--toggle-label-text": "--toggle-label",
     "--toggle-disabled-label-text": "--toggle-disabled-label"
@@ -1250,7 +1298,7 @@ var componentMigration_2026_09_13_toggleLabel = {
   toVersion: 33,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES8[meta.component] : void 0;
+    const renames = meta.component ? RENAMES9[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1261,7 +1309,7 @@ var componentMigration_2026_09_13_toggleLabel = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
-var RENAMES9 = {
+var RENAMES10 = {
   collapsiblesection: {
     "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
     "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
@@ -1275,7 +1323,7 @@ var componentMigration_2026_09_13_collapsiblesectionOpen = {
   toVersion: 34,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES9[meta.component] : void 0;
+    const renames = meta.component ? RENAMES10[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1302,7 +1350,7 @@ var BADGE_SUFFIXES = [
   "icon-size"
 ];
 var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
-var RENAMES10 = {
+var RENAMES11 = {
   badge: Object.fromEntries(
     BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
   ),
@@ -1316,7 +1364,7 @@ var componentMigration_2026_09_13_badgeBrand = {
   toVersion: 35,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES10[meta.component] : void 0;
+    const renames = meta.component ? RENAMES11[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1370,7 +1418,9 @@ var MIGRATIONS = [
   componentMigration_2026_09_13_cornerbadgePrefix,
   componentMigration_2026_09_13_toggleLabel,
   componentMigration_2026_09_13_collapsiblesectionOpen,
-  componentMigration_2026_09_13_badgeBrand
+  componentMigration_2026_09_13_badgeBrand,
+  componentMigration_2026_09_20_imagelightboxScrim,
+  componentMigration_2026_09_20_scrimColorAndOpacity
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/{chunk-D4WRIKEZ.js → chunk-M6BWSS6C.js}

@@ -1,7 +1,7 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
-} from "./chunk-REBHE3ZM.js";
+} from "./chunk-FD4FVDOC.js";
 
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";

package/dist-plugin/{chunk-RFVYPNRO.js → chunk-V2OVSC5Z.js}

@@ -552,6 +552,26 @@ var tokensCssMigration_2026_09_01_tintScale = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-09-20-scrim-color-and-opacity.ts
+var ENTRIES2 = [
+  { name: "--scrim-color", value: "rgb(20, 3, 0)" },
+  { name: "--scrim-opacity-low", value: "0.38" },
+  { name: "--scrim-opacity", value: "0.51" },
+  { name: "--scrim-opacity-high", value: "0.64" }
+];
+var tokensCssMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  kind: "additive",
+  description: "Add --scrim-color and --scrim-opacity-*; a scrim's colour and strength are separate tokens",
+  apply(css) {
+    return ensureScale(css, {
+      entries: ENTRIES2,
+      sectionComment: "Scrim colour and strength, which each screen mixes where it paints",
+      anchorPrefixes: ["--scrim"]
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -568,7 +588,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_27_editorialSizeSteps,
   tokensCssMigration_2026_08_27_editorialLargeSteps,
   tokensCssMigration_2026_09_01_scrimRename,
-  tokensCssMigration_2026_09_01_tintScale
+  tokensCssMigration_2026_09_01_tintScale,
+  tokensCssMigration_2026_09_20_scrimColorAndOpacity
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/index.cjs

@@ -1960,8 +1960,56 @@ var componentMigration_2026_09_13_sectiondividerSurface = {
   }
 };
 
-// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+// src/editor/core/themes/migrations/2026-09-20-imagelightbox-scrim.ts
 var RENAMES7 = {
+  "--imagelightbox-overlay-surface": "--imagelightbox-scrim-surface"
+};
+var componentMigration_2026_09_20_imagelightboxScrim = {
+  id: "2026-09-20-imagelightbox-scrim",
+  fromVersion: 35,
+  toVersion: 36,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "imagelightbox") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMES7[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-20-scrim-color-and-opacity.ts
+var STOPS = {
+  "--scrim-low": "--scrim-opacity-low",
+  "--scrim": "--scrim-opacity",
+  "--scrim-high": "--scrim-opacity-high"
+};
+var SURFACE = /^--(imagelightbox|dialog)-scrim-surface$/;
+var componentMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  fromVersion: 36,
+  toVersion: 37,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = SURFACE.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      const stem = `--${match[1]}-scrim`;
+      const stop = STOPS[value];
+      out[`${stem}-color`] = stop ? "--scrim-color" : value;
+      out[`${stem}-opacity`] = stop ?? "1";
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -2011,7 +2059,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
   toVersion: 32,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES7[meta.component] : void 0;
+    const renames = meta.component ? RENAMES8[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -2022,7 +2070,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
-var RENAMES8 = {
+var RENAMES9 = {
   toggle: {
     "--toggle-label-text": "--toggle-label",
     "--toggle-disabled-label-text": "--toggle-disabled-label"
@@ -2034,7 +2082,7 @@ var componentMigration_2026_09_13_toggleLabel = {
   toVersion: 33,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES8[meta.component] : void 0;
+    const renames = meta.component ? RENAMES9[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -2045,7 +2093,7 @@ var componentMigration_2026_09_13_toggleLabel = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
-var RENAMES9 = {
+var RENAMES10 = {
   collapsiblesection: {
     "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
     "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
@@ -2059,7 +2107,7 @@ var componentMigration_2026_09_13_collapsiblesectionOpen = {
   toVersion: 34,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES9[meta.component] : void 0;
+    const renames = meta.component ? RENAMES10[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -2086,7 +2134,7 @@ var BADGE_SUFFIXES = [
   "icon-size"
 ];
 var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
-var RENAMES10 = {
+var RENAMES11 = {
   badge: Object.fromEntries(
     BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
   ),
@@ -2100,7 +2148,7 @@ var componentMigration_2026_09_13_badgeBrand = {
   toVersion: 35,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES10[meta.component] : void 0;
+    const renames = meta.component ? RENAMES11[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -2154,7 +2202,9 @@ var MIGRATIONS = [
   componentMigration_2026_09_13_cornerbadgePrefix,
   componentMigration_2026_09_13_toggleLabel,
   componentMigration_2026_09_13_collapsiblesectionOpen,
-  componentMigration_2026_09_13_badgeBrand
+  componentMigration_2026_09_13_badgeBrand,
+  componentMigration_2026_09_20_imagelightboxScrim,
+  componentMigration_2026_09_20_scrimColorAndOpacity
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -3575,7 +3625,7 @@ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
 };
 
 // vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
-var RENAMES11 = [
+var RENAMES12 = [
   ["--line-height-xs", "--line-height-none"],
   ["--line-height-sm", "--line-height-tighter"],
   ["--line-height-md", "--line-height-normal"],
@@ -3595,7 +3645,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 RENAMES11) out = renameToken2(out, oldName, newName);
+    for (const [oldName, newName] of RENAMES12) out = renameToken2(out, oldName, newName);
     out = removeToken(out, "--line-height-xl");
     out = ensureScale(out, {
       anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
@@ -3828,7 +3878,7 @@ var tokensCssMigration_2026_08_27_editorialLargeSteps = {
 };
 
 // vite-plugin/tokensCssMigrations/migrations/2026-09-01-scrim-rename.ts
-var RENAMES12 = [
+var RENAMES13 = [
   ["--overlay-low", "--scrim-low"],
   ["--overlay-high", "--scrim-high"],
   ["--overlay", "--scrim"]
@@ -3839,7 +3889,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 RENAMES12) out = renameToken2(out, oldName, newName);
+    for (const [oldName, newName] of RENAMES13) out = renameToken2(out, oldName, newName);
     return out;
   }
 };
@@ -3863,6 +3913,26 @@ var tokensCssMigration_2026_09_01_tintScale = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-09-20-scrim-color-and-opacity.ts
+var ENTRIES2 = [
+  { name: "--scrim-color", value: "rgb(20, 3, 0)" },
+  { name: "--scrim-opacity-low", value: "0.38" },
+  { name: "--scrim-opacity", value: "0.51" },
+  { name: "--scrim-opacity-high", value: "0.64" }
+];
+var tokensCssMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  kind: "additive",
+  description: "Add --scrim-color and --scrim-opacity-*; a scrim's colour and strength are separate tokens",
+  apply(css) {
+    return ensureScale(css, {
+      entries: ENTRIES2,
+      sectionComment: "Scrim colour and strength, which each screen mixes where it paints",
+      anchorPrefixes: ["--scrim"]
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -3879,7 +3949,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_27_editorialSizeSteps,
   tokensCssMigration_2026_08_27_editorialLargeSteps,
   tokensCssMigration_2026_09_01_scrimRename,
-  tokensCssMigration_2026_09_01_tintScale
+  tokensCssMigration_2026_09_01_tintScale,
+  tokensCssMigration_2026_09_20_scrimColorAndOpacity
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-D4WRIKEZ.js";
+} from "./chunk-M6BWSS6C.js";
 import {
   formatGradientValue,
   palettesToVars,
@@ -16,14 +16,14 @@ import {
 } from "./chunk-O6GQ6GBH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-REBHE3ZM.js";
+} from "./chunk-FD4FVDOC.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-RFVYPNRO.js";
+} from "./chunk-V2OVSC5Z.js";
 import {
   hexToOklch,
   oklchToRgb255,

package/dist-plugin/migrateData/index.cjs

@@ -1356,8 +1356,56 @@ var componentMigration_2026_09_13_sectiondividerSurface = {
   }
 };
 
-// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+// src/editor/core/themes/migrations/2026-09-20-imagelightbox-scrim.ts
 var RENAMES7 = {
+  "--imagelightbox-overlay-surface": "--imagelightbox-scrim-surface"
+};
+var componentMigration_2026_09_20_imagelightboxScrim = {
+  id: "2026-09-20-imagelightbox-scrim",
+  fromVersion: 35,
+  toVersion: 36,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "imagelightbox") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMES7[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-20-scrim-color-and-opacity.ts
+var STOPS = {
+  "--scrim-low": "--scrim-opacity-low",
+  "--scrim": "--scrim-opacity",
+  "--scrim-high": "--scrim-opacity-high"
+};
+var SURFACE = /^--(imagelightbox|dialog)-scrim-surface$/;
+var componentMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  fromVersion: 36,
+  toVersion: 37,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = SURFACE.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      const stem = `--${match[1]}-scrim`;
+      const stop = STOPS[value];
+      out[`${stem}-color`] = stop ? "--scrim-color" : value;
+      out[`${stem}-opacity`] = stop ?? "1";
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1407,7 +1455,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
   toVersion: 32,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES7[meta.component] : void 0;
+    const renames = meta.component ? RENAMES8[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1418,7 +1466,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
-var RENAMES8 = {
+var RENAMES9 = {
   toggle: {
     "--toggle-label-text": "--toggle-label",
     "--toggle-disabled-label-text": "--toggle-disabled-label"
@@ -1430,7 +1478,7 @@ var componentMigration_2026_09_13_toggleLabel = {
   toVersion: 33,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES8[meta.component] : void 0;
+    const renames = meta.component ? RENAMES9[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1441,7 +1489,7 @@ var componentMigration_2026_09_13_toggleLabel = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
-var RENAMES9 = {
+var RENAMES10 = {
   collapsiblesection: {
     "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
     "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
@@ -1455,7 +1503,7 @@ var componentMigration_2026_09_13_collapsiblesectionOpen = {
   toVersion: 34,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES9[meta.component] : void 0;
+    const renames = meta.component ? RENAMES10[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1482,7 +1530,7 @@ var BADGE_SUFFIXES = [
   "icon-size"
 ];
 var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
-var RENAMES10 = {
+var RENAMES11 = {
   badge: Object.fromEntries(
     BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
   ),
@@ -1496,7 +1544,7 @@ var componentMigration_2026_09_13_badgeBrand = {
   toVersion: 35,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES10[meta.component] : void 0;
+    const renames = meta.component ? RENAMES11[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1550,7 +1598,9 @@ var MIGRATIONS = [
   componentMigration_2026_09_13_cornerbadgePrefix,
   componentMigration_2026_09_13_toggleLabel,
   componentMigration_2026_09_13_collapsiblesectionOpen,
-  componentMigration_2026_09_13_badgeBrand
+  componentMigration_2026_09_13_badgeBrand,
+  componentMigration_2026_09_20_imagelightboxScrim,
+  componentMigration_2026_09_20_scrimColorAndOpacity
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/migrateData/index.js

@@ -7,10 +7,10 @@ import {
   normalizeTheme,
   planLegacyRenames,
   versionedFileResourceServer
-} from "../chunk-D4WRIKEZ.js";
+} from "../chunk-M6BWSS6C.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-REBHE3ZM.js";
+} from "../chunk-FD4FVDOC.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs