magick-ui 0.1.2 → 0.1.4

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 (24) hide show
  1. package/dist/index.d.cts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/schema.d.cts +22 -1
  4. package/dist/schema.d.ts +22 -1
  5. package/package.json +11 -7
  6. package/schema/component-schema.json +371 -71
  7. package/dist/design-tokens/design-tokens.cjs +0 -991
  8. package/dist/design-tokens/design-tokens.cjs.map +0 -1
  9. package/dist/design-tokens/design-tokens.js +0 -964
  10. package/dist/design-tokens/design-tokens.js.map +0 -1
  11. package/dist/index.cjs +0 -1425
  12. package/dist/index.cjs.map +0 -1
  13. package/dist/index.js +0 -1370
  14. package/dist/index.js.map +0 -1
  15. package/dist/schema-Bp0A5rg5.d.cts +0 -38
  16. package/dist/schema-Bp0A5rg5.d.ts +0 -38
  17. package/dist/schema.cjs +0 -135
  18. package/dist/schema.cjs.map +0 -1
  19. package/dist/schema.js +0 -106
  20. package/dist/schema.js.map +0 -1
  21. package/dist/ui/index.cjs +0 -317
  22. package/dist/ui/index.cjs.map +0 -1
  23. package/dist/ui/index.js +0 -273
  24. package/dist/ui/index.js.map +0 -1
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ComponentType } from 'react';
3
- import { U as UINode } from './schema-Bp0A5rg5.cjs';
4
- export { C as ComponentSchema, P as PrimitiveSchema, c as componentSchema, g as getFullExample, a as getPrimitiveSchemas } from './schema-Bp0A5rg5.cjs';
3
+ import { UINode } from './schema.cjs';
4
+ export { ComponentSchema, componentSchema, getComponentSchemas } from './schema.cjs';
5
5
  export { Button, ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/index.cjs';
6
6
  import { ClassValue } from 'clsx';
7
7
  export { DesignTokens, designTokens, getTokenValue, getTokenValueWithFallback } from './design-tokens/design-tokens.cjs';
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ComponentType } from 'react';
3
- import { U as UINode } from './schema-Bp0A5rg5.js';
4
- export { C as ComponentSchema, P as PrimitiveSchema, c as componentSchema, g as getFullExample, a as getPrimitiveSchemas } from './schema-Bp0A5rg5.js';
3
+ import { UINode } from './schema.js';
4
+ export { ComponentSchema, componentSchema, getComponentSchemas } from './schema.js';
5
5
  export { Button, ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/index.js';
6
6
  import { ClassValue } from 'clsx';
7
7
  export { DesignTokens, designTokens, getTokenValue, getTokenValueWithFallback } from './design-tokens/design-tokens.js';
package/dist/schema.d.cts CHANGED
@@ -1 +1,22 @@
1
- export { C as ComponentSchema, U as UINode, c as componentSchema, g as getFullExample, a as getPrimitiveSchemas } from './schema-Bp0A5rg5.cjs';
1
+ interface UINode {
2
+ type: string;
3
+ props?: Record<string, unknown>;
4
+ children?: UINode[];
5
+ }
6
+ interface ComponentSchema {
7
+ $schema: string;
8
+ description: string;
9
+ components: Record<string, unknown>;
10
+ }
11
+
12
+ /**
13
+ * The full component schema auto-generated from Zod definitions.
14
+ * Use this in your backend to inform the AI about available UI components.
15
+ */
16
+ declare const componentSchema: ComponentSchema;
17
+ /**
18
+ * Returns just the components section of the schema.
19
+ */
20
+ declare function getComponentSchemas(): Record<string, unknown>;
21
+
22
+ export { type ComponentSchema, type UINode, componentSchema, getComponentSchemas };
package/dist/schema.d.ts CHANGED
@@ -1 +1,22 @@
1
- export { C as ComponentSchema, U as UINode, c as componentSchema, g as getFullExample, a as getPrimitiveSchemas } from './schema-Bp0A5rg5.js';
1
+ interface UINode {
2
+ type: string;
3
+ props?: Record<string, unknown>;
4
+ children?: UINode[];
5
+ }
6
+ interface ComponentSchema {
7
+ $schema: string;
8
+ description: string;
9
+ components: Record<string, unknown>;
10
+ }
11
+
12
+ /**
13
+ * The full component schema auto-generated from Zod definitions.
14
+ * Use this in your backend to inform the AI about available UI components.
15
+ */
16
+ declare const componentSchema: ComponentSchema;
17
+ /**
18
+ * Returns just the components section of the schema.
19
+ */
20
+ declare function getComponentSchemas(): Record<string, unknown>;
21
+
22
+ export { type ComponentSchema, type UINode, componentSchema, getComponentSchemas };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "magick-ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "Generative UI primitives, renderer, design tokens, and schema for composing dynamic chat interfaces",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -43,20 +43,23 @@
43
43
  "class-variance-authority": "^0.7.0",
44
44
  "clsx": "^2.1.0",
45
45
  "lucide-react": "^0.511.0",
46
- "tailwind-merge": "^3.0.0"
46
+ "tailwind-merge": "^3.0.0",
47
+ "zod": "3",
48
+ "zod-to-json-schema": "^3.25.1"
47
49
  },
48
50
  "devDependencies": {
51
+ "@storybook/addon-docs": "^10.2.10",
52
+ "@storybook/react-vite": "^10.2.10",
53
+ "@types/node": "^25.3.0",
49
54
  "@types/react": "^19.0.0",
50
55
  "@types/react-dom": "^19.0.0",
51
56
  "react": "^19.0.0",
52
57
  "react-dom": "^19.0.0",
58
+ "storybook": "^10.2.10",
53
59
  "tailwindcss": "^4.0.0",
54
60
  "tsup": "^8.0.0",
55
61
  "tsx": "^4.0.0",
56
- "typescript": "^5.0.0",
57
- "storybook": "^10.2.10",
58
- "@storybook/react-vite": "^10.2.10",
59
- "@storybook/addon-docs": "^10.2.10"
62
+ "typescript": "^5.0.0"
60
63
  },
61
64
  "keywords": [
62
65
  "generative-ui",
@@ -68,7 +71,8 @@
68
71
  ],
69
72
  "license": "MIT",
70
73
  "scripts": {
71
- "build": "tsup",
74
+ "generate-schema": "tsx src/schema/generator.ts",
75
+ "build": "pnpm generate-schema && tsup",
72
76
  "dev": "tsup --watch",
73
77
  "build-tokens": "tsx src/design-tokens/generator.ts",
74
78
  "playground": "vite --config playground/vite.config.ts",
package/schema/component-schema.json CHANGED
@@ -1,90 +1,390 @@
1
1
  {
2
2
  "$schema": "Generative UI Component Schema",
3
- "description": "Available UI components for composing chat UI. The AI should return a JSON tree using these types. Each node has: type (string), props (object), children (array of nodes, optional).",
3
+ "description": "Auto-generated from Zod schemas. Available UI components for composing chat UI. Each node has: type (string), props (object), children (array of nodes, optional).",
4
4
  "components": {
5
+ "button": {
6
+ "$ref": "#/definitions/button",
7
+ "definitions": {
8
+ "button": {
9
+ "type": "object",
10
+ "properties": {
11
+ "type": {
12
+ "type": "string",
13
+ "const": "button"
14
+ },
15
+ "props": {
16
+ "type": "object",
17
+ "properties": {
18
+ "label": {
19
+ "type": "string",
20
+ "description": "Button text"
21
+ },
22
+ "variant": {
23
+ "type": "string",
24
+ "enum": [
25
+ "primary",
26
+ "secondary",
27
+ "outline",
28
+ "destructive",
29
+ "ghost",
30
+ "soft"
31
+ ],
32
+ "description": "Button style. Defaults to 'primary'"
33
+ },
34
+ "size": {
35
+ "type": "string",
36
+ "enum": [
37
+ "sm",
38
+ "md",
39
+ "lg"
40
+ ],
41
+ "description": "Button size. Defaults to 'md'"
42
+ },
43
+ "url": {
44
+ "type": "string",
45
+ "description": "URL to open when clicked"
46
+ },
47
+ "disabled": {
48
+ "type": "boolean",
49
+ "description": "Whether the button is disabled"
50
+ }
51
+ },
52
+ "additionalProperties": false
53
+ },
54
+ "children": {
55
+ "type": "array",
56
+ "items": {
57
+ "type": "object",
58
+ "properties": {
59
+ "type": {
60
+ "type": "string"
61
+ },
62
+ "props": {
63
+ "type": "object",
64
+ "additionalProperties": {}
65
+ },
66
+ "children": {
67
+ "type": "array",
68
+ "items": {}
69
+ }
70
+ },
71
+ "required": [
72
+ "type"
73
+ ],
74
+ "additionalProperties": false
75
+ }
76
+ }
77
+ },
78
+ "required": [
79
+ "type"
80
+ ],
81
+ "additionalProperties": false,
82
+ "description": "An action button"
83
+ }
84
+ },
85
+ "$schema": "http://json-schema.org/draft-07/schema#"
86
+ },
5
87
  "card": {
6
- "description": "Container card. Compose with card-header, card-content, card-footer as children.",
7
- "props": {},
8
- "accepts_children": true,
9
- "example": {
10
- "type": "card",
11
- "children": [
12
- {
13
- "type": "card-header",
14
- "children": [
15
- { "type": "card-title", "props": {}, "children": [] },
16
- { "type": "card-description", "props": {}, "children": [] }
17
- ]
88
+ "$ref": "#/definitions/card",
89
+ "definitions": {
90
+ "card": {
91
+ "type": "object",
92
+ "properties": {
93
+ "type": {
94
+ "type": "string",
95
+ "const": "card"
96
+ },
97
+ "props": {
98
+ "type": "object",
99
+ "properties": {},
100
+ "additionalProperties": false
101
+ },
102
+ "children": {
103
+ "type": "array",
104
+ "items": {
105
+ "type": "object",
106
+ "properties": {
107
+ "type": {
108
+ "type": "string"
109
+ },
110
+ "props": {
111
+ "type": "object",
112
+ "additionalProperties": {}
113
+ },
114
+ "children": {
115
+ "type": "array",
116
+ "items": {}
117
+ }
118
+ },
119
+ "required": [
120
+ "type"
121
+ ],
122
+ "additionalProperties": false
123
+ },
124
+ "description": "Compose with card-header, card-content, card-footer"
125
+ }
18
126
  },
19
- { "type": "card-content", "children": [] }
20
- ]
21
- }
127
+ "required": [
128
+ "type"
129
+ ],
130
+ "additionalProperties": false,
131
+ "description": "Container card"
132
+ }
133
+ },
134
+ "$schema": "http://json-schema.org/draft-07/schema#"
22
135
  },
23
136
  "card-header": {
24
- "description": "Header section of a card. Place card-title and card-description inside.",
25
- "props": {},
26
- "accepts_children": true
137
+ "$ref": "#/definitions/card-header",
138
+ "definitions": {
139
+ "card-header": {
140
+ "type": "object",
141
+ "properties": {
142
+ "type": {
143
+ "type": "string",
144
+ "const": "card-header"
145
+ },
146
+ "props": {
147
+ "type": "object",
148
+ "properties": {},
149
+ "additionalProperties": false
150
+ },
151
+ "children": {
152
+ "type": "array",
153
+ "items": {
154
+ "type": "object",
155
+ "properties": {
156
+ "type": {
157
+ "type": "string"
158
+ },
159
+ "props": {
160
+ "type": "object",
161
+ "additionalProperties": {}
162
+ },
163
+ "children": {
164
+ "type": "array",
165
+ "items": {}
166
+ }
167
+ },
168
+ "required": [
169
+ "type"
170
+ ],
171
+ "additionalProperties": false
172
+ },
173
+ "description": "Place card-title and card-description inside"
174
+ }
175
+ },
176
+ "required": [
177
+ "type"
178
+ ],
179
+ "additionalProperties": false,
180
+ "description": "Header section of a card"
181
+ }
182
+ },
183
+ "$schema": "http://json-schema.org/draft-07/schema#"
27
184
  },
28
185
  "card-title": {
29
- "description": "Title inside a card-header.",
30
- "props": {},
31
- "accepts_children": true
186
+ "$ref": "#/definitions/card-title",
187
+ "definitions": {
188
+ "card-title": {
189
+ "type": "object",
190
+ "properties": {
191
+ "type": {
192
+ "type": "string",
193
+ "const": "card-title"
194
+ },
195
+ "props": {
196
+ "type": "object",
197
+ "properties": {
198
+ "children": {
199
+ "type": "string",
200
+ "description": "Title text"
201
+ }
202
+ },
203
+ "additionalProperties": false
204
+ },
205
+ "children": {
206
+ "type": "array",
207
+ "items": {
208
+ "type": "object",
209
+ "properties": {
210
+ "type": {
211
+ "type": "string"
212
+ },
213
+ "props": {
214
+ "type": "object",
215
+ "additionalProperties": {}
216
+ },
217
+ "children": {
218
+ "type": "array",
219
+ "items": {}
220
+ }
221
+ },
222
+ "required": [
223
+ "type"
224
+ ],
225
+ "additionalProperties": false
226
+ }
227
+ }
228
+ },
229
+ "required": [
230
+ "type"
231
+ ],
232
+ "additionalProperties": false,
233
+ "description": "Title inside a card-header"
234
+ }
235
+ },
236
+ "$schema": "http://json-schema.org/draft-07/schema#"
32
237
  },
33
238
  "card-description": {
34
- "description": "Description text inside a card-header.",
35
- "props": {},
36
- "accepts_children": true
239
+ "$ref": "#/definitions/card-description",
240
+ "definitions": {
241
+ "card-description": {
242
+ "type": "object",
243
+ "properties": {
244
+ "type": {
245
+ "type": "string",
246
+ "const": "card-description"
247
+ },
248
+ "props": {
249
+ "type": "object",
250
+ "properties": {
251
+ "children": {
252
+ "type": "string",
253
+ "description": "Description text"
254
+ }
255
+ },
256
+ "additionalProperties": false
257
+ },
258
+ "children": {
259
+ "type": "array",
260
+ "items": {
261
+ "type": "object",
262
+ "properties": {
263
+ "type": {
264
+ "type": "string"
265
+ },
266
+ "props": {
267
+ "type": "object",
268
+ "additionalProperties": {}
269
+ },
270
+ "children": {
271
+ "type": "array",
272
+ "items": {}
273
+ }
274
+ },
275
+ "required": [
276
+ "type"
277
+ ],
278
+ "additionalProperties": false
279
+ }
280
+ }
281
+ },
282
+ "required": [
283
+ "type"
284
+ ],
285
+ "additionalProperties": false,
286
+ "description": "Description text inside a card-header"
287
+ }
288
+ },
289
+ "$schema": "http://json-schema.org/draft-07/schema#"
37
290
  },
38
291
  "card-content": {
39
- "description": "Main content area of a card.",
40
- "props": {},
41
- "accepts_children": true
292
+ "$ref": "#/definitions/card-content",
293
+ "definitions": {
294
+ "card-content": {
295
+ "type": "object",
296
+ "properties": {
297
+ "type": {
298
+ "type": "string",
299
+ "const": "card-content"
300
+ },
301
+ "props": {
302
+ "type": "object",
303
+ "properties": {},
304
+ "additionalProperties": false
305
+ },
306
+ "children": {
307
+ "type": "array",
308
+ "items": {
309
+ "type": "object",
310
+ "properties": {
311
+ "type": {
312
+ "type": "string"
313
+ },
314
+ "props": {
315
+ "type": "object",
316
+ "additionalProperties": {}
317
+ },
318
+ "children": {
319
+ "type": "array",
320
+ "items": {}
321
+ }
322
+ },
323
+ "required": [
324
+ "type"
325
+ ],
326
+ "additionalProperties": false
327
+ },
328
+ "description": "Main content area"
329
+ }
330
+ },
331
+ "required": [
332
+ "type"
333
+ ],
334
+ "additionalProperties": false,
335
+ "description": "Main content area of a card"
336
+ }
337
+ },
338
+ "$schema": "http://json-schema.org/draft-07/schema#"
42
339
  },
43
340
  "card-footer": {
44
- "description": "Footer section of a card, typically for actions.",
45
- "props": {},
46
- "accepts_children": true
47
- },
48
- "button": {
49
- "description": "An action button. Use label prop for text, or compose children.",
50
- "props": {
51
- "label": { "type": "string", "required": false, "description": "Button text (shorthand for children)" },
52
- "variant": { "type": "string", "enum": ["primary", "secondary", "outline", "destructive", "ghost", "soft"], "required": false, "description": "Defaults to 'primary'" },
53
- "size": { "type": "string", "enum": ["sm", "md", "lg"], "required": false, "description": "Defaults to 'md'" },
54
- "url": { "type": "string", "required": false, "description": "URL to open when clicked" },
55
- "disabled": { "type": "boolean", "required": false }
341
+ "$ref": "#/definitions/card-footer",
342
+ "definitions": {
343
+ "card-footer": {
344
+ "type": "object",
345
+ "properties": {
346
+ "type": {
347
+ "type": "string",
348
+ "const": "card-footer"
349
+ },
350
+ "props": {
351
+ "type": "object",
352
+ "properties": {},
353
+ "additionalProperties": false
354
+ },
355
+ "children": {
356
+ "type": "array",
357
+ "items": {
358
+ "type": "object",
359
+ "properties": {
360
+ "type": {
361
+ "type": "string"
362
+ },
363
+ "props": {
364
+ "type": "object",
365
+ "additionalProperties": {}
366
+ },
367
+ "children": {
368
+ "type": "array",
369
+ "items": {}
370
+ }
371
+ },
372
+ "required": [
373
+ "type"
374
+ ],
375
+ "additionalProperties": false
376
+ },
377
+ "description": "Footer area, typically for actions"
378
+ }
379
+ },
380
+ "required": [
381
+ "type"
382
+ ],
383
+ "additionalProperties": false,
384
+ "description": "Footer section of a card"
385
+ }
56
386
  },
57
- "accepts_children": true,
58
- "example": {
59
- "type": "button",
60
- "props": { "label": "View Details", "variant": "primary" }
61
- }
387
+ "$schema": "http://json-schema.org/draft-07/schema#"
62
388
  }
63
- },
64
- "ui_tree_format": {
65
- "description": "The AI should return a JSON object with this structure.",
66
- "schema": {
67
- "type": { "type": "string", "description": "One of the component type names above" },
68
- "props": { "type": "object", "description": "Props matching the component's prop schema" },
69
- "children": { "type": "array", "description": "Optional array of nested nodes (only for types with accepts_children: true)" }
70
- }
71
- },
72
- "full_example": {
73
- "type": "card",
74
- "children": [
75
- {
76
- "type": "card-header",
77
- "children": [
78
- { "type": "card-title", "props": {}, "children": [] }
79
- ]
80
- },
81
- {
82
- "type": "card-content",
83
- "children": [
84
- { "type": "button", "props": { "label": "Open Project", "variant": "primary" } },
85
- { "type": "button", "props": { "label": "View Documents", "variant": "outline" } }
86
- ]
87
- }
88
- ]
89
389
  }
90
390
  }