@motion-proto/live-tokens 0.94.3 → 0.96.0

package/dist-plugin/migrateData/index.cjs

@@ -1438,6 +1438,28 @@ var colorsAndTypeMigration_2026_09_21_washColorAndOpacity = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-10-15-responsive-columns.ts
+var RENAMES8 = {
+  "--columns-gutter": "--columns-desktop-gutter",
+  "--columns-margin": "--columns-desktop-margin"
+};
+var SHIPPED = {
+  "--columns-count": ["12"],
+  "--columns-gutter": ["32px"],
+  "--columns-margin": ["0px", "0"]
+};
+var colorsAndTypeMigration_2026_10_15_responsiveColumns = {
+  id: "2026-10-15-responsive-columns",
+  fromVersion: 9,
+  toVersion: 10,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    return Object.fromEntries(
+      Object.entries(rawVars).filter(([name, value]) => !SHIPPED[name]?.includes(value.trim())).map(([name, value]) => [RENAMES8[name] ?? name, value])
+    );
+  }
+};
+
 // src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts
 var STOPS2 = {
   "--scrim-opacity-low": "--scrim-low",
@@ -1476,7 +1498,7 @@ var componentMigration_2026_09_21_scrimSurface = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
-var RENAMES8 = {
+var RENAMES9 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1526,7 +1548,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
   toVersion: 32,
   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)) {
@@ -1537,7 +1559,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
-var RENAMES9 = {
+var RENAMES10 = {
   toggle: {
     "--toggle-label-text": "--toggle-label",
     "--toggle-disabled-label-text": "--toggle-disabled-label"
@@ -1549,7 +1571,7 @@ var componentMigration_2026_09_13_toggleLabel = {
   toVersion: 33,
   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)) {
@@ -1560,7 +1582,7 @@ var componentMigration_2026_09_13_toggleLabel = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
-var RENAMES10 = {
+var RENAMES11 = {
   collapsiblesection: {
     "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
     "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
@@ -1574,7 +1596,7 @@ var componentMigration_2026_09_13_collapsiblesectionOpen = {
   toVersion: 34,
   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)) {
@@ -1601,7 +1623,7 @@ var BADGE_SUFFIXES = [
   "icon-size"
 ];
 var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
-var RENAMES11 = {
+var RENAMES12 = {
   badge: Object.fromEntries(
     BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
   ),
@@ -1615,7 +1637,7 @@ var componentMigration_2026_09_13_badgeBrand = {
   toVersion: 35,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES11[meta.component] : void 0;
+    const renames = meta.component ? RENAMES12[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1673,7 +1695,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_20_imagelightboxScrim,
   componentMigration_2026_09_20_scrimColorAndOpacity,
   colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
-  componentMigration_2026_09_21_scrimSurface
+  componentMigration_2026_09_21_scrimSurface,
+  colorsAndTypeMigration_2026_10_15_responsiveColumns
 ];
 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-W5VQV32K.js";
+} from "../chunk-GYRULB2X.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-ONYAIXCZ.js";
+} from "../chunk-QQASYPW7.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs

package/dist-plugin/setColors/index.cjs

@@ -586,19 +586,6 @@ function palettesToVars(palettes) {
   return out;
 }
 
-// src/editor/core/store/editorCore.ts
-var import_store = require("svelte/store");
-var emptyStateFactory = () => ({});
-var store = (0, import_store.writable)(emptyStateFactory());
-var past = [];
-var future = [];
-var savedAtIndex = 0;
-var historyTick = (0, import_store.writable)(0);
-var editorState = { subscribe: store.subscribe };
-var canUndo = (0, import_store.derived)(historyTick, () => past.length > 0);
-var canRedo = (0, import_store.derived)(historyTick, () => future.length > 0);
-var dirty = (0, import_store.derived)(historyTick, () => past.length !== savedAtIndex);
-
 // src/editor/core/themes/parsers/colorOpacity.ts
 function formatColorOpacity(name, opacity) {
   return `color-mix(in srgb, var(${name}) ${opacity}%, transparent)`;
@@ -2452,6 +2439,28 @@ var colorsAndTypeMigration_2026_09_21_washColorAndOpacity = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-10-15-responsive-columns.ts
+var RENAMES8 = {
+  "--columns-gutter": "--columns-desktop-gutter",
+  "--columns-margin": "--columns-desktop-margin"
+};
+var SHIPPED = {
+  "--columns-count": ["12"],
+  "--columns-gutter": ["32px"],
+  "--columns-margin": ["0px", "0"]
+};
+var colorsAndTypeMigration_2026_10_15_responsiveColumns = {
+  id: "2026-10-15-responsive-columns",
+  fromVersion: 9,
+  toVersion: 10,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    return Object.fromEntries(
+      Object.entries(rawVars).filter(([name, value]) => !SHIPPED[name]?.includes(value.trim())).map(([name, value]) => [RENAMES8[name] ?? name, value])
+    );
+  }
+};
+
 // src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts
 var STOPS2 = {
   "--scrim-opacity-low": "--scrim-low",
@@ -2490,7 +2499,7 @@ var componentMigration_2026_09_21_scrimSurface = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
-var RENAMES8 = {
+var RENAMES9 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -2540,7 +2549,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
   toVersion: 32,
   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)) {
@@ -2551,7 +2560,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
-var RENAMES9 = {
+var RENAMES10 = {
   toggle: {
     "--toggle-label-text": "--toggle-label",
     "--toggle-disabled-label-text": "--toggle-disabled-label"
@@ -2563,7 +2572,7 @@ var componentMigration_2026_09_13_toggleLabel = {
   toVersion: 33,
   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)) {
@@ -2574,7 +2583,7 @@ var componentMigration_2026_09_13_toggleLabel = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
-var RENAMES10 = {
+var RENAMES11 = {
   collapsiblesection: {
     "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
     "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
@@ -2588,7 +2597,7 @@ var componentMigration_2026_09_13_collapsiblesectionOpen = {
   toVersion: 34,
   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)) {
@@ -2615,7 +2624,7 @@ var BADGE_SUFFIXES = [
   "icon-size"
 ];
 var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
-var RENAMES11 = {
+var RENAMES12 = {
   badge: Object.fromEntries(
     BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
   ),
@@ -2629,7 +2638,7 @@ var componentMigration_2026_09_13_badgeBrand = {
   toVersion: 35,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES11[meta.component] : void 0;
+    const renames = meta.component ? RENAMES12[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -2687,7 +2696,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_20_imagelightboxScrim,
   componentMigration_2026_09_20_scrimColorAndOpacity,
   colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
-  componentMigration_2026_09_21_scrimSurface
+  componentMigration_2026_09_21_scrimSurface,
+  colorsAndTypeMigration_2026_10_15_responsiveColumns
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/setColors/index.js

@@ -15,10 +15,10 @@ import {
   scaleToCssVar,
   setCurveAnchor,
   syncBaseAnchor
-} from "../chunk-O6GQ6GBH.js";
+} from "../chunk-A4TBP4MM.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-ONYAIXCZ.js";
+} from "../chunk-QQASYPW7.js";
 import {
   cssColorToOklch,
   gamutClamp,
@@ -31,19 +31,6 @@ import {
   resolveDataDirs
 } from "../chunk-6WGFOJXO.js";
 
-// src/editor/core/store/editorCore.ts
-import { writable, derived, get } from "svelte/store";
-var emptyStateFactory = () => ({});
-var store = writable(emptyStateFactory());
-var past = [];
-var future = [];
-var savedAtIndex = 0;
-var historyTick = writable(0);
-var editorState = { subscribe: store.subscribe };
-var canUndo = derived(historyTick, () => past.length > 0);
-var canRedo = derived(historyTick, () => future.length > 0);
-var dirty = derived(historyTick, () => past.length !== savedAtIndex);
-
 // src/editor/core/themes/slices/gradients.ts
 function makeDefaultGradients() {
   return [

package/dist-plugin/setGeometry/index.cjs

@@ -1600,6 +1600,28 @@ var colorsAndTypeMigration_2026_09_21_washColorAndOpacity = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-10-15-responsive-columns.ts
+var RENAMES8 = {
+  "--columns-gutter": "--columns-desktop-gutter",
+  "--columns-margin": "--columns-desktop-margin"
+};
+var SHIPPED = {
+  "--columns-count": ["12"],
+  "--columns-gutter": ["32px"],
+  "--columns-margin": ["0px", "0"]
+};
+var colorsAndTypeMigration_2026_10_15_responsiveColumns = {
+  id: "2026-10-15-responsive-columns",
+  fromVersion: 9,
+  toVersion: 10,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    return Object.fromEntries(
+      Object.entries(rawVars).filter(([name, value]) => !SHIPPED[name]?.includes(value.trim())).map(([name, value]) => [RENAMES8[name] ?? name, value])
+    );
+  }
+};
+
 // src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts
 var STOPS2 = {
   "--scrim-opacity-low": "--scrim-low",
@@ -1638,7 +1660,7 @@ var componentMigration_2026_09_21_scrimSurface = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
-var RENAMES8 = {
+var RENAMES9 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1688,7 +1710,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
   toVersion: 32,
   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)) {
@@ -1699,7 +1721,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
-var RENAMES9 = {
+var RENAMES10 = {
   toggle: {
     "--toggle-label-text": "--toggle-label",
     "--toggle-disabled-label-text": "--toggle-disabled-label"
@@ -1711,7 +1733,7 @@ var componentMigration_2026_09_13_toggleLabel = {
   toVersion: 33,
   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)) {
@@ -1722,7 +1744,7 @@ var componentMigration_2026_09_13_toggleLabel = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
-var RENAMES10 = {
+var RENAMES11 = {
   collapsiblesection: {
     "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
     "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
@@ -1736,7 +1758,7 @@ var componentMigration_2026_09_13_collapsiblesectionOpen = {
   toVersion: 34,
   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)) {
@@ -1763,7 +1785,7 @@ var BADGE_SUFFIXES = [
   "icon-size"
 ];
 var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
-var RENAMES11 = {
+var RENAMES12 = {
   badge: Object.fromEntries(
     BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
   ),
@@ -1777,7 +1799,7 @@ var componentMigration_2026_09_13_badgeBrand = {
   toVersion: 35,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES11[meta.component] : void 0;
+    const renames = meta.component ? RENAMES12[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1835,7 +1857,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_20_imagelightboxScrim,
   componentMigration_2026_09_20_scrimColorAndOpacity,
   colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
-  componentMigration_2026_09_21_scrimSurface
+  componentMigration_2026_09_21_scrimSurface,
+  colorsAndTypeMigration_2026_10_15_responsiveColumns
 ];
 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-ONYAIXCZ.js";
+} from "../chunk-QQASYPW7.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -173,7 +173,7 @@ function setTokenValue(css, name, value, opts = {}) {
   }
   return changed ? lines.join("\n") : css;
 }
-function appendMediaBlock(css, query, entries) {
+function appendMediaBlock(css, query, entries, opts = {}) {
   const lines = css.split("\n");
   const at = query.trim();
   const blocks = findTopLevelBlocks(lines, (line) => mediaQueryOf(line) === at);
@@ -185,6 +185,12 @@ function appendMediaBlock(css, query, entries) {
   const media = blocks.find((b) => b.end > b.start);
   if (!media) {
     const block = [`@media ${at} {`, "  :root {", ...declarationLines(missing, "    "), "  }", "}", ""];
+    const before = opts.before?.trim();
+    const next = before === void 0 ? void 0 : findTopLevelBlocks(lines, (line) => mediaQueryOf(line) === before)[0];
+    if (next) {
+      lines.splice(next.start, 0, ...block);
+      return lines.join("\n");
+    }
     while (lines.length > 0 && lines[lines.length - 1].trim() === "") lines.pop();
     return [...lines, "", ...block].join("\n");
   }
@@ -1615,6 +1621,50 @@ var tokensCssMigration_2026_10_08_typeScales = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-10-15-responsive-columns.ts
+var DESKTOP = [
+  {
+    structural: "--columns-gutter",
+    desktop: "--columns-desktop-gutter",
+    shipped: "clamp(0.5rem, 1.5vw, 1.5rem)",
+    value: "32px"
+  },
+  { structural: "--columns-margin", desktop: "--columns-desktop-margin", shipped: "0", value: "32px" }
+];
+var SMALLER = [
+  { name: "--columns-tablet-gutter", value: "24px" },
+  { name: "--columns-tablet-margin", value: "24px" },
+  { name: "--columns-phone-gutter", value: "16px" },
+  { name: "--columns-phone-margin", value: "16px" }
+];
+var repoints = (viewport) => DESKTOP.map(({ structural }) => ({
+  name: structural,
+  value: `var(${structural.replace("--columns-", `--columns-${viewport}-`)})`
+}));
+var tokensCssMigration_2026_10_15_responsiveColumns = {
+  id: "2026-10-15-responsive-columns",
+  kind: "breaking",
+  description: "Give the column grid a gutter and margin per viewport, and re-point --columns-gutter and --columns-margin at them",
+  apply(css) {
+    const values = collectTokenValues(css);
+    const pending = DESKTOP.filter(({ desktop }) => !values.has(desktop));
+    let out = ensureScale(css, {
+      anchorPrefixes: ["--columns-"],
+      entries: [
+        ...pending.map(({ structural, desktop, shipped, value }) => {
+          const current = values.get(structural);
+          return { name: desktop, value: current === void 0 || current === shipped ? value : current };
+        }),
+        ...SMALLER
+      ]
+    });
+    for (const { structural, desktop } of pending) out = setTokenValue(out, structural, `var(${desktop})`);
+    out = ensureScale(out, { anchorPrefixes: ["--columns-"], entries: repoints("desktop") });
+    out = appendMediaBlock(out, "(max-width: 767px)", repoints("tablet"), { before: "(max-width: 480px)" });
+    return appendMediaBlock(out, "(max-width: 480px)", repoints("phone"));
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -1670,7 +1720,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_09_01_tintScale,
   tokensCssMigration_2026_09_20_scrimColorAndOpacity,
   tokensCssMigration_2026_09_21_tintColorAndOpacity,
-  tokensCssMigration_2026_10_08_typeScales
+  tokensCssMigration_2026_10_08_typeScales,
+  tokensCssMigration_2026_10_15_responsiveColumns
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.d.cts

@@ -110,12 +110,19 @@ interface SetTokenValueOptions {
  * `:root` does not declare `name`.
  */
 declare function setTokenValue(css: string, name: string, value: string, opts?: SetTokenValueOptions): string;
+interface AppendMediaBlockOptions {
+    /**
+     * A query whose first top-level block a new block goes before. A block that
+     * overlaps a narrower one has to precede it, or it wins the cascade there.
+     */
+    before?: string;
+}
 /**
  * Append each entry that no top-level `@media <query>` block declares yet to
  * that block's `:root`. The query must match exactly. With no such block, a new
- * one goes at the end of the file.
+ * one goes before the first `opts.before` block, or else at the end of the file.
  */
-declare function appendMediaBlock(css: string, query: string, entries: ScaleEntry[]): string;
+declare function appendMediaBlock(css: string, query: string, entries: ScaleEntry[], opts?: AppendMediaBlockOptions): string;
 
 /**
  * Registered tokens-css migrations, applied in array order. Unlike the

package/dist-plugin/tokensCssMigrations/index.d.ts

@@ -110,12 +110,19 @@ interface SetTokenValueOptions {
  * `:root` does not declare `name`.
  */
 declare function setTokenValue(css: string, name: string, value: string, opts?: SetTokenValueOptions): string;
+interface AppendMediaBlockOptions {
+    /**
+     * A query whose first top-level block a new block goes before. A block that
+     * overlaps a narrower one has to precede it, or it wins the cascade there.
+     */
+    before?: string;
+}
 /**
  * Append each entry that no top-level `@media <query>` block declares yet to
  * that block's `:root`. The query must match exactly. With no such block, a new
- * one goes at the end of the file.
+ * one goes before the first `opts.before` block, or else at the end of the file.
  */
-declare function appendMediaBlock(css: string, query: string, entries: ScaleEntry[]): string;
+declare function appendMediaBlock(css: string, query: string, entries: ScaleEntry[], opts?: AppendMediaBlockOptions): string;
 
 /**
  * Registered tokens-css migrations, applied in array order. Unlike the

package/dist-plugin/tokensCssMigrations/index.js

@@ -15,7 +15,7 @@ import {
   semverBumpType,
   setTokenValue,
   validateTokensCss
-} from "../chunk-7XSUHJUH.js";
+} from "../chunk-4J6JPSVS.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.94.3",
+  "version": "0.96.0",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
     "svelte",
@@ -164,11 +167,12 @@
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:e2e": "npm run test:e2e:contract && npm run test:e2e:contract-defects && npm run test:e2e:page-defects && npm run test:e2e:stateful",
+    "test:e2e": "npm run test:e2e:contract && npm run test:e2e:contract-defects && npm run test:e2e:page-defects && npm run test:e2e:stateful && npm run test:e2e:production-css",
     "test:e2e:contract": "playwright test --project=contract --workers=${PLAYWRIGHT_WORKERS:-4}",
     "test:e2e:stateful": "playwright test tests/e2e/live-editing.spec.ts tests/e2e/theme-workflow.spec.ts --workers=1",
     "test:e2e:contract-defects": "playwright test --project=contract-defects --workers=${PLAYWRIGHT_WORKERS:-4}",
     "test:e2e:page-defects": "playwright test --project=page-defects --workers=${PLAYWRIGHT_WORKERS:-4}",
+    "test:e2e:production-css": "playwright test tests/e2e/production-css.spec.ts --workers=1",
     "test:e2e:components": "playwright test --project=contract src/testing/component-render.contract.ts",
     "test:e2e:ui": "playwright test --ui",
     "test:registry-contract": "vitest run --config vitest.contract.config.ts",
@@ -241,6 +245,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^7.2.0",
     "highlight.js": "^11.11.1",
-    "marked": "^18.0.4"
+    "marked": "^18.0.4",
+    "postcss": "^8.5.26"
   }
 }

package/src/demo/Demo.svelte

@@ -36,14 +36,24 @@
 </div>
 
 <style>
+  /* Sections place themselves on these spans, and the full-width ones nest a
+     subgrid, so the breakpoints below are the only place a section's columns
+     change. minmax(0, 1fr) keeps a wide child from widening its track. */
   .kit {
+    --kit-content: 2 / -2;
+    --kit-narrow: 3 / -3;
+    --kit-section-lead: var(--space-32);
+    --kit-quote-pause: var(--space-32);
+    --kit-footer-lead: var(--space-32);
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
+    grid-template-columns: repeat(var(--columns-count), minmax(0, 1fr));
     column-gap: var(--columns-gutter);
     row-gap: var(--space-64);
+    box-sizing: content-box;
     max-width: var(--columns-max-width);
     margin: 0 auto;
-    padding: var(--space-48) var(--space-32);
+    padding-block: var(--space-48);
+    padding-inline: var(--columns-margin);
     min-height: 100vh;
   }
 
@@ -57,11 +67,21 @@
     margin-bottom: 0;
   }
 
-  /* Equal lead-in above these three sections: row-gap (64) + 48 = 112px. */
+  /* Every titled section opens with the same lead-in: row-gap, this margin,
+     and the SectionDivider's own top margin. The quote pauses between the
+     layers and the panel below it, and the footer sets off from the page. */
   .kit > :global(.kit-section),
   .kit > :global(.layers),
   .kit > :global(.claude) {
-    margin-top: var(--space-32);
+    margin-top: var(--kit-section-lead);
+  }
+
+  .kit > :global(.offering) {
+    margin-block: var(--kit-quote-pause);
+  }
+
+  .kit > :global(.provenance) {
+    margin-top: var(--kit-footer-lead);
   }
 
   /* Inline code styling cascades into every section via :global descendants. */
@@ -75,10 +95,24 @@
     color: var(--text-primary);
   }
 
+  @media (max-width: 1200px) {
+    .kit {
+      --kit-content: 1 / -1;
+      --kit-narrow: 2 / -2;
+    }
+  }
+
   @media (max-width: 600px) {
+    .kit {
+      --kit-narrow: 1 / -1;
+    }
+
     .kit,
     .kit.has-bar {
-      padding: var(--space-32) var(--space-16);
+      --kit-section-lead: var(--space-8);
+      --kit-quote-pause: var(--space-16);
+      --kit-footer-lead: var(--space-16);
+      padding-block: var(--space-32);
       row-gap: var(--space-48);
     }
   }