@motion-proto/live-tokens 0.82.0 → 0.83.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-6JKUYCPL.js}

@@ -1176,8 +1176,27 @@ 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-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1227,7 +1246,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 +1257,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 +1269,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 +1280,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 +1294,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 +1321,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 +1335,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 +1389,8 @@ 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
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

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

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

package/dist-plugin/index.cjs

@@ -1960,8 +1960,27 @@ 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-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -2011,7 +2030,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 +2041,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 +2053,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 +2064,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 +2078,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 +2105,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 +2119,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 +2173,8 @@ 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
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -3575,7 +3595,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 +3615,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 +3848,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 +3859,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;
   }
 };

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-D4WRIKEZ.js";
+} from "./chunk-LBZISJPG.js";
 import {
   formatGradientValue,
   palettesToVars,
@@ -16,7 +16,7 @@ import {
 } from "./chunk-O6GQ6GBH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-REBHE3ZM.js";
+} from "./chunk-6JKUYCPL.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,

package/dist-plugin/migrateData/index.cjs

@@ -1356,8 +1356,27 @@ 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-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1407,7 +1426,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 +1437,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 +1449,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 +1460,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 +1474,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 +1501,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 +1515,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 +1569,8 @@ 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
 ];
 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-LBZISJPG.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-REBHE3ZM.js";
+} from "../chunk-6JKUYCPL.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs

package/dist-plugin/setColors/index.cjs

@@ -2370,8 +2370,27 @@ 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-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -2421,7 +2440,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)) {
@@ -2432,7 +2451,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"
@@ -2444,7 +2463,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)) {
@@ -2455,7 +2474,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",
@@ -2469,7 +2488,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)) {
@@ -2496,7 +2515,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}`])
   ),
@@ -2510,7 +2529,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)) {
@@ -2564,7 +2583,8 @@ 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
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/setColors/index.js

@@ -18,7 +18,7 @@ import {
 } from "../chunk-O6GQ6GBH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-REBHE3ZM.js";
+} from "../chunk-6JKUYCPL.js";
 import {
   cssColorToOklch,
   gamutClamp,

package/dist-plugin/setGeometry/index.cjs

@@ -1519,8 +1519,27 @@ 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-13-cornerbadge-prefix.ts
+var RENAMES8 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1570,7 +1589,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)) {
@@ -1581,7 +1600,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"
@@ -1593,7 +1612,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)) {
@@ -1604,7 +1623,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",
@@ -1618,7 +1637,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)) {
@@ -1645,7 +1664,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}`])
   ),
@@ -1659,7 +1678,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)) {
@@ -1713,7 +1732,8 @@ 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
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/setGeometry/index.js

@@ -1,6 +1,6 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-REBHE3ZM.js";
+} from "../chunk-6JKUYCPL.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.82.0",
+  "version": "0.83.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -199,6 +199,8 @@
     "collapse:theme": "node scripts/collapse-theme-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
+    "eval": "bash scripts/eval.sh",
+    "build:eval-project": "bash scripts/build-eval-project.sh",
     "check:smoke-component-tests": "bash scripts/smoke-component-tests.sh",
     "check:smoke-page-tests": "bash scripts/smoke-page-tests.sh",
     "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:pages && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:cli-strings && npm run check:skill-sources && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create && npm run check:smoke-component-tests && npm run check:smoke-page-tests"

package/src/editor/component-editor/ImageLightboxEditor.svelte

@@ -15,7 +15,7 @@
       { label: 'tile shadow',                       variable: '--imagelightbox-tile-shadow' },
     ],
     overlay: [
-      { label: 'backdrop color', groupKey: 'surface', variable: '--imagelightbox-overlay-surface' },
+      { label: 'scrim color', groupKey: 'surface', variable: '--imagelightbox-scrim-surface' },
     ],
     chrome: [
       { label: 'surface color',       groupKey: 'surface', variable: '--imagelightbox-chrome-surface' },