@e280/sly 0.2.0-4 → 0.2.0-5

package/README.md

@@ -11,6 +11,7 @@ sly replaces its predecessor, [slate](https://github.com/benevolent-games/slate)
 - 🪄 **dom** — the "it's not jquery" multitool
 - 🪵 **base element** — for a more classical experience
 - 🫛 **ops** — tools for async operations and loading spinners
+- 🪙 **loot** — drag-and-drop facilities
 - 🧪 **testing page** — https://sly.e280.org/
 
 
@@ -46,11 +47,10 @@ view(use => () => html`<p>hello world</p>`)
 - views automatically rerender whenever any [strata-compatible](https://github.com/e280/strata) state changes
 
 ### 🍋 view example
-- **import stuff**
-    ```ts
-    import {view, dom} from "@e280/sly"
-    import {html, css} from "lit"
-    ```
+```ts
+import {view, dom} from "@e280/sly"
+import {html, css} from "lit"
+```
 - **declare a view**
     ```ts
     export const CounterView = view(use => (start: number) => {
@@ -273,18 +273,18 @@ view(use => () => html`<p>hello world</p>`)
 ## 🦝🪵 sly base element
 > *the classic experience*
 
-so views are great, and they can be converted into components..  
-..but views have one drawback — you can't actually expose properties on the element instance itself.
+```ts
+import {BaseElement, Use, attributes, dom} from "@e280/sly"
+import {html, css} from "lit"
+```
+
+`BaseElement` is a class-based approach to create a custom element web component.
+
+it lets you expose js properties on the element instance, which helps you setup a better developer experience for people interacting with your element through the dom.
 
-that's where `BaseElement` comes in.  
-it's a proper class-based element, but it lets you have the same `use` hooks that views enjoy.
+base element enjoys the same `use` hooks as views.
 
 ### 🪵 base element setup
-- **import stuff**
-    ```ts
-    import {BaseElement, Use, attributes, dom} from "@e280/sly"
-    import {html, css} from "lit"
-    ```
 - **declare your element class**
     ```ts
     export class MyElement extends BaseElement {
@@ -295,7 +295,7 @@ it's a proper class-based element, but it lets you have the same `use` hooks tha
 
       // custom attributes
       attrs = attributes(this, {
-        multiply: Number
+        multiply: Number,
       })
 
       // custom methods
@@ -535,6 +535,126 @@ import {Pod, podium, Op, makeLoader, anims} from "@e280/sly"
 
 
 
+<br/><br/>
+
+## 🦝🪙 loot
+> *drag-and-drop facilities*
+
+```ts
+import {loot, ev, view} from "@e280/sly"
+```
+
+### 🪙 `loot.Drops`
+> *accept the user dropping stuff like files onto the page*
+- **setup drops**
+    ```ts
+    const drops = new loot.Drops({
+      predicate: loot.hasFiles,
+      acceptDrop: event => {
+        const files = loot.files(event)
+        console.log("files dropped", files)
+      },
+    })
+    ```
+- **attach event listeners to your dropzone,** one of these ways:
+  - **view example**
+      ```ts
+      view(() => () => html`
+        <div
+          ?data-indicator="${drops.$indicator()}"
+          @dragover="${drops.dragover}"
+          @dragleave="${drops.dragleave}"
+          @drop="${drops.drop}">
+            my dropzone
+        </div>
+      `)
+      ```
+  - **vanilla-js whole-page example**
+      ```ts
+      // attach listeners to accept drops and stuff
+      ev(document.body, {
+        dragover: drops.dragover,
+        dragleave: drops.dragleave,
+        drop: drops.drop,
+      })
+
+      // update indicator attribute on body
+      drops.$indicator.on(indicator => {
+        if (indicator) document.body.setAttribute("data-indicator", "")
+        else document.body.removeAttribute("data-indicator")
+      })
+      ```
+- **flashy css indicator for the dropzone,** so the user knows your app is eager to accept the drop
+    ```css
+    [data-indicator] {
+      border: 0.5em dashed cyan;
+    }
+    ```
+
+### 🪙 `loot.DragAndDrops`
+> *setup drag-and-drops between items within your page*
+- **declare types for your grabbable and hoverable things**
+    ```ts
+    // money that can be picked up and dragged
+    type Money = {value: number}
+      // dnd will call this a "draggy"
+
+    // bag that money can be dropped into
+    type Bag = {id: number}
+      // dnd will call this a "droppy"
+    ```
+- **make your dnd**
+    ```ts
+    const dnd = new loot.DragAndDrops<Money, Bag>({
+      acceptDrop: (event, money, bag) => {
+        console.log("drop!", {money, bag})
+      },
+    })
+    ```
+- **attach dragzone listeners**  
+    (there can be many dragzones...)
+    ```ts
+    view(use => () => {
+      const money = use.once((): Money => ({value: 280}))
+      const dragzone = use.once(() => dnd.dragzone(() => money))
+
+      return html`
+        <div
+          draggable="${dragzone.draggable}"
+          @dragstart="${dragzone.dragstart}"
+          @dragend="${dragzone.dragend}">
+            money ${money.value}
+        </div>
+      `
+    })
+    ```
+- **attach dropzone listeners**  
+    (there can be many dropzones...)
+    ```ts
+    view(use => () => {
+      const bag = use.once((): Bag => ({id: 1}))
+      const dropzone = use.once(() => dnd.dropzone(() => bag))
+      const indicator = !!(dnd.dragging && dnd.hovering === bag)
+
+      return html`
+        <div
+          ?data-indicator="${indicator}"
+          @dragenter="${dropzone.dragenter}"
+          @dragleave="${dropzone.dragleave}"
+          @dragover="${dropzone.dragover}"
+          @drop="${dropzone.drop}">
+            bag ${bag.id}
+        </div>
+      `
+    })
+    ```
+
+### 🪙 loot helpers
+- **`loot.hasFiles(event)`** — return true if `DragEvent` contains any files (useful in `predicate`)
+- **`loot.files(event)`** — returns an array of files in a drop's `DragEvent` (useful in `acceptDrop`)
+
+
+
 <br/><br/>
 
 ## 🦝🧑‍💻 sly is by e280

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/sly",
-	"version": "0.2.0-4",
+	"version": "0.2.0-5",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",

package/s/loot/drag-and-drops.ts

@@ -0,0 +1,82 @@
+
+import {signal} from "@e280/strata"
+import {Drops} from "./drops.js"
+import {outsideCurrentTarget} from "./helpers.js"
+
+/** respond to user dragging-and-dropping things around on a webpage */
+export class DragAndDrops<Draggy, Droppy> {
+
+	/** what is currently being dragged */
+	$draggy = signal<Draggy | undefined>(undefined)
+
+	/** what dropzone are we curently hovering over */
+	$droppy = signal<Droppy | undefined>(undefined)
+
+	constructor(private params: {
+
+		/** accept a dropped item that was declared within this system */
+		acceptDrop: (event: DragEvent, draggy: Draggy, droppy: Droppy) => void
+
+		/** also accept drops on the side */
+		backchannelDrops?: Drops
+	}) {}
+
+	get dragging() {
+		return this.$draggy()
+	}
+
+	get hovering() {
+		return this.$droppy()
+	}
+
+	/** make event listeners to attach to your dragzone(s) */
+	dragzone = (getDraggy: () => Draggy) => ({
+		draggable: "true",
+
+		dragstart: (_: DragEvent) => {
+			this.$draggy.value = getDraggy()
+		},
+
+		dragend: (_: DragEvent) => {
+			this.$draggy.value = undefined
+			this.$droppy.value = undefined
+		},
+	})
+
+	/** make event listeners to attach to your dropzones(s) */
+	dropzone = (getDroppy: () => Droppy) => ({
+		dragenter: (_: DragEvent) => {},
+
+		dragover: (event: DragEvent) => {
+			event.preventDefault()
+			if (this.$draggy())
+				this.$droppy.value = getDroppy()
+			else
+				this.params.backchannelDrops?.dragover(event)
+		},
+
+		dragleave: (event: DragEvent) => {
+			if (outsideCurrentTarget(event))
+				this.$droppy.value = undefined
+			this.params.backchannelDrops?.dragleave(event)
+		},
+
+		drop: (event: DragEvent) => {
+			event.preventDefault()
+			const {acceptDrop} = this.params
+			const draggy = this.$draggy()
+			const droppy = this.$droppy()
+			try {
+				if (draggy && droppy)
+					acceptDrop(event, draggy, droppy)
+				else
+					this.params.backchannelDrops?.drop(event)
+			}
+			finally {
+				this.$draggy.value = undefined
+				this.$droppy.value = undefined
+			}
+		},
+	})
+}
+

package/s/loot/{drop.ts → drops.ts}

@@ -1,10 +1,10 @@
 
 import {signal} from "@e280/strata"
-import {dragIsOutsideCurrentTarget} from "./helpers.js"
+import {outsideCurrentTarget} from "./helpers.js"
 
-/** dropzone that accepts dropped stuff like files */
-export class Drop {
-	#$indicator = signal(false)
+/** dropzone that accepts user-dropped stuff like files */
+export class Drops {
+	$indicator = signal(false)
 
 	constructor(private params: {
 
@@ -15,28 +15,19 @@ export class Drop {
 		acceptDrop: (event: DragEvent) => void
 	}) {}
 
-	get indicator() {
-		return this.#$indicator.value
-	}
-
-	resetIndicator = () => {
-		this.#$indicator.value = false
-	}
-
 	dragover = (event: DragEvent) => {
 		event.preventDefault()
-		if (this.params.predicate(event))
-			this.#$indicator.value = true
+		this.$indicator.value = this.params.predicate(event)
 	}
 
 	dragleave = (event: DragEvent) => {
-		if (dragIsOutsideCurrentTarget(event))
-			this.#$indicator.value = false
+		if (outsideCurrentTarget(event))
+			this.$indicator.value = false
 	}
 
 	drop = (event: DragEvent) => {
 		event.preventDefault()
-		this.#$indicator.value = false
+		this.$indicator.value = false
 		if (this.params.predicate(event))
 			this.params.acceptDrop(event)
 	}

package/s/loot/helpers.ts

@@ -1,18 +1,18 @@
 
-export function dragHasFiles(event: DragEvent) {
+export function hasFiles(event: DragEvent) {
 	return !!(
 		event.dataTransfer &&
 		event.dataTransfer.types.includes("Files")
 	)
 }
 
-export function droppedFiles(event: DragEvent) {
+export function files(event: DragEvent) {
 	return event.dataTransfer
 		? Array.from(event.dataTransfer.files)
 		: []
 }
 
-export function dragIsOutsideCurrentTarget(event: DragEvent) {
+export function outsideCurrentTarget(event: DragEvent) {
 	const isCursorOutsideViewport = !event.relatedTarget || (
 		event.clientX === 0 &&
 		event.clientY === 0

package/s/loot/index.ts

@@ -1,5 +1,5 @@
 
-export * from "./drag-drop.js"
-export * from "./drop.js"
+export * from "./drag-and-drops.js"
+export * from "./drops.js"
 export * from "./helpers.js"
 

package/x/index.html

@@ -131,7 +131,7 @@ body {
 	<img class=icon alt="" src="/assets/favicon.png"/>
 	<h1>sly testing page</h1>
 	<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
-	<p class=lil>v0.2.0-4</p>
+	<p class=lil>v0.2.0-5</p>
 	<incredi-element></incredi-element>
 	<demo-counter>component</demo-counter>
 	<div class=demo></div>

package/x/loot/drag-and-drops.d.ts

@@ -0,0 +1,30 @@
+import { Drops } from "./drops.js";
+/** respond to user dragging-and-dropping things around on a webpage */
+export declare class DragAndDrops<Draggy, Droppy> {
+    private params;
+    /** what is currently being dragged */
+    $draggy: import("@e280/strata").SignalFn<Draggy | undefined>;
+    /** what dropzone are we curently hovering over */
+    $droppy: import("@e280/strata").SignalFn<Droppy | undefined>;
+    constructor(params: {
+        /** accept a dropped item that was declared within this system */
+        acceptDrop: (event: DragEvent, draggy: Draggy, droppy: Droppy) => void;
+        /** also accept drops on the side */
+        backchannelDrops?: Drops;
+    });
+    get dragging(): Draggy | undefined;
+    get hovering(): Droppy | undefined;
+    /** make event listeners to attach to your dragzone(s) */
+    dragzone: (getDraggy: () => Draggy) => {
+        draggable: string;
+        dragstart: (_: DragEvent) => void;
+        dragend: (_: DragEvent) => void;
+    };
+    /** make event listeners to attach to your dropzones(s) */
+    dropzone: (getDroppy: () => Droppy) => {
+        dragenter: (_: DragEvent) => void;
+        dragover: (event: DragEvent) => void;
+        dragleave: (event: DragEvent) => void;
+        drop: (event: DragEvent) => void;
+    };
+}

package/x/loot/drag-and-drops.js

@@ -0,0 +1,63 @@
+import { signal } from "@e280/strata";
+import { outsideCurrentTarget } from "./helpers.js";
+/** respond to user dragging-and-dropping things around on a webpage */
+export class DragAndDrops {
+    params;
+    /** what is currently being dragged */
+    $draggy = signal(undefined);
+    /** what dropzone are we curently hovering over */
+    $droppy = signal(undefined);
+    constructor(params) {
+        this.params = params;
+    }
+    get dragging() {
+        return this.$draggy();
+    }
+    get hovering() {
+        return this.$droppy();
+    }
+    /** make event listeners to attach to your dragzone(s) */
+    dragzone = (getDraggy) => ({
+        draggable: "true",
+        dragstart: (_) => {
+            this.$draggy.value = getDraggy();
+        },
+        dragend: (_) => {
+            this.$draggy.value = undefined;
+            this.$droppy.value = undefined;
+        },
+    });
+    /** make event listeners to attach to your dropzones(s) */
+    dropzone = (getDroppy) => ({
+        dragenter: (_) => { },
+        dragover: (event) => {
+            event.preventDefault();
+            if (this.$draggy())
+                this.$droppy.value = getDroppy();
+            else
+                this.params.backchannelDrops?.dragover(event);
+        },
+        dragleave: (event) => {
+            if (outsideCurrentTarget(event))
+                this.$droppy.value = undefined;
+            this.params.backchannelDrops?.dragleave(event);
+        },
+        drop: (event) => {
+            event.preventDefault();
+            const { acceptDrop } = this.params;
+            const draggy = this.$draggy();
+            const droppy = this.$droppy();
+            try {
+                if (draggy && droppy)
+                    acceptDrop(event, draggy, droppy);
+                else
+                    this.params.backchannelDrops?.drop(event);
+            }
+            finally {
+                this.$draggy.value = undefined;
+                this.$droppy.value = undefined;
+            }
+        },
+    });
+}
+//# sourceMappingURL=drag-and-drops.js.map

package/x/loot/drag-and-drops.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-and-drops.js","sourceRoot":"","sources":["../../s/loot/drag-and-drops.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAC,oBAAoB,EAAC,MAAM,cAAc,CAAA;AAEjD,uEAAuE;AACvE,MAAM,OAAO,YAAY;IAQJ;IANpB,sCAAsC;IACtC,OAAO,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAA;IAE/C,kDAAkD;IAClD,OAAO,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAA;IAE/C,YAAoB,MAOnB;QAPmB,WAAM,GAAN,MAAM,CAOzB;IAAG,CAAC;IAEL,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,OAAO,EAAE,CAAA;IACtB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,OAAO,EAAE,CAAA;IACtB,CAAC;IAED,yDAAyD;IACzD,QAAQ,GAAG,CAAC,SAAuB,EAAE,EAAE,CAAC,CAAC;QACxC,SAAS,EAAE,MAAM;QAEjB,SAAS,EAAE,CAAC,CAAY,EAAE,EAAE;YAC3B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,EAAE,CAAA;QACjC,CAAC;QAED,OAAO,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;YAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;QAC/B,CAAC;KACD,CAAC,CAAA;IAEF,0DAA0D;IAC1D,QAAQ,GAAG,CAAC,SAAuB,EAAE,EAAE,CAAC,CAAC;QACxC,SAAS,EAAE,CAAC,CAAY,EAAE,EAAE,GAAE,CAAC;QAE/B,QAAQ,EAAE,CAAC,KAAgB,EAAE,EAAE;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,IAAI,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,EAAE,CAAA;;gBAEhC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC/C,CAAC;QAED,SAAS,EAAE,CAAC,KAAgB,EAAE,EAAE;YAC/B,IAAI,oBAAoB,CAAC,KAAK,CAAC;gBAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;YAC/B,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAC/C,CAAC;QAED,IAAI,EAAE,CAAC,KAAgB,EAAE,EAAE;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,EAAC,UAAU,EAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YAChC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC7B,IAAI,CAAC;gBACJ,IAAI,MAAM,IAAI,MAAM;oBACnB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;;oBAEjC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;YAC3C,CAAC;oBACO,CAAC;gBACR,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;gBAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;YAC/B,CAAC;QACF,CAAC;KACD,CAAC,CAAA;CACF"}

package/x/loot/{drop.d.ts → drops.d.ts}

@@ -1,15 +1,13 @@
-/** dropzone that accepts dropped stuff like files */
-export declare class Drop {
-    #private;
+/** dropzone that accepts user-dropped stuff like files */
+export declare class Drops {
     private params;
+    $indicator: import("@e280/strata").SignalFn<boolean>;
     constructor(params: {
         /** whether or not the dragged item is acceptable for a drop */
         predicate: (event: DragEvent) => boolean;
         /** fn to handle the drop of an acceptable item */
         acceptDrop: (event: DragEvent) => void;
     });
-    get indicator(): boolean;
-    resetIndicator: () => void;
     dragover: (event: DragEvent) => void;
     dragleave: (event: DragEvent) => void;
     drop: (event: DragEvent) => void;

package/x/loot/drops.js

@@ -0,0 +1,25 @@
+import { signal } from "@e280/strata";
+import { outsideCurrentTarget } from "./helpers.js";
+/** dropzone that accepts user-dropped stuff like files */
+export class Drops {
+    params;
+    $indicator = signal(false);
+    constructor(params) {
+        this.params = params;
+    }
+    dragover = (event) => {
+        event.preventDefault();
+        this.$indicator.value = this.params.predicate(event);
+    };
+    dragleave = (event) => {
+        if (outsideCurrentTarget(event))
+            this.$indicator.value = false;
+    };
+    drop = (event) => {
+        event.preventDefault();
+        this.$indicator.value = false;
+        if (this.params.predicate(event))
+            this.params.acceptDrop(event);
+    };
+}
+//# sourceMappingURL=drops.js.map

package/x/loot/drops.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drops.js","sourceRoot":"","sources":["../../s/loot/drops.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,oBAAoB,EAAC,MAAM,cAAc,CAAA;AAEjD,0DAA0D;AAC1D,MAAM,OAAO,KAAK;IAGG;IAFpB,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE1B,YAAoB,MAOnB;QAPmB,WAAM,GAAN,MAAM,CAOzB;IAAG,CAAC;IAEL,QAAQ,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IACrD,CAAC,CAAA;IAED,SAAS,GAAG,CAAC,KAAgB,EAAE,EAAE;QAChC,IAAI,oBAAoB,CAAC,KAAK,CAAC;YAC9B,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK,CAAA;IAC/B,CAAC,CAAA;IAED,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC3B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK,CAAA;QAC7B,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;CACD"}

package/x/loot/helpers.d.ts

@@ -1,3 +1,3 @@
-export declare function dragHasFiles(event: DragEvent): boolean;
-export declare function droppedFiles(event: DragEvent): File[];
-export declare function dragIsOutsideCurrentTarget(event: DragEvent): boolean;
+export declare function hasFiles(event: DragEvent): boolean;
+export declare function files(event: DragEvent): File[];
+export declare function outsideCurrentTarget(event: DragEvent): boolean;

package/x/loot/helpers.js

@@ -1,13 +1,13 @@
-export function dragHasFiles(event) {
+export function hasFiles(event) {
     return !!(event.dataTransfer &&
         event.dataTransfer.types.includes("Files"));
 }
-export function droppedFiles(event) {
+export function files(event) {
     return event.dataTransfer
         ? Array.from(event.dataTransfer.files)
         : [];
 }
-export function dragIsOutsideCurrentTarget(event) {
+export function outsideCurrentTarget(event) {
     const isCursorOutsideViewport = !event.relatedTarget || (event.clientX === 0 &&
         event.clientY === 0);
     if (isCursorOutsideViewport)

package/x/loot/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../s/loot/helpers.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC5C,OAAO,CAAC,CAAC,CACR,KAAK,CAAC,YAAY;QAClB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAC1C,CAAA;AACF,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC5C,OAAO,KAAK,CAAC,YAAY;QACxB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,EAAE,CAAA;AACN,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,KAAgB;IAC1D,MAAM,uBAAuB,GAAG,CAAC,KAAK,CAAC,aAAa,IAAI,CACvD,KAAK,CAAC,OAAO,KAAK,CAAC;QACnB,KAAK,CAAC,OAAO,KAAK,CAAC,CACnB,CAAA;IAED,IAAI,uBAAuB;QAC1B,OAAO,IAAI,CAAA;IAEZ,MAAM,IAAI,GAAI,KAAK,CAAC,aAAqB,CAAC,qBAAqB,EAAE,CAAA;IACjE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAA;IACzE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAA;IACzE,MAAM,0BAA0B,GAAG,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,CAAA;IAExD,OAAO,0BAA0B,CAAA;AAClC,CAAC"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../s/loot/helpers.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,QAAQ,CAAC,KAAgB;IACxC,OAAO,CAAC,CAAC,CACR,KAAK,CAAC,YAAY;QAClB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAC1C,CAAA;AACF,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAgB;IACrC,OAAO,KAAK,CAAC,YAAY;QACxB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,EAAE,CAAA;AACN,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,KAAgB;IACpD,MAAM,uBAAuB,GAAG,CAAC,KAAK,CAAC,aAAa,IAAI,CACvD,KAAK,CAAC,OAAO,KAAK,CAAC;QACnB,KAAK,CAAC,OAAO,KAAK,CAAC,CACnB,CAAA;IAED,IAAI,uBAAuB;QAC1B,OAAO,IAAI,CAAA;IAEZ,MAAM,IAAI,GAAI,KAAK,CAAC,aAAqB,CAAC,qBAAqB,EAAE,CAAA;IACjE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAA;IACzE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAA;IACzE,MAAM,0BAA0B,GAAG,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,CAAA;IAExD,OAAO,0BAA0B,CAAA;AAClC,CAAC"}

package/x/loot/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./drag-drop.js";
-export * from "./drop.js";
+export * from "./drag-and-drops.js";
+export * from "./drops.js";
 export * from "./helpers.js";

package/x/loot/index.js

@@ -1,4 +1,4 @@
-export * from "./drag-drop.js";
-export * from "./drop.js";
+export * from "./drag-and-drops.js";
+export * from "./drops.js";
 export * from "./helpers.js";
 //# sourceMappingURL=index.js.map

package/x/loot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/loot/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/loot/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA"}

package/s/loot/drag-drop.ts

@@ -1,76 +0,0 @@
-
-import {signal} from "@e280/strata"
-import {dragIsOutsideCurrentTarget} from "./helpers.js"
-
-/** system for dragging-and-dropping things around on a webpage */
-export class DragDrop<Grabbed, Hovering> {
-	#$grabbed = signal<Grabbed | undefined>(undefined)
-	#$hovering = signal<Hovering | undefined>(undefined)
-
-	constructor(private params: {
-
-		/** accept a dropped item that was declared within this system */
-		acceptDrop: (event: DragEvent, grabbed: Grabbed, hovering: Hovering) => void
-
-		/** accept undeclared drops from outside this system */
-		fromOutside?: {
-			predicate: (event: DragEvent, hovering: Hovering) => boolean
-			acceptDrop: (event: DragEvent, hovering: Hovering) => void
-		}
-	}) {}
-
-	/** make event listeners to attach to your dragzone(s) */
-	readonly dragzone = {
-		draggable: () => "true",
-
-		dragstart: (grabbed: Grabbed) => (_: DragEvent) => {
-			this.#$grabbed.value = grabbed
-		},
-
-		dragend: () => (_: DragEvent) => {
-			this.#$grabbed.value = undefined
-			this.#$hovering.value = undefined
-		},
-	}
-
-	/** make event listeners to attach to your dropzones(s) */
-	readonly dropzone = {
-		dragenter: () => (_: DragEvent) => {},
-
-		dragleave: () => (event: DragEvent) => {
-			if (dragIsOutsideCurrentTarget(event))
-				this.#$hovering.value = undefined
-		},
-
-		dragover: (hovering: Hovering) => (event: DragEvent) => {
-			event.preventDefault()
-			const {fromOutside} = this.params
-
-			if (this.#$grabbed() || (fromOutside && fromOutside.predicate(event, hovering)))
-				this.#$hovering.value = hovering
-		},
-
-		drop: (hovering: Hovering) => (event: DragEvent) => {
-			event.preventDefault()
-			const {acceptDrop, fromOutside} = this.params
-
-			const grabbed = this.#$grabbed()
-			this.#$grabbed.value = undefined
-			this.#$hovering.value = undefined
-
-			if (grabbed)
-				acceptDrop(event, grabbed, hovering)
-			else if (fromOutside && fromOutside.predicate(event, hovering))
-				fromOutside.acceptDrop(event, hovering)
-		},
-	}
-
-	get grabbed() {
-		return this.#$grabbed()
-	}
-
-	get hovering() {
-		return this.#$hovering()
-	}
-}
-

package/x/loot/drag-drop.d.ts

@@ -1,29 +0,0 @@
-/** system for dragging-and-dropping things around on a webpage */
-export declare class DragDrop<Grabbed, Hovering> {
-    #private;
-    private params;
-    constructor(params: {
-        /** accept a dropped item that was declared within this system */
-        acceptDrop: (event: DragEvent, grabbed: Grabbed, hovering: Hovering) => void;
-        /** accept undeclared drops from outside this system */
-        fromOutside?: {
-            predicate: (event: DragEvent, hovering: Hovering) => boolean;
-            acceptDrop: (event: DragEvent, hovering: Hovering) => void;
-        };
-    });
-    /** make event listeners to attach to your dragzone(s) */
-    readonly dragzone: {
-        draggable: () => string;
-        dragstart: (grabbed: Grabbed) => (_: DragEvent) => void;
-        dragend: () => (_: DragEvent) => void;
-    };
-    /** make event listeners to attach to your dropzones(s) */
-    readonly dropzone: {
-        dragenter: () => (_: DragEvent) => void;
-        dragleave: () => (event: DragEvent) => void;
-        dragover: (hovering: Hovering) => (event: DragEvent) => void;
-        drop: (hovering: Hovering) => (event: DragEvent) => void;
-    };
-    get grabbed(): Grabbed | undefined;
-    get hovering(): Hovering | undefined;
-}

package/x/loot/drag-drop.js

@@ -1,54 +0,0 @@
-import { signal } from "@e280/strata";
-import { dragIsOutsideCurrentTarget } from "./helpers.js";
-/** system for dragging-and-dropping things around on a webpage */
-export class DragDrop {
-    params;
-    #$grabbed = signal(undefined);
-    #$hovering = signal(undefined);
-    constructor(params) {
-        this.params = params;
-    }
-    /** make event listeners to attach to your dragzone(s) */
-    dragzone = {
-        draggable: () => "true",
-        dragstart: (grabbed) => (_) => {
-            this.#$grabbed.value = grabbed;
-        },
-        dragend: () => (_) => {
-            this.#$grabbed.value = undefined;
-            this.#$hovering.value = undefined;
-        },
-    };
-    /** make event listeners to attach to your dropzones(s) */
-    dropzone = {
-        dragenter: () => (_) => { },
-        dragleave: () => (event) => {
-            if (dragIsOutsideCurrentTarget(event))
-                this.#$hovering.value = undefined;
-        },
-        dragover: (hovering) => (event) => {
-            event.preventDefault();
-            const { fromOutside } = this.params;
-            if (this.#$grabbed() || (fromOutside && fromOutside.predicate(event, hovering)))
-                this.#$hovering.value = hovering;
-        },
-        drop: (hovering) => (event) => {
-            event.preventDefault();
-            const { acceptDrop, fromOutside } = this.params;
-            const grabbed = this.#$grabbed();
-            this.#$grabbed.value = undefined;
-            this.#$hovering.value = undefined;
-            if (grabbed)
-                acceptDrop(event, grabbed, hovering);
-            else if (fromOutside && fromOutside.predicate(event, hovering))
-                fromOutside.acceptDrop(event, hovering);
-        },
-    };
-    get grabbed() {
-        return this.#$grabbed();
-    }
-    get hovering() {
-        return this.#$hovering();
-    }
-}
-//# sourceMappingURL=drag-drop.js.map

package/x/loot/drag-drop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drag-drop.js","sourceRoot":"","sources":["../../s/loot/drag-drop.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,0BAA0B,EAAC,MAAM,cAAc,CAAA;AAEvD,kEAAkE;AAClE,MAAM,OAAO,QAAQ;IAIA;IAHpB,SAAS,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAA;IAClD,UAAU,GAAG,MAAM,CAAuB,SAAS,CAAC,CAAA;IAEpD,YAAoB,MAUnB;QAVmB,WAAM,GAAN,MAAM,CAUzB;IAAG,CAAC;IAEL,yDAAyD;IAChD,QAAQ,GAAG;QACnB,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM;QAEvB,SAAS,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,CAAY,EAAE,EAAE;YACjD,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,OAAO,CAAA;QAC/B,CAAC;QAED,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAAY,EAAE,EAAE;YAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,SAAS,CAAA;YAChC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;QAClC,CAAC;KACD,CAAA;IAED,0DAA0D;IACjD,QAAQ,GAAG;QACnB,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAY,EAAE,EAAE,GAAE,CAAC;QAErC,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,KAAgB,EAAE,EAAE;YACrC,IAAI,0BAA0B,CAAC,KAAK,CAAC;gBACpC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;QACnC,CAAC;QAED,QAAQ,EAAE,CAAC,QAAkB,EAAE,EAAE,CAAC,CAAC,KAAgB,EAAE,EAAE;YACtD,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,EAAC,WAAW,EAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YAEjC,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC9E,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAA;QAClC,CAAC;QAED,IAAI,EAAE,CAAC,QAAkB,EAAE,EAAE,CAAC,CAAC,KAAgB,EAAE,EAAE;YAClD,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,EAAC,UAAU,EAAE,WAAW,EAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YAE7C,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,CAAA;YAChC,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,SAAS,CAAA;YAChC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;YAEjC,IAAI,OAAO;gBACV,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAA;iBAChC,IAAI,WAAW,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC;gBAC7D,WAAW,CAAC,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;QACzC,CAAC;KACD,CAAA;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,SAAS,EAAE,CAAA;IACxB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,UAAU,EAAE,CAAA;IACzB,CAAC;CACD"}

package/x/loot/drop.js

@@ -1,32 +0,0 @@
-import { signal } from "@e280/strata";
-import { dragIsOutsideCurrentTarget } from "./helpers.js";
-/** dropzone that accepts dropped stuff like files */
-export class Drop {
-    params;
-    #$indicator = signal(false);
-    constructor(params) {
-        this.params = params;
-    }
-    get indicator() {
-        return this.#$indicator.value;
-    }
-    resetIndicator = () => {
-        this.#$indicator.value = false;
-    };
-    dragover = (event) => {
-        event.preventDefault();
-        if (this.params.predicate(event))
-            this.#$indicator.value = true;
-    };
-    dragleave = (event) => {
-        if (dragIsOutsideCurrentTarget(event))
-            this.#$indicator.value = false;
-    };
-    drop = (event) => {
-        event.preventDefault();
-        this.#$indicator.value = false;
-        if (this.params.predicate(event))
-            this.params.acceptDrop(event);
-    };
-}
-//# sourceMappingURL=drop.js.map

package/x/loot/drop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drop.js","sourceRoot":"","sources":["../../s/loot/drop.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,0BAA0B,EAAC,MAAM,cAAc,CAAA;AAEvD,qDAAqD;AACrD,MAAM,OAAO,IAAI;IAGI;IAFpB,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE3B,YAAoB,MAOnB;QAPmB,WAAM,GAAN,MAAM,CAOzB;IAAG,CAAC;IAEL,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAA;IAC9B,CAAC;IAED,cAAc,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAA;IAC/B,CAAC,CAAA;IAED,QAAQ,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAA;IAC/B,CAAC,CAAA;IAED,SAAS,GAAG,CAAC,KAAgB,EAAE,EAAE;QAChC,IAAI,0BAA0B,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAA;IAChC,CAAC,CAAA;IAED,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC3B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAA;QAC9B,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;CACD"}