@dxos/plugin-presenter 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-presenter",
-  "version": "0.8.4-main.3eb6e50203",
+  "version": "0.8.4-main.4a85c3132b",
   "description": "Braneframe presenter plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,8 +14,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "browser": "./dist/lib/browser/index.mjs",
       "source": "./src/index.ts",
+      "browser": "./dist/lib/browser/index.mjs",
       "types": "./dist/types/src/index.d.ts"
     }
   },
@@ -40,25 +40,25 @@
     "remark-frontmatter": "^5.0.0",
     "remark-parse-frontmatter": "^1.0.3",
     "reveal.js": "^5.1.0",
-    "@dxos/app-toolkit": "0.8.4-main.3eb6e50203",
-    "@dxos/echo": "0.8.4-main.3eb6e50203",
-    "@dxos/effect": "0.8.4-main.3eb6e50203",
-    "@dxos/log": "0.8.4-main.3eb6e50203",
-    "@dxos/app-framework": "0.8.4-main.3eb6e50203",
-    "@dxos/operation": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-deck": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-markdown": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-client": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-graph": "0.8.4-main.3eb6e50203",
-    "@dxos/react-client": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-form": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-mosaic": "0.8.4-main.3eb6e50203",
-    "@dxos/async": "0.8.4-main.3eb6e50203",
-    "@dxos/types": "0.8.4-main.3eb6e50203",
-    "@dxos/schema": "0.8.4-main.3eb6e50203",
-    "@dxos/util": "0.8.4-main.3eb6e50203"
+    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
+    "@dxos/async": "0.8.4-main.4a85c3132b",
+    "@dxos/echo": "0.8.4-main.4a85c3132b",
+    "@dxos/effect": "0.8.4-main.4a85c3132b",
+    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
+    "@dxos/operation": "0.8.4-main.4a85c3132b",
+    "@dxos/log": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-deck": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-markdown": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-stack": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-form": "0.8.4-main.4a85c3132b",
+    "@dxos/react-client": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-mosaic": "0.8.4-main.4a85c3132b",
+    "@dxos/types": "0.8.4-main.4a85c3132b",
+    "@dxos/schema": "0.8.4-main.4a85c3132b",
+    "@dxos/util": "0.8.4-main.4a85c3132b"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -69,11 +69,11 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.4a85c3132b",
+    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -81,8 +81,8 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "publishConfig": {
     "access": "public"

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

@@ -8,12 +8,12 @@ import * as Option from 'effect/Option';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
+import { Collection } from '@dxos/echo';
 import { Operation } from '@dxos/operation';
 import { DeckCapabilities } from '@dxos/plugin-deck';
 import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
 import { GraphBuilder, type Node, NodeMatcher } from '@dxos/plugin-graph';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { Collection } from '@dxos/schema';
 
 import { meta } from '../../meta';
 import { PresenterCapabilities, PresenterOperation } from '../../types';

package/src/capabilities/react-surface/react-surface.tsx

@@ -9,15 +9,15 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface, useSettingsState } from '@dxos/app-framework/ui';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
+import { Collection } from '@dxos/echo';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { Collection } from '@dxos/schema';
 
 import {
   CollectionPresenterContainer,
   DocumentPresenterContainer,
   MarkdownSlide,
   PresenterSettings,
-} from '../../components';
+} from '../../containers';
 import { meta } from '../../meta';
 import { type PresenterSettingsProps } from '../../types';
 

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

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { createSlide } from '../../testing';
 
@@ -21,9 +21,9 @@ const DefaultStory = ({ content = '' }: SlideProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-presenter/Container',
+  title: 'plugins/plugin-presenter/components/Container',
   render: DefaultStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Markdown/Container.tsx

@@ -35,8 +35,8 @@ export const Container = ({ children, classNames }: ContainerProps) => {
   // TODO(burdon): Reconcile highlight colors with markdown editor.
   // https://www.npmjs.com/package/react-markdown
   return (
-    <div ref={containerRef} className={mx('flex grow relative overflow-hidden bg-attention', classNames)}>
-      <div className={mx('flex is-full bs-full overflow-hidden absolute')} style={props}>
+    <div ref={containerRef} className={mx('flex grow relative overflow-hidden bg-attention-surface', classNames)}>
+      <div className={mx('flex w-full h-full overflow-hidden absolute')} style={props}>
         {width && height && children}
       </div>
     </div>

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

@@ -4,16 +4,16 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { createSlide } from '../../testing';
 
 import { Slide } from './Slide';
 
 const meta = {
-  title: 'plugins/plugin-presenter/Slide',
+  title: 'plugins/plugin-presenter/components/Slide',
   component: Slide,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Markdown/theme.ts

@@ -5,14 +5,14 @@
 // TODO(burdon): Create theme type and picker.
 
 export const theme = {
-  root: 'bg-attention leading-relaxed font-mono',
+  root: 'bg-attention-surface leading-relaxed font-mono',
 
-  padding: 'pli-40 plb-16 gap-8',
+  padding: 'px-40 py-16 gap-8',
 
   nodes: {
-    h1: 'text-[80px] text-accentText',
-    h2: 'text-[60px] text-accentText',
-    h3: 'text-[48px] text-accentText',
+    h1: 'text-[80px] text-accent-text',
+    h2: 'text-[60px] text-accent-text',
+    h3: 'text-[48px] text-accent-text',
 
     p: 'text-[48px]',
 
@@ -20,7 +20,7 @@ export const theme = {
     ol: 'my-[16px] ml-24 leading-relaxed list-decimal',
     li: 'pl-6 text-[48px]',
 
-    pre: 'is-full mx-0 my-[32px] p-0 __border-l-[16px] bg-inputSurface p-4 __whitespace-pre-line',
+    pre: 'w-full mx-0 my-[32px] p-4 bg-input-surface',
     code: 'p-0 text-[40px]',
   },
 };

package/src/components/Presenter/Layout.tsx

@@ -19,7 +19,7 @@ export type LayoutProps = ThemedClassName<
 
 export const Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }: LayoutProps) => {
   return (
-    <div className={mx('flex grow relative overflow-hidden bg-attention', classNames)}>
+    <div className={mx('flex grow relative overflow-hidden bg-attention-surface', classNames)}>
       <div className={mx('flex flex-col grow overflow-hidden')}>{children}</div>
 
       <div className='z-[200]'>

package/src/components/Presenter/Pager.stories.tsx

@@ -23,7 +23,7 @@ const DefaultStory = ({ count = 20 }: PagerProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-presenter/Pager',
+  title: 'plugins/plugin-presenter/components/Pager',
   render: DefaultStory,
   decorators: [withTheme()],
   parameters: {

package/src/components/RevealPlayer/RevealPlayer.stories.tsx

@@ -4,7 +4,7 @@
 
 import { type Meta } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import CONTENT from '../../../testing/deck.md?raw';
 import { translations } from '../../translations';
@@ -20,9 +20,9 @@ import { RevealPlayer } from './RevealPlayer';
 // https://fonts.google.com
 
 const meta = {
-  title: 'plugins/plugin-presenter/RevealPlayer',
+  title: 'plugins/plugin-presenter/components/RevealPlayer',
   component: RevealPlayer,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/RevealPlayer/RevealPlayer.tsx

@@ -149,12 +149,12 @@ export const RevealPlayer = ({ classNames, content, slide, fullscreen = true, on
   return (
     <div
       className={mx(
-        'grid place-items-center is-full bs-full overflow-hidden bg-black',
+        'grid place-items-center w-full h-full overflow-hidden bg-black',
         fullscreen && 'absolute inset-0',
         classNames,
       )}
     >
-      <div className='relative aspect-video is-full bs-full bs-auto max-bs-full overflow-hidden'>
+      <div className='relative aspect-video w-full h-full h-auto max-h-full overflow-hidden'>
         <div ref={deckDivRef} className='absolute inset-0 reveal'>
           {/* NOTE: Must be in head. */}
           <style>
@@ -166,7 +166,7 @@ export const RevealPlayer = ({ classNames, content, slide, fullscreen = true, on
             />
           </style>
           <div className='slides'>
-            <div className='!text-center' />
+            <div className='text-center!' />
             <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 { lazy } from 'react';
-
-export * from './PresenterSettings';
-
-export const MarkdownSlide = lazy(() => import('./MarkdownSlide'));
-export const DocumentPresenterContainer = lazy(() => import('./DocumentPresenterContainer'));
-export const CollectionPresenterContainer = lazy(() => import('./CollectionPresenterContainer'));
+export * from './Markdown';
+export * from './Presenter';
+export * from './RevealPlayer';

package/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.tsx

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

package/src/containers/CollectionPresenterContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CollectionPresenterContainer } from './CollectionPresenterContainer';
+
+export default CollectionPresenterContainer;

package/src/containers/DocumentPresenterContainer/DocumentPresenterContainer.tsx

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

package/src/containers/DocumentPresenterContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DocumentPresenterContainer } from './DocumentPresenterContainer';
+
+export default DocumentPresenterContainer;

package/src/{components → containers/MarkdownSlide}/MarkdownSlide.tsx

@@ -6,13 +6,13 @@ import React from 'react';
 
 import { type Markdown } from '@dxos/plugin-markdown/types';
 
-import { Container, Slide } from './Markdown';
+import { Container, Slide } from '../../components';
 
 type MarkdownSlideProps = {
   document: Markdown.Document;
 };
 
-const MarkdownSlide = ({ document }: MarkdownSlideProps) => {
+export const MarkdownSlide = ({ document }: MarkdownSlideProps) => {
   const content = document.content.target?.content;
   if (!content) {
     return null;
@@ -24,5 +24,3 @@ const MarkdownSlide = ({ document }: MarkdownSlideProps) => {
     </Container>
   );
 };
-
-export default MarkdownSlide;

package/src/containers/MarkdownSlide/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { MarkdownSlide } from './MarkdownSlide';
+
+export default MarkdownSlide;

package/src/{components → containers/PresenterSettings}/PresenterSettings.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
 
-import { meta } from '../meta';
-import { type PresenterSettingsProps } from '../types';
+import { meta } from '../../meta';
+import { type PresenterSettingsProps } from '../../types';
 
 export type PresenterSettingsComponentProps = {
   settings: PresenterSettingsProps;

package/src/containers/PresenterSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { PresenterSettings } from './PresenterSettings';
+
+export default PresenterSettings;

package/src/containers/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const CollectionPresenterContainer: ComponentType<any> = lazy(() => import('./CollectionPresenterContainer'));
+export const DocumentPresenterContainer: ComponentType<any> = lazy(() => import('./DocumentPresenterContainer'));
+export const MarkdownSlide: ComponentType<any> = lazy(() => import('./MarkdownSlide'));
+export const PresenterSettings: ComponentType<any> = lazy(() => import('./PresenterSettings'));

package/src/types.ts

@@ -7,9 +7,9 @@ import * as Schema from 'effect/Schema';
 import { type Context, createContext } from 'react';
 
 import { Capability } from '@dxos/app-framework';
+import { Collection } from '@dxos/echo';
 import { Operation } from '@dxos/operation';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { Collection } from '@dxos/schema';
 
 import { meta } from './meta';
 

package/dist/lib/browser/CollectionPresenterContainer-WE7HOMFY.mjs

@@ -1,176 +0,0 @@
-import {
-  useExitPresenter
-} from "./chunk-46CHA6Y5.mjs";
-import {
-  PresenterContext
-} from "./chunk-4PZXJXBO.mjs";
-import "./chunk-VQVZVXPJ.mjs";
-
-// src/components/CollectionPresenterContainer.tsx
-import React3, { useContext, useState } from "react";
-import { Surface } from "@dxos/app-framework/ui";
-import { Layout as Layout2 } from "@dxos/react-ui";
-
-// src/components/Presenter/Layout.tsx
-import React from "react";
-import { mx } from "@dxos/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)));
-};
-
-// src/components/Presenter/Pager.tsx
-import React2, { useEffect } from "react";
-import { IconButton, useControlledState } from "@dxos/react-ui";
-var Pager = ({ index: indexProp = 0, count = 0, keys, onChange, onExit }) => {
-  const [index, setIndex] = useControlledState(indexProp);
-  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(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__ */ React2.createElement(IconButton, {
-    icon: "ph--caret-left--regular",
-    size: 6,
-    label: "Previous",
-    iconOnly: true,
-    noTooltip: true,
-    variant: "ghost",
-    classNames: "p-0",
-    onClick: () => handleChangeIndex(-1)
-  }), /* @__PURE__ */ React2.createElement(IconButton, {
-    icon: "ph--caret-right--regular",
-    size: 6,
-    label: "Next",
-    iconOnly: true,
-    noTooltip: true,
-    variant: "ghost",
-    classNames: "p-0",
-    onClick: () => handleChangeIndex(1)
-  }), /* @__PURE__ */ React2.createElement(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__ */ React2.createElement("div", {
-    className: "flex items-center text-neutral-500 text-2xl"
-  }, /* @__PURE__ */ React2.createElement("div", null, index + 1, " / ", count));
-};
-
-// src/components/CollectionPresenterContainer.tsx
-var CollectionPresenterContainer = ({ role, subject: collection }) => {
-  const [slide, setSlide] = useState(0);
-  const { running } = useContext(PresenterContext);
-  const handleExit = useExitPresenter(collection);
-  return /* @__PURE__ */ React3.createElement(Layout2.Main, {
-    role,
-    classNames: "relative"
-  }, /* @__PURE__ */ React3.createElement(Layout, {
-    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: handleExit
-    })
-  }, /* @__PURE__ */ React3.createElement(Surface.Surface, {
-    role: "slide",
-    data: {
-      subject: collection.objects[slide]
-    }
-  })));
-};
-var CollectionPresenterContainer_default = CollectionPresenterContainer;
-export {
-  CollectionPresenterContainer_default as default
-};
-//# sourceMappingURL=CollectionPresenterContainer-WE7HOMFY.mjs.map