@ggui-ai/ui-gen 0.16.0 → 0.18.0

package/dist/evaluation/index.js

@@ -1,4 +1,4 @@
-import { mkdirSync, writeFileSync, unlinkSync, existsSync, rm, createReadStream, createWriteStream } from 'fs';
+import { readFileSync, readdirSync, statSync, mkdirSync, writeFileSync, unlinkSync, existsSync, rm, createReadStream, createWriteStream } from 'fs';
 import 'fs/promises';
 import { tmpdir } from 'os';
 import { resolve, dirname, join, basename } from 'path';
@@ -9,9 +9,12 @@ import { fileURLToPath } from 'url';
 import { query, createSdkMcpServer, tool } from '@anthropic-ai/claude-agent-sdk';
 import Anthropic from '@anthropic-ai/sdk';
 import { z } from 'zod';
-import { listContractGadgets, HOOK_NAME_RE, STDLIB_GADGETS_PACKAGE } from '@ggui-ai/protocol';
+import { LUCIDE_ICON_NAMES } from '@ggui-ai/design';
+import { listContractGadgets, HOOK_NAME_RE, STDLIB_GADGETS_PACKAGE, APP_GENERATION_PROFILE_BOUNDS } from '@ggui-ai/protocol';
+import { createHash } from 'crypto';
 import { build } from 'esbuild';
-import { getCssTokens } from '@ggui-ai/design/rendering';
+import { getCssTokens, composeThemeCss, fillFitRule } from '@ggui-ai/design/rendering';
+import { createRequire } from 'module';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1404,8 +1407,8 @@ var require_streamx = __commonJS({
             return this;
           },
           next() {
-            return new Promise(function(resolve2, reject) {
-              promiseResolve = resolve2;
+            return new Promise(function(resolve3, reject) {
+              promiseResolve = resolve3;
               promiseReject = reject;
               const data = stream.read();
               if (data !== null) ondata(data);
@@ -1438,11 +1441,11 @@ var require_streamx = __commonJS({
         }
         function destroy(err) {
           stream.destroy(err);
-          return new Promise((resolve2, reject) => {
-            if (stream._duplexState & DESTROYED) return resolve2({ value: void 0, done: true });
+          return new Promise((resolve3, reject) => {
+            if (stream._duplexState & DESTROYED) return resolve3({ value: void 0, done: true });
             stream.once("close", function() {
               if (err) reject(err);
-              else resolve2({ value: void 0, done: true });
+              else resolve3({ value: void 0, done: true });
             });
           });
         }
@@ -1486,8 +1489,8 @@ var require_streamx = __commonJS({
         const writes = pending + (ws._duplexState & WRITE_WRITING ? 1 : 0);
         if (writes === 0) return Promise.resolve(true);
         if (state.drains === null) state.drains = [];
-        return new Promise((resolve2) => {
-          state.drains.push({ writes, resolve: resolve2 });
+        return new Promise((resolve3) => {
+          state.drains.push({ writes, resolve: resolve3 });
         });
       }
       write(data) {
@@ -1592,10 +1595,10 @@ var require_streamx = __commonJS({
       cb(null);
     }
     function pipelinePromise(...streams) {
-      return new Promise((resolve2, reject) => {
+      return new Promise((resolve3, reject) => {
         return pipeline2(...streams, (err) => {
           if (err) return reject(err);
-          resolve2();
+          resolve3();
         });
       });
     }
@@ -2253,16 +2256,16 @@ var require_extract = __commonJS({
           entryCallback = null;
           cb(err);
         }
-        function onnext(resolve2, reject) {
+        function onnext(resolve3, reject) {
           if (error) {
             return reject(error);
           }
           if (entryStream) {
-            resolve2({ value: entryStream, done: false });
+            resolve3({ value: entryStream, done: false });
             entryStream = null;
             return;
           }
-          promiseResolve = resolve2;
+          promiseResolve = resolve3;
           promiseReject = reject;
           consumeCallback(null);
           if (extract3._finished && promiseResolve) {
@@ -2290,11 +2293,11 @@ var require_extract = __commonJS({
         function destroy(err) {
           extract3.destroy(err);
           consumeCallback(err);
-          return new Promise((resolve2, reject) => {
-            if (extract3.destroyed) return resolve2({ value: void 0, done: true });
+          return new Promise((resolve3, reject) => {
+            if (extract3.destroyed) return resolve3({ value: void 0, done: true });
             extract3.once("close", function() {
               if (err) reject(err);
-              else resolve2({ value: void 0, done: true });
+              else resolve3({ value: void 0, done: true });
             });
           });
         }
@@ -3190,9 +3193,9 @@ var init_helper = __esm({
       try {
         await pipeline(Readable.fromWeb(response.body), (0, import_tar_fs.extract)(destDir));
       } catch (error) {
-        await new Promise((resolve2) => {
+        await new Promise((resolve3) => {
           rm(destDir, { force: true, recursive: true }, () => {
-            resolve2();
+            resolve3();
           });
         });
         throw error;
@@ -3211,14 +3214,14 @@ var init_lambdafs = __esm({
     GZIP_EXTENSION_REGEX = /gz$/i;
     inflate = (filePath) => {
       const output = filePath.includes("swiftshader") ? tmpdir() : join(tmpdir(), basename(filePath).replace(ARCHIVE_EXTENSION_REGEX, ""));
-      return new Promise((resolve2, reject) => {
+      return new Promise((resolve3, reject) => {
         if (filePath.includes("swiftshader")) {
           if (existsSync(`${output}/libGLESv2.so`)) {
-            resolve2(output);
+            resolve3(output);
             return;
           }
         } else if (existsSync(output)) {
-          resolve2(output);
+          resolve3(output);
           return;
         }
         const isBrotli = BROTLI_EXTENSION_REGEX.test(filePath);
@@ -3234,12 +3237,12 @@ var init_lambdafs = __esm({
         if (isTar) {
           target = (0, import_tar_fs2.extract)(output);
           target.once("finish", () => {
-            resolve2(output);
+            resolve3(output);
           });
         } else {
           target = createWriteStream(output, { mode: 448 });
           target.once("close", () => {
-            resolve2(output);
+            resolve3(output);
           });
         }
         target.once("error", handleError);
@@ -3818,7 +3821,7 @@ function extractRetryAfterSec(e) {
   return Number.isFinite(parsed) && parsed >= 0 ? Math.floor(parsed) : void 0;
 }
 function sleep(ms) {
-  return new Promise((resolve2) => setTimeout(resolve2, ms));
+  return new Promise((resolve3) => setTimeout(resolve3, ms));
 }
 var MAX_RETRY_ATTEMPTS = 2;
 var RETRY_AFTER_CAP_SEC = 15;
@@ -5555,6 +5558,9 @@ function mkIssue(subcategory, description, fix, result = "fail") {
 function cap(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
+function axisCheckTraceEnabled() {
+  return process.env["GGUI_AXIS_CHECK_TRACE"] === "1";
+}
 
 // src/evaluation/axis-checks/checks/universal.ts
 var ALL_RENDER_VALUES = [
@@ -5658,7 +5664,222 @@ function runPropSeedNoResync(input) {
   }
   return issues;
 }
+var KNOWN_ICON_KEYS = new Set(
+  LUCIDE_ICON_NAMES.map((n) => n.replace(/[-_]/g, "").toLowerCase())
+);
+function isKnownIconName(name) {
+  return KNOWN_ICON_KEYS.has(name.replace(/[-_]/g, "").toLowerCase());
+}
+var ICON_NAME_LITERAL_RX = /<Icon\b[^>]*?\bname\s*=\s*(?:"([^"]*)"|'([^']*)'|\{\s*"([^"]*)"\s*\}|\{\s*'([^']*)'\s*\})/g;
+function findUnknownIconNames(sourceCode) {
+  const unknown = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(ICON_NAME_LITERAL_RX)) {
+    const name = m[1] ?? m[2] ?? m[3] ?? m[4] ?? "";
+    if (name.length === 0) continue;
+    if (/[^\x20-\x7e]/.test(name)) continue;
+    if (!isKnownIconName(name)) unknown.add(name);
+  }
+  return [...unknown];
+}
+function runIconNameKnown(input) {
+  if (input.compiledCode === null) return [];
+  const unknown = findUnknownIconNames(input.sourceCode);
+  if (unknown.length === 0) return [];
+  const list = unknown.map((n) => `"${n}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.icon_name_known",
+      `<Icon name=\u2026> uses ${unknown.length} name(s) outside the design system's Lucide subset: ${list} \u2014 an unknown name renders an empty box.`,
+      "Call get_available_icons and pick a listed name (kebab-case), or use an emoji directly."
+    )
+  ];
+}
+var LADDER_STOP_AS_TEXT_RX = /(?<![\w-])color\s*(?:=\s*\{?\s*|:\s*)["'`]?\s*var\(--ggui-color-primary-(\d{2,3})\s*[,)]/g;
+var TEXT_INK_STOP_MIN = 300;
+var TEXT_INK_STOP_MAX = 600;
+function findLadderStopsAsText(sourceCode) {
+  const found = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(LADDER_STOP_AS_TEXT_RX)) {
+    const digits = m[1] ?? "";
+    const stop = Number(digits);
+    if (stop >= TEXT_INK_STOP_MIN && stop <= TEXT_INK_STOP_MAX) found.add(`primary-${digits}`);
+  }
+  return [...found];
+}
+function runAccentTextInk(input) {
+  if (input.compiledCode === null) return [];
+  const stops = findLadderStopsAsText(input.sourceCode);
+  if (stops.length === 0) return [];
+  const list = stops.map((s) => `\`${s}\``).join(", ");
+  return [
+    mkIssue(
+      "universal.accent_text_ink",
+      `Text is painted with a brand-ladder fill stop as its color (${list}) \u2014 on a low-saturation brand these stops are mid-grey on the surface and the text fails readability.`,
+      'Accent text (eyebrows, taglines, links, labels, inline arrows) takes var(--ggui-color-link) or <Text tone="emphasized">; body text takes var(--ggui-color-onContainer); keep primary-* stops on fills and borders.'
+    )
+  ];
+}
+var SCOPED_SURFACE_TAG_RX = /<(Card|Box)\b([^<>]*?)surface\s*=\s*["'](inverted|hero)["']([^<>]*?)>/g;
+var STYLE_BACKGROUND_RX = /\bstyle\s*=\s*\{\{[^}]*\b(background|backgroundColor|backgroundImage)\s*:/;
+function findScopedSurfaceBackgrounds(sourceCode) {
+  const hits = [];
+  for (const m of sourceCode.matchAll(SCOPED_SURFACE_TAG_RX)) {
+    const attrs = `${m[2] ?? ""} ${m[4] ?? ""}`;
+    if (STYLE_BACKGROUND_RX.test(attrs)) hits.push([m[1] ?? "", m[3] ?? ""]);
+  }
+  return hits;
+}
+function runScopedSurfaceOwnsGround(input) {
+  if (input.compiledCode === null) return [];
+  if (input.designMode === "free") return [];
+  const hits = findScopedSurfaceBackgrounds(input.sourceCode);
+  if (hits.length === 0) return [];
+  const [tag, surface] = hits[0];
+  return [
+    mkIssue(
+      "universal.scoped_surface_owns_ground",
+      `<${tag} surface="${surface}"> sets its own background in style \u2014 a scoped surface owns its ground; repainting it puts the scope's swapped inks over the wrong ground (ink on ink).`,
+      `Remove the background from that ${tag}'s style \u2014 surface="${surface}" paints the ground; pick another surface if a different ground is wanted.`
+    )
+  ];
+}
+var CAPS_TEXT_RX = /<Text\b(?=[^>]*\bcaps\b)[^>]*>([\s\S]*?)<\/Text>/g;
+function findInventedCapsLabels(sourceCode) {
+  const out = [];
+  for (const m of sourceCode.matchAll(CAPS_TEXT_RX)) {
+    const inner = (m[1] ?? "").trim();
+    if (inner.length === 0) continue;
+    if (inner.includes("{")) continue;
+    out.push(inner.replace(/\s+/g, " ").slice(0, 60));
+  }
+  return out;
+}
+function runCapsLabelInvented(input) {
+  if (input.compiledCode === null) return [];
+  const invented = findInventedCapsLabels(input.sourceCode);
+  if (invented.length === 0) return [];
+  const list = invented.map((t) => `"${t}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.caps_label_invented",
+      `${invented.length} caps label(s) carry invented copy the props do not supply: ${list} \u2014 an eyebrow, kicker or overline the agent cannot change is chatter on every render.`,
+      "Remove the label, or bind its text to a prop (`<Text caps>{props.section}</Text>`); copy comes from the contract, never from the component."
+    )
+  ];
+}
+var VIEWPORT_UNIT = String.raw`(?:calc\(\s*)?100(?:vh|dvh|svh|lvh)\b(?:[^)"'\x60;\n]*\))?`;
+var VIEWPORT_STYLE_OBJECT_RX = new RegExp(
+  String.raw`\b(?:minHeight|height|minBlockSize|blockSize)\s*:\s*["'\x60]\s*${VIEWPORT_UNIT}["'\x60]?`,
+  "g"
+);
+var VIEWPORT_CSS_RX = new RegExp(
+  String.raw`(?<![\w-])(?:min-)?(?:height|block-size)\s*:\s*${VIEWPORT_UNIT}`,
+  "g"
+);
+var VIEWPORT_CLASS_RX = /(?<![\w-])(?:min-)?h-(?:screen|dvh|svh|lvh)\b/g;
+function findViewportSizing(sourceCode) {
+  const hits = [];
+  for (const rx of [VIEWPORT_STYLE_OBJECT_RX, VIEWPORT_CSS_RX, VIEWPORT_CLASS_RX]) {
+    for (const m of sourceCode.matchAll(rx)) {
+      hits.push({ at: m.index ?? 0, text: m[0].replace(/\s+/g, " ").trim().slice(0, 60) });
+    }
+  }
+  return hits.sort((a, b) => a.at - b.at).map((h) => h.text);
+}
+function runViewportSized(input) {
+  if (input.compiledCode === null) return [];
+  const sized = findViewportSizing(input.sourceCode);
+  if (sized.length === 0) return [];
+  const list = sized.map((t) => "`" + t + "`").join(", ");
+  return [
+    mkIssue(
+      "universal.viewport_sized",
+      `${sized.length} element(s) are sized to the viewport: ${list} \u2014 the frame owns the height; a content-sized frame is measured from the content, so a viewport-sized root never shrinks and grows the frame on every re-measure.`,
+      "Remove the viewport height \u2014 size to content, never to the viewport. Under fullscreen the frame stretches your root already (centre inside it with `display: flex; flex-direction: column; justify-content: center`); to fill a parent that has a height use `height: 100%` or `flex: 1`."
+    )
+  ];
+}
+var TERMINAL_WORDS = /* @__PURE__ */ new Set([
+  "submit",
+  "confirm",
+  "approve",
+  "schedule",
+  "reserve",
+  "book",
+  "pay",
+  "checkout",
+  "purchase",
+  "order"
+]);
+var TERMINAL_LABEL_RX = /\b(submit|confirm|approve|schedule|reserve|book|pay|checkout|purchase|place\s+order)\b/i;
+var GUARD_RX = /\b(disabled|aria-disabled)\s*=/;
+function nameWords(name) {
+  return name.split(/(?=[A-Z])|[_\-\s]+/).map((w) => w.toLowerCase()).filter((w) => w.length > 0);
+}
+function findUnguardedTerminalControls(sourceCode) {
+  if (GUARD_RX.test(sourceCode)) return [];
+  const names = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(/useAction(?:<[^>]*>)?\(\s*['"`]([^'"`]+)['"`]/g)) {
+    const name = m[1] ?? "";
+    if (nameWords(name).some((w) => TERMINAL_WORDS.has(w))) names.add(name);
+  }
+  for (const m of sourceCode.matchAll(/>([^<>{}]{1,60})<\/Button>/g)) {
+    const label = (m[1] ?? "").replace(/\s+/g, " ").trim();
+    if (label.length > 0 && TERMINAL_LABEL_RX.test(label)) names.add(label.slice(0, 40));
+  }
+  return [...names];
+}
+function runTerminalActionUnguarded(input) {
+  if (input.compiledCode === null) return [];
+  const found = findUnguardedTerminalControls(input.sourceCode);
+  if (found.length === 0) return [];
+  const list = found.map((t) => `"${t}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.terminal_action_unguarded",
+      `${list} reads as an action the user means once, and nothing in this component disables the control after it fires \u2014 a double-click sends it twice.`,
+      'Hold the fired state (`const [submitted, setSubmitted] = useState(false)`), set it in the handler, and pass `disabled={submitted}` to that control with a word that says so ("Submitted"). If the action IS meant to repeat \u2014 sending a message, adding an item \u2014 leave it armed and ignore this.',
+      "warn"
+    )
+  ];
+}
 var UNIVERSAL_CHECKS = [
+  {
+    id: "universal.icon_name_known",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runIconNameKnown
+  },
+  {
+    id: "universal.caps_label_invented",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runCapsLabelInvented
+  },
+  {
+    id: "universal.viewport_sized",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runViewportSized
+  },
+  {
+    id: "universal.terminal_action_unguarded",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runTerminalActionUnguarded
+  },
+  {
+    id: "universal.accent_text_ink",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runAccentTextInk
+  },
+  {
+    id: "universal.scoped_surface_owns_ground",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runScopedSurfaceOwnsGround
+  },
   {
     id: "universal.prop_coverage",
     axis: "render",
@@ -6461,6 +6682,87 @@ var TOOLING_CHECKS = [
   }
 ];
 
+// src/evaluation/axis-checks/checks/grid.ts
+var BOARD_PROP_RX = /^(columns?|lanes?|stages?|lists?|buckets?|swimlanes?)$/i;
+var BOARD_PROMPT_RX = /\b(kanban|board)\b/i;
+var BOARD_NAMES = ["columns", "lanes", "stages", "lists", "buckets", "swimlanes"];
+var LAYOUT_TAG_RX = /<(\/?)(Grid|Row|Stack|Card|Box|Container|ScrollArea|div|section)\b([^<>]*?)>/g;
+var SIDE_BY_SIDE = /* @__PURE__ */ new Set(["Grid", "Row"]);
+function boardPropNames(contract) {
+  const propsField = contract?.propsSpec;
+  const properties = propsField?.properties ?? {};
+  return Object.entries(properties).filter(([name, p]) => BOARD_PROP_RX.test(name) && (p?.type === "array" || p?.schema?.type === "array")).map(([name]) => name);
+}
+function jsxMapPositions(sourceCode, name) {
+  const rx = new RegExp(
+    `\\b${name}(?:\\?\\.)?\\.map\\(\\s*\\(?\\s*\\w+(?:\\s*,\\s*\\w+)?\\s*\\)?\\s*=>\\s*(?:\\(?\\s*<|\\{[^{}]{0,600}?\\breturn\\s*\\(?\\s*<)`,
+    "g"
+  );
+  return [...sourceCode.matchAll(rx)].map((m) => m.index ?? 0);
+}
+function enclosingLayoutTag(sourceCode, pos) {
+  const stack = [];
+  for (const m of sourceCode.slice(0, pos).matchAll(LAYOUT_TAG_RX)) {
+    const closing = m[1] === "/";
+    const name = m[2] ?? "";
+    const attrs = m[3] ?? "";
+    if (closing) {
+      if (stack[stack.length - 1] === name) stack.pop();
+      continue;
+    }
+    if (attrs.trimEnd().endsWith("/")) continue;
+    stack.push(name);
+  }
+  return stack[stack.length - 1];
+}
+function describeBoardRead(input) {
+  const declared = boardPropNames(input.contract);
+  const names = declared.length > 0 ? declared : BOARD_PROMPT_RX.test(input.originalPrompt) ? [...BOARD_NAMES] : BOARD_NAMES.filter((n) => jsxMapPositions(input.sourceCode, n).length > 0);
+  const perName = names.map((name) => {
+    const positions = jsxMapPositions(input.sourceCode, name);
+    return { name, maps: positions.length, enclosing: positions.map((pos) => enclosingLayoutTag(input.sourceCode, pos) ?? "nothing") };
+  });
+  return { declared, names, perName };
+}
+function findStackedBoardColumns(input) {
+  const stacked = [];
+  for (const { name, enclosing } of describeBoardRead(input).perName) {
+    for (const tag of enclosing) if (!SIDE_BY_SIDE.has(tag)) stacked.push([name, tag]);
+  }
+  return stacked;
+}
+function runBoardColumnsSideBySide(input) {
+  if (input.compiledCode === null) return [];
+  const standDown = input.designMode === "free";
+  const stacked = standDown ? [] : findStackedBoardColumns(input);
+  if (axisCheckTraceEnabled()) {
+    const line = {
+      ...describeBoardRead(input),
+      designMode: input.designMode ?? "constrained",
+      standDown,
+      result: standDown ? "stand-down" : stacked.length > 0 ? "fail" : "pass"
+    };
+    console.log(JSON.stringify({ boardColumnsTrace: line }));
+  }
+  if (stacked.length === 0) return [];
+  const [name, tag] = stacked[0];
+  return [
+    mkIssue(
+      "grid.board_columns_side_by_side",
+      `The board's \`${name}\` are composed under <${tag}> \u2014 a vertical stack of column sections; at md and wider the columns must sit side by side.`,
+      `Wrap the ${name} map in <Grid columns={{ base: 1, md: ${name}.length }} gap="md"> (each column its own <Stack> of cards); never a <Stack> of column sections.`
+    )
+  ];
+}
+var GRID_CHECKS = [
+  {
+    id: "grid.board_columns_side_by_side",
+    axis: "render",
+    values: ["grid"],
+    run: runBoardColumnsSideBySide
+  }
+];
+
 // src/evaluation/axis-checks/extras.ts
 function mkIssue2(subcategory, description, fix, result = "warn") {
   return { tier: 0, result, category: "mode", subcategory, description, fix };
@@ -6600,29 +6902,164 @@ var REGISTRY = [
   ...WRITES_CHECKS,
   ...STATE_PAYLOAD_CHECKS,
   ...TOOLING_CHECKS,
+  ...GRID_CHECKS,
   ...EXTRA_CHECKS
 ];
-
-// src/evaluation/axis-checks/dispatch.ts
 function runAxisChecks(classification, input) {
-  if (input.compiledCode === null) return [];
-  const axisInput = {
+  const facts = {
     sourceCode: input.sourceCode,
-    compiledCode: input.compiledCode,
     ...input.contract !== void 0 ? { contract: input.contract } : {},
     originalPrompt: input.originalPrompt,
     classification,
     ...input.designMode !== void 0 ? { designMode: input.designMode } : {}
   };
+  if (input.compiledCode === null) {
+    traceAxisChecksSkipped(facts, "compiledCode null \u2014 no check ran");
+    return [];
+  }
+  const axisInput = { ...facts, compiledCode: input.compiledCode };
+  return runGatedAxisChecks(
+    REGISTRY.filter((check) => matches(classification.vector, check)),
+    axisInput
+  ).issues;
+}
+function runGatedAxisChecks(checks, input) {
   const issues = [];
-  const firedIds = /* @__PURE__ */ new Set();
-  for (const check of REGISTRY) {
-    if (!matches(classification.vector, check)) continue;
-    if (firedIds.has(check.id)) continue;
-    firedIds.add(check.id);
-    issues.push(...check.run(axisInput));
+  const firedIds = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const check of checks) {
+    if (seen.has(check.id)) continue;
+    seen.add(check.id);
+    firedIds.push(check.id);
+    issues.push(...check.run(input));
+  }
+  if (axisCheckTraceEnabled()) {
+    const line = {
+      ...traceFacts(input),
+      matched: [...firedIds],
+      issues: issues.map((i) => ({ id: i.subcategory ?? i.category, result: i.result }))
+    };
+    console.log(JSON.stringify({ axisCheckTrace: line }));
   }
-  return issues;
+  return { issues, firedIds };
+}
+function traceAxisChecksSkipped(facts, note) {
+  if (!axisCheckTraceEnabled()) return;
+  const line = { ...traceFacts(facts), matched: [], issues: [], note };
+  console.log(JSON.stringify({ axisCheckTrace: line }));
+}
+function traceFacts(input) {
+  const propsSpec = input.contract?.propsSpec;
+  return {
+    sourceSha256: createHash("sha256").update(input.sourceCode, "utf8").digest("hex"),
+    originalPrompt: input.originalPrompt,
+    designMode: input.designMode ?? "constrained",
+    classification: input.classification.vector,
+    propsSpecKeys: Object.keys(propsSpec ?? {}),
+    propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {})
+  };
+}
+var STYLING_PROFILE_TRUNCATION_MARKER = " \u2026[truncated at the profile bound]";
+var STYLING_PROFILE_JUDGE_FRAME = `The app's operator declared the styling profile below. Judge visual treatment RELATIVE to it \u2014 a dense profile is not "cramped", a flat one is not "unpolished", a sparse one is not "empty", and a directed composition is not missing what its Direction leaves out; completeness, hierarchy, accessibility and correctness are unchanged by it.`;
+var AESTHETIC_BRIEF_MAX_CHARS = 2e3;
+function sanitizeProfileMember(text, member) {
+  return sanitizeProfileText(text, APP_GENERATION_PROFILE_BOUNDS[member]);
+}
+function sanitizeProfileText(text, bound) {
+  if (typeof text !== "string") return "";
+  const lines = [];
+  let inFence = false;
+  for (const raw of text.split(/\r?\n/)) {
+    const line = raw.replace(/[ \t]+/g, " ").trim();
+    if (line.startsWith("```")) {
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence || line.length === 0 || line.startsWith("#")) continue;
+    lines.push(line);
+  }
+  let out = lines.join("\n").replace(/`/g, "");
+  if (out.length > bound) out = out.slice(0, bound) + STYLING_PROFILE_TRUNCATION_MARKER;
+  return out;
+}
+function aestheticRefLabel(profile) {
+  const ref = profile?.aesthetic;
+  if (ref === void 0 || sanitizeProfileText(profile?.aestheticBrief, AESTHETIC_BRIEF_MAX_CHARS).length === 0) return "";
+  return ref.version !== void 0 ? `${ref.id}@${ref.version}` : ref.id;
+}
+function sanitizeProfile(profile) {
+  const aestheticRef = aestheticRefLabel(profile);
+  return {
+    styling: sanitizeProfileMember(profile?.styling, "styling"),
+    density: sanitizeProfileMember(profile?.density, "density"),
+    layout: sanitizeProfileMember(profile?.layout, "layout"),
+    direction: sanitizeProfileMember(profile?.direction, "direction"),
+    aesthetic: aestheticRef.length > 0 ? sanitizeProfileText(profile?.aestheticBrief, AESTHETIC_BRIEF_MAX_CHARS) : "",
+    aestheticRef
+  };
+}
+function renderProfileQuote(profile) {
+  const p = sanitizeProfile(profile);
+  const parts = [];
+  if (p.styling.length > 0) parts.push(p.styling.split("\n").map((line) => `> ${line}`).join("\n"));
+  if (p.density.length > 0) parts.push(`> **Density**: ${p.density}`);
+  if (p.layout.length > 0) parts.push(`> **Layout**: ${p.layout}`);
+  if (p.direction.length > 0) parts.push(`> **Direction**: ${p.direction}`);
+  if (p.aesthetic.length > 0) {
+    const [first, ...rest] = p.aesthetic.split("\n");
+    parts.push([`> **Aesthetic** (\`${p.aestheticRef}\`): ${first ?? ""}`, ...rest.map((line) => `> ${line}`)].join("\n"));
+  }
+  return parts.join("\n>\n");
+}
+function buildStylingProfileJudgeBlock(profile) {
+  const quote = renderProfileQuote(profile);
+  if (quote.length === 0) return "";
+  return ["## Declared styling profile", "", STYLING_PROFILE_JUDGE_FRAME, "", quote].join("\n");
+}
+function isDesignRenderingInput(relativePath) {
+  const rel = relativePath.split("\\").join("/");
+  if (rel.startsWith("__tests__/") || rel.includes("/__tests__/")) return false;
+  if (/\.test\.[cm]?[jt]sx?$/.test(rel)) return false;
+  if (/\.stories\.[cm]?[jt]sx?$/.test(rel)) return false;
+  if (rel.endsWith(".md")) return false;
+  return true;
+}
+function designTreeSha256(root) {
+  const files = [];
+  const walk = (dir) => {
+    for (const name of readdirSync(dir).sort()) {
+      const full = resolve(dir, name);
+      if (statSync(full).isDirectory()) walk(full);
+      else if (isDesignRenderingInput(full.slice(root.length + 1))) files.push(full);
+    }
+  };
+  walk(root);
+  const h = createHash("sha256");
+  for (const f of files) {
+    h.update(f.slice(root.length + 1) + "\n");
+    h.update(readFileSync(f));
+    h.update("\n");
+  }
+  return h.digest("hex");
+}
+var identityCache = /* @__PURE__ */ new Map();
+function judgeDesignIdentity(src) {
+  const key = resolve(src);
+  const cached = identityCache.get(key);
+  if (cached !== void 0) return cached;
+  let identity;
+  try {
+    identity = { src: key, srcSha256: designTreeSha256(key) };
+  } catch (e) {
+    const reason = e instanceof Error ? e.message : String(e);
+    console.warn(`[visual-eval] design tree unreadable at ${key} \u2014 the judgement carries no design identity (${reason})`);
+    identity = null;
+  }
+  identityCache.set(key, identity);
+  return identity;
+}
+function resetJudgeDesignIdentityCache() {
+  identityCache.clear();
 }
 
 // src/design-mode.ts
@@ -6640,6 +7077,9 @@ var CANVAS_VIEWPORTS = {
   lg: { width: 1024, height: 768 },
   xl: { width: 1440, height: 900 }
 };
+function displayModeForCanvas(canvas) {
+  return canvas === "xs-chat-card" ? "inline" : "fullscreen";
+}
 function canvasDisplayModeForShell(shell) {
   return shell === "chat" || shell === "inline" ? "inline" : "fullscreen";
 }
@@ -6698,24 +7138,76 @@ var CANVAS_DESCRIPTORS = {
 };
 function describeCanvas(canvas) {
   const d = CANVAS_DESCRIPTORS[canvas];
-  return `This component renders on the \`${canvas}\` canvas (${d.label}): ${d.minWidthPx}\u2013${d.maxWidthPx}px wide, ${d.host}. Design for the whole range \u2014 the host may size the iframe anywhere inside it.`;
+  return `This component renders on the \`${canvas}\` canvas (${d.label}): ${d.minWidthPx}\u2013${d.maxWidthPx}px wide, ${d.host}. Design for the whole range \u2014 the host may size the iframe anywhere inside it, and the host owns the height: size to your content, never to the viewport.`;
 }
 
 // src/evaluation/visual-evaluator.ts
+function canvasFitPolicy(canvas) {
+  switch (canvas) {
+    case "xs-chat-card":
+      return { capture: "viewport", overflow: "fail" };
+    case "mobile-fullscreen-small":
+      return { capture: "full-page", overflow: "warn" };
+    default:
+      return { capture: "full-page", overflow: "none" };
+  }
+}
+var JUDGE_SCOPE_CLASS = "ggui-judge-scope";
+function canvasFit(canvas) {
+  return displayModeForCanvas(canvas) === "fullscreen" ? "fill" : void 0;
+}
+function canvasOverflowIssue(canvas, viewport, contentHeight, verdict) {
+  const hidden = contentHeight - viewport.height;
+  return {
+    dimension: "canvas-overflow",
+    severity: verdict === "fail" ? "critical" : "major",
+    description: `Rendered content is ${contentHeight}px tall on the ${canvas} canvas (${viewport.width}\xD7${viewport.height}) \u2014 ${hidden}px ${verdict === "fail" ? "is cut off: the inline card does not scroll" : "sits below the first screen"}.`,
+    fix: "Fit the composition to the canvas: fewer and shorter sections, one compact row of chips, no hero taller than a third of the box, no fixed min-heights or tall paddings \u2014 measure against the canvas, not the page."
+  };
+}
 function resolveUiGenPackageDir() {
   const selfDir = dirname(fileURLToPath(import.meta.url));
   return resolve(selfDir, "..", "..");
 }
+function resolveWirePackageDir() {
+  const uiGenDir = resolveUiGenPackageDir();
+  const candidates = [
+    resolve(uiGenDir, "node_modules", "@ggui-ai", "wire"),
+    // workspace / nested install
+    resolve(uiGenDir, "..", "wire"),
+    // pnpm deploy: `.pnpm/<ui-gen>@<ver>/node_modules/@ggui-ai/{ui-gen,wire}`
+    resolve(uiGenDir, "..", "..", "@ggui-ai", "wire")
+    // hoisted flat install beside the scope dir
+  ];
+  for (const dir of candidates) {
+    if (existsSync(resolve(dir, "package.json"))) return dir;
+  }
+  try {
+    const entry = fileURLToPath(import.meta.resolve("@ggui-ai/wire"));
+    let dir = dirname(entry);
+    for (let i = 0; i < 6; i++) {
+      if (existsSync(resolve(dir, "package.json"))) return dir;
+      dir = dirname(dir);
+    }
+  } catch {
+  }
+  return null;
+}
 function resolveDesignPackageDir() {
-  const selfDir = dirname(fileURLToPath(import.meta.url));
-  return resolve(selfDir, "..", "..", "..", "design");
+  try {
+    return dirname(createRequire(import.meta.url).resolve("@ggui-ai/design/package.json"));
+  } catch {
+    const selfDir = dirname(fileURLToPath(import.meta.url));
+    return resolve(selfDir, "..", "..", "..", "design");
+  }
 }
-async function bundleForRendering(compiledCode, sampleProps) {
+async function bundleForRendering(compiledCode, sampleProps, designSrc = resolve(resolveDesignPackageDir(), "src")) {
   const tmpDir = resolve(tmpdir(), "ggui-visual-eval-" + Date.now());
   mkdirSync(tmpDir, { recursive: true });
   const componentFile = resolve(tmpDir, "component.tsx");
   const entryFile = resolve(tmpDir, "entry.tsx");
-  const designPkgDir = resolveDesignPackageDir();
+  const designPkgDir = resolve(designSrc, "..");
+  const wirePkgDir = resolveWirePackageDir();
   writeFileSync(componentFile, compiledCode);
   const entryCode = `
 import React from 'react';
@@ -6763,6 +7255,10 @@ try {
       jsxImportSource: "react",
       external: ["react", "react-dom", "react-dom/client", "react/jsx-runtime"],
       alias: {
+        // The wire hooks: resolved from ui-gen's own module graph so the
+        // alias holds in a workspace checkout AND in a `pnpm deploy` image
+        // (where deps are siblings, not children, of this package).
+        ...wirePkgDir !== null ? { "@ggui-ai/wire": wirePkgDir } : {},
         // D1: generated code imports the single `@ggui-ai/design` barrel.
         // The subpath aliases stay for any first-party / legacy code.
         "@ggui-ai/design": resolve(designPkgDir, "src", "index.ts"),
@@ -6774,7 +7270,10 @@ try {
       // Bare imports in the generated component resolve against ui-gen's
       // own node_modules — the temp entry dir has none. Without this every
       // wire-bearing component (`@ggui-ai/wire`) failed to bundle.
-      nodePaths: [resolve(resolveUiGenPackageDir(), "node_modules")],
+      // Workspace layout (deps under this package's node_modules) and the
+      // `pnpm deploy` layout (deps as siblings of this package) — both
+      // searched for any other allowlisted bare import.
+      nodePaths: [resolve(resolveUiGenPackageDir(), "node_modules"), resolve(resolveUiGenPackageDir(), "..")],
       logLevel: "silent"
     });
     return result.outputFiles[0]?.text ?? "";
@@ -6789,7 +7288,7 @@ try {
     }
   }
 }
-function buildRenderHTML(bundledCode, cssTokens) {
+function buildRenderHTML(bundledCode, cssTokens, fit) {
   const tokens = cssTokens ?? getCssTokens();
   return `<!DOCTYPE html>
 <html>
@@ -6805,10 +7304,11 @@ function buildRenderHTML(bundledCode, cssTokens) {
       color: var(--ggui-color-neutral-900, #111827);
     }
     .error { color: #dc2626; padding: 16px; font-family: monospace; white-space: pre-wrap; }
+    ${fit === "fill" ? fillFitRule(JUDGE_SCOPE_CLASS) : ""}
   </style>
 </head>
 <body>
-  <div id="root"></div>
+  <div id="root"${fit === "fill" ? ` class="${JUDGE_SCOPE_CLASS}"` : ""}></div>
   <script type="importmap">
   {
     "imports": {
@@ -6854,7 +7354,17 @@ async function launchWithPuppeteer(options) {
   const puppeteer = await import('puppeteer-core');
   return puppeteer.default.launch(options);
 }
-async function captureScreenshot(html, viewport = DEFAULT_SCREENSHOT_VIEWPORT, deps = {}) {
+var CONTENT_HEIGHT_EXPRESSION = "Math.max(document.documentElement.scrollHeight, document.body ? document.body.scrollHeight : 0)";
+async function measureContentHeight(page) {
+  try {
+    const h = await page.evaluate(CONTENT_HEIGHT_EXPRESSION);
+    return typeof h === "number" && Number.isFinite(h) ? Math.round(h) : null;
+  } catch (e) {
+    console.warn(`[visual-eval] content height unavailable: ${e instanceof Error ? e.message : String(e)}`);
+    return null;
+  }
+}
+async function captureScreenshotDetailed(html, viewport = DEFAULT_SCREENSHOT_VIEWPORT, deps = {}, capture = "full-page") {
   try {
     const launchOptions = await resolveLaunchOptions(viewport, deps);
     const browser = await (deps.launch ?? launchWithPuppeteer)(launchOptions);
@@ -6866,16 +7376,21 @@ async function captureScreenshot(html, viewport = DEFAULT_SCREENSHOT_VIEWPORT, d
       await page.waitForSelector("#root > *", { timeout: 1e4 }).catch(() => {
       });
       await new Promise((r) => setTimeout(r, deps.settleMs ?? 1e3));
-      const screenshot = await page.screenshot({ type: "png", fullPage: true });
-      return Buffer.from(screenshot);
+      const contentHeight = await measureContentHeight(page);
+      const screenshot = await page.screenshot({ type: "png", fullPage: capture === "full-page" });
+      return { png: Buffer.from(screenshot), contentHeight };
     } finally {
       await browser.close();
     }
   } catch (e) {
-    console.warn(`[visual-eval] screenshot failed: ${e instanceof Error ? e.message : e}`);
-    return null;
+    const reason = `screenshot failed: ${e instanceof Error ? e.message : String(e)}`;
+    console.warn(`[visual-eval] ${reason}`);
+    return { png: null, reason, contentHeight: null };
   }
 }
+async function captureScreenshot(html, viewport = DEFAULT_SCREENSHOT_VIEWPORT, deps = {}) {
+  return (await captureScreenshotDetailed(html, viewport, deps)).png;
+}
 var VISUAL_EVAL_PROMPT = `You are a visual quality evaluator for ggui \u2014 a platform where AI agents generate React UI components on demand.
 
 ## Context
@@ -6903,6 +7418,8 @@ The screenshot shows a generated React component built from a design system with
 - Error messages like "Render error" or blank white space = rendering score 0
 - A component that renders but is just a wall of text with no structure should score low on layout and hierarchy
 
+List AT MOST 6 issues, most severe first, one sentence each for "description" and "fix" \u2014 a longer list is cut off and lost.
+
 Respond with ONLY a JSON object (no markdown, no explanation):
 {
   "completeness": <0-100>,
@@ -6914,11 +7431,16 @@ Respond with ONLY a JSON object (no markdown, no explanation):
   ],
   "critique": "<2-3 sentences: what's good, what needs improvement, does it achieve the user's goal?>"
 }`;
-async function callMultimodalLLM(config, model, prompt, screenshot, originalPrompt) {
+var VISUAL_JUDGE_MAX_OUTPUT_TOKENS = 4096;
+var VISUAL_JUDGE_PROMPT_VERSION = "v2-bounded-issues";
+var VISUAL_JUDGE_PROMPT_DIGEST = createHash("sha256").update(VISUAL_EVAL_PROMPT, "utf8").digest("hex");
+async function callMultimodalLLM(config, model, prompt, screenshot, originalPrompt, profileBlock = "") {
   const userPrompt = `## Original Request
 ${originalPrompt}
 
-Evaluate the screenshot of the generated component.`;
+` + (profileBlock.length > 0 ? `${profileBlock}
+
+` : "") + "Evaluate the screenshot of the generated component.";
   const agent = createVisionAgent({
     provider: config.provider === "claude" ? "anthropic" : config.provider,
     routeOverride: config.routeOverride,
@@ -6929,16 +7451,69 @@ Evaluate the screenshot of the generated component.`;
     prompt,
     userPrompt,
     { mediaType: "image/png", base64: screenshot.toString("base64") },
-    1500
+    VISUAL_JUDGE_MAX_OUTPUT_TOKENS
   );
 }
+function judgeCountFor(config, canvas) {
+  const k = Math.max(1, Math.floor(config.judgeK ?? 1));
+  if (k === 1) return 1;
+  return config.judgeKCanvases === void 0 || config.judgeKCanvases.includes(canvas) ? k : 1;
+}
+function medianOf(values) {
+  const sorted = [...values].sort((a, b) => a - b);
+  return sorted[Math.floor((sorted.length - 1) / 2)];
+}
+function populationSigma(values) {
+  if (values.length < 2) return 0;
+  const mean = values.reduce((a, b) => a + b, 0) / values.length;
+  const variance = values.reduce((a, b) => a + (b - mean) ** 2, 0) / values.length;
+  return Math.round(Math.sqrt(variance) * 10) / 10;
+}
+async function judgeAndParse(judge, config, model, screenshot, originalPrompt, profileBlock, canvas) {
+  let firstReason;
+  for (let attempt = 1; attempt <= 2; attempt++) {
+    const response = await judge(config, model, VISUAL_EVAL_PROMPT, screenshot, originalPrompt, profileBlock);
+    try {
+      const result = parseVisualResponse(response.text, config.passThreshold);
+      return { kind: "ok", result, inputTokens: response.inputTokens, outputTokens: response.outputTokens };
+    } catch (e) {
+      const salvaged = salvageTruncatedVisualAnswer(response.text, config.passThreshold);
+      if (salvaged !== null) {
+        console.warn(`[visual-eval] visual_judge_truncated${canvas ? ` canvas=${canvas}` : ""}: answer cut after ${response.text.length} chars \u2014 score recovered from the closed prefix, issues list partial`);
+        return { kind: "ok", result: salvaged, inputTokens: response.inputTokens, outputTokens: response.outputTokens };
+      }
+      const reason = `judge answer unparsable: ${e instanceof Error ? e.message : String(e)}`;
+      if (attempt === 1) {
+        firstReason = reason;
+        console.warn(`[visual-eval] visual_judge_retry${canvas ? ` canvas=${canvas}` : ""}: ${reason}`);
+      } else {
+        console.warn(`[visual-eval] visual_judge_retry failed again${canvas ? ` canvas=${canvas}` : ""}: ${reason}`);
+      }
+    }
+  }
+  return { kind: "unparsable", reason: firstReason ?? "judge answer unparsable" };
+}
 async function runVisualEvaluation(context, config, deps = {}) {
+  return (await runVisualEvaluationDetailed(context, config, deps)).result;
+}
+async function runVisualEvaluationDetailed(context, config, deps = {}) {
   const startTime = Date.now();
   const judge = deps.judge ?? callMultimodalLLM;
-  const bundledCode = await bundleForRendering(
-    context.compiledCode,
-    config.sampleProps ?? {}
-  );
+  const designSrc = config.designSrcDir ?? resolve(resolveDesignPackageDir(), "src");
+  const design = judgeDesignIdentity(designSrc);
+  const stamp = (r) => ({
+    ...r,
+    ...design !== null ? { design } : {},
+    ...config.themeMode !== void 0 ? { themeMode: config.themeMode } : {}
+  });
+  let bundledCode;
+  try {
+    bundledCode = await bundleForRendering(context.compiledCode, config.sampleProps ?? {}, designSrc);
+  } catch (e) {
+    const unavailableReason = `bundle failed: ${e instanceof Error ? e.message : String(e)}`;
+    console.warn(`[visual-eval] ${unavailableReason}`);
+    return { result: null, unavailableReason };
+  }
   console.log(`[visual-eval] bundled: ${bundledCode.length}B (${Date.now() - startTime}ms)`);
   const html = buildRenderHTML(bundledCode, context.cssTokens);
   const model = config.model ?? getDefaultVisualModel(config.provider);
@@ -6947,25 +7522,62 @@ async function runVisualEvaluation(context, config, deps = {}) {
     const perCanvasResults = [];
     for (const canvas of config.canvases) {
       const viewport = CANVAS_VIEWPORTS[canvas];
-      const screenshot2 = await captureScreenshot(html, viewport, deps);
+      const policy = canvasFitPolicy(canvas);
+      const fit = canvasFit(canvas);
+      const canvasHtml = fit !== void 0 ? buildRenderHTML(bundledCode, context.cssTokens, fit) : html;
+      const attempt2 = await captureScreenshotDetailed(canvasHtml, viewport, deps, policy.capture);
+      const screenshot2 = attempt2.png;
       if (!screenshot2) {
-        console.warn(`[visual-eval] no browser available at canvas ${canvas} \u2014 skipping visual evaluation`);
-        return null;
+        const unavailableReason = attempt2.reason ?? "no browser available";
+        console.warn(`[visual-eval] ${unavailableReason} at canvas ${canvas} \u2014 skipping visual evaluation`);
+        return { result: null, unavailableReason, canvas };
+      }
+      const k = judgeCountFor(config, canvas);
+      const profileBlock = buildStylingProfileJudgeBlock(context.profile);
+      const answers = await Promise.all(
+        Array.from({ length: k }, () => judgeAndParse(judge, config, model, screenshot2, context.originalPrompt, profileBlock, canvas))
+      );
+      const parsed = answers.filter((a) => a.kind === "ok");
+      if (parsed.length === 0) {
+        const first = answers.find((a) => a.kind === "unparsable");
+        return { result: null, unavailableReason: first?.reason ?? "judge answer unparsable", canvas };
+      }
+      const samples = parsed.map((a) => a.result.finalScore);
+      const median = medianOf(samples);
+      const representative = parsed[samples.indexOf(median)];
+      const result2 = representative.result;
+      result2.finalScore = median;
+      result2.passed = median >= config.passThreshold;
+      result2.inputTokens = parsed.reduce((sum, a) => sum + a.inputTokens, 0);
+      result2.outputTokens = parsed.reduce((sum, a) => sum + a.outputTokens, 0);
+      const response2 = { inputTokens: result2.inputTokens, outputTokens: result2.outputTokens };
+      const judgeRecord = {
+        k,
+        rule: "median",
+        samples,
+        sigma: populationSigma(samples),
+        notes: parsed.map((a) => a.result.critique ?? "")
+      };
+      const contentHeight = attempt2.contentHeight;
+      const overflow = contentHeight !== null && contentHeight > viewport.height;
+      if (contentHeight !== null && contentHeight > viewport.height && policy.overflow !== "none") {
+        result2.issues.push(canvasOverflowIssue(canvas, viewport, contentHeight, policy.overflow));
+        if (policy.overflow === "fail") result2.passed = false;
       }
-      const response2 = await judge(config, model, VISUAL_EVAL_PROMPT, screenshot2, context.originalPrompt);
-      const result2 = parseVisualResponse(response2.text, config.passThreshold);
-      result2.inputTokens = response2.inputTokens;
-      result2.outputTokens = response2.outputTokens;
       perCanvasResults.push(result2);
       perCanvas.push({
         canvas,
         viewport,
         score: result2.finalScore,
         passed: result2.passed,
-        screenshotPng: screenshot2
+        screenshotPng: screenshot2,
+        contentHeight,
+        overflow,
+        judge: judgeRecord,
+        ...fit !== void 0 ? { fit } : {}
       });
       console.log(
-        `[visual-eval] canvas=${canvas} ${viewport.width}\xD7${viewport.height} score=${result2.finalScore} ${result2.passed ? "pass" : "FAIL"} | in=${response2.inputTokens} out=${response2.outputTokens}`
+        `[visual-eval] canvas=${canvas} ${viewport.width}\xD7${viewport.height} score=${result2.finalScore}${k > 1 ? ` (median of ${judgeRecord.samples.length}/${k}: ${judgeRecord.samples.join(",")} \u03C3=${judgeRecord.sigma})` : ""} ${result2.passed ? "pass" : "FAIL"} | content=${contentHeight ?? "?"}px${overflow ? ` OVERFLOW (${policy.overflow})` : ""} | in=${response2.inputTokens} out=${response2.outputTokens}`
       );
     }
     const aggregate = aggregateCanvasResults(perCanvas, perCanvasResults);
@@ -6973,27 +7585,34 @@ async function runVisualEvaluation(context, config, deps = {}) {
     console.log(
       `[visual-eval] score=${aggregate.finalScore} (mean of ${perCanvas.length} canvases; ${aggregate.passed ? "every canvas passed" : `${perCanvas.filter((c) => !c.passed).length} failed`}) (${elapsed2}ms)`
     );
-    return aggregate;
+    return { result: stamp(aggregate) };
   }
-  const screenshot = await captureScreenshot(html, config.viewport, deps);
+  const attempt = await captureScreenshotDetailed(html, config.viewport, deps);
+  const screenshot = attempt.png;
   if (!screenshot) {
-    console.warn("[visual-eval] no browser available \u2014 skipping visual evaluation");
-    return null;
+    const unavailableReason = attempt.reason ?? "no browser available";
+    console.warn(`[visual-eval] ${unavailableReason} \u2014 skipping visual evaluation`);
+    return { result: null, unavailableReason };
   }
   console.log(`[visual-eval] screenshot: ${screenshot.length}B (${Date.now() - startTime}ms)`);
-  const response = await judge(
+  const answer = await judgeAndParse(
+    judge,
     config,
     model,
-    VISUAL_EVAL_PROMPT,
     screenshot,
-    context.originalPrompt
+    context.originalPrompt,
+    buildStylingProfileJudgeBlock(context.profile)
   );
-  const result = parseVisualResponse(response.text, config.passThreshold);
-  result.inputTokens = response.inputTokens;
-  result.outputTokens = response.outputTokens;
+  if (answer.kind === "unparsable") {
+    return { result: null, unavailableReason: answer.reason };
+  }
+  const result = answer.result;
+  result.inputTokens = answer.inputTokens;
+  result.outputTokens = answer.outputTokens;
+  const response = { inputTokens: answer.inputTokens, outputTokens: answer.outputTokens };
   const elapsed = Date.now() - startTime;
   console.log(`[visual-eval] score=${result.finalScore} (${elapsed}ms) | in=${response.inputTokens} out=${response.outputTokens}`);
-  return result;
+  return { result: stamp(result) };
 }
 function aggregateCanvasResults(perCanvas, results) {
   const n = results.length;
@@ -7033,9 +7652,57 @@ function summarizeVisualResult(result) {
     canvas: c.canvas,
     viewport: c.viewport,
     score: c.score,
-    passed: c.passed
+    passed: c.passed,
+    contentHeight: c.contentHeight,
+    overflow: c.overflow,
+    judge: c.judge,
+    ...c.fit !== void 0 ? { fit: c.fit } : {}
   }));
-  return { score: result.finalScore, passed: result.passed, canvases };
+  return {
+    score: result.finalScore,
+    passed: result.passed,
+    canvases,
+    ...result.design !== void 0 ? { design: result.design } : {},
+    ...result.themeMode !== void 0 ? { themeMode: result.themeMode } : {}
+  };
+}
+function salvageTruncatedVisualAnswer(text, passThreshold) {
+  const dim = (name) => {
+    const m = text.match(new RegExp(`"${name}"\\s*:\\s*(\\d+(?:\\.\\d+)?)`));
+    return m ? Number(m[1]) : null;
+  };
+  const completeness = dim("completeness");
+  const layout = dim("layout");
+  const hierarchy = dim("hierarchy");
+  const aesthetics = dim("aesthetics");
+  if (completeness === null || layout === null || hierarchy === null || aesthetics === null) return null;
+  const issues = [];
+  const issuesAt = text.indexOf('"issues"');
+  if (issuesAt >= 0) {
+    for (const m of text.slice(issuesAt).matchAll(/\{[^{}]*\}/g)) {
+      try {
+        const o = JSON.parse(m[0]);
+        if (typeof o.description === "string") {
+          issues.push({
+            dimension: typeof o.dimension === "string" ? o.dimension : "layout",
+            severity: typeof o.severity === "string" ? o.severity : "minor",
+            description: o.description,
+            fix: typeof o.fix === "string" ? o.fix : ""
+          });
+        }
+      } catch {
+      }
+    }
+  }
+  const rebuilt = JSON.stringify({
+    completeness,
+    layout,
+    hierarchy,
+    aesthetics,
+    issues,
+    critique: `[truncated judge answer \u2014 score recovered from the closed prefix; ${issues.length} issue(s) kept, the rest and the critique were cut]`
+  });
+  return parseVisualResponse(rebuilt, passThreshold);
 }
 function parseVisualResponse(text, passThreshold) {
   const jsonMatch = text.match(/\{[\s\S]*\}/);
@@ -7097,7 +7764,11 @@ async function runVisualEval(context, config) {
   const summary = summarizeVisualResult(result);
   return summary === void 0 ? { issues } : { issues, summary };
 }
+function cssTokensForAppTheme(theme, mode = "light") {
+  if (theme === void 0) return getCssTokens(mode);
+  return composeThemeCss({ layer: "page", mode: theme.mode ?? mode, appTheme: theme });
+}
 
-export { CANVAS_BREAKPOINTS, CANVAS_CLASSES, CANVAS_DESCRIPTORS, CANVAS_VIEWPORTS, CRITERIA, DEFAULT_EVAL_MAX_ROUNDS, DEFAULT_QUALITY_CONFIG, LLM_EVAL_STATIC_CRITERIA, MAX_EVAL_ROUNDS_HARD_LIMIT, buildCodingCriteriaSummary, buildFixPrompt, callMultimodalLLM, canvasDisplayModeForShell, canvasForRendering, canvasForViewportWidth, captureScreenshot, computeEvaluationScore, createEvaluationToolsServer, criteriaFor, describeCanvas, extractCompiledCode, extractCompiledCodeFromMessage, extractEvalResult, extractSourceCode, extractSourceCodeFromMessage, extractToolResultTexts, getActionableIssues, getCriteriaByPriority, getCriterionById, getEvaluatorSystemPrompt, getLLMCriteria, isBlocked, matches, notApplicableCoverage, priorityForIssue, resolveLaunchOptions, runAxisChecks, runEvaluation, runEvaluationLoop, runVisualEval, runVisualEvaluation, summarizeVisualResult };
+export { CANVAS_BREAKPOINTS, CANVAS_CLASSES, CANVAS_DESCRIPTORS, CANVAS_VIEWPORTS, CONTENT_HEIGHT_EXPRESSION, CRITERIA, DEFAULT_EVAL_MAX_ROUNDS, DEFAULT_QUALITY_CONFIG, LLM_EVAL_STATIC_CRITERIA, MAX_EVAL_ROUNDS_HARD_LIMIT, VISUAL_EVAL_PROMPT, VISUAL_JUDGE_MAX_OUTPUT_TOKENS, VISUAL_JUDGE_PROMPT_DIGEST, VISUAL_JUDGE_PROMPT_VERSION, buildCodingCriteriaSummary, buildFixPrompt, callMultimodalLLM, canvasDisplayModeForShell, canvasFitPolicy, canvasForRendering, canvasForViewportWidth, canvasOverflowIssue, captureScreenshot, captureScreenshotDetailed, computeEvaluationScore, createEvaluationToolsServer, criteriaFor, cssTokensForAppTheme, describeCanvas, designTreeSha256, extractCompiledCode, extractCompiledCodeFromMessage, extractEvalResult, extractSourceCode, extractSourceCodeFromMessage, extractToolResultTexts, getActionableIssues, getCriteriaByPriority, getCriterionById, getEvaluatorSystemPrompt, getLLMCriteria, isBlocked, judgeDesignIdentity, matches, notApplicableCoverage, priorityForIssue, resetJudgeDesignIdentityCache, resolveDesignPackageDir, resolveLaunchOptions, runAxisChecks, runEvaluation, runEvaluationLoop, runVisualEval, runVisualEvaluation, runVisualEvaluationDetailed, summarizeVisualResult };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map