@glasshome/widget-sdk 1.16.0 → 1.17.0

package/dist/index.js

@@ -2,14 +2,14 @@ import { deprecate as e, deprecations as t, formatDeprecation as n } from "./dep
 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 _, useCalendarEvents as v, useCamera as ee, useConnection as y, useCurrency as te, useEntities as ne, useEntity as re, useEntityHistory as ie, useEntityStatistics as ae, useForecast as oe, useHassConfig as se, useLocale as ce, useService as le, useStore as ue, useTemperatureUnit as b, useToggle as x, useTurnOff as de, useTurnOn as fe, useUnitSystem as S } from "@glasshome/sync-layer/solid";
-import { For as C, Show as w, createContext as T, createEffect as pe, createMemo as E, createSignal as D, on as me, onCleanup as O, onMount as he, splitProps as ge, useContext as k } from "solid-js";
-import { addEventListener as A, className as j, createComponent as M, effect as N, insert as P, memo as F, setStyleProperty as _e, 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 { Accordion as Se, AccordionContent as Ce, AccordionItem as we, AccordionTrigger as Te, Badge as Ee, Badge as De, Button as Oe, Button as ke, Carousel as Ae, CarouselContent as je, CarouselDots as Me, CarouselItem as Ne, CarouselNext as Pe, CarouselPrevious as Fe, ColorSlider as Ie, ColorWheel as Le, CountPill as Re, CountPill as ze, Empty as Be, EmptyDescription as Ve, EmptyHeader as He, EmptyTitle as Ue, FactRow as L, FieldGroup as We, FieldTitle as Ge, Icon as Ke, Icon as qe, Input as Je, Label as Ye, ResponsiveDialog as Xe, ResponsiveDialogBody as Ze, ResponsiveDialogBody as Qe, ResponsiveDialogClose as $e, ResponsiveDialogContent as et, ResponsiveDialogDescription as tt, ResponsiveDialogFooter as nt, ResponsiveDialogFooter as rt, ResponsiveDialogHeader as it, ResponsiveDialogTitle as at, SchemaForm as ot, SectionIcon as st, SectionIcon as ct, SectionMeta as lt, SectionRow as ut, SectionTitle as dt, Select as ft, SelectContent as pt, SelectItem as mt, SelectTrigger as ht, SelectValue as gt, Slider as _t, Switch as vt, Tabs as yt, Tabs as bt, TabsContent as xt, TabsContent as St, TabsList as Ct, TabsList as wt, TabsTrigger as Tt, TabsTrigger as Et, imageUrl as Dt, mediaUrl as Ot, parseColor as kt } from "@glasshome/ui/solid";
+import { byDomain as g, useArea as _, useCalendarEvents as v, useCamera as y, useConnection as b, useCurrency as x, useEntities as S, useEntity as ee, useEntity as te, useEntityHistory as ne, useEntityStatistics as re, useForecast as ie, 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 { For as C, Show as w, children as T, createContext as me, createEffect as E, createMemo as D, createSignal as O, on as he, onCleanup as k, onMount as ge, splitProps as _e, useContext as A } from "solid-js";
+import { addEventListener as j, className as M, createComponent as N, delegateEvents as ve, effect as P, insert as F, memo as I, setAttribute as L, setStyleProperty as R, style as z, template as B, use as V } from "solid-js/web";
+import { Accordion as ye, AccordionContent as be, AccordionItem as xe, AccordionTrigger as Se, Badge as Ce, Badge as we, Button as Te, Button as Ee, ButtonGroup as De, ButtonGroup as Oe, Carousel as ke, CarouselContent as Ae, CarouselDots as je, CarouselItem as Me, CarouselNext as Ne, CarouselPrevious as Pe, ColorDisc as Fe, ColorSlider as Ie, ColorWheel as Le, CountPill as Re, CountPill as ze, Empty as Be, EmptyDescription as Ve, EmptyHeader as He, EmptyTitle as Ue, FactRow as H, FieldGroup as We, FieldTitle as Ge, Icon as Ke, Icon as U, Input as qe, Label as Je, Progress as Ye, ResponsiveDialog as Xe, ResponsiveDialogBody as Ze, ResponsiveDialogBody as Qe, ResponsiveDialogClose as $e, ResponsiveDialogContent as et, ResponsiveDialogDescription as tt, ResponsiveDialogFooter as nt, ResponsiveDialogFooter as rt, ResponsiveDialogHeader as it, ResponsiveDialogTitle as at, SchemaForm as ot, SectionIcon as st, SectionIcon as ct, SectionMeta as lt, SectionRow as ut, SectionTitle as dt, Select as ft, SelectContent as pt, SelectItem as mt, SelectTrigger as ht, SelectValue as gt, Slider as _t, SwatchPicker as vt, Switch as yt, Tabs as bt, Tabs as xt, TabsContent as St, TabsContent as Ct, TabsList as wt, TabsList as Tt, TabsTrigger as Et, TabsTrigger as Dt, TemperatureBar as Ot, Toggle as kt, ToggleGroup as At, ToggleGroup as jt, ToggleGroupItem as Mt, ToggleGroupItem as Nt, buttonVariants as Pt, imagePreset as Ft, imagePreset as It, imageUrl as Lt, imageUrl as Rt, mediaUrl as zt, parseColor as Bt, presetValue as Vt } from "@glasshome/ui/solid";
+import { clsx as Ht } from "clsx";
+import { twMerge as Ut } from "tailwind-merge";
 //#region src/framework/to-form-schema.ts
-function At(e) {
+function Wt(e) {
 	return o.toJSONSchema(e, { override: (e) => {
 		let t = o.globalRegistry.get(e.zodSchema);
 		return t && typeof t == "object" && Object.keys(t).length > 0 ? {
@@ -18,7 +18,7 @@ function At(e) {
 		} : e.jsonSchema;
 	} });
 }
-function jt(e) {
+function Gt(e) {
 	try {
 		return e.parse({});
 	} catch {
@@ -27,99 +27,714 @@ function jt(e) {
 }
 //#endregion
 //#region src/define-widget.ts
-function Mt(e) {
-	return e.configSchema && (e.manifest.schema || (e.manifest.schema = At(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = jt(e.configSchema))), e;
+function Kt(e) {
+	return e.configSchema && (e.manifest.schema || (e.manifest.schema = Wt(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = Gt(e.configSchema))), e;
 }
 //#endregion
 //#region src/framework/hooks/use-widget-context.ts
-var R = T();
-function Nt() {
-	let e = k(R);
+var W = me();
+function qt() {
+	let e = A(W);
 	if (!e) throw Error("useWidgetContext must be used within a Widget component");
 	return e;
 }
 //#endregion
 //#region src/framework/hooks/use-service.ts
-function Pt(e) {
+function Jt(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 z(e, t) {
+function G(e, t) {
 	return async (n, r = {}) => {
-		await e(Pt(n), t, r, { entity_id: n });
+		await e(Jt(n), t, r, { entity_id: n });
 	};
 }
-function Ft() {
-	let e = k(R)?.callService;
+function Yt() {
+	let e = A(W)?.callService;
 	return e ? {
 		callService: e,
-		turnOn: z(e, "turn_on"),
-		turnOff: z(e, "turn_off"),
-		toggle: z(e, "toggle")
-	} : le();
+		turnOn: G(e, "turn_on"),
+		turnOff: G(e, "turn_off"),
+		toggle: G(e, "toggle")
+	} : se();
 }
-function It() {
-	let e = k(R)?.callService;
-	return e ? z(e, "turn_on") : fe();
+function Xt() {
+	let e = A(W)?.callService;
+	return e ? G(e, "turn_on") : fe();
 }
-function Lt() {
-	let e = k(R)?.callService;
-	return e ? z(e, "turn_off") : de();
+function Zt() {
+	let e = A(W)?.callService;
+	return e ? G(e, "turn_off") : de();
 }
-function Rt() {
-	let e = k(R)?.callService;
-	return e ? z(e, "toggle") : x();
+function Qt() {
+	let e = A(W)?.callService;
+	return e ? G(e, "toggle") : ue();
 }
 //#endregion
 //#region src/framework/design-system/z-index.ts
-var B = {
+var K = {
 	BACKGROUND: 0,
 	CONTENT: 10,
 	OVERLAY: 20,
 	ACTIONS: 30
-}, zt = T();
-function Bt() {
-	let e = k(zt);
+}, q = /* @__PURE__ */ new WeakMap();
+function $t(e = "controls") {
+	let [t, n] = O(!1), [r, i] = O(e), a = (t) => {
+		i(t ?? e), n(!0);
+	}, o = A(W);
+	return o?.registerDialogOpener?.(a), o && q.set(o, a), k(() => {
+		o?.registerDialogOpener?.(null), o && q.get(o) === a && q.delete(o);
+	}), {
+		showDialog: t,
+		setShowDialog: n,
+		openDialog: a,
+		closeDialog: () => n(!1),
+		activeTab: r,
+		setActiveTab: i,
+		dialogProps: {
+			get open() {
+				return t();
+			},
+			onOpenChange: n,
+			get activeTab() {
+				return r();
+			},
+			onActiveTabChange: i
+		}
+	};
+}
+//#endregion
+//#region src/framework/hooks/widget-registry.ts
+var en = /* @__PURE__ */ new WeakMap(), tn = Symbol("glasshome.widget.registry");
+function nn(e) {
+	return e[tn] ?? e;
+}
+function rn(e) {
+	if (!e) return;
+	let t = nn(e), n = en.get(t);
+	if (!n) {
+		let [e, r] = O(!1), [i, a] = O(), [o, s] = O(), [c, l] = O();
+		n = {
+			hasSheet: e,
+			setHasSheet: r,
+			tone: i,
+			setTone: a,
+			accent: o,
+			setAccent: s,
+			icon: c,
+			setIcon: l
+		}, en.set(t, n);
+	}
+	return n;
+}
+//#endregion
+//#region src/framework/gestures/cursors.ts
+var an = 32, J = an / 2, Y = "white", on = "rgba(0,0,0,0.4)", sn = 2, cn = 3;
+function ln(e) {
+	return `url("data:image/svg+xml,${encodeURIComponent(e)}")`;
+}
+function un(e) {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${an}" height="${an}" viewBox="0 0 ${an} ${an}">${e}</svg>`;
+}
+var dn = un(`
+  <g transform="translate(6, 2)">
+    <!-- shadow -->
+    <g stroke="${on}" stroke-width="${cn}" 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="${Y}" stroke-width="${sn}" 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>
+`), fn = un(`
+  <g>
+    <circle cx="${J}" cy="${J}" r="8" stroke="${on}" stroke-width="${cn}" fill="none"/>
+    <circle cx="${J}" cy="${J}" r="8" stroke="${Y}" stroke-width="1.5" fill="none"/>
+    <circle cx="${J}" cy="${J}" r="1.5" fill="${Y}"/>
+  </g>
+`), pn = un(`
+  <g>
+    <!-- shadow -->
+    <g stroke="${on}" stroke-width="${cn}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${J}" x2="26" y2="${J}"/>
+      <polyline points="10,12 6,${J} 10,20"/>
+      <polyline points="22,12 26,${J} 22,20"/>
+    </g>
+    <!-- main -->
+    <g stroke="${Y}" stroke-width="${sn}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${J}" x2="26" y2="${J}"/>
+      <polyline points="10,12 6,${J} 10,20"/>
+      <polyline points="22,12 26,${J} 22,20"/>
+    </g>
+    <!-- center grip dots -->
+    <circle cx="${J}" cy="${J}" r="1.5" fill="${Y}"/>
+    <circle cx="11" cy="${J}" r="1" fill="${Y}" opacity="0.6"/>
+    <circle cx="21" cy="${J}" r="1" fill="${Y}" opacity="0.6"/>
+  </g>
+`), mn = un(`
+  <g>
+    <!-- shadow -->
+    <g stroke="${on}" stroke-width="${cn}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${J}" y1="6" x2="${J}" y2="26"/>
+      <polyline points="12,10 ${J},6 20,10"/>
+      <polyline points="12,22 ${J},26 20,22"/>
+    </g>
+    <!-- main -->
+    <g stroke="${Y}" stroke-width="${sn}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${J}" y1="6" x2="${J}" y2="26"/>
+      <polyline points="12,10 ${J},6 20,10"/>
+      <polyline points="12,22 ${J},26 20,22"/>
+    </g>
+    <!-- center grip dots -->
+    <circle cx="${J}" cy="${J}" r="1.5" fill="${Y}"/>
+    <circle cx="${J}" cy="11" r="1" fill="${Y}" opacity="0.6"/>
+    <circle cx="${J}" cy="21" r="1" fill="${Y}" opacity="0.6"/>
+  </g>
+`), hn = un(`
+  <g>
+    <!-- shadow -->
+    <g stroke="${on}" stroke-width="${cn}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="7" y1="${J}" x2="25" y2="${J}"/>
+      <line x1="${J}" y1="7" x2="${J}" y2="25"/>
+      <polyline points="11,13 7,${J} 11,19"/>
+      <polyline points="21,13 25,${J} 21,19"/>
+      <polyline points="13,11 ${J},7 19,11"/>
+      <polyline points="13,21 ${J},25 19,21"/>
+    </g>
+    <!-- main -->
+    <g stroke="${Y}" stroke-width="${sn}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="7" y1="${J}" x2="25" y2="${J}"/>
+      <line x1="${J}" y1="7" x2="${J}" y2="25"/>
+      <polyline points="11,13 7,${J} 11,19"/>
+      <polyline points="21,13 25,${J} 21,19"/>
+      <polyline points="13,11 ${J},7 19,11"/>
+      <polyline points="13,21 ${J},25 19,21"/>
+    </g>
+    <!-- center dot -->
+    <circle cx="${J}" cy="${J}" r="2" fill="${Y}"/>
+  </g>
+`);
+function gn(e, t, n) {
+	return {
+		css: `${ln(e)} ${t} ${n}, auto`,
+		hotspotX: t,
+		hotspotY: n
+	};
+}
+var _n = {
+	tap: gn(dn, 12, 4),
+	hold: gn(fn, 16, 16),
+	slideHorizontal: gn(pn, J, J),
+	slideVertical: gn(mn, J, J),
+	slideAuto: gn(hn, J, J)
+};
+//#endregion
+//#region src/framework/gestures/haptics.ts
+function vn() {
+	if (typeof window > "u") return null;
+	let e = window;
+	return e.Capacitor?.isNativePlatform?.() ? e.Capacitor.Plugins?.Haptics ?? null : null;
+}
+function yn(e) {
+	if (typeof navigator < "u" && typeof navigator.vibrate == "function") try {
+		navigator.vibrate(e);
+	} catch {}
+}
+var bn = {
+	tick() {
+		let e = vn();
+		if (e) {
+			e.impact({ style: "Light" }).catch(() => {});
+			return;
+		}
+		yn(8);
+	},
+	bump() {
+		let e = vn();
+		if (e) {
+			e.impact({ style: "Medium" }).catch(() => {});
+			return;
+		}
+		yn(20);
+	},
+	pulse() {
+		let e = vn();
+		if (e) {
+			e.impact({ style: "Heavy" }).catch(() => {});
+			return;
+		}
+		yn([
+			0,
+			15,
+			40,
+			15
+		]);
+	}
+};
+//#endregion
+//#region src/framework/gestures/use-widget-gestures.ts
+function xn(e, t) {
+	let n = A(W), r = rn(n), i = () => {
+		let t = e();
+		return t.hold || !n || !r?.hasSheet() ? t : {
+			...t,
+			hold: { action: () => q.get(n)?.() }
+		};
+	}, a = {
+		isDown: !1,
+		isTouch: !1,
+		startX: 0,
+		startY: 0,
+		startTime: 0,
+		hasMoved: !1,
+		sliding: !1,
+		holdTimer: null,
+		graceTimer: null,
+		element: null
+	}, [o, s] = O(null), c = null, l = null, u = null, [d, f] = O(null);
+	function p(e) {
+		e !== l && (u && u.disconnect(), u = new ResizeObserver((e) => {
+			let t = e[0];
+			if (t) {
+				let e = t.borderBoxSize?.[0];
+				c = e ? {
+					width: e.inlineSize,
+					height: e.blockSize
+				} : {
+					width: t.contentRect.width,
+					height: t.contentRect.height
+				}, f(c.height > c.width);
+			}
+		}), l = e, u.observe(e), c = {
+			width: e.clientWidth,
+			height: e.clientHeight
+		}, f(c.height > c.width));
+	}
+	let m = () => {
+		a.holdTimer &&= (clearTimeout(a.holdTimer), null), a.graceTimer &&= (clearTimeout(a.graceTimer), null), s(null);
+	}, h = (e) => {
+		let t = (e) => {
+			e.stopPropagation(), e.preventDefault();
+		}, n = () => e.removeEventListener("click", t, !0);
+		e.addEventListener("click", t, !0), window.addEventListener("pointerup", () => setTimeout(n, 0), {
+			capture: !0,
+			once: !0
+		});
+	}, g = () => {
+		a.isDown = !1, a.hasMoved = !1, a.sliding = !1;
+	}, _ = (e) => {
+		let n = i().slide;
+		return n?.orientation === "horizontal" ? "horizontal" : n?.orientation === "vertical" ? "vertical" : e && (c || p(e), c) ? c.height > c.width ? "vertical" : "horizontal" : (t?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
+	}, v = (e) => {
+		let t = i();
+		if (t.tap || t.hold || t.slide) {
+			if (a.isDown = !0, a.isTouch = e.pointerType === "touch", a.element = e.currentTarget, p(a.element), a.startX = e.clientX, a.startY = e.clientY, a.startTime = Date.now(), a.hasMoved = !1, a.sliding = !1, t.hold) {
+				let n = t.hold.delay ?? 550, r = a.element.getBoundingClientRect(), i = e.clientX - r.left, o = e.clientY - r.top, c = Math.hypot(Math.max(i, r.width - i), Math.max(o, r.height - o));
+				a.graceTimer = setTimeout(() => {
+					a.graceTimer = null, s({
+						x: i,
+						y: o,
+						r: c,
+						fired: !1
+					});
+				}, Math.min(150, n)), a.holdTimer = setTimeout(() => {
+					a.holdTimer = null, a.isDown && !a.hasMoved && (s((e) => e && {
+						...e,
+						fired: !0
+					}), bn.bump(), a.element && h(a.element), t.hold?.action(), a.isDown = !1);
+				}, n);
+			}
+			if (!a.isTouch && t.slide) try {
+				e.currentTarget.setPointerCapture(e.pointerId);
+			} catch {}
+		}
+	}, y = (e) => {
+		if (!a.isDown) return;
+		let t = i(), n = e.clientX - a.startX, r = e.clientY - a.startY;
+		if (Math.sqrt(n * n + r * r) > 10 && (m(), a.hasMoved = !0), t.slide && a.hasMoved) {
+			let i = e.currentTarget, o = _(i);
+			if (a.isTouch && !a.sliding && Math.abs(o === "vertical" ? r : n) < Math.abs(o === "vertical" ? n : r)) return;
+			a.sliding = !0;
+			let s = t.slide.min ?? 0, l = t.slide.max ?? 100, u = l - s, d = o === "vertical" ? -r : n, f = c ?? {
+				width: i.clientWidth,
+				height: i.clientHeight
+			}, p = d / (o === "vertical" ? f.height : f.width) * u, m = Math.max(s, Math.min(l, t.slide.value + p));
+			t.slide.onChange(Math.round(m)), a.startX = e.clientX, a.startY = e.clientY, e.preventDefault();
+		}
+	}, b = (e) => {
+		let t = i(), n = a.isDown, r = Date.now() - a.startTime, o = t.hold?.delay ?? 550;
+		m(), n && t.tap && !a.hasMoved && r < o && t.tap();
+		try {
+			e.currentTarget.releasePointerCapture(e.pointerId);
+		} catch {}
+		g();
+	}, x = (e) => {
+		m();
+		try {
+			e.currentTarget.releasePointerCapture(e.pointerId);
+		} catch {}
+		g();
+	}, S = (e) => {
+		let t = i();
+		if (t.slide) {
+			let n = t.slide.orientation;
+			return n === "horizontal" ? _n.slideHorizontal.css : n === "vertical" ? _n.slideVertical.css : (c || p(e), c && c.height > c.width ? _n.slideVertical.css : _n.slideHorizontal.css);
+		}
+		return t.tap ? _n.tap.css : t.hold ? _n.hold.css : "";
+	};
+	return {
+		onKeyDown: (e) => {
+			if (e.target !== e.currentTarget) return;
+			let t = i();
+			(e.key === "Enter" || e.key === " ") && t.tap ? (e.preventDefault(), t.tap()) : (e.key === "ContextMenu" || e.shiftKey && e.key === "F10") && t.hold && (e.preventDefault(), t.hold.action());
+		},
+		onPointerDown: v,
+		onPointerMove: y,
+		onPointerUp: b,
+		onPointerCancel: x,
+		onPointerEnter: (e) => {
+			let t = e.currentTarget;
+			a.element = t, t.style.cursor = S(t);
+		},
+		bindElement: (e) => {
+			e && (a.element = e, p(e));
+		},
+		touchAction: () => {
+			let e = i();
+			if (e.slide) {
+				let n = e.slide.orientation;
+				return n === "vertical" || n !== "horizontal" && (d() ?? (t?.() ?? "horizontal") !== "horizontal") ? "pan-x" : "pan-y";
+			}
+			return e.tap || e.hold ? "manipulation" : "auto";
+		},
+		hold: o,
+		dispose: () => {
+			m(), u &&= (u.disconnect(), null), l = null, c = null;
+		}
+	};
+}
+//#endregion
+//#region src/framework/hooks/use-widget-dimensions.ts
+var Sn = me();
+function Cn() {
+	let e = A(Sn);
 	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/hooks/use-confirm.ts
+var wn = 1600;
+function Tn() {
+	let [e, t] = O(/* @__PURE__ */ new Set()), n;
+	return k(() => clearTimeout(n)), {
+		has: (t) => e().has(t),
+		any: () => e().size > 0,
+		run: async (e, r) => {
+			try {
+				await r();
+			} catch {
+				return !1;
+			}
+			return t(new Set(e)), clearTimeout(n), n = setTimeout(() => t(/* @__PURE__ */ new Set()), wn), !0;
+		}
+	};
+}
+//#endregion
+//#region src/framework/utils/cn.ts
+function X(...e) {
+	return Ut(Ht(e));
+}
+//#endregion
+//#region src/framework/components/WidgetIcon.tsx
+var En = /*#__PURE__*/ B("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-2 glass glass-tint\">"), Dn = /*#__PURE__*/ B("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-3 glass glass-tint\">"), On = /*#__PURE__*/ B("<div><div class=\"glasshome-widget-icon-glyph flex items-center justify-center\">");
+function kn(e) {
+	let t = () => e.entityCount ?? 1;
+	return (() => {
+		var n = On(), r = n.firstChild;
+		return F(n, N(w, {
+			get when() {
+				return t() >= 2;
+			},
+			get children() {
+				return En();
+			}
+		}), r), F(n, N(w, {
+			get when() {
+				return t() >= 3;
+			},
+			get children() {
+				return Dn();
+			}
+		}), r), F(r, () => e.icon), P((t) => {
+			var r = X("glasshome-widget-icon glass glass-tint", "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 = z(n, i, t.t), t;
+		}, {
+			e: void 0,
+			t: void 0
+		}), n;
+	})();
+}
+//#endregion
+//#region src/framework/components/anatomy.tsx
+var An = /*#__PURE__*/ B("<span class=glasshome-widget-eyebrow>"), jn = /*#__PURE__*/ B("<div class=glasshome-widget-head-aside>"), Mn = /*#__PURE__*/ B("<div class=glasshome-widget-head><div class=glasshome-widget-head-text><span class=glasshome-widget-name>"), Nn = /*#__PURE__*/ B("<span class=glasshome-widget-sub>"), Pn = /*#__PURE__*/ B("<span class=glasshome-widget-unit>"), Fn = /*#__PURE__*/ B("<div class=glasshome-widget-art>"), In = /*#__PURE__*/ B("<div><div class=glasshome-widget-reading><span class=glasshome-widget-reading-value>"), Ln = /*#__PURE__*/ B("<div class=glasshome-widget-controls>"), Rn = /*#__PURE__*/ B("<div>"), zn = /*#__PURE__*/ B("<div class=glasshome-widget-backdrop>"), Bn = /*#__PURE__*/ B("<div class=glasshome-widget-glyph aria-hidden=true>"), Vn = me(() => !1), Hn = "mdi:check";
+function Un(e) {
+	let t = A(Vn), n = rn(A(W));
+	E(() => n?.setIcon(e.icon)), k(() => {
+		n?.icon() === e.icon && n?.setIcon(void 0);
+	});
+	let r = T(() => e.eyebrow), i = T(() => e.aside), a = () => {
+		let t = r();
+		return typeof t == "string" && typeof e.name == "string" && t.trim().toLowerCase() === e.name.trim().toLowerCase();
+	};
+	return (() => {
+		var n = Mn(), o = n.firstChild, s = o.firstChild;
+		return F(n, N(w, {
+			get when() {
+				return e.icon;
+			},
+			children: (n) => N(kn, {
+				get icon() {
+					return N(U, { get icon() {
+						return I(() => !!t())() ? Hn : n();
+					} });
+				},
+				get entityCount() {
+					return e.count;
+				},
+				get color() {
+					return e.active || t() ? void 0 : "var(--muted-foreground)";
+				},
+				class: "glasshome-widget-head-icon"
+			})
+		}), o), F(o, N(w, {
+			get when() {
+				return I(() => !!r())() && !a();
+			},
+			get children() {
+				var e = An();
+				return F(e, r), e;
+			}
+		}), s), F(s, () => e.name), F(n, N(w, {
+			get when() {
+				return i();
+			},
+			get children() {
+				var e = jn();
+				return F(e, i), e;
+			}
+		}), null), n;
+	})();
+}
+function Wn(e) {
+	let t = T(() => e.sub), n = T(() => e.art), r = D(() => typeof e.value == "string" ? e.value.replace(/[\d\s.,:/%°+\-−]/g, "") : void 0), i = () => typeof e.value == "string" || typeof e.value == "number" ? String(e.value).length + (e.unit ? .5 : 0) : void 0, [a, o] = O();
+	return E(he(r, () => o((e) => e === "a" ? "b" : "a"), { defer: !0 })), (() => {
+		var r = In(), o = r.firstChild, s = o.firstChild;
+		return F(o, N(w, {
+			get when() {
+				return t();
+			},
+			get children() {
+				var e = Nn();
+				return F(e, t), e;
+			}
+		}), s), F(s, () => e.value, null), F(s, N(w, {
+			get when() {
+				return e.unit;
+			},
+			get children() {
+				var t = Pn();
+				return F(t, () => e.unit), P(() => L(t, "data-degree", e.unit === "°" || void 0)), t;
+			}
+		}), null), F(r, N(w, {
+			get when() {
+				return n();
+			},
+			get children() {
+				var e = Fn();
+				return F(e, n), e;
+			}
+		}), null), P((o) => {
+			var c = X("glasshome-widget-hero", e.class), l = n() ? "" : void 0, u = e.value === "" && !t() ? "" : void 0, d = a(), f = i();
+			return c !== o.e && M(r, o.e = c), l !== o.t && L(r, "data-art", o.t = l), u !== o.a && L(r, "data-empty", o.a = u), d !== o.o && L(s, "data-turn", o.o = d), f !== o.i && R(s, "--value-len", o.i = f), o;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		}), r;
+	})();
+}
+function Gn(e) {
+	return (() => {
+		var t = Ln();
+		return j(t, "pointerdown", (e) => e.stopPropagation()), F(t, () => e.children), t;
+	})();
+}
+function Kn(e) {
+	return N(Oe, {
+		get "aria-label"() {
+			return e.label;
+		},
+		class: "glasshome-widget-stepper",
+		get children() {
+			return [N(Ee, {
+				variant: "outline",
+				size: "icon",
+				"aria-label": "Lower",
+				class: "glasshome-widget-control",
+				onClick: () => e.onStep(-1),
+				get children() {
+					return N(U, { icon: "mdi:minus" });
+				}
+			}), N(Ee, {
+				variant: "outline",
+				size: "icon",
+				"aria-label": "Raise",
+				class: "glasshome-widget-control",
+				onClick: () => e.onStep(1),
+				get children() {
+					return N(U, { icon: "mdi:plus" });
+				}
+			})];
+		}
+	});
+}
+function qn(e) {
+	return N(jt, {
+		get "aria-label"() {
+			return e.label;
+		},
+		get tone() {
+			return e.tone;
+		},
+		get value() {
+			return e.value;
+		},
+		onChange: (t) => t && e.onChange(t),
+		class: "glasshome-widget-choice",
+		get children() {
+			return N(C, {
+				get each() {
+					return e.options;
+				},
+				children: (t) => N(Nt, {
+					get value() {
+						return t.value;
+					},
+					get "aria-label"() {
+						return t.label;
+					},
+					class: "glasshome-widget-control",
+					get "data-optional"() {
+						return t.value === e.value ? void 0 : "";
+					},
+					get children() {
+						return N(U, { get icon() {
+							return t.icon;
+						} });
+					}
+				})
+			});
+		}
+	});
+}
+function Jn(e) {
+	let t = Tn(), n = () => e.confirm ?? t, r = () => e.id ?? e["aria-label"] ?? e.icon, i = () => n().has(r());
+	return N(Ee, {
+		variant: "outline",
+		get size() {
+			return e.children ? "default" : "icon";
+		},
+		get "aria-label"() {
+			return e["aria-label"];
+		},
+		get class() {
+			return X(e.children ? "glasshome-widget-control-wide" : "glasshome-widget-control", e.class);
+		},
+		get "data-confirmed"() {
+			return i() || void 0;
+		},
+		onClick: () => void n().run([r()], e.run),
+		get children() {
+			return [N(U, { get icon() {
+				return I(() => !!i())() ? Hn : e.icon;
+			} }), I(() => e.children)];
+		}
+	});
+}
+function Yn(e) {
+	return N(we, {
+		get tone() {
+			return e.tone ?? "var(--muted-foreground)";
+		},
+		class: "gap-1 tabular-nums",
+		get children() {
+			return [N(w, {
+				get when() {
+					return e.icon;
+				},
+				children: (e) => N(U, { get icon() {
+					return e();
+				} })
+			}), I(() => e.children)];
+		}
+	});
+}
+function Xn(e) {
+	return (() => {
+		var t = Rn();
+		return F(t, () => e.children), P(() => M(t, X("glasshome-widget-layer", e.class))), t;
+	})();
+}
+function Zn(e) {
+	return (() => {
+		var t = zn();
+		return F(t, () => e.children), t;
+	})();
+}
+function Qn(e) {
+	let t = A(Vn);
+	return (() => {
+		var n = Bn();
+		return F(n, N(U, { get icon() {
+			return I(() => !!t())() ? Hn : e.icon;
+		} })), n;
+	})();
+}
+//#endregion
 //#region src/framework/theming/tokens.css?raw
-var Vt = "/* 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-glow-default:     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-glow-default:     0.5;\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  --widget-radius: var(--radius-xl, 12px);\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: ui's .glass, worn through the class Widget.tsx carries.\n * Unlayered and class-specific, so these beat the formula's :where() defaults\n * (wash-2 is re-declared there and cannot be set from a utility). The tone\n * stays the formula's transparent default until Widget.tsx sets one inline:\n * a widget without a tone is the plain card, never a neutral-grey wash. */\n.glasshome-widget {\n  --widget-wash: 22%;\n  --widget-wash-2: 11%;\n  --glass-wash: var(--widget-wash);\n  --glass-wash-2: var(--widget-wash-2);\n  --glass-wash-angle: 135deg;\n  --glass-base: color-mix(in srgb, var(--card) var(--material-clarity, 60%), transparent);\n  --glass-rim: 0.3;\n  --glass-lift: 0.45;\n  --glass-shade: 0.05;\n  backdrop-filter: var(--widget-backdrop, none);\n  -webkit-backdrop-filter: var(--widget-backdrop, none);\n}\n/* A fill widget keeps a neutral card; the fill carries the tone, so a full fill is the toned card. */\n.glasshome-widget:has(.glasshome-widget-slider-fill) {\n  --glass-wash: 0%;\n  --glass-wash-2: 0%;\n}\n.dark .glasshome-widget {\n  --glass-shade: 0;\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  border-radius: var(--widget-radius);\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 * ui's tinted icon pill (ICON_PILL_TINT): the disc is .glass, so the material shapes it. */\n.glasshome-widget-icon {\n  width: var(--widget-icon-box);\n  height: var(--widget-icon-box);\n  border-radius: var(--radius-sm, 12px);\n  --glass-tone: var(--widget-icon-color, var(--widget-color));\n  --glass-rim: 0.4;\n  --glass-wash: 18%;\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: var(--color-muted-foreground, currentColor);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.glasshome-widget-subtitle {\n  font-size: var(--widget-subtitle);\n  color: var(--color-muted-foreground, currentColor);\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: linear-gradient(\n    135deg,\n    color-mix(in srgb, var(--widget-color) calc(var(--widget-wash) * var(--material-tint, 1)), transparent),\n    color-mix(\n      in srgb,\n      var(--widget-color-to, var(--widget-color)) calc(var(--widget-wash-2) * var(--material-tint, 1)),\n      transparent\n    )\n  );\n  /* Inset: the clip-path cuts any outer shadow. */\n  box-shadow: inset 0 0 calc(var(--material-glow, 0px) * 1.2)\n    oklch(from var(--widget-color) l c h / 0.55);\n  clip-path: inset(0 calc((100 - var(--widget-fill-value)) * 1%) 0 0 round var(--widget-radius));\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 round var(--widget-radius));\n  }\n}\n", Ht = !1, Ut, Wt = /* @__PURE__ */ new WeakSet();
-function Gt() {
-	return Ut || (Ut = new CSSStyleSheet(), Ut.replaceSync(Vt.replace(/:root\b/g, ":host").replace(/^\.dark\b/gm, ":host(.dark)"))), Ut;
+var $n = "/* 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-glow-default:     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-glow-default:     0.5;\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 * One scale: --widget-unit is 1% of the shell's short side. Each size is a floor,\n * a line through the designed 2x2 and 4x4 sizes, and past 4x4 the share it has\n * at 4x4. A widget sizes its own text with these tokens and scales with every tile. */\n.glasshome-widget {\n  --widget-color: var(--tone-neutral);\n  --widget-glow-strength: var(--widget-glow-default);\n  --widget-radius: var(--radius-xl, 12px);\n\n  --widget-unit: 1cqmin;\n  --widget-text-value:   max(22px, calc(8.5px + 13.4 * var(--widget-unit)), calc(16 * var(--widget-unit)));\n  --widget-text-name:    max(14px, calc(8.9px + 4.37 * var(--widget-unit)), calc(7.07 * var(--widget-unit)));\n  --widget-text-meta:    max(11px, calc(8px + 2.44 * var(--widget-unit)), calc(4.88 * var(--widget-unit)));\n  --widget-text-sub:     max(12px, calc(10.1px + 1.22 * var(--widget-unit)), calc(4.3 * var(--widget-unit)));\n  --widget-text-caption: max(11px, calc(3.6 * var(--widget-unit)));\n  --widget-control-h:    max(36px, calc(30px + 3.84 * var(--widget-unit)));\n  --widget-grid-pad:     max(10px, calc(1.2px + 5.64 * var(--widget-unit)), calc(6 * var(--widget-unit)));\n  --widget-grid-gap:     max(6px, calc(2.5px + 2.23 * var(--widget-unit)));\n  --widget-icon-box:     max(44px, calc(31.3px + 8.14 * var(--widget-unit)), calc(17.7 * var(--widget-unit)));\n  --widget-icon-glyph:   max(24px, calc(16px + 5.12 * var(--widget-unit)), calc(10 * var(--widget-unit)));\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: ui's .glass, worn through the class Widget.tsx carries.\n * Unlayered and class-specific, so these beat the formula's :where() defaults\n * (wash-2 is re-declared there and cannot be set from a utility). The tone\n * stays the formula's transparent default until Widget.tsx sets one inline:\n * a widget without a tone is the plain card, never a neutral-grey wash. */\n.glasshome-widget {\n  --widget-wash: 22%;\n  --widget-wash-2: 11%;\n  --glass-wash: var(--widget-wash);\n  --glass-wash-2: var(--widget-wash-2);\n  --glass-wash-angle: 135deg;\n  --glass-base: color-mix(in srgb, var(--card) var(--material-clarity, 60%), transparent);\n  --glass-rim: 0.3;\n  --glass-lift: 0.45;\n  --glass-shade: 0.05;\n  backdrop-filter: var(--widget-backdrop, none);\n  -webkit-backdrop-filter: var(--widget-backdrop, none);\n}\n/* A fill widget keeps a neutral card; the fill carries the tone, so a full fill is the toned card. */\n.glasshome-widget:has(.glasshome-widget-slider-fill) {\n  --glass-wash: 0%;\n  --glass-wash-2: 0%;\n}\n.dark .glasshome-widget {\n  --glass-shade: 0;\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  border-radius: var(--widget-radius);\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 * ui's tinted icon pill (ICON_PILL_TINT): the disc is .glass, so the material shapes it. */\n.glasshome-widget-icon {\n  width: var(--widget-icon-box);\n  height: var(--widget-icon-box);\n  border-radius: var(--radius-sm, 12px);\n  --glass-tone: var(--widget-icon-color, var(--widget-color));\n  --glass-rim: 0.4;\n  --glass-wash: 18%;\n}\n.glasshome-widget-icon-glyph {\n  font-size: var(--widget-icon-glyph);\n  line-height: 1;\n}\n.glasshome-widget-icon-stack {\n  --stack-step: calc(var(--widget-icon-box) * 0.12);\n  position: absolute;\n  /* The pill's border would otherwise shrink each plate and widen the first step. */\n  inset: -1px;\n  width: auto;\n  height: auto;\n  border-radius: var(--radius-sm, 12px);\n}\n.glasshome-widget-icon-stack-2 { translate: var(--stack-step) var(--stack-step); opacity: 0.45; z-index: -2; }\n.glasshome-widget-icon-stack-3 { translate: calc(2 * var(--stack-step)) calc(2 * var(--stack-step)); opacity: 0.2; 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: var(--color-muted-foreground, currentColor);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.glasshome-widget-subtitle {\n  font-size: var(--widget-subtitle);\n  color: var(--color-muted-foreground, currentColor);\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: linear-gradient(\n    135deg,\n    color-mix(in srgb, var(--widget-color) calc(var(--widget-wash) * var(--material-tint, 1)), transparent),\n    color-mix(\n      in srgb,\n      var(--widget-color-to, var(--widget-color)) calc(var(--widget-wash-2) * var(--material-tint, 1)),\n      transparent\n    )\n  );\n  /* Inset: the clip-path cuts any outer shadow. */\n  box-shadow: inset 0 0 calc(var(--material-glow, 0px) * 1.2)\n    oklch(from var(--widget-color) l c h / 0.55);\n  clip-path: inset(0 calc((100 - var(--widget-fill-value)) * 1%) 0 0 round var(--widget-radius));\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 round var(--widget-radius));\n  }\n}\n\n/* === Anatomy: Widget.Content with a Widget.Head lays its parts out as a tile === */\n.glasshome-widget-grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  gap: var(--widget-grid-gap);\n  height: 100%;\n  padding: var(--widget-grid-pad);\n  overflow: hidden;\n  isolation: isolate;\n  color: var(--foreground);\n}\n\n/* In-flow content spans the tile (the max-content first column would collapse it); absolute parts keep the padding box. */\n.glasshome-widget-grid > :where(:not(.glasshome-widget-backdrop, .glasshome-widget-layer, .glasshome-widget-glyph)) {\n  grid-column: 1 / -1;\n}\n.glasshome-widget-layer {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  overflow: hidden;\n}\n.glasshome-widget-head {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  min-width: 0;\n}\n.glasshome-widget-head-text {\n  min-height: var(--widget-icon-box);\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n  flex: 1;\n}\n.glasshome-widget-head-aside {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 6px;\n  max-height: 26px;\n  overflow: hidden;\n  flex-shrink: 1;\n}\n.glasshome-widget-eyebrow {\n  font-size: var(--widget-text-meta);\n  font-weight: 500;\n  line-height: 1.25;\n  color: var(--muted-foreground);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.glasshome-widget-name {\n  font-size: var(--widget-text-name);\n  font-weight: 650;\n  line-height: 1.2;\n  letter-spacing: -0.01em;\n  color: var(--foreground);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  overflow-wrap: break-word;\n}\n\n.glasshome-widget-hero {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--widget-grid-gap);\n  min-height: 0;\n  min-width: 0;\n}\n.glasshome-widget-reading {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  z-index: 1;\n}\n.glasshome-widget-reading-value {\n  font-size: var(--widget-text-value);\n  font-weight: 650;\n  line-height: 1;\n  letter-spacing: -0.03em;\n  font-variant-numeric: tabular-nums;\n  color: var(--foreground);\n  white-space: nowrap;\n}\n/* Alternating names restart the rise on each change without rebuilding the text. */\n.glasshome-widget-reading-value[data-turn=\"a\"] {\n  animation: tile-value-in-a var(--duration-morph) var(--ease-morph);\n}\n.glasshome-widget-reading-value[data-turn=\"b\"] {\n  animation: tile-value-in-b var(--duration-morph) var(--ease-morph);\n}\n@keyframes tile-value-in-a {\n  from {\n    opacity: 0;\n    transform: translateY(0.25em);\n  }\n}\n@keyframes tile-value-in-b {\n  from {\n    opacity: 0;\n    transform: translateY(0.25em);\n  }\n}\n.glasshome-widget-unit {\n  font-size: 0.5em;\n  font-weight: 550;\n  letter-spacing: 0;\n  margin-left: 0.08em;\n  color: var(--muted-foreground);\n}\n.glasshome-widget-sub {\n  font-size: var(--widget-text-sub);\n  font-weight: 500;\n  color: var(--muted-foreground);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Placed on the tile, not the hero, so a control row never moves or shrinks it. */\n.glasshome-widget-art {\n  position: absolute;\n  right: var(--widget-grid-pad);\n  bottom: var(--widget-grid-pad);\n  height: min(calc(100% - 2 * var(--widget-grid-pad) - var(--widget-icon-box) - var(--widget-grid-gap)), 48cqi);\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n/* Beside art a long word (\"Unlocked\") shrinks to end where the art starts, at about 50cqi; short values keep full size. */\n@container widget (min-width: 180px) and (min-height: 130px) {\n  .glasshome-widget-hero[data-art] .glasshome-widget-reading-value {\n    font-size: max(18px, min(var(--widget-text-value), calc(50cqi / (var(--value-len, 1) * 0.56))));\n  }\n}\n.glasshome-widget-backdrop > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n/* Art keeps its shape and clears a state word at its largest (15cqi, about 3.4em); each art sets --art-aspect. */\n.glasshome-widget-grid .glasshome-widget-art > * {\n  height: min(100%, calc((52cqi - 2 * var(--widget-grid-pad) - var(--widget-grid-gap)) / var(--art-aspect, 1)));\n  flex-shrink: 0;\n}\n.glasshome-widget-grid .glasshome-widget-art > img {\n  width: auto;\n  height: auto;\n  max-height: 100%;\n  max-width: calc(52cqi - 2 * var(--widget-grid-pad) - var(--widget-grid-gap));\n}\n\n.glasshome-widget-controls {\n  display: flex;\n  gap: 8px;\n  min-width: 0;\n}\n\n.glasshome-widget-glyph {\n  display: none;\n  position: absolute;\n  right: -8%;\n  bottom: -22%;\n  font-size: min(130cqb, 80cqi);\n  line-height: 1;\n  color: var(--widget-color);\n  opacity: 0.16;\n  pointer-events: none;\n  z-index: -1;\n}\n\n/* Controls sit on the bottom row beside the value, or under it on a narrow tile; the art lifts above them. */\n.glasshome-widget-head {\n  grid-column: 1 / -1;\n}\n.glasshome-widget-hero {\n  grid-row: 3;\n  grid-column: 1 / -1;\n}\n.glasshome-widget-grid:has(> .glasshome-widget-controls) > .glasshome-widget-hero {\n  grid-column: 1;\n}\n.glasshome-widget-controls {\n  grid-row: 3;\n  grid-column: 2;\n  align-self: end;\n  position: relative;\n  z-index: 1;\n}\n.glasshome-widget-grid:has(> .glasshome-widget-hero[data-empty]) > .glasshome-widget-controls {\n  grid-column: 1 / -1;\n}\n@container widget (max-width: 519px) {\n  .glasshome-widget-grid:has(> .glasshome-widget-controls) {\n    grid-template-rows: auto minmax(0, 1fr) auto auto;\n  }\n  .glasshome-widget-grid:has(> .glasshome-widget-controls) > .glasshome-widget-hero {\n    grid-column: 1 / -1;\n  }\n  .glasshome-widget-controls {\n    grid-row: 4;\n    grid-column: 1 / -1;\n  }\n  .glasshome-widget-grid:has(> .glasshome-widget-controls) .glasshome-widget-art {\n    bottom: calc(var(--widget-grid-pad) + var(--widget-control-h) + var(--widget-grid-gap));\n    height: min(\n      calc(\n        100% -\n        2 *\n        var(--widget-grid-pad) -\n        var(--widget-icon-box) -\n        2 *\n        var(--widget-grid-gap) -\n        var(--widget-control-h)\n      ),\n      48cqi\n    );\n  }\n}\n@container widget (max-height: 229px) {\n  .glasshome-widget-controls {\n    display: none;\n  }\n  .glasshome-widget-grid:has(> .glasshome-widget-controls) {\n    grid-template-rows: auto minmax(0, 1fr) auto;\n  }\n  .glasshome-widget-grid:has(> .glasshome-widget-controls) .glasshome-widget-art {\n    bottom: var(--widget-grid-pad);\n    height: min(calc(100% - 2 * var(--widget-grid-pad) - var(--widget-icon-box) - var(--widget-grid-gap)), 48cqi);\n  }\n}\n@container widget (max-width: 179px) {\n  .glasshome-widget-art {\n    display: none;\n  }\n}\n@container widget (max-height: 169px) {\n  .glasshome-widget-head-aside {\n    display: none;\n  }\n}\n@container widget ((max-height: 129px) or (max-width: 139px)) {\n  .glasshome-widget-head-text {\n    min-height: 0;\n  }\n  .glasshome-widget-name {\n    -webkit-line-clamp: 1;\n  }\n  .glasshome-widget-grid {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: 2px;\n  }\n  .glasshome-widget-head-icon,\n  .glasshome-widget-art,\n  .glasshome-widget-eyebrow,\n  .glasshome-widget-sub {\n    display: none;\n  }\n  .glasshome-widget-glyph {\n    display: block;\n  }\n  .glasshome-widget-reading-value {\n    font-size: clamp(18px, min(34cqb, 20cqi), 30px);\n  }\n  .glasshome-widget-name {\n    font-size: clamp(12px, min(18cqb, 11cqi), 15px);\n    font-weight: 550;\n    color: var(--muted-foreground);\n  }\n}\n@container widget (max-height: 129px) and (min-width: 260px) {\n  .glasshome-widget-grid {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--widget-grid-gap);\n  }\n  .glasshome-widget-name {\n    font-size: clamp(14px, 22cqb, 18px);\n    font-weight: 650;\n    color: var(--foreground);\n  }\n  .glasshome-widget-eyebrow {\n    display: block;\n  }\n}\n\n.glasshome-widget-backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: -2;\n  overflow: hidden;\n}\n.glasshome-widget-backdrop > img.area-night {\n  opacity: 0;\n  transition: opacity 700ms ease;\n}\n.glasshome-widget-backdrop > img.area-night[data-visible] {\n  opacity: 1;\n}\n.glasshome-widget-backdrop > .glasshome-widget-backdrop-light {\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(90% 80% at 25% 30%, oklch(0.8 0.14 70), transparent 70%);\n  mix-blend-mode: soft-light;\n  opacity: var(--backdrop-light, 0);\n  transition: opacity 500ms ease;\n}\n.glasshome-widget-backdrop::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    color-mix(in oklch, var(--card) 82%, transparent) 0%,\n    color-mix(in oklch, var(--card) 40%, transparent) 22%,\n    transparent 42%,\n    transparent 62%,\n    color-mix(in oklch, var(--card) 45%, transparent) 82%,\n    color-mix(in oklch, var(--card) 80%, transparent) 100%\n  );\n}\n\n@container widget (max-width: 239px) {\n  .glasshome-widget-choice [data-optional] {\n    display: none;\n  }\n}\n@container widget (max-width: 259px) {\n  .glasshome-widget-head-aside {\n    display: none;\n  }\n}\n@container widget (max-width: 139px) {\n  .glasshome-widget-controls {\n    display: none;\n  }\n}\n\n.glasshome-widget-controls {\n  justify-content: flex-start;\n  align-items: center;\n}\n.glasshome-widget-control.glasshome-widget-control {\n  width: var(--widget-control-h);\n  height: var(--widget-control-h);\n}\n.glasshome-widget-choice .glasshome-widget-control.glasshome-widget-control {\n  width: calc(var(--widget-control-h) - 8px);\n  height: calc(var(--widget-control-h) - 8px);\n}\n@container widget (max-width: 179px) and (min-height: 130px) {\n  .glasshome-widget-grid:not(:has(> .glasshome-widget-backdrop)) .glasshome-widget-head-text {\n    min-height: 0;\n  }\n  .glasshome-widget-grid:not(:has(> .glasshome-widget-backdrop)) .glasshome-widget-head {\n    flex-direction: column;\n    gap: 6px;\n  }\n}\n.glasshome-widget-unit[data-degree] {\n  vertical-align: top;\n  margin-left: 0.02em;\n  color: var(--foreground);\n}\n.glasshome-widget-control-wide.glasshome-widget-control-wide {\n  height: var(--widget-control-h);\n  gap: 6px;\n  padding: 0 14px;\n}\n@container widget (max-width: 179px) {\n  .glasshome-widget-grid:has(> .glasshome-widget-backdrop) .glasshome-widget-head-icon {\n    display: none;\n  }\n}\n.glasshome-widget-grid:has(> .glasshome-widget-backdrop) :is(.glasshome-widget-reading-value, .glasshome-widget-sub, .glasshome-widget-name, .glasshome-widget-eyebrow) {\n  text-shadow: 0 1px 8px color-mix(in oklch, var(--card) 75%, transparent);\n}\n.glasshome-widget-grid:has(> .glasshome-widget-backdrop) :is(.glasshome-widget-sub, .glasshome-widget-eyebrow) {\n  color: color-mix(in oklch, var(--foreground) 82%, transparent);\n}\n/* Control glyphs and words keep their share of a control as it grows past 4x4. */\n.glasshome-widget-grid :is(.glasshome-widget-control, .glasshome-widget-control-wide) :is(iconify-icon, svg) {\n  font-size: calc(var(--widget-control-h) * 0.43);\n  width: 1em;\n  height: 1em;\n}\n:is(.glasshome-widget-controls, .glasshome-widget-control-wide) {\n  font-size: max(13px, calc(var(--widget-control-h) * 0.3));\n}\n/* A big tile with no art of its own carries its icon large and faint, so the glass is not an empty box. */\n@container widget (min-width: 300px) and (min-height: 260px) {\n  .glasshome-widget-grid:not(:has(> .glasshome-widget-backdrop), :has(> .glasshome-widget-hero[data-art], > .glasshome-widget-art, > .glasshome-widget-layer))\n    > .glasshome-widget-glyph {\n    display: block;\n    right: -3%;\n    bottom: -12%;\n    font-size: min(78cqb, 52cqi);\n    opacity: 0.1;\n  }\n}\n/* A one-shot action confirms on its control and on the glyph, the one thing a compact tile shows. */\n.glasshome-widget-grid > .glasshome-widget-glyph {\n  transition: opacity var(--duration-state) var(--ease-morph);\n}\n.glasshome-widget[data-confirmed] .glasshome-widget-glyph {\n  opacity: 0.5;\n}\n.glasshome-widget-grid [data-confirmed]:is(.glasshome-widget-control, .glasshome-widget-control-wide) {\n  --glass-base: color-mix(in srgb, var(--widget-color) 35%, transparent);\n  transition: background-color var(--duration-state) var(--ease-morph);\n}\n\n/* === Sheet: what a held tile opens (framework/panel) ===\n * Rendered in a popover or dialog outside the widget's shadow root, so every rule\n * the sheet needs lives here, never in a widget's own utilities. */\n.glasshome-sheet {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  color: var(--foreground);\n}\n.glasshome-sheet [data-slot=\"swatch-picker\"] {\n  max-width: 360px;\n}\n.glasshome-panel-section {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.glasshome-panel-label {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--muted-foreground);\n}\n.glasshome-panel-rows {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 8px;\n}\n.glasshome-panel-row-wrap {\n  position: relative;\n  min-width: 0;\n}\n.glasshome-panel-row {\n  --widget-wash: 22%;\n  --widget-wash-2: 11%;\n  --widget-radius: var(--radius-lg, 16px);\n  --widget-icon-box: 34px;\n  --widget-icon-glyph: 19px;\n  position: relative;\n  width: 100%;\n  height: 56px;\n  justify-content: flex-start;\n  gap: 10px;\n  padding: 0 12px 0 10px;\n  overflow: hidden;\n  text-align: left;\n  touch-action: pan-y;\n}\n.glasshome-panel-row-static {\n  cursor: default;\n  scale: none;\n}\n.glasshome-panel-row-fill {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.glasshome-panel-row-icon {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.glasshome-panel-row-icon-off {\n  color: var(--muted-foreground);\n}\n.glasshome-panel-row-text {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.glasshome-panel-row-name,\n.glasshome-panel-row-state,\n.glasshome-panel-fact-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n/* A reading may take a second line rather than lose its end (\"3 Moderate\"). */\n.glasshome-panel-fact-value {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n}\n.glasshome-panel-row-name,\n.glasshome-panel-fact-value {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--foreground);\n}\n.glasshome-panel-row-state,\n.glasshome-panel-fact-label {\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--muted-foreground);\n}\n.glasshome-panel-row-trailing {\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  translate: 0 -50%;\n}\n.glasshome-panel-facts {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));\n  row-gap: 10px;\n  padding: 10px 4px 10px 0;\n  overflow: hidden;\n  border-radius: var(--radius-lg, 16px);\n  --glass-base: color-mix(in srgb, var(--card) var(--material-clarity, 60%), transparent);\n  backdrop-filter: blur(calc(var(--material-blur, 24px) * 0.6)) saturate(1.6);\n  -webkit-backdrop-filter: blur(calc(var(--material-blur, 24px) * 0.6)) saturate(1.6);\n}\n/* Without blur a see-through strip is just see-through: it takes the card fill. */\n.reduce-blur .glasshome-panel-facts {\n  --glass-base: var(--card);\n}\n.glasshome-panel-fact {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n  padding: 0 12px;\n  box-shadow: -1px 0 0 color-mix(in oklch, var(--foreground) 10%, transparent);\n}\n.glasshome-panel-fact-icon {\n  flex-shrink: 0;\n  font-size: 18px;\n  color: var(--muted-foreground);\n}\n\n/* Inset: the grid cell clips anything drawn outside the tile. */\n.glasshome-widget:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: -2px;\n}\n\n/* === Hold flood: the dock's hold fill (ui HOLD_MOTION), grown from the finger === */\n.glasshome-widget-hold-flood {\n  position: absolute;\n  translate: -50% -50%;\n  border-radius: 9999px;\n  background: color-mix(in oklch, var(--primary) 45%, transparent);\n  pointer-events: none;\n  scale: 0;\n  opacity: 0;\n  transition:\n    scale var(--duration-state, 200ms) var(--ease-contract, ease-in),\n    opacity var(--duration-state, 200ms) var(--ease-contract, ease-in);\n}\n.glasshome-widget-hold-flood[data-hold] {\n  scale: 1;\n  opacity: 1;\n  transition-duration: var(--duration-morph, 400ms);\n  transition-timing-function: linear;\n}\n.glasshome-widget-hold-flood[data-fired] {\n  scale: 1;\n  opacity: 0;\n}\n/* A row of ui buttons in a sheet (scenes, one-tap actions). */\n.glasshome-sheet-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n/* The sheet wears its tile: the tile's tone washed into the glass, its picture as a band behind\n   the head that fades into the glass, so the tile reads as having grown open. */\n.glasshome-sheet-surface {\n  --glass-wash: 20%;\n  --glass-wash-2: 7%;\n  --widget-icon-box: 48px;\n  --widget-icon-glyph: 26px;\n}\n.glasshome-sheet-band {\n  position: absolute;\n  inset: 0 0 auto;\n  height: 150px;\n  overflow: hidden;\n  pointer-events: none;\n  mask-image: linear-gradient(180deg, #000 30%, transparent);\n}\n.glasshome-sheet-band > img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  opacity: 0.55;\n}\n.glasshome-sheet-surface > [data-slot$=\"-header\"],\n.glasshome-sheet-surface > [data-slot$=\"-body\"] {\n  position: relative;\n}\n.glasshome-sheet-icon {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n", er = !1, tr, nr = /* @__PURE__ */ new WeakSet();
+function rr() {
+	return tr || (tr = new CSSStyleSheet(), tr.replaceSync($n.replace(/:root\b/g, ":host").replace(/^\.dark\b/gm, ":host(.dark)"))), tr;
 }
-function Kt(e) {
+function ir(e) {
 	if (typeof ShadowRoot < "u" && e instanceof ShadowRoot) {
-		if (Wt.has(e)) return;
-		let t = Gt();
-		e.adoptedStyleSheets.includes(t) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, t]), Wt.add(e);
+		if (nr.has(e)) return;
+		let t = rr();
+		e.adoptedStyleSheets.includes(t) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, t]), nr.add(e);
 		return;
 	}
-	if (Ht) return;
+	if (er) return;
 	let t = e ?? (typeof document > "u" ? void 0 : document);
 	if (!t) return;
 	if (t.head.querySelector?.("style[data-glasshome-tokens]")) {
-		Ht = !0;
+		er = !0;
 		return;
 	}
 	let n = t.createElement("style");
-	n.setAttribute("data-glasshome-tokens", ""), n.textContent = Vt, t.head.appendChild(n), Ht = !0;
+	n.setAttribute("data-glasshome-tokens", ""), n.textContent = $n, t.head.appendChild(n), er = !0;
 }
-//#endregion
-//#region src/framework/utils/cn.ts
-function V(...e) {
-	return xe(be(e));
-}
-var qt = {
+var ar = {
 	"classic-glass": {
 		id: "classic-glass",
 		name: "Classic Glass",
 		description: "Default glassmorphism design with blur background and gradient",
 		styles: { cssVars: {
 			"--widget-padding": "1.5rem",
-			"--widget-backdrop": "blur(var(--glass-blur, 24px)) saturate(1.8)"
+			"--widget-backdrop": "blur(var(--glass-blur, var(--material-blur, 24px))) saturate(1.8)"
 		} },
 		layout: {
 			type: "flex",
@@ -191,21 +806,21 @@ var qt = {
 		}
 	}
 };
-function Jt(e) {
-	return qt[e];
+function or(e) {
+	return ar[e];
 }
 //#endregion
 //#region src/framework/backgrounds/WidgetSliderFill.tsx
-var Yt = /*#__PURE__*/ I("<div>"), Xt = e(() => void 0, "sliderFill.color");
-function Zt(e) {
-	return e.color !== void 0 && Xt(), (() => {
-		var t = Yt();
-		return N((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 = {
+var sr = /*#__PURE__*/ B("<div>"), cr = e(() => void 0, "sliderFill.color");
+function lr(e) {
+	return e.color !== void 0 && cr(), (() => {
+		var t = sr();
+		return P((n) => {
+			var r = X("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": B.BACKGROUND
+				"z-index": K.BACKGROUND
 			};
-			return r !== n.e && j(t, n.e = r), n.t = ve(t, i, n.t), n;
+			return r !== n.e && M(t, n.e = r), n.t = z(t, i, n.t), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -214,55 +829,34 @@ function Zt(e) {
 }
 //#endregion
 //#region src/framework/components/WidgetContent.tsx
-var Qt = /*#__PURE__*/ I("<div>");
-function $t(e) {
-	return (() => {
-		var t = Qt();
-		return P(t, () => e.children), N(() => j(t, V("glasshome-widget-content", e.class))), t;
-	})();
-}
-//#endregion
-//#region src/framework/components/WidgetIcon.tsx
-var en = /*#__PURE__*/ I("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-2 glass glass-tint\">"), tn = /*#__PURE__*/ I("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-3 glass glass-tint\">"), nn = /*#__PURE__*/ I("<div><div class=\"glasshome-widget-icon-glyph flex items-center justify-center\">");
-function rn(e) {
-	let t = () => e.entityCount ?? 1;
+var ur = /*#__PURE__*/ B("<div>"), dr = /\bglasshome-widget-(head|hero|controls|backdrop|glyph|layer)\b/;
+function fr(e) {
+	let t = rn(A(W));
+	E(() => t?.setAccent(e.accent)), k(() => t?.setAccent(void 0));
+	let n = T(() => e.children), r = D(() => n.toArray().some((e) => e instanceof Element && dr.test(e.className)));
 	return (() => {
-		var n = nn(), r = n.firstChild;
-		return P(n, M(w, {
-			get when() {
-				return t() >= 2;
-			},
-			get children() {
-				return en();
-			}
-		}), r), P(n, M(w, {
-			get when() {
-				return t() >= 3;
-			},
-			get children() {
-				return tn();
-			}
-		}), r), P(r, () => e.icon), N((t) => {
-			var r = V("glasshome-widget-icon glass glass-tint", "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 && j(n, t.e = r), t.t = ve(n, i, t.t), t;
+		var t = ur();
+		return F(t, n), P((n) => {
+			var i = X(r() ? "glasshome-widget-grid" : "glasshome-widget-content", e.class), a = e.accent ? { "--widget-color": e.accent } : void 0;
+			return i !== n.e && M(t, n.e = i), n.t = z(t, a, n.t), n;
 		}, {
 			e: void 0,
 			t: void 0
-		}), n;
+		}), t;
 	})();
 }
 //#endregion
 //#region src/framework/components/WidgetStatus.tsx
-var an = /*#__PURE__*/ I("<p>");
-function on(e) {
+var pr = /*#__PURE__*/ B("<p>");
+function mr(e) {
 	return (() => {
-		var t = an();
-		return P(t, (() => {
-			var t = F(() => !!e.isUnavailable);
+		var t = pr();
+		return F(t, (() => {
+			var t = I(() => !!e.isUnavailable);
 			return () => t() ? "Unavailable" : e.children;
-		})()), N((n) => {
-			var r = V("glasshome-widget-status", "relative", e.dimmed && "opacity-40", e.class), i = B.ACTIONS;
-			return r !== n.e && j(t, n.e = r), i !== n.t && _e(t, "z-index", n.t = i), n;
+		})()), P((n) => {
+			var r = X("glasshome-widget-status", "relative", e.dimmed && "opacity-40", e.class), i = K.ACTIONS;
+			return r !== n.e && M(t, n.e = r), i !== n.t && R(t, "z-index", n.t = i), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -271,21 +865,21 @@ function on(e) {
 }
 //#endregion
 //#region src/framework/components/WidgetTitle.tsx
-var sn = /*#__PURE__*/ I("<span class=\"glasshome-widget-badge shrink-0\">"), cn = /*#__PURE__*/ I("<div><h3 class=glasshome-widget-title>");
-function ln(e) {
+var hr = /*#__PURE__*/ B("<span class=\"glasshome-widget-badge shrink-0\">"), gr = /*#__PURE__*/ B("<div><h3 class=glasshome-widget-title>");
+function _r(e) {
 	return (() => {
-		var t = cn(), n = t.firstChild;
-		return P(n, () => e.children), P(t, M(w, {
+		var t = gr(), n = t.firstChild;
+		return F(n, () => e.children), F(t, N(w, {
 			get when() {
-				return F(() => e.badge !== void 0)() && e.badge > 0;
+				return I(() => e.badge !== void 0)() && e.badge > 0;
 			},
 			get children() {
-				var t = sn();
-				return P(t, () => e.badge), t;
+				var t = hr();
+				return F(t, () => e.badge), t;
 			}
-		}), null), N((n) => {
-			var r = V("relative flex items-center gap-2", e.class), i = B.ACTIONS;
-			return r !== n.e && j(t, n.e = r), i !== n.t && _e(t, "z-index", n.t = i), n;
+		}), null), P((n) => {
+			var r = X("relative flex items-center gap-2", e.class), i = K.ACTIONS;
+			return r !== n.e && M(t, n.e = r), i !== n.t && R(t, "z-index", n.t = i), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -294,14 +888,14 @@ function ln(e) {
 }
 //#endregion
 //#region src/framework/utils/clipboard.ts
-async function un(e) {
+async function vr(e) {
 	if (navigator.clipboard?.writeText) try {
 		return await navigator.clipboard.writeText(e), !0;
 	} catch {}
-	return dn(e);
+	return yr(e);
 }
-function dn(e) {
-	let t = fn(), n = document.createElement("textarea");
+function yr(e) {
+	let t = br(), n = document.createElement("textarea");
 	n.value = e, n.setAttribute("readonly", ""), n.style.position = "fixed", n.style.top = "0", n.style.left = "0", n.style.opacity = "0", (t?.parentElement ?? document.body).append(n);
 	try {
 		return n.focus(), n.select(), n.setSelectionRange(0, e.length), n.getRootNode().activeElement === n && document.execCommand("copy");
@@ -311,23 +905,23 @@ function dn(e) {
 		n.remove(), t?.focus();
 	}
 }
-function fn() {
+function br() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e instanceof HTMLElement ? e : null;
 }
-function pn(e = 2e3) {
-	let [t, n] = D("idle"), r;
-	return O(() => clearTimeout(r)), {
+function xr(e = 2e3) {
+	let [t, n] = O("idle"), r;
+	return k(() => clearTimeout(r)), {
 		state: t,
 		copy: async (t) => {
-			n(await un(t) ? "copied" : "failed"), clearTimeout(r), r = setTimeout(() => n("idle"), e);
+			n(await vr(t) ? "copied" : "failed"), clearTimeout(r), r = setTimeout(() => n("idle"), e);
 		}
 	};
 }
 //#endregion
 //#region src/framework/utils/entity-aggregation.ts
-function mn(e, t = !1) {
+function Sr(e, t = !1) {
 	if (e.length === 0) return {
 		isGroup: !1,
 		state: "unknown",
@@ -350,7 +944,7 @@ function mn(e, t = !1) {
 			isUnavailable: t.state === "unavailable",
 			brightness: r,
 			brightnessPercent: i,
-			color: _n(t),
+			color: Tr(t),
 			onCount: +!!n,
 			totalCount: 1,
 			description: n ? "On" : "Off"
@@ -362,7 +956,7 @@ function mn(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(gn(e, n));
+				l.push(wr(e, n));
 			}
 			break;
 		case "off":
@@ -375,26 +969,26 @@ function mn(e, t = !1) {
 	}
 	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);
-	let v = c > 0 ? Math.round(s / c) : 0, ee = Math.round(v / 255 * 100), y;
+	let v = c > 0 ? Math.round(s / c) : 0, y = Math.round(v / 255 * 100), b;
 	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 = _n(e[0]);
-	let te;
-	return te = m ? "All on" : h ? "All off" : r > 0 ? `${r} of ${u} on` : "Off", {
+		b = `rgb(${Math.round(e * r)}, ${Math.round(t * r)}, ${Math.round(n * r)})`;
+	} else b = Tr(e[0]);
+	let x;
+	return x = m ? "All on" : h ? "All off" : r > 0 ? `${r} of ${u} on` : "Off", {
 		isGroup: n,
 		state: g,
 		isOn: _,
 		isUnavailable: g === "unavailable",
 		brightness: v,
-		brightnessPercent: ee,
-		color: y,
+		brightnessPercent: y,
+		color: b,
 		onCount: r,
 		totalCount: u,
-		description: te
+		description: x
 	};
 }
-function hn(e, t = "mean", n = !0) {
+function Cr(e, t = "mean", n = !0) {
 	if (e.length === 0) return {
 		isGroup: !1,
 		state: "unknown",
@@ -490,7 +1084,7 @@ function hn(e, t = "mean", n = !0) {
 		memberValues: a
 	};
 }
-function gn(e, t) {
+function wr(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,
@@ -498,7 +1092,7 @@ function gn(e, t) {
 		(s + i) * 255
 	];
 }
-function _n(e) {
+function Tr(e) {
 	if (e.state !== "on") return "rgb(100, 100, 100)";
 	let t = (e.attributes?.brightness ?? 255) / 255;
 	if (e.attributes?.rgb_color) {
@@ -506,7 +1100,7 @@ function _n(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] = gn(n, r);
+		let [n, r] = e.attributes.hs_color, [i, a, o] = wr(n, r);
 		return `rgb(${Math.round(i * t)}, ${Math.round(a * t)}, ${Math.round(o * t)})`;
 	}
 	if (e.attributes?.color_temp) {
@@ -517,7 +1111,7 @@ function _n(e) {
 }
 //#endregion
 //#region src/framework/utils/entity-state.ts
-function vn(e) {
+function Er(e) {
 	if (!e) return !1;
 	if ([
 		"on",
@@ -533,15 +1127,15 @@ function vn(e) {
 	}
 	return !1;
 }
-function yn(e, t, n) {
+function Dr(e, t, n) {
 	return e?.attributes ? e.attributes[t] ?? n : n;
 }
-function bn(e) {
-	return e.filter(vn).length;
+function Or(e) {
+	return e.filter(Er).length;
 }
 //#endregion
 //#region src/framework/utils/format-value.ts
-function xn(e, t, n) {
+function kr(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}` : "--";
@@ -552,41 +1146,47 @@ function xn(e, t, n) {
 }
 //#endregion
 //#region src/framework/utils/interpret-value.ts
-function Sn(e, t) {
+function Ar(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 Cn = /*#__PURE__*/ I("<div class=glasshome-widget-subtitle>"), wn = /*#__PURE__*/ I("<div><div class=glasshome-widget-value>");
-function Tn(e) {
+var jr = /*#__PURE__*/ B("<div class=glasshome-widget-subtitle>"), Mr = /*#__PURE__*/ B("<div><div class=glasshome-widget-value>");
+function Nr(e) {
 	return (() => {
-		var t = wn(), n = t.firstChild;
-		return P(n, () => xn(e.value, e.unit)), P(t, M(w, {
+		var t = Mr(), n = t.firstChild;
+		return F(n, () => kr(e.value, e.unit)), F(t, N(w, {
 			get when() {
-				return F(() => !!e.interpret)() && typeof e.value == "number";
+				return I(() => !!e.interpret)() && typeof e.value == "number";
 			},
 			get children() {
-				var t = Cn();
-				return P(t, () => Sn(e.value, e.unit)), t;
+				var t = jr();
+				return F(t, () => Ar(e.value, e.unit)), t;
 			}
-		}), null), N(() => j(t, V("flex flex-col", e.class))), t;
+		}), null), P(() => M(t, X("flex flex-col", e.class))), t;
 	})();
 }
 //#endregion
 //#region src/framework/core/Widget.tsx
-var En = /*#__PURE__*/ I("<div><div class=\"relative h-full w-full\">"), Dn = /*#__PURE__*/ I("<div class=\"glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse\">"), On = /*#__PURE__*/ I("<div class=\"flex h-full w-full flex-col items-center justify-center gap-2 text-center\">"), kn = /*#__PURE__*/ I("<div class=\"flex items-center justify-center text-muted-foreground\">"), An = /*#__PURE__*/ I("<h3 class=\"font-semibold text-sm text-foreground\">"), jn = /*#__PURE__*/ I("<p class=\"text-muted-foreground text-xs\">");
-function Mn(t) {
-	let n = k(R), [r, i] = D(), [a, o] = D({
+var Pr = /*#__PURE__*/ B("<span class=glasshome-widget-hold-flood aria-hidden=true>"), Fr = /*#__PURE__*/ B("<div><div class=\"relative h-full w-full\">"), Ir = /*#__PURE__*/ B("<div class=\"glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse\">"), Lr = /*#__PURE__*/ B("<div class=\"flex h-full w-full flex-col items-center justify-center gap-2 text-center\">"), Rr = /*#__PURE__*/ B("<div class=\"flex items-center justify-center text-muted-foreground\">"), zr = /*#__PURE__*/ B("<h3 class=\"font-semibold text-sm text-foreground\">"), Br = /*#__PURE__*/ B("<p class=\"text-muted-foreground text-xs\">");
+function Vr(t) {
+	let n = A(W), r = xn(() => ({ hold: { action: () => (q.get(n ?? {}) ?? q.get(d))?.("edit") } }));
+	k(r.dispose);
+	let i = rn(n), a = xn(() => ({ hold: i?.hasSheet() ? { action: () => (q.get(n ?? {}) ?? q.get(d))?.() } : void 0 }));
+	k(a.dispose);
+	let o = () => t.emptyState && n ? r : t.gestures ?? (i?.hasSheet() ? a : void 0);
+	E(() => i?.setTone(t.color ?? (t.tone ? `var(--tone-${t.tone})` : void 0)));
+	let [s, c] = O(), [l, u] = O({
 		width: 0,
 		height: 0
 	});
-	pe(() => {
-		let e = r();
+	E(() => {
+		let e = s();
 		if (!e) return;
 		let t = new ResizeObserver(([e]) => {
 			if (!e) return;
 			let t = e.borderBoxSize?.[0];
-			o(t ? {
+			u(t ? {
 				width: t.inlineSize,
 				height: t.blockSize
 			} : {
@@ -594,24 +1194,25 @@ function Mn(t) {
 				height: e.contentRect.height
 			});
 		});
-		t.observe(e), O(() => t.disconnect());
-	}), he(() => {
-		let e = r()?.getRootNode();
-		Kt(typeof ShadowRoot < "u" && e instanceof ShadowRoot || typeof Document < "u" && e instanceof Document ? e : void 0);
+		t.observe(e), k(() => t.disconnect());
+	}), ge(() => {
+		let e = s()?.getRootNode();
+		ir(typeof ShadowRoot < "u" && e instanceof ShadowRoot || typeof Document < "u" && e instanceof Document ? e : void 0);
 	});
-	let s = {
+	let d = {
+		...n,
 		updateConfig: n?.updateConfig ?? (() => {}),
-		registerDialogOpener: n?.registerDialogOpener,
-		callService: n?.callService,
-		dimensions: e(() => a(), "ctx.dimensions")
-	}, c = E(() => {
-		if (t.variant) return typeof t.variant == "string" ? Jt(t.variant) : t.variant;
-	}), l = e(() => t.gradient, "widget.gradient"), u = E(() => ({
+		dimensions: e(() => l(), "ctx.dimensions")
+	};
+	n && Object.defineProperty(d, tn, { value: n });
+	let f = D(() => {
+		if (t.variant) return typeof t.variant == "string" ? or(t.variant) : t.variant;
+	}), p = e(() => t.gradient, "widget.gradient"), m = D(() => ({
 		"container-type": "size",
 		"container-name": "widget",
-		"touch-action": t.gestures && !t.isEditMode ? t.gestures.touchAction() : void 0,
-		...c()?.styles?.container,
-		...c()?.styles?.cssVars || {},
+		"touch-action": o() && !t.isEditMode ? o()?.touchAction() : void 0,
+		...f()?.styles?.container,
+		...f()?.styles?.cssVars || {},
 		...t.tone ? { "--widget-color": `var(--tone-${t.tone})` } : {},
 		...t.color ? { "--widget-color": t.color } : {},
 		...t.tone && t.tone !== "neutral" || t.color ? { "--glass-tone": "var(--widget-color)" } : {},
@@ -619,89 +1220,530 @@ function Mn(t) {
 			"--widget-color-to": t.colorTo,
 			"--glass-tone-2": t.colorTo
 		} : {},
-		...t.gradient ? { "background-image": l() } : {}
-	})), d = () => !!t.gestures && !t.isEditMode, f = (e) => {
-		d() && t.gestures?.onPointerEnter(e);
-	}, p = (e) => {
-		d() && t.gestures?.onPointerDown(e);
-	}, m = (e) => {
-		d() && t.gestures?.onPointerMove(e);
-	}, h = (e) => {
-		d() && t.gestures?.onPointerUp(e);
-	}, g = (e) => {
-		d() && t.gestures?.onPointerCancel(e);
-	};
-	return M(R.Provider, {
-		value: s,
+		...t.gradient ? { "background-image": p() } : {}
+	})), h = () => !!o() && !t.isEditMode, g = (e) => {
+		h() && o()?.onPointerEnter(e);
+	}, _ = (e) => {
+		h() && o()?.onPointerDown(e);
+	}, v = (e) => {
+		h() && o()?.onPointerMove(e);
+	}, y = (e) => {
+		h() && o()?.onPointerUp(e);
+	}, b = (e) => {
+		h() && o()?.onPointerCancel(e);
+	}, x = () => o()?.hold?.() ?? null, S = {
+		x: 0,
+		y: 0,
+		r: 0
+	}, ee = (e) => (e && Object.assign(S, {
+		x: e.x,
+		y: e.y,
+		r: e.r
+	}), {
+		left: `${S.x}px`,
+		top: `${S.y}px`,
+		width: `${S.r * 2}px`,
+		height: `${S.r * 2}px`,
+		"z-index": K.BACKGROUND
+	});
+	return N(W.Provider, {
+		value: d,
 		get children() {
-			return M(zt.Provider, {
-				value: a,
+			return N(Vn.Provider, {
+				value: () => t.confirmed === !0,
 				get children() {
-					var e = En(), n = e.firstChild;
-					return A(e, "pointercancel", g), A(e, "pointerup", h), A(e, "pointermove", m), A(e, "pointerdown", p), A(e, "pointerenter", f), ye((e) => {
-						i(e), t.gestures?.bindElement(e);
-					}, e), P(n, (() => {
-						var e = F(() => !!t.emptyState);
-						return () => e() ? M(Nn, {
-							get icon() {
-								return t.emptyState.icon;
-							},
-							get title() {
-								return t.emptyState.title;
-							},
-							get message() {
-								return t.emptyState.message;
-							}
-						}) : t.children;
-					})()), P(e, (() => {
-						var e = F(() => !!t.loading);
-						return () => e() && (() => {
-							var e = Dn();
-							return N((t) => _e(e, "z-index", B.OVERLAY)), e;
-						})();
-					})(), null), N((r) => {
-						var i = V("glasshome-widget glass", "relative h-full w-full select-none overflow-hidden rounded-xl", c()?.styles?.class, t.class), a = u(), o = B.CONTENT;
-						return i !== r.e && j(e, r.e = i), r.t = ve(e, a, r.t), o !== r.a && _e(n, "z-index", r.a = o), r;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0
-					}), e;
+					return N(Sn.Provider, {
+						value: l,
+						get children() {
+							var e = Fr(), n = e.firstChild;
+							return e.$$keydown = (e) => {
+								h() && o()?.onKeyDown?.(e);
+							}, j(e, "pointercancel", b), j(e, "pointerup", y), j(e, "pointermove", v), j(e, "pointerdown", _), j(e, "pointerenter", g), V((e) => {
+								c(e), t.gestures?.bindElement(e), r.bindElement(e);
+							}, e), F(e, N(w, {
+								get when() {
+									return o()?.hold;
+								},
+								get children() {
+									var e = Pr();
+									return P((t) => {
+										var n = x() && !x()?.fired ? "" : void 0, r = x()?.fired ? "" : void 0, i = ee(x());
+										return n !== t.e && L(e, "data-hold", t.e = n), r !== t.t && L(e, "data-fired", t.t = r), t.a = z(e, i, t.a), t;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0
+									}), e;
+								}
+							}), n), F(n, (() => {
+								var e = I(() => !!t.emptyState);
+								return () => e() ? N(Hr, {
+									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 = Ir();
+									return P((t) => R(e, "z-index", K.OVERLAY)), e;
+								})();
+							})(), null), P((r) => {
+								var i = X("glasshome-widget glass", "relative h-full w-full select-none overflow-hidden rounded-xl", f()?.styles?.class, t.class), a = m(), o = t.confirmed || void 0, s = h() ? 0 : void 0, c = K.CONTENT;
+								return i !== r.e && M(e, r.e = i), r.t = z(e, a, r.t), o !== r.a && L(e, "data-confirmed", r.a = o), s !== r.o && L(e, "tabindex", r.o = s), c !== r.i && R(n, "z-index", r.i = c), r;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0,
+								o: void 0,
+								i: void 0
+							}), e;
+						}
+					});
 				}
 			});
 		}
 	});
 }
-function Nn(e) {
+function Hr(e) {
 	return (() => {
-		var t = On();
-		return P(t, (() => {
-			var t = F(() => !!e.icon);
+		var t = Lr();
+		return F(t, (() => {
+			var t = I(() => !!e.icon);
 			return () => t() && (() => {
-				var t = kn();
-				return P(t, () => e.icon), t;
+				var t = Rr();
+				return F(t, () => e.icon), t;
 			})();
-		})(), null), P(t, (() => {
-			var t = F(() => !!e.title);
+		})(), null), F(t, (() => {
+			var t = I(() => !!e.title);
 			return () => t() && (() => {
-				var t = An();
-				return P(t, () => e.title), t;
+				var t = zr();
+				return F(t, () => e.title), t;
 			})();
-		})(), null), P(t, (() => {
-			var t = F(() => !!e.message);
+		})(), null), F(t, (() => {
+			var t = I(() => !!e.message);
 			return () => t() && (() => {
-				var t = jn();
-				return P(t, () => e.message), t;
+				var t = Br();
+				return F(t, () => e.message), t;
 			})();
 		})(), null), t;
 	})();
 }
-var H = Mn;
-H.Content = $t, H.Icon = rn, H.Title = ln, H.Status = on, H.Value = Tn, H.SliderFill = Zt;
+var Z = Vr;
+Z.Content = fr, Z.Icon = kn, Z.Title = _r, Z.Status = mr, Z.Value = Nr, Z.SliderFill = lr, Z.Head = Un, Z.Hero = Wn, Z.Controls = Gn, Z.Stepper = Kn, Z.Choice = qn, Z.Action = Jn, Z.Chip = Yn, Z.Backdrop = Zn, Z.Layer = Xn, Z.Glyph = Qn, ve(["keydown"]);
+//#endregion
+//#region src/framework/panel/panel.tsx
+var Ur = /*#__PURE__*/ B("<section class=glasshome-panel-section><h3 class=glasshome-panel-label>"), Wr = /*#__PURE__*/ B("<div class=glasshome-panel-rows>"), Gr = /*#__PURE__*/ B("<span class=\"glasshome-widget-slider-fill glasshome-panel-row-fill\">"), Kr = /*#__PURE__*/ B("<span class=\"glasshome-widget-icon glass glasshome-panel-row-icon\">"), qr = /*#__PURE__*/ B("<span class=glasshome-panel-row-state>"), Jr = /*#__PURE__*/ B("<span class=glasshome-panel-row-text><span class=glasshome-panel-row-name>"), Yr = /*#__PURE__*/ B("<span class=glasshome-panel-row-trailing>"), Xr = /*#__PURE__*/ B("<div class=glasshome-panel-row-wrap>"), Zr = /*#__PURE__*/ B("<div>"), Qr = /*#__PURE__*/ B("<div class=\"glasshome-panel-facts glass\">"), $r = /*#__PURE__*/ B("<div class=glasshome-panel-fact><span class=glasshome-panel-row-text><span class=glasshome-panel-fact-label></span><span class=glasshome-panel-fact-value>"), ei = 450, ti = 8, ni = (e, t, n) => Math.min(n, Math.max(t, e)), ri = "button, a, input, select, textarea, [role=\"slider\"], [role=\"radio\"], [role=\"switch\"]";
+function ii(e) {
+	let t, n = !1, r = !1, i, a = 0, o = (t, n) => {
+		let r = e.slide?.();
+		if (!r) return 0;
+		let i = t.getBoundingClientRect(), a = e.axis === "x" ? (n.clientX - i.left) / i.width : 1 - (n.clientY - i.top) / i.height, o = r.min ?? 0, s = r.max ?? 100;
+		return Math.round(ni(o + a * (s - o), o, s));
+	}, s = () => {
+		clearTimeout(i), t = void 0;
+	};
+	return k(() => clearTimeout(i)), {
+		onPointerDown: (a) => {
+			if (a.button !== 0 || t) return;
+			let o = a.target instanceof Element ? a.target.closest(ri) : null;
+			o && o !== a.currentTarget || (t = {
+				x: a.clientX,
+				y: a.clientY,
+				id: a.pointerId
+			}, a.currentTarget.setPointerCapture?.(a.pointerId), n = !1, r = !1, e.onHold && (i = setTimeout(() => {
+				r = !0, e.onHold?.();
+			}, ei)));
+		},
+		onPointerMove: (s) => {
+			if (!t || s.pointerId !== t.id || r) return;
+			let c = s.currentTarget, l = e.axis === "x" ? Math.abs(s.clientX - t.x) : Math.abs(s.clientY - t.y);
+			!n && e.slide?.() && l > ti && (n = !0, clearTimeout(i)), n ? (a = o(c, s), e.slide?.()?.onChange(a)) : Math.hypot(s.clientX - t.x, s.clientY - t.y) > ti && clearTimeout(i);
+		},
+		onPointerUp: (i) => {
+			t && i.pointerId === t.id && (n ? e.slide?.()?.onCommit?.(a) : r || e.onTap?.(), s());
+		},
+		onPointerCancel: s
+	};
+}
+function ai(e) {
+	return (() => {
+		var t = Ur(), n = t.firstChild;
+		return F(n, () => e.label), F(t, () => e.children, null), t;
+	})();
+}
+function oi(e) {
+	return (() => {
+		var t = Wr();
+		return F(t, () => e.children), t;
+	})();
+}
+function si(e) {
+	let t = () => !!(e.onTap || e.slide || e.onHold), n = ii({
+		axis: "x",
+		slide: () => e.slide,
+		onTap: () => e.onTap?.(),
+		onHold: e.onHold ? () => e.onHold?.() : void 0
+	}), r = () => {
+		if (e.fill !== void 0) return e.fill;
+		let t = e.slide;
+		if (!t || !e.on) return;
+		let n = t.min ?? 0, r = t.max ?? 100;
+		return (t.value - n) / (r - n || 1) * 100;
+	}, i = (t) => {
+		let n = e.slide;
+		if (!n) return;
+		let r = t.key === "ArrowRight" || t.key === "ArrowUp" ? 5 : t.key === "ArrowLeft" || t.key === "ArrowDown" ? -5 : 0;
+		if (!r) return;
+		t.preventDefault();
+		let i = ni(n.value + r, n.min ?? 0, n.max ?? 100);
+		n.onChange(i), n.onCommit?.(i);
+	}, a = () => [
+		N(w, {
+			get when() {
+				return r() !== void 0;
+			},
+			get children() {
+				var e = Gr();
+				return P((t) => z(e, { "--widget-fill-value": r() }, t)), e;
+			}
+		}),
+		(() => {
+			var t = Kr();
+			return F(t, N(U, {
+				get icon() {
+					return e.icon;
+				},
+				class: "glasshome-widget-icon-glyph"
+			})), P((n) => {
+				var r = !!e.on, i = !e.on;
+				return r !== n.e && t.classList.toggle("glass-tint", n.e = r), i !== n.t && t.classList.toggle("glasshome-panel-row-icon-off", n.t = i), n;
+			}, {
+				e: void 0,
+				t: void 0
+			}), t;
+		})(),
+		(() => {
+			var t = Jr(), n = t.firstChild;
+			return F(n, () => e.name), F(t, N(w, {
+				get when() {
+					return e.state !== void 0;
+				},
+				get children() {
+					var t = qr();
+					return F(t, () => e.state), t;
+				}
+			}), null), t;
+		})()
+	], o = () => ({ "--widget-color": e.tone ?? "var(--tone-neutral)" });
+	return (() => {
+		var r = Xr();
+		return F(r, N(w, {
+			get when() {
+				return t();
+			},
+			get fallback() {
+				return (() => {
+					var e = Zr();
+					return F(e, a), P((t) => {
+						var n = `${Pt({
+							variant: "outline",
+							size: "none"
+						})} glasshome-panel-row glasshome-panel-row-static`, r = o();
+						return n !== t.e && M(e, t.e = n), t.t = z(e, r, t.t), t;
+					}, {
+						e: void 0,
+						t: void 0
+					}), e;
+				})();
+			},
+			get children() {
+				return N(Ee, {
+					variant: "outline",
+					size: "none",
+					class: "glasshome-panel-row",
+					get style() {
+						return o();
+					},
+					get "aria-label"() {
+						return e["aria-label"];
+					},
+					get "aria-pressed"() {
+						return e.on;
+					},
+					get onPointerDown() {
+						return n.onPointerDown;
+					},
+					get onPointerMove() {
+						return n.onPointerMove;
+					},
+					get onPointerUp() {
+						return n.onPointerUp;
+					},
+					get onPointerCancel() {
+						return n.onPointerCancel;
+					},
+					onKeyDown: i,
+					onClick: (t) => {
+						t.detail === 0 && e.onTap?.();
+					},
+					get children() {
+						return a();
+					}
+				});
+			}
+		}), null), F(r, N(w, {
+			get when() {
+				return e.trailing;
+			},
+			get children() {
+				var t = Yr();
+				return F(t, () => e.trailing), t;
+			}
+		}), null), r;
+	})();
+}
+function ci(e) {
+	return (() => {
+		var t = Qr();
+		return F(t, N(C, {
+			get each() {
+				return e.items;
+			},
+			children: (e) => (() => {
+				var t = $r(), n = t.firstChild, r = n.firstChild, i = r.nextSibling;
+				return F(t, N(U, {
+					get icon() {
+						return e.icon;
+					},
+					class: "glasshome-panel-fact-icon"
+				}), n), F(r, () => e.label), F(i, () => e.value), t;
+			})()
+		})), t;
+	})();
+}
+//#endregion
+//#region src/framework/panel/panel-entity.tsx
+var li = (e) => typeof e == "number" ? Math.round(e) : void 0, ui = (e) => e.charAt(0).toUpperCase() + e.slice(1).replaceAll("_", " "), Q = (e) => ({ entity_id: e.id }), di = {
+	light: {
+		icon: "mdi:lightbulb",
+		tone: (e) => {
+			let t = e.attributes.rgb_color;
+			return Array.isArray(t) && t.length === 3 ? `rgb(${t.join(" ")})` : "var(--tone-warning)";
+		},
+		on: (e) => e.state === "on",
+		state: (e) => {
+			if (e.state !== "on") return "Off";
+			let t = e.attributes.brightness;
+			return typeof t == "number" ? `${Math.round(t / 255 * 100)}%` : "On";
+		},
+		level: (e) => {
+			let t = e.attributes.brightness;
+			return e.state === "on" ? typeof t == "number" ? Math.round(t / 255 * 100) : 100 : 0;
+		},
+		setLevel: (e, t, n) => e("light", n > 0 ? "turn_on" : "turn_off", n > 0 ? { brightness_pct: n } : {}, Q(t)),
+		tap: (e, t) => e("light", "toggle", {}, Q(t))
+	},
+	switch: {
+		icon: "mdi:toggle-switch-variant",
+		tone: "var(--tone-info)",
+		on: (e) => e.state === "on",
+		state: (e) => e.state === "on" ? "On" : "Off",
+		tap: (e, t) => e("switch", "toggle", {}, Q(t))
+	},
+	input_boolean: {
+		icon: "mdi:toggle-switch-variant",
+		tone: "var(--tone-info)",
+		on: (e) => e.state === "on",
+		state: (e) => e.state === "on" ? "On" : "Off",
+		tap: (e, t) => e("input_boolean", "toggle", {}, Q(t))
+	},
+	fan: {
+		icon: "mdi:fan",
+		tone: "var(--tone-success)",
+		on: (e) => e.state === "on",
+		state: (e) => {
+			if (e.state !== "on") return "Off";
+			let t = li(e.attributes.percentage);
+			return t === void 0 ? "On" : `${t}%`;
+		},
+		level: (e) => e.state === "on" ? li(e.attributes.percentage) ?? 100 : 0,
+		setLevel: (e, t, n) => e("fan", "set_percentage", { percentage: n }, Q(t)),
+		tap: (e, t) => e("fan", "toggle", {}, Q(t))
+	},
+	cover: {
+		icon: "mdi:blinds",
+		tone: "var(--tone-info)",
+		on: (e) => e.state !== "closed",
+		state: (e) => {
+			let t = li(e.attributes.current_position), n = ui(e.state);
+			return t !== void 0 && e.state === "open" ? `${n} · ${t}%` : n;
+		},
+		level: (e) => li(e.attributes.current_position),
+		setLevel: (e, t, n) => e("cover", "set_cover_position", { position: n }, Q(t)),
+		tap: (e, t) => e("cover", t.state === "closed" ? "open_cover" : "close_cover", {}, Q(t))
+	},
+	lock: {
+		icon: (e) => e.state === "locked" ? "mdi:lock" : "mdi:lock-open-variant",
+		tone: "var(--tone-success)",
+		on: (e) => e.state === "locked",
+		state: (e) => ui(e.state),
+		tap: (e, t) => e("lock", t.state === "locked" ? "unlock" : "lock", {}, Q(t))
+	},
+	climate: {
+		icon: "mdi:thermostat",
+		tone: "var(--tone-danger)",
+		on: (e) => e.state !== "off",
+		state: (e) => {
+			if (e.state === "off") return "Off";
+			let t = e.attributes.temperature;
+			return typeof t == "number" ? `${ui(e.state)} · ${t}°` : ui(e.state);
+		}
+	},
+	media_player: {
+		icon: "mdi:speaker",
+		tone: "var(--tone-accent)",
+		on: (e) => e.state === "playing",
+		state: (e) => typeof e.attributes.media_title == "string" && e.state !== "off" ? e.attributes.media_title : ui(e.state),
+		level: (e) => typeof e.attributes.volume_level == "number" ? Math.round(e.attributes.volume_level * 100) : void 0,
+		setLevel: (e, t, n) => e("media_player", "volume_set", { volume_level: n / 100 }, Q(t)),
+		tap: (e, t) => e("media_player", "media_play_pause", {}, Q(t))
+	},
+	binary_sensor: {
+		icon: "mdi:eye",
+		tone: "var(--tone-info)",
+		on: (e) => e.state === "on",
+		state: (e) => {
+			let t = pi[e.deviceClass ?? ""] ?? ["On", "Off"];
+			return e.state === "on" ? t[0] : t[1];
+		}
+	},
+	button: {
+		icon: "mdi:gesture-tap-button",
+		tone: "var(--tone-accent)",
+		on: () => !1,
+		state: (e) => mi(e.state),
+		tap: (e, t) => e("button", "press", {}, Q(t))
+	},
+	input_button: {
+		icon: "mdi:gesture-tap-button",
+		tone: "var(--tone-accent)",
+		on: () => !1,
+		state: (e) => mi(e.state),
+		tap: (e, t) => e("input_button", "press", {}, Q(t))
+	},
+	scene: {
+		icon: "mdi:palette",
+		tone: "var(--tone-accent)",
+		on: () => !1,
+		state: () => "Tap to run",
+		tap: (e, t) => e("scene", "turn_on", {}, Q(t))
+	},
+	script: {
+		icon: "mdi:script-text",
+		tone: "var(--tone-accent)",
+		on: (e) => e.state === "on",
+		state: (e) => e.state === "on" ? "Running" : "Tap to run",
+		tap: (e, t) => e("script", "turn_on", {}, Q(t))
+	}
+}, fi = {
+	garage: "mdi:garage",
+	gate: "mdi:gate",
+	door: "mdi:door",
+	curtain: "mdi:curtains",
+	shutter: "mdi:window-shutter",
+	awning: "mdi:awning"
+}, pi = {
+	door: ["Open", "Closed"],
+	window: ["Open", "Closed"],
+	garage_door: ["Open", "Closed"],
+	opening: ["Open", "Closed"],
+	motion: ["Detected", "Clear"],
+	occupancy: ["Detected", "Clear"],
+	presence: ["Home", "Away"],
+	moisture: ["Wet", "Dry"],
+	smoke: ["Smoke", "Clear"],
+	lock: ["Unlocked", "Locked"],
+	battery: ["Low", "Normal"],
+	connectivity: ["Connected", "Disconnected"]
+};
+function mi(e) {
+	let t = Date.parse(e);
+	return Number.isNaN(t) ? "Never pressed" : new Date(t).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+var hi = {
+	icon: "mdi:circle-medium",
+	tone: "var(--tone-neutral)",
+	on: (e) => e.state === "on",
+	state: (e) => ui(e.state)
+};
+function gi(e, t) {
+	if (!t || e.length <= t.length || !e.toLowerCase().startsWith(t.toLowerCase())) return e;
+	let n = e.slice(t.length).trim();
+	return n ? n.charAt(0).toUpperCase() + n.slice(1) : e;
+}
+function _i(e) {
+	return !!di[e]?.tap || !!di[e]?.setLevel;
+}
+function vi(e) {
+	let t = te(() => e.entityId), { callService: n } = Yt(), [r, i] = O();
+	return E(() => {
+		t(), i(void 0);
+	}), N(w, {
+		get when() {
+			return t();
+		},
+		children: (t) => {
+			let a = () => di[t().domain] ?? hi, o = () => r() ?? a().level?.(t()), s = () => a().setLevel;
+			return N(si, {
+				get icon() {
+					let n = a().icon;
+					return typeof n == "function" ? e.icon ?? n(t()) : e.icon ?? t().icon ?? fi[t().domain === "cover" ? t().deviceClass ?? "" : ""] ?? n;
+				},
+				get name() {
+					return e.name ?? gi(t().friendlyName ?? t().id, e.within);
+				},
+				get state() {
+					return a().state(t());
+				},
+				get tone() {
+					if (e.tone) return e.tone;
+					let n = a().tone;
+					return typeof n == "function" ? n(t()) : n;
+				},
+				get on() {
+					return a().on(t());
+				},
+				get slide() {
+					return I(() => !!(s() && o() !== void 0))() ? {
+						value: o() ?? 0,
+						onChange: i,
+						onCommit: (e) => s()?.(n, t(), e)
+					} : void 0;
+				},
+				get onTap() {
+					return a().tap ? () => a().tap?.(n, t()) : void 0;
+				},
+				get onHold() {
+					return e.onHold;
+				}
+			});
+		}
+	});
+}
 //#endregion
 //#region src/framework/dialogs/debug-view.tsx
-var Pn = /*#__PURE__*/ I("<pre class=\"max-h-64 overflow-auto p-3 font-mono text-muted-foreground text-xs leading-relaxed\">"), Fn = /*#__PURE__*/ I("<span class=\"flex items-center gap-2\">"), In = /*#__PURE__*/ I("<section class=\"flex min-w-0 flex-col gap-2\"><header class=\"flex items-center gap-3\"><div class=\"flex min-w-0 flex-1 flex-col\"></div></header><div class=\"flex flex-col gap-2\">"), Ln = /*#__PURE__*/ I("<div class=\"flex flex-col\">"), Rn = /*#__PURE__*/ I("<pre class=\"max-h-96 overflow-auto whitespace-pre-wrap p-3 font-mono text-muted-foreground text-xs leading-relaxed\">");
-function zn(e, t, n) {
+var yi = /*#__PURE__*/ B("<pre class=\"max-h-64 overflow-auto p-3 font-mono text-muted-foreground text-xs leading-relaxed\">"), bi = /*#__PURE__*/ B("<span class=\"flex items-center gap-2\">"), xi = /*#__PURE__*/ B("<section class=\"flex min-w-0 flex-col gap-2\"><header class=\"flex items-center gap-3\"><div class=\"flex min-w-0 flex-1 flex-col\"></div></header><div class=\"flex flex-col gap-2\">"), Si = /*#__PURE__*/ B("<div class=\"flex flex-col\">"), Ci = /*#__PURE__*/ B("<pre class=\"max-h-96 overflow-auto whitespace-pre-wrap p-3 font-mono text-muted-foreground text-xs leading-relaxed\">");
+function wi(e, t, n) {
 	return {
 		widgetConfig: e,
 		entities: t.map((e) => ({
@@ -718,18 +1760,18 @@ function zn(e, t, n) {
 		...n
 	};
 }
-var Bn = (e) => JSON.stringify(e, null, 2), Vn = {
+var Ti = (e) => JSON.stringify(e, null, 2), Ei = {
 	idle: "lucide:copy",
 	copied: "lucide:check",
 	failed: "lucide:triangle-alert"
-}, Hn = {
+}, Di = {
 	idle: "text-muted-foreground",
 	copied: "text-success",
 	failed: "text-destructive"
 };
-function Un(e) {
-	let { state: t, copy: n } = pn();
-	return M(ke, {
+function Oi(e) {
+	let { state: t, copy: n } = xr();
+	return N(Ee, {
 		variant: "ghost",
 		size: "icon",
 		class: "size-8",
@@ -738,70 +1780,70 @@ function Un(e) {
 		},
 		onClick: () => void n(e.text()),
 		get children() {
-			return M(qe, {
+			return N(U, {
 				get icon() {
-					return Vn[t()];
+					return Ei[t()];
 				},
 				width: 16,
 				height: 16,
 				get class() {
-					return Hn[t()];
+					return Di[t()];
 				}
 			});
 		}
 	});
 }
-function Wn(e) {
+function ki(e) {
 	let t = e.replace(/([a-z\d])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ");
 	return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
 }
-var Gn = (e) => typeof e != "object" || !e;
-function Kn(e) {
+var Ai = (e) => typeof e != "object" || !e;
+function ji(e) {
 	return e == null ? "None" : String(e);
 }
-function qn(e) {
+function Mi(e) {
 	return Array.isArray(e) ? e.length : typeof e == "object" && e ? Object.keys(e).length : 0;
 }
-function Jn(e) {
+function Ni(e) {
 	let t = new Date(e);
 	return Number.isNaN(t.getTime()) ? e : t.toLocaleString();
 }
-function Yn(e) {
-	return M(ut, {
+function Pi(e) {
+	return N(ut, {
 		class: "overflow-hidden p-0",
 		get children() {
-			var t = Pn();
-			return P(t, () => Bn(e.value)), t;
+			var t = yi();
+			return F(t, () => Ti(e.value)), t;
 		}
 	});
 }
-function Xn(e) {
-	return M(Se, {
+function Fi(e) {
+	return N(ye, {
 		collapsible: !0,
 		class: "border-border/50 border-t",
 		get children() {
-			return M(we, {
+			return N(xe, {
 				get value() {
 					return e.label;
 				},
 				get children() {
-					return [M(Te, {
+					return [N(Se, {
 						class: "py-3 text-muted-foreground text-xs",
 						get children() {
-							var t = Fn();
-							return P(t, () => e.label, null), P(t, M(w, {
+							var t = bi();
+							return F(t, () => e.label, null), F(t, N(w, {
 								get when() {
 									return e.count !== void 0;
 								},
 								get children() {
-									return M(ze, { get children() {
+									return N(ze, { get children() {
 										return e.count;
 									} });
 								}
 							}), null), t;
 						}
-					}), M(Ce, { get children() {
-						return M(Yn, { get value() {
+					}), N(be, { get children() {
+						return N(Pi, { get value() {
 							return e.value;
 						} });
 					} })];
@@ -810,77 +1852,77 @@ function Xn(e) {
 		}
 	});
 }
-function U(e) {
+function Ii(e) {
 	return (() => {
-		var t = In(), n = t.firstChild, r = n.firstChild, i = n.nextSibling;
-		return P(n, M(ct, {
+		var t = xi(), n = t.firstChild, r = n.firstChild, i = n.nextSibling;
+		return F(n, N(ct, {
 			get icon() {
 				return e.icon;
 			},
 			size: "sm"
-		}), r), P(r, M(Ge, {
+		}), r), F(r, N(Ge, {
 			class: "truncate",
 			get children() {
 				return e.title;
 			}
-		}), null), P(r, M(w, {
+		}), null), F(r, N(w, {
 			get when() {
 				return e.subtitle;
 			},
-			children: (e) => M(lt, {
+			children: (e) => N(lt, {
 				class: "truncate font-mono",
 				get children() {
 					return e();
 				}
 			})
-		}), null), P(n, () => e.badge, null), P(n, M(Un, {
+		}), null), F(n, () => e.badge, null), F(n, N(Oi, {
 			get label() {
 				return `Copy ${e.title}`;
 			},
-			text: () => Bn(e.source)
-		}), null), P(i, () => e.children), t;
+			text: () => Ti(e.source)
+		}), null), F(i, () => e.children), t;
 	})();
 }
-function Zn(e) {
-	let t = E(() => Object.entries(e.record)), n = E(() => t().filter(([, e]) => Gn(e))), r = E(() => t().filter(([, e]) => !Gn(e)));
-	return M(w, {
+function Li(e) {
+	let t = D(() => Object.entries(e.record)), n = D(() => t().filter(([, e]) => Ai(e))), r = D(() => t().filter(([, e]) => !Ai(e)));
+	return N(w, {
 		get when() {
 			return t().length > 0;
 		},
 		get fallback() {
-			return M(lt, { children: "Nothing set" });
+			return N(lt, { children: "Nothing set" });
 		},
 		get children() {
-			return [M(w, {
+			return [N(w, {
 				get when() {
 					return n().length > 0;
 				},
 				get children() {
-					var e = Ln();
-					return P(e, M(C, {
+					var e = Si();
+					return F(e, N(C, {
 						get each() {
 							return n();
 						},
-						children: ([e, t]) => M(L, {
+						children: ([e, t]) => N(H, {
 							get label() {
-								return Wn(e);
+								return ki(e);
 							},
 							get children() {
-								return Kn(t);
+								return ji(t);
 							}
 						})
 					})), e;
 				}
-			}), M(C, {
+			}), N(C, {
 				get each() {
 					return r();
 				},
-				children: ([e, t]) => M(Xn, {
+				children: ([e, t]) => N(Fi, {
 					get label() {
-						return Wn(e);
+						return ki(e);
 					},
 					get count() {
-						return qn(t);
+						return Mi(t);
 					},
 					value: t
 				})
@@ -888,9 +1930,9 @@ function Zn(e) {
 		}
 	});
 }
-function Qn(e) {
+function Ri(e) {
 	let t = () => e.entity.attributes ?? {};
-	return M(U, {
+	return N(Ii, {
 		icon: "lucide:activity",
 		get title() {
 			return e.entity.friendly_name ?? e.entity.entity_id;
@@ -899,7 +1941,7 @@ function Qn(e) {
 			return e.entity.entity_id;
 		},
 		get badge() {
-			return M(De, { get children() {
+			return N(we, { get children() {
 				return e.entity.state;
 			} });
 		},
@@ -908,52 +1950,52 @@ function Qn(e) {
 		},
 		get children() {
 			return [(() => {
-				var t = Ln();
-				return P(t, M(L, {
+				var t = Si();
+				return F(t, N(H, {
 					label: "Domain",
 					get children() {
 						return e.entity.domain;
 					}
-				}), null), P(t, M(w, {
+				}), null), F(t, N(w, {
 					get when() {
 						return e.entity.device_class;
 					},
-					children: (e) => M(L, {
+					children: (e) => N(H, {
 						label: "Device class",
 						get children() {
 							return e();
 						}
 					})
-				}), null), P(t, M(w, {
+				}), null), F(t, N(w, {
 					get when() {
 						return e.entity.area_id;
 					},
-					children: (e) => M(L, {
+					children: (e) => N(H, {
 						label: "Area",
 						get children() {
 							return e();
 						}
 					})
-				}), null), P(t, M(L, {
+				}), null), F(t, N(H, {
 					label: "Changed",
 					get children() {
-						return Jn(e.entity.last_changed);
+						return Ni(e.entity.last_changed);
 					}
-				}), null), P(t, M(L, {
+				}), null), F(t, N(H, {
 					label: "Updated",
 					get children() {
-						return Jn(e.entity.last_updated);
+						return Ni(e.entity.last_updated);
 					}
 				}), null), t;
-			})(), M(w, {
+			})(), N(w, {
 				get when() {
-					return qn(t()) > 0;
+					return Mi(t()) > 0;
 				},
 				get children() {
-					return M(Xn, {
+					return N(Fi, {
 						label: "Attributes",
 						get count() {
-							return qn(t());
+							return Mi(t());
 						},
 						get value() {
 							return t();
@@ -964,42 +2006,42 @@ function Qn(e) {
 		}
 	});
 }
-function $n(e) {
-	let t = E(() => Object.keys(e.data).filter((e) => e !== "widgetConfig" && e !== "entities"));
-	return M(We, { get children() {
+function zi(e) {
+	let t = D(() => Object.keys(e.data).filter((e) => e !== "widgetConfig" && e !== "entities"));
+	return N(We, { get children() {
 		return [
-			M(U, {
+			N(Ii, {
 				icon: "lucide:sliders-horizontal",
 				title: "Configuration",
 				get source() {
 					return e.data.widgetConfig;
 				},
 				get children() {
-					return M(Zn, { get record() {
+					return N(Li, { get record() {
 						return e.data.widgetConfig;
 					} });
 				}
 			}),
-			M(C, {
+			N(C, {
 				get each() {
 					return e.data.entities;
 				},
-				children: (e) => M(Qn, { entity: e })
+				children: (e) => N(Ri, { entity: e })
 			}),
-			M(C, {
+			N(C, {
 				get each() {
 					return t();
 				},
-				children: (t) => M(U, {
+				children: (t) => N(Ii, {
 					icon: "lucide:braces",
 					get title() {
-						return Wn(t);
+						return ki(t);
 					},
 					get source() {
 						return e.data[t];
 					},
 					get children() {
-						return M(Yn, { get value() {
+						return N(Pi, { get value() {
 							return e.data[t];
 						} });
 					}
@@ -1008,52 +2050,52 @@ function $n(e) {
 		];
 	} });
 }
-function er(e) {
+function Bi(e) {
 	if (typeof e != "object" || !e) return;
 	let t = e;
 	return Array.isArray(t.entities) && typeof t.widgetConfig == "object" ? t : void 0;
 }
-function tr(e) {
-	let t = E(() => er(e.data));
-	return M(w, {
+function Vi(e) {
+	let t = D(() => Bi(e.data));
+	return N(w, {
 		get when() {
 			return e.data !== void 0;
 		},
 		get fallback() {
-			return M(Be, { get children() {
-				return M(He, { get children() {
-					return [M(Ue, { children: "Nothing to inspect" }), M(Ve, { children: "This widget publishes no debug information." })];
+			return N(Be, { get children() {
+				return N(He, { get children() {
+					return [N(Ue, { children: "Nothing to inspect" }), N(Ve, { children: "This widget publishes no debug information." })];
 				} });
 			} });
 		},
 		get children() {
-			return M(w, {
+			return N(w, {
 				get when() {
 					return t();
 				},
 				get fallback() {
-					return M(U, {
+					return N(Ii, {
 						icon: "lucide:braces",
 						title: "Debug data",
 						get source() {
 							return e.data;
 						},
 						get children() {
-							return M(w, {
+							return N(w, {
 								get when() {
 									return typeof e.data == "string";
 								},
 								get fallback() {
-									return M(Yn, { get value() {
+									return N(Pi, { get value() {
 										return e.data;
 									} });
 								},
 								get children() {
-									return M(ut, {
+									return N(ut, {
 										class: "overflow-hidden p-0",
 										get children() {
-											var t = Rn();
-											return P(t, () => e.data), t;
+											var t = Ci();
+											return F(t, () => e.data), t;
 										}
 									});
 								}
@@ -1061,7 +2103,7 @@ function tr(e) {
 						}
 					});
 				},
-				children: (e) => M($n, { get data() {
+				children: (e) => N(zi, { get data() {
 					return e();
 				} })
 			});
@@ -1070,21 +2112,21 @@ function tr(e) {
 }
 //#endregion
 //#region src/framework/dialogs/validate-config.ts
-function nr(e) {
+function Hi(e) {
 	let t = "";
 	for (let n of e) t += typeof n == "number" ? `[${n}]` : t ? `.${String(n)}` : String(n);
 	return t;
 }
-function rr(e, t) {
+function Ui(e, t) {
 	let n = e.safeParse(t);
 	return n.success ? null : n.error.issues.map((e) => {
-		let t = nr(e.path);
+		let t = Hi(e.path);
 		return t ? `${t}: ${e.message}` : e.message;
 	});
 }
 //#endregion
 //#region src/framework/dialogs/WidgetDialog.tsx
-var ir = /*#__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\">"), ar = /*#__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"), or = /*#__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>"), sr = /*#__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\">"), cr = /*#__PURE__*/ I("<span class=\"inline-flex size-3.5 shrink-0 items-center\">"), lr = (e) => At(e), ur = {
+var Wi = /*#__PURE__*/ B("<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\">"), Gi = /*#__PURE__*/ B("<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"), Ki = /*#__PURE__*/ B("<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>"), qi = /*#__PURE__*/ B("<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\">"), Ji = /*#__PURE__*/ B("<div class=glasshome-sheet>"), Yi = /*#__PURE__*/ B("<div class=glasshome-sheet-band aria-hidden=true><img alt>"), Xi = /*#__PURE__*/ B("<span class=\"glasshome-widget-icon glass glass-tint glasshome-sheet-icon\">"), Zi = /*#__PURE__*/ B("<span class=\"inline-flex size-3.5 shrink-0 items-center\">"), Qi = (e) => Wt(e), $i = {
 	sm: "sm",
 	md: "md",
 	lg: "lg",
@@ -1093,42 +2135,42 @@ var ir = /*#__PURE__*/ I("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 f
 	"2xl": "xl",
 	"3xl": "xl",
 	"4xl": "full"
-}, dr = {
+}, ea = {
 	idle: "Copy all",
 	copied: "Copied",
 	failed: "Copy failed"
 };
-function fr(e) {
-	let [t] = ge(e, /* @__PURE__ */ "open.onOpenChange.title.description.onSave.hasUnsavedChanges.onDelete.editContent.controlsContent.debugContent.debugData.tabs.class.maxWidth.defaultTab.activeTab.onActiveTabChange.headerActions.configSchema.config.onConfigSave.ResponsiveDialog.ResponsiveDialogContent.ResponsiveDialogHeader.ResponsiveDialogTitle.ResponsiveDialogDescription.ResponsiveDialogBody.ResponsiveDialogFooter.Button.SchemaForm.Tabs.TabsList.TabsTrigger.TabsContent".split(".")), n = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, i] = D({}), [a, o] = D(null), [s, c] = D([]);
-	pe(me(() => t.config, (e) => {
+function ta(e) {
+	let [t] = _e(e, /* @__PURE__ */ "open.onOpenChange.title.description.onSave.hasUnsavedChanges.onDelete.editContent.controlsContent.sheet.tile.debugContent.debugData.tabs.class.maxWidth.defaultTab.activeTab.onActiveTabChange.headerActions.configSchema.config.onConfigSave.ResponsiveDialog.ResponsiveDialogContent.ResponsiveDialogHeader.ResponsiveDialogTitle.ResponsiveDialogDescription.ResponsiveDialogBody.ResponsiveDialogFooter.Button.SchemaForm.Tabs.TabsList.TabsTrigger.TabsContent".split(".")), n = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, i] = O({}), [a, o] = O(null), [s, c] = O([]);
+	E(he(() => t.config, (e) => {
 		e && i({ ...e });
-	})), pe(me(() => t.configSchema, (e) => {
-		e && o(lr(e));
+	})), E(he(() => t.configSchema, (e) => {
+		e && o(Qi(e));
 	}));
 	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 = rr(e, r());
+			let t = Ui(e, r());
 			if (t) {
 				c(t);
 				return;
 			}
 		}
 		c([]), t.onConfigSave?.(r());
-	}, [f, p] = D(t.defaultTab ?? "controls"), m = () => t.activeTab ?? f(), h = (e) => {
+	}, [f, p] = O(t.defaultTab ?? "controls"), m = () => t.activeTab ?? f(), h = (e) => {
 		t.onActiveTabChange ? t.onActiveTabChange(e) : p(e);
-	}, g = () => ur[t.maxWidth ?? "xl"], _ = () => {
+	}, g = () => $i[t.maxWidth ?? "xl"], _ = () => {
 		if (t.tabs) return t.tabs;
 		let e = [];
 		return e.push({
 			id: "edit",
 			label: "Edit",
-			icon: ir(),
+			icon: Wi(),
 			content: t.editContent ?? (() => {
 				let e = t.SchemaForm, o = n() ? a() : void 0;
-				return !o || !e ? ar() : M(e, {
+				return !o || !e ? Gi() : N(e, {
 					schema: o,
 					get data() {
 						return r();
@@ -1142,168 +2184,250 @@ function fr(e) {
 		}), e.push({
 			id: "controls",
 			label: "Controls",
-			icon: or(),
-			content: t.controlsContent ?? M(Be, { get children() {
-				return M(He, { get children() {
-					return [M(Ue, { children: "No controls" }), M(Ve, { children: "This widget is shown as is." })];
+			icon: Ki(),
+			content: t.controlsContent ?? N(Be, { get children() {
+				return N(He, { get children() {
+					return [N(Ue, { children: "No controls" }), N(Ve, { children: "This widget is shown as is." })];
 				} });
 			} })
 		}), e.push({
 			id: "debug",
 			label: "Debug",
-			icon: sr(),
-			content: t.debugContent ?? M(tr, { get data() {
+			icon: qi(),
+			content: t.debugContent ?? N(Vi, { get data() {
 				return t.debugData;
 			} })
 		}), e;
-	}, v = pn(), ee = () => {
+	}, v = A(W), y = rn(v);
+	E(() => y?.setHasSheet(t.sheet !== void 0)), k(() => y?.setHasSheet(!1));
+	let b = () => ({
+		icon: t.tile?.icon ?? y?.icon(),
+		tone: t.tile?.tone ?? y?.accent() ?? y?.tone(),
+		backdrop: t.tile?.backdrop
+	}), x = () => v?.developer?.() ?? !1, S = () => V() === "controls" && t.sheet !== void 0, ee = na(), te = () => v?.anchor?.(), ne = () => S() && !ee() && te() !== void 0, re = xr(), ie = () => {
 		if (t.debugData === void 0) return;
 		let e = typeof t.debugData == "string" ? t.debugData : JSON.stringify(t.debugData, null, 2);
-		v.copy(e);
-	}, y = t.ResponsiveDialog, te = t.ResponsiveDialogContent, ne = t.ResponsiveDialogHeader, re = t.ResponsiveDialogTitle, ie = t.ResponsiveDialogDescription, ae = t.ResponsiveDialogBody ?? Qe, oe = t.ResponsiveDialogFooter ?? rt, se = t.Tabs ?? bt, ce = t.TabsList ?? wt, le = t.TabsTrigger ?? Et, ue = t.TabsContent ?? St, b = t.Button, x = E(me([
+		re.copy(e);
+	}, ae = t.ResponsiveDialog, oe = t.ResponsiveDialogContent, se = t.ResponsiveDialogHeader, ce = t.ResponsiveDialogTitle, le = t.ResponsiveDialogDescription, ue = t.ResponsiveDialogBody ?? Qe, de = t.ResponsiveDialogFooter ?? rt, fe = t.Tabs ?? xt, pe = t.TabsList ?? Tt, T = t.TabsTrigger ?? Dt, me = t.TabsContent ?? Ct, ge = t.Button, j = D(he([
 		() => t.open,
 		a,
 		() => t.config,
 		() => t.tabs
-	], () => _())), de = (e) => n() ? u(e) : t.onOpenChange(e), fe = () => n() ? l() : t.hasUnsavedChanges, S = () => n() ? d : t.onSave, T = () => {
-		let e = x(), t = m();
-		return e.some((e) => e.id === t) ? t : e[0]?.id ?? t;
-	}, O = () => T() === "edit" && (S() || t.onDelete) || T() === "debug" && t.debugData !== void 0;
-	return M(y, {
+	], () => _())), M = (e) => n() ? u(e) : t.onOpenChange(e), ve = () => n() ? l() : t.hasUnsavedChanges, R = () => n() ? d : t.onSave, z = () => j().filter((e) => e.id !== "debug" || x()), B = () => z().filter((e) => e.id !== "controls" || t.sheet === void 0), V = () => {
+		let e = z(), n = m() === "controls" && t.sheet === void 0 && !("controlsContent" in t) && !t.tabs ? "edit" : m();
+		return e.some((e) => e.id === n) ? n : e[0]?.id ?? n;
+	}, ye = () => V() === "edit" && (R() || t.onDelete) || V() === "debug" && t.debugData !== void 0;
+	return N(ae, {
 		get open() {
 			return t.open;
 		},
-		onOpenChange: (e) => de(e),
+		onOpenChange: (e) => M(e),
 		get children() {
-			return M(te, {
-				get size() {
-					return g();
-				},
-				get class() {
-					return t.class;
+			return N(w, {
+				get when() {
+					return !S();
 				},
-				get children() {
-					return M(se, {
-						get value() {
-							return T();
+				get fallback() {
+					return N(oe, {
+						size: "sm",
+						get ariaLabel() {
+							return t.title;
+						},
+						get anchor() {
+							return I(() => !!ne())() ? te() : void 0;
+						},
+						class: "glasshome-sheet-surface",
+						get style() {
+							return I(() => !!b().tone)() ? {
+								"--glass-tone": b().tone,
+								"--widget-color": b().tone
+							} : void 0;
 						},
-						onChange: h,
-						layout: "split",
 						get children() {
 							return [
-								M(ne, {
-									class: "flex-wrap",
-									get action() {
-										return [M(ce, {
-											class: "w-auto",
-											get children() {
-												return M(C, {
-													get each() {
-														return x();
+								N(w, {
+									get when() {
+										return b().backdrop;
+									},
+									children: (e) => (() => {
+										var t = Yi(), n = t.firstChild;
+										return P(() => L(n, "src", e())), t;
+									})()
+								}),
+								N(se, {
+									class: "items-center",
+									get media() {
+										return N(w, {
+											get when() {
+												return b().icon;
+											},
+											children: (e) => (() => {
+												var t = Xi();
+												return F(t, N(U, {
+													get icon() {
+														return e();
 													},
-													children: (e) => M(le, {
-														get value() {
-															return e.id;
-														},
-														get children() {
-															return [(() => {
-																var t = cr();
-																return P(t, () => e.icon), t;
-															})(), F(() => e.label)];
-														}
-													})
-												});
-											}
-										}), F(() => t.headerActions)];
+													class: "glasshome-widget-icon-glyph"
+												})), t;
+											})()
+										});
 									},
 									get children() {
-										return [M(re, {
+										return N(ce, {
 											class: "truncate",
 											get children() {
 												return t.title;
 											}
-										}), M(w, {
-											get when() {
-												return t.description;
-											},
-											get children() {
-												return M(ie, { get children() {
-													return t.description;
-												} });
-											}
-										})];
+										});
 									}
 								}),
-								M(ae, { get children() {
-									return M(C, {
-										get each() {
-											return x();
-										},
-										children: (e) => M(ue, {
-											get value() {
-												return e.id;
-											},
-											get children() {
-												return e.content;
-											}
-										})
-									});
-								} }),
-								M(w, {
-									get when() {
-										return O();
-									},
-									get children() {
-										return M(oe, { get children() {
-											return [
-												M(w, {
+								N(ue, { get children() {
+									var e = Ji();
+									return F(e, () => t.sheet?.()), e;
+								} })
+							];
+						}
+					});
+				},
+				get children() {
+					return N(oe, {
+						get size() {
+							return g();
+						},
+						get class() {
+							return t.class;
+						},
+						get children() {
+							return N(fe, {
+								get value() {
+									return V();
+								},
+								onChange: h,
+								layout: "split",
+								get children() {
+									return [
+										N(se, {
+											class: "flex-wrap",
+											get action() {
+												return [N(w, {
 													get when() {
-														return F(() => T() === "edit")() && t.onDelete;
+														return x() || t.tabs !== void 0;
 													},
 													get children() {
-														return M(b, {
-															size: "sm",
-															variant: "destructive",
-															onClick: () => t.onDelete?.(),
-															children: "Delete"
+														return N(pe, {
+															class: "w-auto",
+															get children() {
+																return N(C, {
+																	get each() {
+																		return B();
+																	},
+																	children: (e) => N(T, {
+																		get value() {
+																			return e.id;
+																		},
+																		get children() {
+																			return [(() => {
+																				var t = Zi();
+																				return F(t, () => e.icon), t;
+																			})(), I(() => e.label)];
+																		}
+																	})
+																});
+															}
 														});
 													}
-												}),
-												M(w, {
+												}), I(() => t.headerActions)];
+											},
+											get children() {
+												return [N(ce, {
+													class: "truncate",
+													get children() {
+														return t.title;
+													}
+												}), N(w, {
 													get when() {
-														return F(() => T() === "edit")() && S();
+														return t.description;
 													},
 													get children() {
-														return M(b, {
-															size: "sm",
-															get disabled() {
-																return !fe();
-															},
-															onClick: () => S()?.(),
-															children: "Save"
-														});
+														return N(le, { get children() {
+															return t.description;
+														} });
 													}
-												}),
-												M(w, {
-													get when() {
-														return F(() => T() === "debug")() && t.debugData !== void 0;
+												})];
+											}
+										}),
+										N(ue, { get children() {
+											return N(C, {
+												get each() {
+													return z();
+												},
+												children: (e) => N(me, {
+													get value() {
+														return e.id;
 													},
 													get children() {
-														return M(b, {
-															size: "sm",
-															variant: "outline",
-															onClick: ee,
-															get children() {
-																return dr[v.state()];
-															}
-														});
+														return e.content;
 													}
 												})
-											];
-										} });
-									}
-								})
-							];
+											});
+										} }),
+										N(w, {
+											get when() {
+												return ye();
+											},
+											get children() {
+												return N(de, { get children() {
+													return [
+														N(w, {
+															get when() {
+																return I(() => V() === "edit")() && t.onDelete;
+															},
+															get children() {
+																return N(ge, {
+																	size: "sm",
+																	variant: "destructive",
+																	onClick: () => t.onDelete?.(),
+																	children: "Delete"
+																});
+															}
+														}),
+														N(w, {
+															get when() {
+																return I(() => V() === "edit")() && R();
+															},
+															get children() {
+																return N(ge, {
+																	size: "sm",
+																	get disabled() {
+																		return !ve();
+																	},
+																	onClick: () => R()?.(),
+																	children: "Save"
+																});
+															}
+														}),
+														N(w, {
+															get when() {
+																return I(() => V() === "debug")() && t.debugData !== void 0;
+															},
+															get children() {
+																return N(ge, {
+																	size: "sm",
+																	variant: "outline",
+																	onClick: ie,
+																	get children() {
+																		return ea[re.state()];
+																	}
+																});
+															}
+														})
+													];
+												} });
+											}
+										})
+									];
+								}
+							});
 						}
 					});
 				}
@@ -1311,80 +2435,109 @@ function fr(e) {
 		}
 	});
 }
+function na() {
+	let e = "(max-width: 639px)", [t, n] = O(typeof window < "u" && window.matchMedia(e).matches);
+	return ge(() => {
+		let t = window.matchMedia(e), r = () => n(t.matches);
+		t.addEventListener("change", r), k(() => t.removeEventListener("change", r));
+	}), t;
+}
 //#endregion
 //#region src/framework/hooks/use-widget-dashboard.ts
-var pr = {
+var ra = {
 	name: "",
 	icon: "",
 	areaId: null
 };
-function mr() {
-	let e = k(R);
-	return () => e?.dashboard?.() ?? pr;
+function ia() {
+	let e = A(W);
+	return () => e?.dashboard?.() ?? ra;
 }
 //#endregion
 //#region src/framework/hooks/use-widget-viewer.ts
-var hr = { name: null };
-function gr() {
-	let e = k(R);
-	return () => e?.viewer?.() ?? hr;
+var aa = { name: null };
+function oa() {
+	let e = A(W);
+	return () => e?.viewer?.() ?? aa;
 }
 //#endregion
 //#region src/framework/hooks/use-intersection-pause.ts
-function _r(e) {
+function sa(e) {
 	if (typeof IntersectionObserver > "u") return () => !1;
-	let [t, n] = D(!1), r = new IntersectionObserver((e) => {
+	let [t, n] = O(!1), r = new IntersectionObserver((e) => {
 		let t = e[0];
 		t && n(!t.isIntersecting);
 	});
-	return pe(() => {
+	return E(() => {
 		let t = e();
 		r.disconnect(), t && r.observe(t);
-	}), O(() => r.disconnect()), t;
+	}), k(() => r.disconnect()), t;
 }
 //#endregion
-//#region src/framework/hooks/use-reduced-motion.ts
-function vr() {
-	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), O(() => e.removeEventListener("change", r)), t;
+//#region src/framework/hooks/use-daylight.ts
+var ca = -6, la = 864e5;
+function ua(e, t) {
+	let n = e.next_rising ? Date.parse(e.next_rising) : NaN, r = e.next_setting ? Date.parse(e.next_setting) : NaN;
+	if (!Number.isFinite(n) || !Number.isFinite(r)) return;
+	let [i, a] = e.state === "above_horizon" ? [n - la, r] : [r - la, n], o = a - i;
+	if (!(o <= 0)) return Math.min(1, Math.max(0, (t.getTime() - i) / o));
+}
+var da = 20, fa = 7;
+function pa(e, t) {
+	if (e && (e.state === "above_horizon" || e.state === "below_horizon")) {
+		let n = e.elevation, r = e.state === "above_horizon" ? "day" : n !== void 0 && n > ca ? e.rising ? "dawn" : "dusk" : "night";
+		return {
+			phase: r,
+			isNight: r === "night",
+			elevation: n,
+			progress: ua(e, t)
+		};
+	}
+	let n = t.getHours(), r = n >= da || n < fa ? "night" : "day";
+	return {
+		phase: r,
+		isNight: r === "night"
+	};
 }
-//#endregion
-//#region src/framework/hooks/use-widget-dialog.ts
-function yr(e = "controls") {
-	let [t, n] = D(!1), [r, i] = D(e), a = (t) => {
-		i(t ?? e), n(!0);
-	}, o = k(R);
-	return o?.registerDialogOpener?.(a), O(() => o?.registerDialogOpener?.(null)), {
-		showDialog: t,
-		setShowDialog: n,
-		openDialog: a,
-		closeDialog: () => n(!1),
-		activeTab: r,
-		setActiveTab: i,
-		dialogProps: {
-			get open() {
-				return t();
-			},
-			onOpenChange: n,
-			get activeTab() {
-				return r();
-			},
-			onActiveTabChange: i
-		}
+var [ma, ha] = O(/* @__PURE__ */ new Date()), ga = 0, _a;
+function va() {
+	return ga++, _a ||= (ha(/* @__PURE__ */ new Date()), setInterval(() => ha(/* @__PURE__ */ new Date()), 6e4)), () => {
+		ga--, ga === 0 && _a && (clearInterval(_a), _a = void 0);
 	};
 }
+function ya() {
+	let e = te("sun.sun");
+	return E(() => {
+		e() || k(va());
+	}), D(() => {
+		let t = e(), n = t ? {
+			state: t.state,
+			elevation: t.attributes?.elevation,
+			rising: t.attributes?.rising,
+			next_rising: t.attributes?.next_rising,
+			next_setting: t.attributes?.next_setting
+		} : void 0;
+		return pa(n, n ? /* @__PURE__ */ new Date() : ma());
+	});
+}
+//#endregion
+//#region src/framework/hooks/use-reduced-motion.ts
+function ba() {
+	if (typeof window > "u" || typeof window.matchMedia != "function") return () => !1;
+	let e = window.matchMedia("(prefers-reduced-motion: reduce)"), [t, n] = O(e.matches), r = (e) => n(e.matches);
+	return e.addEventListener("change", r), k(() => e.removeEventListener("change", r)), t;
+}
 //#endregion
 //#region src/framework/hooks/use-widget-entity-group.ts
-function br(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 xa(e) {
+	let t = e.minEntities ?? 1, n = D(() => e.entities().length), r = D(() => n() >= t), i = D(() => !r() || !e.calculateGroupData ? null : e.calculateGroupData(e.entities())), a = D(() => {
 		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 mn(n, e.allEntitiesMode);
-		if (t === "sensor") return hn(n, e.sensorGroupType?.() ?? "mean", !0);
-	}), o = E(() => r() ? void 0 : e.emptyStateConfig);
+		if (t === "light" || t === "binary-sensor" || t === "switch") return Sr(n, e.allEntitiesMode);
+		if (t === "sensor") return Cr(n, e.sensorGroupType?.() ?? "mean", !0);
+	}), o = D(() => r() ? void 0 : e.emptyStateConfig);
 	return {
 		entities: e.entities,
 		groupData: i,
@@ -1395,264 +2548,8 @@ function br(e) {
 	};
 }
 //#endregion
-//#region src/framework/gestures/cursors.ts
-var W = 32, G = W / 2, K = "white", q = "rgba(0,0,0,0.4)", xr = 2, J = 3;
-function Sr(e) {
-	return `url("data:image/svg+xml,${encodeURIComponent(e)}")`;
-}
-function Y(e) {
-	return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${W}" viewBox="0 0 ${W} ${W}">${e}</svg>`;
-}
-var Cr = Y(`
-  <g transform="translate(6, 2)">
-    <!-- shadow -->
-    <g stroke="${q}" 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="${xr}" 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>
-`), wr = Y(`
-  <g>
-    <circle cx="${G}" cy="${G}" r="8" stroke="${q}" stroke-width="${J}" 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}"/>
-  </g>
-`), Tr = Y(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${q}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${G}" x2="26" y2="${G}"/>
-      <polyline points="10,12 6,${G} 10,20"/>
-      <polyline points="22,12 26,${G} 22,20"/>
-    </g>
-    <!-- main -->
-    <g stroke="${K}" stroke-width="${xr}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${G}" x2="26" y2="${G}"/>
-      <polyline points="10,12 6,${G} 10,20"/>
-      <polyline points="22,12 26,${G} 22,20"/>
-    </g>
-    <!-- center grip dots -->
-    <circle cx="${G}" cy="${G}" r="1.5" fill="${K}"/>
-    <circle cx="11" cy="${G}" r="1" fill="${K}" opacity="0.6"/>
-    <circle cx="21" cy="${G}" r="1" fill="${K}" opacity="0.6"/>
-  </g>
-`), Er = Y(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${q}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${G}" y1="6" x2="${G}" y2="26"/>
-      <polyline points="12,10 ${G},6 20,10"/>
-      <polyline points="12,22 ${G},26 20,22"/>
-    </g>
-    <!-- main -->
-    <g stroke="${K}" stroke-width="${xr}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${G}" y1="6" x2="${G}" y2="26"/>
-      <polyline points="12,10 ${G},6 20,10"/>
-      <polyline points="12,22 ${G},26 20,22"/>
-    </g>
-    <!-- center grip dots -->
-    <circle cx="${G}" cy="${G}" r="1.5" fill="${K}"/>
-    <circle cx="${G}" cy="11" r="1" fill="${K}" opacity="0.6"/>
-    <circle cx="${G}" cy="21" r="1" fill="${K}" opacity="0.6"/>
-  </g>
-`), Dr = Y(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${q}" 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,13 7,${G} 11,19"/>
-      <polyline points="21,13 25,${G} 21,19"/>
-      <polyline points="13,11 ${G},7 19,11"/>
-      <polyline points="13,21 ${G},25 19,21"/>
-    </g>
-    <!-- main -->
-    <g stroke="${K}" stroke-width="${xr}" 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,13 7,${G} 11,19"/>
-      <polyline points="21,13 25,${G} 21,19"/>
-      <polyline points="13,11 ${G},7 19,11"/>
-      <polyline points="13,21 ${G},25 19,21"/>
-    </g>
-    <!-- center dot -->
-    <circle cx="${G}" cy="${G}" r="2" fill="${K}"/>
-  </g>
-`);
-function X(e, t, n) {
-	return {
-		css: `${Sr(e)} ${t} ${n}, auto`,
-		hotspotX: t,
-		hotspotY: n
-	};
-}
-var Z = {
-	tap: X(Cr, 12, 4),
-	hold: X(wr, 16, 16),
-	slideHorizontal: X(Tr, G, G),
-	slideVertical: X(Er, G, G),
-	slideAuto: X(Dr, G, G)
-};
-//#endregion
-//#region src/framework/gestures/haptics.ts
-function Or() {
-	if (typeof window > "u") return null;
-	let e = window;
-	return e.Capacitor?.isNativePlatform?.() ? e.Capacitor.Plugins?.Haptics ?? null : null;
-}
-function kr(e) {
-	if (typeof navigator < "u" && typeof navigator.vibrate == "function") try {
-		navigator.vibrate(e);
-	} catch {}
-}
-var Ar = {
-	tick() {
-		let e = Or();
-		if (e) {
-			e.impact({ style: "Light" }).catch(() => {});
-			return;
-		}
-		kr(8);
-	},
-	bump() {
-		let e = Or();
-		if (e) {
-			e.impact({ style: "Medium" }).catch(() => {});
-			return;
-		}
-		kr(20);
-	},
-	pulse() {
-		let e = Or();
-		if (e) {
-			e.impact({ style: "Heavy" }).catch(() => {});
-			return;
-		}
-		kr([
-			0,
-			15,
-			40,
-			15
-		]);
-	}
-};
-//#endregion
-//#region src/framework/gestures/use-widget-gestures.ts
-function jr(e, t) {
-	let n = {
-		isDown: !1,
-		isTouch: !1,
-		startX: 0,
-		startY: 0,
-		startTime: 0,
-		hasMoved: !1,
-		sliding: !1,
-		holdTimer: null,
-		element: null
-	}, r = null, i = null, a = null, [o, s] = D(null);
-	function c(e) {
-		e !== i && (a && a.disconnect(), a = new ResizeObserver((e) => {
-			let t = e[0];
-			if (t) {
-				let e = t.borderBoxSize?.[0];
-				r = e ? {
-					width: e.inlineSize,
-					height: e.blockSize
-				} : {
-					width: t.contentRect.width,
-					height: t.contentRect.height
-				}, s(r.height > r.width);
-			}
-		}), i = e, a.observe(e), r = {
-			width: e.clientWidth,
-			height: e.clientHeight
-		}, s(r.height > r.width));
-	}
-	let l = () => {
-		n.holdTimer &&= (clearTimeout(n.holdTimer), null);
-	}, u = () => {
-		n.isDown = !1, n.hasMoved = !1, n.sliding = !1;
-	}, d = (n) => {
-		let i = e().slide;
-		return i?.orientation === "horizontal" ? "horizontal" : i?.orientation === "vertical" ? "vertical" : n && (r || c(n), r) ? r.height > r.width ? "vertical" : "horizontal" : (t?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
-	}, f = (t) => {
-		let r = e();
-		if (r.tap || r.hold || r.slide) {
-			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 && (Ar.bump(), r.hold?.action(), n.isDown = !1);
-				}, e);
-			}
-			if (!n.isTouch && r.slide) try {
-				t.currentTarget.setPointerCapture(t.pointerId);
-			} catch {}
-		}
-	}, p = (t) => {
-		if (!n.isDown) return;
-		let i = e(), a = t.clientX - n.startX, o = t.clientY - n.startY;
-		if (Math.sqrt(a * a + o * o) > 10 && (l(), n.hasMoved = !0), i.slide && n.hasMoved) {
-			let e = t.currentTarget, s = d(e);
-			if (n.isTouch && !n.sliding && Math.abs(s === "vertical" ? o : a) < Math.abs(s === "vertical" ? a : o)) return;
-			n.sliding = !0;
-			let c = i.slide.min ?? 0, l = i.slide.max ?? 100, u = l - c, f = s === "vertical" ? -o : a, p = r ?? {
-				width: e.clientWidth,
-				height: e.clientHeight
-			}, m = f / (s === "vertical" ? p.height : p.width) * u, h = Math.max(c, Math.min(l, i.slide.value + m));
-			i.slide.onChange(Math.round(h)), n.startX = t.clientX, n.startY = t.clientY, t.preventDefault();
-		}
-	}, m = (t) => {
-		let r = e(), i = n.isDown, a = Date.now() - n.startTime, o = r.hold?.delay ?? 300;
-		l(), i && r.tap && !n.hasMoved && a < o && r.tap();
-		try {
-			t.currentTarget.releasePointerCapture(t.pointerId);
-		} catch {}
-		u();
-	}, h = (e) => {
-		l();
-		try {
-			e.currentTarget.releasePointerCapture(e.pointerId);
-		} catch {}
-		u();
-	}, g = (t) => {
-		let n = e();
-		if (n.slide) {
-			let e = n.slide.orientation;
-			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 ? Z.tap.css : n.hold ? Z.hold.css : "";
-	};
-	return {
-		onPointerDown: f,
-		onPointerMove: p,
-		onPointerUp: m,
-		onPointerCancel: h,
-		onPointerEnter: (e) => {
-			let t = e.currentTarget;
-			n.element = t, t.style.cursor = g(t);
-		},
-		bindElement: (e) => {
-			e && (n.element = e, c(e));
-		},
-		touchAction: () => {
-			let n = e();
-			if (n.slide) {
-				let e = n.slide.orientation;
-				return e === "vertical" || e !== "horizontal" && (o() ?? (t?.() ?? "horizontal") !== "horizontal") ? "pan-x" : "pan-y";
-			}
-			return n.tap || n.hold ? "manipulation" : "auto";
-		},
-		dispose: () => {
-			l(), a &&= (a.disconnect(), null), i = null, r = null;
-		}
-	};
-}
-//#endregion
 //#region src/framework/theming/svg-colors.ts
-var Mr = {
+var Sa = {
 	solar: "oklch(0.74 0.18 60)",
 	grid: "oklch(0.62 0.12 245)",
 	battery: "oklch(0.70 0.18 145)",
@@ -1661,21 +2558,21 @@ var Mr = {
 	positive: "oklch(0.70 0.14 160)",
 	negative: "oklch(0.64 0.22 27)"
 };
-function Nr(e) {
+function Ca(e) {
 	return {
 		fill: `color-mix(in oklch, ${e} 20%, transparent)`,
 		stroke: e,
 		solid: e
 	};
 }
-var Pr = Object.fromEntries(Object.entries(Mr).map(([e, t]) => [e, Nr(t)])), Fr = o.enum([
+var wa = Object.fromEntries(Object.entries(Sa).map(([e, t]) => [e, Ca(t)])), Ta = o.enum([
 	"success",
 	"warning",
 	"danger",
 	"info",
 	"neutral",
 	"accent"
-]), Ir = {
+]), Ea = {
 	title: e(() => o.string().optional().meta({
 		title: "Title",
 		description: "Optional display name override"
@@ -1695,62 +2592,63 @@ var Pr = Object.fromEntries(Object.entries(Mr).map(([e, t]) => [e, Nr(t)])), Fr
 		formType: "area-picker",
 		title: "Area"
 	}), "widgetFields.areaId")
-}, Lr = 24;
-function Q(e) {
+}, Da = 24;
+function $(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) r !== void 0 && (t[n] = r);
 	return t;
 }
-function Rr() {
+function Oa() {
 	return o.string().optional().meta({
 		title: "Title",
 		description: "Optional display name override"
 	});
 }
-function zr(e) {
-	return (e.default === void 0 ? o.string().optional() : o.string().default(e.default)).meta(Q({
+function ka(e) {
+	return (e.default === void 0 ? o.string().optional() : o.string().default(e.default)).meta($({
 		title: e.title,
 		description: e.description
 	}));
 }
-function Br(e) {
+function Aa(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({
+	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($({
 		title: e.title,
 		description: e.description
 	}));
 }
-function Vr(e) {
-	return o.boolean().default(e.default ?? !1).meta(Q({
+function ja(e) {
+	return o.boolean().default(e.default ?? !1).meta($({
 		title: e.title,
 		description: e.description
 	}));
 }
-function Hr(e, t) {
+function Ma(e, t) {
 	let n = o.enum(e);
-	return (t.default === void 0 ? n.optional() : n.default(t.default)).meta(Q({
+	return (t.default === void 0 ? n.optional() : n.default(t.default)).meta($({
 		title: t.title,
 		description: t.description,
-		labels: t.labels
+		labels: t.labels,
+		icons: t.icons
 	}));
 }
-function Ur(e, t) {
-	return o.array(o.enum(e)).default([...t.default ?? []]).meta(Q({
+function Na(e, t) {
+	return o.array(o.enum(e)).default([...t.default ?? []]).meta($({
 		title: t.title,
 		description: t.description,
 		labels: t.labels
 	}));
 }
-function Wr(e, t) {
-	return o.array(o.string()).default([]).meta(Q({
+function Pa(e, t) {
+	return o.array(o.string()).default([]).meta($({
 		domain: e,
 		title: t?.title ?? "Entities",
 		description: t?.description,
 		deviceClass: t?.deviceClass
 	}));
 }
-function Gr(e, t) {
-	return o.array(o.string()).default([]).meta(Q({
+function Fa(e, t) {
+	return o.array(o.string()).default([]).meta($({
 		domain: e,
 		title: t?.title ?? "Entity",
 		description: t?.description,
@@ -1758,58 +2656,62 @@ function Gr(e, t) {
 		singleSelect: !0
 	}));
 }
-function Kr(e) {
+function Ia(e) {
 	return o.string().optional().meta({
 		formType: "area-picker",
 		title: e?.title ?? "Area"
 	});
 }
-function qr(e) {
-	let t = o.string().meta(Q({
+function La(e) {
+	let t = o.string().meta($({
 		formType: "icon-picker",
 		title: e?.title ?? "Icon",
 		description: e?.description
 	}));
 	return e?.default === void 0 ? t.optional() : t.default(e.default);
 }
-function Jr(e) {
-	let t = o.string().meta(Q({
+function Ra(e) {
+	let t = e?.presets && Object.fromEntries(Object.entries(e.presets).map(([e, t]) => [e, {
+		label: t.label,
+		thumb: t.thumb
+	}])), n = o.string().meta($({
 		formType: "image-picker",
 		title: e?.title ?? "Image",
-		description: e?.description
+		description: e?.description,
+		presets: t
 	}));
-	return e?.default === void 0 ? t.optional() : t.default(e.default);
+	return e?.default === void 0 ? n.optional() : n.default(e.default);
 }
-function Yr(e) {
-	return o.array(o.string()).default([]).meta(Q({
+function za(e) {
+	return o.array(o.string()).default([]).meta($({
 		title: e.title,
 		description: e.description
 	}));
 }
-function Xr(e, t) {
+function Ba(e, t) {
 	let n = o.object(e);
-	return n.default(jt(n)).meta({ title: t.title });
+	return n.default(Gt(n)).meta({ title: t.title });
 }
-function Zr(e) {
+function Va(e) {
 	return e.def;
 }
-function $(e) {
+function Ha(e) {
 	if (o.globalRegistry.get(e)?.formType === "list") return !0;
-	let t = Zr(e);
-	return t.shape ? Object.values(t.shape).some($) : t.options ? t.options.some($) : t.element ? $(t.element) : t.innerType ? $(t.innerType) : !1;
+	let t = Va(e);
+	return t.shape ? Object.values(t.shape).some(Ha) : t.options ? t.options.some(Ha) : t.element ? Ha(t.element) : t.innerType ? Ha(t.innerType) : !1;
 }
-function Qr(e) {
-	let t = e, n = Zr(t).innerType;
-	for (; n;) t = n, n = Zr(t).innerType;
+function Ua(e) {
+	let t = e, n = Va(t).innerType;
+	for (; n;) t = n, n = Va(t).innerType;
 	return t;
 }
-function $r(e) {
-	let t = Zr(Qr(e));
+function Wa(e) {
+	let t = Va(Ua(e));
 	if (t.shape) return new Set(Object.keys(t.shape));
 	if (t.options) {
 		let e = [];
 		for (let n of t.options) {
-			let t = $r(n);
+			let t = Wa(n);
 			if (!t) return null;
 			e.push(t);
 		}
@@ -1821,7 +2723,7 @@ function $r(e) {
 	}
 	return null;
 }
-function ei(e, t, n) {
+function Ga(e, t, n) {
 	let r = { [t]: n };
 	try {
 		return e.parse(r);
@@ -1829,14 +2731,14 @@ function ei(e, t, n) {
 		return r;
 	}
 }
-function ti(e, t) {
+function Ka(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 > Lr) throw Error(`field.list: max ${t.max} exceeds the ceiling of ${Lr}`);
+	if (t.max > Da) throw Error(`field.list: max ${t.max} exceeds the ceiling of ${Da}`);
 	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 && !$r(e)?.has(t.labelField)) throw Error(`field.list: labelField "${t.labelField}" must name a field present in every item`);
+	if (Ha(e)) throw Error("field.list: a list item cannot contain another field.list (depth 1 only)");
+	if (t.labelField !== void 0 && !Wa(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({
+	return t.min !== void 0 && (n = n.min(t.min)), n = n.max(t.max), n.default([]).meta($({
 		formType: "list",
 		title: t.title,
 		description: t.description,
@@ -1844,7 +2746,7 @@ function ti(e, t) {
 		labelField: t.labelField
 	}));
 }
-function ni(e, t, n) {
+function qa(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}"`);
@@ -1857,7 +2759,7 @@ function ni(e, t, n) {
 		...r,
 		[e]: o.literal(t)
 	})), a = o.discriminatedUnion(e, i), s = i[0];
-	return a.default(s ? ei(s, e, r) : {}).meta(Q({
+	return a.default(s ? Ga(s, e, r) : {}).meta($({
 		formType: "variants",
 		discriminator: e,
 		title: n.title,
@@ -1865,29 +2767,35 @@ function ni(e, t, n) {
 		labels: n.labels
 	}));
 }
-var ri = {
-	title: Rr,
-	text: zr,
-	number: Br,
-	toggle: Vr,
-	choice: Hr,
-	choices: Ur,
-	entities: Wr,
-	entity: Gr,
-	area: Kr,
-	icon: qr,
-	image: Jr,
-	stringList: Yr,
-	group: Xr,
-	list: ti,
-	variants: ni
+var Ja = {
+	title: Oa,
+	text: ka,
+	number: Aa,
+	toggle: ja,
+	choice: Ma,
+	choices: Na,
+	entities: Pa,
+	entity: Fa,
+	area: Ia,
+	icon: La,
+	image: Ra,
+	stringList: za,
+	group: Ba,
+	list: Ka,
+	variants: qa
 };
-function ii(e) {
+function Ya(e) {
 	return o.object(e);
 }
 //#endregion
+//#region src/framework/image-src.ts
+function Xa(e, t) {
+	let n = It(e);
+	return n === void 0 ? Rt(e) : t?.[n]?.src;
+}
+//#endregion
 //#region src/shared/spline.ts
-function ai(e) {
+function Za(e) {
 	if (e.length < 2) return "";
 	let t = e[0], n = e[1];
 	if (!t || !n) return "";
@@ -1914,14 +2822,14 @@ function ai(e) {
 }
 //#endregion
 //#region src/theme.ts
-function oi() {
+function Qa() {
 	return document.documentElement.classList.contains("dark");
 }
 //#endregion
 //#region src/version.ts
-var si = {
+var $a = {
 	name: "@glasshome/widget-sdk",
-	version: "1.16.0",
+	version: "1.17.0",
 	description: "SDK for building GlassHome dashboard widgets with SolidJS",
 	keywords: [
 		"glasshome",
@@ -1980,12 +2888,12 @@ var si = {
 		"typecheck:test": "tsc --noEmit -p tsconfig.test.json"
 	},
 	peerDependencies: {
-		"@glasshome/sync-layer": "0.8.1",
-		"@glasshome/ui": "1.18.0",
+		"@glasshome/sync-layer": "0.9.0",
+		"@glasshome/ui": "1.20.0",
 		"solid-js": "^1.9.11"
 	},
 	dependencies: {
-		"@glasshome/widget-contract": "0.2.1",
+		"@glasshome/widget-contract": "0.3.0",
 		"@modular-forms/solid": "^0.25.1",
 		"@tailwindcss/vite": "^4.1.13",
 		clsx: "^2.1.1",
@@ -1996,7 +2904,7 @@ var si = {
 		zod: "^4.1.13"
 	},
 	devDependencies: {
-		"@glasshome/ui": "1.18.0",
+		"@glasshome/ui": "1.20.0",
 		"@solidjs/testing-library": "^0.8.10",
 		"@types/bun": "^1.4.0",
 		"@types/node": "^25.2.2",
@@ -2017,4 +2925,4 @@ var si = {
 	engines: { node: ">=18" }
 }.version;
 //#endregion
-export { Ee as Badge, Oe as Button, Ae as Carousel, je as CarouselContent, Me as CarouselDots, Ne as CarouselItem, Pe as CarouselNext, Fe as CarouselPrevious, Ie as ColorSlider, Le as ColorWheel, Re as CountPill, Ke as Icon, Je as Input, Ye as Label, Xe as ResponsiveDialog, Ze as ResponsiveDialogBody, $e as ResponsiveDialogClose, et as ResponsiveDialogContent, tt as ResponsiveDialogDescription, nt as ResponsiveDialogFooter, it as ResponsiveDialogHeader, at as ResponsiveDialogTitle, si as SDK_VERSION, ot as SchemaForm, st as SectionIcon, dt as SectionTitle, ft as Select, pt as SelectContent, mt as SelectItem, ht as SelectTrigger, gt as SelectValue, _t as Slider, vt as Switch, yt as Tabs, xt as TabsContent, Ct as TabsList, Tt as TabsTrigger, Fr as ToneSchema, H as Widget, $t as WidgetContent, R as WidgetCtx, tr as WidgetDebugTab, $n as WidgetDebugView, fr as WidgetDialog, rn as WidgetIcon, r as WidgetManifestSchema, zt as WidgetSizeCtx, Zt as WidgetSliderFill, on as WidgetStatus, ln as WidgetTitle, Tn as WidgetValue, zn as buildDebugData, g as byDomain, mn as calculateLightGroup, hn as calculateSensorGroup, un as copyText, bn as countActiveEntities, ii as defineConfig, Mt as defineWidget, t as deprecations, ri as field, n as formatDeprecation, i as formatSchemaError, yn as getEntityAttribute, s as getForecasts, c as getStream, l as getWebRtcClientConfig, u as hassMediaUrl, Dt as imageUrl, Kt as injectTokens, oi as isDark, vn as isEntityActive, Ot as mediaUrl, ai as monotoneCubicPath, kt as parseColor, d as sendWebRtcCandidate, f as startWebRtcSession, p as state, Pr as svgColors, m as trackEntityHistory, h as untrackEntityHistory, _ as useArea, v as useCalendarEvents, ee as useCamera, y as useConnection, pn as useCopyText, te as useCurrency, ne as useEntities, re as useEntity, ie as useEntityHistory, ae as useEntityStatistics, oe as useForecast, se as useHassConfig, _r as useIntersectionPause, ce as useLocale, vr as useReducedMotion, Ft as useService, ue as useStore, b as useTemperatureUnit, Rt as useToggle, Lt as useTurnOff, It as useTurnOn, S as useUnitSystem, Nt as useWidgetContext, mr as useWidgetDashboard, yr as useWidgetDialog, Bt as useWidgetDimensions, br as useWidgetEntityGroup, jr as useWidgetGestures, gr as useWidgetViewer, Ir as widgetFields, a as z };
+export { Ce as Badge, Te as Button, De as ButtonGroup, ke as Carousel, Ae as CarouselContent, je as CarouselDots, Me as CarouselItem, Ne as CarouselNext, Pe as CarouselPrevious, Fe as ColorDisc, Ie as ColorSlider, Le as ColorWheel, Re as CountPill, Ke as Icon, qe as Input, Je as Label, vi as PanelEntityRow, ci as PanelFacts, si as PanelRow, oi as PanelRows, ai as PanelSection, Ye as Progress, Xe as ResponsiveDialog, Ze as ResponsiveDialogBody, $e as ResponsiveDialogClose, et as ResponsiveDialogContent, tt as ResponsiveDialogDescription, nt as ResponsiveDialogFooter, it as ResponsiveDialogHeader, at as ResponsiveDialogTitle, $a as SDK_VERSION, ot as SchemaForm, st as SectionIcon, dt as SectionTitle, ft as Select, pt as SelectContent, mt as SelectItem, ht as SelectTrigger, gt as SelectValue, _t as Slider, vt as SwatchPicker, yt as Switch, bt as Tabs, St as TabsContent, wt as TabsList, Et as TabsTrigger, Ot as TemperatureBar, kt as Toggle, At as ToggleGroup, Mt as ToggleGroupItem, Ta as ToneSchema, Z as Widget, Jn as WidgetAction, Zn as WidgetBackdrop, Yn as WidgetChip, qn as WidgetChoice, fr as WidgetContent, Gn as WidgetControls, W as WidgetCtx, Vi as WidgetDebugTab, zi as WidgetDebugView, ta as WidgetDialog, Qn as WidgetGlyph, Un as WidgetHead, Wn as WidgetHero, kn as WidgetIcon, Xn as WidgetLayer, r as WidgetManifestSchema, Sn as WidgetSizeCtx, lr as WidgetSliderFill, mr as WidgetStatus, Kn as WidgetStepper, _r as WidgetTitle, Nr as WidgetValue, wi as buildDebugData, g as byDomain, Sr as calculateLightGroup, Cr as calculateSensorGroup, vr as copyText, Or as countActiveEntities, Ya as defineConfig, Kt as defineWidget, t as deprecations, Ja as field, n as formatDeprecation, i as formatSchemaError, Dr as getEntityAttribute, s as getForecasts, c as getStream, l as getWebRtcClientConfig, u as hassMediaUrl, Ft as imagePreset, Xa as imageSrc, Lt as imageUrl, ir as injectTokens, Qa as isDark, Er as isEntityActive, _i as isPanelControllable, zt as mediaUrl, Za as monotoneCubicPath, Bt as parseColor, Vt as presetValue, d as sendWebRtcCandidate, f as startWebRtcSession, p as state, wa as svgColors, m as trackEntityHistory, h as untrackEntityHistory, _ as useArea, v as useCalendarEvents, y as useCamera, Tn as useConfirm, b as useConnection, xr as useCopyText, x as useCurrency, ya as useDaylight, S as useEntities, ee as useEntity, ne as useEntityHistory, re as useEntityStatistics, ie as useForecast, ae as useHassConfig, sa as useIntersectionPause, oe as useLocale, ba as useReducedMotion, Yt as useService, ce as useStore, le as useTemperatureUnit, Qt as useToggle, Zt as useTurnOff, Xt as useTurnOn, pe as useUnitSystem, qt as useWidgetContext, ia as useWidgetDashboard, $t as useWidgetDialog, Cn as useWidgetDimensions, xa as useWidgetEntityGroup, xn as useWidgetGestures, oa as useWidgetViewer, Ea as widgetFields, a as z };