@glasshome/widget-sdk 0.3.7 → 0.4.0

package/dist/index.js

@@ -1,34 +1,34 @@
-import { createSignal as j, createContext as Ot, useContext as Ct, createEffect as q, untrack as yt, createMemo as N, splitProps as Tt, on as wt, Show as et } from "solid-js";
-import { z as X } from "zod";
-import { GridSizeSchema as vr, PublishBodySchema as yr, PublishConfirmSchema as wr, PublishRequestSchema as $r, WidgetManifestSchema as pr, formatSchemaError as kr, parseGridSize as Sr, serializeGridSize as Cr } from "./schemas.js";
-import { memo as _, effect as z, setStyleProperty as M, className as S, template as w, insert as b, style as ot, createComponent as T, addEventListener as nt, use as Vt, delegateEvents as At } from "solid-js/web";
-import { clsx as Wt } from "clsx";
-import { twMerge as Rt } from "tailwind-merge";
-import { createElementSize as It } from "@solid-primitives/resize-observer";
-import { createForm as Ht, zodForm as Gt, reset as Pt, setValue as Lt, getValue as Bt } from "@modular-forms/solid";
-function Tn(t) {
-  const [e] = j(t);
-  return e;
+import { createSignal as H, createContext as Ee, useContext as pe, onMount as Te, createEffect as U, untrack as xe, createMemo as M, splitProps as Oe, on as be, Show as J } from "solid-js";
+import { z as j } from "zod";
+import { GridSizeSchema as mr, PublishBodySchema as fr, PublishConfirmSchema as hr, PublishRequestSchema as xr, WidgetManifestSchema as br, formatSchemaError as vr, parseGridSize as wr, serializeGridSize as yr } from "./schemas.js";
+import { effect as z, className as S, style as Z, template as v, insert as h, setStyleProperty as V, memo as E, createComponent as O, addEventListener as Q, use as Ve, delegateEvents as Ne } from "solid-js/web";
+import { clsx as We } from "clsx";
+import { twMerge as Ae } from "tailwind-merge";
+import { createElementSize as Ie } from "@solid-primitives/resize-observer";
+import { createForm as Pe, zodForm as Le, reset as Re, setValue as He, getValue as Ge } from "@modular-forms/solid";
+function zn(e) {
+  const [t] = H(e);
+  return t;
 }
-function Mt(t) {
-  return X.toJSONSchema(t, {
-    override: (e) => {
-      const r = X.globalRegistry.get(e.zodSchema);
-      return r && typeof r == "object" && Object.keys(r).length > 0 ? { ...e.jsonSchema, ...r } : e.jsonSchema;
+function ke(e) {
+  return j.toJSONSchema(e, {
+    override: (t) => {
+      const r = j.globalRegistry.get(t.zodSchema);
+      return r && typeof r == "object" && Object.keys(r).length > 0 ? { ...t.jsonSchema, ...r } : t.jsonSchema;
     }
   });
 }
-function jt(t) {
+function je(e) {
   try {
-    return t.parse({});
+    return e.parse({});
   } catch {
     return {};
   }
 }
-function Vn(t) {
-  return t.configSchema && (t.manifest.schema || (t.manifest.schema = Mt(t.configSchema)), t.manifest.defaultConfig || (t.manifest.defaultConfig = jt(t.configSchema))), t;
+function Mn(e) {
+  return e.configSchema && (e.manifest.schema || (e.manifest.schema = ke(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = je(e.configSchema))), e;
 }
-const U = {
+const K = {
   /** Background layer (gradients, images, glows) */
   BACKGROUND: 0,
   /** Main content layer (icon, title, text) */
@@ -38,19 +38,128 @@ const U = {
   /** Action layer (buttons, edit controls) */
   ACTIONS: 30
 };
-function An(t) {
+function _n(e) {
 }
-const ht = Ot();
-function I() {
-  const t = Ct(ht);
-  if (!t)
+const ue = Ee();
+function P() {
+  const e = pe(ue);
+  if (!e)
     throw new Error("useWidgetContext must be used within a Widget component");
-  return t;
+  return e;
 }
-function k(...t) {
-  return Rt(Wt(t));
+const Be = `/* packages/public/widget-sdk/src/framework/theming/tokens.css
+ *
+ * Phase 25: Channel Core + Tone Tokens
+ * Authoritative SDK CSS contract. Injected once on first Widget mount
+ * via framework/theming/tokens.ts. Final palette tuned in Phase 29.
+ */
+
+/* Tone palette (VIS-C01) -- Phase 29 retune (VIS-P05).
+   Hand-tuned against apps/dash/src/routes/dev.palette-tune.tsx so each
+   tone reads vibrant at the 20% composition stop on both #fafaf9 (light)
+   and #0c0a09 (dark) without overpowering the calm-confidence aesthetic. */
+:root {
+  --tone-success:  oklch(0.70 0.18 145);  /* deeper L vs placeholder lifts chroma at 20% on light bg without going neon */
+  --tone-warning:  oklch(0.80 0.17 75);   /* keeps amber readable at 22%/11% gradient stops without yellowing the shell */
+  --tone-danger:   oklch(0.64 0.22 27);   /* anchors red just below midline so 20% alpha stays unambiguous on light bg */
+  --tone-info:     oklch(0.66 0.20 245);  /* +0.01 chroma so info-blue keeps presence in 30%/40% slider fill against light */
+  --tone-neutral:  oklch(0.65 0.02 250);  /* pinned literal -- matches @property --widget-color initial-value (tokens.test) */
+  --tone-accent:   oklch(0.74 0.18 60);   /* +0.02 chroma for warm-amber accent so glow reads at 50% on light icon bg */
+
+  /* Envelope vars (VIS-C03), light mode -- retained from Phase 25 baseline */
+  --widget-grad-strength:    1;
+  --widget-glow-default:     0.4;
+  --widget-border-highlight: oklch(0.98 0 0 / 0.4);
+}
+
+.dark {
+  --tone-success:  oklch(0.74 0.18 145);  /* +0.04 L lifts chroma at 20% alpha against #0c0a09 so green isn't muddy */
+  --tone-warning:  oklch(0.82 0.17 75);   /* +0.02 L only -- amber already bright on dark bg, more would wash the gradient */
+  --tone-danger:   oklch(0.68 0.22 27);   /* +0.04 L preserves red identity without dipping into maroon at low alpha */
+  --tone-info:     oklch(0.70 0.20 245);  /* +0.04 L plus chroma parity with light keeps info-blue vibrant at 30%/40% on dark */
+  --tone-neutral:  oklch(0.69 0.02 250);  /* +0.04 L vs light, chroma parity -- defaults read calm on dark widget surfaces */
+  --tone-accent:   oklch(0.78 0.18 60);   /* +0.04 L matches accent glow envelope so 50% icon glow stays warm on dark */
+
+  --widget-grad-strength:    1.1;
+  --widget-glow-default:     0.5;
+  --widget-border-highlight: oklch(1 0 0 / 0.08);
+}
+
+/* @property declaration for animatable channel base (VIS-C04, D-11)
+   initial-value must be a literal <color>; cannot reference var(). */
+@property --widget-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.65 0.02 250);
+}
+
+/* Channel defaults on the Widget root (VIS-C02, D-08) */
+.glasshome-widget {
+  --widget-color: var(--tone-neutral);
+  --widget-glow-strength: var(--widget-glow-default);
+}
+
+/* === Phase 26 additions === */
+
+/* VIS-P01 shell gradient + VIS-P02 inset highlight (D-02, D-03, D-06) */
+.glasshome-widget {
+  background: var(--widget-gradient,
+    linear-gradient(135deg,
+      color-mix(in oklch, var(--widget-color) calc(22% * var(--widget-grad-strength)), transparent),
+      color-mix(in oklch, var(--widget-color-to, var(--widget-color)) calc(11% * var(--widget-grad-strength)), transparent)
+    )
+  );
+  box-shadow: inset 0 1px 0 var(--widget-border-highlight);
+}
+
+/* VIS-P03 icon channel rendering (D-16) */
+.glasshome-widget-icon {
+  background: var(--widget-icon-color, var(--widget-color));
+  box-shadow: 0 0 calc(var(--widget-glow-strength) * 30px)
+    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 50%, transparent);
+  /* Glyph keeps icon-bg hue but flips to L extreme via sign() step + damps chroma.
+     bg L > 0.5 -> glyph L=0.09 (dark); bg L < 0.5 -> glyph L=0.95 (light).
+     Chroma 0.2x of bg keeps subtle hue tint without competing with bg saturation.
+     Requires CSS relative color (Chromium 119+, Safari 16.4+, Firefox 128+) and
+     sign() (Chromium 111+, Safari 18.2+, Firefox 118+). */
+  color: oklch(from var(--widget-icon-color, var(--widget-color)) calc(0.52 + sign(0.5 - l) * 0.43) calc(c * 0.2) h);
+}
+
+/* D-13 loading overlay tint */
+.glasshome-widget-loading {
+  background: color-mix(in oklch, var(--widget-color) 20%, transparent);
+}
+
+/* === Phase 27 additions === */
+
+/* VIS-P04 slider fill channel rendering (D-05, D-06, D-08).
+   Mirrors .glasshome-widget-icon precedent: --widget-icon-color override
+   with --widget-color fallback. Glow rendered via box-shadow on the same
+   fill element (D-07). 30% bg opacity preserves prior 0.3 default; 40px
+   blur approximates prior blur-2xl on the deleted glow div; glow radius
+   modulated by --widget-glow-strength to track the per-mode envelope. */
+.glasshome-widget-slider-fill {
+  background: color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 30%, transparent);
+  box-shadow: 0 0 calc(var(--widget-glow-strength) * 40px)
+    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 40%, transparent);
+}
+`;
+let oe = !1;
+function Fe(e) {
+  if (oe) return;
+  const t = e ?? (typeof document > "u" ? void 0 : document);
+  if (!t) return;
+  if (t.head.querySelector?.("style[data-glasshome-tokens]")) {
+    oe = !0;
+    return;
+  }
+  const r = t.createElement("style");
+  r.setAttribute("data-glasshome-tokens", ""), r.textContent = Be, t.head.appendChild(r), oe = !0;
+}
+function $(...e) {
+  return Ae(We(e));
 }
-const Ft = {
+const Ue = {
   id: "classic-glass",
   name: "Classic Glass",
   description: "Default glassmorphism design with blur background and gradient",
@@ -78,7 +187,7 @@ const Ft = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, Ut = {
+}, Ye = {
   id: "minimal",
   name: "Minimal",
   description: "Clean, minimal design with no background effects",
@@ -107,7 +216,7 @@ const Ft = {
     active: !1,
     focus: !0
   }
-}, Yt = {
+}, Ke = {
   id: "compact-horizontal",
   name: "Compact Horizontal",
   description: "Horizontal layout for compact widgets",
@@ -135,33 +244,33 @@ const Ft = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, bt = {
-  "classic-glass": Ft,
-  minimal: Ut,
-  "compact-horizontal": Yt
+}, ge = {
+  "classic-glass": Ue,
+  minimal: Ye,
+  "compact-horizontal": Ke
 };
-function Kt(t) {
-  return bt[t];
+function qe(e) {
+  return ge[e];
 }
-function Wn(t) {
-  return t in bt;
+function En(e) {
+  return e in ge;
 }
-function Rn() {
-  return Object.keys(bt);
+function Tn() {
+  return Object.keys(ge);
 }
-function zt(t, e) {
-  if (typeof t != "object" || t === null)
-    return e;
-  const r = { ...t };
-  for (const i in e) {
-    const n = e[i], a = t[i];
+function $e(e, t) {
+  if (typeof e != "object" || e === null)
+    return t;
+  const r = { ...e };
+  for (const i in t) {
+    const n = t[i], a = e[i];
     if (n !== void 0) {
       if (Array.isArray(n)) {
         r[i] = n;
         continue;
       }
       if (typeof n == "object" && n !== null && !Array.isArray(n)) {
-        typeof a == "object" && a !== null ? r[i] = zt(a, n) : r[i] = n;
+        typeof a == "object" && a !== null ? r[i] = $e(a, n) : r[i] = n;
         continue;
       }
       r[i] = n;
@@ -169,126 +278,120 @@ function zt(t, e) {
   }
   return r;
 }
-function qt(t, e) {
-  if (!(!t && !e))
-    return t ? e ? {
-      container: { ...t.container, ...e.container },
-      class: e.class ?? t.class,
-      cssVars: { ...t.cssVars, ...e.cssVars }
-    } : t : e;
-}
-function Xt(t, e) {
-  return e ?? t;
-}
-function Jt(t, e) {
-  if (!(!t && !e))
-    return t ? e ? {
-      visible: { ...t.visible, ...e.visible },
-      styles: zt(t.styles ?? {}, e.styles ?? {}),
-      classNames: { ...t.classNames, ...e.classNames }
-    } : t : e;
-}
-function Zt(t, e) {
-  if (!(!t && !e))
-    return t ? e ? {
-      background: e.background ?? t.background,
-      overlay: e.overlay ?? t.overlay,
-      decorations: e.decorations ?? t.decorations
-    } : t : e;
-}
-function Qt(t, e) {
-  if (!(!t && !e))
-    return t ? e ? {
-      hover: e.hover ?? t.hover,
-      active: e.active ?? t.active,
-      focus: e.focus ?? t.focus,
-      hoverScale: e.hoverScale ?? t.hoverScale,
-      activeScale: e.activeScale ?? t.activeScale
-    } : t : e;
-}
-function xt(t, e) {
+function Xe(e, t) {
+  if (!(!e && !t))
+    return e ? t ? {
+      container: { ...e.container, ...t.container },
+      class: t.class ?? e.class,
+      cssVars: { ...e.cssVars, ...t.cssVars }
+    } : e : t;
+}
+function Je(e, t) {
+  return t ?? e;
+}
+function Ze(e, t) {
+  if (!(!e && !t))
+    return e ? t ? {
+      visible: { ...e.visible, ...t.visible },
+      styles: $e(e.styles ?? {}, t.styles ?? {}),
+      classNames: { ...e.classNames, ...t.classNames }
+    } : e : t;
+}
+function Qe(e, t) {
+  if (!(!e && !t))
+    return e ? t ? {
+      background: t.background ?? e.background,
+      overlay: t.overlay ?? e.overlay,
+      decorations: t.decorations ?? e.decorations
+    } : e : t;
+}
+function et(e, t) {
+  if (!(!e && !t))
+    return e ? t ? {
+      hover: t.hover ?? e.hover,
+      active: t.active ?? e.active,
+      focus: t.focus ?? e.focus,
+      hoverScale: t.hoverScale ?? e.hoverScale,
+      activeScale: t.activeScale ?? e.activeScale
+    } : e : t;
+}
+function me(e, t) {
   return {
-    id: e.id ?? t.id,
-    name: e.name ?? t.name,
-    description: e.description ?? t.description,
-    styles: qt(t.styles, e.styles),
-    layout: Xt(t.layout, e.layout),
-    elements: Jt(t.elements, e.elements),
-    plugins: Zt(t.plugins, e.plugins),
-    interactions: Qt(t.interactions, e.interactions),
-    extends: e.extends ?? t.extends
+    id: t.id ?? e.id,
+    name: t.name ?? e.name,
+    description: t.description ?? e.description,
+    styles: Xe(e.styles, t.styles),
+    layout: Je(e.layout, t.layout),
+    elements: Ze(e.elements, t.elements),
+    plugins: Qe(e.plugins, t.plugins),
+    interactions: et(e.interactions, t.interactions),
+    extends: t.extends ?? e.extends
   };
 }
-function In(t, e) {
+function On(e, t) {
   return {
-    ...e,
-    extends: t
+    ...t,
+    extends: e
   };
 }
-function Hn(...t) {
-  if (t.length === 0)
+function Vn(...e) {
+  if (e.length === 0)
     throw new Error("composeVariants requires at least one variant");
-  return t.length === 1 ? t[0] : t.reduce((e, r) => xt(e, r));
+  return e.length === 1 ? e[0] : e.reduce((t, r) => me(t, r));
 }
-function Gn(t, e) {
-  return xt(t, { layout: e });
+function Nn(e, t) {
+  return me(e, { layout: t });
 }
-function Pn(t, e) {
-  return xt(t, {
-    styles: { cssVars: e }
+function Wn(e, t) {
+  return me(e, {
+    styles: { cssVars: t }
   });
 }
-function Ln(t = "column", e = "start", r = "start", i) {
+function An(e = "column", t = "start", r = "start", i) {
   return {
     type: "flex",
-    direction: t,
-    align: e,
+    direction: e,
+    align: t,
     justify: r,
     ...i
   };
 }
-var te = /* @__PURE__ */ w("<div>"), ee = /* @__PURE__ */ w('<div class="pointer-events-none absolute inset-0 opacity-40 blur-2xl">');
-function ne(t) {
-  const e = I(), r = () => e.orientation() === "vertical" ? `inset(${100 - t.value}% 0 0 0)` : `inset(0 ${100 - t.value}% 0 0)`, i = () => t.color ?? "rgb(59, 130, 246)";
-  return [_(() => _(() => !!((t.glow ?? !1) && t.value > 0))() && (() => {
-    var n = ee();
+var tt = /* @__PURE__ */ v("<div>");
+function nt(e) {
+  const t = P(), r = () => t.orientation() === "vertical" ? `inset(${100 - e.value}% 0 0 0)` : `inset(0 ${100 - e.value}% 0 0)`, i = () => {
+    const n = {
+      "clip-path": r(),
+      "z-index": K.BACKGROUND
+    };
+    return e.color && (n["--widget-icon-color"] = e.color), n;
+  };
+  return (() => {
+    var n = tt();
     return z((a) => {
-      var o = i(), s = U.BACKGROUND;
-      return o !== a.e && M(n, "background", a.e = o), s !== a.t && M(n, "z-index", a.t = s), a;
+      var o = $("glasshome-widget-slider-fill pointer-events-none absolute inset-0", e.isDragging ? "duration-0" : "transition-all duration-300 ease-out", e.class), s = i();
+      return o !== a.e && S(n, a.e = o), a.t = Z(n, s, a.t), a;
     }, {
       e: void 0,
       t: void 0
     }), n;
-  })()), (() => {
-    var n = te();
-    return z((a) => {
-      var o = k("pointer-events-none absolute inset-0", t.isDragging ? "duration-0" : "transition-all duration-300 ease-out", t.class), s = i(), l = r(), d = t.opacity ?? 0.3, c = U.BACKGROUND;
-      return o !== a.e && S(n, a.e = o), s !== a.t && M(n, "background", a.t = s), l !== a.a && M(n, "clip-path", a.a = l), d !== a.o && M(n, "opacity", a.o = d), c !== a.i && M(n, "z-index", a.i = c), a;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    }), n;
-  })()];
+  })();
 }
-const rt = {
+const ee = {
   S1: { xs: 4, sm: 4, md: 6, lg: 6, xl: 8 },
   S2: { xs: 6, sm: 8, md: 10, lg: 12, xl: 14 },
   S3: { xs: 8, sm: 10, md: 12, lg: 14, xl: 16 },
   S4: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 }
 }, W = {
   /** Extra small spacing (4-8px) */
-  S1: (t) => `${rt.S1[t]}px`,
+  S1: (e) => `${ee.S1[e]}px`,
   /** Small spacing (6-14px) - default for most layouts */
-  S2: (t) => `${rt.S2[t]}px`,
+  S2: (e) => `${ee.S2[e]}px`,
   /** Medium spacing (8-16px) */
-  S3: (t) => `${rt.S3[t]}px`,
+  S3: (e) => `${ee.S3[e]}px`,
   /** Large spacing (12-20px) */
-  S4: (t) => `${rt.S4[t]}px`,
+  S4: (e) => `${ee.S4[e]}px`,
   /** Icon container size in pixels */
-  icon: (t) => ({
+  icon: (e) => ({
     xs: 32,
     // 1x1, 1x2 widgets
     sm: 40,
@@ -299,9 +402,9 @@ const rt = {
     // 2x6, 3x6, 4x2 widgets
     xl: 56
     // 4x4 widgets
-  })[t],
+  })[e],
   /** Icon stroke size for lucide icons */
-  iconSize: (t) => ({
+  iconSize: (e) => ({
     xs: 18,
     // Smaller stroke for tiny widgets
     sm: 20,
@@ -312,9 +415,9 @@ const rt = {
     // Large widgets
     xl: 28
     // Extra large widgets
-  })[t],
+  })[e],
   /** Spacing between icon and title */
-  iconToTitle: (t) => ({
+  iconToTitle: (e) => ({
     xs: "8px",
     // Tight spacing for small widgets
     sm: "10px",
@@ -325,9 +428,9 @@ const rt = {
     // More breathing room
     xl: "16px"
     // Maximum spacing (@[400px]:mt-4 = 16px)
-  })[t],
+  })[e],
   /** Container padding */
-  container: (t) => ({
+  container: (e) => ({
     xs: "8px",
     // Minimal padding for tiny widgets
     sm: "16px",
@@ -336,8 +439,8 @@ const rt = {
     lg: "20px",
     // More padding for larger widgets
     xl: "20px"
-  })[t]
-}, re = {
+  })[e]
+}, rt = {
   4: "gap-1",
   6: "gap-1.5",
   8: "gap-2",
@@ -348,25 +451,25 @@ const rt = {
   18: "gap-[18px]",
   20: "gap-5"
 };
-function ie(t, e) {
-  const r = rt[t][e];
-  return re[r] || `gap-[${r}px]`;
+function it(e, t) {
+  const r = ee[e][t];
+  return rt[r] || `gap-[${r}px]`;
 }
-var ae = /* @__PURE__ */ w("<div>");
-function oe(t) {
-  const e = I();
+var at = /* @__PURE__ */ v("<div>");
+function ot(e) {
+  const t = P();
   return (() => {
-    var r = ae();
-    return b(r, () => t.children), z((i) => {
-      var n = k(
+    var r = at();
+    return h(r, () => e.children), z((i) => {
+      var n = $(
         "relative flex h-full w-full overflow-hidden",
         // Ensure controls (ml-auto divs) are above other content
         "[&_div.ml-auto]:relative [&_div.ml-auto]:z-30",
-        e.contentLayout() === "horizontal" ? "flex-row items-center" : "flex-col justify-between",
-        ie("S3", e.size()),
-        t.class
-      ), a = W.container(e.size()), o = U.CONTENT;
-      return n !== i.e && S(r, i.e = n), a !== i.t && M(r, "padding", i.t = a), o !== i.a && M(r, "z-index", i.a = o), i;
+        t.contentLayout() === "horizontal" ? "flex-row items-center" : "flex-col justify-between",
+        it("S3", t.size()),
+        e.class
+      ), a = W.container(t.size()), o = K.CONTENT;
+      return n !== i.e && S(r, i.e = n), a !== i.t && V(r, "padding", i.t = a), o !== i.a && V(r, "z-index", i.a = o), i;
     }, {
       e: void 0,
       t: void 0,
@@ -374,9 +477,9 @@ function oe(t) {
     }), r;
   })();
 }
-const F = {
+const G = {
   /** Container base text sizing */
-  container: (t) => ({
+  container: (e) => ({
     xs: "text-xs",
     // Smallest widgets
     sm: "text-sm",
@@ -387,9 +490,9 @@ const F = {
     // Large widgets
     xl: "text-lg"
     // Extra large widgets
-  })[t],
+  })[e],
   /** Title text sizing (main heading) */
-  title: (t) => ({
+  title: (e) => ({
     xs: "text-xs",
     // 12px - Very compact
     sm: "text-xs",
@@ -400,9 +503,9 @@ const F = {
     // 14px - Maintain size
     xl: "text-sm"
     // 14px - Don't go too large for secondary text
-  })[t],
+  })[e],
   /** Subtitle/secondary text sizing */
-  subtitle: (t) => ({
+  subtitle: (e) => ({
     xs: "text-xs",
     // 12px - Very compact
     sm: "text-sm",
@@ -413,9 +516,9 @@ const F = {
     // 14px - Maintain size
     xl: "text-base"
     // 14px - Don't go too large for secondary text
-  })[t],
+  })[e],
   /** Value display text sizing (large numbers) */
-  value: (t) => ({
+  value: (e) => ({
     xs: "text-lg",
     // 18px - Still readable on small widgets
     sm: "text-xl",
@@ -426,9 +529,9 @@ const F = {
     // 30px - Very prominent
     xl: "text-4xl"
     // 36px - Maximum impact
-  })[t],
+  })[e],
   /** Badge text sizing (entity count badges) */
-  badge: (t) => ({
+  badge: (e) => ({
     xs: "text-xs",
     // 12px - Compact badge
     sm: "text-xs",
@@ -439,9 +542,9 @@ const F = {
     // 14px - Slightly larger for readability
     xl: "text-sm"
     // 14px - Maximum badge size
-  })[t],
+  })[e],
   /** Metric label text sizing */
-  metricLabel: (t) => ({
+  metricLabel: (e) => ({
     xs: "text-xs",
     // 12px - Compact labels
     sm: "text-xs",
@@ -452,9 +555,9 @@ const F = {
     // 14px - More readable on large widgets
     xl: "text-sm"
     // 14px
-  })[t],
+  })[e],
   /** Metric value text sizing */
-  metricValue: (t) => ({
+  metricValue: (e) => ({
     xs: "text-sm",
     // 14px - Readable metric values
     sm: "text-sm",
@@ -465,17 +568,17 @@ const F = {
     // 16px - Slightly larger
     xl: "text-base"
     // 16px
-  })[t],
+  })[e],
   /** Status text (same as subtitle but semantic) */
-  status: (t) => ({
+  status: (e) => ({
     xs: "text-md",
     sm: "text-xl",
     md: "text-2xl",
     lg: "text-3xl",
     xl: "text-3xl"
-  })[t],
+  })[e],
   /** Empty state message text */
-  emptyState: (t) => ({
+  emptyState: (e) => ({
     xs: "text-xs",
     // 12px
     sm: "text-sm",
@@ -486,59 +589,59 @@ const F = {
     // 16px
     xl: "text-base"
     // 16px
-  })[t]
+  })[e]
 };
-var se = /* @__PURE__ */ w("<div><div>"), le = /* @__PURE__ */ w("<div>"), ce = /* @__PURE__ */ w("<h3>"), ue = /* @__PURE__ */ w("<p>"), de = /* @__PURE__ */ w("<div class=mt-2>");
-function ge(t) {
-  const e = I(), r = () => e.contentLayout() === "horizontal";
+var st = /* @__PURE__ */ v("<div><div>"), lt = /* @__PURE__ */ v("<div>"), ct = /* @__PURE__ */ v("<h3>"), dt = /* @__PURE__ */ v("<p>"), ut = /* @__PURE__ */ v("<div class=mt-2>");
+function gt(e) {
+  const t = P(), r = () => t.contentLayout() === "horizontal";
   return (() => {
-    var i = se(), n = i.firstChild;
-    return b(i, (() => {
-      var a = _(() => !!t.icon);
+    var i = st(), n = i.firstChild;
+    return h(i, (() => {
+      var a = E(() => !!e.icon);
       return () => a() && (() => {
-        var o = le();
-        return b(o, () => t.icon), z((s) => {
-          var l = k("flex items-center justify-center text-foreground/30", r() ? "shrink-0" : ""), d = `${W.icon(e.size())}px`, c = `${W.icon(e.size())}px`;
-          return l !== s.e && S(o, s.e = l), d !== s.t && M(o, "width", s.t = d), c !== s.a && M(o, "height", s.a = c), s;
+        var o = lt();
+        return h(o, () => e.icon), z((s) => {
+          var l = $("flex items-center justify-center text-foreground/30", r() ? "shrink-0" : ""), g = `${W.icon(t.size())}px`, m = `${W.icon(t.size())}px`;
+          return l !== s.e && S(o, s.e = l), g !== s.t && V(o, "width", s.t = g), m !== s.a && V(o, "height", s.a = m), s;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), o;
       })();
-    })(), n), b(n, (() => {
-      var a = _(() => !!(t.title ?? "No data"));
+    })(), n), h(n, (() => {
+      var a = E(() => !!(e.title ?? "No data"));
       return () => a() && (() => {
-        var o = ce();
-        return b(o, () => t.title ?? "No data"), z((s) => {
-          var l = k("font-semibold text-foreground/60", F.subtitle(e.size())), d = r() ? "100%" : "80%";
-          return l !== s.e && S(o, s.e = l), d !== s.t && M(o, "max-width", s.t = d), s;
+        var o = ct();
+        return h(o, () => e.title ?? "No data"), z((s) => {
+          var l = $("font-semibold text-foreground/60", G.subtitle(t.size())), g = r() ? "100%" : "80%";
+          return l !== s.e && S(o, s.e = l), g !== s.t && V(o, "max-width", s.t = g), s;
         }, {
           e: void 0,
           t: void 0
         }), o;
       })();
-    })(), null), b(n, (() => {
-      var a = _(() => !!t.message);
+    })(), null), h(n, (() => {
+      var a = E(() => !!e.message);
       return () => a() && (() => {
-        var o = ue();
-        return b(o, () => t.message), z((s) => {
-          var l = k("text-foreground/50", F.emptyState(e.size())), d = r() ? "100%" : "85%";
-          return l !== s.e && S(o, s.e = l), d !== s.t && M(o, "max-width", s.t = d), s;
+        var o = dt();
+        return h(o, () => e.message), z((s) => {
+          var l = $("text-foreground/50", G.emptyState(t.size())), g = r() ? "100%" : "85%";
+          return l !== s.e && S(o, s.e = l), g !== s.t && V(o, "max-width", s.t = g), s;
         }, {
           e: void 0,
           t: void 0
         }), o;
       })();
-    })(), null), b(n, (() => {
-      var a = _(() => !!t.action);
+    })(), null), h(n, (() => {
+      var a = E(() => !!e.action);
       return () => a() && (() => {
-        var o = de();
-        return b(o, () => t.action), o;
+        var o = ut();
+        return h(o, () => e.action), o;
       })();
     })(), null), z((a) => {
-      var o = k("flex h-full w-full", r() ? "flex-row items-center justify-start" : "flex-col items-center justify-center text-center", t.class), s = W.S2(e.size()), l = W.container(e.size()), d = k("flex flex-col", r() ? "items-start text-left" : "items-center text-center"), c = W.S1(e.size());
-      return o !== a.e && S(i, a.e = o), s !== a.t && M(i, "gap", a.t = s), l !== a.a && M(i, "padding", a.a = l), d !== a.o && S(n, a.o = d), c !== a.i && M(n, "gap", a.i = c), a;
+      var o = $("flex h-full w-full", r() ? "flex-row items-center justify-start" : "flex-col items-center justify-center text-center", e.class), s = W.S2(t.size()), l = W.container(t.size()), g = $("flex flex-col", r() ? "items-start text-left" : "items-center text-center"), m = W.S1(t.size());
+      return o !== a.e && S(i, a.e = o), s !== a.t && V(i, "gap", a.t = s), l !== a.a && V(i, "padding", a.a = l), g !== a.o && S(n, a.o = g), m !== a.i && V(n, "gap", a.i = m), a;
     }, {
       e: void 0,
       t: void 0,
@@ -548,154 +651,78 @@ function ge(t) {
     }), i;
   })();
 }
-function me(t) {
-  const e = t.match(/hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*\)/);
-  return e ? { h: Number(e[1]), s: Number(e[2]), l: Number(e[3]) } : null;
-}
-function fe(t) {
-  const e = t.match(/rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)/);
-  return e ? Dt(Number(e[1]), Number(e[2]), Number(e[3])) : null;
-}
-function he(t) {
-  const e = t.match(/^#([0-9a-f]{3,8})$/i);
-  if (!e) return null;
-  let r = e[1];
-  r.length === 3 && (r = r[0] + r[0] + r[1] + r[1] + r[2] + r[2]);
-  const i = Number.parseInt(r.slice(0, 2), 16), n = Number.parseInt(r.slice(2, 4), 16), a = Number.parseInt(r.slice(4, 6), 16);
-  return Dt(i, n, a);
-}
-function Dt(t, e, r) {
-  t /= 255, e /= 255, r /= 255;
-  const i = Math.max(t, e, r), n = Math.min(t, e, r), a = (i + n) / 2;
-  if (i === n) return { h: 0, s: 0, l: a * 100 };
-  const o = i - n, s = a > 0.5 ? o / (2 - i - n) : o / (i + n);
-  let l = 0;
-  return i === t ? l = ((e - r) / o + (e < r ? 6 : 0)) / 6 : i === e ? l = ((r - t) / o + 2) / 6 : l = ((t - e) / o + 4) / 6, { h: l * 360, s: s * 100, l: a * 100 };
-}
-function be(t) {
-  return me(t) ?? fe(t) ?? he(t);
-}
-function $t(t, e, r, i) {
-  const n = Math.round(t), a = Math.round(Math.min(100, Math.max(0, e))), o = Math.round(Math.min(100, Math.max(0, r)));
-  return i !== void 0 && i < 1 ? `hsla(${n}, ${a}%, ${o}%, ${i})` : `hsl(${n}, ${a}%, ${o}%)`;
-}
-function xe(t) {
-  const e = be(t);
-  if (!e) return null;
-  const { h: r, s: i, l: n } = e;
-  let a, o = Math.min(i + 10, 100);
-  n < 25 ? (a = n + 12, o = Math.min(i + 15, 100)) : n < 40 ? a = Math.max(n - 8, 15) : a = Math.max(18, n * 0.3), i < 15 && (o = 10, a = Math.max(a, 20));
-  const s = $t(r, o, a, 0.85), l = $t(r, Math.min(i, 90), Math.min(n, 55), 0.5);
-  return { background: s, glow: l };
-}
-var ve = /* @__PURE__ */ w('<div><div class="flex items-center justify-center text-foreground">'), pt = /* @__PURE__ */ w("<div>");
-function ye(t) {
-  const e = I(), r = () => t.dynamicColor ? xe(t.dynamicColor) : null, i = () => !!r(), n = () => {
-    const l = r();
-    if (l)
-      return {
-        "background-color": l.background
-      };
-  }, a = () => {
-    const l = r();
-    if (l)
-      return {
-        "box-shadow": `0 0 25px ${l.glow}`
-      };
-  }, o = () => {
-    const l = {
-      width: `${W.icon(e.size())}px`,
-      height: `${W.icon(e.size())}px`,
+var mt = /* @__PURE__ */ v('<div><div class="flex items-center justify-center">'), ve = /* @__PURE__ */ v('<div class="glasshome-widget-icon absolute">');
+function ft(e) {
+  const t = P(), r = () => {
+    const n = {
+      width: `${W.icon(t.size())}px`,
+      height: `${W.icon(t.size())}px`,
       "border-radius": "var(--radius-sm, 12px)"
-    }, d = n(), c = a();
-    return d && Object.assign(l, d), c && Object.assign(l, c), l;
-  }, s = (l, d, c) => {
-    const v = {
-      width: `${W.icon(e.size()) * 1.02}px`,
-      height: `${W.icon(e.size()) * 1.02}px`,
-      "border-radius": "var(--radius-sm, 12px)",
-      bottom: `${-W.icon(e.size()) * l}px`,
-      right: `${-W.icon(e.size()) * (l * 0.71)}px`,
-      "z-index": d,
-      opacity: c
-    }, C = n();
-    return C && Object.assign(v, C), v;
-  };
+    };
+    return e.color && (n["--widget-icon-color"] = e.color), n;
+  }, i = (n, a, o) => ({
+    width: `${W.icon(t.size()) * 1.02}px`,
+    height: `${W.icon(t.size()) * 1.02}px`,
+    "border-radius": "var(--radius-sm, 12px)",
+    bottom: `${-W.icon(t.size()) * n}px`,
+    right: `${-W.icon(t.size()) * (n * 0.71)}px`,
+    "z-index": a,
+    opacity: o
+  });
   return (() => {
-    var l = ve(), d = l.firstChild;
-    return b(l, (() => {
-      var c = _(() => (t.entityCount ?? 1) >= 2);
-      return () => c() && (() => {
-        var v = pt();
-        return z((C) => {
-          var m = k("absolute", !i() && (t.color ?? "bg-foreground/10")), x = s(0.14, -2, 0.45);
-          return m !== C.e && S(v, C.e = m), C.t = ot(v, x, C.t), C;
-        }, {
-          e: void 0,
-          t: void 0
-        }), v;
+    var n = mt(), a = n.firstChild;
+    return h(n, (() => {
+      var o = E(() => (e.entityCount ?? 1) >= 2);
+      return () => o() && (() => {
+        var s = ve();
+        return z((l) => Z(s, i(0.14, -2, 0.45), l)), s;
       })();
-    })(), d), b(l, (() => {
-      var c = _(() => (t.entityCount ?? 1) >= 3);
-      return () => c() && (() => {
-        var v = pt();
-        return z((C) => {
-          var m = k("absolute", !i() && (t.color ?? "bg-foreground/10")), x = s(0.28, -3, 0.2);
-          return m !== C.e && S(v, C.e = m), C.t = ot(v, x, C.t), C;
-        }, {
-          e: void 0,
-          t: void 0
-        }), v;
+    })(), a), h(n, (() => {
+      var o = E(() => (e.entityCount ?? 1) >= 3);
+      return () => o() && (() => {
+        var s = ve();
+        return z((l) => Z(s, i(0.28, -3, 0.2), l)), s;
       })();
-    })(), d), b(d, () => t.icon), z((c) => {
-      var v = k(
-        "relative flex shrink-0 items-center justify-center transition-all",
-        "pointer-events-none",
-        t.dimmed && "opacity-50",
-        // Only apply Tailwind classes when not using dynamic colors
-        !i() && t.glow && "shadow-[0_0_25px_var(--tw-shadow-color,transparent)]",
-        !i() && (t.color ?? "bg-foreground/10"),
-        !i() && t.glow,
-        t.class
-      ), C = o(), m = `${W.iconSize(e.size())}px`;
-      return v !== c.e && S(l, c.e = v), c.t = ot(l, C, c.t), m !== c.a && M(d, "font-size", c.a = m), c;
+    })(), a), h(a, () => e.icon), z((o) => {
+      var s = $("glasshome-widget-icon", "relative flex shrink-0 items-center justify-center transition-all", "pointer-events-none", e.dimmed && "opacity-50", e.class), l = r(), g = `${W.iconSize(t.size())}px`;
+      return s !== o.e && S(n, o.e = s), o.t = Z(n, l, o.t), g !== o.a && V(a, "font-size", o.a = g), o;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), l;
+    }), n;
   })();
 }
-var we = /* @__PURE__ */ w("<div>"), $e = /* @__PURE__ */ w("<div><div><span></span></div><div>"), pe = /* @__PURE__ */ w("<span class=shrink-0>"), ke = /* @__PURE__ */ w('<span class="ml-1 text-foreground/70">');
-function Se(t) {
-  const e = I(), r = () => {
-    const i = t.direction ?? "auto";
-    return i === "auto" ? e.orientation() === "horizontal" ? "horizontal" : "vertical" : i;
+var ht = /* @__PURE__ */ v("<div>"), xt = /* @__PURE__ */ v("<div><div><span></span></div><div>"), bt = /* @__PURE__ */ v("<span class=shrink-0>"), vt = /* @__PURE__ */ v('<span class="ml-1 text-foreground/70">');
+function wt(e) {
+  const t = P(), r = () => {
+    const i = e.direction ?? "auto";
+    return i === "auto" ? t.orientation() === "horizontal" ? "horizontal" : "vertical" : i;
   };
   return (() => {
-    var i = we();
-    return b(i, () => t.children), z(() => S(i, k("flex", r() === "horizontal" ? "flex-row gap-4" : "flex-col gap-2", t.class))), i;
+    var i = ht();
+    return h(i, () => e.children), z(() => S(i, $("flex", r() === "horizontal" ? "flex-row gap-4" : "flex-col gap-2", e.class))), i;
   })();
 }
-function Ce(t) {
-  const e = I();
+function yt(e) {
+  const t = P();
   return (() => {
-    var r = $e(), i = r.firstChild, n = i.firstChild, a = i.nextSibling;
-    return b(i, (() => {
-      var o = _(() => !!t.icon);
+    var r = xt(), i = r.firstChild, n = i.firstChild, a = i.nextSibling;
+    return h(i, (() => {
+      var o = E(() => !!e.icon);
       return () => o() && (() => {
-        var s = pe();
-        return b(s, () => t.icon), s;
+        var s = bt();
+        return h(s, () => e.icon), s;
       })();
-    })(), n), b(n, () => t.label), b(a, () => t.value, null), b(a, (() => {
-      var o = _(() => !!t.unit);
+    })(), n), h(n, () => e.label), h(a, () => e.value, null), h(a, (() => {
+      var o = E(() => !!e.unit);
       return () => o() && (() => {
-        var s = ke();
-        return b(s, () => t.unit), s;
+        var s = vt();
+        return h(s, () => e.unit), s;
       })();
     })(), null), z((o) => {
-      var s = k("flex flex-col", t.dimmed && "opacity-50", t.class), l = W.S1(e.size()), d = k("flex items-center gap-1 text-foreground/60", F.metricLabel(e.size())), c = k("font-semibold text-foreground", F.metricValue(e.size()));
-      return s !== o.e && S(r, o.e = s), l !== o.t && M(r, "gap", o.t = l), d !== o.a && S(i, o.a = d), c !== o.o && S(a, o.o = c), o;
+      var s = $("flex flex-col", e.dimmed && "opacity-50", e.class), l = W.S1(t.size()), g = $("flex items-center gap-1 text-foreground/60", G.metricLabel(t.size())), m = $("font-semibold text-foreground", G.metricValue(t.size()));
+      return s !== o.e && S(r, o.e = s), l !== o.t && V(r, "gap", o.t = l), g !== o.a && S(i, o.a = g), m !== o.o && S(a, o.o = m), o;
     }, {
       e: void 0,
       t: void 0,
@@ -704,47 +731,47 @@ function Ce(t) {
     }), r;
   })();
 }
-const _t = Se;
-_t.Item = Ce;
-var Me = /* @__PURE__ */ w("<p>");
-function ze(t) {
-  const e = I();
+const Se = wt;
+Se.Item = yt;
+var pt = /* @__PURE__ */ v("<p>");
+function kt(e) {
+  const t = P();
   return (() => {
-    var r = Me();
-    return b(r, (() => {
-      var i = _(() => !!t.isUnavailable);
-      return () => i() ? "Unavailable" : t.children;
+    var r = pt();
+    return h(r, (() => {
+      var i = E(() => !!e.isUnavailable);
+      return () => i() ? "Unavailable" : e.children;
     })()), z((i) => {
-      var n = k("relative font-bold text-foreground", t.dimmed && "opacity-40", F.status(e.size()), t.class), a = U.ACTIONS;
-      return n !== i.e && S(r, i.e = n), a !== i.t && M(r, "z-index", i.t = a), i;
+      var n = $("relative font-bold text-foreground", e.dimmed && "opacity-40", G.status(t.size()), e.class), a = K.ACTIONS;
+      return n !== i.e && S(r, i.e = n), a !== i.t && V(r, "z-index", i.t = a), i;
     }, {
       e: void 0,
       t: void 0
     }), r;
   })();
 }
-var De = /* @__PURE__ */ w("<p>");
-function _e(t) {
-  const e = I();
+var $t = /* @__PURE__ */ v("<p>");
+function St(e) {
+  const t = P();
   return (() => {
-    var r = De();
-    return b(r, () => t.children), z(() => S(r, k("truncate font-medium text-foreground/80", t.dimmed && "text-foreground/50", F.subtitle(e.size()), t.class))), r;
+    var r = $t();
+    return h(r, () => e.children), z(() => S(r, $("truncate font-medium text-foreground/80", e.dimmed && "text-foreground/50", G.subtitle(t.size()), e.class))), r;
   })();
 }
-var Ee = /* @__PURE__ */ w("<div><h3>"), Ne = /* @__PURE__ */ w("<span>");
-function Oe(t) {
-  const e = I();
+var Ct = /* @__PURE__ */ v("<div><h3>"), Dt = /* @__PURE__ */ v("<span>");
+function zt(e) {
+  const t = P();
   return (() => {
-    var r = Ee(), i = r.firstChild;
-    return b(i, () => t.children), b(r, (() => {
-      var n = _(() => t.badge !== void 0 && t.badge > 0);
+    var r = Ct(), i = r.firstChild;
+    return h(i, () => e.children), h(r, (() => {
+      var n = E(() => e.badge !== void 0 && e.badge > 0);
       return () => n() && (() => {
-        var a = Ne();
-        return b(a, () => t.badge), z(() => S(a, k("shrink-0 rounded-full bg-foreground/20 px-2 py-0.5 font-medium text-foreground", F.badge(e.size())))), a;
+        var a = Dt();
+        return h(a, () => e.badge), z(() => S(a, $("shrink-0 rounded-full bg-foreground/20 px-2 py-0.5 font-medium text-foreground", G.badge(t.size())))), a;
       })();
     })(), null), z((n) => {
-      var a = k("relative flex items-center", t.class), o = W.S1(e.size()), s = U.ACTIONS, l = k("truncate text-foreground/60", F.title(e.size()));
-      return a !== n.e && S(r, n.e = a), o !== n.t && M(r, "gap", n.t = o), s !== n.a && M(r, "z-index", n.a = s), l !== n.o && S(i, n.o = l), n;
+      var a = $("relative flex items-center", e.class), o = W.S1(t.size()), s = K.ACTIONS, l = $("truncate text-foreground/60", G.title(t.size()));
+      return a !== n.e && S(r, n.e = a), o !== n.t && V(r, "gap", n.t = o), s !== n.a && V(r, "z-index", n.a = s), l !== n.o && S(i, n.o = l), n;
     }, {
       e: void 0,
       t: void 0,
@@ -753,15 +780,15 @@ function Oe(t) {
     }), r;
   })();
 }
-function Bn(t) {
+function In(e) {
   return {
-    icon: t.icon,
-    title: t.title,
-    message: t.message || `Configure this widget to add ${t.entityType || "an entity"}`
+    icon: e.icon,
+    title: e.title,
+    message: e.message || `Configure this widget to add ${e.entityType || "an entity"}`
   };
 }
-function Te(t, e = !1) {
-  if (t.length === 0)
+function Mt(e, t = !1) {
+  if (e.length === 0)
     return {
       isGroup: !1,
       state: "unknown",
@@ -774,28 +801,28 @@ function Te(t, e = !1) {
       totalCount: 0,
       description: "No entities"
     };
-  const r = t.length > 1;
+  const r = e.length > 1;
   if (!r) {
-    const $ = t[0], O = $.state === "on", H = $.attributes?.brightness || 0, f = Math.round(H / 255 * 100);
+    const y = e[0], d = y.state === "on", _ = y.attributes?.brightness || 0, p = Math.round(_ / 255 * 100);
     return {
       isGroup: !1,
-      state: $.state,
-      isOn: O,
-      isUnavailable: $.state === "unavailable",
-      brightness: H,
-      brightnessPercent: f,
-      color: kt($),
-      onCount: O ? 1 : 0,
+      state: y.state,
+      isOn: d,
+      isUnavailable: y.state === "unavailable",
+      brightness: _,
+      brightnessPercent: p,
+      color: we(y),
+      onCount: d ? 1 : 0,
       totalCount: 1,
-      description: O ? "On" : "Off"
+      description: d ? "On" : "Off"
     };
   }
   let i = 0, n = 0, a = 0, o = 0, s = 0, l = 0;
-  const d = [];
-  for (const $ of t)
-    switch ($.state) {
+  const g = [];
+  for (const y of e)
+    switch (y.state) {
       case "on":
-        i++, $.attributes?.brightness !== void 0 && (s += $.attributes.brightness, l++), $.attributes?.rgb_color && d.push($.attributes.rgb_color);
+        i++, y.attributes?.brightness !== void 0 && (s += y.attributes.brightness, l++), y.attributes?.rgb_color && g.push(y.attributes.rgb_color);
         break;
       case "off":
         n++;
@@ -807,32 +834,32 @@ function Te(t, e = !1) {
         o++;
         break;
     }
-  const c = t.length, v = o === c, C = a + o === c, m = i > 0, x = i === c, V = n === c;
-  let E, R;
-  e ? v ? (E = "unavailable", R = !1) : a > 0 || o > 0 ? (E = "unknown", R = !1) : n > 0 ? (E = "off", R = !1) : (E = "on", R = !0) : v ? (E = "unavailable", R = !1) : C ? (E = "unknown", R = !1) : m ? (E = "on", R = !0) : (E = "off", R = !1);
-  const K = l > 0 ? Math.round(s / l) : 0, B = Math.round(K / 255 * 100);
-  let h;
-  if (d.length > 0) {
-    const $ = Math.round(d.reduce((u, A) => u + A[0], 0) / d.length), O = Math.round(d.reduce((u, A) => u + A[1], 0) / d.length), H = Math.round(d.reduce((u, A) => u + A[2], 0) / d.length), f = K / 255;
-    h = `rgb(${Math.round($ * f)}, ${Math.round(O * f)}, ${Math.round(H * f)})`;
+  const m = e.length, k = o === m, R = a + o === m, x = i > 0, w = i === m, N = n === m;
+  let D, T;
+  t ? k ? (D = "unavailable", T = !1) : a > 0 || o > 0 ? (D = "unknown", T = !1) : n > 0 ? (D = "off", T = !1) : (D = "on", T = !0) : k ? (D = "unavailable", T = !1) : R ? (D = "unknown", T = !1) : x ? (D = "on", T = !0) : (D = "off", T = !1);
+  const F = l > 0 ? Math.round(s / l) : 0, q = Math.round(F / 255 * 100);
+  let f;
+  if (g.length > 0) {
+    const y = Math.round(g.reduce((c, A) => c + A[0], 0) / g.length), d = Math.round(g.reduce((c, A) => c + A[1], 0) / g.length), _ = Math.round(g.reduce((c, A) => c + A[2], 0) / g.length), p = F / 255;
+    f = `rgb(${Math.round(y * p)}, ${Math.round(d * p)}, ${Math.round(_ * p)})`;
   } else
-    h = kt(t[0]);
-  let y;
-  return x ? y = "All on" : V ? y = "All off" : i > 0 ? y = `${i} of ${c} on` : y = "Off", {
+    f = we(e[0]);
+  let b;
+  return w ? b = "All on" : N ? b = "All off" : i > 0 ? b = `${i} of ${m} on` : b = "Off", {
     isGroup: r,
-    state: E,
-    isOn: R,
-    isUnavailable: E === "unavailable",
-    brightness: K,
-    brightnessPercent: B,
-    color: h,
+    state: D,
+    isOn: T,
+    isUnavailable: D === "unavailable",
+    brightness: F,
+    brightnessPercent: q,
+    color: f,
     onCount: i,
-    totalCount: c,
-    description: y
+    totalCount: m,
+    description: b
   };
 }
-function Ve(t, e = "mean", r = !0) {
-  if (t.length === 0)
+function _t(e, t = "mean", r = !0) {
+  if (e.length === 0)
     return {
       isGroup: !1,
       state: "unknown",
@@ -840,43 +867,43 @@ function Ve(t, e = "mean", r = !0) {
       isUnavailable: !0,
       description: "No entities"
     };
-  const i = t.length > 1;
+  const i = e.length > 1;
   if (!i) {
-    const m = t[0], x = Number.parseFloat(m.state);
-    let V = m.state;
-    return Number.isNaN(x) || (V = Number.isInteger(x) ? x.toString() : x.toFixed(1)), {
+    const x = e[0], w = Number.parseFloat(x.state);
+    let N = x.state;
+    return Number.isNaN(w) || (N = Number.isInteger(w) ? w.toString() : w.toFixed(1)), {
       isGroup: !1,
-      state: V,
-      numericValue: Number.isNaN(x) ? null : x,
-      isUnavailable: m.state === "unavailable",
-      unit: m.unitOfMeasurement ?? void 0,
-      description: V
+      state: N,
+      numericValue: Number.isNaN(w) ? null : w,
+      isUnavailable: x.state === "unavailable",
+      unit: x.unitOfMeasurement ?? void 0,
+      description: N
     };
   }
   const n = [], a = [];
   let o = 0, s;
-  for (const m of t) {
-    if (!s && m.unitOfMeasurement && (s = m.unitOfMeasurement), m.state === "unavailable") {
+  for (const x of e) {
+    if (!s && x.unitOfMeasurement && (s = x.unitOfMeasurement), x.state === "unavailable") {
       o++, a.push({
-        entityId: m.id,
+        entityId: x.id,
         value: "unavailable",
-        friendly_name: m.friendlyName
+        friendly_name: x.friendlyName
       });
       continue;
     }
-    const x = Number.parseFloat(m.state);
-    isNaN(x) ? r || a.push({
-      entityId: m.id,
-      value: m.state,
-      friendly_name: m.friendlyName
-    }) : (n.push(x), a.push({
-      entityId: m.id,
-      value: x,
-      friendly_name: m.friendlyName
+    const w = Number.parseFloat(x.state);
+    isNaN(w) ? r || a.push({
+      entityId: x.id,
+      value: x.state,
+      friendly_name: x.friendlyName
+    }) : (n.push(w), a.push({
+      entityId: x.id,
+      value: w,
+      friendly_name: x.friendlyName
     }));
   }
-  const l = o === t.length, d = n.length === 0;
-  if (l || d)
+  const l = o === e.length, g = n.length === 0;
+  if (l || g)
     return {
       isGroup: i,
       state: l ? "unavailable" : "unknown",
@@ -886,134 +913,134 @@ function Ve(t, e = "mean", r = !0) {
       description: l ? "Unavailable" : "No numeric values",
       memberValues: a
     };
-  let c, v;
-  switch (e) {
+  let m, k;
+  switch (t) {
     case "min":
-      c = Math.min(...n), v = "Minimum";
+      m = Math.min(...n), k = "Minimum";
       break;
     case "max":
-      c = Math.max(...n), v = "Maximum";
+      m = Math.max(...n), k = "Maximum";
       break;
     case "mean":
-      c = n.reduce((m, x) => m + x, 0) / n.length, v = "Average";
+      m = n.reduce((x, w) => x + w, 0) / n.length, k = "Average";
       break;
     case "median": {
-      const m = [...n].sort((V, E) => V - E), x = Math.floor(m.length / 2);
-      c = m.length % 2 === 0 ? (m[x - 1] + m[x]) / 2 : m[x], v = "Median";
+      const x = [...n].sort((N, D) => N - D), w = Math.floor(x.length / 2);
+      m = x.length % 2 === 0 ? (x[w - 1] + x[w]) / 2 : x[w], k = "Median";
       break;
     }
     case "sum":
-      c = n.reduce((m, x) => m + x, 0), v = "Sum";
+      m = n.reduce((x, w) => x + w, 0), k = "Sum";
       break;
     case "last":
-      c = n[n.length - 1], v = "Latest";
+      m = n[n.length - 1], k = "Latest";
       break;
     case "range":
-      c = Math.max(...n) - Math.min(...n), v = "Range";
+      m = Math.max(...n) - Math.min(...n), k = "Range";
       break;
     case "product":
-      c = n.reduce((m, x) => m * x, 1), v = "Product";
+      m = n.reduce((x, w) => x * w, 1), k = "Product";
       break;
     case "std_dev": {
-      const m = n.reduce((V, E) => V + E, 0) / n.length, x = n.reduce((V, E) => V + (E - m) ** 2, 0) / n.length;
-      c = Math.sqrt(x), v = "Std Dev";
+      const x = n.reduce((N, D) => N + D, 0) / n.length, w = n.reduce((N, D) => N + (D - x) ** 2, 0) / n.length;
+      m = Math.sqrt(w), k = "Std Dev";
       break;
     }
     default:
-      c = n.reduce((m, x) => m + x, 0) / n.length, v = "Average";
+      m = n.reduce((x, w) => x + w, 0) / n.length, k = "Average";
   }
-  const C = Number.isInteger(c) ? c.toString() : c.toFixed(1);
+  const R = Number.isInteger(m) ? m.toString() : m.toFixed(1);
   return {
     isGroup: i,
-    state: C,
-    numericValue: c,
+    state: R,
+    numericValue: m,
     isUnavailable: !1,
     unit: s,
-    description: `${v} of ${n.length}`,
+    description: `${k} of ${n.length}`,
     memberValues: a
   };
 }
-function kt(t) {
-  if (t.state !== "on") return "rgb(100, 100, 100)";
-  const r = (t.attributes?.brightness ?? 255) / 255;
-  if (t.attributes?.rgb_color) {
-    const [i, n, a] = t.attributes.rgb_color;
+function we(e) {
+  if (e.state !== "on") return "rgb(100, 100, 100)";
+  const r = (e.attributes?.brightness ?? 255) / 255;
+  if (e.attributes?.rgb_color) {
+    const [i, n, a] = e.attributes.rgb_color;
     return `rgb(${Math.round(i * r)}, ${Math.round(n * r)}, ${Math.round(a * r)})`;
   }
-  if (t.attributes?.color_temp) {
-    const n = 1e6 / t.attributes.color_temp / 100;
+  if (e.attributes?.color_temp) {
+    const n = 1e6 / e.attributes.color_temp / 100;
     let a, o, s;
     return n <= 66 ? (a = 255, o = n <= 19 ? 0 : 99.4708025861 * Math.log(n - 10) - 161.1195681661, s = n <= 19 ? 0 : n <= 66 ? 138.5177312231 * Math.log(n - 10) - 305.0447927307 : 255) : (a = 329.698727446 * (n - 60) ** -0.1332047592, o = 288.1221695283 * (n - 60) ** -0.0755148492, s = 255), a = Math.max(0, Math.min(255, a)) * r, o = Math.max(0, Math.min(255, o)) * r, s = Math.max(0, Math.min(255, s)) * r, `rgb(${Math.round(a)}, ${Math.round(o)}, ${Math.round(s)})`;
   }
   return `rgb(${Math.round(255 * r)}, ${Math.round(220 * r)}, ${Math.round(180 * r)})`;
 }
-function Ae(t) {
-  return t ? t.state !== "unavailable" && t.state !== "unknown" : !1;
+function Et(e) {
+  return e ? e.state !== "unavailable" && e.state !== "unknown" : !1;
 }
-function We(t) {
-  if (!t) return !1;
-  if (["on", "open", "locked", "home", "playing", "active"].includes(t.state))
+function Tt(e) {
+  if (!e) return !1;
+  if (["on", "open", "locked", "home", "playing", "active"].includes(e.state))
     return !0;
-  if (t.domain === "sensor") {
-    const e = Number.parseFloat(t.state);
-    return !isNaN(e) && e > 0;
+  if (e.domain === "sensor") {
+    const t = Number.parseFloat(e.state);
+    return !isNaN(t) && t > 0;
   }
   return !1;
 }
-function jn(t, e = "unknown") {
-  return t?.state ?? e;
+function Pn(e, t = "unknown") {
+  return e?.state ?? t;
 }
-function Fn(t, e, r) {
-  return t?.attributes ? t.attributes[e] ?? r : r;
+function Ln(e, t, r) {
+  return e?.attributes ? e.attributes[t] ?? r : r;
 }
-function Un(t, e) {
-  return t.filter((r) => r.state === e).length;
+function Rn(e, t) {
+  return e.filter((r) => r.state === t).length;
 }
-function Yn(t) {
-  return t.filter(Ae).length;
+function Hn(e) {
+  return e.filter(Et).length;
 }
-function Kn(t) {
-  return t.filter(We).length;
+function Gn(e) {
+  return e.filter(Tt).length;
 }
-function qn(t, e) {
-  return t.length > 0 && t.every((r) => r.state === e);
+function jn(e, t) {
+  return e.length > 0 && e.every((r) => r.state === t);
 }
-function Xn(t, e) {
-  return t.some((r) => r.state === e);
+function Bn(e, t) {
+  return e.some((r) => r.state === t);
 }
-function Re(t, e, r) {
+function Ot(e, t, r) {
   const { decimals: i, scale: n = !0 } = r || {};
-  if (typeof t == "string")
-    return e ? `${t}${e}` : t;
-  if (t == null || Number.isNaN(t))
-    return e ? `--${e}` : "--";
-  let a = t, o = e || "";
-  n && e && (e === "W" || e === "kW" || e === "MW") && (t >= 1e6 ? (a = t / 1e6, o = "MW") : t >= 1e3 ? (a = t / 1e3, o = "kW") : o = "W"), n && 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");
+  if (typeof e == "string")
+    return t ? `${e}${t}` : e;
+  if (e == null || Number.isNaN(e))
+    return t ? `--${t}` : "--";
+  let a = e, o = t || "";
+  n && t && (t === "W" || t === "kW" || t === "MW") && (e >= 1e6 ? (a = e / 1e6, o = "MW") : e >= 1e3 ? (a = e / 1e3, o = "kW") : o = "W"), n && t && (t === "B" || t === "KB" || t === "MB" || t === "GB") && (e >= 1073741824 ? (a = e / 1073741824, o = "GB") : e >= 1048576 ? (a = e / 1048576, o = "MB") : e >= 1024 ? (a = e / 1024, o = "KB") : o = "B");
   let s;
-  return i !== void 0 ? s = a.toFixed(i) : a !== t ? s = a.toFixed(1) : Number.isInteger(t) ? s = t.toString() : s = Number.parseFloat(t.toFixed(2)).toString(), o ? `${s}${o}` : s;
+  return i !== void 0 ? s = a.toFixed(i) : a !== e ? s = a.toFixed(1) : Number.isInteger(e) ? s = e.toString() : s = Number.parseFloat(e.toFixed(2)).toString(), o ? `${s}${o}` : s;
 }
-function Ie(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;
+function Vt(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;
 }
-var He = /* @__PURE__ */ w("<div><div>"), Ge = /* @__PURE__ */ w("<div>");
-function Pe(t) {
-  const e = I();
+var Nt = /* @__PURE__ */ v("<div><div>"), Wt = /* @__PURE__ */ v("<div>");
+function At(e) {
+  const t = P();
   return (() => {
-    var r = He(), i = r.firstChild;
-    return b(i, () => Re(t.value, t.unit)), b(r, (() => {
-      var n = _(() => !!(t.interpret && typeof t.value == "number"));
+    var r = Nt(), i = r.firstChild;
+    return h(i, () => Ot(e.value, e.unit)), h(r, (() => {
+      var n = E(() => !!(e.interpret && typeof e.value == "number"));
       return () => n() && (() => {
-        var a = Ge();
-        return b(a, () => Ie(t.value, t.unit)), z((o) => {
-          var s = k("text-foreground/60", F.subtitle(e.size())), l = W.S1(e.size());
-          return s !== o.e && S(a, o.e = s), l !== o.t && M(a, "margin-top", o.t = l), o;
+        var a = Wt();
+        return h(a, () => Vt(e.value, e.unit)), z((o) => {
+          var s = $("text-foreground/60", G.subtitle(t.size())), l = W.S1(t.size());
+          return s !== o.e && S(a, o.e = s), l !== o.t && V(a, "margin-top", o.t = l), o;
         }, {
           e: void 0,
           t: void 0
         }), a;
       })();
     })(), null), z((n) => {
-      var a = k("flex flex-col", t.class), o = k("font-bold text-foreground", F.value(e.size()));
+      var a = $("flex flex-col", e.class), o = $("font-bold text-foreground", G.value(t.size()));
       return a !== n.e && S(r, n.e = a), o !== n.t && S(i, n.t = o), n;
     }, {
       e: void 0,
@@ -1021,245 +1048,241 @@ function Pe(t) {
     }), r;
   })();
 }
-var Le = /* @__PURE__ */ w('<div><div><div class="relative h-full w-full">'), Be = /* @__PURE__ */ w('<div class="pointer-events-none absolute inset-0"><div>'), je = /* @__PURE__ */ w('<div class="pointer-events-none absolute inset-0 animate-pulse bg-blue-500/20">'), Fe = /* @__PURE__ */ w('<div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">'), Ue = /* @__PURE__ */ w('<div class="flex items-center justify-center text-white/30">'), Ye = /* @__PURE__ */ w('<h3 class="font-semibold text-sm text-white/60">'), Ke = /* @__PURE__ */ w('<p class="text-white/50 text-xs">');
-function qe(t, e) {
-  const r = t * e;
+var It = /* @__PURE__ */ v('<div><div class="relative h-full w-full">'), Pt = /* @__PURE__ */ v('<div class="glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse">'), Lt = /* @__PURE__ */ v('<div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">'), Rt = /* @__PURE__ */ v('<div class="flex items-center justify-center text-white/30">'), Ht = /* @__PURE__ */ v('<h3 class="font-semibold text-sm text-white/60">'), Gt = /* @__PURE__ */ v('<p class="text-white/50 text-xs">');
+function jt(e, t) {
+  const r = e * t;
   return r <= 2 ? "xs" : r <= 4 ? "sm" : r <= 8 ? "md" : r <= 18 ? "lg" : "xl";
 }
-function Xe(t, e) {
-  return t > e ? "horizontal" : e > t ? "vertical" : "square";
+function Bt(e, t) {
+  return e > t ? "horizontal" : t > e ? "vertical" : "square";
 }
-function Je(t, e) {
-  return e >= 150 ? "vertical" : t > e ? "horizontal" : e > t ? "vertical" : "square";
+function Ft(e, t) {
+  return t >= 150 ? "vertical" : e > t ? "horizontal" : t > e ? "vertical" : "square";
 }
-function Ze(t) {
-  let e;
-  const r = It(() => e), i = 2, [n, a] = j(0), [o, s] = j(0);
-  q(() => {
-    const f = Math.round(r.width ?? 0), u = Math.round(r.height ?? 0), A = yt(n), p = yt(o);
-    (Math.abs(f - A) > i || Math.abs(u - p) > i) && (a(f), s(u));
+function Ut(e) {
+  Te(() => {
+    Fe();
+  });
+  let t;
+  const r = Ie(() => t), i = 2, [n, a] = H(0), [o, s] = H(0);
+  U(() => {
+    const d = Math.round(r.width ?? 0), _ = Math.round(r.height ?? 0), p = xe(n), c = xe(o);
+    (Math.abs(d - p) > i || Math.abs(_ - c) > i) && (a(d), s(_));
   });
-  const l = N(() => {
-    if (t.variant)
-      return typeof t.variant == "string" ? Kt(t.variant) : t.variant;
-  }), d = N(() => ({
+  const l = M(() => {
+    if (e.variant)
+      return typeof e.variant == "string" ? qe(e.variant) : e.variant;
+  }), g = M(() => ({
     width: n(),
     height: o(),
     gridWidth: Math.max(1, Math.round(n() / 150)),
     gridHeight: Math.max(1, Math.round(o() / 75))
   }), void 0, {
-    equals: (f, u) => f.width === u.width && f.height === u.height && f.gridWidth === u.gridWidth && f.gridHeight === u.gridHeight
-  }), c = N(() => {
-    const f = d();
-    return qe(f.gridWidth, f.gridHeight);
-  }), v = N(() => {
-    const f = d();
-    return Xe(f.width, f.height);
-  }), C = N(() => {
-    const f = d();
-    return Je(f.width, f.height);
-  }), m = Ct(ht), x = m;
-  x?._isStub?.() && x._bridge && (q(() => {
-    x._bridge.setSize(c());
-  }), q(() => {
-    x._bridge.setOrientation(v());
-  }), q(() => {
-    x._bridge.setContentLayout(C());
-  }), q(() => {
-    x._bridge.setDimensions(d());
-  }), q(() => {
-    x._bridge.setIsStub(!1);
+    equals: (d, _) => d.width === _.width && d.height === _.height && d.gridWidth === _.gridWidth && d.gridHeight === _.gridHeight
+  }), m = M(() => {
+    const d = g();
+    return jt(d.gridWidth, d.gridHeight);
+  }), k = M(() => {
+    const d = g();
+    return Bt(d.width, d.height);
+  }), R = M(() => {
+    const d = g();
+    return Ft(d.width, d.height);
+  }), x = pe(ue), w = x;
+  w?._isStub?.() && w._bridge && (U(() => {
+    w._bridge.setSize(m());
+  }), U(() => {
+    w._bridge.setOrientation(k());
+  }), U(() => {
+    w._bridge.setContentLayout(R());
+  }), U(() => {
+    w._bridge.setDimensions(g());
+  }), U(() => {
+    w._bridge.setIsStub(!1);
   }));
-  const V = {
-    size: c,
-    orientation: v,
-    contentLayout: C,
-    dimensions: d,
-    isEditMode: () => t.isEditMode ?? !1,
-    updateConfig: m?.updateConfig ?? (() => {
+  const N = {
+    size: m,
+    orientation: k,
+    contentLayout: R,
+    dimensions: g,
+    isEditMode: () => e.isEditMode ?? !1,
+    updateConfig: x?.updateConfig ?? (() => {
     })
-  }, E = "bg-gradient-to-br from-gray-500/20 to-gray-600/20", R = N(() => t.emptyState && !t.gradient ? E : t.gradient), K = N(() => ({
+  }, D = M(() => ({
     "container-type": "size",
     "container-name": "widget",
-    "touch-action": t.gestures && !t.isEditMode ? t.gestures.touchAction() : void 0,
+    "touch-action": e.gestures && !e.isEditMode ? e.gestures.touchAction() : void 0,
     ...l()?.styles?.container,
-    ...l()?.styles?.cssVars || {}
-  })), B = () => !!t.gestures && !t.isEditMode, h = (f) => {
-    B() && t.gestures?.onPointerEnter(f);
-  }, y = (f) => {
-    B() && t.gestures?.onPointerDown(f);
-  }, $ = (f) => {
-    B() && t.gestures?.onPointerMove(f);
-  }, O = (f) => {
-    B() && t.gestures?.onPointerUp(f);
-  }, H = (f) => {
-    B() && t.gestures?.onPointerCancel(f);
+    ...l()?.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
+    } : {}
+  })), T = () => !!e.gestures && !e.isEditMode, F = (d) => {
+    T() && e.gestures?.onPointerEnter(d);
+  }, q = (d) => {
+    T() && e.gestures?.onPointerDown(d);
+  }, f = (d) => {
+    T() && e.gestures?.onPointerMove(d);
+  }, b = (d) => {
+    T() && e.gestures?.onPointerUp(d);
+  }, y = (d) => {
+    T() && e.gestures?.onPointerCancel(d);
   };
-  return T(ht.Provider, {
-    value: V,
+  return O(ue.Provider, {
+    value: N,
     get children() {
-      var f = Le(), u = f.firstChild, A = u.firstChild;
-      return nt(f, "pointercancel", H), nt(f, "pointerup", O), nt(f, "pointermove", $), nt(f, "pointerdown", y), nt(f, "pointerenter", h), Vt((p) => {
-        e = p, t.gestures?.bindElement(p);
-      }, f), b(u, (() => {
-        var p = _(() => !!t.backgroundGlow);
-        return () => p() && (() => {
-          var G = Be(), Q = G.firstChild;
-          return z((P) => {
-            var J = U.BACKGROUND, ut = k("absolute inset-0 opacity-20 blur-2xl", t.backgroundGlow);
-            return J !== P.e && M(G, "z-index", P.e = J), ut !== P.t && S(Q, P.t = ut), P;
-          }, {
-            e: void 0,
-            t: void 0
-          }), G;
-        })();
-      })(), A), b(A, (() => {
-        var p = _(() => !!t.emptyState);
-        return () => p() ? T(Qe, {
+      var d = It(), _ = d.firstChild;
+      return Q(d, "pointercancel", y), Q(d, "pointerup", b), Q(d, "pointermove", f), Q(d, "pointerdown", q), Q(d, "pointerenter", F), Ve((p) => {
+        t = p, e.gestures?.bindElement(p);
+      }, d), h(_, (() => {
+        var p = E(() => !!e.emptyState);
+        return () => p() ? O(Yt, {
           get icon() {
-            return t.emptyState.icon;
+            return e.emptyState.icon;
           },
           get title() {
-            return t.emptyState.title;
+            return e.emptyState.title;
           },
           get message() {
-            return t.emptyState.message;
+            return e.emptyState.message;
           }
-        }) : t.children;
-      })()), b(u, (() => {
-        var p = _(() => !!t.loading);
+        }) : e.children;
+      })()), h(d, (() => {
+        var p = E(() => !!e.loading);
         return () => p() && (() => {
-          var G = je();
-          return z((Q) => M(G, "z-index", U.OVERLAY)), G;
+          var c = Pt();
+          return z((A) => V(c, "z-index", K.OVERLAY)), c;
         })();
       })(), null), z((p) => {
-        var G = k(
-          "relative h-full w-full select-none rounded-xl border border-border/50",
+        var c = $(
+          "glasshome-widget",
+          "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50",
           // Variant styles (lowest priority)
           l()?.styles?.class,
           // Custom class (highest priority)
-          t.class
-        ), Q = K(), P = k(
-          "relative h-full w-full overflow-hidden rounded-xl",
-          // Gradient prop (overrides variant, auto-applied for empty state)
-          R()
-        ), J = U.CONTENT;
-        return G !== p.e && S(f, p.e = G), p.t = ot(f, Q, p.t), P !== p.a && S(u, p.a = P), J !== p.o && M(A, "z-index", p.o = J), p;
+          e.class
+        ), A = D(), I = K.CONTENT;
+        return c !== p.e && S(d, p.e = c), p.t = Z(d, A, p.t), I !== p.a && V(_, "z-index", p.a = I), p;
       }, {
         e: void 0,
         t: void 0,
-        a: void 0,
-        o: void 0
-      }), f;
+        a: void 0
+      }), d;
     }
   });
 }
-function Qe(t) {
+function Yt(e) {
   return (() => {
-    var e = Fe();
-    return b(e, (() => {
-      var r = _(() => !!t.icon);
+    var t = Lt();
+    return h(t, (() => {
+      var r = E(() => !!e.icon);
       return () => r() && (() => {
-        var i = Ue();
-        return b(i, () => t.icon), i;
+        var i = Rt();
+        return h(i, () => e.icon), i;
       })();
-    })(), null), b(e, (() => {
-      var r = _(() => !!t.title);
+    })(), null), h(t, (() => {
+      var r = E(() => !!e.title);
       return () => r() && (() => {
-        var i = Ye();
-        return b(i, () => t.title), i;
+        var i = Ht();
+        return h(i, () => e.title), i;
       })();
-    })(), null), b(e, (() => {
-      var r = _(() => !!t.message);
+    })(), null), h(t, (() => {
+      var r = E(() => !!e.message);
       return () => r() && (() => {
-        var i = Ke();
-        return b(i, () => t.message), i;
+        var i = Gt();
+        return h(i, () => e.message), i;
       })();
-    })(), null), e;
+    })(), null), t;
   })();
 }
-const Y = Ze;
-Y.Content = oe;
-Y.Icon = ye;
-Y.Title = Oe;
-Y.Subtitle = _e;
-Y.Status = ze;
-Y.Value = Pe;
-Y.Metrics = _t;
-Y.EmptyState = ge;
-Y.SliderFill = ne;
-var tn = /* @__PURE__ */ w("<div><div>");
-const en = {
-  blue: "bg-blue-500/30",
-  green: "bg-green-500/30",
-  red: "bg-red-500/30",
-  yellow: "bg-yellow-500/30",
-  purple: "bg-purple-500/30",
-  gray: "bg-gray-500/30"
-};
-function Jn(t) {
-  const e = () => en[t.color] ?? t.color;
+const B = Ut;
+B.Content = ot;
+B.Icon = ft;
+B.Title = zt;
+B.Subtitle = St;
+B.Status = kt;
+B.Value = At;
+B.Metrics = Se;
+B.EmptyState = gt;
+B.SliderFill = nt;
+var Kt = /* @__PURE__ */ v("<div>");
+function Fn(e) {
+  const t = () => {
+    const r = {
+      "z-index": K.BACKGROUND,
+      background: "radial-gradient(circle, color-mix(in oklch, var(--widget-color) 30%, transparent), transparent 70%)"
+    };
+    return e.color && (r["--widget-color"] = e.color), r;
+  };
   return (() => {
-    var r = tn(), i = r.firstChild;
-    return z((n) => {
-      var a = k("pointer-events-none absolute inset-0", t.class), o = U.BACKGROUND, s = k("absolute inset-0 opacity-40 blur-3xl", e());
-      return a !== n.e && S(r, n.e = a), o !== n.t && M(r, "z-index", n.t = o), s !== n.a && S(i, n.a = s), n;
+    var r = Kt();
+    return z((i) => {
+      var n = $("pointer-events-none absolute inset-0 opacity-40 blur-3xl", e.class), a = t();
+      return n !== i.e && S(r, i.e = n), i.t = Z(r, a, i.t), i;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0
+      t: void 0
     }), r;
   })();
 }
-var nn = /* @__PURE__ */ w("<div>");
-function Zn(t) {
-  const e = I(), r = () => {
-    const i = t.spacing ?? "S2";
-    return W[i](e.size());
+var qt = /* @__PURE__ */ v("<div>");
+function Un(e) {
+  const t = P(), r = () => {
+    const i = e.spacing ?? "S2";
+    return W[i](t.size());
   };
   return (() => {
-    var i = nn();
-    return b(i, () => t.children), z((n) => {
-      var a = k("flex flex-col", t.class), o = r();
-      return a !== n.e && S(i, n.e = a), o !== n.t && M(i, "gap", n.t = o), n;
+    var i = qt();
+    return h(i, () => e.children), z((n) => {
+      var a = $("flex flex-col", e.class), o = r();
+      return a !== n.e && S(i, n.e = a), o !== n.t && V(i, "gap", n.t = o), n;
     }, {
       e: void 0,
       t: void 0
     }), i;
   })();
 }
-var rn = /* @__PURE__ */ w('<span class="inline-flex size-3.5 shrink-0 items-center">'), an = /* @__PURE__ */ w("<button type=button>"), on = /* @__PURE__ */ w('<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">'), sn = /* @__PURE__ */ w('<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'), ln = /* @__PURE__ */ w('<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>'), cn = /* @__PURE__ */ w('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), un = /* @__PURE__ */ w('<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">'), dn = /* @__PURE__ */ w('<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'), gn = /* @__PURE__ */ w('<div class="min-w-0 shrink-0">'), mn = /* @__PURE__ */ w('<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">'), fn = /* @__PURE__ */ w('<div class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">'), hn = /* @__PURE__ */ w('<div class="flex shrink-0 items-center justify-end gap-2 border-border/50 border-t pt-3">');
-function bn(t) {
+var Xt = /* @__PURE__ */ v('<span class="inline-flex size-3.5 shrink-0 items-center">'), Jt = /* @__PURE__ */ v("<button type=button>"), Zt = /* @__PURE__ */ v('<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">'), Qt = /* @__PURE__ */ v('<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'), en = /* @__PURE__ */ v('<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>'), tn = /* @__PURE__ */ v('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), nn = /* @__PURE__ */ v('<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">'), rn = /* @__PURE__ */ v('<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'), an = /* @__PURE__ */ v('<div class="min-w-0 shrink-0">'), on = /* @__PURE__ */ v('<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">'), sn = /* @__PURE__ */ v('<div class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">'), ln = /* @__PURE__ */ v('<div class="flex shrink-0 items-center justify-end gap-2 border-border/50 border-t pt-3">');
+function cn(e) {
   return (() => {
-    var e = an();
-    return e.$$click = () => t.onClick(), b(e, T(et, {
+    var t = Jt();
+    return t.$$click = () => e.onClick(), h(t, O(J, {
       get when() {
-        return t.isActive;
+        return e.isActive;
       },
       get children() {
-        var r = rn();
-        return b(r, () => t.icon), r;
+        var r = Xt();
+        return h(r, () => e.icon), r;
       }
-    }), null), b(e, () => t.label, null), z(() => S(e, k("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", t.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"))), e;
+    }), null), h(t, () => e.label, null), z(() => S(t, $("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 Qn(t) {
-  const [e] = Tt(t, ["open", "onOpenChange", "title", "onSave", "hasUnsavedChanges", "onDelete", "editContent", "controlsContent", "debugContent", "debugData", "tabs", "class", "maxWidth", "defaultTab", "headerActions", "configSchema", "config", "onConfigSave", "ResponsiveDialog", "ResponsiveDialogContent", "ResponsiveDialogHeader", "ResponsiveDialogTitle", "ResponsiveDialogDescription", "Button", "SchemaForm"]), r = () => !!e.configSchema && !!e.config && !!e.onConfigSave && !!e.SchemaForm, [i, n] = j({}), [a, o] = j(null);
-  q(wt(() => e.config, (u) => {
-    u && n({
-      ...u
+function Yn(e) {
+  const [t] = Oe(e, ["open", "onOpenChange", "title", "onSave", "hasUnsavedChanges", "onDelete", "editContent", "controlsContent", "debugContent", "debugData", "tabs", "class", "maxWidth", "defaultTab", "headerActions", "configSchema", "config", "onConfigSave", "ResponsiveDialog", "ResponsiveDialogContent", "ResponsiveDialogHeader", "ResponsiveDialogTitle", "ResponsiveDialogDescription", "Button", "SchemaForm"]), r = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [i, n] = H({}), [a, o] = H(null);
+  U(be(() => t.config, (c) => {
+    c && n({
+      ...c
     });
-  })), q(wt(() => e.configSchema, (u) => {
-    u && o(Mt(u));
+  })), U(be(() => t.configSchema, (c) => {
+    c && o(ke(c));
   }));
-  const s = () => r() && JSON.stringify(i()) !== JSON.stringify(e.config), l = (u) => {
-    !u && e.config && n({
-      ...e.config
-    }), e.onOpenChange(u);
-  }, d = () => {
-    e.onConfigSave?.(i());
-  }, [c, v] = j(e.defaultTab ?? "controls"), C = () => {
-    const u = e.maxWidth ?? "3xl";
+  const s = () => r() && JSON.stringify(i()) !== JSON.stringify(t.config), l = (c) => {
+    !c && t.config && n({
+      ...t.config
+    }), t.onOpenChange(c);
+  }, g = () => {
+    t.onConfigSave?.(i());
+  }, [m, k] = H(t.defaultTab ?? "controls"), R = () => {
+    const c = t.maxWidth ?? "3xl";
     return {
       sm: "max-w-sm",
       md: "max-w-md",
@@ -1268,15 +1291,15 @@ function Qn(t) {
       "2xl": "max-w-2xl",
       "3xl": "max-w-3xl",
       "4xl": "max-w-4xl"
-    }[u];
-  }, m = () => {
-    if (e.tabs) return e.tabs;
-    const u = [];
-    return u.push({
+    }[c];
+  }, x = () => {
+    if (t.tabs) return t.tabs;
+    const c = [];
+    return c.push({
       id: "edit",
       label: "Edit",
-      icon: on(),
-      content: e.editContent ?? (r() && a() ? T($, {
+      icon: Zt(),
+      content: t.editContent ?? (r() && a() ? O(y, {
         get schema() {
           return a();
         },
@@ -1284,125 +1307,125 @@ function Qn(t) {
           return i();
         },
         onChange: n
-      }) : sn())
-    }), u.push({
+      }) : Qt())
+    }), c.push({
       id: "controls",
       label: "Controls",
-      icon: ln(),
-      content: e.controlsContent ?? cn()
-    }), u.push({
+      icon: en(),
+      content: t.controlsContent ?? tn()
+    }), c.push({
       id: "debug",
       label: "Debug",
-      icon: un(),
-      content: e.debugContent ?? dn()
-    }), u;
-  }, x = async () => {
-    if (e.debugData !== void 0)
+      icon: nn(),
+      content: t.debugContent ?? rn()
+    }), c;
+  }, w = async () => {
+    if (t.debugData !== void 0)
       try {
-        const u = typeof e.debugData == "string" ? e.debugData : JSON.stringify(e.debugData, null, 2);
-        await navigator.clipboard.writeText(u);
+        const c = typeof t.debugData == "string" ? t.debugData : JSON.stringify(t.debugData, null, 2);
+        await navigator.clipboard.writeText(c);
       } catch {
       }
-  }, V = () => {
-    const u = m();
-    return u.find((p) => p.id === c())?.content ?? u[0]?.content;
-  }, E = e.ResponsiveDialog, R = e.ResponsiveDialogContent, K = e.ResponsiveDialogHeader, B = e.ResponsiveDialogTitle, h = e.ResponsiveDialogDescription, y = e.Button, $ = e.SchemaForm, O = (u) => r() ? l(u) : e.onOpenChange(u), H = () => r() ? s() : e.hasUnsavedChanges, f = () => r() ? d : e.onSave;
-  return T(E, {
+  }, N = () => {
+    const c = x();
+    return c.find((I) => I.id === m())?.content ?? c[0]?.content;
+  }, D = t.ResponsiveDialog, T = t.ResponsiveDialogContent, F = t.ResponsiveDialogHeader, q = t.ResponsiveDialogTitle, f = t.ResponsiveDialogDescription, b = t.Button, y = t.SchemaForm, d = (c) => r() ? l(c) : t.onOpenChange(c), _ = () => r() ? s() : t.hasUnsavedChanges, p = () => r() ? g : t.onSave;
+  return O(D, {
     get open() {
-      return e.open;
+      return t.open;
     },
-    onOpenChange: (u) => O(u),
+    onOpenChange: (c) => d(c),
     get children() {
-      return T(R, {
+      return O(T, {
         get class() {
-          return k(C(), e.class);
+          return $(R(), t.class);
         },
         get children() {
-          return [T(K, {
+          return [O(F, {
             class: "flex flex-row items-center justify-between gap-3",
             get children() {
               return [(() => {
-                var u = gn();
-                return b(u, T(B, {
+                var c = an();
+                return h(c, O(q, {
                   class: "truncate leading-tight",
                   get children() {
-                    return e.title;
+                    return t.title;
                   }
-                }), null), b(u, T(h, {
+                }), null), h(c, O(f, {
                   class: "sr-only",
                   children: "Widget configuration dialog"
-                }), null), u;
+                }), null), c;
               })(), (() => {
-                var u = mn(), A = u.firstChild;
-                return b(A, () => m().map((p) => T(bn, {
+                var c = on(), A = c.firstChild;
+                return h(A, () => x().map((I) => O(cn, {
                   get icon() {
-                    return p.icon;
+                    return I.icon;
                   },
                   get label() {
-                    return p.label;
+                    return I.label;
                   },
                   get isActive() {
-                    return c() === p.id;
+                    return m() === I.id;
                   },
-                  onClick: () => v(p.id)
-                }))), b(u, T(et, {
+                  onClick: () => k(I.id)
+                }))), h(c, O(J, {
                   get when() {
-                    return e.headerActions;
+                    return t.headerActions;
                   },
                   get children() {
-                    return e.headerActions;
+                    return t.headerActions;
                   }
-                }), null), u;
+                }), null), c;
               })()];
             }
           }), (() => {
-            var u = fn();
-            return b(u, V), u;
-          })(), T(et, {
+            var c = sn();
+            return h(c, N), c;
+          })(), O(J, {
             get when() {
-              return _(() => c() === "edit")() && (f() || e.onDelete) || c() === "debug" && e.debugData !== void 0;
+              return E(() => m() === "edit")() && (p() || t.onDelete) || m() === "debug" && t.debugData !== void 0;
             },
             get children() {
-              var u = hn();
-              return b(u, T(et, {
+              var c = ln();
+              return h(c, O(J, {
                 get when() {
-                  return _(() => c() === "edit")() && e.onDelete;
+                  return E(() => m() === "edit")() && t.onDelete;
                 },
                 get children() {
-                  return T(y, {
+                  return O(b, {
                     size: "sm",
                     variant: "destructive",
-                    onClick: () => e.onDelete?.(),
+                    onClick: () => t.onDelete?.(),
                     children: "Delete"
                   });
                 }
-              }), null), b(u, T(et, {
+              }), null), h(c, O(J, {
                 get when() {
-                  return _(() => c() === "edit")() && f();
+                  return E(() => m() === "edit")() && p();
                 },
                 get children() {
-                  return T(y, {
+                  return O(b, {
                     size: "sm",
                     get disabled() {
-                      return !H();
+                      return !_();
                     },
-                    onClick: () => f()?.(),
+                    onClick: () => p()?.(),
                     children: "Save"
                   });
                 }
-              }), null), b(u, T(et, {
+              }), null), h(c, O(J, {
                 get when() {
-                  return _(() => c() === "debug")() && e.debugData !== void 0;
+                  return E(() => m() === "debug")() && t.debugData !== void 0;
                 },
                 get children() {
-                  return T(y, {
+                  return O(b, {
                     size: "sm",
                     variant: "outline",
-                    onClick: x,
+                    onClick: w,
                     children: "Copy"
                   });
                 }
-              }), null), u;
+              }), null), c;
             }
           })];
         }
@@ -1410,124 +1433,264 @@ function Qn(t) {
     }
   });
 }
-At(["click"]);
-const it = 32, g = it / 2, L = "white", st = "rgba(0,0,0,0.4)", vt = 2, lt = 3;
-function xn(t) {
-  return `url("data:image/svg+xml,${encodeURIComponent(t)}")`;
+Ne(["click"]);
+function Kn(e) {
+  return M(() => {
+    const t = e.entities();
+    if (t.length === 0) return;
+    const r = {
+      widgetConfig: e.widgetConfig,
+      entities: t.map((i) => {
+        const n = {
+          entity_id: i.id,
+          state: i.state,
+          domain: i.domain,
+          friendly_name: i.friendlyName
+        };
+        return e.customEntityFields ? {
+          ...n,
+          ...e.customEntityFields(i)
+        } : n;
+      })
+    };
+    return e.additionalData && Object.assign(r, e.additionalData), r;
+  });
+}
+function qn(e = {}) {
+  const [t, r] = H(!1), [i, n] = H(!1);
+  return {
+    save: async (s) => {
+      if (e.onSave) {
+        r(!0);
+        try {
+          await e.onSave(s), e.onSaveSuccess?.();
+        } finally {
+          r(!1);
+        }
+      }
+    },
+    remove: async () => {
+      if (e.onDelete) {
+        n(!0);
+        try {
+          await e.onDelete(), e.onDeleteSuccess?.();
+        } finally {
+          n(!1);
+        }
+      }
+    },
+    isSaving: t,
+    isDeleting: i
+  };
+}
+function Xn(e = "edit") {
+  const [t, r] = H(!1), [i, n] = H(e);
+  return {
+    showDialog: t,
+    setShowDialog: r,
+    openDialog: () => r(!0),
+    closeDialog: () => r(!1),
+    activeTab: i,
+    setActiveTab: n
+  };
+}
+function Jn(e) {
+  const t = M(() => e.entity() !== null), r = M(() => {
+    const n = e.entity();
+    return n ? e.calculateData(n) : null;
+  }), i = M(() => t() ? void 0 : e.emptyStateConfig);
+  return {
+    entity: e.entity,
+    data: r,
+    emptyState: i,
+    hasEntity: t
+  };
+}
+function Zn(e) {
+  const t = e.minEntities ?? 1, r = M(() => e.entities().length), i = M(() => r() >= t), n = M(() => !i() || !e.calculateGroupData ? null : e.calculateGroupData(e.entities())), a = M(() => {
+    if (!i()) return;
+    const s = e.aggregationMode?.();
+    if (!s || s === "none") return;
+    const l = e.entities();
+    if (s === "light" || s === "binary-sensor" || s === "switch")
+      return Mt(l, e.allEntitiesMode);
+    if (s === "sensor") {
+      const g = e.sensorGroupType?.() ?? "mean";
+      return _t(l, g, !0);
+    }
+  }), o = M(() => i() ? void 0 : e.emptyStateConfig);
+  return {
+    entities: e.entities,
+    groupData: n,
+    aggregatedData: a,
+    emptyState: o,
+    hasEntities: i,
+    count: r
+  };
+}
+function Qn(e) {
+  const [t] = Pe({
+    validate: Le(e.schema),
+    initialValues: e.initialValues
+  }), r = M(() => t.dirty), i = M(() => t.submitting);
+  return {
+    form: t,
+    isDirty: r,
+    isSubmitting: i,
+    handleSubmit: (a) => {
+      e.onSubmit?.(a);
+    },
+    getValue: Ge,
+    setValue: He,
+    reset: Re
+  };
+}
+const se = ["xs", "sm", "md", "lg", "xl"];
+function er() {
+  const e = P(), t = M(() => se.indexOf(e.size())), r = M(() => {
+    const l = e.size();
+    return l === "xs" || l === "sm";
+  }), i = M(() => {
+    const l = e.size();
+    return l === "lg" || l === "xl";
+  }), n = M(() => t() >= 2);
+  return {
+    isCompact: r,
+    isLarge: i,
+    showDetail: n,
+    showOn: (l) => l.includes(e.size()),
+    hideOn: (l) => !l.includes(e.size()),
+    matches: (l) => {
+      const g = l.trim();
+      if (g.endsWith("+")) {
+        const m = g.slice(0, -1), k = se.indexOf(m);
+        return k >= 0 && t() >= k;
+      }
+      if (g.endsWith("-")) {
+        const m = g.slice(0, -1), k = se.indexOf(m);
+        return k >= 0 && t() <= k;
+      }
+      return e.size() === g;
+    }
+  };
+}
+const te = 32, u = te / 2, L = "white", re = "rgba(0,0,0,0.4)", fe = 2, ie = 3;
+function dn(e) {
+  return `url("data:image/svg+xml,${encodeURIComponent(e)}")`;
 }
-function ct(t) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${it}" height="${it}" viewBox="0 0 ${it} ${it}">${t}</svg>`;
+function ae(e) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${te}" height="${te}" viewBox="0 0 ${te} ${te}">${e}</svg>`;
 }
-const vn = ct(`
+const un = ae(`
   <g transform="translate(6, 2)">
     <!-- shadow -->
-    <g stroke="${st}" stroke-width="${lt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${re}" stroke-width="${ie}" 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="${L}" stroke-width="${vt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${L}" stroke-width="${fe}" 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>
-`), yn = ct(`
+`), gn = ae(`
   <g>
-    <circle cx="${g}" cy="${g}" r="8" stroke="${st}" stroke-width="${lt}" fill="none"/>
-    <circle cx="${g}" cy="${g}" r="8" stroke="${L}" stroke-width="1.5" fill="none"/>
-    <circle cx="${g}" cy="${g}" r="1.5" fill="${L}"/>
+    <circle cx="${u}" cy="${u}" r="8" stroke="${re}" stroke-width="${ie}" fill="none"/>
+    <circle cx="${u}" cy="${u}" r="8" stroke="${L}" stroke-width="1.5" fill="none"/>
+    <circle cx="${u}" cy="${u}" r="1.5" fill="${L}"/>
   </g>
-`), wn = ct(`
+`), mn = ae(`
   <g>
     <!-- shadow -->
-    <g stroke="${st}" stroke-width="${lt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${g}" x2="26" y2="${g}"/>
-      <polyline points="10,${g - 4} 6,${g} 10,${g + 4}"/>
-      <polyline points="22,${g - 4} 26,${g} 22,${g + 4}"/>
+    <g stroke="${re}" stroke-width="${ie}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${u}" x2="26" y2="${u}"/>
+      <polyline points="10,${u - 4} 6,${u} 10,${u + 4}"/>
+      <polyline points="22,${u - 4} 26,${u} 22,${u + 4}"/>
     </g>
     <!-- main -->
-    <g stroke="${L}" stroke-width="${vt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${g}" x2="26" y2="${g}"/>
-      <polyline points="10,${g - 4} 6,${g} 10,${g + 4}"/>
-      <polyline points="22,${g - 4} 26,${g} 22,${g + 4}"/>
+    <g stroke="${L}" stroke-width="${fe}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${u}" x2="26" y2="${u}"/>
+      <polyline points="10,${u - 4} 6,${u} 10,${u + 4}"/>
+      <polyline points="22,${u - 4} 26,${u} 22,${u + 4}"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${g}" cy="${g}" r="1.5" fill="${L}"/>
-    <circle cx="${g - 5}" cy="${g}" r="1" fill="${L}" opacity="0.6"/>
-    <circle cx="${g + 5}" cy="${g}" r="1" fill="${L}" opacity="0.6"/>
+    <circle cx="${u}" cy="${u}" r="1.5" fill="${L}"/>
+    <circle cx="${u - 5}" cy="${u}" r="1" fill="${L}" opacity="0.6"/>
+    <circle cx="${u + 5}" cy="${u}" r="1" fill="${L}" opacity="0.6"/>
   </g>
-`), $n = ct(`
+`), fn = ae(`
   <g>
     <!-- shadow -->
-    <g stroke="${st}" stroke-width="${lt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${g}" y1="6" x2="${g}" y2="26"/>
-      <polyline points="${g - 4},10 ${g},6 ${g + 4},10"/>
-      <polyline points="${g - 4},22 ${g},26 ${g + 4},22"/>
+    <g stroke="${re}" stroke-width="${ie}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${u}" y1="6" x2="${u}" y2="26"/>
+      <polyline points="${u - 4},10 ${u},6 ${u + 4},10"/>
+      <polyline points="${u - 4},22 ${u},26 ${u + 4},22"/>
     </g>
     <!-- main -->
-    <g stroke="${L}" stroke-width="${vt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${g}" y1="6" x2="${g}" y2="26"/>
-      <polyline points="${g - 4},10 ${g},6 ${g + 4},10"/>
-      <polyline points="${g - 4},22 ${g},26 ${g + 4},22"/>
+    <g stroke="${L}" stroke-width="${fe}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${u}" y1="6" x2="${u}" y2="26"/>
+      <polyline points="${u - 4},10 ${u},6 ${u + 4},10"/>
+      <polyline points="${u - 4},22 ${u},26 ${u + 4},22"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${g}" cy="${g}" r="1.5" fill="${L}"/>
-    <circle cx="${g}" cy="${g - 5}" r="1" fill="${L}" opacity="0.6"/>
-    <circle cx="${g}" cy="${g + 5}" r="1" fill="${L}" opacity="0.6"/>
+    <circle cx="${u}" cy="${u}" r="1.5" fill="${L}"/>
+    <circle cx="${u}" cy="${u - 5}" r="1" fill="${L}" opacity="0.6"/>
+    <circle cx="${u}" cy="${u + 5}" r="1" fill="${L}" opacity="0.6"/>
   </g>
 `);
-function at(t, e, r) {
-  return { css: `${xn(t)} ${e} ${r}, auto`, hotspotX: e, hotspotY: r };
-}
-const Z = {
-  tap: at(vn, 12, 4),
-  hold: at(yn, 16, 16),
-  slideHorizontal: at(wn, g, g),
-  slideVertical: at($n, g, g)
+function ne(e, t, r) {
+  return { css: `${dn(e)} ${t} ${r}, auto`, hotspotX: t, hotspotY: r };
+}
+const Y = {
+  tap: ne(un, 12, 4),
+  hold: ne(gn, 16, 16),
+  slideHorizontal: ne(mn, u, u),
+  slideVertical: ne(fn, u, u)
 };
-function dt() {
+function le() {
   if (typeof window > "u") return null;
-  const t = window;
-  return t.Capacitor?.isNativePlatform?.() ? t.Capacitor.Plugins?.Haptics ?? null : null;
+  const e = window;
+  return e.Capacitor?.isNativePlatform?.() ? e.Capacitor.Plugins?.Haptics ?? null : null;
 }
-function gt(t) {
+function ce(e) {
   if (!(typeof navigator > "u" || typeof navigator.vibrate != "function"))
     try {
-      navigator.vibrate(t);
+      navigator.vibrate(e);
     } catch {
     }
 }
-const pn = {
+const hn = {
   /** Light confirmation — fires when slide gesture arms after user holds still. */
   tick() {
-    const t = dt();
-    if (t) {
-      t.impact({ style: "Light" }).catch(() => {
+    const e = le();
+    if (e) {
+      e.impact({ style: "Light" }).catch(() => {
       });
       return;
     }
-    gt(8);
+    ce(8);
   },
   /** Medium bump — fires when hold gesture commits (detail opening). */
   bump() {
-    const t = dt();
-    if (t) {
-      t.impact({ style: "Medium" }).catch(() => {
+    const e = le();
+    if (e) {
+      e.impact({ style: "Medium" }).catch(() => {
       });
       return;
     }
-    gt(20);
+    ce(20);
   },
   /** Stronger pulse — reserved for edit-mode pickup (future use). */
   pulse() {
-    const t = dt();
-    if (t) {
-      t.impact({ style: "Heavy" }).catch(() => {
+    const e = le();
+    if (e) {
+      e.impact({ style: "Heavy" }).catch(() => {
       });
       return;
     }
-    gt([0, 15, 40, 15]);
+    ce([0, 15, 40, 15]);
   }
 };
-function tr(t, e) {
+function tr(e, t) {
   const n = {
     isDown: !1,
     isTouch: !1,
@@ -1540,231 +1703,91 @@ function tr(t, e) {
     element: null
   };
   let a = null, o = null, s = null;
-  function l(h) {
-    h !== o && (s && s.disconnect(), s = new ResizeObserver((y) => {
-      const $ = y[0];
-      if ($) {
-        const O = $.borderBoxSize?.[0];
-        O ? a = { width: O.inlineSize, height: O.blockSize } : a = { width: $.contentRect.width, height: $.contentRect.height };
+  function l(f) {
+    f !== o && (s && s.disconnect(), s = new ResizeObserver((b) => {
+      const y = b[0];
+      if (y) {
+        const d = y.borderBoxSize?.[0];
+        d ? a = { width: d.inlineSize, height: d.blockSize } : a = { width: y.contentRect.width, height: y.contentRect.height };
       }
-    }), o = h, s.observe(h), a = { width: h.clientWidth, height: h.clientHeight });
+    }), o = f, s.observe(f), a = { width: f.clientWidth, height: f.clientHeight });
   }
-  const d = () => {
+  const g = () => {
     n.holdTimer && (clearTimeout(n.holdTimer), n.holdTimer = null);
-  }, c = () => {
+  }, m = () => {
     n.isDown = !1, n.hasMoved = !1, n.sliding = !1;
-  }, v = (h) => {
-    const $ = t().slide;
-    return $?.orientation === "horizontal" ? "horizontal" : $?.orientation === "vertical" ? "vertical" : h && (a || l(h), a) ? a.height > a.width ? "vertical" : "horizontal" : (e?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
-  }, C = (h) => {
-    const y = t();
-    if (!(!y.tap && !y.hold && !y.slide)) {
-      if (n.isDown = !0, n.isTouch = h.pointerType === "touch", n.element = h.currentTarget, l(n.element), n.startX = h.clientX, n.startY = h.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.sliding = !1, y.hold) {
-        const $ = y.hold.delay ?? 500;
+  }, k = (f) => {
+    const y = e().slide;
+    return y?.orientation === "horizontal" ? "horizontal" : y?.orientation === "vertical" ? "vertical" : f && (a || l(f), a) ? a.height > a.width ? "vertical" : "horizontal" : (t?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
+  }, R = (f) => {
+    const b = e();
+    if (!(!b.tap && !b.hold && !b.slide)) {
+      if (n.isDown = !0, n.isTouch = f.pointerType === "touch", n.element = f.currentTarget, l(n.element), n.startX = f.clientX, n.startY = f.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.sliding = !1, b.hold) {
+        const y = b.hold.delay ?? 500;
         n.holdTimer = setTimeout(() => {
-          n.holdTimer = null, !(!n.isDown || n.hasMoved) && (pn.bump(), y.hold?.action(), n.isDown = !1);
-        }, $);
+          n.holdTimer = null, !(!n.isDown || n.hasMoved) && (hn.bump(), b.hold?.action(), n.isDown = !1);
+        }, y);
       }
-      if (!n.isTouch && y.slide)
+      if (!n.isTouch && b.slide)
         try {
-          h.currentTarget.setPointerCapture(h.pointerId);
+          f.currentTarget.setPointerCapture(f.pointerId);
         } catch {
         }
     }
-  }, m = (h) => {
+  }, x = (f) => {
     if (!n.isDown) return;
-    const y = t(), $ = h.clientX - n.startX, O = h.clientY - n.startY;
-    if (Math.sqrt($ * $ + O * O) > 10 && (d(), n.hasMoved = !0), !n.isTouch && y.slide && n.hasMoved) {
-      const f = h.currentTarget, u = v(f);
+    const b = e(), y = f.clientX - n.startX, d = f.clientY - n.startY;
+    if (Math.sqrt(y * y + d * d) > 10 && (g(), n.hasMoved = !0), !n.isTouch && b.slide && n.hasMoved) {
+      const p = f.currentTarget, c = k(p);
       n.sliding = !0;
-      const A = y.slide.min ?? 0, p = y.slide.max ?? 100, G = p - A, Q = u === "vertical" ? -O : $, P = a ?? { width: f.clientWidth, height: f.clientHeight }, J = u === "vertical" ? P.height : P.width, Et = Q / J * G, Nt = Math.max(A, Math.min(p, y.slide.value + Et));
-      y.slide.onChange(Math.round(Nt)), n.startX = h.clientX, n.startY = h.clientY, h.preventDefault();
+      const A = b.slide.min ?? 0, I = b.slide.max ?? 100, Ce = I - A, De = c === "vertical" ? -d : y, he = a ?? { width: p.clientWidth, height: p.clientHeight }, ze = c === "vertical" ? he.height : he.width, Me = De / ze * Ce, _e = Math.max(A, Math.min(I, b.slide.value + Me));
+      b.slide.onChange(Math.round(_e)), n.startX = f.clientX, n.startY = f.clientY, f.preventDefault();
     }
-  }, x = (h) => {
-    const y = t(), $ = n.isDown, O = Date.now() - n.startTime, H = y.hold?.delay ?? 500;
-    d(), $ && y.tap && !n.hasMoved && O < H && y.tap();
+  }, w = (f) => {
+    const b = e(), y = n.isDown, d = Date.now() - n.startTime, _ = b.hold?.delay ?? 500;
+    g(), y && b.tap && !n.hasMoved && d < _ && b.tap();
     try {
-      h.currentTarget.releasePointerCapture(h.pointerId);
+      f.currentTarget.releasePointerCapture(f.pointerId);
     } catch {
     }
-    c();
-  }, V = (h) => {
-    d();
+    m();
+  }, N = (f) => {
+    g();
     try {
-      h.currentTarget.releasePointerCapture(h.pointerId);
+      f.currentTarget.releasePointerCapture(f.pointerId);
     } catch {
     }
-    c();
-  }, E = (h) => {
-    const y = t();
-    if (y.slide) {
-      const $ = y.slide.orientation;
-      return $ === "horizontal" ? Z.slideHorizontal.css : $ === "vertical" ? Z.slideVertical.css : (a || l(h), a && a.height > a.width ? Z.slideVertical.css : Z.slideHorizontal.css);
+    m();
+  }, D = (f) => {
+    const b = e();
+    if (b.slide) {
+      const y = b.slide.orientation;
+      return y === "horizontal" ? Y.slideHorizontal.css : y === "vertical" ? Y.slideVertical.css : (a || l(f), a && a.height > a.width ? Y.slideVertical.css : Y.slideHorizontal.css);
     }
-    return y.tap ? Z.tap.css : y.hold ? Z.hold.css : "";
+    return b.tap ? Y.tap.css : b.hold ? Y.hold.css : "";
   };
   return {
-    onPointerDown: C,
-    onPointerMove: m,
-    onPointerUp: x,
-    onPointerCancel: V,
-    onPointerEnter: (h) => {
-      const y = h.currentTarget;
-      n.element = y, y.style.cursor = E(y);
+    onPointerDown: R,
+    onPointerMove: x,
+    onPointerUp: w,
+    onPointerCancel: N,
+    onPointerEnter: (f) => {
+      const b = f.currentTarget;
+      n.element = b, b.style.cursor = D(b);
     },
-    bindElement: (h) => {
-      h && (n.element = h, l(h));
+    bindElement: (f) => {
+      f && (n.element = f, l(f));
     },
     touchAction: () => {
-      const h = t();
-      return h.tap || h.hold || h.slide ? "manipulation" : "auto";
+      const f = e();
+      return f.tap || f.hold || f.slide ? "manipulation" : "auto";
     },
     dispose: () => {
-      d(), s && (s.disconnect(), s = null), o = null, a = null;
+      g(), s && (s.disconnect(), s = null), o = null, a = null;
     }
   };
 }
-function er(t) {
-  return N(() => {
-    const e = t.entities();
-    if (e.length === 0) return;
-    const r = {
-      widgetConfig: t.widgetConfig,
-      entities: e.map((i) => {
-        const n = {
-          entity_id: i.id,
-          state: i.state,
-          domain: i.domain,
-          friendly_name: i.friendlyName
-        };
-        return t.customEntityFields ? {
-          ...n,
-          ...t.customEntityFields(i)
-        } : n;
-      })
-    };
-    return t.additionalData && Object.assign(r, t.additionalData), r;
-  });
-}
-function nr(t = {}) {
-  const [e, r] = j(!1), [i, n] = j(!1);
-  return {
-    save: async (s) => {
-      if (t.onSave) {
-        r(!0);
-        try {
-          await t.onSave(s), t.onSaveSuccess?.();
-        } finally {
-          r(!1);
-        }
-      }
-    },
-    remove: async () => {
-      if (t.onDelete) {
-        n(!0);
-        try {
-          await t.onDelete(), t.onDeleteSuccess?.();
-        } finally {
-          n(!1);
-        }
-      }
-    },
-    isSaving: e,
-    isDeleting: i
-  };
-}
-function rr(t = "edit") {
-  const [e, r] = j(!1), [i, n] = j(t);
-  return {
-    showDialog: e,
-    setShowDialog: r,
-    openDialog: () => r(!0),
-    closeDialog: () => r(!1),
-    activeTab: i,
-    setActiveTab: n
-  };
-}
-function ir(t) {
-  const e = N(() => t.entity() !== null), r = N(() => {
-    const n = t.entity();
-    return n ? t.calculateData(n) : null;
-  }), i = N(() => e() ? void 0 : t.emptyStateConfig);
-  return {
-    entity: t.entity,
-    data: r,
-    emptyState: i,
-    hasEntity: e
-  };
-}
-function ar(t) {
-  const e = t.minEntities ?? 1, r = N(() => t.entities().length), i = N(() => r() >= e), n = N(() => !i() || !t.calculateGroupData ? null : t.calculateGroupData(t.entities())), a = N(() => {
-    if (!i()) return;
-    const s = t.aggregationMode?.();
-    if (!s || s === "none") return;
-    const l = t.entities();
-    if (s === "light" || s === "binary-sensor" || s === "switch")
-      return Te(l, t.allEntitiesMode);
-    if (s === "sensor") {
-      const d = t.sensorGroupType?.() ?? "mean";
-      return Ve(l, d, !0);
-    }
-  }), o = N(() => i() ? void 0 : t.emptyStateConfig);
-  return {
-    entities: t.entities,
-    groupData: n,
-    aggregatedData: a,
-    emptyState: o,
-    hasEntities: i,
-    count: r
-  };
-}
-function or(t) {
-  const [e] = Ht({
-    validate: Gt(t.schema),
-    initialValues: t.initialValues
-  }), r = N(() => e.dirty), i = N(() => e.submitting);
-  return {
-    form: e,
-    isDirty: r,
-    isSubmitting: i,
-    handleSubmit: (a) => {
-      t.onSubmit?.(a);
-    },
-    getValue: Bt,
-    setValue: Lt,
-    reset: Pt
-  };
-}
-const mt = ["xs", "sm", "md", "lg", "xl"];
-function sr() {
-  const t = I(), e = N(() => mt.indexOf(t.size())), r = N(() => {
-    const l = t.size();
-    return l === "xs" || l === "sm";
-  }), i = N(() => {
-    const l = t.size();
-    return l === "lg" || l === "xl";
-  }), n = N(() => e() >= 2);
-  return {
-    isCompact: r,
-    isLarge: i,
-    showDetail: n,
-    showOn: (l) => l.includes(t.size()),
-    hideOn: (l) => !l.includes(t.size()),
-    matches: (l) => {
-      const d = l.trim();
-      if (d.endsWith("+")) {
-        const c = d.slice(0, -1), v = mt.indexOf(c);
-        return v >= 0 && e() >= v;
-      }
-      if (d.endsWith("-")) {
-        const c = d.slice(0, -1), v = mt.indexOf(c);
-        return v >= 0 && e() <= v;
-      }
-      return t.size() === d;
-    }
-  };
-}
-const D = {
+const C = {
   ocean: "bg-gradient-to-br from-cyan-600/20 to-blue-700/20",
   sunset: "bg-gradient-to-br from-orange-500/20 to-purple-700/20",
   forest: "bg-gradient-to-br from-emerald-600/20 to-teal-700/20",
@@ -1782,7 +1805,7 @@ const D = {
   sage: "bg-gradient-to-br from-lime-600/20 to-green-600/20",
   copper: "bg-gradient-to-br from-amber-600/20 to-amber-800/20",
   dusk: "bg-gradient-to-br from-blue-500/20 to-purple-600/20"
-}, lr = {
+}, nr = {
   ocean: "Ocean Breeze",
   sunset: "Sunset Glow",
   forest: "Forest Dawn",
@@ -1800,30 +1823,30 @@ const D = {
   sage: "Sage",
   copper: "Copper",
   dusk: "Dusk"
-}, cr = Object.keys(D);
-function St(t) {
-  const e = Object.keys(D);
+}, rr = Object.keys(C);
+function ye(e) {
+  const t = Object.keys(C);
   let r = 0;
-  for (const n of t)
+  for (const n of e)
     r = (r << 5) - r + n.charCodeAt(0), r = r & r;
-  const i = Math.abs(r) % e.length;
-  return e[i];
+  const i = Math.abs(r) % t.length;
+  return t[i];
 }
-function ur(t, e) {
-  if (!t) {
-    const i = St(e);
-    return D[i];
+function ir(e, t) {
+  if (!e) {
+    const i = ye(t);
+    return C[i];
   }
-  if (typeof t == "string" && t in D)
-    return D[t];
-  if (typeof t == "string")
-    return t;
-  const r = St(e);
-  return D[r];
+  if (typeof e == "string" && e in C)
+    return C[e];
+  if (typeof e == "string")
+    return e;
+  const r = ye(t);
+  return C[r];
 }
-const tt = {
+const X = {
   ocean: {
-    gradient: D.ocean,
+    gradient: C.ocean,
     bg: "bg-cyan-600/20",
     icon: "bg-cyan-500 dark:bg-cyan-400",
     glow: "shadow-cyan-500/50 dark:shadow-cyan-400/50",
@@ -1833,7 +1856,7 @@ const tt = {
     }
   },
   sunset: {
-    gradient: D.sunset,
+    gradient: C.sunset,
     bg: "bg-orange-500/20",
     icon: "bg-orange-500 dark:bg-orange-400",
     glow: "shadow-orange-500/50 dark:shadow-orange-400/50",
@@ -1843,7 +1866,7 @@ const tt = {
     }
   },
   forest: {
-    gradient: D.forest,
+    gradient: C.forest,
     bg: "bg-emerald-600/20",
     icon: "bg-emerald-500 dark:bg-emerald-400",
     glow: "shadow-emerald-500/50 dark:shadow-emerald-400/50",
@@ -1853,7 +1876,7 @@ const tt = {
     }
   },
   lavender: {
-    gradient: D.lavender,
+    gradient: C.lavender,
     bg: "bg-purple-500/20",
     icon: "bg-purple-500 dark:bg-purple-400",
     glow: "shadow-purple-500/50 dark:shadow-purple-400/50",
@@ -1863,7 +1886,7 @@ const tt = {
     }
   },
   golden: {
-    gradient: D.golden,
+    gradient: C.golden,
     bg: "bg-yellow-500/20",
     icon: "bg-yellow-500 dark:bg-yellow-400",
     glow: "shadow-yellow-500/50 dark:shadow-yellow-400/50",
@@ -1873,7 +1896,7 @@ const tt = {
     }
   },
   midnight: {
-    gradient: D.midnight,
+    gradient: C.midnight,
     bg: "bg-blue-700/20",
     icon: "bg-blue-700 dark:bg-blue-600",
     glow: "shadow-blue-700/50 dark:shadow-blue-600/50",
@@ -1883,7 +1906,7 @@ const tt = {
     }
   },
   rose: {
-    gradient: D.rose,
+    gradient: C.rose,
     bg: "bg-pink-400/20",
     icon: "bg-pink-500 dark:bg-pink-400",
     glow: "shadow-pink-500/50 dark:shadow-pink-400/50",
@@ -1893,7 +1916,7 @@ const tt = {
     }
   },
   mint: {
-    gradient: D.mint,
+    gradient: C.mint,
     bg: "bg-green-400/20",
     icon: "bg-green-500 dark:bg-green-400",
     glow: "shadow-green-500/50 dark:shadow-green-400/50",
@@ -1903,7 +1926,7 @@ const tt = {
     }
   },
   slate: {
-    gradient: D.slate,
+    gradient: C.slate,
     bg: "bg-slate-600/20",
     icon: "bg-slate-600 dark:bg-slate-500",
     glow: "shadow-slate-600/50 dark:shadow-slate-500/50",
@@ -1913,7 +1936,7 @@ const tt = {
     }
   },
   coral: {
-    gradient: D.coral,
+    gradient: C.coral,
     bg: "bg-pink-300/20",
     icon: "bg-pink-400 dark:bg-pink-300",
     glow: "shadow-pink-400/50 dark:shadow-pink-300/50",
@@ -1923,7 +1946,7 @@ const tt = {
     }
   },
   aurora: {
-    gradient: D.aurora,
+    gradient: C.aurora,
     bg: "bg-blue-500/20",
     icon: "bg-blue-500 dark:bg-blue-400",
     glow: "shadow-blue-500/50 dark:shadow-blue-400/50",
@@ -1933,7 +1956,7 @@ const tt = {
     }
   },
   ember: {
-    gradient: D.ember,
+    gradient: C.ember,
     bg: "bg-red-500/20",
     icon: "bg-red-500 dark:bg-red-400",
     glow: "shadow-red-500/50 dark:shadow-red-400/50",
@@ -1943,7 +1966,7 @@ const tt = {
     }
   },
   steel: {
-    gradient: D.steel,
+    gradient: C.steel,
     bg: "bg-gray-500/20",
     icon: "bg-gray-500 dark:bg-gray-400",
     glow: void 0,
@@ -1953,7 +1976,7 @@ const tt = {
     }
   },
   twilight: {
-    gradient: D.twilight,
+    gradient: C.twilight,
     bg: "bg-violet-600/20",
     icon: "bg-violet-500 dark:bg-violet-400",
     glow: "shadow-violet-500/50 dark:shadow-violet-400/50",
@@ -1963,7 +1986,7 @@ const tt = {
     }
   },
   sage: {
-    gradient: D.sage,
+    gradient: C.sage,
     bg: "bg-lime-600/20",
     icon: "bg-lime-500 dark:bg-lime-400",
     glow: "shadow-lime-500/50 dark:shadow-lime-400/50",
@@ -1973,7 +1996,7 @@ const tt = {
     }
   },
   copper: {
-    gradient: D.copper,
+    gradient: C.copper,
     bg: "bg-amber-600/20",
     icon: "bg-amber-600 dark:bg-amber-500",
     glow: "shadow-amber-600/50 dark:shadow-amber-500/50",
@@ -1983,7 +2006,7 @@ const tt = {
     }
   },
   dusk: {
-    gradient: D.dusk,
+    gradient: C.dusk,
     bg: "bg-blue-500/20",
     icon: "bg-blue-500 dark:bg-blue-400",
     glow: "shadow-blue-500/50 dark:shadow-blue-400/50",
@@ -1992,116 +2015,124 @@ const tt = {
       muted: "text-blue-400/60 dark:text-blue-300/60"
     }
   }
-}, dr = {
-  unavailable: tt.steel,
-  active: tt.ocean,
-  inactive: tt.steel,
-  success: tt.forest,
-  warning: tt.ember,
-  error: tt.rose
-}, gr = {
+}, ar = {
+  unavailable: X.steel,
+  active: X.ocean,
+  inactive: X.steel,
+  success: X.forest,
+  warning: X.ember,
+  error: X.rose
+}, or = j.enum([
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "neutral",
+  "accent"
+]), sr = {
   /** Optional display name override (renders as text input) */
-  title: () => X.string().optional().meta({ title: "Title", description: "Optional display name override" }),
+  title: () => j.string().optional().meta({ title: "Title", description: "Optional display name override" }),
   /** Multi-select entity picker for a HA domain */
-  entityIds: (t) => X.array(X.string()).default([]).meta({ domain: t, title: "Entities" }),
+  entityIds: (e) => j.array(j.string()).default([]).meta({ domain: e, title: "Entities" }),
   /** Single-select entity picker for a HA domain */
-  singleEntity: (t) => X.array(X.string()).default([]).meta({ domain: t, title: "Entity", singleSelect: !0 }),
+  singleEntity: (e) => j.array(j.string()).default([]).meta({ domain: e, title: "Entity", singleSelect: !0 }),
   /** Area picker dropdown */
-  areaId: () => X.string().optional().meta({ formType: "area-picker", title: "Area" })
+  areaId: () => j.string().optional().meta({ formType: "area-picker", title: "Area" })
 };
-let ft = null;
-function kn() {
-  return ft || (ft = getComputedStyle(document.documentElement)), ft;
+let de = null;
+function xn() {
+  return de || (de = getComputedStyle(document.documentElement)), de;
 }
-function mr(t) {
-  const e = t.startsWith("--") ? t : `--${t}`;
-  return kn().getPropertyValue(e).trim();
+function lr(e) {
+  const t = e.startsWith("--") ? e : `--${e}`;
+  return xn().getPropertyValue(t).trim();
 }
-function fr() {
+function cr() {
   return document.documentElement.classList.contains("dark");
 }
-const Sn = "0.3.7", Cn = {
-  version: Sn
-}, hr = Cn.version;
+const bn = "0.4.0", vn = {
+  version: bn
+}, dr = vn.version;
 export {
-  lr as GRADIENT_NAMES,
-  D as GRADIENT_PRESETS,
-  cr as GRADIENT_PRESET_KEYS,
-  Jn as Glow,
-  vr as GridSizeSchema,
-  yr as PublishBodySchema,
-  wr as PublishConfirmSchema,
-  $r as PublishRequestSchema,
-  hr as SDK_VERSION,
-  U as WIDGET_Z,
-  Y as Widget,
-  oe as WidgetContent,
-  ht as WidgetCtx,
-  Qn as WidgetDialog,
-  ge as WidgetEmptyState,
-  ye as WidgetIcon,
-  pr as WidgetManifestSchema,
-  _t as WidgetMetrics,
-  ne as WidgetSliderFill,
-  Zn as WidgetStack,
-  ze as WidgetStatus,
-  _e as WidgetSubtitle,
-  Oe as WidgetTitle,
-  Pe as WidgetValue,
-  qn as allEntitiesInState,
-  Xn as anyEntityInState,
-  Pn as applyCssVars,
-  Gn as applyLayout,
-  bt as builtInVariants,
-  Te as calculateLightGroup,
-  Ve as calculateSensorGroup,
-  Ft as classicGlass,
-  k as cn,
-  Yt as compactHorizontal,
-  Hn as composeVariants,
-  Kn as countActiveEntities,
-  Yn as countAvailableEntities,
-  Un as countEntitiesByState,
-  Bn as createEmptyStateConfig,
-  Tn as createEntity,
-  Ln as createFlexLayout,
-  Vn as defineWidget,
-  xe as deriveAdaptiveIconColors,
-  In as extendVariant,
-  jt as extractDefaults,
-  kr as formatSchemaError,
-  Re as formatValue,
-  Kt as getBuiltInVariant,
-  Rn as getBuiltInVariantIds,
-  Fn as getEntityAttribute,
-  jn as getEntityState,
-  ur as getGradient,
-  St as getGradientFromString,
-  ie as getSpacingClass,
-  mr as getThemeToken,
-  tt as gradientColorPresets,
-  Ie as interpretValue,
-  Wn as isBuiltInVariant,
-  fr as isDark,
-  We as isEntityActive,
-  Ae as isEntityAvailable,
-  xt as mergeVariants,
-  Ut as minimal,
-  Sr as parseGridSize,
-  Cr as serializeGridSize,
+  nr as GRADIENT_NAMES,
+  C as GRADIENT_PRESETS,
+  rr as GRADIENT_PRESET_KEYS,
+  Fn as Glow,
+  mr as GridSizeSchema,
+  fr as PublishBodySchema,
+  hr as PublishConfirmSchema,
+  xr as PublishRequestSchema,
+  dr as SDK_VERSION,
+  or as ToneSchema,
+  K as WIDGET_Z,
+  B as Widget,
+  ot as WidgetContent,
+  ue as WidgetCtx,
+  Yn as WidgetDialog,
+  gt as WidgetEmptyState,
+  ft as WidgetIcon,
+  br as WidgetManifestSchema,
+  Se as WidgetMetrics,
+  nt as WidgetSliderFill,
+  Un as WidgetStack,
+  kt as WidgetStatus,
+  St as WidgetSubtitle,
+  zt as WidgetTitle,
+  At as WidgetValue,
+  jn as allEntitiesInState,
+  Bn as anyEntityInState,
+  Wn as applyCssVars,
+  Nn as applyLayout,
+  ge as builtInVariants,
+  Mt as calculateLightGroup,
+  _t as calculateSensorGroup,
+  Ue as classicGlass,
+  $ as cn,
+  Ke as compactHorizontal,
+  Vn as composeVariants,
+  Gn as countActiveEntities,
+  Hn as countAvailableEntities,
+  Rn as countEntitiesByState,
+  In as createEmptyStateConfig,
+  zn as createEntity,
+  An as createFlexLayout,
+  Mn as defineWidget,
+  On as extendVariant,
+  je as extractDefaults,
+  vr as formatSchemaError,
+  Ot as formatValue,
+  qe as getBuiltInVariant,
+  Tn as getBuiltInVariantIds,
+  Ln as getEntityAttribute,
+  Pn as getEntityState,
+  ir as getGradient,
+  ye as getGradientFromString,
+  it as getSpacingClass,
+  lr as getThemeToken,
+  X as gradientColorPresets,
+  Fe as injectTokens,
+  Vt as interpretValue,
+  En as isBuiltInVariant,
+  cr as isDark,
+  Tt as isEntityActive,
+  Et as isEntityAvailable,
+  me as mergeVariants,
+  Ye as minimal,
+  wr as parseGridSize,
+  yr as serializeGridSize,
   W as spacing,
-  dr as stateColors,
-  Mt as toFormSchema,
-  F as typography,
-  er as useDebugData,
-  nr as useWidgetConfig,
-  I as useWidgetContext,
-  rr as useWidgetDialog,
-  ir as useWidgetEntity,
-  ar as useWidgetEntityGroup,
-  or as useWidgetForm,
+  ar as stateColors,
+  ke as toFormSchema,
+  G as typography,
+  Kn as useDebugData,
+  qn as useWidgetConfig,
+  P as useWidgetContext,
+  Xn as useWidgetDialog,
+  Jn as useWidgetEntity,
+  Zn as useWidgetEntityGroup,
+  Qn as useWidgetForm,
   tr as useWidgetGestures,
-  sr as useWidgetResponsive,
-  An as warnIfStub,
-  gr as widgetFields
+  er as useWidgetResponsive,
+  _n as warnIfStub,
+  sr as widgetFields
 };