@ggui-ai/ui-gen 0.18.0 → 0.19.0

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

@@ -2,7 +2,7 @@ import * as _ggui_ai_protocol from '@ggui-ai/protocol';
 import { JsonValue, DataContract, JsonObject, GadgetDescriptor } from '@ggui-ai/protocol';
 import { G as GenerationProfileInput } from '../styling-profile-CxfvV48g.js';
 import { C as Classification } from '../axes-CzLEMDeB.js';
-import { E as EvalIssue, R as RuntimeProbeStatus, A as AxisCheck, c as EvalTier } from '../types-public-DVSssdc-.js';
+import { E as EvalIssue, R as RuntimeProbeStatus, A as AxisCheck, c as EvalTier } from '../types-public-DKR_h70H.js';
 import { LLMToolDef } from '../llm.js';
 import { H as HarnessFragment, a as CacheTier } from '../types-BOvHNG7K.js';
 import { ProcessMode, HarnessPolicy } from '../policy.js';
@@ -365,6 +365,13 @@ interface Harness {
      * into `free`.
      */
     readonly designMode: DesignMode;
+    /**
+     * The rendering canvas this harness was built for (ggui#1117) — threaded
+     * from `CreateHarnessInput.canvas` into the HOW leg (the `free` prompt
+     * states it) and, via `run-check.ts`, onto every axis check's input.
+     * ABSENT when the caller had no rendering context; never defaulted.
+     */
+    readonly canvas?: CanvasClass;
     /** The app's generation profile in force for this harness (#991), if any. */
     readonly profile?: GenerationProfileInput;
     readonly how: HowLeg;

package/dist/harness/types-public.js

@@ -65,6 +65,61 @@ function truncateSourceForTrace(source) {
 function newValidatorTraceId() {
   return Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
 }
+
+// src/design-mode.ts
+var DEFAULT_DESIGN_MODE = "constrained";
+function canvasDisplayModeForShell(shell) {
+  return shell === "chat" || shell === "inline" ? "inline" : "fullscreen";
+}
+function canvasForRendering(shellType, screen) {
+  const shell = shellType ?? "fullscreen";
+  if (canvasDisplayModeForShell(shell) === "inline") return "xs-chat-card";
+  if (shell === "spatial") return "md";
+  switch (screen ?? "universal") {
+    case "mobile":
+      return "mobile-fullscreen-small";
+    case "tablet":
+      return "md";
+    default:
+      return "lg";
+  }
+}
+var CANVAS_DESCRIPTORS = {
+  "xs-chat-card": {
+    label: "extra-small chat card",
+    minWidthPx: 320,
+    maxWidthPx: 480,
+    host: "an inline card inside a chat message bubble \u2014 the host draws the card border, shadow and rounded corners; the component fills the bubble width and takes its natural height"
+  },
+  "mobile-fullscreen-small": {
+    label: "small mobile fullscreen",
+    minWidthPx: 320,
+    maxWidthPx: 599,
+    host: "a phone-sized viewport the component owns edge to edge \u2014 single column, touch targets at least 44px, the component manages its own scroll"
+  },
+  md: {
+    label: "medium panel",
+    minWidthPx: 600,
+    maxWidthPx: 1023,
+    host: "a tablet viewport or a floating panel (spatial / picture-in-picture) \u2014 one or two columns, medium density"
+  },
+  lg: {
+    label: "large fullscreen",
+    minWidthPx: 1024,
+    maxWidthPx: 1439,
+    host: "a desktop viewport the component owns edge to edge \u2014 multi-column layouts, hover states and pointer interactions are available"
+  },
+  xl: {
+    label: "extra-large fullscreen",
+    minWidthPx: 1440,
+    maxWidthPx: 1920,
+    host: "a wide desktop viewport the component owns edge to edge \u2014 cap content width or use the extra room deliberately; never stretch a single column across the whole width"
+  }
+};
+function describeCanvas(canvas) {
+  const d = CANVAS_DESCRIPTORS[canvas];
+  return `This component renders on the \`${canvas}\` canvas (${d.label}): ${d.minWidthPx}\u2013${d.maxWidthPx}px wide, ${d.host}. Design for the whole range \u2014 the host may size the iframe anywhere inside it, and the host owns the height: size to your content, never to the viewport.`;
+}
 function axisCheckTraceEnabled() {
   return process.env["GGUI_AXIS_CHECK_TRACE"] === "1";
 }
@@ -330,7 +385,9 @@ function traceFacts(input) {
     designMode: input.designMode ?? "constrained",
     classification: input.classification.vector,
     propsSpecKeys: Object.keys(propsSpec ?? {}),
-    propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {})
+    propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {}),
+    // No default here, unlike designMode: an absent canvas is a fact about the caller, not a guess to paper over.
+    ...input.canvas !== void 0 ? { canvas: input.canvas } : {}
   };
 }
 
@@ -368,7 +425,9 @@ async function runCheck(input) {
     contract,
     originalPrompt: prompt,
     classification: harness.classification,
-    designMode: harness.designMode
+    designMode: harness.designMode,
+    // ggui#1117: the canvas the harness was built for, when it has one — never a default.
+    ...harness.canvas !== void 0 ? { canvas: harness.canvas } : {}
   };
   const axisRun = runGatedAxisChecks(check.axisChecks, axisInput);
   issues.push(...axisRun.issues);
@@ -984,63 +1043,6 @@ function compose(classification) {
     fragments: matched
   };
 }
-
-// src/design-mode.ts
-var DEFAULT_DESIGN_MODE = "constrained";
-function canvasDisplayModeForShell(shell) {
-  return shell === "chat" || shell === "inline" ? "inline" : "fullscreen";
-}
-function canvasForRendering(shellType, screen) {
-  const shell = shellType ?? "fullscreen";
-  if (canvasDisplayModeForShell(shell) === "inline") return "xs-chat-card";
-  if (shell === "spatial") return "md";
-  switch (screen ?? "universal") {
-    case "mobile":
-      return "mobile-fullscreen-small";
-    case "tablet":
-      return "md";
-    default:
-      return "lg";
-  }
-}
-var CANVAS_DESCRIPTORS = {
-  "xs-chat-card": {
-    label: "extra-small chat card",
-    minWidthPx: 320,
-    maxWidthPx: 480,
-    host: "an inline card inside a chat message bubble \u2014 the host draws the card border, shadow and rounded corners; the component fills the bubble width and takes its natural height"
-  },
-  "mobile-fullscreen-small": {
-    label: "small mobile fullscreen",
-    minWidthPx: 320,
-    maxWidthPx: 599,
-    host: "a phone-sized viewport the component owns edge to edge \u2014 single column, touch targets at least 44px, the component manages its own scroll"
-  },
-  md: {
-    label: "medium panel",
-    minWidthPx: 600,
-    maxWidthPx: 1023,
-    host: "a tablet viewport or a floating panel (spatial / picture-in-picture) \u2014 one or two columns, medium density"
-  },
-  lg: {
-    label: "large fullscreen",
-    minWidthPx: 1024,
-    maxWidthPx: 1439,
-    host: "a desktop viewport the component owns edge to edge \u2014 multi-column layouts, hover states and pointer interactions are available"
-  },
-  xl: {
-    label: "extra-large fullscreen",
-    minWidthPx: 1440,
-    maxWidthPx: 1920,
-    host: "a wide desktop viewport the component owns edge to edge \u2014 cap content width or use the extra room deliberately; never stretch a single column across the whole width"
-  }
-};
-function describeCanvas(canvas) {
-  const d = CANVAS_DESCRIPTORS[canvas];
-  return `This component renders on the \`${canvas}\` canvas (${d.label}): ${d.minWidthPx}\u2013${d.maxWidthPx}px wide, ${d.host}. Design for the whole range \u2014 the host may size the iframe anywhere inside it, and the host owns the height: size to your content, never to the viewport.`;
-}
-
-// src/boilerplate/render.ts
 var __dirname$1 = dirname(fileURLToPath(import.meta.url));
 var TEMPLATE_DIRS = [
   resolve(__dirname$1, "templates"),
@@ -1646,7 +1648,7 @@ Rules:
 1. All request-specific data \u2192 props with defaults. City names, tickers, user names, dates, counts.
 2. Layout and styling are universal. Colors, spacing, structure \u2014 these are the reusable part.
 3. Default values come from the current request \u2014 so the component renders correctly standalone.
-4. Copy comes from the props. NEVER invent display text the contract does not carry \u2014 no eyebrow / kicker / overline (a \`<Text caps>\` label), no helper line, no status text, no tagline. A caps label exists only when a prop supplies its text (\`<Text caps>{props.section}</Text>\`); a heading's fallback is the request's own words, never a slogan of your own. Text the agent cannot change is chatter on every render.
+4. Copy comes from the props. NEVER invent display text the contract does not carry \u2014 no eyebrow / kicker / overline (a \`<Text caps>\` label), no helper line, no status text, no tagline. **Do NOT add a caps label above the heading** \u2014 not \`<Text caps>LET'S BEGIN</Text>\`, not \`WELCOME\`, not a section kicker like \`GETTING STARTED\` or \`OVERVIEW\` \u2014 UNLESS a prop supplies that exact text (\`<Text caps>{props.section}</Text>\`). When the request asks for a heading and a line, render the heading and the line and NOTHING above the heading. A heading's fallback is the request's own words, never a slogan of your own. Text the agent cannot change is chatter on every render, and a caps eyebrow you wrote is the most common form of it.
 5. Props interface must be typed and exported.`;
 var TERMINAL_ACTIONS = `## Actions the user means once
 
@@ -2493,7 +2495,7 @@ Don't render text-only metrics. A weather widget without a sun/cloud, a stock ca
 </Row>
 \`\`\`
 
-Use \`<Icon name="..." />\` for line icons \u2014 ONLY the curated Lucide subset renders (call \`get_available_icons\` for the exact kebab-case names; a name outside it renders an empty box and fails the check); emoji directly for status/weather/mood. Both are valid. For per-stat tiny accents, use a small icon next to the label.
+Use \`<Icon name="..." />\` for line icons \u2014 ONLY the design system's curated set renders (~200 kebab-case Lucide names); a name OUTSIDE it renders an empty box and fails the check. On a single-pass render you cannot look the set up, so use ONLY a name you are sure is in it. Safe common names: \`check\` \`x\` \`plus\` \`minus\` \`search\` \`settings\` \`user\` \`users\` \`calendar\` \`clock\` \`arrow-right\` \`arrow-left\` \`chevron-right\` \`chevron-down\` \`trash-2\` \`edit\` \`info\` \`alert-circle\` \`bell\` \`home\` \`file\` \`file-text\` \`star\` \`heart\` \`mail\` \`send\` \`download\` \`upload\` \`external-link\` \`filter\` \`check-circle\`. The numbered variants (\`edit-2\`, \`edit-3\`) and synonyms (\`pencil\`, \`pen\`, \`trash\`, \`x-circle\`) are NOT in the set \u2014 use \`edit\` and \`trash-2\`. If the icon you want is not clearly one of these, OMIT it: a card with no icon beats one with an empty box. Emoji render directly for status/weather/mood. For per-stat tiny accents, use a small icon next to the label.
 
 ### Spacing \u2014 generosity beats compactness
 
@@ -2880,6 +2882,7 @@ function createHarness(input) {
     name,
     classification,
     designMode,
+    ...input.canvas !== void 0 ? { canvas: input.canvas } : {},
     ...input.profile !== void 0 ? { profile: input.profile } : {},
     how,
     what,