@adia-ai/a2ui-corpus 0.7.10 → 0.7.12

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @adia-ai/a2ui-corpus
 
+## [0.7.12] — 2026-06-04
+
+### Changed
+- **Corpus re-harvested** — `chunks/` (284 files) + `chunk-embeddings.json` (284 × 1536d) regenerated. One content change (`settings-admin-page`: a `[data-theme]` → `[theme]` reference inside an annotated-HTML comment, from the repo-wide token-attribute rename — see `@adia-ai/web-components`); the rest is a `captured_at`-only refresh.
+
+## [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

package/catalog-a2ui_0_9.json

@@ -10850,7 +10850,7 @@
     },
     "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). All three regions are OPTIONAL and positioned\nby tag + DOM order (Light DOM, no slot projection — ADR-0033), so the\ncommon shape is just <section> + <footer>. Use for tab / 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",
+      "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": [
         {
@@ -24754,7 +24754,7 @@
     },
     "ThemePanel": {
       "title": "ThemePanel",
-      "description": "Module-tier appearance-preferences control surface. Owns the three knobs\nof the AdiaUI theming contract: [data-theme=<slug>] named themes,\n--a-density / --a-radius-k parametric overrides, and color-scheme\nlight/dark switching, plus optional localStorage persistence behind a\nsmall attribute API.\n\nDrops into any consumer's <popover-ui slot=\"content\"> (the canonical\ncomposition) or directly into a sidebar section. Eight named themes\nship by default; section visibility flips on/off via boolean attributes\n([parametric], [presets], [scheme-toggle]).\n\nPromoted from the duplicated <div id=\"theme-panel\"> block in site/ and\nplaygrounds/admin-shell/ — see docs/specs/theme-panel-module.md.\n",
+      "description": "Module-tier appearance-preferences control surface. Owns the three knobs\nof the AdiaUI theming contract: [theme=<slug>] named themes,\n--a-density / --a-radius-k parametric overrides, and color-scheme\nlight/dark switching, plus optional localStorage persistence behind a\nsmall attribute API.\n\nDrops into any consumer's <popover-ui slot=\"content\"> (the canonical\ncomposition) or directly into a sidebar section. Eight named themes\nship by default; section visibility flips on/off via boolean attributes\n([parametric], [presets], [scheme-toggle]).\n\nPromoted from the duplicated <div id=\"theme-panel\"> block in site/ and\nplaygrounds/admin-shell/ — see docs/specs/theme-panel-module.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -24804,7 +24804,7 @@
           "default": false
         },
         "presets": {
-          "description": "Renders the compact / reset / spacious preset row. Each preset\napplies a (density, radius) pair; \"default\" also clears the\n[data-theme] attribute.\n",
+          "description": "Renders the compact / reset / spacious preset row. Each preset\napplies a (density, radius) pair; \"default\" also clears the\n[theme] attribute.\n",
           "type": "boolean",
           "default": false
         },
@@ -24834,12 +24834,12 @@
           "default": "adia-theme-"
         },
         "target": {
-          "description": "CSS selector for the element that receives [data-theme] and\n--a-density / --a-radius-k writes. Defaults to :root (the\n<html> element). Scoped targets are useful for preview-pane\ndemos.\n",
+          "description": "CSS selector for the element that receives [theme] and\n--a-density / --a-radius-k writes. Defaults to :root (the\n<html> element). Scoped targets are useful for preview-pane\ndemos.\n",
           "type": "string",
           "default": ":root"
         },
         "themes": {
-          "description": "Space-separated list of theme slugs to render as buttons. Author\nmay restrict ([themes=\"default ocean\"]) or extend. Tolerant —\nunknown slugs render a button; clicking applies [data-theme=slug]\nregardless of whether themes.css has a matching block.\n",
+          "description": "Space-separated list of theme slugs to render as buttons. Author\nmay restrict ([themes=\"default ocean\"]) or extend. Tolerant —\nunknown slugs render a button; clicking applies [theme=slug]\nregardless of whether themes.css has a matching block.\n",
           "type": "string",
           "default": "default ocean forest sunset lavender rose slate midnight"
         }
@@ -24943,6 +24943,92 @@
         "version": 1
       }
     },
+    "ThemeProvider": {
+      "title": "ThemeProvider",
+      "description": "Foundation-providing wrapper — adopts the AdiaUI foundation (design tokens +\nresets + page-frame + every primitive's CSS) into the document from anywhere\nin the DOM, so a surface renders fully-styled WITHOUT a hand-wired\n<link rel=\"stylesheet\"> in <head>. Layout-transparent (display: contents): the\nelement owns no box; children lay out as if it weren't there.\n\nMechanism: it imports the constructable-stylesheet twin of web-components.min.css\n(byte-identical to the CDN bundle, emitted from the same build buffer) and\nadopts it once into document.adoptedStyleSheets, deduped — adoption fires at\nmodule load, before paint. Coexists with the render-blocking <link> path; both\ndeliver the same bytes. Use a <link> (-> the CDN web-components.min.css) for\nmulti-page / top-level surfaces (cacheable across navigations, zero flash); use\n<theme-provider> for SPA roots, embedded apps, and dynamic mounts where you do\nnot control <head> (e.g. <embed-shell>, an A2UI surface, a micro-frontend).\n\nTheming: the base foundation is OS light/dark via light-dark() tokens. Two opt-in\nattributes adopt their layer on demand — theme=\"ocean|forest|slate|…\" applies a\nnamed preset (adopts the themes layer; matches the [theme] hook) and\nscale=\"verse|prose\" sets the compact / long-form typographic register (adopts the\nmatching register layer; maps onto the [verse]/[prose] attribute). Each layer is\nfetched only when its attribute is set, so a bare provider stays lean.\nOpt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries\nthe whole foundation); import @adia-ai/web-components/components/theme-provider\nexplicitly. Distinct from <frame-ui> (a layout skeleton, owns no CSS delivery)\nand the page shells (chrome over the same foundation).\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "theme": {
+          "description": "Named theme preset for the wrapped subtree (default, ocean, forest, sunset, lavender, rose, slate, midnight). Adopts the themes layer on demand + matches the [theme=\"…\"] hook.",
+          "type": "string",
+          "default": ""
+        },
+        "component": {
+          "const": "ThemeProvider"
+        },
+        "scale": {
+          "description": "Typographic / density register for the subtree — \"verse\" (compact) or \"prose\" (long-form). Adopts the matching register layer on demand; maps onto the [verse]/[prose] attribute (additive).",
+          "type": "string",
+          "default": ""
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [],
+        "category": "layout",
+        "composes": [],
+        "events": {},
+        "examples": [
+          {
+            "description": "A client-mounted app root that self-provides the foundation (no head link).",
+            "a2ui": "[\n  { \"id\": \"root\", \"component\": \"ThemeProvider\", \"children\": [\"panel\"] },\n  { \"id\": \"panel\", \"component\": \"Frame\", \"children\": [\"body\", \"actions\"] },\n  { \"id\": \"body\", \"component\": \"Section\", \"children\": [\"copy\"] },\n  { \"id\": \"copy\", \"component\": \"Text\", \"variant\": \"body\", \"textContent\": \"Fully styled — no <head> stylesheet link.\" },\n  { \"id\": \"actions\", \"component\": \"Footer\", \"children\": [\"go\"] },\n  { \"id\": \"go\", \"component\": \"Button\", \"text\": \"Continue\", \"variant\": \"primary\" }\n]",
+            "name": "spa-root"
+          }
+        ],
+        "keywords": [
+          "style",
+          "provider",
+          "foundation",
+          "tokens",
+          "reset",
+          "adopt",
+          "stylesheet",
+          "shell",
+          "embed",
+          "spa"
+        ],
+        "name": "UIThemeProvider",
+        "related": [
+          "Frame",
+          "Card"
+        ],
+        "slots": {},
+        "states": [
+          {
+            "description": "Default — foundation adopted into the document; children rendered.",
+            "name": "idle"
+          }
+        ],
+        "status": "experimental",
+        "synonyms": {
+          "foundation": [
+            "foundation",
+            "tokens",
+            "styles"
+          ],
+          "provider": [
+            "provider",
+            "root",
+            "host"
+          ]
+        },
+        "tag": "theme-provider",
+        "tokens": {},
+        "traits": [],
+        "version": 1
+      }
+    },
     "Timeline": {
       "title": "Timeline",
       "description": "Timeline and step wizard. Two modes: timeline (per-item state) and steps (parent-driven).",

package/catalog-a2ui_0_9_rules.txt

@@ -283,7 +283,7 @@
 
 ## Frame
 - Use <frame-ui> for a scroll-body-with-pinned-footer panel — the <section> scrolls; <header> / <footer> stay fixed.
-- Regions are native <header> / <section> / <footer> children, positioned by tag + DOM order. Do NOT add slot= attributes — slot is inert in Light DOM.
+- 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.
@@ -707,6 +707,11 @@
 - Use [rows] to set initial height (default 3) and [resize] (vertical | horizontal | both | none; default vertical) to control user resize. Never substitute a native <textarea> just to get rows / resize.
 - Enter (without Shift) dispatches a bubbling `submit` event; Shift+Enter inserts a newline. This is unconditional — there is no opt-in/opt-out attribute. For chat composer surfaces wrap inside <chat-composer> + <chat-input-ui> (which adds the send button + model picker + paste-to-attach plumbing on top of the same Enter→submit semantics).
 
+## ThemeProvider
+- Wrap a client-mounted surface root (SPA shell, embedded app, dynamic mount) in <theme-provider> so it self-provides the AdiaUI foundation — no <head> stylesheet link required.
+- For multi-page / top-level pages, prefer a render-blocking <link rel="stylesheet" href=".../web-components.min.css"> in <head> instead — cacheable across navigations, styled on the first frame. <theme-provider> and the link deliver byte-identical CSS, so they coexist.
+- Theme the wrapped subtree with theme="ocean" (a named preset) and/or scale="verse|prose" (compact / long-form register) — the provider adopts the matching opt-in layer on demand. The base foundation is OS light/dark automatically. Keep <theme-provider> at/near the mount root — display:contents means an ancestor "> " child selector will not reach its children.
+
 ## TimePicker
 - `<time-picker-ui>` is the canonical standalone time-of-day picker. Per ADR-0025 NEVER wrap a native `<input type="time">` — segments are contenteditable spans + ElementInternals provides form participation.
 - `value` MUST be ISO 8601 time `HH:mm` or `HH:mm:ss` (24-hour), or empty string. Localized formats (e.g. "9:30 AM") are not accepted; display formatting is derived from `hour-cycle` regardless of how the value is stored.