@ggui-ai/ui-gen 0.18.0 → 0.20.0

package/dist/evaluation/index.d.ts

@@ -1,10 +1,10 @@
-import { C as CanvasJudgeRecord, E as EvalIssue, V as VisualEvalSummary } from '../types-public-DVSssdc-.js';
-export { A as AxisCheck, a as AxisCheckInput, d as CRITERIA, e as CanvasVisualSummary, f as CriterionCoverage, g as CriterionRunStatus, D as DEFAULT_QUALITY_CONFIG, h as EvalCategory, i as EvalCriterion, j as EvalOutcome, b as EvalResult, c as EvalTier, L as LLM_EVAL_STATIC_CRITERIA, P as Priority, Q as QualityConfig, k as QualityMode, l as buildCodingCriteriaSummary, n as criteriaFor, o as getActionableIssues, p as getCriteriaByPriority, q as getCriterionById, r as getLLMCriteria, s as isBlocked, m as matches, t as notApplicableCoverage, u as priorityForIssue } from '../types-public-DVSssdc-.js';
+import { C as CanvasJudgeRecord, E as EvalIssue, V as VisualEvalSummary } from '../types-public-DKR_h70H.js';
+export { A as AxisCheck, a as AxisCheckInput, d as CRITERIA, e as CanvasVisualSummary, f as CriterionCoverage, g as CriterionRunStatus, D as DEFAULT_QUALITY_CONFIG, h as EvalCategory, i as EvalCriterion, j as EvalOutcome, b as EvalResult, c as EvalTier, L as LLM_EVAL_STATIC_CRITERIA, P as Priority, Q as QualityConfig, k as QualityMode, l as buildCodingCriteriaSummary, n as criteriaFor, o as getActionableIssues, p as getCriteriaByPriority, q as getCriterionById, r as getLLMCriteria, s as isBlocked, m as matches, t as notApplicableCoverage, u as priorityForIssue } from '../types-public-DKR_h70H.js';
 import * as _anthropic_ai_claude_agent_sdk from '@anthropic-ai/claude-agent-sdk';
 import { McpServerConfig } from '@anthropic-ai/claude-agent-sdk';
 import { EvaluationContext, EvaluationConfig, QualityMetadata, EvaluationResult, EvaluationIssue } from './types.js';
 export { DEFAULT_EVAL_MAX_ROUNDS, DimensionScores, MAX_EVAL_ROUNDS_HARD_LIMIT } from './types.js';
-export { R as RunAxisChecksInput, r as runAxisChecks } from '../dispatch-D2htzi9h.js';
+export { R as RunAxisChecksInput, r as runAxisChecks } from '../dispatch-N8wdNOX-.js';
 import { A as AgentConfig, L as LLMResponse } from '../llm-router-D7fjBhtr.js';
 import { G as GenerationProfileInput } from '../styling-profile-CxfvV48g.js';
 import { LaunchOptions } from 'puppeteer-core';

package/dist/evaluation/index.js

@@ -9,7 +9,7 @@ import { fileURLToPath } from 'url';
 import { query, createSdkMcpServer, tool } from '@anthropic-ai/claude-agent-sdk';
 import Anthropic from '@anthropic-ai/sdk';
 import { z } from 'zod';
-import { LUCIDE_ICON_NAMES } from '@ggui-ai/design';
+import { LUCIDE_ICON_NAMES, maxWidth } from '@ggui-ai/design';
 import { listContractGadgets, HOOK_NAME_RE, STDLIB_GADGETS_PACKAGE, APP_GENERATION_PROFILE_BOUNDS } from '@ggui-ai/protocol';
 import { createHash } from 'crypto';
 import { build } from 'esbuild';
@@ -5402,6 +5402,85 @@ function createEvaluationToolsServer(passThreshold = 70) {
     ]
   });
 }
+
+// src/design-mode.ts
+var CANVAS_CLASSES = [
+  "xs-chat-card",
+  "mobile-fullscreen-small",
+  "md",
+  "lg",
+  "xl"
+];
+var CANVAS_VIEWPORTS = {
+  "xs-chat-card": { width: 400, height: 640 },
+  "mobile-fullscreen-small": { width: 390, height: 844 },
+  md: { width: 768, height: 1024 },
+  lg: { width: 1024, height: 768 },
+  xl: { width: 1440, height: 900 }
+};
+function displayModeForCanvas(canvas) {
+  return canvas === "xs-chat-card" ? "inline" : "fullscreen";
+}
+function canvasDisplayModeForShell(shell) {
+  return shell === "chat" || shell === "inline" ? "inline" : "fullscreen";
+}
+var CANVAS_BREAKPOINTS = { md: 600, lg: 1024, xl: 1440 };
+function canvasForViewportWidth(mode, width) {
+  if (mode === "inline") return "xs-chat-card";
+  if (width < CANVAS_BREAKPOINTS.md) return "mobile-fullscreen-small";
+  if (width < CANVAS_BREAKPOINTS.lg) return "md";
+  if (width < CANVAS_BREAKPOINTS.xl) return "lg";
+  return "xl";
+}
+function canvasForRendering(shellType, screen) {
+  const shell = shellType ?? "fullscreen";
+  if (canvasDisplayModeForShell(shell) === "inline") return "xs-chat-card";
+  if (shell === "spatial") return "md";
+  switch (screen ?? "universal") {
+    case "mobile":
+      return "mobile-fullscreen-small";
+    case "tablet":
+      return "md";
+    default:
+      return "lg";
+  }
+}
+var CANVAS_DESCRIPTORS = {
+  "xs-chat-card": {
+    label: "extra-small chat card",
+    minWidthPx: 320,
+    maxWidthPx: 480,
+    host: "an inline card inside a chat message bubble \u2014 the host draws the card border, shadow and rounded corners; the component fills the bubble width and takes its natural height"
+  },
+  "mobile-fullscreen-small": {
+    label: "small mobile fullscreen",
+    minWidthPx: 320,
+    maxWidthPx: 599,
+    host: "a phone-sized viewport the component owns edge to edge \u2014 single column, touch targets at least 44px, the component manages its own scroll"
+  },
+  md: {
+    label: "medium panel",
+    minWidthPx: 600,
+    maxWidthPx: 1023,
+    host: "a tablet viewport or a floating panel (spatial / picture-in-picture) \u2014 one or two columns, medium density"
+  },
+  lg: {
+    label: "large fullscreen",
+    minWidthPx: 1024,
+    maxWidthPx: 1439,
+    host: "a desktop viewport the component owns edge to edge \u2014 multi-column layouts, hover states and pointer interactions are available"
+  },
+  xl: {
+    label: "extra-large fullscreen",
+    minWidthPx: 1440,
+    maxWidthPx: 1920,
+    host: "a wide desktop viewport the component owns edge to edge \u2014 cap content width or use the extra room deliberately; never stretch a single column across the whole width"
+  }
+};
+function describeCanvas(canvas) {
+  const d = CANVAS_DESCRIPTORS[canvas];
+  return `This component renders on the \`${canvas}\` canvas (${d.label}): ${d.minWidthPx}\u2013${d.maxWidthPx}px wide, ${d.host}. Design for the whole range \u2014 the host may size the iframe anywhere inside it, and the host owns the height: size to your content, never to the viewport.`;
+}
 var ID_FIELD_CANDIDATES = ["id", "uuid", "symbol", "key", "slug", "code"];
 function getItemsProperties(p) {
   return p.items?.properties ?? p.schema?.items?.properties;
@@ -5843,6 +5922,122 @@ function runTerminalActionUnguarded(input) {
     )
   ];
 }
+function rootOpeningTag(sourceCode) {
+  const start = sourceCode.indexOf("export default function");
+  const body = start >= 0 ? sourceCode.slice(start) : sourceCode;
+  const ret = /\breturn\s*\(?\s*</.exec(body);
+  if (ret === null) return null;
+  const at = ret.index + ret[0].length - 1;
+  const nameMatch = /^<([A-Za-z][\w.]*)/.exec(body.slice(at));
+  if (nameMatch === null) return null;
+  let j = at + nameMatch[0].length;
+  let depth = 0;
+  let quote = null;
+  for (; j < body.length; j++) {
+    const ch = body[j];
+    if (quote !== null) {
+      if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === "`") quote = ch;
+    else if (ch === "{") depth++;
+    else if (ch === "}") depth--;
+    else if (ch === ">" && depth === 0) break;
+  }
+  return { name: nameMatch[1], attrs: body.slice(at + nameMatch[0].length, j) };
+}
+var CONTAINER_PRESETS = maxWidth;
+var NOT_A_CAP = /* @__PURE__ */ new Set(["full", "none", "100%", "unset", "initial", "inherit"]);
+function capPx(value) {
+  const v = value.trim();
+  if (NOT_A_CAP.has(v)) return void 0;
+  const resolved = CONTAINER_PRESETS[v] ?? v;
+  if (NOT_A_CAP.has(resolved)) return void 0;
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(resolved);
+  return px === null ? null : Number(px[1]);
+}
+function findRootWidthCap(sourceCode) {
+  const root = rootOpeningTag(sourceCode);
+  if (root === null) return null;
+  const { name, attrs } = root;
+  const prop = /\bmaxWidth\s*=\s*(?:"([^"]*)"|'([^']*)'|\{\s*(?:"([^"]*)"|'([^']*)'|(\d+(?:\.\d+)?))\s*\})/.exec(attrs);
+  if (prop !== null) {
+    const raw = prop[1] ?? prop[2] ?? prop[3] ?? prop[4] ?? `${prop[5]}px`;
+    const px = capPx(raw);
+    return px === void 0 ? null : { element: name, cap: `maxWidth="${raw}"`, px };
+  }
+  const style = /\bmaxWidth\s*:\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|(\d+(?:\.\d+)?))/.exec(attrs);
+  if (style !== null) {
+    const raw = style[1] ?? style[2] ?? style[3] ?? `${style[4]}px`;
+    const px = capPx(raw);
+    return px === void 0 ? null : { element: name, cap: `maxWidth: '${raw}'`, px };
+  }
+  const cls = /(?<![\w-])max-w-([\w[\]%.-]+)/.exec(attrs);
+  if (cls !== null) {
+    if (cls[1] === "full" || cls[1] === "none") return null;
+    return { element: name, cap: `max-w-${cls[1]}`, px: null };
+  }
+  if (name === "Container") return { element: name, cap: "lg (Container default)", px: capPx("lg") ?? null };
+  return null;
+}
+var WIDE_CANVASES = /* @__PURE__ */ new Set(["md", "lg", "xl"]);
+function runRootWidthCap(input) {
+  if (input.compiledCode === null) return [];
+  if (input.canvas === void 0 || !WIDE_CANVASES.has(input.canvas)) return [];
+  const cap2 = findRootWidthCap(input.sourceCode);
+  if (cap2 === null) return [];
+  const width = CANVAS_VIEWPORTS[input.canvas].width;
+  if (cap2.px !== null && cap2.px >= width) return [];
+  const sized = cap2.px !== null ? `${cap2.px}px on a ${width}px canvas` : `on a ${width}px canvas`;
+  return [
+    mkIssue(
+      "universal.root_width_cap",
+      `The outermost element <${cap2.element}> carries a width cap (${cap2.cap}, ${sized}): on this canvas the card becomes a narrow strip with the frame's ground on either side. The frame owns the width; a cap belongs INSIDE the root, on the column that holds text.`,
+      'Let the root fill the frame \u2014 drop the cap on the element you return at the top (or `maxWidth="full"`) \u2014 and put the reading measure on an inner column: `<Box padding="lg"><Container maxWidth="sm">\u2026</Container></Box>`.',
+      "warn"
+    )
+  ];
+}
+var LABEL_SPECIAL_CHAR = /[^a-z0-9\s]/i;
+var normText = (s) => s.toLowerCase().replace(/\s+/g, " ").trim();
+var alnumText = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+function visibleText(sourceCode) {
+  const jsx = (sourceCode.match(/>([^<>]*)</g) ?? []).map((m2) => m2.slice(1, -1).replace(/\{[^}]*\}/g, " ")).join(" ");
+  let attrs = "";
+  const attrRx = /\b(?:aria-label|placeholder|title|alt)\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+  let m;
+  while ((m = attrRx.exec(sourceCode)) !== null) attrs += " " + (m[1] ?? m[2] ?? "");
+  return jsx + " " + attrs;
+}
+function findDroppedActionLabels(sourceCode, contract) {
+  const actionSpec = contract?.actionSpec;
+  if (actionSpec === void 0) return [];
+  if (/\.label\b/.test(sourceCode)) return [];
+  const vis = visibleText(sourceCode);
+  const normVis = normText(vis);
+  const alnumVis = alnumText(vis);
+  const out = [];
+  for (const [name, entry] of Object.entries(actionSpec)) {
+    const label = entry.label;
+    if (typeof label !== "string" || label.length === 0 || label === name) continue;
+    if (!LABEL_SPECIAL_CHAR.test(label)) continue;
+    if (alnumText(label).length < 3) continue;
+    if (normVis.includes(normText(label))) continue;
+    if (alnumVis.includes(alnumText(label))) out.push({ name, label });
+  }
+  return out;
+}
+function runActionLabelDropped(input) {
+  if (input.compiledCode === null) return [];
+  return findDroppedActionLabels(input.sourceCode, input.contract).map(
+    ({ name, label }) => mkIssue(
+      "universal.action_label_dropped",
+      `The action "${name}" declares label "${label}", but the rendered control appears to drop its "${label.replace(/[a-z0-9\s]/gi, "").trim()}": the label's words are in the generated source, the full label is not \u2014 a transcription drop (ggui#1190).`,
+      `Render the label EXACTLY as the contract states it \u2014 button text should be the verbatim \`actionSpec.${name}.label\`, or render it from data (\`{x.label}\`), never a re-typed copy that drops "&", "/", "+", etc.`,
+      "warn"
+    )
+  );
+}
 var UNIVERSAL_CHECKS = [
   {
     id: "universal.icon_name_known",
@@ -5862,6 +6057,18 @@ var UNIVERSAL_CHECKS = [
     values: ALL_RENDER_VALUES,
     run: runViewportSized
   },
+  {
+    id: "universal.root_width_cap",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runRootWidthCap
+  },
+  {
+    id: "universal.action_label_dropped",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runActionLabelDropped
+  },
   {
     id: "universal.terminal_action_unguarded",
     axis: "render",
@@ -6911,7 +7118,8 @@ function runAxisChecks(classification, input) {
     ...input.contract !== void 0 ? { contract: input.contract } : {},
     originalPrompt: input.originalPrompt,
     classification,
-    ...input.designMode !== void 0 ? { designMode: input.designMode } : {}
+    ...input.designMode !== void 0 ? { designMode: input.designMode } : {},
+    ...input.canvas !== void 0 ? { canvas: input.canvas } : {}
   };
   if (input.compiledCode === null) {
     traceAxisChecksSkipped(facts, "compiledCode null \u2014 no check ran");
@@ -6956,7 +7164,9 @@ function traceFacts(input) {
     designMode: input.designMode ?? "constrained",
     classification: input.classification.vector,
     propsSpecKeys: Object.keys(propsSpec ?? {}),
-    propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {})
+    propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {}),
+    // No default here, unlike designMode: an absent canvas is a fact about the caller, not a guess to paper over.
+    ...input.canvas !== void 0 ? { canvas: input.canvas } : {}
   };
 }
 var STYLING_PROFILE_TRUNCATION_MARKER = " \u2026[truncated at the profile bound]";
@@ -7061,87 +7271,6 @@ function judgeDesignIdentity(src) {
 function resetJudgeDesignIdentityCache() {
   identityCache.clear();
 }
-
-// src/design-mode.ts
-var CANVAS_CLASSES = [
-  "xs-chat-card",
-  "mobile-fullscreen-small",
-  "md",
-  "lg",
-  "xl"
-];
-var CANVAS_VIEWPORTS = {
-  "xs-chat-card": { width: 400, height: 640 },
-  "mobile-fullscreen-small": { width: 390, height: 844 },
-  md: { width: 768, height: 1024 },
-  lg: { width: 1024, height: 768 },
-  xl: { width: 1440, height: 900 }
-};
-function displayModeForCanvas(canvas) {
-  return canvas === "xs-chat-card" ? "inline" : "fullscreen";
-}
-function canvasDisplayModeForShell(shell) {
-  return shell === "chat" || shell === "inline" ? "inline" : "fullscreen";
-}
-var CANVAS_BREAKPOINTS = { md: 600, lg: 1024, xl: 1440 };
-function canvasForViewportWidth(mode, width) {
-  if (mode === "inline") return "xs-chat-card";
-  if (width < CANVAS_BREAKPOINTS.md) return "mobile-fullscreen-small";
-  if (width < CANVAS_BREAKPOINTS.lg) return "md";
-  if (width < CANVAS_BREAKPOINTS.xl) return "lg";
-  return "xl";
-}
-function canvasForRendering(shellType, screen) {
-  const shell = shellType ?? "fullscreen";
-  if (canvasDisplayModeForShell(shell) === "inline") return "xs-chat-card";
-  if (shell === "spatial") return "md";
-  switch (screen ?? "universal") {
-    case "mobile":
-      return "mobile-fullscreen-small";
-    case "tablet":
-      return "md";
-    default:
-      return "lg";
-  }
-}
-var CANVAS_DESCRIPTORS = {
-  "xs-chat-card": {
-    label: "extra-small chat card",
-    minWidthPx: 320,
-    maxWidthPx: 480,
-    host: "an inline card inside a chat message bubble \u2014 the host draws the card border, shadow and rounded corners; the component fills the bubble width and takes its natural height"
-  },
-  "mobile-fullscreen-small": {
-    label: "small mobile fullscreen",
-    minWidthPx: 320,
-    maxWidthPx: 599,
-    host: "a phone-sized viewport the component owns edge to edge \u2014 single column, touch targets at least 44px, the component manages its own scroll"
-  },
-  md: {
-    label: "medium panel",
-    minWidthPx: 600,
-    maxWidthPx: 1023,
-    host: "a tablet viewport or a floating panel (spatial / picture-in-picture) \u2014 one or two columns, medium density"
-  },
-  lg: {
-    label: "large fullscreen",
-    minWidthPx: 1024,
-    maxWidthPx: 1439,
-    host: "a desktop viewport the component owns edge to edge \u2014 multi-column layouts, hover states and pointer interactions are available"
-  },
-  xl: {
-    label: "extra-large fullscreen",
-    minWidthPx: 1440,
-    maxWidthPx: 1920,
-    host: "a wide desktop viewport the component owns edge to edge \u2014 cap content width or use the extra room deliberately; never stretch a single column across the whole width"
-  }
-};
-function describeCanvas(canvas) {
-  const d = CANVAS_DESCRIPTORS[canvas];
-  return `This component renders on the \`${canvas}\` canvas (${d.label}): ${d.minWidthPx}\u2013${d.maxWidthPx}px wide, ${d.host}. Design for the whole range \u2014 the host may size the iframe anywhere inside it, and the host owns the height: size to your content, never to the viewport.`;
-}
-
-// src/evaluation/visual-evaluator.ts
 function canvasFitPolicy(canvas) {
   switch (canvas) {
     case "xs-chat-card":