@glasshome/widget-sdk 1.15.1 → 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 b, useEntities as te, useEntity as ne, useEntityHistory as re, useEntityStatistics as ie, useForecast as ae, useHassConfig as oe, useLocale as se, useService as ce, useStore as x, useTemperatureUnit as S, useToggle as le, useTurnOff as ue, useTurnOn as C, useUnitSystem as w } from "@glasshome/sync-layer/solid";
-import { For as de, Show as T, createContext as fe, createEffect as E, createMemo as D, createSignal as O, on as pe, onCleanup as me, 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 I, style as _e, template as L, use as ve } from "solid-js/web";
-import { clsx as ye } from "clsx";
-import { twMerge as be } from "tailwind-merge";
-import { Badge as xe, Button as Se, Carousel as Ce, CarouselContent as we, CarouselDots as Te, CarouselItem as Ee, CarouselNext as De, CarouselPrevious as Oe, ColorSlider as ke, ColorWheel as Ae, CountPill as je, Icon as Me, Input as Ne, Label as Pe, ResponsiveDialog as Fe, ResponsiveDialogBody as Ie, ResponsiveDialogBody as Le, ResponsiveDialogClose as Re, ResponsiveDialogContent as ze, ResponsiveDialogDescription as Be, ResponsiveDialogFooter as Ve, ResponsiveDialogFooter as He, ResponsiveDialogHeader as Ue, ResponsiveDialogTitle as We, SchemaForm as Ge, SectionIcon as Ke, SectionTitle as qe, Select as Je, SelectContent as Ye, SelectItem as Xe, SelectTrigger as Ze, SelectValue as Qe, Slider as $e, Switch as et, Tabs as tt, Tabs as nt, TabsContent as rt, TabsContent as it, TabsList as at, TabsList as ot, TabsTrigger as st, TabsTrigger as ct, imageUrl as lt, mediaUrl as ut, parseColor as dt } 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 ft(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 ft(e) {
 		} : e.jsonSchema;
 	} });
 }
-function pt(e) {
+function Gt(e) {
 	try {
 		return e.parse({});
 	} catch {
@@ -27,103 +27,714 @@ function pt(e) {
 }
 //#endregion
 //#region src/define-widget.ts
-function mt(e) {
-	return e.configSchema && (e.manifest.schema || (e.manifest.schema = ft(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = pt(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 = fe();
-function ht() {
-	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 gt(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(gt(n), t, r, { entity_id: n });
+		await e(Jt(n), t, r, { entity_id: n });
 	};
 }
-function _t() {
-	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")
-	} : ce();
+		turnOn: G(e, "turn_on"),
+		turnOff: G(e, "turn_off"),
+		toggle: G(e, "toggle")
+	} : se();
+}
+function Xt() {
+	let e = A(W)?.callService;
+	return e ? G(e, "turn_on") : fe();
+}
+function Zt() {
+	let e = A(W)?.callService;
+	return e ? G(e, "turn_off") : de();
+}
+function Qt() {
+	let e = A(W)?.callService;
+	return e ? G(e, "toggle") : ue();
+}
+//#endregion
+//#region src/framework/design-system/z-index.ts
+var K = {
+	BACKGROUND: 0,
+	CONTENT: 10,
+	OVERLAY: 20,
+	ACTIONS: 30
+}, 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;
 }
-function vt() {
-	let e = k(R)?.callService;
-	return e ? z(e, "turn_on") : C();
+//#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 yt() {
-	let e = k(R)?.callService;
-	return e ? z(e, "turn_off") : ue();
+function Xn(e) {
+	return (() => {
+		var t = Rn();
+		return F(t, () => e.children), P(() => M(t, X("glasshome-widget-layer", e.class))), t;
+	})();
 }
-function bt() {
-	let e = k(R)?.callService;
-	return e ? z(e, "toggle") : le();
+function Zn(e) {
+	return (() => {
+		var t = zn();
+		return F(t, () => e.children), t;
+	})();
 }
-//#endregion
-//#region src/framework/design-system/z-index.ts
-var B = {
-	BACKGROUND: 0,
-	CONTENT: 10,
-	OVERLAY: 20,
-	ACTIONS: 30
-}, xt = fe();
-function St() {
-	let e = k(xt);
-	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;
+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 Ct = "/* Authoritative SDK CSS contract. Injected once on first Widget mount\n * via framework/theming/tokens.ts.\n *\n * All widget-internal visual scale is driven from CSS custom properties +\n * container queries on the `.glasshome-widget` shell (`container-type: size`).\n * No JS classifier, no size tier enum.\n */\n\n:root {\n  --tone-success:  oklch(0.70 0.18 145);\n  --tone-warning:  oklch(0.80 0.17 75);\n  --tone-danger:   oklch(0.64 0.22 27);\n  --tone-info:     oklch(0.66 0.20 245);\n  --tone-neutral:  oklch(0.65 0.02 250);\n  --tone-accent:   oklch(0.74 0.18 60);\n\n  --widget-grad-strength:    1;\n  --widget-glow-default:     0.4;\n  --widget-border-highlight: oklch(0.98 0 0 / 0.4);\n}\n\n.dark {\n  --tone-success:  oklch(0.74 0.18 145);\n  --tone-warning:  oklch(0.82 0.17 75);\n  --tone-danger:   oklch(0.68 0.22 27);\n  --tone-info:     oklch(0.70 0.20 245);\n  --tone-neutral:  oklch(0.69 0.02 250);\n  --tone-accent:   oklch(0.78 0.18 60);\n\n  --widget-grad-strength:    1.1;\n  --widget-glow-default:     0.5;\n  --widget-border-highlight: oklch(1 0 0 / 0.08);\n}\n\n@property --widget-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: oklch(0.65 0.02 250);\n}\n\n/* === Widget shell ===\n * Fluid scale tokens — tied to the shell's own container box (cqb=height, cqi=width).\n * Icon/pad/gap track HEIGHT (cqb) not the shortest side: two widgets of equal\n * height match regardless of width (a 2×2 and a 4×2 get the same icon). cqmin\n * starved portrait tiles by pinning the icon to the narrow width. Tune\n * multipliers / clamps to adjust density. */\n.glasshome-widget {\n  --widget-color: var(--tone-neutral);\n  --widget-glow-strength: var(--widget-glow-default);\n  --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. Two channels, both host/variant-driven:\n * - `--widget-backdrop`: the live backdrop filter (the shared glass recipe is\n *   blur + saturate, matching ui's CARD_BLUR). Default none — a variant opts\n *   in (classic-glass), and a performant-blur host disables it via override\n *   sheet when it paints a precomputed frost instead.\n * - `--glass-frost`: one full background layer (image + position / size +\n *   repeat) composited at the BOTTOM, under the accent gradient — the same\n *   frost slot ui's `.glass` formula ends its background list with. Unset →\n *   none. A performant-blur host sets it per shell with the viewport-aligned\n *   slice of its pre-blurred bitmap. */\n.glasshome-widget {\n  background:\n    var(--widget-gradient,\n      linear-gradient(135deg,\n        color-mix(in oklch, var(--widget-color) calc(22% * var(--widget-grad-strength)), transparent),\n        color-mix(in oklch, var(--widget-color-to, var(--widget-color)) calc(11% * var(--widget-grad-strength)), transparent)\n      )\n    ),\n    var(--glass-frost, none);\n  backdrop-filter: var(--widget-backdrop, none);\n  -webkit-backdrop-filter: var(--widget-backdrop, none);\n  box-shadow: inset 0 1px 0 var(--widget-border-highlight);\n}\n\n/* === Slot: content layout === */\n/* Default: column. Flip to row only on wide-and-short widgets (matches the\n * old contentLayout heuristic: aspect > 1 AND height < 150px). */\n.glasshome-widget-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: var(--widget-pad);\n  gap: var(--widget-gap);\n  overflow: hidden;\n  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.glasshome-widget-icon {\n  width: var(--widget-icon-box);\n  height: var(--widget-icon-box);\n  border-radius: var(--radius-sm, 12px);\n  background: var(--widget-icon-color, var(--widget-color));\n  box-shadow: 0 0 calc(var(--widget-glow-strength) * 30px)\n    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 50%, transparent);\n  color: oklch(from var(--widget-icon-color, var(--widget-color)) calc(0.52 + sign(0.5 - l) * 0.43) calc(c * 0.2) h);\n}\n.glasshome-widget-icon-glyph {\n  font-size: var(--widget-icon-glyph);\n  line-height: 1;\n}\n.glasshome-widget-icon-stack {\n  position: absolute;\n  width: 102%;\n  height: 102%;\n  border-radius: var(--radius-sm, 12px);\n}\n.glasshome-widget-icon-stack-2 { bottom: -14%; right: -10%; opacity: 0.45; z-index: -2; }\n.glasshome-widget-icon-stack-3 { bottom: -28%; right: -20%; opacity: 0.20; z-index: -3; }\n\n/* === Slot: text === */\n.glasshome-widget-title {\n  font-size: var(--widget-title-size);\n  line-height: 1.2;\n  color: 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: color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 30%, transparent);\n  box-shadow: 0 0 calc(var(--widget-glow-strength) * 40px)\n    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 40%, transparent);\n  clip-path: inset(0 calc((100 - var(--widget-fill-value)) * 1%) 0 0 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", wt = !1, Tt, Et = /* @__PURE__ */ new WeakSet();
-function Dt() {
-	return Tt || (Tt = new CSSStyleSheet(), Tt.replaceSync(Ct.replace(/:root\b/g, ":host").replace(/^\.dark\b/gm, ":host(.dark)"))), Tt;
+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 Ot(e) {
+function ir(e) {
 	if (typeof ShadowRoot < "u" && e instanceof ShadowRoot) {
-		if (Et.has(e)) return;
-		let t = Dt();
-		e.adoptedStyleSheets.includes(t) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, t]), Et.add(e);
+		if (nr.has(e)) return;
+		let t = rr();
+		e.adoptedStyleSheets.includes(t) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, t]), nr.add(e);
 		return;
 	}
-	if (wt) return;
+	if (er) return;
 	let t = e ?? (typeof document > "u" ? void 0 : document);
 	if (!t) return;
 	if (t.head.querySelector?.("style[data-glasshome-tokens]")) {
-		wt = !0;
+		er = !0;
 		return;
 	}
 	let n = t.createElement("style");
-	n.setAttribute("data-glasshome-tokens", ""), n.textContent = Ct, t.head.appendChild(n), wt = !0;
-}
-//#endregion
-//#region src/framework/utils/cn.ts
-function V(...e) {
-	return be(ye(e));
+	n.setAttribute("data-glasshome-tokens", ""), n.textContent = $n, t.head.appendChild(n), er = !0;
 }
-var kt = {
+var ar = {
 	"classic-glass": {
 		id: "classic-glass",
 		name: "Classic Glass",
 		description: "Default glassmorphism design with blur background and gradient",
 		styles: { cssVars: {
-			"--widget-bg": "rgba(255, 255, 255, 0.1)",
-			"--widget-border": "rgba(255, 255, 255, 0.2)",
-			"--widget-blur": "12px",
-			"--widget-shadow": "0 8px 32px rgba(0, 0, 0, 0.2)",
 			"--widget-padding": "1.5rem",
-			"--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",
@@ -145,9 +756,13 @@ var kt = {
 		name: "Minimal",
 		description: "Clean, minimal design with no background effects",
 		styles: { cssVars: {
-			"--widget-bg": "transparent",
-			"--widget-border": "rgba(255, 255, 255, 0.1)",
-			"--widget-padding": "1rem"
+			"--widget-padding": "1rem",
+			"--glass-base": "transparent",
+			"--glass-wash": "0%",
+			"--glass-light": "0",
+			"--glass-rim": "0",
+			"--glass-lift": "0",
+			"--glass-edge": "transparent"
 		} },
 		layout: {
 			type: "flex",
@@ -171,9 +786,6 @@ var kt = {
 		name: "Compact Horizontal",
 		description: "Horizontal layout for compact widgets",
 		styles: { cssVars: {
-			"--widget-bg": "rgba(255, 255, 255, 0.08)",
-			"--widget-border": "rgba(255, 255, 255, 0.15)",
-			"--widget-blur": "10px",
 			"--widget-padding": "1rem",
 			"--widget-icon-size": "2.5rem",
 			"--widget-backdrop": "blur(16px) saturate(1.8)"
@@ -194,22 +806,21 @@ var kt = {
 		}
 	}
 };
-function At(e) {
-	return kt[e];
+function or(e) {
+	return ar[e];
 }
 //#endregion
 //#region src/framework/backgrounds/WidgetSliderFill.tsx
-var jt = /*#__PURE__*/ L("<div>");
-function Mt(e) {
-	return (() => {
-		var t = jt();
-		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,
-				...e.color ? { "--widget-icon-color": e.color } : {}
+				"z-index": K.BACKGROUND
 			};
-			return r !== n.e && j(t, n.e = r), n.t = _e(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
@@ -218,55 +829,34 @@ function Mt(e) {
 }
 //#endregion
 //#region src/framework/components/WidgetContent.tsx
-var Nt = /*#__PURE__*/ L("<div>");
-function Pt(e) {
-	return (() => {
-		var t = Nt();
-		return P(t, () => e.children), N(() => j(t, V("glasshome-widget-content", e.class))), t;
-	})();
-}
-//#endregion
-//#region src/framework/components/WidgetIcon.tsx
-var Ft = /*#__PURE__*/ L("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-2\">"), It = /*#__PURE__*/ L("<div class=\"glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-3\">"), Lt = /*#__PURE__*/ L("<div><div class=\"glasshome-widget-icon-glyph flex items-center justify-center\">");
-function Rt(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 = Lt(), r = n.firstChild;
-		return P(n, M(T, {
-			get when() {
-				return t() >= 2;
-			},
-			get children() {
-				return Ft();
-			}
-		}), r), P(n, M(T, {
-			get when() {
-				return t() >= 3;
-			},
-			get children() {
-				return It();
-			}
-		}), r), P(r, () => e.icon), N((t) => {
-			var r = V("glasshome-widget-icon", "relative flex shrink-0 items-center justify-center pointer-events-none transition-all", e.dimmed && "opacity-50", e.class), i = e.color ? { "--widget-icon-color": e.color } : void 0;
-			return r !== t.e && j(n, t.e = r), t.t = _e(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 zt = /*#__PURE__*/ L("<p>");
-function Bt(e) {
+var pr = /*#__PURE__*/ B("<p>");
+function mr(e) {
 	return (() => {
-		var t = zt();
-		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 && I(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
@@ -275,21 +865,21 @@ function Bt(e) {
 }
 //#endregion
 //#region src/framework/components/WidgetTitle.tsx
-var Vt = /*#__PURE__*/ L("<span class=\"glasshome-widget-badge shrink-0\">"), Ht = /*#__PURE__*/ L("<div><h3 class=glasshome-widget-title>");
-function Ut(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 = Ht(), n = t.firstChild;
-		return P(n, () => e.children), P(t, M(T, {
+		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 = Vt();
-				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 && I(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
@@ -297,8 +887,41 @@ function Ut(e) {
 	})();
 }
 //#endregion
+//#region src/framework/utils/clipboard.ts
+async function vr(e) {
+	if (navigator.clipboard?.writeText) try {
+		return await navigator.clipboard.writeText(e), !0;
+	} catch {}
+	return yr(e);
+}
+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");
+	} catch {
+		return !1;
+	} finally {
+		n.remove(), t?.focus();
+	}
+}
+function br() {
+	let e = document.activeElement;
+	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
+	return e instanceof HTMLElement ? e : null;
+}
+function xr(e = 2e3) {
+	let [t, n] = O("idle"), r;
+	return k(() => clearTimeout(r)), {
+		state: t,
+		copy: async (t) => {
+			n(await vr(t) ? "copied" : "failed"), clearTimeout(r), r = setTimeout(() => n("idle"), e);
+		}
+	};
+}
+//#endregion
 //#region src/framework/utils/entity-aggregation.ts
-function Wt(e, t = !1) {
+function Sr(e, t = !1) {
 	if (e.length === 0) return {
 		isGroup: !1,
 		state: "unknown",
@@ -321,7 +944,7 @@ function Wt(e, t = !1) {
 			isUnavailable: t.state === "unavailable",
 			brightness: r,
 			brightnessPercent: i,
-			color: qt(t),
+			color: Tr(t),
 			onCount: +!!n,
 			totalCount: 1,
 			description: n ? "On" : "Off"
@@ -333,7 +956,7 @@ function Wt(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(Kt(e, n));
+				l.push(wr(e, n));
 			}
 			break;
 		case "off":
@@ -346,26 +969,26 @@ function Wt(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 = qt(e[0]);
-	let b;
-	return b = 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: b
+		description: x
 	};
 }
-function Gt(e, t = "mean", n = !0) {
+function Cr(e, t = "mean", n = !0) {
 	if (e.length === 0) return {
 		isGroup: !1,
 		state: "unknown",
@@ -461,7 +1084,7 @@ function Gt(e, t = "mean", n = !0) {
 		memberValues: a
 	};
 }
-function Kt(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,
@@ -469,7 +1092,7 @@ function Kt(e, t) {
 		(s + i) * 255
 	];
 }
-function qt(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) {
@@ -477,7 +1100,7 @@ function qt(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] = Kt(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) {
@@ -488,7 +1111,7 @@ function qt(e) {
 }
 //#endregion
 //#region src/framework/utils/entity-state.ts
-function Jt(e) {
+function Er(e) {
 	if (!e) return !1;
 	if ([
 		"on",
@@ -504,15 +1127,15 @@ function Jt(e) {
 	}
 	return !1;
 }
-function Yt(e, t, n) {
+function Dr(e, t, n) {
 	return e?.attributes ? e.attributes[t] ?? n : n;
 }
-function Xt(e) {
-	return e.filter(Jt).length;
+function Or(e) {
+	return e.filter(Er).length;
 }
 //#endregion
 //#region src/framework/utils/format-value.ts
-function Zt(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}` : "--";
@@ -523,41 +1146,47 @@ function Zt(e, t, n) {
 }
 //#endregion
 //#region src/framework/utils/interpret-value.ts
-function Qt(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 $t = /*#__PURE__*/ L("<div class=glasshome-widget-subtitle>"), en = /*#__PURE__*/ L("<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 = en(), n = t.firstChild;
-		return P(n, () => Zt(e.value, e.unit)), P(t, M(T, {
+		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 = $t();
-				return P(t, () => Qt(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 nn = /*#__PURE__*/ L("<div><div class=\"relative h-full w-full\">"), rn = /*#__PURE__*/ L("<div class=\"glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse\">"), an = /*#__PURE__*/ L("<div class=\"flex h-full w-full flex-col items-center justify-center gap-2 text-center\">"), on = /*#__PURE__*/ L("<div class=\"flex items-center justify-center text-white/30\">"), sn = /*#__PURE__*/ L("<h3 class=\"font-semibold text-sm text-white/60\">"), cn = /*#__PURE__*/ L("<p class=\"text-white/50 text-xs\">");
-function ln(t) {
-	let n = k(R), [r, i] = O(), [a, o] = O({
+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
 	});
 	E(() => {
-		let e = r();
+		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
 			} : {
@@ -565,123 +1194,939 @@ function ln(t) {
 				height: e.contentRect.height
 			});
 		});
-		t.observe(e), me(() => t.disconnect());
-	}), he(() => {
-		let e = r()?.getRootNode();
-		Ot(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 = D(() => {
-		if (t.variant) return typeof t.variant == "string" ? At(t.variant) : t.variant;
-	}), l = D(() => ({
+		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.colorTo ? { "--widget-color-to": t.colorTo } : {},
-		...t.gradient ? { "--widget-gradient": t.gradient } : {}
-	})), u = () => !!t.gestures && !t.isEditMode, d = (e) => {
-		u() && t.gestures?.onPointerEnter(e);
-	}, f = (e) => {
-		u() && t.gestures?.onPointerDown(e);
-	}, p = (e) => {
-		u() && t.gestures?.onPointerMove(e);
-	}, m = (e) => {
-		u() && t.gestures?.onPointerUp(e);
-	}, h = (e) => {
-		u() && t.gestures?.onPointerCancel(e);
-	};
-	return M(R.Provider, {
-		value: s,
+		...t.tone && t.tone !== "neutral" || t.color ? { "--glass-tone": "var(--widget-color)" } : {},
+		...t.colorTo ? {
+			"--widget-color-to": t.colorTo,
+			"--glass-tone-2": t.colorTo
+		} : {},
+		...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(xt.Provider, {
-				value: a,
+			return N(Vn.Provider, {
+				value: () => t.confirmed === !0,
 				get children() {
-					var e = nn(), n = e.firstChild;
-					return A(e, "pointercancel", h), A(e, "pointerup", m), A(e, "pointermove", p), A(e, "pointerdown", f), A(e, "pointerenter", d), ve((e) => {
-						i(e), t.gestures?.bindElement(e);
-					}, e), P(n, (() => {
-						var e = F(() => !!t.emptyState);
-						return () => e() ? M(un, {
-							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 = rn();
-							return N((t) => I(e, "z-index", B.OVERLAY)), e;
-						})();
-					})(), null), N((r) => {
-						var i = V("glasshome-widget", "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50", c()?.styles?.class, t.class), a = l(), o = B.CONTENT;
-						return i !== r.e && j(e, r.e = i), r.t = _e(e, a, r.t), o !== r.a && I(n, "z-index", r.a = o), r;
+					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 Hr(e) {
+	return (() => {
+		var t = Lr();
+		return F(t, (() => {
+			var t = I(() => !!e.icon);
+			return () => t() && (() => {
+				var t = Rr();
+				return F(t, () => e.icon), t;
+			})();
+		})(), null), F(t, (() => {
+			var t = I(() => !!e.title);
+			return () => t() && (() => {
+				var t = zr();
+				return F(t, () => e.title), t;
+			})();
+		})(), null), F(t, (() => {
+			var t = I(() => !!e.message);
+			return () => t() && (() => {
+				var t = Br();
+				return F(t, () => e.message), t;
+			})();
+		})(), null), t;
+	})();
+}
+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,
-						a: 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 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) => ({
+			entity_id: e.id,
+			state: e.state,
+			domain: e.domain,
+			friendly_name: e.friendlyName,
+			device_class: e.deviceClass ?? null,
+			area_id: e.areaId,
+			last_changed: e.lastChanged.toISOString(),
+			last_updated: e.lastUpdated.toISOString(),
+			attributes: e.attributes
+		})),
+		...n
+	};
+}
+var Ti = (e) => JSON.stringify(e, null, 2), Ei = {
+	idle: "lucide:copy",
+	copied: "lucide:check",
+	failed: "lucide:triangle-alert"
+}, Di = {
+	idle: "text-muted-foreground",
+	copied: "text-success",
+	failed: "text-destructive"
+};
+function Oi(e) {
+	let { state: t, copy: n } = xr();
+	return N(Ee, {
+		variant: "ghost",
+		size: "icon",
+		class: "size-8",
+		get "aria-label"() {
+			return e.label;
+		},
+		onClick: () => void n(e.text()),
+		get children() {
+			return N(U, {
+				get icon() {
+					return Ei[t()];
+				},
+				width: 16,
+				height: 16,
+				get class() {
+					return Di[t()];
+				}
+			});
+		}
+	});
+}
+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 Ai = (e) => typeof e != "object" || !e;
+function ji(e) {
+	return e == null ? "None" : String(e);
+}
+function Mi(e) {
+	return Array.isArray(e) ? e.length : typeof e == "object" && e ? Object.keys(e).length : 0;
+}
+function Ni(e) {
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? e : t.toLocaleString();
+}
+function Pi(e) {
+	return N(ut, {
+		class: "overflow-hidden p-0",
+		get children() {
+			var t = yi();
+			return F(t, () => Ti(e.value)), t;
+		}
+	});
+}
+function Fi(e) {
+	return N(ye, {
+		collapsible: !0,
+		class: "border-border/50 border-t",
+		get children() {
+			return N(xe, {
+				get value() {
+					return e.label;
+				},
+				get children() {
+					return [N(Se, {
+						class: "py-3 text-muted-foreground text-xs",
+						get children() {
+							var t = bi();
+							return F(t, () => e.label, null), F(t, N(w, {
+								get when() {
+									return e.count !== void 0;
+								},
+								get children() {
+									return N(ze, { get children() {
+										return e.count;
+									} });
+								}
+							}), null), t;
+						}
+					}), N(be, { get children() {
+						return N(Pi, { get value() {
+							return e.value;
+						} });
+					} })];
+				}
+			});
+		}
+	});
+}
+function Ii(e) {
+	return (() => {
+		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), F(r, N(Ge, {
+			class: "truncate",
+			get children() {
+				return e.title;
+			}
+		}), null), F(r, N(w, {
+			get when() {
+				return e.subtitle;
+			},
+			children: (e) => N(lt, {
+				class: "truncate font-mono",
+				get children() {
+					return e();
+				}
+			})
+		}), null), F(n, () => e.badge, null), F(n, N(Oi, {
+			get label() {
+				return `Copy ${e.title}`;
+			},
+			text: () => Ti(e.source)
+		}), null), F(i, () => e.children), t;
+	})();
+}
+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 N(lt, { children: "Nothing set" });
+		},
+		get children() {
+			return [N(w, {
+				get when() {
+					return n().length > 0;
+				},
+				get children() {
+					var e = Si();
+					return F(e, N(C, {
+						get each() {
+							return n();
+						},
+						children: ([e, t]) => N(H, {
+							get label() {
+								return ki(e);
+							},
+							get children() {
+								return ji(t);
+							}
+						})
+					})), e;
+				}
+			}), N(C, {
+				get each() {
+					return r();
+				},
+				children: ([e, t]) => N(Fi, {
+					get label() {
+						return ki(e);
+					},
+					get count() {
+						return Mi(t);
+					},
+					value: t
+				})
+			})];
+		}
+	});
+}
+function Ri(e) {
+	let t = () => e.entity.attributes ?? {};
+	return N(Ii, {
+		icon: "lucide:activity",
+		get title() {
+			return e.entity.friendly_name ?? e.entity.entity_id;
+		},
+		get subtitle() {
+			return e.entity.entity_id;
+		},
+		get badge() {
+			return N(we, { get children() {
+				return e.entity.state;
+			} });
+		},
+		get source() {
+			return e.entity;
+		},
+		get children() {
+			return [(() => {
+				var t = Si();
+				return F(t, N(H, {
+					label: "Domain",
+					get children() {
+						return e.entity.domain;
+					}
+				}), null), F(t, N(w, {
+					get when() {
+						return e.entity.device_class;
+					},
+					children: (e) => N(H, {
+						label: "Device class",
+						get children() {
+							return e();
+						}
+					})
+				}), null), F(t, N(w, {
+					get when() {
+						return e.entity.area_id;
+					},
+					children: (e) => N(H, {
+						label: "Area",
+						get children() {
+							return e();
+						}
+					})
+				}), null), F(t, N(H, {
+					label: "Changed",
+					get children() {
+						return Ni(e.entity.last_changed);
+					}
+				}), null), F(t, N(H, {
+					label: "Updated",
+					get children() {
+						return Ni(e.entity.last_updated);
+					}
+				}), null), t;
+			})(), N(w, {
+				get when() {
+					return Mi(t()) > 0;
+				},
+				get children() {
+					return N(Fi, {
+						label: "Attributes",
+						get count() {
+							return Mi(t());
+						},
+						get value() {
+							return t();
+						}
+					});
+				}
+			})];
+		}
+	});
+}
+function zi(e) {
+	let t = D(() => Object.keys(e.data).filter((e) => e !== "widgetConfig" && e !== "entities"));
+	return N(We, { get children() {
+		return [
+			N(Ii, {
+				icon: "lucide:sliders-horizontal",
+				title: "Configuration",
+				get source() {
+					return e.data.widgetConfig;
+				},
+				get children() {
+					return N(Li, { get record() {
+						return e.data.widgetConfig;
+					} });
 				}
+			}),
+			N(C, {
+				get each() {
+					return e.data.entities;
+				},
+				children: (e) => N(Ri, { entity: e })
+			}),
+			N(C, {
+				get each() {
+					return t();
+				},
+				children: (t) => N(Ii, {
+					icon: "lucide:braces",
+					get title() {
+						return ki(t);
+					},
+					get source() {
+						return e.data[t];
+					},
+					get children() {
+						return N(Pi, { get value() {
+							return e.data[t];
+						} });
+					}
+				})
+			})
+		];
+	} });
+}
+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 Vi(e) {
+	let t = D(() => Bi(e.data));
+	return N(w, {
+		get when() {
+			return e.data !== void 0;
+		},
+		get fallback() {
+			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 N(w, {
+				get when() {
+					return t();
+				},
+				get fallback() {
+					return N(Ii, {
+						icon: "lucide:braces",
+						title: "Debug data",
+						get source() {
+							return e.data;
+						},
+						get children() {
+							return N(w, {
+								get when() {
+									return typeof e.data == "string";
+								},
+								get fallback() {
+									return N(Pi, { get value() {
+										return e.data;
+									} });
+								},
+								get children() {
+									return N(ut, {
+										class: "overflow-hidden p-0",
+										get children() {
+											var t = Ci();
+											return F(t, () => e.data), t;
+										}
+									});
+								}
+							});
+						}
+					});
+				},
+				children: (e) => N(zi, { get data() {
+					return e();
+				} })
 			});
 		}
 	});
 }
-function un(e) {
-	return (() => {
-		var t = an();
-		return P(t, (() => {
-			var t = F(() => !!e.icon);
-			return () => t() && (() => {
-				var t = on();
-				return P(t, () => e.icon), t;
-			})();
-		})(), null), P(t, (() => {
-			var t = F(() => !!e.title);
-			return () => t() && (() => {
-				var t = sn();
-				return P(t, () => e.title), t;
-			})();
-		})(), null), P(t, (() => {
-			var t = F(() => !!e.message);
-			return () => t() && (() => {
-				var t = cn();
-				return P(t, () => e.message), t;
-			})();
-		})(), null), t;
-	})();
-}
-var H = ln;
-H.Content = Pt, H.Icon = Rt, H.Title = Ut, H.Status = Bt, H.Value = tn, H.SliderFill = Mt;
 //#endregion
 //#region src/framework/dialogs/validate-config.ts
-function dn(e) {
+function Hi(e) {
 	let t = "";
 	for (let n of e) t += typeof n == "number" ? `[${n}]` : t ? `.${String(n)}` : String(n);
 	return t;
 }
-function fn(e, t) {
+function Ui(e, t) {
 	let n = e.safeParse(t);
 	return n.success ? null : n.error.issues.map((e) => {
-		let t = dn(e.path);
+		let t = Hi(e.path);
 		return t ? `${t}: ${e.message}` : e.message;
 	});
 }
 //#endregion
 //#region src/framework/dialogs/WidgetDialog.tsx
-var pn = /*#__PURE__*/ L("<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\">"), mn = /*#__PURE__*/ L("<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"), hn = /*#__PURE__*/ L("<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>"), gn = /*#__PURE__*/ L("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No additional controls"), _n = /*#__PURE__*/ L("<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\">"), vn = /*#__PURE__*/ L("<div class=\"rounded-lg bg-muted/30 p-2 text-center md:p-6\"><p class=\"text-muted-foreground text-sm\">No debug information available"), yn = /*#__PURE__*/ L("<span class=\"inline-flex size-3.5 shrink-0 items-center\">"), bn = (e) => ft(e), xn = {
+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",
@@ -690,20 +2135,24 @@ var pn = /*#__PURE__*/ L("<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 f
 	"2xl": "xl",
 	"3xl": "xl",
 	"4xl": "full"
+}, ea = {
+	idle: "Copy all",
+	copied: "Copied",
+	failed: "Copy failed"
 };
-function Sn(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] = O({}), [a, o] = O(null), [s, c] = O([]);
-	E(pe(() => 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 });
-	})), E(pe(() => t.configSchema, (e) => {
-		e && o(bn(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 = fn(e, r());
+			let t = Ui(e, r());
 			if (t) {
 				c(t);
 				return;
@@ -712,16 +2161,16 @@ function Sn(e) {
 		c([]), t.onConfigSave?.(r());
 	}, [f, p] = O(t.defaultTab ?? "controls"), m = () => t.activeTab ?? f(), h = (e) => {
 		t.onActiveTabChange ? t.onActiveTabChange(e) : p(e);
-	}, g = () => xn[t.maxWidth ?? "xl"], _ = () => {
+	}, g = () => $i[t.maxWidth ?? "xl"], _ = () => {
 		if (t.tabs) return t.tabs;
 		let e = [];
 		return e.push({
 			id: "edit",
 			label: "Edit",
-			icon: pn(),
+			icon: Wi(),
 			content: t.editContent ?? (() => {
 				let e = t.SchemaForm, o = n() ? a() : void 0;
-				return !o || !e ? mn() : M(e, {
+				return !o || !e ? Gi() : N(e, {
 					schema: o,
 					get data() {
 						return r();
@@ -735,161 +2184,250 @@ function Sn(e) {
 		}), e.push({
 			id: "controls",
 			label: "Controls",
-			icon: hn(),
-			content: t.controlsContent ?? gn()
+			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: _n(),
-			content: t.debugContent ?? vn()
+			icon: qi(),
+			content: t.debugContent ?? N(Vi, { get data() {
+				return t.debugData;
+			} })
 		}), e;
-	}, v = async () => {
-		if (t.debugData !== void 0) try {
-			let e = typeof t.debugData == "string" ? t.debugData : JSON.stringify(t.debugData, null, 2);
-			await navigator.clipboard.writeText(e);
-		} catch {}
-	}, ee = t.ResponsiveDialog, y = t.ResponsiveDialogContent, b = t.ResponsiveDialogHeader, te = t.ResponsiveDialogTitle, ne = t.ResponsiveDialogDescription, re = t.ResponsiveDialogBody ?? Le, ie = t.ResponsiveDialogFooter ?? He, ae = t.Tabs ?? nt, oe = t.TabsList ?? ot, se = t.TabsTrigger ?? ct, ce = t.TabsContent ?? it, x = t.Button, S = D(pe([
+	}, 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);
+		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
-	], () => _())), le = (e) => n() ? u(e) : t.onOpenChange(e), ue = () => n() ? l() : t.hasUnsavedChanges, C = () => n() ? d : t.onSave, w = () => {
-		let e = S(), t = m();
-		return e.some((e) => e.id === t) ? t : e[0]?.id ?? t;
-	}, fe = () => w() === "edit" && (C() || t.onDelete) || w() === "debug" && t.debugData !== void 0;
-	return M(ee, {
+	], () => _())), 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) => le(e),
+		onOpenChange: (e) => M(e),
 		get children() {
-			return M(y, {
-				get size() {
-					return g();
-				},
-				get class() {
-					return t.class;
+			return N(w, {
+				get when() {
+					return !S();
 				},
-				get children() {
-					return M(ae, {
-						get value() {
-							return w();
+				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(b, {
-									class: "flex-wrap",
-									get action() {
-										return [M(oe, {
-											class: "w-auto",
-											get children() {
-												return M(de, {
-													get each() {
-														return S();
+								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(se, {
-														get value() {
-															return e.id;
-														},
-														get children() {
-															return [(() => {
-																var t = yn();
-																return P(t, () => e.icon), t;
-															})(), F(() => e.label)];
-														}
-													})
-												});
-											}
-										}), F(() => t.headerActions)];
+													class: "glasshome-widget-icon-glyph"
+												})), t;
+											})()
+										});
 									},
 									get children() {
-										return [M(te, {
+										return N(ce, {
 											class: "truncate",
 											get children() {
 												return t.title;
 											}
-										}), M(T, {
-											get when() {
-												return t.description;
-											},
-											get children() {
-												return M(ne, { get children() {
-													return t.description;
-												} });
-											}
-										})];
+										});
 									}
 								}),
-								M(re, { get children() {
-									return M(de, {
-										get each() {
-											return S();
-										},
-										children: (e) => M(ce, {
-											get value() {
-												return e.id;
-											},
-											get children() {
-												return e.content;
-											}
-										})
-									});
-								} }),
-								M(T, {
-									get when() {
-										return fe();
-									},
-									get children() {
-										return M(ie, { get children() {
-											return [
-												M(T, {
+								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(() => w() === "edit")() && t.onDelete;
+														return x() || t.tabs !== void 0;
 													},
 													get children() {
-														return M(x, {
-															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(T, {
+												}), I(() => t.headerActions)];
+											},
+											get children() {
+												return [N(ce, {
+													class: "truncate",
+													get children() {
+														return t.title;
+													}
+												}), N(w, {
 													get when() {
-														return F(() => w() === "edit")() && C();
+														return t.description;
 													},
 													get children() {
-														return M(x, {
-															size: "sm",
-															get disabled() {
-																return !ue();
-															},
-															onClick: () => C()?.(),
-															children: "Save"
-														});
+														return N(le, { get children() {
+															return t.description;
+														} });
 													}
-												}),
-												M(T, {
-													get when() {
-														return F(() => w() === "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(x, {
-															size: "sm",
-															variant: "outline",
-															onClick: v,
-															children: "Copy"
-														});
+														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()];
+																	}
+																});
+															}
+														})
+													];
+												} });
+											}
+										})
+									];
+								}
+							});
 						}
 					});
 				}
@@ -897,27 +2435,34 @@ function Sn(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 Cn = {
+var ra = {
 	name: "",
 	icon: "",
 	areaId: null
 };
-function wn() {
-	let e = k(R);
-	return () => e?.dashboard?.() ?? Cn;
+function ia() {
+	let e = A(W);
+	return () => e?.dashboard?.() ?? ra;
 }
 //#endregion
 //#region src/framework/hooks/use-widget-viewer.ts
-var Tn = { name: null };
-function En() {
-	let e = k(R);
-	return () => e?.viewer?.() ?? Tn;
+var aa = { name: null };
+function oa() {
+	let e = A(W);
+	return () => e?.viewer?.() ?? aa;
 }
 //#endregion
 //#region src/framework/hooks/use-intersection-pause.ts
-function Dn(e) {
+function sa(e) {
 	if (typeof IntersectionObserver > "u") return () => !1;
 	let [t, n] = O(!1), r = new IntersectionObserver((e) => {
 		let t = e[0];
@@ -926,50 +2471,72 @@ function Dn(e) {
 	return E(() => {
 		let t = e();
 		r.disconnect(), t && r.observe(t);
-	}), me(() => r.disconnect()), t;
+	}), k(() => r.disconnect()), t;
+}
+//#endregion
+//#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"
+	};
+}
+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 On() {
+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), me(() => e.removeEventListener("change", r)), t;
-}
-//#endregion
-//#region src/framework/hooks/use-widget-dialog.ts
-function kn(e = "controls") {
-	let [t, n] = O(!1), [r, i] = O(e), a = (t) => {
-		i(t ?? e), n(!0);
-	}, o = k(R);
-	return o?.registerDialogOpener?.(a), me(() => 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
-		}
-	};
+	return e.addEventListener("change", r), k(() => e.removeEventListener("change", r)), t;
 }
 //#endregion
 //#region src/framework/hooks/use-widget-entity-group.ts
-function An(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 Wt(n, e.allEntitiesMode);
-		if (t === "sensor") return Gt(n, e.sensorGroupType?.() ?? "mean", !0);
+		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,
@@ -981,264 +2548,8 @@ function An(e) {
 	};
 }
 //#endregion
-//#region src/framework/gestures/cursors.ts
-var U = 32, W = U / 2, G = "white", K = "rgba(0,0,0,0.4)", q = 2, J = 3;
-function jn(e) {
-	return `url("data:image/svg+xml,${encodeURIComponent(e)}")`;
-}
-function Y(e) {
-	return `<svg xmlns="http://www.w3.org/2000/svg" width="${U}" height="${U}" viewBox="0 0 ${U} ${U}">${e}</svg>`;
-}
-var Mn = Y(`
-  <g transform="translate(6, 2)">
-    <!-- shadow -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M10 8V3a2 2 0 0 1 4 0v10l4.5-4.5a2 2 0 0 1 2.83 2.83L14 18.5c-2 2-4 3.5-8 3.5-3 0-5-2-5-5v-6a2 2 0 0 1 4 0v2"/>
-    </g>
-    <!-- main -->
-    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M10 8V3a2 2 0 0 1 4 0v10l4.5-4.5a2 2 0 0 1 2.83 2.83L14 18.5c-2 2-4 3.5-8 3.5-3 0-5-2-5-5v-6a2 2 0 0 1 4 0v2"/>
-    </g>
-  </g>
-`), Nn = Y(`
-  <g>
-    <circle cx="${W}" cy="${W}" r="8" stroke="${K}" stroke-width="${J}" fill="none"/>
-    <circle cx="${W}" cy="${W}" r="8" stroke="${G}" stroke-width="1.5" fill="none"/>
-    <circle cx="${W}" cy="${W}" r="1.5" fill="${G}"/>
-  </g>
-`), Pn = Y(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${W}" x2="26" y2="${W}"/>
-      <polyline points="10,12 6,${W} 10,20"/>
-      <polyline points="22,12 26,${W} 22,20"/>
-    </g>
-    <!-- main -->
-    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${W}" x2="26" y2="${W}"/>
-      <polyline points="10,12 6,${W} 10,20"/>
-      <polyline points="22,12 26,${W} 22,20"/>
-    </g>
-    <!-- center grip dots -->
-    <circle cx="${W}" cy="${W}" r="1.5" fill="${G}"/>
-    <circle cx="11" cy="${W}" r="1" fill="${G}" opacity="0.6"/>
-    <circle cx="21" cy="${W}" r="1" fill="${G}" opacity="0.6"/>
-  </g>
-`), Fn = Y(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${W}" y1="6" x2="${W}" y2="26"/>
-      <polyline points="12,10 ${W},6 20,10"/>
-      <polyline points="12,22 ${W},26 20,22"/>
-    </g>
-    <!-- main -->
-    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${W}" y1="6" x2="${W}" y2="26"/>
-      <polyline points="12,10 ${W},6 20,10"/>
-      <polyline points="12,22 ${W},26 20,22"/>
-    </g>
-    <!-- center grip dots -->
-    <circle cx="${W}" cy="${W}" r="1.5" fill="${G}"/>
-    <circle cx="${W}" cy="11" r="1" fill="${G}" opacity="0.6"/>
-    <circle cx="${W}" cy="21" r="1" fill="${G}" opacity="0.6"/>
-  </g>
-`), In = Y(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${K}" stroke-width="${J}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="7" y1="${W}" x2="25" y2="${W}"/>
-      <line x1="${W}" y1="7" x2="${W}" y2="25"/>
-      <polyline points="11,13 7,${W} 11,19"/>
-      <polyline points="21,13 25,${W} 21,19"/>
-      <polyline points="13,11 ${W},7 19,11"/>
-      <polyline points="13,21 ${W},25 19,21"/>
-    </g>
-    <!-- main -->
-    <g stroke="${G}" stroke-width="${q}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="7" y1="${W}" x2="25" y2="${W}"/>
-      <line x1="${W}" y1="7" x2="${W}" y2="25"/>
-      <polyline points="11,13 7,${W} 11,19"/>
-      <polyline points="21,13 25,${W} 21,19"/>
-      <polyline points="13,11 ${W},7 19,11"/>
-      <polyline points="13,21 ${W},25 19,21"/>
-    </g>
-    <!-- center dot -->
-    <circle cx="${W}" cy="${W}" r="2" fill="${G}"/>
-  </g>
-`);
-function X(e, t, n) {
-	return {
-		css: `${jn(e)} ${t} ${n}, auto`,
-		hotspotX: t,
-		hotspotY: n
-	};
-}
-var Z = {
-	tap: X(Mn, 12, 4),
-	hold: X(Nn, 16, 16),
-	slideHorizontal: X(Pn, W, W),
-	slideVertical: X(Fn, W, W),
-	slideAuto: X(In, W, W)
-};
-//#endregion
-//#region src/framework/gestures/haptics.ts
-function Ln() {
-	if (typeof window > "u") return null;
-	let e = window;
-	return e.Capacitor?.isNativePlatform?.() ? e.Capacitor.Plugins?.Haptics ?? null : null;
-}
-function Rn(e) {
-	if (!(typeof navigator > "u" || typeof navigator.vibrate != "function")) try {
-		navigator.vibrate(e);
-	} catch {}
-}
-var zn = {
-	tick() {
-		let e = Ln();
-		if (e) {
-			e.impact({ style: "Light" }).catch(() => {});
-			return;
-		}
-		Rn(8);
-	},
-	bump() {
-		let e = Ln();
-		if (e) {
-			e.impact({ style: "Medium" }).catch(() => {});
-			return;
-		}
-		Rn(20);
-	},
-	pulse() {
-		let e = Ln();
-		if (e) {
-			e.impact({ style: "Heavy" }).catch(() => {});
-			return;
-		}
-		Rn([
-			0,
-			15,
-			40,
-			15
-		]);
-	}
-};
-//#endregion
-//#region src/framework/gestures/use-widget-gestures.ts
-function Bn(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] = O(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 && (zn.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 Vn = {
+var Sa = {
 	solar: "oklch(0.74 0.18 60)",
 	grid: "oklch(0.62 0.12 245)",
 	battery: "oklch(0.70 0.18 145)",
@@ -1247,21 +2558,21 @@ var Vn = {
 	positive: "oklch(0.70 0.14 160)",
 	negative: "oklch(0.64 0.22 27)"
 };
-function Hn(e) {
+function Ca(e) {
 	return {
 		fill: `color-mix(in oklch, ${e} 20%, transparent)`,
 		stroke: e,
 		solid: e
 	};
 }
-var Un = Object.fromEntries(Object.entries(Vn).map(([e, t]) => [e, Hn(t)])), Wn = o.enum([
+var wa = Object.fromEntries(Object.entries(Sa).map(([e, t]) => [e, Ca(t)])), Ta = o.enum([
 	"success",
 	"warning",
 	"danger",
 	"info",
 	"neutral",
 	"accent"
-]), Gn = {
+]), Ea = {
 	title: e(() => o.string().optional().meta({
 		title: "Title",
 		description: "Optional display name override"
@@ -1281,62 +2592,63 @@ var Un = Object.fromEntries(Object.entries(Vn).map(([e, t]) => [e, Hn(t)])), Wn
 		formType: "area-picker",
 		title: "Area"
 	}), "widgetFields.areaId")
-}, Kn = 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 qn() {
+function Oa() {
 	return o.string().optional().meta({
 		title: "Title",
 		description: "Optional display name override"
 	});
 }
-function Jn(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 Yn(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 Xn(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 Zn(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 Qn(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 $n(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 er(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,
@@ -1344,58 +2656,62 @@ function er(e, t) {
 		singleSelect: !0
 	}));
 }
-function tr(e) {
+function Ia(e) {
 	return o.string().optional().meta({
 		formType: "area-picker",
 		title: e?.title ?? "Area"
 	});
 }
-function nr(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 rr(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 ir(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 ar(e, t) {
+function Ba(e, t) {
 	let n = o.object(e);
-	return n.default(pt(n)).meta({ title: t.title });
+	return n.default(Gt(n)).meta({ title: t.title });
 }
-function or(e) {
+function Va(e) {
 	return e.def;
 }
-function $(e) {
+function Ha(e) {
 	if (o.globalRegistry.get(e)?.formType === "list") return !0;
-	let t = or(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 sr(e) {
-	let t = e, n = or(t).innerType;
-	for (; n;) t = n, n = or(t).innerType;
+function Ua(e) {
+	let t = e, n = Va(t).innerType;
+	for (; n;) t = n, n = Va(t).innerType;
 	return t;
 }
-function cr(e) {
-	let t = or(sr(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 = cr(n);
+			let t = Wa(n);
 			if (!t) return null;
 			e.push(t);
 		}
@@ -1407,7 +2723,7 @@ function cr(e) {
 	}
 	return null;
 }
-function lr(e, t, n) {
+function Ga(e, t, n) {
 	let r = { [t]: n };
 	try {
 		return e.parse(r);
@@ -1415,14 +2731,14 @@ function lr(e, t, n) {
 		return r;
 	}
 }
-function ur(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 > Kn) throw Error(`field.list: max ${t.max} exceeds the ceiling of ${Kn}`);
+	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 && !cr(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,
@@ -1430,7 +2746,7 @@ function ur(e, t) {
 		labelField: t.labelField
 	}));
 }
-function dr(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}"`);
@@ -1443,7 +2759,7 @@ function dr(e, t, n) {
 		...r,
 		[e]: o.literal(t)
 	})), a = o.discriminatedUnion(e, i), s = i[0];
-	return a.default(s ? lr(s, e, r) : {}).meta(Q({
+	return a.default(s ? Ga(s, e, r) : {}).meta($({
 		formType: "variants",
 		discriminator: e,
 		title: n.title,
@@ -1451,29 +2767,35 @@ function dr(e, t, n) {
 		labels: n.labels
 	}));
 }
-var fr = {
-	title: qn,
-	text: Jn,
-	number: Yn,
-	toggle: Xn,
-	choice: Zn,
-	choices: Qn,
-	entities: $n,
-	entity: er,
-	area: tr,
-	icon: nr,
-	image: rr,
-	stringList: ir,
-	group: ar,
-	list: ur,
-	variants: dr
+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 pr(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 mr(e) {
+function Za(e) {
 	if (e.length < 2) return "";
 	let t = e[0], n = e[1];
 	if (!t || !n) return "";
@@ -1500,14 +2822,14 @@ function mr(e) {
 }
 //#endregion
 //#region src/theme.ts
-function hr() {
+function Qa() {
 	return document.documentElement.classList.contains("dark");
 }
 //#endregion
 //#region src/version.ts
-var gr = {
+var $a = {
 	name: "@glasshome/widget-sdk",
-	version: "1.15.1",
+	version: "1.17.0",
 	description: "SDK for building GlassHome dashboard widgets with SolidJS",
 	keywords: [
 		"glasshome",
@@ -1566,12 +2888,12 @@ var gr = {
 		"typecheck:test": "tsc --noEmit -p tsconfig.test.json"
 	},
 	peerDependencies: {
-		"@glasshome/sync-layer": "0.8.1",
-		"@glasshome/ui": "1.14.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",
@@ -1582,7 +2904,7 @@ var gr = {
 		zod: "^4.1.13"
 	},
 	devDependencies: {
-		"@glasshome/ui": "1.14.0",
+		"@glasshome/ui": "1.20.0",
 		"@solidjs/testing-library": "^0.8.10",
 		"@types/bun": "^1.4.0",
 		"@types/node": "^25.2.2",
@@ -1603,4 +2925,4 @@ var gr = {
 	engines: { node: ">=18" }
 }.version;
 //#endregion
-export { xe as Badge, Se as Button, Ce as Carousel, we as CarouselContent, Te as CarouselDots, Ee as CarouselItem, De as CarouselNext, Oe as CarouselPrevious, ke as ColorSlider, Ae as ColorWheel, je as CountPill, Me as Icon, Ne as Input, Pe as Label, Fe as ResponsiveDialog, Ie as ResponsiveDialogBody, Re as ResponsiveDialogClose, ze as ResponsiveDialogContent, Be as ResponsiveDialogDescription, Ve as ResponsiveDialogFooter, Ue as ResponsiveDialogHeader, We as ResponsiveDialogTitle, gr as SDK_VERSION, Ge as SchemaForm, Ke as SectionIcon, qe as SectionTitle, Je as Select, Ye as SelectContent, Xe as SelectItem, Ze as SelectTrigger, Qe as SelectValue, $e as Slider, et as Switch, tt as Tabs, rt as TabsContent, at as TabsList, st as TabsTrigger, Wn as ToneSchema, H as Widget, Pt as WidgetContent, R as WidgetCtx, Sn as WidgetDialog, Rt as WidgetIcon, r as WidgetManifestSchema, xt as WidgetSizeCtx, Mt as WidgetSliderFill, Bt as WidgetStatus, Ut as WidgetTitle, tn as WidgetValue, g as byDomain, Wt as calculateLightGroup, Gt as calculateSensorGroup, Xt as countActiveEntities, pr as defineConfig, mt as defineWidget, t as deprecations, fr as field, n as formatDeprecation, i as formatSchemaError, Yt as getEntityAttribute, s as getForecasts, c as getStream, l as getWebRtcClientConfig, u as hassMediaUrl, lt as imageUrl, Ot as injectTokens, hr as isDark, Jt as isEntityActive, ut as mediaUrl, mr as monotoneCubicPath, dt as parseColor, d as sendWebRtcCandidate, f as startWebRtcSession, p as state, Un as svgColors, m as trackEntityHistory, h as untrackEntityHistory, _ as useArea, v as useCalendarEvents, ee as useCamera, y as useConnection, b as useCurrency, te as useEntities, ne as useEntity, re as useEntityHistory, ie as useEntityStatistics, ae as useForecast, oe as useHassConfig, Dn as useIntersectionPause, se as useLocale, On as useReducedMotion, _t as useService, x as useStore, S as useTemperatureUnit, bt as useToggle, yt as useTurnOff, vt as useTurnOn, w as useUnitSystem, ht as useWidgetContext, wn as useWidgetDashboard, kn as useWidgetDialog, St as useWidgetDimensions, An as useWidgetEntityGroup, Bn as useWidgetGestures, En as useWidgetViewer, Gn 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 };