@dxos/app-framework 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/src/playground/layout/plugin.ts

@@ -7,11 +7,12 @@ import { defineModule, definePlugin, lazy } from '../../core';
 
 const Layout = lazy(() => import('./Layout'));
 
-export const LayoutPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/layout', name: 'Layout' }, [
-    defineModule({
-      id: 'dxos.org/test/layout/root',
-      activatesOn: Events.Startup,
-      activate: Layout,
-    }),
-  ]);
+const meta = { id: 'dxos.org/test/layout', name: 'Layout' };
+
+export const LayoutPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: 'dxos.org/test/layout/root',
+    activatesOn: Events.Startup,
+    activate: Layout,
+  }),
+]);

package/src/playground/logger/plugin.ts

@@ -12,26 +12,30 @@ import { Log } from './schema';
 
 const Toolbar = lazy(() => import('./Toolbar'));
 
-export const LoggerPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/logger', name: 'Logger' }, [
-    defineModule({
-      id: 'dxos.org/test/logger/intents',
-      activatesOn: Events.SetupIntentResolver,
-      activate: () => [
-        contributes(
-          Capabilities.IntentResolver,
-          createResolver({
-            intent: Log,
-            resolve: ({ message }) => {
-              log.info(message);
-            },
-          }),
-        ),
-      ],
-    }),
-    defineModule({
-      id: 'dxos.org/test/logger/surfaces',
-      activatesOn: Events.Startup,
-      activate: Toolbar,
-    }),
-  ]);
+const meta = {
+  id: 'dxos.org/test/logger',
+  name: 'Logger',
+};
+
+export const LoggerPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: 'dxos.org/test/logger/intents',
+    activatesOn: Events.SetupIntentResolver,
+    activate: () => [
+      contributes(
+        Capabilities.IntentResolver,
+        createResolver({
+          intent: Log,
+          resolve: ({ message }) => {
+            log.info(message);
+          },
+        }),
+      ),
+    ],
+  }),
+  defineModule({
+    id: 'dxos.org/test/logger/surfaces',
+    activatesOn: Events.Startup,
+    activate: Toolbar,
+  }),
+]);

package/src/playground/logger/schema.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 export class Log extends Schema.TaggedClass<Log>()('dxos.org/test/logger/log', {
   input: Schema.Struct({

package/src/playground/playground.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2025 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 { useApp } from '../components';
 import { IntentPlugin } from '../plugin-intent';
@@ -17,7 +15,8 @@ import { GeneratorPlugin, createNumberPlugin } from './generator';
 import { LayoutPlugin } from './layout';
 import { LoggerPlugin } from './logger';
 
-const plugins = [IntentPlugin(), LayoutPlugin(), DebugPlugin(), LoggerPlugin(), GeneratorPlugin()];
+const pluginFactories = [IntentPlugin, LayoutPlugin, DebugPlugin(), LoggerPlugin(), GeneratorPlugin()];
+const plugins = pluginFactories.map((factory) => (typeof factory === 'function' ? factory() : factory));
 
 const Placeholder = () => {
   return <div>Loading...</div>;
@@ -25,7 +24,7 @@ const Placeholder = () => {
 
 const DefaultStory = () => {
   const App = useApp({
-    pluginLoader: (id) => createNumberPlugin(id),
+    pluginLoader: (id) => createNumberPlugin(id)(),
     plugins,
     core: plugins.map((plugin) => plugin.meta.id),
     placeholder: Placeholder,
@@ -37,7 +36,7 @@ const DefaultStory = () => {
 const meta = {
   title: 'sdk/app-framework/playground',
   render: DefaultStory,
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/plugin-intent/IntentPlugin.ts

@@ -5,17 +5,16 @@
 import { Events } from '../common';
 import { defineModule, definePlugin, lazy } from '../core';
 
-import { INTENT_PLUGIN } from './actions';
+import { meta } from './meta';
 
-export const IntentPlugin = () =>
-  definePlugin({ id: INTENT_PLUGIN, name: 'Intent' }, [
-    defineModule({
-      id: `${INTENT_PLUGIN}/module/dispatcher`,
-      // TODO(wittjosiah): This will mean that startup needs to be reset when intents are added or removed.
-      //   This is fine for now because it's how it worked prior to capabilities api anyways.
-      //   In the future, the intent dispatcher should be able to be reset without resetting the entire app.
-      activatesOn: Events.Startup,
-      activatesAfter: [Events.DispatcherReady],
-      activate: lazy(() => import('./intent-dispatcher')),
-    }),
-  ]);
+export const IntentPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/dispatcher`,
+    // TODO(wittjosiah): This will mean that startup needs to be reset when intents are added or removed.
+    //   This is fine for now because it's how it worked prior to capabilities api anyways.
+    //   In the future, the intent dispatcher should be able to be reset without resetting the entire app.
+    activatesOn: Events.Startup,
+    activatesAfter: [Events.DispatcherReady],
+    activate: lazy(() => import('./intent-dispatcher')),
+  }),
+]);

package/src/plugin-intent/actions.ts

@@ -2,18 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Label } from './intent';
-
-export const INTENT_PLUGIN = 'dxos.org/plugin/intent';
-export const INTENT_ACTION = `${INTENT_PLUGIN}/action`;
+import { meta } from './meta';
 
 export namespace IntentAction {
   /**
    * Log an intent.
    */
-  export class Track extends Schema.TaggedClass<Track>()(`${INTENT_ACTION}/track`, {
+  export class Track extends Schema.TaggedClass<Track>()(`${meta.id}/action/track`, {
     input: Schema.Struct({
       intents: Schema.Array(Schema.String),
       error: Schema.optional(Schema.String),
@@ -24,7 +22,7 @@ export namespace IntentAction {
   /**
    * Fired after an intent is dispatched if the intent is undoable.
    */
-  export class ShowUndo extends Schema.TaggedClass<ShowUndo>()(`${INTENT_ACTION}/show-undo`, {
+  export class ShowUndo extends Schema.TaggedClass<ShowUndo>()(`${meta.id}/action/show-undo`, {
     input: Schema.Struct({
       message: Label,
     }),

package/src/plugin-intent/errors.ts

@@ -24,10 +24,11 @@ export class BaseError extends Error {
 
 export class NoResolversError extends BaseError {
   constructor(action: string) {
-    super('NO_RESOLVERS', 'No resolvers were found for the action', { action });
+    super('NO_RESOLVERS', `No resolvers were found for the action: ${action}`, { action });
   }
 }
 
+// TODO(burdon): Detect loops.
 export class CycleDetectedError extends BaseError {
   constructor(context?: Record<string, any>) {
     super(

package/src/plugin-intent/intent-dispatcher.test.ts

@@ -2,7 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, Fiber, Schema, pipe } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Fiber from 'effect/Fiber';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
 import { describe, expect, test } from 'vitest';
 
 import { chain, createIntent } from './intent';
@@ -104,7 +107,11 @@ describe('Intent dispatcher', () => {
 
   test('chain intents', async () => {
     const { dispatch } = createDispatcher(() => [computeResolver, toStringResolver, concatResolver]);
-    const intent = pipe(createIntent(Compute, { value: 1 }), chain(ToString, {}), chain(Concat, { plus: '!' }));
+    const intent = Function.pipe(
+      createIntent(Compute, { value: 1 }),
+      chain(ToString, {}),
+      chain(Concat, { plus: '!' }),
+    );
 
     expect(intent.first.id).toBe(Compute._tag);
     expect(intent.last.id).toBe(Concat._tag);
@@ -120,7 +127,7 @@ describe('Intent dispatcher', () => {
 
   test('undo chained intent', async () => {
     const { dispatch, undo } = createDispatcher(() => [computeResolver, toStringResolver, concatResolver]);
-    const intent = pipe(createIntent(Compute, { value: 1 }), chain(Compute, {}), chain(Compute, {}));
+    const intent = Function.pipe(createIntent(Compute, { value: 1 }), chain(Compute, {}), chain(Compute, {}));
     const program = Effect.gen(function* () {
       const a = yield* dispatch(intent);
 

package/src/plugin-intent/intent-dispatcher.ts

@@ -2,8 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, Option, Ref, pipe } from 'effect';
-import { type Simplify } from 'effect/Types';
+import * as Effect from 'effect/Effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import * as Ref from 'effect/Ref';
+import type * as Types from 'effect/Types';
 
 import { live } from '@dxos/live-object';
 import { log } from '@dxos/log';
@@ -132,7 +135,7 @@ export const createResolver = <Tag extends string, Fields extends IntentParams,
  */
 export type PromiseIntentDispatcher = <Fields extends IntentParams>(
   intent: IntentChain<any, any, any, Fields>,
-) => Promise<Simplify<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>>;
+) => Promise<Types.Simplify<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>>;
 
 /**
  * Creates an effect for intents.
@@ -141,7 +144,7 @@ export type IntentDispatcher = <Fields extends IntentParams>(
   intent: IntentChain<any, any, any, Fields>,
   depth?: number,
 ) => Effect.Effect<
-  Simplify<Required<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>['data']>,
+  Types.Simplify<Required<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>['data']>,
   Error
 >;
 
@@ -197,7 +200,6 @@ export const createDispatcher = (
         .filter((resolver) => !resolver.filter || resolver.filter(intent.data))
         .toSorted(byPosition);
       if (candidates.length === 0) {
-        log.info('no resolvers found', { intent: intent.id });
         return yield* Effect.fail(new NoResolversError(intent.id));
       }
 
@@ -253,7 +255,7 @@ export const createDispatcher = (
 
       if (result.undoable && isUndoable(results)) {
         // TODO(wittjosiah): Is there a better way to handle showing undo for chains?
-        yield* pipe(
+        yield* Function.pipe(
           dispatch(createIntent(IntentAction.ShowUndo, { message: result.undoable.message })),
           Effect.catchSome((err) =>
             err instanceof NoResolversError ? Option.some(Effect.succeed(undefined)) : Option.none(),

package/src/plugin-intent/intent.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 export type IntentParams = {
   readonly input: Schema.Schema.All;

package/src/plugin-intent/meta.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/intent',
+  name: 'Intent',
+};

package/src/plugin-settings/SettingsPlugin.ts

@@ -5,32 +5,30 @@
 import { Capabilities, Events } from '../common';
 import { contributes, defineModule, definePlugin, lazy } from '../core';
 
-import { SETTINGS_PLUGIN } from './actions';
+import { meta } from './meta';
 import { translations } from './translations';
 
-// TODO(wittjosiah): Add options to exclude some modules.
-export const SettingsPlugin = () =>
-  definePlugin({ id: SETTINGS_PLUGIN, name: 'Settings' }, [
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/store`,
-      activatesOn: Events.Startup,
-      activatesBefore: [Events.SetupSettings],
-      activatesAfter: [Events.SettingsReady],
-      activate: lazy(() => import('./store')),
-    }),
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: lazy(() => import('./intent-resolver')),
-    }),
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: lazy(() => import('./app-graph-builder')),
-    }),
-  ]);
+export const SettingsPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/store`,
+    activatesOn: Events.Startup,
+    activatesBefore: [Events.SetupSettings],
+    activatesAfter: [Events.SettingsReady],
+    activate: lazy(() => import('./store')),
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: lazy(() => import('./intent-resolver')),
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: lazy(() => import('./app-graph-builder')),
+  }),
+]);

package/src/plugin-settings/actions.ts

@@ -2,28 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-export const SETTINGS_PLUGIN = 'dxos.org/plugin/settings';
-export const SETTINGS_ACTION = `${SETTINGS_PLUGIN}/action`;
-// TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
-//  Ideally this should be worked into the data model in a generic way.
+import { meta } from './meta';
+
+// TODO(burdon): Document.
 export const SETTINGS_ID = '!dxos:settings';
 export const SETTINGS_KEY = 'settings';
 
 export namespace SettingsAction {
-  export class Open extends Schema.TaggedClass<Open>()(`${SETTINGS_ACTION}/open`, {
+  export class Open extends Schema.TaggedClass<Open>()(`${meta.id}/open`, {
     input: Schema.Struct({
       plugin: Schema.optional(Schema.String),
     }),
     output: Schema.Void,
   }) {}
 
-  export class OpenPluginRegistry extends Schema.TaggedClass<OpenPluginRegistry>()(
-    `${SETTINGS_ACTION}/open-plugin-registry`,
-    {
-      input: Schema.Void,
-      output: Schema.Void,
-    },
-  ) {}
+  export class OpenPluginRegistry extends Schema.TaggedClass<OpenPluginRegistry>()(`${meta.id}/open-plugin-registry`, {
+    input: Schema.Void,
+    output: Schema.Void,
+  }) {}
 }

package/src/plugin-settings/app-graph-builder.ts

@@ -3,7 +3,8 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { ROOT_ID, createExtension } from '@dxos/app-graph';
 import { type SettingsStore, type SettingsValue } from '@dxos/local-storage';
@@ -13,26 +14,27 @@ import { Capabilities } from '../common';
 import { type PluginContext, type PluginMeta, contributes } from '../core';
 import { createIntent } from '../plugin-intent';
 
-import { SETTINGS_ID, SETTINGS_KEY, SETTINGS_PLUGIN, SettingsAction } from './actions';
+import { SETTINGS_ID, SETTINGS_KEY, SettingsAction } from './actions';
+import { meta } from './meta';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: `${SETTINGS_PLUGIN}/action`,
+      id: `${meta.id}/action`,
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => [
               {
-                id: SETTINGS_PLUGIN,
+                id: meta.id,
                 data: async () => {
                   const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
                   await dispatch(createIntent(SettingsAction.Open));
                 },
                 properties: {
-                  label: ['open settings label', { ns: SETTINGS_PLUGIN }],
+                  label: ['open settings label', { ns: meta.id }],
                   icon: 'ph--gear--regular',
                   disposition: 'menu',
                   keyBinding: {
@@ -47,18 +49,18 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${SETTINGS_PLUGIN}/core`,
+      id: `${meta.id}/core`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => [
               {
                 id: SETTINGS_ID,
-                type: SETTINGS_PLUGIN,
+                type: meta.id,
                 properties: {
-                  label: ['app settings label', { ns: SETTINGS_PLUGIN }],
+                  label: ['app settings label', { ns: meta.id }],
                   icon: 'ph--gear--regular',
                   disposition: 'pin-end',
                   position: 'hoist',
@@ -71,10 +73,10 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${SETTINGS_PLUGIN}/core-plugins`,
+      id: `${meta.id}/core-plugins`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id !== SETTINGS_ID ? Option.none() : Option.some(node))),
             Option.map(() => {
@@ -106,7 +108,7 @@ export default (context: PluginContext) =>
                   id: `${SETTINGS_KEY}:custom-plugins`,
                   type: 'category',
                   properties: {
-                    label: ['custom plugins label', { ns: SETTINGS_PLUGIN }],
+                    label: ['custom plugins label', { ns: meta.id }],
                     icon: 'ph--squares-four--regular',
                     role: 'branch',
                     disposition: 'collection',
@@ -119,10 +121,10 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${SETTINGS_PLUGIN}/custom-plugins`,
+      id: `${meta.id}/custom-plugins`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) =>
               node.id !== `${SETTINGS_KEY}:custom-plugins` ? Option.none() : Option.some(node),

package/src/plugin-settings/intent-resolver.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import * as Function from 'effect/Function';
 
 import { Capabilities, LayoutAction } from '../common';
 import { contributes } from '../core';
@@ -20,7 +20,7 @@ export default () =>
         return {
           intents: [
             plugin
-              ? pipe(
+              ? Function.pipe(
                   openSettings,
                   chain(LayoutAction.Open, {
                     part: 'main',

package/src/plugin-settings/meta.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/settings',
+  name: 'Settings',
+};

package/src/plugin-settings/translations.ts

@@ -1,15 +1,15 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { type Resource } from '@dxos/react-ui';
 
-import { SETTINGS_PLUGIN } from './actions';
+import { meta } from './meta';
 
 export const translations = [
   {
     'en-US': {
-      [SETTINGS_PLUGIN]: {
+      [meta.id]: {
         'open settings label': 'Open settings',
         'app settings label': 'Settings',
         'custom plugins label': 'Plugins',

package/src/react/ErrorBoundary.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { Component, type FC, type JSX, type PropsWithChildren, type ReactNode } from 'react';
+import React, { Component, type FC, type PropsWithChildren, type ReactNode } from 'react';
 
 type State = {
   error: Error | undefined;
@@ -32,7 +32,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
     }
   }
 
-  override render(): string | number | boolean | JSX.Element | Iterable<ReactNode> | null | undefined {
+  override render(): ReactNode {
     if (this.state.error) {
       const Fallback = this.props.fallback ?? DefaultFallback;
       return <Fallback data={this.props.data} error={this.state.error} />;
@@ -46,9 +46,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
   }
 }
 
-const DefaultFallback: NonNullable<ErrorBoundaryProps['fallback']> = ({ data, error }) => (
-  <div className='flex flex-col gap-2 overflow-hidden border border-red-500 rounded-sm'>
-    <pre className='whitespace-pre-wrap font-sm text-xs p-2'>ERROR: {error.message}</pre>
-    <pre className='whitespace-pre-wrap font-sm text-xs p-2 text-subdued'>{JSON.stringify(data, null, 2)}</pre>
-  </div>
-);
+const DefaultFallback: NonNullable<ErrorBoundaryProps['fallback']> = ({ data, error }) => {
+  return (
+    <div className='flex flex-col gap-2 overflow-hidden border border-red-500 rounded-sm'>
+      <h1 className='p-2'>ERROR: {error.message}</h1>
+      <pre className='p-2 overflow-y-auto text-sm text-subdued'>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};

package/src/react/Surface.stories.tsx

@@ -2,14 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { Button, List, ListItem } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { Capabilities, createSurface } from '../common';
 import { type PluginManager } from '../core';
@@ -90,8 +88,7 @@ const DefaultStory = (props: { manager: PluginManager }) => {
 const meta = {
   title: 'sdk/app-framework/Surface',
   render: DefaultStory,
-  // NOTE: Intentionally not using withPluginManager to try to reduce surface area of the story.
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme],
   args: {
     manager: setupPluginManager(),
   },

package/src/react/Surface.tsx

@@ -2,7 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, Suspense, forwardRef, memo, useMemo } from 'react';
+import React, {
+  Fragment,
+  type NamedExoticComponent,
+  type RefAttributes,
+  Suspense,
+  forwardRef,
+  memo,
+  useMemo,
+} from 'react';
 
 import { useDefaultValue } from '@dxos/react-hooks';
 import { byPosition } from '@dxos/util';
@@ -44,8 +52,8 @@ export const isSurfaceAvailable = (context: PluginContext, { role, data }: Pick<
 /**
  * A surface is a named region of the screen that can be populated by plugins.
  */
-export const Surface = memo(
-  forwardRef<HTMLElement, SurfaceProps>(
+export const Surface: NamedExoticComponent<SurfaceProps & RefAttributes<HTMLElement>> = memo(
+  forwardRef(
     ({ id: _id, role, data: _data, limit, fallback, placeholder = DEFAULT_PLACEHOLDER, ...rest }, forwardedRef) => {
       // TODO(wittjosiah): This will make all surfaces depend on a single signal.
       //   This isn't ideal because it means that any change to the data will cause all surfaces to re-render.