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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "5.0.0-rc.7",
+  "version": "5.0.0-rc.8",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -296,6 +296,11 @@
       "import": "./dist/config/ui-configurator.js",
       "default": "./dist/config/ui-configurator.js"
     },
+    "./app-canvas": {
+      "types": "./dist/config/app-canvas.d.ts",
+      "import": "./dist/config/app-canvas.js",
+      "default": "./dist/config/app-canvas.js"
+    },
     "./ui-configurator/vite": {
       "types": "./dist/config/ui-configurator-vite.d.ts",
       "import": "./dist/config/ui-configurator-vite.js",
@@ -1328,6 +1333,7 @@
     },
     "./rich-text-editor/styles": "./dist/styles/editor.css",
     "./ui-configurator/styles": "./dist/styles/configurator.css",
+    "./app-canvas/styles": "./dist/styles/app-canvas.css",
     "./color-utilities": "./dist/styles/color-utilities.css",
     "./tw-ui-plugin": {
       "types": "./dist/tw-ui-plugin.d.ts",

package/dist/Alert-CnvEb1D_.js

@@ -1,244 +0,0 @@
-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 { t as Spinner } from "./Spinner-BeVTUzzx.js";
-import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/status/Alert/alert.cva.ts
-const alertDefinition = UIOverrides.defineConfig({
-	base: ["min-h-0 overflow-hidden rounded-alert-rounding-default p-0 shadow-4"],
-	config: {
-		variants: {
-			variant: {
-				outlined: "border bg-surface-default-card text-surface-default-card-foreground",
-				contained: ""
-			},
-			color: {
-				neutral: "",
-				success: "",
-				warning: "",
-				error: ""
-			}
-		},
-		compoundVariants: [
-			{
-				variant: "outlined",
-				color: "neutral",
-				className: "border-border-default-subtle"
-			},
-			{
-				variant: "outlined",
-				color: "success",
-				className: "border-surface-success-base"
-			},
-			{
-				variant: "outlined",
-				color: "warning",
-				className: "border-surface-warning-base"
-			},
-			{
-				variant: "outlined",
-				color: "error",
-				className: "border-border-destructive-base"
-			},
-			{
-				variant: "contained",
-				color: "neutral",
-				className: "bg-surface-inverted-card text-surface-inverted-card-foreground"
-			},
-			{
-				variant: "contained",
-				color: "success",
-				className: "bg-surface-success-base text-surface-success-inverted-base"
-			},
-			{
-				variant: "contained",
-				color: "warning",
-				className: "bg-surface-warning-base text-surface-warning-inverted-base"
-			},
-			{
-				variant: "contained",
-				color: "error",
-				className: "bg-surface-destructive-base text-surface-destructive-inverted-base"
-			}
-		],
-		defaultVariants: {
-			variant: "outlined",
-			color: "neutral"
-		}
-	}
-});
-//#endregion
-//#region src/components/status/shared/status.cva.ts
-const statusIconDefinition = UIOverrides.defineConfig({
-	base: ["size-icons-size shrink-0"],
-	config: {
-		variants: {
-			variant: {
-				outlined: "",
-				contained: "text-inherit"
-			},
-			color: {
-				neutral: "",
-				success: "",
-				warning: "",
-				error: ""
-			}
-		},
-		compoundVariants: [
-			{
-				variant: "outlined",
-				color: "neutral",
-				class: "text-surface-default-foreground"
-			},
-			{
-				variant: "outlined",
-				color: "success",
-				class: "text-surface-success-base"
-			},
-			{
-				variant: "outlined",
-				color: "warning",
-				class: "text-surface-warning-base"
-			},
-			{
-				variant: "outlined",
-				color: "error",
-				class: "text-surface-destructive-base"
-			}
-		],
-		defaultVariants: {
-			variant: "outlined",
-			color: "neutral"
-		}
-	}
-});
-const statusSeparatorDefinition = UIOverrides.defineConfig({
-	base: ["h-px shrink-0 self-stretch md:h-auto md:w-px"],
-	config: {
-		variants: {
-			variant: {
-				outlined: "",
-				contained: "hidden"
-			},
-			color: {
-				neutral: "bg-border-default-subtle",
-				success: "bg-surface-success-base",
-				warning: "bg-surface-warning-base",
-				error: "bg-surface-destructive-base"
-			}
-		},
-		defaultVariants: { color: "neutral" }
-	}
-});
-//#endregion
-//#region src/components/status/Alert/Alert.tsx
-const Alert = (t0) => {
-	const $ = c(31);
-	const { variant, color, text, isLoading: t1, rightContent, hasSeparator, icon: Icon, className } = t0;
-	const isLoading = t1 === void 0 ? false : t1;
-	const alertCva = UIOverrides.useCva("alert.cva", alertDefinition);
-	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
-	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
-	let t2;
-	if ($[0] !== alertCva || $[1] !== className || $[2] !== color || $[3] !== variant) {
-		t2 = alertCva({
-			variant,
-			color,
-			className
-		});
-		$[0] = alertCva;
-		$[1] = className;
-		$[2] = color;
-		$[3] = variant;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== isLoading) {
-		t3 = isLoading && /* @__PURE__ */ jsx(Spinner, {
-			size: "default",
-			className: "shrink-0"
-		});
-		$[5] = isLoading;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== Icon || $[8] !== color || $[9] !== iconCva || $[10] !== isLoading || $[11] !== variant) {
-		t4 = !isLoading && Icon && /* @__PURE__ */ jsx(IconSlot, {
-			icon: Icon,
-			className: iconCva({
-				variant,
-				color
-			})
-		});
-		$[7] = Icon;
-		$[8] = color;
-		$[9] = iconCva;
-		$[10] = isLoading;
-		$[11] = variant;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] !== text) {
-		t5 = /* @__PURE__ */ jsx(Typography, {
-			size: "large",
-			children: text
-		});
-		$[13] = text;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
-			children: [
-				t3,
-				t4,
-				t5
-			]
-		});
-		$[15] = t3;
-		$[16] = t4;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	let t7;
-	if ($[19] !== color || $[20] !== hasSeparator || $[21] !== rightContent || $[22] !== separatorCva || $[23] !== variant) {
-		t7 = !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
-			variant,
-			color
-		}) }), /* @__PURE__ */ jsx("div", {
-			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
-			children: rightContent
-		})] });
-		$[19] = color;
-		$[20] = hasSeparator;
-		$[21] = rightContent;
-		$[22] = separatorCva;
-		$[23] = variant;
-		$[24] = t7;
-	} else t7 = $[24];
-	let t8;
-	if ($[25] !== t6 || $[26] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: "flex w-auto flex-col items-center md:flex-row",
-			children: [t6, t7]
-		});
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t8;
-	} else t8 = $[27];
-	let t9;
-	if ($[28] !== t2 || $[29] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: t2,
-			children: t8
-		});
-		$[28] = t2;
-		$[29] = t8;
-		$[30] = t9;
-	} else t9 = $[30];
-	return t9;
-};
-//#endregion
-export { alertDefinition as i, statusIconDefinition as n, statusSeparatorDefinition as r, Alert as t };

package/dist/token-classes-Bfcx0get.js

@@ -1,163 +0,0 @@
-//#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 };