@ggui-ai/ui-gen 0.17.0 → 0.19.0

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

@@ -1,4 +1,4 @@
-import { A as AxisCheck } from '../../types-public-DVSssdc-.js';
+import { A as AxisCheck } from '../../types-public-DKR_h70H.js';
 import '../../design-mode-DLufhrNp.js';
 import '@ggui-ai/protocol';
 import '../../axes-CzLEMDeB.js';

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

@@ -1,7 +1,16 @@
-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';
 
 // 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;
@@ -399,6 +408,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",
@@ -418,6 +547,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",