@glasshome/widget-sdk 1.1.1 → 1.2.0

package/dist/framework/fields.d.ts

@@ -8,9 +8,13 @@ export declare const widgetFields: {
     /** Optional display name override (renders as text input) */
     title: () => z.ZodOptional<z.ZodString>;
     /** Multi-select entity picker for a HA domain */
-    entityIds: (domain: string) => z.ZodDefault<z.ZodArray<z.ZodString>>;
+    entityIds: (domain: string, options?: {
+        deviceClass?: string;
+    }) => z.ZodDefault<z.ZodArray<z.ZodString>>;
     /** Single-select entity picker for a HA domain */
-    singleEntity: (domain: string) => z.ZodDefault<z.ZodArray<z.ZodString>>;
+    singleEntity: (domain: string, options?: {
+        deviceClass?: string;
+    }) => z.ZodDefault<z.ZodArray<z.ZodString>>;
     /** Area picker dropdown */
     areaId: () => z.ZodOptional<z.ZodString>;
 };

package/dist/index.js

@@ -1,12 +1,12 @@
 import { z as A } from "zod";
 import { widgetManifestSchema as xn, formatSchemaError as yn } from "@glasshome/widget-contract";
-import { effect as W, className as I, style as le, template as x, insert as p, createComponent as k, memo as T, setStyleProperty as ee, addEventListener as K, use as Se, delegateEvents as Ce } from "solid-js/web";
+import { effect as W, className as I, style as le, template as x, insert as p, createComponent as k, memo as T, setStyleProperty as ee, addEventListener as K, use as Ce, delegateEvents as Se } from "solid-js/web";
 import { createElementSize as Me } from "@solid-primitives/resize-observer";
 import { createContext as De, useContext as B, Show as E, createSignal as V, onMount as Te, createMemo as j, splitProps as _e, createEffect as se, on as ge, onCleanup as ce } from "solid-js";
 import { clsx as Oe } from "clsx";
 import { twMerge as ze } from "tailwind-merge";
 import { useService as Ee, useToggle as Ne, useTurnOff as Ae, useTurnOn as Ve } from "@glasshome/sync-layer/solid";
-import { byDomain as kn, useArea as Sn, useCamera as Cn, useConnection as Mn, useCurrency as Dn, useEntities as Tn, useEntity as _n, useEntityHistory as On, useEntityStatistics as zn, useForecast as En, useHassConfig as Nn, useLocale as An, useStore as Vn, useTemperatureUnit as Wn, useUnitSystem as Rn } from "@glasshome/sync-layer/solid";
+import { byDomain as kn, useArea as Cn, useCamera as Sn, useConnection as Mn, useCurrency as Dn, useEntities as Tn, useEntity as _n, useEntityHistory as On, useEntityStatistics as zn, useForecast as En, useHassConfig as Nn, useLocale as An, useStore as Vn, useTemperatureUnit as Wn, useUnitSystem as Rn } from "@glasshome/sync-layer/solid";
 import { getForecasts as Pn, getStream as In, getWebRtcClientConfig as Ln, sendWebRtcCandidate as Un, startWebRtcSession as jn, state as Bn, trackEntityHistory as Fn, untrackEntityHistory as Gn } from "@glasshome/sync-layer";
 function me(e) {
   return A.toJSONSchema(e, {
@@ -472,14 +472,14 @@ function rt(e, t = !1) {
     };
   const i = e.length > 1;
   if (!i) {
-    const s = e[0], f = s.state === "on", b = s.attributes?.brightness || 0, S = Math.round(b / 255 * 100);
+    const s = e[0], f = s.state === "on", b = s.attributes?.brightness || 0, C = Math.round(b / 255 * 100);
     return {
       isGroup: !1,
       state: s.state,
       isOn: f,
       isUnavailable: s.state === "unavailable",
       brightness: b,
-      brightnessPercent: S,
+      brightnessPercent: C,
       color: fe(s),
       onCount: f ? 1 : 0,
       totalCount: 1,
@@ -503,18 +503,18 @@ function rt(e, t = !1) {
         u++;
         break;
     }
-  const h = e.length, v = u === h, y = o + u === h, g = r > 0, a = r === h, C = n === h;
+  const h = e.length, v = u === h, y = o + u === h, g = r > 0, a = r === h, S = n === h;
   let w, M;
   t ? v ? (w = "unavailable", M = !1) : o > 0 || u > 0 ? (w = "unknown", M = !1) : n > 0 ? (w = "off", M = !1) : (w = "on", M = !0) : v ? (w = "unavailable", M = !1) : y ? (w = "unknown", M = !1) : g ? (w = "on", M = !0) : (w = "off", M = !1);
   const O = $ > 0 ? Math.round(d / $) : 0, L = Math.round(O / 255 * 100);
   let F;
   if (m.length > 0) {
-    const s = Math.round(m.reduce((z, D) => z + D[0], 0) / m.length), f = Math.round(m.reduce((z, D) => z + D[1], 0) / m.length), b = Math.round(m.reduce((z, D) => z + D[2], 0) / m.length), S = O / 255;
-    F = `rgb(${Math.round(s * S)}, ${Math.round(f * S)}, ${Math.round(b * S)})`;
+    const s = Math.round(m.reduce((z, D) => z + D[0], 0) / m.length), f = Math.round(m.reduce((z, D) => z + D[1], 0) / m.length), b = Math.round(m.reduce((z, D) => z + D[2], 0) / m.length), C = O / 255;
+    F = `rgb(${Math.round(s * C)}, ${Math.round(f * C)}, ${Math.round(b * C)})`;
   } else
     F = fe(e[0]);
   let H;
-  return a ? H = "All on" : C ? H = "All off" : r > 0 ? H = `${r} of ${h} on` : H = "Off", {
+  return a ? H = "All on" : S ? H = "All off" : r > 0 ? H = `${r} of ${h} on` : H = "Off", {
     isGroup: i,
     state: w,
     isOn: M,
@@ -539,14 +539,14 @@ function ot(e, t = "mean", i = !0) {
   const r = e.length > 1;
   if (!r) {
     const g = e[0], a = Number.parseFloat(g.state);
-    let C = g.state;
-    return Number.isNaN(a) || (C = Number.isInteger(a) ? a.toString() : a.toFixed(1)), {
+    let S = g.state;
+    return Number.isNaN(a) || (S = Number.isInteger(a) ? a.toString() : a.toFixed(1)), {
       isGroup: !1,
-      state: C,
+      state: S,
       numericValue: Number.isNaN(a) ? null : a,
       isUnavailable: g.state === "unavailable",
       unit: g.unitOfMeasurement ?? void 0,
-      description: C
+      description: S
     };
   }
   const n = [], o = [];
@@ -594,7 +594,7 @@ function ot(e, t = "mean", i = !0) {
       h = n.reduce((g, a) => g + a, 0) / n.length, v = "Average";
       break;
     case "median": {
-      const g = [...n].sort((C, w) => C - w), a = Math.floor(g.length / 2);
+      const g = [...n].sort((S, w) => S - w), a = Math.floor(g.length / 2);
       h = g.length % 2 === 0 ? (g[a - 1] + g[a]) / 2 : g[a], v = "Median";
       break;
     }
@@ -611,7 +611,7 @@ function ot(e, t = "mean", i = !0) {
       h = n.reduce((g, a) => g * a, 1), v = "Product";
       break;
     case "std_dev": {
-      const g = n.reduce((C, w) => C + w, 0) / n.length, a = n.reduce((C, w) => C + (w - g) ** 2, 0) / n.length;
+      const g = n.reduce((S, w) => S + w, 0) / n.length, a = n.reduce((S, w) => S + (w - g) ** 2, 0) / n.length;
       h = Math.sqrt(a), v = "Std Dev";
       break;
     }
@@ -740,10 +740,10 @@ function pt(e) {
   return k(P.Provider, {
     value: o,
     get children() {
-      var a = gt(), C = a.firstChild;
-      return K(a, "pointercancel", g), K(a, "pointerup", y), K(a, "pointermove", v), K(a, "pointerdown", h), K(a, "pointerenter", m), Se((w) => {
+      var a = gt(), S = a.firstChild;
+      return K(a, "pointercancel", g), K(a, "pointerup", y), K(a, "pointermove", v), K(a, "pointerdown", h), K(a, "pointerenter", m), Ce((w) => {
         r(w), e.gestures?.bindElement(w);
-      }, a), p(C, (() => {
+      }, a), p(S, (() => {
         var w = T(() => !!e.emptyState);
         return () => w() ? k(bt, {
           get icon() {
@@ -764,7 +764,7 @@ function pt(e) {
         })();
       })(), null), W((w) => {
         var M = R("glasshome-widget", "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50", u()?.styles?.class, e.class), O = d(), L = J.CONTENT;
-        return M !== w.e && I(a, w.e = M), w.t = le(a, O, w.t), L !== w.a && ee(C, "z-index", w.a = L), w;
+        return M !== w.e && I(a, w.e = M), w.t = le(a, O, w.t), L !== w.a && ee(S, "z-index", w.a = L), w;
       }, {
         e: void 0,
         t: void 0,
@@ -804,7 +804,7 @@ q.Title = it;
 q.Status = et;
 q.Value = ut;
 q.SliderFill = Ge;
-var xt = /* @__PURE__ */ x('<span class="inline-flex size-3.5 shrink-0 items-center">'), yt = /* @__PURE__ */ x("<button type=button>"), $t = /* @__PURE__ */ x('<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">'), kt = /* @__PURE__ */ x('<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'), St = /* @__PURE__ */ x('<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>'), Ct = /* @__PURE__ */ x('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), Mt = /* @__PURE__ */ x('<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">'), Dt = /* @__PURE__ */ x('<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'), Tt = /* @__PURE__ */ x('<div class="min-w-0 shrink-0">'), _t = /* @__PURE__ */ x('<div class="flex items-center gap-2"><div class="flex h-8 items-center rounded-lg border border-border/50 bg-muted/30 p-0.5">'), Ot = /* @__PURE__ */ x('<div class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">'), zt = /* @__PURE__ */ x('<div class="flex shrink-0 items-center justify-end gap-2 border-border/50 border-t pt-3">');
+var xt = /* @__PURE__ */ x('<span class="inline-flex size-3.5 shrink-0 items-center">'), yt = /* @__PURE__ */ x("<button type=button>"), $t = /* @__PURE__ */ x('<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">'), kt = /* @__PURE__ */ x('<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'), Ct = /* @__PURE__ */ x('<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>'), St = /* @__PURE__ */ x('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), Mt = /* @__PURE__ */ x('<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">'), Dt = /* @__PURE__ */ x('<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'), Tt = /* @__PURE__ */ x('<div class="min-w-0 shrink-0">'), _t = /* @__PURE__ */ x('<div class="flex items-center gap-2"><div class="flex h-8 items-center rounded-lg border border-border/50 bg-muted/30 p-0.5">'), Ot = /* @__PURE__ */ x('<div class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">'), zt = /* @__PURE__ */ x('<div class="flex shrink-0 items-center justify-end gap-2 border-border/50 border-t pt-3">');
 function Et(e) {
   return (() => {
     var t = yt();
@@ -847,7 +847,7 @@ function an(e) {
       "3xl": "max-w-3xl",
       "4xl": "max-w-4xl"
     }[c];
-  }, C = () => {
+  }, S = () => {
     if (t.tabs) return t.tabs;
     const c = [];
     return c.push({
@@ -866,8 +866,8 @@ function an(e) {
     }), c.push({
       id: "controls",
       label: "Controls",
-      icon: St(),
-      content: t.controlsContent ?? Ct()
+      icon: Ct(),
+      content: t.controlsContent ?? St()
     }), c.push({
       id: "debug",
       label: "Debug",
@@ -882,14 +882,14 @@ function an(e) {
       } catch {
       }
   }, M = () => {
-    const c = C();
+    const c = S();
     return c.find((N) => N.id === y())?.content ?? c[0]?.content;
-  }, O = t.ResponsiveDialog, L = t.ResponsiveDialogContent, F = t.ResponsiveDialogHeader, H = t.ResponsiveDialogTitle, s = t.ResponsiveDialogDescription, f = t.Button, b = t.SchemaForm, S = (c) => i() ? $(c) : t.onOpenChange(c), z = () => i() ? d() : t.hasUnsavedChanges, D = () => i() ? m : t.onSave;
+  }, O = t.ResponsiveDialog, L = t.ResponsiveDialogContent, F = t.ResponsiveDialogHeader, H = t.ResponsiveDialogTitle, s = t.ResponsiveDialogDescription, f = t.Button, b = t.SchemaForm, C = (c) => i() ? $(c) : t.onOpenChange(c), z = () => i() ? d() : t.hasUnsavedChanges, D = () => i() ? m : t.onSave;
   return k(O, {
     get open() {
       return t.open;
     },
-    onOpenChange: (c) => S(c),
+    onOpenChange: (c) => C(c),
     get children() {
       return k(L, {
         get class() {
@@ -912,7 +912,7 @@ function an(e) {
                 }), null), c;
               })(), (() => {
                 var c = _t(), Y = c.firstChild;
-                return p(Y, () => C().map((N) => k(Et, {
+                return p(Y, () => S().map((N) => k(Et, {
                   get icon() {
                     return N.icon;
                   },
@@ -988,7 +988,7 @@ function an(e) {
     }
   });
 }
-Ce(["click"]);
+Se(["click"]);
 function sn(e) {
   if (typeof IntersectionObserver > "u")
     return () => !1;
@@ -1186,8 +1186,8 @@ function un(e, t) {
     s !== u && (d && d.disconnect(), d = new ResizeObserver((f) => {
       const b = f[0];
       if (b) {
-        const S = b.borderBoxSize?.[0];
-        S ? o = { width: S.inlineSize, height: S.blockSize } : o = { width: b.contentRect.width, height: b.contentRect.height }, m(o.height > o.width);
+        const C = b.borderBoxSize?.[0];
+        C ? o = { width: C.inlineSize, height: C.blockSize } : o = { width: b.contentRect.width, height: b.contentRect.height }, m(o.height > o.width);
       }
     }), u = s, d.observe(s), o = { width: s.clientWidth, height: s.clientHeight }, m(o.height > o.width));
   }
@@ -1213,22 +1213,22 @@ function un(e, t) {
         } catch {
         }
     }
-  }, C = (s) => {
+  }, S = (s) => {
     if (!n.isDown) return;
-    const f = e(), b = s.clientX - n.startX, S = s.clientY - n.startY;
-    if (Math.sqrt(b * b + S * S) > 10 && (v(), n.hasMoved = !0), f.slide && n.hasMoved) {
+    const f = e(), b = s.clientX - n.startX, C = s.clientY - n.startY;
+    if (Math.sqrt(b * b + C * C) > 10 && (v(), n.hasMoved = !0), f.slide && n.hasMoved) {
       const D = s.currentTarget, c = g(D);
       if (n.isTouch && !n.sliding) {
-        const $e = Math.abs(c === "vertical" ? S : b), ke = Math.abs(c === "vertical" ? b : S);
+        const $e = Math.abs(c === "vertical" ? C : b), ke = Math.abs(c === "vertical" ? b : C);
         if ($e < ke) return;
       }
       n.sliding = !0;
-      const Y = f.slide.min ?? 0, N = f.slide.max ?? 100, we = N - Y, pe = c === "vertical" ? -S : b, ue = o ?? { width: D.clientWidth, height: D.clientHeight }, be = c === "vertical" ? ue.height : ue.width, xe = pe / be * we, ye = Math.max(Y, Math.min(N, f.slide.value + xe));
+      const Y = f.slide.min ?? 0, N = f.slide.max ?? 100, we = N - Y, pe = c === "vertical" ? -C : b, ue = o ?? { width: D.clientWidth, height: D.clientHeight }, be = c === "vertical" ? ue.height : ue.width, xe = pe / be * we, ye = Math.max(Y, Math.min(N, f.slide.value + xe));
       f.slide.onChange(Math.round(ye)), n.startX = s.clientX, n.startY = s.clientY, s.preventDefault();
     }
   }, w = (s) => {
-    const f = e(), b = n.isDown, S = Date.now() - n.startTime, z = f.hold?.delay ?? 300;
-    v(), b && f.tap && !n.hasMoved && S < z && f.tap();
+    const f = e(), b = n.isDown, C = Date.now() - n.startTime, z = f.hold?.delay ?? 300;
+    v(), b && f.tap && !n.hasMoved && C < z && f.tap();
     try {
       s.currentTarget.releasePointerCapture(s.pointerId);
     } catch {
@@ -1251,7 +1251,7 @@ function un(e, t) {
   };
   return {
     onPointerDown: a,
-    onPointerMove: C,
+    onPointerMove: S,
     onPointerUp: w,
     onPointerCancel: M,
     onPointerEnter: (s) => {
@@ -1304,9 +1304,18 @@ const gn = Object.fromEntries(
   /** Optional display name override (renders as text input) */
   title: () => A.string().optional().meta({ title: "Title", description: "Optional display name override" }),
   /** Multi-select entity picker for a HA domain */
-  entityIds: (e) => A.array(A.string()).default([]).meta({ domain: e, title: "Entities" }),
+  entityIds: (e, t) => A.array(A.string()).default([]).meta({
+    domain: e,
+    title: "Entities",
+    ...t?.deviceClass ? { deviceClass: t.deviceClass } : {}
+  }),
   /** Single-select entity picker for a HA domain */
-  singleEntity: (e) => A.array(A.string()).default([]).meta({ domain: e, title: "Entity", singleSelect: !0 }),
+  singleEntity: (e, t) => A.array(A.string()).default([]).meta({
+    domain: e,
+    title: "Entity",
+    singleSelect: !0,
+    ...t?.deviceClass ? { deviceClass: t.deviceClass } : {}
+  }),
   /** Area picker dropdown */
   areaId: () => A.string().optional().meta({ formType: "area-picker", title: "Area" })
 };
@@ -1340,7 +1349,7 @@ function mn(e) {
 function vn() {
   return document.documentElement.classList.contains("dark");
 }
-const Lt = "1.1.1", Ut = {
+const Lt = "1.2.0", Ut = {
   version: Lt
 }, wn = Ut.version;
 export {
@@ -1376,8 +1385,8 @@ export {
   gn as svgColors,
   Fn as trackEntityHistory,
   Gn as untrackEntityHistory,
-  Sn as useArea,
-  Cn as useCamera,
+  Cn as useArea,
+  Sn as useCamera,
   Mn as useConnection,
   Dn as useCurrency,
   Tn as useEntities,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-sdk",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "SDK for building GlassHome dashboard widgets with SolidJS",
   "keywords": [
     "glasshome",