@rozie-ui/data-table-lit 0.1.0 → 0.2.0

package/README.md

@@ -8,7 +8,7 @@ Idiomatic **lit** `DataTable` — a headless, fully-accessible (WAI-ARIA) data t
 npm i @rozie-ui/data-table-lit
 ```
 
-Peer dependencies: `lit + @lit/context + @lit-labs/preact-signals + @preact/signals-core + @tanstack/table-core + @tanstack/virtual-core + @floating-ui/dom`. Install them alongside this package.
+Peer dependencies: `lit + @lit/context + @lit-labs/preact-signals + @preact/signals-core + @tanstack/table-core + @tanstack/virtual-core + @rozie-ui/popover-lit`. Install them alongside this package.
 
 ## Usage
 
@@ -494,5 +494,5 @@ The `detail` (expandable rows), `groupBar` (grouping) and `filter` (faceted filt
 | filter | columnId, value, uniqueValues, minMax, setFilter |
 | selectCell | row, checked, toggle |
 | cell | columnId, column, row, value |
-| editor | columnId, column, row, value, commit, cancel |
+| editor | columnId, column, row, value, commit, cancel, autofocus |
 | detail | row |

package/dist/index.cjs

@@ -8,6 +8,7 @@ let _lit_labs_preact_signals = require("@lit-labs/preact-signals");
 let _rozie_runtime_lit = require("@rozie/runtime-lit");
 let _lit_context = require("@lit/context");
 let lit_directives_repeat_js = require("lit/directives/repeat.js");
+require("@rozie-ui/popover-lit");
 let _tanstack_table_core = require("@tanstack/table-core");
 let _tanstack_virtual_core = require("@tanstack/virtual-core");
 //#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
@@ -175,6 +176,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this._draftValue = (0, _lit_labs_preact_signals.signal)(null);
 		this._invalidMsg = (0, _lit_labs_preact_signals.signal)("");
 		this._editVer = (0, _lit_labs_preact_signals.signal)(0);
+		this._editFocusColId = (0, _lit_labs_preact_signals.signal)(null);
 		this._editingRowIndex = (0, _lit_labs_preact_signals.signal)(null);
 		this._rowDraft = (0, _lit_labs_preact_signals.signal)({});
 		this._rangeAnchor = (0, _lit_labs_preact_signals.signal)(null);
@@ -1054,8 +1056,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			const base = this.pinStyle(colId);
 			if (this.isExpanderColumn(colId) && row && row.depth) {
 				const pad = "padding-left:" + (.5 + row.depth * 1.25) + "rem";
-				const sep = base.endsWith(";") ? "" : ";";
-				return base ? base + sep + pad : pad;
+				return base ? base + pad : pad;
 			}
 			return base;
 		};
@@ -2476,6 +2477,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		};
 		this.focusEditorWhenReady = (selectAll = true) => {
 			if (!this.gridRoot) return;
+			if (this._editFocusColId.value != null && this.hasEditorSlot(this._editFocusColId.value)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const el = this.gridRoot ? this.gridRoot.querySelector("[data-editing-cell]") : null;
@@ -2526,6 +2528,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = colId;
 			this.focusEditorWhenReady(seed == null);
 		};
 		this.focusCellWhenReady = (row, col) => {
@@ -2562,6 +2565,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
 		};
 		this.endRowEdit = () => {
 			this._editingRowIndex.value = null;
@@ -2569,6 +2573,14 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
+		};
+		this.editorAutofocusFor = (colId, rowIndex) => {
+			if (this._editVer.value < 0) return false;
+			if (this._editingRowIndex.value != null) {
+				if (this._editingRowIndex.value !== rowIndex) return false;
+			} else if (this._editingRow.value !== rowIndex) return false;
+			return this._editFocusColId.value != null && this._editFocusColId.value === colId;
 		};
 		this.coerceCellValue = (colId, raw) => {
 			if (this.editorTypeOf(colId) !== "number") return raw;
@@ -2697,6 +2709,8 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		};
 		this.focusRowEditorAt = (rowIndex, colIndex) => {
 			if (!this.gridRoot) return;
+			const colId = this.columnIdAt(rowIndex, colIndex);
+			if (colId != null && this.hasEditorSlot(colId)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const cellEl = this.resolveCellEl(String(rowIndex), colIndex);
@@ -2737,6 +2751,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._editingRowIndex.value = rowIndex;
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = editable[0].colId;
 			this.focusEditorWhenReady();
 		};
 		this.commitRow = () => {
@@ -2756,6 +2771,8 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 				const err = this.runValidator(ec.colId, this.coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
 				if (err !== true) {
 					this.setInvalid(err);
+					this._editFocusColId.value = ec.colId;
+					this._editVer.value = this._editVer.value + 1;
 					this.focusRowEditorAt(rowIndex, ec.colIndex);
 					return false;
 				}
@@ -2925,6 +2942,8 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			if (pos < 0) pos = 0;
 			const len = cols.length;
 			const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+			this._editFocusColId.value = editable[nextPos].colId;
+			this._editVer.value = this._editVer.value + 1;
 			this.focusRowEditorAt(rowIndex, cols[nextPos]);
 		};
 		this.onEditorKeyDown = (e) => {
@@ -4023,7 +4042,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			row: wr.row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 		}) : lit.html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4032,7 +4052,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					row: wr.row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 				});
 			} catch {
 				return "{}";
@@ -4314,7 +4335,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			row: row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 		}) : lit.html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4323,7 +4345,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					row: row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 				});
 			} catch {
 				return "{}";
@@ -4796,7 +4819,9 @@ let EditorText = class EditorText extends (0, _lit_labs_preact_signals.SignalWat
 		this.value = null;
 		this.commit = null;
 		this.cancel = null;
+		this.autofocus = false;
 		this._draft = (0, _lit_labs_preact_signals.signal)("");
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.onInput = (e) => {
@@ -4828,6 +4853,13 @@ let EditorText = class EditorText extends (0, _lit_labs_preact_signals.SignalWat
 	}
 	firstUpdated() {
 		this._draft.value = this.value != null ? String(this.value) : "";
+		if (this.autofocus) this._refInputEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refInputEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -4846,7 +4878,7 @@ let EditorText = class EditorText extends (0, _lit_labs_preact_signals.SignalWat
 			this.onKeydown($event);
 		}} @blur=${($event) => {
 			this.onBlur();
-		}} data-rozie-s-0d17f43a />
+		}} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
 `;
 	}
 };
@@ -4859,6 +4891,11 @@ __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorText.proto
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorText.prototype, "value", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Function })], EditorText.prototype, "commit", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Function })], EditorText.prototype, "cancel", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Boolean,
+	reflect: true
+})], EditorText.prototype, "autofocus", void 0);
+__decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([(0, lit_decorators_js.customElement)("rozie-editor-text")], EditorText);
 var EditorText_default = EditorText;
 //#endregion

package/dist/index.d.cts

@@ -1,6 +1,5 @@
 import * as _$lit from "lit";
 import { LitElement } from "lit";
-
 //#region src/DataTable.d.ts
 declare const DataTable_base: typeof LitElement;
 declare class DataTable extends DataTable_base {
@@ -159,6 +158,7 @@ declare class DataTable extends DataTable_base {
   private _draftValue;
   private _invalidMsg;
   private _editVer;
+  private _editFocusColId;
   private _editingRowIndex;
   private _rowDraft;
   private _rangeAnchor;
@@ -226,6 +226,7 @@ declare class DataTable extends DataTable_base {
     value: unknown;
     commit: unknown;
     cancel: unknown;
+    autofocus: unknown;
   }) => unknown;
   private _hasSlotDetail;
   private _slotDetailElements;
@@ -581,6 +582,7 @@ declare class DataTable extends DataTable_base {
   indexOfRowIn: (rows: any, rowOriginal: any, rowId: any) => number;
   endEdit: () => void;
   endRowEdit: () => void;
+  editorAutofocusFor: (colId: any, rowIndex: any) => boolean;
   coerceCellValue: (colId: any, raw: any) => any;
   commitEdit: (overrideValue?: any, skipFocusReturn?: boolean) => boolean;
   toggleActiveBooleanCell: () => void;
@@ -778,10 +780,17 @@ declare class EditorText extends EditorText_base {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   cancel: ((...args: unknown[]) => unknown) | null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus: boolean;
   private _draft;
+  private _refInputEl;
+  private __rozieFirstUpdateDone;
   private _disconnectCleanups;
   private _rozieTornDown;
   firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
   render(): _$lit.TemplateResult<1>;
   onInput: (e: any) => void;

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import * as _$lit from "lit";
 import { LitElement } from "lit";
-
 //#region src/DataTable.d.ts
 declare const DataTable_base: typeof LitElement;
 declare class DataTable extends DataTable_base {
@@ -159,6 +158,7 @@ declare class DataTable extends DataTable_base {
   private _draftValue;
   private _invalidMsg;
   private _editVer;
+  private _editFocusColId;
   private _editingRowIndex;
   private _rowDraft;
   private _rangeAnchor;
@@ -226,6 +226,7 @@ declare class DataTable extends DataTable_base {
     value: unknown;
     commit: unknown;
     cancel: unknown;
+    autofocus: unknown;
   }) => unknown;
   private _hasSlotDetail;
   private _slotDetailElements;
@@ -581,6 +582,7 @@ declare class DataTable extends DataTable_base {
   indexOfRowIn: (rows: any, rowOriginal: any, rowId: any) => number;
   endEdit: () => void;
   endRowEdit: () => void;
+  editorAutofocusFor: (colId: any, rowIndex: any) => boolean;
   coerceCellValue: (colId: any, raw: any) => any;
   commitEdit: (overrideValue?: any, skipFocusReturn?: boolean) => boolean;
   toggleActiveBooleanCell: () => void;
@@ -778,10 +780,17 @@ declare class EditorText extends EditorText_base {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   cancel: ((...args: unknown[]) => unknown) | null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus: boolean;
   private _draft;
+  private _refInputEl;
+  private __rozieFirstUpdateDone;
   private _disconnectCleanups;
   private _rozieTornDown;
   firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
   render(): _$lit.TemplateResult<1>;
   onInput: (e: any) => void;

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { SignalWatcher, effect, signal, untracked } from "@lit-labs/preact-signa
 import { createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from "@rozie/runtime-lit";
 import { ContextConsumer, ContextProvider, createContext } from "@lit/context";
 import { repeat } from "lit/directives/repeat.js";
+import "@rozie-ui/popover-lit";
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";
 import { Virtualizer, elementScroll, measureElement, observeElementOffset, observeElementRect } from "@tanstack/virtual-core";
 //#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
@@ -171,6 +172,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._draftValue = signal(null);
 		this._invalidMsg = signal("");
 		this._editVer = signal(0);
+		this._editFocusColId = signal(null);
 		this._editingRowIndex = signal(null);
 		this._rowDraft = signal({});
 		this._rangeAnchor = signal(null);
@@ -1050,8 +1052,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const base = this.pinStyle(colId);
 			if (this.isExpanderColumn(colId) && row && row.depth) {
 				const pad = "padding-left:" + (.5 + row.depth * 1.25) + "rem";
-				const sep = base.endsWith(";") ? "" : ";";
-				return base ? base + sep + pad : pad;
+				return base ? base + pad : pad;
 			}
 			return base;
 		};
@@ -2472,6 +2473,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.focusEditorWhenReady = (selectAll = true) => {
 			if (!this.gridRoot) return;
+			if (this._editFocusColId.value != null && this.hasEditorSlot(this._editFocusColId.value)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const el = this.gridRoot ? this.gridRoot.querySelector("[data-editing-cell]") : null;
@@ -2522,6 +2524,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = colId;
 			this.focusEditorWhenReady(seed == null);
 		};
 		this.focusCellWhenReady = (row, col) => {
@@ -2558,6 +2561,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
 		};
 		this.endRowEdit = () => {
 			this._editingRowIndex.value = null;
@@ -2565,6 +2569,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
+		};
+		this.editorAutofocusFor = (colId, rowIndex) => {
+			if (this._editVer.value < 0) return false;
+			if (this._editingRowIndex.value != null) {
+				if (this._editingRowIndex.value !== rowIndex) return false;
+			} else if (this._editingRow.value !== rowIndex) return false;
+			return this._editFocusColId.value != null && this._editFocusColId.value === colId;
 		};
 		this.coerceCellValue = (colId, raw) => {
 			if (this.editorTypeOf(colId) !== "number") return raw;
@@ -2693,6 +2705,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.focusRowEditorAt = (rowIndex, colIndex) => {
 			if (!this.gridRoot) return;
+			const colId = this.columnIdAt(rowIndex, colIndex);
+			if (colId != null && this.hasEditorSlot(colId)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const cellEl = this.resolveCellEl(String(rowIndex), colIndex);
@@ -2733,6 +2747,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._editingRowIndex.value = rowIndex;
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = editable[0].colId;
 			this.focusEditorWhenReady();
 		};
 		this.commitRow = () => {
@@ -2752,6 +2767,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				const err = this.runValidator(ec.colId, this.coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
 				if (err !== true) {
 					this.setInvalid(err);
+					this._editFocusColId.value = ec.colId;
+					this._editVer.value = this._editVer.value + 1;
 					this.focusRowEditorAt(rowIndex, ec.colIndex);
 					return false;
 				}
@@ -2921,6 +2938,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (pos < 0) pos = 0;
 			const len = cols.length;
 			const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+			this._editFocusColId.value = editable[nextPos].colId;
+			this._editVer.value = this._editVer.value + 1;
 			this.focusRowEditorAt(rowIndex, cols[nextPos]);
 		};
 		this.onEditorKeyDown = (e) => {
@@ -4019,7 +4038,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			row: wr.row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4028,7 +4048,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					row: wr.row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 				});
 			} catch {
 				return "{}";
@@ -4310,7 +4331,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			row: row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4319,7 +4341,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					row: row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 				});
 			} catch {
 				return "{}";
@@ -4792,7 +4815,9 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 		this.value = null;
 		this.commit = null;
 		this.cancel = null;
+		this.autofocus = false;
 		this._draft = signal("");
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.onInput = (e) => {
@@ -4824,6 +4849,13 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 	}
 	firstUpdated() {
 		this._draft.value = this.value != null ? String(this.value) : "";
+		if (this.autofocus) this._refInputEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refInputEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -4842,7 +4874,7 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 			this.onKeydown($event);
 		}} @blur=${($event) => {
 			this.onBlur();
-		}} data-rozie-s-0d17f43a />
+		}} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
 `;
 	}
 };
@@ -4855,6 +4887,11 @@ __decorate([property({ type: Object })], EditorText.prototype, "row", void 0);
 __decorate([property({ type: Object })], EditorText.prototype, "value", void 0);
 __decorate([property({ type: Function })], EditorText.prototype, "commit", void 0);
 __decorate([property({ type: Function })], EditorText.prototype, "cancel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], EditorText.prototype, "autofocus", void 0);
+__decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([customElement("rozie-editor-text")], EditorText);
 var EditorText_default = EditorText;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -45,7 +45,7 @@
     "src"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "0.1.3"
+    "@rozie/runtime-lit": "0.1.4"
   },
   "peerDependencies": {
     "lit": "^3.2",
@@ -54,7 +54,7 @@
     "@preact/signals-core": "^1.3.0",
     "@tanstack/table-core": "^8.21",
     "@tanstack/virtual-core": "^3",
-    "@floating-ui/dom": "^1.7.2"
+    "@rozie-ui/popover-lit": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "lit": {
@@ -75,19 +75,17 @@
     "@tanstack/virtual-core": {
       "optional": false
     },
-    "@floating-ui/dom": {
+    "@rozie-ui/popover-lit": {
       "optional": false
     }
   },
-  "devDependencies": {
-    "@floating-ui/dom": "^1.7.2"
-  },
+  "devDependencies": {},
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": [
-    "*.css",
-    "**/*.css"
+    "./dist/index.mjs",
+    "./dist/index.cjs"
   ],
   "scripts": {
     "build": "tsdown",

package/src/DataTable.ts

@@ -4,7 +4,7 @@ import { SignalWatcher, effect, signal, untracked } from '@lit-labs/preact-signa
 import { createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from '@rozie/runtime-lit';
 import { ContextProvider, createContext } from '@lit/context';
 import { repeat } from 'lit/directives/repeat.js';
-import './Popover';
+import '@rozie-ui/popover-lit';
 import { createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel,
 // Faceted filtering (phase 50 reqs 8-9, D-03). All three are supplied UNCONDITIONALLY
 // (mirrors the expand/group models) — inert until a consumer READS a column facet via the
@@ -87,6 +87,7 @@ interface RozieEditorSlotCtx {
   value: unknown;
   commit: unknown;
   cancel: unknown;
+  autofocus: unknown;
 }
 
 interface RozieDetailSlotCtx {
@@ -605,6 +606,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
   private _draftValue = signal<any>(null);
   private _invalidMsg = signal('');
   private _editVer = signal(0);
+  private _editFocusColId = signal<any>(null);
   private _editingRowIndex = signal<any>(null);
   private _rowDraft = signal<any>({});
   private _rangeAnchor = signal<any>(null);
@@ -656,7 +658,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   @property({ attribute: false }) cell?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown }) => unknown;
   @state() private _hasSlotEditor = false;
   @queryAssignedElements({ slot: 'editor', flatten: true }) private _slotEditorElements!: Element[];
-  @property({ attribute: false }) editor?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown; commit: unknown; cancel: unknown }) => unknown;
+  @property({ attribute: false }) editor?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown; commit: unknown; cancel: unknown; autofocus: unknown }) => unknown;
   @state() private _hasSlotDetail = false;
   @queryAssignedElements({ slot: 'detail', flatten: true }) private _slotDetailElements!: Element[];
   @property({ attribute: false }) detail?: (scope: { row: unknown }) => unknown;
@@ -1229,7 +1231,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(wr.row) + ')')}</span>
         </span>` : this.isEditing(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}); } catch { return '{}'; } })()}></slot>`}
+            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
             ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
@@ -1309,7 +1311,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(row) + ')')}</span>
         </span>` : this.isEditing(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}); } catch { return '{}'; } })()}></slot>`}
+            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
             ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
@@ -2513,15 +2515,9 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   bodyCellStyle = (row: any, colId: any) => {
   const base = this.pinStyle(colId);
   if (this.isExpanderColumn(colId) && row && row.depth) {
+    // Only the expander column indents (the tree affordance lives here).
     const pad = 'padding-left:' + (0.5 + row.depth * 1.25) + 'rem';
-    // pinStyle() already ends with ';', so append `pad` directly — inserting a
-    // second ';' produces a `;;` empty declaration. Browsers tolerate that in a
-    // raw style attribute (React/Vue/Svelte/Lit) and Solid's cssText path does
-    // too, but Angular's [style] binding parses the string via ɵɵstyleMap and
-    // DROPS the declaration following the empty one — so the depth padding-left
-    // silently vanished on Angular only. Emit a single, well-formed separator.
-    const sep = base.endsWith(';') ? '' : ';';
-    return base ? base + sep + pad : pad;
+    return base ? base + pad : pad;
   }
   return base;
 };
@@ -4507,6 +4503,9 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   focusEditorWhenReady = (selectAll = true) => {
   if (!this.gridRoot) return;
+  // Editor-owns-focus contract: when the CURRENT focus target is a #editor drop-in, the host
+  // does NOT reach into its DOM — the drop-in self-focuses via its own autofocus prop.
+  if (this._editFocusColId.value != null && this.hasEditorSlot(this._editFocusColId.value)) return;
   let attempts = 0;
   const tryFocus = () => {
     const el = this.gridRoot ? this.gridRoot.querySelector('[data-editing-cell]') : null;
@@ -4575,6 +4574,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
   this._activeInControl.value = true;
   this._editVer.value = this._editVer.value + 1;
+  // Editor-owns-focus contract (quick 260711-i5m): THIS cell's column is the current
+  // focus target — editorAutofocusFor derives the reactive `autofocus` #editor scope prop
+  // from it. Cleared on endEdit.
+  this._editFocusColId.value = colId;
   // B2: a seeded (type-to-edit) entry must NOT select-all — keep the caret after the
   // seeded char so subsequent typing appends instead of replacing it.
   this.focusEditorWhenReady(seed == null);
@@ -4614,6 +4617,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._invalidMsg.value = '';
   this._activeInControl.value = false;
   this._editVer.value = this._editVer.value + 1;
+  this._editFocusColId.value = null;
 };
 
   endRowEdit = () => {
@@ -4622,6 +4626,17 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._invalidMsg.value = '';
   this._activeInControl.value = false;
   this._editVer.value = this._editVer.value + 1;
+  this._editFocusColId.value = null;
+};
+
+  editorAutofocusFor = (colId: any, rowIndex: any) => {
+  if (this._editVer.value < 0) return false;
+  if (this._editingRowIndex.value != null) {
+    if (this._editingRowIndex.value !== rowIndex) return false;
+  } else {
+    if (this._editingRow.value !== rowIndex) return false;
+  }
+  return this._editFocusColId.value != null && this._editFocusColId.value === colId;
 };
 
   coerceCellValue = (colId: any, raw: any) => {
@@ -4811,6 +4826,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   focusRowEditorAt = (rowIndex: any, colIndex: any) => {
   if (!this.gridRoot) return;
+  const colId = this.columnIdAt(rowIndex, colIndex);
+  if (colId != null && this.hasEditorSlot(colId)) return;
   let attempts = 0;
   const tryFocus = () => {
     const cellEl = this.resolveCellEl(String(rowIndex), colIndex);
@@ -4856,6 +4873,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._editingRowIndex.value = rowIndex;
   this._activeInControl.value = true;
   this._editVer.value = this._editVer.value + 1;
+  // Editor-owns-focus contract (quick 260711-i5m): the row's FIRST editable column is the
+  // initial focus target — editorAutofocusFor derives the reactive `autofocus` #editor scope
+  // prop from it (a built-in column is also host-focused below via focusEditorWhenReady; a
+  // drop-in column self-focuses via its own $onMount, gated off the host reach-in in Task 3).
+  this._editFocusColId.value = editable[0].colId;
   this.focusEditorWhenReady();
 };
 
@@ -4883,9 +4905,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     const err = this.runValidator(ec.colId, this.coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
     if (err !== true) {
       this.setInvalid(err);
+      // Editor-owns-focus contract (quick 260711-i5m): the OFFENDING column becomes the new
+      // reactive focus target BEFORE the host-focus call below — a #editor drop-in already
+      // mounted (full-row edit opens every editable cell at once) picks this up via its own
+      // lazy $watch on the `autofocus` scope prop flipping false→true. Bump editVer so the
+      // coarse-render targets (React/Vue/Angular/Svelte) re-derive the slot binding (Solid's
+      // fine-grained accessor re-runs without the bump, but the bump keeps all 6 in lockstep).
+      this._editFocusColId.value = ec.colId;
+      this._editVer.value = this._editVer.value + 1;
       // B22: focus the OFFENDING column's editor (the one whose validator rejected), NOT
       // unconditionally the first editor (focusEditorWhenReady resolves the first
       // [data-editing-cell] in DOM order). ec.colIndex is the offending cell's visible col.
+      // Gated (Task 3) so a #editor drop-in self-focuses instead of a host DOM reach-in.
       this.focusRowEditorAt(rowIndex, ec.colIndex);
       return false;
     }
@@ -5108,6 +5139,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   if (pos < 0) pos = 0;
   const len = cols.length;
   const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+  // Editor-owns-focus contract (quick 260711-i5m): the Tab target becomes the new reactive
+  // focus target BEFORE the host-focus call below, so Tab onto an already-mounted #editor
+  // drop-in (row mode) also refocuses it via its own lazy $watch.
+  this._editFocusColId.value = editable[nextPos].colId;
+  this._editVer.value = this._editVer.value + 1;
   this.focusRowEditorAt(rowIndex, cols[nextPos]);
 };
 

package/src/EditorText.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { SignalWatcher, signal } from '@lit-labs/preact-signals';
 
 @customElement('rozie-editor-text')
@@ -32,7 +32,13 @@ export default class EditorText extends SignalWatcher(LitElement) {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   @property({ type: Function }) cancel: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  @property({ type: Boolean, reflect: true }) autofocus: boolean = false;
   private _draft = signal('');
+  @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;
+private __rozieFirstUpdateDone = false;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -46,6 +52,15 @@ export default class EditorText extends SignalWatcher(LitElement) {
 
     // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
     // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
+
+    if (this.autofocus) this._refInputEl?.focus();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('autofocus'))) { const __watchVal = (() => this.autofocus)(); ((v: any) => {
+      if (v) this._refInputEl?.focus();
+    })(__watchVal); }
+    this.__rozieFirstUpdateDone = true;
   }
 
   disconnectedCallback(): void {
@@ -60,7 +75,7 @@ export default class EditorText extends SignalWatcher(LitElement) {
 
   render() {
     return html`
-<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-s-0d17f43a />
+<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
 `;
   }
 

package/src/Popover.ts

@@ -1,446 +0,0 @@
-import { LitElement, css, html, nothing } from 'lit';
-import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
-import { SignalWatcher, effect, untracked } from '@lit-labs/preact-signals';
-import { attachOutsideClickListener, createLitControllableProperty, rozieAttr, rozieListeners, rozieSpread } from '@rozie/runtime-lit';
-// The `offset` AND `arrow` middleware factories are ALIASED on import: both are
-// ALSO author PROP names (`offset`, `arrow`). A bare `offset`/`arrow` shorthand in
-// the buildMiddleware factories object resolves to the PROP — on Vue/Svelte the
-// destructured prop local shadows the import, and on Angular the emitter rewrites
-// the bare shorthand to the prop signal (`offset: this.offset()`, a number) instead
-// of the middleware function (TS2322). Aliasing both severs the import↔prop clash.
-// (The Cropper import-name==component-name class, applied to imports vs PROP names —
-// two collisions, not one.) computePosition/autoUpdate/flip/shift carry no clash.
-import { computePosition, autoUpdate, offset as offsetMiddleware, flip, shift, arrow as arrowMiddleware } from '@floating-ui/dom';
-import { buildMiddleware } from './internal/middleware';
-
-// null-lets so the bundled-leaf typeNeutralize pass annotates them `any`:
-//   anchorNode/floatingNode/arrowNode hold the resolved ref ELEMENTS (read ONLY in
-//   $onMount/handlers, ROZ123). They are deliberately named DIFFERENTLY from the
-//   `ref="anchorEl"` / `ref="floatingEl"` / `ref="arrowEl"` template ref names: the
-//   React/Svelte emitters declare a `const anchorEl = useRef(...)` for the ref, and a
-//   top-level `let anchorEl` hoisted to its own `useRef` would REDECLARE it (TS2451 —
-//   the local-name==ref-name self-shadow class, here in its `let X = null; X = $refs.X`
-//   variant, which deconflictRefShadows does NOT auto-rewrite since it only fires on the
-//   `const X = $refs.X` init shape).
-//   stopAutoUpdate is the autoUpdate teardown handle — a TOP-LEVEL `let` so the Solid
-//   onMount→onCleanup split (teardown is a separate closure) can still see it.
-//   lastFocusedEl (phase 72-06b) holds whatever had DOM focus at the moment a
-//   `trigger="click"` popover opened (natively the clicked trigger element itself,
-//   since a mousedown focuses a native `<button>` before its `click` fires) —
-//   restored on dismissal so Escape/click-outside don't drop focus to `<body>`.
-//   Same null-let convention as the others: read/written only in handlers, `any`
-//   via typeNeutralize.
-
-interface RozieAnchorSlotCtx {
-  open: unknown;
-  toggle: unknown;
-  show: unknown;
-  hide: unknown;
-}
-
-@customElement('rozie-popover')
-export default class Popover extends SignalWatcher(LitElement) {
-  static styles = css`
-:host{display:contents}
-.rozie-popover[data-rozie-s-c6cf02ea] {
-  display: contents;
-}
-.rozie-popover-anchor[data-rozie-s-c6cf02ea] {
-  display: inline-block;
-}
-.rozie-popover-floating[data-rozie-s-c6cf02ea] {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: var(--rozie-popover-z, 1000);
-  width: max-content;
-  max-width: var(--rozie-popover-max-width, calc(100vw - 16px));
-  background: var(--rozie-popover-bg, #fff);
-  color: var(--rozie-popover-color, inherit);
-  border: var(--rozie-popover-border, 1px solid rgba(0, 0, 0, 0.12));
-  border-radius: var(--rozie-popover-radius, 8px);
-  box-shadow: var(--rozie-popover-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
-  padding: var(--rozie-popover-padding, 8px 12px);
-}
-.rozie-popover-arrow[data-rozie-s-c6cf02ea] {
-  position: absolute;
-  width: var(--rozie-popover-arrow-size, 8px);
-  height: var(--rozie-popover-arrow-size, 8px);
-  background: var(--rozie-popover-bg, #fff);
-  border: var(--rozie-popover-border, 1px solid rgba(0, 0, 0, 0.12));
-  transform: rotate(45deg);
-}
-`;
-
-  /**
-   * Whether the floating content is open. The sole `model: true` prop — two-way bind it (`r-model:open` / `v-model:open` / `bind:open` / `[(open)]`) and Popover writes the new state back whenever the trigger or a dismissal toggles it. Left unbound it falls back to an uncontrolled default.
-   */
-  @property({ type: Boolean, attribute: 'open' }) _open_attr: boolean = false;
-  private _openControllable = createLitControllableProperty<boolean>({ host: this, eventName: 'open-change', defaultValue: false, initialControlledValue: undefined });
-  /**
-   * Floating UI placement of the content relative to the anchor — one of `top`/`right`/`bottom`/`left`, each optionally suffixed `-start`/`-end` (e.g. `bottom-start`). With `disableFlip` off, the content may flip to the opposite side when it would overflow the viewport. Reconciled at runtime.
-   */
-  @property({ type: String, reflect: true }) placement: string = 'bottom';
-  /**
-   * How the anchor opens the content: `'click'` toggles on click, `'hover'` opens on pointer-enter and closes on pointer-leave (tooltip-style), `'focus'` opens on focus and closes on blur. Drives both the gesture handlers and the ARIA role (`'hover'`/`'focus'` → tooltip, `'click'` → popover dialog).
-   */
-  @property({ type: String, reflect: true }) trigger: string = 'click';
-  /**
-   * Distance in pixels between the anchor and the floating content (the Floating UI `offset` middleware). Reconciled at runtime.
-   */
-  @property({ type: Number, reflect: true }) offset: number = 8;
-  /**
-   * Disable the Floating UI `flip` middleware. By default the content flips to the opposite side of the anchor when it would overflow the viewport; set this to keep it pinned to `placement` regardless.
-   */
-  @property({ type: Boolean, reflect: true }) disableFlip: boolean = false;
-  /**
-   * Disable the Floating UI `shift` middleware. By default the content shifts along its axis to stay within the viewport; set this to keep it strictly aligned to the anchor.
-   */
-  @property({ type: Boolean, reflect: true }) disableShift: boolean = false;
-  /**
-   * Opt in to a positioned arrow element. When set, Popover renders an arrow `<div>` and runs the Floating UI `arrow` middleware against it so it points at the anchor. Style it via the `--rozie-popover-*` arrow CSS custom properties.
-   */
-  @property({ type: Boolean, reflect: true }) arrow: boolean = false;
-  /**
-   * Disable the control entirely: the trigger no longer opens the content and any open content is suppressed.
-   */
-  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
-  /**
-   * Opt in to modal dialog semantics for a `click` popover. **Off by default:** a click popover is a non-modal, click-outside-dismissable layer, so its panel is rendered role-neutral (the slot content owns its own ARIA role — e.g. a `role="menu"`) and carries NO `aria-modal`. Set `modal` for a genuinely modal dialog popover: the panel then gets `role="dialog"` + `aria-modal="true"`. **Note:** Popover ships no focus trap (it stays a minimal headless primitive); if you set `modal`, provide your own focus containment so the `aria-modal` claim holds. Ignored for `hover`/`focus` triggers (always tooltip-flavored).
-   */
-  @property({ type: Boolean, reflect: true }) modal: boolean = false;
-  /**
-   * Floating UI positioning strategy — 'absolute' (default) or 'fixed'. Use 'fixed' to escape a scrollable/overflow-clipping ancestor (e.g. a sticky table header). Reconciled at runtime.
-   */
-  @property({ type: String, reflect: true }) strategy: string = 'absolute';
-  @query('[data-rozie-ref="anchorEl"]') private _refAnchorEl!: HTMLElement;
-  @query('[data-rozie-ref="floatingEl"]') private _refFloatingEl!: HTMLElement;
-  @query('[data-rozie-ref="arrowEl"]') private _refArrowEl!: HTMLElement;
-private __rozieWatchInitial_0 = true;
-private __rozieFirstUpdateDone = false;
-
-  @state() private _hasSlotAnchor = false;
-  @queryAssignedElements({ slot: 'anchor', flatten: true }) private _slotAnchorElements!: Element[];
-  @property({ attribute: false }) anchor?: (scope: { open: unknown; toggle: unknown; show: unknown; hide: unknown }) => unknown;
-  @state() private _hasSlotDefault = false;
-  @queryAssignedElements({ flatten: true }) private _slotDefaultElements!: Element[];
-
-  private _disconnectCleanups: Array<() => void> = [];
-  // Re-parenting guard: set true once the deferred teardown has actually
-  // run (a genuine un-mount), so a subsequent reconnect knows to re-arm.
-  private _rozieTornDown = false;
-
-  private _armListeners(): void {
-    const _lh0 = ($event: KeyboardEvent) => { if (!(this.open)) return; if ($event.key !== 'Escape') return; ((this.dismiss) as (...args: any[]) => any)($event); };
-    document.addEventListener('keydown', _lh0, undefined);
-    this._disconnectCleanups.push(() => document.removeEventListener('keydown', _lh0, undefined));
-
-    const _u1 = attachOutsideClickListener([() => this._refAnchorEl, () => this._refFloatingEl], ($event) => {  ((this.dismiss) as (...args: any[]) => any)($event); }, () => (this.open));
-    this._disconnectCleanups.push(_u1);
-
-    {
-      const slotEl = this.shadowRoot?.querySelector('slot[name="anchor"]');
-      if (slotEl !== null && slotEl !== undefined) {
-        const update = () => { this._hasSlotAnchor = this._slotAnchorElements.length > 0; };
-        slotEl.addEventListener('slotchange', update);
-        // CR-05 fix: push cleanup so the listener is removed on disconnectedCallback.
-        this._disconnectCleanups.push(() => slotEl.removeEventListener('slotchange', update));
-        update();
-      }
-    }
-
-    {
-      const slotEl = this.shadowRoot?.querySelector('slot:not([name])');
-      if (slotEl !== null && slotEl !== undefined) {
-        const update = () => { this._hasSlotDefault = this._slotDefaultElements.length > 0; };
-        slotEl.addEventListener('slotchange', update);
-        // CR-05 fix: push cleanup so the listener is removed on disconnectedCallback.
-        this._disconnectCleanups.push(() => slotEl.removeEventListener('slotchange', update));
-        update();
-      }
-    }
-  }
-
-  connectedCallback(): void {
-    // Phase 07.3.1 D-LIT-15 — pre-seed _hasSlot<X> from light DOM so first render isn't deadlocked.
-    this._hasSlotAnchor = Array.from(this.children).some((el) => el.getAttribute('slot') === 'anchor');
-    this._hasSlotDefault = Array.from(this.children).some((el) => !el.hasAttribute('slot') && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
-    super.connectedCallback();
-    if (this.hasUpdated && this._rozieTornDown) { this._rozieTornDown = false; this._armListeners(); }
-  }
-
-  firstUpdated(): void {
-    this._armListeners();
-
-    this._disconnectCleanups.push((() => {
-      this.stopTracking();
-    }));
-
-    this._disconnectCleanups.push(effect(() => { const __watchVal = (() => this.open)(); untracked(() => { if (this.__rozieWatchInitial_0) { this.__rozieWatchInitial_0 = false; return; } ((isOpen: any) => {
-      if (isOpen && !this.disabled) {
-        queueMicrotask(() => {
-          if (!this.open || this.disabled) return;
-          this.floatingNode = this._refFloatingEl;
-          this.arrowNode = this._refArrowEl;
-          this.startTracking();
-        });
-      } else {
-        this.stopTracking();
-      }
-    })(__watchVal); }); }));
-
-    // $refs read ONLY here (ROZ123). The floating + arrow elements live behind r-if
-    // and may be null until open; startTracking re-reads via the watch path.
-    this.anchorNode = this._refAnchorEl;
-    if (this.open && !this.disabled) {
-      // floatingNode is populated by its r-if having rendered; read it lazily inside
-      // the watch/handlers too. Position on next tick when it exists.
-      this.floatingNode = this._refFloatingEl;
-      this.arrowNode = this._refArrowEl;
-      this.startTracking();
-    }
-  }
-
-  updated(changedProperties: Map<string, unknown>): void {
-    if (this.__rozieFirstUpdateDone && (changedProperties.has('placement'))) { const __watchVal = (() => this.placement)(); (() => {
-      if (this.open) this.position();
-    })(); }
-    if (this.__rozieFirstUpdateDone && (changedProperties.has('offset'))) { const __watchVal = (() => this.offset)(); (() => {
-      if (this.open) this.position();
-    })(); }
-    if (this.__rozieFirstUpdateDone && (changedProperties.has('disableFlip'))) { const __watchVal = (() => this.disableFlip)(); (() => {
-      if (this.open) this.position();
-    })(); }
-    if (this.__rozieFirstUpdateDone && (changedProperties.has('disableShift'))) { const __watchVal = (() => this.disableShift)(); (() => {
-      if (this.open) this.position();
-    })(); }
-    if (this.__rozieFirstUpdateDone && (changedProperties.has('strategy'))) { const __watchVal = (() => this.strategy)(); (() => {
-      if (this.open) this.position();
-    })(); }
-    this.__rozieFirstUpdateDone = true;
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    queueMicrotask(() => {
-      if (this.isConnected || this._rozieTornDown) return;
-      this._rozieTornDown = true;
-      for (const fn of this._disconnectCleanups) fn();
-      this._disconnectCleanups = [];
-    });
-  }
-
-  attributeChangedCallback(name: string, old: string | null, value: string | null): void {
-    super.attributeChangedCallback(name, old, value);
-    if (name === 'open') this._openControllable.notifyAttributeChange(value !== null);
-  }
-
-  render() {
-    return html`
-<div class="rozie-popover" ${rozieSpread(this.$attrs)} ${rozieListeners(this.$listeners)} data-rozie-s-c6cf02ea>
-
-  
-  <div class="rozie-popover-anchor" aria-haspopup="dialog" aria-expanded=${!!this.open} aria-describedby=${rozieAttr(this.isTooltip() && this.open ? 'rozie-popover-floating' : null)} @click=${($event: MouseEvent & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.trigger === 'click' && this.onAnchorClick(); }} @pointerenter=${($event: Event & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.trigger === 'hover' && this.onAnchorPointerEnter(); }} @pointerleave=${($event: Event & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.trigger === 'hover' && this.onAnchorPointerLeave(); }} @focusin=${($event: Event & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.trigger === 'focus' && this.onAnchorFocus(); }} @focusout=${($event: Event & { currentTarget: HTMLDivElement; target: HTMLDivElement }) => { this.trigger === 'focus' && this.onAnchorBlur(); }} data-rozie-ref="anchorEl" data-rozie-s-c6cf02ea>
-    ${this.anchor !== undefined ? this.anchor({open: this.open, toggle: this.toggle, show: this.show, hide: this.hide}) : html`<slot name="anchor" data-rozie-params=${(() => { try { return JSON.stringify({open: this.open}); } catch { return '{}'; } })()} @rozie-anchor-toggle=${($event: CustomEvent) => ((this.toggle) as (...args: any[]) => any)($event.detail)} @rozie-anchor-show=${($event: CustomEvent) => ((this.show) as (...args: any[]) => any)($event.detail)} @rozie-anchor-hide=${($event: CustomEvent) => ((this.hide) as (...args: any[]) => any)($event.detail)}></slot>`}
-  </div>
-
-  
-  ${this.open && !this.disabled ? html`<div class="rozie-popover-floating" id="rozie-popover-floating" role=${rozieAttr(this.floatingRole())} aria-modal=${!!(this.floatingRole() === 'dialog')} data-rozie-ref="floatingEl" data-rozie-s-c6cf02ea>
-    ${this.arrow ? html`<div class="rozie-popover-arrow" data-rozie-ref="arrowEl" data-rozie-s-c6cf02ea></div>` : nothing}<slot></slot>
-  </div>` : nothing}</div>
-`;
-  }
-
-  anchorNode: any = null;
-
-  floatingNode: any = null;
-
-  arrowNode: any = null;
-
-  stopAutoUpdate: any = null;
-
-  lastFocusedEl: any = null;
-
-  deepActiveElement = () => {
-  let el = document.activeElement;
-  while (el && el.shadowRoot && el.shadowRoot.activeElement) {
-    el = el.shadowRoot.activeElement;
-  }
-  return el;
-};
-
-  requestOpen = (next: any) => {
-  if (this.open === next) return;
-  if (next && this.trigger === 'click') {
-    this.lastFocusedEl = this.deepActiveElement();
-  }
-  this._openControllable.write(next);
-  this.dispatchEvent(new CustomEvent("change", {
-    detail: next,
-    bubbles: true,
-    composed: true
-  }));
-  if (!next && this.trigger === 'click' && this.lastFocusedEl && this.lastFocusedEl.isConnected && typeof this.lastFocusedEl.focus === 'function') {
-    this.lastFocusedEl.focus();
-  }
-  if (!next) {
-    this.lastFocusedEl = null;
-  }
-};
-
-  applyPosition = (x: any, y: any, middlewareData: any) => {
-  if (!this.floatingNode) return;
-  this.floatingNode.style.left = x + 'px';
-  this.floatingNode.style.top = y + 'px';
-  if (this.arrowNode && middlewareData && middlewareData.arrow) {
-    const ax = middlewareData.arrow.x;
-    const ay = middlewareData.arrow.y;
-    this.arrowNode.style.left = ax == null ? '' : ax + 'px';
-    this.arrowNode.style.top = ay == null ? '' : ay + 'px';
-  }
-};
-
-  position = () => {
-  if (!this.anchorNode || !this.floatingNode) return;
-  const middleware = buildMiddleware({
-    offset: offsetMiddleware,
-    flip,
-    shift,
-    arrow: arrowMiddleware
-  }, {
-    offset: this.offset,
-    disableFlip: this.disableFlip,
-    disableShift: this.disableShift,
-    arrow: this.arrow,
-    arrowEl: this.arrowNode
-  });
-  // 'fixed' inline position MUST be written before computePosition measures the
-  // floating element's offset parent (fixed vs absolute changes the containing
-  // block). Default 'absolute' explicitly CLEARS any inline position instead of
-  // writing `position: absolute` — so a never-fixed popover still writes no
-  // visible inline position (byte-identical-off preserved: `style.position = ''`
-  // is a no-op when the property was never set), while a live `strategy`
-  // reconcile (fixed → absolute, see the $watch below) correctly resets the
-  // stale inline `fixed` so the stylesheet's `position: absolute` rule re-takes
-  // over instead of positioning `fixed` with absolute-computed coordinates
-  // (72-REVIEW.md WR-01).
-  if (this.strategy === 'fixed') {
-    this.floatingNode.style.position = 'fixed';
-  } else {
-    this.floatingNode.style.position = '';
-  }
-  let opts: any = null;
-  opts = {
-    placement: this.placement,
-    strategy: this.strategy,
-    middleware
-  };
-  computePosition(this.anchorNode, this.floatingNode, opts).then((result: any) => {
-    this.applyPosition(result.x, result.y, result.middlewareData);
-  });
-};
-
-  startTracking = () => {
-  if (!this.anchorNode || !this.floatingNode) return;
-  if (this.stopAutoUpdate) {
-    this.stopAutoUpdate();
-    this.stopAutoUpdate = null;
-  }
-  this.stopAutoUpdate = autoUpdate(this.anchorNode, this.floatingNode, this.position);
-};
-
-  stopTracking = () => {
-  if (this.stopAutoUpdate) {
-    this.stopAutoUpdate();
-    this.stopAutoUpdate = null;
-  }
-};
-
-  onAnchorClick = () => {
-  if (this.disabled) return;
-  this.requestOpen(!this.open);
-};
-
-  onAnchorPointerEnter = () => {
-  if (this.disabled) return;
-  this.requestOpen(true);
-};
-
-  onAnchorPointerLeave = () => {
-  if (this.disabled) return;
-  this.requestOpen(false);
-};
-
-  onAnchorFocus = () => {
-  if (this.disabled) return;
-  this.requestOpen(true);
-};
-
-  onAnchorBlur = () => {
-  if (this.disabled) return;
-  this.requestOpen(false);
-};
-
-  dismiss = () => {
-  this.requestOpen(false);
-};
-
-  isTooltip = () => this.trigger === 'hover' || this.trigger === 'focus';
-
-  floatingRole = () => this.isTooltip() ? 'tooltip' : this.modal ? 'dialog' : undefined;
-
-  show() {
-    if (!this.disabled) this.requestOpen(true);
-  }
-
-  hide() {
-    this.requestOpen(false);
-  }
-
-  toggle() {
-    if (!this.disabled) this.requestOpen(!this.open);
-  }
-
-  reposition() {
-    this.position();
-  }
-
-  get open(): boolean { return this._openControllable.read(); }
-  set open(v: boolean) { this._openControllable.notifyPropertyWrite(v); }
-
-  /**
-   * Plan 14-05 — cross-framework attribute fallthrough source. Reads the
-   * host custom element's attributes on each call so a consumer-side bound
-   * attribute flows through on every render. The `rozieSpread` directive
-   * (D-02) does the cross-render diff downstream.
-   *
-   * Phase 15 follow-up Bug A — declared-prop attribute names are filtered
-   * out so `$attrs` returns "rest after declared props" (semantic parity
-   * with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
-   * forms are folded into the skip set: kebab-case for model props
-   * (explicit `attribute:`) AND lowercased property name (Lit's default).
-   */
-  private get $attrs(): Record<string, string> {
-    const __skip = new Set<string>(['open', 'placement', 'trigger', 'offset', 'disable-flip', 'disableflip', 'disable-shift', 'disableshift', 'arrow', 'disabled', 'modal', 'strategy']);
-    const out: Record<string, string> = {};
-    for (const a of Array.from(this.attributes)) {
-      if (__skip.has(a.name)) continue;
-      out[a.name] = a.value;
-    }
-    return out;
-  }
-
-  /**
-   * Phase 15 D-19 — consumer-passed listener cluster placeholder.
-   * Lit attaches event listeners directly on the host element via
-   * `addEventListener` (no per-instance prop rest binding), so the
-   * runtime value is undefined; the `rozieListeners` directive's
-   * nullish coercion (`obj ?? {}`) handles the no-op cleanly.
-   * The declaration exists to satisfy `tsc --noEmit` on consumer
-   * projects with strict mode — bare `$listeners` in `render()`
-   * would otherwise raise TS2304 (Cannot find name).
-   */
-  private get $listeners(): Record<string, EventListener> | undefined {
-    return undefined;
-  }
-}

package/src/internal/middleware.ts

@@ -1,54 +0,0 @@
-/**
- * middleware.ts — pure construction of the Floating UI middleware stack from the
- * Popover's first-class props.
- *
- * This is the one piece of BRANCHY engine glue in Popover.rozie (offset always on,
- * flip/shift opt-out via `disableFlip`/`disableShift`, arrow opt-in via `arrow` +
- * an element). Extracted to `src/internal/` so it can be unit-tested in isolation
- * (codegen vendors `src/internal/` into every leaf via copyInternal, excluding
- * `*.test.ts`).
- *
- * It takes the Floating UI middleware FACTORIES as arguments (rather than importing
- * `@floating-ui/dom` itself) so the unit test can pass lightweight stand-ins and
- * assert ORDER + presence without pulling the real engine — and so the vendored
- * copy in each leaf has zero engine import of its own (the leaf's Popover.* owns
- * the single engine import).
- *
- * Floating UI ordering contract: offset → flip → shift → arrow. `offset` first so
- * the gap is measured before collision detection; `arrow` last so it reads the
- * final resolved placement.
- */
-
-export interface MiddlewareFactories {
-  offset: (value: number) => unknown;
-  flip: () => unknown;
-  shift: () => unknown;
-  arrow: (opts: { element: Element }) => unknown;
-}
-
-export interface MiddlewareConfig {
-  offset: number;
-  disableFlip: boolean;
-  disableShift: boolean;
-  arrow: boolean;
-  arrowEl: Element | null;
-}
-
-/**
- * Build the ordered middleware array for `computePosition`. Pure — no engine
- * import, no DOM read beyond the passed-in arrow element.
- */
-export function buildMiddleware(
-  factories: MiddlewareFactories,
-  config: MiddlewareConfig,
-): unknown[] {
-  const mw: unknown[] = [factories.offset(config.offset)];
-  if (!config.disableFlip) mw.push(factories.flip());
-  if (!config.disableShift) mw.push(factories.shift());
-  // The arrow middleware needs a real element to position; opt-in only when both
-  // the `arrow` prop is set AND the arrow element has mounted.
-  if (config.arrow && config.arrowEl) {
-    mw.push(factories.arrow({ element: config.arrowEl }));
-  }
-  return mw;
-}