@adia-ai/web-components 0.7.27 → 0.7.28

package/CHANGELOG.md

@@ -1,4 +1,22 @@
 # Changelog — @adia-ai/web-components
+## [0.7.28] — 2026-07-14
+
+### Added
+- **`table-ui` (`components/table/cell-types.js`) — `markdown` cell type: inline `` `code` ``/**bold**/*italic*/`[link](href)` rendered as real elements, not a plain string.** TKT-0008 (site-a2ui re-verification, direction 1): docs reference tables (props/API tables) mix prose with multiple inline `<code>` spans per cell — content the `{columns, data}` JSON contract previously couldn't carry, forcing a preserved-HTML fallback that dropped the table from the A2UI graph entirely. Renders via `core/markdown.js`'s `inline()` (now exported) — the exact encode/decode pairing the docs-transpiler's own `convertInline()` already produces elsewhere in the pipeline. `[title]` carries the tag-stripped plain text for the truncation tooltip. New unit suite in `table.test.js` (3 cases).
+
+### Changed
+- **`core/markdown.js` — `inline()` is now exported.** Was module-private; reused by `cell-types.js`'s new `markdown` cell type as the client-side half of the docs-transpiler's `convertInline()` contract. No behavior change to existing callers.
+
+### Fixed — TKT-0010, corpus admission-validation content gaps
+- **`kbd.yaml` — declares a `textContent` prop.** Every other text-bearing leaf (`Text`, `Code`) already declares one; `Kbd` was missing it, so the transpiler's unconditional `textContent` extraction for leaf types produced a value the catalog schema rejected as an unevaluated property on every harvested `<kbd-ui>` chunk (12 instances). Purely a schema declaration gap — no behavior change (the transpiler already extracted the value correctly).
+- **`chart.yaml`/`table.yaml` — `data` prop declares `items: {type: object}`.** Opts these two dynamic array props into `@adia-ai/a2ui-corpus`'s new `DynamicObjectList` schema (array-of-object) instead of the default `DynamicStringList` (array-of-string) — the wrong shape for chart/table row records. Paired with a transpiler fix in `@adia-ai/a2ui-compose` (the attribute value was never actually parsed); see that package's CHANGELOG.
+
+### Fixed — GH #224, SVG zero-viewport silent non-render
+- **`styles/resets.css` — `svg` gets its own reset rule, dropping `max-inline-size`/`block-size` instead of sharing `img`/`picture`/`video`/`canvas`'s `max-inline-size: 100%; block-size: auto` rule.** Per the SVG spec, a zero-size viewport — exactly what `max-inline-size: 100%` computes to inside a zero-intrinsic-size ancestor (the common `width:0; height:0; transform:scale(s)` pattern for a CSS-scaled canvas/scene) — makes the element **not render at all**, not "render at 0 visual size": silent, no console warning. `img`/`picture`/`video`/`canvas` don't share this failure mode. Components that embed SVG (`icon-ui`, etc.) already size it explicitly in their own scoped CSS and are unaffected either way (verified: no component CSS relies on the global rule's sizing behavior). Verified via the full web-modules test suite + a manual repro check against the reporting issue's own reproduction case (no dedicated new test — a global CSS reset rule).
+
+### Maintenance
+- **`dist/` CDN bundles rebuilt** (`host.min.css`, `host.sheet.js`, `theme-provider.min.js`, `web-components.min.{css,js}`, `web-components.sheet.js`) to inline the `resets.css` fix above.
+
 ## [0.7.27] — 2026-07-12
 
 Fixes harvested from the /site → A2UI docs migration's live operator reports (TKT-0002…0006) — each was a real framework defect the migration surfaced, not a docs-only issue — plus the router race that three separate flake classes traced back to.

package/components/chart/chart.a2ui.json

@@ -55,7 +55,7 @@
     },
     "data": {
       "description": "JS property (set programmatically — `el.data = [...]`). An array of plain objects; each object's keys are named by the `x` and `y` attributes — e.g. `<chart-ui x=\"month\" y=\"revenue\">` consumes `[{month:'Jan', revenue:3200}, {month:'Feb', revenue:4100}]`. The Chart.js `{labels, datasets}` envelope is NOT chart-ui's API — passing it (or any non-array value) renders an empty chart. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect. Custom accessor on the element class, not a reflected attribute.",
-      "$ref": "common_types.json#/$defs/DynamicStringList"
+      "$ref": "common_types.json#/$defs/DynamicObjectList"
     },
     "format": {
       "description": "Number-format mode applied to axis labels + value overlays + donut total + gauge value + treemap value + funnel value + internal tooltip. `abbr` is the legacy 1.2K / 3M format; `decimal` fixes 2 decimals; `currency` prefixes via `--chart-currency-prefix` token (default \"$\"); `percent` multiplies × 100 and adds a % suffix.",

package/components/chart/chart.yaml

@@ -122,6 +122,8 @@ props:
       hydrated once at connect. Custom accessor on the element class, not a
       reflected attribute.
     type: array
+    items:
+      type: object
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
 events:

package/components/kbd/kbd.a2ui.json

@@ -25,6 +25,10 @@
         "lg"
       ],
       "default": ""
+    },
+    "textContent": {
+      "description": "Key label text, extracted from innerHTML (e.g. \"Ctrl+K\"). The main payload field for Kbd components extracted from HTML — mirrors Text/Code's textContent prop.",
+      "$ref": "common_types.json#/$defs/DynamicString"
     }
   },
   "required": [

package/components/kbd/kbd.d.ts

@@ -15,4 +15,6 @@ import { UIElement } from '../../core/element.js';
 export class UIKbd extends UIElement {
   /** Sizing scale: sm, md (default), lg. */
   size: 'sm' | 'md' | 'lg';
+  /** Key label text, extracted from innerHTML (e.g. "Ctrl+K"). The main payload field for Kbd components extracted from HTML — mirrors Text/Code's textContent prop. */
+  textContent: string;
 }

package/components/kbd/kbd.yaml

@@ -19,6 +19,11 @@ props:
     - md
     - lg
     reflect: true
+  textContent:
+    description: Key label text, extracted from innerHTML (e.g. "Ctrl+K"). The main payload field for Kbd components extracted from HTML — mirrors Text/Code's textContent prop.
+    type: string
+    default: ''
+    dynamic: true
 events: {}
 slots:
   default:

package/components/table/cell-types.js

@@ -1,5 +1,7 @@
 // cell-types.js - Built-in cell type registry for table-ui
 
+import { inline } from '../../core/markdown.js';
+
 const cellTypes = {};
 
 function registerCellType(name, config) {
@@ -233,7 +235,34 @@ registerCellType('link', {
   sortFn: 'alphanumeric',
 });
 
-// 11. progress
+// 11. markdown — TKT-0008: cells with inline `code`/**bold**/*italic*/
+// [link](href) content the docs-transpiler couldn't express as a plain
+// string (table.yaml {columns,data} contract carries plain values; this
+// is the one escape hatch for INLINE-safe rich text, reusing the same
+// inline() converter core/markdown.js already round-trips against
+// scripts/build/lib/docs-transpiler.mjs's convertInline() — the two are
+// paired encode/decode halves of one contract, not independent parsers).
+// Block-level content (nested tables, component tags, colspan/rowspan)
+// stays out of scope; those still fall back to the preserved-HTML Code
+// panel synthesizeTable already emits.
+registerCellType('markdown', {
+  render(value, row, cell) {
+    let s = cell.firstElementChild;
+    if (!s || s.tagName !== 'SPAN') {
+      cell.replaceChildren();
+      s = cell.appendChild(document.createElement('span'));
+    }
+    s.innerHTML = inline(String(value ?? ''));
+    cell.title = s.textContent;
+  },
+  format(value) {
+    return String(value ?? '');
+  },
+  align: 'left',
+  sortFn: 'alphanumeric',
+});
+
+// 12. progress
 registerCellType('progress', {
   render(value, row, cell) {
     let wrapper = cell.querySelector('row-ui');
@@ -262,7 +291,7 @@ registerCellType('progress', {
   sortFn: 'numeric',
 });
 
-// 12. actions
+// 13. actions
 registerCellType('actions', {
   render(value, row, cell, meta) {
     const actions = meta?.actions || [];

package/components/table/table.a2ui.json

@@ -22,7 +22,7 @@
     },
     "data": {
       "description": "Row records. Array of plain objects keyed to columns[].key.",
-      "$ref": "common_types.json#/$defs/DynamicStringList"
+      "$ref": "common_types.json#/$defs/DynamicObjectList"
     },
     "density": {
       "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows.",

package/components/table/table.test.js

@@ -389,3 +389,40 @@ describe('table-ui — F6 per-row expand suppression (rowExpandable)', () => {
     expect(el.expanded).toContain(1);
   });
 });
+
+describe('table-ui — "markdown" cell type (TKT-0008)', () => {
+  it('renders inline `code`/**bold**/*italic*/[link](href) as real elements, not literal syntax', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = [{ key: 'desc', label: 'Description', type: 'markdown' }];
+    el.data = [{ desc: 'Semantic status: `new` | `updated` | **beta** or *deprecated*, see [docs](/site/components/badge).' }];
+    await raf();
+
+    const cell = el.querySelector('[role="gridcell"][data-key="desc"]');
+    expect([...cell.querySelectorAll('code')].map((c) => c.textContent)).toEqual(['new', 'updated']);
+    expect(cell.querySelector('strong').textContent).toBe('beta');
+    expect(cell.querySelector('em').textContent).toBe('deprecated');
+    expect(cell.querySelector('a').getAttribute('href')).toBe('/site/components/badge');
+    expect(cell.textContent).not.toMatch(/`|\*\*|\[docs\]/); // no literal markdown syntax leaked through
+  });
+
+  it('sets [title] to the plain-text (tag-stripped) version, for the truncation tooltip', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = [{ key: 'prop', label: 'Prop', type: 'markdown' }];
+    el.data = [{ prop: '`variant`' }];
+    await raf();
+
+    const cell = el.querySelector('[role="gridcell"][data-key="prop"]');
+    expect(cell.title).toBe('variant');
+  });
+
+  it('a plain value with no markdown syntax renders as ordinary text (no stray elements)', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = [{ key: 'desc', label: 'Description', type: 'markdown' }];
+    el.data = [{ desc: 'Plain sentence, no special characters.' }];
+    await raf();
+
+    const cell = el.querySelector('[role="gridcell"][data-key="desc"]');
+    expect(cell.querySelector('code, strong, em, a')).toBeNull();
+    expect(cell.textContent).toBe('Plain sentence, no special characters.');
+  });
+});

package/components/table/table.yaml

@@ -27,6 +27,8 @@ props:
   data:
     description: Row records. Array of plain objects keyed to columns[].key.
     type: array
+    items:
+      type: object
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
   density:

package/core/markdown.js

@@ -91,7 +91,7 @@ export function renderMarkdown(src) {
 const CODE_PH = (n) => `\0CODE${n}\0`;
 const CODE_PH_RE = /\0CODE(\d+)\0/g;
 
-function inline(text) {
+export function inline(text) {
   const escaped = esc(text);
 
   // 1. Extract inline-code spans FIRST and protect their (already-escaped,