@agent-ui-kit/web-components 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/README.md +429 -0
  2. package/dist/agent-ui.css +1 -1
  3. package/dist/api.json +9519 -0
  4. package/dist/docs/blocks/agent-chat.yaml +111 -0
  5. package/dist/docs/blocks/announcement-card.yaml +30 -0
  6. package/dist/docs/blocks/bpm-process.yaml +7 -0
  7. package/dist/docs/blocks/chart-activity.yaml +73 -0
  8. package/dist/docs/blocks/chart-card.yaml +55 -0
  9. package/dist/docs/blocks/chart-donut.yaml +83 -0
  10. package/dist/docs/blocks/chart-grouped.yaml +75 -0
  11. package/dist/docs/blocks/chart-horizontal.yaml +59 -0
  12. package/dist/docs/blocks/chart-interactive.yaml +58 -0
  13. package/dist/docs/blocks/chart-labeled.yaml +66 -0
  14. package/dist/docs/blocks/checkout-form.yaml +57 -0
  15. package/dist/docs/blocks/clinical-trial.yaml +7 -0
  16. package/dist/docs/blocks/contributors.yaml +51 -0
  17. package/dist/docs/blocks/cyber-threat.yaml +7 -0
  18. package/dist/docs/blocks/dashboard-layout.yaml +121 -0
  19. package/dist/docs/blocks/data-eng-dag.yaml +9 -0
  20. package/dist/docs/blocks/date-picker.yaml +30 -0
  21. package/dist/docs/blocks/ddx-workflow.yaml +9 -0
  22. package/dist/docs/blocks/empty-state.yaml +26 -0
  23. package/dist/docs/blocks/env-variables.yaml +46 -0
  24. package/dist/docs/blocks/feature-upgrade.yaml +52 -0
  25. package/dist/docs/blocks/financial-risk.yaml +7 -0
  26. package/dist/docs/blocks/flow-editor.yaml +113 -0
  27. package/dist/docs/blocks/gen-ai-pipeline.yaml +8 -0
  28. package/dist/docs/blocks/index.yaml +245 -0
  29. package/dist/docs/blocks/issue-assign.yaml +34 -0
  30. package/dist/docs/blocks/keyboard-shortcuts.yaml +49 -0
  31. package/dist/docs/blocks/login-branded.yaml +81 -0
  32. package/dist/docs/blocks/login-email-only.yaml +39 -0
  33. package/dist/docs/blocks/login-form.yaml +42 -0
  34. package/dist/docs/blocks/login-simple.yaml +54 -0
  35. package/dist/docs/blocks/login-social.yaml +73 -0
  36. package/dist/docs/blocks/login-two-column.yaml +78 -0
  37. package/dist/docs/blocks/marketing-automation.yaml +7 -0
  38. package/dist/docs/blocks/member-list.yaml +58 -0
  39. package/dist/docs/blocks/ml-pipeline.yaml +7 -0
  40. package/dist/docs/blocks/nav-card.yaml +27 -0
  41. package/dist/docs/blocks/notification-list.yaml +58 -0
  42. package/dist/docs/blocks/oncology-pathway.yaml +7 -0
  43. package/dist/docs/blocks/pricing-card.yaml +53 -0
  44. package/dist/docs/blocks/processing-state.yaml +25 -0
  45. package/dist/docs/blocks/profile-card.yaml +48 -0
  46. package/dist/docs/blocks/saas-onboarding.yaml +7 -0
  47. package/dist/docs/blocks/settings-form.yaml +42 -0
  48. package/dist/docs/blocks/settings-panel.yaml +54 -0
  49. package/dist/docs/blocks/sidebar-nav.yaml +55 -0
  50. package/dist/docs/blocks/signup-form.yaml +47 -0
  51. package/dist/docs/blocks/stat-cards.yaml +49 -0
  52. package/dist/docs/blocks/status-card.yaml +40 -0
  53. package/dist/docs/blocks/suggested-labs.yaml +79 -0
  54. package/dist/docs/blocks/supply-chain.yaml +7 -0
  55. package/dist/docs/blocks/survey-card.yaml +52 -0
  56. package/dist/docs/blocks/tabbed-panel.yaml +53 -0
  57. package/dist/docs/blocks/team-empty.yaml +27 -0
  58. package/dist/docs/blocks/usage-billing.yaml +99 -0
  59. package/dist/docs/components/accordion-item.yaml +52 -0
  60. package/dist/docs/components/accordion.yaml +69 -0
  61. package/dist/docs/components/agent-activity.yaml +79 -0
  62. package/dist/docs/components/agent-feed.yaml +83 -0
  63. package/dist/docs/components/agent-message.yaml +120 -0
  64. package/dist/docs/components/agent-panel.yaml +91 -0
  65. package/dist/docs/components/agent-prompt.yaml +78 -0
  66. package/dist/docs/components/agent-seeds.yaml +44 -0
  67. package/dist/docs/components/agent-text.yaml +57 -0
  68. package/dist/docs/components/agent-thread.yaml +82 -0
  69. package/dist/docs/components/app-shell.yaml +64 -0
  70. package/dist/docs/components/breadcrumb-item.yaml +49 -0
  71. package/dist/docs/components/breadcrumb.yaml +59 -0
  72. package/dist/docs/components/button.yaml +439 -0
  73. package/dist/docs/components/calendar.yaml +74 -0
  74. package/dist/docs/components/canvas.yaml +161 -0
  75. package/dist/docs/components/checkbox.yaml +141 -0
  76. package/dist/docs/components/command-empty.yaml +13 -0
  77. package/dist/docs/components/command-group.yaml +23 -0
  78. package/dist/docs/components/command-input.yaml +19 -0
  79. package/dist/docs/components/command-item.yaml +37 -0
  80. package/dist/docs/components/command-list.yaml +17 -0
  81. package/dist/docs/components/command.yaml +64 -0
  82. package/dist/docs/components/container.yaml +298 -0
  83. package/dist/docs/components/dialog.yaml +133 -0
  84. package/dist/docs/components/drawer.yaml +124 -0
  85. package/dist/docs/components/editor-layer.yaml +59 -0
  86. package/dist/docs/components/editor.yaml +168 -0
  87. package/dist/docs/components/feed.yaml +72 -0
  88. package/dist/docs/components/field.yaml +145 -0
  89. package/dist/docs/components/graph-layer.yaml +41 -0
  90. package/dist/docs/components/graph-node.yaml +58 -0
  91. package/dist/docs/components/graph-noodle.yaml +103 -0
  92. package/dist/docs/components/graph-port.yaml +71 -0
  93. package/dist/docs/components/graph-ui.yaml +64 -0
  94. package/dist/docs/components/gripper.yaml +55 -0
  95. package/dist/docs/components/icon.yaml +133 -0
  96. package/dist/docs/components/index.yaml +320 -0
  97. package/dist/docs/components/input-otp.yaml +59 -0
  98. package/dist/docs/components/input.yaml +289 -0
  99. package/dist/docs/components/noodles.yaml +184 -0
  100. package/dist/docs/components/optgroup.yaml +38 -0
  101. package/dist/docs/components/option.yaml +56 -0
  102. package/dist/docs/components/page-context.yaml +55 -0
  103. package/dist/docs/components/page-main.yaml +39 -0
  104. package/dist/docs/components/page.yaml +36 -0
  105. package/dist/docs/components/pagination.yaml +46 -0
  106. package/dist/docs/components/pane.yaml +102 -0
  107. package/dist/docs/components/panes.yaml +82 -0
  108. package/dist/docs/components/preview-app.yaml +170 -0
  109. package/dist/docs/components/radio-group.yaml +108 -0
  110. package/dist/docs/components/radio.yaml +132 -0
  111. package/dist/docs/components/range.yaml +97 -0
  112. package/dist/docs/components/root.yaml +18 -0
  113. package/dist/docs/components/segment.yaml +41 -0
  114. package/dist/docs/components/segmented-control.yaml +52 -0
  115. package/dist/docs/components/select.yaml +241 -0
  116. package/dist/docs/components/sidebar-content.yaml +32 -0
  117. package/dist/docs/components/sidebar-footer.yaml +28 -0
  118. package/dist/docs/components/sidebar-header.yaml +28 -0
  119. package/dist/docs/components/sidebar.yaml +133 -0
  120. package/dist/docs/components/switch.yaml +131 -0
  121. package/dist/docs/components/tab-panel.yaml +41 -0
  122. package/dist/docs/components/tab.yaml +51 -0
  123. package/dist/docs/components/table-body.yaml +11 -0
  124. package/dist/docs/components/table-cell.yaml +11 -0
  125. package/dist/docs/components/table-column.yaml +76 -0
  126. package/dist/docs/components/table-head.yaml +11 -0
  127. package/dist/docs/components/table-header.yaml +11 -0
  128. package/dist/docs/components/table-row.yaml +11 -0
  129. package/dist/docs/components/table.yaml +219 -0
  130. package/dist/docs/components/tabs.yaml +61 -0
  131. package/dist/docs/components/textarea.yaml +196 -0
  132. package/dist/docs/components/toast.yaml +62 -0
  133. package/dist/docs/components/tooltip.yaml +98 -0
  134. package/dist/docs/components/tree-item.yaml +46 -0
  135. package/dist/docs/components/tree.yaml +27 -0
  136. package/dist/docs/traits/auto-dismiss.yaml +23 -0
  137. package/dist/docs/traits/backtick-wrap.yaml +22 -0
  138. package/dist/docs/traits/clipboard.yaml +31 -0
  139. package/dist/docs/traits/collapsible.yaml +23 -0
  140. package/dist/docs/traits/confetti.yaml +37 -0
  141. package/dist/docs/traits/copy.yaml +27 -0
  142. package/dist/docs/traits/css-inspect.yaml +46 -0
  143. package/dist/docs/traits/dismiss.yaml +23 -0
  144. package/dist/docs/traits/drag.yaml +88 -0
  145. package/dist/docs/traits/drop-zone.yaml +37 -0
  146. package/dist/docs/traits/edit.yaml +39 -0
  147. package/dist/docs/traits/flip.yaml +40 -0
  148. package/dist/docs/traits/gateway.yaml +33 -0
  149. package/dist/docs/traits/hover.yaml +39 -0
  150. package/dist/docs/traits/intersect.yaml +42 -0
  151. package/dist/docs/traits/link-paste.yaml +28 -0
  152. package/dist/docs/traits/linked-scroll.yaml +37 -0
  153. package/dist/docs/traits/list-navigate.yaml +46 -0
  154. package/dist/docs/traits/magnet.yaml +33 -0
  155. package/dist/docs/traits/mention.yaml +40 -0
  156. package/dist/docs/traits/modal.yaml +28 -0
  157. package/dist/docs/traits/noodle.yaml +45 -0
  158. package/dist/docs/traits/overlay.yaml +58 -0
  159. package/dist/docs/traits/pan-zoom.yaml +47 -0
  160. package/dist/docs/traits/parallax.yaml +36 -0
  161. package/dist/docs/traits/persist.yaml +42 -0
  162. package/dist/docs/traits/popover.yaml +28 -0
  163. package/dist/docs/traits/present.yaml +42 -0
  164. package/dist/docs/traits/press-hold.yaml +34 -0
  165. package/dist/docs/traits/range-select.yaml +42 -0
  166. package/dist/docs/traits/resize.yaml +39 -0
  167. package/dist/docs/traits/ripple.yaml +20 -0
  168. package/dist/docs/traits/roving-focus.yaml +30 -0
  169. package/dist/docs/traits/search.yaml +44 -0
  170. package/dist/docs/traits/selection.yaml +41 -0
  171. package/dist/docs/traits/shortcut.yaml +25 -0
  172. package/dist/docs/traits/slash-command.yaml +40 -0
  173. package/dist/docs/traits/snap-resize.yaml +39 -0
  174. package/dist/docs/traits/sort.yaml +47 -0
  175. package/dist/docs/traits/store.yaml +32 -0
  176. package/dist/docs/traits/swipe.yaml +38 -0
  177. package/dist/docs/traits/text-trigger.yaml +35 -0
  178. package/dist/docs/traits/toast.yaml +41 -0
  179. package/dist/docs/traits/toggle-scheme.yaml +40 -0
  180. package/dist/docs/traits/toggle-state.yaml +23 -0
  181. package/dist/docs/traits/tooltip.yaml +39 -0
  182. package/dist/docs/traits/toss.yaml +40 -0
  183. package/dist/docs/traits/trap-focus.yaml +20 -0
  184. package/dist/docs/traits/validate.yaml +52 -0
  185. package/dist/docs/traits/virtual-scroll.yaml +44 -0
  186. package/dist/favicon/apple-touch-icon.png +0 -0
  187. package/dist/favicon/favicon-96x96.png +0 -0
  188. package/dist/favicon/favicon.ico +0 -0
  189. package/dist/favicon/favicon.svg +1 -0
  190. package/dist/favicon/site.webmanifest +21 -0
  191. package/dist/favicon/web-app-manifest-192x192.png +0 -0
  192. package/dist/favicon/web-app-manifest-512x512.png +0 -0
  193. package/dist/icon.svg +4 -0
  194. package/package.json +4 -2
package/README.md ADDED
@@ -0,0 +1,429 @@
1
+ # @agent-ui-kit/web-components
2
+
3
+ A complete web component library for building agent-powered interfaces. Framework-agnostic — works with React, Vue, Svelte, Astro, or plain HTML.
4
+
5
+ Light DOM, zero shadow DOM, CSS-first. Every component is a standard custom element styled via external CSS with `@layer` cascade ordering.
6
+
7
+ ## Quick Start
8
+
9
+ ### CDN (CodePen, prototypes)
10
+
11
+ ```html
12
+ <link rel="stylesheet" href="https://unpkg.com/@agent-ui-kit/web-components/dist/agent-ui.css">
13
+ <script type="module" src="https://unpkg.com/@agent-ui-kit/web-components/dist/register.js"></script>
14
+
15
+ <aui-button primary accent>Get Started</aui-button>
16
+ ```
17
+
18
+ ### npm
19
+
20
+ ```bash
21
+ npm install @agent-ui-kit/web-components
22
+ ```
23
+
24
+ ```js
25
+ // Batteries-included: registers all elements + traits
26
+ import '@agent-ui-kit/web-components/agent-ui.css'
27
+ import '@agent-ui-kit/web-components/register'
28
+ ```
29
+
30
+ ```html
31
+ <aui-button primary accent>Get Started</aui-button>
32
+ ```
33
+
34
+ ### Tree-shaking (import only what you use)
35
+
36
+ ```js
37
+ import '@agent-ui-kit/web-components/agent-ui.css'
38
+ import { AuiButton } from '@agent-ui-kit/web-components/components'
39
+ import { define } from '@agent-ui-kit/web-components/element'
40
+
41
+ define('aui-button', AuiButton)
42
+ ```
43
+
44
+ ## Package Exports
45
+
46
+ | Import path | What you get |
47
+ |---|---|
48
+ | `@agent-ui-kit/web-components/register` | Defines all elements + traits. Side-effect import. |
49
+ | `@agent-ui-kit/web-components/components` | Tree-shakeable component class exports |
50
+ | `@agent-ui-kit/web-components/components/graph` | Graph editor subsystem (separate chunk) |
51
+ | `@agent-ui-kit/web-components/components/editor` | Pan/zoom editor canvas (separate chunk) |
52
+ | `@agent-ui-kit/web-components/components/agent` | Agent chat subsystem (separate chunk) |
53
+ | `@agent-ui-kit/web-components/traits` | Trait infrastructure + all built-in traits |
54
+ | `@agent-ui-kit/web-components/element` | `AgentElement` base class + `define()` |
55
+ | `@agent-ui-kit/web-components/reactivity` | Signals, effects, computed |
56
+ | `@agent-ui-kit/web-components/store` | List store utilities |
57
+ | `@agent-ui-kit/web-components/icons` | Phosphor icon bootstrap |
58
+ | `@agent-ui-kit/web-components/agent-ui.css` | Combined stylesheet (all tokens + components) |
59
+
60
+ ## CSS
61
+
62
+ One stylesheet contains everything: OKLCH color system, design tokens, layout attributes, and all component styles.
63
+
64
+ ```html
65
+ <link rel="stylesheet" href="https://unpkg.com/@agent-ui-kit/web-components/dist/agent-ui.css">
66
+ ```
67
+
68
+ CSS is organized in `@layer` cascade order:
69
+
70
+ 1. **colors** — OKLCH computed palette with light/dark via `light-dark()`
71
+ 2. **tokens** — spacing, sizing, typography, radius scales
72
+ 3. **ui** — presentational attributes, variants, families, state
73
+ 4. **elements** — CSS-only element tag styles (`aui-header`, `aui-footer`, `aui-inset`, etc.)
74
+ 5. **ui.components** — component base styles
75
+
76
+ ### Color scheme
77
+
78
+ ```html
79
+ <!-- Auto (system preference) -->
80
+ <html>
81
+
82
+ <!-- Force dark -->
83
+ <html data-theme="dark" style="color-scheme: dark">
84
+
85
+ <!-- Force light -->
86
+ <html data-theme="light" style="color-scheme: light">
87
+ ```
88
+
89
+ ## Components
90
+
91
+ All components use the `aui-` prefix. They are standard HTML custom elements — no framework bindings needed.
92
+
93
+ ### Layout & Structure
94
+
95
+ | Element | Description |
96
+ |---|---|
97
+ | `<aui-container>` | Surface for cards, panels, widgets. Attributes: `kind="card\|panel\|widget"`, `bordered`, `elevation="1-7"`, `shadow="1-3"` |
98
+ | `<aui-header>` | Adaptive header with `slot="leading"`, `slot="trailing"`, `slot="content"` |
99
+ | `<aui-footer>` | Same slot pattern as header |
100
+ | `<aui-content>` | Scrollable content region. Grows to fill. |
101
+ | `<aui-inset>` | Padding wrapper. Uses container-level padding token. |
102
+ | `<aui-stack>` | Flex layout. `direction="row"`, `gap="1-12"`, `align-items`, `spacer` |
103
+ | `<aui-divider>` | Horizontal or vertical rule |
104
+ | `<aui-panes>` | Resizable split panes |
105
+
106
+ ### Controls
107
+
108
+ | Element | Description |
109
+ |---|---|
110
+ | `<aui-button>` | Polymorphic trigger. `primary`, `accent`, `ghost`, `scrim`, `outline`, `icon-leading`, `icon-trailing`, `label`, `hide-label`, `width="full"`, `grow="1"` |
111
+ | `<aui-input>` | Text input. `type`, `placeholder`, `width="full"` |
112
+ | `<aui-textarea>` | Multi-line input with autogrow |
113
+ | `<aui-select>` | Dropdown, listbox, combobox, toolbar. `mode="bar\|list\|combobox"` |
114
+ | `<aui-option>` | Item inside select/listbox |
115
+ | `<aui-optgroup>` | Grouped options with label |
116
+ | `<aui-checkbox>` | Checkbox control |
117
+ | `<aui-switch>` | Toggle switch |
118
+ | `<aui-radio>` | Radio button (inside `<aui-radio-group>`) |
119
+ | `<aui-range>` | Slider input |
120
+ | `<aui-segmented-control>` | Toggle between options. Contains `<aui-segment>` |
121
+ | `<aui-field>` | Form field wrapper with `label`, `description`, `error`, `required`, `hide-label`, `width="full"` |
122
+ | `<aui-calendar>` | Date picker calendar grid |
123
+
124
+ ### Display
125
+
126
+ | Element | Description |
127
+ |---|---|
128
+ | `<aui-icon>` | SVG icon from registry. `name`, `size` |
129
+ | `<aui-heading>` | `size="xs\|sm\|md\|lg\|xl\|2xl"` |
130
+ | `<aui-text>` | `size="xs\|sm\|md\|lg"`, `muted`, `weight` |
131
+ | `<aui-badge>` | Status badge. `accent`, `success`, `warning`, `danger` |
132
+ | `<aui-avatar>` | User avatar with initials or image. `size`, `square` |
133
+ | `<aui-tooltip>` | Hover tooltip |
134
+ | `<aui-toast>` | Notification toast |
135
+
136
+ ### Navigation
137
+
138
+ | Element | Description |
139
+ |---|---|
140
+ | `<aui-tabs>` | Tab bar with `<aui-tab>` + `<aui-tab-panel>` |
141
+ | `<aui-accordion>` | Collapsible sections with `<aui-accordion-item>` |
142
+ | `<aui-breadcrumb>` | Breadcrumb trail with `<aui-breadcrumb-item>` |
143
+ | `<aui-pagination>` | Page navigation |
144
+ | `<aui-tree>` | Tree view with `<aui-tree-item>` |
145
+
146
+ ### Overlay
147
+
148
+ | Element | Description |
149
+ |---|---|
150
+ | `<aui-dialog>` | Modal dialog. `open`, `size` |
151
+ | `<aui-drawer>` | Slide-out drawer. `open`, `side` |
152
+ | `<aui-command>` | Command palette with `<aui-command-input>`, `<aui-command-list>`, `<aui-command-item>` |
153
+
154
+ ### Data
155
+
156
+ | Element | Description |
157
+ |---|---|
158
+ | `<aui-table>` | Data table with `<aui-table-head>`, `<aui-table-body>`, `<aui-table-row>`, `<aui-table-header>`, `<aui-table-cell>` |
159
+ | `<aui-bar>` | Chart bar element. `label` (CSS tooltip), `highlighted`, `faded` |
160
+ | `<aui-feed>` | Infinite scrolling feed container |
161
+
162
+ ### Agent / Chat
163
+
164
+ | Element | Description |
165
+ |---|---|
166
+ | `<aui-agent-panel>` | Chat panel shell |
167
+ | `<aui-agent-feed>` | Message feed with auto-scroll |
168
+ | `<aui-agent-thread>` | Message group (avatar + bubbles) |
169
+ | `<aui-agent-message>` | Individual message bubble. `role="user\|assistant"`, `status="streaming\|typing\|error"` |
170
+ | `<aui-agent-text>` | Markdown-rendered message content |
171
+ | `<aui-agent-input>` | Chat input area |
172
+ | `<aui-agent-prompt>` | Prompt composer |
173
+ | `<aui-agent-seeds>` | Suggestion chips |
174
+ | `<aui-agent-activity>` | Thinking/loading indicator |
175
+
176
+ ### Graph / Editor
177
+
178
+ | Element | Description |
179
+ |---|---|
180
+ | `<aui-editor>` | Pan/zoom canvas. `background="dots\|grid\|none"`, `min-zoom`, `max-zoom` |
181
+ | `<aui-editor-layer>` | Stacking layer. `name="under\|content\|over\|chrome"`, `type="html\|svg"` |
182
+ | `<aui-graph-ui>` | Graph editor. Extends editor. `connectable`, `snap-to-grid` |
183
+ | `<aui-graph-node>` | Draggable node. `x`, `y`, `node-id` |
184
+ | `<aui-graph-noodle>` | SVG connection. `from="nodeId:portId"`, `to="nodeId:portId"`, `color`, `label`, `animation="stream\|blob"` |
185
+ | `<aui-graph-port>` | Connection endpoint. `port-id`, `side="top\|right\|bottom\|left"`, `type="input\|output"` |
186
+
187
+ ### App Shell
188
+
189
+ | Element | Description |
190
+ |---|---|
191
+ | `<aui-app-shell>` | Full application layout |
192
+ | `<aui-sidebar>` | App sidebar with `<aui-sidebar-header>`, `<aui-sidebar-content>`, `<aui-sidebar-footer>` |
193
+ | `<aui-page>` | Page wrapper with `<aui-page-main>`, `<aui-page-context>` |
194
+
195
+ ## Layout Attributes
196
+
197
+ Semantic HTML attributes for layout — no CSS classes needed.
198
+
199
+ ```html
200
+ <!-- Spacing -->
201
+ <aui-stack gap="4" padding="3">
202
+
203
+ <!-- Width -->
204
+ <aui-field width="full">
205
+ <aui-button width="full">
206
+
207
+ <!-- Flex -->
208
+ <aui-button grow="1" basis="0"> <!-- equal-width buttons -->
209
+ <aui-heading spacer> <!-- flex: 1 1 0% -->
210
+
211
+ <!-- Alignment -->
212
+ <aui-stack direction="row" align-items="center" justify-content="center">
213
+
214
+ <!-- Text -->
215
+ <aui-text text="center" muted size="sm">
216
+
217
+ <!-- Responsive -->
218
+ <div responsive> <!-- enables container-query collapse -->
219
+
220
+ <!-- Sizing tier -->
221
+ <aui-button size="sm">
222
+ <aui-input density="compact">
223
+ ```
224
+
225
+ ## Traits
226
+
227
+ Composable behaviors attached via the `traits` attribute. Work on any HTML element.
228
+
229
+ ```html
230
+ <!-- Drag and drop -->
231
+ <div traits="{ trait: 'drag', selector: '.item', mode: 'slot', axis: 'vertical' }">
232
+ <div class="item">Drag me</div>
233
+ <div class="item">And me</div>
234
+ </div>
235
+
236
+ <!-- Tooltip -->
237
+ <aui-button traits="tooltip" title="Settings">
238
+
239
+ <!-- Keyboard shortcut -->
240
+ <div traits="{ trait: 'shortcut', key: 'mod+k' }">
241
+
242
+ <!-- Multiple traits -->
243
+ <div traits="[{ trait: 'drag', mode: 'free' }, { trait: 'resize' }]">
244
+ ```
245
+
246
+ ### Available Traits
247
+
248
+ **Gesture:** drag, drop-zone, resize, snap-resize, swipe, toss, press-hold, pan-zoom, magnet, flip, ripple
249
+
250
+ **Navigation:** roving-focus, list-navigate, trap-focus, search, selection, range-select
251
+
252
+ **Form:** validate, mention, slash-command, text-trigger, edit, backtick-wrap, link-paste, clipboard, copy
253
+
254
+ **Display:** tooltip, toast, popover, modal, overlay, dismiss, auto-dismiss, collapsible, present, parallax, intersect, confetti, noodle
255
+
256
+ **Data:** sort, virtual-scroll, store, persist, gateway, linked-scroll
257
+
258
+ **Utility:** shortcut, toggle-scheme, toggle-state, hover, css-inspect
259
+
260
+ ## Variants & State
261
+
262
+ Semantic attributes for visual variants — applied directly on elements.
263
+
264
+ ```html
265
+ <!-- Variants -->
266
+ <aui-button primary>
267
+ <aui-button primary accent>
268
+ <aui-button ghost>
269
+ <aui-button scrim>
270
+ <aui-button outline>
271
+
272
+ <!-- Intent colors -->
273
+ <aui-badge success>Online</aui-badge>
274
+ <aui-badge warning>Pending</aui-badge>
275
+ <aui-badge danger>Error</aui-badge>
276
+
277
+ <!-- State -->
278
+ <aui-option active>
279
+ <aui-option selected>
280
+ <aui-button disabled>
281
+ <aui-button loading>
282
+
283
+ <!-- Container kinds -->
284
+ <aui-container kind="card" bordered>
285
+ <aui-container kind="panel" elevation="2">
286
+ <aui-container kind="widget">
287
+ ```
288
+
289
+ ## Examples
290
+
291
+ ### Login form
292
+
293
+ ```html
294
+ <aui-container kind="panel" bordered max-width="md">
295
+ <aui-header>
296
+ <span slot="leading">
297
+ <aui-stack gap="1">
298
+ <aui-heading size="xl">Sign in</aui-heading>
299
+ <aui-text muted size="sm">Enter your credentials</aui-text>
300
+ </aui-stack>
301
+ </span>
302
+ </aui-header>
303
+ <aui-content>
304
+ <aui-inset>
305
+ <aui-stack gap="6">
306
+ <aui-field label="Email" width="full">
307
+ <aui-input type="email" placeholder="you@company.com" width="full"></aui-input>
308
+ </aui-field>
309
+ <aui-field label="Password" width="full">
310
+ <aui-input type="password" placeholder="Enter your password" width="full"></aui-input>
311
+ </aui-field>
312
+ <aui-button primary accent width="full">Sign in</aui-button>
313
+ </aui-stack>
314
+ </aui-inset>
315
+ </aui-content>
316
+ <aui-footer>
317
+ <span slot="content">
318
+ <aui-text muted size="sm">No account? <a href="#">Sign up</a></aui-text>
319
+ </span>
320
+ </aui-footer>
321
+ </aui-container>
322
+ ```
323
+
324
+ ### Chat interface
325
+
326
+ ```html
327
+ <aui-agent-panel style="height: 30rem;">
328
+ <aui-agent-feed auto-scroll scrollable>
329
+ <aui-agent-thread role="user" sender="You">
330
+ <aui-agent-message role="user">
331
+ <aui-agent-text format="plain">How do I structure a color system?</aui-agent-text>
332
+ </aui-agent-message>
333
+ </aui-agent-thread>
334
+ <aui-agent-thread role="assistant" sender="Claude">
335
+ <aui-avatar>C</aui-avatar>
336
+ <aui-agent-message role="assistant">
337
+ <aui-agent-text>Use a **three-layer** approach:
338
+ 1. Primitives — raw OKLCH values
339
+ 2. Semantic tokens — `--ink`, `--fill`, `--border`
340
+ 3. Component tokens — scoped overrides</aui-agent-text>
341
+ </aui-agent-message>
342
+ </aui-agent-thread>
343
+ </aui-agent-feed>
344
+ <aui-agent-input>
345
+ <aui-agent-prompt>
346
+ <aui-textarea placeholder="Ask a question..."></aui-textarea>
347
+ </aui-agent-prompt>
348
+ </aui-agent-input>
349
+ </aui-agent-panel>
350
+ ```
351
+
352
+ ### Graph editor
353
+
354
+ ```html
355
+ <aui-graph-ui connectable style="width: 100%; height: 24rem;">
356
+ <aui-graph-layer name="wires" type="svg">
357
+ <aui-graph-noodle from="src:out" to="dst:in" color="accent" weight="2"></aui-graph-noodle>
358
+ </aui-graph-layer>
359
+ <aui-graph-layer name="content">
360
+ <aui-graph-node x="60" y="70" node-id="src">
361
+ <aui-container kind="card" bordered padding="3">
362
+ <aui-text weight="medium">Source</aui-text>
363
+ <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
364
+ </aui-container>
365
+ </aui-graph-node>
366
+ <aui-graph-node x="340" y="70" node-id="dst">
367
+ <aui-container kind="card" bordered padding="3">
368
+ <aui-text weight="medium">Target</aui-text>
369
+ <aui-graph-port port-id="in" side="left" type="input"></aui-graph-port>
370
+ </aui-container>
371
+ </aui-graph-node>
372
+ </aui-graph-layer>
373
+ </aui-graph-ui>
374
+ ```
375
+
376
+ ## API Documentation (Machine-Readable)
377
+
378
+ Every component, trait, and block has a structured YAML spec with attributes, slots, events, tokens, accessibility, constraints, and examples.
379
+
380
+ ### Single JSON (recommended for LLMs)
381
+
382
+ One fetch gets the full API for all 76 components, 50 traits, and 54 blocks:
383
+
384
+ ```
385
+ https://unpkg.com/@agent-ui-kit/web-components/dist/api.json
386
+ ```
387
+
388
+ ```js
389
+ const api = await fetch('https://unpkg.com/@agent-ui-kit/web-components/dist/api.json').then(r => r.json())
390
+ // api.components — array of component specs
391
+ // api.traits — array of trait specs
392
+ // api.blocks — array of block specs
393
+ ```
394
+
395
+ Each component spec includes:
396
+ - `name`, `tag`, `summary`, `description`
397
+ - `attributes` — all signal-backed attributes with types, defaults, descriptions
398
+ - `presentational` — variant, intent, size, density, radius, state
399
+ - `slots` — named slots with accepted content
400
+ - `events` — emitted events with detail shapes
401
+ - `tokens` — CSS custom properties consumed
402
+ - `a11y` — ARIA roles, keyboard interactions, focus management
403
+ - `constraints` — attribute conflict rules
404
+ - `composition` — valid parent/child relationships
405
+ - `examples` — HTML snippets with descriptions
406
+
407
+ ### Individual YAML files
408
+
409
+ ```
410
+ https://unpkg.com/@agent-ui-kit/web-components/dist/docs/components/button.yaml
411
+ https://unpkg.com/@agent-ui-kit/web-components/dist/docs/traits/drag.yaml
412
+ https://unpkg.com/@agent-ui-kit/web-components/dist/docs/blocks/login-form.yaml
413
+ ```
414
+
415
+ ## Bundle Size
416
+
417
+ | Entry | Gzip |
418
+ |---|---|
419
+ | `agent-ui.css` | 30 KB |
420
+ | `register.js` (all components + traits) | 15 KB |
421
+ | `components.js` (tree-shakeable) | 24 KB |
422
+ | `traits.js` | 25 KB |
423
+ | `components/graph.js` | 4 KB |
424
+ | `components/editor.js` | 2 KB |
425
+ | `components/agent.js` | 10 KB |
426
+
427
+ ## License
428
+
429
+ MIT