@glasshome/widget-sdk 1.16.0 → 1.17.1

package/dist/data.d.ts

@@ -6,6 +6,6 @@
  * store. Phase 4 routes these through capability checks.
  */
 export { getForecasts, getStream, getWebRtcClientConfig, hassMediaUrl, sendWebRtcCandidate, startWebRtcSession, state, trackEntityHistory, untrackEntityHistory, } from "@glasshome/sync-layer";
-export type { AreaView, CalendarEvent, CalendarEventsData, CalendarWindowOptions, } from "@glasshome/sync-layer";
+export type { AreaView, CalendarEvent, CalendarEventsData, CalendarWindowOptions, ForecastType, WeatherForecast, } from "@glasshome/sync-layer";
 export { byDomain, useArea, useCalendarEvents, useCamera, useConnection, useCurrency, useEntities, useEntity, useEntityHistory, useEntityStatistics, useForecast, useHassConfig, useLocale, useStore, useTemperatureUnit, useUnitSystem, } from "@glasshome/sync-layer/solid";
 export { useService, useToggle, useTurnOff, useTurnOn } from "./framework/hooks/use-service";

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

@@ -1,7 +1,13 @@
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 interface WidgetContentProps {
+    /** Colour for this content and the widget's sheet, over the shell's `tone`/`color`. */
+    accent?: string;
     class?: string;
     children: JSX.Element;
 }
+/**
+ * The widget's layout. With anatomy parts inside (`Widget.Head`, `Widget.Hero`, `Widget.Controls`,
+ * `Widget.Backdrop`, `Widget.Layer`, `Widget.Glyph`) it lays them out as a tile; with none it is the original column.
+ */
 export declare function WidgetContent(props: WidgetContentProps): JSX.Element;
 export {};

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

@@ -0,0 +1,78 @@
+import { type JSX } from "solid-js";
+import { type Confirm } from "../hooks/use-confirm";
+/** True for a moment after `<Widget confirmed>`: the head icon and glyph read as a check. */
+export declare const WidgetConfirmedCtx: import("solid-js").Context<() => boolean>;
+export declare function WidgetHead(props: {
+    /** Iconify name; also the icon the widget's sheet wears. */
+    icon?: string;
+    /** Small line above the name: a state, a count, a reading. Hidden when it repeats the name. */
+    eyebrow?: JSX.Element;
+    name: JSX.Element;
+    /** Chips at the head's end, on tiles tall enough. */
+    aside?: JSX.Element;
+    /** Draws the icon in the widget's colour instead of muted. */
+    active?: boolean;
+    /** Entities behind the tile; 2 and 3 stack the icon. */
+    count?: number;
+}): JSX.Element;
+export declare function WidgetHero(props: {
+    value: JSX.Element;
+    unit?: string;
+    /** Small line above the value. */
+    sub?: JSX.Element;
+    /** The tile's object art, bottom right, behind the words. */
+    art?: JSX.Element;
+    class?: string;
+}): JSX.Element;
+/** The tile's control row: beside the value on a wide tile, under it on a narrow one, hidden on a short one. */
+export declare function WidgetControls(props: {
+    children: JSX.Element;
+}): JSX.Element;
+export declare function WidgetStepper(props: {
+    label: string;
+    onStep: (direction: -1 | 1) => void;
+}): JSX.Element;
+export declare function WidgetChoice(props: {
+    label: string;
+    tone?: string;
+    value: string;
+    options: {
+        value: string;
+        icon: string;
+        label: string;
+    }[];
+    onChange: (value: string) => void;
+}): JSX.Element;
+/**
+ * A control for an action that leaves no state to show (run a scene, press a button, stop a blind):
+ * it ticks after the call succeeds. Pass `confirm` to share one with the tile (`<Widget confirmed>`).
+ */
+export declare function WidgetAction(props: {
+    icon: string;
+    /** 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;
+    confirm?: Confirm;
+    /** Key within a shared `confirm`; defaults to the label or icon. */
+    id?: string;
+    class?: string;
+}): JSX.Element;
+export declare function WidgetChip(props: {
+    icon?: string;
+    tone?: string;
+    children: JSX.Element;
+}): JSX.Element;
+/** A layer over the whole tile, edge to edge and behind the words: a picture, a scene, a chart band. */
+export declare function WidgetLayer(props: {
+    class?: string;
+    children: JSX.Element;
+}): JSX.Element;
+/** A picture behind the whole tile, under a scrim that keeps the words readable. */
+export declare function WidgetBackdrop(props: {
+    children: JSX.Element;
+}): JSX.Element;
+/** The icon large and faint in the corner: all a compact tile shows, and a big tile without art. */
+export declare function WidgetGlyph(props: {
+    icon: string;
+}): JSX.Element;

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

@@ -46,6 +46,8 @@ type ChoiceOpts<T extends string> = {
     default?: T;
     /** Display names for the options; the raw value shows without them. */
     labels?: Partial<Record<T, string>>;
+    /** Icon per option (e.g. "mdi:floor-lamp"); set, the host shows the options as icon cards. */
+    icons?: Partial<Record<T, string>>;
 };
 type EntitiesOpts = {
     title?: string;
@@ -97,19 +99,26 @@ declare function icon(o?: {
     title?: string;
     description?: string;
 }): z.ZodOptional<z.ZodString>;
-/**
- * Image id (an opaque handle, not a URL). The host renders its picker and
- * resolves the id with `imageUrl()`.
- */
-declare function image(o: {
+/** A built-in picture: `thumb` travels in the manifest for the picker, `src` stays in the bundle. */
+export interface ImagePresetSource {
+    label: string;
+    src: string;
+    thumb: string;
+}
+type ImageOpts = {
     title?: string;
     description?: string;
+    /** Built-in pictures the picker offers before the household's uploads. */
+    presets?: Record<string, ImagePresetSource>;
+};
+/**
+ * Image id (an opaque handle, not a URL), or a picked preset. The host renders
+ * its picker; the widget resolves the value with `imageSrc()`.
+ */
+declare function image(o: ImageOpts & {
     default: string;
 }): z.ZodDefault<z.ZodString>;
-declare function image(o?: {
-    title?: string;
-    description?: string;
-}): z.ZodOptional<z.ZodString>;
+declare function image(o?: ImageOpts): z.ZodOptional<z.ZodString>;
 declare function stringList(o: {
     title: string;
     description?: string;

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

@@ -15,7 +15,8 @@ import type { WidgetIcon as WidgetIconType } from "../components/WidgetIcon";
 import type { WidgetStatus as WidgetStatusType } from "../components/WidgetStatus";
 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 GestureHandlers } from "../gestures/use-widget-gestures";
+import * as Anatomy from "../components/anatomy";
 import type { Tone } from "../theming/tone";
 import type { WidgetVariantConfig } from "../types";
 interface WidgetEmptyStateConfig {
@@ -40,6 +41,8 @@ interface WidgetProps {
     emptyState?: WidgetEmptyStateConfig;
     /** Gesture handlers from `useWidgetGestures`. */
     gestures?: GestureHandlers;
+    /** An action that leaves no state just ran: the head icon and glyph turn into a check for a moment. */
+    confirmed?: boolean;
     children?: JSX.Element;
 }
 interface WidgetComponent {
@@ -50,6 +53,16 @@ interface WidgetComponent {
     Status: typeof WidgetStatusType;
     Value: typeof WidgetValueType;
     SliderFill: typeof WidgetSliderFillType;
+    Head: typeof Anatomy.WidgetHead;
+    Hero: typeof Anatomy.WidgetHero;
+    Controls: typeof Anatomy.WidgetControls;
+    Stepper: typeof Anatomy.WidgetStepper;
+    Choice: typeof Anatomy.WidgetChoice;
+    Action: typeof Anatomy.WidgetAction;
+    Chip: typeof Anatomy.WidgetChip;
+    Backdrop: typeof Anatomy.WidgetBackdrop;
+    Layer: typeof Anatomy.WidgetLayer;
+    Glyph: typeof Anatomy.WidgetGlyph;
 }
 export declare const Widget: WidgetComponent;
 export {};

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

@@ -1,5 +1,5 @@
-import { ResponsiveDialogBody, ResponsiveDialogFooter, Tabs, TabsContent, TabsList, TabsTrigger } from "@glasshome/ui/solid";
 import type { ModalSize, Button as UIButton, ResponsiveDialog as UIResponsiveDialog, ResponsiveDialogContent as UIResponsiveDialogContent, ResponsiveDialogDescription as UIResponsiveDialogDescription, ResponsiveDialogHeader as UIResponsiveDialogHeader, ResponsiveDialogTitle as UIResponsiveDialogTitle, SchemaForm as UISchemaForm } from "@glasshome/ui/solid";
+import { ResponsiveDialogBody, ResponsiveDialogFooter, Tabs, TabsContent, TabsList, TabsTrigger } from "@glasshome/ui/solid";
 import { type JSX } from "solid-js";
 import type { ZodType } from "zod";
 /** Widths a widget could name before ui's modal size scale existed. */
@@ -10,6 +10,14 @@ export interface WidgetDialogTab {
     icon: JSX.Element;
     content: JSX.Element;
 }
+export interface SheetTile {
+    /** Iconify name, the tile's own icon. */
+    icon?: string;
+    /** The tile's colour: a CSS colour or `var(--tone-*)`. */
+    tone?: string;
+    /** URL of the tile's picture. */
+    backdrop?: string;
+}
 export interface WidgetDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -21,6 +29,13 @@ export interface WidgetDialogProps {
     onDelete?: () => void;
     editContent?: JSX.Element;
     controlsContent?: JSX.Element;
+    /** What holding the tile opens: only what the tile cannot show (a group's members, colours, modes),
+        as `PanelSection`s. It opens beside the tile, or from the bottom on a phone. A widget with nothing
+        the tile lacks passes none, and holding it opens nothing. */
+    sheet?: () => JSX.Element;
+    /** The tile's look, worn by its sheet so the tile reads as growing open: its icon in the head,
+        its tone in the glass, its picture (a room, an album cover) as a band behind the head. */
+    tile?: SheetTile;
     debugContent?: JSX.Element;
     debugData?: string | Record<string, unknown>;
     tabs?: WidgetDialogTab[];

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

@@ -2,4 +2,4 @@
  * Dialog Components - Barrel Export
  */
 export { buildDebugData, WidgetDebugTab, WidgetDebugView, type WidgetDebugData, type WidgetDebugEntity, } from "./debug-view";
-export { WidgetDialog, type WidgetDialogProps, type WidgetDialogTab } from "./WidgetDialog";
+export { type SheetTile, WidgetDialog, type WidgetDialogProps, type WidgetDialogTab, } from "./WidgetDialog";

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

@@ -24,6 +24,17 @@ export interface GestureHandlers {
     touchAction: () => string;
     /** Cancel any pending hold timer. Call on component unmount via onCleanup. */
     dispose: () => void;
+    /** Where a hold is filling from, relative to the element; `fired` once it opened. */
+    hold?: () => HoldFlood | null;
+    /** Keyboard door: Enter or Space taps, the context-menu key or Shift+F10 holds. */
+    onKeyDown?: (e: KeyboardEvent) => void;
 }
-export declare function useWidgetGestures(config: () => GestureConfig, orientation?: () => GestureOrientation): GestureHandlers;
+export interface HoldFlood {
+    x: number;
+    y: number;
+    /** Radius that reaches the farthest corner, so the fill ends as the hold fires. */
+    r: number;
+    fired: boolean;
+}
+export declare function useWidgetGestures(wired: () => GestureConfig, orientation?: () => GestureOrientation): GestureHandlers;
 export {};

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

@@ -8,6 +8,7 @@ export { useWidgetDashboard } from "./use-widget-dashboard";
 export { useWidgetViewer } from "./use-widget-viewer";
 export { useWidgetDimensions, type WidgetDimensionsAccessor, WidgetSizeCtx, } from "./use-widget-dimensions";
 export { useIntersectionPause } from "./use-intersection-pause";
+export { type Daylight, type DaylightPhase, useDaylight } from "./use-daylight";
 export { useReducedMotion } from "./use-reduced-motion";
 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-confirm.d.ts

@@ -0,0 +1,13 @@
+export interface Confirm {
+    /** Whether this key ran a moment ago. */
+    has: (key: string) => boolean;
+    /** Whether anything ran a moment ago. */
+    any: () => boolean;
+    /** Runs the action; resolves whether it succeeded. */
+    run: (keys: string[], action: () => Promise<unknown> | unknown) => Promise<boolean>;
+}
+/**
+ * For actions that leave no state to show (a scene, a button press, a stop): the keys that just ran,
+ * for a moment. Confirms only after the call succeeds; a failed call is toasted by the host instead.
+ */
+export declare function useConfirm(): Confirm;

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

@@ -0,0 +1,25 @@
+import { type Accessor } from "solid-js";
+export type DaylightPhase = "day" | "dusk" | "night" | "dawn";
+export interface Daylight {
+    phase: DaylightPhase;
+    isNight: boolean;
+    /** Sun elevation in degrees; undefined when the phase comes from the clock. */
+    elevation?: number;
+    /** 0..1 through the current day (sunrise to sunset) while the sun is up, else through the night; undefined without `sun.sun`'s rising and setting times. */
+    progress?: number;
+}
+interface SunReading {
+    state: string;
+    elevation?: number;
+    rising?: boolean;
+    next_rising?: string;
+    next_setting?: string;
+}
+export declare function daylightFrom(sun: SunReading | undefined, now: Date): Daylight;
+/**
+ * Household daylight: from Home Assistant's `sun.sun` when present, else the
+ * local clock when the home has no sun entity. Reads `sun.sun`, so the widget
+ * declares `{ domain: "sun", access: "read" }`; the build refuses it otherwise.
+ */
+export declare function useDaylight(): Accessor<Daylight>;
+export {};

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

@@ -46,6 +46,10 @@ export interface ReactiveWidgetContext {
     dashboard?: () => WidgetDashboard;
     /** Who is looking. Absent on hosts that predate this field. */
     viewer?: () => WidgetViewer;
+    /** True when the household turned on Developer Mode; widget dialogs show Debug only then. */
+    developer?: () => boolean;
+    /** The tile's box on the page, so a held tile's sheet opens beside it. Absent: it opens centred. */
+    anchor?: () => HTMLElement | undefined;
 }
 export declare const WidgetCtx: import("solid-js").Context<ReactiveWidgetContext | undefined>;
 export declare function useWidgetContext(): ReactiveWidgetContext;

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

@@ -9,19 +9,21 @@
  * @example
  * ```tsx
  * function MyWidget() {
- *   const { openDialog, dialogProps } = useWidgetDialog();
+ *   const { dialogProps } = useWidgetDialog();
  *
  *   return (
  *     <>
- *       <Widget gestures={{ hold: { action: openDialog } }}>
+ *       <Widget>
  *         {/* widget content *\/}
  *       </Widget>
- *       <WidgetDialog {...dialogProps} />
+ *       <WidgetDialog {...dialogProps} sheet={() => <MySheet />} />
  *     </>
  *   );
  * }
  * ```
  */
+/** Each widget's dialog opener, keyed by its host context, so `Widget` can open settings from an empty tile. */
+export declare const dialogOpeners: WeakMap<object, (tab?: string) => void>;
 export interface WidgetDialogReturn {
     /** Current dialog open state accessor */
     showDialog: () => boolean;

package/dist/framework/hooks/widget-registry.d.ts

@@ -0,0 +1,19 @@
+import { type Accessor, type Setter } from "solid-js";
+/** What a widget's parts tell each other: whether its dialog has a sheet, and the look the sheet wears. */
+export interface WidgetRegistry {
+    hasSheet: Accessor<boolean>;
+    setHasSheet: Setter<boolean>;
+    /** The shell's colour (`tone` / `color` on `<Widget>`). */
+    tone: Accessor<string | undefined>;
+    setTone: Setter<string | undefined>;
+    /** A `Widget.Content` accent, which wins over the shell's colour. */
+    accent: Accessor<string | undefined>;
+    setAccent: Setter<string | undefined>;
+    /** The head's icon. */
+    icon: Accessor<string | undefined>;
+    setIcon: Setter<string | undefined>;
+}
+/** `<Widget>` hands its parts a copy of the host context; this points the copy back at the original. */
+export declare const REGISTRY_KEY: unique symbol;
+/** The registry for a widget, keyed by its host context; created on first use. */
+export declare function widgetRegistry(ctx: object | undefined): WidgetRegistry | undefined;

package/dist/framework/image-src.d.ts

@@ -0,0 +1,3 @@
+import type { ImagePresetSource } from "./config";
+/** The URL a `field.image` value shows: the picked preset's picture, or the uploaded image. */
+export declare function imageSrc(value: string | null | undefined, presets?: Record<string, ImagePresetSource>): string | undefined;

package/dist/framework/index.d.ts

@@ -9,15 +9,10 @@
  * import {
  *   Widget,
  *   useWidgetGestures,
- *   useWidgetDialog,
  * } from "@glasshome/widget-sdk";
  *
  * export function MyWidget(props) {
- *   const { showDialog, openDialog } = useWidgetDialog();
- *   const gestures = useWidgetGestures(
- *     () => ({ tap: handleTap, hold: { action: openDialog } }),
- *     () => ctx.orientation(),
- *   );
+ *   const gestures = useWidgetGestures(() => ({ tap: handleTap }));
  *
  *   return (
  *     <Widget>
@@ -35,12 +30,17 @@ export { WidgetIcon } from "./components/WidgetIcon";
 export { WidgetStatus } from "./components/WidgetStatus";
 export { WidgetTitle } from "./components/WidgetTitle";
 export { WidgetValue } from "./components/WidgetValue";
+export { WidgetAction, WidgetBackdrop, WidgetChip, WidgetChoice, WidgetControls, WidgetGlyph, WidgetHead, WidgetHero, WidgetLayer, WidgetStepper, } from "./components/anatomy";
+export { type Confirm, useConfirm } from "./hooks/use-confirm";
 export { WidgetSliderFill } from "./backgrounds/WidgetSliderFill";
-export { buildDebugData, WidgetDebugTab, type WidgetDebugData, type WidgetDebugEntity, WidgetDebugView, WidgetDialog, type WidgetDialogProps, type WidgetDialogTab, } from "./dialogs";
-export { type AggregationPreset, type ReactiveWidgetContext, type ServiceCallFn, type UseWidgetEntityGroupOptions, type UseWidgetEntityGroupResult, useIntersectionPause, useReducedMotion, useWidgetContext, useWidgetDashboard, useWidgetViewer, useWidgetDialog, useWidgetDimensions, useWidgetEntityGroup, WidgetCtx, type WidgetDashboard, type WidgetViewer, type WidgetDialogReturn, type WidgetDimensions, type WidgetDimensionsAccessor, WidgetSizeCtx, } from "./hooks";
+export { type PanelFact, PanelFacts, PanelRow, type PanelRowProps, PanelRows, PanelSection, type PanelSlide, } from "./panel/panel";
+export { isPanelControllable, PanelEntityRow } from "./panel/panel-entity";
+export { buildDebugData, WidgetDebugTab, type WidgetDebugData, type WidgetDebugEntity, WidgetDebugView, WidgetDialog, type SheetTile, type WidgetDialogProps, type WidgetDialogTab, } from "./dialogs";
+export { type AggregationPreset, type ReactiveWidgetContext, type ServiceCallFn, type UseWidgetEntityGroupOptions, type UseWidgetEntityGroupResult, type Daylight, type DaylightPhase, useDaylight, useIntersectionPause, useReducedMotion, useWidgetContext, useWidgetDashboard, useWidgetViewer, useWidgetDialog, useWidgetDimensions, useWidgetEntityGroup, WidgetCtx, type WidgetDashboard, type WidgetViewer, type WidgetDialogReturn, type WidgetDimensions, type WidgetDimensionsAccessor, WidgetSizeCtx, } from "./hooks";
 export { type GestureHandlers, useWidgetGestures } from "./gestures/use-widget-gestures";
 export { injectTokens, type SvgColorKey, svgColors, type Tone, ToneSchema, } from "./theming";
 export { widgetFields } from "./fields";
-export { type ConfigShape, defineConfig, field, type Field, type Infer, } from "./config";
+export { type ConfigShape, defineConfig, field, type Field, type ImagePresetSource, type Infer, } from "./config";
+export { imageSrc } from "./image-src";
 export { calculateLightGroup, calculateSensorGroup, type CopyState, copyText, countActiveEntities, getEntityAttribute, isEntityActive, type LightGroupResult, type SensorGroupResult, type SensorGroupType, useCopyText, } from "./utils";
 export type { EntityView, WidgetStyles, WidgetVariantConfig, } from "./types";

package/dist/framework/panel/panel-entity.d.ts

@@ -0,0 +1,18 @@
+import { type JSX } from "solid-js";
+/** Whether a domain has a row with something to press (sensors read as facts instead). */
+export declare function isPanelControllable(domain: string): boolean;
+/**
+ * A row for any entity, drawn and wired from its domain: a light dims, a cover
+ * opens, a lock locks. The same row the area panel and every group panel use.
+ */
+export declare function PanelEntityRow(props: {
+    entityId: string;
+    /** Overrides the entity's own name ("Ceiling" instead of "Living room ceiling"). */
+    name?: string;
+    /** A place the panel already names; dropped from the front of the entity's name. */
+    within?: string;
+    /** Overrides the domain's icon and tone, so a row matches the widget it sits in. */
+    icon?: string;
+    tone?: string;
+    onHold?: () => void;
+}): JSX.Element;

package/dist/framework/panel/panel.d.ts

@@ -0,0 +1,55 @@
+import { type JSX } from "solid-js";
+/** A continuous value the whole stage (or a row) sets by dragging. */
+export interface PanelSlide {
+    value: number;
+    min?: number;
+    max?: number;
+    onChange: (value: number) => void;
+    /** Fires once when the drag ends, with the last value. */
+    onCommit?: (value: number) => void;
+    /** Names the value for screen readers and the keyboard handle ("Brightness"). */
+    label?: string;
+    /** Keyboard step; the drag reports whole numbers. */
+    step?: number;
+}
+/** A labelled group in the panel's aside ("Lights", "Playing on"). */
+export declare function PanelSection(props: {
+    label: string;
+    children: JSX.Element;
+}): JSX.Element;
+/** Rows side by side, as many as fit (three lamps, two blinds). */
+export declare function PanelRows(props: {
+    children: JSX.Element;
+}): JSX.Element;
+export interface PanelRowProps {
+    icon: string;
+    name: string;
+    /** The small line under the name ("70%", "Heating to 22°"). */
+    state?: JSX.Element;
+    /** The device's tone; tints its icon and fill while it is on. */
+    tone?: string;
+    on: boolean;
+    /** 0-100 fill; dragging across the row sets it. */
+    slide?: PanelSlide;
+    /** A 0-100 fill for a row that only reads (a battery level, a share of power). */
+    fill?: number;
+    onTap?: () => void;
+    onHold?: () => void;
+    /** A control at the row's end (Unlock, + Add). */
+    trailing?: JSX.Element;
+    "aria-label"?: string;
+}
+/**
+ * One device: a small tile made of button glass. Tap switches it, drag sets its level.
+ * A row with nothing to press (no tap, slide or hold) wears the same glass but is not a button.
+ */
+export declare function PanelRow(props: PanelRowProps): JSX.Element;
+export interface PanelFact {
+    icon: string;
+    label: string;
+    value: JSX.Element;
+}
+/** Readings in one strip (window, CO₂, motion): read, never pressed. */
+export declare function PanelFacts(props: {
+    items: PanelFact[];
+}): JSX.Element;

package/dist/host/index.js

@@ -1,51 +1,69 @@
 import { ErrorBoundary as e, createComponent as t } from "solid-js";
-import { render as n } from "solid-js/web";
-import { WidgetCtx as r, injectTokens as i } from "@glasshome/widget-sdk";
+import { DelegatedEvents as n, clearDelegatedEvents as r, delegateEvents as i, render as a } from "solid-js/web";
+import { WidgetCtx as o, injectTokens as s } from "@glasshome/widget-sdk";
 //#region src/host/instantiate-widget.ts
-var a = /* @__PURE__ */ new Map();
-function o(e) {
-	let t = a.get(e);
+var c = /* @__PURE__ */ new Map();
+function l(e) {
+	let t = c.get(e);
 	if (t) return t;
 	let n = new CSSStyleSheet();
-	return n.replaceSync(e), a.set(e, n), n;
+	return n.replaceSync(e), c.set(e, n), n;
 }
-var s = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map(), l = !1;
-function u(e, t) {
+var u = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Map(), f = !1;
+function p(e, t) {
 	for (let n of t) e.classList.toggle(n, document.documentElement.classList.contains(n));
 }
-function d(e, t) {
-	for (let e of t) s.add(e);
-	return c.set(e, t), u(e, t), l || (l = !0, new MutationObserver(() => {
-		for (let [e, t] of c) u(e, t);
+function m(e, t) {
+	for (let e of t) u.add(e);
+	return d.set(e, t), p(e, t), f || (f = !0, new MutationObserver(() => {
+		for (let [e, t] of d) p(e, t);
 	}).observe(document.documentElement, {
 		attributes: !0,
 		attributeFilter: ["class"]
 	})), () => {
-		c.delete(e);
+		d.delete(e);
 	};
 }
-function f(a, s) {
-	let c = a.attachShadow({ mode: "closed" }), l = d(a, s.mirrorClasses ?? ["dark"]);
-	i(c), s.cssText !== null && (c.adoptedStyleSheets = [...c.adoptedStyleSheets, o(s.cssText)]), s.extraSheets?.length && (c.adoptedStyleSheets = [...c.adoptedStyleSheets, ...s.extraSheets]);
-	let u = n(() => t(r.Provider, {
-		value: s.ctx,
+var h = (e) => {
+	Reflect.deleteProperty(e, "target"), Reflect.deleteProperty(e, "currentTarget");
+};
+if (typeof document < "u") {
+	let e = [...n];
+	i(e);
+	for (let t of e) document.addEventListener(t, h);
+}
+function g(e) {
+	if (e.mode !== "closed") return () => {};
+	let t = [...n], a = e;
+	i(t, a);
+	for (let n of t) e.addEventListener(n, h);
+	return () => {
+		r(a);
+		for (let n of t) e.removeEventListener(n, h);
+	};
+}
+function _(n, r) {
+	let i = n.attachShadow({ mode: "closed" }), c = g(i), u = m(n, r.mirrorClasses ?? ["dark"]);
+	s(i), r.cssText !== null && (i.adoptedStyleSheets = [...i.adoptedStyleSheets, l(r.cssText)]), r.extraSheets?.length && (i.adoptedStyleSheets = [...i.adoptedStyleSheets, ...r.extraSheets]);
+	let d = a(() => t(o.Provider, {
+		value: r.ctx,
 		get children() {
 			return t(e, {
 				fallback: (e) => {
 					let t = e instanceof Error ? e : Error(String(e));
-					return queueMicrotask(() => s.onCrash(t)), null;
+					return queueMicrotask(() => r.onCrash(t)), null;
 				},
 				get children() {
-					return t(s.definition.component, { get config() {
-						return s.config();
+					return t(r.definition.component, { get config() {
+						return r.config();
 					} });
 				}
 			});
 		}
-	}), c);
+	}), i);
 	return { dispose: () => {
-		l(), u();
+		u(), d(), c();
 	} };
 }
 //#endregion
-export { f as instantiateWidget };
+export { _ as instantiateWidget };