better-design 0.43.0 → 0.43.1

package/dist/index.js

@@ -330,7 +330,7 @@ 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.
 4. Review: \`get-review-rules\`, \`check-comprehension\` and \`inspect-spacing\`. Fix every critical and serious finding.
@@ -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.1";
   }
 });
 
@@ -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
@@ -19421,7 +19422,7 @@ 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."
@@ -19567,7 +19568,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)",
@@ -26345,7 +26346,7 @@ 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`. 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.",
       "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.",
@@ -28683,7 +28684,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));
     }
@@ -39515,11 +39516,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">',