@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/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
- };