@kitn.ai/ui 0.15.0 → 0.16.0

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 (366) hide show
  1. package/README.md +9 -0
  2. package/bin/mcp.js +22 -0
  3. package/dist/bash-InADTalH.js +6 -1
  4. package/dist/components/artifact.d.ts +58 -0
  5. package/dist/components/attachments.d.ts +67 -0
  6. package/dist/components/card-fallback.d.ts +10 -0
  7. package/dist/components/card-renderer.d.ts +13 -0
  8. package/dist/components/card.d.ts +28 -0
  9. package/dist/components/chain-of-thought.d.ts +29 -0
  10. package/dist/components/chat-container.d.ts +19 -0
  11. package/dist/components/chat-scope-picker.d.ts +9 -0
  12. package/dist/components/chat-thread.d.ts +93 -0
  13. package/dist/components/checkpoint.d.ts +20 -0
  14. package/dist/components/choice-card.d.ts +77 -0
  15. package/dist/components/code-block.d.ts +16 -0
  16. package/dist/components/confirm-card.d.ts +57 -0
  17. package/dist/components/context.d.ts +65 -0
  18. package/dist/components/conversation-item.d.ts +8 -0
  19. package/dist/components/conversation-list.d.ts +11 -0
  20. package/dist/components/embed.d.ts +21 -0
  21. package/dist/components/empty.d.ts +43 -0
  22. package/dist/components/feedback-bar.d.ts +45 -0
  23. package/dist/components/file-tree.d.ts +57 -0
  24. package/dist/components/file-upload.d.ts +16 -0
  25. package/dist/components/form-widgets.d.ts +31 -0
  26. package/dist/components/form.d.ts +103 -0
  27. package/dist/components/image.d.ts +12 -0
  28. package/dist/components/link-preview.d.ts +23 -0
  29. package/dist/components/loader.d.ts +60 -0
  30. package/dist/components/markdown.d.ts +8 -0
  31. package/dist/components/message-skills.d.ts +15 -0
  32. package/dist/components/message.d.ts +54 -0
  33. package/dist/components/model-switcher.d.ts +8 -0
  34. package/dist/components/prompt-input.d.ts +38 -0
  35. package/dist/components/prompt-suggestion.d.ts +13 -0
  36. package/dist/components/reasoning.d.ts +20 -0
  37. package/dist/components/response-stream.d.ts +14 -0
  38. package/dist/components/scroll-button.d.ts +7 -0
  39. package/dist/components/slash-command.d.ts +15 -0
  40. package/dist/components/source.d.ts +23 -0
  41. package/dist/components/tasks-card.d.ts +71 -0
  42. package/dist/components/text-shimmer.d.ts +9 -0
  43. package/dist/components/thinking-bar.d.ts +10 -0
  44. package/dist/components/tool.d.ts +16 -0
  45. package/dist/components/use-card-resolution.d.ts +12 -0
  46. package/dist/components/voice-input.d.ts +7 -0
  47. package/dist/core-AYMC6_lb.js +5874 -12
  48. package/dist/css-M7EaDHN_.js +6 -1
  49. package/dist/elements/artifact.d.ts +1 -0
  50. package/dist/elements/attachments.d.ts +1 -0
  51. package/dist/elements/card.d.ts +1 -0
  52. package/dist/elements/cards.d.ts +0 -0
  53. package/dist/elements/chain-of-thought.d.ts +13 -0
  54. package/dist/elements/chat-scope-picker.d.ts +1 -0
  55. package/dist/elements/chat-types.d.ts +41 -0
  56. package/dist/elements/chat-workspace.d.ts +1 -0
  57. package/dist/elements/chat.d.ts +1 -0
  58. package/dist/elements/checkpoint.d.ts +1 -0
  59. package/dist/elements/choice.d.ts +1 -0
  60. package/dist/elements/code-block.d.ts +1 -0
  61. package/dist/elements/confirm-card.d.ts +1 -0
  62. package/dist/elements/context-meter.d.ts +1 -0
  63. package/dist/elements/conversation-list.d.ts +11 -0
  64. package/dist/elements/css.d.ts +1 -0
  65. package/dist/elements/default-input.d.ts +40 -0
  66. package/dist/elements/define.d.ts +42 -0
  67. package/dist/elements/embed.d.ts +1 -0
  68. package/dist/elements/empty.d.ts +1 -0
  69. package/dist/elements/feedback-bar.d.ts +1 -0
  70. package/dist/elements/file-tree.d.ts +1 -0
  71. package/dist/elements/file-upload.d.ts +1 -0
  72. package/dist/elements/form.d.ts +1 -0
  73. package/dist/elements/image.d.ts +1 -0
  74. package/dist/elements/link-preview.d.ts +1 -0
  75. package/dist/elements/loader.d.ts +1 -0
  76. package/dist/elements/markdown.d.ts +1 -0
  77. package/dist/elements/message-skills.d.ts +17 -0
  78. package/dist/elements/message.d.ts +1 -0
  79. package/dist/elements/model-switcher.d.ts +11 -0
  80. package/dist/elements/popover.d.ts +1 -0
  81. package/dist/elements/prompt-input.d.ts +9 -0
  82. package/dist/elements/prompt-suggestions.d.ts +7 -0
  83. package/dist/elements/reasoning.d.ts +1 -0
  84. package/dist/elements/register-impl.d.ts +0 -0
  85. package/dist/elements/register.d.ts +3 -0
  86. package/dist/elements/remote.d.ts +1 -0
  87. package/dist/elements/resizable.d.ts +17 -0
  88. package/dist/elements/response-stream.d.ts +1 -0
  89. package/dist/elements/scroll-button.d.ts +1 -0
  90. package/dist/elements/source.d.ts +18 -0
  91. package/dist/elements/switch.d.ts +1 -0
  92. package/dist/elements/tasks.d.ts +1 -0
  93. package/dist/elements/text-shimmer.d.ts +1 -0
  94. package/dist/elements/thinking-bar.d.ts +1 -0
  95. package/dist/elements/tool.d.ts +1 -0
  96. package/dist/elements/voice-input.d.ts +1 -0
  97. package/dist/elements.d.ts +732 -0
  98. package/dist/engine-javascript-vq0WuIJl.js +2516 -14
  99. package/dist/github-dark-dimmed-DUshB20C.js +4 -1
  100. package/dist/github-light-JYsPkUQd.js +4 -1
  101. package/dist/html-CPZ3oZQ7.js +10 -1
  102. package/dist/index.d.ts +112 -2
  103. package/dist/index.js +13551 -0
  104. package/dist/javascript-C25yR2R2.js +6 -1
  105. package/dist/json-DxJze_jm.js +6 -1
  106. package/dist/kitn-chat.es.js +1 -77
  107. package/dist/llms/llms-full.txt +1 -1
  108. package/dist/llms/llms.txt +1 -1
  109. package/dist/mcp.es.js +2140 -0
  110. package/dist/primitives/card-contract.d.ts +103 -0
  111. package/dist/primitives/card-host.d.ts +12 -0
  112. package/dist/primitives/card-registry.d.ts +17 -0
  113. package/dist/primitives/card-resolution.d.ts +8 -0
  114. package/dist/primitives/card-routing.d.ts +12 -0
  115. package/dist/primitives/card-validate.d.ts +25 -0
  116. package/dist/primitives/chat-config.d.ts +31 -0
  117. package/dist/primitives/controllable.d.ts +13 -0
  118. package/dist/primitives/embed-providers.d.ts +65 -0
  119. package/dist/primitives/highlighter.d.ts +23 -0
  120. package/dist/primitives/link-preview.d.ts +47 -0
  121. package/dist/primitives/pdf-preview.d.ts +50 -0
  122. package/dist/primitives/use-auto-resize.d.ts +8 -0
  123. package/dist/primitives/use-resize-observer.d.ts +1 -0
  124. package/dist/primitives/use-stick-to-bottom.d.ts +5 -0
  125. package/dist/primitives/use-text-stream.d.ts +19 -0
  126. package/dist/primitives/use-voice-recorder.d.ts +9 -0
  127. package/dist/react/index.d.ts +1118 -0
  128. package/dist/react/runtime.d.ts +15 -0
  129. package/dist/react.js +265 -0
  130. package/dist/register-impl-wCsFPoh9.js +77 -0
  131. package/dist/register-ujhr1nBS.js +1 -0
  132. package/dist/remote/host-embed.d.ts +33 -0
  133. package/dist/remote/index.d.ts +2 -0
  134. package/dist/remote/origin.d.ts +5 -0
  135. package/dist/remote/provider-runtime.d.ts +27 -0
  136. package/dist/remote/provider.d.ts +2 -0
  137. package/dist/remote/validate.d.ts +4 -0
  138. package/dist/remote/version.d.ts +4 -0
  139. package/dist/remote/wire.d.ts +53 -0
  140. package/dist/svelte--5p79yCD.js +15 -1
  141. package/dist/tsx-B8rCNbgL.js +6 -1
  142. package/dist/types.d.ts +42 -0
  143. package/dist/typescript-RycA9KXf.js +6 -1
  144. package/dist/ui/action-icons.d.ts +11 -0
  145. package/dist/ui/avatar.d.ts +8 -0
  146. package/dist/ui/badge.d.ts +9 -0
  147. package/dist/ui/button.d.ts +10 -0
  148. package/dist/ui/collapsible.d.ts +27 -0
  149. package/dist/ui/dropdown.d.ts +20 -0
  150. package/dist/ui/hover-card.d.ts +28 -0
  151. package/dist/ui/overlay.d.ts +67 -0
  152. package/dist/ui/popover.d.ts +32 -0
  153. package/dist/ui/resizable.d.ts +76 -0
  154. package/dist/ui/scroll-area.d.ts +5 -0
  155. package/dist/ui/separator.d.ts +5 -0
  156. package/dist/ui/skeleton.d.ts +5 -0
  157. package/dist/ui/switch.d.ts +19 -0
  158. package/dist/ui/textarea.d.ts +6 -0
  159. package/dist/ui/tooltip.d.ts +8 -0
  160. package/dist/utils/cn.d.ts +2 -0
  161. package/dist/vue-BmIZj4XD.js +33 -1
  162. package/frameworks/react/index.tsx +4 -0
  163. package/frameworks/react/runtime.tsx +16 -2
  164. package/llms-full.txt +1 -1
  165. package/llms.txt +1 -1
  166. package/package.json +29 -11
  167. package/src/agent-tooling/archetypes.ts +46 -0
  168. package/src/agent-tooling/integrations/cloudflare.ts +88 -0
  169. package/src/agent-tooling/integrations/langgraph.ts +60 -0
  170. package/src/agent-tooling/integrations/mastra.ts +27 -0
  171. package/src/agent-tooling/integrations/mock.ts +34 -0
  172. package/src/agent-tooling/integrations/ollama.ts +47 -0
  173. package/src/agent-tooling/integrations/openrouter.ts +26 -0
  174. package/src/agent-tooling/integrations/pi.ts +40 -0
  175. package/src/agent-tooling/integrations/pydantic-ai.ts +52 -0
  176. package/src/agent-tooling/integrations/vercel-ai-sdk.ts +44 -0
  177. package/src/agent-tooling/mcp/manifest.ts +128 -0
  178. package/src/agent-tooling/mcp/server.ts +59 -0
  179. package/src/agent-tooling/mcp/stdio.ts +18 -0
  180. package/src/agent-tooling/mcp/tools/debug.ts +305 -0
  181. package/src/agent-tooling/mcp/tools/reference.ts +132 -0
  182. package/src/agent-tooling/mcp/tools/scaffold.ts +1627 -0
  183. package/src/agent-tooling/mcp/tools/theme.ts +340 -0
  184. package/src/agent-tooling/mcp/tools/types.ts +14 -0
  185. package/src/agent-tooling/registry.ts +41 -0
  186. package/src/agent-tooling/types.ts +30 -0
  187. package/src/elements/compiled.css +1 -1
  188. package/src/elements/define.tsx +7 -1
  189. package/src/elements/element-types.d.ts +2 -1
  190. package/src/elements/register-impl.ts +55 -0
  191. package/src/elements/register.ts +17 -51
  192. package/theme.css +4 -2
  193. package/src/components/artifact.stories.tsx +0 -138
  194. package/src/components/attachments.stories.tsx +0 -303
  195. package/src/components/attachments.test.tsx +0 -64
  196. package/src/components/chain-of-thought.stories.tsx +0 -211
  197. package/src/components/chat-container.stories.tsx +0 -187
  198. package/src/components/chat-thread.test.tsx +0 -58
  199. package/src/components/checkpoint.stories.tsx +0 -102
  200. package/src/components/code-block.stories.tsx +0 -150
  201. package/src/components/confirm-card.stories.tsx +0 -74
  202. package/src/components/context.stories.tsx +0 -229
  203. package/src/components/context.test.tsx +0 -133
  204. package/src/components/conversation-item.stories.tsx +0 -125
  205. package/src/components/conversation-list.stories.tsx +0 -133
  206. package/src/components/default-input.test.tsx +0 -111
  207. package/src/components/empty.stories.tsx +0 -434
  208. package/src/components/feedback-bar.stories.tsx +0 -138
  209. package/src/components/feedback-bar.test.tsx +0 -103
  210. package/src/components/file-tree.stories.tsx +0 -73
  211. package/src/components/file-upload.stories.tsx +0 -156
  212. package/src/components/image.stories.tsx +0 -89
  213. package/src/components/loader.stories.tsx +0 -181
  214. package/src/components/markdown.stories.tsx +0 -180
  215. package/src/components/message-action-bar.test.tsx +0 -128
  216. package/src/components/message-narrow.stories.tsx +0 -329
  217. package/src/components/message-skills.stories.tsx +0 -211
  218. package/src/components/message.stories.tsx +0 -281
  219. package/src/components/model-switcher.stories.tsx +0 -123
  220. package/src/components/model-switcher.test.tsx +0 -65
  221. package/src/components/prompt-input.stories.tsx +0 -222
  222. package/src/components/prompt-suggestion.stories.tsx +0 -142
  223. package/src/components/reasoning.stories.tsx +0 -140
  224. package/src/components/resizable.test.tsx +0 -226
  225. package/src/components/scroll-button.stories.tsx +0 -100
  226. package/src/components/slash-command.stories.tsx +0 -163
  227. package/src/components/source-list.test.tsx +0 -152
  228. package/src/components/source.stories.tsx +0 -124
  229. package/src/components/tasks-card.stories.tsx +0 -78
  230. package/src/components/text-shimmer.stories.tsx +0 -87
  231. package/src/components/thinking-bar.stories.tsx +0 -87
  232. package/src/components/tool.stories.tsx +0 -153
  233. package/src/components/voice-input.stories.tsx +0 -83
  234. package/src/elements/artifact.stories.tsx +0 -506
  235. package/src/elements/attachments.stories.tsx +0 -190
  236. package/src/elements/card.stories.tsx +0 -113
  237. package/src/elements/cards.stories.tsx +0 -59
  238. package/src/elements/catalog.stories.tsx +0 -491
  239. package/src/elements/chain-of-thought.declarative.test.tsx +0 -153
  240. package/src/elements/chain-of-thought.stories.tsx +0 -113
  241. package/src/elements/chat-scope-picker.stories.tsx +0 -73
  242. package/src/elements/chat-workspace.stories.tsx +0 -288
  243. package/src/elements/chat.stories.tsx +0 -151
  244. package/src/elements/checkpoint.stories.tsx +0 -72
  245. package/src/elements/choice.stories.tsx +0 -240
  246. package/src/elements/code-block.stories.tsx +0 -83
  247. package/src/elements/composed-shell.stories.tsx +0 -316
  248. package/src/elements/confirm-card.stories.tsx +0 -227
  249. package/src/elements/context-meter.stories.tsx +0 -151
  250. package/src/elements/conversation-list.declarative.test.tsx +0 -137
  251. package/src/elements/conversation-list.stories.tsx +0 -243
  252. package/src/elements/embed.stories.tsx +0 -213
  253. package/src/elements/empty.stories.tsx +0 -111
  254. package/src/elements/feedback-bar.stories.tsx +0 -114
  255. package/src/elements/file-tree.stories.tsx +0 -134
  256. package/src/elements/file-upload.stories.tsx +0 -82
  257. package/src/elements/form.stories.tsx +0 -248
  258. package/src/elements/image.stories.tsx +0 -71
  259. package/src/elements/link-preview.stories.tsx +0 -209
  260. package/src/elements/loader.stories.tsx +0 -88
  261. package/src/elements/markdown.stories.tsx +0 -76
  262. package/src/elements/message-skills.declarative.test.tsx +0 -104
  263. package/src/elements/message-skills.stories.tsx +0 -114
  264. package/src/elements/message.stories.tsx +0 -218
  265. package/src/elements/model-switcher.declarative.test.tsx +0 -130
  266. package/src/elements/model-switcher.stories.tsx +0 -198
  267. package/src/elements/popover.stories.tsx +0 -80
  268. package/src/elements/prompt-input-slash-command.test.tsx +0 -128
  269. package/src/elements/prompt-input-stoppable.test.tsx +0 -88
  270. package/src/elements/prompt-input-toolbar-actions.test.tsx +0 -120
  271. package/src/elements/prompt-input.stories.tsx +0 -331
  272. package/src/elements/prompt-suggestions.declarative.test.tsx +0 -164
  273. package/src/elements/prompt-suggestions.stories.tsx +0 -213
  274. package/src/elements/reasoning.stories.tsx +0 -77
  275. package/src/elements/remote.stories.tsx +0 -314
  276. package/src/elements/resizable.stories.tsx +0 -426
  277. package/src/elements/response-stream.stories.tsx +0 -79
  278. package/src/elements/scroll-button.stories.tsx +0 -202
  279. package/src/elements/scroll-button.test.tsx +0 -148
  280. package/src/elements/source-list.stories.tsx +0 -143
  281. package/src/elements/source.stories.tsx +0 -88
  282. package/src/elements/switch.stories.tsx +0 -56
  283. package/src/elements/tasks.stories.tsx +0 -237
  284. package/src/elements/text-shimmer.stories.tsx +0 -64
  285. package/src/elements/thinking-bar.stories.tsx +0 -72
  286. package/src/elements/tool.stories.tsx +0 -89
  287. package/src/elements/voice-input.stories.tsx +0 -88
  288. package/src/primitives/controllable.test.ts +0 -47
  289. package/src/stories/chat-panel-layout.stories.tsx +0 -145
  290. package/src/stories/chat-scene.tsx +0 -571
  291. package/src/stories/checkpoint-restore.stories.tsx +0 -256
  292. package/src/stories/context-usage.stories.tsx +0 -212
  293. package/src/stories/conversation-with-reasoning.stories.tsx +0 -182
  294. package/src/stories/conversation-with-sources.stories.tsx +0 -471
  295. package/src/stories/docs/Accessibility.mdx +0 -119
  296. package/src/stories/docs/ChildElements.mdx +0 -269
  297. package/src/stories/docs/ForAIAgents.mdx +0 -162
  298. package/src/stories/docs/GettingStarted.mdx +0 -65
  299. package/src/stories/docs/Installation.mdx +0 -83
  300. package/src/stories/docs/Introduction.mdx +0 -50
  301. package/src/stories/docs/SolidJsAdvanced.mdx +0 -17
  302. package/src/stories/docs/Theming.mdx +0 -85
  303. package/src/stories/docs/element-controls.ts +0 -121
  304. package/src/stories/docs/frameworks/Angular.mdx +0 -245
  305. package/src/stories/docs/frameworks/Html.mdx +0 -227
  306. package/src/stories/docs/frameworks/Overview.mdx +0 -47
  307. package/src/stories/docs/frameworks/React.mdx +0 -227
  308. package/src/stories/docs/frameworks/Solid.mdx +0 -173
  309. package/src/stories/docs/frameworks/Svelte.mdx +0 -194
  310. package/src/stories/docs/frameworks/Vue.mdx +0 -238
  311. package/src/stories/docs/generative-ui-overview.mdx +0 -186
  312. package/src/stories/docs/recipes/SpeechToText.mdx +0 -7
  313. package/src/stories/docs/recipes/Streaming.mdx +0 -68
  314. package/src/stories/docs/recipes/TextToSpeech.mdx +0 -35
  315. package/src/stories/docs/theme-editor/canvas.tsx +0 -32
  316. package/src/stories/docs/theme-editor/inspector.tsx +0 -66
  317. package/src/stories/docs/theme-editor/presets.test.ts +0 -32
  318. package/src/stories/docs/theme-editor/presets.ts +0 -64
  319. package/src/stories/docs/theme-editor/theme-css.test.ts +0 -19
  320. package/src/stories/docs/theme-editor/theme-css.ts +0 -15
  321. package/src/stories/docs/theme-editor/theme-editor.tsx +0 -146
  322. package/src/stories/docs/theme-tokens.tsx +0 -174
  323. package/src/stories/examples/ChoosingComponents.mdx +0 -106
  324. package/src/stories/examples/sample-data.ts +0 -79
  325. package/src/stories/examples/usage/checkpoint-restore.ts +0 -156
  326. package/src/stories/examples/usage/context-usage.ts +0 -591
  327. package/src/stories/examples/usage/conversation-with-reasoning.ts +0 -224
  328. package/src/stories/examples/usage/conversation-with-sources.ts +0 -589
  329. package/src/stories/examples/usage/empty-state.ts +0 -144
  330. package/src/stories/examples/usage/full-chat-app.ts +0 -277
  331. package/src/stories/examples/usage/index.ts +0 -63
  332. package/src/stories/examples/usage/message-actions.ts +0 -704
  333. package/src/stories/examples/usage/pattern-centered-conversation.ts +0 -446
  334. package/src/stories/examples/usage/pattern-chat-panel-layout.ts +0 -442
  335. package/src/stories/examples/usage/pattern-docked-widget.ts +0 -479
  336. package/src/stories/examples/usage/prompt-input-variants.ts +0 -1356
  337. package/src/stories/examples/usage/streaming-response.ts +0 -687
  338. package/src/stories/examples/usage/types.ts +0 -33
  339. package/src/stories/full-chat.stories.tsx +0 -18
  340. package/src/stories/message-actions.stories.tsx +0 -230
  341. package/src/stories/pattern-centered-conversation.stories.tsx +0 -93
  342. package/src/stories/pattern-docked-widget.stories.tsx +0 -93
  343. package/src/stories/pattern-empty-state.stories.tsx +0 -76
  344. package/src/stories/prompt-input-variants.stories.tsx +0 -456
  345. package/src/stories/streaming-response.stories.tsx +0 -438
  346. package/src/stories/theme-editor.stories.tsx +0 -16
  347. package/src/stories/token-reference.stories.tsx +0 -18
  348. package/src/stories/typography.stories.tsx +0 -78
  349. package/src/ui/avatar.stories.tsx +0 -103
  350. package/src/ui/badge.stories.tsx +0 -86
  351. package/src/ui/button.stories.tsx +0 -145
  352. package/src/ui/collapsible.stories.tsx +0 -69
  353. package/src/ui/dropdown.stories.tsx +0 -59
  354. package/src/ui/hover-card.stories.tsx +0 -77
  355. package/src/ui/hover-card.test.tsx +0 -30
  356. package/src/ui/overlay.stories.tsx +0 -115
  357. package/src/ui/popover.stories.tsx +0 -81
  358. package/src/ui/popover.test.tsx +0 -99
  359. package/src/ui/resizable.stories.tsx +0 -236
  360. package/src/ui/scroll-area.stories.tsx +0 -50
  361. package/src/ui/separator.stories.tsx +0 -81
  362. package/src/ui/skeleton.stories.tsx +0 -337
  363. package/src/ui/switch.stories.tsx +0 -51
  364. package/src/ui/switch.test.tsx +0 -59
  365. package/src/ui/textarea.stories.tsx +0 -76
  366. package/src/ui/tooltip.stories.tsx +0 -74
package/src/elements/composed-shell.stories.tsx DELETED
@@ -1,316 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal, onMount, For, type JSX } from 'solid-js';
3
- import './register'; // side effect: registers the custom elements
4
- import {
5
- conversations,
6
- context,
7
- models,
8
- slashCommands,
9
- thread,
10
- } from '../stories/examples/sample-data';
11
- import type { ArtifactFile } from '../components/artifact';
12
-
13
- /**
14
- * Examples / Composed chat shell — THE headline. A real chat assembled from leaf
15
- * `kai-*` components inside a `<kai-resizable>` layout, wired with sample data +
16
- * event handlers in the story script. Paired with the `<kai-chat>` drop-in so the
17
- * "batteries-included vs compose-your-own — when do I use which?" contrast is
18
- * explicit. Both stories are source-visible (Show code).
19
- */
20
-
21
- type AnyEl = HTMLElement & Record<string, unknown>;
22
- /** Set JS properties (objects/arrays) on an element. */
23
- const setProps = (el: HTMLElement, props: Record<string, unknown>) => {
24
- for (const k in props) (el as AnyEl)[k] = props[k];
25
- };
26
- /** Set string/boolean attributes on an element. */
27
- const setAttrs = (el: HTMLElement, a: Record<string, string | boolean>) => {
28
- for (const k in a) {
29
- const v = a[k];
30
- if (v === false) el.removeAttribute(k);
31
- else el.setAttribute(k, v === true ? '' : v);
32
- }
33
- };
34
-
35
- const BASE = new URL('artifact-fixtures', document.baseURI).href; // served by .storybook/main.ts staticDirs
36
-
37
- const ARTIFACT_FILES: ArtifactFile[] = [
38
- {
39
- path: 'index.html',
40
- url: `${BASE}/index.html`,
41
- type: 'html',
42
- language: 'html',
43
- code: '<!DOCTYPE html>\n<html><head><title>Starboard</title></head>\n<body><h1>Starboard</h1></body></html>',
44
- },
45
- { path: 'css/site.css', url: `${BASE}/css/site.css`, type: 'other', language: 'css', code: 'body { font-family: system-ui; }' },
46
- { path: 'assets/logo.svg', url: `${BASE}/assets/logo.svg`, type: 'image' },
47
- ];
48
-
49
- /** A bordered frame the shell fills. */
50
- function Frame(props: { children: JSX.Element; height?: string }) {
51
- return (
52
- <div
53
- style={{
54
- height: props.height ?? '560px',
55
- width: '100%',
56
- border: '1px solid var(--color-border, #e4e4e7)',
57
- 'border-radius': '12px',
58
- overflow: 'hidden',
59
- }}
60
- >
61
- {props.children}
62
- </div>
63
- );
64
- }
65
-
66
- const meta = {
67
- title: 'Examples/Composed chat shell',
68
- parameters: {
69
- layout: 'padded',
70
- docs: {
71
- description: {
72
- component: [
73
- '# Build your own chat',
74
- 'Two ways to ship a chat, side by side:',
75
- '- **Compose your own** (`Composed shell`) — a `<kai-resizable>` laying out `<kai-conversations>` │ a chat column (`<kai-message>` list + `<kai-context>` meter + `<kai-prompt-input>` + `<kai-suggestions>`) │ `<kai-artifact>`. You own the data flow and event wiring; you control every panel. **Reach for this when the flagship doesn\'t fit** — custom layout, an inspector/canvas panel, bespoke header.',
76
- '- **Batteries-included** (`Drop-in <kai-chat>`) — the whole chat surface in one tag. Set `messages`, listen for `submit`. **Reach for this for the 90% path** — a working chat in minutes.',
77
- 'Same leaf components underneath; the flagship just pre-wires them. See **Examples / Choosing components** for the full decision guide.',
78
- 'Both stories are source-visible — open **Show code** to read the exact composition + wiring.',
79
- ].join('\n\n'),
80
- },
81
- },
82
- },
83
- } satisfies Meta;
84
-
85
- export default meta;
86
- type Story = StoryObj;
87
-
88
- // ── B1 · Composed shell ──────────────────────────────────────────────────────
89
-
90
- const SHELL_SNIPPET = `<!-- Compose-your-own chat: a resizable shell built from leaf components -->
91
- <kai-resizable orientation="horizontal" style="display:block;height:560px">
92
- <!-- start: conversation list -->
93
- <kai-resizable-item size="22%" min="180px" max="40%">
94
- <kai-conversations id="list" style="display:block;height:100%"></kai-conversations>
95
- </kai-resizable-item>
96
-
97
- <!-- main: the chat column (scrolling messages + meter + composer) -->
98
- <kai-resizable-item>
99
- <div class="chat-col">
100
- <div class="messages" id="messages"></div> <!-- <kai-message> per turn -->
101
- <kai-context id="ctx"></kai-context>
102
- <kai-suggestions id="suggs"></kai-suggestions>
103
- <kai-prompt-input id="input" search voice></kai-prompt-input>
104
- </div>
105
- </kai-resizable-item>
106
-
107
- <!-- end: artifact/preview panel (toggle with the 'hidden' attribute) -->
108
- <kai-resizable-item size="32%" min="240px">
109
- <kai-artifact id="artifact" style="display:block;height:100%"></kai-artifact>
110
- </kai-resizable-item>
111
- </kai-resizable>
112
-
113
- <script type="module">
114
- import '@kitn.ai/ui/elements';
115
-
116
- // — data in via properties —
117
- const list = document.getElementById('list');
118
- list.conversations = [/* … */];
119
- list.activeId = 'c1';
120
-
121
- const ctx = document.getElementById('ctx');
122
- ctx.context = { usedTokens: 48200, maxTokens: 200000 };
123
-
124
- const suggs = document.getElementById('suggs');
125
- suggs.suggestions = ['Summarize this thread', 'What changed in v0.3?'];
126
-
127
- const input = document.getElementById('input');
128
- input.slashCommands = [{ id: 'summarize', label: '/summarize', category: 'Actions' }];
129
-
130
- const artifact = document.getElementById('artifact');
131
- artifact.src = 'https://your-backend.example/artifacts/abc/index.html';
132
- artifact.files = [{ path: 'index.html', url: '…', type: 'html', code: '…' }];
133
-
134
- // render the message list yourself (you own the thread state)
135
- const messages = document.getElementById('messages');
136
- let thread = [/* { id, role, content, … } */];
137
- const render = () => {
138
- messages.innerHTML = '';
139
- for (const m of thread) {
140
- const el = document.createElement('kai-message');
141
- el.message = m;
142
- messages.append(el);
143
- }
144
- };
145
- render();
146
-
147
- // — interactions out via events —
148
- list.addEventListener('kai-select', (e) => (list.activeId = e.detail.id));
149
- suggs.addEventListener('kai-select', (e) => (input.value = e.detail.value));
150
- input.addEventListener('kai-submit', (e) => {
151
- thread = [...thread, { id: Date.now() + '', role: 'user', content: e.detail.value }];
152
- render();
153
- // …call your backend, append the assistant reply, re-render…
154
- });
155
- </script>`;
156
-
157
- export const ComposedShell: Story = {
158
- name: 'Composed shell',
159
- render: () => {
160
- const [messages, setMessages] = createSignal<Record<string, unknown>[]>(thread);
161
- let list!: HTMLElement, ctx!: HTMLElement, suggs!: HTMLElement, input!: HTMLElement, artifact!: HTMLElement;
162
- const msgRefs: HTMLElement[] = [];
163
-
164
- onMount(() => {
165
- setProps(list, { conversations, activeId: 'c1' });
166
- list.addEventListener('kai-select', (e) => ((list as AnyEl).activeId = (e as CustomEvent).detail.id));
167
- setProps(ctx, { context });
168
- setProps(suggs, { suggestions: ['Summarize this thread', 'What changed in v0.3?', 'Show me the layout code'] });
169
- suggs.addEventListener('kai-select', (e) => ((input as AnyEl).value = (e as CustomEvent).detail.value));
170
- setProps(input, { slashCommands });
171
- setAttrs(input, { search: true, voice: true, placeholder: 'Message the assistant…' });
172
- input.addEventListener('kai-submit', (e) => {
173
- const value = (e as unknown as CustomEvent).detail.value as string;
174
- if (!value) return;
175
- setMessages((m) => [...m, { id: Date.now() + '', role: 'user', content: value }]);
176
- (input as AnyEl).value = '';
177
- setTimeout(() => {
178
- setMessages((m) => [
179
- ...m,
180
- { id: Date.now() + 'a', role: 'assistant', content: 'Echo: ' + value, actions: ['copy'] },
181
- ]);
182
- }, 500);
183
- });
184
- setProps(artifact, { src: `${BASE}/index.html`, files: ARTIFACT_FILES });
185
- setAttrs(artifact, { 'iframe-title': 'Artifact preview' });
186
- });
187
-
188
- // Keep each <kai-message>'s `message` property in sync as the thread grows.
189
- const syncMessages = () => {
190
- const list = messages();
191
- list.forEach((m, i) => {
192
- if (msgRefs[i]) (msgRefs[i] as AnyEl).message = m;
193
- });
194
- };
195
-
196
- return (
197
- <Frame>
198
- <kai-resizable orientation="horizontal">
199
- <kai-resizable-item size="22%" min="180px" max="40%">
200
- <kai-conversations ref={(e) => (list = e)} style={{ display: 'block', height: '100%' }} />
201
- </kai-resizable-item>
202
-
203
- <kai-resizable-item>
204
- <div style={{ height: '100%', display: 'flex', 'flex-direction': 'column', 'min-height': '0' }}>
205
- <div
206
- style={{
207
- flex: '1',
208
- 'min-height': '0',
209
- 'overflow-y': 'auto',
210
- padding: '16px',
211
- display: 'flex',
212
- 'flex-direction': 'column',
213
- gap: '12px',
214
- }}
215
- >
216
- <For each={messages()}>
217
- {(m, i) => (
218
- <kai-message
219
- ref={(e) => {
220
- msgRefs[i()] = e;
221
- (e as AnyEl).message = m;
222
- queueMicrotask(syncMessages);
223
- }}
224
- />
225
- )}
226
- </For>
227
- </div>
228
- <div
229
- style={{
230
- 'border-top': '1px solid var(--color-border, #e4e4e7)',
231
- padding: '12px 16px',
232
- display: 'flex',
233
- 'flex-direction': 'column',
234
- gap: '8px',
235
- }}
236
- >
237
- <kai-context ref={(e) => (ctx = e)} />
238
- <kai-suggestions ref={(e) => (suggs = e)} />
239
- <kai-prompt-input ref={(e) => (input = e)} />
240
- </div>
241
- </div>
242
- </kai-resizable-item>
243
-
244
- <kai-resizable-item size="32%" min="240px">
245
- <kai-artifact ref={(e) => (artifact = e)} style={{ display: 'block', height: '100%' }} />
246
- </kai-resizable-item>
247
- </kai-resizable>
248
- </Frame>
249
- );
250
- },
251
- parameters: { docs: { source: { code: SHELL_SNIPPET, language: 'html' } } },
252
- };
253
-
254
- // ── B2 · Drop-in <kai-chat> ───────────────────────────────────────────────────
255
-
256
- const DROPIN_SNIPPET = `<!-- Batteries-included: the whole chat surface in one tag -->
257
- <kai-chat id="chat" chat-title="Assistant" search voice
258
- style="display:block;height:560px"></kai-chat>
259
-
260
- <script type="module">
261
- import '@kitn.ai/ui/elements';
262
-
263
- const chat = document.getElementById('chat');
264
- chat.models = [{ id: 'opus', name: 'Claude Opus', provider: 'Anthropic' }];
265
- chat.currentModel = 'opus';
266
- chat.context = { usedTokens: 48200, maxTokens: 200000 };
267
- chat.suggestions = ['Summarize this thread', 'What changed in v0.3?'];
268
- chat.messages = [
269
- { id: '1', role: 'assistant', content: "Hi! I'm the drop-in <kai-chat>. Ask me anything.",
270
- actions: ['copy', 'like', 'dislike'] },
271
- ];
272
-
273
- chat.addEventListener('kai-submit', (e) => {
274
- chat.messages = [...chat.messages, { id: Date.now() + '', role: 'user', content: e.detail.value }];
275
- chat.loading = true;
276
- // …call your backend, then append the reply and clear loading…
277
- });
278
- chat.addEventListener('kai-model-change', (e) => (chat.currentModel = e.detail.modelId));
279
- </script>`;
280
-
281
- export const DropInChat: Story = {
282
- name: 'Drop-in <kai-chat>',
283
- render: () => {
284
- let chat!: HTMLElement;
285
- onMount(() => {
286
- setProps(chat, {
287
- models,
288
- currentModel: 'opus',
289
- context,
290
- suggestions: ['Summarize this thread', 'What changed in v0.3?'],
291
- messages: [
292
- { id: '1', role: 'assistant', content: "Hi! I'm the **drop-in** `<kai-chat>`. Ask me anything.", actions: ['copy', 'like', 'dislike'] },
293
- ],
294
- });
295
- setAttrs(chat, { 'chat-title': 'Assistant', search: true, voice: true });
296
- chat.addEventListener('kai-submit', (e) => {
297
- const value = (e as unknown as CustomEvent).detail.value as string;
298
- const cur = (chat as AnyEl).messages as unknown[];
299
- (chat as AnyEl).messages = [...cur, { id: Date.now() + '', role: 'user', content: value }];
300
- (chat as AnyEl).loading = true;
301
- setTimeout(() => {
302
- const cur2 = (chat as AnyEl).messages as unknown[];
303
- (chat as AnyEl).messages = [...cur2, { id: Date.now() + 'a', role: 'assistant', content: 'Echo: ' + value, actions: ['copy'] }];
304
- (chat as AnyEl).loading = false;
305
- }, 600);
306
- });
307
- chat.addEventListener('kai-model-change', (e) => ((chat as AnyEl).currentModel = (e as CustomEvent).detail.modelId));
308
- });
309
- return (
310
- <Frame>
311
- <kai-chat ref={(e) => (chat = e)} style={{ display: 'block', height: '100%' }} />
312
- </Frame>
313
- );
314
- },
315
- parameters: { docs: { source: { code: DROPIN_SNIPPET, language: 'html' } } },
316
- };
package/src/elements/confirm-card.stories.tsx DELETED
@@ -1,227 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal, onMount, type JSX } from 'solid-js';
3
- import './confirm-card';
4
- import { argTypesFor, specDescription } from '../stories/docs/element-controls';
5
- import type { ConfirmCardData } from '../components/confirm-card';
6
- import type { CardEvent } from '../primitives/card-contract';
7
-
8
- declare module 'solid-js' {
9
- // eslint-disable-next-line @typescript-eslint/no-namespace
10
- namespace JSX {
11
- interface IntrinsicElements {
12
- 'kai-confirm': JSX.HTMLAttributes<HTMLElement> & {
13
- heading?: string;
14
- 'card-id'?: string;
15
- ref?: (el: HTMLElement) => void;
16
- };
17
- }
18
- }
19
- }
20
-
21
- type ConfirmEl = HTMLElement & { data?: ConfirmCardData; resolution?: Record<string, unknown> };
22
-
23
- function Frame(props: { children: JSX.Element }) {
24
- return <div style={{ 'max-width': '460px' }}>{props.children}</div>;
25
- }
26
-
27
- /** Mounts a <kai-confirm>, sets `.data`, logs the emitted CardEvent under the render. */
28
- function ConfirmDemo(props: { def: ConfirmCardData; cardId: string; heading?: string }) {
29
- const [log, setLog] = createSignal<CardEvent[]>([]);
30
- let el: ConfirmEl | undefined;
31
- onMount(() => {
32
- if (!el) return;
33
- el.data = props.def;
34
- el.addEventListener('kai-card', (e) => {
35
- const detail = (e as CustomEvent<CardEvent>).detail;
36
- setLog((prev) => [...prev, detail]);
37
- });
38
- });
39
- return (
40
- <Frame>
41
- <div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
42
- <kai-confirm ref={(e) => (el = e as ConfirmEl)} card-id={props.cardId} heading={props.heading} />
43
- <pre
44
- style={{
45
- margin: 0,
46
- 'max-height': '180px',
47
- overflow: 'auto',
48
- background: 'var(--color-muted, #f4f4f5)',
49
- 'border-radius': '8px',
50
- padding: '8px',
51
- 'font-size': '12px',
52
- }}
53
- >
54
- {log().length === 0 ? '// emitted CardEvents appear here' : JSON.stringify(log(), null, 2)}
55
- </pre>
56
- </div>
57
- </Frame>
58
- );
59
- }
60
-
61
- const APPROVE: ConfirmCardData = {
62
- body: 'This will apply 3 pending migrations to production. This cannot be undone.',
63
- tone: 'warning',
64
- actions: [
65
- { id: 'approve', label: 'Run migration', style: 'primary', default: true },
66
- { id: 'reject', label: 'Cancel' },
67
- ],
68
- };
69
-
70
- const DESTRUCTIVE: ConfirmCardData = {
71
- body: 'Permanently delete 12 files from the workspace? This cannot be undone.',
72
- tone: 'danger',
73
- actions: [
74
- { id: 'delete', label: 'Delete files', style: 'destructive', default: true },
75
- { id: 'cancel', label: 'Keep them' },
76
- ],
77
- };
78
-
79
- const CHOICES: ConfirmCardData = {
80
- heading: 'Where should I deploy?',
81
- body: 'Pick a target environment for this build.',
82
- actions: [
83
- { id: 'staging', label: 'Staging', default: true },
84
- { id: 'preview', label: 'Preview' },
85
- { id: 'prod', label: 'Production', style: 'primary' },
86
- ],
87
- };
88
-
89
- const DISMISSIBLE: ConfirmCardData = {
90
- body: 'Send the drafted email to the customer?',
91
- dismissible: true,
92
- actions: [
93
- { id: 'send', label: 'Send', style: 'primary', default: true },
94
- { id: 'edit', label: 'Edit first' },
95
- ],
96
- };
97
-
98
- const HEADING_MAP: Record<string, string | undefined> = {
99
- 'card-approve': 'Run database migration?',
100
- 'card-delete': 'Delete files?',
101
- 'card-deploy': undefined,
102
- 'card-send': 'Send email?',
103
- };
104
-
105
- const HTML_SNIPPET = (def: ConfirmCardData, cardId: string) => {
106
- const heading = HEADING_MAP[cardId];
107
- return `<kai-confirm${heading ? ` heading="${heading}"` : ''}></kai-confirm>
108
- <script type="module">
109
- import '@kitn.ai/ui/elements'; // registers the custom elements
110
-
111
- const el = document.querySelector('kai-confirm');
112
- // \`data\` is the CardEnvelope.data (set as a property).
113
- el.data = ${JSON.stringify(def, null, 2)};
114
-
115
- // Cards bubble ONE \`kai-card\` CustomEvent carrying a typed CardEvent.
116
- el.addEventListener('kai-card', (e) => {
117
- const ev = e.detail; // { kind:'action', cardId, action, payload? } | { kind:'dismiss', ... } | ...
118
- if (ev.kind === 'action') console.log('chose', ev.action);
119
- });
120
- </script>`;
121
- };
122
-
123
- const meta = {
124
- title: 'Generative UI/Cards/kai-confirm',
125
- tags: ['autodocs'],
126
- argTypes: argTypesFor('kai-confirm'),
127
- parameters: {
128
- layout: 'padded',
129
- docs: {
130
- description: specDescription('kai-confirm', [
131
- "`<kai-confirm>` is a **named-intent approval** card (set via the `data` **property**): a title + body + a small set of action buttons. Activating an action emits the Card contract's **`action`** verb up a bubbling **`kai-card`** CustomEvent of `{ kind: 'action', cardId, action, payload? }`, then **resolves** the card (other actions disabled, the chosen one marked) so the same approval can't double-fire.",
132
- '**Action styles:** `primary` (filled accent), `default` (outline), `destructive` (red/danger). A `tone:\'danger\'` and any destructive action add a warning icon + danger accent — never color alone. At most one action can be `default:true` (the keyboard default; gets focus only when `autofocus` is set, which is **off** by default to avoid focus-stealing mid-stream).',
133
- '**Events** (all frozen Card-contract verbs): `ready` on mount, `action` on choice, `dismiss` for the optional close affordance (`dismissible:true`), `error` for a malformed definition (renders the inline `kai-card` error). It **never invents events**. The same shapes flow over the remote iframe transport unchanged.',
134
- ]),
135
- },
136
- },
137
- } satisfies Meta;
138
-
139
- export default meta;
140
- type Story = StoryObj;
141
-
142
- /** The canonical two-action approval (Approve / Reject). */
143
- export const ApproveReject: Story = {
144
- render: () => <ConfirmDemo def={APPROVE} cardId="card-approve" heading="Run database migration?" />,
145
- parameters: { docs: { source: { code: HTML_SNIPPET(APPROVE, 'card-approve'), language: 'html' } } },
146
- };
147
-
148
- /** A destructive action (`tone:'danger'` + `style:'destructive'`) — danger styling, no color-only cue. */
149
- export const Destructive: Story = {
150
- render: () => <ConfirmDemo def={DESTRUCTIVE} cardId="card-delete" heading="Delete files?" />,
151
- parameters: { docs: { source: { code: HTML_SNIPPET(DESTRUCTIVE, 'card-delete'), language: 'html' } } },
152
- };
153
-
154
- /** A small choice set (3 actions, one `default:true`). */
155
- export const ChoiceSet: Story = {
156
- render: () => <ConfirmDemo def={CHOICES} cardId="card-deploy" />,
157
- parameters: { docs: { source: { code: HTML_SNIPPET(CHOICES, 'card-deploy'), language: 'html' } } },
158
- };
159
-
160
- /** A dismissible approval (a close affordance emits the `dismiss` verb). */
161
- export const Dismissible: Story = {
162
- render: () => <ConfirmDemo def={DISMISSIBLE} cardId="card-send" heading="Send email?" />,
163
- parameters: { docs: { source: { code: HTML_SNIPPET(DISMISSIBLE, 'card-send'), language: 'html' } } },
164
- };
165
-
166
- const RESOLVED_CONFIRM: ConfirmCardData = {
167
- body: 'Apply 3 migrations?',
168
- actions: [
169
- { id: 'approve', label: 'Run migration', style: 'primary' },
170
- { id: 'reject', label: 'Cancel' },
171
- ],
172
- };
173
-
174
- /** The card after the user chose **Run migration** — chromed read-only, no buttons. */
175
- export const Resolved: Story = {
176
- name: 'Resolved (read-only)',
177
- render: () => {
178
- let el: ConfirmEl | undefined;
179
- onMount(() => {
180
- if (!el) return;
181
- el.data = RESOLVED_CONFIRM;
182
- el.resolution = { kind: 'action', action: 'approve' };
183
- });
184
- return (
185
- <Frame>
186
- <kai-confirm ref={(e) => (el = e as ConfirmEl)} card-id="card-resolved-confirm" heading="Run database migration?" />
187
- </Frame>
188
- );
189
- },
190
- parameters: {
191
- docs: {
192
- source: {
193
- code: `<kai-confirm heading="Run database migration?"></kai-confirm>
194
- <script type="module">
195
- import '@kitn.ai/ui/elements';
196
- const el = document.querySelector('kai-confirm');
197
- el.data = ${JSON.stringify(RESOLVED_CONFIRM, null, 2)};
198
- // Setting .resolution renders the chromed read-only view — no interactive controls.
199
- el.resolution = { kind: 'action', action: 'approve' };
200
- </script>`,
201
- language: 'html',
202
- },
203
- },
204
- },
205
- };
206
-
207
- /** A malformed `data` (empty `actions`) → the inline error state + an `error` event. */
208
- export const ErrorState: Story = {
209
- render: () => <ConfirmDemo def={{ actions: [] } as unknown as ConfirmCardData} cardId="card-bad" />,
210
- parameters: {
211
- docs: {
212
- source: {
213
- code: `<kai-confirm></kai-confirm>
214
- <script type="module">
215
- import '@kitn.ai/ui/elements';
216
- const el = document.querySelector('kai-confirm');
217
- // No actions → inline error state + an \`error\` event.
218
- el.data = { actions: [] };
219
- el.addEventListener('kai-card', (e) => {
220
- if (e.detail.kind === 'error') console.warn('confirm error:', e.detail.message);
221
- });
222
- </script>`,
223
- language: 'html',
224
- },
225
- },
226
- },
227
- };