@heyramzi/ui 3.6.0 → 3.7.1

package/src/slides/deck-controller.svelte.js

@@ -0,0 +1,254 @@
+import { untrack } from "svelte";
+import { fitBox, gridBoxes } from "./layout.js";
+import { keyAction, nextPosition, ordinalOf, prevPosition, progressOf, settle, visibleIndexes } from "./navigation.js";
+import { resolveLabels } from "./labels.js";
+import { DEFAULT_CANVAS } from "./types.js";
+/** Height the controls bar takes at the bottom of the overview, in px. */
+const CONTROLS_ROOM = 56;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Where `cell` lands when the camera moves `target` onto `fit`. Every box shares one scale and
+* shift, and a transform tween is linear in both, so the grid stays rigid while it zooms.
+*/
+function frame(cell, target, fit) {
+	const k = fit.scale / target.scale;
+	return {
+		x: fit.x + (cell.x - target.x) * k,
+		y: fit.y + (cell.y - target.y) * k,
+		scale: cell.scale * k
+	};
+}
+function isEditable(el) {
+	return el.isContentEditable || [
+		"INPUT",
+		"TEXTAREA",
+		"SELECT"
+	].includes(el.tagName);
+}
+const byDocumentOrder = (a, b) => a.el && b.el ? a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1 : 0;
+export class DeckController {
+	entries = $state.raw([]);
+	view = $state("slide");
+	/** The highlighted thumbnail in the overview, as an index among the visible slides. */
+	cursor = $state(0);
+	direction = $state(1);
+	zoom = $state(null);
+	size = $state({
+		w: 0,
+		h: 0
+	});
+	options;
+	#listeners = new Set();
+	#timer;
+	#frame = 0;
+	constructor(options) {
+		this.options = options;
+	}
+	canvas = $derived(this.options.canvas ?? DEFAULT_CANVAS);
+	labels = $derived(resolveLabels(this.options.labels));
+	slides = $derived(this.entries.map((entry) => ({
+		steps: this.options.fragments === false ? 0 : entry.steps,
+		hidden: entry.hidden
+	})));
+	visible = $derived(visibleIndexes(this.slides));
+	position = $derived(settle(this.slides, {
+		index: this.options.index,
+		step: this.options.step
+	}));
+	ordinal = $derived(ordinalOf(this.slides, this.position.index));
+	progress = $derived(progressOf(this.slides, this.position));
+	current = $derived(this.entries[this.position.index]);
+	/** The slide after this one, for a presenter's preview. Null on the last. */
+	upcoming = $derived(this.visible.find((i) => i > this.position.index) ?? null);
+	overview = $derived(this.view === "overview");
+	/** True when every fragment shows: in the overview, or on a deck that doesn't stage reveals. */
+	revealAll = $derived(this.overview || this.options.fragments === false);
+	atStart = $derived(prevPosition(this.slides, this.position, this.options.loop) === null);
+	atEnd = $derived(nextPosition(this.slides, this.position, this.options.loop) === null);
+	fit = $derived(fitBox(this.size, this.canvas));
+	grid = $derived(gridBoxes({
+		w: this.size.w,
+		h: Math.max(0, this.size.h - (this.options.controls === false ? 0 : CONTROLS_ROOM))
+	}, this.canvas, this.visible.length));
+	/** Where slide `index` sits right now: centred to fit, or in its overview cell. */
+	boxOf(index) {
+		const zoom = this.zoom;
+		const cell = this.grid.boxes[this.visible.indexOf(index)];
+		if (zoom?.framed) {
+			const target = this.grid.boxes[this.visible.indexOf(zoom.index)];
+			return cell && target ? frame(cell, target, this.fit) : this.fit;
+		}
+		return this.overview || zoom ? cell : this.fit;
+	}
+	register(entry) {
+		untrack(() => {
+			this.entries = [...this.entries, entry].sort(byDocumentOrder);
+		});
+		return () => untrack(() => {
+			this.entries = this.entries.filter((candidate) => candidate !== entry);
+			this.#write(this.position);
+		});
+	}
+	listen(listener) {
+		this.#listeners.add(listener);
+		return () => this.#listeners.delete(listener);
+	}
+	mount() {
+		return () => this.#stopZoom();
+	}
+	/** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
+	get listening() {
+		return this.options.keyboard !== false;
+	}
+	#write(position) {
+		this.options.index = position.index;
+		this.options.step = position.step;
+	}
+	/** `animate: false` skips the slide transition, for a move the overview zoom already shows. */
+	commit(target, source = "local", animate = true) {
+		if (!target) return;
+		const from = this.position;
+		const to = settle(this.slides, target);
+		if (to.index === from.index && to.step === from.step) return;
+		this.direction = to.index >= from.index ? 1 : -1;
+		const apply = () => this.#write(to);
+		if (animate && to.index !== from.index && this.options.transition) this.options.transition(apply);
+		else apply();
+		for (const listener of this.#listeners) listener(to, source);
+	}
+	next() {
+		this.commit(nextPosition(this.slides, this.position, this.options.loop));
+	}
+	prev() {
+		this.commit(prevPosition(this.slides, this.position, this.options.loop));
+	}
+	go(index, step = 0, source = "local") {
+		this.commit({
+			index,
+			step
+		}, source);
+	}
+	/**
+	* Opening zooms the camera out from the current slide to the whole grid. Closing zooms into
+	* the current slide, so `select` moves there first.
+	*/
+	toggleOverview(force) {
+		const open = force ?? !this.overview;
+		if (open === this.overview) return;
+		const index = this.position.index;
+		if (open) this.cursor = Math.max(0, this.visible.indexOf(index));
+		this.view = open ? "overview" : "slide";
+		this.#stopZoom();
+		const ms = this.options.zoomMs?.() ?? 0;
+		if (ms <= 0 || !this.visible.includes(index)) return;
+		/*
+		* Each way paints its start state first and moves on a later frame. Moved in the same
+		* flush, a style read in between (the overview handing focus back) commits the boxes
+		* before the transition rule is on, and the zoom jumps to its end.
+		*/
+		this.zoom = {
+			index,
+			framed: open,
+			running: !open
+		};
+		this.#frame = requestAnimationFrame(() => {
+			this.#frame = requestAnimationFrame(() => {
+				this.zoom = {
+					index,
+					framed: !open,
+					running: true
+				};
+				this.#timer = setTimeout(() => this.#stopZoom(), ms);
+			});
+		});
+	}
+	/** Leaves the overview on slide `index`. Picking the current slide keeps its step. */
+	select(index) {
+		const keep = index === this.position.index;
+		this.commit({
+			index,
+			step: keep ? this.position.step : 0
+		}, "local", false);
+		this.toggleOverview(false);
+	}
+	#stopZoom() {
+		clearTimeout(this.#timer);
+		cancelAnimationFrame(this.#frame);
+		this.zoom = null;
+	}
+	#moveCursor(to) {
+		this.cursor = clamp(to, 0, this.visible.length - 1);
+	}
+	/**
+	* Runs the deck's own keys. Returns the action it took, or null when the key wasn't its.
+	* `fullscreen` and `presenter` are returned untouched, since they need the page.
+	*/
+	handleKey(event) {
+		if (event.defaultPrevented || !this.listening || event.altKey || event.ctrlKey || event.metaKey) return null;
+		const target = event.target instanceof HTMLElement ? event.target : null;
+		if (target && isEditable(target)) return null;
+		const action = keyAction(event.key, event.shiftKey);
+		if (!action) return null;
+		/* Space and Enter belong to a focused control, not to the deck. */
+		if ((event.key === " " || event.key === "Enter") && target?.closest("button, a, summary")) return null;
+		const handled = this.overview ? this.#overviewKey(action) : this.#slideKey(action);
+		if (!handled) return null;
+		event.preventDefault();
+		return action;
+	}
+	#slideKey(action) {
+		switch (action) {
+			case "next":
+				this.next();
+				return true;
+			case "prev":
+				this.prev();
+				return true;
+			case "first":
+				this.go(this.visible[0] ?? 0);
+				return true;
+			case "last":
+				this.go(this.visible[this.visible.length - 1] ?? 0);
+				return true;
+			case "overview":
+				this.toggleOverview(true);
+				return true;
+			case "fullscreen": return true;
+			case "presenter": return !!this.options.presenter;
+			default: return false;
+		}
+	}
+	#overviewKey(action) {
+		const cols = this.grid.cols;
+		switch (action) {
+			case "next":
+				this.#moveCursor(this.cursor + 1);
+				return true;
+			case "prev":
+				this.#moveCursor(this.cursor - 1);
+				return true;
+			case "down":
+				this.#moveCursor(this.cursor + cols);
+				return true;
+			case "up":
+				this.#moveCursor(this.cursor - cols);
+				return true;
+			case "first":
+				this.#moveCursor(0);
+				return true;
+			case "last":
+				this.#moveCursor(this.visible.length - 1);
+				return true;
+			case "select":
+				this.select(this.visible[this.cursor] ?? this.position.index);
+				return true;
+			case "close":
+			case "overview":
+				this.toggleOverview(false);
+				return true;
+			case "fullscreen": return true;
+			case "presenter": return !!this.options.presenter;
+			default: return false;
+		}
+	}
+}

package/src/work/kanban-board-state.svelte.js

@@ -0,0 +1,205 @@
+import { untrack } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+import { prefersReducedMotion } from "svelte/motion";
+import { cubicOut } from "svelte/easing";
+import { durationMs } from "../lib/motion.js";
+import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
+import { createKanbanRailState } from "./kanban-rail-state.svelte.js";
+import { createCardKeyDown } from "./kanban-keyboard.js";
+/**
+* A board's state: sort, the per-column fold and cap, and the drag wiring. The hidden rail
+* lives in `rail`, the keyboard move in `onCardKeyDown`.
+* Call it during component init, since it registers an effect. `input` is read on every use.
+*/
+export function createKanbanBoardState(input) {
+	// The drop slot takes the held card's height, so the column doesn't jump when it lands.
+	let slotHeight = $state(0);
+	let slotMotion = $derived({
+		duration: prefersReducedMotion.current ? 0 : durationMs("quick"),
+		easing: cubicOut
+	});
+	let internalExpanded = $state([]);
+	let expandedIds = $derived(input().expanded ?? internalExpanded);
+	function compare(a, b) {
+		const { sortKey, manualTiebreak, boardOrder, sortKeys } = input();
+		if (sortKey === "manual") {
+			const tie = manualTiebreak?.(a, b) ?? 0;
+			if (!boardOrder) return tie;
+			const ao = boardOrder(a);
+			const bo = boardOrder(b);
+			if (ao == null && bo == null) return tie;
+			if (ao == null) return 1;
+			if (bo == null) return -1;
+			return ao < bo ? -1 : ao > bo ? 1 : tie;
+		}
+		const key = sortKeys.find((entry) => entry.id === sortKey);
+		return key ? key.compare(a, b) : 0;
+	}
+	function sortedByColumn(columnId) {
+		const { items, getColumn } = input();
+		return items.filter((item) => getColumn(item) === columnId).slice().sort(compare);
+	}
+	function idAt(list, index) {
+		const item = list[index];
+		return item === undefined ? null : input().getId(item);
+	}
+	function capOf(columnId) {
+		const { limit } = input();
+		return typeof limit === "function" ? limit(columnId) : limit;
+	}
+	/** The column holds more cards than its cap, so it gets a fold. */
+	function isFoldable(columnId, total) {
+		const cap = capOf(columnId);
+		return cap !== undefined && total > cap;
+	}
+	// Open from this board's "Show N more", on top of the header caret's `expanded`.
+	const laneOpen = new SvelteSet();
+	function isOpen(columnId) {
+		return expandedIds.includes(columnId) || laneOpen.has(columnId);
+	}
+	/** The fold is shut, so the tail is out of sight. */
+	function isCapped(columnId, total) {
+		return isFoldable(columnId, total) && !isOpen(columnId);
+	}
+	// A card moved into a folded column stays in view, wherever its sort puts it.
+	const pinned = new SvelteSet();
+	// The caret folding a column shuts this board's own fold of it too, so every lane lands on the cap.
+	let previousExpanded = [];
+	$effect(() => {
+		const now = expandedIds;
+		untrack(() => {
+			for (const id of previousExpanded) if (!now.includes(id)) shut(id);
+		});
+		previousExpanded = [...now];
+	});
+	function moveAndPin(id, move) {
+		pinned.add(id);
+		return input().onMove(id, move);
+	}
+	function canDrop(columnId) {
+		const { isDroppable, columns } = input();
+		return isDroppable?.(columnId) ?? columns.find((c) => c.id === columnId)?.droppable ?? true;
+	}
+	function setExpanded(next) {
+		internalExpanded = next;
+		input().onExpandedChange?.(next);
+	}
+	// Shutting drops the column's pins, so the fold closes to exactly its cap.
+	function shut(columnId) {
+		laneOpen.delete(columnId);
+		for (const item of sortedByColumn(columnId)) pinned.delete(input().getId(item));
+	}
+	/** "Show N more": opens this board's cell only. */
+	function expand(columnId) {
+		laneOpen.add(columnId);
+	}
+	/** "Show less": shuts this board's cell, and lifts the caret's open if it was the caret's. */
+	function collapse(columnId) {
+		shut(columnId);
+		if (expandedIds.includes(columnId)) setExpanded(expandedIds.filter((id) => id !== columnId));
+	}
+	/** The header caret: the whole column, in every board that shares `expanded`. */
+	function toggleColumn(columnId) {
+		if (expandedIds.includes(columnId)) collapse(columnId);
+		else setExpanded([...expandedIds, columnId]);
+	}
+	const dnd = createKanbanDnd({
+		items: () => input().items,
+		getId: (item) => input().getId(item),
+		getColumn: (item) => input().getColumn(item),
+		getColumnItems: sortedByColumn,
+		getSortKey: () => input().sortKey,
+		boardOrder: (item) => input().boardOrder?.(item),
+		onMove: moveAndPin,
+		dropAtTop: (columnId) => input().dropAtTop?.(columnId) ?? isCapped(columnId, sortedByColumn(columnId).length),
+		isDroppable: canDrop
+	});
+	const rail = createKanbanRailState({
+		hidden: () => input().hidden,
+		onHiddenChange: () => input().onHiddenChange,
+		canDrop,
+		dnd
+	});
+	const onCardKeyDown = createCardKeyDown({
+		input,
+		canDrop,
+		isHidden: (columnId) => rail.hiddenSet.has(columnId),
+		sortedByColumn,
+		isCapped,
+		moveAndPin
+	});
+	let view = $derived(input().columns.map((column) => {
+		const all = sortedByColumn(column.id);
+		const cap = capOf(column.id);
+		const foldable = isFoldable(column.id, all.length);
+		const open = foldable && isOpen(column.id);
+		if (!foldable || cap === undefined) {
+			return {
+				column,
+				all,
+				head: all,
+				tail: [],
+				foldable,
+				open,
+				capped: false
+			};
+		}
+		// Head: the first `cap` cards plus any pinned ones, in sort order. The fold holds the rest.
+		const head = [];
+		const tail = [];
+		all.forEach((item, index) => {
+			(index < cap || pinned.has(input().getId(item)) ? head : tail).push(item);
+		});
+		return {
+			column,
+			all,
+			head,
+			tail,
+			foldable,
+			open,
+			capped: !open && tail.length > 0
+		};
+	}));
+	let hiddenColumns = $derived(input().columns.filter((column) => rail.hiddenSet.has(column.id)));
+	function contextOf(entry, active) {
+		const { column, all, head, capped } = entry;
+		return {
+			count: all.length,
+			active,
+			shown: capped ? head.length : all.length,
+			capped,
+			hide: () => rail.hide(column.id),
+			expand: () => expand(column.id),
+			collapse: () => collapse(column.id)
+		};
+	}
+	return {
+		get slotHeight() {
+			return slotHeight;
+		},
+		set slotHeight(value) {
+			slotHeight = value;
+		},
+		get slotMotion() {
+			return slotMotion;
+		},
+		get expandedIds() {
+			return expandedIds;
+		},
+		get view() {
+			return view;
+		},
+		get hiddenColumns() {
+			return hiddenColumns;
+		},
+		dnd,
+		rail,
+		sortedByColumn,
+		idAt,
+		expand,
+		collapse,
+		toggleColumn,
+		onCardKeyDown,
+		contextOf
+	};
+}

package/src/work/kanban-rail-state.svelte.js

@@ -0,0 +1,85 @@
+import { SvelteSet } from "svelte/reactivity";
+/** The rail of hidden columns: which are folded, the fold and unfold timing, and drops onto it. */
+export function createKanbanRailState(config) {
+	const { canDrop, dnd } = config;
+	let internalHidden = $state([]);
+	let hiddenIds = $derived(config.hidden() ?? internalHidden);
+	let hiddenSet = $derived(new Set(hiddenIds));
+	let railOpen = $state(true);
+	let dragOverHidden = $state(null);
+	const collapsing = new SvelteSet();
+	const expanding = new SvelteSet();
+	const leaving = new SvelteSet();
+	function setHidden(next) {
+		internalHidden = next;
+		config.onHiddenChange()?.(next);
+	}
+	// Fold: the column fades out first, then leaves the row and joins the rail.
+	function hide(columnId) {
+		if (hiddenSet.has(columnId) || collapsing.has(columnId)) return;
+		collapsing.add(columnId);
+		setTimeout(() => {
+			setHidden([...hiddenIds, columnId]);
+			collapsing.delete(columnId);
+		}, 300);
+	}
+	// Unfold: the rail entry leaves, then the column grows back in.
+	function show(columnId) {
+		leaving.add(columnId);
+		setTimeout(() => {
+			leaving.delete(columnId);
+			expanding.add(columnId);
+			setHidden(hiddenIds.filter((id) => id !== columnId));
+			setTimeout(() => expanding.delete(columnId), 350);
+		}, 200);
+	}
+	function showAll() {
+		for (const id of hiddenIds) leaving.add(id);
+		setTimeout(() => {
+			leaving.clear();
+			setHidden([]);
+		}, 200);
+	}
+	function onHiddenDragOver(e, columnId) {
+		if (!canDrop(columnId)) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		if (dragOverHidden !== columnId) dragOverHidden = columnId;
+		dnd.clearDragOver();
+	}
+	function onHiddenDragLeave(e) {
+		if (!e.currentTarget.contains(e.relatedTarget)) dragOverHidden = null;
+	}
+	// A card dropped on a folded column brings the column back and lands in it.
+	function onHiddenDrop(e, columnId) {
+		dragOverHidden = null;
+		dnd.onDrop(e, columnId);
+		show(columnId);
+	}
+	return {
+		get hiddenSet() {
+			return hiddenSet;
+		},
+		get railOpen() {
+			return railOpen;
+		},
+		set railOpen(value) {
+			railOpen = value;
+		},
+		get dragOverHidden() {
+			return dragOverHidden;
+		},
+		set dragOverHidden(value) {
+			dragOverHidden = value;
+		},
+		collapsing,
+		expanding,
+		leaving,
+		hide,
+		show,
+		showAll,
+		onHiddenDragOver,
+		onHiddenDragLeave,
+		onHiddenDrop
+	};
+}

package/src/work/use-kanban-dnd.svelte.js

@@ -0,0 +1,129 @@
+import { boardOrderAt } from "./board-order.js";
+/**
+* A board's drag state and handlers, on native HTML5 drag so a card can leave the board for
+* any drop target a caller wired up.
+*/
+export function createKanbanDnd(config) {
+	let draggedId = $state(null);
+	let dragOver = $state(null);
+	function readDraggedId(e) {
+		const raw = e.dataTransfer?.getData("text/plain");
+		if (!raw) return null;
+		try {
+			const parsed = JSON.parse(raw);
+			return parsed.id ?? null;
+		} catch {
+			return null;
+		}
+	}
+	function onDragStart(e, id) {
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", JSON.stringify({ id }));
+		}
+		// Defer: marking the source during the dragstart event makes some browsers
+		// snapshot the faded state instead of the card.
+		requestAnimationFrame(() => {
+			draggedId = id;
+		});
+	}
+	function onItemDragOver(e, columnId, overId, nextId) {
+		if (config.isDroppable && !config.isDroppable(columnId)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		const rect = e.currentTarget.getBoundingClientRect();
+		const insertAfter = e.clientY > rect.top + rect.height / 2;
+		const targetOverId = insertAfter ? nextId : overId;
+		if (targetOverId === draggedId) return;
+		if (dragOver?.columnId === columnId && dragOver.overId === targetOverId) return;
+		dragOver = {
+			columnId,
+			overId: targetOverId
+		};
+	}
+	function onColumnDragOver(e, columnId) {
+		if (config.isDroppable && !config.isDroppable(columnId)) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		if (dragOver?.columnId !== columnId || dragOver.overId !== null) {
+			dragOver = {
+				columnId,
+				overId: null
+			};
+		}
+	}
+	function onDragLeave(e) {
+		if (!e.currentTarget.contains(e.relatedTarget)) {
+			dragOver = null;
+		}
+	}
+	function clearDragOver() {
+		dragOver = null;
+	}
+	function resetDrag() {
+		draggedId = null;
+		dragOver = null;
+	}
+	/** Where a manual drop lands: on the hovered card, else the top or the end. */
+	function manualInsertIndex(column, overId, columnId) {
+		const overIndex = overId ? column.findIndex((item) => config.getId(item) === overId) : -1;
+		if (overIndex !== -1) return overIndex;
+		return config.dropAtTop?.(columnId) ? 0 : column.length;
+	}
+	function onDrop(e, targetColumnId) {
+		e.preventDefault();
+		if (config.isDroppable && !config.isDroppable(targetColumnId)) return;
+		const overId = dragOver?.overId ?? null;
+		dragOver = null;
+		draggedId = null;
+		const id = readDraggedId(e);
+		const item = id ? config.items().find((entry) => config.getId(entry) === id) : undefined;
+		if (!item) return;
+		const movedId = config.getId(item);
+		if (config.getSortKey() !== "manual") {
+			if (config.getColumn(item) !== targetColumnId) {
+				void config.onMove(movedId, { columnId: targetColumnId });
+			}
+			return;
+		}
+		const column = config.getColumnItems(targetColumnId).filter((entry) => config.getId(entry) !== movedId);
+		const index = manualInsertIndex(column, overId, targetColumnId);
+		const before = column[index - 1];
+		const after = column[index];
+		const orderOf = config.boardOrder;
+		void config.onMove(movedId, {
+			columnId: targetColumnId,
+			...orderOf ? { boardOrder: boardOrderAt(column, index, orderOf) } : {},
+			beforeId: before === undefined ? null : config.getId(before),
+			afterId: after === undefined ? null : config.getId(after)
+		});
+	}
+	return {
+		get draggedId() {
+			return draggedId;
+		},
+		get dragOver() {
+			return dragOver;
+		},
+		set dragOver(value) {
+			dragOver = value;
+		},
+		onDragStart,
+		onItemDragOver,
+		onColumnDragOver,
+		onDragLeave,
+		onDrop,
+		clearDragOver,
+		resetDrag,
+		isDragSource(id) {
+			return draggedId === id;
+		},
+		showIndicatorBefore(columnId, itemId) {
+			return dragOver?.columnId === columnId && dragOver.overId === itemId && draggedId !== null;
+		},
+		showIndicatorEnd(columnId) {
+			return dragOver?.columnId === columnId && dragOver.overId === null && draggedId !== null;
+		}
+	};
+}