@adia-ai/a2ui-corpus 0.7.9 → 0.7.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @adia-ai/a2ui-corpus
 
+## [0.7.11] — 2026-06-04
+
+### Changed
+- **Corpus re-harvested** — `chunks/` (284 files) + `chunk-embeddings.json` (284 × 1536d) regenerated. `captured_at`-only refresh, **no chunk content change** (the 0.7.11 work was the `<frame-ui>` slot-override, `button-ui` hover, the `resizable` trait corners, the `<embed-shell>` resizable wiring, and the `list-item-ui` / `<preview-ui>` fixes — none are chunk-annotated demo markup; embedding vectors are byte-stable, only the harvest timestamp moved).
+
+## [0.7.10] — 2026-06-03
+
+### Changed
+- **Corpus re-harvested** — `chunks/` (284 files) + `chunk-embeddings.json` (284 × 1536d) regenerated. `captured_at`-only refresh, no chunk content change (v0.7.10 work was the `<frame-ui>` primitive + `list-item-ui` grid + `[verse]` type bump + the new `<embed-shell>` — none are chunk-annotated demo markup).
+
 ## [0.7.9] — 2026-06-03
 
 ### Changed

package/catalog-a2ui_0_9.json

@@ -2372,7 +2372,7 @@
     },
     "AppShell": {
       "title": "AppShell",
-      "description": "Behavior-only application shell. Canonical authoring shape uses\ncluster-namespaced bespoke children — <admin-topbar> at the top,\n<admin-sidebar slot=\"leading|trailing\"> rails, <admin-content> for\nthe main content region, <admin-command> for the Cmd+K palette, and\noptional <admin-statusbar> at the bottom. The shell wires sidebar\ntoggle forwarding, command-palette triggers, and the ResizeObserver\nthat drives responsive sidebar collapse; each bespoke child owns\nits own resize / collapse / open state-as-attribute semantics per\nADR-0023.\n\nLegacy data-attribute shapes (<aside data-sidebar>, <dialog\ndata-command>, [data-resize], <aside-ui slot=>, <span data-spacer>,\n<div data-actions>) were RETIRED in v0.4.0 per ADR-0024 and are no\nlonger recognized. Consumers must use the bespoke vocabulary.\n",
+      "description": "Embedded multi-surface shell — composes a primary [app] surface with secondary\n[panel=\"<name>\"] surfaces the consumer provides, arranging them responsively.\nPeer of <admin-shell>. Content-agnostic: it orchestrates whatever [app] +\n[panel] children it is given (it owns layout, not content), so any embedded app\nsupplies its own surfaces.\n\n>=760px the open panel is an EQUAL 50/50 column beside the app and the frame\ngrows to fit; <760px it is a cover sheet that slides up over the app (identity\ntransform at rest, so popovers inside still anchor). Clean attribute contract\n(ADR-0024, no data-*): [app], [panel=\"<name>\"], trigger [opens=\"<name>\"],\n[close]; reflects [panel] on the shell + [active] on the open panel.\n",
       "type": "object",
       "allOf": [
         {
@@ -2386,10 +2386,9 @@
         "component": {
           "const": "AppShell"
         },
-        "mode": {
-          "description": "Layout variant — space-separated token set. Recognized tokens:\n  rounded     — softens content-surface edges (border-radius from --page-content-radius)\n  borderless  — removes outer chrome borders (content dividers persist)\nThe CSS uses `mode~=\"<token>\"` attribute selectors, so multiple\ntokens combine additively (\"rounded borderless\" = both).\n\nDefault since v0.6.13: \"rounded borderless\". A bare `<admin-shell>`\nwith no `mode` attribute auto-promotes to this pair on connect.\nAuthor-supplied `mode` attributes (including the empty string\n`mode=\"\"` for flat bordered chrome) are respected verbatim.\n",
-          "type": "string",
-          "default": "rounded borderless"
+        "panel": {
+          "description": "The open panel's name (empty / absent = none). Reflected state. Set it by\nclicking an [opens=\"<name>\"] trigger, dispatching an `embed:open` event, or\ncalling .open(name) / .close() / .toggle(name).\n",
+          "type": "string"
         }
       },
       "required": [
@@ -2401,86 +2400,69 @@
         "category": "layout",
         "composes": [],
         "events": {
-          "command-select": {
-            "description": "Forwarded from the command palette when an option is chosen.",
-            "detail": {
-              "value": "string"
-            }
-          },
-          "sidebar-resize": {
-            "description": "Fired as a sidebar is dragged; debounced on the trailing edge.",
+          "embed:change": {
+            "description": "Fired after the open panel changes.",
             "detail": {
-              "sidebar": "string",
-              "width": "number"
+              "panel": "string"
             }
           },
-          "sidebar-toggle": {
-            "description": "Fired when a sidebar is collapsed or expanded.",
+          "embed:open": {
+            "description": "Request to open or toggle a panel (consumed by the shell).",
             "detail": {
-              "expanded": "boolean",
-              "sidebar": "string"
+              "panel": "string"
             }
           }
         },
         "examples": [],
         "keywords": [
-          "app-shell",
+          "embed",
           "shell",
           "layout",
-          "admin",
-          "dashboard",
-          "sidebar",
-          "nav"
+          "panel",
+          "multi-pane",
+          "cover-sheet",
+          "app-shell"
         ],
-        "name": "AdminShell",
+        "name": "EmbedShell",
         "related": [
-          "Nav",
-          "NavGroup",
-          "NavItem",
-          "Command"
+          "AdminShell",
+          "Frame",
+          "Drawer"
         ],
         "slots": {
-          "description": {
-            "description": "Secondary metadata inside any chrome bar. Muted + --a-ui-sm size."
-          },
           "default": {
-            "description": "Bespoke children compose here in document order — <admin-topbar>, <admin-sidebar slot=\"leading\">, <admin-content> (containing <admin-page> / <admin-page-header> / <admin-page-body>), <admin-sidebar slot=\"trailing\">, <admin-command>, optional <admin-statusbar>. The shell's grid layout reads child tag selectors to place them."
-          },
-          "action": {
-            "description": "Trailing control cluster inside any chrome bar. The first [slot=\"action\"] child pushes itself (and siblings) to the end; subsequent siblings flow with gap."
-          },
-          "action-leading": {
-            "description": "Leading (inline-start) control cluster inside any chrome bar. Pairs with [slot=\"action\"] for dual-cluster chrome (e.g. back button + breadcrumb on the left, primary actions on the right)."
-          },
-          "heading": {
-            "description": "Primary label inside any chrome bar. Medium-weight + strong fg."
-          },
-          "icon": {
-            "description": "Leading glyph inside any chrome bar (<admin-topbar>, <admin-statusbar>, <admin-sidebar> header/footer). Muted color, flex-align."
+            "description": "Document-order children: one [app] primary surface + any number of [panel=\"<name>\"] secondary surfaces. The shell always shows [app] and reveals the open [panel] (50/50 column >=760px, cover sheet <760px). Triggers ([opens], [close]) may live anywhere inside."
           }
         },
         "states": [
           {
-            "description": "Default, interactive shell.",
+            "description": "No panel open — the app fills the frame.",
             "name": "idle"
+          },
+          {
+            "description": "A panel is open ([panel=\"<name>\"] reflected; the panel carries [active]).",
+            "name": "open"
           }
         ],
-        "status": "stable",
+        "status": "draft",
         "synonyms": {
-          "admin": [
-            "dashboard",
+          "embed": [
+            "embedded",
             "shell",
-            "app-shell"
+            "app-shell",
+            "multi-pane"
           ],
-          "dashboard": [
-            "admin",
-            "shell",
-            "app-shell"
+          "panel": [
+            "pane",
+            "sheet",
+            "drawer"
           ]
         },
-        "tag": "admin-shell",
+        "tag": "embed-shell",
         "tokens": {},
-        "traits": [],
+        "traits": [
+          "resizable"
+        ],
         "version": 1
       }
     },
@@ -10866,6 +10848,89 @@
         "version": 1
       }
     },
+    "Frame": {
+      "title": "Frame",
+      "description": "Sticky-header / scrolling-body / sticky-footer layout frame — the\nchrome-less app-shell skeleton. A flex column that fills its parent's\nblock size: a native <header> child pins to the top, a <footer> child\npins to the bottom, and the <section> child scrolls between them (the\nonly region with overflow). Regions are positioned by tag + DOM order, OR any\nelement can take a region role via slot=\"header|body|footer\" (a CSS [slot] match,\nnot native projection — ADR-0033) — e.g. <section slot=\"header\"> as a pinned rail.\nAll three are OPTIONAL, so the common shape is just <section> + <footer>. Use for\ntab / panel content\nwhere actions stay visible while the body scrolls. Distinct from <card-ui>\n(adds border + elevation + a rich header grid), <drawer-ui> / <modal-ui>\n(add a backdrop + dismiss), and the page shells (<admin-page> / <page-ui>) —\nthose layer chrome over this same region contract. Requires a definite-height\nparent (a flex/grid chain rooted at a viewport height) for the section to\nscroll; in a content-sized parent it collapses to its content (no scroll,\nnot broken).\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "component": {
+          "const": "Frame"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [],
+        "category": "layout",
+        "composes": [],
+        "events": {},
+        "examples": [
+          {
+            "description": "Scrolling body with a pinned footer action bar (no header).",
+            "a2ui": "[\n  { \"id\": \"root\", \"component\": \"Frame\", \"children\": [\"body\", \"actions\"] },\n  { \"id\": \"body\", \"component\": \"Section\", \"children\": [\"copy\"] },\n  { \"id\": \"copy\", \"component\": \"Text\", \"variant\": \"body\", \"textContent\": \"Scrollable panel content.\" },\n  { \"id\": \"actions\", \"component\": \"Footer\", \"children\": [\"save\"] },\n  { \"id\": \"save\", \"component\": \"Button\", \"text\": \"Save\", \"variant\": \"primary\" }\n]",
+            "name": "panel-with-footer"
+          }
+        ],
+        "keywords": [
+          "frame",
+          "panel",
+          "layout",
+          "scroll",
+          "sticky",
+          "footer",
+          "header",
+          "shell",
+          "app",
+          "sheet"
+        ],
+        "name": "UIFrame",
+        "related": [
+          "Card",
+          "Drawer",
+          "Modal",
+          "Col"
+        ],
+        "slots": {},
+        "states": [
+          {
+            "description": "Default, ready for interaction.",
+            "name": "idle"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "panel": [
+            "panel",
+            "frame",
+            "sheet"
+          ],
+          "scroll": [
+            "scroll",
+            "frame",
+            "body"
+          ],
+          "shell": [
+            "shell",
+            "frame",
+            "app"
+          ]
+        },
+        "tag": "frame-ui",
+        "tokens": {},
+        "traits": [],
+        "version": 1
+      }
+    },
     "GenRoot": {
       "title": "GenRoot",
       "description": "Composition shell for chat + canvas generative UI. Manages layout modes\n(chat-only / split / canvas-only) and delegates a unified API across\nchild chat-ui, canvas-ui, and inspector-ui elements.\n",

package/catalog-a2ui_0_9_rules.txt

@@ -281,6 +281,13 @@
 - Do NOT wrap children in <row-ui> just to align them — the `justify` prop already lays children out horizontally. A nested row-ui double-applies layout and breaks the chrome's gap tokens.
 - Prefer flat <button-ui> children. If you need non-button content (text summary, pagination indicator), keep it as a single flat child so `justify` resolves cleanly.
 
+## Frame
+- Use <frame-ui> for a scroll-body-with-pinned-footer panel — the <section> scrolls; <header> / <footer> stay fixed.
+- Regions are positioned by tag + DOM order (native <header> / <section> / <footer>) OR by a role slot: slot="header"/"footer" pins ANY element as a rail, slot="body" makes it the scroll region (e.g. <section slot="header"> is a pinned rail). The native tag is the 90% sugar; reach for the slot when the element you want differs from the region role.
+- Most panels need only <section> + <footer>; add <header> only when the panel has its own title or toolbar.
+- For a bordered/elevated surface use <card-ui>; for an overlay use <drawer-ui> / <modal-ui>; for routed page layout use <admin-page> / <page-ui>. frame-ui is the bare layout only.
+- frame-ui fills its parent — give the parent a definite height (a flex/grid chain to a viewport height) or the section will not scroll.
+
 ## Grid
 - For asymmetric column ratios, use [columns="N"] plus [span="M"] on the child that should be wider. Never set gridTemplateColumns via inline style in compositions — the component's responsive resolver sets it internally for @bp values; direct inline style bypasses that and reads as a local hack.
 - Canonical ratios: 1:1 → columns="2"; 2:1 → columns="3" + span="2"; 3:1 → columns="4" + span="3"; 3:2 → columns="5" + span="3"+"2"; 4:1 → columns="5" + span="4". Round unusual ratios (e.g. 7:5) to 3:2.
@@ -1095,6 +1102,11 @@ inside <grid-ui>; reach for the page composite only when search
 - All slots optional; common pattern is [slot="heading"] + [slot="action"] only. Empty admin-topbar renders zero-height (no visual chrome).
 - Sits at slot="header" of <admin-shell>, <admin-content>, or <admin-sidebar>; do not place inside <admin-page slot="header"> (use <admin-page-header> there).
 
+## AppShell
+- embed-shell takes exactly one [app] child + any number of [panel="<name>"] children. It owns layout, not content — the consumer supplies the surfaces.
+- Open a panel with an [opens="<name>"] trigger anywhere inside, or an `embed:open` event; dismiss with [close]. Do not toggle visibility manually — the shell reflects [panel] + sets [active] on the open panel.
+- Use clean attributes (ADR-0024) — [app], [panel], [opens], [close] — not the legacy data-* shapes.
+
 ## SimpleContent
 - simple-content is the article surface inside simple-shell. Use for primary page body. Sibling to <simple-hero> (optional).
 - CSS-only — do not import its JS module (there isn't one); does not need an `import` in shell HTML.