@glasshome/widget-sdk 0.4.2 → 0.5.0

package/dist/index.js

@@ -1,29 +1,29 @@
-import { z as L } from "zod";
-import { WidgetManifestSchema as nn, formatSchemaError as rn } from "./schemas.js";
-import { effect as T, className as N, style as Q, template as y, insert as p, setStyleProperty as A, memo as _, createComponent as M, addEventListener as q, use as ye, delegateEvents as $e } from "solid-js/web";
-import { createElementSize as Se } from "@solid-primitives/resize-observer";
-import { createContext as ke, useContext as fe, onMount as Ce, createSignal as U, createEffect as R, untrack as de, createMemo as V, splitProps as Me, on as ue, Show as j } from "solid-js";
-import { clsx as De } from "clsx";
-import { twMerge as ze } from "tailwind-merge";
-function me(e) {
-  return L.toJSONSchema(e, {
+import { z as A } from "zod";
+import { WidgetManifestSchema as Yt, formatSchemaError as Kt } from "./schemas.js";
+import { effect as W, className as P, style as ne, template as b, insert as w, createComponent as x, memo as D, setStyleProperty as Y, addEventListener as L, use as me, delegateEvents as ve } from "solid-js/web";
+import { createElementSize as we } from "@solid-primitives/resize-observer";
+import { createContext as be, useContext as se, Show as T, onMount as pe, createSignal as B, createMemo as j, splitProps as xe, createEffect as oe, on as ae } from "solid-js";
+import { clsx as ye } from "clsx";
+import { twMerge as $e } from "tailwind-merge";
+function ce(e) {
+  return A.toJSONSchema(e, {
     override: (t) => {
-      const r = L.globalRegistry.get(t.zodSchema);
-      return r && typeof r == "object" && Object.keys(r).length > 0 ? { ...t.jsonSchema, ...r } : t.jsonSchema;
+      const i = A.globalRegistry.get(t.zodSchema);
+      return i && typeof i == "object" && Object.keys(i).length > 0 ? { ...t.jsonSchema, ...i } : t.jsonSchema;
     }
   });
 }
-function _e(e) {
+function ke(e) {
   try {
     return e.parse({});
   } catch {
     return {};
   }
 }
-function Ut(e) {
-  return e.configSchema && (e.manifest.schema || (e.manifest.schema = me(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = _e(e.configSchema))), e;
+function Vt(e) {
+  return e.configSchema && (e.manifest.schema || (e.manifest.schema = ce(e.configSchema)), e.manifest.defaultConfig || (e.manifest.defaultConfig = ke(e.configSchema))), e;
 }
-const F = {
+const G = {
   /** Background layer (gradients, images, glows) */
   BACKGROUND: 0,
   /** Main content layer (icon, title, text) */
@@ -32,68 +32,72 @@ const F = {
   OVERLAY: 20,
   /** Action layer (buttons, edit controls) */
   ACTIONS: 30
-}, se = ke();
-function Y() {
-  const e = fe(se);
+}, te = be();
+function At() {
+  const e = se(te);
   if (!e)
     throw new Error("useWidgetContext must be used within a Widget component");
   return e;
 }
-const Te = `/* packages/public/widget-sdk/src/framework/theming/tokens.css
+const Ce = `/* Authoritative SDK CSS contract. Injected once on first Widget mount
+ * via framework/theming/tokens.ts.
  *
- * 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.
+ * All widget-internal visual scale is driven from CSS custom properties +
+ * container queries on the \`.glasshome-widget\` shell (\`container-type: size\`).
+ * No JS classifier, no size tier enum.
  */
 
-/* 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 */
+  --tone-success:  oklch(0.70 0.18 145);
+  --tone-warning:  oklch(0.80 0.17 75);
+  --tone-danger:   oklch(0.64 0.22 27);
+  --tone-info:     oklch(0.66 0.20 245);
+  --tone-neutral:  oklch(0.65 0.02 250);
+  --tone-accent:   oklch(0.74 0.18 60);
 
-  /* 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 */
+  --tone-success:  oklch(0.74 0.18 145);
+  --tone-warning:  oklch(0.82 0.17 75);
+  --tone-danger:   oklch(0.68 0.22 27);
+  --tone-info:     oklch(0.70 0.20 245);
+  --tone-neutral:  oklch(0.69 0.02 250);
+  --tone-accent:   oklch(0.78 0.18 60);
 
   --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) */
+/* === Widget shell ===
+ * Fluid scale tokens — tied to the shell's own container box (cqmin/cqi/cqb).
+ * Same input box → same output, so two widgets at the same grid cell match
+ * exactly. Tune multipliers / clamps to adjust density. */
 .glasshome-widget {
   --widget-color: var(--tone-neutral);
   --widget-glow-strength: var(--widget-glow-default);
-}
 
-/* === Phase 26 additions === */
+  --widget-icon-box:    clamp(28px, 22cqmin, 64px);
+  --widget-icon-glyph:  clamp(16px, 13cqmin, 36px);
+  --widget-pad:         clamp(8px,  4cqmin,  24px);
+  --widget-gap:         clamp(6px,  2cqmin,  16px);
+  --widget-title-size:  clamp(12px, 2cqi,    18px);
+  --widget-subtitle:    clamp(12px, 2.5cqi,  20px);
+  --widget-status-size: clamp(14px, 5cqi,    36px);
+  --widget-value-size:  clamp(18px, 7cqi,    48px);
+  --widget-badge-size:  clamp(11px, 1.6cqi,  14px);
+}
 
-/* VIS-P01 shell gradient + VIS-P02 inset highlight (D-02, D-03, D-06) */
 .glasshome-widget {
   background: var(--widget-gradient,
     linear-gradient(135deg,
@@ -104,54 +108,125 @@ const Te = `/* packages/public/widget-sdk/src/framework/theming/tokens.css
   box-shadow: inset 0 1px 0 var(--widget-border-highlight);
 }
 
-/* VIS-P03 icon channel rendering (D-16) */
+/* === Slot: content layout === */
+/* Default: column. Flip to row only on wide-and-short widgets (matches the
+ * old contentLayout heuristic: aspect > 1 AND height < 150px). */
+.glasshome-widget-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: var(--widget-pad);
+  gap: var(--widget-gap);
+  overflow: hidden;
+}
+@container widget (min-aspect-ratio: 1) and (max-height: 149px) {
+  .glasshome-widget-content {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+.glasshome-widget-content [class*="ml-auto"] {
+  position: relative;
+  z-index: 30;
+}
+
+/* === Slot: icon === */
 .glasshome-widget-icon {
+  width: var(--widget-icon-box);
+  height: var(--widget-icon-box);
+  border-radius: var(--radius-sm, 12px);
   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);
 }
+.glasshome-widget-icon-glyph {
+  font-size: var(--widget-icon-glyph);
+  line-height: 1;
+}
+.glasshome-widget-icon-stack {
+  position: absolute;
+  width: 102%;
+  height: 102%;
+  border-radius: var(--radius-sm, 12px);
+}
+.glasshome-widget-icon-stack-2 { bottom: -14%; right: -10%; opacity: 0.45; z-index: -2; }
+.glasshome-widget-icon-stack-3 { bottom: -28%; right: -20%; opacity: 0.20; z-index: -3; }
+
+/* === Slot: text === */
+.glasshome-widget-title {
+  font-size: var(--widget-title-size);
+  line-height: 1.2;
+  color: color-mix(in oklch, var(--color-foreground, currentColor) 60%, transparent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.glasshome-widget-subtitle {
+  font-size: var(--widget-subtitle);
+  color: color-mix(in oklch, var(--color-foreground, currentColor) 60%, transparent);
+}
+.glasshome-widget-status {
+  font-size: var(--widget-status-size);
+  font-weight: 700;
+  color: var(--color-foreground, currentColor);
+  line-height: 1.1;
+}
+.glasshome-widget-value {
+  font-size: var(--widget-value-size);
+  font-weight: 700;
+  color: var(--color-foreground, currentColor);
+  line-height: 1.05;
+}
+.glasshome-widget-badge {
+  font-size: var(--widget-badge-size);
+  font-weight: 500;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background: color-mix(in oklch, var(--color-foreground, currentColor) 20%, transparent);
+  color: var(--color-foreground, currentColor);
+}
 
-/* 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. */
+/* === Slider fill ===
+ * Value flows in via --widget-fill-value (0-100). Vertical orientation auto-
+ * detected via container query. */
 .glasshome-widget-slider-fill {
+  --widget-fill-value: 0;
   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);
+  clip-path: inset(0 calc((100 - var(--widget-fill-value)) * 1%) 0 0);
+}
+@container widget (max-aspect-ratio: 1) {
+  .glasshome-widget-slider-fill {
+    clip-path: inset(calc((100 - var(--widget-fill-value)) * 1%) 0 0 0);
+  }
 }
 `;
-let ie = !1;
-function Ee(e) {
-  if (ie) return;
+let Q = !1;
+function Se(e) {
+  if (Q) return;
   const t = e ?? (typeof document > "u" ? void 0 : document);
   if (!t) return;
   if (t.head.querySelector?.("style[data-glasshome-tokens]")) {
-    ie = !0;
+    Q = !0;
     return;
   }
-  const r = t.createElement("style");
-  r.setAttribute("data-glasshome-tokens", ""), r.textContent = Te, t.head.appendChild(r), ie = !0;
+  const i = t.createElement("style");
+  i.setAttribute("data-glasshome-tokens", ""), i.textContent = Ce, t.head.appendChild(i), Q = !0;
 }
-function E(...e) {
-  return ze(De(e));
+function H(...e) {
+  return $e(ye(e));
 }
-const Oe = {
+const Me = {
   id: "classic-glass",
   name: "Classic Glass",
   description: "Default glassmorphism design with blur background and gradient",
@@ -179,7 +254,7 @@ const Oe = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, Ne = {
+}, De = {
   id: "minimal",
   name: "Minimal",
   description: "Clean, minimal design with no background effects",
@@ -208,7 +283,7 @@ const Oe = {
     active: !1,
     focus: !0
   }
-}, Ve = {
+}, _e = {
   id: "compact-horizontal",
   name: "Compact Horizontal",
   description: "Horizontal layout for compact widgets",
@@ -236,331 +311,108 @@ const Oe = {
     hoverScale: 1.02,
     activeScale: 0.98
   }
-}, Pe = {
-  "classic-glass": Oe,
-  minimal: Ne,
-  "compact-horizontal": Ve
+}, ze = {
+  "classic-glass": Me,
+  minimal: De,
+  "compact-horizontal": _e
 };
-function We(e) {
-  return Pe[e];
+function Te(e) {
+  return ze[e];
 }
-var He = /* @__PURE__ */ y("<div>");
-function Le(e) {
-  const t = Y(), r = () => t.orientation() === "vertical" ? `inset(${100 - e.value}% 0 0 0)` : `inset(0 ${100 - e.value}% 0 0)`, o = () => {
-    const n = {
-      "clip-path": r(),
-      "z-index": F.BACKGROUND
-    };
-    return e.color && (n["--widget-icon-color"] = e.color), n;
-  };
+var Ee = /* @__PURE__ */ b("<div>");
+function Ne(e) {
   return (() => {
-    var n = He();
-    return T((i) => {
-      var a = E("glasshome-widget-slider-fill pointer-events-none absolute inset-0", e.isDragging ? "duration-0" : "transition-all duration-300 ease-out", e.class), c = o();
-      return a !== i.e && N(n, i.e = a), i.t = Q(n, c, i.t), i;
+    var t = Ee();
+    return W((i) => {
+      var r = H("glasshome-widget-slider-fill pointer-events-none absolute inset-0", e.isDragging ? "duration-0" : "transition-all duration-300 ease-out", e.class), n = {
+        "--widget-fill-value": e.value,
+        "z-index": G.BACKGROUND,
+        ...e.color ? {
+          "--widget-icon-color": e.color
+        } : {}
+      };
+      return r !== i.e && P(t, i.e = r), i.t = ne(t, n, i.t), i;
     }, {
       e: void 0,
       t: void 0
-    }), n;
+    }), t;
   })();
 }
-const X = {
-  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 }
-}, H = {
-  /** Extra small spacing (4-8px) */
-  S1: (e) => `${X.S1[e]}px`,
-  /** Small spacing (6-14px) - default for most layouts */
-  S2: (e) => `${X.S2[e]}px`,
-  /** Medium spacing (8-16px) */
-  S3: (e) => `${X.S3[e]}px`,
-  /** Large spacing (12-20px) */
-  S4: (e) => `${X.S4[e]}px`,
-  /** Icon container size in pixels */
-  icon: (e) => ({
-    xs: 32,
-    // 1x1, 1x2 widgets
-    sm: 40,
-    // 2x1, 2x2 widgets (current WidgetIcon default)
-    md: 48,
-    // 2x3, 2x4 widgets
-    lg: 52,
-    // 2x6, 3x6, 4x2 widgets
-    xl: 56
-    // 4x4 widgets
-  })[e],
-  /** Icon stroke size for lucide icons */
-  iconSize: (e) => ({
-    xs: 18,
-    // Smaller stroke for tiny widgets
-    sm: 20,
-    // Current WidgetIcon default (size-5 = 20px)
-    md: 24,
-    // Medium widgets
-    lg: 26,
-    // Large widgets
-    xl: 28
-    // Extra large widgets
-  })[e],
-  /** Spacing between icon and title */
-  iconToTitle: (e) => ({
-    xs: "8px",
-    // Tight spacing for small widgets
-    sm: "10px",
-    // Slightly more room
-    md: "12px",
-    // Current pattern from LockWidget (@[300px]:mt-3 = 12px)
-    lg: "14px",
-    // More breathing room
-    xl: "16px"
-    // Maximum spacing (@[400px]:mt-4 = 16px)
-  })[e],
-  /** Container padding */
-  container: (e) => ({
-    xs: "8px",
-    // Minimal padding for tiny widgets
-    sm: "16px",
-    // Current BaseWidget default (p-4 = 16px)
-    md: "16px",
-    lg: "20px",
-    // More padding for larger widgets
-    xl: "20px"
-  })[e]
-}, Ae = {
-  4: "gap-1",
-  6: "gap-1.5",
-  8: "gap-2",
-  10: "gap-2.5",
-  12: "gap-3",
-  14: "gap-3.5",
-  16: "gap-4",
-  18: "gap-[18px]",
-  20: "gap-5"
-};
-function Ie(e, t) {
-  const r = X[e][t];
-  return Ae[r] || `gap-[${r}px]`;
-}
-var Re = /* @__PURE__ */ y("<div>");
-function Ge(e) {
-  const t = Y();
+var Oe = /* @__PURE__ */ b("<div>");
+function Ve(e) {
   return (() => {
-    var r = Re();
-    return p(r, () => e.children), T((o) => {
-      var n = E(
-        "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",
-        Ie("S3", t.size()),
-        e.class
-      ), i = H.container(t.size()), a = F.CONTENT;
-      return n !== o.e && N(r, o.e = n), i !== o.t && A(r, "padding", o.t = i), a !== o.a && A(r, "z-index", o.a = a), o;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    }), r;
+    var t = Oe();
+    return w(t, () => e.children), W(() => P(t, H("glasshome-widget-content", e.class))), t;
   })();
 }
-var Ue = /* @__PURE__ */ y('<div><div class="flex items-center justify-center">'), ge = /* @__PURE__ */ y('<div class="glasshome-widget-icon absolute">');
-function Be(e) {
-  const t = Y(), r = () => {
-    const n = {
-      width: `${H.icon(t.size())}px`,
-      height: `${H.icon(t.size())}px`,
-      "border-radius": "var(--radius-sm, 12px)"
-    };
-    return e.color && (n["--widget-icon-color"] = e.color), n;
-  }, o = (n, i, a) => ({
-    width: `${H.icon(t.size()) * 1.02}px`,
-    height: `${H.icon(t.size()) * 1.02}px`,
-    "border-radius": "var(--radius-sm, 12px)",
-    bottom: `${-H.icon(t.size()) * n}px`,
-    right: `${-H.icon(t.size()) * (n * 0.71)}px`,
-    "z-index": i,
-    opacity: a
-  });
+var Ae = /* @__PURE__ */ b('<div class="glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-2">'), We = /* @__PURE__ */ b('<div class="glasshome-widget-icon glasshome-widget-icon-stack glasshome-widget-icon-stack-3">'), He = /* @__PURE__ */ b('<div><div class="glasshome-widget-icon-glyph flex items-center justify-center">');
+function Pe(e) {
+  const t = () => e.entityCount ?? 1;
   return (() => {
-    var n = Ue(), i = n.firstChild;
-    return p(n, (() => {
-      var a = _(() => (e.entityCount ?? 1) >= 2);
-      return () => a() && (() => {
-        var c = ge();
-        return T((x) => Q(c, o(0.14, -2, 0.45), x)), c;
-      })();
-    })(), i), p(n, (() => {
-      var a = _(() => (e.entityCount ?? 1) >= 3);
-      return () => a() && (() => {
-        var c = ge();
-        return T((x) => Q(c, o(0.28, -3, 0.2), x)), c;
-      })();
-    })(), i), p(i, () => e.icon), T((a) => {
-      var c = E("glasshome-widget-icon", "relative flex shrink-0 items-center justify-center transition-all", "pointer-events-none", e.dimmed && "opacity-50", e.class), x = r(), w = `${H.iconSize(t.size())}px`;
-      return c !== a.e && N(n, a.e = c), a.t = Q(n, x, a.t), w !== a.a && A(i, "font-size", a.a = w), a;
+    var i = He(), r = i.firstChild;
+    return w(i, x(T, {
+      get when() {
+        return t() >= 2;
+      },
+      get children() {
+        return Ae();
+      }
+    }), r), w(i, x(T, {
+      get when() {
+        return t() >= 3;
+      },
+      get children() {
+        return We();
+      }
+    }), r), w(r, () => e.icon), W((n) => {
+      var a = H("glasshome-widget-icon", "relative flex shrink-0 items-center justify-center pointer-events-none transition-all", e.dimmed && "opacity-50", e.class), h = e.color ? {
+        "--widget-icon-color": e.color
+      } : void 0;
+      return a !== n.e && P(i, n.e = a), n.t = ne(i, h, n.t), n;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0
-    }), n;
+      t: void 0
+    }), i;
   })();
 }
-const Z = {
-  /** Container base text sizing */
-  container: (e) => ({
-    xs: "text-xs",
-    // Smallest widgets
-    sm: "text-sm",
-    // Small widgets
-    md: "text-base",
-    // Medium widgets
-    lg: "text-base",
-    // Large widgets
-    xl: "text-lg"
-    // Extra large widgets
-  })[e],
-  /** Title text sizing (main heading) */
-  title: (e) => ({
-    xs: "text-xs",
-    // 12px - Very compact
-    sm: "text-xs",
-    // 12px - Stay small
-    md: "text-sm",
-    // 14px - More readable (@[300px] equivalent)
-    lg: "text-sm",
-    // 14px - Maintain size
-    xl: "text-sm"
-    // 14px - Don't go too large for secondary text
-  })[e],
-  /** Subtitle/secondary text sizing */
-  subtitle: (e) => ({
-    xs: "text-xs",
-    // 12px - Very compact
-    sm: "text-sm",
-    // 12px - Stay small
-    md: "text-base",
-    // 14px - More readable (@[300px] equivalent)
-    lg: "text-base",
-    // 14px - Maintain size
-    xl: "text-base"
-    // 14px - Don't go too large for secondary text
-  })[e],
-  /** Value display text sizing (large numbers) */
-  value: (e) => ({
-    xs: "text-lg",
-    // 18px - Still readable on small widgets
-    sm: "text-xl",
-    // 20px - Slightly larger
-    md: "text-2xl",
-    // 24px - Prominent
-    lg: "text-3xl",
-    // 30px - Very prominent
-    xl: "text-4xl"
-    // 36px - Maximum impact
-  })[e],
-  /** Badge text sizing (entity count badges) */
-  badge: (e) => ({
-    xs: "text-xs",
-    // 12px - Compact badge
-    sm: "text-xs",
-    // 12px - Keep small
-    md: "text-xs",
-    // 12px - Badges should stay small
-    lg: "text-sm",
-    // 14px - Slightly larger for readability
-    xl: "text-sm"
-    // 14px - Maximum badge size
-  })[e],
-  /** Metric label text sizing */
-  metricLabel: (e) => ({
-    xs: "text-xs",
-    // 12px - Compact labels
-    sm: "text-xs",
-    // 12px
-    md: "text-xs",
-    // 12px - Labels stay small
-    lg: "text-sm",
-    // 14px - More readable on large widgets
-    xl: "text-sm"
-    // 14px
-  })[e],
-  /** Metric value text sizing */
-  metricValue: (e) => ({
-    xs: "text-sm",
-    // 14px - Readable metric values
-    sm: "text-sm",
-    // 14px
-    md: "text-sm",
-    // 14px - Keep metrics compact
-    lg: "text-base",
-    // 16px - Slightly larger
-    xl: "text-base"
-    // 16px
-  })[e],
-  /** Status text (same as subtitle but semantic) */
-  status: (e) => ({
-    xs: "text-md",
-    sm: "text-xl",
-    md: "text-2xl",
-    lg: "text-3xl",
-    xl: "text-3xl"
-  })[e],
-  /** Empty state message text */
-  emptyState: (e) => ({
-    xs: "text-xs",
-    // 12px
-    sm: "text-sm",
-    // 14px
-    md: "text-sm",
-    // 14px
-    lg: "text-base",
-    // 16px
-    xl: "text-base"
-    // 16px
-  })[e]
-};
-var je = /* @__PURE__ */ y("<p>");
-function Fe(e) {
-  const t = Y();
+var Re = /* @__PURE__ */ b("<p>");
+function Ue(e) {
   return (() => {
-    var r = je();
-    return p(r, (() => {
-      var o = _(() => !!e.isUnavailable);
-      return () => o() ? "Unavailable" : e.children;
-    })()), T((o) => {
-      var n = E("relative font-bold text-foreground", e.dimmed && "opacity-40", Z.status(t.size()), e.class), i = F.ACTIONS;
-      return n !== o.e && N(r, o.e = n), i !== o.t && A(r, "z-index", o.t = i), o;
+    var t = Re();
+    return w(t, (() => {
+      var i = D(() => !!e.isUnavailable);
+      return () => i() ? "Unavailable" : e.children;
+    })()), W((i) => {
+      var r = H("glasshome-widget-status", "relative", e.dimmed && "opacity-40", e.class), n = G.ACTIONS;
+      return r !== i.e && P(t, i.e = r), n !== i.t && Y(t, "z-index", i.t = n), i;
     }, {
       e: void 0,
       t: void 0
-    }), r;
+    }), t;
   })();
 }
-var Ye = /* @__PURE__ */ y("<div><h3>"), Ke = /* @__PURE__ */ y("<span>");
-function qe(e) {
-  const t = Y();
+var je = /* @__PURE__ */ b('<span class="glasshome-widget-badge shrink-0">'), Be = /* @__PURE__ */ b("<div><h3 class=glasshome-widget-title>");
+function Ie(e) {
   return (() => {
-    var r = Ye(), o = r.firstChild;
-    return p(o, () => e.children), p(r, (() => {
-      var n = _(() => e.badge !== void 0 && e.badge > 0);
-      return () => n() && (() => {
-        var i = Ke();
-        return p(i, () => e.badge), T(() => N(i, E("shrink-0 rounded-full bg-foreground/20 px-2 py-0.5 font-medium text-foreground", Z.badge(t.size())))), i;
-      })();
-    })(), null), T((n) => {
-      var i = E("relative flex items-center", e.class), a = H.S1(t.size()), c = F.ACTIONS, x = E("truncate text-foreground/60", Z.title(t.size()));
-      return i !== n.e && N(r, n.e = i), a !== n.t && A(r, "gap", n.t = a), c !== n.a && A(r, "z-index", n.a = c), x !== n.o && N(o, n.o = x), n;
+    var t = Be(), i = t.firstChild;
+    return w(i, () => e.children), w(t, x(T, {
+      get when() {
+        return D(() => e.badge !== void 0)() && e.badge > 0;
+      },
+      get children() {
+        var r = je();
+        return w(r, () => e.badge), r;
+      }
+    }), null), W((r) => {
+      var n = H("relative flex items-center gap-2", e.class), a = G.ACTIONS;
+      return n !== r.e && P(t, r.e = n), a !== r.t && Y(t, "z-index", r.t = a), r;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    }), r;
+      t: void 0
+    }), t;
   })();
 }
-function Xe(e, t = !1) {
+function Le(e, t = !1) {
   if (e.length === 0)
     return {
       isGroup: !1,
@@ -574,64 +426,64 @@ function Xe(e, t = !1) {
       totalCount: 0,
       description: "No entities"
     };
-  const r = e.length > 1;
-  if (!r) {
-    const m = e[0], l = m.state === "on", k = m.attributes?.brightness || 0, b = Math.round(k / 255 * 100);
+  const i = e.length > 1;
+  if (!i) {
+    const v = e[0], S = v.state === "on", O = v.attributes?.brightness || 0, M = Math.round(O / 255 * 100);
     return {
       isGroup: !1,
-      state: m.state,
-      isOn: l,
-      isUnavailable: m.state === "unavailable",
-      brightness: k,
-      brightnessPercent: b,
-      color: he(m),
-      onCount: l ? 1 : 0,
+      state: v.state,
+      isOn: S,
+      isUnavailable: v.state === "unavailable",
+      brightness: O,
+      brightnessPercent: M,
+      color: le(v),
+      onCount: S ? 1 : 0,
       totalCount: 1,
-      description: l ? "On" : "Off"
+      description: S ? "On" : "Off"
     };
   }
-  let o = 0, n = 0, i = 0, a = 0, c = 0, x = 0;
-  const w = [];
-  for (const m of e)
-    switch (m.state) {
+  let r = 0, n = 0, a = 0, h = 0, u = 0, p = 0;
+  const y = [];
+  for (const v of e)
+    switch (v.state) {
       case "on":
-        o++, m.attributes?.brightness !== void 0 && (c += m.attributes.brightness, x++), m.attributes?.rgb_color && w.push(m.attributes.rgb_color);
+        r++, v.attributes?.brightness !== void 0 && (u += v.attributes.brightness, p++), v.attributes?.rgb_color && y.push(v.attributes.rgb_color);
         break;
       case "off":
         n++;
         break;
       case "unknown":
-        i++;
+        a++;
         break;
       case "unavailable":
-        a++;
+        h++;
         break;
     }
-  const v = e.length, S = a === v, W = i + a === v, g = o > 0, f = o === v, D = n === v;
-  let $, C;
-  t ? S ? ($ = "unavailable", C = !1) : i > 0 || a > 0 ? ($ = "unknown", C = !1) : n > 0 ? ($ = "off", C = !1) : ($ = "on", C = !0) : S ? ($ = "unavailable", C = !1) : W ? ($ = "unknown", C = !1) : g ? ($ = "on", C = !0) : ($ = "off", C = !1);
-  const I = x > 0 ? Math.round(c / x) : 0, B = Math.round(I / 255 * 100);
-  let u;
-  if (w.length > 0) {
-    const m = Math.round(w.reduce((s, z) => s + z[0], 0) / w.length), l = Math.round(w.reduce((s, z) => s + z[1], 0) / w.length), k = Math.round(w.reduce((s, z) => s + z[2], 0) / w.length), b = I / 255;
-    u = `rgb(${Math.round(m * b)}, ${Math.round(l * b)}, ${Math.round(k * b)})`;
+  const m = e.length, $ = h === m, E = a + h === m, d = r > 0, l = r === m, k = n === m;
+  let f, C;
+  t ? $ ? (f = "unavailable", C = !1) : a > 0 || h > 0 ? (f = "unknown", C = !1) : n > 0 ? (f = "off", C = !1) : (f = "on", C = !0) : $ ? (f = "unavailable", C = !1) : E ? (f = "unknown", C = !1) : d ? (f = "on", C = !0) : (f = "off", C = !1);
+  const N = p > 0 ? Math.round(u / p) : 0, R = Math.round(N / 255 * 100);
+  let c;
+  if (y.length > 0) {
+    const v = Math.round(y.reduce((s, _) => s + _[0], 0) / y.length), S = Math.round(y.reduce((s, _) => s + _[1], 0) / y.length), O = Math.round(y.reduce((s, _) => s + _[2], 0) / y.length), M = N / 255;
+    c = `rgb(${Math.round(v * M)}, ${Math.round(S * M)}, ${Math.round(O * M)})`;
   } else
-    u = he(e[0]);
-  let h;
-  return f ? h = "All on" : D ? h = "All off" : o > 0 ? h = `${o} of ${v} on` : h = "Off", {
-    isGroup: r,
-    state: $,
+    c = le(e[0]);
+  let g;
+  return l ? g = "All on" : k ? g = "All off" : r > 0 ? g = `${r} of ${m} on` : g = "Off", {
+    isGroup: i,
+    state: f,
     isOn: C,
-    isUnavailable: $ === "unavailable",
-    brightness: I,
-    brightnessPercent: B,
-    color: u,
-    onCount: o,
-    totalCount: v,
-    description: h
+    isUnavailable: f === "unavailable",
+    brightness: N,
+    brightnessPercent: R,
+    color: c,
+    onCount: r,
+    totalCount: m,
+    description: g
   };
 }
-function Je(e, t = "mean", r = !0) {
+function Fe(e, t = "mean", i = !0) {
   if (e.length === 0)
     return {
       isGroup: !1,
@@ -640,114 +492,114 @@ function Je(e, t = "mean", r = !0) {
       isUnavailable: !0,
       description: "No entities"
     };
-  const o = e.length > 1;
-  if (!o) {
-    const g = e[0], f = Number.parseFloat(g.state);
-    let D = g.state;
-    return Number.isNaN(f) || (D = Number.isInteger(f) ? f.toString() : f.toFixed(1)), {
+  const r = e.length > 1;
+  if (!r) {
+    const d = e[0], l = Number.parseFloat(d.state);
+    let k = d.state;
+    return Number.isNaN(l) || (k = Number.isInteger(l) ? l.toString() : l.toFixed(1)), {
       isGroup: !1,
-      state: D,
-      numericValue: Number.isNaN(f) ? null : f,
-      isUnavailable: g.state === "unavailable",
-      unit: g.unitOfMeasurement ?? void 0,
-      description: D
+      state: k,
+      numericValue: Number.isNaN(l) ? null : l,
+      isUnavailable: d.state === "unavailable",
+      unit: d.unitOfMeasurement ?? void 0,
+      description: k
     };
   }
-  const n = [], i = [];
-  let a = 0, c;
-  for (const g of e) {
-    if (!c && g.unitOfMeasurement && (c = g.unitOfMeasurement), g.state === "unavailable") {
-      a++, i.push({
-        entityId: g.id,
+  const n = [], a = [];
+  let h = 0, u;
+  for (const d of e) {
+    if (!u && d.unitOfMeasurement && (u = d.unitOfMeasurement), d.state === "unavailable") {
+      h++, a.push({
+        entityId: d.id,
         value: "unavailable",
-        friendly_name: g.friendlyName
+        friendly_name: d.friendlyName
       });
       continue;
     }
-    const f = Number.parseFloat(g.state);
-    isNaN(f) ? r || i.push({
-      entityId: g.id,
-      value: g.state,
-      friendly_name: g.friendlyName
-    }) : (n.push(f), i.push({
-      entityId: g.id,
-      value: f,
-      friendly_name: g.friendlyName
+    const l = Number.parseFloat(d.state);
+    isNaN(l) ? i || a.push({
+      entityId: d.id,
+      value: d.state,
+      friendly_name: d.friendlyName
+    }) : (n.push(l), a.push({
+      entityId: d.id,
+      value: l,
+      friendly_name: d.friendlyName
     }));
   }
-  const x = a === e.length, w = n.length === 0;
-  if (x || w)
+  const p = h === e.length, y = n.length === 0;
+  if (p || y)
     return {
-      isGroup: o,
-      state: x ? "unavailable" : "unknown",
+      isGroup: r,
+      state: p ? "unavailable" : "unknown",
       numericValue: null,
-      isUnavailable: x,
-      unit: c,
-      description: x ? "Unavailable" : "No numeric values",
-      memberValues: i
+      isUnavailable: p,
+      unit: u,
+      description: p ? "Unavailable" : "No numeric values",
+      memberValues: a
     };
-  let v, S;
+  let m, $;
   switch (t) {
     case "min":
-      v = Math.min(...n), S = "Minimum";
+      m = Math.min(...n), $ = "Minimum";
       break;
     case "max":
-      v = Math.max(...n), S = "Maximum";
+      m = Math.max(...n), $ = "Maximum";
       break;
     case "mean":
-      v = n.reduce((g, f) => g + f, 0) / n.length, S = "Average";
+      m = n.reduce((d, l) => d + l, 0) / n.length, $ = "Average";
       break;
     case "median": {
-      const g = [...n].sort((D, $) => D - $), f = Math.floor(g.length / 2);
-      v = g.length % 2 === 0 ? (g[f - 1] + g[f]) / 2 : g[f], S = "Median";
+      const d = [...n].sort((k, f) => k - f), l = Math.floor(d.length / 2);
+      m = d.length % 2 === 0 ? (d[l - 1] + d[l]) / 2 : d[l], $ = "Median";
       break;
     }
     case "sum":
-      v = n.reduce((g, f) => g + f, 0), S = "Sum";
+      m = n.reduce((d, l) => d + l, 0), $ = "Sum";
       break;
     case "last":
-      v = n[n.length - 1], S = "Latest";
+      m = n[n.length - 1], $ = "Latest";
       break;
     case "range":
-      v = Math.max(...n) - Math.min(...n), S = "Range";
+      m = Math.max(...n) - Math.min(...n), $ = "Range";
       break;
     case "product":
-      v = n.reduce((g, f) => g * f, 1), S = "Product";
+      m = n.reduce((d, l) => d * l, 1), $ = "Product";
       break;
     case "std_dev": {
-      const g = n.reduce((D, $) => D + $, 0) / n.length, f = n.reduce((D, $) => D + ($ - g) ** 2, 0) / n.length;
-      v = Math.sqrt(f), S = "Std Dev";
+      const d = n.reduce((k, f) => k + f, 0) / n.length, l = n.reduce((k, f) => k + (f - d) ** 2, 0) / n.length;
+      m = Math.sqrt(l), $ = "Std Dev";
       break;
     }
     default:
-      v = n.reduce((g, f) => g + f, 0) / n.length, S = "Average";
+      m = n.reduce((d, l) => d + l, 0) / n.length, $ = "Average";
   }
-  const W = Number.isInteger(v) ? v.toString() : v.toFixed(1);
+  const E = Number.isInteger(m) ? m.toString() : m.toFixed(1);
   return {
-    isGroup: o,
-    state: W,
-    numericValue: v,
+    isGroup: r,
+    state: E,
+    numericValue: m,
     isUnavailable: !1,
-    unit: c,
-    description: `${S} of ${n.length}`,
-    memberValues: i
+    unit: u,
+    description: `${$} of ${n.length}`,
+    memberValues: a
   };
 }
-function he(e) {
+function le(e) {
   if (e.state !== "on") return "rgb(100, 100, 100)";
-  const r = (e.attributes?.brightness ?? 255) / 255;
+  const i = (e.attributes?.brightness ?? 255) / 255;
   if (e.attributes?.rgb_color) {
-    const [o, n, i] = e.attributes.rgb_color;
-    return `rgb(${Math.round(o * r)}, ${Math.round(n * r)}, ${Math.round(i * r)})`;
+    const [r, n, a] = e.attributes.rgb_color;
+    return `rgb(${Math.round(r * i)}, ${Math.round(n * i)}, ${Math.round(a * i)})`;
   }
   if (e.attributes?.color_temp) {
     const n = 1e6 / e.attributes.color_temp / 100;
-    let i, a, c;
-    return n <= 66 ? (i = 255, a = n <= 19 ? 0 : 99.4708025861 * Math.log(n - 10) - 161.1195681661, c = n <= 19 ? 0 : n <= 66 ? 138.5177312231 * Math.log(n - 10) - 305.0447927307 : 255) : (i = 329.698727446 * (n - 60) ** -0.1332047592, a = 288.1221695283 * (n - 60) ** -0.0755148492, c = 255), i = Math.max(0, Math.min(255, i)) * r, a = Math.max(0, Math.min(255, a)) * r, c = Math.max(0, Math.min(255, c)) * r, `rgb(${Math.round(i)}, ${Math.round(a)}, ${Math.round(c)})`;
+    let a, h, u;
+    return n <= 66 ? (a = 255, h = n <= 19 ? 0 : 99.4708025861 * Math.log(n - 10) - 161.1195681661, u = n <= 19 ? 0 : n <= 66 ? 138.5177312231 * Math.log(n - 10) - 305.0447927307 : 255) : (a = 329.698727446 * (n - 60) ** -0.1332047592, h = 288.1221695283 * (n - 60) ** -0.0755148492, u = 255), a = Math.max(0, Math.min(255, a)) * i, h = Math.max(0, Math.min(255, h)) * i, u = Math.max(0, Math.min(255, u)) * i, `rgb(${Math.round(a)}, ${Math.round(h)}, ${Math.round(u)})`;
   }
-  return `rgb(${Math.round(255 * r)}, ${Math.round(220 * r)}, ${Math.round(180 * r)})`;
+  return `rgb(${Math.round(255 * i)}, ${Math.round(220 * i)}, ${Math.round(180 * i)})`;
 }
-function Qe(e) {
+function Ge(e) {
   if (!e) return !1;
   if (["on", "open", "locked", "home", "playing", "active"].includes(e.state))
     return !0;
@@ -757,118 +609,63 @@ function Qe(e) {
   }
   return !1;
 }
-function Bt(e, t, r) {
-  return e?.attributes ? e.attributes[t] ?? r : r;
+function Wt(e, t, i) {
+  return e?.attributes ? e.attributes[t] ?? i : i;
 }
-function jt(e) {
-  return e.filter(Qe).length;
+function Ht(e) {
+  return e.filter(Ge).length;
 }
-function Ze(e, t, r) {
-  const { decimals: o, scale: n = !0 } = {};
+function qe(e, t, i) {
+  const { decimals: r, scale: n = !0 } = {};
   if (typeof e == "string")
     return t ? `${e}${t}` : e;
   if (e == null || Number.isNaN(e))
     return t ? `--${t}` : "--";
-  let i = e, a = t || "";
-  n && t && (t === "W" || t === "kW" || t === "MW") && (e >= 1e6 ? (i = e / 1e6, a = "MW") : e >= 1e3 ? (i = e / 1e3, a = "kW") : a = "W"), n && t && (t === "B" || t === "KB" || t === "MB" || t === "GB") && (e >= 1073741824 ? (i = e / 1073741824, a = "GB") : e >= 1048576 ? (i = e / 1048576, a = "MB") : e >= 1024 ? (i = e / 1024, a = "KB") : a = "B");
-  let c;
-  return o !== void 0 ? c = i.toFixed(o) : i !== e ? c = i.toFixed(1) : Number.isInteger(e) ? c = e.toString() : c = Number.parseFloat(e.toFixed(2)).toString(), a ? `${c}${a}` : c;
+  let a = e, h = t || "";
+  n && t && (t === "W" || t === "kW" || t === "MW") && (e >= 1e6 ? (a = e / 1e6, h = "MW") : e >= 1e3 ? (a = e / 1e3, h = "kW") : h = "W"), n && t && (t === "B" || t === "KB" || t === "MB" || t === "GB") && (e >= 1073741824 ? (a = e / 1073741824, h = "GB") : e >= 1048576 ? (a = e / 1048576, h = "MB") : e >= 1024 ? (a = e / 1024, h = "KB") : h = "B");
+  let u;
+  return r !== void 0 ? u = a.toFixed(r) : a !== e ? u = a.toFixed(1) : Number.isInteger(e) ? u = e.toString() : u = Number.parseFloat(e.toFixed(2)).toString(), h ? `${u}${h}` : u;
 }
-function et(e, t) {
+function Ye(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 tt = /* @__PURE__ */ y("<div><div>"), nt = /* @__PURE__ */ y("<div>");
-function rt(e) {
-  const t = Y();
+var Ke = /* @__PURE__ */ b("<div class=glasshome-widget-subtitle>"), Xe = /* @__PURE__ */ b("<div><div class=glasshome-widget-value>");
+function Je(e) {
   return (() => {
-    var r = tt(), o = r.firstChild;
-    return p(o, () => Ze(e.value, e.unit)), p(r, (() => {
-      var n = _(() => !!(e.interpret && typeof e.value == "number"));
-      return () => n() && (() => {
-        var i = nt();
-        return p(i, () => et(e.value, e.unit)), T((a) => {
-          var c = E("text-foreground/60", Z.subtitle(t.size())), x = H.S1(t.size());
-          return c !== a.e && N(i, a.e = c), x !== a.t && A(i, "margin-top", a.t = x), a;
-        }, {
-          e: void 0,
-          t: void 0
-        }), i;
-      })();
-    })(), null), T((n) => {
-      var i = E("flex flex-col", e.class), a = E("font-bold text-foreground", Z.value(t.size()));
-      return i !== n.e && N(r, n.e = i), a !== n.t && N(o, n.t = a), n;
-    }, {
-      e: void 0,
-      t: void 0
-    }), r;
+    var t = Xe(), i = t.firstChild;
+    return w(i, () => qe(e.value, e.unit)), w(t, x(T, {
+      get when() {
+        return D(() => !!e.interpret)() && typeof e.value == "number";
+      },
+      get children() {
+        var r = Ke();
+        return w(r, () => Ye(e.value, e.unit)), r;
+      }
+    }), null), W(() => P(t, H("flex flex-col", e.class))), t;
   })();
 }
-var it = /* @__PURE__ */ y('<div><div class="relative h-full w-full">'), ot = /* @__PURE__ */ y('<div class="glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse">'), at = /* @__PURE__ */ y('<div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">'), st = /* @__PURE__ */ y('<div class="flex items-center justify-center text-white/30">'), lt = /* @__PURE__ */ y('<h3 class="font-semibold text-sm text-white/60">'), ct = /* @__PURE__ */ y('<p class="text-white/50 text-xs">');
-function dt(e, t) {
-  const r = e * t;
-  return r <= 2 ? "xs" : r <= 4 ? "sm" : r <= 8 ? "md" : r <= 18 ? "lg" : "xl";
-}
-function ut(e, t) {
-  return e > t ? "horizontal" : t > e ? "vertical" : "square";
-}
-function gt(e, t) {
-  return t >= 150 ? "vertical" : e > t ? "horizontal" : t > e ? "vertical" : "square";
-}
-function ht(e) {
-  Ce(() => {
-    Ee();
-  });
-  let t;
-  const r = Se(() => t), o = 2, [n, i] = U(0), [a, c] = U(0);
-  R(() => {
-    const l = Math.round(r.width ?? 0), k = Math.round(r.height ?? 0), b = de(n), s = de(a);
-    (Math.abs(l - b) > o || Math.abs(k - s) > o) && (i(l), c(k));
+var Qe = /* @__PURE__ */ b('<div><div class="relative h-full w-full">'), Ze = /* @__PURE__ */ b('<div class="glasshome-widget-loading pointer-events-none absolute inset-0 animate-pulse">'), et = /* @__PURE__ */ b('<div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">'), tt = /* @__PURE__ */ b('<div class="flex items-center justify-center text-white/30">'), nt = /* @__PURE__ */ b('<h3 class="font-semibold text-sm text-white/60">'), it = /* @__PURE__ */ b('<p class="text-white/50 text-xs">');
+function rt(e) {
+  pe(() => {
+    Se();
   });
-  const x = V(() => {
-    if (e.variant)
-      return typeof e.variant == "string" ? We(e.variant) : e.variant;
-  }), w = V(() => ({
-    width: n(),
-    height: a(),
-    gridWidth: Math.max(1, Math.round(n() / 150)),
-    gridHeight: Math.max(1, Math.round(a() / 75))
-  }), void 0, {
-    equals: (l, k) => l.width === k.width && l.height === k.height && l.gridWidth === k.gridWidth && l.gridHeight === k.gridHeight
-  }), v = V(() => {
-    const l = w();
-    return dt(l.gridWidth, l.gridHeight);
-  }), S = V(() => {
-    const l = w();
-    return ut(l.width, l.height);
-  }), W = V(() => {
-    const l = w();
-    return gt(l.width, l.height);
-  }), g = fe(se), f = g;
-  f?._isStub?.() && f._bridge && (R(() => {
-    f._bridge.setSize(v());
-  }), R(() => {
-    f._bridge.setOrientation(S());
-  }), R(() => {
-    f._bridge.setContentLayout(W());
-  }), R(() => {
-    f._bridge.setDimensions(w());
-  }), R(() => {
-    f._bridge.setIsStub(!1);
-  }));
-  const D = {
-    size: v,
-    orientation: S,
-    contentLayout: W,
-    dimensions: w,
+  const t = se(te), [i, r] = B(), n = we(i), a = {
     isEditMode: () => e.isEditMode ?? !1,
-    updateConfig: g?.updateConfig ?? (() => {
+    updateConfig: t?.updateConfig ?? (() => {
+    }),
+    dimensions: () => ({
+      width: n.width ?? 0,
+      height: n.height ?? 0
     })
-  }, $ = V(() => ({
+  }, h = j(() => {
+    if (e.variant)
+      return typeof e.variant == "string" ? Te(e.variant) : e.variant;
+  }), u = j(() => ({
     "container-type": "size",
     "container-name": "widget",
     "touch-action": e.gestures && !e.isEditMode ? e.gestures.touchAction() : void 0,
-    ...x()?.styles?.container,
-    ...x()?.styles?.cssVars || {},
+    ...h()?.styles?.container,
+    ...h()?.styles?.cssVars || {},
     ...e.tone ? {
       "--widget-color": `var(--tone-${e.tone})`
     } : {},
@@ -881,26 +678,26 @@ function ht(e) {
     ...e.gradient ? {
       "--widget-gradient": e.gradient
     } : {}
-  })), C = () => !!e.gestures && !e.isEditMode, I = (l) => {
-    C() && e.gestures?.onPointerEnter(l);
-  }, B = (l) => {
-    C() && e.gestures?.onPointerDown(l);
-  }, u = (l) => {
-    C() && e.gestures?.onPointerMove(l);
-  }, h = (l) => {
-    C() && e.gestures?.onPointerUp(l);
+  })), p = () => !!e.gestures && !e.isEditMode, y = (l) => {
+    p() && e.gestures?.onPointerEnter(l);
   }, m = (l) => {
-    C() && e.gestures?.onPointerCancel(l);
+    p() && e.gestures?.onPointerDown(l);
+  }, $ = (l) => {
+    p() && e.gestures?.onPointerMove(l);
+  }, E = (l) => {
+    p() && e.gestures?.onPointerUp(l);
+  }, d = (l) => {
+    p() && e.gestures?.onPointerCancel(l);
   };
-  return M(se.Provider, {
-    value: D,
+  return x(te.Provider, {
+    value: a,
     get children() {
-      var l = it(), k = l.firstChild;
-      return q(l, "pointercancel", m), q(l, "pointerup", h), q(l, "pointermove", u), q(l, "pointerdown", B), q(l, "pointerenter", I), ye((b) => {
-        t = b, e.gestures?.bindElement(b);
-      }, l), p(k, (() => {
-        var b = _(() => !!e.emptyState);
-        return () => b() ? M(ft, {
+      var l = Qe(), k = l.firstChild;
+      return L(l, "pointercancel", d), L(l, "pointerup", E), L(l, "pointermove", $), L(l, "pointerdown", m), L(l, "pointerenter", y), me((f) => {
+        r(f), e.gestures?.bindElement(f);
+      }, l), w(k, (() => {
+        var f = D(() => !!e.emptyState);
+        return () => f() ? x(ot, {
           get icon() {
             return e.emptyState.icon;
           },
@@ -911,22 +708,15 @@ function ht(e) {
             return e.emptyState.message;
           }
         }) : e.children;
-      })()), p(l, (() => {
-        var b = _(() => !!e.loading);
-        return () => b() && (() => {
-          var s = ot();
-          return T((z) => A(s, "z-index", F.OVERLAY)), s;
+      })()), w(l, (() => {
+        var f = D(() => !!e.loading);
+        return () => f() && (() => {
+          var C = Ze();
+          return W((N) => Y(C, "z-index", G.OVERLAY)), C;
         })();
-      })(), null), T((b) => {
-        var s = E(
-          "glasshome-widget",
-          "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50",
-          // Variant styles (lowest priority)
-          x()?.styles?.class,
-          // Custom class (highest priority)
-          e.class
-        ), z = $(), O = F.CONTENT;
-        return s !== b.e && N(l, b.e = s), b.t = Q(l, z, b.t), O !== b.a && A(k, "z-index", b.a = O), b;
+      })(), null), W((f) => {
+        var C = H("glasshome-widget", "relative h-full w-full select-none overflow-hidden rounded-xl border border-border/50", h()?.styles?.class, e.class), N = u(), R = G.CONTENT;
+        return C !== f.e && P(l, f.e = C), f.t = ne(l, N, f.t), R !== f.a && Y(k, "z-index", f.a = R), f;
       }, {
         e: void 0,
         t: void 0,
@@ -935,68 +725,68 @@ function ht(e) {
     }
   });
 }
-function ft(e) {
+function ot(e) {
   return (() => {
-    var t = at();
-    return p(t, (() => {
-      var r = _(() => !!e.icon);
-      return () => r() && (() => {
-        var o = st();
-        return p(o, () => e.icon), o;
+    var t = et();
+    return w(t, (() => {
+      var i = D(() => !!e.icon);
+      return () => i() && (() => {
+        var r = tt();
+        return w(r, () => e.icon), r;
       })();
-    })(), null), p(t, (() => {
-      var r = _(() => !!e.title);
-      return () => r() && (() => {
-        var o = lt();
-        return p(o, () => e.title), o;
+    })(), null), w(t, (() => {
+      var i = D(() => !!e.title);
+      return () => i() && (() => {
+        var r = nt();
+        return w(r, () => e.title), r;
       })();
-    })(), null), p(t, (() => {
-      var r = _(() => !!e.message);
-      return () => r() && (() => {
-        var o = ct();
-        return p(o, () => e.message), o;
+    })(), null), w(t, (() => {
+      var i = D(() => !!e.message);
+      return () => i() && (() => {
+        var r = it();
+        return w(r, () => e.message), r;
       })();
     })(), null), t;
   })();
 }
-const K = ht;
-K.Content = Ge;
-K.Icon = Be;
-K.Title = qe;
-K.Status = Fe;
-K.Value = rt;
-K.SliderFill = Le;
-var mt = /* @__PURE__ */ y('<span class="inline-flex size-3.5 shrink-0 items-center">'), vt = /* @__PURE__ */ y("<button type=button>"), xt = /* @__PURE__ */ y('<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">'), bt = /* @__PURE__ */ y('<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'), pt = /* @__PURE__ */ y('<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>'), wt = /* @__PURE__ */ y('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), yt = /* @__PURE__ */ y('<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">'), $t = /* @__PURE__ */ y('<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'), St = /* @__PURE__ */ y('<div class="min-w-0 shrink-0">'), kt = /* @__PURE__ */ y('<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">'), Ct = /* @__PURE__ */ y('<div class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">'), Mt = /* @__PURE__ */ y('<div class="flex shrink-0 items-center justify-end gap-2 border-border/50 border-t pt-3">');
-function Dt(e) {
+const I = rt;
+I.Content = Ve;
+I.Icon = Pe;
+I.Title = Ie;
+I.Status = Ue;
+I.Value = Je;
+I.SliderFill = Ne;
+var at = /* @__PURE__ */ b('<span class="inline-flex size-3.5 shrink-0 items-center">'), lt = /* @__PURE__ */ b("<button type=button>"), st = /* @__PURE__ */ b('<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">'), ct = /* @__PURE__ */ b('<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'), dt = /* @__PURE__ */ b('<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>'), ut = /* @__PURE__ */ b('<div class="rounded-lg bg-muted/30 p-2 text-center md:p-6"><p class="text-muted-foreground text-sm">No additional controls'), gt = /* @__PURE__ */ b('<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">'), ht = /* @__PURE__ */ b('<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'), ft = /* @__PURE__ */ b('<div class="min-w-0 shrink-0">'), mt = /* @__PURE__ */ b('<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">'), vt = /* @__PURE__ */ b('<div class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">'), wt = /* @__PURE__ */ b('<div class="flex shrink-0 items-center justify-end gap-2 border-border/50 border-t pt-3">');
+function bt(e) {
   return (() => {
-    var t = vt();
-    return t.$$click = () => e.onClick(), p(t, M(j, {
+    var t = lt();
+    return t.$$click = () => e.onClick(), w(t, x(T, {
       get when() {
         return e.isActive;
       },
       get children() {
-        var r = mt();
-        return p(r, () => e.icon), r;
+        var i = at();
+        return w(i, () => e.icon), i;
       }
-    }), null), p(t, () => e.label, null), T(() => N(t, E("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), w(t, () => e.label, null), W(() => P(t, H("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 Ft(e) {
-  const [t] = Me(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, [o, n] = U({}), [i, a] = U(null);
-  R(ue(() => t.config, (s) => {
+function Pt(e) {
+  const [t] = xe(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"]), i = () => !!t.configSchema && !!t.config && !!t.onConfigSave && !!t.SchemaForm, [r, n] = B({}), [a, h] = B(null);
+  oe(ae(() => t.config, (s) => {
     s && n({
       ...s
     });
-  })), R(ue(() => t.configSchema, (s) => {
-    s && a(me(s));
+  })), oe(ae(() => t.configSchema, (s) => {
+    s && h(ce(s));
   }));
-  const c = () => r() && JSON.stringify(o()) !== JSON.stringify(t.config), x = (s) => {
+  const u = () => i() && JSON.stringify(r()) !== JSON.stringify(t.config), p = (s) => {
     !s && t.config && n({
       ...t.config
     }), t.onOpenChange(s);
-  }, w = () => {
-    t.onConfigSave?.(o());
-  }, [v, S] = U(t.defaultTab ?? "controls"), W = () => {
+  }, y = () => {
+    t.onConfigSave?.(r());
+  }, [m, $] = B(t.defaultTab ?? "controls"), E = () => {
     const s = t.maxWidth ?? "3xl";
     return {
       sm: "max-w-sm",
@@ -1007,83 +797,83 @@ function Ft(e) {
       "3xl": "max-w-3xl",
       "4xl": "max-w-4xl"
     }[s];
-  }, g = () => {
+  }, d = () => {
     if (t.tabs) return t.tabs;
     const s = [];
     return s.push({
       id: "edit",
       label: "Edit",
-      icon: xt(),
-      content: t.editContent ?? (r() && i() ? M(m, {
+      icon: st(),
+      content: t.editContent ?? (i() && a() ? x(v, {
         get schema() {
-          return i();
+          return a();
         },
         get data() {
-          return o();
+          return r();
         },
         onChange: n
-      }) : bt())
+      }) : ct())
     }), s.push({
       id: "controls",
       label: "Controls",
-      icon: pt(),
-      content: t.controlsContent ?? wt()
+      icon: dt(),
+      content: t.controlsContent ?? ut()
     }), s.push({
       id: "debug",
       label: "Debug",
-      icon: yt(),
-      content: t.debugContent ?? $t()
+      icon: gt(),
+      content: t.debugContent ?? ht()
     }), s;
-  }, f = async () => {
+  }, l = async () => {
     if (t.debugData !== void 0)
       try {
         const s = typeof t.debugData == "string" ? t.debugData : JSON.stringify(t.debugData, null, 2);
         await navigator.clipboard.writeText(s);
       } catch {
       }
-  }, D = () => {
-    const s = g();
-    return s.find((O) => O.id === v())?.content ?? s[0]?.content;
-  }, $ = t.ResponsiveDialog, C = t.ResponsiveDialogContent, I = t.ResponsiveDialogHeader, B = t.ResponsiveDialogTitle, u = t.ResponsiveDialogDescription, h = t.Button, m = t.SchemaForm, l = (s) => r() ? x(s) : t.onOpenChange(s), k = () => r() ? c() : t.hasUnsavedChanges, b = () => r() ? w : t.onSave;
-  return M($, {
+  }, k = () => {
+    const s = d();
+    return s.find((V) => V.id === m())?.content ?? s[0]?.content;
+  }, f = t.ResponsiveDialog, C = t.ResponsiveDialogContent, N = t.ResponsiveDialogHeader, R = t.ResponsiveDialogTitle, c = t.ResponsiveDialogDescription, g = t.Button, v = t.SchemaForm, S = (s) => i() ? p(s) : t.onOpenChange(s), O = () => i() ? u() : t.hasUnsavedChanges, M = () => i() ? y : t.onSave;
+  return x(f, {
     get open() {
       return t.open;
     },
-    onOpenChange: (s) => l(s),
+    onOpenChange: (s) => S(s),
     get children() {
-      return M(C, {
+      return x(C, {
         get class() {
-          return E(W(), t.class);
+          return H(E(), t.class);
         },
         get children() {
-          return [M(I, {
+          return [x(N, {
             class: "flex flex-row items-center justify-between gap-3",
             get children() {
               return [(() => {
-                var s = St();
-                return p(s, M(B, {
+                var s = ft();
+                return w(s, x(R, {
                   class: "truncate leading-tight",
                   get children() {
                     return t.title;
                   }
-                }), null), p(s, M(u, {
+                }), null), w(s, x(c, {
                   class: "sr-only",
                   children: "Widget configuration dialog"
                 }), null), s;
               })(), (() => {
-                var s = kt(), z = s.firstChild;
-                return p(z, () => g().map((O) => M(Dt, {
+                var s = mt(), _ = s.firstChild;
+                return w(_, () => d().map((V) => x(bt, {
                   get icon() {
-                    return O.icon;
+                    return V.icon;
                   },
                   get label() {
-                    return O.label;
+                    return V.label;
                   },
                   get isActive() {
-                    return v() === O.id;
+                    return m() === V.id;
                   },
-                  onClick: () => S(O.id)
-                }))), p(s, M(j, {
+                  onClick: () => $(V.id)
+                }))), w(s, x(T, {
                   get when() {
                     return t.headerActions;
                   },
@@ -1094,49 +884,49 @@ function Ft(e) {
               })()];
             }
           }), (() => {
-            var s = Ct();
-            return p(s, D), s;
-          })(), M(j, {
+            var s = vt();
+            return w(s, k), s;
+          })(), x(T, {
             get when() {
-              return _(() => v() === "edit")() && (b() || t.onDelete) || v() === "debug" && t.debugData !== void 0;
+              return D(() => m() === "edit")() && (M() || t.onDelete) || m() === "debug" && t.debugData !== void 0;
             },
             get children() {
-              var s = Mt();
-              return p(s, M(j, {
+              var s = wt();
+              return w(s, x(T, {
                 get when() {
-                  return _(() => v() === "edit")() && t.onDelete;
+                  return D(() => m() === "edit")() && t.onDelete;
                 },
                 get children() {
-                  return M(h, {
+                  return x(g, {
                     size: "sm",
                     variant: "destructive",
                     onClick: () => t.onDelete?.(),
                     children: "Delete"
                   });
                 }
-              }), null), p(s, M(j, {
+              }), null), w(s, x(T, {
                 get when() {
-                  return _(() => v() === "edit")() && b();
+                  return D(() => m() === "edit")() && M();
                 },
                 get children() {
-                  return M(h, {
+                  return x(g, {
                     size: "sm",
                     get disabled() {
-                      return !k();
+                      return !O();
                     },
-                    onClick: () => b()?.(),
+                    onClick: () => M()?.(),
                     children: "Save"
                   });
                 }
-              }), null), p(s, M(j, {
+              }), null), w(s, x(T, {
                 get when() {
-                  return _(() => v() === "debug")() && t.debugData !== void 0;
+                  return D(() => m() === "debug")() && t.debugData !== void 0;
                 },
                 get children() {
-                  return M(h, {
+                  return x(g, {
                     size: "sm",
                     variant: "outline",
-                    onClick: f,
+                    onClick: l,
                     children: "Copy"
                   });
                 }
@@ -1148,157 +938,157 @@ function Ft(e) {
     }
   });
 }
-$e(["click"]);
-function Yt(e = "edit") {
-  const [t, r] = U(!1), [o, n] = U(e);
+ve(["click"]);
+function Rt(e = "edit") {
+  const [t, i] = B(!1), [r, n] = B(e);
   return {
     showDialog: t,
-    setShowDialog: r,
-    openDialog: () => r(!0),
-    closeDialog: () => r(!1),
-    activeTab: o,
+    setShowDialog: i,
+    openDialog: () => i(!0),
+    closeDialog: () => i(!1),
+    activeTab: r,
     setActiveTab: n
   };
 }
-function Kt(e) {
-  const t = e.minEntities ?? 1, r = V(() => e.entities().length), o = V(() => r() >= t), n = V(() => !o() || !e.calculateGroupData ? null : e.calculateGroupData(e.entities())), i = V(() => {
-    if (!o()) return;
-    const c = e.aggregationMode?.();
-    if (!c || c === "none") return;
-    const x = e.entities();
-    if (c === "light" || c === "binary-sensor" || c === "switch")
-      return Xe(x, e.allEntitiesMode);
-    if (c === "sensor") {
-      const w = e.sensorGroupType?.() ?? "mean";
-      return Je(x, w, !0);
+function Ut(e) {
+  const t = e.minEntities ?? 1, i = j(() => e.entities().length), r = j(() => i() >= t), n = j(() => !r() || !e.calculateGroupData ? null : e.calculateGroupData(e.entities())), a = j(() => {
+    if (!r()) return;
+    const u = e.aggregationMode?.();
+    if (!u || u === "none") return;
+    const p = e.entities();
+    if (u === "light" || u === "binary-sensor" || u === "switch")
+      return Le(p, e.allEntitiesMode);
+    if (u === "sensor") {
+      const y = e.sensorGroupType?.() ?? "mean";
+      return Fe(p, y, !0);
     }
-  }), a = V(() => o() ? void 0 : e.emptyStateConfig);
+  }), h = j(() => r() ? void 0 : e.emptyStateConfig);
   return {
     entities: e.entities,
     groupData: n,
-    aggregatedData: i,
-    emptyState: a,
-    hasEntities: o,
-    count: r
+    aggregatedData: a,
+    emptyState: h,
+    hasEntities: r,
+    count: i
   };
 }
-const J = 32, d = J / 2, P = "white", te = "rgba(0,0,0,0.4)", le = 2, ne = 3;
-function zt(e) {
+const F = 32, o = F / 2, z = "white", K = "rgba(0,0,0,0.4)", ie = 2, X = 3;
+function pt(e) {
   return `url("data:image/svg+xml,${encodeURIComponent(e)}")`;
 }
-function re(e) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${J}" height="${J}" viewBox="0 0 ${J} ${J}">${e}</svg>`;
+function J(e) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${F}" height="${F}" viewBox="0 0 ${F} ${F}">${e}</svg>`;
 }
-const _t = re(`
+const xt = J(`
   <g transform="translate(6, 2)">
     <!-- shadow -->
-    <g stroke="${te}" stroke-width="${ne}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${K}" stroke-width="${X}" 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="${P}" stroke-width="${le}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="${z}" 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>
   </g>
-`), Tt = re(`
+`), yt = J(`
   <g>
-    <circle cx="${d}" cy="${d}" r="8" stroke="${te}" stroke-width="${ne}" fill="none"/>
-    <circle cx="${d}" cy="${d}" r="8" stroke="${P}" stroke-width="1.5" fill="none"/>
-    <circle cx="${d}" cy="${d}" r="1.5" fill="${P}"/>
+    <circle cx="${o}" cy="${o}" r="8" stroke="${K}" stroke-width="${X}" fill="none"/>
+    <circle cx="${o}" cy="${o}" r="8" stroke="${z}" stroke-width="1.5" fill="none"/>
+    <circle cx="${o}" cy="${o}" r="1.5" fill="${z}"/>
   </g>
-`), Et = re(`
+`), $t = J(`
   <g>
     <!-- shadow -->
-    <g stroke="${te}" stroke-width="${ne}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${d}" x2="26" y2="${d}"/>
-      <polyline points="10,${d - 4} 6,${d} 10,${d + 4}"/>
-      <polyline points="22,${d - 4} 26,${d} 22,${d + 4}"/>
+    <g stroke="${K}" stroke-width="${X}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${o}" x2="26" y2="${o}"/>
+      <polyline points="10,${o - 4} 6,${o} 10,${o + 4}"/>
+      <polyline points="22,${o - 4} 26,${o} 22,${o + 4}"/>
     </g>
     <!-- main -->
-    <g stroke="${P}" stroke-width="${le}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="6" y1="${d}" x2="26" y2="${d}"/>
-      <polyline points="10,${d - 4} 6,${d} 10,${d + 4}"/>
-      <polyline points="22,${d - 4} 26,${d} 22,${d + 4}"/>
+    <g stroke="${z}" stroke-width="${ie}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="${o}" x2="26" y2="${o}"/>
+      <polyline points="10,${o - 4} 6,${o} 10,${o + 4}"/>
+      <polyline points="22,${o - 4} 26,${o} 22,${o + 4}"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${d}" cy="${d}" r="1.5" fill="${P}"/>
-    <circle cx="${d - 5}" cy="${d}" r="1" fill="${P}" opacity="0.6"/>
-    <circle cx="${d + 5}" cy="${d}" r="1" fill="${P}" opacity="0.6"/>
+    <circle cx="${o}" cy="${o}" r="1.5" fill="${z}"/>
+    <circle cx="${o - 5}" cy="${o}" r="1" fill="${z}" opacity="0.6"/>
+    <circle cx="${o + 5}" cy="${o}" r="1" fill="${z}" opacity="0.6"/>
   </g>
-`), Ot = re(`
+`), kt = J(`
   <g>
     <!-- shadow -->
-    <g stroke="${te}" stroke-width="${ne}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${d}" y1="6" x2="${d}" y2="26"/>
-      <polyline points="${d - 4},10 ${d},6 ${d + 4},10"/>
-      <polyline points="${d - 4},22 ${d},26 ${d + 4},22"/>
+    <g stroke="${K}" stroke-width="${X}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${o}" y1="6" x2="${o}" y2="26"/>
+      <polyline points="${o - 4},10 ${o},6 ${o + 4},10"/>
+      <polyline points="${o - 4},22 ${o},26 ${o + 4},22"/>
     </g>
     <!-- main -->
-    <g stroke="${P}" stroke-width="${le}" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="${d}" y1="6" x2="${d}" y2="26"/>
-      <polyline points="${d - 4},10 ${d},6 ${d + 4},10"/>
-      <polyline points="${d - 4},22 ${d},26 ${d + 4},22"/>
+    <g stroke="${z}" stroke-width="${ie}" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="${o}" y1="6" x2="${o}" y2="26"/>
+      <polyline points="${o - 4},10 ${o},6 ${o + 4},10"/>
+      <polyline points="${o - 4},22 ${o},26 ${o + 4},22"/>
     </g>
     <!-- center grip dots -->
-    <circle cx="${d}" cy="${d}" r="1.5" fill="${P}"/>
-    <circle cx="${d}" cy="${d - 5}" r="1" fill="${P}" opacity="0.6"/>
-    <circle cx="${d}" cy="${d + 5}" r="1" fill="${P}" opacity="0.6"/>
+    <circle cx="${o}" cy="${o}" r="1.5" fill="${z}"/>
+    <circle cx="${o}" cy="${o - 5}" r="1" fill="${z}" opacity="0.6"/>
+    <circle cx="${o}" cy="${o + 5}" r="1" fill="${z}" opacity="0.6"/>
   </g>
 `);
-function ee(e, t, r) {
-  return { css: `${zt(e)} ${t} ${r}, auto`, hotspotX: t, hotspotY: r };
+function q(e, t, i) {
+  return { css: `${pt(e)} ${t} ${i}, auto`, hotspotX: t, hotspotY: i };
 }
-const G = {
-  tap: ee(_t, 12, 4),
-  hold: ee(Tt, 16, 16),
-  slideHorizontal: ee(Et, d, d),
-  slideVertical: ee(Ot, d, d)
+const U = {
+  tap: q(xt, 12, 4),
+  hold: q(yt, 16, 16),
+  slideHorizontal: q($t, o, o),
+  slideVertical: q(kt, o, o)
 };
-function oe() {
+function Z() {
   if (typeof window > "u") return null;
   const e = window;
   return e.Capacitor?.isNativePlatform?.() ? e.Capacitor.Plugins?.Haptics ?? null : null;
 }
-function ae(e) {
+function ee(e) {
   if (!(typeof navigator > "u" || typeof navigator.vibrate != "function"))
     try {
       navigator.vibrate(e);
     } catch {
     }
 }
-const Nt = {
+const Ct = {
   /** Light confirmation — fires when slide gesture arms after user holds still. */
   tick() {
-    const e = oe();
+    const e = Z();
     if (e) {
       e.impact({ style: "Light" }).catch(() => {
       });
       return;
     }
-    ae(8);
+    ee(8);
   },
   /** Medium bump — fires when hold gesture commits (detail opening). */
   bump() {
-    const e = oe();
+    const e = Z();
     if (e) {
       e.impact({ style: "Medium" }).catch(() => {
       });
       return;
     }
-    ae(20);
+    ee(20);
   },
   /** Stronger pulse — reserved for edit-mode pickup (future use). */
   pulse() {
-    const e = oe();
+    const e = Z();
     if (e) {
       e.impact({ style: "Heavy" }).catch(() => {
       });
       return;
     }
-    ae([0, 15, 40, 15]);
+    ee([0, 15, 40, 15]);
   }
 };
-function qt(e, t) {
+function jt(e, t) {
   const n = {
     isDown: !1,
     isTouch: !1,
@@ -1310,139 +1100,139 @@ function qt(e, t) {
     holdTimer: null,
     element: null
   };
-  let i = null, a = null, c = null;
-  function x(u) {
-    u !== a && (c && c.disconnect(), c = new ResizeObserver((h) => {
-      const m = h[0];
-      if (m) {
-        const l = m.borderBoxSize?.[0];
-        l ? i = { width: l.inlineSize, height: l.blockSize } : i = { width: m.contentRect.width, height: m.contentRect.height };
+  let a = null, h = null, u = null;
+  function p(c) {
+    c !== h && (u && u.disconnect(), u = new ResizeObserver((g) => {
+      const v = g[0];
+      if (v) {
+        const S = v.borderBoxSize?.[0];
+        S ? a = { width: S.inlineSize, height: S.blockSize } : a = { width: v.contentRect.width, height: v.contentRect.height };
       }
-    }), a = u, c.observe(u), i = { width: u.clientWidth, height: u.clientHeight });
+    }), h = c, u.observe(c), a = { width: c.clientWidth, height: c.clientHeight });
   }
-  const w = () => {
+  const y = () => {
     n.holdTimer && (clearTimeout(n.holdTimer), n.holdTimer = null);
-  }, v = () => {
+  }, m = () => {
     n.isDown = !1, n.hasMoved = !1, n.sliding = !1;
-  }, S = (u) => {
-    const m = e().slide;
-    return m?.orientation === "horizontal" ? "horizontal" : m?.orientation === "vertical" ? "vertical" : u && (i || x(u), i) ? i.height > i.width ? "vertical" : "horizontal" : (t?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
-  }, W = (u) => {
-    const h = e();
-    if (!(!h.tap && !h.hold && !h.slide)) {
-      if (n.isDown = !0, n.isTouch = u.pointerType === "touch", n.element = u.currentTarget, x(n.element), n.startX = u.clientX, n.startY = u.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.sliding = !1, h.hold) {
-        const m = h.hold.delay ?? 500;
+  }, $ = (c) => {
+    const v = e().slide;
+    return v?.orientation === "horizontal" ? "horizontal" : v?.orientation === "vertical" ? "vertical" : c && (a || p(c), a) ? a.height > a.width ? "vertical" : "horizontal" : (t?.() ?? "horizontal") === "horizontal" ? "horizontal" : "vertical";
+  }, E = (c) => {
+    const g = e();
+    if (!(!g.tap && !g.hold && !g.slide)) {
+      if (n.isDown = !0, n.isTouch = c.pointerType === "touch", n.element = c.currentTarget, p(n.element), n.startX = c.clientX, n.startY = c.clientY, n.startTime = Date.now(), n.hasMoved = !1, n.sliding = !1, g.hold) {
+        const v = g.hold.delay ?? 500;
         n.holdTimer = setTimeout(() => {
-          n.holdTimer = null, !(!n.isDown || n.hasMoved) && (Nt.bump(), h.hold?.action(), n.isDown = !1);
-        }, m);
+          n.holdTimer = null, !(!n.isDown || n.hasMoved) && (Ct.bump(), g.hold?.action(), n.isDown = !1);
+        }, v);
       }
-      if (!n.isTouch && h.slide)
+      if (!n.isTouch && g.slide)
         try {
-          u.currentTarget.setPointerCapture(u.pointerId);
+          c.currentTarget.setPointerCapture(c.pointerId);
         } catch {
         }
     }
-  }, g = (u) => {
+  }, d = (c) => {
     if (!n.isDown) return;
-    const h = e(), m = u.clientX - n.startX, l = u.clientY - n.startY;
-    if (Math.sqrt(m * m + l * l) > 10 && (w(), n.hasMoved = !0), !n.isTouch && h.slide && n.hasMoved) {
-      const b = u.currentTarget, s = S(b);
+    const g = e(), v = c.clientX - n.startX, S = c.clientY - n.startY;
+    if (Math.sqrt(v * v + S * S) > 10 && (y(), n.hasMoved = !0), !n.isTouch && g.slide && n.hasMoved) {
+      const M = c.currentTarget, s = $(M);
       n.sliding = !0;
-      const z = h.slide.min ?? 0, O = h.slide.max ?? 100, ve = O - z, xe = s === "vertical" ? -l : m, ce = i ?? { width: b.clientWidth, height: b.clientHeight }, be = s === "vertical" ? ce.height : ce.width, pe = xe / be * ve, we = Math.max(z, Math.min(O, h.slide.value + pe));
-      h.slide.onChange(Math.round(we)), n.startX = u.clientX, n.startY = u.clientY, u.preventDefault();
+      const _ = g.slide.min ?? 0, V = g.slide.max ?? 100, de = V - _, ue = s === "vertical" ? -S : v, re = a ?? { width: M.clientWidth, height: M.clientHeight }, ge = s === "vertical" ? re.height : re.width, he = ue / ge * de, fe = Math.max(_, Math.min(V, g.slide.value + he));
+      g.slide.onChange(Math.round(fe)), n.startX = c.clientX, n.startY = c.clientY, c.preventDefault();
     }
-  }, f = (u) => {
-    const h = e(), m = n.isDown, l = Date.now() - n.startTime, k = h.hold?.delay ?? 500;
-    w(), m && h.tap && !n.hasMoved && l < k && h.tap();
+  }, l = (c) => {
+    const g = e(), v = n.isDown, S = Date.now() - n.startTime, O = g.hold?.delay ?? 500;
+    y(), v && g.tap && !n.hasMoved && S < O && g.tap();
     try {
-      u.currentTarget.releasePointerCapture(u.pointerId);
+      c.currentTarget.releasePointerCapture(c.pointerId);
     } catch {
     }
-    v();
-  }, D = (u) => {
-    w();
+    m();
+  }, k = (c) => {
+    y();
     try {
-      u.currentTarget.releasePointerCapture(u.pointerId);
+      c.currentTarget.releasePointerCapture(c.pointerId);
     } catch {
     }
-    v();
-  }, $ = (u) => {
-    const h = e();
-    if (h.slide) {
-      const m = h.slide.orientation;
-      return m === "horizontal" ? G.slideHorizontal.css : m === "vertical" ? G.slideVertical.css : (i || x(u), i && i.height > i.width ? G.slideVertical.css : G.slideHorizontal.css);
+    m();
+  }, f = (c) => {
+    const g = e();
+    if (g.slide) {
+      const v = g.slide.orientation;
+      return v === "horizontal" ? U.slideHorizontal.css : v === "vertical" ? U.slideVertical.css : (a || p(c), a && a.height > a.width ? U.slideVertical.css : U.slideHorizontal.css);
     }
-    return h.tap ? G.tap.css : h.hold ? G.hold.css : "";
+    return g.tap ? U.tap.css : g.hold ? U.hold.css : "";
   };
   return {
-    onPointerDown: W,
-    onPointerMove: g,
-    onPointerUp: f,
-    onPointerCancel: D,
-    onPointerEnter: (u) => {
-      const h = u.currentTarget;
-      n.element = h, h.style.cursor = $(h);
+    onPointerDown: E,
+    onPointerMove: d,
+    onPointerUp: l,
+    onPointerCancel: k,
+    onPointerEnter: (c) => {
+      const g = c.currentTarget;
+      n.element = g, g.style.cursor = f(g);
     },
-    bindElement: (u) => {
-      u && (n.element = u, x(u));
+    bindElement: (c) => {
+      c && (n.element = c, p(c));
     },
     touchAction: () => {
-      const u = e();
-      return u.tap || u.hold || u.slide ? "manipulation" : "auto";
+      const c = e();
+      return c.tap || c.hold || c.slide ? "manipulation" : "auto";
     },
     dispose: () => {
-      w(), c && (c.disconnect(), c = null), a = null, i = null;
+      y(), u && (u.disconnect(), u = null), h = null, a = null;
     }
   };
 }
-const Xt = L.enum([
+const Bt = A.enum([
   "success",
   "warning",
   "danger",
   "info",
   "neutral",
   "accent"
-]), Jt = {
+]), It = {
   /** Optional display name override (renders as text input) */
-  title: () => L.string().optional().meta({ title: "Title", description: "Optional display name override" }),
+  title: () => A.string().optional().meta({ title: "Title", description: "Optional display name override" }),
   /** Multi-select entity picker for a HA domain */
-  entityIds: (e) => L.array(L.string()).default([]).meta({ domain: e, title: "Entities" }),
+  entityIds: (e) => A.array(A.string()).default([]).meta({ domain: e, title: "Entities" }),
   /** Single-select entity picker for a HA domain */
-  singleEntity: (e) => L.array(L.string()).default([]).meta({ domain: e, title: "Entity", singleSelect: !0 }),
+  singleEntity: (e) => A.array(A.string()).default([]).meta({ domain: e, title: "Entity", singleSelect: !0 }),
   /** Area picker dropdown */
-  areaId: () => L.string().optional().meta({ formType: "area-picker", title: "Area" })
+  areaId: () => A.string().optional().meta({ formType: "area-picker", title: "Area" })
 };
-function Qt() {
+function Lt() {
   return document.documentElement.classList.contains("dark");
 }
-const Vt = "0.4.2", Pt = {
-  version: Vt
-}, Zt = Pt.version;
+const St = "0.5.0", Mt = {
+  version: St
+}, Ft = Mt.version;
 export {
-  Zt as SDK_VERSION,
-  Xt as ToneSchema,
-  K as Widget,
-  Ge as WidgetContent,
-  se as WidgetCtx,
-  Ft as WidgetDialog,
-  Be as WidgetIcon,
-  nn as WidgetManifestSchema,
-  Le as WidgetSliderFill,
-  Fe as WidgetStatus,
-  qe as WidgetTitle,
-  rt as WidgetValue,
-  Xe as calculateLightGroup,
-  Je as calculateSensorGroup,
-  jt as countActiveEntities,
-  Ut as defineWidget,
-  rn as formatSchemaError,
-  Bt as getEntityAttribute,
-  Ee as injectTokens,
-  Qt as isDark,
-  Qe as isEntityActive,
-  Y as useWidgetContext,
-  Yt as useWidgetDialog,
-  Kt as useWidgetEntityGroup,
-  qt as useWidgetGestures,
-  Jt as widgetFields
+  Ft as SDK_VERSION,
+  Bt as ToneSchema,
+  I as Widget,
+  Ve as WidgetContent,
+  te as WidgetCtx,
+  Pt as WidgetDialog,
+  Pe as WidgetIcon,
+  Yt as WidgetManifestSchema,
+  Ne as WidgetSliderFill,
+  Ue as WidgetStatus,
+  Ie as WidgetTitle,
+  Je as WidgetValue,
+  Le as calculateLightGroup,
+  Fe as calculateSensorGroup,
+  Ht as countActiveEntities,
+  Vt as defineWidget,
+  Kt as formatSchemaError,
+  Wt as getEntityAttribute,
+  Se as injectTokens,
+  Lt as isDark,
+  Ge as isEntityActive,
+  At as useWidgetContext,
+  Rt as useWidgetDialog,
+  Ut as useWidgetEntityGroup,
+  jt as useWidgetGestures,
+  It as widgetFields
 };