@marianmeres/widget-provider 1.0.2 → 1.1.0

package/AGENTS.md

@@ -1,45 +1,62 @@
 # @marianmeres/widget-provider — Agent Guide
 
 ## Quick Reference
+
 - **Stack**: Deno, TypeScript, browser DOM APIs
 - **Runtime**: Deno (primary), npm (secondary via build)
-- **Dependency**: `@marianmeres/store` (reactive state)
+- **Dependencies**: `@marianmeres/store` (reactive state), `@marianmeres/pubsub` (internal message dispatch), `@marianmeres/clog` (debug logging)
 - **Test**: `deno test` | **Build**: `deno task npm:build` | **Publish**: `deno task publish`
 
 ## Project Structure
+
 ```
 /src
   mod.ts              — Public entry point (re-exports)
   types.ts            — All type definitions and constants
   style-presets.ts    — CSS preset configs and apply functions
   widget-provider.ts  — Core provideWidget() implementation
+  draggable.ts        — makeDraggable() for float preset drag-and-drop
+  resizable.ts        — makeResizable() for float preset resize
+  iconGrip.ts         — SVG icon for drag handle
+  iconResize.ts       — SVG icon for resize handle
 /tests                — Deno tests (unit tests for pure functions)
 /scripts              — npm build script
 /example              — Dev example app
 ```
 
 ## What This Library Does
+
 Embeds an iframe-based widget into a host page with:
+
 - Style presets (float, fullscreen, inline) for positioning
 - postMessage-based bidirectional communication (namespaced with `@@__widget_provider__@@`)
 - Show/hide animations (fade-scale, slide-up)
+- Height and width control (maximize/minimize/reset for each axis — no-op when preset is inline)
 - Optional trigger button (auto-toggles with widget visibility)
+- Drag-and-drop with edge-snap (float preset only, via handle bar)
+- Free-resize with corner handle (float preset only)
+- Detach/dock workflow (inline preset only — float the widget, leave placeholder)
+- Small-screen detection with auto-maximize on `open()`
 - Reactive state via `@marianmeres/store` (Svelte-compatible subscribe)
 
 ## Critical Conventions
+
 1. All message types are prefixed with `MSG_PREFIX` (`@@__widget_provider__@@`)
 2. Types live in `types.ts`, style logic in `style-presets.ts`, core logic in `widget-provider.ts`
 3. `mod.ts` is the sole public entry point — all public exports go through it
 4. Use Deno formatting: tabs, 90 char line width (`deno fmt`)
 5. `provideWidget()` is the only user-facing factory — returns `WidgetProviderApi`
+6. Preset-specific guards: actions that don't apply to a preset silently no-op (e.g. dimension actions when inline, detach when not inline, draggable/resizable when not float)
 
 ## Before Making Changes
+
 - [ ] Check existing patterns in similar files
 - [ ] Run `deno test`
 - [ ] Run `deno fmt`
 - [ ] Ensure all public exports are re-exported from `mod.ts`
 
 ## Documentation Index
+
 - [Architecture](./docs/architecture.md)
 - [Conventions](./docs/conventions.md)
 - [Tasks](./docs/tasks.md)

package/API.md

@@ -7,40 +7,97 @@
 Create and embed an iframe-based widget. Returns a control API object.
 
 **Parameters:**
+
 - `options` (`WidgetProviderOptions`) — Configuration object (see below)
 
 **Returns:** `WidgetProviderApi`
 
 **Example:**
+
 ```typescript
-import { provideWidget } from '@marianmeres/widget-provider';
+import { provideWidget } from "@marianmeres/widget-provider";
 
 const widget = provideWidget({
-    widgetUrl: 'https://example.com/widget',
-    stylePreset: 'float',
-    animate: 'slide-up',
-    trigger: { content: '<span>Chat</span>' },
+	widgetUrl: "https://example.com/widget",
+	stylePreset: "float",
+	animate: "slide-up",
+	trigger: { content: "<span>Chat</span>" },
+	draggable: true,
 });
 ```
 
 ---
 
+### `makeDraggable(container, iframe, options?)`
+
+Make a fixed-position container draggable via a handle bar inserted at the top.
+Uses the Pointer Events API for unified mouse + touch support.
+
+Typically used internally by `provideWidget()` when `draggable` option is set
+and preset is `"float"`. Can also be used standalone.
+
+**Parameters:**
+
+- `container` (`HTMLElement`) — The fixed-position container element
+- `iframe` (`HTMLIFrameElement`) — The iframe inside the container
+- `options` (`DraggableOptions`, optional) — Drag behavior configuration
+
+**Returns:** `DraggableHandle`
+
+---
+
+### `makeResizable(container, iframe, options?)`
+
+Make a fixed-position container resizable via a corner handle at the bottom-right.
+Uses the Pointer Events API for unified mouse + touch support.
+
+Typically used internally by `provideWidget()` when `resizable` option is set
+and preset is `"float"`. Can also be used standalone.
+
+**Parameters:**
+
+- `container` (`HTMLElement`) — The fixed-position container element
+- `iframe` (`HTMLIFrameElement`) — The iframe inside the container
+- `options` (`ResizableOptions`, optional) — Resize behavior configuration
+
+**Returns:** `ResizableHandle`
+
+---
+
+### `resolveEdge(atLeft, atRight, atTop, atBottom)`
+
+Pure edge-resolution logic: given which viewport edges are touched,
+return the single active edge, a corner, or `null` if none or ambiguous.
+
+**Parameters:**
+
+- `atLeft` (`boolean`) — Whether the element is touching the left edge
+- `atRight` (`boolean`) — Whether the element is touching the right edge
+- `atTop` (`boolean`) — Whether the element is touching the top edge
+- `atBottom` (`boolean`) — Whether the element is touching the bottom edge
+
+**Returns:** `SnapEdge | null`
+
+---
+
 ### `resolveAllowedOrigins(explicit, widgetUrl)`
 
 Resolve the list of allowed origins for postMessage validation.
 
 **Parameters:**
+
 - `explicit` (`string | string[] | undefined`) — Explicitly configured origin(s)
 - `widgetUrl` (`string`) — The widget URL to derive origin from
 
 **Returns:** `string[]` — Array of allowed origin strings
 
 **Example:**
+
 ```typescript
-resolveAllowedOrigins(undefined, 'https://example.com/app');
+resolveAllowedOrigins(undefined, "https://example.com/app");
 // => ['https://example.com']
 
-resolveAllowedOrigins(['https://a.com', 'https://b.com'], 'https://c.com/app');
+resolveAllowedOrigins(["https://a.com", "https://b.com"], "https://c.com/app");
 // => ['https://a.com', 'https://b.com']
 ```
 
@@ -51,6 +108,7 @@ resolveAllowedOrigins(['https://a.com', 'https://b.com'], 'https://c.com/app');
 Check whether a given origin is in the allowed list.
 
 **Parameters:**
+
 - `origin` (`string`) — Origin to check
 - `allowed` (`string[]`) — List of allowed origins (use `"*"` to allow any)
 
@@ -63,6 +121,7 @@ Check whether a given origin is in the allowed list.
 Resolve animation option into a concrete `AnimateConfig` or `null`.
 
 **Parameters:**
+
 - `opt` (`boolean | AnimatePreset | { preset?: AnimatePreset; transition?: string } | undefined`)
 
 **Returns:** `AnimateConfig | null`
@@ -75,26 +134,34 @@ Resolve animation option into a concrete `AnimateConfig` or `null`.
 
 ```typescript
 interface WidgetProviderOptions {
-    /** The URL of the SPA to embed (required) */
-    widgetUrl: string;
-    /** DOM element to append the widget into. Default: document.body */
-    parentContainer?: HTMLElement;
-    /** Positioning mode. Default: "inline" */
-    stylePreset?: StylePreset;
-    /** CSS overrides applied to the container wrapper div */
-    styleOverrides?: StyleOverrides;
-    /** Allowed origin(s) for postMessage validation. Derived from widgetUrl if omitted */
-    allowedOrigin?: string | string[];
-    /** Whether the widget starts visible. Default: true */
-    visible?: boolean;
-    /** Iframe sandbox attribute. Default: "allow-scripts allow-same-origin" */
-    sandbox?: string;
-    /** Additional iframe attributes (e.g. allow, referrerpolicy) */
-    iframeAttrs?: Record<string, string>;
-    /** Opt-in show/hide animation: true | AnimatePreset | { preset?, transition? } */
-    animate?: boolean | AnimatePreset | { preset?: AnimatePreset; transition?: string };
-    /** Built-in floating trigger button: true | { content?, style? } */
-    trigger?: boolean | { content?: string; style?: Partial<CSSStyleDeclaration> };
+	/** The URL of the SPA to embed (required) */
+	widgetUrl: string;
+	/** DOM element to append the widget into. Default: document.body */
+	parentContainer?: HTMLElement;
+	/** Positioning mode. Default: "inline" */
+	stylePreset?: StylePreset;
+	/** CSS overrides applied to the container wrapper div */
+	styleOverrides?: StyleOverrides;
+	/** Allowed origin(s) for postMessage validation. Derived from widgetUrl if omitted */
+	allowedOrigin?: string | string[];
+	/** Whether the widget starts visible. Default: true */
+	visible?: boolean;
+	/** Iframe sandbox attribute. Default: "allow-scripts allow-same-origin" */
+	sandbox?: string;
+	/** Additional iframe attributes (e.g. allow, referrerpolicy) */
+	iframeAttrs?: Record<string, string>;
+	/** Opt-in show/hide animation: true | AnimatePreset | { preset?, transition? } */
+	animate?: boolean | AnimatePreset | { preset?: AnimatePreset; transition?: string };
+	/** Built-in floating trigger button: true | { content?, style? } */
+	trigger?: boolean | { content?: string; style?: Partial<CSSStyleDeclaration> };
+	/** Enable drag-and-drop for float preset: true | DraggableOptions */
+	draggable?: boolean | DraggableOptions;
+	/** Enable free-resize for float preset: true | ResizableOptions */
+	resizable?: boolean | ResizableOptions;
+	/** Placeholder config for detach(). Only relevant for inline preset with parentContainer */
+	placeholder?: boolean | PlaceholderOptions;
+	/** Viewport width threshold (px) below which open() auto-maximizes. Default: 640. Set to 0 to disable */
+	smallScreenBreakpoint?: number;
 }
 ```
 
@@ -104,24 +171,33 @@ interface WidgetProviderOptions {
 
 The object returned by `provideWidget()`.
 
-| Method / Property | Signature | Description |
-|-------------------|-----------|-------------|
-| `show()` | `() => void` | Show the widget container |
-| `hide()` | `() => void` | Hide the widget container |
-| `toggle()` | `() => void` | Toggle visibility |
-| `destroy()` | `() => void` | Remove iframe, listeners, DOM elements. Irreversible |
-| `setPreset(preset)` | `(preset: StylePreset) => void` | Switch style preset at runtime |
-| `maximize()` | `() => void` | Switch to fullscreen preset |
-| `minimize()` | `() => void` | Switch back to initial preset |
-| `requestNativeFullscreen()` | `() => Promise<void>` | Browser fullscreen for iframe |
-| `exitNativeFullscreen()` | `() => Promise<void>` | Exit browser fullscreen |
-| `send(type, payload?)` | `<T>(type: string, payload?: T) => void` | Send message to iframe |
-| `onMessage(type, handler)` | `<T>(type: string, handler: (payload: T) => void) => Unsubscribe` | Listen for iframe messages |
-| `subscribe(cb)` | `(cb: (state: WidgetState) => void) => Unsubscribe` | Reactive state subscription |
-| `get()` | `() => WidgetState` | Get current state snapshot |
-| `iframe` | `readonly HTMLIFrameElement` | Direct iframe element reference |
-| `container` | `readonly HTMLElement` | Direct container div reference |
-| `trigger` | `readonly HTMLElement \| null` | Trigger button reference, or null |
+| Method / Property           | Signature                                                         | Description                                                                 |
+| --------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `open()`                    | `() => void`                                                      | Show and auto-maximize on small screens, or minimize on first open          |
+| `show()`                    | `() => void`                                                      | Show the widget container                                                   |
+| `hide()`                    | `() => void`                                                      | Hide the widget container                                                   |
+| `toggle()`                  | `() => void`                                                      | Toggle visibility                                                           |
+| `destroy()`                 | `() => void`                                                      | Remove iframe, listeners, DOM elements. Irreversible                        |
+| `setPreset(preset)`         | `(preset: StylePreset) => void`                                   | Switch style preset at runtime                                              |
+| `maximize()`                | `() => void`                                                      | Switch to fullscreen preset                                                 |
+| `minimize()`                | `() => void`                                                      | Switch back to initial preset                                               |
+| `maximizeHeight(offset?)`   | `(offset?: number) => void`                                       | Maximize height keeping width/position. No-op when inline                   |
+| `minimizeHeight(height?)`   | `(height?: number) => void`                                       | Collapse to minimal height (default 48px). No-op when inline                |
+| `maximizeWidth(offset?)`    | `(offset?: number) => void`                                       | Maximize width keeping height/position. No-op when inline                   |
+| `minimizeWidth(width?)`     | `(width?: number) => void`                                        | Collapse to minimal width (default 48px). No-op when inline                 |
+| `reset()`                   | `() => void`                                                      | Reset both height and width to current preset's defaults. No-op when inline |
+| `requestNativeFullscreen()` | `() => Promise<void>`                                             | Browser fullscreen for iframe                                               |
+| `exitNativeFullscreen()`    | `() => Promise<void>`                                             | Exit browser fullscreen                                                     |
+| `detach()`                  | `() => void`                                                      | Float an inline widget to document.body, leaving a placeholder. Inline only |
+| `dock()`                    | `() => void`                                                      | Return a detached widget to its original parentContainer                    |
+| `send(type, payload?)`      | `<T>(type: string, payload?: T) => void`                          | Send message to iframe                                                      |
+| `onMessage(type, handler)`  | `<T>(type: string, handler: (payload: T) => void) => Unsubscribe` | Listen for iframe messages                                                  |
+| `subscribe(cb)`             | `(cb: (state: WidgetState) => void) => Unsubscribe`               | Reactive state subscription                                                 |
+| `get()`                     | `() => WidgetState`                                               | Get current state snapshot                                                  |
+| `iframe`                    | `readonly HTMLIFrameElement`                                      | Direct iframe element reference                                             |
+| `container`                 | `readonly HTMLElement`                                            | Direct container div reference                                              |
+| `trigger`                   | `readonly HTMLElement \| null`                                    | Trigger button reference, or null                                           |
+| `placeholder`               | `readonly HTMLElement \| null`                                    | Placeholder element reference (only present while detached), or null        |
 
 ---
 
@@ -129,10 +205,163 @@ The object returned by `provideWidget()`.
 
 ```typescript
 interface WidgetState {
-    visible: boolean;
-    ready: boolean;
-    destroyed: boolean;
-    preset: StylePreset;
+	visible: boolean;
+	ready: boolean;
+	destroyed: boolean;
+	preset: StylePreset;
+	heightState: HeightState;
+	widthState: WidthState;
+	/** Whether the widget has been detached from its parentContainer */
+	detached: boolean;
+	/** Whether the viewport width is below the configured smallScreenBreakpoint */
+	isSmallScreen: boolean;
+}
+```
+
+---
+
+### `DimensionState`
+
+```typescript
+type DimensionState = "normal" | "minimized" | "maximized";
+```
+
+---
+
+### `HeightState`
+
+```typescript
+type HeightState = DimensionState;
+```
+
+---
+
+### `WidthState`
+
+```typescript
+type WidthState = DimensionState;
+```
+
+---
+
+### `DraggableOptions`
+
+```typescript
+interface DraggableOptions {
+	/** Height of the drag handle bar in pixels. Default: 24 */
+	handleHeight?: number;
+	/** CSS overrides for the drag handle element */
+	handleStyle?: Partial<CSSStyleDeclaration>;
+	/** Minimum gap (px) between widget edge and viewport edge. Default: 20 */
+	boundaryPadding?: number;
+	/** Enable edge-snap (ghost preview + maximize on release). true | EdgeSnapOptions | false */
+	edgeSnap?: boolean | EdgeSnapOptions;
+	/** Called when pointer is released while the edge-snap ghost is showing */
+	onEdgeSnap?: (edge: SnapEdge) => void;
+	/** Reset-snap: shows a ghost and resets dimensions when dragging away from edges */
+	resetSnap?: {
+		isActive: () => boolean;
+		createGhost: () => HTMLElement;
+	};
+	/** Called when pointer is released while the reset-snap ghost is showing */
+	onResetSnap?: () => void;
+}
+```
+
+---
+
+### `DraggableHandle`
+
+```typescript
+interface DraggableHandle {
+	/** The drag handle DOM element */
+	readonly handleEl: HTMLElement;
+	/** Remove all event listeners and the handle element */
+	destroy(): void;
+	/** Reset position to the preset default (clears top/left, restores bottom/right) */
+	resetPosition(): void;
+}
+```
+
+---
+
+### `EdgeSnapOptions`
+
+```typescript
+interface EdgeSnapOptions {
+	/** Dwell time (ms) at edge before ghost appears. Default: 500 */
+	dwellMs?: number;
+	/** CSS overrides for the ghost preview element */
+	ghostStyle?: Partial<CSSStyleDeclaration>;
+}
+```
+
+---
+
+### `SnapEdge`
+
+```typescript
+type SnapEdge =
+	| "left"
+	| "right"
+	| "top"
+	| "bottom"
+	| "top-left"
+	| "top-right"
+	| "bottom-left"
+	| "bottom-right";
+```
+
+---
+
+### `ResizableOptions`
+
+```typescript
+interface ResizableOptions {
+	/** Size of the resize handle area in pixels. Default: 20 */
+	handleSize?: number;
+	/** CSS overrides for the resize handle element */
+	handleStyle?: Partial<CSSStyleDeclaration>;
+	/** Minimum gap (px) between widget edge and viewport edge. Default: 20 */
+	boundaryPadding?: number;
+	/** Minimum width in pixels. Default: 200 */
+	minWidth?: number;
+	/** Minimum height in pixels. Default: 150 */
+	minHeight?: number;
+	/** Maximum width in pixels. Default: viewport width minus padding */
+	maxWidth?: number;
+	/** Maximum height in pixels. Default: viewport height minus padding */
+	maxHeight?: number;
+	/** Called when a manual resize interaction ends */
+	onResizeEnd?: () => void;
+}
+```
+
+---
+
+### `ResizableHandle`
+
+```typescript
+interface ResizableHandle {
+	/** The resize handle DOM element */
+	readonly handleEl: HTMLElement;
+	/** Remove all event listeners and the handle element */
+	destroy(): void;
+	/** Reset size to the preset default (clears inline width/height) */
+	resetSize(): void;
+}
+```
+
+---
+
+### `PlaceholderOptions`
+
+```typescript
+interface PlaceholderOptions {
+	/** CSS overrides for the placeholder div */
+	style?: Partial<CSSStyleDeclaration>;
+	/** HTML content inside the placeholder (e.g., informational text) */
+	content?: string;
 }
 ```
 
@@ -142,8 +371,8 @@ interface WidgetState {
 
 ```typescript
 interface WidgetMessage<T = unknown> {
-    type: string;
-    payload?: T;
+	type: string;
+	payload?: T;
 }
 ```
 
@@ -177,9 +406,9 @@ type StyleOverrides = Partial<CSSStyleDeclaration>;
 
 ```typescript
 interface AnimateConfig {
-    transition: string;
-    hidden: Partial<CSSStyleDeclaration>;
-    visible: Partial<CSSStyleDeclaration>;
+	transition: string;
+	hidden: Partial<CSSStyleDeclaration>;
+	visible: Partial<CSSStyleDeclaration>;
 }
 ```
 
@@ -202,3 +431,7 @@ interface AnimateConfig {
 ### `IFRAME_BASE`
 
 `Partial<CSSStyleDeclaration>` — Base CSS applied to all iframes (100% width/height, no border).
+
+### `PLACEHOLDER_BASE`
+
+`Partial<CSSStyleDeclaration>` — Default CSS for the detach placeholder element (dashed border, centered content).

package/README.md

@@ -5,7 +5,8 @@
 [![License](https://img.shields.io/npm/l/@marianmeres/widget-provider)](LICENSE)
 
 Embed an iframe-based widget into a host page with built-in positioning presets,
-bidirectional postMessage communication, show/hide animations, and reactive state.
+bidirectional postMessage communication, show/hide animations, drag-and-drop,
+resize, detach/dock workflow, and reactive state.
 
 ## Installation
 
@@ -22,31 +23,41 @@ deno add jsr:@marianmeres/widget-provider
 ## Usage
 
 ```typescript
-import { provideWidget } from '@marianmeres/widget-provider';
+import { provideWidget } from "@marianmeres/widget-provider";
 
 const widget = provideWidget({
-    widgetUrl: 'https://example.com/my-widget',
-    stylePreset: 'float',        // "float" | "fullscreen" | "inline"
-    animate: true,               // fade-scale animation
-    trigger: true,               // show floating trigger button when hidden
+	widgetUrl: "https://example.com/my-widget",
+	stylePreset: "float", // "float" | "fullscreen" | "inline"
+	animate: true, // fade-scale animation
+	trigger: true, // show floating trigger button when hidden
+	draggable: true, // drag handle for float preset
+	resizable: true, // resize handle for float preset
 });
 
 // Control visibility
+widget.open(); // show + auto-maximize on small screens
 widget.show();
 widget.hide();
 widget.toggle();
 
+// Dimension control (float/fullscreen only — no-op when inline)
+widget.maximizeHeight();
+widget.minimizeHeight();
+widget.maximizeWidth();
+widget.minimizeWidth();
+widget.reset();
+
 // Send messages to the iframe
-widget.send('greet', { name: 'World' });
+widget.send("greet", { name: "World" });
 
 // Listen for messages from the iframe
-const unsub = widget.onMessage('response', (payload) => {
-    console.log(payload);
+const unsub = widget.onMessage("response", (payload) => {
+	console.log(payload);
 });
 
 // Subscribe to reactive state changes
 widget.subscribe((state) => {
-    console.log(state.visible, state.ready);
+	console.log(state.visible, state.ready, state.heightState, state.detached);
 });
 
 // Clean up
@@ -55,17 +66,37 @@ widget.destroy();
 
 ### Style Presets
 
-| Preset | Description |
-|--------|-------------|
-| `"inline"` | Flows within parent container (default) |
-| `"float"` | Fixed bottom-right chat-widget style |
-| `"fullscreen"` | Covers viewport with backdrop overlay |
+| Preset         | Description                             |
+| -------------- | --------------------------------------- |
+| `"inline"`     | Flows within parent container (default) |
+| `"float"`      | Fixed bottom-right chat-widget style    |
+| `"fullscreen"` | Covers viewport with backdrop overlay   |
+
+### Detach / Dock (inline only)
+
+An inline widget can be temporarily detached from its parent container and floated
+on `document.body`, leaving a placeholder behind. Dock returns it to the original
+position.
+
+```typescript
+const widget = provideWidget({
+	widgetUrl: "https://example.com/my-widget",
+	parentContainer: document.getElementById("sidebar")!,
+	stylePreset: "inline",
+	placeholder: { content: "Widget is floating..." },
+});
+
+widget.detach(); // moves to body, switches to float style
+widget.dock(); // returns to sidebar, restores inline style
+```
 
 ### Message Protocol
 
 Messages between the host and iframe are namespaced with `@@__widget_provider__@@`
-prefix. The iframe can send built-in control messages: `ready`, `maximize`, `minimize`,
-`hide`, `close`, `setPreset`, `nativeFullscreen`, `exitNativeFullscreen`.
+prefix. The iframe can send built-in control messages: `ready`, `open`, `maximize`,
+`minimize`, `maximizeHeight`, `minimizeHeight`, `maximizeWidth`, `minimizeWidth`,
+`reset`, `hide`, `close`, `setPreset`, `detach`, `dock`, `nativeFullscreen`,
+`exitNativeFullscreen`.
 
 ## API
 

package/dist/draggable.d.ts

@@ -0,0 +1,14 @@
+import type { DraggableHandle, DraggableOptions, SnapEdge } from "./types.js";
+/**
+ * Pure edge-resolution logic: given which viewport edges are touched,
+ * return the single active edge or `null` if ambiguous (corner) or none.
+ */
+export declare function resolveEdge(atLeft: boolean, atRight: boolean, atTop: boolean, atBottom: boolean): SnapEdge | null;
+/**
+ * Make a fixed-position container draggable via a handle bar inserted at the top.
+ *
+ * Uses the Pointer Events API for unified mouse + touch support.
+ * The handle uses `setPointerCapture` so all move/up events are reliably delivered
+ * even when the pointer leaves the element.
+ */
+export declare function makeDraggable(container: HTMLElement, iframe: HTMLIFrameElement, options?: DraggableOptions): DraggableHandle;