@ggui-ai/ui-gen 0.11.0 → 0.13.0

package/dist/advanced/index.d.ts

@@ -2,7 +2,7 @@ import { GeneratorTier, UiGenerator } from '@ggui-ai/mcp-server-core';
 import { JsonObject } from '@ggui-ai/protocol';
 import { BehaviorFailure, PlaywrightModule } from '@ggui-ai/ui-visual-tester';
 import { C as CreateUiGeneratorOptions } from '../create-ui-generator-CF0EL0Li.js';
-import { R as RenderCheckIssue } from '../render-check-BZoIE8-u.js';
+import { R as RenderCheckIssue } from '../render-check-WfOVO9kU.js';
 import '@ggui-ai/gadgets';
 import '../types-public-DIpjC-OA.js';
 import '../axes-CzLEMDeB.js';

package/dist/advanced/index.js

@@ -3270,17 +3270,33 @@ ${errorDetail}`,
       }
     }
     const hexMatch = line.match(/#[0-9a-fA-F]{3,8}\b/);
-    if (hexMatch && !line.includes("var(--ggui-") && !line.includes("// fallback") && !assetEscapedLines.has(lineNum)) {
-      issues.push({
-        tier: 0,
-        result: "fail",
-        category: "tokens",
-        subcategory: "hex-color",
-        severity: "critical",
-        description: `Hardcoded color "${hexMatch[0]}" breaks theme switching \u2014 use design tokens.`,
-        fix: `Replace with a primitive variant (Button variant="primary"|Badge variant="success"|...) OR a token reference like var(--ggui-color-primary-500, ${hexMatch[0]}). Hardcoded colors mean the operator's theme has no effect on this surface.`,
-        line: lineNum
-      });
+    if (hexMatch && !assetEscapedLines.has(lineNum)) {
+      const fallbackVarMatch = line.match(
+        /var\((--ggui-[a-zA-Z0-9-]+)\s*,[^)]*#[0-9a-fA-F]{3,8}/
+      );
+      if (fallbackVarMatch) {
+        issues.push({
+          tier: 0,
+          result: "fail",
+          category: "tokens",
+          subcategory: "token-fallback",
+          severity: "critical",
+          description: `Literal fallback "${hexMatch[0]}" inside a token reference \u2014 the runtime injects every token, and the fallback paints the wrong brand exactly when the theme matters most.`,
+          fix: `Drop the fallback: write var(${fallbackVarMatch[1]}) bare. If the token might not exist, that is a vocabulary problem to fix by choosing a token from the design-system docs, never by a literal.`,
+          line: lineNum
+        });
+      } else if (!line.includes("// fallback")) {
+        issues.push({
+          tier: 0,
+          result: "fail",
+          category: "tokens",
+          subcategory: "hex-color",
+          severity: "critical",
+          description: `Hardcoded color "${hexMatch[0]}" breaks theme switching \u2014 use design tokens.`,
+          fix: `Replace with a primitive variant (Button variant="primary"|Badge variant="success"|...) OR a bare token reference like var(--ggui-color-primary-500) \u2014 never a literal fallback. Hardcoded colors mean the operator's theme has no effect on this surface.`,
+          line: lineNum
+        });
+      }
     }
     const colorFnMatch = line.match(/\b(rgba?|hsla?)\s*\(/);
     if (colorFnMatch && !line.includes("var(--ggui-") && !line.includes("// fallback") && !line.includes("$value") && !assetEscapedLines.has(lineNum)) {
@@ -13498,15 +13514,15 @@ EVERY color, spacing, typography, shadow, and radius value MUST come from design
 
 MANDATORY:
 1. NEVER use hardcoded hex colors like \`#7c3aed\` \u2014 ONLY \`var(--ggui-color-*)\` tokens.
-2. NEVER use CSS gradients with custom colors. If you need a gradient: \`linear-gradient(to bottom, var(--ggui-color-primary-500, #0ea5e9), var(--ggui-color-primary-700, #0369a1))\`.
+2. NEVER use CSS gradients with custom colors. If you need a gradient: \`linear-gradient(to bottom, var(--ggui-color-primary-500), var(--ggui-color-primary-700))\`.
 3. NEVER invent your own palette. The system provides primary, neutral, success, warning, error, and info \u2014 use ONLY these.
-4. ALWAYS include fallback values: \`var(--ggui-color-primary-600, #0284c7)\`.
+4. NEVER include literal fallback values in color tokens \u2014 write \`var(--ggui-color-primary-600)\` bare, never \`var(--ggui-color-primary-600, #0284c7)\`. The runtime injects every token; a literal fallback paints the wrong brand exactly when the operator's theme matters most.
 
 Token categories:
-- Brand: \`var(--ggui-color-primary-600, #0284c7)\`, \`var(--ggui-color-primary-50, #f0f9ff)\`
-- Text: \`var(--ggui-color-onSurface, #18181b)\`, \`var(--ggui-color-onSurfaceVariant, #52525b)\`
-- Backgrounds: \`var(--ggui-color-surface, #fafafa)\`, \`var(--ggui-color-surfaceVariant, #f4f4f5)\`
-- Borders: \`var(--ggui-color-outline, #d4d4d8)\`
+- Brand: \`var(--ggui-color-primary-600)\`, \`var(--ggui-color-primary-50)\`
+- Text: \`var(--ggui-color-onSurface)\`, \`var(--ggui-color-onSurfaceVariant)\`
+- Backgrounds: \`var(--ggui-color-surface)\`, \`var(--ggui-color-surfaceVariant)\`
+- Borders: \`var(--ggui-color-outline)\`
 - Spacing: \`var(--ggui-spacing-4, 16px)\`, \`var(--ggui-spacing-6, 24px)\`
 - Typography: \`var(--ggui-font-size-sm, 14px)\`, \`var(--ggui-font-weight-semibold, 600)\`
 - Shadows: \`var(--ggui-shape-shadow-sm)\`, \`var(--ggui-shape-shadow-md)\`, \`var(--ggui-shape-shadow-lg)\`
@@ -13691,7 +13707,7 @@ Hero sections should feel airy. Use \`padding="xl"\` (32px) on the main card, no
 
 - [ ] Imports ONLY from: react, @ggui-ai/design, @ggui-ai/wire
 - [ ] No raw HTML elements (\`<button>\`, \`<input>\`, \`<div>\` for layout) \u2014 uses primitives
-- [ ] ZERO hardcoded hex colors \u2014 every color is \`var(--ggui-color-*, fallback)\`
+- [ ] ZERO hardcoded hex colors \u2014 every color is a bare \`var(--ggui-color-*)\`, no literal fallback
 - [ ] No raw pixel values for spacing \u2014 all via \`var(--ggui-spacing-*)\` tokens
 - [ ] Primary palette used throughout (headers, borders, icons) \u2014 not just buttons
 - [ ] Typed Props interface exported; request-specific data is a prop with default
@@ -16214,6 +16230,22 @@ async function runRenderCheckInProcess(input) {
           if (issue) issues.push(issue);
         }
       }
+      if (input.contract?.actionSpec) {
+        for (const [name, entry] of Object.entries(input.contract.actionSpec)) {
+          const idField = idLikeRequiredStringField(
+            entry.schema
+          );
+          if (idField === null) continue;
+          const issue = await checkSelectionIdentity({
+            container,
+            probe,
+            user,
+            actionName: name,
+            idField
+          });
+          if (issue) issues.push(issue);
+        }
+      }
       if (input.contract?.propsSpec) {
         for (const issue of checkPropCoverage({
           container,
@@ -16223,6 +16255,48 @@ async function runRenderCheckInProcess(input) {
           issues.push(issue);
         }
       }
+      if (input.contract?.propsSpec) {
+        const propsSpec5c = input.contract.propsSpec;
+        const normalize = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+        const baseText = normalize(container.textContent);
+        for (const [propName, entry] of Object.entries(propsSpec5c.properties)) {
+          if (!entry.required) continue;
+          const orig = input.mockupProps[propName];
+          if (typeof orig !== "string" && typeof orig !== "number") continue;
+          const marker = pickScalarMarker(orig);
+          if (marker === null || !baseText.includes(marker)) continue;
+          const varied = typeof orig === "string" ? "Zzyzx Qw" : orig + 137731;
+          const variedProbe = createProbe();
+          const variedConfig = createProbeWireConfig(variedProbe);
+          let variedResult;
+          try {
+            variedResult = render(
+              React.createElement(GguiWireProvider, {
+                config: variedConfig,
+                children: React.createElement(ProbeErrorBoundary, {
+                  children: React.createElement(Component, {
+                    ...input.mockupProps,
+                    [propName]: varied
+                  })
+                })
+              })
+            );
+          } catch {
+            continue;
+          }
+          await flushPromises();
+          const variedText = normalize(variedResult.container.textContent);
+          variedResult.unmount();
+          if (variedText === baseText) {
+            issues.push({
+              check: "prop-sensitivity",
+              outcome: "failed",
+              subject: propName,
+              reason: `props.${propName} is displayed ('${marker}' appears in the DOM) but changing its value to '${String(varied)}' left the rendered output BYTE-IDENTICAL \u2014 the value is baked into the component instead of derived from the prop. A cached reuse of this blueprint under a different ${propName} would show the original value.`
+            });
+          }
+        }
+      }
       if (input.contract?.streamSpec) {
         const streamSpec = input.contract.streamSpec;
         for (const [name] of Object.entries(streamSpec)) {
@@ -16554,6 +16628,74 @@ async function checkActionWiring(input) {
     }
   };
 }
+function idLikeRequiredStringField(schema) {
+  if (schema === void 0) return null;
+  const properties = schema["properties"];
+  const required = schema["required"];
+  if (properties === null || typeof properties !== "object") return null;
+  if (!Array.isArray(required)) return null;
+  for (const [propName, propSchema] of Object.entries(
+    properties
+  )) {
+    if (!/id$/i.test(propName)) continue;
+    if (!required.includes(propName)) continue;
+    const t = propSchema !== null && typeof propSchema === "object" ? propSchema["type"] : void 0;
+    if (t === "string") return propName;
+  }
+  return null;
+}
+async function checkSelectionIdentity(input) {
+  const { container, probe, user, actionName, idField } = input;
+  const clickables = Array.from(
+    container.querySelectorAll('button, [role="button"]')
+  );
+  const byLabel = /* @__PURE__ */ new Map();
+  for (const el of clickables) {
+    const label = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+    if (label.length === 0) continue;
+    const group = byLabel.get(label);
+    if (group) group.push(el);
+    else byLabel.set(label, [el]);
+  }
+  for (const [label, group] of byLabel) {
+    if (group.length < 2) continue;
+    const payloadFor = async (el) => {
+      const before = probe.getFireLog().length;
+      try {
+        await user.click(el);
+      } catch {
+        return void 0;
+      }
+      await flushPromises();
+      const events = probe.getFireLog().slice(before).filter(
+        (e) => e.kind === "action.fired" && e.name === actionName
+      );
+      return events.length > 0 ? events[events.length - 1].payload : void 0;
+    };
+    const first = await payloadFor(group[0]);
+    const second = await payloadFor(group[1]);
+    if (first === void 0 || second === void 0) continue;
+    const idOf = (payload) => {
+      if (payload === null || typeof payload !== "object") return void 0;
+      const v = payload[idField];
+      return typeof v === "string" ? v : void 0;
+    };
+    const firstId = idOf(first);
+    const secondId = idOf(second);
+    if (firstId === void 0 || secondId === void 0) continue;
+    if (firstId === secondId) {
+      return {
+        check: "selection-identity",
+        outcome: "failed",
+        subject: actionName,
+        reason: `Two clickable elements share the visible label '${label}', and clicking EACH fired '${actionName}' with the same ${idField} ('${firstId}') \u2014 the action payload is keyed on the display value, not the element's identity. Distinct cells must send their own ${idField} (the contract requires it), or selecting one "${label}" acts on every "${label}".`,
+        elementHint: describeElement(group[0])
+      };
+    }
+    return null;
+  }
+  return null;
+}
 async function simulateAndCheck(input) {
   const { container, user, probe, wiringKind, actionName, actionLabel, eventKind } = input;
   const candidates = findCandidateElements(container, wiringKind, actionName, actionLabel);
@@ -17052,6 +17194,26 @@ function toEvalIssue(issue) {
         fix
       };
     }
+    case "selection-identity":
+      return {
+        tier: 0,
+        result,
+        category: "contract",
+        subcategory,
+        severity: "critical",
+        description: `${issue.reason}${elementHint}${diagSuffix}`,
+        fix: `Key the action payload (and any selection state) on the item's ID from the data, never on its display text. Common fix: map over items and pass the item's id into the handler \u2014 onClick={() => ${subject}({ ...payload, id: item.id })} \u2014 and store selection as the id (setSelected(item.id)), not the label.`
+      };
+    case "prop-sensitivity":
+      return {
+        tier: 0,
+        result,
+        category: "contract",
+        subcategory,
+        severity: "critical",
+        description: `${issue.reason}${diagSuffix}`,
+        fix: `Derive the display AND any logic from props.${subject} \u2014 render {props.${subject}} and branch on the prop's value, never on the literal value the request happened to mention (e.g. props.${subject} ?? 'January' followed by January-special-cased logic bakes the request into the component). The contract delivers the value; trust it.`
+      };
     case "prop-coverage":
       return {
         tier: 0,