@dxos/plugin-presenter 0.9.0 → 0.9.1-staging.ee54ba693a

package/dx.config.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.presenter',
+    name: 'Presenter',
+    author: 'DXOS',
+    description: trim`
+      Transform existing workspace objects into interactive presentation slideshows without
+      duplicating content. Markdown documents are split into slides on horizontal \`---\`
+      separators and rendered with Reveal.js, giving authors a familiar authoring surface
+      with full Markdown syntax. Collections can optionally be presented slide-by-slide,
+      with each member object rendered by its own plugin surface.
+
+      Activate presentation mode for any supported object via the action menu or the
+      Shift+Cmd+P (macOS) / Shift+Alt+P (Windows/Linux) keyboard shortcut. The presenter
+      opens in a solo fullscreen layout managed by the Deck plugin, keeping the rest of the
+      workspace undisturbed.
+
+      Navigation controls and a page-number indicator are shown during collection
+      slideshows. Pressing Escape exits fullscreen and returns to the originating document
+      or collection view. All navigation is keyboard-accessible.
+
+      Collaboration is inherent: because slides are backed by live ECHO objects, edits made
+      by any peer in the workspace are immediately reflected in an open presentation without
+      any manual refresh.
+    `,
+    source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-presenter',
+    icon: { key: 'ph--presentation--regular', hue: 'indigo' },
+    spec: 'PLUGIN.mdl',
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-presenter",
-  "version": "0.9.0",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Braneframe presenter plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,6 +33,11 @@
       "types": "./dist/types/src/meta.d.ts",
       "default": "./dist/lib/neutral/meta.mjs"
     },
+    "#operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "default": "./dist/lib/neutral/operations/index.mjs"
+    },
     "#plugin": {
       "source": {
         "workerd": "./src/PresenterPlugin.workerd.ts",
@@ -77,10 +82,12 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
+    "dx.config.ts",
     "src",
     "PLUGIN.mdl"
   ],
   "dependencies": {
+    "@codemirror/state": "^6.6.0",
     "@effect-atom/atom-react": "^0.5.0",
     "hastscript": "^7.1.0",
     "highlight.js": "^11.9.0",
@@ -92,45 +99,46 @@
     "remark-frontmatter": "^5.0.0",
     "remark-parse-frontmatter": "^1.0.3",
     "reveal.js": "^5.1.0",
-    "@dxos/app-framework": "0.9.0",
-    "@dxos/app-toolkit": "0.9.0",
-    "@dxos/echo": "0.9.0",
-    "@dxos/effect": "0.9.0",
-    "@dxos/compute": "0.9.0",
-    "@dxos/plugin-client": "0.9.0",
-    "@dxos/keys": "0.9.0",
-    "@dxos/plugin-deck": "0.9.0",
-    "@dxos/plugin-markdown": "0.9.0",
-    "@dxos/react-ui-form": "0.9.0",
-    "@dxos/plugin-graph": "0.9.0",
-    "@dxos/util": "0.9.0",
-    "@dxos/react-ui-attention": "0.9.0",
-    "@dxos/log": "0.9.0"
+    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-deck": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/compute": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-markdown": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-editor": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-form": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a",
+    "@dxos/effect": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "@types/react": "~19.2.7",
+    "@effect/platform": "0.96.2",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "@types/reveal.js": "^5.0.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/plugin-testing": "0.9.0",
-    "@dxos/random": "0.9.0",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/storybook-utils": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/PresenterPlugin.test.ts

@@ -10,7 +10,7 @@ import { PresenterPlugin } from '#plugin';
 
 import { meta } from './meta';
 
-const moduleId = (name: string) => `${meta.id}.module.${name}`;
+const moduleId = (name: string) => `${meta.profile.key}.module.${name}`;
 
 describe('PresenterPlugin', () => {
   test('modules activate on the expected events', async ({ expect }) => {

package/src/PresenterPlugin.tsx

@@ -4,8 +4,9 @@
 
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
+import { MarkdownEvents } from '@dxos/plugin-markdown';
 
-import { AppGraphBuilder, PresenterSettings, ReactSurface } from '#capabilities';
+import { AppGraphBuilder, MarkdownExtension, OperationHandler, PresenterSettings, ReactSurface } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
 
@@ -17,11 +18,17 @@ import pluginSpec from '../PLUGIN.mdl?raw';
 
 export const PresenterPlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSettingsModule({ activate: PresenterSettings }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  Plugin.addModule({
+    id: `${meta.profile.key}/markdown`,
+    activatesOn: MarkdownEvents.SetupExtensions,
+    activate: MarkdownExtension,
+  }),
   AppPlugin.addTranslationsModule({ translations }),
   AppPlugin.addPluginAssetModule({
-    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
   }),
   Plugin.make,
 );

package/src/capabilities/app-graph-builder.ts

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
-import { Capabilities, Capability } from '@dxos/app-framework';
-import { AppCapabilities, AppNode, LayoutOperation, getObjectPathFromObject, getSpacePath } from '@dxos/app-toolkit';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, AppNode } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { Collection, Obj } from '@dxos/echo';
-import { DeckCapabilities, DeckOperation } from '@dxos/plugin-deck';
 import { GraphBuilder, type Node, NodeMatcher } from '@dxos/plugin-graph';
 import { Markdown } from '@dxos/plugin-markdown';
 import { linkedSegment } from '@dxos/react-ui-attention';
@@ -19,9 +19,9 @@ import { PresenterOperation } from '#types';
 import { PresenterCapabilities } from '#types';
 
 /** Match nodes that can be presented (Collection or Document). */
-const whenPresentable = (node: Node.Node) =>
-  Option.orElse(NodeMatcher.whenEchoType(Collection.Collection)(node), () =>
-    NodeMatcher.whenEchoType(Markdown.Document)(node),
+const whenPresentable = (node: Node.Node, get: Atom.Context) =>
+  Option.orElse(NodeMatcher.whenEchoType(Collection.Collection)(node, get), () =>
+    NodeMatcher.whenEchoType(Markdown.Document)(node, get),
   );
 
 export default Capability.makeModule(
@@ -47,7 +47,7 @@ export default Capability.makeModule(
             id: linkedSegment('presenter'),
             label: 'Presenter',
             icon: 'ph--presentation--regular',
-            data: { type: meta.id, object },
+            data: { type: meta.profile.key, object },
           }),
         ]);
       },
@@ -61,30 +61,15 @@ export default Capability.makeModule(
         if (!isPresentable || !db) {
           return Effect.succeed([]);
         }
-        const objectPath = getObjectPathFromObject(object);
 
         return Effect.succeed([
           {
             id: PresenterOperation.TogglePresentation.meta.key,
-            // TODO(burdon): Allow function so can generate state when activated.
-            //  So can set explicit fullscreen state coordinated with current presenter state.
             data: Effect.fnUntraced(function* () {
-              const deckState = yield* Capabilities.getAtomValue(DeckCapabilities.State);
-              const deck = deckState.decks[deckState.activeDeck];
-              const presenterId = `${objectPath}/${linkedSegment('presenter')}`;
-              if (!deck?.fullscreen) {
-                yield* Operation.invoke(DeckOperation.Adjust, {
-                  type: 'solo--fullscreen' as const,
-                  id: presenterId,
-                });
-              }
-              yield* Operation.invoke(LayoutOperation.Open, {
-                subject: [presenterId],
-                workspace: getSpacePath(db.spaceId),
-              });
+              yield* Operation.invoke(PresenterOperation.TogglePresentation, { object });
             }),
             properties: {
-              label: ['toggle-presentation.label', { ns: meta.id }],
+              label: ['toggle-presentation.label', { ns: meta.profile.key }],
               icon: 'ph--presentation--regular',
               disposition: 'list-item',
               keyBinding: {

package/src/capabilities/index.ts

@@ -3,7 +3,13 @@
 //
 
 import { Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
 
 export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const MarkdownExtension = Capability.lazy('MarkdownExtension', () => import('./markdown-extension'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
 export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
 export const PresenterSettings = Capability.lazy('PresenterSettings', () => import('./settings'));

package/src/capabilities/markdown-extension.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Prec } from '@codemirror/state';
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { MarkdownCapabilities } from '@dxos/plugin-markdown/types';
+import { keymap } from '@dxos/ui-editor';
+
+import { PresenterOperation } from '#types';
+
+/**
+ * Contributes the present shortcut (Shift+Cmd+P) to the markdown editor so presentation
+ * can be toggled while editing without relying on the global navtree keyboard context.
+ */
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const capabilities = yield* Capability.Service;
+
+    return Capability.contributes(MarkdownCapabilities.ExtensionProvider, [
+      ({ document }) => {
+        if (!document) {
+          return undefined;
+        }
+
+        const { invokePromise } = capabilities.get(Capabilities.OperationInvoker);
+        return Prec.highest(
+          keymap.of([
+            {
+              key: 'Shift-Mod-p',
+              preventDefault: true,
+              stopPropagation: true,
+              run: () => {
+                void invokePromise(PresenterOperation.TogglePresentation, { object: document });
+                return true;
+              },
+            },
+          ]),
+        );
+      },
+    ]);
+  }),
+);

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { PresenterOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, PresenterOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -6,61 +6,52 @@ import * as Effect from 'effect/Effect';
 import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { Surface, useSettingsState } from '@dxos/app-framework/ui';
+import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Collection, Obj } from '@dxos/echo';
 import { Markdown } from '@dxos/plugin-markdown';
+import { Position } from '@dxos/util';
 
-import { PresenterSettings } from '#components';
-import { CollectionPresenterArticle, DocumentPresenterContainer, MarkdownSlide } from '#containers';
+import { CollectionArticle, DocumentArticle, SlideArticle } from '#containers';
 import { meta } from '#meta';
-import { type Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: 'document',
-        position: 'first',
-        filter: AppSurface.predicate(
+        position: Position.first,
+        filter: Surface.makeFilter(
           AppSurface.Article,
-          (data): data is AppSurface.ArticleData<{ type: typeof meta.id; object: Markdown.Document }> =>
+          (data): data is AppSurface.ArticleData<{ type: typeof meta.profile.key; object: Markdown.Document }> =>
             !!data.subject &&
             typeof data.subject === 'object' &&
             'type' in data.subject &&
             'object' in data.subject &&
-            data.subject.type === meta.id &&
+            data.subject.type === meta.profile.key &&
             Obj.instanceOf(Markdown.Document, data.subject.object),
         ),
-        component: ({ data }) => <DocumentPresenterContainer document={data.subject.object} />,
+        component: ({ role, data }) => <DocumentArticle role={role} subject={data.subject.object} />,
       }),
       Surface.create({
         id: 'collection',
-        position: 'first',
-        filter: AppSurface.predicate(
+        position: Position.first,
+        filter: Surface.makeFilter(
           AppSurface.Article,
-          (data): data is AppSurface.ArticleData<{ type: typeof meta.id; object: Collection.Collection }> =>
+          (data): data is AppSurface.ArticleData<{ type: typeof meta.profile.key; object: Collection.Collection }> =>
             !!data.subject &&
             typeof data.subject === 'object' &&
             'type' in data.subject &&
             'object' in data.subject &&
-            data.subject.type === meta.id &&
+            data.subject.type === meta.profile.key &&
             Obj.instanceOf(Collection.Collection, data.subject.object),
         ),
-        component: ({ role, data }) => <CollectionPresenterArticle role={role} subject={data.subject.object} />,
+        component: ({ role, data }) => <CollectionArticle role={role} subject={data.subject.object} />,
       }),
       Surface.create({
         id: 'slide',
         filter: AppSurface.object(AppSurface.Slide, Markdown.Document),
-        component: ({ data }) => <MarkdownSlide document={data.subject} />,
-      }),
-      Surface.create({
-        id: 'pluginSettings',
-        filter: AppSurface.settings(AppSurface.Article, meta.id),
-        component: ({ data: { subject } }) => {
-          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
-          return <PresenterSettings settings={settings} onSettingsChange={updateSettings} />;
-        },
+        component: ({ data }) => <SlideArticle {...data} />,
       }),
     ]),
   ),

package/src/capabilities/settings.ts

@@ -14,7 +14,7 @@ import { PresenterCapabilities, Settings } from '#types';
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
-      key: meta.id,
+      key: meta.profile.key,
       schema: Settings.Settings,
       defaultValue: () => ({}),
     });
@@ -22,7 +22,7 @@ export default Capability.makeModule(() =>
     return [
       Capability.contributes(PresenterCapabilities.Settings, settingsAtom),
       Capability.contributes(AppCapabilities.Settings, {
-        prefix: meta.id,
+        prefix: meta.profile.key,
         schema: Settings.Settings,
         atom: settingsAtom,
       }),

package/src/components/Markdown/Panel.stories.tsx

@@ -14,7 +14,7 @@ import { Slide, type SlideProps } from './Slide';
 
 const DefaultStory = ({ content = '' }: SlideProps) => {
   return (
-    <Panel classNames='bg-neutral-200'>
+    <Panel classNames='bg-scrim-surface'>
       <Slide content={content} />
     </Panel>
   );

package/src/components/Presenter/PresentationShell.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+
+import { composable, composableProps } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+export type PresentationShellProps = PropsWithChildren<{
+  /** Fade-in/out duration (ms). */
+  fadeDuration?: number;
+  /** Duration the [ESC] hint remains visible (ms). */
+  hintDuration?: number;
+  /** Whether the presentation is fullscreen. */
+  fullscreen?: boolean;
+  /** Invoked once the exit fade-out has completed. */
+  onExit?: () => void;
+}>;
+
+/**
+ * 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.
+ */
+export const PresentationShell = composable<HTMLDivElement, PresentationShellProps>(
+  ({ children, fadeDuration = 300, hintDuration = 3000, fullscreen = true, onExit, ...props }, forwardedRef) => {
+    const [visible, setVisible] = useState(false);
+    const [exiting, setExiting] = useState(false);
+    const [showHint, setShowHint] = useState(true);
+    const exitTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+    // Guards against exiting twice; a state updater can't gate this since React double-invokes
+    // updaters in dev, which would schedule the exit (and its side effects) more than once.
+    const exitingRef = useRef(false);
+
+    // Fade in once mounted.
+    useEffect(() => {
+      const frame = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(frame);
+    }, []);
+
+    // Hide the hint after the configured duration.
+    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), []);
+
+    // Capture ESC before the deck/reveal handlers so a single keypress exits directly.
+    useEffect(() => {
+      const handler = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          handleExit();
+        }
+      };
+
+      document.addEventListener('keydown', handler, { capture: true });
+      return () => document.removeEventListener('keydown', handler, { capture: true });
+    }, [handleExit]);
+
+    return (
+      <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}
+        {fullscreen && (
+          <div
+            className={mx(
+              'absolute top-4 left-4 z-[300] transition-opacity duration-500',
+              showHint && !exiting ? 'opacity-100' : 'opacity-0',
+            )}
+          >
+            <span className='rounded-sm bg-white/10 px-2 py-1 font-mono text-sm text-white/70'>[ESC]</span>
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/Presenter/index.ts

@@ -4,3 +4,4 @@
 
 export * from './Layout';
 export * from './Pager';
+export * from './PresentationShell';

package/src/components/RevealPlayer/RevealPlayer.tsx

@@ -17,6 +17,7 @@ import RevealMarkdown from 'reveal.js/plugin/markdown/plugin.js';
 
 import { useAsyncEffect } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 const styles = `
 <style type="text/css">
@@ -148,23 +149,21 @@ export const RevealPlayer = composable<HTMLDivElement, RevealProps>(
     return (
       <div
         {...composableProps(props, {
-          classNames: ['dx-container grid place-items-center bg-black', fullscreen && 'absolute inset-0'],
+          classNames: ['dx-container grid place-items-center bg-scrim-surface', fullscreen && 'absolute inset-0'],
         })}
         ref={forwardedRef}
       >
         <div className='relative aspect-video h-full w-full h-auto max-h-full overflow-hidden'>
           <div ref={deckDivRef} className='absolute inset-0 reveal'>
-            {/* NOTE: Must be in head. */}
-            <style>
-              <link rel='preconnect' href='https://fonts.googleapis.com' />
-              <link rel='preconnect' href='https://fonts.gstatic.com' {...{ crossOrigin: '' }} />
-              <link
-                rel='stylesheet'
-                href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'
-              />
-            </style>
-            <div className='slides'>
-              <div className='text-center!' />
+            {/* React hoists these to <head>; they must not be wrapped in <style> (which only renders CSS text). */}
+            <link rel='preconnect' href='https://fonts.gstatic.com' {...{ crossOrigin: '' }} />
+            <link rel='preconnect' href='https://fonts.googleapis.com' />
+            <link
+              rel='stylesheet'
+              href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'
+            />
+            <div className={mx('slides', !fullscreen && 'bg-base-surface p-8')}>
+              <div />
               <section {...{ 'data-markdown': [] }}>
                 <textarea {...{ 'data-template': true }} defaultValue={[styles, content].join('\n')}></textarea>
               </section>

package/src/components/index.ts

@@ -2,10 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
 export * from './Markdown';
 export * from './Presenter';
 export * from './RevealPlayer';
-
-export const PresenterSettings: ComponentType<any> = lazy(() => import('./PresenterSettings'));

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useContext, useState } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { type Collection, Obj } from '@dxos/echo';
+import { Panel } from '@dxos/react-ui';
+
+import { PageNumber, Pager, PresentationShell, Layout as PresenterLayout } from '#components';
+import { PresenterContext } from '#types';
+
+import { useExitPresenter } from '../../useExitPresenter';
+
+export type CollectionArticleProps = AppSurface.ObjectArticleProps<Collection.Collection>;
+
+export const CollectionArticle = ({ role, subject: collection }: CollectionArticleProps) => {
+  const [slide, setSlide] = useState(0);
+  const { running } = useContext(PresenterContext);
+  const handleExit = useExitPresenter(collection);
+
+  return (
+    <Panel.Root role={role} classNames='relative'>
+      <Panel.Content asChild>
+        <PresentationShell onExit={handleExit}>
+          <PresenterLayout
+            bottomRight={<PageNumber index={slide} count={collection.objects.length} />}
+            bottomLeft={<Pager index={slide} count={collection.objects.length} keys={running} onChange={setSlide} />}
+          >
+            <Surface.Surface
+              type={AppSurface.Slide}
+              data={{
+                subject: collection.objects[slide],
+                attendableId: Obj.getURI(collection),
+              }}
+            />
+          </PresenterLayout>
+        </PresentationShell>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/CollectionArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { CollectionArticle as default } from './CollectionArticle';