@ggui-ai/ui-gen 0.24.0 → 0.26.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';
@@ -815,6 +816,26 @@ async function collectLoginTurn(stream, opts) {
 }
 
 // src/harness/llm-router.ts
+function servedModelOf(name) {
+  return typeof name === "string" && name.length > 0 ? { servedModel: name } : {};
+}
+function anthropicFinishReason(stopReason) {
+  if (stopReason === null || stopReason === void 0) return void 0;
+  if (stopReason === "end_turn" || stopReason === "stop_sequence") return "stop";
+  if (stopReason === "max_tokens") return "length";
+  if (stopReason === "refusal") return "content-filter";
+  return "other";
+}
+function googleFinishReason(finishReason) {
+  if (finishReason === null || finishReason === void 0) return void 0;
+  if (finishReason === "STOP") return "stop";
+  if (finishReason === "MAX_TOKENS") return "length";
+  if (["SAFETY", "RECITATION", "BLOCKLIST", "PROHIBITED_CONTENT", "SPII", "IMAGE_SAFETY"].includes(finishReason)) return "content-filter";
+  return "other";
+}
+function visionFinish(finishReason) {
+  return finishReason !== void 0 ? { finishReason } : {};
+}
 function addStrictSchemaConstraints(schema) {
   const result = { ...schema };
   if (result.type === "object" && result.properties) {
@@ -1155,7 +1176,9 @@ var AnthropicAgent = class extends LLMAgent {
       return {
         text,
         inputTokens: response.usage.input_tokens,
-        outputTokens: response.usage.output_tokens
+        outputTokens: response.usage.output_tokens,
+        ...visionFinish(anthropicFinishReason(response.stop_reason)),
+        ...servedModelOf(response.model)
       };
     } catch (e) {
       emitLlmTraceEvent({
@@ -1766,7 +1789,9 @@ var GoogleAgent = class extends LLMAgent {
         text,
         // ggui#1186 (third site): `promptTokenCount` includes `cachedContentTokenCount` — report the non-cached input.
         inputTokens: splitCacheInclusiveUsage(usage?.promptTokenCount ?? 0, usage?.candidatesTokenCount ?? 0, usage?.cachedContentTokenCount ?? 0).tokens.input,
-        outputTokens: usage?.candidatesTokenCount ?? 0
+        outputTokens: usage?.candidatesTokenCount ?? 0,
+        ...visionFinish(googleFinishReason(response.candidates?.[0]?.finishReason)),
+        ...servedModelOf(response.modelVersion)
       };
       const endedAt = Date.now();
       emitLlmTraceEvent({
@@ -2513,12 +2538,12 @@ async function runEvaluationLoop(options) {
   const evaluationResults = [];
   let currentCode = context.compiledCode;
   let currentSourceCode = context.sourceCode;
-  let round = 0;
+  let round2 = 0;
   const maxRounds = Math.min(config.maxRounds ?? 3, MAX_EVAL_ROUNDS_HARD_LIMIT);
-  while (round < maxRounds) {
-    round++;
-    onProgress?.({ type: "evaluating", round });
-    console.log(`[eval] Round ${round}: evaluating...`);
+  while (round2 < maxRounds) {
+    round2++;
+    onProgress?.({ type: "evaluating", round: round2 });
+    console.log(`[eval] Round ${round2}: evaluating...`);
     const evalContext = {
       ...context,
       sourceCode: currentSourceCode || context.sourceCode
@@ -2526,13 +2551,13 @@ async function runEvaluationLoop(options) {
     const evalResult = await runEvaluation(evalContext, config);
     evaluationResults.push(evalResult);
     console.log(
-      `[eval] Round ${round}: score=${evalResult.finalScore}, passed=${evalResult.passed}, issues=${evalResult.issues.length}`
+      `[eval] Round ${round2}: score=${evalResult.finalScore}, passed=${evalResult.passed}, issues=${evalResult.issues.length}`
     );
-    if (evalResult.passed || round >= maxRounds) {
+    if (evalResult.passed || round2 >= maxRounds) {
       break;
     }
-    onProgress?.({ type: "fixing", round });
-    console.log(`[eval] Round ${round}: fixing...`);
+    onProgress?.({ type: "fixing", round: round2 });
+    console.log(`[eval] Round ${round2}: fixing...`);
     const fixPrompt = buildFixPrompt(evalResult, context.originalPrompt);
     const cliPath = process.env.CLAUDE_WRAPPER_PATH;
     const env = {};
@@ -2572,7 +2597,7 @@ async function runEvaluationLoop(options) {
     }
     if (fixedCompiledCode) {
       currentCode = fixedCompiledCode;
-      console.log(`[eval] Round ${round}: fixed code captured (${currentCode.length} bytes)`);
+      console.log(`[eval] Round ${round2}: fixed code captured (${currentCode.length} bytes)`);
     }
     if (fixedSourceCode) {
       currentSourceCode = fixedSourceCode;
@@ -3295,6 +3320,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 +3432,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 +3567,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 +4503,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 +4611,337 @@ 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"
+};
+var INSTRUMENT_BESIDE_JUDGE = {
+  "space.edge": "edge"
+};
+function besideRead(kind, m) {
+  if (m.edge === void 0) return { verdict: "n/a", evidence: "not measured: this capture had no page to read" };
+  if (m.edge === null) return { verdict: "n/a", evidence: "edge probe failed on this capture" };
+  return { verdict: m.edge.verdict, evidence: m.edge.evidence };
+}
+function majority(id, answers, unansweredReason) {
+  const votes = answers.flatMap((a) => a.filter((x) => x.id === id));
+  if (votes.length === 0) return { verdict: "n/a", evidence: unansweredReason ?? "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, unansweredReason) {
+  if (row.evaluation === "judge") return majority(row.id, answers, unansweredReason);
+  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, args.unansweredReason);
+    const beside = INSTRUMENT_BESIDE_JUDGE[row.id];
+    verdicts.push({
+      id: row.id,
+      severity: row.severity,
+      method: row.evaluation,
+      status: row.status,
+      source: s.source,
+      verdict: read.verdict,
+      evidence: read.evidence,
+      ...beside !== void 0 && row.evaluation === "judge" ? { instrument: besideRead(beside, args.measurements) } : {}
+    });
+  }
+  return {
+    criteriaSetId: args.selected.criteriaSetId,
+    bankVersion: args.bank.version,
+    selectorVersion: CRITERIA_SELECTOR_VERSION,
+    context: args.context,
+    selection: args.selected.selection,
+    verdicts,
+    ...args.call !== void 0 ? {
+      call: {
+        answer: args.call.answer,
+        // Kept answers whose id names no row of the bank: the judge answered something nobody asked.
+        unknownIds: args.answers.flat().filter((a) => !byId.has(a.id)).length,
+        ...args.call.finishReason !== void 0 ? { finishReason: args.call.finishReason } : {}
+      }
+    } : {}
+  };
+}
+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;
@@ -4544,10 +4988,360 @@ function judgeDesignIdentity(src) {
 function resetJudgeDesignIdentityCache() {
   identityCache.clear();
 }
+
+// src/evaluation/criteria/edge.ts
+var EDGE_TOLERANCE_PX = 2;
+var CARD = "card";
+var same = (a, b) => Math.abs(a - b) <= EDGE_TOLERANCE_PX;
+var overlaps = (a, b) => a.left < b.right && b.left < a.right;
+var axis = (b) => (b.left + b.right) / 2;
+function contentEdge(surface, blocks) {
+  const texts = blocks.filter((b) => b.within === surface.id && b.kind !== "surface" && b.role !== "centred");
+  if (texts.length === 0) return void 0;
+  const first = texts.reduce((a, b) => b.top < a.top ? b : a);
+  return first.textEdge ?? first.edge;
+}
+function columns(direct) {
+  const all = direct.filter((b) => b.kind !== "surface");
+  const bridges = (b) => {
+    const under = all.filter((x) => x !== b && overlaps(x, b));
+    return under.some((x, i) => under.slice(i + 1).some((y) => !overlaps(x, y)));
+  };
+  const flow = all.filter((b) => !bridges(b));
+  const parentPool = all.filter((b) => bridges(b));
+  const parent = flow.map((_, i) => i);
+  const find = (i) => parent[i] === i ? i : parent[i] = find(parent[i]);
+  for (let i = 0; i < flow.length; i += 1) for (let j = i + 1; j < flow.length; j += 1) if (overlaps(flow[i], flow[j])) parent[find(i)] = find(j);
+  const groups = /* @__PURE__ */ new Map();
+  flow.forEach((b, i) => groups.set(find(i), [...groups.get(find(i)) ?? [], b]));
+  const cols = [...groups.values()];
+  for (const s of direct.filter((b) => b.kind === "surface")) {
+    const hit = cols.filter((c) => c.some((b) => b.kind !== "surface" && overlaps(b, s)));
+    if (hit.length === 1) hit[0].push(s);
+    else parentPool.push(s);
+  }
+  const lp = parentPool.map((_, i) => i);
+  const lfind = (i) => lp[i] === i ? i : lp[i] = lfind(lp[i]);
+  for (let i = 0; i < parentPool.length; i += 1) for (let j = i + 1; j < parentPool.length; j += 1) if (overlaps(parentPool[i], parentPool[j])) lp[lfind(i)] = lfind(j);
+  const lgroups = /* @__PURE__ */ new Map();
+  parentPool.forEach((b, i) => lgroups.set(lfind(i), [...lgroups.get(lfind(i)) ?? [], b]));
+  cols.push(...lgroups.values());
+  return cols;
+}
+function checkColumn(container, col, blocks) {
+  const surfaces = col.filter((b) => b.kind === "surface");
+  const grounds = surfaces.flatMap((s) => {
+    const c = s.role === "table" ? void 0 : contentEdge(s, blocks);
+    return c === void 0 ? [] : [c];
+  });
+  const flow = col.filter((b) => b.kind !== "surface" && b.role !== "centred" && b.role !== "list-item");
+  const listItems = col.filter((b) => b.role === "list-item");
+  const candidates = [...flow.flatMap((b) => [b.edge, ...b.textEdge !== void 0 ? [b.textEdge] : []]), ...surfaces.flatMap((s) => [s.edge]), ...grounds];
+  const blockEdges = (b) => [b.edge, ...b.textEdge !== void 0 ? [b.textEdge] : []];
+  const endEdgesBesides = (b) => [...surfaces.map((s) => s.right), ...flow.filter((x) => x !== b && x.kind === "controls").map((x) => x.right)];
+  let best = candidates.length === 0 ? [] : null;
+  for (const E of candidates) {
+    const allowed = [E, ...grounds];
+    const off = [];
+    for (const b of flow) {
+      if (blockEdges(b).some((x) => allowed.some((a) => same(x, a)))) continue;
+      if (b.kind === "controls" && endEdgesBesides(b).some((r) => same(b.right, r))) continue;
+      const nearest = allowed.reduce((n, a) => Math.abs(a - b.edge) < Math.abs(n - b.edge) ? a : n);
+      off.push({ container, block: b.id, at: b.edge, nearest, offPx: Math.abs(b.edge - nearest) });
+    }
+    for (const s of surfaces) {
+      const c = s.role === "table" ? void 0 : contentEdge(s, blocks);
+      if (same(s.edge, E) || c !== void 0 && same(c, E)) continue;
+      const nearest = c !== void 0 && Math.abs(c - E) < Math.abs(s.edge - E) ? c : s.edge;
+      off.push({ container, block: s.id, at: nearest, nearest: E, offPx: Math.abs(nearest - E) });
+    }
+    if (best === null || off.length < best.length || off.length === best.length && sum(off) < sum(best)) best = off;
+    if (best.length === 0) break;
+  }
+  const offsets = best ?? [];
+  if (listItems.length > 1) {
+    const e0 = listItems[0].edge;
+    for (const li of listItems.slice(1)) if (!same(li.edge, e0)) offsets.push({ container, block: li.id, at: li.edge, nearest: e0, offPx: Math.abs(li.edge - e0) });
+  }
+  const centred = col.filter((b) => b.role === "centred");
+  const edgeAligned = col.filter((b) => b.role !== "centred");
+  const groupTop = centred.length > 0 ? Math.min(...centred.map((c) => c.top)) : 0;
+  const groupEndsColumn = centred.length > 1 && edgeAligned.every((b) => b.top < groupTop);
+  if (centred.length > 0 && edgeAligned.some((b) => b.kind !== "surface") && !groupEndsColumn) {
+    const E = flow[0]?.edge ?? edgeAligned[0].edge;
+    for (const c of centred) offsets.push({ container, block: c.id, at: c.edge, nearest: E, offPx: Math.abs(c.edge - E), reason: "a centred block in an edge-aligned column" });
+  } else if (centred.length > 1) {
+    const a0 = axis(centred[0]);
+    for (const c of centred.slice(1)) if (!same(axis(c), a0)) offsets.push({ container, block: c.id, at: axis(c), nearest: a0, offPx: Math.abs(axis(c) - a0) });
+  }
+  return offsets;
+}
+var sum = (o) => o.reduce((s, x) => s + x.offPx, 0);
+function judgeEdges(measured, opts = {}) {
+  if (opts.placeholdersOnly === true) return { verdict: "n/a", offsets: [], evidence: "only loading placeholders are shown; not evaluated" };
+  let blocks = measured;
+  const kept = blocks.filter((b) => b.role !== "placeholder");
+  const content = kept.filter((b) => b.kind !== "surface").length;
+  if (content < 2) return { verdict: "n/a", offsets: [], evidence: kept.length === 0 ? "no blocks were measured" : "fewer than two blocks once placeholders are set aside; not evaluated" };
+  blocks = kept;
+  const offsets = [];
+  const containers = [CARD, ...blocks.filter((b) => b.kind === "surface" && b.role !== "table").map((b) => b.id)];
+  for (const container of containers) {
+    const direct = blocks.filter((b) => (b.within ?? CARD) === container);
+    for (const col of columns(direct)) offsets.push(...checkColumn(container, col, blocks));
+  }
+  if (offsets.length === 0) return { verdict: "pass", offsets, evidence: "every column shares its edge, or sits on a stacked surface\u2019s content edge, within 2 px" };
+  const worst = offsets.reduce((a, b) => b.offPx > a.offPx ? b : a);
+  const lines = offsets.map((o) => `${o.block} at x${round(o.at)} is ${round(o.offPx)} px from x${round(o.nearest)} (in ${o.container}${o.reason !== void 0 ? `; ${o.reason}` : ""})`);
+  return { verdict: "fail", offsets, evidence: `${offsets.length} block(s) off the allowed edges, largest ${round(worst.offPx)} px: ${lines.join("; ")}` };
+}
+var round = (n) => (Math.round(n * 10) / 10).toString();
+
+// src/evaluation/criteria/edge-probe.ts
+var EDGE_BLOCKS_EXPRESSION = String.raw`(() => {
+  const root = document.getElementById('root');
+  if (!root) return null;
+  const rootBox = root.getBoundingClientRect();
+  const x0 = rootBox.left;
+  const px = (v) => Math.round((v - x0) * 2) / 2;
+  const CONTROL = 'button,input,select,textarea,[role="button"],[role="tab"],[role="switch"],[role="checkbox"],[role="radio"],[role="option"],[role="link"],a[href]';
+  const ALNUM = /[\p{L}\p{N}]/u;
+  const css = (el) => getComputedStyle(el);
+  const clear = (c) => !c || c === 'transparent' || /rgba\([^)]*,\s*0(\.0+)?\)$/.test(c);
+  // Visible through every ancestor (an ancestor at opacity 0 or visibility hidden hides it), and not degenerate.
+  const shown = (el) => {
+    const s = css(el);
+    if (s.display === 'none' || s.visibility === 'hidden' || Number(s.opacity) === 0) return false;
+    if (typeof el.checkVisibility === 'function' && !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return false;
+    const r = el.getBoundingClientRect();
+    return r.width > 1 && r.height > 1;
+  };
+  const inline = (s) => /^inline/.test(s.display) && s.display !== 'inline-block' && s.display !== 'inline-flex' && s.display !== 'inline-grid';
+  const groundOf = (el) => {
+    for (let p = el.parentElement; p; p = p.parentElement) { const b = css(p).backgroundColor; if (!clear(b)) return b; }
+    return 'rgb(255, 255, 255)';
+  };
+  const sides = (s) => ['Top', 'Right', 'Bottom', 'Left'].filter((k) => parseFloat(s['border' + k + 'Width']) > 0 && s['border' + k + 'Style'] !== 'none' && !clear(s['border' + k + 'Color'])).length;
+  const bounded = (el) => { const s = css(el); return sides(s) >= 1 || (!clear(s.backgroundColor) && s.backgroundColor !== groundOf(el)); };
+  // A control: a native or ARIA one, or a bounded box the visitor clicks (a pointer cursor or a tab stop) that holds no
+  // control of its own and is not the whole card. Its contents are not blocks of the column (decided 2026-10-02).
+  const isControl = (el) => {
+    const s = css(el);
+    if (inline(s)) return false;
+    if (el.matches(CONTROL)) return true;
+    if (el === root) return false;
+    const clickable = s.cursor === 'pointer' || (el.hasAttribute('tabindex') && el.tabIndex >= 0);
+    if (!clickable || !bounded(el) || el.querySelector(CONTROL)) return false;
+    const r = el.getBoundingClientRect();
+    return r.width * r.height < 0.6 * rootBox.width * rootBox.height;
+  };
+  const isTable = (el) => el.matches('table,[role="table"],[role="grid"]');
+  const isSurface = (el) => {
+    if (el === root || isControl(el)) return false;
+    const s = css(el);
+    if (/^inline/.test(s.display) || s.display === 'contents') return false;
+    if (isTable(el)) return true;
+    return sides(s) >= 3 || (!clear(s.backgroundColor) && s.backgroundColor !== groundOf(el)) || (s.boxShadow && s.boxShadow !== 'none');
+  };
+  const path = (el) => {
+    const parts = [];
+    for (let e = el; e && e !== root && parts.length < 4; e = e.parentElement) {
+      const i = e.parentElement ? Array.prototype.indexOf.call(e.parentElement.children, e) + 1 : 1;
+      parts.unshift(e.tagName.toLowerCase() + ':' + i);
+    }
+    return parts.join('>');
+  };
+  const label = (el) => { const t = (el.innerText || '').replace(/\s+/g, ' ').trim(); return path(el) + (t ? ' "' + t.slice(0, 24) + '"' : ''); };
+  const surfaces = [];
+  const surfaceOf = (el, self) => { for (let p = self ? el : el.parentElement; p && p !== root; p = p.parentElement) if (surfaces.indexOf(p) >= 0) return p; return null; };
+  const inTable = (el) => { for (let p = el.parentElement; p && p !== root; p = p.parentElement) if (isTable(p)) return true; return false; };
+  const inControl = (el) => { for (let p = el; p && p !== root; p = p.parentElement) if (isControl(p)) return p; return null; };
+  const all = Array.prototype.slice.call(root.querySelectorAll('*')).filter(shown);
+  for (const el of all) if (isSurface(el) && !inTable(el) && !inControl(el)) surfaces.push(el);
+  const ids = new Map();
+  const idOf = (el) => { if (!ids.has(el)) ids.set(el, label(el)); return ids.get(el); };
+  const blocks = [];
+  // Per block: the element it stands for and its first line's box, for rows.
+  const owners = [];
+  const lines = [];
+  // Per block: its raw line boxes and left, so a row reads the line two items share, not a wrapped item's widest line.
+  const rects = [];
+  const rawLeft = [];
+  const words = [];
+  const within = (el, self) => { const s = surfaceOf(el, self); return s ? { within: idOf(s) } : {}; };
+  for (const s of surfaces) {
+    const r = s.getBoundingClientRect();
+    owners.push(s); lines.push({ top: r.top, bottom: r.bottom }); rects.push([r]); rawLeft.push(r.left); words.push('');
+    // A placeholder: a box with no text, no control and no image or icon inside it (a loading bar). Not a block.
+    const holds = Array.prototype.some.call(s.querySelectorAll('*'), (el) => shown(el) && (el.matches(CONTROL) || el.tagName === 'IMG' || el.tagName.toLowerCase() === 'svg')) || ALNUM.test(s.innerText || '');
+    blocks.push(Object.assign({ id: idOf(s), kind: 'surface', edge: px(r.left), left: px(r.left), right: px(r.right), top: Math.round(r.top) }, within(s, false), isTable(s) ? { role: 'table' } : holds ? {} : { role: 'placeholder' }));
+  }
+  const blockOf = (node) => { for (let p = node.parentElement; p && p !== root; p = p.parentElement) if (!inline(css(p))) return p; return root; };
+  const groups = new Map();
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    if (!/\S/.test(n.data) || !n.parentElement || n.parentElement.closest('style,script,noscript,template') || !shown(n.parentElement) || inControl(n.parentElement) || inTable(n.parentElement)) continue;
+    const b = blockOf(n);
+    if (!groups.has(b)) groups.set(b, []);
+    groups.get(b).push(n);
+  }
+  // Ink: text whose own colour is not transparent. The edge is the first visible character in ink (decided 2026-10-02):
+  // leading invisible text, private-use icon-font glyphs and formatting characters are not characters of the block,
+  // while a currency sign or a quotation mark is.
+  const inked = (n) => !clear(css(n.parentElement).color) && ALNUM.test(n.data);
+  const textRects = (nodes) => {
+    const rs = [];
+    for (const n of nodes) { if (!inked(n)) continue; const range = document.createRange(); range.selectNodeContents(n); for (const r of range.getClientRects()) if (r.width > 0 && r.height > 0) rs.push(r); }
+    return rs;
+  };
+  const glyphAt = (n, i) => { const range = document.createRange(); range.setStart(n, i); range.setEnd(n, i + 1); const r = range.getClientRects()[0]; return r || null; };
+  const firstGlyph = (nodes) => {
+    for (const n of nodes) { if (!inked(n)) continue; const i = n.data.search(/[^\s\p{Co}\p{Cf}]/u); if (i < 0) continue; const r = glyphAt(n, i); if (r) return r; }
+    return null;
+  };
+  // A marker paints: a loaded image, an SVG with a filled or stroked shape, or an element with its own fill, border
+  // or visible text. An element that paints nothing is not a marker.
+  const painted = (m) => {
+    if (!shown(m)) return false;
+    if (m.tagName === 'IMG') return m.complete && m.naturalWidth > 0;
+    if (m.tagName.toLowerCase() === 'svg' || m.closest('svg')) {
+      const shapes = m.querySelectorAll('path,circle,rect,line,polyline,polygon,ellipse,use,text');
+      return Array.prototype.some.call(shapes, (sh) => { const st = css(sh); return (st.fill !== 'none' && !clear(st.fill)) || (st.stroke !== 'none' && !clear(st.stroke)); });
+    }
+    const s = css(m);
+    if (!clear(s.backgroundColor) || sides(s) >= 1 || ((m.textContent || '').trim().length > 0 && !clear(s.color))) return true;
+    // A wrapper that paints nothing itself is a marker when an image or icon inside it paints.
+    return Array.prototype.some.call(m.querySelectorAll('svg,img'), (k) => painted(k));
+  };
+  const markerBefore = (b, textLeft, lineTop, lineBottom) => {
+    const cands = [];
+    const consider = (m) => { if (!painted(m)) return; const r = m.getBoundingClientRect(); if (r.left < textLeft - 2 && r.bottom > lineTop && r.top < lineBottom) cands.push(r.left); };
+    for (const m of b.querySelectorAll('svg,img,[aria-hidden="true"],i')) if ((m.textContent || '').trim().length <= 2) consider(m);
+    const p = b.parentElement;
+    if (p && p !== root && /flex/.test(css(p).display) && !/column/.test(css(p).flexDirection)) for (const sib of p.children) { if (sib === b) break; if (sib.matches('svg,img,i,[aria-hidden="true"]') || !(sib.textContent || '').trim()) consider(sib); }
+    return cands.length ? Math.min.apply(null, cands) : null;
+  };
+  let texts = 0;
+  let ornaments = 0;
+  for (const [b, nodes] of groups) {
+    if (!nodes.some((n) => ALNUM.test(n.data))) { ornaments += 1; continue; }
+    const rs = textRects(nodes);
+    const g = firstGlyph(nodes);
+    if (!rs.length || g === null) continue;
+    texts += 1;
+    const first = g.left;
+    const left = Math.min.apply(null, rs.map((r) => r.left));
+    const right = Math.max.apply(null, rs.map((r) => r.right));
+    const top = Math.min.apply(null, rs.map((r) => r.top));
+    const marker = markerBefore(b, first, g.top, g.bottom);
+    const s = css(b);
+    const box = b.getBoundingClientRect();
+    const parent = b.parentElement ? css(b.parentElement) : null;
+    const centredText = s.textAlign === 'center' && right - left < box.width * 0.9;
+    const centredBox = parent && /flex/.test(parent.display) && /column/.test(parent.flexDirection) && parent.alignItems === 'center';
+    const list = b.matches('li') || s.display === 'list-item' ? b.closest('ul,ol') : null;
+    const inProse = list && list.previousElementSibling && list.previousElementSibling.matches('p');
+    const block = { id: idOf(b), kind: 'text', edge: px(marker !== null ? marker : first), left: px(Math.min(left, marker !== null ? marker : left)), right: px(right), top: Math.round(top) };
+    if (marker !== null) block.textEdge = px(first);
+    if (centredText || centredBox) block.role = 'centred';
+    else if (inProse) block.role = 'list-item';
+    owners.push(b); lines.push({ top: g.top, bottom: g.bottom }); rects.push(rs); rawLeft.push(Math.min(left, marker !== null ? marker : left)); words.push(nodes.map((n) => n.data).join('').trim());
+    blocks.push(Object.assign(block, within(b, true)));
+  }
+  const ctlGroups = new Map();
+  for (const el of all) { if (!isControl(el) || inTable(el) || (el.parentElement && inControl(el.parentElement))) continue; const p = el.parentElement || root; if (!ctlGroups.has(p)) ctlGroups.set(p, []); ctlGroups.get(p).push(el); }
+  let controls = 0;
+  for (const [p, els] of ctlGroups) {
+    const rs = els.map((e) => e.getBoundingClientRect());
+    const topRow = Math.min.apply(null, rs.map((r) => r.top));
+    let firstEl = null; let firstR = null;
+    els.forEach((e, i) => { const r = rs[i]; if (r.top - topRow < r.height / 2 && (!firstR || r.left < firstR.left)) { firstEl = e; firstR = r; } });
+    let edge = firstR.left;
+    if (!bounded(firstEl)) { const tw = document.createTreeWalker(firstEl, NodeFilter.SHOW_TEXT); const ns = []; for (let n = tw.nextNode(); n; n = tw.nextNode()) ns.push(n); const g = firstGlyph(ns); if (g) edge = g.left; }
+    controls += 1;
+    const ps = css(p);
+    const centred = ps.justifyContent === 'center' || (ps.textAlign === 'center' && !/flex|grid/.test(ps.display));
+    const block = { id: idOf(p) + ' [controls]', kind: 'controls', edge: px(edge), left: px(Math.min.apply(null, rs.map((r) => r.left))), right: px(Math.max.apply(null, rs.map((r) => r.right))), top: Math.round(topRow) };
+    if (centred) block.role = 'centred';
+    owners.push(firstEl); lines.push({ top: firstR.top, bottom: firstR.bottom }); rects.push(rs); rawLeft.push(Math.min.apply(null, rs.map((r) => r.left))); words.push('');
+    blocks.push(Object.assign(block, within(firstEl, true)));
+  }
+  // Rows (decided 2026-10-01, read by geometry 2026-10-02): items set on one line, however the CSS sets them. An item
+  // after another measured item on its line that holds one block (a text, a control, or a box holding at most one
+  // text) belongs to the row and is not measured; an item with a stack inside it is a column.
+  const dropped = new Set();
+  const sameLine = (a, b) => Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > Math.min(a.bottom - a.top, b.bottom - b.top) / 2;
+  const contains = (o, el) => o === el || o.contains(el);
+  const innerTexts = (i) => owners.map((el, k) => k).filter((k) => k !== i && blocks[k].kind !== 'surface' && contains(owners[i], owners[k]));
+  const isPill = (i) => blocks[i].kind === 'surface' && innerTexts(i).length <= 1 && !owners.some((el, k) => k !== i && blocks[k].kind === 'surface' && contains(owners[i], el));
+  const itemOf = (el, other) => { let e = el; while (e.parentElement && e.parentElement !== root && !e.parentElement.contains(other)) e = e.parentElement; return e; };
+  for (let i = 0; i < blocks.length; i += 1) {
+    if (blocks[i].kind === 'surface' && !isPill(i)) continue;
+    const before = blocks.findIndex((bj, j) => j !== i && bj.within === blocks[i].within && !(bj.kind === 'surface' && !isPill(j)) && !contains(owners[j], owners[i]) && !contains(owners[i], owners[j]) && rects[j].some((r) => sameLine(r, lines[i]) && r.right <= rawLeft[i] + 1));
+    if (before < 0) continue;
+    // A number or bullet in front of a text on its line is a hanging marker, not a row: the pair is one block with two
+    // edges, the marker's and the text's.
+    if (blocks[i].kind === 'text' && blocks[before].kind === 'text' && /^[\p{N}\p{P}\p{S}]{1,3}$/u.test(words[before])) {
+      blocks[i] = Object.assign({}, blocks[i], { edge: blocks[before].edge, left: Math.min(blocks[i].left, blocks[before].left), textEdge: blocks[i].edge });
+      delete blocks[i].role;
+      dropped.add(before);
+      continue;
+    }
+    const item = itemOf(owners[i], owners[before]);
+    const inside = owners.map((el, k) => k).filter((k) => contains(item, owners[k]) && blocks[k].kind !== 'surface');
+    const boxes = owners.map((el, k) => k).filter((k) => contains(item, owners[k]) && blocks[k].kind === 'surface' && k !== i);
+    if (blocks[i].kind === 'surface') { if (boxes.length === 0) { dropped.add(i); for (const k of innerTexts(i)) dropped.add(k); } continue; }
+    if (inside.length === 1 && boxes.length === 0) dropped.add(i);
+  }
+  const kept = blocks.filter((_, i) => !dropped.has(i));
+  // Placeholders: a frame with no text in ink shows nothing to evaluate, whatever controls or boxes it draws.
+  return { blocks: kept, placeholdersOnly: texts === 0, skipped: { rowItems: dropped.size, ornaments } };
+})()`;
+var KINDS = ["text", "controls", "surface"];
+var ROLES = ["list-item", "table", "centred", "placeholder"];
+var isKind = (v) => KINDS.some((k) => k === v);
+var isRole = (v) => ROLES.some((r) => r === v);
+var num = (v) => typeof v === "number" && Number.isFinite(v);
+var field = (o, key) => Reflect.get(o, key);
+function parseEdgeProbe(value) {
+  if (typeof value !== "object" || value === null) return null;
+  const raw = field(value, "blocks");
+  const placeholdersOnly = field(value, "placeholdersOnly");
+  if (!Array.isArray(raw) || typeof placeholdersOnly !== "boolean") return null;
+  const skippedRaw = field(value, "skipped");
+  if (typeof skippedRaw !== "object" || skippedRaw === null) return null;
+  const rowItems = field(skippedRaw, "rowItems");
+  const ornaments = field(skippedRaw, "ornaments");
+  if (!num(rowItems) || !num(ornaments)) return null;
+  const blocks = [];
+  for (const entry of raw) {
+    if (typeof entry !== "object" || entry === null) return null;
+    const [id, kind, edge, left, right, top] = ["id", "kind", "edge", "left", "right", "top"].map((k) => field(entry, k));
+    const [within, textEdge, role] = ["within", "textEdge", "role"].map((k) => field(entry, k));
+    if (typeof id !== "string" || !isKind(kind) || !num(edge) || !num(left) || !num(right) || !num(top)) return null;
+    if (within !== void 0 && typeof within !== "string") return null;
+    if (textEdge !== void 0 && !num(textEdge)) return null;
+    if (role !== void 0 && !isRole(role)) return null;
+    blocks.push({
+      id,
+      kind,
+      edge,
+      left,
+      right,
+      top,
+      ...within !== void 0 ? { within } : {},
+      ...textEdge !== void 0 ? { textEdge } : {},
+      ...role !== void 0 ? { role } : {}
+    });
+  }
+  return { blocks, placeholdersOnly, skipped: { rowItems, ornaments } };
+}
+
+// src/evaluation/visual-evaluator.ts
 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 +5349,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) };
 }
@@ -4571,11 +5421,32 @@ function canvasOverflowIssue(canvas, viewport, contentHeight, verdict) {
   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-overflow",
+    origin: "instrument",
     severity: verdict === "fail" ? "critical" : "major",
     description: `Rendered content is ${contentHeight}px tall on the ${canvas} canvas (${box}) \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 canvasOverflowXIssue(canvas, viewport, hiddenPx, verdict) {
+  return {
+    dimension: "canvas-overflow-x",
+    origin: "instrument",
+    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",
+    origin: "instrument",
+    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 +5562,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 +5586,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 +5643,40 @@ 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 measureEdges(page) {
+  try {
+    const probe = parseEdgeProbe(await page.evaluate(EDGE_BLOCKS_EXPRESSION));
+    if (probe === null) {
+      console.warn("[visual-eval] edge probe unavailable: the page returned no readable blocks");
+      return null;
+    }
+    return judgeEdges(probe.blocks, { placeholdersOnly: probe.placeholdersOnly });
+  } catch (e) {
+    console.warn(`[visual-eval] edge probe unavailable: ${e instanceof Error ? e.message : String(e)}`);
+    return null;
+  }
+}
+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,9 +5688,23 @@ 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 edge2 = await measureEdges(page);
+        const screenshot2 = await page.screenshot({ type: "png", fullPage: false, clip });
+        return { png: Buffer.from(screenshot2), contentHeight: cardHeightPx, overflowX, edge: edge2 };
+      }
       const contentHeight = await measureContentHeight(page);
+      const edge = await measureEdges(page);
       const screenshot = await page.screenshot({ type: "png", fullPage: capture === "full-page" });
-      return { png: Buffer.from(screenshot), contentHeight };
+      return { png: Buffer.from(screenshot), contentHeight, edge };
     } finally {
       await browser.close();
     }
@@ -4841,12 +5760,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 +5782,110 @@ ${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);
+}
+function judgeSalvageOf(error, text, finishReason) {
+  const cause = finishReason === void 0 ? "unknown" : finishReason === "length" ? "output-cap" : finishReason === "stop" ? "malformed" : "stopped";
+  const message = error instanceof Error ? error.message : String(error);
+  const position = /position (\d+)/.exec(message);
+  const start = text.indexOf("{");
+  const offset = position !== null ? (start > 0 ? start : 0) + Number(position[1]) : void 0;
+  const parseError = message.startsWith("Visual evaluator did not return valid JSON") ? "no complete JSON object in the answer" : message.replace(/"(?:[^"\\]|\\.)*"/g, '"\u2026"').slice(0, 160);
+  return { cause, ...finishReason !== void 0 ? { finishReason } : {}, parseError, ...offset !== void 0 ? { offset } : {}, chars: text.length };
+}
+function judgeRecordOf(k, parsed, samples, criteria, requestedModel) {
+  const salvaged = parsed.flatMap((a) => a.salvage !== void 0 ? [a.salvage.cause] : []);
+  const answered = [...parsed, ...criteria?.kind === "ok" ? [criteria] : []];
+  const served = [...new Set(answered.flatMap((a) => a.servedModel !== void 0 ? [a.servedModel] : []))];
+  const criteriaSalvaged = criteria?.kind === "ok" ? criteria.salvage?.cause : void 0;
+  return {
+    k,
+    rule: "median",
+    samples,
+    sigma: populationSigma(samples),
+    notes: parsed.map((a) => a.result.critique ?? ""),
+    ...salvaged.length > 0 ? { salvaged } : {},
+    ...criteriaSalvaged !== void 0 ? { criteriaSalvaged } : {},
+    models: { requested: requestedModel, served }
+  };
+}
+function callFacts(response) {
+  return {
+    ...response.finishReason !== void 0 ? { finishReason: response.finishReason } : {},
+    ...response.servedModel !== void 0 ? { servedModel: response.servedModel } : {}
+  };
+}
+var NO_CRITERIA_ARRAY = { array: false, received: 0, kept: 0, dropped: { notObject: 0, badId: 0, badVerdict: 0 } };
+function criteriaCallOf(criteria) {
+  if (criteria?.kind !== "ok") return {};
+  const answer = criteria.result.criteriaCounts ?? NO_CRITERIA_ARRAY;
+  return { call: { answer, ...criteria.finishReason !== void 0 ? { finishReason: criteria.finishReason } : {} } };
+}
+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.salvage === void 0 ? [criteria.result.criteriaAnswers ?? []] : [];
+}
+function criteriaUnansweredReason(criteria) {
+  return criteria?.kind === "ok" && criteria.salvage !== void 0 ? { unansweredReason: `not answered: the criteria answer was salvaged (${criteria.salvage.cause})` } : {};
+}
 function judgeCountFor(config, canvas) {
   const k = Math.max(1, Math.floor(config.judgeK ?? 1));
   if (k === 1) return 1;
@@ -4890,18 +5901,22 @@ 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 };
+      return { kind: "ok", result, inputTokens: response.inputTokens, outputTokens: response.outputTokens, ...callFacts(response) };
     } 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 salvage = judgeSalvageOf(e, response.text, response.finishReason);
+        const token = criteriaBlock.length > 0 ? "visual_criteria_salvaged" : "visual_judge_salvaged";
+        console.warn(
+          `[visual-eval] ${token}${canvas ? ` canvas=${canvas}` : ""} cause=${salvage.cause} finish=${salvage.finishReason ?? "unreported"} at=${salvage.offset ?? "?"}/${salvage.chars} (${salvage.parseError}): score recovered from the closed prefix, issues list partial`
+        );
+        return { kind: "ok", result: salvaged, inputTokens: response.inputTokens, outputTokens: response.outputTokens, salvage, ...callFacts(response) };
       }
       const reason = `judge answer unparsable: ${e instanceof Error ? e.message : String(e)}`;
       if (attempt === 1) {
@@ -4942,7 +5957,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 +5967,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) {
@@ -4966,16 +5995,11 @@ async function runVisualEvaluationDetailed(context, config, deps = {}) {
       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);
+      result2.inputTokens = parsed.reduce((sum2, a) => sum2 + a.inputTokens, 0);
+      result2.outputTokens = parsed.reduce((sum2, a) => sum2 + 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 criteriaTokens = criteriaCallTokens(criteriaAnswer);
+      const judgeRecord = judgeRecordOf(k, parsed, samples, criteriaAnswer, model);
       const contentHeight = attempt2.contentHeight;
       const overflow = contentHeight !== null && contentHeight > viewport.height;
       const fitIssue = fitVerdict(canvas, frame);
@@ -4983,6 +6007,26 @@ 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, edge: attempt2.edge ?? null },
+        ...criteriaUnansweredReason(criteriaAnswer),
+        ...criteriaCallOf(criteriaAnswer)
+      }) : void 0;
       perCanvasResults.push(result2);
       perCanvas.push({
         canvas,
@@ -4992,12 +6036,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);
@@ -5039,7 +6087,7 @@ function canvasScopedIssue(canvas, issue) {
 }
 function aggregateCanvasResults(perCanvas, results) {
   const n = results.length;
-  const mean = (pick) => Math.round(results.reduce((sum, r) => sum + pick(r), 0) / n);
+  const mean = (pick) => Math.round(results.reduce((sum2, r) => sum2 + pick(r), 0) / n);
   const dimensions = {
     completeness: mean((r) => r.dimensions.completeness),
     visualPolish: mean((r) => r.dimensions.visualPolish),
@@ -5058,7 +6106,19 @@ function aggregateCanvasResults(perCanvas, results) {
     inputTokens += r.inputTokens ?? 0;
     outputTokens += r.outputTokens ?? 0;
   });
+  const criteriaSpent = perCanvas.flatMap((c) => c.criteriaTokens !== void 0 ? [c.criteriaTokens] : []);
+  const judgeSalvage = {
+    scoring: {
+      salvaged: perCanvas.reduce((sum2, c) => sum2 + (c.judge.salvaged?.length ?? 0), 0),
+      answers: perCanvas.reduce((sum2, c) => sum2 + c.judge.samples.length, 0)
+    },
+    criteria: {
+      salvaged: perCanvas.filter((c) => c.judge.criteriaSalvaged !== void 0).length,
+      answered: perCanvas.filter((c) => c.criteriaTokens !== void 0).length
+    }
+  };
   return {
+    judgeSalvage,
     passed: perCanvas.every((c) => c.passed),
     finalScore: mean((r) => r.finalScore),
     dimensions,
@@ -5066,6 +6126,12 @@ function aggregateCanvasResults(perCanvas, results) {
     ...critiques.length > 0 ? { critique: critiques.join("\n") } : {},
     inputTokens,
     outputTokens,
+    ...criteriaSpent.length > 0 ? {
+      criteriaTokens: {
+        inputTokens: criteriaSpent.reduce((sum2, t) => sum2 + t.inputTokens, 0),
+        outputTokens: criteriaSpent.reduce((sum2, t) => sum2 + t.outputTokens, 0)
+      }
+    } : {},
     canvases: [...perCanvas]
   };
 }
@@ -5078,9 +6144,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 +6169,74 @@ 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 },
+    ...criteriaUnansweredReason(criteriaAnswer),
+    ...criteriaCallOf(criteriaAnswer)
+  }) : void 0;
+  const criteriaTokens = criteriaCallTokens(criteriaAnswer);
+  return {
+    kind: "ok",
+    verdict: {
+      canvas,
+      viewport,
+      score: median,
+      passed,
+      issues,
+      judge: judgeRecordOf(k, parsed, samples, criteriaAnswer, model),
+      contentHeight,
+      overflow,
+      inkRatio,
+      ...criteria !== void 0 ? { criteria } : {},
+      inputTokens: parsed.reduce((sum2, a) => sum2 + a.inputTokens, 0),
+      outputTokens: parsed.reduce((sum2, a) => sum2 + a.outputTokens, 0),
+      ...criteriaTokens !== void 0 ? { criteriaTokens } : {}
+    }
   };
 }
 function salvageTruncatedVisualAnswer(text, passThreshold) {
@@ -5132,7 +6273,7 @@ function salvageTruncatedVisualAnswer(text, passThreshold) {
     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]`
+    critique: `[salvaged judge answer \u2014 it did not parse; score recovered from the closed prefix; ${issues.length} issue(s) kept, the rest and the critique lost]`
   });
   return parseVisualResponse(rebuilt, passThreshold);
 }
@@ -5161,18 +6302,44 @@ function parseVisualResponse(text, passThreshold) {
   };
   const issues = (raw.issues || []).map((i) => ({
     dimension: i.dimension || "visual",
+    origin: "judge",
     severity: i.severity || "minor",
     description: i.description || "",
     fix: i.fix || ""
   }));
+  const criteria = parseCriteriaAnswers(raw.criteria);
   return {
     passed: finalScore >= passThreshold,
     finalScore,
     dimensions,
     issues,
-    critique: raw.critique
+    critique: raw.critique,
+    ...criteria.answers !== void 0 ? { criteriaAnswers: criteria.answers } : {},
+    criteriaCounts: criteria.counts
   };
 }
+function parseCriteriaAnswers(raw) {
+  if (!Array.isArray(raw)) return { counts: NO_CRITERIA_ARRAY };
+  const answers = [];
+  const dropped = { notObject: 0, badId: 0, badVerdict: 0 };
+  for (const entry of raw) {
+    if (typeof entry !== "object" || entry === null) {
+      dropped.notObject += 1;
+      continue;
+    }
+    const o = entry;
+    if (typeof o.id !== "string") {
+      dropped.badId += 1;
+      continue;
+    }
+    if (o.verdict !== "pass" && o.verdict !== "fail" && o.verdict !== "n/a") {
+      dropped.badVerdict += 1;
+      continue;
+    }
+    answers.push({ id: o.id, verdict: o.verdict, evidence: typeof o.evidence === "string" ? o.evidence : "" });
+  }
+  return { answers, counts: { array: true, received: raw.length, kept: answers.length, dropped } };
+}
 function getDefaultVisualModel(provider) {
   switch (provider) {
     case "claude":
@@ -5191,7 +6358,12 @@ async function runVisualEval(context, config, deps = {}) {
   const issues = (result.issues || []).map(toEvalIssue);
   const summary = summarizeVisualResult(result);
   const coverage = { status: "ran" };
-  return summary === void 0 ? { issues, coverage } : { issues, summary, coverage };
+  const tokens = result.inputTokens !== void 0 && result.outputTokens !== void 0 ? {
+    inputTokens: result.inputTokens,
+    outputTokens: result.outputTokens,
+    ...result.criteriaTokens !== void 0 ? { criteria: result.criteriaTokens } : {}
+  } : void 0;
+  return { issues, ...summary !== void 0 ? { summary } : {}, coverage, ...tokens !== void 0 ? { tokens } : {} };
 }
 function toEvalIssue(issue) {
   return {
@@ -5201,14 +6373,55 @@ function toEvalIssue(issue) {
     subcategory: issue.dimension,
     severity: issue.severity === "critical" ? "critical" : "major",
     description: issue.description,
-    fix: issue.fix || ""
+    fix: issue.fix || "",
+    ...issue.origin !== void 0 ? { origin: issue.origin } : {}
   };
 }
-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 } : {}
+  };
+}
+
+// src/evaluation/judge-spend.ts
+function judgedFrameTokens(result) {
+  return {
+    inputTokens: (result.inputTokens ?? 0) + (result.criteriaTokens?.inputTokens ?? 0),
+    outputTokens: (result.outputTokens ?? 0) + (result.criteriaTokens?.outputTokens ?? 0)
+  };
 }
 
-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, EDGE_BLOCKS_EXPRESSION, EDGE_TOLERANCE_PX, HOST_COLOUR_PATTERN, HOST_FRAME_BOUNDS, INK_TOLERANCE, INSTRUMENT_BESIDE_JUDGE, 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, judgeEdges, judgeStoredCapture, judgedFrameTokens, matches, notApplicableCoverage, parseCriteriaBank, parseEdgeProbe, priorityForIssue, readInkExtent, resetJudgeDesignIdentityCache, resolveCriteriaBlock, resolveDesignPackageDir, resolveLaunchOptions, runAxisChecks, runEvaluation, runEvaluationLoop, runVisualEval, runVisualEvaluation, runVisualEvaluationDetailed, selectCriteria, summarizeVisualResult };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map