@adia-ai/a2ui-corpus 0.0.7 → 0.2.0

package/chunks/wizard-drawer-three-step-wizard.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"three-step-wizard\" data-chunk=\"wizard-drawer-three-step-wizard\">\n  <h2 variant=\"section\">Three-step create wizard</h2>\n  <p data-note>Stepper header, step body, Back/Next footer. The interactive buttons below advance the stepper and switch the body panel.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"wizard\">\n      <button-ui text=\"Create workspace\" icon=\"plus\" variant=\"primary\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui id=\"pat-wizard\" side=\"right\" size=\"lg\">\n        <header slot=\"header\">\n          <col-ui gap=\"2\" grow>\n            <text-ui strong>Create workspace</text-ui>\n            <stepper-ui id=\"pat-wizard-stepper\" step=\"0\">\n              <stepper-item-ui text=\"Details\"></stepper-item-ui>\n              <stepper-item-ui text=\"Members\"></stepper-item-ui>\n              <stepper-item-ui text=\"Review\"></stepper-item-ui>\n            </stepper-ui>\n          </col-ui>\n        </header>\n        <section slot=\"body\">\n          <div data-wizard-step=\"0\">\n            <col-ui gap=\"3\">\n              <h4>Workspace details</h4>\n              <field-ui label=\"Name\">\n                <input-ui placeholder=\"Acme Team\" required></input-ui>\n              </field-ui>\n              <field-ui label=\"Slug\">\n                <input-ui prefix=\"/\" placeholder=\"acme-team\"></input-ui>\n              </field-ui>\n              <field-ui label=\"Description\">\n                <textarea-ui rows=\"2\" placeholder=\"What does this team work on?\"></textarea-ui>\n              </field-ui>\n            </col-ui>\n          </div>\n          <div data-wizard-step=\"1\" hidden>\n            <col-ui gap=\"3\">\n              <h4>Invite team members</h4>\n              <field-ui label=\"Email addresses\">\n                <textarea-ui placeholder=\"alex@acme.com, sarah@acme.com\" rows=\"3\"></textarea-ui>\n              </field-ui>\n              <field-ui label=\"Default role\">\n                <select-ui placeholder=\"Select role\">\n                <option value=\"admin\">Admin</option>\n                <option value=\"member\" selected>Member</option>\n                <option value=\"viewer\">Viewer</option>\n              </select-ui>\n              </field-ui>\n              <field-ui label=\"Send welcome email\" inline>\n                <switch-ui checked></switch-ui>\n              </field-ui>\n            </col-ui>\n          </div>\n          <div data-wizard-step=\"2\" hidden>\n            <col-ui gap=\"3\">\n              <h4>Review and create</h4>\n              <alert-ui text=\"Your workspace will be created and team members will be invited by email.\" variant=\"info\" icon=\"info\"></alert-ui>\n              <description-list-ui>\n                <dt>Name</dt><dd>Acme Team</dd>\n                <dt>Slug</dt><dd>/acme-team</dd>\n                <dt>Members</dt><dd>2 invited</dd>\n                <dt>Plan</dt><dd>Free (14-day Pro trial)</dd>\n              </description-list-ui>\n            </col-ui>\n          </div>\n        </section>\n        <footer slot=\"footer\">\n          <span slot=\"action-leading\">\n            <button-ui id=\"pat-wizard-back\" text=\"Back\" variant=\"ghost\" disabled></button-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui id=\"pat-wizard-next\" text=\"Next\" variant=\"primary\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/wizard-drawer/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/a2ui-corpus",
-  "version": "0.0.7",
+  "version": "0.2.0",
   "type": "module",
   "description": "AdiaUI A2UI training corpus — patterns, fragments, compositions, exemplars, eval fixtures, feedback, gap registry. Consumed by the compose engine's retrieval layer + the MCP pipeline.",
   "exports": {

package/patterns/_components.json

@@ -1589,7 +1589,7 @@
     ]
   },
   "Nav": {
-    "tag": "nav-n",
+    "tag": "nav-ui",
     "category": "navigation",
     "description": "Collapsible navigation sidebar with groups and items.",
     "props": {

package/scripts/chunk-library.js

@@ -6,7 +6,7 @@
  *
  * Used by:
  *   - packages/a2ui/mcp/server.js — exposes search_chunks / get_chunk / lookup_chunk tools
- *   - packages/a2ui/compose/engines/zettel/chunk-synthesizer.js — Phase C.2
+ *   - packages/a2ui/compose/strategies/zettel/chunk-synthesizer.js — Phase C.2
  *
  * Spec: docs/specs/genui-chunk-marker.md (Draft v0.1.0).
  */
@@ -144,7 +144,7 @@ export async function searchChunksAsync(query, { kind, limit = 20 } = {}) {
 
   let cosineByName = null;
   try {
-    const { scoreAll, available } = await import('../../retrieval/chunk-embedding-retriever.js');
+    const { scoreAll, available } = await import('../../retrieval/embedding/chunk-embedding-retriever.js');
     if (await available()) {
       cosineByName = await scoreAll(query);
     }

package/chunks/chat-basic.json

@@ -1,15 +0,0 @@
-{
-  "name": "chat-basic",
-  "kind": "block",
-  "primary": "section",
-  "page": "/site/components/chat",
-  "slots": [],
-  "nested": [],
-  "attrs": {
-    "data-section": "",
-    "data-property": "basic"
-  },
-  "html": "<section data-section data-property=\"basic\" data-chunk=\"chat-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>A chat transcript with two messages. Use <code>role</code> on children to style user vs assistant turns.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"basic\">\n      <chat-ui>\n        <div role=\"user\">What's the capital of France?</div>\n        <div role=\"assistant\">The capital of France is Paris.</div>\n      </chat-ui>\n    </div>\n  </div>\n</section>",
-  "source": "site/pages/components/chat/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
-}

package/chunks/chat-streaming.json

@@ -1,15 +0,0 @@
-{
-  "name": "chat-streaming",
-  "kind": "block",
-  "primary": "section",
-  "page": "/site/components/chat",
-  "slots": [],
-  "nested": [],
-  "attrs": {
-    "data-section": "",
-    "data-property": "streaming"
-  },
-  "html": "<section data-section data-property=\"streaming\" data-chunk=\"chat-streaming\">\n  <h2 variant=\"section\">streaming</h2>\n  <p data-note>Enable the streaming cursor by setting the <code>streaming</code> attribute on an in-progress assistant message.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"streaming\">\n      <chat-ui>\n        <div role=\"user\">Explain black holes briefly.</div>\n        <div role=\"assistant\" streaming>A black hole is a region of spacetime where gravity is so strong that</div>\n      </chat-ui>\n    </div>\n  </div>\n</section>",
-  "source": "site/pages/components/chat/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
-}

package/chunks/chat-with-input.json

@@ -1,15 +0,0 @@
-{
-  "name": "chat-with-input",
-  "kind": "block",
-  "primary": "section",
-  "page": "/site/components/chat",
-  "slots": [],
-  "nested": [],
-  "attrs": {
-    "data-section": "",
-    "data-property": "with-input"
-  },
-  "html": "<section data-section data-property=\"with-input\" data-chunk=\"chat-with-input\">\n  <h2 variant=\"section\">with input</h2>\n  <p data-note>Compose with <code>chat-input-ui</code> for a full conversation surface.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"with-input\">\n      <chat-ui>\n        <div role=\"user\">Give me a short haiku about the ocean.</div>\n        <div role=\"assistant\">\n          Waves whisper secrets —<br>\n          the tide retreats then returns,<br>\n          carrying the moon.\n        </div>\n      </chat-ui>\n      <chat-input-ui placeholder=\"Type a message...\"></chat-input-ui>\n    </div>\n  </div>\n</section>",
-  "source": "site/pages/components/chat/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
-}

package/chunks/playground-app-shell.json

@@ -1,14 +0,0 @@
-{
-  "name": "playground-app-shell",
-  "kind": "block",
-  "primary": "app-shell-ui",
-  "page": "/site/playground/app-shell",
-  "slots": [],
-  "nested": [],
-  "attrs": {
-    "mode": "rounded borderless"
-  },
-  "html": "<app-shell-ui mode=\"rounded borderless\" data-chunk=\"playground-app-shell\">\n\n<!-- ═══════════════ LEFT SIDEBAR ═══════════════ -->\n<aside data-sidebar=\"leading\">\n  <header>\n    <select-ui id=\"workspace-select\" avatar=\"/icons/agent-ui-light.svg\" value=\"adia-ui\" variant=\"ghost\" style=\"flex:1\"></select-ui>\n  </header>\n\n  <section>\n    <app-nav-ui id=\"nav\">\n      <app-nav-item-ui data-command-trigger icon=\"magnifying-glass\" text=\"Search\" value=\"search\">\n        <span slot=\"icon\"><icon-ui name=\"magnifying-glass\"></icon-ui></span>\n        <span slot=\"text\">Search</span>\n        <kbd slot=\"trailing\">⌘K</kbd>\n      </app-nav-item-ui>\n      <hr data-nav-divider />\n      <app-nav-group-ui icon=\"house\" text=\"Home\" open>\n        <app-nav-item-ui text=\"Dashboard\" value=\"dashboard\" selected></app-nav-item-ui>\n        <app-nav-item-ui text=\"Analytics\" value=\"analytics\"></app-nav-item-ui>\n        <app-nav-item-ui text=\"Reports\" value=\"reports\"></app-nav-item-ui>\n      </app-nav-group-ui>\n      <app-nav-group-ui icon=\"gear\" text=\"Settings\">\n        <app-nav-item-ui text=\"General\" value=\"general\"></app-nav-item-ui>\n        <app-nav-item-ui text=\"Team\" value=\"team\"></app-nav-item-ui>\n        <app-nav-item-ui text=\"Billing\" value=\"billing\"></app-nav-item-ui>\n      </app-nav-group-ui>\n    </app-nav-ui>\n  </section>\n\n  <footer>\n    <select-ui id=\"user-select\" avatar=\"https://i.pravatar.cc/32?u=demo\" value=\"demo\" variant=\"ghost\" style=\"flex:1\"></select-ui>\n  </footer>\n  <div data-resize></div>\n</aside>\n\n<!-- ═══════════════ MAIN ═══════════════ -->\n<main>\n\n  <header>\n    <button-ui data-sidebar-toggle=\"leading\" icon=\"sidebar\" variant=\"ghost\" size=\"sm\"></button-ui>\n    <breadcrumb-ui>\n      <a href=\"#\">AdiaUI</a>\n      <span>Dashboard</span>\n    </breadcrumb-ui>\n    <span slot=\"action\">\n      <button-ui id=\"theme-toggle\" icon=\"moon\" variant=\"ghost\" size=\"sm\"></button-ui>\n      <popover-ui id=\"theme-popover\" placement=\"bottom-end\">\n        <button-ui icon=\"palette\" variant=\"ghost\" size=\"sm\" slot=\"trigger\"></button-ui>\n        <div slot=\"content\" id=\"theme-panel\" style=\"padding:var(--a-space-3); display:flex; flex-direction:column; gap:var(--a-space-3); min-width:260px;\">\n          <text-ui variant=\"label\">Theme</text-ui>\n          <div style=\"display:flex; gap:var(--a-space-1); flex-wrap:wrap;\">\n            <button-ui id=\"theme-default\" text=\"Default\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-ocean\" text=\"Ocean\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-forest\" text=\"Forest\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-sunset\" text=\"Sunset\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-lavender\" text=\"Lavender\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-rose\" text=\"Rose\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-slate\" text=\"Slate\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-midnight\" text=\"Midnight\" variant=\"outline\" size=\"sm\"></button-ui>\n          </div>\n          <divider-ui></divider-ui>\n          <text-ui variant=\"label\">Parametric</text-ui>\n          <field-ui label=\"Density\">\n            <slider-ui id=\"param-density\" value=\"1\" min=\"0.5\" max=\"1.5\" step=\"0.05\" suffix=\"×\"></slider-ui>\n          </field-ui>\n          <field-ui label=\"Radius\">\n            <slider-ui id=\"param-radius\" value=\"1\" min=\"0\" max=\"2\" step=\"0.1\" suffix=\"×\"></slider-ui>\n          </field-ui>\n          <divider-ui></divider-ui>\n          <div style=\"display:flex; gap:var(--a-space-2); flex-wrap:wrap;\">\n            <button-ui id=\"preset-compact\" text=\"Compact\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"preset-default\" text=\"Reset\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"preset-spacious\" text=\"Spacious\" variant=\"outline\" size=\"sm\"></button-ui>\n          </div>\n        </div>\n      </popover-ui>\n    </span>\n  </header>\n\n  <section>\n    <aside id=\"subnav-rail\" data-subnav>\n      <section-nav-ui id=\"subnav\" heading=\"Dashboard\">\n        <section-nav-item-ui text=\"Overview\" value=\"overview\" selected></section-nav-item-ui>\n        <section-nav-item-ui text=\"Activity\" value=\"activity\"></section-nav-item-ui>\n        <section-nav-item-ui text=\"Revenue\" value=\"revenue\"></section-nav-item-ui>\n        <section-nav-item-ui text=\"Traffic\" value=\"traffic\"></section-nav-item-ui>\n      </section-nav-ui>\n    </aside>\n\n    <article data-content-root>\n      <div data-content-header>\n        <header>\n          <div>\n            <h1>Dashboard</h1>\n            <div data-actions>\n              <button-ui text=\"Export\" variant=\"outline\" size=\"sm\"></button-ui>\n            </div>\n          </div>\n          <p>App Shell pattern demo — resize the sidebar, collapse it, toggle theme, or press ⌘K to open the command palette.</p>\n        </header>\n      </div>\n      <div data-content-body>\n        <section>\n          <p style=\"color:var(--a-fg-muted);\">\n            This standalone page mirrors the shape of the main AdiaUI docs shell: leading sidebar with app-nav, topbar with breadcrumb + theme popover + command trigger, main content area with an optional subnav rail, and a bottom footer.\n          </p>\n        </section>\n      </div>\n    </article>\n  </section>\n\n  <footer>\n    <span slot=\"heading\">AdiaUI App Shell</span>\n    <span slot=\"description\">Playground demo</span>\n    <span slot=\"action\">v0.1.0</span>\n  </footer>\n\n</main>\n\n<!-- ═══════════════ COMMAND PALETTE ═══════════════ -->\n<dialog id=\"cmd-dialog\" data-command>\n  <command-ui id=\"cmd\" placeholder=\"Search pages...\"></command-ui>\n</dialog>\n\n</app-shell-ui>",
-  "source": "site/pages/playground/app-shell/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
-}

package/chunks/playground-chat.json

@@ -1,15 +0,0 @@
-{
-  "name": "playground-chat",
-  "kind": "block",
-  "primary": "adia-chat-ui",
-  "page": "/site/playground/chat",
-  "slots": [],
-  "nested": [],
-  "attrs": {
-    "proxy-url": "/api/chat",
-    "model": "claude-haiku-4-5-20251001"
-  },
-  "html": "<adia-chat-ui id=\"chat\" data-chunk=\"playground-chat\" proxy-url=\"/api/chat\" model=\"claude-haiku-4-5-20251001\"\n  style=\"flex:1; border:none; border-radius:0;\">\n  <header>\n    <span data-chat-name>Factory Chat</span>\n    <span data-chat-status></span>\n    <span style=\"margin-inline-start:auto; display:flex; align-items:center; gap:var(--a-space-1);\">\n      <button-ui id=\"theme-toggle\" icon=\"moon\" variant=\"ghost\" size=\"sm\"></button-ui>\n      <popover-ui id=\"theme-popover\" placement=\"bottom-end\">\n        <button-ui icon=\"gear\" variant=\"ghost\" size=\"sm\" slot=\"trigger\"></button-ui>\n        <div slot=\"content\" style=\"padding:var(--a-space-3); display:flex; flex-direction:column; gap:var(--a-space-3); min-width:240px;\">\n          <text-ui variant=\"label\">Theme</text-ui>\n          <div style=\"display:flex; gap:var(--a-space-1); flex-wrap:wrap;\">\n            <button-ui id=\"theme-default\" text=\"Default\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-ocean\" text=\"Ocean\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-forest\" text=\"Forest\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-sunset\" text=\"Sunset\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-lavender\" text=\"Lavender\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-rose\" text=\"Rose\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-slate\" text=\"Slate\" variant=\"outline\" size=\"sm\"></button-ui>\n            <button-ui id=\"theme-midnight\" text=\"Midnight\" variant=\"outline\" size=\"sm\"></button-ui>\n          </div>\n          <divider-ui></divider-ui>\n          <text-ui variant=\"label\">Parametric</text-ui>\n          <field-ui label=\"Density\">\n            <slider-ui id=\"param-density\" value=\"1\" min=\"0.5\" max=\"1.5\" step=\"0.05\" suffix=\"×\"></slider-ui>\n          </field-ui>\n          <field-ui label=\"Radius\">\n            <slider-ui id=\"param-radius\" value=\"1\" min=\"0\" max=\"2\" step=\"0.1\" suffix=\"×\"></slider-ui>\n          </field-ui>\n        </div>\n      </popover-ui>\n    </span>\n  </header>\n  <section data-chat-messages>\n    <empty-state-ui data-chat-empty icon=\"chat-circle\"\n      heading=\"AdiaUI Chat\"\n      description=\"Type a message to start a conversation. Connects to LLM model via proxy if available.\">\n    </empty-state-ui>\n  </section>\n  <footer>\n    <chat-input-ui data-chat-input placeholder=\"Message Claude...\"></chat-input-ui>\n  </footer>\n</adia-chat-ui>",
-  "source": "site/pages/playground/chat/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
-}

package/chunks/playground-construct-canvas.json

@@ -1,14 +0,0 @@
-{
-  "name": "playground-construct-canvas",
-  "kind": "block",
-  "primary": "div",
-  "page": "/site/playground/construct-canvas",
-  "slots": [],
-  "nested": [],
-  "attrs": {
-    "data-canvas": ""
-  },
-  "html": "<div data-canvas data-chunk=\"playground-construct-canvas\">\n      <div id=\"canvas-host\" role=\"application\" aria-label=\"Construct canvas — drag, zoom, and connect cards\" tabindex=\"0\">\n        <!-- canvas-projection mounts a #cc-pan-frame > <noodles-ui> in here -->\n      </div>\n      <!-- Floating zoom + pan controls (graph-editor convention: bottom-right) -->\n      <div class=\"cc-zoom-controls\" role=\"toolbar\" aria-label=\"Canvas zoom\">\n        <button-ui id=\"zoom-out\"   icon=\"minus\"          variant=\"ghost\" size=\"sm\" aria-label=\"Zoom out\"     title=\"Zoom out (-)\" data-hotkey=\"-\" data-hotkey-global></button-ui>\n        <span id=\"zoom-label\" aria-live=\"polite\">100%</span>\n        <button-ui id=\"zoom-in\"    icon=\"plus\"           variant=\"ghost\" size=\"sm\" aria-label=\"Zoom in\"      title=\"Zoom in (+)\"></button-ui>\n        <divider-ui vertical style=\"height: 16px;\"></divider-ui>\n        <button-ui id=\"zoom-fit\"   icon=\"frame-corners\"  variant=\"ghost\" size=\"sm\" aria-label=\"Fit to content\" title=\"Fit to content (1)\" data-hotkey=\"1\" data-hotkey-global></button-ui>\n        <button-ui id=\"zoom-reset\" icon=\"circle\"         variant=\"ghost\" size=\"sm\" aria-label=\"Reset to 100%\"  title=\"Reset to 100% (0)\" data-hotkey=\"0\" data-hotkey-global></button-ui>\n        <divider-ui vertical style=\"height: 16px;\"></divider-ui>\n        <button-ui id=\"auto-arrange-btn\" icon=\"layout\"   variant=\"ghost\" size=\"sm\" aria-label=\"Auto-arrange\"   title=\"Auto-arrange (L)\"   data-hotkey=\"l\" data-hotkey-global></button-ui>\n      </div>\n    </div>",
-  "source": "site/pages/playground/construct-canvas/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
-}

package/chunks/playground-gen-ui.json

@@ -1,14 +0,0 @@
-{
-  "name": "playground-gen-ui",
-  "kind": "block",
-  "primary": "div",
-  "page": "/site/playground/gen-ui",
-  "slots": [],
-  "nested": [],
-  "attrs": {
-    "data-view": "chat"
-  },
-  "html": "<div id=\"gen-ui-shell\" data-view=\"chat\" data-chunk=\"playground-gen-ui\">\n  <!-- Chat pane (resizable via pane-ui) -->\n  <pane-ui id=\"chat-pane\" resizable min-width=\"280\">\n    <section>\n      <adia-chat-ui id=\"gen-chat\">\n        <section data-chat-messages>\n          <empty-state-ui data-chat-empty icon=\"magic-wand\"\n            heading=\"AdiaUI Generator\"\n            description=\"Describe a UI and watch it render live.\">\n          </empty-state-ui>\n        </section>\n        <footer>\n          <chat-input-ui data-chat-input placeholder=\"Describe a UI...\"></chat-input-ui>\n        </footer>\n      </adia-chat-ui>\n    </section>\n  </pane-ui>\n\n  <!-- Canvas panel (plain div — no collapse behavior) -->\n  <div id=\"canvas-panel\">\n    <div id=\"canvas-toolbar\">\n      <row-ui gap=\"2\" align=\"center\">\n        <button-ui id=\"btn-toggle-view\" text=\"Chat\" variant=\"ghost\" size=\"sm\" icon=\"chat-circle\"></button-ui>\n        <icon-ui name=\"layout\" color=\"muted\"></icon-ui>\n        <text-ui strong>Canvas</text-ui>\n        <badge-ui id=\"validation-badge\" text=\"\" variant=\"default\" size=\"sm\" hidden></badge-ui>\n      </row-ui>\n      <row-ui gap=\"1\">\n        <button-ui id=\"btn-back\" variant=\"ghost\" size=\"sm\" icon=\"arrow-left\" disabled></button-ui>\n        <button-ui id=\"btn-forward\" variant=\"ghost\" size=\"sm\" icon=\"arrow-right\" disabled></button-ui>\n        <button-ui id=\"btn-clear\" variant=\"ghost\" size=\"sm\" icon=\"trash\"></button-ui>\n        <button-ui id=\"btn-code\" variant=\"ghost\" size=\"sm\" icon=\"code\"></button-ui>\n      </row-ui>\n    </div>\n    <section>\n      <canvas-ui id=\"canvas\"></canvas-ui>\n    </section>\n    <footer id=\"code-panel\" hidden>\n      <code-ui id=\"code-view\" language=\"json\" style=\"font-size:var(--a-ui-sm);\"></code-ui>\n    </footer>\n  </div>\n</div>",
-  "source": "site/pages/playground/gen-ui/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
-}