@archetypeai/ds-cli 0.9.1 → 0.10.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 (32) hide show
  1. package/README.md +3 -3
  2. package/commands/create.js +2 -2
  3. package/commands/init.js +2 -2
  4. package/files/AGENTS.md +128 -70
  5. package/files/CLAUDE.md +128 -70
  6. package/files/ds-manifest.json +1021 -1024
  7. package/lib/add-ds-config-codeagent.js +3 -57
  8. package/package.json +2 -2
  9. package/files/LICENSE +0 -21
  10. package/files/rules/accessibility.md +0 -268
  11. package/files/rules/charts.md +0 -256
  12. package/files/rules/components.md +0 -251
  13. package/files/rules/design-principles.md +0 -71
  14. package/files/rules/frontend-architecture.md +0 -86
  15. package/files/rules/linting.md +0 -31
  16. package/files/rules/state.md +0 -373
  17. package/files/rules/styling.md +0 -142
  18. package/files/skills/apply-ds/SKILL.md +0 -121
  19. package/files/skills/apply-ds/scripts/audit.sh +0 -169
  20. package/files/skills/apply-ds/scripts/setup.sh +0 -153
  21. package/files/skills/build-component/SKILL.md +0 -153
  22. package/files/skills/create-dashboard/SKILL.md +0 -220
  23. package/files/skills/deploy-worker/SKILL.md +0 -231
  24. package/files/skills/deploy-worker/references/wrangler-commands.md +0 -327
  25. package/files/skills/fix-accessibility/SKILL.md +0 -232
  26. package/files/skills/fix-metadata/SKILL.md +0 -118
  27. package/files/skills/fix-metadata/assets/favicon.ico +0 -0
  28. package/files/skills/setup-chart/SKILL.md +0 -223
  29. package/files/skills/setup-chart/data/embedding.csv +0 -42
  30. package/files/skills/setup-chart/data/timeseries.csv +0 -173
  31. package/files/skills/setup-chart/references/scatter-chart.md +0 -229
  32. package/files/skills/setup-chart/references/sensor-chart.md +0 -156
package/files/ds-manifest.json CHANGED
@@ -1,1075 +1,1072 @@
1
1
  {
2
2
  "name": "archetypeai-design-system",
3
- "suiteVersion": "0.9.0",
4
- "rules": [
5
- "Compose UIs from the npm packages by default; import components from their package subpaths (see each component `import` field).",
6
- "Pull editable source via the registry only when a component must be modified: npx shadcn-svelte@latest add <component `source` URL>. Never hand-edit files inside node_modules.",
7
- "Console is the stable base tier with a frozen API; do not expect console variant or prop changes. Labs is the 0.x experimental tier and may break between minor versions.",
8
- "Variant values listed under `consoleProductOnly` are named after console-product screens (runSession, lensTraySelection, topNav*, sideBarSelection, backToDashboard) and must only be used inside the console product itself.",
9
- "layerchart is pinned exactly (see labs peerDependencies); newer prereleases break the chart primitives. Do not loosen the pin.",
10
- "Use cn() re-exported from @archetypeai/ds-ui-svelte-console/primitives/utils ($lib/utils in scaffolded apps); do not create a local clsx+tailwind-merge copy."
11
- ],
12
- "tiers": {
13
- "console": {
14
- "package": "@archetypeai/ds-ui-svelte-console",
15
- "version": "0.9.0",
16
- "registry": "https://design-system-console.archetypeai.workers.dev/r/{name}.json",
17
- "stability": "stable — frozen API",
18
- "components": [
19
- {
20
- "name": "console-utils",
21
- "title": "Console Utils",
22
- "description": "className merge helper (cn) with the rounded-interactive tailwind-merge extension.",
23
- "import": "@archetypeai/ds-ui-svelte-console/primitives/utils",
24
- "source": "https://design-system-console.archetypeai.workers.dev/r/console-utils.json",
25
- "dependencies": [
26
- "clsx",
27
- "tailwind-merge"
28
- ]
29
- },
30
- {
31
- "name": "theme",
32
- "title": "Theme",
33
- "description": "Dark-mode controller (singleton) that syncs the `dark` class on <html>.",
34
- "import": "@archetypeai/ds-ui-svelte-console/primitives/theme",
35
- "source": "https://design-system-console.archetypeai.workers.dev/r/theme.json"
36
- },
37
- {
38
- "name": "alert",
39
- "import": "@archetypeai/ds-ui-svelte-console/primitives/alert",
40
- "source": "https://design-system-console.archetypeai.workers.dev/r/alert.json",
41
- "dependencies": [
42
- "tailwind-variants"
43
- ],
44
- "variants": {
45
- "alertVariants": {
46
- "axes": {
47
- "variant": [
48
- "success",
49
- "warning",
50
- "danger",
51
- "info",
52
- "neutral"
53
- ]
54
- },
55
- "defaults": {
56
- "variant": "neutral"
57
- }
58
- }
3
+ "version": "0.10.1",
4
+ "components": [
5
+ {
6
+ "name": "alert",
7
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/alert",
8
+ "source": "https://design-system-console.archetypeai.workers.dev/r/alert.json",
9
+ "description": "Inline callout for operation results and system messages.",
10
+ "usage": [
11
+ "Pick variant by severity: success | warning | danger | info | neutral (default).",
12
+ "Slots: AlertTitle (outcome), optional AlertHeadline (specific cause, e.g. the failed file), AlertDescription (next step).",
13
+ "AlertAction with a `Button variant=\"secondaryCta\"` for follow-ups (View Logs)."
14
+ ],
15
+ "variants": {
16
+ "alertVariants": {
17
+ "axes": {
18
+ "variant": [
19
+ "success",
20
+ "warning",
21
+ "danger",
22
+ "info",
23
+ "neutral"
24
+ ]
25
+ },
26
+ "defaults": {
27
+ "variant": "neutral"
59
28
  }
60
- },
61
- {
62
- "name": "badge",
63
- "import": "@archetypeai/ds-ui-svelte-console/primitives/badge",
64
- "source": "https://design-system-console.archetypeai.workers.dev/r/badge.json",
65
- "dependencies": [
66
- "tailwind-variants"
67
- ],
68
- "variants": {
69
- "badgeVariants": {
70
- "axes": {
71
- "variant": [
72
- "selection",
73
- "status"
74
- ]
75
- },
76
- "defaults": {
77
- "variant": "status"
78
- }
79
- }
29
+ }
30
+ }
31
+ },
32
+ {
33
+ "name": "aspect-ratio",
34
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/aspect-ratio",
35
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/aspect-ratio.json",
36
+ "description": "Fixed-ratio container for media and placeholders.",
37
+ "usage": [
38
+ "`<AspectRatio ratio={16 / 9}>` wrapping an image, video, or bg-muted placeholder."
39
+ ]
40
+ },
41
+ {
42
+ "name": "badge",
43
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/badge",
44
+ "source": "https://design-system-console.archetypeai.workers.dev/r/badge.json",
45
+ "description": "Small pill for statuses and selected items.",
46
+ "usage": [
47
+ "Status: `variant=\"status\"` colored via status tokens, e.g. class=\"text-atai-good border-atai-good\" (Completed), atai-critical (Failed), atai-warning (Interrupted), atai-neutral (Running), muted-foreground (Pending).",
48
+ "Selection: `variant=\"selection\"` for dismissible picks, with an embedded `Button variant=\"ghost\" size=\"inline\" visibility=\"dimmed\"` X icon to remove."
49
+ ],
50
+ "variants": {
51
+ "badgeVariants": {
52
+ "axes": {
53
+ "variant": [
54
+ "selection",
55
+ "status"
56
+ ]
57
+ },
58
+ "defaults": {
59
+ "variant": "status"
80
60
  }
81
- },
82
- {
83
- "name": "button",
84
- "import": "@archetypeai/ds-ui-svelte-console/primitives/button",
85
- "source": "https://design-system-console.archetypeai.workers.dev/r/button.json",
86
- "dependencies": [
87
- "@lucide/svelte",
88
- "tailwind-variants"
89
- ],
90
- "variants": {
91
- "buttonVariants": {
92
- "axes": {
93
- "variant": [
94
- "cta",
95
- "secondaryCta",
96
- "ghost",
97
- "outline",
98
- "accent",
99
- "destructive",
100
- "floating",
101
- "link",
102
- "announcement",
103
- "runSession",
104
- "topNavLogo",
105
- "topNavSelection",
106
- "topNavTrigger",
107
- "sideBarSelection",
108
- "lensTraySelection",
109
- "lensTrayTrigger",
110
- "backToDashboard"
111
- ],
112
- "size": [
113
- "default",
114
- "sm",
115
- "lg",
116
- "icon",
117
- "overlay",
118
- "inline"
119
- ],
120
- "typography": [
121
- "default",
122
- "mono"
123
- ],
124
- "visibility": [
125
- "default",
126
- "hover",
127
- "dimmed"
128
- ],
129
- "width": [
130
- "default",
131
- "fit",
132
- "full"
133
- ],
134
- "justify": [
135
- "default",
136
- "between"
137
- ]
138
- },
139
- "defaults": {
140
- "variant": "cta",
141
- "size": "default",
142
- "typography": "default",
143
- "visibility": "default",
144
- "width": "default",
145
- "justify": "default"
146
- }
147
- }
61
+ }
62
+ }
63
+ },
64
+ {
65
+ "name": "button",
66
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/button",
67
+ "source": "https://design-system-console.archetypeai.workers.dev/r/button.json",
68
+ "description": "Action trigger for every emphasis level; renders an <a> when href is set. `loading` prop swaps in a spinner.",
69
+ "usage": [
70
+ "cta — filled primary action (Create, Submit, modal confirm); one per view. `size=\"sm\"` in toolbars and dialog footers.",
71
+ "secondaryCta — capitalized text action, underline on hover (Learn More, alert/banner follow-ups).",
72
+ "outline — secondary action paired against a cta (Cancel/Close in dialog footers); also `width=\"full\"` add-file buttons in pickers.",
73
+ "ghost + size=\"icon\" — quiet icon action everywhere: row actions, pager arrows, sidebar collapse, card headers (copy, dismiss).",
74
+ "accent + size=\"icon\" — quiet icon control that gains a bg on hover (steppers, profile/theme triggers).",
75
+ "destructive + size=\"icon\" — delete/end action, turns red on hover; add visibility=\"hover\" inside list rows so it only appears on row hover.",
76
+ "floating + size=\"overlay\" — backdrop-blurred control floating over media or scrolling panels (sort selector).",
77
+ "link — inline text link; size=\"inline\" flows inside prose (empty states). announcement — babyblue brand pill.",
78
+ "typography=\"mono\" uppercases label text (dialog footer CTAs); width=\"full\" for full-width form buttons."
79
+ ],
80
+ "variants": {
81
+ "buttonVariants": {
82
+ "axes": {
83
+ "variant": [
84
+ "cta",
85
+ "secondaryCta",
86
+ "ghost",
87
+ "outline",
88
+ "accent",
89
+ "destructive",
90
+ "floating",
91
+ "link",
92
+ "announcement"
93
+ ],
94
+ "size": [
95
+ "default",
96
+ "sm",
97
+ "lg",
98
+ "icon",
99
+ "overlay",
100
+ "inline"
101
+ ],
102
+ "typography": [
103
+ "default",
104
+ "mono"
105
+ ],
106
+ "visibility": [
107
+ "default",
108
+ "hover",
109
+ "dimmed"
110
+ ],
111
+ "width": [
112
+ "default",
113
+ "fit",
114
+ "full"
115
+ ],
116
+ "justify": [
117
+ "default",
118
+ "between"
119
+ ]
148
120
  },
149
- "consoleProductOnly": {
150
- "buttonVariants.variant": [
151
- "runSession",
152
- "topNavLogo",
153
- "topNavSelection",
154
- "topNavTrigger",
155
- "sideBarSelection",
156
- "lensTraySelection",
157
- "lensTrayTrigger",
158
- "backToDashboard"
121
+ "defaults": {
122
+ "variant": "cta",
123
+ "size": "default",
124
+ "typography": "default",
125
+ "visibility": "default",
126
+ "width": "default",
127
+ "justify": "default"
128
+ }
129
+ }
130
+ }
131
+ },
132
+ {
133
+ "name": "card",
134
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/card",
135
+ "source": "https://design-system-console.archetypeai.workers.dev/r/card.json",
136
+ "description": "Surface container with Header/Title/Action/Content/Footer sub-parts.",
137
+ "usage": [
138
+ "Detail panel: `variant=\"info\"` + Card.Header (Card.Title + Card.Action icon) + Card.Content layout=\"stack\" holding Label sectionHeader → mono value pairs (Job Details, dialog notes).",
139
+ "Grid tile: `variant=\"status\"` for clickable job/model status cards in dashboard grids (pass href); `variant=\"intro\"` for hero/landing cards.",
140
+ "Single-metric status cards often need no CardHeader — omit when content is self-explanatory."
141
+ ],
142
+ "variants": {
143
+ "cardVariants": {
144
+ "axes": {
145
+ "variant": [
146
+ "default",
147
+ "intro",
148
+ "status",
149
+ "info"
159
150
  ]
151
+ },
152
+ "defaults": {
153
+ "variant": "default"
160
154
  }
161
155
  },
162
- {
163
- "name": "card",
164
- "import": "@archetypeai/ds-ui-svelte-console/primitives/card",
165
- "source": "https://design-system-console.archetypeai.workers.dev/r/card.json",
166
- "dependencies": [
167
- "tailwind-variants"
168
- ],
169
- "variants": {
170
- "cardVariants": {
171
- "axes": {
172
- "variant": [
173
- "default",
174
- "intro",
175
- "status",
176
- "info"
177
- ]
178
- },
179
- "defaults": {
180
- "variant": "default"
181
- }
182
- },
183
- "cardContentVariants": {
184
- "axes": {
185
- "layout": [
186
- "stack",
187
- "compact"
188
- ]
189
- }
190
- }
156
+ "cardContentVariants": {
157
+ "axes": {
158
+ "layout": [
159
+ "stack",
160
+ "compact"
161
+ ]
191
162
  }
192
- },
193
- {
194
- "name": "checkbox",
195
- "import": "@archetypeai/ds-ui-svelte-console/primitives/checkbox",
196
- "source": "https://design-system-console.archetypeai.workers.dev/r/checkbox.json",
197
- "dependencies": [
198
- "@lucide/svelte",
199
- "bits-ui",
200
- "tailwind-variants"
201
- ]
202
- },
203
- {
204
- "name": "codeblock",
205
- "import": "@archetypeai/ds-ui-svelte-console/primitives/codeblock",
206
- "source": "https://design-system-console.archetypeai.workers.dev/r/codeblock.json",
207
- "dependencies": [
208
- "@cfworker/json-schema",
209
- "@lucide/svelte",
210
- "shiki",
211
- "yaml"
212
- ]
213
- },
214
- {
215
- "name": "collapsible",
216
- "import": "@archetypeai/ds-ui-svelte-console/primitives/collapsible",
217
- "source": "https://design-system-console.archetypeai.workers.dev/r/collapsible.json",
218
- "dependencies": [
219
- "@lucide/svelte",
220
- "bits-ui",
221
- "tailwind-variants"
222
- ],
223
- "variants": {
224
- "collapsibleTriggerVariants": {
225
- "axes": {
226
- "width": [
227
- "default",
228
- "fit",
229
- "full"
230
- ],
231
- "chevron": [
232
- "start",
233
- "end"
234
- ]
235
- },
236
- "defaults": {
237
- "width": "default",
238
- "chevron": "start"
239
- }
240
- }
163
+ }
164
+ }
165
+ },
166
+ {
167
+ "name": "chart",
168
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/chart",
169
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/chart.json",
170
+ "description": "Chart.Container + Chart.Tooltip wrappers around layerchart for custom charts (prefer sensor-chart / scatter-chart when they fit).",
171
+ "usage": [
172
+ "Wrap every layerchart in `<Chart.Container config={...} class=\"aspect-auto h-[220px] w-full\">`; config maps data keys to { label, color: 'var(--chart-N)' } (chart-1…chart-5).",
173
+ "layerchart is pinned to an exact prerelease — never loosen it."
174
+ ]
175
+ },
176
+ {
177
+ "name": "checkbox",
178
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/checkbox",
179
+ "source": "https://design-system-console.archetypeai.workers.dev/r/checkbox.json",
180
+ "description": "Binary selection control (bits-ui).",
181
+ "usage": [
182
+ "`bind:checked` + aria-label; for selectable file rows wrap checkbox + name + size in a <label> row, selected state via bg-atai-brand-babyblue/60."
183
+ ]
184
+ },
185
+ {
186
+ "name": "codeblock",
187
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/codeblock",
188
+ "source": "https://design-system-console.archetypeai.workers.dev/r/codeblock.json",
189
+ "description": "Syntax-highlighted code display (CodeBlock, shiki) and editable code field with JSON-schema validation (CodeBlockEditor).",
190
+ "usage": [
191
+ "`<CodeBlock code language=\"yaml\" class=\"border-border border\" />` for configs; wrap in {#key darkMode.current} so it re-highlights on theme flips.",
192
+ "Config editors: `<CodeBlockEditor bind:value bind:valid bind:schemaUnavailable schema={jsonSchema} placeholder showDownload downloadBaseName />` + a Label sectionHeader row showing the derived valid/invalid state in status tokens."
193
+ ]
194
+ },
195
+ {
196
+ "name": "collapsible",
197
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/collapsible",
198
+ "source": "https://design-system-console.archetypeai.workers.dev/r/collapsible.json",
199
+ "description": "Expandable/collapsible section.",
200
+ "usage": [
201
+ "`Collapsible.Root bind:open` + `Collapsible.Trigger chevron=\"start\"` wrapping a Label sectionHeader → folding config/detail sections."
202
+ ],
203
+ "variants": {
204
+ "collapsibleTriggerVariants": {
205
+ "axes": {
206
+ "width": [
207
+ "default",
208
+ "fit",
209
+ "full"
210
+ ],
211
+ "chevron": [
212
+ "start",
213
+ "end"
214
+ ]
215
+ },
216
+ "defaults": {
217
+ "width": "default",
218
+ "chevron": "start"
241
219
  }
242
- },
243
- {
244
- "name": "dialog",
245
- "import": "@archetypeai/ds-ui-svelte-console/primitives/dialog",
246
- "source": "https://design-system-console.archetypeai.workers.dev/r/dialog.json",
247
- "dependencies": [
248
- "@lucide/svelte",
249
- "bits-ui",
250
- "tailwind-variants"
251
- ],
252
- "variants": {
253
- "dialogFooterVariants": {
254
- "axes": {
255
- "justify": [
256
- "default",
257
- "between"
258
- ]
259
- },
260
- "defaults": {
261
- "justify": "default"
262
- }
263
- }
220
+ }
221
+ }
222
+ },
223
+ {
224
+ "name": "console-utils",
225
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/utils",
226
+ "source": "https://design-system-console.archetypeai.workers.dev/r/console-utils.json",
227
+ "description": "className merge helper cn() (clsx + tailwind-merge with the rounded-interactive extension). Re-exported as $lib/utils in scaffolded apps."
228
+ },
229
+ {
230
+ "name": "dialog",
231
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/dialog",
232
+ "source": "https://design-system-console.archetypeai.workers.dev/r/dialog.json",
233
+ "description": "Modal dialog for forms and confirmations.",
234
+ "usage": [
235
+ "Open from a button: `<Dialog.Trigger>{#snippet child({ props })}<Button variant=\"outline\" size=\"sm\" {...props}>…</Button>{/snippet}</Dialog.Trigger>`.",
236
+ "Content = Dialog.Header (Title + Description) + Dialog.Body (form fields) + Dialog.Footer justify=\"between\" pairing `outline` Cancel and `cta` Submit, both size=\"sm\" typography=\"mono\"."
237
+ ],
238
+ "variants": {
239
+ "dialogFooterVariants": {
240
+ "axes": {
241
+ "justify": [
242
+ "default",
243
+ "between"
244
+ ]
245
+ },
246
+ "defaults": {
247
+ "justify": "default"
264
248
  }
265
- },
266
- {
267
- "name": "dropdown-menu",
268
- "import": "@archetypeai/ds-ui-svelte-console/primitives/dropdown-menu",
269
- "source": "https://design-system-console.archetypeai.workers.dev/r/dropdown-menu.json",
270
- "dependencies": [
271
- "@lucide/svelte",
272
- "bits-ui",
273
- "tailwind-variants"
274
- ],
275
- "variants": {
276
- "dropdownMenuTriggerVariants": {
277
- "axes": {
278
- "variant": [
279
- "default",
280
- "ghost",
281
- "input",
282
- "filter"
283
- ],
284
- "typography": [
285
- "default",
286
- "mono"
287
- ]
288
- },
289
- "defaults": {
290
- "variant": "default",
291
- "typography": "default"
292
- }
293
- },
294
- "dropdownMenuItemVariants": {
295
- "axes": {
296
- "variant": [
297
- "default",
298
- "destructive"
299
- ],
300
- "inset": [
301
- "true",
302
- "false"
303
- ],
304
- "typography": [
305
- "default",
306
- "mono"
307
- ],
308
- "justify": [
309
- "default",
310
- "between"
311
- ]
312
- },
313
- "defaults": {
314
- "variant": "default",
315
- "inset": "false",
316
- "typography": "default",
317
- "justify": "default"
318
- }
319
- },
320
- "dropdownMenuSubTriggerVariants": {
321
- "axes": {
322
- "inset": [
323
- "true",
324
- "false"
325
- ]
326
- },
327
- "defaults": {
328
- "inset": "false"
329
- }
330
- },
331
- "dropdownMenuLabelVariants": {
332
- "axes": {
333
- "inset": [
334
- "true",
335
- "false"
336
- ]
337
- },
338
- "defaults": {
339
- "inset": "false"
340
- }
341
- },
342
- "dropdownMenuGroupHeadingVariants": {
343
- "axes": {
344
- "inset": [
345
- "true",
346
- "false"
347
- ]
348
- },
349
- "defaults": {
350
- "inset": "false"
351
- }
352
- }
249
+ }
250
+ }
251
+ },
252
+ {
253
+ "name": "dropdown-menu",
254
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/dropdown-menu",
255
+ "source": "https://design-system-console.archetypeai.workers.dev/r/dropdown-menu.json",
256
+ "description": "Contextual action menu.",
257
+ "usage": [
258
+ "Trigger via child snippet spread onto a Button (profile menu: `variant=\"accent\"` avatar + chevron, rounded-full).",
259
+ "Styled triggers: `DropdownMenu.Trigger variant=\"filter\"` for toolbar/list filter dropdowns; `variant=\"input\"` for form-field-styled dropdowns in pickers.",
260
+ "`DropdownMenu.Content align=\"end\" class=\"min-w-64\"`; items `justify=\"between\"` with a trailing icon; `closeOnSelect={false}` for in-menu toggles (dark mode); Separator before Sign Out."
261
+ ],
262
+ "variants": {
263
+ "dropdownMenuTriggerVariants": {
264
+ "axes": {
265
+ "variant": [
266
+ "default",
267
+ "ghost",
268
+ "input",
269
+ "filter"
270
+ ],
271
+ "typography": [
272
+ "default",
273
+ "mono"
274
+ ]
275
+ },
276
+ "defaults": {
277
+ "variant": "default",
278
+ "typography": "default"
353
279
  }
354
280
  },
355
- {
356
- "name": "dropzone",
357
- "import": "@archetypeai/ds-ui-svelte-console/primitives/dropzone",
358
- "source": "https://design-system-console.archetypeai.workers.dev/r/dropzone.json",
359
- "dependencies": [
360
- "tailwind-variants"
361
- ],
362
- "variants": {
363
- "dropzoneVariants": {
364
- "axes": {
365
- "size": [
366
- "default",
367
- "fill",
368
- "compact"
369
- ]
370
- },
371
- "defaults": {
372
- "size": "default"
373
- }
374
- }
281
+ "dropdownMenuItemVariants": {
282
+ "axes": {
283
+ "variant": [
284
+ "default",
285
+ "destructive"
286
+ ],
287
+ "inset": [
288
+ "true",
289
+ "false"
290
+ ],
291
+ "typography": [
292
+ "default",
293
+ "mono"
294
+ ],
295
+ "justify": [
296
+ "default",
297
+ "between"
298
+ ]
299
+ },
300
+ "defaults": {
301
+ "variant": "default",
302
+ "inset": "false",
303
+ "typography": "default",
304
+ "justify": "default"
375
305
  }
376
306
  },
377
- {
378
- "name": "empty-state",
379
- "import": "@archetypeai/ds-ui-svelte-console/primitives/empty-state",
380
- "source": "https://design-system-console.archetypeai.workers.dev/r/empty-state.json",
381
- "dependencies": [
382
- "tailwind-variants"
383
- ],
384
- "variants": {
385
- "emptyStateVariants": {
386
- "axes": {
387
- "variant": [
388
- "default",
389
- "list"
390
- ]
391
- },
392
- "defaults": {
393
- "variant": "default"
394
- }
395
- }
307
+ "dropdownMenuSubTriggerVariants": {
308
+ "axes": {
309
+ "inset": [
310
+ "true",
311
+ "false"
312
+ ]
313
+ },
314
+ "defaults": {
315
+ "inset": "false"
396
316
  }
397
317
  },
398
- {
399
- "name": "input",
400
- "import": "@archetypeai/ds-ui-svelte-console/primitives/input",
401
- "source": "https://design-system-console.archetypeai.workers.dev/r/input.json",
402
- "dependencies": [
403
- "@lucide/svelte",
404
- "tailwind-variants"
405
- ],
406
- "variants": {
407
- "inputVariants": {
408
- "axes": {
409
- "variant": [
410
- "default",
411
- "search",
412
- "login",
413
- "filter"
414
- ],
415
- "size": [
416
- "sm",
417
- "default"
418
- ]
419
- },
420
- "defaults": {
421
- "variant": "default",
422
- "size": "default"
423
- }
424
- }
318
+ "dropdownMenuLabelVariants": {
319
+ "axes": {
320
+ "inset": [
321
+ "true",
322
+ "false"
323
+ ]
324
+ },
325
+ "defaults": {
326
+ "inset": "false"
425
327
  }
426
328
  },
427
- {
428
- "name": "input-group",
429
- "import": "@archetypeai/ds-ui-svelte-console/primitives/input-group",
430
- "source": "https://design-system-console.archetypeai.workers.dev/r/input-group.json",
431
- "dependencies": [
432
- "tailwind-variants"
433
- ],
434
- "variants": {
435
- "inputGroupVariants": {
436
- "axes": {
437
- "variant": [
438
- "default",
439
- "login",
440
- "form"
441
- ],
442
- "width": [
443
- "default",
444
- "fit",
445
- "full"
446
- ]
447
- },
448
- "defaults": {
449
- "variant": "default",
450
- "width": "full"
451
- }
452
- },
453
- "inputGroupAddonVariants": {
454
- "axes": {
455
- "align": [
456
- "inline-start",
457
- "inline-end",
458
- "block-start",
459
- "block-end"
460
- ]
461
- },
462
- "defaults": {
463
- "align": "inline-start"
464
- }
465
- },
466
- "inputGroupButtonVariants": {
467
- "axes": {
468
- "size": [
469
- "xs",
470
- "sm",
471
- "icon-xs",
472
- "icon-sm"
473
- ]
474
- },
475
- "defaults": {
476
- "size": "xs"
477
- }
478
- }
329
+ "dropdownMenuGroupHeadingVariants": {
330
+ "axes": {
331
+ "inset": [
332
+ "true",
333
+ "false"
334
+ ]
335
+ },
336
+ "defaults": {
337
+ "inset": "false"
479
338
  }
480
- },
481
- {
482
- "name": "item",
483
- "import": "@archetypeai/ds-ui-svelte-console/primitives/item",
484
- "source": "https://design-system-console.archetypeai.workers.dev/r/item.json",
485
- "dependencies": [
486
- "tailwind-variants"
487
- ],
488
- "variants": {
489
- "itemVariants": {
490
- "axes": {
491
- "variant": [
492
- "default",
493
- "outline",
494
- "muted",
495
- "rowItem",
496
- "banner"
497
- ],
498
- "size": [
499
- "default",
500
- "sm",
501
- "xs",
502
- "compact"
503
- ],
504
- "phase": [
505
- "default",
506
- "pending",
507
- "uploading",
508
- "complete",
509
- "error"
510
- ],
511
- "dimmed": [
512
- "off",
513
- "on"
514
- ]
515
- },
516
- "defaults": {
517
- "variant": "default",
518
- "size": "default",
519
- "phase": "default",
520
- "dimmed": "off"
521
- }
522
- },
523
- "itemColumnVariants": {
524
- "axes": {
525
- "column": [
526
- "grow",
527
- "wide",
528
- "mid",
529
- "status"
530
- ],
531
- "typography": [
532
- "default",
533
- "mono"
534
- ]
535
- },
536
- "defaults": {
537
- "column": "grow",
538
- "typography": "default"
539
- }
540
- },
541
- "itemContentVariants": {
542
- "axes": {
543
- "typography": [
544
- "default",
545
- "mono"
546
- ]
547
- },
548
- "defaults": {
549
- "typography": "default"
550
- }
551
- },
552
- "itemMediaVariants": {
553
- "axes": {
554
- "variant": [
555
- "default",
556
- "icon",
557
- "image"
558
- ]
559
- },
560
- "defaults": {
561
- "variant": "default"
562
- }
563
- },
564
- "itemStatusVariants": {
565
- "axes": {
566
- "phase": [
567
- "default",
568
- "pending",
569
- "uploading",
570
- "complete",
571
- "error"
572
- ],
573
- "visibility": [
574
- "default",
575
- "idleOnly"
576
- ]
577
- },
578
- "defaults": {
579
- "phase": "default",
580
- "visibility": "default"
581
- }
582
- }
339
+ }
340
+ }
341
+ },
342
+ {
343
+ "name": "dropzone",
344
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/dropzone",
345
+ "source": "https://design-system-console.archetypeai.workers.dev/r/dropzone.json",
346
+ "description": "File-upload drop target with per-phase snippets.",
347
+ "usage": [
348
+ "`<DropZone.Root size=\"compact\" multiple ariaLabel=\"Upload files\">` in file pickers, {#snippet idle()} / dragging() / uploading()} states; `size=\"fill\"` fills an entire empty panel.",
349
+ "idle = icon + DropZone.CaptionStack (Title + Action + Hint); uploading = `<Spinner size=\"lg\" />` + Title."
350
+ ],
351
+ "variants": {
352
+ "dropzoneVariants": {
353
+ "axes": {
354
+ "size": [
355
+ "default",
356
+ "fill",
357
+ "compact"
358
+ ]
359
+ },
360
+ "defaults": {
361
+ "size": "default"
583
362
  }
584
- },
585
- {
586
- "name": "label",
587
- "import": "@archetypeai/ds-ui-svelte-console/primitives/label",
588
- "source": "https://design-system-console.archetypeai.workers.dev/r/label.json",
589
- "dependencies": [
590
- "bits-ui",
591
- "tailwind-variants"
592
- ],
593
- "variants": {
594
- "labelVariants": {
595
- "axes": {
596
- "variant": [
597
- "default",
598
- "pagination",
599
- "destructive",
600
- "fieldError",
601
- "sectionHeader",
602
- "tableColumnHeader",
603
- "workbenchHeader",
604
- "responseCaption",
605
- "selectionSubHeader"
606
- ]
607
- },
608
- "defaults": {
609
- "variant": "default"
610
- }
611
- }
363
+ }
364
+ }
365
+ },
366
+ {
367
+ "name": "empty-state",
368
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/empty-state",
369
+ "source": "https://design-system-console.archetypeai.workers.dev/r/empty-state.json",
370
+ "description": "Placeholder for lists, tables, and panels with no content.",
371
+ "usage": [
372
+ "`variant=\"list\"` inside list/log containers (\"No matching logs found.\").",
373
+ "Point at the fix with inline links: `Button variant=\"link\" size=\"inline\"` inside the muted prose."
374
+ ],
375
+ "variants": {
376
+ "emptyStateVariants": {
377
+ "axes": {
378
+ "variant": [
379
+ "default",
380
+ "list"
381
+ ]
382
+ },
383
+ "defaults": {
384
+ "variant": "default"
612
385
  }
613
- },
614
- {
615
- "name": "progress",
616
- "import": "@archetypeai/ds-ui-svelte-console/primitives/progress",
617
- "source": "https://design-system-console.archetypeai.workers.dev/r/progress.json",
618
- "dependencies": [
619
- "bits-ui",
620
- "tailwind-variants"
621
- ],
622
- "variants": {
623
- "progressVariants": {
624
- "axes": {
625
- "size": [
626
- "default",
627
- "sm"
628
- ]
629
- },
630
- "defaults": {
631
- "size": "default"
632
- }
633
- },
634
- "progressIndicatorVariants": {
635
- "axes": {
636
- "variant": [
637
- "default",
638
- "success",
639
- "critical"
640
- ]
641
- },
642
- "defaults": {
643
- "variant": "default"
644
- }
645
- }
386
+ }
387
+ }
388
+ },
389
+ {
390
+ "name": "input",
391
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/input",
392
+ "source": "https://design-system-console.archetypeai.workers.dev/r/input.json",
393
+ "description": "Single-line text input.",
394
+ "usage": [
395
+ "`variant=\"search\"` + placeholder + bind:value — search boxes in toolbars and log viewers (Search jobs…).",
396
+ "default variant for form fields; `variant=\"filter\"` — search field inside filter/dropdown popovers; `variant=\"login\"` pairs with input-group login."
397
+ ],
398
+ "variants": {
399
+ "inputVariants": {
400
+ "axes": {
401
+ "variant": [
402
+ "default",
403
+ "search",
404
+ "login",
405
+ "filter"
406
+ ],
407
+ "size": [
408
+ "sm",
409
+ "default"
410
+ ]
411
+ },
412
+ "defaults": {
413
+ "variant": "default",
414
+ "size": "default"
646
415
  }
647
- },
648
- {
649
- "name": "select",
650
- "import": "@archetypeai/ds-ui-svelte-console/primitives/select",
651
- "source": "https://design-system-console.archetypeai.workers.dev/r/select.json",
652
- "dependencies": [
653
- "@lucide/svelte",
654
- "bits-ui",
655
- "tailwind-variants"
656
- ],
657
- "variants": {
658
- "selectTriggerVariants": {
659
- "axes": {
660
- "variant": [
661
- "default",
662
- "ghost",
663
- "input"
664
- ],
665
- "size": [
666
- "default",
667
- "sm"
668
- ],
669
- "typography": [
670
- "default",
671
- "mono"
672
- ]
673
- },
674
- "defaults": {
675
- "variant": "default",
676
- "size": "default",
677
- "typography": "default"
678
- }
679
- },
680
- "selectItemVariants": {
681
- "axes": {
682
- "typography": [
683
- "default",
684
- "mono"
685
- ]
686
- },
687
- "defaults": {
688
- "typography": "default"
689
- }
690
- },
691
- "selectContentVariants": {
692
- "axes": {
693
- "size": [
694
- "default",
695
- "sm"
696
- ]
697
- },
698
- "defaults": {
699
- "size": "default"
700
- }
701
- }
416
+ }
417
+ }
418
+ },
419
+ {
420
+ "name": "input-group",
421
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/input-group",
422
+ "source": "https://design-system-console.archetypeai.workers.dev/r/input-group.json",
423
+ "description": "Input with attached addons and buttons.",
424
+ "usage": [
425
+ "Credential field: `InputGroup.Root variant=\"login\"` + `InputGroup.Input variant=\"login\" type=\"password\"` + `InputGroup.Addon align=\"inline-end\"` holding an `InputGroup.Button size=\"icon-sm\"` eye toggle (aria-label for show/hide)."
426
+ ],
427
+ "variants": {
428
+ "inputGroupVariants": {
429
+ "axes": {
430
+ "variant": [
431
+ "default",
432
+ "login",
433
+ "form"
434
+ ],
435
+ "width": [
436
+ "default",
437
+ "fit",
438
+ "full"
439
+ ]
440
+ },
441
+ "defaults": {
442
+ "variant": "default",
443
+ "width": "full"
702
444
  }
703
445
  },
704
- {
705
- "name": "separator",
706
- "import": "@archetypeai/ds-ui-svelte-console/primitives/separator",
707
- "source": "https://design-system-console.archetypeai.workers.dev/r/separator.json",
708
- "dependencies": [
709
- "bits-ui",
710
- "tailwind-variants"
711
- ]
712
- },
713
- {
714
- "name": "sonner",
715
- "import": "@archetypeai/ds-ui-svelte-console/primitives/sonner",
716
- "source": "https://design-system-console.archetypeai.workers.dev/r/sonner.json",
717
- "dependencies": [
718
- "svelte-sonner",
719
- "tailwind-variants"
720
- ]
446
+ "inputGroupAddonVariants": {
447
+ "axes": {
448
+ "align": [
449
+ "inline-start",
450
+ "inline-end",
451
+ "block-start",
452
+ "block-end"
453
+ ]
454
+ },
455
+ "defaults": {
456
+ "align": "inline-start"
457
+ }
721
458
  },
722
- {
723
- "name": "spinner",
724
- "import": "@archetypeai/ds-ui-svelte-console/primitives/spinner",
725
- "source": "https://design-system-console.archetypeai.workers.dev/r/spinner.json",
726
- "dependencies": [
727
- "@lucide/svelte",
728
- "tailwind-variants"
729
- ],
730
- "variants": {
731
- "spinnerVariants": {
732
- "axes": {
733
- "variant": [
734
- "default",
735
- "braille"
736
- ],
737
- "size": [
738
- "default",
739
- "md",
740
- "lg"
741
- ]
742
- },
743
- "defaults": {
744
- "variant": "default",
745
- "size": "default"
746
- }
747
- }
459
+ "inputGroupButtonVariants": {
460
+ "axes": {
461
+ "size": [
462
+ "xs",
463
+ "sm",
464
+ "icon-xs",
465
+ "icon-sm"
466
+ ]
467
+ },
468
+ "defaults": {
469
+ "size": "xs"
470
+ }
471
+ }
472
+ }
473
+ },
474
+ {
475
+ "name": "item",
476
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/item",
477
+ "source": "https://design-system-console.archetypeai.workers.dev/r/item.json",
478
+ "description": "List-row unit for files, sessions, and uploads.",
479
+ "usage": [
480
+ "File/attachment row: `variant=\"outline\"` + Item.Media (file icon) + Item.Content (Item.Title + Item.Description with size · type).",
481
+ "Data row: `variant=\"rowItem\"` + Item.Row of Item.Column column=\"grow|wide|mid|status\" typography=\"mono\" — truncated mono ids with a ghost icon copy button, a status Badge column, and Item.Actions holding icon buttons with visibility=\"hover\" (the standard job/session/file row).",
482
+ "`variant=\"banner\"` for banner-style rows; the phase axis (pending | uploading | complete | error) + Item.Status track upload lifecycles."
483
+ ],
484
+ "variants": {
485
+ "itemVariants": {
486
+ "axes": {
487
+ "variant": [
488
+ "default",
489
+ "outline",
490
+ "muted",
491
+ "rowItem",
492
+ "banner"
493
+ ],
494
+ "size": [
495
+ "default",
496
+ "sm",
497
+ "xs",
498
+ "compact"
499
+ ],
500
+ "phase": [
501
+ "default",
502
+ "pending",
503
+ "uploading",
504
+ "complete",
505
+ "error"
506
+ ],
507
+ "dimmed": [
508
+ "off",
509
+ "on"
510
+ ]
511
+ },
512
+ "defaults": {
513
+ "variant": "default",
514
+ "size": "default",
515
+ "phase": "default",
516
+ "dimmed": "off"
748
517
  }
749
518
  },
750
- {
751
- "name": "table",
752
- "import": "@archetypeai/ds-ui-svelte-console/primitives/table",
753
- "source": "https://design-system-console.archetypeai.workers.dev/r/table.json",
754
- "dependencies": [
755
- "tailwind-variants"
756
- ],
757
- "variants": {
758
- "tableBodyVariants": {
759
- "axes": {
760
- "typography": [
761
- "default",
762
- "mono"
763
- ]
764
- },
765
- "defaults": {
766
- "typography": "default"
767
- }
768
- }
519
+ "itemColumnVariants": {
520
+ "axes": {
521
+ "column": [
522
+ "grow",
523
+ "wide",
524
+ "mid",
525
+ "status"
526
+ ],
527
+ "typography": [
528
+ "default",
529
+ "mono"
530
+ ]
531
+ },
532
+ "defaults": {
533
+ "column": "grow",
534
+ "typography": "default"
769
535
  }
770
536
  },
771
- {
772
- "name": "tabs",
773
- "import": "@archetypeai/ds-ui-svelte-console/primitives/tabs",
774
- "source": "https://design-system-console.archetypeai.workers.dev/r/tabs.json",
775
- "dependencies": [
776
- "bits-ui",
777
- "tailwind-variants"
778
- ],
779
- "variants": {
780
- "tabsListVariants": {
781
- "axes": {
782
- "variant": [
783
- "default",
784
- "line",
785
- "toggle"
786
- ]
787
- },
788
- "defaults": {
789
- "variant": "default"
790
- }
791
- },
792
- "tabsTriggerVariants": {
793
- "axes": {
794
- "variant": [
795
- "text",
796
- "icon"
797
- ],
798
- "size": [
799
- "default",
800
- "pill"
801
- ],
802
- "typography": [
803
- "default",
804
- "mono"
805
- ]
806
- },
807
- "defaults": {
808
- "variant": "text",
809
- "size": "default",
810
- "typography": "default"
811
- }
812
- }
537
+ "itemContentVariants": {
538
+ "axes": {
539
+ "typography": [
540
+ "default",
541
+ "mono"
542
+ ]
543
+ },
544
+ "defaults": {
545
+ "typography": "default"
813
546
  }
814
547
  },
815
- {
816
- "name": "textarea",
817
- "import": "@archetypeai/ds-ui-svelte-console/primitives/textarea",
818
- "source": "https://design-system-console.archetypeai.workers.dev/r/textarea.json",
819
- "dependencies": [
820
- "tailwind-variants"
821
- ],
822
- "variants": {
823
- "textareaVariants": {
824
- "axes": {
825
- "size": [
826
- "sm",
827
- "default",
828
- "lg"
829
- ]
830
- },
831
- "defaults": {
832
- "size": "default"
833
- }
834
- }
548
+ "itemMediaVariants": {
549
+ "axes": {
550
+ "variant": [
551
+ "default",
552
+ "icon",
553
+ "image"
554
+ ]
555
+ },
556
+ "defaults": {
557
+ "variant": "default"
835
558
  }
836
559
  },
837
- {
838
- "name": "tooltip",
839
- "import": "@archetypeai/ds-ui-svelte-console/primitives/tooltip",
840
- "source": "https://design-system-console.archetypeai.workers.dev/r/tooltip.json",
841
- "dependencies": [
842
- "bits-ui",
843
- "tailwind-variants"
844
- ],
845
- "variants": {
846
- "tooltipTriggerVariants": {
847
- "axes": {
848
- "variant": [
849
- "default",
850
- "info",
851
- "inlineLink"
852
- ]
853
- },
854
- "defaults": {
855
- "variant": "default"
856
- }
857
- }
560
+ "itemStatusVariants": {
561
+ "axes": {
562
+ "phase": [
563
+ "default",
564
+ "pending",
565
+ "uploading",
566
+ "complete",
567
+ "error"
568
+ ],
569
+ "visibility": [
570
+ "default",
571
+ "idleOnly"
572
+ ]
573
+ },
574
+ "defaults": {
575
+ "phase": "default",
576
+ "visibility": "default"
858
577
  }
859
578
  }
579
+ }
580
+ },
581
+ {
582
+ "name": "kbd",
583
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/kbd",
584
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/kbd.json",
585
+ "description": "Keyboard-shortcut display.",
586
+ "usage": [
587
+ "`Kbd.Group` holding one `Kbd.Root` per key (⌘ K, Ctrl Shift P)."
860
588
  ]
861
589
  },
862
- "labs": {
863
- "package": "@archetypeai/ds-ui-svelte-labs",
864
- "version": "0.9.0",
865
- "registry": "https://design-system-labs.archetypeai.workers.dev/r/{name}.json",
866
- "stability": "experimental — 0.x, depends on the console package",
867
- "components": [
868
- {
869
- "name": "labs-utils",
870
- "title": "Labs Utils",
871
- "description": "Labs domain helpers plus className merge re-exported from console. Named labs-utils because the shadcn-svelte CLI redirects an item named utils to the consumer's utils alias, breaking relative imports.",
872
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/utils",
873
- "source": "https://design-system-labs.archetypeai.workers.dev/r/labs-utils.json",
874
- "dependencies": [
875
- "@archetypeai/ds-ui-svelte-console"
876
- ]
877
- },
878
- {
879
- "name": "aspect-ratio",
880
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/aspect-ratio",
881
- "source": "https://design-system-labs.archetypeai.workers.dev/r/aspect-ratio.json",
882
- "dependencies": [
883
- "bits-ui"
884
- ]
885
- },
886
- {
887
- "name": "chart",
888
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/chart",
889
- "source": "https://design-system-labs.archetypeai.workers.dev/r/chart.json",
890
- "dependencies": [
891
- "layerchart@2.0.0-next.46",
892
- "tailwind-variants"
893
- ]
894
- },
895
- {
896
- "name": "kbd",
897
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/kbd",
898
- "source": "https://design-system-labs.archetypeai.workers.dev/r/kbd.json",
899
- "dependencies": [
900
- "tailwind-variants"
901
- ]
902
- },
903
- {
904
- "name": "logo",
905
- "title": "Logo",
906
- "description": "Archetype AI brand logo mark.",
907
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/logo",
908
- "source": "https://design-system-labs.archetypeai.workers.dev/r/logo.json",
909
- "dependencies": [
910
- "tailwind-variants"
911
- ],
912
- "variants": {
913
- "logoVariants": {
914
- "axes": {
915
- "size": [
916
- "sm",
917
- "default",
918
- "lg"
919
- ]
920
- },
921
- "defaults": {
922
- "size": "default"
923
- }
924
- }
590
+ {
591
+ "name": "label",
592
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/label",
593
+ "source": "https://design-system-console.archetypeai.workers.dev/r/label.json",
594
+ "description": "Text label for form fields, sections, and headings.",
595
+ "usage": [
596
+ "`variant=\"sectionHeader\"` — the ubiquitous mono uppercase heading above values and form sections, in card content and collapsible triggers.",
597
+ "`variant=\"tableColumnHeader\"` — dashboard table/list column headers; `variant=\"selectionSubHeader\"` — sub-header over selection rows in pickers.",
598
+ "`variant=\"fieldError\"` — validation error under a field; `variant=\"workbenchHeader\"` — workbench panel headers; `variant=\"pagination\"` — 'Page X of Y'.",
599
+ "default variant + for= on form inputs."
600
+ ],
601
+ "variants": {
602
+ "labelVariants": {
603
+ "axes": {
604
+ "variant": [
605
+ "default",
606
+ "pagination",
607
+ "destructive",
608
+ "fieldError",
609
+ "sectionHeader",
610
+ "tableColumnHeader",
611
+ "workbenchHeader",
612
+ "responseCaption",
613
+ "selectionSubHeader"
614
+ ]
615
+ },
616
+ "defaults": {
617
+ "variant": "default"
618
+ }
619
+ }
620
+ }
621
+ },
622
+ {
623
+ "name": "labs-utils",
624
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/utils",
625
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/labs-utils.json",
626
+ "description": "Labs domain helpers plus cn() re-exported from console."
627
+ },
628
+ {
629
+ "name": "loading-bar",
630
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/loading-bar",
631
+ "source": "https://design-system-console.archetypeai.workers.dev/r/loading-bar.json",
632
+ "description": "Indeterminate loading bar for route/navigation transitions.",
633
+ "usage": [
634
+ "Mount once in the root layout and gate on navigation: `{#if navigating.to}<LoadingBar />{/if}` (SvelteKit `navigating` from `$app/state`). Presentational only — it does not read navigation state itself.",
635
+ "`position=\"bottom\"` pins it to the viewport bottom; always fixed + full-width. Indeterminate only — for a determinate value bar use `progress`."
636
+ ],
637
+ "variants": {
638
+ "loadingBarVariants": {
639
+ "axes": {
640
+ "position": [
641
+ "top",
642
+ "bottom"
643
+ ]
644
+ },
645
+ "defaults": {
646
+ "position": "top"
647
+ }
648
+ }
649
+ }
650
+ },
651
+ {
652
+ "name": "logo",
653
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/logo",
654
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/logo.json",
655
+ "description": "Archetype AI brand logo mark.",
656
+ "usage": [
657
+ "Headers: `<Logo class=\"h-6 w-auto\" />` next to the app title; sizes sm | default | lg."
658
+ ],
659
+ "variants": {
660
+ "logoVariants": {
661
+ "axes": {
662
+ "size": [
663
+ "sm",
664
+ "default",
665
+ "lg"
666
+ ]
667
+ },
668
+ "defaults": {
669
+ "size": "default"
670
+ }
671
+ }
672
+ }
673
+ },
674
+ {
675
+ "name": "menubar",
676
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/menubar",
677
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/menubar.json",
678
+ "description": "Branded app header with logo, partner-logo slot, action children, and built-in dark-mode toggle.",
679
+ "usage": [
680
+ "Top of every dashboard shell; children render as right-side actions — `Button variant=\"link\" class=\"text-muted-foreground no-underline hover:underline\"`."
681
+ ]
682
+ },
683
+ {
684
+ "name": "progress",
685
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/progress",
686
+ "source": "https://design-system-console.archetypeai.workers.dev/r/progress.json",
687
+ "description": "Determinate progress bar.",
688
+ "usage": [
689
+ "Pair with a large mono readout: `<span class=\"font-mono text-4xl\">{value}</span><span class=\"text-muted-foreground text-sm\">%</span>` beside the bar.",
690
+ "`size=\"sm\"` for compact/inline progress (upload rows); always aria-label."
691
+ ],
692
+ "variants": {
693
+ "progressVariants": {
694
+ "axes": {
695
+ "size": [
696
+ "default",
697
+ "sm"
698
+ ]
699
+ },
700
+ "defaults": {
701
+ "size": "default"
925
702
  }
926
703
  },
927
- {
928
- "name": "menubar",
929
- "title": "Menubar",
930
- "description": "Branded app header with logo, partner logo slot, action children, and dark mode toggle.",
931
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/menubar",
932
- "source": "https://design-system-labs.archetypeai.workers.dev/r/menubar.json",
933
- "dependencies": [
934
- "@lucide/svelte",
935
- "@archetypeai/ds-ui-svelte-console",
936
- "tailwind-variants"
937
- ]
938
- },
939
- {
940
- "name": "scatter-chart",
941
- "title": "Scatter Chart",
942
- "description": "Scatter plot card with category grouping and sliding-window streaming. Composes BackgroundCard + Chart.",
943
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart",
944
- "source": "https://design-system-labs.archetypeai.workers.dev/r/scatter-chart.json",
945
- "dependencies": [
946
- "layerchart@2.0.0-next.46",
947
- "d3-scale",
948
- "tailwind-variants"
949
- ]
950
- },
951
- {
952
- "name": "sensor-chart",
953
- "title": "Sensor Chart",
954
- "description": "Time-series line chart card with multi-signal and sliding-window streaming. Composes BackgroundCard + Chart.",
955
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart",
956
- "source": "https://design-system-labs.archetypeai.workers.dev/r/sensor-chart.json",
957
- "dependencies": [
958
- "layerchart@2.0.0-next.46",
959
- "d3-scale",
960
- "d3-shape",
961
- "tailwind-variants"
962
- ]
704
+ "progressIndicatorVariants": {
705
+ "axes": {
706
+ "variant": [
707
+ "default",
708
+ "success",
709
+ "critical"
710
+ ]
711
+ },
712
+ "defaults": {
713
+ "variant": "default"
714
+ }
715
+ }
716
+ }
717
+ },
718
+ {
719
+ "name": "scatter-chart",
720
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart",
721
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/scatter-chart.json",
722
+ "description": "Scatter-plot card for embeddings and cluster views; composes BackgroundCard + Chart.",
723
+ "usage": [
724
+ "`<ScatterChart title icon data categoryKey=\"cluster\" categories={{ q1: 'Cluster A', … }} xMin xMax yMin yMax xTicks yTicks />` — data rows are { x, y, <categoryKey> }; categories map drives legend + series colors.",
725
+ "Streaming: append rows and set `maxPoints` for a sliding window."
726
+ ]
727
+ },
728
+ {
729
+ "name": "select",
730
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/select",
731
+ "source": "https://design-system-console.archetypeai.workers.dev/r/select.json",
732
+ "description": "Single-choice dropdown (bits-ui).",
733
+ "usage": [
734
+ "`Select.Root type=\"single\" bind:value` + `Select.Trigger variant=\"input\"` in forms; render a $derived label with a 'Select a …' fallback as trigger text.",
735
+ "`Select.Content > Select.Group > Select.Item value label` per option; default trigger variant in toolbars/headers."
736
+ ],
737
+ "variants": {
738
+ "selectTriggerVariants": {
739
+ "axes": {
740
+ "variant": [
741
+ "default",
742
+ "ghost",
743
+ "input"
744
+ ],
745
+ "size": [
746
+ "default",
747
+ "sm"
748
+ ],
749
+ "typography": [
750
+ "default",
751
+ "mono"
752
+ ]
753
+ },
754
+ "defaults": {
755
+ "variant": "default",
756
+ "size": "default",
757
+ "typography": "default"
758
+ }
963
759
  },
964
- {
965
- "name": "slider",
966
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/slider",
967
- "source": "https://design-system-labs.archetypeai.workers.dev/r/slider.json",
968
- "dependencies": [
969
- "bits-ui",
970
- "tailwind-variants"
971
- ]
760
+ "selectItemVariants": {
761
+ "axes": {
762
+ "typography": [
763
+ "default",
764
+ "mono"
765
+ ]
766
+ },
767
+ "defaults": {
768
+ "typography": "default"
769
+ }
972
770
  },
973
- {
974
- "name": "switch",
975
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/switch",
976
- "source": "https://design-system-labs.archetypeai.workers.dev/r/switch.json",
977
- "dependencies": [
978
- "bits-ui",
979
- "tailwind-variants"
980
- ],
981
- "variants": {
982
- "switchVariants": {
983
- "axes": {
984
- "size": [
985
- "sm",
986
- "default",
987
- "lg"
988
- ]
989
- },
990
- "defaults": {
991
- "size": "default"
992
- }
993
- },
994
- "switchThumbVariants": {
995
- "axes": {
996
- "size": [
997
- "sm",
998
- "default",
999
- "lg"
1000
- ]
1001
- },
1002
- "defaults": {
1003
- "size": "default"
1004
- }
1005
- }
771
+ "selectContentVariants": {
772
+ "axes": {
773
+ "size": [
774
+ "default",
775
+ "sm"
776
+ ]
777
+ },
778
+ "defaults": {
779
+ "size": "default"
780
+ }
781
+ }
782
+ }
783
+ },
784
+ {
785
+ "name": "sensor-chart",
786
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart",
787
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/sensor-chart.json",
788
+ "description": "Time-series line-chart card with multi-signal support and sliding-window streaming; composes BackgroundCard + Chart.",
789
+ "usage": [
790
+ "`<SensorChart title=\"ACCELERATION SENSOR\" icon={AudioWaveformIcon} data={rows} signals={{ accel_x: 'Accel X', … }} yMin yMax yTicks />` — data rows are { timestamp: Date, <signalKey>: number }.",
791
+ "Streaming: append rows and set `maxPoints` (sliding window); `axis=\"y\"` hides the time axis while streaming."
792
+ ]
793
+ },
794
+ {
795
+ "name": "separator",
796
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/separator",
797
+ "source": "https://design-system-console.archetypeai.workers.dev/r/separator.json",
798
+ "description": "Hairline divider.",
799
+ "usage": [
800
+ "Horizontal between stacked sections; `orientation=\"vertical\"` in multi-column layouts."
801
+ ]
802
+ },
803
+ {
804
+ "name": "slider",
805
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/slider",
806
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/slider.json",
807
+ "description": "Range slider (bits-ui).",
808
+ "usage": [
809
+ "`<Slider type=\"single\" bind:value max={100} step={1} aria-label=\"…\" />`; also the scrub control inside video-player."
810
+ ]
811
+ },
812
+ {
813
+ "name": "sonner",
814
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/sonner",
815
+ "source": "https://design-system-console.archetypeai.workers.dev/r/sonner.json",
816
+ "description": "Toast notifications (svelte-sonner themed for the DS).",
817
+ "usage": [
818
+ "Mount `<Toaster />` once at the app root; fire `toast.success('3 files uploaded')` / `toast.error(...)` from anywhere, `{ description }` for a second line."
819
+ ]
820
+ },
821
+ {
822
+ "name": "spinner",
823
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/spinner",
824
+ "source": "https://design-system-console.archetypeai.workers.dev/r/spinner.json",
825
+ "description": "Loading indicator.",
826
+ "usage": [
827
+ "`size=\"lg\"` in upload/empty panels; default size with `class=\"size-4\"` for inline row/status loaders; `variant=\"braille\"` for terminal-style loaders; Button embeds it via its `loading` prop."
828
+ ],
829
+ "variants": {
830
+ "spinnerVariants": {
831
+ "axes": {
832
+ "variant": [
833
+ "default",
834
+ "braille"
835
+ ],
836
+ "size": [
837
+ "default",
838
+ "md",
839
+ "lg"
840
+ ]
841
+ },
842
+ "defaults": {
843
+ "variant": "default",
844
+ "size": "default"
845
+ }
846
+ }
847
+ }
848
+ },
849
+ {
850
+ "name": "switch",
851
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/switch",
852
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/switch.json",
853
+ "description": "On/off toggle switch (bits-ui).",
854
+ "usage": [
855
+ "`bind:checked` + aria-label; sizes sm | default | lg."
856
+ ],
857
+ "variants": {
858
+ "switchVariants": {
859
+ "axes": {
860
+ "size": [
861
+ "sm",
862
+ "default",
863
+ "lg"
864
+ ]
865
+ },
866
+ "defaults": {
867
+ "size": "default"
1006
868
  }
1007
869
  },
1008
- {
1009
- "name": "toggle",
1010
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/toggle",
1011
- "source": "https://design-system-labs.archetypeai.workers.dev/r/toggle.json",
1012
- "dependencies": [
1013
- "bits-ui",
1014
- "tailwind-variants"
1015
- ],
1016
- "variants": {
1017
- "toggleVariants": {
1018
- "axes": {
1019
- "variant": [
1020
- "default",
1021
- "outline"
1022
- ],
1023
- "size": [
1024
- "default",
1025
- "sm",
1026
- "lg"
1027
- ]
1028
- },
1029
- "defaults": {
1030
- "variant": "default",
1031
- "size": "default"
1032
- }
1033
- }
870
+ "switchThumbVariants": {
871
+ "axes": {
872
+ "size": [
873
+ "sm",
874
+ "default",
875
+ "lg"
876
+ ]
877
+ },
878
+ "defaults": {
879
+ "size": "default"
880
+ }
881
+ }
882
+ }
883
+ },
884
+ {
885
+ "name": "table",
886
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/table",
887
+ "source": "https://design-system-console.archetypeai.workers.dev/r/table.json",
888
+ "description": "Data table.",
889
+ "usage": [
890
+ "Log/event tables: width-classed Table.Head columns, `Table.Body class=\"font-sans text-xs\"`, level cells colored with status tokens (text-atai-critical for error rows).",
891
+ "Mono body (`typography=\"mono\"` on Table.Body) for id-heavy tables; pair with `EmptyState variant=\"list\"` when empty."
892
+ ],
893
+ "variants": {
894
+ "tableBodyVariants": {
895
+ "axes": {
896
+ "typography": [
897
+ "default",
898
+ "mono"
899
+ ]
900
+ },
901
+ "defaults": {
902
+ "typography": "default"
903
+ }
904
+ }
905
+ }
906
+ },
907
+ {
908
+ "name": "tabs",
909
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/tabs",
910
+ "source": "https://design-system-console.archetypeai.workers.dev/r/tabs.json",
911
+ "description": "View and section switcher.",
912
+ "usage": [
913
+ "Icon view toggle (list/grid): `Tabs.List variant=\"toggle\"` + `Tabs.Trigger variant=\"icon\"` with an icon + title.",
914
+ "Segmented source switch (Library | File IDs | Upload): `variant=\"toggle\"` list + triggers `size=\"pill\" typography=\"mono\"`.",
915
+ "Page-section tabs (Progress | Logs | Artifacts): `Tabs.List variant=\"line\"` with plain text triggers; always `Tabs.Root bind:value`."
916
+ ],
917
+ "variants": {
918
+ "tabsListVariants": {
919
+ "axes": {
920
+ "variant": [
921
+ "default",
922
+ "line",
923
+ "toggle"
924
+ ]
925
+ },
926
+ "defaults": {
927
+ "variant": "default"
1034
928
  }
1035
929
  },
1036
- {
1037
- "name": "video-player",
1038
- "title": "Video Player",
1039
- "description": "Media playback card with controls and aspect ratio. Composes Card + AspectRatio + Button + Slider.",
1040
- "import": "@archetypeai/ds-ui-svelte-labs/primitives/video-player",
1041
- "source": "https://design-system-labs.archetypeai.workers.dev/r/video-player.json",
1042
- "dependencies": [
1043
- "@lucide/svelte",
1044
- "@archetypeai/ds-ui-svelte-console",
1045
- "tailwind-variants"
1046
- ],
1047
- "variants": {
1048
- "videoPlayerOverlayVariants": {
1049
- "axes": {
1050
- "visible": [
1051
- "true",
1052
- "false"
1053
- ]
1054
- },
1055
- "defaults": {
1056
- "visible": "true"
1057
- }
1058
- },
1059
- "videoPlayerControlsVariants": {
1060
- "axes": {
1061
- "visible": [
1062
- "true",
1063
- "false"
1064
- ]
1065
- },
1066
- "defaults": {
1067
- "visible": "true"
1068
- }
1069
- }
930
+ "tabsTriggerVariants": {
931
+ "axes": {
932
+ "variant": [
933
+ "text",
934
+ "icon"
935
+ ],
936
+ "size": [
937
+ "default",
938
+ "pill"
939
+ ],
940
+ "typography": [
941
+ "default",
942
+ "mono"
943
+ ]
944
+ },
945
+ "defaults": {
946
+ "variant": "text",
947
+ "size": "default",
948
+ "typography": "default"
1070
949
  }
1071
950
  }
951
+ }
952
+ },
953
+ {
954
+ "name": "textarea",
955
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/textarea",
956
+ "source": "https://design-system-console.archetypeai.workers.dev/r/textarea.json",
957
+ "description": "Multi-line text input.",
958
+ "usage": [
959
+ "Feedback/description fields under a Label sectionHeader; bind:value + placeholder."
960
+ ],
961
+ "variants": {
962
+ "textareaVariants": {
963
+ "axes": {
964
+ "size": [
965
+ "sm",
966
+ "default",
967
+ "lg"
968
+ ]
969
+ },
970
+ "defaults": {
971
+ "size": "default"
972
+ }
973
+ }
974
+ }
975
+ },
976
+ {
977
+ "name": "theme",
978
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/theme",
979
+ "source": "https://design-system-console.archetypeai.workers.dev/r/theme.json",
980
+ "description": "darkMode singleton controller syncing the `dark` class on <html>.",
981
+ "usage": [
982
+ "`darkMode.set(window.matchMedia('(prefers-color-scheme: dark)').matches)` on startup; `darkMode.toggle()` from a menu item or icon button; `darkMode.current` for reactive reads."
1072
983
  ]
984
+ },
985
+ {
986
+ "name": "toggle",
987
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/toggle",
988
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/toggle.json",
989
+ "description": "Pressed-state button (bits-ui).",
990
+ "usage": [
991
+ "Icon-only by default (aria-label required); `variant=\"outline\"` for icon + text."
992
+ ],
993
+ "variants": {
994
+ "toggleVariants": {
995
+ "axes": {
996
+ "variant": [
997
+ "default",
998
+ "outline"
999
+ ],
1000
+ "size": [
1001
+ "default",
1002
+ "sm",
1003
+ "lg"
1004
+ ]
1005
+ },
1006
+ "defaults": {
1007
+ "variant": "default",
1008
+ "size": "default"
1009
+ }
1010
+ }
1011
+ }
1012
+ },
1013
+ {
1014
+ "name": "tooltip",
1015
+ "import": "@archetypeai/ds-ui-svelte-console/primitives/tooltip",
1016
+ "source": "https://design-system-console.archetypeai.workers.dev/r/tooltip.json",
1017
+ "description": "Hover hint.",
1018
+ "usage": [
1019
+ "Wrap the app/section in `Tooltip.Provider delayDuration={200}`.",
1020
+ "Field help: `Tooltip.Trigger variant=\"info\"` holding an InfoIcon placed next to a Label sectionHeader, explanation in Tooltip.Content.",
1021
+ "`variant=\"inlineLink\"` — underlined trigger flowing inside prose (supported file requirements)."
1022
+ ],
1023
+ "variants": {
1024
+ "tooltipTriggerVariants": {
1025
+ "axes": {
1026
+ "variant": [
1027
+ "default",
1028
+ "info",
1029
+ "inlineLink"
1030
+ ]
1031
+ },
1032
+ "defaults": {
1033
+ "variant": "default"
1034
+ }
1035
+ }
1036
+ }
1037
+ },
1038
+ {
1039
+ "name": "video-player",
1040
+ "import": "@archetypeai/ds-ui-svelte-labs/primitives/video-player",
1041
+ "source": "https://design-system-labs.archetypeai.workers.dev/r/video-player.json",
1042
+ "description": "Media-playback card with controls and aspect ratio; composes Card + AspectRatio + Button + Slider.",
1043
+ "usage": [
1044
+ "`<VideoPlayer src muted />` for the standard controlled player; `controls={false}` for ambient/looping footage."
1045
+ ],
1046
+ "variants": {
1047
+ "videoPlayerOverlayVariants": {
1048
+ "axes": {
1049
+ "visible": [
1050
+ "true",
1051
+ "false"
1052
+ ]
1053
+ },
1054
+ "defaults": {
1055
+ "visible": "true"
1056
+ }
1057
+ },
1058
+ "videoPlayerControlsVariants": {
1059
+ "axes": {
1060
+ "visible": [
1061
+ "true",
1062
+ "false"
1063
+ ]
1064
+ },
1065
+ "defaults": {
1066
+ "visible": "true"
1067
+ }
1068
+ }
1069
+ }
1073
1070
  }
1074
- }
1071
+ ]
1075
1072
  }