@glasshome/widget-sdk 0.1.0

package/dist/framework/dialogs/WidgetDialog.d.ts

@@ -0,0 +1,47 @@
+import { type JSX, type ParentComponent } from "solid-js";
+export interface WidgetDialogTab {
+    id: string;
+    label: string;
+    icon: JSX.Element;
+    content: JSX.Element;
+}
+export interface WidgetDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    onSave?: () => void;
+    hasUnsavedChanges?: boolean;
+    onDelete?: () => void;
+    editContent?: JSX.Element;
+    controlsContent?: JSX.Element;
+    debugContent?: JSX.Element;
+    debugData?: string | Record<string, unknown>;
+    tabs?: WidgetDialogTab[];
+    class?: string;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    defaultTab?: string;
+    headerActions?: JSX.Element;
+    ResponsiveDialog: ParentComponent<{
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+    }>;
+    ResponsiveDialogContent: ParentComponent<{
+        class?: string;
+    }>;
+    ResponsiveDialogHeader: ParentComponent<{
+        class?: string;
+    }>;
+    ResponsiveDialogTitle: ParentComponent<{
+        class?: string;
+    }>;
+    ResponsiveDialogDescription: ParentComponent<{
+        class?: string;
+    }>;
+    Button: ParentComponent<{
+        size?: string;
+        variant?: string;
+        onClick?: () => void;
+        class?: string;
+    }>;
+}
+export declare function WidgetDialog(props: WidgetDialogProps): JSX.Element;

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

@@ -0,0 +1,4 @@
+/**
+ * Dialog Components - Barrel Export
+ */
+export { WidgetDialog, type WidgetDialogProps, type WidgetDialogTab } from "./WidgetDialog";

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

@@ -0,0 +1,17 @@
+/**
+ * Custom SVG cursors for widget gestures.
+ * Each cursor is a data URI embedded inline — no external files needed.
+ * Hotspot coordinates are included for proper click positioning.
+ */
+export interface CursorDef {
+    css: string;
+    hotspotX: number;
+    hotspotY: number;
+}
+export declare const cursors: {
+    readonly tap: CursorDef;
+    readonly hold: CursorDef;
+    readonly slideHorizontal: CursorDef;
+    readonly slideVertical: CursorDef;
+    readonly slideAuto: CursorDef;
+};

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

@@ -0,0 +1,53 @@
+/**
+ * Widget Gestures Hook
+ *
+ * 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}
+ *
+ * @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(),
+ * );
+ *
+ * return <div on:pointerdown={gestures.onPointerDown} on:pointermove={gestures.onPointerMove} on:pointerup={gestures.onPointerUp} on:pointercancel={gestures.onPointerCancel}>...</div>;
+ * ```
+ */
+import type { GestureConfig, WidgetOrientation } from "../types";
+export interface GestureHandlers {
+    onPointerDown: (e: PointerEvent) => void;
+    onPointerMove: (e: PointerEvent) => void;
+    onPointerUp: (e: PointerEvent) => void;
+    onPointerCancel: (e: PointerEvent) => void;
+    /** Sets the correct cursor on the element. Bind via on:pointerenter. */
+    onPointerEnter: (e: PointerEvent) => void;
+    /** Cancel any pending hold/slide timers. 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

@@ -0,0 +1,15 @@
+/**
+ * Framework Hooks - Barrel Export
+ *
+ * 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 ReactiveWidgetContext, useWidgetContext, WidgetCtx } from "./use-widget-context";
+export { useWidgetDialog, type WidgetDialogReturn } from "./use-widget-dialog";
+export { type UseWidgetEntityOptions, type UseWidgetEntityResult, useWidgetEntity, } from "./use-widget-entity";
+export { type AggregationPreset, type UseWidgetEntityGroupOptions, type UseWidgetEntityGroupResult, useWidgetEntityGroup, } from "./use-widget-entity-group";
+export { type UseWidgetFormOptions, type UseWidgetFormReturn, useWidgetForm, } from "./use-widget-form";
+export { useWidgetResponsive, type WidgetResponsiveUtils } from "./use-widget-responsive";

package/dist/framework/hooks/use-debug-data.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Debug Data Hook
+ *
+ * Generates standardized debug data structure for widget dialogs.
+ * Provides a consistent format for troubleshooting widget configuration and entity state.
+ *
+ * @example
+ * ```tsx
+ * const debugData = useDebugData({
+ *   widgetConfig: {
+ *     id: config.id,
+ *     type: config.type,
+ *     title: config.title,
+ *     entityIds: config.entityIds,
+ *   },
+ *   entities: () => coverEntities,
+ *   customEntityFields: (entity) => ({
+ *     current_position: entity.attributes?.current_position,
+ *   }),
+ * });
+ * ```
+ */
+import { type Accessor } from "solid-js";
+import type { EntityView } from "../types";
+export interface UseDebugDataOptions {
+    /** Widget configuration summary */
+    widgetConfig: {
+        id: string;
+        type: string;
+        title?: string;
+        entityIds?: string[];
+    };
+    /** Reactive entities accessor */
+    entities: Accessor<EntityView[]>;
+    /** Additional data to include in debug output */
+    additionalData?: Record<string, unknown>;
+    /** Custom entity fields to include per entity */
+    customEntityFields?: (entity: EntityView) => Record<string, unknown>;
+}
+/**
+ * Hook for generating standardized debug data structure
+ *
+ * @param options - Debug data configuration
+ * @returns Reactive debug data object or undefined if no entities
+ */
+export declare function useDebugData(options: UseDebugDataOptions): Accessor<Record<string, unknown> | undefined>;

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

@@ -0,0 +1,48 @@
+/**
+ * Widget Config Hook
+ *
+ * Generalized config management that accepts save/delete callbacks.
+ * Host-agnostic: the host application provides the actual persistence logic.
+ *
+ * @example
+ * ```tsx
+ * const { save, remove, isSaving, isDeleting } = useWidgetConfig({
+ *   onSave: async (config) => {
+ *     await api.saveWidgetConfig(widgetId, config);
+ *   },
+ *   onDelete: async () => {
+ *     await api.deleteWidget(widgetId);
+ *   },
+ * });
+ *
+ * // In a form submit handler:
+ * save({ title: "My Widget", entityIds: ["sensor.temp"] });
+ * ```
+ */
+export interface UseWidgetConfigOptions<TConfig = Record<string, unknown>> {
+    /** Callback to save widget configuration */
+    onSave?: (config: TConfig) => void | Promise<void>;
+    /** Callback to delete widget */
+    onDelete?: () => void | Promise<void>;
+    /** Callback after successful save */
+    onSaveSuccess?: () => void;
+    /** Callback after successful delete */
+    onDeleteSuccess?: () => void;
+}
+export interface UseWidgetConfigReturn<TConfig = Record<string, unknown>> {
+    /** Save widget configuration */
+    save: (config: TConfig) => Promise<void>;
+    /** Delete widget */
+    remove: () => Promise<void>;
+    /** Whether save is in progress */
+    isSaving: () => boolean;
+    /** Whether delete is in progress */
+    isDeleting: () => boolean;
+}
+/**
+ * Hook for managing widget configuration save/delete operations
+ *
+ * @param options - Configuration with save/delete callbacks
+ * @returns Save and delete functions with loading states
+ */
+export declare function useWidgetConfig<TConfig = Record<string, unknown>>(options?: UseWidgetConfigOptions<TConfig>): UseWidgetConfigReturn<TConfig>;

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

@@ -0,0 +1,46 @@
+/**
+ * Widget Context Hook
+ *
+ * Provides access to widget context (size, orientation, dimensions, edit mode).
+ *
+ * @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
+ */
+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;
+}
+/**
+ * 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/hooks/use-widget-dialog.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Widget Dialog Hook
+ *
+ * Provides signal-based dialog state management with optional tab tracking.
+ *
+ * @example
+ * ```tsx
+ * function MyWidget() {
+ *   const { showDialog, openDialog, closeDialog } = useWidgetDialog();
+ *
+ *   return (
+ *     <>
+ *       <Widget gestures={{ hold: { action: openDialog } }}>
+ *         {/* widget content *\/}
+ *       </Widget>
+ *       <WidgetDialog
+ *         open={showDialog()}
+ *         onOpenChange={setShowDialog}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export interface WidgetDialogReturn {
+    /** Current dialog open state accessor */
+    showDialog: () => boolean;
+    /** Set dialog state directly */
+    setShowDialog: (open: boolean) => void;
+    /** Open the dialog */
+    openDialog: () => void;
+    /** Close the dialog */
+    closeDialog: () => void;
+    /** Current active tab accessor */
+    activeTab: () => string;
+    /** Set active tab */
+    setActiveTab: (tab: string) => void;
+}
+/**
+ * Hook for managing widget dialog state
+ *
+ * @param defaultTab - Default active tab (default: "edit")
+ * @returns Dialog state and control functions
+ */
+export declare function useWidgetDialog(defaultTab?: string): WidgetDialogReturn;

package/dist/framework/hooks/use-widget-entity-group.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Widget Entity Group Hook
+ *
+ * Generalized multi-entity data binding that accepts a signal-based array data source.
+ * Supports aggregation presets for common entity domains (lights, sensors, etc.).
+ *
+ * @example
+ * ```tsx
+ * // Host provides entities as a signal array
+ * const entities = () => syncLayer.getEntities(config.entityIds);
+ *
+ * const { groupData, emptyState, hasEntities, count } = useWidgetEntityGroup({
+ *   entities,
+ *   aggregationMode: () => "light",
+ *   emptyStateConfig: {
+ *     icon: <Lightbulb />,
+ *     title: "No lights",
+ *     message: "Configure this widget to add lights",
+ *   },
+ * });
+ * ```
+ */
+import { type Accessor } from "solid-js";
+import type { EntityView } from "../types";
+import type { WidgetEmptyStateConfig } from "../utils/empty-state";
+import { type LightGroupResult, type SensorGroupResult, type SensorGroupType } from "../utils/entity-aggregation";
+/**
+ * Aggregation preset types for common entity domains
+ */
+export type AggregationPreset = "binary-sensor" | "light" | "sensor" | "switch" | "none";
+export interface UseWidgetEntityGroupOptions<TData = unknown> {
+    /** Reactive entities array accessor */
+    entities: Accessor<EntityView[]>;
+    /** Optional custom data calculation function */
+    calculateGroupData?: (entities: EntityView[]) => TData;
+    /** Aggregation mode accessor (optional, alternative to calculateGroupData) */
+    aggregationMode?: Accessor<AggregationPreset | undefined>;
+    /** Sensor group calculation mode (for "sensor" preset) */
+    sensorGroupType?: Accessor<SensorGroupType>;
+    /** All entities mode - all must be on for group to be "on" (for "light"/"switch" presets) */
+    allEntitiesMode?: boolean;
+    /** Empty state configuration when no entities are available */
+    emptyStateConfig: WidgetEmptyStateConfig;
+    /** Minimum entities required (default: 1) */
+    minEntities?: number;
+}
+export interface UseWidgetEntityGroupResult<TData = unknown> {
+    /** All entities accessor */
+    entities: Accessor<EntityView[]>;
+    /** Custom calculated data (null if insufficient entities or no calculateGroupData provided) */
+    groupData: Accessor<TData | null>;
+    /** Aggregated data from preset (undefined if no aggregation preset used) */
+    aggregatedData: Accessor<LightGroupResult | SensorGroupResult | undefined>;
+    /** Empty state config (undefined if entities exist) */
+    emptyState: Accessor<WidgetEmptyStateConfig | undefined>;
+    /** Whether minimum entities are present */
+    hasEntities: Accessor<boolean>;
+    /** Entity count */
+    count: Accessor<number>;
+}
+/**
+ * Hook for multi-entity widgets with integrated empty state support and aggregation presets
+ *
+ * @param options - Entities source, aggregation config, and empty state
+ * @returns Reactive group data, aggregation, empty state, and counts
+ */
+export declare function useWidgetEntityGroup<TData = unknown>(options: UseWidgetEntityGroupOptions<TData>): UseWidgetEntityGroupResult<TData>;

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

@@ -0,0 +1,53 @@
+/**
+ * Widget Entity Hook
+ *
+ * Generalized single-entity data binding that accepts a signal-based data source.
+ * The SDK does NOT import sync-layer -- the host provides entity data via Accessor.
+ *
+ * @example
+ * ```tsx
+ * // Host provides entity data as a signal
+ * const entity = () => syncLayer.getEntity("sensor.temperature");
+ *
+ * const { data, emptyState, hasEntity } = useWidgetEntity({
+ *   entity,
+ *   calculateData: (e) => ({
+ *     temperature: parseFloat(e.state),
+ *     unit: e.unitOfMeasurement ?? "C",
+ *   }),
+ *   emptyStateConfig: {
+ *     icon: <Thermometer />,
+ *     title: "No climate entity",
+ *     message: "Configure this widget to add a climate device",
+ *   },
+ * });
+ * ```
+ */
+import { type Accessor } from "solid-js";
+import type { EntityView } from "../types";
+import type { WidgetEmptyStateConfig } from "../utils/empty-state";
+export interface UseWidgetEntityOptions<TData> {
+    /** Reactive entity accessor (null when not available) */
+    entity: Accessor<EntityView | null>;
+    /** Function to calculate widget-specific data from entity */
+    calculateData: (entity: EntityView) => TData;
+    /** Empty state configuration when entity is not available */
+    emptyStateConfig: WidgetEmptyStateConfig;
+}
+export interface UseWidgetEntityResult<TData> {
+    /** The entity (null if not found) */
+    entity: Accessor<EntityView | null>;
+    /** Calculated widget data (null if no entity) */
+    data: Accessor<TData | null>;
+    /** Empty state config (undefined if entity exists) */
+    emptyState: Accessor<WidgetEmptyStateConfig | undefined>;
+    /** Whether entity exists */
+    hasEntity: Accessor<boolean>;
+}
+/**
+ * Hook for single-entity widgets with integrated empty state support
+ *
+ * @param options - Entity source, data calculation, and empty state config
+ * @returns Reactive entity data, empty state, and existence check
+ */
+export declare function useWidgetEntity<TData>(options: UseWidgetEntityOptions<TData>): UseWidgetEntityResult<TData>;

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

@@ -0,0 +1,79 @@
+/**
+ * Widget Form Hook
+ *
+ * Wraps @modular-forms/solid with zodForm validation for widget configuration forms.
+ * This is the SolidJS equivalent of the React useWidgetForm that used react-hook-form.
+ *
+ * @example
+ * ```tsx
+ * import { z } from "zod";
+ *
+ * const schema = z.object({
+ *   title: z.string().optional(),
+ *   entityIds: z.array(z.string()).min(1),
+ *   showIcon: z.boolean(),
+ * });
+ *
+ * type FormValues = z.infer<typeof schema>;
+ *
+ * function MyWidgetSettings() {
+ *   const { form, Form, Field, isDirty, handleSubmit } = useWidgetForm<FormValues>({
+ *     schema,
+ *     initialValues: {
+ *       title: config.title ?? "",
+ *       entityIds: config.entityIds ?? [],
+ *       showIcon: true,
+ *     },
+ *     onSubmit: async (values) => {
+ *       await saveConfig(values);
+ *     },
+ *   });
+ *
+ *   return (
+ *     <Form onSubmit={handleSubmit}>
+ *       <Field name="title">
+ *         {(field, props) => (
+ *           <input {...props} value={field.value} />
+ *         )}
+ *       </Field>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ */
+import { type FieldValues, type FormStore, getValue, reset, type SubmitHandler, setValue } from "@modular-forms/solid";
+import type { z } from "zod";
+export interface UseWidgetFormOptions<TValues extends FieldValues> {
+    /** Zod schema for form validation */
+    schema: z.ZodType<TValues, any, any>;
+    /** Initial form values */
+    initialValues: TValues;
+    /** Submit handler */
+    onSubmit?: (values: TValues) => void | Promise<void>;
+}
+export interface UseWidgetFormReturn<TValues extends FieldValues> {
+    /** The form store */
+    form: FormStore<TValues, undefined>;
+    /** Whether form has unsaved changes */
+    isDirty: () => boolean;
+    /** Whether form is currently submitting */
+    isSubmitting: () => boolean;
+    /** Handle form submission */
+    handleSubmit: SubmitHandler<TValues>;
+    /** Get a field value */
+    getValue: typeof getValue;
+    /** Set a field value */
+    setValue: typeof setValue;
+    /** Reset form to initial values */
+    reset: typeof reset;
+}
+/**
+ * Hook for widget configuration forms using @modular-forms/solid
+ *
+ * Callers use the returned form store with `<Form>` and `<Field>` components
+ * imported directly from @modular-forms/solid.
+ *
+ * @param options - Form configuration with schema, initial values, and submit handler
+ * @returns Form store, derived state, and utility functions
+ */
+export declare function useWidgetForm<TValues extends FieldValues>(options: UseWidgetFormOptions<TValues>): UseWidgetFormReturn<TValues>;

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

@@ -0,0 +1,41 @@
+/**
+ * Widget Responsive Hook
+ *
+ * Provides convenience utilities for responsive behavior based on widget size.
+ * Uses createMemo for each derived boolean to avoid unnecessary recalculation.
+ *
+ * @example
+ * ```tsx
+ * const responsive = useWidgetResponsive();
+ *
+ * return (
+ *   <div>
+ *     <Show when={responsive.showDetail()}>
+ *       <DetailedMetrics />
+ *     </Show>
+ *     <Show when={responsive.isCompact()}>
+ *       <CompactView />
+ *     </Show>
+ *   </div>
+ * );
+ * ```
+ */
+import type { WidgetSize } from "../types";
+export interface WidgetResponsiveUtils {
+    /** xs or sm */
+    isCompact: () => boolean;
+    /** lg or xl */
+    isLarge: () => boolean;
+    /** md or larger */
+    showDetail: () => boolean;
+    /** Check if current size matches any of the provided sizes */
+    showOn: (sizes: WidgetSize[]) => boolean;
+    /** Check if current size does NOT match any of the provided sizes */
+    hideOn: (sizes: WidgetSize[]) => boolean;
+    /** Check if a size condition matches (e.g., "md+", "sm-") */
+    matches: (condition: string) => boolean;
+}
+/**
+ * Get responsive utilities based on widget context size
+ */
+export declare function useWidgetResponsive(): WidgetResponsiveUtils;

package/dist/framework/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Widget Framework - Main Barrel Export
+ *
+ * A SolidJS framework for building GlassHome widgets with minimal boilerplate.
+ * This is the single entry point for the entire framework module.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Widget,
+ *   useWidgetGestures,
+ *   useWidgetDialog,
+ *   spacing,
+ *   cn,
+ * } from "@glasshome/widget-sdk";
+ *
+ * export function MyWidget(props) {
+ *   const { showDialog, openDialog } = useWidgetDialog();
+ *   const gestures = useWidgetGestures(
+ *     () => ({ tap: handleTap, hold: { action: openDialog } }),
+ *     () => ctx.orientation(),
+ *   );
+ *
+ *   return (
+ *     <Widget>
+ *       <Widget.Icon icon={<Power />} color="blue" />
+ *       <Widget.Title>My Widget</Widget.Title>
+ *       <Widget.Status>Active</Widget.Status>
+ *     </Widget>
+ *   );
+ * }
+ * ```
+ */
+export { Widget } from "./core/Widget";
+export { WidgetContent } from "./components/WidgetContent";
+export { WidgetEmptyState } from "./components/WidgetEmptyState";
+export { WidgetIcon } from "./components/WidgetIcon";
+export { WidgetMetrics } from "./components/WidgetMetrics";
+export { WidgetStatus } from "./components/WidgetStatus";
+export { WidgetSubtitle } from "./components/WidgetSubtitle";
+export { WidgetTitle } from "./components/WidgetTitle";
+export { WidgetValue } from "./components/WidgetValue";
+export { Glow } from "./backgrounds/Glow";
+export { WidgetSliderFill } from "./backgrounds/WidgetSliderFill";
+export { WidgetStack } from "./layout/WidgetStack";
+export { WidgetDialog, type WidgetDialogProps, type WidgetDialogTab } from "./dialogs";
+export { type AggregationPreset, type ReactiveWidgetContext, type UseDebugDataOptions, type UseWidgetConfigOptions, type UseWidgetConfigReturn, type UseWidgetEntityGroupOptions, type UseWidgetEntityGroupResult, type UseWidgetEntityOptions, type UseWidgetEntityResult, type UseWidgetFormOptions, type UseWidgetFormReturn, useDebugData, useWidgetConfig, useWidgetContext, useWidgetDialog, useWidgetEntity, useWidgetEntityGroup, useWidgetForm, useWidgetResponsive, WidgetCtx, type WidgetDialogReturn, type WidgetResponsiveUtils, } from "./hooks";
+export { type GestureHandlers, useWidgetGestures } from "./gestures/use-widget-gestures";
+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 { applyCssVars, applyLayout, builtInVariants, classicGlass, compactHorizontal, composeVariants, createFlexLayout, extendVariant, getBuiltInVariant, getBuiltInVariantIds, isBuiltInVariant, mergeVariants, minimal, } from "./variants";
+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";

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

@@ -0,0 +1,28 @@
+/**
+ * WidgetStack Component
+ *
+ * Vertical flex layout with automatic responsive spacing.
+ *
+ * @example
+ * ```tsx
+ * <WidgetStack spacing="S2">
+ *   <Widget.Icon icon={<Power />} />
+ *   <Widget.Title>{title}</Widget.Title>
+ *   <Widget.Status>{status}</Widget.Status>
+ * </WidgetStack>
+ * ```
+ */
+import type { JSX } from "solid-js";
+import type { SpacingScale } from "../types";
+export interface WidgetStackProps {
+    /** Spacing between items (default: "S2") */
+    spacing?: SpacingScale;
+    /** Additional CSS classes */
+    class?: string;
+    /** Child elements */
+    children: JSX.Element;
+}
+/**
+ * Vertical stack layout with responsive spacing
+ */
+export declare function WidgetStack(props: WidgetStackProps): JSX.Element;