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

package/dist/{AppCanvasPage-BnyCHO3I.js → AppCanvasPage-C3KN-Pwb.js}

@@ -1,5 +1,5 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { a as UIConfigurationModal, d as Trash, f as Sun, h as Moon, i as useCanvasInspector, m as Pencil, n as CanvasInspectorPanel, p as Plus, r as CanvasLayerHighlight, s as useRepositoryStorage, t as CanvasInspectionOverlay, u as useUIConfiguration } from "./CanvasInspector-DdP3mHUY.js";
+import { _ as Moon, a as UIConfigurationModal, d as Trash, f as Sun, g as Pencil, h as Plus, i as useCanvasInspector, m as ScanLine, n as CanvasInspectorPanel, p as Settings2, r as CanvasLayerHighlight, s as useRepositoryStorage, t as CanvasInspectionOverlay, u as useUIConfiguration, v as Frame } from "./CanvasInspector-TC9DOf5p.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { i as Search } from "./selectDesktop.cva-CHAMxhfO.js";
@@ -20,7 +20,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$5 = {
 	name: "download",
 	size: 24,
 	node: [
@@ -38,52 +38,8 @@ const __iconData$8 = {
 		}]
 	]
 };
-__iconData$8.node;
-const Download = createLucideIcon(__iconData$8);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/frame.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$7 = {
-	name: "frame",
-	size: 24,
-	node: [
-		["line", {
-			x1: "22",
-			x2: "2",
-			y1: "6",
-			y2: "6",
-			key: "15w7dq"
-		}],
-		["line", {
-			x1: "22",
-			x2: "2",
-			y1: "18",
-			y2: "18",
-			key: "1ip48p"
-		}],
-		["line", {
-			x1: "6",
-			x2: "6",
-			y1: "2",
-			y2: "22",
-			key: "a2lnyx"
-		}],
-		["line", {
-			x1: "18",
-			x2: "18",
-			y1: "2",
-			y2: "22",
-			key: "8vb6jd"
-		}]
-	]
-};
-__iconData$7.node;
-const Frame = createLucideIcon(__iconData$7);
+__iconData$5.node;
+const Download = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/hand.mjs
 /**
@@ -92,7 +48,7 @@ const Frame = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$4 = {
 	name: "hand",
 	size: 24,
 	node: [
@@ -114,8 +70,8 @@ const __iconData$6 = {
 		}]
 	]
 };
-__iconData$6.node;
-const Hand = createLucideIcon(__iconData$6);
+__iconData$4.node;
+const Hand = createLucideIcon(__iconData$4);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.mjs
 /**
@@ -124,7 +80,7 @@ const Hand = createLucideIcon(__iconData$6);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$5 = {
+const __iconData$3 = {
 	name: "monitor",
 	size: 24,
 	node: [
@@ -152,8 +108,8 @@ const __iconData$5 = {
 		}]
 	]
 };
-__iconData$5.node;
-const Monitor = createLucideIcon(__iconData$5);
+__iconData$3.node;
+const Monitor = createLucideIcon(__iconData$3);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.mjs
 /**
@@ -162,7 +118,7 @@ const Monitor = createLucideIcon(__iconData$5);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$4 = {
+const __iconData$2 = {
 	name: "mouse-pointer-2",
 	size: 24,
 	node: [["path", {
@@ -170,8 +126,8 @@ const __iconData$4 = {
 		key: "edeuup"
 	}]]
 };
-__iconData$4.node;
-const MousePointer2 = createLucideIcon(__iconData$4);
+__iconData$2.node;
+const MousePointer2 = createLucideIcon(__iconData$2);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-left.mjs
 /**
@@ -180,7 +136,7 @@ const MousePointer2 = createLucideIcon(__iconData$4);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$3 = {
+const __iconData$1 = {
 	name: "panel-left",
 	size: 24,
 	node: [["rect", {
@@ -196,8 +152,8 @@ const __iconData$3 = {
 	}]],
 	aliases: ["sidebar"]
 };
-__iconData$3.node;
-const PanelLeft = createLucideIcon(__iconData$3);
+__iconData$1.node;
+const PanelLeft = createLucideIcon(__iconData$1);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panels-top-left.mjs
 /**
@@ -206,7 +162,7 @@ const PanelLeft = createLucideIcon(__iconData$3);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$2 = {
+const __iconData = {
 	name: "panels-top-left",
 	size: 24,
 	node: [
@@ -229,80 +185,8 @@ const __iconData$2 = {
 	],
 	aliases: ["layout"]
 };
-__iconData$2.node;
-const PanelsTopLeft = createLucideIcon(__iconData$2);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/scan-line.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: "scan-line",
-	size: 24,
-	node: [
-		["path", {
-			d: "M3 7V5a2 2 0 0 1 2-2h2",
-			key: "aa7l1z"
-		}],
-		["path", {
-			d: "M17 3h2a2 2 0 0 1 2 2v2",
-			key: "4qcy5o"
-		}],
-		["path", {
-			d: "M21 17v2a2 2 0 0 1-2 2h-2",
-			key: "6vwrx8"
-		}],
-		["path", {
-			d: "M7 21H5a2 2 0 0 1-2-2v-2",
-			key: "ioqczr"
-		}],
-		["path", {
-			d: "M7 12h10",
-			key: "b7w52i"
-		}]
-	]
-};
-__iconData$1.node;
-const ScanLine = createLucideIcon(__iconData$1);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings-2.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: "settings-2",
-	size: 24,
-	node: [
-		["path", {
-			d: "M14 17H5",
-			key: "gfn3mx"
-		}],
-		["path", {
-			d: "M19 7h-9",
-			key: "6i9tg"
-		}],
-		["circle", {
-			cx: "17",
-			cy: "17",
-			r: "3",
-			key: "18b49y"
-		}],
-		["circle", {
-			cx: "7",
-			cy: "7",
-			r: "3",
-			key: "dfmy0x"
-		}]
-	]
-};
 __iconData.node;
-const Settings2 = createLucideIcon(__iconData);
+const PanelsTopLeft = createLucideIcon(__iconData);
 //#endregion
 //#region src/app-canvas/manifest.ts
 function createCanvasWorkspace(name, id) {

package/dist/{CanvasInspector-DdP3mHUY.js → CanvasInspector-TC9DOf5p.js}

@@ -72,7 +72,7 @@ import { UNSAFE_PortalProvider } from "react-aria";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$10 = {
+const __iconData$13 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -90,8 +90,8 @@ const __iconData$10 = {
 		}]
 	]
 };
-__iconData$10.node;
-const ArrowDownToLine = createLucideIcon(__iconData$10);
+__iconData$13.node;
+const ArrowDownToLine = createLucideIcon(__iconData$13);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.mjs
 /**
@@ -100,7 +100,7 @@ const ArrowDownToLine = createLucideIcon(__iconData$10);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$9 = {
+const __iconData$12 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -111,8 +111,8 @@ const __iconData$9 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$9.node;
-const ChevronsUpDown = createLucideIcon(__iconData$9);
+__iconData$12.node;
+const ChevronsUpDown = createLucideIcon(__iconData$12);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/external-link.mjs
 /**
@@ -121,7 +121,7 @@ const ChevronsUpDown = createLucideIcon(__iconData$9);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$11 = {
 	name: "external-link",
 	size: 24,
 	node: [
@@ -139,8 +139,52 @@ const __iconData$8 = {
 		}]
 	]
 };
-__iconData$8.node;
-const ExternalLink = createLucideIcon(__iconData$8);
+__iconData$11.node;
+const ExternalLink = createLucideIcon(__iconData$11);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/frame.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$10 = {
+	name: "frame",
+	size: 24,
+	node: [
+		["line", {
+			x1: "22",
+			x2: "2",
+			y1: "6",
+			y2: "6",
+			key: "15w7dq"
+		}],
+		["line", {
+			x1: "22",
+			x2: "2",
+			y1: "18",
+			y2: "18",
+			key: "1ip48p"
+		}],
+		["line", {
+			x1: "6",
+			x2: "6",
+			y1: "2",
+			y2: "22",
+			key: "a2lnyx"
+		}],
+		["line", {
+			x1: "18",
+			x2: "18",
+			y1: "2",
+			y2: "22",
+			key: "8vb6jd"
+		}]
+	]
+};
+__iconData$10.node;
+const Frame = createLucideIcon(__iconData$10);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/moon.mjs
 /**
@@ -149,7 +193,7 @@ const ExternalLink = createLucideIcon(__iconData$8);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$7 = {
+const __iconData$9 = {
 	name: "moon",
 	size: 24,
 	node: [["path", {
@@ -157,8 +201,8 @@ const __iconData$7 = {
 		key: "kfwtm"
 	}]]
 };
-__iconData$7.node;
-const Moon = createLucideIcon(__iconData$7);
+__iconData$9.node;
+const Moon = createLucideIcon(__iconData$9);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-top.mjs
 /**
@@ -167,7 +211,7 @@ const Moon = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$8 = {
 	name: "panel-top",
 	size: 24,
 	node: [["rect", {
@@ -182,8 +226,8 @@ const __iconData$6 = {
 		key: "1pudct"
 	}]]
 };
-__iconData$6.node;
-const PanelTop = createLucideIcon(__iconData$6);
+__iconData$8.node;
+const PanelTop = createLucideIcon(__iconData$8);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pencil.mjs
 /**
@@ -192,7 +236,7 @@ const PanelTop = createLucideIcon(__iconData$6);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$5 = {
+const __iconData$7 = {
 	name: "pencil",
 	size: 24,
 	node: [["path", {
@@ -203,8 +247,8 @@ const __iconData$5 = {
 		key: "1mk7zo"
 	}]]
 };
-__iconData$5.node;
-const Pencil = createLucideIcon(__iconData$5);
+__iconData$7.node;
+const Pencil = createLucideIcon(__iconData$7);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pin.mjs
 /**
@@ -213,7 +257,7 @@ const Pencil = createLucideIcon(__iconData$5);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$4 = {
+const __iconData$6 = {
 	name: "pin",
 	size: 24,
 	node: [["path", {
@@ -224,8 +268,8 @@ const __iconData$4 = {
 		key: "1nkz8b"
 	}]]
 };
-__iconData$4.node;
-const Pin = createLucideIcon(__iconData$4);
+__iconData$6.node;
+const Pin = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/plus.mjs
 /**
@@ -234,7 +278,7 @@ const Pin = createLucideIcon(__iconData$4);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$3 = {
+const __iconData$5 = {
 	name: "plus",
 	size: 24,
 	node: [["path", {
@@ -245,8 +289,8 @@ const __iconData$3 = {
 		key: "s699le"
 	}]]
 };
-__iconData$3.node;
-const Plus = createLucideIcon(__iconData$3);
+__iconData$5.node;
+const Plus = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rotate-ccw.mjs
 /**
@@ -255,7 +299,7 @@ const Plus = createLucideIcon(__iconData$3);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$2 = {
+const __iconData$4 = {
 	name: "rotate-ccw",
 	size: 24,
 	node: [["path", {
@@ -266,8 +310,80 @@ const __iconData$2 = {
 		key: "1xhq8a"
 	}]]
 };
+__iconData$4.node;
+const RotateCcw = createLucideIcon(__iconData$4);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/scan-line.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$3 = {
+	name: "scan-line",
+	size: 24,
+	node: [
+		["path", {
+			d: "M3 7V5a2 2 0 0 1 2-2h2",
+			key: "aa7l1z"
+		}],
+		["path", {
+			d: "M17 3h2a2 2 0 0 1 2 2v2",
+			key: "4qcy5o"
+		}],
+		["path", {
+			d: "M21 17v2a2 2 0 0 1-2 2h-2",
+			key: "6vwrx8"
+		}],
+		["path", {
+			d: "M7 21H5a2 2 0 0 1-2-2v-2",
+			key: "ioqczr"
+		}],
+		["path", {
+			d: "M7 12h10",
+			key: "b7w52i"
+		}]
+	]
+};
+__iconData$3.node;
+const ScanLine = createLucideIcon(__iconData$3);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings-2.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: "settings-2",
+	size: 24,
+	node: [
+		["path", {
+			d: "M14 17H5",
+			key: "gfn3mx"
+		}],
+		["path", {
+			d: "M19 7h-9",
+			key: "6i9tg"
+		}],
+		["circle", {
+			cx: "17",
+			cy: "17",
+			r: "3",
+			key: "18b49y"
+		}],
+		["circle", {
+			cx: "7",
+			cy: "7",
+			r: "3",
+			key: "dfmy0x"
+		}]
+	]
+};
 __iconData$2.node;
-const RotateCcw = createLucideIcon(__iconData$2);
+const Settings2 = createLucideIcon(__iconData$2);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sun.mjs
 /**
@@ -8946,4 +9062,4 @@ function CanvasLayerHighlight(t0) {
 	return t3;
 }
 //#endregion
-export { UIConfigurationModal as a, resolveUIConfiguration as c, Trash as d, Sun as f, Moon as h, useCanvasInspector as i, UIConfigurationProvider as l, Pencil as m, CanvasInspectorPanel as n, ColorModeSwitch as o, Plus as p, CanvasLayerHighlight as r, useRepositoryStorage as s, CanvasInspectionOverlay as t, useUIConfiguration as u };
+export { Moon as _, UIConfigurationModal as a, resolveUIConfiguration as c, Trash as d, Sun as f, Pencil as g, Plus as h, useCanvasInspector as i, UIConfigurationProvider as l, ScanLine as m, CanvasInspectorPanel as n, ColorModeSwitch as o, Settings2 as p, CanvasLayerHighlight as r, useRepositoryStorage as s, CanvasInspectionOverlay as t, useUIConfiguration as u, Frame as v };

package/dist/config/app-canvas-tanstack.js

@@ -1,4 +1,4 @@
-import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-BnyCHO3I.js";
+import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-C3KN-Pwb.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { createRoute, notFound, useRouter, useRouterState } from "@tanstack/react-router";

package/dist/config/app-canvas.js

@@ -1,2 +1,2 @@
-import { a as defaultCanvasBreakpoints, c as layoutCanvasPages, i as AppCanvas, n as AppCanvasPage, o as isAppCanvasFrame, r as AppCanvasFrameBridge, s as discoverCanvasPages, t as APP_CANVAS_PATH } from "../AppCanvasPage-BnyCHO3I.js";
+import { a as defaultCanvasBreakpoints, c as layoutCanvasPages, i as AppCanvas, n as AppCanvasPage, o as isAppCanvasFrame, r as AppCanvasFrameBridge, s as discoverCanvasPages, t as APP_CANVAS_PATH } from "../AppCanvasPage-C3KN-Pwb.js";
 export { APP_CANVAS_PATH, AppCanvas, AppCanvasFrameBridge, AppCanvasPage, defaultCanvasBreakpoints, discoverCanvasPages, isAppCanvasFrame, layoutCanvasPages };

package/dist/config/ui-configurator.d.ts

@@ -24,6 +24,20 @@ interface PageInspectorProps {
  */
 declare function PageInspector({ open, onClose }: PageInspectorProps): import("react").ReactPortal | null;
 //#endregion
+//#region src/configurator/UIDevToolbar.d.ts
+interface UIDevToolbarProps {
+  /** Opens the App Canvas; the toolbar shows its button only when provided (for example only in development). */
+  onOpenCanvas?: () => void;
+  /** Where the toolbar remembers being hidden. */
+  storageKey?: string;
+}
+/**
+ * A floating developer dock for a running app: the compact configurator, the page inspector and, optionally, the App
+ * Canvas. It tucks into a tab on the window's left edge. Mount it once inside `UIConfigurationProvider`; it renders the
+ * configurator itself, so the app needs no separate `UIConfigurationModal`.
+ */
+declare function UIDevToolbar({ onOpenCanvas, storageKey }: UIDevToolbarProps): import("react").JSX.Element;
+//#endregion
 //#region src/configurator/component-configuration.d.ts
 /**
  * The app's applied component settings: pass the JSON written by the configurator's Apply theme
@@ -43,4 +57,4 @@ interface ColorModeSwitchProps {
 /** Controlled color-mode switch, shared by configurators and application settings. */
 declare function ColorModeSwitch({ value, onChange, label }: ColorModeSwitchProps): import("react").JSX.Element;
 //#endregion
-export { ColorModeSwitch, type ColorModeSwitchProps, type CvaDefinition, type CvaEdits, PageInspector, type PageInspectorProps, type ThemeEdits, type Tokens, type UIConfiguration, UIConfigurationModal, type UIConfigurationModalProps, UIConfigurationProvider, type UIConfigurationProviderProps, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };
+export { ColorModeSwitch, type ColorModeSwitchProps, type CvaDefinition, type CvaEdits, PageInspector, type PageInspectorProps, type ThemeEdits, type Tokens, type UIConfiguration, UIConfigurationModal, type UIConfigurationModalProps, UIConfigurationProvider, type UIConfigurationProviderProps, UIDevToolbar, type UIDevToolbarProps, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };

package/dist/config/ui-configurator.js

@@ -1,6 +1,8 @@
-import { a as UIConfigurationModal, c as resolveUIConfiguration, i as useCanvasInspector, l as UIConfigurationProvider, n as CanvasInspectorPanel, o as ColorModeSwitch, t as CanvasInspectionOverlay, u as useUIConfiguration } from "../CanvasInspector-DdP3mHUY.js";
+import { a as UIConfigurationModal, c as resolveUIConfiguration, i as useCanvasInspector, l as UIConfigurationProvider, m as ScanLine, n as CanvasInspectorPanel, o as ColorModeSwitch, p as Settings2, t as CanvasInspectionOverlay, u as useUIConfiguration, v as Frame } from "../CanvasInspector-TC9DOf5p.js";
+import { t as ChevronLeft } from "../chevron-left-Dgo_b9wJ.js";
+import { t as ChevronRight } from "../chevron-right-3nKJR5Bb.js";
 import { c as isEditableToken, i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -118,4 +120,95 @@ function _temp(event_0) {
 	event_0.stopPropagation();
 }
 //#endregion
-export { ColorModeSwitch, PageInspector, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };
+//#region src/configurator/UIDevToolbar.tsx
+const readHidden = (key) => {
+	try {
+		return localStorage.getItem(key) === "1";
+	} catch {
+		return false;
+	}
+};
+/**
+* A floating developer dock for a running app: the compact configurator, the page inspector and, optionally, the App
+* Canvas. It tucks into a tab on the window's left edge. Mount it once inside `UIConfigurationProvider`; it renders the
+* configurator itself, so the app needs no separate `UIConfigurationModal`.
+*/
+function UIDevToolbar({ onOpenCanvas, storageKey = "povio-dev-toolbar-hidden" }) {
+	const { openFloating, isOpen } = useUIConfiguration();
+	const [hidden, setHidden] = useState(() => readHidden(storageKey));
+	const [inspecting, setInspecting] = useState(false);
+	const setVisibility = (next) => {
+		setHidden(next);
+		try {
+			localStorage.setItem(storageKey, next ? "1" : "0");
+		} catch {}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		hidden ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "studio-dev-toolbar-tab",
+			"data-povio-inspector-ignore": "",
+			"aria-label": "Show developer toolbar",
+			title: "Show developer toolbar",
+			onClick: () => setVisibility(false),
+			children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "studio-dev-toolbar",
+			"data-povio-inspector-ignore": "",
+			role: "toolbar",
+			"aria-label": "Developer toolbar",
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "studio-dev-toolbar-labelled",
+					"aria-label": "Configure Povio UI",
+					"aria-pressed": isOpen,
+					onClick: openFloating,
+					children: [/* @__PURE__ */ jsx(Settings2, { size: 14 }), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "Configure UI"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "studio-dev-toolbar-labelled",
+					"aria-label": "Inspect page",
+					"aria-pressed": inspecting,
+					onClick: () => setInspecting((value) => !value),
+					children: [/* @__PURE__ */ jsx(ScanLine, { size: 14 }), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "Inspect"
+					})]
+				}),
+				onOpenCanvas && /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "studio-dev-toolbar-labelled",
+					"aria-label": "Open App canvas",
+					onClick: onOpenCanvas,
+					children: [/* @__PURE__ */ jsx(Frame, { size: 14 }), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "App canvas"
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "studio-dev-toolbar-divider",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Hide developer toolbar",
+					title: "Hide toolbar",
+					onClick: () => setVisibility(true),
+					children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(UIConfigurationModal, { editorOnly: true }),
+		/* @__PURE__ */ jsx(PageInspector, {
+			open: inspecting,
+			onClose: () => setInspecting(false)
+		})
+	] });
+}
+//#endregion
+export { ColorModeSwitch, PageInspector, UIConfigurationModal, UIConfigurationProvider, UIDevToolbar, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };

package/dist/styles/configurator.css

@@ -4202,3 +4202,82 @@ html.studio-page-inspecting body {
 .studio-subtabs-bar .studio-theme-toggle + .studio-toggle-all {
   margin-left: 4px;
 }
+
+/* UIDevToolbar: matches the App Canvas docks, and stays independent of the app theme being configured. */
+.studio-dev-toolbar,
+.studio-dev-toolbar-tab {
+  position: fixed;
+  bottom: 12px;
+  z-index: 50;
+  box-sizing: border-box;
+  background: #fff;
+  border: 1px solid #e3e1e8;
+  box-shadow: 0 4px 16px #24202d12;
+  color: #45454d;
+}
+.studio-dev-toolbar {
+  left: 12px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 8px;
+}
+.studio-dev-toolbar button {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.studio-dev-toolbar button:hover {
+  background: #f1f1f4;
+}
+/* Labelled buttons read like the canvas tool dock: icon, then a 10px label. */
+.studio-dev-toolbar button.studio-dev-toolbar-labelled {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: auto;
+  padding: 0 8px;
+  font:
+    500 10px/1 Inter,
+    system-ui,
+    sans-serif;
+  white-space: nowrap;
+}
+.studio-dev-toolbar button[aria-pressed="true"] {
+  background: #eee8ff;
+  color: #6540c2;
+}
+.studio-dev-toolbar button:focus-visible,
+.studio-dev-toolbar-tab:focus-visible {
+  outline: 2px solid #7655d7;
+  outline-offset: 1px;
+}
+.studio-dev-toolbar-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: #e8e8eb;
+}
+/* Hidden: a small tab against the left edge that brings the dock back. */
+.studio-dev-toolbar-tab {
+  left: 0;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 36px;
+  padding: 0;
+  border-left: 0;
+  border-radius: 0 6px 6px 0;
+  cursor: pointer;
+}
+.studio-dev-toolbar-tab:hover {
+  background: #f1f1f4;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "5.0.0-rc.15",
+  "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.