@povio/ui 5.0.0-rc.10 → 5.0.0-rc.12

package/dist/CanvasComponentsFrame-CZXY0Dxi.js

@@ -0,0 +1,21 @@
+import { ComponentArtboard } from "./ComponentGallery-D4U5hXZL.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/app-canvas/CanvasComponentsFrame.tsx
+/** The document of a Components artboard: one gallery section, themed by the configuration the canvas sends. */
+function CanvasComponentsFrame(t0) {
+	const $ = c(2);
+	const { group } = t0;
+	let t1;
+	if ($[0] !== group) {
+		t1 = /* @__PURE__ */ jsx("main", {
+			className: "studio-sample povio-canvas-components-frame",
+			children: /* @__PURE__ */ jsx(ComponentArtboard, { group })
+		});
+		$[0] = group;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+//#endregion
+export { CanvasComponentsFrame as default };

package/dist/{ComponentGallery-CMFrbwEN.js → ComponentGallery-D4U5hXZL.js}

@@ -1,5 +1,5 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { i as inspectTokens } from "./UIConfigurator-CTlq-hrG.js";
+import { o as inspectTokens } from "./UIConfigurator-CBU0G6rb.js";
 import { n as ArrowLeft } from "./DropdownMenu-5jmtgLXd.js";
 import { i as ArrowRight } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { n as Italic, r as Bold, t as Underline } from "./underline-66hmELxa.js";
@@ -49,6 +49,7 @@ 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 { n as galleryGroups } from "./groups-oQmSeqXn.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -526,17 +527,6 @@ function InspectLabel(t0) {
 }
 //#endregion
 //#region src/configurator/gallery/demos.tsx
-const galleryGroups = [
-	"Buttons",
-	"Inputs",
-	"Selection",
-	"Files",
-	"Feedback",
-	"Text",
-	"Navigation",
-	"Overlays",
-	"Data"
-];
 const noop = () => {};
 const menuItems = [
 	{
@@ -2249,7 +2239,7 @@ function DashboardScreen() {
 	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ jsx("div", {
 			className: "studio-layout-stats",
-			children: stats.map(_temp)
+			children: stats.map(_temp$1)
 		});
 		t4 = /* @__PURE__ */ jsx(Table, {
 			items: projects,
@@ -2295,7 +2285,7 @@ function DashboardScreen() {
 	return t6;
 }
 /** A sign-in screen: centered form with email, password, remember me, a primary and a secondary action. */
-function _temp(t0) {
+function _temp$1(t0) {
 	const { label, value, trend } = t0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "studio-layout-stat",
@@ -3400,6 +3390,77 @@ function ZoomedDemo(t0) {
 	} else t10 = $[21];
 	return t10;
 }
+/** One gallery section on its own, live and uninspected, for an App Canvas artboard. */
+function ComponentArtboard(t0) {
+	const $ = c(13);
+	const { group } = t0;
+	if (group === "Layouts") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(LayoutPreview, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[1] !== group) {
+		const items = demos.filter((demo) => demo.group === group);
+		t3 = "studio-gallery-group";
+		t4 = group;
+		t1 = "studio-gallery-grid";
+		t2 = items.map(_temp);
+		$[1] = group;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx("section", {
+			className: t3,
+			"aria-label": t4,
+			children: t5
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+function _temp(demo_0) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `studio-gallery-card ${demo_0.wide ? "is-wide" : ""}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "studio-gallery-card-title",
+			children: demo_0.title
+		}), /* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
+			ref: portalRef,
+			className: "studio-gallery-demo",
+			"data-inspector-name": demo_0.title,
+			children: demo_0.render()
+		}) })]
+	}, demo_0.id);
+}
 /** Every Povio UI component in one scrollable list; clicking a card zooms it into the token inspector. */
 function ComponentGallery(t0) {
 	const $ = c(14);
@@ -3510,4 +3571,4 @@ function ComponentGallery(t0) {
 	return t7;
 }
 //#endregion
-export { ComponentGallery as default };
+export { ComponentArtboard, ComponentGallery as default };