@povio/ui 5.0.0-rc.5 → 5.0.0-rc.6

package/dist/{ComponentGallery-BWiPGUL8.js → ComponentGallery-C2tjrHWn.js}

@@ -8,7 +8,6 @@ import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronUp } from "./chevron-up-D_Gqpb5M.js";
 import { t as FileUpload } from "./FileUpload--7ub3EZO.js";
 import { t as PasswordInput } from "./PasswordInput-DYwUZ4-k.js";
-import { t as Table } from "./Table-piX1SWvN.js";
 import { t as Info } from "./info-iUmX3uDk.js";
 import { i as Search } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
@@ -46,6 +45,7 @@ import { t as Dialog } from "./Dialog-9manOgMA.js";
 import { Pagination } from "./components/pagination.js";
 import { t as Alert } from "./Alert-CnvEb1D_.js";
 import { t as Toast } from "./Toast-DtG3pA61.js";
+import { t as Table } from "./Table-BN2_J_Ne.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -482,7 +482,7 @@ function Inspector({ isKnown, describe, onSelect, revision, children }) {
 	const [regions, setRegions] = useState([]);
 	const [outline, setOutline] = useState(null);
 	const [active, setActive] = useState(null);
-	const tokensOf = useCallback((element) => inspectTokens(typeof element.className === "string" ? element.className : "", isKnown, window.innerWidth, px(getComputedStyle(document.documentElement).fontSize) || 16), [isKnown]);
+	const tokensOf = useCallback((element) => inspectTokens(typeof element.className === "string" ? element.className : "", isKnown, element.ownerDocument.defaultView?.innerWidth ?? 0, px(element.ownerDocument.defaultView?.getComputedStyle(element.ownerDocument.documentElement).fontSize ?? "16") || 16), [isKnown]);
 	const measure = useCallback(() => {
 		const stage = stageRef.current;
 		if (!stage || !target || !target.isConnected) {
@@ -493,7 +493,7 @@ function Inspector({ isKnown, describe, onSelect, revision, children }) {
 		const origin = stage.getBoundingClientRect();
 		const box = target.getBoundingClientRect();
 		const scale = target.offsetWidth ? box.width / target.offsetWidth : 1;
-		const style = getComputedStyle(target);
+		const style = target.ownerDocument.defaultView.getComputedStyle(target);
 		const tokens = tokensOf(target);
 		const left = box.left - origin.left;
 		const top = box.top - origin.top;
@@ -566,27 +566,28 @@ function Inspector({ isKnown, describe, onSelect, revision, children }) {
 	useLayoutEffect(measure, [measure, revision]);
 	useEffect(() => {
 		const stage_0 = stageRef.current;
-		if (!stage_0) return;
+		const ownerWindow = stage_0?.ownerDocument.defaultView;
+		if (!stage_0 || !ownerWindow) return;
 		let frame = 0;
 		const schedule = () => {
-			cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(measure);
+			ownerWindow.cancelAnimationFrame(frame);
+			frame = ownerWindow.requestAnimationFrame(measure);
 		};
 		const observer = new ResizeObserver(schedule);
 		observer.observe(stage_0);
 		if (target) observer.observe(target);
-		window.addEventListener("scroll", schedule, true);
+		ownerWindow.addEventListener("scroll", schedule, true);
 		return () => {
-			cancelAnimationFrame(frame);
+			ownerWindow.cancelAnimationFrame(frame);
 			observer.disconnect();
-			window.removeEventListener("scroll", schedule, true);
+			ownerWindow.removeEventListener("scroll", schedule, true);
 		};
 	}, [measure, target]);
 	const onPointerMove = (event) => {
 		if (event.target.closest(".studio-inspect-region")) return;
 		const content = contentRef.current;
 		if (!content) return;
-		const hit = document.elementsFromPoint(event.clientX, event.clientY).find((element_0) => content.contains(element_0) && hasTokens(tokensOf(element_0)));
+		const hit = content.ownerDocument.elementsFromPoint(event.clientX, event.clientY).find((element_0) => content.contains(element_0) && hasTokens(tokensOf(element_0)));
 		if (hit && hit !== target) setTarget(hit);
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -3561,105 +3562,111 @@ function ZoomedDemo(t0) {
 }
 /** Every Povio UI component in one scrollable list; clicking a card zooms it into the token inspector. */
 function ComponentGallery(t0) {
-	const $ = c(12);
+	const $ = c(14);
 	const { inspector } = t0;
+	const galleryRef = useRef(null);
 	const [zoomed, setZoomed] = useState(null);
 	const [zoomedWidth, setZoomedWidth] = useState();
+	const open = (id) => {
+		setZoomedWidth(galleryRef.current?.querySelector(`#gallery-card-${id} .studio-gallery-demo`)?.offsetWidth);
+		setZoomed(id);
+	};
 	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = (id) => {
-			setZoomedWidth(document.querySelector(`#gallery-card-${id} .studio-gallery-demo`)?.offsetWidth);
-			setZoomed(id);
-		};
-		$[0] = t1;
-	} else t1 = $[0];
-	const open = t1;
-	let t2;
-	if ($[1] !== zoomed) {
-		t2 = demos.find((demo) => demo.id === zoomed);
-		$[1] = zoomed;
-		$[2] = t2;
-	} else t2 = $[2];
-	const zoomedDemo = t2;
+	if ($[0] !== zoomed) {
+		t1 = demos.find((demo) => demo.id === zoomed);
+		$[0] = zoomed;
+		$[1] = t1;
+	} else t1 = $[1];
+	const zoomedDemo = t1;
 	const lastZoomed = useRef(null);
+	let t2;
 	let t3;
-	let t4;
-	if ($[3] !== zoomed) {
-		t3 = () => {
+	if ($[2] !== zoomed) {
+		t2 = () => {
 			if (zoomed) lastZoomed.current = zoomed;
-			else if (lastZoomed.current) document.querySelector(`#gallery-card-${lastZoomed.current} .studio-gallery-card-hit`)?.focus();
+			else if (lastZoomed.current) galleryRef.current?.querySelector(`#gallery-card-${lastZoomed.current} .studio-gallery-card-hit`)?.focus();
 		};
-		t4 = [zoomed];
-		$[3] = zoomed;
+		t3 = [zoomed];
+		$[2] = zoomed;
+		$[3] = t2;
 		$[4] = t3;
-		$[5] = t4;
 	} else {
+		t2 = $[3];
 		t3 = $[4];
-		t4 = $[5];
 	}
-	useEffect(t3, t4);
+	useEffect(t2, t3);
 	if (zoomedDemo) {
+		let t4;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = () => setZoomed(null);
+			$[5] = t4;
+		} else t4 = $[5];
 		let t5;
-		if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = () => setZoomed(null);
-			$[6] = t5;
-		} else t5 = $[6];
-		let t6;
-		if ($[7] !== inspector || $[8] !== zoomedDemo || $[9] !== zoomedWidth) {
-			t6 = /* @__PURE__ */ jsx(ZoomedDemo, {
+		if ($[6] !== inspector || $[7] !== zoomedDemo || $[8] !== zoomedWidth) {
+			t5 = /* @__PURE__ */ jsx(ZoomedDemo, {
 				demo: zoomedDemo,
 				width: zoomedWidth,
 				inspector,
-				onBack: t5
+				onBack: t4
 			}, zoomedDemo.id);
-			$[7] = inspector;
-			$[8] = zoomedDemo;
-			$[9] = zoomedWidth;
-			$[10] = t6;
-		} else t6 = $[10];
-		return t6;
+			$[6] = inspector;
+			$[7] = zoomedDemo;
+			$[8] = zoomedWidth;
+			$[9] = t5;
+		} else t5 = $[9];
+		return t5;
 	}
+	const t4 = "studio-gallery";
 	let t5;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-gallery",
-			children: [/* @__PURE__ */ jsx(LayoutPreview, {}), galleryGroups.map((group) => {
-				const items = demos.filter((demo_0) => demo_0.group === group);
-				if (!items.length) return null;
-				return /* @__PURE__ */ jsxs("section", {
-					className: "studio-gallery-group",
-					"aria-label": group,
-					children: [/* @__PURE__ */ jsx("h3", { children: group }), /* @__PURE__ */ jsx("div", {
-						className: "studio-gallery-grid",
-						children: items.map((demo_1) => /* @__PURE__ */ jsxs("div", {
-							id: `gallery-card-${demo_1.id}`,
-							className: `studio-gallery-card ${demo_1.wide ? "is-wide" : ""}`,
-							children: [
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: "studio-gallery-card-hit",
-									"aria-label": `Inspect ${demo_1.title}`,
-									onClick: () => open(demo_1.id)
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "studio-gallery-card-title",
-									children: demo_1.title
-								}),
-								/* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
-									ref: portalRef,
-									className: "studio-gallery-demo",
-									inert: true,
-									children: demo_1.render()
-								}) })
-							]
-						}, demo_1.id))
-					})]
-				}, group);
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(LayoutPreview, {});
+		$[10] = t5;
+	} else t5 = $[10];
+	const t6 = galleryGroups.map((group) => {
+		const items = demos.filter((demo_0) => demo_0.group === group);
+		if (!items.length) return null;
+		return /* @__PURE__ */ jsxs("section", {
+			className: "studio-gallery-group",
+			"aria-label": group,
+			children: [/* @__PURE__ */ jsx("h3", { children: group }), /* @__PURE__ */ jsx("div", {
+				className: "studio-gallery-grid",
+				children: items.map((demo_1) => /* @__PURE__ */ jsxs("div", {
+					id: `gallery-card-${demo_1.id}`,
+					className: `studio-gallery-card ${demo_1.wide ? "is-wide" : ""}`,
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "studio-gallery-card-hit",
+							"aria-label": `Inspect ${demo_1.title}`,
+							onClick: () => open(demo_1.id)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "studio-gallery-card-title",
+							children: demo_1.title
+						}),
+						/* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
+							ref: portalRef,
+							className: "studio-gallery-demo",
+							inert: true,
+							children: demo_1.render()
+						}) })
+					]
+				}, demo_1.id))
 			})]
+		}, group);
+	});
+	let t7;
+	if ($[11] !== t5 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			ref: galleryRef,
+			className: t4,
+			children: [t5, t6]
 		});
 		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
 }
 //#endregion
 export { ComponentGallery as default };

package/dist/{Table-piX1SWvN.js → Table-BN2_J_Ne.js}

@@ -1,71 +1,18 @@
 import { t as logger } from "./logger-CqZjM-sn.js";
-import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
 import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronUp } from "./chevron-up-D_Gqpb5M.js";
+import { a as tableHeaderTextDefinition, c as GripVertical, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
 import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { Suspense, lazy, useCallback, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPaginatedRowModel, createSortedRowModel, flexRender, stockFeatures, tableFeatures, useTable } from "@tanstack/react-table";
 import i18next from "i18next";
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/grip-vertical.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData = {
-	name: "grip-vertical",
-	size: 24,
-	node: [
-		["circle", {
-			cx: "9",
-			cy: "12",
-			r: "1",
-			key: "1vctgf"
-		}],
-		["circle", {
-			cx: "9",
-			cy: "5",
-			r: "1",
-			key: "hp0tcf"
-		}],
-		["circle", {
-			cx: "9",
-			cy: "19",
-			r: "1",
-			key: "fkjjf6"
-		}],
-		["circle", {
-			cx: "15",
-			cy: "12",
-			r: "1",
-			key: "1tmaij"
-		}],
-		["circle", {
-			cx: "15",
-			cy: "5",
-			r: "1",
-			key: "19l28e"
-		}],
-		["circle", {
-			cx: "15",
-			cy: "19",
-			r: "1",
-			key: "f4zoj3"
-		}]
-	]
-};
-__iconData.node;
-const GripVertical = createLucideIcon(__iconData);
-//#endregion
 //#region src/components/table/CellText.tsx
 const CellText = (props) => {
 	const uiConfig = UIConfig.useConfig();