better-design 0.11.0 → 0.15.0

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;
@@ -1049,21 +1082,7 @@ 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."
     );
@@ -1072,6 +1091,8 @@ The UI copy inside the screen follows the same restraint: short headlines (about
       "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 +1182,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 +1257,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",
     {
@@ -1377,6 +1398,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: { readOnlyHint: true }
+      },
+      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: { readOnlyHint: true }
+    },
+    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",
     {
@@ -2806,11 +2937,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 +3138,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({
@@ -5329,7 +6100,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 +6112,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([
@@ -5385,7 +6172,7 @@ function registerDesignSystemTools({
   tracked,
   track,
   authContext
-}) {
+}, { 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'."
@@ -5555,7 +6342,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 +6350,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 +6386,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, 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,14 +6489,17 @@ 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,
+      outputSchema: buildKitOutputSchema(enableShopifyKit),
       annotations: { readOnlyHint: true }
       // This tool returns build instructions, not a visual preview. Attaching
       // the preview template makes ChatGPT render a nested showcase iframe;
@@ -5649,6 +6511,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.' }],
@@ -6089,6 +6960,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({
@@ -6673,6 +7545,19 @@ var init_extract_tools = __esm({
 
 // ../shared/src/mcp/tools/illustration-tools.ts
 import { z as z7 } from "zod";
+function fail(message) {
+  return {
+    content: [{ type: "text", text: message }],
+    structuredContent: {
+      faults: [message],
+      layers: [],
+      reviewed: false,
+      unseen: true,
+      reviewToken: "",
+      message
+    }
+  };
+}
 function registerIllustrationTools({ server, track, tracked, authContext }) {
   const authHeaders2 = () => {
     const headers = { "Content-Type": "application/json" };
@@ -6683,215 +7568,104 @@ function registerIllustrationTools({ server, track, tracked, authContext }) {
     return headers;
   };
   server.registerTool(
-    "draw-illustration",
+    "review-illustration",
     {
-      title: "Draw an Illustration",
-      description: `Draw an original SVG illustration for a UI surface: an empty state, a hero object, a container something drops into.
+      title: "Review an Illustration",
+      description: `Look at an SVG illustration you drew and get back what is visibly wrong with it.
 
-Use this whenever a screen needs a picture and you would otherwise leave a placeholder box, an emoji, or a stock icon standing in for artwork.
+You write SVG blind. This renders it in a real browser and judges it against this project's illustration principles, so you find out that a shape does not close, a part floats unattached, the light comes from two directions, or contents sit outside the container meant to hold them.
 
-The drawing is original, follows this project's illustration principles (light from one direction, seated shadows, containers split into back and front layers), and arrives in named layers so you can animate its parts.
+Use it whenever you have drawn an illustration, before you hand it to anyone. Drawing something worth shipping usually takes 2 or 3 rounds.
 
 How to call it:
-1. \`draw-illustration({ prompt: "something for the empty inbox screen" })\`. Write the prompt the way a person would ask; it does not need art direction.
-2. Pass \`projectId\` when the caller has a generated design system, and the drawing uses their brand colours. Without it the drawing uses neutral colours.
-3. Wait about a minute, then call \`get-illustration-status\` with the returned id to collect the finished svg.
+1. Get the rules first with \`get-ui-principle({ topic: "svg-illustration" })\` and draw against them.
+2. \`review-illustration({ svg, intent: "an open inbox tray with letters" })\`. Say what the drawing is meant to be, in your own words.
+3. Fix what \`faults\` names, then call again passing \`reviewToken\` back. Reviewing the same drawing again costs nothing while that token is valid.
+4. Stop when \`faults\` is empty.
 
-Subjects: objects, tools, containers and scenes. People and faces are declined, because the principles this draws from do not cover them.`,
+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: z7.object({
-        prompt: z7.string().min(1).describe('What the screen needs, in plain words. For example "something for the empty inbox screen".'),
-        projectId: z7.string().optional().describe("Generated project id from create-design-system. Supplies the brand palette."),
-        style: z7.enum(STYLES).optional().describe("flat, soft-depth or glossy. Defaults to the design system's character, or soft-depth."),
-        animated: z7.boolean().optional().describe("When true, the svg ships with entrance and ambient motion, and a reduced-motion off switch.")
+        svg: z7.string().min(1).describe("The complete svg element you drew."),
+        intent: z7.string().min(1).describe('What it is meant to be, in plain words. For example "an open inbox tray with letters".'),
+        animated: z7.boolean().optional().describe("Set when the drawing was meant to move, so the motion checks apply."),
+        reviewToken: z7.string().optional().describe("The token from a previous review of this drawing. Reviews it again free.")
       }),
-      outputSchema: DRAW_OUTPUT_SCHEMA
+      outputSchema: REVIEW_OUTPUT_SCHEMA,
+      annotations: { readOnlyHint: true }
     },
-    async ({ prompt, projectId, style, animated }) => tracked("draw-illustration", { query: prompt, hasProject: Boolean(projectId), style, animated }, async () => {
-      const startUrl = `${APP_BASE_URL}/api/illustrations`;
-      try {
-        const res = await fetch(startUrl, {
-          method: "POST",
-          headers: authHeaders2(),
-          signal: AbortSignal.timeout(15e3),
-          body: JSON.stringify({ prompt, projectId, style, animated: animated ?? false })
-        });
-        if (!res.ok) {
-          const detail = await res.text().catch(() => "");
+    async ({
+      svg,
+      intent,
+      animated,
+      reviewToken
+    }) => tracked(
+      "review-illustration",
+      { query: intent, animated, repeat: Boolean(reviewToken) },
+      async () => {
+        try {
+          const res = await fetch(`${APP_BASE_URL}/api/illustrations/review`, {
+            method: "POST",
+            headers: authHeaders2(),
+            signal: AbortSignal.timeout(6e4),
+            body: JSON.stringify({ svg, intent, animated: animated ?? false, reviewToken })
+          });
+          if (!res.ok) {
+            const detail = await res.text().catch(() => "");
+            return fail(`Could not review that drawing (HTTP ${res.status}). ${detail.slice(0, 300)}`);
+          }
+          const body = await res.json();
+          const faults = body.faults ?? [];
+          const layers = body.layers ?? [];
+          const message = !body.reviewed ? faults[0] ?? "That drawing was not reviewed." : faults.length === 0 ? "Nothing visibly wrong. The drawing is ready to use." : [
+            `${faults.length} thing${faults.length === 1 ? "" : "s"} to fix:`,
+            ...faults.map((f) => `- ${f}`),
+            body.unseen ? "The drawing could not be rendered, so only its structure was checked." : "",
+            body.reviewToken ? "Fix these and call again with the same reviewToken, which costs nothing." : "Fix these and call again."
+          ].filter(Boolean).join("\n");
           return {
             content: [
               {
                 type: "text",
-                text: `Could not start the drawing (HTTP ${res.status}). ${detail.slice(0, 400)}`
+                text: layers.length ? `${message}
+
+Layers, in paint order: ${layers.join(", ")}.` : message
               }
             ],
             structuredContent: {
-              status: "error",
-              illustrationId: "",
-              svg: "",
-              layers: [],
-              subject: "",
-              message: `Could not start the drawing (HTTP ${res.status}).`
-            }
-          };
-        }
-        const body = await res.json();
-        if (!body.id) {
-          return {
-            content: [{ type: "text", text: "The drawing service did not return an id." }],
-            structuredContent: {
-              status: "error",
-              illustrationId: "",
-              svg: "",
-              layers: [],
-              subject: "",
-              message: "The drawing service did not return an id."
-            }
-          };
-        }
-        const next = `Drawing started. Wait about a minute, then call get-illustration-status with id ${body.id}.`;
-        return {
-          content: [{ type: "text", text: next }],
-          structuredContent: {
-            status: "drawing",
-            illustrationId: body.id,
-            svg: "",
-            layers: [],
-            subject: "",
-            message: next
-          }
-        };
-      } catch (err) {
-        const message = `Could not reach the drawing service: ${err instanceof Error ? err.message : String(err)}`;
-        return {
-          content: [{ type: "text", text: message }],
-          structuredContent: {
-            status: "error",
-            illustrationId: "",
-            svg: "",
-            layers: [],
-            subject: "",
-            message
-          }
-        };
-      }
-    })
-  );
-  server.registerTool(
-    "get-illustration-status",
-    {
-      title: "Get Illustration Status",
-      description: `Collect a drawing started by draw-illustration.
-
-Call this about a minute after starting. While it is still drawing, wait and call again rather than starting a second drawing.
-
-When ready, \`svg\` holds the complete element: paste it into a component as it is. \`layers\` names the groups in paint order, so you know which part to animate. For a container, the back group renders behind whatever falls in and the front group in front of it, which is what makes something look like it landed inside.`,
-      inputSchema: z7.object({
-        illustrationId: z7.string().min(1).describe("The id returned by draw-illustration.")
-      }),
-      outputSchema: DRAW_OUTPUT_SCHEMA,
-      annotations: { readOnlyHint: true }
-    },
-    async ({ illustrationId }) => tracked("get-illustration-status", { illustrationId }, async () => {
-      try {
-        const res = await fetch(`${APP_BASE_URL}/api/illustrations/${illustrationId}`, {
-          headers: authHeaders2(),
-          signal: AbortSignal.timeout(15e3)
-        });
-        if (!res.ok) {
-          const message = `Could not read that drawing (HTTP ${res.status}).`;
-          return {
-            content: [{ type: "text", text: message }],
-            structuredContent: {
-              status: "error",
-              illustrationId,
-              svg: "",
-              layers: [],
-              subject: "",
-              message
-            }
-          };
-        }
-        const body = await res.json();
-        if ((body.status === "ready" || body.status === "partial") && body.svg) {
-          const layers = body.layers ?? [];
-          const partial = body.status === "partial";
-          const summary = [
-            partial ? `Drawing done, with reservations: ${body.subject ?? "illustration"}. It ran out of correction passes, so look it over before shipping it.` : `Drawing ready: ${body.subject ?? "illustration"}.`,
-            layers.length ? `Layers, in paint order: ${layers.join(", ")}.` : "",
-            "Paste the svg into a component. Keep the group ids so parts stay animatable."
-          ].filter(Boolean).join(" ");
-          return {
-            content: [{ type: "text", text: `${summary}
-
-${body.svg}` }],
-            structuredContent: {
-              status: partial ? "partial" : "ready",
-              illustrationId,
-              svg: body.svg,
+              faults,
               layers,
-              subject: body.subject ?? "",
-              message: summary
-            }
-          };
-        }
-        if (body.status === "error") {
-          const message = body.error ?? "The drawing failed.";
-          return {
-            content: [{ type: "text", text: message }],
-            structuredContent: {
-              status: "error",
-              illustrationId,
-              svg: "",
-              layers: [],
-              subject: "",
+              reviewed: body.reviewed ?? false,
+              unseen: body.unseen ?? false,
+              reviewToken: body.reviewToken ?? "",
               message
             }
           };
+        } catch (err) {
+          return fail(
+            `Could not reach the review service: ${err instanceof Error ? err.message : String(err)}`
+          );
         }
-        const waiting = "Still drawing. Wait another thirty seconds and call this again.";
-        return {
-          content: [{ type: "text", text: waiting }],
-          structuredContent: {
-            status: "drawing",
-            illustrationId,
-            svg: "",
-            layers: [],
-            subject: "",
-            message: waiting
-          }
-        };
-      } catch (err) {
-        const message = `Could not reach the drawing service: ${err instanceof Error ? err.message : String(err)}`;
-        return {
-          content: [{ type: "text", text: message }],
-          structuredContent: {
-            status: "error",
-            illustrationId,
-            svg: "",
-            layers: [],
-            subject: "",
-            message
-          }
-        };
       }
-    })
+    )
   );
   void track;
 }
-var STYLES, DRAW_OUTPUT_SCHEMA;
+var REVIEW_OUTPUT_SCHEMA;
 var init_illustration_tools = __esm({
   "../shared/src/mcp/tools/illustration-tools.ts"() {
     "use strict";
     init_shared();
-    STYLES = ["flat", "soft-depth", "glossy"];
-    DRAW_OUTPUT_SCHEMA = {
-      status: z7.enum(["drawing", "ready", "partial", "error"]),
-      illustrationId: z7.string(),
-      /** Present once ready. The complete svg element, ready to paste. */
-      svg: z7.string(),
+    REVIEW_OUTPUT_SCHEMA = {
+      /** Empty when nothing is visibly wrong. */
+      faults: z7.array(z7.string()),
       /** Group ids in paint order, the parts an animation can target. */
       layers: z7.array(z7.string()),
-      subject: z7.string(),
+      /** False when the markup was refused; faults says why. */
+      reviewed: z7.boolean(),
+      /** True when the drawing could not be rendered, so only structure was checked. */
+      unseen: z7.boolean(),
+      /** Pass this back to review the same drawing again without spending another credit. */
+      reviewToken: z7.string(),
       message: z7.string()
     };
   }
@@ -6951,7 +7725,7 @@ function registerAllTools(server, provider, onToolUsage, authContext, options =
   registerPrincipleTools(deps, options);
   registerComprehensionTools(deps);
   registerIconTools(deps);
-  registerDesignSystemTools(deps);
+  registerDesignSystemTools(deps, options);
   registerExtractTools(deps);
   registerIllustrationTools(deps);
   registerPreviewResource(deps);
@@ -6987,14 +7761,18 @@ function createMcpServer(options) {
     version = "3.0.0",
     onToolUsage,
     authContext,
-    enableReactNativeGuide = true
+    enableReactNativeGuide = true,
+    enableThreeJsGuide = true,
+    enableShopifyKit = true
   } = options;
   const server = new McpServer(
     { name, version },
-    { instructions: getMcpInstructions(enableReactNativeGuide) }
+    { instructions: getMcpInstructions({ enableReactNativeGuide, enableThreeJsGuide }) }
   );
   registerAllTools(server, provider, onToolUsage, authContext, {
-    enableReactNativeGuide
+    enableReactNativeGuide,
+    enableThreeJsGuide,
+    enableShopifyKit
   });
   return server;
 }