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

package/dist/{table.cva-DlMT-zLD.js → table.cva-D5oQ-QvA.js}

@@ -1,4 +1,57 @@
+import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+//#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/table.cva.ts
 const tableRowDefinition = UIOverrides.defineConfig({
 	base: [
@@ -45,4 +98,4 @@ const tableDataDefinition = UIOverrides.defineConfig({
 const tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-surface-default-card-foreground"] });
 const tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-surface-default-foreground"] });
 //#endregion
-export { tableHeaderTextDefinition as a, tableHeadRowDefinition as i, tableDataDefinition as n, tableRowDefinition as o, tableHeadDataDefinition as r, theadDefinition as s, tableCellTextDefinition as t };
+export { tableHeaderTextDefinition as a, GripVertical as c, tableHeadRowDefinition as i, tableDataDefinition as n, tableRowDefinition as o, tableHeadDataDefinition as r, theadDefinition as s, tableCellTextDefinition as t };

package/dist/tanstack/table.js

@@ -1,3 +1,3 @@
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-piX1SWvN.js";
-import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "../useTableColumnConfig-BTGZiluz.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-BN2_J_Ne.js";
+import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "../useTableColumnConfig-Di0_w80v.js";
 export { CellText, ColumnConfigModal, HeaderText, InfiniteTable, PaginatedTable, Table, dynamicColumns, usePagination, useSorting, useTableColumnConfig, useTableNav };

package/dist/tanstack.js

@@ -4,7 +4,7 @@ import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.
 import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
 import { t as FileUpload } from "./FileUpload--7ub3EZO.js";
 import { t as PasswordInput } from "./PasswordInput-DYwUZ4-k.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-CpC3wlMs.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
@@ -89,9 +89,9 @@ import { a as toastDefinition, n as statusIconDefinition$1, r as statusSeparator
 import { t as Toast } from "./Toast-DtG3pA61.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMFD4.js";
 import { useToast } from "./components/use-toast.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
-import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-BTGZiluz.js";
+import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-Di0_w80v.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/token-classes-Bfcx0get.js

@@ -0,0 +1,163 @@
+//#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
+export { splitVariants as n, inspectTokens as t };

package/dist/{useTableColumnConfig-BTGZiluz.js → useTableColumnConfig-Di0_w80v.js}

@@ -1,4 +1,3 @@
-import { t as Table } from "./Table-piX1SWvN.js";
 import { t as Checkbox } from "./Checkbox-CV1ILXXO.js";
 import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { t as Spinner } from "./Spinner-BeVTUzzx.js";
@@ -10,6 +9,7 @@ import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
 import { t as ZodUtils } from "./zod.utils-DrrPDT9v.js";
 import { t as Dialog } from "./Dialog-9manOgMA.js";
 import { Pagination } from "./components/pagination.js";
+import { t as Table } from "./Table-BN2_J_Ne.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
 import { t as UIRouter } from "./router.context-B4FvsTim.js";
 import { t as RoutingUtils } from "./routing.utils-UTQonIhB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "5.0.0-rc.5",
+  "version": "5.0.0-rc.7",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/configurator/README.md

@@ -62,10 +62,16 @@ The plugin uses Vite's development middleware and HTML hooks and is enabled only
 
 `parseThemeCss` reads the flat declaration blocks used by Atlas themes (`:root`, `.dark`, and `@theme` / `@theme static`). It excludes `@theme inline` declarations because their compiled literal values cannot be changed at runtime. It is not a general CSS parser. Supply `{ light, dark, theme }` maps directly for other theme structures. Use CSS variables in utilities you want to tune at runtime. Breakpoints, generated class names, and literal values compiled from `@theme inline` require rebuilding CSS; adjust their underlying variables instead. Edits are application-wide within the current document; mount only one configuration provider per document.
 
-The live preview lists every Povio UI component (`gallery/demos.tsx`). Click one to focus it, then hover to see the padding, gaps and radius that come from theme tokens; clicking a band opens that exact token in the editor. The inspector reads the rendered Tailwind classes (`inspector/token-classes.ts`), so it follows `UIOverrides` and responsive variants, and only offers tokens present in the supplied defaults. Dialog, popover, tooltip and dropdown demos are static replicas built from the components' own class definitions, because an open react-aria modal or popover would take focus away from the configurator.
+Live Preview includes a docked inspector with independent scrolling. In **Inspect** mode, hover any element to see its computed styles and box model, click to pin it, and click the selected element again to unpin. **Interact** mode lets preview controls respond normally and lets gallery cards open their focused demos. The neutral box model shows per-side spacing and borders, corner radii, content dimensions, and row/column measurements inside the gutters of one gap sketch. Default and empty properties are omitted; recognized utility tokens link to the editor only when they match the computed value. Pinning retains selection while local component state and theme changes refresh the displayed values. Hover or focus a number in the box model to highlight its padding, margin, border, radius, content dimension or gap directly on the preview. Dialog, popover, tooltip and dropdown gallery demos use the components' class definitions to avoid taking focus away from the configurator.
 
 The **Advanced → Variants & overrides** sub-tab exposes the library's CVA slots by component. It resolves declarative app overrides before showing base classes, variant classes, default values, and compound-rule classes. Edits store a serializable snapshot of the effective slot using `overrideCva`; untouched slots and function mappers retain the inherited app configuration. Function-based CVA overrides are read-only. Reset slot restores the inherited definition. Apply, Cancel, Reset all, and host persistence cover CVA edits as well as tokens.
 
 CVA edits change class names, not the Tailwind compiler. Existing compiled classes preview immediately; newly introduced classes require inclusion in your app's Tailwind sources and a rebuild. The UIOverrides export provides a `withUIOverrides(existing)` helper that preserves other components and sibling slots. Mount the configurator below app override providers; providers nested further inside an app intentionally take precedence.
 
 The gallery is the default preview for token sections. Switch to **Token preview** to follow the active section and search results; typography metadata uses its parent text specimen. In Variants & overrides, selecting a component or slot changes the focused preview, and focusing a variant or compound-rule field selects that combination. Preview-only controls do not change saved configuration. Common controls use live library components; structural slots use contained specimens built from the same CVA definitions.
+
+The configurator window can be moved using the six-dot grip beside the preview switcher. Drag any border or corner to resize it; the layout follows the window width. Both handles support arrow keys (Shift for larger steps). The window remembers its size and position while the provider remains mounted, including across closing, reopening and docking. Restored bounds are clamped to the current viewport.
+
+The pop-out control opens a separate browser window with `window.open`. It shares the provider state with the host application, so edits remain live in both windows. Docking or closing the pop-out returns the editor to the page and preserves the draft; Apply and Cancel close the pop-out. A blocked popup leaves the in-page editor open with retry guidance. The popup remembers its own size and screen position for the next pop-out; placement remains subject to browser window rules. The popup uses its browser window for resizing and switches to the compact Live preview tab below 800px.
+
+Minimize turns the configurator into a movable **Povio UI** floating launcher without discarding its draft. Click the launcher to restore the previous window mode, size and position; drag it or use the arrow keys to move it. A minimized pop-out reopens as a separate browser window. After Apply or Cancel, the launcher remains available to start a new editing session. Geometry is remembered for the mounted session, not across page reloads.