mlola-ui 1.9.3 → 1.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 (17) hide show
  1. package/README.md +38 -1
  2. package/package.json +11 -2
  3. package/registry/agents.md +1 -0
  4. package/registry/contract.json +6 -0
  5. package/registry/examples.json +21 -0
  6. package/registry/index.json +133 -50
  7. package/registry/render-app.html +8480 -0
  8. package/registry/render-catalog.json +1650 -0
  9. package/registry/render-rules.json +1356 -0
  10. package/registry/render.d.ts +106 -0
  11. package/registry/render.js +989 -0
  12. package/registry/source/packages/components/render-surface/render-surface.tsx +488 -0
  13. package/registry/source-manifest.json +1 -0
  14. package/src/cli.js +21 -0
  15. package/src/knowledge.js +15 -0
  16. package/src/mcp.js +92 -9
  17. package/src/render-rules.d.ts +5 -0
package/README.md CHANGED
@@ -46,6 +46,8 @@ Tailwind's preflight in either import order.
46
46
  | `doctor` | report project and registry problems |
47
47
  | `check [path…] [--json] [--strict] [--all]` | check every file's markup and CSS against the contract, and count the colors and spacing typed by hand |
48
48
  | `migrate [path…] [--write] [--json]` | move a shadcn/ui project's props, toasts and icons to Mlola, and list what needs a person |
49
+ | `render check <file \| -> [--json]` | check A2UI messages an agent composed against the Mlola Render catalog; exits 1 on an error |
50
+ | `render catalog [--schema]` | print the Mlola Render catalog as the guide an agent reads, or as the A2UI catalog |
49
51
  | `login <token>` | save a Mlola Pro token (from /account) for this user |
50
52
  | `logout` | forget the saved token |
51
53
 
@@ -123,7 +125,9 @@ this CLI, offline: `get_design_rules`, `search_components`, `get_component`,
123
125
  `get_tokens`, `check_markup` (invented classes, wrong `data-*` values, utility
124
126
  classes, and hand-written colors, spacing off the `--ml-space-*` scale or
125
127
  faded text in `style` attributes, `<style>` blocks and utility classes, each
126
- with its line), `add_components` and `init_project`. For Claude Code
128
+ with its line), `get_render_catalog`, `check_render` and `render_ui` (Mlola
129
+ Render, below),
130
+ `add_components` and `init_project`. For Claude Code
127
131
  without init:
128
132
 
129
133
  ```sh
@@ -138,6 +142,39 @@ no build step), and the server
138
142
  is listed in the MCP Registry as `io.github.mlolahq/mlola-ui`. See
139
143
  https://ui.mlola.com/docs/agents for Cursor, VS Code, Codex and chat apps.
140
144
 
145
+ ## Mlola Render
146
+
147
+ When an agent should show interface instead of writing code for it (a form
148
+ in a chat, a status card in an agent's app), it composes
149
+ [A2UI](https://a2ui.org) v0.9 messages from the Mlola Render catalog: free
150
+ components and named values, never a color or a class. The check holds them
151
+ to the catalog and to what makes a surface usable (a name on every field, one
152
+ root, no loops, headings in order, values in range) and answers in A2UI's
153
+ `VALIDATION_FAILED` shape, so the agent fixes its own messages:
154
+
155
+ ```sh
156
+ npx mlola-ui render catalog # what an agent may compose
157
+ npx mlola-ui render check ui.json # an array, one message, or JSON Lines
158
+ ```
159
+
160
+ ```js
161
+ import { validateRender } from "mlola-ui/render";
162
+ import rules from "mlola-ui/render/rules" with { type: "json" };
163
+
164
+ const { valid, errors } = validateRender(messages, rules);
165
+ ```
166
+
167
+ The MCP tools are `get_render_catalog`, `check_render` and `render_ui`. In a
168
+ chat that shows MCP Apps, `render_ui` draws the surface in the conversation
169
+ (its view is the resource `ui://mlola/render`), and what the person presses
170
+ comes back to the agent as their next message, with A2UI's action. The A2UI
171
+ catalog is `mlola-ui/render/catalog` and
172
+ https://ui.mlola.com/a2ui/catalog/v1.
173
+
174
+ To draw surfaces yourself: `npx mlola-ui add render-surface` in React, or
175
+ `@mlola-ui/behavior/render` on a page without a framework. See
176
+ https://ui.mlola.com/docs/render.
177
+
141
178
  ## Mlola Pro
142
179
 
143
180
  Pro components, blocks, pages and templates are not in this package. With a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mlola-ui",
3
- "version": "1.9.3",
3
+ "version": "1.10.1",
4
4
  "mcpName": "io.github.mlolahq/mlola-ui",
5
5
  "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
6
6
  "type": "module",
@@ -9,7 +9,16 @@
9
9
  },
10
10
  "exports": {
11
11
  ".": "./src/cli.js",
12
- "./mcp": "./src/mcp.js"
12
+ "./mcp": "./src/mcp.js",
13
+ "./render": {
14
+ "types": "./registry/render.d.ts",
15
+ "default": "./registry/render.js"
16
+ },
17
+ "./render/rules": {
18
+ "types": "./src/render-rules.d.ts",
19
+ "default": "./registry/render-rules.json"
20
+ },
21
+ "./render/catalog": "./registry/render-catalog.json"
13
22
  },
14
23
  "files": [
15
24
  "bin",
package/registry/agents.md CHANGED
@@ -247,6 +247,7 @@ correct. This table is read out of the stylesheet, so it is never stale.
247
247
  | `.ml-progress-root` | `data-tone` | `danger`, `info`, `success`, `warning` |
248
248
  | `.ml-radio-group` | `data-orientation` | `horizontal` |
249
249
  | `.ml-radio-item` | `data-state` | `checked` |
250
+ | `.ml-render-surface` | `data-themed` | _presence only_ |
250
251
  | `.ml-resizable` | `data-anchor` | `second` |
251
252
  | `.ml-resizable` | `data-direction` | `horizontal`, `vertical` |
252
253
  | `.ml-resizable-pane` | `data-folded` | _presence only_ |
package/registry/contract.json CHANGED
@@ -312,6 +312,9 @@
312
312
  "ml-rating-fill",
313
313
  "ml-rating-track",
314
314
  "ml-rating-value",
315
+ "ml-render",
316
+ "ml-render-surface",
317
+ "ml-render-text",
315
318
  "ml-required-mark",
316
319
  "ml-resizable",
317
320
  "ml-resizable-handle",
@@ -890,6 +893,9 @@
890
893
  "checked"
891
894
  ]
892
895
  },
896
+ "ml-render-surface": {
897
+ "data-themed": []
898
+ },
893
899
  "ml-resizable": {
894
900
  "data-anchor": [
895
901
  "second"
package/registry/examples.json CHANGED
@@ -3284,5 +3284,26 @@
3284
3284
  "attributes": {}
3285
3285
  }
3286
3286
  ]
3287
+ },
3288
+ "render-surface": {
3289
+ "needs": "script",
3290
+ "react": "\"use client\";\n\nimport * as React from \"react\";\nimport { RenderSurface } from \"@/components/ui/render-surface\";\n\n// What an agent sent: a surface, its components as a flat list, and the data its field is bound to.\nconst messages = [\n { version: \"v0.9.1\", createSurface: { surfaceId: \"feedback\", catalogId: \"https://ui.mlola.com/a2ui/catalog/v1\" } },\n {\n version: \"v0.9.1\",\n updateComponents: {\n surfaceId: \"feedback\",\n components: [\n { id: \"root\", component: \"Card\", children: [\"title\", \"note\", \"send\"] },\n { id: \"title\", component: \"Heading\", level: 3, text: \"How was your order?\" },\n { id: \"note\", component: \"Textarea\", label: \"Tell us more\", value: { path: \"/note\" }, required: true },\n { id: \"send\", component: \"Button\", text: \"Send feedback\", action: { event: { name: \"send_feedback\", context: { note: { path: \"/note\" } } } } },\n ],\n },\n },\n { version: \"v0.9.1\", updateDataModel: { surfaceId: \"feedback\", path: \"/note\", value: \"\" } },\n];\n\nexport default function Example() {\n // The action goes back to the agent; here its context is shown instead.\n const [sent, setSent] = React.useState(\"\");\n return (\n <>\n <RenderSurface messages={messages} onAction={(message) => setSent(String(message.action.context.note))} />\n <p role=\"status\">{sent ? `Sent to the agent: ${sent}` : \"\"}</p>\n </>\n );\n}",
3291
+ "html": "<div class=\"ml-render\">\n <div class=\"ml-render-surface\" data-surface=\"feedback\" data-theme=\"graphite\" data-mode=\"system\" data-themed=\"\">\n <div class=\"ml-card\" data-variant=\"default\">\n <div class=\"ml-card-content ml-stack\">\n <h3>How was your order?</h3>\n <div class=\"ml-input-field\">\n <label class=\"ml-input-label\" id=\"render-surface-1-feedback-note_40-label\" for=\"render-surface-1-feedback-note_40\">Tell us more<span class=\"ml-required-mark\" aria-hidden=\"true\">*</span></label>\n <textarea class=\"ml-textarea\" id=\"render-surface-1-feedback-note_40\" rows=\"4\" required=\"\" maxLength=\"4000\" style=\"--ml-textarea-max-rows:12\"></textarea>\n </div>\n <button class=\"ml-button\" type=\"button\" data-variant=\"primary\" data-size=\"md\" id=\"render-surface-1-feedback-send_40\"><span class=\"ml-button-label\">Send feedback</span></button>\n </div>\n </div>\n </div>\n <p class=\"ml-visually-hidden\" role=\"status\"></p>\n</div>\n<p role=\"status\"></p>",
3292
+ "elements": [
3293
+ {
3294
+ "class": "ml-render",
3295
+ "attributes": {}
3296
+ },
3297
+ {
3298
+ "class": "ml-render-surface",
3299
+ "attributes": {
3300
+ "data-themed": []
3301
+ }
3302
+ },
3303
+ {
3304
+ "class": "ml-render-text",
3305
+ "attributes": {}
3306
+ }
3307
+ ]
3287
3308
  }
3288
3309
  }
package/registry/index.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "$schema": "./schema/registry-index.schema.json",
3
3
  "schemaVersion": 2,
4
4
  "name": "mlola-ui",
5
- "version": "1.9.3",
5
+ "version": "1.10.1",
6
6
  "homepage": "https://ui.mlola.com",
7
7
  "themeContract": {
8
8
  "attribute": "data-theme",
@@ -152,7 +152,8 @@
152
152
  "app-shell",
153
153
  "spinner",
154
154
  "copy-button",
155
- "password-input"
155
+ "password-input",
156
+ "render-surface"
156
157
  ],
157
158
  "blocks": [],
158
159
  "pages": [],
@@ -178,8 +179,8 @@
178
179
  },
179
180
  "registryDependencies": [],
180
181
  "engineDependencies": {
181
- "@mlola-ui/behavior": "^1.9.3",
182
- "@mlola-ui/icons": "^1.9.3"
182
+ "@mlola-ui/behavior": "^1.10.1",
183
+ "@mlola-ui/icons": "^1.10.1"
183
184
  },
184
185
  "options": [
185
186
  {
@@ -240,7 +241,7 @@
240
241
  },
241
242
  "registryDependencies": [],
242
243
  "engineDependencies": {
243
- "@mlola-ui/icons": "^1.9.3"
244
+ "@mlola-ui/icons": "^1.10.1"
244
245
  },
245
246
  "options": [
246
247
  {
@@ -402,7 +403,7 @@
402
403
  },
403
404
  "registryDependencies": [],
404
405
  "engineDependencies": {
405
- "@mlola-ui/icons": "^1.9.3"
406
+ "@mlola-ui/icons": "^1.10.1"
406
407
  },
407
408
  "options": [
408
409
  {
@@ -494,7 +495,7 @@
494
495
  },
495
496
  "registryDependencies": [],
496
497
  "engineDependencies": {
497
- "@mlola-ui/icons": "^1.9.3"
498
+ "@mlola-ui/icons": "^1.10.1"
498
499
  },
499
500
  "options": [],
500
501
  "variants": [],
@@ -547,7 +548,7 @@
547
548
  "spinner"
548
549
  ],
549
550
  "engineDependencies": {
550
- "@mlola-ui/motion": "^1.9.3"
551
+ "@mlola-ui/motion": "^1.10.1"
551
552
  },
552
553
  "options": [
553
554
  {
@@ -715,8 +716,8 @@
715
716
  },
716
717
  "registryDependencies": [],
717
718
  "engineDependencies": {
718
- "@mlola-ui/behavior": "^1.9.3",
719
- "@mlola-ui/icons": "^1.9.3"
719
+ "@mlola-ui/behavior": "^1.10.1",
720
+ "@mlola-ui/icons": "^1.10.1"
720
721
  },
721
722
  "options": [
722
723
  {
@@ -785,7 +786,7 @@
785
786
  },
786
787
  "registryDependencies": [],
787
788
  "engineDependencies": {
788
- "@mlola-ui/icons": "^1.9.3"
789
+ "@mlola-ui/icons": "^1.10.1"
789
790
  },
790
791
  "options": [],
791
792
  "variants": [],
@@ -840,7 +841,7 @@
840
841
  "modal"
841
842
  ],
842
843
  "engineDependencies": {
843
- "@mlola-ui/icons": "^1.9.3"
844
+ "@mlola-ui/icons": "^1.10.1"
844
845
  },
845
846
  "options": [],
846
847
  "variants": [],
@@ -904,8 +905,8 @@
904
905
  },
905
906
  "registryDependencies": [],
906
907
  "engineDependencies": {
907
- "@mlola-ui/behavior": "^1.9.3",
908
- "@mlola-ui/icons": "^1.9.3"
908
+ "@mlola-ui/behavior": "^1.10.1",
909
+ "@mlola-ui/icons": "^1.10.1"
909
910
  },
910
911
  "options": [
911
912
  {
@@ -994,7 +995,7 @@
994
995
  "input"
995
996
  ],
996
997
  "engineDependencies": {
997
- "@mlola-ui/icons": "^1.9.3"
998
+ "@mlola-ui/icons": "^1.10.1"
998
999
  },
999
1000
  "options": [],
1000
1001
  "variants": [],
@@ -1219,8 +1220,8 @@
1219
1220
  },
1220
1221
  "registryDependencies": [],
1221
1222
  "engineDependencies": {
1222
- "@mlola-ui/behavior": "^1.9.3",
1223
- "@mlola-ui/icons": "^1.9.3"
1223
+ "@mlola-ui/behavior": "^1.10.1",
1224
+ "@mlola-ui/icons": "^1.10.1"
1224
1225
  },
1225
1226
  "options": [
1226
1227
  {
@@ -1371,7 +1372,7 @@
1371
1372
  },
1372
1373
  "registryDependencies": [],
1373
1374
  "engineDependencies": {
1374
- "@mlola-ui/icons": "^1.9.3"
1375
+ "@mlola-ui/icons": "^1.10.1"
1375
1376
  },
1376
1377
  "options": [],
1377
1378
  "variants": [],
@@ -1422,7 +1423,7 @@
1422
1423
  },
1423
1424
  "registryDependencies": [],
1424
1425
  "engineDependencies": {
1425
- "@mlola-ui/behavior": "^1.9.3"
1426
+ "@mlola-ui/behavior": "^1.10.1"
1426
1427
  },
1427
1428
  "options": [
1428
1429
  {
@@ -1800,7 +1801,7 @@
1800
1801
  },
1801
1802
  "registryDependencies": [],
1802
1803
  "engineDependencies": {
1803
- "@mlola-ui/behavior": "^1.9.3"
1804
+ "@mlola-ui/behavior": "^1.10.1"
1804
1805
  },
1805
1806
  "options": [],
1806
1807
  "variants": [],
@@ -1853,8 +1854,8 @@
1853
1854
  "input"
1854
1855
  ],
1855
1856
  "engineDependencies": {
1856
- "@mlola-ui/behavior": "^1.9.3",
1857
- "@mlola-ui/icons": "^1.9.3"
1857
+ "@mlola-ui/behavior": "^1.10.1",
1858
+ "@mlola-ui/icons": "^1.10.1"
1858
1859
  },
1859
1860
  "options": [
1860
1861
  {
@@ -1932,8 +1933,8 @@
1932
1933
  },
1933
1934
  "registryDependencies": [],
1934
1935
  "engineDependencies": {
1935
- "@mlola-ui/behavior": "^1.9.3",
1936
- "@mlola-ui/icons": "^1.9.3"
1936
+ "@mlola-ui/behavior": "^1.10.1",
1937
+ "@mlola-ui/icons": "^1.10.1"
1937
1938
  },
1938
1939
  "options": [
1939
1940
  {
@@ -2079,7 +2080,7 @@
2079
2080
  "input"
2080
2081
  ],
2081
2082
  "engineDependencies": {
2082
- "@mlola-ui/behavior": "^1.9.3"
2083
+ "@mlola-ui/behavior": "^1.10.1"
2083
2084
  },
2084
2085
  "options": [
2085
2086
  {
@@ -2147,7 +2148,7 @@
2147
2148
  "input"
2148
2149
  ],
2149
2150
  "engineDependencies": {
2150
- "@mlola-ui/behavior": "^1.9.3"
2151
+ "@mlola-ui/behavior": "^1.10.1"
2151
2152
  },
2152
2153
  "options": [
2153
2154
  {
@@ -2307,7 +2308,7 @@
2307
2308
  },
2308
2309
  "registryDependencies": [],
2309
2310
  "engineDependencies": {
2310
- "@mlola-ui/behavior": "^1.9.3"
2311
+ "@mlola-ui/behavior": "^1.10.1"
2311
2312
  },
2312
2313
  "options": [
2313
2314
  {
@@ -2439,7 +2440,7 @@
2439
2440
  },
2440
2441
  "registryDependencies": [],
2441
2442
  "engineDependencies": {
2442
- "@mlola-ui/icons": "^1.9.3"
2443
+ "@mlola-ui/icons": "^1.10.1"
2443
2444
  },
2444
2445
  "options": [
2445
2446
  {
@@ -2527,8 +2528,8 @@
2527
2528
  "spinner"
2528
2529
  ],
2529
2530
  "engineDependencies": {
2530
- "@mlola-ui/behavior": "^1.9.3",
2531
- "@mlola-ui/icons": "^1.9.3"
2531
+ "@mlola-ui/behavior": "^1.10.1",
2532
+ "@mlola-ui/icons": "^1.10.1"
2532
2533
  },
2533
2534
  "options": [
2534
2535
  {
@@ -2683,7 +2684,7 @@
2683
2684
  },
2684
2685
  "registryDependencies": [],
2685
2686
  "engineDependencies": {
2686
- "@mlola-ui/behavior": "^1.9.3"
2687
+ "@mlola-ui/behavior": "^1.10.1"
2687
2688
  },
2688
2689
  "options": [
2689
2690
  {
@@ -2760,7 +2761,7 @@
2760
2761
  },
2761
2762
  "registryDependencies": [],
2762
2763
  "engineDependencies": {
2763
- "@mlola-ui/behavior": "^1.9.3"
2764
+ "@mlola-ui/behavior": "^1.10.1"
2764
2765
  },
2765
2766
  "options": [
2766
2767
  {
@@ -2842,7 +2843,7 @@
2842
2843
  },
2843
2844
  "registryDependencies": [],
2844
2845
  "engineDependencies": {
2845
- "@mlola-ui/icons": "^1.9.3"
2846
+ "@mlola-ui/icons": "^1.10.1"
2846
2847
  },
2847
2848
  "options": [
2848
2849
  {
@@ -2914,7 +2915,7 @@
2914
2915
  "popover"
2915
2916
  ],
2916
2917
  "engineDependencies": {
2917
- "@mlola-ui/icons": "^1.9.3"
2918
+ "@mlola-ui/icons": "^1.10.1"
2918
2919
  },
2919
2920
  "options": [
2920
2921
  {
@@ -2984,7 +2985,7 @@
2984
2985
  "popover"
2985
2986
  ],
2986
2987
  "engineDependencies": {
2987
- "@mlola-ui/icons": "^1.9.3"
2988
+ "@mlola-ui/icons": "^1.10.1"
2988
2989
  },
2989
2990
  "options": [],
2990
2991
  "variants": [],
@@ -3182,8 +3183,8 @@
3182
3183
  "input"
3183
3184
  ],
3184
3185
  "engineDependencies": {
3185
- "@mlola-ui/behavior": "^1.9.3",
3186
- "@mlola-ui/icons": "^1.9.3"
3186
+ "@mlola-ui/behavior": "^1.10.1",
3187
+ "@mlola-ui/icons": "^1.10.1"
3187
3188
  },
3188
3189
  "options": [
3189
3190
  {
@@ -3272,7 +3273,7 @@
3272
3273
  "input"
3273
3274
  ],
3274
3275
  "engineDependencies": {
3275
- "@mlola-ui/icons": "^1.9.3"
3276
+ "@mlola-ui/icons": "^1.10.1"
3276
3277
  },
3277
3278
  "options": [],
3278
3279
  "variants": [],
@@ -3327,7 +3328,7 @@
3327
3328
  "input"
3328
3329
  ],
3329
3330
  "engineDependencies": {
3330
- "@mlola-ui/icons": "^1.9.3"
3331
+ "@mlola-ui/icons": "^1.10.1"
3331
3332
  },
3332
3333
  "options": [],
3333
3334
  "variants": [],
@@ -3390,7 +3391,7 @@
3390
3391
  "popover"
3391
3392
  ],
3392
3393
  "engineDependencies": {
3393
- "@mlola-ui/icons": "^1.9.3"
3394
+ "@mlola-ui/icons": "^1.10.1"
3394
3395
  },
3395
3396
  "options": [
3396
3397
  {
@@ -3461,7 +3462,7 @@
3461
3462
  },
3462
3463
  "registryDependencies": [],
3463
3464
  "engineDependencies": {
3464
- "@mlola-ui/icons": "^1.9.3"
3465
+ "@mlola-ui/icons": "^1.10.1"
3465
3466
  },
3466
3467
  "options": [
3467
3468
  {
@@ -3580,8 +3581,8 @@
3580
3581
  },
3581
3582
  "registryDependencies": [],
3582
3583
  "engineDependencies": {
3583
- "@mlola-ui/behavior": "^1.9.3",
3584
- "@mlola-ui/icons": "^1.9.3"
3584
+ "@mlola-ui/behavior": "^1.10.1",
3585
+ "@mlola-ui/icons": "^1.10.1"
3585
3586
  },
3586
3587
  "options": [],
3587
3588
  "variants": [],
@@ -3645,7 +3646,7 @@
3645
3646
  },
3646
3647
  "registryDependencies": [],
3647
3648
  "engineDependencies": {
3648
- "@mlola-ui/behavior": "^1.9.3"
3649
+ "@mlola-ui/behavior": "^1.10.1"
3649
3650
  },
3650
3651
  "options": [
3651
3652
  {
@@ -3732,8 +3733,8 @@
3732
3733
  },
3733
3734
  "registryDependencies": [],
3734
3735
  "engineDependencies": {
3735
- "@mlola-ui/behavior": "^1.9.3",
3736
- "@mlola-ui/icons": "^1.9.3"
3736
+ "@mlola-ui/behavior": "^1.10.1",
3737
+ "@mlola-ui/icons": "^1.10.1"
3737
3738
  },
3738
3739
  "options": [],
3739
3740
  "variants": [],
@@ -3807,7 +3808,7 @@
3807
3808
  "sheet"
3808
3809
  ],
3809
3810
  "engineDependencies": {
3810
- "@mlola-ui/icons": "^1.9.3"
3811
+ "@mlola-ui/icons": "^1.10.1"
3811
3812
  },
3812
3813
  "options": [],
3813
3814
  "variants": [],
@@ -3930,7 +3931,7 @@
3930
3931
  "button"
3931
3932
  ],
3932
3933
  "engineDependencies": {
3933
- "@mlola-ui/icons": "^1.9.3"
3934
+ "@mlola-ui/icons": "^1.10.1"
3934
3935
  },
3935
3936
  "options": [
3936
3937
  {
@@ -4034,8 +4035,8 @@
4034
4035
  "input"
4035
4036
  ],
4036
4037
  "engineDependencies": {
4037
- "@mlola-ui/behavior": "^1.9.3",
4038
- "@mlola-ui/icons": "^1.9.3"
4038
+ "@mlola-ui/behavior": "^1.10.1",
4039
+ "@mlola-ui/icons": "^1.10.1"
4039
4040
  },
4040
4041
  "options": [
4041
4042
  {
@@ -4086,6 +4087,88 @@
4086
4087
  "nordic"
4087
4088
  ]
4088
4089
  }
4090
+ },
4091
+ {
4092
+ "$schema": "../schema/registry-item.schema.json",
4093
+ "schemaVersion": 2,
4094
+ "name": "render-surface",
4095
+ "title": "Render Surface",
4096
+ "description": "Draws the interface an agent composed as A2UI messages, checked against the Mlola Render catalog and built from Mlola components",
4097
+ "category": "data",
4098
+ "tags": [
4099
+ "agent",
4100
+ "a2ui",
4101
+ "generative",
4102
+ "render"
4103
+ ],
4104
+ "type": "registry:ui",
4105
+ "usage": {
4106
+ "importPath": "{{aliases.components}}/render-surface",
4107
+ "exportName": "RenderSurface",
4108
+ "isDefault": false
4109
+ },
4110
+ "registryDependencies": [
4111
+ "accordion",
4112
+ "alert",
4113
+ "avatar",
4114
+ "badge",
4115
+ "button",
4116
+ "card",
4117
+ "checkbox",
4118
+ "date-picker",
4119
+ "empty-state",
4120
+ "input",
4121
+ "progress",
4122
+ "radio-group",
4123
+ "select",
4124
+ "slider",
4125
+ "table",
4126
+ "tabs",
4127
+ "textarea",
4128
+ "toggle"
4129
+ ],
4130
+ "engineDependencies": {
4131
+ "@mlola-ui/behavior": "^1.10.1"
4132
+ },
4133
+ "options": [
4134
+ {
4135
+ "component": "RenderSurface",
4136
+ "prop": "theme",
4137
+ "values": [
4138
+ "surface",
4139
+ "inherit"
4140
+ ],
4141
+ "default": "surface",
4142
+ "description": "\"surface\" draws in the theme the agent named; \"inherit\" keeps the theme of the page around it."
4143
+ }
4144
+ ],
4145
+ "variants": [],
4146
+ "sizes": [],
4147
+ "files": [
4148
+ {
4149
+ "path": "packages/components/_internal/react.ts",
4150
+ "target": "{{aliases.components}}/_internal/react.ts",
4151
+ "type": "registry:ui",
4152
+ "integrity": "sha256-INfds1J2f1MLpN6kBXz0GkfBEMIiRlhv0DXX455qAZo="
4153
+ },
4154
+ {
4155
+ "path": "packages/components/render-surface/render-surface.tsx",
4156
+ "target": "{{aliases.components}}/render-surface.tsx",
4157
+ "type": "registry:ui",
4158
+ "integrity": "sha256-3L4CcYBHjwb1QyKGCygC4NEPL4TajSZiNcMzy4Uf0IM="
4159
+ }
4160
+ ],
4161
+ "themeContract": {
4162
+ "attribute": "data-theme",
4163
+ "modeAttribute": "data-mode",
4164
+ "compatibleThemes": [
4165
+ "graphite",
4166
+ "atelier",
4167
+ "machined",
4168
+ "aerogel",
4169
+ "nordic"
4170
+ ]
4171
+ }
4089
4172
  }
4090
4173
  ],
4091
4174
  "generatedAt": "deterministic"