@heyramzi/ui 2.8.0 → 2.10.0

package/dist/slides/bridges.js

@@ -0,0 +1,66 @@
+import { parseSlideParam } from "./navigation.js";
+export function attachUrlSync(deck, { param = "s", write } = {}) {
+    const initial = parseSlideParam(new URL(location.href).searchParams.get(param), deck.entries.length);
+    if (initial !== null) deck.go(initial, 0, "remote");
+    return deck.listen(({ index })=>{
+        const url = new URL(location.href);
+        url.searchParams.set(param, String(index + 1));
+        if (write) write(url);
+        else history.replaceState(history.state, "", url);
+    });
+}
+export function attachBridge(deck, { origin = location.origin } = {}) {
+    const onMessage = (event)=>{
+        if (origin !== "*" && event.origin !== origin) return;
+        const data = event.data;
+        if (data?.type === "deck:nav") {
+            if (data.delta === -1) deck.prev();
+            else if (data.delta === 1) deck.next();
+        } else if (data?.type === "deck:go" && Number.isInteger(data.index)) {
+            deck.go(data.index, Number.isInteger(data.step) ? data.step : 0, "remote");
+        }
+    };
+    window.addEventListener("message", onMessage);
+    const stop = deck.listen(({ index, step }, source)=>{
+        if (source === "local" && window.parent !== window) {
+            window.parent.postMessage({
+                type: "deck:change",
+                index,
+                step,
+                total: deck.visible.length
+            }, origin);
+        }
+    });
+    return ()=>{
+        window.removeEventListener("message", onMessage);
+        stop();
+    };
+}
+export function attachChannel(deck, name) {
+    if (typeof BroadcastChannel === "undefined") return ()=>{};
+    const channel = new BroadcastChannel(`heyramzi-slides:${name}`);
+    const self = crypto.randomUUID();
+    const send = (message)=>channel.postMessage(message);
+    const state = ({ index, step } = deck.position)=>({
+            type: "state",
+            from: self,
+            index,
+            step
+        });
+    channel.onmessage = ({ data })=>{
+        if (data.from === self) return;
+        if (data.type === "hello") send(state());
+        else deck.go(data.index, data.step, "remote");
+    };
+    const stop = deck.listen((position, source)=>{
+        if (source === "local") send(state(position));
+    });
+    send({
+        type: "hello",
+        from: self
+    });
+    return ()=>{
+        stop();
+        channel.close();
+    };
+}

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

@@ -0,0 +1,221 @@
+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";
+const live = new Set();
+let active = null;
+const claimKeys = (deck)=>{
+    active = deck;
+};
+const CONTROLS_ROOM = 56;
+const MORPH_MS = 900;
+const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
+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");
+    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;
+        }
+    }
+}

package/dist/slides/export/capture.js

@@ -0,0 +1,81 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+export const DEFAULT_WAITS = [
+    "networkidle",
+    "load"
+];
+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.");
+}
+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();
+    }
+}
+export function frameName(index, digits = 2, extension = "png") {
+    return `${String(index + 1).padStart(digits, "0")}.${extension}`;
+}
+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;
+}

package/dist/slides/export/ffmpeg.js

@@ -0,0 +1,85 @@
+import { spawn } from "node:child_process";
+import { mkdir, rm } from "node:fs/promises";
+import path from "node:path";
+export function runFfmpeg(args, ffmpeg = "ffmpeg") {
+    return new Promise((resolve, reject)=>{
+        const child = spawn(ffmpeg, args, {
+            stdio: [
+                "ignore",
+                "ignore",
+                "pipe"
+            ]
+        });
+        let stderr = "";
+        child.stderr.on("data", (chunk)=>{
+            stderr += chunk;
+        });
+        child.on("error", (error)=>reject(new Error(`${ffmpeg} could not be started (${error.message}). Video export needs ffmpeg on PATH, or pass its path.`)));
+        child.on("close", (code)=>code === 0 ? resolve() : reject(new Error(`${ffmpeg} exited ${code}:\n${stderr.slice(-1500)}`)));
+    });
+}
+export function encodeArgs(dir, outFile, options) {
+    return [
+        "-y",
+        "-hide_banner",
+        "-loglevel",
+        "error",
+        "-framerate",
+        String(options.fps),
+        "-i",
+        path.join(dir, options.pattern ?? "%04d.png"),
+        "-an",
+        "-vf",
+        "format=yuv420p",
+        "-c:v",
+        "libx264",
+        "-preset",
+        options.preset ?? "slow",
+        "-crf",
+        String(options.crf ?? 23),
+        "-movflags",
+        "+faststart",
+        outFile
+    ];
+}
+export async function encodeFrames(dir, outFile, options) {
+    await mkdir(path.dirname(outFile), {
+        recursive: true
+    });
+    await runFfmpeg(encodeArgs(dir, outFile, options), options.ffmpeg);
+}
+export function loopFrameCount(seconds, fps) {
+    return Math.max(1, Math.round(seconds * fps));
+}
+export async function renderLoop(outFile, options) {
+    const fps = options.fps ?? 30;
+    const seconds = options.seconds ?? 2.5;
+    const frames = loopFrameCount(seconds, fps);
+    const work = `${outFile}.frames`;
+    await mkdir(work, {
+        recursive: true
+    });
+    try {
+        for(let index = 0; index < frames; index++){
+            await options.drawFrame({
+                index,
+                t: index / frames,
+                file: path.join(work, `${String(index).padStart(4, "0")}.png`)
+            });
+        }
+        await encodeFrames(work, outFile, {
+            ...options,
+            fps
+        });
+    } finally{
+        await rm(work, {
+            recursive: true,
+            force: true
+        });
+    }
+    return {
+        file: outFile,
+        frames,
+        seconds
+    };
+}

package/dist/slides/export/index.js

@@ -0,0 +1,4 @@
+export * from "./capture.js";
+export * from "./ffmpeg.js";
+export * from "./launch.js";
+export * from "./pdf.js";

package/dist/slides/export/launch.js

@@ -0,0 +1,8 @@
+export async function launchChromium(chromium) {
+    return chromium.launch({
+        headless: true
+    }).catch(()=>chromium.launch({
+            headless: true,
+            channel: "chrome"
+        }));
+}

package/dist/slides/export/pdf.js

@@ -0,0 +1,78 @@
+import { readFile } from "node:fs/promises";
+export const RESET_CSS = `*{margin:0;padding:0;box-sizing:border-box;}
+html{-webkit-print-color-adjust:exact;print-color-adjust:exact;}`;
+export function pageRule(size) {
+    return `@page{size:${size.width}px ${size.height}px;margin:0;}`;
+}
+export function imagePagesCss(size, background) {
+    return `${RESET_CSS}
+${background ? `body{background:${background};}\n` : ""}${pageRule(size)}
+.page{display:block;width:${size.width}px;height:${size.height}px;break-after:page;}
+.page:last-child{break-after:auto;}`;
+}
+export function imagePagesHtml(dataUrls, size, background) {
+    const pages = dataUrls.map((dataUrl)=>`<img class="page" src="${dataUrl}" alt="">`).join("");
+    return `<!doctype html><html><head><meta charset="utf-8"><style>
+${imagePagesCss(size, background)}
+</style></head><body>${pages}</body></html>`;
+}
+export function countPdfPages(pdf) {
+    return (Buffer.from(pdf).toString("latin1").match(/\/Type\s*\/Page[^s]/g) ?? []).length;
+}
+export async function printPage(page, options = {}) {
+    const { ready } = options;
+    if (typeof ready === "string") {
+        await page.waitForSelector(ready, {
+            timeout: options.readyTimeout ?? 60_000
+        });
+    } else if (ready) {
+        await ready(page);
+    }
+    await page.evaluate(()=>document.fonts.ready.then(()=>undefined));
+    if (options.settle) await page.waitForTimeout(options.settle);
+    const brokenImages = await page.evaluate(()=>[
+            ...document.images
+        ].filter((img)=>!img.complete || img.naturalWidth === 0).map((img)=>img.src));
+    const { size } = options;
+    const pdf = await page.pdf({
+        path: options.path,
+        printBackground: true,
+        ...size ? {
+            width: `${size.width}px`,
+            height: `${size.height}px`
+        } : {
+            preferCSSPageSize: true
+        },
+        pageRanges: options.pageRanges
+    });
+    return {
+        pdf,
+        pages: countPdfPages(pdf),
+        brokenImages
+    };
+}
+export async function printUrl(page, url, options = {}) {
+    const response = await page.goto(url, {
+        waitUntil: options.waitUntil ?? "load"
+    });
+    options.check?.(response, page);
+    return printPage(page, options);
+}
+export async function printHtml(page, html, options = {}) {
+    await page.setContent(html, {
+        waitUntil: options.waitUntil ?? "load"
+    });
+    return printPage(page, options);
+}
+export async function imagesToPdf(page, images, options) {
+    if (images.length === 0) throw new Error("imagesToPdf needs at least one image.");
+    const dataUrls = await Promise.all(images.map(async (image)=>{
+        const bytes = typeof image === "string" ? await readFile(image) : image;
+        return `data:image/png;base64,${Buffer.from(bytes).toString("base64")}`;
+    }));
+    const { pdf } = await printHtml(page, imagePagesHtml(dataUrls, options.size, options.background), {
+        size: options.size,
+        pageRanges: `1-${images.length}`
+    });
+    return pdf;
+}

package/dist/slides/index.js

@@ -0,0 +1,7 @@
+export { default as Deck } from "../../src/slides/Deck.svelte";
+export { default as Slide } from "../../src/slides/Slide.svelte";
+export { default as Fragment } from "../../src/slides/Fragment.svelte";
+export { default as Presenter } from "../../src/slides/Presenter.svelte";
+export { DeckController } from "./deck-controller.svelte.js";
+export { defaultLabels } from "./labels.js";
+export { DEFAULT_CANVAS } from "./types.js";

package/dist/slides/labels.js

@@ -0,0 +1,26 @@
+export const defaultLabels = {
+    deck: "Slide deck",
+    deckRole: "presentation",
+    slideRole: "slide",
+    previous: "Previous slide",
+    next: "Next slide",
+    fullscreen: "Toggle fullscreen",
+    overview: "Slide overview",
+    presenter: "Open presenter view",
+    progress: "Deck progress",
+    slide: (n, of)=>`Slide ${n} of ${of}`,
+    upcoming: "Next",
+    current: "Now",
+    notes: "Notes",
+    noNotes: "No notes for this slide.",
+    endOfDeck: "End of deck.",
+    timer: "Elapsed time",
+    startTimer: "Start timer",
+    pauseTimer: "Pause timer",
+    resetTimer: "Reset timer",
+    unknownType: (type)=>`Unknown slide type: ${type}`
+};
+export const resolveLabels = (labels)=>({
+        ...defaultLabels,
+        ...labels
+    });

package/dist/slides/layout.js

@@ -0,0 +1,47 @@
+export function fitBox(view, canvas) {
+    const scale = Math.max(0, Math.min(view.w / canvas.w, view.h / canvas.h));
+    return {
+        x: (view.w - canvas.w * scale) / 2,
+        y: (view.h - canvas.h * scale) / 2,
+        scale
+    };
+}
+function scaleFor(cols, count, view, canvas, pad, gap) {
+    const rows = Math.ceil(count / cols);
+    const byWidth = (view.w - 2 * pad - (cols - 1) * gap) / cols / canvas.w;
+    const byHeight = (view.h - 2 * pad - (rows - 1) * gap) / rows / canvas.h;
+    return Math.min(byWidth, byHeight);
+}
+export function gridBoxes(view, canvas, count) {
+    if (count === 0 || view.w <= 0 || view.h <= 0) return {
+        cols: 1,
+        boxes: []
+    };
+    const pad = Math.min(56, Math.max(16, view.w * 0.04));
+    const gap = Math.max(26, pad * 0.6);
+    let cols = 1;
+    let scale = scaleFor(1, count, view, canvas, pad, gap);
+    for(let c = 2; c <= count; c++){
+        const candidate = scaleFor(c, count, view, canvas, pad, gap);
+        if (candidate > scale) [cols, scale] = [
+            c,
+            candidate
+        ];
+    }
+    const cellW = canvas.w * scale;
+    const cellH = canvas.h * scale;
+    const rows = Math.ceil(count / cols);
+    const left = (view.w - (cols * cellW + (cols - 1) * gap)) / 2;
+    const top = (view.h - (rows * cellH + (rows - 1) * gap)) / 2;
+    const boxes = Array.from({
+        length: count
+    }, (_, i)=>({
+            x: left + i % cols * (cellW + gap),
+            y: top + Math.floor(i / cols) * (cellH + gap),
+            scale
+        }));
+    return {
+        cols,
+        boxes
+    };
+}

package/dist/slides/model.js

@@ -0,0 +1,9 @@
+export const defineSlideType = (definition)=>definition;
+export function defineRegistry(types) {
+    const registry = {};
+    for (const slide of types){
+        if (slide.type in registry) throw new Error(`Slide type "${slide.type}" is registered twice.`);
+        registry[slide.type] = slide;
+    }
+    return registry;
+}