@archetypeai/ds-cli 0.9.0 → 0.10.0
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.
- package/README.md +3 -3
- package/commands/create.js +2 -2
- package/commands/init.js +2 -2
- package/files/AGENTS.md +128 -70
- package/files/CLAUDE.md +128 -70
- package/files/ds-manifest.json +998 -1023
- package/lib/add-ds-config-codeagent.js +3 -57
- package/package.json +2 -2
- package/files/LICENSE +0 -21
- package/files/rules/accessibility.md +0 -268
- package/files/rules/charts.md +0 -256
- package/files/rules/components.md +0 -251
- package/files/rules/design-principles.md +0 -71
- package/files/rules/frontend-architecture.md +0 -86
- package/files/rules/linting.md +0 -31
- package/files/rules/state.md +0 -373
- package/files/rules/styling.md +0 -142
- package/files/skills/apply-ds/SKILL.md +0 -121
- package/files/skills/apply-ds/scripts/audit.sh +0 -169
- package/files/skills/apply-ds/scripts/setup.sh +0 -153
- package/files/skills/build-component/SKILL.md +0 -153
- package/files/skills/create-dashboard/SKILL.md +0 -220
- package/files/skills/deploy-worker/SKILL.md +0 -231
- package/files/skills/deploy-worker/references/wrangler-commands.md +0 -327
- package/files/skills/fix-accessibility/SKILL.md +0 -232
- package/files/skills/fix-metadata/SKILL.md +0 -118
- package/files/skills/fix-metadata/assets/favicon.ico +0 -0
- package/files/skills/setup-chart/SKILL.md +0 -223
- package/files/skills/setup-chart/data/embedding.csv +0 -42
- package/files/skills/setup-chart/data/timeseries.csv +0 -173
- package/files/skills/setup-chart/references/scatter-chart.md +0 -229
- package/files/skills/setup-chart/references/sensor-chart.md +0 -156
package/files/ds-manifest.json
CHANGED
|
@@ -1,1074 +1,1049 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "archetypeai-design-system",
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
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.0",
|
|
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
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
"
|
|
139
|
-
|
|
140
|
-
"size": "default",
|
|
141
|
-
"typography": "default",
|
|
142
|
-
"visibility": "default",
|
|
143
|
-
"width": "default",
|
|
144
|
-
"justify": "default"
|
|
145
|
-
}
|
|
146
|
-
}
|
|
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
|
+
]
|
|
147
120
|
},
|
|
148
|
-
"
|
|
149
|
-
"
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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"
|
|
158
150
|
]
|
|
151
|
+
},
|
|
152
|
+
"defaults": {
|
|
153
|
+
"variant": "default"
|
|
159
154
|
}
|
|
160
155
|
},
|
|
161
|
-
{
|
|
162
|
-
"
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
],
|
|
168
|
-
"variants": {
|
|
169
|
-
"cardVariants": {
|
|
170
|
-
"axes": {
|
|
171
|
-
"variant": [
|
|
172
|
-
"default",
|
|
173
|
-
"intro",
|
|
174
|
-
"status",
|
|
175
|
-
"info"
|
|
176
|
-
]
|
|
177
|
-
},
|
|
178
|
-
"defaults": {
|
|
179
|
-
"variant": "default"
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
"cardContentVariants": {
|
|
183
|
-
"axes": {
|
|
184
|
-
"layout": [
|
|
185
|
-
"stack",
|
|
186
|
-
"compact"
|
|
187
|
-
]
|
|
188
|
-
}
|
|
189
|
-
}
|
|
156
|
+
"cardContentVariants": {
|
|
157
|
+
"axes": {
|
|
158
|
+
"layout": [
|
|
159
|
+
"stack",
|
|
160
|
+
"compact"
|
|
161
|
+
]
|
|
190
162
|
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
"
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
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"
|
|
240
219
|
}
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
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"
|
|
263
248
|
}
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
"
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
"
|
|
294
|
-
"axes": {
|
|
295
|
-
"variant": [
|
|
296
|
-
"default",
|
|
297
|
-
"destructive"
|
|
298
|
-
],
|
|
299
|
-
"inset": [
|
|
300
|
-
"true",
|
|
301
|
-
"false"
|
|
302
|
-
],
|
|
303
|
-
"typography": [
|
|
304
|
-
"default",
|
|
305
|
-
"mono"
|
|
306
|
-
],
|
|
307
|
-
"justify": [
|
|
308
|
-
"default",
|
|
309
|
-
"between"
|
|
310
|
-
]
|
|
311
|
-
},
|
|
312
|
-
"defaults": {
|
|
313
|
-
"variant": "default",
|
|
314
|
-
"inset": "false",
|
|
315
|
-
"typography": "default",
|
|
316
|
-
"justify": "default"
|
|
317
|
-
}
|
|
318
|
-
},
|
|
319
|
-
"dropdownMenuSubTriggerVariants": {
|
|
320
|
-
"axes": {
|
|
321
|
-
"inset": [
|
|
322
|
-
"true",
|
|
323
|
-
"false"
|
|
324
|
-
]
|
|
325
|
-
},
|
|
326
|
-
"defaults": {
|
|
327
|
-
"inset": "false"
|
|
328
|
-
}
|
|
329
|
-
},
|
|
330
|
-
"dropdownMenuLabelVariants": {
|
|
331
|
-
"axes": {
|
|
332
|
-
"inset": [
|
|
333
|
-
"true",
|
|
334
|
-
"false"
|
|
335
|
-
]
|
|
336
|
-
},
|
|
337
|
-
"defaults": {
|
|
338
|
-
"inset": "false"
|
|
339
|
-
}
|
|
340
|
-
},
|
|
341
|
-
"dropdownMenuGroupHeadingVariants": {
|
|
342
|
-
"axes": {
|
|
343
|
-
"inset": [
|
|
344
|
-
"true",
|
|
345
|
-
"false"
|
|
346
|
-
]
|
|
347
|
-
},
|
|
348
|
-
"defaults": {
|
|
349
|
-
"inset": "false"
|
|
350
|
-
}
|
|
351
|
-
}
|
|
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"
|
|
352
279
|
}
|
|
353
280
|
},
|
|
354
|
-
{
|
|
355
|
-
"
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
"
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
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"
|
|
374
305
|
}
|
|
375
306
|
},
|
|
376
|
-
{
|
|
377
|
-
"
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
"
|
|
384
|
-
"
|
|
385
|
-
"axes": {
|
|
386
|
-
"variant": [
|
|
387
|
-
"default",
|
|
388
|
-
"list"
|
|
389
|
-
]
|
|
390
|
-
},
|
|
391
|
-
"defaults": {
|
|
392
|
-
"variant": "default"
|
|
393
|
-
}
|
|
394
|
-
}
|
|
307
|
+
"dropdownMenuSubTriggerVariants": {
|
|
308
|
+
"axes": {
|
|
309
|
+
"inset": [
|
|
310
|
+
"true",
|
|
311
|
+
"false"
|
|
312
|
+
]
|
|
313
|
+
},
|
|
314
|
+
"defaults": {
|
|
315
|
+
"inset": "false"
|
|
395
316
|
}
|
|
396
317
|
},
|
|
397
|
-
{
|
|
398
|
-
"
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
"inputVariants": {
|
|
407
|
-
"axes": {
|
|
408
|
-
"variant": [
|
|
409
|
-
"default",
|
|
410
|
-
"search",
|
|
411
|
-
"login",
|
|
412
|
-
"filter"
|
|
413
|
-
],
|
|
414
|
-
"size": [
|
|
415
|
-
"sm",
|
|
416
|
-
"default"
|
|
417
|
-
]
|
|
418
|
-
},
|
|
419
|
-
"defaults": {
|
|
420
|
-
"variant": "default",
|
|
421
|
-
"size": "default"
|
|
422
|
-
}
|
|
423
|
-
}
|
|
318
|
+
"dropdownMenuLabelVariants": {
|
|
319
|
+
"axes": {
|
|
320
|
+
"inset": [
|
|
321
|
+
"true",
|
|
322
|
+
"false"
|
|
323
|
+
]
|
|
324
|
+
},
|
|
325
|
+
"defaults": {
|
|
326
|
+
"inset": "false"
|
|
424
327
|
}
|
|
425
328
|
},
|
|
426
|
-
{
|
|
427
|
-
"
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
"
|
|
434
|
-
"
|
|
435
|
-
"axes": {
|
|
436
|
-
"variant": [
|
|
437
|
-
"default",
|
|
438
|
-
"login",
|
|
439
|
-
"form"
|
|
440
|
-
],
|
|
441
|
-
"width": [
|
|
442
|
-
"default",
|
|
443
|
-
"fit",
|
|
444
|
-
"full"
|
|
445
|
-
]
|
|
446
|
-
},
|
|
447
|
-
"defaults": {
|
|
448
|
-
"variant": "default",
|
|
449
|
-
"width": "full"
|
|
450
|
-
}
|
|
451
|
-
},
|
|
452
|
-
"inputGroupAddonVariants": {
|
|
453
|
-
"axes": {
|
|
454
|
-
"align": [
|
|
455
|
-
"inline-start",
|
|
456
|
-
"inline-end",
|
|
457
|
-
"block-start",
|
|
458
|
-
"block-end"
|
|
459
|
-
]
|
|
460
|
-
},
|
|
461
|
-
"defaults": {
|
|
462
|
-
"align": "inline-start"
|
|
463
|
-
}
|
|
464
|
-
},
|
|
465
|
-
"inputGroupButtonVariants": {
|
|
466
|
-
"axes": {
|
|
467
|
-
"size": [
|
|
468
|
-
"xs",
|
|
469
|
-
"sm",
|
|
470
|
-
"icon-xs",
|
|
471
|
-
"icon-sm"
|
|
472
|
-
]
|
|
473
|
-
},
|
|
474
|
-
"defaults": {
|
|
475
|
-
"size": "xs"
|
|
476
|
-
}
|
|
477
|
-
}
|
|
329
|
+
"dropdownMenuGroupHeadingVariants": {
|
|
330
|
+
"axes": {
|
|
331
|
+
"inset": [
|
|
332
|
+
"true",
|
|
333
|
+
"false"
|
|
334
|
+
]
|
|
335
|
+
},
|
|
336
|
+
"defaults": {
|
|
337
|
+
"inset": "false"
|
|
478
338
|
}
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
],
|
|
503
|
-
"phase": [
|
|
504
|
-
"default",
|
|
505
|
-
"pending",
|
|
506
|
-
"uploading",
|
|
507
|
-
"complete",
|
|
508
|
-
"error"
|
|
509
|
-
],
|
|
510
|
-
"dimmed": [
|
|
511
|
-
"off",
|
|
512
|
-
"on"
|
|
513
|
-
]
|
|
514
|
-
},
|
|
515
|
-
"defaults": {
|
|
516
|
-
"variant": "default",
|
|
517
|
-
"size": "default",
|
|
518
|
-
"phase": "default",
|
|
519
|
-
"dimmed": "off"
|
|
520
|
-
}
|
|
521
|
-
},
|
|
522
|
-
"itemColumnVariants": {
|
|
523
|
-
"axes": {
|
|
524
|
-
"column": [
|
|
525
|
-
"grow",
|
|
526
|
-
"wide",
|
|
527
|
-
"mid",
|
|
528
|
-
"status"
|
|
529
|
-
],
|
|
530
|
-
"typography": [
|
|
531
|
-
"default",
|
|
532
|
-
"mono"
|
|
533
|
-
]
|
|
534
|
-
},
|
|
535
|
-
"defaults": {
|
|
536
|
-
"column": "grow",
|
|
537
|
-
"typography": "default"
|
|
538
|
-
}
|
|
539
|
-
},
|
|
540
|
-
"itemContentVariants": {
|
|
541
|
-
"axes": {
|
|
542
|
-
"typography": [
|
|
543
|
-
"default",
|
|
544
|
-
"mono"
|
|
545
|
-
]
|
|
546
|
-
},
|
|
547
|
-
"defaults": {
|
|
548
|
-
"typography": "default"
|
|
549
|
-
}
|
|
550
|
-
},
|
|
551
|
-
"itemMediaVariants": {
|
|
552
|
-
"axes": {
|
|
553
|
-
"variant": [
|
|
554
|
-
"default",
|
|
555
|
-
"icon",
|
|
556
|
-
"image"
|
|
557
|
-
]
|
|
558
|
-
},
|
|
559
|
-
"defaults": {
|
|
560
|
-
"variant": "default"
|
|
561
|
-
}
|
|
562
|
-
},
|
|
563
|
-
"itemStatusVariants": {
|
|
564
|
-
"axes": {
|
|
565
|
-
"phase": [
|
|
566
|
-
"default",
|
|
567
|
-
"pending",
|
|
568
|
-
"uploading",
|
|
569
|
-
"complete",
|
|
570
|
-
"error"
|
|
571
|
-
],
|
|
572
|
-
"visibility": [
|
|
573
|
-
"default",
|
|
574
|
-
"idleOnly"
|
|
575
|
-
]
|
|
576
|
-
},
|
|
577
|
-
"defaults": {
|
|
578
|
-
"phase": "default",
|
|
579
|
-
"visibility": "default"
|
|
580
|
-
}
|
|
581
|
-
}
|
|
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"
|
|
582
362
|
}
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
]
|
|
606
|
-
},
|
|
607
|
-
"defaults": {
|
|
608
|
-
"variant": "default"
|
|
609
|
-
}
|
|
610
|
-
}
|
|
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"
|
|
611
385
|
}
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
"
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
"
|
|
634
|
-
"
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
"defaults": {
|
|
642
|
-
"variant": "default"
|
|
643
|
-
}
|
|
644
|
-
}
|
|
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"
|
|
645
415
|
}
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
"variant": "default",
|
|
675
|
-
"size": "default",
|
|
676
|
-
"typography": "default"
|
|
677
|
-
}
|
|
678
|
-
},
|
|
679
|
-
"selectItemVariants": {
|
|
680
|
-
"axes": {
|
|
681
|
-
"typography": [
|
|
682
|
-
"default",
|
|
683
|
-
"mono"
|
|
684
|
-
]
|
|
685
|
-
},
|
|
686
|
-
"defaults": {
|
|
687
|
-
"typography": "default"
|
|
688
|
-
}
|
|
689
|
-
},
|
|
690
|
-
"selectContentVariants": {
|
|
691
|
-
"axes": {
|
|
692
|
-
"size": [
|
|
693
|
-
"default",
|
|
694
|
-
"sm"
|
|
695
|
-
]
|
|
696
|
-
},
|
|
697
|
-
"defaults": {
|
|
698
|
-
"size": "default"
|
|
699
|
-
}
|
|
700
|
-
}
|
|
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"
|
|
701
444
|
}
|
|
702
445
|
},
|
|
703
|
-
{
|
|
704
|
-
"
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
"source": "https://design-system-console.archetypeai.workers.dev/r/sonner.json",
|
|
716
|
-
"dependencies": [
|
|
717
|
-
"svelte-sonner",
|
|
718
|
-
"tailwind-variants"
|
|
719
|
-
]
|
|
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
|
+
}
|
|
720
458
|
},
|
|
721
|
-
{
|
|
722
|
-
"
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
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"
|
|
747
517
|
}
|
|
748
518
|
},
|
|
749
|
-
{
|
|
750
|
-
"
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
"
|
|
758
|
-
"
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
"typography": "default"
|
|
766
|
-
}
|
|
767
|
-
}
|
|
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"
|
|
768
535
|
}
|
|
769
536
|
},
|
|
770
|
-
{
|
|
771
|
-
"
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
"tabsListVariants": {
|
|
780
|
-
"axes": {
|
|
781
|
-
"variant": [
|
|
782
|
-
"default",
|
|
783
|
-
"line",
|
|
784
|
-
"toggle"
|
|
785
|
-
]
|
|
786
|
-
},
|
|
787
|
-
"defaults": {
|
|
788
|
-
"variant": "default"
|
|
789
|
-
}
|
|
790
|
-
},
|
|
791
|
-
"tabsTriggerVariants": {
|
|
792
|
-
"axes": {
|
|
793
|
-
"variant": [
|
|
794
|
-
"text",
|
|
795
|
-
"icon"
|
|
796
|
-
],
|
|
797
|
-
"size": [
|
|
798
|
-
"default",
|
|
799
|
-
"pill"
|
|
800
|
-
],
|
|
801
|
-
"typography": [
|
|
802
|
-
"default",
|
|
803
|
-
"mono"
|
|
804
|
-
]
|
|
805
|
-
},
|
|
806
|
-
"defaults": {
|
|
807
|
-
"variant": "text",
|
|
808
|
-
"size": "default",
|
|
809
|
-
"typography": "default"
|
|
810
|
-
}
|
|
811
|
-
}
|
|
537
|
+
"itemContentVariants": {
|
|
538
|
+
"axes": {
|
|
539
|
+
"typography": [
|
|
540
|
+
"default",
|
|
541
|
+
"mono"
|
|
542
|
+
]
|
|
543
|
+
},
|
|
544
|
+
"defaults": {
|
|
545
|
+
"typography": "default"
|
|
812
546
|
}
|
|
813
547
|
},
|
|
814
|
-
{
|
|
815
|
-
"
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
"size": [
|
|
825
|
-
"sm",
|
|
826
|
-
"default",
|
|
827
|
-
"lg"
|
|
828
|
-
]
|
|
829
|
-
},
|
|
830
|
-
"defaults": {
|
|
831
|
-
"size": "default"
|
|
832
|
-
}
|
|
833
|
-
}
|
|
548
|
+
"itemMediaVariants": {
|
|
549
|
+
"axes": {
|
|
550
|
+
"variant": [
|
|
551
|
+
"default",
|
|
552
|
+
"icon",
|
|
553
|
+
"image"
|
|
554
|
+
]
|
|
555
|
+
},
|
|
556
|
+
"defaults": {
|
|
557
|
+
"variant": "default"
|
|
834
558
|
}
|
|
835
559
|
},
|
|
836
|
-
{
|
|
837
|
-
"
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
"
|
|
846
|
-
"
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
"defaults": {
|
|
854
|
-
"variant": "default"
|
|
855
|
-
}
|
|
856
|
-
}
|
|
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"
|
|
857
577
|
}
|
|
858
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)."
|
|
859
588
|
]
|
|
860
589
|
},
|
|
861
|
-
|
|
862
|
-
"
|
|
863
|
-
"
|
|
864
|
-
"
|
|
865
|
-
"
|
|
866
|
-
"
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
"
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
"
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
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": "logo",
|
|
630
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/logo",
|
|
631
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/logo.json",
|
|
632
|
+
"description": "Archetype AI brand logo mark.",
|
|
633
|
+
"usage": [
|
|
634
|
+
"Headers: `<Logo class=\"h-6 w-auto\" />` next to the app title; sizes sm | default | lg."
|
|
635
|
+
],
|
|
636
|
+
"variants": {
|
|
637
|
+
"logoVariants": {
|
|
638
|
+
"axes": {
|
|
639
|
+
"size": [
|
|
640
|
+
"sm",
|
|
641
|
+
"default",
|
|
642
|
+
"lg"
|
|
643
|
+
]
|
|
644
|
+
},
|
|
645
|
+
"defaults": {
|
|
646
|
+
"size": "default"
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
},
|
|
651
|
+
{
|
|
652
|
+
"name": "menubar",
|
|
653
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/menubar",
|
|
654
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/menubar.json",
|
|
655
|
+
"description": "Branded app header with logo, partner-logo slot, action children, and built-in dark-mode toggle.",
|
|
656
|
+
"usage": [
|
|
657
|
+
"Top of every dashboard shell; children render as right-side actions — `Button variant=\"link\" class=\"text-muted-foreground no-underline hover:underline\"`."
|
|
658
|
+
]
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"name": "progress",
|
|
662
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/progress",
|
|
663
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/progress.json",
|
|
664
|
+
"description": "Determinate progress bar.",
|
|
665
|
+
"usage": [
|
|
666
|
+
"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.",
|
|
667
|
+
"`size=\"sm\"` for compact/inline progress (upload rows); always aria-label."
|
|
668
|
+
],
|
|
669
|
+
"variants": {
|
|
670
|
+
"progressVariants": {
|
|
671
|
+
"axes": {
|
|
672
|
+
"size": [
|
|
673
|
+
"default",
|
|
674
|
+
"sm"
|
|
675
|
+
]
|
|
676
|
+
},
|
|
677
|
+
"defaults": {
|
|
678
|
+
"size": "default"
|
|
924
679
|
}
|
|
925
680
|
},
|
|
926
|
-
{
|
|
927
|
-
"
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
"
|
|
936
|
-
|
|
937
|
-
}
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
681
|
+
"progressIndicatorVariants": {
|
|
682
|
+
"axes": {
|
|
683
|
+
"variant": [
|
|
684
|
+
"default",
|
|
685
|
+
"success",
|
|
686
|
+
"critical"
|
|
687
|
+
]
|
|
688
|
+
},
|
|
689
|
+
"defaults": {
|
|
690
|
+
"variant": "default"
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
},
|
|
695
|
+
{
|
|
696
|
+
"name": "scatter-chart",
|
|
697
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart",
|
|
698
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/scatter-chart.json",
|
|
699
|
+
"description": "Scatter-plot card for embeddings and cluster views; composes BackgroundCard + Chart.",
|
|
700
|
+
"usage": [
|
|
701
|
+
"`<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.",
|
|
702
|
+
"Streaming: append rows and set `maxPoints` for a sliding window."
|
|
703
|
+
]
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "select",
|
|
707
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/select",
|
|
708
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/select.json",
|
|
709
|
+
"description": "Single-choice dropdown (bits-ui).",
|
|
710
|
+
"usage": [
|
|
711
|
+
"`Select.Root type=\"single\" bind:value` + `Select.Trigger variant=\"input\"` in forms; render a $derived label with a 'Select a …' fallback as trigger text.",
|
|
712
|
+
"`Select.Content > Select.Group > Select.Item value label` per option; default trigger variant in toolbars/headers."
|
|
713
|
+
],
|
|
714
|
+
"variants": {
|
|
715
|
+
"selectTriggerVariants": {
|
|
716
|
+
"axes": {
|
|
717
|
+
"variant": [
|
|
718
|
+
"default",
|
|
719
|
+
"ghost",
|
|
720
|
+
"input"
|
|
721
|
+
],
|
|
722
|
+
"size": [
|
|
723
|
+
"default",
|
|
724
|
+
"sm"
|
|
725
|
+
],
|
|
726
|
+
"typography": [
|
|
727
|
+
"default",
|
|
728
|
+
"mono"
|
|
729
|
+
]
|
|
730
|
+
},
|
|
731
|
+
"defaults": {
|
|
732
|
+
"variant": "default",
|
|
733
|
+
"size": "default",
|
|
734
|
+
"typography": "default"
|
|
735
|
+
}
|
|
962
736
|
},
|
|
963
|
-
{
|
|
964
|
-
"
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
737
|
+
"selectItemVariants": {
|
|
738
|
+
"axes": {
|
|
739
|
+
"typography": [
|
|
740
|
+
"default",
|
|
741
|
+
"mono"
|
|
742
|
+
]
|
|
743
|
+
},
|
|
744
|
+
"defaults": {
|
|
745
|
+
"typography": "default"
|
|
746
|
+
}
|
|
971
747
|
},
|
|
972
|
-
{
|
|
973
|
-
"
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
748
|
+
"selectContentVariants": {
|
|
749
|
+
"axes": {
|
|
750
|
+
"size": [
|
|
751
|
+
"default",
|
|
752
|
+
"sm"
|
|
753
|
+
]
|
|
754
|
+
},
|
|
755
|
+
"defaults": {
|
|
756
|
+
"size": "default"
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
},
|
|
761
|
+
{
|
|
762
|
+
"name": "sensor-chart",
|
|
763
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart",
|
|
764
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/sensor-chart.json",
|
|
765
|
+
"description": "Time-series line-chart card with multi-signal support and sliding-window streaming; composes BackgroundCard + Chart.",
|
|
766
|
+
"usage": [
|
|
767
|
+
"`<SensorChart title=\"ACCELERATION SENSOR\" icon={AudioWaveformIcon} data={rows} signals={{ accel_x: 'Accel X', … }} yMin yMax yTicks />` — data rows are { timestamp: Date, <signalKey>: number }.",
|
|
768
|
+
"Streaming: append rows and set `maxPoints` (sliding window); `axis=\"y\"` hides the time axis while streaming."
|
|
769
|
+
]
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"name": "separator",
|
|
773
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/separator",
|
|
774
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/separator.json",
|
|
775
|
+
"description": "Hairline divider.",
|
|
776
|
+
"usage": [
|
|
777
|
+
"Horizontal between stacked sections; `orientation=\"vertical\"` in multi-column layouts."
|
|
778
|
+
]
|
|
779
|
+
},
|
|
780
|
+
{
|
|
781
|
+
"name": "slider",
|
|
782
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/slider",
|
|
783
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/slider.json",
|
|
784
|
+
"description": "Range slider (bits-ui).",
|
|
785
|
+
"usage": [
|
|
786
|
+
"`<Slider type=\"single\" bind:value max={100} step={1} aria-label=\"…\" />`; also the scrub control inside video-player."
|
|
787
|
+
]
|
|
788
|
+
},
|
|
789
|
+
{
|
|
790
|
+
"name": "sonner",
|
|
791
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/sonner",
|
|
792
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/sonner.json",
|
|
793
|
+
"description": "Toast notifications (svelte-sonner themed for the DS).",
|
|
794
|
+
"usage": [
|
|
795
|
+
"Mount `<Toaster />` once at the app root; fire `toast.success('3 files uploaded')` / `toast.error(...)` from anywhere, `{ description }` for a second line."
|
|
796
|
+
]
|
|
797
|
+
},
|
|
798
|
+
{
|
|
799
|
+
"name": "spinner",
|
|
800
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/spinner",
|
|
801
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/spinner.json",
|
|
802
|
+
"description": "Loading indicator.",
|
|
803
|
+
"usage": [
|
|
804
|
+
"`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."
|
|
805
|
+
],
|
|
806
|
+
"variants": {
|
|
807
|
+
"spinnerVariants": {
|
|
808
|
+
"axes": {
|
|
809
|
+
"variant": [
|
|
810
|
+
"default",
|
|
811
|
+
"braille"
|
|
812
|
+
],
|
|
813
|
+
"size": [
|
|
814
|
+
"default",
|
|
815
|
+
"md",
|
|
816
|
+
"lg"
|
|
817
|
+
]
|
|
818
|
+
},
|
|
819
|
+
"defaults": {
|
|
820
|
+
"variant": "default",
|
|
821
|
+
"size": "default"
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
},
|
|
826
|
+
{
|
|
827
|
+
"name": "switch",
|
|
828
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/switch",
|
|
829
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/switch.json",
|
|
830
|
+
"description": "On/off toggle switch (bits-ui).",
|
|
831
|
+
"usage": [
|
|
832
|
+
"`bind:checked` + aria-label; sizes sm | default | lg."
|
|
833
|
+
],
|
|
834
|
+
"variants": {
|
|
835
|
+
"switchVariants": {
|
|
836
|
+
"axes": {
|
|
837
|
+
"size": [
|
|
838
|
+
"sm",
|
|
839
|
+
"default",
|
|
840
|
+
"lg"
|
|
841
|
+
]
|
|
842
|
+
},
|
|
843
|
+
"defaults": {
|
|
844
|
+
"size": "default"
|
|
1005
845
|
}
|
|
1006
846
|
},
|
|
1007
|
-
{
|
|
1008
|
-
"
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
"
|
|
1016
|
-
"
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
847
|
+
"switchThumbVariants": {
|
|
848
|
+
"axes": {
|
|
849
|
+
"size": [
|
|
850
|
+
"sm",
|
|
851
|
+
"default",
|
|
852
|
+
"lg"
|
|
853
|
+
]
|
|
854
|
+
},
|
|
855
|
+
"defaults": {
|
|
856
|
+
"size": "default"
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
}
|
|
860
|
+
},
|
|
861
|
+
{
|
|
862
|
+
"name": "table",
|
|
863
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/table",
|
|
864
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/table.json",
|
|
865
|
+
"description": "Data table.",
|
|
866
|
+
"usage": [
|
|
867
|
+
"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).",
|
|
868
|
+
"Mono body (`typography=\"mono\"` on Table.Body) for id-heavy tables; pair with `EmptyState variant=\"list\"` when empty."
|
|
869
|
+
],
|
|
870
|
+
"variants": {
|
|
871
|
+
"tableBodyVariants": {
|
|
872
|
+
"axes": {
|
|
873
|
+
"typography": [
|
|
874
|
+
"default",
|
|
875
|
+
"mono"
|
|
876
|
+
]
|
|
877
|
+
},
|
|
878
|
+
"defaults": {
|
|
879
|
+
"typography": "default"
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
}
|
|
883
|
+
},
|
|
884
|
+
{
|
|
885
|
+
"name": "tabs",
|
|
886
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/tabs",
|
|
887
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/tabs.json",
|
|
888
|
+
"description": "View and section switcher.",
|
|
889
|
+
"usage": [
|
|
890
|
+
"Icon view toggle (list/grid): `Tabs.List variant=\"toggle\"` + `Tabs.Trigger variant=\"icon\"` with an icon + title.",
|
|
891
|
+
"Segmented source switch (Library | File IDs | Upload): `variant=\"toggle\"` list + triggers `size=\"pill\" typography=\"mono\"`.",
|
|
892
|
+
"Page-section tabs (Progress | Logs | Artifacts): `Tabs.List variant=\"line\"` with plain text triggers; always `Tabs.Root bind:value`."
|
|
893
|
+
],
|
|
894
|
+
"variants": {
|
|
895
|
+
"tabsListVariants": {
|
|
896
|
+
"axes": {
|
|
897
|
+
"variant": [
|
|
898
|
+
"default",
|
|
899
|
+
"line",
|
|
900
|
+
"toggle"
|
|
901
|
+
]
|
|
902
|
+
},
|
|
903
|
+
"defaults": {
|
|
904
|
+
"variant": "default"
|
|
1033
905
|
}
|
|
1034
906
|
},
|
|
1035
|
-
{
|
|
1036
|
-
"
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
907
|
+
"tabsTriggerVariants": {
|
|
908
|
+
"axes": {
|
|
909
|
+
"variant": [
|
|
910
|
+
"text",
|
|
911
|
+
"icon"
|
|
912
|
+
],
|
|
913
|
+
"size": [
|
|
914
|
+
"default",
|
|
915
|
+
"pill"
|
|
916
|
+
],
|
|
917
|
+
"typography": [
|
|
918
|
+
"default",
|
|
919
|
+
"mono"
|
|
920
|
+
]
|
|
921
|
+
},
|
|
922
|
+
"defaults": {
|
|
923
|
+
"variant": "text",
|
|
924
|
+
"size": "default",
|
|
925
|
+
"typography": "default"
|
|
926
|
+
}
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
"name": "textarea",
|
|
932
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/textarea",
|
|
933
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/textarea.json",
|
|
934
|
+
"description": "Multi-line text input.",
|
|
935
|
+
"usage": [
|
|
936
|
+
"Feedback/description fields under a Label sectionHeader; bind:value + placeholder."
|
|
937
|
+
],
|
|
938
|
+
"variants": {
|
|
939
|
+
"textareaVariants": {
|
|
940
|
+
"axes": {
|
|
941
|
+
"size": [
|
|
942
|
+
"sm",
|
|
943
|
+
"default",
|
|
944
|
+
"lg"
|
|
945
|
+
]
|
|
946
|
+
},
|
|
947
|
+
"defaults": {
|
|
948
|
+
"size": "default"
|
|
1069
949
|
}
|
|
1070
950
|
}
|
|
951
|
+
}
|
|
952
|
+
},
|
|
953
|
+
{
|
|
954
|
+
"name": "theme",
|
|
955
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/theme",
|
|
956
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/theme.json",
|
|
957
|
+
"description": "darkMode singleton controller syncing the `dark` class on <html>.",
|
|
958
|
+
"usage": [
|
|
959
|
+
"`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."
|
|
1071
960
|
]
|
|
961
|
+
},
|
|
962
|
+
{
|
|
963
|
+
"name": "toggle",
|
|
964
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/toggle",
|
|
965
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/toggle.json",
|
|
966
|
+
"description": "Pressed-state button (bits-ui).",
|
|
967
|
+
"usage": [
|
|
968
|
+
"Icon-only by default (aria-label required); `variant=\"outline\"` for icon + text."
|
|
969
|
+
],
|
|
970
|
+
"variants": {
|
|
971
|
+
"toggleVariants": {
|
|
972
|
+
"axes": {
|
|
973
|
+
"variant": [
|
|
974
|
+
"default",
|
|
975
|
+
"outline"
|
|
976
|
+
],
|
|
977
|
+
"size": [
|
|
978
|
+
"default",
|
|
979
|
+
"sm",
|
|
980
|
+
"lg"
|
|
981
|
+
]
|
|
982
|
+
},
|
|
983
|
+
"defaults": {
|
|
984
|
+
"variant": "default",
|
|
985
|
+
"size": "default"
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
}
|
|
989
|
+
},
|
|
990
|
+
{
|
|
991
|
+
"name": "tooltip",
|
|
992
|
+
"import": "@archetypeai/ds-ui-svelte-console/primitives/tooltip",
|
|
993
|
+
"source": "https://design-system-console.archetypeai.workers.dev/r/tooltip.json",
|
|
994
|
+
"description": "Hover hint.",
|
|
995
|
+
"usage": [
|
|
996
|
+
"Wrap the app/section in `Tooltip.Provider delayDuration={200}`.",
|
|
997
|
+
"Field help: `Tooltip.Trigger variant=\"info\"` holding an InfoIcon placed next to a Label sectionHeader, explanation in Tooltip.Content.",
|
|
998
|
+
"`variant=\"inlineLink\"` — underlined trigger flowing inside prose (supported file requirements)."
|
|
999
|
+
],
|
|
1000
|
+
"variants": {
|
|
1001
|
+
"tooltipTriggerVariants": {
|
|
1002
|
+
"axes": {
|
|
1003
|
+
"variant": [
|
|
1004
|
+
"default",
|
|
1005
|
+
"info",
|
|
1006
|
+
"inlineLink"
|
|
1007
|
+
]
|
|
1008
|
+
},
|
|
1009
|
+
"defaults": {
|
|
1010
|
+
"variant": "default"
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
}
|
|
1014
|
+
},
|
|
1015
|
+
{
|
|
1016
|
+
"name": "video-player",
|
|
1017
|
+
"import": "@archetypeai/ds-ui-svelte-labs/primitives/video-player",
|
|
1018
|
+
"source": "https://design-system-labs.archetypeai.workers.dev/r/video-player.json",
|
|
1019
|
+
"description": "Media-playback card with controls and aspect ratio; composes Card + AspectRatio + Button + Slider.",
|
|
1020
|
+
"usage": [
|
|
1021
|
+
"`<VideoPlayer src muted />` for the standard controlled player; `controls={false}` for ambient/looping footage."
|
|
1022
|
+
],
|
|
1023
|
+
"variants": {
|
|
1024
|
+
"videoPlayerOverlayVariants": {
|
|
1025
|
+
"axes": {
|
|
1026
|
+
"visible": [
|
|
1027
|
+
"true",
|
|
1028
|
+
"false"
|
|
1029
|
+
]
|
|
1030
|
+
},
|
|
1031
|
+
"defaults": {
|
|
1032
|
+
"visible": "true"
|
|
1033
|
+
}
|
|
1034
|
+
},
|
|
1035
|
+
"videoPlayerControlsVariants": {
|
|
1036
|
+
"axes": {
|
|
1037
|
+
"visible": [
|
|
1038
|
+
"true",
|
|
1039
|
+
"false"
|
|
1040
|
+
]
|
|
1041
|
+
},
|
|
1042
|
+
"defaults": {
|
|
1043
|
+
"visible": "true"
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1072
1047
|
}
|
|
1073
|
-
|
|
1048
|
+
]
|
|
1074
1049
|
}
|