@adia-ai/web-components 0.8.37 → 0.8.38

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.38] — 2026-08-15
+
+### Added
+- **`drilldown-ui` — a new single-panel, multi-level drill-in menu primitive (gh#1285).** Replaces the hand-rolled miller-columns shape (two stacked list columns) that adiav2's Schema Manager had to build because the kit had no drill-down primitive — cleared the pre-build audit against `tree-ui` (inline expand/collapse, wrong for wide/deep >2-level data), `segmented-ui` (no overflow behavior for 18 namespaces), `tag-ui`-as-menu (no keyboard path), `list-ui`/`nav-ui`/`menu-ui`/`context-menu`/`breadcrumb-ui` (flat, not hierarchical drill-in) — none provide single-panel level-swap navigation with back/focus-restoration. Data-driven (`.items` tree of `{value, label, meta?, dot?, counts?, children?}` nodes; `children` may be sync or an async `(item) => array | Promise<array>` lazy loader, rendering a `<skeleton-ui>` loading level while pending). Full keyboard path (roving-tabindex listbox per level; ArrowRight/Enter drills in, ArrowLeft/Backspace goes back with focus restored to the item drilled from), `select` + `navigate` events, a `path` property that reflects to a JSON-encoded attribute both ways (hand-managed, not the generic `reflect:` mechanism — array values don't round-trip through `String(v)`) for deep-link/URL restore, `[filterable]` filter input, `[select-on-drill]` mode flag, a `breadcrumb` slot, row-native trailing count chips (not full `<badge-ui>`, which reads oversized at row density), and a horizontal slide transition that honors `prefers-reduced-motion: reduce` automatically (also suppressible via `[static]`).
+
+### Fixed
+- **`page-ui` header now ships the slot-gated grid its docs promised (gh#1253).** ADR-0009 recorded the named-slot vocabulary (`slot="icon"` / `slot="heading"` / `slot="action"`) as wired into four containers — Card, Drawer, Modal, and Page — but `page.css` never shipped its half; the slot attributes on a page header's children were dead metadata, so a block-level action child (e.g. `<toggle-scheme-ui>`) dropped to its own row instead of clustering. `page.css` gains the same `:has(> [slot])`-gated header grid as `card.css` (icon/heading/action columns, direct-child guard against nested false-positives), plus the `--page-header-gap` / `--page-heading-*` tokens `card-ui`'s pair already had. `page.yaml`'s `slots.default` and `page.examples.html` (new "Header slot-gated grid" demo) now describe the contract that's actually implemented.
+- **`nav-ui` / `nav-item-ui` — `nav-select` now fires exactly once per click, and zero times re-clicking the already-selected item (gh#1254).** Root cause: two layered click handlers both drove selection for the same physical click — `nav-item-ui`'s own click handler called `nav.select(this)` *and* dispatched its own `nav-select`, while `nav-ui`'s click-delegation listener matched the same item on bubble and called `select()` again — three dispatches per click. `nav.select()` is now the single source of the event (idempotent: a no-op, including no hover-flush, when the item is already selected); `nav-item-ui` no longer dispatches its own copy, and `nav-ui`'s click listener no longer delegates item selection (it now only handles group expand/popover).
+- **`view-transition` trait — no longer leaks unhandled `AbortError` rejections when a transition is superseded (gh#1255).** Only `transition.finished` had a `.catch()`; `ready` and `updateCallbackDone` are distinct promises that also reject (with `AbortError`) when a newer transition supersedes this one, and were previously uncaught. All three are now swallowed on abort — expected behavior for rapid navigation, not an error — with `fireEnd()` still driven solely by `finished`.
+
+### Maintenance
+- **`bin/` touched in this release window** (1 file(s), e.g. `bin/doc.mjs`) — carried by the entries above.
+- **`components/` touched in this release window** (18 file(s), e.g. `card/card.css`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`patterns/` touched in this release window** (1 file(s), e.g. `bulk-action-toolbar/bulk-action-toolbar.examples.html`) — carried by the entries above.
+- **`styles/` touched in this release window** (1 file(s), e.g. `styles/components.css`) — carried by the entries above.
+- **`traits/` touched in this release window** (2 file(s), e.g. `view-transition/view-transition.js`) — carried by the entries above.
+
 ## [0.8.37] — 2026-08-14
 
 ### Maintenance

package/MIGRATION.md

@@ -130,8 +130,8 @@ failed at load. If you were writing them, they were already broken.
 | `@adia-ai/a2ui-compose/<sub>` (`core`, `strategies/*`, `transpiler`, `evals`, `shared/*`; incl. deprecated `engine`/`engines/*` aliases) | `@adia-ai/gen-ui/compose/<sub>` (aliases NOT carried over — they were already deprecated one cycle) |
 | `@adia-ai/a2ui-retrieval` | `@adia-ai/gen-ui/retrieval` |
 | `@adia-ai/a2ui-retrieval/<sub>` (e.g. `domain-router`, `intent/*`, `embedding/*`, `feedback/*`, `authoring/*`) | `@adia-ai/gen-ui/retrieval/<sub>` (e.g. `@adia-ai/gen-ui/retrieval/domain-router`) |
-| `@adia-ai/a2ui-corpus` | `@adia-ai/gen-ui/corpus` |
-| `@adia-ai/a2ui-corpus/<sub>` (`chunks/*`, `chunk-library`, `chunk-embeddings`, `manifest`) | `@adia-ai/gen-ui/corpus/<sub>` |
+| `@adia-ai/a2ui-corpus` | **`@adia-ai/a2ui/catalog`** — this export WAS the catalog document, and the catalog moved protocol-side at ADR-0050 (gh#1243). `@adia-ai/gen-ui/corpus` no longer resolves as a root export |
+| `@adia-ai/a2ui-corpus/<sub>` (`chunks/*`, `chunk-library`, `chunk-embeddings`, `manifest`) | `@adia-ai/gen-ui/corpus/<sub>` (unchanged — corpus fuel stays in gen-ui) |
 | `@adia-ai/a2ui-mcp` (bin `adiaui-mcp`) | `@adia-ai/mcp` (bin `adia-mcp`, subcommand `gen-ui`) — retargeted gh#1240; the `@adia-ai/gen-ui-mcp` name this row originally named never published |
 | — (new) | `@adia-ai/mcp` (bin `adia-mcp`, subcommand `protocol`) — folded into the same package as the row above by gh#1240; the `@adia-ai/a2ui-protocol-mcp` name this row originally named never published |
 
@@ -194,7 +194,8 @@ sweep '@adia-ai/a2ui-validator'           '@adia-ai/a2ui/validate'
 sweep '@adia-ai/a2ui-compose/'  '@adia-ai/gen-ui/compose/'
 sweep '@adia-ai/a2ui-compose'   '@adia-ai/gen-ui'
 sweep '@adia-ai/a2ui-retrieval' '@adia-ai/gen-ui/retrieval'
-sweep '@adia-ai/a2ui-corpus'    '@adia-ai/gen-ui/corpus'
+sweep '@adia-ai/a2ui-corpus/'   '@adia-ai/gen-ui/corpus/'
+sweep '@adia-ai/a2ui-corpus'    '@adia-ai/a2ui/catalog'   # bare corpus import WAS the catalog (ADR-0050)
 
 # protocol
 sweep '@adia-ai/a2ui-runtime'   '@adia-ai/a2ui'
@@ -218,7 +219,7 @@ between a dependency and a peer:
   MCP, into one package, `@adia-ai/mcp`, before either ever published — the
   bin gained a subcommand accordingly). Tool names and their input/output
   shapes are **unchanged**; only the package that serves them is renamed. The
-  30-tool surface is documented at `packages/mcp/TOOLS.md` (the `gen-ui`
+  30-tool surface is documented at `packages/gen-ui/mcp/TOOLS.md` (the `gen-ui`
   section).
 
 ### After the sweep, check
@@ -1182,7 +1183,7 @@ git grep -nlz '<grid-ui[^>]*\bcols=' \
     done
 ```
 
-Then re-run `npm run harvest:chunks` if any of the touched pages live under `site/pages/` and are tagged with `data-chunk` (extracts to `packages/a2ui/corpus/chunks/`).
+Then re-run `npm run harvest:chunks` if any of the touched pages live under `site/pages/` and are tagged with `data-chunk` (extracts to `packages/gen-ui/a2ui/corpus/chunks/`).
 
 ---
 

package/README.md

@@ -3,7 +3,7 @@
 Vanilla web components + A2UI runtime for AdiaUI. **95 light-DOM custom
 elements** + **56 composable traits**, a reactive core (signals + tagged-template renderer), form-associated form controls, and integration into the A2UI generation pipeline.
 
-> This package ships UI atoms only. Composite shells (admin / chat / editor / simple / theme) live in [`@adia-ai/web-modules`](../web-modules). The generation pipeline lives in [`@adia-ai/a2ui-compose`](../gen-ui/compose); the pattern corpus in [`@adia-ai/a2ui-corpus`](../gen-ui/corpus); the MCP server in [`@adia-ai/mcp`](../mcp) (its `gen-ui` surface).
+> This package ships UI atoms only. Composite shells (admin / chat / editor / simple / theme) live in [`@adia-ai/web-modules`](../web-modules). The generation pipeline lives in [`@adia-ai/a2ui-compose`](../gen-ui/engine/compose); the pattern corpus in [`@adia-ai/a2ui-corpus`](../gen-ui/engine/corpus); the MCP server in [`@adia-ai/mcp`](../gen-ui/mcp) (its `gen-ui` surface).
 >
 > **Consumer guide:** [`USAGE.md`](./USAGE.md) — property reactivity, event contract, form participation, lifecycle, registration, TypeScript. Start here if you're integrating AdiaUI into an app.
 >
@@ -125,7 +125,7 @@ web-components/
 │                           All actual A2UI runtime code (renderer,
 │                           registry, streams, surface manifest,
 │                           wiring, dockables, controllers) lives in
-│                           `@adia-ai/a2ui` at packages/a2ui/.
+│                           `@adia-ai/a2ui` at packages/gen-ui/a2ui/.
 │
 └── styles/         — Global tokens and CSS layering
     ├── tokens.css              all --a-* design tokens
@@ -329,7 +329,7 @@ attribute table + live demos:
 npm run build:components    # regenerate all .a2ui.json from YAML
 ```
 
-The build also writes `packages/gen-ui/corpus/catalog-a2ui_0_9.json` and
+The build also writes `packages/gen-ui/engine/corpus/catalog-a2ui_0_9.json` and
 `catalog-a2ui_0_9_rules.txt` — the flat-file catalog the MCP server and
 generation engine consume.
 

package/bin/doc.mjs

@@ -45,6 +45,32 @@ const DEMO_BASE = 'https://ui-kit.exe.xyz/site/components';
  * Defensive: any parse error returns a partial object plus an `_errors`
  * array — the caller decides how to surface failures.
  */
+/**
+ * Strips a trailing YAML comment from a single raw line. A `#` only
+ * starts a comment when it's at column 0 or preceded by whitespace (the
+ * YAML plain-scalar rule) — a bare mid-word `#` (e.g. `gh#1253` inside a
+ * folded description block) is content, not a comment marker. Quote
+ * state is tracked (paired ' / ") so a `#` inside an actual quoted
+ * string is never treated as a comment start either.
+ *
+ * Fixes a truncation bug (CodeRabbit, PR #1284): the previous regex
+ * (`/^([^#"']*)(#.*)?$/`) cut ANY line at its first bare `#` regardless
+ * of context, silently truncating descriptions containing `gh#NNNN`.
+ */
+function stripYamlComment(line) {
+  let inSingle = false;
+  let inDouble = false;
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    if (ch === "'" && !inDouble) inSingle = !inSingle;
+    else if (ch === '"' && !inSingle) inDouble = !inDouble;
+    else if (ch === '#' && !inSingle && !inDouble && (i === 0 || /\s/.test(line[i - 1]))) {
+      return line.slice(0, i).replace(/\s+$/, '');
+    }
+  }
+  return line.replace(/\s+$/, '');
+}
+
 function parseYaml(source) {
   const out = {
     name: '',
@@ -59,11 +85,7 @@ function parseYaml(source) {
 
   // Strip comments + trailing whitespace, keep blank lines for block detection
   const rawLines = source.split(/\r?\n/);
-  const lines = rawLines.map((l) => {
-    // strip line comments unless inside a quoted string (rough heuristic)
-    const m = l.match(/^([^#"']*)(#.*)?$/);
-    return m ? m[1].replace(/\s+$/, '') : l;
-  });
+  const lines = rawLines.map(stripYamlComment);
 
   /** Find the line range of a top-level key block (indent === 0). */
   function blockRange(key) {

package/components/card/card.css

@@ -264,7 +264,7 @@
   /* Heading — row 1.
      Matches native h1-h6 AND the text-ui variants the A2UI transpiler emits
      for them (display|title|heading|subsection — see HTML_TAG_MAP in
-     packages/a2ui/compose/transpiler/transpiler-maps.js).
+     packages/gen-ui/a2ui/compose/transpiler/transpiler-maps.js).
      The text-ui variants are matched only when UNSLOTTED so an explicit
      `slot="heading"` / `slot="description"` / `slot="action"` always wins. */
   & > header > :is([slot="heading"], h1, h2, h3, h4, h5, h6),

package/components/drilldown/drilldown.a2ui.json

@@ -0,0 +1,242 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Drilldown.json",
+  "title": "Drilldown",
+  "description": "Single-panel, multi-level drill-in menu. One list panel slides between\nlevels (a level header with back navigation replaces stacking a column\nper level) — for hierarchical data where miller columns don't fit the\nviewport (>2 levels, >12 top-level entries, or narrow layouts). Rows\ncompose a leading dot/icon, primary label, optional meta line, and\ntrailing row-native count chips (not full <badge-ui>, which reads\noversized at row density) — plus a drill-in chevron on branch items.\nSet `.items` to a tree of `{value, label, meta?, dot?, counts?, children?}`\nnodes; `children` may be an array (sync) or a function returning an\narray/Promise (lazy, fetched on drill-in — a loading level is shown via\n<skeleton-ui> while it resolves). Distinct from <tree-ui> (inline\nexpand/collapse — right for file-tree shapes, wrong for wide/deep data\nwhere the expanded tree becomes a wall of rows), <nav-ui> (flat app\nnavigation, not hierarchical drill-in), and <context-menu> (transient\npopover submenus, not a persistent content panel).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "items": {
+      "description": "Root-level array of node objects: {value, label, meta?, dot?, counts?, children?, leaf?}. `value` is the stable id used in `path` and event details. `dot` names a semantic tone (info, success, warning, danger, primary, neutral) rendered as a small leading color swatch. `counts` is an array of {variant?, value} rendered as compact trailing chips. `children` is either an array of child nodes (resolved synchronously) or a function `(item) => array | Promise<array>` for lazy per-level fetch — a loading level renders while the promise is pending. `leaf: true` forces no drill chevron even when `children` is present (rare — normally omit `children` instead).",
+      "$ref": "common_types.json#/$defs/DynamicObjectList"
+    },
+    "component": {
+      "const": "Drilldown"
+    },
+    "filterable": {
+      "description": "Show a filter input pinned above the list, filtering the current level's rows by label/meta.",
+      "type": "boolean",
+      "default": false
+    },
+    "path": {
+      "description": "Current drilled-in level, as an array of ancestor item `value`s (root = `[]`). Setting `.path` restores directly to that nested level without animating through every intermediate level — the deep-link/URL-restore path. Hand-managed (not the generic `reflect:` mechanism, which can't JSON-encode arrays) — it still genuinely reflects to a JSON-encoded `path` attribute both ways (property → attribute and attribute → property), unlike most array props on this kit.",
+      "$ref": "common_types.json#/$defs/DynamicStringList"
+    },
+    "placeholder": {
+      "description": "Placeholder text for the filter input (only rendered when `[filterable]`).",
+      "type": "string",
+      "default": "Filter…"
+    },
+    "rootLabel": {
+      "description": "Level-header title shown at the root level (depth 0). Empty by default (no title row).",
+      "type": "string",
+      "default": ""
+    },
+    "selectOnDrill": {
+      "description": "When true, clicking/activating a branch item (one with children) BOTH fires `select` and drills into it — the Schema Manager shape, where picking a namespace is both a selection and a navigation. Default false: branch activation only drills in; only leaf activation fires `select`.",
+      "type": "boolean",
+      "default": false
+    },
+    "static": {
+      "description": "Suppress the horizontal slide transition between levels — instant swap. Also honored automatically under `prefers-reduced-motion: reduce`.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "composes": [
+      "icon-ui",
+      "skeleton-ui",
+      "empty-state-ui"
+    ],
+    "events": {
+      "navigate": {
+        "description": "Fired whenever the shown level changes — drill-in, back, breadcrumb jump, or a programmatic `.path` assignment. detail: { path }. Hosts mirror this to the URL instead of listening to `select`.\n",
+        "detail": {
+          "path": {
+            "description": "The newly-shown level's ancestor value chain.",
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "select": {
+        "description": "Fired when a leaf item is activated (click/Enter), or when a branch item is activated with `[select-on-drill]` set. detail: { path, item }. `path` is the drilled-in level the item lives at (the current `.path` at the time of activation); `item` is the raw node object.\n",
+        "detail": {
+          "item": {
+            "description": "The activated node object.",
+            "type": "object"
+          },
+          "path": {
+            "description": "Ancestor value chain the selected item lives at.",
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Drilldown usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Drilldown\"\n  }\n]",
+        "name": "basic-drilldown"
+      }
+    ],
+    "keywords": [
+      "drilldown",
+      "drill-down",
+      "miller",
+      "miller-columns",
+      "namespace",
+      "hierarchy",
+      "navigator",
+      "catalog-browser"
+    ],
+    "name": "UIDrilldown",
+    "related": [
+      "Tree",
+      "List",
+      "Nav",
+      "Breadcrumb",
+      "Menu"
+    ],
+    "slots": {
+      "title": {
+        "description": "Auto-stamped title cluster (current-level label + item count) inside the header."
+      },
+      "back": {
+        "description": "Auto-stamped back-affordance <button> (chevron + parent-level label). Hidden at the root level."
+      },
+      "breadcrumb": {
+        "description": "Optional slot for a consumer-supplied <breadcrumb-ui> in the level header, for deep hierarchies. Not managed by drilldown-ui — the consumer wires jump clicks to `.path = [...]` itself."
+      },
+      "counts": {
+        "description": "Auto-stamped per-row trailing count-chip cluster, rendered when the row's data item declares `counts`."
+      },
+      "dot": {
+        "description": "Auto-stamped per-row leading color swatch, rendered when the row's data item declares a `dot` tone."
+      },
+      "filter": {
+        "description": "Auto-stamped filter-input row, shown only when `[filterable]` is set."
+      },
+      "header": {
+        "description": "Auto-stamped level-header container (back affordance + breadcrumb + title/count). Structural — not consumer-overridable."
+      },
+      "main": {
+        "description": "Auto-stamped per-row content column (label + optional meta line)."
+      },
+      "meta": {
+        "description": "Auto-stamped per-row secondary meta line, rendered when the row's data item declares `meta`."
+      },
+      "viewport": {
+        "description": "Auto-stamped clipping container for the current level's panel (hosts the slide-transition overflow clip)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "A lazy level's children are being resolved (async `children` function pending).",
+        "name": "loading"
+      },
+      {
+        "description": "The current level has no items.",
+        "name": "empty"
+      }
+    ],
+    "status": "beta",
+    "synonyms": {
+      "hierarchy": [
+        "tree",
+        "nav",
+        "drilldown"
+      ],
+      "miller": [
+        "drilldown",
+        "tree",
+        "column"
+      ],
+      "navigator": [
+        "tree",
+        "nav",
+        "drilldown",
+        "sidebar"
+      ]
+    },
+    "tag": "drilldown-ui",
+    "tokens": {
+      "--drilldown-bg-active": {
+        "description": "Row background when focused/active (roving tabindex)."
+      },
+      "--drilldown-bg-hover": {
+        "description": "Row background on hover."
+      },
+      "--drilldown-count-chip-font-size": {
+        "description": "Font size of a trailing count chip."
+      },
+      "--drilldown-count-chip-px": {
+        "description": "Inline padding of a trailing count chip."
+      },
+      "--drilldown-count-chip-radius": {
+        "description": "Border radius of a trailing count chip."
+      },
+      "--drilldown-dot-size": {
+        "description": "Diameter of the leading color dot."
+      },
+      "--drilldown-duration": {
+        "description": "Slide-transition duration."
+      },
+      "--drilldown-easing": {
+        "description": "Slide-transition easing function."
+      },
+      "--drilldown-fg": {
+        "description": "Primary row text color."
+      },
+      "--drilldown-fg-muted": {
+        "description": "Muted text color (meta line, chevron, back affordance)."
+      },
+      "--drilldown-focus-ring": {
+        "description": "Focus ring box-shadow for rows and the back button."
+      },
+      "--drilldown-header-px": {
+        "description": "Inline padding of the level header."
+      },
+      "--drilldown-header-py": {
+        "description": "Block padding of the level header."
+      },
+      "--drilldown-row-gap": {
+        "description": "Gap between row elements (dot / main / counts / chevron)."
+      },
+      "--drilldown-row-height": {
+        "description": "Height of each row."
+      },
+      "--drilldown-row-px": {
+        "description": "Inline padding of each row."
+      },
+      "--drilldown-row-radius": {
+        "description": "Border radius of each row."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}