@ggui-ai/ui-gen 0.26.0 → 0.27.0

package/dist/harness/result-types.d.ts

@@ -2,8 +2,8 @@ import { JsonObject, DataContract } from '@ggui-ai/protocol';
 export { ActionSpec, DataContract, JsonSchema, PropsSpec, StreamSpec } from '@ggui-ai/protocol';
 import { AdapterResult } from '../adapters/types.js';
 import { R as RenderingContext } from '../prompts-BhNUuRoZ.js';
-import { e as EvalResult } from '../types-public-B7wn4ce5.js';
-import { V as VisualLegTokens } from '../visual-evaluator-C9L-o6ap.js';
+import { e as EvalResult } from '../types-public-h8IMnYuh.js';
+import { V as VisualLegTokens } from '../visual-evaluator-C2strxqD.js';
 import { D as DesignMode, C as CanvasClass } from '../design-mode-DGWN_Gkm.js';
 import 'zod';
 import '../llm.js';

package/dist/harness/runtime.d.ts

@@ -1,5 +1,5 @@
 import { G as GenerationProfileInput } from '../styling-profile-CxfvV48g.js';
-import { Q as QualityConfig, b as AgentConfig } from '../types-public-B7wn4ce5.js';
+import { Q as QualityConfig, b as AgentConfig } from '../types-public-h8IMnYuh.js';
 import { DataContract, JsonObject, GadgetDescriptor } from '@ggui-ai/protocol';
 import { C as CriteriaBank } from '../bank-Ctdp3FUA.js';
 import { C as CanvasClass, D as DesignMode } from '../design-mode-DGWN_Gkm.js';

package/dist/harness/runtime.js

@@ -45,6 +45,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)\`
@@ -169,7 +170,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
@@ -1217,10 +1218,7 @@ function buildCodingCriteriaSummary(designMode = "constrained") {
   }
   return lines.join("\n");
 }
-var NOT_YET_TAUGHT_TOKENS = /* @__PURE__ */ new Set([
-  "--ggui-color-controlAccentOutline",
-  "--ggui-color-controlOutline"
-]);
+var NOT_YET_TAUGHT_TOKENS = /* @__PURE__ */ new Set([]);
 var taughtTokenManifest = consumedTokenManifest.filter(
   (token) => !NOT_YET_TAUGHT_TOKENS.has(token)
 );
@@ -2132,13 +2130,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)\`
@@ -2153,7 +2152,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 |