@ggui-ai/ui-gen 0.14.0 → 0.16.0

package/dist/check/index.d.ts

@@ -1,5 +1,6 @@
 import { DataContract, JsonObject, PropsSpec, ActionSpec, StreamSpec } from '@ggui-ai/protocol';
-import { b as EvalResult, E as EvalIssue } from '../types-public-CkNWEov9.js';
+import { D as DesignMode } from '../design-mode-BHEE7flj.js';
+import { b as EvalResult, E as EvalIssue } from '../types-public-D24JLJgl.js';
 export { j as jsonSchemaTypeToTs } from '../json-schema-ts-CbB78b3n.js';
 import '../axes-CzLEMDeB.js';
 import '../types-BOvHNG7K.js';
@@ -223,10 +224,23 @@ declare function runTier0Checks(sourceCode: string, contract?: DataContract, bui
  * resolves against the real declaration (strict option/return
  * narrowing). Standard-library-only callers omit it.
  */
-gadgetTypes?: Readonly<Record<string, string>>): Promise<EvalIssue[]>;
+gadgetTypes?: Readonly<Record<string, string>>, 
+/**
+ * Which triad produced the source. `constrained` (default) runs every
+ * leg exactly as before. `free` gates OFF the design-VOCABULARY legs —
+ * `raw-spacing`, `raw-pixels`, `numeric-spacing-prop`, the
+ * `stack-row-*` prop checks and `clickable-wrapper` — because raw
+ * elements, inline CSS and literal spacing are first-class there. It
+ * KEEPS every contract leg: `hex-color`, `hardcoded-color-fn`,
+ * `named-color`, `token-fallback`, `off-manifest-token`,
+ * `asset-color-pair` (color stays on the closed token manifest),
+ * imports, security, Props / default-export, wire_* and gadget checks,
+ * and the double-wired-action detector (retargeted at raw elements).
+ */
+designMode?: DesignMode): Promise<EvalIssue[]>;
 /**
  * Run tier 0 checks and return a full EvalResult with pass list.
  */
-declare function runTier0(sourceCode: string, contract?: DataContract): Promise<EvalResult>;
+declare function runTier0(sourceCode: string, contract?: DataContract, designMode?: DesignMode): Promise<EvalResult>;
 
 export { type ContractIssue, type ReactLintDiagnostic, type TypeCheckDiagnostic, type TypeCheckResult, type WireCallSite, type WireImportReport, type WireImportSite, type WireKind, type WirePreservationReport, checkWireImports, checkWirePreservation, collectExpectedWires, extractPropsInterface, extractWireCallSites, extractWireImports, inferPropsSpecFromSampleData, lintReactHooks, propsSpecToTypeScript, runTier0, runTier0Checks, typecheck, validateActionSpecConformance, validateAllContracts, validatePropsAgainstSchema, validateStreamSpecConformance };

package/dist/check/index.js

@@ -2,6 +2,7 @@ import ts4 from 'typescript';
 import fs from 'fs';
 import path from 'path';
 import { createRequire } from 'module';
+import { FORBIDDEN_IMPORT_SPECIFIERS } from '@ggui-ai/design/rendering';
 import { Linter } from 'eslint';
 import { listContractGadgets, HOOK_NAME_RE } from '@ggui-ai/protocol';
 import { consumedTokenManifest } from '@ggui-ai/design/themes';
@@ -395,8 +396,6 @@ function inferJsonSchema(value) {
   }
   return { type: "string" };
 }
-
-// src/validation/allowed-imports.ts
 var ALLOWED_IMPORT_BASES = [
   "react",
   "react-dom",
@@ -405,13 +404,14 @@ var ALLOWED_IMPORT_BASES = [
   "@ggui-ai/gadgets"
 ];
 function isAllowedImport(specifier, gadgetPackages) {
+  if (FORBIDDEN_IMPORT_SPECIFIERS.includes(specifier)) return false;
   for (const base of ALLOWED_IMPORT_BASES) {
     if (specifier === base || specifier.startsWith(`${base}/`)) return true;
   }
   return gadgetPackages?.has(specifier) ?? false;
 }
 function describeAllowedImports() {
-  return "react, @ggui-ai/design, @ggui-ai/wire, @ggui-ai/gadgets, or a gadget package declared on the contract";
+  return "react, @ggui-ai/design, @ggui-ai/wire, @ggui-ai/gadgets, or a gadget package declared on the contract \u2014 never @ggui-ai/wire/internal (the writer side of the wire; components read useRender().isConnected)";
 }
 
 // src/check/type-checker.ts
@@ -565,7 +565,8 @@ async function loadVfs() {
 function resolveRelativeInVfs(vfs, containingFile, importPath) {
   const normalized = containingFile.startsWith("/") ? containingFile.slice(1) : containingFile;
   const dir = path.posix.dirname(normalized);
-  const resolved2 = path.posix.normalize(`${dir}/${importPath}`);
+  const specifier = importPath.replace(/\.(?:m|c)?js$/, "");
+  const resolved2 = path.posix.normalize(`${dir}/${specifier}`);
   const withDts = `${resolved2}.d.ts`;
   if (vfs.has(withDts)) return withDts;
   const withIndexDts = `${resolved2}/index.d.ts`;
@@ -876,6 +877,9 @@ function generateReactFix(ruleId, message) {
   return "Fix the React violation.";
 }
 
+// src/design-mode.ts
+var DEFAULT_DESIGN_MODE = "constrained";
+
 // src/evaluation/types-public.ts
 function priorityForIssue(category) {
   if (category === "interactivity" || category === "accessibility" || category === "layout" || category === "loading" || category === "visual") {
@@ -903,10 +907,11 @@ function stripComments(code) {
   }
   return out;
 }
-function detectCertainDoubleWiredActions(sourceCode, actionBindings) {
+function detectCertainDoubleWiredActions(sourceCode, actionBindings, designMode = DEFAULT_DESIGN_MODE) {
   const issues = [];
   if (actionBindings.length === 0) return issues;
   const bindings = new Set(actionBindings);
+  const anyElementIsInteractive = designMode === "free";
   const TRAIT_HOST_TAGS = /* @__PURE__ */ new Set(["Card", "Box", "Stack", "Row"]);
   const TRAITS_THAT_FIRE = /* @__PURE__ */ new Set(["Clickable", "Pressable"]);
   const INTERACTIVE_DESCENDANTS = /* @__PURE__ */ new Set([
@@ -942,7 +947,9 @@ function detectCertainDoubleWiredActions(sourceCode, actionBindings) {
   }
   function isTraitHostWithFiringAs(node) {
     const tag = tagNameText(node);
-    if (tag === void 0 || !TRAIT_HOST_TAGS.has(tag)) return false;
+    if (tag === void 0) return false;
+    if (anyElementIsInteractive) return true;
+    if (!TRAIT_HOST_TAGS.has(tag)) return false;
     const asExpr = attrExpression(node, "as");
     return asExpr !== void 0 && ts4.isIdentifier(asExpr) && TRAITS_THAT_FIRE.has(asExpr.text);
   }
@@ -971,7 +978,7 @@ function detectCertainDoubleWiredActions(sourceCode, actionBindings) {
       const opening = ts4.isJsxElement(node) ? node.openingElement : ts4.isJsxSelfClosingElement(node) ? node : void 0;
       if (opening !== void 0) {
         const tag = tagNameText(opening);
-        if (tag !== void 0 && INTERACTIVE_DESCENDANTS.has(tag)) {
+        if (tag !== void 0 && (anyElementIsInteractive || INTERACTIVE_DESCENDANTS.has(tag))) {
           for (const attrName of HANDLER_ATTRS) {
             const callee = extractCalleeName(attrExpression(opening, attrName));
             if (callee === expectedBinding) {
@@ -997,14 +1004,15 @@ function detectCertainDoubleWiredActions(sourceCode, actionBindings) {
         if (match !== void 0) {
           const outerTag = tagNameText(node.openingElement);
           const outerLine = sf.getLineAndCharacterOfPosition(node.openingElement.getStart()).line + 1;
+          const outerLabel = anyElementIsInteractive ? `<${outerTag}>` : `<${outerTag} as={...}>`;
           issues.push({
             tier: 0,
             result: "fail",
             category: "interactivity",
             subcategory: "double-wired-action:certain",
             severity: "critical",
-            description: `Nested-interactive double-wire: outer <${outerTag} as={...}> at line ${outerLine} and inner <${match.tag}> at line ${match.line} both dispatch the same useAction binding '${outerCallee}'. One user click on the inner control fires its handler AND bubbles to the outer handler \u2014 '${outerCallee}' dispatches TWICE, the action runs back-to-back, and a toggle-style action silently reverts the user's change.`,
-            fix: `Pick ONE surface for the gesture: either drop \`as={...}\` + onClick on the outer <${outerTag}> and let the inner <${match.tag}> own the gesture, OR remove the inner <${match.tag}> and let the outer <${outerTag} as={...}> own it. Don't wire both to the same useAction binding.`,
+            description: `Nested-interactive double-wire: outer ${outerLabel} at line ${outerLine} and inner <${match.tag}> at line ${match.line} both dispatch the same useAction binding '${outerCallee}'. One user click on the inner control fires its handler AND bubbles to the outer handler \u2014 '${outerCallee}' dispatches TWICE, the action runs back-to-back, and a toggle-style action silently reverts the user's change.`,
+            fix: anyElementIsInteractive ? `Pick ONE gesture surface for '${outerCallee}': either remove the onClick from the outer <${outerTag}> and let the inner <${match.tag}> own the gesture, OR drop the inner <${match.tag}>'s handler and let the outer <${outerTag}> own it. Never wire both to the same useAction binding \u2014 stopPropagation is not a fix.` : `Pick ONE surface for the gesture: either drop \`as={...}\` + onClick on the outer <${outerTag}> and let the inner <${match.tag}> own the gesture, OR remove the inner <${match.tag}> and let the outer <${outerTag} as={...}> own it. Don't wire both to the same useAction binding.`,
             line: outerLine
           });
         }
@@ -1041,9 +1049,10 @@ function isGadgetExportImported(source, pkg, exportName) {
   }
   return false;
 }
-async function runTier0Checks(sourceCode, contract, buildErrors, gadgetTypes) {
+async function runTier0Checks(sourceCode, contract, buildErrors, gadgetTypes, designMode = DEFAULT_DESIGN_MODE) {
   const issues = [];
   const lines = sourceCode.split("\n");
+  const enforceDesignVocabulary = designMode === "constrained";
   if (buildErrors && buildErrors.length > 0) {
     const errorDetail = buildErrors.map((e) => {
       const match = e.match(/<stdin>:(\d+):\d+: ERROR: (.+)/);
@@ -1172,7 +1181,7 @@ ${errorDetail}`,
         subcategory: "hardcoded-color-fn",
         severity: "critical",
         description: `Hardcoded ${colorFnMatch[1]}() breaks theme switching \u2014 use design tokens.`,
-        fix: "Replace with a primitive variant OR a semantic token: var(--ggui-color-surface), var(--ggui-color-onSurface), var(--ggui-color-outline), etc.",
+        fix: "Replace with a primitive variant OR a layering role: var(--ggui-color-container), var(--ggui-color-onContainer), var(--ggui-color-outline), etc.",
         line: lineNum
       });
     }
@@ -1189,13 +1198,13 @@ ${errorDetail}`,
         subcategory: "off-manifest-token",
         severity: "critical",
         description: `Token "${name}" is not in the design system's token manifest \u2014 no theme defines it, so it renders unset.`,
-        fix: `Choose a token that exists: the closed vocabulary is the manifest the design-system docs list (colors: var(--ggui-color-primary-500), var(--ggui-color-onSurface), \u2026; spacing: var(--ggui-spacing-4); type: var(--ggui-font-size-sm)). Never invent a name and never add a literal fallback.`,
+        fix: `Choose a token that exists: the closed vocabulary is the manifest the design-system docs list (colors: var(--ggui-color-primary-500), var(--ggui-color-onContainer), \u2026; spacing: var(--ggui-spacing-4); type: var(--ggui-font-size-sm)). Never invent a name and never add a literal fallback.`,
         line: lineNum
       });
     }
-    const rawSpacingMatch = line.match(
+    const rawSpacingMatch = enforceDesignVocabulary ? line.match(
       /\b(gap|padding|paddingX|paddingY|margin|radius)\s*=\s*["'][\d.]+(?:px|rem|em)["']/
-    );
+    ) : null;
     if (rawSpacingMatch) {
       issues.push({
         tier: 0,
@@ -1289,12 +1298,12 @@ ${errorDetail}`,
           subcategory: "named-color",
           severity: "critical",
           description: `Hardcoded CSS named color "${named}" breaks theme switching \u2014 use design tokens.`,
-          fix: `Replace with a typed slot (Text tone="muted" / Box surface="accent" / Badge variant="success") OR a semantic token: var(--ggui-color-onSurfaceVariant), var(--ggui-color-primary-500), etc. The keyword "${named}" maps to a fixed RGB; the operator's theme has no effect on it.`,
+          fix: `Replace with a typed slot (Text tone="muted" / Box surface="accent" / Badge variant="success") OR a semantic token: var(--ggui-color-onSunken), var(--ggui-color-primary-500), etc. The keyword "${named}" maps to a fixed RGB; the operator's theme has no effect on it.`,
           line: lineNum
         });
       }
     }
-    const pxMatch = line.match(/(?:padding|margin|gap|borderRadius)\s*:\s*['"]?\d+px/);
+    const pxMatch = enforceDesignVocabulary ? line.match(/(?:padding|margin|gap|borderRadius)\s*:\s*['"]?\d+px/) : null;
     if (pxMatch && !line.includes("var(--ggui-")) {
       issues.push({
         tier: 0,
@@ -1302,11 +1311,11 @@ ${errorDetail}`,
         category: "tokens",
         subcategory: "raw-pixels",
         description: "Raw pixel value in spacing \u2014 must use design tokens",
-        fix: "Replace with var(--ggui-spacing-*, fallback)",
+        fix: 'Replace with a bare var(--ggui-spacing-*) token \u2014 no literal fallback (the runtime injects every token) \u2014 or the scale name on the primitive prop (gap="md", padding="lg")',
         line: lineNum
       });
     }
-    const numericSpacingMatch = line.match(/\b(padding|paddingX|paddingY|gap|margin)\s*=\s*\{?\s*(\d+)\s*\}?/);
+    const numericSpacingMatch = enforceDesignVocabulary ? line.match(/\b(padding|paddingX|paddingY|gap|margin)\s*=\s*\{?\s*(\d+)\s*\}?/) : null;
     if (numericSpacingMatch && !line.includes("var(--ggui-")) {
       issues.push({
         tier: 0,
@@ -1320,7 +1329,7 @@ ${errorDetail}`,
     }
   }
   const clickablePattern = /<(?:Card|Box|Stack|Row)\s[^>]*onClick/;
-  for (let i = 0; i < lines.length; i++) {
+  for (let i = 0; enforceDesignVocabulary && i < lines.length; i++) {
     if (clickablePattern.test(lines[i]) && !lines[i].includes("as={Clickable}") && !lines[i].includes("as={Pressable}")) {
       issues.push({
         tier: 0,
@@ -1333,9 +1342,8 @@ ${errorDetail}`,
       });
     }
   }
-  const actionBindings = [
-    ...sourceCode.matchAll(/(?:const|let)\s+(\w+)\s*=\s*useAction\s*\(/g)
-  ].map((m) => m[1]).filter((name) => typeof name === "string");
+  const bindingRe = designMode === "free" ? /(?:const|let)\s+(\w+)\s*=\s*useAction\s*(?:<[^>]*>)?\s*\(/g : /(?:const|let)\s+(\w+)\s*=\s*useAction\s*\(/g;
+  const actionBindings = [...sourceCode.matchAll(bindingRe)].map((m) => m[1]).filter((name) => typeof name === "string");
   for (const binding of actionBindings) {
     const callSites = (sourceCode.match(new RegExp(`\\b${binding}\\s*\\(`, "g")) ?? []).length;
     if (callSites >= 2) {
@@ -1351,7 +1359,7 @@ ${errorDetail}`,
   }
   if (actionBindings.length > 0) {
     issues.push(
-      ...detectCertainDoubleWiredActions(sourceCode, actionBindings)
+      ...detectCertainDoubleWiredActions(sourceCode, actionBindings, designMode)
     );
   }
   if (/\buseRender\s*\(/.test(sourceCode)) {
@@ -1396,7 +1404,7 @@ ${errorDetail}`,
   const ALIGN_VALUES = /* @__PURE__ */ new Set(["start", "center", "end", "stretch"]);
   const JUSTIFY_VALUES = /* @__PURE__ */ new Set(["start", "center", "end", "between", "around", "evenly"]);
   const tagRegex = /<(Stack|Row)\b([^>]*)>/gs;
-  for (const tag of sourceCode.matchAll(tagRegex)) {
+  for (const tag of enforceDesignVocabulary ? sourceCode.matchAll(tagRegex) : []) {
     const tagName = tag[1];
     const attrs = tag[2];
     const tagLine = sourceCode.slice(0, tag.index).split("\n").length;
@@ -1682,8 +1690,8 @@ Import \`${exportName}\` ONLY from '${use.package}' \u2014 that is the package i
   }
   return issues;
 }
-async function runTier0(sourceCode, contract) {
-  const issues = await runTier0Checks(sourceCode, contract);
+async function runTier0(sourceCode, contract, designMode = DEFAULT_DESIGN_MODE) {
+  const issues = await runTier0Checks(sourceCode, contract, void 0, void 0, designMode);
   const pass = [];
   const failedCategories = new Set(issues.map((i) => i.category));
   const tier0Categories = ["compile", "security", "contract", "types", "imports", "tokens"];