@heyramzi/ui 2.11.0 → 2.11.2

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

@@ -3,219 +3,222 @@ 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";
+/* With several decks on a page, keys belong to the one the reader last touched. */
 const live = new Set();
 let active = null;
-const claimKeys = (deck)=>{
-    active = deck;
+const claimKeys = (deck) => {
+	active = deck;
 };
+/** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
+/** How long the overview morph flag stays up, a little past the longest stagger. */
 const MORPH_MS = 900;
-const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 function isEditable(el) {
-    return el.isContentEditable || [
-        "INPUT",
-        "TEXTAREA",
-        "SELECT"
-    ].includes(el.tagName);
+	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;
+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");
-    cursor = $state(0);
-    direction = $state(1);
-    morphing = $state(false);
-    size = $state({
-        w: 0,
-        h: 0
-    });
-    options;
-    #listeners = new Set();
-    #timer;
-    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]);
-    upcoming = $derived(this.visible.find((i)=>i > this.position.index) ?? null);
-    overview = $derived(this.view === "overview");
-    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));
-    boxOf(index) {
-        if (!this.overview) return this.fit;
-        return this.grid.boxes[this.visible.indexOf(index)];
-    }
-    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);
-    }
-    activate() {
-        claimKeys(this);
-    }
-    mount() {
-        live.add(this);
-        claimKeys(this);
-        return ()=>{
-            live.delete(this);
-            if (active === this) active = null;
-            clearTimeout(this.#timer);
-        };
-    }
-    get listening() {
-        if (this.options.keyboard === false) return false;
-        const eligible = [
-            ...live
-        ].filter((deck)=>deck.options.keyboard !== false);
-        return eligible.length <= 1 || active === this;
-    }
-    #write(position) {
-        this.options.index = position.index;
-        this.options.step = position.step;
-    }
-    commit(target, source = "local") {
-        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 (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);
-    }
-    toggleOverview(force) {
-        const open = force ?? !this.overview;
-        if (open === this.overview) return;
-        if (open) this.cursor = Math.max(0, this.visible.indexOf(this.position.index));
-        this.view = open ? "overview" : "slide";
-        this.#morph();
-    }
-    select(index) {
-        this.toggleOverview(false);
-        const keep = index === this.position.index;
-        this.go(index, keep ? this.position.step : 0);
-    }
-    #morph() {
-        this.morphing = true;
-        clearTimeout(this.#timer);
-        this.#timer = setTimeout(()=>this.morphing = false, MORPH_MS);
-    }
-    #moveCursor(to) {
-        this.cursor = clamp(to, 0, this.visible.length - 1);
-    }
-    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;
-        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;
-        }
-    }
+	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);
+	morphing = $state(false);
+	size = $state({
+		w: 0,
+		h: 0
+	});
+	options;
+	#listeners = new Set();
+	#timer;
+	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) {
+		if (!this.overview) return this.fit;
+		return this.grid.boxes[this.visible.indexOf(index)];
+	}
+	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);
+	}
+	/** Marks this deck as the one that owns the keys. Mounting does it too. */
+	activate() {
+		claimKeys(this);
+	}
+	mount() {
+		live.add(this);
+		claimKeys(this);
+		return () => {
+			live.delete(this);
+			if (active === this) active = null;
+			clearTimeout(this.#timer);
+		};
+	}
+	get listening() {
+		if (this.options.keyboard === false) return false;
+		const eligible = [...live].filter((deck) => deck.options.keyboard !== false);
+		return eligible.length <= 1 || active === this;
+	}
+	#write(position) {
+		this.options.index = position.index;
+		this.options.step = position.step;
+	}
+	commit(target, source = "local") {
+		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 (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);
+	}
+	toggleOverview(force) {
+		const open = force ?? !this.overview;
+		if (open === this.overview) return;
+		if (open) this.cursor = Math.max(0, this.visible.indexOf(this.position.index));
+		this.view = open ? "overview" : "slide";
+		this.#morph();
+	}
+	/** Leaves the overview on slide `index`. Picking the current slide keeps its step. */
+	select(index) {
+		this.toggleOverview(false);
+		const keep = index === this.position.index;
+		this.go(index, keep ? this.position.step : 0);
+	}
+	#morph() {
+		this.morphing = true;
+		clearTimeout(this.#timer);
+		this.#timer = setTimeout(() => this.morphing = false, MORPH_MS);
+	}
+	#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/dist/slides/export/capture.js

@@ -1,81 +1,76 @@
+// Capture a page, or one element of it, to PNG at a canvas size and device scale.
 import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
-export const DEFAULT_WAITS = [
-    "networkidle",
-    "load"
-];
+/**
+* `networkidle` never fires on a page that keeps polling, like a chat widget, so a retry
+* falls back to `load`, which always fires.
+*/
+export const DEFAULT_WAITS = ["networkidle", "load"];
+/** Navigates, retrying with the next wait condition when one times out. */
 export async function gotoSettled(page, url, options = {}) {
-    const waits = options.waits ?? DEFAULT_WAITS;
-    const timeout = options.timeout ?? 45_000;
-    let failure;
-    for (const waitUntil of waits){
-        try {
-            return await page.goto(url, {
-                waitUntil,
-                timeout
-            });
-        } catch (error) {
-            failure = error;
-        }
-    }
-    throw failure ?? new Error("gotoSettled needs at least one wait condition.");
+	const waits = options.waits ?? DEFAULT_WAITS;
+	const timeout = options.timeout ?? 45e3;
+	let failure;
+	for (const waitUntil of waits) {
+		try {
+			return await page.goto(url, {
+				waitUntil,
+				timeout
+			});
+		} catch (error) {
+			failure = error;
+		}
+	}
+	throw failure ?? new Error("gotoSettled needs at least one wait condition.");
 }
+/** Opens a page at the canvas size, captures it to PNG and closes the page. */
 export async function capturePage(browser, source, options) {
-    const page = await browser.newPage({
-        viewport: options.size,
-        deviceScaleFactor: options.scale ?? 1
-    });
-    try {
-        if ("url" in source) await gotoSettled(page, source.url, options.goto);
-        else await page.setContent(source.html, {
-            waitUntil: "load"
-        });
-        if (options.style) await page.addStyleTag({
-            content: options.style
-        });
-        if (options.wait) await page.waitForTimeout(options.wait);
-        const { selector } = options;
-        let bytes;
-        if (selector) {
-            const target = page.locator(selector).first();
-            await target.waitFor({
-                state: "visible"
-            });
-            bytes = await target.screenshot({
-                type: "png"
-            });
-        } else {
-            bytes = await page.screenshot({
-                type: "png",
-                fullPage: options.fullPage
-            });
-        }
-        if (options.path) {
-            await mkdir(path.dirname(options.path), {
-                recursive: true
-            });
-            await writeFile(options.path, bytes);
-        }
-        return bytes;
-    } finally{
-        await page.close();
-    }
+	const page = await browser.newPage({
+		viewport: options.size,
+		deviceScaleFactor: options.scale ?? 1
+	});
+	try {
+		if ("url" in source) await gotoSettled(page, source.url, options.goto);
+		else await page.setContent(source.html, { waitUntil: "load" });
+		if (options.style) await page.addStyleTag({ content: options.style });
+		if (options.wait) await page.waitForTimeout(options.wait);
+		const { selector } = options;
+		let bytes;
+		if (selector) {
+			const target = page.locator(selector).first();
+			await target.waitFor({ state: "visible" });
+			bytes = await target.screenshot({ type: "png" });
+		} else {
+			bytes = await page.screenshot({
+				type: "png",
+				fullPage: options.fullPage
+			});
+		}
+		if (options.path) {
+			await mkdir(path.dirname(options.path), { recursive: true });
+			await writeFile(options.path, bytes);
+		}
+		return bytes;
+	} finally {
+		await page.close();
+	}
 }
+/** `01.png`, `02.png` ...: the file name for the nth capture, one-based, zero-padded. */
 export function frameName(index, digits = 2, extension = "png") {
-    return `${String(index + 1).padStart(digits, "0")}.${extension}`;
+	return `${String(index + 1).padStart(digits, "0")}.${extension}`;
 }
+/**
+* Screenshots every element a locator matches into `dir`, one PNG each, and
+* returns the paths in order. The elements are the pages of a deck.
+*/
 export async function captureEach(elements, dir, options = {}) {
-    await mkdir(dir, {
-        recursive: true
-    });
-    const count = await elements.count();
-    const files = [];
-    for(let index = 0; index < count; index++){
-        const file = path.join(dir, frameName(index, options.digits));
-        await elements.nth(index).screenshot({
-            path: file
-        });
-        files.push(file);
-    }
-    return files;
+	await mkdir(dir, { recursive: true });
+	const count = await elements.count();
+	const files = [];
+	for (let index = 0; index < count; index++) {
+		const file = path.join(dir, frameName(index, options.digits));
+		await elements.nth(index).screenshot({ path: file });
+		files.push(file);
+	}
+	return files;
 }