@adia-ai/a2ui-compose 0.6.43 → 0.6.44

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/a2ui-compose",
-  "version": "0.6.43",
+  "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

@@ -435,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;
@@ -452,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',