@ggui-ai/ui-gen 0.24.0 → 0.25.0

package/dist/evaluation/index.js

@@ -5,7 +5,8 @@ import { z } from 'zod';
 import { LUCIDE_ICON_NAMES, maxWidth } from '@ggui-ai/design';
 import { createHash } from 'crypto';
 import { build } from 'esbuild';
-import { getCssTokens, composeThemeCss, fillFitRule } from '@ggui-ai/design/rendering';
+import { EXPANDED_FRAME, getCssTokens, composeThemeCss, expandedFrameScrimDecls, fillFitRule, expandedFramePanelRule } from '@ggui-ai/design/rendering';
+import { inflateSync } from 'zlib';
 import { readFileSync, readdirSync, statSync, mkdtempSync, writeFileSync, rmSync, existsSync } from 'fs';
 import { resolve, relative, dirname } from 'path';
 import { fileURLToPath } from 'url';
@@ -3295,6 +3296,81 @@ function runActionLabelDropped(input) {
     )
   );
 }
+var MIN_ECHO_CHARS = 12;
+function collectStrings(value, out) {
+  if (typeof value === "string") {
+    out.push(value);
+  } else if (Array.isArray(value)) {
+    for (const v of value) collectStrings(v, out);
+  } else if (value !== null && typeof value === "object") {
+    for (const v of Object.values(value)) collectStrings(v, out);
+  }
+}
+function fixtureOnlyStrings(input) {
+  if (input.fixtureProps === void 0) return [];
+  const values = [];
+  collectStrings(input.fixtureProps, values);
+  const stated = `${input.originalPrompt}
+${input.contract === void 0 ? "" : JSON.stringify(input.contract)}`;
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const v of values) {
+    const t = v.trim();
+    if (t.length < MIN_ECHO_CHARS || !t.includes(" ") || seen.has(t)) continue;
+    seen.add(t);
+    if (stated.includes(t)) continue;
+    out.push(t);
+  }
+  return out;
+}
+function runFixtureDefaultEcho(input) {
+  if (input.compiledCode === null) return [];
+  const src = input.sourceCode;
+  const issues = [];
+  for (const value of fixtureOnlyStrings(input)) {
+    if (!src.includes(value)) continue;
+    issues.push(
+      mkIssue(
+        "universal.fixture_default_echo",
+        `A literal in the source equals a fixture value the request never stated: "${value.length > 60 ? `${value.slice(0, 57)}\u2026` : value}". The fixture is judging data; a visitor sees this copy whenever the agent leaves the prop out.`,
+        "Take that copy from the prop it renders and drop the literal \u2014 no default, fallback or placeholder that repeats a fixture value. A default may only carry text the request itself states.",
+        "warn"
+      )
+    );
+  }
+  return issues;
+}
+var FORM_OPEN_RX = /<form\b[^<>]*\bonSubmit\s*=[^<>]*>/g;
+var CONTROL_TAG_RX = /<(?:Button|button|input)\b[^<>]*>/g;
+var SUBMIT_TYPE_RX = /\btype\s*=\s*(?:["']submit["']|\{\s*["']submit["']\s*\})/;
+function submitForms(sourceCode) {
+  const out = [];
+  for (const m of sourceCode.matchAll(FORM_OPEN_RX)) {
+    const start = m.index ?? 0;
+    const end = sourceCode.indexOf("</form>", start + m[0].length);
+    out.push(end === -1 ? sourceCode.slice(start) : sourceCode.slice(start, end + "</form>".length));
+  }
+  return out;
+}
+function runFormSubmitControl(input) {
+  if (input.compiledCode === null) return [];
+  const issues = [];
+  for (const form of submitForms(input.sourceCode)) {
+    const controls = [...form.matchAll(CONTROL_TAG_RX)].map((m) => m[0]);
+    if (controls.length === 0) continue;
+    if (controls.some((tag) => SUBMIT_TYPE_RX.test(tag))) continue;
+    const named = controls.find((tag) => /<Button\b/.test(tag)) ?? controls[0];
+    issues.push(
+      mkIssue(
+        "universal.form_submit_control",
+        `A <form onSubmit> renders ${controls.length} control(s) and none submits it: the design Button defaults to type="button", so clicking ${named.length > 60 ? `${named.slice(0, 57)}\u2026` : named} does nothing \u2014 only Enter in a field submits.`,
+        'Give the control that submits this form type="submit" \u2014 a Button inside a form defaults to type="button" and never submits on click; keep type="button" on the others.',
+        "fail"
+      )
+    );
+  }
+  return issues;
+}
 var UNIVERSAL_CHECKS = [
   {
     id: "universal.icon_name_known",
@@ -3332,6 +3408,18 @@ var UNIVERSAL_CHECKS = [
     values: ALL_RENDER_VALUES,
     run: runTerminalActionUnguarded
   },
+  {
+    id: "universal.form_submit_control",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runFormSubmitControl
+  },
+  {
+    id: "universal.fixture_default_echo",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runFixtureDefaultEcho
+  },
   {
     id: "universal.accent_text_ink",
     axis: "render",
@@ -3455,7 +3543,7 @@ function runMapKeyIsId(input) {
       mkIssue(
         "render.map_key_is_id",
         `Array key uses index variable "${key}" \u2014 reorders and stream merges will break React reconciliation.`,
-        `Replace key={${key}} with key={item.id} (or item.symbol / whatever the entity id field is).`
+        `Replace key={${key}} with key={item.id} \u2014 or, when the items carry no id, with the field that names each one (item.label / item.symbol / item.name).`
       )
     );
   }
@@ -4391,7 +4479,8 @@ function runAxisChecks(classification, input) {
     originalPrompt: input.originalPrompt,
     classification,
     ...input.designMode !== void 0 ? { designMode: input.designMode } : {},
-    ...input.canvas !== void 0 ? { canvas: input.canvas } : {}
+    ...input.canvas !== void 0 ? { canvas: input.canvas } : {},
+    ...input.fixtureProps !== void 0 ? { fixtureProps: input.fixtureProps } : {}
   };
   if (input.compiledCode === null) {
     traceAxisChecksSkipped(facts, "compiledCode null \u2014 no check ran");
@@ -4498,6 +4587,311 @@ function buildStylingProfileJudgeBlock(profile) {
   if (quote.length === 0) return "";
   return ["## Declared styling profile", "", STYLING_PROFILE_JUDGE_FRAME, "", quote].join("\n");
 }
+var CRITERION_ID = /^[a-z][a-z0-9-]*(?:\.[a-zA-Z][a-zA-Z0-9-]*)+$/;
+var criteriaScopeSchema = z.object({
+  kind: z.string().min(1).optional(),
+  canvas: z.string().min(1).optional(),
+  preset: z.string().min(1).optional()
+});
+var bankRowSchema = z.object({
+  id: z.string().regex(CRITERION_ID, "a criterion id is family.property[.facet], lower-case family"),
+  group: z.string().optional(),
+  scope: criteriaScopeSchema.default({}),
+  /** Importance, independent of whether anything automated checks it yet. */
+  severity: z.enum(["must", "should"]),
+  /** The method that produces the verdict. */
+  evaluation: z.enum(["instrument", "judge", "human"]),
+  /** The method's readiness — the only source of an `n/a`. */
+  status: z.enum(["live", "reference", "planned", "manual"]),
+  /** The question, answerable yes/no from the frame. */
+  text: z.string().min(1),
+  /** The evidence rule: what the one-sentence evidence must name (a region or element). */
+  evidence: z.string().min(1),
+  /** The templated fix line a feedback channel may consume later; never read in v1. */
+  fix: z.string().optional()
+});
+var criteriaBankSchema = z.object({
+  version: z.string().min(1),
+  applies: z.object({
+    /** `["*"]` = every kind. */
+    kind: z.array(z.string().min(1)).optional(),
+    canvases: z.array(z.string().min(1)).optional()
+  }).optional(),
+  criteria: z.array(bankRowSchema).min(1),
+  recipes: z.array(bankRowSchema).optional()
+}).superRefine((bank, ctx) => {
+  const seen = /* @__PURE__ */ new Set();
+  const check = (rows, key) => {
+    rows.forEach((c, i) => {
+      if (seen.has(c.id)) ctx.addIssue({ code: "custom", path: [key, i, "id"], message: `duplicate criterion id ${c.id}` });
+      seen.add(c.id);
+    });
+  };
+  check(bank.criteria, "criteria");
+  check(bank.recipes ?? [], "recipes");
+});
+function bankRows(bank) {
+  return [...bank.criteria, ...bank.recipes ?? []];
+}
+function parseCriteriaBank(raw) {
+  const parsed = criteriaBankSchema.safeParse(raw);
+  if (!parsed.success) {
+    const issues = parsed.error.issues.map((i) => `${i.path.map(String).join(".") || "<root>"}: ${i.message}`).join("; ");
+    throw new Error(`criteria bank invalid \u2014 ${issues}`);
+  }
+  return parsed.data;
+}
+
+// src/evaluation/criteria/select.ts
+var CRITERIA_SELECTOR_VERSION = "selector@2";
+function canonicalCriteriaContext(ctx) {
+  const sortKeys = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? Object.fromEntries(
+    Object.entries(value).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([k, v]) => [k, sortKeys(v)])
+  ) : value;
+  return JSON.stringify(sortKeys(ctx));
+}
+function criteriaSetIdFor(bankVersion, ctx) {
+  return createHash("sha256").update(`${bankVersion}|${CRITERIA_SELECTOR_VERSION}|${canonicalCriteriaContext(ctx)}`, "utf8").digest("hex").slice(0, 16);
+}
+function matchedScope(row, ctx) {
+  const s = row.scope;
+  const matched = [];
+  if (s.kind !== void 0) {
+    if (ctx.kind !== s.kind) return null;
+    matched.push(`kind=${s.kind}`);
+  }
+  if (s.canvas !== void 0) {
+    if (ctx.canvas !== s.canvas) return null;
+    matched.push(`canvas=${s.canvas}`);
+  }
+  if (s.preset !== void 0) {
+    if (ctx.preset !== s.preset) return null;
+    matched.push(`preset=${s.preset}`);
+  }
+  return matched;
+}
+function selectCriteria(bank, ctx) {
+  const criteriaSetId = criteriaSetIdFor(bank.version, ctx);
+  const applies = bank.applies;
+  if (applies?.canvases !== void 0 && !applies.canvases.includes(ctx.canvas)) return { criteriaSetId, selection: [] };
+  if (applies?.kind !== void 0 && ctx.kind !== void 0 && !applies.kind.includes("*") && !applies.kind.includes(ctx.kind)) {
+    return { criteriaSetId, selection: [] };
+  }
+  const selection = [];
+  for (const row of bankRows(bank)) {
+    const matched = matchedScope(row, ctx);
+    if (matched === null) continue;
+    selection.push(matched.length === 0 ? { id: row.id, source: "static", reason: "static" } : { id: row.id, source: "context", reason: `context: ${matched.join(", ")}` });
+  }
+  return { criteriaSetId, selection };
+}
+
+// src/evaluation/criteria/resolve.ts
+var INSTRUMENT_BY_ID = {
+  "comp.fit": "fit",
+  "floor.fit": "fit",
+  "finish.canvas.inhabited": "fill"
+};
+function majority(id, answers) {
+  const votes = answers.flatMap((a) => a.filter((x) => x.id === id));
+  if (votes.length === 0) return { verdict: "n/a", evidence: "not answered" };
+  const counts = /* @__PURE__ */ new Map();
+  for (const v of votes) counts.set(v.verdict, (counts.get(v.verdict) ?? 0) + 1);
+  const ranked = [...counts.entries()].sort((a, b) => b[1] - a[1]);
+  const top = ranked[0];
+  if (ranked.length > 1 && ranked[1][1] === top[1]) return { verdict: "n/a", evidence: "no majority" };
+  const evidence = votes.find((v) => v.verdict === top[0])?.evidence ?? "";
+  return { verdict: top[0], evidence };
+}
+function instrumentRead(kind, m) {
+  if (kind === "fit") {
+    if (m.contentHeight === null) return { verdict: "n/a", evidence: "content height unmeasurable" };
+    return { verdict: m.overflow ? "fail" : "pass", evidence: `content ${m.contentHeight}px against a ${m.viewportHeight}px box` };
+  }
+  if (m.inkRatio === null) return { verdict: "n/a", evidence: "capture unreadable" };
+  return { verdict: "n/a", evidence: `fill ${m.inkRatio.toFixed(3)} reported; no floor ruled` };
+}
+function readRow(row, answers, m) {
+  if (row.evaluation === "judge") return majority(row.id, answers);
+  if (row.evaluation === "human") return { verdict: "n/a", evidence: `reader's column (status ${row.status})` };
+  if (row.status !== "live") return { verdict: "n/a", evidence: `not implemented (status ${row.status})` };
+  const kind = INSTRUMENT_BY_ID[row.id];
+  return kind === void 0 ? { verdict: "n/a", evidence: "instrument not wired (status live, no binding)" } : instrumentRead(kind, m);
+}
+function resolveCriteriaBlock(args) {
+  const byId = new Map(bankRows(args.bank).map((r) => [r.id, r]));
+  const verdicts = [];
+  for (const s of args.selected.selection) {
+    const row = byId.get(s.id);
+    if (row === void 0) continue;
+    const read = readRow(row, args.answers, args.measurements);
+    verdicts.push({ id: row.id, severity: row.severity, method: row.evaluation, status: row.status, source: s.source, verdict: read.verdict, evidence: read.evidence });
+  }
+  return {
+    criteriaSetId: args.selected.criteriaSetId,
+    bankVersion: args.bank.version,
+    selectorVersion: CRITERIA_SELECTOR_VERSION,
+    context: args.context,
+    selection: args.selected.selection,
+    verdicts
+  };
+}
+var CRITERIA_PROPS_MAX_CHARS = 2e3;
+function criteriaFrameLine(frame) {
+  const box = `${frame.width}\xD7${frame.height}`;
+  if (frame.canvas === "xs-chat-card") {
+    const framedBy = frame.hostLabel !== void 0 ? `inside the host's own frame (${frame.hostLabel}), on the host's ground` : "inside a generic stand-in for the host's frame \u2014 the card's surface with a thin ring and rounded corners, on the page ground";
+    return `This frame is an inline chat card captured at its natural height (at most ${box}, the host's ceiling), ${framedBy}: the host sizes the card to its content and draws that frame, so judge composition and space within the card's own extent, and read the frame and the ground round it as the host's, not the card's.`;
+  }
+  return `This frame is ${box}, a fixed full-screen box the card fills${frame.hostLabel !== void 0 ? ` (${frame.hostLabel})` : ""}: judge composition and space against the whole box, edge to edge.`;
+}
+function criteriaPropsSection(propsJson) {
+  const text = propsJson.length > CRITERIA_PROPS_MAX_CHARS ? `${propsJson.slice(0, CRITERIA_PROPS_MAX_CHARS)}\u2026 (truncated)` : propsJson;
+  return `The one input besides the frame \u2014 the props this card was rendered with. Read them ONLY for rows whose evidence names props (for example, whether a rendered string came from them); every other row is read off the frame alone:
+${text}
+`;
+}
+function buildCriteriaJudgeBlock(bank, selected, inputs = {}) {
+  const byId = new Map(bankRows(bank).map((r) => [r.id, r]));
+  const asked = selected.selection.map((s) => byId.get(s.id)).filter((r) => r !== void 0 && r.evaluation === "judge");
+  if (asked.length === 0) return "";
+  const lines = asked.map((r) => `- ${r.id} (${r.severity}): ${r.text} Evidence must name: ${r.evidence}`);
+  return "## Criteria \u2014 answer each one from the FRAME only\nRead these off the screenshot. Never infer them from the request, the styling profile or any direction text above.\n" + (inputs.frame !== void 0 ? `${criteriaFrameLine(inputs.frame)}
+` : "") + (inputs.propsJson !== void 0 ? criteriaPropsSection(inputs.propsJson) : "") + `${lines.join("\n")}
+Add to your JSON a top-level "criteria" array with exactly these ids: [{ "id": "<id>", "verdict": "pass" | "fail" | "n/a", "evidence": "<one sentence naming the region or element you read it from>" }]. Every row here was selected as applicable to this card, so "n/a" never means "does not apply": use it ONLY when this frame cannot show the criterion \u2014 it is then recorded as not evaluated.`;
+}
+var INK_TOLERANCE = 8;
+var PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];
+function decodePng(png) {
+  const buf = Buffer.from(png.buffer, png.byteOffset, png.byteLength);
+  if (buf.length < 8 + 25) return { reason: `not a PNG: ${buf.length} bytes` };
+  for (let i = 0; i < PNG_SIGNATURE.length; i++) {
+    if (buf[i] !== PNG_SIGNATURE[i]) return { reason: "not a PNG: signature mismatch" };
+  }
+  let width = 0;
+  let height = 0;
+  let channels = null;
+  const idat = [];
+  let offset = 8;
+  while (offset + 8 <= buf.length) {
+    const length = buf.readUInt32BE(offset);
+    const type = buf.toString("latin1", offset + 4, offset + 8);
+    const start = offset + 8;
+    if (start + length + 4 > buf.length) return { reason: `truncated PNG: ${type} chunk runs past the end` };
+    const data = buf.subarray(start, start + length);
+    if (type === "IHDR") {
+      if (length !== 13) return { reason: `malformed IHDR: ${length} bytes` };
+      width = data.readUInt32BE(0);
+      height = data.readUInt32BE(4);
+      const bitDepth = data[8];
+      const colorType = data[9];
+      const interlace = data[12];
+      if (bitDepth !== 8) return { reason: `unsupported PNG: bit depth ${bitDepth}` };
+      if (interlace !== 0) return { reason: "unsupported PNG: interlaced" };
+      if (colorType === 2) channels = 3;
+      else if (colorType === 6) channels = 4;
+      else return { reason: `unsupported PNG: colour type ${colorType}` };
+    } else if (type === "IDAT") {
+      idat.push(data);
+    } else if (type === "IEND") {
+      break;
+    }
+    offset = start + length + 4;
+  }
+  if (channels === null) return { reason: "malformed PNG: no IHDR" };
+  if (width === 0 || height === 0) return { reason: `empty PNG: ${width}\xD7${height}` };
+  if (idat.length === 0) return { reason: "malformed PNG: no IDAT" };
+  let raw;
+  try {
+    raw = inflateSync(Buffer.concat(idat));
+  } catch (error) {
+    return { reason: `corrupt IDAT stream: ${error instanceof Error ? error.message : String(error)}` };
+  }
+  const stride = width * channels;
+  if (raw.length !== (stride + 1) * height) {
+    return { reason: `malformed PNG: ${raw.length} raw bytes for ${width}\xD7${height}\xD7${channels}` };
+  }
+  const pixels = new Uint8Array(stride * height);
+  const bpp = channels;
+  for (let y = 0; y < height; y++) {
+    const filter = raw[y * (stride + 1)];
+    const inRow = y * (stride + 1) + 1;
+    const outRow = y * stride;
+    const prevRow = outRow - stride;
+    for (let i = 0; i < stride; i++) {
+      const x = raw[inRow + i];
+      const a = i >= bpp ? pixels[outRow + i - bpp] : 0;
+      const b = y > 0 ? pixels[prevRow + i] : 0;
+      const c = y > 0 && i >= bpp ? pixels[prevRow + i - bpp] : 0;
+      let value;
+      switch (filter) {
+        case 0:
+          value = x;
+          break;
+        case 1:
+          value = x + a;
+          break;
+        case 2:
+          value = x + b;
+          break;
+        case 3:
+          value = x + (a + b >> 1);
+          break;
+        case 4: {
+          const p = a + b - c;
+          const pa = Math.abs(p - a);
+          const pb = Math.abs(p - b);
+          const pc = Math.abs(p - c);
+          value = x + (pa <= pb && pa <= pc ? a : pb <= pc ? b : c);
+          break;
+        }
+        default:
+          return { reason: `malformed PNG: scanline filter ${filter} at row ${y}` };
+      }
+      pixels[outRow + i] = value & 255;
+    }
+  }
+  return { width, height, channels, pixels };
+}
+function readInkExtent(png, insetPx = 0) {
+  const image = decodePng(png);
+  if ("reason" in image) return image;
+  const region = { x: insetPx, y: insetPx, width: image.width - 2 * insetPx, height: image.height - 2 * insetPx };
+  if (insetPx < 0 || region.width <= 0 || region.height <= 0) {
+    return { reason: `an inset of ${insetPx}px leaves nothing of a ${image.width}\xD7${image.height} image` };
+  }
+  const { channels, pixels, width } = image;
+  const counts = /* @__PURE__ */ new Map();
+  let ground = 0;
+  let groundCount = 0;
+  for (let y = region.y; y < region.y + region.height; y++) {
+    for (let x = region.x; x < region.x + region.width; x++) {
+      const i = (y * width + x) * channels;
+      const key = pixels[i] << 16 | pixels[i + 1] << 8 | pixels[i + 2];
+      const n = (counts.get(key) ?? 0) + 1;
+      counts.set(key, n);
+      if (n > groundCount) {
+        groundCount = n;
+        ground = key;
+      }
+    }
+  }
+  const gr = ground >> 16 & 255;
+  const gg = ground >> 8 & 255;
+  const gb = ground & 255;
+  let lastInkRow = null;
+  for (let y = region.y; y < region.y + region.height; y++) {
+    for (let x = region.x; x < region.x + region.width; x++) {
+      const i = (y * width + x) * channels;
+      if (Math.abs(pixels[i] - gr) > INK_TOLERANCE || Math.abs(pixels[i + 1] - gg) > INK_TOLERANCE || Math.abs(pixels[i + 2] - gb) > INK_TOLERANCE) {
+        lastInkRow = y - region.y;
+        break;
+      }
+    }
+  }
+  const ratio = lastInkRow === null ? 0 : Math.round((lastInkRow + 1) / region.height * 1e3) / 1e3;
+  return { ratio, lastInkRow, region, ground: [gr, gg, gb] };
+}
 function isDesignRenderingInput(relativePath) {
   const rel = relativePath.split("\\").join("/");
   if (rel.startsWith("__tests__/") || rel.includes("/__tests__/")) return false;
@@ -4547,7 +4941,7 @@ function resetJudgeDesignIdentityCache() {
 function canvasFitPolicy(canvas) {
   switch (canvas) {
     case "xs-chat-card":
-      return { capture: "viewport", overflow: "fail" };
+      return { capture: "natural", overflow: "fail" };
     case "mobile-fullscreen-small":
       return { capture: "full-page", overflow: "warn" };
     default:
@@ -4555,9 +4949,65 @@ function canvasFitPolicy(canvas) {
   }
 }
 var JUDGE_SCOPE_CLASS = "ggui-judge-scope";
+var JUDGE_PANEL_CLASS = "ggui-judge-panel";
+var JUDGE_INK_INSET_PX = EXPANDED_FRAME.insetPx + 24 + 1;
 function canvasFit(canvas) {
   return displayModeForCanvas(canvas) === "fullscreen" ? "fill" : void 0;
 }
+var JUDGE_GROUND_MARGIN_PX = EXPANDED_FRAME.insetPx;
+var JUDGE_GROUND_CLASS = "ggui-judge-ground";
+var JUDGE_INLINE_FRAME_CLASS = "ggui-judge-inline-frame";
+var JUDGE_INLINE_FRAME_BORDER_PX = 1;
+var JUDGE_INLINE_FRAME_RADIUS_PX = 16;
+var JUDGE_INLINE_PAD_PX = JUDGE_GROUND_MARGIN_PX + JUDGE_INLINE_FRAME_BORDER_PX;
+var JUDGE_INLINE_INK_INSET_PX = JUDGE_INLINE_PAD_PX + JUDGE_INLINE_FRAME_RADIUS_PX;
+var HOST_COLOUR_PATTERN = /^#[0-9a-f]{6}$/;
+var HOST_FRAME_BOUNDS = {
+  ringWidthPx: { min: 0, max: 8 },
+  ringAlpha: { min: 0, max: 1 },
+  radiusPx: { min: 0, max: 64 },
+  minHeightPx: { min: 0, max: 2560 }
+};
+function resolvePresentation(canvas, p) {
+  if (p === void 0) return void 0;
+  const ignored = (reason, why) => {
+    console.warn(`[visual-eval] host presentation for ${canvas} ignored (${reason}): ${why}`);
+    return { status: "ignored", reason };
+  };
+  const inline = canvasFitPolicy(canvas).capture === "natural";
+  if (typeof p.label !== "string" || p.label.length === 0) return ignored("label_missing", "no label");
+  if (p.ground !== void 0 && !HOST_COLOUR_PATTERN.test(p.ground)) return ignored("color_not_hex", "ground is not #rrggbb");
+  if (inline && p.ground !== void 0) return ignored("ground_on_inline", "the inline card's room is its frame's ground");
+  const f = p.frame;
+  if (f !== void 0) {
+    if (!inline) return ignored("frame_off_inline", "a frame on a canvas that is not the inline card");
+    if (![f.surface, f.ground, f.ring.color].every((c) => HOST_COLOUR_PATTERN.test(c))) return ignored("color_not_hex", "a frame colour is not #rrggbb");
+    const B = HOST_FRAME_BOUNDS;
+    const inRange = (n, b) => Number.isFinite(n) && n >= b.min && n <= b.max;
+    if (!inRange(f.ring.widthPx, B.ringWidthPx) || !inRange(f.ring.alpha, B.ringAlpha) || !inRange(f.radiusPx, B.radiusPx)) return ignored("frame_malformed", "a frame number out of range");
+    if (f.minHeightPx !== void 0 && !inRange(f.minHeightPx, B.minHeightPx)) return ignored("frame_malformed", "minHeightPx out of range");
+  }
+  return { status: "applied", applied: p };
+}
+function inlineGeometry(frame) {
+  if (frame === void 0) return { padPx: JUDGE_INLINE_PAD_PX, inkInsetPx: JUDGE_INLINE_INK_INSET_PX, floorPx: void 0 };
+  const padPx = JUDGE_GROUND_MARGIN_PX + frame.ring.widthPx;
+  return { padPx, inkInsetPx: padPx + frame.radiusPx, floorPx: frame.minHeightPx };
+}
+function canvasChrome(canvas) {
+  if (canvasFitPolicy(canvas).capture === "natural") return "ground";
+  return canvasFit(canvas) === "fill" && canvas !== "mobile-fullscreen-small" ? "panel" : void 0;
+}
+function judgeWindow(viewport, chrome, inlinePadPx = JUDGE_INLINE_PAD_PX) {
+  if (chrome === void 0) return viewport;
+  const gap = 2 * (chrome === "ground" ? inlinePadPx : EXPANDED_FRAME.insetPx);
+  return { width: viewport.width + gap, height: viewport.height + gap };
+}
+function cardHeight(documentHeight, chrome) {
+  if (documentHeight === null || chrome === void 0 || chrome === "ground") return documentHeight;
+  const gap = 2 * EXPANDED_FRAME.insetPx;
+  return documentHeight < gap ? null : documentHeight - gap;
+}
 function integerBox(viewport) {
   return { width: Math.round(viewport.width), height: Math.round(viewport.height) };
 }
@@ -4576,6 +5026,24 @@ function canvasOverflowIssue(canvas, viewport, contentHeight, verdict) {
     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 canvasOverflowXIssue(canvas, viewport, hiddenPx, verdict) {
+  return {
+    dimension: "canvas-overflow-x",
+    severity: verdict === "fail" ? "critical" : "major",
+    description: `Content runs ${hiddenPx}px past the ${canvas} card's ${viewport.width}px width \u2014 the card's frame clips it, so a visitor sees a cut-off row or a sideways scroll.`,
+    fix: "Keep every row within the card: wrap long text (overflow-wrap: anywhere), let a wide table or code block scroll inside its own container, and give no child a fixed width wider than the card."
+  };
+}
+function canvasBlankIssue(canvas, viewport) {
+  const classBox = CANVAS_VIEWPORTS[canvas];
+  const box = isDeclaredViewport(canvas, viewport) ? `declared ${viewport.width}\xD7${viewport.height}; class box ${classBox.width}\xD7${classBox.height}` : `${viewport.width}\xD7${viewport.height}`;
+  return {
+    dimension: "canvas-blank",
+    severity: "critical",
+    description: `Nothing painted on the ${canvas} canvas (${box}): the capture is one flat colour \u2014 the component mounted and rendered no pixels.`,
+    fix: "Return and paint the component tree: a root that renders nothing is a blank, not an empty state. Check that the default export returns its JSX, that no early return yields null on the sample props, and that the first paint shows visible content."
+  };
+}
 function resolveUiGenPackageDir() {
   const selfDir = dirname(fileURLToPath(import.meta.url));
   return resolve(selfDir, "..", "..");
@@ -4691,7 +5159,16 @@ try {
     rmSync(tmpDir, { recursive: true, force: true });
   }
 }
-function buildRenderHTML(bundledCode, cssTokens, fit) {
+function inlineFrameDecls(frame) {
+  if (frame === void 0) {
+    return `background: var(--ggui-color-container); border: ${JUDGE_INLINE_FRAME_BORDER_PX}px solid color-mix(in srgb, var(--ggui-color-onContainer) 8%, transparent); border-radius: ${JUDGE_INLINE_FRAME_RADIUS_PX}px; overflow: hidden;`;
+  }
+  const alphaPct = Math.round(frame.ring.alpha * 1e3) / 10;
+  return `background: ${frame.surface}; border: ${frame.ring.widthPx}px solid color-mix(in srgb, ${frame.ring.color} ${alphaPct}%, transparent); border-radius: ${frame.radiusPx}px; overflow: hidden;`;
+}
+function buildRenderHTML(bundledCode, cssTokens, fit, chrome, presentation) {
+  if (chrome === "panel" && fit !== "fill") throw new Error("the judge's panel frames a fill canvas only (ggui#1083 cut 3)");
+  if (chrome === "ground" && fit === "fill") throw new Error("the host ground frames an inline card only \u2014 a fill canvas has no natural height (ggui#1475)");
   const tokens = cssTokens ?? getCssTokens();
   return `<!DOCTYPE html>
 <html>
@@ -4706,15 +5183,16 @@ function buildRenderHTML(bundledCode, cssTokens, fit) {
       /* ggui#1083 \u2014 the host stand-in (neutral-50) under the theme's scrim (its tint at
          its opacity): the ground a frosted host puts under the card, so the judge scores
          the card where the visitor sees it. */
-      background: color-mix(in oklch, var(--ggui-scrim-tint, var(--ggui-color-ground, #ffffff)) calc(var(--ggui-scrim-opacity, 0.45) * 100%), var(--ggui-color-neutral-50, #ffffff));
+      ${presentation?.frame !== void 0 ? `background: ${presentation.frame.ground};` : presentation?.ground !== void 0 ? `background: ${presentation.ground};` : expandedFrameScrimDecls()}
       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) : ""}
+    ${fit === "fill" ? fillFitRule(JUDGE_SCOPE_CLASS) + (chrome === "panel" ? expandedFramePanelRule(JUDGE_PANEL_CLASS, JUDGE_SCOPE_CLASS) : "") : ""}
+    ${chrome === "ground" ? `.${JUDGE_GROUND_CLASS} { padding: ${JUDGE_GROUND_MARGIN_PX}px; } .${JUDGE_INLINE_FRAME_CLASS} { ${inlineFrameDecls(presentation?.frame)} }` : ""}
   </style>
 </head>
 <body>
-  <div id="root"${fit === "fill" ? ` class="${JUDGE_SCOPE_CLASS}"` : ""}></div>
+  ${chrome === "panel" ? `<div class="${JUDGE_PANEL_CLASS}">` : chrome === "ground" ? `<div class="${JUDGE_GROUND_CLASS}"><div class="${JUDGE_INLINE_FRAME_CLASS}">` : ""}<div id="root"${fit === "fill" ? ` class="${JUDGE_SCOPE_CLASS}"` : ""}></div>${chrome === "panel" ? "</div>" : chrome === "ground" ? "</div></div>" : ""}
   <script type="importmap">
   {
     "imports": {
@@ -4762,16 +5240,27 @@ async function launchWithPuppeteer(options) {
   return puppeteer.default.launch(options);
 }
 var CONTENT_HEIGHT_EXPRESSION = "Math.max(document.documentElement.scrollHeight, document.body ? document.body.scrollHeight : 0)";
-async function measureContentHeight(page) {
+function cardHeightExpression(padPx) {
+  return `(() => { const el = document.documentElement; const prev = el.style.height; el.style.height = 'max-content'; const h = Math.ceil(el.getBoundingClientRect().height); el.style.height = prev; return h - ${2 * padPx}; })()`;
+}
+var CARD_HEIGHT_EXPRESSION = cardHeightExpression(JUDGE_INLINE_PAD_PX);
+var OVERFLOW_X_ROUNDING_PX = 1;
+var CARD_OVERFLOW_X_EXPRESSION = "(() => { const r = document.getElementById('root'); return r ? Math.max(0, Math.ceil(r.scrollWidth - r.clientWidth)) : null; })()";
+function naturalClip(window, cardHeightPx, padPx = JUDGE_INLINE_PAD_PX) {
+  const m = padPx;
+  const box = window.height - 2 * m;
+  return { x: 0, y: 0, width: window.width, height: Math.max(1, Math.min(Math.ceil(cardHeightPx), box)) + 2 * m };
+}
+async function measureContentHeight(page, expression = CONTENT_HEIGHT_EXPRESSION) {
   try {
-    const h = await page.evaluate(CONTENT_HEIGHT_EXPRESSION);
+    const h = await page.evaluate(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") {
+async function captureScreenshotDetailed(html, viewport = DEFAULT_SCREENSHOT_VIEWPORT, deps = {}, capture = "full-page", natural = { padPx: JUDGE_INLINE_PAD_PX }) {
   try {
     const launchOptions = await resolveLaunchOptions(viewport, deps);
     const browser = await (deps.launch ?? launchWithPuppeteer)(launchOptions);
@@ -4783,6 +5272,18 @@ async function captureScreenshotDetailed(html, viewport = DEFAULT_SCREENSHOT_VIE
       await page.waitForSelector("#root > *", { timeout: 1e4 }).catch(() => {
       });
       await new Promise((r) => setTimeout(r, deps.settleMs ?? 1e3));
+      if (capture === "natural") {
+        const cardHeightPx = await measureContentHeight(page, natural.padPx === JUDGE_INLINE_PAD_PX ? CARD_HEIGHT_EXPRESSION : cardHeightExpression(natural.padPx));
+        const overflowX = await measureContentHeight(page, CARD_OVERFLOW_X_EXPRESSION);
+        const floorPx = natural.floorPx;
+        if (floorPx !== void 0 && cardHeightPx !== null && cardHeightPx < floorPx) {
+          await page.evaluate(`(() => { const f = document.querySelector('.${JUDGE_INLINE_FRAME_CLASS}'); if (f) f.style.minHeight = '${floorPx}px'; })()`);
+        }
+        const framed = cardHeightPx === null ? viewport.height - 2 * natural.padPx : floorPx !== void 0 ? Math.max(cardHeightPx, floorPx) : cardHeightPx;
+        const clip = naturalClip(viewport, framed, natural.padPx);
+        const screenshot2 = await page.screenshot({ type: "png", fullPage: false, clip });
+        return { png: Buffer.from(screenshot2), contentHeight: cardHeightPx, overflowX };
+      }
       const contentHeight = await measureContentHeight(page);
       const screenshot = await page.screenshot({ type: "png", fullPage: capture === "full-page" });
       return { png: Buffer.from(screenshot), contentHeight };
@@ -4841,12 +5342,14 @@ Respond with ONLY a JSON object (no markdown, no explanation):
 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 = "") {
+async function callMultimodalLLM(config, model, prompt, screenshot, originalPrompt, profileBlock = "", criteriaBlock = "") {
   const userPrompt = `## Original Request
 ${originalPrompt}
 
 ` + (profileBlock.length > 0 ? `${profileBlock}
 
+` : "") + (criteriaBlock.length > 0 ? `${criteriaBlock}
+
 ` : "") + "Evaluate the screenshot of the generated component.";
   const agent = createVisionAgent({
     provider: config.provider === "claude" ? "anthropic" : config.provider,
@@ -4861,20 +5364,70 @@ ${originalPrompt}
     VISUAL_JUDGE_MAX_OUTPUT_TOKENS
   );
 }
-async function frameCanvas(bundledCode, context, html, canvas, canvasViewports, deps) {
+function readInk(png, chrome, canvas, inlineInkInsetPx = JUDGE_INLINE_INK_INSET_PX) {
+  if (png === null) return null;
+  const ink = readInkExtent(png, chrome === "panel" ? JUDGE_INK_INSET_PX : chrome === "ground" ? inlineInkInsetPx : 0);
+  if ("reason" in ink) {
+    console.warn(`[visual-eval] ink extent unreadable at canvas ${canvas}: ${ink.reason}`);
+    return null;
+  }
+  return ink;
+}
+function blankVerdict(canvas, frame) {
+  if (frame.chrome === "ground" && frame.attempt.contentHeight !== null && frame.attempt.contentHeight <= 0) {
+    return canvasBlankIssue(canvas, frame.viewport);
+  }
+  return frame.ink !== null && frame.ink.lastInkRow === null ? canvasBlankIssue(canvas, frame.viewport) : null;
+}
+async function frameCanvas(bundledCode, context, html, canvas, canvasViewports, deps, hostPresentations) {
   const declaredBox = canvasViewports?.[canvas];
   const viewport = declaredBox !== void 0 ? integerBox(declaredBox) : CANVAS_VIEWPORTS[canvas];
   const policy = canvasFitPolicy(canvas);
   const fit = canvasFit(canvas);
-  const canvasHtml = fit !== void 0 ? buildRenderHTML(bundledCode, context.cssTokens, fit) : html;
-  const attempt = await captureScreenshotDetailed(canvasHtml, viewport, deps, policy.capture);
-  return { viewport, policy, fit, declared: declaredBox !== void 0, attempt };
+  const chrome = canvasChrome(canvas);
+  const outcome = resolvePresentation(canvas, hostPresentations?.[canvas]);
+  const presentation = outcome?.status === "applied" ? outcome.applied : void 0;
+  const geometry = inlineGeometry(presentation?.frame);
+  const canvasHtml = fit !== void 0 || chrome !== void 0 ? buildRenderHTML(bundledCode, context.cssTokens, fit, chrome, presentation) : html;
+  const captured = await captureScreenshotDetailed(canvasHtml, judgeWindow(viewport, chrome, geometry.padPx), deps, policy.capture, {
+    padPx: geometry.padPx,
+    ...geometry.floorPx !== void 0 ? { floorPx: geometry.floorPx } : {}
+  });
+  const attempt = { ...captured, contentHeight: cardHeight(captured.contentHeight, chrome) };
+  return {
+    viewport,
+    policy,
+    fit,
+    chrome,
+    declared: declaredBox !== void 0,
+    attempt,
+    ink: readInk(captured.png, chrome, canvas, geometry.inkInsetPx),
+    ...outcome !== void 0 ? { presentation: outcome } : {}
+  };
 }
 function fitVerdict(canvas, frame) {
   const contentHeight = frame.attempt.contentHeight;
   if (contentHeight === null || contentHeight <= frame.viewport.height || frame.policy.overflow === "none") return null;
   return canvasOverflowIssue(canvas, frame.viewport, contentHeight, frame.policy.overflow);
 }
+function overflowXVerdict(canvas, frame) {
+  const px = frame.attempt.overflowX;
+  if (px === void 0 || px === null || px <= OVERFLOW_X_ROUNDING_PX || frame.policy.overflow === "none") return null;
+  return canvasOverflowXIssue(canvas, frame.viewport, px, frame.policy.overflow);
+}
+async function judgeFrame(judge, config, model, png, originalPrompt, profileBlock, canvas, k, criteriaBlock) {
+  const [scoring, criteria] = await Promise.all([
+    Promise.all(Array.from({ length: k }, () => judgeAndParse(judge, config, model, png, originalPrompt, profileBlock, canvas))),
+    criteriaBlock.length > 0 ? judgeAndParse(judge, config, model, png, originalPrompt, profileBlock, canvas, criteriaBlock) : void 0
+  ]);
+  return { scoring, criteria };
+}
+function criteriaCallTokens(criteria) {
+  return criteria?.kind === "ok" ? { inputTokens: criteria.inputTokens, outputTokens: criteria.outputTokens } : void 0;
+}
+function criteriaReads(criteria) {
+  return criteria?.kind === "ok" ? [criteria.result.criteriaAnswers ?? []] : [];
+}
 function judgeCountFor(config, canvas) {
   const k = Math.max(1, Math.floor(config.judgeK ?? 1));
   if (k === 1) return 1;
@@ -4890,10 +5443,10 @@ function populationSigma(values) {
   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) {
+async function judgeAndParse(judge, config, model, screenshot, originalPrompt, profileBlock, canvas, criteriaBlock = "") {
   let firstReason;
   for (let attempt = 1; attempt <= 2; attempt++) {
-    const response = await judge(config, model, VISUAL_EVAL_PROMPT, screenshot, originalPrompt, profileBlock);
+    const response = await judge(config, model, VISUAL_EVAL_PROMPT, screenshot, originalPrompt, profileBlock, criteriaBlock);
     try {
       const result = parseVisualResponse(response.text, config.passThreshold);
       return { kind: "ok", result, inputTokens: response.inputTokens, outputTokens: response.outputTokens };
@@ -4942,7 +5495,7 @@ async function runVisualEvaluationDetailed(context, config, deps = {}) {
     const perCanvas = [];
     const perCanvasResults = [];
     for (const canvas of config.canvases) {
-      const frame = await frameCanvas(bundledCode, context, html, canvas, config.canvasViewports, deps);
+      const frame = await frameCanvas(bundledCode, context, html, canvas, config.canvasViewports, deps, config.hostPresentations);
       const { viewport, policy, fit, attempt: attempt2 } = frame;
       const screenshot2 = attempt2.png;
       if (!screenshot2) {
@@ -4952,8 +5505,22 @@ async function runVisualEvaluationDetailed(context, config, deps = {}) {
       }
       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 criteriaContext = context.criteria !== void 0 ? { ...context.criteria.context, canvas } : void 0;
+      const criteriaSelected = context.criteria !== void 0 && criteriaContext !== void 0 ? selectCriteria(context.criteria.bank, criteriaContext) : void 0;
+      const criteriaBlock = context.criteria !== void 0 && criteriaSelected !== void 0 ? buildCriteriaJudgeBlock(context.criteria.bank, criteriaSelected, {
+        frame: { canvas, width: viewport.width, height: viewport.height, ...frame.presentation?.status === "applied" ? { hostLabel: frame.presentation.applied.label } : {} },
+        ...config.sampleProps !== void 0 ? { propsJson: JSON.stringify(config.sampleProps) } : {}
+      }) : "";
+      const { scoring: answers, criteria: criteriaAnswer } = await judgeFrame(
+        judge,
+        config,
+        model,
+        screenshot2,
+        context.originalPrompt,
+        profileBlock,
+        canvas,
+        k,
+        criteriaBlock
       );
       const parsed = answers.filter((a) => a.kind === "ok");
       if (parsed.length === 0) {
@@ -4969,6 +5536,7 @@ async function runVisualEvaluationDetailed(context, config, deps = {}) {
       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 criteriaTokens = criteriaCallTokens(criteriaAnswer);
       const judgeRecord = {
         k,
         rule: "median",
@@ -4983,6 +5551,24 @@ async function runVisualEvaluationDetailed(context, config, deps = {}) {
         result2.issues.push(fitIssue);
         if (policy.overflow === "fail") result2.passed = false;
       }
+      const overflowXIssue = overflowXVerdict(canvas, frame);
+      if (overflowXIssue !== null) {
+        result2.issues.push(overflowXIssue);
+        if (policy.overflow === "fail") result2.passed = false;
+      }
+      const blankIssue = blankVerdict(canvas, frame);
+      if (blankIssue !== null) {
+        result2.issues.push(blankIssue);
+        result2.passed = false;
+      }
+      const inkRatio = frame.ink?.ratio ?? null;
+      const criteria = context.criteria !== void 0 && criteriaContext !== void 0 && criteriaSelected !== void 0 ? resolveCriteriaBlock({
+        bank: context.criteria.bank,
+        context: criteriaContext,
+        selected: criteriaSelected,
+        answers: criteriaReads(criteriaAnswer),
+        measurements: { overflow, contentHeight, viewportHeight: viewport.height, inkRatio }
+      }) : void 0;
       perCanvasResults.push(result2);
       perCanvas.push({
         canvas,
@@ -4992,12 +5578,16 @@ async function runVisualEvaluationDetailed(context, config, deps = {}) {
         screenshotPng: screenshot2,
         contentHeight,
         overflow,
+        inkRatio,
         judge: judgeRecord,
         ...fit !== void 0 ? { fit } : {},
-        ...frame.declared ? { declared: true } : {}
+        ...frame.declared ? { declared: true } : {},
+        ...criteria !== void 0 ? { criteria } : {},
+        ...criteriaTokens !== void 0 ? { criteriaTokens } : {},
+        ...frame.presentation !== void 0 ? { presentation: frame.presentation } : {}
       });
       console.log(
-        `[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}`
+        `[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})` : ""} ink=${inkRatio ?? "?"}${blankIssue !== null ? " BLANK" : ""} | in=${response2.inputTokens} out=${response2.outputTokens}` + (criteriaTokens !== void 0 ? ` | criteria in=${criteriaTokens.inputTokens} out=${criteriaTokens.outputTokens}` : "")
       );
     }
     const aggregate = aggregateCanvasResults(perCanvas, perCanvasResults);
@@ -5058,6 +5648,7 @@ function aggregateCanvasResults(perCanvas, results) {
     inputTokens += r.inputTokens ?? 0;
     outputTokens += r.outputTokens ?? 0;
   });
+  const criteriaSpent = perCanvas.flatMap((c) => c.criteriaTokens !== void 0 ? [c.criteriaTokens] : []);
   return {
     passed: perCanvas.every((c) => c.passed),
     finalScore: mean((r) => r.finalScore),
@@ -5066,6 +5657,12 @@ function aggregateCanvasResults(perCanvas, results) {
     ...critiques.length > 0 ? { critique: critiques.join("\n") } : {},
     inputTokens,
     outputTokens,
+    ...criteriaSpent.length > 0 ? {
+      criteriaTokens: {
+        inputTokens: criteriaSpent.reduce((sum, t) => sum + t.inputTokens, 0),
+        outputTokens: criteriaSpent.reduce((sum, t) => sum + t.outputTokens, 0)
+      }
+    } : {},
     canvases: [...perCanvas]
   };
 }
@@ -5078,9 +5675,17 @@ function summarizeVisualResult(result) {
     passed: c.passed,
     contentHeight: c.contentHeight,
     overflow: c.overflow,
+    inkRatio: c.inkRatio,
     judge: c.judge,
-    ...c.fit !== void 0 ? { fit: c.fit } : {}
+    ...c.fit !== void 0 ? { fit: c.fit } : {},
+    ...c.criteria !== void 0 ? { criteria: c.criteria } : {},
+    ...c.presentation !== void 0 ? { presentation: c.presentation } : {}
   }));
+  const blocks = result.canvases.map((c) => c.criteria).filter((b) => b !== void 0);
+  const idsWhere = (severity, verdict) => [
+    ...new Set(blocks.flatMap((b) => b.verdicts.filter((v) => v.severity === severity && v.verdict === verdict).map((v) => v.id)))
+  ];
+  const rollup = blocks.length > 0 ? { mustFailed: idsWhere("must", "fail"), shouldFailed: idsWhere("should", "fail"), mustNa: idsWhere("must", "n/a") } : void 0;
   const fitCanvas = result.canvases.find((c) => canvasFitPolicy(c.canvas).overflow === "fail" && c.contentHeight !== null);
   const fit = fitCanvas !== void 0 && fitCanvas.contentHeight !== null ? {
     canvas: fitCanvas.canvas,
@@ -5095,7 +5700,72 @@ function summarizeVisualResult(result) {
     canvases,
     ...fit !== void 0 ? { fit } : {},
     ...result.design !== void 0 ? { design: result.design } : {},
-    ...result.themeMode !== void 0 ? { themeMode: result.themeMode } : {}
+    ...result.themeMode !== void 0 ? { themeMode: result.themeMode } : {},
+    ...rollup !== void 0 ? { criteria: rollup } : {}
+  };
+}
+async function judgeStoredCapture(input, config, deps = {}) {
+  const judge = deps.judge ?? callMultimodalLLM;
+  const model = config.model ?? getDefaultVisualModel(config.provider);
+  const { canvas, viewport, png } = input;
+  const chrome = canvasChrome(canvas);
+  const ink = readInk(png, chrome, canvas);
+  const inkRatio = ink?.ratio ?? null;
+  const k = judgeCountFor(config, canvas);
+  const profileBlock = buildStylingProfileJudgeBlock(input.profile);
+  const criteriaContext = input.criteria !== void 0 ? { ...input.criteria.context, canvas } : void 0;
+  const criteriaSelected = input.criteria !== void 0 && criteriaContext !== void 0 ? selectCriteria(input.criteria.bank, criteriaContext) : void 0;
+  const criteriaBlock = input.criteria !== void 0 && criteriaSelected !== void 0 ? buildCriteriaJudgeBlock(input.criteria.bank, criteriaSelected, {
+    frame: { canvas, width: viewport.width, height: viewport.height },
+    ...input.sampleProps !== void 0 ? { propsJson: JSON.stringify(input.sampleProps) } : {}
+  }) : "";
+  const { scoring: answers, criteria: criteriaAnswer } = await judgeFrame(judge, config, model, png, input.originalPrompt, profileBlock, canvas, k, criteriaBlock);
+  const parsed = answers.filter((a) => a.kind === "ok");
+  if (parsed.length === 0) {
+    const first = answers.find((a) => a.kind === "unparsable");
+    return { kind: "unavailable", reason: first?.reason ?? "judge answer unparsable" };
+  }
+  const samples = parsed.map((a) => a.result.finalScore);
+  const median = medianOf(samples);
+  const result = parsed[samples.indexOf(median)].result;
+  const issues = [...result.issues];
+  let passed = median >= config.passThreshold;
+  const contentHeight = input.contentHeight;
+  const overflow = contentHeight !== null && contentHeight > viewport.height;
+  const policy = canvasFitPolicy(canvas);
+  if (overflow && contentHeight !== null && policy.overflow !== "none") {
+    issues.push(canvasOverflowIssue(canvas, viewport, contentHeight, policy.overflow));
+    if (policy.overflow === "fail") passed = false;
+  }
+  if (ink !== null && ink.lastInkRow === null) {
+    issues.push(canvasBlankIssue(canvas, viewport));
+    passed = false;
+  }
+  const criteria = input.criteria !== void 0 && criteriaContext !== void 0 && criteriaSelected !== void 0 ? resolveCriteriaBlock({
+    bank: input.criteria.bank,
+    context: criteriaContext,
+    selected: criteriaSelected,
+    answers: criteriaReads(criteriaAnswer),
+    measurements: { overflow, contentHeight, viewportHeight: viewport.height, inkRatio }
+  }) : void 0;
+  const criteriaTokens = criteriaCallTokens(criteriaAnswer);
+  return {
+    kind: "ok",
+    verdict: {
+      canvas,
+      viewport,
+      score: median,
+      passed,
+      issues,
+      judge: { k, rule: "median", samples, sigma: populationSigma(samples), notes: parsed.map((a) => a.result.critique ?? "") },
+      contentHeight,
+      overflow,
+      inkRatio,
+      ...criteria !== void 0 ? { criteria } : {},
+      inputTokens: parsed.reduce((sum, a) => sum + a.inputTokens, 0),
+      outputTokens: parsed.reduce((sum, a) => sum + a.outputTokens, 0),
+      ...criteriaTokens !== void 0 ? { criteriaTokens } : {}
+    }
   };
 }
 function salvageTruncatedVisualAnswer(text, passThreshold) {
@@ -5165,14 +5835,28 @@ function parseVisualResponse(text, passThreshold) {
     description: i.description || "",
     fix: i.fix || ""
   }));
+  const criteriaAnswers = parseCriteriaAnswers(raw.criteria);
   return {
     passed: finalScore >= passThreshold,
     finalScore,
     dimensions,
     issues,
-    critique: raw.critique
+    critique: raw.critique,
+    ...criteriaAnswers !== void 0 ? { criteriaAnswers } : {}
   };
 }
+function parseCriteriaAnswers(raw) {
+  if (!Array.isArray(raw)) return void 0;
+  const out = [];
+  for (const entry of raw) {
+    if (typeof entry !== "object" || entry === null) continue;
+    const o = entry;
+    if (typeof o.id !== "string") continue;
+    if (o.verdict !== "pass" && o.verdict !== "fail" && o.verdict !== "n/a") continue;
+    out.push({ id: o.id, verdict: o.verdict, evidence: typeof o.evidence === "string" ? o.evidence : "" });
+  }
+  return out;
+}
 function getDefaultVisualModel(provider) {
   switch (provider) {
     case "claude":
@@ -5204,11 +5888,43 @@ function toEvalIssue(issue) {
     fix: issue.fix || ""
   };
 }
-function cssTokensForAppTheme(theme, mode = "light") {
-  if (theme === void 0) return getCssTokens(mode);
-  return composeThemeCss({ layer: "page", mode: theme.mode ?? mode, appTheme: theme });
+function cssTokensForAppTheme(theme, mode = "light", themeId) {
+  if (theme === void 0 && themeId === void 0) return getCssTokens(mode);
+  return composeThemeCss({
+    layer: "page",
+    mode: theme?.mode ?? mode,
+    ...themeId !== void 0 ? { themeId } : {},
+    ...theme !== void 0 ? { appTheme: theme } : {}
+  });
+}
+
+// src/evaluation/criteria/context.ts
+var PRIMARY_500 = /--ggui-color-primary-500:\s*(#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6})\s*;/;
+var ACHROMATIC_SPREAD = 0.08;
+function chromaOfCssTokens(cssTokens) {
+  const m = cssTokens?.match(PRIMARY_500);
+  if (!m) return "unknown";
+  const hex = m[1].slice(1);
+  const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+  const channels = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
+  const spread = (Math.max(...channels) - Math.min(...channels)) / 255;
+  return spread < ACHROMATIC_SPREAD ? "achromatic" : "chromatic";
+}
+function criteriaContextFor(src) {
+  const v = src.classification.vector;
+  const preset = src.profile?.aesthetic?.id;
+  return {
+    hasActions: Object.keys(src.contract?.actionSpec ?? {}).length > 0,
+    riskTier: src.classification.riskTier,
+    axes: { render: v.render, state: v.state, writes: v.writes, fetch: v.fetch, layout: v.layout },
+    chroma: chromaOfCssTokens(src.cssTokens),
+    profilePresent: src.profile !== void 0,
+    shell: src.shell,
+    ...src.kind !== void 0 ? { kind: src.kind } : {},
+    ...preset !== void 0 ? { preset } : {}
+  };
 }
 
-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 };
+export { CANVAS_BREAKPOINTS, CANVAS_CLASSES, CANVAS_DESCRIPTORS, CANVAS_VIEWPORTS, CARD_HEIGHT_EXPRESSION, CONTENT_HEIGHT_EXPRESSION, CRITERIA, CRITERIA_SELECTOR_VERSION, DEFAULT_EVAL_MAX_ROUNDS, DEFAULT_QUALITY_CONFIG, HOST_COLOUR_PATTERN, HOST_FRAME_BOUNDS, INK_TOLERANCE, INSTRUMENT_BY_ID, JUDGE_GROUND_MARGIN_PX, JUDGE_INK_INSET_PX, 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, bankRows, buildCodingCriteriaSummary, buildCriteriaJudgeBlock, buildFixPrompt, callMultimodalLLM, canonicalCriteriaContext, canvasBlankIssue, canvasDisplayModeForShell, canvasFitPolicy, canvasForRendering, canvasForViewportWidth, canvasOverflowIssue, captureScreenshot, captureScreenshotDetailed, chromaOfCssTokens, computeEvaluationScore, createEvaluationToolsServer, criteriaBankSchema, criteriaContextFor, criteriaFor, criteriaSetIdFor, cssTokensForAppTheme, decodePng, describeCanvas, designTreeSha256, extractCompiledCode, extractCompiledCodeFromMessage, extractEvalResult, extractSourceCode, extractSourceCodeFromMessage, extractToolResultTexts, getActionableIssues, getCriteriaByPriority, getCriterionById, getEvaluatorSystemPrompt, getLLMCriteria, isBlocked, judgeDesignIdentity, judgeStoredCapture, matches, notApplicableCoverage, parseCriteriaBank, priorityForIssue, readInkExtent, resetJudgeDesignIdentityCache, resolveCriteriaBlock, resolveDesignPackageDir, resolveLaunchOptions, runAxisChecks, runEvaluation, runEvaluationLoop, runVisualEval, runVisualEvaluation, runVisualEvaluationDetailed, selectCriteria, summarizeVisualResult };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map