@adia-ai/a2ui-corpus 0.7.28 → 0.8.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/CHANGELOG.md +5 -0
- package/catalog-a2ui_0_9.json +21 -21
- package/chunk-embeddings.json +1 -1
- package/chunks/_index.json +1 -1
- package/chunks/agent-canvas-shell.json +3 -3
- package/chunks/card-with-sparkline.json +2 -2
- package/chunks/chat-page-shell.json +3 -3
- package/chunks/doc-editor-shell.json +2 -2
- package/chunks/feature-grid-icons.json +2 -2
- package/chunks/gallery-page-shell.json +2 -2
- package/chunks/import-mapping-flow.json +2 -2
- package/chunks/kanban-page-shell.json +2 -2
- package/chunks/playground-css-channel.json +3 -3
- package/chunks/row-icon-label.json +2 -2
- package/package.json +1 -1
package/chunks/_index.json
CHANGED
|
@@ -22,12 +22,12 @@
|
|
|
22
22
|
{
|
|
23
23
|
"name": "chat",
|
|
24
24
|
"tagName": "section",
|
|
25
|
-
"html": "<header style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--
|
|
25
|
+
"html": "<header style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <text-ui strong size=\"sm\">Agent</text-ui>\n </header>\n <section style=\"flex:1; overflow:auto; padding:var(--a-space-2);\">\n <text-ui size=\"sm\" color=\"subtle\">Agent messages will appear here.</text-ui>\n </section>\n <footer style=\"padding:var(--a-space-2); border-top:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <input-ui placeholder=\"Ask the agent…\" size=\"sm\"></input-ui>\n </footer>"
|
|
26
26
|
}
|
|
27
27
|
],
|
|
28
28
|
"nested": [],
|
|
29
29
|
"attrs": {},
|
|
30
|
-
"html": "<article style=\"display:flex; height:100vh;\">\n <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n <header data-chunk-slot=\"toolbar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--
|
|
30
|
+
"html": "<article style=\"display:flex; height:100vh;\">\n <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n <header data-chunk-slot=\"toolbar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; justify-content:space-between;\">\n <row-ui gap=\"2\" align=\"center\">\n <button-ui icon=\"hand\" variant=\"ghost\" size=\"sm\" tooltip=\"Pan\"></button-ui>\n <button-ui icon=\"cursor\" variant=\"ghost\" size=\"sm\" tooltip=\"Select\"></button-ui>\n <separator-ui orientation=\"vertical\"></separator-ui>\n <button-ui icon=\"plus\" variant=\"ghost\" size=\"sm\" tooltip=\"Add node\"></button-ui>\n <button-ui icon=\"trash\" variant=\"ghost\" size=\"sm\" tooltip=\"Delete\"></button-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Run\" variant=\"primary\" size=\"sm\" icon=\"play\"></button-ui>\n <button-ui text=\"Export\" variant=\"outline\" size=\"sm\" icon=\"download\"></button-ui>\n </row-ui>\n </header>\n\n <section data-chunk-slot=\"canvas\" style=\"flex:1; background:var(--a-bg-subtle); position:relative; overflow:hidden;\">\n <text-ui color=\"subtle\" style=\"position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);\">Canvas surface</text-ui>\n </section>\n </section>\n\n <aside style=\"width:280px; display:flex; flex-direction:column; border-left:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <section data-chunk-slot=\"inspector\" style=\"flex:1; overflow:auto; padding:var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <stack-ui gap=\"3\">\n <text-ui strong size=\"lg\">Inspector</text-ui>\n <stack-ui gap=\"1\">\n <label-ui>Label</label-ui>\n <input-ui value=\"Untitled node\"></input-ui>\n </stack-ui>\n <stack-ui gap=\"1\">\n <label-ui>Type</label-ui>\n <select-ui>\n <option>LLM</option>\n <option>Tool</option>\n <option>Condition</option>\n </select-ui>\n </stack-ui>\n </stack-ui>\n </section>\n\n <section data-chunk-slot=\"chat\" style=\"height:240px; display:flex; flex-direction:column;\">\n <header style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <text-ui strong size=\"sm\">Agent</text-ui>\n </header>\n <section style=\"flex:1; overflow:auto; padding:var(--a-space-2);\">\n <text-ui size=\"sm\" color=\"subtle\">Agent messages will appear here.</text-ui>\n </section>\n <footer style=\"padding:var(--a-space-2); border-top:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <input-ui placeholder=\"Ask the agent…\" size=\"sm\"></input-ui>\n </footer>\n </section>\n </aside>\n</article>",
|
|
31
31
|
"source": "catalog/page-shells/app/agent-canvas/agent-canvas.contents.html",
|
|
32
32
|
"metadata": {
|
|
33
33
|
"domain": "agent",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"inspector"
|
|
44
44
|
]
|
|
45
45
|
},
|
|
46
|
-
"captured_at": "2026-
|
|
46
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
47
47
|
"template": [
|
|
48
48
|
{
|
|
49
49
|
"id": "button",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"data-artifact-item": "",
|
|
10
10
|
"data-artifact-label": "card with sparkline chart"
|
|
11
11
|
},
|
|
12
|
-
"html": "<card-ui style=\"max-width:320px\">\n <header>\n <h3>Weekly signups</h3>\n <text-ui slot=\"description\">Last 7 days</text-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <text-ui variant=\"display\">284</text-ui>\n <chart-ui type=\"line\" height=\"60\"\n data-stream-src=\"\"\n style=\"--chart-line-color:var(--
|
|
12
|
+
"html": "<card-ui style=\"max-width:320px\">\n <header>\n <h3>Weekly signups</h3>\n <text-ui slot=\"description\">Last 7 days</text-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <text-ui variant=\"display\">284</text-ui>\n <chart-ui type=\"line\" height=\"60\"\n data-stream-src=\"\"\n style=\"--chart-line-color:var(--md-sys-color-primary)\">\n </chart-ui>\n </col-ui>\n </section>\n </card-ui>",
|
|
13
13
|
"source": "packages/web-components/components/card/card.examples.html",
|
|
14
14
|
"metadata": {
|
|
15
15
|
"domain": "data",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"mini-chart"
|
|
29
29
|
]
|
|
30
30
|
},
|
|
31
|
-
"captured_at": "2026-
|
|
31
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
32
32
|
"template": [
|
|
33
33
|
{
|
|
34
34
|
"id": "text",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{
|
|
8
8
|
"name": "sidebar",
|
|
9
9
|
"tagName": "aside",
|
|
10
|
-
"html": "<header style=\"padding:var(--a-space-3); border-bottom:1px solid var(--
|
|
10
|
+
"html": "<header style=\"padding:var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <text-ui strong size=\"lg\">Conversations</text-ui>\n </header>\n <section style=\"flex:1; overflow:auto; padding:var(--a-space-2);\">\n <stack-ui gap=\"1\">\n <card-ui variant=\"soft\" padding=\"sm\">\n <section>\n <text-ui strong>Engineering</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">12 messages</text-ui>\n </section>\n </card-ui>\n <card-ui variant=\"soft\" padding=\"sm\">\n <section>\n <text-ui strong>Design</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">5 messages</text-ui>\n </section>\n </card-ui>\n </stack-ui>\n </section>"
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
13
|
"name": "header",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
],
|
|
28
28
|
"nested": [],
|
|
29
29
|
"attrs": {},
|
|
30
|
-
"html": "<article\n style=\"display:flex; height:100vh;\">\n <aside data-chunk-slot=\"sidebar\" style=\"width:240px; display:flex; flex-direction:column; border-right:1px solid var(--
|
|
30
|
+
"html": "<article\n style=\"display:flex; height:100vh;\">\n <aside data-chunk-slot=\"sidebar\" style=\"width:240px; display:flex; flex-direction:column; border-right:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <header style=\"padding:var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <text-ui strong size=\"lg\">Conversations</text-ui>\n </header>\n <section style=\"flex:1; overflow:auto; padding:var(--a-space-2);\">\n <stack-ui gap=\"1\">\n <card-ui variant=\"soft\" padding=\"sm\">\n <section>\n <text-ui strong>Engineering</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">12 messages</text-ui>\n </section>\n </card-ui>\n <card-ui variant=\"soft\" padding=\"sm\">\n <section>\n <text-ui strong>Design</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">5 messages</text-ui>\n </section>\n </card-ui>\n </stack-ui>\n </section>\n </aside>\n\n <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n <header data-chunk-slot=\"header\" style=\"padding:var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; justify-content:space-between;\">\n <text-ui strong size=\"lg\">#engineering</text-ui>\n <row-ui gap=\"2\">\n <button-ui icon=\"search\" variant=\"ghost\" size=\"sm\" aria-label=\"Search\"></button-ui>\n <button-ui icon=\"gear\" variant=\"ghost\" size=\"sm\" aria-label=\"Settings\"></button-ui>\n </row-ui>\n </header>\n\n <section data-chunk-slot=\"messages\" style=\"flex:1; overflow:auto; padding:var(--a-space-3);\">\n <stack-ui gap=\"3\">\n <row-ui gap=\"2\" align=\"start\">\n <avatar-ui src=\"/avatar-1.png\" size=\"sm\"></avatar-ui>\n <card-ui variant=\"soft\" padding=\"sm\">\n <section>\n <text-ui>Hey team, the deploy is ready for review.</text-ui>\n </section>\n </card-ui>\n </row-ui>\n <row-ui gap=\"2\" align=\"start\" justify=\"end\">\n <card-ui variant=\"primary\" padding=\"sm\">\n <section>\n <text-ui>On it — checking the staging logs now.</text-ui>\n </section>\n </card-ui>\n <avatar-ui src=\"/avatar-2.png\" size=\"sm\"></avatar-ui>\n </row-ui>\n </stack-ui>\n </section>\n\n <footer data-chunk-slot=\"input\" style=\"padding:var(--a-space-3); border-top:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <row-ui gap=\"2\" align=\"center\">\n <button-ui icon=\"plus\" variant=\"ghost\" aria-label=\"Add attachment\"></button-ui>\n <input-ui placeholder=\"Type a message…\" style=\"flex:1;\"></input-ui>\n <button-ui icon=\"paper-plane\" variant=\"primary\" aria-label=\"Send message\"></button-ui>\n </row-ui>\n </footer>\n </section>\n</article>",
|
|
31
31
|
"source": "catalog/page-shells/app/chat-page/chat-page.contents.html",
|
|
32
32
|
"metadata": {
|
|
33
33
|
"domain": "agent",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"chatbot"
|
|
47
47
|
]
|
|
48
48
|
},
|
|
49
|
-
"captured_at": "2026-
|
|
49
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
50
50
|
"template": [
|
|
51
51
|
{
|
|
52
52
|
"id": "text",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
],
|
|
28
28
|
"nested": [],
|
|
29
29
|
"attrs": {},
|
|
30
|
-
"html": "<article style=\"display:flex; height:100vh;\">\n <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n <header data-chunk-slot=\"toolbar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--
|
|
30
|
+
"html": "<article style=\"display:flex; height:100vh;\">\n <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n <header data-chunk-slot=\"toolbar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; justify-content:space-between;\">\n <row-ui gap=\"2\" align=\"center\">\n <button-ui icon=\"bold\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui icon=\"italic\" variant=\"ghost\" size=\"sm\"></button-ui>\n <separator-ui orientation=\"vertical\"></separator-ui>\n <button-ui icon=\"list\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui icon=\"code\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Share\" variant=\"outline\" size=\"sm\" icon=\"share\"></button-ui>\n <button-ui text=\"Publish\" variant=\"primary\" size=\"sm\" icon=\"globe\"></button-ui>\n </row-ui>\n </header>\n\n <section style=\"flex:1; display:flex; overflow:hidden;\">\n <section data-chunk-slot=\"editor\" style=\"flex:1; padding:var(--a-space-4); overflow:auto;\">\n <stack-ui gap=\"3\" style=\"max-width:720px; margin:0 auto;\">\n <input-ui placeholder=\"Document title\" size=\"lg\" style=\"font-weight:600;\"></input-ui>\n <textarea-ui placeholder=\"Start writing…\" style=\"min-height:400px; resize:vertical;\"></textarea-ui>\n </stack-ui>\n </section>\n\n <aside data-chunk-slot=\"preview\" style=\"width:360px; border-left:1px solid var(--md-sys-color-neutral-outline-variant); padding:var(--a-space-3); overflow:auto; background:var(--a-bg-subtle);\">\n <stack-ui gap=\"3\">\n <text-ui strong size=\"sm\">Preview</text-ui>\n <card-ui padding=\"md\">\n <section>\n <text-ui color=\"subtle\">Rendered preview will appear here.</text-ui>\n </section>\n </card-ui>\n </stack-ui>\n </aside>\n </section>\n </section>\n\n <aside data-chunk-slot=\"metadata\" style=\"width:240px; border-left:1px solid var(--md-sys-color-neutral-outline-variant); padding:var(--a-space-3); overflow:auto;\">\n <stack-ui gap=\"4\">\n <text-ui strong size=\"sm\">Metadata</text-ui>\n <stack-ui gap=\"1\">\n <label-ui>Status</label-ui>\n <select-ui>\n <option>Draft</option>\n <option>Review</option>\n <option>Published</option>\n </select-ui>\n </stack-ui>\n <stack-ui gap=\"1\">\n <label-ui>Tags</label-ui>\n <input-ui placeholder=\"Add tags…\"></input-ui>\n </stack-ui>\n <stack-ui gap=\"1\">\n <label-ui>Author</label-ui>\n <row-ui gap=\"2\" align=\"center\">\n <avatar-ui size=\"sm\" src=\"/avatar.png\"></avatar-ui>\n <text-ui size=\"sm\">Alex Chen</text-ui>\n </row-ui>\n </stack-ui>\n </stack-ui>\n </aside>\n</article>",
|
|
31
31
|
"source": "catalog/page-shells/app/doc-editor/doc-editor.contents.html",
|
|
32
32
|
"metadata": {
|
|
33
33
|
"domain": "layout",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"height"
|
|
45
45
|
]
|
|
46
46
|
},
|
|
47
|
-
"captured_at": "2026-
|
|
47
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
48
48
|
"template": [
|
|
49
49
|
{
|
|
50
50
|
"id": "button",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"gap": "5"
|
|
10
10
|
},
|
|
11
|
-
"html": "<col-ui gap=\"5\">\n <col-ui align=\"center\" gap=\"1\">\n <text-ui size=\"xl\" weight=\"semibold\">Everything you need to ship faster</text-ui>\n <text-ui color=\"subtle\" text-align=\"center\">Batteries-included primitives, composable by design.</text-ui>\n </col-ui>\n <grid-ui columns=\"1 3@md\" gap=\"5\">\n <col-ui gap=\"3\">\n <icon-ui name=\"lightning\" size=\"32\" color=\"var(--a-
|
|
11
|
+
"html": "<col-ui gap=\"5\">\n <col-ui align=\"center\" gap=\"1\">\n <text-ui size=\"xl\" weight=\"semibold\">Everything you need to ship faster</text-ui>\n <text-ui color=\"subtle\" text-align=\"center\">Batteries-included primitives, composable by design.</text-ui>\n </col-ui>\n <grid-ui columns=\"1 3@md\" gap=\"5\">\n <col-ui gap=\"3\">\n <icon-ui name=\"lightning\" size=\"32\" color=\"var(--a-primary-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Blazing fast composition</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Describe your screen in plain language and get production-ready markup in seconds.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"lock\" size=\"32\" color=\"var(--a-primary-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Accessibility built in</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Every primitive ships with ARIA semantics, keyboard navigation, and focus management.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"palette\" size=\"32\" color=\"var(--a-primary-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Fully themeable</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Token-driven design system with light/dark mode, density, and radius controls out of the box.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"puzzle-piece\" size=\"32\" color=\"var(--a-primary-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">93+ primitives</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">From atoms to complex shells — cards, tables, modals, charts, and more in a single package.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"code\" size=\"32\" color=\"var(--a-primary-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Framework agnostic</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Vanilla web components — works with React, Vue, Svelte, or plain HTML with no adapter needed.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"arrow-clockwise\" size=\"32\" color=\"var(--a-primary-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Light DOM first</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Full CSS cascade, no shadow-DOM piercing hacks — style any element with your existing toolchain.</text-ui>\n </col-ui>\n </col-ui>\n </grid-ui>\n</col-ui>",
|
|
12
12
|
"source": "catalog/ui-patterns/app/feature-grid-icons/feature-grid-icons.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "content",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"landing"
|
|
34
34
|
]
|
|
35
35
|
},
|
|
36
|
-
"captured_at": "2026-
|
|
36
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
37
37
|
"template": [
|
|
38
38
|
{
|
|
39
39
|
"id": "text",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
],
|
|
28
28
|
"nested": [],
|
|
29
29
|
"attrs": {},
|
|
30
|
-
"html": "<article\n style=\"display:flex; flex-direction:column; height:100vh;\">\n <header data-chunk-slot=\"header\" style=\"padding:var(--a-space-3); border-bottom:1px solid var(--
|
|
30
|
+
"html": "<article\n style=\"display:flex; flex-direction:column; height:100vh;\">\n <header data-chunk-slot=\"header\" style=\"padding:var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; justify-content:space-between;\">\n <text-ui strong size=\"lg\">Media Gallery</text-ui>\n <row-ui gap=\"2\">\n <button-ui icon=\"upload\" variant=\"outline\" size=\"sm\" text=\"Upload\"></button-ui>\n <button-ui icon=\"folder\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </header>\n\n <section data-chunk-slot=\"filter-bar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; gap:var(--a-space-2);\">\n <input-ui placeholder=\"Search media…\" icon=\"search\" style=\"width:240px;\"></input-ui>\n <select-ui size=\"sm\">\n <option>All types</option>\n <option>Images</option>\n <option>Videos</option>\n <option>Documents</option>\n </select-ui>\n <select-ui size=\"sm\">\n <option>Any time</option>\n <option>Today</option>\n <option>This week</option>\n <option>This month</option>\n </select-ui>\n </section>\n\n <section data-chunk-slot=\"grid\" style=\"flex:1; overflow:auto; padding:var(--a-space-3);\">\n <grid-ui columns=\"2 4@md\" gap=\"3\">\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 1</text-ui>\n </section>\n </card-ui>\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 2</text-ui>\n </section>\n </card-ui>\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 3</text-ui>\n </section>\n </card-ui>\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 4</text-ui>\n </section>\n </card-ui>\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 5</text-ui>\n </section>\n </card-ui>\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 6</text-ui>\n </section>\n </card-ui>\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 7</text-ui>\n </section>\n </card-ui>\n <card-ui padding=\"0\" style=\"aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--a-bg-subtle);\">\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Image 8</text-ui>\n </section>\n </card-ui>\n </grid-ui>\n </section>\n\n <dialog-ui data-chunk-slot=\"lightbox\" id=\"lightbox\" style=\"display:none;\">\n <image-ui src=\"/placeholder.png\" alt=\"Preview\" style=\"max-width:90vw; max-height:90vh; object-fit:contain;\"></image-ui>\n </dialog-ui>\n</article>",
|
|
31
31
|
"source": "catalog/page-shells/app/gallery-page/gallery-page.contents.html",
|
|
32
32
|
"metadata": {
|
|
33
33
|
"domain": "layout",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"view-toggle"
|
|
44
44
|
]
|
|
45
45
|
},
|
|
46
|
-
"captured_at": "2026-
|
|
46
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
47
47
|
"template": [
|
|
48
48
|
{
|
|
49
49
|
"id": "text",
|
|
@@ -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\" variant=\"success\" size=\"sm\"></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-leading=\"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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" color=\"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(--a-border);\">\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\" variant=\"success\" size=\"sm\"></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-leading=\"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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" align=\"end\" style=\"text-align: end;\">\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\" color=\"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-
|
|
28
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
29
29
|
"template": [
|
|
30
30
|
{
|
|
31
31
|
"id": "text",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
],
|
|
23
23
|
"nested": [],
|
|
24
24
|
"attrs": {},
|
|
25
|
-
"html": "<article\n style=\"display:flex; flex-direction:column; height:100vh;\">\n <header data-chunk-slot=\"header\" style=\"padding:var(--a-space-3); border-bottom:1px solid var(--
|
|
25
|
+
"html": "<article\n style=\"display:flex; flex-direction:column; height:100vh;\">\n <header data-chunk-slot=\"header\" style=\"padding:var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; justify-content:space-between;\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong size=\"lg\">Sprint 42</text-ui>\n <badge-ui text=\"3 open\" variant=\"info\" size=\"sm\"></badge-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <input-ui placeholder=\"Search tasks…\" icon=\"search\" size=\"sm\" style=\"width:200px;\"></input-ui>\n <button-ui icon=\"filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"New task\" variant=\"primary\" size=\"sm\" icon=\"plus\"></button-ui>\n </row-ui>\n </header>\n\n <section data-chunk-slot=\"board\" style=\"flex:1; overflow:auto; padding:var(--a-space-3);\">\n <row-ui gap=\"3\" align=\"start\" style=\"min-width:max-content;\">\n <stack-ui gap=\"2\" style=\"width:280px;\">\n <row-ui gap=\"2\" align=\"center\" justify=\"between\">\n <text-ui strong size=\"sm\">To do</text-ui>\n <badge-ui text=\"3\" size=\"sm\" variant=\"muted\"></badge-ui>\n </row-ui>\n <card-ui padding=\"sm\">\n <section>\n <stack-ui gap=\"1\">\n <text-ui strong size=\"sm\">Design review</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Due tomorrow</text-ui>\n <row-ui gap=\"1\" align=\"center\">\n <badge-ui text=\"P1\" size=\"sm\" variant=\"danger\"></badge-ui>\n <avatar-ui size=\"xs\" src=\"/avatar-1.png\"></avatar-ui>\n </row-ui>\n </stack-ui>\n </section>\n </card-ui>\n <card-ui padding=\"sm\">\n <section>\n <stack-ui gap=\"1\">\n <text-ui strong size=\"sm\">API spec</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Due Friday</text-ui>\n <row-ui gap=\"1\" align=\"center\">\n <badge-ui text=\"P2\" size=\"sm\" variant=\"warning\"></badge-ui>\n <avatar-ui size=\"xs\" src=\"/avatar-2.png\"></avatar-ui>\n </row-ui>\n </stack-ui>\n </section>\n </card-ui>\n <card-ui padding=\"sm\">\n <section>\n <stack-ui gap=\"1\">\n <text-ui strong size=\"sm\">Write tests</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">No due date</text-ui>\n <row-ui gap=\"1\" align=\"center\">\n <badge-ui text=\"P3\" size=\"sm\" variant=\"info\"></badge-ui>\n <avatar-ui size=\"xs\" src=\"/avatar-3.png\"></avatar-ui>\n </row-ui>\n </stack-ui>\n </section>\n </card-ui>\n </stack-ui>\n\n <stack-ui gap=\"2\" style=\"width:280px;\">\n <row-ui gap=\"2\" align=\"center\" justify=\"between\">\n <text-ui strong size=\"sm\">In progress</text-ui>\n <badge-ui text=\"2\" size=\"sm\" variant=\"muted\"></badge-ui>\n </row-ui>\n <card-ui padding=\"sm\">\n <section>\n <stack-ui gap=\"1\">\n <text-ui strong size=\"sm\">Implement auth</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">2 days left</text-ui>\n <row-ui gap=\"1\" align=\"center\">\n <badge-ui text=\"P1\" size=\"sm\" variant=\"danger\"></badge-ui>\n <avatar-ui size=\"xs\" src=\"/avatar-1.png\"></avatar-ui>\n </row-ui>\n </stack-ui>\n </section>\n </card-ui>\n </stack-ui>\n\n <stack-ui gap=\"2\" style=\"width:280px;\">\n <row-ui gap=\"2\" align=\"center\" justify=\"between\">\n <text-ui strong size=\"sm\">Done</text-ui>\n <badge-ui text=\"5\" size=\"sm\" variant=\"muted\"></badge-ui>\n </row-ui>\n <card-ui padding=\"sm\" variant=\"soft\">\n <section>\n <stack-ui gap=\"1\">\n <text-ui strong size=\"sm\" color=\"subtle\">Setup repo</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Completed yesterday</text-ui>\n </stack-ui>\n </section>\n </card-ui>\n </stack-ui>\n </row-ui>\n </section>\n\n <drawer-ui data-chunk-slot=\"detail-drawer\" id=\"task-detail\" style=\"display:none;\">\n <header>\n <span slot=\"heading\">Task detail</span>\n </header>\n <section>\n <stack-ui gap=\"3\" style=\"width:360px;\">\n <stack-ui gap=\"1\">\n <label-ui>Title</label-ui>\n <input-ui value=\"Design review\"></input-ui>\n </stack-ui>\n <stack-ui gap=\"1\">\n <label-ui>Description</label-ui>\n <textarea-ui placeholder=\"Add details…\"></textarea-ui>\n </stack-ui>\n </stack-ui>\n </section>\n <footer>\n <button-ui slot=\"action\" text=\"Cancel\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui slot=\"action\" text=\"Save\" variant=\"primary\" size=\"sm\"></button-ui>\n </footer>\n </drawer-ui>\n</article>",
|
|
26
26
|
"source": "catalog/page-shells/app/kanban-page/kanban-page.contents.html",
|
|
27
27
|
"metadata": {
|
|
28
28
|
"domain": "layout",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"workflow"
|
|
41
41
|
]
|
|
42
42
|
},
|
|
43
|
-
"captured_at": "2026-
|
|
43
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
44
44
|
"template": [
|
|
45
45
|
{
|
|
46
46
|
"id": "text",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<div id=\"pg-shell\">\n <div id=\"pg-toolbar\">\n <row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"palette\" color=\"muted\"></icon-ui>\n <text-ui strong>CSS Channel</text-ui>\n <badge-ui id=\"pg-channel-badge\" text=\"Phase 1\" variant=\"accent\" size=\"sm\"></badge-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <button-ui id=\"pg-btn-apply\" variant=\"primary\" size=\"sm\" icon=\"paint-brush\" text=\"Apply theme\"></button-ui>\n <button-ui id=\"pg-btn-remove\" variant=\"outline\" size=\"sm\" icon=\"trash\" text=\"Remove theme\"></button-ui>\n <a href=\"/site/getting-started/wiring\" target=\"_top\" style=\"text-decoration: none\">\n <button-ui variant=\"ghost\" size=\"sm\" icon=\"book-open\" text=\"Docs\"></button-ui>\n </a>\n </row-ui>\n </div>\n\n <div id=\"pg-content\">\n <div id=\"pg-intro\">\n <h1 style=\"margin: 0 0 var(--a-space-2) 0; font-size: var(--a-ui-lg)\">Per-surface CSS via the A2UI channel</h1>\n <p style=\"margin: 0; color: var(--a-fg-muted); font-size: var(--a-ui-sm); line-height: 1.5\">\n Two adjacent surfaces, both built from the same A2UI tree. The <strong>left</strong> tile receives an\n <code>updateStyles</code> message that overrides <code>--a-primary</code> (button background),\n <code>--a-
|
|
9
|
+
"html": "<div id=\"pg-shell\">\n <div id=\"pg-toolbar\">\n <row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"palette\" color=\"muted\"></icon-ui>\n <text-ui strong>CSS Channel</text-ui>\n <badge-ui id=\"pg-channel-badge\" text=\"Phase 1\" variant=\"accent\" size=\"sm\"></badge-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <button-ui id=\"pg-btn-apply\" variant=\"primary\" size=\"sm\" icon=\"paint-brush\" text=\"Apply theme\"></button-ui>\n <button-ui id=\"pg-btn-remove\" variant=\"outline\" size=\"sm\" icon=\"trash\" text=\"Remove theme\"></button-ui>\n <a href=\"/site/getting-started/wiring\" target=\"_top\" style=\"text-decoration: none\">\n <button-ui variant=\"ghost\" size=\"sm\" icon=\"book-open\" text=\"Docs\"></button-ui>\n </a>\n </row-ui>\n </div>\n\n <div id=\"pg-content\">\n <div id=\"pg-intro\">\n <h1 style=\"margin: 0 0 var(--a-space-2) 0; font-size: var(--a-ui-lg)\">Per-surface CSS via the A2UI channel</h1>\n <p style=\"margin: 0; color: var(--a-fg-muted); font-size: var(--a-ui-sm); line-height: 1.5\">\n Two adjacent surfaces, both built from the same A2UI tree. The <strong>left</strong> tile receives an\n <code>updateStyles</code> message that overrides <code>--a-primary</code> (button background),\n <code>--a-primary</code>, and <code>--a-radius-md</code>; the <strong>right</strong> tile receives no styles.\n They share a host DOM yet stay visually isolated because the renderer wraps user CSS in\n <code>@scope ([data-a2ui-surface=\"…\"])</code> — note how the left \"Subscribe\" button is purple while the\n right one keeps the default blue. Hit <em>Apply theme</em> to re-fire the channel; <em>Remove theme</em> drops\n the stylesheet from <code>document.adoptedStyleSheets</code> and the left tile reverts to defaults. Open\n DevTools' Elements pane and inspect <code>document.adoptedStyleSheets</code> to see the live constructable\n stylesheet.\n </p>\n <p style=\"margin: var(--a-space-2) 0 0 0; color: var(--a-fg-muted); font-size: var(--a-ui-xs); line-height: 1.5\">\n <strong>Token-chain note:</strong> some component visuals (e.g. card background, card border-radius) read from\n component-internal tokens like <code>--card-bg</code> / <code>--card-radius</code> which are declared inside\n the component's own <code>@scope</code> and shadow any surface-root override of the same name. To affect those\n surfaces via the channel, override the <em>upstream</em> token (e.g. <code>--a-canvas-1</code>) or use a\n higher-specificity direct selector. The button override above succeeds because <code>--a-primary</code>\n cascades cleanly through the inheritance chain into <code>--button-bg-primary</code>.\n </p>\n </div>\n\n <div id=\"pg-grid\">\n <div class=\"pg-tile\">\n <h3>Themed via <code>updateStyles</code></h3>\n <div id=\"themed-host\" class=\"pg-host\" data-themed></div>\n </div>\n <div class=\"pg-tile\">\n <h3>Unthemed (control)</h3>\n <div id=\"plain-host\" class=\"pg-host\"></div>\n </div>\n </div>\n\n <div id=\"pg-status\">\n <div data-pg-status-row><strong>Themed surface id:</strong> <code id=\"pg-status-themed-id\">A</code></div>\n <div data-pg-status-row><strong>Adopted stylesheets:</strong> <span id=\"pg-status-adopted\">0</span></div>\n <div data-pg-status-row><strong>Last event:</strong> <span id=\"pg-status-last-event\">—</span></div>\n <div data-pg-status-row><strong>Validation warnings:</strong> <span id=\"pg-status-warnings\">—</span></div>\n </div>\n\n <details id=\"pg-code-panel\">\n <summary>Show the wiring (createSurface + updateComponents + updateStyles)</summary>\n <div>\n <code-ui language=\"javascript\" id=\"pg-code-block\" style=\"font-size: var(--a-ui-sm)\"></code-ui>\n </div>\n </details>\n </div>\n</div>",
|
|
10
10
|
"source": "apps/genui/app/css-channel-demo/css-channel-demo.contents.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"parallel-channels"
|
|
26
26
|
]
|
|
27
27
|
},
|
|
28
|
-
"captured_at": "2026-
|
|
28
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
29
29
|
"template": [
|
|
30
30
|
{
|
|
31
31
|
"id": "palette",
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
{
|
|
133
133
|
"id": "code-3",
|
|
134
134
|
"component": "Code",
|
|
135
|
-
"textContent": "--a-
|
|
135
|
+
"textContent": "--a-primary"
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
"id": "code-4",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"data-artifact-item": "",
|
|
10
10
|
"data-artifact-label": "icon + label inline"
|
|
11
11
|
},
|
|
12
|
-
"html": "<row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"check-circle\" style=\"color:var(--
|
|
12
|
+
"html": "<row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"check-circle\" style=\"color:var(--md-sys-color-success)\"></icon-ui>\n <text-ui>Payment confirmed</text-ui>\n </row-ui>",
|
|
13
13
|
"source": "packages/web-components/components/row/row.examples.html",
|
|
14
14
|
"metadata": {
|
|
15
15
|
"domain": "layout",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"horizontal"
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
|
-
"captured_at": "2026-
|
|
29
|
+
"captured_at": "2026-07-15T18:20:38.265Z",
|
|
30
30
|
"template": [
|
|
31
31
|
{
|
|
32
32
|
"id": "check-circle",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adia-ai/a2ui-corpus",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "AdiaUI A2UI training corpus \u2014 canonical v0.9 catalog + chunks + eval fixtures + feedback + gap registry. Consumed by the compose engine's retrieval layer + the MCP pipeline.",
|
|
6
6
|
"exports": {
|