better-design 0.20.0 → 0.21.0

package/dist/index.js

@@ -10,7 +10,7 @@ var __export = (target, all) => {
 };
 
 // ../shared/src/mcp/clients.ts
-var MCP_NAME, API_BASE, MCP_URL, bearer, MCP_CLIENT_SHAPES;
+var MCP_NAME, API_BASE, MCP_URL, bearer, MCP_CLIENT_CONFIGS;
 var init_clients = __esm({
   "../shared/src/mcp/clients.ts"() {
     "use strict";
@@ -18,7 +18,7 @@ var init_clients = __esm({
     API_BASE = process.env.NEXT_PUBLIC_APP_URL || process.env.BETTER_DESIGN_API_URL || "https://better-design.com";
     MCP_URL = `${API_BASE}/api/mcp`;
     bearer = (apiKey) => ({ Authorization: `Bearer ${apiKey}` });
-    MCP_CLIENT_SHAPES = {
+    MCP_CLIENT_CONFIGS = {
       "claude-code": {
         kind: "command",
         buildCommand: (apiKey, scope) => ({
@@ -175,14 +175,14 @@ var init_clients2 = __esm({
     home = os.homedir();
     CLIENTS = [
       {
-        ...MCP_CLIENT_SHAPES["claude-code"],
+        ...MCP_CLIENT_CONFIGS["claude-code"],
         id: "claude-code",
         label: "Claude Code",
         scopes: ["global", "project"],
         detect: () => onPath("claude")
       },
       {
-        ...MCP_CLIENT_SHAPES.cursor,
+        ...MCP_CLIENT_CONFIGS.cursor,
         id: "cursor",
         label: "Cursor",
         scopes: ["global", "project"],
@@ -190,7 +190,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(home, ".cursor")
       },
       {
-        ...MCP_CLIENT_SHAPES.vscode,
+        ...MCP_CLIENT_CONFIGS.vscode,
         id: "vscode",
         label: "VS Code (Copilot)",
         scopes: ["global", "project"],
@@ -198,7 +198,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(appSupport(), "Code") || onPath("code")
       },
       {
-        ...MCP_CLIENT_SHAPES.windsurf,
+        ...MCP_CLIENT_CONFIGS.windsurf,
         id: "windsurf",
         label: "Windsurf",
         scopes: ["global"],
@@ -206,7 +206,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(home, ".codeium", "windsurf")
       },
       {
-        ...MCP_CLIENT_SHAPES.zed,
+        ...MCP_CLIENT_CONFIGS.zed,
         id: "zed",
         label: "Zed",
         scopes: ["global"],
@@ -214,7 +214,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(configHome(), "zed") || dirExists(appSupport(), "Zed") || onPath("zed")
       },
       {
-        ...MCP_CLIENT_SHAPES.cline,
+        ...MCP_CLIENT_CONFIGS.cline,
         id: "cline",
         label: "Cline (VS Code)",
         scopes: ["global"],
@@ -230,7 +230,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(appSupport(), "Code", "User", "globalStorage", "saoudrizwan.claude-dev")
       },
       {
-        ...MCP_CLIENT_SHAPES["claude-desktop"],
+        ...MCP_CLIENT_CONFIGS["claude-desktop"],
         id: "claude-desktop",
         label: "Claude Desktop",
         scopes: ["global"],
@@ -238,7 +238,7 @@ var init_clients2 = __esm({
         detect: () => platform() === "linux" ? dirExists(configHome(), "Claude") : dirExists(appSupport(), "Claude")
       },
       {
-        ...MCP_CLIENT_SHAPES.opencode,
+        ...MCP_CLIENT_CONFIGS.opencode,
         id: "opencode",
         label: "OpenCode",
         scopes: ["global", "project"],
@@ -246,7 +246,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(configHome(), "opencode") || onPath("opencode")
       },
       {
-        ...MCP_CLIENT_SHAPES.amp,
+        ...MCP_CLIENT_CONFIGS.amp,
         id: "amp",
         label: "Amp (Sourcegraph)",
         scopes: ["global"],
@@ -254,7 +254,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(configHome(), "amp") || onPath("amp")
       },
       {
-        ...MCP_CLIENT_SHAPES.codex,
+        ...MCP_CLIENT_CONFIGS.codex,
         id: "codex",
         label: "Codex CLI",
         scopes: ["global"],
@@ -262,7 +262,7 @@ var init_clients2 = __esm({
         detect: () => dirExists(home, ".codex") || onPath("codex")
       },
       {
-        ...MCP_CLIENT_SHAPES.continue,
+        ...MCP_CLIENT_CONFIGS.continue,
         id: "continue",
         label: "Continue.dev",
         scopes: ["project"],
@@ -284,7 +284,7 @@ var init_constants = __esm({
     RULE_END = "<!-- better-design:end -->";
     RULE_BODY = `## Better Design
 
-Always use the Better Design MCP tools for any frontend, UI, UX, interaction, flow, form, navigation, dialog, error, onboarding, component, styling, React Native, Expo, or Three.js work, without me having to explicitly ask. For React Native or Expo, load task guidance with \`get-react-native-guide\`; for Three.js or React Three Fiber, use \`get-three-js-guide\`. Load visual guidance with \`get-ui-principle\`, load flow/behavior guidance with \`get-ux-principle\`, and self-review against \`get-review-rules\` and \`check-comprehension\` after. When a rendered DOM is available, also run \`inspect-spacing\` for measured layout evidence. Start UI builds with \`find-design-system\`. For a custom brand, call \`create-design-system\`, poll \`get-design-system-status\`, and run its React install command in coding hosts; in inline canvases, call \`get-design-system-kit\` with target \`html\` and the generated projectId. For a catalog system, call \`get-design-system-kit\` with target \`react\` in coding hosts or \`html\` in inline canvases.`;
+Always use the Better Design MCP tools for any frontend, UI, UX, interaction, flow, form, navigation, dialog, error, onboarding, component, styling, React Native, Expo, Three.js, or Shopify work, without me having to explicitly ask. For React Native or Expo, load task guidance with \`get-react-native-guide\`; for Three.js or React Three Fiber, use \`get-three-js-guide\`; for Shopify Liquid or theme work, use \`get-shopify-guide\`. Load visual guidance with \`get-ui-principle\`, load flow/behavior guidance with \`get-ux-principle\`, and self-review against \`get-review-rules\` and \`check-comprehension\` after. When a rendered DOM is available, also run \`inspect-spacing\` for measured layout evidence. Start UI builds with \`find-design-system\`. For a custom brand, call \`create-design-system\`, poll \`get-design-system-status\`, and run its React install command in coding hosts; in inline canvases, call \`get-design-system-kit\` with target \`html\` and the generated projectId. For a catalog system, call \`get-design-system-kit\` with target \`react\` in coding hosts or \`html\` in inline canvases. For a Shopify store, load \`get-shopify-guide\`, then call \`get-design-system-kit\` with target \`shopify\`.`;
     RULE_BLOCK = `${RULE_START}
 ${RULE_BODY}
 ${RULE_END}`;
@@ -1504,8 +1504,8 @@ var init_lint = __esm({
 // src/review/config-loader.ts
 import { readFileSync as readFileSync2 } from "fs";
 import { dirname, join, parse as parse2 } from "path";
-function isNotFound(error) {
-  return error?.code === "ENOENT" || error?.code === "ENOTDIR";
+function isNotFound(cause) {
+  return cause?.code === "ENOENT" || cause?.code === "ENOTDIR";
 }
 function loadReviewConfig(cwd) {
   const { root } = parse2(cwd);
@@ -1815,7 +1815,11 @@ For any pitch deck, presentation, or slide system in a coding host with filesyst
 
 // ../shared/src/mcp/instructions.ts
 function getMcpInstructions(options = {}) {
-  const { enableReactNativeGuide = true, enableThreeJsGuide = true } = options;
+  const {
+    enableReactNativeGuide = true,
+    enableThreeJsGuide = true,
+    enableShopifyKit = true
+  } = options;
   let instructions = INSTRUCTIONS;
   if (!enableReactNativeGuide && !enableThreeJsGuide) {
     instructions = instructions.replace(", React Native, Expo, or Three.js", "").replace(/\nRN\/Expo:[^\n]+/, "");
@@ -1827,6 +1831,9 @@ function getMcpInstructions(options = {}) {
   } else if (!enableThreeJsGuide) {
     instructions = instructions.replace(", Expo, or Three.js work", ", or Expo work").replace(", get-three-js-guide", "").replace("; Three.js/R3F: get-three-js-guide", "");
   }
+  if (!enableShopifyKit) {
+    instructions = instructions.replace(/\nShopify:[^\n]+/, "");
+  }
   return instructions.replace(/\n{3,}/g, "\n\n");
 }
 var INSTRUCTIONS;
@@ -1841,6 +1848,7 @@ Use for ANY frontend, UI, component, styling, presentation, slide, React Native,
 Core tools: find-design-system, create-design-system, get-design-system-status, get-design-system-kit, get-ui-principle, get-ux-principle, get-review-rules, check-comprehension.
 
 RN/Expo: get-react-native-guide; Three.js/R3F: get-three-js-guide. Use { topic } for lookup or { query } for search.
+Shopify: get-shopify-guide for implementation guidance; get-design-system-kit target "shopify" for theme files.
 
 ${PRESENTATION_RUNTIME_RULE}
 
@@ -1938,6 +1946,7 @@ var init_session_guidance = __esm({
       "get-ux-principle",
       "get-react-native-guide",
       "get-three-js-guide",
+      "get-shopify-guide",
       "get-motion-guide"
     ]);
     REVIEW_TOOLS = /* @__PURE__ */ new Set([
@@ -2194,6 +2203,7 @@ The UI copy inside the screen follows the same restraint: short headlines (about
       "get-ux-principle",
       "get-react-native-guide",
       "get-three-js-guide",
+      "get-shopify-guide",
       "get-motion-guide",
       "get-review-rules",
       "find-icon-library",
@@ -2212,23 +2222,28 @@ var init_motion_scaffold = __esm({
       {
         path: "package.json",
         contents: `{
-  "name": "motion",
+  "name": "product-demo-video",
   "private": true,
   "scripts": {
-    "dev": "remotion studio",
-    "music": "python3 scripts/make-music.py",
-    "render": "remotion render Video out/video.mp4 --concurrency=6",
-    "render:1080": "remotion render Video out/video-1080.mp4 --concurrency=6 --scale=1.5"
+    "dev": "remotion studio --no-open",
+    "check": "tsc --noEmit && remotion compositions src/index.ts",
+    "music": "bun scripts/make-music.ts",
+    "captions": "bun scripts/write-captions.ts",
+    "render": "remotion render ProductDemo-Landscape out/product-demo.mp4 --concurrency=6",
+    "render:vertical": "remotion render ProductDemo-Vertical out/product-demo-vertical.mp4 --concurrency=6",
+    "package": "bun scripts/package-output.ts",
+    "review:frames": "mkdir -p out/frames && ffmpeg -i out/product-demo.mp4 -vf fps=3 out/frames/%04d.png"
   },
   "dependencies": {
-    "@remotion/cli": "4.0.499",
-    "@remotion/google-fonts": "4.0.499",
-    "@remotion/layout-utils": "4.0.499",
+    "@remotion/cli": "4.0.513",
+    "@remotion/media": "4.0.513",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "remotion": "4.0.499"
+    "remotion": "4.0.513",
+    "zod": "4.4.3"
   },
   "devDependencies": {
+    "@types/node": "22.13.14",
     "@types/react": "19.0.0",
     "typescript": "5.7.3"
   }
@@ -2247,20 +2262,15 @@ var init_motion_scaffold = __esm({
     "skipLibCheck": true,
     "esModuleInterop": true,
     "noEmit": true,
-    "lib": [
-      "ES2022",
-      "DOM"
-    ]
+    "lib": ["ES2022", "DOM"]
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "scripts"]
 }
 `
       },
       {
         path: "remotion.config.ts",
-        contents: `import { Config } from "@remotion/cli/config";
+        contents: `import {Config} from "@remotion/cli/config";
 
 Config.setVideoImageFormat("jpeg");
 Config.setOverwriteOutput(true);
@@ -2268,472 +2278,692 @@ Config.setOverwriteOutput(true);
       },
       {
         path: ".gitignore",
-        contents: `node_modules/\\nout/\\npublic/music/\\n`
+        contents: `node_modules/
+out/
+public/music/
+public/captions/
+`
       },
       {
         path: "src/index.ts",
-        contents: `import { registerRoot } from "remotion";
-import { RemotionRoot } from "./Root";
+        contents: `import {registerRoot} from "remotion";
+import {RemotionRoot} from "./Root";
 
 registerRoot(RemotionRoot);
 `
       },
       {
-        path: "src/Root.tsx",
-        contents: `import React from "react";
-import { Composition } from "remotion";
-import { Video, TOTAL_FRAMES, FPS } from "./Video";
+        path: "src/design-system.ts",
+        contents: `export type VideoFormat = "landscape" | "vertical";
+export type MotionTemperament = "calm" | "direct" | "expressive" | "technical";
+
+export type VideoDesignSystem = {
+  color: {
+    stage: string;
+    foreground: string;
+    mutedForeground: string;
+    surface: string;
+    elevatedSurface: string;
+    border: string;
+    accent: string;
+    accentForeground: string;
+  };
+  type: {
+    family: string;
+    displayWeight: number;
+    bodyWeight: number;
+  };
+  frame: {
+    radius: {small: number; medium: number; large: number};
+    shadow: string;
+  };
+  motion: {
+    temperament: MotionTemperament;
+    duration: {fast: number; normal: number; slow: number};
+    stagger: {tight: number; normal: number};
+    spring: {settle: number; emphasis: number};
+    distance: {short: number; medium: number};
+  };
+  camera: {
+    subtlePushFrom: number;
+    normalPushFrom: number;
+    perspective: number;
+  };
+  transition: {
+    neutral: "cut";
+    depthFrames: number;
+    emphasisFrames: number;
+  };
+  format: Record<VideoFormat, {
+    width: number;
+    height: number;
+    safeX: number;
+    safeY: number;
+  }>;
+  audio: {bpm: number; beatFrames: number};
+};
 
-export const RemotionRoot: React.FC = () => (
-  <Composition
-    id="Video"
-    component={Video}
-    durationInFrames={TOTAL_FRAMES}
-    fps={FPS}
-    width={1280}
-    height={720}
-  />
-);
+/**
+ * Replace these semantic values with the product's design-system tokens.
+ * Keep the roles intact: the film and the app should use the same brand logic.
+ */
+export const videoDesignSystem: VideoDesignSystem = {
+  color: {
+    stage: "oklch(0.98 0.004 90)",
+    foreground: "oklch(0.24 0.005 75)",
+    mutedForeground: "oklch(0.52 0.008 80)",
+    surface: "oklch(1 0 0)",
+    elevatedSurface: "oklch(0.99 0.004 90)",
+    border: "oklch(0.9 0.008 85)",
+    accent: "oklch(0.62 0.2 256)",
+    accentForeground: "oklch(1 0 0)",
+  },
+  type: {
+    family: "ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif",
+    displayWeight: 650,
+    bodyWeight: 500,
+  },
+  frame: {
+    radius: {small: 10, medium: 18, large: 30},
+    shadow: "0 24px 70px oklch(0 0 0 / 0.12), 0 3px 12px oklch(0 0 0 / 0.08)",
+  },
+  motion: {
+    temperament: "direct",
+    duration: {fast: 12, normal: 24, slow: 36},
+    stagger: {tight: 4, normal: 8},
+    spring: {settle: 200, emphasis: 26},
+    distance: {short: 18, medium: 48},
+  },
+  camera: {
+    subtlePushFrom: 0.96,
+    normalPushFrom: 0.92,
+    perspective: 1200,
+  },
+  transition: {
+    neutral: "cut",
+    depthFrames: 18,
+    emphasisFrames: 12,
+  },
+  format: {
+    landscape: {width: 1920, height: 1080, safeX: 120, safeY: 100},
+    vertical: {width: 1080, height: 1920, safeX: 84, safeY: 180},
+  },
+  audio: {bpm: 120, beatFrames: 15},
+};
 `
       },
       {
-        path: "src/Video.tsx",
-        contents: `import React from "react";
-import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
+        path: "src/formats.ts",
+        contents: `import {videoDesignSystem, type VideoFormat} from "./design-system";
 
-import { BeforeAfter } from "./scenes/BeforeAfter";
-import { DeviceFrame } from "./scenes/DeviceFrame";
-import { TitleCard } from "./scenes/TitleCard";
-import { color } from "./theme";
+export const FORMAT_PROFILES = videoDesignSystem.format;
 
-export const FPS = 60;
+export const formatProfile = (format: VideoFormat) => FORMAT_PROFILES[format];
 
-/**
- * The running order, and the only place scene lengths live.
- *
- * Read the titles on their own. If they do not tell the story in order, no
- * amount of animation will rescue it.
- *
- * At 120 BPM and 60fps a beat is 30 frames, so every length here is a multiple
- * of 30 and the cuts land on the beat. scripts/make-music.py reads these
- * numbers back out of this file, so changing one keeps the music in step.
- */
-export const SCENES = [
-  {
-    id: "hook",
-    frames: 240,
-    node: <TitleCard title="Your product, in sixty seconds." />,
-  },
-  {
-    id: "problem",
-    frames: 270,
-    node: <TitleCard title="Here is the part people struggle with." muted />,
+export const scaleFromReference = (value: number, width: number, height: number) =>
+  value * (Math.min(width, height) / 1080);
+
+export const isVerticalFormat = (width: number, height: number) => height > width;
+`
+      },
+      {
+        path: "src/brief.ts",
+        contents: `import {z} from "zod";
+
+export const ProductDemoSchema = z.object({
+  format: z.enum(["landscape", "vertical"]),
+  duration: z.enum(["short", "standard"]),
+  product: z.object({
+    name: z.string(),
+    oneLiner: z.string(),
+  }),
+  hook: z.string(),
+  productMoment: z.object({
+    action: z.string(),
+    result: z.string(),
+  }),
+  features: z.array(z.object({
+    title: z.string(),
+    outcome: z.string(),
+  })).min(2).max(3),
+  proof: z.object({
+    label: z.string(),
+    value: z.string(),
+    sourceUrl: z.string().url(),
+  }).optional(),
+  cta: z.object({
+    line: z.string(),
+    destination: z.string(),
+  }),
+  music: z.boolean(),
+  reducedMotion: z.boolean(),
+});
+
+export type ProductDemoProps = z.infer<typeof ProductDemoSchema>;
+
+export const DEFAULT_BRIEF: ProductDemoProps = {
+  format: "landscape",
+  duration: "standard",
+  product: {
+    name: "Your product",
+    oneLiner: "A clear description of what it helps people do",
   },
-  {
-    id: "product",
-    frames: 300,
-    node: <DeviceFrame caption="So we built this." />,
+  hook: "The costly problem your customer recognizes",
+  productMoment: {
+    action: "Show one real action in the product",
+    result: "Show the useful result of that action",
   },
-  {
-    id: "difference",
-    frames: 330,
-    node: <BeforeAfter beforeLabel="Before" afterLabel="After" />,
+  features: [
+    {title: "First concrete moment", outcome: "The result people get"},
+    {title: "Second concrete moment", outcome: "The next useful result"},
+  ],
+  proof: {
+    label: "A sourced result",
+    value: "Replace me",
+    sourceUrl: "https://example.com/source",
   },
-  {
-    id: "cta",
-    frames: 240,
-    node: <TitleCard title="Try it today." />,
+  cta: {
+    line: "Try the product",
+    destination: "example.com",
   },
-];
-
-export const TOTAL_FRAMES = SCENES.reduce((sum, scene) => sum + scene.frames, 0);
-
-export const Video: React.FC = () => (
-  <AbsoluteFill style={{ backgroundColor: color.background }}>
-    {/* Delete this line until you have run: bun run music */}
-    <Audio src={staticFile("music/bed.wav")} />
-    <Series>
-      {SCENES.map((scene) => (
-        <Series.Sequence key={scene.id} durationInFrames={scene.frames}>
-          {scene.node}
-        </Series.Sequence>
-      ))}
-    </Series>
-  </AbsoluteFill>
-);
+  music: false,
+  reducedMotion: false,
+};
 `
       },
       {
-        path: "src/theme.ts",
-        contents: `/**
- * Replace these with your own design system's tokens so the film and the app
- * are the same brand. If the project uses Better Design, copy the values
- * straight out of globals.css.
- */
-export const color = {
-  background: "oklch(0.98 0.004 90)",
-  foreground: "oklch(0.24 0.005 75)",
-  card: "oklch(1 0 0)",
-  muted: "oklch(0.94 0.006 86)",
-  mutedFg: "oklch(0.52 0.008 80)",
-  border: "oklch(0.9 0.008 85)",
-  accent: "oklch(0.62 0.2 256)",
-  accentFg: "oklch(1 0 0)",
+        path: "src/timeline.ts",
+        contents: `import type {ProductDemoProps} from "./brief";
+
+export type SceneKind = "hook" | "positioning" | "product" | "feature" | "proof" | "cta";
+
+export type SceneSpec = {
+  id: string;
+  kind: SceneKind;
+  title: string;
+  supporting?: string;
+  sourceUrl?: string;
+  durationInFrames: number;
 };
 
-export const radius = { sm: 8, md: 16, lg: 28 };
+export type TimelineScene = SceneSpec & {from: number};
 
-export const shadow = {
-  card: "0 18px 40px oklch(0 0 0 / 0.10), 0 2px 6px oklch(0 0 0 / 0.06)",
+const withOffsets = (scenes: SceneSpec[]): TimelineScene[] => {
+  let from = 0;
+  return scenes.map((scene) => {
+    const result = {...scene, from};
+    from += scene.durationInFrames;
+    return result;
+  });
 };
 
-/**
- * Load a webfont through @remotion/google-fonts rather than a CSS import, so
- * the render waits for it. A font that arrives late changes every text
- * measurement in the frame.
- */
-export const sans =
-  'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+const proofScenes = (props: ProductDemoProps, durationInFrames: number): SceneSpec[] => props.proof
+  ? [{
+    id: "proof",
+    kind: "proof",
+    title: props.proof.value,
+    supporting: props.proof.label,
+    sourceUrl: props.proof.sourceUrl,
+    durationInFrames,
+  }]
+  : [];
+
+export const buildTimeline = (props: ProductDemoProps): TimelineScene[] => {
+  if (props.duration === "short") {
+    return withOffsets([
+      {id: "hook", kind: "hook", title: props.hook, durationInFrames: 90},
+      {
+        id: "product",
+        kind: "product",
+        title: props.productMoment.action,
+        supporting: props.productMoment.result,
+        durationInFrames: 270,
+      },
+      ...proofScenes(props, 120),
+      {id: "cta", kind: "cta", title: props.cta.line, supporting: props.cta.destination, durationInFrames: 60},
+    ]);
+  }
 
-export const type = {
-  title: { fontSize: 76, fontWeight: 600, letterSpacing: "-0.04em" },
-  caption: { fontSize: 28, fontWeight: 500, letterSpacing: "-0.01em" },
-  label: { fontSize: 20, fontWeight: 500, letterSpacing: "0" },
+  const featureBudget = 420;
+  const featureLength = Math.floor(featureBudget / props.features.length);
+  const featureScenes = props.features.map((feature, index) => ({
+    id: "feature-" + (index + 1),
+    kind: "feature" as const,
+    title: feature.title,
+    supporting: feature.outcome,
+    durationInFrames: index === props.features.length - 1
+      ? featureBudget - featureLength * index
+      : featureLength,
+  }));
+
+  return withOffsets([
+    {id: "hook", kind: "hook", title: props.hook, durationInFrames: 120},
+    {id: "positioning", kind: "positioning", title: props.product.oneLiner, supporting: props.product.name, durationInFrames: 90},
+    {
+      id: "product",
+      kind: "product",
+      title: props.productMoment.action,
+      supporting: props.productMoment.result,
+      durationInFrames: 300,
+    },
+    ...featureScenes,
+    ...proofScenes(props, 270),
+    {id: "cta", kind: "cta", title: props.cta.line, supporting: props.cta.destination, durationInFrames: 150},
+  ]);
 };
+
+export const totalFrames = (props: ProductDemoProps) =>
+  buildTimeline(props).reduce((total, scene) => total + scene.durationInFrames, 0);
+
+export const captionCues = (props: ProductDemoProps) =>
+  buildTimeline(props).map((scene) => ({
+    startFrame: scene.from,
+    endFrame: scene.from + scene.durationInFrames,
+    text: [scene.title, scene.supporting].filter(Boolean).join(". "),
+  }));
 `
       },
       {
-        path: "src/scenes/TitleCard.tsx",
+        path: "src/Root.tsx",
         contents: `import React from "react";
-import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
-
-import { color, sans, type } from "../theme";
-
-/**
- * One sentence, held still. Note the two things every scene here does:
- * it starts visible enough to read on frame one, and it stops moving before
- * the scene ends.
- */
-export const TitleCard: React.FC<{ title: string; muted?: boolean }> = ({
-  title,
-  muted = false,
-}) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+import {Composition, type CalculateMetadataFunction} from "remotion";
+import {DEFAULT_BRIEF, ProductDemoSchema, type ProductDemoProps} from "./brief";
+import {formatProfile} from "./formats";
+import {totalFrames} from "./timeline";
+import {ProductDemo} from "./Video";
+
+const calculateMetadata: CalculateMetadataFunction<ProductDemoProps> = ({props}) => {
+  const profile = formatProfile(props.format);
+  return {
+    width: profile.width,
+    height: profile.height,
+    durationInFrames: totalFrames(props),
+    props,
+  };
+};
 
-  const enter = spring({ frame, fps, config: { damping: 26 } });
-  const rise = interpolate(enter, [0, 1], [18, 0]);
-  const fade = interpolate(frame, [0, 12], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
+export const RemotionRoot: React.FC = () => (
+  <>
+    <Composition
+      id="ProductDemo-Landscape"
+      component={ProductDemo}
+      schema={ProductDemoSchema}
+      defaultProps={{...DEFAULT_BRIEF, format: "landscape"}}
+      calculateMetadata={calculateMetadata}
+      durationInFrames={1350}
+      fps={30}
+      width={1920}
+      height={1080}
+    />
+    <Composition
+      id="ProductDemo-Vertical"
+      component={ProductDemo}
+      schema={ProductDemoSchema}
+      defaultProps={{...DEFAULT_BRIEF, format: "vertical"}}
+      calculateMetadata={calculateMetadata}
+      durationInFrames={1350}
+      fps={30}
+      width={1080}
+      height={1920}
+    />
+  </>
+);
+`
+      },
+      {
+        path: "src/Video.tsx",
+        contents: `import React from "react";
+import {Audio} from "@remotion/media";
+import {
+  AbsoluteFill,
+  Easing,
+  Series,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import type {ProductDemoProps} from "./brief";
+import {videoDesignSystem as system} from "./design-system";
+import {formatProfile, isVerticalFormat, scaleFromReference} from "./formats";
+import {buildTimeline, type TimelineScene} from "./timeline";
+
+const enter = (frame: number, fps: number, reducedMotion: boolean) => reducedMotion
+  ? 1
+  : spring({
+    frame,
+    fps,
+    config: {damping: system.motion.spring.settle},
   });
 
+const SceneFrame: React.FC<React.PropsWithChildren> = ({children}) => {
+  const {width, height} = useVideoConfig();
+  const vertical = isVerticalFormat(width, height);
+  const profile = formatProfile(vertical ? "vertical" : "landscape");
   return (
-    <AbsoluteFill
-      style={{
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 96,
-        fontFamily: sans,
-      }}
-    >
-      <h1
-        style={{
-          ...type.title,
-          margin: 0,
-          width: "100%",
-          textAlign: "center",
-          color: muted ? color.mutedFg : color.foreground,
-          opacity: fade,
-          transform: "translateY(" + rise + "px)",
-        }}
-      >
-        {title}
-      </h1>
+    <AbsoluteFill style={{
+      padding: profile.safeY + "px " + profile.safeX + "px",
+      backgroundColor: system.color.stage,
+      color: system.color.foreground,
+      fontFamily: system.type.family,
+      overflow: "hidden",
+    }}>
+      {children}
     </AbsoluteFill>
   );
 };
-`
-      },
-      {
-        path: "src/scenes/DeviceFrame.tsx",
-        contents: `import React from "react";
-import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
 
-import { color, radius, sans, shadow, type } from "../theme";
+type SceneProps = {scene: TimelineScene; reducedMotion: boolean};
 
-/**
- * A screenshot inside a frame. Put your own UI where the placeholder is, and
- * keep any cursor or callout INSIDE this transform, or it drifts off target
- * the moment the scene scales.
- */
-export const DeviceFrame: React.FC<{ caption: string }> = ({ caption }) => {
+const MessageScene: React.FC<SceneProps & {accent?: boolean}> = ({scene, reducedMotion, accent = false}) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const enter = spring({ frame, fps, config: { damping: 24 } });
-  const scale = interpolate(enter, [0, 1], [0.94, 1]);
-  const fade = interpolate(frame, [0, 10], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
+  const {fps, width, height} = useVideoConfig();
+  const vertical = isVerticalFormat(width, height);
+  const progress = enter(frame, fps, reducedMotion);
+  const titleSize = scaleFromReference(vertical ? 92 : 84, width, height);
   return (
-    <AbsoluteFill
-      style={{
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 40,
-        fontFamily: sans,
-        opacity: fade,
-      }}
-    >
-      <div
-        style={{
-          width: 880,
-          height: 460,
-          borderRadius: radius.lg,
-          background: color.card,
-          border: "1px solid " + color.border,
-          boxShadow: shadow.card,
-          transform: "scale(" + scale + ")",
-          display: "grid",
-          placeItems: "center",
-          color: color.mutedFg,
-          ...type.label,
-        }}
-      >
-        Your screen here
+    <SceneFrame>
+      <div style={{
+        margin: "auto",
+        width: "100%",
+        maxWidth: vertical ? 850 : 1500,
+        textAlign: "center",
+        translate: reducedMotion ? "none" : "0 " + interpolate(progress, [0, 1], [system.motion.distance.short, 0]) + "px",
+      }}>
+        <h1 style={{
+          margin: 0,
+          fontSize: titleSize,
+          lineHeight: 1.02,
+          letterSpacing: "-0.045em",
+          fontWeight: system.type.displayWeight,
+          textWrap: "balance",
+          color: accent ? system.color.accent : system.color.foreground,
+        }}>
+          {scene.title}
+        </h1>
+        {scene.supporting ? (
+          <p style={{
+            margin: vertical ? "38px 0 0" : "30px 0 0",
+            fontSize: scaleFromReference(34, width, height),
+            lineHeight: 1.25,
+            color: system.color.mutedForeground,
+          }}>
+            {scene.supporting}
+          </p>
+        ) : null}
       </div>
-      <p style={{ ...type.caption, margin: 0, color: color.foreground }}>{caption}</p>
-    </AbsoluteFill>
+    </SceneFrame>
   );
 };
-`
-      },
-      {
-        path: "src/scenes/BeforeAfter.tsx",
-        contents: `import React from "react";
-import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
-
-import { color, radius, sans, shadow, type } from "../theme";
 
-/**
- * The comparison scene. It only works if both sides are on screen together
- * long enough to read, so bring the second panel in early and hold both.
- */
-export const BeforeAfter: React.FC<{
-  beforeLabel: string;
-  afterLabel: string;
-}> = ({ beforeLabel, afterLabel }) => {
+const ProductScene: React.FC<SceneProps> = ({scene, reducedMotion}) => {
   const frame = useCurrentFrame();
-
-  const left = interpolate(frame, [0, 20], [0, 1], {
+  const {fps, width, height} = useVideoConfig();
+  const vertical = isVerticalFormat(width, height);
+  const profile = formatProfile(vertical ? "vertical" : "landscape");
+  const progress = enter(frame, fps, reducedMotion);
+  const clickFrame = Math.min(96, Math.floor(scene.durationInFrames * 0.42));
+  const resultOpacity = reducedMotion ? 1 : interpolate(frame, [clickFrame + system.motion.duration.fast, clickFrame + system.motion.duration.normal], [0, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
   });
-  const right = interpolate(frame, [30, 55], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
-  const panel = {
-    width: 500,
-    height: 380,
-    borderRadius: radius.md,
-    border: "1px solid " + color.border,
-    background: color.card,
-    boxShadow: shadow.card,
-    display: "grid",
-    placeItems: "center",
-    color: color.mutedFg,
-    ...type.label,
-  } as const;
+  const panelWidth = vertical ? width - profile.safeX * 2 : Math.min(width - profile.safeX * 2, 1320);
+  const panelHeight = vertical ? Math.min(980, height * 0.52) : Math.min(680, height - 260);
+  return (
+    <SceneFrame>
+      <div style={{display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: vertical ? 54 : 34}}>
+        <p style={{margin: 0, fontSize: scaleFromReference(32, width, height), fontWeight: 600, textAlign: "center"}}>{scene.title}</p>
+        <div style={{
+          position: "relative",
+          width: panelWidth,
+          height: panelHeight,
+          borderRadius: system.frame.radius.large,
+          border: "1px solid " + system.color.border,
+          backgroundColor: system.color.surface,
+          boxShadow: system.frame.shadow,
+          overflow: "hidden",
+          scale: reducedMotion ? 1 : interpolate(progress, [0, 1], [system.camera.subtlePushFrom, 1], {output: "perceptual-scale"}),
+        }}>
+          <div style={{height: 62, borderBottom: "1px solid " + system.color.border, display: "flex", alignItems: "center", gap: 12, padding: "0 24px"}}>
+            {[0, 1, 2].map((dot) => <span key={dot} style={{width: 12, height: 12, borderRadius: 999, backgroundColor: system.color.border}} />)}
+          </div>
+          <div style={{padding: vertical ? 42 : 54, display: "grid", gap: 24}}>
+            <div style={{height: 18, width: "38%", borderRadius: 999, backgroundColor: system.color.border}} />
+            <div style={{height: 110, borderRadius: system.frame.radius.medium, border: "1px solid " + system.color.border, padding: 28, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+              <span style={{fontSize: scaleFromReference(28, width, height), fontWeight: 600}}>{scene.title}</span>
+              <span style={{position: "relative", padding: "14px 22px", borderRadius: system.frame.radius.small, backgroundColor: system.color.accent, color: system.color.accentForeground, fontSize: scaleFromReference(22, width, height), fontWeight: 650}}>
+                Run
+                <span style={{
+                  position: "absolute",
+                  display: reducedMotion ? "none" : "block",
+                  left: "50%",
+                  top: "50%",
+                  zIndex: 2,
+                  width: 28,
+                  height: 38,
+                  backgroundColor: system.color.foreground,
+                  clipPath: "polygon(0 0, 100% 70%, 58% 72%, 45% 100%)",
+                  translate: interpolate(frame, [12, clickFrame], ["-220px 160px", "4px 6px"], {extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.16, 1, 0.3, 1)}),
+                  scale: interpolate(frame, [clickFrame, clickFrame + 6, clickFrame + 12], [1, 0.82, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp", output: "perceptual-scale"}),
+                }} />
+              </span>
+            </div>
+            <div style={{opacity: resultOpacity, borderRadius: system.frame.radius.medium, padding: 28, backgroundColor: system.color.elevatedSurface, border: "1px solid " + system.color.accent, fontSize: scaleFromReference(27, width, height)}}>
+              {scene.supporting}
+            </div>
+          </div>
+        </div>
+      </div>
+    </SceneFrame>
+  );
+};
 
+const ProofScene: React.FC<SceneProps> = ({scene, reducedMotion}) => {
+  const frame = useCurrentFrame();
+  const {fps, width, height} = useVideoConfig();
+  const vertical = isVerticalFormat(width, height);
+  const profile = formatProfile(vertical ? "vertical" : "landscape");
+  const progress = enter(frame, fps, reducedMotion);
   return (
-    <AbsoluteFill
-      style={{
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 48,
-        flexDirection: "row",
-        fontFamily: sans,
-      }}
-    >
-      <div style={{ opacity: left, display: "grid", gap: 16, justifyItems: "center" }}>
-        <div style={panel}>Your old screen</div>
-        <span style={{ ...type.label, color: color.mutedFg }}>{beforeLabel}</span>
+    <SceneFrame>
+      <div style={{margin: "auto", textAlign: "center", scale: reducedMotion ? 1 : interpolate(progress, [0, 1], [0.92, 1], {output: "perceptual-scale"})}}>
+        <div style={{fontSize: scaleFromReference(150, width, height), lineHeight: 1, letterSpacing: "-0.06em", fontWeight: 700, color: system.color.accent}}>{scene.title}</div>
+        <p style={{fontSize: scaleFromReference(36, width, height), color: system.color.foreground}}>{scene.supporting}</p>
       </div>
-      <div style={{ opacity: right, display: "grid", gap: 16, justifyItems: "center" }}>
-        <div style={{ ...panel, borderColor: color.accent }}>Your new screen</div>
-        <span style={{ ...type.label, color: color.foreground }}>{afterLabel}</span>
+      <div style={{position: "absolute", left: 0, right: 0, bottom: profile.safeY, textAlign: "center", fontSize: scaleFromReference(18, width, height), color: system.color.mutedForeground}}>
+        Source: {scene.sourceUrl}
       </div>
+    </SceneFrame>
+  );
+};
+
+const SceneRenderer: React.FC<SceneProps> = ({scene, reducedMotion}) => {
+  if (scene.kind === "product") return <ProductScene scene={scene} reducedMotion={reducedMotion} />;
+  if (scene.kind === "proof") return <ProofScene scene={scene} reducedMotion={reducedMotion} />;
+  return <MessageScene scene={scene} reducedMotion={reducedMotion} accent={scene.kind === "cta"} />;
+};
+
+export const ProductDemo: React.FC<ProductDemoProps> = (props) => {
+  const timeline = buildTimeline(props);
+  return (
+    <AbsoluteFill style={{backgroundColor: system.color.stage}}>
+      {props.music ? <Audio src={staticFile("music/bed.wav")} /> : null}
+      <Series>
+        {timeline.map((scene) => (
+          <Series.Sequence key={scene.id} name={scene.id} durationInFrames={scene.durationInFrames}>
+            <SceneRenderer scene={scene} reducedMotion={props.reducedMotion} />
+          </Series.Sequence>
+        ))}
+      </Series>
     </AbsoluteFill>
   );
 };
 `
       },
       {
-        path: "scripts/make-music.py",
-        contents: `"""
-Synthesises the backing track, so nothing is licensed from anywhere.
-
-120 BPM at 60fps is a beat every 30 frames. Scene lengths are read straight
-out of src/Video.tsx, so the swells cannot drift from the edit: change a scene
-length there, run this again, and the accents move with it.
-"""
-
-import math
-import re
-import struct
-import wave
-from pathlib import Path
-
-ROOT = Path(__file__).resolve().parent.parent
-SR = 44_100
-FPS = 60
-BPM = 120
-BEAT = 60 / BPM
-
-SCENES = [
-    int(n)
-    for n in re.findall(r"frames: (\\d+)", (ROOT / "src" / "Video.tsx").read_text())
-]
-if not SCENES:
-    raise SystemExit("no \`frames: <n>\` entries found in src/Video.tsx")
-
-TOTAL = sum(SCENES) / FPS
-CUTS = []
-acc = 0
-for length in SCENES[:-1]:
-    acc += length
-    CUTS.append(acc / FPS)
-
-# A minor pentatonic pad. Swap these for any scale you like.
-CHORD = [220.00, 261.63, 329.63, 392.00]
-
-
-def envelope(t: float, attack: float, release: float, length: float) -> float:
-    if t < 0 or t > length:
-        return 0.0
-    if t < attack:
-        return t / attack
-    if t > length - release:
-        return max(0.0, (length - t) / release)
-    return 1.0
-
-
-samples = []
-for i in range(int(SR * TOTAL)):
-    t = i / SR
-    value = 0.0
-
-    # Pad: quiet, always there, gives the film a floor.
-    for n, freq in enumerate(CHORD):
-        value += math.sin(2 * math.pi * freq * t) * (0.05 / (n + 1))
-
-    # A pluck on every beat, louder on the downbeat.
-    beat_pos = t % BEAT
-    beat_index = int(t / BEAT)
-    accent = 1.0 if beat_index % 4 == 0 else 0.45
-    value += (
-        math.sin(2 * math.pi * CHORD[beat_index % len(CHORD)] * 2 * t)
-        * envelope(beat_pos, 0.005, 0.18, BEAT)
-        * 0.10
-        * accent
-    )
-
-    # A swell into every cut, so the edit and the music agree.
-    for cut in CUTS:
-        since = t - (cut - 0.6)
-        if 0 <= since <= 0.6:
-            value += math.sin(2 * math.pi * 110 * t) * (since / 0.6) * 0.12
+        path: "scripts/write-captions.ts",
+        contents: `import {mkdir, writeFile} from "node:fs/promises";
+import {DEFAULT_BRIEF} from "../src/brief";
+import {captionCues} from "../src/timeline";
+
+const fps = 30;
+const stamp = (frame: number) => {
+  const milliseconds = Math.round((frame / fps) * 1000);
+  const hours = Math.floor(milliseconds / 3_600_000);
+  const minutes = Math.floor((milliseconds % 3_600_000) / 60_000);
+  const seconds = Math.floor((milliseconds % 60_000) / 1000);
+  const rest = milliseconds % 1000;
+  return [hours, minutes, seconds].map((value) => String(value).padStart(2, "0")).join(":") + "." + String(rest).padStart(3, "0");
+};
 
-    samples.append(value)
+const body = captionCues(DEFAULT_BRIEF).map((cue, index) => [
+  String(index + 1),
+  stamp(cue.startFrame) + " --> " + stamp(cue.endFrame),
+  cue.text,
+].join("\\n")).join("\\n\\n");
 
-# Normalise, or it renders far too quiet under the picture.
-peak = max(abs(s) for s in samples) or 1.0
-gain = 0.89 / peak
+await mkdir("public/captions", {recursive: true});
+await writeFile("public/captions/product-demo.vtt", "WEBVTT\\n\\n" + body + "\\n");
+console.log("Wrote public/captions/product-demo.vtt");
+`
+      },
+      {
+        path: "scripts/make-music.ts",
+        contents: `import {mkdir, writeFile} from "node:fs/promises";
+import {DEFAULT_BRIEF} from "../src/brief";
+import {videoDesignSystem} from "../src/design-system";
+import {buildTimeline, totalFrames} from "../src/timeline";
+
+const sampleRate = 44_100;
+const fps = 30;
+const beatSeconds = 60 / videoDesignSystem.audio.bpm;
+const notes = [220, 261.63, 329.63, 392];
+const timeline = buildTimeline(DEFAULT_BRIEF);
+const cutSeconds = timeline.slice(1).map((scene) => scene.from / fps);
+const sampleCount = Math.floor(sampleRate * totalFrames(DEFAULT_BRIEF) / fps);
+const samples = new Float32Array(sampleCount);
+
+for (let index = 0; index < sampleCount; index++) {
+  const time = index / sampleRate;
+  let value = notes.reduce(
+    (sum, note, position) => sum + Math.sin(2 * Math.PI * note * time) * (0.04 / (position + 1)),
+    0,
+  );
+  const beatPosition = time % beatSeconds;
+  const beatIndex = Math.floor(time / beatSeconds);
+  if (beatPosition < 0.16) {
+    const envelope = (1 - beatPosition / 0.16) * (beatIndex % 4 === 0 ? 1 : 0.45);
+    value += Math.sin(2 * Math.PI * notes[beatIndex % notes.length] * 2 * time) * envelope * 0.1;
+  }
+  for (const cut of cutSeconds) {
+    const distance = time - (cut - 0.5);
+    if (distance >= 0 && distance <= 0.5) {
+      value += Math.sin(2 * Math.PI * 110 * time) * (distance / 0.5) * 0.1;
+    }
+  }
+  samples[index] = value;
+}
+
+const peak = samples.reduce((largest, sample) => Math.max(largest, Math.abs(sample)), 0) || 1;
+const gain = 0.89 / peak;
+const bytesPerSample = 2;
+const dataBytes = sampleCount * bytesPerSample;
+const wav = Buffer.alloc(44 + dataBytes);
+wav.write("RIFF", 0);
+wav.writeUInt32LE(36 + dataBytes, 4);
+wav.write("WAVE", 8);
+wav.write("fmt ", 12);
+wav.writeUInt32LE(16, 16);
+wav.writeUInt16LE(1, 20);
+wav.writeUInt16LE(1, 22);
+wav.writeUInt32LE(sampleRate, 24);
+wav.writeUInt32LE(sampleRate * bytesPerSample, 28);
+wav.writeUInt16LE(bytesPerSample, 32);
+wav.writeUInt16LE(16, 34);
+wav.write("data", 36);
+wav.writeUInt32LE(dataBytes, 40);
+
+for (let index = 0; index < sampleCount; index++) {
+  const normalized = Math.max(-1, Math.min(1, samples[index] * gain));
+  wav.writeInt16LE(Math.round(normalized * 32_767), 44 + index * bytesPerSample);
+}
+
+await mkdir("public/music", {recursive: true});
+await writeFile("public/music/bed.wav", wav);
+console.log("Wrote public/music/bed.wav");
+`
+      },
+      {
+        path: "scripts/package-output.ts",
+        contents: `import {copyFile, mkdir} from "node:fs/promises";
 
-out = ROOT / "public" / "music"
-out.mkdir(parents=True, exist_ok=True)
-path = out / "bed.wav"
+const artifacts = [
+  ["out/product-demo.mp4", "out/delivery/product-demo.mp4"],
+  ["out/product-demo-vertical.mp4", "out/delivery/product-demo-vertical.mp4"],
+  ["public/captions/product-demo.vtt", "out/delivery/product-demo.vtt"],
+] as const;
 
-with wave.open(str(path), "w") as f:
-    f.setnchannels(1)
-    f.setsampwidth(2)
-    f.setframerate(SR)
-    f.writeframes(
-        b"".join(struct.pack("<h", int(max(-1.0, min(1.0, s * gain)) * 32767)) for s in samples)
-    )
+await mkdir("out/delivery", {recursive: true});
+for (const [source, destination] of artifacts) {
+  await copyFile(source, destination);
+}
 
-print(f"wrote {path.name}: {TOTAL:.2f}s, {len(CUTS)} cuts")
+console.log("Packaged both videos and the required VTT caption track in out/delivery");
 `
       },
       {
         path: "README.md",
-        contents: `# motion
+        contents: `# Product demo video
 
-The video for this project. Every frame is React, so a scene is reviewed and
-changed like any other component.
+This starter turns a product brief and an existing design system into an editable Remotion video. The product interaction is the visual proof.
 
-## Run it
+## Start here
 
-\`\`\`bash
-bun install          # or npm install. The first run pulls a headless Chrome
-bun run music        # writes public/music/bed.wav
-bun run dev          # opens the studio, scrub and edit with hot reload
-bun run render       # writes out/video.mp4
-\`\`\`
+1. Install the official Remotion skills from https://www.remotion.dev/docs/ai/skills.
+2. Replace the semantic tokens in src/design-system.ts with the product's tokens.
+3. Replace every value in DEFAULT_BRIEF in src/brief.ts. The supplied values are explicit placeholders, not final copy or proof.
+4. Run bun install, bun run check and bun run dev. Open the exact Studio URL printed by the command.
+5. Check both ProductDemo-Landscape and ProductDemo-Vertical. Turn on reducedMotion and confirm that every scene still shows the same message and end state.
 
-Rendering happens on your machine. Nothing is uploaded.
+The default composition renders without an audio file. Run bun run music, then set music to true in the Studio props when the bed is wanted.
 
-## Where to start
+FFmpeg must be installed and available on PATH only for bun run review:frames.
 
-\`src/Video.tsx\` is the running order and the only place scene lengths live.
-Read the scene ids on their own: if they do not tell your story in order, fix
-that before touching any animation.
+## Render and review
 
-\`src/theme.ts\` holds the colours and type. Replace them with your own design
-system's tokens so the film and the app are the same brand.
+Run:
 
-\`src/scenes/\` has three patterns to copy: a title card, a screenshot in a
-frame, and a before and after.
+    bun run captions
+    bun run render
+    bun run render:vertical
+    bun run review:frames
+    bun run package
 
-## Two rules worth keeping
+The frame command samples at 3fps. Also check the first and last frame of every scene. A successful render is not visual approval. The package command places both videos and the required VTT caption track in out/delivery. Upload the VTT beside the MP4 instead of treating it as an optional build artifact.
 
-Scene lengths are multiples of 30 frames, which at 60fps and 120 BPM puts every
-cut on a beat. \`scripts/make-music.py\` reads those lengths back out of
-\`src/Video.tsx\`, so the music follows the edit rather than the other way round.
+## Design-system contract
 
-A render that succeeds is not a render that is correct. Before you ship it,
-step through the frames:
+- src/design-system.ts is the source of visual, motion and audio tokens.
+- src/formats.ts owns dimensions and safe areas. Vertical reflows; it does not shrink the landscape frame.
+- src/brief.ts owns product content and sourced proof.
+- src/timeline.ts owns scene order, lengths and caption cues.
+- src/Video.tsx owns reusable scene rendering.
 
-\`\`\`bash
-ffmpeg -i out/video.mp4 -vf fps=3 frames/%04d.png
-\`\`\`
-
-Sampling once a second is not enough. Check the first and last frame of every
-scene, which is where entry and exit animations fail.
-
-## Shipping it to the web
-
-\`\`\`bash
-ffmpeg -i out/video-1080.mp4 -vf scale=1280:-2 -c:v libx264 -crf 26 \\
-  -preset slow -movflags +faststart -c:a aac -b:a 96k web.mp4
-\`\`\`
+Use Better Design guidance for brand, story, hierarchy and review. Use the official Remotion skills for current APIs, Studio, media, captions and rendering.
 
-\`+faststart\` matters: without it the player waits for the whole file before it
-can begin.
+Optional community libraries can supply a specialized pattern: RemotionUI, remocn and Remotion Bits. Ask before installing them, keep their provenance and license, and adapt their source to this video system instead of importing a demo style unchanged.
 `
       }
     ];
     MOTION_SCAFFOLD_STEPS = [
-      "Write every file in MOTION_SCAFFOLD_FILES into a `motion/` directory at the repo root. Keep it out of the app's workspace: the first install pulls a headless Chrome and is around 600 MB.",
-      "Replace the tokens in src/theme.ts with the project's own colours, radii and type, so the film and the app are the same brand.",
-      "Rewrite the scene list in src/Video.tsx for this product. Keep every length a multiple of 30 frames so the cuts stay on the beat.",
-      "Tell the user to run: bun install, then bun run music, then bun run render.",
-      "Do not claim the video is finished until they have watched it. A render that succeeds is not a render that is correct."
+      "Write every file in MOTION_SCAFFOLD_FILES into a `motion/` directory at the repository root. Keep it outside the app workspace because the first Remotion install downloads a large headless browser.",
+      "Install and follow the official Remotion skills from https://www.remotion.dev/docs/ai/skills for current APIs and package versions.",
+      "Replace the semantic tokens in src/design-system.ts with the product's existing design-system values.",
+      "Replace every placeholder in src/brief.ts. When proof is present, keep its source URL and never invent a claim.",
+      "Run bun install, bun run check, bun run dev, bun run captions, bun run render, bun run render:vertical and bun run package.",
+      "Install FFmpeg before bun run review:frames. Inspect every scene boundary and ask the user to watch both final renders. A successful render is not visual approval."
     ].join("\n");
   }
 });
@@ -2831,7 +3061,7 @@ ${nudge}` }, ...rest]
 }
 async function runPrincipleTool(provider, area, label, toolName, args) {
   const { topic, query, maxTokens } = args;
-  const resourceLabel = area === "react-native" || area === "three-js" || area === "motion" || area === "swiftui" ? "Guides" : "Principles";
+  const resourceLabel = area === "react-native" || area === "three-js" || area === "motion" || area === "swiftui" || area === "shopify" ? "Guides" : "Principles";
   if (topic && query) {
     return {
       response: {
@@ -2913,7 +3143,11 @@ async function runGuidanceTool(provider, userId, clientName, area, label, toolNa
   ]);
   return { ...run, response: appendReviewNudge(run.response, session2) };
 }
-function registerPrincipleTools({ server, provider, track, userId }, { enableReactNativeGuide = true, enableThreeJsGuide = true } = {}) {
+function registerPrincipleTools({ server, provider, track, userId }, {
+  enableReactNativeGuide = true,
+  enableThreeJsGuide = true,
+  enableShopifyKit = true
+} = {}) {
   const clientName = () => mcpClientName(server);
   server.registerTool(
     "get-ui-principle",
@@ -3116,33 +3350,90 @@ Prefer query search when you do not know the topic name. Use maxTokens to keep r
       }
     );
   }
+  if (enableShopifyKit) {
+    server.registerTool(
+      "get-shopify-guide",
+      {
+        title: "Get Shopify Theme Guide",
+        description: `Load Better Design's Shopify Liquid and Online Store 2.0 implementation guidance directly from the MCP. No separate agent skill is required.
+
+Use this before creating or changing Liquid, JSON templates, sections, blocks, snippets, locale files, theme assets, product forms, cart behavior, or Shopify CLI workflows. The guides cover theme architecture, Liquid objects/tags/filters, merchant-editable schema, LiquidDoc, localization, accessibility, performance, and validation with Shopify Theme Check. They link to Shopify's primary documentation for version-sensitive API details.
+
+You can either:
+1. Request a known topic: get-shopify-guide({ topic: "shopify-theme-architecture" })
+2. Use an alias: get-shopify-guide({ topic: "liquiddoc" })
+3. Search for the current task or error: get-shopify-guide({ query: "product form variant selector and money formatting" })
+4. Get the full topic index: get-shopify-guide({})
+
+Prefer query search when you do not know the topic name. Run Shopify Theme Check after writing files. Use maxTokens to keep responses focused (recommended: 5000-10000).`,
+        inputSchema: z2.object({
+          topic: z2.string().trim().min(1).max(120).optional().describe("Specific Shopify topic or alias, e.g. shopify-theme-architecture, shopify-liquid-language, section-schema, localization, or theme-check."),
+          query: z2.string().trim().min(1).max(500).optional().describe("Natural language description of the Shopify theme task, API, or validation error."),
+          maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
+          context: CONTEXT_ARG
+        }),
+        annotations: READ_ONLY_TOOL_ANNOTATIONS
+      },
+      async ({ topic, query, maxTokens, context }) => {
+        const start = Date.now();
+        try {
+          const { response, capture } = await runGuidanceTool(
+            provider,
+            userId,
+            clientName(),
+            "shopify",
+            "Shopify",
+            "get-shopify-guide",
+            { topic, query, maxTokens }
+          );
+          return trackSearch(
+            track,
+            "get-shopify-guide",
+            { ...capture, context },
+            start,
+            response
+          );
+        } catch (error) {
+          return trackSearch(
+            track,
+            "get-shopify-guide",
+            { query, topic, topResults: [], context },
+            start,
+            { content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }] },
+            true,
+            error instanceof Error ? error.message : String(error)
+          );
+        }
+      }
+    );
+  }
   server.registerTool(
     "get-motion-guide",
     {
       title: "Get Motion Guide",
-      description: `Load guidance for building a product demo or promo video in code.
+      description: `Load Better Design's video design-system guidance for building a product demo or promo video in code.
 
-Use this before writing a Remotion composition, and while debugging one. It covers composition setup and rendering, the text-measurement and layout traps that clip words or drag a headline sideways, how to order scenes so the titles alone tell the story, cutting to a tempo so every scene lands on a beat, and how to check a finished render instead of trusting that it built.
+Use this before writing a Remotion composition, and while debugging one. It covers the product-demo brief, brand and motion tokens, responsive format profiles, product interactions, captions and accessibility, story and rhythm, layout traps, rendering, and visual review.
 
-The guidance is distilled from building a real 55-second product film, so it names the failures in the order you will hit them.
+Start with scaffold: true. It returns a complete brand-aware Remotion project with landscape and vertical compositions, typed Studio props, a shared timeline, product-interaction scene, sourced proof, captions and an optional generated music bed.
 
-Start with scaffold: true. It returns a complete Remotion project that already renders, so you adapt something working instead of inventing the layout, the render pipeline and the audio script.
+Install and follow the twelve official Remotion skills from https://www.remotion.dev/docs/ai/skills for current APIs. Better Design owns brand, hierarchy, story, pacing and review. RemotionUI, remocn and Remotion Bits are optional, source-labelled pattern libraries; ask before installing community code and adapt it to the active video tokens.
 
-This tool does not render. Rendering needs Remotion and a headless Chrome in the user's own project, around 600 MB on first install. Write the files into their repo and let them run it.
+This tool does not render. Rendering needs Remotion and a large headless-browser download in the user's own project. Write the files into their repo and let them run it.
 
 This complements the design tools: use get-ui-principle for visual decisions and get-ux-principle for product behavior. For in-app animation whose timing the user should tune by eye (durations, springs, stagger), call get-jig-guide and mount its tuning panel instead of guessing values.
 
 You can either:
 1. Get the starter project: get-motion-guide({ scaffold: true })
-2. Request a known topic: get-motion-guide({ topic: "video-fundamentals" })
-3. Use an alias: get-motion-guide({ topic: "cut on the beat" })
-4. Search for the current task or problem: get-motion-guide({ query: "my animated word swap clips the longer word" })
+2. Request a known topic: get-motion-guide({ topic: "video-design-system" })
+3. Use an alias: get-motion-guide({ topic: "product demo structure" })
+4. Search for the current task or problem: get-motion-guide({ query: "reflow my product demo for vertical video" })
 5. Get the full topic index: get-motion-guide({})
 
 Prefer query search when you do not know the topic name. Use maxTokens to keep responses focused (recommended: 5000-10000).`,
       inputSchema: z2.object({
-        scaffold: z2.boolean().optional().describe("Return a complete Remotion project that already renders, as files to write. Start here when building a video."),
-        topic: z2.string().trim().min(1).max(120).optional().describe("Specific motion topic or alias, e.g. video-fundamentals, text-and-layout, story-and-rhythm, verifying-a-render."),
+        scaffold: z2.boolean().optional().describe("Return a complete brand-aware Remotion product-demo project, as files to write. Start here when building a video."),
+        topic: z2.string().trim().min(1).max(120).optional().describe("Specific motion topic or alias, e.g. video-design-system, product-demo-brief, formats-and-safe-areas, product-interactions, captions-and-accessibility, remotion-resources, verifying-a-render."),
         query: z2.string().trim().min(1).max(500).optional().describe("Natural language description of the video or animation task or problem."),
         maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
         context: CONTEXT_ARG
@@ -3165,7 +3456,7 @@ ${file.contents}`
             content: [
               {
                 type: "text",
-                text: `A Remotion project that already renders. Write these files, then follow the steps.
+                text: `A brand-aware Remotion product-demo project. Write these files, then follow the steps.
 
 ${MOTION_SCAFFOLD_STEPS}
 
@@ -5467,7 +5758,7 @@ function insert(tree, path5, token) {
       const promoted = newGroup({ [LEAF_KEY]: next });
       node[segment] = promoted;
       node = promoted;
-    } else if (next === void 0 || typeof next !== "object") {
+    } else if (!isObjectLike(next)) {
       const created = newGroup();
       node[segment] = created;
       node = created;
@@ -5477,7 +5768,7 @@ function insert(tree, path5, token) {
   }
   const last = path5[path5.length - 1];
   const existing = node[last];
-  if (existing !== void 0 && typeof existing === "object" && !isToken(existing)) {
+  if (isObjectLike(existing) && !isToken(existing)) {
     existing[LEAF_KEY] = token;
     return;
   }
@@ -5499,7 +5790,7 @@ function tokensCssToDtcg(css, name) {
       insert(doc, [key, ...groupPath(rawName)], dtcgToken(rawName, value));
     }
     const darkGroup = doc[key];
-    if (typeof darkGroup === "object" && darkGroup !== void 0 && !isToken(darkGroup)) {
+    if (isObjectLike(darkGroup) && !isToken(darkGroup)) {
       darkGroup.$description = "Dark mode values.";
       darkGroup.$extensions = { [MODE_EXTENSION]: "dark" };
     }
@@ -5514,6 +5805,7 @@ var init_dtcg = __esm({
   "../shared/src/mcp/dtcg.ts"() {
     "use strict";
     init_color_to_oklch();
+    init_guards();
     MODE_EXTENSION = "com.better-design.mode";
     ZERO_PX = { value: 0, unit: "px" };
     LEAF_KEY = "DEFAULT";
@@ -6623,6 +6915,13 @@ body :where(.card,.card__inner,.product__media,.cart-item__image-container){bord
       { path: "templates/collection.ds.json", content: TEMPLATE_COLLECTION_JSON }
     ];
     SHOPIFY_KIT_CONDUCT_MD = [
+      "## Shopify implementation guidance (mandatory)",
+      "Use Better Design's `get-shopify-guide` MCP tool for Liquid and Online Store 2.0 guidance. The guidance is served directly by this MCP; do not install a separate agent skill.",
+      "- Before changing any returned `.liquid`, JSON template, schema, locale, or asset file, call `get-shopify-guide` with the exact task or unfamiliar Shopify object, tag, filter, or validation error. Do not rely on memory for Shopify APIs.",
+      '- Start with `get-shopify-guide({ topic: "shopify-workflow-validation" })` for the safe theme workflow. Use a query for focused retrieval and follow the linked Shopify primary reference when an API is version-sensitive.',
+      "- After writing files, run `shopify theme check --path <absolute-theme-path>`. Fix every reported error, query `get-shopify-guide` with unfamiliar errors, then run Theme Check again.",
+      "- Install the Better Design files verbatim first. Use the guide to verify or make requested Shopify-specific changes; do not replace this kit's tokens, `ds-*` classes, or storefront composition.",
+      "",
       "## Install into the merchant's theme (mandatory order)",
       "1. Duplicate the merchant's theme and work only in the unpublished copy. This full-store kit replaces the default header/footer groups and primary storefront templates; never install it directly on the live theme.",
       "2. Write every returned file to its exact path. That includes the CSS asset, snippets, Liquid sections, `sections/header-group.json`, `sections/footer-group.json`, and the primary `templates/*.json` files. Copy contents VERBATIM; retyped Liquid silently drops this system's material.",
@@ -9131,12 +9430,16 @@ var init_shopify_primitives = __esm({
   }
 });
 
-// ../shared/src/mcp/tools/design-system-tools.ts
+// ../shared/src/mcp/catalog-tokens.ts
 import { z as z6 } from "zod";
-function installCommandWithInit(installCommand) {
-  return `${SHADCN_INIT_IF_MISSING}
-
-${installCommand}`;
+function inventoryFromRegistryDependencies(dependencies) {
+  const inventory = { components: [], foundations: [] };
+  for (const dependency of dependencies) {
+    const name = dependency.split("/").at(-1)?.replace(/\.json$/, "");
+    if (!name) continue;
+    (FOUNDATION_ENTRY.test(name) ? inventory.foundations : inventory.components).push(name);
+  }
+  return inventory;
 }
 function tokensCssFromRegistry(json2) {
   const files = json2.files ?? [];
@@ -9153,6 +9456,76 @@ function tokensCssFromRegistry(json2) {
     componentDepthCss(files)
   ].filter(Boolean).join("\n");
 }
+async function fetchCatalog(designSystemId, options = {}) {
+  try {
+    const [globalsRes, allRes, ...componentResults] = await Promise.all([
+      fetch(`${REGISTRY_BASE_URL}/${designSystemId}/globals.json`),
+      options.includeInventory ? fetch(`${REGISTRY_BASE_URL}/${designSystemId}/all.json`).catch((err) => {
+        console.warn(`catalog inventory fetch failed: ${designSystemId}`, err);
+        return null;
+      }) : null,
+      ...CATALOG_KIT_COMPONENTS.map(
+        (c) => fetch(`${REGISTRY_BASE_URL}/${designSystemId}/${c}.json`).catch((err) => {
+          console.warn(`catalog component fetch failed: ${designSystemId}/${c}`, err);
+          return null;
+        })
+      )
+    ]);
+    if (!globalsRes.ok) return { tokensCss: "", files: [], inventory: { components: [], foundations: [] } };
+    const globals = REGISTRY_ITEM_SCHEMA.safeParse(await globalsRes.json());
+    if (!globals.success) return { tokensCss: "", files: [], inventory: { components: [], foundations: [] } };
+    const all = allRes?.ok ? REGISTRY_ALL_SCHEMA.safeParse(await allRes.json().catch(() => null)) : null;
+    const inventory = all?.success ? inventoryFromRegistryDependencies(all.data.registryDependencies) : { components: [], foundations: [] };
+    const files = [...globals.data.files ?? []];
+    for (const [i, res] of componentResults.entries()) {
+      if (!res) continue;
+      if (!res.ok) {
+        console.warn(
+          `catalog component unavailable: ${designSystemId}/${CATALOG_KIT_COMPONENTS[i]} (HTTP ${res.status})`
+        );
+        continue;
+      }
+      const item = REGISTRY_ITEM_SCHEMA.safeParse(await res.json().catch(() => null));
+      if (item.success && item.data.files) files.push(...item.data.files);
+    }
+    return { tokensCss: tokensCssFromRegistry({ cssVars: globals.data.cssVars, files }), files, inventory };
+  } catch (error) {
+    console.warn(`catalog registry fetch failed for ${designSystemId}`, error);
+    return { tokensCss: "", files: [], inventory: { components: [], foundations: [] } };
+  }
+}
+async function fetchCatalogTokensCss(designSystemId) {
+  return (await fetchCatalog(designSystemId)).tokensCss;
+}
+var REGISTRY_ITEM_SCHEMA, REGISTRY_ALL_SCHEMA, FOUNDATION_ENTRY, CATALOG_KIT_COMPONENTS;
+var init_catalog_tokens = __esm({
+  "../shared/src/mcp/catalog-tokens.ts"() {
+    "use strict";
+    init_preview_html();
+    init_shared();
+    REGISTRY_ITEM_SCHEMA = z6.object({
+      cssVars: z6.object({
+        light: z6.record(z6.string(), z6.string()).optional(),
+        dark: z6.record(z6.string(), z6.string()).optional(),
+        theme: z6.record(z6.string(), z6.string()).optional()
+      }).optional(),
+      files: z6.array(z6.object({ path: z6.string().optional(), content: z6.string().optional() })).optional()
+    });
+    REGISTRY_ALL_SCHEMA = z6.object({
+      registryDependencies: z6.array(z6.string())
+    });
+    FOUNDATION_ENTRY = /^(?:globals|utils|use-.+|.+-utils)$/;
+    CATALOG_KIT_COMPONENTS = ["button", "input", "card", "badge", "switch"];
+  }
+});
+
+// ../shared/src/mcp/tools/design-system-tools.ts
+import { z as z7 } from "zod";
+function installCommandWithInit(installCommand) {
+  return `${SHADCN_INIT_IF_MISSING}
+
+${installCommand}`;
+}
 function authHeaders(authContext) {
   if (!authContext) return {};
   const bearer2 = authContext.kind === "api-key" ? authContext.apiKey : authContext.accessToken;
@@ -9253,41 +9626,6 @@ function completedShopifyKitResult(name, viewUrl, source, primitives) {
     )
   };
 }
-async function fetchCatalog(designSystemId) {
-  try {
-    const [globalsRes, ...componentResults] = await Promise.all([
-      fetch(`${REGISTRY_BASE_URL}/${designSystemId}/globals.json`),
-      ...CATALOG_KIT_COMPONENTS.map(
-        (c) => fetch(`${REGISTRY_BASE_URL}/${designSystemId}/${c}.json`).catch((err) => {
-          console.warn(`catalog component fetch failed: ${designSystemId}/${c}`, err);
-          return null;
-        })
-      )
-    ]);
-    if (!globalsRes.ok) return { tokensCss: "", files: [] };
-    const globals = REGISTRY_ITEM_SCHEMA.safeParse(await globalsRes.json());
-    if (!globals.success) return { tokensCss: "", files: [] };
-    const files = [...globals.data.files ?? []];
-    for (const [i, res] of componentResults.entries()) {
-      if (!res) continue;
-      if (!res.ok) {
-        console.warn(
-          `catalog component unavailable: ${designSystemId}/${CATALOG_KIT_COMPONENTS[i]} (HTTP ${res.status})`
-        );
-        continue;
-      }
-      const item = REGISTRY_ITEM_SCHEMA.safeParse(await res.json().catch(() => null));
-      if (item.success && item.data.files) files.push(...item.data.files);
-    }
-    return { tokensCss: tokensCssFromRegistry({ cssVars: globals.data.cssVars, files }), files };
-  } catch (error) {
-    console.warn(`catalog registry fetch failed for ${designSystemId}`, error);
-    return { tokensCss: "", files: [] };
-  }
-}
-async function fetchCatalogTokensCss(designSystemId) {
-  return (await fetchCatalog(designSystemId)).tokensCss;
-}
 async function fetchBaseVariantNames(designSystemId) {
   try {
     const res = await fetch(`${REGISTRY_BASE_URL}/${designSystemId}/index.json`, {
@@ -9309,8 +9647,8 @@ function registerDesignSystemTools({
   authContext,
   apiFetch = globalThis.fetch
 }, { enableShopifyKit = true } = {}) {
-  const searchInputSchema = z6.object({
-    query: z6.string().describe(
+  const searchInputSchema = z7.object({
+    query: z7.string().describe(
       "The user's app, UI, industry, or visual direction. Examples: 'World Cup betting app for friends', 'warm editorial ecommerce', or 'professional fintech dashboard'."
     )
   });
@@ -9640,7 +9978,7 @@ ${fence3}` }],
       title: "Get a Design System Build Kit",
       description: `Return the correct build kit for a design system through one capability-based entry point.
 
-Use \`target: "react"\` whenever the host can write files and run a terminal. It returns the shadcn install command and real React components. Use \`target: "html"\` only for pure inline canvases or artifacts where npm and a build step are unavailable; it returns the framework-free token and component CSS kit.${enableShopifyKit ? ` Use \`target: "shopify"\` when the user is styling a Shopify store or theme; it returns ready-to-write Liquid theme files (a CSS asset with this system's real tokens, snippets, and theme editor sections) that drop into any Online Store 2.0 theme.` : ""}
+Use \`target: "react"\` whenever the host can write files and run a terminal. It returns the shadcn install command and real React components. Use \`target: "html"\` only for pure inline canvases or artifacts where npm and a build step are unavailable; it returns the framework-free token and component CSS kit.${enableShopifyKit ? ` Use \`target: "shopify"\` when the user is styling a Shopify store or theme; it returns ready-to-write Liquid theme files (a CSS asset with this system's real tokens, snippets, and theme editor sections) plus the mandatory handoff to Better Design's \`get-shopify-guide\` MCP tool for documentation and validation.` : ""}
 
 For \`target: "html"\`, the returned class contract is mandatory, including inside a host-provided visualization workflow: paste the kit CSS verbatim, keep \`class="ds"\` on the artifact root, and keep \`ds-*\` component classes on interactive controls. App-specific classes may sit alongside them for layout only; never rename or replace the \`ds-*\` classes. Before presenting, inspect the artifact source and revise it if either \`class="ds"\` or \`ds-\` is absent. Put hover-only CSS inside \`@media (hover: hover) and (pointer: fine)\` and never let hover move a control or override its selected/pressed styling.
 
@@ -9664,15 +10002,15 @@ existing setup; otherwise use the default Base UI. Both flavors install to the
 same components/ui/ paths.
 
 ${BUILD_TARGET_RULE}`,
-      inputSchema: z6.object({
+      inputSchema: z7.object({
         // Off-pilot callers must not see the target at all, not merely be refused it.
-        target: z6.enum(
+        target: z7.enum(
           enableShopifyKit ? ["react", "html", "shopify", "dtcg"] : ["react", "html", "dtcg"]
         ).describe(`Required build target. Use "react" for any host with filesystem + terminal; use "html" only for inline chat canvases/artifacts.${enableShopifyKit ? ' Use "shopify" for Shopify stores and themes.' : ""} Use "dtcg" to hand the tokens to a design tool: it returns a W3C Design Tokens document for Style Dictionary, Tokens Studio, Terrazzo, or a Figma plugin that creates variables.`),
-        designSystemId: z6.string().min(1).optional().describe(`Catalog design system ID from find-design-system. Required for target react; for target${enableShopifyKit ? "s html, dtcg and shopify" : "s html and dtcg"} pass this or projectId.`),
-        projectId: z6.string().min(1).optional().describe(`Generated project ID from create-design-system / get-design-system-status. Supported with target${enableShopifyKit ? 's "html", "dtcg" and "shopify"' : 's "html" and "dtcg"'}.`),
-        component: z6.union([z6.string(), z6.array(z6.string())]).optional().describe("React target only. Pass only when the user asks to inspect specific component source code. Omit to scaffold the entire design system."),
-        library: z6.enum(["radix", "base-ui"]).optional().describe('React target only, default "base-ui". Pass "radix" when the project already uses Radix primitives.'),
+        designSystemId: z7.string().min(1).optional().describe(`Catalog design system ID from find-design-system. Required for target react; for target${enableShopifyKit ? "s html, dtcg and shopify" : "s html and dtcg"} pass this or projectId.`),
+        projectId: z7.string().min(1).optional().describe(`Generated project ID from create-design-system / get-design-system-status. Supported with target${enableShopifyKit ? 's "html", "dtcg" and "shopify"' : 's "html" and "dtcg"'}.`),
+        component: z7.union([z7.string(), z7.array(z7.string())]).optional().describe("React target only. Pass only when the user asks to inspect specific component source code. Omit to scaffold the entire design system."),
+        library: z7.enum(["radix", "base-ui"]).optional().describe('React target only, default "base-ui". Pass "radix" when the project already uses Radix primitives.'),
         context: CONTEXT_ARG
       }),
       outputSchema: buildKitOutputSchema(enableShopifyKit),
@@ -9904,10 +10242,10 @@ How it works:
 3. Call \`get-design-system-status\` with the returned project id (wait ~60 seconds first) to get the live preview URL and the final \`npx shadcn add <registry-url>\` install command once it completes.
 
 Share the project URL with the user right away so they can watch the generation live.`,
-      inputSchema: z6.object({
-        prompt: z6.string().min(1).max(1e4).describe("Describe the design system the user wants. E.g. 'A warm, minimal design system for a personal finance app, soft pastels, rounded corners' or 'A brutalist developer tool aesthetic with sharp edges and monospace type'."),
-        baseDesignSystemId: z6.string().optional().describe("Optional. The catalog id the USER picked from the `find-design-system` matches you showed them, used to bias generation toward that aesthetic (e.g. a theme tweak on top of Linear). Leave empty only when the user chose fully custom."),
-        brandCss: z6.string().max(5e4).optional().describe("Optional. The user's extracted brand token sheet, verbatim: the fenced css block from extract-design-system / extract-from-url (`:root { --background: ...; }` plus optional `.dark { ... }`). When set, generation builds FROM this brand instead of a catalog look-alike, and baseDesignSystemId is ignored (a catalog base would leak its identity past the brand tokens).")
+      inputSchema: z7.object({
+        prompt: z7.string().min(1).max(1e4).describe("Describe the design system the user wants. E.g. 'A warm, minimal design system for a personal finance app, soft pastels, rounded corners' or 'A brutalist developer tool aesthetic with sharp edges and monospace type'."),
+        baseDesignSystemId: z7.string().optional().describe("Optional. The catalog id the USER picked from the `find-design-system` matches you showed them, used to bias generation toward that aesthetic (e.g. a theme tweak on top of Linear). Leave empty only when the user chose fully custom."),
+        brandCss: z7.string().max(5e4).optional().describe("Optional. The user's extracted brand token sheet, verbatim: the fenced css block from extract-design-system / extract-from-url (`:root { --background: ...; }` plus optional `.dark { ... }`). When set, generation builds FROM this brand instead of a catalog look-alike, and baseDesignSystemId is ignored (a catalog base would leak its identity past the brand tokens).")
       }),
       annotations: {
         readOnlyHint: false,
@@ -9929,8 +10267,8 @@ Share the project URL with the user right away so they can watch the generation
           headers: requestHeaders,
           body: JSON.stringify({
             value: prompt,
-            ...baseDesignSystemId ? { designSystemId: baseDesignSystemId } : {},
-            ...brandCss ? { brandCss } : {}
+            designSystemId: baseDesignSystemId ? baseDesignSystemId : void 0,
+            ...brandCss && { brandCss }
           })
         });
         if (!startRes.ok) {
@@ -10030,7 +10368,7 @@ npx shadcn@latest add ${registryUrl}
           name: dsName,
           viewUrl: projectUrl,
           previewUrl,
-          ...shotUrl ? { shotUrl } : {},
+          ...shotUrl && { shotUrl },
           installCommand: `npx shadcn@latest add ${registryUrl}`,
           tokensCss
         }
@@ -10059,8 +10397,8 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
   const statusConfig = {
     title: "Get Design System Generation Status",
     description: `Check on a design system generation started with 'create-design-system'. Returns progress while generating, and the live preview URL + the \`npx shadcn add\` install command once complete. Generation typically takes 1-3 minutes; poll every ~30 seconds until it reports ready. Once ready, ask the user what's next (icon library, install, or build) instead of stopping.`,
-    inputSchema: z6.object({
-      projectId: z6.string().min(1).describe("The project id returned by create-design-system."),
+    inputSchema: z7.object({
+      projectId: z7.string().min(1).describe("The project id returned by create-design-system."),
       context: CONTEXT_ARG
     }),
     outputSchema: PREVIEW_OUTPUT_SCHEMA,
@@ -10083,8 +10421,8 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
     {
       title: "Preview a Design System",
       description: `Show the user a visual preview of a design system from the catalog (use the id from 'find-design-system'). Returns a token-true HTML preview: palette, typography, buttons, card, input, badge, plus a link to the full live showcase. Use this when the user wants to SEE a design system before installing it.`,
-      inputSchema: z6.object({
-        designSystemId: z6.string().min(1).describe("Design system id from find-design-system, e.g. 'linear', 'editorial-warm'."),
+      inputSchema: z7.object({
+        designSystemId: z7.string().min(1).describe("Design system id from find-design-system, e.g. 'linear', 'editorial-warm'."),
         context: CONTEXT_ARG
       }),
       outputSchema: PREVIEW_OUTPUT_SCHEMA,
@@ -10142,7 +10480,7 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
     })
   );
 }
-var REGISTRY_ITEM_SCHEMA, SHADCN_INIT_IF_MISSING, SAFE_COMPONENT_NAME_RE, CATALOG_KIT_COMPONENTS, DS_INDEX_SCHEMA;
+var SHADCN_INIT_IF_MISSING, SAFE_COMPONENT_NAME_RE, DS_INDEX_SCHEMA;
 var init_design_system_tools = __esm({
   "../shared/src/mcp/tools/design-system-tools.ts"() {
     "use strict";
@@ -10155,19 +10493,11 @@ var init_design_system_tools = __esm({
     init_preview_html();
     init_shared();
     init_guards();
-    REGISTRY_ITEM_SCHEMA = z6.object({
-      cssVars: z6.object({
-        light: z6.record(z6.string(), z6.string()).optional(),
-        dark: z6.record(z6.string(), z6.string()).optional(),
-        theme: z6.record(z6.string(), z6.string()).optional()
-      }).optional(),
-      files: z6.array(z6.object({ path: z6.string().optional(), content: z6.string().optional() })).optional()
-    });
+    init_catalog_tokens();
     SHADCN_INIT_IF_MISSING = "[ -f components.json ] || npx shadcn@latest init -d -y";
     SAFE_COMPONENT_NAME_RE = /^[a-z0-9][a-z0-9-]*$/i;
-    CATALOG_KIT_COMPONENTS = ["button", "input", "card", "badge", "switch"];
-    DS_INDEX_SCHEMA = z6.object({
-      baseComponents: z6.array(z6.object({ name: z6.string() })).optional()
+    DS_INDEX_SCHEMA = z7.object({
+      baseComponents: z7.array(z7.object({ name: z7.string() })).optional()
     });
   }
 });
@@ -18186,7 +18516,7 @@ var init_drizzle_orm = __esm({
 });
 
 // ../../node_modules/drizzle-zod/index.mjs
-import { z as z7 } from "zod";
+import { z as z8 } from "zod";
 function isColumnType(column, columnTypes) {
   return columnTypes.includes(column.columnType);
 }
@@ -18194,7 +18524,7 @@ function isWithEnum(column) {
   return "enumValues" in column && Array.isArray(column.enumValues) && column.enumValues.length > 0;
 }
 function columnToSchema(column, factory) {
-  const z$1 = factory?.zodInstance ?? z7;
+  const z$1 = factory?.zodInstance ?? z8;
   const coerce = factory?.coerce ?? {};
   let schema;
   if (isWithEnum(column)) {
@@ -18244,7 +18574,7 @@ function columnToSchema(column, factory) {
   }
   return schema;
 }
-function numberColumnToSchema(column, z15, coerce) {
+function numberColumnToSchema(column, z16, coerce) {
   let unsigned = column.getSQLType().includes("unsigned");
   let min;
   let max;
@@ -18312,20 +18642,20 @@ function numberColumnToSchema(column, z15, coerce) {
     min = Number.MIN_SAFE_INTEGER;
     max = Number.MAX_SAFE_INTEGER;
   }
-  let schema = coerce === true || coerce?.number ? z15.coerce.number() : z15.number();
+  let schema = coerce === true || coerce?.number ? z16.coerce.number() : z16.number();
   schema = schema.min(min).max(max);
   return integer2 ? schema.int() : schema;
 }
-function bigintColumnToSchema(column, z15, coerce) {
+function bigintColumnToSchema(column, z16, coerce) {
   const unsigned = column.getSQLType().includes("unsigned");
   const min = unsigned ? 0n : CONSTANTS.INT64_MIN;
   const max = unsigned ? CONSTANTS.INT64_UNSIGNED_MAX : CONSTANTS.INT64_MAX;
-  const schema = coerce === true || coerce?.bigint ? z15.coerce.bigint() : z15.bigint();
+  const schema = coerce === true || coerce?.bigint ? z16.coerce.bigint() : z16.bigint();
   return schema.min(min).max(max);
 }
-function stringColumnToSchema(column, z15, coerce) {
+function stringColumnToSchema(column, z16, coerce) {
   if (isColumnType(column, ["PgUUID"])) {
-    return z15.string().uuid();
+    return z16.string().uuid();
   }
   let max;
   let regex;
@@ -18357,7 +18687,7 @@ function stringColumnToSchema(column, z15, coerce) {
     regex = /^[01]+$/;
     max = column.dimensions;
   }
-  let schema = coerce === true || coerce?.string ? z15.coerce.string() : z15.string();
+  let schema = coerce === true || coerce?.string ? z16.coerce.string() : z16.string();
   schema = regex ? schema.regex(regex) : schema;
   return max && fixed ? schema.length(max) : max ? schema.max(max) : schema;
 }
@@ -18378,7 +18708,7 @@ function handleColumns(columns, refinements, conditions, factory) {
       continue;
     }
     const column = is(selected, Column) ? selected : void 0;
-    const schema = column ? columnToSchema(column, factory) : z7.any();
+    const schema = column ? columnToSchema(column, factory) : z8.any();
     const refined = typeof refinement === "function" ? refinement(schema) : schema;
     if (conditions.never(column)) {
       continue;
@@ -18394,10 +18724,10 @@ function handleColumns(columns, refinements, conditions, factory) {
       }
     }
   }
-  return z7.object(columnSchemas);
+  return z8.object(columnSchemas);
 }
 function handleEnum(enum_, factory) {
-  const zod = factory?.zodInstance ?? z7;
+  const zod = factory?.zodInstance ?? z8;
   return zod.enum(enum_.enumValues);
 }
 var CONSTANTS, isPgEnum2, literalSchema, jsonSchema, bufferSchema, selectConditions, insertConditions, createSelectSchema, createInsertSchema;
@@ -18426,9 +18756,9 @@ var init_drizzle_zod = __esm({
       INT64_UNSIGNED_MAX: 18446744073709551615n
     };
     isPgEnum2 = isWithEnum;
-    literalSchema = z7.union([z7.string(), z7.number(), z7.boolean(), z7.null()]);
-    jsonSchema = z7.union([literalSchema, z7.record(z7.any()), z7.array(z7.any())]);
-    bufferSchema = z7.custom((v) => v instanceof Buffer);
+    literalSchema = z8.union([z8.string(), z8.number(), z8.boolean(), z8.null()]);
+    jsonSchema = z8.union([literalSchema, z8.record(z8.any()), z8.array(z8.any())]);
+    bufferSchema = z8.custom((v) => v instanceof Buffer);
     selectConditions = {
       never: () => false,
       optional: () => false,
@@ -18454,8 +18784,8 @@ var init_drizzle_zod = __esm({
 });
 
 // ../shared/src/schema.ts
-import { z as z8 } from "zod";
-var vector2, messageRoleEnum, messageTypeEnum, designSystemStatusEnum, onboardingPathValues, onboardingPathSchema, onboardingPathSqlValues, designConfigSchema, projectMemoryDataSchema, projects, messages, projectMemory, fragments, usage, scrapeBlock, resourceAccess, user, billingSubscription, featureAccess, session, account, verification, jwks, oauthClient, oauthRefreshToken, oauthAccessToken, oauthConsent, designSystems, designSystemComponents, foundationalDocs, apiKeys, emailCampaignSends, emailCampaignSteps, projectEvents, iconLibraries, dsSearchQueries, projectsRelations, projectMemoryRelations, messagesRelations, fragmentsRelations, designSystemsRelations, designSystemComponentsRelations, insertProjectSchema, selectProjectSchema, insertMessageSchema, selectMessageSchema, insertFragmentSchema, selectFragmentSchema, insertProjectMemorySchema, selectProjectMemorySchema, insertDesignSystemSchema, selectDesignSystemSchema, insertDesignSystemComponentSchema, selectDesignSystemComponentSchema, insertFoundationalDocSchema, selectFoundationalDocSchema, insertIconLibrarySchema, selectIconLibrarySchema, insertApiKeySchema, selectApiKeySchema, insertUserSchema, selectUserSchema, insertEmailCampaignSendSchema, selectEmailCampaignSendSchema, insertEmailCampaignStepSchema, selectEmailCampaignStepSchema;
+import { z as z9 } from "zod";
+var vector2, messageRoleEnum, messageTypeEnum, designSystemStatusEnum, onboardingPathValues, onboardingPathSchema, onboardingPathSqlValues, designConfigSchema, projectMemoryDataSchema, projects, messages, projectMemory, fragments, usage, scrapeBlock, resourceAccess, user, billingSubscription, featureAccess, session, account, verification, jwks, oauthClient, oauthRefreshToken, oauthAccessToken, oauthConsent, designSystems, designSystemComponents, foundationalDocs, apiKeys, emailCampaignSends, emailCampaignSteps, projectEvents, iconLibraries, dsSearchQueries, mcpToolCalls, mcpIssues, projectsRelations, projectMemoryRelations, messagesRelations, fragmentsRelations, designSystemsRelations, designSystemComponentsRelations, insertProjectSchema, selectProjectSchema, insertMessageSchema, selectMessageSchema, insertFragmentSchema, selectFragmentSchema, insertProjectMemorySchema, selectProjectMemorySchema, insertDesignSystemSchema, selectDesignSystemSchema, insertDesignSystemComponentSchema, selectDesignSystemComponentSchema, insertFoundationalDocSchema, selectFoundationalDocSchema, insertIconLibrarySchema, selectIconLibrarySchema, insertApiKeySchema, selectApiKeySchema, insertUserSchema, selectUserSchema, insertEmailCampaignSendSchema, selectEmailCampaignSendSchema, insertEmailCampaignStepSchema, selectEmailCampaignStepSchema, pluginAuthNonces;
 var init_schema2 = __esm({
   "../shared/src/schema.ts"() {
     "use strict";
@@ -18489,42 +18819,42 @@ var init_schema2 = __esm({
       "skip",
       "legacy"
     ];
-    onboardingPathSchema = z8.enum(onboardingPathValues);
+    onboardingPathSchema = z9.enum(onboardingPathValues);
     onboardingPathSqlValues = sql.raw(
       onboardingPathValues.map((path5) => `'${path5}'`).join(", ")
     );
-    designConfigSchema = z8.object({
-      colors: z8.object({
-        primary: z8.string(),
-        secondary: z8.string(),
-        accent: z8.string(),
-        muted: z8.string(),
-        destructive: z8.string(),
-        background: z8.string(),
-        foreground: z8.string(),
-        card: z8.string(),
-        cardForeground: z8.string(),
-        popover: z8.string(),
-        popoverForeground: z8.string(),
-        border: z8.string(),
-        input: z8.string(),
-        ring: z8.string()
+    designConfigSchema = z9.object({
+      colors: z9.object({
+        primary: z9.string(),
+        secondary: z9.string(),
+        accent: z9.string(),
+        muted: z9.string(),
+        destructive: z9.string(),
+        background: z9.string(),
+        foreground: z9.string(),
+        card: z9.string(),
+        cardForeground: z9.string(),
+        popover: z9.string(),
+        popoverForeground: z9.string(),
+        border: z9.string(),
+        input: z9.string(),
+        ring: z9.string()
       }).partial(),
-      radius: z8.string(),
-      font: z8.object({
-        sans: z8.string(),
-        mono: z8.string()
+      radius: z9.string(),
+      font: z9.object({
+        sans: z9.string(),
+        mono: z9.string()
       }).partial(),
-      icons: z8.object({
-        libraryId: z8.string(),
-        variant: z8.string().nullable()
+      icons: z9.object({
+        libraryId: z9.string(),
+        variant: z9.string().nullable()
       }).partial()
     }).partial();
-    projectMemoryDataSchema = z8.object({
-      lockedIn: z8.array(z8.string()),
-      rejected: z8.array(z8.string()),
-      tone: z8.string().nullable(),
-      notes: z8.string().nullable()
+    projectMemoryDataSchema = z9.object({
+      lockedIn: z9.array(z9.string()),
+      rejected: z9.array(z9.string()),
+      tone: z9.string().nullable(),
+      notes: z9.string().nullable()
     });
     projects = pgTable("projects", {
       id: uuid("id").primaryKey().defaultRandom(),
@@ -19044,6 +19374,78 @@ var init_schema2 = __esm({
         index("ds_search_queries_unjudged_idx").on(t.createdAt).where(sql`${t.evaluatedAt} is null and ${t.tool} = 'resolve-design-system'`)
       ]
     );
+    mcpToolCalls = pgTable(
+      "mcp_tool_calls",
+      {
+        id: uuid("id").primaryKey().defaultRandom(),
+        // Trace id shared with the PostHog $ai_span for the same call, so a DB row
+        // can be cross-referenced with its LLM-Analytics trace [BD-109].
+        traceId: text("trace_id"),
+        tool: text("tool").notNull(),
+        status: text("status").$type().notNull(),
+        errorMessage: text("error_message"),
+        durationMs: integer("duration_ms"),
+        // Sanitized serialized tool input (same string shape as the $ai_span
+        // input_state), capped — enough for an analyst to reproduce the call.
+        toolInput: text("tool_input"),
+        outputPreview: text("output_preview"),
+        // Agent-stated intent from the optional `context` tool arg [BD-188].
+        intent: text("intent"),
+        // Retrieval signal, present only for query-bearing tools: the query text and
+        // how well the corpus answered it. topScore NULL + resultCount 0 on a
+        // semantic tool = nothing matched (a coverage gap candidate).
+        query: text("query"),
+        topScore: integer("top_score"),
+        resultCount: integer("result_count"),
+        userId: text("user_id"),
+        authKind: text("auth_kind").notNull(),
+        // "mcp-remote" = hosted clients on /api/mcp; "stdio" = the npm client's
+        // /api/internal/alert ping.
+        source: text("source").notNull(),
+        clientName: text("client_name"),
+        createdAt: timestamp("created_at", { withTimezone: true }).defaultNow().notNull(),
+        // Set once the issue-detection cron has considered this row. NULL = not yet
+        // analyzed; the cron samples `WHERE analyzed_at IS NULL` so each row is
+        // analyzed at most once (idempotent, bounded cost) [BD-485].
+        analyzedAt: timestamp("analyzed_at", { withTimezone: true })
+      },
+      (t) => [
+        index("mcp_tool_calls_created_at_idx").on(t.createdAt),
+        index("mcp_tool_calls_tool_idx").on(t.tool),
+        // Partial index serving the issue-detection cron's FIFO sample.
+        index("mcp_tool_calls_unanalyzed_idx").on(t.createdAt).where(sql`${t.analyzedAt} is null`)
+      ]
+    );
+    mcpIssues = pgTable(
+      "mcp_issues",
+      {
+        id: uuid("id").primaryKey().defaultRandom(),
+        // Deterministic dedupe key computed in code (category + tool + normalized
+        // signal), never by the LLM, so the same failure maps to the same row across
+        // cron runs.
+        fingerprint: text("fingerprint").notNull().unique(),
+        category: text("category").$type().notNull(),
+        severity: text("severity").$type().notNull(),
+        tool: text("tool").notNull(),
+        title: text("title").notNull(),
+        summary: text("summary").notNull(),
+        // Ready-to-paste prompt for a coding agent: what failed, the evidence, and
+        // where to start. The "fix is one prompt away" handoff.
+        fixPrompt: text("fix_prompt").notNull(),
+        // Sample of the trace rows behind the issue (capped), newest first.
+        evidence: jsonb("evidence").$type().notNull(),
+        occurrences: integer("occurrences").notNull().default(1),
+        status: text("status").$type().notNull().default("open"),
+        firstSeenAt: timestamp("first_seen_at", { withTimezone: true }).defaultNow().notNull(),
+        lastSeenAt: timestamp("last_seen_at", { withTimezone: true }).defaultNow().notNull(),
+        createdAt: timestamp("created_at", { withTimezone: true }).defaultNow().notNull(),
+        updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow().notNull()
+      },
+      (t) => [
+        index("mcp_issues_status_idx").on(t.status),
+        index("mcp_issues_last_seen_at_idx").on(t.lastSeenAt)
+      ]
+    );
     projectsRelations = relations(projects, ({ many, one }) => ({
       messages: many(messages),
       memory: one(projectMemory, {
@@ -19109,11 +19511,17 @@ var init_schema2 = __esm({
     selectEmailCampaignSendSchema = createSelectSchema(emailCampaignSends);
     insertEmailCampaignStepSchema = createInsertSchema(emailCampaignSteps);
     selectEmailCampaignStepSchema = createSelectSchema(emailCampaignSteps);
+    pluginAuthNonces = pgTable("plugin_auth_nonces", {
+      nonce: text("nonce").primaryKey(),
+      userId: text("user_id").notNull().references(() => user.id, { onDelete: "cascade" }),
+      createdAt: timestamp("created_at").defaultNow().notNull(),
+      expiresAt: timestamp("expires_at").notNull()
+    });
   }
 });
 
 // ../shared/src/mcp/tools/design-config-tools.ts
-import { z as z9 } from "zod";
+import { z as z10 } from "zod";
 function registerDesignConfigTools({
   server,
   tracked,
@@ -19164,7 +19572,7 @@ function registerDesignConfigTools({
     {
       title: "Get a Project's Tuned Design Config",
       description: `Read the user-tuned design config (exact color tokens, radius, fonts, icon library) of a generated project. Call this BEFORE building or restyling UI for the project, and again after the user tunes values on the project page, so you apply their exact numbers instead of guessing from adjectives.`,
-      inputSchema: z9.object({
+      inputSchema: z10.object({
         projectId: PROJECT_ID_ARG,
         context: CONTEXT_ARG
       }),
@@ -19193,7 +19601,7 @@ function registerDesignConfigTools({
     {
       title: "Set a Project's Design Config",
       description: `Write exact design-token values (colors, radius, fonts, icon library) onto a generated project. Use this when the user states concrete values ("make primary oklch(0.62 0.11 45)", "radius 12px"). It merges over the current config and persists, so the change survives restarts and every later get-design-config returns it. For vague direction ("warmer", "more playful"), iterate with the user toward concrete values first; do not invent numbers on their behalf.`,
-      inputSchema: z9.object({
+      inputSchema: z10.object({
         projectId: PROJECT_ID_ARG,
         config: CONFIG_ARG,
         context: CONTEXT_ARG
@@ -19238,7 +19646,7 @@ var init_design_config_tools = __esm({
     "use strict";
     init_schema2();
     init_shared();
-    PROJECT_ID_ARG = z9.string().min(1).describe("The project id returned by create-design-system.");
+    PROJECT_ID_ARG = z10.string().min(1).describe("The project id returned by create-design-system.");
     CONFIG_ARG = designConfigSchema.describe(
       "Partial design config to merge over the current one. Only pass the fields the user changed. Colors are oklch() strings (e.g. 'oklch(0.62 0.11 45)'); radius is a CSS length (e.g. '0.75rem'); fonts are family names."
     );
@@ -19246,15 +19654,15 @@ var init_design_config_tools = __esm({
 });
 
 // ../shared/src/mcp/tools/jig-tools.ts
-import { z as z10 } from "zod";
+import { z as z11 } from "zod";
 function registerJigTools({ server, tracked }) {
   server.registerTool(
     "get-jig-guide",
     {
       title: "Get a Parameter-Tuning Jig",
       description: `Return a tuning-panel setup (a "jig") plus the workflow for using it. Call this whenever you are about to hard-code taste-based parameter values: animation duration/easing/springs/stagger, particle systems, canvas physics, blur/glow/grain intensity, gradient stops, shadow recipes, parallax speeds. Instead of guessing values, wire the jig to those parameters, let the USER tune by eye, then hard-code the values they copy back and remove the jig. React web recommends DialKit (MIT, no re-render lag) with a dependency-free fallback; 'vanilla' and 'react-native' get dependency-free scaffolds.`,
-      inputSchema: z10.object({
-        framework: z10.enum(["react", "vanilla", "react-native"]).optional().describe("Which setup to return. 'react' (default) for React/Next web projects; 'vanilla' for plain DOM or canvas work; 'react-native' for RN/Expo apps."),
+      inputSchema: z11.object({
+        framework: z11.enum(["react", "vanilla", "react-native"]).optional().describe("Which setup to return. 'react' (default) for React/Next web projects; 'vanilla' for plain DOM or canvas work; 'react-native' for RN/Expo apps."),
         context: CONTEXT_ARG
       }),
       annotations: READ_ONLY_TOOL_ANNOTATIONS
@@ -20030,7 +20438,7 @@ var init_brand_sources = __esm({
 });
 
 // ../shared/src/mcp/tools/extract-tools.ts
-import { z as z11 } from "zod";
+import { z as z12 } from "zod";
 function authHeaders2(authContext) {
   if (!authContext) return {};
   const bearer2 = authContext.kind === "api-key" ? authContext.apiKey : authContext.accessToken;
@@ -20066,15 +20474,15 @@ JSON.stringify(${buildRoleSampleScript()})
 - kind "tokens": a design-tokens JSON export ($value entries, W3C format or the Figma variables API shape with 0..1 rgb floats).
 
 Common vendor names (Shopify's --color-button family) are mapped into empty semantic slots automatically and the mapping is reported in the output.`,
-      inputSchema: z11.object({
-        css: z11.string().trim().min(1).max(2e5).optional().describe("Full contents of the project's globals.css (or any CSS holding the design tokens / CSS custom properties). Optional when `sources` is given."),
-        sources: z11.array(z11.object({
-          name: z11.string().trim().min(1).max(120).describe("Label for this source, e.g. 'globals.css', 'live site sample', 'figma variables'."),
-          kind: z11.enum(["css", "computed", "tokens"]).optional().describe("Omit to infer: JSON with $value entries is tokens, JSON keyed by UI roles is computed, anything else is CSS."),
-          content: z11.string().trim().min(1).max(2e5)
+      inputSchema: z12.object({
+        css: z12.string().trim().min(1).max(2e5).optional().describe("Full contents of the project's globals.css (or any CSS holding the design tokens / CSS custom properties). Optional when `sources` is given."),
+        sources: z12.array(z12.object({
+          name: z12.string().trim().min(1).max(120).describe("Label for this source, e.g. 'globals.css', 'live site sample', 'figma variables'."),
+          kind: z12.enum(["css", "computed", "tokens"]).optional().describe("Omit to infer: JSON with $value entries is tokens, JSON keyed by UI roles is computed, anything else is CSS."),
+          content: z12.string().trim().min(1).max(2e5)
         })).max(10).optional().describe("Any mix of brand sources, merged in order (later sources win). See the tool description for how to gather each kind."),
-        name: z11.string().trim().min(1).max(120).optional().describe("Optional label for the extracted system, e.g. the app or repo name."),
-        maxTokens: z11.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates the token sheet to fit.")
+        name: z12.string().trim().min(1).max(120).optional().describe("Optional label for the extracted system, e.g. the app or repo name."),
+        maxTokens: z12.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates the token sheet to fit.")
       }),
       annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
@@ -20106,10 +20514,10 @@ Common vendor names (Shopify's --color-button family) are mapped into empty sema
 Use this when the user names their site ("match uclips.eu", "use our website's style") or hands you any public URL whose look should be reused. Server side, Better Design fetches the page's stylesheets AND renders the page in a headless browser to sample what role elements actually look like (body, heading, link, button, input, card), then merges both, rendered truth last. That reads the brand even when the site's variable names are unrecognizable.
 
 Slow by nature (a real browser loads the page): expect 10 to 45 seconds. For CSS the user already has locally, prefer extract-design-system, which is instant.`,
-      inputSchema: z11.object({
-        url: z11.string().trim().min(8).max(2048).describe("Public http(s) URL of the page to read, usually the homepage."),
-        name: z11.string().trim().min(1).max(120).optional().describe("Optional label for the extracted system. Defaults to the site's hostname."),
-        maxTokens: z11.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates the token sheet to fit.")
+      inputSchema: z12.object({
+        url: z12.string().trim().min(8).max(2048).describe("Public http(s) URL of the page to read, usually the homepage."),
+        name: z12.string().trim().min(1).max(120).optional().describe("Optional label for the extracted system. Defaults to the site's hostname."),
+        maxTokens: z12.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates the token sheet to fit.")
       }),
       annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
@@ -20148,7 +20556,7 @@ var init_extract_tools = __esm({
 });
 
 // ../shared/src/mcp/tools/illustration-tools.ts
-import { z as z12 } from "zod";
+import { z as z13 } from "zod";
 function fail(message) {
   return {
     content: [{ type: "text", text: message }],
@@ -20194,11 +20602,11 @@ How to call it:
 4. Stop when \`faults\` is empty.
 
 Markup carrying script, event handlers, remote references, or styles that reach outside the drawing is refused rather than cleaned, so the drawing you fix is the drawing you sent.`,
-      inputSchema: z12.object({
-        svg: z12.string().min(1).describe("The complete svg element you drew."),
-        intent: z12.string().min(1).describe('What it is meant to be, in plain words. For example "an open inbox tray with letters".'),
-        animated: z12.boolean().optional().describe("Set when the drawing was meant to move, so the motion checks apply."),
-        reviewToken: z12.string().optional().describe("The token from a previous review of this drawing. Reviews it again free.")
+      inputSchema: z13.object({
+        svg: z13.string().min(1).describe("The complete svg element you drew."),
+        intent: z13.string().min(1).describe('What it is meant to be, in plain words. For example "an open inbox tray with letters".'),
+        animated: z13.boolean().optional().describe("Set when the drawing was meant to move, so the motion checks apply."),
+        reviewToken: z13.string().optional().describe("The token from a previous review of this drawing. Reviews it again free.")
       }),
       outputSchema: REVIEW_OUTPUT_SCHEMA,
       annotations: READ_ONLY_TOOL_ANNOTATIONS
@@ -20267,16 +20675,16 @@ var init_illustration_tools = __esm({
     init_shared();
     REVIEW_OUTPUT_SCHEMA = {
       /** Empty when nothing is visibly wrong. */
-      faults: z12.array(z12.string()),
+      faults: z13.array(z13.string()),
       /** Group ids in paint order, the parts an animation can target. */
-      layers: z12.array(z12.string()),
+      layers: z13.array(z13.string()),
       /** False when the markup was refused; faults says why. */
-      reviewed: z12.boolean(),
+      reviewed: z13.boolean(),
       /** True when the drawing could not be rendered, so only structure was checked. */
-      unseen: z12.boolean(),
+      unseen: z13.boolean(),
       /** Pass this back to review the same drawing again without spending another credit. */
-      reviewToken: z12.string(),
-      message: z12.string()
+      reviewToken: z13.string(),
+      message: z13.string()
     };
   }
 });
@@ -20644,7 +21052,7 @@ function summary(findings) {
     serious: 0,
     moderate: 0,
     total: findings.length,
-    ...dropped > 0 ? { truncated: dropped } : {}
+    truncated: dropped > 0 ? dropped : void 0
   };
   for (const finding of findings) result[finding.severity] += 1;
   return result;
@@ -20672,7 +21080,7 @@ function inspectSpacing(input) {
     states: input.states.map((state) => ({
       name: state.name,
       viewport: state.viewport,
-      ...state.screenshotDataUrl ? { screenshotDataUrl: state.screenshotDataUrl } : {},
+      screenshotDataUrl: state.screenshotDataUrl ? state.screenshotDataUrl : void 0,
       elements: state.elements.map((element) => ({ id: element.id, label: element.label, rect: element.rect }))
     }))
   };
@@ -20694,7 +21102,7 @@ function captureSpacingSnapshot() {
   const maxElements = 1500;
   const candidates = Array.from(document.querySelectorAll("body *"));
   const hiddenByAncestor = (element) => {
-    if (typeof element.checkVisibility === "function") {
+    if (element.checkVisibility instanceof Function) {
       return !element.checkVisibility({
         opacityProperty: true,
         visibilityProperty: true,
@@ -21057,7 +21465,7 @@ h1 { margin: 4px 0 0; font-size: 20px; line-height: 1.25; }
 });
 
 // ../shared/src/mcp/tools/inspection-tools.ts
-import { z as z13 } from "zod";
+import { z as z14 } from "zod";
 function formatFindings(findings) {
   if (findings.length === 0) return "No deterministic spacing issues were found in the supplied geometry.";
   return findings.map((finding) => {
@@ -21084,26 +21492,26 @@ Workflow:
 4. Call again with the captured states and the project's spacing scale when known.
 
 The capture reads visible layout geometry, computed spacing, and short accessible labels for interactive controls. It does not collect source code, cookies, form values, or network data. Add data-bd-inspect-label, data-bd-symmetry, data-bd-group, data-bd-compare-size, data-bd-align-group, and data-bd-align-edge attributes when the intended relationship cannot be inferred safely.`,
-      inputSchema: z13.object({
-        states: z13.array(stateSchema).min(1).max(6).optional().describe("Rendered layout states from the capture script. Omit on the first call to receive the script."),
-        spacingScale: z13.array(finiteNumber.positive()).min(2).max(32).optional().describe("Project spacing tokens in CSS pixels. Defaults to 4, 8, 12, 16, 24, 32, 48, 64, 96, 128."),
+      inputSchema: z14.object({
+        states: z14.array(stateSchema).min(1).max(6).optional().describe("Rendered layout states from the capture script. Omit on the first call to receive the script."),
+        spacingScale: z14.array(finiteNumber.positive()).min(2).max(32).optional().describe("Project spacing tokens in CSS pixels. Defaults to 4, 8, 12, 16, 24, 32, 48, 64, 96, 128."),
         tolerance: finiteNumber.min(0).max(4).optional().describe("Pixel tolerance for grouping measurements. Defaults to 1px."),
         context: CONTEXT_ARG
       }),
-      outputSchema: z13.object({
-        status: z13.enum(["needs-capture", "completed"]),
-        score: z13.number().optional(),
-        summary: z13.object({
-          critical: z13.number(),
-          serious: z13.number(),
-          moderate: z13.number(),
-          total: z13.number()
+      outputSchema: z14.object({
+        status: z14.enum(["needs-capture", "completed"]),
+        score: z14.number().optional(),
+        summary: z14.object({
+          critical: z14.number(),
+          serious: z14.number(),
+          moderate: z14.number(),
+          total: z14.number()
         }).optional(),
-        findings: z13.array(findingSchema).optional(),
-        states: z13.array(overlayStateSchema).optional(),
-        rubric: z13.array(z13.object({ id: z13.string(), title: z13.string() })).optional(),
-        rubricStatus: z13.enum(["loaded", "unavailable"]).optional(),
-        captureScript: z13.string().optional()
+        findings: z14.array(findingSchema).optional(),
+        states: z14.array(overlayStateSchema).optional(),
+        rubric: z14.array(z14.object({ id: z14.string(), title: z14.string() })).optional(),
+        rubricStatus: z14.enum(["loaded", "unavailable"]).optional(),
+        captureScript: z14.string().optional()
       }),
       annotations: { readOnlyHint: true, destructiveHint: false, openWorldHint: false },
       _meta: {
@@ -21183,46 +21591,46 @@ var init_inspection_tools = __esm({
     init_inspection();
     init_spacing_inspection_html();
     init_shared();
-    finiteNumber = z13.number().finite();
-    rectSchema = z13.object({
+    finiteNumber = z14.number().finite();
+    rectSchema = z14.object({
       x: finiteNumber,
       y: finiteNumber,
       width: finiteNumber.nonnegative(),
       height: finiteNumber.nonnegative()
     });
-    edgesSchema = z13.object({
+    edgesSchema = z14.object({
       top: finiteNumber,
       right: finiteNumber,
       bottom: finiteNumber,
       left: finiteNumber
     });
-    styleSchema = z13.object({
-      display: z13.string().max(60).optional(),
-      position: z13.string().max(60).optional(),
-      flexDirection: z13.string().max(60).optional(),
-      flexWrap: z13.string().max(60).optional(),
-      alignItems: z13.string().max(60).optional(),
-      justifyContent: z13.string().max(60).optional(),
+    styleSchema = z14.object({
+      display: z14.string().max(60).optional(),
+      position: z14.string().max(60).optional(),
+      flexDirection: z14.string().max(60).optional(),
+      flexWrap: z14.string().max(60).optional(),
+      alignItems: z14.string().max(60).optional(),
+      justifyContent: z14.string().max(60).optional(),
       rowGap: finiteNumber.optional(),
       columnGap: finiteNumber.optional(),
       padding: edgesSchema.optional(),
       margin: edgesSchema.optional(),
-      overflowX: z13.string().max(60).optional(),
-      overflowY: z13.string().max(60).optional()
+      overflowX: z14.string().max(60).optional(),
+      overflowY: z14.string().max(60).optional()
     });
-    elementSchema = z13.object({
-      id: z13.string().min(1).max(300),
-      selector: z13.string().max(500).optional(),
-      tag: z13.string().max(80).optional(),
-      role: z13.string().max(80).optional(),
-      label: z13.string().max(160).optional(),
-      parentId: z13.string().max(300).optional(),
-      groupId: z13.string().max(300).optional(),
-      alignmentGroup: z13.string().max(300).optional(),
-      alignmentEdge: z13.enum(["left", "right", "top", "bottom", "center-x", "center-y"]).optional(),
-      expectedSymmetry: z13.enum(["horizontal", "vertical", "both"]).optional(),
-      compareSize: z13.enum(["width", "height", "both"]).optional(),
-      interactive: z13.boolean().optional(),
+    elementSchema = z14.object({
+      id: z14.string().min(1).max(300),
+      selector: z14.string().max(500).optional(),
+      tag: z14.string().max(80).optional(),
+      role: z14.string().max(80).optional(),
+      label: z14.string().max(160).optional(),
+      parentId: z14.string().max(300).optional(),
+      groupId: z14.string().max(300).optional(),
+      alignmentGroup: z14.string().max(300).optional(),
+      alignmentEdge: z14.enum(["left", "right", "top", "bottom", "center-x", "center-y"]).optional(),
+      expectedSymmetry: z14.enum(["horizontal", "vertical", "both"]).optional(),
+      compareSize: z14.enum(["width", "height", "both"]).optional(),
+      interactive: z14.boolean().optional(),
       rect: rectSchema,
       style: styleSchema.optional(),
       clientWidth: finiteNumber.nonnegative().optional(),
@@ -21230,41 +21638,41 @@ var init_inspection_tools = __esm({
       scrollWidth: finiteNumber.nonnegative().optional(),
       scrollHeight: finiteNumber.nonnegative().optional()
     });
-    screenshotSchema = z13.string().max(5e6).regex(/^data:image\/(?:png|jpeg|webp);base64,/, "Use a PNG, JPEG, or WebP data URL.");
-    stateSchema = z13.object({
-      name: z13.string().min(1).max(100),
-      viewport: z13.object({
+    screenshotSchema = z14.string().max(5e6).regex(/^data:image\/(?:png|jpeg|webp);base64,/, "Use a PNG, JPEG, or WebP data URL.");
+    stateSchema = z14.object({
+      name: z14.string().min(1).max(100),
+      viewport: z14.object({
         width: finiteNumber.positive().max(2e4),
         height: finiteNumber.positive().max(2e4),
         devicePixelRatio: finiteNumber.positive().max(10).optional()
       }),
-      elements: z13.array(elementSchema).max(1500),
+      elements: z14.array(elementSchema).max(1500),
       screenshotDataUrl: screenshotSchema.optional().describe("Optional browser screenshot as a data URL. It is echoed to the inline overlay and is not persisted.")
     });
-    evidenceSchema = z13.object({
-      label: z13.string(),
-      value: z13.union([z13.number(), z13.string()]),
-      unit: z13.enum(["px", "count"]).optional()
+    evidenceSchema = z14.object({
+      label: z14.string(),
+      value: z14.union([z14.number(), z14.string()]),
+      unit: z14.enum(["px", "count"]).optional()
     });
-    findingSchema = z13.object({
-      id: z13.string(),
-      ruleId: z13.string(),
-      state: z13.string(),
-      severity: z13.enum(["critical", "serious", "moderate"]),
-      message: z13.string(),
-      fix: z13.string(),
-      elementIds: z13.array(z13.string()),
-      evidence: z13.array(evidenceSchema)
+    findingSchema = z14.object({
+      id: z14.string(),
+      ruleId: z14.string(),
+      state: z14.string(),
+      severity: z14.enum(["critical", "serious", "moderate"]),
+      message: z14.string(),
+      fix: z14.string(),
+      elementIds: z14.array(z14.string()),
+      evidence: z14.array(evidenceSchema)
     });
-    overlayStateSchema = z13.object({
-      name: z13.string(),
-      viewport: z13.object({
-        width: z13.number(),
-        height: z13.number(),
-        devicePixelRatio: z13.number().optional()
+    overlayStateSchema = z14.object({
+      name: z14.string(),
+      viewport: z14.object({
+        width: z14.number(),
+        height: z14.number(),
+        devicePixelRatio: z14.number().optional()
       }),
-      elements: z13.array(z13.object({ id: z13.string(), label: z13.string().optional(), rect: rectSchema })),
-      screenshotDataUrl: z13.string().optional()
+      elements: z14.array(z14.object({ id: z14.string(), label: z14.string().optional(), rect: rectSchema })),
+      screenshotDataUrl: z14.string().optional()
     });
   }
 });
@@ -21338,12 +21746,22 @@ var init_tools = __esm({
   }
 });
 
+// ../shared/src/mcp/version.ts
+var MCP_IMPLEMENTATION_VERSION;
+var init_version2 = __esm({
+  "../shared/src/mcp/version.ts"() {
+    "use strict";
+    MCP_IMPLEMENTATION_VERSION = "0.21.0";
+  }
+});
+
 // ../shared/src/mcp/index.ts
 var mcp_exports = {};
 __export(mcp_exports, {
   BUILD_TARGET_RULE: () => BUILD_TARGET_RULE,
   GUIDANCE_TOOLS: () => GUIDANCE_TOOLS,
   INSTRUCTIONS: () => INSTRUCTIONS,
+  MCP_IMPLEMENTATION_VERSION: () => MCP_IMPLEMENTATION_VERSION,
   MCP_SESSION_WINDOW_MS: () => MCP_SESSION_WINDOW_MS,
   REVIEW_TOOLS: () => REVIEW_TOOLS,
   SEARCH_TOOLS: () => SEARCH_TOOLS,
@@ -21364,7 +21782,7 @@ function createMcpServer(options) {
   const {
     provider,
     name = "BetterDesign",
-    version: version2 = "3.0.0",
+    version: version2 = MCP_IMPLEMENTATION_VERSION,
     onToolUsage,
     authContext,
     enableReactNativeGuide = true,
@@ -21375,7 +21793,13 @@ function createMcpServer(options) {
   } = options;
   const server = new McpServer(
     { name, version: version2 },
-    { instructions: getMcpInstructions({ enableReactNativeGuide, enableThreeJsGuide }) }
+    {
+      instructions: getMcpInstructions({
+        enableReactNativeGuide,
+        enableThreeJsGuide,
+        enableShopifyKit
+      })
+    }
   );
   registerAllTools(
     server,
@@ -21397,6 +21821,7 @@ var init_mcp = __esm({
     "use strict";
     init_instructions();
     init_tools();
+    init_version2();
     init_tools();
     init_instructions();
     init_session_guidance();
@@ -21410,7 +21835,7 @@ var review_tool_exports = {};
 __export(review_tool_exports, {
   registerReviewTool: () => registerReviewTool
 });
-import { z as z14 } from "zod";
+import { z as z15 } from "zod";
 function registerReviewTool(server, onToolUsage) {
   const { track } = createTracking(server, onToolUsage);
   server.registerTool(
@@ -21427,11 +21852,11 @@ get-review-rules gives you the judgment rules to apply yourself. This tool is th
 - WCAG basics: images without alt, icon-only buttons without an accessible name, removed focus outlines.
 
 Fix every critical and serious finding, then call it again on the fixed source. Findings feed the same loop as a human code review: read, fix, re-check.`,
-      inputSchema: z14.object({
-        files: z14.array(
-          z14.object({
-            path: z14.string().trim().min(1).max(400).describe("Repo-relative file path, e.g. components/signup-form.tsx."),
-            content: z14.string().max(MAX_FILE_CHARS).describe("The file's full source.")
+      inputSchema: z15.object({
+        files: z15.array(
+          z15.object({
+            path: z15.string().trim().min(1).max(400).describe("Repo-relative file path, e.g. components/signup-form.tsx."),
+            content: z15.string().max(MAX_FILE_CHARS).describe("The file's full source.")
           })
         ).min(1).max(MAX_FILES).describe("The .tsx or .jsx files to review, as written."),
         context: CONTEXT_ARG
@@ -21669,7 +22094,7 @@ function createHttpDataProvider() {
         // contract the field documents. [BD-421]
         metadata: {
           ...systemRes.metadata,
-          ...systemRes.shopifyAccess === void 0 ? {} : { shopifyAccess: systemRes.shopifyAccess }
+          ...!(systemRes.shopifyAccess === void 0) && { shopifyAccess: systemRes.shopifyAccess }
         },
         components: componentsRes.components
       };
@@ -21832,7 +22257,7 @@ if (!command || command.startsWith("-") || command === "setup") {
 }
 async function startServer() {
   const { StdioServerTransport } = await import("@modelcontextprotocol/sdk/server/stdio.js");
-  const { createMcpServer: createMcpServer2 } = await Promise.resolve().then(() => (init_mcp(), mcp_exports));
+  const { createMcpServer: createMcpServer2, MCP_IMPLEMENTATION_VERSION: MCP_IMPLEMENTATION_VERSION2 } = await Promise.resolve().then(() => (init_mcp(), mcp_exports));
   const { registerReviewTool: registerReviewTool2 } = await Promise.resolve().then(() => (init_review_tool(), review_tool_exports));
   const { createHttpDataProvider: createHttpDataProvider2 } = await Promise.resolve().then(() => (init_http_data_provider(), http_data_provider_exports));
   const { trackToolUsage: trackToolUsage2, trackMcpInstalled: trackMcpInstalled2 } = await Promise.resolve().then(() => (init_api_client(), api_client_exports));
@@ -21856,7 +22281,7 @@ async function startServer() {
   const server = createMcpServer2({
     provider: createHttpDataProvider2(),
     name: "DesignSystems",
-    version: "3.0.0",
+    version: MCP_IMPLEMENTATION_VERSION2,
     onToolUsage
   });
   registerReviewTool2(server, onToolUsage);
@@ -21871,6 +22296,6 @@ async function startServer() {
   };
   const transport = new StdioServerTransport();
   await server.connect(transport);
-  console.error("Better Design MCP Server v3.0 running on stdio");
+  console.error(`Better Design MCP Server v${MCP_IMPLEMENTATION_VERSION2} running on stdio`);
 }
 //# sourceMappingURL=index.js.map