@kitn.ai/ui 0.15.0 → 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 (177) hide show
  1. package/dist/kitn-chat.es.js +1 -1
  2. package/package.json +6 -1
  3. package/src/elements/compiled.css +1 -1
  4. package/src/components/artifact.stories.tsx +0 -138
  5. package/src/components/attachments.stories.tsx +0 -303
  6. package/src/components/attachments.test.tsx +0 -64
  7. package/src/components/chain-of-thought.stories.tsx +0 -211
  8. package/src/components/chat-container.stories.tsx +0 -187
  9. package/src/components/chat-thread.test.tsx +0 -58
  10. package/src/components/checkpoint.stories.tsx +0 -102
  11. package/src/components/code-block.stories.tsx +0 -150
  12. package/src/components/confirm-card.stories.tsx +0 -74
  13. package/src/components/context.stories.tsx +0 -229
  14. package/src/components/context.test.tsx +0 -133
  15. package/src/components/conversation-item.stories.tsx +0 -125
  16. package/src/components/conversation-list.stories.tsx +0 -133
  17. package/src/components/default-input.test.tsx +0 -111
  18. package/src/components/empty.stories.tsx +0 -434
  19. package/src/components/feedback-bar.stories.tsx +0 -138
  20. package/src/components/feedback-bar.test.tsx +0 -103
  21. package/src/components/file-tree.stories.tsx +0 -73
  22. package/src/components/file-upload.stories.tsx +0 -156
  23. package/src/components/image.stories.tsx +0 -89
  24. package/src/components/loader.stories.tsx +0 -181
  25. package/src/components/markdown.stories.tsx +0 -180
  26. package/src/components/message-action-bar.test.tsx +0 -128
  27. package/src/components/message-narrow.stories.tsx +0 -329
  28. package/src/components/message-skills.stories.tsx +0 -211
  29. package/src/components/message.stories.tsx +0 -281
  30. package/src/components/model-switcher.stories.tsx +0 -123
  31. package/src/components/model-switcher.test.tsx +0 -65
  32. package/src/components/prompt-input.stories.tsx +0 -222
  33. package/src/components/prompt-suggestion.stories.tsx +0 -142
  34. package/src/components/reasoning.stories.tsx +0 -140
  35. package/src/components/resizable.test.tsx +0 -226
  36. package/src/components/scroll-button.stories.tsx +0 -100
  37. package/src/components/slash-command.stories.tsx +0 -163
  38. package/src/components/source-list.test.tsx +0 -152
  39. package/src/components/source.stories.tsx +0 -124
  40. package/src/components/tasks-card.stories.tsx +0 -78
  41. package/src/components/text-shimmer.stories.tsx +0 -87
  42. package/src/components/thinking-bar.stories.tsx +0 -87
  43. package/src/components/tool.stories.tsx +0 -153
  44. package/src/components/voice-input.stories.tsx +0 -83
  45. package/src/elements/artifact.stories.tsx +0 -506
  46. package/src/elements/attachments.stories.tsx +0 -190
  47. package/src/elements/card.stories.tsx +0 -113
  48. package/src/elements/cards.stories.tsx +0 -59
  49. package/src/elements/catalog.stories.tsx +0 -491
  50. package/src/elements/chain-of-thought.declarative.test.tsx +0 -153
  51. package/src/elements/chain-of-thought.stories.tsx +0 -113
  52. package/src/elements/chat-scope-picker.stories.tsx +0 -73
  53. package/src/elements/chat-workspace.stories.tsx +0 -288
  54. package/src/elements/chat.stories.tsx +0 -151
  55. package/src/elements/checkpoint.stories.tsx +0 -72
  56. package/src/elements/choice.stories.tsx +0 -240
  57. package/src/elements/code-block.stories.tsx +0 -83
  58. package/src/elements/composed-shell.stories.tsx +0 -316
  59. package/src/elements/confirm-card.stories.tsx +0 -227
  60. package/src/elements/context-meter.stories.tsx +0 -151
  61. package/src/elements/conversation-list.declarative.test.tsx +0 -137
  62. package/src/elements/conversation-list.stories.tsx +0 -243
  63. package/src/elements/embed.stories.tsx +0 -213
  64. package/src/elements/empty.stories.tsx +0 -111
  65. package/src/elements/feedback-bar.stories.tsx +0 -114
  66. package/src/elements/file-tree.stories.tsx +0 -134
  67. package/src/elements/file-upload.stories.tsx +0 -82
  68. package/src/elements/form.stories.tsx +0 -248
  69. package/src/elements/image.stories.tsx +0 -71
  70. package/src/elements/link-preview.stories.tsx +0 -209
  71. package/src/elements/loader.stories.tsx +0 -88
  72. package/src/elements/markdown.stories.tsx +0 -76
  73. package/src/elements/message-skills.declarative.test.tsx +0 -104
  74. package/src/elements/message-skills.stories.tsx +0 -114
  75. package/src/elements/message.stories.tsx +0 -218
  76. package/src/elements/model-switcher.declarative.test.tsx +0 -130
  77. package/src/elements/model-switcher.stories.tsx +0 -198
  78. package/src/elements/popover.stories.tsx +0 -80
  79. package/src/elements/prompt-input-slash-command.test.tsx +0 -128
  80. package/src/elements/prompt-input-stoppable.test.tsx +0 -88
  81. package/src/elements/prompt-input-toolbar-actions.test.tsx +0 -120
  82. package/src/elements/prompt-input.stories.tsx +0 -331
  83. package/src/elements/prompt-suggestions.declarative.test.tsx +0 -164
  84. package/src/elements/prompt-suggestions.stories.tsx +0 -213
  85. package/src/elements/reasoning.stories.tsx +0 -77
  86. package/src/elements/remote.stories.tsx +0 -314
  87. package/src/elements/resizable.stories.tsx +0 -426
  88. package/src/elements/response-stream.stories.tsx +0 -79
  89. package/src/elements/scroll-button.stories.tsx +0 -202
  90. package/src/elements/scroll-button.test.tsx +0 -148
  91. package/src/elements/source-list.stories.tsx +0 -143
  92. package/src/elements/source.stories.tsx +0 -88
  93. package/src/elements/switch.stories.tsx +0 -56
  94. package/src/elements/tasks.stories.tsx +0 -237
  95. package/src/elements/text-shimmer.stories.tsx +0 -64
  96. package/src/elements/thinking-bar.stories.tsx +0 -72
  97. package/src/elements/tool.stories.tsx +0 -89
  98. package/src/elements/voice-input.stories.tsx +0 -88
  99. package/src/primitives/controllable.test.ts +0 -47
  100. package/src/stories/chat-panel-layout.stories.tsx +0 -145
  101. package/src/stories/chat-scene.tsx +0 -571
  102. package/src/stories/checkpoint-restore.stories.tsx +0 -256
  103. package/src/stories/context-usage.stories.tsx +0 -212
  104. package/src/stories/conversation-with-reasoning.stories.tsx +0 -182
  105. package/src/stories/conversation-with-sources.stories.tsx +0 -471
  106. package/src/stories/docs/Accessibility.mdx +0 -119
  107. package/src/stories/docs/ChildElements.mdx +0 -269
  108. package/src/stories/docs/ForAIAgents.mdx +0 -162
  109. package/src/stories/docs/GettingStarted.mdx +0 -65
  110. package/src/stories/docs/Installation.mdx +0 -83
  111. package/src/stories/docs/Introduction.mdx +0 -50
  112. package/src/stories/docs/SolidJsAdvanced.mdx +0 -17
  113. package/src/stories/docs/Theming.mdx +0 -85
  114. package/src/stories/docs/element-controls.ts +0 -121
  115. package/src/stories/docs/frameworks/Angular.mdx +0 -245
  116. package/src/stories/docs/frameworks/Html.mdx +0 -227
  117. package/src/stories/docs/frameworks/Overview.mdx +0 -47
  118. package/src/stories/docs/frameworks/React.mdx +0 -227
  119. package/src/stories/docs/frameworks/Solid.mdx +0 -173
  120. package/src/stories/docs/frameworks/Svelte.mdx +0 -194
  121. package/src/stories/docs/frameworks/Vue.mdx +0 -238
  122. package/src/stories/docs/generative-ui-overview.mdx +0 -186
  123. package/src/stories/docs/recipes/SpeechToText.mdx +0 -7
  124. package/src/stories/docs/recipes/Streaming.mdx +0 -68
  125. package/src/stories/docs/recipes/TextToSpeech.mdx +0 -35
  126. package/src/stories/docs/theme-editor/canvas.tsx +0 -32
  127. package/src/stories/docs/theme-editor/inspector.tsx +0 -66
  128. package/src/stories/docs/theme-editor/presets.test.ts +0 -32
  129. package/src/stories/docs/theme-editor/presets.ts +0 -64
  130. package/src/stories/docs/theme-editor/theme-css.test.ts +0 -19
  131. package/src/stories/docs/theme-editor/theme-css.ts +0 -15
  132. package/src/stories/docs/theme-editor/theme-editor.tsx +0 -146
  133. package/src/stories/docs/theme-tokens.tsx +0 -174
  134. package/src/stories/examples/ChoosingComponents.mdx +0 -106
  135. package/src/stories/examples/sample-data.ts +0 -79
  136. package/src/stories/examples/usage/checkpoint-restore.ts +0 -156
  137. package/src/stories/examples/usage/context-usage.ts +0 -591
  138. package/src/stories/examples/usage/conversation-with-reasoning.ts +0 -224
  139. package/src/stories/examples/usage/conversation-with-sources.ts +0 -589
  140. package/src/stories/examples/usage/empty-state.ts +0 -144
  141. package/src/stories/examples/usage/full-chat-app.ts +0 -277
  142. package/src/stories/examples/usage/index.ts +0 -63
  143. package/src/stories/examples/usage/message-actions.ts +0 -704
  144. package/src/stories/examples/usage/pattern-centered-conversation.ts +0 -446
  145. package/src/stories/examples/usage/pattern-chat-panel-layout.ts +0 -442
  146. package/src/stories/examples/usage/pattern-docked-widget.ts +0 -479
  147. package/src/stories/examples/usage/prompt-input-variants.ts +0 -1356
  148. package/src/stories/examples/usage/streaming-response.ts +0 -687
  149. package/src/stories/examples/usage/types.ts +0 -33
  150. package/src/stories/full-chat.stories.tsx +0 -18
  151. package/src/stories/message-actions.stories.tsx +0 -230
  152. package/src/stories/pattern-centered-conversation.stories.tsx +0 -93
  153. package/src/stories/pattern-docked-widget.stories.tsx +0 -93
  154. package/src/stories/pattern-empty-state.stories.tsx +0 -76
  155. package/src/stories/prompt-input-variants.stories.tsx +0 -456
  156. package/src/stories/streaming-response.stories.tsx +0 -438
  157. package/src/stories/theme-editor.stories.tsx +0 -16
  158. package/src/stories/token-reference.stories.tsx +0 -18
  159. package/src/stories/typography.stories.tsx +0 -78
  160. package/src/ui/avatar.stories.tsx +0 -103
  161. package/src/ui/badge.stories.tsx +0 -86
  162. package/src/ui/button.stories.tsx +0 -145
  163. package/src/ui/collapsible.stories.tsx +0 -69
  164. package/src/ui/dropdown.stories.tsx +0 -59
  165. package/src/ui/hover-card.stories.tsx +0 -77
  166. package/src/ui/hover-card.test.tsx +0 -30
  167. package/src/ui/overlay.stories.tsx +0 -115
  168. package/src/ui/popover.stories.tsx +0 -81
  169. package/src/ui/popover.test.tsx +0 -99
  170. package/src/ui/resizable.stories.tsx +0 -236
  171. package/src/ui/scroll-area.stories.tsx +0 -50
  172. package/src/ui/separator.stories.tsx +0 -81
  173. package/src/ui/skeleton.stories.tsx +0 -337
  174. package/src/ui/switch.stories.tsx +0 -51
  175. package/src/ui/switch.test.tsx +0 -59
  176. package/src/ui/textarea.stories.tsx +0 -76
  177. 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
- };