@motion-proto/live-tokens 0.1.1 → 0.3.2

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.1.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
-  "keywords": ["svelte", "vite", "design-tokens", "css-variables", "editor"],
+  "keywords": [
+    "svelte",
+    "vite",
+    "design-tokens",
+    "css-variables",
+    "editor"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -13,14 +19,22 @@
   "bugs": "https://github.com/motionproto/live-tokens/issues",
   "files": [
     "src/lib",
-    "src/showcase",
+    "src/ui",
+    "src/component-editor",
     "src/components",
-    "src/pages/Admin.svelte",
-    "src/pages/ShowcasePage.svelte",
-    "src/showcase/editor.css",
+    "src/pages/Editor.svelte",
+    "src/pages/Editor.svelte.d.ts",
+    "src/pages/EditorShell.svelte",
+    "src/pages/ComponentEditorPage.svelte",
+    "src/pages/ComponentEditorPage.svelte.d.ts",
+    "src/styles/ui-editor.css",
     "src/styles/form-controls.css",
     "src/styles/fonts.css",
     "src/styles/fonts",
+    "src/styles/_padding.scss",
+    "src/styles/tokens.css",
+    "src/data",
+    "src/assets",
     "dist-plugin"
   ],
   "exports": {
@@ -29,29 +43,36 @@
       "types": "./src/lib/index.ts",
       "default": "./src/lib/index.ts"
     },
-    "./components": {
-      "svelte": "./src/showcase/index.ts",
-      "types": "./src/showcase/index.ts",
-      "default": "./src/showcase/index.ts"
+    "./component-editor": {
+      "svelte": "./src/component-editor/index.ts",
+      "types": "./src/component-editor/index.ts",
+      "default": "./src/component-editor/index.ts"
     },
-    "./admin": {
-      "svelte": "./src/pages/Admin.svelte"
+    "./ui": {
+      "svelte": "./src/ui/index.ts",
+      "types": "./src/ui/index.ts",
+      "default": "./src/ui/index.ts"
     },
-    "./showcase-page": {
-      "svelte": "./src/pages/ShowcasePage.svelte"
+    "./editor": {
+      "types": "./src/pages/Editor.svelte.d.ts",
+      "svelte": "./src/pages/Editor.svelte",
+      "default": "./src/pages/Editor.svelte"
     },
-    "./overlay": {
-      "svelte": "./src/lib/LiveEditorOverlay.svelte"
+    "./component-editor-page": {
+      "types": "./src/pages/ComponentEditorPage.svelte.d.ts",
+      "svelte": "./src/pages/ComponentEditorPage.svelte",
+      "default": "./src/pages/ComponentEditorPage.svelte"
     },
-    "./columns-overlay": {
-      "svelte": "./src/lib/ColumnsOverlay.svelte"
+    "./components/*": {
+      "svelte": "./src/components/*",
+      "default": "./src/components/*"
     },
     "./vite-plugin": {
       "types": "./dist-plugin/index.d.ts",
       "import": "./dist-plugin/index.js",
       "require": "./dist-plugin/index.cjs"
     },
-    "./styles/editor.css": "./src/showcase/editor.css",
+    "./styles/ui-editor.css": "./src/styles/ui-editor.css",
     "./styles/form-controls.css": "./src/styles/form-controls.css",
     "./styles/fonts.css": "./src/styles/fonts.css"
   },
@@ -60,8 +81,11 @@
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "build:plugin": "tsup src/vite-plugin/index.ts --out-dir dist-plugin --format esm,cjs --dts --external vite --platform node --clean",
     "build:lib": "npm run build:plugin",
+    "deploy:local": "bash scripts/deploy-local.sh",
     "prepublishOnly": "npm run build:lib"
   },
   "peerDependencies": {
@@ -74,13 +98,15 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^24.12.0",
+    "happy-dom": "^20.9.0",
     "sass": "^1.98.0",
     "svelte": "^4.2.20",
     "svelte-check": "^3.8.6",
     "svelte-preprocess": "^6.0.3",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
-    "vite": "^5.4.21"
+    "vite": "^5.4.21",
+    "vitest": "^4.1.4"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^7.2.0"

package/src/component-editor/BadgeEditor.svelte

@@ -0,0 +1,170 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import { badgeVariants } from '../components/Badge.svelte';
+
+  export const component = 'badge';
+  const variants = badgeVariants;
+  type Variant = typeof variants[number];
+
+  // Each variant is its own visual presentation; surface/text/border colors are unique.
+  // Shape props (radius/border-width/padding/shadow) and font props can be linked across variants.
+  function variantTokens(variant: Variant): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'surface', variable: `--badge-${variant}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `--badge-${variant}-border` },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--badge-${variant}-border-width` },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--badge-${variant}-radius` },
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--badge-${variant}-padding` },
+      { label: 'badge shadow', canBeLinked: true, groupKey: 'shadow', variable: `--badge-${variant}-shadow` },
+      { label: 'backdrop blur', canBeLinked: true, groupKey: 'blur', variable: `--badge-${variant}-blur` },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--badge-${variant}-icon-size` },
+    ];
+  }
+  function variantTypeGroups(variant: Variant): TypeGroupConfig[] {
+    return [{
+      legend: `${variant} text`,
+      colorVariable: `--badge-${variant}-text`,
+      familyVariable: `--badge-${variant}-text-font-family`,
+      sizeVariable: `--badge-${variant}-text-font-size`,
+      weightVariable: `--badge-${variant}-text-font-weight`,
+      lineHeightVariable: `--badge-${variant}-text-line-height`,
+    }];
+  }
+  function variantTypeGroupTokens(variant: Variant): Token[] {
+    return [
+      { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--badge-${variant}-text-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--badge-${variant}-text-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--badge-${variant}-text-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'line-height', variable: `--badge-${variant}-text-line-height` },
+    ];
+  }
+  export const allTokens: Token[] = variants.flatMap((v) => [
+    ...variantTokens(v),
+    ...buildTypeGroupColorTokens(variantTypeGroups(v)),
+    ...variantTypeGroupTokens(v),
+  ]);
+
+  // Cross-variant sharing: any token with canBeLinked+groupKey participates in
+  // the linked block when ≥2 variants currently agree on its alias.
+  const linkableProps = [
+    'border-width', 'radius', 'padding', 'shadow', 'blur', 'icon-size',
+    'text-font-family', 'text-font-size', 'text-font-weight', 'text-line-height',
+  ] as const;
+  const linkableContexts = new Map<string, string>(
+    variants.flatMap((v) => linkableProps.map((p) => [`--badge-${v}-${p}`, v] as [string, string]))
+  );
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import Badge from '../components/Badge.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import { buildSiblings } from './scaffolding/siblings';
+  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
+  import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
+  import UIRadioGroup from '../ui/UIRadioGroup.svelte';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+
+  let bgMode: 'image' | 'color' = 'image';
+  const bgVar = '--backdrop-badge-surface';
+
+  // Preview-only props for Badge's floating/anchor/flush features (not persisted).
+  // For corner-anchored use, prefer the dedicated CornerBadge component; Badge.floating
+  // is the low-level escape hatch for off-corner floating placements.
+  let floating: boolean = false;
+  let flush: boolean = false;
+  let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'bottom-right';
+  const anchorOptions = [
+    { value: 'top-left' as const, label: 'TL' },
+    { value: 'top-right' as const, label: 'TR' },
+    { value: 'bottom-left' as const, label: 'BL' },
+    { value: 'bottom-right' as const, label: 'BR' },
+  ];
+</script>
+
+<ComponentEditorBase {component} title="Badge" description="Pill-shaped badges with color variants. Import from <code>components/Badge.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+  <svelte:fragment slot="config">
+    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
+    <label class="float-toggle">
+      <input type="checkbox" bind:checked={floating} />
+      <span>Floating preview</span>
+    </label>
+    {#if floating}
+      <label class="float-toggle">
+        <input type="checkbox" bind:checked={flush} />
+        <span>Flush corner</span>
+      </label>
+      <div class="anchor-control">
+        <span>Anchor</span>
+        <UIRadioGroup bind:value={anchor} name="badge-anchor" options={anchorOptions} />
+      </div>
+    {/if}
+  </svelte:fragment>
+  {#each variants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={{ [v]: visibleVariantTokens(v) }}
+      typeGroups={{ [v]: variantTypeGroups(v) }}
+      {component}
+      siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
+    >
+      <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
+        {#if floating}
+          <div class="floating-stage">
+            <Badge variant={v} {floating} {anchor} {flush}>{v.charAt(0).toUpperCase() + v.slice(1)}</Badge>
+          </div>
+        {:else}
+          <div class="badge-showcase-grid">
+            <Badge variant={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</Badge>
+            <Badge variant={v} icon="fa-solid fa-dice-d20">With Icon</Badge>
+          </div>
+        {/if}
+      </ShadowBackdrop>
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+
+<style>
+  .badge-showcase-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-8);
+    align-items: center;
+  }
+
+  /* Anchor parent for floating-preview mode — gives the badge a positioned ancestor
+     and a visible surface so blur/offset/flush are observable. */
+  .floating-stage {
+    position: relative;
+    width: 100%;
+    min-height: 160px;
+    border-radius: var(--ui-radius-md);
+    background: rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+  }
+
+  .float-toggle {
+    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;
+  }
+
+  .anchor-control {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+</style>

package/src/component-editor/CalloutEditor.svelte

@@ -0,0 +1,103 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import { calloutVariants } from '../components/Callout.svelte';
+
+  export const component = 'callout';
+  const variants = calloutVariants;
+  type Variant = typeof variants[number];
+
+  function variantTokens(v: Variant): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'surface', variable: `--callout-${v}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `--callout-${v}-border` },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--callout-${v}-border-width` },
+      { label: 'accent edge width', canBeLinked: true, groupKey: 'accent-width', variable: `--callout-${v}-accent-width` },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--callout-${v}-radius` },
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--callout-${v}-padding` },
+    ];
+  }
+  // Two type groups per variant: label (e.g. "Warning.") and message body.
+  function variantTypeGroups(v: Variant): TypeGroupConfig[] {
+    return [
+      {
+        legend: `${v} label`,
+        colorVariable: `--callout-${v}-label`,
+        familyVariable: `--callout-${v}-label-font-family`,
+        sizeVariable: `--callout-${v}-label-font-size`,
+        weightVariable: `--callout-${v}-label-font-weight`,
+        lineHeightVariable: `--callout-${v}-label-line-height`,
+      },
+      {
+        legend: `${v} message`,
+        colorVariable: `--callout-${v}-text`,
+        familyVariable: `--callout-${v}-text-font-family`,
+        sizeVariable: `--callout-${v}-text-font-size`,
+        weightVariable: `--callout-${v}-text-font-weight`,
+        lineHeightVariable: `--callout-${v}-text-line-height`,
+      },
+    ];
+  }
+  function variantTypeGroupTokens(v: Variant): Token[] {
+    return [
+      { label: 'font family', canBeLinked: true, groupKey: 'label-font-family', variable: `--callout-${v}-label-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'label-font-size', variable: `--callout-${v}-label-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'label-font-weight', variable: `--callout-${v}-label-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'label-line-height', variable: `--callout-${v}-label-line-height` },
+      { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: `--callout-${v}-text-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: `--callout-${v}-text-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: `--callout-${v}-text-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: `--callout-${v}-text-line-height` },
+    ];
+  }
+  export const allTokens: Token[] = variants.flatMap((v) => [
+    ...variantTokens(v),
+    ...buildTypeGroupColorTokens(variantTypeGroups(v)),
+    ...variantTypeGroupTokens(v),
+  ]);
+
+  const linkableProps = [
+    'border-width', 'accent-width', 'radius', 'padding',
+    'label-font-family', 'label-font-size', 'label-font-weight', 'label-line-height',
+    'text-font-family', 'text-font-size', 'text-font-weight', 'text-line-height',
+  ] as const;
+  const linkableContexts = new Map<string, string>(
+    variants.flatMap((v) => linkableProps.map((p) => [`--callout-${v}-${p}`, v] as [string, string]))
+  );
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import Callout from '../components/Callout.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import { buildSiblings } from './scaffolding/siblings';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+
+  const sample: Record<Variant, { label: string; message: string }> = {
+    info: { label: 'Note.', message: 'This is contextual information you should know about.' },
+    success: { label: 'Tip.', message: 'Bookmark this page so you can return when you need it.' },
+    warning: { label: 'Warning.', message: 'This is a warning callout for important caveats or potential issues.' },
+    danger: { label: 'Danger.', message: 'This action is destructive and cannot be undone.' },
+  };
+</script>
+
+<ComponentEditorBase {component} title="Callout" description="Bordered callout box with semantic info / success / warning / danger variants, label + message text. Import from <code>components/Callout.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+  {#each variants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={{ [v]: visibleVariantTokens(v) }}
+      typeGroups={{ [v]: variantTypeGroups(v) }}
+      {component}
+      siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
+    >
+      <Callout variant={v} label={sample[v].label}>{sample[v].message}</Callout>
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>

package/src/component-editor/CardEditor.svelte

@@ -0,0 +1,184 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'card';
+
+  // The card is a single object across two states (default, hover).
+  // Within each state we keep object shape props (surface/border/border-width/radius/padding/shadow) together.
+  // Title and body are nested elements with their own typography.
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'surface color', groupKey: 'surface', variable: '--card-default-surface' },
+      { label: 'header color', groupKey: 'surface', variable: '--card-default-header-surface' },
+      { label: 'border color', groupKey: 'border', variable: '--card-default-border' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--card-default-border-width' },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--card-default-radius' },
+      { label: 'header padding', canBeLinked: true, groupKey: 'header-padding', variable: '--card-default-header-padding' },
+      { label: 'body padding', canBeLinked: true, groupKey: 'body-padding', variable: '--card-default-body-padding' },
+      { label: 'card shadow', canBeLinked: true, groupKey: 'shadow', variable: '--card-default-shadow' },
+      { label: 'background blur', canBeLinked: true, groupKey: 'blur', variable: '--card-default-blur' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--card-default-icon-size' },
+    ],
+    hover: [
+      { label: 'surface color', groupKey: 'surface', variable: '--card-hover-surface' },
+      { label: 'header color', groupKey: 'surface', variable: '--card-hover-header-surface' },
+      { label: 'border color', groupKey: 'border', variable: '--card-hover-border' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--card-hover-border-width' },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--card-hover-radius' },
+      { label: 'header padding', canBeLinked: true, groupKey: 'header-padding', variable: '--card-hover-header-padding' },
+      { label: 'body padding', canBeLinked: true, groupKey: 'body-padding', variable: '--card-hover-body-padding' },
+      { label: 'card shadow', canBeLinked: true, groupKey: 'shadow', variable: '--card-hover-shadow' },
+      { label: 'background blur', canBeLinked: true, groupKey: 'blur', variable: '--card-hover-blur' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--card-hover-icon-size' },
+    ],
+  };
+
+  // Two type groups per state: title and body. Linked across states (same nested object).
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    default: [
+      {
+        legend: 'card title',
+        colorVariable: '--card-default-title',
+        familyVariable: '--card-default-title-font-family',
+        sizeVariable: '--card-default-title-font-size',
+        weightVariable: '--card-default-title-font-weight',
+        lineHeightVariable: '--card-default-title-line-height',
+      },
+      {
+        legend: 'card body',
+        colorVariable: '--card-default-body',
+        familyVariable: '--card-default-body-font-family',
+        sizeVariable: '--card-default-body-font-size',
+        weightVariable: '--card-default-body-font-weight',
+        lineHeightVariable: '--card-default-body-line-height',
+      },
+    ],
+    hover: [
+      {
+        legend: 'card title',
+        colorVariable: '--card-hover-title',
+        familyVariable: '--card-hover-title-font-family',
+        sizeVariable: '--card-hover-title-font-size',
+        weightVariable: '--card-hover-title-font-weight',
+        lineHeightVariable: '--card-hover-title-line-height',
+      },
+      {
+        legend: 'card body',
+        colorVariable: '--card-hover-body',
+        familyVariable: '--card-hover-body-font-family',
+        sizeVariable: '--card-hover-body-font-size',
+        weightVariable: '--card-hover-body-font-weight',
+        lineHeightVariable: '--card-hover-body-line-height',
+      },
+    ],
+  };
+
+  // Title type tokens (linked across states, but title and body are different objects so they don't link to each other).
+  const typeGroupTokens: Token[] = [
+    { label: 'font family', canBeLinked: true, groupKey: 'title-font-family', variable: '--card-default-title-font-family' },
+    { label: 'font family', canBeLinked: true, groupKey: 'title-font-family', variable: '--card-hover-title-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'title-font-size', variable: '--card-default-title-font-size' },
+    { label: 'font size', canBeLinked: true, groupKey: 'title-font-size', variable: '--card-hover-title-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: '--card-default-title-font-weight' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: '--card-hover-title-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'title-line-height', variable: '--card-default-title-line-height' },
+    { label: 'line height', canBeLinked: true, groupKey: 'title-line-height', variable: '--card-hover-title-line-height' },
+    { label: 'font family', canBeLinked: true, groupKey: 'body-font-family', variable: '--card-default-body-font-family' },
+    { label: 'font family', canBeLinked: true, groupKey: 'body-font-family', variable: '--card-hover-body-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'body-font-size', variable: '--card-default-body-font-size' },
+    { label: 'font size', canBeLinked: true, groupKey: 'body-font-size', variable: '--card-hover-body-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'body-font-weight', variable: '--card-default-body-font-weight' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'body-font-weight', variable: '--card-hover-body-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'body-line-height', variable: '--card-default-body-line-height' },
+    { label: 'line height', canBeLinked: true, groupKey: 'body-line-height', variable: '--card-hover-body-line-height' },
+  ];
+  // Cross-state linked block — present each linkable property from the default state.
+  const linkableContexts = new Map<string, string>([
+    ['--card-default-border-width', 'card'],
+    ['--card-default-radius', 'card'],
+    ['--card-default-header-padding', 'card'],
+    ['--card-default-body-padding', 'card'],
+    ['--card-default-shadow', 'card'],
+    ['--card-default-blur', 'card'],
+    ['--card-default-icon-size', 'card'],
+    ['--card-default-title-font-family', 'title'],
+    ['--card-default-title-font-size', 'title'],
+    ['--card-default-title-font-weight', 'title'],
+    ['--card-default-title-line-height', 'title'],
+    ['--card-default-body-font-family', 'body'],
+    ['--card-default-body-font-size', 'body'],
+    ['--card-default-body-font-weight', 'body'],
+    ['--card-default-body-line-height', 'body'],
+  ]);
+  export const allTokens: Token[] = [
+    ...Object.values(states).flat(),
+    ...buildTypeGroupColorTokens(typeGroups),
+    ...typeGroupTokens,
+  ];
+</script>
+
+<script lang="ts">
+  import Card from '../components/Card.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
+  import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+
+  $: visibleStates = Object.fromEntries(
+    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>;
+
+  let hoverEnabled = true;
+  let bgMode: 'image' | 'color' = 'image';
+  const bgVar = '--backdrop-card-surface';
+</script>
+
+<ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body. Import from <code>components/Card.svelte</code>" tokens={allTokens} {linked}>
+  <svelte:fragment slot="config">
+    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
+  </svelte:fragment>
+  <VariantGroup
+    name="card"
+    title="Card"
+    states={visibleStates}
+    {typeGroups}
+    {component}
+    let:activeState
+  >
+    <svelte:fragment slot="state-actions" let:stateName>
+      {#if stateName === 'hover'}
+        <label class="hover-enable">
+          <input type="checkbox" bind:checked={hoverEnabled} />
+          <span>Use hover</span>
+        </label>
+      {/if}
+    </svelte:fragment>
+    {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
+    <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
+      <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>
+        </Card>
+      </div>
+    </ShadowBackdrop>
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .card-demo {
+    max-width: 28rem;
+  }
+  .hover-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;
+  }
+</style>