@adia-ai/a2ui-compose 0.6.42 → 0.6.44

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog — @adia-ai/a2ui-compose
 
+## [0.6.44] — 2026-05-28
+
+### Fixed — transpiler emits `<select-ui>` options as a prop, not Text children (FEEDBACK-79)
+
+- **`transpiler/transpiler-maps.js` + `transpiler/transpiler.js`** — `<select-ui>` / `<select>` (A2UI `ChoicePicker`) had no `<option>` handling: each `<option>` fell through the generic text-leaf path and became a `Text` child of the picker. Since `ChoicePicker` → `select-ui`, the renderer appended those as `<p>` / `<text-ui>` children, which `select-ui` rejects (`ignoring unrecognized child element` warning + empty options). `extractProps()` now builds the `options` model — `[{value, label, disabled?}]`, grouped `{label, options:[…]}` for `<optgroup>` — and mirrors `<option selected>` into `value` (comma-joined for `[multiple]`); `walkNode()` treats `ChoicePicker` as self-contained so options are never re-emitted as children. Matches `select.yaml`'s `options` contract. Affects every `<select-ui>`-bearing chunk, not just the 3 in the ticket. Re-harvest required (see `@adia-ai/a2ui-corpus`).
+
+## [0.6.43] — 2026-05-27
+
+### Fixed — Cycle-18 transpiler substrate sweeps (RL + RL2)
+
+- **`transpiler/transpiler.js`** — two substrate sweeps from gen-review cycle-18:
+  - **Ralph Loop**: 6 visual bugs fixed at SoT — header slot grammar, leaf children, button slot preservation.
+  - **RL2**: 10 visual bugs across header slot, leaf children, calendar widget.
+- **`transpiler/transpiler-maps.js`** — preserve `slot=` annotations through transpilation so card-ui transpiled `text-ui` chunks match the substrate CSS selector.
+
 ## [0.6.42] — 2026-05-26
 
 ### Maintenance

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/a2ui-compose",
-  "version": "0.6.42",
+  "version": "0.6.44",
   "description": "AdiaUI A2UI compose engine \u2014 framework-agnostic. Takes natural-language intents + a catalog and produces A2UI protocol messages. Pairs with `@adia-ai/a2ui-retrieval` (intent classification, catalog lookup) and `@adia-ai/a2ui-validator` (schema + semantic checks).",
   "type": "module",
   "exports": {

package/transpiler/transpiler-maps.js

@@ -310,6 +310,13 @@ export function extractProps(el, a2uiType) {
   const props = {};
   const attr = (name) => el.getAttribute?.(name) ?? el.attributes?.get?.(name) ?? null;
 
+  // Universal: preserve [slot] for every element. Slot is a layout-bearing
+  // HTML attribute that card-ui / drawer-ui / etc. depend on via :has(> [slot])
+  // grid activation. Yamls don't declare slot as a prop (it's an HTML standard
+  // attribute, not a component prop), so the catalog pass below won't pick it up.
+  const slotAttr = attr('slot');
+  if (slotAttr) props.slot = slotAttr;
+
   // §163 (v0.5.4) — Catalog-driven generic extraction FIRST. Fills in
   // every prop the v0.9 catalog declares for this type (label, icon,
   // variant=, etc.). Legacy per-type blocks below run AFTER and can
@@ -428,6 +435,25 @@ export function extractProps(el, a2uiType) {
     if (ariaLabel) props.label = ariaLabel;
   }
 
+  // ── ChoicePicker / Select — build the options[] model from declarative
+  //    <option> / <optgroup> children (FB-79). <select-ui> renders natively
+  //    from `el.options = [{value, label, disabled?}]` (select.yaml `options`),
+  //    so the options must travel as a PROP. Without this, the tree walker
+  //    emits each <option> as a Text child, which <select-ui> rejects
+  //    (renders empty + "ignoring unrecognized child element" warning).
+  if (a2uiType === 'ChoicePicker') {
+    const options = extractSelectOptions(el);
+    if (options.length) {
+      props.options = options;
+      // Mirror <option selected> into the select value when not set via attr,
+      // matching select-ui #parseOptions (single value, comma-joined for [multiple]).
+      if (props.value === undefined || props.value === '') {
+        const selected = collectSelectedOptionValues(el);
+        if (selected.length) props.value = selected.join(',');
+      }
+    }
+  }
+
   // ── Data attributes pass-through ──
   if (el.attributes) {
     const attrs = el.attributes instanceof Map ? el.attributes : el.attributes;
@@ -445,6 +471,69 @@ export function extractProps(el, a2uiType) {
   return props;
 }
 
+// ── Select option model (FB-79) ──────────────────────────────────────────
+
+/**
+ * Build the <select-ui> options[] model from an element's declarative
+ * <option> / <optgroup> children. Mirrors select-ui #parseOptions:
+ *   <option value disabled>Label</option> → { value, label, disabled? }
+ *   <optgroup label>…</optgroup>           → { label, options: [...] }
+ *
+ * @param {object} el — DOM element or MinimalElement
+ * @returns {Array<object>}
+ */
+function extractSelectOptions(el) {
+  const out = [];
+  for (const child of (el.children || [])) {
+    const ctag = (child.tagName || '').toLowerCase();
+    if (ctag === 'option') {
+      out.push(optionToModel(child));
+    } else if (ctag === 'optgroup') {
+      const label = optionAttr(child, 'label') || '';
+      const groupOptions = [];
+      for (const opt of (child.children || [])) {
+        if ((opt.tagName || '').toLowerCase() === 'option') groupOptions.push(optionToModel(opt));
+      }
+      out.push({ label, options: groupOptions });
+    }
+  }
+  return out;
+}
+
+/** @returns {{value: string, label: string, disabled?: boolean}} */
+function optionToModel(opt) {
+  const value = optionAttr(opt, 'value');
+  const label = (opt.textContent || '').trim().replace(/\s+/g, ' ');
+  const model = { value: value != null ? value : label, label };
+  if (optionAttr(opt, 'disabled') !== null) model.disabled = true;
+  return model;
+}
+
+/** Collect values of <option selected> children (recursing <optgroup>). */
+function collectSelectedOptionValues(el) {
+  const values = [];
+  const walk = (nodes) => {
+    for (const child of (nodes || [])) {
+      const ctag = (child.tagName || '').toLowerCase();
+      if (ctag === 'option') {
+        if (optionAttr(child, 'selected') !== null) {
+          const v = optionAttr(child, 'value');
+          values.push(v != null ? v : (child.textContent || '').trim().replace(/\s+/g, ' '));
+        }
+      } else if (ctag === 'optgroup') {
+        walk(child.children);
+      }
+    }
+  };
+  walk(el.children);
+  return values;
+}
+
+/** Read an attribute from either a DOM element or a MinimalElement. */
+function optionAttr(el, name) {
+  return el.getAttribute?.(name) ?? el.attributes?.get?.(name) ?? null;
+}
+
 // ── Gap Inference ────────────────────────────────────────────────────────
 
 /**

package/transpiler/transpiler.js

@@ -192,6 +192,15 @@ function walkNode(el, context) {
 
   // ── Handle children ──
 
+  // ChoicePicker / Select carry their <option>/<optgroup> children as an
+  // `options` prop (built in extractProps), not as child components. Recursing
+  // the <option>s would emit Text nodes that <select-ui> rejects — renders empty
+  // + "ignoring unrecognized child" warning (FB-79). Treat as a self-contained leaf.
+  if (a2uiType === 'ChoicePicker') {
+    context.components.push({ id, component: a2uiType, ...props });
+    return id;
+  }
+
   // Leaf types: these render their own text, don't recurse into children
   const LEAF_TYPES = new Set([
     'Text', 'Button', 'Kbd', 'Code', 'Badge', 'Image', 'Divider',
@@ -200,7 +209,54 @@ function walkNode(el, context) {
   ]);
 
   if (LEAF_TYPES.has(a2uiType)) {
-    context.components.push({ id, component: a2uiType, ...props });
+    // Leaf types still need to carry slotted or container children in two
+    // shapes:
+    //
+    // (1) Trailing icons / kbd shortcuts inside Button:
+    //     `<button-ui text="Next"><icon-ui slot="trailing" name="caret-right">`
+    // (2) Slotted container wrappers that themselves transpile to a leaf
+    //     type but hold inline child elements:
+    //     `<span slot="heading"><text-ui strong>Title</text-ui> <badge-ui>...`
+    //     The span maps to Text via HTML_TAG_MAP, but it functions as a
+    //     flex container (per card.css `> [slot="heading"]`) and needs
+    //     to keep its children.
+    //
+    // Rule: if the element has ANY element children, recurse all of them.
+    // Pure text leaves (no element children) keep the text-prop path.
+    const elementChildren = (el.children || []).filter(c => c.tagName);
+    if (elementChildren.length === 0) {
+      context.components.push({ id, component: a2uiType, ...props });
+      return id;
+    }
+    // When a leaf has element children, the auto-extracted textContent prop
+    // would be the CONCATENATED descendant text (e.g.
+    //   <text-ui>$49<text-ui>/month</text-ui></text-ui>
+    // has textContent "$49/month"), causing every label to render twice
+    // alongside the child components. Replace it with the element's DIRECT
+    // text nodes only — text the element OWNS, not what its children own.
+    // The minimal HTML parser represents text nodes as pseudo-elements
+    // with tagName === '' inside the children array.
+    const directText = (el.children || [])
+      .filter(n => !n.tagName)
+      .map(n => n.textContent || '')
+      .join(' ').replace(/\s+/g, ' ').trim();
+    const containerProps = { ...props };
+    if (directText) {
+      // Preserve the direct text on whichever prop the type uses
+      if (a2uiType === 'Text' || a2uiType === 'Kbd' || a2uiType === 'Code') containerProps.textContent = directText;
+      else if (a2uiType === 'Button' || a2uiType === 'Badge') {
+        if (containerProps.text === undefined) containerProps.text = directText;
+      }
+    } else {
+      delete containerProps.textContent;
+      delete containerProps.text;
+    }
+    const childIds = [];
+    for (const child of elementChildren) {
+      const childId = walkNode(child, context);
+      if (childId) childIds.push(childId);
+    }
+    context.components.push({ id, component: a2uiType, ...containerProps, children: childIds });
     return id;
   }