@adia-ai/web-components 0.5.17 → 0.5.19

package/components/tree/tree.yaml

@@ -15,7 +15,11 @@ composes:
 props: {}
 events:
   tree-select:
-    description: "Fired when an item is selected. detail: { item, text, value }"
+    description: >
+      Fired when an item is selected.
+      detail: { item, text, value, ctrlKey, metaKey, shiftKey }.
+      Modifier flags mirror the originating MouseEvent / KeyboardEvent;
+      all default false for programmatic select() calls.
     detail:
       item:
         type: object
@@ -26,6 +30,15 @@ events:
       value:
         type: string
         description: Item value attribute.
+      ctrlKey:
+        type: boolean
+        description: Ctrl key held during activation (false for programmatic select()).
+      metaKey:
+        type: boolean
+        description: Meta (Cmd) key held during activation (false for programmatic select()).
+      shiftKey:
+        type: boolean
+        description: Shift key held during activation (false for programmatic select()).
 slots:
   default (tree-item-ui children):
     description: "Child content region for the `default (tree-item-ui children)` slot."

package/core/template.test.js

@@ -13,7 +13,7 @@
  */
 
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { html, stamp } from './template.js';
+import { html, stamp, repeat } from './template.js';
 
 describe('html template — §250 (v0.5.11) ?attr=${bool} silent-failure trap', () => {
   let container;
@@ -179,3 +179,103 @@ describe('html template — FB-40 (v0.5.16) apostrophe in HTML comments does NOT
     expect(received).not.toBeNull();
   });
 });
+
+describe('html template — FB-47 (v0.5.19) stamp() cache + repeat() keyed reuse', () => {
+  // FEEDBACK-47 claimed `stamp()` unconditionally calls `mount()` →
+  // `replaceChildren()`, defeating `repeat()` keyed reconciliation. Source
+  // inspection (template.js:94-102) shows `stamp()` has a per-container
+  // cache keyed on `result.strings`; `mount()` runs ONLY on cache miss
+  // (first stamp on this container OR new template strings). These tests
+  // verify the cache behavior empirically against the same-template
+  // re-stamp + repeat()-same-key paths.
+
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('stamp() with same template strings reuses the mounted instance (no replaceChildren)', () => {
+    // Build a template factory whose strings literal is reference-stable
+    // (the tagged-template caller — closure captures `strings` once).
+    const make = (value) => html`<div class="probe">${value}</div>`;
+
+    stamp(make('first'), container);
+    const firstDiv = container.querySelector('.probe');
+    expect(firstDiv).not.toBeNull();
+    expect(firstDiv.textContent).toBe('first');
+
+    // Mark the existing node so we can prove it survives the re-stamp.
+    firstDiv.dataset.marker = 'preserved';
+
+    stamp(make('second'), container);
+    const secondDiv = container.querySelector('.probe');
+    expect(secondDiv).toBe(firstDiv);                     // ✅ same node
+    expect(secondDiv.dataset.marker).toBe('preserved');   // ✅ no replaceChildren
+    expect(secondDiv.textContent).toBe('second');         // ✅ value updated in-place
+  });
+
+  it('repeat() with same key preserves wrapper children across re-renders', () => {
+    // FB-47's central reproduction: same-key repeat() should preserve the
+    // per-item wrapper-span AND the child element stamped into it on the
+    // prior render. Both the outer template AND the per-item template must
+    // share strings references across renders (single tagged-template-literal
+    // sites) — JS spec gives each source site its own strings array, so
+    // inline-duplicating the html`` between stamp calls would force a
+    // cache miss and defeat preservation. Real consumers naturally satisfy
+    // this by having one render function called repeatedly.
+    const items = [{ id: 'a', label: 'first' }];
+    const tplFn = (item) => html`<div class="probe" data-id=${item.id}>${item.label}</div>`;
+    const renderAll = (its) => html`${repeat(its, (x) => x.id, tplFn)}`;
+
+    stamp(renderAll(items), container);
+    const firstDiv = container.querySelector('.probe[data-id="a"]');
+    expect(firstDiv).not.toBeNull();
+
+    // Append a manually-added child that the framework should NOT destroy.
+    const probe = document.createElement('span');
+    probe.id = 'fb47-manual-child';
+    probe.textContent = 'sentinel';
+    firstDiv.appendChild(probe);
+
+    // Re-stamp with the same items array (same key 'a').
+    items[0] = { id: 'a', label: 'second' };
+    stamp(renderAll(items), container);
+
+    const secondDiv = container.querySelector('.probe[data-id="a"]');
+    expect(secondDiv).toBe(firstDiv);                     // ✅ wrapper reused
+    expect(secondDiv.querySelector('#fb47-manual-child')).not.toBeNull();
+    expect(secondDiv.firstChild.nodeValue).toBe('second');  // text updated in-place
+  });
+
+  it('Array.isArray() branch in applyValue does replace children on every re-render (the actual root cause)', () => {
+    // FB-47's empirical observation IS valid for `.map()` — the
+    // Array.isArray() branch in applyValue() (template.js:232-244) does
+    // unconditional `container.replaceChildren()` + allocates fresh wrapper
+    // spans per item. Switching consumers to repeat() avoids this. This
+    // test pins the current behavior so any future "make .map() smart"
+    // change is intentional, not accidental. Use a single render function
+    // (one tagged-template-literal site for the outer template) so the
+    // observed re-creation is isolated to the .map() Array branch, not
+    // a cache miss from inline-duplicated source sites.
+    const items = [{ id: 'a', label: 'first' }];
+    const tplFn = (item) => html`<div class="probe" data-id=${item.id}>${item.label}</div>`;
+    const renderAll = (its) => html`${its.map(tplFn)}`;
+
+    stamp(renderAll(items), container);
+    const firstDiv = container.querySelector('.probe[data-id="a"]');
+    expect(firstDiv).not.toBeNull();
+
+    items[0] = { id: 'a', label: 'second' };
+    stamp(renderAll(items), container);
+
+    const secondDiv = container.querySelector('.probe[data-id="a"]');
+    expect(secondDiv).not.toBe(firstDiv);                 // ✅ NEW node — .map() re-creates
+    expect(secondDiv.textContent).toBe('second');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.17",
+  "version": "0.5.19",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",