@adia-ai/a2ui-validator 0.5.3 → 0.5.4

package/CHANGELOG.md

@@ -7,6 +7,62 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 
 _No pending changes._
 
+## [0.5.4] - 2026-05-14
+
+### Added — §165 validator check #19 `componentsHaveRenderableContent` — the 3rd safety layer (v0.5.4)
+
+`packages/a2ui/validator/validator.js:516-616` — new validator check
+firing on every `updateComponents` message tree. Closes the
+"registered + valid + visually empty" gap diagnosed 2026-05-14:
+pre-§165 the validator had 18 checks but ZERO coverage of components
+that pass type registration + schema validation and still render
+blank rectangles because leaf interactive primitives carry no
+content-bearing props.
+
+**The 3-layer safety net**:
+
+  Layer 1 — Type registration (renderer.js:141 resolveTag → element upgrade)
+  Layer 2 — Schema validation (18 checks)
+  Layer 3 — Visual integrity (this check, NEW)
+
+Audits every component in the tree:
+
+  - **Interactive leaf types** (Button, Input/TextField/TextArea,
+    CheckBox/Check/Toggle/Switch/Radio, Select/ChoicePicker, Slider/
+    Range/Rating, Search/OtpInput/CalendarPicker/DateTimeInput/
+    ColorPicker/Upload) must have at least one of `label`, `placeholder`,
+    `text`, `aria-label`, `icon`, `textContent`, `value`, `alt`, `src`,
+    OR have non-empty `children[]`.
+  - **Text** must have `textContent` OR non-empty `children[]`.
+  - **Image** must have `src`.
+  - Container nodes (Card / Section / Header / Column / Row / etc.) are
+    not in scope — they pass on structural grounds.
+
+**Broader than existing `interactiveHasLabel` check (#12)**: #12's
+INTERACTIVE_TYPES set uses Check/Toggle but skips Input/CheckBox/Switch
+(the registry-aliased forms the harvester emits) — that's why
+auth-signin-card-password slipped through pre-§165. #19's set covers
+both alias forms + 19 total interactive types + accepts icon-only Buttons
+via `icon` OR `aria-label`.
+
+Score weight: 6 (between `noBareDivs:7` and `flatAdjacency:5`). Per-violation
+deduction. Doesn't flip overall validity unless 4+ leaf types are empty.
+
+### Added — `components-have-renderable-content.test.js` (+281 LOC, 20 tests, NEW)
+
+`packages/a2ui/validator/components-have-renderable-content.test.js`
+pins the §165 check across 8 describe groups:
+
+  - 19 standalone fixtures asserting check FAILS pre-content + PASSES
+    post-content for Input/CheckBox/Switch/Button/Text/Image
+  - Icon-only Button + aria-label-only Button pass
+  - Container nodes (Card/Column/Row/Section) untouched
+  - Full pre-§163 `auth-signin-card-password` tree FAILS with all 5
+    expected violations called out by id
+  - Post-§163 tree PASSES
+
+### Changed — `version`: `0.5.3` → `0.5.4`.
+
 ## [0.5.3] - 2026-05-14
 
 _No pending changes._

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/a2ui-validator",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "AdiaUI A2UI validator — JSON Schema structural validation plus catalog-aware semantic validation (component exists, props match YAML). Split out from the compose engine so non-compose tooling (tests, MCP validator tools, CI gates) can depend on validation without pulling the whole generator graph.",
   "type": "module",
   "main": "./index.js",

package/validator.js

@@ -31,6 +31,7 @@ const WEIGHTS = {
   gridVsColumn:         3,
   landmarkStructure:    3,
   intentAlignment:     13,
+  componentsHaveRenderableContent: 6,  // §165 (v0.5.4) — the 3rd safety layer
 };
 
 // Wiring check weights (scored separately, not affecting component score)
@@ -108,6 +109,7 @@ export function validateSchema(messages, options = {}) {
     checkTextContentSet(allComponents),
     checkIdUniqueness(allComponents),
     checkInteractiveHasLabel(allComponents),
+    checkComponentsHaveRenderableContent(allComponents),
     checkImagesHaveAlt(allComponents),
     checkHeadingHierarchy(allComponents),
     checkTabStructure(allComponents),
@@ -512,6 +514,108 @@ function checkInteractiveHasLabel(components) {
   };
 }
 
+/**
+ * §165 (v0.5.4): componentsHaveRenderableContent — the 3rd safety layer.
+ *
+ * Catches the bug class diagnosed 2026-05-14 (commit `964885e70` postmortem):
+ * components that ARE registered (Layer 1 passes) AND structurally valid
+ * (Layer 2 passes) AND still render as blank rectangles because they have
+ * NO content-bearing props.
+ *
+ * Bug-class examples that this check catches:
+ *   { id: "password", component: "Input" }                          ← no label/placeholder
+ *   { id: "remember", component: "CheckBox", name: "remember" }     ← no label
+ *   { id: "btn-magic", component: "Button" }                        ← no text/icon
+ *   { id: "title", component: "Text" }                              ← no textContent
+ *   { id: "logo", component: "Image" }                              ← no src
+ *
+ * Broader scope than `interactiveHasLabel` (check #12):
+ *   - covers Input/CheckBox/Switch (the registry-aliased forms missed by #12's
+ *     `Check/Toggle` set)
+ *   - accepts icon-only buttons (with `icon` OR `aria-label`)
+ *   - accepts container nodes with children (Card/Section/Header pass on
+ *     structural-not-leaf grounds; the check enforces content for LEAF
+ *     interactive types)
+ *
+ * Score semantics: per-violation deduction. Each empty interactive primitive
+ * subtracts 1/total from the score. 0 violations = 1.0; all-empty = 0.
+ */
+function checkComponentsHaveRenderableContent(components) {
+  // Interactive types: must have at least one content-bearing prop OR be
+  // non-leaf (has children that provide content).
+  const INTERACTIVE_LEAF_TYPES = new Set([
+    'Button', 'Input', 'TextField', 'TextArea',
+    'CheckBox', 'Check', 'Toggle', 'Switch', 'Radio',
+    'Select', 'ChoicePicker', 'Slider', 'Range', 'Rating',
+    'Search', 'OtpInput', 'CalendarPicker', 'DateTimeInput',
+    'ColorPicker', 'Upload',
+  ]);
+  // Content-bearing props that satisfy the "renderable" requirement.
+  const CONTENT_PROPS = ['label', 'placeholder', 'text', 'aria-label',
+                          'icon', 'textContent', 'value', 'alt', 'src'];
+
+  const hasContent = (comp) => {
+    for (const k of CONTENT_PROPS) {
+      const v = comp[k];
+      if (v !== undefined && v !== null && v !== '') return true;
+    }
+    // Non-leaf interactives (e.g. CalendarPicker with named children) pass
+    if (Array.isArray(comp.children) && comp.children.length > 0) return true;
+    return false;
+  };
+
+  const violations = [];
+  let interactiveCount = 0;
+  for (const comp of components) {
+    if (!INTERACTIVE_LEAF_TYPES.has(comp.component)) continue;
+    interactiveCount++;
+    if (!hasContent(comp)) {
+      violations.push(`"${comp.id}" (${comp.component})`);
+    }
+  }
+
+  // Also check Text components — empty Text is a degenerate case worth surfacing.
+  // Text-specific: needs textContent OR children (Text + nested Strong etc.)
+  let textCount = 0;
+  let emptyTextCount = 0;
+  for (const comp of components) {
+    if (comp.component !== 'Text') continue;
+    textCount++;
+    const t = comp.textContent;
+    if ((t === undefined || t === null || t === '') &&
+        !(Array.isArray(comp.children) && comp.children.length > 0)) {
+      emptyTextCount++;
+      violations.push(`"${comp.id}" (Text: empty)`);
+    }
+  }
+
+  // Also check Image — needs src (catalog-mandatory)
+  let imageCount = 0;
+  let imageNoSrc = 0;
+  for (const comp of components) {
+    if (comp.component !== 'Image') continue;
+    imageCount++;
+    if (!comp.src) {
+      imageNoSrc++;
+      violations.push(`"${comp.id}" (Image: no src)`);
+    }
+  }
+
+  const total = interactiveCount + textCount + imageCount;
+  const passed = violations.length === 0;
+  return {
+    name: 'componentsHaveRenderableContent',
+    passed,
+    score: total === 0
+      ? 1
+      : (passed ? 1 : Math.max(0, 1 - violations.length / total)),
+    detail: passed
+      ? (total === 0 ? 'No interactive/Text/Image components to validate'
+                     : 'All interactive/Text/Image components have renderable content')
+      : `Empty components (registered + valid but render blank): ${violations.join(', ')}`,
+  };
+}
+
 /**
  * 13. imagesHaveAlt — Image components should have an alt property.
  */