stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/data_grid_controller.js

@@ -1,13 +1,31 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/data_grid_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
 
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// src/utils/arrow_step.ts
 function logicalArrowKey(key, element) {
   if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
   if (!isRtl(element)) return key;
@@ -18,7 +36,104 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
-// src/utils/field_mirror.ts
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  beforeWrite?.();
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var AuthoredMutationWatcher = class {
+  #onAuthored;
+  #claims = null;
+  #observer = null;
+  constructor(onAuthored) {
+    this.#onAuthored = onAuthored;
+  }
+  observe(root, options) {
+    this.disconnect();
+    const observer = new MutationObserver((records) => {
+      if (this.#observer !== observer) return;
+      const authored = this.#filter(records);
+      if (authored.length > 0) this.#onAuthored(authored);
+    });
+    this.#observer = observer;
+    this.#claims = { attributes: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [...options.attributes],
+      subtree: options.subtree ?? false,
+      childList: options.childList ?? false
+    });
+    if (options.ancestorAttributes) {
+      let ancestor = root.parentElement;
+      while (ancestor) {
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: [...options.ancestorAttributes]
+        });
+        ancestor = ancestor.parentElement;
+      }
+    }
+  }
+  claim(target, name, value) {
+    const claims = this.#claims?.attributes;
+    let attributes = claims?.get(target);
+    if (!attributes) {
+      attributes = /* @__PURE__ */ new Map();
+      claims?.set(target, attributes);
+    }
+    const pending = attributes.get(name);
+    attributes.set(name, { value, count: (pending?.count ?? 0) + 1 });
+  }
+  claimCurrent(target, name) {
+    this.claim(target, name, target.getAttribute(name));
+  }
+  claimChildList(target, added, removed) {
+    const claims = this.#claims?.children;
+    const pending = claims?.get(target) ?? { added: /* @__PURE__ */ new Map(), removed: /* @__PURE__ */ new Map() };
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) + 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) + 1);
+    claims?.set(target, pending);
+  }
+  take() {
+    return this.#filter(this.#observer?.takeRecords() ?? []);
+  }
+  disconnect() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#claims = null;
+  }
+  #filter(records) {
+    const authored = records.filter((record) => !this.#consume(record));
+    this.#claims?.attributes.clear();
+    this.#claims?.children.clear();
+    return authored;
+  }
+  #consume(record) {
+    if (record.type === "attributes") {
+      const target = record.target;
+      const pending2 = this.#claims?.attributes.get(target)?.get(record.attributeName);
+      if (!pending2 || pending2.count === 0 || target.getAttribute(record.attributeName) !== pending2.value) {
+        return false;
+      }
+      pending2.count -= 1;
+      return true;
+    }
+    const pending = this.#claims?.children.get(record.target);
+    if (!pending) return false;
+    const added = [...record.addedNodes];
+    const removed = [...record.removedNodes];
+    if (added.some((node) => !pending.added.get(node)) || removed.some((node) => !pending.removed.get(node))) {
+      return false;
+    }
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) - 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) - 1);
+    return true;
+  }
+};
+
 function writeFields(container, values, { name, form = "" }) {
   const current = [...container.children];
   const submits = current.length === values.length && current.every(
@@ -41,7 +156,6 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/interactive_host.ts
 var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
 function isInteractiveHost(element) {
   if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
@@ -58,27 +172,36 @@ function isInteractiveHost(element) {
   return false;
 }
 
-// src/utils/microtask_coalescer.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 var MicrotaskCoalescer = class {
   #run;
   #queued = false;
   #active = false;
   #generation = 0;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
   constructor(run) {
     this.#run = run;
   }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
   activate() {
     this.#active = true;
   }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
   cancel() {
     this.#active = false;
     this.#queued = false;
     this.#generation += 1;
   }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -91,12 +214,51 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/controllers/data_grid_controller.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 var SORT_CYCLE = ["none", "ascending", "descending"];
 var OBSERVED_ATTRIBUTES = ["aria-selected", "data-value"];
-function setAttributeIfChanged(element, name, value) {
-  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
-}
 function sameSelection(a, b) {
   if (a.size !== b.size) return false;
   for (const [row, value] of a) {
@@ -110,6 +272,9 @@ function nextSortDirection(current) {
   return SORT_CYCLE[(from + 1) % SORT_CYCLE.length] ?? "ascending";
 }
 var DataGridController = class extends Controller {
+  #moves = new MoveCounter();
+  #connectionGeneration = 0;
+  #stopHolder = null;
   static targets = ["columnHeader", "row", "cell", "fields"];
   static values = {
     selection: { type: String, default: "none" },
@@ -118,164 +283,93 @@ var DataGridController = class extends Controller {
   };
   static actions = ["onKeydown", "sort", "toggleSelect"];
   static events = ["selectionchange", "sort", "reconcile"];
-  /**
-   * Collapses the target callbacks, Value changes and observed row writes of one
-   * DOM mutation into a single pass, and refuses to run before `connect()` or
-   * after `disconnect()`.
-   *
-   * Stimulus reports every target one at a time, so an ungated pass would re-walk
-   * the whole grid once per authored cell on mount and once per streamed cell
-   * afterwards — quadratic in the cell count both times.
-   */
-  #reconcile = new MicrotaskCoalescer(() => this.#reconcileRows());
-  /** Watches the row attributes a page can rewrite in place; set while connected. */
-  #observer = null;
-  /** The selection last settled: on connect, by the user, or by a reported pass. */
+  #reconcile = new MorphRenderWatcher(() => this.#reconcileRows());
+  #observer = new AuthoredMutationWatcher((records) => {
+    if (this.#concernsRows(records)) this.#reconcile.schedule();
+  });
   #settled = /* @__PURE__ */ new Map();
-  /**
-   * Establishes a single tab stop across all navigable cells/headers, brings the
-   * rows to their baseline, and settles the selection without reporting it.
-   *
-   * The whole baseline runs here rather than in the Value callbacks: Stimulus
-   * delivers those before `connect()`, where the pass is refused, and a
-   * re-attached element reuses its cached context, whose value observer does not
-   * fire again.
-   */
   connect() {
     this.#restoreBaseline();
     this.#settled = this.#selection();
-    this.#reconcile.activate();
+    this.#reconcile.observe(this.element);
     this.#observeRows();
   }
-  /** Releases the row observer and drops a queued pass, so neither outlives the element. */
   disconnect() {
-    this.#reconcile.cancel();
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#connectionGeneration += 1;
+    this.#reconcile.disconnect();
+    this.#observer.disconnect();
   }
-  /**
-   * Rebuilds the DOM-owned baselines from the live grid: exactly one navigable
-   * cell is in the Tab sequence, `aria-multiselectable` follows `selection`, every
-   * selectable row carries an explicit `aria-selected`, and the fields mirror the
-   * selected rows.
-   *
-   * The tab stop keeps whichever cell already holds it, so a rebuild triggered by
-   * an unrelated row arriving does not throw the user's position away; only when
-   * no cell holds it — the grid is fresh, or the holder was removed — does the
-   * first navigable cell take over. Without that fallback a grid whose active row
-   * is removed keeps every cell at `-1` and drops out of the Tab sequence
-   * entirely.
-   */
   #restoreBaseline() {
     const cells = this.#navigableCells();
-    const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
+    const holder = this.#stopHolder;
+    const kept = holder !== null && holder.tabIndex === 0 && cells.includes(holder);
+    const active = (kept ? holder : cells.find((cell) => cell.tabIndex === 0)) ?? cells[0];
     if (active) this.#setActiveCell(active, { focus: false }, cells);
     this.#syncSelectable();
     const pageWrote = this.#takePageRecords();
     this.#normalizeSelection();
-    this.#dropOwnRecords(pageWrote);
+    this.#flushMutations(pageWrote);
     this.#mirrorFields(false);
   }
-  /**
-   * The pass the page's changes run: the baselines are rebuilt, then a selection
-   * that moved is reported. The report comes last, so rows a subscriber rewrites
-   * are the next pass's to settle.
-   */
   #reconcileRows() {
     this.#restoreBaseline();
     this.#reportMove();
   }
-  /**
-   * Reports the selection as `reconcile` when it differs from the one last
-   * settled. The settled selection is replaced before dispatching, so a move a
-   * subscriber makes is measured against what it was told.
-   */
   #reportMove() {
     const selection = this.#selection();
     if (sameSelection(selection, this.#settled)) return;
     this.#settled = selection;
     this.dispatch("reconcile", { detail: { rows: [...selection.keys()] } });
   }
-  /**
-   * Re-renders `aria-multiselectable`, the rows and the fields when application
-   * code (or a Turbo morph) changes `selection` at runtime; a selection the new
-   * mode collapses is reported as `reconcile`.
-   */
   selectionValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Rebuilds the submitted fields when the public name changes at runtime. */
   nameValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Repoints the submitted fields when the owning form changes at runtime. */
   formValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Seeds a fields container inserted after connect from the current selection. */
   fieldsTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the baselines for a row added after connect. */
+  fieldsTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
   rowTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Settles the selection again when a row leaves the grid or drops its target token. */
   rowTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a cell joins the grid after connect. */
   cellTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a cell leaves the grid. */
   cellTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a header joins the grid after connect. */
   columnHeaderTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a header leaves the grid. */
   columnHeaderTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /**
-   * Brings the authored rows to the shape the APG requires, without changing
-   * which rows the author chose.
-   *
-   * Every selectable row gets an explicit value — an absent `aria-selected` means
-   * "not selectable" in ARIA, so a forgotten attribute hides a selectable row —
-   * and a single-select grid keeps at most one `true`, first in DOM order.
-   * A grid that declares `selection="none"` has no selectable rows, so the
-   * attribute is removed rather than written: in ARIA its absence is what "not
-   * selectable" looks like.
-   *
-   * @stimeoRenderRoot
-   */
   #normalizeSelection() {
     const rows = this.rowTargets;
     if (this.selectionValue === "none") {
-      for (const row of rows) row.removeAttribute("aria-selected");
+      for (const row of rows) this.#writeSelection(row, null);
       return;
     }
     const single = this.selectionValue === "single";
     const first = rows.find((row) => row.getAttribute("aria-selected") === "true");
     for (const row of rows) {
       if (single) {
-        setAttributeIfChanged(row, "aria-selected", row === first ? "true" : "false");
+        this.#writeSelection(row, row === first ? "true" : "false");
       } else if (row.getAttribute("aria-selected") !== "true") {
-        setAttributeIfChanged(row, "aria-selected", "false");
+        this.#writeSelection(row, "false");
       }
     }
   }
-  /**
-   * Mirrors `selection="multiple"` onto `aria-multiselectable` (APG Grid) so SRs
-   * announce that more than one row can be selected; cleared for single/none so a
-   * grid never carries a misleading attribute.
-   *
-   * @stimeoRenderRoot
-   */
   #syncSelectable() {
     if (this.selectionValue === "multiple") {
       setAttributeIfChanged(this.element, "aria-multiselectable", "true");
@@ -283,34 +377,39 @@ var DataGridController = class extends Controller {
       this.element.removeAttribute("aria-multiselectable");
     }
   }
-  /** Cycles the activated column header's sort and emits `sort`. */
-  sort(event) {
-    const header = event.currentTarget;
-    if (!this.columnHeaderTargets.includes(header)) return;
-    if (event.defaultPrevented) return;
-    const control = this.#claimingControl(event, header);
+  sort(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    const header = host?.closest(targetSelector(this.identifier, "columnHeader"));
+    if (!header || !this.columnHeaderTargets.includes(header)) return;
+    if (event?.defaultPrevented) return;
+    const control = event ? this.#claimingControl(event, header) : null;
     if (control && !(control instanceof HTMLButtonElement)) return;
     const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
     for (const other of this.columnHeaderTargets) {
       other.setAttribute("aria-sort", other === header ? direction : "none");
     }
     this.#setActiveCell(header, { focus: false });
-    this.dispatch("sort", { detail: { column: header, direction } });
+    this.dispatch("sort", { detail: { column: header, direction, reason } });
   }
-  /** Toggles selection of the row owning the event target. Bound optionally. */
-  toggleSelect(event) {
+  toggleSelect(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
     if (this.selectionValue === "none") return;
-    if (event.defaultPrevented) return;
-    const host = event.currentTarget;
-    if (this.#claimedByDescendant(event, host)) return;
-    const row = host.closest("[role='row']");
-    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+    if (event?.defaultPrevented) return;
+    if (event && host instanceof HTMLElement && this.#claimedByDescendant(event, host)) return;
+    const row = host?.closest(targetSelector(this.identifier, "row"));
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row, reason);
   }
-  /** Grid navigation + sort/select activation. Bound to cells and headers. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
     if (event.isComposing) return;
+    if ((event.key === "Home" || event.key === "End") && (event.altKey || event.metaKey || event.shiftKey)) {
+      return;
+    }
     const cell = event.currentTarget;
     if (this.#claimedByDescendant(event, cell)) return;
     const matrix = this.#matrix();
@@ -351,38 +450,15 @@ var DataGridController = class extends Controller {
       this.#setActiveCell(target, { focus: true }, matrix.flat());
     }
   }
-  /**
-   * Whether the event was addressed to a control inside `host` rather than to the
-   * grid.
-   *
-   * Cells and headers hold consumer markup, and APG's grid pattern expects that
-   * markup to include working controls — a row action button, an inline editor.
-   * Those own their own keystrokes and clicks, so the grid stands down entirely
-   * rather than acting in parallel. An editable host (its `contenteditable` state
-   * is inherited, so the walk is explicit) counts the same way.
-   */
   #claimedByDescendant(event, host) {
     return this.#claimingControl(event, host) !== null;
   }
-  /**
-   * The nested control this event belongs to, or `null` when the host owns it.
-   *
-   * Naming the control, rather than answering yes or no, is what lets the click
-   * path treat a sortable header's `<button>` as the activation it is while every
-   * other control still takes the event away.
-   */
   #claimingControl(event, host) {
     const source = event.target;
     const control = source.closest(INTERACTIVE_HOST_SELECTOR);
     if (control && host.contains(control)) return control;
     return isInteractiveHost(source) ? source : null;
   }
-  /**
-   * Performs a header's sort or a cell row's selection toggle on activation.
-   *
-   * @stimeoRuntimeOnly `selection` decides whether this one activation toggles the row; the sort it
-   *   cycles does not depend on it.
-   */
   #activate(cell) {
     if (this.columnHeaderTargets.includes(cell)) {
       this.#cycleSort(cell);
@@ -392,90 +468,59 @@ var DataGridController = class extends Controller {
     const row = cell.closest("[role='row']");
     if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
   }
-  /** Cycles a header's sort on keyboard activation and emits `sort`. */
   #cycleSort(header) {
     const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
     for (const other of this.columnHeaderTargets) {
       other.setAttribute("aria-sort", other === header ? direction : "none");
     }
-    this.dispatch("sort", { detail: { column: header, direction } });
-  }
-  /**
-   * Toggles a row's `aria-selected`, honoring single vs. multiple selection.
-   *
-   * @stimeoRuntimeOnly `selection` decides how this one toggle treats the other rows.
-   */
-  #toggleRow(row) {
+    this.dispatch("sort", { detail: { column: header, direction, reason: "user" } });
+  }
+  #toggleRow(row, reason = "user") {
+    const generation = this.#connectionGeneration;
     const selected = row.getAttribute("aria-selected") === "true";
     const pageWrote = this.#takePageRecords();
     if (this.selectionValue === "single") {
       for (const other of this.rowTargets) {
-        if (other !== row) setAttributeIfChanged(other, "aria-selected", "false");
+        if (other !== row) this.#writeSelection(other, "false");
       }
     }
-    row.setAttribute("aria-selected", selected ? "false" : "true");
-    this.#dropOwnRecords(pageWrote);
-    this.#settled = this.#selection();
+    this.#writeSelection(row, selected ? "false" : "true");
+    this.#flushMutations(pageWrote);
+    const selection = this.#selection();
+    const changed = !sameSelection(selection, this.#settled);
+    this.#settled = selection;
+    if (!changed) {
+      this.#mirrorFields(false);
+      return;
+    }
+    const token = this.#moves.record();
     this.#mirrorFields(true);
-    this.dispatch("selectionchange", { detail: { rows: [...this.#settled.keys()] } });
+    if (generation !== this.#connectionGeneration || !this.#moves.isLatest(token)) return;
+    this.dispatch("selectionchange", { detail: { rows: [...selection.keys()], reason } });
   }
-  /** The selected rows in DOM order, each with the `data-value` it submits, if any. */
   #selection() {
     return new Map(
       this.rowTargets.filter((row) => row.getAttribute("aria-selected") === "true").map((row) => [row, row.dataset.value])
     );
   }
-  /**
-   * Watches the rows' `aria-selected` and `data-value`. Every write the grid makes
-   * to them sits between a take and a drop of the observer's queue, so each record
-   * the callback receives is the page's, and only a record on one of the grid's own
-   * rows schedules a pass.
-   */
   #observeRows() {
-    const observer = new MutationObserver((records) => {
-      if (this.#concernsRows(records)) this.#reconcile.schedule();
-    });
-    observer.observe(this.element, {
+    this.#observer.observe(this.element, {
       subtree: true,
-      attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributes: OBSERVED_ATTRIBUTES
     });
-    this.#observer = observer;
   }
-  /**
-   * Empties the observer's queue before the grid writes to the rows, and says
-   * whether the page had queued anything about them. Those records still owe a
-   * pass: a toggle in `multiple` mode rewrites only its own row, so it does not fold
-   * in what the page wrote to the others.
-   */
   #takePageRecords() {
-    const records = this.#observer?.takeRecords() ?? [];
+    const records = this.#observer.take();
     return records.length > 0 && this.#concernsRows(records);
   }
-  /**
-   * Whether any record is about one of this grid's own rows. A widget nested in a
-   * cell writes the same attributes on its own elements, and those are no reason
-   * to reconcile the grid.
-   */
   #concernsRows(records) {
     const rows = new Set(this.rowTargets);
     return records.some((record) => rows.has(record.target));
   }
-  /**
-   * Drops the records the grid's own writes just queued, so the observer never
-   * takes them for the page's, then schedules the pass the page's records owe.
-   */
-  #dropOwnRecords(pageWrote) {
-    this.#observer?.takeRecords();
-    if (pageWrote) this.#reconcile.schedule();
-  }
-  /**
-   * Mirrors the selected rows' `data-value` into the optional fields container.
-   * A selected row without one submits nothing, so a grid whose rows carry no
-   * value submits an empty set rather than a row of blanks.
-   *
-   * @stimeoRenderRoot
-   */
+  #flushMutations(pageWrote) {
+    const authored = this.#concernsRows(this.#observer.take());
+    if (pageWrote || authored) this.#reconcile.schedule();
+  }
   #mirrorFields(notify) {
     if (!this.hasFieldsTarget) return;
     const values = this.rowTargets.filter((row) => row.getAttribute("aria-selected") === "true").map((row) => row.dataset.value).filter((value) => value !== void 0);
@@ -484,30 +529,17 @@ var DataGridController = class extends Controller {
       commitField(this.fieldsTarget);
     }
   }
-  /**
-   * Makes `cell` the single tabbable cell (roving) and optionally focuses it.
-   *
-   * `cells` lets a caller that already walked the grid hand its collection over,
-   * so one keystroke rebuilds the matrix once instead of twice. The write is
-   * skipped where the attribute already holds the wanted value — comparing the
-   * attribute rather than the IDL property, because a cell with no `tabindex` at
-   * all reports `-1` and would then never receive the attribute it needs to be
-   * focusable.
-   */
   #setActiveCell(cell, { focus }, cells) {
+    this.#stopHolder = cell;
     for (const candidate of cells ?? this.#navigableCells()) {
       const wanted = candidate === cell ? "0" : "-1";
-      if (candidate.getAttribute("tabindex") !== wanted) {
-        candidate.setAttribute("tabindex", wanted);
-      }
+      setAttributeIfChanged(candidate, "tabindex", wanted);
     }
     if (focus) cell.focus();
   }
-  /** All navigable elements (headers + cells) in DOM order. */
   #navigableCells() {
     return this.#matrix().flat();
   }
-  /** The grid as rows of navigable cells, derived from each `role="row"`. */
   #matrix() {
     const navigable = /* @__PURE__ */ new Set([...this.columnHeaderTargets, ...this.cellTargets]);
     const rows = Array.from(this.element.querySelectorAll("[role='row']"));
@@ -517,7 +549,6 @@ var DataGridController = class extends Controller {
       )
     ).filter((cells) => cells.length > 0);
   }
-  /** Finds `[rowIndex, colIndex]` of `cell` within `matrix`, or null. */
   #locate(matrix, cell) {
     for (let row = 0; row < matrix.length; row++) {
       const col = (matrix[row] ?? []).indexOf(cell);
@@ -525,14 +556,17 @@ var DataGridController = class extends Controller {
     }
     return null;
   }
-  /** The cell at `[row, col]`, clamping `col` to that row's last cell. */
   #cellInRow(matrix, row, col) {
     const cells = matrix[row];
     if (!cells || cells.length === 0) return void 0;
     return cells[Math.min(col, cells.length - 1)];
   }
+  #writeSelection(target, value) {
+    setAttributeIfChanged(target, "aria-selected", value, () => {
+      this.#observer.claim(target, "aria-selected", value);
+    });
+  }
 };
 
 export { DataGridController };
-//# sourceMappingURL=data_grid_controller.js.map
 //# sourceMappingURL=data_grid_controller.js.map