docs(MovableEventDetails): generate docs for event detail output

api/docs/svelte-movable.md

@@ -16,6 +16,7 @@ svelte action - `use:movable` move node on mousedown
 
 |  Interface | Description |
 |  --- | --- |
+|  [MovableEventDetails](./svelte-movable.movableeventdetails.md) | <code>detail</code> payload for <code>movableend</code> and <code>movablestart</code> CustomEvent |
 |  [MovableLimit](./svelte-movable.movablelimit.md) | The limit within which node can be moved |
 |  [MovableParameters](./svelte-movable.movableparameters.md) | svelte action parameters to config behavior of movable |
 

api/docs/svelte-movable.movable.md

@@ -39,13 +39,29 @@ svelte action interface
 <-- incorrect usage-->
 <Component use:movable/>
 ```
+Be aware of side effects:
+
+- element.style.position is set to `relative` (if not already 'absolute' / 'relative') the first time mousedown is triggered
+
+- document.body.userSelect is set to `none` after `mousedown` and restored on `mouseup`
+
+- document.body.cursor is set to `move` after `mousedown` and restored on `mouseup`
 
 ## Example
 
 Typical usage
 
+1. `mousedown` of the trigger `button` element, a `CustomEvent` `movablestart`<!-- -->is dispatched,
+
+2. `mousemove` will trigger `div` to move accordingly;
+
+3. movement will be limited to the border of the `containerNode`<!-- -->, plus and minus 20% of the width &amp; height of the `div` that the action is being used on,
+
+4. `mouseup` will stop the movement; a `CustomEvent` `movableend` is dispatched.
+
 ```svelte
 <script lang="ts">
+  import { fade } from 'svelte/transition'
   import arrows from 'svelte-awesome/icons/arrows';
   import Icon from 'svelte-awesome/components/Icon.svelte';
 
@@ -67,8 +83,8 @@ Typical usage
         },
         trigger: triggerNode,
       }}
-      on:movablestart={() => console.log('movable:start')}
-      on:movableend={() => console.log('movable:end')}
+      on:movablestart={(event) => console.log('movable:start', event.detail.node, event.detail.position)}
+      on:movableend={(event) => console.log('movable:end', event.detail.node, event.detail.position)}
     >
       <button
         bind:this={triggerNode}

api/docs/svelte-movable.movableeventdetails.md

@@ -0,0 +1,40 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [svelte-movable](./svelte-movable.md) &gt; [MovableEventDetails](./svelte-movable.movableeventdetails.md)
+
+## MovableEventDetails interface
+
+`detail` payload for `movableend` and `movablestart` CustomEvent
+
+<b>Signature:</b>
+
+```typescript
+export interface MovableEventDetails 
+```
+
+## Example
+
+
+```svelte
+<script>
+ function handler(event) {
+   const { position, node } = event.detail;
+   console.log('action movable was used on element', node);
+   console.log('last known position:', position);
+}
+</script>
+
+<div
+ use:movable
+ on:movablestart={handler}
+ on:movableend={handler}
+/>
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [node](./svelte-movable.movableeventdetails.node.md) | HTMLElement | the node that the action was placed on |
+|  [position](./svelte-movable.movableeventdetails.position.md) | { left: number; top: number; } | last known position, as in styles.position |
+

api/docs/svelte-movable.movableeventdetails.node.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [svelte-movable](./svelte-movable.md) &gt; [MovableEventDetails](./svelte-movable.movableeventdetails.md) &gt; [node](./svelte-movable.movableeventdetails.node.md)
+
+## MovableEventDetails.node property
+
+the node that the action was placed on
+
+<b>Signature:</b>
+
+```typescript
+node: HTMLElement;
+```

api/docs/svelte-movable.movableeventdetails.position.md

@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [svelte-movable](./svelte-movable.md) &gt; [MovableEventDetails](./svelte-movable.movableeventdetails.md) &gt; [position](./svelte-movable.movableeventdetails.position.md)
+
+## MovableEventDetails.position property
+
+last known position, as in styles.position
+
+<b>Signature:</b>
+
+```typescript
+position: {
+        left: number;
+        top: number;
+    };
+```

api/svelte-movable.api.md

@@ -10,6 +10,15 @@ export function movable(node: HTMLElement, parameters?: Partial<MovableParameter
     destroy(): void;
 };
 
+// @public
+export interface MovableEventDetails {
+    node: HTMLElement;
+    position: {
+        left: number;
+        top: number;
+    };
+}
+
 // @public
 export interface MovableLimit {
     delta?: {

src/movable.ts

@@ -19,22 +19,25 @@ import { input } from './utils';
  *
  * <-- incorrect usage-->
  * <Component use:movable/>
+ * ```
  *
- * ### Side Effects
  *
- * Be aware that:
+ * Be aware of side effects:
  *
  * - element.style.position is set to `relative` (if not already 'absolute' / 'relative') the first time mousedown is triggered
+ *
  * - document.body.userSelect is set to `none` after `mousedown` and restored on `mouseup`
- * - document.body.cursor is set to `move` after `mousedown` and restored on `mouseup`
  *
- * ```
+ * - document.body.cursor is set to `move` after `mousedown` and restored on `mouseup`
  *
  * @example Typical usage
  *
  * 1. `mousedown` of the trigger `button` element, a `CustomEvent` `movablestart`is dispatched,
+ *
  * 2. `mousemove` will trigger `div` to move accordingly;
+ *
  * 3. movement will be limited to the border of the `containerNode`, plus and minus 20% of the width & height of the `div` that the action is being used on,
+ *
  * 4. `mouseup` will stop the movement; a `CustomEvent` `movableend` is dispatched.
  *
  * ```svelte

src/types/index.ts

@@ -89,7 +89,26 @@ export interface MovableParameters {
 }
 
 /**
- * the detail payload for `movableend` and `movablestart` CustomEvent
+ * `detail` payload for `movableend` and `movablestart` CustomEvent
+ * @public
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *  function handler(event) {
+ *    const { position, node } = event.detail;
+ *    console.log('action movable was used on element', node);
+ *    console.log('last known position:', position);
+ * }
+ * </script>
+ *
+ * <div
+ *  use:movable
+ *  on:movablestart={handler}
+ *  on:movableend={handler}
+ * />
+ * ```
  */
 export interface MovableEventDetails {
   /** the node that the action was placed on */