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

package/dist/{ComponentGallery-BWiPGUL8.js → ComponentGallery-Dp0kZVZM.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,8 +45,10 @@ 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 { t as inspectTokens } from "./token-classes-Bfcx0get.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -309,168 +310,6 @@ const __iconData = {
 __iconData.node;
 const Users = createLucideIcon(__iconData);
 //#endregion
-//#region src/configurator/inspector/token-classes.ts
-/** Tailwind breakpoints from the Atlas base theme, in rem. */
-const breakpoints = {
-	sm: 23.75,
-	md: 37.5,
-	lg: 80,
-	xl: 105
-};
-/** Utility prefix → the slots it sets, its specificity, and the theme namespace its value lives in. */
-const utilities = [
-	[
-		"p",
-		[
-			"padding.top",
-			"padding.right",
-			"padding.bottom",
-			"padding.left"
-		],
-		0,
-		"spacing"
-	],
-	[
-		"px",
-		["padding.left", "padding.right"],
-		1,
-		"spacing"
-	],
-	[
-		"py",
-		["padding.top", "padding.bottom"],
-		1,
-		"spacing"
-	],
-	[
-		"pt",
-		["padding.top"],
-		2,
-		"spacing"
-	],
-	[
-		"pr",
-		["padding.right"],
-		2,
-		"spacing"
-	],
-	[
-		"pe",
-		["padding.right"],
-		2,
-		"spacing"
-	],
-	[
-		"pb",
-		["padding.bottom"],
-		2,
-		"spacing"
-	],
-	[
-		"pl",
-		["padding.left"],
-		2,
-		"spacing"
-	],
-	[
-		"ps",
-		["padding.left"],
-		2,
-		"spacing"
-	],
-	[
-		"gap",
-		["gap.row", "gap.column"],
-		0,
-		"spacing"
-	],
-	[
-		"gap-x",
-		["gap.column"],
-		1,
-		"spacing"
-	],
-	[
-		"gap-y",
-		["gap.row"],
-		1,
-		"spacing"
-	],
-	[
-		"rounded",
-		["radius"],
-		0,
-		"radius"
-	]
-];
-/** Splits `md:hover:px-4` into its variants and utility, ignoring colons inside `[...]` / `(...)`. */
-function splitVariants(className) {
-	const parts = [];
-	let depth = 0;
-	let current = "";
-	for (const char of className) {
-		if (char === "[" || char === "(") depth++;
-		if (char === "]" || char === ")") depth--;
-		if (char === ":" && depth === 0) {
-			parts.push(current);
-			current = "";
-		} else current += char;
-	}
-	return {
-		variants: parts,
-		utility: current
-	};
-}
-/** Breakpoint weight when every variant is an active breakpoint; `undefined` for state variants or inactive breakpoints. */
-function variantWeight(variants, viewportWidth, rootFontSize) {
-	let weight = 0;
-	for (const variant of variants) {
-		const max = variant.startsWith("max-");
-		const size = breakpoints[max ? variant.slice(4) : variant];
-		if (size === void 0) return void 0;
-		if (!(max ? viewportWidth < size * rootFontSize : viewportWidth >= size * rootFontSize)) return void 0;
-		weight = Math.max(weight, size);
-	}
-	return weight;
-}
-function tokenFor(value, namespace, isKnown) {
-	const referenced = value.match(/^\[.*?var\((--[\w-]+)/)?.[1] ?? value.match(/^\((--[\w-]+)\)$/)?.[1];
-	if (referenced) return isKnown(referenced) ? referenced : void 0;
-	const name = `--${namespace}-${value}`;
-	return isKnown(name) ? name : void 0;
-}
-/**
-* Resolves which theme tokens drive an element's padding, gap and radius from its rendered Tailwind classes.
-* Only tokens accepted by `isKnown` are returned, so every result can be opened in the editor.
-*/
-function inspectTokens(className, isKnown, viewportWidth = Infinity, rootFontSize = 16) {
-	const winners = /* @__PURE__ */ new Map();
-	for (const raw of className.split(/\s+/).filter(Boolean)) {
-		const { variants, utility } = splitVariants(raw);
-		const weight = variantWeight(variants, viewportWidth, rootFontSize);
-		if (weight === void 0) continue;
-		const clean = utility.replace(/^!|!$/g, "");
-		for (const [prefix, slots, specificity, namespace] of utilities) {
-			if (!clean.startsWith(`${prefix}-`)) continue;
-			const token = tokenFor(clean.slice(prefix.length + 1), namespace, isKnown);
-			if (!token) continue;
-			const rank = weight * 10 + specificity;
-			for (const slot of slots) if ((winners.get(slot)?.rank ?? -1) <= rank) winners.set(slot, {
-				token,
-				rank
-			});
-		}
-	}
-	const result = {
-		padding: {},
-		gap: {}
-	};
-	for (const [slot, { token }] of winners) if (slot === "radius") result.radius = token;
-	else if (slot.startsWith("gap.")) result.gap[slot.slice(4)] = token;
-	else result.padding[slot.slice(8)] = token;
-	return result;
-}
-//#endregion
 //#region src/configurator/inspector/Inspector.tsx
 const px = (value) => parseFloat(value) || 0;
 const hasTokens = (tokens) => !!(tokens.radius || tokens.gap.row || tokens.gap.column || Object.keys(tokens.padding).length);
@@ -482,7 +321,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 +332,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 +405,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", {
@@ -3522,6 +3362,7 @@ function ZoomedDemo(t0) {
 		t8 = /* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
 			ref: portalRef,
 			className: "studio-gallery-demo",
+			"data-inspector-name": demo.title,
 			style: {
 				width,
 				maxWidth: "100%"
@@ -3561,105 +3402,112 @@ 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",
+							"data-inspector-name": demo_1.title,
+							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();