@axium/client 0.30.0 → 0.31.1

package/assets/styles.css

@@ -293,16 +293,17 @@ div.success {
 
 .drag-indicator {
 	position: fixed;
+	top: 0;
+	left: 0;
 	z-index: 100;
+	pointer-events: none;
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5em;
-	pointer-events: none;
 	padding: 0.5em 0.75em;
 	border-radius: 0.5em;
 	background-color: var(--bg-elevated);
 	border: var(--border-elevated);
-	transform: translate(0.75em, 0.75em);
 	max-width: 20em;
 	white-space: nowrap;
 
@@ -326,9 +327,26 @@ div.success {
 	border-radius: 0.5em;
 }
 
+.drag-upload-indicator {
+	position: fixed;
+	bottom: 2em;
+	left: 50%;
+	translate: -50% 0;
+	z-index: 100;
+	pointer-events: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5em;
+	padding: 1em 2em;
+	border-radius: 1em;
+	background-color: var(--bg-elevated);
+	border: var(--border-accent);
+	font-weight: bold;
+	white-space: nowrap;
+}
+
 body.dragging-items,
 body.dragging-items * {
-	cursor: grabbing !important;
 	user-select: none;
 }
 
@@ -456,4 +474,39 @@ div.toast {
 		z-index: 4;
 		font-size: 1.25em;
 	}
+
+	:popover-open {
+		position: fixed;
+		width: 100%;
+		max-width: 100%;
+		max-height: 80dvh;
+		overflow-y: auto;
+		border: none;
+		gap: 0.25em;
+
+		&:not(.mobile-top) {
+			inset: auto 0 0 0 !important;
+			border-top: var(--border-elevated);
+			border-radius: 1em 1em 0 0;
+			padding: 0.5em 0.5em calc(0.5em + env(safe-area-inset-bottom, 0px));
+		}
+
+		&.mobile-top {
+			inset: 0 0 auto 0 !important;
+			border-bottom: var(--border-elevated);
+			border-radius: 0 0 1em 1em;
+			padding: calc(0.5em + env(safe-area-inset-top, 0px)) 0.5em 0.5em;
+		}
+
+		.menu-item {
+			padding: 1em;
+			font-size: 1.05em;
+			border-radius: 0.75em;
+		}
+
+		.menu-header {
+			padding: 0.75em 1em 0.5em;
+			font-size: 1em;
+		}
+	}
 }

package/dist/gui/index.d.ts

@@ -1,3 +1,4 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './mobile.js';

package/dist/gui/index.js

@@ -1,3 +1,4 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './mobile.js';

package/dist/gui/mobile.d.ts

@@ -0,0 +1 @@
+export declare function isMobile(): boolean;

package/dist/gui/mobile.js

@@ -0,0 +1,4 @@
+const width = matchMedia('(width <= 700px)');
+export function isMobile() {
+    return width.matches;
+}

package/lib/Popover.svelte

@@ -66,16 +66,16 @@
 		:global(:hover:has(:hover > .Popover > .toggle-hover)) > div > .toggle-hover:not(.cascade-hover) {
 			visibility: hidden;
 		}
-	}
 
-	:popover-open {
-		position-anchor: --popover;
-		position-try-fallbacks:
-			flip-inline,
-			flip-block,
-			flip-block flip-inline;
-		position-visibility: always;
-		left: anchor(left);
-		top: anchor(bottom);
+		:popover-open {
+			position-anchor: --popover;
+			position-try-fallbacks:
+				flip-inline,
+				flip-block,
+				flip-block flip-inline;
+			position-visibility: always;
+			left: anchor(left);
+			top: anchor(bottom);
+		}
 	}
 </style>

package/lib/UserMenu.svelte

@@ -10,7 +10,7 @@
 </script>
 
 {#if user}
-	<Popover>
+	<Popover class="mobile-top">
 		{#snippet toggle()}
 			<div class="UserMenu toggle">
 				<UserPFP {user} />
@@ -79,12 +79,15 @@
 	}
 
 	:global(.UserMenu + div:popover-open) {
-		position: fixed;
-		left: unset;
-		right: anchor(right);
-		top: calc(anchor(bottom) + 0.5em);
-		width: fit-content;
-		height: fit-content;
 		cursor: default;
+
+		@media (width > 700px) {
+			position: fixed;
+			left: unset;
+			right: anchor(right);
+			top: calc(anchor(bottom) + 0.5em);
+			width: fit-content;
+			height: fit-content;
+		}
 	}
 </style>

package/lib/attachments/context-menu.ts

@@ -1,3 +1,4 @@
+import { isMobile } from '@axium/client/gui';
 import { mount, unmount } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import Icon from '../Icon.svelte';
@@ -54,7 +55,7 @@ export function contextMenu(...menuItems: ContextMenuEntry[] | [() => ContextMen
 					item.action();
 				};
 
-				if (item.i) mountedIcons.add(mount<any, {}>(Icon, { target: div, props: { i: item.i } }));
+				if (item.i) mountedIcons.add(mount(Icon, { target: div, props: { i: item.i } }));
 
 				div.appendChild(document.createTextNode(item.text));
 
@@ -86,6 +87,8 @@ export function contextMenu(...menuItems: ContextMenuEntry[] | [() => ContextMen
 			menu.showPopover();
 			_forcePopover = true;
 
+			if (isMobile()) return;
+
 			const x = e.clientX;
 			const y = e.clientY;
 

package/lib/attachments/drag-and-drop.ts

@@ -1,257 +1,248 @@
 import { mount, unmount } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import Icon from '../Icon.svelte';
-import { SvelteSet } from 'svelte/reactivity';
-import type { Selection } from './selection.js';
 
-/** A grabbable item, used to populate the floating drag indicator. */
-export interface Item {
-	id: string;
+const mimeType = 'text/x-axium-drag';
+
+export interface Display {
 	name: string;
 	icon?: string;
 }
 
-/**
- * Coordinates a press-and-hold drag of one or more things onto a {@link target}.
- *
- * Things are made grabbable with the {@link source} attachment,
- * and targets accept them with {@link target}.
- *
- * While a drag is in progress a floating indicator follows the pointer showing
- * the grabbed item's name and icon, with a bold `+ N` when several are grabbed.
- *
- * The grabbed elements expose the `dragging` class for styling.
- */
-export class Controller extends SvelteSet<string> implements Disposable {
-	#indicator?: HTMLElement;
-	#indicatorIcon?: Record<string, any>;
+function createIndicator(display: Display, extraItems: number): HTMLElement {
+	const indicator = document.createElement('div');
+	indicator.className = 'drag-indicator';
 
-	/** Registered drop targets, keyed by their element. */
-	readonly #targets = new Map<HTMLElement, (ids: string[]) => unknown>();
+	const icon = display.icon && mount(Icon, { target: indicator, props: { i: display.icon } });
 
-	#activeTarget?: HTMLElement;
+	const name = document.createElement('span');
+	name.className = 'drag-name';
+	name.textContent = display.name;
+	indicator.appendChild(name);
 
-	/** Whether a drag is currently in progress. */
-	get active(): boolean {
-		return this.size > 0;
+	if (extraItems) {
+		const extra = document.createElement('b');
+		extra.className = 'drag-count';
+		extra.textContent = `+ ${extraItems}`;
+		indicator.appendChild(extra);
 	}
 
-	_registerTarget(element: HTMLElement, onDrop: (ids: string[]) => unknown): () => void {
-		this.#targets.set(element, onDrop);
-		return () => this.#targets.delete(element);
-	}
+	document.body.appendChild(indicator);
 
-	/** Begin dragging the given ids, showing a floating indicator labelled for `lead`. */
-	begin(ids: string[], lead: Item): void {
-		if (!ids.length) return;
-		for (const id of ids) this.add(id);
-
-		const indicator = document.createElement('div');
-		indicator.className = 'drag-indicator';
-		if (lead.icon) this.#indicatorIcon = mount<any, {}>(Icon, { target: indicator, props: { i: lead.icon } });
-
-		const name = document.createElement('span');
-		name.className = 'drag-name';
-		name.textContent = lead.name;
-		indicator.appendChild(name);
-
-		if (ids.length > 1) {
-			const extra = document.createElement('b');
-			extra.className = 'drag-count';
-			extra.textContent = `+ ${ids.length - 1}`;
-			indicator.appendChild(extra);
-		}
+	const remove = indicator.remove.bind(indicator);
+	return Object.assign(indicator, {
+		remove() {
+			if (icon) unmount(icon);
+			remove();
+		},
+	});
+}
 
-		document.body.appendChild(indicator);
-		this.#indicator = indicator;
-		document.body.classList.add('dragging-items');
-	}
+const emptyImage = new Image();
+emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
-	/** Move the floating indicator and update which drop target is under the pointer. */
-	move(x: number, y: number): void {
-		if (!this.#indicator) return;
-		this.#indicator.style.left = x + 'px';
-		this.#indicator.style.top = y + 'px';
-
-		// Find the drop target under the pointer (ignoring the indicator itself, which is pointer-events: none).
-		let target: HTMLElement | undefined;
-		for (let node = document.elementFromPoint(x, y) as HTMLElement | null; node; node = node.parentElement) {
-			if (this.#targets.has(node)) {
-				target = node;
-				break;
-			}
-		}
+export let isActive = false;
 
-		if (target == this.#activeTarget) return;
-		this.#activeTarget?.classList.remove('drag-over');
-		this.#activeTarget = target;
-		this.#activeTarget?.classList.add('drag-over');
-	}
+/**
+ * Make an element a draggable source.
+ *
+ * Grabs either the given selection (when non-empty) or just this item.
+ */
+export function source<T = string>(type: string, selection: Iterable<T>, thisValue: T, display: Display): Attachment<HTMLElement> {
+	const sel = Array.from(selection);
+	if (!sel.length) sel.push(thisValue);
+
+	return function _attachDraggable(element: HTMLElement) {
+		element.draggable = true;
 
-	/** Finish the drag, dropping onto the active target (if any), and clean up. */
-	end(): void {
-		const onDrop = this.#activeTarget && this.#targets.get(this.#activeTarget);
-		try {
-			if (onDrop && this.size) onDrop([...this]);
-		} finally {
-			this.dispose();
+		let indicator: HTMLElement;
+
+		function onDragOver(e: DragEvent) {
+			indicator.style.translate = `${e.clientX}px ${e.clientY}px`;
 		}
-	}
 
-	/** Abort the drag without dropping. */
-	cancel(): void {
-		this.dispose();
-	}
+		function onDragStart(e: DragEvent) {
+			for (let node = e.target as HTMLElement | null; node && node !== element; node = node.parentElement) {
+				if (node.hasAttribute('data-no-select')) {
+					e.preventDefault();
+					return;
+				}
+			}
 
-	dispose(): void {
-		this.clear();
-		this.#activeTarget?.classList.remove('drag-over');
-		this.#activeTarget = undefined;
-		if (this.#indicatorIcon) unmount(this.#indicatorIcon);
-		this.#indicatorIcon = undefined;
-		this.#indicator?.remove();
-		this.#indicator = undefined;
-		document.body.classList.remove('dragging-items');
-	}
+			if (!e.dataTransfer) return;
+			e.dataTransfer.setData(`${mimeType}+${type.toLowerCase()}`, JSON.stringify(sel));
+			e.dataTransfer.effectAllowed = 'move';
 
-	[Symbol.dispose]() {
-		this.dispose();
-	}
-}
+			e.dataTransfer.setDragImage(emptyImage, 0, 0);
 
-/**
- * The default drag-and-drop controller.
- */
-const defaultController = new Controller();
+			isActive = true;
+			indicator = createIndicator(display, sel.length - 1);
+			indicator.style.translate = `${e.clientX}px ${e.clientY}px`;
+			document.body.classList.add('dragging-items');
+			document.addEventListener('dragover', onDragOver);
+		}
 
-export { defaultController as controller };
+		function onDragEnd() {
+			isActive = false;
+			document.removeEventListener('dragover', onDragOver);
+			indicator.remove();
+			document.body.classList.remove('dragging-items');
+		}
 
-/** How long, in milliseconds, a touch must be held before it starts a drag (rather than scrolling). */
-const HOLD_DELAY = 400;
+		element.addEventListener('dragstart', onDragStart);
+		element.addEventListener('dragend', onDragEnd);
+
+		return () => {
+			document.removeEventListener('dragover', onDragOver);
+			element.removeEventListener('dragstart', onDragStart);
+			element.removeEventListener('dragend', onDragEnd);
+		};
+	};
+}
 
 /**
- * Make an element a draggable source for a {@link Controller}.
- *
- * Pressing and dragging the pointer out of the item grabs either the current {@link Selection} (when
- * this item is part of a non-empty selection) or just this item, then follows the pointer until release.
+ * Register an element as a drop target for drags of the given kind.
  */
-export function source(
-	item: Item,
-	selectedIds: Iterable<string> = [item.id],
-	controller: Controller = defaultController
-): Attachment<HTMLElement> {
-	const selection = Array.from(selectedIds);
-	if (!selection.length) selection.push(item.id);
+export function target<T = string>(type: string, onDrop: (items: T[]) => unknown, exclude?: T): Attachment<HTMLElement> {
+	const mime = `${mimeType}+${type.toLowerCase()}`;
 
-	return function _attachDraggable(element: HTMLElement) {
-		let lastX = 0,
-			lastY = 0,
-			started = false,
-			pointerId: number | undefined,
-			holdTimer: number | undefined;
-
-		function _clearTimer() {
-			clearTimeout(holdTimer);
-			holdTimer = undefined;
-			pointerId = undefined;
+	return function _attachDropTarget(element: HTMLElement) {
+		let depth = 0;
+
+		function ignore(e: DragEvent): boolean {
+			return !e.dataTransfer?.types.includes(mime);
 		}
 
-		function start() {
-			if (started || pointerId === undefined) return;
-			started = true;
+		function onDragEnter(e: DragEvent) {
+			if (ignore(e)) return;
+			e.preventDefault();
+			if (depth++ === 0) element.classList.add('drag-over');
+		}
 
-			controller.begin(selection, item);
-			element.setPointerCapture(pointerId);
-			controller.move(lastX, lastY);
+		function onDragOver(e: DragEvent) {
+			if (ignore(e)) return;
+			// Required for the element to be a valid drop target.
+			e.preventDefault();
+			if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
 		}
 
-		function onPointerDown(e: PointerEvent) {
-			if (e.button !== 0) return;
-			for (let node = e.target as HTMLElement | null; node && node !== element; node = node.parentElement) {
-				if (node.hasAttribute('data-no-select')) return;
+		function onDragLeave(e: DragEvent) {
+			if (ignore(e)) return;
+			if (--depth <= 0) {
+				depth = 0;
+				element.classList.remove('drag-over');
 			}
-			lastX = e.clientX;
-			lastY = e.clientY;
-			started = false;
-			pointerId = e.pointerId;
+		}
 
-			// Touch presses scroll the list, so require a deliberate press-and-hold before grabbing.
-			if (e.pointerType === 'touch') holdTimer = setTimeout(start, HOLD_DELAY);
+		function onDropEvent(e: DragEvent) {
+			if (ignore(e)) return;
+			e.preventDefault();
+			depth = 0;
+			element.classList.remove('drag-over');
+
+			let items: T[];
+			try {
+				items = JSON.parse(e.dataTransfer!.getData(mime));
+			} catch {
+				return;
+			}
+			if (!Array.isArray(items)) return;
+			const index = exclude ? items.indexOf(exclude) : -1;
+			if (index !== -1) items.splice(index, 1);
+			if (items.length) onDrop(items);
 		}
 
-		// The drag begins once the pointer leaves the item it was pressed on.
-		function onPointerLeave(e: PointerEvent) {
-			if (pointerId === undefined || e.pointerId !== pointerId || started) return;
-			// A touch that leaves the item before the hold fires is a scroll, not a drag.
-			if (holdTimer !== undefined) return _clearTimer();
+		element.addEventListener('dragenter', onDragEnter);
+		element.addEventListener('dragover', onDragOver);
+		element.addEventListener('dragleave', onDragLeave);
+		element.addEventListener('drop', onDropEvent);
 
-			lastX = e.clientX;
-			lastY = e.clientY;
-			start();
+		return () => {
+			element.removeEventListener('dragenter', onDragEnter);
+			element.removeEventListener('dragover', onDragOver);
+			element.removeEventListener('dragleave', onDragLeave);
+			element.removeEventListener('drop', onDropEvent);
+		};
+	};
+}
+
+function notUpload(e: DragEvent): boolean {
+	return !e.dataTransfer?.types.includes('Files');
+}
+
+/**
+ * Register an element as a target for files dragged in from the system file manager.
+ */
+export function uploadTarget(label: string, onDrop: (entries: FileSystemEntry[]) => unknown): Attachment<HTMLElement> {
+	return function _attachUploadTarget(element: HTMLElement) {
+		let depth = 0,
+			indicator: HTMLElement | undefined,
+			icon: {} | undefined;
+
+		function hide() {
+			depth = 0;
+			element.classList.remove('drag-over');
+			if (icon) unmount(icon);
+			indicator?.remove();
 		}
 
-		function onPointerMove(e: PointerEvent) {
-			if (pointerId === undefined || e.pointerId !== pointerId || !started) return;
-			lastX = e.clientX;
-			lastY = e.clientY;
+		function onDragEnter(e: DragEvent) {
+			if (notUpload(e)) return;
+			// Stop drag events from bubbling so the innermost upload target wins
 			e.preventDefault();
-			controller.move(e.clientX, e.clientY);
+			e.stopPropagation();
+			if (depth++ !== 0) return;
+			element.classList.add('drag-over');
+
+			indicator = document.createElement('div');
+			indicator.className = 'drag-upload-indicator';
+			icon = mount(Icon, { target: indicator, props: { i: 'upload' } });
+
+			const text = document.createElement('span');
+			text.textContent = label;
+			indicator.appendChild(text);
+
+			document.body.appendChild(indicator);
 		}
 
-		function onPointerUp(e: PointerEvent) {
-			if (pointerId === undefined || e.pointerId !== pointerId) return;
-			if (element.hasPointerCapture(pointerId)) element.releasePointerCapture(pointerId);
-			_clearTimer();
-			if (started) {
-				e.preventDefault();
-				e.stopPropagation();
-				suppressClick = true;
-				controller.end();
-			}
-			started = false;
+		function onDragOver(e: DragEvent) {
+			if (notUpload(e)) return;
+			e.preventDefault();
+			e.stopPropagation();
+			if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
 		}
 
-		function onPointerCancel() {
-			_clearTimer();
-			if (started) controller.cancel();
-			started = false;
+		function onDragLeave(e: DragEvent) {
+			if (notUpload(e)) return;
+			e.stopPropagation();
+			if (--depth <= 0) hide();
 		}
 
-		// A drag may be followed by a synthetic click; swallow it so it doesn't re-select or open the item.
-		let suppressClick = false;
-		function onClick(e: MouseEvent) {
-			if (!suppressClick) return;
-			suppressClick = false;
+		function onDropEvent(e: DragEvent) {
+			if (notUpload(e)) return;
 			e.preventDefault();
 			e.stopPropagation();
+			hide();
+
+			const entries: FileSystemEntry[] = [];
+			for (const item of e.dataTransfer!.items) {
+				const entry = item.webkitGetAsEntry();
+				if (entry) entries.push(entry);
+			}
+			if (entries.length) onDrop(entries);
 		}
 
-		element.addEventListener('pointerdown', onPointerDown);
-		element.addEventListener('pointerleave', onPointerLeave);
-		element.addEventListener('pointermove', onPointerMove);
-		element.addEventListener('pointerup', onPointerUp);
-		element.addEventListener('pointercancel', onPointerCancel);
-		element.addEventListener('click', onClick, { capture: true });
+		element.addEventListener('dragenter', onDragEnter);
+		element.addEventListener('dragover', onDragOver);
+		element.addEventListener('dragleave', onDragLeave);
+		element.addEventListener('drop', onDropEvent);
 
 		return () => {
-			element.removeEventListener('pointerdown', onPointerDown);
-			element.removeEventListener('pointerleave', onPointerLeave);
-			element.removeEventListener('pointermove', onPointerMove);
-			element.removeEventListener('pointerup', onPointerUp);
-			element.removeEventListener('pointercancel', onPointerCancel);
-			element.removeEventListener('click', onClick, { capture: true });
+			hide();
+			element.removeEventListener('dragenter', onDragEnter);
+			element.removeEventListener('dragover', onDragOver);
+			element.removeEventListener('dragleave', onDragLeave);
+			element.removeEventListener('drop', onDropEvent);
 		};
 	};
 }
-
-/**
- * Register an element as a drop target for a {@link DragController}.
- *
- * When grabbed items are released over the element, `onDrop` is called with the dragged ids. While a
- * drag hovers the element it carries the `drag-over` class.
- */
-export function target(onDrop: (ids: string[]) => unknown, controller: Controller = defaultController): Attachment<HTMLElement> {
-	return function _attachDropTarget(element: HTMLElement) {
-		return controller._registerTarget(element, onDrop);
-	};
-}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.30.0",
+	"version": "0.31.1",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -40,7 +40,10 @@
 		"./toast": "./lib/toast.js",
 		"./attachments": "./lib/attachments/index.js",
 		"./reactive": "./lib/reactive/index.svelte.js",
-		"./styles/*": "./styles/*.css"
+		"./styles/*": {
+			"types": "./styles/styles.d.ts",
+			"default": "./styles/*.css"
+		}
 	},
 	"scripts": {
 		"build": "tsc"

package/styles/list.css

@@ -60,7 +60,7 @@ div.list-header {
 	background-color: var(--bg-alt);
 }
 
-.list-item.dragging {
+.list-item.dimmed {
 	opacity: 0.5;
 }
 

package/styles/styles.d.ts

@@ -0,0 +1 @@
+declare module '@axium/client/styles/*';