@ggui-ai/ui-gen 0.8.0 → 0.10.0

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

@@ -1,4 +1,4 @@
-import { A as AxisCheck } from '../../types-public-C36k1q6s.js';
+import { A as AxisCheck } from '../../types-public-DIpjC-OA.js';
 import '@ggui-ai/protocol';
 import '../../axes-CzLEMDeB.js';
 import '../../types-BOvHNG7K.js';

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

@@ -235,6 +235,31 @@ function runNoPhantomUseState(input) {
   }
   return issues;
 }
+function runPropSeedNoResync(input) {
+  if (input.compiledCode === null) return [];
+  const src = input.sourceCode;
+  const issues = [];
+  const re = /const\s*\[\s*(\w+)\s*,\s*(\w+)\s*\]\s*=\s*useState(?:<[^>]*>)?\s*\(\s*props\??\.(\w+)/g;
+  for (const m of src.matchAll(re)) {
+    const [full, stateVar, setter, propName] = m;
+    const idx = m.index ?? 0;
+    const after = src.slice(idx + full.length);
+    if (!new RegExp(`\\b${setter}\\s*\\(`).test(after)) continue;
+    const resync = new RegExp(
+      `\\[[^\\[\\]]*props\\??\\.${propName}\\b[^\\[\\]]*\\]`
+    );
+    if (resync.test(src)) continue;
+    issues.push(
+      mkIssue(
+        "universal.prop_seed_no_resync",
+        `useState(props.${propName}) seeds "${stateVar}" and mutates it, but no effect depends on [props.${propName}] \u2014 a ggui_amend repaint pushes new props that never reach this display (#480).`,
+        `Add \`useEffect(() => ${setter}(props.${propName}), [props.${propName}]);\` so agent repaints re-seed the state, or derive the display directly from props.${propName}.`,
+        "warn"
+      )
+    );
+  }
+  return issues;
+}
 var UNIVERSAL_CHECKS = [
   {
     id: "universal.prop_coverage",
@@ -253,6 +278,12 @@ var UNIVERSAL_CHECKS = [
     axis: "render",
     values: ALL_RENDER_VALUES,
     run: runNoPhantomUseState
+  },
+  {
+    id: "universal.prop_seed_no_resync",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runPropSeedNoResync
   }
 ];
 
@@ -272,7 +303,7 @@ function runStateSeededFromProps(input) {
       mkIssue(
         "state.merge.seeded_from_props",
         `Entity collection "${e.name}" is not seeded from props \u2014 no useState initializer reads props.${e.name}.`,
-        `Add \`const [${e.name}, set${cap(e.name)}] = useState(props.${e.name});\` so stream/action updates can merge into live state.`
+        `Add \`const [${e.name}, set${cap(e.name)}] = useState(props.${e.name});\` paired with \`useEffect(() => set${cap(e.name)}(props.${e.name}), [props.${e.name}]);\` so stream/action updates merge into live state AND agent repaints (ggui_amend) re-seed it (#480).`
       )
     );
   }
@@ -376,6 +407,106 @@ var STATE_MERGE_CHECKS = [
   }
 ];
 
+// src/evaluation/axis-checks/checks/state-ui-affordance.ts
+var STATE_ARIA_OR_ROLE = /aria-(checked|pressed|selected|expanded|current)\s*=|role\s*=/;
+var STATE_PRIMITIVE_IN_SUBTREE = /<(Checkbox|Toggle|Tabs|Accordion)[\s/>]/;
+var SEMANTIC_PRIMITIVES = /* @__PURE__ */ new Set(["Button", "Checkbox", "Toggle", "Link", "MenuItem"]);
+function collectSetters(src) {
+  const setters = /* @__PURE__ */ new Set();
+  for (const m of src.matchAll(/const\s*\[\s*\w+\s*,\s*(set\w+)\s*\]\s*=\s*useState/g)) {
+    setters.add(m[1]);
+  }
+  return setters;
+}
+function collectHandlers(src, setters) {
+  const handlers = /* @__PURE__ */ new Set();
+  for (const m of src.matchAll(/const\s+(\w+)\s*=\s*(?:\([^)]*\)|\w+)\s*=>\s*\{?/g)) {
+    const body = src.slice(m.index + m[0].length, m.index + m[0].length + 400);
+    for (const s of setters) {
+      if (body.includes(s)) {
+        handlers.add(m[1]);
+        break;
+      }
+    }
+  }
+  return handlers;
+}
+function attrBlock(src, start) {
+  let depth = 0;
+  for (let i = start; i < src.length; i++) {
+    const c = src[i];
+    if (c === "{") depth++;
+    else if (c === "}") depth--;
+    else if (c === ">" && depth === 0) return { block: src.slice(start, i), end: i };
+  }
+  return { block: src.slice(start, start + 900), end: start + 900 };
+}
+function onClickValue(block) {
+  const m = block.match(/onClick\s*=\s*\{/);
+  if (!m || m.index === void 0) return null;
+  const open = m.index + m[0].length - 1;
+  let depth = 0;
+  for (let i = open; i < block.length; i++) {
+    if (block[i] === "{") depth++;
+    else if (block[i] === "}") {
+      depth--;
+      if (depth === 0) return block.slice(open + 1, i);
+    }
+  }
+  return block.slice(open + 1);
+}
+function subtree(src, pos, tag) {
+  const close = src.indexOf(`</${tag}>`, pos);
+  return src.slice(pos, close === -1 ? pos + 700 : close);
+}
+function runStateAriaPresent(input) {
+  if (input.compiledCode === null) return [];
+  const src = input.sourceCode;
+  const setters = collectSetters(src);
+  const handlers = collectHandlers(src, setters);
+  const issues = [];
+  const flaggedLines = /* @__PURE__ */ new Set();
+  const localComponents = /* @__PURE__ */ new Set();
+  for (const m of src.matchAll(/(?:function\s+([A-Z]\w*)\s*\(|const\s+([A-Z]\w*)\s*=)/g)) {
+    localComponents.add(m[1] ?? m[2]);
+  }
+  for (const m of src.matchAll(/<([A-Za-z][A-Za-z0-9]*)\b/g)) {
+    const tag = m[1];
+    if (m.index === void 0) continue;
+    if (localComponents.has(tag)) continue;
+    const { block, end } = attrBlock(src, m.index + m[0].length);
+    const clickValue = onClickValue(block);
+    if (clickValue === null) continue;
+    const mutatesAffordance = [...setters].some((s) => clickValue.includes(s)) || [...handlers].some((h) => new RegExp(`\\b${h}\\b`).test(clickValue)) || // Extracted-subcomponent shape: the toggle handler arrives as an
+    // `on[A-Z]…` callback prop and is invoked from onClick — inside a
+    // ui-affordance component that IS the affordance mutation.
+    /\bon[A-Z]\w*\b/.test(clickValue);
+    if (!mutatesAffordance) continue;
+    if (SEMANTIC_PRIMITIVES.has(tag)) continue;
+    if (STATE_ARIA_OR_ROLE.test(block)) continue;
+    if (STATE_PRIMITIVE_IN_SUBTREE.test(subtree(src, end, tag))) continue;
+    const line = src.slice(0, m.index).split("\n").length;
+    if (flaggedLines.has(line)) continue;
+    flaggedLines.add(line);
+    issues.push(
+      mkIssue(
+        "state.ui_affordance.state_aria_present",
+        `Line ${line}: <${tag}> toggles the UI affordance from its onClick but exposes no state ARIA \u2014 its checked/selected/expanded state is invisible to assistive technology (styling is the only carrier).`,
+        `Add the matching state attribute to the SAME element that carries the onClick: \`role="checkbox"\` + \`aria-checked={\u2026}\` for a toggle row, \`aria-pressed\` for a toggle button, \`aria-selected\` for a selection, \`aria-expanded\` for an open/close affordance \u2014 or replace the hand-rolled control with the state-carrying primitive (Checkbox / Toggle / Tabs / Accordion). \`as={Clickable}\` adds button + keyboard semantics but NOT state.`
+      )
+    );
+  }
+  return issues;
+}
+var STATE_UI_AFFORDANCE_CHECKS = [
+  {
+    id: "state.ui_affordance.state_aria_present",
+    axis: "state",
+    values: ["ui-affordance"],
+    run: runStateAriaPresent
+  }
+];
+
 // src/evaluation/axis-checks/checks/realtime.ts
 var REALTIME_ACTIVE = ["merge", "append", "status", "presence", "mixed"];
 function runStreamHandlerPerEvent(input) {
@@ -1065,6 +1196,7 @@ var EXTRA_CHECKS = [
 var REGISTRY = [
   ...UNIVERSAL_CHECKS,
   ...STATE_MERGE_CHECKS,
+  ...STATE_UI_AFFORDANCE_CHECKS,
   ...REALTIME_CHECKS,
   ...WRITES_CHECKS,
   ...STATE_PAYLOAD_CHECKS,