@kadal/deck 0.0.0-stage → 0.1.0

package/dist/react/AutoAnimate.js

@@ -0,0 +1,92 @@
+//#region src/react/AutoAnimate.ts
+const CANDIDATES = "h1, h2, h3, h4, h5, h6, p, li, img, video, iframe, pre, code, blockquote, div, span, svg, table, button, figure, [data-id]";
+function keyOf(el, counts) {
+	const explicit = el.getAttribute("data-id");
+	if (explicit) return `id:${explicit}`;
+	const base = `${el.tagName.toLowerCase()}:${el.getAttribute("src") ?? (el.textContent ?? "").trim().slice(0, 120)}`;
+	const n = counts.get(base) ?? 0;
+	counts.set(base, n + 1);
+	return `${base}#${n}`;
+}
+function candidates(root) {
+	return [...root.querySelectorAll(CANDIDATES)].filter((el) => {
+		if (el.hasAttribute("data-id")) return true;
+		const tag = el.tagName.toLowerCase();
+		if ([
+			"img",
+			"video",
+			"iframe",
+			"svg"
+		].includes(tag)) return true;
+		if (tag === "div" || tag === "span") return false;
+		return (el.textContent ?? "").trim().length > 0;
+	});
+}
+function snapshot(root) {
+	const out = /* @__PURE__ */ new Map();
+	const counts = /* @__PURE__ */ new Map();
+	for (const el of candidates(root)) {
+		const cs = getComputedStyle(el);
+		const key = keyOf(el, counts);
+		out.set(key, {
+			key,
+			rect: el.getBoundingClientRect(),
+			opacity: cs.opacity,
+			color: cs.color,
+			background: cs.backgroundColor,
+			fontSize: cs.fontSize,
+			borderRadius: cs.borderRadius
+		});
+	}
+	return out;
+}
+function animateFrom(prev, root, opts) {
+	const animations = [];
+	const counts = /* @__PURE__ */ new Map();
+	for (const el of candidates(root)) {
+		const key = keyOf(el, counts);
+		const from = prev.get(key);
+		const html = el;
+		const delay = Number(html.dataset.autoAnimateDelay ?? 0) * 1e3;
+		const duration = Number(html.dataset.autoAnimateDuration ?? opts.duration) * 1e3;
+		const easing = html.dataset.autoAnimateEasing ?? opts.easing;
+		if (!from) {
+			if (opts.unmatched) animations.push(el.animate([{ opacity: 0 }, { opacity: 1 }], {
+				duration,
+				delay,
+				easing,
+				fill: "backwards"
+			}));
+			continue;
+		}
+		const to = el.getBoundingClientRect();
+		const cs = getComputedStyle(el);
+		const fromFrame = {
+			transform: `translate(${(from.rect.left - to.left) / opts.scale}px, ${(from.rect.top - to.top) / opts.scale}px) scale(${to.width ? from.rect.width / to.width : 1}, ${to.height ? from.rect.height / to.height : 1})`,
+			transformOrigin: "top left",
+			opacity: from.opacity,
+			color: from.color,
+			backgroundColor: from.background,
+			fontSize: from.fontSize,
+			borderRadius: from.borderRadius
+		};
+		const toFrame = {
+			transform: "none",
+			transformOrigin: "top left",
+			opacity: cs.opacity,
+			color: cs.color,
+			backgroundColor: cs.backgroundColor,
+			fontSize: cs.fontSize,
+			borderRadius: cs.borderRadius
+		};
+		animations.push(el.animate([fromFrame, toFrame], {
+			duration,
+			delay,
+			easing,
+			fill: "backwards"
+		}));
+	}
+	return animations;
+}
+//#endregion
+export { animateFrom, snapshot };

package/dist/react/Backgrounds.d.ts

@@ -0,0 +1,11 @@
+import { SlideBackground } from "../core/model.js";
+import { ComponentType } from "react";
+//#region src/react/Backgrounds.d.ts
+export declare function registerBackground(name: string, component: ComponentType<Record<string, unknown>>): void;
+export declare function backgroundComponent(name: string): ComponentType<Record<string, unknown>> | null;
+export declare function BackgroundLayer({ bg, active, className }: {
+  bg: SlideBackground | null;
+  active: boolean;
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion

package/dist/react/Backgrounds.js

@@ -0,0 +1,154 @@
+import { useDeck } from "./context.js";
+import { useLayout, useNav } from "./hooks.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/Backgrounds.tsx
+/**
+* Backgrounds sit behind the stage and cover exactly its box — a colour, a gradient, an image, a
+* looping video, an iframe, or a registered component (the `backgrounds` module ships aurora,
+* gradient mesh, waves and the rest). On a 16:9 window that is the whole viewport; on any other
+* shape the bars around the stage stay bars, so a slide looks the same on every screen. The
+* current and the leaving background are both rendered during a change so they can cross-fade.
+*/
+const registry = /* @__PURE__ */ new Map();
+function registerBackground(name, component) {
+	registry.set(name, component);
+}
+function backgroundComponent(name) {
+	return registry.get(name) ?? null;
+}
+/**
+* One colour as a soft wash: strongest at the top-left, fading diagonally to a pale tint, with
+* a little extra light in that corner — the same palette, never flat. `color-mix` with
+* transparent scales the colour's own alpha, so any CSS colour works, rgba included.
+*/
+function tintWash(color) {
+	const at = (pct) => `color-mix(in oklab, ${color} ${pct}%, transparent)`;
+	return [`radial-gradient(110% 85% at 10% 0%, ${at(80)} 0%, ${at(0)} 62%)`, `linear-gradient(158deg, ${at(100)} 0%, ${at(64)} 48%, ${at(36)} 100%)`].join(", ");
+}
+function BackgroundLayer({ bg, active, className }) {
+	if (!bg) return /* @__PURE__ */ jsx("div", {
+		className: ["deck-background", className].filter(Boolean).join(" "),
+		"data-active": active || void 0
+	});
+	const style = {};
+	if (bg.color) style.backgroundColor = bg.color;
+	if (bg.tint) style.backgroundImage = tintWash(bg.tint);
+	if (bg.gradient) style.backgroundImage = bg.gradient;
+	if (bg.image) {
+		style.backgroundImage = `url("${bg.image}")`;
+		style.backgroundSize = bg.size;
+		style.backgroundPosition = bg.position;
+		style.backgroundRepeat = bg.repeat;
+	}
+	const Comp = bg.component ? registry.get(bg.component) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["deck-background", className].filter(Boolean).join(" "),
+		"data-active": active || void 0,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "deck-background-fill",
+				style: {
+					...style,
+					opacity: bg.opacity
+				}
+			}),
+			bg.video ? /* @__PURE__ */ jsx("video", {
+				className: "deck-background-video",
+				src: bg.video,
+				autoPlay: active,
+				loop: bg.videoLoop,
+				muted: bg.videoMuted,
+				playsInline: true,
+				style: {
+					objectFit: bg.size === "contain" ? "contain" : "cover",
+					opacity: bg.opacity
+				}
+			}) : null,
+			bg.iframe ? /* @__PURE__ */ jsx("iframe", {
+				className: "deck-background-iframe",
+				src: active ? bg.iframe : void 0,
+				title: "background",
+				style: {
+					pointerEvents: bg.iframeInteractive ? "auto" : "none",
+					opacity: bg.opacity
+				}
+			}) : null,
+			Comp ? /* @__PURE__ */ jsx("div", {
+				className: "deck-background-component",
+				style: { opacity: bg.opacity },
+				children: /* @__PURE__ */ jsx(Comp, {
+					...bg.props,
+					active
+				})
+			}) : bg.component ? /* @__PURE__ */ jsxs("div", {
+				className: "deck-background-missing",
+				children: [
+					"Unknown background “",
+					bg.component,
+					"”"
+				]
+			}) : null
+		]
+	});
+}
+/** The two-layer background stack for the play view, clipped to the stage's box. */
+function Backgrounds() {
+	const deck = useDeck();
+	const layout = useLayout();
+	const { h, v, direction } = useNav((s) => ({
+		h: s.h,
+		v: s.v,
+		direction: s.direction
+	}));
+	const current = deck.options.get(`${h},${v}`)?.background ?? null;
+	const [layers, setLayers] = useState([{
+		key: `${h},${v}`,
+		bg: current,
+		leaving: false
+	}]);
+	const transition = deck.options.get(`${h},${v}`)?.backgroundTransition ?? deck.config.backgroundTransition;
+	useEffect(() => {
+		const key = `${h},${v}`;
+		setLayers((prev) => {
+			const top = prev.find((l) => !l.leaving);
+			if (top?.key === key) return prev;
+			return [...top ? [{
+				...top,
+				leaving: true
+			}] : [], {
+				key,
+				bg: current,
+				leaving: false
+			}];
+		});
+		const t = setTimeout(() => setLayers((prev) => prev.filter((l) => !l.leaving)), transitionMs(deck.config.transitionSpeed));
+		return () => clearTimeout(t);
+	}, [
+		h,
+		v,
+		current,
+		deck.config.transitionSpeed
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-backgrounds",
+		style: {
+			left: layout.left,
+			top: layout.top,
+			width: layout.width,
+			height: layout.height
+		},
+		"data-transition": transition,
+		"data-direction": direction,
+		children: layers.map((l) => /* @__PURE__ */ jsx(BackgroundLayer, {
+			bg: l.bg,
+			active: !l.leaving,
+			className: l.leaving ? "is-leaving" : "is-entering"
+		}, l.key))
+	});
+}
+function transitionMs(speed) {
+	return speed === "fast" ? 300 : speed === "slow" ? 1e3 : 600;
+}
+//#endregion
+export { BackgroundLayer, Backgrounds, backgroundComponent, registerBackground, tintWash, transitionMs };

package/dist/react/ConfettiLayer.js

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/ConfettiLayer.tsx
+/**
+* A burst of confetti on a canvas, shared by the `<Confetti>` slide component and the layers
+* that answer the presenter's Confetti button (the play stage, the presenter's current-slide
+* card, the audience mirror). Returns a stop function.
+*/
+function burstConfetti(c, { count = 140, duration = 2200 } = {}) {
+	const ctx = c.getContext("2d");
+	if (!ctx) return () => {};
+	const W = c.width = c.offsetWidth || c.clientWidth || 1;
+	const H = c.height = c.offsetHeight || c.clientHeight || 1;
+	const colors = [
+		"#f43f5e",
+		"#f59e0b",
+		"#10b981",
+		"#3b82f6",
+		"#8b5cf6",
+		"#ec4899"
+	];
+	const parts = Array.from({ length: count }, () => ({
+		x: W / 2 + (Math.random() - .5) * W * .3,
+		y: H * .4,
+		vx: (Math.random() - .5) * 18,
+		vy: -Math.random() * 18 - 6,
+		r: Math.random() * 6 + 3,
+		c: colors[Math.floor(Math.random() * colors.length)],
+		a: Math.random() * Math.PI,
+		s: (Math.random() - .5) * .3
+	}));
+	const start = performance.now();
+	let raf = 0;
+	const tick = (t) => {
+		const p = (t - start) / duration;
+		ctx.clearRect(0, 0, W, H);
+		for (const q of parts) {
+			q.x += q.vx;
+			q.y += q.vy;
+			q.vy += .5;
+			q.vx *= .99;
+			q.a += q.s;
+			ctx.save();
+			ctx.globalAlpha = Math.max(0, 1 - p);
+			ctx.translate(q.x, q.y);
+			ctx.rotate(q.a);
+			ctx.fillStyle = q.c;
+			ctx.fillRect(-q.r / 2, -q.r, q.r, q.r * 2);
+			ctx.restore();
+		}
+		if (p < 1) raf = requestAnimationFrame(tick);
+		else ctx.clearRect(0, 0, W, H);
+	};
+	raf = requestAnimationFrame(tick);
+	return () => {
+		cancelAnimationFrame(raf);
+		ctx.clearRect(0, 0, W, H);
+	};
+}
+/**
+* Listens for `deck:confetti` (the presenter's button, relayed by the room) and bursts over
+* whatever it is mounted in: the viewport (play view) or a scaled stage canvas (`inCanvas`).
+*/
+function ConfettiLayer({ inCanvas = false } = {}) {
+	const canvas = useRef(null);
+	useEffect(() => {
+		let stop = null;
+		const fire = () => {
+			stop?.();
+			if (canvas.current) stop = burstConfetti(canvas.current, { count: 180 });
+		};
+		window.addEventListener("deck:confetti", fire);
+		return () => {
+			window.removeEventListener("deck:confetti", fire);
+			stop?.();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvas,
+		className: ["deck-confetti-layer", inCanvas ? "in-canvas" : ""].filter(Boolean).join(" "),
+		"aria-hidden": true
+	});
+}
+//#endregion
+export { ConfettiLayer, burstConfetti };

package/dist/react/Deck.d.ts

@@ -0,0 +1,35 @@
+import { Frontmatter } from "../compiler/split.js";
+import { DeckConfigInput, DeckManifest } from "../core/model.js";
+import { ViewMode } from "./context.js";
+import { ComponentType, ReactNode } from "react";
+//#region src/react/Deck.d.ts
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * <Deck>
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * The whole runtime, from the manifest the Vite plugin emits. It owns the navigation store and
+ * every side effect the browser needs — the hash, the keyboard, touch, resizing, the wake lock,
+ * the idle cursor, auto-slide, fullscreen — and decides which page to show from the URL:
+ *
+ *   /<slug>/               the deck            (?view=scroll, ?print-pdf, #/h/v/click)
+ *   /<slug>/presenter      the presenter view  (notes, timer, next slide, drawing, the room)
+ *   /<slug>/join           the audience page   (follow along, react, ask, vote)
+ *   /<slug>/notes          every note on one page
+ *   /<slug>/stats          the deck's numbers
+ *
+ * Extra pages plug in through `pages` so the presenter, audience and stats modules stay optional
+ * imports; a deck that never goes live ships without them.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+export interface DeckProps {
+  manifest: DeckManifest;
+  config?: DeckConfigInput | Frontmatter;
+  components?: Record<string, ComponentType<Record<string, unknown>>>;
+  /** Route → page component, for the presenter/audience/notes/stats pages. */
+  pages?: Partial<Record<Exclude<ViewMode, "play" | "print">, ComponentType>>;
+  /** Wraps the runtime (the live provider, a theme provider). */
+  children?: ReactNode;
+}
+export declare function Deck({ manifest, config: configIn, components, pages, children }: DeckProps): import("react").JSX.Element;
+//#endregion