@glasshome/widget-sdk 0.5.1 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -21,6 +21,9 @@ export interface WidgetDialogProps {
21
21
  class?: string;
22
22
  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
23
23
  defaultTab?: string;
24
+ /** Controlled active tab (pair with `onActiveTabChange`); overrides `defaultTab`. */
25
+ activeTab?: string;
26
+ onActiveTabChange?: (tab: string) => void;
24
27
  headerActions?: JSX.Element;
25
28
  configSchema?: ZodType;
26
29
  config?: Record<string, unknown>;
@@ -1,22 +1,9 @@
1
1
  /**
2
- * Widget Gestures Hook — Mobile-aware
2
+ * Widget Gestures Hook — tap, hold, and slide on every pointer type.
3
3
  *
4
- * Two grammars by pointer type:
5
- *
6
- * TOUCH (phone, tablet):
7
- * - tap → primary action
8
- * - hold → detail dialog (with haptic bump)
9
- * - slide → DISABLED. Fine control lives in the detail dialog instead.
10
- * This eliminates the slide-vs-page-scroll conflict that makes mobile
11
- * gestures fragile. `touch-action: manipulation` ensures the browser
12
- * handles scroll natively without our interference.
13
- *
14
- * MOUSE / PEN (desktop, hybrid devices):
15
- * - tap, hold, slide all active. Slide arms immediately on pointerdown —
16
- * no scroll conflict to worry about (mouse uses wheel for scroll).
17
- *
18
- * Pointer type is decided per press at pointerdown. A hybrid device (tablet
19
- * + bluetooth mouse) gets the right grammar based on which input fired.
4
+ * Touch slide vs page scroll is split per axis: `touch-action` cedes the
5
+ * cross axis to the browser, and a press only commits to sliding when
6
+ * movement is dominantly on the slide axis.
20
7
  */
21
8
  import type { GestureConfig } from "../types";
22
9
  type GestureOrientation = "horizontal" | "vertical" | "square";
@@ -33,11 +20,7 @@ export interface GestureHandlers {
33
20
  * receives the pointer handlers.
34
21
  */
35
22
  bindElement: (el: HTMLElement) => void;
36
- /**
37
- * CSS `touch-action` for the gesture root. Always `manipulation` when any
38
- * gesture is configured — mobile slide is intentionally dropped, so the
39
- * browser owns scroll completely on touch surfaces.
40
- */
23
+ /** CSS `touch-action` for the gesture root. */
41
24
  touchAction: () => string;
42
25
  /** Cancel any pending hold timer. Call on component unmount via onCleanup. */
43
26
  dispose: () => void;
@@ -20,6 +20,9 @@ export interface ReactiveWidgetContext {
20
20
  updateConfig: (config: Record<string, unknown>) => void;
21
21
  /** Measured shell dimensions in CSS px. (0,0) before first layout. */
22
22
  dimensions: () => WidgetDimensions;
23
+ /** Host RPC: `useWidgetDialog` registers its opener here so the host can
24
+ open the widget's dialog on a chosen tab. Called with `null` on cleanup. */
25
+ registerDialogOpener?: (open: ((tab?: string) => void) | null) => void;
23
26
  }
24
27
  export declare const WidgetCtx: import("solid-js").Context<ReactiveWidgetContext | undefined>;
25
28
  export declare function useWidgetContext(): ReactiveWidgetContext;
@@ -1,22 +1,22 @@
1
1
  /**
2
2
  * Widget Dialog Hook
3
3
  *
4
- * Provides signal-based dialog state management with optional tab tracking.
4
+ * Single source of truth for a widget's dialog state: open/closed and the
5
+ * active tab. Registers an imperative opener on the host context so the
6
+ * host can open the dialog on a chosen tab (e.g. dashboard edit mode
7
+ * opening "edit" directly).
5
8
  *
6
9
  * @example
7
10
  * ```tsx
8
11
  * function MyWidget() {
9
- * const { showDialog, openDialog, closeDialog } = useWidgetDialog();
12
+ * const { openDialog, dialogProps } = useWidgetDialog();
10
13
  *
11
14
  * return (
12
15
  * <>
13
16
  * <Widget gestures={{ hold: { action: openDialog } }}>
14
17
  * {/* widget content *\/}
15
18
  * </Widget>
16
- * <WidgetDialog
17
- * open={showDialog()}
18
- * onOpenChange={setShowDialog}
19
- * />
19
+ * <WidgetDialog {...dialogProps} />
20
20
  * </>
21
21
  * );
22
22
  * }
@@ -27,19 +27,27 @@ export interface WidgetDialogReturn {
27
27
  showDialog: () => boolean;
28
28
  /** Set dialog state directly */
29
29
  setShowDialog: (open: boolean) => void;
30
- /** Open the dialog */
31
- openDialog: () => void;
30
+ /** Open the dialog, optionally landing on a specific tab */
31
+ openDialog: (tab?: string) => void;
32
32
  /** Close the dialog */
33
33
  closeDialog: () => void;
34
34
  /** Current active tab accessor */
35
35
  activeTab: () => string;
36
36
  /** Set active tab */
37
37
  setActiveTab: (tab: string) => void;
38
+ /** Spread onto `<WidgetDialog>` to wire open + tab state. */
39
+ dialogProps: {
40
+ open: boolean;
41
+ onOpenChange: (open: boolean) => void;
42
+ activeTab: string;
43
+ onActiveTabChange: (tab: string) => void;
44
+ };
38
45
  }
39
46
  /**
40
47
  * Hook for managing widget dialog state
41
48
  *
42
- * @param defaultTab - Default active tab (default: "edit")
49
+ * @param defaultTab - Tab the dialog lands on when no explicit tab is
50
+ * requested (default: "controls")
43
51
  * @returns Dialog state and control functions
44
52
  */
45
53
  export declare function useWidgetDialog(defaultTab?: string): WidgetDialogReturn;