@ggui-ai/ui-gen 0.17.0 → 0.19.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;
@@ -5799,6 +5878,126 @@ function runViewportSized(input) {
     )
   ];
 }
+var TERMINAL_WORDS = /* @__PURE__ */ new Set([
+  "submit",
+  "confirm",
+  "approve",
+  "schedule",
+  "reserve",
+  "book",
+  "pay",
+  "checkout",
+  "purchase",
+  "order"
+]);
+var TERMINAL_LABEL_RX = /\b(submit|confirm|approve|schedule|reserve|book|pay|checkout|purchase|place\s+order)\b/i;
+var GUARD_RX = /\b(disabled|aria-disabled)\s*=/;
+function nameWords(name) {
+  return name.split(/(?=[A-Z])|[_\-\s]+/).map((w) => w.toLowerCase()).filter((w) => w.length > 0);
+}
+function findUnguardedTerminalControls(sourceCode) {
+  if (GUARD_RX.test(sourceCode)) return [];
+  const names = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(/useAction(?:<[^>]*>)?\(\s*['"`]([^'"`]+)['"`]/g)) {
+    const name = m[1] ?? "";
+    if (nameWords(name).some((w) => TERMINAL_WORDS.has(w))) names.add(name);
+  }
+  for (const m of sourceCode.matchAll(/>([^<>{}]{1,60})<\/Button>/g)) {
+    const label = (m[1] ?? "").replace(/\s+/g, " ").trim();
+    if (label.length > 0 && TERMINAL_LABEL_RX.test(label)) names.add(label.slice(0, 40));
+  }
+  return [...names];
+}
+function runTerminalActionUnguarded(input) {
+  if (input.compiledCode === null) return [];
+  const found = findUnguardedTerminalControls(input.sourceCode);
+  if (found.length === 0) return [];
+  const list = found.map((t) => `"${t}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.terminal_action_unguarded",
+      `${list} reads as an action the user means once, and nothing in this component disables the control after it fires \u2014 a double-click sends it twice.`,
+      'Hold the fired state (`const [submitted, setSubmitted] = useState(false)`), set it in the handler, and pass `disabled={submitted}` to that control with a word that says so ("Submitted"). If the action IS meant to repeat \u2014 sending a message, adding an item \u2014 leave it armed and ignore this.',
+      "warn"
+    )
+  ];
+}
+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 UNIVERSAL_CHECKS = [
   {
     id: "universal.icon_name_known",
@@ -5818,6 +6017,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.terminal_action_unguarded",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runTerminalActionUnguarded
+  },
   {
     id: "universal.accent_text_ink",
     axis: "render",
@@ -6861,7 +7072,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");
@@ -6906,7 +7118,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]";
@@ -7011,87 +7225,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":