@glasshome/widget-sdk 0.2.3 → 0.2.5

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createSignal as j, createContext as wt, useContext as ht, createEffect as F, untrack as ut, createMemo as z, splitProps as $t, Show as K } from "solid-js";
-import { GridSizeSchema as tr, PublishBodySchema as er, PublishConfirmSchema as nr, PublishRequestSchema as rr, WidgetManifestSchema as ir, formatSchemaError as ar, parseGridSize as sr, serializeGridSize as or } from "./schemas.js";
+import { GridSizeSchema as tr, PublishBodySchema as er, PublishConfirmSchema as nr, PublishRequestSchema as rr, WidgetManifestSchema as ir, formatSchemaError as ar, parseGridSize as or, serializeGridSize as sr } from "./schemas.js";
 import { memo as D, effect as C, setStyleProperty as p, className as w, template as x, insert as f, style as tt, createComponent as W, use as kt, delegateEvents as pt } from "solid-js/web";
 import { clsx as St } from "clsx";
 import { twMerge as Ct } from "tailwind-merge";
@@ -24,9 +24,9 @@ const L = {
 };
 function bn(t) {
 }
-const st = wt();
+const ot = wt();
 function G() {
-  const t = ht(st);
+  const t = ht(ot);
   if (!t)
     throw new Error("useWidgetContext must be used within a Widget component");
   return t;
@@ -119,19 +119,19 @@ const Tt = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, ot = {
+}, st = {
   "classic-glass": Tt,
   minimal: Et,
   "compact-horizontal": Ot
 };
 function Vt(t) {
-  return ot[t];
+  return st[t];
 }
 function yn(t) {
-  return t in ot;
+  return t in st;
 }
 function wn() {
-  return Object.keys(ot);
+  return Object.keys(st);
 }
 function xt(t, e) {
   if (typeof t != "object" || t === null)
@@ -237,8 +237,8 @@ function Pt(t) {
   return [D(() => D(() => !!((t.glow ?? !1) && t.value > 0))() && (() => {
     var r = Lt();
     return C((a) => {
-      var s = i(), l = L.BACKGROUND;
-      return s !== a.e && p(r, "background", a.e = s), l !== a.t && p(r, "z-index", a.t = l), a;
+      var o = i(), l = L.BACKGROUND;
+      return o !== a.e && p(r, "background", a.e = o), l !== a.t && p(r, "z-index", a.t = l), a;
     }, {
       e: void 0,
       t: void 0
@@ -246,8 +246,8 @@ function Pt(t) {
   })()), (() => {
     var r = Ht();
     return C((a) => {
-      var s = y("pointer-events-none absolute inset-0", t.isDragging ? "duration-0" : "transition-all duration-300 ease-out", t.class), l = i(), c = n(), g = t.opacity ?? 0.3, d = L.BACKGROUND;
-      return s !== a.e && w(r, a.e = s), l !== a.t && p(r, "background", a.t = l), c !== a.a && p(r, "clip-path", a.a = c), g !== a.o && p(r, "opacity", a.o = g), d !== a.i && p(r, "z-index", a.i = d), a;
+      var o = y("pointer-events-none absolute inset-0", t.isDragging ? "duration-0" : "transition-all duration-300 ease-out", t.class), l = i(), c = n(), g = t.opacity ?? 0.3, d = L.BACKGROUND;
+      return o !== a.e && w(r, a.e = o), l !== a.t && p(r, "background", a.t = l), c !== a.a && p(r, "clip-path", a.a = c), g !== a.o && p(r, "opacity", a.o = g), d !== a.i && p(r, "z-index", a.i = d), a;
     }, {
       e: void 0,
       t: void 0,
@@ -349,8 +349,8 @@ function Yt(t) {
         e.contentLayout() === "horizontal" ? "flex-row items-center" : "flex-col justify-between",
         Ut("S3", e.size()),
         t.class
-      ), a = N.container(e.size()), s = L.CONTENT;
-      return r !== i.e && w(n, i.e = r), a !== i.t && p(n, "padding", i.t = a), s !== i.a && p(n, "z-index", i.a = s), i;
+      ), a = N.container(e.size()), o = L.CONTENT;
+      return r !== i.e && w(n, i.e = r), a !== i.t && p(n, "padding", i.t = a), o !== i.a && p(n, "z-index", i.a = o), i;
     }, {
       e: void 0,
       t: void 0,
@@ -480,49 +480,49 @@ function Jt(t) {
     return f(i, (() => {
       var a = D(() => !!t.icon);
       return () => a() && (() => {
-        var s = Kt();
-        return f(s, () => t.icon), C((l) => {
-          var c = y("flex items-center justify-center text-white/30", n() ? "shrink-0" : ""), g = `${N.icon(e.size())}px`, d = `${N.icon(e.size())}px`;
-          return c !== l.e && w(s, l.e = c), g !== l.t && p(s, "width", l.t = g), d !== l.a && p(s, "height", l.a = d), l;
+        var o = Kt();
+        return f(o, () => t.icon), C((l) => {
+          var c = y("flex items-center justify-center text-foreground/30", n() ? "shrink-0" : ""), g = `${N.icon(e.size())}px`, d = `${N.icon(e.size())}px`;
+          return c !== l.e && w(o, l.e = c), g !== l.t && p(o, "width", l.t = g), d !== l.a && p(o, "height", l.a = d), l;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), s;
+        }), o;
       })();
     })(), r), f(r, (() => {
       var a = D(() => !!(t.title ?? "No data"));
       return () => a() && (() => {
-        var s = qt();
-        return f(s, () => t.title ?? "No data"), C((l) => {
-          var c = y("font-semibold text-white/60", H.subtitle(e.size())), g = n() ? "100%" : "80%";
-          return c !== l.e && w(s, l.e = c), g !== l.t && p(s, "max-width", l.t = g), l;
+        var o = qt();
+        return f(o, () => t.title ?? "No data"), C((l) => {
+          var c = y("font-semibold text-foreground/60", H.subtitle(e.size())), g = n() ? "100%" : "80%";
+          return c !== l.e && w(o, l.e = c), g !== l.t && p(o, "max-width", l.t = g), l;
         }, {
           e: void 0,
           t: void 0
-        }), s;
+        }), o;
       })();
     })(), null), f(r, (() => {
       var a = D(() => !!t.message);
       return () => a() && (() => {
-        var s = Zt();
-        return f(s, () => t.message), C((l) => {
-          var c = y("text-white/50", H.emptyState(e.size())), g = n() ? "100%" : "85%";
-          return c !== l.e && w(s, l.e = c), g !== l.t && p(s, "max-width", l.t = g), l;
+        var o = Zt();
+        return f(o, () => t.message), C((l) => {
+          var c = y("text-foreground/50", H.emptyState(e.size())), g = n() ? "100%" : "85%";
+          return c !== l.e && w(o, l.e = c), g !== l.t && p(o, "max-width", l.t = g), l;
         }, {
           e: void 0,
           t: void 0
-        }), s;
+        }), o;
       })();
     })(), null), f(r, (() => {
       var a = D(() => !!t.action);
       return () => a() && (() => {
-        var s = Qt();
-        return f(s, () => t.action), s;
+        var o = Qt();
+        return f(o, () => t.action), o;
       })();
     })(), null), C((a) => {
-      var s = y("flex h-full w-full", n() ? "flex-row items-center justify-start" : "flex-col items-center justify-center text-center", t.class), l = N.S2(e.size()), c = N.container(e.size()), g = y("flex flex-col", n() ? "items-start text-left" : "items-center text-center"), d = N.S1(e.size());
-      return s !== a.e && w(i, a.e = s), l !== a.t && p(i, "gap", a.t = l), c !== a.a && p(i, "padding", a.a = c), g !== a.o && w(r, a.o = g), d !== a.i && p(r, "gap", a.i = d), a;
+      var o = y("flex h-full w-full", n() ? "flex-row items-center justify-start" : "flex-col items-center justify-center text-center", t.class), l = N.S2(e.size()), c = N.container(e.size()), g = y("flex flex-col", n() ? "items-start text-left" : "items-center text-center"), d = N.S1(e.size());
+      return o !== a.e && w(i, a.e = o), l !== a.t && p(i, "gap", a.t = l), c !== a.a && p(i, "padding", a.a = c), g !== a.o && w(r, a.o = g), d !== a.i && p(r, "gap", a.i = d), a;
     }, {
       e: void 0,
       t: void 0,
@@ -552,28 +552,28 @@ function vt(t, e, n) {
   t /= 255, e /= 255, n /= 255;
   const i = Math.max(t, e, n), r = Math.min(t, e, n), a = (i + r) / 2;
   if (i === r) return { h: 0, s: 0, l: a * 100 };
-  const s = i - r, l = a > 0.5 ? s / (2 - i - r) : s / (i + r);
+  const o = i - r, l = a > 0.5 ? o / (2 - i - r) : o / (i + r);
   let c = 0;
-  return i === t ? c = ((e - n) / s + (e < n ? 6 : 0)) / 6 : i === e ? c = ((n - t) / s + 2) / 6 : c = ((t - e) / s + 4) / 6, { h: c * 360, s: l * 100, l: a * 100 };
+  return i === t ? c = ((e - n) / o + (e < n ? 6 : 0)) / 6 : i === e ? c = ((n - t) / o + 2) / 6 : c = ((t - e) / o + 4) / 6, { h: c * 360, s: l * 100, l: a * 100 };
 }
 function re(t) {
   return te(t) ?? ee(t) ?? ne(t);
 }
 function dt(t, e, n, i) {
-  const r = Math.round(t), a = Math.round(Math.min(100, Math.max(0, e))), s = Math.round(Math.min(100, Math.max(0, n)));
-  return i !== void 0 && i < 1 ? `hsla(${r}, ${a}%, ${s}%, ${i})` : `hsl(${r}, ${a}%, ${s}%)`;
+  const r = Math.round(t), a = Math.round(Math.min(100, Math.max(0, e))), o = Math.round(Math.min(100, Math.max(0, n)));
+  return i !== void 0 && i < 1 ? `hsla(${r}, ${a}%, ${o}%, ${i})` : `hsl(${r}, ${a}%, ${o}%)`;
 }
 function ie(t) {
   const e = re(t);
   if (!e) return null;
   const { h: n, s: i, l: r } = e;
-  let a, s = Math.min(i + 10, 100);
-  r < 25 ? (a = r + 12, s = Math.min(i + 15, 100)) : r < 40 ? a = Math.max(r - 8, 15) : a = Math.max(18, r * 0.3), i < 15 && (s = 10, a = Math.max(a, 20));
-  const l = dt(n, s, a, 0.85), c = dt(n, Math.min(i, 90), Math.min(r, 55), 0.5);
+  let a, o = Math.min(i + 10, 100);
+  r < 25 ? (a = r + 12, o = Math.min(i + 15, 100)) : r < 40 ? a = Math.max(r - 8, 15) : a = Math.max(18, r * 0.3), i < 15 && (o = 10, a = Math.max(a, 20));
+  const l = dt(n, o, a, 0.85), c = dt(n, Math.min(i, 90), Math.min(r, 55), 0.5);
   return { background: l, glow: c };
 }
-var ae = /* @__PURE__ */ x('<div><div class="flex items-center justify-center text-white">'), gt = /* @__PURE__ */ x("<div>");
-function se(t) {
+var ae = /* @__PURE__ */ x('<div><div class="flex items-center justify-center text-foreground">'), gt = /* @__PURE__ */ x("<div>");
+function oe(t) {
   const e = G(), n = () => t.dynamicColor ? ie(t.dynamicColor) : null, i = () => !!n(), r = () => {
     const c = n();
     if (c)
@@ -586,7 +586,7 @@ function se(t) {
       return {
         "box-shadow": `0 0 25px ${c.glow}`
       };
-  }, s = () => {
+  }, o = () => {
     const c = {
       width: `${N.icon(e.size())}px`,
       height: `${N.icon(e.size())}px`,
@@ -612,8 +612,8 @@ function se(t) {
       return () => d() && (() => {
         var h = gt();
         return C((k) => {
-          var u = y("absolute", !i() && (t.color ?? "bg-white/10")), o = l(0.14, -2, 0.45);
-          return u !== k.e && w(h, k.e = u), k.t = tt(h, o, k.t), k;
+          var u = y("absolute", !i() && (t.color ?? "bg-foreground/10")), s = l(0.14, -2, 0.45);
+          return u !== k.e && w(h, k.e = u), k.t = tt(h, s, k.t), k;
         }, {
           e: void 0,
           t: void 0
@@ -624,8 +624,8 @@ function se(t) {
       return () => d() && (() => {
         var h = gt();
         return C((k) => {
-          var u = y("absolute", !i() && (t.color ?? "bg-white/10")), o = l(0.28, -3, 0.2);
-          return u !== k.e && w(h, k.e = u), k.t = tt(h, o, k.t), k;
+          var u = y("absolute", !i() && (t.color ?? "bg-foreground/10")), s = l(0.28, -3, 0.2);
+          return u !== k.e && w(h, k.e = u), k.t = tt(h, s, k.t), k;
         }, {
           e: void 0,
           t: void 0
@@ -638,10 +638,10 @@ function se(t) {
         t.dimmed && "opacity-50",
         // Only apply Tailwind classes when not using dynamic colors
         !i() && t.glow && "shadow-[0_0_25px]",
-        !i() && (t.color ?? "bg-white/10"),
+        !i() && (t.color ?? "bg-foreground/10"),
         !i() && t.glow,
         t.class
-      ), k = s(), u = `${N.iconSize(e.size())}px`;
+      ), k = o(), u = `${N.iconSize(e.size())}px`;
       return h !== d.e && w(c, d.e = h), d.t = tt(c, k, d.t), u !== d.a && p(g, "font-size", d.a = u), d;
     }, {
       e: void 0,
@@ -650,14 +650,14 @@ function se(t) {
     }), c;
   })();
 }
-var oe = /* @__PURE__ */ x("<div>"), le = /* @__PURE__ */ x("<div><div><span></span></div><div>"), ce = /* @__PURE__ */ x("<span class=shrink-0>"), ue = /* @__PURE__ */ x('<span class="ml-1 text-white/70">');
+var se = /* @__PURE__ */ x("<div>"), le = /* @__PURE__ */ x("<div><div><span></span></div><div>"), ce = /* @__PURE__ */ x("<span class=shrink-0>"), ue = /* @__PURE__ */ x('<span class="ml-1 text-foreground/70">');
 function de(t) {
   const e = G(), n = () => {
     const i = t.direction ?? "auto";
     return i === "auto" ? e.orientation() === "horizontal" ? "horizontal" : "vertical" : i;
   };
   return (() => {
-    var i = oe();
+    var i = se();
     return f(i, () => t.children), C(() => w(i, y("flex", n() === "horizontal" ? "flex-row gap-4" : "flex-col gap-2", t.class))), i;
   })();
 }
@@ -666,20 +666,20 @@ function ge(t) {
   return (() => {
     var n = le(), i = n.firstChild, r = i.firstChild, a = i.nextSibling;
     return f(i, (() => {
-      var s = D(() => !!t.icon);
-      return () => s() && (() => {
+      var o = D(() => !!t.icon);
+      return () => o() && (() => {
         var l = ce();
         return f(l, () => t.icon), l;
       })();
     })(), r), f(r, () => t.label), f(a, () => t.value, null), f(a, (() => {
-      var s = D(() => !!t.unit);
-      return () => s() && (() => {
+      var o = D(() => !!t.unit);
+      return () => o() && (() => {
         var l = ue();
         return f(l, () => t.unit), l;
       })();
-    })(), null), C((s) => {
-      var l = y("flex flex-col", t.dimmed && "opacity-50", t.class), c = N.S1(e.size()), g = y("flex items-center gap-1 text-white/60", H.metricLabel(e.size())), d = y("font-semibold text-white", H.metricValue(e.size()));
-      return l !== s.e && w(n, s.e = l), c !== s.t && p(n, "gap", s.t = c), g !== s.a && w(i, s.a = g), d !== s.o && w(a, s.o = d), s;
+    })(), null), C((o) => {
+      var l = y("flex flex-col", t.dimmed && "opacity-50", t.class), c = N.S1(e.size()), g = y("flex items-center gap-1 text-foreground/60", H.metricLabel(e.size())), d = y("font-semibold text-foreground", H.metricValue(e.size()));
+      return l !== o.e && w(n, o.e = l), c !== o.t && p(n, "gap", o.t = c), g !== o.a && w(i, o.a = g), d !== o.o && w(a, o.o = d), o;
     }, {
       e: void 0,
       t: void 0,
@@ -699,7 +699,7 @@ function fe(t) {
       var i = D(() => !!t.isUnavailable);
       return () => i() ? "Unavailable" : t.children;
     })()), C((i) => {
-      var r = y("relative font-bold text-white", t.dimmed && "opacity-40", H.status(e.size()), t.class), a = L.ACTIONS;
+      var r = y("relative font-bold text-foreground", t.dimmed && "opacity-40", H.status(e.size()), t.class), a = L.ACTIONS;
       return r !== i.e && w(n, i.e = r), a !== i.t && p(n, "z-index", i.t = a), i;
     }, {
       e: void 0,
@@ -712,7 +712,7 @@ function xe(t) {
   const e = G();
   return (() => {
     var n = he();
-    return f(n, () => t.children), C(() => w(n, y("truncate font-medium text-white/80", t.dimmed && "text-white/50", H.subtitle(e.size()), t.class))), n;
+    return f(n, () => t.children), C(() => w(n, y("truncate font-medium text-foreground/80", t.dimmed && "text-foreground/50", H.subtitle(e.size()), t.class))), n;
   })();
 }
 var ve = /* @__PURE__ */ x("<div><h3>"), be = /* @__PURE__ */ x("<span>");
@@ -724,11 +724,11 @@ function ye(t) {
       var r = D(() => t.badge !== void 0 && t.badge > 0);
       return () => r() && (() => {
         var a = be();
-        return f(a, () => t.badge), C(() => w(a, y("shrink-0 rounded-full bg-white/20 px-2 py-0.5 font-medium text-white", H.badge(e.size())))), a;
+        return f(a, () => t.badge), C(() => w(a, y("shrink-0 rounded-full bg-foreground/20 px-2 py-0.5 font-medium text-foreground", H.badge(e.size())))), a;
       })();
     })(), null), C((r) => {
-      var a = y("relative flex items-center", t.class), s = N.S1(e.size()), l = L.ACTIONS, c = y("truncate text-white/60", H.title(e.size()));
-      return a !== r.e && w(n, r.e = a), s !== r.t && p(n, "gap", r.t = s), l !== r.a && p(n, "z-index", r.a = l), c !== r.o && w(i, r.o = c), r;
+      var a = y("relative flex items-center", t.class), o = N.S1(e.size()), l = L.ACTIONS, c = y("truncate text-foreground/60", H.title(e.size()));
+      return a !== r.e && w(n, r.e = a), o !== r.t && p(n, "gap", r.t = o), l !== r.a && p(n, "z-index", r.a = l), c !== r.o && w(i, r.o = c), r;
     }, {
       e: void 0,
       t: void 0,
@@ -774,7 +774,7 @@ function we(t, e = !1) {
       description: S ? "On" : "Off"
     };
   }
-  let i = 0, r = 0, a = 0, s = 0, l = 0, c = 0;
+  let i = 0, r = 0, a = 0, o = 0, l = 0, c = 0;
   const g = [];
   for (const _ of t)
     switch (_.state) {
@@ -788,12 +788,12 @@ function we(t, e = !1) {
         a++;
         break;
       case "unavailable":
-        s++;
+        o++;
         break;
     }
-  const d = t.length, h = s === d, k = a + s === d, u = i > 0, o = i === d, b = r === d;
+  const d = t.length, h = o === d, k = a + o === d, u = i > 0, s = i === d, b = r === d;
   let v, T;
-  e ? h ? (v = "unavailable", T = !1) : a > 0 || s > 0 ? (v = "unknown", T = !1) : r > 0 ? (v = "off", T = !1) : (v = "on", T = !0) : h ? (v = "unavailable", T = !1) : k ? (v = "unknown", T = !1) : u ? (v = "on", T = !0) : (v = "off", T = !1);
+  e ? h ? (v = "unavailable", T = !1) : a > 0 || o > 0 ? (v = "unknown", T = !1) : r > 0 ? (v = "off", T = !1) : (v = "on", T = !0) : h ? (v = "unavailable", T = !1) : k ? (v = "unknown", T = !1) : u ? (v = "on", T = !0) : (v = "off", T = !1);
   const U = c > 0 ? Math.round(l / c) : 0, $ = Math.round(U / 255 * 100);
   let A;
   if (g.length > 0) {
@@ -802,7 +802,7 @@ function we(t, e = !1) {
   } else
     A = mt(t[0]);
   let E;
-  return o ? E = "All on" : b ? E = "All off" : i > 0 ? E = `${i} of ${d} on` : E = "Off", {
+  return s ? E = "All on" : b ? E = "All off" : i > 0 ? E = `${i} of ${d} on` : E = "Off", {
     isGroup: n,
     state: v,
     isOn: T,
@@ -826,40 +826,40 @@ function $e(t, e = "mean", n = !0) {
     };
   const i = t.length > 1;
   if (!i) {
-    const u = t[0], o = Number.parseFloat(u.state);
+    const u = t[0], s = Number.parseFloat(u.state);
     let b = u.state;
-    return Number.isNaN(o) || (b = Number.isInteger(o) ? o.toString() : o.toFixed(1)), {
+    return Number.isNaN(s) || (b = Number.isInteger(s) ? s.toString() : s.toFixed(1)), {
       isGroup: !1,
       state: b,
-      numericValue: Number.isNaN(o) ? null : o,
+      numericValue: Number.isNaN(s) ? null : s,
       isUnavailable: u.state === "unavailable",
       unit: u.unitOfMeasurement ?? void 0,
       description: b
     };
   }
   const r = [], a = [];
-  let s = 0, l;
+  let o = 0, l;
   for (const u of t) {
     if (!l && u.unitOfMeasurement && (l = u.unitOfMeasurement), u.state === "unavailable") {
-      s++, a.push({
+      o++, a.push({
         entityId: u.id,
         value: "unavailable",
         friendly_name: u.friendlyName
       });
       continue;
     }
-    const o = Number.parseFloat(u.state);
-    isNaN(o) ? n || a.push({
+    const s = Number.parseFloat(u.state);
+    isNaN(s) ? n || a.push({
       entityId: u.id,
       value: u.state,
       friendly_name: u.friendlyName
-    }) : (r.push(o), a.push({
+    }) : (r.push(s), a.push({
       entityId: u.id,
-      value: o,
+      value: s,
       friendly_name: u.friendlyName
     }));
   }
-  const c = s === t.length, g = r.length === 0;
+  const c = o === t.length, g = r.length === 0;
   if (c || g)
     return {
       isGroup: i,
@@ -879,15 +879,15 @@ function $e(t, e = "mean", n = !0) {
       d = Math.max(...r), h = "Maximum";
       break;
     case "mean":
-      d = r.reduce((u, o) => u + o, 0) / r.length, h = "Average";
+      d = r.reduce((u, s) => u + s, 0) / r.length, h = "Average";
       break;
     case "median": {
-      const u = [...r].sort((b, v) => b - v), o = Math.floor(u.length / 2);
-      d = u.length % 2 === 0 ? (u[o - 1] + u[o]) / 2 : u[o], h = "Median";
+      const u = [...r].sort((b, v) => b - v), s = Math.floor(u.length / 2);
+      d = u.length % 2 === 0 ? (u[s - 1] + u[s]) / 2 : u[s], h = "Median";
       break;
     }
     case "sum":
-      d = r.reduce((u, o) => u + o, 0), h = "Sum";
+      d = r.reduce((u, s) => u + s, 0), h = "Sum";
       break;
     case "last":
       d = r[r.length - 1], h = "Latest";
@@ -896,15 +896,15 @@ function $e(t, e = "mean", n = !0) {
       d = Math.max(...r) - Math.min(...r), h = "Range";
       break;
     case "product":
-      d = r.reduce((u, o) => u * o, 1), h = "Product";
+      d = r.reduce((u, s) => u * s, 1), h = "Product";
       break;
     case "std_dev": {
-      const u = r.reduce((b, v) => b + v, 0) / r.length, o = r.reduce((b, v) => b + (v - u) ** 2, 0) / r.length;
-      d = Math.sqrt(o), h = "Std Dev";
+      const u = r.reduce((b, v) => b + v, 0) / r.length, s = r.reduce((b, v) => b + (v - u) ** 2, 0) / r.length;
+      d = Math.sqrt(s), h = "Std Dev";
       break;
     }
     default:
-      d = r.reduce((u, o) => u + o, 0) / r.length, h = "Average";
+      d = r.reduce((u, s) => u + s, 0) / r.length, h = "Average";
   }
   const k = Number.isInteger(d) ? d.toString() : d.toFixed(1);
   return {
@@ -926,8 +926,8 @@ function mt(t) {
   }
   if (t.attributes?.color_temp) {
     const r = 1e6 / t.attributes.color_temp / 100;
-    let a, s, l;
-    return r <= 66 ? (a = 255, s = r <= 19 ? 0 : 99.4708025861 * Math.log(r - 10) - 161.1195681661, l = r <= 19 ? 0 : r <= 66 ? 138.5177312231 * Math.log(r - 10) - 305.0447927307 : 255) : (a = 329.698727446 * (r - 60) ** -0.1332047592, s = 288.1221695283 * (r - 60) ** -0.0755148492, l = 255), a = Math.max(0, Math.min(255, a)) * n, s = Math.max(0, Math.min(255, s)) * n, l = Math.max(0, Math.min(255, l)) * n, `rgb(${Math.round(a)}, ${Math.round(s)}, ${Math.round(l)})`;
+    let a, o, l;
+    return r <= 66 ? (a = 255, o = r <= 19 ? 0 : 99.4708025861 * Math.log(r - 10) - 161.1195681661, l = r <= 19 ? 0 : r <= 66 ? 138.5177312231 * Math.log(r - 10) - 305.0447927307 : 255) : (a = 329.698727446 * (r - 60) ** -0.1332047592, o = 288.1221695283 * (r - 60) ** -0.0755148492, l = 255), a = Math.max(0, Math.min(255, a)) * n, o = Math.max(0, Math.min(255, o)) * n, l = Math.max(0, Math.min(255, l)) * n, `rgb(${Math.round(a)}, ${Math.round(o)}, ${Math.round(l)})`;
   }
   return `rgb(${Math.round(255 * n)}, ${Math.round(220 * n)}, ${Math.round(180 * n)})`;
 }
@@ -971,10 +971,10 @@ function Se(t, e, n) {
     return e ? `${t}${e}` : t;
   if (t == null || Number.isNaN(t))
     return e ? `--${e}` : "--";
-  let a = t, s = e || "";
-  r && e && (e === "W" || e === "kW" || e === "MW") && (t >= 1e6 ? (a = t / 1e6, s = "MW") : t >= 1e3 ? (a = t / 1e3, s = "kW") : s = "W"), r && e && (e === "B" || e === "KB" || e === "MB" || e === "GB") && (t >= 1073741824 ? (a = t / 1073741824, s = "GB") : t >= 1048576 ? (a = t / 1048576, s = "MB") : t >= 1024 ? (a = t / 1024, s = "KB") : s = "B");
+  let a = t, o = e || "";
+  r && e && (e === "W" || e === "kW" || e === "MW") && (t >= 1e6 ? (a = t / 1e6, o = "MW") : t >= 1e3 ? (a = t / 1e3, o = "kW") : o = "W"), r && e && (e === "B" || e === "KB" || e === "MB" || e === "GB") && (t >= 1073741824 ? (a = t / 1073741824, o = "GB") : t >= 1048576 ? (a = t / 1048576, o = "MB") : t >= 1024 ? (a = t / 1024, o = "KB") : o = "B");
   let l;
-  return i !== void 0 ? l = a.toFixed(i) : a !== t ? l = a.toFixed(1) : Number.isInteger(t) ? l = t.toString() : l = Number.parseFloat(t.toFixed(2)).toString(), s ? `${l}${s}` : l;
+  return i !== void 0 ? l = a.toFixed(i) : a !== t ? l = a.toFixed(1) : Number.isInteger(t) ? l = t.toString() : l = Number.parseFloat(t.toFixed(2)).toString(), o ? `${l}${o}` : l;
 }
 function Ce(t, e) {
   return t == null || isNaN(t) ? null : e === "°C" ? t < 10 ? "Cold" : t < 18 ? "Cool" : t < 24 ? "Comfortable" : t < 28 ? "Warm" : "Hot" : e === "°F" ? t < 50 ? "Cold" : t < 64 ? "Cool" : t < 75 ? "Comfortable" : t < 82 ? "Warm" : "Hot" : e === "%" ? t < 20 ? "Very Low" : t < 40 ? "Low" : t < 60 ? "Medium" : t < 80 ? "High" : "Very High" : e === "ppm" ? t < 400 ? "Excellent" : t < 600 ? "Good" : t < 1e3 ? "Acceptable" : t < 1500 ? "Mediocre" : "Poor" : e === "lx" ? t < 50 ? "Dark" : t < 200 ? "Dim" : t < 500 ? "Moderate" : t < 1e3 ? "Bright" : "Very Bright" : e === "AQI" ? t <= 50 ? "Good" : t <= 100 ? "Moderate" : t <= 150 ? "Unhealthy for Sensitive" : t <= 200 ? "Unhealthy" : t <= 300 ? "Very Unhealthy" : "Hazardous" : e === "dB" ? t < 30 ? "Very Quiet" : t < 50 ? "Quiet" : t < 70 ? "Moderate" : t < 85 ? "Loud" : "Very Loud" : null;
@@ -988,17 +988,17 @@ function De(t) {
       var r = D(() => !!(t.interpret && typeof t.value == "number"));
       return () => r() && (() => {
         var a = ze();
-        return f(a, () => Ce(t.value, t.unit)), C((s) => {
-          var l = y("text-white/60", H.subtitle(e.size())), c = N.S1(e.size());
-          return l !== s.e && w(a, s.e = l), c !== s.t && p(a, "margin-top", s.t = c), s;
+        return f(a, () => Ce(t.value, t.unit)), C((o) => {
+          var l = y("text-foreground/60", H.subtitle(e.size())), c = N.S1(e.size());
+          return l !== o.e && w(a, o.e = l), c !== o.t && p(a, "margin-top", o.t = c), o;
         }, {
           e: void 0,
           t: void 0
         }), a;
       })();
     })(), null), C((r) => {
-      var a = y("flex flex-col", t.class), s = y("font-bold text-white", H.value(e.size()));
-      return a !== r.e && w(n, r.e = a), s !== r.t && w(i, r.t = s), r;
+      var a = y("flex flex-col", t.class), o = y("font-bold text-foreground", H.value(e.size()));
+      return a !== r.e && w(n, r.e = a), o !== r.t && w(i, r.t = o), r;
     }, {
       e: void 0,
       t: void 0
@@ -1018,9 +1018,9 @@ function Re(t, e) {
 }
 function Ge(t) {
   let e;
-  const n = Mt(() => e), i = 2, [r, a] = j(0), [s, l] = j(0);
+  const n = Mt(() => e), i = 2, [r, a] = j(0), [o, l] = j(0);
   F(() => {
-    const $ = Math.round(n.width ?? 0), A = Math.round(n.height ?? 0), E = ut(r), _ = ut(s);
+    const $ = Math.round(n.width ?? 0), A = Math.round(n.height ?? 0), E = ut(r), _ = ut(o);
     (Math.abs($ - E) > i || Math.abs(A - _) > i) && (a($), l(A));
   });
   const c = z(() => {
@@ -1028,9 +1028,9 @@ function Ge(t) {
       return typeof t.variant == "string" ? Vt(t.variant) : t.variant;
   }), g = z(() => ({
     width: r(),
-    height: s(),
+    height: o(),
     gridWidth: Math.max(1, Math.round(r() / 150)),
-    gridHeight: Math.max(1, Math.round(s() / 75))
+    gridHeight: Math.max(1, Math.round(o() / 75))
   }), void 0, {
     equals: ($, A) => $.width === A.width && $.height === A.height && $.gridWidth === A.gridWidth && $.gridHeight === A.gridHeight
   }), d = z(() => {
@@ -1042,17 +1042,17 @@ function Ge(t) {
   }), k = z(() => {
     const $ = g();
     return Re($.width, $.height);
-  }), u = ht(st), o = u;
-  o?._isStub?.() && o._bridge && (F(() => {
-    o._bridge.setSize(d());
+  }), u = ht(ot), s = u;
+  s?._isStub?.() && s._bridge && (F(() => {
+    s._bridge.setSize(d());
   }), F(() => {
-    o._bridge.setOrientation(h());
+    s._bridge.setOrientation(h());
   }), F(() => {
-    o._bridge.setContentLayout(k());
+    s._bridge.setContentLayout(k());
   }), F(() => {
-    o._bridge.setDimensions(g());
+    s._bridge.setDimensions(g());
   }), F(() => {
-    o._bridge.setIsStub(!1);
+    s._bridge.setIsStub(!1);
   }));
   const b = {
     size: d,
@@ -1068,7 +1068,7 @@ function Ge(t) {
     ...c()?.styles?.container,
     ...c()?.styles?.cssVars || {}
   }));
-  return W(st.Provider, {
+  return W(ot.Provider, {
     value: b,
     get children() {
       var $ = _e(), A = $.firstChild, E = A.firstChild, _ = e;
@@ -1151,7 +1151,7 @@ function Be(t) {
 }
 const P = Ge;
 P.Content = Yt;
-P.Icon = se;
+P.Icon = oe;
 P.Title = ye;
 P.Subtitle = xe;
 P.Status = fe;
@@ -1173,8 +1173,8 @@ function On(t) {
   return (() => {
     var n = He(), i = n.firstChild;
     return C((r) => {
-      var a = y("pointer-events-none absolute inset-0", t.class), s = L.BACKGROUND, l = y("absolute inset-0 opacity-40 blur-3xl", e());
-      return a !== r.e && w(n, r.e = a), s !== r.t && p(n, "z-index", r.t = s), l !== r.a && w(i, r.a = l), r;
+      var a = y("pointer-events-none absolute inset-0", t.class), o = L.BACKGROUND, l = y("absolute inset-0 opacity-40 blur-3xl", e());
+      return a !== r.e && w(n, r.e = a), o !== r.t && p(n, "z-index", r.t = o), l !== r.a && w(i, r.a = l), r;
     }, {
       e: void 0,
       t: void 0,
@@ -1191,8 +1191,8 @@ function Vn(t) {
   return (() => {
     var i = Pe();
     return f(i, () => t.children), C((r) => {
-      var a = y("flex flex-col", t.class), s = n();
-      return a !== r.e && w(i, r.e = a), s !== r.t && p(i, "gap", r.t = s), r;
+      var a = y("flex flex-col", t.class), o = n();
+      return a !== r.e && w(i, r.e = a), o !== r.t && p(i, "gap", r.t = o), r;
     }, {
       e: void 0,
       t: void 0
@@ -1216,7 +1216,7 @@ function nn(t) {
 }
 function Wn(t) {
   const [e] = $t(t, ["open", "onOpenChange", "title", "onSave", "hasUnsavedChanges", "onDelete", "editContent", "controlsContent", "debugContent", "debugData", "tabs", "class", "maxWidth", "defaultTab", "headerActions", "ResponsiveDialog", "ResponsiveDialogContent", "ResponsiveDialogHeader", "ResponsiveDialogTitle", "ResponsiveDialogDescription", "Button"]), [n, i] = j(e.defaultTab ?? "controls"), r = () => {
-    const o = e.maxWidth ?? "3xl";
+    const s = e.maxWidth ?? "3xl";
     return {
       sm: "max-w-sm",
       md: "max-w-md",
@@ -1225,36 +1225,36 @@ function Wn(t) {
       "2xl": "max-w-2xl",
       "3xl": "max-w-3xl",
       "4xl": "max-w-4xl"
-    }[o];
+    }[s];
   }, a = () => {
     if (e.tabs) return e.tabs;
-    const o = [];
-    return o.push({
+    const s = [];
+    return s.push({
       id: "edit",
       label: "Edit",
       icon: Fe(),
       content: e.editContent ?? Ye()
-    }), o.push({
+    }), s.push({
       id: "controls",
       label: "Controls",
       icon: Xe(),
       content: e.controlsContent ?? Ke()
-    }), o.push({
+    }), s.push({
       id: "debug",
       label: "Debug",
       icon: qe(),
       content: e.debugContent ?? Ze()
-    }), o;
-  }, s = async () => {
+    }), s;
+  }, o = async () => {
     if (e.debugData !== void 0)
       try {
-        const o = typeof e.debugData == "string" ? e.debugData : JSON.stringify(e.debugData, null, 2);
-        await navigator.clipboard.writeText(o);
+        const s = typeof e.debugData == "string" ? e.debugData : JSON.stringify(e.debugData, null, 2);
+        await navigator.clipboard.writeText(s);
       } catch {
       }
   }, l = () => {
-    const o = a();
-    return o.find((v) => v.id === n())?.content ?? o[0]?.content;
+    const s = a();
+    return s.find((v) => v.id === n())?.content ?? s[0]?.content;
   }, c = e.ResponsiveDialog, g = e.ResponsiveDialogContent, d = e.ResponsiveDialogHeader, h = e.ResponsiveDialogTitle, k = e.ResponsiveDialogDescription, u = e.Button;
   return W(c, {
     get open() {
@@ -1273,18 +1273,18 @@ function Wn(t) {
             class: "flex flex-row items-center justify-between gap-3",
             get children() {
               return [(() => {
-                var o = Qe();
-                return f(o, W(h, {
+                var s = Qe();
+                return f(s, W(h, {
                   class: "truncate leading-tight",
                   get children() {
                     return e.title;
                   }
-                }), null), f(o, W(k, {
+                }), null), f(s, W(k, {
                   class: "sr-only",
                   children: "Widget configuration dialog"
-                }), null), o;
+                }), null), s;
               })(), (() => {
-                var o = Je(), b = o.firstChild;
+                var s = Je(), b = s.firstChild;
                 return f(b, () => a().map((v) => W(nn, {
                   get icon() {
                     return v.icon;
@@ -1296,14 +1296,14 @@ function Wn(t) {
                     return n() === v.id;
                   },
                   onClick: () => i(v.id)
-                }))), f(o, W(K, {
+                }))), f(s, W(K, {
                   get when() {
                     return e.headerActions;
                   },
                   get children() {
                     return e.headerActions;
                   }
-                }), null), f(o, W(K, {
+                }), null), f(s, W(K, {
                   get when() {
                     return D(() => !!(n() === "edit" && e.onSave))() && e.hasUnsavedChanges;
                   },
@@ -1314,7 +1314,7 @@ function Wn(t) {
                       children: "Save"
                     });
                   }
-                }), null), f(o, W(K, {
+                }), null), f(s, W(K, {
                   get when() {
                     return D(() => n() === "edit")() && e.onDelete;
                   },
@@ -1326,24 +1326,24 @@ function Wn(t) {
                       children: "Delete"
                     });
                   }
-                }), null), o;
+                }), null), s;
               })()];
             }
           }), (() => {
-            var o = tn();
-            return f(o, l), o;
+            var s = tn();
+            return f(s, l), s;
           })(), W(K, {
             get when() {
               return D(() => n() === "debug")() && e.debugData !== void 0;
             },
             get children() {
-              var o = en();
-              return f(o, W(u, {
+              var s = en();
+              return f(s, W(u, {
                 size: "sm",
                 variant: "outline",
-                onClick: s,
+                onClick: o,
                 children: "Copy"
-              })), o;
+              })), s;
             }
           })];
         }
@@ -1370,13 +1370,13 @@ const an = rt(`
       <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>
-`), sn = rt(`
+`), on = rt(`
   <g>
     <circle cx="${m}" cy="${m}" r="8" stroke="${et}" stroke-width="${nt}" fill="none"/>
     <circle cx="${m}" cy="${m}" r="8" stroke="${B}" stroke-width="1.5" fill="none"/>
     <circle cx="${m}" cy="${m}" r="1.5" fill="${B}"/>
   </g>
-`), on = rt(`
+`), sn = rt(`
   <g>
     <!-- shadow -->
     <g stroke="${et}" stroke-width="${nt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -1420,8 +1420,8 @@ function J(t, e, n) {
 }
 const Y = {
   tap: J(an, 12, 4),
-  hold: J(sn, 16, 16),
-  slideHorizontal: J(on, m, m),
+  hold: J(on, 16, 16),
+  slideHorizontal: J(sn, m, m),
   slideVertical: J(ln, m, m)
 };
 function In(t, e) {
@@ -1440,7 +1440,7 @@ function In(t, e) {
     element: null
   }, i = 10, r = 5, a = () => {
     n.holdTimer && (clearTimeout(n.holdTimer), n.holdTimer = null), n.slideActivationTimer && (clearTimeout(n.slideActivationTimer), n.slideActivationTimer = null);
-  }, s = (u) => {
+  }, o = (u) => {
     const b = t().slide;
     if (b?.orientation === "horizontal") return "horizontal";
     if (b?.orientation === "vertical") return "vertical";
@@ -1450,16 +1450,16 @@ function In(t, e) {
     }
     return (e?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
   }, l = (u) => {
-    const o = t();
-    if (!(!o.tap && !o.hold && !o.slide)) {
-      if (n.isDown = !0, n.element = u.currentTarget, n.startX = u.clientX, n.startY = u.clientY, n.currentX = u.clientX, n.currentY = u.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.setPointerCapture(u.pointerId), o.hold) {
-        const b = o.hold.delay ?? 300;
+    const s = t();
+    if (!(!s.tap && !s.hold && !s.slide)) {
+      if (u.preventDefault(), n.isDown = !0, n.element = u.currentTarget, n.startX = u.clientX, n.startY = u.clientY, n.currentX = u.clientX, n.currentY = u.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.setPointerCapture(u.pointerId), s.hold) {
+        const b = s.hold.delay ?? 300;
         n.holdTimer = setTimeout(() => {
-          n.isDown && !n.hasMoved && (o.hold.action(), n.isDown = !1);
+          n.isDown && !n.hasMoved && (s.hold.action(), n.isDown = !1);
         }, b);
       }
-      if (o.slide) {
-        const b = o.slide.activationDelay ?? 0;
+      if (s.slide) {
+        const b = s.slide.activationDelay ?? 0;
         b > 0 ? n.slideActivationTimer = setTimeout(() => {
           n.slideActive = !0;
         }, b) : n.slideActive = !0;
@@ -1467,37 +1467,37 @@ function In(t, e) {
     }
   }, c = (u) => {
     if (!n.isDown) return;
-    const o = t();
+    const s = t();
     n.currentX = u.clientX, n.currentY = u.clientY;
-    const b = n.currentX - n.startX, v = n.currentY - n.startY, T = Math.abs(b), U = Math.abs(v), $ = Math.sqrt(b * b + v * v), A = u.currentTarget, E = s(A);
-    if (!n.lockedAxis && $ > r && (T > U ? n.lockedAxis = "horizontal" : n.lockedAxis = "vertical", o.slide && n.lockedAxis !== E)) {
+    const b = n.currentX - n.startX, v = n.currentY - n.startY, T = Math.abs(b), U = Math.abs(v), $ = Math.sqrt(b * b + v * v), A = u.currentTarget, E = o(A);
+    if (!n.lockedAxis && $ > r && (T > U ? n.lockedAxis = "horizontal" : n.lockedAxis = "vertical", s.slide && n.lockedAxis !== E)) {
       A.releasePointerCapture(u.pointerId), n.isDown = !1, n.slideActive = !1, a();
       return;
     }
-    if ($ > i && (n.hasMoved = !0, a()), o.slide && n.slideActive && n.hasMoved && n.lockedAxis === E) {
-      const _ = o.slide.min ?? 0, S = o.slide.max ?? 100, O = S - _, I = E === "vertical" ? -v : b, V = E === "vertical" ? u.currentTarget.clientHeight : u.currentTarget.clientWidth, Q = I / V * O, yt = Math.max(_, Math.min(S, o.slide.value + Q));
-      o.slide.onChange(Math.round(yt)), n.startX = n.currentX, n.startY = n.currentY, u.preventDefault();
+    if ($ > i && (n.hasMoved = !0, a()), s.slide && n.slideActive && n.hasMoved && n.lockedAxis === E) {
+      const _ = s.slide.min ?? 0, S = s.slide.max ?? 100, O = S - _, I = E === "vertical" ? -v : b, V = E === "vertical" ? u.currentTarget.clientHeight : u.currentTarget.clientWidth, Q = I / V * O, yt = Math.max(_, Math.min(S, s.slide.value + Q));
+      s.slide.onChange(Math.round(yt)), n.startX = n.currentX, n.startY = n.currentY, u.preventDefault();
     }
   }, g = (u) => {
     if (!n.isDown) return;
-    const o = t(), b = o.hold?.delay ?? 300;
-    if (a(), o.tap && !n.hasMoved) {
+    const s = t(), b = s.hold?.delay ?? 300;
+    if (a(), s.tap && !n.hasMoved) {
       const v = Date.now() - n.startTime;
-      n.isDown && v < b && o.tap();
+      n.isDown && v < b && s.tap();
     }
     n.isDown = !1, n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.releasePointerCapture(u.pointerId);
   }, d = (u) => {
     a(), n.isDown = !1, n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.releasePointerCapture(u.pointerId);
   }, h = (u) => {
-    const o = t();
-    if (o.slide) {
-      const b = o.slide.orientation;
+    const s = t();
+    if (s.slide) {
+      const b = s.slide.orientation;
       if (b === "horizontal") return Y.slideHorizontal.css;
       if (b === "vertical") return Y.slideVertical.css;
       const v = u.getBoundingClientRect();
       return v.height > v.width ? Y.slideVertical.css : Y.slideHorizontal.css;
     }
-    return o.tap ? Y.tap.css : o.hold ? Y.hold.css : "";
+    return s.tap ? Y.tap.css : s.hold ? Y.hold.css : "";
   };
   return {
     onPointerDown: l,
@@ -1505,8 +1505,8 @@ function In(t, e) {
     onPointerUp: g,
     onPointerCancel: d,
     onPointerEnter: (u) => {
-      const o = u.currentTarget;
-      n.element = o, o.style.cursor = h(o);
+      const s = u.currentTarget;
+      n.element = s, s.style.cursor = h(s);
     },
     dispose: a
   };
@@ -1595,12 +1595,12 @@ function Ln(t) {
       const g = t.sensorGroupType?.() ?? "mean";
       return $e(c, g, !0);
     }
-  }), s = z(() => i() ? void 0 : t.emptyStateConfig);
+  }), o = z(() => i() ? void 0 : t.emptyStateConfig);
   return {
     entities: t.entities,
     groupData: r,
     aggregatedData: a,
-    emptyState: s,
+    emptyState: o,
     hasEntities: i,
     count: n
   };
@@ -1912,10 +1912,10 @@ export {
   L as WIDGET_Z,
   P as Widget,
   Yt as WidgetContent,
-  st as WidgetCtx,
+  ot as WidgetCtx,
   Wn as WidgetDialog,
   Jt as WidgetEmptyState,
-  se as WidgetIcon,
+  oe as WidgetIcon,
   ir as WidgetManifestSchema,
   bt as WidgetMetrics,
   Pt as WidgetSliderFill,
@@ -1928,7 +1928,7 @@ export {
   En as anyEntityInState,
   Sn as applyCssVars,
   pn as applyLayout,
-  ot as builtInVariants,
+  st as builtInVariants,
   we as calculateLightGroup,
   $e as calculateSensorGroup,
   Tt as classicGlass,
@@ -1962,8 +1962,8 @@ export {
   ke as isEntityAvailable,
   lt as mergeVariants,
   Et as minimal,
-  sr as parseGridSize,
-  or as serializeGridSize,
+  or as parseGridSize,
+  sr as serializeGridSize,
   N as spacing,
   Xn as stateColors,
   H as typography,

package/dist/vite/index.js

@@ -36,7 +36,7 @@ function J(e, n) {
       const t = g(e, i, "manifest.json");
       try {
         const s = JSON.parse(h(t, "utf-8"));
-        r.push({ ...s, tag: i, bundleUrl: `./${i}.js` });
+        r.push({ ...s, bundleUrl: `./${i}.js` });
       } catch {
       }
     }

package/package.json

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

package/preview/host.tsx

@@ -41,7 +41,7 @@ function PreviewHost() {
               "margin-top": "4px",
             }}
           >
-            <{widget.manifest.tag}> | {widget.manifest.type} | {widget.manifest.size}
+            <{widget.manifest.name}> | {widget.manifest.type} | {widget.manifest.size}
           </p>
         </div>
         <button