@kitn.ai/ui 0.26.0 → 0.27.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 (474) hide show
  1. package/README.md +16 -5
  2. package/bin/mcp.js +16 -3
  3. package/bin/route.js +23 -0
  4. package/bin/route.test.js +58 -0
  5. package/dist/{elements/chunks/Icon--Y8vsFal.js → Icon-BnFKqqtY.js} +1 -1
  6. package/dist/action-icons-CBskfBMz.js +1 -0
  7. package/dist/arrow-down-Br0qtpsz.js +1 -0
  8. package/dist/arrow-left-Dj7xgE12.js +1 -0
  9. package/dist/artifact-CvXEm1lS.js +1 -0
  10. package/dist/assets/dev-5XzXYR21.js +91 -0
  11. package/dist/attachments-C43ZegEq.js +1 -0
  12. package/dist/{elements/chunks/audio-visualizer-D7lB6mvR.js → audio-visualizer-B-79y1Tj.js} +1 -1
  13. package/dist/badge-BpUbq8c0.js +1 -0
  14. package/dist/bash-InADTalH.js +1 -6
  15. package/dist/bell-sn17Ip9v.js +1 -0
  16. package/dist/{elements/chunks/button-flUbeufF.js → button-BH6rN0U-.js} +1 -1
  17. package/dist/card-renderer-Cb1gQmth.js +1 -0
  18. package/dist/card-routing-DifQgS7n.js +1 -0
  19. package/dist/check-DPeeMUYx.js +1 -0
  20. package/dist/checkbox-Dc9Yov_B.js +1 -0
  21. package/dist/checkbox-group-B1kDLLYk.js +1 -0
  22. package/dist/chevron-down-CHSWk7ZT.js +1 -0
  23. package/dist/chevron-right-B7l_fMgx.js +1 -0
  24. package/dist/choice-card-BT3c1S8g.js +1 -0
  25. package/dist/circle-Bb0yOpqM.js +1 -0
  26. package/dist/circle-check-BGZpCiz7.js +1 -0
  27. package/dist/circle-x-wobWkoSx.js +1 -0
  28. package/dist/{elements/chunks/cn-CU7UAWzk.js → cn-DN5AWfiS.js} +1 -1
  29. package/dist/{elements/chunks/code-block-BdLiTitd.js → code-block-CUQ5mtv0.js} +1 -1
  30. package/dist/{elements/chunks/collapsible-BzbXpPzr.js → collapsible-CPJbf6FM.js} +1 -1
  31. package/dist/components/attachment-types.d.ts +7 -0
  32. package/dist/components/audio-visualizer/fit-scale.d.ts +1 -1
  33. package/dist/components/card-renderer.d.ts +13 -0
  34. package/dist/components/card.d.ts +4 -0
  35. package/dist/components/chat-thread.d.ts +46 -1
  36. package/dist/components/conversation-item.d.ts +19 -7
  37. package/dist/components/conversation-list.d.ts +17 -5
  38. package/dist/components/form-widgets.d.ts +67 -2
  39. package/dist/components/form.d.ts +48 -1
  40. package/dist/components/message.d.ts +25 -3
  41. package/dist/components/reasoning.d.ts +6 -0
  42. package/dist/components/scroll-button.d.ts +11 -0
  43. package/dist/components/thread.d.ts +5 -0
  44. package/dist/components/tool-types.d.ts +9 -0
  45. package/dist/composer-CjngLzal.js +106 -0
  46. package/dist/confirm-card-DCx_A4bU.js +1 -0
  47. package/dist/construct-cli.es.js +1169 -0
  48. package/dist/{elements/chunks/context-VLIL3sJ-.js → context-BY8V-Nlp.js} +1 -1
  49. package/dist/controllable-D43BKmtX.js +1 -0
  50. package/dist/conversation-list-D4lLU_yS.js +1 -0
  51. package/dist/copy-B6DO4PqB.js +1 -0
  52. package/dist/core-AYMC6_lb.js +12 -5874
  53. package/dist/{create-tween-CQED4T0g.js → create-tween-BPzaefTp.js} +1 -1
  54. package/dist/{create-tween-BFT6c-Y8.js → create-tween-CnMHviKB.js} +1 -1
  55. package/dist/{create-tween-CJNlzoaO.js → create-tween-D1aiGZZh.js} +1 -1
  56. package/dist/{elements/chunks/create-tween-c4Z8TDYz.js → create-tween-DUSQUKpr.js} +2 -2
  57. package/dist/css-M7EaDHN_.js +1 -6
  58. package/dist/custom-elements.json +1400 -218
  59. package/dist/default-input-CucQEOqH.js +1 -0
  60. package/dist/define-CGGX-7Vg.js +1 -0
  61. package/dist/define.d.ts +4 -0
  62. package/dist/define.js +510 -0
  63. package/dist/define.server.d.ts +5 -0
  64. package/dist/define.server.js +506 -0
  65. package/dist/{elements/chunks/disclosure-CcNbyLy0.js → disclosure-CbLtajUQ.js} +1 -1
  66. package/dist/{elements/chunks/dropdown-BgWTthUx.js → dropdown-BwhViJFd.js} +1 -1
  67. package/dist/elements/agent-card.js +1 -1
  68. package/dist/elements/artifact.js +1 -1
  69. package/dist/elements/attachments.js +1 -1
  70. package/dist/elements/audio-visualizer.js +1 -1
  71. package/dist/elements/autoloader.js +1 -1
  72. package/dist/elements/avatar.js +1 -1
  73. package/dist/elements/badge.js +1 -1
  74. package/dist/elements/button.js +1 -1
  75. package/dist/elements/card.js +1 -1
  76. package/dist/elements/cards.js +1 -1
  77. package/dist/elements/chain-of-thought.js +1 -1
  78. package/dist/elements/chat-scope-picker.js +1 -1
  79. package/dist/elements/chat-workspace.js +1 -1
  80. package/dist/elements/chat.js +1 -1
  81. package/dist/elements/checkbox-group.d.ts +1 -0
  82. package/dist/elements/checkbox-group.js +1 -0
  83. package/dist/elements/checkbox.d.ts +1 -0
  84. package/dist/elements/checkbox.js +1 -0
  85. package/dist/elements/checkpoint.js +1 -1
  86. package/dist/elements/choice.js +1 -1
  87. package/dist/elements/coachmark.js +1 -1
  88. package/dist/elements/code-block.js +1 -1
  89. package/dist/elements/command.js +1 -1
  90. package/dist/elements/compare.js +1 -1
  91. package/dist/elements/composer.js +1 -1
  92. package/dist/elements/confirm-card.js +1 -1
  93. package/dist/elements/context-meter.js +1 -1
  94. package/dist/elements/conversation-item.js +1 -1
  95. package/dist/elements/conversation-list.js +1 -1
  96. package/dist/elements/define-entry.d.ts +12 -0
  97. package/dist/elements/dialog.js +1 -1
  98. package/dist/elements/dock.js +101 -7
  99. package/dist/elements/dropdown.js +1 -1
  100. package/dist/elements/editable-label.js +1 -1
  101. package/dist/elements/element-data-types.d.ts +37 -0
  102. package/dist/elements/embed.js +1 -1
  103. package/dist/elements/empty.js +1 -1
  104. package/dist/elements/feedback-bar.js +1 -1
  105. package/dist/elements/file-tree.js +1 -1
  106. package/dist/elements/file-upload.js +1 -1
  107. package/dist/elements/form.js +1 -1
  108. package/dist/elements/hover-card.js +1 -1
  109. package/dist/elements/icon.js +1 -1
  110. package/dist/elements/image.js +1 -1
  111. package/dist/elements/input.js +1 -1
  112. package/dist/elements/kbd.js +1 -1
  113. package/dist/elements/link-preview.js +1 -1
  114. package/dist/elements/loader.js +1 -1
  115. package/dist/elements/markdown.js +1 -1
  116. package/dist/elements/menu.js +1 -1
  117. package/dist/elements/message-skills.js +1 -1
  118. package/dist/elements/message.js +1 -1
  119. package/dist/elements/model-switcher.js +1 -1
  120. package/dist/elements/nav.js +1 -1
  121. package/dist/elements/notice.js +1 -1
  122. package/dist/elements/pane-grid.d.ts +1 -0
  123. package/dist/elements/pane-grid.js +1 -0
  124. package/dist/elements/pane-group.js +1 -1
  125. package/dist/elements/pane.js +1 -1
  126. package/dist/elements/popover.js +1 -1
  127. package/dist/elements/progress-bar.js +1 -1
  128. package/dist/elements/prompt-dock.js +1 -1
  129. package/dist/elements/prompt-input.js +1 -1
  130. package/dist/elements/prompt-suggestions.js +1 -1
  131. package/dist/elements/radio-group.d.ts +1 -0
  132. package/dist/elements/radio-group.js +1 -0
  133. package/dist/elements/reasoning.js +1 -1
  134. package/dist/elements/remote.js +1 -1
  135. package/dist/elements/resizable.js +1 -1
  136. package/dist/elements/response-stream.js +2 -2
  137. package/dist/elements/screen.js +1 -1
  138. package/dist/elements/scroll-area.js +1 -1
  139. package/dist/elements/scroll-button.js +1 -1
  140. package/dist/elements/search.js +1 -1
  141. package/dist/elements/segmented.js +1 -1
  142. package/dist/elements/select.d.ts +1 -0
  143. package/dist/elements/select.js +1 -0
  144. package/dist/elements/separator.js +1 -1
  145. package/dist/elements/setting-item.js +1 -1
  146. package/dist/elements/settings-group.js +1 -1
  147. package/dist/elements/skeleton.js +1 -1
  148. package/dist/elements/slider.d.ts +1 -0
  149. package/dist/elements/slider.js +1 -0
  150. package/dist/elements/slots.d.ts +1 -1
  151. package/dist/elements/source.js +1 -1
  152. package/dist/elements/status.js +1 -1
  153. package/dist/elements/switch.js +1 -1
  154. package/dist/elements/tabs.js +1 -1
  155. package/dist/elements/tasks.js +1 -1
  156. package/dist/elements/text-shimmer.js +1 -1
  157. package/dist/elements/thinking-bar.js +1 -1
  158. package/dist/elements/thread.js +1 -1
  159. package/dist/elements/toast.js +1 -1
  160. package/dist/elements/tool.js +1 -1
  161. package/dist/elements/tooltip.js +1 -1
  162. package/dist/elements/voice-input.js +1 -1
  163. package/dist/elements/voice-output.js +1 -1
  164. package/dist/elements.d.ts +362 -24
  165. package/dist/{elements/chunks/ellipsis-7gU33mL2.js → ellipsis-DFr4Vqr3.js} +1 -1
  166. package/dist/embed-5s_vU4J0.js +1 -0
  167. package/dist/engine-javascript-vq0WuIJl.js +14 -2516
  168. package/dist/{elements/chunks/external-link-CSOEsNlx.js → external-link-u9d85ORQ.js} +1 -1
  169. package/dist/file-text-CX7_x42o.js +1 -0
  170. package/dist/{elements/chunks/file-tree-zvB2i7P9.js → file-tree-D3kBjXI5.js} +1 -1
  171. package/dist/folder-V-YdIL8f.js +1 -0
  172. package/dist/form-BRNUMCN2.js +1 -0
  173. package/dist/github-dark-dimmed-DUshB20C.js +1 -4
  174. package/dist/github-light-JYsPkUQd.js +1 -4
  175. package/dist/hover-card-DaeiYrTA.js +1 -0
  176. package/dist/html-CPZ3oZQ7.js +1 -10
  177. package/dist/icon-BpixdZNq.js +1 -0
  178. package/dist/{elements/chunks/index-BCRhi84a.js → index-xu_pdcPi.js} +1 -1
  179. package/dist/index.d.ts +1 -1
  180. package/dist/index.js +7330 -5852
  181. package/dist/index.server.js +5823 -4759
  182. package/dist/info-8mFsIjS3.js +1 -0
  183. package/dist/input-d1Yuu-hz.js +1 -0
  184. package/dist/javascript-C25yR2R2.js +1 -6
  185. package/dist/json-DxJze_jm.js +1 -6
  186. package/dist/kai.es.js +1 -1
  187. package/dist/kbd-961zMPFB.js +1 -0
  188. package/dist/link-DlZZBGaR.js +1 -0
  189. package/dist/{elements/chunks/link-preview-OQ9IEq0f.js → link-preview-DIIbV2Sd.js} +1 -1
  190. package/dist/loader-YQszHFaW.js +1 -0
  191. package/dist/{elements/chunks/markdown-DgBFaGAz.js → markdown-CVk1MPsj.js} +1 -1
  192. package/dist/mcp.es.js +1285 -79
  193. package/dist/message-CwKVEdZg.js +1 -0
  194. package/dist/message-DS8lzHc1.js +1 -0
  195. package/dist/message-circle-Xf8Q-vZp.js +1 -0
  196. package/dist/message-square-Cxnwgkns.js +1 -0
  197. package/dist/{elements/chunks/minimize-2-DPIUKTrT.js → minimize-2-UEZmP2QT.js} +1 -1
  198. package/dist/{elements/chunks/model-switcher-DsT8tFB0.js → model-switcher-Kk1jEQ5t.js} +1 -1
  199. package/dist/{elements/chunks/overlay-DuiwdXjm.js → overlay-C1od6LOz.js} +1 -1
  200. package/dist/panel-right-ryET0yyn.js +1 -0
  201. package/dist/paperclip-BDNoZFJP.js +1 -0
  202. package/dist/play-OFIvYXUQ.js +1 -0
  203. package/dist/primitives/card-data-types.d.ts +49 -0
  204. package/dist/primitives/card-routing.d.ts +1 -33
  205. package/dist/primitives/card-validate.d.ts +2 -2
  206. package/dist/primitives/chat-config.d.ts +29 -2
  207. package/dist/primitives/field-mask.d.ts +96 -0
  208. package/dist/primitives/field-semantics.d.ts +36 -0
  209. package/dist/primitives/input-mask.d.ts +46 -0
  210. package/dist/primitives/url-scheme-policy.d.ts +34 -0
  211. package/dist/primitives/use-resize-observer.d.ts +2 -2
  212. package/dist/progress-bar-BvYX0aoy.js +1 -0
  213. package/dist/prompt-suggestion-BRFu2lcu.js +1 -0
  214. package/dist/radio-DcL23cNJ.js +1 -0
  215. package/dist/react/index.d.ts +193 -19
  216. package/dist/react.js +216 -180
  217. package/dist/reasoning-Cackq4Rh.js +1 -0
  218. package/dist/register-impl-C7rENvPK.js +424 -0
  219. package/dist/{elements/chunks/resizable-D181b4fM.js → resizable-Cp9HUYih.js} +1 -1
  220. package/dist/rotate-ccw-0DLRDHH5.js +1 -0
  221. package/dist/rotate-cw-DOB9IGcU.js +1 -0
  222. package/dist/schemas/form.schema.json +21 -1
  223. package/dist/schemas/tool-defs.d.ts +11 -1
  224. package/dist/schemas.js +81 -81
  225. package/dist/scroll-area-emVmWP4K.js +1 -0
  226. package/dist/scroll-button-CeP_gv1x.js +1 -0
  227. package/dist/select-CWmu00tS.js +1 -0
  228. package/dist/{elements/chunks/separator-CeJHQqLW.js → separator-CE6vly6z.js} +1 -1
  229. package/dist/{elements/chunks/settings-CqaHgJF9.js → settings-CE-78SvZ.js} +1 -1
  230. package/dist/{elements/chunks/settings-group-CjqjLCOn.js → settings-group-ZFWNxFQR.js} +1 -1
  231. package/dist/{elements/chunks/skeleton-D8akBnKS.js → skeleton-BebdP4mf.js} +1 -1
  232. package/dist/slider-BAKRYUlz.js +1 -0
  233. package/dist/{solid-BtdqNZI7.js → solid-BE5ui6sy.js} +8727 -7212
  234. package/dist/{solid-CnavwBye.js → solid-DFhsce3O.js} +7015 -5886
  235. package/dist/solid.d.ts +10 -0
  236. package/dist/solid.js +240 -234
  237. package/dist/solid.server.js +240 -234
  238. package/dist/source-B0FlguSx.js +1 -0
  239. package/dist/star-CBMZvLuN.js +1 -0
  240. package/dist/state/index.d.ts +1 -1
  241. package/dist/state/mock.d.ts +32 -2
  242. package/dist/state.js +133 -108
  243. package/dist/{elements/chunks/store-Cjq0qwYN.js → store-7eoadydQ.js} +1 -1
  244. package/dist/svelte--5p79yCD.js +1 -15
  245. package/dist/switch-CViARZCy.js +1 -0
  246. package/dist/tasks-card-MjCcOhR_.js +1 -0
  247. package/dist/text-shimmer-DKlwRF2G.js +1 -0
  248. package/dist/textarea-3ay2Me2-.js +1 -0
  249. package/dist/theme.tokens.css +82 -13
  250. package/dist/{elements/chunks/thumbs-up-DX2Ijk3H.js → thumbs-up-DQcu2HMO.js} +1 -1
  251. package/dist/toast-store-C6yKOhbk.js +1 -0
  252. package/dist/{elements/chunks/tool-DKQ2D1DP.js → tool-BCYNlfKy.js} +1 -1
  253. package/dist/{elements/chunks/tooltip-B0G99y8w.js → tooltip-05zI4hjs.js} +1 -1
  254. package/dist/trash-2-BR1RxGky.js +1 -0
  255. package/dist/{elements/chunks/triangle-alert-F9cyUEyy.js → triangle-alert-DHohDOCy.js} +1 -1
  256. package/dist/tsx-B8rCNbgL.js +1 -6
  257. package/dist/typescript-RycA9KXf.js +1 -6
  258. package/dist/ui/checkbox-group.d.ts +83 -0
  259. package/dist/ui/checkbox.d.ts +40 -0
  260. package/dist/ui/dock.d.ts +22 -0
  261. package/dist/ui/icon.d.ts +3 -0
  262. package/dist/ui/input.d.ts +48 -2
  263. package/dist/ui/radio.d.ts +85 -0
  264. package/dist/ui/select.d.ts +71 -0
  265. package/dist/ui/slider.d.ts +65 -0
  266. package/dist/ui/switch.d.ts +9 -2
  267. package/dist/upload-BbGW6A_u.js +1 -0
  268. package/dist/url-scheme-policy-DHpoTJwB.js +1 -0
  269. package/dist/use-card-resolution-CJW4grFa.js +1 -0
  270. package/dist/{variant-aurora-B8II3-I1.js → variant-aurora-BUOVgPOB.js} +2 -2
  271. package/dist/{variant-aurora-CMNWOSJR.js → variant-aurora-CUsUJvFI.js} +2 -2
  272. package/dist/{variant-aurora-CcuDMWwQ.js → variant-aurora-CW2i4bfr.js} +1 -1
  273. package/dist/{elements/chunks/variant-aurora-qt6Zct8M.js → variant-aurora-xiMPty8f.js} +1 -1
  274. package/dist/{variant-custom-L16JLLZy.js → variant-custom-BQtOnmeO.js} +1 -1
  275. package/dist/{variant-custom-C714mqKl.js → variant-custom-CAm9L-E5.js} +2 -2
  276. package/dist/{variant-custom-BdvYC7af.js → variant-custom-CAnzzppW.js} +2 -2
  277. package/dist/{elements/chunks/variant-custom-tJp22_BQ.js → variant-custom-D91HjAKz.js} +1 -1
  278. package/dist/{variant-wave-ecwykeyL.js → variant-wave-Ca1Ls4_y.js} +2 -2
  279. package/dist/{variant-wave-D7ruiA1W.js → variant-wave-CxX39DKd.js} +2 -2
  280. package/dist/{elements/chunks/variant-wave-CaQ5ti39.js → variant-wave-DYyzIIZv.js} +1 -1
  281. package/dist/{variant-wave-2S4La2Ka.js → variant-wave-uY5crU_K.js} +1 -1
  282. package/dist/vue-BmIZj4XD.js +1 -33
  283. package/dist/x-C5m1JFgi.js +1 -0
  284. package/frameworks/react/index.tsx +198 -20
  285. package/llms-full.txt +1178 -21
  286. package/llms.txt +6 -3
  287. package/package.json +17 -4
  288. package/src/agent-tooling/catalog/invariants.ts +1 -1
  289. package/src/agent-tooling/catalog/surfaces.ts +72 -0
  290. package/src/agent-tooling/construct/cli-entry.ts +8 -0
  291. package/src/agent-tooling/construct/cli.ts +131 -0
  292. package/src/agent-tooling/construct/codegen.ts +1353 -0
  293. package/src/agent-tooling/construct/construct.v1.schema.json +250 -0
  294. package/src/agent-tooling/construct/dev.ts +148 -0
  295. package/src/agent-tooling/construct/fixtures/demo-widget.construct.json +7 -0
  296. package/src/agent-tooling/construct/fixtures/ops-console.construct.json +44 -0
  297. package/src/agent-tooling/construct/fixtures/owner-widget.construct.json +23 -0
  298. package/src/agent-tooling/construct/schema.ts +371 -0
  299. package/src/agent-tooling/mcp/server.ts +2 -1
  300. package/src/agent-tooling/mcp/tools/construct.ts +130 -0
  301. package/src/agent-tooling/mcp/tools/debug.ts +126 -4
  302. package/src/agent-tooling/mcp/tools/reference.ts +104 -3
  303. package/src/agent-tooling/recipes/composed-thread.ts +714 -0
  304. package/src/agent-tooling/recipes/index.ts +22 -0
  305. package/src/agent-tooling/recipes/types.ts +32 -0
  306. package/src/agent-tooling/registry.ts +5 -0
  307. package/src/components/attachment-types.ts +7 -0
  308. package/src/components/audio-visualizer/fit-scale.ts +1 -1
  309. package/src/components/card-renderer.tsx +39 -8
  310. package/src/components/card.tsx +10 -2
  311. package/src/components/chat-scope-picker.tsx +2 -2
  312. package/src/components/chat-thread.tsx +72 -9
  313. package/src/components/choice-card.tsx +102 -37
  314. package/src/components/coachmark.tsx +1 -1
  315. package/src/components/code-block.tsx +2 -2
  316. package/src/components/composer.tsx +89 -15
  317. package/src/components/confirm-card.tsx +20 -4
  318. package/src/components/conversation-item.tsx +33 -9
  319. package/src/components/conversation-list.tsx +25 -10
  320. package/src/components/empty.tsx +14 -3
  321. package/src/components/file-tree.tsx +5 -1
  322. package/src/components/form-widgets.tsx +257 -195
  323. package/src/components/form.tsx +297 -9
  324. package/src/components/loader.tsx +12 -5
  325. package/src/components/message-skills.tsx +1 -1
  326. package/src/components/message.tsx +71 -11
  327. package/src/components/prompt-input.tsx +7 -1
  328. package/src/components/prompt-suggestion.tsx +4 -1
  329. package/src/components/reasoning.tsx +30 -3
  330. package/src/components/response-compare.tsx +2 -2
  331. package/src/components/scroll-button.tsx +56 -4
  332. package/src/components/source.tsx +6 -1
  333. package/src/components/tasks-card.tsx +58 -16
  334. package/src/components/thread.tsx +10 -1
  335. package/src/components/toast.tsx +1 -1
  336. package/src/components/tool-types.ts +9 -0
  337. package/src/elements/attachments.tsx +3 -1
  338. package/src/elements/chat-workspace.tsx +1 -1
  339. package/src/elements/chat.tsx +22 -4
  340. package/src/elements/checkbox-group.tsx +164 -0
  341. package/src/elements/checkbox.tsx +134 -0
  342. package/src/elements/compiled.css +1 -1
  343. package/src/elements/composer.tsx +12 -1
  344. package/src/elements/conversation-item.tsx +62 -22
  345. package/src/elements/conversation-list.tsx +2 -2
  346. package/src/elements/define-entry.ts +12 -0
  347. package/src/elements/dock.tsx +11 -0
  348. package/src/elements/element-data-types.ts +40 -0
  349. package/src/elements/element-manifest.json +24 -0
  350. package/src/elements/element-meta.json +736 -46
  351. package/src/elements/element-nonscalar.json +15 -0
  352. package/src/elements/element-types.d.ts +362 -24
  353. package/src/elements/feedback-bar.tsx +5 -0
  354. package/src/elements/icon-names.json +29 -0
  355. package/src/elements/input.tsx +312 -23
  356. package/src/elements/message.tsx +2 -0
  357. package/src/elements/pane-grid.tsx +111 -0
  358. package/src/elements/prompt-input.tsx +8 -2
  359. package/src/elements/radio-group.tsx +129 -0
  360. package/src/elements/register-impl.ts +6 -0
  361. package/src/elements/scroll-button.tsx +54 -6
  362. package/src/elements/select.tsx +165 -0
  363. package/src/elements/slider.tsx +171 -0
  364. package/src/elements/slots.ts +1 -1
  365. package/src/elements/styles.css +89 -3
  366. package/src/elements/thread.tsx +2 -0
  367. package/src/elements/toast.tsx +14 -1
  368. package/src/index.ts +2 -1
  369. package/src/primitives/card-data-types.ts +49 -0
  370. package/src/primitives/card-host.tsx +4 -2
  371. package/src/primitives/card-routing.ts +7 -56
  372. package/src/primitives/card-schemas/form.schema.json +21 -1
  373. package/src/primitives/card-validate.ts +10 -2
  374. package/src/primitives/chat-config.tsx +33 -6
  375. package/src/primitives/field-mask.ts +256 -0
  376. package/src/primitives/field-semantics.ts +115 -0
  377. package/src/primitives/input-mask.ts +853 -0
  378. package/src/primitives/toast-store.ts +66 -4
  379. package/src/primitives/url-scheme-policy.ts +70 -0
  380. package/src/primitives/use-resize-observer.ts +2 -2
  381. package/src/schemas/tool-defs.ts +12 -2
  382. package/src/solid.ts +10 -0
  383. package/src/state/index.ts +1 -1
  384. package/src/state/mock.ts +92 -6
  385. package/src/ui/agent-card.tsx +2 -2
  386. package/src/ui/avatar.tsx +1 -1
  387. package/src/ui/checkbox-group.tsx +153 -0
  388. package/src/ui/checkbox.tsx +63 -0
  389. package/src/ui/dock.tsx +145 -6
  390. package/src/ui/icon.tsx +53 -0
  391. package/src/ui/input.tsx +249 -9
  392. package/src/ui/kbd.tsx +1 -1
  393. package/src/ui/nav.tsx +1 -1
  394. package/src/ui/pane-group.tsx +2 -2
  395. package/src/ui/radio.tsx +150 -0
  396. package/src/ui/select.tsx +168 -0
  397. package/src/ui/slider.tsx +178 -0
  398. package/src/ui/switch.tsx +49 -18
  399. package/src/utils/cn.ts +11 -5
  400. package/theme.css +84 -13
  401. package/dist/elements/chunks/action-icons-D9u3OzYW.js +0 -1
  402. package/dist/elements/chunks/arrow-left-CVh1TeN7.js +0 -1
  403. package/dist/elements/chunks/artifact-BkYcfIlZ.js +0 -1
  404. package/dist/elements/chunks/attachments-DwfNlubq.js +0 -1
  405. package/dist/elements/chunks/badge-Q0-Cmwzz.js +0 -1
  406. package/dist/elements/chunks/bash-InADTalH.js +0 -1
  407. package/dist/elements/chunks/card-renderer-3Dyl-FpN.js +0 -1
  408. package/dist/elements/chunks/card-routing-BK09BdmL.js +0 -1
  409. package/dist/elements/chunks/check-B5kBPKeo.js +0 -1
  410. package/dist/elements/chunks/chevron-down-DZ1GS39h.js +0 -1
  411. package/dist/elements/chunks/chevron-right-CvP7OUd2.js +0 -1
  412. package/dist/elements/chunks/choice-card-D4QUIOWZ.js +0 -1
  413. package/dist/elements/chunks/circle-CDf9g6MQ.js +0 -1
  414. package/dist/elements/chunks/circle-check-CA47Nqbz.js +0 -1
  415. package/dist/elements/chunks/circle-x-CJ_HVbC8.js +0 -1
  416. package/dist/elements/chunks/composer-Byve-n8K.js +0 -69
  417. package/dist/elements/chunks/confirm-card-B0flE3MN.js +0 -1
  418. package/dist/elements/chunks/controllable-DTwTIlwp.js +0 -1
  419. package/dist/elements/chunks/conversation-item-BDztezOG.js +0 -1
  420. package/dist/elements/chunks/copy-Nf-kqxXH.js +0 -1
  421. package/dist/elements/chunks/core-AYMC6_lb.js +0 -12
  422. package/dist/elements/chunks/css-M7EaDHN_.js +0 -1
  423. package/dist/elements/chunks/default-input-C2iLFq0b.js +0 -1
  424. package/dist/elements/chunks/define-wjHR1MkU.js +0 -1
  425. package/dist/elements/chunks/download-C4V7tBdb.js +0 -1
  426. package/dist/elements/chunks/embed-D3KewsIJ.js +0 -1
  427. package/dist/elements/chunks/engine-javascript-vq0WuIJl.js +0 -141
  428. package/dist/elements/chunks/file-text-D1G8khle.js +0 -1
  429. package/dist/elements/chunks/folder-WW2LGLid.js +0 -1
  430. package/dist/elements/chunks/form-CQirdC4W.js +0 -1
  431. package/dist/elements/chunks/github-dark-dimmed-DUshB20C.js +0 -1
  432. package/dist/elements/chunks/github-light-JYsPkUQd.js +0 -1
  433. package/dist/elements/chunks/hover-card-CJJkfHTK.js +0 -1
  434. package/dist/elements/chunks/html-CPZ3oZQ7.js +0 -1
  435. package/dist/elements/chunks/icon-Cfgmf4fa.js +0 -1
  436. package/dist/elements/chunks/info-DX3YMOt6.js +0 -1
  437. package/dist/elements/chunks/input-BtW9U6Sq.js +0 -1
  438. package/dist/elements/chunks/javascript-C25yR2R2.js +0 -1
  439. package/dist/elements/chunks/json-DxJze_jm.js +0 -1
  440. package/dist/elements/chunks/kbd-LGXwuT_V.js +0 -1
  441. package/dist/elements/chunks/link-2My69BqT.js +0 -1
  442. package/dist/elements/chunks/loader-iOxc_Tu-.js +0 -1
  443. package/dist/elements/chunks/message-VMZohrXx.js +0 -1
  444. package/dist/elements/chunks/message-circle-CpXMM-_n.js +0 -1
  445. package/dist/elements/chunks/message-square-DxcWtETQ.js +0 -1
  446. package/dist/elements/chunks/message-tZmV2A3p.js +0 -1
  447. package/dist/elements/chunks/paperclip-CRZVp4z_.js +0 -1
  448. package/dist/elements/chunks/progress-bar-DNy66e_E.js +0 -1
  449. package/dist/elements/chunks/prompt-suggestion-Bn64Nl7L.js +0 -1
  450. package/dist/elements/chunks/reasoning-Emn9N4-T.js +0 -1
  451. package/dist/elements/chunks/rotate-cw-CPWe37D9.js +0 -1
  452. package/dist/elements/chunks/scroll-area-ClZkZxIk.js +0 -1
  453. package/dist/elements/chunks/scroll-button-DPE-t3x_.js +0 -1
  454. package/dist/elements/chunks/share-CyfnNEqp.js +0 -1
  455. package/dist/elements/chunks/source-UWCvmVak.js +0 -1
  456. package/dist/elements/chunks/star-DoHFAikQ.js +0 -1
  457. package/dist/elements/chunks/svelte--5p79yCD.js +0 -1
  458. package/dist/elements/chunks/tasks-card-CmZ5xh6v.js +0 -1
  459. package/dist/elements/chunks/text-shimmer-DYn09zrz.js +0 -1
  460. package/dist/elements/chunks/textarea-skiGHURM.js +0 -1
  461. package/dist/elements/chunks/toast-store-CFnQpThX.js +0 -1
  462. package/dist/elements/chunks/tsx-B8rCNbgL.js +0 -1
  463. package/dist/elements/chunks/typescript-RycA9KXf.js +0 -1
  464. package/dist/elements/chunks/use-card-resolution-DoA2f_EU.js +0 -1
  465. package/dist/elements/chunks/vue-BmIZj4XD.js +0 -1
  466. package/dist/elements/chunks/x-B6UnOiLw.js +0 -1
  467. package/dist/llms/llms-full.txt +0 -2949
  468. package/dist/llms/llms.txt +0 -156
  469. package/dist/register-impl-DpE7icIb.js +0 -293
  470. package/dist/ui/stat.d.ts +0 -16
  471. package/src/ui/stat.tsx +0 -41
  472. /package/dist/{elements/chunks/card-tags-D8lZ-C_U.js → card-tags-D8lZ-C_U.js} +0 -0
  473. /package/dist/{elements/chunks/link-preview-DNILK391.js → link-preview-DNILK391.js} +0 -0
  474. /package/dist/{elements/chunks/slots-DaNjX0rc.js → slots-DaNjX0rc.js} +0 -0
package/src/agent-tooling/recipes/composed-thread.ts ADDED
@@ -0,0 +1,714 @@
1
+ import type { CodeRecipe } from './types';
2
+
3
+ /**
4
+ * composed-thread — a chat surface hand-composed from standalone elements,
5
+ * with `<kai-chat>` deliberately absent (rung-6 finding F-49).
6
+ *
7
+ * PROVENANCE: derived from the rung-6 clean-room build
8
+ * (docs/superpowers/research/2026-08-25-rung-6-front-door/app on main), which
9
+ * was independently smoke-verified 22/22 — with its ONE recorded defect
10
+ * corrected before it became a teaching artifact: the builder shipped
11
+ * `AttachmentData.url = URL.createObjectURL(file)` (finding F-44, the exact
12
+ * PR #186 defect), and this recipe stages every picked file as a `data:` URI
13
+ * instead, the pattern `src/elements/default-input.tsx` uses and the wire
14
+ * encoders require. `verify:scaffold` compiles the module below with a stock
15
+ * consumer tsconfig AND asserts the object-URL line has not grown back.
16
+ *
17
+ * The catalog half of this recipe — ingredients, wiring edges, invariants —
18
+ * lives in `../catalog/surfaces.ts` under the same id, where every edge is
19
+ * EXECUTED by surfaces.test.ts. This module carries what a data record cannot:
20
+ * the complete, compiling host code.
21
+ */
22
+ export const composedThread: CodeRecipe = {
23
+ id: 'composed-thread',
24
+ title: 'Hand-composed thread (no kai-chat)',
25
+ intent:
26
+ 'A full chat surface composed from standalone elements — kai-thread renders the ' +
27
+ 'transcript, kai-composer takes input, kai-attachments stages files, kai-toast-region ' +
28
+ 'notifies, kai-conversation-item rows form the rail — with a host module doing every ' +
29
+ 'bit of wiring (host-coordinates: the kit has no store). Streams through ' +
30
+ 'createAssistantStream + createMockResponder, so it runs with no backend and no key; ' +
31
+ 'swapping the mock for a real /api/chat changes one line.',
32
+ ingredients: [
33
+ 'kai-thread',
34
+ 'kai-composer',
35
+ 'kai-attachments',
36
+ 'kai-toast-region',
37
+ 'kai-conversation-item',
38
+ 'kai-feedback-bar',
39
+ ],
40
+ notes: [
41
+ '`<kai-composer>` is the BARE editing surface — no send button, no attachments. The ' +
42
+ 'paperclip, the hidden file input, the staging tray and the send button here are the ' +
43
+ "host's. For the batteries-included composer row, use `<kai-prompt-input>` instead.",
44
+ 'Attachments are staged as `data:` URIs, NEVER as object URLs (`createObjectURL`). A ' +
45
+ '`blob:` URL resolves only inside the tab that minted it; `toOpenAIMessages` / ' +
46
+ '`toAnthropicMessages` refuse it with a written reason, and before they refused it an ' +
47
+ 'attachment-only turn reached the model as nothing at all.',
48
+ 'The HOST resolves tool calls. The mock (like a real provider) only ANNOUNCES one — ' +
49
+ 'walk `result.toolCalls` after the read and call `stream.upsertTool(id, { state: ' +
50
+ "'output-available', output })`, or the panel sits at input-available forever.",
51
+ 'The toast region is driven as DATA (`toasts` property, `kai-dismiss` event) because ' +
52
+ 'this app places its own `<kai-toast-region>` and owns the array. Note: `toast()` ' +
53
+ 'ADOPTS a markup-placed region (it creates its own only when none exists) and binds ' +
54
+ 'its store over `toasts`, replacing a data-driven array — so per region, own the ' +
55
+ 'array or call `toast()`, not both.',
56
+ 'A standalone `<kai-conversation-item>` (outside `<kai-conversations>`) activates ' +
57
+ 'itself: its body is a tabbable button and click / Enter / Space fire `kai-select` ' +
58
+ 'on the item with `{ id }` (non-bubbling — listen on the item). What it does NOT ' +
59
+ "carry is the container's list story — roving tabindex and arrow-key traversal " +
60
+ 'stay yours in a hand-rolled rail.',
61
+ '`<kai-thread>` fills the height its parent gives it and scrolls internally, which is ' +
62
+ 'why `.pane` is a flex column and `.thread` is `flex: 1; min-height: 0`.',
63
+ ],
64
+ files: [
65
+ {
66
+ path: 'index.html',
67
+ lang: 'html',
68
+ code: `<!doctype html>
69
+ <html lang="en">
70
+ <head>
71
+ <meta charset="UTF-8" />
72
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
73
+ <title>Composed thread</title>
74
+ <link rel="stylesheet" href="/src/styles.css" />
75
+ </head>
76
+ <body>
77
+ <!-- The thread is composed by hand from standalone kai-* elements;
78
+ the kai-chat drop-in is deliberately absent from this app. -->
79
+ <div class="app">
80
+ <aside class="rail">
81
+ <div class="rail-head">
82
+ <span class="rail-title">Conversations</span>
83
+ <button id="new-chat" class="ghost-btn" type="button">New</button>
84
+ </div>
85
+ <!-- kai-conversation-item rows are created in src/main.ts -->
86
+ <nav id="conversations" class="rail-list" aria-label="Conversations"></nav>
87
+ </aside>
88
+
89
+ <main class="pane">
90
+ <header class="pane-head">
91
+ <h1 id="pane-title">New chat</h1>
92
+ <span class="badge">mock responder — no provider contacted</span>
93
+ </header>
94
+
95
+ <kai-thread id="thread" class="thread" prose-size="sm">
96
+ <div slot="empty" class="empty">
97
+ <strong>Compose a message</strong>
98
+ <p>Attach a file with the paperclip and send it — it renders on your message.</p>
99
+ </div>
100
+ </kai-thread>
101
+
102
+ <!-- Shown once an assistant turn settles. -->
103
+ <kai-feedback-bar
104
+ id="feedback"
105
+ class="feedback"
106
+ hidden
107
+ bar-title="Was this reply helpful?"
108
+ collect-detail
109
+ detail-title="What went wrong?"
110
+ detail-placeholder="Optional details…"
111
+ submit-label="Send feedback"
112
+ thanks-message="Thanks — logged locally."
113
+ ></kai-feedback-bar>
114
+
115
+ <div class="composer-bar">
116
+ <!-- Staged (not yet sent) attachments. kai-composer has no attachment
117
+ support of its own, so the tray + the picker below are ours. -->
118
+ <kai-attachments
119
+ id="staged"
120
+ class="staged"
121
+ variant="inline"
122
+ removable
123
+ hover-card
124
+ show-media-type
125
+ hidden
126
+ ></kai-attachments>
127
+
128
+ <div class="composer-row">
129
+ <button id="attach" class="icon-btn" type="button" title="Attach a file" aria-label="Attach a file">
130
+ <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
131
+ </button>
132
+ <input id="file-input" type="file" multiple hidden />
133
+ <kai-composer
134
+ id="composer"
135
+ class="composer"
136
+ placeholder="Ask anything… (Enter to send)"
137
+ ></kai-composer>
138
+ <button id="send" class="send-btn" type="button">Send</button>
139
+ </div>
140
+ </div>
141
+ </main>
142
+ </div>
143
+
144
+ <!-- Placed explicitly rather than letting toast() auto-mount one. -->
145
+ <kai-toast-region id="toasts" position="bottom-right" appearance="card"></kai-toast-region>
146
+
147
+ <script type="module" src="/src/main.ts"></script>
148
+ </body>
149
+ </html>
150
+ `,
151
+ },
152
+ {
153
+ path: 'src/main.ts',
154
+ lang: 'ts',
155
+ code: `// The whole app: a chat surface composed by hand from standalone kai-*
156
+ // elements. <kai-chat> is deliberately not used — kai-thread renders the
157
+ // transcript, kai-composer takes input, and this module is the host that
158
+ // wires one to the other (the kit has no store: host-coordinates).
159
+ import '@kitn.ai/ui/elements'; // registers every <kai-*>; must come first
160
+ import '@kitn.ai/ui/theme.tokens.css';
161
+
162
+ import type {
163
+ AttachmentData,
164
+ ChatMessage,
165
+ KaiAttachmentsElement,
166
+ KaiComposerElement,
167
+ KaiConversationItemElement,
168
+ KaiFeedbackBarElement,
169
+ KaiThreadElement,
170
+ KaiToastRegionElement,
171
+ MessagePart,
172
+ ToastItem,
173
+ } from '@kitn.ai/ui/elements';
174
+ import { createAssistantStream, createMockResponder } from '@kitn.ai/ui/state';
175
+ import { readOpenAIStream } from '@kitn.ai/ui/wire';
176
+
177
+ // ── the fake model ──────────────────────────────────────────────────────────
178
+ // No key, no network, no provider. createMockResponder yields real OpenAI
179
+ // chat-completions SSE frames that readOpenAIStream parses on exactly the path
180
+ // a live route would take. Replies cycle one per turn; the third scripts a
181
+ // tool call so the thread's tool panel gets exercised too.
182
+ const mockResponse = createMockResponder({
183
+ replies: [
184
+ 'Hey — this thread is composed from standalone \`kai-*\` elements: ' +
185
+ '\`kai-thread\` for the transcript, \`kai-composer\` for input, and a host ' +
186
+ 'module wiring them together.\\n\\nAttach a file with the paperclip and send it.',
187
+ 'Got it. Anything you attach is staged in \`kai-attachments\` next to the ' +
188
+ 'composer, then rides along as a \`file\` part on the message you send.',
189
+ {
190
+ text: 'Let me look that up.',
191
+ toolCalls: [
192
+ { name: 'search_docs', arguments: { query: 'composing a kai thread', limit: 3 } },
193
+ ],
194
+ },
195
+ 'Streaming, tool calls, attachments and toasts all run through the same ' +
196
+ 'host wiring — swapping the mock for a real \`/api/chat\` changes one line.',
197
+ ],
198
+ chunkSize: 2,
199
+ });
200
+
201
+ // ── conversations ───────────────────────────────────────────────────────────
202
+
203
+ interface Conversation {
204
+ id: string;
205
+ title: string;
206
+ messages: ChatMessage[];
207
+ }
208
+
209
+ const conversations: Conversation[] = [
210
+ { id: crypto.randomUUID(), title: 'New chat', messages: [] },
211
+ ];
212
+ let activeId = conversations[0].id;
213
+
214
+ const active = (): Conversation =>
215
+ conversations.find((c) => c.id === activeId) ?? conversations[0];
216
+
217
+ // ── element handles (typed once, after upgrade) ─────────────────────────────
218
+
219
+ const el = <T extends HTMLElement>(id: string): T =>
220
+ document.getElementById(id) as T;
221
+
222
+ /** A picked File as a \`data:\` URI — the ONE form every consumer of
223
+ * \`AttachmentData.url\` accepts.
224
+ *
225
+ * NOT an object URL: a \`blob:\` URL resolves only inside the tab that minted
226
+ * it, so it renders a perfect preview here and is meaningless to anything
227
+ * downstream — \`toOpenAIMessages\` / \`toAnthropicMessages\` refuse it with a
228
+ * written reason, and before they refused it an attachment-only turn reached
229
+ * the model as nothing at all. A data URI previews identically, survives a
230
+ * reload, needs no revocation bookkeeping, and is what both providers take. */
231
+ const readAsDataUrl = (file: File): Promise<string> =>
232
+ new Promise((resolve, reject) => {
233
+ const reader = new FileReader();
234
+ reader.onload = () => resolve(String(reader.result));
235
+ reader.onerror = () => reject(reader.error ?? new Error('Could not read ' + file.name));
236
+ reader.readAsDataURL(file);
237
+ });
238
+
239
+ let staged: AttachmentData[] = [];
240
+ let sending = false;
241
+
242
+ async function main() {
243
+ // kai-* register through an async dynamic import (SSR-safety), so a property
244
+ // set before the upgrade is dropped. Wait for every element this host drives.
245
+ await Promise.all(
246
+ [
247
+ 'kai-thread',
248
+ 'kai-composer',
249
+ 'kai-attachments',
250
+ 'kai-conversation-item',
251
+ 'kai-feedback-bar',
252
+ 'kai-toast-region',
253
+ ].map((tag) => customElements.whenDefined(tag)),
254
+ );
255
+
256
+ const thread = el<KaiThreadElement>('thread');
257
+ const composer = el<KaiComposerElement>('composer');
258
+ const stagedEl = el<KaiAttachmentsElement>('staged');
259
+ const feedback = el<KaiFeedbackBarElement>('feedback');
260
+ const toastRegion = el<KaiToastRegionElement>('toasts');
261
+ const rail = el<HTMLElement>('conversations');
262
+ const title = el<HTMLElement>('pane-title');
263
+ const sendBtn = el<HTMLButtonElement>('send');
264
+ const attachBtn = el<HTMLButtonElement>('attach');
265
+ const fileInput = el<HTMLInputElement>('file-input');
266
+
267
+ // ── toasts ────────────────────────────────────────────────────────────────
268
+ // Driven as data rather than through the imperative toast(), because this app
269
+ // places its own <kai-toast-region> and owns the list. Don't ALSO call
270
+ // toast(): it would adopt this region and bind its own store over the
271
+ // toasts property, replacing the array this module owns.
272
+ let toasts: ToastItem[] = [];
273
+ const setToasts = (next: ToastItem[]) => {
274
+ toasts = next;
275
+ toastRegion.toasts = toasts; // new array reference every time
276
+ };
277
+ const notify = (message: string, item: Partial<ToastItem> = {}) =>
278
+ setToasts([...toasts, { id: crypto.randomUUID(), message, duration: 4000, ...item }]);
279
+
280
+ toastRegion.addEventListener('kai-dismiss', (event) => {
281
+ const { id } = (event as CustomEvent<{ id: string }>).detail;
282
+ setToasts(toasts.filter((t) => t.id !== id));
283
+ });
284
+
285
+ // ── rendering ─────────────────────────────────────────────────────────────
286
+
287
+ // Reassign, never mutate: the array reference is what tells the element
288
+ // something changed, and the row keys are the message objects themselves.
289
+ const setMessages = (next: ChatMessage[]) => {
290
+ active().messages = next;
291
+ thread.messages = next;
292
+ };
293
+
294
+ function renderRail() {
295
+ rail.replaceChildren(
296
+ ...conversations.map((conversation) => {
297
+ const row = document.createElement(
298
+ 'kai-conversation-item',
299
+ ) as KaiConversationItemElement;
300
+ row.conversationId = conversation.id;
301
+ row.active = conversation.id === activeId;
302
+ row.compact = true;
303
+ row.textContent = conversation.title;
304
+
305
+ const meta = document.createElement('span');
306
+ meta.slot = 'meta';
307
+ meta.textContent = conversation.messages.length
308
+ ? conversation.messages.length + ' messages'
309
+ : 'Empty';
310
+ row.append(meta);
311
+
312
+ // Standalone rows activate THEMSELVES: outside <kai-conversations>
313
+ // the item's body is a tabbable button and click / Enter / Space fire
314
+ // kai-select on the item (non-bubbling — listen on the row, and take
315
+ // the id from detail rather than re-deriving it). What standalone rows
316
+ // do not get is the container's LIST story: roving tabindex and
317
+ // arrow-key traversal stay yours in a hand-rolled rail.
318
+ row.addEventListener('kai-select', (e) => {
319
+ select((e as CustomEvent<{ id: string }>).detail.id);
320
+ });
321
+ return row;
322
+ }),
323
+ );
324
+ }
325
+
326
+ function select(id: string) {
327
+ activeId = id;
328
+ const conversation = active();
329
+ title.textContent = conversation.title;
330
+ thread.messages = conversation.messages;
331
+ feedback.hidden = true;
332
+ renderRail();
333
+ composer.focus();
334
+ }
335
+
336
+ function renderStaged() {
337
+ stagedEl.items = staged; // JS property, new array each time
338
+ stagedEl.hidden = staged.length === 0;
339
+ }
340
+
341
+ // ── attaching a file ──────────────────────────────────────────────────────
342
+ // kai-composer has no attachment affordance of its own (unlike
343
+ // kai-prompt-input), so the picker and the staging tray are the host's.
344
+
345
+ attachBtn.addEventListener('click', () => fileInput.click());
346
+
347
+ fileInput.addEventListener('change', () => {
348
+ const picked = [...(fileInput.files ?? [])];
349
+ fileInput.value = ''; // so the same file can be picked twice
350
+ if (!picked.length) return;
351
+ void (async () => {
352
+ const added = await Promise.all(
353
+ picked.map(
354
+ async (file): Promise<AttachmentData> => ({
355
+ id: crypto.randomUUID(),
356
+ type: 'file',
357
+ filename: file.name,
358
+ mediaType: file.type || 'application/octet-stream',
359
+ url: await readAsDataUrl(file), // data: URI — see readAsDataUrl
360
+ }),
361
+ ),
362
+ );
363
+ staged = [...staged, ...added];
364
+ renderStaged();
365
+ notify(
366
+ picked.length === 1 ? 'Attached ' + picked[0].name : 'Attached ' + picked.length + ' files',
367
+ { variant: 'success' },
368
+ );
369
+ })();
370
+ composer.focus();
371
+ });
372
+
373
+ stagedEl.addEventListener('kai-remove', (event) => {
374
+ const { id } = (event as CustomEvent<{ id: string }>).detail;
375
+ // A data: URI needs no revocation — dropping the item is the whole cleanup.
376
+ staged = staged.filter((item) => item.id !== id);
377
+ renderStaged();
378
+ });
379
+
380
+ // ── sending ───────────────────────────────────────────────────────────────
381
+
382
+ sendBtn.addEventListener('click', () => composer.send());
383
+
384
+ composer.addEventListener('kai-submit', (event) => {
385
+ const { text } = (event as CustomEvent<{ text: string }>).detail;
386
+ void send(text);
387
+ });
388
+
389
+ async function send(rawText: string) {
390
+ const text = rawText.trim();
391
+ // An attachment on its own is a legitimate message; empty + empty is not.
392
+ if (sending || (!text && !staged.length)) return;
393
+
394
+ const attachments = staged;
395
+ staged = [];
396
+ renderStaged();
397
+ composer.clear();
398
+
399
+ // A message's content is an ordered parts array — the file parts sit after
400
+ // the text, which is how kai-message renders them under the bubble.
401
+ const parts: MessagePart[] = [
402
+ ...(text ? [{ type: 'text', text } as const] : []),
403
+ ...attachments.map((attachment) => ({ type: 'file', attachment }) as const),
404
+ ];
405
+
406
+ const history: ChatMessage[] = [
407
+ ...active().messages,
408
+ { id: crypto.randomUUID(), role: 'user', parts },
409
+ ];
410
+ setMessages(history);
411
+
412
+ // First real message names the conversation.
413
+ if (active().title === 'New chat') {
414
+ active().title = text
415
+ ? text.slice(0, 40)
416
+ : (attachments[0]?.filename ?? 'Attachment');
417
+ title.textContent = active().title;
418
+ }
419
+ renderRail();
420
+
421
+ setBusy(true);
422
+ feedback.hidden = true;
423
+
424
+ // createAssistantStream appends the in-flight assistant message and folds
425
+ // every delta onto the right part, handing back a fresh array each time.
426
+ const stream = createAssistantStream((update) => setMessages(update(active().messages)));
427
+
428
+ try {
429
+ const prompt = text || (attachments[0]?.filename ?? '');
430
+ const result = await readOpenAIStream(mockResponse(prompt), stream);
431
+ if (result.error) notify('Model error: ' + result.error.message, { variant: 'error' });
432
+
433
+ // The mock announces tool calls but nothing executes them, so the panel
434
+ // would sit in \`input-available\` forever. Resolve each one here — the
435
+ // same place a real app would put its tool result.
436
+ for (const call of result.toolCalls) {
437
+ stream.upsertTool(call.id, {
438
+ state: 'output-available',
439
+ output: {
440
+ note: 'Local stub result — the mock responder announces the call, this app answers it.',
441
+ query: call.input?.query ?? call.argumentsText,
442
+ },
443
+ });
444
+ }
445
+ } catch (error) {
446
+ // abort() settles the message AND puts the reason where the user can see
447
+ // it, instead of leaving a permanently blank bubble.
448
+ stream.abort(
449
+ error instanceof Error && error.message ? error.message : 'Request failed',
450
+ );
451
+ notify('The reply failed.', { variant: 'error' });
452
+ console.error(error);
453
+ } finally {
454
+ stream.done(); // settles the turn; sink calls after this are dropped
455
+ setBusy(false);
456
+ feedback.hidden = false;
457
+ renderRail();
458
+ }
459
+ }
460
+
461
+ function setBusy(busy: boolean) {
462
+ sending = busy;
463
+ thread.loading = busy;
464
+ composer.loading = busy;
465
+ sendBtn.disabled = busy;
466
+ }
467
+
468
+ // ── message actions & feedback ────────────────────────────────────────────
469
+
470
+ thread.addEventListener('kai-message-action', (event) => {
471
+ const { action, state } = (event as CustomEvent<{
472
+ messageId: string;
473
+ action: string;
474
+ state?: 'on' | 'off';
475
+ }>).detail;
476
+ if (action === 'copy') notify('Copied to clipboard');
477
+ else if (state === 'on') notify(action === 'like' ? 'Marked helpful' : 'Marked unhelpful');
478
+ });
479
+
480
+ feedback.categories = ['Wrong answer', 'Too slow', 'Missed my attachment', 'Other'];
481
+
482
+ feedback.addEventListener('kai-feedback', (event) => {
483
+ const { value } = (event as CustomEvent<{ value: 'helpful' | 'not-helpful' }>).detail;
484
+ if (value === 'helpful') notify('Thanks for the feedback', { variant: 'success' });
485
+ });
486
+
487
+ feedback.addEventListener('kai-feedback-detail', (event) => {
488
+ const { category } = (event as CustomEvent<{ category?: string }>).detail;
489
+ notify(category ? 'Feedback filed: ' + category : 'Feedback filed', {
490
+ variant: 'success',
491
+ });
492
+ });
493
+
494
+ feedback.addEventListener('kai-close', () => {
495
+ feedback.hidden = true;
496
+ });
497
+
498
+ // ── new chat ──────────────────────────────────────────────────────────────
499
+
500
+ el<HTMLButtonElement>('new-chat').addEventListener('click', () => {
501
+ const conversation: Conversation = {
502
+ id: crypto.randomUUID(),
503
+ title: 'New chat',
504
+ messages: [],
505
+ };
506
+ conversations.unshift(conversation);
507
+ select(conversation.id);
508
+ });
509
+
510
+ // ── boot ──────────────────────────────────────────────────────────────────
511
+
512
+ renderRail();
513
+ renderStaged();
514
+ select(activeId);
515
+ }
516
+
517
+ void main();
518
+ `,
519
+ },
520
+ {
521
+ path: 'src/styles.css',
522
+ lang: 'css',
523
+ code: `:root {
524
+ color-scheme: light;
525
+ --rail-w: 15rem;
526
+ }
527
+
528
+ * { box-sizing: border-box; }
529
+
530
+ html, body { height: 100%; }
531
+
532
+ body {
533
+ margin: 0;
534
+ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
535
+ background: var(--color-background, #fff);
536
+ color: var(--color-foreground, #111);
537
+ }
538
+
539
+ .app {
540
+ position: fixed;
541
+ inset: 0;
542
+ display: grid;
543
+ grid-template-columns: var(--rail-w) 1fr;
544
+ text-align: start;
545
+ /* Stays below the toast region's z-index (var(--kai-toast-z, 100)). */
546
+ z-index: 90;
547
+ }
548
+
549
+ /* ── sidebar ─────────────────────────────────────────────── */
550
+
551
+ .rail {
552
+ display: flex;
553
+ flex-direction: column;
554
+ min-height: 0;
555
+ border-right: 1px solid var(--color-border, #e5e5e5);
556
+ background: var(--color-muted, #fafafa);
557
+ }
558
+
559
+ .rail-head {
560
+ display: flex;
561
+ align-items: center;
562
+ justify-content: space-between;
563
+ gap: 0.5rem;
564
+ padding: 0.75rem 0.75rem 0.5rem;
565
+ }
566
+
567
+ .rail-title {
568
+ font-size: 0.75rem;
569
+ font-weight: 600;
570
+ letter-spacing: 0.04em;
571
+ text-transform: uppercase;
572
+ opacity: 0.6;
573
+ }
574
+
575
+ .rail-list {
576
+ flex: 1;
577
+ min-height: 0;
578
+ overflow-y: auto;
579
+ padding: 0 0.5rem 0.75rem;
580
+ display: flex;
581
+ flex-direction: column;
582
+ gap: 0.125rem;
583
+ }
584
+
585
+ kai-conversation-item { display: block; }
586
+ kai-conversation-item::part(row) { border-radius: 0.5rem; }
587
+
588
+ /* ── main pane ───────────────────────────────────────────── */
589
+
590
+ .pane {
591
+ display: flex;
592
+ flex-direction: column;
593
+ min-height: 0;
594
+ min-width: 0;
595
+ }
596
+
597
+ .pane-head {
598
+ display: flex;
599
+ align-items: baseline;
600
+ gap: 0.75rem;
601
+ padding: 0.75rem 1rem;
602
+ border-bottom: 1px solid var(--color-border, #e5e5e5);
603
+ }
604
+
605
+ .pane-head h1 {
606
+ margin: 0;
607
+ font-size: 0.9375rem;
608
+ font-weight: 600;
609
+ }
610
+
611
+ .badge {
612
+ font-size: 0.6875rem;
613
+ padding: 0.125rem 0.5rem;
614
+ border-radius: 999px;
615
+ border: 1px solid var(--color-border, #e5e5e5);
616
+ opacity: 0.7;
617
+ }
618
+
619
+ /* kai-thread fills the height its parent gives it and scrolls internally,
620
+ so the pane is a flex column and the thread is the flexing row. */
621
+ .thread {
622
+ display: block;
623
+ flex: 1;
624
+ min-height: 0;
625
+ }
626
+
627
+ .empty {
628
+ display: flex;
629
+ flex-direction: column;
630
+ align-items: center;
631
+ gap: 0.25rem;
632
+ padding: 3rem 1rem;
633
+ text-align: center;
634
+ font-size: 0.875rem;
635
+ opacity: 0.75;
636
+ }
637
+
638
+ .empty p { margin: 0; }
639
+
640
+ .feedback {
641
+ display: block;
642
+ padding: 0 1rem 0.5rem;
643
+ }
644
+
645
+ .feedback[hidden] { display: none; }
646
+
647
+ /* ── composer ────────────────────────────────────────────── */
648
+
649
+ .composer-bar {
650
+ border-top: 1px solid var(--color-border, #e5e5e5);
651
+ padding: 0.625rem 1rem 0.875rem;
652
+ display: flex;
653
+ flex-direction: column;
654
+ gap: 0.5rem;
655
+ }
656
+
657
+ .staged { display: block; }
658
+ .staged[hidden] { display: none; }
659
+
660
+ .composer-row {
661
+ display: flex;
662
+ align-items: flex-end;
663
+ gap: 0.5rem;
664
+ }
665
+
666
+ .composer {
667
+ display: block;
668
+ flex: 1;
669
+ min-width: 0;
670
+ }
671
+
672
+ .icon-btn,
673
+ .send-btn,
674
+ .ghost-btn {
675
+ font: inherit;
676
+ cursor: pointer;
677
+ border-radius: 0.5rem;
678
+ border: 1px solid var(--color-border, #e5e5e5);
679
+ background: var(--color-background, #fff);
680
+ color: inherit;
681
+ }
682
+
683
+ .icon-btn {
684
+ display: inline-flex;
685
+ align-items: center;
686
+ justify-content: center;
687
+ width: 2.25rem;
688
+ height: 2.25rem;
689
+ flex: none;
690
+ }
691
+
692
+ .send-btn {
693
+ height: 2.25rem;
694
+ padding: 0 0.875rem;
695
+ flex: none;
696
+ font-weight: 600;
697
+ background: var(--color-primary, #111);
698
+ color: var(--color-primary-foreground, #fff);
699
+ border-color: transparent;
700
+ }
701
+
702
+ .send-btn:disabled { opacity: 0.5; cursor: default; }
703
+
704
+ .ghost-btn {
705
+ padding: 0.25rem 0.5rem;
706
+ font-size: 0.75rem;
707
+ }
708
+
709
+ .icon-btn:hover,
710
+ .ghost-btn:hover { background: var(--color-accent, #f0f0f0); }
711
+ `,
712
+ },
713
+ ],
714
+ };