@ggui-ai/ui-gen 0.16.0 → 0.17.0

package/dist/compose.js

@@ -18,7 +18,7 @@ var renderFragments = {
     axis: "render",
     value: "grid",
     cacheTier: "axisDelta",
-    promptText: "## Render: grid\n2D tile layout. Use <CardGrid> or CSS `display: grid` with `grid-template-columns: repeat(N, 1fr)`. If items carry row/col fields, position each tile at (row, col). Do not scroll horizontally."
+    promptText: '## Render: grid\nTwo shapes share this axis \u2014 read the contract:\n- A TILE grid (a gallery, a stat grid, items that may carry row/col fields): `<Grid columns={N} gap="md">` (or `<CardGrid>`); if items carry row/col fields, position each tile at (row, col).\n- A BOARD (a columns / lanes / stages array whose items are cards \u2014 a kanban): the columns sit SIDE BY SIDE at md and wider \u2014 `<Grid columns={{ base: 1, md: columns.length }} gap="md">` wrapping the columns map, each column its own `<Stack>` of `<Card>`s with its header and count; NEVER a `<Stack>` of column sections (that is a list \u2014 tier-0 fails it).\nNever hand-roll `display: grid`. Do not scroll horizontally.'
   },
   spatial: {
     axis: "render",

package/dist/compose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/fragments/render.ts","../src/fragments/state.ts","../src/fragments/writes.ts","../src/fragments/realtime.ts","../src/fragments/fetch.ts","../src/fragments/layout.ts","../src/fragments/tooling.ts","../src/fragments/index.ts","../src/compose.ts"],"names":[],"mappings":"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","file":"compose.js","sourcesContent":["// packages/ui-gen/src/fragments/render.ts\n//\n// Render-axis fragments. One per RenderShape. Kept minimal — the stable\n// prefix already covers primitives + design tokens. These only add the\n// per-shape layout pattern the LLM needs to commit to up front.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const renderFragments: Record<string, HarnessFragment> = {\n  static: {\n    axis: \"render\",\n    value: \"static\",\n    cacheTier: \"axisDelta\",\n    // Static = single entity detail. Stable prefix already covers the\n    // obvious pattern (Card + Stack + Heading + fields). No prompt text\n    // here keeps low-risk fixtures fast.\n  },\n  list: {\n    axis: \"render\",\n    value: \"list\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: list\\nVertical column of items. Each item is a <Card> with <Row> + <Text>. Use key={item.id} on each item. Do not paginate unless the contract has a fetch tool with cursor/offset.\",\n  },\n  grid: {\n    axis: \"render\",\n    value: \"grid\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: grid\\n2D tile layout. Use <CardGrid> or CSS `display: grid` with `grid-template-columns: repeat(N, 1fr)`. If items carry row/col fields, position each tile at (row, col). Do not scroll horizontally.\",\n  },\n  spatial: {\n    axis: \"render\",\n    value: \"spatial\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: spatial\\nGeo/coord-positioned items. Use absolute positioning inside a relative container, or a map primitive if available. Normalize coords to the container's bounds. Treat lat/lng as y/x, not strings.\",\n  },\n  timeline: {\n    axis: \"render\",\n    value: \"timeline\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: timeline\\nGroup items by day (or other temporal bucket). Render a sticky date header per group, then the grouped items. Sort newest-first unless the contract says otherwise. Memoize the grouping with useMemo.\",\n  },\n  chart: {\n    axis: \"render\",\n    value: \"chart\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: chart\\nNumeric → visual. Render with inline SVG (no chart library). Compute the viewBox from data min/max. Add axis labels and one value label on the latest/peak point. Keep it readable on a 400px container.\",\n  },\n  \"master-detail\": {\n    axis: \"render\",\n    value: \"master-detail\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: master-detail\\nSplit view: list on one side, detail panel on the other. Track `selectedId` in useState, default to the first item's id. Desktop = side-by-side; mobile/chat shell = stacked with back button.\",\n  },\n};\n","// packages/ui-gen/src/fragments/state.ts\n//\n// State-axis fragments. This is the most error-prone axis — \"merge\" in\n// particular collapses into append-only bugs without explicit guidance.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const stateFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"state\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n    // Pure props → JSX. Stable prefix is enough — no useState call at all.\n  },\n  \"ui-affordance\": {\n    axis: \"state\",\n    value: \"ui-affordance\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: ui-affordance\\nLocal UI state for filter text / selected id / active tab / quantity. Use useState with a sensible default. Do NOT mirror props into state — read props directly and track only the affordance value.\",\n  },\n  merge: {\n    axis: \"state\",\n    value: \"merge\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: merge (live entity reconciliation)\\n1. Seed `const [items, setItems] = useState(props.items ?? [])` AND re-seed on prop change: `useEffect(() => setItems(props.items ?? []), [props.items])` — a `ggui_amend` repaint must move the list.\\n2. On stream updates: `setItems(prev => prev.map(it => it.id === event.id ? { ...it, ...event } : it))` — merge by id, do NOT append.\\n3. Memoize derived views (grouping/sorting/filtering) with useMemo.\\n4. Per-item actions pass `{ id, ... }` in the payload.\\n5. Never push the stream payload into an append-only list unless realtime=append.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Live entity state (merge-by-id) ──\",\n      \"  // useState(props.items ?? []); re-seed via useEffect on [props.items]; merge stream events by item.id; never append.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  payload: {\n    axis: \"state\",\n    value: \"payload\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: payload (form assembly)\\nAccumulate form fields in a single state object. Validate on blur or on submit — do NOT block keystrokes. The submit action fires once, with the assembled payload.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Form payload ──\",\n      \"  // useState<FormData> seeded with defaults from props or empty; validate on submit.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  draft: {\n    axis: \"state\",\n    value: \"draft\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: draft (in-place editor)\\nEdit one item at a time. Track `draft` as a separate useState (not mutating the source). Support cancel (discard draft) and save (commit draft → fire action).\",\n  },\n};\n","// packages/ui-gen/src/fragments/writes.ts\n//\n// Writes-axis fragments. Covers both WriteShape (what) and WriteTrigger (how).\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const writeFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"writes\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n  },\n  commit: {\n    axis: \"writes\",\n    value: \"commit\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: commit\\nOne action with a small payload (e.g., addToCart). Wire useAction on a single Button. Do not block the UI on completion — this is fire-and-forget.\",\n  },\n  \"multi-commit\": {\n    axis: \"writes\",\n    value: \"multi-commit\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: multi-commit\\nMultiple unrelated single-commit actions (e.g., cancel / change destination / contact driver). Each action has its own Button. No shared payload assembly.\",\n  },\n  \"per-item\": {\n    axis: \"writes\",\n    value: \"per-item\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: per-item\\nEach item in the entity list has its own action button(s). The payload must include the item's id. Example: `onClick={() => toggle({ id: item.id, completed: !item.completed })}`.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Per-item actions ──\",\n      \"  // Pass {id, ...} in the payload; wire to a Button inside each item's card.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  submit: {\n    axis: \"writes\",\n    value: \"submit\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: submit\\nTerminal form submit. One action fires with the full assembled payload at the end. Disable the submit button while pending and after success.\",\n  },\n  compose: {\n    axis: \"writes\",\n    value: \"compose\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: compose (cross-entity action)\\nOne trigger references ids from two or more entity lists (e.g., {eventId, calendarId}). Track both selections in local state. Only enable the trigger once both are chosen.\",\n  },\n};\n\n// WriteTrigger is a separate axis but lives in the same file for locality.\nexport const writeTriggerFragments: Record<string, HarnessFragment> = {\n  click: {\n    axis: \"writeTrigger\",\n    value: \"click\",\n    cacheTier: \"axisDelta\",\n    // Default case — covered by stable prefix.\n  },\n  drag: {\n    axis: \"writeTrigger\",\n    value: \"drag\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: drag\\nDrag-drop interaction. Use HTML5 drag events (onDragStart, onDragOver, onDrop) on the item and drop zones. Track the dragged item id in useState. Set data-ggui-draggable on draggable elements. Do NOT pull in an external dnd library.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Drag state ──\",\n      \"  // Track the dragged item id; fire the action on drop with {id, destination}.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  swipe: {\n    axis: \"writeTrigger\",\n    value: \"swipe\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: swipe\\nTouch gesture → one of N actions. Use onTouchStart/onTouchMove/onTouchEnd. Also expose fallback Buttons so desktop users can trigger the same actions by click.\",\n  },\n  keystroke: {\n    axis: \"writeTrigger\",\n    value: \"keystroke\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: keystroke\\nKeyboard shortcut. Attach onKeyDown to the container (with tabIndex={0}) or use a window listener inside useEffect with cleanup. Document visible shortcuts in the UI.\",\n  },\n  auto: {\n    axis: \"writeTrigger\",\n    value: \"auto\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: auto\\nEffect-driven. Use useEffect with a debounce (setTimeout + clearTimeout). Do not fire the action on every keystroke.\",\n  },\n};\n","// packages/ui-gen/src/fragments/realtime.ts\n//\n// Realtime-axis fragments. Stream semantics drive whether you merge,\n// append, replace, or do nothing. \"mixed\" needs per-event kind dispatch.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const realtimeFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"realtime\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n  },\n  merge: {\n    axis: \"realtime\",\n    value: \"merge\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: merge\\nStream events carry an id; merge into LOCAL STATE. Subscribing alone is not enough — the local list must update on each event for the DOM to re-render.\\n\\n```tsx\\nconst stream = useStream<UpdateT>('streamName');\\nconst [items, setItems] = useState(props.items);\\nuseEffect(() => setItems(props.items), [props.items]); // re-seed on ggui_amend repaint — props stay the source of truth\\nuseEffect(() => {\\n  if (!stream.latest) return;\\n  setItems((prev) => prev.map((it) => it.id === stream.latest!.id ? { ...it, ...stream.latest } : it));\\n}, [stream.latest]);\\n// Render `items.map(...)` — NOT props.items, NOT stream.all.\\n```\\n\\nNever append — stream=merge means the entity already exists locally.\",\n  },\n  append: {\n    axis: \"realtime\",\n    value: \"append\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: append\\nStream events are new entities; APPEND to local state. Subscribing alone is not enough — the local list must update for the DOM to re-render.\\n\\n```tsx\\nconst stream = useStream<EventT>('streamName');\\nconst [items, setItems] = useState(props.items);\\nuseEffect(() => setItems(props.items), [props.items]); // re-seed on ggui_amend repaint — props stay the source of truth\\nuseEffect(() => {\\n  if (!stream.latest) return;\\n  setItems((prev) => [...prev, stream.latest!]);\\n}, [stream.latest]);\\n// Render `items.map(...)` — NOT props.items, NOT stream.all (which accumulates only post-mount).\\n```\\n\\nUse head for newest-first, tail for chat-style. Cap list length if needed. Do not dedupe unless the contract guarantees at-most-once.\",\n  },\n  status: {\n    axis: \"realtime\",\n    value: \"status\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: status\\nStream replaces a singleton (e.g., marketStatus, rideStatus). `stream.latest` is the current value — bind directly into JSX, no local state needed for the singleton itself:\\n\\n```tsx\\nconst statusStream = useStream<StatusT>('streamName');\\nconst status = statusStream.latest;\\n// Render `<Badge>{status?.state ?? 'loading'}</Badge>`.\\n```\\n\\nIf you also need the timestamp of the last update, derive it from `useEffect` on `statusStream.latest`.\",\n  },\n  presence: {\n    axis: \"realtime\",\n    value: \"presence\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: presence\\nEphemeral per-user state (typing, cursors, online). Do NOT persist to a list. Sync into a `Set` and clear entries based on the active flag or a timeout:\\n\\n```tsx\\nconst stream = useStream<{ sender: string; active: boolean }>('streamName');\\nconst [active, setActive] = useState<Set<string>>(new Set());\\nuseEffect(() => {\\n  if (!stream.latest) return;\\n  setActive((prev) => {\\n    const next = new Set(prev);\\n    if (stream.latest!.active) next.add(stream.latest!.sender);\\n    else next.delete(stream.latest!.sender);\\n    return next;\\n  });\\n}, [stream.latest]);\\n```\",\n  },\n  mixed: {\n    axis: \"realtime\",\n    value: \"mixed\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: mixed\\nMultiple stream channels with DIFFERENT semantics. Each `streamKinds` entry in the contract maps to one of: merge, append, status, presence. Subscribe + sync to local state PER CHANNEL — subscribing alone never re-renders the DOM.\\n\\nExample (chat-interface — message=append, typing=presence):\\n\\n```tsx\\nconst messages = useStream<MessageT>('message');\\nconst typing = useStream<TypingT>('typing');\\nconst [messageList, setMessageList] = useState(props.messages);\\nconst [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());\\n\\nuseEffect(() => setMessageList(props.messages), [props.messages]); // re-seed on ggui_amend repaint\\n\\nuseEffect(() => {\\n  if (!messages.latest) return;\\n  setMessageList((prev) => [...prev, messages.latest!]);\\n}, [messages.latest]);\\n\\nuseEffect(() => {\\n  if (!typing.latest) return;\\n  setTypingUsers((prev) => {\\n    const next = new Set(prev);\\n    if (typing.latest!.active) next.add(typing.latest!.sender);\\n    else next.delete(typing.latest!.sender);\\n    return next;\\n  });\\n}, [typing.latest]);\\n```\\n\\nDo NOT treat all events the same. Do NOT skip the local-state sync — `useStream` alone won't trigger DOM updates of your derived view.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Mixed stream handlers ──\",\n      \"  // One useStream + useEffect+setState per channel — see realtime fragment.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n};\n","// packages/ui-gen/src/fragments/fetch.ts\n//\n// Fetch-axis fragments. Covers how the component reacts to agent-fetched\n// data — agent-side tools live in `agentCapabilities.tools` (catalog\n// only); the component itself never invokes them directly.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const fetchFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"fetch\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n  },\n  pagination: {\n    axis: \"fetch\",\n    value: \"pagination\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: pagination\\nTrack `cursor` (or offset/page) in useState. Expose a 'Load more' Button that calls the tool with the next cursor and appends results. Show a spinner while tool.isPending.\",\n  },\n  search: {\n    axis: \"fetch\",\n    value: \"search\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: search\\nDebounced query → tool call. Track `query` in useState; fire the tool inside useEffect after a 300ms debounce. Replace (don't append) results on each call. Guard against stale responses.\",\n  },\n  \"drill-down\": {\n    axis: \"fetch\",\n    value: \"drill-down\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: drill-down\\nOn item click, call the tool with the item's id and show the detail. Track `selectedId` and `detail` separately; render a loading placeholder while tool.isPending.\",\n  },\n  refresh: {\n    axis: \"fetch\",\n    value: \"refresh\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: refresh\\nUser-triggered re-fetch (e.g., pull-to-refresh or a Refresh button). Re-call the tool with the same args; show a small spinner while pending.\",\n  },\n};\n","// packages/ui-gen/src/fragments/layout.ts\n//\n// Layout-axis fragments. Structural composition — how the screen is split.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const layoutFragments: Record<string, HarnessFragment> = {\n  single: {\n    axis: \"layout\",\n    value: \"single\",\n    cacheTier: \"axisDelta\",\n  },\n  \"multi-step\": {\n    axis: \"layout\",\n    value: \"multi-step\",\n    cacheTier: \"axisDelta\",\n    // 2026-04-27: anti-pattern warnings added after 6× n=3 benches showed\n    // survey-form + onboarding-wizard accounted for 9 of 11 probe FAILs\n    // (\"Too many re-renders\" 6×, \"function is not iterable\" 2×, TDZ 1×).\n    // All 3 classes trace to the same multi-step-specific anti-patterns\n    // below; non-multi-step fixtures had 0 fails across the same benches.\n    promptText:\n      \"## Layout: multi-step\\n\" +\n      \"Wizard. Track `step` in useState (0-indexed). Render \" +\n      \"`<Stepper steps={STEPS} current={step} />` as the progress \" +\n      \"indicator — do NOT hand-roll a '2 of 4' counter, and do NOT \" +\n      \"reach for Tabs/Progress/Breadcrumb. Stepper is display-only: \" +\n      \"your Next/Back buttons move `step`. Keep all step state in a \" +\n      \"single payload object; do NOT reset previous-step data on \" +\n      \"navigation.\\n\\n\" +\n      \"### Anti-patterns that crash at runtime — DO NOT do these:\\n\\n\" +\n      \"1. **No setState in render body** — causes 'Too many re-renders'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — fires every render, infinite loop\\n\" +\n      \"const Form = () => {\\n\" +\n      \"  const [errors, setErrors] = useState({});\\n\" +\n      \"  setErrors(validate(values));  // setState in render → loop\\n\" +\n      \"};\\n\" +\n      \"// ✅ RIGHT — derive with useMemo (no state)\\n\" +\n      \"const Form = () => {\\n\" +\n      \"  const errors = useMemo(() => validate(values), [values]);\\n\" +\n      \"};\\n\" +\n      \"```\\n\\n\" +\n      \"2. **No setState in useEffect with state-derived deps** — also \" +\n      \"causes 'Too many re-renders'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — payload identity changes → setIsValid → re-render → ...\\n\" +\n      \"useEffect(() => { setIsValid(check(payload)); }, [payload]);\\n\" +\n      \"// ✅ RIGHT — useMemo, no setState\\n\" +\n      \"const isValid = useMemo(() => check(payload), [payload]);\\n\" +\n      \"```\\n\\n\" +\n      \"3. **Declare `steps` array as a top-level `const`, NEVER state.** \" +\n      \"Default arrays (`fields`, `options`) the same way. Iterating over \" +\n      \"an undefined or unstable array throws 'function is not iterable'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — useState('steps array...') is a string, .map crashes\\n\" +\n      \"const [steps] = useState('Welcome,Profile,Done');\\n\" +\n      \"// ✅ RIGHT — top-level const\\n\" +\n      \"const STEPS = ['Welcome', 'Profile', 'Done'] as const;\\n\" +\n      \"```\\n\\n\" +\n      \"4. **Hooks/`const` declarations come BEFORE any useEffect/\" +\n      \"useMemo/useCallback that reads them.** Otherwise: TDZ 'Cannot \" +\n      \"access X before initialization'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — useEffect reads `total` before its `const` line\\n\" +\n      \"useEffect(() => log(total), [total]);\\n\" +\n      \"const total = items.reduce(sum, 0);\\n\" +\n      \"// ✅ RIGHT — declare first, read after\\n\" +\n      \"const total = items.reduce(sum, 0);\\n\" +\n      \"useEffect(() => log(total), [total]);\\n\" +\n      \"```\",\n  },\n  \"master-detail\": {\n    axis: \"layout\",\n    value: \"master-detail\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Layout: master-detail\\nSplit container: master list on the left/top, detail panel on the right/bottom. Track `selectedId` and show a 'select an item' placeholder in the detail panel when null.\",\n  },\n  overlay: {\n    axis: \"layout\",\n    value: \"overlay\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Layout: overlay\\nFloating controls layered on top of content. Use position: absolute with explicit insets. Ensure the overlay does not block critical content (leave a safe area).\",\n  },\n  modal: {\n    axis: \"layout\",\n    value: \"modal\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Layout: modal\\nUse the <Modal> primitive. Track `isOpen` in useState. Provide a clear close affordance (X button + clicking backdrop). Trap focus inside the modal.\",\n  },\n};\n","// packages/ui-gen/src/fragments/tooling.ts\n//\n// tooling-axis fragments. The contract carries two tooling surfaces:\n//\n//   - `agentCapabilities.tools` — catalog of agent-invoked tools the\n//     contract references via `actionSpec[*].nextStep` and\n//     `streamSpec[*].source.tool`. NO component-side hook surface.\n//   - `clientCapabilities.gadgets` — catalog of browser-capability\n//     gadget hooks (geolocation, mic, camera, clipboard, file picker,\n//     notifications). The component imports + calls these hooks\n//     from `@ggui-ai/gadgets` (or the third-party package named in\n//     `entry.package`).\n//\n// The `wired` / `client` / `both` axis values map onto these surfaces\n// by what the contract carries; the prompt text steers the LLM toward\n// the correct patterns.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const toolingFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"tooling\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n    // Nothing to say — contract carries no agentCapabilities.tools /\n    // clientCapabilities.gadgets.\n  },\n  wired: {\n    axis: \"tooling\",\n    value: \"wired\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Tooling: agent-side tools (catalog only)\\nThe contract declares `agentCapabilities.tools[X]` for tools the AGENT invokes — the component never calls these directly. References surface via `actionSpec[Y].nextStep = 'X'` (the agent's next-turn hint forwarded on action events) and `streamSpec[Z].source.tool = 'X'` (the runtime polls / subscribes the tool, deliveries land on the stream channel). Author UI controls fire actions via `useAction`; data feeds appear via `useStream`. The `useWiredTool` hook from before 2026-05-11 is RETIRED.\",\n  },\n  client: {\n    axis: \"tooling\",\n    value: \"client\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Tooling: gadgets (browser-capability hooks)\\nThe contract declares `clientCapabilities.gadgets[X]` for browser-capability gadget hooks the UI mounts. The boilerplate has pre-emitted a direct import per gadget package — `import { useFoo, useBar } from '<package>';` — above a `// DO NOT EDIT` banner (STDLIB hooks come from `@ggui-ai/gadgets`, third-party hooks from the package on `clientCapabilities.gadgets[*].package`). Call the imported hook inside the component (`const loc = useGeolocation();`) and trigger via `.start()` from a UI control. Read `.value` / `.status` to render. If the agent needs to observe the result, thread `.value` into a `contextSpec` slot or an `actionSpec` payload. Library hooks are UI-owned lifecycle; the agent never invokes them. **KEEP every pre-emitted gadget import — do NOT delete it and do NOT change its package**; self_check rejects the code with `gadget_preservation:<hook>` if a gadget import disappears. The pre-2026-05-11 `useClientTool(name, handler)` shape is RETIRED, as is the `@ggui-ai/client-tools` package name (renamed to `@ggui-ai/gadgets`).\",\n  },\n  both: {\n    axis: \"tooling\",\n    value: \"both\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Tooling: both surfaces present\\nThe contract declares BOTH `agentCapabilities.tools` (agent-invoked catalog; referenced via `actionSpec.nextStep` / `streamSpec.source.tool` — NO component hook) AND `clientCapabilities.gadgets` (browser-capability gadget hooks the component direct-imports — the boilerplate pre-emits `import { useCamera } from '@ggui-ai/gadgets';` (STDLIB) or `import { useFoo } from '<package>';` (third-party) above a `// DO NOT EDIT` banner). Don't conflate: agentCapabilities entries are catalog declarations the agent uses, NOT component hooks. clientCapabilities entries DO emit component-side hook calls (e.g., `const cam = useCamera();`).\",\n  },\n};\n","// packages/ui-gen/src/fragments/index.ts\n//\n// Public barrel for the `@ggui-ai/ui-gen/fragments` subpath.\n//\n// Stable public surface (what external consumers should build against):\n//   - `FRAGMENT_REGISTRY`  — the axis-keyed registry\n//   - `lookupFragment`     — the one-call lookup helper\n//   - fragment types       — HarnessFragment, ComposedHarness, CacheTier, AxisKey\n//\n// Per-axis fragment records (renderFragments, stateFragments, etc.) are\n// intentionally NOT re-exported here — consumers who genuinely need one\n// can read `FRAGMENT_REGISTRY.render` / `.state` / etc. Keeping the public\n// surface to a single entry point preserves our freedom to reshape the\n// per-axis files without breaking semver.\n\nimport type { AxisKey, HarnessFragment } from \"./types.js\";\nimport { renderFragments } from \"./render.js\";\nimport { stateFragments } from \"./state.js\";\nimport { writeFragments, writeTriggerFragments } from \"./writes.js\";\nimport { realtimeFragments } from \"./realtime.js\";\nimport { fetchFragments } from \"./fetch.js\";\nimport { layoutFragments } from \"./layout.js\";\nimport { toolingFragments } from \"./tooling.js\";\n\nexport type { HarnessFragment, ComposedHarness, CacheTier, AxisKey } from \"./types.js\";\n\nexport const FRAGMENT_REGISTRY: Record<AxisKey, Record<string, HarnessFragment>> = {\n  render: renderFragments,\n  state: stateFragments,\n  writes: writeFragments,\n  writeTrigger: writeTriggerFragments,\n  realtime: realtimeFragments,\n  fetch: fetchFragments,\n  layout: layoutFragments,\n  tooling: toolingFragments,\n};\n\nexport function lookupFragment(axis: AxisKey, value: string): HarnessFragment | undefined {\n  return FRAGMENT_REGISTRY[axis]?.[value];\n}\n","// packages/ui-gen/src/compose.ts\n//\n// Materializes a Classification into prompt sections + boilerplate markers.\n// Sits between the stable prefix (design system docs, pitfalls) and the\n// volatile feedback (eval issues) in the system prompt's cache tiering.\n//\n// Consumes the `./classifier` and `./fragments` subpaths — it's the\n// bridge between an axis vector and the prompt/boilerplate the LLM\n// actually sees.\n\nimport type { Classification } from \"./classifier/axes.js\";\nimport {\n  lookupFragment,\n  type AxisKey,\n  type ComposedHarness,\n  type HarnessFragment,\n} from \"./fragments/index.js\";\n\n// Axis processing order inside axisDelta. Puts the most behaviourally\n// consequential axes first so the LLM reads them before scanning details.\nconst AXIS_ORDER: AxisKey[] = [\n  \"render\",\n  \"layout\",\n  \"state\",\n  \"writes\",\n  \"writeTrigger\",\n  \"realtime\",\n  \"fetch\",\n  \"tooling\",\n];\n\nexport function compose(classification: Classification): ComposedHarness {\n  const v = classification.vector;\n  const matched: HarnessFragment[] = [];\n\n  for (const axis of AXIS_ORDER) {\n    const value = v[axis] as string | undefined;\n    if (!value) continue;\n    const frag = lookupFragment(axis, value);\n    if (frag) matched.push(frag);\n  }\n\n  const promptParts = matched\n    .filter((f) => f.promptText && f.promptText.trim().length > 0)\n    .map((f) => f.promptText!.trim());\n\n  const boilerplateParts = matched\n    .filter((f) => f.boilerplateMarker && f.boilerplateMarker.trim().length > 0)\n    .map((f) => f.boilerplateMarker!);\n\n  return {\n    promptText: promptParts.join(\"\\n\\n\"),\n    boilerplateSections: boilerplateParts.join(\"\"),\n    fragments: matched,\n  };\n}\n\nexport type { ComposedHarness };\n"]}
+{"version":3,"sources":["../src/fragments/render.ts","../src/fragments/state.ts","../src/fragments/writes.ts","../src/fragments/realtime.ts","../src/fragments/fetch.ts","../src/fragments/layout.ts","../src/fragments/tooling.ts","../src/fragments/index.ts","../src/compose.ts"],"names":[],"mappings":"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","file":"compose.js","sourcesContent":["// packages/ui-gen/src/fragments/render.ts\n//\n// Render-axis fragments. One per RenderShape. Kept minimal — the stable\n// prefix already covers primitives + design tokens. These only add the\n// per-shape layout pattern the LLM needs to commit to up front.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const renderFragments: Record<string, HarnessFragment> = {\n  static: {\n    axis: \"render\",\n    value: \"static\",\n    cacheTier: \"axisDelta\",\n    // Static = single entity detail. Stable prefix already covers the\n    // obvious pattern (Card + Stack + Heading + fields). No prompt text\n    // here keeps low-risk fixtures fast.\n  },\n  list: {\n    axis: \"render\",\n    value: \"list\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: list\\nVertical column of items. Each item is a <Card> with <Row> + <Text>. Use key={item.id} on each item. Do not paginate unless the contract has a fetch tool with cursor/offset.\",\n  },\n  grid: {\n    axis: \"render\",\n    value: \"grid\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: grid\\nTwo shapes share this axis — read the contract:\\n- A TILE grid (a gallery, a stat grid, items that may carry row/col fields): `<Grid columns={N} gap=\\\"md\\\">` (or `<CardGrid>`); if items carry row/col fields, position each tile at (row, col).\\n- A BOARD (a columns / lanes / stages array whose items are cards — a kanban): the columns sit SIDE BY SIDE at md and wider — `<Grid columns={{ base: 1, md: columns.length }} gap=\\\"md\\\">` wrapping the columns map, each column its own `<Stack>` of `<Card>`s with its header and count; NEVER a `<Stack>` of column sections (that is a list — tier-0 fails it).\\nNever hand-roll `display: grid`. Do not scroll horizontally.\",\n  },\n  spatial: {\n    axis: \"render\",\n    value: \"spatial\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: spatial\\nGeo/coord-positioned items. Use absolute positioning inside a relative container, or a map primitive if available. Normalize coords to the container's bounds. Treat lat/lng as y/x, not strings.\",\n  },\n  timeline: {\n    axis: \"render\",\n    value: \"timeline\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: timeline\\nGroup items by day (or other temporal bucket). Render a sticky date header per group, then the grouped items. Sort newest-first unless the contract says otherwise. Memoize the grouping with useMemo.\",\n  },\n  chart: {\n    axis: \"render\",\n    value: \"chart\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: chart\\nNumeric → visual. Render with inline SVG (no chart library). Compute the viewBox from data min/max. Add axis labels and one value label on the latest/peak point. Keep it readable on a 400px container.\",\n  },\n  \"master-detail\": {\n    axis: \"render\",\n    value: \"master-detail\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Render: master-detail\\nSplit view: list on one side, detail panel on the other. Track `selectedId` in useState, default to the first item's id. Desktop = side-by-side; mobile/chat shell = stacked with back button.\",\n  },\n};\n","// packages/ui-gen/src/fragments/state.ts\n//\n// State-axis fragments. This is the most error-prone axis — \"merge\" in\n// particular collapses into append-only bugs without explicit guidance.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const stateFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"state\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n    // Pure props → JSX. Stable prefix is enough — no useState call at all.\n  },\n  \"ui-affordance\": {\n    axis: \"state\",\n    value: \"ui-affordance\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: ui-affordance\\nLocal UI state for filter text / selected id / active tab / quantity. Use useState with a sensible default. Do NOT mirror props into state — read props directly and track only the affordance value.\",\n  },\n  merge: {\n    axis: \"state\",\n    value: \"merge\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: merge (live entity reconciliation)\\n1. Seed `const [items, setItems] = useState(props.items ?? [])` AND re-seed on prop change: `useEffect(() => setItems(props.items ?? []), [props.items])` — a `ggui_amend` repaint must move the list.\\n2. On stream updates: `setItems(prev => prev.map(it => it.id === event.id ? { ...it, ...event } : it))` — merge by id, do NOT append.\\n3. Memoize derived views (grouping/sorting/filtering) with useMemo.\\n4. Per-item actions pass `{ id, ... }` in the payload.\\n5. Never push the stream payload into an append-only list unless realtime=append.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Live entity state (merge-by-id) ──\",\n      \"  // useState(props.items ?? []); re-seed via useEffect on [props.items]; merge stream events by item.id; never append.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  payload: {\n    axis: \"state\",\n    value: \"payload\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: payload (form assembly)\\nAccumulate form fields in a single state object. Validate on blur or on submit — do NOT block keystrokes. The submit action fires once, with the assembled payload.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Form payload ──\",\n      \"  // useState<FormData> seeded with defaults from props or empty; validate on submit.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  draft: {\n    axis: \"state\",\n    value: \"draft\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## State: draft (in-place editor)\\nEdit one item at a time. Track `draft` as a separate useState (not mutating the source). Support cancel (discard draft) and save (commit draft → fire action).\",\n  },\n};\n","// packages/ui-gen/src/fragments/writes.ts\n//\n// Writes-axis fragments. Covers both WriteShape (what) and WriteTrigger (how).\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const writeFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"writes\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n  },\n  commit: {\n    axis: \"writes\",\n    value: \"commit\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: commit\\nOne action with a small payload (e.g., addToCart). Wire useAction on a single Button. Do not block the UI on completion — this is fire-and-forget.\",\n  },\n  \"multi-commit\": {\n    axis: \"writes\",\n    value: \"multi-commit\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: multi-commit\\nMultiple unrelated single-commit actions (e.g., cancel / change destination / contact driver). Each action has its own Button. No shared payload assembly.\",\n  },\n  \"per-item\": {\n    axis: \"writes\",\n    value: \"per-item\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: per-item\\nEach item in the entity list has its own action button(s). The payload must include the item's id. Example: `onClick={() => toggle({ id: item.id, completed: !item.completed })}`.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Per-item actions ──\",\n      \"  // Pass {id, ...} in the payload; wire to a Button inside each item's card.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  submit: {\n    axis: \"writes\",\n    value: \"submit\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: submit\\nTerminal form submit. One action fires with the full assembled payload at the end. Disable the submit button while pending and after success.\",\n  },\n  compose: {\n    axis: \"writes\",\n    value: \"compose\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Writes: compose (cross-entity action)\\nOne trigger references ids from two or more entity lists (e.g., {eventId, calendarId}). Track both selections in local state. Only enable the trigger once both are chosen.\",\n  },\n};\n\n// WriteTrigger is a separate axis but lives in the same file for locality.\nexport const writeTriggerFragments: Record<string, HarnessFragment> = {\n  click: {\n    axis: \"writeTrigger\",\n    value: \"click\",\n    cacheTier: \"axisDelta\",\n    // Default case — covered by stable prefix.\n  },\n  drag: {\n    axis: \"writeTrigger\",\n    value: \"drag\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: drag\\nDrag-drop interaction. Use HTML5 drag events (onDragStart, onDragOver, onDrop) on the item and drop zones. Track the dragged item id in useState. Set data-ggui-draggable on draggable elements. Do NOT pull in an external dnd library.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Drag state ──\",\n      \"  // Track the dragged item id; fire the action on drop with {id, destination}.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n  swipe: {\n    axis: \"writeTrigger\",\n    value: \"swipe\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: swipe\\nTouch gesture → one of N actions. Use onTouchStart/onTouchMove/onTouchEnd. Also expose fallback Buttons so desktop users can trigger the same actions by click.\",\n  },\n  keystroke: {\n    axis: \"writeTrigger\",\n    value: \"keystroke\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: keystroke\\nKeyboard shortcut. Attach onKeyDown to the container (with tabIndex={0}) or use a window listener inside useEffect with cleanup. Document visible shortcuts in the UI.\",\n  },\n  auto: {\n    axis: \"writeTrigger\",\n    value: \"auto\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Trigger: auto\\nEffect-driven. Use useEffect with a debounce (setTimeout + clearTimeout). Do not fire the action on every keystroke.\",\n  },\n};\n","// packages/ui-gen/src/fragments/realtime.ts\n//\n// Realtime-axis fragments. Stream semantics drive whether you merge,\n// append, replace, or do nothing. \"mixed\" needs per-event kind dispatch.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const realtimeFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"realtime\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n  },\n  merge: {\n    axis: \"realtime\",\n    value: \"merge\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: merge\\nStream events carry an id; merge into LOCAL STATE. Subscribing alone is not enough — the local list must update on each event for the DOM to re-render.\\n\\n```tsx\\nconst stream = useStream<UpdateT>('streamName');\\nconst [items, setItems] = useState(props.items);\\nuseEffect(() => setItems(props.items), [props.items]); // re-seed on ggui_amend repaint — props stay the source of truth\\nuseEffect(() => {\\n  if (!stream.latest) return;\\n  setItems((prev) => prev.map((it) => it.id === stream.latest!.id ? { ...it, ...stream.latest } : it));\\n}, [stream.latest]);\\n// Render `items.map(...)` — NOT props.items, NOT stream.all.\\n```\\n\\nNever append — stream=merge means the entity already exists locally.\",\n  },\n  append: {\n    axis: \"realtime\",\n    value: \"append\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: append\\nStream events are new entities; APPEND to local state. Subscribing alone is not enough — the local list must update for the DOM to re-render.\\n\\n```tsx\\nconst stream = useStream<EventT>('streamName');\\nconst [items, setItems] = useState(props.items);\\nuseEffect(() => setItems(props.items), [props.items]); // re-seed on ggui_amend repaint — props stay the source of truth\\nuseEffect(() => {\\n  if (!stream.latest) return;\\n  setItems((prev) => [...prev, stream.latest!]);\\n}, [stream.latest]);\\n// Render `items.map(...)` — NOT props.items, NOT stream.all (which accumulates only post-mount).\\n```\\n\\nUse head for newest-first, tail for chat-style. Cap list length if needed. Do not dedupe unless the contract guarantees at-most-once.\",\n  },\n  status: {\n    axis: \"realtime\",\n    value: \"status\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: status\\nStream replaces a singleton (e.g., marketStatus, rideStatus). `stream.latest` is the current value — bind directly into JSX, no local state needed for the singleton itself:\\n\\n```tsx\\nconst statusStream = useStream<StatusT>('streamName');\\nconst status = statusStream.latest;\\n// Render `<Badge>{status?.state ?? 'loading'}</Badge>`.\\n```\\n\\nIf you also need the timestamp of the last update, derive it from `useEffect` on `statusStream.latest`.\",\n  },\n  presence: {\n    axis: \"realtime\",\n    value: \"presence\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: presence\\nEphemeral per-user state (typing, cursors, online). Do NOT persist to a list. Sync into a `Set` and clear entries based on the active flag or a timeout:\\n\\n```tsx\\nconst stream = useStream<{ sender: string; active: boolean }>('streamName');\\nconst [active, setActive] = useState<Set<string>>(new Set());\\nuseEffect(() => {\\n  if (!stream.latest) return;\\n  setActive((prev) => {\\n    const next = new Set(prev);\\n    if (stream.latest!.active) next.add(stream.latest!.sender);\\n    else next.delete(stream.latest!.sender);\\n    return next;\\n  });\\n}, [stream.latest]);\\n```\",\n  },\n  mixed: {\n    axis: \"realtime\",\n    value: \"mixed\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Realtime: mixed\\nMultiple stream channels with DIFFERENT semantics. Each `streamKinds` entry in the contract maps to one of: merge, append, status, presence. Subscribe + sync to local state PER CHANNEL — subscribing alone never re-renders the DOM.\\n\\nExample (chat-interface — message=append, typing=presence):\\n\\n```tsx\\nconst messages = useStream<MessageT>('message');\\nconst typing = useStream<TypingT>('typing');\\nconst [messageList, setMessageList] = useState(props.messages);\\nconst [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());\\n\\nuseEffect(() => setMessageList(props.messages), [props.messages]); // re-seed on ggui_amend repaint\\n\\nuseEffect(() => {\\n  if (!messages.latest) return;\\n  setMessageList((prev) => [...prev, messages.latest!]);\\n}, [messages.latest]);\\n\\nuseEffect(() => {\\n  if (!typing.latest) return;\\n  setTypingUsers((prev) => {\\n    const next = new Set(prev);\\n    if (typing.latest!.active) next.add(typing.latest!.sender);\\n    else next.delete(typing.latest!.sender);\\n    return next;\\n  });\\n}, [typing.latest]);\\n```\\n\\nDo NOT treat all events the same. Do NOT skip the local-state sync — `useStream` alone won't trigger DOM updates of your derived view.\",\n    boilerplateMarker: [\n      \"\",\n      \"  // ── Mixed stream handlers ──\",\n      \"  // One useStream + useEffect+setState per channel — see realtime fragment.\",\n      \"\",\n    ].join(\"\\n\"),\n  },\n};\n","// packages/ui-gen/src/fragments/fetch.ts\n//\n// Fetch-axis fragments. Covers how the component reacts to agent-fetched\n// data — agent-side tools live in `agentCapabilities.tools` (catalog\n// only); the component itself never invokes them directly.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const fetchFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"fetch\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n  },\n  pagination: {\n    axis: \"fetch\",\n    value: \"pagination\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: pagination\\nTrack `cursor` (or offset/page) in useState. Expose a 'Load more' Button that calls the tool with the next cursor and appends results. Show a spinner while tool.isPending.\",\n  },\n  search: {\n    axis: \"fetch\",\n    value: \"search\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: search\\nDebounced query → tool call. Track `query` in useState; fire the tool inside useEffect after a 300ms debounce. Replace (don't append) results on each call. Guard against stale responses.\",\n  },\n  \"drill-down\": {\n    axis: \"fetch\",\n    value: \"drill-down\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: drill-down\\nOn item click, call the tool with the item's id and show the detail. Track `selectedId` and `detail` separately; render a loading placeholder while tool.isPending.\",\n  },\n  refresh: {\n    axis: \"fetch\",\n    value: \"refresh\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Fetch: refresh\\nUser-triggered re-fetch (e.g., pull-to-refresh or a Refresh button). Re-call the tool with the same args; show a small spinner while pending.\",\n  },\n};\n","// packages/ui-gen/src/fragments/layout.ts\n//\n// Layout-axis fragments. Structural composition — how the screen is split.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const layoutFragments: Record<string, HarnessFragment> = {\n  single: {\n    axis: \"layout\",\n    value: \"single\",\n    cacheTier: \"axisDelta\",\n  },\n  \"multi-step\": {\n    axis: \"layout\",\n    value: \"multi-step\",\n    cacheTier: \"axisDelta\",\n    // 2026-04-27: anti-pattern warnings added after 6× n=3 benches showed\n    // survey-form + onboarding-wizard accounted for 9 of 11 probe FAILs\n    // (\"Too many re-renders\" 6×, \"function is not iterable\" 2×, TDZ 1×).\n    // All 3 classes trace to the same multi-step-specific anti-patterns\n    // below; non-multi-step fixtures had 0 fails across the same benches.\n    promptText:\n      \"## Layout: multi-step\\n\" +\n      \"Wizard. Track `step` in useState (0-indexed). Render \" +\n      \"`<Stepper steps={STEPS} current={step} />` as the progress \" +\n      \"indicator — do NOT hand-roll a '2 of 4' counter, and do NOT \" +\n      \"reach for Tabs/Progress/Breadcrumb. Stepper is display-only: \" +\n      \"your Next/Back buttons move `step`. Keep all step state in a \" +\n      \"single payload object; do NOT reset previous-step data on \" +\n      \"navigation.\\n\\n\" +\n      \"### Anti-patterns that crash at runtime — DO NOT do these:\\n\\n\" +\n      \"1. **No setState in render body** — causes 'Too many re-renders'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — fires every render, infinite loop\\n\" +\n      \"const Form = () => {\\n\" +\n      \"  const [errors, setErrors] = useState({});\\n\" +\n      \"  setErrors(validate(values));  // setState in render → loop\\n\" +\n      \"};\\n\" +\n      \"// ✅ RIGHT — derive with useMemo (no state)\\n\" +\n      \"const Form = () => {\\n\" +\n      \"  const errors = useMemo(() => validate(values), [values]);\\n\" +\n      \"};\\n\" +\n      \"```\\n\\n\" +\n      \"2. **No setState in useEffect with state-derived deps** — also \" +\n      \"causes 'Too many re-renders'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — payload identity changes → setIsValid → re-render → ...\\n\" +\n      \"useEffect(() => { setIsValid(check(payload)); }, [payload]);\\n\" +\n      \"// ✅ RIGHT — useMemo, no setState\\n\" +\n      \"const isValid = useMemo(() => check(payload), [payload]);\\n\" +\n      \"```\\n\\n\" +\n      \"3. **Declare `steps` array as a top-level `const`, NEVER state.** \" +\n      \"Default arrays (`fields`, `options`) the same way. Iterating over \" +\n      \"an undefined or unstable array throws 'function is not iterable'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — useState('steps array...') is a string, .map crashes\\n\" +\n      \"const [steps] = useState('Welcome,Profile,Done');\\n\" +\n      \"// ✅ RIGHT — top-level const\\n\" +\n      \"const STEPS = ['Welcome', 'Profile', 'Done'] as const;\\n\" +\n      \"```\\n\\n\" +\n      \"4. **Hooks/`const` declarations come BEFORE any useEffect/\" +\n      \"useMemo/useCallback that reads them.** Otherwise: TDZ 'Cannot \" +\n      \"access X before initialization'.\\n\" +\n      \"```tsx\\n\" +\n      \"// ❌ WRONG — useEffect reads `total` before its `const` line\\n\" +\n      \"useEffect(() => log(total), [total]);\\n\" +\n      \"const total = items.reduce(sum, 0);\\n\" +\n      \"// ✅ RIGHT — declare first, read after\\n\" +\n      \"const total = items.reduce(sum, 0);\\n\" +\n      \"useEffect(() => log(total), [total]);\\n\" +\n      \"```\",\n  },\n  \"master-detail\": {\n    axis: \"layout\",\n    value: \"master-detail\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Layout: master-detail\\nSplit container: master list on the left/top, detail panel on the right/bottom. Track `selectedId` and show a 'select an item' placeholder in the detail panel when null.\",\n  },\n  overlay: {\n    axis: \"layout\",\n    value: \"overlay\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Layout: overlay\\nFloating controls layered on top of content. Use position: absolute with explicit insets. Ensure the overlay does not block critical content (leave a safe area).\",\n  },\n  modal: {\n    axis: \"layout\",\n    value: \"modal\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Layout: modal\\nUse the <Modal> primitive. Track `isOpen` in useState. Provide a clear close affordance (X button + clicking backdrop). Trap focus inside the modal.\",\n  },\n};\n","// packages/ui-gen/src/fragments/tooling.ts\n//\n// tooling-axis fragments. The contract carries two tooling surfaces:\n//\n//   - `agentCapabilities.tools` — catalog of agent-invoked tools the\n//     contract references via `actionSpec[*].nextStep` and\n//     `streamSpec[*].source.tool`. NO component-side hook surface.\n//   - `clientCapabilities.gadgets` — catalog of browser-capability\n//     gadget hooks (geolocation, mic, camera, clipboard, file picker,\n//     notifications). The component imports + calls these hooks\n//     from `@ggui-ai/gadgets` (or the third-party package named in\n//     `entry.package`).\n//\n// The `wired` / `client` / `both` axis values map onto these surfaces\n// by what the contract carries; the prompt text steers the LLM toward\n// the correct patterns.\n\nimport type { HarnessFragment } from \"./types.js\";\n\nexport const toolingFragments: Record<string, HarnessFragment> = {\n  none: {\n    axis: \"tooling\",\n    value: \"none\",\n    cacheTier: \"axisDelta\",\n    // Nothing to say — contract carries no agentCapabilities.tools /\n    // clientCapabilities.gadgets.\n  },\n  wired: {\n    axis: \"tooling\",\n    value: \"wired\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Tooling: agent-side tools (catalog only)\\nThe contract declares `agentCapabilities.tools[X]` for tools the AGENT invokes — the component never calls these directly. References surface via `actionSpec[Y].nextStep = 'X'` (the agent's next-turn hint forwarded on action events) and `streamSpec[Z].source.tool = 'X'` (the runtime polls / subscribes the tool, deliveries land on the stream channel). Author UI controls fire actions via `useAction`; data feeds appear via `useStream`. The `useWiredTool` hook from before 2026-05-11 is RETIRED.\",\n  },\n  client: {\n    axis: \"tooling\",\n    value: \"client\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Tooling: gadgets (browser-capability hooks)\\nThe contract declares `clientCapabilities.gadgets[X]` for browser-capability gadget hooks the UI mounts. The boilerplate has pre-emitted a direct import per gadget package — `import { useFoo, useBar } from '<package>';` — above a `// DO NOT EDIT` banner (STDLIB hooks come from `@ggui-ai/gadgets`, third-party hooks from the package on `clientCapabilities.gadgets[*].package`). Call the imported hook inside the component (`const loc = useGeolocation();`) and trigger via `.start()` from a UI control. Read `.value` / `.status` to render. If the agent needs to observe the result, thread `.value` into a `contextSpec` slot or an `actionSpec` payload. Library hooks are UI-owned lifecycle; the agent never invokes them. **KEEP every pre-emitted gadget import — do NOT delete it and do NOT change its package**; self_check rejects the code with `gadget_preservation:<hook>` if a gadget import disappears. The pre-2026-05-11 `useClientTool(name, handler)` shape is RETIRED, as is the `@ggui-ai/client-tools` package name (renamed to `@ggui-ai/gadgets`).\",\n  },\n  both: {\n    axis: \"tooling\",\n    value: \"both\",\n    cacheTier: \"axisDelta\",\n    promptText:\n      \"## Tooling: both surfaces present\\nThe contract declares BOTH `agentCapabilities.tools` (agent-invoked catalog; referenced via `actionSpec.nextStep` / `streamSpec.source.tool` — NO component hook) AND `clientCapabilities.gadgets` (browser-capability gadget hooks the component direct-imports — the boilerplate pre-emits `import { useCamera } from '@ggui-ai/gadgets';` (STDLIB) or `import { useFoo } from '<package>';` (third-party) above a `// DO NOT EDIT` banner). Don't conflate: agentCapabilities entries are catalog declarations the agent uses, NOT component hooks. clientCapabilities entries DO emit component-side hook calls (e.g., `const cam = useCamera();`).\",\n  },\n};\n","// packages/ui-gen/src/fragments/index.ts\n//\n// Public barrel for the `@ggui-ai/ui-gen/fragments` subpath.\n//\n// Stable public surface (what external consumers should build against):\n//   - `FRAGMENT_REGISTRY`  — the axis-keyed registry\n//   - `lookupFragment`     — the one-call lookup helper\n//   - fragment types       — HarnessFragment, ComposedHarness, CacheTier, AxisKey\n//\n// Per-axis fragment records (renderFragments, stateFragments, etc.) are\n// intentionally NOT re-exported here — consumers who genuinely need one\n// can read `FRAGMENT_REGISTRY.render` / `.state` / etc. Keeping the public\n// surface to a single entry point preserves our freedom to reshape the\n// per-axis files without breaking semver.\n\nimport type { AxisKey, HarnessFragment } from \"./types.js\";\nimport { renderFragments } from \"./render.js\";\nimport { stateFragments } from \"./state.js\";\nimport { writeFragments, writeTriggerFragments } from \"./writes.js\";\nimport { realtimeFragments } from \"./realtime.js\";\nimport { fetchFragments } from \"./fetch.js\";\nimport { layoutFragments } from \"./layout.js\";\nimport { toolingFragments } from \"./tooling.js\";\n\nexport type { HarnessFragment, ComposedHarness, CacheTier, AxisKey } from \"./types.js\";\n\nexport const FRAGMENT_REGISTRY: Record<AxisKey, Record<string, HarnessFragment>> = {\n  render: renderFragments,\n  state: stateFragments,\n  writes: writeFragments,\n  writeTrigger: writeTriggerFragments,\n  realtime: realtimeFragments,\n  fetch: fetchFragments,\n  layout: layoutFragments,\n  tooling: toolingFragments,\n};\n\nexport function lookupFragment(axis: AxisKey, value: string): HarnessFragment | undefined {\n  return FRAGMENT_REGISTRY[axis]?.[value];\n}\n","// packages/ui-gen/src/compose.ts\n//\n// Materializes a Classification into prompt sections + boilerplate markers.\n// Sits between the stable prefix (design system docs, pitfalls) and the\n// volatile feedback (eval issues) in the system prompt's cache tiering.\n//\n// Consumes the `./classifier` and `./fragments` subpaths — it's the\n// bridge between an axis vector and the prompt/boilerplate the LLM\n// actually sees.\n\nimport type { Classification } from \"./classifier/axes.js\";\nimport {\n  lookupFragment,\n  type AxisKey,\n  type ComposedHarness,\n  type HarnessFragment,\n} from \"./fragments/index.js\";\n\n// Axis processing order inside axisDelta. Puts the most behaviourally\n// consequential axes first so the LLM reads them before scanning details.\nconst AXIS_ORDER: AxisKey[] = [\n  \"render\",\n  \"layout\",\n  \"state\",\n  \"writes\",\n  \"writeTrigger\",\n  \"realtime\",\n  \"fetch\",\n  \"tooling\",\n];\n\nexport function compose(classification: Classification): ComposedHarness {\n  const v = classification.vector;\n  const matched: HarnessFragment[] = [];\n\n  for (const axis of AXIS_ORDER) {\n    const value = v[axis] as string | undefined;\n    if (!value) continue;\n    const frag = lookupFragment(axis, value);\n    if (frag) matched.push(frag);\n  }\n\n  const promptParts = matched\n    .filter((f) => f.promptText && f.promptText.trim().length > 0)\n    .map((f) => f.promptText!.trim());\n\n  const boilerplateParts = matched\n    .filter((f) => f.boilerplateMarker && f.boilerplateMarker.trim().length > 0)\n    .map((f) => f.boilerplateMarker!);\n\n  return {\n    promptText: promptParts.join(\"\\n\\n\"),\n    boilerplateSections: boilerplateParts.join(\"\"),\n    fragments: matched,\n  };\n}\n\nexport type { ComposedHarness };\n"]}

package/dist/{create-ui-generator-CCIeQaEe.d.ts → create-ui-generator-C8Ki9Wz1.d.ts}

@@ -1,9 +1,11 @@
+import { SingleComponentParams } from './harness/runtime.js';
 import { ModelRef } from '@ggui-ai/protocol';
 import { GadgetCatalogAdapter } from '@ggui-ai/gadgets';
 import { GeneratorTier, UiGenerator } from '@ggui-ai/mcp-server-core';
 import { GenerationResult } from './harness/result-types.js';
-import { D as DesignMode } from './design-mode-BHEE7flj.js';
-import { Q as QualityConfig } from './types-public-D24JLJgl.js';
+import { D as DesignMode } from './design-mode-DLufhrNp.js';
+import { Q as QualityConfig } from './types-public-DVSssdc-.js';
+import { EvaluationConfig } from './evaluation/types.js';
 import { A as AgentConfig } from './llm-router-D7fjBhtr.js';
 
 /**
@@ -56,6 +58,20 @@ interface CreateUiGeneratorOptions {
     readonly maxAttempts?: number;
     /** Maximum evaluation rounds. */
     readonly maxEvalRounds?: number;
+    /**
+     * In-loop LLM evaluation config (ggui#1001). When set, every generation
+     * runs the evaluator tiers after the coding leg (`maxRounds` defaults to
+     * `maxEvalRounds`) and the harness result carries `evalResult` — the
+     * probe verdict a downstream judge reads. Default: none, as today —
+     * a serving deployment leaves it unset; offline minting jobs set a round.
+     */
+    readonly evaluation?: EvaluationConfig;
+    /**
+     * In-loop visual round config (per-canvas judging, a sample, the
+     * stylesheet to render under). Forwarded verbatim; never part of the
+     * prompt or the identity. Default: none — the round runs as today.
+     */
+    readonly visualEvaluation?: SingleComponentParams['visualEvaluation'];
     /** Quality config controlling eval tiers + improvement behavior. */
     readonly qualityConfig?: QualityConfig;
     /**

package/dist/{design-mode-BHEE7flj.d.ts → design-mode-DLufhrNp.d.ts}

@@ -17,12 +17,6 @@ declare const CANVAS_VIEWPORTS: Readonly<Record<CanvasClass, CanvasViewport>>;
  * there the width decides the class.
  */
 type CanvasDisplayMode = "inline" | "fullscreen";
-/**
- * Map a shell name (`chat` / `fullscreen` / `spatial` / `partial`) or an
- * MCP Apps display mode (`inline` / `fullscreen` / `pip`) onto the
- * canvas display mode. Only `chat` and `inline` are the inline card;
- * everything else is width-governed.
- */
 declare function canvasDisplayModeForShell(shell: string | undefined): CanvasDisplayMode;
 /** Fullscreen-class breakpoints (inclusive lower bounds), CSS px. */
 declare const CANVAS_BREAKPOINTS: {

package/dist/{dispatch-BA5dJcg-.d.ts → dispatch-D2htzi9h.d.ts}

@@ -1,7 +1,7 @@
 import { DataContract } from '@ggui-ai/protocol';
 import { C as Classification } from './axes-CzLEMDeB.js';
-import { E as EvalIssue } from './types-public-D24JLJgl.js';
-import { D as DesignMode } from './design-mode-BHEE7flj.js';
+import { E as EvalIssue } from './types-public-DVSssdc-.js';
+import { D as DesignMode } from './design-mode-DLufhrNp.js';
 
 interface RunAxisChecksInput {
     sourceCode: string;

package/dist/evaluation/axis-checks/index.d.ts

@@ -1,10 +1,10 @@
-export { R as RunAxisChecksInput, r as runAxisChecks } from '../../dispatch-BA5dJcg-.js';
+export { R as RunAxisChecksInput, r as runAxisChecks } from '../../dispatch-D2htzi9h.js';
 export { REGISTRY } from './registry.js';
-import { A as AxisCheck } from '../../types-public-D24JLJgl.js';
-export { a as AxisCheckInput, m as matches } from '../../types-public-D24JLJgl.js';
+import { A as AxisCheck } from '../../types-public-DVSssdc-.js';
+export { a as AxisCheckInput, m as matches } from '../../types-public-DVSssdc-.js';
 import '@ggui-ai/protocol';
 import '../../axes-CzLEMDeB.js';
-import '../../design-mode-BHEE7flj.js';
+import '../../design-mode-DLufhrNp.js';
 import '../../types-BOvHNG7K.js';
 
 declare const EXTRA_CHECKS: readonly AxisCheck[];

package/dist/evaluation/axis-checks/index.js

@@ -1,6 +1,8 @@
+import { LUCIDE_ICON_NAMES } from '@ggui-ai/design';
 import { listContractGadgets, HOOK_NAME_RE, STDLIB_GADGETS_PACKAGE } from '@ggui-ai/protocol';
+import { createHash } from 'crypto';
 
-// src/evaluation/axis-checks/helpers.ts
+// src/evaluation/axis-checks/checks/universal.ts
 var ID_FIELD_CANDIDATES = ["id", "uuid", "symbol", "key", "slug", "code"];
 function getItemsProperties(p) {
   return p.items?.properties ?? p.schema?.items?.properties;
@@ -157,6 +159,9 @@ function mkIssue(subcategory, description, fix, result = "fail") {
 function cap(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
+function axisCheckTraceEnabled() {
+  return process.env["GGUI_AXIS_CHECK_TRACE"] === "1";
+}
 
 // src/evaluation/axis-checks/checks/universal.ts
 var ALL_RENDER_VALUES = [
@@ -260,7 +265,172 @@ function runPropSeedNoResync(input) {
   }
   return issues;
 }
+var KNOWN_ICON_KEYS = new Set(
+  LUCIDE_ICON_NAMES.map((n) => n.replace(/[-_]/g, "").toLowerCase())
+);
+function isKnownIconName(name) {
+  return KNOWN_ICON_KEYS.has(name.replace(/[-_]/g, "").toLowerCase());
+}
+var ICON_NAME_LITERAL_RX = /<Icon\b[^>]*?\bname\s*=\s*(?:"([^"]*)"|'([^']*)'|\{\s*"([^"]*)"\s*\}|\{\s*'([^']*)'\s*\})/g;
+function findUnknownIconNames(sourceCode) {
+  const unknown = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(ICON_NAME_LITERAL_RX)) {
+    const name = m[1] ?? m[2] ?? m[3] ?? m[4] ?? "";
+    if (name.length === 0) continue;
+    if (/[^\x20-\x7e]/.test(name)) continue;
+    if (!isKnownIconName(name)) unknown.add(name);
+  }
+  return [...unknown];
+}
+function runIconNameKnown(input) {
+  if (input.compiledCode === null) return [];
+  const unknown = findUnknownIconNames(input.sourceCode);
+  if (unknown.length === 0) return [];
+  const list = unknown.map((n) => `"${n}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.icon_name_known",
+      `<Icon name=\u2026> uses ${unknown.length} name(s) outside the design system's Lucide subset: ${list} \u2014 an unknown name renders an empty box.`,
+      "Call get_available_icons and pick a listed name (kebab-case), or use an emoji directly."
+    )
+  ];
+}
+var LADDER_STOP_AS_TEXT_RX = /(?<![\w-])color\s*(?:=\s*\{?\s*|:\s*)["'`]?\s*var\(--ggui-color-primary-(\d{2,3})\s*[,)]/g;
+var TEXT_INK_STOP_MIN = 300;
+var TEXT_INK_STOP_MAX = 600;
+function findLadderStopsAsText(sourceCode) {
+  const found = /* @__PURE__ */ new Set();
+  for (const m of sourceCode.matchAll(LADDER_STOP_AS_TEXT_RX)) {
+    const digits = m[1] ?? "";
+    const stop = Number(digits);
+    if (stop >= TEXT_INK_STOP_MIN && stop <= TEXT_INK_STOP_MAX) found.add(`primary-${digits}`);
+  }
+  return [...found];
+}
+function runAccentTextInk(input) {
+  if (input.compiledCode === null) return [];
+  const stops = findLadderStopsAsText(input.sourceCode);
+  if (stops.length === 0) return [];
+  const list = stops.map((s) => `\`${s}\``).join(", ");
+  return [
+    mkIssue(
+      "universal.accent_text_ink",
+      `Text is painted with a brand-ladder fill stop as its color (${list}) \u2014 on a low-saturation brand these stops are mid-grey on the surface and the text fails readability.`,
+      'Accent text (eyebrows, taglines, links, labels, inline arrows) takes var(--ggui-color-link) or <Text tone="emphasized">; body text takes var(--ggui-color-onContainer); keep primary-* stops on fills and borders.'
+    )
+  ];
+}
+var SCOPED_SURFACE_TAG_RX = /<(Card|Box)\b([^<>]*?)surface\s*=\s*["'](inverted|hero)["']([^<>]*?)>/g;
+var STYLE_BACKGROUND_RX = /\bstyle\s*=\s*\{\{[^}]*\b(background|backgroundColor|backgroundImage)\s*:/;
+function findScopedSurfaceBackgrounds(sourceCode) {
+  const hits = [];
+  for (const m of sourceCode.matchAll(SCOPED_SURFACE_TAG_RX)) {
+    const attrs = `${m[2] ?? ""} ${m[4] ?? ""}`;
+    if (STYLE_BACKGROUND_RX.test(attrs)) hits.push([m[1] ?? "", m[3] ?? ""]);
+  }
+  return hits;
+}
+function runScopedSurfaceOwnsGround(input) {
+  if (input.compiledCode === null) return [];
+  if (input.designMode === "free") return [];
+  const hits = findScopedSurfaceBackgrounds(input.sourceCode);
+  if (hits.length === 0) return [];
+  const [tag, surface] = hits[0];
+  return [
+    mkIssue(
+      "universal.scoped_surface_owns_ground",
+      `<${tag} surface="${surface}"> sets its own background in style \u2014 a scoped surface owns its ground; repainting it puts the scope's swapped inks over the wrong ground (ink on ink).`,
+      `Remove the background from that ${tag}'s style \u2014 surface="${surface}" paints the ground; pick another surface if a different ground is wanted.`
+    )
+  ];
+}
+var CAPS_TEXT_RX = /<Text\b(?=[^>]*\bcaps\b)[^>]*>([\s\S]*?)<\/Text>/g;
+function findInventedCapsLabels(sourceCode) {
+  const out = [];
+  for (const m of sourceCode.matchAll(CAPS_TEXT_RX)) {
+    const inner = (m[1] ?? "").trim();
+    if (inner.length === 0) continue;
+    if (inner.includes("{")) continue;
+    out.push(inner.replace(/\s+/g, " ").slice(0, 60));
+  }
+  return out;
+}
+function runCapsLabelInvented(input) {
+  if (input.compiledCode === null) return [];
+  const invented = findInventedCapsLabels(input.sourceCode);
+  if (invented.length === 0) return [];
+  const list = invented.map((t) => `"${t}"`).join(", ");
+  return [
+    mkIssue(
+      "universal.caps_label_invented",
+      `${invented.length} caps label(s) carry invented copy the props do not supply: ${list} \u2014 an eyebrow, kicker or overline the agent cannot change is chatter on every render.`,
+      "Remove the label, or bind its text to a prop (`<Text caps>{props.section}</Text>`); copy comes from the contract, never from the component."
+    )
+  ];
+}
+var VIEWPORT_UNIT = String.raw`(?:calc\(\s*)?100(?:vh|dvh|svh|lvh)\b(?:[^)"'\x60;\n]*\))?`;
+var VIEWPORT_STYLE_OBJECT_RX = new RegExp(
+  String.raw`\b(?:minHeight|height|minBlockSize|blockSize)\s*:\s*["'\x60]\s*${VIEWPORT_UNIT}["'\x60]?`,
+  "g"
+);
+var VIEWPORT_CSS_RX = new RegExp(
+  String.raw`(?<![\w-])(?:min-)?(?:height|block-size)\s*:\s*${VIEWPORT_UNIT}`,
+  "g"
+);
+var VIEWPORT_CLASS_RX = /(?<![\w-])(?:min-)?h-(?:screen|dvh|svh|lvh)\b/g;
+function findViewportSizing(sourceCode) {
+  const hits = [];
+  for (const rx of [VIEWPORT_STYLE_OBJECT_RX, VIEWPORT_CSS_RX, VIEWPORT_CLASS_RX]) {
+    for (const m of sourceCode.matchAll(rx)) {
+      hits.push({ at: m.index ?? 0, text: m[0].replace(/\s+/g, " ").trim().slice(0, 60) });
+    }
+  }
+  return hits.sort((a, b) => a.at - b.at).map((h) => h.text);
+}
+function runViewportSized(input) {
+  if (input.compiledCode === null) return [];
+  const sized = findViewportSizing(input.sourceCode);
+  if (sized.length === 0) return [];
+  const list = sized.map((t) => "`" + t + "`").join(", ");
+  return [
+    mkIssue(
+      "universal.viewport_sized",
+      `${sized.length} element(s) are sized to the viewport: ${list} \u2014 the frame owns the height; a content-sized frame is measured from the content, so a viewport-sized root never shrinks and grows the frame on every re-measure.`,
+      "Remove the viewport height \u2014 size to content, never to the viewport. Under fullscreen the frame stretches your root already (centre inside it with `display: flex; flex-direction: column; justify-content: center`); to fill a parent that has a height use `height: 100%` or `flex: 1`."
+    )
+  ];
+}
 var UNIVERSAL_CHECKS = [
+  {
+    id: "universal.icon_name_known",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runIconNameKnown
+  },
+  {
+    id: "universal.caps_label_invented",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runCapsLabelInvented
+  },
+  {
+    id: "universal.viewport_sized",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runViewportSized
+  },
+  {
+    id: "universal.accent_text_ink",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runAccentTextInk
+  },
+  {
+    id: "universal.scoped_surface_owns_ground",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runScopedSurfaceOwnsGround
+  },
   {
     id: "universal.prop_coverage",
     axis: "render",
@@ -1063,6 +1233,87 @@ var TOOLING_CHECKS = [
   }
 ];
 
+// src/evaluation/axis-checks/checks/grid.ts
+var BOARD_PROP_RX = /^(columns?|lanes?|stages?|lists?|buckets?|swimlanes?)$/i;
+var BOARD_PROMPT_RX = /\b(kanban|board)\b/i;
+var BOARD_NAMES = ["columns", "lanes", "stages", "lists", "buckets", "swimlanes"];
+var LAYOUT_TAG_RX = /<(\/?)(Grid|Row|Stack|Card|Box|Container|ScrollArea|div|section)\b([^<>]*?)>/g;
+var SIDE_BY_SIDE = /* @__PURE__ */ new Set(["Grid", "Row"]);
+function boardPropNames(contract) {
+  const propsField = contract?.propsSpec;
+  const properties = propsField?.properties ?? {};
+  return Object.entries(properties).filter(([name, p]) => BOARD_PROP_RX.test(name) && (p?.type === "array" || p?.schema?.type === "array")).map(([name]) => name);
+}
+function jsxMapPositions(sourceCode, name) {
+  const rx = new RegExp(
+    `\\b${name}(?:\\?\\.)?\\.map\\(\\s*\\(?\\s*\\w+(?:\\s*,\\s*\\w+)?\\s*\\)?\\s*=>\\s*(?:\\(?\\s*<|\\{[^{}]{0,600}?\\breturn\\s*\\(?\\s*<)`,
+    "g"
+  );
+  return [...sourceCode.matchAll(rx)].map((m) => m.index ?? 0);
+}
+function enclosingLayoutTag(sourceCode, pos) {
+  const stack = [];
+  for (const m of sourceCode.slice(0, pos).matchAll(LAYOUT_TAG_RX)) {
+    const closing = m[1] === "/";
+    const name = m[2] ?? "";
+    const attrs = m[3] ?? "";
+    if (closing) {
+      if (stack[stack.length - 1] === name) stack.pop();
+      continue;
+    }
+    if (attrs.trimEnd().endsWith("/")) continue;
+    stack.push(name);
+  }
+  return stack[stack.length - 1];
+}
+function describeBoardRead(input) {
+  const declared = boardPropNames(input.contract);
+  const names = declared.length > 0 ? declared : BOARD_PROMPT_RX.test(input.originalPrompt) ? [...BOARD_NAMES] : BOARD_NAMES.filter((n) => jsxMapPositions(input.sourceCode, n).length > 0);
+  const perName = names.map((name) => {
+    const positions = jsxMapPositions(input.sourceCode, name);
+    return { name, maps: positions.length, enclosing: positions.map((pos) => enclosingLayoutTag(input.sourceCode, pos) ?? "nothing") };
+  });
+  return { declared, names, perName };
+}
+function findStackedBoardColumns(input) {
+  const stacked = [];
+  for (const { name, enclosing } of describeBoardRead(input).perName) {
+    for (const tag of enclosing) if (!SIDE_BY_SIDE.has(tag)) stacked.push([name, tag]);
+  }
+  return stacked;
+}
+function runBoardColumnsSideBySide(input) {
+  if (input.compiledCode === null) return [];
+  const standDown = input.designMode === "free";
+  const stacked = standDown ? [] : findStackedBoardColumns(input);
+  if (axisCheckTraceEnabled()) {
+    const line = {
+      ...describeBoardRead(input),
+      designMode: input.designMode ?? "constrained",
+      standDown,
+      result: standDown ? "stand-down" : stacked.length > 0 ? "fail" : "pass"
+    };
+    console.log(JSON.stringify({ boardColumnsTrace: line }));
+  }
+  if (stacked.length === 0) return [];
+  const [name, tag] = stacked[0];
+  return [
+    mkIssue(
+      "grid.board_columns_side_by_side",
+      `The board's \`${name}\` are composed under <${tag}> \u2014 a vertical stack of column sections; at md and wider the columns must sit side by side.`,
+      `Wrap the ${name} map in <Grid columns={{ base: 1, md: ${name}.length }} gap="md"> (each column its own <Stack> of cards); never a <Stack> of column sections.`
+    )
+  ];
+}
+var GRID_CHECKS = [
+  {
+    id: "grid.board_columns_side_by_side",
+    axis: "render",
+    values: ["grid"],
+    run: runBoardColumnsSideBySide
+  }
+];
+
 // src/evaluation/axis-checks/extras.ts
 function mkIssue2(subcategory, description, fix, result = "warn") {
   return { tier: 0, result, category: "mode", subcategory, description, fix };
@@ -1202,6 +1453,7 @@ var REGISTRY = [
   ...WRITES_CHECKS,
   ...STATE_PAYLOAD_CHECKS,
   ...TOOLING_CHECKS,
+  ...GRID_CHECKS,
   ...EXTRA_CHECKS
 ];
 
@@ -1215,27 +1467,59 @@ function matches(vector, check) {
   }
   return true;
 }
-
-// src/evaluation/axis-checks/dispatch.ts
 function runAxisChecks(classification, input) {
-  if (input.compiledCode === null) return [];
-  const axisInput = {
+  const facts = {
     sourceCode: input.sourceCode,
-    compiledCode: input.compiledCode,
     ...input.contract !== void 0 ? { contract: input.contract } : {},
     originalPrompt: input.originalPrompt,
     classification,
     ...input.designMode !== void 0 ? { designMode: input.designMode } : {}
   };
+  if (input.compiledCode === null) {
+    traceAxisChecksSkipped(facts, "compiledCode null \u2014 no check ran");
+    return [];
+  }
+  const axisInput = { ...facts, compiledCode: input.compiledCode };
+  return runGatedAxisChecks(
+    REGISTRY.filter((check) => matches(classification.vector, check)),
+    axisInput
+  ).issues;
+}
+function runGatedAxisChecks(checks, input) {
   const issues = [];
-  const firedIds = /* @__PURE__ */ new Set();
-  for (const check of REGISTRY) {
-    if (!matches(classification.vector, check)) continue;
-    if (firedIds.has(check.id)) continue;
-    firedIds.add(check.id);
-    issues.push(...check.run(axisInput));
+  const firedIds = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const check of checks) {
+    if (seen.has(check.id)) continue;
+    seen.add(check.id);
+    firedIds.push(check.id);
+    issues.push(...check.run(input));
   }
-  return issues;
+  if (axisCheckTraceEnabled()) {
+    const line = {
+      ...traceFacts(input),
+      matched: [...firedIds],
+      issues: issues.map((i) => ({ id: i.subcategory ?? i.category, result: i.result }))
+    };
+    console.log(JSON.stringify({ axisCheckTrace: line }));
+  }
+  return { issues, firedIds };
+}
+function traceAxisChecksSkipped(facts, note) {
+  if (!axisCheckTraceEnabled()) return;
+  const line = { ...traceFacts(facts), matched: [], issues: [], note };
+  console.log(JSON.stringify({ axisCheckTrace: line }));
+}
+function traceFacts(input) {
+  const propsSpec = input.contract?.propsSpec;
+  return {
+    sourceSha256: createHash("sha256").update(input.sourceCode, "utf8").digest("hex"),
+    originalPrompt: input.originalPrompt,
+    designMode: input.designMode ?? "constrained",
+    classification: input.classification.vector,
+    propsSpecKeys: Object.keys(propsSpec ?? {}),
+    propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {})
+  };
 }
 
 export { EXTRA_CHECKS, REGISTRY, matches, runAxisChecks };