@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/resizable.stories.tsx DELETED
@@ -1,426 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal, onMount, type JSX } from 'solid-js';
3
- import './register'; // side effect: registers the custom elements
4
- import { argTypesFor, specDescription } from '../stories/docs/element-controls';
5
- import { Resizable, ResizablePanel } from '../ui/resizable';
6
- import type { ArtifactFile } from '../components/artifact';
7
- import { Artifact } from '../components/artifact';
8
-
9
- // The web components are custom DOM elements, so declare the tags for JSX.
10
- declare module 'solid-js' {
11
- // eslint-disable-next-line @typescript-eslint/no-namespace
12
- namespace JSX {
13
- interface IntrinsicElements {
14
- 'kai-resizable': JSX.HTMLAttributes<HTMLElement> & { orientation?: string };
15
- 'kai-resizable-item': JSX.HTMLAttributes<HTMLElement> & {
16
- size?: string; min?: string; max?: string; locked?: boolean | string; hidden?: boolean | string;
17
- };
18
- // `kai-artifact` JSX type is augmented (with the full attr set) in
19
- // artifact.stories.tsx — declaring it again here with a different shape
20
- // would trip TS2717 (module-augmentation merges must match). Reuse that one.
21
- }
22
- }
23
- }
24
-
25
- // Fixture base URL (served by Storybook staticDirs from examples/artifact-fixtures).
26
- const BASE = new URL('artifact-fixtures', document.baseURI).href;
27
-
28
- const ARTIFACT_FILES: ArtifactFile[] = [
29
- { path: 'index.html', url: `${BASE}/index.html`, type: 'html', language: 'html',
30
- code: `<!DOCTYPE html><html lang="en"><head><title>Preview</title></head><body><h1>Starboard</h1></body></html>` },
31
- { path: 'about.html', url: `${BASE}/about.html`, type: 'html', language: 'html',
32
- code: `<!DOCTYPE html><html lang="en"><head><title>About</title></head><body><h1>About</h1></body></html>` },
33
- ];
34
-
35
- /** A labelled placeholder pane so the layout is visible in stories. */
36
- function Pane(props: { label: string; tone?: 'muted' | 'plain' }) {
37
- return (
38
- <div
39
- style={{
40
- height: '100%',
41
- display: 'flex',
42
- 'align-items': 'center',
43
- 'justify-content': 'center',
44
- padding: '16px',
45
- background: props.tone === 'plain' ? 'transparent' : 'var(--color-muted, #f4f4f5)',
46
- color: 'var(--color-muted-foreground, #71717a)',
47
- 'font-size': '13px',
48
- }}
49
- >
50
- {props.label}
51
- </div>
52
- );
53
- }
54
-
55
- /** A bordered, sized frame the group fills. */
56
- function Frame(props: { children: JSX.Element; tall?: boolean }) {
57
- return (
58
- <div
59
- style={{
60
- height: props.tall ? '384px' : '256px',
61
- width: '100%',
62
- 'max-width': '768px',
63
- border: '1px solid var(--color-border, #e4e4e7)',
64
- 'border-radius': '8px',
65
- overflow: 'hidden',
66
- }}
67
- >
68
- {props.children}
69
- </div>
70
- );
71
- }
72
-
73
- const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
74
- <kai-resizable orientation="horizontal" style="display:block;height:400px">
75
- <kai-resizable-item size="25%" min="160px"> ...list... </kai-resizable-item>
76
- <kai-resizable-item> ...chat... </kai-resizable-item>
77
- <kai-resizable-item size="30%"> ...preview... </kai-resizable-item>
78
- </kai-resizable>
79
-
80
- <script type="module">
81
- import '@kitn.ai/ui/elements'; // registers the custom elements
82
- document.querySelector('kai-resizable')
83
- .addEventListener('kai-change', (e) => console.log(e.detail.sizes));
84
- </script>`;
85
-
86
- const meta = {
87
- title: 'Components/Resizable',
88
- tags: ['autodocs'],
89
- argTypes: argTypesFor('kai-resizable'),
90
- parameters: {
91
- layout: 'padded',
92
- docs: {
93
- description: specDescription('kai-resizable', [
94
- '`<kai-resizable>` is the framework-agnostic **web component** for a composable, resizable multi-panel layout (up to **3** `<kai-resizable-item>` panels) with **auto-inserted draggable dividers** — isolated in **Shadow DOM**.',
95
- '**When to use:** to compose an app shell out of slotted regions without hand-wiring panels and handles — e.g. `list | chat | preview`. In SolidJS, use the `Resizable` convenience (UI/Resizable) directly.',
96
- "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set `orientation` (`horizontal` row / `vertical` column), and put a `<kai-resizable-item>` per panel. Each item carries `size` (px or %, e.g. `\"280px\"` or `\"25%\"`), `min`/`max`, `locked` (fixed size + non-draggable neighbour), and `hidden` (drops the panel + its divider). Listen for the **`change`** event (`detail.sizes`, percent).",
97
- '**Anatomy:** one or more **`<kai-resizable-item>`** light children (each a config-carrier: `size`, `min`, `max`, `locked`, `hidden` attributes; renders its slotted content) with auto-inserted **draggable divider handles** between each visible, unlocked pair. A panel is omitted from layout when `hidden`; its adjacent divider is dropped. Nesting `<kai-resizable>` inside an item allows more than 3 panels.',
98
- '**Placement:** the layout spine for compose-your-own-chat shells — sidebar + conversation, conversation + inspector, or a three-up list/chat/preview.',
99
- 'See the **Code** tab for HTML usage.',
100
- ]),
101
- },
102
- },
103
- args: { orientation: 'horizontal' },
104
- } satisfies Meta;
105
-
106
- export default meta;
107
- type Story = StoryObj;
108
-
109
- /** Interactive playground — flip orientation, then drag the dividers. */
110
- export const Playground: Story = {
111
- render: (args: { orientation?: string }) => (
112
- <Frame>
113
- <kai-resizable orientation={args.orientation ?? 'horizontal'}>
114
- <kai-resizable-item size="25%" min="120px"><Pane label="List" /></kai-resizable-item>
115
- <kai-resizable-item><Pane label="Chat" tone="plain" /></kai-resizable-item>
116
- </kai-resizable>
117
- </Frame>
118
- ),
119
- parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
120
- };
121
-
122
- /** Two panels: a sized list beside a flexible chat. */
123
- export const ListChat: Story = {
124
- name: 'Sidebar + chat',
125
- render: () => (
126
- <Frame>
127
- <kai-resizable orientation="horizontal">
128
- <kai-resizable-item size="28%" min="140px" max="50%"><Pane label="List" /></kai-resizable-item>
129
- <kai-resizable-item><Pane label="Chat" tone="plain" /></kai-resizable-item>
130
- </kai-resizable>
131
- </Frame>
132
- ),
133
- };
134
-
135
- /** Three panels, two draggable dividers. */
136
- export const ListChatPreview: Story = {
137
- name: 'List + chat + preview',
138
- render: () => (
139
- <Frame>
140
- <kai-resizable orientation="horizontal">
141
- <kai-resizable-item size="22%" min="120px"><Pane label="List" /></kai-resizable-item>
142
- <kai-resizable-item><Pane label="Chat" tone="plain" /></kai-resizable-item>
143
- <kai-resizable-item size="30%" min="160px"><Pane label="Preview" /></kai-resizable-item>
144
- </kai-resizable>
145
- </Frame>
146
- ),
147
- };
148
-
149
- /** A locked, fixed-px sidebar — its divider is a static (non-draggable) separator. */
150
- export const LockedSidebar: Story = {
151
- name: 'Locked sidebar',
152
- render: () => (
153
- <Frame>
154
- <kai-resizable orientation="horizontal">
155
- <kai-resizable-item size="240px" locked><Pane label="Locked sidebar (240px)" /></kai-resizable-item>
156
- <kai-resizable-item><Pane label="Chat" tone="plain" /></kai-resizable-item>
157
- </kai-resizable>
158
- </Frame>
159
- ),
160
- };
161
-
162
- /** Stacked top/bottom split. */
163
- export const Vertical: Story = {
164
- name: 'Vertical split',
165
- render: () => (
166
- <Frame tall>
167
- <kai-resizable orientation="vertical">
168
- <kai-resizable-item size="40%" min="80px"><Pane label="Top" /></kai-resizable-item>
169
- <kai-resizable-item><Pane label="Bottom" tone="plain" /></kai-resizable-item>
170
- </kai-resizable>
171
- </Frame>
172
- ),
173
- };
174
-
175
- /** Toggle the preview panel — its divider drops and the rest reflow. */
176
- export const HiddenToggle: Story = {
177
- name: 'Show / hide a panel',
178
- render: () => {
179
- const [showPreview, setShowPreview] = createSignal(true);
180
- let previewItem: HTMLElement | undefined;
181
- const toggle = () => {
182
- setShowPreview((v) => !v);
183
- // Drive the boolean attribute directly so the group's MutationObserver
184
- // re-lays out (Solid sets the `hidden` IDL property, which doesn't reflect
185
- // to the attribute on a custom element).
186
- if (previewItem) {
187
- if (showPreview()) previewItem.removeAttribute('hidden');
188
- else previewItem.setAttribute('hidden', '');
189
- }
190
- };
191
- return (
192
- <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
193
- <button
194
- type="button"
195
- onClick={toggle}
196
- style={{
197
- 'align-self': 'flex-start',
198
- padding: '4px 12px',
199
- 'font-size': '13px',
200
- border: '1px solid var(--color-border, #e4e4e7)',
201
- 'border-radius': '6px',
202
- cursor: 'pointer',
203
- }}
204
- >
205
- {showPreview() ? 'Hide preview' : 'Show preview'}
206
- </button>
207
- <Frame>
208
- <kai-resizable orientation="horizontal">
209
- <kai-resizable-item size="24%" min="120px"><Pane label="List" /></kai-resizable-item>
210
- <kai-resizable-item><Pane label="Chat" tone="plain" /></kai-resizable-item>
211
- <kai-resizable-item ref={(e) => (previewItem = e as HTMLElement)} size="30%"><Pane label="Preview" /></kai-resizable-item>
212
- </kai-resizable>
213
- </Frame>
214
- </div>
215
- );
216
- },
217
- };
218
-
219
- const EXPAND_TO_FILL_SNIPPET = `<!-- The artifact's "Expand" button (opt-in: expandable) fires a bubbling
220
- kai-maximize-intent event. The nearest enclosing <kai-resizable> catches it
221
- automatically and hides siblings so the preview panel fills the container.
222
- No wiring needed between the two elements — the protocol is zero-config. -->
223
-
224
- <kai-resizable orientation="horizontal" style="display:block;height:480px">
225
- <kai-resizable-item size="20%" min="120px"> …list… </kai-resizable-item>
226
- <kai-resizable-item> …chat… </kai-resizable-item>
227
- <kai-resizable-item size="35%" min="200px">
228
- <!-- expandable opt-in: adds the Expand/Collapse button -->
229
- <kai-artifact
230
- src="…/index.html"
231
- expandable
232
- ></kai-artifact>
233
- </kai-resizable-item>
234
- </kai-resizable>
235
-
236
- <script type="module">
237
- import '@kitn.ai/ui/elements';
238
-
239
- // Optional: observe the layout events.
240
- document.querySelector('kai-resizable')
241
- .addEventListener('kai-change', (e) => console.log('change', e.detail.sizes));
242
- document.querySelector('kai-resizable')
243
- .addEventListener('kai-maximize-change', (e) => console.log('maximizechange', e.detail));
244
- document.querySelector('kai-artifact')
245
- .addEventListener('kai-maximize-change', (e) => console.log('artifact maximizechange', e.detail));
246
- </script>
247
-
248
- <!-- Cross-element protocol (hand-authored; not generated):
249
- • kai-maximize-intent — CustomEvent, bubbles:true, composed:true
250
- Fired by <kai-artifact> when the Expand/Collapse button is clicked.
251
- detail: { requested: boolean } (true = maximize, false = restore)
252
- • kai-maximize-state — CustomEvent, bubbles:false, composed:true
253
- Dispatched by <kai-resizable> back DOWN onto the maximized <kai-resizable-item>
254
- (on maximize) or the group host + the formerly-maximized item (on restore)
255
- so the artifact can reconcile its button label.
256
- detail: { maximized: boolean }
257
- These protocol events are NOT listed in the generated web-components.md because
258
- they are cross-element — the generator only documents per-element dispatch events. -->`;
259
-
260
- /**
261
- * **Expand to fill** — the headline integration: the artifact's expand button
262
- * fills the preview panel to the full container width. No wiring between the
263
- * two elements is needed — clicking **Expand** fires a `kai-maximize-intent` event
264
- * that bubbles up to the nearest enclosing `<kai-resizable>`, which hides siblings
265
- * and lets the preview panel fill. **Collapse** (or **Escape**) restores the
266
- * original layout.
267
- *
268
- * **Cross-element protocol (hand-authored docs):**
269
- * - `kai-maximize-intent` — `bubbles:true, composed:true`; fired by `<kai-artifact>`
270
- * when Expand/Collapse is toggled. `detail: { requested: boolean }`.
271
- * - `kai-maximize-state` — `bubbles:false, composed:true`; dispatched by
272
- * `<kai-resizable>` back down to the affected `<kai-resizable-item>` so the
273
- * artifact can reconcile its button. `detail: { maximized: boolean }`.
274
- *
275
- * These protocol events are NOT in the generated `web-components.md`
276
- * (the generator only documents per-element `dispatch` events — resolved decision #1).
277
- */
278
- export const ExpandToFill: Story = {
279
- name: 'Expand to fill',
280
- render: () => {
281
- const [log, setLog] = createSignal<string[]>([]);
282
- let artifactEl: HTMLElement & { files?: ArtifactFile[] };
283
- let resizableEl: HTMLElement;
284
- onMount(() => {
285
- if (artifactEl) artifactEl.files = ARTIFACT_FILES;
286
- if (resizableEl) {
287
- resizableEl.addEventListener('kai-change', (e: Event) =>
288
- setLog((l) => [`change → ${JSON.stringify((e as CustomEvent).detail.sizes)}`, ...l].slice(0, 6)),
289
- );
290
- resizableEl.addEventListener('kai-maximize-change', (e: Event) =>
291
- setLog((l) => [`kai-maximize-change → ${JSON.stringify((e as CustomEvent).detail)}`, ...l].slice(0, 6)),
292
- );
293
- }
294
- if (artifactEl) {
295
- artifactEl.addEventListener('kai-maximize-change', (e: Event) =>
296
- setLog((l) => [`artifact kai-maximize-change → ${JSON.stringify((e as CustomEvent).detail)}`, ...l].slice(0, 6)),
297
- );
298
- }
299
- });
300
- return (
301
- <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
302
- <div
303
- style={{
304
- height: '480px',
305
- width: '100%',
306
- 'max-width': '900px',
307
- border: '1px solid var(--color-border, #e4e4e7)',
308
- 'border-radius': '8px',
309
- overflow: 'hidden',
310
- }}
311
- >
312
- <kai-resizable
313
- ref={(e) => (resizableEl = e as HTMLElement)}
314
- orientation="horizontal"
315
- >
316
- <kai-resizable-item size="20%" min="120px">
317
- <Pane label="List" />
318
- </kai-resizable-item>
319
- <kai-resizable-item min="140px">
320
- <Pane label="Chat" tone="plain" />
321
- </kai-resizable-item>
322
- <kai-resizable-item size="35%" min="200px">
323
- <kai-artifact
324
- ref={(e) => (artifactEl = e as HTMLElement & { files?: ArtifactFile[] })}
325
- src={`${BASE}/index.html`}
326
- iframe-title="Starboard artifact preview"
327
- expandable
328
- />
329
- </kai-resizable-item>
330
- </kai-resizable>
331
- </div>
332
- <pre
333
- style={{
334
- 'font-size': '12px',
335
- 'max-width': '900px',
336
- padding: '10px 12px',
337
- 'border-radius': '8px',
338
- background: 'var(--color-muted, #f4f4f5)',
339
- color: 'var(--color-muted-foreground, #71717a)',
340
- 'min-height': '72px',
341
- margin: '0',
342
- }}
343
- >
344
- {log().length ? log().join('\n') : '(click the ⤢ Expand button in the preview toolbar…)'}
345
- </pre>
346
- </div>
347
- );
348
- },
349
- parameters: { docs: { source: { code: EXPAND_TO_FILL_SNIPPET, language: 'html' } } },
350
- };
351
-
352
- const SOLID_PARITY_SNIPPET = `// SolidJS — Artifact inside Resizable with maximizedIndex/onMaximizeChange.
353
- // No web components needed; works in a pure-Solid app.
354
- import { createSignal } from 'solid-js';
355
- import { Artifact } from '@kitn.ai/ui/components';
356
- import { Resizable, ResizablePanel } from '@kitn.ai/ui/ui';
357
-
358
- function App() {
359
- const [maximizedIndex, setMaximizedIndex] = createSignal<number | null>(null);
360
- return (
361
- <Resizable
362
- maximizedIndex={maximizedIndex()}
363
- onMaximizeChange={setMaximizedIndex}
364
- style="height:480px"
365
- >
366
- <ResizablePanel defaultSize="20%" minSize="120px">…list…</ResizablePanel>
367
- <ResizablePanel minSize="140px">…chat…</ResizablePanel>
368
- <ResizablePanel defaultSize="35%" minSize="200px">
369
- <Artifact
370
- src="…"
371
- expandable
372
- maximized={maximizedIndex() === 2}
373
- onMaximizeChange={(m) => setMaximizedIndex(m ? 2 : null)}
374
- />
375
- </ResizablePanel>
376
- </Resizable>
377
- );
378
- }`;
379
-
380
- /**
381
- * **SolidJS parity** — the same `list | chat | artifact` layout using the Solid
382
- * `Resizable` convenience and the `Artifact` component directly (no web components).
383
- * `maximizedIndex` / `onMaximizeChange` on `Resizable` mirror the web-component
384
- * protocol at the Solid level. Wire `Artifact`'s `onMaximizeChange` to set the
385
- * index and pass `maximized` back down to drive the button.
386
- */
387
- export const SolidParity: Story = {
388
- name: 'SolidJS parity (Resizable + Artifact)',
389
- render: () => {
390
- const [maximizedIndex, setMaximizedIndex] = createSignal<number | null>(null);
391
- return (
392
- <div
393
- style={{
394
- height: '480px',
395
- width: '100%',
396
- 'max-width': '900px',
397
- border: '1px solid var(--color-border, #e4e4e7)',
398
- 'border-radius': '8px',
399
- overflow: 'hidden',
400
- }}
401
- >
402
- <Resizable
403
- maximizedIndex={maximizedIndex()}
404
- onMaximizeChange={setMaximizedIndex}
405
- >
406
- <ResizablePanel defaultSize="20%" minSize="120px">
407
- <Pane label="List" />
408
- </ResizablePanel>
409
- <ResizablePanel minSize="140px">
410
- <Pane label="Chat" tone="plain" />
411
- </ResizablePanel>
412
- <ResizablePanel defaultSize="35%" minSize="200px">
413
- <Artifact
414
- src={`${BASE}/index.html`}
415
- iframeTitle="Starboard artifact preview"
416
- expandable
417
- maximized={maximizedIndex() === 2}
418
- onMaximizeChange={(m) => setMaximizedIndex(m ? 2 : null)}
419
- />
420
- </ResizablePanel>
421
- </Resizable>
422
- </div>
423
- );
424
- },
425
- parameters: { docs: { source: { code: SOLID_PARITY_SNIPPET, language: 'tsx' } } },
426
- };
package/src/elements/response-stream.stories.tsx DELETED
@@ -1,79 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { onMount } from 'solid-js';
3
- import './register'; // side effect: registers the custom elements
4
- import { argTypesFor, specDescription } from '../stories/docs/element-controls';
5
-
6
- // The web components are custom DOM elements, so declare the tags for JSX.
7
- declare module 'solid-js' {
8
- // eslint-disable-next-line @typescript-eslint/no-namespace
9
- namespace JSX {
10
- interface IntrinsicElements {
11
- 'kai-response-stream': JSX.HTMLAttributes<HTMLElement> & {
12
- mode?: string;
13
- speed?: number;
14
- };
15
- }
16
- }
17
- }
18
-
19
- const STREAM_TEXT =
20
- "This text reveals with a typewriter animation, streamed character by character — exactly how you'd render a live assistant reply.";
21
-
22
- /** Render `<kai-response-stream>` with the `text` set as a JS property. */
23
- function StreamElement(props: { text: string; mode?: string; speed?: number }) {
24
- let el: (HTMLElement & { text?: string }) | undefined;
25
- onMount(() => {
26
- if (el) el.text = props.text;
27
- });
28
- return (
29
- <kai-response-stream
30
- ref={(e) => (el = e as HTMLElement)}
31
- mode={props.mode}
32
- speed={props.speed}
33
- style={{ display: 'block', padding: '24px', 'max-width': '640px', 'line-height': 1.6 }}
34
- />
35
- );
36
- }
37
-
38
- const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
39
- <kai-response-stream id="stream" mode="typewriter" speed="20"></kai-response-stream>
40
-
41
- <script type="module">
42
- import '@kitn.ai/ui/elements'; // registers the custom elements
43
-
44
- const stream = document.getElementById('stream');
45
- // text can be a string, or an AsyncIterable<string> for live streaming
46
- stream.text = "Hello, this reveals one character at a time…";
47
- stream.addEventListener('kai-complete', () => console.log('done'));
48
- </script>`;
49
-
50
- const meta = {
51
- title: 'Components/ResponseStream',
52
- tags: ['autodocs'],
53
- argTypes: argTypesFor('kai-response-stream'),
54
- parameters: {
55
- layout: 'fullscreen',
56
- docs: {
57
- description: specDescription('kai-response-stream', [
58
- '`<kai-response-stream>` is the framework-agnostic **web component** that reveals text with a typewriter or fade animation — the building block for streamed assistant replies, isolated in **Shadow DOM**.',
59
- '**When to use:** animating a response as it arrives. Pass a finished string to replay an animation, or an `AsyncIterable<string>` to drive it from a live stream. In SolidJS, use the `ResponseStream` primitive.',
60
- "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the `text` **property** (string or async iterable), tune `mode` (`typewriter` / `fade`) and `speed`, and listen for the `kai-complete` **CustomEvent**.",
61
- 'See the **Code** tab for HTML usage.',
62
- ]),
63
- },
64
- },
65
- } satisfies Meta;
66
-
67
- export default meta;
68
- type Story = StoryObj;
69
-
70
- /** Typewriter reveal (the default). */
71
- export const Typewriter: Story = {
72
- render: () => <StreamElement text={STREAM_TEXT} mode="typewriter" speed={20} />,
73
- parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
74
- };
75
-
76
- /** Fade-in reveal, segment by segment. */
77
- export const Fade: Story = {
78
- render: () => <StreamElement text={STREAM_TEXT} mode="fade" speed={10} />,
79
- };