@glasshome/widget-sdk 1.17.1 → 1.18.0

package/dist/deprecations.js

@@ -87,6 +87,13 @@ var e = "https://glasshome.app/docs/widget-sdk/config", t = [
 		replacement: "the Widget's tone or color; the fill follows the card",
 		docsUrl: "https://glasshome.app/docs/widget-sdk/widget",
 		sourcePattern: "<WidgetSliderFill[^>]*\\scolor="
+	},
+	{
+		id: "WidgetVariantConfig.layout",
+		since: "1.18.0",
+		removeIn: "2.0.0",
+		replacement: "WidgetVariantConfig.styles (container, class, cssVars)",
+		docsUrl: "https://glasshome.app/docs/widgets/widget-sdk#variants"
 	}
 ];
 function n(e) {

package/dist/framework/components/anatomy.d.ts

@@ -52,7 +52,7 @@ export declare function WidgetAction(props: {
     /** Visible label; without one the action is a square icon control named by `aria-label`. */
     children?: JSX.Element;
     "aria-label"?: string;
-    run: () => Promise<unknown> | unknown;
+    run: () => unknown;
     confirm?: Confirm;
     /** Key within a shared `confirm`; defaults to the label or icon. */
     id?: string;

package/dist/framework/design-system/z-index.d.ts

@@ -20,4 +20,3 @@ export declare const WIDGET_Z: {
     /** Action layer (buttons, edit controls) */
     readonly ACTIONS: 30;
 };
-export type WidgetZIndex = (typeof WIDGET_Z)[keyof typeof WIDGET_Z];

package/dist/framework/gestures/use-widget-gestures.d.ts

@@ -29,7 +29,7 @@ export interface GestureHandlers {
     /** Keyboard door: Enter or Space taps, the context-menu key or Shift+F10 holds. */
     onKeyDown?: (e: KeyboardEvent) => void;
 }
-export interface HoldFlood {
+interface HoldFlood {
     x: number;
     y: number;
     /** Radius that reaches the farthest corner, so the fill ends as the hold fires. */

package/dist/framework/hooks/use-confirm.d.ts

@@ -4,7 +4,7 @@ export interface Confirm {
     /** Whether anything ran a moment ago. */
     any: () => boolean;
     /** Runs the action; resolves whether it succeeded. */
-    run: (keys: string[], action: () => Promise<unknown> | unknown) => Promise<boolean>;
+    run: (keys: string[], action: () => unknown) => Promise<boolean>;
 }
 /**
  * For actions that leave no state to show (a scene, a button press, a stop): the keys that just ran,

package/dist/framework/types.d.ts

@@ -1,7 +1,7 @@
 /** Core type definitions for the Widget Framework. */
 import type { JSX } from "solid-js";
 /** Slide gesture configuration */
-export interface SlideGestureConfig {
+interface SlideGestureConfig {
     /** Current value */
     value: number;
     /** Value change handler */
@@ -18,7 +18,7 @@ export interface SlideGestureConfig {
 /**
  * Hold gesture configuration
  */
-export interface HoldGestureConfig {
+interface HoldGestureConfig {
     /** Action to perform on hold */
     action: () => void;
     /** Hold delay in ms (default: 300) */
@@ -35,21 +35,15 @@ export interface GestureConfig {
     /** Slide gesture configuration */
     slide?: SlideGestureConfig;
 }
-/**
- * CSS variable-based styling configuration
- */
+/** Look applied to the widget shell: inline style, utility classes and CSS custom properties. */
 export interface WidgetStyles {
-    /** Inline CSS properties applied to widget container */
     container?: JSX.CSSProperties;
-    /** Tailwind utility classes (for simple styling) */
     class?: string;
-    /** CSS custom properties for themeable values */
     cssVars?: Record<`--widget-${string}` | `--glass-${string}`, string | number>;
 }
-/**
- * Flex layout strategy with type-safe configuration
- */
-export interface FlexLayoutStrategy {
+type WidgetElement = "icon" | "title" | "subtitle" | "status" | "value" | "metrics" | "content" | "background" | "overlay" | "decorations";
+/** @deprecated Never read by the shell. Removed in 2.0.0. */
+type LayoutStrategy = {
     type: "flex";
     direction: "row" | "column" | "row-reverse" | "column-reverse";
     align: "start" | "center" | "end" | "stretch";
@@ -57,106 +51,69 @@ export interface FlexLayoutStrategy {
     wrap?: boolean;
     gap?: string;
     order?: Partial<Record<WidgetElement, number>>;
-}
-/**
- * Grid layout strategy with type-safe configuration
- */
-export interface GridLayoutStrategy {
+} | {
     type: "grid";
     areas: string;
     columns?: string;
     rows?: string;
     gap?: string;
     elementAreas: Partial<Record<WidgetElement, string>>;
-}
-/**
- * Absolute positioning strategy with type-safe configuration
- */
-export interface AbsoluteLayoutStrategy {
+} | {
     type: "absolute";
-    positions: Partial<Record<WidgetElement, PositionConfig>>;
-}
-/**
- * Custom layout strategy (escape hatch)
- */
-export interface CustomLayoutStrategy {
+    positions: Partial<Record<WidgetElement, {
+        top?: string;
+        right?: string;
+        bottom?: string;
+        left?: string;
+        transform?: string;
+    }>>;
+} | {
     type: "custom";
     renderer: string;
-}
-/**
- * Discriminated union of all layout strategies
- */
-export type LayoutStrategy = FlexLayoutStrategy | GridLayoutStrategy | AbsoluteLayoutStrategy | CustomLayoutStrategy;
-/**
- * Position configuration for absolute layout
- */
-export interface PositionConfig {
-    top?: string;
-    right?: string;
-    bottom?: string;
-    left?: string;
-    transform?: string;
-}
-/**
- * Widget element identifiers for layout configuration
- */
-export type WidgetElement = "icon" | "title" | "subtitle" | "status" | "value" | "metrics" | "content" | "background" | "overlay" | "decorations";
-/**
- * Element-specific configuration
- */
-export interface ElementConfig {
-    visible?: Partial<Record<WidgetElement, boolean>>;
-    styles?: Partial<Record<WidgetElement, JSX.CSSProperties>>;
-    classNames?: Partial<Record<WidgetElement, string>>;
-}
-/**
- * Plugin system configuration (serializable)
- */
-export interface VariantPlugins {
-    background?: string;
-    overlay?: string;
-    decorations?: string[];
-}
-/**
- * Interaction configuration
- */
-export interface InteractionConfig {
-    hover?: boolean;
-    active?: boolean;
-    focus?: boolean;
-    hoverScale?: number;
-    activeScale?: number;
-}
-/**
- * Complete variant configuration
- */
+};
+/** A custom shell look; only `styles` is applied. */
 export interface WidgetVariantConfig {
     id: string;
     name: string;
     description?: string;
     styles?: WidgetStyles;
+    /** @deprecated Never read by the shell. Removed in 2.0.0. */
     layout?: LayoutStrategy;
-    elements?: ElementConfig;
-    plugins?: VariantPlugins;
-    interactions?: InteractionConfig;
+    /** @deprecated Never read by the shell. Removed in 2.0.0. */
+    elements?: {
+        visible?: Partial<Record<WidgetElement, boolean>>;
+        styles?: Partial<Record<WidgetElement, JSX.CSSProperties>>;
+        classNames?: Partial<Record<WidgetElement, string>>;
+    };
+    /** @deprecated Never read by the shell. Removed in 2.0.0. */
+    plugins?: {
+        background?: string;
+        overlay?: string;
+        decorations?: string[];
+    };
+    /** @deprecated Never read by the shell. Removed in 2.0.0. */
+    interactions?: {
+        hover?: boolean;
+        active?: boolean;
+        focus?: boolean;
+        hoverScale?: number;
+        activeScale?: number;
+    };
+    /** @deprecated Never read by the shell. Removed in 2.0.0. */
     extends?: string;
 }
-/**
- * Variant registry type
- */
-export type VariantRegistry = Record<string, WidgetVariantConfig>;
 /** Unique entity identifier (e.g., "light.living_room") */
-export type EntityId = string;
+type EntityId = string;
 /** Entity domain (e.g., "light", "sensor", "switch") */
-export type EntityDomain = string;
+type EntityDomain = string;
 /** Area identifier */
-export type AreaId = string;
+type AreaId = string;
 /** Device identifier */
-export type DeviceId = string;
+type DeviceId = string;
 /** Label identifier */
-export type LabelId = string;
+type LabelId = string;
 /** Entity category for filtering */
-export type EntityCategory = "config" | "diagnostic" | null;
+type EntityCategory = "config" | "diagnostic" | null;
 /**
  * Full entity view interface representing a Home Assistant entity.
  * This is the canonical type used by SDK framework utils and widgets.
@@ -219,3 +176,4 @@ export interface EntityView {
     /** Bitmask of supported features */
     supportedFeatures?: number;
 }
+export {};

package/dist/framework/utils/empty-state.d.ts

@@ -1,49 +1,6 @@
-/**
- * Empty State Utilities
- *
- * Helper functions for creating consistent empty state configurations across widgets.
- */
 import type { JSX } from "solid-js";
-/**
- * Empty state configuration for a widget
- */
 export interface WidgetEmptyStateConfig {
-    /** Icon to display */
     icon: JSX.Element;
-    /** Main title/heading */
     title: string;
-    /** Descriptive message */
     message: string;
 }
-export interface EmptyStateConfigOptions {
-    /** Icon to display */
-    icon: JSX.Element;
-    /** Main title/heading */
-    title: string;
-    /** Descriptive message (optional - uses default template if not provided) */
-    message?: string;
-    /** Entity type for default message template (e.g., "a light", "a lock") */
-    entityType?: string;
-}
-/**
- * Creates a consistent empty state configuration for widgets
- *
- * @example
- * ```typescript
- * // Custom message
- * const config = createEmptyStateConfig({
- *   icon: <Thermometer />,
- *   title: "No climate entity",
- *   message: "Configure this widget to add a climate device",
- * });
- *
- * // Default message template
- * const config = createEmptyStateConfig({
- *   icon: <Lock />,
- *   title: "No lock entity",
- *   entityType: "a lock",
- * });
- * // Result: message = "Configure this widget to add a lock"
- * ```
- */
-export declare function createEmptyStateConfig(options: EmptyStateConfigOptions): WidgetEmptyStateConfig;

package/dist/framework/utils/index.d.ts

@@ -5,7 +5,6 @@
  * in this directory are still consumed internally even when not part of the
  * public re-export surface.
  */
-export { cn } from "./cn";
 export { copyText, type CopyState, useCopyText } from "./clipboard";
 export { calculateLightGroup, calculateSensorGroup, type LightGroupResult, type SensorGroupResult, type SensorGroupType, } from "./entity-aggregation";
 export { countActiveEntities, getEntityAttribute, isEntityActive, } from "./entity-state";

package/dist/framework/variants/built-in-variants.d.ts

@@ -1,39 +1,2 @@
-/**
- * Built-in Widget Variants
- *
- * Simplified set of pre-built variant definitions that ship with the framework.
- * These variants can be used as-is or extended/composed.
- *
- * Includes 3 core variants (classic-glass, minimal, compact-horizontal).
- * Additional variants can be added later or created by widget authors
- * using the variant composition utilities.
- */
-import type { VariantRegistry, WidgetVariantConfig } from "../types";
-export declare const classicGlass: WidgetVariantConfig;
-export declare const minimal: WidgetVariantConfig;
-export declare const compactHorizontal: WidgetVariantConfig;
-/**
- * Built-in variant registry
- * Maps variant IDs to their configurations
- */
-export declare const builtInVariants: VariantRegistry;
-/**
- * Get a variant by ID from the built-in registry
- *
- * @param id Variant ID
- * @returns Variant configuration or undefined if not found
- */
-export declare function getBuiltInVariant(id: string): WidgetVariantConfig | undefined;
-/**
- * Check if a variant ID is a built-in variant
- *
- * @param id Variant ID to check
- * @returns True if the variant is built-in
- */
-export declare function isBuiltInVariant(id: string): boolean;
-/**
- * Get all built-in variant IDs
- *
- * @returns Array of built-in variant IDs
- */
-export declare function getBuiltInVariantIds(): string[];
+import type { WidgetStyles } from "../types";
+export declare function getBuiltInVariantStyles(id: string): WidgetStyles | undefined;

package/dist/index.js

@@ -727,87 +727,30 @@ function ir(e) {
 	let n = t.createElement("style");
 	n.setAttribute("data-glasshome-tokens", ""), n.textContent = $n, t.head.appendChild(n), er = !0;
 }
+//#endregion
+//#region src/framework/variants/built-in-variants.ts
 var ar = {
-	"classic-glass": {
-		id: "classic-glass",
-		name: "Classic Glass",
-		description: "Default glassmorphism design with blur background and gradient",
-		styles: { cssVars: {
-			"--widget-padding": "1.5rem",
-			"--widget-backdrop": "blur(var(--glass-blur, var(--material-blur, 24px))) saturate(1.8)"
-		} },
-		layout: {
-			type: "flex",
-			direction: "column",
-			align: "start",
-			justify: "start",
-			gap: "0.75rem"
-		},
-		interactions: {
-			hover: !0,
-			active: !0,
-			focus: !0,
-			hoverScale: 1.02,
-			activeScale: .98
-		}
-	},
-	minimal: {
-		id: "minimal",
-		name: "Minimal",
-		description: "Clean, minimal design with no background effects",
-		styles: { cssVars: {
-			"--widget-padding": "1rem",
-			"--glass-base": "transparent",
-			"--glass-wash": "0%",
-			"--glass-light": "0",
-			"--glass-rim": "0",
-			"--glass-lift": "0",
-			"--glass-edge": "transparent"
-		} },
-		layout: {
-			type: "flex",
-			direction: "column",
-			align: "start",
-			justify: "start",
-			gap: "0.5rem"
-		},
-		elements: { visible: {
-			background: !1,
-			decorations: !1
-		} },
-		interactions: {
-			hover: !1,
-			active: !1,
-			focus: !0
-		}
-	},
-	"compact-horizontal": {
-		id: "compact-horizontal",
-		name: "Compact Horizontal",
-		description: "Horizontal layout for compact widgets",
-		styles: { cssVars: {
-			"--widget-padding": "1rem",
-			"--widget-icon-size": "2.5rem",
-			"--widget-backdrop": "blur(16px) saturate(1.8)"
-		} },
-		layout: {
-			type: "flex",
-			direction: "row",
-			align: "center",
-			justify: "start",
-			gap: "1rem"
-		},
-		interactions: {
-			hover: !0,
-			active: !0,
-			focus: !0,
-			hoverScale: 1.02,
-			activeScale: .98
-		}
-	}
+	"classic-glass": { cssVars: {
+		"--widget-padding": "1.5rem",
+		"--widget-backdrop": "blur(var(--glass-blur, var(--material-blur, 24px))) saturate(1.8)"
+	} },
+	minimal: { cssVars: {
+		"--widget-padding": "1rem",
+		"--glass-base": "transparent",
+		"--glass-wash": "0%",
+		"--glass-light": "0",
+		"--glass-rim": "0",
+		"--glass-lift": "0",
+		"--glass-edge": "transparent"
+	} },
+	"compact-horizontal": { cssVars: {
+		"--widget-padding": "1rem",
+		"--widget-icon-size": "2.5rem",
+		"--widget-backdrop": "blur(16px) saturate(1.8)"
+	} }
 };
 function or(e) {
-	return ar[e];
+	return Object.hasOwn(ar, e) ? ar[e] : void 0;
 }
 //#endregion
 //#region src/framework/backgrounds/WidgetSliderFill.tsx
@@ -922,7 +865,8 @@ function xr(e = 2e3) {
 //#endregion
 //#region src/framework/utils/entity-aggregation.ts
 function Sr(e, t = !1) {
-	if (e.length === 0) return {
+	let n = e[0];
+	if (!n) return {
 		isGroup: !1,
 		state: "unknown",
 		isOn: !1,
@@ -934,84 +878,85 @@ function Sr(e, t = !1) {
 		totalCount: 0,
 		description: "No entities"
 	};
-	let n = e.length > 1;
-	if (!n) {
-		let t = e[0], n = t.state === "on", r = t.attributes?.brightness || 0, i = Math.round(r / 255 * 100);
+	let r = e.length > 1;
+	if (!r) {
+		let e = n, t = e.state === "on", r = e.attributes?.brightness || 0, i = Math.round(r / 255 * 100);
 		return {
 			isGroup: !1,
-			state: t.state,
-			isOn: n,
-			isUnavailable: t.state === "unavailable",
+			state: e.state,
+			isOn: t,
+			isUnavailable: e.state === "unavailable",
 			brightness: r,
 			brightnessPercent: i,
-			color: Tr(t),
-			onCount: +!!n,
+			color: Tr(e),
+			onCount: +!!t,
 			totalCount: 1,
-			description: n ? "On" : "Off"
+			description: t ? "On" : "Off"
 		};
 	}
-	let r = 0, i = 0, a = 0, o = 0, s = 0, c = 0, l = [];
+	let i = 0, a = 0, o = 0, s = 0, c = 0, l = 0, u = [];
 	for (let t of e) switch (t.state) {
 		case "on":
-			if (r++, t.attributes?.brightness !== void 0 && (s += t.attributes.brightness, c++), t.attributes?.rgb_color) l.push(t.attributes.rgb_color);
+			if (i++, t.attributes?.brightness !== void 0 && (c += t.attributes.brightness, l++), t.attributes?.rgb_color) u.push(t.attributes.rgb_color);
 			else if (t.attributes?.hs_color) {
 				let [e, n] = t.attributes.hs_color;
-				l.push(wr(e, n));
+				u.push(wr(e, n));
 			}
 			break;
 		case "off":
-			i++;
+			a++;
 			break;
 		case "unknown":
-			a++;
+			o++;
 			break;
-		case "unavailable": o++;
+		case "unavailable": s++;
 	}
-	let u = e.length, d = o === u, f = a + o === u, p = r > 0, m = r === u, h = i === u, g, _;
-	t ? d ? (g = "unavailable", _ = !1) : a > 0 || o > 0 ? (g = "unknown", _ = !1) : i > 0 ? (g = "off", _ = !1) : (g = "on", _ = !0) : d ? (g = "unavailable", _ = !1) : f ? (g = "unknown", _ = !1) : p ? (g = "on", _ = !0) : (g = "off", _ = !1);
-	let v = c > 0 ? Math.round(s / c) : 0, y = Math.round(v / 255 * 100), b;
-	if (l.length > 0) {
-		let e = Math.round(l.reduce((e, t) => e + t[0], 0) / l.length), t = Math.round(l.reduce((e, t) => e + t[1], 0) / l.length), n = Math.round(l.reduce((e, t) => e + t[2], 0) / l.length), r = v / 255;
-		b = `rgb(${Math.round(e * r)}, ${Math.round(t * r)}, ${Math.round(n * r)})`;
-	} else b = Tr(e[0]);
-	let x;
-	return x = m ? "All on" : h ? "All off" : r > 0 ? `${r} of ${u} on` : "Off", {
-		isGroup: n,
-		state: g,
-		isOn: _,
-		isUnavailable: g === "unavailable",
-		brightness: v,
-		brightnessPercent: y,
-		color: b,
-		onCount: r,
-		totalCount: u,
-		description: x
+	let d = e.length, f = s === d, p = o + s === d, m = i > 0, h = i === d, g = a === d, _, v;
+	t ? f ? (_ = "unavailable", v = !1) : o > 0 || s > 0 ? (_ = "unknown", v = !1) : a > 0 ? (_ = "off", v = !1) : (_ = "on", v = !0) : f ? (_ = "unavailable", v = !1) : p ? (_ = "unknown", v = !1) : m ? (_ = "on", v = !0) : (_ = "off", v = !1);
+	let y = l > 0 ? Math.round(c / l) : 0, b = Math.round(y / 255 * 100), x;
+	if (u.length > 0) {
+		let e = Math.round(u.reduce((e, t) => e + t[0], 0) / u.length), t = Math.round(u.reduce((e, t) => e + t[1], 0) / u.length), n = Math.round(u.reduce((e, t) => e + t[2], 0) / u.length), r = y / 255;
+		x = `rgb(${Math.round(e * r)}, ${Math.round(t * r)}, ${Math.round(n * r)})`;
+	} else x = Tr(n);
+	let S;
+	return S = h ? "All on" : g ? "All off" : i > 0 ? `${i} of ${d} on` : "Off", {
+		isGroup: r,
+		state: _,
+		isOn: v,
+		isUnavailable: _ === "unavailable",
+		brightness: y,
+		brightnessPercent: b,
+		color: x,
+		onCount: i,
+		totalCount: d,
+		description: S
 	};
 }
 function Cr(e, t = "mean", n = !0) {
-	if (e.length === 0) return {
+	let r = e[0];
+	if (!r) return {
 		isGroup: !1,
 		state: "unknown",
 		numericValue: null,
 		isUnavailable: !0,
 		description: "No entities"
 	};
-	let r = e.length > 1;
-	if (!r) {
-		let t = e[0], n = Number.parseFloat(t.state), r = t.state;
-		return Number.isNaN(n) || (r = Number.isInteger(n) ? n.toString() : n.toFixed(1)), {
+	let i = e.length > 1;
+	if (!i) {
+		let e = r, t = Number.parseFloat(e.state), n = e.state;
+		return Number.isNaN(t) || (n = Number.isInteger(t) ? t.toString() : t.toFixed(1)), {
 			isGroup: !1,
-			state: r,
-			numericValue: Number.isNaN(n) ? null : n,
-			isUnavailable: t.state === "unavailable",
-			unit: t.unitOfMeasurement ?? void 0,
-			description: r
+			state: n,
+			numericValue: Number.isNaN(t) ? null : t,
+			isUnavailable: e.state === "unavailable",
+			unit: e.unitOfMeasurement ?? void 0,
+			description: n
 		};
 	}
-	let i = [], a = [], o = 0, s;
+	let a = [], o = [], s = 0, c;
 	for (let t of e) {
-		if (!s && t.unitOfMeasurement && (s = t.unitOfMeasurement), t.state === "unavailable") {
-			o++, a.push({
+		if (!c && t.unitOfMeasurement && (c = t.unitOfMeasurement), t.state === "unavailable") {
+			s++, o.push({
 				entityId: t.id,
 				value: "unavailable",
 				friendly_name: t.friendlyName
@@ -1019,69 +964,69 @@ function Cr(e, t = "mean", n = !0) {
 			continue;
 		}
 		let e = Number.parseFloat(t.state);
-		isNaN(e) ? n || a.push({
+		isNaN(e) ? n || o.push({
 			entityId: t.id,
 			value: t.state,
 			friendly_name: t.friendlyName
-		}) : (i.push(e), a.push({
+		}) : (a.push(e), o.push({
 			entityId: t.id,
 			value: e,
 			friendly_name: t.friendlyName
 		}));
 	}
-	let c = o === e.length, l = i.length === 0;
-	if (c || l) return {
-		isGroup: r,
-		state: c ? "unavailable" : "unknown",
+	let l = s === e.length, u = a.at(-1);
+	if (l || u === void 0) return {
+		isGroup: i,
+		state: l ? "unavailable" : "unknown",
 		numericValue: null,
-		isUnavailable: c,
-		unit: s,
-		description: c ? "Unavailable" : "No numeric values",
-		memberValues: a
+		isUnavailable: l,
+		unit: c,
+		description: l ? "Unavailable" : "No numeric values",
+		memberValues: o
 	};
-	let u, d;
+	let d, f;
 	switch (t) {
 		case "min":
-			u = Math.min(...i), d = "Minimum";
+			d = Math.min(...a), f = "Minimum";
 			break;
 		case "max":
-			u = Math.max(...i), d = "Maximum";
+			d = Math.max(...a), f = "Maximum";
 			break;
 		case "mean":
-			u = i.reduce((e, t) => e + t, 0) / i.length, d = "Average";
+			d = a.reduce((e, t) => e + t, 0) / a.length, f = "Average";
 			break;
 		case "median": {
-			let e = [...i].sort((e, t) => e - t), t = Math.floor(e.length / 2);
-			u = e.length % 2 == 0 ? (e[t - 1] + e[t]) / 2 : e[t], d = "Median";
+			let e = [...a].sort((e, t) => e - t), t = Math.floor(e.length / 2), n = e[t] ?? u;
+			d = e.length % 2 == 0 ? ((e[t - 1] ?? n) + n) / 2 : n, f = "Median";
 			break;
 		}
 		case "sum":
-			u = i.reduce((e, t) => e + t, 0), d = "Sum";
+			d = a.reduce((e, t) => e + t, 0), f = "Sum";
 			break;
 		case "last":
-			u = i[i.length - 1], d = "Latest";
+			d = u, f = "Latest";
 			break;
 		case "range":
-			u = Math.max(...i) - Math.min(...i), d = "Range";
+			d = Math.max(...a) - Math.min(...a), f = "Range";
 			break;
 		case "product":
-			u = i.reduce((e, t) => e * t, 1), d = "Product";
+			d = a.reduce((e, t) => e * t, 1), f = "Product";
 			break;
 		case "std_dev": {
-			let e = i.reduce((e, t) => e + t, 0) / i.length, t = i.reduce((t, n) => t + (n - e) ** 2, 0) / i.length;
-			u = Math.sqrt(t), d = "Std Dev";
+			let e = a.reduce((e, t) => e + t, 0) / a.length, t = a.reduce((t, n) => t + (n - e) ** 2, 0) / a.length;
+			d = Math.sqrt(t), f = "Std Dev";
 			break;
 		}
-		default: u = i.reduce((e, t) => e + t, 0) / i.length, d = "Average";
+		default: d = a.reduce((e, t) => e + t, 0) / a.length, f = "Average";
 	}
 	return {
-		isGroup: r,
-		state: Number.isInteger(u) ? u.toString() : u.toFixed(1),
-		numericValue: u,
+		isGroup: i,
+		state: Number.isInteger(d) ? d.toString() : d.toFixed(1),
+		numericValue: d,
 		isUnavailable: !1,
-		unit: s,
-		description: `${d} of ${i.length}`,
-		memberValues: a
+		unit: c,
+		description: `${f} of ${a.length}`,
+		memberValues: o
 	};
 }
 function wr(e, t) {
@@ -1206,13 +1151,13 @@ function Vr(t) {
 	};
 	n && Object.defineProperty(d, tn, { value: n });
 	let f = D(() => {
-		if (t.variant) return typeof t.variant == "string" ? or(t.variant) : t.variant;
+		if (t.variant) return typeof t.variant == "string" ? or(t.variant) : t.variant.styles;
 	}), p = e(() => t.gradient, "widget.gradient"), m = D(() => ({
 		"container-type": "size",
 		"container-name": "widget",
 		"touch-action": o() && !t.isEditMode ? o()?.touchAction() : void 0,
-		...f()?.styles?.container,
-		...f()?.styles?.cssVars || {},
+		...f()?.container,
+		...f()?.cssVars || {},
 		...t.tone ? { "--widget-color": `var(--tone-${t.tone})` } : {},
 		...t.color ? { "--widget-color": t.color } : {},
 		...t.tone && t.tone !== "neutral" || t.color ? { "--glass-tone": "var(--widget-color)" } : {},
@@ -1295,7 +1240,7 @@ function Vr(t) {
 									return P((t) => R(e, "z-index", K.OVERLAY)), e;
 								})();
 							})(), null), P((r) => {
-								var i = X("glasshome-widget glass", "relative h-full w-full select-none overflow-hidden rounded-xl", f()?.styles?.class, t.class), a = m(), o = t.confirmed || void 0, s = h() ? 0 : void 0, c = K.CONTENT;
+								var i = X("glasshome-widget glass", "relative h-full w-full select-none overflow-hidden rounded-xl", f()?.class, t.class), a = m(), o = t.confirmed || void 0, s = h() ? 0 : void 0, c = K.CONTENT;
 								return i !== r.e && M(e, r.e = i), r.t = z(e, a, r.t), o !== r.a && L(e, "data-confirmed", r.a = o), s !== r.o && L(e, "tabindex", r.o = s), c !== r.i && R(n, "z-index", r.i = c), r;
 							}, {
 								e: void 0,
@@ -1797,7 +1742,7 @@ function ki(e) {
 	let t = e.replace(/([a-z\d])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ");
 	return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
 }
-var Ai = (e) => typeof e != "object" || !e;
+var Ai = (e) => e === null || typeof e != "object" && typeof e != "function";
 function ji(e) {
 	return e == null ? "None" : String(e);
 }
@@ -1884,7 +1829,7 @@ function Ii(e) {
 	})();
 }
 function Li(e) {
-	let t = D(() => Object.entries(e.record)), n = D(() => t().filter(([, e]) => Ai(e))), r = D(() => t().filter(([, e]) => !Ai(e)));
+	let t = D(() => Object.entries(e.record)), n = D(() => t().flatMap(([e, t]) => Ai(t) ? [[e, t]] : [])), r = D(() => t().filter(([, e]) => !Ai(e)));
 	return N(w, {
 		get when() {
 			return t().length > 0;
@@ -2829,7 +2774,7 @@ function Qa() {
 //#region src/version.ts
 var $a = {
 	name: "@glasshome/widget-sdk",
-	version: "1.17.1",
+	version: "1.18.0",
 	description: "SDK for building GlassHome dashboard widgets with SolidJS",
 	keywords: [
 		"glasshome",
@@ -2885,16 +2830,16 @@ var $a = {
 		test: "bun test src && vitest run",
 		"test:dom": "vitest run",
 		"test:dom:watch": "vitest",
-		"typecheck:test": "tsc --noEmit -p tsconfig.test.json"
+		"typecheck:test": "tsc --noEmit -p tsconfig.test.json",
+		"check:dead": "fallow dead-code --fail-on-issues"
 	},
 	peerDependencies: {
-		"@glasshome/sync-layer": "0.9.0",
-		"@glasshome/ui": "1.20.0",
+		"@glasshome/sync-layer": "0.9.1",
+		"@glasshome/ui": "1.21.1",
 		"solid-js": "^1.9.11"
 	},
 	dependencies: {
 		"@glasshome/widget-contract": "0.3.0",
-		"@modular-forms/solid": "^0.25.1",
 		"@tailwindcss/vite": "^4.1.13",
 		clsx: "^2.1.1",
 		"happy-dom": "^20.0.0",
@@ -2904,10 +2849,11 @@ var $a = {
 		zod: "^4.1.13"
 	},
 	devDependencies: {
-		"@glasshome/ui": "1.20.0",
+		"@glasshome/ui": "1.21.1",
 		"@solidjs/testing-library": "^0.8.10",
 		"@types/bun": "^1.4.0",
 		"@types/node": "^25.2.2",
+		fallow: "3.17.0",
 		typescript: "^7.0.2",
 		vite: "^8.1.0",
 		"vite-plugin-solid": "^2.11.12",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-sdk",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "SDK for building GlassHome dashboard widgets with SolidJS",
   "keywords": [
     "glasshome",
@@ -56,16 +56,16 @@
     "test": "bun test src && vitest run",
     "test:dom": "vitest run",
     "test:dom:watch": "vitest",
-    "typecheck:test": "tsc --noEmit -p tsconfig.test.json"
+    "typecheck:test": "tsc --noEmit -p tsconfig.test.json",
+    "check:dead": "fallow dead-code --fail-on-issues"
   },
   "peerDependencies": {
-    "@glasshome/sync-layer": "0.9.0",
-    "@glasshome/ui": "1.20.0",
+    "@glasshome/sync-layer": "0.9.1",
+    "@glasshome/ui": "1.21.1",
     "solid-js": "^1.9.11"
   },
   "dependencies": {
     "@glasshome/widget-contract": "0.3.0",
-    "@modular-forms/solid": "^0.25.1",
     "@tailwindcss/vite": "^4.1.13",
     "clsx": "^2.1.1",
     "happy-dom": "^20.0.0",
@@ -75,10 +75,11 @@
     "zod": "^4.1.13"
   },
   "devDependencies": {
-    "@glasshome/ui": "1.20.0",
+    "@glasshome/ui": "1.21.1",
     "@solidjs/testing-library": "^0.8.10",
     "@types/bun": "^1.4.0",
     "@types/node": "^25.2.2",
+    "fallow": "3.17.0",
     "typescript": "^7.0.2",
     "vite": "^8.1.0",
     "vite-plugin-solid": "^2.11.12",

package/preview/host.tsx

@@ -4,7 +4,7 @@ import { render } from "solid-js/web";
 
 function PreviewHost() {
   const [isDark, setIsDark] = createSignal(false);
-  const [config, setConfig] = createSignal(widget.manifest.defaultConfig || {});
+  const [config] = createSignal(widget.manifest.defaultConfig || {});
 
   const toggleDark = () => {
     const next = !isDark();
@@ -86,4 +86,6 @@ function PreviewHost() {
   );
 }
 
-render(() => <PreviewHost />, document.getElementById("root")!);
+const root = document.getElementById("root");
+if (!root) throw new Error("preview: #root is missing");
+render(() => <PreviewHost />, root);

package/dist/framework/variants/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * Variant System - Barrel Export
- *
- * Built-in variant presets and composition utilities.
- */
-export { builtInVariants, classicGlass, compactHorizontal, getBuiltInVariant, getBuiltInVariantIds, isBuiltInVariant, minimal, } from "./built-in-variants";
-export { applyCssVars, applyLayout, composeVariants, createFlexLayout, extendVariant, mergeVariants, } from "./variant-utils";

package/dist/framework/variants/variant-utils.d.ts

@@ -1,105 +0,0 @@
-/**
- * Variant Composition Utilities
- *
- * Utilities for creating, merging, extending, and composing widget variants.
- * Enables flexible variant system with type safety and composability.
- */
-import type { FlexLayoutStrategy, LayoutStrategy, WidgetVariantConfig } from "../types";
-/**
- * Merge two complete variant configurations
- *
- * Deep merges all properties, with `override` taking precedence.
- * Layout strategies are replaced, not merged (since they have different shapes).
- *
- * @example
- * ```tsx
- * const customVariant = mergeVariants(classicGlass, {
- *   styles: {
- *     cssVars: {
- *       "--glass-base": "oklch(0.2 0 0 / 0.5)"
- *     }
- *   }
- * });
- * ```
- */
-export declare function mergeVariants(base: WidgetVariantConfig, override: Partial<WidgetVariantConfig>): WidgetVariantConfig;
-/**
- * Extend a base variant with partial overrides
- *
- * Similar to mergeVariants but returns a new variant that references the base
- * via the `extends` property. Useful for variant inheritance chains.
- *
- * @example
- * ```tsx
- * const darkGlass = extendVariant("classic-glass", {
- *   id: "dark-glass",
- *   name: "Dark Glass",
- *   styles: {
- *     cssVars: {
- *       "--glass-base": "oklch(0.2 0 0 / 0.5)"
- *     }
- *   }
- * });
- * ```
- */
-export declare function extendVariant(baseId: string, override: Partial<WidgetVariantConfig> & {
-    id: string;
-    name: string;
-}): WidgetVariantConfig;
-/**
- * Compose multiple variants together (left to right precedence)
- *
- * Merges multiple variants in sequence, with later variants taking precedence.
- * Useful for combining layout + styling + interaction variants.
- *
- * @example
- * ```tsx
- * const custom = composeVariants(
- *   minimal,           // Base: minimal styling
- *   centeredLayout,    // Add: centered layout
- *   largeIcons         // Add: large icon sizing
- * );
- * ```
- */
-export declare function composeVariants(...variants: WidgetVariantConfig[]): WidgetVariantConfig;
-/**
- * Apply a layout strategy override to a variant
- *
- * Convenience function for changing just the layout of a variant.
- *
- * @example
- * ```tsx
- * const centered = applyLayout(minimal, {
- *   type: "flex",
- *   direction: "column",
- *   align: "center",
- *   justify: "center"
- * });
- * ```
- */
-export declare function applyLayout(variant: WidgetVariantConfig, layout: LayoutStrategy): WidgetVariantConfig;
-/**
- * Apply CSS variable overrides to a variant
- *
- * Convenience function for changing just the CSS variables of a variant.
- *
- * @example
- * ```tsx
- * const blueTinted = applyCssVars(classicGlass, {
- *   "--glass-tone": "oklch(0.62 0.2 260)",
- *   "--glass-wash": "30%"
- * });
- * ```
- */
-export declare function applyCssVars(variant: WidgetVariantConfig, cssVars: Record<`--widget-${string}` | `--glass-${string}`, string | number>): WidgetVariantConfig;
-/**
- * Create a flex layout strategy
- *
- * Convenience function for creating common flex layouts.
- *
- * @example
- * ```tsx
- * const layout = createFlexLayout("column", "center", "center");
- * ```
- */
-export declare function createFlexLayout(direction?: FlexLayoutStrategy["direction"], align?: FlexLayoutStrategy["align"], justify?: FlexLayoutStrategy["justify"], options?: Partial<FlexLayoutStrategy>): FlexLayoutStrategy;