@glasshome/widget-sdk 0.3.6 → 0.4.0

package/README.md

@@ -68,6 +68,24 @@ Provides a `@source` directive for Tailwind v4 so the compiler scans widget SDK
 @source "@glasshome/widget-sdk/tailwind-sources";
 ```
 
+## Escape patterns, when widgets own their visual surface
+
+Most widgets route through the channel API: `<Widget tone>` / `<Widget color colorTo>` / `<Widget.Icon color>`. A small number of widgets intentionally own their entire visual surface and bypass the channel. These are supported escape patterns, not anti-patterns.
+
+### Weather, full-background scenes
+
+The `weather` widget renders a `<WeatherBackground condition>` component that replaces the shell gradient entirely with an animated per-condition scene (sunny rays, rain droplets, snow particles). Channel vars do not apply to the shell; `Widget.Icon color` still receives a CSS string per condition for the icon badge.
+
+### Media-player, vinyl gradient
+
+The `media-player` widget composes a custom `<VinylRecord>` element with an album-art radial overlay. The visual identity is content-driven (album artwork) rather than tone-driven; the channel base color stays neutral underneath.
+
+### Area, per-metric pill colors
+
+The `area` widget renders quick-glance metric pills (CO2 traffic-light, humidity range, temperature) where each pill's color encodes the metric's *semantic state* (CO2 green/amber/red, humidity dry/comfortable/humid). These per-metric color rules are intentionally semantic-per-metric, not channel-driven, and live in the widget's own helpers.
+
+If your widget needs full visual control (a chart, a video stream, a custom animated surface), follow these patterns: keep the `<Widget>` shell neutral (no `tone`/`color`), place your custom DOM inside `<Widget.Content>`, and document the choice in the widget's README.
+
 ## Peer Dependencies
 
 | Package    | Required | Notes                                       |

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

@@ -1,24 +1,36 @@
 /**
  * Glow Component
  *
- * Background glow effect for widgets.
- * Renders a radial gradient background at the BACKGROUND z-index layer.
+ * Channel-driven background glow. Renders a blurred radial gradient at the
+ * BACKGROUND z-index layer using the Widget's channel color. Defaults to the
+ * parent Widget's `--widget-color`; pass `color` to override locally.
  *
  * @example
  * ```tsx
- * <Glow color="blue" />
+ * <Widget tone="info">
+ *   <Glow />
+ * </Widget>
+ * ```
+ *
+ * @example With local override
+ * ```tsx
+ * <Glow color="oklch(0.7 0.2 30)" />
  * ```
  */
 import type { JSX } from "solid-js";
-import type { ColorVariant } from "../types";
-export interface GlowProps {
-    /** Glow color (Tailwind color name or CSS color) */
-    color: ColorVariant;
+interface GlowProps {
+    /**
+     * Optional CSS color string override (oklch, hsl, rgb, hex, var()).
+     * Sets `--widget-color` locally on the Glow element. When omitted the
+     * parent Widget's channel color cascades in.
+     * BREAKING (Phase 26): previously a Tailwind color variant key.
+     */
+    color?: string;
     /** Additional CSS classes */
     class?: string;
 }
 /**
- * Glow effect component
- * Applies a blurred radial gradient background effect
+ * Glow effect component, channel-driven radial gradient.
  */
 export declare function Glow(props: GlowProps): JSX.Element;
+export {};

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

@@ -1,33 +1,44 @@
 /**
  * WidgetSliderFill Component
  *
- * Animated fill overlay that follows a slider value.
- * Automatically adapts direction based on widget orientation.
+ * 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
+ * @example Default, inherits parent Widget channel color
  * ```tsx
- * <Widget gestures={{ slide: { value, onChange } }}>
- *   <Widget.SliderFill value={brightness} color="rgb(255, 200, 0)" />
+ * <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";
-export interface WidgetSliderFillProps {
+interface WidgetSliderFillProps {
     /** Current value (0-100) */
     value: number;
-    /** Fill color (CSS color string) */
+    /**
+     * 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).
+     */
     color?: string;
-    /** Show glow effect */
-    glow?: boolean;
-    /** Opacity of the fill (0-1) */
-    opacity?: number;
-    /** Whether slider is currently being dragged (disables transition) */
+    /** Whether the slider is currently being dragged (disables transition) */
     isDragging?: boolean;
     /** Additional CSS classes */
     class?: string;
 }
 /**
- * Animated slider fill that adapts to widget orientation
+ * Animated slider fill that adapts to widget orientation.
  */
 export declare function WidgetSliderFill(props: WidgetSliderFillProps): JSX.Element;
+export {};

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

@@ -16,7 +16,7 @@
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetContentProps {
+interface WidgetContentProps {
     /** Additional CSS classes */
     class?: string;
     /** Content children */
@@ -27,3 +27,4 @@ export interface WidgetContentProps {
  * Ensures proper z-index layering for title, status, and controls
  */
 export declare function WidgetContent(props: WidgetContentProps): JSX.Element;
+export {};

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

@@ -15,7 +15,7 @@
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetEmptyStateProps {
+interface WidgetEmptyStateProps {
     /** Icon to display (optional) */
     icon?: JSX.Element;
     /** Main title/heading */
@@ -32,3 +32,4 @@ export interface WidgetEmptyStateProps {
  * Shows centered placeholder when widget has no content
  */
 export declare function WidgetEmptyState(props: WidgetEmptyStateProps): JSX.Element;
+export {};

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

@@ -1,48 +1,46 @@
 /**
  * WidgetIcon Component
  *
- * Icon component with automatic sizing and glow effect.
- * Supports both Tailwind classes and dynamic CSS colors for background/glow.
+ * 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 Static color (Tailwind classes)
+ * @example Default, inherits the parent Widget's channel color
  * ```tsx
- * <Widget.Icon
- *   icon={<Power />}
- *   color="bg-blue-500 dark:bg-blue-400"
- *   glow="shadow-blue-500/50 dark:shadow-blue-400/50"
- * />
+ * <Widget tone="info">
+ *   <Widget.Icon icon={<Power />} />
+ * </Widget>
  * ```
  *
- * @example Dynamic color (CSS color string — adaptive contrast)
+ * @example Per-icon override (e.g. light bulb showing its actual rgb_color)
  * ```tsx
- * <Widget.Icon
- *   icon={<Lightbulb />}
- *   dynamicColor="hsl(320, 100%, 50%)"
- * />
+ * <Widget.Icon icon={<Lightbulb />} color="oklch(0.85 0.2 60)" />
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetIconProps {
+interface WidgetIconProps {
     /** Icon component (JSX.Element) */
     icon: JSX.Element;
-    /** Background color as Tailwind class (e.g. "bg-blue-500 dark:bg-blue-400") */
-    color?: string;
-    /** Glow/shadow effect as Tailwind class (e.g. "shadow-blue-500/50") */
-    glow?: string;
     /**
-     * Dynamic CSS color string (rgb, hsl, hex).
-     * When provided, icon background and glow are derived adaptively from this color.
-     * Takes precedence over `color` and `glow` props.
+     * 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.
      */
-    dynamicColor?: string;
+    color?: string;
     /** Reduce opacity */
     dimmed?: boolean;
-    /** Number of entities - creates stacked background effect (1 = single, 2+ = stacked backgrounds) */
+    /** 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
+ * 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/WidgetMetrics.d.ts

@@ -14,7 +14,7 @@
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetMetricsProps {
+interface WidgetMetricsProps {
     /** Layout direction (default: "auto" - horizontal for horizontal widgets, vertical for others) */
     direction?: "horizontal" | "vertical" | "auto";
     /** Additional CSS classes */
@@ -22,11 +22,11 @@ export interface WidgetMetricsProps {
     /** Metric items */
     children: JSX.Element;
 }
-export interface WidgetMetricsComponent {
+interface WidgetMetricsComponent {
     (props: WidgetMetricsProps): JSX.Element;
     Item: typeof WidgetMetricsItem;
 }
-export interface WidgetMetricsItemProps {
+interface WidgetMetricsItemProps {
     /** Metric label */
     label: string;
     /** Metric value */
@@ -43,5 +43,6 @@ export interface WidgetMetricsItemProps {
 /**
  * Individual metric item
  */
-export declare function WidgetMetricsItem(props: WidgetMetricsItemProps): JSX.Element;
+declare function WidgetMetricsItem(props: WidgetMetricsItemProps): JSX.Element;
 export declare const WidgetMetrics: WidgetMetricsComponent;
+export {};

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

@@ -9,7 +9,7 @@
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetStatusProps {
+interface WidgetStatusProps {
     /** Reduce opacity further */
     dimmed?: boolean;
     /** Additional CSS classes */
@@ -24,3 +24,4 @@ export interface WidgetStatusProps {
  * Positioned above other content with proper z-index
  */
 export declare function WidgetStatus(props: WidgetStatusProps): JSX.Element;
+export {};

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

@@ -14,7 +14,7 @@
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetSubtitleProps {
+interface WidgetSubtitleProps {
     /** Whether to dim the subtitle */
     dimmed?: boolean;
     /** Additional CSS classes */
@@ -26,3 +26,4 @@ export interface WidgetSubtitleProps {
  * Widget subtitle component with auto-responsive typography
  */
 export declare function WidgetSubtitle(props: WidgetSubtitleProps): JSX.Element;
+export {};

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

@@ -14,7 +14,7 @@
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetTitleProps {
+interface WidgetTitleProps {
     /** Optional badge count */
     badge?: number;
     /** Additional CSS classes */
@@ -27,3 +27,4 @@ export interface WidgetTitleProps {
  * Positioned above other content with proper z-index
  */
 export declare function WidgetTitle(props: WidgetTitleProps): JSX.Element;
+export {};

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

@@ -15,7 +15,7 @@
  * ```
  */
 import type { JSX } from "solid-js";
-export interface WidgetValueProps {
+interface WidgetValueProps {
     /** The value to display */
     value: number | string;
     /** Unit of measurement */
@@ -29,3 +29,4 @@ export interface WidgetValueProps {
  * Widget value component with auto-formatting and interpretation
  */
 export declare function WidgetValue(props: WidgetValueProps): JSX.Element;
+export {};

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

@@ -12,9 +12,9 @@
  * </Widget>
  * ```
  *
- * @example With gradient and loading
+ * @example With CSS gradient and loading
  * ```tsx
- * <Widget gradient="bg-gradient-to-br from-blue-500/40 to-blue-700/40" loading={isLoading}>
+ * <Widget gradient="linear-gradient(135deg, oklch(0.7 0.2 30), oklch(0.5 0.18 270))" loading={isLoading}>
  *   {children}
  * </Widget>
  * ```
@@ -30,8 +30,9 @@ import type { WidgetSubtitle as WidgetSubtitleType } from "../components/WidgetS
 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 { WidgetOrientation, WidgetSize, WidgetVariantConfig } from "../types";
-export interface WidgetEmptyStateConfig {
+import type { WidgetVariantConfig } from "../types";
+import type { Tone } from "../theming/tone";
+interface WidgetEmptyStateConfig {
     /** Icon to display */
     icon?: JSX.Element;
     /** Main title/heading */
@@ -39,22 +40,40 @@ export interface WidgetEmptyStateConfig {
     /** Descriptive message */
     message?: string;
 }
-export interface WidgetProps {
+interface WidgetProps {
     /** Widget variant (string ID or inline config) */
     variant?: string | WidgetVariantConfig;
-    /** Gradient background (Tailwind classes like "bg-gradient-to-br from-cyan-600/40 to-blue-700/40") */
+    /**
+     * 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.
+     */
+    tone?: Tone;
+    /**
+     * CSS color string (oklch, hsl, hex, rgb, var()).
+     * Sets `--widget-color` directly. Overrides `tone` when both supplied.
+     */
+    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`.
+     */
+    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.
+     */
     gradient?: string;
     /** Show loading overlay */
     loading?: boolean;
-    /** Background glow color (Tailwind color like "bg-blue-500") (runtime override) */
-    backgroundGlow?: string;
     /** 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 and applies gray gradient */
+    /** Empty state configuration, when provided shows empty state UI inside the shell */
     emptyState?: WidgetEmptyStateConfig;
     /**
      * Gesture handlers from `useWidgetGestures`. When provided, Widget binds
@@ -65,7 +84,7 @@ export interface WidgetProps {
     /** Child elements */
     children?: JSX.Element;
 }
-export interface WidgetComponent {
+interface WidgetComponent {
     (props: WidgetProps): JSX.Element;
     Content: typeof WidgetContentType;
     Icon: typeof WidgetIconType;
@@ -77,19 +96,5 @@ export interface WidgetComponent {
     EmptyState: typeof WidgetEmptyStateType;
     SliderFill: typeof WidgetSliderFillType;
 }
-/**
- * Classify widget size based on grid dimensions
- */
-export declare function classifySize(gridWidth: number, gridHeight: number): WidgetSize;
-/**
- * Detect orientation from dimensions based on aspect ratio
- * Used for gesture direction (slide horizontal vs vertical)
- */
-export declare function detectOrientation(width: number, height: number): WidgetOrientation;
-/**
- * Detect content layout direction
- * Used for UI arrangement (stack vertically vs horizontally)
- * Considers height threshold - tall widgets benefit from vertical stacking
- */
-export declare function detectContentLayout(width: number, height: number): WidgetOrientation;
 export declare const Widget: WidgetComponent;
+export {};

package/dist/framework/gestures/cursors.d.ts

@@ -3,7 +3,7 @@
  * Each cursor is a data URI embedded inline — no external files needed.
  * Hotspot coordinates are included for proper click positioning.
  */
-export interface CursorDef {
+interface CursorDef {
     css: string;
     hotspotX: number;
     hotspotY: number;
@@ -15,3 +15,4 @@ export declare const cursors: {
     readonly slideVertical: CursorDef;
     readonly slideAuto: CursorDef;
 };
+export {};

package/dist/framework/gestures/haptics.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Haptic feedback for gesture transitions.
+ *
+ * Resolution order at runtime:
+ *   1. Capacitor Haptics plugin (Android/iOS native) — richer patterns
+ *   2. `navigator.vibrate` (Android Chrome/WebView)
+ *   3. silent (desktop, iOS Safari)
+ *
+ * No build-time dependency on @capacitor/haptics — the host app installs the
+ * plugin; we probe `window.Capacitor.Plugins.Haptics` at call time.
+ */
+export declare const haptics: {
+    /** Light confirmation — fires when slide gesture arms after user holds still. */
+    tick(): void;
+    /** Medium bump — fires when hold gesture commits (detail opening). */
+    bump(): void;
+    /** Stronger pulse — reserved for edit-mode pickup (future use). */
+    pulse(): void;
+};

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

@@ -1,32 +1,22 @@
 /**
- * Widget Gestures Hook
+ * Widget Gestures Hook — Mobile-aware
  *
- * Provides gesture handling for widgets with automatic conflict resolution.
- * Ported from React reference, adapted for SolidJS:
- * - Uses mutable state object instead of useRef (imperative gesture tracking)
- * - Accepts config/orientation as accessors for reactivity
- * - Returns native PointerEvent handlers (not React.PointerEvent)
- * - Callers bind via on:pointerdown={handlers.onPointerDown}
+ * Two grammars by pointer type:
  *
- * @example
- * ```tsx
- * const gestures = useWidgetGestures(
- *   () => ({
- *     tap: handleTap,
- *     hold: { action: handleHold, delay: 300 },
- *     slide: {
- *       value: brightness(),
- *       onChange: setBrightness,
- *       min: 0,
- *       max: 100,
- *       orientation: "auto",
- *     },
- *   }),
- *   () => ctx.orientation(),
- * );
+ *   TOUCH (phone, tablet):
+ *     - tap    → primary action
+ *     - hold   → detail dialog (with haptic bump)
+ *     - slide  → DISABLED. Fine control lives in the detail dialog instead.
+ *     This eliminates the slide-vs-page-scroll conflict that makes mobile
+ *     gestures fragile. `touch-action: manipulation` ensures the browser
+ *     handles scroll natively without our interference.
  *
- * return <div on:pointerdown={gestures.onPointerDown} on:pointermove={gestures.onPointerMove} on:pointerup={gestures.onPointerUp} on:pointercancel={gestures.onPointerCancel}>...</div>;
- * ```
+ *   MOUSE / PEN (desktop, hybrid devices):
+ *     - tap, hold, slide all active. Slide arms immediately on pointerdown —
+ *     no scroll conflict to worry about (mouse uses wheel for scroll).
+ *
+ * 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";
 export interface GestureHandlers {
@@ -43,24 +33,12 @@ export interface GestureHandlers {
      */
     bindElement: (el: HTMLElement) => void;
     /**
-     * CSS `touch-action` value for the gesture root. Horizontal slide → `pan-y`
-     * (page scrolls vertically, slider owns horizontal). Vertical slide → `pan-x`.
-     * Tap/hold only → `manipulation`. Without this, mobile browsers cancel the
-     * pointer mid-slide once they decide the touch is a pan.
+     * CSS `touch-action` for the gesture root. Always `manipulation` when any
+     * gesture is configured — mobile slide is intentionally dropped, so the
+     * browser owns scroll completely on touch surfaces.
      */
     touchAction: () => string;
-    /** Cancel any pending hold/slide timers. Call on component unmount via onCleanup. */
+    /** Cancel any pending hold timer. Call on component unmount via onCleanup. */
     dispose: () => void;
 }
-/**
- * Widget gestures hook with conflict resolution
- *
- * Features:
- * - Axis locking: Once slide direction is detected, locks to that axis
- * - Scroll prevention: Blocks page scroll when sliding along widget axis
- * - Tap/hold/slide gesture support with automatic conflict resolution
- *
- * @param config - Accessor returning gesture configuration
- * @param orientation - Accessor returning widget orientation (for auto slide orientation)
- */
 export declare function useWidgetGestures(config: () => GestureConfig, orientation?: () => WidgetOrientation): GestureHandlers;

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

@@ -4,7 +4,6 @@
  * All hooks for widget development: context, responsive, dialog, form,
  * config, entity, entity group, debug data, and gestures.
  */
-export { type GestureHandlers, useWidgetGestures } from "../gestures/use-widget-gestures";
 export { type UseDebugDataOptions, useDebugData } from "./use-debug-data";
 export { type UseWidgetConfigOptions, type UseWidgetConfigReturn, useWidgetConfig, } from "./use-widget-config";
 export { type BridgeableWidgetContext, type BridgeFns, type ReactiveWidgetContext, useWidgetContext, warnIfStub, WidgetCtx, } from "./use-widget-context";

package/dist/framework/index.d.ts

@@ -49,9 +49,9 @@ export { type GestureHandlers, useWidgetGestures } from "./gestures/use-widget-g
 export { getSpacingClass, spacing } from "./design-system/spacing";
 export { typography } from "./design-system/typography";
 export { WIDGET_Z, type WidgetZIndex } from "./design-system/z-index";
-export { type AdaptiveIconColors, deriveAdaptiveIconColors, GRADIENT_NAMES, GRADIENT_PRESET_KEYS, GRADIENT_PRESETS, type GradientPreset, getGradient, getGradientFromString, gradientColorPresets, stateColors, type WidgetColorPreset, } from "./theming";
+export { GRADIENT_NAMES, GRADIENT_PRESET_KEYS, GRADIENT_PRESETS, type GradientPreset, getGradient, getGradientFromString, gradientColorPresets, injectTokens, stateColors, type Tone, ToneSchema, type WidgetColorPreset, } from "./theming";
 export { applyCssVars, applyLayout, builtInVariants, classicGlass, compactHorizontal, composeVariants, createFlexLayout, extendVariant, getBuiltInVariant, getBuiltInVariantIds, isBuiltInVariant, mergeVariants, minimal, } from "./variants";
 export { widgetFields } from "./fields";
 export { extractDefaults, toFormSchema } from "./to-form-schema";
 export { allEntitiesInState, anyEntityInState, calculateLightGroup, calculateSensorGroup, cn, countActiveEntities, countAvailableEntities, countEntitiesByState, createEmptyStateConfig, type EmptyStateConfigOptions, formatValue, getEntityAttribute, getEntityState, interpretValue, isEntityActive, isEntityAvailable, type LightGroupResult, type SensorGroupResult, type SensorGroupType, type WidgetEmptyStateConfig, } from "./utils";
-export type { AbsoluteLayoutStrategy, BaseComponentProps, ColorVariant, CustomLayoutStrategy, ElementConfig, EntityView, FlexLayoutStrategy, GestureConfig, GradientConfig, GridLayoutStrategy, HoldGestureConfig, ImageOverlay, InteractionConfig, LayoutStrategy, PositionConfig, SlideGestureConfig, SpacingScale, VariantPlugins, VariantRegistry, WidgetContextValue, WidgetDimensions, WidgetElement, WidgetOrientation, WidgetSize, WidgetStyles, WidgetVariant, WidgetVariantConfig, } from "./types";
+export type { AbsoluteLayoutStrategy, BaseComponentProps, CustomLayoutStrategy, ElementConfig, EntityView, FlexLayoutStrategy, GestureConfig, GradientConfig, GridLayoutStrategy, HoldGestureConfig, ImageOverlay, InteractionConfig, LayoutStrategy, PositionConfig, SlideGestureConfig, SpacingScale, VariantPlugins, VariantRegistry, WidgetContextValue, WidgetDimensions, WidgetElement, WidgetOrientation, WidgetSize, WidgetStyles, WidgetVariant, WidgetVariantConfig, } from "./types";

package/dist/framework/layout/WidgetStack.d.ts

@@ -14,7 +14,7 @@
  */
 import type { JSX } from "solid-js";
 import type { SpacingScale } from "../types";
-export interface WidgetStackProps {
+interface WidgetStackProps {
     /** Spacing between items (default: "S2") */
     spacing?: SpacingScale;
     /** Additional CSS classes */
@@ -26,3 +26,4 @@ export interface WidgetStackProps {
  * Vertical stack layout with responsive spacing
  */
 export declare function WidgetStack(props: WidgetStackProps): JSX.Element;
+export {};

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

@@ -4,5 +4,6 @@
  * Simple color palette for entity states.
  * Widgets can use these or define their own logic.
  */
-export { type AdaptiveIconColors, deriveAdaptiveIconColors } from "./adaptive-color";
 export { GRADIENT_NAMES, GRADIENT_PRESET_KEYS, GRADIENT_PRESETS, type GradientPreset, getGradient, getGradientFromString, gradientColorPresets, stateColors, type WidgetColorPreset, } from "./colors";
+export { ToneSchema, type Tone } from "./tone";
+export { injectTokens } from "./tokens";

package/dist/framework/theming/tokens.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Minimal document-shape needed for token injection. Allows tests to pass
+ * a stub without a full DOM implementation.
+ */
+interface InjectTokensRoot {
+    head: {
+        appendChild: (node: unknown) => void;
+        querySelector?: (sel: string) => unknown;
+    };
+    createElement: (tag: string) => {
+        setAttribute: (name: string, value: string) => void;
+        textContent: string | null;
+    };
+}
+/**
+ * Inject the SDK tokens stylesheet into <head>. Idempotent across:
+ *  - Repeated calls within the same module instance (boolean sentinel).
+ *  - Multiple SDK module instances (DOM sentinel data-glasshome-tokens).
+ *  - SSR / non-browser environments (no-op when document is undefined).
+ */
+export declare function injectTokens(doc?: InjectTokensRoot): void;
+/** Test-only: reset the module-level sentinel. Not exported from the package root. */
+export declare function __resetInjectedForTests(): void;
+export {};

package/dist/framework/theming/tone.d.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+export declare const ToneSchema: z.ZodEnum<{
+    success: "success";
+    warning: "warning";
+    danger: "danger";
+    info: "info";
+    neutral: "neutral";
+    accent: "accent";
+}>;
+export type Tone = z.infer<typeof ToneSchema>;

package/dist/framework/types.d.ts

@@ -96,10 +96,6 @@ export interface GestureConfig {
  * Spacing scale
  */
 export type SpacingScale = "S1" | "S2" | "S3" | "S4";
-/**
- * Color variants for common components
- */
-export type ColorVariant = "blue" | "green" | "red" | "yellow" | "purple" | "gray" | string;
 /**
  * Image overlay types
  */