better-design 0.12.0 → 0.15.1

package/dist/index.js

@@ -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, or Expo work, without me having to explicitly ask. For React Native or Expo, load task guidance with \`get-react-native-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. 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, 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. 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.`;
     RULE_BLOCK = `${RULE_START}
 ${RULE_BODY}
 ${RULE_END}`;
@@ -853,9 +853,20 @@ var init_setup = __esm({
 });
 
 // ../shared/src/mcp/instructions.ts
-function getMcpInstructions(enableReactNativeGuide = true) {
-  if (enableReactNativeGuide) return INSTRUCTIONS;
-  return INSTRUCTIONS.replace(", styling, React Native, or Expo", ", or styling").replace(", get-react-native-guide", "").replace(/\n\nRN\/Expo:.*not both\./, "");
+function getMcpInstructions(options = {}) {
+  const { enableReactNativeGuide = true, enableThreeJsGuide = true } = options;
+  let instructions = INSTRUCTIONS;
+  if (!enableReactNativeGuide && !enableThreeJsGuide) {
+    instructions = instructions.replace(", styling, React Native, Expo, or Three.js", ", or styling").replace(", get-react-native-guide", "").replace(", get-three-js-guide", "").replace(/\nRN\/Expo:.*not both\./, "");
+  } else if (!enableReactNativeGuide) {
+    instructions = instructions.replace("React Native, Expo, or Three.js", "or Three.js").replace(", get-react-native-guide", "").replace(
+      "RN/Expo: get-react-native-guide; Three.js/R3F: get-three-js-guide.",
+      "Three.js/R3F: get-three-js-guide."
+    );
+  } 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", "");
+  }
+  return instructions.replace(/\n{3,}/g, "\n\n");
 }
 var INSTRUCTIONS;
 var init_instructions = __esm({
@@ -863,17 +874,17 @@ var init_instructions = __esm({
     "use strict";
     INSTRUCTIONS = `# Better Design
 
-Use these tools for ANY frontend, UI, component, styling, React Native, or Expo work.
+Use these tools for ANY frontend, UI, component, styling, React Native, Expo, or Three.js work.
 
-Tools: find-design-system, create-design-system, get-design-system-status, get-design-system-kit, preview-design-system, extract-design-system, get-ui-principle, get-ux-principle, get-react-native-guide, get-review-rules, check-comprehension, find-icon-library, find-icons, install-icons, detect-icon-library.
+Tools: find-design-system, create-design-system, get-design-system-status, get-design-system-kit, preview-design-system, extract-design-system, get-ui-principle, get-ux-principle, get-react-native-guide, get-three-js-guide, get-review-rules, check-comprehension, find-icon-library, find-icons, install-icons, detect-icon-library.
 
-RN/Expo: get-react-native-guide({ topic }) for lookup; ({ query }) for search; not both.
+RN/Expo: get-react-native-guide; Three.js/R3F: get-three-js-guide. ({ topic }) for lookup; ({ query }) for search; not both.
 
-## Build an app (even if the user never says "design" or "brand")
+## Build an app (even if the user never says "design")
 On any "build/make me <app>" request, settle the brand FIRST, then build with it:
 1. find-design-system({ query: the request }) BEFORE any generic coding/site builder. SHOW ~4 matches and ASK which to use, or fully custom. Don't auto-pick.
-2. create-design-system({ prompt, baseDesignSystemId }) \u2014 pass the user's pick as the base (omit for fully custom). Share the project URL to watch it build.
-3. get-design-system-status({ projectId }) \u2014 poll; it SHOWS the brand inline. When ready, find-icon-library and SHOW the user the closest icon libraries (no scores), install it, then offer to build. Don't stop silently.
+2. create-design-system({ prompt, baseDesignSystemId }): pass the user's pick as the base (omit for fully custom). Share the project URL.
+3. get-design-system-status({ projectId }): poll; it SHOWS the brand inline. When ready, find-icon-library and SHOW the closest icon libraries (no scores), install it, then offer to build. Don't stop silently.
 4. Build the app with that brand. Brand first, not raw UI.
 
 ## Building / modifying UI
@@ -882,8 +893,8 @@ On any "build/make me <app>" request, settle the brand FIRST, then build with it
 3. Use the project's tokens/components. Semantic HTML, aria, keyboard nav, WCAG AA.
 4. After: get-review-rules (copy/AI-tell rules) + check-comprehension; fix every critical/serious issue before presenting.
 
-## If the user names an existing catalog DS
-Default is create-design-system (above). For a named catalog system: find-design-system(query) -> get-design-system-kit({ target: "react", designSystemId }) in coding hosts, or target "html" in inline canvases. Icons: detect-icon-library / find-icon-library -> find-icons -> install-icons. Never runtime @iconify/react.
+## If the user names a catalog DS
+Default is create-design-system (above). For a named system: find-design-system(query) -> get-design-system-kit({ target: "react", designSystemId }) in coding hosts, or target "html" in inline canvases. Icons: detect-icon-library / find-icon-library -> find-icons -> install-icons. Never runtime @iconify/react.
 `.trim();
   }
 });
@@ -899,6 +910,28 @@ function codingHostName(server) {
     return void 0;
   }
 }
+function buildKitOutputSchema(enableShopifyKit = true) {
+  const shared = enableShopifyKit ? "HTML and Shopify targets." : "HTML target only.";
+  const base = PREVIEW_OUTPUT_SCHEMA.extend({
+    buildInstructions: z.string().min(1).optional().describe("Mandatory build and review contract for clients that read only structuredContent."),
+    requiredWrapperClass: z.literal("ds").optional().describe(`${shared} The artifact or snippet root must retain this class exactly.`),
+    requiredComponentClassPrefix: z.literal("ds-").optional().describe(`${shared} Interactive components must retain classes with this prefix; never rename it.`),
+    customCssScope: z.literal("layout-only").optional().describe(`${shared} Custom classes may arrange layout but must not replace kit component styling.`),
+    hoverPolicy: z.string().min(1).optional().describe(`${shared} Mandatory pointer-safe hover contract to verify before presenting.`),
+    hostIsolationCssTemplate: z.string().min(1).optional().describe("HTML target only. Replace APP_ROOT with the artifact root selector and paste after host/base CSS so semantic text cannot inherit the host's light/dark colors."),
+    minimumTextContrast: z.literal("4.5:1").optional().describe(`${shared} Minimum contrast for normal visible text against its computed background.`),
+    textColorPolicy: z.string().min(1).optional().describe(`${shared} Mandatory semantic foreground-token contract; surface tokens and opacity must not be used to mute text.`),
+    hierarchyPolicy: z.string().min(1).optional().describe("HTML target only. Mandatory first-view hierarchy, progressive-disclosure, and information-budget contract."),
+    compositionPolicy: z.string().min(1).optional().describe("HTML target only. Mandatory layout-density and container-restraint policy."),
+    componentCss: z.string().min(1).optional().describe("HTML target only. Paste this token-driven ds-* component stylesheet verbatim."),
+    componentMaterialCss: z.string().optional().describe("HTML target only. Paste this design-system-specific material override after componentCss."),
+    componentExampleHtml: z.string().min(1).optional().describe("HTML target only. Starter markup that demonstrates the required .ds wrapper and ds-* component classes.")
+  });
+  if (!enableShopifyKit) return base;
+  return base.extend({
+    themeFiles: z.array(z.object({ path: z.string().min(1), content: z.string().min(1) })).optional().describe("Shopify target only. Theme files to write verbatim at each path: the per-system CSS asset, the Liquid snippets, and the theme editor sections.")
+  });
+}
 function extractOutputPreview(result) {
   const content = result?.content;
   if (!Array.isArray(content)) return void 0;
@@ -1004,7 +1037,7 @@ function truncateToTokens(text, maxTokens) {
 
 ...(truncated to ~${maxTokens} tokens)`;
 }
-var MAX_OUTPUT_PREVIEW, ICONIFY_FETCH_TIMEOUT_MS, ICONIFY_API_BASE, REGISTRY_BASE_URL, APP_BASE_URL, WIDGET_RESOURCE_DOMAINS, WIDGET_FRAME_DOMAINS, WIDGET_APP_DOMAIN, REQUIREMENTS_MD, ANTI_MOCKUP_MD, BUILD_TARGET_RULE, CODING_HOST_RE, PREVIEW_OUTPUT_SCHEMA, BUILD_KIT_OUTPUT_SCHEMA, CONTEXT_ARG, SEARCH_TOOLS;
+var MAX_OUTPUT_PREVIEW, ICONIFY_FETCH_TIMEOUT_MS, ICONIFY_API_BASE, REGISTRY_BASE_URL, APP_BASE_URL, WIDGET_RESOURCE_DOMAINS, WIDGET_FRAME_DOMAINS, WIDGET_APP_DOMAIN, REQUIREMENTS_MD, ANTI_MOCKUP_MD, BUILD_TARGET_RULE, CODING_HOST_RE, PREVIEW_OUTPUT_SCHEMA, BUILD_KIT_OUTPUT_SCHEMA, CONTEXT_ARG, READ_ONLY_TOOL_ANNOTATIONS, SEARCH_TOOLS;
 var init_shared = __esm({
   "../shared/src/mcp/tools/shared.ts"() {
     "use strict";
@@ -1049,29 +1082,22 @@ The UI copy inside the screen follows the same restraint: short headlines (about
       step: z.string().optional().describe("Current generation step, while generating."),
       tokensCss: z.string().describe("CSS custom-property stylesheet for the system's tokens.")
     });
-    BUILD_KIT_OUTPUT_SCHEMA = PREVIEW_OUTPUT_SCHEMA.extend({
-      buildInstructions: z.string().min(1).optional().describe("Mandatory build and review contract for clients that read only structuredContent."),
-      requiredWrapperClass: z.literal("ds").optional().describe("HTML target only. The artifact root must retain this class exactly."),
-      requiredComponentClassPrefix: z.literal("ds-").optional().describe("HTML target only. Interactive components must retain classes with this prefix; never rename it."),
-      customCssScope: z.literal("layout-only").optional().describe("HTML target only. Custom classes may arrange layout but must not replace kit component styling."),
-      hoverPolicy: z.string().min(1).optional().describe("HTML target only. Mandatory pointer-safe hover contract to verify before presenting."),
-      hostIsolationCssTemplate: z.string().min(1).optional().describe("HTML target only. Replace APP_ROOT with the artifact root selector and paste after host/base CSS so semantic text cannot inherit the host's light/dark colors."),
-      minimumTextContrast: z.literal("4.5:1").optional().describe("HTML target only. Minimum contrast for normal visible text against its computed background."),
-      textColorPolicy: z.string().min(1).optional().describe("HTML target only. Mandatory semantic foreground-token contract; surface tokens and opacity must not be used to mute text."),
-      hierarchyPolicy: z.string().min(1).optional().describe("HTML target only. Mandatory first-view hierarchy, progressive-disclosure, and information-budget contract."),
-      compositionPolicy: z.string().min(1).optional().describe("HTML target only. Mandatory layout-density and container-restraint policy."),
-      componentCss: z.string().min(1).optional().describe("HTML target only. Paste this token-driven ds-* component stylesheet verbatim."),
-      componentMaterialCss: z.string().optional().describe("HTML target only. Paste this design-system-specific material override after componentCss."),
-      componentExampleHtml: z.string().min(1).optional().describe("HTML target only. Starter markup that demonstrates the required .ds wrapper and ds-* component classes.")
-    });
+    BUILD_KIT_OUTPUT_SCHEMA = buildKitOutputSchema();
     CONTEXT_ARG = z.string().max(280).optional().describe(
       "Optional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result."
     );
+    READ_ONLY_TOOL_ANNOTATIONS = {
+      readOnlyHint: true,
+      destructiveHint: false,
+      openWorldHint: false
+    };
     SEARCH_TOOLS = /* @__PURE__ */ new Set([
       "find-design-system",
       "get-ui-principle",
       "get-ux-principle",
       "get-react-native-guide",
+      "get-three-js-guide",
+      "get-motion-guide",
       "get-review-rules",
       "find-icon-library",
       "find-icons",
@@ -1161,7 +1187,7 @@ function formatTopicNotFound(topic, principles, toolName, resourceLabel) {
 }
 async function runPrincipleTool(provider, area, label, toolName, args) {
   const { topic, query, maxTokens } = args;
-  const resourceLabel = area === "react-native" ? "Guides" : "Principles";
+  const resourceLabel = area === "react-native" || area === "three-js" || area === "motion" ? "Guides" : "Principles";
   if (topic && query) {
     return {
       response: {
@@ -1236,7 +1262,7 @@ ${formatted}`;
     capture: { topResults: [] }
   };
 }
-function registerPrincipleTools({ server, provider, track }, { enableReactNativeGuide = true } = {}) {
+function registerPrincipleTools({ server, provider, track }, { enableReactNativeGuide = true, enableThreeJsGuide = true } = {}) {
   server.registerTool(
     "get-ui-principle",
     {
@@ -1257,7 +1283,7 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
         maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
         context: CONTEXT_ARG
       }),
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({ topic, query, maxTokens, context }) => {
       const start = Date.now();
@@ -1298,7 +1324,7 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
         maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
         context: CONTEXT_ARG
       }),
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({ topic, query, maxTokens, context }) => {
       const start = Date.now();
@@ -1344,7 +1370,7 @@ Prefer query search when you do not know the topic name. Use maxTokens to keep r
           maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
           context: CONTEXT_ARG
         }),
-        annotations: { readOnlyHint: true }
+        annotations: READ_ONLY_TOOL_ANNOTATIONS
       },
       async ({ topic, query, maxTokens, context }) => {
         const start = Date.now();
@@ -1377,6 +1403,116 @@ Prefer query search when you do not know the topic name. Use maxTokens to keep r
       }
     );
   }
+  if (enableThreeJsGuide) {
+    server.registerTool(
+      "get-three-js-guide",
+      {
+        title: "Get Three.js Guide",
+        description: `Load implementation guidance for Three.js and React Three Fiber projects.
+
+Use this while planning, building, debugging, or optimizing 3D web scenes. It covers Three.js fundamentals, geometries, materials, textures, lights and shadows, models and 3D text, particles, physics with Rapier, performance, postprocessing, React Three Fiber and its drei helper catalog, WebGPU and TSL node materials, shader fundamentals, and copyable shader effect recipes. Preserve the examples when adapting them so the surrounding invariants remain visible to the coding agent.
+
+This complements the design tools: use get-ui-principle for visual decisions and get-ux-principle for product behavior.
+
+You can either:
+1. Request a known topic: get-three-js-guide({ topic: "fundamentals" })
+2. Use an alias: get-three-js-guide({ topic: "webgpu and tsl" })
+3. Search for the current task or code example: get-three-js-guide({ query: "code example for a dissolve shader effect" })
+4. Get the full topic index: get-three-js-guide({})
+
+Prefer query search when you do not know the topic name. Use maxTokens to keep responses focused (recommended: 5000-10000).`,
+        inputSchema: z2.object({
+          topic: z2.string().trim().min(1).max(120).optional().describe("Specific Three.js topic or alias, e.g. fundamentals, shader-effects-recipes, drei-catalog, webgpu-and-tsl."),
+          query: z2.string().trim().min(1).max(500).optional().describe("Natural language description of the Three.js or React Three Fiber 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
+        }),
+        annotations: READ_ONLY_TOOL_ANNOTATIONS
+      },
+      async ({ topic, query, maxTokens, context }) => {
+        const start = Date.now();
+        try {
+          const { response, capture } = await runPrincipleTool(
+            provider,
+            "three-js",
+            "Three.js",
+            "get-three-js-guide",
+            { topic, query, maxTokens }
+          );
+          return trackSearch(
+            track,
+            "get-three-js-guide",
+            { ...capture, context },
+            start,
+            response
+          );
+        } catch (error) {
+          return trackSearch(
+            track,
+            "get-three-js-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.
+
+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.
+
+The guidance is distilled from building a real 55-second product film, so it names the failures in the order you will hit them.
+
+This tool hands over guidance only. It does not render: that needs Remotion and a headless Chrome in the user's own project. Write the composition into their repo and let them render locally.
+
+This complements the design tools: use get-ui-principle for visual decisions and get-ux-principle for product behavior.
+
+You can either:
+1. Request a known topic: get-motion-guide({ topic: "fundamentals" })
+2. Use an alias: get-motion-guide({ topic: "cut on the beat" })
+3. Search for the current task or problem: get-motion-guide({ query: "my animated word swap clips the longer word" })
+4. 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({
+        topic: z2.string().trim().min(1).max(120).optional().describe("Specific motion topic or alias, e.g. fundamentals, text-and-layout, story-and-rhythm, 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
+      }),
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
+    },
+    async ({ topic, query, maxTokens, context }) => {
+      const start = Date.now();
+      try {
+        const { response, capture } = await runPrincipleTool(
+          provider,
+          "motion",
+          "Motion",
+          "get-motion-guide",
+          { topic, query, maxTokens }
+        );
+        return trackSearch(track, "get-motion-guide", { ...capture, context }, start, response);
+      } catch (error) {
+        return trackSearch(
+          track,
+          "get-motion-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-review-rules",
     {
@@ -1419,7 +1555,7 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
         maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000\u201310000."),
         context: CONTEXT_ARG
       }),
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({ category = "all", maxTokens, context }) => {
       const start = Date.now();
@@ -1976,7 +2112,7 @@ Use knownTerms for words your audience genuinely knows, so the check stops flagg
         knownTerms: z3.array(z3.string().trim().min(1).max(60)).max(50).optional().describe("Words this audience already knows, so they are not flagged as insider language."),
         context: CONTEXT_ARG
       }),
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({ context, ...args }) => {
       const start = Date.now();
@@ -2161,7 +2297,7 @@ Examples:
     inputSchema: z4.object({
       query: z4.string().describe("Style description or personality traits to match.")
     }),
-    annotations: { readOnlyHint: true }
+    annotations: READ_ONLY_TOOL_ANNOTATIONS
   };
   const makeIconLibraryHandler = (toolName) => async ({ query }) => {
     const start = Date.now();
@@ -2237,7 +2373,7 @@ Returns icons formatted for use with Iconify React. If you pass a variant, Bette
       libraryId: z4.string().describe("The icon library ID from find-icon-library"),
       variant: z4.string().optional().describe("Optional variant style (e.g., 'bold', 'outline', 'duotone').")
     }),
-    annotations: { readOnlyHint: true }
+    annotations: READ_ONLY_TOOL_ANNOTATIONS
   };
   const makeIconSearchHandler = (toolName) => async ({ query, libraryId, variant }) => {
     const start = Date.now();
@@ -2321,7 +2457,7 @@ If \`components/icons/index.ts\` already exists in the project, MERGE the new ex
         variant: z4.string().optional().describe("Optional library variant (e.g. 'outline', 'filled')."),
         context: CONTEXT_ARG
       }),
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({ libraryId, names, targetDir, format, variant, context }) => tracked(
       "install-icons",
@@ -2526,7 +2662,7 @@ Returns either:
         manifestContent: z4.string().optional().describe("Contents of the project's components/icons/.library.json file, if it exists. The agent should attempt to read this file from disk and pass it here. If the file doesn't exist or can't be read, omit this field."),
         context: CONTEXT_ARG
       }),
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({ manifestContent, context }) => tracked("detect-icon-library", { hasManifest: Boolean(manifestContent), context }, async () => {
       if (!manifestContent || !manifestContent.trim()) {
@@ -2806,11 +2942,12 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, source, componentKit }) {
 Full live showcase: ${viewUrl}` : ""
   ].join("\n");
 }
-var MINIMUM_TEXT_CONTRAST, INLINE_TEXT_COLOR_POLICY, HOST_ISOLATION_CSS_TEMPLATE, INLINE_COMPOSITION_POLICY, INLINE_HIERARCHY_POLICY, DS_KIT_CSS, DS_KIT_EXAMPLE_HTML, HTML_KIT_CONDUCT_MD;
+var MINIMUM_TEXT_CONTRAST, HOVER_POLICY, INLINE_TEXT_COLOR_POLICY, HOST_ISOLATION_CSS_TEMPLATE, INLINE_COMPOSITION_POLICY, INLINE_HIERARCHY_POLICY, DS_KIT_CSS, DS_KIT_EXAMPLE_HTML, HTML_KIT_CONDUCT_MD;
 var init_html_kit = __esm({
   "../shared/src/mcp/html-kit.ts"() {
     "use strict";
     MINIMUM_TEXT_CONTRAST = "4.5:1";
+    HOVER_POLICY = "Put every :hover rule inside @media (hover: hover) and (pointer: fine); never move controls or override selected/pressed styling. For selectable controls, unselected hover stays neutral: only strengthen the neutral surface or edge, never changes text to the primary color, and never borrows the primary/accent fill. Do not add app-specific :hover rules to ds-* controls; use the kit states verbatim.";
     INLINE_TEXT_COLOR_POLICY = [
       "Use semantic foreground tokens for text: `--foreground` on the page, `--card-foreground` on cards, and `--muted-foreground` for secondary copy.",
       "The background, card, muted, secondary, accent, and input tokens are surfaces: never use surface tokens as text colors.",
@@ -3006,6 +3143,645 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
   }
 });
 
+// ../shared/src/mcp/shopify-kit.ts
+function fence2(lang, body) {
+  return `\`\`\`${lang}
+${body}
+\`\`\``;
+}
+function buildDsShopifyFiles(input) {
+  const materialCss = input.componentKit?.css?.trim();
+  const assetCss = [
+    compactTokensCss(input.tokensCss),
+    DS_KIT_CSS,
+    DS_SHOPIFY_CSS,
+    ...materialCss ? [materialCss] : []
+  ].join("\n\n");
+  return [{ path: "assets/ds-kit.css", content: assetCss }, ...SNIPPETS];
+}
+function buildDsShopifyKit({ name, tokensCss, viewUrl, source, componentKit }) {
+  const files = buildDsShopifyFiles({ tokensCss, componentKit });
+  const sourceLine = source?.kind === "catalog" ? `Source designSystemId: \`${source.designSystemId}\`` : source?.kind === "project" ? `Source projectId: \`${source.projectId}\`` : null;
+  const fileBlocks = files.flatMap((f) => [
+    `### \`${f.path}\``,
+    "",
+    fence2(f.path.endsWith(".css") ? "css" : f.path.endsWith(".json") ? "json" : "liquid", f.content),
+    ""
+  ]);
+  return [
+    `# ${name}: Shopify theme kit`,
+    "",
+    "Full design system for an existing Online Store 2.0 theme: one CSS asset carries this system's real tokens and component material, and the Liquid snippets, sections, and alternate templates cover a complete storefront (header, footer, hero, product page, collection page, content sections) with no JavaScript. Write each file to the path in its heading.",
+    ...sourceLine ? ["", sourceLine] : [],
+    "",
+    SHOPIFY_KIT_CONDUCT_MD,
+    "",
+    "## Theme files",
+    "",
+    ...fileBlocks,
+    "## After installing",
+    "- Preview an unpublished copy of the theme first; never edit the live theme directly.",
+    "- The kit styles parts of a storefront; page composition, cart mechanics, and checkout stay with the theme.",
+    ...viewUrl ? ["", `Full live showcase: ${viewUrl}`] : []
+  ].join("\n");
+}
+var DS_SHOPIFY_CSS, SNIPPET_BADGE, SNIPPET_PRICE, SNIPPET_BUY_BUTTON, SNIPPET_VARIANT_SELECT, SNIPPET_PAGINATION, SNIPPET_PRODUCT_CARD, SNIPPET_ANNOUNCEMENT, SNIPPET_NEWSLETTER, SECTION_FAQ, SECTION_FEATURED_COLLECTION, SECTION_HEADER, SECTION_FOOTER, SECTION_HERO, SECTION_RICH_TEXT, SECTION_IMAGE_WITH_TEXT, SECTION_MAIN_PRODUCT, SECTION_MAIN_COLLECTION, SECTION_CONTACT, SECTION_MULTICOLUMN, TEMPLATE_PRODUCT_JSON, TEMPLATE_COLLECTION_JSON, SNIPPETS, SHOPIFY_KIT_CONDUCT_MD;
+var init_shopify_kit = __esm({
+  "../shared/src/mcp/shopify-kit.ts"() {
+    "use strict";
+    init_html_kit();
+    DS_SHOPIFY_CSS = `.ds.ds-embed{background:transparent}
+.ds-announce{background:var(--primary,oklch(0.25 0.01 260));color:var(--primary-foreground,oklch(1 0 0));text-align:center;padding:.5rem 1rem;font-size:.8125rem}
+.ds-announce p{margin:0}
+.ds-announce a{color:inherit;text-decoration:underline}
+.ds-price{display:inline-flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
+.ds-price-current{font-weight:600;color:var(--foreground,oklch(0.2 0 0))}
+.ds-price-compare{color:var(--muted-foreground,oklch(0.55 0.01 260))}
+.ds-card-media{display:block}
+.ds-card-media img{display:block;width:100%;height:auto}
+.ds-product-card .ds-card-title a{color:inherit;text-decoration:none}
+.ds-faq-item{border-bottom:1px solid var(--border,oklch(0.9 0.01 260));padding:.25rem 0}
+.ds-faq-item summary{cursor:pointer;padding:.75rem 0;font-weight:600;color:var(--foreground,oklch(0.2 0 0))}
+.ds-faq-answer{padding:0 0 1rem}
+.ds-grid{display:grid;grid-template-columns:repeat(var(--ds-cols,4),1fr);gap:1rem}
+@media (max-width:749px){.ds-grid{grid-template-columns:repeat(2,1fr)}}
+.ds-newsletter .ds-control-row{margin-top:.75rem}
+.ds-buy-form{margin:0;display:grid;gap:.75rem;justify-items:start}
+.ds-featured{padding:2rem 0}
+.ds-qty{width:6rem}
+.ds-header{display:flex;align-items:center;gap:1.5rem;padding:.85rem 1.5rem;background:var(--background,oklch(1 0 0));border-bottom:1px solid var(--border,oklch(0.9 0.01 260))}
+.ds-header-brand{font-weight:700;font-size:1.05rem;color:var(--foreground,oklch(0.2 0 0));text-decoration:none}
+.ds-header-logo{display:block;max-height:2rem;width:auto}
+.ds-header-nav{display:flex;flex:1;gap:1.1rem;flex-wrap:wrap}
+.ds-header-nav a{color:var(--foreground,oklch(0.2 0 0));text-decoration:none;font-size:.9rem}
+.ds-footer{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:2rem 1.5rem;background:var(--background,oklch(1 0 0));border-top:1px solid var(--border,oklch(0.9 0.01 260))}
+.ds-footer nav{display:flex;gap:1rem;flex-wrap:wrap}
+.ds-footer a{color:var(--muted-foreground,oklch(0.55 0.01 260));text-decoration:none;font-size:.875rem}
+.ds-hero{display:grid;gap:1.25rem;padding:2.5rem 0}
+.ds-hero img{display:block;width:100%;height:auto}
+.ds-hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}
+.ds-image-text{display:grid;gap:1.5rem;align-items:center;padding:2rem 0}
+.ds-product-layout{display:grid;gap:2rem;padding:2rem 0}
+.ds-product-media img{display:block;width:100%;height:auto}
+.ds-product-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem}
+.ds-product-info{display:grid;gap:1rem;align-content:start}
+.ds-product-page{padding:2rem 0}
+.ds-collection-page{padding:2rem 0}
+.ds-pagination{display:block;text-align:center;margin:1.75rem 0 0}
+.ds-pagination .page,.ds-pagination .next,.ds-pagination .prev{display:inline-block;padding:.35rem .7rem}
+.ds-pagination a{color:var(--foreground,oklch(0.2 0 0))}
+.ds-pagination .current{font-weight:700;color:var(--primary,oklch(0.25 0.01 260))}
+@media (min-width:750px){.ds-product-layout{grid-template-columns:1fr 1fr}.ds-image-text{grid-template-columns:1fr 1fr}}`;
+    SNIPPET_BADGE = `{% comment %}
+  Status label. Usage: {% render 'ds-badge', label: 'New' %}
+  Optional tone: primary | outline | safe | warn | danger | unknown | verified
+{% endcomment %}
+{%- assign ds_badge_tone = tone | default: '' -%}
+<span class="ds ds-embed ds-badge{% if ds_badge_tone != '' %} ds-badge-{{ ds_badge_tone }}{% endif %}">{{ label }}</span>`;
+    SNIPPET_PRICE = `{% comment %}
+  Price with compare-at strike-through and a Sale badge.
+  Usage: {% render 'ds-price', product: product %}
+  Or:    {% render 'ds-price', variant: product.selected_or_first_available_variant %}
+{% endcomment %}
+{%- liquid
+  if variant
+    assign ds_price = variant.price
+    assign ds_compare_at = variant.compare_at_price
+  else
+    assign ds_price = product.price
+    assign ds_compare_at = product.compare_at_price
+  endif
+-%}
+<span class="ds ds-embed ds-price">
+  <span class="ds-price-current">{{ ds_price | money }}</span>
+  {%- if ds_compare_at > ds_price -%}
+    <s class="ds-price-compare">{{ ds_compare_at | money }}</s>
+    {% render 'ds-badge', label: 'Sale', tone: 'primary' %}
+  {%- endif -%}
+</span>`;
+    SNIPPET_BUY_BUTTON = `{% comment %}
+  Add-to-cart form that works without JavaScript.
+  Usage: {% render 'ds-buy-button', product: product %}
+  Multi-variant products automatically get a native variant dropdown; pass
+  variant_id to pin one variant instead. Optional label overrides the button
+  text; pass show_quantity: true for a quantity field.
+{% endcomment %}
+{%- assign ds_label = label | default: 'Add to cart' -%}
+{%- if product.available -%}
+{% form 'product', product, class: 'ds ds-embed ds-buy-form' %}
+  {%- if variant_id -%}
+    <input type="hidden" name="id" value="{{ variant_id }}">
+  {%- elsif product.has_only_default_variant -%}
+    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+  {%- else -%}
+    {% render 'ds-variant-select', product: product %}
+  {%- endif -%}
+  {%- if show_quantity -%}
+    <label class="ds-label" for="ds-qty-{{ product.id }}">Quantity</label>
+    <input id="ds-qty-{{ product.id }}" class="ds-input ds-qty" type="number" name="quantity" value="1" min="1">
+  {%- endif -%}
+  <button type="submit" class="ds-btn ds-btn-primary">{{ ds_label }}</button>
+{% endform %}
+{%- else -%}
+<span class="ds ds-embed"><button type="button" class="ds-btn ds-btn-outline" disabled>Sold out</button></span>
+{%- endif -%}`;
+    SNIPPET_VARIANT_SELECT = `{% comment %}
+  Native variant dropdown for a product form; no JavaScript. Renders inside a
+  {% form 'product' %} and posts the chosen variant as name="id".
+  Usage: {% render 'ds-variant-select', product: product %}
+{% endcomment %}
+<label class="ds-label" for="ds-variant-{{ product.id }}">Options</label>
+<select id="ds-variant-{{ product.id }}" name="id" class="ds-select">
+  {%- for variant in product.variants -%}
+    <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected{% endif %}{% unless variant.available %} disabled{% endunless %}>
+      {{ variant.title }} - {{ variant.price | money }}{% unless variant.available %} (sold out){% endunless %}
+    </option>
+  {%- endfor -%}
+</select>`;
+    SNIPPET_PAGINATION = `{% comment %}
+  Styled wrapper for Shopify's default pagination. Render inside a
+  {% paginate %} block: {% render 'ds-pagination', paginate: paginate %}
+{% endcomment %}
+{%- if paginate.pages > 1 -%}
+<nav class="ds ds-embed ds-pagination" aria-label="Pagination">
+  {{ paginate | default_pagination }}
+</nav>
+{%- endif -%}`;
+    SNIPPET_PRODUCT_CARD = `{% comment %}
+  Product tile for grids. Usage: {% render 'ds-product-card', product: product %}
+  Optional: show_vendor: true, enable_quick_add: true
+{% endcomment %}
+<div class="ds ds-embed ds-card ds-product-card">
+  <a href="{{ product.url }}" class="ds-card-media">
+    {%- if product.featured_image -%}
+      {%- assign ds_image_alt = product.featured_image.alt | default: product.title -%}
+      {{ product.featured_image | image_url: width: 900 | image_tag: widths: '360, 540, 720, 900', sizes: '(min-width: 990px) 25vw, 50vw', alt: ds_image_alt }}
+    {%- endif -%}
+  </a>
+  <div class="ds-card-body">
+    {%- if show_vendor -%}<p class="ds-supporting">{{ product.vendor }}</p>{%- endif -%}
+    <h3 class="ds-card-title"><a href="{{ product.url }}">{{ product.title }}</a></h3>
+    {% render 'ds-price', product: product %}
+  </div>
+  {%- if enable_quick_add -%}
+  <div class="ds-card-footer">
+    {%- if product.has_only_default_variant -%}
+      {% render 'ds-buy-button', product: product %}
+    {%- else -%}
+      <a href="{{ product.url }}" class="ds-btn ds-btn-outline">Choose options</a>
+    {%- endif -%}
+  </div>
+  {%- endif -%}
+</div>`;
+    SNIPPET_ANNOUNCEMENT = `{% comment %}
+  Announcement bar. Usage: {% render 'ds-announcement', text: 'Free shipping over $150' %}
+  Optional: link: '/collections/all', link_label: 'Shop now'
+{% endcomment %}
+<div class="ds ds-embed ds-announce">
+  <p>{{ text }}{%- if link and link_label %} <a href="{{ link }}">{{ link_label }}</a>{% endif -%}</p>
+</div>`;
+    SNIPPET_NEWSLETTER = `{% comment %}
+  Email signup wired to Shopify customers.
+  Usage: {% render 'ds-newsletter', id: section.id %}
+  Optional: id, heading, button_label, success_text
+  Pass id when the snippet can appear more than once on a page, so each
+  email input keeps a unique id and its label stays correctly associated.
+{% endcomment %}
+{%- liquid
+  assign ds_heading = heading | default: 'Subscribe to our emails'
+  assign ds_button = button_label | default: 'Subscribe'
+  assign ds_success = success_text | default: 'Thanks for subscribing.'
+  if id
+    assign ds_input_id = 'ds-newsletter-email-' | append: id
+  else
+    assign ds_input_id = 'ds-newsletter-email'
+  endif
+-%}
+<div class="ds ds-embed ds-newsletter">
+  <h2 class="ds-section-title">{{ ds_heading }}</h2>
+  {% form 'customer', class: 'ds-field' %}
+    <input type="hidden" name="contact[tags]" value="newsletter">
+    {%- if form.posted_successfully? -%}
+      <p role="status">{{ ds_success }}</p>
+    {%- else -%}
+      <div class="ds-control-row">
+        <div>
+          <label class="ds-label" for="{{ ds_input_id }}">Email</label>
+        <input id="{{ ds_input_id }}" type="email" name="contact[email]" class="ds-input" autocomplete="email" required>
+        </div>
+        <button type="submit" class="ds-btn ds-btn-primary">{{ ds_button }}</button>
+      </div>
+      {%- if form.errors -%}<p class="ds-alert" role="alert">{{ form.errors | default_errors }}</p>{%- endif -%}
+    {%- endif -%}
+  {% endform %}
+</div>`;
+    SECTION_FAQ = `{% comment %}
+  FAQ accordion using the browser's native details element. Merchants add it
+  from the theme editor as "DS FAQ".
+{% endcomment %}
+<div class="ds ds-embed ds-container ds-faq">
+  {%- if section.settings.heading != blank -%}
+    <h2 class="ds-section-title">{{ section.settings.heading }}</h2>
+  {%- endif -%}
+  {%- for block in section.blocks -%}
+    <details class="ds-faq-item" {{ block.shopify_attributes }}>
+      <summary>{{ block.settings.question }}</summary>
+      <div class="ds-faq-answer">{{ block.settings.answer }}</div>
+    </details>
+  {%- endfor -%}
+</div>
+{% schema %}
+{
+  "name": "DS FAQ",
+  "settings": [
+    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Frequently asked questions" }
+  ],
+  "blocks": [
+    {
+      "type": "item",
+      "name": "Question",
+      "settings": [
+        { "type": "text", "id": "question", "label": "Question" },
+        { "type": "richtext", "id": "answer", "label": "Answer" }
+      ]
+    }
+  ],
+  "max_blocks": 20,
+  "presets": [{ "name": "DS FAQ", "blocks": [{ "type": "item" }, { "type": "item" }] }]
+}
+{% endschema %}`;
+    SECTION_FEATURED_COLLECTION = `{% comment %}
+  Product grid from a merchant-chosen collection. Merchants add it from the
+  theme editor as "DS Featured collection".
+{% endcomment %}
+{%- assign ds_collection = section.settings.collection -%}
+<div class="ds ds-embed ds-container ds-featured">
+  {%- if section.settings.heading != blank -%}
+    <h2 class="ds-section-title">{{ section.settings.heading }}</h2>
+  {%- endif -%}
+  <div class="ds-grid" style="--ds-cols: {{ section.settings.columns_desktop }}">
+    {%- for product in ds_collection.products limit: section.settings.products_to_show -%}
+      {% render 'ds-product-card', product: product, show_vendor: section.settings.show_vendor, enable_quick_add: section.settings.enable_quick_add %}
+    {%- else -%}
+      <p class="ds-supporting">Choose a collection in the theme editor.</p>
+    {%- endfor -%}
+  </div>
+</div>
+{% schema %}
+{
+  "name": "DS Featured collection",
+  "settings": [
+    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Featured products" },
+    { "type": "collection", "id": "collection", "label": "Collection" },
+    { "type": "range", "id": "products_to_show", "min": 2, "max": 12, "step": 1, "default": 4, "label": "Products to show" },
+    { "type": "range", "id": "columns_desktop", "min": 2, "max": 5, "step": 1, "default": 4, "label": "Columns on desktop" },
+    { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false },
+    { "type": "checkbox", "id": "enable_quick_add", "label": "Enable quick add", "default": false }
+  ],
+  "presets": [{ "name": "DS Featured collection" }]
+}
+{% endschema %}`;
+    SECTION_HEADER = `{% comment %}
+  Site header. Merchants add it to the theme's header group in the editor.
+{% endcomment %}
+<header class="ds ds-embed ds-header">
+  <a class="ds-header-brand" href="{{ routes.root_url }}">
+    {%- if section.settings.logo -%}
+      {{ section.settings.logo | image_url: width: 300 | image_tag: alt: shop.name, class: 'ds-header-logo' }}
+    {%- else -%}
+      {{ shop.name }}
+    {%- endif -%}
+  </a>
+  <nav class="ds-header-nav" aria-label="Main">
+    {%- for link in section.settings.menu.links -%}
+      <a href="{{ link.url }}"{% if link.current %} aria-current="page"{% endif %}>{{ link.title }}</a>
+    {%- endfor -%}
+  </nav>
+  <a class="ds-btn ds-btn-outline" href="{{ routes.cart_url }}">Cart ({{ cart.item_count }})</a>
+</header>
+{% schema %}
+{
+  "name": "DS Header",
+  "settings": [
+    { "type": "image_picker", "id": "logo", "label": "Logo" },
+    { "type": "link_list", "id": "menu", "label": "Menu", "default": "main-menu" }
+  ],
+  "presets": [{ "name": "DS Header" }]
+}
+{% endschema %}`;
+    SECTION_FOOTER = `{% comment %}
+  Site footer. Merchants add it to the theme's footer group in the editor.
+{% endcomment %}
+<footer class="ds ds-embed ds-footer">
+  <span class="ds-header-brand">{{ shop.name }}</span>
+  <nav aria-label="Footer">
+    {%- for link in section.settings.menu.links -%}
+      <a href="{{ link.url }}">{{ link.title }}</a>
+    {%- endfor -%}
+  </nav>
+  <span class="ds-supporting">&copy; {{ 'now' | date: '%Y' }} {{ shop.name }}</span>
+</footer>
+{% schema %}
+{
+  "name": "DS Footer",
+  "settings": [
+    { "type": "link_list", "id": "menu", "label": "Menu", "default": "footer" }
+  ],
+  "presets": [{ "name": "DS Footer" }]
+}
+{% endschema %}`;
+    SECTION_HERO = `{% comment %}
+  Hero with image, heading, supporting line, and up to 2 actions.
+{% endcomment %}
+<div class="ds ds-embed ds-container ds-hero">
+  {%- if section.settings.image -%}
+    {%- assign ds_image_alt = section.settings.heading | strip_html -%}
+    {{ section.settings.image | image_url: width: 1600 | image_tag: widths: '750, 1100, 1600', sizes: '100vw', alt: ds_image_alt }}
+  {%- endif -%}
+  <h2 class="ds-display">{{ section.settings.heading }}</h2>
+  {%- if section.settings.text != blank -%}<p class="ds-supporting">{{ section.settings.text }}</p>{%- endif -%}
+  <div class="ds-hero-actions">
+    {%- if section.settings.button_label != blank -%}
+      <a class="ds-btn ds-btn-primary" href="{{ section.settings.button_link }}">{{ section.settings.button_label }}</a>
+    {%- endif -%}
+    {%- if section.settings.secondary_label != blank -%}
+      <a class="ds-btn ds-btn-outline" href="{{ section.settings.secondary_link }}">{{ section.settings.secondary_label }}</a>
+    {%- endif -%}
+  </div>
+</div>
+{% schema %}
+{
+  "name": "DS Hero",
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "Image" },
+    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Tell your story" },
+    { "type": "text", "id": "text", "label": "Supporting line" },
+    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
+    { "type": "url", "id": "button_link", "label": "Button link" },
+    { "type": "text", "id": "secondary_label", "label": "Secondary button label" },
+    { "type": "url", "id": "secondary_link", "label": "Secondary button link" }
+  ],
+  "presets": [{ "name": "DS Hero" }]
+}
+{% endschema %}`;
+    SECTION_RICH_TEXT = `{% comment %}
+  Heading plus rich text, with an optional button.
+{% endcomment %}
+<div class="ds ds-embed ds-container" style="padding:2rem 0">
+  {%- if section.settings.heading != blank -%}<h2 class="ds-section-title">{{ section.settings.heading }}</h2>{%- endif -%}
+  <div>{{ section.settings.text }}</div>
+  {%- if section.settings.button_label != blank -%}
+    <p><a class="ds-btn ds-btn-secondary" href="{{ section.settings.button_link }}">{{ section.settings.button_label }}</a></p>
+  {%- endif -%}
+</div>
+{% schema %}
+{
+  "name": "DS Rich text",
+  "settings": [
+    { "type": "inline_richtext", "id": "heading", "label": "Heading" },
+    { "type": "richtext", "id": "text", "label": "Text" },
+    { "type": "text", "id": "button_label", "label": "Button label" },
+    { "type": "url", "id": "button_link", "label": "Button link" }
+  ],
+  "presets": [{ "name": "DS Rich text" }]
+}
+{% endschema %}`;
+    SECTION_IMAGE_WITH_TEXT = `{% comment %}
+  Image beside heading, text, and an optional button.
+{% endcomment %}
+<div class="ds ds-embed ds-container ds-image-text">
+  {%- if section.settings.image -%}
+    {%- assign ds_image_alt = section.settings.heading | strip_html -%}
+    {{ section.settings.image | image_url: width: 900 | image_tag: widths: '480, 720, 900', sizes: '(min-width: 750px) 50vw, 100vw', alt: ds_image_alt }}
+  {%- endif -%}
+  <div class="ds-product-info">
+    <h2 class="ds-section-title">{{ section.settings.heading }}</h2>
+    <div>{{ section.settings.text }}</div>
+    {%- if section.settings.button_label != blank -%}
+      <p><a class="ds-btn ds-btn-primary" href="{{ section.settings.button_link }}">{{ section.settings.button_label }}</a></p>
+    {%- endif -%}
+  </div>
+</div>
+{% schema %}
+{
+  "name": "DS Image with text",
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "Image" },
+    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Pair text with an image" },
+    { "type": "richtext", "id": "text", "label": "Text" },
+    { "type": "text", "id": "button_label", "label": "Button label" },
+    { "type": "url", "id": "button_link", "label": "Button link" }
+  ],
+  "presets": [{ "name": "DS Image with text" }]
+}
+{% endschema %}`;
+    SECTION_MAIN_PRODUCT = `{% comment %}
+  Product page main section. Assign the "product.ds" template to a product in
+  the admin, or add this section to an existing product template.
+{% endcomment %}
+<div class="ds ds-embed ds-container ds-product-page">
+  <div class="ds-product-layout">
+    <div class="ds-product-media">
+      {%- if product.featured_image -%}
+        {%- assign ds_image_alt = product.featured_image.alt | default: product.title -%}
+        {{ product.featured_image | image_url: width: 1200 | image_tag: widths: '480, 720, 960, 1200', sizes: '(min-width: 750px) 50vw, 100vw', alt: ds_image_alt }}
+      {%- endif -%}
+      {%- if product.images.size > 1 -%}
+        <div class="ds-product-thumbs">
+          {%- for image in product.images offset: 1 limit: 4 -%}
+            {%- assign ds_thumb_alt = image.alt | default: product.title -%}
+            {{ image | image_url: width: 300 | image_tag: alt: ds_thumb_alt }}
+          {%- endfor -%}
+        </div>
+      {%- endif -%}
+    </div>
+    <div class="ds-product-info">
+      {%- if section.settings.show_vendor -%}<p class="ds-supporting">{{ product.vendor }}</p>{%- endif -%}
+      <h1 class="ds-display">{{ product.title }}</h1>
+      {% render 'ds-price', variant: product.selected_or_first_available_variant %}
+      {% render 'ds-buy-button', product: product, show_quantity: section.settings.show_quantity %}
+      <div>{{ product.description }}</div>
+    </div>
+  </div>
+</div>
+{% schema %}
+{
+  "name": "DS Product",
+  "settings": [
+    { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": true },
+    { "type": "checkbox", "id": "show_quantity", "label": "Show quantity field", "default": true }
+  ],
+  "enabled_on": { "templates": ["product"] }
+}
+{% endschema %}`;
+    SECTION_MAIN_COLLECTION = `{% comment %}
+  Collection page main section with pagination. Assign the "collection.ds"
+  template to a collection in the admin, or add to an existing template.
+{% endcomment %}
+{% paginate collection.products by section.settings.products_per_page %}
+<div class="ds ds-embed ds-container ds-collection-page">
+  <h1 class="ds-display">{{ collection.title }}</h1>
+  {%- if collection.description != blank -%}<div class="ds-supporting">{{ collection.description }}</div>{%- endif -%}
+  <div class="ds-grid" style="--ds-cols: {{ section.settings.columns_desktop }}; margin-top: 1.5rem">
+    {%- for product in collection.products -%}
+      {% render 'ds-product-card', product: product, show_vendor: section.settings.show_vendor, enable_quick_add: section.settings.enable_quick_add %}
+    {%- else -%}
+      <p class="ds-supporting">No products found.</p>
+    {%- endfor -%}
+  </div>
+  {% render 'ds-pagination', paginate: paginate %}
+</div>
+{% endpaginate %}
+{% schema %}
+{
+  "name": "DS Collection",
+  "settings": [
+    { "type": "range", "id": "products_per_page", "min": 4, "max": 24, "step": 4, "default": 12, "label": "Products per page" },
+    { "type": "range", "id": "columns_desktop", "min": 2, "max": 5, "step": 1, "default": 4, "label": "Columns on desktop" },
+    { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false },
+    { "type": "checkbox", "id": "enable_quick_add", "label": "Enable quick add", "default": false }
+  ],
+  "enabled_on": { "templates": ["collection"] }
+}
+{% endschema %}`;
+    SECTION_CONTACT = `{% comment %}
+  Contact form posting to Shopify's contact endpoint. No JavaScript.
+{% endcomment %}
+<div class="ds ds-embed ds-container" style="max-width:36rem;padding:2rem 0">
+  <h2 class="ds-section-title">{{ section.settings.heading }}</h2>
+  {% form 'contact' %}
+    {%- if form.posted_successfully? -%}
+      <p role="status">Thanks for your message. We reply within one business day.</p>
+    {%- else -%}
+      {%- if form.errors -%}<p class="ds-alert" role="alert">{{ form.errors | default_errors }}</p>{%- endif -%}
+      <div class="ds-field">
+        <label class="ds-label" for="ds-contact-name-{{ section.id }}">Name</label>
+        <input id="ds-contact-name-{{ section.id }}" class="ds-input" type="text" name="contact[name]" autocomplete="name">
+      </div>
+      <div class="ds-field">
+        <label class="ds-label" for="ds-contact-email-{{ section.id }}">Email</label>
+        <input id="ds-contact-email-{{ section.id }}" class="ds-input" type="email" name="contact[email]" autocomplete="email" required>
+      </div>
+      <div class="ds-field">
+        <label class="ds-label" for="ds-contact-body-{{ section.id }}">Message</label>
+        <textarea id="ds-contact-body-{{ section.id }}" class="ds-textarea" name="contact[body]" required></textarea>
+      </div>
+      <button type="submit" class="ds-btn ds-btn-primary">Send message</button>
+    {%- endif -%}
+  {% endform %}
+</div>
+{% schema %}
+{
+  "name": "DS Contact",
+  "settings": [
+    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Contact us" }
+  ],
+  "presets": [{ "name": "DS Contact" }]
+}
+{% endschema %}`;
+    SECTION_MULTICOLUMN = `{% comment %}
+  Row of text cards, for value props or feature callouts.
+{% endcomment %}
+<div class="ds ds-embed ds-container" style="padding:2rem 0">
+  {%- if section.settings.heading != blank -%}<h2 class="ds-section-title">{{ section.settings.heading }}</h2>{%- endif -%}
+  <div class="ds-grid" style="--ds-cols: {{ section.settings.columns_desktop }}">
+    {%- for block in section.blocks -%}
+      <div class="ds-card" {{ block.shopify_attributes }}>
+        <div class="ds-card-body">
+          <h3 class="ds-card-title">{{ block.settings.heading }}</h3>
+          <p class="ds-card-desc">{{ block.settings.text }}</p>
+        </div>
+      </div>
+    {%- endfor -%}
+  </div>
+</div>
+{% schema %}
+{
+  "name": "DS Multicolumn",
+  "settings": [
+    { "type": "inline_richtext", "id": "heading", "label": "Heading" },
+    { "type": "range", "id": "columns_desktop", "min": 2, "max": 4, "step": 1, "default": 3, "label": "Columns on desktop" }
+  ],
+  "blocks": [
+    {
+      "type": "column",
+      "name": "Column",
+      "settings": [
+        { "type": "text", "id": "heading", "label": "Heading" },
+        { "type": "text", "id": "text", "label": "Text" }
+      ]
+    }
+  ],
+  "max_blocks": 8,
+  "presets": [{ "name": "DS Multicolumn", "blocks": [{ "type": "column" }, { "type": "column" }, { "type": "column" }] }]
+}
+{% endschema %}`;
+    TEMPLATE_PRODUCT_JSON = `{
+  "sections": {
+    "main": {
+      "type": "ds-main-product",
+      "settings": {}
+    }
+  },
+  "order": ["main"]
+}`;
+    TEMPLATE_COLLECTION_JSON = `{
+  "sections": {
+    "main": {
+      "type": "ds-main-collection",
+      "settings": {}
+    }
+  },
+  "order": ["main"]
+}`;
+    SNIPPETS = [
+      { path: "snippets/ds-badge.liquid", content: SNIPPET_BADGE },
+      { path: "snippets/ds-price.liquid", content: SNIPPET_PRICE },
+      { path: "snippets/ds-variant-select.liquid", content: SNIPPET_VARIANT_SELECT },
+      { path: "snippets/ds-buy-button.liquid", content: SNIPPET_BUY_BUTTON },
+      { path: "snippets/ds-product-card.liquid", content: SNIPPET_PRODUCT_CARD },
+      { path: "snippets/ds-announcement.liquid", content: SNIPPET_ANNOUNCEMENT },
+      { path: "snippets/ds-newsletter.liquid", content: SNIPPET_NEWSLETTER },
+      { path: "snippets/ds-pagination.liquid", content: SNIPPET_PAGINATION },
+      { path: "sections/ds-header.liquid", content: SECTION_HEADER },
+      { path: "sections/ds-footer.liquid", content: SECTION_FOOTER },
+      { path: "sections/ds-hero.liquid", content: SECTION_HERO },
+      { path: "sections/ds-rich-text.liquid", content: SECTION_RICH_TEXT },
+      { path: "sections/ds-image-with-text.liquid", content: SECTION_IMAGE_WITH_TEXT },
+      { path: "sections/ds-multicolumn.liquid", content: SECTION_MULTICOLUMN },
+      { path: "sections/ds-contact.liquid", content: SECTION_CONTACT },
+      { path: "sections/ds-faq.liquid", content: SECTION_FAQ },
+      { path: "sections/ds-featured-collection.liquid", content: SECTION_FEATURED_COLLECTION },
+      { path: "sections/ds-main-product.liquid", content: SECTION_MAIN_PRODUCT },
+      { path: "sections/ds-main-collection.liquid", content: SECTION_MAIN_COLLECTION },
+      { path: "templates/product.ds.json", content: TEMPLATE_PRODUCT_JSON },
+      { path: "templates/collection.ds.json", content: TEMPLATE_COLLECTION_JSON }
+    ];
+    SHOPIFY_KIT_CONDUCT_MD = [
+      "## Install into the merchant's theme (mandatory order)",
+      "1. Write `assets/ds-kit.css` into the theme's `assets/` directory, every `snippets/ds-*.liquid` file into `snippets/`, every `sections/ds-*.liquid` file into `sections/`, and the `templates/*.ds.json` files into `templates/`. Copy file contents VERBATIM; retyped Liquid silently drops this system's material.",
+      "2. Load the stylesheet once in `layout/theme.liquid`, before `</head>`: `{{ 'ds-kit.css' | asset_url | stylesheet_tag }}`.",
+      '3. Merchants place everything from the theme editor: "DS Header" and "DS Footer" go into the theme\'s header and footer section groups; "DS Hero", "DS Featured collection", "DS Multicolumn", "DS Image with text", "DS Rich text", "DS Contact", and "DS FAQ" appear in the Add section list on any page. Any snippet also works from the built-in Custom Liquid section with one `{% render %}` line.',
+      "4. For fully branded product and collection pages, assign the `product.ds` and `collection.ds` templates to products and collections in the admin. They render `ds-main-product` and `ds-main-collection`, which include a native no-JavaScript variant dropdown and pagination.",
+      "",
+      "## Class contract (pass/fail)",
+      "- Do not rename `ds-*` classes and do not strip the `ds ds-embed` wrapper a snippet renders on its root; the wrapper scopes this system's tokens and keeps the background transparent inside existing theme sections.",
+      "- Custom CSS is layout-only (position, spacing, grid). Never restyle a `ds-*` component's geometry or surface; those carry this system's identity.",
+      `- ${HOVER_POLICY}`,
+      `- Every visible text color keeps at least ${MINIMUM_TEXT_CONTRAST} contrast against its computed background. Colors come from the system's tokens, never invented values.`,
+      "",
+      "## Commerce correctness",
+      "- `ds-buy-button` works without JavaScript on every product: multi-variant products get a native variant dropdown automatically, or pass `variant_id` to pin one. The product card's quick add links to the product page for multi-variant products.",
+      "- Without JavaScript the displayed price and image do not update when a shopper changes the variant dropdown; the correct variant is still added to the cart, and cart and checkout show its real price. State this to merchants rather than papering over it.",
+      "- Prices always render through the `money` filter, never hand-formatted.",
+      "- Images always render through `image_url` with explicit widths; `img_url` is deprecated.",
+      "",
+      "## Not in this kit, on purpose",
+      "Nothing here ships JavaScript. Sliding cart drawers, live variant image swapping, and instant search need scripts, and every theme already has its own; competing scripts are the least portable surface in Shopify. The kit's forms, dropdowns, quantity fields, accordions, and pagination all work as native HTML."
+    ].join("\n");
+  }
+});
+
 // ../shared/src/mcp/preview-widget-sdk.generated.ts
 var PREVIEW_WIDGET_SDK_JS;
 var init_preview_widget_sdk_generated = __esm({
@@ -5308,9 +6084,9 @@ function inlineBuildMd(projectId) {
   return `
 **Building inline (ChatGPT canvas / Claude artifact)?** There is no npm or Tailwind there, so the install above can't run. Call \`get-design-system-kit\` with \`target: "html"\` and projectId \`${projectId}\` to get this system's real tokens + a framework-free CSS kit you paste into one \`<style>\` and build with immediately.`;
 }
-async function fetchProjectTokensCss(projectId, authContext) {
+async function fetchProjectTokensCss(projectId, apiFetch, authContext) {
   try {
-    const res = await fetch(`${APP_BASE_URL}/api/projects/${projectId}/registry/all.json`, {
+    const res = await apiFetch(`${APP_BASE_URL}/api/projects/${projectId}/registry/all.json`, {
       headers: authHeaders(authContext)
     });
     if (!res.ok) return null;
@@ -5329,7 +6105,7 @@ function completedHtmlKitStructuredContent(name, viewUrl, tokensCss, componentMa
     requiredWrapperClass: "ds",
     requiredComponentClassPrefix: "ds-",
     customCssScope: "layout-only",
-    hoverPolicy: "Put every :hover rule inside @media (hover: hover) and (pointer: fine); never move controls or override selected/pressed styling. For selectable controls, unselected hover stays neutral: only strengthen the neutral surface or edge, never changes text to the primary color, and never borrows the primary/accent fill. Do not add app-specific :hover rules to ds-* controls; use the kit states verbatim.",
+    hoverPolicy: HOVER_POLICY,
     hostIsolationCssTemplate: HOST_ISOLATION_CSS_TEMPLATE,
     minimumTextContrast: MINIMUM_TEXT_CONTRAST,
     textColorPolicy: INLINE_TEXT_COLOR_POLICY,
@@ -5341,6 +6117,22 @@ function completedHtmlKitStructuredContent(name, viewUrl, tokensCss, componentMa
     tokensCss
   };
 }
+function completedShopifyKitStructuredContent(name, viewUrl, tokensCss, themeFiles) {
+  return {
+    status: "completed",
+    name,
+    viewUrl,
+    buildInstructions: SHOPIFY_KIT_CONDUCT_MD,
+    requiredWrapperClass: "ds",
+    requiredComponentClassPrefix: "ds-",
+    customCssScope: "layout-only",
+    hoverPolicy: HOVER_POLICY,
+    minimumTextContrast: MINIMUM_TEXT_CONTRAST,
+    textColorPolicy: INLINE_TEXT_COLOR_POLICY,
+    themeFiles,
+    tokensCss
+  };
+}
 async function fetchCatalog(designSystemId) {
   try {
     const [globalsRes, ...componentResults] = await Promise.all([
@@ -5384,8 +6176,9 @@ function registerDesignSystemTools({
   provider,
   tracked,
   track,
-  authContext
-}) {
+  authContext,
+  apiFetch = globalThis.fetch
+}, { enableShopifyKit = true } = {}) {
   const searchInputSchema = z5.object({
     query: z5.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'."
@@ -5482,7 +6275,7 @@ ${BUILD_TARGET_RULE}` : ""}`
       title: "Find a Design System for a UI Build",
       description: searchDescription(),
       inputSchema: searchInputSchema,
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     makeSearchHandler("find-design-system", true)
   );
@@ -5503,7 +6296,7 @@ ${BUILD_TARGET_RULE}` : ""}`
           structuredContent: { status: "error", name: `Project ${projectId.slice(0, 8)}`, viewUrl: viewUrl2, tokensCss: "" }
         };
       }
-      const result = await fetchProjectTokensCss(projectId, authContext);
+      const result = await fetchProjectTokensCss(projectId, apiFetch, authContext);
       if (!result?.tokensCss) {
         return {
           content: [{ type: "text", text: `Could not load tokens for project "${projectId}". It may still be generating, or the id is wrong. Check ${viewUrl2}.` }],
@@ -5555,7 +6348,7 @@ ${BUILD_TARGET_RULE}` : ""}`
 
 `;
       const longestRun = Math.max(0, ...[...ds.metadata.html.matchAll(/`+/g)].map((m) => m[0].length));
-      const fence2 = "`".repeat(Math.max(3, longestRun + 1));
+      const fence3 = "`".repeat(Math.max(3, longestRun + 1));
       const { tokensCss: tokensCss2, files: files2 } = await fetchCatalog(designSystemId);
       const componentMaterialCss = buildDsComponentCss(files2).css;
       return {
@@ -5563,9 +6356,9 @@ ${BUILD_TARGET_RULE}` : ""}`
         // document so hosted agents cannot truncate it away. [BD-240]
         content: [{ type: "text", text: `${steer}${intro}${HTML_KIT_CONDUCT_MD}
 
-${fence2}html
+${fence3}html
 ${ds.metadata.html}
-${fence2}` }],
+${fence3}` }],
         structuredContent: completedHtmlKitStructuredContent(
           ds.metadata.title,
           viewUrl,
@@ -5599,13 +6392,85 @@ ${fence2}` }],
       )
     };
   });
+  const getShopifyKit = async ({
+    designSystemId,
+    projectId,
+    context
+  }) => tracked("get-design-system-kit", { target: "shopify", designSystemId, projectId, context }, async () => {
+    if (projectId) {
+      const viewUrl2 = `${APP_BASE_URL}/projects/${projectId}`;
+      const result = await fetchProjectTokensCss(projectId, apiFetch, authContext);
+      if (!result?.tokensCss) {
+        return {
+          content: [{ type: "text", text: `Could not load tokens for project "${projectId}". It may still be generating, or the id is wrong. Check ${viewUrl2}.` }],
+          structuredContent: { status: "error", name: `Project ${projectId.slice(0, 8)}`, viewUrl: viewUrl2, tokensCss: "" }
+        };
+      }
+      const componentKit2 = buildDsComponentCss(result.files);
+      const name = result.name ?? `Project ${projectId.slice(0, 8)}`;
+      const text2 = buildDsShopifyKit({
+        name,
+        tokensCss: result.tokensCss,
+        viewUrl: viewUrl2,
+        source: { kind: "project", projectId },
+        componentKit: componentKit2
+      });
+      return {
+        content: [{ type: "text", text: text2 }],
+        structuredContent: completedShopifyKitStructuredContent(
+          name,
+          viewUrl2,
+          result.tokensCss,
+          buildDsShopifyFiles({ tokensCss: result.tokensCss, componentKit: componentKit2 })
+        )
+      };
+    }
+    if (!designSystemId) {
+      return {
+        content: [{ type: "text", text: "For target shopify, pass either a catalog designSystemId (from find-design-system) or a projectId (from create-design-system)." }],
+        structuredContent: { status: "error", name: "Missing design system", tokensCss: "" }
+      };
+    }
+    const ds = await provider.getDesignSystemById(designSystemId, { includeComponents: false });
+    if (!ds) {
+      return {
+        content: [{ type: "text", text: `Design system "${designSystemId}" not found. Call find-design-system first to get a valid id, or pass a projectId for a generated system.` }],
+        structuredContent: { status: "error", name: designSystemId, tokensCss: "" }
+      };
+    }
+    const viewUrl = `${APP_BASE_URL}/design-systems/${designSystemId}`;
+    const { tokensCss, files } = await fetchCatalog(designSystemId);
+    if (!tokensCss) {
+      return {
+        content: [{ type: "text", text: `Could not load tokens for "${designSystemId}". The full live showcase is at ${viewUrl}.` }],
+        structuredContent: { status: "error", name: ds.metadata.title, viewUrl, tokensCss: "" }
+      };
+    }
+    const componentKit = buildDsComponentCss(files);
+    const text = buildDsShopifyKit({
+      name: ds.metadata.title,
+      tokensCss,
+      viewUrl,
+      source: { kind: "catalog", designSystemId },
+      componentKit
+    });
+    return {
+      content: [{ type: "text", text }],
+      structuredContent: completedShopifyKitStructuredContent(
+        ds.metadata.title,
+        viewUrl,
+        tokensCss,
+        buildDsShopifyFiles({ tokensCss, componentKit })
+      )
+    };
+  });
   server.registerTool(
     "get-design-system-kit",
     {
       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.
+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.` : ""}
 
 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.
 
@@ -5630,15 +6495,18 @@ same components/ui/ paths.
 
 ${BUILD_TARGET_RULE}`,
       inputSchema: z5.object({
-        target: z5.enum(["react", "html"]).describe('Required build target. Use "react" for any host with filesystem + terminal; use "html" only for inline chat canvases/artifacts.'),
-        designSystemId: z5.string().min(1).optional().describe("Catalog design system ID from find-design-system. Required for target react; for target html pass this or projectId."),
-        projectId: z5.string().min(1).optional().describe('Generated project ID from create-design-system / get-design-system-status. Supported only with target "html".'),
+        // Off-pilot callers must not see the target at all, not merely be refused it.
+        target: z5.enum(
+          enableShopifyKit ? ["react", "html", "shopify"] : ["react", "html"]
+        ).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.' : ""}`),
+        designSystemId: z5.string().min(1).optional().describe(`Catalog design system ID from find-design-system. Required for target react; for target${enableShopifyKit ? "s html and shopify" : " html"} pass this or projectId.`),
+        projectId: z5.string().min(1).optional().describe(`Generated project ID from create-design-system / get-design-system-status. Supported with target${enableShopifyKit ? 's "html" and "shopify"' : ' "html"'}.`),
         component: z5.union([z5.string(), z5.array(z5.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: z5.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: BUILD_KIT_OUTPUT_SCHEMA,
-      annotations: { readOnlyHint: true }
+      outputSchema: buildKitOutputSchema(enableShopifyKit),
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
       // This tool returns build instructions, not a visual preview. Attaching
       // the preview template makes ChatGPT render a nested showcase iframe;
       // when that iframe is unavailable the user sees a large blank card even
@@ -5649,6 +6517,15 @@ ${BUILD_TARGET_RULE}`,
       if (target === "html") {
         return getHtmlKit({ designSystemId, projectId, context });
       }
+      if (target === "shopify") {
+        if (!enableShopifyKit) {
+          return {
+            content: [{ type: "text", text: 'The Shopify target is in a private pilot and is not enabled for this account. Use target "react" to build the storefront as components, or ask Better Design for pilot access.' }],
+            structuredContent: { status: "error", name: "Shopify target unavailable", tokensCss: "" }
+          };
+        }
+        return getShopifyKit({ designSystemId, projectId, context });
+      }
       if (!designSystemId) {
         return {
           content: [{ type: "text", text: 'For target "react", pass a catalog designSystemId from find-design-system.' }],
@@ -5871,7 +6748,7 @@ Share the project URL with the user right away so they can watch the generation
         requestHeaders.Authorization = `Bearer ${bearer2}`;
       }
       try {
-        const startRes = await fetch(startUrl, {
+        const startRes = await apiFetch(startUrl, {
           method: "POST",
           headers: requestHeaders,
           body: JSON.stringify({
@@ -5915,7 +6792,7 @@ Share the project URL with the user right away so they can watch the generation
     const statusUrl = `${APP_BASE_URL}/api/projects/${projectId}`;
     let project;
     try {
-      const res = await fetch(statusUrl, { headers });
+      const res = await apiFetch(statusUrl, { headers });
       if (!res.ok) {
         return { content: [{ type: "text", text: `Could not read project ${projectId} (HTTP ${res.status}). Check the id, or view it at ${APP_BASE_URL}/projects/${projectId}.` }] };
       }
@@ -5932,7 +6809,7 @@ npx shadcn@latest add ${registryUrl}
       let tokensCss = "";
       let dsName = `Project ${projectId.slice(0, 8)}`;
       try {
-        const res = await fetch(registryUrl);
+        const res = await apiFetch(registryUrl);
         if (res.ok) {
           const json = await res.json();
           if (json.meta?.installInstructions) body = json.meta.installInstructions;
@@ -6089,6 +6966,7 @@ var init_design_system_tools = __esm({
     "use strict";
     init_guardrails();
     init_html_kit();
+    init_shopify_kit();
     init_preview_html();
     init_shared();
     REGISTRY_ITEM_SCHEMA = z5.object({
@@ -6653,7 +7531,7 @@ Returns: the semantic palette (primary, background, foreground, accent, border,
         name: z6.string().trim().min(1).max(120).optional().describe("Optional label for the extracted system, e.g. the app or repo name."),
         maxTokens: z6.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates the token sheet to fit.")
       }),
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({ css, name, maxTokens }) => tracked("extract-design-system", { name: name ?? null }, async () => {
       const result = extractDesignSystem(css, name);
@@ -6686,7 +7564,13 @@ function fail(message) {
     }
   };
 }
-function registerIllustrationTools({ server, track, tracked, authContext }) {
+function registerIllustrationTools({
+  server,
+  track,
+  tracked,
+  authContext,
+  apiFetch = globalThis.fetch
+}) {
   const authHeaders2 = () => {
     const headers = { "Content-Type": "application/json" };
     if (authContext) {
@@ -6719,7 +7603,7 @@ Markup carrying script, event handlers, remote references, or styles that reach
         reviewToken: z7.string().optional().describe("The token from a previous review of this drawing. Reviews it again free.")
       }),
       outputSchema: REVIEW_OUTPUT_SCHEMA,
-      annotations: { readOnlyHint: true }
+      annotations: READ_ONLY_TOOL_ANNOTATIONS
     },
     async ({
       svg,
@@ -6731,7 +7615,7 @@ Markup carrying script, event handlers, remote references, or styles that reach
       { query: intent, animated, repeat: Boolean(reviewToken) },
       async () => {
         try {
-          const res = await fetch(`${APP_BASE_URL}/api/illustrations/review`, {
+          const res = await apiFetch(`${APP_BASE_URL}/api/illustrations/review`, {
             method: "POST",
             headers: authHeaders2(),
             signal: AbortSignal.timeout(6e4),
@@ -6847,13 +7731,13 @@ var init_preview_resource = __esm({
 });
 
 // ../shared/src/mcp/tools.ts
-function registerAllTools(server, provider, onToolUsage, authContext, options = {}) {
+function registerAllTools(server, provider, onToolUsage, authContext, options = {}, apiFetch = globalThis.fetch) {
   const { track, tracked } = createTracking(server, onToolUsage);
-  const deps = { server, provider, track, tracked, authContext };
+  const deps = { server, provider, track, tracked, authContext, apiFetch };
   registerPrincipleTools(deps, options);
   registerComprehensionTools(deps);
   registerIconTools(deps);
-  registerDesignSystemTools(deps);
+  registerDesignSystemTools(deps, options);
   registerExtractTools(deps);
   registerIllustrationTools(deps);
   registerPreviewResource(deps);
@@ -6889,15 +7773,27 @@ function createMcpServer(options) {
     version = "3.0.0",
     onToolUsage,
     authContext,
-    enableReactNativeGuide = true
+    enableReactNativeGuide = true,
+    enableThreeJsGuide = true,
+    enableShopifyKit = true,
+    apiFetch = globalThis.fetch
   } = options;
   const server = new McpServer(
     { name, version },
-    { instructions: getMcpInstructions(enableReactNativeGuide) }
+    { instructions: getMcpInstructions({ enableReactNativeGuide, enableThreeJsGuide }) }
+  );
+  registerAllTools(
+    server,
+    provider,
+    onToolUsage,
+    authContext,
+    {
+      enableReactNativeGuide,
+      enableThreeJsGuide,
+      enableShopifyKit
+    },
+    apiFetch
   );
-  registerAllTools(server, provider, onToolUsage, authContext, {
-    enableReactNativeGuide
-  });
   return server;
 }
 var init_mcp = __esm({