@dxos/plugin-presenter 0.8.2-staging.7ac8446 → 0.8.2

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

@@ -2,51 +2,81 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginsContext, Capabilities, createIntent } from '@dxos/app-framework';
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
+
+import { contributes, type PluginContext, Capabilities, createIntent, LayoutAction } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
-import { createExtension, type Node } from '@dxos/plugin-graph';
+import { DeckCapabilities } from '@dxos/plugin-deck';
+import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
+import { createExtension, rxFromSignal } from '@dxos/plugin-graph';
 import { DocumentType } from '@dxos/plugin-markdown/types';
 import { CollectionType } from '@dxos/plugin-space/types';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 
 import { PRESENTER_PLUGIN } from '../meta';
 import { PresenterAction, type PresenterSettingsProps } from '../types';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(
     Capabilities.AppGraphBuilder,
     createExtension({
       id: PRESENTER_PLUGIN,
-      filter: (node): node is Node<CollectionType | DocumentType> => {
-        const settings = context
-          .requestCapabilities(Capabilities.SettingsStore)[0]
-          ?.getStore<PresenterSettingsProps>(PRESENTER_PLUGIN)?.value;
-        return settings?.presentCollections
-          ? isInstanceOf(CollectionType, node.data) || isInstanceOf(DocumentType, node.data)
-          : isInstanceOf(DocumentType, node.data);
-      },
-      actions: ({ node }) => {
-        const object = node.data;
-        const id = fullyQualifiedId(object);
-        return [
-          {
-            id: `${PresenterAction.TogglePresentation._tag}/${id}`,
-            // TODO(burdon): Allow function so can generate state when activated.
-            //  So can set explicit fullscreen state coordinated with current presenter state.
-            data: async () => {
-              const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-              await dispatch(createIntent(PresenterAction.TogglePresentation, { object }));
-            },
-            properties: {
-              label: ['toggle presentation label', { ns: PRESENTER_PLUGIN }],
-              icon: 'ph--presentation--regular',
-              keyBinding: {
-                macos: 'shift+meta+p',
-                windows: 'shift+alt+p',
-              },
-            },
-          },
-        ];
-      },
+      actions: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => {
+              const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));
+              const settings = get(
+                rxFromSignal(() => settingsStore?.getStore<PresenterSettingsProps>(PRESENTER_PLUGIN)?.value),
+              );
+              const isPresentable = settings?.presentCollections
+                ? isInstanceOf(CollectionType, node.data) || isInstanceOf(DocumentType, node.data)
+                : isInstanceOf(DocumentType, node.data);
+              return isPresentable ? Option.some(node.data) : Option.none();
+            }),
+            Option.map((object) => {
+              const id = fullyQualifiedId(object);
+              const spaceId = getSpace(object)?.id;
+              return [
+                {
+                  id: `${PresenterAction.TogglePresentation._tag}/${id}`,
+                  // TODO(burdon): Allow function so can generate state when activated.
+                  //  So can set explicit fullscreen state coordinated with current presenter state.
+                  data: async () => {
+                    const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+                    const layout = context.getCapability(DeckCapabilities.MutableDeckState);
+                    const presenterId = [id, 'presenter'].join(ATTENDABLE_PATH_SEPARATOR);
+                    if (!layout.deck.fullscreen) {
+                      void dispatch(
+                        createIntent(DeckAction.Adjust, {
+                          type: 'solo--fullscreen',
+                          id: presenterId,
+                        }),
+                      );
+                    }
+                    await dispatch(
+                      createIntent(LayoutAction.Open, {
+                        part: 'main',
+                        subject: [presenterId],
+                        options: { workspace: spaceId },
+                      }),
+                    );
+                  },
+                  properties: {
+                    label: ['toggle presentation label', { ns: PRESENTER_PLUGIN }],
+                    icon: 'ph--presentation--regular',
+                    keyBinding: {
+                      macos: 'shift+meta+p',
+                      windows: 'shift+alt+p',
+                    },
+                  },
+                },
+              ];
+            }),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
   );

package/src/capabilities/index.ts

@@ -5,9 +5,5 @@
 import { lazy } from '@dxos/app-framework';
 
 export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
-export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));
 export const PresenterSettings = lazy(() => import('./settings'));
-export const PresenterState = lazy(() => import('./state'));
-
-export * from './capabilities';

package/src/capabilities/react-surface.tsx

@@ -4,46 +4,38 @@
 
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
 import { SettingsStore } from '@dxos/local-storage';
 import { DocumentType } from '@dxos/plugin-markdown/types';
 import { CollectionType } from '@dxos/plugin-space/types';
 
-import { PresenterCapabilities } from './capabilities';
-import { MarkdownSlide, PresenterSettings, PresenterMain, RevealMain } from '../components';
+import {
+  MarkdownSlide,
+  PresenterSettings,
+  DocumentPresenterContainer,
+  CollectionPresenterContainer,
+} from '../components';
 import { PRESENTER_PLUGIN } from '../meta';
-import { PresenterContext, type PresenterSettingsProps } from '../types';
+import { type PresenterSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
       id: `${PRESENTER_PLUGIN}/document`,
-      role: 'main',
+      role: 'article',
       position: 'hoist',
-      filter: (data): data is { subject: DocumentType } => isInstanceOf(DocumentType, data.subject),
-      component: ({ data }) => <RevealMain document={data.subject} />,
+      filter: (data): data is { subject: DocumentType; variant: 'presenter' } =>
+        isInstanceOf(DocumentType, data.subject) && data.variant === 'presenter',
+      component: ({ data }) => <DocumentPresenterContainer document={data.subject} />,
     }),
     createSurface({
       id: `${PRESENTER_PLUGIN}/collection`,
-      role: 'main',
+      role: 'article',
       position: 'hoist',
-      filter: (data): data is { subject: CollectionType } => isInstanceOf(CollectionType, data.subject),
-      component: ({ data }) => {
-        const state = useCapability(PresenterCapabilities.MutableState);
-
-        return (
-          <PresenterContext.Provider
-            value={{
-              running: state.presenting,
-              start: () => (state.presenting = true),
-              stop: () => (state.presenting = false),
-            }}
-          >
-            <PresenterMain collection={data.subject} />
-          </PresenterContext.Provider>
-        );
-      },
+      filter: (data): data is { subject: CollectionType; variant: 'presenter' } =>
+        isInstanceOf(CollectionType, data.subject) && data.variant === 'presenter',
+      component: ({ data }) => <CollectionPresenterContainer collection={data.subject} />,
     }),
     createSurface({
       id: `${PRESENTER_PLUGIN}/slide`,

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { PRESENTER_PLUGIN } from '../meta';
 import { PresenterSettingsSchema, type PresenterSettingsProps } from '../types';
 
 export default () => {
-  const settings = create<PresenterSettingsProps>({});
+  const settings = live<PresenterSettingsProps>({});
 
   return contributes(Capabilities.Settings, {
     schema: PresenterSettingsSchema,

package/src/components/CollectionPresenterContainer.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC, useContext, useState } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { type CollectionType } from '@dxos/plugin-space/types';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { Layout, PageNumber, Pager } from './Presenter';
+import { PresenterContext } from '../types';
+import { useExitPresenter } from '../useExitPresenter';
+
+const CollectionPresenterContainer: FC<{ collection: CollectionType }> = ({ collection }) => {
+  const [slide, setSlide] = useState(0);
+
+  const { running } = useContext(PresenterContext);
+
+  const handleExit = useExitPresenter(collection);
+
+  return (
+    <StackItem.Content classNames='relative'>
+      <Layout
+        bottomRight={<PageNumber index={slide} count={collection.objects.length} />}
+        bottomLeft={
+          <Pager
+            index={slide}
+            count={collection.objects.length}
+            keys={running}
+            onChange={setSlide}
+            onExit={handleExit}
+          />
+        }
+      >
+        {/* TODO(wittjosiah): Better slide placeholder. */}
+        <Surface role='slide' data={{ subject: collection.objects[slide] }} placeholder={<></>} />
+      </Layout>
+    </StackItem.Content>
+  );
+};
+
+export default CollectionPresenterContainer;

package/src/components/DocumentPresenterContainer.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { type FC } from 'react';
+
+import { type DocumentType } from '@dxos/plugin-markdown/types';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { RevealPlayer } from './RevealPlayer';
+import { useExitPresenter } from '../useExitPresenter';
+
+const DocumentPresenterContainer: FC<{ document: DocumentType }> = ({ document }) => {
+  const handleExit = useExitPresenter(document);
+
+  return (
+    <StackItem.Content classNames='relative'>
+      <RevealPlayer content={document.content.target?.content ?? ''} onExit={handleExit} />
+    </StackItem.Content>
+  );
+};
+
+export default DocumentPresenterContainer;

package/src/components/Markdown/theme.ts

@@ -20,7 +20,7 @@ export const theme = {
     ol: 'my-[16px] ml-24 leading-relaxed list-decimal',
     li: 'pl-6 text-[48px]',
 
-    pre: 'w-full mx-0 my-[32px] p-0 __border-l-[16px] bg-input p-4 __whitespace-pre-line',
+    pre: 'w-full mx-0 my-[32px] p-0 __border-l-[16px] bg-inputSurface p-4 __whitespace-pre-line',
     code: 'p-0 text-[40px]',
   },
 };

package/src/components/index.ts

@@ -7,5 +7,5 @@ import { lazy } from 'react';
 export * from './PresenterSettings';
 
 export const MarkdownSlide = lazy(() => import('./MarkdownSlide'));
-export const RevealMain = lazy(() => import('./RevealMain'));
-export const PresenterMain = lazy(() => import('./PresenterMain'));
+export const DocumentPresenterContainer = lazy(() => import('./DocumentPresenterContainer'));
+export const CollectionPresenterContainer = lazy(() => import('./CollectionPresenterContainer'));

package/src/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export { PresenterCapabilities } from './capabilities';
 export * from './components';
 
 export * from './meta';

package/src/types.ts

@@ -2,9 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Schema } from 'effect';
 import { type Context, createContext } from 'react';
 
-import { S } from '@dxos/echo-schema';
 import { DocumentType } from '@dxos/plugin-markdown/types';
 import { CollectionType } from '@dxos/plugin-space/types';
 
@@ -13,14 +13,14 @@ import { PRESENTER_PLUGIN } from './meta';
 export namespace PresenterAction {
   const PRESENTER_ACTION = `${PRESENTER_PLUGIN}/action`;
 
-  export class TogglePresentation extends S.TaggedClass<TogglePresentation>()(
+  export class TogglePresentation extends Schema.TaggedClass<TogglePresentation>()(
     `${PRESENTER_ACTION}/toggle-presentation`,
     {
-      input: S.Struct({
-        object: S.Union(DocumentType, CollectionType),
-        state: S.optional(S.Boolean),
+      input: Schema.Struct({
+        object: Schema.Union(DocumentType, CollectionType),
+        state: Schema.optional(Schema.Boolean),
       }),
-      output: S.Void,
+      output: Schema.Void,
     },
   ) {}
 }
@@ -37,10 +37,10 @@ export const PresenterContext: Context<PresenterContextType> = createContext<Pre
   stop: () => {},
 });
 
-export const PresenterSettingsSchema = S.mutable(
-  S.Struct({
-    presentCollections: S.optional(S.Boolean),
+export const PresenterSettingsSchema = Schema.mutable(
+  Schema.Struct({
+    presentCollections: Schema.optional(Schema.Boolean),
   }),
 );
 
-export type PresenterSettingsProps = S.Schema.Type<typeof PresenterSettingsSchema>;
+export type PresenterSettingsProps = Schema.Schema.Type<typeof PresenterSettingsSchema>;

package/src/useExitPresenter.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { createIntent, LayoutAction, useCapability, useIntentDispatcher } from '@dxos/app-framework';
+import { type Live } from '@dxos/live-object';
+import { DeckCapabilities } from '@dxos/plugin-deck';
+import { DeckAction } from '@dxos/plugin-deck/types';
+import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+
+export const useExitPresenter = (object: Live<any>) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
+
+  return useCallback(() => {
+    const objectId = fullyQualifiedId(object);
+    if (layout.deck.fullscreen) {
+      void dispatch(
+        createIntent(DeckAction.Adjust, {
+          type: 'solo--fullscreen',
+          id: objectId,
+        }),
+      );
+    }
+    return dispatch(
+      createIntent(LayoutAction.Open, {
+        part: 'main',
+        subject: [objectId],
+        options: { workspace: getSpace(document)?.id },
+      }),
+    );
+  }, [dispatch, object]);
+};

package/dist/lib/browser/PresenterMain-PQPWYIWU.mjs

@@ -1,193 +0,0 @@
-import {
-  PresenterAction,
-  PresenterContext
-} from "./chunk-CQR4O6KC.mjs";
-import "./chunk-S2S5RFJ4.mjs";
-
-// packages/plugins/plugin-presenter/src/components/PresenterMain.tsx
-import React3, { useContext, useState } from "react";
-import { Surface, createIntent, useLayout, useIntentDispatcher } from "@dxos/app-framework";
-import { Main } from "@dxos/react-ui";
-import { baseSurface, topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from "@dxos/react-ui-theme";
-
-// packages/plugins/plugin-presenter/src/components/Presenter/Layout.tsx
-import React from "react";
-import { mx } from "@dxos/react-ui-theme";
-var Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mx("flex grow relative overflow-hidden bg-attention", classNames)
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: mx("flex flex-col grow overflow-hidden")
-  }, children), /* @__PURE__ */ React.createElement("div", {
-    className: "z-[200]"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "absolute top-4 left-4"
-  }, topLeft), /* @__PURE__ */ React.createElement("div", {
-    className: "absolute top-4 right-4"
-  }, topRight), /* @__PURE__ */ React.createElement("div", {
-    className: "absolute bottom-4 left-4"
-  }, bottomLeft), /* @__PURE__ */ React.createElement("div", {
-    className: "absolute bottom-4 right-4"
-  }, bottomRight)));
-};
-
-// packages/plugins/plugin-presenter/src/components/Presenter/Pager.tsx
-import { Play, X, CaretDoubleLeft, CaretDoubleRight, CaretLeft, CaretRight } from "@phosphor-icons/react";
-import React2, { useEffect } from "react";
-import { Button, useControlledState } from "@dxos/react-ui";
-import { getSize, mx as mx2 } from "@dxos/react-ui-theme";
-var Pager = ({ index: controlledIndex = 0, count = 0, keys, onChange, onExit }) => {
-  const [index, setIndex] = useControlledState(controlledIndex);
-  useEffect(() => {
-    onChange?.(index);
-  }, [
-    index
-  ]);
-  const handleChangeIndex = (dir) => {
-    setIndex((index2) => {
-      const next = index2 + dir;
-      return next >= 0 && next < count ? next : index2;
-    });
-  };
-  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__ */ React2.createElement("div", {
-    className: "flex items-center text-neutral-500"
-  }, /* @__PURE__ */ React2.createElement(Button, {
-    variant: "ghost",
-    classNames: "p-0",
-    onClick: () => onChange?.(0)
-  }, /* @__PURE__ */ React2.createElement(CaretDoubleLeft, {
-    className: mx2(getSize(6))
-  })), /* @__PURE__ */ React2.createElement(Button, {
-    variant: "ghost",
-    classNames: "p-0",
-    onClick: () => handleChangeIndex(-1)
-  }, /* @__PURE__ */ React2.createElement(CaretLeft, {
-    className: mx2(getSize(6))
-  })), /* @__PURE__ */ React2.createElement(Button, {
-    variant: "ghost",
-    classNames: "p-0",
-    onClick: () => handleChangeIndex(1)
-  }, /* @__PURE__ */ React2.createElement(CaretRight, {
-    className: mx2(getSize(6))
-  })), /* @__PURE__ */ React2.createElement(Button, {
-    variant: "ghost",
-    classNames: "p-0",
-    onClick: () => onChange?.(count - 1)
-  }, /* @__PURE__ */ React2.createElement(CaretDoubleRight, {
-    className: mx2(getSize(6))
-  })));
-};
-var PageNumber = ({ index = 0, count = 1 }) => {
-  if (index === void 0 || !count) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex items-center text-neutral-500 text-2xl"
-  }, /* @__PURE__ */ React2.createElement("div", null, index + 1, " / ", count));
-};
-var StartButton = ({ running, onClick }) => {
-  return /* @__PURE__ */ React2.createElement(Button, {
-    variant: "ghost",
-    classNames: "p-0",
-    onClick: () => onClick?.(!running)
-  }, running && /* @__PURE__ */ React2.createElement(X, {
-    className: mx2(getSize(6))
-  }) || /* @__PURE__ */ React2.createElement(Play, {
-    className: mx2(getSize(6))
-  }));
-};
-
-// packages/plugins/plugin-presenter/src/components/PresenterMain.tsx
-var PresenterMain = ({ collection }) => {
-  const [slide, setSlide] = useState(0);
-  const layout = useLayout();
-  const fullscreen = layout.mode === "fullscreen";
-  const { running } = useContext(PresenterContext);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const handleSetRunning = (running2) => {
-    void dispatch(createIntent(PresenterAction.TogglePresentation, {
-      object: collection,
-      state: running2
-    }));
-  };
-  return /* @__PURE__ */ React3.createElement(Main.Content, {
-    classNames: [
-      baseSurface,
-      fixedInsetFlexLayout,
-      !fullscreen && topbarBlockPaddingStart,
-      !fullscreen && bottombarBlockPaddingEnd
-    ]
-  }, /* @__PURE__ */ React3.createElement(Layout, {
-    topRight: /* @__PURE__ */ React3.createElement(StartButton, {
-      running,
-      onClick: (running2) => handleSetRunning(running2)
-    }),
-    bottomRight: /* @__PURE__ */ React3.createElement(PageNumber, {
-      index: slide,
-      count: collection.objects.length
-    }),
-    bottomLeft: /* @__PURE__ */ React3.createElement(Pager, {
-      index: slide,
-      count: collection.objects.length,
-      keys: running,
-      onChange: setSlide,
-      onExit: () => handleSetRunning(false)
-    })
-  }, /* @__PURE__ */ React3.createElement(Surface, {
-    role: "slide",
-    data: {
-      subject: collection.objects[slide]
-    },
-    placeholder: /* @__PURE__ */ React3.createElement(React3.Fragment, null)
-  })));
-};
-var PresenterMain_default = PresenterMain;
-export {
-  PresenterMain_default as default
-};
-//# sourceMappingURL=PresenterMain-PQPWYIWU.mjs.map

package/dist/lib/browser/PresenterMain-PQPWYIWU.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/PresenterMain.tsx", "../../../src/components/Presenter/Layout.tsx", "../../../src/components/Presenter/Pager.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC, useContext, useState } from 'react';\n\nimport { Surface, createIntent, useLayout, useIntentDispatcher } from '@dxos/app-framework';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { Main } from '@dxos/react-ui';\nimport {\n  baseSurface,\n  topbarBlockPaddingStart,\n  fixedInsetFlexLayout,\n  bottombarBlockPaddingEnd,\n} from '@dxos/react-ui-theme';\n\nimport { Layout, PageNumber, Pager, StartButton } from './Presenter';\nimport { PresenterContext, PresenterAction } from '../types';\n\nconst PresenterMain: FC<{ collection: CollectionType }> = ({ collection }) => {\n  const [slide, setSlide] = useState(0);\n\n  // TODO(burdon): Should not depend on split screen.\n  const layout = useLayout();\n  const fullscreen = layout.mode === 'fullscreen';\n  const { running } = useContext(PresenterContext);\n\n  // TODO(burdon): Currently conflates fullscreen and running.\n  const { dispatchPromise: dispatch } = useIntentDispatcher();\n  const handleSetRunning = (running: boolean) => {\n    void dispatch(createIntent(PresenterAction.TogglePresentation, { object: collection, state: running }));\n  };\n\n  return (\n    <Main.Content\n      classNames={[\n        baseSurface,\n        fixedInsetFlexLayout,\n        !fullscreen && topbarBlockPaddingStart,\n        !fullscreen && bottombarBlockPaddingEnd,\n      ]}\n    >\n      <Layout\n        topRight={<StartButton running={running} onClick={(running) => handleSetRunning(running)} />}\n        bottomRight={<PageNumber index={slide} count={collection.objects.length} />}\n        bottomLeft={\n          <Pager\n            index={slide}\n            count={collection.objects.length}\n            keys={running}\n            onChange={setSlide}\n            onExit={() => handleSetRunning(false)}\n          />\n        }\n      >\n        {/* TODO(wittjosiah): Better slide placeholder. */}\n        <Surface role='slide' data={{ subject: collection.objects[slide] }} placeholder={<></>} />\n      </Layout>\n    </Main.Content>\n  );\n};\n\nexport default PresenterMain;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type ReactNode } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type LayoutProps = ThemedClassName<\n  PropsWithChildren<{\n    className?: string;\n    topLeft?: ReactNode;\n    topRight?: ReactNode;\n    bottomLeft?: ReactNode;\n    bottomRight?: ReactNode;\n  }>\n>;\n\nexport const Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }: LayoutProps) => {\n  return (\n    <div className={mx('flex grow relative overflow-hidden bg-attention', classNames)}>\n      <div className={mx('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// Copyright 2023 DXOS.org\n//\n\nimport { Play, X, CaretDoubleLeft, CaretDoubleRight, CaretLeft, CaretRight } from '@phosphor-icons/react';\nimport React, { type FC, useEffect } from 'react';\n\nimport { Button, useControlledState } from '@dxos/react-ui';\nimport { getSize, mx } from '@dxos/react-ui-theme';\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: controlledIndex = 0, count = 0, keys, onChange, onExit }: PagerProps) => {\n  const [index, setIndex] = useControlledState(controlledIndex);\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      <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(0)}>\n        <CaretDoubleLeft className={mx(getSize(6))} />\n      </Button>\n      <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(-1)}>\n        <CaretLeft className={mx(getSize(6))} />\n      </Button>\n      <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(1)}>\n        <CaretRight className={mx(getSize(6))} />\n      </Button>\n      <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(count - 1)}>\n        <CaretDoubleRight className={mx(getSize(6))} />\n      </Button>\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: FC<{ running?: boolean; onClick?: (start: boolean) => void }> = ({ running, onClick }) => {\n  return (\n    <Button variant='ghost' classNames='p-0' onClick={() => onClick?.(!running)}>\n      {(running && <X className={mx(getSize(6))} />) || <Play className={mx(getSize(6))} />}\n    </Button>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["React", "useContext", "useState", "Surface", "createIntent", "useLayout", "useIntentDispatcher", "Main", "baseSurface", "topbarBlockPaddingStart", "fixedInsetFlexLayout", "bottombarBlockPaddingEnd", "React", "mx", "Layout", "children", "classNames", "topLeft", "topRight", "bottomLeft", "bottomRight", "div", "className", "mx", "Play", "X", "CaretDoubleLeft", "CaretDoubleRight", "CaretLeft", "CaretRight", "React", "useEffect", "Button", "useControlledState", "getSize", "mx", "Pager", "index", "controlledIndex", "count", "keys", "onChange", "onExit", "setIndex", "useControlledState", "useEffect", "handleChangeIndex", "dir", "next", "keydownHandler", "event", "key", "shiftKey", "window", "addEventListener", "removeEventListener", "undefined", "React", "div", "className", "Button", "variant", "classNames", "onClick", "CaretDoubleLeft", "mx", "getSize", "CaretLeft", "CaretRight", "CaretDoubleRight", "PageNumber", "StartButton", "running", "X", "Play", "PresenterMain", "collection", "slide", "setSlide", "useState", "layout", "useLayout", "fullscreen", "mode", "running", "useContext", "PresenterContext", "dispatchPromise", "dispatch", "useIntentDispatcher", "handleSetRunning", "createIntent", "PresenterAction", "TogglePresentation", "object", "state", "React", "Main", "Content", "classNames", "baseSurface", "fixedInsetFlexLayout", "topbarBlockPaddingStart", "bottombarBlockPaddingEnd", "Layout", "topRight", "StartButton", "onClick", "bottomRight", "PageNumber", "index", "count", "objects", "length", "bottomLeft", "Pager", "keys", "onChange", "onExit", "Surface", "role", "data", "subject", "placeholder"]
-}