@axium/client 0.28.1 → 0.30.0

package/assets/styles.css

@@ -50,7 +50,7 @@ button {
 	cursor: pointer;
 
 	&:hover {
-		background-color: hsl(var(--hue) 15 calc(var(--bg-light) + (var(--light-step) * 2)));
+		background-color: var(--bg-accent);
 	}
 }
 
@@ -145,7 +145,7 @@ details {
 dialog {
 	border-radius: 1em;
 	background: var(--bg-menu);
-	border: 1px solid #8888;
+	border: var(--border-elevated);
 	padding: 1em;
 	max-width: calc(100% - 2em);
 	word-wrap: normal;
@@ -177,11 +177,11 @@ progress::-webkit-progress-bar {
 }
 
 progress::-webkit-progress-value {
-	background-color: hsl(0 0 var(--fg-light));
+	background-color: var(--fg-normal);
 }
 
 progress::-moz-progress-bar {
-	background-color: hsl(0 0 var(--fg-light));
+	background-color: var(--fg-normal);
 }
 
 ::selection,
@@ -233,7 +233,7 @@ div.success {
 
 .danger {
 	border: var(--border-error);
-	background-color: hsl(0 20 calc(var(--bg-light) + var(--light-step)));
+	background-color: hsl(from var(--bg-strong) 0 s l);
 	color: hsl(0 33 var(--fg-light));
 	--fill: hsl(0 33 var(--fg-light));
 	accent-color: hsl(0 33 var(--fg-light));
@@ -252,8 +252,8 @@ div.success {
 }
 
 :popover-open {
-	border: 1px solid hsl(var(--hue) 10 calc(var(--fg-light) - var(--light-step)));
-	background-color: hsl(from var(--bg-menu) h s l / 95%);
+	border: var(--border-elevated);
+	background-color: var(--bg-elevated);
 	border-radius: 0.5em;
 	padding: 0.25em;
 	margin: 0;
@@ -275,6 +275,14 @@ div.success {
 			cursor: pointer;
 		}
 	}
+
+	.menu-header {
+		padding: 0.5em 0.75em;
+		font-size: 0.85em;
+		font-weight: bold;
+		color: var(--fg-normal);
+		user-select: none;
+	}
 }
 
 .icon-text {
@@ -283,6 +291,47 @@ div.success {
 	gap: 1em;
 }
 
+.drag-indicator {
+	position: fixed;
+	z-index: 100;
+	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;
+
+	> :not(.drag-name) {
+		flex-shrink: 0;
+	}
+
+	.drag-name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.drag-count {
+		font-weight: bold;
+	}
+}
+
+.drag-over {
+	outline: 2px solid var(--fg-accent);
+	outline-offset: -2px;
+	border-radius: 0.5em;
+}
+
+body.dragging-items,
+body.dragging-items * {
+	cursor: grabbing !important;
+	user-select: none;
+}
+
 a:has(button, div) {
 	display: contents;
 }
@@ -290,7 +339,6 @@ a:has(button, div) {
 .version {
 	font-family: monospace;
 	font-size: 0.9em;
-	color: #aaa;
 }
 
 h1,
@@ -300,13 +348,15 @@ h4,
 h5,
 h6 {
 	.version {
+		opacity: 80%;
 		margin-left: 1em;
 	}
 }
 
 .version::before {
 	content: 'v';
-	color: #888;
+	color: var(--fg-disabled);
+	opacity: 80%;
 }
 
 .inline-button {

package/assets/theme.css

@@ -35,6 +35,7 @@ html {
 	--bg-accent: hsl(var(--hue) 15 calc(var(--bg-light) + (var(--light-step) * 2)));
 	--bg-alt: hsl(var(--hue) 5 calc(var(--bg-light) + var(--light-step)));
 	--bg-strong: hsl(var(--hue) 20 calc(var(--bg-light) + var(--light-step)));
+	--bg-elevated: hsl(from var(--bg-menu) h s l / 95%);
 
 	--bg-error: hsl(0 40 var(--bg-light-status));
 	--bg-warning: hsl(60 40 var(--bg-light-status));
@@ -52,6 +53,7 @@ html {
 	--border-accent: 1px solid hsl(var(--hue) 10 calc(var(--bg-light) + (var(--light-step) * 3)));
 	--border-alt: 1px solid var(--bg-alt);
 	--border-strong: 1px solid hsl(var(--hue) 20 calc(var(--bg-light) + (var(--light-step) * 3)));
+	--border-elevated: 1px solid hsl(var(--hue) 10 calc(var(--fg-light) - var(--light-step)));
 
 	--border-error: 1px solid hsl(0 50 var(--fg-light));
 	--border-warning: 1px solid hsl(60 50 var(--fg-light));

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/AccessControlDialog.svelte

@@ -6,7 +6,7 @@
 	import Discovery, * as discovery from './Discovery.svelte';
 	import Icon from './Icon.svelte';
 	import UserCard from './UserCard.svelte';
-	import { closeOnBackGesture } from './attachments.js';
+	import { closeOnBackGesture } from './attachments/gestures.js';
 	import { toast, toastStatus } from './toast.js';
 
 	interface Props extends HTMLDialogAttributes {

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/FormDialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
-	import { closeOnBackGesture } from './attachments.js';
+	import { closeOnBackGesture } from './attachments/gestures.js';
 
 	let {
 		children,

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

@@ -0,0 +1,123 @@
+import { mount, unmount } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import Icon from '../Icon.svelte';
+
+export interface ContextMenuItem {
+	/** Icon name */
+	i?: string;
+	text: string;
+	danger?: boolean;
+	action(): unknown;
+}
+
+/** A non-interactive label, e.g. to describe what it acts on. */
+export interface ContextMenuHeader {
+	header: string;
+}
+
+export type ContextMenuEntry = ContextMenuItem | ContextMenuHeader | false | null | undefined;
+
+/**
+ * Attach a context menu to an element with the given actions.
+ *
+ * Pass a function instead of a fixed list to have the menu rebuilt every time it opens — useful when
+ * the available actions or their labels depend on state that changes after the menu is attached (e.g. a
+ * selection).
+ */
+export function contextMenu(...menuItems: ContextMenuEntry[] | [() => ContextMenuEntry[]]): Attachment<HTMLElement> {
+	return function _attachContextMenu(element: HTMLElement) {
+		const menu = document.createElement('div');
+		menu.popover = 'auto';
+		menu.className = 'context-menu';
+
+		const mountedIcons = new Set<Record<string, any>>();
+
+		function build(items: ContextMenuEntry[]) {
+			for (const item of items) {
+				if (!item) continue;
+
+				if ('header' in item) {
+					const header = document.createElement('div');
+					header.classList.add('menu-header');
+					header.appendChild(document.createTextNode(item.header));
+					menu.appendChild(header);
+					continue;
+				}
+
+				const div = document.createElement('div');
+				div.classList.add('icon-text', 'menu-item');
+				if (item.danger) div.classList.add('danger');
+
+				div.onclick = e => {
+					e.stopPropagation();
+					menu.hidePopover();
+					item.action();
+				};
+
+				if (item.i) mountedIcons.add(mount<any, {}>(Icon, { target: div, props: { i: item.i } }));
+
+				div.appendChild(document.createTextNode(item.text));
+
+				menu.appendChild(div);
+			}
+		}
+
+		if (typeof menuItems[0] != 'function') build(menuItems as ContextMenuEntry[]);
+
+		document.body.appendChild(menu);
+
+		let _forcePopover = false;
+
+		element.oncontextmenu = (e: MouseEvent) => {
+			for (let node = e.target as HTMLElement | null; node && node !== element; node = node.parentElement) {
+				if (node instanceof HTMLDialogElement || (node.popover && node !== menu)) return;
+			}
+
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (typeof menuItems[0] == 'function') {
+				for (const icon of mountedIcons) unmount(icon);
+				mountedIcons.clear();
+				menu.replaceChildren();
+				build(menuItems[0]());
+			}
+
+			menu.showPopover();
+			_forcePopover = true;
+
+			const x = e.clientX;
+			const y = e.clientY;
+
+			menu.style.left = x + 'px';
+			menu.style.top = y + 'px';
+
+			const rect = menu.getBoundingClientRect();
+			if (rect.right > window.innerWidth) {
+				menu.style.left = '';
+				menu.style.right = window.innerWidth - x + 'px';
+			}
+			if (rect.bottom > window.innerHeight) {
+				menu.style.top = '';
+				menu.style.bottom = window.innerHeight - y + 'px';
+			}
+		};
+
+		/**
+		 * Workaround for https://github.com/whatwg/html/issues/10905
+		 * @todo Remove when the problem is fixed.
+		 */
+		element.onpointerup = (e: PointerEvent) => {
+			if (!_forcePopover) return;
+			e.stopPropagation();
+			e.preventDefault();
+			menu.togglePopover();
+			_forcePopover = false;
+		};
+
+		return function _disposeContextMenu() {
+			for (const icon of mountedIcons) unmount(icon);
+			menu.remove();
+		};
+	};
+}

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

@@ -0,0 +1,257 @@
+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;
+	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>;
+
+	/** Registered drop targets, keyed by their element. */
+	readonly #targets = new Map<HTMLElement, (ids: string[]) => unknown>();
+
+	#activeTarget?: HTMLElement;
+
+	/** Whether a drag is currently in progress. */
+	get active(): boolean {
+		return this.size > 0;
+	}
+
+	_registerTarget(element: HTMLElement, onDrop: (ids: string[]) => unknown): () => void {
+		this.#targets.set(element, onDrop);
+		return () => this.#targets.delete(element);
+	}
+
+	/** 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);
+		}
+
+		document.body.appendChild(indicator);
+		this.#indicator = indicator;
+		document.body.classList.add('dragging-items');
+	}
+
+	/** 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;
+			}
+		}
+
+		if (target == this.#activeTarget) return;
+		this.#activeTarget?.classList.remove('drag-over');
+		this.#activeTarget = target;
+		this.#activeTarget?.classList.add('drag-over');
+	}
+
+	/** 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();
+		}
+	}
+
+	/** Abort the drag without dropping. */
+	cancel(): void {
+		this.dispose();
+	}
+
+	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');
+	}
+
+	[Symbol.dispose]() {
+		this.dispose();
+	}
+}
+
+/**
+ * The default drag-and-drop controller.
+ */
+const defaultController = new Controller();
+
+export { defaultController as controller };
+
+/** How long, in milliseconds, a touch must be held before it starts a drag (rather than scrolling). */
+const HOLD_DELAY = 400;
+
+/**
+ * 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.
+ */
+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);
+
+	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;
+		}
+
+		function start() {
+			if (started || pointerId === undefined) return;
+			started = true;
+
+			controller.begin(selection, item);
+			element.setPointerCapture(pointerId);
+			controller.move(lastX, lastY);
+		}
+
+		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;
+			}
+			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);
+		}
+
+		// 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();
+
+			lastX = e.clientX;
+			lastY = e.clientY;
+			start();
+		}
+
+		function onPointerMove(e: PointerEvent) {
+			if (pointerId === undefined || e.pointerId !== pointerId || !started) return;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			e.preventDefault();
+			controller.move(e.clientX, e.clientY);
+		}
+
+		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 onPointerCancel() {
+			_clearTimer();
+			if (started) controller.cancel();
+			started = false;
+		}
+
+		// 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;
+			e.preventDefault();
+			e.stopPropagation();
+		}
+
+		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 });
+
+		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 });
+		};
+	};
+}
+
+/**
+ * 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/gestures.ts

@@ -0,0 +1,36 @@
+import type { Attachment } from 'svelte/attachments';
+
+/**
+ * Enabled the use of back gestures to close dialogs
+ */
+export function closeOnBackGesture(element: HTMLDialogElement) {
+	if (!globalThis.history) {
+		throw new Error('Can not attach back gesture handling because the History API is unavailable');
+	}
+
+	const showModal = element.showModal.bind(element);
+
+	let closedByBack = false,
+		historyKey = Math.random().toString(16).slice(2);
+
+	element.showModal = () => {
+		closedByBack = false;
+		/* popstate's state will be the "upcoming" state.
+		i.e, the state after having pushed 1 then 2 would be 1 */
+		history.replaceState(historyKey, '');
+		history.pushState(null, '');
+		showModal();
+	};
+
+	element.addEventListener('close', () => {
+		if (closedByBack) return;
+		history.replaceState(null, '');
+	});
+
+	window.addEventListener('popstate', e => {
+		if (e.state != historyKey) return;
+		closedByBack = true;
+		element.close();
+	});
+}
+closeOnBackGesture satisfies Attachment<HTMLDialogElement>;

package/lib/attachments/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Svelte attachments
+ * @see https://svelte.dev/docs/svelte/@attach
+ */
+import type { Attachment } from 'svelte/attachments';
+
+export * from './context-menu.js';
+export * as drag from './drag-and-drop.js';
+export * from './gestures.js';
+export * from './selection.js';
+
+/**
+ * Dynamically resize `<textarea>`s based on content.
+ * @todo Remove this once `field-sizing` works everywhere
+ */
+export function dynamicRows(max: number = 40, min: number = 3): Attachment<HTMLTextAreaElement> {
+	return function _attachDynamicRows(element: HTMLTextAreaElement) {
+		element.style.resize = 'none';
+		element.style.fieldSizing = 'content';
+		element.style.height = 'max-content';
+		element.style.overflowY = 'scroll';
+
+		function update() {
+			if (!element.value) return;
+			element.rows = Math.max(Math.min(element.value.split('\n').length, max), min);
+		}
+
+		if (!navigator.userAgent.includes('Firefox')) return;
+		update();
+		element.addEventListener('input', update);
+		element.addEventListener('keyup', update);
+		return () => {
+			element.removeEventListener('input', update);
+			element.removeEventListener('keyup', update);
+		};
+	};
+}

package/lib/attachments/selection.ts

@@ -0,0 +1,138 @@
+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.
+ *
+ * Click semantics (matching common file managers):
+ * - Plain click: select only the clicked item, clearing the rest.
+ * - Ctrl/Cmd click: toggle the clicked item's selection.
+ * - Shift click: select the range between the last-clicked item and the clicked item, clearing everything outside it.
+ */
+export class Selection extends SvelteSet<string> {
+	/** The ordered list of ids, set by the caller so ranges (shift-click) can be computed. */
+	#order: 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).
+	 */
+	setOrder(ids: string[]): void {
+		this.#order = ids;
+		for (const id of this) if (!ids.includes(id)) this.delete(id);
+		if (this.#anchor && !ids.includes(this.#anchor)) this.#anchor = undefined;
+	}
+
+	/** Clear the entire selection. */
+	clear(): void {
+		super.clear();
+		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) {
+			const start = this.#order.indexOf(this.#anchor);
+			const end = this.#order.indexOf(id);
+			if (start != -1 && end != -1) {
+				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) super.add(rangeId);
+				return;
+			}
+		}
+
+		if (e.ctrlKey || e.metaKey) {
+			if (this.has(id)) this.delete(id);
+			else this.add(id);
+			return;
+		}
+
+		super.clear();
+		this.add(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;
+	}
+}
+
+/**
+ * Wire an element into a {@link Selection} as the item identified by `id`.
+ *
+ * Reflects selection state via the `selected` class and handles select-on-click (with shift/ctrl/meta
+ * modifiers). The handler runs in the capture phase so it can be combined with other click handlers on
+ * the element that perform navigation/preview only when the click was not a selection gesture.
+ */
+export function selectable(selection: Selection, id: string): Attachment<HTMLElement> {
+	return function _attachSelectable(element: HTMLElement) {
+		function onclick(e: MouseEvent) {
+			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();
+				e.stopPropagation();
+			}
+			selection.handleClick(id, e);
+		}
+
+		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();
+			}
+		}
+
+		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.28.1",
+	"version": "0.30.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -38,7 +38,8 @@
 		"./components": "./lib/index.js",
 		"./components/*": "./lib/*.svelte",
 		"./toast": "./lib/toast.js",
-		"./attachments": "./lib/attachments.js",
+		"./attachments": "./lib/attachments/index.js",
+		"./reactive": "./lib/reactive/index.svelte.js",
 		"./styles/*": "./styles/*.css"
 	},
 	"scripts": {

package/styles/list.css

@@ -45,6 +45,7 @@ div.list-header {
 	overflow: hidden;
 	text-wrap: nowrap;
 	flex: 0 0 auto;
+	user-select: none;
 }
 
 .list-item:not(.list-header, :first-child) {
@@ -52,9 +53,17 @@ div.list-header {
 }
 
 .list-item:not(.list-header):hover {
+	background-color: var(--bg-strong);
+}
+
+.list-item.selected {
 	background-color: var(--bg-alt);
 }
 
+.list-item.dragging {
+	opacity: 0.5;
+}
+
 p.list-empty {
 	text-align: center;
 	color: #888;

package/lib/attachments.ts

@@ -1,158 +0,0 @@
-/**
- * Svelte attachments
- * @see https://svelte.dev/docs/svelte/@attach
- */
-import { mount, unmount } from 'svelte';
-import type { Attachment } from 'svelte/attachments';
-import Icon from './Icon.svelte';
-
-export interface ContextMenuItem {
-	/** Icon name */
-	i?: string;
-	text: string;
-	danger?: boolean;
-	action(): unknown;
-}
-
-/**
- * Attach a context menu to an element with the given actions
- */
-export function contextMenu(...menuItems: (ContextMenuItem | false | null | undefined)[]): Attachment<HTMLElement> {
-	return function _attachContextMenu(element: HTMLElement) {
-		const menu = document.createElement('div');
-		menu.popover = 'auto';
-		menu.className = 'context-menu';
-
-		const mountedIcons = new Set<Record<string, any>>();
-
-		for (const item of menuItems) {
-			if (!item) continue;
-			const div = document.createElement('div');
-			div.classList.add('icon-text', 'menu-item');
-			if (item.danger) div.classList.add('danger');
-
-			div.onclick = e => {
-				e.stopPropagation();
-				menu.hidePopover();
-				item.action();
-			};
-
-			if (item.i) mountedIcons.add(mount<any, {}>(Icon, { target: div, props: { i: item.i } }));
-
-			div.appendChild(document.createTextNode(item.text));
-
-			menu.appendChild(div);
-		}
-
-		document.body.appendChild(menu);
-
-		let _forcePopover = false;
-
-		element.oncontextmenu = (e: MouseEvent) => {
-			for (let node = e.target as HTMLElement | null; node && node !== element; node = node.parentElement) {
-				if (node instanceof HTMLDialogElement || (node.popover && node !== menu)) return;
-			}
-
-			e.preventDefault();
-			e.stopPropagation();
-
-			menu.showPopover();
-			_forcePopover = true;
-
-			const x = e.clientX;
-			const y = e.clientY;
-
-			menu.style.left = x + 'px';
-			menu.style.top = y + 'px';
-
-			const rect = menu.getBoundingClientRect();
-			if (rect.right > window.innerWidth) {
-				menu.style.left = '';
-				menu.style.right = window.innerWidth - x + 'px';
-			}
-			if (rect.bottom > window.innerHeight) {
-				menu.style.top = '';
-				menu.style.bottom = window.innerHeight - y + 'px';
-			}
-		};
-
-		/**
-		 * Workaround for https://github.com/whatwg/html/issues/10905
-		 * @todo Remove when the problem is fixed.
-		 */
-		element.onpointerup = (e: PointerEvent) => {
-			if (!_forcePopover) return;
-			e.stopPropagation();
-			e.preventDefault();
-			menu.togglePopover();
-			_forcePopover = false;
-		};
-
-		return function _disposeContextMenu() {
-			for (const icon of mountedIcons) unmount(icon);
-			menu.remove();
-		};
-	};
-}
-
-/**
- * Dynamically resize `<textarea>`s based on content.
- * @todo Remove this once `field-sizing` works everywhere
- */
-export function dynamicRows(max: number = 40, min: number = 3): Attachment<HTMLTextAreaElement> {
-	return function _attachDynamicRows(element: HTMLTextAreaElement) {
-		element.style.resize = 'none';
-		element.style.fieldSizing = 'content';
-		element.style.height = 'max-content';
-		element.style.overflowY = 'scroll';
-
-		function update() {
-			if (!element.value) return;
-			element.rows = Math.max(Math.min(element.value.split('\n').length, max), min);
-		}
-
-		if (!navigator.userAgent.includes('Firefox')) return;
-		update();
-		element.addEventListener('input', update);
-		element.addEventListener('keyup', update);
-		return () => {
-			element.removeEventListener('input', update);
-			element.removeEventListener('keyup', update);
-		};
-	};
-}
-
-/**
- * Enabled the use of back gestures to close dialogs
- */
-export function closeOnBackGesture(element: HTMLDialogElement) {
-	if (!globalThis.history) {
-		throw new Error('Can not attach back gesture handling because the History API is unavailable');
-	}
-
-	const showModal = element.showModal.bind(element);
-
-	let closedByBack = false,
-		historyKey = Math.random().toString(16).slice(2);
-
-	element.showModal = () => {
-		closedByBack = false;
-		/* popstate's state will be the "upcoming" state.
-		i.e, the state after having pushed 1 then 2 would be 1 */
-		history.replaceState(historyKey, '');
-		history.pushState(null, '');
-		showModal();
-	};
-
-	element.addEventListener('close', () => {
-		if (closedByBack) return;
-		history.replaceState(null, '');
-	});
-
-	window.addEventListener('popstate', e => {
-		if (e.state != historyKey) return;
-		closedByBack = true;
-		element.close();
-	});
-}
-closeOnBackGesture satisfies Attachment<HTMLDialogElement>;