@ggui-ai/ui-gen 0.18.0 → 0.20.0

package/dist/{create-ui-generator-C8Ki9Wz1.d.ts → create-ui-generator-CxPvudbs.d.ts}

@@ -4,7 +4,7 @@ import { GadgetCatalogAdapter } from '@ggui-ai/gadgets';
 import { GeneratorTier, UiGenerator } from '@ggui-ai/mcp-server-core';
 import { GenerationResult } from './harness/result-types.js';
 import { D as DesignMode } from './design-mode-DLufhrNp.js';
-import { Q as QualityConfig } from './types-public-DVSssdc-.js';
+import { Q as QualityConfig } from './types-public-DKR_h70H.js';
 import { EvaluationConfig } from './evaluation/types.js';
 import { A as AgentConfig } from './llm-router-D7fjBhtr.js';
 

package/dist/{dispatch-D2htzi9h.d.ts → dispatch-N8wdNOX-.d.ts}

@@ -1,7 +1,7 @@
 import { DataContract } from '@ggui-ai/protocol';
 import { C as Classification } from './axes-CzLEMDeB.js';
-import { E as EvalIssue } from './types-public-DVSssdc-.js';
-import { D as DesignMode } from './design-mode-DLufhrNp.js';
+import { E as EvalIssue } from './types-public-DKR_h70H.js';
+import { D as DesignMode, C as CanvasClass } from './design-mode-DLufhrNp.js';
 
 interface RunAxisChecksInput {
     sourceCode: string;
@@ -10,6 +10,8 @@ interface RunAxisChecksInput {
     originalPrompt: string;
     /** Which triad produced the source — see `AxisCheckInput.designMode`. */
     designMode?: DesignMode;
+    /** The canvas the source is judged for — see `AxisCheckInput.canvas` (ggui#1117); absent = no rendering context. */
+    canvas?: CanvasClass;
 }
 declare function runAxisChecks(classification: Classification, input: RunAxisChecksInput): EvalIssue[];
 

package/dist/evaluation/axis-checks/index.d.ts

@@ -1,7 +1,7 @@
-export { R as RunAxisChecksInput, r as runAxisChecks } from '../../dispatch-D2htzi9h.js';
+export { R as RunAxisChecksInput, r as runAxisChecks } from '../../dispatch-N8wdNOX-.js';
 export { REGISTRY } from './registry.js';
-import { A as AxisCheck } from '../../types-public-DVSssdc-.js';
-export { a as AxisCheckInput, m as matches } from '../../types-public-DVSssdc-.js';
+import { A as AxisCheck } from '../../types-public-DKR_h70H.js';
+export { a as AxisCheckInput, m as matches } from '../../types-public-DKR_h70H.js';
 import '@ggui-ai/protocol';
 import '../../axes-CzLEMDeB.js';
 import '../../design-mode-DLufhrNp.js';

package/dist/evaluation/axis-checks/index.js

@@ -1,8 +1,17 @@
-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 } from '@ggui-ai/protocol';
 import { createHash } from 'crypto';
 
 // src/evaluation/axis-checks/checks/universal.ts
+
+// src/design-mode.ts
+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 }
+};
 var ID_FIELD_CANDIDATES = ["id", "uuid", "symbol", "key", "slug", "code"];
 function getItemsProperties(p) {
   return p.items?.properties ?? p.schema?.items?.properties;
@@ -444,6 +453,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",
@@ -463,6 +588,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",
@@ -1523,7 +1660,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");
@@ -1568,7 +1706,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 } : {}
   };
 }