@motion-proto/live-tokens 0.28.1 → 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.1",
+  "version": "0.29.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -94,6 +94,7 @@
     "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",
@@ -103,7 +104,7 @@
     "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 check:docs-content && 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/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). */