@dxos/plugin-presenter 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,oBAAoB,CAIzD,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,eAAe,GACnD,sBAAsB,GACtB,oBAAoB,GACpB,oBAAoB,GACpB,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;AAE3C,eAAO,MAAM,mBAAmB,kDAA4C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI1D,yBAAiB,eAAe,CAAC;;;;;;;;;;IAG/B,MAAM,OAAO,kBAAmB,SAAQ,uBASvC;KAAG;;CACL;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,oBAAoB,CAIzD,CAAC;AAEH,eAAO,MAAM,uBAAuB;;GAInC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-presenter",
-  "version": "0.7.4-staging.f7e8224",
+  "version": "0.7.5-labs.071a3e2",
   "description": "Braneframe presenter plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -11,19 +11,11 @@
     ".": {
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
-    },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
-    "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ]
-    }
+    "*": {}
   },
   "files": [
     "dist",
@@ -41,19 +33,20 @@
     "remark-frontmatter": "^5.0.0",
     "remark-parse-frontmatter": "^1.0.3",
     "reveal.js": "^5.1.0",
-    "@dxos/app-framework": "0.7.4-staging.f7e8224",
-    "@dxos/async": "0.7.4-staging.f7e8224",
-    "@dxos/echo-schema": "0.7.4-staging.f7e8224",
-    "@dxos/live-object": "0.7.4-staging.f7e8224",
-    "@dxos/log": "0.7.4-staging.f7e8224",
-    "@dxos/local-storage": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-client": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-graph": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-markdown": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-space": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-stack": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-form": "0.7.4-staging.f7e8224",
-    "@dxos/react-client": "0.7.4-staging.f7e8224"
+    "@dxos/app-framework": "0.7.5-labs.071a3e2",
+    "@dxos/async": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/live-object": "0.7.5-labs.071a3e2",
+    "@dxos/local-storage": "0.7.5-labs.071a3e2",
+    "@dxos/log": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-client": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-space": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-stack": "0.7.5-labs.071a3e2",
+    "@dxos/react-client": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-markdown": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-stack": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-form": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-graph": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -64,17 +57,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.4-staging.f7e8224",
-    "@dxos/random": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-theme": "0.7.4-staging.f7e8224",
-    "@dxos/storybook-utils": "0.7.4-staging.f7e8224"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-theme": "0.7.4-staging.f7e8224"
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/PresenterPlugin.tsx

@@ -2,156 +2,45 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { definePlugin, defineModule, Events, contributes, Capabilities } from '@dxos/app-framework';
 
-import {
-  resolvePlugin,
-  type PluginDefinition,
-  parseIntentPlugin,
-  LayoutAction,
-  NavigationAction,
-  type Intent,
-} from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
-import { LocalStorageStore } from '@dxos/local-storage';
-import { parseClientPlugin } from '@dxos/plugin-client';
-import { createExtension, type Node } 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 { PresenterMain, PresenterSettings, MarkdownSlide, RevealMain } from './components';
-import meta, { PRESENTER_PLUGIN } from './meta';
+import { AppGraphBuilder, IntentResolver, PresenterSettings, PresenterState, ReactSurface } from './capabilities';
+import { meta } from './meta';
 import translations from './translations';
-import {
-  PresenterContext,
-  type PresenterSettingsProps,
-  TOGGLE_PRESENTATION,
-  type PresenterPluginProvides,
-} from './types';
 
 // TODO(burdon): Only scale markdown content.
 // TODO(burdon): Map stack content; Slide content type (e.g., markdown, sketch, IPFS image, table, etc.)
 
-type PresenterState = {
-  presenting: boolean;
-};
-
-export const PresenterPlugin = (): PluginDefinition<PresenterPluginProvides> => {
-  const settings = new LocalStorageStore<PresenterSettingsProps>(PRESENTER_PLUGIN);
-
-  // TODO(burdon): Do we need context providers if we can get the state from the plugin?
-  const state = create<PresenterState>({ presenting: false });
-
-  return {
-    meta,
-    provides: {
-      translations,
-      settings: settings.values,
-      graph: {
-        builder: (plugins) => {
-          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-          if (!client || !dispatch) {
-            return [];
-          }
-
-          return createExtension({
-            id: PRESENTER_PLUGIN,
-            filter: (node): node is Node<CollectionType | DocumentType> =>
-              settings.values.presentCollections
-                ? node.data instanceof CollectionType || node.data instanceof DocumentType
-                : node.data instanceof DocumentType,
-            actions: ({ node }) => {
-              const object = node.data;
-              const id = fullyQualifiedId(object);
-              return [
-                {
-                  id: `${TOGGLE_PRESENTATION}/${id}`,
-                  // TODO(burdon): Allow function so can generate state when activated.
-                  //  So can set explicit fullscreen state coordinated with current presenter state.
-                  data: async () => {
-                    await dispatch([
-                      {
-                        plugin: PRESENTER_PLUGIN,
-                        action: TOGGLE_PRESENTATION,
-                        data: { object },
-                      },
-                      {
-                        action: NavigationAction.OPEN,
-                        data: { activeParts: { fullScreen: id } },
-                      },
-                    ]);
-                  },
-                  properties: {
-                    label: ['toggle presentation label', { ns: PRESENTER_PLUGIN }],
-                    icon: 'ph--presentation--regular',
-                    keyBinding: {
-                      macos: 'shift+meta+p',
-                      windows: 'shift+alt+p',
-                    },
-                  },
-                },
-              ];
-            },
-          });
-        },
-      },
-      context: ({ children }) => {
-        return (
-          <PresenterContext.Provider
-            value={{
-              running: state.presenting,
-              start: () => (state.presenting = true),
-              stop: () => (state.presenting = false),
-            }}
-          >
-            {children}
-          </PresenterContext.Provider>
-        );
-      },
-      surface: {
-        component: ({ data, role }) => {
-          switch (role) {
-            case 'main': {
-              if (state.presenting) {
-                if (data.active instanceof CollectionType) {
-                  return { node: <PresenterMain collection={data.active} />, disposition: 'hoist' };
-                } else if (data.active instanceof DocumentType) {
-                  return { node: <RevealMain document={data.active} />, disposition: 'hoist' };
-                }
-              }
-              return null;
-            }
-            case 'slide': {
-              return data.slide instanceof DocumentType ? <MarkdownSlide document={data.slide} /> : null;
-            }
-            case 'settings': {
-              return data.plugin === meta.id ? <PresenterSettings settings={settings.values} /> : null;
-            }
-          }
-
-          return null;
-        },
-      },
-      intent: {
-        resolver: (intent) => {
-          switch (intent.action) {
-            case TOGGLE_PRESENTATION: {
-              state.presenting = intent.data?.state ?? !state.presenting;
-
-              const intents = [] as Intent[][];
-              if (state.presenting) {
-                intents.push([{ action: LayoutAction.SET_LAYOUT_MODE, data: { layoutMode: 'fullscreen' } }]);
-              } else {
-                intents.push([{ action: LayoutAction.SET_LAYOUT_MODE, data: { revert: true } }]);
-              }
-
-              return { data: state.presenting, intents };
-            }
-          }
-        },
-      },
-    },
-  };
-};
+export const PresenterPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/settings`,
+      activatesOn: Events.SetupSettings,
+      activate: PresenterSettings,
+    }),
+    defineModule({
+      id: `${meta.id}/module/state`,
+      activatesOn: Events.Startup,
+      activate: PresenterState,
+    }),
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupSurfaces,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      activate: IntentResolver,
+    }),
+    defineModule({
+      id: `${meta.id}/module/app-graph-builder`,
+      activatesOn: Events.SetupAppGraph,
+      activate: AppGraphBuilder,
+    }),
+  ]);

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

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, type PluginsContext, Capabilities, createIntent } from '@dxos/app-framework';
+import { createExtension, type Node } 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 { PRESENTER_PLUGIN } from '../meta';
+import { PresenterAction, type PresenterSettingsProps } from '../types';
+
+export default (context: PluginsContext) =>
+  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
+          ? node.data instanceof CollectionType || node.data instanceof DocumentType
+          : node.data instanceof DocumentType;
+      },
+      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',
+              },
+            },
+          },
+        ];
+      },
+    }),
+  );

package/src/capabilities/capabilities.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineCapability } from '@dxos/app-framework';
+
+import { PRESENTER_PLUGIN } from '../meta';
+
+export namespace PresenterCapabilities {
+  export type State = { presenting: boolean };
+  export const State = defineCapability<Readonly<State>>(`${PRESENTER_PLUGIN}/capability/state`);
+  export const MutableState = defineCapability<State>(`${PRESENTER_PLUGIN}/capability/state`);
+}

package/src/capabilities/index.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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/intent-resolver.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  Capabilities,
+  contributes,
+  createIntent,
+  createResolver,
+  LayoutAction,
+  type PluginsContext,
+} from '@dxos/app-framework';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+
+import { PresenterCapabilities } from './capabilities';
+import { PresenterAction } from '../types';
+
+export default (context: PluginsContext) =>
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver({
+      intent: PresenterAction.TogglePresentation,
+      resolve: ({ object, state: next }) => {
+        const state = context.requestCapability(PresenterCapabilities.MutableState);
+        state.presenting = next ?? !state.presenting;
+
+        if (state.presenting) {
+          return {
+            intents: [
+              createIntent(LayoutAction.SetLayoutMode, {
+                part: 'mode',
+                subject: fullyQualifiedId(object),
+                options: { mode: 'fullscreen' },
+              }),
+            ],
+          };
+        } else {
+          return {
+            intents: [createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { revert: true } })],
+          };
+        }
+      },
+    }),
+  );

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+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 { PRESENTER_PLUGIN } from '../meta';
+import { PresenterContext, type PresenterSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${PRESENTER_PLUGIN}/document`,
+      role: 'main',
+      position: 'hoist',
+      filter: (data): data is { subject: DocumentType } => data.subject instanceof DocumentType,
+      component: ({ data }) => <RevealMain document={data.subject} />,
+    }),
+    createSurface({
+      id: `${PRESENTER_PLUGIN}/collection`,
+      role: 'main',
+      position: 'hoist',
+      filter: (data): data is { subject: CollectionType } => data.subject instanceof CollectionType,
+      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>
+        );
+      },
+    }),
+    createSurface({
+      id: `${PRESENTER_PLUGIN}/slide`,
+      role: 'slide',
+      filter: (data): data is { subject: DocumentType } => data.subject instanceof DocumentType,
+      component: ({ data }) => <MarkdownSlide document={data.subject} />,
+    }),
+    createSurface({
+      id: `${PRESENTER_PLUGIN}/settings`,
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<PresenterSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === PRESENTER_PLUGIN,
+      component: ({ data: { subject } }) => <PresenterSettings settings={subject.value} />,
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { PRESENTER_PLUGIN } from '../meta';
+import { PresenterSettingsSchema, type PresenterSettingsProps } from '../types';
+
+export default () => {
+  const settings = create<PresenterSettingsProps>({});
+
+  return contributes(Capabilities.Settings, {
+    schema: PresenterSettingsSchema,
+    prefix: PRESENTER_PLUGIN,
+    value: settings,
+  });
+};

package/src/capabilities/state.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { PresenterCapabilities } from './capabilities';
+
+export default () => {
+  // TODO(burdon): Do we need context providers if we can get the state from the plugin?
+  //  No, the main reason would be compability with existing apis.
+  //  For anything made specifically for the plugin framework they can depend on `useCapabilities`.
+  const state = create<PresenterCapabilities.State>({ presenting: false });
+
+  return contributes(PresenterCapabilities.State, state);
+};

package/src/components/MarkdownSlide.tsx

@@ -9,7 +9,7 @@ import { type DocumentType } from '@dxos/plugin-markdown/types';
 import { Container, Slide } from './Markdown';
 
 const MarkdownSlide: FC<{ document: DocumentType }> = ({ document }) => {
-  const content = document.content?.content;
+  const content = document.content.target?.content;
   if (!content) {
     return null;
   }

package/src/components/PresenterMain.tsx

@@ -4,15 +4,8 @@
 
 import React, { type FC, useContext, useState } from 'react';
 
-import {
-  Surface,
-  useIntentDispatcher,
-  useResolvePlugin,
-  parseLayoutPlugin,
-  NavigationAction,
-} from '@dxos/app-framework';
+import { Surface, createIntent, useLayout, useIntentDispatcher } from '@dxos/app-framework';
 import { type CollectionType } from '@dxos/plugin-space/types';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { Main } from '@dxos/react-ui';
 import {
   baseSurface,
@@ -22,35 +15,20 @@ import {
 } from '@dxos/react-ui-theme';
 
 import { Layout, PageNumber, Pager, StartButton } from './Presenter';
-import { PRESENTER_PLUGIN } from '../meta';
-import { PresenterContext, TOGGLE_PRESENTATION } from '../types';
+import { PresenterContext, PresenterAction } from '../types';
 
 const PresenterMain: FC<{ collection: CollectionType }> = ({ collection }) => {
   const [slide, setSlide] = useState(0);
 
   // TODO(burdon): Should not depend on split screen.
-  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
-  const fullscreen = layoutPlugin?.provides.layout.layoutMode === 'fullscreen';
+  const layout = useLayout();
+  const fullscreen = layout.mode === 'fullscreen';
   const { running } = useContext(PresenterContext);
 
   // TODO(burdon): Currently conflates fullscreen and running.
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const handleSetRunning = (running: boolean) => {
-    void dispatch([
-      {
-        plugin: PRESENTER_PLUGIN,
-        action: TOGGLE_PRESENTATION,
-        data: { state: running },
-      },
-      ...(!running
-        ? [
-            {
-              action: NavigationAction.CLOSE,
-              data: { activeParts: { fullScreen: fullyQualifiedId(collection) } },
-            },
-          ]
-        : []),
-    ]);
+    void dispatch(createIntent(PresenterAction.TogglePresentation, { object: collection, state: running }));
   };
 
   return (
@@ -76,7 +54,7 @@ const PresenterMain: FC<{ collection: CollectionType }> = ({ collection }) => {
         }
       >
         {/* TODO(wittjosiah): Better slide placeholder. */}
-        <Surface role='slide' data={{ slide: collection.objects[slide] }} placeholder={<></>} />
+        <Surface role='slide' data={{ subject: collection.objects[slide] }} placeholder={<></>} />
       </Layout>
     </Main.Content>
   );

package/src/components/PresenterSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { PRESENTER_PLUGIN } from '../meta';
 import { type PresenterSettingsProps } from '../types';
@@ -14,13 +14,13 @@ export const PresenterSettings = ({ settings }: { settings: PresenterSettingsPro
   const { t } = useTranslation(PRESENTER_PLUGIN);
 
   return (
-    <>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('present collections label')}>
         <Input.Switch
           checked={settings.presentCollections}
           onCheckedChange={(checked) => (settings.presentCollections = !!checked)}
         />
       </DeprecatedFormInput>
-    </>
+    </DeprecatedFormContainer>
   );
 };