@ggui-ai/ui-gen 0.26.0 → 0.27.0

package/dist/advanced/index.d.ts

@@ -1,11 +1,11 @@
 import { GeneratorTier, UiGenerator } from '@ggui-ai/mcp-server-core';
 import { ModelRef, JsonObject } from '@ggui-ai/protocol';
 import { BehaviorFailure, PlaywrightModule } from '@ggui-ai/ui-visual-tester';
-import { C as CreateUiGeneratorOptions } from '../create-ui-generator-N4gRXpcL.js';
-import { a as RenderCheckIssue } from '../adapter-BJwn74rx.js';
+import { C as CreateUiGeneratorOptions } from '../create-ui-generator-BrZHF0cf.js';
+import { a as RenderCheckIssue } from '../adapter-h4_V69LI.js';
 import '../harness/runtime.js';
 import '../styling-profile-CxfvV48g.js';
-import '../types-public-B7wn4ce5.js';
+import '../types-public-h8IMnYuh.js';
 import '../llm.js';
 import '../design-mode-DGWN_Gkm.js';
 import '../axes-CKVCzR_x.js';
@@ -21,7 +21,7 @@ import '../policy.js';
 import '../harness/result-types.js';
 import '../adapters/types.js';
 import '../prompts-BhNUuRoZ.js';
-import '../visual-evaluator-C9L-o6ap.js';
+import '../visual-evaluator-C2strxqD.js';
 import 'puppeteer-core';
 
 /**

package/dist/advanced/index.js

@@ -338,6 +338,21 @@ var init_raw = __esm({
   }
 });
 
+// src/adapters/claude/source-capture.ts
+function sourceCodeFromToolUse(name, input) {
+  if (typeof name !== "string") return void 0;
+  const field2 = name === "Write" ? "content" : name.endsWith(COMPILE_TOOL_SUFFIX) ? "code" : void 0;
+  if (field2 === void 0 || typeof input !== "object" || input === null) return void 0;
+  const value = Reflect.get(input, field2);
+  return typeof value === "string" && value.length > 0 ? value : void 0;
+}
+var COMPILE_TOOL_SUFFIX;
+var init_source_capture = __esm({
+  "src/adapters/claude/source-capture.ts"() {
+    COMPILE_TOOL_SUFFIX = "__compile_component";
+  }
+});
+
 // src/adapters/claude/message-parser.ts
 function createArtifacts() {
   return {
@@ -457,12 +472,9 @@ function extractSourceCode(message, artifacts) {
   const content = assistantMsg.message?.content;
   if (!Array.isArray(content)) return;
   for (const block of content) {
-    if (block.type === "tool_use" && block.name === "Write") {
-      const input = block.input;
-      if (input?.content) {
-        artifacts.sourceCode = input.content;
-      }
-    }
+    if (block.type !== "tool_use") continue;
+    const value = sourceCodeFromToolUse(block.name, block.input);
+    if (value !== void 0) artifacts.sourceCode = value;
   }
 }
 function unescapeJsonString(s) {
@@ -500,6 +512,7 @@ function extractGeneratorMeta(message, artifacts) {
 }
 var init_message_parser = __esm({
   "src/adapters/claude/message-parser.ts"() {
+    init_source_capture();
   }
 });
 
@@ -595,6 +608,17 @@ var init_claude_code_login = __esm({
   }
 });
 
+// src/adapters/claude/sdk-tool-pins.ts
+function sdkToolPins(input) {
+  const builtins = [...input.builtinTools ?? []];
+  const approved = input.allowedTools !== void 0 ? [...input.allowedTools] : Object.keys(input.mcpServers ?? {}).map((name) => `mcp__${name}`);
+  return { tools: builtins, settingSources: [], allowedTools: [...approved, ...builtins] };
+}
+var init_sdk_tool_pins = __esm({
+  "src/adapters/claude/sdk-tool-pins.ts"() {
+  }
+});
+
 // src/adapters/claude/sdk.ts
 var sdk_exports = {};
 __export(sdk_exports, {
@@ -621,6 +645,7 @@ var init_sdk = __esm({
     init_message_parser();
     init_tool_bridge2();
     init_claude_code_login();
+    init_sdk_tool_pins();
     ClaudeSdkAdapter = class extends GeneratorAdapter {
       provider = "claude";
       mode = "sdk";
@@ -660,9 +685,8 @@ var init_sdk = __esm({
             systemPrompt: params.systemPrompt,
             ...mcpServers && { mcpServers },
             ...cfg.agents && { agents: cfg.agents },
-            ...allowedTools && { allowedTools },
-            permissionMode: "bypassPermissions",
-            allowDangerouslySkipPermissions: true,
+            // ggui#1714 — no CLI built-ins unless asked for, no host settings, no permission bypass.
+            ...sdkToolPins({ mcpServers, allowedTools, builtinTools: cfg.builtinTools }),
             ...cfg.cliPath && { pathToClaudeCodeExecutable: cfg.cliPath },
             ...cfg.stderr && { stderr: cfg.stderr },
             // ggui#1185 — tool-less, config-less, non-bare; the model is pinned above.
@@ -2944,10 +2968,7 @@ var init_design_mode = __esm({
 var NOT_YET_TAUGHT_TOKENS, taughtTokenManifest;
 var init_taught_tokens = __esm({
   "src/taught-tokens.ts"() {
-    NOT_YET_TAUGHT_TOKENS = /* @__PURE__ */ new Set([
-      "--ggui-color-controlAccentOutline",
-      "--ggui-color-controlOutline"
-    ]);
+    NOT_YET_TAUGHT_TOKENS = /* @__PURE__ */ new Set([]);
     taughtTokenManifest = consumedTokenManifest.filter(
       (token) => !NOT_YET_TAUGHT_TOKENS.has(token)
     );
@@ -3467,6 +3488,40 @@ function detectComponentNeverReturns(sourceCode) {
   for (const st of body.statements) if (!isFunctionLike(st)) visit(st);
   return returnsValue ? null : { jsxStatementLine };
 }
+function kitControlTags(source) {
+  const out = [];
+  const open = new RegExp(`<(${KIT_CONTROLS.join("|")})\\b`, "g");
+  for (const m of source.matchAll(open)) {
+    const start = (m.index ?? 0) + m[0].length;
+    let depth = 0;
+    let quote = null;
+    let i = start;
+    for (; i < source.length; i += 1) {
+      const c = source[i];
+      if (quote !== null) {
+        if (c === quote && source[i - 1] !== "\\") quote = null;
+      } else if (c === '"' || c === "'" || c === "`") quote = c;
+      else if (c === "{") depth += 1;
+      else if (c === "}") depth -= 1;
+      else if (c === ">" && depth === 0) break;
+    }
+    out.push({ name: m[1] ?? "", attrs: source.slice(start, i), line: source.slice(0, m.index ?? 0).split("\n").length });
+  }
+  return out;
+}
+function inlineBorderKey(attrs, source) {
+  const BORDER = /\b(border(?:Top|Right|Bottom|Left)?(?:Color|Width|Style)?)\s*:/;
+  const style = attrs.match(/\bstyle=\{\{([\s\S]*)\}\}/);
+  if (style !== null) {
+    const hit2 = (style[1] ?? "").match(BORDER);
+    if (hit2 !== null) return hit2[1] ?? null;
+  }
+  const named = attrs.match(/\bstyle=\{\s*([A-Za-z_$][\w$]*)\s*\}/);
+  if (named === null) return null;
+  const decl = source.match(new RegExp(`\\b(?:const|let)\\s+${named[1]}\\b[^=]*=\\s*\\{([^{}]*)\\}`));
+  const hit = decl !== null ? (decl[1] ?? "").match(BORDER) : null;
+  return hit !== null ? hit[1] ?? null : null;
+}
 async function runTier0Checks(sourceCode, contract, buildErrors, gadgetTypes, designMode = DEFAULT_DESIGN_MODE) {
   const issues = [];
   const lines = sourceCode.split("\n");
@@ -3864,6 +3919,20 @@ ${errorDetail}`,
       });
     }
   }
+  for (const tag of enforceDesignVocabulary ? kitControlTags(sourceCode) : []) {
+    const key = inlineBorderKey(tag.attrs, sourceCode);
+    if (key === null) continue;
+    issues.push({
+      tier: 0,
+      result: "fail",
+      category: "tokens",
+      subcategory: "control-inline-border",
+      severity: "critical",
+      description: `control-inline-border: <${tag.name}> sets an inline \`${key}\` \u2014 a kit control draws its own boundary, and an inline border paints over it`,
+      fix: `Remove the border from <${tag.name}>'s style (keep borderRadius if you need it). An outline chip is <Button variant="outline"> exactly as it comes; a control-like edge on your own element uses var(--ggui-color-controlOutline).`,
+      line: tag.line
+    });
+  }
   if (!sourceCode.includes("interface Props") && !sourceCode.includes("type Props")) {
     issues.push({
       tier: 0,
@@ -4135,7 +4204,7 @@ async function runTier0(sourceCode, contract, designMode = DEFAULT_DESIGN_MODE)
   }
   return { issues, pass };
 }
-var MANIFEST_TOKENS, RETIRED_TOKEN_SUCCESSORS, TOKEN_REF_RE, HOOK_NAME_FOR, CONTRACT_FIELD_FOR;
+var MANIFEST_TOKENS, RETIRED_TOKEN_SUCCESSORS, TOKEN_REF_RE, HOOK_NAME_FOR, CONTRACT_FIELD_FOR, KIT_CONTROLS;
 var init_run_tier0 = __esm({
   "src/check/run-tier0.ts"() {
     init_design_mode();
@@ -4164,6 +4233,7 @@ var init_run_tier0 = __esm({
       stream: "streamSpec",
       context: "contextSpec"
     };
+    KIT_CONTROLS = ["Button", "Input", "Select", "TextArea", "Checkbox", "RadioGroup", "Toggle", "SearchField"];
   }
 });
 
@@ -7891,6 +7961,7 @@ function instrumentRead(kind, m) {
   return { verdict: "n/a", evidence: `fill ${m.inkRatio.toFixed(3)} reported; no floor ruled` };
 }
 function readRow(row, answers, m, unansweredReason) {
+  if (row.evaluation === "judge" && REQUIRES_POST_ACTION_CAPTURE.has(row.id) && m.postActionCapture !== true) return { verdict: "n/a", evidence: NO_POST_ACTION };
   if (row.evaluation === "judge") return majority(row.id, answers, unansweredReason);
   if (row.evaluation === "human") return { verdict: "n/a", evidence: `reader's column (status ${row.status})` };
   if (row.status !== "live") return { verdict: "n/a", evidence: `not implemented (status ${row.status})` };
@@ -7949,14 +8020,14 @@ ${text}
 }
 function buildCriteriaJudgeBlock(bank, selected, inputs = {}) {
   const byId = new Map(bankRows(bank).map((r) => [r.id, r]));
-  const asked = selected.selection.map((s) => byId.get(s.id)).filter((r) => r !== void 0 && r.evaluation === "judge");
+  const asked = selected.selection.map((s) => byId.get(s.id)).filter((r) => r !== void 0 && r.evaluation === "judge").filter((r) => inputs.postActionCapture === true || !REQUIRES_POST_ACTION_CAPTURE.has(r.id));
   if (asked.length === 0) return "";
   const lines = asked.map((r) => `- ${r.id} (${r.severity}): ${r.text} Evidence must name: ${r.evidence}`);
   return "## Criteria \u2014 answer each one from the FRAME only\nRead these off the screenshot. Never infer them from the request, the styling profile or any direction text above.\n" + (inputs.frame !== void 0 ? `${criteriaFrameLine(inputs.frame)}
 ` : "") + (inputs.propsJson !== void 0 ? criteriaPropsSection(inputs.propsJson) : "") + `${lines.join("\n")}
 Add to your JSON a top-level "criteria" array with exactly these ids: [{ "id": "<id>", "verdict": "pass" | "fail" | "n/a", "evidence": "<one sentence naming the region or element you read it from>" }]. Every row here was selected as applicable to this card, so "n/a" never means "does not apply": use it ONLY when this frame cannot show the criterion \u2014 it is then recorded as not evaluated.`;
 }
-var INSTRUMENT_BY_ID, INSTRUMENT_BESIDE_JUDGE, CRITERIA_PROPS_MAX_CHARS;
+var INSTRUMENT_BY_ID, INSTRUMENT_BESIDE_JUDGE, REQUIRES_POST_ACTION_CAPTURE, NO_POST_ACTION, CRITERIA_PROPS_MAX_CHARS;
 var init_resolve = __esm({
   "src/evaluation/criteria/resolve.ts"() {
     init_bank();
@@ -7969,6 +8040,8 @@ var init_resolve = __esm({
     INSTRUMENT_BESIDE_JUDGE = {
       "space.edge": "edge"
     };
+    REQUIRES_POST_ACTION_CAPTURE = /* @__PURE__ */ new Set(["state.feedback"]);
+    NO_POST_ACTION = "not evaluated: no post-action capture";
     CRITERIA_PROPS_MAX_CHARS = 2e3;
   }
 });
@@ -10140,6 +10213,7 @@ These tokens adapt automatically to any theme (light, dark, branded). **ALWAYS u
 | link | var(--ggui-color-link) | Accent TEXT \u2014 eyebrows, taglines, links, labels, inline arrows: the brand's readable ink, derived per mode to clear 4.5:1 on the container and the ground |
 | outline | var(--ggui-color-outline) | Borders, dividers |
 | outlineVariant | var(--ggui-color-outlineVariant) | Subtle borders |
+| controlOutline | var(--ggui-color-controlOutline) | A control's edge \u2014 clears 3:1 on its surface; kit controls draw it themselves |
 
 **Usage pattern:**
 - Page/section background \u2192 \`var(--ggui-color-ground)\`
@@ -10264,7 +10338,7 @@ Use \`var(--ggui-spacing-N)\` for all padding, gap, and margin values. **Never u
 ### Color usage guide
 - **Layering roles** (ground, container, elevated, sunken + their on* inks; outline): one kind of AREA each \u2014 use them for every background/text/border decision; they adapt to any theme
 - **primary-50/100**: Section backgrounds, highlight strips, card headers
-- **primary-200/300**: Borders, dividers, focus rings, input outlines
+- **primary-200/300**: Dividers and section rules \u2014 never a control's border: kit controls draw their own edge (\`controlOutline\` / \`controlAccentOutline\`), so set no inline border on them
 - **primary-500/600**: Filled buttons, CTAs, badges, icon fills, active indicators \u2014 fills and borders, NOT a text color
 - **link**: Accent TEXT \u2014 eyebrows, taglines, links, labels, inline arrows; the brand's readable ink per mode (a bare \`primary-300\u2026600\` as a text color fails tier-0: \`universal.accent_text_ink\`)
 - **primary-700/800/900**: Headings and text on light primary backgrounds
@@ -15267,13 +15341,14 @@ MANDATORY:
 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. NEVER include literal fallback values in ANY token reference \u2014 colors, spacing, typography, radius, shadows alike. Write \`var(--ggui-spacing-4)\` bare, never \`var(--ggui-spacing-4, 16px)\`; \`var(--ggui-color-primary-600)\` bare, never \`var(--ggui-color-primary-600, #0284c7)\`. The runtime injects every token; a literal fallback paints the wrong value exactly when the operator's theme matters most.
+5. NEVER set an inline \`border\`, \`borderColor\`, \`borderWidth\` or \`borderStyle\` on a kit control \u2014 \`Button\`, \`Input\`, \`Select\`, \`TextArea\`, \`Checkbox\`, \`RadioGroup\`, \`Toggle\`, \`SearchField\`. The control draws its own boundary, and it clears 3:1 on its surface in every theme: an outline chip is \`<Button variant="outline">\` exactly as it comes (its edge is \`controlAccentOutline\`). Where you draw a control-like edge on your own element, use \`var(--ggui-color-controlOutline)\`. A ramp step such as \`primary-200\` as a control's border is nearly invisible (about 1.1:1).
 
 Token categories:
 - Brand fills: \`var(--ggui-color-primary-600)\`, \`var(--ggui-color-primary-50)\`
 - Accent text: \`var(--ggui-color-link)\` \u2014 eyebrows, taglines, links, labels; readable per mode (never a bare \`primary-<stop>\` as a text color)
 - Text: \`var(--ggui-color-onContainer)\`, \`var(--ggui-color-onSunken)\`
 - Backgrounds: \`var(--ggui-color-container)\`, \`var(--ggui-color-sunken)\`
-- Borders: \`var(--ggui-color-outline)\`
+- Borders: \`var(--ggui-color-outline)\` \u2014 dividers and the edges of non-interactive boxes; a control's edge is the kit's (rule 5)
 - Spacing: \`var(--ggui-spacing-4)\`, \`var(--ggui-spacing-6)\`
 - Typography: \`var(--ggui-font-size-sm)\`, \`var(--ggui-font-weight-semibold)\`
 - Shadows: \`var(--ggui-shape-shadow-sm)\`, \`var(--ggui-shape-shadow-md)\`, \`var(--ggui-shape-shadow-lg)\`
@@ -15288,7 +15363,7 @@ Use the FULL primary palette throughout the component \u2014 NOT only on submit
 | Element | Token | Purpose |
 |---------|-------|---------|
 | Section headers, hero areas, highlight strips | \`primary-50\` / \`primary-100\` | Subtle branded backgrounds |
-| Borders, dividers, focus rings, input focus | \`primary-200\` / \`primary-300\` | Branded structure |
+| Dividers, section rules, edges of non-interactive boxes | \`primary-200\` / \`primary-300\` | Branded structure \u2014 never a control's border (rule 5) |
 | Accent TEXT \u2014 eyebrows, taglines, links, labels, inline arrows | \`link\` (\`var(--ggui-color-link)\`) or \`<Text tone="emphasized">\` | The brand's READABLE ink, derived per mode to clear 4.5:1 \u2014 a bare \`primary-300\u2026600\` as a text color fails tier-0 |
 | Icon fills, badges, active indicators | \`primary-500\` / \`primary-600\` | Core accent fill |
 | Buttons, CTAs, filled interactive elements | \`primary-600\` / \`primary-700\` | Primary actions |