@ornery/ui-grid-vanilla 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/ui-grid-vanilla",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Vanilla DOM wrapper for the Rust/WASM-backed @ornery/ui-grid-core custom element",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@ornery/ui-grid-core": "1.0.5"
+    "@ornery/ui-grid-core": "1.0.6"
   },
   "devDependencies": {
     "happy-dom": "^20.9.0",
@@ -29,8 +29,9 @@
   },
   "scripts": {
     "start": "SASS_PATH=node_modules vite serve",
-    "build": "npm run build --prefix ../ui-grid-core && SASS_PATH=node_modules tsup",
-    "watch": "npm run build --prefix ../ui-grid-core && SASS_PATH=node_modules tsup --watch",
-    "test": "SASS_PATH=node_modules vitest run"
+    "build": "SASS_PATH=node_modules tsup",
+    "watch": "SASS_PATH=node_modules tsup --watch",
+    "test": "SASS_PATH=node_modules vitest run --config vitest.config.ts",
+    "test:coverage": "SASS_PATH=node_modules vitest run --config vitest.config.ts --coverage"
   }
 }

package/src/cell-state-management.test.ts

@@ -0,0 +1,419 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { clearRustWasmGridEngine } from '@ornery/ui-grid-core';
+
+import {
+  mountVanillaUiGrid,
+  type GridOptions,
+  type UiGridApi,
+  type VanillaUiGridElement,
+} from './index';
+
+/**
+ * Regression tests for two bugs reported around the cell selection / row
+ * selection / expandable-rows interaction:
+ *
+ * 1. Click-on-projected-content focus retention — when a consumer projects
+ *    a `<span slot="cell-…">` into a body cell (Angular ng-template, React
+ *    portal, or vanilla `<template slot="cell-…">`), clicks on that
+ *    light-DOM content used to fail to update `cell-focused` because the
+ *    handler used `closest('.body-cell')` which doesn't cross shadow
+ *    boundaries. The fix walks `composedPath()` instead.
+ *
+ * 2. Patch-path row-state cache — a per-row visual fingerprint short-
+ *    circuits the patch loop when nothing relevant changed (selection /
+ *    focus / expand / dirty / saving / error / validate / treeLevel /
+ *    indent). This makes selection toggles in grids with both row
+ *    selection and expandable rows enabled cheap. The tests below pin the
+ *    correctness of the cache: selecting one row only touches that row's
+ *    cells; toggling expand only touches that row; validate state changes
+ *    flip the invalid class.
+ */
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((r) => window.setTimeout(r, 10));
+  }
+  throw new Error('Timed out waiting for expected state');
+}
+
+const TAG = 'ui-grid-element-vanilla-cell-state-test';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+function rows(): Row[] {
+  return [
+    { id: 'r1', name: 'Alpha', status: 'Active' },
+    { id: 'r2', name: 'Beta', status: 'Pilot' },
+    { id: 'r3', name: 'Gamma', status: 'Draft' },
+  ];
+}
+
+function baseOptions(overrides: Partial<GridOptions> = {}): GridOptions {
+  let capturedApi: UiGridApi | undefined;
+  const options: GridOptions = {
+    id: 'cell-state-grid',
+    data: rows(),
+    columnDefs: [
+      { name: 'name', displayName: 'Name' },
+      { name: 'status', displayName: 'Status' },
+    ],
+    rowIdentity: (entity) => String((entity as { id: string }).id),
+    enableRowSelection: true,
+    onRegisterApi: (api) => {
+      capturedApi = api as UiGridApi;
+    },
+    ...overrides,
+  };
+  Object.defineProperty(options, '__api', { enumerable: false, get: () => capturedApi });
+  return options;
+}
+
+function getApi(options: GridOptions): UiGridApi {
+  const api = (options as unknown as { __api: UiGridApi | undefined }).__api;
+  if (!api) throw new Error('Grid API was never registered');
+  return api;
+}
+
+async function mountGrid(options: GridOptions): Promise<{
+  grid: VanillaUiGridElement;
+  shadow: ShadowRoot;
+}> {
+  const target = document.getElementById('app')!;
+  const grid = await mountVanillaUiGrid(target, options, undefined, TAG);
+  const shadow = await waitFor(() => grid.shadowRoot);
+  await waitFor(() => shadow.querySelector('.body-cell[data-row="r1"][data-column="name"]'));
+  return { grid, shadow };
+}
+
+function cellIn(root: ShadowRoot, rowId: string, columnName: string): HTMLElement {
+  const selector = `.body-cell[data-row="${rowId}"][data-column="${columnName}"]`;
+  const el = root.querySelector<HTMLElement>(selector);
+  if (!el) throw new Error(`Cell ${rowId}/${columnName} not rendered`);
+  return el;
+}
+
+function dispatchClick(el: HTMLElement): MouseEvent {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    button: 0,
+  });
+  el.dispatchEvent(event);
+  return event;
+}
+
+describe('cell selection state retention', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  it('moves the cell-focused class from the previous cell to the newly clicked cell', async () => {
+    const { shadow } = await mountGrid(baseOptions({ enableRowSelection: false }));
+
+    const a = cellIn(shadow, 'r1', 'name');
+    const b = cellIn(shadow, 'r2', 'status');
+
+    dispatchClick(a);
+    expect(a.classList.contains('cell-focused')).toBe(true);
+    expect(a.getAttribute('data-focused')).toBe('true');
+
+    dispatchClick(b);
+    expect(b.classList.contains('cell-focused')).toBe(true);
+    expect(b.getAttribute('data-focused')).toBe('true');
+    // Critical: the previously focused cell must lose the class, otherwise
+    // both cells appear "selected" simultaneously.
+    expect(a.classList.contains('cell-focused')).toBe(false);
+    expect(a.getAttribute('data-focused')).toBe('false');
+  });
+
+  it('clicks on a deeply nested element inside a body cell focus the host body cell (composedPath traversal)', async () => {
+    // Sanity-check: the click handler walks composedPath() instead of
+    // closest('.body-cell'), so any descendant click — including child
+    // elements far below the body-cell — still resolves to the host.
+    // This is the same code path that handles framework-projected
+    // light-DOM content (Angular ng-template, React render props), where
+    // the deepest target sits OUTSIDE the body-cell's DOM ancestor chain.
+    const { shadow } = await mountGrid(baseOptions({ enableRowSelection: false }));
+
+    const cell = cellIn(shadow, 'r1', 'name');
+    const cellValue = cell.querySelector<HTMLElement>('.cell-value');
+    if (!cellValue) throw new Error('Expected default .cell-value span inside the cell');
+
+    expect(cell.classList.contains('cell-focused')).toBe(false);
+    dispatchClick(cellValue);
+    expect(cell.classList.contains('cell-focused')).toBe(true);
+    expect(cell.getAttribute('data-focused')).toBe('true');
+
+    // Clicking inside another cell's deepest descendant clears the prior
+    // cell's focus and applies it to the new one.
+    const other = cellIn(shadow, 'r2', 'status');
+    const otherValue = other.querySelector<HTMLElement>('.cell-value')!;
+    dispatchClick(otherValue);
+    expect(cell.classList.contains('cell-focused')).toBe(false);
+    expect(cell.getAttribute('data-focused')).toBe('false');
+    expect(other.classList.contains('cell-focused')).toBe(true);
+  });
+
+  it('renders a per-cell <slot> placeholder when a column is registered as framework-rendered', async () => {
+    // Pins the bridge that the Angular wrapper depends on: declaring a
+    // column as framework-rendered swaps its body cell from the default
+    // string-interpolated content to a `<slot name="cell-…-rowId">`
+    // placeholder. The wrapper then attaches a light-DOM node with a
+    // matching `slot` attribute to project its rendered template.
+    const { grid, shadow } = await mountGrid(baseOptions({ enableRowSelection: false }));
+
+    grid.setFrameworkRenderedSlots({ cells: ['name'] });
+    const slotInCell = await waitFor(() => {
+      const cell = shadow.querySelector<HTMLElement>(
+        '.body-cell[data-row="r1"][data-column="name"]',
+      );
+      return cell?.querySelector<HTMLSlotElement>('slot') ?? null;
+    });
+
+    // Slot name must include the row identity so the wrapper can match
+    // each projected content node to its cell.
+    const slotName = slotInCell.getAttribute('name');
+    expect(slotName).toBe('cell-name-r1');
+    // Each row gets its own unique slot name.
+    const r2Slot = shadow.querySelector<HTMLSlotElement>(
+      '.body-cell[data-row="r2"][data-column="name"] slot',
+    );
+    expect(r2Slot?.getAttribute('name')).toBe('cell-name-r2');
+  });
+
+  it('uses composedPath() to locate the body cell so framework-projected clicks resolve correctly in real browsers', async () => {
+    // The Angular / React wrappers project light-DOM content (Angular
+    // ng-template, React render props) into per-cell slots. In a real
+    // browser the resulting click event has the shadow-DOM body-cell in
+    // its composedPath. Test environments (jsdom + happy-dom alike)
+    // don't simulate slot-driven event flow, so we directly validate the
+    // helper logic by dispatching a click whose composedPath synthetically
+    // includes the body cell — which is what a real browser produces.
+    const { shadow } = await mountGrid(baseOptions({ enableRowSelection: false }));
+
+    const targetCell = cellIn(shadow, 'r2', 'status');
+
+    // Build a click event whose `composedPath` is overridden to include a
+    // synthetic light-DOM node FOLLOWED by the real shadow-DOM body cell —
+    // mirroring the path real browsers produce for a click on slotted
+    // content. Without the composedPath fix the click handler would only
+    // see the light-DOM portion (everything before the body-cell) and miss
+    // the cell entirely.
+    const projected = document.createElement('span');
+    projected.className = 'projected-cell';
+    const path: EventTarget[] = [
+      projected,
+      targetCell,
+      shadow,
+    ];
+    const event = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      button: 0,
+    });
+    Object.defineProperty(event, 'composedPath', {
+      value: () => path,
+      configurable: true,
+    });
+    Object.defineProperty(event, 'target', { value: projected, configurable: true });
+
+    expect(targetCell.classList.contains('cell-focused')).toBe(false);
+    shadow.dispatchEvent(event);
+    expect(targetCell.classList.contains('cell-focused')).toBe(true);
+    expect(targetCell.getAttribute('data-focused')).toBe('true');
+
+    // A subsequent normal click on a different cell clears the focus.
+    const other = cellIn(shadow, 'r3', 'name');
+    dispatchClick(other);
+    expect(targetCell.classList.contains('cell-focused')).toBe(false);
+    expect(other.classList.contains('cell-focused')).toBe(true);
+  });
+});
+
+describe('row selection + expand patch correctness', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  function selectionExpandOptions(): GridOptions {
+    // Provide a no-op expandable template object so canGridExpandRows
+    // returns true. The template body itself isn't exercised here.
+    const template = { createEmbeddedView: () => undefined };
+    return baseOptions({
+      enableRowSelection: true,
+      enableExpandable: true,
+      expandableRowTemplate:
+        template as unknown as GridOptions['expandableRowTemplate'],
+    });
+  }
+
+  it('toggling selection on one row only flips the ui-grid-row-selected class on cells of that row', async () => {
+    const options = selectionExpandOptions();
+    const { shadow } = await mountGrid(options);
+
+    const before = {
+      r1Name: cellIn(shadow, 'r1', 'name').classList.contains('ui-grid-row-selected'),
+      r2Name: cellIn(shadow, 'r2', 'name').classList.contains('ui-grid-row-selected'),
+      r3Name: cellIn(shadow, 'r3', 'name').classList.contains('ui-grid-row-selected'),
+    };
+    expect(before).toEqual({ r1Name: false, r2Name: false, r3Name: false });
+
+    getApi(options).selection.selectRow(options.data[1] as Record<string, unknown>);
+    await waitFor(() =>
+      cellIn(shadow, 'r2', 'name').classList.contains('ui-grid-row-selected') ? {} : null,
+    );
+
+    // Only r2's cells flipped — r1 / r3 remain unselected. Both cell
+    // columns of r2 must be flagged so the row stripe shows across all
+    // columns.
+    expect(cellIn(shadow, 'r1', 'name').classList.contains('ui-grid-row-selected')).toBe(false);
+    expect(cellIn(shadow, 'r1', 'status').classList.contains('ui-grid-row-selected')).toBe(false);
+    expect(cellIn(shadow, 'r2', 'name').classList.contains('ui-grid-row-selected')).toBe(true);
+    expect(cellIn(shadow, 'r2', 'status').classList.contains('ui-grid-row-selected')).toBe(true);
+    expect(cellIn(shadow, 'r3', 'name').classList.contains('ui-grid-row-selected')).toBe(false);
+    expect(cellIn(shadow, 'r3', 'status').classList.contains('ui-grid-row-selected')).toBe(false);
+
+    // Unselect — class must drop.
+    getApi(options).selection.unSelectRow(options.data[1] as Record<string, unknown>);
+    await waitFor(() =>
+      !cellIn(shadow, 'r2', 'name').classList.contains('ui-grid-row-selected') ? {} : null,
+    );
+    expect(cellIn(shadow, 'r2', 'name').classList.contains('ui-grid-row-selected')).toBe(false);
+    expect(cellIn(shadow, 'r2', 'status').classList.contains('ui-grid-row-selected')).toBe(false);
+  });
+
+  it('toggling expansion on a row inserts/removes the expandable detail and updates that row only', async () => {
+    const options = selectionExpandOptions();
+    const { shadow } = await mountGrid(options);
+
+    expect(shadow.querySelector('.expandable-row')).toBeNull();
+
+    getApi(options).expandable.toggleRowExpansion(options.data[1] as Record<string, unknown>);
+    await waitFor(() => shadow.querySelector('.expandable-row'));
+
+    // Exactly one expandable-row appears after toggling a single row.
+    expect(shadow.querySelectorAll('.expandable-row').length).toBe(1);
+
+    // Other rows' selection / focus state must not have flipped.
+    expect(cellIn(shadow, 'r1', 'name').classList.contains('ui-grid-row-selected')).toBe(false);
+    expect(cellIn(shadow, 'r3', 'name').classList.contains('ui-grid-row-selected')).toBe(false);
+
+    // Collapse — the detail row goes away.
+    getApi(options).expandable.toggleRowExpansion(options.data[1] as Record<string, unknown>);
+    await waitFor(() => (shadow.querySelector('.expandable-row') === null ? {} : null));
+    expect(shadow.querySelector('.expandable-row')).toBeNull();
+  });
+
+  it('selection toggle preserves cell-focused on a different row', async () => {
+    // The patch path's per-row fingerprint must NOT clobber the cell-focused
+    // class on a row that wasn't touched by the selection toggle. This was
+    // the actual bug — without proper "focused cell touches this row"
+    // tracking, the focused cell could either lose its class on the next
+    // refresh or keep it on a row it has moved off of.
+    const options = selectionExpandOptions();
+    const { shadow } = await mountGrid(options);
+
+    const r1Cell = cellIn(shadow, 'r1', 'name');
+    dispatchClick(r1Cell);
+    expect(r1Cell.classList.contains('cell-focused')).toBe(true);
+
+    // Selecting a different row triggers a full refresh; r1's cell-focused
+    // class must survive because focusedCell didn't move.
+    getApi(options).selection.selectRow(options.data[1] as Record<string, unknown>);
+    await waitFor(() =>
+      cellIn(shadow, 'r2', 'name').classList.contains('ui-grid-row-selected') ? {} : null,
+    );
+    expect(r1Cell.classList.contains('cell-focused')).toBe(true);
+    expect(r1Cell.getAttribute('data-focused')).toBe('true');
+  });
+
+  it('expand toggle attaches to the first data column (not the selection checkbox column) and renders to the left of cell content', async () => {
+    // Regression test for the visual bug where the expand toggle
+    // rendered inside the selectionRowHeaderCol cell (column index 0).
+    // isGridPrimaryColumn() now skips the synthetic selection column so
+    // the toggle attaches to the actual first data column. The toggle
+    // sits BEFORE `.cell-content` so the disclosure chevron hugs the
+    // leading edge of the cell, matching the tree-toggle convention.
+    const options = selectionExpandOptions();
+    const { shadow } = await mountGrid(options);
+
+    const selectionCellR1 = shadow.querySelector<HTMLElement>(
+      '.body-cell[data-row="r1"][data-column="selectionRowHeaderCol"]',
+    );
+    expect(selectionCellR1).not.toBeNull();
+    expect(selectionCellR1!.querySelector('.row-toggle-expand')).toBeNull();
+
+    const nameCellR1 = cellIn(shadow, 'r1', 'name');
+    const expandToggle = nameCellR1.querySelector<HTMLElement>('.row-toggle-expand');
+    expect(expandToggle).not.toBeNull();
+
+    // Inside the cell-shell the toggle must come BEFORE .cell-content
+    // so it sits on the leading edge of the cell. DOCUMENT_POSITION_FOLLOWING
+    // (0x04) means cellContent is AFTER expandToggle.
+    const cellContent = nameCellR1.querySelector<HTMLElement>('.cell-content')!;
+    const expectedFollowing = Node.DOCUMENT_POSITION_FOLLOWING;
+    expect(expandToggle!.compareDocumentPosition(cellContent) & expectedFollowing).toBe(
+      expectedFollowing,
+    );
+
+    const selectionCheckbox = selectionCellR1!.querySelector<HTMLElement>(
+      '.ui-grid-selection-row-header-buttons',
+    );
+    expect(selectionCheckbox).not.toBeNull();
+  });
+
+  it('validate state flip flows through the patch fast-path so the invalid class appears', async () => {
+    // Validate writes `$$invalid<col>` directly on the row entity. The
+    // entity reference doesn't change, so the row fingerprint cache must
+    // sample those keys to detect the validity flip.
+    const options = selectionExpandOptions();
+    options.enableCellEdit = true;
+    options.columnDefs = options.columnDefs.map((c) =>
+      c.name === 'name'
+        ? { ...c, enableCellEdit: true, validators: { required: true } }
+        : c,
+    );
+
+    const { shadow } = await mountGrid(options);
+    const api = getApi(options);
+
+    // Drive r1 invalid. Refresh emits a new snapshot; the patch path's
+    // fingerprint cache must detect the new invalid bit and flip the class.
+    const col = options.columnDefs.find((c) => c.name === 'name')!;
+    const target = options.data[0] as Record<string, unknown>;
+    await api.validate.runValidators(target, col, '', 'Alpha');
+    api.core.refresh();
+
+    await waitFor(() =>
+      shadow.querySelector('.body-cell[data-row="r1"][data-column="name"].ui-grid-cell-invalid'),
+    );
+    expect(
+      cellIn(shadow, 'r1', 'name').classList.contains('ui-grid-cell-invalid'),
+    ).toBe(true);
+    // Other rows / columns must NOT be flagged.
+    expect(
+      cellIn(shadow, 'r1', 'status').classList.contains('ui-grid-cell-invalid'),
+    ).toBe(false);
+    expect(
+      cellIn(shadow, 'r2', 'name').classList.contains('ui-grid-cell-invalid'),
+    ).toBe(false);
+  });
+});

package/src/events.ts

@@ -28,6 +28,24 @@ import type { UiGridStandaloneElement } from './ui-grid-standalone.element';
 
 type BoundShadowRoot = ShadowRoot & { __uiGridBound?: boolean };
 
+/**
+ * Find the `.body-cell[data-row][data-column]` ancestor of an event by walking
+ * the composed event path. Plain `closest()` from the click target stops at
+ * shadow boundaries — for clicks on framework-projected light-DOM cell
+ * content (Angular ng-template, React render props), the body cell sits in
+ * the shadow tree on the other side of the slot. composedPath includes both
+ * sides, so we just scan it.
+ */
+function bodyCellFromEvent(event: Event): HTMLElement | null {
+  const path = event.composedPath();
+  for (const node of path) {
+    if (node instanceof HTMLElement && node.classList.contains('body-cell')) {
+      if (node.dataset['row'] && node.dataset['column']) return node;
+    }
+  }
+  return null;
+}
+
 /**
  * Watch the element's light DOM for `<template slot="…">` changes so
  * consumer template edits trigger a re-render. Ports the old grid's
@@ -37,7 +55,23 @@ type BoundShadowRoot = ShadowRoot & { __uiGridBound?: boolean };
 export function observeTemplateSlots(el: UiGridStandaloneElement): void {
   if (el.templateObserver) return;
 
-  el.templateObserver = new MutationObserver(() => {
+  el.templateObserver = new MutationObserver((mutations) => {
+    // We only care about consumer-provided `<template slot="…">` nodes —
+    // their innerHTML feeds the string-interpolation render path. Skip
+    // mutations that only touched non-template slotted nodes (e.g. the
+    // `<span slot="cell-…">` wrappers Angular / React wrappers append to
+    // project framework-rendered content). Otherwise those framework
+    // wrappers would re-trigger ensureController on every slot delta and
+    // loop forever.
+    const involvesTemplate = mutationsTouchTemplateSlot(mutations);
+    if (!involvesTemplate) return;
+
+    // Consumer light-DOM templates (`<template slot="cell-…">`) feed the
+    // string-interpolation render path. When they're added/removed/edited
+    // the per-row visual fingerprint cache becomes stale (the fingerprint
+    // doesn't track template content), so blow it away to force the next
+    // patch pass to re-render every cell shell.
+    el.lastRowStateFingerprints.clear();
     if (el.activeOptions) {
       el.ensureController(el.buildEffectiveOptions(el.activeOptions));
     } else {
@@ -53,6 +87,23 @@ export function observeTemplateSlots(el: UiGridStandaloneElement): void {
   });
 }
 
+function mutationsTouchTemplateSlot(mutations: MutationRecord[]): boolean {
+  for (const m of mutations) {
+    if (m.type === 'attributes' && m.target instanceof HTMLTemplateElement) {
+      return true;
+    }
+    if (m.type === 'childList') {
+      for (const node of m.addedNodes) {
+        if (node instanceof HTMLTemplateElement && node.hasAttribute('slot')) return true;
+      }
+      for (const node of m.removedNodes) {
+        if (node instanceof HTMLTemplateElement && node.hasAttribute('slot')) return true;
+      }
+    }
+  }
+  return false;
+}
+
 /**
  * Mirror horizontal scroll from the body viewport onto the header +
  * filter strips. The strips are real scroll containers (necessary for
@@ -115,7 +166,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     // don't reliably focus a div with tabindex="0" on click, so we force it
     // here. This is required for arrow-key nav to work — otherwise focus
     // stays on the grid-table scroll container and arrows just scroll.
-    const clickedCell = realTarget.closest?.<HTMLElement>('.body-cell[data-row][data-column]') ?? null;
+    const clickedCell = bodyCellFromEvent(event);
     if (clickedCell && !realTarget.closest('[data-role="editor"]')) {
       const rowId = clickedCell.dataset['row'];
       const columnName = clickedCell.dataset['column'];
@@ -140,11 +191,8 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     // Row-header checkbox column click — mirrors the old
     // selectionRowHeaderButtons directive: even when enableFullRowSelection
     // is off, clicking the header checkbox selects the row.
-    const checkboxNode = realTarget.closest?.<HTMLElement>(
-      '.body-cell[data-row][data-column="selectionRowHeaderCol"]',
-    );
-    if (checkboxNode) {
-      const rowId = checkboxNode.dataset['row'];
+    if (clickedCell?.dataset['column'] === 'selectionRowHeaderCol') {
+      const rowId = clickedCell.dataset['row'];
       if (rowId) {
         event.stopPropagation();
         handleRowHeaderCheckboxClick(el, rowId, event);
@@ -255,9 +303,10 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     }
 
     if (action === 'benchmark') {
-      const result = el.controller.gridApi.core.benchmark();
-      el.benchmarkAverage = result.averageMs.toFixed(2);
-      el.render();
+      void el.controller.gridApi.core.benchmark().then((result) => {
+        el.benchmarkAverage = result.averageMs.toFixed(2);
+        el.render();
+      });
       return;
     }
 
@@ -270,13 +319,16 @@ export function bindEvents(el: UiGridStandaloneElement): void {
   // focusin / focusout: keep `focusedCell` in sync with DOM focus
   // ─────────────────────────────────────────────────────────────────
   root.addEventListener('focusin', (event) => {
-    const target = event.target as HTMLElement | null;
-    if (!target) return;
-    const cell = target.closest<HTMLElement>('.body-cell[data-row][data-column]');
+    const cell = bodyCellFromEvent(event);
     const rowId = cell?.dataset['row'];
     const columnName = cell?.dataset['column'];
     if (rowId && columnName) {
-      el.focusedCell = { rowId, columnName };
+      const previous = el.focusedCell;
+      const next = { rowId, columnName };
+      if (!previous || previous.rowId !== rowId || previous.columnName !== columnName) {
+        el.focusedCell = next;
+        applyFocusedCellClass(el, previous, next);
+      }
     }
   });
 
@@ -325,7 +377,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     if (realTarget.closest('.filter-cell')) return;
     const resolved = el.controller.getResolvedSelectionOptions();
     if (!resolved.enableRowSelection || !resolved.multiSelect) return;
-    const startCell = realTarget.closest<HTMLElement>('.body-cell[data-row][data-column]');
+    const startCell = bodyCellFromEvent(event);
     if (!startCell) return;
     const startRowId = startCell.dataset['row'];
     if (!startRowId) return;
@@ -356,9 +408,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     };
 
     const handleMove = (moveEvent: MouseEvent): void => {
-      const path = moveEvent.composedPath();
-      const firstEl = path[0] as HTMLElement | undefined;
-      const cell = firstEl?.closest?.<HTMLElement>('.body-cell[data-row][data-column]');
+      const cell = bodyCellFromEvent(moveEvent);
       if (!cell) return;
       const rowId = cell.dataset['row'];
       if (!rowId) return;
@@ -455,7 +505,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
       }
     }
 
-    const cell = target.closest<HTMLElement>('.body-cell');
+    const cell = bodyCellFromEvent(event);
     if (!cell) return;
 
     const rowId = cell.dataset['row'];
@@ -473,11 +523,13 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     const target = event.target as HTMLElement | null;
     if (!target || !el.controller) return;
 
+    const onBodyCell = bodyCellFromEvent(event);
+
     // cellNav.keyDownOverrides: declared overrides skip cellnav's default
     // handling and raise viewPortKeyDown so consumers can disable built-in
     // key handling per-key.
     const overrides = el.controller.getOptions().keyDownOverrides ?? [];
-    if (overrides.length && target.closest('.body-cell')) {
+    if (overrides.length && onBodyCell) {
       for (const override of overrides) {
         if (matchesKeyOverride(override, keyboardEvent)) {
           el.controller.raiseCellNavKeyEvent('keydown', keyboardEvent);
@@ -490,7 +542,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     if (
       (keyboardEvent.ctrlKey || keyboardEvent.metaKey) &&
       (keyboardEvent.key === 'a' || keyboardEvent.key === 'A') &&
-      target.closest('.body-cell')
+      onBodyCell
     ) {
       const resolved = el.controller.getResolvedSelectionOptions();
       if (resolved.enableRowSelection && resolved.multiSelect) {
@@ -502,7 +554,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
 
     // Space toggles the row when on the checkbox column or in full-row-selection mode.
     if (keyboardEvent.key === ' ' || keyboardEvent.key === 'Spacebar') {
-      const cell = target.closest<HTMLElement>('.body-cell[data-row][data-column]');
+      const cell = onBodyCell;
       const rowId = cell?.dataset['row'];
       const columnName = cell?.dataset['column'];
       if (cell && rowId && columnName) {
@@ -567,10 +619,9 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     // cell).
     let rowId: string | undefined;
     let columnName: string | undefined;
-    const cell = target.closest<HTMLElement>('.body-cell');
-    if (cell) {
-      rowId = cell.dataset['row'];
-      columnName = cell.dataset['column'];
+    if (onBodyCell) {
+      rowId = onBodyCell.dataset['row'];
+      columnName = onBodyCell.dataset['column'];
     } else if (el.focusedCell) {
       rowId = el.focusedCell.rowId;
       columnName = el.focusedCell.columnName;

package/src/framework-slots.ts

@@ -261,6 +261,24 @@ export class FrameworkSlotBridge {
     });
   }
 
+  /**
+   * Carry forward every previously-known cell slot for `rowId` into the
+   * current pending set. Used by the structural patch path when a row's
+   * fingerprint matches the previous render's: `stageCell` would normally
+   * re-record the slot during cell rendering, but the fingerprint
+   * short-circuit skips the render pass for unchanged rows. Without this,
+   * `flush()` would diff pending (missing the row's slots) against last
+   * (containing them) and emit a spurious `removed` for every cell of the
+   * unchanged row, destroying the framework wrappers' projected content.
+   */
+  carryRowCells(rowId: string): void {
+    for (const [slotName, slot] of this.lastCellSlots) {
+      if (slot.rowId === rowId) {
+        this.pendingCellSlots.set(slotName, slot);
+      }
+    }
+  }
+
   stageExpandableRow(row: GridRow, rowIndex: number): void {
     const slotName = expandableRowSlotName(row);
     this.pendingExpandableRowSlots.set(slotName, {