@glasshome/widget-sdk 0.4.1 → 0.5.0

package/dist/framework/backgrounds/WidgetSliderFill.d.ts

@@ -1,44 +1,12 @@
-/**
- * WidgetSliderFill Component
- *
- * Animated fill overlay that follows a slider value. Background and glow are
- * rendered by the `.glasshome-widget-slider-fill` CSS rule in tokens.css via
- * the channel vars (`--widget-icon-color` with fallback to `--widget-color`).
- * The `color` prop is the optional per-fill override: when provided it is
- * written inline as `--widget-icon-color`, mirroring `Widget.Icon.color`
- * (Phase 26 VIS-A05). Orientation is inherited from the parent Widget context
- * and drives the `clip-path` direction.
- *
- * @example Default, inherits parent Widget channel color
- * ```tsx
- * <Widget tone="info" gestures={{ slide: { value, onChange } }}>
- *   <Widget.SliderFill value={position} />
- *   <Widget.Content>...</Widget.Content>
- * </Widget>
- * ```
- *
- * @example Per-fill override (sets --widget-icon-color, not background directly)
- * ```tsx
- * <Widget.SliderFill value={brightness} color={bulbColor} />
- * ```
- */
 import type { JSX } from "solid-js";
 interface WidgetSliderFillProps {
     /** Current value (0-100) */
     value: number;
-    /**
-     * Optional channel override: sets `--widget-icon-color` inline on the fill
-     * root. When omitted the fill renders in the parent Widget's channel color
-     * (var(--widget-color)). Mirrors Widget.Icon.color (Phase 26 VIS-A05).
-     */
+    /** Per-fill channel override; sets --widget-icon-color inline. */
     color?: string;
-    /** Whether the slider is currently being dragged (disables transition) */
+    /** Disables the fill transition while the user is dragging. */
     isDragging?: boolean;
-    /** Additional CSS classes */
     class?: string;
 }
-/**
- * Animated slider fill that adapts to widget orientation.
- */
 export declare function WidgetSliderFill(props: WidgetSliderFillProps): JSX.Element;
 export {};

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

@@ -1,30 +1,7 @@
-/**
- * WidgetContent Component
- *
- * Standard content container for widgets with consistent padding, gap, and layout direction.
- *
- * Uses contentLayout (not orientation) for UI arrangement:
- * - Tall widgets (150px+) -> vertical layout (stacked)
- * - Other widgets -> follows aspect ratio
- *
- * @example
- * ```tsx
- * <Widget.Content>
- *   <Widget.Icon icon={<Power />} />
- *   <Widget.Title>Living Room</Widget.Title>
- * </Widget.Content>
- * ```
- */
 import type { JSX } from "solid-js";
 interface WidgetContentProps {
-    /** Additional CSS classes */
     class?: string;
-    /** Content children */
     children: JSX.Element;
 }
-/**
- * Widget content container with auto-responsive layout
- * Ensures proper z-index layering for title, status, and controls
- */
 export declare function WidgetContent(props: WidgetContentProps): JSX.Element;
 export {};

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

@@ -1,46 +1,12 @@
-/**
- * WidgetIcon Component
- *
- * Channel-driven icon. Background and glow read from `--widget-icon-color`
- * (with fallback to `--widget-color`) and `--widget-glow-strength` via the
- * `.glasshome-widget-icon` CSS rule in tokens.css. The `color` prop is the
- * optional per-icon override, pass any CSS color string (oklch, rgb, hex,
- * hsl, var(...)).
- *
- * @example Default, inherits the parent Widget's channel color
- * ```tsx
- * <Widget tone="info">
- *   <Widget.Icon icon={<Power />} />
- * </Widget>
- * ```
- *
- * @example Per-icon override (e.g. light bulb showing its actual rgb_color)
- * ```tsx
- * <Widget.Icon icon={<Lightbulb />} color="oklch(0.85 0.2 60)" />
- * ```
- */
 import type { JSX } from "solid-js";
 interface WidgetIconProps {
-    /** Icon component (JSX.Element) */
     icon: JSX.Element;
-    /**
-     * Optional CSS color string (oklch, hsl, rgb, hex, var()).
-     * Sets `--widget-icon-color` inline on the icon root, overriding the
-     * channel base color for the icon only. When omitted the channel's
-     * `--widget-color` flows through via the tokens.css rule.
-     * BREAKING (Phase 26): previously accepted Tailwind class strings.
-     */
+    /** Per-icon channel override; sets --widget-icon-color inline. */
     color?: string;
-    /** Reduce opacity */
     dimmed?: boolean;
     /** Number of entities, creates stacked background effect (1 = single, 2+ = stacked backgrounds) */
     entityCount?: number;
-    /** Additional CSS classes */
     class?: string;
 }
-/**
- * Widget icon component with auto-responsive sizing.
- * Background + glow rendered by the `.glasshome-widget-icon` CSS rule.
- */
 export declare function WidgetIcon(props: WidgetIconProps): JSX.Element;
 export {};

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

@@ -1,27 +1,9 @@
-/**
- * WidgetStatus Component
- *
- * Status text component with auto-responsive typography.
- *
- * @example
- * ```tsx
- * <Widget.Status>{entity.state}</Widget.Status>
- * ```
- */
 import type { JSX } from "solid-js";
 interface WidgetStatusProps {
-    /** Reduce opacity further */
     dimmed?: boolean;
-    /** Additional CSS classes */
     class?: string;
-    /** Show "Unavailable" text instead of children */
     isUnavailable?: boolean;
-    /** Status text */
     children: JSX.Element;
 }
-/**
- * Widget status component with auto-responsive typography
- * Positioned above other content with proper z-index
- */
 export declare function WidgetStatus(props: WidgetStatusProps): JSX.Element;
 export {};

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

@@ -1,30 +1,8 @@
-/**
- * WidgetTitle Component
- *
- * Title component with automatic typography scaling and optional badge.
- *
- * @example
- * ```tsx
- * <Widget.Title>{config.title}</Widget.Title>
- * ```
- *
- * @example With badge
- * ```tsx
- * <Widget.Title badge={3}>Living Room</Widget.Title>
- * ```
- */
 import type { JSX } from "solid-js";
 interface WidgetTitleProps {
-    /** Optional badge count */
     badge?: number;
-    /** Additional CSS classes */
     class?: string;
-    /** Title text */
     children: JSX.Element;
 }
-/**
- * Widget title component with auto-responsive typography
- * Positioned above other content with proper z-index
- */
 export declare function WidgetTitle(props: WidgetTitleProps): JSX.Element;
 export {};

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

@@ -1,32 +1,10 @@
-/**
- * WidgetValue Component
- *
- * Numeric value display with optional unit and semantic interpretation.
- *
- * @example
- * ```tsx
- * <Widget.Value value={22} unit="C" />
- * ```
- *
- * @example With interpretation
- * ```tsx
- * <Widget.Value value={22} unit="C" interpret />
- * // Displays: "22C Warm"
- * ```
- */
 import type { JSX } from "solid-js";
 interface WidgetValueProps {
-    /** The value to display */
     value: number | string;
-    /** Unit of measurement */
     unit?: string;
-    /** Show semantic interpretation */
+    /** Show semantic interpretation (e.g. "Warm" for 22°C) */
     interpret?: boolean;
-    /** Additional CSS classes */
     class?: string;
 }
-/**
- * Widget value component with auto-formatting and interpretation
- */
 export declare function WidgetValue(props: WidgetValueProps): JSX.Element;
 export {};

package/dist/framework/core/Widget.d.ts

@@ -1,23 +1,12 @@
 /**
- * Widget - Main Container Component
+ * Widget — main container component.
  *
- * The primary container for all widgets. Provides context, gesture handling,
- * and base styling.
- *
- * @example Simple widget
- * ```tsx
- * <Widget gestures={{ tap: handleTap }}>
- *   <Widget.Icon icon={<Power />} />
- *   <Widget.Title>{title}</Widget.Title>
- * </Widget>
- * ```
- *
- * @example With CSS gradient and loading
- * ```tsx
- * <Widget gradient="linear-gradient(135deg, oklch(0.7 0.2 30), oklch(0.5 0.18 270))" loading={isLoading}>
- *   {children}
- * </Widget>
- * ```
+ * Renders the shell (gradient, border highlight, channel vars) and provides
+ * a minimal context (isEditMode, updateConfig) for slot components and host
+ * RPC. All visual scale (icon size, text size, padding, gap, content layout
+ * direction, slider fill orientation) lives in pure CSS via container queries
+ * on `.glasshome-widget`. The widget reacts to its own rendered box without
+ * any JS measurement.
  */
 import { type JSX } from "solid-js";
 import type { WidgetSliderFill as WidgetSliderFillType } from "../backgrounds/WidgetSliderFill";
@@ -27,58 +16,30 @@ import type { WidgetStatus as WidgetStatusType } from "../components/WidgetStatu
 import type { WidgetTitle as WidgetTitleType } from "../components/WidgetTitle";
 import type { WidgetValue as WidgetValueType } from "../components/WidgetValue";
 import type { GestureHandlers } from "../gestures/use-widget-gestures";
-import type { WidgetVariantConfig } from "../types";
 import type { Tone } from "../theming/tone";
+import type { WidgetVariantConfig } from "../types";
 interface WidgetEmptyStateConfig {
-    /** Icon to display */
     icon?: JSX.Element;
-    /** Main title/heading */
     title?: string;
-    /** Descriptive message */
     message?: string;
 }
 interface WidgetProps {
-    /** Widget variant (string ID or inline config) */
     variant?: string | WidgetVariantConfig;
-    /**
-     * Semantic tone (success, warning, danger, info, neutral, accent).
-     * Resolves to `--widget-color: var(--tone-{name})` inline on the widget root.
-     * Phase 26 channel API, preferred path for state-driven semantic widgets.
-     */
+    /** Semantic tone; resolves to `--widget-color: var(--tone-{name})`. */
     tone?: Tone;
-    /**
-     * CSS color string (oklch, hsl, hex, rgb, var()).
-     * Sets `--widget-color` directly. Overrides `tone` when both supplied.
-     */
+    /** CSS color override for `--widget-color`. Overrides `tone`. */
     color?: string;
-    /**
-     * Optional second-stop CSS color string for two-stop gradient identity.
-     * Sets `--widget-color-to`. When omitted the shell formula falls back to `--widget-color`.
-     */
+    /** Second-stop gradient color (`--widget-color-to`). */
     colorTo?: string;
-    /**
-     * Full CSS gradient string (e.g. `linear-gradient(135deg, oklch(...), oklch(...))`).
-     * Sets `--widget-gradient` and overrides the auto-derived shell gradient verbatim.
-     * BREAKING (Phase 26): previously accepted Tailwind class strings; now expects raw CSS.
-     */
+    /** Full CSS gradient string (`--widget-gradient`); overrides the auto-shell. */
     gradient?: string;
-    /** Show loading overlay */
     loading?: boolean;
-    /** Additional CSS classes */
     class?: string;
-    /** Is edit mode (disables gestures) */
     isEditMode?: boolean;
-    /** Called when delete button is clicked (only shown in edit mode) */
     onDelete?: () => void;
-    /** Empty state configuration, when provided shows empty state UI inside the shell */
     emptyState?: WidgetEmptyStateConfig;
-    /**
-     * Gesture handlers from `useWidgetGestures`. When provided, Widget binds
-     * pointer events on its outer container and wires the size observer so
-     * widget authors don't need a gesture wrapper div. Suppressed in edit mode.
-     */
+    /** Gesture handlers from `useWidgetGestures`. */
     gestures?: GestureHandlers;
-    /** Child elements */
     children?: JSX.Element;
 }
 interface WidgetComponent {

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

@@ -18,7 +18,8 @@
  * Pointer type is decided per press at pointerdown. A hybrid device (tablet
  * + bluetooth mouse) gets the right grammar based on which input fired.
  */
-import type { GestureConfig, WidgetOrientation } from "../types";
+import type { GestureConfig } from "../types";
+type GestureOrientation = "horizontal" | "vertical" | "square";
 export interface GestureHandlers {
     onPointerDown: (e: PointerEvent) => void;
     onPointerMove: (e: PointerEvent) => void;
@@ -41,4 +42,5 @@ export interface GestureHandlers {
     /** Cancel any pending hold timer. Call on component unmount via onCleanup. */
     dispose: () => void;
 }
-export declare function useWidgetGestures(config: () => GestureConfig, orientation?: () => WidgetOrientation): GestureHandlers;
+export declare function useWidgetGestures(config: () => GestureConfig, orientation?: () => GestureOrientation): GestureHandlers;
+export {};

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

@@ -3,6 +3,6 @@
  *
  * Hooks for widget development: context, dialog, entity group.
  */
-export { type BridgeableWidgetContext, type BridgeFns, type ReactiveWidgetContext, useWidgetContext, WidgetCtx, } from "./use-widget-context";
+export { type ReactiveWidgetContext, useWidgetContext, WidgetCtx, } from "./use-widget-context";
 export { useWidgetDialog, type WidgetDialogReturn } from "./use-widget-dialog";
 export { type AggregationPreset, type UseWidgetEntityGroupOptions, type UseWidgetEntityGroupResult, useWidgetEntityGroup, } from "./use-widget-entity-group";

package/dist/framework/hooks/use-widget-context.d.ts

@@ -1,69 +1,25 @@
 /**
- * Widget Context Hook
+ * Reactive widget context.
  *
- * Provides access to widget context (size, orientation, dimensions, edit mode).
+ * Visual scale (icon size, text size, padding, layout direction) lives in
+ * CSS via container queries on `.glasshome-widget`. This context only
+ * carries:
+ *   - host RPC (updateConfig)
+ *   - edit-mode flag
+ *   - raw measured dimensions (for widgets that branch rendered content
+ *     based on size — e.g. hide a forecast strip on small chips).
  *
- * @example
- * ```tsx
- * const ctx = useWidgetContext();
- *
- * return (
- *   <div>
- *     {ctx.size() !== "xs" && <DetailedMetrics />}
- *     {ctx.orientation() === "vertical" && <VerticalLayout />}
- *   </div>
- * );
- * ```
- */
-import type { WidgetDimensions, WidgetOrientation, WidgetSize } from "../types";
-/**
- * Reactive widget context value
- * Uses accessor functions for SolidJS fine-grained reactivity
+ * Widgets decide their own thresholds; there is no shared size tier.
  */
+export interface WidgetDimensions {
+    width: number;
+    height: number;
+}
 export interface ReactiveWidgetContext {
-    /** Widget size classification accessor */
-    size: () => WidgetSize;
-    /** Widget orientation accessor (for gestures - pure aspect ratio) */
-    orientation: () => WidgetOrientation;
-    /** Content layout direction accessor (for UI arrangement - considers height) */
-    contentLayout: () => WidgetOrientation;
-    /** Widget dimensions accessor */
-    dimensions: () => WidgetDimensions;
-    /** Whether widget is in edit mode */
     isEditMode: () => boolean;
-    /** Update widget config (persists to host) */
     updateConfig: (config: Record<string, unknown>) => void;
+    /** Measured shell dimensions in CSS px. (0,0) before first layout. */
+    dimensions: () => WidgetDimensions;
 }
-/**
- * Setter functions used by Widget.tsx to write real measured values into
- * the stub context created by WidgetSlot before Widget mounts and measures.
- */
-export interface BridgeFns {
-    setSize: (v: WidgetSize) => void;
-    setOrientation: (v: WidgetOrientation) => void;
-    setContentLayout: (v: WidgetOrientation) => void;
-    setDimensions: (v: WidgetDimensions) => void;
-    setIsStub: (v: boolean) => void;
-}
-/**
- * Bridgeable widget context — extends ReactiveWidgetContext with internal
- * fields used by the host (WidgetSlot + Widget.tsx) to make stub accessors
- * reactive. Widget authors never see or use these fields; useWidgetContext()
- * still returns ReactiveWidgetContext.
- */
-export interface BridgeableWidgetContext extends ReactiveWidgetContext {
-    /** True while Widget has not yet measured and updated the stub values */
-    _isStub: () => boolean;
-    /** Setter functions called by Widget.tsx createEffect to push real values */
-    _bridge: BridgeFns;
-}
-/**
- * Widget context
- * Uses reactive accessor pattern for SolidJS
- */
 export declare const WidgetCtx: import("solid-js").Context<ReactiveWidgetContext | undefined>;
-/**
- * Access widget context
- * @throws Error if used outside Widget component
- */
 export declare function useWidgetContext(): ReactiveWidgetContext;

package/dist/framework/index.d.ts

@@ -37,9 +37,9 @@ export { WidgetTitle } from "./components/WidgetTitle";
 export { WidgetValue } from "./components/WidgetValue";
 export { WidgetSliderFill } from "./backgrounds/WidgetSliderFill";
 export { WidgetDialog, type WidgetDialogProps, type WidgetDialogTab } from "./dialogs";
-export { type AggregationPreset, type BridgeableWidgetContext, type BridgeFns, type ReactiveWidgetContext, type UseWidgetEntityGroupOptions, type UseWidgetEntityGroupResult, useWidgetContext, useWidgetDialog, useWidgetEntityGroup, WidgetCtx, type WidgetDialogReturn, } from "./hooks";
+export { type AggregationPreset, type ReactiveWidgetContext, type UseWidgetEntityGroupOptions, type UseWidgetEntityGroupResult, useWidgetContext, useWidgetDialog, useWidgetEntityGroup, WidgetCtx, type WidgetDialogReturn, } from "./hooks";
 export { type GestureHandlers, useWidgetGestures } from "./gestures/use-widget-gestures";
 export { injectTokens, type Tone, ToneSchema, } from "./theming";
 export { widgetFields } from "./fields";
 export { calculateLightGroup, calculateSensorGroup, countActiveEntities, getEntityAttribute, isEntityActive, type LightGroupResult, type SensorGroupResult, type SensorGroupType, } from "./utils";
-export type { EntityView, WidgetContextValue, WidgetDimensions, WidgetOrientation, WidgetSize, WidgetStyles, WidgetVariantConfig, } from "./types";
+export type { EntityView, WidgetStyles, WidgetVariantConfig, } from "./types";

package/dist/framework/types.d.ts

@@ -1,54 +1,6 @@
 /** Core type definitions for the Widget Framework. */
 import type { JSX } from "solid-js";
-/**
- * Widget size classification based on grid dimensions
- * - xs: Small widgets (1x1, 1x2)
- * - sm: Medium-small widgets (2x1, 2x2)
- * - md: Medium widgets (2x3, 2x4)
- * - lg: Large widgets (2x6, 3x6, 4x2)
- * - xl: Extra large widgets (4x4)
- */
-export type WidgetSize = "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * Widget orientation based on aspect ratio
- * - horizontal: width > height
- * - vertical: height > width
- * - square: width === height
- */
-export type WidgetOrientation = "horizontal" | "vertical" | "square";
-/**
- * Widget dimensions in both pixels and grid units
- */
-export interface WidgetDimensions {
-    /** Pixel width */
-    width: number;
-    /** Pixel height */
-    height: number;
-    /** Grid columns (1-4) */
-    gridWidth: number;
-    /** Grid rows (1-6) */
-    gridHeight: number;
-}
-/**
- * Widget context provided to all child components.
- * Values are plain (not accessors) -- the context provider
- * will supply reactive accessors wrapping these.
- */
-export interface WidgetContextValue {
-    /** Widget size classification */
-    size: WidgetSize;
-    /** Widget orientation (for gestures - pure aspect ratio) */
-    orientation: WidgetOrientation;
-    /** Content layout direction (for UI arrangement - considers height) */
-    contentLayout: WidgetOrientation;
-    /** Widget dimensions */
-    dimensions: WidgetDimensions;
-    /** Whether widget is in edit mode */
-    isEditMode: boolean;
-}
-/**
- * Slide gesture configuration
- */
+/** Slide gesture configuration */
 export interface SlideGestureConfig {
     /** Current value */
     value: number;
@@ -83,10 +35,6 @@ export interface GestureConfig {
     /** Slide gesture configuration */
     slide?: SlideGestureConfig;
 }
-/**
- * Spacing scale
- */
-export type SpacingScale = "S1" | "S2" | "S3" | "S4";
 /**
  * CSS variable-based styling configuration
  */
@@ -221,8 +169,13 @@ export interface EntityView {
     domain: EntityDomain;
     /** Current state value */
     state: string;
-    /** Entity attributes */
-    attributes: Record<string, any>;
+    /**
+     * Entity attributes from Home Assistant, excluding keys that are
+     * surfaced as canonical resolved fields elsewhere on EntityView
+     * (`deviceClass`, `unitOfMeasurement`, `friendlyName`, `icon`).
+     * Use those fields instead of reaching into `attributes`.
+     */
+    attributes: Omit<Record<string, any>, "device_class" | "unit_of_measurement" | "friendly_name" | "icon">;
     /** When the state last changed */
     lastChanged: Date;
     /** When the state was last updated (even if unchanged) */