@dxos/app-framework 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/moon.yml

@@ -10,8 +10,8 @@ tasks:
   compile:
     args:
       - '--entryPoint=src/index.ts'
+      - '--entryPoint=src/react/index.ts'
       - '--entryPoint=src/testing/index.ts'
-      - '--entryPoint=src/worker.ts'
       - '--preactSignalTracking'
   test:
     inputs:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-framework",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "A framework for building applications from composible plugins.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,27 +15,27 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./react": {
+      "source": "./src/react/index.ts",
+      "types": "./dist/types/src/react/index.d.ts",
+      "browser": "./dist/lib/browser/react/index.mjs",
+      "node": "./dist/lib/node-esm/react/index.mjs"
+    },
     "./testing": {
       "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
-    },
-    "./worker": {
-      "source": "./src/worker.ts",
-      "types": "./dist/types/src/worker.d.ts",
-      "browser": "./dist/lib/browser/worker.mjs",
-      "node": "./dist/lib/node-esm/worker.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
+      "react": [
+        "dist/types/src/react/index.d.ts"
+      ],
       "testing": [
         "dist/types/src/testing/index.d.ts"
-      ],
-      "worker": [
-        "dist/types/src/worker.d.ts"
       ]
     }
   },
@@ -44,38 +44,41 @@
     "@effect/experimental": "0.56.0",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.12.1",
-    "@dxos/ai": "0.8.4-main.406dc2a",
-    "@dxos/app-graph": "0.8.4-main.406dc2a",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/blueprints": "0.8.4-main.406dc2a",
-    "@dxos/client-protocol": "0.8.4-main.406dc2a",
-    "@dxos/functions": "0.8.4-main.406dc2a",
-    "@dxos/debug": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/keys": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/react-hooks": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a",
-    "@dxos/local-storage": "0.8.4-main.406dc2a"
+    "@dxos/ai": "0.8.4-main.548089c",
+    "@dxos/assistant": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/app-graph": "0.8.4-main.548089c",
+    "@dxos/blueprints": "0.8.4-main.548089c",
+    "@dxos/client-protocol": "0.8.4-main.548089c",
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/functions": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/local-storage": "0.8.4-main.548089c",
+    "@dxos/keys": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c",
+    "@dxos/react-hooks": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "0.92.1",
     "@types/react": "~19.2.2",
     "effect": "3.18.3",
     "react": "~19.2.0",
     "typedoc": "0.28.1",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/echo-signals": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@dxos/echo-signals": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "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": "^19.0.0"

package/src/common/capabilities.ts

@@ -2,9 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Tool from '@effect/ai/Tool';
-import type * as Toolkit from '@effect/ai/Toolkit';
-import { type Registry } from '@effect-rx/rx-react';
+import { type Registry } from '@effect-atom/atom-react';
 import type * as Layer from 'effect/Layer';
 import type * as Schema from 'effect/Schema';
 import { type FC, type PropsWithChildren } from 'react';
@@ -12,11 +10,12 @@ import { type FC, type PropsWithChildren } from 'react';
 import { type AiService } from '@dxos/ai';
 import type * as AiServiceRouter from '@dxos/ai/AiServiceRouter';
 import { type BuilderExtensions, type GraphBuilder } from '@dxos/app-graph';
+import { type GenericToolkit } from '@dxos/assistant';
 import { type Blueprint } from '@dxos/blueprints';
 import { type Space } from '@dxos/client-protocol';
 import { type FunctionDefinition } from '@dxos/functions';
 import { type RootSettingsStore } from '@dxos/local-storage';
-import { type AnchoredTo } from '@dxos/schema';
+import { type AnchoredTo } from '@dxos/types';
 
 import { type PluginManager, defineCapability } from '../core';
 import { type AnyIntentResolver, type IntentContext } from '../plugin-intent';
@@ -41,9 +40,13 @@ export namespace Capabilities {
   /**
    * @category Capability
    */
-  export const RxRegistry = defineCapability<Registry.Registry>('dxos.org/app-framework/capability/rx-registry');
+  export const RxRegistry = defineCapability<Registry.Registry>('dxos.org/app-framework/capability/atom-registry');
 
-  export type ReactContext = Readonly<{ id: string; dependsOn?: string[]; context: FC<PropsWithChildren> }>;
+  export type ReactContext = Readonly<{
+    id: string;
+    dependsOn?: string[];
+    context: FC<PropsWithChildren>;
+  }>;
 
   /**
    * @category Capability
@@ -151,25 +154,21 @@ export namespace Capabilities {
    */
   export const Settings = defineCapability<Settings>('dxos.org/app-framework/capability/settings');
 
-  export type Metadata = Readonly<{ id: string; metadata: Record<string, any> }>;
+  export type Metadata = Readonly<{
+    id: string;
+    metadata: Record<string, any>;
+  }>;
 
   /**
    * @category Capability
    */
   export const Metadata = defineCapability<Metadata>('dxos.org/app-framework/capability/metadata');
 
-  // TODO(dmaretskyi): Consider combining Toolkit and ToolkitHandler for type-safe context.
-
-  /**
-   * @category Capability
-   */
-  export const Toolkit = defineCapability<Toolkit.Any>('dxos.org/app-framework/capability/ai-toolkit');
-
   /**
    * @category Capability
    */
-  export const ToolkitHandler = defineCapability<Layer.Layer<Tool.Handler<any>, never, never>>(
-    'dxos.org/app-framework/capability/ai-toolkit-handler',
+  export const Toolkit = defineCapability<GenericToolkit.GenericToolkit>(
+    'dxos.org/app-framework/capability/ai-toolkit',
   );
 
   /**
@@ -198,16 +197,16 @@ export namespace Capabilities {
     'dxos.org/app-framework/capability/functions',
   );
 
-  export type FileUploader = (file: File, space: Space) => Promise<FileInfo | undefined>;
+  export type FileUploader = (space: Space, file: File) => Promise<FileInfo | undefined>;
 
   /**
    * @category Capability
    */
   export const FileUploader = defineCapability<FileUploader>('dxos.org/app-framework/capability/file-uploader');
 
-  type AnchorSort = {
+  export type AnchorSort = {
     key: string;
-    sort: (anchorA: AnchoredTo, anchorB: AnchoredTo) => number;
+    sort: (anchorA: AnchoredTo.AnchoredTo, anchorB: AnchoredTo.AnchoredTo) => number;
   };
 
   /**

package/src/common/collaboration.ts

@@ -4,14 +4,14 @@
 
 import * as Schema from 'effect/Schema';
 
-import { DataType } from '@dxos/schema';
+import { ContentBlock } from '@dxos/types';
 
 export namespace CollaborationActions {
   export class AcceptProposal extends Schema.TaggedClass<AcceptProposal>()('collaboration/accept-proposal', {
     input: Schema.Struct({
       subject: Schema.Any,
       anchor: Schema.String,
-      proposal: DataType.MessageBlock.Proposal,
+      proposal: ContentBlock.Proposal,
     }),
     output: Schema.Void,
   }) {}

package/src/common/surface.ts

@@ -45,6 +45,7 @@ type CoreSurfaceProps<T extends Record<string, any> = Record<string, unknown>> =
 
   /**
    * The data to be rendered by the surface.
+   * NOTE: This must be a stable value.
    */
   data: T;
 

package/src/core/capabilities.test.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Registry } from '@effect-rx/rx-react';
+import { Registry } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import { describe, expect, it, onTestFinished } from 'vitest';
 

package/src/core/capabilities.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Registry, Rx } from '@effect-rx/rx-react';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
 import { Trigger } from '@dxos/async';
@@ -41,17 +41,17 @@ export type Capability<T> = {
   /**
    * The interface definition of the capability.
    */
-  interface: InterfaceDef<T>;
+  readonly interface: InterfaceDef<T>;
 
   /**
    * The implementation of the capability.
    */
-  implementation: T;
+  readonly implementation: T;
 
   /**
    * Called when the capability is deactivated.
    */
-  deactivate?: () => MaybePromise<void> | Effect.Effect<void, Error>;
+  readonly deactivate?: () => MaybePromise<void> | Effect.Effect<void, Error>;
 };
 
 export type AnyCapability = Capability<any>;
@@ -78,7 +78,11 @@ export const contributes = <I extends InterfaceDef<any>>(
   implementation: Capability<InterfaceDef.Implementation<I>>['implementation'],
   deactivate?: Capability<InterfaceDef.Implementation<I>>['deactivate'],
 ): Capability<I> => {
-  return { interface: interfaceDef, implementation, deactivate } satisfies Capability<I>;
+  return {
+    interface: interfaceDef,
+    implementation,
+    deactivate,
+  } satisfies Capability<I>;
 };
 
 type LoadCapability<T, U> = () => Promise<{ default: (props: T) => MaybePromise<Capability<U>> }>;
@@ -105,19 +109,19 @@ export const lazy =
 export class PluginContext {
   private readonly _registry: Registry.Registry;
 
-  private readonly _capabilityImpls = Rx.family<string, Rx.Writable<CapabilityImpl<unknown>[]>>(() => {
-    return Rx.make<CapabilityImpl<unknown>[]>([]).pipe(Rx.keepAlive);
+  private readonly _capabilityImpls = Atom.family<string, Atom.Writable<CapabilityImpl<unknown>[]>>(() => {
+    return Atom.make<CapabilityImpl<unknown>[]>([]).pipe(Atom.keepAlive);
   });
 
-  readonly _capabilities = Rx.family<string, Rx.Rx<unknown[]>>((id: string) => {
-    return Rx.make((get) => {
+  readonly _capabilities = Atom.family<string, Atom.Atom<unknown[]>>((id: string) => {
+    return Atom.make((get) => {
       const current = get(this._capabilityImpls(id));
       return current.map((c) => c.implementation);
     });
   });
 
-  readonly _capability = Rx.family<string, Rx.Rx<unknown>>((id: string) => {
-    return Rx.make((get) => {
+  readonly _capability = Atom.family<string, Atom.Atom<unknown>>((id: string) => {
+    return Atom.make((get) => {
       const current = get(this._capabilities(id));
       invariant(current.length > 0, `No capability found for ${id}`);
       return current[0];
@@ -189,26 +193,26 @@ export class PluginContext {
   }
 
   /**
-   * Get the Rx reference to the available capabilities for a given interface.
-   * Primarily useful for deriving other Rx values based on the capabilities or
+   * Get the Atom reference to the available capabilities for a given interface.
+   * Primarily useful for deriving other Atom values based on the capabilities or
    * for subscribing to changes in the capabilities.
    * @returns An Rx reference to the available capabilities.
    */
-  capabilities<T>(interfaceDef: InterfaceDef<T>): Rx.Rx<T[]> {
+  capabilities<T>(interfaceDef: InterfaceDef<T>): Atom.Atom<T[]> {
     // NOTE: This the type-checking for capabilities is done at the time of contribution.
-    return this._capabilities(interfaceDef.identifier) as Rx.Rx<T[]>;
+    return this._capabilities(interfaceDef.identifier) as Atom.Atom<T[]>;
   }
 
   /**
-   * Get the Rx reference to the available capabilities for a given interface.
-   * Primarily useful for deriving other Rx values based on the capability or
+   * Get the Atom reference to the available capabilities for a given interface.
+   * Primarily useful for deriving other Atom values based on the capability or
    * for subscribing to changes in the capability.
    * @returns An Rx reference to the available capability.
    * @throws If no capability is found.
    */
-  capability<T>(interfaceDef: InterfaceDef<T>): Rx.Rx<T> {
+  capability<T>(interfaceDef: InterfaceDef<T>): Atom.Atom<T> {
     // NOTE: This the type-checking for capabilities is done at the time of contribution.
-    return this._capability(interfaceDef.identifier) as Rx.Rx<T>;
+    return this._capability(interfaceDef.identifier) as Atom.Atom<T>;
   }
 
   /**

package/src/core/manager.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Registry } from '@effect-rx/rx-react';
+import { Registry } from '@effect-atom/atom-react';
 import { untracked } from '@preact/signals-core';
 import * as Array from 'effect/Array';
 import * as Duration from 'effect/Duration';
@@ -55,7 +55,7 @@ export class PluginManager {
   readonly context: PluginContext;
   readonly registry: Registry.Registry;
 
-  // TODO(wittjosiah): Replace with Rx.
+  // TODO(wittjosiah): Replace with Atom.
   private readonly _state: Live<PluginManagerState>;
   private readonly _pluginLoader: PluginManagerOptions['pluginLoader'];
   private readonly _capabilities = new Map<string, AnyCapability[]>();

package/src/core/plugin.ts

@@ -110,6 +110,11 @@ export type PluginMeta = {
    * A grep-able symbol string which can be resolved to an icon asset by @ch-ui/icons, via @ch-ui/vite-plugin-icons.
    */
   icon?: string;
+
+  /**
+   * Icon hue (ChromaticPalette).
+   */
+  iconHue?: string;
 };
 
 /**

package/src/index.ts

@@ -3,8 +3,6 @@
 //
 
 export * from './common';
-export * from './components';
 export * from './core';
 export * from './plugin-intent';
 export * from './plugin-settings';
-export * from './react';

package/src/playground/generator/Main.tsx

@@ -30,7 +30,6 @@ const Item = ({
           variant='ghost'
           icon='ph--x--regular'
           label='Remove'
-          size={5}
           disabled={disabled}
           onClick={handleRemove}
         />

package/src/playground/playground.stories.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { useApp } from '../components';
 import { IntentPlugin } from '../plugin-intent';
+import { useApp } from '../react';
 
 import { DebugPlugin } from './debug';
 import { GeneratorPlugin, createNumberPlugin } from './generator';

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
 
@@ -22,7 +22,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: `${meta.id}/action`,
       actions: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
@@ -51,7 +51,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: `${meta.id}/core`,
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
@@ -75,7 +75,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: `${meta.id}/core-plugins`,
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id !== SETTINGS_ID ? Option.none() : Option.some(node))),
@@ -123,7 +123,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: `${meta.id}/custom-plugins`,
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) =>

package/src/plugin-settings/translations.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Resource } from '@dxos/react-ui';
+import { type Resource } from '../common';
 
 import { meta } from './meta';
 

package/src/{components → react}/App.tsx

@@ -6,9 +6,9 @@ import React, { type PropsWithChildren } from 'react';
 
 import { Capabilities } from '../common';
 import { topologicalSort } from '../helpers';
-import { useCapabilities } from '../react';
 
 import { type UseAppOptions } from './useApp';
+import { useCapabilities } from './useCapabilities';
 import { LoadingState, useLoading } from './useLoading';
 
 export type AppProps = Pick<UseAppOptions, 'placeholder' | 'debounce'> & {

package/src/{components → react}/DefaultFallback.tsx

@@ -19,7 +19,7 @@ export const DefaultFallback = ({ error }: { error: Error }) => {
       }}
     >
       {/* TODO(wittjosiah): Link to docs for replacing default. */}
-      <h1 style={{ margin: '0.5rem 0', fontSize: '1.2rem' }}>[ERROR]: {error.message}</h1>
+      <h1 style={{ margin: '0.5rem 0', fontSize: '1.2rem' }}>ERROR: {error.message}</h1>
       <pre style={{ overflow: 'auto', fontSize: '1rem', whiteSpace: 'pre-wrap', color: '#888888' }}>{error.stack}</pre>
     </div>
   );

package/src/react/Surface.stories.tsx

@@ -3,94 +3,118 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { Button, List, ListItem } from '@dxos/react-ui';
+import { List, ListItem, Toolbar } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
+import { getHashStyles, mx } from '@dxos/react-ui-theme';
 
 import { Capabilities, createSurface } from '../common';
-import { type PluginManager } from '../core';
-import { setupPluginManager } from '../testing';
+import { withPluginManager } from '../testing';
 
-import { PluginManagerProvider, usePluginManager } from './PluginManagerProvider';
+import { usePluginManager } from './PluginManagerProvider';
 import { Surface, useSurfaces } from './Surface';
 
-const randomColor = (): string => {
-  const hue = faker.number.int({ min: 0, max: 360 });
-  const saturation = faker.number.int({ min: 50, max: 90 });
-  const lightness = faker.number.int({ min: 40, max: 70 });
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-};
-
-const Component = () => {
+const DefaultStory = () => {
+  const [selected, setSelected] = useState<string | undefined>();
   const manager = usePluginManager();
   const surfaces = useSurfaces();
-  const [picked, setPicked] = useState('test');
 
   const handleAdd = useCallback(() => {
-    const id = `test-${faker.number.int({ min: 0, max: 1_000_000 })}`;
-    const backgroundColor = randomColor();
+    const id = `test-${faker.number.int({ min: 0, max: 1_000 })}`;
+    const styles = getHashStyles(id);
 
     manager.context.contributeCapability({
       module: 'test',
       interface: Capabilities.ReactSurface,
       implementation: createSurface({
         id,
-        role: id,
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === id,
         component: () => (
-          <div className='flex-1' style={{ backgroundColor }}>
-            {id}
+          <div className={mx('flex justify-center items-center border rounded', styles.surface, styles.border)}>
+            <span className={mx('dx-tag font-mono text-lg', styles.text)}>{id}</span>
           </div>
         ),
       }),
     });
 
-    setPicked(id);
+    setSelected(id);
   }, [manager]);
 
-  const handlePick = useCallback(() => {
-    setPicked(faker.helpers.arrayElement(surfaces).id);
+  const handleSelect = useCallback(() => {
+    setSelected(faker.helpers.arrayElement(surfaces)?.id);
   }, [surfaces]);
 
+  const handleError = useCallback(() => {
+    manager.context.contributeCapability({
+      module: 'error',
+      interface: Capabilities.ReactSurface,
+      implementation: createSurface({
+        id: 'error',
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === 'error',
+        component: () => {
+          const [count, setCount] = useState(3);
+          useEffect(() => {
+            const interval = setInterval(() => {
+              setCount((count) => {
+                if (count <= 1) {
+                  clearInterval(interval);
+                }
+
+                return count - 1;
+              });
+            }, 1_000);
+            return () => clearInterval(interval);
+          }, []);
+
+          if (count <= 0) {
+            throw new Error('BANG!');
+          }
+
+          return (
+            <div className='flex justify-center items-center border border-rose-500 rounded'>
+              <span className='font-mono'>Ticking... {count}</span>
+            </div>
+          );
+        },
+      }),
+    });
+
+    setSelected('error');
+  }, [manager]);
+
   return (
-    <div className='flex flex-col gap-2'>
-      <div className='flex gap-2'>
-        <Button onClick={handleAdd}>Add</Button>
-        <Button onClick={handlePick}>Pick</Button>
-      </div>
-      <div className='flex gap-2'>
-        <div className='flex-1'>
-          <List itemSizes='one'>
+    <div className='flex flex-col bs-full overflow-hidden'>
+      <Toolbar.Root>
+        <Toolbar.Button onClick={handleAdd}>Add</Toolbar.Button>
+        <Toolbar.Button onClick={handleSelect}>Pick</Toolbar.Button>
+        <Toolbar.Button onClick={handleError}>Error</Toolbar.Button>
+      </Toolbar.Root>
+      <div className='grid grid-cols-2 bs-full gap-4 overflow-hidden'>
+        <Surface role='item' data={selected ? { id: selected } : undefined} limit={1} />
+        <div className='overflow-y-auto bs-full'>
+          <List>
             {surfaces.map((surface) => (
               <ListItem.Root key={surface.id} id={surface.id}>
-                <ListItem.Heading classNames='grow pbs-2'>{surface.id}</ListItem.Heading>
+                <ListItem.Heading classNames='flex items-center'>{surface.id}</ListItem.Heading>
               </ListItem.Root>
             ))}
           </List>
         </div>
-        <div className='flex-1'>
-          <Surface role={picked} limit={1} />
-        </div>
       </div>
     </div>
   );
 };
 
-const DefaultStory = (props: { manager: PluginManager }) => {
-  return (
-    <PluginManagerProvider value={props.manager}>
-      <Component />
-    </PluginManagerProvider>
-  );
-};
-
 const meta = {
   title: 'sdk/app-framework/Surface',
   render: DefaultStory,
-  decorators: [withTheme],
-  args: {
-    manager: setupPluginManager(),
+  decorators: [withTheme, withPluginManager({ capabilities: [] })],
+  parameters: {
+    layout: 'fullscreen',
   },
 } satisfies Meta<typeof DefaultStory>;