@assistant-ui/mcp-docs-server 0.2.2 → 0.3.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 (459) hide show
  1. package/README.md +16 -43
  2. package/dist/index.d.ts +2 -3
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +3 -91
  5. package/dist/index.js.map +1 -1
  6. package/dist/proxy.d.ts +9 -0
  7. package/dist/proxy.d.ts.map +1 -0
  8. package/dist/proxy.js +76 -0
  9. package/dist/proxy.js.map +1 -0
  10. package/package.json +9 -13
  11. package/src/index.ts +3 -115
  12. package/src/proxy.test.ts +250 -0
  13. package/src/proxy.ts +111 -0
  14. package/.docs/organized/code-examples/waterfall.md +0 -807
  15. package/.docs/organized/code-examples/with-a2a.md +0 -674
  16. package/.docs/organized/code-examples/with-ag-ui.md +0 -552
  17. package/.docs/organized/code-examples/with-ai-sdk-v7.md +0 -465
  18. package/.docs/organized/code-examples/with-artifacts.md +0 -814
  19. package/.docs/organized/code-examples/with-assistant-transport.md +0 -575
  20. package/.docs/organized/code-examples/with-browser-extension.md +0 -371
  21. package/.docs/organized/code-examples/with-chain-of-thought.md +0 -960
  22. package/.docs/organized/code-examples/with-cloud-standalone.md +0 -681
  23. package/.docs/organized/code-examples/with-cloud.md +0 -438
  24. package/.docs/organized/code-examples/with-custom-thread-list.md +0 -568
  25. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +0 -526
  26. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +0 -696
  27. package/.docs/organized/code-examples/with-eve.md +0 -404
  28. package/.docs/organized/code-examples/with-expo.md +0 -2063
  29. package/.docs/organized/code-examples/with-external-store.md +0 -420
  30. package/.docs/organized/code-examples/with-ffmpeg.md +0 -828
  31. package/.docs/organized/code-examples/with-generative-ui.md +0 -1812
  32. package/.docs/organized/code-examples/with-google-adk.md +0 -367
  33. package/.docs/organized/code-examples/with-heat-graph.md +0 -304
  34. package/.docs/organized/code-examples/with-image-generation.md +0 -462
  35. package/.docs/organized/code-examples/with-interactables.md +0 -732
  36. package/.docs/organized/code-examples/with-langchain.md +0 -445
  37. package/.docs/organized/code-examples/with-langgraph.md +0 -854
  38. package/.docs/organized/code-examples/with-livekit.md +0 -642
  39. package/.docs/organized/code-examples/with-mcp.md +0 -780
  40. package/.docs/organized/code-examples/with-nuxt.md +0 -2428
  41. package/.docs/organized/code-examples/with-opencode.md +0 -1974
  42. package/.docs/organized/code-examples/with-openui.md +0 -449
  43. package/.docs/organized/code-examples/with-pi.md +0 -2083
  44. package/.docs/organized/code-examples/with-react-hook-form.md +0 -724
  45. package/.docs/organized/code-examples/with-react-ink-web.md +0 -690
  46. package/.docs/organized/code-examples/with-react-ink.md +0 -472
  47. package/.docs/organized/code-examples/with-react-router.md +0 -935
  48. package/.docs/organized/code-examples/with-resumable-stream.md +0 -667
  49. package/.docs/organized/code-examples/with-store.md +0 -679
  50. package/.docs/organized/code-examples/with-svelte.md +0 -415
  51. package/.docs/organized/code-examples/with-sveltekit.md +0 -1061
  52. package/.docs/organized/code-examples/with-tanstack.md +0 -811
  53. package/.docs/organized/code-examples/with-tap-runtime.md +0 -812
  54. package/.docs/organized/code-examples/with-virtualized-thread.md +0 -680
  55. package/.docs/organized/code-examples/with-vue.md +0 -408
  56. package/.docs/raw/docs/(docs)/architecture.mdx +0 -146
  57. package/.docs/raw/docs/(docs)/base-ui.mdx +0 -39
  58. package/.docs/raw/docs/(docs)/cli.mdx +0 -542
  59. package/.docs/raw/docs/(docs)/devtools.mdx +0 -79
  60. package/.docs/raw/docs/(docs)/index.mdx +0 -21
  61. package/.docs/raw/docs/(docs)/installation.mdx +0 -483
  62. package/.docs/raw/docs/(docs)/llm.mdx +0 -211
  63. package/.docs/raw/docs/(docs)/rtl.mdx +0 -78
  64. package/.docs/raw/docs/(reference)/api-reference/adapters/attachments.mdx +0 -36
  65. package/.docs/raw/docs/(reference)/api-reference/adapters/feedback.mdx +0 -20
  66. package/.docs/raw/docs/(reference)/api-reference/adapters/index.mdx +0 -34
  67. package/.docs/raw/docs/(reference)/api-reference/adapters/model.mdx +0 -44
  68. package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +0 -59
  69. package/.docs/raw/docs/(reference)/api-reference/adapters/runtime.mdx +0 -20
  70. package/.docs/raw/docs/(reference)/api-reference/adapters/suggestions.mdx +0 -20
  71. package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx +0 -84
  72. package/.docs/raw/docs/(reference)/api-reference/context-providers/index.mdx +0 -22
  73. package/.docs/raw/docs/(reference)/api-reference/context-providers/scoped-providers.mdx +0 -64
  74. package/.docs/raw/docs/(reference)/api-reference/external-store/index.mdx +0 -22
  75. package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +0 -52
  76. package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +0 -49
  77. package/.docs/raw/docs/(reference)/api-reference/generative-ui/a2ui.mdx +0 -40
  78. package/.docs/raw/docs/(reference)/api-reference/generative-ui/actions.mdx +0 -56
  79. package/.docs/raw/docs/(reference)/api-reference/generative-ui/components.mdx +0 -86
  80. package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx +0 -39
  81. package/.docs/raw/docs/(reference)/api-reference/generative-ui/json-generative-ui.mdx +0 -42
  82. package/.docs/raw/docs/(reference)/api-reference/generative-ui/rendering.mdx +0 -84
  83. package/.docs/raw/docs/(reference)/api-reference/generative-ui/slack.mdx +0 -85
  84. package/.docs/raw/docs/(reference)/api-reference/generative-ui/spec.mdx +0 -45
  85. package/.docs/raw/docs/(reference)/api-reference/generative-ui/teams.mdx +0 -93
  86. package/.docs/raw/docs/(reference)/api-reference/generative-ui/tokens.mdx +0 -62
  87. package/.docs/raw/docs/(reference)/api-reference/hooks/composer-triggers.mdx +0 -129
  88. package/.docs/raw/docs/(reference)/api-reference/hooks/index.mdx +0 -31
  89. package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +0 -34
  90. package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +0 -350
  91. package/.docs/raw/docs/(reference)/api-reference/hooks/runtimes.mdx +0 -28
  92. package/.docs/raw/docs/(reference)/api-reference/hooks/state.mdx +0 -97
  93. package/.docs/raw/docs/(reference)/api-reference/integrations/cloud-ai-sdk.mdx +0 -24
  94. package/.docs/raw/docs/(reference)/api-reference/integrations/eve.mdx +0 -97
  95. package/.docs/raw/docs/(reference)/api-reference/integrations/index.mdx +0 -28
  96. package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +0 -200
  97. package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +0 -37
  98. package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +0 -50
  99. package/.docs/raw/docs/(reference)/api-reference/model-context/index.mdx +0 -22
  100. package/.docs/raw/docs/(reference)/api-reference/model-context/registry.mdx +0 -20
  101. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +0 -566
  102. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar-more.mdx +0 -152
  103. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +0 -239
  104. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx +0 -208
  105. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +0 -108
  106. package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +0 -99
  107. package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +0 -145
  108. package/.docs/raw/docs/(reference)/api-reference/primitives/chain-of-thought.mdx +0 -82
  109. package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +0 -619
  110. package/.docs/raw/docs/(reference)/api-reference/primitives/composition.mdx +0 -22
  111. package/.docs/raw/docs/(reference)/api-reference/primitives/error.mdx +0 -65
  112. package/.docs/raw/docs/(reference)/api-reference/primitives/index.mdx +0 -73
  113. package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +0 -117
  114. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +0 -339
  115. package/.docs/raw/docs/(reference)/api-reference/primitives/queue-item.mdx +0 -77
  116. package/.docs/raw/docs/(reference)/api-reference/primitives/selection-toolbar.mdx +0 -88
  117. package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +0 -81
  118. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item-more.mdx +0 -129
  119. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +0 -138
  120. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +0 -122
  121. package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +0 -289
  122. package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +0 -20
  123. package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +0 -24
  124. package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +0 -32
  125. package/.docs/raw/docs/(reference)/api-reference/runtimes/index.mdx +0 -43
  126. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +0 -43
  127. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +0 -24
  128. package/.docs/raw/docs/(reference)/api-reference/runtimes/queue-state.mdx +0 -20
  129. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +0 -24
  130. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +0 -24
  131. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +0 -36
  132. package/.docs/raw/docs/(reference)/api-reference/tools/component-tools.mdx +0 -85
  133. package/.docs/raw/docs/(reference)/api-reference/tools/index.mdx +0 -45
  134. package/.docs/raw/docs/(reference)/api-reference/tools/interactables-legacy.mdx +0 -55
  135. package/.docs/raw/docs/(reference)/api-reference/tools/interactables.mdx +0 -151
  136. package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +0 -106
  137. package/.docs/raw/docs/(reference)/api-reference/tools/status.mdx +0 -62
  138. package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +0 -178
  139. package/.docs/raw/docs/(reference)/api-reference/transport/assistant-transport.mdx +0 -48
  140. package/.docs/raw/docs/(reference)/api-reference/transport/frame.mdx +0 -62
  141. package/.docs/raw/docs/(reference)/api-reference/transport/index.mdx +0 -22
  142. package/.docs/raw/docs/(reference)/api-reference/utilities/index.mdx +0 -19
  143. package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +0 -149
  144. package/.docs/raw/docs/(reference)/api-reference/voice/index.mdx +0 -22
  145. package/.docs/raw/docs/(reference)/api-reference/voice/session.mdx +0 -54
  146. package/.docs/raw/docs/(reference)/api-reference/voice/speech-dictation.mdx +0 -36
  147. package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +0 -527
  148. package/.docs/raw/docs/cloud/ai-sdk.mdx +0 -602
  149. package/.docs/raw/docs/cloud/authorization.mdx +0 -252
  150. package/.docs/raw/docs/cloud/index.mdx +0 -46
  151. package/.docs/raw/docs/cloud/langgraph.mdx +0 -554
  152. package/.docs/raw/docs/copilots/assistant-frame.mdx +0 -400
  153. package/.docs/raw/docs/copilots/make-assistant-visible.mdx +0 -82
  154. package/.docs/raw/docs/copilots/model-context.mdx +0 -156
  155. package/.docs/raw/docs/copilots/motivation.mdx +0 -202
  156. package/.docs/raw/docs/copilots/use-assistant-instructions.mdx +0 -64
  157. package/.docs/raw/docs/guides/attachments.mdx +0 -619
  158. package/.docs/raw/docs/guides/branching.mdx +0 -76
  159. package/.docs/raw/docs/guides/chain-of-thought.mdx +0 -164
  160. package/.docs/raw/docs/guides/chatgpt-subscription.mdx +0 -108
  161. package/.docs/raw/docs/guides/context-api.mdx +0 -619
  162. package/.docs/raw/docs/guides/dictation.mdx +0 -298
  163. package/.docs/raw/docs/guides/editing.mdx +0 -102
  164. package/.docs/raw/docs/guides/electron.mdx +0 -369
  165. package/.docs/raw/docs/guides/headless-composer-input.mdx +0 -113
  166. package/.docs/raw/docs/guides/image-generation.mdx +0 -74
  167. package/.docs/raw/docs/guides/index.mdx +0 -117
  168. package/.docs/raw/docs/guides/input-history.mdx +0 -55
  169. package/.docs/raw/docs/guides/latex.mdx +0 -158
  170. package/.docs/raw/docs/guides/mentions.mdx +0 -575
  171. package/.docs/raw/docs/guides/message-timing.mdx +0 -209
  172. package/.docs/raw/docs/guides/quoting.mdx +0 -169
  173. package/.docs/raw/docs/guides/resumable-stream-deployment.mdx +0 -212
  174. package/.docs/raw/docs/guides/resumable-stream-stores.mdx +0 -152
  175. package/.docs/raw/docs/guides/resumable-streams.mdx +0 -292
  176. package/.docs/raw/docs/guides/slash-commands.mdx +0 -358
  177. package/.docs/raw/docs/guides/speech.mdx +0 -172
  178. package/.docs/raw/docs/guides/suggestions.mdx +0 -384
  179. package/.docs/raw/docs/guides/virtualization.mdx +0 -133
  180. package/.docs/raw/docs/guides/voice.mdx +0 -310
  181. package/.docs/raw/docs/ink/adapters.mdx +0 -99
  182. package/.docs/raw/docs/ink/custom-backend.mdx +0 -254
  183. package/.docs/raw/docs/ink/hooks.mdx +0 -469
  184. package/.docs/raw/docs/ink/index.mdx +0 -236
  185. package/.docs/raw/docs/ink/migration.mdx +0 -138
  186. package/.docs/raw/docs/ink/primitives.mdx +0 -1259
  187. package/.docs/raw/docs/integrations/attachments/custom-adapter.mdx +0 -528
  188. package/.docs/raw/docs/integrations/auth/better-auth.mdx +0 -188
  189. package/.docs/raw/docs/integrations/auth/clerk.mdx +0 -166
  190. package/.docs/raw/docs/integrations/auth/next-auth.mdx +0 -191
  191. package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +0 -88
  192. package/.docs/raw/docs/integrations/frameworks/cloudflare-agents/overview.mdx +0 -282
  193. package/.docs/raw/docs/integrations/frameworks/mastra/full-stack.mdx +0 -188
  194. package/.docs/raw/docs/integrations/frameworks/mastra/overview.mdx +0 -57
  195. package/.docs/raw/docs/integrations/frameworks/mastra/separate-server.mdx +0 -201
  196. package/.docs/raw/docs/integrations/gateways/index.mdx +0 -162
  197. package/.docs/raw/docs/integrations/index.mdx +0 -178
  198. package/.docs/raw/docs/integrations/observability/helicone.mdx +0 -129
  199. package/.docs/raw/docs/integrations/observability/langfuse.mdx +0 -161
  200. package/.docs/raw/docs/integrations/observability/langsmith.mdx +0 -151
  201. package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +0 -773
  202. package/.docs/raw/docs/migrations/deprecation-policy.mdx +0 -42
  203. package/.docs/raw/docs/migrations/index.mdx +0 -50
  204. package/.docs/raw/docs/migrations/react-compatibility.mdx +0 -74
  205. package/.docs/raw/docs/migrations/react-langgraph-v0-7.mdx +0 -328
  206. package/.docs/raw/docs/migrations/toolkit-tools.mdx +0 -236
  207. package/.docs/raw/docs/migrations/v0-11.mdx +0 -172
  208. package/.docs/raw/docs/migrations/v0-12.mdx +0 -302
  209. package/.docs/raw/docs/migrations/v0-14.mdx +0 -297
  210. package/.docs/raw/docs/migrations/v0-15.mdx +0 -270
  211. package/.docs/raw/docs/primitives/action-bar.mdx +0 -352
  212. package/.docs/raw/docs/primitives/assistant-modal.mdx +0 -216
  213. package/.docs/raw/docs/primitives/attachment.mdx +0 -217
  214. package/.docs/raw/docs/primitives/branch-picker.mdx +0 -222
  215. package/.docs/raw/docs/primitives/chain-of-thought.mdx +0 -315
  216. package/.docs/raw/docs/primitives/composer.mdx +0 -659
  217. package/.docs/raw/docs/primitives/error.mdx +0 -142
  218. package/.docs/raw/docs/primitives/index.mdx +0 -99
  219. package/.docs/raw/docs/primitives/message.mdx +0 -618
  220. package/.docs/raw/docs/primitives/selection-toolbar.mdx +0 -191
  221. package/.docs/raw/docs/primitives/suggestion.mdx +0 -254
  222. package/.docs/raw/docs/primitives/thread-list.mdx +0 -467
  223. package/.docs/raw/docs/primitives/thread.mdx +0 -509
  224. package/.docs/raw/docs/react-native/adapters.mdx +0 -94
  225. package/.docs/raw/docs/react-native/custom-backend.mdx +0 -207
  226. package/.docs/raw/docs/react-native/hooks.mdx +0 -339
  227. package/.docs/raw/docs/react-native/index.mdx +0 -289
  228. package/.docs/raw/docs/react-native/migration.mdx +0 -142
  229. package/.docs/raw/docs/react-native/primitives.mdx +0 -839
  230. package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +0 -399
  231. package/.docs/raw/docs/runtimes/a2a/overview.mdx +0 -60
  232. package/.docs/raw/docs/runtimes/a2a/quickstart.mdx +0 -216
  233. package/.docs/raw/docs/runtimes/ag-ui/agent-state.mdx +0 -124
  234. package/.docs/raw/docs/runtimes/ag-ui/overview.mdx +0 -70
  235. package/.docs/raw/docs/runtimes/ag-ui/quickstart.mdx +0 -243
  236. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +0 -255
  237. package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx +0 -61
  238. package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +0 -122
  239. package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +0 -135
  240. package/.docs/raw/docs/runtimes/ai-sdk/v6-legacy.mdx +0 -636
  241. package/.docs/raw/docs/runtimes/ai-sdk/v7.mdx +0 -716
  242. package/.docs/raw/docs/runtimes/claude-managed-agents.mdx +0 -118
  243. package/.docs/raw/docs/runtimes/concepts/adapters.mdx +0 -265
  244. package/.docs/raw/docs/runtimes/concepts/architecture.mdx +0 -167
  245. package/.docs/raw/docs/runtimes/concepts/stability.mdx +0 -68
  246. package/.docs/raw/docs/runtimes/concepts/threads.mdx +0 -513
  247. package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +0 -763
  248. package/.docs/raw/docs/runtimes/custom/data-stream.mdx +0 -339
  249. package/.docs/raw/docs/runtimes/custom/external-store.mdx +0 -957
  250. package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +0 -902
  251. package/.docs/raw/docs/runtimes/custom/overview.mdx +0 -71
  252. package/.docs/raw/docs/runtimes/eve/overview.mdx +0 -151
  253. package/.docs/raw/docs/runtimes/eve/quickstart.mdx +0 -192
  254. package/.docs/raw/docs/runtimes/google-adk/api.mdx +0 -256
  255. package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +0 -784
  256. package/.docs/raw/docs/runtimes/google-adk/overview.mdx +0 -69
  257. package/.docs/raw/docs/runtimes/google-adk/quickstart.mdx +0 -229
  258. package/.docs/raw/docs/runtimes/langchain.mdx +0 -901
  259. package/.docs/raw/docs/runtimes/langgraph/agent-state.mdx +0 -181
  260. package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +0 -305
  261. package/.docs/raw/docs/runtimes/langgraph/interrupts.mdx +0 -104
  262. package/.docs/raw/docs/runtimes/langgraph/overview.mdx +0 -84
  263. package/.docs/raw/docs/runtimes/langgraph/quickstart.mdx +0 -496
  264. package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +0 -144
  265. package/.docs/raw/docs/runtimes/langgraph/threads.mdx +0 -113
  266. package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +0 -29
  267. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +0 -93
  268. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +0 -347
  269. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +0 -393
  270. package/.docs/raw/docs/runtimes/opencode/hooks.mdx +0 -194
  271. package/.docs/raw/docs/runtimes/opencode/overview.mdx +0 -58
  272. package/.docs/raw/docs/runtimes/opencode/quickstart.mdx +0 -119
  273. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +0 -133
  274. package/.docs/raw/docs/tools/a2ui.mdx +0 -107
  275. package/.docs/raw/docs/tools/backend.mdx +0 -147
  276. package/.docs/raw/docs/tools/defining-tools.mdx +0 -574
  277. package/.docs/raw/docs/tools/dynamic-tools.mdx +0 -112
  278. package/.docs/raw/docs/tools/generative-ui-primitive.mdx +0 -180
  279. package/.docs/raw/docs/tools/generative-ui-slack.mdx +0 -167
  280. package/.docs/raw/docs/tools/generative-ui-teams.mdx +0 -160
  281. package/.docs/raw/docs/tools/generative-ui.mdx +0 -322
  282. package/.docs/raw/docs/tools/index.mdx +0 -72
  283. package/.docs/raw/docs/tools/interactables.mdx +0 -1084
  284. package/.docs/raw/docs/tools/mcp-apps.mdx +0 -346
  285. package/.docs/raw/docs/tools/mcp.mdx +0 -466
  286. package/.docs/raw/docs/tools/multi-agent.mdx +0 -237
  287. package/.docs/raw/docs/tools/openui.mdx +0 -175
  288. package/.docs/raw/docs/tools/tool-ui.mdx +0 -1008
  289. package/.docs/raw/docs/tools/user-managed-mcp.mdx +0 -428
  290. package/.docs/raw/docs/ui/accordion.mdx +0 -266
  291. package/.docs/raw/docs/ui/assistant-modal.mdx +0 -166
  292. package/.docs/raw/docs/ui/assistant-sidebar.mdx +0 -89
  293. package/.docs/raw/docs/ui/attachment.mdx +0 -259
  294. package/.docs/raw/docs/ui/badge.mdx +0 -150
  295. package/.docs/raw/docs/ui/composer-trigger-popover.mdx +0 -212
  296. package/.docs/raw/docs/ui/context-display.mdx +0 -148
  297. package/.docs/raw/docs/ui/diff-viewer.mdx +0 -280
  298. package/.docs/raw/docs/ui/directive-text.mdx +0 -114
  299. package/.docs/raw/docs/ui/dot-matrix.mdx +0 -133
  300. package/.docs/raw/docs/ui/file.mdx +0 -159
  301. package/.docs/raw/docs/ui/follow-up-suggestions.mdx +0 -82
  302. package/.docs/raw/docs/ui/image.mdx +0 -102
  303. package/.docs/raw/docs/ui/markdown.mdx +0 -64
  304. package/.docs/raw/docs/ui/mcp-config.mdx +0 -107
  305. package/.docs/raw/docs/ui/mermaid.mdx +0 -92
  306. package/.docs/raw/docs/ui/message-timing.mdx +0 -93
  307. package/.docs/raw/docs/ui/model-selector.mdx +0 -455
  308. package/.docs/raw/docs/ui/number-roll.mdx +0 -154
  309. package/.docs/raw/docs/ui/part-grouping.mdx +0 -614
  310. package/.docs/raw/docs/ui/quote.mdx +0 -211
  311. package/.docs/raw/docs/ui/reasoning.mdx +0 -186
  312. package/.docs/raw/docs/ui/scrollbar.mdx +0 -77
  313. package/.docs/raw/docs/ui/select.mdx +0 -254
  314. package/.docs/raw/docs/ui/sources.mdx +0 -177
  315. package/.docs/raw/docs/ui/streamdown.mdx +0 -392
  316. package/.docs/raw/docs/ui/syntax-highlighting.mdx +0 -205
  317. package/.docs/raw/docs/ui/tabs.mdx +0 -271
  318. package/.docs/raw/docs/ui/thread-list.mdx +0 -372
  319. package/.docs/raw/docs/ui/thread.mdx +0 -512
  320. package/.docs/raw/docs/ui/tool-fallback.mdx +0 -127
  321. package/.docs/raw/docs/ui/tool-group.mdx +0 -240
  322. package/.docs/raw/docs/ui/voice.mdx +0 -173
  323. package/.docs/raw/docs/utilities/heat-graph.mdx +0 -237
  324. package/.docs/raw/docs/utilities/react-o11y.mdx +0 -362
  325. package/.docs/raw/docs/utilities/tw-shimmer.mdx +0 -212
  326. package/dist/constants.d.ts +0 -14
  327. package/dist/constants.d.ts.map +0 -1
  328. package/dist/constants.js +0 -19
  329. package/dist/constants.js.map +0 -1
  330. package/dist/prepare-docs/code-examples.d.ts +0 -5
  331. package/dist/prepare-docs/code-examples.d.ts.map +0 -1
  332. package/dist/prepare-docs/code-examples.js +0 -117
  333. package/dist/prepare-docs/code-examples.js.map +0 -1
  334. package/dist/prepare-docs/copy-raw.d.ts +0 -5
  335. package/dist/prepare-docs/copy-raw.d.ts.map +0 -1
  336. package/dist/prepare-docs/copy-raw.js +0 -49
  337. package/dist/prepare-docs/copy-raw.js.map +0 -1
  338. package/dist/prepare-docs/prepare.d.ts +0 -1
  339. package/dist/prepare-docs/prepare.js +0 -22
  340. package/dist/prepare-docs/prepare.js.map +0 -1
  341. package/dist/prompts/xulux-playground.d.ts +0 -12
  342. package/dist/prompts/xulux-playground.d.ts.map +0 -1
  343. package/dist/prompts/xulux-playground.js +0 -33
  344. package/dist/prompts/xulux-playground.js.map +0 -1
  345. package/dist/tools/docs.d.ts +0 -22
  346. package/dist/tools/docs.d.ts.map +0 -1
  347. package/dist/tools/docs.js +0 -177
  348. package/dist/tools/docs.js.map +0 -1
  349. package/dist/tools/examples.d.ts +0 -24
  350. package/dist/tools/examples.d.ts.map +0 -1
  351. package/dist/tools/examples.js +0 -87
  352. package/dist/tools/examples.js.map +0 -1
  353. package/dist/tools/resources.d.ts +0 -6
  354. package/dist/tools/resources.d.ts.map +0 -1
  355. package/dist/tools/resources.js +0 -75
  356. package/dist/tools/resources.js.map +0 -1
  357. package/dist/tools/search.d.ts +0 -24
  358. package/dist/tools/search.d.ts.map +0 -1
  359. package/dist/tools/search.js +0 -39
  360. package/dist/tools/search.js.map +0 -1
  361. package/dist/tools/tests/mcp-test-client.d.ts +0 -15
  362. package/dist/tools/tests/mcp-test-client.d.ts.map +0 -1
  363. package/dist/tools/tests/mcp-test-client.js +0 -68
  364. package/dist/tools/tests/mcp-test-client.js.map +0 -1
  365. package/dist/tools/tests/test-setup.d.ts +0 -7
  366. package/dist/tools/tests/test-setup.d.ts.map +0 -1
  367. package/dist/tools/tests/test-setup.js +0 -36
  368. package/dist/tools/tests/test-setup.js.map +0 -1
  369. package/dist/tools/xulux-templates.d.ts +0 -58
  370. package/dist/tools/xulux-templates.d.ts.map +0 -1
  371. package/dist/tools/xulux-templates.js +0 -84
  372. package/dist/tools/xulux-templates.js.map +0 -1
  373. package/dist/utils/cache.d.ts +0 -5
  374. package/dist/utils/cache.d.ts.map +0 -1
  375. package/dist/utils/cache.js +0 -18
  376. package/dist/utils/cache.js.map +0 -1
  377. package/dist/utils/logger.d.ts +0 -10
  378. package/dist/utils/logger.d.ts.map +0 -1
  379. package/dist/utils/logger.js +0 -20
  380. package/dist/utils/logger.js.map +0 -1
  381. package/dist/utils/mcp-format.d.ts +0 -11
  382. package/dist/utils/mcp-format.d.ts.map +0 -1
  383. package/dist/utils/mcp-format.js +0 -14
  384. package/dist/utils/mcp-format.js.map +0 -1
  385. package/dist/utils/mdx.d.ts +0 -12
  386. package/dist/utils/mdx.d.ts.map +0 -1
  387. package/dist/utils/mdx.js +0 -45
  388. package/dist/utils/mdx.js.map +0 -1
  389. package/dist/utils/paths.d.ts +0 -12
  390. package/dist/utils/paths.d.ts.map +0 -1
  391. package/dist/utils/paths.js +0 -93
  392. package/dist/utils/paths.js.map +0 -1
  393. package/dist/utils/search.d.ts +0 -10
  394. package/dist/utils/search.d.ts.map +0 -1
  395. package/dist/utils/search.js +0 -97
  396. package/dist/utils/search.js.map +0 -1
  397. package/dist/utils/security.d.ts +0 -5
  398. package/dist/utils/security.d.ts.map +0 -1
  399. package/dist/utils/security.js +0 -22
  400. package/dist/utils/security.js.map +0 -1
  401. package/dist/xulux/catalog-client.d.ts +0 -14
  402. package/dist/xulux/catalog-client.d.ts.map +0 -1
  403. package/dist/xulux/catalog-client.js +0 -67
  404. package/dist/xulux/catalog-client.js.map +0 -1
  405. package/dist/xulux/fallback-catalog.d.ts +0 -7
  406. package/dist/xulux/fallback-catalog.d.ts.map +0 -1
  407. package/dist/xulux/fallback-catalog.js +0 -47
  408. package/dist/xulux/fallback-catalog.js.map +0 -1
  409. package/dist/xulux/fetch-sandbox.d.ts +0 -5
  410. package/dist/xulux/fetch-sandbox.d.ts.map +0 -1
  411. package/dist/xulux/fetch-sandbox.js +0 -40
  412. package/dist/xulux/fetch-sandbox.js.map +0 -1
  413. package/dist/xulux/template-service.d.ts +0 -84
  414. package/dist/xulux/template-service.d.ts.map +0 -1
  415. package/dist/xulux/template-service.js +0 -223
  416. package/dist/xulux/template-service.js.map +0 -1
  417. package/dist/xulux/types.d.ts +0 -55
  418. package/dist/xulux/types.d.ts.map +0 -1
  419. package/dist/xulux/types.js +0 -6
  420. package/dist/xulux/types.js.map +0 -1
  421. package/src/constants.ts +0 -24
  422. package/src/prepare-docs/code-examples.ts +0 -158
  423. package/src/prepare-docs/copy-raw.ts +0 -50
  424. package/src/prepare-docs/prepare.ts +0 -24
  425. package/src/prompts/xulux-playground.ts +0 -36
  426. package/src/tools/docs.ts +0 -255
  427. package/src/tools/examples.ts +0 -114
  428. package/src/tools/resources.ts +0 -111
  429. package/src/tools/search.ts +0 -46
  430. package/src/tools/tests/completions.test.ts +0 -60
  431. package/src/tools/tests/directory-size-cap.test.ts +0 -50
  432. package/src/tools/tests/docs.test.ts +0 -144
  433. package/src/tools/tests/examples.test.ts +0 -94
  434. package/src/tools/tests/integration.test.ts +0 -45
  435. package/src/tools/tests/json-parsing.test.ts +0 -23
  436. package/src/tools/tests/listings-cache.test.ts +0 -19
  437. package/src/tools/tests/mcp-protocol.test.ts +0 -216
  438. package/src/tools/tests/mcp-test-client.ts +0 -111
  439. package/src/tools/tests/path-traversal.test.ts +0 -81
  440. package/src/tools/tests/resources.test.ts +0 -133
  441. package/src/tools/tests/search.test.ts +0 -37
  442. package/src/tools/tests/test-setup.ts +0 -50
  443. package/src/tools/tests/xulux-templates.test.ts +0 -262
  444. package/src/tools/xulux-templates.ts +0 -141
  445. package/src/utils/cache.ts +0 -20
  446. package/src/utils/logger.ts +0 -20
  447. package/src/utils/mcp-format.ts +0 -14
  448. package/src/utils/mdx.ts +0 -59
  449. package/src/utils/paths.ts +0 -139
  450. package/src/utils/search.ts +0 -131
  451. package/src/utils/security.ts +0 -52
  452. package/src/utils/tests/cache.test.ts +0 -51
  453. package/src/utils/tests/mcp-format.test.ts +0 -22
  454. package/src/utils/tests/security.test.ts +0 -119
  455. package/src/xulux/catalog-client.ts +0 -105
  456. package/src/xulux/fallback-catalog.ts +0 -63
  457. package/src/xulux/fetch-sandbox.ts +0 -56
  458. package/src/xulux/template-service.ts +0 -406
  459. package/src/xulux/types.ts +0 -60
@@ -1,362 +0,0 @@
1
- ---
2
- title: react-o11y
3
- description: Headless primitives for visualizing observability spans as collapsible trace trees, waterfalls, and agent and LLM call timelines.
4
- platforms: ["react"]
5
- ---
6
-
7
- import { WaterfallSample } from "@/components/docs/samples/o11y/waterfall";
8
- import {
9
- StatusSample,
10
- CollapseSample,
11
- StreamingSample,
12
- } from "@/components/docs/samples/o11y/capability-samples";
13
-
14
- <Callout type="warn">
15
- `@assistant-ui/react-o11y` is experimental. The API may change without notice.
16
- </Callout>
17
-
18
- `@assistant-ui/react-o11y` provides headless, Radix-style primitives for rendering observability spans as collapsible, indented hierarchical UIs. Use it to build trace inspectors, waterfall debug panels, or LLM call timelines on top of your own span data source.
19
-
20
- - **Headless** — Zero styling opinions, bring your own CSS / Tailwind.
21
- - **Composable** — Radix-style primitive parts you fully control.
22
- - **Tree-aware** — Automatic depth, parent / child collapse, time range computation.
23
- - **Reactive** — Built on the same reactive core as the runtimes, so spans stream into your UI as they change.
24
-
25
- <div className="not-prose my-6">
26
- <WaterfallSample />
27
- </div>
28
-
29
- ## Installation
30
-
31
- <InstallCommand npm={["@assistant-ui/react-o11y"]} />
32
-
33
- ## Quick start
34
-
35
- Mount `SpanResource` with your span data, then render primitives that read from the resource's state:
36
-
37
- ```tsx title="components/trace-view.tsx"
38
- "use client";
39
-
40
- import {
41
- SpanPrimitive,
42
- SpanResource,
43
- type SpanData,
44
- } from "@assistant-ui/react-o11y";
45
- import { AuiConfig, AuiProvider } from "@assistant-ui/store";
46
-
47
- function SpanRow() {
48
- return (
49
- <SpanPrimitive.Root className="flex items-center gap-2 py-1">
50
- <SpanPrimitive.Indent />
51
- <SpanPrimitive.CollapseToggle className="size-4 cursor-pointer">
52
- ▸
53
- </SpanPrimitive.CollapseToggle>
54
- <SpanPrimitive.StatusIndicator className="size-2 rounded-full data-[span-status=running]:bg-yellow-500 data-[span-status=completed]:bg-green-500 data-[span-status=failed]:bg-red-500" />
55
- <SpanPrimitive.TypeBadge className="rounded bg-muted px-1.5 text-xs" />
56
- <SpanPrimitive.Name className="text-sm" />
57
- </SpanPrimitive.Root>
58
- );
59
- }
60
-
61
- export function TraceView({ spans }: { spans: SpanData[] }) {
62
- const config = AuiConfig({ span: SpanResource({ spans }) });
63
- return (
64
- <AuiProvider extends={null} config={config}>
65
- <SpanPrimitive.Children components={{ Span: SpanRow }} />
66
- </AuiProvider>
67
- );
68
- }
69
- ```
70
-
71
- `SpanData` is the input shape your code produces (see [SpanData](#spandata)). `SpanResource` enriches it with depth, child counts, time range, and collapse state.
72
-
73
- ## Examples
74
-
75
- ### Status states
76
-
77
- `data-span-status` exposes each span's lifecycle, so running, completed, failed, and skipped are styled with pure CSS.
78
-
79
- <div className="not-prose my-6">
80
- <StatusSample />
81
- </div>
82
-
83
- ### Collapsible subtrees
84
-
85
- `SpanPrimitive.CollapseToggle` removes a span's descendants from the visible flat list, not just hides them. Click a chevron to collapse a subtree.
86
-
87
- <div className="not-prose my-6">
88
- <CollapseSample />
89
- </div>
90
-
91
- ### Streaming spans
92
-
93
- `SpanResource` re-derives the tree whenever the `spans` prop changes, so spans stream in and update live.
94
-
95
- <div className="not-prose my-6">
96
- <StreamingSample />
97
- </div>
98
-
99
- ## Anatomy
100
-
101
- ```tsx
102
- import {
103
- SpanPrimitive,
104
- SpanResource,
105
- SpanByIndexProvider,
106
- } from "@assistant-ui/react-o11y";
107
-
108
- // Top-level: mount SpanResource via AuiProvider
109
- const config = AuiConfig({ span: SpanResource({ spans }) });
110
- <AuiProvider extends={null} config={config}>
111
- {/* Render visible spans (flat-list output respecting collapsed state) */}
112
- <SpanPrimitive.Children components={{ Span: SpanRow }} />
113
- </AuiProvider>;
114
-
115
- // Each <SpanRow /> sits inside its own SpanByIndexProvider context and reads via primitives
116
- function SpanRow() {
117
- return (
118
- <SpanPrimitive.Root>
119
- <SpanPrimitive.Indent />
120
- <SpanPrimitive.CollapseToggle />
121
- <SpanPrimitive.StatusIndicator />
122
- <SpanPrimitive.TypeBadge />
123
- <SpanPrimitive.Name />
124
- </SpanPrimitive.Root>
125
- );
126
- }
127
- ```
128
-
129
- `SpanPrimitive.Children` produces a flat list of visible spans (collapsed subtrees are excluded). Each rendered child is wrapped in a `SpanByIndexProvider` so its primitives resolve to that specific span's state.
130
-
131
- ## API reference
132
-
133
- ### SpanResource
134
-
135
- Resource that ingests raw span data and exposes a tree-aware reactive state to primitives.
136
-
137
- ```ts
138
- SpanResource({ spans }: { spans: SpanData[] }): ClientOutput<"span">;
139
- ```
140
-
141
- Mount through `config={config}`, where `const config = AuiConfig({ span: SpanResource({ spans }) })`.
142
-
143
- The resource computes:
144
-
145
- - **depth** of each span based on parent chain.
146
- - **hasChildren** flag.
147
- - **timeRange** (`min` / `max` across all spans).
148
- - **collapse state** managed internally; toggles through primitives.
149
-
150
- ### SpanData
151
-
152
- Input shape you provide to `SpanResource`:
153
-
154
- | Field | Type | Description |
155
- | --- | --- | --- |
156
- | `id` | `string` | Unique span identifier. |
157
- | `parentSpanId` | `string \| null` | Parent span id, or `null` for root spans. |
158
- | `name` | `string` | Display name. |
159
- | `type` | `string` | Span category (e.g. `llm`, `tool`, `http`). Used by `TypeBadge`. |
160
- | `status` | `"running" \| "completed" \| "failed" \| "skipped"` | Lifecycle state. Used by `StatusIndicator`. |
161
- | `startedAt` | `number` | Start timestamp (ms). |
162
- | `endedAt` | `number \| null` | End timestamp (ms), or `null` if still running. |
163
- | `latencyMs` | `number \| null` | Pre-computed latency, or `null` if running. |
164
-
165
- ### SpanState
166
-
167
- Returned by `useAuiState((s) => s.span)` inside any span-scoped subtree:
168
-
169
- ```ts
170
- type SpanState = {
171
- id: string;
172
- parentSpanId: string | null;
173
- name: string;
174
- type: string;
175
- status: "running" | "completed" | "failed" | "skipped";
176
- startedAt: number;
177
- endedAt: number | null;
178
- latencyMs: number | null;
179
- depth: number;
180
- hasChildren: boolean;
181
- isCollapsed: boolean;
182
- children: SpanItemState[];
183
- timeRange: { min: number; max: number };
184
- };
185
- ```
186
-
187
- ### SpanPrimitive.Root
188
-
189
- Container `<div>` exposing span state via data attributes for styling:
190
-
191
- | Attribute | Source |
192
- | --- | --- |
193
- | `data-span-id` | `span.id` |
194
- | `data-span-status` | `span.status` |
195
- | `data-span-type` | `span.type` |
196
- | `data-span-depth` | `span.depth` |
197
- | `data-collapsed` | `span.isCollapsed` |
198
-
199
- Accepts all standard `<div>` props.
200
-
201
- ### SpanPrimitive.Indent
202
-
203
- A `<div>` that adds horizontal padding proportional to span depth.
204
-
205
- | Prop | Type | Default | Description |
206
- | --- | --- | --- | --- |
207
- | `baseIndent` | `number` | `8` | Base padding in pixels. |
208
- | `indentPerLevel` | `number` | `12` | Additional padding per depth level. |
209
-
210
- Final `paddingLeft = baseIndent + depth * indentPerLevel`.
211
-
212
- ### SpanPrimitive.CollapseToggle
213
-
214
- A `<button>` that toggles the current span's collapsed state. Renders only when the span has children. Stops click propagation so it can be nested inside a clickable row.
215
-
216
- Exposes `data-collapsed` for styling. Accepts all standard `<button>` props.
217
-
218
- ### SpanPrimitive.StatusIndicator
219
-
220
- A `<span>` that exposes `data-span-status` for status-based styling (color, icon swap, etc.). Renders no built-in glyph; you provide the visual.
221
-
222
- ```tsx
223
- <SpanPrimitive.StatusIndicator className="size-2 rounded-full data-[span-status=running]:bg-yellow-500 data-[span-status=completed]:bg-green-500 data-[span-status=failed]:bg-red-500 data-[span-status=skipped]:bg-gray-400" />
224
- ```
225
-
226
- ### SpanPrimitive.TypeBadge
227
-
228
- A `<span>` that defaults its children to `span.type` (override by passing custom children). Exposes `data-span-type`.
229
-
230
- ### SpanPrimitive.Name
231
-
232
- A `<span>` that defaults its children to `span.name`. Override by passing custom children.
233
-
234
- ### SpanPrimitive.Children
235
-
236
- Iterates over visible child spans and renders each.
237
-
238
- Two usage modes:
239
-
240
- **Render-prop:**
241
-
242
- ```tsx
243
- <SpanPrimitive.Children>
244
- {({ span }) => <CustomRow span={span} />}
245
- </SpanPrimitive.Children>
246
- ```
247
-
248
- **Component prop (recommended for performance):**
249
-
250
- ```tsx
251
- <SpanPrimitive.Children components={{ Span: SpanRow }} />
252
- ```
253
-
254
- The `components.Span` form is memoized; pass a stable component reference to avoid re-renders on unrelated state changes.
255
-
256
- Each child is wrapped in `SpanByIndexProvider` automatically, so primitives inside `SpanRow` read that child's state.
257
-
258
- ### SpanByIndexProvider
259
-
260
- Lower-level escape hatch. Selects one span by index and provides its scope to descendants:
261
-
262
- ```tsx
263
- <SpanByIndexProvider index={0}>
264
- <SpanPrimitive.Root>{/* reads span at index 0 */}</SpanPrimitive.Root>
265
- </SpanByIndexProvider>
266
- ```
267
-
268
- Most users do not need to use this directly; `SpanPrimitive.Children` wires it up automatically.
269
-
270
- ### SpanPrimitive.ChildByIndex
271
-
272
- Convenience component that pairs `SpanByIndexProvider` with a render component:
273
-
274
- ```tsx
275
- <SpanPrimitive.ChildByIndex index={0} components={{ Span: SpanRow }} />
276
- ```
277
-
278
- Useful when you want explicit control over which child indices to render (e.g. for virtualization).
279
-
280
- ### SpanPrimitive.Timeline
281
-
282
- A `<div>` that provides a timeline range to descendant `TimelineBar` primitives and exposes range CSS variables.
283
-
284
- | Prop | Type | Default | Description |
285
- | --- | --- | --- | --- |
286
- | `timeRange` | `{ min: number; max: number }` | `span.timeRange` | Override the range used for positioning bars. |
287
- | `paddingEnd` | `number` | `0` | Extends the max by this ratio of the range duration, useful for right-side breathing room. |
288
-
289
- Exposes `data-span-timeline` and CSS variables:
290
-
291
- | Variable | Description |
292
- | --- | --- |
293
- | `--span-timeline-min-ms` | Timeline start timestamp. |
294
- | `--span-timeline-max-ms` | Timeline end timestamp after padding. |
295
- | `--span-timeline-range-ms` | Timeline duration after padding. |
296
-
297
- ### SpanPrimitive.TimelineBar
298
-
299
- A `<div>` that positions the current span within the nearest `SpanPrimitive.Timeline` range. It reads `startedAt`, `endedAt`, `status`, `type`, and `timeRange` from the current span scope.
300
-
301
- ```tsx
302
- <SpanPrimitive.Timeline>
303
- <SpanPrimitive.Children>
304
- {() => (
305
- <div className="relative h-8">
306
- <SpanPrimitive.TimelineBar className="top-1 h-6 rounded bg-blue-500" />
307
- </div>
308
- )}
309
- </SpanPrimitive.Children>
310
- </SpanPrimitive.Timeline>
311
- ```
312
-
313
- Running spans use the timeline range max when `now` is omitted, keeping SSR and hydration deterministic. For live ticking, update a timestamp from an effect or animation loop and pass it as `now`.
314
-
315
- | Prop | Type | Default | Description |
316
- | --- | --- | --- | --- |
317
- | `now` | `number` | `undefined` | Explicit timestamp used as the end of running spans. |
318
- | `timeRange` | `{ min: number; max: number }` | nearest `Timeline` range | Override the range used for this bar. |
319
-
320
- Exposes `data-span-status`, `data-span-type`, `data-span-running`, and these CSS variables:
321
-
322
- | Variable | Description |
323
- | --- | --- |
324
- | `--span-timeline-left` | Bar start position as a percentage. |
325
- | `--span-timeline-end` | Bar end position as a percentage. |
326
- | `--span-timeline-width` | Bar width as a percentage. |
327
- | `--span-timeline-duration-ms` | Bar duration in milliseconds. |
328
- | `--span-timeline-min-width` | Optional consumer-set minimum width used by the default inline size. |
329
-
330
- ## Styling
331
-
332
- All primitives forward refs and accept standard DOM props (`className`, `style`, etc.). Use the data attributes for state-based styling:
333
-
334
- ```css
335
- [data-span-status="running"] {
336
- /* yellow indicator */
337
- }
338
- [data-span-status="failed"] {
339
- /* red indicator */
340
- }
341
- [data-collapsed="true"] svg {
342
- transform: rotate(0deg);
343
- }
344
- [data-collapsed="false"] svg {
345
- transform: rotate(90deg);
346
- }
347
- ```
348
-
349
- ## Related
350
-
351
- <Cards>
352
- <Card
353
- title="heat-graph"
354
- description="Activity heatmap primitives in the same Radix-style headless pattern."
355
- href="/docs/utilities/heat-graph"
356
- />
357
- <Card
358
- title="Primitives overview"
359
- description="The broader assistant-ui primitive system."
360
- href="/docs/primitives"
361
- />
362
- </Cards>
@@ -1,212 +0,0 @@
1
- ---
2
- title: tw-shimmer
3
- description: Tailwind CSS v4 plugin for shimmer effects.
4
- platforms: ["react"]
5
- ---
6
-
7
- `tw-shimmer` is a zero-dependency Tailwind CSS v4 plugin that provides polished shimmer animations for both text and skeleton loaders. It uses sine-eased gradients with 17 carefully calculated stops and OKLCH color mixing for smooth, banding-free effects.
8
-
9
- - **CSS-only** — No JavaScript runtime, pure Tailwind utilities
10
- - **Text + Background** — Shimmer text or skeleton placeholders
11
- - **Auto-sizing** — CSS container queries for automatic width detection
12
- - **Customizable** — Speed, spread, angle, color, and timing
13
-
14
- See the [interactive demo](/tw-shimmer) for live examples.
15
-
16
- ## Installation
17
-
18
- <Tabs items={["npm", "pnpm", "yarn"]}>
19
- <Tab value="npm">
20
- ```sh
21
- npm install tw-shimmer
22
- ```
23
- </Tab>
24
- <Tab value="pnpm">
25
- ```sh
26
- pnpm add tw-shimmer
27
- ```
28
- </Tab>
29
- <Tab value="yarn">
30
- ```sh
31
- yarn add tw-shimmer
32
- ```
33
- </Tab>
34
- </Tabs>
35
-
36
- Add to your CSS:
37
-
38
- ```css title="app/globals.css"
39
- @import "tailwindcss";
40
- @import "tw-shimmer";
41
- ```
42
-
43
- ## Quick Start
44
-
45
- ### Text Shimmer
46
-
47
- ```html
48
- <span class="shimmer text-foreground/60">Loading...</span>
49
- ```
50
-
51
- <Callout type="info">
52
- Set a semi-transparent text color (e.g., `text-foreground/40`) for the shimmer highlight to be visible.
53
- </Callout>
54
-
55
- ### Skeleton Loader
56
-
57
- ```html
58
- <div class="shimmer shimmer-bg bg-muted h-4 w-48 rounded" />
59
- ```
60
-
61
- ### Skeleton Card with Auto-Sizing
62
-
63
- ```html
64
- <div class="shimmer-container flex gap-3">
65
- <div class="shimmer-bg bg-muted size-12 rounded-full" />
66
- <div class="flex-1 space-y-2">
67
- <div class="shimmer-bg bg-muted h-4 w-1/4 rounded" />
68
- <div class="shimmer-bg bg-muted h-4 w-full rounded" />
69
- <div class="shimmer-bg bg-muted h-4 w-4/5 rounded" />
70
- </div>
71
- </div>
72
- ```
73
-
74
- ## API Reference
75
-
76
- ### Core Utilities
77
-
78
- #### `shimmer`
79
-
80
- Base utility for text shimmer. Applies a gradient animation over the text foreground color.
81
-
82
- #### `shimmer-bg`
83
-
84
- Background shimmer for skeleton loaders. Applies a gradient animation over the element's background. Requires a base `bg-*` class.
85
-
86
- ```html
87
- <div class="shimmer shimmer-bg bg-muted h-4 w-64 rounded" />
88
- ```
89
-
90
- #### `shimmer-container`
91
-
92
- CSS-only auto-sizing helper using container queries. Sets `container-type: inline-size` and automatically derives speed and spread from the container width.
93
-
94
- ```html
95
- <div class="shimmer-container">
96
- <div class="shimmer-bg bg-muted h-4 w-full rounded" />
97
- </div>
98
- ```
99
-
100
- <Callout type="warn">
101
- `shimmer-container` sets `container-type: inline-size`, which prevents shrink-to-fit sizing. Not recommended for text-only containers.
102
- </Callout>
103
-
104
- ### Customization Utilities
105
-
106
- | Utility | Default (text) | Default (bg) | Description |
107
- | --------------------------- | -------------- | ------------ | ---------------------------------- |
108
- | `shimmer-speed-{n}` | `150` | `1000` | Animation speed in px/s |
109
- | `shimmer-width-{n}` | `200` | `800` | Container width in px for timing |
110
- | `shimmer-spread-{n}` | `6ch` | — | Text shimmer highlight width |
111
- | `shimmer-bg-spread-{n}` | — | `480px` | Background shimmer highlight width |
112
- | `shimmer-color-{color}` | auto | auto | Highlight color (Tailwind palette) |
113
- | `shimmer-angle-{deg}` | `90` | `90` | Sweep direction in degrees |
114
- | `shimmer-duration-{ms}` | auto | auto | Fixed animation duration |
115
- | `shimmer-repeat-delay-{ms}` | `1000` | `1000` | Pause between cycles |
116
- | `shimmer-invert` | — | — | Invert highlight direction |
117
-
118
- All utilities are **inheritable** — set on a parent to affect all shimmer children.
119
-
120
- ### Speed and Width
121
-
122
- Speed controls how fast the shimmer moves in pixels per second. Width tells the animation how wide the container is for timing calculations.
123
-
124
- ```html
125
- <span class="shimmer shimmer-speed-200 shimmer-width-400 text-foreground/40">
126
- Fast, wide shimmer
127
- </span>
128
- ```
129
-
130
- ### Color
131
-
132
- Use any Tailwind color with optional opacity:
133
-
134
- ```html
135
- <span class="shimmer shimmer-color-blue-500 text-blue-500/40">
136
- Blue shimmer
137
- </span>
138
-
139
- <div class="shimmer shimmer-bg shimmer-color-blue-300/30 bg-muted h-4 rounded" />
140
- ```
141
-
142
- ### Angle
143
-
144
- Control the sweep direction. Default is `90deg` (vertical sweep).
145
-
146
- ```html
147
- <div class="shimmer-container shimmer-angle-15">
148
- <div class="shimmer-bg bg-muted h-4 w-full rounded" />
149
- </div>
150
- ```
151
-
152
- <Callout type="warn">
153
- Avoid exactly `0deg` and `180deg` — they cause extreme animation delays. Safe range: 15-75° or 105-165°.
154
- </Callout>
155
-
156
- ### Position Hints (Angled Shimmer)
157
-
158
- For angled shimmers, use `shimmer-x-{n}` and `shimmer-y-{n}` to sync elements:
159
-
160
- ```html
161
- <div class="shimmer-container shimmer-angle-15 flex gap-3">
162
- <div class="shimmer-bg shimmer-x-20 shimmer-y-20 bg-muted size-12 rounded-full" />
163
- <div class="flex-1 space-y-2">
164
- <div class="shimmer-bg shimmer-x-52 shimmer-y-0 bg-muted h-4 w-24 rounded" />
165
- <div class="shimmer-bg shimmer-x-52 shimmer-y-24 bg-muted h-4 w-full rounded" />
166
- </div>
167
- </div>
168
- ```
169
-
170
- ### Repeat Delay
171
-
172
- Control the pause between animation cycles:
173
-
174
- ```html
175
- <!-- Continuous shimmer, no pause -->
176
- <span class="shimmer shimmer-repeat-delay-0 text-foreground/40">
177
- Always moving
178
- </span>
179
-
180
- <!-- Long pause between cycles -->
181
- <span class="shimmer shimmer-repeat-delay-3000 text-foreground/40">
182
- Slow pulse
183
- </span>
184
- ```
185
-
186
- ## CSS Variables
187
-
188
- All values can be set via CSS variables for dynamic control:
189
-
190
- | Variable | Description |
191
- | ------------------------ | ------------------------- |
192
- | `--shimmer-speed` | Speed in px/s |
193
- | `--shimmer-width` | Track width in px |
194
- | `--shimmer-spread` | Highlight width |
195
- | `--shimmer-angle` | Sweep angle |
196
- | `--shimmer-color` | Highlight color |
197
- | `--shimmer-duration` | Override duration (ms) |
198
- | `--shimmer-repeat-delay` | Pause between cycles (ms) |
199
-
200
- ```tsx
201
- <div style={{ "--shimmer-width": containerWidth } as React.CSSProperties}>
202
- <div className="shimmer shimmer-bg bg-muted h-4 w-full rounded" />
203
- </div>
204
- ```
205
-
206
- ## Browser Support
207
-
208
- Uses modern CSS features: `oklch()`, `color-mix()`, independent `translate` transform, and CSS Container Queries.
209
-
210
- **Supported:** Chrome 111+, Firefox 113+, Safari 16.4+
211
-
212
- Older browsers degrade gracefully — shimmer effects simply won't appear.
@@ -1,14 +0,0 @@
1
- //#region src/constants.d.ts
2
- declare const ROOT_DIR: string;
3
- declare const PACKAGE_DIR: string;
4
- declare const EXAMPLES_PATH: string;
5
- declare const DOCS_PATH: string;
6
- declare const CODE_EXAMPLES_PATH: string;
7
- declare const MDX_EXTENSION = ".mdx";
8
- declare const MD_EXTENSION = ".md";
9
- declare const MAX_FILE_SIZE: number;
10
- declare const MAX_DIRECTORY_CONTENT_SIZE: number;
11
- declare const IS_PREPARE_MODE: boolean | undefined;
12
- //#endregion
13
- export { CODE_EXAMPLES_PATH, DOCS_PATH, EXAMPLES_PATH, IS_PREPARE_MODE, MAX_DIRECTORY_CONTENT_SIZE, MAX_FILE_SIZE, MDX_EXTENSION, MD_EXTENSION, PACKAGE_DIR, ROOT_DIR };
14
- //# sourceMappingURL=constants.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.d.ts","names":[],"sources":["../src/constants.ts"],"mappings":";cAKa;cACA;cAEA;cAGA;cACA;cAEA;cACA;cAEA;cAEA;cAEA"}
package/dist/constants.js DELETED
@@ -1,19 +0,0 @@
1
- import { fileURLToPath } from "node:url";
2
- import { dirname, join } from "node:path";
3
- //#region src/constants.ts
4
- const __dirname = dirname(fileURLToPath(import.meta.url));
5
- const ROOT_DIR = join(__dirname, "../../../");
6
- const PACKAGE_DIR = join(__dirname, "../");
7
- const EXAMPLES_PATH = join(ROOT_DIR, "examples");
8
- const DOCS_BASE = join(PACKAGE_DIR, ".docs");
9
- const DOCS_PATH = join(DOCS_BASE, "raw/docs");
10
- const CODE_EXAMPLES_PATH = join(DOCS_BASE, "organized/code-examples");
11
- const MDX_EXTENSION = ".mdx";
12
- const MD_EXTENSION = ".md";
13
- const MAX_FILE_SIZE = 10485760;
14
- const MAX_DIRECTORY_CONTENT_SIZE = 1048576;
15
- const IS_PREPARE_MODE = process.argv[1]?.includes("prepare-docs/prepare");
16
- //#endregion
17
- export { CODE_EXAMPLES_PATH, DOCS_PATH, EXAMPLES_PATH, IS_PREPARE_MODE, MAX_DIRECTORY_CONTENT_SIZE, MAX_FILE_SIZE, MDX_EXTENSION, MD_EXTENSION, PACKAGE_DIR, ROOT_DIR };
18
-
19
- //# sourceMappingURL=constants.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.js","names":[],"sources":["../src/constants.ts"],"sourcesContent":["import { fileURLToPath } from \"node:url\";\nimport { dirname, join } from \"node:path\";\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\n\nexport const ROOT_DIR = join(__dirname, \"../../../\");\nexport const PACKAGE_DIR = join(__dirname, \"../\");\n\nexport const EXAMPLES_PATH = join(ROOT_DIR, \"examples\");\n\nconst DOCS_BASE = join(PACKAGE_DIR, \".docs\");\nexport const DOCS_PATH = join(DOCS_BASE, \"raw/docs\");\nexport const CODE_EXAMPLES_PATH = join(DOCS_BASE, \"organized/code-examples\");\n\nexport const MDX_EXTENSION = \".mdx\";\nexport const MD_EXTENSION = \".md\";\n\nexport const MAX_FILE_SIZE = 10 * 1024 * 1024;\n\nexport const MAX_DIRECTORY_CONTENT_SIZE = 1024 * 1024;\n\nexport const IS_PREPARE_MODE = process.argv[1]?.includes(\n \"prepare-docs/prepare\",\n);\n"],"mappings":";;;AAGA,MAAM,YAAY,QAAQ,cAAc,YAAY,GAAG,CAAC;AAExD,MAAa,WAAW,KAAK,WAAW,WAAW;AACnD,MAAa,cAAc,KAAK,WAAW,KAAK;AAEhD,MAAa,gBAAgB,KAAK,UAAU,UAAU;AAEtD,MAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,MAAa,YAAY,KAAK,WAAW,UAAU;AACnD,MAAa,qBAAqB,KAAK,WAAW,yBAAyB;AAE3E,MAAa,gBAAgB;AAC7B,MAAa,eAAe;AAE5B,MAAa,gBAAgB;AAE7B,MAAa,6BAA6B;AAE1C,MAAa,kBAAkB,QAAQ,KAAK,EAAE,EAAE,SAC9C,sBACF"}
@@ -1,5 +0,0 @@
1
- //#region src/prepare-docs/code-examples.d.ts
2
- declare function prepareCodeExamples(): Promise<void>;
3
- //#endregion
4
- export { prepareCodeExamples };
5
- //# sourceMappingURL=code-examples.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"code-examples.d.ts","names":[],"sources":["../../src/prepare-docs/code-examples.ts"],"mappings":";iBA2FsB,uBAAuB"}