gd-design-library 1.8.0 → 1.8.2

package/README.md

@@ -1,6 +1,6 @@
 # GridKit – Grid Dynamics Design System
 
-![GridKit Logo](./gridKit_logo.png)
+![GridKit Logo](https://unpkg.com/gd-design-library/gridKit_logo.png)
 
 **GridKit** is the official design system and component library from Grid Dynamics.  
 It provides a set of reusable, accessible, and themeable React UI components designed to accelerate the development of consistent, scalable applications – with a focus on e-commerce and enterprise platforms.
@@ -9,13 +9,17 @@ It provides a set of reusable, accessible, and themeable React UI components des
 
 ## ✨ Features
 
-- 🧩 55+ modular components (atoms, molecules, organisms, layout)
+- 🧩 64 modular components (atoms, molecules, organisms, layout)
 - 🎨 Theming support with dynamic runtime switching
 - 🔗 Design tokens synced with Figma
 - 📦 Optimized build using Vite
 - 📚 Fully documented via Storybook
 - ♿ WCAG 2.1 AA-compliant components
 - ⚙️ Type-safe and fully tested with Vitest + RTL
+- 🤖 Built-in AI integration — LLM → React/TSX code generation or A2UI JSON spec rendering
+- 🔄 A2UI mode: LLMs generate structured JSON specs validated against `ui-specification-schema.json`, rendered at runtime by `renderA2UISpec` with zero custom JSX
+- 🎯 `buildA2UISystemPrompt` keeps LLM instructions in sync with the live component map — no manual prompt maintenance
+- 🔌 Action system: define `A2UIActionDefinition[]` once, share between `buildA2UISystemPrompt` (LLM constraint) and `renderA2UISpec` (runtime handler wiring)
 
 ---
 
@@ -29,14 +33,6 @@ npm install gd-design-library @emotion/styled @emotion/react
 yarn add gd-design-library @emotion/styled @emotion/react
 ```
 
-Make sure you're using Node.js **version ≥22.17.0**.
-
-Note: Since this package is private, you need to configure your `.npmrc` with a valid auth token:
-
-```bash
-//registry.npmjs.org/:_authToken=<npm_token>
-```
-
 ---
 
 ## 🧑‍💻 Getting Started
@@ -124,6 +120,145 @@ yarn format:check
 
 ---
 
+## 🔍 Build Verification
+
+GridKit ships a 5-phase verification pipeline that runs automatically after every `yarn build:ui`. It checks that the published package works correctly for all consumers — ESM, CJS, SSR, and tree-shaking.
+
+### Commands
+
+| Command          | What it does                                                          |
+| ---------------- | --------------------------------------------------------------------- |
+| `yarn build:ui`  | Full build → phases 1–5 → summary                                     |
+| `yarn verify:ui` | Phases 1–5 + summary, skips rebuild — use after an existing build     |
+| `yarn view:ui`   | Generates `report.html` from JSON reports and opens it in the browser |
+
+`yarn build:ui` runs in order: readme stats check → AI docs generation → type-check → lint → Vite build → all 5 phases → combined terminal summary.
+
+`yarn view:ui` can be run any time after `yarn verify:ui` (or `yarn build:ui`) has written JSON reports to `libs/ui/scripts/output/`. It opens a dark-theme HTML dashboard with charts and tables for every phase — no server needed.
+
+### Visual dashboard
+
+```bash
+yarn verify:ui && yarn view:ui
+# or after a full build:
+yarn build:ui && yarn view:ui
+```
+
+The dashboard (`libs/ui/scripts/output/report.html`) includes:
+
+- **Overview** — totals banner, 5 phase status cards, summary charts
+- **Phase 1** — exports by category (donut), dependency status (pie), warnings table
+- **Phase 2** — violations list, per-component KB footprint bar chart (yellow = cross-component deps)
+- **Phase 3** — errors with full publint issue list, warnings by type (pie), circular deps breakdown
+- **Phase 4** — RSC readiness donut, browser globals by context (pie), unguarded globals table (file · line · global · context)
+- **Phase 5** — CJS errors and warnings
+
+To generate without opening: `node libs/ui/scripts/view-reports.mjs --no-open`
+
+### What each phase checks
+
+| Phase                | Script                | Checks                                                                                                                                                                        |
+| -------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1 · Public API Audit | `audit-api.mjs`       | All exported symbols traceable from `src/index.ts`; undeclared / unused / bundled deps; exports gap in `package.json`                                                         |
+| 2 · Tree-Shaking     | `treeshake-check.mjs` | Import graph built from `dist/`; cross-component contamination per probe; `sideEffects` field; per-component KB footprint                                                     |
+| 3 · Build Lint       | `build-lint.mjs`      | Circular imports (structural vs barrel); `package.json` exports validity; `.d.ts` completeness; private/internal leaks; `"use client"` consistency; `publint` standards check |
+| 4 · SSR Safety       | `ssr-check.mjs`       | Node.js `import()` test; unguarded browser globals; RSC `"use client"` coverage; Emotion SSR guidance                                                                         |
+| 5 · CJS Verification | `cjs-check.mjs`       | `.cjs` output exists; `require()` works in Node.js; `exports` map has `"require"` conditions; `.cjs` uses CommonJS syntax; `"main"` field points to CJS                       |
+
+### Terminal summary
+
+After all phases run, a combined table is printed:
+
+```text
+╔══════════════════════════════════════════════════╗
+║   gd-design-library  ·  Build Verify Summary    ║
+╚══════════════════════════════════════════════════╝
+
+  Phase 1  ✓  Public API Audit        142 exports · 0 warnings
+  Phase 2  ✓  Tree-Shaking Check      0 violations
+  Phase 3  ⚠  Build Lint              0 errors · 3 warnings
+  Phase 4  ✓  SSR Safety Check        0 errors · 0 warnings
+  Phase 5  ✗  CJS Verification        1 errors · 0 warnings
+
+── Totals ──────────────────────────────────────────
+  Errors      : 1
+  Warnings    : 3
+  Violations  : 0
+```
+
+Status icons: `✓` pass · `⚠` warnings only · `✗` errors · `–` report not found (phase was not run).
+
+### Investigating failures
+
+**Visual dashboard** — easiest way to explore all phases at once:
+
+```bash
+yarn view:ui
+```
+
+**Run a phase directly** — full console output with file paths and line numbers:
+
+```bash
+node libs/ui/scripts/treeshake-check.mjs   # Phase 2
+node libs/ui/scripts/build-lint.mjs        # Phase 3
+node libs/ui/scripts/ssr-check.mjs         # Phase 4
+
+# --verbose for full import chains / all global usages:
+node libs/ui/scripts/treeshake-check.mjs --verbose
+node libs/ui/scripts/ssr-check.mjs --verbose
+```
+
+Or via nx:
+
+```bash
+nx run ui:treeshake-check
+nx run ui:build-lint
+nx run ui:ssr-check
+```
+
+**Read the JSON report** directly — already written by `yarn verify:ui`:
+
+```bash
+cat libs/ui/scripts/output/treeshake-report.json   # Phase 2 — "violations"
+cat libs/ui/scripts/output/build-lint-report.json  # Phase 3 — "errors", "warnings"
+cat libs/ui/scripts/output/ssr-report.json         # Phase 4 — "errors", "warnings"
+```
+
+### JSON reports
+
+Each phase writes to `libs/ui/scripts/output/`:
+
+| File                     | Phase | Key fields                                                  |
+| ------------------------ | ----- | ----------------------------------------------------------- |
+| `public-api-map.json`    | 1     | `totalExports`, `byCategory`, `exports`                     |
+| `deps-map.json`          | 1     | `analysis.undeclared`, `analysis.unusedDeps`, `warnings`    |
+| `treeshake-report.json`  | 2     | `violations`, `probes`, `buildFormats`                      |
+| `build-lint-report.json` | 3     | `errors`, `warnings`, `circularDeps`                        |
+| `ssr-report.json`        | 4     | `errors`, `warnings`, `nodeImport`, `browserGlobals`, `rsc` |
+| `cjs-report.json`        | 5     | `errors`, `warnings`                                        |
+| `report.html`            | all   | visual dashboard generated by `yarn view:ui`                |
+
+### CI usage
+
+Use `nx run ui:verify` for CI — runs all 5 phases with `--check` (exits 1 on any error) and `--json`:
+
+```bash
+nx run ui:verify
+```
+
+Individual phase targets:
+
+```bash
+nx run ui:audit-api          # Phase 1
+nx run ui:treeshake-check    # Phase 2
+nx run ui:build-lint         # Phase 3
+nx run ui:ssr-check          # Phase 4
+nx run ui:cjs-check          # Phase 5
+nx run ui:view-reports       # open dashboard (reads existing JSON reports)
+```
+
+---
+
 ## 🧰 Component Generator
 
 Use our CLI script to quickly scaffold new components:
@@ -331,6 +466,121 @@ See [`./ai/README.md`](./ai/README.md) for full documentation.
 
 ---
 
+## 🔄 A2UI Mode — LLM → JSON → UI
+
+A2UI (Agent-to-UI) is a JSON protocol where an LLM produces a structured spec and GridKit renders it at runtime — no JSX required on the consuming side.
+
+### Two functions, one shared contract
+
+| Function                          | Role                                                                                                                             |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `buildA2UISystemPrompt(options?)` | Generates the LLM system instruction from the live component map. Injects your `actions` as the only available action types.     |
+| `renderA2UISpec(spec, actions?)`  | Takes a validated `A2UISpec` and renders it as React components. Wires action `handler` callbacks from the same `actions` array. |
+
+Pass the **same `A2UIActionDefinition[]` array** to both — it is the single source of truth for what actions the LLM can emit and what your app will handle.
+
+### `buildA2UISystemPrompt`
+
+```typescript
+import { buildA2UISystemPrompt } from 'gd-design-library/ai';
+
+const systemInstruction = buildA2UISystemPrompt({
+  agentId: 'shop-agent',
+  agentName: 'Shop Assistant',
+  context: 'E-commerce product catalog assistant for MyShop.',
+  imageSources: ['cdn.myshop.com'],
+  locale: 'en-US',
+  actions: [
+    {
+      type: 'add-to-cart',
+      description: 'Add a product to the cart. payload: { productId: string, quantity: number }',
+      handler: ({ payload }) => addToCart(payload),
+    },
+    {
+      type: 'open-checkout',
+      description: 'Navigate to the checkout flow. No payload required.',
+      handler: () => navigate('/checkout'),
+    },
+  ],
+});
+```
+
+Key options:
+
+| Option                  | Description                                                                      |
+| ----------------------- | -------------------------------------------------------------------------------- |
+| `agentId` / `agentName` | Identifiers placed in every generated spec's `metadata`                          |
+| `context`               | Free-form use-case description injected near the top of the prompt               |
+| `actions`               | App-defined action types — the **only** way to make actions available to the LLM |
+| `imageSources`          | Restrict image `src` hosts; pass `[]` to disable remote images entirely          |
+| `locale`                | BCP 47 locale code; auto-selects EU/US price formatting                          |
+| `priceFormat`           | `'us'` · `'eu'` · or a `PriceFormatCustom` object for full control               |
+| `customGuardrails`      | Extra guardrail rules appended after the system-defined ones                     |
+| `customRules`           | Extra generation rules appended after the system-defined ones                    |
+| `theme`                 | `'light'` (default) · `'dark'` · `'auto'`                                        |
+
+### `renderA2UISpec`
+
+```tsx
+import { renderA2UISpec } from 'gd-design-library';
+import type { A2UIActionDefinition } from 'gd-design-library/ai';
+
+const actions: A2UIActionDefinition[] = [
+  {
+    type: 'add-to-cart',
+    description: 'Add a product to the cart.',
+    handler: ({ payload }) => addToCart(payload),
+  },
+];
+
+function AgentResponse({ spec }) {
+  return <>{renderA2UISpec(spec, actions)}</>;
+}
+```
+
+`renderA2UISpec` maps every `A2UIComponent` in the spec to the corresponding GridKit component, resolves layout (vertical / horizontal / grid), and dispatches action callbacks when user events fire. Returns `null` for empty or invalid specs.
+
+### Schema validation — `ui-specification-schema.json`
+
+Every A2UI response should be validated before rendering. The schema is exported from the package:
+
+```typescript
+import schema from 'gd-design-library/ai/ui-specification-schema.json';
+import Ajv from 'ajv';
+
+const ajv = new Ajv();
+const validate = ajv.compile(schema);
+
+if (!validate(spec)) {
+  console.error('Invalid A2UI spec:', validate.errors);
+}
+```
+
+For **Gemini** structured output, pass `A2UI_SPEC_SCHEMA` directly as `responseSchema` to enforce JSON shape at the model level:
+
+```typescript
+import { buildA2UIGeminiRequest, A2UI_SPEC_SCHEMA } from 'gd-design-library/ai';
+
+const model = genAI.getGenerativeModel({
+  model: 'gemini-2.5-flash',
+  generationConfig: {
+    responseMimeType: 'application/json',
+    responseSchema: A2UI_SPEC_SCHEMA,
+  },
+});
+
+const result = await model.generateContent(
+  buildA2UIGeminiRequest('Show a product analytics dashboard', {
+    agentId: 'analytics-agent',
+    context: 'Product analytics for an e-commerce platform.',
+  })
+);
+```
+
+The schema enforces the full `A2UISpec` structure including `version`, `metadata`, `ui.layout`, `ui.components`, and `ui.actions`. The agent service retries up to 3 times on validation failure.
+
+---
+
 ## 📘 Documentation
 
 Explore our hosted Storybook:

package/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));exports.__toESM=s;

package/ai/README.md

@@ -539,7 +539,7 @@ yarn test:ai:watch
 
 <!-- AUTO-GENERATED:COMPONENTS:START -->
 
-_65 components total — generated from `libs/ui/src/ai/schemas/` on 2026-04-09._
+_66 components total — generated from `libs/ui/src/ai/schemas/` on 2026-05-05._
 
 ### Other
 
@@ -1197,13 +1197,39 @@ Multi-line text input organism with auto-growing rows, character count, attachme
 | `showAttachmentButton` | `boolean` | Whether to show the attachment action button   |
 | `showSendButton`       | `boolean` | Whether to show the send action button         |
 | `sendButtonLabel`      | `string`  | Accessible label for the send button           |
-| _...+5 more_           |           |                                                |
+| _...+10 more_          |           |                                                |
 
 **Example:**
 
 <!-- prettier-ignore -->
 ```tsx
-<InputArea value={message} onValueChange={setMessage} onSend={handleSend} showSendButton placeholder="Type a message..." />
+<InputArea value={message} showSendButton placeholder="Type a message..." actions={["send"]} />
+```
+
+#### AttachmentFile
+
+**Complexity:** Low | **Import:** `import { AttachmentFile } from 'gd-design-library'`
+
+File attachment chip that displays a selected file with its name, optional type and size metadata, and a remove action. Long file names truncate with ellipsis and show a tooltip on hover; long fileType values truncate with ellipsis. The separator between fileType and fileSize defaults to "·" and is configurable. Designed to render as a child of InputArea above the textarea, or standalone in any file-selection context.
+
+<!-- prettier-ignore -->
+| Prop                | Type         | Description                                                                                                      |
+| ------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- |
+| `fileName`          | `string`     | Name of the attached file displayed in the chip                                                                  |
+| `fileType`          | `string`     | File type label shown below the file name (e.g. "PDF", "doc")                                                    |
+| `fileSize`          | `string`     | File size label shown below the file name (e.g. "1.2 MB")                                                        |
+| `separator`         | `string`     | Character rendered between fileType and fileSize in the meta row                                                 |
+| `fileIcon`          | `ReactNode`  | Custom icon replacing the default fileCopy icon. Use an Icon component sized xl (32px).                          |
+| `onRemove`          | `() => void` | Callback fired when the remove button is clicked. The remove button is only rendered when this prop is provided. |
+| `removeButtonLabel` | `string`     | Accessible aria-label for the remove button                                                                      |
+| `disabled`          | `boolean`    | Disables the remove button                                                                                       |
+| _...+2 more_        |              |                                                                                                                  |
+
+**Example:**
+
+<!-- prettier-ignore -->
+```tsx
+<AttachmentFile fileName="report.pdf" fileType="PDF" fileSize="1.2 MB" onRemove={() => removeFile(id)} />
 ```
 
 ### Communication & Chat

package/ai/a2ui/component-map.cjs

@@ -0,0 +1 @@
+const e=require(`../schemas/components/Icon.cjs`),t=require(`../schemas/components.cjs`);function n(e){let t={};for(let n of e){let e;e=n.enum&&n.enum.length>0?n.enum.map(e=>`"${e}"`).join(`|`):n.type,n.description&&(e+=` — ${n.description}`),t[n.name]=e}return t}function r(e,t){let n=[],r=e,i=!!e.a2uiName;if(t&&t.compositionTips.length>0&&n.push(...t.compositionTips),i)return n.length>0?n:void 0;let a=r.commonPatterns;if(a)for(let[e,t]of Object.entries(a)){let r=t.useCase??``,i=t.code?` Example: ${t.code}`:``;n.push(`${e}: ${r}${i}`)}let o=r.examples;if(Array.isArray(o))for(let e of o)typeof e==`string`&&n.push(e);let s=r.troubleshooting;if(s)for(let[e,t]of Object.entries(s))n.push(`Troubleshooting — ${e}: ${t}`);return n.length>0?n:void 0}function i(){let e={};for(let i of t.aiComponentsSchema.components){let a=i;if(!a.a2uiName)continue;let o=t.componentModulesByName.get(a.name);if(e[a.a2uiName]={component:a.name,import:a.import,description:a.description,props:n(a.props),notes:r(a,o),category:a.category,complexity:a.complexity},a.a2uiSubcomponents){let t=a.subcomponents;for(let[r,i]of Object.entries(a.a2uiSubcomponents)){let s=t?.[i.component]?.description??a.description;e[r]={component:i.component,import:a.import,description:s,props:n(i.props),notes:o&&o.compositionTips.length>0?o.compositionTips:void 0,category:a.category?`${a.category} Subcomponents`:`Card Subcomponents`,complexity:a.complexity}}}}return e}var a=i(),o=Object.keys(a),s=e.default.component.availableIcons,c=e.default.component.iconCatalog;function l(e,n){return t.aiComponentsSchema.components.find(t=>t.a2uiName===e)?.props.find(e=>e.name===n)?.enum??[]}var u=l(`button`,`variant`);function d(e){return a[e]?.component??`Unknown`}exports.A2UI_AVAILABLE_ICONS=s,exports.A2UI_BUTTON_VARIANTS=u,exports.A2UI_COMPONENT_MAP=a,exports.A2UI_COMPONENT_TYPES=o,exports.A2UI_ICON_CATALOG=c,exports.getA2UIPropEnum=l,exports.getGridKitComponent=d;

package/ai/a2ui/component-map.d.ts

@@ -97,6 +97,7 @@ export declare const A2UI_ICON_CATALOG: {
         eye: string;
         volumeUp: string;
         send: string;
+        mic: string;
         chat: string;
         chatBubble: string;
         phone: string;

package/ai/a2ui/component-map.js

@@ -1,76 +1,67 @@
-import { aiComponentsSchema as u, componentModulesByName as b } from "../schemas/components.js";
-import f from "../schemas/components/Icon.js";
-function a(s) {
-  const e = {};
-  for (const n of s) {
-    let o;
-    n.enum && n.enum.length > 0 ? o = n.enum.map((t) => `"${t}"`).join("|") : o = n.type, n.description && (o += ` — ${n.description}`), e[n.name] = o;
-  }
-  return e;
+import e from "../schemas/components/Icon.js";
+import { aiComponentsSchema as t, componentModulesByName as n } from "../schemas/components.js";
+//#region src/ai/a2ui/component-map.ts
+function r(e) {
+	let t = {};
+	for (let n of e) {
+		let e;
+		e = n.enum && n.enum.length > 0 ? n.enum.map((e) => `"${e}"`).join("|") : n.type, n.description && (e += ` — ${n.description}`), t[n.name] = e;
+	}
+	return t;
 }
-function g(s, e) {
-  const n = [], o = s, t = !!s.a2uiName;
-  if (e && e.compositionTips.length > 0 && n.push(...e.compositionTips), t)
-    return n.length > 0 ? n : void 0;
-  const m = o.commonPatterns;
-  if (m)
-    for (const [i, c] of Object.entries(m)) {
-      const l = c.useCase ?? "", d = c.code ? ` Example: ${c.code}` : "";
-      n.push(`${i}: ${l}${d}`);
-    }
-  const p = o.examples;
-  if (Array.isArray(p))
-    for (const i of p)
-      typeof i == "string" && n.push(i);
-  const r = o.troubleshooting;
-  if (r)
-    for (const [i, c] of Object.entries(r))
-      n.push(`Troubleshooting — ${i}: ${c}`);
-  return n.length > 0 ? n : void 0;
+function i(e, t) {
+	let n = [], r = e, i = !!e.a2uiName;
+	if (t && t.compositionTips.length > 0 && n.push(...t.compositionTips), i) return n.length > 0 ? n : void 0;
+	let a = r.commonPatterns;
+	if (a) for (let [e, t] of Object.entries(a)) {
+		let r = t.useCase ?? "", i = t.code ? ` Example: ${t.code}` : "";
+		n.push(`${e}: ${r}${i}`);
+	}
+	let o = r.examples;
+	if (Array.isArray(o)) for (let e of o) typeof e == "string" && n.push(e);
+	let s = r.troubleshooting;
+	if (s) for (let [e, t] of Object.entries(s)) n.push(`Troubleshooting — ${e}: ${t}`);
+	return n.length > 0 ? n : void 0;
 }
-function y() {
-  var e;
-  const s = {};
-  for (const n of u.components) {
-    const o = n;
-    if (!o.a2uiName) continue;
-    const t = b.get(o.name);
-    if (s[o.a2uiName] = {
-      component: o.name,
-      import: o.import,
-      description: o.description,
-      props: a(o.props),
-      notes: g(o, t),
-      category: o.category,
-      complexity: o.complexity
-    }, o.a2uiSubcomponents) {
-      const p = o.subcomponents;
-      for (const [r, i] of Object.entries(o.a2uiSubcomponents)) {
-        const c = ((e = p == null ? void 0 : p[i.component]) == null ? void 0 : e.description) ?? o.description;
-        s[r] = {
-          component: i.component,
-          import: o.import,
-          description: c,
-          props: a(i.props),
-          notes: t && t.compositionTips.length > 0 ? t.compositionTips : void 0,
-          category: o.category ? `${o.category} Subcomponents` : "Card Subcomponents",
-          complexity: o.complexity
-        };
-      }
-    }
-  }
-  return s;
+function a() {
+	let e = {};
+	for (let a of t.components) {
+		let t = a;
+		if (!t.a2uiName) continue;
+		let o = n.get(t.name);
+		if (e[t.a2uiName] = {
+			component: t.name,
+			import: t.import,
+			description: t.description,
+			props: r(t.props),
+			notes: i(t, o),
+			category: t.category,
+			complexity: t.complexity
+		}, t.a2uiSubcomponents) {
+			let n = t.subcomponents;
+			for (let [i, a] of Object.entries(t.a2uiSubcomponents)) {
+				let s = n?.[a.component]?.description ?? t.description;
+				e[i] = {
+					component: a.component,
+					import: t.import,
+					description: s,
+					props: r(a.props),
+					notes: o && o.compositionTips.length > 0 ? o.compositionTips : void 0,
+					category: t.category ? `${t.category} Subcomponents` : "Card Subcomponents",
+					complexity: t.complexity
+				};
+			}
+		}
+	}
+	return e;
 }
-const $ = y();
-f.component.availableIcons;
-f.component.iconCatalog;
-function h(s, e) {
-  var o;
-  const n = u.components.find((t) => t.a2uiName === s);
-  return ((o = n == null ? void 0 : n.props.find((t) => t.name === e)) == null ? void 0 : o.enum) ?? [];
+var o = a(), s = Object.keys(o), c = e.component.availableIcons, l = e.component.iconCatalog;
+function u(e, n) {
+	return t.components.find((t) => t.a2uiName === e)?.props.find((e) => e.name === n)?.enum ?? [];
 }
-h("button", "variant");
-export {
-  $ as A2UI_COMPONENT_MAP,
-  h as getA2UIPropEnum
-};
+var d = u("button", "variant");
+function f(e) {
+	return o[e]?.component ?? "Unknown";
+}
+//#endregion
+export { c as A2UI_AVAILABLE_ICONS, d as A2UI_BUTTON_VARIANTS, o as A2UI_COMPONENT_MAP, s as A2UI_COMPONENT_TYPES, l as A2UI_ICON_CATALOG, u as getA2UIPropEnum, f as getGridKitComponent };

package/ai/a2ui/image-policy.cjs

@@ -0,0 +1 @@
+function e(e){return e===void 0?null:(Array.isArray(e)?e:[e]).map(e=>e.trim().toLowerCase()).filter(e=>e.length>0)}exports.normalizeImageSources=e;

package/ai/a2ui/image-policy.js

@@ -0,0 +1,6 @@
+//#region src/ai/a2ui/image-policy.ts
+function e(e) {
+	return e === void 0 ? null : (Array.isArray(e) ? e : [e]).map((e) => e.trim().toLowerCase()).filter((e) => e.length > 0);
+}
+//#endregion
+export { e as normalizeImageSources };

package/ai/a2ui/index.d.ts

@@ -17,6 +17,6 @@
  * A2UI protocol: https://a2ui.org
  */
 export { A2UI_COMPONENT_MAP, A2UI_COMPONENT_TYPES, A2UI_AVAILABLE_ICONS, A2UI_ICON_CATALOG, A2UI_BUTTON_VARIANTS, getA2UIPropEnum, getGridKitComponent, type A2UIComponentEntry, type A2UIIconName, type A2UIIconCatalog, type A2UIButtonVariant, } from './component-map';
-export { A2UI_SPEC_SCHEMA, A2UI_SPEC_SCHEMA_SIMPLE, type A2UISpec, type A2UIMetadata, type A2UIComponent, type A2UIAction, type A2UIStyling, type A2UILayoutType, type A2UIVariant, type A2UIActionDefinition, } from './spec-schema';
+export { A2UI_SPEC_SCHEMA, A2UI_SPEC_SCHEMA_SIMPLE, extendA2UISpecSchema, type A2UISpec, type A2UIMetadata, type A2UIComponent, type A2UIAction, type A2UIStyling, type A2UILayoutType, type A2UIVariant, type A2UIActionDefinition, type A2UICustomComponentMeta, } from './spec-schema';
 export { buildA2UISystemPrompt, buildA2UIGeminiRequest, type PriceFormatCustom, type A2UISystemPromptOptions, } from './system-prompt';
 export { type A2UIImageSources, normalizeImageSources } from './image-policy';

package/ai/a2ui/spec-schema.cjs

@@ -0,0 +1 @@
+const e=require(`./component-map.cjs`);var t={type:`object`,required:[`version`,`metadata`,`ui`],properties:{version:{type:`string`,pattern:`^\\d+\\.\\d+\\.\\d+$`,description:`Semantic version of the UI specification`,example:`1.0.0`},metadata:{type:`object`,required:[`agentId`,`agentName`,`timestamp`],properties:{agentId:{type:`string`,description:`Unique identifier for the agent`},agentName:{type:`string`,description:`Human-readable agent name`},agentVersion:{type:`string`,pattern:`^\\d+\\.\\d+\\.\\d+$`},timestamp:{type:`string`,format:`date-time`,description:`ISO 8601 timestamp of UI generation`},sessionId:{type:`string`,description:`Session identifier for conversation continuity`},provider:{type:`string`,description:`LLM provider or orchestration source for the generated spec, for example openai, anthropic, gemini, or local`},scenario:{type:`string`,description:`Scenario, use case, or workflow identifier associated with this spec`},segment:{type:`string`,description:`Optional orchestration segment or stage identifier when a flow is generated in multiple parts`},isSimulated:{type:`boolean`,description:`Demo-only flag indicating the spec was simulated or replayed instead of generated live`},locale:{type:`string`,default:`en-US`,pattern:`^[a-z]{2}-[A-Z]{2}$`},theme:{type:`string`,enum:[`light`,`dark`,`auto`],default:`auto`},customData:{type:`object`,description:`Agent-specific metadata`}}},ui:{type:`object`,required:[`layout`,`components`],properties:{layout:{type:`object`,required:[`type`],properties:{type:{type:`string`,enum:[`vertical`,`horizontal`,`grid`,`flex`,`stack`,`split`],description:`Layout type mapping to GD Design Library layout components`},spacing:{type:`string`,description:`Spacing between elements — must be a real CSS value (e.g. '16px', '1rem'). Never use token strings like 'xs', 'sm', 'md', 'lg', 'xl', 'none'.`},gridColumns:{type:`integer`,minimum:1,maximum:12,description:`Number of columns for grid layout`},alignment:{type:`string`,enum:[`start`,`center`,`end`,`stretch`,`baseline`]},justification:{type:`string`,enum:[`start`,`center`,`end`,`space-between`,`space-around`,`space-evenly`]},responsive:{type:`object`,properties:{mobile:{type:`object`,properties:{type:{type:`string`},gridColumns:{type:`integer`},spacing:{type:`string`}}},tablet:{type:`object`,properties:{type:{type:`string`},gridColumns:{type:`integer`},spacing:{type:`string`}}},desktop:{type:`object`,properties:{type:{type:`string`},gridColumns:{type:`integer`},spacing:{type:`string`}}}}}}},components:{type:`array`,minItems:1,description:`Array of UI components to render.`,items:{type:`object`,required:[`id`,`type`],properties:{id:{type:`string`,description:`Unique component identifier`},type:{type:`string`,enum:e.A2UI_COMPONENT_TYPES,description:`Component type — maps to gd-design-library (GridKit) React component. Source of truth: ./component-map.ts`},label:{type:`string`,description:`Component label or title`},value:{description:`Component value (any type)`},initial:{type:`number`,description:`Initial numeric value used by counter components.`},caption:{type:`string`,description:`Optional caption text for images. Only used by type "image".`},placeholder:{type:`string`},helpText:{type:`string`,description:`Helper text or description`},ariaLabel:{type:`string`,description:`Accessible label used when visible text alone is not sufficient.`},content:{type:`string`,description:`Tooltip text content. Only used by type "tooltip".`},name:{type:`string`,description:`Component-specific name. For avatar-user: user display name. For loader: animation type ("circle" or "dots"). For rating: radio group name. Prefer dedicated props where documented.`},subtitle:{type:`string`,description:`Secondary text line. Only used by type "avatar-user".`},className:{type:`string`,description:`Optional CSS class name forwarded to wrapper-style primitives such as box and wrapper.`},tabIndex:{type:`number`,description:`Keyboard tab order for focusable primitives such as box.`},layout:{type:`string`,enum:[`horizontal`,`vertical`],description:`Carousel layout direction. Only used by type "carousel".`},as:{type:`string`,description:`Underlying HTML tag override (for example "section", "article", "figure", "figcaption", "span").`},htmlFor:{type:`string`,description:`Associated form control ID for label components. Only used by type "label".`},captionAs:{type:`string`,description:`HTML tag override for image captions. Only used by type "image".`},WrapperView:{type:`string`,description:`Underlying HTML tag for the optional portal wrapper. Only used by type "portal".`},container:{type:`string`,description:`CSS selector for an existing DOM node that should receive portal content. Only used by type "portal".`},href:{type:`string`,description:`Link destination URL. Top-level field for type "link".`},target:{type:`string`,enum:[`_blank`,`_self`,`_parent`,`_top`],description:`Link browsing context. Top-level field for type "link".`},rel:{type:`string`,description:`Link relationship attribute. Top-level field for type "link".`},buttonType:{type:`string`,enum:[`button`,`submit`,`reset`],description:`HTML button type attribute. Only used by type "button".`},placement:{type:`string`,enum:[`top`,`bottom`,`left`,`right`,`top-left`,`top-center`,`top-right`,`bottom-left`,`bottom-center`,`bottom-right`],description:`Component placement. Used by tooltip ("top" | "bottom" | "left" | "right"), menu corner placement, and snackbar overlay placement.`},delay:{type:`number`,description:`Tooltip open delay in milliseconds.`},length:{type:`string`,description:`Separator explicit length (for example "40px" or "100%"). Especially useful for vertical separators. Only used by type "separator".`},required:{type:`boolean`,default:!1},disabled:{type:`boolean`,default:!1},readOnly:{type:`boolean`,default:!1},visible:{type:`boolean`,default:!0},isOpen:{type:`boolean`,description:`Controlled open state for collapsible layout components such as chat-container.`},bordered:{type:`boolean`,description:`Whether the component renders with a bordered container. Used by type "breadcrumbs".`},checked:{type:`boolean`,description:`Checked/on state for checkbox and switch components.`},indeterminate:{type:`boolean`,description:`Mixed state for checkbox components.`},allowMultipleExpand:{type:`boolean`,description:`Whether accordion allows multiple items to stay expanded at once.`},withoutSeparator:{type:`boolean`,description:`Whether accordion items render without divider lines.`},isInline:{type:`boolean`,description:`Whether accordion headers render using inline layout.`},defaultValue:{description:`Initial uncontrolled value. Used by accordion, radio-group, and rating components. Type depends on the component.`},max:{type:`number`,description:`Maximum numeric value. Used by counter as the upper bound, by rating as the total item count, and by slider when modeled as a top-level prop.`},min:{type:`number`,description:`Minimum numeric value. Used by counter as the lower bound and by slider when modeled as a top-level prop.`},variant:{type:`string`,description:`Visual variant for the component. Button: primary|secondary|tertiary|outlined|text|inherit. Separator: solid|dashed|dotted. Card: vertical|horizontal. Badge: primary|secondary|tertiary|quaternary|quinary. Inline-notification: success|warning|error|info.`},appearance:{type:`string`,description:`Secondary visual appearance modifier. For badge: filled|filledLight|outline|outlineFilledLight.`},size:{type:`string`,enum:[`xs`,`sm`,`md`,`lg`,`xl`],default:`md`},styleVariant:{type:[`string`,`array`],items:{type:`string`},description:`Typography style modifiers. Use a string or array such as "bold" or ["italic", "underline"]. Only used by type "typography".`},underline:{type:`string`,enum:[`default`,`highlight`,`none`],description:`Link underline behavior. Top-level field for type "link".`},labelSide:{type:`string`,enum:[`left`,`right`],description:`Switch label placement relative to the control. Only used by type "switch".`},separator:{type:`string`,description:`Breadcrumb text separator (for example "/" or ">"). Also used by type "attachment-file" as the character between fileType and fileSize (defaults to "·").`},separatorIcon:{type:`string`,description:`Icon name used as the breadcrumb separator. Only used by type "breadcrumbs".`},separatorAfterLastItem:{type:`boolean`,description:`Whether breadcrumbs should render a separator after the last item.`},rounded:{type:`string`,enum:[`none`,`default`,`round`,`xs`,`sm`,`md`,`lg`,`xl`],description:`Loader border radius for dots animation. Top-level field for type "loader".`},withWrapper:{type:`boolean`,description:`Whether a helper wrapper container should be rendered. Used by type "loader" and "portal".`},wrapperVariant:{type:`string`,enum:[`inline`,`section`,`fullPage`],description:`Wrapper preset used by the portal helper wrapper. Only used by type "portal".`},blocksScroll:{type:`boolean`,description:`Whether the portal should lock background document scrolling while mounted.`},animationName:{type:[`string`,`null`],description:`Skeleton animation keyframe name. Accepts theme animation token names such as "blinkKeyframes", raw CSS animation names, or null to disable the built-in animation. Only used by type "skeleton".`},animationProps:{type:`string`,description:`Custom CSS animation shorthand forwarded to skeleton or loader when fine-grained animation control is needed.`},color:{type:`string`,description:`Top-level color prop. Prefer theme color token paths (e.g. "text.secondary", "border.default"). Palette-style aliases like "brand.500" and "theme.palette.warning.main" are also accepted. Use raw CSS/hex only when no theme token fits. Used by typography and separator.`},icon:{type:`string`,description:`Icon name from GD icon set. Used by the icon component, snackbar, accordion header expand icons, and avatar icon fallbacks. Also accepted as a legacy alias for iconStart on some leading-adornment components.`},iconStart:{type:`string`,description:`Leading icon name from GD icon set. Preferred field for components with a start icon or adornment such as badge, button, input, input-file, menu triggers, and select.`},iconEnd:{type:`string`,description:`Trailing icon name from GD icon set. Used by button, badge, input, input-file, and select.`},fill:{type:`string`,description:`Fill color for multi-path icons. Prefer theme color token paths (e.g. "icon.error", "icon.primary", "icon.default"). Use raw CSS/hex only when no theme token fits. Used by type "icon" and avatar icon fallbacks.`},fillSvg:{type:`string`,description:`Uniform fill color for the entire SVG. Prefer theme color token paths (same options as fill). Use raw CSS/hex only when no theme token fits. Overrides fill. Used by type "icon" and avatar icon fallbacks.`},width:{description:`Width. For icon: pixel number (e.g. 24). For layout components: CSS string (e.g. "100%", "200px").`},height:{description:`Height. For icon: pixel number (e.g. 24). For layout components: CSS string (e.g. "100px").`},minHeight:{type:[`string`,`number`],description:`Minimum height constraint. Use CSS strings for layout components (for example "120px") or numbers for menu positioning logic.`},count:{type:`number`,description:`SliderDots total dot count. Only used by type "slider-dots".`},activeIndex:{type:[`string`,`number`],description:`Active index or active option value. Used by slider-dots and select components.`},step:{type:`number`,description:`Slider step increment. Only used by type "slider".`},lines:{type:`number`,description:`Maximum number of lines before truncation. Only used by type "truncate".`},objectFit:{type:`string`,enum:[`cover`,`contain`,`fill`,`none`,`scale-down`],description:`Image object-fit behavior. Only used by type "image".`},isBordered:{type:`boolean`},isHighlighted:{type:`boolean`},withShadowHover:{type:`boolean`},fullWidth:{type:`boolean`,description:`Whether the internal button should stretch to the full container width. Used by button/input-file.`},isIcon:{type:`boolean`,description:`Whether the control should render as an icon-only button. Used by button/input-file.`},showArrows:{type:`boolean`,description:`Whether carousel navigation arrows are visible. Used by type "carousel" and "content-carousel".`},showDots:{type:`boolean`,description:`Whether carousel dot indicators are visible. Used by type "carousel" and "content-carousel".`},thumbs:{type:`string`,enum:[`start`,`end`],description:`Thumbnail strip position. Only used by type "carousel".`},isFocusable:{type:`boolean`,description:`Whether the carousel root receives keyboard focus. Used by type "carousel" and "content-carousel".`},visibleItems:{type:`number`,description:`Number of items visible at once. Only used by type "content-carousel".`},scrollStep:{type:`number`,description:`Number of items to scroll per navigation action. Only used by type "content-carousel".`},scrollAlignment:{type:`string`,enum:[`left`,`centered`],description:`Content carousel scroll alignment. Only used by type "content-carousel".`},vertical:{type:`string`,enum:[`hidden`,`visible`,`auto`],description:`Vertical scrollbar visibility. Only used by type "scroll".`},horizontal:{type:`string`,enum:[`hidden`,`visible`,`auto`],description:`Horizontal scrollbar visibility. Only used by type "scroll".`},autoHide:{type:`boolean`,description:`Whether visible scrollbars should fade out after scrolling stops. Only used by type "scroll".`},showSidebarAsideControl:{type:`boolean`,description:`Whether the chat sidebar shows its internal collapse/close control.`},showSidebarHeaderControl:{type:`boolean`,description:`Whether the main chat header shows the control that reopens the sidebar.`},multiple:{type:`boolean`,description:`Multi-value selection mode for select/input-file components.`},searchable:{type:`boolean`,description:`Whether the select shows a search field.`},searchPlaceholder:{type:`string`,description:`Placeholder text for the select search field.`},autoOpen:{type:`boolean`,description:`Whether the select dropdown opens automatically on render.`},accept:{type:`string`,description:`Accepted file MIME types or extensions for input-file.`},capture:{type:[`boolean`,`string`],enum:[!0,!1,`user`,`environment`],description:`Mobile capture mode for input-file.`},inputFileButtonLabel:{type:`string`,description:`Visible label for the drag-and-drop file picker button.`},acceptedFileTypes:{type:`array`,items:{type:`string`},description:`Allowed MIME types for drag-and-drop file validation.`},maxFileSize:{type:`number`,description:`Maximum allowed file size in bytes for each dropped or selected file.`},maxFiles:{type:`number`,description:`Maximum total number of files allowed by drag-and-drop.`},debounceCallbackTime:{type:`number`,description:`Debounce delay in milliseconds for input change handlers.`},ariaDescribedBy:{type:`string`,description:`ID of helper/error text announced by screen readers.`},resize:{type:`string`,enum:[`none`,`both`,`horizontal`,`vertical`],description:`Textarea resize mode. Only used by type "textarea".`},dynamicHeightAdjustment:{type:`boolean`,description:`Whether textarea height should auto-grow with content.`},maxCharacters:{type:`number`,description:`Maximum character count for textarea. Shows a counter in the UI.`},maxLength:{type:`number`,description:`Maximum character count for InputArea.`},currentValue:{type:`string`,description:`Current formatted price value without the currency symbol. Only used by type "price".`},oldValue:{type:`string`,description:`Optional previous price shown as the struck-through comparison value. Only used by type "price".`},currencySymbol:{type:`string`,description:`Currency symbol displayed by price components (for example "$", "€", or "zł").`},currencySymbolPosition:{type:`string`,enum:[`before`,`after`],description:`Where the currency symbol should appear relative to the value. Only used by type "price".`},gutter:{type:[`string`,`number`],description:`Gap between direct children for row, column, and card container components.`},gap:{type:`string`,description:`Top-level gap prop used by flex-container and as an alias for row/column gutter.`},padding:{type:`string`,description:`CSS inner padding for card and related layout containers.`},align:{type:`string`,enum:[`start`,`center`,`end`,`stretch`],description:`Cross-axis alignment for row and column layout primitives.`},justify:{type:`string`,enum:[`start`,`center`,`end`,`space-between`,`space-around`],description:`Main-axis distribution for row and column layout primitives.`},isWrap:{type:`boolean`,description:`Whether row or column children are allowed to wrap.`},flex:{type:`string`,description:`CSS flex shorthand for row or column components when they are children of another flex container.`},isReversed:{type:`boolean`,description:`Whether row or column direction is visually reversed.`},flexDirection:{type:`string`,enum:[`row`,`column`,`row-reverse`,`column-reverse`],description:`Top-level flex direction prop for flex-container.`},alignItems:{type:`string`,description:`Top-level align-items prop for flex-container or alias for row/column alignment.`},justifyContent:{type:`string`,description:`Top-level justify-content prop for flex-container or alias for row/column justification.`},showPercentage:{type:`boolean`,description:`Whether the progress bar should show a numeric percentage label.`},fillColor:{type:`string`,description:`Filled-track color for progress bars. Prefer theme token paths before raw CSS or hex colors.`},closeOnSelect:{type:`boolean`,description:`Whether a menu closes immediately after an option is selected.`},offsetX:{type:`number`,description:`Horizontal offset in pixels used by menu positioning.`},offsetY:{type:`number`,description:`Vertical offset in pixels used by menu positioning.`},gridColumns:{type:[`number`,`string`],description:`Radio-group grid column count when variant is "grid".`},gridRows:{type:[`number`,`string`],description:`Radio-group grid row count when variant is "grid".`},gridColumnGutter:{type:[`number`,`string`],description:`Horizontal spacing between radio-group grid items.`},gridRowGutter:{type:[`number`,`string`],description:`Vertical spacing between radio-group grid rows.`},wrapItems:{type:`boolean`,description:`Whether radio-group items should wrap in row or column layouts.`},itemWidth:{type:`string`,description:`Per-option width for radio-group visual tiles.`},itemHeight:{type:`string`,description:`Per-option height for radio-group visual tiles.`},isIconsView:{type:`boolean`,description:`Whether stepper indicators should render icons instead of step numbers.`},duration:{type:[`number`,`null`],description:`Auto-dismiss duration in milliseconds. Only used by type "snackbar".`},dismissOnClick:{type:`boolean`,description:`Whether clicking the snackbar should dismiss it.`},colored:{type:`boolean`,description:`Whether the snackbar uses a filled background matching its variant.`},isAnimated:{type:`boolean`,description:`Whether the snackbar should animate in and out.`},stickyHeader:{type:`boolean`,description:`Whether the table header should remain visible while scrolling.`},stickyFooter:{type:`boolean`,description:`Whether the table footer should remain visible while scrolling.`},stickyPagination:{type:`boolean`,description:`Whether the table pagination row should remain visible while scrolling.`},pagination:{type:`boolean`,description:`Whether the table should render built-in pagination controls.`},pageSize:{type:`number`,description:`Initial number of rows per page when table pagination is enabled.`},pageSizes:{type:`array`,items:{type:`number`},description:`Selectable page-size options for table pagination.`},virtualized:{type:`boolean`,description:`Whether the table should use virtualization for large row sets.`},rowHeight:{type:`number`,description:`Row height in pixels for virtualized tables.`},minVisibleRange:{type:`number`,description:`Minimum buffered visible range for virtualized tables.`},options:{type:`array`,description:`Options for select, radio, checkbox groups`,items:{type:`object`,required:[`value`,`label`],properties:{value:{description:`Option value`},label:{type:`string`,description:`Display label`},disabled:{type:`boolean`,default:!1},icon:{type:`string`}}}},columns:{type:`array`,description:`Column definitions for table component`,items:{type:`object`,required:[`key`,`label`],properties:{key:{type:`string`,description:`Column key/field name.`},label:{type:`string`,description:`Column header label.`},width:{type:`string`,description:`CSS column width (e.g. "120px", "20%").`},sortable:{type:`boolean`,default:!1},filterable:{type:`boolean`,default:!1},align:{type:`string`,enum:[`left`,`center`,`right`],default:`left`},formatter:{type:`string`,enum:[`text`,`number`,`currency`,`date`,`datetime`,`boolean`,`custom`]}}}},rows:{type:`array`,description:`Data rows for table or list component`},data:{type:`array`,description:`Alias for rows — accepted when LLM generates data instead of rows`},errors:{type:`array`,items:{type:`string`},description:`Inline validation or upload error messages, used by drag-and-drop.`},files:{type:`array`,description:`Current file metadata for drag-and-drop controlled state.`,items:{type:`object`,required:[`name`],properties:{name:{type:`string`},size:{type:`number`},type:{type:`string`}}}},children:{type:`array`,description:`Nested child components (not recursively validated to avoid cascading errors)`,items:{type:`object`}},dragOverContent:{type:`array`,description:`Custom nested components shown while drag-and-drop is in its active hover state.`,items:{type:`object`}},loadingOverlay:{type:`array`,description:`Custom nested components shown while drag-and-drop isLoading is true.`,items:{type:`object`}},dragOverChildren:{type:`array`,description:`A2UI child components shown while drag-and-drop is in its hover state.`,items:{type:`object`}},footer:{type:`array`,description:`Footer components rendered in the modal footer bar (e.g. action buttons). Only used by type "modal".`,items:{type:`object`}},actionChildren:{type:`array`,description:`Nested child components rendered in a dedicated action area such as chat-bubble actions or header utilities.`,items:{type:`object`}},logoChildren:{type:`array`,description:`Header logo slot content. Only used by type "header".`,items:{type:`object`}},menuChildren:{type:`array`,description:`Header primary navigation slot content. Only used by type "header".`,items:{type:`object`}},bannerChildren:{type:`array`,description:`Header top banner content. Only used by type "header".`,items:{type:`object`}},advChildren:{type:`array`,description:`Header promo/supporting content shown below the mobile menu. Only used by type "header".`,items:{type:`object`}},headerChildren:{type:`array`,description:`Sidebar header slot content. Only used by type "sidebar".`,items:{type:`object`}},footerChildren:{type:`array`,description:`Sidebar footer slot content. Only used by type "sidebar".`,items:{type:`object`}},headerContent:{type:`array`,description:`Named slot content for the main chat header. Only used by type "chat-container".`,items:{type:`object`}},sidebarContent:{type:`array`,description:`Named slot content for the expanded chat sidebar. Only used by type "chat-container".`,items:{type:`object`}},sidebarMinifiedContent:{type:`array`,description:`Named slot content for the collapsed chat sidebar rail. Only used by type "chat-container".`,items:{type:`object`}},sidebarHeaderContent:{type:`array`,description:`Named slot content above the expanded chat sidebar. Only used by type "chat-container".`,items:{type:`object`}},items:{type:`array`,description:`Component-specific items collection. Used by sidebar for nested navigation items and by search-modal grouped sections.`,items:{type:`object`}},images:{type:`array`,description:`ImagePreview image items with src, optional alt text, and optional caption.`,items:{type:`object`,required:[`src`],properties:{src:{type:`string`},alt:{type:`string`},caption:{type:`string`}}}},results:{type:`array`,description:`SearchModal result items or grouped sections displayed for an active query.`,items:{type:`object`}},historyResults:{type:`array`,description:`SearchModal recent or grouped history items displayed before a query is typed.`,items:{type:`object`}},popularItems:{type:`object`,description:`Optional SearchModal section object with title and items[].`},aiSuggestions:{type:`object`,description:`Optional SearchModal AI suggestions section object with title and items[].`},articles:{type:`object`,description:`Optional SearchModal articles section object with title and items[].`},src:{type:`string`,description:`Image URL for image/avatar/carousel media.`},alt:{type:`string`,description:`Alternative text for image/avatar/carousel media.`},sizeVariant:{type:`string`,enum:[`xs`,`sm`,`md`,`lg`,`xl`],description:`Avatar size variant — alias for "size" on avatar components.`},orientation:{type:`string`,enum:[`horizontal`,`vertical`],description:`Separator direction. Only used by type "separator".`},labelPosition:{type:`string`,enum:[`start`,`center`,`end`],description:`Separator label position. Only used by type "separator".`},backgroundColor:{type:`string`,description:`Avatar background color for initials fallback, or skeleton fill color. Prefer theme color token paths (e.g. "bg.fill.secondary", "bg.fill.success.primary.default") or palette-style aliases like "brand.500" and "theme.palette.success.main". Use raw CSS/hex only when no theme token fits.`},withBadge:{type:`boolean`,description:`Avatar: show status dot badge.`},badgeColor:{type:`string`,description:`Avatar badge dot color. Prefer theme color token paths (e.g. "bg.fill.success.primary.default"). Use raw CSS/hex only when no theme token fits. Only when withBadge is true.`},labelColor:{type:`string`,description:`Separator label text color. Prefer theme color token paths (e.g. "text.caption", "text.warning"). Palette-style aliases like "brand.500" and "theme.palette.warning.main" are also accepted. Use raw CSS/hex only when no theme token fits. Only used by type "separator".`},showCloseButton:{type:`boolean`,description:`Whether to show the × close button in the modal header. Only used by type "modal". Defaults to true.`},closeOnEscape:{type:`boolean`,description:`Whether pressing Escape closes the modal. Only used by type "modal".`},closeOnClickOutside:{type:`boolean`,description:`Whether clicking the backdrop closes the modal. Only used by type "modal".`},isCustomView:{type:`boolean`,description:`Whether the modal uses a fully custom layout without the default header/footer chrome. Only used by type "modal".`},title:{type:`string`,description:`Component-specific title text. Used by chart for accessible titles and by modal as an alternate heading field.`},description:{type:`string`,description:`Component-specific descriptive text, for example chart descriptions or drag-and-drop helper text.`},status:{type:`string`,enum:[`pending`,`fulfilled`,`rejected`],description:`Chat bubble generation status. Only used by type "chat-bubble".`},bgColor:{type:`string`,description:`Header background color override. Prefer theme color token paths (for example "bg.surface") before raw CSS/hex colors.`},mobileMenuList:{type:`array`,description:`Header mobile drawer menu items. Only used by type "header".`,items:{type:`object`,required:[`title`],properties:{id:{type:`string`},title:{type:`string`},path:{type:`string`},icon:{type:`string`}}}},emptyItemsResult:{type:`string`,description:`Search empty-state message shown when no options match the current value.`},carouselOptions:{type:`object`,description:`Embla carousel options such as loop or align. Only used by type "carousel".`},chartHeight:{type:`number`,description:`Height of the chart canvas in pixels. Only used by type "chart".`},xKey:{type:`string`,description:`Data key used for the chart x-axis. Only used by type "chart".`},series:{type:`array`,description:`Chart series definitions for line, bar, and area charts.`,items:{type:`object`}},pieConfig:{type:`object`,description:`Pie or donut chart configuration.`},colors:{type:`array`,description:`Custom color palette for charts.`,items:{type:`string`}},legend:{type:`object`,description:`Chart legend configuration.`},xAxis:{type:`object`,description:`Chart x-axis configuration.`},yAxis:{type:`object`,description:`Chart y-axis configuration.`},grid:{type:`object`,description:`Chart grid configuration.`},tooltip:{type:`object`,description:`Chart tooltip configuration using JSON-safe fields only.`},chartMargin:{type:`object`,description:`Chart inner margin configuration.`},animate:{type:`boolean`,description:`Whether chart transitions are animated.`},loading:{type:`boolean`,description:`Whether the chart is in a loading state.`},error:{type:`boolean`,description:`Whether the chart is in an error state.`},loadingText:{type:`string`,description:`Default loading-state text for charts.`},emptyText:{type:`string`,description:`Default empty-state text for charts.`},errorText:{type:`string`,description:`Default error-state text for charts.`},searchValue:{type:`string`,description:`Current search query. Used by type "search-modal".`},noHistoryResultsLabel:{type:`string`,description:`SearchModal empty-state label shown before a query is typed.`},noResultsLabel:{type:`string`,description:`SearchModal empty-state label shown when a query returns no results.`},newSearchCta:{type:`string`,description:`SearchModal CTA label for starting a new search or chat.`},loaderItemsCount:{type:`number`,description:`Number of skeleton rows shown by SearchModal while loading.`},showSearch:{type:`boolean`,description:`Whether header renders its built-in search affordance.`},showTopBanner:{type:`boolean`,description:`Whether header renders its top banner area.`},showCharacterCount:{type:`boolean`,description:`Whether InputArea shows a live character counter.`},showAttachmentButton:{type:`boolean`,description:`Whether InputArea shows its attachment button.`},showSendButton:{type:`boolean`,description:`Whether InputArea shows its send button.`},showSendButtonTooltip:{type:`boolean`,description:`Whether to show a tooltip on hover of the InputArea send button.`},sendButtonLabel:{type:`string`,description:`Accessible label for the InputArea send button.`},attachmentButtonLabel:{type:`string`,description:`Tooltip and accessible label for the InputArea attachment button.`},recordingState:{type:`string`,enum:[`idle`,`recording`,`processing`],description:`Voice recording state for InputArea. "idle" shows normal input, "recording" shows cancel/confirm controls, "processing" disables confirm and shows a spinner.`},recordButtonLabel:{type:`string`,description:`Accessible label for the InputArea record button.`},minRows:{type:`number`,description:`Minimum visible textarea rows for InputArea.`},maxRows:{type:`number`,description:`Maximum visible textarea rows for InputArea before scrolling.`},initialIndex:{type:`number`,description:`Initial image index for ImagePreview.`},showThumbnails:{type:`boolean`,description:`Whether ImagePreview shows its thumbnail strip.`},showCounter:{type:`boolean`,description:`Whether ImagePreview shows the current/total counter.`},thumbnailPosition:{type:`string`,enum:[`bottom`,`left`],description:`Thumbnail strip position for ImagePreview.`},activeItemId:{type:`string`,description:`Currently active sidebar item id.`},collapsed:{type:`boolean`,description:`Whether sidebar renders in collapsed mode.`},collapsedWidth:{type:`string`,description:`Collapsed sidebar width.`},fileName:{type:`string`,description:`Name of the attached file displayed in the AttachmentFile chip. Truncates with a tooltip on hover when long.`},fileType:{type:`string`,description:`File type label shown below the file name in AttachmentFile (e.g. "PDF", "doc"). Truncates with ellipsis when long.`},fileSize:{type:`string`,description:`File size label shown below the file name in AttachmentFile (e.g. "1.2 MB").`},removeButtonLabel:{type:`string`,description:`Accessible aria-label for the AttachmentFile remove button.`,default:`Remove file`},actions:{type:`array`,items:{type:`string`},description:`Action IDs from ui.actions to bind to this component.`},validation:{type:`array`,items:{type:`string`},description:`Optional validation rule IDs associated with this component.`},attributes:{type:`object`,description:`Additional HTML/component attributes`},styling:{type:`object`,description:`CSS styling for the component. All values MUST be real CSS values (e.g. '16px', '1rem', '50%'). NEVER use design token strings like 'xs', 'sm', 'md', 'lg', 'xl', 'none'.`,properties:{margin:{type:[`string`,`number`],description:`CSS margin value (e.g. '8px 0', '1rem', '0 auto')`},padding:{type:[`string`,`number`],description:`CSS padding value (e.g. '16px', '8px 16px', '1rem')`},width:{type:[`string`,`number`],description:`CSS width value (e.g. '100%', '320px', 'auto')`},height:{type:[`string`,`number`],description:`CSS height value (e.g. '48px', '100vh', 'auto')`},maxWidth:{type:[`string`,`number`],description:`CSS max-width value`},minWidth:{type:[`string`,`number`],description:`CSS min-width value`},maxHeight:{type:[`string`,`number`],description:`CSS max-height value (e.g. '300px', '80vh')`},minHeight:{type:[`string`,`number`],description:`CSS min-height value (e.g. '120px', '2rem')`},color:{type:`string`,description:`CSS color value`},backgroundColor:{type:`string`,description:`CSS background-color value`},fontSize:{type:[`string`,`number`],description:`CSS font-size value (e.g. '14px', '1rem')`},fontWeight:{type:[`string`,`number`],description:`CSS font-weight value`},textAlign:{type:`string`,description:`CSS text-align value (e.g. 'left', 'center', 'right', 'justify')`},display:{type:`string`,description:`CSS display value`},flexDirection:{type:`string`,description:`CSS flex-direction value (e.g. 'row', 'column', 'row-reverse', 'column-reverse')`},alignItems:{type:`string`,description:`CSS align-items value (e.g. 'flex-start', 'flex-end', 'center', 'baseline', 'stretch')`},justifyContent:{type:`string`,description:`CSS justify-content value (e.g. 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')`},gap:{type:[`string`,`number`],description:`CSS gap value (e.g. '8px', '1rem')`},borderRadius:{type:[`string`,`number`],description:`CSS border-radius value`},border:{type:`string`,description:`CSS border shorthand`},boxShadow:{type:`string`,description:`CSS box-shadow value (e.g. '0 1px 3px rgba(0,0,0,0.1)')`},cursor:{type:`string`,description:`CSS cursor value (e.g. 'pointer', 'default')`},flex:{type:[`string`,`number`],description:`CSS flex shorthand for the component itself inside a flex container (e.g. '1', '0 0 auto', '1 1 50%')`},flexWrap:{type:`string`,description:`CSS flex-wrap value (e.g. 'wrap', 'nowrap')`},flexGrow:{type:[`string`,`number`],description:`CSS flex-grow value`},flexShrink:{type:[`string`,`number`],description:`CSS flex-shrink value`},flexBasis:{type:[`string`,`number`],description:`CSS flex-basis value`},marginTop:{type:[`string`,`number`],description:`CSS margin-top value`},marginBottom:{type:[`string`,`number`],description:`CSS margin-bottom value`},marginLeft:{type:[`string`,`number`],description:`CSS margin-left value`},marginRight:{type:[`string`,`number`],description:`CSS margin-right value`},paddingTop:{type:[`string`,`number`],description:`CSS padding-top value`},paddingBottom:{type:[`string`,`number`],description:`CSS padding-bottom value`},paddingLeft:{type:[`string`,`number`],description:`CSS padding-left value`},paddingRight:{type:[`string`,`number`],description:`CSS padding-right value`},letterSpacing:{type:[`string`,`number`],description:`CSS letter-spacing value`},lineHeight:{type:[`string`,`number`],description:`CSS line-height value`},overflow:{type:`string`,description:`CSS overflow value (e.g. 'hidden', 'auto', 'scroll', 'visible')`},objectFit:{type:`string`,description:`CSS object-fit value (e.g. 'cover', 'contain', 'fill', 'none', 'scale-down')`},opacity:{type:[`string`,`number`],description:`CSS opacity value (0–1, e.g. 0.5 or "0.5")`},position:{type:`string`,description:`CSS position value (e.g. 'static', 'relative', 'absolute', 'fixed', 'sticky')`},zIndex:{type:[`string`,`number`],description:`CSS z-index value`},top:{type:[`string`,`number`],description:`CSS top offset`},right:{type:[`string`,`number`],description:`CSS right offset`},bottom:{type:[`string`,`number`],description:`CSS bottom offset`},left:{type:[`string`,`number`],description:`CSS left offset`}}}}}},actions:{type:`array`,description:`Available actions referenced by component actions[] arrays.`,items:{type:`object`,required:[`id`,`type`],properties:{id:{type:`string`,description:`Unique action ID.`},type:{type:`string`,description:`Custom action type string matching an A2UIActionDefinition type (e.g. "add-to-cart", "action-view-all").`},label:{type:`string`,description:`Action label for UI elements.`},trigger:{type:`string`,enum:[`click`,`change`,`input`,`blur`,`focus`,`submit`,`load`,`custom`],default:`click`},payload:{type:`object`,description:`Data payload for the action.`},endpoint:{type:`string`,description:`API endpoint for api-call or agent-call types.`},method:{type:`string`,enum:[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`],default:`POST`},confirmation:{type:`object`,properties:{required:{type:`boolean`,default:!1},message:{type:`string`},confirmText:{type:`string`,default:`Confirm`},cancelText:{type:`string`,default:`Cancel`}}},onSuccess:{type:`object`,properties:{message:{type:`string`},action:{type:`string`,description:`ID of action to execute on success.`},redirect:{type:`string`,description:`URL to redirect to on success.`}}},onError:{type:`object`,properties:{message:{type:`string`},action:{type:`string`,description:`ID of action to execute on error.`}}},loading:{type:`boolean`,default:!1,description:`Show loading state during action execution.`},debounce:{type:`integer`,description:`Debounce delay in milliseconds.`},throttle:{type:`integer`,description:`Throttle delay in milliseconds.`}}}},validations:{type:`array`,description:`Form validation rules associated with components.`,items:{type:`object`,required:[`id`,`componentId`,`rules`],properties:{id:{type:`string`,description:`Unique validation identifier.`},componentId:{type:`string`,description:`ID of the component to validate.`},rules:{type:`array`,items:{type:`object`,required:[`type`],properties:{type:{type:`string`,enum:[`required`,`email`,`url`,`phone`,`min-length`,`max-length`,`min-value`,`max-value`,`pattern`,`custom`]},value:{},message:{type:`string`,description:`Error message to display.`},customValidator:{type:`string`,description:`Name of custom validation function.`}}}},trigger:{type:`string`,enum:[`change`,`blur`,`submit`],default:`blur`}}}}}},state:{type:`object`,description:`Current UI state for state management`,properties:{formData:{type:`object`},errors:{type:`object`},loading:{type:`boolean`,default:!1},disabled:{type:`boolean`,default:!1}}}}},n={type:`object`,required:[`version`,`metadata`,`ui`],properties:{version:{type:`string`},metadata:{type:`object`,required:[`agentId`,`agentName`,`timestamp`]},ui:{type:`object`,required:[`components`],properties:{components:{type:`array`,minItems:1},actions:{type:`array`}}}}};function r(t){let n=new Set(e.A2UI_COMPONENT_TYPES),r=[];for(let e of t)n.has(e)||(n.add(e),r.push(e));return r}function i(e){let n=r(e);if(n.length===0)return t;let i=t.properties.ui.properties.components.items.properties.type.enum;return{...t,properties:{...t.properties,ui:{...t.properties.ui,properties:{...t.properties.ui.properties,components:{...t.properties.ui.properties.components,items:{...t.properties.ui.properties.components.items,properties:{...t.properties.ui.properties.components.items.properties,type:{...t.properties.ui.properties.components.items.properties.type,enum:[...i,...n]}}}}}}}}}exports.A2UI_SPEC_SCHEMA=t,exports.A2UI_SPEC_SCHEMA_SIMPLE=n,exports.extendA2UISpecSchema=i;