@motion-proto/live-tokens 0.61.0 → 0.62.0

package/.claude/skills/live-tokens-build-page/SKILL.md

@@ -10,7 +10,7 @@ Two rules above all else:
 1. **Use a shipped component if one fits.** Import from `@motion-proto/live-tokens/components/<Name>.svelte`. See [[live-tokens-pick-component]] for the catalogue and the confusing-pair decisions. Author custom markup only when nothing fits, and then consider [[live-tokens-create-component]] so the new piece is editable too.
 2. **Use theme tokens for every value.** Every color, spacing, radius, font-size, and font-family in page CSS is a `var(--token-*)`. No hex literals. No pixel literals. A change in `/live-tokens/editor` should repaint your page.
 
-For text, reach for a whole text style rather than assembling one: `--heading-xl` through `--heading-sm`, `--body-md`, `--body-sm`, `--eyebrow`, and `--code` each carry a `-font-family`, `-font-size`, `-font-weight`, `-line-height`, and `-letter-spacing`. A heading set from `--heading-lg-*` retypes when the theme's fonts change; one set from a raw `font-size` does not.
+For text, reach for a whole text style rather than assembling one: `--heading-xl` through `--heading-sm`, `--body-md`, `--body-sm`, `--editorial-md`, `--editorial-sm`, `--eyebrow`, and `--code` each carry a `-font-family`, `-font-size`, `-font-weight`, `-line-height`, and `-letter-spacing`. A heading set from `--heading-lg-*` retypes when the theme's fonts change; one set from a raw `font-size` does not.
 
 ## Layout
 

package/.claude/skills/live-tokens-pair-fonts/SKILL.md

@@ -24,7 +24,7 @@ Flags: `--dry-run` reports without writing. `--no-verify` skips the network and
 { "display": "Fraunces", "body": "Nunito Sans" }
 ```
 
-Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif`, `mono` and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-*` text style: it tracks the body face until a theme repoints it, so set it only when essays and articles should not carry the body face. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
+Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif`, `mono` and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-md-*` and `--editorial-sm-*` text styles: it tracks the body face until a theme repoints it, so set it only when essays and articles should not carry the body face. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
 
 ## Choose the body face first
 

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # Changelog
 
+## 0.62.0 — Editorial type reads as a pair
+
+### Added
+
+- **The editorial role has its own sizes.** The role shipped with a single
+  unsized bundle, so an editorial surface could only take the body size. It now
+  reads as a pair, matching body: `--editorial-md-*` and `--editorial-sm-*`,
+  both editable in the editor's Text Styles section beside the other styles, and
+  both carried by an `.editorial-md` / `.editorial-sm` class in `site.css`. Each
+  step mirrors its body counterpart apart from the family, so a project that
+  never repoints `--font-editorial` renders exactly as it did.
+- **`Card` takes `variant="bare"`.** A card with no icon and no title dropped
+  its header silently, which read the same as a card whose title had gone
+  missing. `bare` says the headerless card is the intent; the frame and body
+  keep every token the default variant uses, so padding, stroke and fill stay
+  editable. A default-variant card with nothing to put in its header now warns
+  in dev.
+- **Sketch mode reaches the component editor.** A component demo draws itself
+  the way the page will, sketch included, while the tab strips and property rows
+  around it stay chrome: they run on `--ui-*` tokens the layer knows nothing
+  about. The router hands the layer the root to paint, so a sketch style never
+  bleeds onto the editor's own routes.
+
+### Changed (breaking)
+
+- **`--editorial-*` is now `--editorial-md-*`.** The unsized bundle became the
+  medium step. A `breaking` tokens.css migration
+  (`2026-08-27-editorial-size-steps`) renames it and backfills both steps,
+  carrying any value already tuned. It never auto-applies: run
+  `npx live-tokens migrate`.
+
+### Changed
+
+- **Ink coverage is a levels control.** The dials read as a pile of unrelated
+  knobs because each one meant something different depending on the grain and
+  octave count under it. The field is now normalized to run black to white
+  whatever the noise beneath, so **Steps** flattens it into tones and **Output**
+  squeezes the whole of it into the range the ink covers, from palest to
+  densest. The field is squeezed into that gap, never clipped at it, so both
+  ends mean the same thing at every setting. The seven shipped presets are
+  retuned against the new response.
+- **Menus and tooltips are drawn solid whatever the coverage dials say.** They
+  float over arbitrary page content, so a fill worn through in patches let the
+  page show through them and they stopped reading as a surface the pointer can
+  land on.
+- **`SectionDivider` titles take no outline by default.** The three sizes each
+  carried a themed outline color, which drew a halo around every subsection
+  title on a page that never asked for one. All three default to transparent;
+  a theme that wants the halo sets the color.
+
+### Fixed
+
+- **Per-side padding no longer strands the base token.** `themed-padding`
+  emits `var(--x-side, <base>)` for each side, so a per-side token is an
+  override slot the editor fills when the user splits the padding. `Card` and
+  `SegmentedControl` declared sides that named a literal step instead, which
+  always beat that fallback and left the base inert: merging split padding back
+  to one value cleared the side aliases, the fallback never took over, and the
+  padding control moved nothing. Both now track their own base, and
+  `paddingBaseStaysLive` holds every component that uses `themed-padding` to
+  the same rule. `Card`'s header and body padding are symmetric as a result;
+  a theme that wants the asymmetry back sets the per-side aliases.
+- **`ImageLightbox`'s tile fill stays on the closed tile.** The fill also
+  painted the opened stage, where it had nothing to do: the stage rides a
+  near-opaque overlay that already backs transparent art, so the fill only
+  showed as a slab of theme color in the gap the image's aspect left inside the
+  stage box. The open stage now takes no fill of its own, matching the tile
+  shadow, which already stopped at the same edge.
+- **Sketch settings no longer accumulate a trace on `globalThis`.** Debug
+  instrumentation left in `sketchStore` pushed an entry onto an unbounded
+  global array on every settings write, every share and every cross-frame
+  adopt. It is gone.
+
 ## 0.61.0 — A surface says which way it leans
 
 ### Added

package/dist-plugin/{chunk-OIOXU7FR.js → chunk-OPYOK2CA.js}

@@ -377,37 +377,15 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
 
 // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
 var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
-var BUNDLE2 = [
-  { name: "--editorial-font-family", value: "var(--font-editorial)" },
-  { name: "--editorial-font-size", value: "var(--font-size-md)" },
-  { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
-  { name: "--editorial-line-height", value: "var(--line-height-normal)" },
-  { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
-];
 var tokensCssMigration_2026_08_25_editorialTypeRole = {
   id: "2026-08-25-editorial-type-role",
   kind: "additive",
-  description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
+  description: "Add the editorial type role (--font-editorial)",
   apply(css) {
-    const withStack = ensureScale(css, {
+    return ensureScale(css, {
       anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
       entries: STACK
     });
-    return ensureScale(withStack, {
-      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
-      anchorPrefixes: [
-        "--eyebrow-",
-        "--code-",
-        "--body-",
-        "--heading-",
-        "--letter-spacing-",
-        "--line-height-",
-        "--font-weight-",
-        "--font-size-",
-        "--font-"
-      ],
-      entries: BUNDLE2
-    });
   }
 };
 
@@ -460,6 +438,47 @@ ${css.slice(at)}`;
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
+var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
+var BUNDLE2 = [
+  { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialSizeSteps = {
+  id: "2026-08-27-editorial-size-steps",
+  kind: "breaking",
+  description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
+  apply(css) {
+    let out = css;
+    for (const axis of AXES) {
+      out = renameToken(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
+    }
+    return ensureScale(out, {
+      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE2
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -472,7 +491,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
   tokensCssMigration_2026_08_26_gradientStops,
-  tokensCssMigration_2026_08_27_backdropPolarity
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/index.cjs

@@ -2510,37 +2510,15 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
 
 // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
 var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
-var BUNDLE2 = [
-  { name: "--editorial-font-family", value: "var(--font-editorial)" },
-  { name: "--editorial-font-size", value: "var(--font-size-md)" },
-  { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
-  { name: "--editorial-line-height", value: "var(--line-height-normal)" },
-  { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
-];
 var tokensCssMigration_2026_08_25_editorialTypeRole = {
   id: "2026-08-25-editorial-type-role",
   kind: "additive",
-  description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
+  description: "Add the editorial type role (--font-editorial)",
   apply(css) {
-    const withStack = ensureScale(css, {
+    return ensureScale(css, {
       anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
       entries: STACK
     });
-    return ensureScale(withStack, {
-      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
-      anchorPrefixes: [
-        "--eyebrow-",
-        "--code-",
-        "--body-",
-        "--heading-",
-        "--letter-spacing-",
-        "--line-height-",
-        "--font-weight-",
-        "--font-size-",
-        "--font-"
-      ],
-      entries: BUNDLE2
-    });
   }
 };
 
@@ -2593,6 +2571,47 @@ ${css.slice(at)}`;
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
+var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
+var BUNDLE2 = [
+  { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialSizeSteps = {
+  id: "2026-08-27-editorial-size-steps",
+  kind: "breaking",
+  description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
+  apply(css) {
+    let out = css;
+    for (const axis of AXES) {
+      out = renameToken2(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
+    }
+    return ensureScale(out, {
+      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE2
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -2605,7 +2624,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
   tokensCssMigration_2026_08_26_gradientStops,
-  tokensCssMigration_2026_08_27_backdropPolarity
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/index.js

@@ -23,7 +23,7 @@ import {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-OIOXU7FR.js";
+} from "./chunk-OPYOK2CA.js";
 import {
   hexToOklch,
   oklchToRgb255,

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -464,37 +464,15 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
 
 // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
 var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
-var BUNDLE2 = [
-  { name: "--editorial-font-family", value: "var(--font-editorial)" },
-  { name: "--editorial-font-size", value: "var(--font-size-md)" },
-  { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
-  { name: "--editorial-line-height", value: "var(--line-height-normal)" },
-  { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
-];
 var tokensCssMigration_2026_08_25_editorialTypeRole = {
   id: "2026-08-25-editorial-type-role",
   kind: "additive",
-  description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
+  description: "Add the editorial type role (--font-editorial)",
   apply(css) {
-    const withStack = ensureScale(css, {
+    return ensureScale(css, {
       anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
       entries: STACK
     });
-    return ensureScale(withStack, {
-      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
-      anchorPrefixes: [
-        "--eyebrow-",
-        "--code-",
-        "--body-",
-        "--heading-",
-        "--letter-spacing-",
-        "--line-height-",
-        "--font-weight-",
-        "--font-size-",
-        "--font-"
-      ],
-      entries: BUNDLE2
-    });
   }
 };
 
@@ -547,6 +525,47 @@ ${css.slice(at)}`;
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
+var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
+var BUNDLE2 = [
+  { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialSizeSteps = {
+  id: "2026-08-27-editorial-size-steps",
+  kind: "breaking",
+  description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
+  apply(css) {
+    let out = css;
+    for (const axis of AXES) {
+      out = renameToken(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
+    }
+    return ensureScale(out, {
+      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE2
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -593,7 +612,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
   tokensCssMigration_2026_08_26_gradientStops,
-  tokensCssMigration_2026_08_27_backdropPolarity
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,7 +13,7 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-OIOXU7FR.js";
+} from "../chunk-OPYOK2CA.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.61.0",
+  "version": "0.62.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/app/site.css

@@ -205,6 +205,22 @@ blockquote {
   letter-spacing: var(--body-sm-letter-spacing);
 }
 
+.editorial-md {
+  font-family: var(--editorial-md-font-family);
+  font-size: var(--editorial-md-font-size);
+  font-weight: var(--editorial-md-font-weight);
+  line-height: var(--editorial-md-line-height);
+  letter-spacing: var(--editorial-md-letter-spacing);
+}
+
+.editorial-sm {
+  font-family: var(--editorial-sm-font-family);
+  font-size: var(--editorial-sm-font-size);
+  font-weight: var(--editorial-sm-font-weight);
+  line-height: var(--editorial-sm-line-height);
+  letter-spacing: var(--editorial-sm-letter-spacing);
+}
+
 .eyebrow {
   font-family: var(--eyebrow-font-family);
   font-size: var(--eyebrow-font-size);

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

@@ -134,7 +134,7 @@
   }
 </script>
 
-<ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body." tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body. The bare variant drops the header and keeps every frame and body token." tokens={allTokens} {linked}>
   <VariantGroup
     name="card"
     title="Card"
@@ -165,6 +165,9 @@
         <Card title="Card title" icon="fas fa-star" class={previewClass}>
           <div class="content-placeholder">Content Placeholder</div>
         </Card>
+        <Card variant="bare" class={previewClass}>
+          <div class="content-placeholder">Bare variant</div>
+        </Card>
       </div>
     {/snippet}
   </VariantGroup>
@@ -172,6 +175,9 @@
 
 <style>
   .card-demo {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-12);
     min-width: 16rem;
     max-width: 28rem;
   }

package/src/editor/component-editor/scaffolding/VariantGroup.svelte

@@ -11,6 +11,8 @@
   import type { CssVarRef } from '../../core/store/editorTypes';
   import { cssStringToRef, refToCss } from '../../core/store/cssVarRef';
   import { getEditorContext } from './editorContext';
+  import { setSketchScope } from '../../core/sketch/sketchLayer';
+  import { sketchEnabled, sketchSettings } from '../../core/sketch/sketchStore';
   import type { Token, TypeGroupConfig } from './types';
   import type { Sibling } from './siblings';
 
@@ -84,6 +86,15 @@
   let bgMode: 'default' | 'image' | 'color' = $state('default');
   let bgVar = $derived(`--backdrop-${component ?? name}-surface`);
 
+  // The demo shows the component as the page will draw it, sketch included, so
+  // the scope attribute goes on this wrapper. It stops here: the tab strips and
+  // property rows around it are chrome and run on --ui-* tokens the layer knows
+  // nothing about. Only one of the four render sites below is ever mounted.
+  let sketchStage = $state<HTMLDivElement | undefined>(undefined);
+  $effect(() => {
+    setSketchScope(sketchStage ?? null, $sketchEnabled ? $sketchSettings : null);
+  });
+
   const editorCtx = getEditorContext();
   const linkedOrderStore = editorCtx?.linkedOrder ?? writable<Map<string, number> | null>(null);
   const focusedVariantStore = editorCtx?.focusedVariant ?? writable<string | null>(null);
@@ -397,7 +408,9 @@
         {/if}
       </div>
       {#if unboxedPreview}
-        {@render children?.({ activeState: activeTab })}
+        <div class="sketch-scope" bind:this={sketchStage}>
+          {@render children?.({ activeState: activeTab })}
+        </div>
       {:else}
         <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding={backdropPadding}>
           {#snippet controls()}
@@ -407,7 +420,9 @@
               {@render canvasToolbarExtras?.()}
             </div>
           {/snippet}
+          <div class="sketch-scope" bind:this={sketchStage}>
           {@render children?.({ activeState: activeTab })}
+        </div>
         </ShadowBackdrop>
       {/if}
 
@@ -508,10 +523,14 @@
     {/if}
   {:else}
     {#if unboxedPreview}
-      {@render children?.({ activeState: '' })}
+      <div class="sketch-scope" bind:this={sketchStage}>
+        {@render children?.({ activeState: '' })}
+      </div>
     {:else}
       <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding={backdropPadding}>
+        <div class="sketch-scope" bind:this={sketchStage}>
         {@render children?.({ activeState: '' })}
+      </div>
       </ShadowBackdrop>
     {/if}
     <TokenLayout
@@ -572,6 +591,10 @@
     pointer-events: none;
   }
 
+  .sketch-scope {
+    display: contents;
+  }
+
   .preview-header {
     display: flex;
     align-items: center;