@kitn.ai/ui 0.14.1 → 0.15.1

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