@povio/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/dist/token-classes-BqLWiy6O.js

@@ -0,0 +1,245 @@
+//#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
+	};
+}
+/** Variants that style a pseudo-element or other elements, never the element's own value. */
+const otherTargets = /* @__PURE__ */ new Set([
+	"placeholder",
+	"before",
+	"after",
+	"selection",
+	"marker",
+	"file",
+	"first-letter",
+	"first-line",
+	"backdrop",
+	"*",
+	"**"
+]);
+/** State variants, including the react-aria ones from tailwindcss-react-aria-components (`pressed`, `selected` …). */
+const stateSelectors = {
+	hover: ":is(:hover, [data-hovered])",
+	hovered: "[data-hovered]",
+	focus: ":is(:focus, [data-focused])",
+	focused: "[data-focused]",
+	"focus-within": ":is(:focus-within, [data-focus-within])",
+	"focus-visible": ":is(:focus-visible, [data-focus-visible])",
+	active: ":active",
+	pressed: ":is([data-pressed], :active)",
+	disabled: ":is(:disabled, [data-disabled])",
+	enabled: ":enabled",
+	checked: ":checked",
+	selected: ":is([data-selected], [aria-selected=\"true\"])",
+	indeterminate: ":is(:indeterminate, [data-indeterminate])",
+	invalid: ":is(:invalid, [data-invalid], [aria-invalid=\"true\"])",
+	valid: ":valid",
+	required: ":is(:required, [data-required])",
+	optional: ":optional",
+	"read-only": ":is(:read-only, [data-readonly])",
+	readonly: "[data-readonly]",
+	"placeholder-shown": ":placeholder-shown",
+	expanded: ":is([data-expanded], [aria-expanded=\"true\"])",
+	pending: "[data-pending]",
+	entering: "[data-entering]",
+	exiting: "[data-exiting]",
+	empty: ":empty",
+	open: ":is([open], [data-open], :popover-open)",
+	first: ":first-child",
+	last: ":last-child",
+	only: ":only-child",
+	odd: ":nth-child(odd)",
+	even: ":nth-child(even)"
+};
+const unquote = (value) => value.replace(/^['"]|['"]$/g, "");
+/** A CSS selector for one state variant, or `undefined` when its condition cannot be read from the element. */
+function variantSelector(variant) {
+	if (variant.startsWith("not-")) {
+		const inner = variantSelector(variant.slice(4));
+		return inner && `:not(${inner})`;
+	}
+	if (variant.startsWith("has-")) {
+		const inner = variantSelector(variant.slice(4));
+		return inner && `:has(${inner})`;
+	}
+	if (stateSelectors[variant]) return stateSelectors[variant];
+	const attribute = variant.match(/^(data|aria)-\[([\w-]+)(?:=([^\]]+))?\]$/);
+	if (attribute) return attribute[3] ? `[${attribute[1]}-${attribute[2]}="${unquote(attribute[3])}"]` : `[${attribute[1]}-${attribute[2]}]`;
+	if (/^data-[\w-]+$/.test(variant)) return `[${variant}]`;
+	if (/^aria-[\w-]+$/.test(variant)) return `[${variant}="true"]`;
+	const arbitrary = variant.match(/^\[(&?)(:[^\s&>+~,]+)\]$/);
+	return arbitrary ? arbitrary[2].replaceAll("_", " ") : void 0;
+}
+/**
+* How a variant class relates to an element's current value: `other` styles a pseudo-element or descendants,
+* `inactive` / `active` are state conditions read from the element, and `unknown` covers breakpoints, container
+* queries, group/peer state and anything else that cannot be checked from the element alone.
+*/
+function variantState(variants, element) {
+	if (variants.some((variant) => otherTargets.has(variant))) return "other";
+	const selectors = variants.map(variantSelector);
+	if (selectors.some((selector) => selector === void 0) || typeof element.matches !== "function") return "unknown";
+	try {
+		return element.matches(`*${selectors.join("")}`) ? "active" : "inactive";
+	} catch {
+		return "unknown";
+	}
+}
+/** 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, variantState as r, inspectTokens as t };

package/dist/{useFieldAccessibility-B-bjtrNw.js → useFieldAccessibility-DnCdz938.js}

@@ -6,7 +6,7 @@ import { t as Spinner } from "./Spinner-BeVTUzzx.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { r as FormFieldLabel } from "./FormField-9h3JAhaY.js";
 import { a as inputSizeDefinition, r as inputContentWrapperDefinition } from "./input.cva-CbMTwuQU.js";
-import { n as InputClear } from "./TooltipWrapper-CDHFaUKZ.js";
+import { n as InputClear } from "./TooltipWrapper-CSXs5-E3.js";
 import { isValidElement, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/Input/shared/InputContent.tsx
@@ -64,6 +64,7 @@ const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, un
 					children: /* @__PURE__ */ jsx(Spinner, {})
 				}),
 				!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+					size: "none",
 					color: "secondary",
 					icon: action.icon,
 					isDisabled,

package/dist/{useFormAutosave-pmh35PXp.js → useFormAutosave-CxqZAJAB.js}

@@ -3,7 +3,7 @@ import { n as useForm } from "./form.binding-CG1RPv6o.js";
 import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
 import { t as ZodUtils } from "./zod.utils-DrrPDT9v.js";
 import { n as getDefaultInputComponentType } from "./dynamicInputs-CRMWIpHA.js";
-import { t as InputItem } from "./InputItem-Cv19Hwnx.js";
+import { t as InputItem } from "./InputItem-yC5oMyN-.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { z } from "zod";

package/dist/{useStaticInputHandoff-B7DEm75m.js → useStaticInputHandoff-DKsxpVck.js}

@@ -7,7 +7,7 @@ import { t as Spinner } from "./Spinner-BeVTUzzx.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { r as FormFieldLabel, t as FormField } from "./FormField-9h3JAhaY.js";
 import { a as inputSizeDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "./input.cva-CbMTwuQU.js";
-import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CDHFaUKZ.js";
+import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CSXs5-E3.js";
 import { isValidElement, useId, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useFocusRing as $32daac5f69beb98a$re_export$useFocusRing } from "react-aria/useFocusRing";
@@ -141,6 +141,7 @@ const InputFrame = (props) => {
 			children: /* @__PURE__ */ jsx(Spinner, {})
 		}),
 		!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+			size: "none",
 			color: "secondary",
 			icon: action.icon,
 			isDisabled,

package/dist/{useTableColumnConfig-CNJ_ZvIN.js → useTableColumnConfig-BnbKElno.js}

@@ -1,4 +1,4 @@
-import { t as Table } from "./Table-piX1SWvN.js";
+import { t as Table } from "./Table-CgG02oHQ.js";
 import { t as Checkbox } from "./Checkbox-D3f2Plbc.js";
 import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { t as Spinner } from "./Spinner-BeVTUzzx.js";

package/dist/utils/logger.js

@@ -1,2 +1,2 @@
-import { t as logger } from "../logger-CqZjM-sn.js";
+import { t as logger } from "../logger-CW24po62.js";
 export { logger };

package/package.json

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

package/src/configurator/README.md

@@ -38,6 +38,17 @@ For persistence, load a saved `UIConfiguration` and pass it as `initialValue` be
 
 The exporter provides Tailwind CSS overrides and a separate `UIConfig.Provider` configuration. Import exported CSS **after** the app's existing theme. Light and dark colors retain separate selectors. The CSS export uses `@theme` for build-time Tailwind integration; the live provider emits ordinary CSS selectors.
 
+## Developer toolbar
+
+`UIDevToolbar` is a ready-made floating dock for a running app: **Configure UI** opens the compact, editor-only configurator; **Inspect** turns on the page inspector, a sidebar beside the page whose token links open the configurator on that token; and an optional **App canvas** button calls `onOpenCanvas`. The toolbar tucks into a tab on the window's left edge and remembers that across reloads. It renders the configurator and the inspector itself, so mount it once inside `UIConfigurationProvider` instead of `UIConfigurationModal`.
+
+```tsx
+import { UIDevToolbar } from "@povio/ui/ui-configurator";
+import "@povio/ui/ui-configurator/styles";
+
+<UIDevToolbar onOpenCanvas={import.meta.env.DEV ? () => navigate({ to: "/_canvas" }) : undefined} />;
+```
+
 ## Save directly to your app's theme in Vite
 
 The configurator and its stylesheet ship with `@povio/ui` as separate, optional subpath exports. The Node plugin ships in another entry, `@povio/ui/ui-configurator/vite`; neither the configurator nor Node code is exported from the regular component barrels.

package/dist/groups-oQmSeqXn.js

@@ -1,18 +0,0 @@
-//#region src/configurator/gallery/groups.ts
-/** Gallery sections, kept apart from the demos so a host can list them without loading every component. */
-const galleryGroups = [
-	"Buttons",
-	"Inputs",
-	"Selection",
-	"Files",
-	"Feedback",
-	"Text",
-	"Navigation",
-	"Overlays",
-	"Data"
-];
-/** One App Canvas artboard per section, after the composed layouts. */
-const layoutsArtboard = "Layouts";
-const componentArtboards = [layoutsArtboard, ...galleryGroups];
-//#endregion
-export { galleryGroups as n, layoutsArtboard as r, componentArtboards as t };

package/dist/underline-66hmELxa.js

@@ -1,81 +0,0 @@
-import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/bold.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$2 = {
-	name: "bold",
-	size: 24,
-	node: [["path", {
-		d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8",
-		key: "mg9rjx"
-	}]]
-};
-__iconData$2.node;
-const Bold = createLucideIcon(__iconData$2);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/italic.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$1 = {
-	name: "italic",
-	size: 24,
-	node: [
-		["line", {
-			x1: "19",
-			x2: "10",
-			y1: "4",
-			y2: "4",
-			key: "15jd3p"
-		}],
-		["line", {
-			x1: "14",
-			x2: "5",
-			y1: "20",
-			y2: "20",
-			key: "bu0au3"
-		}],
-		["line", {
-			x1: "15",
-			x2: "9",
-			y1: "4",
-			y2: "20",
-			key: "uljnxc"
-		}]
-	]
-};
-__iconData$1.node;
-const Italic = createLucideIcon(__iconData$1);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/underline.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: "underline",
-	size: 24,
-	node: [["path", {
-		d: "M6 4v6a6 6 0 0 0 12 0V4",
-		key: "9kb039"
-	}], ["line", {
-		x1: "4",
-		x2: "20",
-		y1: "20",
-		y2: "20",
-		key: "nun2al"
-	}]]
-};
-__iconData.node;
-const Underline = createLucideIcon(__iconData);
-//#endregion
-export { Italic as n, Bold as r, Underline as t };