@kadal/deck 0.0.0-stage → 0.1.0

package/dist/components/index.js

@@ -0,0 +1,88 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { After, Click, Clicks, Fragment, Li, Ol, Ul } from "./Click.js";
+import { Code, MagicMove } from "./Code.js";
+import { Absolute, Anchor, Arrow, Audio, Badge, Callout, Center, Col, Cols, Confetti, Counter, Encrypted, FitText, Frame, Grid, Iframe, Image, Kbd, Link, Mark, Mermaid, Notes, Qr, Spacer, Stack, Stretch, Tex, Timer, Toc, Transform, Tweet, Typewriter, Video, Youtube } from "./content.js";
+import { Motion } from "./Motion.js";
+import { Blob, Chip, Divider, Glass, Glow, GradientText, Halo, Icon, Ribbon, Shimmer, Tilt } from "./bling.js";
+import { Term, TermReadout, Terms } from "./Term.js";
+import { Sketch } from "./Sketch.js";
+import { Background } from "./Background.js";
+import { Leaderboard, Pace, Poll, Presence, QrJoin, Questions, Quiz, Reactions, WordCloud } from "../live/components.js";
+//#region src/components/index.ts
+var components_exports = /* @__PURE__ */ __exportAll({
+	Absolute: () => Absolute,
+	After: () => After,
+	Anchor: () => Anchor,
+	Arrow: () => Arrow,
+	Audio: () => Audio,
+	Background: () => Background,
+	Badge: () => Badge,
+	Blob: () => Blob,
+	Callout: () => Callout,
+	Center: () => Center,
+	Chip: () => Chip,
+	Click: () => Click,
+	Clicks: () => Clicks,
+	Code: () => Code,
+	Col: () => Col,
+	Cols: () => Cols,
+	Confetti: () => Confetti,
+	Counter: () => Counter,
+	Divider: () => Divider,
+	Encrypted: () => Encrypted,
+	FitText: () => FitText,
+	Fragment: () => Fragment,
+	Frame: () => Frame,
+	Glass: () => Glass,
+	Glow: () => Glow,
+	GradientText: () => GradientText,
+	Grid: () => Grid,
+	Halo: () => Halo,
+	Icon: () => Icon,
+	Iframe: () => Iframe,
+	Image: () => Image,
+	Kbd: () => Kbd,
+	Leaderboard: () => Leaderboard,
+	Li: () => Li,
+	Link: () => Link,
+	MagicMove: () => MagicMove,
+	Mark: () => Mark,
+	Math: () => Tex,
+	Mermaid: () => Mermaid,
+	Motion: () => Motion,
+	Notes: () => Notes,
+	Ol: () => Ol,
+	Pace: () => Pace,
+	Poll: () => Poll,
+	Presence: () => Presence,
+	Qr: () => Qr,
+	QrJoin: () => QrJoin,
+	Questions: () => Questions,
+	Quiz: () => Quiz,
+	Reactions: () => Reactions,
+	Ribbon: () => Ribbon,
+	Shimmer: () => Shimmer,
+	Sketch: () => Sketch,
+	Spacer: () => Spacer,
+	Stack: () => Stack,
+	Stretch: () => Stretch,
+	Term: () => Term,
+	TermReadout: () => TermReadout,
+	Terms: () => Terms,
+	Tex: () => Tex,
+	Tilt: () => Tilt,
+	Timer: () => Timer,
+	Toc: () => Toc,
+	Transform: () => Transform,
+	Tweet: () => Tweet,
+	Typewriter: () => Typewriter,
+	Ul: () => Ul,
+	Video: () => Video,
+	WordCloud: () => WordCloud,
+	Youtube: () => Youtube,
+	li: () => Li,
+	ol: () => Ol,
+	ul: () => Ul
+});
+//#endregion
+export { Absolute, After, Anchor, Arrow, Audio, Background, Badge, Blob, Callout, Center, Chip, Click, Clicks, Code, Col, Cols, Confetti, Counter, Divider, Encrypted, FitText, Fragment, Frame, Glass, Glow, GradientText, Grid, Halo, Icon, Iframe, Image, Kbd, Leaderboard, Li, Link, MagicMove, Mark, Tex as Math, Mermaid, Motion, Notes, Ol, Pace, Poll, Presence, Qr, QrJoin, Questions, Quiz, Reactions, Ribbon, Shimmer, Sketch, Spacer, Stack, Stretch, Term, TermReadout, Terms, Tex, Tilt, Timer, Toc, Transform, Tweet, Typewriter, Ul, Video, WordCloud, Youtube, components_exports, Li as li, Ol as ol, Ul as ul };

package/dist/core/clicks.d.ts

@@ -0,0 +1,45 @@
+//#region src/core/clicks.d.ts
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * CLICKS
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * A click is the unit of animation inside a slide: reveal.js calls the elements fragments, Slidev
+ * calls the steps clicks. Elements register with the slide's registry when they render, in
+ * document order, and get an absolute step; the slide's total is the largest step anyone asked
+ * for. Registration happens during render (not in an effect) so the order is the document order
+ * and the total is known before the slide is shown.
+ *
+ *   at: undefined       relative — one after the previous element's step (the common case)
+ *   at: "+2"            relative by more; "+0" shares the previous element's step
+ *   at: 3               absolute; 0 means "always shown" and reserves nothing
+ *   at: [2, 5]          visible from step 2 through 4, hidden again at 5
+ *   hide: true          the element starts visible and hides at its step
+ *   span: 3             reserve three consecutive steps (a code block with three highlights)
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+export type ClickAt = number | string | [number, number] | undefined;
+export interface ClickSpec {
+  at?: ClickAt;
+  hide?: boolean;
+  span?: number;
+}
+export interface ClickRange {
+  /** The step at which the element becomes (or, for `hide`, stops being) visible. */
+  start: number;
+  /** Exclusive end: the step from which it is hidden again; Infinity for "stays". */
+  end: number;
+  hide: boolean;
+  /** The largest step this element needs: what the slide's total must reach. */
+  last: number;
+}
+export interface ClickRegistry {
+  /** Allocate (or re-read) the range for an element with a stable id. */
+  allocate(id: string, spec: ClickSpec): ClickRange;
+  release(id: string): void;
+  /** The largest step anyone needs: the slide's click total. */
+  total(): number;
+  /** Ask to be told when the total changes. */
+  onChange(listener: (total: number) => void): () => void;
+}
+//#endregion

package/dist/core/clicks.js

@@ -0,0 +1,75 @@
+//#region src/core/clicks.ts
+function createClickRegistry(base = 0) {
+	const ranges = /* @__PURE__ */ new Map();
+	const active = /* @__PURE__ */ new Set();
+	const listeners = /* @__PURE__ */ new Set();
+	let cursor = base;
+	let lastTotal = -1;
+	const total = () => {
+		let max = base;
+		for (const [id, r] of ranges) if (active.has(id)) max = Math.max(max, r.last);
+		return max;
+	};
+	const notify = () => {
+		const t = total();
+		if (t === lastTotal) return;
+		lastTotal = t;
+		for (const l of listeners) l(t);
+	};
+	return {
+		allocate(id, spec) {
+			const existing = ranges.get(id);
+			if (existing) {
+				if (!active.has(id)) {
+					active.add(id);
+					queueMicrotask(notify);
+				}
+				return existing;
+			}
+			let start;
+			let end = Number.POSITIVE_INFINITY;
+			const at = spec.at;
+			if (Array.isArray(at)) {
+				start = at[0];
+				end = at[1];
+			} else if (typeof at === "number") start = at;
+			else if (typeof at === "string" && /^[+-]\d+$/.test(at)) start = cursor + Number(at);
+			else if (typeof at === "string" && /^\d+$/.test(at)) start = Number(at);
+			else start = cursor + 1;
+			const span = Math.max(1, spec.span ?? 1);
+			const last = Number.isFinite(end) ? end : start + span - 1;
+			const range = {
+				start,
+				end,
+				hide: !!spec.hide,
+				last
+			};
+			ranges.set(id, range);
+			active.add(id);
+			cursor = Math.max(cursor, last);
+			queueMicrotask(notify);
+			return range;
+		},
+		release(id) {
+			if (active.delete(id)) queueMicrotask(notify);
+		},
+		total,
+		onChange(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+/** Is an element with this range shown at the current click? */
+function isShown(range, click) {
+	if (range.hide) return click < range.start;
+	return click >= range.start && click < range.end;
+}
+/** Is this the element's own step (the one just reached), for `current-fragment` styling? */
+function isCurrent(range, click) {
+	return click === range.start;
+}
+//#endregion
+export { createClickRegistry, isCurrent, isShown };

package/dist/core/hash.d.ts

@@ -0,0 +1,33 @@
+import { Column } from "./model.js";
+import { Position } from "./navigation.js";
+//#region src/core/hash.d.ts
+/**
+ * The URL hash as reveal.js writes it — `#/h`, `#/h/v`, `#/h/v/click` — or `#/slide-id`, plus the
+ * query flags every deck understands: `?print-pdf`, `?view=scroll`, `?presenter`.
+ */
+export declare function parseHash(hash: string, columns: Column[], oneBased?: boolean): Partial<Position> | null;
+export declare function formatHash(p: Position, opts?: {
+  oneBased?: boolean;
+  withClick?: boolean;
+  id?: string | null;
+}): string;
+export interface Flags {
+  print: boolean;
+  view: "slide" | "scroll" | null;
+  presenter: boolean;
+  embedded: boolean;
+  /**
+   * `?at` — this link is deliberately ABOUT its slide: a share link, the phone's "Open full". A
+   * hash alone cannot say that, because the deck writes the hash as the viewer navigates, so the
+   * address of a bookmark taken mid-talk looks exactly like a link someone chose to send.
+   */
+  at: boolean;
+  /**
+   * `?projector` — a window that exists to be LOOKED at: a second screen, or the window you share
+   * on a call. It renders the deck exactly as the deck page does, follows the presenter and cannot
+   * be made to stop, and takes no navigation input of its own.
+   */
+  projector: boolean;
+}
+export declare function parseFlags(search: string): Flags;
+//#endregion

package/dist/core/hash.js

@@ -0,0 +1,49 @@
+import { findById } from "./model.js";
+//#region src/core/hash.ts
+/**
+* The URL hash as reveal.js writes it — `#/h`, `#/h/v`, `#/h/v/click` — or `#/slide-id`, plus the
+* query flags every deck understands: `?print-pdf`, `?view=scroll`, `?presenter`.
+*/
+function parseHash(hash, columns, oneBased = false) {
+	const raw = hash.replace(/^#\/?/, "");
+	if (!raw) return null;
+	const parts = raw.split("/");
+	const offset = oneBased ? 1 : 0;
+	if (parts[0] && !/^\d+$/.test(parts[0])) {
+		const found = findById(columns, decodeURIComponent(parts[0]));
+		return found ? {
+			...found,
+			click: 0
+		} : null;
+	}
+	const h = Number(parts[0] ?? 0) - offset;
+	const v = parts[1] ? Number(parts[1]) - offset : 0;
+	const click = parts[2] ? Number(parts[2]) : 0;
+	return {
+		h: Number.isFinite(h) ? h : 0,
+		v: Number.isFinite(v) ? v : 0,
+		click: Number.isFinite(click) ? click : 0
+	};
+}
+function formatHash(p, opts = {}) {
+	if (opts.id) return `#/${encodeURIComponent(opts.id)}${opts.withClick && p.click ? `/${p.click}` : ""}`;
+	const offset = opts.oneBased ? 1 : 0;
+	let out = `#/${p.h + offset}`;
+	if (p.v > 0 || opts.withClick && p.click > 0) out += `/${p.v + offset}`;
+	if (opts.withClick && p.click > 0) out += `/${p.click}`;
+	return out;
+}
+function parseFlags(search) {
+	const q = new URLSearchParams(search);
+	const view = q.get("view");
+	return {
+		print: q.has("print-pdf") || q.get("print") === "pdf",
+		view: view === "scroll" ? "scroll" : view === "slide" ? "slide" : null,
+		presenter: q.has("presenter"),
+		embedded: q.has("embedded"),
+		at: q.has("at"),
+		projector: q.has("projector")
+	};
+}
+//#endregion
+export { formatHash, parseFlags, parseHash };

package/dist/core/keyboard.d.ts

@@ -0,0 +1,17 @@
+//#region src/core/keyboard.d.ts
+/**
+ * Keyboard bindings: reveal.js's and Slidev's, merged. A deck may override any binding through
+ * `keyboard: { "KeyX": "action" | null }` in its config; `null` unbinds. Actions are names the
+ * runtime dispatches; the map is data so the help overlay can print it.
+ */
+export type KeyAction = "next" | "prev" | "nextSlide" | "prevSlide" | "left" | "right" | "up" | "down" | "first" | "last" | "overview" | "fullscreen" | "pause" | "presenter" | "help" | "jump" | "search" | "autoSlide" | "draw" | "pointer" | "clearDrawing" | "undoDrawing" | "colorScheme" | "escape" | "zoomOut" | "hints" | "themeMenu";
+export interface KeyBinding {
+  keys: string[];
+  action: KeyAction;
+  description: string;
+  /** Shown in the help overlay under this label. */
+  label: string;
+}
+/** `code` values (physical keys), with `Shift+`/`Alt+`/`Ctrl+`/`Meta+` prefixes. */
+export declare const KEY_BINDINGS: KeyBinding[];
+//#endregion

package/dist/core/keyboard.js

@@ -0,0 +1,198 @@
+//#region src/core/keyboard.ts
+/** `code` values (physical keys), with `Shift+`/`Alt+`/`Ctrl+`/`Meta+` prefixes. */
+const KEY_BINDINGS = [
+	{
+		keys: [
+			"Space",
+			"KeyJ",
+			"KeyN",
+			"PageDown"
+		],
+		action: "next",
+		label: "Space J N",
+		description: "Next step or slide, through vertical stacks"
+	},
+	{
+		keys: [
+			"KeyK",
+			"KeyP",
+			"PageUp",
+			"Shift+Space",
+			"Backspace"
+		],
+		action: "prev",
+		label: "K P Shift Space",
+		description: "Previous step or slide"
+	},
+	{
+		keys: ["ArrowRight", "KeyL"],
+		action: "right",
+		label: "→ L",
+		description: "Next step, then the next column"
+	},
+	{
+		keys: ["ArrowLeft", "KeyH"],
+		action: "left",
+		label: "← H",
+		description: "Previous step, then the previous column"
+	},
+	{
+		keys: ["ArrowDown"],
+		action: "down",
+		label: "↓",
+		description: "Slide beneath"
+	},
+	{
+		keys: ["ArrowUp"],
+		action: "up",
+		label: "↑",
+		description: "Slide above"
+	},
+	{
+		keys: ["Shift+ArrowRight"],
+		action: "nextSlide",
+		label: "Shift →",
+		description: "Next slide, skipping steps"
+	},
+	{
+		keys: ["Shift+ArrowLeft"],
+		action: "prevSlide",
+		label: "Shift ←",
+		description: "Previous slide, skipping steps"
+	},
+	{
+		keys: ["Home", "Shift+ArrowUp"],
+		action: "first",
+		label: "gg Home",
+		description: "First slide"
+	},
+	{
+		keys: [
+			"End",
+			"Shift+ArrowDown",
+			"Shift+KeyG"
+		],
+		action: "last",
+		label: "G End",
+		description: "Last slide"
+	},
+	{
+		keys: ["Escape", "KeyO"],
+		action: "overview",
+		label: "Esc O",
+		description: "Overview"
+	},
+	{
+		keys: ["KeyF"],
+		action: "hints",
+		label: "F",
+		description: "Focus: label every link, control and embedded page — type a label to use it"
+	},
+	{
+		keys: ["Shift+KeyF"],
+		action: "fullscreen",
+		label: "Shift F",
+		description: "Fullscreen"
+	},
+	{
+		keys: ["KeyB", "Period"],
+		action: "pause",
+		label: "B .",
+		description: "Pause: black out the screen"
+	},
+	{
+		keys: ["KeyS"],
+		action: "presenter",
+		label: "S",
+		description: "Open the presenter view"
+	},
+	{
+		keys: ["Shift+Slash"],
+		action: "help",
+		label: "?",
+		description: "This help"
+	},
+	{
+		keys: ["KeyG", "Shift+Semicolon"],
+		action: "jump",
+		label: ": g",
+		description: "Jump to a slide by number (:12), or gg for the first"
+	},
+	{
+		keys: [
+			"Slash",
+			"Ctrl+Shift+KeyF",
+			"Meta+Shift+KeyF"
+		],
+		action: "search",
+		label: "/ Ctrl Shift F",
+		description: "Search the deck"
+	},
+	{
+		keys: ["KeyA"],
+		action: "autoSlide",
+		label: "A",
+		description: "Pause or resume auto-slide"
+	},
+	{
+		keys: ["KeyC"],
+		action: "draw",
+		label: "C",
+		description: "Draw on the slide"
+	},
+	{
+		keys: ["KeyX"],
+		action: "pointer",
+		label: "X",
+		description: "Laser pointer"
+	},
+	{
+		keys: ["Shift+KeyC"],
+		action: "clearDrawing",
+		label: "Shift C",
+		description: "Clear the slide's drawing"
+	},
+	{
+		keys: ["Ctrl+KeyZ", "Meta+KeyZ"],
+		action: "undoDrawing",
+		label: "Ctrl Z",
+		description: "Undo the last stroke"
+	},
+	{
+		keys: ["KeyD"],
+		action: "colorScheme",
+		label: "D",
+		description: "Dark or light"
+	},
+	{
+		keys: ["KeyT"],
+		action: "themeMenu",
+		label: "T",
+		description: "Theme and light or dark"
+	}
+];
+function comboOf(e) {
+	const mods = [];
+	if (e.ctrlKey) mods.push("Ctrl");
+	if (e.shiftKey) mods.push("Shift");
+	if (e.altKey) mods.push("Alt");
+	if (e.metaKey) mods.push("Meta");
+	return [...mods, e.code].join("+");
+}
+/** Resolve a keyboard event to an action, honouring overrides. Returns null when unbound. */
+function actionFor(e, overrides = {}) {
+	const combo = comboOf(e);
+	if (combo in overrides) return overrides[combo];
+	for (const b of KEY_BINDINGS) if (b.keys.includes(combo)) return b.action;
+	if (e.ctrlKey || e.altKey || e.metaKey) return null;
+	return null;
+}
+/** Typing in a field must never turn pages. */
+function isEditable(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
+//#endregion
+export { KEY_BINDINGS, actionFor, comboOf, isEditable };

package/dist/core/layout.d.ts

@@ -0,0 +1,16 @@
+import "./model.js";
+//#region src/core/layout.d.ts
+/**
+ * The stage is authored at `width × height` and scaled uniformly to fit the viewport with a margin
+ * — reveal.js's layout. `disableLayout` decks (BYOL) skip this and fill the viewport.
+ */
+export interface Layout {
+  scale: number;
+  /** Stage size after scaling, in CSS pixels. */
+  width: number;
+  height: number;
+  /** Offsets that centre the stage in the viewport. */
+  left: number;
+  top: number;
+}
+//#endregion

package/dist/core/layout.js

@@ -0,0 +1,25 @@
+//#region src/core/layout.ts
+function computeLayout(config, viewport) {
+	const availableW = viewport.width * (1 - config.margin);
+	const availableH = viewport.height * (1 - config.margin);
+	let scale = Math.min(availableW / config.width, availableH / config.height);
+	scale = Math.max(config.minScale, Math.min(config.maxScale, scale));
+	const width = config.width * scale;
+	const height = config.height * scale;
+	return {
+		scale,
+		width,
+		height,
+		left: (viewport.width - width) / 2,
+		top: (viewport.height - height) / 2
+	};
+}
+/** A point in viewport pixels → stage coordinates (0..width, 0..height). */
+function toStage(layout, x, y) {
+	return {
+		x: (x - layout.left) / layout.scale,
+		y: (y - layout.top) / layout.scale
+	};
+}
+//#endregion
+export { computeLayout, toStage };