@kadal/deck 0.0.0-stage → 0.1.0

package/dist/react/Frame.d.ts

@@ -0,0 +1,16 @@
+//#region src/react/Frame.d.ts
+export declare function FrameShell({ url, className, preload, title, poster, posterSize, scale }: {
+  url: string;
+  className?: string;
+  preload?: boolean;
+  title?: string;
+  poster?: string;
+  /** The pane's size in stage pixels, which names the captured poster. */
+  posterSize?: readonly [number, number];
+  /**
+   * Render the page at 1/scale of the pane and shrink it to fit: 0.5 shows a small pane the
+   * desktop layout it would get at twice the size.
+   */
+  scale?: number;
+}): import("react").JSX.Element;
+//#endregion

package/dist/react/Frame.js

@@ -0,0 +1,174 @@
+import { useDeck, useSlideOptional } from "./context.js";
+import { POSTER_DEFAULT_SIZE, posterName, resolvePoster } from "../core/poster.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/Frame.tsx
+/**
+* An embedded page inside a slide, with manners: it loads when its slide is shown (data-src),
+* unloads when the slide is left, and sits behind a shield until you mean to interact — one
+* click, or the F-hint on it — so wheel and arrow keys keep driving the deck until then. While
+* it has the keyboard a "Done" button hands control back; leaving the slide does the same.
+*
+* Until the page has loaded — and wherever it never will (print, overview, the next-slide box,
+* the scroll view) — a poster stands in: the one the deck names, else the screenshot `deck
+* export` captured for this URL at this pane's size, else a card with the address.
+*
+* And it can always be loaded again, which it could not before. The loader in `SlideFrame` gives
+* an iframe its `src` once — often from the prefetch, a slide ahead of arriving — and then skips
+* any frame whose `src` already matches, so a page that failed up there stayed failed for the rest
+* of the talk. Worse, a browser's own error page fires `load` like any other document, so nothing
+* in here could tell a dead frame from a live one. Hence a Reload control that is always one click
+* away, and a timeout for the page that never finishes at all.
+*/
+const preconnected = /* @__PURE__ */ new Set();
+function FrameShell({ url, className, preload = false, title, poster, posterSize, scale }) {
+	const deck = useDeck();
+	const [live, setLive] = useState(false);
+	const [loaded, setLoaded] = useState(false);
+	const [posterState, setPosterState] = useState("pending");
+	const [attempt, setAttempt] = useState(0);
+	/** Bumped to throw the iframe element away and start again with a clean one. */
+	const [nonce, setNonce] = useState(0);
+	const ref = useRef(null);
+	const slide = useSlideOptional();
+	const active = slide?.active ?? true;
+	const preview = slide?.preview ?? false;
+	const [w, h] = posterSize ?? POSTER_DEFAULT_SIZE;
+	const posterSrc = resolvePoster(poster ?? posterName(url, w, h), deck.base);
+	const zoom = scale && scale > 0 && scale !== 1 ? scale : 1;
+	useEffect(() => {
+		try {
+			const origin = new URL(url, window.location.href).origin;
+			if (origin === window.location.origin || preconnected.has(origin)) return;
+			preconnected.add(origin);
+			const link = document.createElement("link");
+			link.rel = "preconnect";
+			link.href = origin;
+			link.crossOrigin = "anonymous";
+			document.head.appendChild(link);
+		} catch {}
+	}, [url]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const on = () => setLive(true);
+		el.addEventListener("deck:interact", on);
+		return () => el.removeEventListener("deck:interact", on);
+	}, []);
+	useEffect(() => {
+		if (!active) {
+			setLive(false);
+			setLoaded(false);
+			setAttempt(0);
+		}
+	}, [active]);
+	/**
+	* Load the page again, properly.
+	*
+	* Dropping `src` and putting the same address back does NOT reload a frame: removing the
+	* attribute leaves the document where it is, and assigning an address a frame already has is
+	* not a navigation — measured, it makes no request at all, which is why pressing Reload looked
+	* like pressing nothing. Two things are needed, and both are cheap:
+	*
+	*   · a new element, so there is no document to keep and no address to match, and
+	*   · a different address, so nothing cached — least of all a cached failure — can be handed
+	*     back instead of a fresh load.
+	*/
+	const reload = useCallback(() => {
+		setLoaded(false);
+		setAttempt((n) => n + 1);
+		setNonce((n) => n + 1);
+	}, []);
+	useEffect(() => {
+		if (!nonce) return;
+		const el = ref.current;
+		if (!el) return;
+		el.setAttribute("src", `${url}${url.includes("?") ? "&" : "?"}deck-reload=${Date.now()}`);
+	}, [nonce, url]);
+	useEffect(() => {
+		if (preview || !active || loaded || attempt >= 2) return;
+		const id = setTimeout(reload, 12e3);
+		return () => clearTimeout(id);
+	}, [
+		preview,
+		active,
+		loaded,
+		attempt,
+		reload
+	]);
+	const touch = typeof window !== "undefined" && window.matchMedia?.("(pointer: coarse)").matches;
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"deck-frame",
+			live ? "is-live" : "",
+			loaded ? "is-loaded" : "",
+			preview ? "is-preview" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("iframe", {
+				ref,
+				"data-src": url,
+				"data-preload": preload ? "" : void 0,
+				title: title ?? url,
+				allow: "fullscreen; geolocation; clipboard-write; autoplay",
+				style: zoom !== 1 ? {
+					width: `${100 / zoom}%`,
+					height: `${100 / zoom}%`,
+					maxWidth: "none",
+					maxHeight: "none",
+					transform: `scale(${zoom})`,
+					transformOrigin: "0 0"
+				} : void 0,
+				onLoad: (e) => {
+					if (e.currentTarget.getAttribute("src")) setLoaded(true);
+				}
+			}, nonce),
+			!loaded && posterState !== "missing" ? /* @__PURE__ */ jsx("img", {
+				className: "deck-frame-poster",
+				src: posterSrc,
+				alt: "",
+				"aria-hidden": true,
+				onLoad: () => setPosterState("ok"),
+				onError: () => setPosterState("missing")
+			}) : null,
+			!loaded && posterState === "missing" ? /* @__PURE__ */ jsx("div", {
+				className: "deck-frame-placeholder",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx("span", { children: url })
+			}) : null,
+			preview ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "deck-frame-reload",
+				"data-hint": "reload",
+				title: "Load this page again",
+				onClick: (event) => {
+					event.stopPropagation();
+					reload();
+				},
+				children: "Reload"
+			}),
+			preview ? null : live ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "deck-frame-done",
+				onClick: () => {
+					setLive(false);
+					document.activeElement?.blur?.();
+					window.focus();
+				},
+				children: "Done · back to the slides"
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "deck-frame-shield",
+				"data-hint": "interact",
+				onClick: () => {
+					setLive(true);
+					setTimeout(() => ref.current?.focus(), 0);
+				},
+				children: /* @__PURE__ */ jsx("span", { children: touch ? "Tap to interact" : "Click to interact · F to focus with the keyboard" })
+			})
+		]
+	});
+}
+//#endregion
+export { FrameShell };

package/dist/react/Hints.d.ts

@@ -0,0 +1,3 @@
+//#region src/react/Hints.d.ts
+export declare function HintLayer(): import("react").ReactPortal | null;
+//#endregion

package/dist/react/Hints.js

@@ -0,0 +1,201 @@
+import { useDeck } from "./context.js";
+import { useActions, useUi } from "./hooks.js";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/Hints.tsx
+/**
+* ─────────────────────────────────────────────────────────────────────────────
+* HINTS  —  vim's `f`: label every clickable thing, type the label to use it
+* ─────────────────────────────────────────────────────────────────────────────
+*
+* Press F and every link, button, embedded page, image preview and input on the current slide
+* (plus the deck's own controls) gets a short home-row label. Type it and the target is used:
+* links open (external ones in a new tab), buttons click, an embedded page takes the keyboard,
+* an image opens in the lightbox. Escape or F again leaves. Labels are one letter when there
+* are few targets and two when there are many, as in Vimium.
+* ─────────────────────────────────────────────────────────────────────────────
+*/
+const SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"[role='button']",
+	"iframe",
+	"input:not([type='hidden']):not([disabled])",
+	"select",
+	"textarea",
+	"summary",
+	"video[controls]",
+	"audio[controls]",
+	"[data-hint]",
+	".deck-image[data-preview]"
+].join(",");
+const LETTERS = "asdfghjkl";
+function labelsFor(n) {
+	if (n <= 9) return [...LETTERS].slice(0, n);
+	const out = [];
+	for (const a of LETTERS) for (const b of LETTERS) out.push(a + b);
+	return out.slice(0, n);
+}
+function kindOf(el) {
+	const tag = el.tagName;
+	if (tag === "A") return "link";
+	if (tag === "IFRAME") return "iframe";
+	if (tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA") return "input";
+	if (tag === "BUTTON" || el.getAttribute("role") === "button") return "button";
+	return "other";
+}
+function visible(el) {
+	const r = el.getBoundingClientRect();
+	if (r.width < 4 || r.height < 4) return false;
+	if (r.bottom < 0 || r.right < 0 || r.top > window.innerHeight || r.left > window.innerWidth) return false;
+	const cs = getComputedStyle(el);
+	if (cs.visibility === "hidden" || cs.display === "none") return false;
+	return cs.opacity !== "0" || el.hasAttribute("data-hint");
+}
+function HintLayer() {
+	const deck = useDeck();
+	const on = useUi((s) => s.hints);
+	const actions = useActions();
+	const [targets, setTargets] = useState([]);
+	const [typed, setTyped] = useState("");
+	const collect = useCallback(() => {
+		const roots = [];
+		const slide = document.querySelector(".deck-slide.is-present");
+		if (slide) roots.push(slide);
+		for (const extra of document.querySelectorAll(".deck-controls, .deck-theme-menu, .deck-audience, .deck-presenter-tools, .deck-room-panel")) roots.push(extra);
+		const seen = /* @__PURE__ */ new Set();
+		const els = [];
+		for (const root of roots) for (const el of root.querySelectorAll(SELECTOR)) {
+			if (seen.has(el) || !visible(el) || el.closest(".deck-hints")) continue;
+			if (el.tagName !== "A" && el.closest("a[href]")) continue;
+			if (el.tagName === "IFRAME" && el.closest(".deck-frame:not(.is-live)")) continue;
+			seen.add(el);
+			els.push(el);
+		}
+		els.sort((a, b) => {
+			const ra = a.getBoundingClientRect();
+			const rb = b.getBoundingClientRect();
+			return ra.top - rb.top || ra.left - rb.left;
+		});
+		const labels = labelsFor(els.length);
+		setTargets(els.map((el, i) => ({
+			el,
+			label: labels[i],
+			rect: el.getBoundingClientRect(),
+			kind: kindOf(el)
+		})));
+	}, []);
+	useEffect(() => {
+		if (!on) {
+			setTargets([]);
+			setTyped("");
+			return;
+		}
+		collect();
+		const again = () => collect();
+		window.addEventListener("resize", again);
+		window.addEventListener("scroll", again, true);
+		const unsub = deck.nav.subscribe(again);
+		return () => {
+			window.removeEventListener("resize", again);
+			window.removeEventListener("scroll", again, true);
+			unsub();
+		};
+	}, [
+		on,
+		collect,
+		deck.nav
+	]);
+	const activate = useCallback((t) => {
+		actions.toggleHints(false);
+		const el = t.el;
+		if (t.kind === "iframe") {
+			el.dispatchEvent(new CustomEvent("deck:interact", { bubbles: true }));
+			el.focus();
+			return;
+		}
+		if (t.kind === "link") {
+			const a = el;
+			if (a.target === "_blank" || a.origin && a.origin !== window.location.origin) window.open(a.href, "_blank", "noopener");
+			else a.click();
+			return;
+		}
+		if (t.kind === "input") {
+			el.focus();
+			return;
+		}
+		el.click();
+	}, [actions]);
+	useEffect(() => {
+		if (!on) return;
+		const onKey = (e) => {
+			if (e.metaKey || e.ctrlKey || e.altKey) return;
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopPropagation();
+				actions.toggleHints(false);
+				return;
+			}
+			if (e.key === "Backspace") {
+				e.preventDefault();
+				e.stopPropagation();
+				setTyped((t) => t.slice(0, -1));
+				return;
+			}
+			if (e.key.length !== 1) return;
+			const key = e.key.toLowerCase();
+			if (!LETTERS.includes(key)) {
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
+			e.preventDefault();
+			e.stopPropagation();
+			setTyped((prev) => {
+				const next = prev + key;
+				const hit = targets.find((t) => t.label === next);
+				if (hit) {
+					queueMicrotask(() => activate(hit));
+					return "";
+				}
+				return targets.some((t) => t.label.startsWith(next)) ? next : "";
+			});
+		};
+		window.addEventListener("keydown", onKey, true);
+		return () => window.removeEventListener("keydown", onKey, true);
+	}, [
+		on,
+		targets,
+		activate,
+		actions
+	]);
+	if (!on || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "deck-hints",
+		"aria-live": "polite",
+		children: [targets.map((t) => {
+			const match = typed && t.label.startsWith(typed);
+			const dim = typed && !match;
+			return /* @__PURE__ */ jsx("span", {
+				className: [
+					"deck-hint",
+					`kind-${t.kind}`,
+					match ? "is-match" : "",
+					dim ? "is-dim" : ""
+				].filter(Boolean).join(" "),
+				style: {
+					left: Math.max(2, t.rect.left),
+					top: Math.max(2, t.rect.top - 10)
+				},
+				onClick: () => activate(t),
+				children: match ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("b", { children: typed }), t.label.slice(typed.length)] }) : t.label
+			}, t.label);
+		}), targets.length === 0 ? /* @__PURE__ */ jsx("span", {
+			className: "deck-hint-empty",
+			children: "Nothing to focus on this slide"
+		}) : null]
+	}), document.body);
+}
+//#endregion
+export { HintLayer };

package/dist/react/Lightbox.js

@@ -0,0 +1,54 @@
+import { useActions, useUi } from "./hooks.js";
+import { Suspense, lazy } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/Lightbox.tsx
+const SketchCanvas = lazy(() => import("../sketch/Canvas.js"));
+/** A full-screen overlay for an image, a video or a web page (reveal.js 5.2's lightbox). */
+function Lightbox() {
+	const box = useUi((s) => s.lightbox);
+	const actions = useActions();
+	if (!box) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-lightbox",
+		role: "dialog",
+		"aria-label": "Preview",
+		onClick: actions.closeLightbox,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "deck-lightbox-close",
+			"aria-label": "Close",
+			onClick: actions.closeLightbox,
+			children: "×"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "deck-lightbox-media",
+			"data-fit": box.fit,
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				box.kind === "image" ? /* @__PURE__ */ jsx("img", {
+					src: box.src,
+					alt: ""
+				}) : null,
+				box.kind === "video" ? /* @__PURE__ */ jsx("video", {
+					src: box.src,
+					controls: true,
+					autoPlay: true,
+					playsInline: true
+				}) : null,
+				box.kind === "iframe" ? /* @__PURE__ */ jsx("iframe", {
+					src: box.src,
+					title: "Preview",
+					allow: "fullscreen; autoplay"
+				}) : null,
+				box.kind === "sketch" ? /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx("div", {
+						className: "deck-sketch-loading",
+						children: "Opening the canvas…"
+					}),
+					children: /* @__PURE__ */ jsx(SketchCanvas, { id: box.src })
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { Lightbox };

package/dist/react/Overview.js

@@ -0,0 +1,93 @@
+import { key } from "../core/navigation.js";
+import { useDeck } from "./context.js";
+import { useActions, useNav } from "./hooks.js";
+import { SlideFrame } from "./SlideFrame.js";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/Overview.tsx
+/**
+* The overview: every column as a row of its stack, each slide live and scaled down, the current
+* one ringed. Click a tile to go there; Esc or O leaves. Slides render in preview mode so nothing
+* plays until it is chosen.
+*/
+function Overview() {
+	const deck = useDeck();
+	const { overview, h, v } = useNav((s) => ({
+		overview: s.overview,
+		h: s.h,
+		v: s.v
+	}));
+	const actions = useActions();
+	useEffect(() => {
+		if (!overview) return;
+		document.querySelector(".deck-overview .is-current")?.scrollIntoView({
+			block: "center",
+			inline: "center"
+		});
+	}, [
+		overview,
+		h,
+		v
+	]);
+	if (!overview) return null;
+	const tileW = 320;
+	const scale = tileW / deck.config.width;
+	const tileH = deck.config.height * scale;
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-overview",
+		role: "dialog",
+		"aria-label": "Slide overview",
+		onClick: () => actions.toggleOverview(false),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "deck-overview-grid",
+			onClick: (e) => e.stopPropagation(),
+			children: deck.columns.map((col) => /* @__PURE__ */ jsx("div", {
+				className: "deck-overview-column",
+				children: col.slides.map((meta, cv) => {
+					const options = deck.options.get(key(col.h, cv));
+					const isCurrent = col.h === h && cv === v;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: ["deck-overview-tile", isCurrent ? "is-current" : ""].join(" "),
+						style: {
+							width: tileW,
+							height: tileH
+						},
+						onClick: () => {
+							actions.goto(col.h, cv);
+							actions.toggleOverview(false);
+						},
+						"aria-label": meta.title ?? `Slide ${col.h + 1}.${cv + 1}`,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "deck-overview-canvas",
+							style: {
+								width: deck.config.width,
+								height: deck.config.height,
+								transform: `scale(${scale})`
+							},
+							children: /* @__PURE__ */ jsx(SlideFrame, {
+								meta,
+								options,
+								h: col.h,
+								v: cv,
+								active: false,
+								click: 0,
+								preview: true,
+								className: "is-tile"
+							})
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "deck-overview-label",
+							children: [
+								col.h + 1,
+								cv ? `.${cv + 1}` : "",
+								meta.title ? ` · ${meta.title}` : ""
+							]
+						})]
+					}, `${col.h},${cv}`);
+				})
+			}, col.h))
+		})
+	});
+}
+//#endregion
+export { Overview };

package/dist/react/PrintView.js

@@ -0,0 +1,128 @@
+import { key } from "../core/navigation.js";
+import { useDeck } from "./context.js";
+import { BackgroundLayer } from "./Backgrounds.js";
+import { SlideFrame, loadSlide } from "./SlideFrame.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/PrintView.tsx
+/**
+* `?print-pdf`: every slide laid out as a page at the authored size, one page per click step when
+* `pdfSeparateFragments` is on, notes printed in a box or on a separate page when `showNotes` is
+* set. Print to PDF from the browser, or let `deck export` drive a headless Chromium over it.
+*/
+function PrintView() {
+	const deck = useDeck();
+	const [ready, setReady] = useState(false);
+	const [totals, setTotals] = useState({});
+	const [zoom, setZoom] = useState(1);
+	useEffect(() => {
+		const fit = () => setZoom(Math.min(1, (window.innerWidth - 32) / deck.config.width));
+		fit();
+		window.addEventListener("resize", fit);
+		return () => window.removeEventListener("resize", fit);
+	}, [deck.config.width]);
+	const flat = deck.columns.flatMap((c) => c.slides.map((meta, v) => ({
+		meta,
+		h: c.h,
+		v
+	})));
+	useEffect(() => {
+		let alive = true;
+		const grace = setTimeout(() => alive && setReady(true), 15e3);
+		Promise.allSettled(flat.map((s) => loadSlide(s.meta))).then(() => {
+			if (!alive) return;
+			clearTimeout(grace);
+			setTimeout(() => alive && setReady(true), 300);
+		});
+		return () => {
+			alive = false;
+			clearTimeout(grace);
+		};
+	}, [flat.length]);
+	useEffect(() => deck.nav.subscribe((s) => setTotals(s.totals)), [deck.nav]);
+	useEffect(() => {
+		document.documentElement.classList.add("deck-print");
+		const style = document.createElement("style");
+		style.textContent = `@page { size: ${deck.config.width}px ${deck.config.height}px; margin: 0; }`;
+		document.head.appendChild(style);
+		return () => {
+			document.documentElement.classList.remove("deck-print");
+			style.remove();
+		};
+	}, [deck.config.width, deck.config.height]);
+	const pages = [];
+	for (const s of flat) {
+		const k = key(s.h, s.v);
+		const total = Math.min(totals[k] ?? 0, deck.config.pdfSeparateFragments ? Number.POSITIVE_INFINITY : 0);
+		const steps = deck.config.pdfSeparateFragments ? total + 1 : 1;
+		for (let c = 0; c < steps; c++) pages.push({
+			key: `${k}:${c}`,
+			h: s.h,
+			v: s.v,
+			click: deck.config.pdfSeparateFragments ? c : totals[k] ?? 0
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-print-pages",
+		"data-ready": ready || void 0,
+		style: {
+			width: deck.config.width,
+			zoom
+		},
+		children: [pages.map((p) => {
+			const meta = deck.columns[p.h].slides[p.v];
+			const options = deck.options.get(key(p.h, p.v));
+			return /* @__PURE__ */ jsxs("div", {
+				className: "deck-print-page",
+				style: {
+					width: deck.config.width,
+					height: deck.config.height
+				},
+				children: [
+					/* @__PURE__ */ jsx(BackgroundLayer, {
+						bg: options.background,
+						active: false
+					}),
+					/* @__PURE__ */ jsx(SlideFrame, {
+						meta,
+						options,
+						h: p.h,
+						v: p.v,
+						active: false,
+						click: p.click,
+						preview: true,
+						className: "is-print"
+					}),
+					deck.config.showNotes === true && meta.hasNotes ? /* @__PURE__ */ jsx(PrintNotes, { meta }) : null
+				]
+			}, p.key);
+		}), deck.config.showNotes === "separate-page" ? pages.filter((p) => p.click === 0 && deck.columns[p.h].slides[p.v].hasNotes).map((p) => /* @__PURE__ */ jsx("div", {
+			className: "deck-print-page deck-print-notes-page",
+			style: {
+				width: deck.config.width,
+				height: deck.config.height
+			},
+			children: /* @__PURE__ */ jsx(PrintNotes, {
+				meta: deck.columns[p.h].slides[p.v],
+				full: true
+			})
+		}, `notes:${p.key}`)) : null]
+	});
+}
+function PrintNotes({ meta, full = false }) {
+	const [Notes, setNotes] = useState(null);
+	useEffect(() => {
+		let alive = true;
+		meta.loadNotes?.().then((m) => alive && setNotes(() => m.default));
+		return () => {
+			alive = false;
+		};
+	}, [meta]);
+	if (!Notes) return null;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: ["deck-print-notes", full ? "is-full" : ""].join(" "),
+		children: [full && meta.title ? /* @__PURE__ */ jsx("h3", { children: meta.title }) : null, /* @__PURE__ */ jsx(Notes, {})]
+	});
+}
+//#endregion
+export { PrintView };