@ggui-ai/ui-gen 0.16.0 → 0.18.0

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

@@ -1,6 +1,8 @@
+import { LUCIDE_ICON_NAMES } from '@ggui-ai/design';
 import { listContractGadgets, HOOK_NAME_RE, STDLIB_GADGETS_PACKAGE } from '@ggui-ai/protocol';
+import { createHash } from 'crypto';
 
-// src/evaluation/axis-checks/helpers.ts
+// src/evaluation/axis-checks/checks/universal.ts
 var ID_FIELD_CANDIDATES = ["id", "uuid", "symbol", "key", "slug", "code"];
 function getItemsProperties(p) {
   return p.items?.properties ?? p.schema?.items?.properties;
@@ -157,6 +159,9 @@ function mkIssue(subcategory, description, fix, result = "fail") {
 function cap(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
+function axisCheckTraceEnabled() {
+  return process.env["GGUI_AXIS_CHECK_TRACE"] === "1";
+}
 
 // src/evaluation/axis-checks/checks/universal.ts
 var ALL_RENDER_VALUES = [
@@ -260,7 +265,222 @@ function runPropSeedNoResync(input) {
   }
   return issues;
 }
+var KNOWN_ICON_KEYS = new Set(
+  LUCIDE_ICON_NAMES.map((n) => n.replace(/[-_]/g, "").toLowerCase())
+);
+function isKnownIconName(name) {
+  return KNOWN_ICON_KEYS.has(name.replace(/[-_]/g, "").toLowerCase());
+}
+var ICON_NAME_LITERAL_RX = /<Icon\b[^>]*?\bname\s*=\s*(?:"([^"]*)"|'([^']*)'|\{\s*"([^"]*)"\s*\}|\{\s*'([^']*)'\s*\})/g;
+function findUnknownIconNames(sourceCode) {
+  const unknown = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(ICON_NAME_LITERAL_RX)) {
+    const name = m[1] ?? m[2] ?? m[3] ?? m[4] ?? "";
+    if (name.length === 0) continue;
+    if (/[^\x20-\x7e]/.test(name)) continue;
+    if (!isKnownIconName(name)) unknown.add(name);
+  }
+  return [...unknown];
+}
+function runIconNameKnown(input) {
+  if (input.compiledCode === null) return [];
+  const unknown = findUnknownIconNames(input.sourceCode);
+  if (unknown.length === 0) return [];
+  const list = unknown.map((n) => `"${n}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.icon_name_known",
+      `<Icon name=\u2026> uses ${unknown.length} name(s) outside the design system's Lucide subset: ${list} \u2014 an unknown name renders an empty box.`,
+      "Call get_available_icons and pick a listed name (kebab-case), or use an emoji directly."
+    )
+  ];
+}
+var LADDER_STOP_AS_TEXT_RX = /(?<![\w-])color\s*(?:=\s*\{?\s*|:\s*)["'`]?\s*var\(--ggui-color-primary-(\d{2,3})\s*[,)]/g;
+var TEXT_INK_STOP_MIN = 300;
+var TEXT_INK_STOP_MAX = 600;
+function findLadderStopsAsText(sourceCode) {
+  const found = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(LADDER_STOP_AS_TEXT_RX)) {
+    const digits = m[1] ?? "";
+    const stop = Number(digits);
+    if (stop >= TEXT_INK_STOP_MIN && stop <= TEXT_INK_STOP_MAX) found.add(`primary-${digits}`);
+  }
+  return [...found];
+}
+function runAccentTextInk(input) {
+  if (input.compiledCode === null) return [];
+  const stops = findLadderStopsAsText(input.sourceCode);
+  if (stops.length === 0) return [];
+  const list = stops.map((s) => `\`${s}\``).join(", ");
+  return [
+    mkIssue(
+      "universal.accent_text_ink",
+      `Text is painted with a brand-ladder fill stop as its color (${list}) \u2014 on a low-saturation brand these stops are mid-grey on the surface and the text fails readability.`,
+      'Accent text (eyebrows, taglines, links, labels, inline arrows) takes var(--ggui-color-link) or <Text tone="emphasized">; body text takes var(--ggui-color-onContainer); keep primary-* stops on fills and borders.'
+    )
+  ];
+}
+var SCOPED_SURFACE_TAG_RX = /<(Card|Box)\b([^<>]*?)surface\s*=\s*["'](inverted|hero)["']([^<>]*?)>/g;
+var STYLE_BACKGROUND_RX = /\bstyle\s*=\s*\{\{[^}]*\b(background|backgroundColor|backgroundImage)\s*:/;
+function findScopedSurfaceBackgrounds(sourceCode) {
+  const hits = [];
+  for (const m of sourceCode.matchAll(SCOPED_SURFACE_TAG_RX)) {
+    const attrs = `${m[2] ?? ""} ${m[4] ?? ""}`;
+    if (STYLE_BACKGROUND_RX.test(attrs)) hits.push([m[1] ?? "", m[3] ?? ""]);
+  }
+  return hits;
+}
+function runScopedSurfaceOwnsGround(input) {
+  if (input.compiledCode === null) return [];
+  if (input.designMode === "free") return [];
+  const hits = findScopedSurfaceBackgrounds(input.sourceCode);
+  if (hits.length === 0) return [];
+  const [tag, surface] = hits[0];
+  return [
+    mkIssue(
+      "universal.scoped_surface_owns_ground",
+      `<${tag} surface="${surface}"> sets its own background in style \u2014 a scoped surface owns its ground; repainting it puts the scope's swapped inks over the wrong ground (ink on ink).`,
+      `Remove the background from that ${tag}'s style \u2014 surface="${surface}" paints the ground; pick another surface if a different ground is wanted.`
+    )
+  ];
+}
+var CAPS_TEXT_RX = /<Text\b(?=[^>]*\bcaps\b)[^>]*>([\s\S]*?)<\/Text>/g;
+function findInventedCapsLabels(sourceCode) {
+  const out = [];
+  for (const m of sourceCode.matchAll(CAPS_TEXT_RX)) {
+    const inner = (m[1] ?? "").trim();
+    if (inner.length === 0) continue;
+    if (inner.includes("{")) continue;
+    out.push(inner.replace(/\s+/g, " ").slice(0, 60));
+  }
+  return out;
+}
+function runCapsLabelInvented(input) {
+  if (input.compiledCode === null) return [];
+  const invented = findInventedCapsLabels(input.sourceCode);
+  if (invented.length === 0) return [];
+  const list = invented.map((t) => `"${t}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.caps_label_invented",
+      `${invented.length} caps label(s) carry invented copy the props do not supply: ${list} \u2014 an eyebrow, kicker or overline the agent cannot change is chatter on every render.`,
+      "Remove the label, or bind its text to a prop (`<Text caps>{props.section}</Text>`); copy comes from the contract, never from the component."
+    )
+  ];
+}
+var VIEWPORT_UNIT = String.raw`(?:calc\(\s*)?100(?:vh|dvh|svh|lvh)\b(?:[^)"'\x60;\n]*\))?`;
+var VIEWPORT_STYLE_OBJECT_RX = new RegExp(
+  String.raw`\b(?:minHeight|height|minBlockSize|blockSize)\s*:\s*["'\x60]\s*${VIEWPORT_UNIT}["'\x60]?`,
+  "g"
+);
+var VIEWPORT_CSS_RX = new RegExp(
+  String.raw`(?<![\w-])(?:min-)?(?:height|block-size)\s*:\s*${VIEWPORT_UNIT}`,
+  "g"
+);
+var VIEWPORT_CLASS_RX = /(?<![\w-])(?:min-)?h-(?:screen|dvh|svh|lvh)\b/g;
+function findViewportSizing(sourceCode) {
+  const hits = [];
+  for (const rx of [VIEWPORT_STYLE_OBJECT_RX, VIEWPORT_CSS_RX, VIEWPORT_CLASS_RX]) {
+    for (const m of sourceCode.matchAll(rx)) {
+      hits.push({ at: m.index ?? 0, text: m[0].replace(/\s+/g, " ").trim().slice(0, 60) });
+    }
+  }
+  return hits.sort((a, b) => a.at - b.at).map((h) => h.text);
+}
+function runViewportSized(input) {
+  if (input.compiledCode === null) return [];
+  const sized = findViewportSizing(input.sourceCode);
+  if (sized.length === 0) return [];
+  const list = sized.map((t) => "`" + t + "`").join(", ");
+  return [
+    mkIssue(
+      "universal.viewport_sized",
+      `${sized.length} element(s) are sized to the viewport: ${list} \u2014 the frame owns the height; a content-sized frame is measured from the content, so a viewport-sized root never shrinks and grows the frame on every re-measure.`,
+      "Remove the viewport height \u2014 size to content, never to the viewport. Under fullscreen the frame stretches your root already (centre inside it with `display: flex; flex-direction: column; justify-content: center`); to fill a parent that has a height use `height: 100%` or `flex: 1`."
+    )
+  ];
+}
+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"
+    )
+  ];
+}
 var UNIVERSAL_CHECKS = [
+  {
+    id: "universal.icon_name_known",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runIconNameKnown
+  },
+  {
+    id: "universal.caps_label_invented",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runCapsLabelInvented
+  },
+  {
+    id: "universal.viewport_sized",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runViewportSized
+  },
+  {
+    id: "universal.terminal_action_unguarded",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runTerminalActionUnguarded
+  },
+  {
+    id: "universal.accent_text_ink",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runAccentTextInk
+  },
+  {
+    id: "universal.scoped_surface_owns_ground",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runScopedSurfaceOwnsGround
+  },
   {
     id: "universal.prop_coverage",
     axis: "render",
@@ -1063,6 +1283,87 @@ var TOOLING_CHECKS = [
   }
 ];
 
+// src/evaluation/axis-checks/checks/grid.ts
+var BOARD_PROP_RX = /^(columns?|lanes?|stages?|lists?|buckets?|swimlanes?)$/i;
+var BOARD_PROMPT_RX = /\b(kanban|board)\b/i;
+var BOARD_NAMES = ["columns", "lanes", "stages", "lists", "buckets", "swimlanes"];
+var LAYOUT_TAG_RX = /<(\/?)(Grid|Row|Stack|Card|Box|Container|ScrollArea|div|section)\b([^<>]*?)>/g;
+var SIDE_BY_SIDE = /* @__PURE__ */ new Set(["Grid", "Row"]);
+function boardPropNames(contract) {
+  const propsField = contract?.propsSpec;
+  const properties = propsField?.properties ?? {};
+  return Object.entries(properties).filter(([name, p]) => BOARD_PROP_RX.test(name) && (p?.type === "array" || p?.schema?.type === "array")).map(([name]) => name);
+}
+function jsxMapPositions(sourceCode, name) {
+  const rx = new RegExp(
+    `\\b${name}(?:\\?\\.)?\\.map\\(\\s*\\(?\\s*\\w+(?:\\s*,\\s*\\w+)?\\s*\\)?\\s*=>\\s*(?:\\(?\\s*<|\\{[^{}]{0,600}?\\breturn\\s*\\(?\\s*<)`,
+    "g"
+  );
+  return [...sourceCode.matchAll(rx)].map((m) => m.index ?? 0);
+}
+function enclosingLayoutTag(sourceCode, pos) {
+  const stack = [];
+  for (const m of sourceCode.slice(0, pos).matchAll(LAYOUT_TAG_RX)) {
+    const closing = m[1] === "/";
+    const name = m[2] ?? "";
+    const attrs = m[3] ?? "";
+    if (closing) {
+      if (stack[stack.length - 1] === name) stack.pop();
+      continue;
+    }
+    if (attrs.trimEnd().endsWith("/")) continue;
+    stack.push(name);
+  }
+  return stack[stack.length - 1];
+}
+function describeBoardRead(input) {
+  const declared = boardPropNames(input.contract);
+  const names = declared.length > 0 ? declared : BOARD_PROMPT_RX.test(input.originalPrompt) ? [...BOARD_NAMES] : BOARD_NAMES.filter((n) => jsxMapPositions(input.sourceCode, n).length > 0);
+  const perName = names.map((name) => {
+    const positions = jsxMapPositions(input.sourceCode, name);
+    return { name, maps: positions.length, enclosing: positions.map((pos) => enclosingLayoutTag(input.sourceCode, pos) ?? "nothing") };
+  });
+  return { declared, names, perName };
+}
+function findStackedBoardColumns(input) {
+  const stacked = [];
+  for (const { name, enclosing } of describeBoardRead(input).perName) {
+    for (const tag of enclosing) if (!SIDE_BY_SIDE.has(tag)) stacked.push([name, tag]);
+  }
+  return stacked;
+}
+function runBoardColumnsSideBySide(input) {
+  if (input.compiledCode === null) return [];
+  const standDown = input.designMode === "free";
+  const stacked = standDown ? [] : findStackedBoardColumns(input);
+  if (axisCheckTraceEnabled()) {
+    const line = {
+      ...describeBoardRead(input),
+      designMode: input.designMode ?? "constrained",
+      standDown,
+      result: standDown ? "stand-down" : stacked.length > 0 ? "fail" : "pass"
+    };
+    console.log(JSON.stringify({ boardColumnsTrace: line }));
+  }
+  if (stacked.length === 0) return [];
+  const [name, tag] = stacked[0];
+  return [
+    mkIssue(
+      "grid.board_columns_side_by_side",
+      `The board's \`${name}\` are composed under <${tag}> \u2014 a vertical stack of column sections; at md and wider the columns must sit side by side.`,
+      `Wrap the ${name} map in <Grid columns={{ base: 1, md: ${name}.length }} gap="md"> (each column its own <Stack> of cards); never a <Stack> of column sections.`
+    )
+  ];
+}
+var GRID_CHECKS = [
+  {
+    id: "grid.board_columns_side_by_side",
+    axis: "render",
+    values: ["grid"],
+    run: runBoardColumnsSideBySide
+  }
+];
+
 // src/evaluation/axis-checks/extras.ts
 function mkIssue2(subcategory, description, fix, result = "warn") {
   return { tier: 0, result, category: "mode", subcategory, description, fix };
@@ -1202,6 +1503,7 @@ var REGISTRY = [
   ...WRITES_CHECKS,
   ...STATE_PAYLOAD_CHECKS,
   ...TOOLING_CHECKS,
+  ...GRID_CHECKS,
   ...EXTRA_CHECKS
 ];
 
@@ -1215,27 +1517,59 @@ function matches(vector, check) {
   }
   return true;
 }
-
-// src/evaluation/axis-checks/dispatch.ts
 function runAxisChecks(classification, input) {
-  if (input.compiledCode === null) return [];
-  const axisInput = {
+  const facts = {
     sourceCode: input.sourceCode,
-    compiledCode: input.compiledCode,
     ...input.contract !== void 0 ? { contract: input.contract } : {},
     originalPrompt: input.originalPrompt,
     classification,
     ...input.designMode !== void 0 ? { designMode: input.designMode } : {}
   };
+  if (input.compiledCode === null) {
+    traceAxisChecksSkipped(facts, "compiledCode null \u2014 no check ran");
+    return [];
+  }
+  const axisInput = { ...facts, compiledCode: input.compiledCode };
+  return runGatedAxisChecks(
+    REGISTRY.filter((check) => matches(classification.vector, check)),
+    axisInput
+  ).issues;
+}
+function runGatedAxisChecks(checks, input) {
   const issues = [];
-  const firedIds = /* @__PURE__ */ new Set();
-  for (const check of REGISTRY) {
-    if (!matches(classification.vector, check)) continue;
-    if (firedIds.has(check.id)) continue;
-    firedIds.add(check.id);
-    issues.push(...check.run(axisInput));
+  const firedIds = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const check of checks) {
+    if (seen.has(check.id)) continue;
+    seen.add(check.id);
+    firedIds.push(check.id);
+    issues.push(...check.run(input));
   }
-  return issues;
+  if (axisCheckTraceEnabled()) {
+    const line = {
+      ...traceFacts(input),
+      matched: [...firedIds],
+      issues: issues.map((i) => ({ id: i.subcategory ?? i.category, result: i.result }))
+    };
+    console.log(JSON.stringify({ axisCheckTrace: line }));
+  }
+  return { issues, firedIds };
+}
+function traceAxisChecksSkipped(facts, note) {
+  if (!axisCheckTraceEnabled()) return;
+  const line = { ...traceFacts(facts), matched: [], issues: [], note };
+  console.log(JSON.stringify({ axisCheckTrace: line }));
+}
+function traceFacts(input) {
+  const propsSpec = input.contract?.propsSpec;
+  return {
+    sourceSha256: createHash("sha256").update(input.sourceCode, "utf8").digest("hex"),
+    originalPrompt: input.originalPrompt,
+    designMode: input.designMode ?? "constrained",
+    classification: input.classification.vector,
+    propsSpecKeys: Object.keys(propsSpec ?? {}),
+    propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {})
+  };
 }
 
 export { EXTRA_CHECKS, REGISTRY, matches, runAxisChecks };