@rozie-ui/data-table-solid 0.1.1 → 0.2.0

package/README.md

@@ -8,7 +8,7 @@ Idiomatic **solid** `DataTable` — a headless, fully-accessible (WAI-ARIA) data
 npm i @rozie-ui/data-table-solid
 ```
 
-Peer dependencies: `solid-js + @tanstack/table-core + @tanstack/virtual-core + @floating-ui/dom`. Install them alongside this package.
+Peer dependencies: `solid-js + @tanstack/table-core + @tanstack/virtual-core + @rozie-ui/popover-solid`. Install them alongside this package.
 
 ## Usage
 

package/dist/index.cjs

@@ -2,286 +2,35 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
 let Solid_js = require("solid-js");
 let _solid_primitives_keyed = require("@solid-primitives/keyed");
 let _rozie_runtime_solid = require("@rozie/runtime-solid");
-let _floating_ui_dom = require("@floating-ui/dom");
+let _rozie_ui_popover_solid = require("@rozie-ui/popover-solid");
+_rozie_ui_popover_solid = __toESM(_rozie_ui_popover_solid);
 let _tanstack_table_core = require("@tanstack/table-core");
 let _tanstack_virtual_core = require("@tanstack/virtual-core");
-//#region src/internal/middleware.ts
-/**
-* Build the ordered middleware array for `computePosition`. Pure — no engine
-* import, no DOM read beyond the passed-in arrow element.
-*/
-function buildMiddleware(factories, config) {
-	const mw = [factories.offset(config.offset)];
-	if (!config.disableFlip) mw.push(factories.flip());
-	if (!config.disableShift) mw.push(factories.shift());
-	if (config.arrow && config.arrowEl) mw.push(factories.arrow({ element: config.arrowEl }));
-	return mw;
-}
-//#endregion
-//#region src/Popover.tsx
-(0, _rozie_runtime_solid.__rozieInjectStyle)("Popover-c6cf02ea", `.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);
-}`);
-function Popover(_props) {
-	const [local, attrs] = (0, Solid_js.splitProps)((0, Solid_js.mergeProps)({
-		placement: "bottom",
-		trigger: "click",
-		offset: 8,
-		disableFlip: false,
-		disableShift: false,
-		arrow: false,
-		disabled: false,
-		modal: false,
-		strategy: "absolute"
-	}, _props), [
-		"open",
-		"placement",
-		"trigger",
-		"offset",
-		"disableFlip",
-		"disableShift",
-		"arrow",
-		"disabled",
-		"modal",
-		"strategy",
-		"children",
-		"ref"
-	]);
-	const resolved = (0, Solid_js.children)(() => local.children);
-	(0, Solid_js.onMount)(() => {
-		local.ref?.({
-			show,
-			hide,
-			toggle,
-			reposition
-		});
-	});
-	const [open, setOpen] = (0, _rozie_runtime_solid.createControllableSignal)(_props, "open", false);
-	(0, Solid_js.onMount)(() => {
-		const _cleanup = (() => {
-			anchorNode = anchorElRef;
-			if (open() && !local.disabled) {
-				floatingNode = floatingElRef;
-				arrowNode = arrowElRef;
-				startTracking();
-			}
-		})();
-		if (_cleanup) (0, Solid_js.onCleanup)(_cleanup);
-		(0, Solid_js.onCleanup)(() => {
-			stopTracking();
-		});
-	});
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => open(), (v) => (0, Solid_js.untrack)(() => ((isOpen) => {
-		if (isOpen && !local.disabled) queueMicrotask(() => {
-			if (!open() || local.disabled) return;
-			floatingNode = floatingElRef;
-			arrowNode = arrowElRef;
-			startTracking();
-		});
-		else stopTracking();
-	})(v)), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.placement, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.offset, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.disableFlip, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.disableShift, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.strategy, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	let anchorElRef = null;
-	let floatingElRef = null;
-	let arrowElRef = null;
-	let anchorNode = null;
-	let floatingNode = null;
-	let arrowNode = null;
-	let stopAutoUpdate = null;
-	let lastFocusedEl = null;
-	function deepActiveElement() {
-		let el = document.activeElement;
-		while (el && el.shadowRoot && el.shadowRoot.activeElement) el = el.shadowRoot.activeElement;
-		return el;
-	}
-	function requestOpen(next) {
-		if (open() === next) return;
-		if (next && local.trigger === "click") lastFocusedEl = deepActiveElement();
-		setOpen(next);
-		_props.onChange?.(next);
-		if (!next && local.trigger === "click" && lastFocusedEl && lastFocusedEl.isConnected && typeof lastFocusedEl.focus === "function") lastFocusedEl.focus();
-		if (!next) lastFocusedEl = null;
-	}
-	function applyPosition(x, y, middlewareData) {
-		if (!floatingNode) return;
-		floatingNode.style.left = x + "px";
-		floatingNode.style.top = y + "px";
-		if (arrowNode && middlewareData && middlewareData.arrow) {
-			const ax = middlewareData.arrow.x;
-			const ay = middlewareData.arrow.y;
-			arrowNode.style.left = ax == null ? "" : ax + "px";
-			arrowNode.style.top = ay == null ? "" : ay + "px";
-		}
-	}
-	function position() {
-		if (!anchorNode || !floatingNode) return;
-		const middleware = buildMiddleware({
-			offset: _floating_ui_dom.offset,
-			flip: _floating_ui_dom.flip,
-			shift: _floating_ui_dom.shift,
-			arrow: _floating_ui_dom.arrow
-		}, {
-			offset: local.offset,
-			disableFlip: local.disableFlip,
-			disableShift: local.disableShift,
-			arrow: local.arrow,
-			arrowEl: arrowNode
-		});
-		if (local.strategy === "fixed") floatingNode.style.position = "fixed";
-		else floatingNode.style.position = "";
-		let opts = null;
-		opts = {
-			placement: local.placement,
-			strategy: local.strategy,
-			middleware
-		};
-		(0, _floating_ui_dom.computePosition)(anchorNode, floatingNode, opts).then((result) => {
-			applyPosition(result.x, result.y, result.middlewareData);
-		});
-	}
-	function startTracking() {
-		if (!anchorNode || !floatingNode) return;
-		if (stopAutoUpdate) {
-			stopAutoUpdate();
-			stopAutoUpdate = null;
-		}
-		stopAutoUpdate = (0, _floating_ui_dom.autoUpdate)(anchorNode, floatingNode, position);
-	}
-	function stopTracking() {
-		if (stopAutoUpdate) {
-			stopAutoUpdate();
-			stopAutoUpdate = null;
-		}
-	}
-	function onAnchorClick() {
-		if (local.disabled) return;
-		requestOpen(!open());
-	}
-	function onAnchorPointerEnter() {
-		if (local.disabled) return;
-		requestOpen(true);
-	}
-	function onAnchorPointerLeave() {
-		if (local.disabled) return;
-		requestOpen(false);
-	}
-	function onAnchorFocus() {
-		if (local.disabled) return;
-		requestOpen(true);
-	}
-	function onAnchorBlur() {
-		if (local.disabled) return;
-		requestOpen(false);
-	}
-	function dismiss() {
-		requestOpen(false);
-	}
-	function isTooltip() {
-		return local.trigger === "hover" || local.trigger === "focus";
-	}
-	function floatingRole() {
-		return isTooltip() ? "tooltip" : local.modal ? "dialog" : void 0;
-	}
-	function show() {
-		if (!local.disabled) requestOpen(true);
-	}
-	function hide() {
-		requestOpen(false);
-	}
-	function toggle() {
-		if (!local.disabled) requestOpen(!open());
-	}
-	function reposition() {
-		position();
-	}
-	(0, Solid_js.createEffect)(() => {
-		if (!open()) return;
-		const _rozieHandler = ($event) => {
-			if ($event.key !== "Escape") return;
-			dismiss();
-		};
-		document.addEventListener("keydown", _rozieHandler);
-		(0, Solid_js.onCleanup)(() => document.removeEventListener("keydown", _rozieHandler));
-	});
-	(0, _rozie_runtime_solid.createOutsideClick)([() => anchorElRef, () => floatingElRef], dismiss, () => open());
-	return <>
-    <div {...attrs} class={"rozie-popover" + (attrs.class ? " " + attrs.class : "")} data-rozie-s-c6cf02ea="">
-
-      
-      <div aria-haspopup="dialog" aria-expanded={!!open()} aria-describedby={(0, _rozie_runtime_solid.rozieAttr)(isTooltip() && open() ? "rozie-popover-floating" : null)} class={"rozie-popover-anchor"} ref={(el) => {
-		anchorElRef = el;
-	}} onClick={($event) => {
-		local.trigger === "click" && onAnchorClick();
-	}} onPointerEnter={($event) => {
-		local.trigger === "hover" && onAnchorPointerEnter();
-	}} onPointerLeave={($event) => {
-		local.trigger === "hover" && onAnchorPointerLeave();
-	}} onFocusIn={($event) => {
-		local.trigger === "focus" && onAnchorFocus();
-	}} onFocusOut={($event) => {
-		local.trigger === "focus" && onAnchorBlur();
-	}} data-rozie-s-c6cf02ea="">
-        {(_props.anchorSlot ?? _props.slots?.["anchor"])?.({
-		open: open(),
-		toggle,
-		show,
-		hide
-	})}
-      </div>
-
-      
-      {<Solid_js.Show when={open() && !local.disabled}><div class={"rozie-popover-floating"} ref={(el) => {
-		floatingElRef = el;
-	}} id="rozie-popover-floating" role={(0, _rozie_runtime_solid.rozieAttr)(floatingRole())} aria-modal={!!(floatingRole() === "dialog")} data-rozie-s-c6cf02ea="">
-        {<Solid_js.Show when={local.arrow}><div class={"rozie-popover-arrow"} ref={(el) => {
-		arrowElRef = el;
-	}} data-rozie-s-c6cf02ea="" /></Solid_js.Show>}{resolved()}
-      </div></Solid_js.Show>}</div>
-    </>;
-}
-//#endregion
 //#region src/DataTable.tsx
 (0, _rozie_runtime_solid.__rozieInjectStyle)("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
@@ -1723,8 +1472,7 @@ function DataTable(_props) {
 		const base = pinStyle(colId);
 		if (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;
 	}
@@ -3958,7 +3706,7 @@ function DataTable(_props) {
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(header().column.id))}</span>
-              </button></Solid_js.Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
+              </button></Solid_js.Show>}<_rozie_ui_popover_solid.default trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
                   <button type="button" class={"rdt-col-menu-trigger"} aria-label={(0, _rozie_runtime_solid.rozieAttr)("Column options for " + headerLabel(header().column.id))} data-rozie-s-d5dcab4c="">⋯</button>
                 </>}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
                   <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
@@ -3974,7 +3722,7 @@ function DataTable(_props) {
                   <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event) => {
 		onHideColumn(header().column.id, $event);
 	}} data-rozie-s-d5dcab4c="">Hide column</button>
-                </div></Popover>
+                </div></_rozie_ui_popover_solid.default>
               
               <button type="button" aria-label={(0, _rozie_runtime_solid.rozieAttr)("Resize " + headerLabel(header().column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
 		onResizeStart(header().column.id, $event);
@@ -4142,7 +3890,7 @@ function DataTable(_props) {
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(header().column.id))}</span>
-              </button></Solid_js.Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
+              </button></Solid_js.Show>}<_rozie_ui_popover_solid.default trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
                   <button type="button" class={"rdt-col-menu-trigger"} aria-label={(0, _rozie_runtime_solid.rozieAttr)("Column options for " + headerLabel(header().column.id))} data-rozie-s-d5dcab4c="">⋯</button>
                 </>}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
                   <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
@@ -4158,7 +3906,7 @@ function DataTable(_props) {
                   <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event) => {
 		onHideColumn(header().column.id, $event);
 	}} data-rozie-s-d5dcab4c="">Hide column</button>
-                </div></Popover>
+                </div></_rozie_ui_popover_solid.default>
               <button type="button" aria-label={(0, _rozie_runtime_solid.rozieAttr)("Resize " + headerLabel(header().column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
 		onResizeStart(header().column.id, $event);
 	}} onTouchStart={($event) => {

package/dist/index.mjs

@@ -1,283 +1,9 @@
-import { Show, children, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
+import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
 import { Key } from "@solid-primitives/keyed";
-import { __rozieInjectStyle, createControllableSignal, createOutsideClick, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
+import Popover from "@rozie-ui/popover-solid";
 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 src/internal/middleware.ts
-/**
-* Build the ordered middleware array for `computePosition`. Pure — no engine
-* import, no DOM read beyond the passed-in arrow element.
-*/
-function buildMiddleware(factories, config) {
-	const mw = [factories.offset(config.offset)];
-	if (!config.disableFlip) mw.push(factories.flip());
-	if (!config.disableShift) mw.push(factories.shift());
-	if (config.arrow && config.arrowEl) mw.push(factories.arrow({ element: config.arrowEl }));
-	return mw;
-}
-//#endregion
-//#region src/Popover.tsx
-__rozieInjectStyle("Popover-c6cf02ea", `.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);
-}`);
-function Popover(_props) {
-	const [local, attrs] = splitProps(mergeProps({
-		placement: "bottom",
-		trigger: "click",
-		offset: 8,
-		disableFlip: false,
-		disableShift: false,
-		arrow: false,
-		disabled: false,
-		modal: false,
-		strategy: "absolute"
-	}, _props), [
-		"open",
-		"placement",
-		"trigger",
-		"offset",
-		"disableFlip",
-		"disableShift",
-		"arrow",
-		"disabled",
-		"modal",
-		"strategy",
-		"children",
-		"ref"
-	]);
-	const resolved = children(() => local.children);
-	onMount(() => {
-		local.ref?.({
-			show,
-			hide,
-			toggle,
-			reposition
-		});
-	});
-	const [open, setOpen] = createControllableSignal(_props, "open", false);
-	onMount(() => {
-		const _cleanup = (() => {
-			anchorNode = anchorElRef;
-			if (open() && !local.disabled) {
-				floatingNode = floatingElRef;
-				arrowNode = arrowElRef;
-				startTracking();
-			}
-		})();
-		if (_cleanup) onCleanup(_cleanup);
-		onCleanup(() => {
-			stopTracking();
-		});
-	});
-	createEffect(on(() => open(), (v) => untrack(() => ((isOpen) => {
-		if (isOpen && !local.disabled) queueMicrotask(() => {
-			if (!open() || local.disabled) return;
-			floatingNode = floatingElRef;
-			arrowNode = arrowElRef;
-			startTracking();
-		});
-		else stopTracking();
-	})(v)), { defer: true }));
-	createEffect(on(() => local.placement, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.offset, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.disableFlip, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.disableShift, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.strategy, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	let anchorElRef = null;
-	let floatingElRef = null;
-	let arrowElRef = null;
-	let anchorNode = null;
-	let floatingNode = null;
-	let arrowNode = null;
-	let stopAutoUpdate = null;
-	let lastFocusedEl = null;
-	function deepActiveElement() {
-		let el = document.activeElement;
-		while (el && el.shadowRoot && el.shadowRoot.activeElement) el = el.shadowRoot.activeElement;
-		return el;
-	}
-	function requestOpen(next) {
-		if (open() === next) return;
-		if (next && local.trigger === "click") lastFocusedEl = deepActiveElement();
-		setOpen(next);
-		_props.onChange?.(next);
-		if (!next && local.trigger === "click" && lastFocusedEl && lastFocusedEl.isConnected && typeof lastFocusedEl.focus === "function") lastFocusedEl.focus();
-		if (!next) lastFocusedEl = null;
-	}
-	function applyPosition(x, y, middlewareData) {
-		if (!floatingNode) return;
-		floatingNode.style.left = x + "px";
-		floatingNode.style.top = y + "px";
-		if (arrowNode && middlewareData && middlewareData.arrow) {
-			const ax = middlewareData.arrow.x;
-			const ay = middlewareData.arrow.y;
-			arrowNode.style.left = ax == null ? "" : ax + "px";
-			arrowNode.style.top = ay == null ? "" : ay + "px";
-		}
-	}
-	function position() {
-		if (!anchorNode || !floatingNode) return;
-		const middleware = buildMiddleware({
-			offset,
-			flip,
-			shift,
-			arrow
-		}, {
-			offset: local.offset,
-			disableFlip: local.disableFlip,
-			disableShift: local.disableShift,
-			arrow: local.arrow,
-			arrowEl: arrowNode
-		});
-		if (local.strategy === "fixed") floatingNode.style.position = "fixed";
-		else floatingNode.style.position = "";
-		let opts = null;
-		opts = {
-			placement: local.placement,
-			strategy: local.strategy,
-			middleware
-		};
-		computePosition(anchorNode, floatingNode, opts).then((result) => {
-			applyPosition(result.x, result.y, result.middlewareData);
-		});
-	}
-	function startTracking() {
-		if (!anchorNode || !floatingNode) return;
-		if (stopAutoUpdate) {
-			stopAutoUpdate();
-			stopAutoUpdate = null;
-		}
-		stopAutoUpdate = autoUpdate(anchorNode, floatingNode, position);
-	}
-	function stopTracking() {
-		if (stopAutoUpdate) {
-			stopAutoUpdate();
-			stopAutoUpdate = null;
-		}
-	}
-	function onAnchorClick() {
-		if (local.disabled) return;
-		requestOpen(!open());
-	}
-	function onAnchorPointerEnter() {
-		if (local.disabled) return;
-		requestOpen(true);
-	}
-	function onAnchorPointerLeave() {
-		if (local.disabled) return;
-		requestOpen(false);
-	}
-	function onAnchorFocus() {
-		if (local.disabled) return;
-		requestOpen(true);
-	}
-	function onAnchorBlur() {
-		if (local.disabled) return;
-		requestOpen(false);
-	}
-	function dismiss() {
-		requestOpen(false);
-	}
-	function isTooltip() {
-		return local.trigger === "hover" || local.trigger === "focus";
-	}
-	function floatingRole() {
-		return isTooltip() ? "tooltip" : local.modal ? "dialog" : void 0;
-	}
-	function show() {
-		if (!local.disabled) requestOpen(true);
-	}
-	function hide() {
-		requestOpen(false);
-	}
-	function toggle() {
-		if (!local.disabled) requestOpen(!open());
-	}
-	function reposition() {
-		position();
-	}
-	createEffect(() => {
-		if (!open()) return;
-		const _rozieHandler = ($event) => {
-			if ($event.key !== "Escape") return;
-			dismiss();
-		};
-		document.addEventListener("keydown", _rozieHandler);
-		onCleanup(() => document.removeEventListener("keydown", _rozieHandler));
-	});
-	createOutsideClick([() => anchorElRef, () => floatingElRef], dismiss, () => open());
-	return <>
-    <div {...attrs} class={"rozie-popover" + (attrs.class ? " " + attrs.class : "")} data-rozie-s-c6cf02ea="">
-
-      
-      <div aria-haspopup="dialog" aria-expanded={!!open()} aria-describedby={rozieAttr(isTooltip() && open() ? "rozie-popover-floating" : null)} class={"rozie-popover-anchor"} ref={(el) => {
-		anchorElRef = el;
-	}} onClick={($event) => {
-		local.trigger === "click" && onAnchorClick();
-	}} onPointerEnter={($event) => {
-		local.trigger === "hover" && onAnchorPointerEnter();
-	}} onPointerLeave={($event) => {
-		local.trigger === "hover" && onAnchorPointerLeave();
-	}} onFocusIn={($event) => {
-		local.trigger === "focus" && onAnchorFocus();
-	}} onFocusOut={($event) => {
-		local.trigger === "focus" && onAnchorBlur();
-	}} data-rozie-s-c6cf02ea="">
-        {(_props.anchorSlot ?? _props.slots?.["anchor"])?.({
-		open: open(),
-		toggle,
-		show,
-		hide
-	})}
-      </div>
-
-      
-      {<Show when={open() && !local.disabled}><div class={"rozie-popover-floating"} ref={(el) => {
-		floatingElRef = el;
-	}} id="rozie-popover-floating" role={rozieAttr(floatingRole())} aria-modal={!!(floatingRole() === "dialog")} data-rozie-s-c6cf02ea="">
-        {<Show when={local.arrow}><div class={"rozie-popover-arrow"} ref={(el) => {
-		arrowElRef = el;
-	}} data-rozie-s-c6cf02ea="" /></Show>}{resolved()}
-      </div></Show>}</div>
-    </>;
-}
-//#endregion
 //#region src/DataTable.tsx
 __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
@@ -1719,8 +1445,7 @@ function DataTable(_props) {
 		const base = pinStyle(colId);
 		if (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;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -52,7 +52,7 @@
     "solid-js": "^1.8",
     "@tanstack/table-core": "^8.21",
     "@tanstack/virtual-core": "^3",
-    "@floating-ui/dom": "^1.7.2"
+    "@rozie-ui/popover-solid": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "solid-js": {
@@ -64,13 +64,11 @@
     "@tanstack/virtual-core": {
       "optional": false
     },
-    "@floating-ui/dom": {
+    "@rozie-ui/popover-solid": {
       "optional": false
     }
   },
-  "devDependencies": {
-    "@floating-ui/dom": "^1.7.2"
-  },
+  "devDependencies": {},
   "publishConfig": {
     "access": "public"
   },

package/src/Column.tsx

@@ -64,7 +64,7 @@ interface ColumnProps {
 }
 
 export default function Column(_props: ColumnProps): JSX.Element {
-  const _merged = mergeProps({ id: '', field: '', header: '', sortable: false, filterable: false, pinned: '', width: '', expandable: false, groupable: true, aggregationFn: null, editable: false, editor: 'text', editorOptions: (() => [])(), validate: null }, _props);
+  const _merged = mergeProps({ id: '', field: '', header: '', sortable: false, filterable: false, pinned: '', width: '', expandable: false, groupable: true, aggregationFn: null, editable: false, editor: 'text', editorOptions: (() => [])() as any[], validate: null }, _props);
   const [local, attrs] = splitProps(_merged, ['id', 'field', 'header', 'sortable', 'filterable', 'pinned', 'width', 'expandable', 'groupable', 'aggregationFn', 'editable', 'editor', 'editorOptions', 'validate']);
 
   const registry = useContext(rozieContext("data-table:columns"));

package/src/DataTable.tsx

@@ -2,7 +2,7 @@ import type { JSX } from 'solid-js';
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack } from 'solid-js';
 import { Key } from '@solid-primitives/keyed';
 import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from '@rozie/runtime-solid';
-import Popover from './Popover';
+import Popover from '@rozie-ui/popover-solid';
 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
@@ -565,7 +565,7 @@ export interface DataTableHandle {
 }
 
 export default function DataTable(_props: DataTableProps): JSX.Element {
-  const _merged = mergeProps({ columns: (() => [])(), selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, maxHeight: '' }, _props);
+  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, maxHeight: '' }, _props);
   const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'maxHeight', 'children', 'ref']);
   const resolved = () => local.children;
   onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
@@ -579,8 +579,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     pageIndex: 0,
     pageSize: 10
   }))());
-  const [expanded, setExpanded] = createControllableSignal<Record<string, any> | boolean>(_props as unknown as Record<string, unknown>, 'expanded', null);
-  const [grouping, setGrouping] = createControllableSignal<any[]>(_props as unknown as Record<string, unknown>, 'grouping', null);
+  const [expanded, setExpanded] = createControllableSignal<Record<string, any> | boolean | null>(_props as unknown as Record<string, unknown>, 'expanded', null);
+  const [grouping, setGrouping] = createControllableSignal<any[] | null>(_props as unknown as Record<string, unknown>, 'grouping', null);
   const [rowSelection, setRowSelection] = createControllableSignal<Record<string, any>>(_props as unknown as Record<string, unknown>, 'rowSelection', (() => ({}))());
   const [columnVisibility, setColumnVisibility] = createControllableSignal<Record<string, any>>(_props as unknown as Record<string, unknown>, 'columnVisibility', (() => ({}))());
   const [columnSizing, setColumnSizing] = createControllableSignal<Record<string, any>>(_props as unknown as Record<string, unknown>, 'columnSizing', (() => ({}))());
@@ -2606,15 +2606,9 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function bodyCellStyle(row: any, colId: any) {
     const base = pinStyle(colId);
     if (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;
   }

package/src/EditorSelect.tsx

@@ -35,7 +35,7 @@ interface EditorSelectProps {
 }
 
 export default function EditorSelect(_props: EditorSelectProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, options: (() => [])() }, _props);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, options: (() => [])() as any[] }, _props);
   const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'options']);
 
   const [draft, setDraft] = createSignal('');

package/src/FilterSelect.tsx

@@ -27,7 +27,7 @@ interface FilterSelectProps {
 }
 
 export default function FilterSelect(_props: FilterSelectProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, uniqueValues: (() => [])() }, _props);
+  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, uniqueValues: (() => [])() as any[] }, _props);
   const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'value', 'setFilter', 'uniqueValues']);
 
   // The <select> value binding coerced to a string. $props.value is typed `unknown`

package/src/GroupBar.tsx

@@ -81,7 +81,7 @@ interface GroupBarProps {
 }
 
 export default function GroupBar(_props: GroupBarProps): JSX.Element {
-  const _merged = mergeProps({ grouping: (() => [])(), groupableColumns: (() => [])(), applyGrouping: null, clearGrouping: null }, _props);
+  const _merged = mergeProps({ grouping: (() => [])() as any[], groupableColumns: (() => [])() as any[], applyGrouping: null, clearGrouping: null }, _props);
   const [local, attrs] = splitProps(_merged, ['grouping', 'groupableColumns', 'applyGrouping', 'clearGrouping']);
 
   const [draggingId, setDraggingId] = createSignal('');

package/src/Popover.tsx

@@ -1,416 +0,0 @@
-import type { JSX } from 'solid-js';
-import { Show, children, createEffect, mergeProps, on, onCleanup, onMount, splitProps, untrack } from 'solid-js';
-import { __rozieInjectStyle, createControllableSignal, createOutsideClick, rozieAttr } from '@rozie/runtime-solid';
-// 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.
-
-__rozieInjectStyle('Popover-c6cf02ea', `.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);
-}`);
-
-interface AnchorSlotCtx { open: any; toggle: any; show: any; hide: any; }
-
-interface PopoverProps {
-  /**
-   * 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.
-   */
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  /**
-   * 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.
-   */
-  placement?: string;
-  /**
-   * 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).
-   */
-  trigger?: string;
-  /**
-   * Distance in pixels between the anchor and the floating content (the Floating UI `offset` middleware). Reconciled at runtime.
-   */
-  offset?: number;
-  /**
-   * 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.
-   */
-  disableFlip?: boolean;
-  /**
-   * 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.
-   */
-  disableShift?: boolean;
-  /**
-   * 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.
-   */
-  arrow?: boolean;
-  /**
-   * Disable the control entirely: the trigger no longer opens the content and any open content is suppressed.
-   */
-  disabled?: boolean;
-  /**
-   * 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).
-   */
-  modal?: boolean;
-  /**
-   * 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.
-   */
-  strategy?: string;
-  onChange?: (...args: unknown[]) => void;
-  anchorSlot?: (ctx: AnchorSlotCtx) => JSX.Element;
-  // D-131: default slot resolved via children() at body top
-  children?: JSX.Element;
-  slots?: Record<string, (ctx: any) => JSX.Element>;
-  ref?: (h: PopoverHandle) => void;
-}
-
-export interface PopoverHandle {
-  show: (...args: any[]) => any;
-  hide: (...args: any[]) => any;
-  toggle: (...args: any[]) => any;
-  reposition: (...args: any[]) => any;
-}
-
-export default function Popover(_props: PopoverProps): JSX.Element {
-  const _merged = mergeProps({ placement: 'bottom', trigger: 'click', offset: 8, disableFlip: false, disableShift: false, arrow: false, disabled: false, modal: false, strategy: 'absolute' }, _props);
-  const [local, attrs] = splitProps(_merged, ['open', 'placement', 'trigger', 'offset', 'disableFlip', 'disableShift', 'arrow', 'disabled', 'modal', 'strategy', 'children', 'ref']);
-  const resolved = children(() => local.children);
-  onMount(() => { local.ref?.({ show, hide, toggle, reposition }); });
-
-  const [open, setOpen] = createControllableSignal<boolean>(_props as unknown as Record<string, unknown>, 'open', false);
-  onMount(() => {
-    const _cleanup = (() => {
-    // $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.
-    anchorNode = anchorElRef;
-    if (open() && !local.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.
-      floatingNode = floatingElRef;
-      arrowNode = arrowElRef;
-      startTracking();
-    }
-  })() as unknown;
-    if (_cleanup) onCleanup(_cleanup as () => void);
-    onCleanup(() => {
-    stopTracking();
-  });
-  });
-  createEffect(on(() => (() => open())(), (v) => untrack(() => ((isOpen: any) => {
-    if (isOpen && !local.disabled) {
-      queueMicrotask(() => {
-        if (!open() || local.disabled) return;
-        floatingNode = floatingElRef;
-        arrowNode = arrowElRef;
-        startTracking();
-      });
-    } else {
-      stopTracking();
-    }
-  })(v)), { defer: true }));
-  createEffect(on(() => (() => local.placement)(), (v) => untrack(() => (() => {
-    if (open()) position();
-  })()), { defer: true }));
-  createEffect(on(() => (() => local.offset)(), (v) => untrack(() => (() => {
-    if (open()) position();
-  })()), { defer: true }));
-  createEffect(on(() => (() => local.disableFlip)(), (v) => untrack(() => (() => {
-    if (open()) position();
-  })()), { defer: true }));
-  createEffect(on(() => (() => local.disableShift)(), (v) => untrack(() => (() => {
-    if (open()) position();
-  })()), { defer: true }));
-  createEffect(on(() => (() => local.strategy)(), (v) => untrack(() => (() => {
-    if (open()) position();
-  })()), { defer: true }));
-  let anchorElRef: HTMLElement | null = null;
-  let floatingElRef: HTMLElement | null = null;
-  let arrowElRef: HTMLElement | null = null;
-
-  // 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.
-  let anchorNode: any = null;
-  let floatingNode: any = null;
-  let arrowNode: any = null;
-  let stopAutoUpdate: any = null;
-  let lastFocusedEl: any = null;
-
-  // `document.activeElement` stops at the OUTERMOST shadow-DOM host when focus
-  // lives inside a NESTED shadow tree — e.g. a Lit consumer that composes
-  // `<rozie-popover>` inside its own shadow root (data-table's vendored copy):
-  // clicking the trigger focuses a real element several shadow boundaries deep,
-  // but `document.activeElement` only resolves as far as the outermost custom
-  // element (`<rozie-data-table>`), not the actual focused node. Walking
-  // `.shadowRoot.activeElement` recursively drills to the true focused element.
-  // On the other 5 targets (no shadow DOM) `el.shadowRoot` is always
-  // null/undefined, so the loop is a no-op and this degrades to a plain
-  // `document.activeElement` read — one implementation, safe on every target.
-  function deepActiveElement() {
-    let el = document.activeElement;
-    while (el && el.shadowRoot && el.shadowRoot.activeElement) {
-      el = el.shadowRoot.activeElement;
-    }
-    return el;
-  }
-
-  // Drive the two-way model + emit in one place. Named `requestOpen` (NOT `setOpen`)
-  // to dodge the React generated `setOpen` setter for the `open` model (ROZ524).
-  //
-  // Focus-return (phase 72-06b, D-08 a11y finding): scoped to `trigger === 'click'`
-  // only — click-triggered popovers are genuinely interactive (a real dialog the
-  // user tabs/clicks into), so restoring focus to the trigger on dismissal matches
-  // standard disclosure-widget a11y practice. Deliberately NOT applied to
-  // `hover`/`focus` triggers (tooltip-flavored, see `isTooltip()`): those close on
-  // pointerleave/blur constantly during normal mouse/keyboard traversal, and
-  // forcing a focus() call on every such close would fight the user's own focus
-  // movement rather than restore anything lost.
-  function requestOpen(next: any) {
-    if (open() === next) return;
-    if (next && local.trigger === 'click') {
-      lastFocusedEl = deepActiveElement();
-    }
-    setOpen(next);
-    _props.onChange?.(next);
-    if (!next && local.trigger === 'click' && lastFocusedEl && lastFocusedEl.isConnected && typeof lastFocusedEl.focus === 'function') {
-      lastFocusedEl.focus();
-    }
-    if (!next) {
-      lastFocusedEl = null;
-    }
-  }
-
-  // Apply the resolved x/y (and arrow offset, when present) onto the floating element.
-  function applyPosition(x: any, y: any, middlewareData: any) {
-    if (!floatingNode) return;
-    floatingNode.style.left = x + 'px';
-    floatingNode.style.top = y + 'px';
-    if (arrowNode && middlewareData && middlewareData.arrow) {
-      const ax = middlewareData.arrow.x;
-      const ay = middlewareData.arrow.y;
-      arrowNode.style.left = ax == null ? '' : ax + 'px';
-      arrowNode.style.top = ay == null ? '' : ay + 'px';
-    }
-  }
-
-  // Recompute the position once. Pure engine call; safe to invoke whenever both
-  // elements exist and the content is open. `opts` is a null-let (→ `any`) so the
-  // loosely-typed `<props>` placement (string) + the `unknown[]` middleware array don't
-  // fail the strict leaf tsc against Floating UI's `Placement` / `Middleware[]` types
-  // (the cropper `let cfg = null` constructor-args idiom).
-  function position() {
-    if (!anchorNode || !floatingNode) return;
-    const middleware = buildMiddleware({
-      offset: offsetMiddleware,
-      flip,
-      shift,
-      arrow: arrowMiddleware
-    }, {
-      offset: local.offset,
-      disableFlip: local.disableFlip,
-      disableShift: local.disableShift,
-      arrow: local.arrow,
-      arrowEl: 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 (local.strategy === 'fixed') {
-      floatingNode.style.position = 'fixed';
-    } else {
-      floatingNode.style.position = '';
-    }
-    let opts: any = null;
-    opts = {
-      placement: local.placement,
-      strategy: local.strategy,
-      middleware
-    };
-    computePosition(anchorNode, floatingNode, opts).then((result: any) => {
-      applyPosition(result.x, result.y, result.middlewareData);
-    });
-  }
-
-  // Start autoUpdate (idempotent — stop any prior subscription first) and do an
-  // initial position. Floating UI's autoUpdate keeps the position fresh on scroll/
-  // resize/ancestor-layout changes and returns its own teardown.
-  function startTracking() {
-    if (!anchorNode || !floatingNode) return;
-    if (stopAutoUpdate) {
-      stopAutoUpdate();
-      stopAutoUpdate = null;
-    }
-    stopAutoUpdate = autoUpdate(anchorNode, floatingNode, position);
-  }
-  function stopTracking() {
-    if (stopAutoUpdate) {
-      stopAutoUpdate();
-      stopAutoUpdate = null;
-    }
-  }
-  // ─── trigger gesture handlers (wired conditionally on the anchor by `trigger`) ──
-  function onAnchorClick() {
-    if (local.disabled) return;
-    requestOpen(!open());
-  }
-  function onAnchorPointerEnter() {
-    if (local.disabled) return;
-    requestOpen(true);
-  }
-  function onAnchorPointerLeave() {
-    if (local.disabled) return;
-    requestOpen(false);
-  }
-  function onAnchorFocus() {
-    if (local.disabled) return;
-    requestOpen(true);
-  }
-  function onAnchorBlur() {
-    if (local.disabled) return;
-    requestOpen(false);
-  }
-
-  // Dismissal handler — method reference for the <listeners> block (an inline
-  // handler referencing $event leaks into React's useEffect deps → TS2552; every
-  // corpus <listener> uses a method-ref + modifiers).
-  function dismiss() {
-    requestOpen(false);
-  }
-
-  // ─── role helpers (plain functions; tooltip vs popover-dialog by trigger) ───────
-  // hover/focus triggers are tooltip-flavored; click is an interactive popover.
-  function isTooltip() {
-    return local.trigger === 'hover' || local.trigger === 'focus';
-  }
-  // Role: hover/focus → 'tooltip'; a click popover is 'dialog' ONLY when the consumer
-  // opts into `modal` (which is what also emits aria-modal). A default (non-modal)
-  // click popover returns `undefined` — a role-NEUTRAL positioned container, so the slot
-  // content owns its own semantics (e.g. the data-table ⋯ menu declares role="menu").
-  // Emitting role="dialog" + aria-modal="true" on a click-outside-dismissable panel
-  // with no focus trap wrongly tells assistive tech that sibling content is inert (IN-03).
-  // `undefined` (not `null`) for the neutral case: the Vue `:role` binding target is
-  // `string | undefined`, and under strict vue-tsc `null` is not assignable to it —
-  // `undefined` drops the attribute identically (Vue/Solid nullish-attr drop treats both
-  // alike) while keeping the emitted leaf's inferred type a clean `'tooltip' | 'dialog' | undefined`.
-  function floatingRole() {
-    return isTooltip() ? 'tooltip' : local.modal ? 'dialog' : undefined;
-  }
-
-  // ─── imperative handle ($expose) ────────────────────────────────────────────────
-  // Verbs: show/hide/toggle/reposition. NOT `update` (reserved Lit lifecycle) → the
-  // reposition verb is `reposition`. None collide with the `change` emit, the `open`
-  // model, or its React `setOpen` setter, nor with inherited HTMLElement members.
-  function show() {
-    if (!local.disabled) requestOpen(true);
-  }
-  function hide() {
-    requestOpen(false);
-  }
-  function toggle() {
-    if (!local.disabled) requestOpen(!open());
-  }
-  function reposition() {
-    position();
-  }
-
-  createEffect(() => {
-    if (!(open())) return;
-    const _rozieHandler = ($event: KeyboardEvent) => {
-      if ($event.key !== 'Escape') return;
-      dismiss();
-    };
-    document.addEventListener('keydown', _rozieHandler);
-    onCleanup(() => document.removeEventListener('keydown', _rozieHandler));
-  });
-
-  createOutsideClick(
-    [() => anchorElRef, () => floatingElRef],
-    dismiss,
-    () => open(),
-  );
-
-  return (
-    <>
-    <div {...attrs} class={"rozie-popover" + (((attrs as unknown as Record<string, unknown>).class as string | undefined) ? " " + ((attrs as unknown as Record<string, unknown>).class as string | undefined) : "")} data-rozie-s-c6cf02ea="">
-
-      
-      <div aria-haspopup="dialog" aria-expanded={!!open()} aria-describedby={rozieAttr(isTooltip() && open() ? 'rozie-popover-floating' : null)} class={"rozie-popover-anchor"} ref={(el) => { anchorElRef = el as HTMLElement; }} onClick={($event: MouseEvent & { currentTarget: HTMLDivElement; target: Element }) => { local.trigger === 'click' && onAnchorClick(); }} onPointerEnter={($event: PointerEvent & { currentTarget: HTMLDivElement; target: Element }) => { local.trigger === 'hover' && onAnchorPointerEnter(); }} onPointerLeave={($event: PointerEvent & { currentTarget: HTMLDivElement; target: Element }) => { local.trigger === 'hover' && onAnchorPointerLeave(); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLDivElement; target: Element }) => { local.trigger === 'focus' && onAnchorFocus(); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLDivElement; target: Element }) => { local.trigger === 'focus' && onAnchorBlur(); }} data-rozie-s-c6cf02ea="">
-        {(_props.anchorSlot ?? _props.slots?.['anchor'])?.({ open: open(), toggle, show, hide })}
-      </div>
-
-      
-      {<Show when={open() && !local.disabled}><div class={"rozie-popover-floating"} ref={(el) => { floatingElRef = el as HTMLElement; }} id="rozie-popover-floating" role={rozieAttr(floatingRole())} aria-modal={!!(floatingRole() === 'dialog')} data-rozie-s-c6cf02ea="">
-        {<Show when={local.arrow}><div class={"rozie-popover-arrow"} ref={(el) => { arrowElRef = el as HTMLElement; }} data-rozie-s-c6cf02ea="" /></Show>}{resolved()}
-      </div></Show>}</div>
-    </>
-  );
-}

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;
-}