@glasshome/widget-sdk 1.4.0 → 1.4.2

package/README.md

@@ -2,7 +2,7 @@
 
 SDK for building GlassHome dashboard widgets with SolidJS.
 
-Provides `defineWidget`, reactive entity bindings, framework components/hooks, a Vite plugin for widget development, and Tailwind v4 source paths — everything you need to build, preview, and ship dashboard widgets.
+Provides `defineWidget`, reactive entity bindings, framework components/hooks, a Vite plugin for widget development, and Tailwind v4 source paths — everything you need to build, preview, and ship widgets for [GlassHome](https://glasshome.app), the local-first dashboard for Home Assistant. Start with the [widget development guide](https://glasshome.app/docs/widget-development).
 
 ## Install
 

package/dist/index.js

@@ -2,10 +2,9 @@ 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 _, useCamera as v, useConnection as y, useCurrency as b, useEntities as x, useEntity as ee, useEntityHistory as S, useEntityStatistics as te, useForecast as ne, useHassConfig as re, useLocale as C, useService as ie, useStore as ae, useTemperatureUnit as oe, useToggle as se, useTurnOff as ce, useTurnOn as le, useUnitSystem as ue } from "@glasshome/sync-layer/solid";
-import { Show as w, createContext as de, createEffect as fe, createMemo as T, createSignal as E, on as pe, onCleanup as me, onMount as he, splitProps as ge, useContext as D } from "solid-js";
-import { addEventListener as O, className as k, createComponent as A, delegateEvents as _e, effect as j, insert as M, memo as N, setStyleProperty as P, style as F, template as I, use as ve } from "solid-js/web";
-import { createElementSize as ye } from "@solid-primitives/resize-observer";
+import { byDomain as g, useArea as _, useCamera as v, useConnection as ee, useCurrency as y, useEntities as b, useEntity as te, useEntityHistory as x, useEntityStatistics as ne, useForecast as re, useHassConfig as ie, useLocale as ae, useService as S, useStore as oe, useTemperatureUnit as se, useToggle as ce, useTurnOff as le, useTurnOn as ue, useUnitSystem as de } from "@glasshome/sync-layer/solid";
+import { Show as C, createContext as fe, createEffect as w, createMemo as T, createSignal as E, on as pe, onCleanup as D, onMount as me, splitProps as he, untrack as ge, useContext as O } from "solid-js";
+import { addEventListener as k, className as A, createComponent as j, delegateEvents as _e, effect as M, insert as N, memo as P, setStyleProperty as F, style as ve, template as I, use as ye } from "solid-js/web";
 import { clsx as be } from "clsx";
 import { twMerge as xe } from "tailwind-merge";
 //#region src/framework/to-form-schema.ts
@@ -32,9 +31,9 @@ function we(e) {
 }
 //#endregion
 //#region src/framework/hooks/use-widget-context.ts
-var L = de();
+var L = fe();
 function Te() {
-	let e = D(L);
+	let e = O(L);
 	if (!e) throw Error("useWidgetContext must be used within a Widget component");
 	return e;
 }
@@ -49,25 +48,25 @@ function R(e, t) {
 	return (n, r = {}) => e(Ee(n), t, r, { entity_id: n });
 }
 function De() {
-	let e = D(L)?.callService;
+	let e = O(L)?.callService;
 	return e ? {
 		callService: e,
 		turnOn: R(e, "turn_on"),
 		turnOff: R(e, "turn_off"),
 		toggle: R(e, "toggle")
-	} : ie();
+	} : S();
 }
 function Oe() {
-	let e = D(L)?.callService;
-	return e ? R(e, "turn_on") : le();
+	let e = O(L)?.callService;
+	return e ? R(e, "turn_on") : ue();
 }
 function ke() {
-	let e = D(L)?.callService;
-	return e ? R(e, "turn_off") : ce();
+	let e = O(L)?.callService;
+	return e ? R(e, "turn_off") : le();
 }
 function Ae() {
-	let e = D(L)?.callService;
-	return e ? R(e, "toggle") : se();
+	let e = O(L)?.callService;
+	return e ? R(e, "toggle") : ce();
 }
 //#endregion
 //#region src/framework/design-system/z-index.ts
@@ -197,13 +196,13 @@ var Re = /*#__PURE__*/ I("<div>");
 function ze(e) {
 	return (() => {
 		var t = Re();
-		return j((n) => {
+		return M((n) => {
 			var r = V("glasshome-widget-slider-fill pointer-events-none absolute inset-0", e.isDragging ? "duration-0" : "transition-all duration-300 ease-out", e.class), i = {
 				"--widget-fill-value": e.value,
 				"z-index": z.BACKGROUND,
 				...e.color ? { "--widget-icon-color": e.color } : {}
 			};
-			return r !== n.e && k(t, n.e = r), n.t = F(t, i, n.t), n;
+			return r !== n.e && A(t, n.e = r), n.t = ve(t, i, n.t), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -216,7 +215,7 @@ var Be = /*#__PURE__*/ I("<div>");
 function Ve(e) {
 	return (() => {
 		var t = Be();
-		return M(t, () => e.children), j(() => k(t, V("glasshome-widget-content", e.class))), t;
+		return N(t, () => e.children), M(() => A(t, V("glasshome-widget-content", e.class))), t;
 	})();
 }
 //#endregion
@@ -226,23 +225,23 @@ function Ge(e) {
 	let t = () => e.entityCount ?? 1;
 	return (() => {
 		var n = We(), r = n.firstChild;
-		return M(n, A(w, {
+		return N(n, j(C, {
 			get when() {
 				return t() >= 2;
 			},
 			get children() {
 				return He();
 			}
-		}), r), M(n, A(w, {
+		}), r), N(n, j(C, {
 			get when() {
 				return t() >= 3;
 			},
 			get children() {
 				return Ue();
 			}
-		}), r), M(r, () => e.icon), j((t) => {
+		}), r), N(r, () => e.icon), M((t) => {
 			var r = V("glasshome-widget-icon", "relative flex shrink-0 items-center justify-center pointer-events-none transition-all", e.dimmed && "opacity-50", e.class), i = e.color ? { "--widget-icon-color": e.color } : void 0;
-			return r !== t.e && k(n, t.e = r), t.t = F(n, i, t.t), t;
+			return r !== t.e && A(n, t.e = r), t.t = ve(n, i, t.t), t;
 		}, {
 			e: void 0,
 			t: void 0
@@ -255,12 +254,12 @@ var Ke = /*#__PURE__*/ I("<p>");
 function qe(e) {
 	return (() => {
 		var t = Ke();
-		return M(t, (() => {
-			var t = N(() => !!e.isUnavailable);
+		return N(t, (() => {
+			var t = P(() => !!e.isUnavailable);
 			return () => t() ? "Unavailable" : e.children;
-		})()), j((n) => {
+		})()), M((n) => {
 			var r = V("glasshome-widget-status", "relative", e.dimmed && "opacity-40", e.class), i = z.ACTIONS;
-			return r !== n.e && k(t, n.e = r), i !== n.t && P(t, "z-index", n.t = i), n;
+			return r !== n.e && A(t, n.e = r), i !== n.t && F(t, "z-index", n.t = i), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -273,17 +272,17 @@ var Je = /*#__PURE__*/ I("<span class=\"glasshome-widget-badge shrink-0\">"), Ye
 function Xe(e) {
 	return (() => {
 		var t = Ye(), n = t.firstChild;
-		return M(n, () => e.children), M(t, A(w, {
+		return N(n, () => e.children), N(t, j(C, {
 			get when() {
-				return N(() => e.badge !== void 0)() && e.badge > 0;
+				return P(() => e.badge !== void 0)() && e.badge > 0;
 			},
 			get children() {
 				var t = Je();
-				return M(t, () => e.badge), t;
+				return N(t, () => e.badge), t;
 			}
-		}), null), j((n) => {
+		}), null), M((n) => {
 			var r = V("relative flex items-center gap-2", e.class), i = z.ACTIONS;
-			return r !== n.e && k(t, n.e = r), i !== n.t && P(t, "z-index", n.t = i), n;
+			return r !== n.e && A(t, n.e = r), i !== n.t && F(t, "z-index", n.t = i), n;
 		}, {
 			e: void 0,
 			t: void 0
@@ -338,23 +337,23 @@ function Ze(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, y = Math.round(v / 255 * 100), b;
+	let v = c > 0 ? Math.round(s / c) : 0, ee = Math.round(v / 255 * 100), y;
 	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;
-		b = `rgb(${Math.round(e * r)}, ${Math.round(t * r)}, ${Math.round(n * r)})`;
-	} else b = $e(e[0]);
-	let x;
-	return x = m ? "All on" : h ? "All off" : r > 0 ? `${r} of ${u} on` : "Off", {
+		y = `rgb(${Math.round(e * r)}, ${Math.round(t * r)}, ${Math.round(n * r)})`;
+	} else y = $e(e[0]);
+	let b;
+	return b = m ? "All on" : h ? "All off" : r > 0 ? `${r} of ${u} on` : "Off", {
 		isGroup: n,
 		state: g,
 		isOn: _,
 		isUnavailable: g === "unavailable",
 		brightness: v,
-		brightnessPercent: y,
-		color: b,
+		brightnessPercent: ee,
+		color: y,
 		onCount: r,
 		totalCount: u,
-		description: x
+		description: b
 	};
 }
 function Qe(e, t = "mean", n = !0) {
@@ -512,67 +511,82 @@ var at = /*#__PURE__*/ I("<div class=glasshome-widget-subtitle>"), ot = /*#__PUR
 function st(e) {
 	return (() => {
 		var t = ot(), n = t.firstChild;
-		return M(n, () => rt(e.value, e.unit)), M(t, A(w, {
+		return N(n, () => rt(e.value, e.unit)), N(t, j(C, {
 			get when() {
-				return N(() => !!e.interpret)() && typeof e.value == "number";
+				return P(() => !!e.interpret)() && typeof e.value == "number";
 			},
 			get children() {
 				var t = at();
-				return M(t, () => it(e.value, e.unit)), t;
+				return N(t, () => it(e.value, e.unit)), t;
 			}
-		}), null), j(() => k(t, V("flex flex-col", e.class))), t;
+		}), null), M(() => A(t, V("flex flex-col", e.class))), t;
 	})();
 }
 //#endregion
 //#region src/framework/core/Widget.tsx
 var ct = /*#__PURE__*/ I("<div><div class=\"relative h-full w-full\">"), lt = /*#__PURE__*/ I("<div class=\"glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse\">"), ut = /*#__PURE__*/ I("<div class=\"flex h-full w-full flex-col items-center justify-center gap-2 text-center\">"), dt = /*#__PURE__*/ I("<div class=\"flex items-center justify-center text-white/30\">"), ft = /*#__PURE__*/ I("<h3 class=\"font-semibold text-sm text-white/60\">"), pt = /*#__PURE__*/ I("<p class=\"text-white/50 text-xs\">");
 function mt(e) {
-	let t = D(L), [n, r] = E(), i = ye(n);
-	he(() => {
+	let t = O(L), [n, r] = E(), [i, a] = E({
+		width: 0,
+		height: 0
+	});
+	w(() => {
+		let e = n();
+		if (!e) return;
+		let t = new ResizeObserver(([e]) => {
+			if (!e) return;
+			let t = e.borderBoxSize?.[0];
+			a(t ? {
+				width: t.inlineSize,
+				height: t.blockSize
+			} : {
+				width: e.contentRect.width,
+				height: e.contentRect.height
+			});
+		});
+		t.observe(e), D(() => t.disconnect());
+	}), me(() => {
 		let e = n()?.getRootNode();
 		Fe(typeof ShadowRoot < "u" && e instanceof ShadowRoot || typeof Document < "u" && e instanceof Document ? e : void 0);
 	});
-	let a = {
+	let o = {
 		isEditMode: () => e.isEditMode ?? !1,
 		updateConfig: t?.updateConfig ?? (() => {}),
 		registerDialogOpener: t?.registerDialogOpener,
 		callService: t?.callService,
-		dimensions: () => ({
-			width: i.width ?? 0,
-			height: i.height ?? 0
-		})
-	}, o = T(() => {
+		dimensions: () => i()
+	}, s = T(() => {
 		if (e.variant) return typeof e.variant == "string" ? Le(e.variant) : e.variant;
-	}), s = T(() => ({
+	}), c = T(() => ({
 		"container-type": "size",
 		"container-name": "widget",
 		"touch-action": e.gestures && !e.isEditMode ? e.gestures.touchAction() : void 0,
-		...o()?.styles?.container,
-		...o()?.styles?.cssVars || {},
+		...s()?.styles?.container,
+		...s()?.styles?.cssVars || {},
 		...e.tone ? { "--widget-color": `var(--tone-${e.tone})` } : {},
 		...e.color ? { "--widget-color": e.color } : {},
 		...e.colorTo ? { "--widget-color-to": e.colorTo } : {},
 		...e.gradient ? { "--widget-gradient": e.gradient } : {}
-	})), c = () => !!e.gestures && !e.isEditMode, l = (t) => {
-		c() && e.gestures?.onPointerEnter(t);
-	}, u = (t) => {
-		c() && e.gestures?.onPointerDown(t);
+	})), l = () => !!e.gestures && !e.isEditMode, u = (t) => {
+		l() && e.gestures?.onPointerEnter(t);
 	}, d = (t) => {
-		c() && e.gestures?.onPointerMove(t);
+		l() && e.gestures?.onPointerDown(t);
 	}, f = (t) => {
-		c() && e.gestures?.onPointerUp(t);
+		l() && e.gestures?.onPointerMove(t);
 	}, p = (t) => {
-		c() && e.gestures?.onPointerCancel(t);
+		l() && e.gestures?.onPointerUp(t);
+	}, m = (t) => {
+		l() && e.gestures?.onPointerCancel(t);
 	};
-	return A(L.Provider, {
-		value: a,
+	return j(L.Provider, {
+		value: o,
 		get children() {
 			var t = ct(), n = t.firstChild;
-			return O(t, "pointercancel", p), O(t, "pointerup", f), O(t, "pointermove", d), O(t, "pointerdown", u), O(t, "pointerenter", l), ve((t) => {
+			return k(t, "pointercancel", m), k(t, "pointerup", p), k(t, "pointermove", f), k(t, "pointerdown", d), k(t, "pointerenter", u), ye((t) => {
 				r(t), e.gestures?.bindElement(t);
-			}, t), M(n, (() => {
-				var t = N(() => !!e.emptyState);
-				return () => t() ? A(ht, {
+			}, t), N(n, (() => {
+				var t = P(() => !!e.emptyState);
+				return () => t() ? j(ht, {
 					get icon() {
 						return e.emptyState.icon;
 					},
@@ -583,15 +597,15 @@ function mt(e) {
 						return e.emptyState.message;
 					}
 				}) : e.children;
-			})()), M(t, (() => {
-				var t = N(() => !!e.loading);
+			})()), N(t, (() => {
+				var t = P(() => !!e.loading);
 				return () => t() && (() => {
 					var e = lt();
-					return j((t) => P(e, "z-index", z.OVERLAY)), e;
+					return M((t) => F(e, "z-index", z.OVERLAY)), e;
 				})();
-			})(), null), j((r) => {
-				var i = V("glasshome-widget", "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50", o()?.styles?.class, e.class), a = s(), c = z.CONTENT;
-				return i !== r.e && k(t, r.e = i), r.t = F(t, a, r.t), c !== r.a && P(n, "z-index", r.a = c), r;
+			})(), null), M((r) => {
+				var i = V("glasshome-widget", "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50", s()?.styles?.class, e.class), a = c(), o = z.CONTENT;
+				return i !== r.e && A(t, r.e = i), r.t = ve(t, a, r.t), o !== r.a && F(n, "z-index", r.a = o), r;
 			}, {
 				e: void 0,
 				t: void 0,
@@ -603,23 +617,23 @@ function mt(e) {
 function ht(e) {
 	return (() => {
 		var t = ut();
-		return M(t, (() => {
-			var t = N(() => !!e.icon);
+		return N(t, (() => {
+			var t = P(() => !!e.icon);
 			return () => t() && (() => {
 				var t = dt();
-				return M(t, () => e.icon), t;
+				return N(t, () => e.icon), t;
 			})();
-		})(), null), M(t, (() => {
-			var t = N(() => !!e.title);
+		})(), null), N(t, (() => {
+			var t = P(() => !!e.title);
 			return () => t() && (() => {
 				var t = ft();
-				return M(t, () => e.title), t;
+				return N(t, () => e.title), t;
 			})();
-		})(), null), M(t, (() => {
-			var t = N(() => !!e.message);
+		})(), null), N(t, (() => {
+			var t = P(() => !!e.message);
 			return () => t() && (() => {
 				var t = pt();
-				return M(t, () => e.message), t;
+				return N(t, () => e.message), t;
 			})();
 		})(), null), t;
 	})();
@@ -632,22 +646,22 @@ var gt = /*#__PURE__*/ I("<span class=\"inline-flex size-3.5 shrink-0 items-cent
 function Ot(e) {
 	return (() => {
 		var t = _t();
-		return t.$$click = () => e.onClick(), M(t, A(w, {
+		return t.$$click = () => e.onClick(), N(t, j(C, {
 			get when() {
 				return e.isActive;
 			},
 			get children() {
 				var t = gt();
-				return M(t, () => e.icon), t;
+				return N(t, () => e.icon), t;
 			}
-		}), null), M(t, () => e.label, null), j(() => k(t, V("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", e.isActive ? "gap-1.5 bg-foreground/10 font-semibold text-foreground shadow-sm" : "gap-0 text-muted-foreground hover:bg-foreground/5 hover:text-foreground"))), t;
+		}), null), N(t, () => e.label, null), M(() => A(t, V("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", e.isActive ? "gap-1.5 bg-foreground/10 font-semibold text-foreground shadow-sm" : "gap-0 text-muted-foreground hover:bg-foreground/5 hover:text-foreground"))), t;
 	})();
 }
 function kt(e) {
-	let [t] = ge(e, /* @__PURE__ */ "open.onOpenChange.title.onSave.hasUnsavedChanges.onDelete.editContent.controlsContent.debugContent.debugData.tabs.class.maxWidth.defaultTab.activeTab.onActiveTabChange.headerActions.configSchema.config.onConfigSave.ResponsiveDialog.ResponsiveDialogContent.ResponsiveDialogHeader.ResponsiveDialogTitle.ResponsiveDialogDescription.Button.SchemaForm".split(".")), n = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, i] = E({}), [a, o] = E(null);
-	fe(pe(() => t.config, (e) => {
+	let [t] = he(e, /* @__PURE__ */ "open.onOpenChange.title.onSave.hasUnsavedChanges.onDelete.editContent.controlsContent.debugContent.debugData.tabs.class.maxWidth.defaultTab.activeTab.onActiveTabChange.headerActions.configSchema.config.onConfigSave.ResponsiveDialog.ResponsiveDialogContent.ResponsiveDialogHeader.ResponsiveDialogTitle.ResponsiveDialogDescription.Button.SchemaForm".split(".")), n = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, i] = E({}), [a, o] = E(null);
+	w(pe(() => t.config, (e) => {
 		e && i({ ...e });
-	})), fe(pe(() => t.configSchema, (e) => {
+	})), w(pe(() => t.configSchema, (e) => {
 		e && o(Se(e));
 	}));
 	let s = () => n() && JSON.stringify(r()) !== JSON.stringify(t.config), c = (e) => {
@@ -671,12 +685,12 @@ function kt(e) {
 			id: "edit",
 			label: "Edit",
 			icon: vt(),
-			content: t.editContent ?? (n() && a() ? A(te, {
+			content: t.editContent ?? (n() && a() ? j(ne, {
 				get schema() {
 					return a();
 				},
 				get data() {
-					return r();
+					return ge(r);
 				},
 				onChange: i
 			}) : yt())
@@ -697,38 +711,43 @@ function kt(e) {
 			await navigator.clipboard.writeText(e);
 		} catch {}
 	}, _ = () => {
-		let e = h();
+		let e = re();
 		return e.find((e) => e.id === f())?.content ?? e[0]?.content;
-	}, v = t.ResponsiveDialog, y = t.ResponsiveDialogContent, b = t.ResponsiveDialogHeader, x = t.ResponsiveDialogTitle, ee = t.ResponsiveDialogDescription, S = t.Button, te = t.SchemaForm, ne = (e) => n() ? c(e) : t.onOpenChange(e), re = () => n() ? s() : t.hasUnsavedChanges, C = () => n() ? l : t.onSave;
-	return A(v, {
+	}, v = t.ResponsiveDialog, ee = t.ResponsiveDialogContent, y = t.ResponsiveDialogHeader, b = t.ResponsiveDialogTitle, te = t.ResponsiveDialogDescription, x = t.Button, ne = t.SchemaForm, re = T(pe([
+		() => t.open,
+		a,
+		() => t.config,
+		() => t.tabs
+	], () => h())), ie = (e) => n() ? c(e) : t.onOpenChange(e), ae = () => n() ? s() : t.hasUnsavedChanges, S = () => n() ? l : t.onSave;
+	return j(v, {
 		get open() {
 			return t.open;
 		},
-		onOpenChange: (e) => ne(e),
+		onOpenChange: (e) => ie(e),
 		get children() {
-			return A(y, {
+			return j(ee, {
 				get class() {
 					return V(m(), t.class);
 				},
 				get children() {
 					return [
-						A(b, {
+						j(y, {
 							class: "flex flex-row items-center justify-between gap-3",
 							get children() {
 								return [(() => {
 									var e = wt();
-									return M(e, A(x, {
+									return N(e, j(b, {
 										class: "truncate leading-tight",
 										get children() {
 											return t.title;
 										}
-									}), null), M(e, A(ee, {
+									}), null), N(e, j(te, {
 										class: "sr-only",
 										children: "Widget configuration dialog"
 									}), null), e;
 								})(), (() => {
 									var e = Tt(), n = e.firstChild;
-									return M(n, () => h().map((e) => A(Ot, {
+									return N(n, () => re().map((e) => j(Ot, {
 										get icon() {
 											return e.icon;
 										},
@@ -739,7 +758,7 @@ function kt(e) {
 											return f() === e.id;
 										},
 										onClick: () => p(e.id)
-									}))), M(e, A(w, {
+									}))), N(e, j(C, {
 										get when() {
 											return t.headerActions;
 										},
@@ -752,46 +771,46 @@ function kt(e) {
 						}),
 						(() => {
 							var e = Et();
-							return M(e, _), e;
+							return N(e, _), e;
 						})(),
-						A(w, {
+						j(C, {
 							get when() {
-								return N(() => f() === "edit")() && (C() || t.onDelete) || f() === "debug" && t.debugData !== void 0;
+								return P(() => f() === "edit")() && (S() || t.onDelete) || f() === "debug" && t.debugData !== void 0;
 							},
 							get children() {
 								var e = Dt();
-								return M(e, A(w, {
+								return N(e, j(C, {
 									get when() {
-										return N(() => f() === "edit")() && t.onDelete;
+										return P(() => f() === "edit")() && t.onDelete;
 									},
 									get children() {
-										return A(S, {
+										return j(x, {
 											size: "sm",
 											variant: "destructive",
 											onClick: () => t.onDelete?.(),
 											children: "Delete"
 										});
 									}
-								}), null), M(e, A(w, {
+								}), null), N(e, j(C, {
 									get when() {
-										return N(() => f() === "edit")() && C();
+										return P(() => f() === "edit")() && S();
 									},
 									get children() {
-										return A(S, {
+										return j(x, {
 											size: "sm",
 											get disabled() {
-												return !re();
+												return !ae();
 											},
-											onClick: () => C()?.(),
+											onClick: () => S()?.(),
 											children: "Save"
 										});
 									}
-								}), null), M(e, A(w, {
+								}), null), N(e, j(C, {
 									get when() {
-										return N(() => f() === "debug")() && t.debugData !== void 0;
+										return P(() => f() === "debug")() && t.debugData !== void 0;
 									},
 									get children() {
-										return A(S, {
+										return j(x, {
 											size: "sm",
 											variant: "outline",
 											onClick: g,
@@ -816,25 +835,25 @@ function At(e) {
 		let t = e[0];
 		t && n(!t.isIntersecting);
 	});
-	return fe(() => {
+	return w(() => {
 		let t = e();
 		r.disconnect(), t && r.observe(t);
-	}), me(() => r.disconnect()), t;
+	}), D(() => r.disconnect()), t;
 }
 //#endregion
 //#region src/framework/hooks/use-reduced-motion.ts
 function jt() {
 	if (typeof window > "u" || typeof window.matchMedia != "function") return () => !1;
 	let e = window.matchMedia("(prefers-reduced-motion: reduce)"), [t, n] = E(e.matches), r = (e) => n(e.matches);
-	return e.addEventListener("change", r), me(() => e.removeEventListener("change", r)), t;
+	return e.addEventListener("change", r), D(() => e.removeEventListener("change", r)), t;
 }
 //#endregion
 //#region src/framework/hooks/use-widget-dialog.ts
 function Mt(e = "controls") {
 	let [t, n] = E(!1), [r, i] = E(e), a = (t) => {
 		i(t ?? e), n(!0);
-	}, o = D(L);
-	return o?.registerDialogOpener?.(a), me(() => o?.registerDialogOpener?.(null)), {
+	}, o = O(L);
+	return o?.registerDialogOpener?.(a), D(() => o?.registerDialogOpener?.(null)), {
 		showDialog: t,
 		setShowDialog: n,
 		openDialog: a,
@@ -1298,7 +1317,7 @@ function cn() {
 //#region src/version.ts
 var ln = {
 	name: "@glasshome/widget-sdk",
-	version: "1.4.0",
+	version: "1.4.2",
 	description: "SDK for building GlassHome dashboard widgets with SolidJS",
 	keywords: [
 		"glasshome",
@@ -1350,13 +1369,12 @@ var ln = {
 		"typecheck:test": "tsc --noEmit -p tsconfig.test.json"
 	},
 	peerDependencies: {
-		"@glasshome/sync-layer": "0.3.0",
+		"@glasshome/sync-layer": "0.3.1",
 		"solid-js": "^1.9.11"
 	},
 	dependencies: {
 		"@glasshome/widget-contract": "0.1.0",
 		"@modular-forms/solid": "^0.25.1",
-		"@solid-primitives/resize-observer": "^2.1.5",
 		clsx: "^2.1.1",
 		"tailwind-merge": "^3.5.0",
 		zod: "^4.1.13",
@@ -1382,4 +1400,4 @@ var ln = {
 	engines: { node: ">=18" }
 }.version;
 //#endregion
-export { ln as SDK_VERSION, Kt as ToneSchema, H as Widget, Ve as WidgetContent, L as WidgetCtx, kt as WidgetDialog, Ge as WidgetIcon, r as WidgetManifestSchema, ze as WidgetSliderFill, qe as WidgetStatus, Xe as WidgetTitle, st as WidgetValue, g as byDomain, Ze as calculateLightGroup, Qe as calculateSensorGroup, nt as countActiveEntities, on as defineConfig, we as defineWidget, t as deprecations, an as field, n as formatDeprecation, i as formatSchemaError, tt as getEntityAttribute, s as getForecasts, c as getStream, l as getWebRtcClientConfig, u as hassMediaUrl, Fe as injectTokens, cn as isDark, et as isEntityActive, sn as monotoneCubicPath, d as sendWebRtcCandidate, f as startWebRtcSession, p as state, Gt as svgColors, m as trackEntityHistory, h as untrackEntityHistory, _ as useArea, v as useCamera, y as useConnection, b as useCurrency, x as useEntities, ee as useEntity, S as useEntityHistory, te as useEntityStatistics, ne as useForecast, re as useHassConfig, At as useIntersectionPause, C as useLocale, jt as useReducedMotion, De as useService, ae as useStore, oe as useTemperatureUnit, Ae as useToggle, ke as useTurnOff, Oe as useTurnOn, ue as useUnitSystem, Te as useWidgetContext, Mt as useWidgetDialog, Nt as useWidgetEntityGroup, Ht as useWidgetGestures, qt as widgetFields, a as z };
+export { ln as SDK_VERSION, Kt as ToneSchema, H as Widget, Ve as WidgetContent, L as WidgetCtx, kt as WidgetDialog, Ge as WidgetIcon, r as WidgetManifestSchema, ze as WidgetSliderFill, qe as WidgetStatus, Xe as WidgetTitle, st as WidgetValue, g as byDomain, Ze as calculateLightGroup, Qe as calculateSensorGroup, nt as countActiveEntities, on as defineConfig, we as defineWidget, t as deprecations, an as field, n as formatDeprecation, i as formatSchemaError, tt as getEntityAttribute, s as getForecasts, c as getStream, l as getWebRtcClientConfig, u as hassMediaUrl, Fe as injectTokens, cn as isDark, et as isEntityActive, sn as monotoneCubicPath, d as sendWebRtcCandidate, f as startWebRtcSession, p as state, Gt as svgColors, m as trackEntityHistory, h as untrackEntityHistory, _ as useArea, v as useCamera, ee as useConnection, y as useCurrency, b as useEntities, te as useEntity, x as useEntityHistory, ne as useEntityStatistics, re as useForecast, ie as useHassConfig, At as useIntersectionPause, ae as useLocale, jt as useReducedMotion, De as useService, oe as useStore, se as useTemperatureUnit, Ae as useToggle, ke as useTurnOff, Oe as useTurnOn, de as useUnitSystem, Te as useWidgetContext, Mt as useWidgetDialog, Nt as useWidgetEntityGroup, Ht as useWidgetGestures, qt as widgetFields, a as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-sdk",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "SDK for building GlassHome dashboard widgets with SolidJS",
   "keywords": [
     "glasshome",
@@ -52,13 +52,12 @@
     "typecheck:test": "tsc --noEmit -p tsconfig.test.json"
   },
   "peerDependencies": {
-    "@glasshome/sync-layer": "0.3.0",
+    "@glasshome/sync-layer": "0.3.1",
     "solid-js": "^1.9.11"
   },
   "dependencies": {
     "@glasshome/widget-contract": "0.1.0",
     "@modular-forms/solid": "^0.25.1",
-    "@solid-primitives/resize-observer": "^2.1.5",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.1.13",