@axium/client 0.29.0 → 0.31.0

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;
 }
 

package/dist/gui/controls.d.ts

@@ -0,0 +1,31 @@
+export interface TriggerModifiers {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+}
+export interface MouseTrigger extends TriggerModifiers {
+    button: number;
+}
+/** @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location */
+export declare const enum KeyLocation {
+    Standard = 0,
+    Left = 1,
+    Right = 2,
+    Numpad = 3
+}
+export interface KeyboardTrigger extends TriggerModifiers {
+    key: string;
+    location?: KeyLocation;
+}
+export type Trigger = KeyboardTrigger | MouseTrigger;
+export interface WithAction<TData extends unknown[]> {
+    action(...args: TData): unknown;
+}
+export interface KeyboardHandler<TData extends unknown[]> extends KeyboardTrigger, WithAction<TData> {
+}
+export interface MouseHandler<TData extends unknown[]> extends MouseTrigger, WithAction<TData> {
+}
+export type Handler<TData extends unknown[]> = KeyboardHandler<TData> | MouseHandler<TData>;
+export declare function isMatch(trigger: Trigger, event: KeyboardEvent | MouseEvent): boolean;
+export declare function find<T extends Trigger>(triggers: T[], event: KeyboardEvent | MouseEvent): T | undefined;

package/dist/gui/controls.js

@@ -0,0 +1,24 @@
+/** @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location */
+export var KeyLocation;
+(function (KeyLocation) {
+    KeyLocation[KeyLocation["Standard"] = 0] = "Standard";
+    KeyLocation[KeyLocation["Left"] = 1] = "Left";
+    KeyLocation[KeyLocation["Right"] = 2] = "Right";
+    KeyLocation[KeyLocation["Numpad"] = 3] = "Numpad";
+})(KeyLocation || (KeyLocation = {}));
+export function isMatch(trigger, event) {
+    if (('ctrl' in trigger && trigger.ctrl !== event.ctrlKey) ||
+        ('shift' in trigger && trigger.shift !== event.shiftKey) ||
+        ('alt' in trigger && trigger.alt !== event.altKey) ||
+        ('meta' in trigger && trigger.meta !== event.metaKey))
+        return false;
+    return 'key' in trigger
+        ? 'key' in event && event.key === trigger.key && (!('location' in trigger) || trigger.location === event.location)
+        : 'button' in event && event.button === trigger.button;
+}
+export function find(triggers, event) {
+    for (const trigger of triggers) {
+        if (isMatch(trigger, event))
+            return trigger;
+    }
+}

package/dist/gui/index.d.ts

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

package/dist/gui/index.js

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

package/lib/Audio.svelte

@@ -3,7 +3,7 @@
 	import type { Snippet } from 'svelte';
 	import Icon from './Icon.svelte';
 	import MediaControls from './MediaControls.svelte';
-	import { getMetadata, MediaState, type MediaPicture, type MediaProps } from './media.svelte.js';
+	import { getMetadata, MediaState, type MediaPicture, type MediaProps } from './reactive/media.svelte.js';
 
 	interface Props extends MediaProps {
 		cover?: boolean;

package/lib/MediaControls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { formatDuration } from '@axium/core';
 	import Icon from './Icon.svelte';
-	import type { MediaState } from './media.svelte.js';
+	import type { MediaState } from './reactive/media.svelte.js';
 	import type { Snippet } from 'svelte';
 
 	interface Props {

package/lib/Video.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import Icon from './Icon.svelte';
 	import MediaControls from './MediaControls.svelte';
-	import { MediaState, type MediaProps } from './media.svelte.js';
+	import { MediaState, type MediaProps } from './reactive/media.svelte.js';
 
 	interface Props extends MediaProps {
 		extraControls?: Snippet;

package/lib/attachments/context-menu.ts

@@ -54,7 +54,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));
 

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

@@ -1,257 +1,248 @@
-import { mount, unmount } from 'svelte';
+import { mount, unmount, type Component } 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/lib/attachments/selection.ts

@@ -1,6 +1,10 @@
+import { controls } from '@axium/client/gui';
 import type { Attachment } from 'svelte/attachments';
 import { SvelteSet } from 'svelte/reactivity';
 
+/** A keyboard control bound to a {@link Selection}, e.g. `F2` to rename or `Ctrl+C` to copy. */
+export type SelectionControl = controls.KeyboardHandler<[selection: Selection]>;
+
 /**
  * Manages a reusable, list-wide selection across items rendered with the {@link selectable} attachment.
  *
@@ -16,6 +20,13 @@ export class Selection extends SvelteSet<string> {
 	/** The id of the last item interacted with, used as the anchor for shift-click ranges. */
 	#anchor?: string;
 
+	constructor(
+		/** Keyboard controls dispatched by {@link handleKeyboard}. */
+		protected readonly controls: SelectionControl[] = []
+	) {
+		super();
+	}
+
 	/**
 	 * Update the ordered list of item ids. Call this whenever the rendered order changes
 	 * (e.g. after sorting or loading a new directory).
@@ -32,6 +43,12 @@ export class Selection extends SvelteSet<string> {
 		this.#anchor = undefined;
 	}
 
+	add(id: string): this {
+		super.add(id);
+		this.#anchor = id;
+		return this;
+	}
+
 	/** Apply selection behavior for a click on `id` with the given modifier keys. */
 	handleClick(id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }): void {
 		if (e.shiftKey && this.#anchor) {
@@ -41,7 +58,7 @@ export class Selection extends SvelteSet<string> {
 				const [lo, hi] = start < end ? [start, end] : [end, start];
 				const range = new Set(this.#order.slice(lo, hi + 1));
 				super.clear();
-				for (const rangeId of range) this.add(rangeId);
+				for (const rangeId of range) super.add(rangeId);
 				return;
 			}
 		}
@@ -49,13 +66,22 @@ export class Selection extends SvelteSet<string> {
 		if (e.ctrlKey || e.metaKey) {
 			if (this.has(id)) this.delete(id);
 			else this.add(id);
-			this.#anchor = id;
 			return;
 		}
 
 		super.clear();
 		this.add(id);
-		this.#anchor = id;
+	}
+
+	/**
+	 * Dispatch a keyboard event to a matching control, if any. Returns whether a control handled it.
+	 */
+	handleKeyboard(e: KeyboardEvent): boolean {
+		const control = controls.find(this.controls, e);
+		if (!control) return false;
+
+		control.action(this);
+		return true;
 	}
 }
 
@@ -69,10 +95,8 @@ export class Selection extends SvelteSet<string> {
 export function selectable(selection: Selection, id: string): Attachment<HTMLElement> {
 	return function _attachSelectable(element: HTMLElement) {
 		function onclick(e: MouseEvent) {
-			// Let interactive descendants (action buttons, etc.) opt out of triggering selection.
-			for (let node = e.target as HTMLElement | null; node && node != element; node = node.parentElement) {
+			for (let node = e.target as HTMLElement | null; node && node != element; node = node.parentElement)
 				if (node.hasAttribute('data-no-select')) return;
-			}
 
 			if (e.shiftKey || e.ctrlKey || e.metaKey) {
 				e.preventDefault();
@@ -82,9 +106,33 @@ export function selectable(selection: Selection, id: string): Attachment<HTMLEle
 		}
 
 		element.addEventListener('click', onclick, { capture: true });
+		return () => element.removeEventListener('click', onclick, { capture: true });
+	};
+}
+
+/** Elements that consume keyboard input themselves, and so should suppress selection controls. */
+function isTypingTarget(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+	return target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+}
+
+/**
+ * Register a {@link Selection}'s keyboard controls (e.g. `F2` to rename) on the document.
+ *
+ * This is separate from {@link selectable} so the controls work regardless of which element is focused.
+ * Controls are ignored while the user is typing in an input, textarea, or other editable element.
+ */
+export function selectionControls(selection: Selection): Attachment {
+	return function _attachSelectionControls() {
+		function onkeydown(e: KeyboardEvent) {
+			if (isTypingTarget(e.target)) return;
+			if (selection.handleKeyboard(e)) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		}
 
-		return () => {
-			element.removeEventListener('click', onclick, { capture: true });
-		};
+		document.addEventListener('keydown', onkeydown);
+		return () => document.removeEventListener('keydown', onkeydown);
 	};
 }

package/lib/reactive/clipboard.svelte.ts

@@ -0,0 +1,77 @@
+import { SvelteSet } from 'svelte/reactivity';
+
+interface StoredClipboard<T extends string | boolean | bigint | number> {
+	isCopy: boolean;
+	values: T[];
+}
+
+/**
+ * A reactive, cross-tab clipboard for "cut" and "copy" of values.
+ *
+ * State is mirrored to `localStorage` so it is shared across all tabs of the origin.
+ */
+export class SyncedClipboard<T extends string | boolean | bigint | number> extends SvelteSet<T> {
+	/** The current clipboard mode, or `undefined` when the clipboard is empty. Reactive. */
+	isCopy = $state<boolean>();
+
+	constructor(protected readonly key = 'clipboard') {
+		super();
+
+		this.load();
+
+		addEventListener('storage', e => {
+			if (e.key == this.key) this.load();
+		});
+	}
+
+	/** Whether the clipboard currently holds anything. */
+	get active(): boolean {
+		return typeof this.isCopy === 'boolean' && this.size > 0;
+	}
+
+	/** Place the given values on the clipboard to be moved on paste. */
+	cut(values: Iterable<T>): void {
+		this.isCopy = false;
+		this.set([...values]);
+	}
+
+	/** Place the given values on the clipboard to be duplicated on paste. */
+	copy(values: Iterable<T>): void {
+		this.isCopy = true;
+		this.set([...values]);
+	}
+
+	/** Empty the clipboard. */
+	clear(): void {
+		this.isCopy = undefined;
+		super.clear();
+		if (typeof localStorage != 'undefined') localStorage.removeItem(this.key);
+	}
+
+	protected set(values: T[]): void {
+		super.clear();
+		for (const value of values) this.add(value);
+		if (typeof localStorage != 'undefined')
+			localStorage.setItem(this.key, JSON.stringify({ isCopy: this.isCopy!, values } satisfies StoredClipboard<T>));
+	}
+
+	protected load(): void {
+		if (typeof localStorage == 'undefined') return;
+
+		const raw = localStorage.getItem(this.key);
+		if (!raw) {
+			this.isCopy = undefined;
+			super.clear();
+			return;
+		}
+
+		try {
+			const { isCopy, values } = JSON.parse(raw) as StoredClipboard<T>;
+			this.isCopy = isCopy;
+			for (const value of this) if (!values.includes(value)) this.delete(value);
+			for (const value of values) this.add(value);
+		} catch {
+			this.clear();
+		}
+	}
+}

package/lib/reactive/index.svelte.ts

@@ -0,0 +1,2 @@
+export * from './clipboard.svelte.js';
+export * from './media.svelte.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.29.0",
+	"version": "0.31.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -39,6 +39,7 @@
 		"./components/*": "./lib/*.svelte",
 		"./toast": "./lib/toast.js",
 		"./attachments": "./lib/attachments/index.js",
+		"./reactive": "./lib/reactive/index.svelte.js",
 		"./styles/*": "./styles/*.css"
 	},
 	"scripts": {

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;
 }