@heyramzi/ui 3.7.0 → 3.7.1

package/src/components/docs/scroll-spy.svelte.js

@@ -0,0 +1,76 @@
+/** How far below the scroller's top edge a heading counts as "reached" and lands. */
+export const READ_LINE = 80;
+export class ScrollSpy {
+	active = $state("");
+	#scroller = null;
+	#items = [];
+	#locate;
+	#frame = 0;
+	/** Point the spy at a scroller and a list. Returns the cleanup. */
+	attach(scroller, items, locate) {
+		this.#scroller = scroller;
+		this.#items = items;
+		this.#locate = locate;
+		if (!scroller || items.length === 0) {
+			this.active = "";
+			return () => {};
+		}
+		const schedule = () => {
+			this.#frame ||= requestAnimationFrame(() => {
+				this.#frame = 0;
+				this.update();
+			});
+		};
+		scroller.addEventListener("scroll", schedule, { passive: true });
+		const observer = new ResizeObserver(schedule);
+		observer.observe(scroller);
+		// A document that grows after load (a diagram, a chart) moves every
+		// heading below it, so watch the content too.
+		for (const child of scroller.children) observer.observe(child);
+		this.update();
+		return () => {
+			scroller.removeEventListener("scroll", schedule);
+			observer.disconnect();
+			if (this.#frame) cancelAnimationFrame(this.#frame);
+			this.#frame = 0;
+		};
+	}
+	topOf(id) {
+		const scroller = this.#scroller;
+		if (!scroller) return null;
+		if (this.#locate) return this.#locate(id);
+		const el = scroller.querySelector(`#${CSS.escape(id)}`);
+		if (!el) return null;
+		return el.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+	}
+	update() {
+		const scroller = this.#scroller;
+		if (!scroller || this.#items.length === 0) return;
+		// At the very bottom the last heading wins, or a short final section could
+		// never be the current one.
+		const atEnd = scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2;
+		if (atEnd && scroller.scrollTop > 0) {
+			this.active = this.#items[this.#items.length - 1].id;
+			return;
+		}
+		const line = scroller.scrollTop + READ_LINE + 1;
+		let current = this.#items[0].id;
+		for (const item of this.#items) {
+			const top = this.topOf(item.id);
+			if (top !== null && top <= line) current = item.id;
+		}
+		this.active = current;
+	}
+	/** Scroll so the heading lands on the read line, instant under reduced motion. */
+	jump(id) {
+		const scroller = this.#scroller;
+		const top = this.topOf(id);
+		if (!scroller || top === null) return;
+		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		this.active = id;
+		scroller.scrollTo({
+			top: Math.max(0, top - READ_LINE),
+			behavior: reduced ? "auto" : "smooth"
+		});
+	}
+}

package/src/consumer-prebundle.test.ts

@@ -0,0 +1,126 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readdirSync,
+  readFileSync,
+  realpathSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { afterAll, describe, expect, it } from "vite-plus/test";
+import { writeSvelteModules } from "../scripts/lib/svelte-modules.mjs";
+
+// A consumer's dev server prebundles this package, types still in each `.svelte.ts`. 3.6.0's
+// reveal.svelte.ts killed Locameublé's dev server at startup on `import type`.
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as {
+  scripts: Record<string, string>;
+  exports: Record<string, string | string[] | Record<string, string | string[]>>;
+};
+
+/** The Vite core a consumer gets beside vite-plugin-svelte; this package only depends on vite-plus. */
+type Vite = {
+  resolveConfig(config: object, command: "serve", mode: string): Promise<unknown>;
+  optimizeDeps(
+    config: unknown,
+    force: boolean,
+  ): Promise<{ optimized: Record<string, { file: string }> }>;
+};
+const plugin = createRequire(import.meta.url).resolve("@sveltejs/vite-plugin-svelte");
+const vite: Vite = await import(pathToFileURL(createRequire(plugin).resolve("vite")).href);
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const e of readdirSync(dir, { withFileTypes: true })) {
+    const p = join(dir, e.name);
+    if (e.isDirectory()) walk(p, out);
+    else out.push(p);
+  }
+  return out;
+}
+
+/** The tarball's shape: `files` as prepack leaves them, under a consumer's node_modules. */
+async function consumer(): Promise<{ dir: string; ui: string }> {
+  const dir = mkdtempSync(join(tmpdir(), "ui-consumer-"));
+  const nm = join(dir, "node_modules");
+  const ui = join(nm, "@heyramzi/ui");
+  mkdirSync(ui, { recursive: true });
+  cpSync(join(root, "src"), join(ui, "src"), { recursive: true });
+  cpSync(join(root, "package.json"), join(ui, "package.json"));
+  await writeSvelteModules(join(ui, "src"));
+  for (const name of readdirSync(join(root, "node_modules"))) {
+    const from = join(root, "node_modules", name);
+    const scoped = name.startsWith("@") ? readdirSync(from).map((s) => join(name, s)) : [name];
+    if (name.startsWith("@")) mkdirSync(join(nm, name));
+    for (const dep of scoped)
+      symlinkSync(realpathSync(join(root, "node_modules", dep)), join(nm, dep));
+  }
+  writeFileSync(join(dir, "package.json"), JSON.stringify({ name: "consumer", type: "module" }));
+  return { dir, ui };
+}
+
+/** Every subpath a Svelte app can import, wildcards expanded against the tarball's files. */
+function browserEntries(ui: string): string[] {
+  const out = new Set<string>();
+  for (const [key, value] of Object.entries(pkg.exports)) {
+    if (typeof value !== "object" || Array.isArray(value)) continue;
+    const target = value.svelte;
+    if (typeof target !== "string") continue;
+    if (!key.includes("*")) {
+      out.add(`@heyramzi/ui${key.slice(1)}`);
+      continue;
+    }
+    const [head, tail] = target.split("*");
+    for (const file of walk(join(ui, head))) {
+      const rel = relative(join(ui, head), file);
+      if (!rel.endsWith(tail) || /\.(test|spec)\./.test(rel)) continue;
+      out.add(`@heyramzi/ui${key.slice(1).replace("*", rel.slice(0, -tail.length))}`);
+    }
+  }
+  return [...out].toSorted();
+}
+
+const made: string[] = [];
+afterAll(() => {
+  for (const dir of made) rmSync(dir, { recursive: true, force: true });
+});
+
+describe("a consumer's dev server", () => {
+  it("writes the type-free modules on every pack and removes them after", () => {
+    expect(pkg.scripts.prepack).toContain("node scripts/svelte-modules.mjs");
+    expect(pkg.scripts.postpack).toContain("node scripts/svelte-modules.mjs --clean");
+  });
+
+  it("prebundles every Svelte subpath, chat windows included", async () => {
+    const { dir, ui } = await consumer();
+    made.push(dir);
+    const include = browserEntries(ui);
+    expect(include).toContain("@heyramzi/ui/ai/chat-window");
+    expect(include).toContain("@heyramzi/ui/shadcn/hooks/use-highlighted-code.svelte");
+    expect(include).toContain("@heyramzi/ui/canvas/editor/dispatch.svelte.js");
+
+    const config = await vite.resolveConfig(
+      {
+        root: dir,
+        configFile: false,
+        logLevel: "error",
+        plugins: [svelte({ configFile: false })],
+        optimizeDeps: { include, noDiscovery: true },
+      },
+      "serve",
+      "development",
+    );
+    const { optimized } = await vite.optimizeDeps(config, true);
+    const chat = optimized["@heyramzi/ui/ai/chat-window"];
+    expect(chat && existsSync(chat.file)).toBe(true);
+    expect(readFileSync(chat.file, "utf8")).toContain("REVEAL_BEATS");
+  }, 120_000);
+});

package/src/effects/animated-beam/path-calculator.svelte.js

@@ -0,0 +1,54 @@
+function anchorX(rect, containerLeft, anchor, offset) {
+	const left = rect.left - containerLeft;
+	if (anchor === "left") return left + offset;
+	if (anchor === "right") return left + rect.width + offset;
+	return left + rect.width / 2 + offset;
+}
+export function usePathCalculator() {
+	let pathD = $state("");
+	let svgDimensions = $state({
+		width: 0,
+		height: 0
+	});
+	function calculatePath(containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset, fromAnchor = "center", toAnchor = "center") {
+		if (!containerRef || !fromRef || !toRef) return;
+		const containerRect = containerRef.getBoundingClientRect();
+		const rectA = fromRef.getBoundingClientRect();
+		const rectB = toRef.getBoundingClientRect();
+		// A scaled ancestor shrinks every rect, but the SVG draws in the container's own pixels.
+		// Divide the scale out, or the beams stop short of their nodes.
+		const scaleX = containerRef.offsetWidth ? containerRect.width / containerRef.offsetWidth : 1;
+		const scaleY = containerRef.offsetHeight ? containerRect.height / containerRef.offsetHeight : 1;
+		const local = (rect) => new DOMRect((rect.left - containerRect.left) / scaleX, (rect.top - containerRect.top) / scaleY, rect.width / scaleX, rect.height / scaleY);
+		const a = local(rectA);
+		const b = local(rectB);
+		svgDimensions = {
+			width: containerRect.width / scaleX,
+			height: containerRect.height / scaleY
+		};
+		const startX = anchorX(a, 0, fromAnchor, startXOffset);
+		const startY = a.top + a.height / 2 + startYOffset;
+		const endX = anchorX(b, 0, toAnchor, endXOffset);
+		const endY = b.top + b.height / 2 + endYOffset;
+		// A cubic with horizontal handles, not a quadratic through a raised midpoint.
+		// The quadratic put its single control point at `midY` minus `curvature`, which for a fan into one node lands past the far end:
+		// the top beam dove below the hub and crossed the middle beam before arriving, and three beams bundled into a lens for the last stretch.
+		// Handles along the axis of travel make each beam leave and arrive perpendicular to its anchor, so a fan converges at the anchor and nowhere else.
+		// `curvature` still bows the middle, and zero still draws a straight line between two anchors at the same height.
+		const span = Math.abs(endX - startX);
+		const handle = Math.max(span * .5, 24);
+		const direction = endX >= startX ? 1 : -1;
+		const c1x = startX + handle * direction;
+		const c2x = endX - handle * direction;
+		pathD = `M ${startX},${startY} C ${c1x},${startY - curvature} ${c2x},${endY - curvature} ${endX},${endY}`;
+	}
+	return {
+		get pathD() {
+			return pathD;
+		},
+		get svgDimensions() {
+			return svgDimensions;
+		},
+		calculatePath
+	};
+}

package/src/onboarding/onboarding.svelte.js

@@ -0,0 +1,19 @@
+class Onboarding {
+	/** True when the current page has a tour, so a menu item can hide itself. */
+	hasTour = $state(false);
+	/** True while a tour is on screen. */
+	running = $state(false);
+	#replay = null;
+	/** The provider registers itself here. Returns the undo for cleanup. */
+	bind(replay) {
+		this.#replay = replay;
+		return () => {
+			if (this.#replay === replay) this.#replay = null;
+		};
+	}
+	/** Restarts this page's tour, or the one named. Writes no seen-state. False when nothing started. */
+	replay(tourId) {
+		return this.#replay ? this.#replay(tourId) : Promise.resolve(false);
+	}
+}
+export const onboarding = new Onboarding();

package/src/shadcn/hooks/is-mobile.svelte.js

@@ -0,0 +1,7 @@
+import { MediaQuery } from "svelte/reactivity";
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+export class IsMobile extends MediaQuery {
+	constructor(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+		super(`max-width: ${breakpoint - 1}px`);
+	}
+}

package/src/shadcn/hooks/use-highlighted-code.svelte.js

@@ -0,0 +1,65 @@
+import { loadHighlighter } from "./highlighter.js";
+/**
+* Highlights `code`. Each `current` entry is a plain string until the highlighter loads, then
+* tokens, so pass it to `CodeBlock.Line`'s `code` prop either way.
+*/
+export function useHighlightedCode(value, language) {
+	let loaded = $state.raw(null);
+	$effect(() => {
+		const lang = language();
+		let cancelled = false;
+		loadHighlighter(lang).then((next) => {
+			if (!cancelled) {
+				loaded = {
+					language: lang,
+					highlighter: next
+				};
+			}
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	});
+	// The complete lines, highlighted. While the code streams, only the new
+	// lines are tokenized, starting from the grammar state of the last one.
+	let done = {
+		highlighter: null,
+		text: "",
+		lines: []
+	};
+	const lines = $derived.by(() => {
+		const raw = value();
+		// A trailing newline would render as an extra empty line.
+		const code = raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+		const lang = language();
+		const highlighter = loaded?.language === lang ? loaded.highlighter : null;
+		if (!highlighter) {
+			return code.split("\n");
+		}
+		let next = done;
+		if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+			next = {
+				highlighter,
+				text: "",
+				lines: []
+			};
+		}
+		const end = code.lastIndexOf("\n") + 1;
+		if (end > next.text.length) {
+			const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+			next = {
+				highlighter,
+				text: code.slice(0, end),
+				lines: [...next.lines, ...result.lines],
+				state: result.state
+			};
+		}
+		done = next;
+		// The last line is still being written, so it is tokenized every time.
+		const tail = code.slice(end);
+		return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+	});
+	return { get current() {
+		return lines;
+	} };
+}

package/src/shadcn/sidebar/context.svelte.js

@@ -0,0 +1,63 @@
+import { IsMobile } from "../hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+// Cmd+B in a field means bold, so the shortcut leaves typing alone.
+function isEditable(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	return target.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") !== null;
+}
+class SidebarState {
+	props;
+	open = $derived.by(() => this.props.open());
+	openMobile = $state(false);
+	setOpen;
+	#isMobile;
+	state = $derived.by(() => this.open ? "expanded" : "collapsed");
+	id;
+	constructor(props) {
+		this.setOpen = props.setOpen;
+		this.id = props.id;
+		this.#isMobile = new IsMobile();
+		this.props = props;
+	}
+	// Convenience getter for checking if the sidebar is mobile
+	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	get isMobile() {
+		return this.#isMobile.current;
+	}
+	/** Whether the sidebar a trigger controls is showing: the sheet on a phone, the panel otherwise. */
+	get expanded() {
+		return this.#isMobile.current ? this.openMobile : this.open;
+	}
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e) => {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey) && !isEditable(e.target)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+	setOpenMobile = (value) => {
+		this.openMobile = value;
+	};
+	toggle = () => {
+		return this.#isMobile.current ? this.openMobile = !this.openMobile : this.setOpen(!this.open);
+	};
+}
+const SYMBOL_KEY = "scn-sidebar";
+/**
+* Instantiates a new `SidebarState` instance and sets it in the context.
+*
+* @param props The constructor props for the `SidebarState` class.
+* @returns  The `SidebarState` instance.
+*/
+export function setSidebar(props) {
+	return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+/**
+* Retrieves the `SidebarState` instance from the context. This is a class instance,
+* so you cannot destructure it.
+* @returns The `SidebarState` instance.
+*/
+export function useSidebar() {
+	return getContext(Symbol.for(SYMBOL_KEY));
+}

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