@motion-proto/live-tokens 0.28.0 → 0.29.0

package/dist-plugin/{chunk-CUC32QJ2.js → chunk-2TW77U3O.js}

@@ -154,6 +154,25 @@ var tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-06-03-transform-scale-additions.ts
+var tokensCssMigration_2026_06_03_transformScaleAdditions = {
+  id: "2026-06-03-transform-scale-additions",
+  description: "Add the --scale-{sm..2xl} transform-multiplier scale",
+  apply(css) {
+    return ensureScale(css, {
+      sectionComment: "Transform-scale multipliers (e.g. hover zoom). 5% per step.",
+      anchorPrefixes: ["--blur-", "--shadow-", "--radius-"],
+      entries: [
+        { name: "--scale-sm", value: "1.05" },
+        { name: "--scale-md", value: "1.1" },
+        { name: "--scale-lg", value: "1.15" },
+        { name: "--scale-xl", value: "1.2" },
+        { name: "--scale-2xl", value: "1.25" }
+      ]
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 import fs from "fs";
 import path from "path";
@@ -203,7 +222,8 @@ function resolveDataDirs(opts = {}) {
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
-  tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup
+  tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
+  tokensCssMigration_2026_06_03_transformScaleAdditions
 ];
 function runTokensCssMigrations(css) {
   let out = css;

package/dist-plugin/index.cjs

@@ -778,10 +778,30 @@ var tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-06-03-transform-scale-additions.ts
+var tokensCssMigration_2026_06_03_transformScaleAdditions = {
+  id: "2026-06-03-transform-scale-additions",
+  description: "Add the --scale-{sm..2xl} transform-multiplier scale",
+  apply(css) {
+    return ensureScale(css, {
+      sectionComment: "Transform-scale multipliers (e.g. hover zoom). 5% per step.",
+      anchorPrefixes: ["--blur-", "--shadow-", "--radius-"],
+      entries: [
+        { name: "--scale-sm", value: "1.05" },
+        { name: "--scale-md", value: "1.1" },
+        { name: "--scale-lg", value: "1.15" },
+        { name: "--scale-xl", value: "1.2" },
+        { name: "--scale-2xl", value: "1.25" }
+      ]
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
-  tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup
+  tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
+  tokensCssMigration_2026_06_03_transformScaleAdditions
 ];
 function runTokensCssMigrations(css) {
   let out = css;

package/dist-plugin/index.js

@@ -4,7 +4,7 @@ import {
   resolveDataDirs,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-CUC32QJ2.js";
+} from "./chunk-2TW77U3O.js";
 
 // vite-plugin/themeFileApi.ts
 import fs2 from "fs";

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -199,6 +199,25 @@ var tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-06-03-transform-scale-additions.ts
+var tokensCssMigration_2026_06_03_transformScaleAdditions = {
+  id: "2026-06-03-transform-scale-additions",
+  description: "Add the --scale-{sm..2xl} transform-multiplier scale",
+  apply(css) {
+    return ensureScale(css, {
+      sectionComment: "Transform-scale multipliers (e.g. hover zoom). 5% per step.",
+      anchorPrefixes: ["--blur-", "--shadow-", "--radius-"],
+      entries: [
+        { name: "--scale-sm", value: "1.05" },
+        { name: "--scale-md", value: "1.1" },
+        { name: "--scale-lg", value: "1.15" },
+        { name: "--scale-xl", value: "1.2" },
+        { name: "--scale-2xl", value: "1.25" }
+      ]
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -235,7 +254,8 @@ function readLiveTokensConfig() {
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
-  tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup
+  tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
+  tokensCssMigration_2026_06_03_transformScaleAdditions
 ];
 function runTokensCssMigrations(css) {
   let out = css;

package/dist-plugin/tokensCssMigrations/index.js

@@ -9,7 +9,7 @@ import {
   renameToken,
   runTokensCssMigrations,
   validateTokensCss
-} from "../chunk-CUC32QJ2.js";
+} from "../chunk-2TW77U3O.js";
 export {
   TOKENS_CSS_MIGRATIONS,
   collectDefinedTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -31,9 +31,7 @@
     "template",
     "!**/*.test.ts",
     "!**/*.spec.ts",
-    "!**/__tests__/**",
-    "!src/system/components/Stat.svelte",
-    "!src/system/components/StatEditor.svelte"
+    "!**/__tests__/**"
   ],
   "bin": {
     "live-tokens": "./bin/cli.mjs"
@@ -96,14 +94,17 @@
     "build:lib": "npm run build:plugin",
     "deploy:local": "bash scripts/deploy-local.sh",
     "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
+    "check:slot-prose": "node scripts/check-slot-prose.mjs",
     "check:editor-font-isolation": "node scripts/check-editor-font-isolation.mjs",
     "check:component-defaults": "node scripts/sync-component-defaults.mjs --check",
     "check:production-is-default": "node scripts/check-production-is-default.mjs",
+    "check:docs-content": "node scripts/sync-docs.mjs --check",
     "sync:component-defaults": "node scripts/sync-component-defaults.mjs --write",
+    "sync:docs": "node scripts/sync-docs.mjs --write",
     "collapse:manifest": "node scripts/collapse-manifest-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
-    "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run build:lib && npm run check:smoke-install && npm run check:smoke-create"
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:slot-prose && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:smoke-install && npm run check:smoke-create"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0",

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'card';
 
@@ -83,13 +83,34 @@
     ...buildTypeGroupColorTokens(typeGroups, { component, variants: ['default'] }),
     ...typeGroupTokens,
   ];
+
+  // Global "Use hover" default. The two `*-active` vars flip together: off = resting
+  // tokens (no visible hover), on = the `--card-hover-*` tokens. Stored per-component.
+  const HOVER_OFF = { border: 'var(--card-default-border)', shadow: 'var(--card-default-shadow)' };
+  const HOVER_ON = { border: 'var(--card-hover-border)', shadow: 'var(--card-hover-shadow)' };
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-border',
+      variants: ['default'],
+      variable: () => '--card-hover-border-active',
+      values: [HOVER_OFF.border, HOVER_ON.border],
+      default: { default: HOVER_OFF.border },
+    },
+    {
+      key: 'hover-shadow',
+      variants: ['default'],
+      variable: () => '--card-hover-shadow-active',
+      values: [HOVER_OFF.shadow, HOVER_ON.shadow],
+      default: { default: HOVER_OFF.shadow },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import Card from '../../system/components/Card.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
@@ -97,7 +118,20 @@
     Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
   ) as Record<string, Token[]>);
 
-  let hoverEnabled = $state(true);
+  let aliases = $derived(
+    ($editorState.components[component]?.aliases ?? {}) as Record<string, import('../core/store/editorTypes').CssVarRef>,
+  );
+  let hoverEnabled = $derived.by(() => {
+    const ref = aliases['--card-hover-border-active'];
+    const raw = ref?.kind === 'literal' ? ref.value : HOVER_OFF.border;
+    return raw === HOVER_ON.border;
+  });
+
+  function setHoverEnabled(checked: boolean) {
+    const v = checked ? HOVER_ON : HOVER_OFF;
+    setComponentAlias(component, '--card-hover-border-active', { kind: 'literal', value: v.border });
+    setComponentAlias(component, '--card-hover-shadow-active', { kind: 'literal', value: v.shadow });
+  }
 </script>
 
 <ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body." tokens={allTokens} {linked}>
@@ -110,17 +144,23 @@
   >
     {#snippet stateActions(stateName)}
       {#if stateName === 'hover'}
-        <label class="hover-enable">
-          <input type="checkbox" bind:checked={hoverEnabled} />
-          <span>Use hover</span>
-        </label>
+        <div class="hover-control">
+          <label class="hover-enable">
+            <input type="checkbox" checked={hoverEnabled} onchange={(e) => setHoverEnabled(e.currentTarget.checked)} />
+            <span>Use hover</span>
+          </label>
+          <p class="hover-help">
+            Checked: every card lifts on hover. Unchecked: hover is off by default and a page turns it on
+            per card with the <code>hover</code> prop.
+          </p>
+        </div>
       {/if}
     {/snippet}
     {#snippet children({ activeState })}
-      {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
+      {@const previewClass = activeState === 'hover' ? 'force-hover' : ''}
       <div class="card-demo">
         <Card title="Card title" class={previewClass}>
-          <p style="margin: 0;">Slotted body content. Hover the card (or switch the editor to the Hover state) to preview hover styling.</p>
+          <div class="content-placeholder">Content Placeholder</div>
         </Card>
       </div>
     {/snippet}
@@ -129,6 +169,21 @@
 
 <style>
   .card-demo {
+    min-width: 16rem;
+    max-width: 28rem;
+  }
+  .content-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 6rem;
+    background: color-mix(in srgb, white 8%, transparent);
+    border-radius: var(--ui-radius-sm);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+  .hover-control {
     max-width: 28rem;
   }
   .hover-enable {
@@ -139,4 +194,12 @@
     color: var(--ui-text-secondary);
     cursor: pointer;
   }
+  .hover-help {
+    margin: var(--ui-space-4) 0 0;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+  }
+  .hover-help code {
+    font-family: var(--ui-font-mono);
+  }
 </style>

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

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Token } from './scaffolding/types';
+  import type { Token, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'image';
 
@@ -10,10 +10,23 @@
       { label: 'border width', groupKey: 'width', variable: '--image-default-border-width' },
       { label: 'corner radius', groupKey: 'radius', variable: '--image-default-radius' },
       { label: 'image shadow', groupKey: 'shadow', variable: '--image-default-shadow' },
+      { label: 'zoom amount', groupKey: 'scale', variable: '--image-zoom-scale' },
     ],
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // Global "Use zoom" default. `none` = off; `scale(...)` = every image zooms on hover.
+  const ZOOM_ON = 'scale(var(--image-zoom-scale))';
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'zoom',
+      variants: ['default'],
+      variable: () => '--image-zoom-hover',
+      values: ['none', ZOOM_ON],
+      default: { default: 'none' },
+    },
+  ];
 </script>
 
 <script lang="ts">
@@ -21,10 +34,53 @@
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
   import demoImageUrl from '../../system/assets/offering.webp';
+  import { editorState, setComponentAlias } from '../core/store/editorStore';
+
+  let aliases = $derived(
+    ($editorState.components[component]?.aliases ?? {}) as Record<string, import('../core/store/editorTypes').CssVarRef>,
+  );
+  let useZoom = $derived.by(() => {
+    const ref = aliases['--image-zoom-hover'];
+    const raw = ref?.kind === 'literal' ? ref.value : intrinsics[0].default.default;
+    return raw === ZOOM_ON;
+  });
+
+  function setUseZoom(checked: boolean) {
+    setComponentAlias(component, '--image-zoom-hover', { kind: 'literal', value: checked ? ZOOM_ON : 'none' });
+  }
 </script>
 
 <ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow." tokens={allTokens}>
   <VariantGroup name="image" title="Image" {states} {component}>
-    <Image src={demoImageUrl} alt="Demo" variant="banner" />
+    {#snippet stateActions()}
+      <label class="zoom-enable">
+        <input type="checkbox" checked={useZoom} onchange={(e) => setUseZoom(e.currentTarget.checked)} />
+        <span>Use zoom on hover</span>
+      </label>
+    {/snippet}
+    <Image src={demoImageUrl} alt="Demo" variant="banner" zoom={useZoom ? undefined : false} />
+    <p class="zoom-help">
+      Checked: every image zooms its contents on hover. Unchecked: zoom is off by default and a page turns it
+      on per image with the <code>zoom</code> prop.
+    </p>
   </VariantGroup>
 </ComponentEditorBase>
+
+<style>
+  .zoom-enable {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+  }
+  .zoom-help {
+    margin: var(--ui-space-8) 0 0;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+  }
+  .zoom-help code {
+    font-family: var(--ui-font-mono);
+  }
+</style>

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

@@ -58,8 +58,7 @@
     {#snippet children()}
       <div class="panel-demo">
         <Panel minHeight="6rem">
-          <span class="demo-chip">Stage content</span>
-          <span class="demo-chip">Stage content</span>
+          <div class="content-placeholder">Content Placeholder</div>
         </Panel>
       </div>
     {/snippet}
@@ -71,9 +70,13 @@
     width: 100%;
     max-width: 34rem;
   }
-  .demo-chip {
-    padding: var(--ui-space-4) var(--ui-space-8);
-    border: 1px solid var(--ui-border);
+  .content-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    background: color-mix(in srgb, white 8%, transparent);
     border-radius: var(--ui-radius-sm);
     font-size: var(--ui-font-size-sm);
     color: var(--ui-text-secondary);

package/src/editor/component-editor/registry.ts

@@ -6,11 +6,11 @@ import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
 import CalloutEditor, { allTokens as calloutTokens } from './CalloutEditor.svelte';
 import CornerBadgeEditor, { allTokens as cornerBadgeTokens } from './CornerBadgeEditor.svelte';
 import ButtonEditor, { allTokens as buttonTokens } from './ButtonEditor.svelte';
-import CardEditor, { allTokens as cardTokens } from './CardEditor.svelte';
+import CardEditor, { allTokens as cardTokens, intrinsics as cardIntrinsics } from './CardEditor.svelte';
 import CodeSnippetEditor, { allTokens as codeSnippetTokens } from './CodeSnippetEditor.svelte';
 import CollapsibleSectionEditor, { allTokens as collapsibleSectionTokens } from './CollapsibleSectionEditor.svelte';
 import DialogEditor, { allTokens as dialogTokens } from './DialogEditor.svelte';
-import ImageEditor, { allTokens as imageTokens } from './ImageEditor.svelte';
+import ImageEditor, { allTokens as imageTokens, intrinsics as imageIntrinsics } from './ImageEditor.svelte';
 import ImageLightboxEditor, { allTokens as imageLightboxTokens } from './ImageLightboxEditor.svelte';
 import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens } from './InlineEditActionsEditor.svelte';
 import InputEditor, { allTokens as inputTokens } from './InputEditor.svelte';
@@ -142,6 +142,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Card.svelte',
     editorComponent: CardEditor,
     schema: cardTokens,
+    intrinsics: cardIntrinsics,
     origin: 'system',
   },
   badge: {
@@ -187,6 +188,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Image.svelte',
     editorComponent: ImageEditor,
     schema: imageTokens,
+    intrinsics: imageIntrinsics,
     origin: 'system',
   },
   imagelightbox: {

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

@@ -9,7 +9,7 @@
   import UIPaddingSelector from '../../ui/UIPaddingSelector.svelte';
   import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
   import UIEasingSelector from '../../ui/UIEasingSelector.svelte';
-  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SHADOW, DIVIDER_HEIGHT, DIVIDER_INSET } from '../../ui/variantScales';
+  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SHADOW, DIVIDER_HEIGHT, DIVIDER_INSET } from '../../ui/variantScales';
   import {
     editorState,
     getComponentPropertySiblings,
@@ -31,6 +31,7 @@
     | 'divider-inset'
     | 'dot-size'
     | 'blur'
+    | 'scale'
     | 'shadow'
     | 'font-family'
     | 'font-weight'
@@ -99,6 +100,7 @@
     { kind: 'divider-inset',  matches: (v) => v.endsWith('-divider-inset') },
     { kind: 'dot-size',       matches: (v) => v.endsWith('-dot-size') },
     { kind: 'blur',           matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
+    { kind: 'scale',          matches: (v) => v.endsWith('-scale') || v.startsWith('--scale-') },
     { kind: 'shadow',         matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
     { kind: 'padding',        matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
     { kind: 'gap',            matches: (v) => v.endsWith('-gap') },
@@ -134,6 +136,7 @@
     'duration',
     'easing',
     'blur',
+    'scale',
     'shadow',
     'text-color',
     'surface',
@@ -205,6 +208,7 @@
     'duration': { component: UIVariantSelector, extra: () => ({ ...DURATION }) },
     'easing': { component: UIEasingSelector },
     'blur': { component: UIVariantSelector, extra: () => ({ ...BLUR }) },
+    'scale': { component: UIVariantSelector, extra: () => ({ ...SCALE }) },
     'shadow': { component: UIVariantSelector, extra: () => ({ ...SHADOW }) },
     'surface': { component: UIPaletteSelector },
     'border': { component: UIPaletteSelector },
@@ -234,6 +238,7 @@
       'duration',
       'easing',
       'blur',
+      'scale',
       'shadow',
       'surface',
       'border-width',

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

@@ -804,15 +804,20 @@
     gap: var(--ui-space-8);
   }
 
+  /* Baseline (not center) so a tall stateActions block — e.g. a checkbox with a
+     wrapping help paragraph — keeps the part strip and its first line pinned at
+     the top and grows downward, pushing Properties down rather than recentering
+     the strip and shifting it on every state switch. */
   .tabs-selectors {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     gap: var(--ui-space-12);
   }
 
   /* Sub-strip sits flush under the parts strip when a part has interaction states.
      The eyebrow label distinguishes it from the parts row above. */
   .tabs-selectors.substrip {
+    align-items: center;
     margin-top: var(--ui-space-6);
   }
   .tabs-selectors.substrip .state-eyebrow {

package/src/editor/docs/chapters.ts

@@ -1,3 +1,5 @@
+import { docContent } from './content.generated';
+
 export interface Chapter {
   id: string;
   title: string;
@@ -17,21 +19,17 @@ export const chapters: Chapter[] = [
 
 export const chapterIds = chapters.map((c) => c.id);
 
-/* Vite resolves this glob at build time. The `?raw` query loads each .md
-   file as a string, so the markdown lives next to the runtime page module
-   and reloads on edit via HMR. */
-const docModules = import.meta.glob<string>(
-  './content/*.md',
-  { query: '?raw', import: 'default' },
-);
-
+/* Bodies come from the generated module, NOT `import.meta.glob('./content/*.md',
+   '?raw')`: that glob is a Vite compile-time transform, and esbuild's
+   optimizeDeps doesn't expand it inside a pre-bundled node_modules dep, so the
+   guide threw "Chapter not found" in tarball consumers. Edit ./content/*.md
+   then run `npm run sync:docs` to regenerate. */
 export async function loadChapter(id: string): Promise<string> {
-  const key = `./content/${id}.md`;
-  const loader = docModules[key];
-  if (!loader) {
-    throw new Error(`Chapter not found: ${id} (expected at ${key}).`);
+  const md = docContent[id];
+  if (md === undefined) {
+    throw new Error(`Chapter not found: ${id}`);
   }
-  return loader();
+  return md;
 }
 
 export function chapterNeighbours(id: string): { prev: Chapter | null; next: Chapter | null } {

package/src/editor/docs/content.generated.ts

@@ -0,0 +1,10 @@
+// AUTOGENERATED by scripts/sync-docs.mjs — do not edit by hand.
+// Source of truth: src/editor/docs/content/*.md  ·  regenerate: npm run sync:docs
+
+export const docContent: Record<string, string> = {
+  "01-overview": "# Overview\n\nLive Tokens is a design system for building Svelte microsites quickly. You\nstyle your site by editing tokens and components in a live editor. When it looks right, you save the manifest and ship it.\n\n## How it works\n\n- The editor runs in your dev server, on top of your real pages. You style in\n  context, not in a separate sandbox.\n- Every change updates a CSS variable, so the page repaints instantly. No\n  reload, no build step.\n- Saving writes a small JSON file into your project. Shipping bakes your chosen\n  theme into a plain CSS file that the build bundles.\n- The editor is dev-only. Production ships plain CSS variables and the\n  components you used, nothing else.\n\n## What you can edit\n\n- **Tokens**: the design-system primitives, colour palettes, type, spacing,\n  radius, shadow, and gradients, that apply across your whole site.\n- **Components**: the package ships about 25 editable components (Button, Card,\n  Dialog, Table, and more).You style components by changing the tokens assigned to each property.\n\n## Where to go next\n\n- **[Getting started](getting-started.md)**: scaffold a project and make your\n  first edit.\n- **[Editing tokens](editing-tokens.md)**: a tour of the editor.\n- **[Themes](themes-workflow.md)**: save, switch, and ship.\n- **[Creating components](creating-components.md)**: make your own components\n  editable.\n",
+  "creating-components": "# Creating components\n\nThe package ships about 25 editable components. When you need one it doesn't\nhave, you can make your own Svelte component editable, so anyone using the\neditor can re-point its colours, type, and spacing without touching code.\n\nThe simplest way is to ask Claude. The package bundles a Claude Code skill that\nknows the conventions, writes the files, and checks the result for you.\n\n## Install the skills\n\n```bash\nnpx @motion-proto/live-tokens setup-claude\n```\n\nThis copies the bundled skills into your project's `.claude/skills/`. Once\nthey're there, Claude Code picks them up automatically.\n\n## Ask for a component\n\nDescribe what you want in plain English. Phrases like these trigger the skill:\n\n- \"Add a Toggle component to live-tokens\"\n- \"Make this Svelte component editable in the live-tokens editor\"\n- \"Create a Stat component with a value and a label\"\n\nClaude asks any clarifying questions it needs (which variants, which states,\nwhich parts), then writes the component, registers it with the editor, and runs\nits verification checklist. When it finishes, open `/components` to see your new\ncomponent in the editor and confirm everything works.\n\n## What you get\n\n- A runtime component whose editable properties default to your theme tokens.\n- An editor entry that appears under **Custom** in the `/components` view.\n- The naming and wiring handled for you, so the component fits the system.\n\nAdvanced authors who want to write a component by hand can read the naming and\nstate-model conventions shipped in the package\n(`src/system/styles/CONVENTIONS.md` and the skill's own `SKILL.md`).\n",
+  "editing-tokens": "# Editing tokens\n\nA tour of the editor. The page behind it repaints on every change; saving\nwrites a theme file you can reload later.\n\nThe editor has two views:\n\n- **Tokens**: the design-system primitives (colour, type, spacing, and so on).\n  They apply everywhere your site uses them.\n- **Components**: per-component editors. Re-Assign what tokens a component uses\n  without changing the underlying system.\n\nThis page covers **Tokens**. For components, see\n[Creating components](creating-components.md).\n\n## Palettes\n\nMost colour work happens here. Each palette (Brand, Accent, Neutral, Canvas,\nSuccess, Warning, Info, Danger, and a few more) has:\n\n- **Base colour.** Pick a hex; the palette derives an 11-step ramp (100 to 950)\n  from it.\n- **Curves.** Two curves shape how lightness and saturation fall off across the\n  ramp. Drag the handles to bias it darker, lighter, or more saturated.\n- **Overrides.** Lock a single step to a hand-picked hex when the curve doesn't\n  land where you want.\n\nEditing a palette base ripples through every colour that depends on it, in real\ntime. Colours use OKLCH, so the ramp stays perceptually even across hues\nwithout muddy mid-tones.\n\n## Type\n\n- **Fonts.** Add sources from Google Fonts, Adobe (Typekit), a CSS URL, or an\n  inline `@font-face`. The font loads in the page as soon as you add it.\n- **Stacks.** Named font cascades you reference by token, such as a display\n  stack and a body stack.\n- **Sizes and weights.** A t-shirt scale (xs, sm, md, lg, xl, 2xl…) for size and\n  a numeric scale (100 to 900) for weight.\n\n## Spacing, radius, shadow\n\nNumeric scales with a slider per step.\n\n- **Spacing**: the padding, gap, and margin scale.\n- **Radius**: none through full.\n- **Shadow**: colour, offset, blur, spread, and opacity per step, with stacked\n  shadows supported.\n\nChange a step and every element using it repaints.\n\n## Overlays and gradients\n\n- **Overlays** are translucent tints layered over surfaces, like the subtle\n  tint a card gets on hover. Set a colour and opacity per state.\n- **Gradients** are reusable gradient tokens with a stop list and direction, for\n  hero panels and accent backgrounds.\n\n## Columns\n\nThe page-grid overlay. Set column count, gutter, and outer margin, and toggle\nthe visual guide with `Cmd/Ctrl+G`. Pages built on the column system reflow\nlive.\n\n## Saving\n\nThe editor saves to your browser continuously, so work survives a reload\nmid-edit. **Save** is a separate step: it writes a named theme file under\n`src/live-tokens/data/themes/`.\n\nThe header gives you undo/redo (`Cmd/Ctrl+Z`, `Cmd/Ctrl+Shift+Z`) and a file\nmenu for New, Save, Save as, Switch, and Delete. You can keep many themes side\nby side; one is active at a time. See [Themes](themes-workflow.md) for the full\nlifecycle.\n",
+  "getting-started": "# Getting started\n\nScaffold a live token site in a moments. You need Node 20 or later, a\npackage manager (npm, pnpm, or yarn), and a browser. Open claude code in your repo and start building.\n\n## Scaffold a new app\n\n```bash\nnpm create @motion-proto/live-tokens@latest my-app\ncd my-app\nnpm install\nnpm run dev\n```\n\nOpen the URL Vite prints (usually `http://localhost:5173`). You get a\none-page Svelte + Vite app that depends on the published package, with the\neditor wired up and the full component set ready to import.\n\n`npx @motion-proto/live-tokens create my-app` runs the same scaffold without\nthe initialiser package.\n\n### What the scaffold gives you\n\nEvery editable file lives under `src/` and is committed, so `npm install` and\nversion upgrades never touch your styles. The package code stays in\n`node_modules`.\n\n| Path | What it is |\n|------|------------|\n| `src/pages/Home.svelte` | The starter page. Replace it with your own content. |\n| `src/App.svelte` | Your routes. `<LiveTokensRouter>` adds the dev-only `/editor`, `/components`, and `/docs` routes. |\n| `src/system/styles/tokens.css` | Your base token vocabulary, hand-authored. |\n| `src/styles/site.css` | Themed page typography, yours to edit. |\n\n## Your first edit\n\n1. Run `npm run dev` and open the home page.\n2. Click **Open Token Editor**, or visit `/editor`. The editor opens beside\n   the page.\n3. Open **Palettes**, pick **Brand**, and change the base hex. The page\n   repaints as you type.\n4. Open the file menu and choose **Save as**. A theme appears as JSON under\n   `src/live-tokens/data/themes/`.\n5. Reload. Your saved theme is the active theme, so the page returns as you\n   left it.\n\n## What you just changed\n\nEvery edit sets a CSS custom property on `:root`. Your components read those\nproperties through `var(--...)`. There is no token build step and no\npreprocessor rewriting your code: the page renders against plain CSS variables\nthe editor swaps live.\n\nTo ship, promote a theme to production in the editor. That bakes the theme's\nvariables into `src/live-tokens/data/tokens.generated.css`, which your build\nbundles alongside `tokens.css`. The editor itself never reaches production.\n\nAlready have a Svelte 5 + Vite app? The\n[README](https://github.com/motionproto/live-tokens#readme) covers installing\ninto an existing project.\n\n## Where to go next\n\n- **[Editing tokens](editing-tokens.md)**: a tour of the editor.\n- **[Themes](themes-workflow.md)**: save, switch, and ship.\n- **[Creating components](creating-components.md)**: make your own component\n  editable.\n",
+  "themes-workflow": "# Themes\n\nSave your work, switch between themes, and ship one to production.\n\n## How themes work\n\n- **Your live edits** are what the page shows right now. They save to your\n  browser automatically and survive a reload, but they are not yet a file.\n- **A saved theme** is a named JSON file in `src/live-tokens/data/themes/`. You\n  create one with **Save as**.\n- **The active theme** is the saved theme the page loads at startup. Exactly one\n  at a time.\n- **The production theme** is the one that ships. Promoting sets it.\n\n## Saving\n\nIn the editor header:\n\n- **Save** updates the current theme.\n- **Save as** names a new theme. Use it for your first save and for forking.\n\nNames are tidied to lowercase with underscores, so \"My Brand!\" becomes\n`my_brand`. There is a built-in `default` theme you can always return to; the\neditor never overwrites it.\n\n## Switching\n\nThe file menu lists every saved theme. Pick one to make it active; the page\nreloads with it applied. Your current edits are saved to the previous theme\nfirst, so you don't lose work.\n\n## Shipping\n\n**Promote to production** is the \"ship it\" step. It bakes the theme's variables\ninto `src/live-tokens/data/tokens.generated.css`, which your build bundles\nalongside `tokens.css`. Fonts regenerate to match.\n\nProduction builds (`npm run build`) ship only that plain CSS and your\ncomponents. No editor, no JSON loading, no runtime indirection. If you save\nwhile the production theme is active, the generated CSS updates immediately,\nwith no separate promote step.\n\n## Manifests\n\nA **manifest** bundles one theme plus a config for each component into a single\nnamed set. Useful when you run several brands and want each to apply its theme\nand component tweaks in one move. There is a protected default and an active\nmanifest; applying one swaps everything at once.\n\n## Keeping your work safe\n\nEverything under `src/live-tokens/data/` is plain JSON, so commit it. Themes\nshow up as readable diffs you can review per branch. There are no automatic\nbackups: git is your safety net. To experiment freely, **Save as** a new name\nfirst, then edit.\n\n## Where to go next\n\n- **[Creating components](creating-components.md)**: make your own components\n  editable in the same editor.\n",
+};

package/src/editor/ui/variantScales.ts

@@ -33,6 +33,18 @@ export const BLUR: VariantScaleEntry = {
   ],
 };
 
+/** Transform-scale multipliers (e.g. image zoom-on-hover). 5% per step. */
+export const SCALE: VariantScaleEntry = {
+  varPrefix: '--scale-',
+  options: [
+    { key: 'sm', label: 'Small', value: '1.05' },
+    { key: 'md', label: 'Medium', value: '1.1' },
+    { key: 'lg', label: 'Large', value: '1.15' },
+    { key: 'xl', label: 'X-Large', value: '1.2' },
+    { key: '2xl', label: '2X-Large', value: '1.25' },
+  ],
+};
+
 export const BORDER_WIDTH: VariantScaleEntry = {
   varPrefix: '--border-width-',
   options: [

package/src/system/components/Card.svelte

@@ -4,6 +4,11 @@
     iconColor?: string;
     title?: string;
     size?: 'default' | 'compact';
+    /** false → the card stops pinning body typography so the consumer fully owns slotted content's styling. */
+    prose?: boolean;
+    /** Apply hover styling on pointer-over. `undefined` inherits the editor's global "Use hover"
+        default; `true`/`false` force this instance on/off. */
+    hover?: boolean | undefined;
     class?: string;
     children?: import('svelte').Snippet;
   }
@@ -13,16 +18,27 @@
     iconColor = 'var(--text-secondary)',
     title = '',
     size = 'default',
+    prose = true,
+    hover = undefined,
     class: className = '',
     children
   }: Props = $props();
-  
+
+  // Per-instance override of the global hover intrinsic; undefined leaves :root in charge.
+  let hoverBorder = $derived(
+    hover === undefined ? undefined : hover ? 'var(--card-hover-border)' : 'var(--card-default-border)',
+  );
+  let hoverShadow = $derived(
+    hover === undefined ? undefined : hover ? 'var(--card-hover-shadow)' : 'var(--card-default-shadow)',
+  );
 </script>
 
 <div
   class="card {className}"
   class:compact={size === 'compact'}
-  style="--card-color: {iconColor};"
+  style:--card-color={iconColor}
+  style:--card-hover-border-active={hoverBorder}
+  style:--card-hover-shadow-active={hoverShadow}
 >
   {#if icon || title}
     <div class="card-header">
@@ -34,13 +50,14 @@
       {/if}
     </div>
   {/if}
-  <div class="card-body">
+  <div class="card-body" class:prose>
     {@render children?.()}
   </div>
 </div>
 
 <style lang="scss">
   @use '../styles/padding' as *;
+  @use '../styles/slot-prose' as *;
 
   :global(:root) {
     --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent);
@@ -78,6 +95,12 @@
 
     --card-hover-border: var(--border-neutral-strong);
     --card-hover-shadow: var(--shadow-md);
+
+    /* Global "Use hover" intrinsic: the active hover values default to the resting
+       tokens (hover off). The editor checkbox / a per-instance `hover` prop swap
+       these to the `--card-hover-*` tokens to turn hover on. */
+    --card-hover-border-active: var(--card-default-border);
+    --card-hover-shadow-active: var(--card-default-shadow);
   }
 
   .card {
@@ -92,7 +115,12 @@
     overflow: hidden;
   }
 
-  .card:not(.no-hover):hover,
+  .card:hover {
+    border-color: var(--card-hover-border-active);
+    box-shadow: var(--card-hover-shadow-active);
+  }
+
+  /* Editor preview hook: paint hover tokens directly, ignoring the on/off gate. */
   .card.force-hover {
     border-color: var(--card-hover-border);
     box-shadow: var(--card-hover-shadow);
@@ -139,35 +167,8 @@
     font-weight: var(--card-default-body-font-weight);
     line-height: var(--card-default-body-line-height);
     @include themed-padding(--card-default-body-padding);
-  }
-
-  /* Slot content inherits the card's body typography so consumer-side global
-     element rules (e.g. site.css `p { font-family: serif }`) don't override
-     the card-body-font-family alias. */
-  .card-body :global(p),
-  .card-body :global(ul),
-  .card-body :global(ol),
-  .card-body :global(li) {
-    font: inherit;
-    color: inherit;
-  }
-
-  .card-body :global(p) {
-    margin: 0 0 var(--space-12);
-  }
-
-  .card-body :global(p:last-child) {
-    margin-bottom: 0;
-  }
-
-  .card-body :global(ul),
-  .card-body :global(ol) {
-    margin: var(--space-12) 0;
-    padding-left: var(--space-24);
-  }
 
-  .card-body :global(li) {
-    margin-bottom: var(--space-4);
+    @include slot-prose;
   }
 
   .card.compact .card-body {

package/src/system/components/CollapsibleSection.svelte

@@ -6,6 +6,8 @@
       expanded?: boolean;
       href?: string | undefined;
       variant?: 'chromeless' | 'divider' | 'container';
+      /** false → the section stops pinning body typography so the consumer fully owns slotted content's styling. */
+      prose?: boolean;
       class?: string;
       /** Toggle callback. Preferred over `on:toggle` from 0.5.0 onward. */
       ontoggle?: () => void;
@@ -18,6 +20,7 @@
       expanded = false,
       href = undefined,
       variant = 'container',
+      prose = true,
       class: className = '',
       ontoggle,
       summary,
@@ -67,7 +70,7 @@
       </div>
    {/if}
    {#if expanded && children}
-      <div class="section-content">
+      <div class="section-content" class:prose>
          {@render children?.()}
       </div>
    {/if}
@@ -75,6 +78,7 @@
 
 <style lang="scss">
    @use '../styles/padding' as *;
+   @use '../styles/slot-prose' as *;
 
    :global(:root) {
       /* Chromeless — default */
@@ -285,24 +289,7 @@
       color: var(--text-secondary);
       font-size: var(--font-size-md);
       line-height: var(--line-height-md);
-   }
-
-   /* Slot content inherits the section's body typography so consumer-side
-      global element rules (e.g. site.css `p { font-family: serif }`) don't
-      override the collapsible's intended type styling. */
-   .section-content :global(p),
-   .section-content :global(ul),
-   .section-content :global(ol),
-   .section-content :global(li) {
-      font: inherit;
-      color: inherit;
-   }
-
-   .section-content :global(p) {
-      margin: 0 0 var(--space-12);
-   }
 
-   .section-content :global(p:last-child) {
-      margin-bottom: 0;
+      @include slot-prose;
    }
 </style>

package/src/system/components/Image.svelte

@@ -4,13 +4,17 @@
     alt: string;
     variant?: 'default' | 'banner' | 'medium' | 'compact';
     height?: string | undefined;
+    /** Zoom the contents on hover (frame stays fixed). `undefined` inherits the editor's
+        global "Use zoom" default; `true`/`false` force this instance on/off. */
+    zoom?: boolean | undefined;
   }
 
   let {
     src,
     alt,
     variant = 'default',
-    height = undefined
+    height = undefined,
+    zoom = undefined
   }: Props = $props();
 
   const variantHeights: Record<string, string | undefined> = {
@@ -21,9 +25,14 @@
   };
 
   let resolvedHeight = $derived(height ?? variantHeights[variant]);
+
+  // Per-instance override of the global zoom intrinsic; undefined leaves :root in charge.
+  let zoomOverride = $derived(
+    zoom === undefined ? undefined : zoom ? 'scale(var(--image-zoom-scale))' : 'none',
+  );
 </script>
 
-<div class="image" style:height={resolvedHeight}>
+<div class="image" style:height={resolvedHeight} style:--image-zoom-hover={zoomOverride}>
   <img {src} {alt} />
 </div>
 
@@ -33,6 +42,9 @@
     --image-default-border: var(--border-neutral);
     --image-default-border-width: var(--border-width-1);
     --image-default-shadow: var(--shadow-md);
+    --image-zoom-scale: var(--scale-sm);
+    /* Global "Use zoom" intrinsic: `none` (off) or `scale(var(--image-zoom-scale))` (on). */
+    --image-zoom-hover: none;
   }
 
   .image {
@@ -48,5 +60,11 @@
     display: block;
     object-fit: cover;
     object-position: center;
+    transform-origin: center;
+    transition: transform var(--duration-300) var(--ease-out-cubic);
+  }
+
+  .image:hover img {
+    transform: var(--image-zoom-hover);
   }
 </style>

package/src/system/components/Panel.svelte

@@ -24,7 +24,7 @@
 
     --panel-stage-surface: linear-gradient(0deg, color-mix(in srgb, var(--surface-neutral-low) 40%, transparent) 0.5%, color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent) 100%);
     --panel-stage-padding: var(--space-16);
-    --panel-stage-inline-padding: var(--space-32);
+    --panel-stage-inline-padding: var(--space-16);
     --panel-stage-gap: var(--space-16);
   }
 

package/src/system/styles/CONVENTIONS.md

@@ -11,7 +11,7 @@ Each file plays a distinct role. Don't merge them without understanding why they
 | `tokens.css` | Themed pages | Defines `--color-*`, `--surface-*`, `--text-*`, `--space-*`, … | `main.ts` | **Runtime-edited.** The token editor rewrites this file via the `themeFileApi` Vite plugin. Starter content; consumers replace at will. |
 | `ui-editor.css` | Editor chrome only | Defines `--ui-*` (opaque grayscale, system fonts) | JS-imported by `Editor.svelte` and `ComponentEditorPage.svelte` | Deliberately isolated from the theme system so editor surfaces stay neutral while live theme edits flow through the components being edited. Never load globally. |
 | `ui-form-controls.css` | Editor chrome only | Consumes `--ui-*` only | JS-imported by `Editor.svelte` and `ComponentEditorPage.svelte` | `.ui-form-select` / `.ui-form-input` / `.ui-form-field-*` classes. Used by `ProjectFontsSection`, `FontStackEditor`, `DialogEditor`, `NotificationEditor`. Theme-immune — must not reference `--font-*`, `--surface-*`, etc. |
-| `site.css` | Themed pages | Consumes theme tokens | Page-imported by `Home.svelte` | Consumer-facing starter typography for the landing page (unscoped `h1`, `p`, `a`, …). Never load on editor pages. Replaceable starter content — users edit or replace this file to style their own site. Components that take slot content (Card body, CollapsibleSection content) defend their typography aliases against these global rules via `:global(p) { font: inherit; color: inherit; }`. The demo page no longer imports it; the demo uses scoped classes and component-owned slot typography instead. |
+| `site.css` | Themed pages | Consumes theme tokens | Page-imported by `Home.svelte` | Consumer-facing starter typography for the landing page (unscoped `h1`, `p`, `a`, …). Never load on editor pages. Replaceable starter content — users edit or replace this file to style their own site. Components that slot consumer content (Card body, CollapsibleSection content, SectionKit) defend their body typography against these global rules with `@include slot-prose` (from `styles/_slot-prose.scss`): the mixin pins only the owned type axes (font-family, font-size, font-weight, line-height, color) plus list spacing onto slotted `p`/`ul`/`ol`/`li`, while `a`, `strong`, font-style, letter-spacing and text-transform are left to inherit the page (links stay links, a consumer's italics survive). `prose={false}` opts a slot out entirely, and the `check:slot-prose` guard fails the build on a hand-rolled copy of the pin. The demo page no longer imports it; the demo uses scoped classes and component-owned slot typography instead. |
 | `fonts.css` + `fonts/` | Themed pages only | n/a (`@font-face` only) | `main.ts` | Build-special-cased: copied directly to `dist/` without processing so Vite doesn't inline woff2 files as base64. Starter content; editor's font invariant means these never affect chrome. |
 
 ### Publishing layout

package/src/system/styles/_slot-prose.scss

@@ -0,0 +1,52 @@
+// Slot-prose defense.
+//
+// Components render the consumer's raw HTML as slot content in the *same* light
+// DOM tree, so a consumer's global element rules (site.css `p`, `ul li`, …)
+// directly match the slotted `<p>`/`<li>` and beat the container's inherited
+// body typography. Svelte's scope class never reaches slotted content, so there
+// is no automatic protection — the container must pin the type axes it owns.
+//
+// This mixin is the single definition of that pin. It covers p/ul/ol/li and
+// pins ONLY the axes the component owns: font-family, font-size, font-weight,
+// line-height, color, plus the component's spacing rhythm. font-style,
+// letter-spacing and text-transform stay free, so a consumer's italics or
+// tracking survive; `a` and `strong` are left untouched, so links keep looking
+// like links inside a card. `&.prose` gates the whole thing: `prose={false}`
+// drops the pin and the consumer fully owns the slot's content styling.
+//
+// Usage:
+//   .card-body { /* owns the baseline axes */ @include slot-prose; }
+//   <div class="card-body" class:prose>…</div>
+
+@mixin slot-prose {
+  &.prose {
+    :global(p),
+    :global(ul),
+    :global(ol),
+    :global(li) {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      color: inherit;
+    }
+
+    :global(p) {
+      margin: 0 0 var(--space-12);
+    }
+
+    :global(p:last-child) {
+      margin-bottom: 0;
+    }
+
+    :global(ul),
+    :global(ol) {
+      margin: var(--space-12) 0;
+      padding-left: var(--space-24);
+    }
+
+    :global(li) {
+      margin-bottom: var(--space-4);
+    }
+  }
+}

package/src/system/styles/fonts.css

@@ -1,16 +1,14 @@
 /* Generated from the production theme by syncFontsToCss. Do not edit. */
+/* Both fonts.css and fonts/ are in dist/, so relative paths work at runtime. */
 
 /* Adobe Typekit — fira-code */
 @import url('https://use.typekit.net/jes8oow.css');
 
+/* Google Fonts — Manrope */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
+
 /* Google Fonts — Arvo */
 @import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
 /* Google Fonts — GFS Didot */
 @import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
-
-/* Google Fonts — Fraunces */
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
-
-/* Google Fonts — Manrope */
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

package/src/system/styles/tokens.css

@@ -458,6 +458,13 @@
   --blur-xl: 24px;
   --blur-2xl: 32px;
 
+  /* Transform-scale multipliers (e.g. hover zoom). 5% per step. */
+  --scale-sm: 1.05;
+  --scale-md: 1.1;
+  --scale-lg: 1.15;
+  --scale-xl: 1.2;
+  --scale-2xl: 1.25;
+
   /* COLUMN LAYOUT — 12-col grid. Drives the dev overlay; consume via
      grid-template-columns: repeat(var(--columns-count), 1fr) etc.
      --columns-margin = side gutters (0 = flush). */