@adia-ai/a2ui-corpus 0.4.8 → 0.5.0

package/chunks/playground-app-shell.json

@@ -10,5 +10,5 @@
   },
   "html": "<admin-shell mode=\"rounded borderless\">\n      <!-- ═══════════════ LEFT SIDEBAR ═══════════════ -->\n      <admin-sidebar slot=\"leading\" resizable collapsible>\n        <header-ui>\n          <select-ui id=\"workspace-select\" avatar=\"/icons/agent-ui-light.svg\" value=\"adia-ui\" variant=\"ghost\" style=\"flex: 1\"></select-ui>\n        </header-ui>\n\n        <section-ui>\n          <nav-ui id=\"nav\">\n            <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            </nav-item-ui>\n            <hr data-nav-divider />\n            <nav-group-ui icon=\"house\" text=\"Home\" open>\n              <nav-item-ui text=\"Dashboard\" value=\"dashboard\" selected></nav-item-ui>\n              <nav-item-ui text=\"Analytics\" value=\"analytics\"></nav-item-ui>\n              <nav-item-ui text=\"Reports\" value=\"reports\"></nav-item-ui>\n            </nav-group-ui>\n            <nav-group-ui icon=\"gear\" text=\"Settings\">\n              <nav-item-ui text=\"General\" value=\"general\"></nav-item-ui>\n              <nav-item-ui text=\"Team\" value=\"team\"></nav-item-ui>\n              <nav-item-ui text=\"Billing\" value=\"billing\"></nav-item-ui>\n            </nav-group-ui>\n          </nav-ui>\n        </section-ui>\n\n        <footer-ui>\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-ui>\n        <div data-resize></div>\n      </admin-sidebar>\n\n      <!-- ═══════════════ MAIN ═══════════════ -->\n      <main>\n        <header-ui>\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            <popover-ui id=\"theme-popover\" placement=\"bottom-end\">\n              <button-ui icon=\"palette\" variant=\"ghost\" size=\"sm\" slot=\"trigger\"></button-ui>\n              <theme-panel slot=\"content\" parametric presets scheme-toggle></theme-panel>\n            </popover-ui>\n          </span>\n        </header-ui>\n\n        <section-ui>\n          <aside id=\"subnav-rail\" data-subnav>\n            <nav-ui variant=\"section\" id=\"subnav\" heading=\"Dashboard\">\n              <nav-item-ui text=\"Overview\" value=\"overview\" selected></nav-item-ui>\n              <nav-item-ui text=\"Activity\" value=\"activity\"></nav-item-ui>\n              <nav-item-ui text=\"Revenue\" value=\"revenue\"></nav-item-ui>\n              <nav-item-ui text=\"Traffic\" value=\"traffic\"></nav-item-ui>\n            </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 +\n                  command trigger, main content area with an optional subnav rail, and a bottom footer.\n                </p>\n              </section>\n            </div>\n          </article>\n        </section-ui>\n\n        <footer-ui>\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-ui>\n      </main>\n\n      <!-- ═══════════════ COMMAND PALETTE ═══════════════ -->\n      <admin-command>\n        <command-ui id=\"cmd\" placeholder=\"Search pages...\"></command-ui>\n      </admin-command>\n    </admin-shell>",
   "source": "playgrounds/admin-shell/app/admin-shell.contents.html",
-  "captured_at": "2026-05-12T19:23:09.661Z"
+  "captured_at": "2026-05-13T20:06:48.496Z"
 }

package/chunks/playground-chat.json

@@ -11,5 +11,5 @@
   },
   "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>",
   "source": "playgrounds/chat/app/chat.contents.html",
-  "captured_at": "2026-05-12T19:23:09.661Z"
+  "captured_at": "2026-05-13T20:06:48.496Z"
 }

package/chunks/playground-construct-canvas.json

@@ -8,5 +8,5 @@
   "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-12T19:23:09.661Z"
+  "captured_at": "2026-05-13T20:06:48.496Z"
 }

package/chunks/playground-gen-ui.json

@@ -10,5 +10,5 @@
   },
   "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-12T19:23:09.661Z"
+  "captured_at": "2026-05-13T20:06:48.496Z"
 }

package/chunks/playground-render-preview.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<div id=\"pg-shell\">\n      <!-- ── Toolbar ───────────────────────────────────────────── -->\n      <div id=\"pg-toolbar\">\n        <row-ui gap=\"2\" align=\"center\">\n          <icon-ui name=\"broadcast\" color=\"muted\"></icon-ui>\n          <text-ui strong>Render Preview</text-ui>\n          <badge-ui id=\"pg-status-badge\" text=\"ready\" size=\"sm\" variant=\"default\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"2\" align=\"center\">\n          <select-ui id=\"pg-example-select\" size=\"sm\" placeholder=\"Load example…\" style=\"min-width: 14rem\">\n            <option value=\"\">Load example…</option>\n            <option value=\"single-card\">Single surface — card + stat</option>\n            <option value=\"streamed-list\">Streamed updates — append items</option>\n            <option value=\"data-bindings\">Data bindings — updateDataModel</option>\n            <option value=\"multi-surface\">Multiple surfaces</option>\n            <option value=\"unknown-component\">Unknown component (graceful fallback)</option>\n          </select-ui>\n          <divider-ui vertical></divider-ui>\n          <button-ui id=\"pg-btn-step\" variant=\"ghost\" size=\"sm\" icon=\"skip-forward\" text=\"Step\" disabled></button-ui>\n          <button-ui id=\"pg-btn-run\" variant=\"primary\" size=\"sm\" icon=\"play\" text=\"Run all\"></button-ui>\n          <button-ui id=\"pg-btn-clear\" variant=\"ghost\" size=\"sm\" icon=\"trash\" text=\"Clear\"></button-ui>\n        </row-ui>\n      </div>\n\n      <!-- ── Body — input | output ─────────────────────────────── -->\n      <div id=\"pg-body\">\n        <!-- LEFT — message stream input -->\n        <section id=\"pg-input-pane\">\n          <header class=\"pg-pane-header\">\n            <text-ui weight=\"medium\" size=\"sm\">A2UI message stream</text-ui>\n            <text-ui size=\"xs\" color=\"muted\" id=\"pg-message-count\">0 messages</text-ui>\n          </header>\n          <textarea\n            id=\"pg-input\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            placeholder='[\n  { \"type\": \"createSurface\", \"surfaceId\": \"main\", \"root\": \"root\" },\n  { \"type\": \"updateComponents\", \"surfaceId\": \"main\", \"components\": [\n    { \"id\": \"root\", \"component\": \"Card\", \"children\": [\"title\"] },\n    { \"id\": \"title\", \"component\": \"Text\", \"variant\": \"h2\", \"text\": \"Hello\" }\n  ]}\n]'\n          ></textarea>\n          <footer class=\"pg-pane-footer\" id=\"pg-input-error\" hidden>\n            <icon-ui name=\"warning\" size=\"sm\" color=\"danger\"></icon-ui>\n            <text-ui size=\"xs\" color=\"danger\" id=\"pg-input-error-text\"></text-ui>\n          </footer>\n        </section>\n\n        <!-- RIGHT — render surface + log -->\n        <section id=\"pg-output-pane\">\n          <header class=\"pg-pane-header\">\n            <text-ui weight=\"medium\" size=\"sm\">Rendered output</text-ui>\n            <row-ui gap=\"3\" align=\"center\">\n              <text-ui size=\"xs\" color=\"muted\" id=\"pg-surface-count\">0 surfaces</text-ui>\n              <text-ui size=\"xs\" color=\"muted\" id=\"pg-component-count\">0 components</text-ui>\n            </row-ui>\n          </header>\n          <div id=\"pg-surface\" aria-live=\"polite\"></div>\n          <details id=\"pg-log-panel\">\n            <summary>\n              <text-ui size=\"xs\" color=\"muted\">Message log</text-ui>\n              <text-ui size=\"xs\" color=\"muted\" id=\"pg-log-count\">0</text-ui>\n            </summary>\n            <ol id=\"pg-log\"></ol>\n          </details>\n        </section>\n      </div>\n    </div>",
   "source": "apps/genui/app/render-preview/render-preview.contents.html",
-  "captured_at": "2026-05-12T19:23:09.661Z"
+  "captured_at": "2026-05-13T20:06:48.496Z"
 }

package/chunks/playground-streams-bridge.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<div id=\"pg-shell\">\n      <div id=\"pg-toolbar\">\n        <row-ui gap=\"2\" align=\"center\">\n          <icon-ui name=\"plug\" color=\"muted\"></icon-ui>\n          <text-ui strong>Streams Bridge</text-ui>\n          <badge-ui id=\"pg-source-badge\" text=\"loading…\" variant=\"default\" size=\"sm\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"2\">\n          <button-ui id=\"pg-btn-refresh\" variant=\"ghost\" size=\"sm\" icon=\"arrows-clockwise\" text=\"Refresh\"></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)\">One stream, two consumers — bridged into A2UI</h1>\n          <p style=\"margin: 0; color: var(--a-text-muted); font-size: var(--a-ui-sm); line-height: 1.5\">\n            Both tiles below subscribe to the same <code>data-stream-id=\"rev-pg\"</code>, fed from <code>/site/mock/revenue.json</code>. The left tile renders a\n            <code>chart-ui</code> driven directly by the <code>data-stream-*</code> attribute trait — the trait writes the parsed response into the chart's\n            <code>.data</code> property and re-renders. The right tile is an <strong>A2UI surface</strong> built from <code>updateComponents</code> messages\n            whose props use <code>{path: '…'}</code> bindings; <code>bridgeStreamAsync</code> proxies the same stream signal into the surface's data model so\n            those bindings resolve — no second fetch (open DevTools' Network tab and confirm only one request per refresh). The bridge piggybacks on the chart's\n            refcount rather than holding its own; the DOM source remains the lifecycle owner.\n          </p>\n        </div>\n\n        <div id=\"pg-grid\">\n          <!-- LEFT — direct data-stream-* trait -->\n          <div class=\"pg-tile\">\n            <h3>Direct via <code>data-stream-src</code></h3>\n            <div id=\"chart-host\">\n              <chart-ui\n                id=\"pg-chart\"\n                type=\"area\"\n                x=\"month\"\n                y=\"revenue\"\n                data-stream-src=\"/site/mock/revenue.json\"\n                data-stream-path=\"data\"\n                data-stream-id=\"rev-pg\"\n                aria-label=\"Revenue chart fed via data-stream-src\"\n                style=\"display: block; width: 100%; height: 280px\"\n              ></chart-ui>\n            </div>\n          </div>\n\n          <!-- RIGHT — A2UI surface, bound via bridgeStreamAsync -->\n          <div class=\"pg-tile\">\n            <h3>Via <code>bridgeStreamAsync</code> → A2UI surface</h3>\n            <div id=\"a2ui-host\">\n              <empty-state-ui\n                icon=\"hourglass\"\n                heading=\"Waiting for stream…\"\n                description=\"The bridge will populate these bindings once the fetch resolves.\"\n              ></empty-state-ui>\n            </div>\n          </div>\n        </div>\n\n        <div id=\"pg-status\">\n          <div data-pg-status-row><strong>Stream id:</strong> <code id=\"pg-status-id\">id:rev-pg</code></div>\n          <div data-pg-status-row><strong>Stream signal:</strong> <span id=\"pg-status-signal\">—</span></div>\n          <div data-pg-status-row><strong>Surface dataModel:</strong> <code id=\"pg-status-model\">—</code></div>\n          <div data-pg-status-row><strong>DOM consumer refs:</strong> <span id=\"pg-status-refs\">—</span></div>\n          <div data-pg-status-row><strong>Last fetch:</strong> <span id=\"pg-status-fetched\">—</span></div>\n        </div>\n\n        <details id=\"pg-code-panel\">\n          <summary>Show the wiring (bridge call + A2UI messages)</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>",
   "source": "apps/genui/app/streams-bridge/streams-bridge.contents.html",
-  "captured_at": "2026-05-12T19:23:09.661Z"
+  "captured_at": "2026-05-13T20:06:48.496Z"
 }

package/chunks/playground-table-toolbar.json

@@ -12,5 +12,5 @@
   },
   "html": "<table-toolbar-ui for=\"employees\" text=\"All Employees\" count=\"32\"></table-toolbar-ui>",
   "source": "playgrounds/table-toolbar/app/table-toolbar.contents.html",
-  "captured_at": "2026-05-12T19:23:09.661Z"
+  "captured_at": "2026-05-13T20:06:48.496Z"
 }

package/chunks/progress-tracker-milestones.json

@@ -0,0 +1,255 @@
+{
+  "name": "progress-tracker-milestones",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <card-ui>\n      <header>\n        <text-ui strong>Project milestones</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">3 of 5 complete</text-ui>\n      </header>\n      <section>\n        <col-ui gap=\"3\">\n          <progress-ui value=\"60\" total=\"100\"></progress-ui>\n          <col-ui gap=\"2\">\n            <row-ui gap=\"3\" align=\"center\">\n              <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n              <col-ui gap=\"0\">\n                <text-ui strong size=\"sm\">Discovery phase</text-ui>\n                <text-ui size=\"xs\" color=\"subtle\">Completed Mar 12</text-ui>\n              </col-ui>\n            </row-ui>\n            <row-ui gap=\"3\" align=\"center\">\n              <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n              <col-ui gap=\"0\">\n                <text-ui strong size=\"sm\">Design system</text-ui>\n                <text-ui size=\"xs\" color=\"subtle\">Completed Apr 4</text-ui>\n              </col-ui>\n            </row-ui>\n            <row-ui gap=\"3\" align=\"center\">\n              <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n              <col-ui gap=\"0\">\n                <text-ui strong size=\"sm\">Alpha release</text-ui>\n                <text-ui size=\"xs\" color=\"subtle\">Completed May 1</text-ui>\n              </col-ui>\n            </row-ui>\n            <row-ui gap=\"3\" align=\"center\">\n              <icon-ui name=\"circle-dashed\" color=\"accent\"></icon-ui>\n              <col-ui gap=\"0\">\n                <text-ui strong size=\"sm\">Beta release</text-ui>\n                <text-ui size=\"xs\" color=\"subtle\">In progress · 4 days remaining</text-ui>\n              </col-ui>\n            </row-ui>\n            <row-ui gap=\"3\" align=\"center\">\n              <icon-ui name=\"circle\" color=\"subtle\"></icon-ui>\n              <col-ui gap=\"0\">\n                <text-ui strong size=\"sm\">GA launch</text-ui>\n                <text-ui size=\"xs\" color=\"subtle\">Target: Jun 15</text-ui>\n              </col-ui>\n            </row-ui>\n          </col-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Progress tracker with milestone checkpoints, current-stage indicator, and remaining-steps preview.",
+    "keywords": [
+      "progress",
+      "milestones",
+      "tracker",
+      "checkpoints",
+      "stage",
+      "steps",
+      "timeline",
+      "completion",
+      "remaining",
+      "tasks"
+    ]
+  },
+  "captured_at": "2026-05-13T20:06:48.496Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Project milestones"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "3 of 5 complete"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    },
+    {
+      "id": "progress",
+      "component": "Progress"
+    },
+    {
+      "id": "check-circle",
+      "component": "Icon"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "textContent": "Discovery phase"
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "textContent": "Completed Mar 12"
+    },
+    {
+      "id": "column-3",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text-3",
+        "text-4"
+      ]
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "check-circle",
+        "column-3"
+      ]
+    },
+    {
+      "id": "icon",
+      "component": "Icon"
+    },
+    {
+      "id": "text-5",
+      "component": "Text",
+      "textContent": "Design system"
+    },
+    {
+      "id": "text-6",
+      "component": "Text",
+      "textContent": "Completed Apr 4"
+    },
+    {
+      "id": "column-4",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text-5",
+        "text-6"
+      ]
+    },
+    {
+      "id": "row-2",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "icon",
+        "column-4"
+      ]
+    },
+    {
+      "id": "icon-2",
+      "component": "Icon"
+    },
+    {
+      "id": "text-7",
+      "component": "Text",
+      "textContent": "Alpha release"
+    },
+    {
+      "id": "text-8",
+      "component": "Text",
+      "textContent": "Completed May 1"
+    },
+    {
+      "id": "column-5",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text-7",
+        "text-8"
+      ]
+    },
+    {
+      "id": "row-3",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "icon-2",
+        "column-5"
+      ]
+    },
+    {
+      "id": "circle-dashed",
+      "component": "Icon"
+    },
+    {
+      "id": "text-9",
+      "component": "Text",
+      "textContent": "Beta release"
+    },
+    {
+      "id": "text-10",
+      "component": "Text",
+      "textContent": "In progress · 4 days remaining"
+    },
+    {
+      "id": "column-6",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text-9",
+        "text-10"
+      ]
+    },
+    {
+      "id": "row-4",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "circle-dashed",
+        "column-6"
+      ]
+    },
+    {
+      "id": "circle",
+      "component": "Icon"
+    },
+    {
+      "id": "text-11",
+      "component": "Text",
+      "textContent": "GA launch"
+    },
+    {
+      "id": "text-12",
+      "component": "Text",
+      "textContent": "Target: Jun 15"
+    },
+    {
+      "id": "column-7",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text-11",
+        "text-12"
+      ]
+    },
+    {
+      "id": "row-5",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "circle",
+        "column-7"
+      ]
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "gap": "2",
+      "children": [
+        "row",
+        "row-2",
+        "row-3",
+        "row-4",
+        "row-5"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "progress",
+        "column-2"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "card",
+      "component": "Card",
+      "children": [
+        "header",
+        "section"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "card"
+      ]
+    }
+  ]
+}

package/chunks/real-time-metrics-dashboard.json

@@ -0,0 +1,278 @@
+{
+  "name": "real-time-metrics-dashboard",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <col-ui gap=\"4\">\n      <row-ui gap=\"3\" align=\"center\">\n        <h3>Live metrics</h3>\n        <tag-ui text=\"● Live\" color=\"success\" size=\"sm\"></tag-ui>\n        <text-ui size=\"xs\" color=\"subtle\">Updated 2s ago</text-ui>\n      </row-ui>\n      <grid-ui columns=\"4\" gap=\"3\">\n        <card-ui>\n          <header><text-ui size=\"sm\" color=\"subtle\">Requests / sec</text-ui></header>\n          <section><text-ui size=\"xl\" strong>1,284</text-ui></section>\n        </card-ui>\n        <card-ui>\n          <header><text-ui size=\"sm\" color=\"subtle\">Latency p50</text-ui></header>\n          <section><text-ui size=\"xl\" strong>42ms</text-ui></section>\n        </card-ui>\n        <card-ui>\n          <header><text-ui size=\"sm\" color=\"subtle\">Error rate</text-ui></header>\n          <section><text-ui size=\"xl\" strong color=\"success\">0.04%</text-ui></section>\n        </card-ui>\n        <card-ui>\n          <header><text-ui size=\"sm\" color=\"subtle\">Active sessions</text-ui></header>\n          <section><text-ui size=\"xl\" strong>8,419</text-ui></section>\n        </card-ui>\n      </grid-ui>\n      <card-ui>\n        <header><text-ui strong>Throughput (last 60s)</text-ui></header>\n        <section>\n          <text-ui color=\"subtle\">[ live line chart ]</text-ui>\n        </section>\n      </card-ui>\n    </col-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Real-time metrics dashboard with live counters, streaming line charts, and last-updated timestamp.",
+    "keywords": [
+      "real-time",
+      "metrics",
+      "live",
+      "dashboard",
+      "streaming",
+      "counters",
+      "charts",
+      "websocket",
+      "telemetry",
+      "monitoring"
+    ]
+  },
+  "captured_at": "2026-05-13T20:06:48.496Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "h3",
+      "textContent": "Live metrics"
+    },
+    {
+      "id": "tag",
+      "component": "Tag"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "Updated 2s ago"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "text",
+        "tag",
+        "text-2"
+      ]
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "textContent": "Requests / sec"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text-3"
+      ]
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "textContent": "1,284"
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column-2"
+      ]
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "children": [
+        "text-4"
+      ]
+    },
+    {
+      "id": "card",
+      "component": "Card",
+      "children": [
+        "header",
+        "section"
+      ]
+    },
+    {
+      "id": "text-5",
+      "component": "Text",
+      "textContent": "Latency p50"
+    },
+    {
+      "id": "header-2",
+      "component": "Header",
+      "children": [
+        "text-5"
+      ]
+    },
+    {
+      "id": "text-6",
+      "component": "Text",
+      "textContent": "42ms"
+    },
+    {
+      "id": "section-2",
+      "component": "Section",
+      "children": [
+        "column-3"
+      ]
+    },
+    {
+      "id": "column-3",
+      "component": "Column",
+      "children": [
+        "text-6"
+      ]
+    },
+    {
+      "id": "card-2",
+      "component": "Card",
+      "children": [
+        "header-2",
+        "section-2"
+      ]
+    },
+    {
+      "id": "text-7",
+      "component": "Text",
+      "textContent": "Error rate"
+    },
+    {
+      "id": "header-3",
+      "component": "Header",
+      "children": [
+        "text-7"
+      ]
+    },
+    {
+      "id": "text-8",
+      "component": "Text",
+      "textContent": "0.04%"
+    },
+    {
+      "id": "section-3",
+      "component": "Section",
+      "children": [
+        "column-4"
+      ]
+    },
+    {
+      "id": "column-4",
+      "component": "Column",
+      "children": [
+        "text-8"
+      ]
+    },
+    {
+      "id": "card-3",
+      "component": "Card",
+      "children": [
+        "header-3",
+        "section-3"
+      ]
+    },
+    {
+      "id": "text-9",
+      "component": "Text",
+      "textContent": "Active sessions"
+    },
+    {
+      "id": "header-4",
+      "component": "Header",
+      "children": [
+        "text-9"
+      ]
+    },
+    {
+      "id": "text-10",
+      "component": "Text",
+      "textContent": "8,419"
+    },
+    {
+      "id": "section-4",
+      "component": "Section",
+      "children": [
+        "column-5"
+      ]
+    },
+    {
+      "id": "column-5",
+      "component": "Column",
+      "children": [
+        "text-10"
+      ]
+    },
+    {
+      "id": "card-4",
+      "component": "Card",
+      "children": [
+        "header-4",
+        "section-4"
+      ]
+    },
+    {
+      "id": "grid",
+      "component": "Grid",
+      "gap": "3",
+      "children": [
+        "card",
+        "card-2",
+        "card-3",
+        "card-4"
+      ]
+    },
+    {
+      "id": "text-11",
+      "component": "Text",
+      "textContent": "Throughput (last 60s)"
+    },
+    {
+      "id": "header-5",
+      "component": "Header",
+      "children": [
+        "text-11"
+      ]
+    },
+    {
+      "id": "text-12",
+      "component": "Text",
+      "textContent": "[ live line chart ]"
+    },
+    {
+      "id": "section-5",
+      "component": "Section",
+      "children": [
+        "column-6"
+      ]
+    },
+    {
+      "id": "column-6",
+      "component": "Column",
+      "children": [
+        "text-12"
+      ]
+    },
+    {
+      "id": "card-5",
+      "component": "Card",
+      "children": [
+        "header-5",
+        "section-5"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "4",
+      "children": [
+        "row",
+        "grid",
+        "card-5"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    }
+  ]
+}