@glasshome/widget-sdk 0.3.6 → 0.4.0

package/dist/index.js

@@ -1,34 +1,34 @@
-import { createSignal as j, createContext as Ee, useContext as Se, createEffect as q, untrack as ve, createMemo as A, splitProps as Ae, on as be, Show as te } from "solid-js";
-import { z as J } from "zod";
-import { GridSizeSchema as xr, PublishBodySchema as vr, PublishConfirmSchema as br, PublishRequestSchema as yr, WidgetManifestSchema as wr, formatSchemaError as $r, parseGridSize as kr, serializeGridSize as Sr } from "./schemas.js";
-import { memo as E, effect as D, setStyleProperty as z, className as C, template as w, insert as x, style as se, createComponent as T, addEventListener as ne, use as Ne, delegateEvents as Oe } from "solid-js/web";
-import { clsx as Te } from "clsx";
-import { twMerge as Ve } from "tailwind-merge";
-import { createElementSize as We } from "@solid-primitives/resize-observer";
-import { createForm as Ie, zodForm as Re, reset as Ge, setValue as Pe, getValue as He } from "@modular-forms/solid";
-function An(e) {
-  const [t] = j(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 pe(e) {
-  return J.toJSONSchema(e, {
+function ke(e) {
+  return j.toJSONSchema(e, {
     override: (t) => {
-      const n = J.globalRegistry.get(t.zodSchema);
-      return n && typeof n == "object" && Object.keys(n).length > 0 ? { ...t.jsonSchema, ...n } : t.jsonSchema;
+      const r = j.globalRegistry.get(t.zodSchema);
+      return r && typeof r == "object" && Object.keys(r).length > 0 ? { ...t.jsonSchema, ...r } : t.jsonSchema;
     }
   });
 }
-function Be(e) {
+function je(e) {
   try {
     return e.parse({});
   } catch {
     return {};
   }
 }
-function Nn(e) {
-  return e.configSchema && (e.manifest.schema || (e.manifest.schema = pe(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = Be(e.configSchema))), e;
+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 On(e) {
+function _n(e) {
 }
-const me = Ee();
-function G() {
-  const e = Se(me);
+const ue = Ee();
+function P() {
+  const e = pe(ue);
   if (!e)
     throw new Error("useWidgetContext must be used within a Widget component");
   return e;
 }
-function S(...e) {
-  return Ve(Te(e));
+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 Le = {
+const Ue = {
   id: "classic-glass",
   name: "Classic Glass",
   description: "Default glassmorphism design with blur background and gradient",
@@ -78,7 +187,7 @@ const Le = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, je = {
+}, Ye = {
   id: "minimal",
   name: "Minimal",
   description: "Clean, minimal design with no background effects",
@@ -107,7 +216,7 @@ const Le = {
     active: !1,
     focus: !0
   }
-}, Fe = {
+}, Ke = {
   id: "compact-horizontal",
   name: "Compact Horizontal",
   description: "Horizontal layout for compact widgets",
@@ -135,41 +244,41 @@ const Le = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, fe = {
-  "classic-glass": Le,
-  minimal: je,
-  "compact-horizontal": Fe
+}, ge = {
+  "classic-glass": Ue,
+  minimal: Ye,
+  "compact-horizontal": Ke
 };
-function Ue(e) {
-  return fe[e];
+function qe(e) {
+  return ge[e];
 }
-function Tn(e) {
-  return e in fe;
+function En(e) {
+  return e in ge;
 }
-function Vn() {
-  return Object.keys(fe);
+function Tn() {
+  return Object.keys(ge);
 }
-function Ce(e, t) {
+function $e(e, t) {
   if (typeof e != "object" || e === null)
     return t;
-  const n = { ...e };
-  for (const r in t) {
-    const i = t[r], a = e[r];
-    if (i !== void 0) {
-      if (Array.isArray(i)) {
-        n[r] = i;
+  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 i == "object" && i !== null && !Array.isArray(i)) {
-        typeof a == "object" && a !== null ? n[r] = Ce(a, i) : n[r] = i;
+      if (typeof n == "object" && n !== null && !Array.isArray(n)) {
+        typeof a == "object" && a !== null ? r[i] = $e(a, n) : r[i] = n;
         continue;
       }
-      n[r] = i;
+      r[i] = n;
     }
   }
-  return n;
+  return r;
 }
-function Ye(e, t) {
+function Xe(e, t) {
   if (!(!e && !t))
     return e ? t ? {
       container: { ...e.container, ...t.container },
@@ -177,18 +286,18 @@ function Ye(e, t) {
       cssVars: { ...e.cssVars, ...t.cssVars }
     } : e : t;
 }
-function Xe(e, t) {
+function Je(e, t) {
   return t ?? e;
 }
-function Ke(e, t) {
+function Ze(e, t) {
   if (!(!e && !t))
     return e ? t ? {
       visible: { ...e.visible, ...t.visible },
-      styles: Ce(e.styles ?? {}, t.styles ?? {}),
+      styles: $e(e.styles ?? {}, t.styles ?? {}),
       classNames: { ...e.classNames, ...t.classNames }
     } : e : t;
 }
-function qe(e, t) {
+function Qe(e, t) {
   if (!(!e && !t))
     return e ? t ? {
       background: t.background ?? e.background,
@@ -196,7 +305,7 @@ function qe(e, t) {
       decorations: t.decorations ?? e.decorations
     } : e : t;
 }
-function Je(e, t) {
+function et(e, t) {
   if (!(!e && !t))
     return e ? t ? {
       hover: t.hover ?? e.hover,
@@ -206,87 +315,81 @@ function Je(e, t) {
       activeScale: t.activeScale ?? e.activeScale
     } : e : t;
 }
-function he(e, t) {
+function me(e, t) {
   return {
     id: t.id ?? e.id,
     name: t.name ?? e.name,
     description: t.description ?? e.description,
-    styles: Ye(e.styles, t.styles),
-    layout: Xe(e.layout, t.layout),
-    elements: Ke(e.elements, t.elements),
-    plugins: qe(e.plugins, t.plugins),
-    interactions: Je(e.interactions, t.interactions),
+    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 Wn(e, t) {
+function On(e, t) {
   return {
     ...t,
     extends: e
   };
 }
-function In(...e) {
+function Vn(...e) {
   if (e.length === 0)
     throw new Error("composeVariants requires at least one variant");
-  return e.length === 1 ? e[0] : e.reduce((t, n) => he(t, n));
+  return e.length === 1 ? e[0] : e.reduce((t, r) => me(t, r));
 }
-function Rn(e, t) {
-  return he(e, { layout: t });
+function Nn(e, t) {
+  return me(e, { layout: t });
 }
-function Gn(e, t) {
-  return he(e, {
+function Wn(e, t) {
+  return me(e, {
     styles: { cssVars: t }
   });
 }
-function Pn(e = "column", t = "start", n = "start", r) {
+function An(e = "column", t = "start", r = "start", i) {
   return {
     type: "flex",
     direction: e,
     align: t,
-    justify: n,
-    ...r
+    justify: r,
+    ...i
   };
 }
-var Ze = /* @__PURE__ */ w("<div>"), Qe = /* @__PURE__ */ w('<div class="pointer-events-none absolute inset-0 opacity-40 blur-2xl">');
-function et(e) {
-  const t = G(), n = () => t.orientation() === "vertical" ? `inset(${100 - e.value}% 0 0 0)` : `inset(0 ${100 - e.value}% 0 0)`, r = () => e.color ?? "rgb(59, 130, 246)";
-  return [E(() => E(() => !!((e.glow ?? !1) && e.value > 0))() && (() => {
-    var i = Qe();
-    return D((a) => {
-      var o = r(), s = U.BACKGROUND;
-      return o !== a.e && z(i, "background", a.e = o), s !== a.t && z(i, "z-index", a.t = s), a;
+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 = $("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
-    }), i;
-  })()), (() => {
-    var i = Ze();
-    return D((a) => {
-      var o = S("pointer-events-none absolute inset-0", e.isDragging ? "duration-0" : "transition-all duration-300 ease-out", e.class), s = r(), l = n(), d = e.opacity ?? 0.3, c = U.BACKGROUND;
-      return o !== a.e && C(i, a.e = o), s !== a.t && z(i, "background", a.t = s), l !== a.a && z(i, "clip-path", a.a = l), d !== a.o && z(i, "opacity", a.o = d), c !== a.i && z(i, "z-index", a.i = c), a;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    }), i;
-  })()];
+    }), n;
+  })();
 }
-const re = {
+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: (e) => `${re.S1[e]}px`,
+  S1: (e) => `${ee.S1[e]}px`,
   /** Small spacing (6-14px) - default for most layouts */
-  S2: (e) => `${re.S2[e]}px`,
+  S2: (e) => `${ee.S2[e]}px`,
   /** Medium spacing (8-16px) */
-  S3: (e) => `${re.S3[e]}px`,
+  S3: (e) => `${ee.S3[e]}px`,
   /** Large spacing (12-20px) */
-  S4: (e) => `${re.S4[e]}px`,
+  S4: (e) => `${ee.S4[e]}px`,
   /** Icon container size in pixels */
   icon: (e) => ({
     xs: 32,
@@ -337,7 +440,7 @@ const re = {
     // More padding for larger widgets
     xl: "20px"
   })[e]
-}, tt = {
+}, rt = {
   4: "gap-1",
   6: "gap-1.5",
   8: "gap-2",
@@ -348,33 +451,33 @@ const re = {
   18: "gap-[18px]",
   20: "gap-5"
 };
-function nt(e, t) {
-  const n = re[e][t];
-  return tt[n] || `gap-[${n}px]`;
+function it(e, t) {
+  const r = ee[e][t];
+  return rt[r] || `gap-[${r}px]`;
 }
-var rt = /* @__PURE__ */ w("<div>");
-function it(e) {
-  const t = G();
+var at = /* @__PURE__ */ v("<div>");
+function ot(e) {
+  const t = P();
   return (() => {
-    var n = rt();
-    return x(n, () => e.children), D((r) => {
-      var i = S(
+    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",
         t.contentLayout() === "horizontal" ? "flex-row items-center" : "flex-col justify-between",
-        nt("S3", t.size()),
+        it("S3", t.size()),
         e.class
-      ), a = W.container(t.size()), o = U.CONTENT;
-      return i !== r.e && C(n, r.e = i), a !== r.t && z(n, "padding", r.t = a), o !== r.a && z(n, "z-index", r.a = o), r;
+      ), 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,
       a: void 0
-    }), n;
+    }), r;
   })();
 }
-const F = {
+const G = {
   /** Container base text sizing */
   container: (e) => ({
     xs: "text-xs",
@@ -488,279 +591,203 @@ const F = {
     // 16px
   })[e]
 };
-var at = /* @__PURE__ */ w("<div><div>"), ot = /* @__PURE__ */ w("<div>"), st = /* @__PURE__ */ w("<h3>"), lt = /* @__PURE__ */ w("<p>"), ct = /* @__PURE__ */ w("<div class=mt-2>");
-function ut(e) {
-  const t = G(), n = () => t.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 r = at(), i = r.firstChild;
-    return x(r, (() => {
+    var i = st(), n = i.firstChild;
+    return h(i, (() => {
       var a = E(() => !!e.icon);
       return () => a() && (() => {
-        var o = ot();
-        return x(o, () => e.icon), D((s) => {
-          var l = S("flex items-center justify-center text-foreground/30", n() ? "shrink-0" : ""), d = `${W.icon(t.size())}px`, c = `${W.icon(t.size())}px`;
-          return l !== s.e && C(o, s.e = l), d !== s.t && z(o, "width", s.t = d), c !== s.a && z(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;
       })();
-    })(), i), x(i, (() => {
+    })(), n), h(n, (() => {
       var a = E(() => !!(e.title ?? "No data"));
       return () => a() && (() => {
-        var o = st();
-        return x(o, () => e.title ?? "No data"), D((s) => {
-          var l = S("font-semibold text-foreground/60", F.subtitle(t.size())), d = n() ? "100%" : "80%";
-          return l !== s.e && C(o, s.e = l), d !== s.t && z(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), x(i, (() => {
+    })(), null), h(n, (() => {
       var a = E(() => !!e.message);
       return () => a() && (() => {
-        var o = lt();
-        return x(o, () => e.message), D((s) => {
-          var l = S("text-foreground/50", F.emptyState(t.size())), d = n() ? "100%" : "85%";
-          return l !== s.e && C(o, s.e = l), d !== s.t && z(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), x(i, (() => {
+    })(), null), h(n, (() => {
       var a = E(() => !!e.action);
       return () => a() && (() => {
-        var o = ct();
-        return x(o, () => e.action), o;
+        var o = ut();
+        return h(o, () => e.action), o;
       })();
-    })(), null), D((a) => {
-      var o = S("flex h-full w-full", n() ? "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()), d = S("flex flex-col", n() ? "items-start text-left" : "items-center text-center"), c = W.S1(t.size());
-      return o !== a.e && C(r, a.e = o), s !== a.t && z(r, "gap", a.t = s), l !== a.a && z(r, "padding", a.a = l), d !== a.o && C(i, a.o = d), c !== a.i && z(i, "gap", a.i = c), a;
+    })(), null), z((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,
       a: void 0,
       o: void 0,
       i: void 0
-    }), r;
+    }), i;
   })();
 }
-function dt(e) {
-  const t = e.match(/hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*\)/);
-  return t ? { h: Number(t[1]), s: Number(t[2]), l: Number(t[3]) } : null;
-}
-function gt(e) {
-  const t = e.match(/rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)/);
-  return t ? Me(Number(t[1]), Number(t[2]), Number(t[3])) : null;
-}
-function mt(e) {
-  const t = e.match(/^#([0-9a-f]{3,8})$/i);
-  if (!t) return null;
-  let n = t[1];
-  n.length === 3 && (n = n[0] + n[0] + n[1] + n[1] + n[2] + n[2]);
-  const r = Number.parseInt(n.slice(0, 2), 16), i = Number.parseInt(n.slice(2, 4), 16), a = Number.parseInt(n.slice(4, 6), 16);
-  return Me(r, i, a);
-}
-function Me(e, t, n) {
-  e /= 255, t /= 255, n /= 255;
-  const r = Math.max(e, t, n), i = Math.min(e, t, n), a = (r + i) / 2;
-  if (r === i) return { h: 0, s: 0, l: a * 100 };
-  const o = r - i, s = a > 0.5 ? o / (2 - r - i) : o / (r + i);
-  let l = 0;
-  return r === e ? l = ((t - n) / o + (t < n ? 6 : 0)) / 6 : r === t ? l = ((n - e) / o + 2) / 6 : l = ((e - t) / o + 4) / 6, { h: l * 360, s: s * 100, l: a * 100 };
-}
+var mt = /* @__PURE__ */ v('<div><div class="flex items-center justify-center">'), ve = /* @__PURE__ */ v('<div class="glasshome-widget-icon absolute">');
 function ft(e) {
-  return dt(e) ?? gt(e) ?? mt(e);
-}
-function ye(e, t, n, r) {
-  const i = Math.round(e), a = Math.round(Math.min(100, Math.max(0, t))), o = Math.round(Math.min(100, Math.max(0, n)));
-  return r !== void 0 && r < 1 ? `hsla(${i}, ${a}%, ${o}%, ${r})` : `hsl(${i}, ${a}%, ${o}%)`;
-}
-function ht(e) {
-  const t = ft(e);
-  if (!t) return null;
-  const { h: n, s: r, l: i } = t;
-  let a, o = Math.min(r + 10, 100);
-  i < 25 ? (a = i + 12, o = Math.min(r + 15, 100)) : i < 40 ? a = Math.max(i - 8, 15) : a = Math.max(18, i * 0.3), r < 15 && (o = 10, a = Math.max(a, 20));
-  const s = ye(n, o, a, 0.85), l = ye(n, Math.min(r, 90), Math.min(i, 55), 0.5);
-  return { background: s, glow: l };
-}
-var xt = /* @__PURE__ */ w('<div><div class="flex items-center justify-center text-foreground">'), we = /* @__PURE__ */ w("<div>");
-function vt(e) {
-  const t = G(), n = () => e.dynamicColor ? ht(e.dynamicColor) : null, r = () => !!n(), i = () => {
-    const l = n();
-    if (l)
-      return {
-        "background-color": l.background
-      };
-  }, a = () => {
-    const l = n();
-    if (l)
-      return {
-        "box-shadow": `0 0 25px ${l.glow}`
-      };
-  }, o = () => {
-    const l = {
+  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 = i(), c = a();
-    return d && Object.assign(l, d), c && Object.assign(l, c), l;
-  }, s = (l, d, c) => {
-    const y = {
-      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()) * l}px`,
-      right: `${-W.icon(t.size()) * (l * 0.71)}px`,
-      "z-index": d,
-      opacity: c
-    }, M = i();
-    return M && Object.assign(y, M), y;
-  };
+    };
+    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 = xt(), d = l.firstChild;
-    return x(l, (() => {
-      var c = E(() => (e.entityCount ?? 1) >= 2);
-      return () => c() && (() => {
-        var y = we();
-        return D((M) => {
-          var f = S("absolute", !r() && (e.color ?? "bg-foreground/10")), v = s(0.14, -2, 0.45);
-          return f !== M.e && C(y, M.e = f), M.t = se(y, v, M.t), M;
-        }, {
-          e: void 0,
-          t: void 0
-        }), y;
+    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), x(l, (() => {
-      var c = E(() => (e.entityCount ?? 1) >= 3);
-      return () => c() && (() => {
-        var y = we();
-        return D((M) => {
-          var f = S("absolute", !r() && (e.color ?? "bg-foreground/10")), v = s(0.28, -3, 0.2);
-          return f !== M.e && C(y, M.e = f), M.t = se(y, v, M.t), M;
-        }, {
-          e: void 0,
-          t: void 0
-        }), y;
+    })(), 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), x(d, () => e.icon), D((c) => {
-      var y = S(
-        "relative flex shrink-0 items-center justify-center transition-all",
-        "pointer-events-none",
-        e.dimmed && "opacity-50",
-        // Only apply Tailwind classes when not using dynamic colors
-        !r() && e.glow && "shadow-[0_0_25px_var(--tw-shadow-color,transparent)]",
-        !r() && (e.color ?? "bg-foreground/10"),
-        !r() && e.glow,
-        e.class
-      ), M = o(), f = `${W.iconSize(t.size())}px`;
-      return y !== c.e && C(l, c.e = y), c.t = se(l, M, c.t), f !== c.a && z(d, "font-size", c.a = f), 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 bt = /* @__PURE__ */ w("<div>"), yt = /* @__PURE__ */ w("<div><div><span></span></div><div>"), wt = /* @__PURE__ */ w("<span class=shrink-0>"), $t = /* @__PURE__ */ w('<span class="ml-1 text-foreground/70">');
-function kt(e) {
-  const t = G(), n = () => {
-    const r = e.direction ?? "auto";
-    return r === "auto" ? t.orientation() === "horizontal" ? "horizontal" : "vertical" : r;
+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 r = bt();
-    return x(r, () => e.children), D(() => C(r, S("flex", n() === "horizontal" ? "flex-row gap-4" : "flex-col gap-2", e.class))), r;
+    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 St(e) {
-  const t = G();
+function yt(e) {
+  const t = P();
   return (() => {
-    var n = yt(), r = n.firstChild, i = r.firstChild, a = r.nextSibling;
-    return x(r, (() => {
+    var r = xt(), i = r.firstChild, n = i.firstChild, a = i.nextSibling;
+    return h(i, (() => {
       var o = E(() => !!e.icon);
       return () => o() && (() => {
-        var s = wt();
-        return x(s, () => e.icon), s;
+        var s = bt();
+        return h(s, () => e.icon), s;
       })();
-    })(), i), x(i, () => e.label), x(a, () => e.value, null), x(a, (() => {
+    })(), n), h(n, () => e.label), h(a, () => e.value, null), h(a, (() => {
       var o = E(() => !!e.unit);
       return () => o() && (() => {
-        var s = $t();
-        return x(s, () => e.unit), s;
+        var s = vt();
+        return h(s, () => e.unit), s;
       })();
-    })(), null), D((o) => {
-      var s = S("flex flex-col", e.dimmed && "opacity-50", e.class), l = W.S1(t.size()), d = S("flex items-center gap-1 text-foreground/60", F.metricLabel(t.size())), c = S("font-semibold text-foreground", F.metricValue(t.size()));
-      return s !== o.e && C(n, o.e = s), l !== o.t && z(n, "gap", o.t = l), d !== o.a && C(r, o.a = d), c !== o.o && C(a, o.o = c), o;
+    })(), null), z((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,
       a: void 0,
       o: void 0
-    }), n;
+    }), r;
   })();
 }
-const ze = kt;
-ze.Item = St;
-var pt = /* @__PURE__ */ w("<p>");
-function Ct(e) {
-  const t = G();
+const Se = wt;
+Se.Item = yt;
+var pt = /* @__PURE__ */ v("<p>");
+function kt(e) {
+  const t = P();
   return (() => {
-    var n = pt();
-    return x(n, (() => {
-      var r = E(() => !!e.isUnavailable);
-      return () => r() ? "Unavailable" : e.children;
-    })()), D((r) => {
-      var i = S("relative font-bold text-foreground", e.dimmed && "opacity-40", F.status(t.size()), e.class), a = U.ACTIONS;
-      return i !== r.e && C(n, r.e = i), a !== r.t && z(n, "z-index", r.t = a), r;
+    var r = pt();
+    return h(r, (() => {
+      var i = E(() => !!e.isUnavailable);
+      return () => i() ? "Unavailable" : e.children;
+    })()), z((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
-    }), n;
+    }), r;
   })();
 }
-var Mt = /* @__PURE__ */ w("<p>");
-function zt(e) {
-  const t = G();
+var $t = /* @__PURE__ */ v("<p>");
+function St(e) {
+  const t = P();
   return (() => {
-    var n = Mt();
-    return x(n, () => e.children), D(() => C(n, S("truncate font-medium text-foreground/80", e.dimmed && "text-foreground/50", F.subtitle(t.size()), e.class))), n;
+    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 Dt = /* @__PURE__ */ w("<div><h3>"), _t = /* @__PURE__ */ w("<span>");
-function Et(e) {
-  const t = G();
+var Ct = /* @__PURE__ */ v("<div><h3>"), Dt = /* @__PURE__ */ v("<span>");
+function zt(e) {
+  const t = P();
   return (() => {
-    var n = Dt(), r = n.firstChild;
-    return x(r, () => e.children), x(n, (() => {
-      var i = E(() => e.badge !== void 0 && e.badge > 0);
-      return () => i() && (() => {
-        var a = _t();
-        return x(a, () => e.badge), D(() => C(a, S("shrink-0 rounded-full bg-foreground/20 px-2 py-0.5 font-medium text-foreground", F.badge(t.size())))), a;
+    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 = 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), D((i) => {
-      var a = S("relative flex items-center", e.class), o = W.S1(t.size()), s = U.ACTIONS, l = S("truncate text-foreground/60", F.title(t.size()));
-      return a !== i.e && C(n, i.e = a), o !== i.t && z(n, "gap", i.t = o), s !== i.a && z(n, "z-index", i.a = s), l !== i.o && C(r, i.o = l), i;
+    })(), null), z((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,
       a: void 0,
       o: void 0
-    }), n;
+    }), r;
   })();
 }
-function Hn(e) {
+function In(e) {
   return {
     icon: e.icon,
     title: e.title,
     message: e.message || `Configure this widget to add ${e.entityType || "an entity"}`
   };
 }
-function At(e, t = !1) {
+function Mt(e, t = !1) {
   if (e.length === 0)
     return {
       isGroup: !1,
@@ -774,31 +801,31 @@ function At(e, t = !1) {
       totalCount: 0,
       description: "No entities"
     };
-  const n = e.length > 1;
-  if (!n) {
-    const p = e[0], P = p.state === "on", B = p.attributes?.brightness || 0, h = Math.round(B / 255 * 100);
+  const r = e.length > 1;
+  if (!r) {
+    const y = e[0], d = y.state === "on", _ = y.attributes?.brightness || 0, p = Math.round(_ / 255 * 100);
     return {
       isGroup: !1,
-      state: p.state,
-      isOn: P,
-      isUnavailable: p.state === "unavailable",
-      brightness: B,
-      brightnessPercent: h,
-      color: $e(p),
-      onCount: P ? 1 : 0,
+      state: y.state,
+      isOn: d,
+      isUnavailable: y.state === "unavailable",
+      brightness: _,
+      brightnessPercent: p,
+      color: we(y),
+      onCount: d ? 1 : 0,
       totalCount: 1,
-      description: P ? "On" : "Off"
+      description: d ? "On" : "Off"
     };
   }
-  let r = 0, i = 0, a = 0, o = 0, s = 0, l = 0;
-  const d = [];
-  for (const p of e)
-    switch (p.state) {
+  let i = 0, n = 0, a = 0, o = 0, s = 0, l = 0;
+  const g = [];
+  for (const y of e)
+    switch (y.state) {
       case "on":
-        r++, p.attributes?.brightness !== void 0 && (s += p.attributes.brightness, l++), p.attributes?.rgb_color && d.push(p.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":
-        i++;
+        n++;
         break;
       case "unknown":
         a++;
@@ -807,31 +834,31 @@ function At(e, t = !1) {
         o++;
         break;
     }
-  const c = e.length, y = o === c, M = a + o === c, f = r > 0, v = r === c, V = i === c;
-  let N, I;
-  t ? y ? (N = "unavailable", I = !1) : a > 0 || o > 0 ? (N = "unknown", I = !1) : i > 0 ? (N = "off", I = !1) : (N = "on", I = !0) : y ? (N = "unavailable", I = !1) : M ? (N = "unknown", I = !1) : f ? (N = "on", I = !0) : (N = "off", I = !1);
-  const X = l > 0 ? Math.round(s / l) : 0, m = Math.round(X / 255 * 100);
-  let b;
-  if (d.length > 0) {
-    const p = Math.round(d.reduce((u, O) => u + O[0], 0) / d.length), P = Math.round(d.reduce((u, O) => u + O[1], 0) / d.length), B = Math.round(d.reduce((u, O) => u + O[2], 0) / d.length), h = X / 255;
-    b = `rgb(${Math.round(p * h)}, ${Math.round(P * h)}, ${Math.round(B * h)})`;
+  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
-    b = $e(e[0]);
-  let $;
-  return v ? $ = "All on" : V ? $ = "All off" : r > 0 ? $ = `${r} of ${c} on` : $ = "Off", {
-    isGroup: n,
-    state: N,
-    isOn: I,
-    isUnavailable: N === "unavailable",
-    brightness: X,
-    brightnessPercent: m,
-    color: b,
-    onCount: r,
-    totalCount: c,
-    description: $
+    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: D,
+    isOn: T,
+    isUnavailable: D === "unavailable",
+    brightness: F,
+    brightnessPercent: q,
+    color: f,
+    onCount: i,
+    totalCount: m,
+    description: b
   };
 }
-function Nt(e, t = "mean", n = !0) {
+function _t(e, t = "mean", r = !0) {
   if (e.length === 0)
     return {
       isGroup: !1,
@@ -840,45 +867,45 @@ function Nt(e, t = "mean", n = !0) {
       isUnavailable: !0,
       description: "No entities"
     };
-  const r = e.length > 1;
-  if (!r) {
-    const f = e[0], v = Number.parseFloat(f.state);
-    let V = f.state;
-    return Number.isNaN(v) || (V = Number.isInteger(v) ? v.toString() : v.toFixed(1)), {
+  const i = e.length > 1;
+  if (!i) {
+    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(v) ? null : v,
-      isUnavailable: f.state === "unavailable",
-      unit: f.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 i = [], a = [];
+  const n = [], a = [];
   let o = 0, s;
-  for (const f of e) {
-    if (!s && f.unitOfMeasurement && (s = f.unitOfMeasurement), f.state === "unavailable") {
+  for (const x of e) {
+    if (!s && x.unitOfMeasurement && (s = x.unitOfMeasurement), x.state === "unavailable") {
       o++, a.push({
-        entityId: f.id,
+        entityId: x.id,
         value: "unavailable",
-        friendly_name: f.friendlyName
+        friendly_name: x.friendlyName
       });
       continue;
     }
-    const v = Number.parseFloat(f.state);
-    isNaN(v) ? n || a.push({
-      entityId: f.id,
-      value: f.state,
-      friendly_name: f.friendlyName
-    }) : (i.push(v), a.push({
-      entityId: f.id,
-      value: v,
-      friendly_name: f.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 === e.length, d = i.length === 0;
-  if (l || d)
+  const l = o === e.length, g = n.length === 0;
+  if (l || g)
     return {
-      isGroup: r,
+      isGroup: i,
       state: l ? "unavailable" : "unknown",
       numericValue: null,
       isUnavailable: l,
@@ -886,68 +913,68 @@ function Nt(e, t = "mean", n = !0) {
       description: l ? "Unavailable" : "No numeric values",
       memberValues: a
     };
-  let c, y;
+  let m, k;
   switch (t) {
     case "min":
-      c = Math.min(...i), y = "Minimum";
+      m = Math.min(...n), k = "Minimum";
       break;
     case "max":
-      c = Math.max(...i), y = "Maximum";
+      m = Math.max(...n), k = "Maximum";
       break;
     case "mean":
-      c = i.reduce((f, v) => f + v, 0) / i.length, y = "Average";
+      m = n.reduce((x, w) => x + w, 0) / n.length, k = "Average";
       break;
     case "median": {
-      const f = [...i].sort((V, N) => V - N), v = Math.floor(f.length / 2);
-      c = f.length % 2 === 0 ? (f[v - 1] + f[v]) / 2 : f[v], y = "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 = i.reduce((f, v) => f + v, 0), y = "Sum";
+      m = n.reduce((x, w) => x + w, 0), k = "Sum";
       break;
     case "last":
-      c = i[i.length - 1], y = "Latest";
+      m = n[n.length - 1], k = "Latest";
       break;
     case "range":
-      c = Math.max(...i) - Math.min(...i), y = "Range";
+      m = Math.max(...n) - Math.min(...n), k = "Range";
       break;
     case "product":
-      c = i.reduce((f, v) => f * v, 1), y = "Product";
+      m = n.reduce((x, w) => x * w, 1), k = "Product";
       break;
     case "std_dev": {
-      const f = i.reduce((V, N) => V + N, 0) / i.length, v = i.reduce((V, N) => V + (N - f) ** 2, 0) / i.length;
-      c = Math.sqrt(v), y = "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 = i.reduce((f, v) => f + v, 0) / i.length, y = "Average";
+      m = n.reduce((x, w) => x + w, 0) / n.length, k = "Average";
   }
-  const M = Number.isInteger(c) ? c.toString() : c.toFixed(1);
+  const R = Number.isInteger(m) ? m.toString() : m.toFixed(1);
   return {
-    isGroup: r,
-    state: M,
-    numericValue: c,
+    isGroup: i,
+    state: R,
+    numericValue: m,
     isUnavailable: !1,
     unit: s,
-    description: `${y} of ${i.length}`,
+    description: `${k} of ${n.length}`,
     memberValues: a
   };
 }
-function $e(e) {
+function we(e) {
   if (e.state !== "on") return "rgb(100, 100, 100)";
-  const n = (e.attributes?.brightness ?? 255) / 255;
+  const r = (e.attributes?.brightness ?? 255) / 255;
   if (e.attributes?.rgb_color) {
-    const [r, i, a] = e.attributes.rgb_color;
-    return `rgb(${Math.round(r * n)}, ${Math.round(i * n)}, ${Math.round(a * n)})`;
+    const [i, n, a] = e.attributes.rgb_color;
+    return `rgb(${Math.round(i * r)}, ${Math.round(n * r)}, ${Math.round(a * r)})`;
   }
   if (e.attributes?.color_temp) {
-    const i = 1e6 / e.attributes.color_temp / 100;
+    const n = 1e6 / e.attributes.color_temp / 100;
     let a, o, s;
-    return i <= 66 ? (a = 255, o = i <= 19 ? 0 : 99.4708025861 * Math.log(i - 10) - 161.1195681661, s = i <= 19 ? 0 : i <= 66 ? 138.5177312231 * Math.log(i - 10) - 305.0447927307 : 255) : (a = 329.698727446 * (i - 60) ** -0.1332047592, o = 288.1221695283 * (i - 60) ** -0.0755148492, s = 255), a = Math.max(0, Math.min(255, a)) * n, o = Math.max(0, Math.min(255, o)) * n, s = Math.max(0, Math.min(255, s)) * n, `rgb(${Math.round(a)}, ${Math.round(o)}, ${Math.round(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 * n)}, ${Math.round(220 * n)}, ${Math.round(180 * n)})`;
+  return `rgb(${Math.round(255 * r)}, ${Math.round(220 * r)}, ${Math.round(180 * r)})`;
 }
-function Ot(e) {
+function Et(e) {
   return e ? e.state !== "unavailable" && e.state !== "unknown" : !1;
 }
 function Tt(e) {
@@ -960,162 +987,165 @@ function Tt(e) {
   }
   return !1;
 }
-function Bn(e, t = "unknown") {
+function Pn(e, t = "unknown") {
   return e?.state ?? t;
 }
-function Ln(e, t, n) {
-  return e?.attributes ? e.attributes[t] ?? n : n;
+function Ln(e, t, r) {
+  return e?.attributes ? e.attributes[t] ?? r : r;
 }
-function jn(e, t) {
-  return e.filter((n) => n.state === t).length;
+function Rn(e, t) {
+  return e.filter((r) => r.state === t).length;
 }
-function Fn(e) {
-  return e.filter(Ot).length;
+function Hn(e) {
+  return e.filter(Et).length;
 }
-function Un(e) {
+function Gn(e) {
   return e.filter(Tt).length;
 }
-function Yn(e, t) {
-  return e.length > 0 && e.every((n) => n.state === t);
+function jn(e, t) {
+  return e.length > 0 && e.every((r) => r.state === t);
 }
-function Xn(e, t) {
-  return e.some((n) => n.state === t);
+function Bn(e, t) {
+  return e.some((r) => r.state === t);
 }
-function Vt(e, t, n) {
-  const { decimals: r, scale: i = !0 } = n || {};
+function Ot(e, t, r) {
+  const { decimals: i, scale: n = !0 } = r || {};
   if (typeof e == "string")
     return t ? `${e}${t}` : e;
   if (e == null || Number.isNaN(e))
     return t ? `--${t}` : "--";
   let a = e, o = t || "";
-  i && t && (t === "W" || t === "kW" || t === "MW") && (e >= 1e6 ? (a = e / 1e6, o = "MW") : e >= 1e3 ? (a = e / 1e3, o = "kW") : o = "W"), i && 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");
+  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 r !== void 0 ? s = a.toFixed(r) : a !== e ? s = a.toFixed(1) : Number.isInteger(e) ? s = e.toString() : s = Number.parseFloat(e.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 Wt(e, t) {
+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 It = /* @__PURE__ */ w("<div><div>"), Rt = /* @__PURE__ */ w("<div>");
-function Gt(e) {
-  const t = G();
+var Nt = /* @__PURE__ */ v("<div><div>"), Wt = /* @__PURE__ */ v("<div>");
+function At(e) {
+  const t = P();
   return (() => {
-    var n = It(), r = n.firstChild;
-    return x(r, () => Vt(e.value, e.unit)), x(n, (() => {
-      var i = E(() => !!(e.interpret && typeof e.value == "number"));
-      return () => i() && (() => {
-        var a = Rt();
-        return x(a, () => Wt(e.value, e.unit)), D((o) => {
-          var s = S("text-foreground/60", F.subtitle(t.size())), l = W.S1(t.size());
-          return s !== o.e && C(a, o.e = s), l !== o.t && z(a, "margin-top", o.t = l), o;
+    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 = 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), D((i) => {
-      var a = S("flex flex-col", e.class), o = S("font-bold text-foreground", F.value(t.size()));
-      return a !== i.e && C(n, i.e = a), o !== i.t && C(r, i.t = o), i;
+    })(), null), z((n) => {
+      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,
       t: void 0
-    }), n;
+    }), r;
   })();
 }
-var Pt = /* @__PURE__ */ w('<div><div><div class="relative h-full w-full">'), Ht = /* @__PURE__ */ w('<div class="pointer-events-none absolute inset-0"><div>'), Bt = /* @__PURE__ */ w('<div class="pointer-events-none absolute inset-0 animate-pulse bg-blue-500/20">'), Lt = /* @__PURE__ */ w('<div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">'), jt = /* @__PURE__ */ w('<div class="flex items-center justify-center text-white/30">'), Ft = /* @__PURE__ */ w('<h3 class="font-semibold text-sm text-white/60">'), Ut = /* @__PURE__ */ w('<p class="text-white/50 text-xs">');
-function Yt(e, t) {
-  const n = e * t;
-  return n <= 2 ? "xs" : n <= 4 ? "sm" : n <= 8 ? "md" : n <= 18 ? "lg" : "xl";
+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 Xt(e, t) {
+function Bt(e, t) {
   return e > t ? "horizontal" : t > e ? "vertical" : "square";
 }
-function Kt(e, t) {
+function Ft(e, t) {
   return t >= 150 ? "vertical" : e > t ? "horizontal" : t > e ? "vertical" : "square";
 }
-function qt(e) {
+function Ut(e) {
+  Te(() => {
+    Fe();
+  });
   let t;
-  const n = We(() => t), r = 2, [i, a] = j(0), [o, s] = j(0);
-  q(() => {
-    const h = Math.round(n.width ?? 0), u = Math.round(n.height ?? 0), O = ve(i), k = ve(o);
-    (Math.abs(h - O) > r || Math.abs(u - k) > r) && (a(h), s(u));
+  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 = A(() => {
+  const l = M(() => {
     if (e.variant)
-      return typeof e.variant == "string" ? Ue(e.variant) : e.variant;
-  }), d = A(() => ({
-    width: i(),
+      return typeof e.variant == "string" ? qe(e.variant) : e.variant;
+  }), g = M(() => ({
+    width: n(),
     height: o(),
-    gridWidth: Math.max(1, Math.round(i() / 150)),
+    gridWidth: Math.max(1, Math.round(n() / 150)),
     gridHeight: Math.max(1, Math.round(o() / 75))
   }), void 0, {
-    equals: (h, u) => h.width === u.width && h.height === u.height && h.gridWidth === u.gridWidth && h.gridHeight === u.gridHeight
-  }), c = A(() => {
-    const h = d();
-    return Yt(h.gridWidth, h.gridHeight);
-  }), y = A(() => {
-    const h = d();
-    return Xt(h.width, h.height);
-  }), M = A(() => {
-    const h = d();
-    return Kt(h.width, h.height);
-  }), f = Se(me), v = f;
-  v?._isStub?.() && v._bridge && (q(() => {
-    v._bridge.setSize(c());
-  }), q(() => {
-    v._bridge.setOrientation(y());
-  }), q(() => {
-    v._bridge.setContentLayout(M());
-  }), q(() => {
-    v._bridge.setDimensions(d());
-  }), q(() => {
-    v._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: y,
-    contentLayout: M,
-    dimensions: d,
+  const N = {
+    size: m,
+    orientation: k,
+    contentLayout: R,
+    dimensions: g,
     isEditMode: () => e.isEditMode ?? !1,
-    updateConfig: f?.updateConfig ?? (() => {
+    updateConfig: x?.updateConfig ?? (() => {
     })
-  }, N = "bg-gradient-to-br from-gray-500/20 to-gray-600/20", I = A(() => e.emptyState && !e.gradient ? N : e.gradient), X = A(() => ({
+  }, D = M(() => ({
     "container-type": "size",
     "container-name": "widget",
     "touch-action": e.gestures && !e.isEditMode ? e.gestures.touchAction() : void 0,
     ...l()?.styles?.container,
-    ...l()?.styles?.cssVars || {}
-  })), m = () => !!e.gestures && !e.isEditMode, b = (h) => {
-    m() && e.gestures?.onPointerEnter(h);
-  }, $ = (h) => {
-    m() && e.gestures?.onPointerDown(h);
-  }, p = (h) => {
-    m() && e.gestures?.onPointerMove(h);
-  }, P = (h) => {
-    m() && e.gestures?.onPointerUp(h);
-  }, B = (h) => {
-    m() && e.gestures?.onPointerCancel(h);
+    ...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(me.Provider, {
-    value: V,
+  return O(ue.Provider, {
+    value: N,
     get children() {
-      var h = Pt(), u = h.firstChild, O = u.firstChild;
-      return ne(h, "pointercancel", B), ne(h, "pointerup", P), ne(h, "pointermove", p), ne(h, "pointerdown", $), ne(h, "pointerenter", b), Ne((k) => {
-        t = k, e.gestures?.bindElement(k);
-      }, h), x(u, (() => {
-        var k = E(() => !!e.backgroundGlow);
-        return () => k() && (() => {
-          var R = Ht(), Q = R.firstChild;
-          return D((L) => {
-            var K = U.BACKGROUND, ae = S("absolute inset-0 opacity-20 blur-2xl", e.backgroundGlow);
-            return K !== L.e && z(R, "z-index", L.e = K), ae !== L.t && C(Q, L.t = ae), L;
-          }, {
-            e: void 0,
-            t: void 0
-          }), R;
-        })();
-      })(), O), x(O, (() => {
-        var k = E(() => !!e.emptyState);
-        return () => k() ? T(Jt, {
+      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 e.emptyState.icon;
           },
@@ -1126,140 +1156,133 @@ function qt(e) {
             return e.emptyState.message;
           }
         }) : e.children;
-      })()), x(u, (() => {
-        var k = E(() => !!e.loading);
-        return () => k() && (() => {
-          var R = Bt();
-          return D((Q) => z(R, "z-index", U.OVERLAY)), R;
+      })()), h(d, (() => {
+        var p = E(() => !!e.loading);
+        return () => p() && (() => {
+          var c = Pt();
+          return z((A) => V(c, "z-index", K.OVERLAY)), c;
         })();
-      })(), null), D((k) => {
-        var R = S(
-          "relative h-full w-full select-none rounded-xl border border-border/50",
+      })(), null), z((p) => {
+        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)
           e.class
-        ), Q = X(), L = S(
-          "relative h-full w-full overflow-hidden rounded-xl",
-          // Gradient prop (overrides variant, auto-applied for empty state)
-          I()
-        ), K = U.CONTENT;
-        return R !== k.e && C(h, k.e = R), k.t = se(h, Q, k.t), L !== k.a && C(u, k.a = L), K !== k.o && z(O, "z-index", k.o = K), k;
+        ), 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
-      }), h;
+        a: void 0
+      }), d;
     }
   });
 }
-function Jt(e) {
+function Yt(e) {
   return (() => {
     var t = Lt();
-    return x(t, (() => {
-      var n = E(() => !!e.icon);
-      return () => n() && (() => {
-        var r = jt();
-        return x(r, () => e.icon), r;
+    return h(t, (() => {
+      var r = E(() => !!e.icon);
+      return () => r() && (() => {
+        var i = Rt();
+        return h(i, () => e.icon), i;
       })();
-    })(), null), x(t, (() => {
-      var n = E(() => !!e.title);
-      return () => n() && (() => {
-        var r = Ft();
-        return x(r, () => e.title), r;
+    })(), null), h(t, (() => {
+      var r = E(() => !!e.title);
+      return () => r() && (() => {
+        var i = Ht();
+        return h(i, () => e.title), i;
       })();
-    })(), null), x(t, (() => {
-      var n = E(() => !!e.message);
-      return () => n() && (() => {
-        var r = Ut();
-        return x(r, () => e.message), r;
+    })(), null), h(t, (() => {
+      var r = E(() => !!e.message);
+      return () => r() && (() => {
+        var i = Gt();
+        return h(i, () => e.message), i;
       })();
     })(), null), t;
   })();
 }
-const Y = qt;
-Y.Content = it;
-Y.Icon = vt;
-Y.Title = Et;
-Y.Subtitle = zt;
-Y.Status = Ct;
-Y.Value = Gt;
-Y.Metrics = ze;
-Y.EmptyState = ut;
-Y.SliderFill = et;
-var Zt = /* @__PURE__ */ w("<div><div>");
-const Qt = {
-  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 Kn(e) {
-  const t = () => Qt[e.color] ?? e.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 n = Zt(), r = n.firstChild;
-    return D((i) => {
-      var a = S("pointer-events-none absolute inset-0", e.class), o = U.BACKGROUND, s = S("absolute inset-0 opacity-40 blur-3xl", t());
-      return a !== i.e && C(n, i.e = a), o !== i.t && z(n, "z-index", i.t = o), s !== i.a && C(r, i.a = s), i;
+    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
-    }), n;
+      t: void 0
+    }), r;
   })();
 }
-var en = /* @__PURE__ */ w("<div>");
-function qn(e) {
-  const t = G(), n = () => {
-    const r = e.spacing ?? "S2";
-    return W[r](t.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 r = en();
-    return x(r, () => e.children), D((i) => {
-      var a = S("flex flex-col", e.class), o = n();
-      return a !== i.e && C(r, i.e = a), o !== i.t && z(r, "gap", i.t = o), i;
+    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
-    }), r;
+    }), i;
   })();
 }
-var tn = /* @__PURE__ */ w('<span class="inline-flex size-3.5 shrink-0 items-center">'), nn = /* @__PURE__ */ w("<button type=button>"), rn = /* @__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">'), an = /* @__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'), 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><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>'), 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 additional controls'), 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><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">'), 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 debug information available'), un = /* @__PURE__ */ w('<div class="min-w-0 shrink-0">'), dn = /* @__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">'), gn = /* @__PURE__ */ w('<div class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">'), mn = /* @__PURE__ */ w('<div class="flex shrink-0 items-center justify-end gap-2 border-border/50 border-t pt-3">');
-function fn(e) {
+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 t = nn();
-    return t.$$click = () => e.onClick(), x(t, T(te, {
+    var t = Jt();
+    return t.$$click = () => e.onClick(), h(t, O(J, {
       get when() {
         return e.isActive;
       },
       get children() {
-        var n = tn();
-        return x(n, () => e.icon), n;
+        var r = Xt();
+        return h(r, () => e.icon), r;
       }
-    }), null), x(t, () => e.label, null), D(() => C(t, S("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", e.isActive ? "gap-1.5 bg-foreground/10 font-semibold text-foreground shadow-sm" : "gap-0 text-muted-foreground hover:bg-foreground/5 hover:text-foreground"))), t;
+    }), null), 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 Jn(e) {
-  const [t] = Ae(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"]), n = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, i] = j({}), [a, o] = j(null);
-  q(be(() => t.config, (u) => {
-    u && i({
-      ...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(be(() => t.configSchema, (u) => {
-    u && o(pe(u));
+  })), U(be(() => t.configSchema, (c) => {
+    c && o(ke(c));
   }));
-  const s = () => n() && JSON.stringify(r()) !== JSON.stringify(t.config), l = (u) => {
-    !u && t.config && i({
+  const s = () => r() && JSON.stringify(i()) !== JSON.stringify(t.config), l = (c) => {
+    !c && t.config && n({
       ...t.config
-    }), t.onOpenChange(u);
-  }, d = () => {
-    t.onConfigSave?.(r());
-  }, [c, y] = j(t.defaultTab ?? "controls"), M = () => {
-    const u = t.maxWidth ?? "3xl";
+    }), 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,141 +1291,141 @@ function Jn(e) {
       "2xl": "max-w-2xl",
       "3xl": "max-w-3xl",
       "4xl": "max-w-4xl"
-    }[u];
-  }, f = () => {
+    }[c];
+  }, x = () => {
     if (t.tabs) return t.tabs;
-    const u = [];
-    return u.push({
+    const c = [];
+    return c.push({
       id: "edit",
       label: "Edit",
-      icon: rn(),
-      content: t.editContent ?? (n() && a() ? T(p, {
+      icon: Zt(),
+      content: t.editContent ?? (r() && a() ? O(y, {
         get schema() {
           return a();
         },
         get data() {
-          return r();
+          return i();
         },
-        onChange: i
-      }) : an())
-    }), u.push({
+        onChange: n
+      }) : Qt())
+    }), c.push({
       id: "controls",
       label: "Controls",
-      icon: on(),
-      content: t.controlsContent ?? sn()
-    }), u.push({
+      icon: en(),
+      content: t.controlsContent ?? tn()
+    }), c.push({
       id: "debug",
       label: "Debug",
-      icon: ln(),
-      content: t.debugContent ?? cn()
-    }), u;
-  }, v = async () => {
+      icon: nn(),
+      content: t.debugContent ?? rn()
+    }), c;
+  }, w = async () => {
     if (t.debugData !== void 0)
       try {
-        const u = typeof t.debugData == "string" ? t.debugData : JSON.stringify(t.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 = f();
-    return u.find((k) => k.id === c())?.content ?? u[0]?.content;
-  }, N = t.ResponsiveDialog, I = t.ResponsiveDialogContent, X = t.ResponsiveDialogHeader, m = t.ResponsiveDialogTitle, b = t.ResponsiveDialogDescription, $ = t.Button, p = t.SchemaForm, P = (u) => n() ? l(u) : t.onOpenChange(u), B = () => n() ? s() : t.hasUnsavedChanges, h = () => n() ? d : t.onSave;
-  return T(N, {
+  }, 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 t.open;
     },
-    onOpenChange: (u) => P(u),
+    onOpenChange: (c) => d(c),
     get children() {
-      return T(I, {
+      return O(T, {
         get class() {
-          return S(M(), t.class);
+          return $(R(), t.class);
         },
         get children() {
-          return [T(X, {
+          return [O(F, {
             class: "flex flex-row items-center justify-between gap-3",
             get children() {
               return [(() => {
-                var u = un();
-                return x(u, T(m, {
+                var c = an();
+                return h(c, O(q, {
                   class: "truncate leading-tight",
                   get children() {
                     return t.title;
                   }
-                }), null), x(u, T(b, {
+                }), null), h(c, O(f, {
                   class: "sr-only",
                   children: "Widget configuration dialog"
-                }), null), u;
+                }), null), c;
               })(), (() => {
-                var u = dn(), O = u.firstChild;
-                return x(O, () => f().map((k) => T(fn, {
+                var c = on(), A = c.firstChild;
+                return h(A, () => x().map((I) => O(cn, {
                   get icon() {
-                    return k.icon;
+                    return I.icon;
                   },
                   get label() {
-                    return k.label;
+                    return I.label;
                   },
                   get isActive() {
-                    return c() === k.id;
+                    return m() === I.id;
                   },
-                  onClick: () => y(k.id)
-                }))), x(u, T(te, {
+                  onClick: () => k(I.id)
+                }))), h(c, O(J, {
                   get when() {
                     return t.headerActions;
                   },
                   get children() {
                     return t.headerActions;
                   }
-                }), null), u;
+                }), null), c;
               })()];
             }
           }), (() => {
-            var u = gn();
-            return x(u, V), u;
-          })(), T(te, {
+            var c = sn();
+            return h(c, N), c;
+          })(), O(J, {
             get when() {
-              return E(() => c() === "edit")() && (h() || t.onDelete) || c() === "debug" && t.debugData !== void 0;
+              return E(() => m() === "edit")() && (p() || t.onDelete) || m() === "debug" && t.debugData !== void 0;
             },
             get children() {
-              var u = mn();
-              return x(u, T(te, {
+              var c = ln();
+              return h(c, O(J, {
                 get when() {
-                  return E(() => c() === "edit")() && t.onDelete;
+                  return E(() => m() === "edit")() && t.onDelete;
                 },
                 get children() {
-                  return T($, {
+                  return O(b, {
                     size: "sm",
                     variant: "destructive",
                     onClick: () => t.onDelete?.(),
                     children: "Delete"
                   });
                 }
-              }), null), x(u, T(te, {
+              }), null), h(c, O(J, {
                 get when() {
-                  return E(() => c() === "edit")() && h();
+                  return E(() => m() === "edit")() && p();
                 },
                 get children() {
-                  return T($, {
+                  return O(b, {
                     size: "sm",
                     get disabled() {
-                      return !B();
+                      return !_();
                     },
-                    onClick: () => h()?.(),
+                    onClick: () => p()?.(),
                     children: "Save"
                   });
                 }
-              }), null), x(u, T(te, {
+              }), null), h(c, O(J, {
                 get when() {
-                  return E(() => c() === "debug")() && t.debugData !== void 0;
+                  return E(() => m() === "debug")() && t.debugData !== void 0;
                 },
                 get children() {
-                  return T($, {
+                  return O(b, {
                     size: "sm",
                     variant: "outline",
-                    onClick: v,
+                    onClick: w,
                     children: "Copy"
                   });
                 }
-              }), null), u;
+              }), null), c;
             }
           })];
         }
@@ -1410,322 +1433,361 @@ function Jn(e) {
     }
   });
 }
-Oe(["click"]);
-const ie = 32, g = ie / 2, H = "white", le = "rgba(0,0,0,0.4)", xe = 2, ce = 3;
-function hn(e) {
-  return `url("data:image/svg+xml,${encodeURIComponent(e)}")`;
-}
-function ue(e) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${ie}" height="${ie}" viewBox="0 0 ${ie} ${ie}">${e}</svg>`;
-}
-const xn = ue(`
-  <g transform="translate(6, 2)">
-    <!-- shadow -->
-    <g stroke="${le}" stroke-width="${ce}" 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="${H}" stroke-width="${xe}" 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>
-`), vn = ue(`
-  <g>
-    <circle cx="${g}" cy="${g}" r="8" stroke="${le}" stroke-width="${ce}" fill="none"/>
-    <circle cx="${g}" cy="${g}" r="8" stroke="${H}" stroke-width="1.5" fill="none"/>
-    <circle cx="${g}" cy="${g}" r="1.5" fill="${H}"/>
-  </g>
-`), bn = ue(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${le}" stroke-width="${ce}" 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>
-    <!-- main -->
-    <g stroke="${H}" stroke-width="${xe}" 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>
-    <!-- center grip dots -->
-    <circle cx="${g}" cy="${g}" r="1.5" fill="${H}"/>
-    <circle cx="${g - 5}" cy="${g}" r="1" fill="${H}" opacity="0.6"/>
-    <circle cx="${g + 5}" cy="${g}" r="1" fill="${H}" opacity="0.6"/>
-  </g>
-`), yn = ue(`
-  <g>
-    <!-- shadow -->
-    <g stroke="${le}" stroke-width="${ce}" 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>
-    <!-- main -->
-    <g stroke="${H}" stroke-width="${xe}" 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>
-    <!-- center grip dots -->
-    <circle cx="${g}" cy="${g}" r="1.5" fill="${H}"/>
-    <circle cx="${g}" cy="${g - 5}" r="1" fill="${H}" opacity="0.6"/>
-    <circle cx="${g}" cy="${g + 5}" r="1" fill="${H}" opacity="0.6"/>
-  </g>
-`);
-function oe(e, t, n) {
-  return { css: `${hn(e)} ${t} ${n}, auto`, hotspotX: t, hotspotY: n };
-}
-const Z = {
-  tap: oe(xn, 12, 4),
-  hold: oe(vn, 16, 16),
-  slideHorizontal: oe(bn, g, g),
-  slideVertical: oe(yn, g, g)
-};
-function Zn(e, t) {
-  const n = {
-    isDown: !1,
-    startX: 0,
-    startY: 0,
-    currentX: 0,
-    currentY: 0,
-    startTime: 0,
-    hasMoved: !1,
-    holdTimer: null,
-    slideActive: !1,
-    slideActivationTimer: null,
-    lockedAxis: null,
-    element: null
-  };
-  let r = null, i = null, a = null;
-  function o(m) {
-    m !== i && (a && a.disconnect(), a = new ResizeObserver((b) => {
-      const $ = b[0];
-      if ($) {
-        const p = $.borderBoxSize?.[0];
-        p ? r = { width: p.inlineSize, height: p.blockSize } : r = { width: $.contentRect.width, height: $.contentRect.height };
-      }
-    }), i = m, a.observe(m), r = { width: m.clientWidth, height: m.clientHeight });
-  }
-  const s = 10, l = 5, d = () => {
-    n.holdTimer && (clearTimeout(n.holdTimer), n.holdTimer = null), n.slideActivationTimer && (clearTimeout(n.slideActivationTimer), n.slideActivationTimer = null);
-  }, c = (m) => {
-    const $ = e().slide;
-    return $?.orientation === "horizontal" ? "horizontal" : $?.orientation === "vertical" ? "vertical" : m && (r || o(m), r) ? r.height > r.width ? "vertical" : "horizontal" : (t?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
-  }, y = (m) => {
-    const b = e();
-    if (!(!b.tap && !b.hold && !b.slide)) {
-      if (m.preventDefault(), n.isDown = !0, n.element = m.currentTarget, o(n.element), n.startX = m.clientX, n.startY = m.clientY, n.currentX = m.clientX, n.currentY = m.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, m.currentTarget.setPointerCapture(m.pointerId), b.hold) {
-        const $ = b.hold.delay ?? 300;
-        n.holdTimer = setTimeout(() => {
-          n.isDown && !n.hasMoved && (b.hold.action(), n.isDown = !1);
-        }, $);
-      }
-      if (b.slide) {
-        const $ = b.slide.activationDelay ?? 0;
-        $ > 0 ? n.slideActivationTimer = setTimeout(() => {
-          n.slideActive = !0;
-        }, $) : n.slideActive = !0;
-      }
-    }
-  }, M = (m) => {
-    if (!n.isDown) return;
-    const b = e();
-    n.currentX = m.clientX, n.currentY = m.clientY;
-    const $ = n.currentX - n.startX, p = n.currentY - n.startY, P = Math.abs($), B = Math.abs(p), h = Math.sqrt($ * $ + p * p), u = m.currentTarget, O = c(u);
-    if (!n.lockedAxis && h > l && (P > B ? n.lockedAxis = "horizontal" : n.lockedAxis = "vertical", b.slide && n.lockedAxis !== O)) {
-      u.releasePointerCapture(m.pointerId), n.isDown = !1, n.slideActive = !1, d();
-      return;
-    }
-    if (h > s && (n.hasMoved = !0, d()), b.slide && n.slideActive && n.hasMoved && n.lockedAxis === O) {
-      const k = b.slide.min ?? 0, R = b.slide.max ?? 100, Q = R - k, L = O === "vertical" ? -p : $, K = r ?? { width: u.clientWidth, height: u.clientHeight }, ae = O === "vertical" ? K.height : K.width, De = L / ae * Q, _e = Math.max(k, Math.min(R, b.slide.value + De));
-      b.slide.onChange(Math.round(_e)), n.startX = n.currentX, n.startY = n.currentY, m.preventDefault();
-    }
-  }, f = (m) => {
-    if (!n.isDown) return;
-    const b = e(), $ = b.hold?.delay ?? 300;
-    if (d(), b.tap && !n.hasMoved) {
-      const p = Date.now() - n.startTime;
-      n.isDown && p < $ && b.tap();
-    }
-    n.isDown = !1, n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, m.currentTarget.releasePointerCapture(m.pointerId);
-  }, v = (m) => {
-    d(), n.isDown = !1, n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, m.currentTarget.releasePointerCapture(m.pointerId);
-  }, V = (m) => {
-    const b = e();
-    if (b.slide) {
-      const $ = b.slide.orientation;
-      return $ === "horizontal" ? Z.slideHorizontal.css : $ === "vertical" ? Z.slideVertical.css : (r || o(m), r && r.height > r.width ? Z.slideVertical.css : Z.slideHorizontal.css);
-    }
-    return b.tap ? Z.tap.css : b.hold ? Z.hold.css : "";
-  };
-  return {
-    onPointerDown: y,
-    onPointerMove: M,
-    onPointerUp: f,
-    onPointerCancel: v,
-    onPointerEnter: (m) => {
-      const b = m.currentTarget;
-      n.element = b, b.style.cursor = V(b);
-    },
-    bindElement: (m) => {
-      m && (n.element = m, o(m));
-    },
-    touchAction: () => {
-      const m = e();
-      if (m.slide) {
-        const b = m.slide.orientation;
-        return b === "horizontal" ? "pan-y" : b === "vertical" || r && r.height > r.width ? "pan-x" : "pan-y";
-      }
-      return m.tap || m.hold ? "manipulation" : "auto";
-    },
-    dispose: () => {
-      d(), a && (a.disconnect(), a = null), i = null, r = null;
-    }
-  };
-}
-function Qn(e) {
-  return A(() => {
+Ne(["click"]);
+function Kn(e) {
+  return M(() => {
     const t = e.entities();
     if (t.length === 0) return;
-    const n = {
+    const r = {
       widgetConfig: e.widgetConfig,
-      entities: t.map((r) => {
-        const i = {
-          entity_id: r.id,
-          state: r.state,
-          domain: r.domain,
-          friendly_name: r.friendlyName
+      entities: t.map((i) => {
+        const n = {
+          entity_id: i.id,
+          state: i.state,
+          domain: i.domain,
+          friendly_name: i.friendlyName
         };
         return e.customEntityFields ? {
-          ...i,
-          ...e.customEntityFields(r)
-        } : i;
+          ...n,
+          ...e.customEntityFields(i)
+        } : n;
       })
     };
-    return e.additionalData && Object.assign(n, e.additionalData), n;
+    return e.additionalData && Object.assign(r, e.additionalData), r;
   });
 }
-function er(e = {}) {
-  const [t, n] = j(!1), [r, i] = j(!1);
+function qn(e = {}) {
+  const [t, r] = H(!1), [i, n] = H(!1);
   return {
     save: async (s) => {
       if (e.onSave) {
-        n(!0);
+        r(!0);
         try {
           await e.onSave(s), e.onSaveSuccess?.();
         } finally {
-          n(!1);
+          r(!1);
         }
       }
     },
     remove: async () => {
       if (e.onDelete) {
-        i(!0);
+        n(!0);
         try {
           await e.onDelete(), e.onDeleteSuccess?.();
         } finally {
-          i(!1);
+          n(!1);
         }
       }
     },
     isSaving: t,
-    isDeleting: r
+    isDeleting: i
   };
 }
-function tr(e = "edit") {
-  const [t, n] = j(!1), [r, i] = j(e);
+function Xn(e = "edit") {
+  const [t, r] = H(!1), [i, n] = H(e);
   return {
     showDialog: t,
-    setShowDialog: n,
-    openDialog: () => n(!0),
-    closeDialog: () => n(!1),
-    activeTab: r,
-    setActiveTab: i
+    setShowDialog: r,
+    openDialog: () => r(!0),
+    closeDialog: () => r(!1),
+    activeTab: i,
+    setActiveTab: n
   };
 }
-function nr(e) {
-  const t = A(() => e.entity() !== null), n = A(() => {
-    const i = e.entity();
-    return i ? e.calculateData(i) : null;
-  }), r = A(() => t() ? void 0 : e.emptyStateConfig);
+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: n,
-    emptyState: r,
+    data: r,
+    emptyState: i,
     hasEntity: t
   };
 }
-function rr(e) {
-  const t = e.minEntities ?? 1, n = A(() => e.entities().length), r = A(() => n() >= t), i = A(() => !r() || !e.calculateGroupData ? null : e.calculateGroupData(e.entities())), a = A(() => {
-    if (!r()) return;
+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 At(l, e.allEntitiesMode);
+      return Mt(l, e.allEntitiesMode);
     if (s === "sensor") {
-      const d = e.sensorGroupType?.() ?? "mean";
-      return Nt(l, d, !0);
+      const g = e.sensorGroupType?.() ?? "mean";
+      return _t(l, g, !0);
     }
-  }), o = A(() => r() ? void 0 : e.emptyStateConfig);
+  }), o = M(() => i() ? void 0 : e.emptyStateConfig);
   return {
     entities: e.entities,
-    groupData: i,
+    groupData: n,
     aggregatedData: a,
     emptyState: o,
-    hasEntities: r,
-    count: n
+    hasEntities: i,
+    count: r
   };
 }
-function ir(e) {
-  const [t] = Ie({
-    validate: Re(e.schema),
+function Qn(e) {
+  const [t] = Pe({
+    validate: Le(e.schema),
     initialValues: e.initialValues
-  }), n = A(() => t.dirty), r = A(() => t.submitting);
+  }), r = M(() => t.dirty), i = M(() => t.submitting);
   return {
     form: t,
-    isDirty: n,
-    isSubmitting: r,
+    isDirty: r,
+    isSubmitting: i,
     handleSubmit: (a) => {
       e.onSubmit?.(a);
     },
-    getValue: He,
-    setValue: Pe,
-    reset: Ge
+    getValue: Ge,
+    setValue: He,
+    reset: Re
   };
 }
-const de = ["xs", "sm", "md", "lg", "xl"];
-function ar() {
-  const e = G(), t = A(() => de.indexOf(e.size())), n = A(() => {
+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";
-  }), r = A(() => {
+  }), i = M(() => {
     const l = e.size();
     return l === "lg" || l === "xl";
-  }), i = A(() => t() >= 2);
+  }), n = M(() => t() >= 2);
   return {
-    isCompact: n,
-    isLarge: r,
-    showDetail: i,
+    isCompact: r,
+    isLarge: i,
+    showDetail: n,
     showOn: (l) => l.includes(e.size()),
     hideOn: (l) => !l.includes(e.size()),
     matches: (l) => {
-      const d = l.trim();
-      if (d.endsWith("+")) {
-        const c = d.slice(0, -1), y = de.indexOf(c);
-        return y >= 0 && t() >= y;
+      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 ae(e) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${te}" height="${te}" viewBox="0 0 ${te} ${te}">${e}</svg>`;
+}
+const un = ae(`
+  <g transform="translate(6, 2)">
+    <!-- shadow -->
+    <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="${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>
+`), gn = ae(`
+  <g>
+    <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>
+`), mn = ae(`
+  <g>
+    <!-- shadow -->
+    <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="${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="${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>
+`), fn = ae(`
+  <g>
+    <!-- shadow -->
+    <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="${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="${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 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 le() {
+  if (typeof window > "u") return null;
+  const e = window;
+  return e.Capacitor?.isNativePlatform?.() ? e.Capacitor.Plugins?.Haptics ?? null : null;
+}
+function ce(e) {
+  if (!(typeof navigator > "u" || typeof navigator.vibrate != "function"))
+    try {
+      navigator.vibrate(e);
+    } catch {
+    }
+}
+const hn = {
+  /** Light confirmation — fires when slide gesture arms after user holds still. */
+  tick() {
+    const e = le();
+    if (e) {
+      e.impact({ style: "Light" }).catch(() => {
+      });
+      return;
+    }
+    ce(8);
+  },
+  /** Medium bump — fires when hold gesture commits (detail opening). */
+  bump() {
+    const e = le();
+    if (e) {
+      e.impact({ style: "Medium" }).catch(() => {
+      });
+      return;
+    }
+    ce(20);
+  },
+  /** Stronger pulse — reserved for edit-mode pickup (future use). */
+  pulse() {
+    const e = le();
+    if (e) {
+      e.impact({ style: "Heavy" }).catch(() => {
+      });
+      return;
+    }
+    ce([0, 15, 40, 15]);
+  }
+};
+function tr(e, t) {
+  const n = {
+    isDown: !1,
+    isTouch: !1,
+    startX: 0,
+    startY: 0,
+    startTime: 0,
+    hasMoved: !1,
+    sliding: !1,
+    holdTimer: null,
+    element: null
+  };
+  let a = null, o = null, s = null;
+  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 };
       }
-      if (d.endsWith("-")) {
-        const c = d.slice(0, -1), y = de.indexOf(c);
-        return y >= 0 && t() <= y;
+    }), o = f, s.observe(f), a = { width: f.clientWidth, height: f.clientHeight });
+  }
+  const g = () => {
+    n.holdTimer && (clearTimeout(n.holdTimer), n.holdTimer = null);
+  }, m = () => {
+    n.isDown = !1, n.hasMoved = !1, n.sliding = !1;
+  }, 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) && (hn.bump(), b.hold?.action(), n.isDown = !1);
+        }, y);
       }
-      return e.size() === d;
+      if (!n.isTouch && b.slide)
+        try {
+          f.currentTarget.setPointerCapture(f.pointerId);
+        } catch {
+        }
+    }
+  }, x = (f) => {
+    if (!n.isDown) return;
+    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 = 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();
+    }
+  }, 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 {
+      f.currentTarget.releasePointerCapture(f.pointerId);
+    } catch {
+    }
+    m();
+  }, N = (f) => {
+    g();
+    try {
+      f.currentTarget.releasePointerCapture(f.pointerId);
+    } catch {
+    }
+    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 b.tap ? Y.tap.css : b.hold ? Y.hold.css : "";
+  };
+  return {
+    onPointerDown: R,
+    onPointerMove: x,
+    onPointerUp: w,
+    onPointerCancel: N,
+    onPointerEnter: (f) => {
+      const b = f.currentTarget;
+      n.element = b, b.style.cursor = D(b);
+    },
+    bindElement: (f) => {
+      f && (n.element = f, l(f));
+    },
+    touchAction: () => {
+      const f = e();
+      return f.tap || f.hold || f.slide ? "manipulation" : "auto";
+    },
+    dispose: () => {
+      g(), s && (s.disconnect(), s = null), o = null, a = null;
     }
   };
 }
-const _ = {
+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",
@@ -1743,7 +1805,7 @@ const _ = {
   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"
-}, or = {
+}, nr = {
   ocean: "Ocean Breeze",
   sunset: "Sunset Glow",
   forest: "Forest Dawn",
@@ -1761,30 +1823,30 @@ const _ = {
   sage: "Sage",
   copper: "Copper",
   dusk: "Dusk"
-}, sr = Object.keys(_);
-function ke(e) {
-  const t = Object.keys(_);
-  let n = 0;
-  for (const i of e)
-    n = (n << 5) - n + i.charCodeAt(0), n = n & n;
-  const r = Math.abs(n) % t.length;
-  return t[r];
-}
-function lr(e, t) {
+}, rr = Object.keys(C);
+function ye(e) {
+  const t = Object.keys(C);
+  let r = 0;
+  for (const n of e)
+    r = (r << 5) - r + n.charCodeAt(0), r = r & r;
+  const i = Math.abs(r) % t.length;
+  return t[i];
+}
+function ir(e, t) {
   if (!e) {
-    const r = ke(t);
-    return _[r];
+    const i = ye(t);
+    return C[i];
   }
-  if (typeof e == "string" && e in _)
-    return _[e];
+  if (typeof e == "string" && e in C)
+    return C[e];
   if (typeof e == "string")
     return e;
-  const n = ke(t);
-  return _[n];
+  const r = ye(t);
+  return C[r];
 }
-const ee = {
+const X = {
   ocean: {
-    gradient: _.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",
@@ -1794,7 +1856,7 @@ const ee = {
     }
   },
   sunset: {
-    gradient: _.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",
@@ -1804,7 +1866,7 @@ const ee = {
     }
   },
   forest: {
-    gradient: _.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",
@@ -1814,7 +1876,7 @@ const ee = {
     }
   },
   lavender: {
-    gradient: _.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",
@@ -1824,7 +1886,7 @@ const ee = {
     }
   },
   golden: {
-    gradient: _.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",
@@ -1834,7 +1896,7 @@ const ee = {
     }
   },
   midnight: {
-    gradient: _.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",
@@ -1844,7 +1906,7 @@ const ee = {
     }
   },
   rose: {
-    gradient: _.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",
@@ -1854,7 +1916,7 @@ const ee = {
     }
   },
   mint: {
-    gradient: _.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",
@@ -1864,7 +1926,7 @@ const ee = {
     }
   },
   slate: {
-    gradient: _.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",
@@ -1874,7 +1936,7 @@ const ee = {
     }
   },
   coral: {
-    gradient: _.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",
@@ -1884,7 +1946,7 @@ const ee = {
     }
   },
   aurora: {
-    gradient: _.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",
@@ -1894,7 +1956,7 @@ const ee = {
     }
   },
   ember: {
-    gradient: _.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",
@@ -1904,7 +1966,7 @@ const ee = {
     }
   },
   steel: {
-    gradient: _.steel,
+    gradient: C.steel,
     bg: "bg-gray-500/20",
     icon: "bg-gray-500 dark:bg-gray-400",
     glow: void 0,
@@ -1914,7 +1976,7 @@ const ee = {
     }
   },
   twilight: {
-    gradient: _.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",
@@ -1924,7 +1986,7 @@ const ee = {
     }
   },
   sage: {
-    gradient: _.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",
@@ -1934,7 +1996,7 @@ const ee = {
     }
   },
   copper: {
-    gradient: _.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",
@@ -1944,7 +2006,7 @@ const ee = {
     }
   },
   dusk: {
-    gradient: _.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",
@@ -1953,116 +2015,124 @@ const ee = {
       muted: "text-blue-400/60 dark:text-blue-300/60"
     }
   }
-}, cr = {
-  unavailable: ee.steel,
-  active: ee.ocean,
-  inactive: ee.steel,
-  success: ee.forest,
-  warning: ee.ember,
-  error: ee.rose
-}, ur = {
+}, 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: () => J.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: (e) => J.array(J.string()).default([]).meta({ domain: e, title: "Entities" }),
+  entityIds: (e) => j.array(j.string()).default([]).meta({ domain: e, title: "Entities" }),
   /** Single-select entity picker for a HA domain */
-  singleEntity: (e) => J.array(J.string()).default([]).meta({ domain: e, title: "Entity", singleSelect: !0 }),
+  singleEntity: (e) => j.array(j.string()).default([]).meta({ domain: e, title: "Entity", singleSelect: !0 }),
   /** Area picker dropdown */
-  areaId: () => J.string().optional().meta({ formType: "area-picker", title: "Area" })
+  areaId: () => j.string().optional().meta({ formType: "area-picker", title: "Area" })
 };
-let ge = null;
-function wn() {
-  return ge || (ge = getComputedStyle(document.documentElement)), ge;
+let de = null;
+function xn() {
+  return de || (de = getComputedStyle(document.documentElement)), de;
 }
-function dr(e) {
+function lr(e) {
   const t = e.startsWith("--") ? e : `--${e}`;
-  return wn().getPropertyValue(t).trim();
+  return xn().getPropertyValue(t).trim();
 }
-function gr() {
+function cr() {
   return document.documentElement.classList.contains("dark");
 }
-const $n = "0.3.6", kn = {
-  version: $n
-}, mr = kn.version;
+const bn = "0.4.0", vn = {
+  version: bn
+}, dr = vn.version;
 export {
-  or as GRADIENT_NAMES,
-  _ as GRADIENT_PRESETS,
-  sr as GRADIENT_PRESET_KEYS,
-  Kn as Glow,
-  xr as GridSizeSchema,
-  vr as PublishBodySchema,
-  br as PublishConfirmSchema,
-  yr as PublishRequestSchema,
-  mr as SDK_VERSION,
-  U as WIDGET_Z,
-  Y as Widget,
-  it as WidgetContent,
-  me as WidgetCtx,
-  Jn as WidgetDialog,
-  ut as WidgetEmptyState,
-  vt as WidgetIcon,
-  wr as WidgetManifestSchema,
-  ze as WidgetMetrics,
-  et as WidgetSliderFill,
-  qn as WidgetStack,
-  Ct as WidgetStatus,
-  zt as WidgetSubtitle,
-  Et as WidgetTitle,
-  Gt as WidgetValue,
-  Yn as allEntitiesInState,
-  Xn as anyEntityInState,
-  Gn as applyCssVars,
-  Rn as applyLayout,
-  fe as builtInVariants,
-  At as calculateLightGroup,
-  Nt as calculateSensorGroup,
-  Le as classicGlass,
-  S as cn,
-  Fe as compactHorizontal,
-  In as composeVariants,
-  Un as countActiveEntities,
-  Fn as countAvailableEntities,
-  jn as countEntitiesByState,
-  Hn as createEmptyStateConfig,
-  An as createEntity,
-  Pn as createFlexLayout,
-  Nn as defineWidget,
-  ht as deriveAdaptiveIconColors,
-  Wn as extendVariant,
-  Be as extractDefaults,
-  $r as formatSchemaError,
-  Vt as formatValue,
-  Ue as getBuiltInVariant,
-  Vn as getBuiltInVariantIds,
+  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,
-  Bn as getEntityState,
-  lr as getGradient,
-  ke as getGradientFromString,
-  nt as getSpacingClass,
-  dr as getThemeToken,
-  ee as gradientColorPresets,
-  Wt as interpretValue,
-  Tn as isBuiltInVariant,
-  gr as isDark,
+  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,
-  Ot as isEntityAvailable,
-  he as mergeVariants,
-  je as minimal,
-  kr as parseGridSize,
-  Sr as serializeGridSize,
+  Et as isEntityAvailable,
+  me as mergeVariants,
+  Ye as minimal,
+  wr as parseGridSize,
+  yr as serializeGridSize,
   W as spacing,
-  cr as stateColors,
-  pe as toFormSchema,
-  F as typography,
-  Qn as useDebugData,
-  er as useWidgetConfig,
-  G as useWidgetContext,
-  tr as useWidgetDialog,
-  nr as useWidgetEntity,
-  rr as useWidgetEntityGroup,
-  ir as useWidgetForm,
-  Zn as useWidgetGestures,
-  ar as useWidgetResponsive,
-  On as warnIfStub,
-  ur as widgetFields
+  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,
+  er as useWidgetResponsive,
+  _n as warnIfStub,
+  sr as widgetFields
 };