@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/artifact.stories.tsx DELETED
@@ -1,506 +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 type { ArtifactFile } from '../components/artifact';
6
-
7
- // Custom DOM elements — declare the tags for JSX.
8
- declare module 'solid-js' {
9
- // eslint-disable-next-line @typescript-eslint/no-namespace
10
- namespace JSX {
11
- interface IntrinsicElements {
12
- 'kai-artifact': JSX.HTMLAttributes<HTMLElement> & {
13
- src?: string;
14
- tab?: string;
15
- 'active-file'?: string;
16
- sandbox?: string;
17
- 'iframe-title'?: string;
18
- ref?: (el: HTMLElement) => void;
19
- // toolbar composition flags (all boolean attrs)
20
- expandable?: boolean | string;
21
- 'open-in-tab'?: boolean | string;
22
- 'no-nav'?: boolean | string;
23
- 'no-reload'?: boolean | string;
24
- 'no-home'?: boolean | string;
25
- 'no-path-field'?: boolean | string;
26
- 'no-tabs'?: boolean | string;
27
- standalone?: boolean | string;
28
- 'readonly-path'?: boolean | string;
29
- };
30
- }
31
- }
32
- }
33
-
34
- // Storybook serves examples/artifact-fixtures at /artifact-fixtures (see
35
- // .storybook/main.ts staticDirs). These are real, cross-linked pages so
36
- // relative-link nav, back/forward and multi-format all work in the iframe.
37
- const BASE = new URL('artifact-fixtures', document.baseURI).href;
38
-
39
- const FILES: ArtifactFile[] = [
40
- {
41
- path: 'index.html',
42
- url: `${BASE}/index.html`,
43
- type: 'html',
44
- language: 'html',
45
- code: `<!DOCTYPE html>
46
- <html lang="en">
47
- <head>
48
- <link rel="stylesheet" href="css/site.css" />
49
- <title>Starboard — Home</title>
50
- </head>
51
- <body>
52
- <h1>Starboard</h1>
53
- <a href="about.html">About</a>
54
- </body>
55
- </html>`,
56
- },
57
- {
58
- path: 'about.html',
59
- url: `${BASE}/about.html`,
60
- type: 'html',
61
- language: 'html',
62
- code: `<!DOCTYPE html>
63
- <html lang="en">
64
- <head>
65
- <link rel="stylesheet" href="css/site.css" />
66
- <title>Starboard — About</title>
67
- </head>
68
- <body data-page="about">
69
- <h1>About Starboard</h1>
70
- <a href="index.html">← Home</a>
71
- </body>
72
- </html>`,
73
- },
74
- {
75
- path: 'css/site.css',
76
- url: `${BASE}/css/site.css`,
77
- type: 'other',
78
- language: 'css',
79
- code: `:root { --accent: #6ea8fe; }
80
- body { font-family: system-ui, sans-serif; }
81
- .card { border: 1px solid var(--accent); border-radius: 14px; }`,
82
- },
83
- {
84
- path: 'assets/logo.svg',
85
- url: `${BASE}/assets/logo.svg`,
86
- type: 'image',
87
- },
88
- {
89
- path: 'assets/report.pdf',
90
- url: `${BASE}/assets/report.pdf`,
91
- type: 'pdf',
92
- },
93
- ];
94
-
95
- /** A bordered, sized box the artifact fills. */
96
- function Frame(props: { children: JSX.Element; height?: string }) {
97
- return (
98
- <div
99
- style={{
100
- height: props.height ?? '520px',
101
- width: '100%',
102
- 'max-width': '900px',
103
- border: '1px solid var(--color-border, #e4e4e7)',
104
- 'border-radius': '12px',
105
- overflow: 'hidden',
106
- }}
107
- >
108
- {props.children}
109
- </div>
110
- );
111
- }
112
-
113
- const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
114
- <kai-artifact
115
- src="https://your-backend.example/artifacts/abc/index.html"
116
- style="display:block;height:520px"
117
- ></kai-artifact>
118
-
119
- <script type="module">
120
- import '@kitn.ai/ui/elements'; // registers the custom elements
121
-
122
- const el = document.querySelector('kai-artifact');
123
- // \`files\` is a JS property (array): tree labels (folders from \`/\`), a preview
124
- // \`url\` per file, and \`code\` for the Code tab.
125
- el.files = [
126
- { path: 'index.html', url: '…/index.html', type: 'html', code: '<!DOCTYPE …' },
127
- { path: 'about.html', url: '…/about.html', type: 'html', code: '<!DOCTYPE …' },
128
- { path: 'assets/logo.svg', url: '…/logo.svg', type: 'image' },
129
- ];
130
-
131
- el.addEventListener('kai-navigate', (e) => console.log('navigate', e.detail.url));
132
- el.addEventListener('kai-tab-change', (e) => console.log('tab', e.detail.tab));
133
- el.addEventListener('kai-file-select', (e) => console.log('file', e.detail.path));
134
- </script>`;
135
-
136
- const meta = {
137
- title: 'Components/Artifact',
138
- tags: ['autodocs'],
139
- argTypes: argTypesFor('kai-artifact'),
140
- parameters: {
141
- layout: 'padded',
142
- docs: {
143
- description: specDescription('kai-artifact', [
144
- '`<kai-artifact>` is the framework-agnostic **web component** for a framed, switchable **generated-artifact viewer** — the "canvas / artifacts" pattern (Claude Artifacts, ChatGPT Canvas, V0, bolt). It frames a consumer-served URL in a **sandboxed `<iframe>`** with a functional nav toolbar, and a **Preview | Code** toggle whose Code tab shows a file tree (`<kai-file-tree>`) + the active file source (`<kai-code-block>`). Isolated in **Shadow DOM**.',
145
- "**When to use:** to show an AI-generated artifact (a web page, doc, image, or PDF your backend hosts) beside the conversation — typically inside a `<kai-resizable>` panel. The component **frames** content; your backend serves it, so relative links, back/forward, reload and multi-format work natively.",
146
- "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set `src` to the hosted URL, and set the `files` **property** (a JS array of `{ path, url?, code?, language?, type? }`) for the Code tab tree. The iframe `sandbox` defaults to `allow-scripts allow-forms` (**not** `allow-same-origin`); widen it via the `sandbox` attribute only if you trust the artifact. Listen for **`kai-navigate`** (`detail.url`), **`kai-tab-change`** (`detail.tab`), and **`kai-file-select`** (`detail.path`).",
147
- '**Anatomy:** **nav toolbar** (back · forward · reload · home buttons + editable address field + Preview|Code toggle; each affordance individually hideable via `no-*` flags; omitted entirely when all are hidden) → **preview body** (either a sandboxed `<iframe>` for web/image/PDF content, or the **code view**: `<kai-file-tree>` sidebar + `<kai-code-block>` main pane, side by side).',
148
- '**Placement:** the preview/canvas panel of a compose-your-own-chat shell — e.g. `list | chat | artifact`. It **fills** its container, so give the parent (or the element) a height.',
149
- 'See the **Code** tab for HTML usage.',
150
- ]),
151
- },
152
- },
153
- args: { tab: 'preview', sandbox: 'allow-scripts allow-forms' },
154
- } satisfies Meta;
155
-
156
- export default meta;
157
- type Story = StoryObj;
158
-
159
- /** Interactive playground — frames a live, cross-linked fixture. Flip Preview/Code. */
160
- export const Playground: Story = {
161
- render: (args: { src?: string; tab?: string; sandbox?: string }) => {
162
- let el: HTMLElement & { files?: ArtifactFile[] };
163
- onMount(() => {
164
- if (el) el.files = FILES;
165
- });
166
- return (
167
- <Frame>
168
- <kai-artifact
169
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
170
- src={args.src ?? `${BASE}/index.html`}
171
- tab={args.tab ?? 'preview'}
172
- sandbox={args.sandbox ?? 'allow-scripts allow-forms'}
173
- iframe-title="Starboard artifact preview"
174
- />
175
- </Frame>
176
- );
177
- },
178
- parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
179
- };
180
-
181
- /** Opens on the Code tab — file tree + syntax-highlighted source. */
182
- export const CodeTab: Story = {
183
- name: 'Code tab',
184
- render: () => {
185
- let el: HTMLElement & { files?: ArtifactFile[] };
186
- onMount(() => {
187
- if (el) el.files = FILES;
188
- });
189
- return (
190
- <Frame>
191
- <kai-artifact
192
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
193
- src={`${BASE}/index.html`}
194
- tab="code"
195
- active-file="index.html"
196
- iframe-title="Starboard artifact preview"
197
- />
198
- </Frame>
199
- );
200
- },
201
- };
202
-
203
- /** Multi-format: the preview frames an image fixture natively. */
204
- export const ImagePreview: Story = {
205
- name: 'Image (multi-format)',
206
- render: () => {
207
- let el: HTMLElement & { files?: ArtifactFile[] };
208
- onMount(() => {
209
- if (el) el.files = FILES;
210
- });
211
- return (
212
- <Frame>
213
- <kai-artifact
214
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
215
- src={`${BASE}/assets/logo.svg`}
216
- iframe-title="Logo image"
217
- />
218
- </Frame>
219
- );
220
- },
221
- };
222
-
223
- /** Multi-format: PDFs render inline via pdf.js (loaded on demand from a CDN). */
224
- export const PdfPreview: Story = {
225
- name: 'PDF (multi-format)',
226
- render: () => {
227
- let el: HTMLElement & { files?: ArtifactFile[] };
228
- onMount(() => {
229
- if (el) el.files = FILES;
230
- });
231
- return (
232
- <Frame>
233
- <kai-artifact
234
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
235
- src={`${BASE}/assets/report.pdf`}
236
- iframe-title="Report PDF"
237
- />
238
- </Frame>
239
- );
240
- },
241
- };
242
-
243
- /** When inline rendering can't work (CORS / 404 / blocked CDN) the viewer shows
244
- * an "Open in new tab / Download" card. Here the src 404s to force that path. */
245
- export const PdfFallback: Story = {
246
- name: 'PDF (fallback card)',
247
- render: () => (
248
- <Frame>
249
- <kai-artifact
250
- src={`${BASE}/assets/does-not-exist.pdf`}
251
- iframe-title="Missing PDF"
252
- />
253
- </Frame>
254
- ),
255
- };
256
-
257
- /** Logs the emitted events so you can see the controlled nav model in action. */
258
- export const WithEvents: Story = {
259
- name: 'Events',
260
- render: () => {
261
- const [log, setLog] = createSignal<string[]>([]);
262
- let el: HTMLElement & { files?: ArtifactFile[] };
263
- onMount(() => {
264
- if (!el) return;
265
- el.files = FILES;
266
- el.addEventListener('kai-navigate', (e) =>
267
- setLog((l) => [`navigate → ${(e as CustomEvent).detail.url}`, ...l].slice(0, 6)),
268
- );
269
- el.addEventListener('kai-tab-change', (e) =>
270
- setLog((l) => [`kai-tab-change → ${(e as CustomEvent).detail.tab}`, ...l].slice(0, 6)),
271
- );
272
- el.addEventListener('kai-file-select', (e) =>
273
- setLog((l) => [`kai-file-select → ${(e as CustomEvent).detail.path}`, ...l].slice(0, 6)),
274
- );
275
- });
276
- return (
277
- <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
278
- <Frame height="420px">
279
- <kai-artifact
280
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
281
- src={`${BASE}/index.html`}
282
- iframe-title="Starboard artifact preview"
283
- />
284
- </Frame>
285
- <pre
286
- style={{
287
- 'font-size': '12px',
288
- 'max-width': '900px',
289
- padding: '10px 12px',
290
- 'border-radius': '8px',
291
- background: 'var(--color-muted, #f4f4f5)',
292
- color: 'var(--color-muted-foreground, #71717a)',
293
- 'min-height': '96px',
294
- margin: '0',
295
- }}
296
- >
297
- {log().length ? log().join('\n') : '(navigate the preview / switch tabs / pick a file…)'}
298
- </pre>
299
- </div>
300
- );
301
- },
302
- };
303
-
304
- const CONFIGURABLE_TOOLBAR_SNIPPET = `<!-- All toolbar affordances are individually opt-in/out via attributes. -->
305
-
306
- <!-- The five default-shown items each have a "no-*" flag to hide them: -->
307
- <kai-artifact
308
- src="…"
309
- no-nav
310
- no-reload
311
- no-home
312
- ></kai-artifact>
313
-
314
- <!-- Two new buttons are OPT-IN (hidden by default): -->
315
- <kai-artifact
316
- src="…"
317
- expandable
318
- open-in-tab
319
- ></kai-artifact>
320
-
321
- <!-- Standalone chrome: rounded corners + border (default is square/borderless in-panel): -->
322
- <kai-artifact src="…" standalone></kai-artifact>
323
-
324
- <!-- Read-only path: visible, nav-tracking, non-editable: -->
325
- <kai-artifact src="…" readonly-path></kai-artifact>`;
326
-
327
- /**
328
- * Every toolbar affordance is individually configurable.
329
- *
330
- * **Default-shown (`no-*` flags hide):** back/forward (`no-nav`), reload (`no-reload`),
331
- * home (`no-home`), address field (`no-path-field`), Preview|Code toggle (`no-tabs`).
332
- *
333
- * **Opt-in (hidden by default; positive attr enables):** expand-to-fill (`expandable`),
334
- * open-in-new-tab (`open-in-tab`).
335
- *
336
- * **Chrome:** `standalone` adds rounded corners + border (default = square/borderless
337
- * for in-panel use). `readonly-path` makes the address field visible but non-editable.
338
- *
339
- * When ALL affordances are hidden the toolbar bar is omitted entirely (zero height).
340
- */
341
- export const ConfigurableToolbar: Story = {
342
- name: 'Configurable toolbar',
343
- render: (args: {
344
- expandable?: boolean;
345
- openInTab?: boolean;
346
- noNav?: boolean;
347
- noReload?: boolean;
348
- noHome?: boolean;
349
- noPathField?: boolean;
350
- noTabs?: boolean;
351
- standalone?: boolean;
352
- readonlyPath?: boolean;
353
- }) => {
354
- let el: HTMLElement & { files?: ArtifactFile[] };
355
- onMount(() => { if (el) el.files = FILES; });
356
- return (
357
- <Frame>
358
- <kai-artifact
359
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
360
- src={`${BASE}/index.html`}
361
- iframe-title="Starboard artifact preview"
362
- expandable={args.expandable || undefined}
363
- open-in-tab={args.openInTab || undefined}
364
- no-nav={args.noNav || undefined}
365
- no-reload={args.noReload || undefined}
366
- no-home={args.noHome || undefined}
367
- no-path-field={args.noPathField || undefined}
368
- no-tabs={args.noTabs || undefined}
369
- standalone={args.standalone || undefined}
370
- readonly-path={args.readonlyPath || undefined}
371
- />
372
- </Frame>
373
- );
374
- },
375
- args: {
376
- expandable: false,
377
- openInTab: false,
378
- noNav: false,
379
- noReload: false,
380
- noHome: false,
381
- noPathField: false,
382
- noTabs: false,
383
- standalone: false,
384
- readonlyPath: false,
385
- },
386
- argTypes: {
387
- expandable: { control: 'boolean', description: 'Show the expand-to-fill button (opt-in).' },
388
- openInTab: { control: 'boolean', name: 'open-in-tab', description: 'Show the open-in-new-tab button (opt-in).' },
389
- noNav: { control: 'boolean', name: 'no-nav', description: 'Hide the back/forward buttons.' },
390
- noReload: { control: 'boolean', name: 'no-reload', description: 'Hide the reload button.' },
391
- noHome: { control: 'boolean', name: 'no-home', description: 'Hide the home button.' },
392
- noPathField: { control: 'boolean', name: 'no-path-field', description: 'Hide the address field.' },
393
- noTabs: { control: 'boolean', name: 'no-tabs', description: 'Hide the Preview|Code toggle.' },
394
- standalone: { control: 'boolean', description: 'Standalone chrome (rounded + border).' },
395
- readonlyPath: { control: 'boolean', name: 'readonly-path', description: 'Address field is visible but non-editable.' },
396
- },
397
- parameters: { docs: { source: { code: CONFIGURABLE_TOOLBAR_SNIPPET, language: 'html' } } },
398
- };
399
-
400
- const MINIMAL_SNIPPET = `<!-- Minimal: only the preview iframe, no toolbar at all. -->
401
- <kai-artifact
402
- src="…"
403
- no-nav
404
- no-reload
405
- no-home
406
- no-path-field
407
- no-tabs
408
- ></kai-artifact>`;
409
-
410
- /**
411
- * All five default-shown toolbar affordances suppressed — the toolbar bar
412
- * disappears entirely (zero height), leaving just the preview iframe.
413
- * Useful for an embedded, chrome-free artifact tile.
414
- */
415
- export const MinimalPreview: Story = {
416
- name: 'Minimal (preview-only)',
417
- render: () => (
418
- <Frame>
419
- <kai-artifact
420
- src={`${BASE}/index.html`}
421
- iframe-title="Starboard artifact preview"
422
- no-nav
423
- no-reload
424
- no-home
425
- no-path-field
426
- no-tabs
427
- />
428
- </Frame>
429
- ),
430
- parameters: { docs: { source: { code: MINIMAL_SNIPPET, language: 'html' } } },
431
- };
432
-
433
- const OPEN_IN_TAB_SNIPPET = `<!-- open-in-tab: adds a button that opens the current URL in a new tab.
434
- The button is disabled while the src is blank. -->
435
- <kai-artifact
436
- src="https://your-backend.example/artifacts/abc/index.html"
437
- open-in-tab
438
- ></kai-artifact>`;
439
-
440
- /**
441
- * The **open-in-tab** button (opt-in via `open-in-tab`) opens the current
442
- * preview URL in a new browser tab (`window.open`, `noopener,noreferrer`).
443
- * It is disabled while the URL is empty / `about:blank` and follows the live
444
- * navigation state — clicking it after the user has navigated to a sub-page
445
- * opens that sub-page, not the original `src`.
446
- */
447
- export const OpenInTab: Story = {
448
- name: 'Open in new tab',
449
- render: () => {
450
- let el: HTMLElement & { files?: ArtifactFile[] };
451
- onMount(() => { if (el) el.files = FILES; });
452
- return (
453
- <Frame>
454
- <kai-artifact
455
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
456
- src={`${BASE}/index.html`}
457
- iframe-title="Starboard artifact preview"
458
- open-in-tab
459
- />
460
- </Frame>
461
- );
462
- },
463
- parameters: { docs: { source: { code: OPEN_IN_TAB_SNIPPET, language: 'html' } } },
464
- };
465
-
466
- const STANDALONE_SNIPPET = `<!-- standalone: adds rounded corners + a border (like a card).
467
- Suppresses the expand button even when expandable is set.
468
- Use for an artifact rendered outside any panel layout. -->
469
- <kai-artifact
470
- src="…"
471
- standalone
472
- style="display:block;height:520px"
473
- ></kai-artifact>`;
474
-
475
- /**
476
- * `standalone` adds rounded corners and a border — the "card" chrome for an
477
- * artifact rendered outside any panel layout (e.g. as a modal or inline tile).
478
- * In the default in-panel mode the element is square and borderless so it fits
479
- * flush inside a `<kai-resizable>` panel without double-borders.
480
- *
481
- * `standalone` also suppresses the expand button (there is no enclosing resizable
482
- * to maximize into) regardless of `expandable`.
483
- *
484
- * `readonly-path` keeps the address field visible and navigation-tracking but
485
- * non-editable — useful when the consumer drives the URL programmatically.
486
- */
487
- export const StandaloneChrome: Story = {
488
- name: 'Standalone chrome + read-only path',
489
- render: () => {
490
- let el: HTMLElement & { files?: ArtifactFile[] };
491
- onMount(() => { if (el) el.files = FILES; });
492
- return (
493
- <div style={{ padding: '16px', 'max-width': '900px' }}>
494
- <kai-artifact
495
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
496
- src={`${BASE}/index.html`}
497
- iframe-title="Starboard artifact preview"
498
- standalone
499
- readonly-path
500
- style={{ display: 'block', height: '480px' }}
501
- />
502
- </div>
503
- );
504
- },
505
- parameters: { docs: { source: { code: STANDALONE_SNIPPET, language: 'html' } } },
506
- };
package/src/elements/attachments.stories.tsx DELETED
@@ -1,190 +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 type { AttachmentData } from '../components/attachments';
5
- import { argTypesFor, specDescription } from '../stories/docs/element-controls';
6
-
7
- // The web components are custom DOM elements, so declare the tags for JSX.
8
- declare module 'solid-js' {
9
- // eslint-disable-next-line @typescript-eslint/no-namespace
10
- namespace JSX {
11
- interface IntrinsicElements {
12
- 'kai-attachments': JSX.HTMLAttributes<HTMLElement> & {
13
- variant?: string;
14
- 'hover-card'?: boolean | string;
15
- removable?: boolean | string;
16
- 'show-media-type'?: boolean | string;
17
- };
18
- }
19
- }
20
- }
21
-
22
- // Mixed file/source items (icons + labels) — mirrors Components/Attachments.
23
- const sampleItems: AttachmentData[] = [
24
- {
25
- id: '1',
26
- type: 'file',
27
- filename: 'mountain-landscape.jpg',
28
- mediaType: 'image/jpeg',
29
- url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
30
- },
31
- {
32
- id: '2',
33
- type: 'file',
34
- filename: 'sunset-beach.png',
35
- mediaType: 'image/png',
36
- url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
37
- },
38
- { id: '3', type: 'file', filename: 'architecture-report.pdf', mediaType: 'application/pdf' },
39
- { id: '4', type: 'file', filename: 'demo-recording.mp4', mediaType: 'video/mp4' },
40
- { id: '5', type: 'file', filename: 'podcast-episode.mp3', mediaType: 'audio/mpeg' },
41
- { id: '6', type: 'source-document', filename: 'SolidJS Documentation', title: 'SolidJS Reactivity Guide', url: 'https://solidjs.com/docs' },
42
- ];
43
-
44
- // Image-only items — used for the grid thumbnails + hover-card preview stories.
45
- const imageItems: AttachmentData[] = [
46
- {
47
- id: 'img-1',
48
- type: 'file',
49
- filename: 'mountain-landscape.jpg',
50
- mediaType: 'image/jpeg',
51
- url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
52
- },
53
- {
54
- id: 'img-2',
55
- type: 'file',
56
- filename: 'sunset-beach.png',
57
- mediaType: 'image/png',
58
- url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
59
- },
60
- ];
61
-
62
- /** Render `<kai-attachments>` with an `items` property and the given flags. */
63
- function AttachmentsElement(props: {
64
- items: AttachmentData[];
65
- variant?: string;
66
- removable?: boolean;
67
- hoverCard?: boolean;
68
- showMediaType?: boolean;
69
- }) {
70
- let el: (HTMLElement & { items?: AttachmentData[] }) | undefined;
71
- onMount(() => {
72
- if (!el) return;
73
- el.items = props.items;
74
- if (props.variant) el.setAttribute('variant', props.variant);
75
- if (props.hoverCard) el.setAttribute('hover-card', '');
76
- if (props.showMediaType) el.setAttribute('show-media-type', '');
77
- if (props.removable) {
78
- el.setAttribute('removable', '');
79
- el.addEventListener('kai-remove', ((e: CustomEvent<{ id: string }>) => {
80
- el!.items = (el!.items ?? []).filter((x) => x.id !== e.detail.id);
81
- }) as EventListener);
82
- }
83
- });
84
- return (
85
- <kai-attachments
86
- ref={(e) => (el = e as HTMLElement)}
87
- style={{ display: 'block', padding: '24px', 'max-width': '720px' }}
88
- />
89
- );
90
- }
91
-
92
- const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
93
- <kai-attachments id="att" variant="grid" removable></kai-attachments>
94
-
95
- <script type="module">
96
- import '@kitn.ai/ui/elements'; // registers the custom elements
97
-
98
- const att = document.getElementById('att');
99
- att.items = [
100
- { id: '1', type: 'file', filename: 'mountain-landscape.jpg',
101
- mediaType: 'image/jpeg', url: 'https://.../mountain.jpg' },
102
- { id: '2', type: 'file', filename: 'spec.pdf', mediaType: 'application/pdf' },
103
- ];
104
-
105
- // events are CustomEvents on the element (they do not bubble)
106
- att.addEventListener('kai-remove', (e) => {
107
- att.items = att.items.filter((x) => x.id !== e.detail.id);
108
- });
109
- </script>`;
110
-
111
- const HOVER_SNIPPET = `<!-- inline/list chips with a hover-card image preview -->
112
- <kai-attachments id="att" variant="inline" hover-card></kai-attachments>
113
-
114
- <script type="module">
115
- import '@kitn.ai/ui/elements';
116
-
117
- const att = document.getElementById('att');
118
- // image attachments show their thumbnail in the hover card on hover;
119
- // non-image attachments show their label + media type instead.
120
- att.items = [
121
- { id: '1', type: 'file', filename: 'mountain-landscape.jpg',
122
- mediaType: 'image/jpeg', url: 'https://.../mountain.jpg' },
123
- ];
124
- </script>`;
125
-
126
- const meta = {
127
- title: 'Components/Attachments',
128
- tags: ['autodocs'],
129
- argTypes: argTypesFor('kai-attachments'),
130
- parameters: {
131
- layout: 'fullscreen',
132
- docs: {
133
- description: specDescription('kai-attachments', [
134
- '`<kai-attachments>` is the framework-agnostic **web component** for a set of file/source attachments, and the exemplar for the "collapse a compound primitive to ONE configurable element" pattern: the sub-parts the SolidJS layer composes become attributes here. Isolated in **Shadow DOM**.',
135
- '**When to use:** rendering attachment chips/tiles in a non-Solid app. In SolidJS, compose the `Attachment*` primitives for fully custom layouts.',
136
- '**Placement:** beneath message content (for received/sent files) or above the prompt input (for staged uploads); fills its container width.',
137
- "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the data via the `items` **property**, pick a layout with `variant` (`grid` | `inline` | `list`), add `removable` to get per-item remove buttons (emits a `kai-remove` **CustomEvent** with `{ id }`), and `hover-card` for inline/list previews (image attachments preview their thumbnail).",
138
- 'See the **Code** tab for HTML usage.',
139
- ]),
140
- },
141
- },
142
- } satisfies Meta;
143
-
144
- export default meta;
145
- type Story = StoryObj;
146
-
147
- /** Visual tiles (the default `grid` variant) — image attachments render as real
148
- * `<img>` thumbnails; non-image files fall back to a media-type icon. */
149
- export const Grid: Story = {
150
- render: () => <AttachmentsElement items={sampleItems} variant="grid" />,
151
- parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
152
- };
153
-
154
- /** Icon + label chips (`inline`) — files shown as a small preview + filename. */
155
- export const Inline: Story = {
156
- render: () => <AttachmentsElement items={sampleItems} variant="inline" />,
157
- };
158
-
159
- /** Detailed rows (`list`) with the media type beneath each filename. */
160
- export const List: Story = {
161
- render: () => <AttachmentsElement items={sampleItems} variant="list" showMediaType />,
162
- };
163
-
164
- /** Removable rows — clicking the remove button fires a `remove` event. */
165
- export const RemovableList: Story = {
166
- name: 'Removable List',
167
- render: () => <AttachmentsElement items={sampleItems} variant="list" removable />,
168
- };
169
-
170
- /** Image thumbnails in a grid (real `<img>` previews). */
171
- export const ImageGrid: Story = {
172
- name: 'Image Grid',
173
- render: () => <AttachmentsElement items={imageItems} variant="grid" />,
174
- };
175
-
176
- /** Inline chips with a hover-card preview — hover an image chip to see its
177
- * thumbnail enlarge in the hover card. */
178
- export const WithHoverCard: Story = {
179
- name: 'With Hover Card',
180
- render: () => <AttachmentsElement items={imageItems} variant="inline" hoverCard />,
181
- parameters: { docs: { source: { code: HOVER_SNIPPET, language: 'html' } } },
182
- };
183
-
184
- /** Grid tiles with a hover-card preview — the tile shows only the image; the
185
- * filename + media type surface in the hover card. (Grid previously skipped
186
- * the hover card entirely.) */
187
- export const GridWithHoverCard: Story = {
188
- name: 'Grid With Hover Card',
189
- render: () => <AttachmentsElement items={imageItems} variant="grid" hoverCard />,
190
- };