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