@assistant-ui/mcp-docs-server 0.2.3 → 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.
- package/README.md +16 -43
- package/dist/index.d.ts +2 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -91
- package/dist/index.js.map +1 -1
- package/dist/proxy.d.ts +9 -0
- package/dist/proxy.d.ts.map +1 -0
- package/dist/proxy.js +76 -0
- package/dist/proxy.js.map +1 -0
- package/package.json +8 -12
- package/src/index.ts +3 -115
- package/src/proxy.test.ts +250 -0
- package/src/proxy.ts +111 -0
- package/.docs/organized/code-examples/waterfall.md +0 -807
- package/.docs/organized/code-examples/with-a2a.md +0 -675
- package/.docs/organized/code-examples/with-ag-ui.md +0 -553
- package/.docs/organized/code-examples/with-ai-sdk-v7.md +0 -466
- package/.docs/organized/code-examples/with-artifacts.md +0 -815
- package/.docs/organized/code-examples/with-assistant-transport.md +0 -576
- package/.docs/organized/code-examples/with-browser-extension.md +0 -371
- package/.docs/organized/code-examples/with-chain-of-thought.md +0 -962
- package/.docs/organized/code-examples/with-cloud-standalone.md +0 -681
- package/.docs/organized/code-examples/with-cloud.md +0 -439
- package/.docs/organized/code-examples/with-custom-thread-list.md +0 -569
- package/.docs/organized/code-examples/with-elevenlabs-conversational.md +0 -527
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +0 -697
- package/.docs/organized/code-examples/with-eve.md +0 -405
- package/.docs/organized/code-examples/with-expo.md +0 -2246
- package/.docs/organized/code-examples/with-external-store.md +0 -421
- package/.docs/organized/code-examples/with-ffmpeg.md +0 -829
- package/.docs/organized/code-examples/with-generative-ui.md +0 -1810
- package/.docs/organized/code-examples/with-google-adk.md +0 -368
- package/.docs/organized/code-examples/with-heat-graph.md +0 -304
- package/.docs/organized/code-examples/with-image-generation.md +0 -463
- package/.docs/organized/code-examples/with-interactables.md +0 -733
- package/.docs/organized/code-examples/with-langchain.md +0 -446
- package/.docs/organized/code-examples/with-langgraph.md +0 -855
- package/.docs/organized/code-examples/with-livekit.md +0 -643
- package/.docs/organized/code-examples/with-mcp.md +0 -782
- package/.docs/organized/code-examples/with-nuxt.md +0 -2428
- package/.docs/organized/code-examples/with-opencode.md +0 -1974
- package/.docs/organized/code-examples/with-openui.md +0 -450
- package/.docs/organized/code-examples/with-pi.md +0 -2084
- package/.docs/organized/code-examples/with-react-hook-form.md +0 -727
- package/.docs/organized/code-examples/with-react-ink-web.md +0 -740
- package/.docs/organized/code-examples/with-react-ink.md +0 -473
- package/.docs/organized/code-examples/with-react-router.md +0 -936
- package/.docs/organized/code-examples/with-resumable-stream.md +0 -668
- package/.docs/organized/code-examples/with-store.md +0 -679
- package/.docs/organized/code-examples/with-svelte.md +0 -415
- package/.docs/organized/code-examples/with-sveltekit.md +0 -1061
- package/.docs/organized/code-examples/with-tanstack.md +0 -812
- package/.docs/organized/code-examples/with-tap-runtime.md +0 -813
- package/.docs/organized/code-examples/with-virtualized-thread.md +0 -681
- package/.docs/organized/code-examples/with-vue.md +0 -408
- package/.docs/raw/docs/(getting-started)/architecture.mdx +0 -146
- package/.docs/raw/docs/(getting-started)/base-ui.mdx +0 -39
- package/.docs/raw/docs/(getting-started)/cli.mdx +0 -542
- package/.docs/raw/docs/(getting-started)/devtools.mdx +0 -79
- package/.docs/raw/docs/(getting-started)/index.mdx +0 -23
- package/.docs/raw/docs/(getting-started)/installation.mdx +0 -483
- package/.docs/raw/docs/(getting-started)/llm.mdx +0 -211
- package/.docs/raw/docs/(getting-started)/rtl.mdx +0 -78
- package/.docs/raw/docs/(reference)/api-reference/adapters/attachments.mdx +0 -36
- package/.docs/raw/docs/(reference)/api-reference/adapters/feedback.mdx +0 -20
- package/.docs/raw/docs/(reference)/api-reference/adapters/index.mdx +0 -34
- package/.docs/raw/docs/(reference)/api-reference/adapters/model.mdx +0 -44
- package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +0 -59
- package/.docs/raw/docs/(reference)/api-reference/adapters/runtime.mdx +0 -20
- package/.docs/raw/docs/(reference)/api-reference/adapters/suggestions.mdx +0 -26
- package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx +0 -84
- package/.docs/raw/docs/(reference)/api-reference/context-providers/index.mdx +0 -22
- package/.docs/raw/docs/(reference)/api-reference/context-providers/scoped-providers.mdx +0 -64
- package/.docs/raw/docs/(reference)/api-reference/external-store/index.mdx +0 -22
- package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +0 -57
- package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +0 -49
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/a2ui.mdx +0 -40
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/actions.mdx +0 -56
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/components.mdx +0 -86
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx +0 -39
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/json-generative-ui.mdx +0 -42
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/rendering.mdx +0 -84
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/slack.mdx +0 -85
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/spec.mdx +0 -45
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/teams.mdx +0 -93
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/tokens.mdx +0 -62
- package/.docs/raw/docs/(reference)/api-reference/hooks/composer-triggers.mdx +0 -129
- package/.docs/raw/docs/(reference)/api-reference/hooks/index.mdx +0 -31
- package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +0 -34
- package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +0 -350
- package/.docs/raw/docs/(reference)/api-reference/hooks/runtimes.mdx +0 -28
- package/.docs/raw/docs/(reference)/api-reference/hooks/state.mdx +0 -97
- package/.docs/raw/docs/(reference)/api-reference/integrations/ai-sdk.mdx +0 -200
- package/.docs/raw/docs/(reference)/api-reference/integrations/cloud-ai-sdk.mdx +0 -24
- package/.docs/raw/docs/(reference)/api-reference/integrations/eve.mdx +0 -118
- package/.docs/raw/docs/(reference)/api-reference/integrations/index.mdx +0 -28
- package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +0 -37
- package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +0 -50
- package/.docs/raw/docs/(reference)/api-reference/model-context/index.mdx +0 -22
- package/.docs/raw/docs/(reference)/api-reference/model-context/registry.mdx +0 -20
- package/.docs/raw/docs/(reference)/api-reference/overview.mdx +0 -566
- package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar-more.mdx +0 -152
- package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +0 -239
- package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx +0 -208
- package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +0 -108
- package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +0 -99
- package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +0 -145
- package/.docs/raw/docs/(reference)/api-reference/primitives/chain-of-thought.mdx +0 -82
- package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +0 -637
- package/.docs/raw/docs/(reference)/api-reference/primitives/composition.mdx +0 -22
- package/.docs/raw/docs/(reference)/api-reference/primitives/error.mdx +0 -65
- package/.docs/raw/docs/(reference)/api-reference/primitives/index.mdx +0 -73
- package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +0 -117
- package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +0 -339
- package/.docs/raw/docs/(reference)/api-reference/primitives/queue-item.mdx +0 -77
- package/.docs/raw/docs/(reference)/api-reference/primitives/selection-toolbar.mdx +0 -88
- package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +0 -81
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item-more.mdx +0 -129
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +0 -138
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +0 -122
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +0 -289
- package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +0 -20
- package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +0 -24
- package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +0 -32
- package/.docs/raw/docs/(reference)/api-reference/runtimes/index.mdx +0 -43
- package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +0 -43
- package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +0 -24
- package/.docs/raw/docs/(reference)/api-reference/runtimes/queue-state.mdx +0 -20
- package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +0 -24
- package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +0 -24
- package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +0 -36
- package/.docs/raw/docs/(reference)/api-reference/tools/component-tools.mdx +0 -85
- package/.docs/raw/docs/(reference)/api-reference/tools/index.mdx +0 -45
- package/.docs/raw/docs/(reference)/api-reference/tools/interactables-legacy.mdx +0 -55
- package/.docs/raw/docs/(reference)/api-reference/tools/interactables.mdx +0 -151
- package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +0 -106
- package/.docs/raw/docs/(reference)/api-reference/tools/status.mdx +0 -62
- package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +0 -178
- package/.docs/raw/docs/(reference)/api-reference/transport/assistant-transport.mdx +0 -48
- package/.docs/raw/docs/(reference)/api-reference/transport/frame.mdx +0 -62
- package/.docs/raw/docs/(reference)/api-reference/transport/index.mdx +0 -22
- package/.docs/raw/docs/(reference)/api-reference/utilities/index.mdx +0 -19
- package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +0 -152
- package/.docs/raw/docs/(reference)/api-reference/voice/index.mdx +0 -22
- package/.docs/raw/docs/(reference)/api-reference/voice/session.mdx +0 -54
- package/.docs/raw/docs/(reference)/api-reference/voice/speech-dictation.mdx +0 -36
- package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +0 -527
- package/.docs/raw/docs/cloud/ai-sdk.mdx +0 -604
- package/.docs/raw/docs/cloud/authorization.mdx +0 -252
- package/.docs/raw/docs/cloud/index.mdx +0 -46
- package/.docs/raw/docs/cloud/langgraph.mdx +0 -554
- package/.docs/raw/docs/copilots/assistant-frame.mdx +0 -411
- package/.docs/raw/docs/copilots/make-assistant-visible.mdx +0 -82
- package/.docs/raw/docs/copilots/model-context.mdx +0 -156
- package/.docs/raw/docs/copilots/motivation.mdx +0 -202
- package/.docs/raw/docs/copilots/use-assistant-instructions.mdx +0 -64
- package/.docs/raw/docs/guides/attachments.mdx +0 -619
- package/.docs/raw/docs/guides/branching.mdx +0 -76
- package/.docs/raw/docs/guides/chain-of-thought.mdx +0 -164
- package/.docs/raw/docs/guides/chatgpt-subscription.mdx +0 -108
- package/.docs/raw/docs/guides/context-api.mdx +0 -619
- package/.docs/raw/docs/guides/dictation.mdx +0 -298
- package/.docs/raw/docs/guides/editing.mdx +0 -102
- package/.docs/raw/docs/guides/electron.mdx +0 -369
- package/.docs/raw/docs/guides/headless-composer-input.mdx +0 -113
- package/.docs/raw/docs/guides/image-generation.mdx +0 -74
- package/.docs/raw/docs/guides/index.mdx +0 -117
- package/.docs/raw/docs/guides/input-history.mdx +0 -55
- package/.docs/raw/docs/guides/latex.mdx +0 -158
- package/.docs/raw/docs/guides/mentions.mdx +0 -575
- package/.docs/raw/docs/guides/message-timing.mdx +0 -215
- package/.docs/raw/docs/guides/quoting.mdx +0 -169
- package/.docs/raw/docs/guides/resumable-stream-deployment.mdx +0 -212
- package/.docs/raw/docs/guides/resumable-stream-stores.mdx +0 -152
- package/.docs/raw/docs/guides/resumable-streams.mdx +0 -292
- package/.docs/raw/docs/guides/slash-commands.mdx +0 -358
- package/.docs/raw/docs/guides/speech.mdx +0 -172
- package/.docs/raw/docs/guides/suggestions.mdx +0 -384
- package/.docs/raw/docs/guides/virtualization.mdx +0 -133
- package/.docs/raw/docs/guides/voice.mdx +0 -310
- package/.docs/raw/docs/ink/adapters.mdx +0 -99
- package/.docs/raw/docs/ink/custom-backend.mdx +0 -254
- package/.docs/raw/docs/ink/hooks.mdx +0 -469
- package/.docs/raw/docs/ink/index.mdx +0 -237
- package/.docs/raw/docs/ink/migration.mdx +0 -138
- package/.docs/raw/docs/ink/primitives.mdx +0 -1259
- package/.docs/raw/docs/integrations/attachments/custom-adapter.mdx +0 -528
- package/.docs/raw/docs/integrations/auth/better-auth.mdx +0 -188
- package/.docs/raw/docs/integrations/auth/clerk.mdx +0 -166
- package/.docs/raw/docs/integrations/auth/next-auth.mdx +0 -191
- package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +0 -88
- package/.docs/raw/docs/integrations/frameworks/cloudflare-agents.mdx +0 -283
- package/.docs/raw/docs/integrations/frameworks/mastra/full-stack.mdx +0 -188
- package/.docs/raw/docs/integrations/frameworks/mastra/overview.mdx +0 -57
- package/.docs/raw/docs/integrations/frameworks/mastra/separate-server.mdx +0 -201
- package/.docs/raw/docs/integrations/gateways/index.mdx +0 -162
- package/.docs/raw/docs/integrations/index.mdx +0 -178
- package/.docs/raw/docs/integrations/observability/helicone.mdx +0 -129
- package/.docs/raw/docs/integrations/observability/langfuse.mdx +0 -161
- package/.docs/raw/docs/integrations/observability/langsmith.mdx +0 -151
- package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +0 -773
- package/.docs/raw/docs/migrations/deprecation-policy.mdx +0 -42
- package/.docs/raw/docs/migrations/index.mdx +0 -50
- package/.docs/raw/docs/migrations/react-compatibility.mdx +0 -74
- package/.docs/raw/docs/migrations/react-langgraph-v0-7.mdx +0 -328
- package/.docs/raw/docs/migrations/toolkit-tools.mdx +0 -236
- package/.docs/raw/docs/migrations/v0-11.mdx +0 -172
- package/.docs/raw/docs/migrations/v0-12.mdx +0 -302
- package/.docs/raw/docs/migrations/v0-14.mdx +0 -297
- package/.docs/raw/docs/migrations/v0-15.mdx +0 -270
- package/.docs/raw/docs/primitives/action-bar.mdx +0 -352
- package/.docs/raw/docs/primitives/assistant-modal.mdx +0 -216
- package/.docs/raw/docs/primitives/attachment.mdx +0 -217
- package/.docs/raw/docs/primitives/branch-picker.mdx +0 -222
- package/.docs/raw/docs/primitives/chain-of-thought.mdx +0 -315
- package/.docs/raw/docs/primitives/composer.mdx +0 -659
- package/.docs/raw/docs/primitives/error.mdx +0 -142
- package/.docs/raw/docs/primitives/index.mdx +0 -99
- package/.docs/raw/docs/primitives/message.mdx +0 -618
- package/.docs/raw/docs/primitives/selection-toolbar.mdx +0 -191
- package/.docs/raw/docs/primitives/suggestion.mdx +0 -254
- package/.docs/raw/docs/primitives/thread-list.mdx +0 -467
- package/.docs/raw/docs/primitives/thread.mdx +0 -509
- package/.docs/raw/docs/react-native/adapters.mdx +0 -94
- package/.docs/raw/docs/react-native/custom-backend.mdx +0 -207
- package/.docs/raw/docs/react-native/hooks.mdx +0 -339
- package/.docs/raw/docs/react-native/index.mdx +0 -289
- package/.docs/raw/docs/react-native/migration.mdx +0 -142
- package/.docs/raw/docs/react-native/primitives.mdx +0 -976
- package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +0 -399
- package/.docs/raw/docs/runtimes/a2a/overview.mdx +0 -60
- package/.docs/raw/docs/runtimes/a2a/quickstart.mdx +0 -216
- package/.docs/raw/docs/runtimes/ag-ui/agent-state.mdx +0 -124
- package/.docs/raw/docs/runtimes/ag-ui/overview.mdx +0 -70
- package/.docs/raw/docs/runtimes/ag-ui/quickstart.mdx +0 -243
- package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +0 -267
- package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx +0 -61
- package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +0 -122
- package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +0 -135
- package/.docs/raw/docs/runtimes/ai-sdk/v6-legacy.mdx +0 -636
- package/.docs/raw/docs/runtimes/ai-sdk/v7.mdx +0 -731
- package/.docs/raw/docs/runtimes/claude-managed-agents.mdx +0 -118
- package/.docs/raw/docs/runtimes/concepts/adapters.mdx +0 -265
- package/.docs/raw/docs/runtimes/concepts/architecture.mdx +0 -167
- package/.docs/raw/docs/runtimes/concepts/stability.mdx +0 -68
- package/.docs/raw/docs/runtimes/concepts/threads.mdx +0 -513
- package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +0 -763
- package/.docs/raw/docs/runtimes/custom/data-stream.mdx +0 -339
- package/.docs/raw/docs/runtimes/custom/external-store.mdx +0 -957
- package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +0 -902
- package/.docs/raw/docs/runtimes/custom/overview.mdx +0 -71
- package/.docs/raw/docs/runtimes/eve/overview.mdx +0 -151
- package/.docs/raw/docs/runtimes/eve/quickstart.mdx +0 -192
- package/.docs/raw/docs/runtimes/google-adk/api.mdx +0 -256
- package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +0 -784
- package/.docs/raw/docs/runtimes/google-adk/overview.mdx +0 -69
- package/.docs/raw/docs/runtimes/google-adk/quickstart.mdx +0 -229
- package/.docs/raw/docs/runtimes/langchain.mdx +0 -901
- package/.docs/raw/docs/runtimes/langgraph/agent-state.mdx +0 -181
- package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +0 -305
- package/.docs/raw/docs/runtimes/langgraph/interrupts.mdx +0 -104
- package/.docs/raw/docs/runtimes/langgraph/overview.mdx +0 -84
- package/.docs/raw/docs/runtimes/langgraph/quickstart.mdx +0 -496
- package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +0 -144
- package/.docs/raw/docs/runtimes/langgraph/threads.mdx +0 -113
- package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +0 -29
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +0 -93
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +0 -347
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +0 -393
- package/.docs/raw/docs/runtimes/opencode/hooks.mdx +0 -194
- package/.docs/raw/docs/runtimes/opencode/overview.mdx +0 -58
- package/.docs/raw/docs/runtimes/opencode/quickstart.mdx +0 -119
- package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +0 -133
- package/.docs/raw/docs/tools/a2ui.mdx +0 -107
- package/.docs/raw/docs/tools/backend.mdx +0 -147
- package/.docs/raw/docs/tools/defining-tools.mdx +0 -574
- package/.docs/raw/docs/tools/dynamic-tools.mdx +0 -112
- package/.docs/raw/docs/tools/generative-ui-primitive.mdx +0 -180
- package/.docs/raw/docs/tools/generative-ui-slack.mdx +0 -167
- package/.docs/raw/docs/tools/generative-ui-teams.mdx +0 -160
- package/.docs/raw/docs/tools/generative-ui.mdx +0 -322
- package/.docs/raw/docs/tools/index.mdx +0 -72
- package/.docs/raw/docs/tools/interactables.mdx +0 -1084
- package/.docs/raw/docs/tools/mcp-apps.mdx +0 -363
- package/.docs/raw/docs/tools/mcp.mdx +0 -466
- package/.docs/raw/docs/tools/multi-agent.mdx +0 -237
- package/.docs/raw/docs/tools/openui.mdx +0 -175
- package/.docs/raw/docs/tools/tool-ui.mdx +0 -1020
- package/.docs/raw/docs/tools/user-managed-mcp.mdx +0 -428
- package/.docs/raw/docs/ui/assistant-modal.mdx +0 -166
- package/.docs/raw/docs/ui/assistant-sidebar.mdx +0 -89
- package/.docs/raw/docs/ui/attachment.mdx +0 -279
- package/.docs/raw/docs/ui/composer-trigger-popover.mdx +0 -247
- package/.docs/raw/docs/ui/context-display.mdx +0 -148
- package/.docs/raw/docs/ui/directive-text.mdx +0 -114
- package/.docs/raw/docs/ui/file.mdx +0 -159
- package/.docs/raw/docs/ui/follow-up-suggestions.mdx +0 -82
- package/.docs/raw/docs/ui/image.mdx +0 -102
- package/.docs/raw/docs/ui/markdown.mdx +0 -103
- package/.docs/raw/docs/ui/mcp-config.mdx +0 -107
- package/.docs/raw/docs/ui/mermaid.mdx +0 -92
- package/.docs/raw/docs/ui/message-timing.mdx +0 -93
- package/.docs/raw/docs/ui/model-selector.mdx +0 -455
- package/.docs/raw/docs/ui/part-grouping.mdx +0 -614
- package/.docs/raw/docs/ui/quote.mdx +0 -211
- package/.docs/raw/docs/ui/reasoning.mdx +0 -214
- package/.docs/raw/docs/ui/scrollbar.mdx +0 -77
- package/.docs/raw/docs/ui/sources.mdx +0 -186
- package/.docs/raw/docs/ui/streamdown.mdx +0 -392
- package/.docs/raw/docs/ui/syntax-highlighting.mdx +0 -205
- package/.docs/raw/docs/ui/thread-list.mdx +0 -411
- package/.docs/raw/docs/ui/thread.mdx +0 -559
- package/.docs/raw/docs/ui/tool-fallback.mdx +0 -141
- package/.docs/raw/docs/ui/tool-group.mdx +0 -240
- package/.docs/raw/docs/ui/voice.mdx +0 -173
- package/.docs/raw/docs/utilities/heat-graph.mdx +0 -237
- package/.docs/raw/docs/utilities/react-o11y.mdx +0 -362
- package/.docs/raw/docs/utilities/tw-shimmer.mdx +0 -212
- package/dist/constants.d.ts +0 -14
- package/dist/constants.d.ts.map +0 -1
- package/dist/constants.js +0 -19
- package/dist/constants.js.map +0 -1
- package/dist/prepare-docs/code-examples.d.ts +0 -5
- package/dist/prepare-docs/code-examples.d.ts.map +0 -1
- package/dist/prepare-docs/code-examples.js +0 -117
- package/dist/prepare-docs/code-examples.js.map +0 -1
- package/dist/prepare-docs/copy-raw.d.ts +0 -5
- package/dist/prepare-docs/copy-raw.d.ts.map +0 -1
- package/dist/prepare-docs/copy-raw.js +0 -49
- package/dist/prepare-docs/copy-raw.js.map +0 -1
- package/dist/prepare-docs/prepare.d.ts +0 -1
- package/dist/prepare-docs/prepare.js +0 -22
- package/dist/prepare-docs/prepare.js.map +0 -1
- package/dist/prompts/xulux-playground.d.ts +0 -12
- package/dist/prompts/xulux-playground.d.ts.map +0 -1
- package/dist/prompts/xulux-playground.js +0 -33
- package/dist/prompts/xulux-playground.js.map +0 -1
- package/dist/tools/docs.d.ts +0 -22
- package/dist/tools/docs.d.ts.map +0 -1
- package/dist/tools/docs.js +0 -177
- package/dist/tools/docs.js.map +0 -1
- package/dist/tools/examples.d.ts +0 -24
- package/dist/tools/examples.d.ts.map +0 -1
- package/dist/tools/examples.js +0 -87
- package/dist/tools/examples.js.map +0 -1
- package/dist/tools/resources.d.ts +0 -6
- package/dist/tools/resources.d.ts.map +0 -1
- package/dist/tools/resources.js +0 -75
- package/dist/tools/resources.js.map +0 -1
- package/dist/tools/search.d.ts +0 -24
- package/dist/tools/search.d.ts.map +0 -1
- package/dist/tools/search.js +0 -39
- package/dist/tools/search.js.map +0 -1
- package/dist/tools/tests/mcp-test-client.d.ts +0 -15
- package/dist/tools/tests/mcp-test-client.d.ts.map +0 -1
- package/dist/tools/tests/mcp-test-client.js +0 -68
- package/dist/tools/tests/mcp-test-client.js.map +0 -1
- package/dist/tools/tests/test-setup.d.ts +0 -7
- package/dist/tools/tests/test-setup.d.ts.map +0 -1
- package/dist/tools/tests/test-setup.js +0 -36
- package/dist/tools/tests/test-setup.js.map +0 -1
- package/dist/tools/xulux-templates.d.ts +0 -58
- package/dist/tools/xulux-templates.d.ts.map +0 -1
- package/dist/tools/xulux-templates.js +0 -84
- package/dist/tools/xulux-templates.js.map +0 -1
- package/dist/utils/cache.d.ts +0 -5
- package/dist/utils/cache.d.ts.map +0 -1
- package/dist/utils/cache.js +0 -18
- package/dist/utils/cache.js.map +0 -1
- package/dist/utils/logger.d.ts +0 -10
- package/dist/utils/logger.d.ts.map +0 -1
- package/dist/utils/logger.js +0 -20
- package/dist/utils/logger.js.map +0 -1
- package/dist/utils/mcp-format.d.ts +0 -11
- package/dist/utils/mcp-format.d.ts.map +0 -1
- package/dist/utils/mcp-format.js +0 -14
- package/dist/utils/mcp-format.js.map +0 -1
- package/dist/utils/mdx.d.ts +0 -12
- package/dist/utils/mdx.d.ts.map +0 -1
- package/dist/utils/mdx.js +0 -45
- package/dist/utils/mdx.js.map +0 -1
- package/dist/utils/paths.d.ts +0 -12
- package/dist/utils/paths.d.ts.map +0 -1
- package/dist/utils/paths.js +0 -93
- package/dist/utils/paths.js.map +0 -1
- package/dist/utils/search.d.ts +0 -10
- package/dist/utils/search.d.ts.map +0 -1
- package/dist/utils/search.js +0 -97
- package/dist/utils/search.js.map +0 -1
- package/dist/utils/security.d.ts +0 -5
- package/dist/utils/security.d.ts.map +0 -1
- package/dist/utils/security.js +0 -22
- package/dist/utils/security.js.map +0 -1
- package/dist/xulux/catalog-client.d.ts +0 -14
- package/dist/xulux/catalog-client.d.ts.map +0 -1
- package/dist/xulux/catalog-client.js +0 -112
- package/dist/xulux/catalog-client.js.map +0 -1
- package/dist/xulux/fallback-catalog.d.ts +0 -7
- package/dist/xulux/fallback-catalog.d.ts.map +0 -1
- package/dist/xulux/fallback-catalog.js +0 -47
- package/dist/xulux/fallback-catalog.js.map +0 -1
- package/dist/xulux/fetch-sandbox.d.ts +0 -5
- package/dist/xulux/fetch-sandbox.d.ts.map +0 -1
- package/dist/xulux/fetch-sandbox.js +0 -40
- package/dist/xulux/fetch-sandbox.js.map +0 -1
- package/dist/xulux/template-service.d.ts +0 -84
- package/dist/xulux/template-service.d.ts.map +0 -1
- package/dist/xulux/template-service.js +0 -223
- package/dist/xulux/template-service.js.map +0 -1
- package/dist/xulux/types.d.ts +0 -55
- package/dist/xulux/types.d.ts.map +0 -1
- package/dist/xulux/types.js +0 -6
- package/dist/xulux/types.js.map +0 -1
- package/src/constants.ts +0 -24
- package/src/prepare-docs/code-examples.ts +0 -158
- package/src/prepare-docs/copy-raw.ts +0 -50
- package/src/prepare-docs/prepare.ts +0 -24
- package/src/prompts/xulux-playground.ts +0 -36
- package/src/tools/docs.ts +0 -255
- package/src/tools/examples.ts +0 -114
- package/src/tools/resources.ts +0 -111
- package/src/tools/search.ts +0 -46
- package/src/tools/tests/completions.test.ts +0 -60
- package/src/tools/tests/directory-size-cap.test.ts +0 -50
- package/src/tools/tests/docs.test.ts +0 -147
- package/src/tools/tests/examples.test.ts +0 -94
- package/src/tools/tests/integration.test.ts +0 -45
- package/src/tools/tests/json-parsing.test.ts +0 -23
- package/src/tools/tests/listings-cache.test.ts +0 -19
- package/src/tools/tests/mcp-protocol.test.ts +0 -216
- package/src/tools/tests/mcp-test-client.ts +0 -111
- package/src/tools/tests/path-traversal.test.ts +0 -84
- package/src/tools/tests/resources.test.ts +0 -133
- package/src/tools/tests/search.test.ts +0 -37
- package/src/tools/tests/test-setup.ts +0 -50
- package/src/tools/tests/xulux-templates.test.ts +0 -325
- package/src/tools/xulux-templates.ts +0 -141
- package/src/utils/cache.ts +0 -20
- package/src/utils/logger.ts +0 -20
- package/src/utils/mcp-format.ts +0 -14
- package/src/utils/mdx.ts +0 -59
- package/src/utils/paths.ts +0 -139
- package/src/utils/search.ts +0 -131
- package/src/utils/security.ts +0 -52
- package/src/utils/tests/cache.test.ts +0 -51
- package/src/utils/tests/mcp-format.test.ts +0 -22
- package/src/utils/tests/security.test.ts +0 -119
- package/src/xulux/catalog-client.ts +0 -150
- package/src/xulux/fallback-catalog.ts +0 -63
- package/src/xulux/fetch-sandbox.ts +0 -56
- package/src/xulux/template-service.ts +0 -406
- package/src/xulux/types.ts +0 -64
|
@@ -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/pages/docs/samples/o11y/waterfall";
|
|
8
|
-
import {
|
|
9
|
-
StatusSample,
|
|
10
|
-
CollapseSample,
|
|
11
|
-
StreamingSample,
|
|
12
|
-
} from "@/components/pages/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.
|
package/dist/constants.d.ts
DELETED
|
@@ -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
|
package/dist/constants.d.ts.map
DELETED
|
@@ -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
|
package/dist/constants.js.map
DELETED
|
@@ -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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"code-examples.d.ts","names":[],"sources":["../../src/prepare-docs/code-examples.ts"],"mappings":";iBA2FsB,uBAAuB"}
|