@kitn.ai/ui 0.27.0 → 0.29.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 (612) hide show
  1. package/README.md +10 -2
  2. package/dist/{Icon-BnFKqqtY.js → Icon-DObhsRtm.js} +1 -1
  3. package/dist/{action-icons-CBskfBMz.js → action-icons-CcgNN2oT.js} +1 -1
  4. package/dist/agent-tooling/construct/public.d.ts +15 -0
  5. package/dist/agent-tooling/construct/schema.d.ts +111 -0
  6. package/dist/arrow-down-CjRU3JgV.js +1 -0
  7. package/dist/arrow-left-Bnpb1UEW.js +1 -0
  8. package/dist/{artifact-CvXEm1lS.js → artifact-Bwt7OgcR.js} +1 -1
  9. package/dist/{attachments-C43ZegEq.js → attachments-Qr4kg-2b.js} +1 -1
  10. package/dist/{audio-visualizer-B-79y1Tj.js → audio-visualizer-DToYdfSc.js} +1 -1
  11. package/dist/{badge-BpUbq8c0.js → badge-CdEu_jn2.js} +1 -1
  12. package/dist/{bell-sn17Ip9v.js → bell-DQAAOpDz.js} +1 -1
  13. package/dist/{button-BH6rN0U-.js → button-DkuOnGLy.js} +1 -1
  14. package/dist/{card-renderer-Cb1gQmth.js → card-renderer-Jx70m6_l.js} +1 -1
  15. package/dist/{card-routing-DifQgS7n.js → card-routing-0YidER_3.js} +1 -1
  16. package/dist/check-njkVdZu2.js +1 -0
  17. package/dist/{checkbox-Dc9Yov_B.js → checkbox-D7iRB3nL.js} +1 -1
  18. package/dist/{checkbox-group-B1kDLLYk.js → checkbox-group-B2_rpoPM.js} +1 -1
  19. package/dist/chevron-down-B72s6PXR.js +1 -0
  20. package/dist/chevron-right-BatuHzUm.js +1 -0
  21. package/dist/{choice-card-BT3c1S8g.js → choice-card-m0BYqqOK.js} +1 -1
  22. package/dist/circle-check-B62pODB3.js +1 -0
  23. package/dist/{circle-x-wobWkoSx.js → circle-x-BPG0iPst.js} +1 -1
  24. package/dist/circle-zx0ByzY9.js +1 -0
  25. package/dist/code-block-ClMLKb7C.js +1 -0
  26. package/dist/{collapsible-CPJbf6FM.js → collapsible-B4DlWicL.js} +1 -1
  27. package/dist/components/chat-thread.d.ts +89 -1
  28. package/dist/components/conversation-item.d.ts +16 -0
  29. package/dist/components/conversation-panel.d.ts +29 -0
  30. package/dist/components/home-panel.d.ts +34 -0
  31. package/dist/components/widget-tab-bar.d.ts +16 -0
  32. package/dist/{composer-CjngLzal.js → composer-sQ0HcvyG.js} +3 -3
  33. package/dist/{confirm-card-DCx_A4bU.js → confirm-card-rQWDQsnC.js} +1 -1
  34. package/dist/construct-cli.es.js +185 -17
  35. package/dist/construct.d.ts +5 -0
  36. package/dist/construct.js +327 -0
  37. package/dist/{context-BY8V-Nlp.js → context-0kg4ZX1J.js} +1 -1
  38. package/dist/controllable-CnGpMF6r.js +1 -0
  39. package/dist/conversation-item-BxwQLaFJ.js +1 -0
  40. package/dist/conversation-list-BCfGN1JU.js +1 -0
  41. package/dist/{copy-B6DO4PqB.js → copy-n9u9rqpi.js} +1 -1
  42. package/dist/core-C8fzo39E.js +1 -12
  43. package/dist/{create-tween-CnMHviKB.js → create-tween-C-q-JCM-.js} +1 -1
  44. package/dist/{create-tween-D1aiGZZh.js → create-tween-CRrJXxBd.js} +1 -1
  45. package/dist/{create-tween-BPzaefTp.js → create-tween-DZ3RRDHD.js} +1 -1
  46. package/dist/{create-tween-DUSQUKpr.js → create-tween-uPkArjIG.js} +1 -1
  47. package/dist/custom-elements.json +51 -2
  48. package/dist/{default-input-CucQEOqH.js → default-input-CaMrJkgH.js} +1 -1
  49. package/dist/define-By-uL588.js +1 -0
  50. package/dist/define.js +2 -2
  51. package/dist/define.server.js +2 -2
  52. package/dist/{disclosure-CbLtajUQ.js → disclosure-WUImBbDv.js} +1 -1
  53. package/dist/{dropdown-BwhViJFd.js → dropdown-wZVeJOMd.js} +1 -1
  54. package/dist/elements/agent-card.js +1 -1
  55. package/dist/elements/artifact.js +1 -1
  56. package/dist/elements/attachments.js +1 -1
  57. package/dist/elements/audio-visualizer.js +1 -1
  58. package/dist/elements/avatar.js +1 -1
  59. package/dist/elements/badge.js +1 -1
  60. package/dist/elements/button.js +1 -1
  61. package/dist/elements/card.js +1 -1
  62. package/dist/elements/cards.js +1 -1
  63. package/dist/elements/chain-of-thought.js +1 -1
  64. package/dist/elements/chat-scope-picker.js +1 -1
  65. package/dist/elements/chat-workspace.js +1 -1
  66. package/dist/elements/chat.js +1 -1
  67. package/dist/elements/checkbox-group.js +1 -1
  68. package/dist/elements/checkbox.js +1 -1
  69. package/dist/elements/checkpoint.js +1 -1
  70. package/dist/elements/choice.js +1 -1
  71. package/dist/elements/coachmark.js +1 -1
  72. package/dist/elements/code-block.js +1 -1
  73. package/dist/elements/command.js +1 -1
  74. package/dist/elements/compare.js +1 -1
  75. package/dist/elements/composer.js +1 -1
  76. package/dist/elements/confirm-card.js +1 -1
  77. package/dist/elements/context-meter.js +1 -1
  78. package/dist/elements/conversation-item.js +1 -1
  79. package/dist/elements/conversation-list.js +1 -1
  80. package/dist/elements/dialog.js +1 -1
  81. package/dist/elements/dock.js +3 -3
  82. package/dist/elements/dropdown.js +1 -1
  83. package/dist/elements/editable-label.js +1 -1
  84. package/dist/elements/embed.js +1 -1
  85. package/dist/elements/empty.js +1 -1
  86. package/dist/elements/feedback-bar.js +1 -1
  87. package/dist/elements/file-tree.js +1 -1
  88. package/dist/elements/file-upload.js +1 -1
  89. package/dist/elements/form.js +1 -1
  90. package/dist/elements/hover-card.js +1 -1
  91. package/dist/elements/icon.js +1 -1
  92. package/dist/elements/image.js +1 -1
  93. package/dist/elements/input.js +1 -1
  94. package/dist/elements/kbd.js +1 -1
  95. package/dist/elements/link-preview.js +1 -1
  96. package/dist/elements/loader.js +1 -1
  97. package/dist/elements/markdown.js +1 -1
  98. package/dist/elements/menu.js +1 -1
  99. package/dist/elements/message-skills.js +1 -1
  100. package/dist/elements/message.js +1 -1
  101. package/dist/elements/model-switcher.js +1 -1
  102. package/dist/elements/nav.js +1 -1
  103. package/dist/elements/notice.js +1 -1
  104. package/dist/elements/pane-grid.js +1 -1
  105. package/dist/elements/pane-group.js +1 -1
  106. package/dist/elements/pane.js +1 -1
  107. package/dist/elements/popover.js +1 -1
  108. package/dist/elements/progress-bar.js +1 -1
  109. package/dist/elements/prompt-dock.js +1 -1
  110. package/dist/elements/prompt-input.js +1 -1
  111. package/dist/elements/prompt-suggestions.js +1 -1
  112. package/dist/elements/radio-group.js +1 -1
  113. package/dist/elements/reasoning.js +1 -1
  114. package/dist/elements/remote.js +1 -1
  115. package/dist/elements/resizable.js +1 -1
  116. package/dist/elements/response-stream.js +1 -1
  117. package/dist/elements/screen.js +1 -1
  118. package/dist/elements/scroll-area.js +1 -1
  119. package/dist/elements/scroll-button.js +1 -1
  120. package/dist/elements/search.js +1 -1
  121. package/dist/elements/segmented.js +1 -1
  122. package/dist/elements/select.js +1 -1
  123. package/dist/elements/separator.js +1 -1
  124. package/dist/elements/setting-item.js +1 -1
  125. package/dist/elements/settings-group.js +1 -1
  126. package/dist/elements/skeleton.js +1 -1
  127. package/dist/elements/slider.js +1 -1
  128. package/dist/elements/source.js +1 -1
  129. package/dist/elements/status.js +1 -1
  130. package/dist/elements/switch.js +1 -1
  131. package/dist/elements/tabs.js +1 -1
  132. package/dist/elements/tasks.js +1 -1
  133. package/dist/elements/text-shimmer.js +1 -1
  134. package/dist/elements/thinking-bar.js +1 -1
  135. package/dist/elements/thread.js +1 -1
  136. package/dist/elements/toast.js +1 -1
  137. package/dist/elements/tool.js +1 -1
  138. package/dist/elements/tooltip.js +1 -1
  139. package/dist/elements/voice-input.js +1 -1
  140. package/dist/elements/voice-output.js +1 -1
  141. package/dist/elements.d.ts +20 -4
  142. package/dist/{ellipsis-DFr4Vqr3.js → ellipsis-CbOpJnU3.js} +1 -1
  143. package/dist/{embed-5s_vU4J0.js → embed-CrfjkbUG.js} +1 -1
  144. package/dist/engine-javascript-C1x7zo1_.js +1 -141
  145. package/dist/{external-link-u9d85ORQ.js → external-link-ByXAwBBQ.js} +1 -1
  146. package/dist/{file-text-CX7_x42o.js → file-text-DMib2qwt.js} +1 -1
  147. package/dist/{file-tree-D3kBjXI5.js → file-tree-CJqM2aP7.js} +1 -1
  148. package/dist/{folder-V-YdIL8f.js → folder-_BAb929C.js} +1 -1
  149. package/dist/{form-BRNUMCN2.js → form-DSZgZQZk.js} +1 -1
  150. package/dist/{hover-card-DaeiYrTA.js → hover-card-BQbul9eq.js} +1 -1
  151. package/dist/{icon-BpixdZNq.js → icon-CdcfRhYI.js} +1 -1
  152. package/dist/index.d.ts +3 -1
  153. package/dist/index.js +2842 -2703
  154. package/dist/index.server.js +2820 -2681
  155. package/dist/{info-8mFsIjS3.js → info-DsFjGuI_.js} +1 -1
  156. package/dist/{input-d1Yuu-hz.js → input-DKbmkMos.js} +1 -1
  157. package/dist/kai.es.js +1 -1
  158. package/dist/{kbd-961zMPFB.js → kbd-PvdGhX4s.js} +1 -1
  159. package/dist/{link-preview-DIIbV2Sd.js → link-preview-DbM1866N.js} +1 -1
  160. package/dist/{link-DlZZBGaR.js → link-zF8PzWfF.js} +1 -1
  161. package/dist/{loader-YQszHFaW.js → loader-BM4CEz4G.js} +1 -1
  162. package/dist/{markdown-CVk1MPsj.js → markdown-LMvmAyBk.js} +7 -7
  163. package/dist/mcp.es.js +79 -5
  164. package/dist/{message-CwKVEdZg.js → message-BSsgvHvf.js} +1 -1
  165. package/dist/{message-DS8lzHc1.js → message-BYZECyek.js} +1 -1
  166. package/dist/message-circle-DruwObfX.js +1 -0
  167. package/dist/message-square-BG6q6mlm.js +1 -0
  168. package/dist/{minimize-2-UEZmP2QT.js → minimize-2-BQRoBV1V.js} +1 -1
  169. package/dist/{model-switcher-Kk1jEQ5t.js → model-switcher-CMpCOYcB.js} +1 -1
  170. package/dist/{overlay-C1od6LOz.js → overlay-Cb-MkyDa.js} +1 -1
  171. package/dist/{panel-right-ryET0yyn.js → panel-right-i8warFxT.js} +1 -1
  172. package/dist/{paperclip-BDNoZFJP.js → paperclip-ByY3UVO6.js} +1 -1
  173. package/dist/play-BvKKq3fX.js +1 -0
  174. package/dist/primitives/conversation-store.d.ts +54 -0
  175. package/dist/{progress-bar-BvYX0aoy.js → progress-bar-jVAHvMUf.js} +1 -1
  176. package/dist/{prompt-suggestion-BRFu2lcu.js → prompt-suggestion-CD-qtNgC.js} +1 -1
  177. package/dist/{radio-DcL23cNJ.js → radio-BsoBMhkF.js} +1 -1
  178. package/dist/react/index.d.ts +393 -0
  179. package/dist/react.js +20 -20
  180. package/dist/{reasoning-Cackq4Rh.js → reasoning-4kBPtlTx.js} +1 -1
  181. package/dist/register-impl-B1hLkrI8.js +424 -0
  182. package/dist/{resizable-Cp9HUYih.js → resizable-uPmY9VY-.js} +1 -1
  183. package/dist/{rotate-ccw-0DLRDHH5.js → rotate-ccw-B2xn93py.js} +1 -1
  184. package/dist/{rotate-cw-DOB9IGcU.js → rotate-cw-CMVLoCyH.js} +1 -1
  185. package/dist/{scroll-area-emVmWP4K.js → scroll-area-BqLUo8ZZ.js} +1 -1
  186. package/dist/{scroll-button-CeP_gv1x.js → scroll-button-DslXiJyL.js} +1 -1
  187. package/dist/{select-CWmu00tS.js → select-2cLRtPGT.js} +1 -1
  188. package/dist/{separator-CE6vly6z.js → separator-BWQtNJcM.js} +1 -1
  189. package/dist/{settings-CE-78SvZ.js → settings-BBR63jLg.js} +1 -1
  190. package/dist/{settings-group-ZFWNxFQR.js → settings-group-B2ciy-Iw.js} +1 -1
  191. package/dist/{skeleton-BebdP4mf.js → skeleton-CkHI-HgC.js} +1 -1
  192. package/dist/{slider-BAKRYUlz.js → slider-DDR9U-i0.js} +1 -1
  193. package/dist/{solid-BE5ui6sy.js → solid-BzCFdL25.js} +7720 -7058
  194. package/dist/{solid-DFhsce3O.js → solid-DruVOXnf.js} +5864 -5283
  195. package/dist/solid.d.ts +6 -2
  196. package/dist/solid.js +217 -210
  197. package/dist/solid.server.js +217 -210
  198. package/dist/{source-B0FlguSx.js → source-GEnFF528.js} +1 -1
  199. package/dist/{star-CBMZvLuN.js → star-CilHq8GP.js} +1 -1
  200. package/dist/store-Ciyk6eZG.js +1 -0
  201. package/dist/{switch-CViARZCy.js → switch-KkeQIbuH.js} +1 -1
  202. package/dist/{tasks-card-MjCcOhR_.js → tasks-card-BrN4bggJ.js} +1 -1
  203. package/dist/{text-shimmer-DKlwRF2G.js → text-shimmer-Dcj1MHuq.js} +1 -1
  204. package/dist/{textarea-3ay2Me2-.js → textarea-Dpvbngbg.js} +1 -1
  205. package/dist/theme.tokens.css +28 -0
  206. package/dist/{thumbs-up-DQcu2HMO.js → thumbs-up-CsT9Wzb9.js} +1 -1
  207. package/dist/{toast-store-C6yKOhbk.js → toast-store-tgK6MuMv.js} +1 -1
  208. package/dist/{tool-BCYNlfKy.js → tool-DzUjIBT8.js} +1 -1
  209. package/dist/{tooltip-05zI4hjs.js → tooltip-Bkkg_4t0.js} +1 -1
  210. package/dist/{trash-2-BR1RxGky.js → trash-2-jBKxjGGQ.js} +1 -1
  211. package/dist/{triangle-alert-DHohDOCy.js → triangle-alert-DlQ68ppf.js} +1 -1
  212. package/dist/types.d.ts +48 -3
  213. package/dist/ui/dock.d.ts +29 -0
  214. package/dist/{upload-BbGW6A_u.js → upload-TcAHXv9W.js} +1 -1
  215. package/dist/{url-scheme-policy-DHpoTJwB.js → url-scheme-policy-DR5DgvkM.js} +1 -1
  216. package/dist/{use-card-resolution-CJW4grFa.js → use-card-resolution-DaZqAdWf.js} +1 -1
  217. package/dist/{variant-aurora-xiMPty8f.js → variant-aurora-BhLuYxJR.js} +1 -1
  218. package/dist/{variant-aurora-BUOVgPOB.js → variant-aurora-CNmfHhcx.js} +2 -2
  219. package/dist/{variant-aurora-CUsUJvFI.js → variant-aurora-D6GsdTPA.js} +2 -2
  220. package/dist/{variant-aurora-CW2i4bfr.js → variant-aurora-DbW_OWL2.js} +1 -1
  221. package/dist/{variant-custom-D91HjAKz.js → variant-custom-BRvaNHSi.js} +1 -1
  222. package/dist/{variant-custom-BQtOnmeO.js → variant-custom-BvYHR62b.js} +1 -1
  223. package/dist/{variant-custom-CAnzzppW.js → variant-custom-DMTrEO5w.js} +2 -2
  224. package/dist/{variant-custom-CAm9L-E5.js → variant-custom-DV2x254s.js} +2 -2
  225. package/dist/{variant-wave-Ca1Ls4_y.js → variant-wave-BNMGrDfj.js} +2 -2
  226. package/dist/{variant-wave-uY5crU_K.js → variant-wave-BpDd8t3Z.js} +1 -1
  227. package/dist/{variant-wave-CxX39DKd.js → variant-wave-CyBueXj9.js} +2 -2
  228. package/dist/{variant-wave-DYyzIIZv.js → variant-wave-sp-qwsdI.js} +1 -1
  229. package/dist/x-Z5UntkIJ.js +1 -0
  230. package/frameworks/react/index.tsx +14 -4
  231. package/llms-full.txt +7 -2
  232. package/package.json +16 -16
  233. package/src/elements/element-meta.json +49 -6
  234. package/theme.css +28 -0
  235. package/bin/route.test.js +0 -58
  236. package/dist/arrow-down-Br0qtpsz.js +0 -1
  237. package/dist/arrow-left-Dj7xgE12.js +0 -1
  238. package/dist/check-DPeeMUYx.js +0 -1
  239. package/dist/chevron-down-CHSWk7ZT.js +0 -1
  240. package/dist/chevron-right-B7l_fMgx.js +0 -1
  241. package/dist/circle-Bb0yOpqM.js +0 -1
  242. package/dist/circle-check-BGZpCiz7.js +0 -1
  243. package/dist/code-block-CUQ5mtv0.js +0 -1
  244. package/dist/controllable-D43BKmtX.js +0 -1
  245. package/dist/conversation-list-D4lLU_yS.js +0 -1
  246. package/dist/define-CGGX-7Vg.js +0 -1
  247. package/dist/message-circle-Xf8Q-vZp.js +0 -1
  248. package/dist/message-square-Cxnwgkns.js +0 -1
  249. package/dist/play-OFIvYXUQ.js +0 -1
  250. package/dist/register-impl-C7rENvPK.js +0 -424
  251. package/dist/store-7eoadydQ.js +0 -1
  252. package/dist/x-C5m1JFgi.js +0 -1
  253. package/src/agent-tooling/archetypes.ts +0 -205
  254. package/src/agent-tooling/catalog/README.md +0 -676
  255. package/src/agent-tooling/catalog/catalog-types.ts +0 -231
  256. package/src/agent-tooling/catalog/fabrications.ts +0 -96
  257. package/src/agent-tooling/catalog/invariants.ts +0 -284
  258. package/src/agent-tooling/catalog/labs-titles.ts +0 -114
  259. package/src/agent-tooling/catalog/scenarios.ts +0 -87
  260. package/src/agent-tooling/catalog/surfaces.ts +0 -347
  261. package/src/agent-tooling/construct/cli-entry.ts +0 -8
  262. package/src/agent-tooling/construct/cli.ts +0 -131
  263. package/src/agent-tooling/construct/codegen.ts +0 -1353
  264. package/src/agent-tooling/construct/construct.v1.schema.json +0 -250
  265. package/src/agent-tooling/construct/dev.ts +0 -148
  266. package/src/agent-tooling/construct/fixtures/demo-widget.construct.json +0 -7
  267. package/src/agent-tooling/construct/fixtures/ops-console.construct.json +0 -44
  268. package/src/agent-tooling/construct/fixtures/owner-widget.construct.json +0 -23
  269. package/src/agent-tooling/construct/schema.ts +0 -371
  270. package/src/agent-tooling/integrations/anthropic.ts +0 -442
  271. package/src/agent-tooling/integrations/cloudflare.ts +0 -218
  272. package/src/agent-tooling/integrations/langgraph.ts +0 -133
  273. package/src/agent-tooling/integrations/mastra.ts +0 -182
  274. package/src/agent-tooling/integrations/mock.ts +0 -148
  275. package/src/agent-tooling/integrations/ollama.ts +0 -97
  276. package/src/agent-tooling/integrations/openai.ts +0 -95
  277. package/src/agent-tooling/integrations/openrouter.ts +0 -82
  278. package/src/agent-tooling/integrations/pi.ts +0 -176
  279. package/src/agent-tooling/integrations/pydantic-ai.ts +0 -108
  280. package/src/agent-tooling/integrations/vercel-ai-sdk.ts +0 -398
  281. package/src/agent-tooling/mcp/css-raw.d.ts +0 -12
  282. package/src/agent-tooling/mcp/manifest.ts +0 -422
  283. package/src/agent-tooling/mcp/server.ts +0 -116
  284. package/src/agent-tooling/mcp/stdio.ts +0 -18
  285. package/src/agent-tooling/mcp/tools/construct.ts +0 -130
  286. package/src/agent-tooling/mcp/tools/debug.ts +0 -621
  287. package/src/agent-tooling/mcp/tools/reference.ts +0 -980
  288. package/src/agent-tooling/mcp/tools/scaffold.ts +0 -6708
  289. package/src/agent-tooling/mcp/tools/theme.ts +0 -456
  290. package/src/agent-tooling/mcp/tools/types.ts +0 -14
  291. package/src/agent-tooling/mcp/validate-args.ts +0 -141
  292. package/src/agent-tooling/recipes/composed-thread.ts +0 -714
  293. package/src/agent-tooling/recipes/index.ts +0 -22
  294. package/src/agent-tooling/recipes/types.ts +0 -32
  295. package/src/agent-tooling/registry.ts +0 -132
  296. package/src/agent-tooling/route-emit.ts +0 -305
  297. package/src/agent-tooling/types.ts +0 -390
  298. package/src/components/artifact-card.tsx +0 -120
  299. package/src/components/artifact.tsx +0 -914
  300. package/src/components/attachment-types.ts +0 -66
  301. package/src/components/attachments.tsx +0 -536
  302. package/src/components/audio-visualizer/audio-visualizer.voice-fixture.ts +0 -257
  303. package/src/components/audio-visualizer/aurora.glsl.ts +0 -330
  304. package/src/components/audio-visualizer/fit-scale.ts +0 -112
  305. package/src/components/audio-visualizer/index.tsx +0 -528
  306. package/src/components/audio-visualizer/labs/lab-choreography.ts +0 -187
  307. package/src/components/audio-visualizer/labs/lab-shaders.ts +0 -363
  308. package/src/components/audio-visualizer/labs/lab-visualizer.tsx +0 -102
  309. package/src/components/audio-visualizer/shader-canvas.tsx +0 -876
  310. package/src/components/audio-visualizer/sizes.ts +0 -54
  311. package/src/components/audio-visualizer/variant-aurora.tsx +0 -305
  312. package/src/components/audio-visualizer/variant-bar.tsx +0 -175
  313. package/src/components/audio-visualizer/variant-custom.tsx +0 -344
  314. package/src/components/audio-visualizer/variant-grid.tsx +0 -175
  315. package/src/components/audio-visualizer/variant-radial.tsx +0 -163
  316. package/src/components/audio-visualizer/variant-wave.tsx +0 -130
  317. package/src/components/audio-visualizer/wave.glsl.ts +0 -130
  318. package/src/components/card-fallback.tsx +0 -60
  319. package/src/components/card-renderer.tsx +0 -220
  320. package/src/components/card.tsx +0 -212
  321. package/src/components/chain-of-thought.tsx +0 -348
  322. package/src/components/chat-container.tsx +0 -89
  323. package/src/components/chat-scope-picker.tsx +0 -57
  324. package/src/components/chat-thread.tsx +0 -518
  325. package/src/components/checkpoint.tsx +0 -88
  326. package/src/components/choice-card.tsx +0 -743
  327. package/src/components/coachmark.tsx +0 -249
  328. package/src/components/code-block.tsx +0 -181
  329. package/src/components/composer-dom.ts +0 -159
  330. package/src/components/composer-highlight.ts +0 -242
  331. package/src/components/composer-history.ts +0 -82
  332. package/src/components/composer.tsx +0 -1075
  333. package/src/components/confirm-card.tsx +0 -402
  334. package/src/components/context.tsx +0 -377
  335. package/src/components/conversation-item.tsx +0 -218
  336. package/src/components/conversation-list.tsx +0 -429
  337. package/src/components/dismissed-stub.tsx +0 -80
  338. package/src/components/embed.tsx +0 -200
  339. package/src/components/empty.tsx +0 -177
  340. package/src/components/feedback-bar.tsx +0 -166
  341. package/src/components/file-tree.tsx +0 -530
  342. package/src/components/file-upload.tsx +0 -167
  343. package/src/components/form-widgets.tsx +0 -525
  344. package/src/components/form.tsx +0 -1296
  345. package/src/components/image.tsx +0 -65
  346. package/src/components/link-preview.tsx +0 -195
  347. package/src/components/loader.tsx +0 -367
  348. package/src/components/markdown.tsx +0 -162
  349. package/src/components/message-skills.tsx +0 -40
  350. package/src/components/message.tsx +0 -765
  351. package/src/components/model-switcher.tsx +0 -132
  352. package/src/components/prompt-input.tsx +0 -188
  353. package/src/components/prompt-suggestion.tsx +0 -150
  354. package/src/components/reasoning.tsx +0 -293
  355. package/src/components/response-compare-types.ts +0 -152
  356. package/src/components/response-compare.tsx +0 -455
  357. package/src/components/response-stream.tsx +0 -109
  358. package/src/components/screen.tsx +0 -181
  359. package/src/components/scroll-button.tsx +0 -93
  360. package/src/components/source.tsx +0 -192
  361. package/src/components/tasks-card.tsx +0 -801
  362. package/src/components/text-shimmer.tsx +0 -37
  363. package/src/components/thinking-bar.tsx +0 -50
  364. package/src/components/thread.tsx +0 -228
  365. package/src/components/toast.tsx +0 -503
  366. package/src/components/tool-classify.ts +0 -26
  367. package/src/components/tool-types.ts +0 -49
  368. package/src/components/tool.tsx +0 -190
  369. package/src/components/use-card-resolution.ts +0 -44
  370. package/src/components/voice-input.tsx +0 -222
  371. package/src/components/voice-output.tsx +0 -242
  372. package/src/components/workspace-shell.tsx +0 -285
  373. package/src/diagnostics/hook.ts +0 -352
  374. package/src/diagnostics/index.ts +0 -82
  375. package/src/diagnostics/report-request.ts +0 -296
  376. package/src/elements/agent-card.tsx +0 -67
  377. package/src/elements/artifact.tsx +0 -194
  378. package/src/elements/attachments.tsx +0 -140
  379. package/src/elements/audio-visualizer.tsx +0 -227
  380. package/src/elements/autoloader.ts +0 -89
  381. package/src/elements/avatar.tsx +0 -33
  382. package/src/elements/badge.tsx +0 -32
  383. package/src/elements/button.tsx +0 -149
  384. package/src/elements/card.tsx +0 -133
  385. package/src/elements/cards.tsx +0 -266
  386. package/src/elements/chain-of-thought.tsx +0 -141
  387. package/src/elements/chat-scope-picker.tsx +0 -65
  388. package/src/elements/chat-types.ts +0 -102
  389. package/src/elements/chat-workspace.tsx +0 -188
  390. package/src/elements/chat.tsx +0 -212
  391. package/src/elements/checkbox-group.tsx +0 -164
  392. package/src/elements/checkbox.tsx +0 -134
  393. package/src/elements/checkpoint.tsx +0 -47
  394. package/src/elements/choice.tsx +0 -100
  395. package/src/elements/coachmark.tsx +0 -90
  396. package/src/elements/code-block.tsx +0 -60
  397. package/src/elements/command.tsx +0 -197
  398. package/src/elements/compare.tsx +0 -111
  399. package/src/elements/compiled.css +0 -2
  400. package/src/elements/composer.tsx +0 -162
  401. package/src/elements/confirm-card.tsx +0 -76
  402. package/src/elements/context-meter.tsx +0 -107
  403. package/src/elements/conversation-item.tsx +0 -120
  404. package/src/elements/conversation-list.tsx +0 -203
  405. package/src/elements/css.ts +0 -5
  406. package/src/elements/default-input.tsx +0 -392
  407. package/src/elements/define-entry.ts +0 -12
  408. package/src/elements/define.tsx +0 -563
  409. package/src/elements/diagnostic-events.ts +0 -114
  410. package/src/elements/dialog.tsx +0 -145
  411. package/src/elements/disclosure.ts +0 -95
  412. package/src/elements/dock.tsx +0 -215
  413. package/src/elements/dropdown.tsx +0 -123
  414. package/src/elements/editable-label.tsx +0 -140
  415. package/src/elements/element-data-types.ts +0 -152
  416. package/src/elements/element-diagnostics.ts +0 -392
  417. package/src/elements/element-manifest.json +0 -354
  418. package/src/elements/element-nonscalar.json +0 -185
  419. package/src/elements/element-types.d.ts +0 -4337
  420. package/src/elements/embed.tsx +0 -35
  421. package/src/elements/empty.tsx +0 -29
  422. package/src/elements/feedback-bar.tsx +0 -66
  423. package/src/elements/file-tree.tsx +0 -62
  424. package/src/elements/file-upload.tsx +0 -44
  425. package/src/elements/form.tsx +0 -94
  426. package/src/elements/hover-card.tsx +0 -80
  427. package/src/elements/icon.tsx +0 -41
  428. package/src/elements/image.tsx +0 -32
  429. package/src/elements/input.tsx +0 -492
  430. package/src/elements/kbd.tsx +0 -45
  431. package/src/elements/link-preview.tsx +0 -34
  432. package/src/elements/loader.tsx +0 -25
  433. package/src/elements/markdown.tsx +0 -38
  434. package/src/elements/menu.tsx +0 -241
  435. package/src/elements/message-skills.tsx +0 -83
  436. package/src/elements/message.tsx +0 -361
  437. package/src/elements/model-switcher.tsx +0 -121
  438. package/src/elements/nav.tsx +0 -87
  439. package/src/elements/notice.tsx +0 -53
  440. package/src/elements/pane-grid.tsx +0 -111
  441. package/src/elements/pane-group.tsx +0 -119
  442. package/src/elements/pane.tsx +0 -129
  443. package/src/elements/popover.tsx +0 -81
  444. package/src/elements/progress-bar.tsx +0 -39
  445. package/src/elements/prompt-dock.tsx +0 -82
  446. package/src/elements/prompt-input.tsx +0 -240
  447. package/src/elements/prompt-suggestions.tsx +0 -113
  448. package/src/elements/radio-group.tsx +0 -129
  449. package/src/elements/reasoning.tsx +0 -71
  450. package/src/elements/register-impl.ts +0 -148
  451. package/src/elements/register.ts +0 -76
  452. package/src/elements/remote.tsx +0 -225
  453. package/src/elements/resizable.globals.d.ts +0 -36
  454. package/src/elements/resizable.tsx +0 -704
  455. package/src/elements/response-stream.tsx +0 -40
  456. package/src/elements/screen.tsx +0 -90
  457. package/src/elements/scroll-area.tsx +0 -33
  458. package/src/elements/scroll-button.tsx +0 -179
  459. package/src/elements/search.tsx +0 -185
  460. package/src/elements/segmented.tsx +0 -129
  461. package/src/elements/select.tsx +0 -165
  462. package/src/elements/separator.tsx +0 -36
  463. package/src/elements/setting-item.tsx +0 -50
  464. package/src/elements/settings-group.tsx +0 -37
  465. package/src/elements/skeleton.tsx +0 -45
  466. package/src/elements/slider.tsx +0 -171
  467. package/src/elements/slot-text.ts +0 -73
  468. package/src/elements/slots.ts +0 -787
  469. package/src/elements/source.tsx +0 -126
  470. package/src/elements/status.tsx +0 -42
  471. package/src/elements/styles.css +0 -328
  472. package/src/elements/switch.tsx +0 -118
  473. package/src/elements/tabs.tsx +0 -95
  474. package/src/elements/tasks.tsx +0 -103
  475. package/src/elements/text-shimmer.tsx +0 -28
  476. package/src/elements/thinking-bar.tsx +0 -43
  477. package/src/elements/thread.tsx +0 -139
  478. package/src/elements/toast.tsx +0 -106
  479. package/src/elements/tool.tsx +0 -78
  480. package/src/elements/tooltip.tsx +0 -85
  481. package/src/elements/validate-messages.ts +0 -76
  482. package/src/elements/voice-input.tsx +0 -100
  483. package/src/elements/voice-output.tsx +0 -82
  484. package/src/index.ts +0 -428
  485. package/src/primitives/audio-bands.ts +0 -174
  486. package/src/primitives/card-component-types.ts +0 -63
  487. package/src/primitives/card-contract.ts +0 -80
  488. package/src/primitives/card-data-types.ts +0 -361
  489. package/src/primitives/card-host.tsx +0 -37
  490. package/src/primitives/card-recovery.ts +0 -160
  491. package/src/primitives/card-registry.tsx +0 -78
  492. package/src/primitives/card-resolution.ts +0 -36
  493. package/src/primitives/card-routing.ts +0 -85
  494. package/src/primitives/card-schemas/artifact.schema.json +0 -92
  495. package/src/primitives/card-schemas/card-envelope.schema.json +0 -14
  496. package/src/primitives/card-schemas/card-event.schema.json +0 -12
  497. package/src/primitives/card-schemas/choice.schema.json +0 -75
  498. package/src/primitives/card-schemas/confirm.schema.json +0 -65
  499. package/src/primitives/card-schemas/embed.schema.json +0 -63
  500. package/src/primitives/card-schemas/form.result.schema.json +0 -7
  501. package/src/primitives/card-schemas/form.schema.json +0 -53
  502. package/src/primitives/card-schemas/link.schema.json +0 -54
  503. package/src/primitives/card-schemas/tasks.result.schema.json +0 -16
  504. package/src/primitives/card-schemas/tasks.schema.json +0 -83
  505. package/src/primitives/card-tags.ts +0 -61
  506. package/src/primitives/card-validate-cards.ts +0 -255
  507. package/src/primitives/card-validate-schemas.ts +0 -58
  508. package/src/primitives/card-validate.ts +0 -131
  509. package/src/primitives/chat-config.tsx +0 -103
  510. package/src/primitives/composer-model.ts +0 -49
  511. package/src/primitives/composer-triggers.ts +0 -35
  512. package/src/primitives/controllable.ts +0 -21
  513. package/src/primitives/create-kai-chat.ts +0 -66
  514. package/src/primitives/create-tween.ts +0 -266
  515. package/src/primitives/embed-providers.ts +0 -254
  516. package/src/primitives/field-mask.ts +0 -256
  517. package/src/primitives/field-semantics.ts +0 -115
  518. package/src/primitives/highlighter.ts +0 -157
  519. package/src/primitives/input-mask.ts +0 -853
  520. package/src/primitives/link-preview.ts +0 -87
  521. package/src/primitives/message-feedback.ts +0 -124
  522. package/src/primitives/pdf-preview.ts +0 -121
  523. package/src/primitives/toast-store.ts +0 -338
  524. package/src/primitives/url-scheme-policy.ts +0 -70
  525. package/src/primitives/use-audio-analysis.ts +0 -340
  526. package/src/primitives/use-auto-resize.ts +0 -31
  527. package/src/primitives/use-resize-observer.ts +0 -45
  528. package/src/primitives/use-sequencer.ts +0 -72
  529. package/src/primitives/use-speech-recognition.ts +0 -146
  530. package/src/primitives/use-stick-to-bottom.ts +0 -75
  531. package/src/primitives/use-text-stream.ts +0 -143
  532. package/src/primitives/use-voice-recorder.ts +0 -62
  533. package/src/primitives/visualizer-sequences.ts +0 -350
  534. package/src/remote/host-embed.ts +0 -345
  535. package/src/remote/index.ts +0 -2
  536. package/src/remote/origin.ts +0 -30
  537. package/src/remote/provider-runtime.ts +0 -262
  538. package/src/remote/provider.ts +0 -2
  539. package/src/remote/validate.ts +0 -22
  540. package/src/remote/version.ts +0 -12
  541. package/src/remote/wire.ts +0 -48
  542. package/src/schemas/from-tool-call.ts +0 -151
  543. package/src/schemas/index.ts +0 -341
  544. package/src/schemas/provider-subsets.ts +0 -538
  545. package/src/schemas/registry.ts +0 -355
  546. package/src/schemas/tool-defs.ts +0 -793
  547. package/src/solid.ts +0 -165
  548. package/src/state/index.ts +0 -44
  549. package/src/state/messages.ts +0 -53
  550. package/src/state/mock.ts +0 -297
  551. package/src/state/parts.ts +0 -295
  552. package/src/state/persistence.ts +0 -180
  553. package/src/state/stream.ts +0 -246
  554. package/src/state/suggestions.ts +0 -9
  555. package/src/state/threads.ts +0 -142
  556. package/src/test-utils/fake-clock.ts +0 -88
  557. package/src/types.ts +0 -53
  558. package/src/ui/action-icons.ts +0 -53
  559. package/src/ui/agent-card.tsx +0 -218
  560. package/src/ui/avatar.tsx +0 -23
  561. package/src/ui/badge.tsx +0 -21
  562. package/src/ui/button.tsx +0 -49
  563. package/src/ui/card.tsx +0 -245
  564. package/src/ui/checkbox-group.tsx +0 -153
  565. package/src/ui/checkbox.tsx +0 -63
  566. package/src/ui/collapsible.tsx +0 -163
  567. package/src/ui/command.tsx +0 -103
  568. package/src/ui/dialog.tsx +0 -223
  569. package/src/ui/dock.tsx +0 -584
  570. package/src/ui/dropdown.tsx +0 -636
  571. package/src/ui/editable-label.tsx +0 -112
  572. package/src/ui/hover-card.tsx +0 -345
  573. package/src/ui/icon.tsx +0 -167
  574. package/src/ui/input.tsx +0 -391
  575. package/src/ui/kbd.tsx +0 -118
  576. package/src/ui/nav.tsx +0 -282
  577. package/src/ui/notice.tsx +0 -84
  578. package/src/ui/overlay.tsx +0 -277
  579. package/src/ui/pane-grid.tsx +0 -117
  580. package/src/ui/pane-group.tsx +0 -291
  581. package/src/ui/pane.tsx +0 -193
  582. package/src/ui/popover.tsx +0 -106
  583. package/src/ui/progress-bar.tsx +0 -83
  584. package/src/ui/prompt-dock.tsx +0 -145
  585. package/src/ui/radio.tsx +0 -150
  586. package/src/ui/resizable.tsx +0 -693
  587. package/src/ui/scroll-area.tsx +0 -26
  588. package/src/ui/segmented.tsx +0 -109
  589. package/src/ui/select.tsx +0 -168
  590. package/src/ui/separator.tsx +0 -10
  591. package/src/ui/settings-group.tsx +0 -67
  592. package/src/ui/skeleton.tsx +0 -73
  593. package/src/ui/slider.tsx +0 -178
  594. package/src/ui/status.tsx +0 -48
  595. package/src/ui/switch.tsx +0 -119
  596. package/src/ui/tabs.tsx +0 -168
  597. package/src/ui/textarea.tsx +0 -21
  598. package/src/ui/tooltip.tsx +0 -118
  599. package/src/utils/cn.ts +0 -30
  600. package/src/wire/chunk.ts +0 -248
  601. package/src/wire/consume.ts +0 -599
  602. package/src/wire/diagnostics.ts +0 -727
  603. package/src/wire/encode-probe.ts +0 -214
  604. package/src/wire/encode.ts +0 -947
  605. package/src/wire/files.ts +0 -342
  606. package/src/wire/formats/anthropic.ts +0 -274
  607. package/src/wire/formats/openai.ts +0 -228
  608. package/src/wire/index.ts +0 -95
  609. package/src/wire/media-types.ts +0 -344
  610. package/src/wire/read.ts +0 -396
  611. package/src/wire/sink-helpers.ts +0 -50
  612. package/src/wire/sse.ts +0 -153
package/src/agent-tooling/recipes/composed-thread.ts DELETED
@@ -1,714 +0,0 @@
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
- };