@dxos/plugin-presenter 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-presenter",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "Braneframe presenter plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,57 +25,58 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "hastscript": "^7.1.0",
     "highlight.js": "^11.9.0",
     "marked": "^12.0.2",
-    "react-markdown": "^8.0.5",
+    "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
     "rehype-add-classes": "^1.0.0",
     "rehype-highlight": "^6.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-parse-frontmatter": "^1.0.3",
     "reveal.js": "^5.1.0",
-    "@dxos/app-framework": "0.8.4-main.e098934",
-    "@dxos/async": "0.8.4-main.e098934",
-    "@dxos/echo": "0.8.4-main.e098934",
-    "@dxos/echo-schema": "0.8.4-main.e098934",
-    "@dxos/log": "0.8.4-main.e098934",
-    "@dxos/live-object": "0.8.4-main.e098934",
-    "@dxos/local-storage": "0.8.4-main.e098934",
-    "@dxos/plugin-deck": "0.8.4-main.e098934",
-    "@dxos/plugin-graph": "0.8.4-main.e098934",
-    "@dxos/plugin-markdown": "0.8.4-main.e098934",
-    "@dxos/plugin-client": "0.8.4-main.e098934",
-    "@dxos/plugin-stack": "0.8.4-main.e098934",
-    "@dxos/react-client": "0.8.4-main.e098934",
-    "@dxos/react-ui-form": "0.8.4-main.e098934",
-    "@dxos/react-ui-stack": "0.8.4-main.e098934",
-    "@dxos/schema": "0.8.4-main.e098934"
+    "@dxos/app-framework": "0.8.4-main.e8ec1fe",
+    "@dxos/async": "0.8.4-main.e8ec1fe",
+    "@dxos/live-object": "0.8.4-main.e8ec1fe",
+    "@dxos/echo": "0.8.4-main.e8ec1fe",
+    "@dxos/local-storage": "0.8.4-main.e8ec1fe",
+    "@dxos/log": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-client": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-deck": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-markdown": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-graph": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-stack": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-form": "0.8.4-main.e8ec1fe",
+    "@dxos/react-client": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-stack": "0.8.4-main.e8ec1fe",
+    "@dxos/types": "0.8.4-main.e8ec1fe",
+    "@dxos/schema": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.90.2",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@effect-atom/atom-react": "^0.3.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "@types/reveal.js": "^5.0.3",
-    "effect": "3.17.7",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/random": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934",
-    "@dxos/storybook-utils": "0.8.4-main.e098934"
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
+    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

package/src/PresenterPlugin.tsx

@@ -11,26 +11,25 @@ import { translations } from './translations';
 // TODO(burdon): Only scale markdown content.
 // TODO(burdon): Map stack content; Slide content type (e.g., markdown, sketch, IPFS image, table, etc.)
 
-export const PresenterPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/settings`,
-      activatesOn: Events.SetupSettings,
-      activate: PresenterSettings,
-    }),
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: AppGraphBuilder,
-    }),
-  ]);
+export const PresenterPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/settings`,
+    activatesOn: Events.SetupSettings,
+    activate: PresenterSettings,
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder,
+  }),
+]);

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

@@ -2,48 +2,49 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 import { DeckCapabilities } from '@dxos/plugin-deck';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
-import { createExtension, rxFromSignal } from '@dxos/plugin-graph';
+import { atomFromSignal, createExtension } from '@dxos/plugin-graph';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
+import { getSpace } from '@dxos/react-client/echo';
+import { Collection } from '@dxos/schema';
 
-import { PRESENTER_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { PresenterAction, type PresenterSettingsProps } from '../types';
 
 export default (context: PluginContext) =>
   contributes(
     Capabilities.AppGraphBuilder,
     createExtension({
-      id: PRESENTER_PLUGIN,
+      id: `${meta.id}/root`,
       // TODO(wittjosiah): This is a hack to work around presenter previously relying on "variant". Remove.
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => {
               const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));
               const settings = get(
-                rxFromSignal(() => settingsStore?.getStore<PresenterSettingsProps>(PRESENTER_PLUGIN)?.value),
+                atomFromSignal(() => settingsStore?.getStore<PresenterSettingsProps>(meta.id)?.value),
               );
               const isPresentable = settings?.presentCollections
-                ? Obj.instanceOf(DataType.Collection, node.data) || Obj.instanceOf(Markdown.Document, node.data)
+                ? Obj.instanceOf(Collection.Collection, node.data) || Obj.instanceOf(Markdown.Document, node.data)
                 : Obj.instanceOf(Markdown.Document, node.data);
               return isPresentable ? Option.some(node.data) : Option.none();
             }),
             Option.map((object) => {
-              const id = fullyQualifiedId(object);
+              const id = Obj.getDXN(object).toString();
               return [
                 {
                   id: [id, 'presenter'].join(ATTENDABLE_PATH_SEPARATOR),
-                  data: { type: PRESENTER_PLUGIN, object },
-                  type: PRESENTER_PLUGIN,
+                  data: { type: meta.id, object },
+                  type: meta.id,
                   properties: {
                     label: 'Presenter',
                     icon: 'ph--presentation--regular',
@@ -56,21 +57,21 @@ export default (context: PluginContext) =>
           ),
         ),
       actions: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => {
               const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));
               const settings = get(
-                rxFromSignal(() => settingsStore?.getStore<PresenterSettingsProps>(PRESENTER_PLUGIN)?.value),
+                atomFromSignal(() => settingsStore?.getStore<PresenterSettingsProps>(meta.id)?.value),
               );
               const isPresentable = settings?.presentCollections
-                ? Obj.instanceOf(DataType.Collection, node.data) || Obj.instanceOf(Markdown.Document, node.data)
+                ? Obj.instanceOf(Collection.Collection, node.data) || Obj.instanceOf(Markdown.Document, node.data)
                 : Obj.instanceOf(Markdown.Document, node.data);
               return isPresentable ? Option.some(node.data) : Option.none();
             }),
             Option.map((object) => {
-              const id = fullyQualifiedId(object);
+              const id = Obj.getDXN(object).toString();
               const spaceId = getSpace(object)?.id;
               return [
                 {
@@ -98,7 +99,7 @@ export default (context: PluginContext) =>
                     );
                   },
                   properties: {
-                    label: ['toggle presentation label', { ns: PRESENTER_PLUGIN }],
+                    label: ['toggle presentation label', { ns: meta.id }],
                     icon: 'ph--presentation--regular',
                     disposition: 'list-item',
                     keyBinding: {

package/src/capabilities/react-surface.tsx

@@ -8,7 +8,7 @@ import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 import { SettingsStore } from '@dxos/local-storage';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { DataType } from '@dxos/schema';
+import { Collection } from '@dxos/schema';
 
 import {
   CollectionPresenterContainer,
@@ -16,48 +16,48 @@ import {
   MarkdownSlide,
   PresenterSettings,
 } from '../components';
-import { PRESENTER_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type PresenterSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${PRESENTER_PLUGIN}/document`,
+      id: `${meta.id}/document`,
       role: 'article',
       position: 'hoist',
-      filter: (data): data is { subject: { type: typeof PRESENTER_PLUGIN; object: Markdown.Document } } =>
+      filter: (data): data is { subject: { type: typeof meta.id; object: Markdown.Document } } =>
         !!data.subject &&
         typeof data.subject === 'object' &&
         'type' in data.subject &&
         'object' in data.subject &&
-        data.subject.type === PRESENTER_PLUGIN &&
+        data.subject.type === meta.id &&
         Obj.instanceOf(Markdown.Document, data.subject.object),
       component: ({ data }) => <DocumentPresenterContainer document={data.subject.object} />,
     }),
     createSurface({
-      id: `${PRESENTER_PLUGIN}/collection`,
+      id: `${meta.id}/collection`,
       role: 'article',
       position: 'hoist',
-      filter: (data): data is { subject: { type: typeof PRESENTER_PLUGIN; object: DataType.Collection } } =>
+      filter: (data): data is { subject: { type: typeof meta.id; object: Collection.Collection } } =>
         !!data.subject &&
         typeof data.subject === 'object' &&
         'type' in data.subject &&
         'object' in data.subject &&
-        data.subject.type === PRESENTER_PLUGIN &&
-        Obj.instanceOf(DataType.Collection, data.subject.object),
+        data.subject.type === meta.id &&
+        Obj.instanceOf(Collection.Collection, data.subject.object),
       component: ({ data }) => <CollectionPresenterContainer collection={data.subject.object} />,
     }),
     createSurface({
-      id: `${PRESENTER_PLUGIN}/slide`,
+      id: `${meta.id}/slide`,
       role: 'slide',
       filter: (data): data is { subject: Markdown.Document } => Obj.instanceOf(Markdown.Document, data.subject),
       component: ({ data }) => <MarkdownSlide document={data.subject} />,
     }),
     createSurface({
-      id: `${PRESENTER_PLUGIN}/plugin-settings`,
+      id: `${meta.id}/plugin-settings`,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<PresenterSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === PRESENTER_PLUGIN,
+        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
       component: ({ data: { subject } }) => <PresenterSettings settings={subject.value} />,
     }),
   ]);

package/src/components/CollectionPresenterContainer.tsx

@@ -4,16 +4,16 @@
 
 import React, { type FC, useContext, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/react';
 import { StackItem } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 
 import { PresenterContext } from '../types';
 import { useExitPresenter } from '../useExitPresenter';
 
 import { Layout, PageNumber, Pager } from './Presenter';
 
-const CollectionPresenterContainer: FC<{ collection: DataType.Collection }> = ({ collection }) => {
+const CollectionPresenterContainer: FC<{ collection: Collection.Collection }> = ({ collection }) => {
   const [slide, setSlide] = useState(0);
 
   const { running } = useContext(PresenterContext);

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

@@ -2,12 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { createSlide } from '../../testing';
 
@@ -25,7 +23,7 @@ const DefaultStory = ({ content = '' }: SlideProps) => {
 const meta = {
   title: 'plugins/plugin-presenter/Container',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Markdown/Container.tsx

@@ -36,7 +36,7 @@ export const Container = ({ children, classNames }: ContainerProps) => {
   // 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 w-full h-full overflow-hidden absolute')} style={props}>
+      <div className={mx('flex is-full bs-full overflow-hidden absolute')} style={props}>
         {width && height && children}
       </div>
     </div>

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

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { withTheme } from '@dxos/react-ui/testing';
+
 import { createSlide } from '../../testing';
 
 import { Slide } from './Slide';
@@ -13,6 +13,7 @@ import { Slide } from './Slide';
 const meta = {
   title: 'plugins/plugin-presenter/Slide',
   component: Slide,
+  decorators: [withTheme],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Markdown/theme.ts

@@ -7,7 +7,7 @@
 export const theme = {
   root: 'bg-attention leading-relaxed font-mono',
 
-  padding: 'px-40 py-16 gap-8',
+  padding: 'pli-40 plb-16 gap-8',
 
   nodes: {
     h1: 'text-[80px] text-accentText',
@@ -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-inputSurface p-4 __whitespace-pre-line',
+    pre: 'is-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/Presenter/Pager.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { PageNumber, Pager, type PagerProps, StartButton } from './Pager';
 

package/src/components/Presenter/Pager.tsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect } from 'react';
 
-import { Button, Icon, useControlledState } from '@dxos/react-ui';
+import { IconButton, useControlledState } from '@dxos/react-ui';
 
 export type PagerProps = {
   index?: number;
@@ -76,18 +76,46 @@ export const Pager = ({ index: indexParam = 0, count = 0, keys, onChange, onExit
 
   return (
     <div className='flex items-center text-neutral-500'>
-      <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(0)}>
-        <Icon icon='ph--caret-double-left--regular' size={6} />
-      </Button>
-      <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(-1)}>
-        <Icon icon='ph--caret-left--regular' size={6} />
-      </Button>
-      <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(1)}>
-        <Icon icon='ph--caret-right--regular' size={6} />
-      </Button>
-      <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(count - 1)}>
-        <Icon icon='ph--caret-double-right--regular' size={6} />
-      </Button>
+      <IconButton
+        icon='ph--caret-double-left--regular'
+        size={6}
+        label='Jump to first'
+        iconOnly
+        noTooltip
+        variant='ghost'
+        classNames='p-0'
+        onClick={() => onChange?.(0)}
+      />
+      <IconButton
+        icon='ph--caret-left--regular'
+        size={6}
+        label='Previous'
+        iconOnly
+        noTooltip
+        variant='ghost'
+        classNames='p-0'
+        onClick={() => handleChangeIndex(-1)}
+      />
+      <IconButton
+        icon='ph--caret-right--regular'
+        size={6}
+        label='Next'
+        iconOnly
+        noTooltip
+        variant='ghost'
+        classNames='p-0'
+        onClick={() => handleChangeIndex(1)}
+      />
+      <IconButton
+        icon='ph--caret-double-right--regular'
+        size={6}
+        label='Jump to last'
+        iconOnly
+        noTooltip
+        variant='ghost'
+        classNames='p-0'
+        onClick={() => onChange?.(count - 1)}
+      />
     </div>
   );
 };
@@ -113,8 +141,15 @@ export const PageNumber = ({ index = 0, count = 1 }: PageNumberProps) => {
 
 export const StartButton = ({ running, onClick }: { running?: boolean; onClick?: (start: boolean) => void }) => {
   return (
-    <Button variant='ghost' classNames='p-0' onClick={() => onClick?.(!running)}>
-      {(running && <Icon icon='ph--x--regular' size={6} />) || <Icon icon='ph--play--regular' size={6} />}
-    </Button>
+    <IconButton
+      icon={running ? 'ph--x--regular' : 'ph--play--regular'}
+      size={6}
+      label={running ? 'Stop' : 'Play'}
+      iconOnly
+      noTooltip
+      variant='ghost'
+      classNames='p-0'
+      onClick={() => onClick?.(!running)}
+    />
   );
 };

package/src/components/PresenterSettings.tsx

@@ -7,15 +7,15 @@ import React from 'react';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { PRESENTER_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type PresenterSettingsProps } from '../types';
 
 export const PresenterSettings = ({ settings }: { settings: PresenterSettingsProps }) => {
-  const { t } = useTranslation(PRESENTER_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
     <ControlPage>
-      <ControlSection title={t('settings title', { ns: PRESENTER_PLUGIN })}>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
         <ControlGroup>
           <ControlItemInput title={t('present collections label')}>
             <Input.Switch

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

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
 
+import { withTheme } from '@dxos/react-ui/testing';
+
 import CONTENT from '../../../testing/deck.md?raw';
 import { translations } from '../../translations';
 
@@ -22,6 +22,7 @@ import { RevealPlayer } from './RevealPlayer';
 const meta = {
   title: 'plugins/plugin-presenter/RevealPlayer',
   component: RevealPlayer,
+  decorators: [withTheme],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/RevealPlayer/RevealPlayer.tsx

@@ -142,11 +142,18 @@ export const RevealPlayer = ({ classNames, content, slide, fullscreen = true, on
     };
   });
 
+  // TOOD(burdon): Trap cursor keys (otherwise tabster grabs focus.)
   return (
-    <div className={mx('absolute flex h-full w-full items-center justify-center', fullscreen && 'inset-0', classNames)}>
-      <div className='relative aspect-video w-full'>
-        <div ref={deckDivRef} className='reveal'>
-          {/* TODO(burdon): Must be in head. */}
+    <div
+      className={mx(
+        'grid place-items-center is-full bs-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 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: '' }} />

package/src/meta.ts

@@ -3,13 +3,16 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
-
-export const PRESENTER_PLUGIN = 'dxos.org/plugin/presenter';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
-  id: PRESENTER_PLUGIN,
+  id: 'dxos.org/plugin/presenter',
   name: 'Presenter',
-  description: 'Present documents as slideshows.',
+  description: trim`
+    Transform markdown documents into interactive presentation slideshows.
+    Navigate between slides with keyboard controls and present content in full-screen mode.
+  `,
   icon: 'ph--presentation--regular',
+  iconHue: 'indigo',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-presenter',
 };

package/src/types.ts

@@ -2,22 +2,22 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { type Context, createContext } from 'react';
 
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { DataType } from '@dxos/schema';
+import { Collection } from '@dxos/schema';
 
-import { PRESENTER_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace PresenterAction {
-  const PRESENTER_ACTION = `${PRESENTER_PLUGIN}/action`;
+  const PRESENTER_ACTION = `${meta.id}/action`;
 
   export class TogglePresentation extends Schema.TaggedClass<TogglePresentation>()(
     `${PRESENTER_ACTION}/toggle-presentation`,
     {
       input: Schema.Struct({
-        object: Schema.Union(Markdown.Document, DataType.Collection),
+        object: Schema.Union(Markdown.Document, Collection.Collection),
         state: Schema.optional(Schema.Boolean),
       }),
       output: Schema.Void,