better-design 0.43.1 → 0.43.2

package/dist/index.js

@@ -332,7 +332,7 @@ var init_constants = __esm({
 For every UI build, run these steps in order, and never present a page that skipped step 2 or 4:
 1. Design system: \`find-design-system\`, then \`get-design-system-kit\`. For a product with a live site, \`extract-from-url\` gives its tokens; an app screen takes only the accent and font from them.
 2. Principles: \`get-ui-principle\` before styling, \`get-ux-principle\` before behavior.
-3. Build.
+3. Build. A product screen sits inside its app shell, with realistic sample data and an app-scale title.
 4. Review: \`get-review-rules\`, \`check-comprehension\` and \`inspect-spacing\`. Fix every critical and serious finding.
 
 Always use the Better Design MCP tools for any frontend, UI, UX, interaction, flow, form, navigation, dialog, error, onboarding, component, styling, article widget, calculator, estimator, converter, generator, quiz, checklist, React Native, Expo, Three.js, Shopify, or sales work, without me having to explicitly ask. For a calculator or article widget, load \`get-widget-guide\`; for React Native or Expo, load task guidance with \`get-react-native-guide\`; for Three.js or React Three Fiber, use \`get-three-js-guide\`; for Shopify Liquid or theme work, use \`get-shopify-guide\`; for sales conversations or assets, use \`get-sales-principle\`. Load visual guidance with \`get-ui-principle\`, load flow guidance with \`get-ux-principle\`, and self-review with \`get-review-rules\` and \`check-comprehension\`. Run \`inspect-spacing\` on rendered DOM evidence. For dashboards, deploy the exact source to a public HTTPS preview; \`finalize-dashboard-review\` must return VALID after Better Design captures it at 390, 1440, and 1728. Start UI builds with \`find-design-system\`. For a custom brand, call \`create-design-system\`, poll \`get-design-system-status\`, and run its React install command in coding hosts; in inline canvases, call \`get-design-system-kit\` with target \`html\` and the generated projectId. For a catalog system, call \`get-design-system-kit\` with target \`react\` in coding hosts or \`html\` in inline canvases. For a Shopify store, load \`get-shopify-guide\`, then call \`get-design-system-kit\` with target \`shopify\`.`;
@@ -1075,7 +1075,7 @@ var MCP_IMPLEMENTATION_VERSION;
 var init_version = __esm({
   "../shared/src/mcp/version.ts"() {
     "use strict";
-    MCP_IMPLEMENTATION_VERSION = "0.43.1";
+    MCP_IMPLEMENTATION_VERSION = "0.43.2";
   }
 });
 
@@ -19264,6 +19264,43 @@ CI runs the same check with \`npx better-design review --base main\`.
   }
 });
 
+// ../shared/src/motion-tokens.ts
+var MOTION_PROFILES;
+var init_motion_tokens = __esm({
+  "../shared/src/motion-tokens.ts"() {
+    "use strict";
+    MOTION_PROFILES = {
+      /** Dense tools, terminals, industrial and brutalist systems. */
+      crisp: {
+        "--transition-duration-fast": "120ms",
+        "--transition-duration-base": "160ms",
+        "--transition-duration-slow": "220ms",
+        "--ease-out": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+        "--ease-in-out": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+        "--ease-in": "cubic-bezier(0.55, 0.085, 0.68, 0.53)"
+      },
+      /** Product UI, and the default for a generated system. */
+      standard: {
+        "--transition-duration-fast": "150ms",
+        "--transition-duration-base": "200ms",
+        "--transition-duration-slow": "280ms",
+        "--ease-out": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+        "--ease-in-out": "cubic-bezier(0.645, 0.045, 0.355, 1)",
+        "--ease-in": "cubic-bezier(0.55, 0.055, 0.675, 0.19)"
+      },
+      /** Luxury, glass and editorial systems. */
+      soft: {
+        "--transition-duration-fast": "180ms",
+        "--transition-duration-base": "240ms",
+        "--transition-duration-slow": "300ms",
+        "--ease-out": "cubic-bezier(0.19, 1, 0.22, 1)",
+        "--ease-in-out": "cubic-bezier(0.77, 0, 0.175, 1)",
+        "--ease-in": "cubic-bezier(0.895, 0.03, 0.685, 0.22)"
+      }
+    };
+  }
+});
+
 // ../shared/src/mcp/html-kit.ts
 function fence(lang, body) {
   return "```" + lang + "\n" + body + "\n```";
@@ -19383,10 +19420,11 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, source, componentKit }) {
 Full live showcase: ${viewUrl}` : ""
   ].join("\n");
 }
-var MINIMUM_TEXT_CONTRAST, HOVER_POLICY, INLINE_TEXT_COLOR_POLICY, HOST_ISOLATION_CSS_TEMPLATE, BESPOKE_ASSET_POLICY, 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, BESPOKE_ASSET_POLICY, INLINE_COMPOSITION_POLICY, INLINE_HIERARCHY_POLICY, KIT_FAST, KIT_EASE, KIT_TIMING, DS_KIT_CSS, DS_KIT_EXAMPLE_HTML, HTML_KIT_CONDUCT_MD;
 var init_html_kit = __esm({
   "../shared/src/mcp/html-kit.ts"() {
     "use strict";
+    init_motion_tokens();
     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 = [
@@ -19427,6 +19465,8 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
       "Labels are a last resort: remove captions that restate an obvious value, do not label the same fact twice, and keep no more than two supporting metadata items around the primary entity.",
       "Bold is selective hierarchy, not decoration: emphasize the primary display, section anchors, and the active value; keep labels, metadata, table headers, and helper copy quieter."
     ].join(" ");
+    ({ "--transition-duration-fast": KIT_FAST, "--ease-out": KIT_EASE } = MOTION_PROFILES.standard);
+    KIT_TIMING = `var(--transition-duration-fast,${KIT_FAST}) var(--ease-out,${KIT_EASE})`;
     DS_KIT_CSS = `*,*::before,*::after{box-sizing:border-box}
 :where(.ds){font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0));line-height:1.5}
 .ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small){color:inherit}
@@ -19444,7 +19484,7 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
 .ds-muted{color:var(--muted-foreground,oklch(0.55 0 0))}
 
 /* Button */
-.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));border:1px solid transparent;cursor:pointer;touch-action:manipulation;transition:opacity .15s,background .15s;text-decoration:none}
+.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));border:1px solid transparent;cursor:pointer;touch-action:manipulation;transition:opacity ${KIT_TIMING},background ${KIT_TIMING};text-decoration:none}
 .ds-btn:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
 .ds-btn:disabled{background:var(--muted,oklch(0.94 0 0));color:var(--foreground,oklch(0.2 0 0));border-color:var(--border,oklch(0.85 0 0));opacity:1;cursor:not-allowed}
 .ds-btn-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));box-shadow:var(--shadow-sm,var(--shadow-xs,none))}
@@ -19457,7 +19497,7 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
 
 /* Form fields */
 .ds-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--foreground,oklch(0.2 0 0))}
-.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-lg,var(--radius,0.5rem));border:1px solid var(--border,oklch(0.85 0 0));background:var(--input,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-inset,var(--shadow-2xs,none));transition:border-color .15s,box-shadow .15s}
+.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-lg,var(--radius,0.5rem));border:1px solid var(--border,oklch(0.85 0 0));background:var(--input,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-inset,var(--shadow-2xs,none));transition:border-color ${KIT_TIMING},box-shadow ${KIT_TIMING}}
 .ds-input::placeholder,.ds-textarea::placeholder{color:var(--muted-foreground,oklch(0.6 0 0))}
 .ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--ring,var(--primary,oklch(0.45 0.15 264)));box-shadow:var(--shadow-inset,0 0 0 0 transparent),0 0 0 2px color-mix(in oklab,var(--ring,var(--primary,oklch(0.45 0.15 264))) 35%,transparent)}
 .ds-textarea{min-height:5rem;resize:vertical}
@@ -19496,9 +19536,9 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
 
 /* Switch */
 .ds-switch{display:inline-flex;align-items:center;gap:.6rem;font-size:.875rem;cursor:pointer}
-.ds-switch-track{width:2.25rem;height:1.25rem;border-radius:999px;background:var(--muted,oklch(0.9 0 0));position:relative;transition:background .15s;flex:none}
+.ds-switch-track{width:2.25rem;height:1.25rem;border-radius:999px;background:var(--muted,oklch(0.9 0 0));position:relative;transition:background ${KIT_TIMING};flex:none}
 .ds-switch-track.on{background:var(--primary,oklch(0.45 0.15 264))}
-.ds-switch-thumb{position:absolute;top:2px;left:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);border-radius:999px;background:var(--background,oklch(1 0 0));box-shadow:var(--shadow-sm,0 1px 2px oklch(0 0 0 / 0.2));transition:transform .15s}
+.ds-switch-thumb{position:absolute;top:2px;left:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);border-radius:999px;background:var(--background,oklch(1 0 0));box-shadow:var(--shadow-sm,0 1px 2px oklch(0 0 0 / 0.2));transition:transform ${KIT_TIMING}}
 .ds-switch-track.on .ds-switch-thumb{transform:translateX(1rem)}
 
 /* Tabs */
@@ -19516,7 +19556,7 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
 .ds-table th{font-weight:600;color:var(--muted-foreground,oklch(0.5 0 0));font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}
 
 /* Chip / keyboard key */
-.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));cursor:pointer;touch-action:manipulation;transition:background-color .12s ease,border-color .12s ease,color .12s ease}
+.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));cursor:pointer;touch-action:manipulation;transition:background-color ${KIT_TIMING},border-color ${KIT_TIMING},color ${KIT_TIMING}}
 .ds-chip:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
 .ds .ds-chip[aria-pressed="true"],.ds .ds-chip[aria-pressed="true"]:hover{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264))}
 .ds-kbd{font-family:var(--font-mono,ui-monospace,monospace);font-size:.75rem;padding:.1rem .4rem;border-radius:var(--radius-sm,4px);border:1px solid var(--border,oklch(0.85 0 0));background:var(--muted,oklch(0.97 0 0));color:var(--foreground,oklch(0.2 0 0))}
@@ -19969,6 +20009,7 @@ function dtcgType(name, value) {
   if (n.includes("radius") || n.includes("spacing") || n.includes("size")) return "dimension";
   if (n.includes("font") || n.includes("family")) return "fontFamily";
   if (n.includes("duration") || n.includes("delay")) return "duration";
+  if (/^cubic-bezier\(/i.test(value.trim())) return "cubicBezier";
   if (toOklch(value) !== null) return "color";
   if (/^-?[\d.]+(px|rem|em|%|vh|vw|ch)$/.test(value.trim())) return "dimension";
   if (/^-?[\d.]+m?s$/.test(value.trim())) return "duration";
@@ -19989,6 +20030,15 @@ function toDuration(value) {
   if (!Number.isFinite(n)) return null;
   return { value: n, unit: m[2]?.toLowerCase() ?? "ms" };
 }
+function toCubicBezier(value) {
+  const m = /^cubic-bezier\(([^)]*)\)$/i.exec(value.trim());
+  if (!m) return null;
+  const points = m[1].split(",").map((part) => part.trim() === "" ? Number.NaN : Number(part));
+  if (points.length !== 4 || !points.every(Number.isFinite)) return null;
+  const [x1, y1, x2, y2] = points;
+  if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1) return null;
+  return [x1, y1, x2, y2];
+}
 function toColor(value) {
   const oklch = toOklch(value);
   if (oklch === null) return null;
@@ -20062,6 +20112,8 @@ function typedValue(type, value) {
       return toDimension(v);
     case "duration":
       return toDuration(v);
+    case "cubicBezier":
+      return toCubicBezier(v);
     case "shadow":
       return toShadow(v);
     case "fontFamily":
@@ -26346,9 +26398,9 @@ var init_build_loop = __esm({
     "use strict";
     BUILD_LOOP = [
       "Required, in this order, before you present any UI:",
-      "1. Design system: install the system you take with `get-design-system-kit`. For a marketing page of a product with a live site, its `extract-from-url` tokens are this step. For a product screen, take only its accent colour and font from `extract-from-url`, never its backgrounds, borders or input styles: those come from the kit.",
+      "1. Design system: install the system you take with `get-design-system-kit`, choosing one whose colour scheme matches the brand's own site: a light site gets a light system. When `extract-from-url` returns both themes, the site follows the visitor's system setting, so ship both and switch them with `prefers-color-scheme`. For a marketing page of a product with a live site, its `extract-from-url` tokens are this step. For a product screen, take only its accent colour and font from `extract-from-url`, never its backgrounds, borders or input styles: those come from the kit.",
       "2. Principles: call `get-ui-principle` before styling and `get-ux-principle` before behavior.",
-      "3. Build with those tokens and principles.",
+      "3. Build with those tokens and principles. A product screen sits inside the product's app shell: navigation with the product's real sections, the current one active, and the workspace or project it belongs to. Show the summary, the records and the selected record's detail together, not behind tabs. Fill it with realistic sample data, including the metrics, IDs and fields a working user would see: sample data in a product screen is not an invented claim. Only claims about the company itself, such as customers, results and endorsements, must stay real. Keep the page title at app scale, the size of a section heading, not a marketing display. Keep each table row on one line: drop or truncate columns instead of wrapping cells.",
       "4. Review: call `get-review-rules`, then `check-comprehension` with the page's real copy, and `inspect-spacing` on the rendered page. Fix every critical and serious finding.",
       "Do not present a page that skipped step 2 or step 4. If a step fails, say which one."
     ].join("\n");
@@ -26629,7 +26681,7 @@ ${formatCatalogMatches(results)}`;
       return `${heading} The catalog search failed, so call \`find-design-system\` with the app description, show the user the top matches, and ask which to start from or whether to go fully custom.`;
     }
   };
-  const MATCH_INSTRUCTIONS = `Keep any already selected design system and its assigned icons; do not reopen that choice unless requested. If none is selected, present these as options, keeping each name as its clickable markdown link (no scores) so they can open the preview. Explain each option's expected buyer fit and trade-offs using known project context; do not claim conversion effects without evidence. Recommend by buyer, never by the product's material or subject (a steel tool does not need a steel-dark UI). For ecommerce and DTC product pages, default to light, warm, photography-led systems unless the brand already owns a dark identity. Ask which to start their brand from, or to go fully custom, then pass the chosen \`id\` as \`baseDesignSystemId\` to create-design-system, or pass \`userConfirmedCustom: true\` if they choose fully custom. If no person is there to answer, as in an unattended run, take the top match yourself, say which one you took and why, and call \`get-design-system-kit\` with its \`id\`.`;
+  const MATCH_INSTRUCTIONS = `Keep any already selected design system and its assigned icons; do not reopen that choice unless requested. If none is selected, present these as options, keeping each name as its clickable markdown link (no scores) so they can open the preview. Explain each option's expected buyer fit and trade-offs using known project context; do not claim conversion effects without evidence. Recommend by buyer, never by the product's material or subject (a steel tool does not need a steel-dark UI). For ecommerce and DTC product pages, default to light, warm, photography-led systems unless the brand already owns a dark identity. Ask which to start their brand from, or to go fully custom, then pass the chosen \`id\` as \`baseDesignSystemId\` to create-design-system, or pass \`userConfirmedCustom: true\` if they choose fully custom. If no person is there to answer, as in an unattended run, take the top match whose colour scheme fits the brand yourself (a dark or two-theme site needs a system with a dark mode), say which one you took and why, and call \`get-design-system-kit\` with its \`id\`.`;
   const makeSearchHandler = (toolName, includeBuildRules = false) => async ({ query }) => {
     const start = Date.now();
     const finish = (response, topResults, isError = false, errorMessage) => {
@@ -28757,15 +28809,24 @@ function authHeaders2(authContext) {
   const bearer = authContext.kind === "api-key" ? authContext.apiKey : authContext.accessToken;
   return { Authorization: `Bearer ${bearer}` };
 }
+function nextStepsFor(themeMode) {
+  return themeMode === "dual" ? `${DUAL_THEME_NOTE}
+
+${NEXT_STEPS}` : NEXT_STEPS;
+}
 function withLoopFirst(summary2) {
-  return Object.assign({ buildInstructions: NEXT_STEPS }, summary2, { buildInstructions: NEXT_STEPS });
+  const steps = nextStepsFor(summary2.themeMode);
+  return Object.assign({ buildInstructions: steps }, summary2, { buildInstructions: steps });
 }
 function fitSheet(text4, maxTokens) {
   if (!maxTokens) return text4;
   return truncateToTokens(text4, Math.max(0, maxTokens - NOTE_TOKENS));
 }
-function withNextSteps(text4) {
-  return `${BUILD_LOOP}
+function withNextSteps(text4, themeMode) {
+  const lead = themeMode === "dual" ? `${DUAL_THEME_NOTE}
+
+` : "";
+  return `${lead}${BUILD_LOOP}
 
 ${text4}
 
@@ -28821,7 +28882,7 @@ Common vendor names (Shopify's --color-button family) are mapped into empty sema
       const result = extractFromSources(all, name);
       const text4 = fitSheet(formatExtraction(result), maxTokens);
       return {
-        content: [{ type: "text", text: withNextSteps(text4) }],
+        content: [{ type: "text", text: withNextSteps(text4, result.themeMode) }],
         structuredContent: withLoopFirst(summarizeExtraction(result))
       };
     })
@@ -28870,13 +28931,13 @@ ${BUILD_LOOP}`
 ${body.markdown}` : body.markdown;
       const text4 = fitSheet(raw, maxTokens);
       return {
-        content: [{ type: "text", text: withNextSteps(text4) }],
+        content: [{ type: "text", text: withNextSteps(text4, body.summary?.themeMode) }],
         ...body.summary && { structuredContent: withLoopFirst(body.summary) }
       };
     })
   );
 }
-var REFERENCE_NOTE, NEXT_STEPS, NOTE_TOKENS;
+var REFERENCE_NOTE, NEXT_STEPS, DUAL_THEME_NOTE, NOTE_TOKENS;
 var init_extract_tools = __esm({
   "../shared/src/mcp/tools/extract-tools.ts"() {
     "use strict";
@@ -28894,6 +28955,7 @@ var init_extract_tools = __esm({
     NEXT_STEPS = `${BUILD_LOOP}
 
 ${REFERENCE_NOTE}`;
+    DUAL_THEME_NOTE = "This site has a light and a dark theme and follows the visitor's system setting. Build both, switched with `prefers-color-scheme`, and choose a design system that has a dark mode.";
     NOTE_TOKENS = Math.ceil(NEXT_STEPS.length / 4) + 1;
   }
 });
@@ -39483,15 +39545,38 @@ function attribute2(attributes2, name) {
   const match = new RegExp(`(?:^|\\s)${name}\\s{0,2}=\\s{0,2}(?:"([^"]*)"|'([^']*)'|([^\\s"']+))`, "i").exec(attributes2);
   return match ? match[1] ?? match[2] ?? match[3] ?? "" : "";
 }
+function wiringReport(targets, refs) {
+  const broken = /* @__PURE__ */ new Map();
+  for (const { control, id } of refs) {
+    const target = targets.get(id);
+    const ok = target !== void 0 && (control.needs === "element" || (control.needs === "popover" ? target.popover : target.tag === "dialog"));
+    if (ok) continue;
+    const ids = broken.get(control.attribute) ?? [];
+    ids.push(id);
+    broken.set(control.attribute, ids);
+  }
+  return [...broken].map(([name, ids]) => ({
+    name,
+    reason: `${ids.length} control(s) point at a missing or wrong target (${ids.slice(0, 3).map((id) => JSON.stringify(id.slice(0, 40))).join(", ")}), so clicking them does nothing`
+  }));
+}
 function partsReport(body, css = "") {
   const rules = classRules(css);
   const padded = (names) => names.some((name) => rules.padded.has(name));
   const bare = /* @__PURE__ */ new Map();
   let loose = 0;
   let card = null;
+  const targets = /* @__PURE__ */ new Map();
+  const refs = [];
   for (const match of body.matchAll(OPENING_TAG)) {
     const tag = match[1].toLowerCase();
     const classes = attribute2(match[2], "class").split(/\s+/);
+    const id = attribute2(match[2], "id");
+    if (id) targets.set(id, { tag, popover: /(?:^|\s)popover(?=[\s=/]|$)/i.test(match[2]) });
+    for (const control of CONTROL_TARGETS) {
+      const target = attribute2(match[2], control.attribute);
+      if (target) refs.push({ control, id: target });
+    }
     if (card) {
       const between2 = body.slice(card.end, match.index);
       const empty = between2.trim().startsWith("</");
@@ -39508,6 +39593,7 @@ function partsReport(body, css = "") {
     name,
     reason: `${count} on the page carry no ds-* class and no class the page styles, so they render as browser defaults`
   }));
+  report.push(...wiringReport(targets, refs));
   if (loose) {
     report.push({
       name: "ds-card",
@@ -39587,7 +39673,7 @@ async function renderPrototypeWithModel(input) {
   const page = pageFromReply({ frame, designSystem: input.designSystem, text: reply2.text, author: provider.model, omitted: prompt.omitted, warnings });
   return { ...page, durationMs, inputTokens: reply2.inputTokens, outputTokens: reply2.outputTokens };
 }
-var unplacedSchema, UNSAFE_BLOCKS, UNSAFE_TAGS, ATTRIBUTE_IN_TAG, COLOUR_PROPERTY, ENTITIES, NATIVE_INPUTS, CONTROLS, CARD_PARTS, OPENING_TAG, MODEL_PAGE_CSP, CONTEXT_CUT_RATIO;
+var unplacedSchema, UNSAFE_BLOCKS, UNSAFE_TAGS, ATTRIBUTE_IN_TAG, COLOUR_PROPERTY, ENTITIES, NATIVE_INPUTS, CONTROLS, CARD_PARTS, OPENING_TAG, CONTROL_TARGETS, MODEL_PAGE_CSP, CONTEXT_CUT_RATIO;
 var init_figma_model = __esm({
   "../shared/src/mcp/figma-model.ts"() {
     "use strict";
@@ -39610,6 +39696,12 @@ var init_figma_model = __esm({
     CONTROLS = /* @__PURE__ */ new Set(["button", "select", "textarea", "input"]);
     CARD_PARTS = ["ds-card-header", "ds-card-body", "ds-card-footer"];
     OPENING_TAG = /<([a-zA-Z][\w-]*)(?![\w-])([^<>]*)>/g;
+    CONTROL_TARGETS = [
+      { attribute: "popovertarget", needs: "popover" },
+      { attribute: "data-dialog-open", needs: "dialog" },
+      { attribute: "data-toggle", needs: "element" },
+      { attribute: "data-toggle-open", needs: "element" }
+    ];
     MODEL_PAGE_CSP = `default-src 'none'; script-src '${PROTOTYPE_RUNTIME_HASH}'; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src data:; form-action 'none'; base-uri 'none'`;
     CONTEXT_CUT_RATIO = 0.5;
   }