@dxos/plugin-presenter 0.10.0 → 0.11.0

package/dist/lib/chunk-types.mjs

@@ -0,0 +1,57 @@
+import { Capability } from "@dxos/app-framework";
+import { createContext } from "react";
+import { meta } from "#meta";
+import * as Schema from "effect/Schema";
+import { Operation } from "@dxos/compute";
+import { Collection, DXN, Type } from "@dxos/echo";
+import { Markdown } from "@dxos/plugin-markdown";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region src/types/PresenterCapabilities.ts
+var PresenterCapabilities_exports = /* @__PURE__ */ __exportAll({ Settings: () => Settings$1 });
+var Settings$1 = Capability.make(`${meta.profile.key}.capability.settings`);
+//#endregion
+//#region src/types/PresenterOperation.ts
+var PresenterOperation_exports = /* @__PURE__ */ __exportAll({ TogglePresentation: () => TogglePresentation });
+var makeKey = (name) => DXN.make(`${meta.profile.key}.operation.${name}`);
+var TogglePresentation = Operation.make({
+	meta: {
+		key: makeKey("togglePresentation"),
+		name: "Toggle Presentation",
+		icon: "ph--presentation--regular"
+	},
+	services: [Capability.Service],
+	input: Schema.Struct({
+		object: Schema.Union(Type.getSchema(Markdown.Document), Type.getSchema(Collection.Collection)),
+		state: Schema.optional(Schema.Boolean)
+	}),
+	output: Schema.Void
+});
+//#endregion
+//#region src/types/Settings.ts
+var Settings_exports = /* @__PURE__ */ __exportAll({ Settings: () => Settings });
+var Settings = Schema.mutable(Schema.Struct({ presentCollections: Schema.optional(Schema.Boolean.annotations({
+	title: "Present collections (experimental)",
+	description: "Enable presenting collections of documents as a slideshow."
+})) }));
+//#endregion
+//#region src/types/index.ts
+var PresenterContext = createContext({
+	running: false,
+	start: () => {},
+	stop: () => {}
+});
+//#endregion
+export { PresenterCapabilities_exports as i, Settings_exports as n, PresenterOperation_exports as r, PresenterContext as t };
+
+//# sourceMappingURL=chunk-types.mjs.map

package/dist/lib/chunk-types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-types.mjs","names":[],"sources":["../../src/types/PresenterCapabilities.ts","../../src/types/PresenterOperation.ts","../../src/types/Settings.ts","../../src/types/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { type Atom } from '@effect-atom/atom';\n\nimport { Capability } from '@dxos/app-framework';\n\nimport { meta } from '#meta';\n\n// Inline import to avoid `Settings` namespace alias colliding with the\n// `Settings` capability export below.\nexport const Settings = Capability.make<Atom.Writable<import('./Settings').Settings>>(\n  `${meta.profile.key}.capability.settings`,\n);\n","//\n// Copyright 2025 DXOS.org\n//\n\n// @import-as-namespace\n\nimport * as Schema from 'effect/Schema';\n\nimport { Capability } from '@dxos/app-framework';\nimport { Operation } from '@dxos/compute';\nimport { Collection, DXN, Type } from '@dxos/echo';\nimport { Markdown } from '@dxos/plugin-markdown';\n\nimport { meta } from '#meta';\n\nconst makeKey = (name: string) => DXN.make(`${meta.profile.key}.operation.${name}`);\n\nexport const TogglePresentation = Operation.make({\n  meta: {\n    key: makeKey('togglePresentation'),\n    name: 'Toggle Presentation',\n    icon: 'ph--presentation--regular',\n  },\n  services: [Capability.Service],\n  input: Schema.Struct({\n    object: Schema.Union(Type.getSchema(Markdown.Document), Type.getSchema(Collection.Collection)),\n    state: Schema.optional(Schema.Boolean),\n  }),\n  output: Schema.Void,\n});\n","//\n// Copyright 2023 DXOS.org\n//\n\n// @import-as-namespace\n\nimport * as Schema from 'effect/Schema';\n\nexport const Settings = Schema.mutable(\n  Schema.Struct({\n    presentCollections: Schema.optional(\n      Schema.Boolean.annotations({\n        title: 'Present collections (experimental)',\n        description: 'Enable presenting collections of documents as a slideshow.',\n      }),\n    ),\n  }),\n);\n\nexport interface Settings extends Schema.Schema.Type<typeof Settings> {}\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Context, createContext } from 'react';\n\nexport type PresenterContextType = {\n  running: boolean;\n  start: () => void;\n  stop: () => void;\n};\n\nexport const PresenterContext: Context<PresenterContextType> = createContext<PresenterContextType>({\n  running: false,\n  start: () => {},\n  stop: () => {},\n});\n\nexport * as PresenterCapabilities from './PresenterCapabilities';\nexport * as PresenterOperation from './PresenterOperation';\nexport * as Settings from './Settings';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,IAAa,aAAW,WAAW,KACjC,GAAG,KAAK,QAAQ,IAAI,qBACtB;;;;ACDA,IAAM,WAAW,SAAiB,IAAI,KAAK,GAAG,KAAK,QAAQ,IAAI,aAAa,MAAM;AAElF,IAAa,qBAAqB,UAAU,KAAK;CAC/C,MAAM;EACJ,KAAK,QAAQ,oBAAoB;EACjC,MAAM;EACN,MAAM;CACR;CACA,UAAU,CAAC,WAAW,OAAO;CAC7B,OAAO,OAAO,OAAO;EACnB,QAAQ,OAAO,MAAM,KAAK,UAAU,SAAS,QAAQ,GAAG,KAAK,UAAU,WAAW,UAAU,CAAC;EAC7F,OAAO,OAAO,SAAS,OAAO,OAAO;CACvC,CAAC;CACD,QAAQ,OAAO;AACjB,CAAC;;;;ACrBD,IAAa,WAAW,OAAO,QAC7B,OAAO,OAAO,EACZ,oBAAoB,OAAO,SACzB,OAAO,QAAQ,YAAY;CACzB,OAAO;CACP,aAAa;AACf,CAAC,CACH,EACF,CAAC,CACH;;;ACLA,IAAa,mBAAkD,cAAoC;CACjG,SAAS;CACT,aAAa,CAAC;CACd,YAAY,CAAC;AACf,CAAC"}

package/dist/lib/chunk-useExitPresenter.mjs

@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+import { PresenterOperation } from "#types";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+//#region src/useExitPresenter.ts
+/**
+* Exits presentation for the given object. Delegates to the toggle operation so the
+* fullscreen-revert and re-open run sequentially in a single handler — invoking them
+* separately races, leaving the deck stuck in fullscreen.
+*/
+var useExitPresenter = (object) => {
+	const { invokePromise } = useOperationInvoker();
+	return useCallback(() => invokePromise(PresenterOperation.TogglePresentation, {
+		object,
+		state: false
+	}), [invokePromise, object]);
+};
+//#endregion
+export { useExitPresenter as t };
+
+//# sourceMappingURL=chunk-useExitPresenter.mjs.map

package/dist/lib/chunk-useExitPresenter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-useExitPresenter.mjs","names":[],"sources":["../../src/useExitPresenter.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { useCallback } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\n\nimport { PresenterOperation } from '#types';\n\n/**\n * Exits presentation for the given object. Delegates to the toggle operation so the\n * fullscreen-revert and re-open run sequentially in a single handler — invoking them\n * separately races, leaving the deck stuck in fullscreen.\n */\nexport const useExitPresenter = (object: any) => {\n  const { invokePromise } = useOperationInvoker();\n\n  return useCallback(\n    () => invokePromise(PresenterOperation.TogglePresentation, { object, state: false }),\n    [invokePromise, object],\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,IAAa,oBAAoB,WAAgB;CAC/C,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,kBACC,cAAc,mBAAmB,oBAAoB;EAAE;EAAQ,OAAO;CAAM,CAAC,GACnF,CAAC,eAAe,MAAM,CACxB;AACF"}

package/dist/lib/components.mjs

@@ -0,0 +1,465 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { mx } from "@dxos/ui-theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "highlight.js/styles/github.css";
+import { h } from "hastscript";
+import ReactMarkdown from "react-markdown";
+import rehypeAddClasses from "rehype-add-classes";
+import rehypeHighlight from "rehype-highlight";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkParseFrontmatter from "remark-parse-frontmatter";
+import { IconButton, composable, composableProps, useAsyncEffect, useControlledState } from "@dxos/react-ui";
+import "reveal.js/dist/reveal.css";
+import "reveal.js/dist/theme/black.css";
+import "highlight.js/styles/tokyo-night-dark.css";
+import hljs from "highlight.js";
+import typescript from "highlight.js/lib/languages/typescript";
+import Reveal from "reveal.js";
+import RevealHighlight from "reveal.js/plugin/highlight/highlight";
+import RevealMarkdown from "reveal.js/plugin/markdown/plugin.js";
+//#region src/components/Markdown/Panel.tsx
+/**
+* Scaled markdown panel.
+*/
+var Panel = ({ children, classNames }) => {
+	const [props, setProps] = useState({});
+	const { ref: containerRef, width, height } = useResizeDetector({
+		refreshMode: "debounce",
+		refreshRate: 200,
+		refreshOptions: { leading: true },
+		onResize: ({ width, height }) => {
+			if (width && height) setProps(createLayoutProps({
+				width,
+				height
+			}));
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: mx("flex grow relative overflow-hidden dx-attention-surface", classNames),
+		children: /* @__PURE__ */ jsx("div", {
+			className: mx("dx-container absolute"),
+			style: props,
+			children: width && height && children
+		})
+	});
+};
+/**
+* Compute CSS properties to transform DIV to be full screen.
+*
+* Display resolutions:
+* window.screen.{availWidth, availHeight}
+*          5K Studio       16.2-inch Macbook Pro
+* Max      5120 x 2880     3456 x 2234
+* Default  2560 x 1440     1728 x 1117 (Actual height 1080 - 37 pixel notch)
+* Aspect   1.77 (16/9)     1.54
+*/
+var createLayoutProps = ({ width, height }) => {
+	const aspectRatio = 16 / 9;
+	const nominalWidth = 2560;
+	const nominalHeight = nominalWidth / aspectRatio;
+	const scale = Math.min(width / nominalWidth, height / nominalHeight);
+	return {
+		left: (width - nominalWidth) / 2,
+		top: (height - nominalHeight) / 2,
+		width: nominalWidth,
+		height: nominalHeight,
+		transform: `scale(${scale})`
+	};
+};
+//#endregion
+//#region src/components/Markdown/styles.css?raw
+var styles_default = "/*!\n  Theme: GitHub Dark\n  Description: Dark theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n  Outdated base version: https://github.com/primer/github-syntax-dark\n  Current colors taken from GitHub's CSS\n*/\n/* TODO(burdon): Use tokens. */\n.dark pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em;\n}\n.dark code.hljs {\n  padding: 3px 5px;\n}\n.dark .hljs {\n  color: #c9d1d9;\n  background: #0d1117;\n}\n.dark .hljs-doctag,\n.dark .hljs-keyword,\n.dark .hljs-meta .hljs-keyword,\n.dark .hljs-template-tag,\n.dark .hljs-template-variable,\n.dark .hljs-type,\n.dark .hljs-variable.language_ {\n  color: #ff7b72;\n}\n.dark .hljs-title,\n.dark .hljs-title.class_,\n.dark .hljs-title.class_.inherited__,\n.dark .hljs-title.function_ {\n  color: #d2a8ff;\n}\n.dark .hljs-attr,\n.dark .hljs-attribute,\n.dark .hljs-literal,\n.dark .hljs-meta,\n.dark .hljs-number,\n.dark .hljs-operator,\n.dark .hljs-variable,\n.dark .hljs-selector-attr,\n.dark .hljs-selector-class,\n.dark .hljs-selector-id {\n  color: #79c0ff;\n}\n.dark .hljs-regexp,\n.dark .hljs-string,\n.dark .hljs-meta .hljs-string {\n  color: #a5d6ff;\n}\n.dark .hljs-built_in,\n.dark .hljs-symbol {\n  color: #ffa657;\n}\n.dark .hljs-comment,\n.dark .hljs-code,\n.dark .hljs-formula {\n  color: #8b949e;\n}\n.dark .hljs-name,\n.dark .hljs-quote,\n.dark .hljs-selector-tag,\n.dark .hljs-selector-pseudo {\n  color: #7ee787;\n}\n.dark .hljs-subst {\n  color: #c9d1d9;\n}\n.dark .hljs-section {\n  color: #1f6feb;\n  font-weight: bold;\n}\n.dark .hljs-bullet {\n  color: #f2cc60;\n}\n.dark .hljs-emphasis {\n  color: #c9d1d9;\n  font-style: italic;\n}\n.dark .hljs-strong {\n  color: #c9d1d9;\n  font-weight: bold;\n}\n.dark .hljs-addition {\n  color: #aff5b4;\n  background-color: #033a16;\n}\n.dark .hljs-deletion {\n  color: #ffdcd7;\n  background-color: #67060c;\n}\n.dark .hljs-char.escape_,\n.dark .hljs-link,\n.dark .hljs-params,\n.dark .hljs-property,\n.dark .hljs-punctuation,\n.dark .hljs-tag {\n  /* purposely ignored */\n  all: unset;\n}\n";
+//#endregion
+//#region src/components/Markdown/theme.ts
+var theme = {
+	root: "dx-attention-surface leading-relaxed font-mono",
+	padding: "px-40 py-16 gap-8",
+	nodes: {
+		h1: "text-[80px] text-accent-text",
+		h2: "text-[60px] text-accent-text",
+		h3: "text-[48px] text-accent-text",
+		p: "text-[48px]",
+		ul: "my-[16px] ml-12 leading-relaxed list-disc",
+		ol: "my-[16px] ml-24 leading-relaxed list-decimal",
+		li: "pl-6 text-[48px]",
+		pre: "w-full mx-0 my-[32px] p-4 bg-input-surface",
+		code: "p-0 text-[40px]"
+	}
+};
+//#endregion
+//#region src/components/Markdown/Slide.tsx
+var Slide = ({ content = "", classes = theme.nodes }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: styles_default }), /* @__PURE__ */ jsx(ReactMarkdown, {
+		components,
+		remarkPlugins: [[remarkFrontmatter, "yaml"], remarkParseFrontmatter],
+		rehypePlugins: [
+			[rehypeAddClasses, classes],
+			rehypeHighlight,
+			slideLayout
+		],
+		children: content
+	})] });
+};
+/**
+* Rehype plugin to format DOM based on frontmatter.
+* https://github.com/unifiedjs/unified#plugin
+* TODO(burdon): See tools/presenter: remarkPluginLayout
+*  E.g., layout image from front-matter.
+*/
+var slideLayout = (_options = {}) => (tree, file) => {
+	const { data: { frontmatter = {} } } = file;
+	let content = tree.children;
+	const { layout, image } = frontmatter;
+	if (image) {
+		const img = h("div", {
+			class: "flex grow shrink-0 bg-cover bg-center bg-no-repeat",
+			style: { backgroundImage: `url(${image})` }
+		});
+		switch (layout) {
+			case "fullscreen":
+				content = img;
+				break;
+			case "columns":
+				content = h("div", { class: "flex grow grid grid-cols-2" }, [h("div", { class: theme.padding }, [content]), img]);
+				break;
+			case "rows":
+				content = h("div", { class: "flex grow flex-col" }, [h("div", { class: theme.padding }, [content]), h("div", { class: ["flex grow pt-0", theme.padding] }, [img])]);
+				break;
+		}
+	} else content = h("div", { class: ["flex grow flex-col", theme.padding] }, [content]);
+	tree.children = [h("div", { class: ["flex flex-col grow", theme.root] }, [content])];
+};
+var ImageWrapper = ({ node: _, ...props }) => {
+	const { alt = "", src } = props;
+	return /* @__PURE__ */ jsx("img", {
+		alt,
+		src
+	});
+};
+var components = { img: ({ node, ...props }) => /* @__PURE__ */ jsx(ImageWrapper, {
+	node,
+	...props
+}) };
+//#endregion
+//#region src/components/Presenter/Layout.tsx
+var Layout = composable(({ children, topLeft, topRight, bottomLeft, bottomRight, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, { classNames: "flex grow relative overflow-hidden dx-attention-surface" }),
+		ref: forwardedRef,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-col grow overflow-hidden",
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "z-[200]",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-4 left-4",
+					children: topLeft
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-4 right-4",
+					children: topRight
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute bottom-4 left-4",
+					children: bottomLeft
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute bottom-4 right-4",
+					children: bottomRight
+				})
+			]
+		})]
+	});
+});
+//#endregion
+//#region src/components/Presenter/Pager.tsx
+var Pager = ({ index: indexProp = 0, count = 0, keys, onChange, onExit }) => {
+	const [index, setIndex] = useControlledState(indexProp);
+	useEffect(() => {
+		onChange?.(index);
+	}, [index]);
+	const handleChangeIndex = (dir) => {
+		setIndex((index) => {
+			const next = index + dir;
+			return next >= 0 && next < count ? next : index;
+		});
+	};
+	useEffect(() => {
+		if (!keys) return;
+		const keydownHandler = (event) => {
+			switch (event.key) {
+				case "Escape":
+					onExit?.();
+					break;
+				case "ArrowLeft":
+					if (event.shiftKey) onChange?.(0);
+					else handleChangeIndex(-1);
+					break;
+				case "ArrowRight":
+					if (event.shiftKey) onChange?.(count - 1);
+					else handleChangeIndex(1);
+					break;
+				case "ArrowUp":
+					onChange?.(0);
+					break;
+				case "ArrowDown":
+					onChange?.(count - 1);
+					break;
+			}
+		};
+		window.addEventListener("keydown", keydownHandler);
+		return () => window.removeEventListener("keydown", keydownHandler);
+	}, [keys, count]);
+	if (index === void 0 || !count) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center text-neutral-500",
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--caret-double-left--regular",
+				size: 6,
+				label: "Jump to first",
+				iconOnly: true,
+				noTooltip: true,
+				variant: "ghost",
+				classNames: "p-0",
+				onClick: () => onChange?.(0)
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--caret-left--regular",
+				size: 6,
+				label: "Previous",
+				iconOnly: true,
+				noTooltip: true,
+				variant: "ghost",
+				classNames: "p-0",
+				onClick: () => handleChangeIndex(-1)
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--caret-right--regular",
+				size: 6,
+				label: "Next",
+				iconOnly: true,
+				noTooltip: true,
+				variant: "ghost",
+				classNames: "p-0",
+				onClick: () => handleChangeIndex(1)
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--caret-double-right--regular",
+				size: 6,
+				label: "Jump to last",
+				iconOnly: true,
+				noTooltip: true,
+				variant: "ghost",
+				classNames: "p-0",
+				onClick: () => onChange?.(count - 1)
+			})
+		]
+	});
+};
+var PageNumber = ({ index = 0, count = 1 }) => {
+	if (index === void 0 || !count) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center text-neutral-500 text-2xl",
+		children: /* @__PURE__ */ jsxs("div", { children: [
+			index + 1,
+			" / ",
+			count
+		] })
+	});
+};
+var StartButton = ({ running, onClick }) => {
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: running ? "ph--x--regular" : "ph--play--regular",
+		size: 6,
+		label: running ? "Stop" : "Play",
+		iconOnly: true,
+		noTooltip: true,
+		variant: "ghost",
+		classNames: "p-0",
+		onClick: () => onClick?.(!running)
+	});
+};
+//#endregion
+//#region src/components/Presenter/PresentationShell.tsx
+/**
+* Wraps presentation content with a fade-in/out transition, an ESC handler that exits in a
+* single keypress (intercepting before the deck's fullscreen handler), and a transient [ESC]
+* caption shown on enter.
+*/
+var PresentationShell = composable(({ children, fadeDuration = 300, hintDuration = 3e3, fullscreen = true, onExit, ...props }, forwardedRef) => {
+	const [visible, setVisible] = useState(false);
+	const [exiting, setExiting] = useState(false);
+	const [showHint, setShowHint] = useState(true);
+	const exitTimeout = useRef(void 0);
+	const exitingRef = useRef(false);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => setVisible(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	useEffect(() => {
+		const timer = setTimeout(() => setShowHint(false), hintDuration);
+		return () => clearTimeout(timer);
+	}, [hintDuration]);
+	const handleExit = useCallback(() => {
+		if (exitingRef.current) return;
+		exitingRef.current = true;
+		setExiting(true);
+		setVisible(false);
+		exitTimeout.current = setTimeout(() => onExit?.(), fadeDuration);
+	}, [onExit, fadeDuration]);
+	useEffect(() => () => clearTimeout(exitTimeout.current), []);
+	useEffect(() => {
+		const handler = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				handleExit();
+			}
+		};
+		document.addEventListener("keydown", handler, { capture: true });
+		return () => document.removeEventListener("keydown", handler, { capture: true });
+	}, [handleExit]);
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, {
+			classNames: ["relative grow overflow-hidden bg-black transition-opacity", visible && !exiting ? "opacity-100" : "opacity-0"],
+			style: { transitionDuration: `${fadeDuration}ms` }
+		}),
+		ref: forwardedRef,
+		children: [children, fullscreen && /* @__PURE__ */ jsx("div", {
+			className: mx("absolute top-4 left-4 z-[300] transition-opacity duration-500", showHint && !exiting ? "opacity-100" : "opacity-0"),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "rounded-sm bg-white/10 px-2 py-1 font-mono text-sm text-white/70",
+				children: "[ESC]"
+			})
+		})]
+	});
+});
+//#endregion
+//#region src/components/RevealPlayer/RevealPlayer.tsx
+var styles = `
+<style type="text/css">
+  .reveal h1 {
+    font-weight: 100;
+    font-size: 60px;
+    opacity: 0.5;
+  }
+  .reveal h2 {
+    font-weight: 100;
+    padding-top: 60px;
+    padding-left: 40px;
+    font-size: 48px;
+    opacity: 0.3;
+  }
+  .reveal h1, h2, p {
+    font-family: "Raleway", sans-serif;
+    text-align: left;
+    font-weight: 200;
+  }
+  .reveal ul {
+    font-family: "Raleway", sans-serif;
+    display: block;
+    list-style: "- ";
+  }
+  .reveal blockquote p {
+    text-align: center;
+    font-weight: 100;
+    padding: 32px;
+  }
+  .reveal pre {
+    margin-left: 0;
+  }
+  .reveal code {
+    font-size: 20px;
+    background: #111111;
+    color: #eeeeee;
+    max-height: unset !important;
+  }
+</style>
+`;
+var RevealPlayer = composable(({ content, slide, fullscreen = true, onExit, children, ...props }, forwardedRef) => {
+	const deckDivRef = useRef(null);
+	const deckRef = useRef(null);
+	useAsyncEffect(async () => {
+		if (deckRef.current) return;
+		hljs.registerLanguage("typescript", typescript);
+		deckRef.current = new Reveal(deckDivRef.current, {
+			progress: false,
+			transition: "none",
+			slideNumber: false,
+			embedded: true,
+			autoPlayMedia: false,
+			showNotes: false,
+			margin: .1,
+			plugins: [RevealMarkdown, RevealHighlight],
+			markdown: {
+				gfm: true,
+				smartypants: true,
+				highlight: (code, language) => {
+					if (language) return hljs.highlight(code, { language }).value;
+					return hljs.highlightAuto(code).value;
+				}
+			}
+		});
+		await deckRef.current.initialize();
+		if (slide !== void 0) deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
+		deckRef.current.addKeyBinding({
+			keyCode: 27,
+			key: "Escape",
+			description: "Exit full screen"
+		}, () => {
+			onExit?.();
+		});
+		return () => {
+			try {
+				if (deckRef.current) {
+					deckRef.current.destroy();
+					deckRef.current = null;
+				}
+			} catch {}
+		};
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, { classNames: ["dx-container grid place-items-center bg-scrim-surface", fullscreen && "absolute inset-0"] }),
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative aspect-video h-full w-full h-auto max-h-full overflow-hidden",
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: deckDivRef,
+				className: "absolute inset-0 reveal",
+				children: [
+					/* @__PURE__ */ jsx("link", {
+						rel: "preconnect",
+						href: "https://fonts.gstatic.com",
+						crossOrigin: ""
+					}),
+					/* @__PURE__ */ jsx("link", {
+						rel: "preconnect",
+						href: "https://fonts.googleapis.com"
+					}),
+					/* @__PURE__ */ jsx("link", {
+						rel: "stylesheet",
+						href: "https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: mx("slides", !fullscreen && "dx-base-surface p-8"),
+						children: [/* @__PURE__ */ jsx("div", {}), /* @__PURE__ */ jsx("section", {
+							"data-markdown": [],
+							children: /* @__PURE__ */ jsx("textarea", {
+								"data-template": true,
+								defaultValue: [styles, content].join("\n")
+							})
+						})]
+					})
+				]
+			})
+		})
+	});
+});
+//#endregion
+export { Layout, PageNumber, Pager, Panel, PresentationShell, RevealPlayer, Slide, StartButton };
+
+//# sourceMappingURL=components.mjs.map

package/dist/lib/components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.mjs","names":[],"sources":["../../src/components/Markdown/Panel.tsx","../../src/components/Markdown/theme.ts","../../src/components/Markdown/Slide.tsx","../../src/components/Presenter/Layout.tsx","../../src/components/Presenter/Pager.tsx","../../src/components/Presenter/PresentationShell.tsx","../../src/components/RevealPlayer/RevealPlayer.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nexport type PanelProps = ThemedClassName<PropsWithChildren<{}>>;\n\n/**\n * Scaled markdown panel.\n */\nexport const Panel = ({ children, classNames }: PanelProps) => {\n  const [props, setProps] = useState({});\n  const {\n    ref: containerRef,\n    width,\n    height,\n  } = useResizeDetector({\n    refreshMode: 'debounce',\n    refreshRate: 200,\n    refreshOptions: {\n      leading: true,\n    },\n    onResize: ({ width, height }) => {\n      if (width && height) {\n        setProps(createLayoutProps({ width, height }));\n      }\n    },\n  });\n\n  // TODO(burdon): Reconcile highlight colors with markdown editor.\n  // https://www.npmjs.com/package/react-markdown\n  return (\n    <div ref={containerRef} className={mx('flex grow relative overflow-hidden dx-attention-surface', classNames)}>\n      <div className={mx('dx-container absolute')} style={props}>\n        {width && height && children}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Compute CSS properties to transform DIV to be full screen.\n *\n * Display resolutions:\n * window.screen.{availWidth, availHeight}\n *          5K Studio       16.2-inch Macbook Pro\n * Max      5120 x 2880     3456 x 2234\n * Default  2560 x 1440     1728 x 1117 (Actual height 1080 - 37 pixel notch)\n * Aspect   1.77 (16/9)     1.54\n */\nconst createLayoutProps = ({ width, height }: { width: number; height: number }) => {\n  // Config.\n  const aspectRatio = 16 / 9;\n  const nominalWidth = 2560;\n  const nominalHeight = nominalWidth / aspectRatio;\n\n  // NOTE: Hack to detect full height on Macbook Pro due to notch.\n  // const macIntelNotch = 1117 - 1080;\n  // const fullscreen =\n  //   height === screen.availHeight ||\n  //   (window.navigator.platform === 'MacIntel' && height === screen.availHeight - macIntelNotch);\n\n  // If not fullscreen then make scale slightly smaller so there's a natural border.\n  // const scaleFactor = fullscreen ? 1 : 0.95;\n\n  // Compute scaling factor required.\n  const scale = Math.min(width / nominalWidth, height / nominalHeight);\n\n  return {\n    left: (width - nominalWidth) / 2,\n    top: (height - nominalHeight) / 2,\n    width: nominalWidth,\n    height: nominalHeight,\n    transform: `scale(${scale})`,\n  };\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\n// TODO(burdon): Create theme type and picker.\n\nexport const theme = {\n  root: 'dx-attention-surface leading-relaxed font-mono',\n\n  padding: 'px-40 py-16 gap-8',\n\n  nodes: {\n    h1: 'text-[80px] text-accent-text',\n    h2: 'text-[60px] text-accent-text',\n    h3: 'text-[48px] text-accent-text',\n\n    p: 'text-[48px]',\n\n    ul: 'my-[16px] ml-12 leading-relaxed list-disc',\n    ol: 'my-[16px] ml-24 leading-relaxed list-decimal',\n    li: 'pl-6 text-[48px]',\n\n    pre: 'w-full mx-0 my-[32px] p-4 bg-input-surface',\n    code: 'p-0 text-[40px]',\n  },\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport 'highlight.js/styles/github.css';\n\nimport { h } from 'hastscript';\nimport React from 'react';\nimport ReactMarkdown, { type Options as ReactMarkdownOptions } from 'react-markdown';\nimport rehypeAddClasses from 'rehype-add-classes';\nimport rehypeHighlight from 'rehype-highlight';\nimport remarkFrontmatter from 'remark-frontmatter';\nimport remarkParseFrontmatter from 'remark-parse-frontmatter';\n\nimport styles from './styles.css?raw';\nimport { theme } from './theme';\n\nexport type SlideProps = {\n  content?: string;\n  classes?: Record<string, string>;\n};\n\nexport const Slide = ({ content = '', classes = theme.nodes }: SlideProps) => {\n  // TODO(thure): `rehype-highlight` ends up using `github.css` from `highlight.js`, but this does not appear to be\n  //  configurable. Find a way to remove the literal stylesheet here.\n  return (\n    <>\n      <style>{styles}</style>\n      <ReactMarkdown\n        components={components}\n        // Markdown to HTML.\n        remarkPlugins={[[remarkFrontmatter, 'yaml'], remarkParseFrontmatter as any]}\n        // HTML processing.\n        rehypePlugins={[[rehypeAddClasses, classes], rehypeHighlight as any, slideLayout]}\n      >\n        {content}\n      </ReactMarkdown>\n    </>\n  );\n};\n\n/**\n * Rehype plugin to format DOM based on frontmatter.\n * https://github.com/unifiedjs/unified#plugin\n * TODO(burdon): See tools/presenter: remarkPluginLayout\n *  E.g., layout image from front-matter.\n */\nconst slideLayout =\n  (_options = {}) =>\n  (tree: any, file: any) => {\n    const {\n      data: { frontmatter = {} },\n    } = file;\n\n    let content = tree.children;\n    const { layout, image } = frontmatter;\n    if (image) {\n      const img = h('div', {\n        class: 'flex grow shrink-0 bg-cover bg-center bg-no-repeat',\n        style: {\n          backgroundImage: `url(${image})`,\n        },\n      });\n\n      switch (layout) {\n        case 'fullscreen': {\n          content = img;\n          break;\n        }\n\n        case 'columns': {\n          content = h('div', { class: 'flex grow grid grid-cols-2' }, [\n            h('div', { class: theme.padding }, [content]),\n            img,\n          ]);\n          break;\n        }\n\n        case 'rows': {\n          content = h('div', { class: 'flex grow flex-col' }, [\n            h('div', { class: theme.padding }, [content]),\n            h('div', { class: ['flex grow pt-0', theme.padding] }, [img]),\n          ]);\n          break;\n        }\n      }\n    } else {\n      content = h('div', { class: ['flex grow flex-col', theme.padding] }, [content]);\n    }\n\n    const root = h('div', { class: ['flex flex-col grow', theme.root] }, [content]);\n    tree.children = [root];\n  };\n\nconst ImageWrapper = ({ node: _, ...props }: { node: any }) => {\n  const { alt = '', src } = props as { alt: string; src: string };\n  return <img alt={alt} src={src} />;\n};\n\nconst components: ReactMarkdownOptions['components'] = {\n  img: ({ node, ...props }) => <ImageWrapper node={node} {...props} />,\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type ReactNode } from 'react';\n\nimport { composable, composableProps } from '@dxos/react-ui';\n\nexport type LayoutProps = PropsWithChildren<{\n  topLeft?: ReactNode;\n  topRight?: ReactNode;\n  bottomLeft?: ReactNode;\n  bottomRight?: ReactNode;\n}>;\n\nexport const Layout = composable<HTMLDivElement, LayoutProps>(\n  ({ children, topLeft, topRight, bottomLeft, bottomRight, ...props }, forwardedRef) => {\n    return (\n      <div\n        {...composableProps(props, { classNames: 'flex grow relative overflow-hidden dx-attention-surface' })}\n        ref={forwardedRef}\n      >\n        <div className='flex flex-col grow overflow-hidden'>{children}</div>\n\n        <div className='z-[200]'>\n          <div className='absolute top-4 left-4'>{topLeft}</div>\n          <div className='absolute top-4 right-4'>{topRight}</div>\n          <div className='absolute bottom-4 left-4'>{bottomLeft}</div>\n          <div className='absolute bottom-4 right-4'>{bottomRight}</div>\n        </div>\n      </div>\n    );\n  },\n);\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useEffect } from 'react';\n\nimport { IconButton, useControlledState } from '@dxos/react-ui';\n\nexport type PagerProps = {\n  index?: number;\n  count?: number;\n  keys?: boolean; // TODO(burdon): Rename.\n  onChange?: (index: number) => void;\n  onExit?: () => void;\n};\n\nexport const Pager = ({ index: indexProp = 0, count = 0, keys, onChange, onExit }: PagerProps) => {\n  const [index, setIndex] = useControlledState(indexProp);\n  useEffect(() => {\n    onChange?.(index);\n  }, [index]);\n\n  const handleChangeIndex = (dir: number) => {\n    setIndex((index) => {\n      const next = index + dir;\n      return next >= 0 && next < count ? next : index;\n    });\n  };\n\n  // TODO(burdon): Standardize via system key binding.\n  useEffect(() => {\n    if (!keys) {\n      return;\n    }\n\n    const keydownHandler = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case 'Escape': {\n          onExit?.();\n          break;\n        }\n        case 'ArrowLeft': {\n          if (event.shiftKey) {\n            onChange?.(0);\n          } else {\n            handleChangeIndex(-1);\n          }\n          break;\n        }\n        case 'ArrowRight': {\n          if (event.shiftKey) {\n            onChange?.(count - 1);\n          } else {\n            handleChangeIndex(1);\n          }\n          break;\n        }\n        case 'ArrowUp': {\n          onChange?.(0);\n          break;\n        }\n        case 'ArrowDown': {\n          onChange?.(count - 1);\n          break;\n        }\n      }\n    };\n\n    window.addEventListener('keydown', keydownHandler);\n    return () => window.removeEventListener('keydown', keydownHandler);\n  }, [keys, count]);\n\n  if (index === undefined || !count) {\n    return null;\n  }\n\n  return (\n    <div className='flex items-center text-neutral-500'>\n      <IconButton\n        icon='ph--caret-double-left--regular'\n        size={6}\n        label='Jump to first'\n        iconOnly\n        noTooltip\n        variant='ghost'\n        classNames='p-0'\n        onClick={() => onChange?.(0)}\n      />\n      <IconButton\n        icon='ph--caret-left--regular'\n        size={6}\n        label='Previous'\n        iconOnly\n        noTooltip\n        variant='ghost'\n        classNames='p-0'\n        onClick={() => handleChangeIndex(-1)}\n      />\n      <IconButton\n        icon='ph--caret-right--regular'\n        size={6}\n        label='Next'\n        iconOnly\n        noTooltip\n        variant='ghost'\n        classNames='p-0'\n        onClick={() => handleChangeIndex(1)}\n      />\n      <IconButton\n        icon='ph--caret-double-right--regular'\n        size={6}\n        label='Jump to last'\n        iconOnly\n        noTooltip\n        variant='ghost'\n        classNames='p-0'\n        onClick={() => onChange?.(count - 1)}\n      />\n    </div>\n  );\n};\n\nexport type PageNumberProps = {\n  index?: number;\n  count?: number;\n};\n\nexport const PageNumber = ({ index = 0, count = 1 }: PageNumberProps) => {\n  if (index === undefined || !count) {\n    return null;\n  }\n\n  return (\n    <div className='flex items-center text-neutral-500 text-2xl'>\n      <div>\n        {index + 1} / {count}\n      </div>\n    </div>\n  );\n};\n\nexport const StartButton = ({ running, onClick }: { running?: boolean; onClick?: (start: boolean) => void }) => {\n  return (\n    <IconButton\n      icon={running ? 'ph--x--regular' : 'ph--play--regular'}\n      size={6}\n      label={running ? 'Stop' : 'Play'}\n      iconOnly\n      noTooltip\n      variant='ghost'\n      classNames='p-0'\n      onClick={() => onClick?.(!running)}\n    />\n  );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { composable, composableProps } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nexport type PresentationShellProps = PropsWithChildren<{\n  /** Fade-in/out duration (ms). */\n  fadeDuration?: number;\n  /** Duration the [ESC] hint remains visible (ms). */\n  hintDuration?: number;\n  /** Whether the presentation is fullscreen. */\n  fullscreen?: boolean;\n  /** Invoked once the exit fade-out has completed. */\n  onExit?: () => void;\n}>;\n\n/**\n * Wraps presentation content with a fade-in/out transition, an ESC handler that exits in a\n * single keypress (intercepting before the deck's fullscreen handler), and a transient [ESC]\n * caption shown on enter.\n */\nexport const PresentationShell = composable<HTMLDivElement, PresentationShellProps>(\n  ({ children, fadeDuration = 300, hintDuration = 3000, fullscreen = true, onExit, ...props }, forwardedRef) => {\n    const [visible, setVisible] = useState(false);\n    const [exiting, setExiting] = useState(false);\n    const [showHint, setShowHint] = useState(true);\n    const exitTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);\n    // Guards against exiting twice; a state updater can't gate this since React double-invokes\n    // updaters in dev, which would schedule the exit (and its side effects) more than once.\n    const exitingRef = useRef(false);\n\n    // Fade in once mounted.\n    useEffect(() => {\n      const frame = requestAnimationFrame(() => setVisible(true));\n      return () => cancelAnimationFrame(frame);\n    }, []);\n\n    // Hide the hint after the configured duration.\n    useEffect(() => {\n      const timer = setTimeout(() => setShowHint(false), hintDuration);\n      return () => clearTimeout(timer);\n    }, [hintDuration]);\n\n    const handleExit = useCallback(() => {\n      if (exitingRef.current) {\n        return;\n      }\n      exitingRef.current = true;\n      setExiting(true);\n      setVisible(false);\n      exitTimeout.current = setTimeout(() => onExit?.(), fadeDuration);\n    }, [onExit, fadeDuration]);\n\n    useEffect(() => () => clearTimeout(exitTimeout.current), []);\n\n    // Capture ESC before the deck/reveal handlers so a single keypress exits directly.\n    useEffect(() => {\n      const handler = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          event.stopImmediatePropagation();\n          handleExit();\n        }\n      };\n\n      document.addEventListener('keydown', handler, { capture: true });\n      return () => document.removeEventListener('keydown', handler, { capture: true });\n    }, [handleExit]);\n\n    return (\n      <div\n        {...composableProps(props, {\n          classNames: [\n            'relative grow overflow-hidden bg-black transition-opacity',\n            visible && !exiting ? 'opacity-100' : 'opacity-0',\n          ],\n          style: { transitionDuration: `${fadeDuration}ms` },\n        })}\n        ref={forwardedRef}\n      >\n        {children}\n        {fullscreen && (\n          <div\n            className={mx(\n              'absolute top-4 left-4 z-[300] transition-opacity duration-500',\n              showHint && !exiting ? 'opacity-100' : 'opacity-0',\n            )}\n          >\n            <span className='rounded-sm bg-white/10 px-2 py-1 font-mono text-sm text-white/70'>[ESC]</span>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport 'reveal.js/dist/reveal.css';\nimport 'reveal.js/dist/theme/black.css';\n// https://github.com/highlightjs/highlight.js/tree/main/src/styles\n// import 'highlight.js/styles/github-dark.css';\nimport 'highlight.js/styles/tokyo-night-dark.css';\n\nimport hljs from 'highlight.js';\nimport typescript from 'highlight.js/lib/languages/typescript';\nimport React, { useRef } from 'react';\nimport Reveal from 'reveal.js';\nimport RevealHighlight from 'reveal.js/plugin/highlight/highlight';\nimport RevealMarkdown from 'reveal.js/plugin/markdown/plugin.js';\n\nimport { useAsyncEffect } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst styles = `\n<style type=\"text/css\">\n  .reveal h1 {\n    font-weight: 100;\n    font-size: 60px;\n    opacity: 0.5;\n  }\n  .reveal h2 {\n    font-weight: 100;\n    padding-top: 60px;\n    padding-left: 40px;\n    font-size: 48px;\n    opacity: 0.3;\n  }\n  .reveal h1, h2, p {\n    font-family: \"Raleway\", sans-serif;\n    text-align: left;\n    font-weight: 200;\n  }\n  .reveal ul {\n    font-family: \"Raleway\", sans-serif;\n    display: block;\n    list-style: \"- \";\n  }\n  .reveal blockquote p {\n    text-align: center;\n    font-weight: 100;\n    padding: 32px;\n  }\n  .reveal pre {\n    margin-left: 0;\n  }\n  .reveal code {\n    font-size: 20px;\n    background: #111111;\n    color: #eeeeee;\n    max-height: unset !important;\n  }\n</style>\n`;\n\nexport type RevealProps = {\n  content: string;\n  slide?: number;\n  fullscreen?: boolean;\n  onExit?: () => void;\n};\n\nexport const RevealPlayer = composable<HTMLDivElement, RevealProps>(\n  ({ content, slide, fullscreen = true, onExit, children, ...props }, forwardedRef) => {\n    const deckDivRef = useRef<HTMLDivElement>(null);\n    const deckRef = useRef<Reveal.Api | null>(null);\n\n    useAsyncEffect(async () => {\n      if (deckRef.current) {\n        return;\n      }\n\n      // Required for syntax highlighting.\n      hljs.registerLanguage('typescript', typescript);\n\n      // https://revealjs.com/react\n      // https://revealjs.com/config\n      // https://github.com/hakimel/reveal.js\n      // TODO(burdon): Fragments and scroll view steps 2 at a time (safe mode?)\n      deckRef.current = new Reveal(deckDivRef.current!, {\n        // view: 'scroll',\n        progress: false,\n        transition: 'none',\n        slideNumber: false,\n        embedded: true,\n\n        // Disable autoplay to prevent errors in headless environments (e.g., CI).\n        autoPlayMedia: false,\n\n        // TODO(burdon): Speaker view requires server to serve popout window.\n        // https://revealjs.com/speaker-view\n        showNotes: false,\n\n        // width: 1600,\n        // height: 900,\n        margin: 0.1,\n        // center: false,\n        // minScale: 0.1,\n        // maxScale: 1.4,\n\n        // https://revealjs.com/markdown\n        // TODO(burdon): Requires server to serve popout window.\n        plugins: [RevealMarkdown, RevealHighlight],\n\n        // See https://marked.js.org/using_advanced#options\n        markdown: {\n          gfm: true,\n          smartypants: true,\n          highlight: (code, language) => {\n            if (language) {\n              return hljs.highlight(code, { language }).value;\n            }\n\n            return hljs.highlightAuto(code).value;\n          },\n        },\n      });\n\n      await deckRef.current.initialize();\n\n      if (slide !== undefined) {\n        deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);\n      }\n\n      deckRef.current.addKeyBinding({ keyCode: 27, key: 'Escape', description: 'Exit full screen' }, () => {\n        onExit?.();\n      });\n\n      return () => {\n        try {\n          if (deckRef.current) {\n            deckRef.current.destroy();\n            deckRef.current = null;\n          }\n        } catch {\n          // Ignore.\n        }\n      };\n    });\n\n    // TOOD(burdon): Trap cursor keys (otherwise tabster grabs focus.)\n    return (\n      <div\n        {...composableProps(props, {\n          classNames: ['dx-container grid place-items-center bg-scrim-surface', fullscreen && 'absolute inset-0'],\n        })}\n        ref={forwardedRef}\n      >\n        <div className='relative aspect-video h-full w-full h-auto max-h-full overflow-hidden'>\n          <div ref={deckDivRef} className='absolute inset-0 reveal'>\n            {/* React hoists these to <head>; they must not be wrapped in <style> (which only renders CSS text). */}\n            <link rel='preconnect' href='https://fonts.gstatic.com' {...{ crossOrigin: '' }} />\n            <link rel='preconnect' href='https://fonts.googleapis.com' />\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'\n            />\n            <div className={mx('slides', !fullscreen && 'dx-base-surface p-8')}>\n              <div />\n              <section {...{ 'data-markdown': [] }}>\n                <textarea {...{ 'data-template': true }} defaultValue={[styles, content].join('\\n')}></textarea>\n              </section>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAa,SAAS,EAAE,UAAU,iBAA6B;CAC7D,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC,CAAC;CACrC,MAAM,EACJ,KAAK,cACL,OACA,WACE,kBAAkB;EACpB,aAAa;EACb,aAAa;EACb,gBAAgB,EACd,SAAS,KACX;EACA,WAAW,EAAE,OAAO,aAAa;GAC/B,IAAI,SAAS,QACX,SAAS,kBAAkB;IAAE;IAAO;GAAO,CAAC,CAAC;EAEjD;CACF,CAAC;CAID,OACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,2DAA2D,UAAU;YACzG,oBAAC,OAAD;GAAK,WAAW,GAAG,uBAAuB;GAAG,OAAO;aACjD,SAAS,UAAU;EACjB,CAAA;CACF,CAAA;AAET;;;;;;;;;;;AAYA,IAAM,qBAAqB,EAAE,OAAO,aAAgD;CAElF,MAAM,cAAc,KAAK;CACzB,MAAM,eAAe;CACrB,MAAM,gBAAgB,eAAe;CAYrC,MAAM,QAAQ,KAAK,IAAI,QAAQ,cAAc,SAAS,aAAa;CAEnE,OAAO;EACL,OAAO,QAAQ,gBAAgB;EAC/B,MAAM,SAAS,iBAAiB;EAChC,OAAO;EACP,QAAQ;EACR,WAAW,SAAS,MAAM;CAC5B;AACF;;;;;;AC1EA,IAAa,QAAQ;CACnB,MAAM;CAEN,SAAS;CAET,OAAO;EACL,IAAI;EACJ,IAAI;EACJ,IAAI;EAEJ,GAAG;EAEH,IAAI;EACJ,IAAI;EACJ,IAAI;EAEJ,KAAK;EACL,MAAM;CACR;AACF;;;ACHA,IAAa,SAAS,EAAE,UAAU,IAAI,UAAU,MAAM,YAAwB;CAG5E,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAA,UAAQ,eAAc,CAAA,GACtB,oBAAC,eAAD;EACc;EAEZ,eAAe,CAAC,CAAC,mBAAmB,MAAM,GAAG,sBAA6B;EAE1E,eAAe;GAAC,CAAC,kBAAkB,OAAO;GAAG;GAAwB;EAAW;YAE/E;CACY,CAAA,CACf,EAAA,CAAA;AAEN;;;;;;;AAQA,IAAM,eACH,WAAW,CAAC,OACZ,MAAW,SAAc;CACxB,MAAM,EACJ,MAAM,EAAE,cAAc,CAAC,QACrB;CAEJ,IAAI,UAAU,KAAK;CACnB,MAAM,EAAE,QAAQ,UAAU;CAC1B,IAAI,OAAO;EACT,MAAM,MAAM,EAAE,OAAO;GACnB,OAAO;GACP,OAAO,EACL,iBAAiB,OAAO,MAAM,GAChC;EACF,CAAC;EAED,QAAQ,QAAR;GACE,KAAK;IACH,UAAU;IACV;GAGF,KAAK;IACH,UAAU,EAAE,OAAO,EAAE,OAAO,6BAA6B,GAAG,CAC1D,EAAE,OAAO,EAAE,OAAO,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC,GAC5C,GACF,CAAC;IACD;GAGF,KAAK;IACH,UAAU,EAAE,OAAO,EAAE,OAAO,qBAAqB,GAAG,CAClD,EAAE,OAAO,EAAE,OAAO,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC,GAC5C,EAAE,OAAO,EAAE,OAAO,CAAC,kBAAkB,MAAM,OAAO,EAAE,GAAG,CAAC,GAAG,CAAC,CAC9D,CAAC;IACD;EAEJ;CACF,OACE,UAAU,EAAE,OAAO,EAAE,OAAO,CAAC,sBAAsB,MAAM,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;CAIhF,KAAK,WAAW,CADH,EAAE,OAAO,EAAE,OAAO,CAAC,sBAAsB,MAAM,IAAI,EAAE,GAAG,CAAC,OAAO,CAC5D,CAAI;AACvB;AAEF,IAAM,gBAAgB,EAAE,MAAM,GAAG,GAAG,YAA2B;CAC7D,MAAM,EAAE,MAAM,IAAI,QAAQ;CAC1B,OAAO,oBAAC,OAAD;EAAU;EAAU;CAAM,CAAA;AACnC;AAEA,IAAM,aAAiD,EACrD,MAAM,EAAE,MAAM,GAAG,YAAY,oBAAC,cAAD;CAAoB;CAAM,GAAI;AAAQ,CAAA,EACrE;;;ACtFA,IAAa,SAAS,YACnB,EAAE,UAAU,SAAS,UAAU,YAAY,aAAa,GAAG,SAAS,iBAAiB;CACpF,OACE,qBAAC,OAAD;EACE,GAAI,gBAAgB,OAAO,EAAE,YAAY,0DAA0D,CAAC;EACpG,KAAK;YAFP,CAIE,oBAAC,OAAD;GAAK,WAAU;GAAsC;EAAc,CAAA,GAEnE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD;KAAK,WAAU;eAAyB;IAAa,CAAA;IACrD,oBAAC,OAAD;KAAK,WAAU;eAA0B;IAAc,CAAA;IACvD,oBAAC,OAAD;KAAK,WAAU;eAA4B;IAAgB,CAAA;IAC3D,oBAAC,OAAD;KAAK,WAAU;eAA6B;IAAiB,CAAA;GAC1D;IACF;;AAET,CACF;;;ACjBA,IAAa,SAAS,EAAE,OAAO,YAAY,GAAG,QAAQ,GAAG,MAAM,UAAU,aAAyB;CAChG,MAAM,CAAC,OAAO,YAAY,mBAAmB,SAAS;CACtD,gBAAgB;EACd,WAAW,KAAK;CAClB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB,QAAgB;EACzC,UAAU,UAAU;GAClB,MAAM,OAAO,QAAQ;GACrB,OAAO,QAAQ,KAAK,OAAO,QAAQ,OAAO;EAC5C,CAAC;CACH;CAGA,gBAAgB;EACd,IAAI,CAAC,MACH;EAGF,MAAM,kBAAkB,UAAyB;GAC/C,QAAQ,MAAM,KAAd;IACE,KAAK;KACH,SAAS;KACT;IAEF,KAAK;KACH,IAAI,MAAM,UACR,WAAW,CAAC;UAEZ,kBAAkB,EAAE;KAEtB;IAEF,KAAK;KACH,IAAI,MAAM,UACR,WAAW,QAAQ,CAAC;UAEpB,kBAAkB,CAAC;KAErB;IAEF,KAAK;KACH,WAAW,CAAC;KACZ;IAEF,KAAK;KACH,WAAW,QAAQ,CAAC;KACpB;GAEJ;EACF;EAEA,OAAO,iBAAiB,WAAW,cAAc;EACjD,aAAa,OAAO,oBAAoB,WAAW,cAAc;CACnE,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,IAAI,UAAU,KAAA,KAAa,CAAC,OAC1B,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,YAAD;IACE,MAAK;IACL,MAAM;IACN,OAAM;IACN,UAAA;IACA,WAAA;IACA,SAAQ;IACR,YAAW;IACX,eAAe,WAAW,CAAC;GAC5B,CAAA;GACD,oBAAC,YAAD;IACE,MAAK;IACL,MAAM;IACN,OAAM;IACN,UAAA;IACA,WAAA;IACA,SAAQ;IACR,YAAW;IACX,eAAe,kBAAkB,EAAE;GACpC,CAAA;GACD,oBAAC,YAAD;IACE,MAAK;IACL,MAAM;IACN,OAAM;IACN,UAAA;IACA,WAAA;IACA,SAAQ;IACR,YAAW;IACX,eAAe,kBAAkB,CAAC;GACnC,CAAA;GACD,oBAAC,YAAD;IACE,MAAK;IACL,MAAM;IACN,OAAM;IACN,UAAA;IACA,WAAA;IACA,SAAQ;IACR,YAAW;IACX,eAAe,WAAW,QAAQ,CAAC;GACpC,CAAA;EACE;;AAET;AAOA,IAAa,cAAc,EAAE,QAAQ,GAAG,QAAQ,QAAyB;CACvE,IAAI,UAAU,KAAA,KAAa,CAAC,OAC1B,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD,EAAA,UAAA;GACG,QAAQ;GAAE;GAAI;EACZ,EAAA,CAAA;CACF,CAAA;AAET;AAEA,IAAa,eAAe,EAAE,SAAS,cAAyE;CAC9G,OACE,oBAAC,YAAD;EACE,MAAM,UAAU,mBAAmB;EACnC,MAAM;EACN,OAAO,UAAU,SAAS;EAC1B,UAAA;EACA,WAAA;EACA,SAAQ;EACR,YAAW;EACX,eAAe,UAAU,CAAC,OAAO;CAClC,CAAA;AAEL;;;;;;;;ACjIA,IAAa,oBAAoB,YAC9B,EAAE,UAAU,eAAe,KAAK,eAAe,KAAM,aAAa,MAAM,QAAQ,GAAG,SAAS,iBAAiB;CAC5G,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAC7C,MAAM,cAAc,OAAsC,KAAA,CAAS;CAGnE,MAAM,aAAa,OAAO,KAAK;CAG/B,gBAAgB;EACd,MAAM,QAAQ,4BAA4B,WAAW,IAAI,CAAC;EAC1D,aAAa,qBAAqB,KAAK;CACzC,GAAG,CAAC,CAAC;CAGL,gBAAgB;EACd,MAAM,QAAQ,iBAAiB,YAAY,KAAK,GAAG,YAAY;EAC/D,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,aAAa,kBAAkB;EACnC,IAAI,WAAW,SACb;EAEF,WAAW,UAAU;EACrB,WAAW,IAAI;EACf,WAAW,KAAK;EAChB,YAAY,UAAU,iBAAiB,SAAS,GAAG,YAAY;CACjE,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,sBAAsB,aAAa,YAAY,OAAO,GAAG,CAAC,CAAC;CAG3D,gBAAgB;EACd,MAAM,WAAW,UAAyB;GACxC,IAAI,MAAM,QAAQ,UAAU;IAC1B,MAAM,eAAe;IACrB,MAAM,yBAAyB;IAC/B,WAAW;GACb;EACF;EAEA,SAAS,iBAAiB,WAAW,SAAS,EAAE,SAAS,KAAK,CAAC;EAC/D,aAAa,SAAS,oBAAoB,WAAW,SAAS,EAAE,SAAS,KAAK,CAAC;CACjF,GAAG,CAAC,UAAU,CAAC;CAEf,OACE,qBAAC,OAAD;EACE,GAAI,gBAAgB,OAAO;GACzB,YAAY,CACV,6DACA,WAAW,CAAC,UAAU,gBAAgB,WACxC;GACA,OAAO,EAAE,oBAAoB,GAAG,aAAa,IAAI;EACnD,CAAC;EACD,KAAK;YARP,CAUG,UACA,cACC,oBAAC,OAAD;GACE,WAAW,GACT,iEACA,YAAY,CAAC,UAAU,gBAAgB,WACzC;aAEA,oBAAC,QAAD;IAAM,WAAU;cAAmE;GAAW,CAAA;EAC3F,CAAA,CAEJ;;AAET,CACF;;;AC7EA,IAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDf,IAAa,eAAe,YACzB,EAAE,SAAS,OAAO,aAAa,MAAM,QAAQ,UAAU,GAAG,SAAS,iBAAiB;CACnF,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,OAA0B,IAAI;CAE9C,eAAe,YAAY;EACzB,IAAI,QAAQ,SACV;EAIF,KAAK,iBAAiB,cAAc,UAAU;EAM9C,QAAQ,UAAU,IAAI,OAAO,WAAW,SAAU;GAEhD,UAAU;GACV,YAAY;GACZ,aAAa;GACb,UAAU;GAGV,eAAe;GAIf,WAAW;GAIX,QAAQ;GAOR,SAAS,CAAC,gBAAgB,eAAe;GAGzC,UAAU;IACR,KAAK;IACL,aAAa;IACb,YAAY,MAAM,aAAa;KAC7B,IAAI,UACF,OAAO,KAAK,UAAU,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;KAG5C,OAAO,KAAK,cAAc,IAAI,CAAC,CAAC;IAClC;GACF;EACF,CAAC;EAED,MAAM,QAAQ,QAAQ,WAAW;EAEjC,IAAI,UAAU,KAAA,GACZ,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,SAAS,eAAe,IAAI,QAAQ,QAAQ,CAAC;EAGzF,QAAQ,QAAQ,cAAc;GAAE,SAAS;GAAI,KAAK;GAAU,aAAa;EAAmB,SAAS;GACnG,SAAS;EACX,CAAC;EAED,aAAa;GACX,IAAI;IACF,IAAI,QAAQ,SAAS;KACnB,QAAQ,QAAQ,QAAQ;KACxB,QAAQ,UAAU;IACpB;GACF,QAAQ,CAER;EACF;CACF,CAAC;CAGD,OACE,oBAAC,OAAD;EACE,GAAI,gBAAgB,OAAO,EACzB,YAAY,CAAC,yDAAyD,cAAc,kBAAkB,EACxG,CAAC;EACD,KAAK;YAEL,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,OAAD;IAAK,KAAK;IAAY,WAAU;cAAhC;KAEE,oBAAC,QAAD;MAAM,KAAI;MAAa,MAAK;MAAkC,aAAa;KAAO,CAAA;KAClF,oBAAC,QAAD;MAAM,KAAI;MAAa,MAAK;KAAgC,CAAA;KAC5D,oBAAC,QAAD;MACE,KAAI;MACJ,MAAK;KACN,CAAA;KACD,qBAAC,OAAD;MAAK,WAAW,GAAG,UAAU,CAAC,cAAc,qBAAqB;gBAAjE,CACE,oBAAC,OAAD,CAAM,CAAA,GACN,oBAAC,WAAD;OAAe,iBAAiB,CAAC;iBAC/B,oBAAC,YAAD;QAAgB,iBAAiB;QAAQ,cAAc,CAAC,QAAQ,OAAO,CAAC,CAAC,KAAK,IAAI;OAAa,CAAA;MACxF,CAAA,CACN;;IACF;;EACF,CAAA;CACF,CAAA;AAET,CACF"}

package/dist/lib/containers.mjs

@@ -0,0 +1,9 @@
+import { lazy } from "react";
+//#region src/containers/index.ts
+var CollectionArticle = lazy(() => import("./chunk-CollectionArticle.mjs"));
+var DocumentArticle = lazy(() => import("./chunk-DocumentArticle.mjs"));
+var SlideArticle = lazy(() => import("./chunk-SlideArticle.mjs"));
+//#endregion
+export { CollectionArticle, DocumentArticle, SlideArticle };
+
+//# sourceMappingURL=containers.mjs.map

package/dist/lib/containers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.mjs","names":[],"sources":["../../src/containers/index.ts"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type ComponentType, lazy } from 'react';\n\nexport const CollectionArticle: ComponentType<any> = lazy(() => import('./CollectionArticle'));\nexport const DocumentArticle: ComponentType<any> = lazy(() => import('./DocumentArticle'));\nexport const SlideArticle: ComponentType<any> = lazy(() => import('./SlideArticle'));\n"],"mappings":";;AAMA,IAAa,oBAAwC,WAAW,OAAO,gCAAsB;AAC7F,IAAa,kBAAsC,WAAW,OAAO,8BAAoB;AACzF,IAAa,eAAmC,WAAW,OAAO,2BAAiB"}

package/dist/lib/index.mjs

@@ -0,0 +1,3 @@
+import { i as PresenterCapabilities_exports, n as Settings_exports, r as PresenterOperation_exports, t as PresenterContext } from "./chunk-types.mjs";
+import { t as meta } from "./chunk-meta.mjs";
+export { PresenterCapabilities_exports as PresenterCapabilities, PresenterContext, PresenterOperation_exports as PresenterOperation, Settings_exports as Settings, meta };

package/dist/lib/meta.mjs

@@ -0,0 +1,2 @@
+import { t as meta } from "./chunk-meta.mjs";
+export { meta };

package/dist/lib/operations.mjs

@@ -0,0 +1,7 @@
+import { OperationHandlerSet } from "@dxos/compute";
+//#region src/operations/index.ts
+var PresenterOperationHandlerSet = OperationHandlerSet.lazy(() => import("./chunk-toggle-presentation.mjs"));
+//#endregion
+export { PresenterOperationHandlerSet };
+
+//# sourceMappingURL=operations.mjs.map

package/dist/lib/operations.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"operations.mjs","names":[],"sources":["../../src/operations/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { OperationHandlerSet } from '@dxos/compute';\n\nexport const PresenterOperationHandlerSet = OperationHandlerSet.lazy(() => import('./toggle-presentation'));\n"],"mappings":";;AAMA,IAAa,+BAA+B,oBAAoB,WAAW,OAAO,kCAAwB"}