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

package/dist/components/query-select.js

@@ -1,8 +1,8 @@
 import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "../import-BE0r63d8.js";
 import { t as FieldController } from "../form.binding-CG1RPv6o.js";
-import { t as getStaticInputFocusTarget } from "../useStaticInputHandoff-B7DEm75m.js";
-import { t as Select } from "../Select-CgIhoWgk.js";
+import { t as getStaticInputFocusTarget } from "../useStaticInputHandoff-DKsxpVck.js";
+import { t as Select } from "../Select-tNlFSbAC.js";
 import { n as getQueryItems, r as getSelectionIdsToResolve, t as useQueryAutocomplete } from "../useQueryAutocomplete-CraXvRm_.js";
 import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/select.js

@@ -1,2 +1,2 @@
-import { t as Select } from "../Select-CgIhoWgk.js";
+import { t as Select } from "../Select-tNlFSbAC.js";
 export { Select };

package/dist/components/text-area.js

@@ -1,2 +1,2 @@
-import { t as TextArea } from "../TextArea-uPffb457.js";
+import { t as TextArea } from "../TextArea-DuvFUjts.js";
 export { TextArea };

package/dist/components/time-picker.js

@@ -1,2 +1,2 @@
-import { t as TimePicker } from "../TimePicker-DN-i98z5.js";
+import { t as TimePicker } from "../TimePicker-CBkiE-Yq.js";
 export { TimePicker };

package/dist/config/app-canvas-tanstack.d.ts

@@ -1,4 +1,4 @@
-import { n as AppCanvasPage, r as AppCanvasPageProps, t as APP_CANVAS_PATH } from "../AppCanvasPage-BZ2mrKY4.js";
+import { n as AppCanvasPage, r as AppCanvasPageProps, t as APP_CANVAS_PATH } from "../AppCanvasPage-U9SxNwjS.js";
 import { AnyRoute } from "@tanstack/react-router";
 //#region src/app-canvas/tanstack.d.ts
 interface AppCanvasRouteOptions {

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-vta1j5YQ.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.d.ts

@@ -1,4 +1,4 @@
-import { a as AppCanvasProps, c as CanvasPage, d as CanvasRouter, f as discoverCanvasPages, i as AppCanvas, l as CanvasPosition, n as AppCanvasPage, o as CanvasBreakpoint, p as layoutCanvasPages, r as AppCanvasPageProps, s as defaultCanvasBreakpoints, t as APP_CANVAS_PATH, u as CanvasRouteExample } from "../AppCanvasPage-BZ2mrKY4.js";
+import { a as AppCanvasProps, c as CanvasPage, d as CanvasRouter, f as discoverCanvasPages, i as AppCanvas, l as CanvasPosition, n as AppCanvasPage, o as CanvasBreakpoint, p as layoutCanvasPages, r as AppCanvasPageProps, s as defaultCanvasBreakpoints, t as APP_CANVAS_PATH, u as CanvasRouteExample } from "../AppCanvasPage-U9SxNwjS.js";
 import "../configuration.context-3I7-wBII.js";
 //#region src/app-canvas/AppCanvasFrameBridge.d.ts
 /** Mount once inside the application's existing UIConfigurationProvider. No separate app copy or theme fork. */

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-vta1j5YQ.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

@@ -3,7 +3,40 @@ import { n as UIConfigOptions } from "../uiConfig.context-BksnNQyw.js";
 import { a as CvaDefinition, i as useUIConfiguration, n as UIConfigurationProvider, o as CvaEdits, r as UIConfigurationProviderProps, t as UIConfiguration } from "../configuration.context-3I7-wBII.js";
 import { a as parseThemeCss, i as exportCss, n as ThemeEdits, r as Tokens, t as Mode } from "../theme-model-T1zIdBg8.js";
 //#region src/configurator/UIConfigurator.d.ts
-declare function UIConfigurationModal(): import("react").JSX.Element | null;
+interface UIConfigurationModalProps {
+  /**
+   * Show only the editor, in the compact window the App Canvas uses: no components preview, and a 360px floating
+   * window. Open it with `openFloating`. Hosts that show the components themselves get this automatically.
+   */
+  editorOnly?: boolean;
+}
+declare function UIConfigurationModal({ editorOnly: editorOnlyProp }?: UIConfigurationModalProps): import("react").JSX.Element | null;
+//#endregion
+//#region src/configurator/PageInspector.d.ts
+interface PageInspectorProps {
+  /** While open, hovering the page inspects it and clicks pin elements instead of activating them. */
+  open: boolean;
+  onClose: () => void;
+}
+/**
+ * The App Canvas inspector for the live page: a sidebar with the box model, typography and colors of the hovered or
+ * pinned element, whose token links open the configurator on that token.
+ */
+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
 /**
@@ -24,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, type ThemeEdits, type Tokens, type UIConfiguration, UIConfigurationModal, 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,3 +1,214 @@
-import { d as useUIConfiguration, i as resolveUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal, u as UIConfigurationProvider } from "../UIConfigurator-CjAW1SJY.js";
-import { i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
-export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };
+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, 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";
+//#region src/configurator/PageInspector.tsx
+/** Inspector chrome, the configurator and anything a host marks are tools, never inspected or blocked. */
+const toolSelector = "[data-povio-inspector-ignore], .studio-overlay, .studio-floating-launcher";
+const isTool = (event) => event.target instanceof Element && !!event.target.closest(toolSelector);
+/**
+* The App Canvas inspector for the live page: a sidebar with the box model, typography and colors of the hovered or
+* pinned element, whose token links open the configurator on that token.
+*/
+function PageInspector(t0) {
+	const $ = c(17);
+	const { open, onClose } = t0;
+	const { defaults, revealToken } = useUIConfiguration();
+	let t1;
+	if ($[0] !== defaults) {
+		t1 = (name) => isEditableToken(name, defaults);
+		$[0] = defaults;
+		$[1] = t1;
+	} else t1 = $[1];
+	const inspector = useCanvasInspector(open, void 0, t1);
+	const { hoverPoint, selectPoint, clear } = inspector;
+	let t2;
+	let t3;
+	if ($[2] !== clear || $[3] !== hoverPoint || $[4] !== open || $[5] !== selectPoint) {
+		t2 = () => {
+			if (!open) return;
+			const move = (event) => {
+				if (!isTool(event)) hoverPoint(document, event.clientX, event.clientY);
+			};
+			const block = _temp;
+			const click = (event_1) => {
+				if (isTool(event_1)) return;
+				block(event_1);
+				selectPoint(document, event_1.clientX, event_1.clientY);
+			};
+			const key = (event_2) => {
+				if (event_2.key === "Escape" && !isTool(event_2)) clear();
+			};
+			const pressEvents = [
+				"pointerdown",
+				"mousedown",
+				"pointerup",
+				"mouseup",
+				"auxclick"
+			];
+			window.addEventListener("pointermove", move, true);
+			for (const type of pressEvents) window.addEventListener(type, block, true);
+			window.addEventListener("click", click, true);
+			window.addEventListener("keydown", key, true);
+			document.documentElement.classList.add("studio-page-inspecting");
+			return () => {
+				window.removeEventListener("pointermove", move, true);
+				for (const type_0 of pressEvents) window.removeEventListener(type_0, block, true);
+				window.removeEventListener("click", click, true);
+				window.removeEventListener("keydown", key, true);
+				document.documentElement.classList.remove("studio-page-inspecting");
+			};
+		};
+		t3 = [
+			open,
+			hoverPoint,
+			selectPoint,
+			clear
+		];
+		$[2] = clear;
+		$[3] = hoverPoint;
+		$[4] = open;
+		$[5] = selectPoint;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	if (!open) return null;
+	let t4;
+	if ($[8] !== inspector.measurement) {
+		t4 = inspector.measurement && /* @__PURE__ */ jsx(CanvasInspectionOverlay, {
+			className: "studio-page-inspection",
+			measurement: inspector.measurement,
+			width: window.innerWidth
+		});
+		$[8] = inspector.measurement;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== inspector || $[11] !== onClose || $[12] !== revealToken) {
+		t5 = /* @__PURE__ */ jsx(CanvasInspectorPanel, {
+			inspector,
+			onClose,
+			onSelectToken: revealToken,
+			className: "studio-page-inspector",
+			emptyHint: "Hover anything on the page to see its padding, margins, borders, radii and gaps."
+		});
+		$[10] = inspector;
+		$[11] = onClose;
+		$[12] = revealToken;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t4 || $[15] !== t5) {
+		t6 = createPortal(/* @__PURE__ */ jsxs(Fragment$1, { children: [t4, t5] }), document.body);
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+}
+function _temp(event_0) {
+	if (isTool(event_0)) return;
+	event_0.preventDefault();
+	event_0.stopPropagation();
+}
+//#endregion
+//#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/{datePickerValue.utils-QWR2q5Vv.js → datePickerValue.utils-BDB6KM8q.js}

@@ -4,7 +4,7 @@ import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { t as useBreakpoint } from "./useBreakpoint-DQoMN-BG.js";
-import { u as getPlaceholder } from "./staticDateTimeSegments-BWea3HAt.js";
+import { u as getPlaceholder } from "./staticDateTimeSegments-Bs1_N5MR.js";
 import { useEffect, useRef } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";