@adia-ai/a2ui-corpus 0.6.22 → 0.6.24

package/chunks/playground-chat.json

@@ -9,7 +9,90 @@
     "proxy-url": "/api/chat",
     "model": "claude-haiku-4-5-20251001"
   },
-  "html": "<chat-shell id=\"chat\" proxy-url=\"/api/chat\" model=\"claude-haiku-4-5-20251001\" style=\"flex: 1; border: none; border-radius: 0\">\n  <chat-header>\n    <span slot=\"name\">Factory Chat</span>\n    <chat-status slot=\"status\"></chat-status>\n    <span slot=\"action\" style=\"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  </chat-header>\n  <chat-thread>\n    <chat-empty>\n      <empty-state-ui\n        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    </chat-empty>\n  </chat-thread>\n  <chat-composer>\n    <chat-input-ui placeholder=\"Message Claude...\"></chat-input-ui>\n  </chat-composer>\n</chat-shell>",
+  "html": "<chat-shell id=\"chat\" proxy-url=\"/api/chat\" model=\"claude-haiku-4-5-20251001\" style=\"flex: 1; border: none; border-radius: 0\">\n  <chat-header>\n    <span slot=\"name\">Factory Chat</span>\n    <chat-status slot=\"status\"></chat-status>\n    <span slot=\"action\" size=\"sm\" style=\"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  </chat-header>\n  <chat-thread>\n    <chat-empty>\n      <empty-state-ui\n        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    </chat-empty>\n  </chat-thread>\n  <chat-composer>\n    <chat-input-ui placeholder=\"Message Claude...\"></chat-input-ui>\n  </chat-composer>\n</chat-shell>",
   "source": "playgrounds/chat/app/chat.contents.html",
-  "captured_at": "2026-05-21T19:10:53.888Z"
+  "metadata": {
+    "domain": "agent",
+    "description": "Chat playground — full chat thread interface with composer and streaming response.",
+    "keywords": [
+      "playground",
+      "chat",
+      "thread",
+      "streaming",
+      "composer",
+      "agent"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Factory Chat"
+    },
+    {
+      "id": "chat-status",
+      "component": "ChatStatus"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "body",
+      "size": "sm",
+      "textContent": "Theme Parametric"
+    },
+    {
+      "id": "chat-header",
+      "component": "ChatHeader",
+      "children": [
+        "text",
+        "chat-status",
+        "text-2"
+      ]
+    },
+    {
+      "id": "empty-state",
+      "component": "EmptyState",
+      "description": "Type a message to start a conversation. Connects to LLM model via proxy if available.",
+      "heading": "AdiaUI Chat",
+      "icon": "chat-circle"
+    },
+    {
+      "id": "chat-empty",
+      "component": "ChatEmpty",
+      "children": [
+        "empty-state"
+      ]
+    },
+    {
+      "id": "chat-thread",
+      "component": "ChatThread",
+      "children": [
+        "chat-empty"
+      ]
+    },
+    {
+      "id": "chat-input",
+      "component": "ChatInput",
+      "placeholder": "Message Claude..."
+    },
+    {
+      "id": "chat-composer",
+      "component": "ChatComposer",
+      "children": [
+        "chat-input"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "ChatShell",
+      "model": "claude-haiku-4-5-20251001",
+      "children": [
+        "chat-header",
+        "chat-thread",
+        "chat-composer"
+      ]
+    }
+  ]
 }

package/chunks/playground-construct-canvas.json

@@ -8,5 +8,111 @@
   "attrs": {},
   "html": "<editor-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           toolbar-ui owns the flex/border/bg/role chrome; the .cc-zoom-controls\n           class only adds floating positioning + backdrop-blur on top. -->\n          <toolbar-ui class=\"cc-zoom-controls\" bordered aria-label=\"Canvas zoom\">\n            <button-ui\n              id=\"zoom-out\"\n              icon=\"minus\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Zoom out\"\n              title=\"Zoom out (-)\"\n              data-hotkey=\"-\"\n              data-hotkey-global\n            ></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\n              id=\"zoom-fit\"\n              icon=\"frame-corners\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Fit to content\"\n              title=\"Fit to content (1)\"\n              data-hotkey=\"1\"\n              data-hotkey-global\n            ></button-ui>\n            <button-ui\n              id=\"zoom-reset\"\n              icon=\"circle\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Reset to 100%\"\n              title=\"Reset to 100% (0)\"\n              data-hotkey=\"0\"\n              data-hotkey-global\n            ></button-ui>\n            <divider-ui vertical style=\"height: 16px\"></divider-ui>\n            <button-ui\n              id=\"auto-arrange-btn\"\n              icon=\"layout\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Auto-arrange\"\n              title=\"Auto-arrange (L)\"\n              data-hotkey=\"l\"\n              data-hotkey-global\n            ></button-ui>\n          </toolbar-ui>\n      </editor-canvas>",
   "source": "apps/construct-canvas/app/construct-canvas.contents.html",
-  "captured_at": "2026-05-21T19:10:53.888Z"
+  "metadata": {
+    "domain": "agent",
+    "description": "Construct canvas playground — visual agent canvas editor with inspector panel.",
+    "keywords": [
+      "playground",
+      "canvas",
+      "construct",
+      "agent",
+      "inspector",
+      "visual",
+      "editor"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "canvas-host",
+      "component": "Column"
+    },
+    {
+      "id": "zoom-out",
+      "component": "Button",
+      "aria-label": "Zoom out",
+      "icon": "minus",
+      "size": "sm",
+      "variant": "ghost",
+      "data-hotkey": "-",
+      "data-hotkey-global": ""
+    },
+    {
+      "id": "zoom-label",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "100%"
+    },
+    {
+      "id": "zoom-in",
+      "component": "Button",
+      "aria-label": "Zoom in",
+      "icon": "plus",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "divider",
+      "component": "Divider",
+      "vertical": true
+    },
+    {
+      "id": "zoom-fit",
+      "component": "Button",
+      "aria-label": "Fit to content",
+      "icon": "frame-corners",
+      "size": "sm",
+      "variant": "ghost",
+      "data-hotkey": "1",
+      "data-hotkey-global": ""
+    },
+    {
+      "id": "zoom-reset",
+      "component": "Button",
+      "aria-label": "Reset to 100%",
+      "icon": "circle",
+      "size": "sm",
+      "variant": "ghost",
+      "data-hotkey": "0",
+      "data-hotkey-global": ""
+    },
+    {
+      "id": "divider-2",
+      "component": "Divider",
+      "vertical": true
+    },
+    {
+      "id": "auto-arrange-btn",
+      "component": "Button",
+      "aria-label": "Auto-arrange",
+      "icon": "layout",
+      "size": "sm",
+      "variant": "ghost",
+      "data-hotkey": "l",
+      "data-hotkey-global": ""
+    },
+    {
+      "id": "canvas-zoom",
+      "component": "Toolbar",
+      "bordered": true,
+      "children": [
+        "zoom-out",
+        "zoom-label",
+        "zoom-in",
+        "divider",
+        "zoom-fit",
+        "zoom-reset",
+        "divider-2",
+        "auto-arrange-btn"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "EditorCanvas",
+      "children": [
+        "canvas-host",
+        "canvas-zoom"
+      ]
+    }
+  ]
 }

package/chunks/playground-gen-ui.json

@@ -10,5 +10,204 @@
   },
   "html": "<div id=\"gen-ui-shell\" data-view=\"chat\">\n      <!-- Chat pane (resizable via pane-ui) -->\n      <pane-ui id=\"chat-pane\" resizable min-width=\"280\">\n        <section>\n          <chat-shell id=\"gen-chat\">\n            <chat-thread>\n              <chat-empty>\n                <empty-state-ui icon=\"magic-wand\" heading=\"AdiaUI Generator\" description=\"Describe a UI and watch it render live.\">\n                </empty-state-ui>\n              </chat-empty>\n            </chat-thread>\n            <chat-composer>\n              <chat-input-ui placeholder=\"Describe a UI...\"></chat-input-ui>\n            </chat-composer>\n          </chat-shell>\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": "apps/genui/app/gen-ui/gen-ui.contents.html",
-  "captured_at": "2026-05-21T19:10:53.888Z"
+  "metadata": {
+    "domain": "layout",
+    "description": "Gen-UI playground — A2UI generation interface with prompt input and output preview.",
+    "keywords": [
+      "playground",
+      "gen",
+      "ui",
+      "a2ui",
+      "generate",
+      "prompt",
+      "output",
+      "preview"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "empty-state",
+      "component": "EmptyState",
+      "description": "Describe a UI and watch it render live.",
+      "heading": "AdiaUI Generator",
+      "icon": "magic-wand"
+    },
+    {
+      "id": "chat-empty",
+      "component": "ChatEmpty",
+      "children": [
+        "empty-state"
+      ]
+    },
+    {
+      "id": "chat-thread",
+      "component": "ChatThread",
+      "children": [
+        "chat-empty"
+      ]
+    },
+    {
+      "id": "chat-input",
+      "component": "ChatInput",
+      "placeholder": "Describe a UI..."
+    },
+    {
+      "id": "chat-composer",
+      "component": "ChatComposer",
+      "children": [
+        "chat-input"
+      ]
+    },
+    {
+      "id": "gen-chat",
+      "component": "ChatShell",
+      "children": [
+        "chat-thread",
+        "chat-composer"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "gen-chat"
+      ]
+    },
+    {
+      "id": "chat-pane",
+      "component": "Panel",
+      "resizable": true,
+      "children": [
+        "section"
+      ]
+    },
+    {
+      "id": "btn-toggle-view",
+      "component": "Button",
+      "icon": "chat-circle",
+      "size": "sm",
+      "text": "Chat",
+      "variant": "ghost"
+    },
+    {
+      "id": "layout",
+      "component": "Icon",
+      "name": "layout"
+    },
+    {
+      "id": "text",
+      "component": "Text",
+      "strong": true,
+      "textContent": "Canvas"
+    },
+    {
+      "id": "validation-badge",
+      "component": "Badge",
+      "size": "sm",
+      "variant": "default"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "btn-toggle-view",
+        "layout",
+        "text",
+        "validation-badge"
+      ]
+    },
+    {
+      "id": "btn-back",
+      "component": "Button",
+      "disabled": true,
+      "icon": "arrow-left",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "btn-forward",
+      "component": "Button",
+      "disabled": true,
+      "icon": "arrow-right",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "btn-clear",
+      "component": "Button",
+      "icon": "trash",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "btn-code",
+      "component": "Button",
+      "icon": "code",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "row-2",
+      "component": "Row",
+      "gap": "1",
+      "children": [
+        "btn-back",
+        "btn-forward",
+        "btn-clear",
+        "btn-code"
+      ]
+    },
+    {
+      "id": "canvas-toolbar",
+      "component": "Column",
+      "children": [
+        "row",
+        "row-2"
+      ]
+    },
+    {
+      "id": "canvas",
+      "component": "Column"
+    },
+    {
+      "id": "section-2",
+      "component": "Section",
+      "children": [
+        "canvas"
+      ]
+    },
+    {
+      "id": "code-view",
+      "component": "Code",
+      "language": "json"
+    },
+    {
+      "id": "code-panel",
+      "component": "Footer",
+      "children": [
+        "code-view"
+      ]
+    },
+    {
+      "id": "canvas-panel",
+      "component": "Column",
+      "children": [
+        "canvas-toolbar",
+        "section-2",
+        "code-panel"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Column",
+      "data-view": "chat",
+      "children": [
+        "chat-pane",
+        "canvas-panel"
+      ]
+    }
+  ]
 }