better-design 0.43.0 → 0.43.2

package/dist/index.js

@@ -330,9 +330,9 @@ var init_constants = __esm({
     RULE_BODY = `## Better Design
 
 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.
+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.0";
+    MCP_IMPLEMENTATION_VERSION = "0.43.2";
   }
 });
 
@@ -1936,8 +1936,8 @@ ${PRESENTATION_RUNTIME_RULE}
 
 ## Build or modify UI, in order
 ${DESIGN_TRADEOFF_REMINDER}
-Classify: repair, polish, or redesign. Redesign needs planned layout/component changes and before/after at matching desktop/mobile widths. Follow the kit's scope contract.
-1. Design system: keep the selected DS and its icons. Else find-design-system and show ~4 choices (unattended: take the top one); custom brand: create-design-system, poll status. Then get-design-system-kit: "react" with files/terminal, "html" in inline canvases; real components, never runtime @iconify/react. Live brand site: extract-from-url tokens.
+Classify: repair, polish or redesign. Redesign needs layout/component changes and before/after at matching widths. Follow the kit's scope contract.
+1. Design system: keep the selected DS and its icons. Else find-design-system and show ~4 choices (unattended: take the top one); custom brand: create-design-system, poll status. Then get-design-system-kit: "react" with files/terminal, "html" in inline canvases; real components, never runtime @iconify/react. Live site: extract-from-url tokens (app screen: accent, font only).
 2. get-ui-principle before styling; get-ux-principle before behavior.
 3. Build: semantic HTML, keyboard access, WCAG AA.
 4. Review: get-review-rules (copy/AI-tell rules), check-comprehension, inspect-spacing; fix critical/serious findings. Dashboards need a VALID finalize-dashboard-review receipt. No rendered evidence means unverified.
@@ -2529,7 +2529,7 @@ and never leave a \`var(--font-*)\` reference undefined. In the rendered app, aw
 \`document.fonts.ready\`, inspect the computed font-family on the page and a heading,
 and confirm the intended family loaded before presenting the screen.
 
-Hierarchy is pass/fail, not polish. Give the first view one P0 task and at most one P1 summary; move P2 history, standings, detailed metadata, and empty-state chrome below it or behind a tab/disclosure. Unless the user explicitly asks for a dense dashboard, fail and simplify any first view with more than three major regions, five immediately visible actions, or 25 visible text fragments. Do not make density look compact by shrinking everything: the primary display must be at least 1.5\xD7 base UI text, section anchors at least 1.2\xD7, and bold must be reserved for the primary display, section anchors, and active values. Labels are a last resort; remove captions that restate obvious values.
+Hierarchy is pass/fail, not polish. Give the first view one P0 task and at most one P1 summary; move P2 history, standings, detailed metadata, and empty-state chrome below it or behind a tab/disclosure. Unless the screen is a dense tool (traces, logs, tables and dashboards) or the user asked for density, fail and simplify any first view with more than three major regions, five immediately visible actions, or 25 visible text fragments. A dense tool keeps its summary stats, its records and the selected record's detail in one view: order them with hierarchy instead of cutting them. Do not make density look compact by shrinking everything: the primary display must be at least 1.5\xD7 base UI text, section anchors at least 1.2\xD7, and bold must be reserved for the primary display, section anchors, and active values. Labels are a last resort; remove captions that restate obvious values.
 
 Dashboard quality is pass-fail. Start with the domain page title, one supporting line, and one primary action
 in the same header group. Preserve this scan order: metrics \u2192 records \u2192 interpretation.
@@ -18049,7 +18049,7 @@ function resolveCopy(input) {
   return {
     headline: input.headline?.trim() || extracted?.headline || null,
     body: input.body?.length ? input.body : extracted?.body ?? [],
-    actions: input.actions?.length ? input.actions : extracted?.actions ?? [],
+    actions: (input.actions?.length ? input.actions : extracted?.actions ?? []).filter((a) => !NOT_AN_ACTION.test(a.trim())),
     unlabelledControls: extracted?.unlabelledControls ?? 0
   };
 }
@@ -18244,13 +18244,14 @@ function analyzeComprehension(input) {
     }
   };
 }
-var WORD_BOUNDARY_SAFE;
+var WORD_BOUNDARY_SAFE, NOT_AN_ACTION;
 var init_analyze = __esm({
   "../shared/src/mcp/comprehension/analyze.ts"() {
     "use strict";
     init_extract();
     init_lexicon();
     WORD_BOUNDARY_SAFE = /[.*+?^${}()|[\]\\]/g;
+    NOT_AN_ACTION = /^(?:search|filter|sort|all|any)\b/i;
   }
 });
 
@@ -18375,7 +18376,7 @@ Use knownTerms for words your audience genuinely knows, so the check stops flagg
         screen: z13.string().trim().min(1).max(120).describe("What this screen is, e.g. 'lesson end card', 'billing page'."),
         headline: z13.string().trim().max(300).optional().describe("The screen's title, if you are passing copy rather than markup."),
         body: z13.array(z13.string().trim().min(1).max(2e3)).max(50).optional().describe("Supporting copy, one string per visible line or paragraph."),
-        actions: z13.array(z13.string().trim().min(1).max(120)).max(20).optional().describe("Visible button and link labels, e.g. ['Claim badge', 'Not now']."),
+        actions: z13.array(z13.string().trim().min(1).max(120)).max(20).optional().describe("Visible button and link labels, e.g. ['Claim badge', 'Not now']. Search fields, filters and selects are not actions."),
         code: z13.string().max(6e4).optional().describe("JSX, TSX or HTML for the screen. Copy is extracted from it when headline/body/actions are omitted."),
         knownTerms: z13.array(z13.string().trim().min(1).max(60)).max(50).optional().describe("Words this audience already knows, so they are not flagged as insider language."),
         surface: z13.enum(["screen", "slide"]).optional().describe('"slide" adds the slide density test and withholds a pass until a screenshot review. Defaults to "slide" when the screen name says slide, deck or presentation.'),
@@ -19140,8 +19141,8 @@ align in a column.
 
 **Hierarchy is pass/fail.** Give the first view one P0 task and at most one P1
 summary; move P2 history, standings, detailed metadata, and empty-state chrome
-below it or behind a tab/disclosure. Unless the user explicitly asks for a dense
-dashboard, simplify any first view with more than three major regions, five
+below it or behind a tab/disclosure. Unless the screen is a dense tool (traces, logs,
+tables and dashboards) or the user asked for density, simplify any first view with more than three major regions, five
 immediately visible actions, or 25 visible text fragments. Do not shrink everything
 to make it fit: the primary display must be at least 1.5\xD7 base UI text, section
 anchors at least 1.2\xD7, and labels are a last resort. Reserve bold for the primary
@@ -19263,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```";
@@ -19382,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 = [
@@ -19421,11 +19460,13 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
     ].join(" ");
     INLINE_HIERARCHY_POLICY = [
       "Give the first view one P0 task and at most one P1 summary; move P2 history, standings, detailed metadata, and empty-state chrome below the first view or behind a tab or disclosure.",
-      "At the actual inline-canvas size, the first view fails when it exposes more than three major regions, more than five immediately visible actions, or more than 25 visible text fragments unless the user explicitly asked for a dense dashboard.",
+      "At the actual inline-canvas size, the first view fails when it exposes more than three major regions, more than five immediately visible actions, or more than 25 visible text fragments unless the screen is a dense tool (traces, logs, tables and dashboards) or the user asked for density.",
       "Do not make a busy screen feel compact by shrinking everything. Use `ds-display` only inside the one P0 composition: once for a single primary task or value, or on co-equal peers within the same event, such as opposing teams. It must compute to at least 1.5\xD7 the base UI text. Use `ds-section-title` for scan anchors at at least 1.2\xD7 the base UI text, and `ds-supporting` for genuinely secondary copy.",
       "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}
@@ -19443,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))}
@@ -19456,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}
@@ -19495,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 */
@@ -19515,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))}
@@ -19567,7 +19608,7 @@ APP_ROOT :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-
       "2. Wrap the entire artifact in `.ds` and use the kit's `ds-*` classes for component styling. Custom CSS is layout-only; do not replace the selected system's components, tokens, states, radii or shadows.",
       '3. This class contract is pass/fail: do not rename `ds-*` to an app-specific prefix. Before presenting, inspect the artifact source. If it does not contain a root `class="ds"` and `ds-*` component classes, revise the artifact instead of presenting it.',
       "4. Paste `hostIsolationCssTemplate` after host/base CSS, replacing `APP_ROOT` with the real root. Follow `textColorPolicy`: never use surface tokens as text colors, never dim text with opacity, and use `--muted-foreground` for secondary copy.",
-      "5. First-view hierarchy is pass/fail: one P0 task, at most one P1 summary; unless a dense dashboard was requested, no more than three major regions, five immediately visible actions, or 25 visible text fragments.",
+      "5. First-view hierarchy is pass/fail: one P0 task, at most one P1 summary; unless the screen is a dense tool (traces, logs, tables and dashboards) or density was requested, no more than three major regions, five immediately visible actions, or 25 visible text fragments.",
       "6. Composition is pass/fail: one identity, content-sized task, aligned field/action, accurate paired assets, and event-only decoration.",
       "",
       "## Before you show it (mandatory)",
@@ -19968,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";
@@ -19988,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;
@@ -20061,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":
@@ -26345,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`. If the product already has a live site, its `extract-from-url` tokens are this step.",
+      "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");
@@ -26628,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) => {
@@ -28683,7 +28736,7 @@ function extractFromSources(sources, name) {
       Object.assign(light, parsed.light);
       Object.assign(dark, parsed.dark);
     } else if (kind === "computed") {
-      Object.assign(light, computedToVars(source.content));
+      Object.assign(source.scheme === "dark" ? dark : light, computedToVars(source.content));
     } else {
       Object.assign(light, tokensToVars(source.content));
     }
@@ -28756,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}
 
@@ -28820,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))
       };
     })
@@ -28869,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";
@@ -28893,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;
   }
 });
@@ -39482,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("</");
@@ -39507,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",
@@ -39515,11 +39602,17 @@ function partsReport(body, css = "") {
   }
   return report;
 }
+function kitVariantsAfter(componentCss) {
+  return DS_KIT_CSS.split("\n").filter((line2) => {
+    const variant = /^\.(ds-[a-z]+-[a-z0-9-]+)\{/.exec(line2)?.[1];
+    return variant !== void 0 && !componentCss.includes(`.${variant}`);
+  }).join("\n");
+}
 function modelPrototypeDocument(input) {
   const { system } = input;
   const css = input.css.replace(/</g, "");
   const body = withoutUnsafeMarkup(input.body);
-  const kitCss = [compactTokensCss(system.tokensCss), DS_KIT_CSS, system.componentCss].filter(Boolean).join("\n");
+  const kitCss = [compactTokensCss(system.tokensCss), DS_KIT_CSS, system.componentCss, system.componentCss ? kitVariantsAfter(system.componentCss) : ""].filter(Boolean).join("\n");
   return [
     "<!doctype html>",
     '<html lang="en">',
@@ -39580,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";
@@ -39603,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;
   }