@glasshome/widget-sdk 1.8.1 → 1.9.1

package/dist/index.js

@@ -1,24 +1,24 @@
-import { n as e, r as t, t as n } from "./tokens-Bdfb1xYe.js";
-import { deprecate as r, deprecations as i, formatDeprecation as a } from "./deprecations.js";
-import { WidgetManifestSchema as o, formatSchemaError as s } from "./schemas.js";
-import { z as c, z as l } from "zod";
-import { getForecasts as u, getStream as d, getWebRtcClientConfig as f, hassMediaUrl as p, sendWebRtcCandidate as m, startWebRtcSession as h, state as g, trackEntityHistory as _, untrackEntityHistory as v } from "@glasshome/sync-layer";
-import { byDomain as ee, useArea as y, useCamera as b, useConnection as te, useCurrency as x, useEntities as ne, useEntity as S, useEntityHistory as re, useEntityStatistics as ie, useForecast as C, useHassConfig as ae, useLocale as oe, useService as se, useStore as ce, useTemperatureUnit as le, useToggle as ue, useTurnOff as de, useTurnOn as fe, useUnitSystem as pe } from "@glasshome/sync-layer/solid";
-import { Show as w, createEffect as T, createMemo as E, createSignal as D, on as O, onCleanup as k, onMount as me, splitProps as he, untrack as ge, useContext as A } from "solid-js";
-import { addEventListener as j, className as M, createComponent as N, delegateEvents as _e, effect as P, insert as F, memo as I, setStyleProperty as L, style as R, template as z, use as ve } from "solid-js/web";
-import { clsx as ye } from "clsx";
-import { twMerge as be } from "tailwind-merge";
+import { deprecate as e, deprecations as t, formatDeprecation as n } from "./deprecations.js";
+import { WidgetManifestSchema as r, formatSchemaError as i } from "./schemas.js";
+import { z as a, z as o } from "zod";
+import { getForecasts as s, getStream as c, getWebRtcClientConfig as l, hassMediaUrl as u, sendWebRtcCandidate as d, startWebRtcSession as f, state as p, trackEntityHistory as m, untrackEntityHistory as h } from "@glasshome/sync-layer";
+import { byDomain as g, useArea as _, useCamera as v, useConnection as ee, useCurrency as y, useEntities as b, useEntity as te, useEntityHistory as ne, useEntityStatistics as re, useForecast as x, useHassConfig as ie, useLocale as ae, useService as oe, useStore as se, useTemperatureUnit as S, useToggle as ce, useTurnOff as le, useTurnOn as ue, useUnitSystem as de } from "@glasshome/sync-layer/solid";
+import { Show as C, createContext as fe, createEffect as w, createMemo as T, createSignal as E, on as pe, onCleanup as D, onMount as me, splitProps as he, untrack as ge, useContext as O } from "solid-js";
+import { addEventListener as k, className as A, createComponent as j, delegateEvents as _e, effect as M, insert as N, memo as P, setStyleProperty as F, style as ve, template as I, use as ye } from "solid-js/web";
+import { clsx as be } from "clsx";
+import { twMerge as xe } from "tailwind-merge";
+import { Badge as Se, Button as Ce, ColorSlider as we, ColorWheel as Te, Input as Ee, Label as De, ResponsiveDialog as Oe, ResponsiveDialogContent as ke, ResponsiveDialogDescription as Ae, ResponsiveDialogHeader as je, ResponsiveDialogTitle as Me, SchemaForm as Ne, Select as Pe, SelectContent as Fe, SelectItem as Ie, SelectTrigger as Le, SelectValue as Re, Slider as ze, Switch as Be, parseColor as Ve } from "@glasshome/ui/solid";
 //#region src/framework/to-form-schema.ts
-function xe(e) {
-	return l.toJSONSchema(e, { override: (e) => {
-		let t = l.globalRegistry.get(e.zodSchema);
+function He(e) {
+	return o.toJSONSchema(e, { override: (e) => {
+		let t = o.globalRegistry.get(e.zodSchema);
 		return t && typeof t == "object" && Object.keys(t).length > 0 ? {
 			...e.jsonSchema,
 			...t
 		} : e.jsonSchema;
 	} });
 }
-function Se(e) {
+function Ue(e) {
 	try {
 		return e.parse({});
 	} catch {
@@ -27,68 +27,102 @@ function Se(e) {
 }
 //#endregion
 //#region src/define-widget.ts
-function Ce(e) {
-	return e.configSchema && (e.manifest.schema || (e.manifest.schema = xe(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = Se(e.configSchema))), e;
+function We(e) {
+	return e.configSchema && (e.manifest.schema || (e.manifest.schema = He(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = Ue(e.configSchema))), e;
+}
+//#endregion
+//#region src/framework/hooks/use-widget-context.ts
+var L = fe();
+function Ge() {
+	let e = O(L);
+	if (!e) throw Error("useWidgetContext must be used within a Widget component");
+	return e;
 }
 //#endregion
 //#region src/framework/hooks/use-service.ts
-function we(e) {
+function Ke(e) {
 	let t = Array.isArray(e) ? e[0] : e, n = t?.split(".")[0];
 	if (!n) throw Error(`Invalid entity ID: ${String(t)}`);
 	return n;
 }
-function B(e, t) {
-	return (n, r = {}) => e(we(n), t, r, { entity_id: n });
+function R(e, t) {
+	return (n, r = {}) => e(Ke(n), t, r, { entity_id: n });
 }
-function Te() {
-	let t = A(e)?.callService;
-	return t ? {
-		callService: t,
-		turnOn: B(t, "turn_on"),
-		turnOff: B(t, "turn_off"),
-		toggle: B(t, "toggle")
-	} : se();
+function qe() {
+	let e = O(L)?.callService;
+	return e ? {
+		callService: e,
+		turnOn: R(e, "turn_on"),
+		turnOff: R(e, "turn_off"),
+		toggle: R(e, "toggle")
+	} : oe();
 }
-function Ee() {
-	let t = A(e)?.callService;
-	return t ? B(t, "turn_on") : fe();
+function Je() {
+	let e = O(L)?.callService;
+	return e ? R(e, "turn_on") : ue();
 }
-function De() {
-	let t = A(e)?.callService;
-	return t ? B(t, "turn_off") : de();
+function Ye() {
+	let e = O(L)?.callService;
+	return e ? R(e, "turn_off") : le();
 }
-function Oe() {
-	let t = A(e)?.callService;
-	return t ? B(t, "toggle") : ue();
+function Xe() {
+	let e = O(L)?.callService;
+	return e ? R(e, "toggle") : ce();
 }
 //#endregion
 //#region src/framework/design-system/z-index.ts
-var V = {
+var z = {
 	BACKGROUND: 0,
 	CONTENT: 10,
 	OVERLAY: 20,
 	ACTIONS: 30
-};
+}, Ze = fe();
+function Qe() {
+	let e = O(Ze);
+	if (!e) throw Error("useWidgetDimensions must be called inside <Widget>: move the call into a component rendered within <Widget> (the top-level widget scope only sees the host stub).");
+	return e;
+}
+//#endregion
+//#region src/framework/theming/tokens.css?raw
+var $e = "/* Authoritative SDK CSS contract. Injected once on first Widget mount\n * via framework/theming/tokens.ts.\n *\n * All widget-internal visual scale is driven from CSS custom properties +\n * container queries on the `.glasshome-widget` shell (`container-type: size`).\n * No JS classifier, no size tier enum.\n */\n\n:root {\n  --tone-success:  oklch(0.70 0.18 145);\n  --tone-warning:  oklch(0.80 0.17 75);\n  --tone-danger:   oklch(0.64 0.22 27);\n  --tone-info:     oklch(0.66 0.20 245);\n  --tone-neutral:  oklch(0.65 0.02 250);\n  --tone-accent:   oklch(0.74 0.18 60);\n\n  --widget-grad-strength:    1;\n  --widget-glow-default:     0.4;\n  --widget-border-highlight: oklch(0.98 0 0 / 0.4);\n}\n\n.dark {\n  --tone-success:  oklch(0.74 0.18 145);\n  --tone-warning:  oklch(0.82 0.17 75);\n  --tone-danger:   oklch(0.68 0.22 27);\n  --tone-info:     oklch(0.70 0.20 245);\n  --tone-neutral:  oklch(0.69 0.02 250);\n  --tone-accent:   oklch(0.78 0.18 60);\n\n  --widget-grad-strength:    1.1;\n  --widget-glow-default:     0.5;\n  --widget-border-highlight: oklch(1 0 0 / 0.08);\n}\n\n@property --widget-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: oklch(0.65 0.02 250);\n}\n\n/* === Widget shell ===\n * Fluid scale tokens — tied to the shell's own container box (cqb=height, cqi=width).\n * Icon/pad/gap track HEIGHT (cqb) not the shortest side: two widgets of equal\n * height match regardless of width (a 2×2 and a 4×2 get the same icon). cqmin\n * starved portrait tiles by pinning the icon to the narrow width. Tune\n * multipliers / clamps to adjust density. */\n.glasshome-widget {\n  --widget-color: var(--tone-neutral);\n  --widget-glow-strength: var(--widget-glow-default);\n\n  --widget-icon-box:    clamp(44px, 25cqb, 58px);\n  --widget-icon-glyph:  clamp(24px, 14cqb, 33px);\n  --widget-pad:         clamp(8px,  3.5cqb, 22px);\n  --widget-gap:         clamp(6px,  2cqb,  14px);\n  --widget-title-size:  clamp(12px, 2cqi,    18px);\n  --widget-subtitle:    clamp(12px, 2.5cqi,  20px);\n  --widget-status-size: clamp(14px, 5cqi,    36px);\n  --widget-value-size:  clamp(18px, 7cqi,    48px);\n  --widget-badge-size:  clamp(11px, 1.6cqi,  14px);\n}\n\n/* Shell material. Two channels, both host/variant-driven:\n * - `--widget-backdrop`: the live backdrop filter (the shared glass recipe is\n *   blur + saturate, matching ui's CARD_BLUR). Default none — a variant opts\n *   in (classic-glass), and a performant-blur host disables it via override\n *   sheet when it paints a precomputed frost instead.\n * - `--glass-frost`: one full background layer (image + position / size +\n *   repeat) composited at the BOTTOM, under the accent gradient — the same\n *   frost slot ui's `.glass` formula ends its background list with. Unset →\n *   none. A performant-blur host sets it per shell with the viewport-aligned\n *   slice of its pre-blurred bitmap. */\n.glasshome-widget {\n  background:\n    var(--widget-gradient,\n      linear-gradient(135deg,\n        color-mix(in oklch, var(--widget-color) calc(22% * var(--widget-grad-strength)), transparent),\n        color-mix(in oklch, var(--widget-color-to, var(--widget-color)) calc(11% * var(--widget-grad-strength)), transparent)\n      )\n    ),\n    var(--glass-frost, none);\n  backdrop-filter: var(--widget-backdrop, none);\n  -webkit-backdrop-filter: var(--widget-backdrop, none);\n  box-shadow: inset 0 1px 0 var(--widget-border-highlight);\n}\n\n/* === Slot: content layout === */\n/* Default: column. Flip to row only on wide-and-short widgets (matches the\n * old contentLayout heuristic: aspect > 1 AND height < 150px). */\n.glasshome-widget-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: var(--widget-pad);\n  gap: var(--widget-gap);\n  overflow: hidden;\n}\n@container widget (min-aspect-ratio: 1) and (max-height: 149px) {\n  .glasshome-widget-content {\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n  }\n}\n\n/* === Compact 1×1 ===\n * Small in BOTH axes → stack the tile: icon on top, label + status centered\n * under it. Icon stays moderate (not a hero) so the text keeps room. Wide\n * tiles (2×1) fail the width test and keep the row layout above. Placed after\n * the row-flip so it wins. */\n@container widget (max-width: 189px) and (max-height: 189px) {\n  .glasshome-widget-content {\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    gap: clamp(4px, 2.5cqmin, 8px);\n  }\n  .glasshome-widget-content > * { align-items: center; text-align: center; }\n  .glasshome-widget-icon {\n    --widget-icon-box:   clamp(36px, 30cqmin, 56px);\n    --widget-icon-glyph: clamp(20px, 17cqmin, 32px);\n  }\n  .glasshome-widget-title  { font-size: clamp(11px, 6cqmin, 14px); max-width: 100%; }\n  .glasshome-widget-status,\n  .glasshome-widget-value  { font-size: clamp(13px, 7cqmin, 17px); }\n  .glasshome-widget-content [class*=\"ml-auto\"] { margin-left: 0 !important; }\n}\n.glasshome-widget-content [class*=\"ml-auto\"] {\n  position: relative;\n  z-index: 30;\n}\n\n/* === Slot: icon === */\n.glasshome-widget-icon {\n  width: var(--widget-icon-box);\n  height: var(--widget-icon-box);\n  border-radius: var(--radius-sm, 12px);\n  background: var(--widget-icon-color, var(--widget-color));\n  box-shadow: 0 0 calc(var(--widget-glow-strength) * 30px)\n    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 50%, transparent);\n  color: oklch(from var(--widget-icon-color, var(--widget-color)) calc(0.52 + sign(0.5 - l) * 0.43) calc(c * 0.2) h);\n}\n.glasshome-widget-icon-glyph {\n  font-size: var(--widget-icon-glyph);\n  line-height: 1;\n}\n.glasshome-widget-icon-stack {\n  position: absolute;\n  width: 102%;\n  height: 102%;\n  border-radius: var(--radius-sm, 12px);\n}\n.glasshome-widget-icon-stack-2 { bottom: -14%; right: -10%; opacity: 0.45; z-index: -2; }\n.glasshome-widget-icon-stack-3 { bottom: -28%; right: -20%; opacity: 0.20; z-index: -3; }\n\n/* === Slot: text === */\n.glasshome-widget-title {\n  font-size: var(--widget-title-size);\n  line-height: 1.2;\n  color: color-mix(in oklch, var(--color-foreground, currentColor) 60%, transparent);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.glasshome-widget-subtitle {\n  font-size: var(--widget-subtitle);\n  color: color-mix(in oklch, var(--color-foreground, currentColor) 60%, transparent);\n}\n.glasshome-widget-status {\n  font-size: var(--widget-status-size);\n  font-weight: 700;\n  color: var(--color-foreground, currentColor);\n  line-height: 1.1;\n}\n.glasshome-widget-value {\n  font-size: var(--widget-value-size);\n  font-weight: 700;\n  color: var(--color-foreground, currentColor);\n  line-height: 1.05;\n}\n.glasshome-widget-badge {\n  font-size: var(--widget-badge-size);\n  font-weight: 500;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  background: color-mix(in oklch, var(--color-foreground, currentColor) 20%, transparent);\n  color: var(--color-foreground, currentColor);\n}\n\n.glasshome-widget-loading {\n  background: color-mix(in oklch, var(--widget-color) 20%, transparent);\n}\n\n/* === Slider fill ===\n * Value flows in via --widget-fill-value (0-100). Vertical orientation auto-\n * detected via container query. */\n.glasshome-widget-slider-fill {\n  --widget-fill-value: 0;\n  background: color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 30%, transparent);\n  box-shadow: 0 0 calc(var(--widget-glow-strength) * 40px)\n    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 40%, transparent);\n  clip-path: inset(0 calc((100 - var(--widget-fill-value)) * 1%) 0 0);\n}\n@container widget (max-aspect-ratio: 1) {\n  .glasshome-widget-slider-fill {\n    clip-path: inset(calc((100 - var(--widget-fill-value)) * 1%) 0 0 0);\n  }\n}\n", et = !1, B, tt = /* @__PURE__ */ new WeakSet();
+function nt() {
+	return B || (B = new CSSStyleSheet(), B.replaceSync($e.replace(/:root\b/g, ":host").replace(/^\.dark\b/gm, ":host(.dark)"))), B;
+}
+function rt(e) {
+	if (typeof ShadowRoot < "u" && e instanceof ShadowRoot) {
+		if (tt.has(e)) return;
+		let t = nt();
+		e.adoptedStyleSheets.includes(t) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, t]), tt.add(e);
+		return;
+	}
+	if (et) return;
+	let t = e ?? (typeof document > "u" ? void 0 : document);
+	if (!t) return;
+	if (t.head.querySelector?.("style[data-glasshome-tokens]")) {
+		et = !0;
+		return;
+	}
+	let n = t.createElement("style");
+	n.setAttribute("data-glasshome-tokens", ""), n.textContent = $e, t.head.appendChild(n), et = !0;
+}
 //#endregion
 //#region src/framework/utils/cn.ts
-function H(...e) {
-	return be(ye(e));
+function V(...e) {
+	return xe(be(e));
 }
-var ke = {
+var it = {
 	"classic-glass": {
 		id: "classic-glass",
 		name: "Classic Glass",
 		description: "Default glassmorphism design with blur background and gradient",
-		styles: {
-			cssVars: {
-				"--widget-bg": "rgba(255, 255, 255, 0.1)",
-				"--widget-border": "rgba(255, 255, 255, 0.2)",
-				"--widget-blur": "12px",
-				"--widget-shadow": "0 8px 32px rgba(0, 0, 0, 0.2)",
-				"--widget-padding": "1.5rem"
-			},
-			class: "backdrop-blur-xl"
-		},
+		styles: { cssVars: {
+			"--widget-bg": "rgba(255, 255, 255, 0.1)",
+			"--widget-border": "rgba(255, 255, 255, 0.2)",
+			"--widget-blur": "12px",
+			"--widget-shadow": "0 8px 32px rgba(0, 0, 0, 0.2)",
+			"--widget-padding": "1.5rem",
+			"--widget-backdrop": "blur(var(--glass-blur, 24px)) saturate(1.8)"
+		} },
 		layout: {
 			type: "flex",
 			direction: "column",
@@ -134,16 +168,14 @@ var ke = {
 		id: "compact-horizontal",
 		name: "Compact Horizontal",
 		description: "Horizontal layout for compact widgets",
-		styles: {
-			cssVars: {
-				"--widget-bg": "rgba(255, 255, 255, 0.08)",
-				"--widget-border": "rgba(255, 255, 255, 0.15)",
-				"--widget-blur": "10px",
-				"--widget-padding": "1rem",
-				"--widget-icon-size": "2.5rem"
-			},
-			class: "backdrop-blur-lg"
-		},
+		styles: { cssVars: {
+			"--widget-bg": "rgba(255, 255, 255, 0.08)",
+			"--widget-border": "rgba(255, 255, 255, 0.15)",
+			"--widget-blur": "10px",
+			"--widget-padding": "1rem",
+			"--widget-icon-size": "2.5rem",
+			"--widget-backdrop": "blur(16px) saturate(1.8)"
+		} },
 		layout: {
 			type: "flex",
 			direction: "row",
@@ -160,22 +192,22 @@ var ke = {
 		}
 	}
 };
-function Ae(e) {
-	return ke[e];
+function at(e) {
+	return it[e];
 }
 //#endregion
 //#region src/framework/backgrounds/WidgetSliderFill.tsx
-var je = /*#__PURE__*/ z("<div>");
-function Me(e) {
+var ot = /*#__PURE__*/ I("<div>");
+function st(e) {
 	return (() => {
-		var t = je();
-		return P((n) => {
-			var r = H("glasshome-widget-slider-fill pointer-events-none absolute inset-0", e.isDragging ? "duration-0" : "transition-all duration-300 ease-out", e.class), i = {
+		var t = ot();
+		return M((n) => {
+			var r = V("glasshome-widget-slider-fill pointer-events-none absolute inset-0", e.isDragging ? "duration-0" : "transition-all duration-300 ease-out", e.class), i = {
 				"--widget-fill-value": e.value,
-				"z-index": V.BACKGROUND,
+				"z-index": z.BACKGROUND,
 				...e.color ? { "--widget-icon-color": e.color } : {}
 			};
-			return r !== n.e && M(t, n.e = r), n.t = R(t, i, n.t), n;
+			return r !== n.e && A(t, n.e = r), n.t = ve(t, i, n.t), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -184,37 +216,37 @@ function Me(e) {
 }
 //#endregion
 //#region src/framework/components/WidgetContent.tsx
-var Ne = /*#__PURE__*/ z("<div>");
-function Pe(e) {
+var ct = /*#__PURE__*/ I("<div>");
+function lt(e) {
 	return (() => {
-		var t = Ne();
-		return F(t, () => e.children), P(() => M(t, H("glasshome-widget-content", e.class))), t;
+		var t = ct();
+		return N(t, () => e.children), M(() => A(t, V("glasshome-widget-content", e.class))), t;
 	})();
 }
 //#endregion
 //#region src/framework/components/WidgetIcon.tsx
-var Fe = /*#__PURE__*/ z("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-2\">"), Ie = /*#__PURE__*/ z("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-3\">"), Le = /*#__PURE__*/ z("<div><div class=\"glasshome-widget-icon-glyph flex items-center justify-center\">");
-function Re(e) {
+var ut = /*#__PURE__*/ I("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-2\">"), dt = /*#__PURE__*/ I("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-3\">"), ft = /*#__PURE__*/ I("<div><div class=\"glasshome-widget-icon-glyph flex items-center justify-center\">");
+function pt(e) {
 	let t = () => e.entityCount ?? 1;
 	return (() => {
-		var n = Le(), r = n.firstChild;
-		return F(n, N(w, {
+		var n = ft(), r = n.firstChild;
+		return N(n, j(C, {
 			get when() {
 				return t() >= 2;
 			},
 			get children() {
-				return Fe();
+				return ut();
 			}
-		}), r), F(n, N(w, {
+		}), r), N(n, j(C, {
 			get when() {
 				return t() >= 3;
 			},
 			get children() {
-				return Ie();
+				return dt();
 			}
-		}), r), F(r, () => e.icon), P((t) => {
-			var r = H("glasshome-widget-icon", "relative flex shrink-0 items-center justify-center pointer-events-none transition-all", e.dimmed && "opacity-50", e.class), i = e.color ? { "--widget-icon-color": e.color } : void 0;
-			return r !== t.e && M(n, t.e = r), t.t = R(n, i, t.t), t;
+		}), r), N(r, () => e.icon), M((t) => {
+			var r = V("glasshome-widget-icon", "relative flex shrink-0 items-center justify-center pointer-events-none transition-all", e.dimmed && "opacity-50", e.class), i = e.color ? { "--widget-icon-color": e.color } : void 0;
+			return r !== t.e && A(n, t.e = r), t.t = ve(n, i, t.t), t;
 		}, {
 			e: void 0,
 			t: void 0
@@ -223,16 +255,16 @@ function Re(e) {
 }
 //#endregion
 //#region src/framework/components/WidgetStatus.tsx
-var ze = /*#__PURE__*/ z("<p>");
-function Be(e) {
+var mt = /*#__PURE__*/ I("<p>");
+function ht(e) {
 	return (() => {
-		var t = ze();
-		return F(t, (() => {
-			var t = I(() => !!e.isUnavailable);
+		var t = mt();
+		return N(t, (() => {
+			var t = P(() => !!e.isUnavailable);
 			return () => t() ? "Unavailable" : e.children;
-		})()), P((n) => {
-			var r = H("glasshome-widget-status", "relative", e.dimmed && "opacity-40", e.class), i = V.ACTIONS;
-			return r !== n.e && M(t, n.e = r), i !== n.t && L(t, "z-index", n.t = i), n;
+		})()), M((n) => {
+			var r = V("glasshome-widget-status", "relative", e.dimmed && "opacity-40", e.class), i = z.ACTIONS;
+			return r !== n.e && A(t, n.e = r), i !== n.t && F(t, "z-index", n.t = i), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -241,21 +273,21 @@ function Be(e) {
 }
 //#endregion
 //#region src/framework/components/WidgetTitle.tsx
-var Ve = /*#__PURE__*/ z("<span class=\"glasshome-widget-badge shrink-0\">"), He = /*#__PURE__*/ z("<div><h3 class=glasshome-widget-title>");
-function Ue(e) {
+var gt = /*#__PURE__*/ I("<span class=\"glasshome-widget-badge shrink-0\">"), _t = /*#__PURE__*/ I("<div><h3 class=glasshome-widget-title>");
+function vt(e) {
 	return (() => {
-		var t = He(), n = t.firstChild;
-		return F(n, () => e.children), F(t, N(w, {
+		var t = _t(), n = t.firstChild;
+		return N(n, () => e.children), N(t, j(C, {
 			get when() {
-				return I(() => e.badge !== void 0)() && e.badge > 0;
+				return P(() => e.badge !== void 0)() && e.badge > 0;
 			},
 			get children() {
-				var t = Ve();
-				return F(t, () => e.badge), t;
+				var t = gt();
+				return N(t, () => e.badge), t;
 			}
-		}), null), P((n) => {
-			var r = H("relative flex items-center gap-2", e.class), i = V.ACTIONS;
-			return r !== n.e && M(t, n.e = r), i !== n.t && L(t, "z-index", n.t = i), n;
+		}), null), M((n) => {
+			var r = V("relative flex items-center gap-2", e.class), i = z.ACTIONS;
+			return r !== n.e && A(t, n.e = r), i !== n.t && F(t, "z-index", n.t = i), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -264,7 +296,7 @@ function Ue(e) {
 }
 //#endregion
 //#region src/framework/utils/entity-aggregation.ts
-function We(e, t = !1) {
+function yt(e, t = !1) {
 	if (e.length === 0) return {
 		isGroup: !1,
 		state: "unknown",
@@ -287,7 +319,7 @@ function We(e, t = !1) {
 			isUnavailable: t.state === "unavailable",
 			brightness: r,
 			brightnessPercent: i,
-			color: qe(t),
+			color: St(t),
 			onCount: +!!n,
 			totalCount: 1,
 			description: n ? "On" : "Off"
@@ -299,7 +331,7 @@ function We(e, t = !1) {
 			if (r++, t.attributes?.brightness !== void 0 && (s += t.attributes.brightness, c++), t.attributes?.rgb_color) l.push(t.attributes.rgb_color);
 			else if (t.attributes?.hs_color) {
 				let [e, n] = t.attributes.hs_color;
-				l.push(Ke(e, n));
+				l.push(xt(e, n));
 			}
 			break;
 		case "off":
@@ -308,9 +340,7 @@ function We(e, t = !1) {
 		case "unknown":
 			a++;
 			break;
-		case "unavailable":
-			o++;
-			break;
+		case "unavailable": o++;
 	}
 	let u = e.length, d = o === u, f = a + o === u, p = r > 0, m = r === u, h = i === u, g, _;
 	t ? d ? (g = "unavailable", _ = !1) : a > 0 || o > 0 ? (g = "unknown", _ = !1) : i > 0 ? (g = "off", _ = !1) : (g = "on", _ = !0) : d ? (g = "unavailable", _ = !1) : f ? (g = "unknown", _ = !1) : p ? (g = "on", _ = !0) : (g = "off", _ = !1);
@@ -318,7 +348,7 @@ function We(e, t = !1) {
 	if (l.length > 0) {
 		let e = Math.round(l.reduce((e, t) => e + t[0], 0) / l.length), t = Math.round(l.reduce((e, t) => e + t[1], 0) / l.length), n = Math.round(l.reduce((e, t) => e + t[2], 0) / l.length), r = v / 255;
 		y = `rgb(${Math.round(e * r)}, ${Math.round(t * r)}, ${Math.round(n * r)})`;
-	} else y = qe(e[0]);
+	} else y = St(e[0]);
 	let b;
 	return b = m ? "All on" : h ? "All off" : r > 0 ? `${r} of ${u} on` : "Off", {
 		isGroup: n,
@@ -333,7 +363,7 @@ function We(e, t = !1) {
 		description: b
 	};
 }
-function Ge(e, t = "mean", n = !0) {
+function bt(e, t = "mean", n = !0) {
 	if (e.length === 0) return {
 		isGroup: !1,
 		state: "unknown",
@@ -429,7 +459,7 @@ function Ge(e, t = "mean", n = !0) {
 		memberValues: a
 	};
 }
-function Ke(e, t) {
+function xt(e, t) {
 	let n = t / 100, r = n * (1 - Math.abs(e / 60 % 2 - 1)), i = 1 - n, a = 0, o = 0, s = 0;
 	return e < 60 ? [a, o] = [n, r] : e < 120 ? [a, o] = [r, n] : e < 180 ? [o, s] = [n, r] : e < 240 ? [o, s] = [r, n] : e < 300 ? [a, s] = [r, n] : [a, s] = [n, r], [
 		(a + i) * 255,
@@ -437,7 +467,7 @@ function Ke(e, t) {
 		(s + i) * 255
 	];
 }
-function qe(e) {
+function St(e) {
 	if (e.state !== "on") return "rgb(100, 100, 100)";
 	let t = (e.attributes?.brightness ?? 255) / 255;
 	if (e.attributes?.rgb_color) {
@@ -445,7 +475,7 @@ function qe(e) {
 		return `rgb(${Math.round(n * t)}, ${Math.round(r * t)}, ${Math.round(i * t)})`;
 	}
 	if (e.attributes?.hs_color) {
-		let [n, r] = e.attributes.hs_color, [i, a, o] = Ke(n, r);
+		let [n, r] = e.attributes.hs_color, [i, a, o] = xt(n, r);
 		return `rgb(${Math.round(i * t)}, ${Math.round(a * t)}, ${Math.round(o * t)})`;
 	}
 	if (e.attributes?.color_temp) {
@@ -456,7 +486,7 @@ function qe(e) {
 }
 //#endregion
 //#region src/framework/utils/entity-state.ts
-function Je(e) {
+function Ct(e) {
 	if (!e) return !1;
 	if ([
 		"on",
@@ -472,15 +502,15 @@ function Je(e) {
 	}
 	return !1;
 }
-function Ye(e, t, n) {
+function wt(e, t, n) {
 	return e?.attributes ? e.attributes[t] ?? n : n;
 }
-function Xe(e) {
-	return e.filter(Je).length;
+function Tt(e) {
+	return e.filter(Ct).length;
 }
 //#endregion
 //#region src/framework/utils/format-value.ts
-function Ze(e, t, n) {
+function Et(e, t, n) {
 	let { decimals: r, scale: i = !0 } = n || {};
 	if (typeof e == "string") return t ? `${e}${t}` : e;
 	if (e == null || Number.isNaN(e)) return t ? `--${t}` : "--";
@@ -491,41 +521,41 @@ function Ze(e, t, n) {
 }
 //#endregion
 //#region src/framework/utils/interpret-value.ts
-function Qe(e, t) {
+function Dt(e, t) {
 	return e == null || isNaN(e) ? null : t === "°C" ? e < 10 ? "Cold" : e < 18 ? "Cool" : e < 24 ? "Comfortable" : e < 28 ? "Warm" : "Hot" : t === "°F" ? e < 50 ? "Cold" : e < 64 ? "Cool" : e < 75 ? "Comfortable" : e < 82 ? "Warm" : "Hot" : t === "%" ? e < 20 ? "Very Low" : e < 40 ? "Low" : e < 60 ? "Medium" : e < 80 ? "High" : "Very High" : t === "ppm" ? e < 400 ? "Excellent" : e < 600 ? "Good" : e < 1e3 ? "Acceptable" : e < 1500 ? "Mediocre" : "Poor" : t === "lx" ? e < 50 ? "Dark" : e < 200 ? "Dim" : e < 500 ? "Moderate" : e < 1e3 ? "Bright" : "Very Bright" : t === "AQI" ? e <= 50 ? "Good" : e <= 100 ? "Moderate" : e <= 150 ? "Unhealthy for Sensitive" : e <= 200 ? "Unhealthy" : e <= 300 ? "Very Unhealthy" : "Hazardous" : t === "dB" ? e < 30 ? "Very Quiet" : e < 50 ? "Quiet" : e < 70 ? "Moderate" : e < 85 ? "Loud" : "Very Loud" : null;
 }
 //#endregion
 //#region src/framework/components/WidgetValue.tsx
-var $e = /*#__PURE__*/ z("<div class=glasshome-widget-subtitle>"), et = /*#__PURE__*/ z("<div><div class=glasshome-widget-value>");
-function tt(e) {
+var Ot = /*#__PURE__*/ I("<div class=glasshome-widget-subtitle>"), kt = /*#__PURE__*/ I("<div><div class=glasshome-widget-value>");
+function At(e) {
 	return (() => {
-		var t = et(), n = t.firstChild;
-		return F(n, () => Ze(e.value, e.unit)), F(t, N(w, {
+		var t = kt(), n = t.firstChild;
+		return N(n, () => Et(e.value, e.unit)), N(t, j(C, {
 			get when() {
-				return I(() => !!e.interpret)() && typeof e.value == "number";
+				return P(() => !!e.interpret)() && typeof e.value == "number";
 			},
 			get children() {
-				var t = $e();
-				return F(t, () => Qe(e.value, e.unit)), t;
+				var t = Ot();
+				return N(t, () => Dt(e.value, e.unit)), t;
 			}
-		}), null), P(() => M(t, H("flex flex-col", e.class))), t;
+		}), null), M(() => A(t, V("flex flex-col", e.class))), t;
 	})();
 }
 //#endregion
 //#region src/framework/core/Widget.tsx
-var nt = /*#__PURE__*/ z("<div><div class=\"relative h-full w-full\">"), rt = /*#__PURE__*/ z("<div class=\"glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse\">"), it = /*#__PURE__*/ z("<div class=\"flex h-full w-full flex-col items-center justify-center gap-2 text-center\">"), at = /*#__PURE__*/ z("<div class=\"flex items-center justify-center text-white/30\">"), ot = /*#__PURE__*/ z("<h3 class=\"font-semibold text-sm text-white/60\">"), st = /*#__PURE__*/ z("<p class=\"text-white/50 text-xs\">");
-function ct(t) {
-	let r = A(e), [i, a] = D(), [o, s] = D({
+var jt = /*#__PURE__*/ I("<div><div class=\"relative h-full w-full\">"), Mt = /*#__PURE__*/ I("<div class=\"glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse\">"), Nt = /*#__PURE__*/ I("<div class=\"flex h-full w-full flex-col items-center justify-center gap-2 text-center\">"), Pt = /*#__PURE__*/ I("<div class=\"flex items-center justify-center text-white/30\">"), Ft = /*#__PURE__*/ I("<h3 class=\"font-semibold text-sm text-white/60\">"), It = /*#__PURE__*/ I("<p class=\"text-white/50 text-xs\">");
+function Lt(t) {
+	let n = O(L), [r, i] = E(), [a, o] = E({
 		width: 0,
 		height: 0
 	});
-	T(() => {
-		let e = i();
+	w(() => {
+		let e = r();
 		if (!e) return;
 		let t = new ResizeObserver(([e]) => {
 			if (!e) return;
 			let t = e.borderBoxSize?.[0];
-			s(t ? {
+			o(t ? {
 				width: t.inlineSize,
 				height: t.blockSize
 			} : {
@@ -533,133 +563,159 @@ function ct(t) {
 				height: e.contentRect.height
 			});
 		});
-		t.observe(e), k(() => t.disconnect());
+		t.observe(e), D(() => t.disconnect());
 	}), me(() => {
-		let e = i()?.getRootNode();
-		n(typeof ShadowRoot < "u" && e instanceof ShadowRoot || typeof Document < "u" && e instanceof Document ? e : void 0);
+		let e = r()?.getRootNode();
+		rt(typeof ShadowRoot < "u" && e instanceof ShadowRoot || typeof Document < "u" && e instanceof Document ? e : void 0);
 	});
-	let c = {
-		isEditMode: () => t.isEditMode ?? !1,
-		updateConfig: r?.updateConfig ?? (() => {}),
-		registerDialogOpener: r?.registerDialogOpener,
-		callService: r?.callService,
-		dimensions: () => o()
-	}, l = E(() => {
-		if (t.variant) return typeof t.variant == "string" ? Ae(t.variant) : t.variant;
-	}), u = E(() => ({
+	let s = {
+		updateConfig: n?.updateConfig ?? (() => {}),
+		registerDialogOpener: n?.registerDialogOpener,
+		callService: n?.callService,
+		dimensions: e(() => a(), "ctx.dimensions")
+	}, c = T(() => {
+		if (t.variant) return typeof t.variant == "string" ? at(t.variant) : t.variant;
+	}), l = T(() => ({
 		"container-type": "size",
 		"container-name": "widget",
 		"touch-action": t.gestures && !t.isEditMode ? t.gestures.touchAction() : void 0,
-		...l()?.styles?.container,
-		...l()?.styles?.cssVars || {},
+		...c()?.styles?.container,
+		...c()?.styles?.cssVars || {},
 		...t.tone ? { "--widget-color": `var(--tone-${t.tone})` } : {},
 		...t.color ? { "--widget-color": t.color } : {},
 		...t.colorTo ? { "--widget-color-to": t.colorTo } : {},
 		...t.gradient ? { "--widget-gradient": t.gradient } : {}
-	})), d = () => !!t.gestures && !t.isEditMode, f = (e) => {
-		d() && t.gestures?.onPointerEnter(e);
+	})), u = () => !!t.gestures && !t.isEditMode, d = (e) => {
+		u() && t.gestures?.onPointerEnter(e);
+	}, f = (e) => {
+		u() && t.gestures?.onPointerDown(e);
 	}, p = (e) => {
-		d() && t.gestures?.onPointerDown(e);
+		u() && t.gestures?.onPointerMove(e);
 	}, m = (e) => {
-		d() && t.gestures?.onPointerMove(e);
+		u() && t.gestures?.onPointerUp(e);
 	}, h = (e) => {
-		d() && t.gestures?.onPointerUp(e);
-	}, g = (e) => {
-		d() && t.gestures?.onPointerCancel(e);
+		u() && t.gestures?.onPointerCancel(e);
 	};
-	return N(e.Provider, {
-		value: c,
+	return j(L.Provider, {
+		value: s,
 		get children() {
-			var e = nt(), n = e.firstChild;
-			return j(e, "pointercancel", g), j(e, "pointerup", h), j(e, "pointermove", m), j(e, "pointerdown", p), j(e, "pointerenter", f), ve((e) => {
-				a(e), t.gestures?.bindElement(e);
-			}, e), F(n, (() => {
-				var e = I(() => !!t.emptyState);
-				return () => e() ? N(lt, {
-					get icon() {
-						return t.emptyState.icon;
-					},
-					get title() {
-						return t.emptyState.title;
-					},
-					get message() {
-						return t.emptyState.message;
-					}
-				}) : t.children;
-			})()), F(e, (() => {
-				var e = I(() => !!t.loading);
-				return () => e() && (() => {
-					var e = rt();
-					return P((t) => L(e, "z-index", V.OVERLAY)), e;
-				})();
-			})(), null), P((r) => {
-				var i = H("glasshome-widget", "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50", l()?.styles?.class, t.class), a = u(), o = V.CONTENT;
-				return i !== r.e && M(e, r.e = i), r.t = R(e, a, r.t), o !== r.a && L(n, "z-index", r.a = o), r;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0
-			}), e;
+			return j(Ze.Provider, {
+				value: a,
+				get children() {
+					var e = jt(), n = e.firstChild;
+					return k(e, "pointercancel", h), k(e, "pointerup", m), k(e, "pointermove", p), k(e, "pointerdown", f), k(e, "pointerenter", d), ye((e) => {
+						i(e), t.gestures?.bindElement(e);
+					}, e), N(n, (() => {
+						var e = P(() => !!t.emptyState);
+						return () => e() ? j(Rt, {
+							get icon() {
+								return t.emptyState.icon;
+							},
+							get title() {
+								return t.emptyState.title;
+							},
+							get message() {
+								return t.emptyState.message;
+							}
+						}) : t.children;
+					})()), N(e, (() => {
+						var e = P(() => !!t.loading);
+						return () => e() && (() => {
+							var e = Mt();
+							return M((t) => F(e, "z-index", z.OVERLAY)), e;
+						})();
+					})(), null), M((r) => {
+						var i = V("glasshome-widget", "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50", c()?.styles?.class, t.class), a = l(), o = z.CONTENT;
+						return i !== r.e && A(e, r.e = i), r.t = ve(e, a, r.t), o !== r.a && F(n, "z-index", r.a = o), r;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0
+					}), e;
+				}
+			});
 		}
 	});
 }
-function lt(e) {
+function Rt(e) {
 	return (() => {
-		var t = it();
-		return F(t, (() => {
-			var t = I(() => !!e.icon);
+		var t = Nt();
+		return N(t, (() => {
+			var t = P(() => !!e.icon);
 			return () => t() && (() => {
-				var t = at();
-				return F(t, () => e.icon), t;
+				var t = Pt();
+				return N(t, () => e.icon), t;
 			})();
-		})(), null), F(t, (() => {
-			var t = I(() => !!e.title);
+		})(), null), N(t, (() => {
+			var t = P(() => !!e.title);
 			return () => t() && (() => {
-				var t = ot();
-				return F(t, () => e.title), t;
+				var t = Ft();
+				return N(t, () => e.title), t;
 			})();
-		})(), null), F(t, (() => {
-			var t = I(() => !!e.message);
+		})(), null), N(t, (() => {
+			var t = P(() => !!e.message);
 			return () => t() && (() => {
-				var t = st();
-				return F(t, () => e.message), t;
+				var t = It();
+				return N(t, () => e.message), t;
 			})();
 		})(), null), t;
 	})();
 }
-var U = ct;
-U.Content = Pe, U.Icon = Re, U.Title = Ue, U.Status = Be, U.Value = tt, U.SliderFill = Me;
+var H = Lt;
+H.Content = lt, H.Icon = pt, H.Title = vt, H.Status = ht, H.Value = At, H.SliderFill = st;
+//#endregion
+//#region src/framework/dialogs/validate-config.ts
+function zt(e) {
+	let t = "";
+	for (let n of e) t += typeof n == "number" ? `[${n}]` : t ? `.${String(n)}` : String(n);
+	return t;
+}
+function Bt(e, t) {
+	let n = e.safeParse(t);
+	return n.success ? null : n.error.issues.map((e) => {
+		let t = zt(e.path);
+		return t ? `${t}: ${e.message}` : e.message;
+	});
+}
 //#endregion
 //#region src/framework/dialogs/WidgetDialog.tsx
-var ut = /*#__PURE__*/ z("<span class=\"inline-flex size-3.5 shrink-0 items-center\">"), dt = /*#__PURE__*/ z("<button type=button>"), ft = /*#__PURE__*/ z("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\">"), pt = /*#__PURE__*/ z("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No edit options available"), mt = /*#__PURE__*/ z("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2><line x1=4 y1=21 x2=4 y2=14></line><line x1=4 y1=10 x2=4 y2=3></line><line x1=12 y1=21 x2=12 y2=12></line><line x1=12 y1=8 x2=12 y2=3></line><line x1=20 y1=21 x2=20 y2=16></line><line x1=20 y1=12 x2=20 y2=3></line><line x1=1 y1=14 x2=7 y2=14></line><line x1=9 y1=8 x2=15 y2=8></line><line x1=17 y1=16 x2=23 y2=16>"), ht = /*#__PURE__*/ z("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No additional controls"), gt = /*#__PURE__*/ z("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2><path d=\"m8 2 1.88 1.88\"></path><path d=\"M14.12 3.88 16 2\"></path><path d=\"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1\"></path><path d=\"M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6\"></path><path d=\"M12 20v-9\"></path><path d=\"M6.53 9C4.6 8.8 3 7.1 3 5\"></path><path d=\"M6 13H2\"></path><path d=\"M3 21c0-2.1 1.7-3.9 3.8-4\"></path><path d=\"M20.97 5c0 2.1-1.6 3.8-3.5 4\"></path><path d=\"M22 13h-4\"></path><path d=\"M17.2 17c2.1.1 3.8 1.9 3.8 4\">"), _t = /*#__PURE__*/ z("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No debug information available"), vt = /*#__PURE__*/ z("<div class=\"min-w-0 shrink-0\">"), yt = /*#__PURE__*/ z("<div class=\"flex items-center gap-2\"><div class=\"flex h-8 items-center rounded-lg border border-border/50 bg-muted/30 p-0.5\">"), bt = /*#__PURE__*/ z("<div class=\"gh-scroll min-h-0 flex-1 overflow-y-auto px-6\">"), xt = /*#__PURE__*/ z("<div class=\"flex shrink-0 items-center justify-end gap-2 border-border/50 border-t px-6 pt-3\">");
-function St(e) {
+var Vt = /*#__PURE__*/ I("<span class=\"inline-flex size-3.5 shrink-0 items-center\">"), Ht = /*#__PURE__*/ I("<button type=button>"), Ut = /*#__PURE__*/ I("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\">"), Wt = /*#__PURE__*/ I("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No edit options available"), Gt = /*#__PURE__*/ I("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2><line x1=4 y1=21 x2=4 y2=14></line><line x1=4 y1=10 x2=4 y2=3></line><line x1=12 y1=21 x2=12 y2=12></line><line x1=12 y1=8 x2=12 y2=3></line><line x1=20 y1=21 x2=20 y2=16></line><line x1=20 y1=12 x2=20 y2=3></line><line x1=1 y1=14 x2=7 y2=14></line><line x1=9 y1=8 x2=15 y2=8></line><line x1=17 y1=16 x2=23 y2=16>"), Kt = /*#__PURE__*/ I("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No additional controls"), qt = /*#__PURE__*/ I("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2><path d=\"m8 2 1.88 1.88\"></path><path d=\"M14.12 3.88 16 2\"></path><path d=\"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1\"></path><path d=\"M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6\"></path><path d=\"M12 20v-9\"></path><path d=\"M6.53 9C4.6 8.8 3 7.1 3 5\"></path><path d=\"M6 13H2\"></path><path d=\"M3 21c0-2.1 1.7-3.9 3.8-4\"></path><path d=\"M20.97 5c0 2.1-1.6 3.8-3.5 4\"></path><path d=\"M22 13h-4\"></path><path d=\"M17.2 17c2.1.1 3.8 1.9 3.8 4\">"), Jt = /*#__PURE__*/ I("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No debug information available"), Yt = /*#__PURE__*/ I("<div class=\"min-w-0 shrink-0\">"), Xt = /*#__PURE__*/ I("<div class=\"flex items-center gap-2\"><div class=\"flex h-8 items-center rounded-lg border border-border/50 bg-muted/30 p-0.5\">"), Zt = /*#__PURE__*/ I("<div class=\"gh-scroll min-h-0 flex-1 overflow-y-auto px-6\">"), Qt = /*#__PURE__*/ I("<div class=\"flex shrink-0 items-center justify-end gap-2 border-border/50 border-t px-6 pt-3\">");
+function $t(e) {
 	return (() => {
-		var t = dt();
-		return t.$$click = () => e.onClick(), F(t, N(w, {
+		var t = Ht();
+		return t.$$click = () => e.onClick(), N(t, j(C, {
 			get when() {
 				return e.isActive;
 			},
 			get children() {
-				var t = ut();
-				return F(t, () => e.icon), t;
+				var t = Vt();
+				return N(t, () => e.icon), t;
 			}
-		}), null), F(t, () => e.label, null), P(() => M(t, H("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", e.isActive ? "gap-1.5 bg-foreground/10 font-semibold text-foreground shadow-sm" : "gap-0 text-muted-foreground hover:bg-foreground/5 hover:text-foreground"))), t;
+		}), null), N(t, () => e.label, null), M(() => A(t, V("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", e.isActive ? "gap-1.5 bg-foreground/10 font-semibold text-foreground shadow-sm" : "gap-0 text-muted-foreground hover:bg-foreground/5 hover:text-foreground"))), t;
 	})();
 }
-function Ct(e) {
-	let [t] = he(e, /* @__PURE__ */ "open.onOpenChange.title.onSave.hasUnsavedChanges.onDelete.editContent.controlsContent.debugContent.debugData.tabs.class.maxWidth.defaultTab.activeTab.onActiveTabChange.headerActions.configSchema.config.onConfigSave.ResponsiveDialog.ResponsiveDialogContent.ResponsiveDialogHeader.ResponsiveDialogTitle.ResponsiveDialogDescription.Button.SchemaForm".split(".")), n = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, i] = D({}), [a, o] = D(null);
-	T(O(() => t.config, (e) => {
+function en(e) {
+	let [t] = he(e, /* @__PURE__ */ "open.onOpenChange.title.onSave.hasUnsavedChanges.onDelete.editContent.controlsContent.debugContent.debugData.tabs.class.maxWidth.defaultTab.activeTab.onActiveTabChange.headerActions.configSchema.config.onConfigSave.ResponsiveDialog.ResponsiveDialogContent.ResponsiveDialogHeader.ResponsiveDialogTitle.ResponsiveDialogDescription.Button.SchemaForm".split(".")), n = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, i] = E({}), [a, o] = E(null), [s, c] = E([]);
+	w(pe(() => t.config, (e) => {
 		e && i({ ...e });
-	})), T(O(() => t.configSchema, (e) => {
-		e && o(xe(e));
+	})), w(pe(() => t.configSchema, (e) => {
+		e && o(He(e));
 	}));
-	let s = () => n() && JSON.stringify(r()) !== JSON.stringify(t.config), c = (e) => {
-		!e && t.config && i({ ...t.config }), t.onOpenChange(e);
-	}, l = () => {
-		t.onConfigSave?.(r());
-	}, [u, d] = D(t.defaultTab ?? "controls"), f = () => t.activeTab ?? u(), p = (e) => {
-		t.onActiveTabChange ? t.onActiveTabChange(e) : d(e);
-	}, m = () => ({
+	let l = () => n() && JSON.stringify(r()) !== JSON.stringify(t.config), u = (e) => {
+		!e && t.config && (i({ ...t.config }), c([])), t.onOpenChange(e);
+	}, d = () => {
+		let e = t.configSchema;
+		if (e) {
+			let t = Bt(e, r());
+			if (t) {
+				c(t);
+				return;
+			}
+		}
+		c([]), t.onConfigSave?.(r());
+	}, [f, p] = E(t.defaultTab ?? "controls"), m = () => t.activeTab ?? f(), h = (e) => {
+		t.onActiveTabChange ? t.onActiveTabChange(e) : p(e);
+	}, g = () => ({
 		sm: "max-w-sm",
 		md: "max-w-md",
 		lg: "max-w-lg",
@@ -667,76 +723,80 @@ function Ct(e) {
 		"2xl": "max-w-2xl",
 		"3xl": "max-w-3xl",
 		"4xl": "max-w-4xl"
-	})[t.maxWidth ?? "3xl"], h = () => {
+	})[t.maxWidth ?? "3xl"], _ = () => {
 		if (t.tabs) return t.tabs;
 		let e = [];
 		return e.push({
 			id: "edit",
 			label: "Edit",
-			icon: ft(),
-			content: t.editContent ?? (n() && a() ? N(ne, {
-				get schema() {
-					return a();
-				},
-				get data() {
-					return ge(r);
-				},
-				onChange: i
-			}) : pt())
+			icon: Ut(),
+			content: t.editContent ?? (() => {
+				let e = n() ? a() : void 0;
+				return e ? j(ie, {
+					schema: e,
+					get data() {
+						return ge(r);
+					},
+					onChange: i,
+					get errors() {
+						return s();
+					}
+				}) : Wt();
+			})()
 		}), e.push({
 			id: "controls",
 			label: "Controls",
-			icon: mt(),
-			content: t.controlsContent ?? ht()
+			icon: Gt(),
+			content: t.controlsContent ?? Kt()
 		}), e.push({
 			id: "debug",
 			label: "Debug",
-			icon: gt(),
-			content: t.debugContent ?? _t()
+			icon: qt(),
+			content: t.debugContent ?? Jt()
 		}), e;
-	}, g = async () => {
+	}, v = async () => {
 		if (t.debugData !== void 0) try {
 			let e = typeof t.debugData == "string" ? t.debugData : JSON.stringify(t.debugData, null, 2);
 			await navigator.clipboard.writeText(e);
 		} catch {}
-	}, _ = () => {
-		let e = S();
-		return e.find((e) => e.id === f())?.content ?? e[0]?.content;
-	}, v = t.ResponsiveDialog, ee = t.ResponsiveDialogContent, y = t.ResponsiveDialogHeader, b = t.ResponsiveDialogTitle, te = t.ResponsiveDialogDescription, x = t.Button, ne = t.SchemaForm, S = E(O([
+	}, ee = () => {
+		let e = ae();
+		return e.find((e) => e.id === m())?.content ?? e[0]?.content;
+	}, y = t.ResponsiveDialog, b = t.ResponsiveDialogContent, te = t.ResponsiveDialogHeader, ne = t.ResponsiveDialogTitle, re = t.ResponsiveDialogDescription, x = t.Button, ie = t.SchemaForm, ae = T(pe([
 		() => t.open,
 		a,
 		() => t.config,
 		() => t.tabs
-	], () => h())), re = (e) => n() ? c(e) : t.onOpenChange(e), ie = () => n() ? s() : t.hasUnsavedChanges, C = () => n() ? l : t.onSave;
-	return N(v, {
+	], () => _())), oe = (e) => n() ? u(e) : t.onOpenChange(e), se = () => n() ? l() : t.hasUnsavedChanges, S = () => n() ? d : t.onSave;
+	return j(y, {
 		get open() {
 			return t.open;
 		},
-		onOpenChange: (e) => re(e),
+		onOpenChange: (e) => oe(e),
 		get children() {
-			return N(ee, {
+			return j(b, {
 				get class() {
-					return H(m(), "px-0", t.class);
+					return V(g(), "px-0", t.class);
 				},
 				get children() {
 					return [
-						N(y, {
+						j(te, {
 							class: "flex flex-row items-center justify-between gap-3 px-6",
 							get children() {
 								return [(() => {
-									var e = vt();
-									return F(e, N(b, {
+									var e = Yt();
+									return N(e, j(ne, {
 										class: "truncate leading-tight",
 										get children() {
 											return t.title;
 										}
-									}), null), F(e, N(te, {
+									}), null), N(e, j(re, {
 										class: "sr-only",
 										children: "Widget configuration dialog"
 									}), null), e;
 								})(), (() => {
-									var e = yt(), n = e.firstChild;
-									return F(n, () => S().map((e) => N(St, {
+									var e = Xt(), n = e.firstChild;
+									return N(n, () => ae().map((e) => j($t, {
 										get icon() {
 											return e.icon;
 										},
@@ -744,10 +804,10 @@ function Ct(e) {
 											return e.label;
 										},
 										get isActive() {
-											return f() === e.id;
+											return m() === e.id;
 										},
-										onClick: () => p(e.id)
-									}))), F(e, N(w, {
+										onClick: () => h(e.id)
+									}))), N(e, j(C, {
 										get when() {
 											return t.headerActions;
 										},
@@ -759,50 +819,50 @@ function Ct(e) {
 							}
 						}),
 						(() => {
-							var e = bt();
-							return F(e, _), e;
+							var e = Zt();
+							return N(e, ee), e;
 						})(),
-						N(w, {
+						j(C, {
 							get when() {
-								return I(() => f() === "edit")() && (C() || t.onDelete) || f() === "debug" && t.debugData !== void 0;
+								return P(() => m() === "edit")() && (S() || t.onDelete) || m() === "debug" && t.debugData !== void 0;
 							},
 							get children() {
-								var e = xt();
-								return F(e, N(w, {
+								var e = Qt();
+								return N(e, j(C, {
 									get when() {
-										return I(() => f() === "edit")() && t.onDelete;
+										return P(() => m() === "edit")() && t.onDelete;
 									},
 									get children() {
-										return N(x, {
+										return j(x, {
 											size: "sm",
 											variant: "destructive",
 											onClick: () => t.onDelete?.(),
 											children: "Delete"
 										});
 									}
-								}), null), F(e, N(w, {
+								}), null), N(e, j(C, {
 									get when() {
-										return I(() => f() === "edit")() && C();
+										return P(() => m() === "edit")() && S();
 									},
 									get children() {
-										return N(x, {
+										return j(x, {
 											size: "sm",
 											get disabled() {
-												return !ie();
+												return !se();
 											},
-											onClick: () => C()?.(),
+											onClick: () => S()?.(),
 											children: "Save"
 										});
 									}
-								}), null), F(e, N(w, {
+								}), null), N(e, j(C, {
 									get when() {
-										return I(() => f() === "debug")() && t.debugData !== void 0;
+										return P(() => m() === "debug")() && t.debugData !== void 0;
 									},
 									get children() {
-										return N(x, {
+										return j(x, {
 											size: "sm",
 											variant: "outline",
-											onClick: g,
+											onClick: v,
 											children: "Copy"
 										});
 									}
@@ -818,60 +878,60 @@ function Ct(e) {
 _e(["click"]);
 //#endregion
 //#region src/framework/hooks/use-intersection-pause.ts
-function wt(e) {
+function tn(e) {
 	if (typeof IntersectionObserver > "u") return () => !1;
-	let [t, n] = D(!1), r = new IntersectionObserver((e) => {
+	let [t, n] = E(!1), r = new IntersectionObserver((e) => {
 		let t = e[0];
 		t && n(!t.isIntersecting);
 	});
-	return T(() => {
+	return w(() => {
 		let t = e();
 		r.disconnect(), t && r.observe(t);
-	}), k(() => r.disconnect()), t;
+	}), D(() => r.disconnect()), t;
 }
 //#endregion
 //#region src/framework/hooks/use-reduced-motion.ts
-function Tt() {
+function nn() {
 	if (typeof window > "u" || typeof window.matchMedia != "function") return () => !1;
-	let e = window.matchMedia("(prefers-reduced-motion: reduce)"), [t, n] = D(e.matches), r = (e) => n(e.matches);
-	return e.addEventListener("change", r), k(() => e.removeEventListener("change", r)), t;
+	let e = window.matchMedia("(prefers-reduced-motion: reduce)"), [t, n] = E(e.matches), r = (e) => n(e.matches);
+	return e.addEventListener("change", r), D(() => e.removeEventListener("change", r)), t;
 }
 //#endregion
 //#region src/framework/hooks/use-widget-dialog.ts
-function Et(t = "controls") {
-	let [n, r] = D(!1), [i, a] = D(t), o = (e) => {
-		a(e ?? t), r(!0);
-	}, s = A(e);
-	return s?.registerDialogOpener?.(o), k(() => s?.registerDialogOpener?.(null)), {
-		showDialog: n,
-		setShowDialog: r,
-		openDialog: o,
-		closeDialog: () => r(!1),
-		activeTab: i,
-		setActiveTab: a,
+function rn(e = "controls") {
+	let [t, n] = E(!1), [r, i] = E(e), a = (t) => {
+		i(t ?? e), n(!0);
+	}, o = O(L);
+	return o?.registerDialogOpener?.(a), D(() => o?.registerDialogOpener?.(null)), {
+		showDialog: t,
+		setShowDialog: n,
+		openDialog: a,
+		closeDialog: () => n(!1),
+		activeTab: r,
+		setActiveTab: i,
 		dialogProps: {
 			get open() {
-				return n();
+				return t();
 			},
-			onOpenChange: r,
+			onOpenChange: n,
 			get activeTab() {
-				return i();
+				return r();
 			},
-			onActiveTabChange: a
+			onActiveTabChange: i
 		}
 	};
 }
 //#endregion
 //#region src/framework/hooks/use-widget-entity-group.ts
-function Dt(e) {
-	let t = e.minEntities ?? 1, n = E(() => e.entities().length), r = E(() => n() >= t), i = E(() => !r() || !e.calculateGroupData ? null : e.calculateGroupData(e.entities())), a = E(() => {
+function an(e) {
+	let t = e.minEntities ?? 1, n = T(() => e.entities().length), r = T(() => n() >= t), i = T(() => !r() || !e.calculateGroupData ? null : e.calculateGroupData(e.entities())), a = T(() => {
 		if (!r()) return;
 		let t = e.aggregationMode?.();
 		if (!t || t === "none") return;
 		let n = e.entities();
-		if (t === "light" || t === "binary-sensor" || t === "switch") return We(n, e.allEntitiesMode);
-		if (t === "sensor") return Ge(n, e.sensorGroupType?.() ?? "mean", !0);
-	}), o = E(() => r() ? void 0 : e.emptyStateConfig);
+		if (t === "light" || t === "binary-sensor" || t === "switch") return yt(n, e.allEntitiesMode);
+		if (t === "sensor") return bt(n, e.sensorGroupType?.() ?? "mean", !0);
+	}), o = T(() => r() ? void 0 : e.emptyStateConfig);
 	return {
 		entities: e.entities,
 		groupData: i,
@@ -883,142 +943,142 @@ function Dt(e) {
 }
 //#endregion
 //#region src/framework/gestures/cursors.ts
-var W = 32, G = W / 2, K = "white", q = "rgba(0,0,0,0.4)", J = 2, Y = 3;
-function Ot(e) {
+var U = 32, W = U / 2, G = "white", K = "rgba(0,0,0,0.4)", q = 2, J = 3;
+function on(e) {
 	return `url("data:image/svg+xml,${encodeURIComponent(e)}")`;
 }
-function X(e) {
-	return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${W}" viewBox="0 0 ${W} ${W}">${e}</svg>`;
+function Y(e) {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${U}" height="${U}" viewBox="0 0 ${U} ${U}">${e}</svg>`;
 }
-var kt = X(`
+var sn = Y(`
   <g transform="translate(6, 2)">
     <!-- shadow -->
-    <g stroke="${q}" stroke-width="${Y}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path d="M10 8V3a2 2 0 0 1 4 0v10l4.5-4.5a2 2 0 0 1 2.83 2.83L14 18.5c-2 2-4 3.5-8 3.5-3 0-5-2-5-5v-6a2 2 0 0 1 4 0v2"/>
     </g>
     <!-- main -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path d="M10 8V3a2 2 0 0 1 4 0v10l4.5-4.5a2 2 0 0 1 2.83 2.83L14 18.5c-2 2-4 3.5-8 3.5-3 0-5-2-5-5v-6a2 2 0 0 1 4 0v2"/>
     </g>
   </g>
-`), At = X(`
+`), cn = Y(`
   <g>
-    <circle cx="${G}" cy="${G}" r="8" stroke="${q}" stroke-width="${Y}" fill="none"/>
-    <circle cx="${G}" cy="${G}" r="8" stroke="${K}" stroke-width="1.5" fill="none"/>
-    <circle cx="${G}" cy="${G}" r="1.5" fill="${K}"/>
+    <circle cx="${W}" cy="${W}" r="8" stroke="${K}" stroke-width="${J}" fill="none"/>
+    <circle cx="${W}" cy="${W}" r="8" stroke="${G}" stroke-width="1.5" fill="none"/>
+    <circle cx="${W}" cy="${W}" r="1.5" fill="${G}"/>
   </g>
-`), jt = X(`
+`), ln = Y(`
   <g>
     <!-- shadow -->
-    <g stroke="${q}" stroke-width="${Y}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${G}" x2="26" y2="${G}"/>
-      <polyline points="10,${G - 4} 6,${G} 10,20"/>
-      <polyline points="22,${G - 4} 26,${G} 22,20"/>
+    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${W}" x2="26" y2="${W}"/>
+      <polyline points="10,12 6,${W} 10,20"/>
+      <polyline points="22,12 26,${W} 22,20"/>
     </g>
     <!-- main -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${G}" x2="26" y2="${G}"/>
-      <polyline points="10,${G - 4} 6,${G} 10,20"/>
-      <polyline points="22,${G - 4} 26,${G} 22,20"/>
+    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${W}" x2="26" y2="${W}"/>
+      <polyline points="10,12 6,${W} 10,20"/>
+      <polyline points="22,12 26,${W} 22,20"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${G}" cy="${G}" r="1.5" fill="${K}"/>
-    <circle cx="${G - 5}" cy="${G}" r="1" fill="${K}" opacity="0.6"/>
-    <circle cx="21" cy="${G}" r="1" fill="${K}" opacity="0.6"/>
+    <circle cx="${W}" cy="${W}" r="1.5" fill="${G}"/>
+    <circle cx="11" cy="${W}" r="1" fill="${G}" opacity="0.6"/>
+    <circle cx="21" cy="${W}" r="1" fill="${G}" opacity="0.6"/>
   </g>
-`), Mt = X(`
+`), un = Y(`
   <g>
     <!-- shadow -->
-    <g stroke="${q}" stroke-width="${Y}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${G}" y1="6" x2="${G}" y2="26"/>
-      <polyline points="${G - 4},10 ${G},6 20,10"/>
-      <polyline points="${G - 4},22 ${G},26 20,22"/>
+    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${W}" y1="6" x2="${W}" y2="26"/>
+      <polyline points="12,10 ${W},6 20,10"/>
+      <polyline points="12,22 ${W},26 20,22"/>
     </g>
     <!-- main -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${G}" y1="6" x2="${G}" y2="26"/>
-      <polyline points="${G - 4},10 ${G},6 20,10"/>
-      <polyline points="${G - 4},22 ${G},26 20,22"/>
+    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${W}" y1="6" x2="${W}" y2="26"/>
+      <polyline points="12,10 ${W},6 20,10"/>
+      <polyline points="12,22 ${W},26 20,22"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${G}" cy="${G}" r="1.5" fill="${K}"/>
-    <circle cx="${G}" cy="${G - 5}" r="1" fill="${K}" opacity="0.6"/>
-    <circle cx="${G}" cy="21" r="1" fill="${K}" opacity="0.6"/>
+    <circle cx="${W}" cy="${W}" r="1.5" fill="${G}"/>
+    <circle cx="${W}" cy="11" r="1" fill="${G}" opacity="0.6"/>
+    <circle cx="${W}" cy="21" r="1" fill="${G}" opacity="0.6"/>
   </g>
-`), Nt = X(`
+`), dn = Y(`
   <g>
     <!-- shadow -->
-    <g stroke="${q}" stroke-width="${Y}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="7" y1="${G}" x2="25" y2="${G}"/>
-      <line x1="${G}" y1="7" x2="${G}" y2="25"/>
-      <polyline points="11,${G - 3} 7,${G} 11,19"/>
-      <polyline points="21,${G - 3} 25,${G} 21,19"/>
-      <polyline points="${G - 3},11 ${G},7 19,11"/>
-      <polyline points="${G - 3},21 ${G},25 19,21"/>
+    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="7" y1="${W}" x2="25" y2="${W}"/>
+      <line x1="${W}" y1="7" x2="${W}" y2="25"/>
+      <polyline points="11,13 7,${W} 11,19"/>
+      <polyline points="21,13 25,${W} 21,19"/>
+      <polyline points="13,11 ${W},7 19,11"/>
+      <polyline points="13,21 ${W},25 19,21"/>
     </g>
     <!-- main -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="7" y1="${G}" x2="25" y2="${G}"/>
-      <line x1="${G}" y1="7" x2="${G}" y2="25"/>
-      <polyline points="11,${G - 3} 7,${G} 11,19"/>
-      <polyline points="21,${G - 3} 25,${G} 21,19"/>
-      <polyline points="${G - 3},11 ${G},7 19,11"/>
-      <polyline points="${G - 3},21 ${G},25 19,21"/>
+    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="7" y1="${W}" x2="25" y2="${W}"/>
+      <line x1="${W}" y1="7" x2="${W}" y2="25"/>
+      <polyline points="11,13 7,${W} 11,19"/>
+      <polyline points="21,13 25,${W} 21,19"/>
+      <polyline points="13,11 ${W},7 19,11"/>
+      <polyline points="13,21 ${W},25 19,21"/>
     </g>
     <!-- center dot -->
-    <circle cx="${G}" cy="${G}" r="2" fill="${K}"/>
+    <circle cx="${W}" cy="${W}" r="2" fill="${G}"/>
   </g>
 `);
-function Z(e, t, n) {
+function X(e, t, n) {
 	return {
-		css: `${Ot(e)} ${t} ${n}, auto`,
+		css: `${on(e)} ${t} ${n}, auto`,
 		hotspotX: t,
 		hotspotY: n
 	};
 }
-var Q = {
-	tap: Z(kt, 12, 4),
-	hold: Z(At, 16, 16),
-	slideHorizontal: Z(jt, G, G),
-	slideVertical: Z(Mt, G, G),
-	slideAuto: Z(Nt, G, G)
+var Z = {
+	tap: X(sn, 12, 4),
+	hold: X(cn, 16, 16),
+	slideHorizontal: X(ln, W, W),
+	slideVertical: X(un, W, W),
+	slideAuto: X(dn, W, W)
 };
 //#endregion
 //#region src/framework/gestures/haptics.ts
-function Pt() {
+function fn() {
 	if (typeof window > "u") return null;
 	let e = window;
 	return e.Capacitor?.isNativePlatform?.() ? e.Capacitor.Plugins?.Haptics ?? null : null;
 }
-function Ft(e) {
+function pn(e) {
 	if (!(typeof navigator > "u" || typeof navigator.vibrate != "function")) try {
 		navigator.vibrate(e);
 	} catch {}
 }
-var It = {
+var mn = {
 	tick() {
-		let e = Pt();
+		let e = fn();
 		if (e) {
 			e.impact({ style: "Light" }).catch(() => {});
 			return;
 		}
-		Ft(8);
+		pn(8);
 	},
 	bump() {
-		let e = Pt();
+		let e = fn();
 		if (e) {
 			e.impact({ style: "Medium" }).catch(() => {});
 			return;
 		}
-		Ft(20);
+		pn(20);
 	},
 	pulse() {
-		let e = Pt();
+		let e = fn();
 		if (e) {
 			e.impact({ style: "Heavy" }).catch(() => {});
 			return;
 		}
-		Ft([
+		pn([
 			0,
 			15,
 			40,
@@ -1028,7 +1088,7 @@ var It = {
 };
 //#endregion
 //#region src/framework/gestures/use-widget-gestures.ts
-function Lt(e, t) {
+function hn(e, t) {
 	let n = {
 		isDown: !1,
 		isTouch: !1,
@@ -1039,7 +1099,7 @@ function Lt(e, t) {
 		sliding: !1,
 		holdTimer: null,
 		element: null
-	}, r = null, i = null, a = null, [o, s] = D(null);
+	}, r = null, i = null, a = null, [o, s] = E(null);
 	function c(e) {
 		e !== i && (a && a.disconnect(), a = new ResizeObserver((e) => {
 			let t = e[0];
@@ -1071,7 +1131,7 @@ function Lt(e, t) {
 			if (n.isDown = !0, n.isTouch = t.pointerType === "touch", n.element = t.currentTarget, c(n.element), n.startX = t.clientX, n.startY = t.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.sliding = !1, r.hold) {
 				let e = r.hold.delay ?? 300;
 				n.holdTimer = setTimeout(() => {
-					n.holdTimer = null, !(!n.isDown || n.hasMoved) && (It.bump(), r.hold?.action(), n.isDown = !1);
+					n.holdTimer = null, !(!n.isDown || n.hasMoved) && (mn.bump(), r.hold?.action(), n.isDown = !1);
 				}, e);
 			}
 			if (!n.isTouch && r.slide) try {
@@ -1108,9 +1168,9 @@ function Lt(e, t) {
 		let n = e();
 		if (n.slide) {
 			let e = n.slide.orientation;
-			return e === "horizontal" ? Q.slideHorizontal.css : e === "vertical" ? Q.slideVertical.css : (r || c(t), r && r.height > r.width ? Q.slideVertical.css : Q.slideHorizontal.css);
+			return e === "horizontal" ? Z.slideHorizontal.css : e === "vertical" ? Z.slideVertical.css : (r || c(t), r && r.height > r.width ? Z.slideVertical.css : Z.slideHorizontal.css);
 		}
-		return n.tap ? Q.tap.css : n.hold ? Q.hold.css : "";
+		return n.tap ? Z.tap.css : n.hold ? Z.hold.css : "";
 	};
 	return {
 		onPointerDown: f,
@@ -1139,7 +1199,7 @@ function Lt(e, t) {
 }
 //#endregion
 //#region src/framework/theming/svg-colors.ts
-var Rt = {
+var gn = {
 	solar: "oklch(0.74 0.18 60)",
 	grid: "oklch(0.62 0.12 245)",
 	battery: "oklch(0.70 0.18 145)",
@@ -1148,90 +1208,88 @@ var Rt = {
 	positive: "oklch(0.70 0.14 160)",
 	negative: "oklch(0.64 0.22 27)"
 };
-function zt(e) {
+function _n(e) {
 	return {
 		fill: `color-mix(in oklch, ${e} 20%, transparent)`,
 		stroke: e,
 		solid: e
 	};
 }
-var Bt = Object.fromEntries(Object.entries(Rt).map(([e, t]) => [e, zt(t)])), Vt = l.enum([
+var vn = Object.fromEntries(Object.entries(gn).map(([e, t]) => [e, _n(t)])), yn = o.enum([
 	"success",
 	"warning",
 	"danger",
 	"info",
 	"neutral",
 	"accent"
-]), Ht = {
-	title: r(() => l.string().optional().meta({
+]), bn = {
+	title: e(() => o.string().optional().meta({
 		title: "Title",
 		description: "Optional display name override"
 	}), "widgetFields.title"),
-	entityIds: r((e, t) => l.array(l.string()).default([]).meta({
+	entityIds: e((e, t) => o.array(o.string()).default([]).meta({
 		domain: e,
 		title: "Entities",
 		...t?.deviceClass ? { deviceClass: t.deviceClass } : {}
 	}), "widgetFields.entityIds"),
-	singleEntity: r((e, t) => l.array(l.string()).default([]).meta({
+	singleEntity: e((e, t) => o.array(o.string()).default([]).meta({
 		domain: e,
 		title: "Entity",
 		singleSelect: !0,
 		...t?.deviceClass ? { deviceClass: t.deviceClass } : {}
 	}), "widgetFields.singleEntity"),
-	areaId: r(() => l.string().optional().meta({
+	areaId: e(() => o.string().optional().meta({
 		formType: "area-picker",
 		title: "Area"
 	}), "widgetFields.areaId")
-};
-//#endregion
-//#region src/framework/config/index.ts
-function $(e) {
+}, xn = 24;
+function Q(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) r !== void 0 && (t[n] = r);
 	return t;
 }
-function Ut() {
-	return l.string().optional().meta({
+function Sn() {
+	return o.string().optional().meta({
 		title: "Title",
 		description: "Optional display name override"
 	});
 }
-function Wt(e) {
-	return (e.default === void 0 ? l.string().optional() : l.string().default(e.default)).meta($({
+function Cn(e) {
+	return (e.default === void 0 ? o.string().optional() : o.string().default(e.default)).meta(Q({
 		title: e.title,
 		description: e.description
 	}));
 }
-function Gt(e) {
-	let t = l.number();
-	return e.min !== void 0 && (t = t.min(e.min)), e.max !== void 0 && (t = t.max(e.max)), (e.default === void 0 ? t.optional() : t.default(e.default)).meta($({
+function wn(e) {
+	let t = o.number();
+	return e.min !== void 0 && (t = t.min(e.min)), e.max !== void 0 && (t = t.max(e.max)), (e.default === void 0 ? t.optional() : t.default(e.default)).meta(Q({
 		title: e.title,
 		description: e.description
 	}));
 }
-function Kt(e) {
-	return l.boolean().default(e.default ?? !1).meta($({
+function Tn(e) {
+	return o.boolean().default(e.default ?? !1).meta(Q({
 		title: e.title,
 		description: e.description
 	}));
 }
-function qt(e, t) {
-	let n = l.enum(e);
-	return (t.default === void 0 ? n.optional() : n.default(t.default)).meta($({
+function En(e, t) {
+	let n = o.enum(e);
+	return (t.default === void 0 ? n.optional() : n.default(t.default)).meta(Q({
 		title: t.title,
 		description: t.description
 	}));
 }
-function Jt(e, t) {
-	return l.array(l.string()).default([]).meta($({
+function Dn(e, t) {
+	return o.array(o.string()).default([]).meta(Q({
 		domain: e,
 		title: t?.title ?? "Entities",
 		description: t?.description,
 		deviceClass: t?.deviceClass
 	}));
 }
-function Yt(e, t) {
-	return l.array(l.string()).default([]).meta($({
+function On(e, t) {
+	return o.array(o.string()).default([]).meta(Q({
 		domain: e,
 		title: t?.title ?? "Entity",
 		description: t?.description,
@@ -1239,48 +1297,125 @@ function Yt(e, t) {
 		singleSelect: !0
 	}));
 }
-function Xt(e) {
-	return l.string().optional().meta({
+function kn(e) {
+	return o.string().optional().meta({
 		formType: "area-picker",
 		title: e?.title ?? "Area"
 	});
 }
-function Zt(e) {
-	let t = l.string().meta({
+function An(e) {
+	let t = o.string().meta({
 		formType: "icon-picker",
 		title: e?.title ?? "Icon"
 	});
 	return e?.default === void 0 ? t.optional() : t.default(e.default);
 }
-function Qt(e) {
-	return l.array(l.string()).default([]).meta($({
+function jn(e) {
+	return o.array(o.string()).default([]).meta(Q({
 		title: e.title,
 		description: e.description
 	}));
 }
-function $t(e, t) {
-	let n = l.object(e);
-	return n.default(Se(n)).meta({ title: t.title });
-}
-var en = {
-	title: Ut,
-	text: Wt,
-	number: Gt,
-	toggle: Kt,
-	choice: qt,
-	entities: Jt,
-	entity: Yt,
-	area: Xt,
-	icon: Zt,
-	stringList: Qt,
-	group: $t
+function Mn(e, t) {
+	let n = o.object(e);
+	return n.default(Ue(n)).meta({ title: t.title });
+}
+function Nn(e) {
+	return e.def;
+}
+function $(e) {
+	if (o.globalRegistry.get(e)?.formType === "list") return !0;
+	let t = Nn(e);
+	return t.shape ? Object.values(t.shape).some($) : t.options ? t.options.some($) : t.element ? $(t.element) : t.innerType ? $(t.innerType) : !1;
+}
+function Pn(e) {
+	let t = e, n = Nn(t).innerType;
+	for (; n;) t = n, n = Nn(t).innerType;
+	return t;
+}
+function Fn(e) {
+	let t = Nn(Pn(e));
+	if (t.shape) return new Set(Object.keys(t.shape));
+	if (t.options) {
+		let e = [];
+		for (let n of t.options) {
+			let t = Fn(n);
+			if (!t) return null;
+			e.push(t);
+		}
+		let [n, ...r] = e;
+		if (!n) return null;
+		let i = /* @__PURE__ */ new Set();
+		for (let e of n) r.every((t) => t.has(e)) && i.add(e);
+		return i;
+	}
+	return null;
+}
+function In(e, t, n) {
+	let r = { [t]: n };
+	try {
+		return e.parse(r);
+	} catch {
+		return r;
+	}
+}
+function Ln(e, t) {
+	if (!Number.isInteger(t.max) || t.max < 1) throw Error(`field.list: max must be a positive integer, got ${t.max}`);
+	if (t.max > xn) throw Error(`field.list: max ${t.max} exceeds the ceiling of ${xn}`);
+	if (t.min !== void 0 && (!Number.isInteger(t.min) || t.min < 0 || t.min > t.max)) throw Error(`field.list: min must be an integer between 0 and max, got ${t.min}`);
+	if ($(e)) throw Error("field.list: a list item cannot contain another field.list (depth 1 only)");
+	if (t.labelField !== void 0 && !Fn(e)?.has(t.labelField)) throw Error(`field.list: labelField "${t.labelField}" must name a field present in every item`);
+	let n = o.array(e);
+	return t.min !== void 0 && (n = n.min(t.min)), n = n.max(t.max), n.default([]).meta(Q({
+		formType: "list",
+		title: t.title,
+		description: t.description,
+		addLabel: t.addLabel,
+		labelField: t.labelField
+	}));
+}
+function Rn(e, t, n) {
+	let r = Object.keys(t)[0];
+	if (r === void 0) throw Error("field.variants: at least one variant is required");
+	if (n.shared && e in n.shared) throw Error(`field.variants: shared fields cannot redefine the discriminator "${e}"`);
+	for (let [n, r] of Object.entries(t)) if (e in r) throw Error(`field.variants: variant "${n}" cannot redefine the discriminator "${e}"`);
+	if (n.labels) {
+		for (let e of Object.keys(n.labels)) if (!(e in t)) throw Error(`field.variants: labels names unknown variant "${e}"`);
+	}
+	let i = Object.entries(t).map(([t, r]) => o.object({
+		...n.shared ?? {},
+		...r,
+		[e]: o.literal(t)
+	})), a = o.discriminatedUnion(e, i), s = i[0];
+	return a.default(s ? In(s, e, r) : {}).meta(Q({
+		formType: "variants",
+		discriminator: e,
+		title: n.title,
+		description: n.description,
+		labels: n.labels
+	}));
+}
+var zn = {
+	title: Sn,
+	text: Cn,
+	number: wn,
+	toggle: Tn,
+	choice: En,
+	entities: Dn,
+	entity: On,
+	area: kn,
+	icon: An,
+	stringList: jn,
+	group: Mn,
+	list: Ln,
+	variants: Rn
 };
-function tn(e) {
-	return l.object(e);
+function Bn(e) {
+	return o.object(e);
 }
 //#endregion
 //#region src/shared/spline.ts
-function nn(e) {
+function Vn(e) {
 	if (e.length < 2) return "";
 	let t = e[0], n = e[1];
 	if (!t || !n) return "";
@@ -1307,14 +1442,14 @@ function nn(e) {
 }
 //#endregion
 //#region src/theme.ts
-function rn() {
+function Hn() {
 	return document.documentElement.classList.contains("dark");
 }
 //#endregion
 //#region src/version.ts
-var an = {
+var Un = {
 	name: "@glasshome/widget-sdk",
-	version: "1.8.1",
+	version: "1.9.1",
 	description: "SDK for building GlassHome dashboard widgets with SolidJS",
 	keywords: [
 		"glasshome",
@@ -1365,13 +1500,14 @@ var an = {
 		"tailwind-sources.css"
 	],
 	scripts: {
-		build: "vite build && tsc",
+		build: "vite build && tsc && bun scripts/check-host-singleton.ts",
 		dev: "vite build --watch",
 		test: "bun test",
 		"typecheck:test": "tsc --noEmit -p tsconfig.test.json"
 	},
 	peerDependencies: {
-		"@glasshome/sync-layer": "0.4.0",
+		"@glasshome/sync-layer": "0.6.0",
+		"@glasshome/ui": "1.3.0",
 		"solid-js": "^1.9.11"
 	},
 	dependencies: {
@@ -1403,4 +1539,4 @@ var an = {
 	engines: { node: ">=18" }
 }.version;
 //#endregion
-export { an as SDK_VERSION, Vt as ToneSchema, U as Widget, Pe as WidgetContent, e as WidgetCtx, Ct as WidgetDialog, Re as WidgetIcon, o as WidgetManifestSchema, Me as WidgetSliderFill, Be as WidgetStatus, Ue as WidgetTitle, tt as WidgetValue, ee as byDomain, We as calculateLightGroup, Ge as calculateSensorGroup, Xe as countActiveEntities, tn as defineConfig, Ce as defineWidget, i as deprecations, en as field, a as formatDeprecation, s as formatSchemaError, Ye as getEntityAttribute, u as getForecasts, d as getStream, f as getWebRtcClientConfig, p as hassMediaUrl, n as injectTokens, rn as isDark, Je as isEntityActive, nn as monotoneCubicPath, m as sendWebRtcCandidate, h as startWebRtcSession, g as state, Bt as svgColors, _ as trackEntityHistory, v as untrackEntityHistory, y as useArea, b as useCamera, te as useConnection, x as useCurrency, ne as useEntities, S as useEntity, re as useEntityHistory, ie as useEntityStatistics, C as useForecast, ae as useHassConfig, wt as useIntersectionPause, oe as useLocale, Tt as useReducedMotion, Te as useService, ce as useStore, le as useTemperatureUnit, Oe as useToggle, De as useTurnOff, Ee as useTurnOn, pe as useUnitSystem, t as useWidgetContext, Et as useWidgetDialog, Dt as useWidgetEntityGroup, Lt as useWidgetGestures, Ht as widgetFields, c as z };
+export { Se as Badge, Ce as Button, we as ColorSlider, Te as ColorWheel, Ee as Input, De as Label, Oe as ResponsiveDialog, ke as ResponsiveDialogContent, Ae as ResponsiveDialogDescription, je as ResponsiveDialogHeader, Me as ResponsiveDialogTitle, Un as SDK_VERSION, Ne as SchemaForm, Pe as Select, Fe as SelectContent, Ie as SelectItem, Le as SelectTrigger, Re as SelectValue, ze as Slider, Be as Switch, yn as ToneSchema, H as Widget, lt as WidgetContent, L as WidgetCtx, en as WidgetDialog, pt as WidgetIcon, r as WidgetManifestSchema, Ze as WidgetSizeCtx, st as WidgetSliderFill, ht as WidgetStatus, vt as WidgetTitle, At as WidgetValue, g as byDomain, yt as calculateLightGroup, bt as calculateSensorGroup, Tt as countActiveEntities, Bn as defineConfig, We as defineWidget, t as deprecations, zn as field, n as formatDeprecation, i as formatSchemaError, wt as getEntityAttribute, s as getForecasts, c as getStream, l as getWebRtcClientConfig, u as hassMediaUrl, rt as injectTokens, Hn as isDark, Ct as isEntityActive, Vn as monotoneCubicPath, Ve as parseColor, d as sendWebRtcCandidate, f as startWebRtcSession, p as state, vn as svgColors, m as trackEntityHistory, h as untrackEntityHistory, _ as useArea, v as useCamera, ee as useConnection, y as useCurrency, b as useEntities, te as useEntity, ne as useEntityHistory, re as useEntityStatistics, x as useForecast, ie as useHassConfig, tn as useIntersectionPause, ae as useLocale, nn as useReducedMotion, qe as useService, se as useStore, S as useTemperatureUnit, Xe as useToggle, Ye as useTurnOff, Je as useTurnOn, de as useUnitSystem, Ge as useWidgetContext, rn as useWidgetDialog, Qe as useWidgetDimensions, an as useWidgetEntityGroup, hn as useWidgetGestures, bn as widgetFields, a as z };