@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/components/artifact.stories.tsx DELETED
@@ -1,138 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal } from 'solid-js';
3
- import { Artifact, type ArtifactFile, type ArtifactTab } from './artifact';
4
- import { componentDescription } from '../stories/docs/element-controls';
5
-
6
- // Storybook serves examples/artifact-fixtures at /artifact-fixtures.
7
- const BASE = new URL('artifact-fixtures', document.baseURI).href;
8
-
9
- const FILES: ArtifactFile[] = [
10
- {
11
- path: 'index.html',
12
- url: `${BASE}/index.html`,
13
- type: 'html',
14
- language: 'html',
15
- code: `<!DOCTYPE html>\n<html lang="en">\n <head><link rel="stylesheet" href="css/site.css" /></head>\n <body><h1>Starboard</h1><a href="about.html">About</a></body>\n</html>`,
16
- },
17
- {
18
- path: 'about.html',
19
- url: `${BASE}/about.html`,
20
- type: 'html',
21
- language: 'html',
22
- code: `<!DOCTYPE html>\n<html lang="en">\n <body data-page="about"><h1>About</h1><a href="index.html">Home</a></body>\n</html>`,
23
- },
24
- {
25
- path: 'css/site.css',
26
- url: `${BASE}/css/site.css`,
27
- type: 'other',
28
- language: 'css',
29
- code: `:root { --accent: #6ea8fe; }\nbody { font-family: system-ui, sans-serif; }`,
30
- },
31
- { path: 'assets/logo.svg', url: `${BASE}/assets/logo.svg`, type: 'image' },
32
- { path: 'assets/report.pdf', url: `${BASE}/assets/report.pdf`, type: 'pdf' },
33
- ];
34
-
35
- const meta = {
36
- title: 'Solid (Advanced)/Elements/Artifact',
37
- component: Artifact,
38
- tags: ['autodocs'],
39
- parameters: {
40
- layout: 'padded',
41
- docs: {
42
- description: componentDescription([
43
- 'A framed, switchable **generated-artifact viewer** — the "canvas / artifacts" pattern. A sandboxed `<iframe>` with a functional nav toolbar (back · forward · reload · home + editable path field) and a **Preview | Code** toggle; the Code tab shows a `FileTree` + the active file source via `CodeBlock`.',
44
- '**When to use:** to show an AI-generated artifact your backend hosts (page, doc, image, PDF) beside the conversation. The component frames; your backend serves — so relative links, back/forward and multi-format work natively.',
45
- '**How to use:** set `src` to the hosted URL and `files` (`{ path, url?, code?, language?, type? }[]`) for the Code tree. The iframe `sandbox` defaults to `allow-scripts allow-forms` (not `allow-same-origin`). Handle `onNavigate(url)`, `onTabChange(tab)`, `onFileSelect(path)`.',
46
- '**Placement:** the preview/canvas panel of a chat shell (e.g. `list | chat | artifact`). It **fills** its container — give the parent a height.',
47
- ]),
48
- },
49
- },
50
- argTypes: {
51
- files: { control: false },
52
- src: { control: 'text' },
53
- tab: { control: 'select', options: ['preview', 'code'] },
54
- sandbox: { control: 'text' },
55
- },
56
- args: { src: `${BASE}/index.html`, files: FILES, tab: 'preview' as ArtifactTab },
57
- render: (args) => (
58
- <div class="h-[520px] w-full max-w-[900px]">
59
- <Artifact
60
- src={args.src}
61
- files={args.files}
62
- tab={args.tab}
63
- sandbox={args.sandbox}
64
- iframeTitle="Starboard artifact preview"
65
- />
66
- </div>
67
- ),
68
- } satisfies Meta<typeof Artifact>;
69
-
70
- export default meta;
71
- type Story = StoryObj<typeof meta>;
72
-
73
- const IMPORT = `import { Artifact } from '@kitn.ai/ui';`;
74
- const src = (code: string) => ({
75
- parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
76
- });
77
-
78
- export const Playground: Story = {
79
- ...src(`<Artifact src={src} files={files} tab="preview" />`),
80
- };
81
-
82
- export const CodeTab: Story = {
83
- name: 'Code tab',
84
- args: { tab: 'code' as ArtifactTab },
85
- render: (args: { src?: string; files: ArtifactFile[] }) => (
86
- <div class="h-[520px] w-full max-w-[900px]">
87
- <Artifact src={args.src} files={args.files} tab="code" activeFile="index.html" iframeTitle="Starboard artifact preview" />
88
- </div>
89
- ),
90
- ...src(`<Artifact src={src} files={files} tab="code" activeFile="index.html" />`),
91
- };
92
-
93
- /** Controlled — observe the emitted nav model. */
94
- export const Controlled: Story = {
95
- render: () => {
96
- const [log, setLog] = createSignal<string[]>([]);
97
- const push = (s: string) => setLog((l) => [s, ...l].slice(0, 6));
98
- return (
99
- <div class="flex flex-col gap-2">
100
- <div class="h-[420px] w-full max-w-[900px]">
101
- <Artifact
102
- src={`${BASE}/index.html`}
103
- files={FILES}
104
- iframeTitle="Starboard artifact preview"
105
- onNavigate={(url) => push(`navigate → ${url}`)}
106
- onTabChange={(t) => push(`kai-tab-change → ${t}`)}
107
- onFileSelect={(p) => push(`kai-file-select → ${p}`)}
108
- />
109
- </div>
110
- <pre class="m-0 min-h-24 max-w-[900px] rounded-lg bg-muted px-3 py-2.5 text-xs text-muted-foreground">
111
- {log().length ? log().join('\n') : '(navigate the preview / switch tabs / pick a file…)'}
112
- </pre>
113
- </div>
114
- );
115
- },
116
- ...src(`<Artifact src={src} files={files}
117
- onNavigate={(url) => …} onTabChange={(t) => …} onFileSelect={(p) => …} />`),
118
- };
119
-
120
- /** PDFs render inline via pdf.js (loaded on demand from a CDN). */
121
- export const PdfPreview: Story = {
122
- name: 'PDF (inline)',
123
- render: () => (
124
- <div class="h-[520px] w-full max-w-[900px]">
125
- <Artifact src={`${BASE}/assets/report.pdf`} files={FILES} />
126
- </div>
127
- ),
128
- };
129
-
130
- /** Fallback card when inline rendering can't work (here the src 404s). */
131
- export const PdfFallback: Story = {
132
- name: 'PDF (fallback card)',
133
- render: () => (
134
- <div class="h-[520px] w-full max-w-[900px]">
135
- <Artifact src={`${BASE}/assets/does-not-exist.pdf`} />
136
- </div>
137
- ),
138
- };
package/src/components/attachments.stories.tsx DELETED
@@ -1,303 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal, For } from 'solid-js';
3
- import {
4
- Attachments,
5
- Attachment,
6
- AttachmentPreview,
7
- AttachmentInfo,
8
- AttachmentRemove,
9
- AttachmentHoverCard,
10
- AttachmentHoverCardTrigger,
11
- AttachmentHoverCardContent,
12
- AttachmentEmpty,
13
- } from './attachments';
14
- import type { AttachmentData } from './attachments';
15
- import { componentDescription } from '../stories/docs/element-controls';
16
-
17
- const sampleAttachments: AttachmentData[] = [
18
- {
19
- id: '1',
20
- type: 'file',
21
- filename: 'mountain-landscape.jpg',
22
- mediaType: 'image/jpeg',
23
- url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
24
- },
25
- {
26
- id: '2',
27
- type: 'file',
28
- filename: 'sunset-beach.png',
29
- mediaType: 'image/png',
30
- url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
31
- },
32
- {
33
- id: '3',
34
- type: 'file',
35
- filename: 'architecture-report.pdf',
36
- mediaType: 'application/pdf',
37
- },
38
- {
39
- id: '4',
40
- type: 'file',
41
- filename: 'demo-recording.mp4',
42
- mediaType: 'video/mp4',
43
- },
44
- {
45
- id: '5',
46
- type: 'file',
47
- filename: 'podcast-episode.mp3',
48
- mediaType: 'audio/mpeg',
49
- },
50
- {
51
- id: '6',
52
- type: 'source-document',
53
- filename: 'SolidJS Documentation',
54
- title: 'SolidJS Reactivity Guide',
55
- url: 'https://solidjs.com/docs',
56
- },
57
- ];
58
-
59
- const meta = {
60
- title: 'Solid (Advanced)/Elements/Attachments',
61
- component: Attachments,
62
- tags: ['autodocs'],
63
- parameters: {
64
- layout: 'padded',
65
- docs: {
66
- description: componentDescription([
67
- 'A composable container for displaying file and source-document attachments as thumbnails, inline chips, or a vertical list. Built from `Attachments` + per-item `Attachment` with `AttachmentPreview`, `AttachmentInfo`, and `AttachmentRemove` parts.',
68
- '**When to use:** to show files a user attached to a prompt, or documents/sources referenced by a message. Choose `grid` for thumbnails, `inline` for compact chips, `list` for a detailed rows view.',
69
- '**How to use:** set `variant` on `Attachments`, then map your data to `Attachment` (passing each item via `data` and an `onRemove` handler) and compose the preview/info/remove parts inside.',
70
- '**Placement:** prompt input area (pending uploads), message bodies (attached or cited files), and document panels.',
71
- ]),
72
- controls: { exclude: ['use:eventListener'] },
73
- },
74
- },
75
- argTypes: {
76
- variant: {
77
- control: 'select',
78
- options: ['grid', 'inline', 'list'],
79
- description: 'Layout of the attachment items.',
80
- table: { defaultValue: { summary: 'grid' } },
81
- },
82
- children: {
83
- control: false,
84
- description: 'The `Attachment` items to render inside the container.',
85
- },
86
- class: {
87
- control: 'text',
88
- description: 'Extra classes for the container element.',
89
- },
90
- },
91
- args: {
92
- variant: 'grid',
93
- },
94
- render: (args) => {
95
- const [items, setItems] = createSignal([...sampleAttachments]);
96
- const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
97
- return (
98
- <Attachments {...args}>
99
- <For each={items()}>
100
- {(item) => (
101
- <Attachment data={item} onRemove={() => remove(item.id)}>
102
- <AttachmentPreview />
103
- <AttachmentInfo />
104
- <AttachmentRemove />
105
- </Attachment>
106
- )}
107
- </For>
108
- </Attachments>
109
- );
110
- },
111
- } satisfies Meta<typeof Attachments>;
112
-
113
- export default meta;
114
- type Story = StoryObj<typeof meta>;
115
-
116
- const IMPORT = `import {
117
- Attachments, Attachment, AttachmentPreview, AttachmentInfo, AttachmentRemove,
118
- } from '@kitn.ai/ui';`;
119
- const src = (code: string) => ({
120
- parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
121
- });
122
-
123
- /** Interactive playground — switch `variant` to compare grid / inline / list. */
124
- export const Playground: Story = {
125
- ...src(`<Attachments variant="grid">
126
- <For each={items()}>
127
- {(item) => (
128
- <Attachment data={item} onRemove={() => remove(item.id)}>
129
- <AttachmentPreview />
130
- <AttachmentInfo />
131
- <AttachmentRemove />
132
- </Attachment>
133
- )}
134
- </For>
135
- </Attachments>`),
136
- };
137
-
138
- export const Grid: Story = {
139
- render: () => {
140
- const [items, setItems] = createSignal([...sampleAttachments]);
141
- const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
142
- return (
143
- <div class="space-y-4">
144
- <Attachments variant="grid">
145
- <For each={items()}>
146
- {(item) => (
147
- <Attachment data={item} onRemove={() => remove(item.id)}>
148
- <AttachmentPreview />
149
- <AttachmentRemove />
150
- </Attachment>
151
- )}
152
- </For>
153
- </Attachments>
154
- <button
155
- class="text-sm text-muted-foreground hover:text-foreground transition-colors"
156
- onClick={() => setItems([...sampleAttachments])}
157
- >
158
- Reset
159
- </button>
160
- </div>
161
- );
162
- },
163
- ...src(`<Attachments variant="grid">
164
- <For each={items()}>
165
- {(item) => (
166
- <Attachment data={item} onRemove={() => remove(item.id)}>
167
- <AttachmentPreview />
168
- <AttachmentRemove />
169
- </Attachment>
170
- )}
171
- </For>
172
- </Attachments>`),
173
- };
174
-
175
- export const Inline: Story = {
176
- render: () => {
177
- const [items, setItems] = createSignal([...sampleAttachments]);
178
- const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
179
- return (
180
- <div class="space-y-4">
181
- <Attachments variant="inline">
182
- <For each={items()}>
183
- {(item) => (
184
- <Attachment data={item} onRemove={() => remove(item.id)}>
185
- <AttachmentPreview />
186
- <AttachmentInfo />
187
- <AttachmentRemove />
188
- </Attachment>
189
- )}
190
- </For>
191
- </Attachments>
192
- <button
193
- class="text-sm text-muted-foreground hover:text-foreground transition-colors"
194
- onClick={() => setItems([...sampleAttachments])}
195
- >
196
- Reset
197
- </button>
198
- </div>
199
- );
200
- },
201
- ...src(`<Attachments variant="inline">
202
- <For each={items()}>
203
- {(item) => (
204
- <Attachment data={item} onRemove={() => remove(item.id)}>
205
- <AttachmentPreview />
206
- <AttachmentInfo />
207
- <AttachmentRemove />
208
- </Attachment>
209
- )}
210
- </For>
211
- </Attachments>`),
212
- };
213
-
214
- export const List: Story = {
215
- render: () => {
216
- const [items, setItems] = createSignal([...sampleAttachments]);
217
- const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
218
- return (
219
- <div class="w-96 space-y-4">
220
- <Attachments variant="list">
221
- <For each={items()}>
222
- {(item) => (
223
- <Attachment data={item} onRemove={() => remove(item.id)}>
224
- <AttachmentPreview />
225
- <AttachmentInfo showMediaType />
226
- <AttachmentRemove />
227
- </Attachment>
228
- )}
229
- </For>
230
- </Attachments>
231
- <button
232
- class="text-sm text-muted-foreground hover:text-foreground transition-colors"
233
- onClick={() => setItems([...sampleAttachments])}
234
- >
235
- Reset
236
- </button>
237
- </div>
238
- );
239
- },
240
- ...src(`<Attachments variant="list">
241
- <For each={items()}>
242
- {(item) => (
243
- <Attachment data={item} onRemove={() => remove(item.id)}>
244
- <AttachmentPreview />
245
- <AttachmentInfo showMediaType />
246
- <AttachmentRemove />
247
- </Attachment>
248
- )}
249
- </For>
250
- </Attachments>`),
251
- };
252
-
253
- export const WithHoverCard: Story = {
254
- render: () => (
255
- <Attachments variant="grid">
256
- <AttachmentHoverCard>
257
- <AttachmentHoverCardTrigger>
258
- <Attachment
259
- data={{
260
- id: '1',
261
- type: 'file',
262
- filename: 'mountain-landscape.jpg',
263
- mediaType: 'image/jpeg',
264
- url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
265
- }}
266
- >
267
- <AttachmentPreview />
268
- </Attachment>
269
- </AttachmentHoverCardTrigger>
270
- <AttachmentHoverCardContent>
271
- <img
272
- src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
273
- alt="Mountain landscape"
274
- class="max-w-xs rounded"
275
- />
276
- </AttachmentHoverCardContent>
277
- </AttachmentHoverCard>
278
- </Attachments>
279
- ),
280
- ...src(`<Attachments variant="grid">
281
- <AttachmentHoverCard>
282
- <AttachmentHoverCardTrigger>
283
- <Attachment data={item}>
284
- <AttachmentPreview />
285
- </Attachment>
286
- </AttachmentHoverCardTrigger>
287
- <AttachmentHoverCardContent>
288
- <img src={item.url} alt={item.filename} class="max-w-xs rounded" />
289
- </AttachmentHoverCardContent>
290
- </AttachmentHoverCard>
291
- </Attachments>`),
292
- };
293
-
294
- export const Empty: Story = {
295
- render: () => (
296
- <Attachments variant="grid">
297
- <AttachmentEmpty />
298
- </Attachments>
299
- ),
300
- ...src(`<Attachments variant="grid">
301
- <AttachmentEmpty />
302
- </Attachments>`),
303
- };
package/src/components/attachments.test.tsx DELETED
@@ -1,64 +0,0 @@
1
- /**
2
- * Unit tests for the Attachments SolidJS primitives.
3
- *
4
- * Covers two bugs found while dogfooding `kai-attachments` in the docs site:
5
- * 1. The per-item layout was not reactive to a post-render variant change —
6
- * `Attachment` destructured `variant` from context, capturing it once.
7
- * 2. `AttachmentHoverCardTrigger` could not carry layout, so the hover trigger
8
- * collapsed inline/list rows (it forwards a class now).
9
- */
10
- import { describe, it, expect, afterEach } from 'vitest';
11
- import '@testing-library/jest-dom/vitest';
12
- import { render, cleanup } from '@solidjs/testing-library';
13
- import { createSignal } from 'solid-js';
14
- import {
15
- Attachments,
16
- Attachment,
17
- AttachmentHoverCard,
18
- AttachmentHoverCardTrigger,
19
- type AttachmentData,
20
- type AttachmentVariant,
21
- } from './attachments';
22
-
23
- afterEach(cleanup);
24
-
25
- const fileData: AttachmentData = {
26
- id: '1',
27
- type: 'file',
28
- filename: 'spec.pdf',
29
- mediaType: 'application/pdf',
30
- };
31
-
32
- describe('Attachment item layout', () => {
33
- it('re-lays out items when the container variant changes after first render', () => {
34
- const [variant, setVariant] = createSignal<AttachmentVariant>('grid');
35
- const { container } = render(() => (
36
- <Attachments variant={variant()}>
37
- <Attachment data={fileData} />
38
- </Attachments>
39
- ));
40
-
41
- const item = () => container.querySelector('.group') as HTMLElement;
42
- expect(item().className).toMatch(/size-24/); // grid tile
43
-
44
- setVariant('inline');
45
- expect(item().className).not.toMatch(/size-24/); // no longer a grid tile
46
- expect(item().className).toMatch(/\bh-8\b/); // inline chip height
47
- });
48
- });
49
-
50
- describe('AttachmentHoverCardTrigger', () => {
51
- it('forwards a class to the underlying hover trigger so it can carry the row layout', () => {
52
- const { container } = render(() => (
53
- <AttachmentHoverCard>
54
- <AttachmentHoverCardTrigger class="flex items-center gap-1.5">
55
- <span>preview</span>
56
- </AttachmentHoverCardTrigger>
57
- </AttachmentHoverCard>
58
- ));
59
-
60
- const trigger = container.querySelector('span');
61
- expect(trigger).toBeTruthy();
62
- expect(trigger!.className).toContain('flex');
63
- });
64
- });