@glasshome/widget-sdk 0.1.0 → 0.2.3

package/dist/index.js

@@ -1,17 +1,18 @@
-import { createSignal as U, createContext as yt, useContext as mt, createEffect as wt, untrack as lt, createMemo as z, splitProps as $t, Show as X } from "solid-js";
-import { memo as D, effect as C, setStyleProperty as p, className as k, template as h, insert as f, style as Q, createComponent as O, use as kt, delegateEvents as pt } from "solid-js/web";
+import { createSignal as j, createContext as wt, useContext as ht, createEffect as F, untrack as ut, createMemo as z, splitProps as $t, Show as K } from "solid-js";
+import { GridSizeSchema as tr, PublishBodySchema as er, PublishConfirmSchema as nr, PublishRequestSchema as rr, WidgetManifestSchema as ir, formatSchemaError as ar, parseGridSize as sr, serializeGridSize as or } from "./schemas.js";
+import { memo as D, effect as C, setStyleProperty as p, className as w, template as x, insert as f, style as tt, createComponent as W, use as kt, delegateEvents as pt } from "solid-js/web";
 import { clsx as St } from "clsx";
 import { twMerge as Ct } from "tailwind-merge";
 import { createElementSize as Mt } from "@solid-primitives/resize-observer";
 import { createForm as zt, zodForm as Dt, reset as _t, setValue as At, getValue as Nt } from "@modular-forms/solid";
 function xn(t) {
-  const [e] = U(t);
+  const [e] = j(t);
   return e;
 }
 function vn(t) {
   return t;
 }
-const j = {
+const L = {
   /** Background layer (gradients, images, glows) */
   BACKGROUND: 0,
   /** Main content layer (icon, title, text) */
@@ -20,14 +21,17 @@ const j = {
   OVERLAY: 20,
   /** Action layer (buttons, edit controls) */
   ACTIONS: 30
-}, it = yt();
-function R() {
-  const t = mt(it);
+};
+function bn(t) {
+}
+const st = wt();
+function G() {
+  const t = ht(st);
   if (!t)
     throw new Error("useWidgetContext must be used within a Widget component");
   return t;
 }
-function w(...t) {
+function y(...t) {
   return Ct(St(t));
 }
 const Tt = {
@@ -115,21 +119,21 @@ const Tt = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, at = {
+}, ot = {
   "classic-glass": Tt,
   minimal: Et,
   "compact-horizontal": Ot
 };
 function Vt(t) {
-  return at[t];
+  return ot[t];
 }
-function bn(t) {
-  return t in at;
+function yn(t) {
+  return t in ot;
 }
-function yn() {
-  return Object.keys(at);
+function wn() {
+  return Object.keys(ot);
 }
-function ft(t, e) {
+function xt(t, e) {
   if (typeof t != "object" || t === null)
     return e;
   const n = { ...t };
@@ -141,7 +145,7 @@ function ft(t, e) {
         continue;
       }
       if (typeof r == "object" && r !== null && !Array.isArray(r)) {
-        typeof a == "object" && a !== null ? n[i] = ft(a, r) : n[i] = r;
+        typeof a == "object" && a !== null ? n[i] = xt(a, r) : n[i] = r;
         continue;
       }
       n[i] = r;
@@ -164,7 +168,7 @@ function Rt(t, e) {
   if (!(!t && !e))
     return t ? e ? {
       visible: { ...t.visible, ...e.visible },
-      styles: ft(t.styles ?? {}, e.styles ?? {}),
+      styles: xt(t.styles ?? {}, e.styles ?? {}),
       classNames: { ...t.classNames, ...e.classNames }
     } : t : e;
 }
@@ -176,7 +180,7 @@ function Gt(t, e) {
       decorations: e.decorations ?? t.decorations
     } : t : e;
 }
-function Ht(t, e) {
+function Bt(t, e) {
   if (!(!t && !e))
     return t ? e ? {
       hover: e.hover ?? t.hover,
@@ -186,7 +190,7 @@ function Ht(t, e) {
       activeScale: e.activeScale ?? t.activeScale
     } : t : e;
 }
-function st(t, e) {
+function lt(t, e) {
   return {
     id: e.id ?? t.id,
     name: e.name ?? t.name,
@@ -195,30 +199,30 @@ function st(t, e) {
     layout: It(t.layout, e.layout),
     elements: Rt(t.elements, e.elements),
     plugins: Gt(t.plugins, e.plugins),
-    interactions: Ht(t.interactions, e.interactions),
+    interactions: Bt(t.interactions, e.interactions),
     extends: e.extends ?? t.extends
   };
 }
-function wn(t, e) {
+function $n(t, e) {
   return {
     ...e,
     extends: t
   };
 }
-function $n(...t) {
+function kn(...t) {
   if (t.length === 0)
     throw new Error("composeVariants requires at least one variant");
-  return t.length === 1 ? t[0] : t.reduce((e, n) => st(e, n));
-}
-function kn(t, e) {
-  return st(t, { layout: e });
+  return t.length === 1 ? t[0] : t.reduce((e, n) => lt(e, n));
 }
 function pn(t, e) {
-  return st(t, {
+  return lt(t, { layout: e });
+}
+function Sn(t, e) {
+  return lt(t, {
     styles: { cssVars: e }
   });
 }
-function Sn(t = "column", e = "start", n = "start", i) {
+function Cn(t = "column", e = "start", n = "start", i) {
   return {
     type: "flex",
     direction: t,
@@ -227,23 +231,23 @@ function Sn(t = "column", e = "start", n = "start", i) {
     ...i
   };
 }
-var Bt = /* @__PURE__ */ h("<div>"), Lt = /* @__PURE__ */ h('<div class="pointer-events-none absolute inset-0 opacity-40 blur-2xl">');
-function jt(t) {
-  const e = R(), n = () => e.orientation() === "vertical" ? `inset(${100 - t.value}% 0 0 0)` : `inset(0 ${100 - t.value}% 0 0)`, i = () => t.color ?? "rgb(59, 130, 246)";
+var Ht = /* @__PURE__ */ x("<div>"), Lt = /* @__PURE__ */ x('<div class="pointer-events-none absolute inset-0 opacity-40 blur-2xl">');
+function Pt(t) {
+  const e = G(), n = () => e.orientation() === "vertical" ? `inset(${100 - t.value}% 0 0 0)` : `inset(0 ${100 - t.value}% 0 0)`, i = () => t.color ?? "rgb(59, 130, 246)";
   return [D(() => D(() => !!((t.glow ?? !1) && t.value > 0))() && (() => {
     var r = Lt();
     return C((a) => {
-      var s = i(), o = j.BACKGROUND;
-      return s !== a.e && p(r, "background", a.e = s), o !== a.t && p(r, "z-index", a.t = o), a;
+      var s = i(), l = L.BACKGROUND;
+      return s !== a.e && p(r, "background", a.e = s), l !== a.t && p(r, "z-index", a.t = l), a;
     }, {
       e: void 0,
       t: void 0
     }), r;
   })()), (() => {
-    var r = Bt();
+    var r = Ht();
     return C((a) => {
-      var s = w("pointer-events-none absolute inset-0", t.isDragging ? "duration-0" : "transition-all duration-300 ease-out", t.class), o = i(), c = n(), g = t.opacity ?? 0.3, d = j.BACKGROUND;
-      return s !== a.e && k(r, a.e = s), o !== a.t && p(r, "background", a.t = o), c !== a.a && p(r, "clip-path", a.a = c), g !== a.o && p(r, "opacity", a.o = g), d !== a.i && p(r, "z-index", a.i = d), a;
+      var s = y("pointer-events-none absolute inset-0", t.isDragging ? "duration-0" : "transition-all duration-300 ease-out", t.class), l = i(), c = n(), g = t.opacity ?? 0.3, d = L.BACKGROUND;
+      return s !== a.e && w(r, a.e = s), l !== a.t && p(r, "background", a.t = l), c !== a.a && p(r, "clip-path", a.a = c), g !== a.o && p(r, "opacity", a.o = g), d !== a.i && p(r, "z-index", a.i = d), a;
     }, {
       e: void 0,
       t: void 0,
@@ -253,20 +257,20 @@ function jt(t) {
     }), r;
   })()];
 }
-const K = {
+const q = {
   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 }
 }, N = {
   /** Extra small spacing (4-8px) */
-  S1: (t) => `${K.S1[t]}px`,
+  S1: (t) => `${q.S1[t]}px`,
   /** Small spacing (6-14px) - default for most layouts */
-  S2: (t) => `${K.S2[t]}px`,
+  S2: (t) => `${q.S2[t]}px`,
   /** Medium spacing (8-16px) */
-  S3: (t) => `${K.S3[t]}px`,
+  S3: (t) => `${q.S3[t]}px`,
   /** Large spacing (12-20px) */
-  S4: (t) => `${K.S4[t]}px`,
+  S4: (t) => `${q.S4[t]}px`,
   /** Icon container size in pixels */
   icon: (t) => ({
     xs: 32,
@@ -317,7 +321,7 @@ const K = {
     // More padding for larger widgets
     xl: "20px"
   })[t]
-}, Pt = {
+}, jt = {
   4: "gap-1",
   6: "gap-1.5",
   8: "gap-2",
@@ -329,24 +333,24 @@ const K = {
   20: "gap-5"
 };
 function Ut(t, e) {
-  const n = K[t][e];
-  return Pt[n] || `gap-[${n}px]`;
+  const n = q[t][e];
+  return jt[n] || `gap-[${n}px]`;
 }
-var Ft = /* @__PURE__ */ h("<div>");
+var Ft = /* @__PURE__ */ x("<div>");
 function Yt(t) {
-  const e = R();
+  const e = G();
   return (() => {
     var n = Ft();
     return f(n, () => t.children), C((i) => {
-      var r = w(
+      var r = y(
         "relative flex h-full w-full overflow-hidden",
         // Ensure controls (ml-auto divs) are above other content
         "[&_div.ml-auto]:relative [&_div.ml-auto]:z-30",
         e.contentLayout() === "horizontal" ? "flex-row items-center" : "flex-col justify-between",
         Ut("S3", e.size()),
         t.class
-      ), a = N.container(e.size()), s = j.CONTENT;
-      return r !== i.e && k(n, i.e = r), a !== i.t && p(n, "padding", i.t = a), s !== i.a && p(n, "z-index", i.a = s), i;
+      ), a = N.container(e.size()), s = L.CONTENT;
+      return r !== i.e && w(n, i.e = r), a !== i.t && p(n, "padding", i.t = a), s !== i.a && p(n, "z-index", i.a = s), i;
     }, {
       e: void 0,
       t: void 0,
@@ -354,7 +358,7 @@ function Yt(t) {
     }), n;
   })();
 }
-const B = {
+const H = {
   /** Container base text sizing */
   container: (t) => ({
     xs: "text-xs",
@@ -468,18 +472,18 @@ const B = {
     // 16px
   })[t]
 };
-var Xt = /* @__PURE__ */ h("<div><div>"), Kt = /* @__PURE__ */ h("<div>"), qt = /* @__PURE__ */ h("<h3>"), Zt = /* @__PURE__ */ h("<p>"), Qt = /* @__PURE__ */ h("<div class=mt-2>");
+var Xt = /* @__PURE__ */ x("<div><div>"), Kt = /* @__PURE__ */ x("<div>"), qt = /* @__PURE__ */ x("<h3>"), Zt = /* @__PURE__ */ x("<p>"), Qt = /* @__PURE__ */ x("<div class=mt-2>");
 function Jt(t) {
-  const e = R(), n = () => e.contentLayout() === "horizontal";
+  const e = G(), n = () => e.contentLayout() === "horizontal";
   return (() => {
     var i = Xt(), r = i.firstChild;
     return f(i, (() => {
       var a = D(() => !!t.icon);
       return () => a() && (() => {
         var s = Kt();
-        return f(s, () => t.icon), C((o) => {
-          var c = w("flex items-center justify-center text-white/30", n() ? "shrink-0" : ""), g = `${N.icon(e.size())}px`, d = `${N.icon(e.size())}px`;
-          return c !== o.e && k(s, o.e = c), g !== o.t && p(s, "width", o.t = g), d !== o.a && p(s, "height", o.a = d), o;
+        return f(s, () => t.icon), C((l) => {
+          var c = y("flex items-center justify-center text-white/30", n() ? "shrink-0" : ""), g = `${N.icon(e.size())}px`, d = `${N.icon(e.size())}px`;
+          return c !== l.e && w(s, l.e = c), g !== l.t && p(s, "width", l.t = g), d !== l.a && p(s, "height", l.a = d), l;
         }, {
           e: void 0,
           t: void 0,
@@ -490,9 +494,9 @@ function Jt(t) {
       var a = D(() => !!(t.title ?? "No data"));
       return () => a() && (() => {
         var s = qt();
-        return f(s, () => t.title ?? "No data"), C((o) => {
-          var c = w("font-semibold text-white/60", B.subtitle(e.size())), g = n() ? "100%" : "80%";
-          return c !== o.e && k(s, o.e = c), g !== o.t && p(s, "max-width", o.t = g), o;
+        return f(s, () => t.title ?? "No data"), C((l) => {
+          var c = y("font-semibold text-white/60", H.subtitle(e.size())), g = n() ? "100%" : "80%";
+          return c !== l.e && w(s, l.e = c), g !== l.t && p(s, "max-width", l.t = g), l;
         }, {
           e: void 0,
           t: void 0
@@ -502,9 +506,9 @@ function Jt(t) {
       var a = D(() => !!t.message);
       return () => a() && (() => {
         var s = Zt();
-        return f(s, () => t.message), C((o) => {
-          var c = w("text-white/50", B.emptyState(e.size())), g = n() ? "100%" : "85%";
-          return c !== o.e && k(s, o.e = c), g !== o.t && p(s, "max-width", o.t = g), o;
+        return f(s, () => t.message), C((l) => {
+          var c = y("text-white/50", H.emptyState(e.size())), g = n() ? "100%" : "85%";
+          return c !== l.e && w(s, l.e = c), g !== l.t && p(s, "max-width", l.t = g), l;
         }, {
           e: void 0,
           t: void 0
@@ -517,8 +521,8 @@ function Jt(t) {
         return f(s, () => t.action), s;
       })();
     })(), null), C((a) => {
-      var s = w("flex h-full w-full", n() ? "flex-row items-center justify-start" : "flex-col items-center justify-center text-center", t.class), o = N.S2(e.size()), c = N.container(e.size()), g = w("flex flex-col", n() ? "items-start text-left" : "items-center text-center"), d = N.S1(e.size());
-      return s !== a.e && k(i, a.e = s), o !== a.t && p(i, "gap", a.t = o), c !== a.a && p(i, "padding", a.a = c), g !== a.o && k(r, a.o = g), d !== a.i && p(r, "gap", a.i = d), a;
+      var s = y("flex h-full w-full", n() ? "flex-row items-center justify-start" : "flex-col items-center justify-center text-center", t.class), l = N.S2(e.size()), c = N.container(e.size()), g = y("flex flex-col", n() ? "items-start text-left" : "items-center text-center"), d = N.S1(e.size());
+      return s !== a.e && w(i, a.e = s), l !== a.t && p(i, "gap", a.t = l), c !== a.a && p(i, "padding", a.a = c), g !== a.o && w(r, a.o = g), d !== a.i && p(r, "gap", a.i = d), a;
     }, {
       e: void 0,
       t: void 0,
@@ -534,7 +538,7 @@ function te(t) {
 }
 function ee(t) {
   const e = t.match(/rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)/);
-  return e ? ht(Number(e[1]), Number(e[2]), Number(e[3])) : null;
+  return e ? vt(Number(e[1]), Number(e[2]), Number(e[3])) : null;
 }
 function ne(t) {
   const e = t.match(/^#([0-9a-f]{3,8})$/i);
@@ -542,20 +546,20 @@ function ne(t) {
   let n = e[1];
   n.length === 3 && (n = n[0] + n[0] + n[1] + n[1] + n[2] + n[2]);
   const i = Number.parseInt(n.slice(0, 2), 16), r = Number.parseInt(n.slice(2, 4), 16), a = Number.parseInt(n.slice(4, 6), 16);
-  return ht(i, r, a);
+  return vt(i, r, a);
 }
-function ht(t, e, n) {
+function vt(t, e, n) {
   t /= 255, e /= 255, n /= 255;
   const i = Math.max(t, e, n), r = Math.min(t, e, n), a = (i + r) / 2;
   if (i === r) return { h: 0, s: 0, l: a * 100 };
-  const s = i - r, o = a > 0.5 ? s / (2 - i - r) : s / (i + r);
+  const s = i - r, l = a > 0.5 ? s / (2 - i - r) : s / (i + r);
   let c = 0;
-  return i === t ? c = ((e - n) / s + (e < n ? 6 : 0)) / 6 : i === e ? c = ((n - t) / s + 2) / 6 : c = ((t - e) / s + 4) / 6, { h: c * 360, s: o * 100, l: a * 100 };
+  return i === t ? c = ((e - n) / s + (e < n ? 6 : 0)) / 6 : i === e ? c = ((n - t) / s + 2) / 6 : c = ((t - e) / s + 4) / 6, { h: c * 360, s: l * 100, l: a * 100 };
 }
 function re(t) {
   return te(t) ?? ee(t) ?? ne(t);
 }
-function ct(t, e, n, i) {
+function dt(t, e, n, i) {
   const r = Math.round(t), a = Math.round(Math.min(100, Math.max(0, e))), s = Math.round(Math.min(100, Math.max(0, n)));
   return i !== void 0 && i < 1 ? `hsla(${r}, ${a}%, ${s}%, ${i})` : `hsl(${r}, ${a}%, ${s}%)`;
 }
@@ -565,12 +569,12 @@ function ie(t) {
   const { h: n, s: i, l: r } = e;
   let a, s = Math.min(i + 10, 100);
   r < 25 ? (a = r + 12, s = Math.min(i + 15, 100)) : r < 40 ? a = Math.max(r - 8, 15) : a = Math.max(18, r * 0.3), i < 15 && (s = 10, a = Math.max(a, 20));
-  const o = ct(n, s, a, 0.85), c = ct(n, Math.min(i, 90), Math.min(r, 55), 0.5);
-  return { background: o, glow: c };
+  const l = dt(n, s, a, 0.85), c = dt(n, Math.min(i, 90), Math.min(r, 55), 0.5);
+  return { background: l, glow: c };
 }
-var ae = /* @__PURE__ */ h('<div><div class="flex items-center justify-center text-white">'), ut = /* @__PURE__ */ h("<div>");
+var ae = /* @__PURE__ */ x('<div><div class="flex items-center justify-center text-white">'), gt = /* @__PURE__ */ x("<div>");
 function se(t) {
-  const e = R(), n = () => t.dynamicColor ? ie(t.dynamicColor) : null, i = () => !!n(), r = () => {
+  const e = G(), n = () => t.dynamicColor ? ie(t.dynamicColor) : null, i = () => !!n(), r = () => {
     const c = n();
     if (c)
       return {
@@ -589,8 +593,8 @@ function se(t) {
       "border-radius": "var(--radius-sm, 12px)"
     }, g = r(), d = a();
     return g && Object.assign(c, g), d && Object.assign(c, d), c;
-  }, o = (c, g, d) => {
-    const x = {
+  }, l = (c, g, d) => {
+    const h = {
       width: `${N.icon(e.size()) * 1.02}px`,
       height: `${N.icon(e.size()) * 1.02}px`,
       "border-radius": "var(--radius-sm, 12px)",
@@ -598,37 +602,37 @@ function se(t) {
       right: `${-N.icon(e.size()) * (c * 0.71)}px`,
       "z-index": g,
       opacity: d
-    }, S = r();
-    return S && Object.assign(x, S), x;
+    }, k = r();
+    return k && Object.assign(h, k), h;
   };
   return (() => {
     var c = ae(), g = c.firstChild;
     return f(c, (() => {
       var d = D(() => (t.entityCount ?? 1) >= 2);
       return () => d() && (() => {
-        var x = ut();
-        return C((S) => {
-          var u = w("absolute", !i() && (t.color ?? "bg-white/10")), l = o(0.14, -2, 0.45);
-          return u !== S.e && k(x, S.e = u), S.t = Q(x, l, S.t), S;
+        var h = gt();
+        return C((k) => {
+          var u = y("absolute", !i() && (t.color ?? "bg-white/10")), o = l(0.14, -2, 0.45);
+          return u !== k.e && w(h, k.e = u), k.t = tt(h, o, k.t), k;
         }, {
           e: void 0,
           t: void 0
-        }), x;
+        }), h;
       })();
     })(), g), f(c, (() => {
       var d = D(() => (t.entityCount ?? 1) >= 3);
       return () => d() && (() => {
-        var x = ut();
-        return C((S) => {
-          var u = w("absolute", !i() && (t.color ?? "bg-white/10")), l = o(0.28, -3, 0.2);
-          return u !== S.e && k(x, S.e = u), S.t = Q(x, l, S.t), S;
+        var h = gt();
+        return C((k) => {
+          var u = y("absolute", !i() && (t.color ?? "bg-white/10")), o = l(0.28, -3, 0.2);
+          return u !== k.e && w(h, k.e = u), k.t = tt(h, o, k.t), k;
         }, {
           e: void 0,
           t: void 0
-        }), x;
+        }), h;
       })();
     })(), g), f(g, () => t.icon), C((d) => {
-      var x = w(
+      var h = y(
         "relative flex shrink-0 items-center justify-center transition-all",
         "pointer-events-none",
         t.dimmed && "opacity-50",
@@ -637,8 +641,8 @@ function se(t) {
         !i() && (t.color ?? "bg-white/10"),
         !i() && t.glow,
         t.class
-      ), S = s(), u = `${N.iconSize(e.size())}px`;
-      return x !== d.e && k(c, d.e = x), d.t = Q(c, S, d.t), u !== d.a && p(g, "font-size", d.a = u), d;
+      ), k = s(), u = `${N.iconSize(e.size())}px`;
+      return h !== d.e && w(c, d.e = h), d.t = tt(c, k, d.t), u !== d.a && p(g, "font-size", d.a = u), d;
     }, {
       e: void 0,
       t: void 0,
@@ -646,36 +650,36 @@ function se(t) {
     }), c;
   })();
 }
-var oe = /* @__PURE__ */ h("<div>"), le = /* @__PURE__ */ h("<div><div><span></span></div><div>"), ce = /* @__PURE__ */ h("<span class=shrink-0>"), ue = /* @__PURE__ */ h('<span class="ml-1 text-white/70">');
+var oe = /* @__PURE__ */ x("<div>"), le = /* @__PURE__ */ x("<div><div><span></span></div><div>"), ce = /* @__PURE__ */ x("<span class=shrink-0>"), ue = /* @__PURE__ */ x('<span class="ml-1 text-white/70">');
 function de(t) {
-  const e = R(), n = () => {
+  const e = G(), n = () => {
     const i = t.direction ?? "auto";
     return i === "auto" ? e.orientation() === "horizontal" ? "horizontal" : "vertical" : i;
   };
   return (() => {
     var i = oe();
-    return f(i, () => t.children), C(() => k(i, w("flex", n() === "horizontal" ? "flex-row gap-4" : "flex-col gap-2", t.class))), i;
+    return f(i, () => t.children), C(() => w(i, y("flex", n() === "horizontal" ? "flex-row gap-4" : "flex-col gap-2", t.class))), i;
   })();
 }
 function ge(t) {
-  const e = R();
+  const e = G();
   return (() => {
     var n = le(), i = n.firstChild, r = i.firstChild, a = i.nextSibling;
     return f(i, (() => {
       var s = D(() => !!t.icon);
       return () => s() && (() => {
-        var o = ce();
-        return f(o, () => t.icon), o;
+        var l = ce();
+        return f(l, () => t.icon), l;
       })();
     })(), r), f(r, () => t.label), f(a, () => t.value, null), f(a, (() => {
       var s = D(() => !!t.unit);
       return () => s() && (() => {
-        var o = ue();
-        return f(o, () => t.unit), o;
+        var l = ue();
+        return f(l, () => t.unit), l;
       })();
     })(), null), C((s) => {
-      var o = w("flex flex-col", t.dimmed && "opacity-50", t.class), c = N.S1(e.size()), g = w("flex items-center gap-1 text-white/60", B.metricLabel(e.size())), d = w("font-semibold text-white", B.metricValue(e.size()));
-      return o !== s.e && k(n, s.e = o), c !== s.t && p(n, "gap", s.t = c), g !== s.a && k(i, s.a = g), d !== s.o && k(a, s.o = d), s;
+      var l = y("flex flex-col", t.dimmed && "opacity-50", t.class), c = N.S1(e.size()), g = y("flex items-center gap-1 text-white/60", H.metricLabel(e.size())), d = y("font-semibold text-white", H.metricValue(e.size()));
+      return l !== s.e && w(n, s.e = l), c !== s.t && p(n, "gap", s.t = c), g !== s.a && w(i, s.a = g), d !== s.o && w(a, s.o = d), s;
     }, {
       e: void 0,
       t: void 0,
@@ -684,47 +688,47 @@ function ge(t) {
     }), n;
   })();
 }
-const xt = de;
-xt.Item = ge;
-var me = /* @__PURE__ */ h("<p>");
+const bt = de;
+bt.Item = ge;
+var me = /* @__PURE__ */ x("<p>");
 function fe(t) {
-  const e = R();
+  const e = G();
   return (() => {
     var n = me();
     return f(n, (() => {
       var i = D(() => !!t.isUnavailable);
       return () => i() ? "Unavailable" : t.children;
     })()), C((i) => {
-      var r = w("relative font-bold text-white", t.dimmed && "opacity-40", B.status(e.size()), t.class), a = j.ACTIONS;
-      return r !== i.e && k(n, i.e = r), a !== i.t && p(n, "z-index", i.t = a), i;
+      var r = y("relative font-bold text-white", t.dimmed && "opacity-40", H.status(e.size()), t.class), a = L.ACTIONS;
+      return r !== i.e && w(n, i.e = r), a !== i.t && p(n, "z-index", i.t = a), i;
     }, {
       e: void 0,
       t: void 0
     }), n;
   })();
 }
-var he = /* @__PURE__ */ h("<p>");
+var he = /* @__PURE__ */ x("<p>");
 function xe(t) {
-  const e = R();
+  const e = G();
   return (() => {
     var n = he();
-    return f(n, () => t.children), C(() => k(n, w("truncate font-medium text-white/80", t.dimmed && "text-white/50", B.subtitle(e.size()), t.class))), n;
+    return f(n, () => t.children), C(() => w(n, y("truncate font-medium text-white/80", t.dimmed && "text-white/50", H.subtitle(e.size()), t.class))), n;
   })();
 }
-var ve = /* @__PURE__ */ h("<div><h3>"), be = /* @__PURE__ */ h("<span>");
+var ve = /* @__PURE__ */ x("<div><h3>"), be = /* @__PURE__ */ x("<span>");
 function ye(t) {
-  const e = R();
+  const e = G();
   return (() => {
     var n = ve(), i = n.firstChild;
     return f(i, () => t.children), f(n, (() => {
       var r = D(() => t.badge !== void 0 && t.badge > 0);
       return () => r() && (() => {
         var a = be();
-        return f(a, () => t.badge), C(() => k(a, w("shrink-0 rounded-full bg-white/20 px-2 py-0.5 font-medium text-white", B.badge(e.size())))), a;
+        return f(a, () => t.badge), C(() => w(a, y("shrink-0 rounded-full bg-white/20 px-2 py-0.5 font-medium text-white", H.badge(e.size())))), a;
       })();
     })(), null), C((r) => {
-      var a = w("relative flex items-center", t.class), s = N.S1(e.size()), o = j.ACTIONS, c = w("truncate text-white/60", B.title(e.size()));
-      return a !== r.e && k(n, r.e = a), s !== r.t && p(n, "gap", r.t = s), o !== r.a && p(n, "z-index", r.a = o), c !== r.o && k(i, r.o = c), r;
+      var a = y("relative flex items-center", t.class), s = N.S1(e.size()), l = L.ACTIONS, c = y("truncate text-white/60", H.title(e.size()));
+      return a !== r.e && w(n, r.e = a), s !== r.t && p(n, "gap", r.t = s), l !== r.a && p(n, "z-index", r.a = l), c !== r.o && w(i, r.o = c), r;
     }, {
       e: void 0,
       t: void 0,
@@ -733,7 +737,7 @@ function ye(t) {
     }), n;
   })();
 }
-function Cn(t) {
+function Mn(t) {
   return {
     icon: t.icon,
     title: t.title,
@@ -756,26 +760,26 @@ function we(t, e = !1) {
     };
   const n = t.length > 1;
   if (!n) {
-    const y = t[0], _ = y.state === "on", G = y.attributes?.brightness || 0, E = Math.round(G / 255 * 100);
+    const _ = t[0], S = _.state === "on", O = _.attributes?.brightness || 0, I = Math.round(O / 255 * 100);
     return {
       isGroup: !1,
-      state: y.state,
-      isOn: _,
-      isUnavailable: y.state === "unavailable",
-      brightness: G,
-      brightnessPercent: E,
-      color: dt(y),
-      onCount: _ ? 1 : 0,
+      state: _.state,
+      isOn: S,
+      isUnavailable: _.state === "unavailable",
+      brightness: O,
+      brightnessPercent: I,
+      color: mt(_),
+      onCount: S ? 1 : 0,
       totalCount: 1,
-      description: _ ? "On" : "Off"
+      description: S ? "On" : "Off"
     };
   }
-  let i = 0, r = 0, a = 0, s = 0, o = 0, c = 0;
+  let i = 0, r = 0, a = 0, s = 0, l = 0, c = 0;
   const g = [];
-  for (const y of t)
-    switch (y.state) {
+  for (const _ of t)
+    switch (_.state) {
       case "on":
-        i++, y.attributes?.brightness !== void 0 && (o += y.attributes.brightness, c++), y.attributes?.rgb_color && g.push(y.attributes.rgb_color);
+        i++, _.attributes?.brightness !== void 0 && (l += _.attributes.brightness, c++), _.attributes?.rgb_color && g.push(_.attributes.rgb_color);
         break;
       case "off":
         r++;
@@ -787,28 +791,28 @@ function we(t, e = !1) {
         s++;
         break;
     }
-  const d = t.length, x = s === d, S = a + s === d, u = i > 0, l = i === d, b = r === d;
+  const d = t.length, h = s === d, k = a + s === d, u = i > 0, o = i === d, b = r === d;
   let v, T;
-  e ? x ? (v = "unavailable", T = !1) : a > 0 || s > 0 ? (v = "unknown", T = !1) : r > 0 ? (v = "off", T = !1) : (v = "on", T = !0) : x ? (v = "unavailable", T = !1) : S ? (v = "unknown", T = !1) : u ? (v = "on", T = !0) : (v = "off", T = !1);
-  const $ = c > 0 ? Math.round(o / c) : 0, A = Math.round($ / 255 * 100);
-  let I;
+  e ? h ? (v = "unavailable", T = !1) : a > 0 || s > 0 ? (v = "unknown", T = !1) : r > 0 ? (v = "off", T = !1) : (v = "on", T = !0) : h ? (v = "unavailable", T = !1) : k ? (v = "unknown", T = !1) : u ? (v = "on", T = !0) : (v = "off", T = !1);
+  const U = c > 0 ? Math.round(l / c) : 0, $ = Math.round(U / 255 * 100);
+  let A;
   if (g.length > 0) {
-    const y = Math.round(g.reduce((W, L) => W + L[0], 0) / g.length), _ = Math.round(g.reduce((W, L) => W + L[1], 0) / g.length), G = Math.round(g.reduce((W, L) => W + L[2], 0) / g.length), E = $ / 255;
-    I = `rgb(${Math.round(y * E)}, ${Math.round(_ * E)}, ${Math.round(G * E)})`;
+    const _ = Math.round(g.reduce((V, R) => V + R[0], 0) / g.length), S = Math.round(g.reduce((V, R) => V + R[1], 0) / g.length), O = Math.round(g.reduce((V, R) => V + R[2], 0) / g.length), I = U / 255;
+    A = `rgb(${Math.round(_ * I)}, ${Math.round(S * I)}, ${Math.round(O * I)})`;
   } else
-    I = dt(t[0]);
-  let V;
-  return l ? V = "All on" : b ? V = "All off" : i > 0 ? V = `${i} of ${d} on` : V = "Off", {
+    A = mt(t[0]);
+  let E;
+  return o ? E = "All on" : b ? E = "All off" : i > 0 ? E = `${i} of ${d} on` : E = "Off", {
     isGroup: n,
     state: v,
     isOn: T,
     isUnavailable: v === "unavailable",
-    brightness: $,
-    brightnessPercent: A,
-    color: I,
+    brightness: U,
+    brightnessPercent: $,
+    color: A,
     onCount: i,
     totalCount: d,
-    description: V
+    description: E
   };
 }
 function $e(t, e = "mean", n = !0) {
@@ -822,21 +826,21 @@ function $e(t, e = "mean", n = !0) {
     };
   const i = t.length > 1;
   if (!i) {
-    const u = t[0], l = Number.parseFloat(u.state);
+    const u = t[0], o = Number.parseFloat(u.state);
     let b = u.state;
-    return Number.isNaN(l) || (b = Number.isInteger(l) ? l.toString() : l.toFixed(1)), {
+    return Number.isNaN(o) || (b = Number.isInteger(o) ? o.toString() : o.toFixed(1)), {
       isGroup: !1,
       state: b,
-      numericValue: Number.isNaN(l) ? null : l,
+      numericValue: Number.isNaN(o) ? null : o,
       isUnavailable: u.state === "unavailable",
       unit: u.unitOfMeasurement ?? void 0,
       description: b
     };
   }
   const r = [], a = [];
-  let s = 0, o;
+  let s = 0, l;
   for (const u of t) {
-    if (!o && u.unitOfMeasurement && (o = u.unitOfMeasurement), u.state === "unavailable") {
+    if (!l && u.unitOfMeasurement && (l = u.unitOfMeasurement), u.state === "unavailable") {
       s++, a.push({
         entityId: u.id,
         value: "unavailable",
@@ -844,14 +848,14 @@ function $e(t, e = "mean", n = !0) {
       });
       continue;
     }
-    const l = Number.parseFloat(u.state);
-    isNaN(l) ? n || a.push({
+    const o = Number.parseFloat(u.state);
+    isNaN(o) ? n || a.push({
       entityId: u.id,
       value: u.state,
       friendly_name: u.friendlyName
-    }) : (r.push(l), a.push({
+    }) : (r.push(o), a.push({
       entityId: u.id,
-      value: l,
+      value: o,
       friendly_name: u.friendlyName
     }));
   }
@@ -862,58 +866,58 @@ function $e(t, e = "mean", n = !0) {
       state: c ? "unavailable" : "unknown",
       numericValue: null,
       isUnavailable: c,
-      unit: o,
+      unit: l,
       description: c ? "Unavailable" : "No numeric values",
       memberValues: a
     };
-  let d, x;
+  let d, h;
   switch (e) {
     case "min":
-      d = Math.min(...r), x = "Minimum";
+      d = Math.min(...r), h = "Minimum";
       break;
     case "max":
-      d = Math.max(...r), x = "Maximum";
+      d = Math.max(...r), h = "Maximum";
       break;
     case "mean":
-      d = r.reduce((u, l) => u + l, 0) / r.length, x = "Average";
+      d = r.reduce((u, o) => u + o, 0) / r.length, h = "Average";
       break;
     case "median": {
-      const u = [...r].sort((b, v) => b - v), l = Math.floor(u.length / 2);
-      d = u.length % 2 === 0 ? (u[l - 1] + u[l]) / 2 : u[l], x = "Median";
+      const u = [...r].sort((b, v) => b - v), o = Math.floor(u.length / 2);
+      d = u.length % 2 === 0 ? (u[o - 1] + u[o]) / 2 : u[o], h = "Median";
       break;
     }
     case "sum":
-      d = r.reduce((u, l) => u + l, 0), x = "Sum";
+      d = r.reduce((u, o) => u + o, 0), h = "Sum";
       break;
     case "last":
-      d = r[r.length - 1], x = "Latest";
+      d = r[r.length - 1], h = "Latest";
       break;
     case "range":
-      d = Math.max(...r) - Math.min(...r), x = "Range";
+      d = Math.max(...r) - Math.min(...r), h = "Range";
       break;
     case "product":
-      d = r.reduce((u, l) => u * l, 1), x = "Product";
+      d = r.reduce((u, o) => u * o, 1), h = "Product";
       break;
     case "std_dev": {
-      const u = r.reduce((b, v) => b + v, 0) / r.length, l = r.reduce((b, v) => b + (v - u) ** 2, 0) / r.length;
-      d = Math.sqrt(l), x = "Std Dev";
+      const u = r.reduce((b, v) => b + v, 0) / r.length, o = r.reduce((b, v) => b + (v - u) ** 2, 0) / r.length;
+      d = Math.sqrt(o), h = "Std Dev";
       break;
     }
     default:
-      d = r.reduce((u, l) => u + l, 0) / r.length, x = "Average";
+      d = r.reduce((u, o) => u + o, 0) / r.length, h = "Average";
   }
-  const S = Number.isInteger(d) ? d.toString() : d.toFixed(1);
+  const k = Number.isInteger(d) ? d.toString() : d.toFixed(1);
   return {
     isGroup: i,
-    state: S,
+    state: k,
     numericValue: d,
     isUnavailable: !1,
-    unit: o,
-    description: `${x} of ${r.length}`,
+    unit: l,
+    description: `${h} of ${r.length}`,
     memberValues: a
   };
 }
-function dt(t) {
+function mt(t) {
   if (t.state !== "on") return "rgb(100, 100, 100)";
   const n = (t.attributes?.brightness ?? 255) / 255;
   if (t.attributes?.rgb_color) {
@@ -922,8 +926,8 @@ function dt(t) {
   }
   if (t.attributes?.color_temp) {
     const r = 1e6 / t.attributes.color_temp / 100;
-    let a, s, o;
-    return r <= 66 ? (a = 255, s = r <= 19 ? 0 : 99.4708025861 * Math.log(r - 10) - 161.1195681661, o = r <= 19 ? 0 : r <= 66 ? 138.5177312231 * Math.log(r - 10) - 305.0447927307 : 255) : (a = 329.698727446 * (r - 60) ** -0.1332047592, s = 288.1221695283 * (r - 60) ** -0.0755148492, o = 255), a = Math.max(0, Math.min(255, a)) * n, s = Math.max(0, Math.min(255, s)) * n, o = Math.max(0, Math.min(255, o)) * n, `rgb(${Math.round(a)}, ${Math.round(s)}, ${Math.round(o)})`;
+    let a, s, l;
+    return r <= 66 ? (a = 255, s = r <= 19 ? 0 : 99.4708025861 * Math.log(r - 10) - 161.1195681661, l = r <= 19 ? 0 : r <= 66 ? 138.5177312231 * Math.log(r - 10) - 305.0447927307 : 255) : (a = 329.698727446 * (r - 60) ** -0.1332047592, s = 288.1221695283 * (r - 60) ** -0.0755148492, l = 255), a = Math.max(0, Math.min(255, a)) * n, s = Math.max(0, Math.min(255, s)) * n, l = Math.max(0, Math.min(255, l)) * n, `rgb(${Math.round(a)}, ${Math.round(s)}, ${Math.round(l)})`;
   }
   return `rgb(${Math.round(255 * n)}, ${Math.round(220 * n)}, ${Math.round(180 * n)})`;
 }
@@ -940,25 +944,25 @@ function pe(t) {
   }
   return !1;
 }
-function Mn(t, e = "unknown") {
+function zn(t, e = "unknown") {
   return t?.state ?? e;
 }
-function zn(t, e, n) {
+function Dn(t, e, n) {
   return t?.attributes ? t.attributes[e] ?? n : n;
 }
-function Dn(t, e) {
+function _n(t, e) {
   return t.filter((n) => n.state === e).length;
 }
-function _n(t) {
+function An(t) {
   return t.filter(ke).length;
 }
-function An(t) {
+function Nn(t) {
   return t.filter(pe).length;
 }
-function Nn(t, e) {
+function Tn(t, e) {
   return t.length > 0 && t.every((n) => n.state === e);
 }
-function Tn(t, e) {
+function En(t, e) {
   return t.some((n) => n.state === e);
 }
 function Se(t, e, n) {
@@ -969,15 +973,15 @@ function Se(t, e, n) {
     return e ? `--${e}` : "--";
   let a = t, s = e || "";
   r && e && (e === "W" || e === "kW" || e === "MW") && (t >= 1e6 ? (a = t / 1e6, s = "MW") : t >= 1e3 ? (a = t / 1e3, s = "kW") : s = "W"), r && e && (e === "B" || e === "KB" || e === "MB" || e === "GB") && (t >= 1073741824 ? (a = t / 1073741824, s = "GB") : t >= 1048576 ? (a = t / 1048576, s = "MB") : t >= 1024 ? (a = t / 1024, s = "KB") : s = "B");
-  let o;
-  return i !== void 0 ? o = a.toFixed(i) : a !== t ? o = a.toFixed(1) : Number.isInteger(t) ? o = t.toString() : o = Number.parseFloat(t.toFixed(2)).toString(), s ? `${o}${s}` : o;
+  let l;
+  return i !== void 0 ? l = a.toFixed(i) : a !== t ? l = a.toFixed(1) : Number.isInteger(t) ? l = t.toString() : l = Number.parseFloat(t.toFixed(2)).toString(), s ? `${l}${s}` : l;
 }
 function Ce(t, e) {
   return t == null || isNaN(t) ? null : e === "°C" ? t < 10 ? "Cold" : t < 18 ? "Cool" : t < 24 ? "Comfortable" : t < 28 ? "Warm" : "Hot" : e === "°F" ? t < 50 ? "Cold" : t < 64 ? "Cool" : t < 75 ? "Comfortable" : t < 82 ? "Warm" : "Hot" : e === "%" ? t < 20 ? "Very Low" : t < 40 ? "Low" : t < 60 ? "Medium" : t < 80 ? "High" : "Very High" : e === "ppm" ? t < 400 ? "Excellent" : t < 600 ? "Good" : t < 1e3 ? "Acceptable" : t < 1500 ? "Mediocre" : "Poor" : e === "lx" ? t < 50 ? "Dark" : t < 200 ? "Dim" : t < 500 ? "Moderate" : t < 1e3 ? "Bright" : "Very Bright" : e === "AQI" ? t <= 50 ? "Good" : t <= 100 ? "Moderate" : t <= 150 ? "Unhealthy for Sensitive" : t <= 200 ? "Unhealthy" : t <= 300 ? "Very Unhealthy" : "Hazardous" : e === "dB" ? t < 30 ? "Very Quiet" : t < 50 ? "Quiet" : t < 70 ? "Moderate" : t < 85 ? "Loud" : "Very Loud" : null;
 }
-var Me = /* @__PURE__ */ h("<div><div>"), ze = /* @__PURE__ */ h("<div>");
+var Me = /* @__PURE__ */ x("<div><div>"), ze = /* @__PURE__ */ x("<div>");
 function De(t) {
-  const e = R();
+  const e = G();
   return (() => {
     var n = Me(), i = n.firstChild;
     return f(i, () => Se(t.value, t.unit)), f(n, (() => {
@@ -985,23 +989,23 @@ function De(t) {
       return () => r() && (() => {
         var a = ze();
         return f(a, () => Ce(t.value, t.unit)), C((s) => {
-          var o = w("text-white/60", B.subtitle(e.size())), c = N.S1(e.size());
-          return o !== s.e && k(a, s.e = o), c !== s.t && p(a, "margin-top", s.t = c), s;
+          var l = y("text-white/60", H.subtitle(e.size())), c = N.S1(e.size());
+          return l !== s.e && w(a, s.e = l), c !== s.t && p(a, "margin-top", s.t = c), s;
         }, {
           e: void 0,
           t: void 0
         }), a;
       })();
     })(), null), C((r) => {
-      var a = w("flex flex-col", t.class), s = w("font-bold text-white", B.value(e.size()));
-      return a !== r.e && k(n, r.e = a), s !== r.t && k(i, r.t = s), r;
+      var a = y("flex flex-col", t.class), s = y("font-bold text-white", H.value(e.size()));
+      return a !== r.e && w(n, r.e = a), s !== r.t && w(i, r.t = s), r;
     }, {
       e: void 0,
       t: void 0
     }), n;
   })();
 }
-var _e = /* @__PURE__ */ h('<div><div><div class="relative h-full w-full">'), Ae = /* @__PURE__ */ h('<div class="pointer-events-none absolute inset-0"><div>'), Ne = /* @__PURE__ */ h('<div class="pointer-events-none absolute inset-0 animate-pulse bg-blue-500/20">'), Te = /* @__PURE__ */ h('<div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">'), Ee = /* @__PURE__ */ h('<div class="flex items-center justify-center text-white/30">'), Oe = /* @__PURE__ */ h('<h3 class="font-semibold text-sm text-white/60">'), Ve = /* @__PURE__ */ h('<p class="text-white/50 text-xs">');
+var _e = /* @__PURE__ */ x('<div><div><div class="relative h-full w-full">'), Ae = /* @__PURE__ */ x('<div class="pointer-events-none absolute inset-0"><div>'), Ne = /* @__PURE__ */ x('<div class="pointer-events-none absolute inset-0 animate-pulse bg-blue-500/20">'), Te = /* @__PURE__ */ x('<div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">'), Ee = /* @__PURE__ */ x('<div class="flex items-center justify-center text-white/30">'), Oe = /* @__PURE__ */ x('<h3 class="font-semibold text-sm text-white/60">'), Ve = /* @__PURE__ */ x('<p class="text-white/50 text-xs">');
 function We(t, e) {
   const n = t * e;
   return n <= 2 ? "xs" : n <= 4 ? "sm" : n <= 8 ? "md" : n <= 18 ? "lg" : "xl";
@@ -1014,10 +1018,10 @@ function Re(t, e) {
 }
 function Ge(t) {
   let e;
-  const n = Mt(() => e), i = 2, [r, a] = U(0), [s, o] = U(0);
-  wt(() => {
-    const $ = Math.round(n.width ?? 0), A = Math.round(n.height ?? 0), I = lt(r), V = lt(s);
-    (Math.abs($ - I) > i || Math.abs(A - V) > i) && (a($), o(A));
+  const n = Mt(() => e), i = 2, [r, a] = j(0), [s, l] = j(0);
+  F(() => {
+    const $ = Math.round(n.width ?? 0), A = Math.round(n.height ?? 0), E = ut(r), _ = ut(s);
+    (Math.abs($ - E) > i || Math.abs(A - _) > i) && (a($), l(A));
   });
   const c = z(() => {
     if (t.variant)
@@ -1032,45 +1036,57 @@ function Ge(t) {
   }), d = z(() => {
     const $ = g();
     return We($.gridWidth, $.gridHeight);
-  }), x = z(() => {
+  }), h = z(() => {
     const $ = g();
     return Ie($.width, $.height);
-  }), S = z(() => {
+  }), k = z(() => {
     const $ = g();
     return Re($.width, $.height);
-  }), u = mt(it), l = {
+  }), u = ht(st), o = u;
+  o?._isStub?.() && o._bridge && (F(() => {
+    o._bridge.setSize(d());
+  }), F(() => {
+    o._bridge.setOrientation(h());
+  }), F(() => {
+    o._bridge.setContentLayout(k());
+  }), F(() => {
+    o._bridge.setDimensions(g());
+  }), F(() => {
+    o._bridge.setIsStub(!1);
+  }));
+  const b = {
     size: d,
-    orientation: x,
-    contentLayout: S,
+    orientation: h,
+    contentLayout: k,
     dimensions: g,
     isEditMode: () => t.isEditMode ?? !1,
     updateConfig: u?.updateConfig ?? (() => {
     })
-  }, b = "bg-gradient-to-br from-gray-500/20 to-gray-600/20", v = z(() => t.emptyState && !t.gradient ? b : t.gradient), T = z(() => ({
+  }, v = "bg-gradient-to-br from-gray-500/20 to-gray-600/20", T = z(() => t.emptyState && !t.gradient ? v : t.gradient), U = z(() => ({
     "container-type": "size",
     "container-name": "widget",
     ...c()?.styles?.container,
     ...c()?.styles?.cssVars || {}
   }));
-  return O(it.Provider, {
-    value: l,
+  return W(st.Provider, {
+    value: b,
     get children() {
-      var $ = _e(), A = $.firstChild, I = A.firstChild, V = e;
-      return typeof V == "function" ? kt(V, $) : e = $, f(A, (() => {
-        var y = D(() => !!t.backgroundGlow);
-        return () => y() && (() => {
-          var _ = Ae(), G = _.firstChild;
-          return C((E) => {
-            var W = j.BACKGROUND, L = w("absolute inset-0 opacity-20 blur-2xl", t.backgroundGlow);
-            return W !== E.e && p(_, "z-index", E.e = W), L !== E.t && k(G, E.t = L), E;
+      var $ = _e(), A = $.firstChild, E = A.firstChild, _ = e;
+      return typeof _ == "function" ? kt(_, $) : e = $, f(A, (() => {
+        var S = D(() => !!t.backgroundGlow);
+        return () => S() && (() => {
+          var O = Ae(), I = O.firstChild;
+          return C((V) => {
+            var R = L.BACKGROUND, Q = y("absolute inset-0 opacity-20 blur-2xl", t.backgroundGlow);
+            return R !== V.e && p(O, "z-index", V.e = R), Q !== V.t && w(I, V.t = Q), V;
           }, {
             e: void 0,
             t: void 0
-          }), _;
+          }), O;
         })();
-      })(), I), f(I, (() => {
-        var y = D(() => !!t.emptyState);
-        return () => y() ? O(He, {
+      })(), E), f(E, (() => {
+        var S = D(() => !!t.emptyState);
+        return () => S() ? W(Be, {
           get icon() {
             return t.emptyState.icon;
           },
@@ -1082,24 +1098,24 @@ function Ge(t) {
           }
         }) : t.children;
       })()), f(A, (() => {
-        var y = D(() => !!t.loading);
-        return () => y() && (() => {
-          var _ = Ne();
-          return C((G) => p(_, "z-index", j.OVERLAY)), _;
+        var S = D(() => !!t.loading);
+        return () => S() && (() => {
+          var O = Ne();
+          return C((I) => p(O, "z-index", L.OVERLAY)), O;
         })();
-      })(), null), C((y) => {
-        var _ = w(
+      })(), null), C((S) => {
+        var O = y(
           "relative h-full w-full select-none rounded-xl border border-border/50",
           // Variant styles (lowest priority)
           c()?.styles?.class,
           // Custom class (highest priority)
           t.class
-        ), G = T(), E = w(
+        ), I = U(), V = y(
           "relative h-full w-full overflow-hidden rounded-xl",
           // Gradient prop (overrides variant, auto-applied for empty state)
-          v()
-        ), W = j.CONTENT;
-        return _ !== y.e && k($, y.e = _), y.t = Q($, G, y.t), E !== y.a && k(A, y.a = E), W !== y.o && p(I, "z-index", y.o = W), y;
+          T()
+        ), R = L.CONTENT;
+        return O !== S.e && w($, S.e = O), S.t = tt($, I, S.t), V !== S.a && w(A, S.a = V), R !== S.o && p(E, "z-index", S.o = R), S;
       }, {
         e: void 0,
         t: void 0,
@@ -1109,7 +1125,7 @@ function Ge(t) {
     }
   });
 }
-function He(t) {
+function Be(t) {
   return (() => {
     var e = Te();
     return f(e, (() => {
@@ -1140,10 +1156,10 @@ P.Title = ye;
 P.Subtitle = xe;
 P.Status = fe;
 P.Value = De;
-P.Metrics = xt;
+P.Metrics = bt;
 P.EmptyState = Jt;
-P.SliderFill = jt;
-var Be = /* @__PURE__ */ h("<div><div>");
+P.SliderFill = Pt;
+var He = /* @__PURE__ */ x("<div><div>");
 const Le = {
   blue: "bg-blue-500/30",
   green: "bg-green-500/30",
@@ -1152,13 +1168,13 @@ const Le = {
   purple: "bg-purple-500/30",
   gray: "bg-gray-500/30"
 };
-function En(t) {
+function On(t) {
   const e = () => Le[t.color] ?? t.color;
   return (() => {
-    var n = Be(), i = n.firstChild;
+    var n = He(), i = n.firstChild;
     return C((r) => {
-      var a = w("pointer-events-none absolute inset-0", t.class), s = j.BACKGROUND, o = w("absolute inset-0 opacity-40 blur-3xl", e());
-      return a !== r.e && k(n, r.e = a), s !== r.t && p(n, "z-index", r.t = s), o !== r.a && k(i, r.a = o), r;
+      var a = y("pointer-events-none absolute inset-0", t.class), s = L.BACKGROUND, l = y("absolute inset-0 opacity-40 blur-3xl", e());
+      return a !== r.e && w(n, r.e = a), s !== r.t && p(n, "z-index", r.t = s), l !== r.a && w(i, r.a = l), r;
     }, {
       e: void 0,
       t: void 0,
@@ -1166,41 +1182,41 @@ function En(t) {
     }), n;
   })();
 }
-var je = /* @__PURE__ */ h("<div>");
-function On(t) {
-  const e = R(), n = () => {
+var Pe = /* @__PURE__ */ x("<div>");
+function Vn(t) {
+  const e = G(), n = () => {
     const i = t.spacing ?? "S2";
     return N[i](e.size());
   };
   return (() => {
-    var i = je();
+    var i = Pe();
     return f(i, () => t.children), C((r) => {
-      var a = w("flex flex-col", t.class), s = n();
-      return a !== r.e && k(i, r.e = a), s !== r.t && p(i, "gap", r.t = s), r;
+      var a = y("flex flex-col", t.class), s = n();
+      return a !== r.e && w(i, r.e = a), s !== r.t && p(i, "gap", r.t = s), r;
     }, {
       e: void 0,
       t: void 0
     }), i;
   })();
 }
-var Pe = /* @__PURE__ */ h('<span class="inline-flex size-3.5 shrink-0 items-center">'), Ue = /* @__PURE__ */ h("<button type=button>"), Fe = /* @__PURE__ */ h('<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">'), Ye = /* @__PURE__ */ h('<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'), Xe = /* @__PURE__ */ h('<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>'), Ke = /* @__PURE__ */ h('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), qe = /* @__PURE__ */ h('<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">'), Ze = /* @__PURE__ */ h('<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'), Qe = /* @__PURE__ */ h('<div class="min-w-0 shrink-0">'), Je = /* @__PURE__ */ h('<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">'), tn = /* @__PURE__ */ h('<div class="min-h-0 flex-1 overflow-y-auto p-2 md:p-6">'), en = /* @__PURE__ */ h('<div class="flex shrink-0 justify-end pt-3">');
+var je = /* @__PURE__ */ x('<span class="inline-flex size-3.5 shrink-0 items-center">'), Ue = /* @__PURE__ */ x("<button type=button>"), Fe = /* @__PURE__ */ x('<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z">'), Ye = /* @__PURE__ */ x('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No edit options available'), Xe = /* @__PURE__ */ x('<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><line x1=4 y1=21 x2=4 y2=14></line><line x1=4 y1=10 x2=4 y2=3></line><line x1=12 y1=21 x2=12 y2=12></line><line x1=12 y1=8 x2=12 y2=3></line><line x1=20 y1=21 x2=20 y2=16></line><line x1=20 y1=12 x2=20 y2=3></line><line x1=1 y1=14 x2=7 y2=14></line><line x1=9 y1=8 x2=15 y2=8></line><line x1=17 y1=16 x2=23 y2=16>'), Ke = /* @__PURE__ */ x('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), qe = /* @__PURE__ */ x('<svg xmlns=http://www.w3.org/2000/svg class=size-3.5 fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path d="m8 2 1.88 1.88"></path><path d="M14.12 3.88 16 2"></path><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"></path><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"></path><path d="M12 20v-9"></path><path d="M6.53 9C4.6 8.8 3 7.1 3 5"></path><path d="M6 13H2"></path><path d="M3 21c0-2.1 1.7-3.9 3.8-4"></path><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"></path><path d="M22 13h-4"></path><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4">'), Ze = /* @__PURE__ */ x('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No debug information available'), Qe = /* @__PURE__ */ x('<div class="min-w-0 shrink-0">'), Je = /* @__PURE__ */ x('<div class="flex items-center gap-2"><div class="flex h-8 items-center rounded-lg border border-border/50 bg-muted/30 p-0.5">'), tn = /* @__PURE__ */ x('<div class="min-h-0 flex-1 overflow-y-auto p-2 md:p-6">'), en = /* @__PURE__ */ x('<div class="flex shrink-0 justify-end pt-3">');
 function nn(t) {
   return (() => {
     var e = Ue();
-    return e.$$click = () => t.onClick(), f(e, O(X, {
+    return e.$$click = () => t.onClick(), f(e, W(K, {
       get when() {
         return t.isActive;
       },
       get children() {
-        var n = Pe();
+        var n = je();
         return f(n, () => t.icon), n;
       }
-    }), null), f(e, () => t.label, null), C(() => k(e, w("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", t.isActive ? "gap-1.5 bg-foreground/10 font-semibold text-foreground shadow-sm" : "gap-0 text-muted-foreground hover:bg-foreground/5 hover:text-foreground"))), e;
+    }), null), f(e, () => t.label, null), C(() => w(e, y("flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-xs transition-all duration-300 ease-in-out", t.isActive ? "gap-1.5 bg-foreground/10 font-semibold text-foreground shadow-sm" : "gap-0 text-muted-foreground hover:bg-foreground/5 hover:text-foreground"))), e;
   })();
 }
-function Vn(t) {
-  const [e] = $t(t, ["open", "onOpenChange", "title", "onSave", "hasUnsavedChanges", "onDelete", "editContent", "controlsContent", "debugContent", "debugData", "tabs", "class", "maxWidth", "defaultTab", "headerActions", "ResponsiveDialog", "ResponsiveDialogContent", "ResponsiveDialogHeader", "ResponsiveDialogTitle", "ResponsiveDialogDescription", "Button"]), [n, i] = U(e.defaultTab ?? "controls"), r = () => {
-    const l = e.maxWidth ?? "3xl";
+function Wn(t) {
+  const [e] = $t(t, ["open", "onOpenChange", "title", "onSave", "hasUnsavedChanges", "onDelete", "editContent", "controlsContent", "debugContent", "debugData", "tabs", "class", "maxWidth", "defaultTab", "headerActions", "ResponsiveDialog", "ResponsiveDialogContent", "ResponsiveDialogHeader", "ResponsiveDialogTitle", "ResponsiveDialogDescription", "Button"]), [n, i] = j(e.defaultTab ?? "controls"), r = () => {
+    const o = e.maxWidth ?? "3xl";
     return {
       sm: "max-w-sm",
       md: "max-w-md",
@@ -1209,38 +1225,38 @@ function Vn(t) {
       "2xl": "max-w-2xl",
       "3xl": "max-w-3xl",
       "4xl": "max-w-4xl"
-    }[l];
+    }[o];
   }, a = () => {
     if (e.tabs) return e.tabs;
-    const l = [];
-    return l.push({
+    const o = [];
+    return o.push({
       id: "edit",
       label: "Edit",
       icon: Fe(),
       content: e.editContent ?? Ye()
-    }), l.push({
+    }), o.push({
       id: "controls",
       label: "Controls",
       icon: Xe(),
       content: e.controlsContent ?? Ke()
-    }), l.push({
+    }), o.push({
       id: "debug",
       label: "Debug",
       icon: qe(),
       content: e.debugContent ?? Ze()
-    }), l;
+    }), o;
   }, s = async () => {
     if (e.debugData !== void 0)
       try {
-        const l = typeof e.debugData == "string" ? e.debugData : JSON.stringify(e.debugData, null, 2);
-        await navigator.clipboard.writeText(l);
+        const o = typeof e.debugData == "string" ? e.debugData : JSON.stringify(e.debugData, null, 2);
+        await navigator.clipboard.writeText(o);
       } catch {
       }
-  }, o = () => {
-    const l = a();
-    return l.find((v) => v.id === n())?.content ?? l[0]?.content;
-  }, c = e.ResponsiveDialog, g = e.ResponsiveDialogContent, d = e.ResponsiveDialogHeader, x = e.ResponsiveDialogTitle, S = e.ResponsiveDialogDescription, u = e.Button;
-  return O(c, {
+  }, l = () => {
+    const o = a();
+    return o.find((v) => v.id === n())?.content ?? o[0]?.content;
+  }, c = e.ResponsiveDialog, g = e.ResponsiveDialogContent, d = e.ResponsiveDialogHeader, h = e.ResponsiveDialogTitle, k = e.ResponsiveDialogDescription, u = e.Button;
+  return W(c, {
     get open() {
       return e.open;
     },
@@ -1248,28 +1264,28 @@ function Vn(t) {
       return e.onOpenChange;
     },
     get children() {
-      return O(g, {
+      return W(g, {
         get class() {
-          return w(r(), e.class);
+          return y(r(), e.class);
         },
         get children() {
-          return [O(d, {
+          return [W(d, {
             class: "flex flex-row items-center justify-between gap-3",
             get children() {
               return [(() => {
-                var l = Qe();
-                return f(l, O(x, {
+                var o = Qe();
+                return f(o, W(h, {
                   class: "truncate leading-tight",
                   get children() {
                     return e.title;
                   }
-                }), null), f(l, O(S, {
+                }), null), f(o, W(k, {
                   class: "sr-only",
                   children: "Widget configuration dialog"
-                }), null), l;
+                }), null), o;
               })(), (() => {
-                var l = Je(), b = l.firstChild;
-                return f(b, () => a().map((v) => O(nn, {
+                var o = Je(), b = o.firstChild;
+                return f(b, () => a().map((v) => W(nn, {
                   get icon() {
                     return v.icon;
                   },
@@ -1280,54 +1296,54 @@ function Vn(t) {
                     return n() === v.id;
                   },
                   onClick: () => i(v.id)
-                }))), f(l, O(X, {
+                }))), f(o, W(K, {
                   get when() {
                     return e.headerActions;
                   },
                   get children() {
                     return e.headerActions;
                   }
-                }), null), f(l, O(X, {
+                }), null), f(o, W(K, {
                   get when() {
                     return D(() => !!(n() === "edit" && e.onSave))() && e.hasUnsavedChanges;
                   },
                   get children() {
-                    return O(u, {
+                    return W(u, {
                       size: "sm",
                       onClick: () => e.onSave?.(),
                       children: "Save"
                     });
                   }
-                }), null), f(l, O(X, {
+                }), null), f(o, W(K, {
                   get when() {
                     return D(() => n() === "edit")() && e.onDelete;
                   },
                   get children() {
-                    return O(u, {
+                    return W(u, {
                       size: "sm",
                       variant: "destructive",
                       onClick: () => e.onDelete?.(),
                       children: "Delete"
                     });
                   }
-                }), null), l;
+                }), null), o;
               })()];
             }
           }), (() => {
-            var l = tn();
-            return f(l, o), l;
-          })(), O(X, {
+            var o = tn();
+            return f(o, l), o;
+          })(), W(K, {
             get when() {
               return D(() => n() === "debug")() && e.debugData !== void 0;
             },
             get children() {
-              var l = en();
-              return f(l, O(u, {
+              var o = en();
+              return f(o, W(u, {
                 size: "sm",
                 variant: "outline",
                 onClick: s,
                 children: "Copy"
-              })), l;
+              })), o;
             }
           })];
         }
@@ -1336,79 +1352,79 @@ function Vn(t) {
   });
 }
 pt(["click"]);
-const q = 32, m = q / 2, H = "white", J = "rgba(0,0,0,0.4)", ot = 2, tt = 3;
+const Z = 32, m = Z / 2, B = "white", et = "rgba(0,0,0,0.4)", ct = 2, nt = 3;
 function rn(t) {
   return `url("data:image/svg+xml,${encodeURIComponent(t)}")`;
 }
-function et(t) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${q}" height="${q}" viewBox="0 0 ${q} ${q}">${t}</svg>`;
+function rt(t) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${Z}" height="${Z}" viewBox="0 0 ${Z} ${Z}">${t}</svg>`;
 }
-const an = et(`
+const an = rt(`
   <g transform="translate(6, 2)">
     <!-- shadow -->
-    <g stroke="${J}" stroke-width="${tt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${et}" stroke-width="${nt}" 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="${ot}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${B}" stroke-width="${ct}" 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>
-`), sn = et(`
+`), sn = rt(`
   <g>
-    <circle cx="${m}" cy="${m}" r="8" stroke="${J}" stroke-width="${tt}" fill="none"/>
-    <circle cx="${m}" cy="${m}" r="8" stroke="${H}" stroke-width="1.5" fill="none"/>
-    <circle cx="${m}" cy="${m}" r="1.5" fill="${H}"/>
+    <circle cx="${m}" cy="${m}" r="8" stroke="${et}" stroke-width="${nt}" fill="none"/>
+    <circle cx="${m}" cy="${m}" r="8" stroke="${B}" stroke-width="1.5" fill="none"/>
+    <circle cx="${m}" cy="${m}" r="1.5" fill="${B}"/>
   </g>
-`), on = et(`
+`), on = rt(`
   <g>
     <!-- shadow -->
-    <g stroke="${J}" stroke-width="${tt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${et}" stroke-width="${nt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <line x1="6" y1="${m}" x2="26" y2="${m}"/>
       <polyline points="10,${m - 4} 6,${m} 10,${m + 4}"/>
       <polyline points="22,${m - 4} 26,${m} 22,${m + 4}"/>
     </g>
     <!-- main -->
-    <g stroke="${H}" stroke-width="${ot}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${B}" stroke-width="${ct}" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <line x1="6" y1="${m}" x2="26" y2="${m}"/>
       <polyline points="10,${m - 4} 6,${m} 10,${m + 4}"/>
       <polyline points="22,${m - 4} 26,${m} 22,${m + 4}"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${m}" cy="${m}" r="1.5" fill="${H}"/>
-    <circle cx="${m - 5}" cy="${m}" r="1" fill="${H}" opacity="0.6"/>
-    <circle cx="${m + 5}" cy="${m}" r="1" fill="${H}" opacity="0.6"/>
+    <circle cx="${m}" cy="${m}" r="1.5" fill="${B}"/>
+    <circle cx="${m - 5}" cy="${m}" r="1" fill="${B}" opacity="0.6"/>
+    <circle cx="${m + 5}" cy="${m}" r="1" fill="${B}" opacity="0.6"/>
   </g>
-`), ln = et(`
+`), ln = rt(`
   <g>
     <!-- shadow -->
-    <g stroke="${J}" stroke-width="${tt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${et}" stroke-width="${nt}" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <line x1="${m}" y1="6" x2="${m}" y2="26"/>
       <polyline points="${m - 4},10 ${m},6 ${m + 4},10"/>
       <polyline points="${m - 4},22 ${m},26 ${m + 4},22"/>
     </g>
     <!-- main -->
-    <g stroke="${H}" stroke-width="${ot}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${B}" stroke-width="${ct}" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <line x1="${m}" y1="6" x2="${m}" y2="26"/>
       <polyline points="${m - 4},10 ${m},6 ${m + 4},10"/>
       <polyline points="${m - 4},22 ${m},26 ${m + 4},22"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${m}" cy="${m}" r="1.5" fill="${H}"/>
-    <circle cx="${m}" cy="${m - 5}" r="1" fill="${H}" opacity="0.6"/>
-    <circle cx="${m}" cy="${m + 5}" r="1" fill="${H}" opacity="0.6"/>
+    <circle cx="${m}" cy="${m}" r="1.5" fill="${B}"/>
+    <circle cx="${m}" cy="${m - 5}" r="1" fill="${B}" opacity="0.6"/>
+    <circle cx="${m}" cy="${m + 5}" r="1" fill="${B}" opacity="0.6"/>
   </g>
 `);
-function Z(t, e, n) {
+function J(t, e, n) {
   return { css: `${rn(t)} ${e} ${n}, auto`, hotspotX: e, hotspotY: n };
 }
-const F = {
-  tap: Z(an, 12, 4),
-  hold: Z(sn, 16, 16),
-  slideHorizontal: Z(on, m, m),
-  slideVertical: Z(ln, m, m)
+const Y = {
+  tap: J(an, 12, 4),
+  hold: J(sn, 16, 16),
+  slideHorizontal: J(on, m, m),
+  slideVertical: J(ln, m, m)
 };
-function Wn(t, e) {
+function In(t, e) {
   const n = {
     isDown: !1,
     startX: 0,
@@ -1433,17 +1449,17 @@ function Wn(t, e) {
       return T.height > T.width ? "vertical" : "horizontal";
     }
     return (e?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
-  }, o = (u) => {
-    const l = t();
-    if (!(!l.tap && !l.hold && !l.slide)) {
-      if (n.isDown = !0, n.element = u.currentTarget, n.startX = u.clientX, n.startY = u.clientY, n.currentX = u.clientX, n.currentY = u.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.setPointerCapture(u.pointerId), l.hold) {
-        const b = l.hold.delay ?? 300;
+  }, l = (u) => {
+    const o = t();
+    if (!(!o.tap && !o.hold && !o.slide)) {
+      if (n.isDown = !0, n.element = u.currentTarget, n.startX = u.clientX, n.startY = u.clientY, n.currentX = u.clientX, n.currentY = u.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.setPointerCapture(u.pointerId), o.hold) {
+        const b = o.hold.delay ?? 300;
         n.holdTimer = setTimeout(() => {
-          n.isDown && !n.hasMoved && (l.hold.action(), n.isDown = !1);
+          n.isDown && !n.hasMoved && (o.hold.action(), n.isDown = !1);
         }, b);
       }
-      if (l.slide) {
-        const b = l.slide.activationDelay ?? 0;
+      if (o.slide) {
+        const b = o.slide.activationDelay ?? 0;
         b > 0 ? n.slideActivationTimer = setTimeout(() => {
           n.slideActive = !0;
         }, b) : n.slideActive = !0;
@@ -1451,51 +1467,51 @@ function Wn(t, e) {
     }
   }, c = (u) => {
     if (!n.isDown) return;
-    const l = t();
+    const o = t();
     n.currentX = u.clientX, n.currentY = u.clientY;
-    const b = n.currentX - n.startX, v = n.currentY - n.startY, T = Math.abs(b), $ = Math.abs(v), A = Math.sqrt(b * b + v * v), I = u.currentTarget, V = s(I);
-    if (!n.lockedAxis && A > r && (T > $ ? n.lockedAxis = "horizontal" : n.lockedAxis = "vertical", l.slide && n.lockedAxis !== V)) {
-      I.releasePointerCapture(u.pointerId), n.isDown = !1, n.slideActive = !1, a();
+    const b = n.currentX - n.startX, v = n.currentY - n.startY, T = Math.abs(b), U = Math.abs(v), $ = Math.sqrt(b * b + v * v), A = u.currentTarget, E = s(A);
+    if (!n.lockedAxis && $ > r && (T > U ? n.lockedAxis = "horizontal" : n.lockedAxis = "vertical", o.slide && n.lockedAxis !== E)) {
+      A.releasePointerCapture(u.pointerId), n.isDown = !1, n.slideActive = !1, a();
       return;
     }
-    if (A > i && (n.hasMoved = !0, a()), l.slide && n.slideActive && n.hasMoved && n.lockedAxis === V) {
-      const y = l.slide.min ?? 0, _ = l.slide.max ?? 100, G = _ - y, E = V === "vertical" ? -v : b, W = V === "vertical" ? u.currentTarget.clientHeight : u.currentTarget.clientWidth, vt = E / W * G, bt = Math.max(y, Math.min(_, l.slide.value + vt));
-      l.slide.onChange(Math.round(bt)), n.startX = n.currentX, n.startY = n.currentY, u.preventDefault();
+    if ($ > i && (n.hasMoved = !0, a()), o.slide && n.slideActive && n.hasMoved && n.lockedAxis === E) {
+      const _ = o.slide.min ?? 0, S = o.slide.max ?? 100, O = S - _, I = E === "vertical" ? -v : b, V = E === "vertical" ? u.currentTarget.clientHeight : u.currentTarget.clientWidth, Q = I / V * O, yt = Math.max(_, Math.min(S, o.slide.value + Q));
+      o.slide.onChange(Math.round(yt)), n.startX = n.currentX, n.startY = n.currentY, u.preventDefault();
     }
   }, g = (u) => {
     if (!n.isDown) return;
-    const l = t(), b = l.hold?.delay ?? 300;
-    if (a(), l.tap && !n.hasMoved) {
+    const o = t(), b = o.hold?.delay ?? 300;
+    if (a(), o.tap && !n.hasMoved) {
       const v = Date.now() - n.startTime;
-      n.isDown && v < b && l.tap();
+      n.isDown && v < b && o.tap();
     }
     n.isDown = !1, n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.releasePointerCapture(u.pointerId);
   }, d = (u) => {
     a(), n.isDown = !1, n.hasMoved = !1, n.slideActive = !1, n.lockedAxis = null, u.currentTarget.releasePointerCapture(u.pointerId);
-  }, x = (u) => {
-    const l = t();
-    if (l.slide) {
-      const b = l.slide.orientation;
-      if (b === "horizontal") return F.slideHorizontal.css;
-      if (b === "vertical") return F.slideVertical.css;
+  }, h = (u) => {
+    const o = t();
+    if (o.slide) {
+      const b = o.slide.orientation;
+      if (b === "horizontal") return Y.slideHorizontal.css;
+      if (b === "vertical") return Y.slideVertical.css;
       const v = u.getBoundingClientRect();
-      return v.height > v.width ? F.slideVertical.css : F.slideHorizontal.css;
+      return v.height > v.width ? Y.slideVertical.css : Y.slideHorizontal.css;
     }
-    return l.tap ? F.tap.css : l.hold ? F.hold.css : "";
+    return o.tap ? Y.tap.css : o.hold ? Y.hold.css : "";
   };
   return {
-    onPointerDown: o,
+    onPointerDown: l,
     onPointerMove: c,
     onPointerUp: g,
     onPointerCancel: d,
     onPointerEnter: (u) => {
-      const l = u.currentTarget;
-      n.element = l, l.style.cursor = x(l);
+      const o = u.currentTarget;
+      n.element = o, o.style.cursor = h(o);
     },
     dispose: a
   };
 }
-function In(t) {
+function Rn(t) {
   return z(() => {
     const e = t.entities();
     if (e.length === 0) return;
@@ -1517,14 +1533,14 @@ function In(t) {
     return t.additionalData && Object.assign(n, t.additionalData), n;
   });
 }
-function Rn(t = {}) {
-  const [e, n] = U(!1), [i, r] = U(!1);
+function Gn(t = {}) {
+  const [e, n] = j(!1), [i, r] = j(!1);
   return {
-    save: async (o) => {
+    save: async (l) => {
       if (t.onSave) {
         n(!0);
         try {
-          await t.onSave(o), t.onSaveSuccess?.();
+          await t.onSave(l), t.onSaveSuccess?.();
         } finally {
           n(!1);
         }
@@ -1544,8 +1560,8 @@ function Rn(t = {}) {
     isDeleting: i
   };
 }
-function Gn(t = "edit") {
-  const [e, n] = U(!1), [i, r] = U(t);
+function Bn(t = "edit") {
+  const [e, n] = j(!1), [i, r] = j(t);
   return {
     showDialog: e,
     setShowDialog: n,
@@ -1567,15 +1583,15 @@ function Hn(t) {
     hasEntity: e
   };
 }
-function Bn(t) {
+function Ln(t) {
   const e = t.minEntities ?? 1, n = z(() => t.entities().length), i = z(() => n() >= e), r = z(() => !i() || !t.calculateGroupData ? null : t.calculateGroupData(t.entities())), a = z(() => {
     if (!i()) return;
-    const o = t.aggregationMode?.();
-    if (!o || o === "none") return;
+    const l = t.aggregationMode?.();
+    if (!l || l === "none") return;
     const c = t.entities();
-    if (o === "light" || o === "binary-sensor" || o === "switch")
+    if (l === "light" || l === "binary-sensor" || l === "switch")
       return we(c, t.allEntitiesMode);
-    if (o === "sensor") {
+    if (l === "sensor") {
       const g = t.sensorGroupType?.() ?? "mean";
       return $e(c, g, !0);
     }
@@ -1589,7 +1605,7 @@ function Bn(t) {
     count: n
   };
 }
-function Ln(t) {
+function Pn(t) {
   const [e] = zt({
     validate: Dt(t.schema),
     initialValues: t.initialValues
@@ -1606,9 +1622,9 @@ function Ln(t) {
     reset: _t
   };
 }
-const nt = ["xs", "sm", "md", "lg", "xl"];
+const it = ["xs", "sm", "md", "lg", "xl"];
 function jn() {
-  const t = R(), e = z(() => nt.indexOf(t.size())), n = z(() => {
+  const t = G(), e = z(() => it.indexOf(t.size())), n = z(() => {
     const c = t.size();
     return c === "xs" || c === "sm";
   }), i = z(() => {
@@ -1624,12 +1640,12 @@ function jn() {
     matches: (c) => {
       const g = c.trim();
       if (g.endsWith("+")) {
-        const d = g.slice(0, -1), x = nt.indexOf(d);
-        return x >= 0 && e() >= x;
+        const d = g.slice(0, -1), h = it.indexOf(d);
+        return h >= 0 && e() >= h;
       }
       if (g.endsWith("-")) {
-        const d = g.slice(0, -1), x = nt.indexOf(d);
-        return x >= 0 && e() <= x;
+        const d = g.slice(0, -1), h = it.indexOf(d);
+        return h >= 0 && e() <= h;
       }
       return t.size() === g;
     }
@@ -1653,7 +1669,7 @@ const M = {
   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"
-}, Pn = {
+}, Un = {
   ocean: "Ocean Breeze",
   sunset: "Sunset Glow",
   forest: "Forest Dawn",
@@ -1671,8 +1687,8 @@ const M = {
   sage: "Sage",
   copper: "Copper",
   dusk: "Dusk"
-}, Un = Object.keys(M);
-function gt(t) {
+}, Fn = Object.keys(M);
+function ft(t) {
   const e = Object.keys(M);
   let n = 0;
   for (const r of t)
@@ -1680,19 +1696,19 @@ function gt(t) {
   const i = Math.abs(n) % e.length;
   return e[i];
 }
-function Fn(t, e) {
+function Yn(t, e) {
   if (!t) {
-    const i = gt(e);
+    const i = ft(e);
     return M[i];
   }
   if (typeof t == "string" && t in M)
     return M[t];
   if (typeof t == "string")
     return t;
-  const n = gt(e);
+  const n = ft(e);
   return M[n];
 }
-const Y = {
+const X = {
   ocean: {
     gradient: M.ocean,
     bg: "bg-cyan-600/20",
@@ -1863,93 +1879,102 @@ const Y = {
       muted: "text-blue-400/60 dark:text-blue-300/60"
     }
   }
-}, Yn = {
-  unavailable: Y.steel,
-  active: Y.ocean,
-  inactive: Y.steel,
-  success: Y.forest,
-  warning: Y.ember,
-  error: Y.rose
+}, Xn = {
+  unavailable: X.steel,
+  active: X.ocean,
+  inactive: X.steel,
+  success: X.forest,
+  warning: X.ember,
+  error: X.rose
 };
-let rt = null;
+let at = null;
 function cn() {
-  return rt || (rt = getComputedStyle(document.documentElement)), rt;
+  return at || (at = getComputedStyle(document.documentElement)), at;
 }
-function Xn(t) {
+function Kn(t) {
   const e = t.startsWith("--") ? t : `--${t}`;
   return cn().getPropertyValue(e).trim();
 }
-function Kn() {
+function qn() {
   return document.documentElement.classList.contains("dark");
 }
-const qn = "0.2.0";
+const Zn = "0.2.0";
 export {
-  Pn as GRADIENT_NAMES,
+  Un as GRADIENT_NAMES,
   M as GRADIENT_PRESETS,
-  Un as GRADIENT_PRESET_KEYS,
-  En as Glow,
-  qn as SDK_VERSION,
-  j as WIDGET_Z,
+  Fn as GRADIENT_PRESET_KEYS,
+  On as Glow,
+  tr as GridSizeSchema,
+  er as PublishBodySchema,
+  nr as PublishConfirmSchema,
+  rr as PublishRequestSchema,
+  Zn as SDK_VERSION,
+  L as WIDGET_Z,
   P as Widget,
   Yt as WidgetContent,
-  it as WidgetCtx,
-  Vn as WidgetDialog,
+  st as WidgetCtx,
+  Wn as WidgetDialog,
   Jt as WidgetEmptyState,
   se as WidgetIcon,
-  xt as WidgetMetrics,
-  jt as WidgetSliderFill,
-  On as WidgetStack,
+  ir as WidgetManifestSchema,
+  bt as WidgetMetrics,
+  Pt as WidgetSliderFill,
+  Vn as WidgetStack,
   fe as WidgetStatus,
   xe as WidgetSubtitle,
   ye as WidgetTitle,
   De as WidgetValue,
-  Nn as allEntitiesInState,
-  Tn as anyEntityInState,
-  pn as applyCssVars,
-  kn as applyLayout,
-  at as builtInVariants,
+  Tn as allEntitiesInState,
+  En as anyEntityInState,
+  Sn as applyCssVars,
+  pn as applyLayout,
+  ot as builtInVariants,
   we as calculateLightGroup,
   $e as calculateSensorGroup,
   Tt as classicGlass,
-  w as cn,
+  y as cn,
   Ot as compactHorizontal,
-  $n as composeVariants,
-  An as countActiveEntities,
-  _n as countAvailableEntities,
-  Dn as countEntitiesByState,
-  Cn as createEmptyStateConfig,
+  kn as composeVariants,
+  Nn as countActiveEntities,
+  An as countAvailableEntities,
+  _n as countEntitiesByState,
+  Mn as createEmptyStateConfig,
   xn as createEntity,
-  Sn as createFlexLayout,
+  Cn as createFlexLayout,
   vn as defineWidget,
   ie as deriveAdaptiveIconColors,
-  wn as extendVariant,
+  $n as extendVariant,
+  ar as formatSchemaError,
   Se as formatValue,
   Vt as getBuiltInVariant,
-  yn as getBuiltInVariantIds,
-  zn as getEntityAttribute,
-  Mn as getEntityState,
-  Fn as getGradient,
-  gt as getGradientFromString,
+  wn as getBuiltInVariantIds,
+  Dn as getEntityAttribute,
+  zn as getEntityState,
+  Yn as getGradient,
+  ft as getGradientFromString,
   Ut as getSpacingClass,
-  Xn as getThemeToken,
-  Y as gradientColorPresets,
+  Kn as getThemeToken,
+  X as gradientColorPresets,
   Ce as interpretValue,
-  bn as isBuiltInVariant,
-  Kn as isDark,
+  yn as isBuiltInVariant,
+  qn as isDark,
   pe as isEntityActive,
   ke as isEntityAvailable,
-  st as mergeVariants,
+  lt as mergeVariants,
   Et as minimal,
+  sr as parseGridSize,
+  or as serializeGridSize,
   N as spacing,
-  Yn as stateColors,
-  B as typography,
-  In as useDebugData,
-  Rn as useWidgetConfig,
-  R as useWidgetContext,
-  Gn as useWidgetDialog,
+  Xn as stateColors,
+  H as typography,
+  Rn as useDebugData,
+  Gn as useWidgetConfig,
+  G as useWidgetContext,
+  Bn as useWidgetDialog,
   Hn as useWidgetEntity,
-  Bn as useWidgetEntityGroup,
-  Ln as useWidgetForm,
-  Wn as useWidgetGestures,
-  jn as useWidgetResponsive
+  Ln as useWidgetEntityGroup,
+  Pn as useWidgetForm,
+  In as useWidgetGestures,
+  jn as useWidgetResponsive,
+  bn as warnIfStub
 };