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

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/package.json

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

package/src/configurator/README.md

@@ -62,7 +62,7 @@ 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.