@ggui-ai/ui-gen 0.25.0 → 0.26.0

package/dist/boilerplate.d.ts

@@ -1,8 +1,8 @@
-export { S as ScreenSize, a as ShellType, g as generateBoilerplate } from './generate-9IeNT4ZY.js';
+export { S as ScreenSize, a as ShellType, g as generateBoilerplate } from './generate-tSO_shQ0.js';
 export { j as jsonSchemaTypeToTs } from './json-schema-ts-CbB78b3n.js';
 import { G as GenerationProfileInput } from './styling-profile-CxfvV48g.js';
 import { GadgetDescriptor } from '@ggui-ai/protocol';
-import { D as DesignMode, C as CanvasClass } from './design-mode-DLufhrNp.js';
+import { D as DesignMode, C as CanvasClass } from './design-mode-DGWN_Gkm.js';
 
 interface SystemPromptInputs {
     /** The user's original request. */

package/dist/boilerplate.js

@@ -792,6 +792,13 @@ function buildCodingCriteriaSummary(designMode = "constrained") {
   }
   return lines.join("\n");
 }
+var NOT_YET_TAUGHT_TOKENS = /* @__PURE__ */ new Set([
+  "--ggui-color-controlAccentOutline",
+  "--ggui-color-controlOutline"
+]);
+var taughtTokenManifest = consumedTokenManifest.filter(
+  (token) => !NOT_YET_TAUGHT_TOKENS.has(token)
+);
 
 // src/boilerplate/hard-sections.ts
 var PROTOCOL_NOTES = `## Protocol Notes
@@ -1001,7 +1008,7 @@ The width works the same way, and the mistake is the mirror image: **your outerm
 
 - Never put \`maxWidth\` (or a \`max-w-*\` class) on the element you return at the top. On a wide canvas that turns your card into a narrow strip with the frame's ground on either side of it, and on a narrow one it does nothing \u2014 the same composition reading differently at two sizes.
 - DO cap the reading measure inside: a column of prose is easiest to read at 60\u201370 characters, so wrap the TEXT in a \`<Container maxWidth="sm">\` (or your own \`max-width\`) and leave the root filling. A hero band, a toolbar, a table or an image then still uses the whole width, which is what makes a wide card look composed rather than padded.
-- Centre that inner column with the container's own centring, not by shrinking the root.
+- Centre that inner column with the container's own centring, not by shrinking the root \u2014 and give the card ONE column: every block of the reading flow (a heading, its text, and the chips or buttons that answer it) sits in a \`<Container>\` of the same \`maxWidth\`, so their left edges line up even where a full-width band runs between them.
 - **They are two different elements.** Even when the whole card is one column of text, the root still fills and the column sits INSIDE it \u2014 \`<Box padding="lg"><Container maxWidth="sm">\u2026</Container></Box>\`, never a root that is itself the container. A centred card is centring inside a filled frame, not a shrunken frame.`;
 var COMPONENT_STRUCTURE = `## Component Structure
 
@@ -1078,7 +1085,7 @@ function colorVocabularyFromManifest(manifest) {
 function renderRamp(r) {
   return `\`${r.family}-${r.steps.join("/")}\`${r.bare ? ` (plus bare \`${r.family}\`)` : ""}`;
 }
-function renderFreeColorRule(manifest = consumedTokenManifest) {
+function renderFreeColorRule(manifest = taughtTokenManifest) {
   const { ramps, roles } = colorVocabularyFromManifest(manifest);
   const brand = ramps.filter((r) => r.family === "primary" || r.family === "neutral");
   const state = ramps.filter((r) => r.family !== "primary" && r.family !== "neutral");
@@ -1168,7 +1175,7 @@ var TOKEN_GROUPS = [
   { label: "Radius (optional)", prefixes: ["--ggui-shape-radius-"], note: "" },
   { label: "Shadow (optional)", prefixes: ["--ggui-shape-shadow-"], note: "" }
 ];
-function renderTokenVocabulary(manifest = consumedTokenManifest) {
+function renderTokenVocabulary(manifest = taughtTokenManifest) {
   const sorted = [...manifest].sort();
   const claimed = /* @__PURE__ */ new Set();
   const lines = [