@adia-ai/gen-ui 0.8.52 → 0.8.54
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/CHANGELOG.md +18 -0
- package/compose/strategies/monolithic/_shared.js +2 -2
- package/compose/transpiler/transpiler-maps.js +18 -1
- package/corpus/chunk-embeddings.json +1 -1
- package/corpus/chunks/_index.json +5 -7
- package/corpus/chunks/_source-hashes.json +105 -101
- package/corpus/chunks/access-denied-with-request.json +1 -1
- package/corpus/chunks/access-request-pending.json +1 -1
- package/corpus/chunks/accordion-settings.json +20 -50
- package/corpus/chunks/agent-cost-detailed.json +3 -3
- package/corpus/chunks/api-keys-create.json +1 -1
- package/corpus/chunks/billing-overview.json +4 -4
- package/corpus/chunks/chart-in-card-chart-with-filter-pills.json +4 -4
- package/corpus/chunks/chart-with-filter-pills.json +4 -4
- package/corpus/chunks/code-snippet.json +1 -1
- package/corpus/chunks/contact-support-form.json +2 -2
- package/corpus/chunks/conversion-funnel-with-segment-compare.json +4 -4
- package/corpus/chunks/dashboard-acquisition-panel.json +4 -4
- package/corpus/chunks/dashboard-notifications-panel.json +4 -4
- package/corpus/chunks/dashboard-reports-panel.json +2 -2
- package/corpus/chunks/dashboard-reports-table.json +2 -2
- package/corpus/chunks/dashboard-traffic-channels.json +4 -4
- package/corpus/chunks/data-export-request.json +1 -1
- package/corpus/chunks/date-time-picker-form.json +9 -17
- package/corpus/chunks/drawer-custom-roles.json +1 -1
- package/corpus/chunks/drawer-gcal.json +1 -1
- package/corpus/chunks/drawer-github.json +1 -1
- package/corpus/chunks/drawer-revoke-session.json +1 -1
- package/corpus/chunks/export-flow-async.json +1 -1
- package/corpus/chunks/extended-profile-form.json +2 -2
- package/corpus/chunks/filter-bar-saved-views.json +4 -4
- package/corpus/chunks/form-drawer-tall-form.json +1 -1
- package/corpus/chunks/form-fields-two-column.json +1 -3
- package/corpus/chunks/import-mapping-flow.json +18 -2
- package/corpus/chunks/integrations-grid.json +2 -2
- package/corpus/chunks/member-edit-drawer.json +2 -2
- package/corpus/chunks/notification-badges-feed.json +4 -4
- package/corpus/chunks/permission-matrix-table.json +1 -1
- package/corpus/chunks/radio-button-group.json +8 -16
- package/corpus/chunks/reg-extended-profile.json +2 -2
- package/corpus/chunks/reg-helpdesk-grid.json +2 -2
- package/corpus/chunks/reg-step-shell.json +2 -2
- package/corpus/chunks/reg-team-size.json +2 -2
- package/corpus/chunks/revenue-heatmap.json +2 -2
- package/corpus/chunks/segmented-control-billing-tabs.json +4 -4
- package/corpus/chunks/settings-appearance-primitives.json +2 -2
- package/corpus/chunks/signup-team-size-form.json +2 -2
- package/corpus/chunks/toolbar-rich-text-editor.json +4 -4
- package/corpus/chunks/verification-document-upload.json +1 -1
- package/corpus/chunks/verification-status.json +1 -1
- package/corpus/manifest.json +2 -2
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"gap": "5"
|
|
10
10
|
},
|
|
11
|
-
"html": "<col-ui\n gap=\"5\" style=\"max-width: 880px; margin-inline: auto; padding: var(--a-space-6);\">\n\n <!-- ═══════════════ Header + step progress ═══════════════ -->\n <col-ui gap=\"3\">\n <h1 style=\"margin: 0;\">Import customer data</h1>\n <text-ui color=\"subtle\">Upload a CSV or JSON file, map your columns to our fields, then preview before committing the import.</text-ui>\n <!-- step-progress-ui ships with `flex: 0 1 18rem` (designed for the\n registration shell's row-flex layout). In a col-flex parent that\n flex-basis becomes a 288px vertical bloat — override here. -->\n <step-progress-ui value=\"2\" total=\"3\" caption=\"Step 2 of 3 · Map fields\" style=\"flex: none;\"></step-progress-ui>\n </col-ui>\n\n <!-- ═══════════════ Step 1 — Upload (collapsed) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"check\" size=\"sm\" style=\"--avatar-bg: var(--a-success-bg); --avatar-fg: var(--md-sys-color-success-on-success);\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>1. Upload file</text-ui>\n <badge-ui text=\"Done\" variant=\"success\"></badge-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">customers-2026-q1.csv · 1,243 rows · 8 columns</text-ui>\n </span>\n <span slot=\"action\">\n <button-ui text=\"Replace\" variant=\"ghost\" size=\"sm\" icon=\"arrow-counter-clockwise\"></button-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- ═══════════════ Step 2 — Field mapping (active) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"arrows-horizontal\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>2. Map your columns to our fields</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">We auto-detected 5 of 8 columns. Review and adjust before continuing — required fields are marked.</text-ui>\n </span>\n </header>\n <section>\n <col-ui gap=\"3\">\n <alert-ui variant=\"info\" icon=\"info\" text=\"Pro tip — pick 'Don't import' to skip a column. You can always re-run the import to bring more fields later.\"></alert-ui>\n\n <!-- Mapping rows — each row is source column + arrow + target dropdown.\n list-ui[divider] gives us per-row separators; grid-ui inside each\n row creates the 3-column structure (source | sample | target).\n NOTE: declarative <tr>/<td> inside <table-ui> would be stripped by\n the HTML parser (foster-parented). table-ui takes programmatic\n columns/data; for control-row layouts like this, list-ui composition\n is the canonical pattern. -->\n <list-ui id=\"import-mapping-list\" divider>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>full_name</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Avery Chen</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"name\" name=\"map_full_name\">\n <option value=\"\">Don't import</option>\n <option value=\"name\" selected>Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>email_addr</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">avery@acme.com</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"email\" name=\"map_email_addr\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\" selected>Email (required)</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>company</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Acme Inc</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"team\" name=\"map_company\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\" selected>Team / Company</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>job_title</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Senior Engineer</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"role\" name=\"map_job_title\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\" selected>Role / Title</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>signup_date</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2026-03-15</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_signup_date\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"created_at\">Created at</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>region</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">EMEA</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_region\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"region\">Region</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>notes</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">\"VIP — handle with care\"</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_notes\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"notes\">Notes</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>internal_id</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">cust_5392</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_internal_id\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"external_id\">External ID</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n </list-ui>\n\n <!-- Validation summary — what'll get imported -->\n <row-ui gap=\"3\" align=\"center\" style=\"background: var(--a-bg-muted); padding: var(--a-space-3); border-radius: var(--a-radius-md);\">\n <icon-ui name=\"check-circle\" tone=\"success\"></icon-ui>\n <col-ui gap=\"0\" style=\"flex: 1;\">\n <text-ui strong>4 fields mapped · 4 columns skipped</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">1,243 rows ready to import. Email column passed validation (no malformed addresses).</text-ui>\n </col-ui>\n </row-ui>\n </col-ui>\n </section>\n <footer slot=\"footer\">\n <row-ui gap=\"2\" justify=\"space-between\" style=\"width: 100%;\">\n <button-ui text=\"Back\" variant=\"ghost\"></button-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n <button-ui text=\"Preview import →\" variant=\"primary\"></button-ui>\n </row-ui>\n </row-ui>\n </footer>\n </card-ui>\n\n <!-- ═══════════════ Step 3 — Preview (pending) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"eye\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong color=\"subtle\">3. Preview & confirm</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">Final check before we commit 1,243 rows.</text-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- Composition notes (rendered as a footnote for the demo, not part of\n the production UI). Helps future authors understand why this shape. -->\n <col-ui gap=\"2\" style=\"margin-top: var(--a-space-6); padding-block-start: var(--a-space-5); border-top: 1px solid var(--md-sys-color-neutral-outline);\">\n <text-ui size=\"sm\" color=\"subtle\"><strong>Composition rules.</strong> Three steps: upload → map → preview, each as a card-ui with header (icon + heading + status badge). The mapping itself is a list-ui[divider] of source-column / target-field rows — NOT a table-ui (the HTML parser strips declarative <tr> inside custom elements; table-ui takes programmatic .columns/.data instead). Each row is a 3-col grid (source label + sample → arrow → target select). The \"fields mapped\" summary lives at the bottom of the active card; the footer action bar carries Back + Cancel + primary Continue.</text-ui>\n </col-ui>\n\n</col-ui>",
|
|
11
|
+
"html": "<col-ui\n gap=\"5\" style=\"max-width: 880px; margin-inline: auto; padding: var(--a-space-6);\">\n\n <!-- ═══════════════ Header + step progress ═══════════════ -->\n <col-ui gap=\"3\">\n <h1 style=\"margin: 0;\">Import customer data</h1>\n <text-ui color=\"subtle\">Upload a CSV or JSON file, map your columns to our fields, then preview before committing the import.</text-ui>\n <!-- step-progress-ui ships with `flex: 0 1 18rem` (designed for the\n registration shell's row-flex layout). In a col-flex parent that\n flex-basis becomes a 288px vertical bloat — override here. -->\n <step-progress-ui value=\"2\" total=\"3\" caption=\"Step 2 of 3 · Map fields\" style=\"flex: none;\"></step-progress-ui>\n </col-ui>\n\n <!-- ═══════════════ Step 1 — Upload (collapsed) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"check\" size=\"sm\" style=\"--avatar-bg: var(--a-success-bg); --avatar-fg: var(--md-sys-color-success-on-success);\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>1. Upload file</text-ui>\n <badge-ui text=\"Done\" variant=\"success\"></badge-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">customers-2026-q1.csv · 1,243 rows · 8 columns</text-ui>\n </span>\n <span slot=\"action\">\n <button-ui text=\"Replace\" variant=\"ghost\" size=\"sm\" icon=\"arrow-counter-clockwise\"></button-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- ═══════════════ Step 2 — Field mapping (active) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"arrows-horizontal\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>2. Map your columns to our fields</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">We auto-detected 5 of 8 columns. Review and adjust before continuing — required fields are marked.</text-ui>\n </span>\n </header>\n <section>\n <col-ui gap=\"3\">\n <alert-ui variant=\"info\" icon=\"info\" text=\"Pro tip — pick 'Don't import' to skip a column. You can always re-run the import to bring more fields later.\"></alert-ui>\n\n <!-- Mapping rows — each row is source column + arrow + target dropdown.\n list-ui[divider] gives us per-row separators; grid-ui inside each\n row creates the 3-column structure (source | sample | target).\n NOTE: declarative <tr>/<td> inside <table-ui> would be stripped by\n the HTML parser (foster-parented). table-ui takes programmatic\n columns/data; for control-row layouts like this, list-ui composition\n is the canonical pattern. -->\n <list-ui id=\"import-mapping-list\" divider>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>full_name</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Avery Chen</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"name\" name=\"map_full_name\">\n <option value=\"\">Don't import</option>\n <option value=\"name\" selected>Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>email_addr</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">avery@acme.com</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"email\" name=\"map_email_addr\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\" selected>Email (required)</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>company</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Acme Inc</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"team\" name=\"map_company\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\" selected>Team / Company</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>job_title</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Senior Engineer</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"role\" name=\"map_job_title\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\" selected>Role / Title</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>signup_date</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2026-03-15</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_signup_date\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"created_at\">Created at</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>region</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">EMEA</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_region\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"region\">Region</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>notes</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">\"VIP — handle with care\"</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_notes\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"notes\">Notes</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>internal_id</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">cust_5392</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_internal_id\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"external_id\">External ID</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n </list-ui>\n\n <!-- Validation summary — what'll get imported -->\n <row-ui gap=\"3\" align=\"center\" style=\"background: var(--a-bg-muted); padding: var(--a-space-3); border-radius: var(--a-radius-md);\">\n <icon-ui name=\"check-circle\" tone=\"success\"></icon-ui>\n <col-ui gap=\"0\" style=\"flex: 1;\">\n <text-ui strong>4 fields mapped · 4 columns skipped</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">1,243 rows ready to import. Email column passed validation (no malformed addresses).</text-ui>\n </col-ui>\n </row-ui>\n </col-ui>\n </section>\n <footer slot=\"footer\">\n <row-ui gap=\"2\" justify=\"space-between\" style=\"width: 100%;\">\n <button-ui text=\"Back\" variant=\"ghost\"></button-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n <button-ui text=\"Preview import →\" variant=\"primary\"></button-ui>\n </row-ui>\n </row-ui>\n </footer>\n </card-ui>\n\n <!-- ═══════════════ Step 3 — Preview (pending) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"eye\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong color=\"subtle\">3. Preview & confirm</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">Final check before we commit 1,243 rows.</text-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- Composition notes (rendered as a footnote for the demo, not part of\n the production UI). Helps future authors understand why this shape. -->\n <col-ui gap=\"2\" style=\"margin-top: var(--a-space-6); padding-block-start: var(--a-space-5); border-top: 1px solid var(--md-sys-color-neutral-outline);\">\n <text-ui size=\"sm\" color=\"subtle\"><strong>Composition rules.</strong> Three steps: upload → map → preview, each as a card-ui with header (icon + heading + status badge). The mapping itself is a list-ui[divider] of source-column / target-field rows — NOT a table-ui (the HTML parser strips declarative <tr> inside custom elements; table-ui takes programmatic .columns/.data instead). Each row is a 3-col grid (source label + sample → arrow → target select). The \"fields mapped\" summary lives at the bottom of the active card; the footer action bar carries Back + Cancel + primary Continue.</text-ui>\n </col-ui>\n\n</col-ui>",
|
|
12
12
|
"source": "catalog/ui-patterns/app/import-mapping/import-mapping.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "data-management",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"migration"
|
|
26
26
|
]
|
|
27
27
|
},
|
|
28
|
-
"captured_at": "2026-08-
|
|
28
|
+
"captured_at": "2026-08-26T02:51:21.925Z",
|
|
29
29
|
"template": [
|
|
30
30
|
{
|
|
31
31
|
"id": "text",
|
|
@@ -265,6 +265,8 @@
|
|
|
265
265
|
"id": "grid",
|
|
266
266
|
"component": "Grid",
|
|
267
267
|
"slot": "content",
|
|
268
|
+
"align": "center",
|
|
269
|
+
"columns": "3",
|
|
268
270
|
"gap": "3",
|
|
269
271
|
"children": [
|
|
270
272
|
"column-3",
|
|
@@ -338,6 +340,8 @@
|
|
|
338
340
|
"id": "grid-2",
|
|
339
341
|
"component": "Grid",
|
|
340
342
|
"slot": "content",
|
|
343
|
+
"align": "center",
|
|
344
|
+
"columns": "3",
|
|
341
345
|
"gap": "3",
|
|
342
346
|
"children": [
|
|
343
347
|
"column-4",
|
|
@@ -411,6 +415,8 @@
|
|
|
411
415
|
"id": "grid-3",
|
|
412
416
|
"component": "Grid",
|
|
413
417
|
"slot": "content",
|
|
418
|
+
"align": "center",
|
|
419
|
+
"columns": "3",
|
|
414
420
|
"gap": "3",
|
|
415
421
|
"children": [
|
|
416
422
|
"column-5",
|
|
@@ -484,6 +490,8 @@
|
|
|
484
490
|
"id": "grid-4",
|
|
485
491
|
"component": "Grid",
|
|
486
492
|
"slot": "content",
|
|
493
|
+
"align": "center",
|
|
494
|
+
"columns": "3",
|
|
487
495
|
"gap": "3",
|
|
488
496
|
"children": [
|
|
489
497
|
"column-6",
|
|
@@ -545,6 +553,8 @@
|
|
|
545
553
|
"id": "grid-5",
|
|
546
554
|
"component": "Grid",
|
|
547
555
|
"slot": "content",
|
|
556
|
+
"align": "center",
|
|
557
|
+
"columns": "3",
|
|
548
558
|
"gap": "3",
|
|
549
559
|
"children": [
|
|
550
560
|
"column-7",
|
|
@@ -610,6 +620,8 @@
|
|
|
610
620
|
"id": "grid-6",
|
|
611
621
|
"component": "Grid",
|
|
612
622
|
"slot": "content",
|
|
623
|
+
"align": "center",
|
|
624
|
+
"columns": "3",
|
|
613
625
|
"gap": "3",
|
|
614
626
|
"children": [
|
|
615
627
|
"column-8",
|
|
@@ -671,6 +683,8 @@
|
|
|
671
683
|
"id": "grid-7",
|
|
672
684
|
"component": "Grid",
|
|
673
685
|
"slot": "content",
|
|
686
|
+
"align": "center",
|
|
687
|
+
"columns": "3",
|
|
674
688
|
"gap": "3",
|
|
675
689
|
"children": [
|
|
676
690
|
"column-9",
|
|
@@ -732,6 +746,8 @@
|
|
|
732
746
|
"id": "grid-8",
|
|
733
747
|
"component": "Grid",
|
|
734
748
|
"slot": "content",
|
|
749
|
+
"align": "center",
|
|
750
|
+
"columns": "3",
|
|
735
751
|
"gap": "3",
|
|
736
752
|
"children": [
|
|
737
753
|
"column-10",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui>\n <header>\n <h3>Integrations</h3>\n <p slot=\"description\">Connect your favourite tools to your workspace.</p>\n <span slot=\"action\">\n <button-ui text=\"Browse marketplace\" variant=\"ghost\" size=\"sm\" icon=\"grid-four\"></button-ui>\n </span>\n </header>\n <section>\n <grid-ui columns=\"1 2@sm 4@md\" gap=\"3\">\n <integration-card-ui provider=\"slack\" name=\"Slack\" logo=\"slack-logo\" status=\"connected\" description=\"Team messaging and notifications.\"></integration-card-ui>\n <integration-card-ui provider=\"github\" name=\"GitHub\" logo=\"github-logo\" status=\"connected\" description=\"Code repository and CI pipeline.\"></integration-card-ui>\n <integration-card-ui provider=\"jira\" name=\"Jira\" logo=\"
|
|
9
|
+
"html": "<card-ui>\n <header>\n <h3>Integrations</h3>\n <p slot=\"description\">Connect your favourite tools to your workspace.</p>\n <span slot=\"action\">\n <button-ui text=\"Browse marketplace\" variant=\"ghost\" size=\"sm\" icon=\"grid-four\"></button-ui>\n </span>\n </header>\n <section>\n <grid-ui columns=\"1 2@sm 4@md\" gap=\"3\">\n <integration-card-ui provider=\"slack\" name=\"Slack\" logo=\"slack-logo\" status=\"connected\" description=\"Team messaging and notifications.\"></integration-card-ui>\n <integration-card-ui provider=\"github\" name=\"GitHub\" logo=\"github-logo\" status=\"connected\" description=\"Code repository and CI pipeline.\"></integration-card-ui>\n <integration-card-ui provider=\"jira\" name=\"Jira\" logo=\"kanban\" status=\"connected\" description=\"Issue tracking and sprints.\"></integration-card-ui>\n <integration-card-ui provider=\"linear\" name=\"Linear\" logo=\"square-logo\" status=\"available\" description=\"Modern issue tracking for teams.\"></integration-card-ui>\n </grid-ui>\n </section>\n</card-ui>",
|
|
10
10
|
"source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "settings",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"id": "jira",
|
|
94
94
|
"component": "IntegrationCard",
|
|
95
95
|
"description": "Issue tracking and sprints.",
|
|
96
|
-
"logo": "
|
|
96
|
+
"logo": "kanban",
|
|
97
97
|
"name": "Jira",
|
|
98
98
|
"provider": "jira",
|
|
99
99
|
"status": "connected"
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"settings"
|
|
25
25
|
]
|
|
26
26
|
},
|
|
27
|
-
"captured_at": "2026-08-
|
|
27
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
28
28
|
"template": [
|
|
29
29
|
{
|
|
30
30
|
"id": "text",
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
},
|
|
174
174
|
{
|
|
175
175
|
"id": "m-status",
|
|
176
|
-
"component": "
|
|
176
|
+
"component": "Segmented",
|
|
177
177
|
"value": "active",
|
|
178
178
|
"children": [
|
|
179
179
|
"segment",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"unread"
|
|
38
38
|
]
|
|
39
39
|
},
|
|
40
|
-
"captured_at": "2026-08-
|
|
40
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
41
41
|
"template": [
|
|
42
42
|
{
|
|
43
43
|
"id": "text",
|
|
@@ -71,8 +71,8 @@
|
|
|
71
71
|
"value": "mentions"
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
|
-
"id": "segmented
|
|
75
|
-
"component": "
|
|
74
|
+
"id": "segmented",
|
|
75
|
+
"component": "Segmented",
|
|
76
76
|
"value": "all",
|
|
77
77
|
"children": [
|
|
78
78
|
"segment",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"align": "center",
|
|
95
95
|
"gap": "2",
|
|
96
96
|
"children": [
|
|
97
|
-
"segmented
|
|
97
|
+
"segmented",
|
|
98
98
|
"button"
|
|
99
99
|
]
|
|
100
100
|
},
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "radio-button-group",
|
|
3
3
|
"kind": "block",
|
|
4
|
-
"primary": "
|
|
4
|
+
"primary": "radio-group-ui",
|
|
5
5
|
"page": "/catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {
|
|
9
9
|
"label": "Repeats"
|
|
10
10
|
},
|
|
11
|
-
"html": "<
|
|
11
|
+
"html": "<radio-group-ui label=\"Repeats\">\n <radio-ui name=\"recur\" value=\"none\" label=\"Doesn't repeat\" checked></radio-ui>\n <radio-ui name=\"recur\" value=\"daily\" label=\"Daily\"></radio-ui>\n <radio-ui name=\"recur\" value=\"weekly\" label=\"Weekly\"></radio-ui>\n <radio-ui name=\"recur\" value=\"monthly\" label=\"Monthly\"></radio-ui>\n </radio-group-ui>",
|
|
12
12
|
"source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "forms",
|
|
15
|
-
"description": "Radio button group for single-select choice — radio-ui options
|
|
15
|
+
"description": "Radio button group for single-select choice — bare radio-ui options grouped under radio-group-ui's own label, letting users pick exactly one recurrence option from a named group.",
|
|
16
16
|
"keywords": [
|
|
17
17
|
"radio",
|
|
18
18
|
"button",
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
"option",
|
|
24
24
|
"form",
|
|
25
25
|
"single-select",
|
|
26
|
-
"
|
|
26
|
+
"radio-group-ui",
|
|
27
27
|
"recurrence",
|
|
28
28
|
"pick",
|
|
29
29
|
"one"
|
|
30
30
|
]
|
|
31
31
|
},
|
|
32
|
-
"captured_at": "2026-
|
|
32
|
+
"captured_at": "2026-08-25T22:29:02.730Z",
|
|
33
33
|
"template": [
|
|
34
34
|
{
|
|
35
35
|
"id": "recur",
|
|
@@ -61,23 +61,15 @@
|
|
|
61
61
|
"value": "monthly"
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
|
-
"id": "
|
|
65
|
-
"component": "
|
|
66
|
-
"
|
|
64
|
+
"id": "root",
|
|
65
|
+
"component": "RadioGroup",
|
|
66
|
+
"label": "Repeats",
|
|
67
67
|
"children": [
|
|
68
68
|
"recur",
|
|
69
69
|
"radio",
|
|
70
70
|
"radio-2",
|
|
71
71
|
"radio-3"
|
|
72
72
|
]
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"id": "root",
|
|
76
|
-
"component": "Field",
|
|
77
|
-
"label": "Repeats",
|
|
78
|
-
"children": [
|
|
79
|
-
"column"
|
|
80
|
-
]
|
|
81
73
|
}
|
|
82
74
|
]
|
|
83
75
|
}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"industry"
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
|
-
"captured_at": "2026-
|
|
26
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
27
27
|
"template": [
|
|
28
28
|
{
|
|
29
29
|
"id": "title",
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
},
|
|
234
234
|
{
|
|
235
235
|
"id": "hours",
|
|
236
|
-
"component": "
|
|
236
|
+
"component": "Segmented",
|
|
237
237
|
"value": "9to5",
|
|
238
238
|
"children": [
|
|
239
239
|
"segment",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"configuration"
|
|
23
23
|
]
|
|
24
24
|
},
|
|
25
|
-
"captured_at": "2026-
|
|
25
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
26
26
|
"template": [
|
|
27
27
|
{
|
|
28
28
|
"id": "support-email",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
"id": "hours",
|
|
82
|
-
"component": "
|
|
82
|
+
"component": "Segmented",
|
|
83
83
|
"value": "247",
|
|
84
84
|
"children": [
|
|
85
85
|
"segment",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"layout": "page"
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
|
-
"captured_at": "2026-08-
|
|
68
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
69
69
|
"template": [
|
|
70
70
|
{
|
|
71
71
|
"id": "adia-mark",
|
|
@@ -390,7 +390,7 @@
|
|
|
390
390
|
},
|
|
391
391
|
{
|
|
392
392
|
"id": "hours",
|
|
393
|
-
"component": "
|
|
393
|
+
"component": "Segmented",
|
|
394
394
|
"value": "9to5",
|
|
395
395
|
"children": [
|
|
396
396
|
"segment",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"employees"
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
|
-
"captured_at": "2026-
|
|
26
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
27
27
|
"template": [
|
|
28
28
|
{
|
|
29
29
|
"id": "segment",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"id": "team-size",
|
|
48
|
-
"component": "
|
|
48
|
+
"component": "Segmented",
|
|
49
49
|
"value": "2-10",
|
|
50
50
|
"children": [
|
|
51
51
|
"segment",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui>\n <header>\n <h3>Revenue activity</h3>\n <p slot=\"description\">Sales intensity by day of week and hour</p>\n </header>\n <section>\n <heatmap-ui id=\"revenue-heatmap\" type=\"day-grid\" rows=\"7\" cols=\"24\"\n data='[\n {\"
|
|
9
|
+
"html": "<card-ui>\n <header>\n <h3>Revenue activity</h3>\n <p slot=\"description\">Sales intensity by day of week and hour</p>\n </header>\n <section>\n <heatmap-ui id=\"revenue-heatmap\" type=\"day-grid\" rows=\"7\" cols=\"24\"\n data='[\n {\"r\":0,\"c\":9,\"v\":82},{\"r\":0,\"c\":10,\"v\":91},{\"r\":0,\"c\":14,\"v\":74},\n {\"r\":1,\"c\":9,\"v\":88},{\"r\":1,\"c\":10,\"v\":95},{\"r\":1,\"c\":11,\"v\":89},\n {\"r\":2,\"c\":10,\"v\":76},{\"r\":2,\"c\":14,\"v\":83},{\"r\":2,\"c\":15,\"v\":71},\n {\"r\":3,\"c\":9,\"v\":92},{\"r\":3,\"c\":10,\"v\":98},{\"r\":3,\"c\":16,\"v\":68},\n {\"r\":4,\"c\":10,\"v\":85},{\"r\":4,\"c\":11,\"v\":79},{\"r\":4,\"c\":15,\"v\":88}\n ]'></heatmap-ui>\n </section>\n</card-ui>",
|
|
10
10
|
"source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "data",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"component": "Heatmap",
|
|
55
55
|
"type": "day-grid",
|
|
56
56
|
"cols": 24,
|
|
57
|
-
"data": "[\n {\"
|
|
57
|
+
"data": "[\n {\"r\":0,\"c\":9,\"v\":82},{\"r\":0,\"c\":10,\"v\":91},{\"r\":0,\"c\":14,\"v\":74},\n {\"r\":1,\"c\":9,\"v\":88},{\"r\":1,\"c\":10,\"v\":95},{\"r\":1,\"c\":11,\"v\":89},\n {\"r\":2,\"c\":10,\"v\":76},{\"r\":2,\"c\":14,\"v\":83},{\"r\":2,\"c\":15,\"v\":71},\n {\"r\":3,\"c\":9,\"v\":92},{\"r\":3,\"c\":10,\"v\":98},{\"r\":3,\"c\":16,\"v\":68},\n {\"r\":4,\"c\":10,\"v\":85},{\"r\":4,\"c\":11,\"v\":79},{\"r\":4,\"c\":15,\"v\":88}\n ]",
|
|
58
58
|
"rows": 7
|
|
59
59
|
},
|
|
60
60
|
{
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"current"
|
|
36
36
|
]
|
|
37
37
|
},
|
|
38
|
-
"captured_at": "2026-08-
|
|
38
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
39
39
|
"template": [
|
|
40
40
|
{
|
|
41
41
|
"id": "avatar",
|
|
@@ -135,8 +135,8 @@
|
|
|
135
135
|
"value": "annual"
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
|
-
"id": "segmented
|
|
139
|
-
"component": "
|
|
138
|
+
"id": "segmented",
|
|
139
|
+
"component": "Segmented",
|
|
140
140
|
"value": "monthly",
|
|
141
141
|
"children": [
|
|
142
142
|
"segment",
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
"component": "Field",
|
|
149
149
|
"label": "Billing interval",
|
|
150
150
|
"children": [
|
|
151
|
-
"segmented
|
|
151
|
+
"segmented"
|
|
152
152
|
]
|
|
153
153
|
},
|
|
154
154
|
{
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"state"
|
|
28
28
|
]
|
|
29
29
|
},
|
|
30
|
-
"captured_at": "2026-
|
|
30
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
31
31
|
"template": [
|
|
32
32
|
{
|
|
33
33
|
"id": "segment",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"id": "appearance-demo-scheme",
|
|
52
|
-
"component": "
|
|
52
|
+
"component": "Segmented",
|
|
53
53
|
"value": "auto",
|
|
54
54
|
"children": [
|
|
55
55
|
"segment",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"form": "signup"
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
|
-
"captured_at": "2026-08-
|
|
56
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
57
57
|
"template": [
|
|
58
58
|
{
|
|
59
59
|
"id": "text",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
"id": "team-size",
|
|
107
|
-
"component": "
|
|
107
|
+
"component": "Segmented",
|
|
108
108
|
"value": "2-10",
|
|
109
109
|
"children": [
|
|
110
110
|
"segment",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"dividers"
|
|
40
40
|
]
|
|
41
41
|
},
|
|
42
|
-
"captured_at": "2026-
|
|
42
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
43
43
|
"template": [
|
|
44
44
|
{
|
|
45
45
|
"id": "segment",
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"value": "preview"
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
|
-
"id": "segmented
|
|
58
|
-
"component": "
|
|
57
|
+
"id": "segmented",
|
|
58
|
+
"component": "Segmented",
|
|
59
59
|
"value": "edit",
|
|
60
60
|
"children": [
|
|
61
61
|
"segment",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"id": "toolbar-group",
|
|
67
67
|
"component": "ToolbarGroup",
|
|
68
68
|
"children": [
|
|
69
|
-
"segmented
|
|
69
|
+
"segmented"
|
|
70
70
|
]
|
|
71
71
|
},
|
|
72
72
|
{
|
package/corpus/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adia-ai/gen-ui",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.54",
|
|
4
4
|
"description": "AdiaUI generative-UI system — compose strategies, retrieval, the harvested training corpus, and catalog-aware + LLM-judge validation. Emits A2UI protocol messages; pairs with @adia-ai/a2ui (the protocol runtime). Folded from @adia-ai/a2ui-{compose,retrieval,corpus} + the catalog/semantic halves of the former @adia-ai/a2ui-validator (ADR-0048).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./compose/index.js",
|