folioscope 0.0.2 → 0.0.3

package/dist/index.mjs

@@ -1,613 +1,4 @@
-//#region src/controls.ts
-const CONTROLS_STYLE = `
-.controls { display: flex; gap: 4px; align-items: center; padding: 4px; font: 13px/1.2 system-ui, sans-serif; background: var(--folioscope-controls-background, #1e1e1e); color: var(--folioscope-controls-color, #eee); }
-.controls[hidden] { display: none; }
-.controls button, .controls select { font: inherit; color: inherit; background: transparent; border: 1px solid #555; border-radius: 4px; padding: 2px 8px; min-height: 28px; cursor: pointer; }
-.controls button:disabled { opacity: .4; cursor: default; }
-.controls select[hidden] { display: none; }
-.controls .spacer { flex: 1; }
-`;
-/** The control bar: restart, back, page and flow pickers, fullscreen. */
-var Controls = class {
-	element;
-	backButton;
-	pages;
-	flows;
-	constructor(actions) {
-		const el = document.createElement("div");
-		el.className = "controls";
-		el.setAttribute("part", "controls");
-		el.setAttribute("role", "toolbar");
-		el.setAttribute("aria-label", "Prototype controls");
-		el.hidden = true;
-		const button = (label, text, action) => {
-			const b = document.createElement("button");
-			b.type = "button";
-			b.textContent = text;
-			b.title = label;
-			b.setAttribute("aria-label", label);
-			b.addEventListener("click", action);
-			return b;
-		};
-		const select = (label, onChange) => {
-			const s = document.createElement("select");
-			s.setAttribute("aria-label", label);
-			s.addEventListener("change", () => onChange(s.selectedIndex));
-			return s;
-		};
-		this.backButton = button("Back", "←", () => actions.back());
-		this.pages = select("Page", (i) => actions.page(i));
-		this.flows = select("Flow", (i) => actions.flow(i));
-		const spacer = document.createElement("span");
-		spacer.className = "spacer";
-		el.append(button("Restart", "⟲", () => actions.restart()), this.backButton, this.pages, this.flows, spacer, button("Fullscreen", "⛶", () => actions.fullscreen()));
-		this.element = el;
-	}
-	/** Fills the pickers for a newly loaded document and its current page. */
-	load(index, page, flow) {
-		const playable = index.pages.filter((p) => p.frames.length > 0);
-		fill(this.pages, playable.map((p) => p.name), playable.indexOf(page));
-		fill(this.flows, page.flows.map((f) => f.name || "Flow"), flow);
-	}
-	update(canGoBack) {
-		this.backButton.disabled = !canGoBack;
-	}
-};
-/** Options of a picker, hidden when there is nothing to choose. */
-function fill(select, names, selected) {
-	select.replaceChildren(...names.map((name) => {
-		const option = document.createElement("option");
-		option.textContent = name;
-		return option;
-	}));
-	select.selectedIndex = Math.max(0, selected);
-	select.hidden = names.length < 2;
-}
-//#endregion
-//#region ../../node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js
-/**
-* Decodes a ThumbHash to an RGBA image. RGB is not be premultiplied by A.
-*
-* @param hash The bytes of the ThumbHash.
-* @returns The width, height, and pixels of the rendered placeholder image.
-*/
-function thumbHashToRGBA(hash) {
-	let { PI, min, max, cos, round } = Math;
-	let header24 = hash[0] | hash[1] << 8 | hash[2] << 16;
-	let header16 = hash[3] | hash[4] << 8;
-	let l_dc = (header24 & 63) / 63;
-	let p_dc = (header24 >> 6 & 63) / 31.5 - 1;
-	let q_dc = (header24 >> 12 & 63) / 31.5 - 1;
-	let l_scale = (header24 >> 18 & 31) / 31;
-	let hasAlpha = header24 >> 23;
-	let p_scale = (header16 >> 3 & 63) / 63;
-	let q_scale = (header16 >> 9 & 63) / 63;
-	let isLandscape = header16 >> 15;
-	let lx = max(3, isLandscape ? hasAlpha ? 5 : 7 : header16 & 7);
-	let ly = max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7);
-	let a_dc = hasAlpha ? (hash[5] & 15) / 15 : 1;
-	let a_scale = (hash[5] >> 4) / 15;
-	let ac_start = hasAlpha ? 6 : 5;
-	let ac_index = 0;
-	let decodeChannel = (nx, ny, scale) => {
-		let ac = [];
-		for (let cy = 0; cy < ny; cy++) for (let cx = cy ? 0 : 1; cx * ny < nx * (ny - cy); cx++) ac.push(((hash[ac_start + (ac_index >> 1)] >> ((ac_index++ & 1) << 2) & 15) / 7.5 - 1) * scale);
-		return ac;
-	};
-	let l_ac = decodeChannel(lx, ly, l_scale);
-	let p_ac = decodeChannel(3, 3, p_scale * 1.25);
-	let q_ac = decodeChannel(3, 3, q_scale * 1.25);
-	let a_ac = hasAlpha && decodeChannel(5, 5, a_scale);
-	let ratio = thumbHashToApproximateAspectRatio(hash);
-	let w = round(ratio > 1 ? 32 : 32 * ratio);
-	let h = round(ratio > 1 ? 32 / ratio : 32);
-	let rgba = new Uint8Array(w * h * 4), fx = [], fy = [];
-	for (let y = 0, i = 0; y < h; y++) for (let x = 0; x < w; x++, i += 4) {
-		let l = l_dc, p = p_dc, q = q_dc, a = a_dc;
-		for (let cx = 0, n = max(lx, hasAlpha ? 5 : 3); cx < n; cx++) fx[cx] = cos(PI / w * (x + .5) * cx);
-		for (let cy = 0, n = max(ly, hasAlpha ? 5 : 3); cy < n; cy++) fy[cy] = cos(PI / h * (y + .5) * cy);
-		for (let cy = 0, j = 0; cy < ly; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx * ly < lx * (ly - cy); cx++, j++) l += l_ac[j] * fx[cx] * fy2;
-		for (let cy = 0, j = 0; cy < 3; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {
-			let f = fx[cx] * fy2;
-			p += p_ac[j] * f;
-			q += q_ac[j] * f;
-		}
-		if (hasAlpha) for (let cy = 0, j = 0; cy < 5; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 5 - cy; cx++, j++) a += a_ac[j] * fx[cx] * fy2;
-		let b = l - 2 / 3 * p;
-		let r = (3 * l - b + q) / 2;
-		let g = r - q;
-		rgba[i] = max(0, 255 * min(1, r));
-		rgba[i + 1] = max(0, 255 * min(1, g));
-		rgba[i + 2] = max(0, 255 * min(1, b));
-		rgba[i + 3] = max(0, 255 * min(1, a));
-	}
-	return {
-		w,
-		h,
-		rgba
-	};
-}
-/**
-* Extracts the approximate aspect ratio of the original image.
-*
-* @param hash The bytes of the ThumbHash.
-* @returns The approximate aspect ratio (i.e. width / height).
-*/
-function thumbHashToApproximateAspectRatio(hash) {
-	let header = hash[3];
-	let hasAlpha = hash[2] & 128;
-	let isLandscape = hash[4] & 128;
-	return (isLandscape ? hasAlpha ? 5 : 7 : header & 7) / (isLandscape ? header & 7 : hasAlpha ? 5 : 7);
-}
-/**
-* Encodes an RGBA image to a PNG data URL. RGB should not be premultiplied by
-* A. This is optimized for speed and simplicity and does not optimize for size
-* at all. This doesn't do any compression (all values are stored uncompressed).
-*
-* @param w The width of the input image. Must be ≤100px.
-* @param h The height of the input image. Must be ≤100px.
-* @param rgba The pixels in the input image, row-by-row. Must have w*h*4 elements.
-* @returns A data URL containing a PNG for the input image.
-*/
-function rgbaToDataURL(w, h, rgba) {
-	let row = w * 4 + 1;
-	let idat = 6 + h * (5 + row);
-	let bytes = [
-		137,
-		80,
-		78,
-		71,
-		13,
-		10,
-		26,
-		10,
-		0,
-		0,
-		0,
-		13,
-		73,
-		72,
-		68,
-		82,
-		0,
-		0,
-		w >> 8,
-		w & 255,
-		0,
-		0,
-		h >> 8,
-		h & 255,
-		8,
-		6,
-		0,
-		0,
-		0,
-		0,
-		0,
-		0,
-		0,
-		idat >>> 24,
-		idat >> 16 & 255,
-		idat >> 8 & 255,
-		idat & 255,
-		73,
-		68,
-		65,
-		84,
-		120,
-		1
-	];
-	let table = [
-		0,
-		498536548,
-		997073096,
-		651767980,
-		1994146192,
-		1802195444,
-		1303535960,
-		1342533948,
-		-306674912,
-		-267414716,
-		-690576408,
-		-882789492,
-		-1687895376,
-		-2032938284,
-		-1609899400,
-		-1111625188
-	];
-	let a = 1, b = 0;
-	for (let y = 0, i = 0, end = row - 1; y < h; y++, end += row - 1) {
-		bytes.push(y + 1 < h ? 0 : 1, row & 255, row >> 8, ~row & 255, row >> 8 ^ 255, 0);
-		for (b = (b + a) % 65521; i < end; i++) {
-			let u = rgba[i] & 255;
-			bytes.push(u);
-			a = (a + u) % 65521;
-			b = (b + a) % 65521;
-		}
-	}
-	bytes.push(b >> 8, b & 255, a >> 8, a & 255, 0, 0, 0, 0, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130);
-	for (let [start, end] of [[12, 29], [37, 41 + idat]]) {
-		let c = -1;
-		for (let i = start; i < end; i++) {
-			c ^= bytes[i];
-			c = c >>> 4 ^ table[c & 15];
-			c = c >>> 4 ^ table[c & 15];
-		}
-		c = ~c;
-		bytes[end++] = c >>> 24;
-		bytes[end++] = c >> 16 & 255;
-		bytes[end++] = c >> 8 & 255;
-		bytes[end++] = c & 255;
-	}
-	return "data:image/png;base64," + btoa(String.fromCharCode(...bytes));
-}
-/**
-* Decodes a ThumbHash to a PNG data URL. This is a convenience function that
-* just calls "thumbHashToRGBA" followed by "rgbaToDataURL".
-*
-* @param hash The bytes of the ThumbHash.
-* @returns A data URL containing a PNG for the rendered ThumbHash.
-*/
-function thumbHashToDataURL(hash) {
-	let image = thumbHashToRGBA(hash);
-	return rgbaToDataURL(image.w, image.h, image.rgba);
-}
-//#endregion
-//#region src/lite.ts
-/**
-* Builds a frame: its layers as images, its hotspots as transparent elements. Clickable hotspots
-* are focusable buttons; those that only react to the pointer are plain areas.
-*/
-function renderFrame(frame, layerUrl, on) {
-	const el = document.createElement("div");
-	el.className = "frame";
-	el.setAttribute("role", "group");
-	el.setAttribute("aria-label", frame.name);
-	el.tabIndex = -1;
-	let content;
-	for (const layer of frame.layers) {
-		const img = document.createElement("img");
-		img.src = layerUrl(layer);
-		img.alt = "";
-		img.draggable = false;
-		place(img, layer.bounds);
-		if (layer.scrolls && frame.scroll) {
-			const scroller = document.createElement("div");
-			scroller.className = "scroll";
-			const { direction } = frame.scroll;
-			scroller.style.overflowX = direction === "vertical" ? "hidden" : "auto";
-			scroller.style.overflowY = direction === "horizontal" ? "hidden" : "auto";
-			content = document.createElement("div");
-			content.className = "content";
-			content.style.width = `${frame.scroll.content.width}px`;
-			content.style.height = `${frame.scroll.content.height}px`;
-			content.append(img);
-			scroller.append(content);
-			el.append(scroller);
-		} else el.append(img);
-	}
-	for (const hotspot of frame.hotspots) {
-		const by = (type) => hotspot.interactions.filter((i) => i.trigger.type === type).map((i) => i.action);
-		const clicks = by("click");
-		const pointer = POINTER_TRIGGERS.some((type) => by(type).length > 0);
-		if (clicks.length === 0 && !pointer) continue;
-		const area = document.createElement(clicks.length > 0 ? "button" : "div");
-		area.className = "hotspot";
-		place(area, hotspot.bounds);
-		if (area instanceof HTMLButtonElement) {
-			area.type = "button";
-			area.setAttribute("aria-label", hotspot.name);
-			area.addEventListener("click", (event) => {
-				event.stopPropagation();
-				for (const action of clicks) on.action(action, hotspot.bounds);
-			});
-		}
-		if (pointer) {
-			const run = (actions) => {
-				for (const action of actions) on.action(action, hotspot.bounds);
-			};
-			area.addEventListener("pointerenter", (event) => {
-				run(by("mouseEnter"));
-				if (event.pointerType !== "touch") for (const action of by("hover")) on.hold(action, "hover", hotspot.bounds);
-			});
-			area.addEventListener("pointerleave", () => run(by("mouseLeave")));
-			area.addEventListener("pointerdown", () => {
-				run(by("mouseDown"));
-				for (const action of by("press")) on.hold(action, "press", hotspot.bounds);
-			});
-			area.addEventListener("pointerup", () => run(by("mouseUp")));
-		}
-		(hotspot.fixed ? el : content ?? el).append(area);
-	}
-	for (const area of el.querySelectorAll(":scope > .hotspot")) el.append(area);
-	return el;
-}
-const POINTER_TRIGGERS = [
-	"hover",
-	"press",
-	"mouseEnter",
-	"mouseLeave",
-	"mouseDown",
-	"mouseUp"
-];
-/**
-* Opens or closes an overlay layer (its `.backdrop` and `.sheet`) with the overlay's transition:
-* slides and moves bring the sheet in from that side of the screen, anything else fades it.
-*/
-async function playOverlay(layer, transition, closing) {
-	if (globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches || transition.durationMs === 0 || transition.kind.type === "instant") return;
-	const timing = {
-		duration: transition.durationMs,
-		easing: easing(transition),
-		fill: "both"
-	};
-	const kind = transition.kind;
-	const [hidden, shown] = kind.type === "slideIn" || kind.type === "moveIn" || kind.type === "push" ? [{ transform: offset(kind.from, 1) }, { transform: "none" }] : [{ opacity: 0 }, { opacity: 1 }];
-	const run = (el, from, to) => el?.animate(closing ? [to, from] : [from, to], timing).finished.catch(() => void 0);
-	await Promise.all([run(layer.querySelector(".sheet"), hidden, shown), run(layer.querySelector(".backdrop"), { opacity: 0 }, { opacity: 1 })]);
-}
-/** Scrolls the frame `el` to a "scroll to" action's target, smoothly unless it is instant. */
-function scrollFrame(el, action) {
-	const scroller = el.querySelector(".scroll");
-	if (!scroller || !action.target) return;
-	const instant = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches || action.transition.kind.type === "instant";
-	scroller.scrollTo({
-		left: action.target.x - (action.offset?.x ?? 0),
-		top: action.target.y - (action.offset?.y ?? 0),
-		behavior: instant ? "instant" : "smooth"
-	});
-}
-/** Resolves once every image of `el` is decoded, so a frame never shows half-loaded. */
-async function decoded(el) {
-	await Promise.all([...el.querySelectorAll("img")].map((img) => img.decode().catch(() => void 0)));
-}
-/** Plays `transition` from `outgoing` to `incoming`, both already in the stage. */
-async function play(outgoing, incoming, transition, reverse) {
-	const reduced = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-	if (!outgoing || !transition || reduced || transition.durationMs === 0 || transition.kind.type === "instant") return;
-	const timing = {
-		duration: transition.durationMs,
-		easing: easing(transition),
-		fill: "both"
-	};
-	const kind = transition.kind;
-	const animations = [];
-	const slide = (side, sign) => offset(side, sign);
-	switch (kind.type) {
-		case "slideIn":
-		case "moveIn":
-			if (reverse) {
-				outgoing.style.zIndex = "1";
-				animations.push(outgoing.animate([{ transform: "none" }, { transform: slide(kind.from, 1) }], timing));
-			} else animations.push(incoming.animate([{ transform: slide(kind.from, 1) }, { transform: "none" }], timing));
-			break;
-		case "push": {
-			const sign = reverse ? -1 : 1;
-			animations.push(incoming.animate([{ transform: slide(kind.from, sign) }, { transform: "none" }], timing), outgoing.animate([{ transform: "none" }, { transform: slide(kind.from, -sign) }], timing));
-			break;
-		}
-		case "slideOut":
-		case "moveOut":
-			outgoing.style.zIndex = "1";
-			animations.push(outgoing.animate([{ transform: "none" }, { transform: slide(kind.to, 1) }], timing));
-			break;
-		default: animations.push(incoming.animate([{ opacity: 0 }, { opacity: 1 }], timing));
-	}
-	await Promise.all(animations.map((a) => a.finished.catch(() => void 0)));
-}
-function place(el, box) {
-	Object.assign(el.style, {
-		left: `${box.x}px`,
-		top: `${box.y}px`,
-		width: `${box.width}px`,
-		height: `${box.height}px`
-	});
-}
-/** Where a screen sits off-stage on `side`. */
-function offset(side, sign) {
-	return `translate${side === "left" || side === "right" ? "X" : "Y"}(${(side === "left" || side === "top" ? -1 : 1) * sign * 100}%)`;
-}
-function easing(transition) {
-	const e = transition.easing;
-	switch (e.type) {
-		case "linear": return "linear";
-		case "easeIn": return "ease-in";
-		case "easeInOut": return "ease-in-out";
-		case "cubicBezier": return `cubic-bezier(${e.points.join(", ")})`;
-		default: return "ease-out";
-	}
-}
-//#endregion
-//#region src/runtime.ts
-/**
-* The prototype's state machine, independent of the DOM: the current screen of a page, the
-* overlays over it, and the history `back` returns through.
-*/
-var Runtime = class {
-	page;
-	frames;
-	history = [];
-	/** Frames left by a hover or press still under way, innermost last; `back` skips them. */
-	held = [];
-	state;
-	start;
-	/** Starts on `flow` (name or index), else the page's first flow, else its first frame. */
-	constructor(page, flow) {
-		this.page = page;
-		this.frames = new Map(page.frames.map((f) => [f.id, f]));
-		const start = ((flow !== void 0 && /^\d+$/.test(flow) ? page.flows[Number(flow)] : void 0) ?? page.flows.find((f) => f.name === flow) ?? page.flows[0])?.start ?? page.frames[0]?.id;
-		if (start === void 0 || !this.frames.has(start)) throw new Error(`page "${page.name}" has no frame to start on`);
-		this.start = start;
-		this.state = {
-			frame: start,
-			overlays: []
-		};
-	}
-	/** The screen below the overlays. */
-	get frame() {
-		return this.frames.get(this.state.frame);
-	}
-	/** The frame on top: the last overlay, else the screen. */
-	get top() {
-		const overlay = this.state.overlays.at(-1);
-		return overlay ? this.frames.get(overlay.id) : this.frame;
-	}
-	/** How many hovers and presses currently hold a frame. */
-	get holding() {
-		return this.held.length;
-	}
-	get canGoBack() {
-		return this.history.length > 0;
-	}
-	/**
-	* Applies an action; returns the step to show, or `undefined` when the screen stays. `origin`
-	* is the hotspot that ran it, where a `manual` overlay opens.
-	*/
-	run(action, origin) {
-		switch (action.type) {
-			case "navigate": return this.goTo(action.to, action.transition);
-			case "overlay":
-			case "swapOverlay": {
-				if (!this.frames.has(action.to)) return void 0;
-				const overlays = [...this.state.overlays];
-				if (action.type === "swapOverlay") overlays.pop();
-				overlays.push({
-					id: action.to,
-					transition: action.transition,
-					origin,
-					offset: action.offset
-				});
-				this.commit({
-					frame: this.base,
-					overlays
-				});
-				return this.step({
-					transition: action.transition,
-					layer: "overlay"
-				});
-			}
-			case "close": return this.close();
-			case "back": return this.back();
-			default: return;
-		}
-	}
-	goTo(frameId, transition) {
-		if (!this.frames.has(frameId) || frameId === this.state.frame && !this.state.overlays.length) return void 0;
-		this.commit({
-			frame: frameId,
-			overlays: []
-		});
-		return this.step({ transition });
-	}
-	/**
-	* "While hovering" and "while pressing": shows the action's frame until `release()`, without
-	* adding it to the history. Not inside overlays yet.
-	*/
-	hold(action) {
-		if (action.type !== "navigate" || this.state.overlays.length > 0) return void 0;
-		if (!this.frames.has(action.to) || action.to === this.state.frame) return void 0;
-		this.held.push(this.state.frame);
-		this.state = {
-			frame: action.to,
-			overlays: []
-		};
-		return this.step({ transition: action.transition });
-	}
-	/** Ends the innermost hold: back to the frame it started from, at once. */
-	release() {
-		const from = this.held.pop();
-		if (from === void 0) return void 0;
-		this.state = {
-			frame: from,
-			overlays: []
-		};
-		return this.step();
-	}
-	/** Closes the top overlay, with its opening transition played backwards. */
-	close() {
-		const top = this.state.overlays.at(-1);
-		if (!top) return void 0;
-		const below = {
-			frame: this.state.frame,
-			overlays: this.state.overlays.slice(0, -1)
-		};
-		if (same(this.history.at(-1), below)) this.history.pop();
-		this.state = below;
-		return this.step({
-			transition: top.transition,
-			reverse: true,
-			layer: "overlay"
-		});
-	}
-	back() {
-		const base = this.held[0];
-		this.held = [];
-		if (base !== void 0) this.state = {
-			frame: base,
-			overlays: []
-		};
-		const previous = this.history.pop();
-		if (previous === void 0) return base === void 0 ? void 0 : this.step();
-		const leaving = this.state;
-		this.state = previous;
-		if (previous.frame === leaving.frame) {
-			const top = leaving.overlays.at(-1) ?? previous.overlays.at(-1);
-			return this.step({
-				transition: top?.transition,
-				reverse: true,
-				layer: "overlay"
-			});
-		}
-		const transition = this.lastTransitionTo(leaving.frame, previous.frame);
-		return this.step({
-			transition,
-			reverse: true
-		});
-	}
-	restart() {
-		this.history = [];
-		this.held = [];
-		this.state = {
-			frame: this.start,
-			overlays: []
-		};
-		return this.step();
-	}
-	/** The frame below any hold. */
-	get base() {
-		return this.held[0] ?? this.state.frame;
-	}
-	/** Moves to `next`, recording where it came from; a hold under way is committed. */
-	commit(next) {
-		this.history.push(this.held.length ? {
-			frame: this.held[0],
-			overlays: []
-		} : this.state);
-		this.held = [];
-		this.state = next;
-	}
-	step(how = {}) {
-		return {
-			frame: this.frame,
-			overlays: this.state.overlays.map(({ id, ...rest }) => ({
-				frame: this.frames.get(id),
-				...rest
-			})),
-			...how
-		};
-	}
-	lastTransitionTo(to, from) {
-		for (const hotspot of this.frames.get(from)?.hotspots ?? []) for (const { action } of hotspot.interactions) if (action.type === "navigate" && action.to === to) return action.transition;
-	}
-};
-function same(a, b) {
-	return a !== void 0 && a.frame === b.frame && a.overlays.length === b.overlays.length && a.overlays.every((o, i) => o.id === b.overlays[i].id);
-}
-//#endregion
-//#region src/element.ts
-const TAG_NAME = "folioscope-player";
-const BaseElement = globalThis.HTMLElement ?? class {};
-const STYLE = `
+var e=class{element;backButton;pages;flows;constructor(e){let t=document.createElement(`div`);t.className=`controls`,t.setAttribute(`part`,`controls`),t.setAttribute(`role`,`toolbar`),t.setAttribute(`aria-label`,`Prototype controls`),t.hidden=!0;let n=(e,t,n)=>{let r=document.createElement(`button`);return r.type=`button`,r.textContent=t,r.title=e,r.setAttribute(`aria-label`,e),r.addEventListener(`click`,n),r},r=(e,t)=>{let n=document.createElement(`select`);return n.setAttribute(`aria-label`,e),n.addEventListener(`change`,()=>t(n.selectedIndex)),n};this.backButton=n(`Back`,`←`,()=>e.back()),this.pages=r(`Page`,t=>e.page(t)),this.flows=r(`Flow`,t=>e.flow(t));let i=document.createElement(`span`);i.className=`spacer`,t.append(n(`Restart`,`⟲`,()=>e.restart()),this.backButton,this.pages,this.flows,i,n(`Fullscreen`,`⛶`,()=>e.fullscreen())),this.element=t}load(e,n,r){let i=e.pages.filter(e=>e.frames.length>0);t(this.pages,i.map(e=>e.name),i.indexOf(n)),t(this.flows,n.flows.map(e=>e.name||`Flow`),r)}update(e){this.backButton.disabled=!e}};function t(e,t,n){e.replaceChildren(...t.map(e=>{let t=document.createElement(`option`);return t.textContent=e,t})),e.selectedIndex=Math.max(0,n),e.hidden=t.length<2}function n(e,t){return`width`in t?t.x>=e.x&&t.y>=e.y&&t.x+t.width<=e.x+e.width&&t.y+t.height<=e.y+e.height:t.x>=e.x&&t.x<e.x+e.width&&t.y>=e.y&&t.y<e.y+e.height}function r(e,t,n={}){let{mode:r=`contain`,align:i={}}=n,{x:a=.5,y:o=.5}=i,s=t.width/e.width,c=t.height/e.height,l,u;switch(r){case`contain`:l=u=Math.min(s,c);break;case`cover`:l=u=Math.max(s,c);break;case`fill`:l=s,u=c;break;case`none`:l=u=1;break;default:l=u=Math.min(1,s,c)}return{a:l,b:0,c:0,d:u,e:(t.width-e.width*l)*a+0,f:(t.height-e.height*u)*o+0}}function i(e,t,n){return r(e,t,{mode:`contain`,align:n})}function a(e){let{PI:t,min:n,max:r,cos:i,round:a}=Math,s=e[0]|e[1]<<8|e[2]<<16,c=e[3]|e[4]<<8,l=(s&63)/63,u=(s>>6&63)/31.5-1,d=(s>>12&63)/31.5-1,f=(s>>18&31)/31,p=s>>23,m=(c>>3&63)/63,h=(c>>9&63)/63,g=c>>15,_=r(3,g?p?5:7:c&7),v=r(3,g?c&7:p?5:7),y=p?(e[5]&15)/15:1,b=(e[5]>>4)/15,x=p?6:5,S=0,C=(t,n,r)=>{let i=[];for(let a=0;a<n;a++)for(let o=+!a;o*n<t*(n-a);o++)i.push(((e[x+(S>>1)]>>((S++&1)<<2)&15)/7.5-1)*r);return i},w=C(_,v,f),T=C(3,3,m*1.25),E=C(3,3,h*1.25),D=p&&C(5,5,b),O=o(e),k=a(O>1?32:32*O),A=a(O>1?32/O:32),j=new Uint8Array(k*A*4),M=[],N=[];for(let e=0,a=0;e<A;e++)for(let o=0;o<k;o++,a+=4){let s=l,c=u,f=d,m=y;for(let e=0,n=r(_,p?5:3);e<n;e++)M[e]=i(t/k*(o+.5)*e);for(let n=0,a=r(v,p?5:3);n<a;n++)N[n]=i(t/A*(e+.5)*n);for(let e=0,t=0;e<v;e++)for(let n=+!e,r=N[e]*2;n*v<_*(v-e);n++,t++)s+=w[t]*M[n]*r;for(let e=0,t=0;e<3;e++)for(let n=+!e,r=N[e]*2;n<3-e;n++,t++){let e=M[n]*r;c+=T[t]*e,f+=E[t]*e}if(p)for(let e=0,t=0;e<5;e++)for(let n=+!e,r=N[e]*2;n<5-e;n++,t++)m+=D[t]*M[n]*r;let h=s-2/3*c,g=(3*s-h+f)/2,b=g-f;j[a]=r(0,255*n(1,g)),j[a+1]=r(0,255*n(1,b)),j[a+2]=r(0,255*n(1,h)),j[a+3]=r(0,255*n(1,m))}return{w:k,h:A,rgba:j}}function o(e){let t=e[3],n=e[2]&128,r=e[4]&128;return(r?n?5:7:t&7)/(r?t&7:n?5:7)}function s(e,t,n){let r=e*4+1,i=6+t*(5+r),a=[137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,e>>8,e&255,0,0,t>>8,t&255,8,6,0,0,0,0,0,0,0,i>>>24,i>>16&255,i>>8&255,i&255,73,68,65,84,120,1],o=[0,498536548,997073096,651767980,1994146192,1802195444,1303535960,1342533948,-306674912,-267414716,-690576408,-882789492,-1687895376,-2032938284,-1609899400,-1111625188],s=1,c=0;for(let e=0,i=0,o=r-1;e<t;e++,o+=r-1)for(a.push(e+1<t?0:1,r&255,r>>8,~r&255,r>>8^255,0),c=(c+s)%65521;i<o;i++){let e=n[i]&255;a.push(e),s=(s+e)%65521,c=(c+s)%65521}a.push(c>>8,c&255,s>>8,s&255,0,0,0,0,0,0,0,0,73,69,78,68,174,66,96,130);for(let[e,t]of[[12,29],[37,41+i]]){let n=-1;for(let r=e;r<t;r++)n^=a[r],n=n>>>4^o[n&15],n=n>>>4^o[n&15];n=~n,a[t++]=n>>>24,a[t++]=n>>16&255,a[t++]=n>>8&255,a[t++]=n&255}return`data:image/png;base64,`+btoa(String.fromCharCode(...a))}function c(e){let t=a(e);return s(t.w,t.h,t.rgba)}var l=.001;function u(e={}){let{mass:t=1,stiffness:n=100,damping:r=10,initialVelocity:i=0}=e;if(!(t>0&&n>0&&r>0&&Number.isFinite(i)&&Number.isFinite(t*n*r)))throw RangeError(`spring: mass, stiffness and damping must be positive, and initialVelocity finite`);let a=Math.sqrt(n/t),o=r/(2*Math.sqrt(n*t)),s,c;if(o<1){let e=a*Math.sqrt(1-o*o),t=(o*a-i)/e;s=n=>Math.exp(-o*a*n)*(Math.cos(e*n)+t*Math.sin(e*n)),c=e=>Math.exp(-o*a*e)*Math.hypot(1,t)}else if(o===1){let e=a-i;s=t=>(1+e*t)*Math.exp(-a*t),c=t=>(1+Math.abs(e)*t)*Math.exp(-a*t)}else{let e=a*Math.sqrt(o*o-1),t=-o*a+e,n=-o*a-e,r=(-i-t)/(n-t),l=1-r;s=e=>l*Math.exp(t*e)+r*Math.exp(n*e),c=e=>(Math.abs(l)+Math.abs(r))*Math.exp(t*e)}let u=1;for(;c(u/1e3)>=l;)u*=2;let d=Math.max(1,Math.ceil(u/1e4)),f=u;for(;f>0&&Math.abs(s(f/1e3))<l;)f-=d;let p=Math.max(f+d,1),m=e=>e<=0?0:e>=p?1:1-s(e/1e3);return{durationMs:p,at:m,easing:e=>m(e*p)}}function d(e,t=32){if(!(Number.isInteger(t)&&t>=2))throw RangeError(`toCssLinear: samples must be an integer >= 2, got ${t}`);return`linear(${Array.from({length:t},(n,r)=>Number(e(r/(t-1)).toFixed(4))+0).join(`, `)})`}function f(e){return typeof globalThis.matchMedia==`function`&&globalThis.matchMedia(e).matches}function p(){return f(`(prefers-reduced-motion: reduce)`)}function m(e,t,n){let r=document.createElement(`div`);r.className=`frame`,r.setAttribute(`role`,`group`),r.setAttribute(`aria-label`,e.name),r.tabIndex=-1;let i;for(let n of e.layers){let a=document.createElement(`img`);if(a.src=t(n),a.alt=``,a.draggable=!1,C(a,n.bounds),n.scrolls&&e.scroll){let t=document.createElement(`div`);t.className=`scroll`;let{direction:n}=e.scroll;t.style.overflowX=n===`vertical`?`hidden`:`auto`,t.style.overflowY=n===`horizontal`?`hidden`:`auto`,i=document.createElement(`div`),i.className=`content`,i.style.width=`${e.scroll.content.width}px`,i.style.height=`${e.scroll.content.height}px`,i.append(a),t.append(i),r.append(t)}else r.append(a)}for(let t of e.hotspots){let e=h(t,n);e&&(t.fixed?r:i??r).append(e)}for(let a of e.components??[]){let e=g(a,t,n);(a.fixed?r:i??r).append(e)}return r}function h(e,t){let n=t=>e.interactions.filter(e=>e.trigger.type===t).map(e=>e.action),r=n(`click`),i=_.some(e=>n(e).length>0);if(r.length===0&&!i)return;let a=document.createElement(r.length>0?`button`:`div`);if(a.className=`hotspot`,C(a,e.bounds),a instanceof HTMLButtonElement&&(a.type=`button`,a.setAttribute(`aria-label`,e.name),a.addEventListener(`click`,n=>{n.stopPropagation();for(let n of r)t.action(n,e.bounds)})),i){let r=n=>{for(let r of n)t.action(r,e.bounds)};a.addEventListener(`pointerenter`,i=>{if(r(n(`mouseEnter`)),i.pointerType!==`touch`)for(let r of n(`hover`))t.hold(r,`hover`,e.bounds)}),a.addEventListener(`pointerleave`,()=>r(n(`mouseLeave`))),a.addEventListener(`pointerdown`,()=>{r(n(`mouseDown`));for(let r of n(`press`))t.hold(r,`press`,e.bounds)}),a.addEventListener(`pointerup`,()=>r(n(`mouseUp`)))}return a}function g(e,t,n){let r=document.createElement(`div`);r.className=`component`,r.dataset.component=e.id,C(r,e.bounds);let i=t=>({...t,x:t.x+e.bounds.x,y:t.y+e.bounds.y}),a=e.initial,o=[],s=(n,i)=>{let o=e.states.find(e=>e.variant===n);if(!o)return;a=n,r.dataset.state=o.name,r.style.width=`${o.bounds.width}px`,r.style.height=`${o.bounds.height}px`;let s=document.createElement(`img`);s.src=t(o.layer),s.alt=``,s.draggable=!1,C(s,o.layer.bounds);let l=r.querySelector(`img`),u=o.hotspots.flatMap(e=>h(e,c)??[]);r.replaceChildren(...l?[l]:[],s,...u);let d=p();!l||!i||d||i.durationMs===0||i.kind.type===`instant`?l?.remove():s.animate([{opacity:0},{opacity:1}],{...T(i)}).finished.catch(()=>void 0).then(()=>l.remove())},c={action:(e,t)=>{e.type===`changeTo`?s(e.to,e.transition):n.action(e,i(t))},hold:(e,t,c)=>{if(e.type!==`changeTo`)return n.hold(e,t,i(c));o.push(a),s(e.to,e.transition);let l=()=>{let e=o.pop();e!==void 0&&s(e)};t===`press`?globalThis.addEventListener(`pointerup`,l,{once:!0}):r.addEventListener(`pointerleave`,l,{once:!0})}};for(let n of e.states)new Image().src=t(n.layer);return s(e.initial),r}const _=[`hover`,`press`,`mouseEnter`,`mouseLeave`,`mouseDown`,`mouseUp`];async function v(e,t,n){if(p()||t.durationMs===0||t.kind.type===`instant`)return;let r={...T(t),fill:`both`},i=t.kind,[a,o]=i.type===`slideIn`||i.type===`moveIn`||i.type===`push`?[{transform:w(i.from,1)},{transform:`none`}]:[{opacity:0},{opacity:1}],s=(e,t,i)=>e?.animate(n?[i,t]:[t,i],r).finished.catch(()=>void 0);await Promise.all([s(e.querySelector(`.sheet`),a,o),s(e.querySelector(`.backdrop`),{opacity:0},{opacity:1})])}async function y(e,t,n,r,i){if(!t.parts?.length||!n.parts?.length||p())return;let a={...T(r),fill:`both`},o=document.createElement(`div`);o.className=`smart`;let s=(e,t)=>{let n=document.createElement(`img`);return n.src=i(t),n.alt=``,C(n,e),o.append(n),n},c=(e,t)=>`translate(${t.x-e.x}px, ${t.y-e.y}px) scale(${t.width/e.width||1}, ${t.height/e.height||1})`,l=/* @__PURE__ */ new Map;for(let[e,r]of t.parts.entries()){let t=n.parts.findIndex((e,t)=>e.name===r.name&&![...l.values()].includes(t));t>=0&&l.set(e,t)}let u=new Set(l.values()),d=[];for(let[e,r]of t.parts.entries()){let t=l.get(e),i=t===void 0?void 0:n.parts[t].layer.bounds,a=s(r.layer.bounds,r.layer);d.push([a,i?[{transform:`none`},{transform:c(r.layer.bounds,i)}]:[{opacity:1},{opacity:0}]])}for(let[e,r]of n.parts.entries()){let n=[...l].find(([,t])=>t===e)?.[0],i=u.has(e)&&n!==void 0?t.parts[n].layer.bounds:void 0,a=s(r.layer.bounds,r.layer);d.push([a,i?[{transform:c(r.layer.bounds,i),opacity:0},{transform:`none`,opacity:1}]:[{opacity:0},{opacity:1}]])}e.append(o),await x(o),await Promise.all(d.map(([e,t])=>e.animate(t,a).finished.catch(()=>void 0))),o.remove()}function b(e,t){let n=e.querySelector(`.scroll`);if(!n||!t.target)return;let r=p()||t.transition.kind.type===`instant`;n.scrollTo({left:t.target.x-(t.offset?.x??0),top:t.target.y-(t.offset?.y??0),behavior:r?`instant`:`smooth`})}async function x(e){await Promise.all([...e.querySelectorAll(`img`)].map(e=>e.decode().catch(()=>void 0)))}async function S(e,t,n,r){let i=p();if(!e||!n||i||n.durationMs===0||n.kind.type===`instant`)return;let a={...T(n),fill:`both`},o=n.kind,s=[],c=(e,t)=>w(e,t);switch(o.type){case`slideIn`:case`moveIn`:r?(e.style.zIndex=`1`,s.push(e.animate([{transform:`none`},{transform:c(o.from,1)}],a))):s.push(t.animate([{transform:c(o.from,1)},{transform:`none`}],a));break;case`push`:{let n=r?-1:1;s.push(t.animate([{transform:c(o.from,n)},{transform:`none`}],a),e.animate([{transform:`none`},{transform:c(o.from,-n)}],a));break}case`slideOut`:case`moveOut`:e.style.zIndex=`1`,s.push(e.animate([{transform:`none`},{transform:c(o.to,1)}],a));break;default:s.push(t.animate([{opacity:0},{opacity:1}],a))}await Promise.all(s.map(e=>e.finished.catch(()=>void 0)))}function C(e,t){Object.assign(e.style,{left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`})}function w(e,t){return`translate${e===`left`||e===`right`?`X`:`Y`}(${(e===`left`||e===`top`?-1:1)*t*100}%)`}function T(e){let t=e.easing;if(t.type===`spring`){let e=u(t);return{duration:e.durationMs,easing:d(t=>e.at(t*e.durationMs))}}return{duration:e.durationMs,easing:E(e)}}function E(e){let t=e.easing;switch(t.type){case`linear`:return`linear`;case`easeIn`:return`ease-in`;case`easeInOut`:return`ease-in-out`;case`cubicBezier`:return`cubic-bezier(${t.points.join(`, `)})`;default:return`ease-out`}}var D=class{page;frames;history=[];held=[];state;start;constructor(e,t){this.page=e,this.frames=new Map(e.frames.map(e=>[e.id,e]));let n=((t!==void 0&&/^\d+$/.test(t)?e.flows[Number(t)]:void 0)??e.flows.find(e=>e.name===t)??e.flows[0])?.start??e.frames[0]?.id;if(n===void 0||!this.frames.has(n))throw Error(`page "${e.name}" has no frame to start on`);this.start=n,this.state={frame:n,overlays:[]}}get frame(){return this.frames.get(this.state.frame)}get top(){let e=this.state.overlays.at(-1);return e?this.frames.get(e.id):this.frame}get holding(){return this.held.length}get canGoBack(){return this.history.length>0}run(e,t){switch(e.type){case`navigate`:return this.goTo(e.to,e.transition);case`overlay`:case`swapOverlay`:{if(!this.frames.has(e.to))return;let n=[...this.state.overlays];return e.type===`swapOverlay`&&n.pop(),n.push({id:e.to,transition:e.transition,origin:t,offset:e.offset}),this.commit({frame:this.base,overlays:n}),this.step({transition:e.transition,layer:`overlay`})}case`close`:return this.close();case`back`:return this.back();default:return}}goTo(e,t){if(this.frames.has(e)&&(e!==this.state.frame||this.state.overlays.length))return this.commit({frame:e,overlays:[]}),this.step({transition:t})}hold(e){if(!(e.type!==`navigate`||this.state.overlays.length>0)&&this.frames.has(e.to)&&e.to!==this.state.frame)return this.held.push(this.state.frame),this.state={frame:e.to,overlays:[]},this.step({transition:e.transition})}release(){let e=this.held.pop();if(e!==void 0)return this.state={frame:e,overlays:[]},this.step()}close(){let e=this.state.overlays.at(-1);if(!e)return;let t={frame:this.state.frame,overlays:this.state.overlays.slice(0,-1)};return O(this.history.at(-1),t)&&this.history.pop(),this.state=t,this.step({transition:e.transition,reverse:!0,layer:`overlay`})}back(){let e=this.held[0];this.held=[],e!==void 0&&(this.state={frame:e,overlays:[]});let t=this.history.pop();if(t===void 0)return e===void 0?void 0:this.step();let n=this.state;if(this.state=t,t.frame===n.frame){let e=n.overlays.at(-1)??t.overlays.at(-1);return this.step({transition:e?.transition,reverse:!0,layer:`overlay`})}let r=this.lastTransitionTo(n.frame,t.frame);return this.step({transition:r,reverse:!0})}restart(){return this.history=[],this.held=[],this.state={frame:this.start,overlays:[]},this.step()}get base(){return this.held[0]??this.state.frame}commit(e){this.history.push(this.held.length?{frame:this.held[0],overlays:[]}:this.state),this.held=[],this.state=e}step(e={}){return{frame:this.frame,overlays:this.state.overlays.map(({id:e,...t})=>({frame:this.frames.get(e),...t})),...e}}lastTransitionTo(e,t){for(let n of this.frames.get(t)?.hotspots??[])for(let{action:t}of n.interactions)if(t.type===`navigate`&&t.to===e)return t.transition}};function O(e,t){return e!==void 0&&e.frame===t.frame&&e.overlays.length===t.overlays.length&&e.overlays.every((e,n)=>e.id===t.overlays[n].id)}const k=`folioscope-player`,A=globalThis.HTMLElement??class{};var j=class extends A{static observedAttributes=[`src`,`flow`,`page`,`controls`];root;viewport;stage;runtime;index;base=``;density=1;shown;shownFrame;timers=[];loading=0;preloadedPage;showing=0;resize;controls;holds=[];releasePress=()=>this.release(e=>e.kind===`press`);constructor(){super(),this.root=this.attachShadow({mode:`open`}),this.root.innerHTML=`<style>
 :host { display: block; position: relative; contain: content; }
 :host([hidden]) { display: none; }
 .viewport { position: relative; width: 100%; overflow: hidden; aspect-ratio: var(--w) / var(--h); }
@@ -623,378 +14,19 @@ const STYLE = `
 .content { position: relative; }
 .sheet { pointer-events: none; }
 .sheet > .frame { pointer-events: auto; }
+.component { position: absolute; }
+.smart { position: absolute; inset: 0; overflow: hidden; }
+.smart img { position: absolute; display: block; transform-origin: 0 0; pointer-events: none; }
 .hotspot { position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
 .hotspot:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
 :host([hotspots="always"]) .hotspot { background: rgb(37 99 235 / 0.15); box-shadow: inset 0 0 0 2px rgb(37 99 235 / 0.6); }
 .viewport.flash .hotspot { animation: folioscope-flash 0.7s ease-out; }
 @keyframes folioscope-flash { from { background: rgb(37 99 235 / 0.35); box-shadow: inset 0 0 0 2px rgb(37 99 235 / 0.8); } }
-`;
-/**
-* `<folioscope-player src="app.folio">`: plays a baked prototype. Raw design files need the full
-* player, which comes later.
-*/
-var FolioscopePlayer = class extends BaseElement {
-	static observedAttributes = [
-		"src",
-		"flow",
-		"page",
-		"controls"
-	];
-	root;
-	viewport;
-	stage;
-	runtime;
-	index;
-	base = "";
-	density = 1;
-	shown;
-	timers = [];
-	loading = 0;
-	preloadedPage;
-	showing = 0;
-	resize;
-	controls;
-	/** The hovers and presses holding a frame, innermost last, with the hotspot that started each. */
-	holds = [];
-	releasePress = () => this.release((hold) => hold.kind === "press");
-	constructor() {
-		super();
-		this.root = this.attachShadow({ mode: "open" });
-		this.root.innerHTML = `<style>${STYLE}${CONTROLS_STYLE}</style><div class="viewport" part="viewport"><div class="stage"></div></div>`;
-		this.viewport = this.root.querySelector(".viewport");
-		this.stage = this.root.querySelector(".stage");
-		this.controls = new Controls({
-			restart: () => this.restart(),
-			back: () => this.back(),
-			page: (i) => this.setAttribute("page", String(this.index?.pages.indexOf(this.playablePages()[i]) ?? 0)),
-			flow: (i) => this.setAttribute("flow", String(i)),
-			fullscreen: () => void this.requestFullscreen?.().catch(() => void 0)
-		});
-		this.controls.element.hidden = !this.hasAttribute("controls");
-		this.root.append(this.controls.element);
-		this.viewport.addEventListener("click", (event) => {
-			if (!event.composedPath().some((el) => el instanceof HTMLElement && el.classList.contains("hotspot")) && (this.getAttribute("hotspots") ?? "on-miss") === "on-miss") {
-				this.viewport.classList.remove("flash");
-				this.viewport.offsetWidth;
-				this.viewport.classList.add("flash");
-			}
-		});
-		this.viewport.addEventListener("animationend", () => this.viewport.classList.remove("flash"));
-		this.addEventListener("fullscreenchange", () => this.fit());
-		this.viewport.addEventListener("pointermove", (event) => this.release((hold) => hold.kind === "hover" && !this.under(event, hold.bounds)));
-		this.viewport.addEventListener("pointerleave", () => this.release((hold) => hold.kind === "hover"));
-		this.addEventListener("keydown", (event) => {
-			if (event.key === "Escape" && this.runtime?.canGoBack) {
-				event.preventDefault();
-				this.show(this.runtime.back());
-			}
-		});
-	}
-	get src() {
-		return this.getAttribute("src") ?? "";
-	}
-	set src(value) {
-		this.setAttribute("src", value);
-	}
-	/** The frame on screen. */
-	get frame() {
-		return this.runtime?.frame;
-	}
-	connectedCallback() {
-		globalThis.addEventListener("pointerup", this.releasePress);
-		globalThis.addEventListener("pointercancel", this.releasePress);
-		this.resize = new ResizeObserver(() => this.fit());
-		this.resize.observe(this.viewport);
-		if (!this.index) this.load();
-	}
-	disconnectedCallback() {
-		globalThis.removeEventListener("pointerup", this.releasePress);
-		globalThis.removeEventListener("pointercancel", this.releasePress);
-		this.resize?.disconnect();
-		this.clearTimers();
-	}
-	attributeChangedCallback(name, previous, value) {
-		if (previous === value || !this.isConnected) return;
-		if (name === "controls") this.controls.element.hidden = value === null;
-		else if (name === "src") this.load();
-		else if (this.index) this.startPage();
-	}
-	/** Back to the start of the flow. */
-	restart() {
-		if (this.runtime) this.show(this.runtime.restart());
-	}
-	back() {
-		if (this.runtime) this.show(this.runtime.back());
-	}
-	goTo(frameId) {
-		if (this.runtime) this.show(this.runtime.goTo(frameId));
-	}
-	async load() {
-		const src = this.src;
-		if (!src) return;
-		const attempt = ++this.loading;
-		this.showPoster();
-		try {
-			if (/\.(fig|sketch|xd|penpot)$/i.test(src)) throw new Error(`${src}: raw design files need the full player, not available yet; bake it with \`folioscope bake\``);
-			this.base = src.endsWith("index.json") ? src.slice(0, -10) : src.endsWith("/") ? src : `${src}/`;
-			const response = await fetch(`${this.base}index.json`);
-			if (!response.ok) throw new Error(`${this.base}index.json: HTTP ${response.status}`);
-			const index = await response.json();
-			if (index.folio > 1 || index.irVersion > 1) throw new Error(`${src} was baked by a newer folioscope (folio v${index.folio}, IR v${index.irVersion})`);
-			if (attempt !== this.loading) return;
-			this.index = index;
-			const dpr = globalThis.devicePixelRatio ?? 1;
-			this.density = [...index.densities].sort((a, b) => a - b).find((d) => d >= dpr) ?? Math.max(...index.densities);
-			this.startPage();
-			this.emit("folioscope:load", { pages: index.pages.length });
-		} catch (error) {
-			this.emit("folioscope:error", { error });
-		}
-	}
-	startPage() {
-		const index = this.index;
-		const pageAttr = this.getAttribute("page");
-		const page = (pageAttr && /^\d+$/.test(pageAttr) ? index.pages[Number(pageAttr)] : index.pages.find((p) => p.name === pageAttr)) ?? index.pages.find((p) => p.flows.length > 0) ?? index.pages[0];
-		if (!page) return;
-		const flowAttr = this.getAttribute("flow") ?? void 0;
-		this.runtime = new Runtime(page, flowAttr);
-		const flowIndex = flowAttr !== void 0 && /^\d+$/.test(flowAttr) ? Number(flowAttr) : Math.max(0, page.flows.findIndex((f) => f.name === flowAttr));
-		this.controls.load(index, page, flowIndex);
-		this.showPoster(this.runtime.frame.placeholder);
-		this.show(this.runtime.restart());
-	}
-	async show(step) {
-		if (!step) return;
-		const seq = ++this.showing;
-		this.clearTimers();
-		for (const animation of this.stage.getAnimations({ subtree: true })) animation.finish();
-		const hadFocus = this.root.activeElement !== null;
-		const shown = step.layer === "overlay" && this.shown ? await this.showOverlay(step, seq) : await this.showScreen(step, seq);
-		if (!shown || seq !== this.showing) return;
-		if (hadFocus) shown.focus({ preventScroll: true });
-		this.controls.update(this.runtime?.canGoBack ?? false);
-		const top = step.overlays.at(-1)?.frame ?? step.frame;
-		this.emit("folioscope:navigate", {
-			frame: top.id,
-			name: top.name
-		});
-		this.schedule(top);
-		this.preload(top);
-	}
-	/** Replaces the screen and its overlays; returns the frame on top. */
-	async showScreen(step, seq) {
-		const { frame } = step;
-		this.viewport.style.setProperty("--w", String(frame.bounds.width));
-		this.viewport.style.setProperty("--h", String(frame.bounds.height));
-		this.fit();
-		const incoming = this.render(frame);
-		const overlays = step.overlays.map((overlay) => this.renderOverlay(overlay, frame));
-		await Promise.all([incoming, ...overlays].map(decoded));
-		if (seq !== this.showing) return void 0;
-		const outgoing = this.shown;
-		this.shown = incoming;
-		for (const el of this.stage.querySelectorAll(":scope > .overlay")) el.remove();
-		this.stage.append(incoming, ...overlays);
-		this.root.querySelector(".poster")?.remove();
-		await play(outgoing, incoming, step.transition, step.reverse ?? false);
-		if (seq !== this.showing) return void 0;
-		for (const el of this.stage.querySelectorAll(":scope > .frame")) if (el !== incoming) el.remove();
-		return overlays.at(-1)?.querySelector(".frame") ?? incoming;
-	}
-	/** Opens, closes or swaps the top overlay, the screen below staying; returns the frame on top. */
-	async showOverlay(step, seq) {
-		const open = [...this.stage.querySelectorAll(":scope > .overlay")];
-		const wanted = step.overlays;
-		const below = Math.min(open.length, wanted.length) - (open.length === wanted.length ? 1 : 0);
-		if (open.slice(0, below).some((el, i) => el.dataset.frame !== wanted[i].frame.id)) return this.showScreen({
-			...step,
-			transition: void 0
-		}, seq);
-		const closing = open.length > below ? open.at(-1) : void 0;
-		const top = wanted.length > below ? wanted.at(-1) : void 0;
-		const opening = top && this.renderOverlay(top, step.frame);
-		if (opening) {
-			await decoded(opening);
-			if (seq !== this.showing) return void 0;
-			this.stage.append(opening);
-		}
-		const transition = top?.transition ?? step.transition;
-		if (transition) await Promise.all([opening && playOverlay(opening, transition, false), closing && playOverlay(closing, transition, true)]);
-		if (seq !== this.showing) return void 0;
-		closing?.remove();
-		const shown = this.stage.querySelectorAll(":scope > .overlay > .sheet > .frame");
-		return shown[shown.length - 1] ?? this.shown;
-	}
-	/** A frame with its hotspots wired to the runtime; `at` places it in the screen's coordinates. */
-	render(frame, at = {
-		x: 0,
-		y: 0
-	}) {
-		const el = renderFrame(frame, (layer) => this.layerUrl(layer), {
-			action: (action, bounds) => {
-				if (action.type === "scrollTo") return scrollFrame(el, action);
-				const origin = {
-					...bounds,
-					x: bounds.x + at.x,
-					y: bounds.y + at.y
-				};
-				this.show(this.runtime?.run(action, origin));
-				if (action.type === "openUrl") window.open(action.url, action.newTab ? "_blank" : "_self", "noopener");
-			},
-			hold: (action, kind, bounds) => this.hold(action, kind, bounds)
-		});
-		return el;
-	}
-	/** An overlay layer: a backdrop over the whole screen, and the overlay frame at its position. */
-	renderOverlay(overlay, screen) {
-		const settings = overlay.frame.overlay ?? {
-			position: "center",
-			closeOnClickOutside: false
-		};
-		const at = overlayPosition(settings.position, screen.bounds, overlay);
-		const layer = document.createElement("div");
-		layer.className = "overlay";
-		layer.dataset.frame = overlay.frame.id;
-		const backdrop = document.createElement("div");
-		backdrop.className = "backdrop";
-		if (settings.backdrop) backdrop.style.background = settings.backdrop;
-		backdrop.addEventListener("click", () => {
-			if (settings.closeOnClickOutside) this.show(this.runtime?.close());
-		});
-		const sheet = document.createElement("div");
-		sheet.className = "sheet";
-		const el = this.render(overlay.frame, at);
-		Object.assign(el.style, {
-			inset: "auto",
-			left: `${at.x}px`,
-			top: `${at.y}px`,
-			width: `${overlay.frame.bounds.width}px`,
-			height: `${overlay.frame.bounds.height}px`
-		});
-		sheet.append(el);
-		layer.append(backdrop, sheet);
-		return layer;
-	}
-	hold(action, kind, bounds) {
-		const step = this.runtime?.hold(action);
-		if (!step) return;
-		this.holds.push({
-			kind,
-			bounds
-		});
-		this.show(step);
-	}
-	/** Ends the innermost holds while `ends` says so, then shows the frame they return to. */
-	release(ends) {
-		const runtime = this.runtime;
-		if (!runtime) return;
-		this.holds.length = Math.min(this.holds.length, runtime.holding);
-		let step;
-		while (this.holds.length > 0 && ends(this.holds.at(-1))) {
-			this.holds.pop();
-			step = runtime.release() ?? step;
-		}
-		if (step) this.show(step);
-	}
-	/** Whether a pointer event falls inside `bounds`, in the frame's coordinates. */
-	under(event, bounds) {
-		const stage = this.stage.getBoundingClientRect();
-		const scale = stage.width / (Number(this.viewport.style.getPropertyValue("--w")) || 1);
-		const x = (event.clientX - stage.left) / scale;
-		const y = (event.clientY - stage.top) / scale;
-		return x >= bounds.x && x < bounds.x + bounds.width && y >= bounds.y && y < bounds.y + bounds.height;
-	}
-	/** "After delay" interactions start counting when the frame shows. */
-	schedule(frame) {
-		for (const hotspot of frame.hotspots) for (const { trigger, action } of hotspot.interactions) if (trigger.type === "afterDelay") this.timers.push(setTimeout(() => void this.show(this.runtime?.run(action)), trigger.delayMs));
-	}
-	/**
-	* `preload`: `neighbors` (default) fetches the frames this one links to, `all` every frame of
-	* the page once, `start` and `none` nothing beyond the frame on screen.
-	*/
-	preload(frame) {
-		const strategy = this.getAttribute("preload") ?? "neighbors";
-		const page = this.runtime?.page;
-		if (!page || strategy === "none" || strategy === "start") return;
-		let targets;
-		if (strategy === "all") {
-			if (this.preloadedPage === page) return;
-			this.preloadedPage = page;
-			targets = page.frames;
-		} else {
-			const frames = new Map(page.frames.map((f) => [f.id, f]));
-			targets = frame.hotspots.flatMap((h) => h.interactions).flatMap(({ action }) => "to" in action ? [frames.get(action.to)] : []).filter((f) => f !== void 0);
-		}
-		for (const target of targets) for (const layer of target.layers) new Image().src = this.layerUrl(layer);
-	}
-	playablePages() {
-		return this.index?.pages.filter((p) => p.frames.length > 0) ?? [];
-	}
-	/** The `poster` image, else the frame's baked placeholder, until the first frame is ready. */
-	showPoster(placeholder) {
-		const poster = this.getAttribute("poster") ?? (placeholder ? thumbHashToDataURL(Uint8Array.from(atob(placeholder), (c) => c.charCodeAt(0))) : null);
-		if (!poster || this.root.querySelector(".poster")) return;
-		const img = document.createElement("img");
-		img.className = "poster";
-		img.alt = "";
-		img.src = poster;
-		this.viewport.append(img);
-	}
-	/**
-	* Scales the prototype to the element's width. In fullscreen, the screen's height bounds it too,
-	* and the prototype is centered.
-	*/
-	fit() {
-		const style = this.viewport.style;
-		const width = Number(style.getPropertyValue("--w")) || 1;
-		const height = Number(style.getPropertyValue("--h")) || 1;
-		const { clientWidth, clientHeight } = this.viewport;
-		const full = document.fullscreenElement === this;
-		let scale = 1;
-		if ((this.getAttribute("fit") ?? "contain") !== "none") {
-			scale = clientWidth / width;
-			if (full) scale = Math.min(scale, clientHeight / height);
-		}
-		scale ||= 1;
-		style.setProperty("--scale", String(scale));
-		style.setProperty("--x", full ? `${Math.max(0, (clientWidth - width * scale) / 2)}px` : "0px");
-		style.setProperty("--y", full ? `${Math.max(0, (clientHeight - height * scale) / 2)}px` : "0px");
-	}
-	layerUrl(layer) {
-		return `${this.base}layers/${layer.src}@${this.density}x.${layer.format}`;
-	}
-	clearTimers() {
-		this.timers.forEach(clearTimeout);
-		this.timers = [];
-	}
-	emit(type, detail) {
-		this.dispatchEvent(new CustomEvent(type, {
-			detail,
-			bubbles: true,
-			composed: true
-		}));
-	}
-};
-/** Top-left corner of an overlay in the screen's coordinates. */
-function overlayPosition(position, screen, overlay) {
-	const { width, height } = overlay.frame.bounds;
-	if (position === "manual") {
-		const origin = overlay.origin ?? {
-			x: 0,
-			y: 0
-		};
-		return {
-			x: origin.x + (overlay.offset?.x ?? 0),
-			y: origin.y + (overlay.offset?.y ?? 0)
-		};
-	}
-	return {
-		x: position.endsWith("Left") ? 0 : position.endsWith("Right") ? screen.width - width : (screen.width - width) / 2,
-		y: position.startsWith("top") ? 0 : position.startsWith("bottom") ? screen.height - height : (screen.height - height) / 2
-	};
-}
-//#endregion
-//#region src/index.ts
-if (typeof customElements !== "undefined" && !customElements.get("folioscope-player")) customElements.define(TAG_NAME, FolioscopePlayer);
-//#endregion
-export { FolioscopePlayer, Runtime, TAG_NAME };
+
+.controls { display: flex; gap: 4px; align-items: center; padding: 4px; font: 13px/1.2 system-ui, sans-serif; background: var(--folioscope-controls-background, #1e1e1e); color: var(--folioscope-controls-color, #eee); }
+.controls[hidden] { display: none; }
+.controls button, .controls select { font: inherit; color: inherit; background: transparent; border: 1px solid #555; border-radius: 4px; padding: 2px 8px; min-height: 28px; cursor: pointer; }
+.controls button:disabled { opacity: .4; cursor: default; }
+.controls select[hidden] { display: none; }
+.controls .spacer { flex: 1; }
+</style><div class="viewport" part="viewport"><div class="stage"></div></div>`,this.viewport=this.root.querySelector(`.viewport`),this.stage=this.root.querySelector(`.stage`),this.controls=new e({restart:()=>this.restart(),back:()=>this.back(),page:e=>this.setAttribute(`page`,String(this.index?.pages.indexOf(this.playablePages()[e])??0)),flow:e=>this.setAttribute(`flow`,String(e)),fullscreen:()=>void this.requestFullscreen?.().catch(()=>void 0)}),this.controls.element.hidden=!this.hasAttribute(`controls`),this.root.append(this.controls.element),this.viewport.addEventListener(`click`,e=>{!e.composedPath().some(e=>e instanceof HTMLElement&&e.classList.contains(`hotspot`))&&(this.getAttribute(`hotspots`)??`on-miss`)===`on-miss`&&(this.viewport.classList.remove(`flash`),this.viewport.offsetWidth,this.viewport.classList.add(`flash`))}),this.viewport.addEventListener(`animationend`,()=>this.viewport.classList.remove(`flash`)),this.addEventListener(`fullscreenchange`,()=>this.fit()),this.viewport.addEventListener(`pointermove`,e=>this.release(t=>t.kind===`hover`&&!this.under(e,t.bounds))),this.viewport.addEventListener(`pointerleave`,()=>this.release(e=>e.kind===`hover`)),this.addEventListener(`keydown`,e=>{e.key===`Escape`&&this.runtime?.canGoBack&&(e.preventDefault(),this.show(this.runtime.back()))})}get src(){return this.getAttribute(`src`)??``}set src(e){this.setAttribute(`src`,e)}get frame(){return this.runtime?.frame}connectedCallback(){globalThis.addEventListener(`pointerup`,this.releasePress),globalThis.addEventListener(`pointercancel`,this.releasePress),this.resize=new ResizeObserver(()=>this.fit()),this.resize.observe(this.viewport),this.index||this.load()}disconnectedCallback(){globalThis.removeEventListener(`pointerup`,this.releasePress),globalThis.removeEventListener(`pointercancel`,this.releasePress),this.resize?.disconnect(),this.clearTimers()}attributeChangedCallback(e,t,n){t!==n&&this.isConnected&&(e===`controls`?this.controls.element.hidden=n===null:e===`src`?this.load():this.index&&this.startPage())}restart(){this.runtime&&this.show(this.runtime.restart())}back(){this.runtime&&this.show(this.runtime.back())}goTo(e){this.runtime&&this.show(this.runtime.goTo(e))}async load(){let e=this.src;if(!e)return;let t=++this.loading;this.showPoster();try{if(/\.(fig|sketch|xd|penpot)$/i.test(e))throw Error(`${e}: raw design files need the full player, not available yet; bake it with \`folioscope bake\``);this.base=e.endsWith(`index.json`)?e.slice(0,-10):e.endsWith(`/`)?e:`${e}/`;let n=await fetch(`${this.base}index.json`);if(!n.ok)throw Error(`${this.base}index.json: HTTP ${n.status}`);let r=await n.json();if(r.folio>1||r.irVersion>1)throw Error(`${e} was baked by a newer folioscope (folio v${r.folio}, IR v${r.irVersion})`);if(t!==this.loading)return;this.index=r;let i=globalThis.devicePixelRatio??1;this.density=[...r.densities].sort((e,t)=>e-t).find(e=>e>=i)??Math.max(...r.densities),this.startPage(),this.emit(`folioscope:load`,{pages:r.pages.length})}catch(e){this.emit(`folioscope:error`,{error:e})}}startPage(){let e=this.index,t=this.getAttribute(`page`),n=(t&&/^\d+$/.test(t)?e.pages[Number(t)]:e.pages.find(e=>e.name===t))??e.pages.find(e=>e.flows.length>0)??e.pages[0];if(!n)return;let r=this.getAttribute(`flow`)??void 0;this.runtime=new D(n,r);let i=r!==void 0&&/^\d+$/.test(r)?Number(r):Math.max(0,n.flows.findIndex(e=>e.name===r));this.controls.load(e,n,i),this.showPoster(this.runtime.frame.placeholder),this.show(this.runtime.restart())}async show(e){if(!e)return;let t=++this.showing;this.clearTimers();for(let e of this.stage.getAnimations({subtree:!0}))e.finish();let n=this.root.activeElement!==null,r=e.layer===`overlay`&&this.shown?await this.showOverlay(e,t):await this.showScreen(e,t);if(!r||t!==this.showing)return;n&&r.focus({preventScroll:!0}),this.controls.update(this.runtime?.canGoBack??!1);let i=e.overlays.at(-1)?.frame??e.frame;this.emit(`folioscope:navigate`,{frame:i.id,name:i.name}),this.schedule(i),this.preload(i)}async showScreen(e,t){let{frame:n}=e;this.viewport.style.setProperty(`--w`,String(n.bounds.width)),this.viewport.style.setProperty(`--h`,String(n.bounds.height)),this.fit();let r=this.render(n),i=e.overlays.map(e=>this.renderOverlay(e,n));if(await Promise.all([r,...i].map(x)),t!==this.showing)return;let a=this.shown;this.shown=r;for(let e of this.stage.querySelectorAll(`:scope > .overlay`))e.remove();this.stage.append(r,...i),this.root.querySelector(`.poster`)?.remove();let o=this.shownFrame;if(this.shownFrame=n,e.transition?.kind.type===`smartAnimate`&&o?.parts&&n.parts?await y(this.stage,o,n,e.transition,e=>this.layerUrl(e)):await S(a,r,e.transition,e.reverse??!1),t===this.showing){for(let e of this.stage.querySelectorAll(`:scope > .frame`))e!==r&&e.remove();return i.at(-1)?.querySelector(`.frame`)??r}}async showOverlay(e,t){let n=[...this.stage.querySelectorAll(`:scope > .overlay`)],r=e.overlays,i=Math.min(n.length,r.length)-+(n.length===r.length);if(n.slice(0,i).some((e,t)=>e.dataset.frame!==r[t].frame.id))return this.showScreen({...e,transition:void 0},t);let a=n.length>i?n.at(-1):void 0,o=r.length>i?r.at(-1):void 0,s=o&&this.renderOverlay(o,e.frame);if(s){if(await x(s),t!==this.showing)return;this.stage.append(s)}let c=o?.transition??e.transition;if(c&&await Promise.all([s&&v(s,c,!1),a&&v(a,c,!0)]),t!==this.showing)return;a?.remove();let l=this.stage.querySelectorAll(`:scope > .overlay > .sheet > .frame`);return l[l.length-1]??this.shown}render(e,t={x:0,y:0}){let n=m(e,e=>this.layerUrl(e),{action:(e,r)=>{if(e.type===`scrollTo`)return b(n,e);let i={...r,x:r.x+t.x,y:r.y+t.y};this.show(this.runtime?.run(e,i)),e.type===`openUrl`&&window.open(e.url,e.newTab?`_blank`:`_self`,`noopener`)},hold:(e,t,n)=>this.hold(e,t,n)});return n}renderOverlay(e,t){let n=e.frame.overlay??{position:`center`,closeOnClickOutside:!1},r=M(n.position,t.bounds,e),i=document.createElement(`div`);i.className=`overlay`,i.dataset.frame=e.frame.id;let a=document.createElement(`div`);a.className=`backdrop`,n.backdrop&&(a.style.background=n.backdrop),a.addEventListener(`click`,()=>{n.closeOnClickOutside&&this.show(this.runtime?.close())});let o=document.createElement(`div`);o.className=`sheet`;let s=this.render(e.frame,r);return Object.assign(s.style,{inset:`auto`,left:`${r.x}px`,top:`${r.y}px`,width:`${e.frame.bounds.width}px`,height:`${e.frame.bounds.height}px`}),o.append(s),i.append(a,o),i}hold(e,t,n){let r=this.runtime?.hold(e);r&&(this.holds.push({kind:t,bounds:n}),this.show(r))}release(e){let t=this.runtime;if(!t)return;this.holds.length=Math.min(this.holds.length,t.holding);let n;for(;this.holds.length>0&&e(this.holds.at(-1));)this.holds.pop(),n=t.release()??n;n&&this.show(n)}under(e,t){let r=this.stage.getBoundingClientRect(),i=r.width/(Number(this.viewport.style.getPropertyValue(`--w`))||1);return n(t,{x:(e.clientX-r.left)/i,y:(e.clientY-r.top)/i})}schedule(e){for(let t of e.hotspots)for(let{trigger:e,action:n}of t.interactions)e.type===`afterDelay`&&this.timers.push(setTimeout(()=>void this.show(this.runtime?.run(n)),e.delayMs))}preload(e){let t=this.getAttribute(`preload`)??`neighbors`,n=this.runtime?.page;if(!n||t===`none`||t===`start`)return;let r;if(t===`all`){if(this.preloadedPage===n)return;this.preloadedPage=n,r=n.frames}else{let t=new Map(n.frames.map(e=>[e.id,e]));r=e.hotspots.flatMap(e=>e.interactions).flatMap(({action:e})=>`to`in e?[t.get(e.to)]:[]).filter(e=>e!==void 0)}for(let t of[e,...r]){let n=(t.parts??[]).map(e=>e.layer);for(let r of t===e?n:[...t.layers,...n])new Image().src=this.layerUrl(r)}}playablePages(){return this.index?.pages.filter(e=>e.frames.length>0)??[]}showPoster(e){let t=this.getAttribute(`poster`)??(e?c(Uint8Array.from(atob(e),e=>e.charCodeAt(0))):null);if(!t||this.root.querySelector(`.poster`))return;let n=document.createElement(`img`);n.className=`poster`,n.alt=``,n.src=t,this.viewport.append(n)}fit(){let e=this.viewport.style,t=Number(e.getPropertyValue(`--w`))||1,n=Number(e.getPropertyValue(`--h`))||1,{clientWidth:r,clientHeight:a}=this.viewport,[o,s,c]=[1,0,0];if((this.getAttribute(`fit`)??`contain`)!==`none`){if(document.fullscreenElement===this){let e=i({width:t,height:n},{width:r,height:a});[o,s,c]=[e.a,e.e,e.f]}else o=r/t}e.setProperty(`--scale`,String(o||1)),e.setProperty(`--x`,`${s}px`),e.setProperty(`--y`,`${c}px`)}layerUrl(e){return`${this.base}layers/${e.src}@${this.density}x.${e.format}`}clearTimers(){this.timers.forEach(clearTimeout),this.timers=[]}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}};function M(e,t,n){let{width:r,height:i}=n.frame.bounds;if(e===`manual`){let e=n.origin??{x:0,y:0};return{x:e.x+(n.offset?.x??0),y:e.y+(n.offset?.y??0)}}return{x:e.endsWith(`Left`)?0:e.endsWith(`Right`)?t.width-r:(t.width-r)/2,y:e.startsWith(`top`)?0:e.startsWith(`bottom`)?t.height-i:(t.height-i)/2}}typeof customElements<`u`&&!customElements.get(`folioscope-player`)&&customElements.define(k,j);export{j as FolioscopePlayer,D as Runtime,k as TAG_NAME};