@dxos/plugin-stack 0.7.4 → 0.7.5-labs.071a3e2

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

@@ -3,18 +3,12 @@ export declare const SectionSchema: S.Struct<{
     height: S.optional<typeof S.Number>;
     custom: S.optional<S.Record$<typeof S.String, typeof S.Any>>;
 }>;
-declare const StackViewType_base: import("@dxos/echo-schema").AbstractTypedObject<{
-    sections: {
-        [x: string]: {
-            readonly height?: number | undefined;
-            readonly custom?: {
-                readonly [x: string]: any;
-            } | undefined;
-        };
-    };
-} & {
-    id: string;
-}, S.Struct.Encoded<{
+declare const StackViewType_base: import("@dxos/echo-schema").TypedObjectPrototype<import("packages/core/echo/echo-schema/dist/types/src/object/common").TypedObjectFields<{
+    sections: S.mutable<S.Record$<typeof S.String, S.Struct<{
+        height: S.optional<typeof S.Number>;
+        custom: S.optional<S.Record$<typeof S.String, typeof S.Any>>;
+    }>>>;
+}, import("packages/core/echo/echo-schema/dist/types/src/object/common").TypedObjectOptions>, S.Struct.Encoded<{
     sections: S.mutable<S.Record$<typeof S.String, S.Struct<{
         height: S.optional<typeof S.Number>;
         custom: S.optional<S.Record$<typeof S.String, typeof S.Any>>;

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

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/types/stack.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAOnD,eAAO,MAAM,aAAa;;;EAKxB,CAAC;;;;;;;;;;;;;;;;;;AAGH,qBAAa,aAAc,SAAQ,kBAEjC;CAAG"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/types/stack.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAOnD,eAAO,MAAM,aAAa;;;EAKxB,CAAC;;;;;;;;;;;;AAGH,qBAAa,aAAc,SAAQ,kBAEjC;CAAG"}

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

@@ -1,8 +1,7 @@
 import { type IconProps } from '@phosphor-icons/react';
 import { type FC } from 'react';
-import type { Intent, MetadataRecordsProvides, SettingsProvides, SurfaceProvides, TranslationsProvides } from '@dxos/app-framework';
-import { type SchemaProvides } from '@dxos/plugin-space';
 import { type CollectionType } from '@dxos/plugin-space/types';
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
 import { type Label } from '@dxos/react-ui';
 import { type StackItemSize } from '@dxos/react-ui-stack';
 export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
@@ -33,26 +32,12 @@ export type StackSectionMetadata = {
 };
 export type StackSectionItem = {
     id: string;
-    object: CollectionType['objects'][number];
+    object: ReactiveEchoObject<any>;
     view: StackSectionView;
     metadata: StackSectionMetadata;
 };
-export type StackSectionCreator = StackSectionAction & {
-    intent: Intent | Intent[];
-};
-export type StackProvides = {
-    stack: {
-        creators?: StackSectionCreator[];
-    };
-};
-export type StackState = {
-    creators: StackSectionCreator[];
-};
 export type StackSettingsProps = {
     separation: boolean;
 };
-export type StackPluginProvides = SurfaceProvides & MetadataRecordsProvides & SettingsProvides<StackSettingsProps> & TranslationsProvides & SchemaProvides & {
-    stack: StackState;
-};
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EACV,MAAM,EACN,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/E,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC9B,CAAC;AAIF,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,kBAAkB,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,oBAAoB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE;QACL,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAC/C,uBAAuB,GACvB,gBAAgB,CAAC,kBAAkB,CAAC,GACpC,oBAAoB,GACpB,cAAc,GAAG;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/E,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC9B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,kBAAkB,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,oBAAoB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.7.4",
+  "version": "0.7.5-labs.071a3e2",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,11 +13,6 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs",
-      "node": "./dist/lib/node-esm/meta.mjs"
-    },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -27,9 +22,6 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -41,28 +33,27 @@
   ],
   "dependencies": {
     "@effect/schema": "^0.75.5",
-    "@fluentui/react-tabster": "^9.19.0",
+    "@fluentui/react-tabster": "9.23.3",
     "@preact/signals-core": "^1.6.0",
-    "@radix-ui/react-collapsible": "^1.0.2",
+    "@radix-ui/react-collapsible": "1.1.3",
     "node-fetch": "^2.6.0",
     "react-is": "~18.2.0",
-    "@dxos/app-framework": "0.7.4",
-    "@dxos/async": "0.7.4",
-    "@dxos/client": "0.7.4",
-    "@dxos/echo-schema": "0.7.4",
-    "@dxos/invariant": "0.7.4",
-    "@dxos/local-storage": "0.7.4",
-    "@dxos/plugin-graph": "0.7.4",
-    "@dxos/plugin-client": "0.7.4",
-    "@dxos/plugin-ipfs": "0.7.4",
-    "@dxos/plugin-space": "0.7.4",
-    "@dxos/react-client": "0.7.4",
-    "@dxos/react-ui-attention": "0.7.4",
-    "@dxos/react-ui-form": "0.7.4",
-    "@dxos/react-ui-mosaic": "0.7.4",
-    "@dxos/react-ui-stack": "0.7.4",
-    "@dxos/react-ui-searchlist": "0.7.4",
-    "@dxos/util": "0.7.4"
+    "@dxos/app-framework": "0.7.5-labs.071a3e2",
+    "@dxos/async": "0.7.5-labs.071a3e2",
+    "@dxos/client": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-client": "0.7.5-labs.071a3e2",
+    "@dxos/local-storage": "0.7.5-labs.071a3e2",
+    "@dxos/invariant": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-graph": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-space": "0.7.5-labs.071a3e2",
+    "@dxos/react-client": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-attention": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-form": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-mosaic": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-stack": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-searchlist": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -72,16 +63,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/storybook-utils": "0.7.4"
+    "@dxos/react-ui": "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",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/StackPlugin.tsx

@@ -4,47 +4,37 @@
 
 import React from 'react';
 
-import { type Plugin, type PluginDefinition } from '@dxos/app-framework';
-import { create, type ReactiveEchoObject, fullyQualifiedId } from '@dxos/client/echo';
-import { LocalStorageStore } from '@dxos/local-storage';
+import { Capabilities, contributes, createSurface, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { type ReactiveEchoObject, fullyQualifiedId } from '@dxos/client/echo';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 import { CollectionType } from '@dxos/plugin-space/types';
-import { Main } from '@dxos/react-ui';
-import { baseSurface, topbarBlockPaddingStart, bottombarBlockPaddingEnd } from '@dxos/react-ui-theme';
 
-import { StackMain, StackSettings, AddSectionDialog, dataHasAddSectionDialogProps } from './components';
-import meta, { SECTION_IDENTIFIER, STACK_PLUGIN } from './meta';
+import { StackMain } from './components';
+import { meta, SECTION_IDENTIFIER, STACK_PLUGIN } from './meta';
 import translations from './translations';
 import { StackViewType } from './types';
-import { type StackPluginProvides, type StackProvides, type StackState, type StackSettingsProps } from './types';
 
-export const StackPlugin = (): PluginDefinition<StackPluginProvides> => {
-  const settings = new LocalStorageStore<StackSettingsProps>(STACK_PLUGIN, { separation: true });
-  const stackState = create<StackState>({ creators: [] });
-
-  return {
-    meta,
-    ready: async (plugins) => {
-      settings.prop({ key: 'separation', type: LocalStorageStore.bool() });
-
-      for (const plugin of plugins) {
-        if (plugin.meta.id === STACK_PLUGIN) {
-          continue;
-        }
-
-        if (Array.isArray((plugin as Plugin<StackProvides>).provides?.stack?.creators)) {
-          stackState.creators.push(...((plugin as Plugin<StackProvides>).provides.stack.creators ?? []));
-        }
-      }
-    },
-    provides: {
-      settings: settings.values,
-      metadata: {
-        records: {
-          [StackViewType.typename]: {
+export const StackPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/metadata`,
+      activatesOn: Events.SetupMetadata,
+      activate: () => [
+        contributes(Capabilities.Metadata, {
+          id: StackViewType.typename,
+          metadata: {
             placeholder: ['stack title placeholder', { ns: STACK_PLUGIN }],
             icon: 'ph--stack-simple--regular',
           },
-          [SECTION_IDENTIFIER]: {
+        }),
+        contributes(Capabilities.Metadata, {
+          id: SECTION_IDENTIFIER,
+          metadata: {
             parse: (section: { object: ReactiveEchoObject<any> }, type: string) => {
               switch (type) {
                 case 'node':
@@ -57,45 +47,35 @@ export const StackPlugin = (): PluginDefinition<StackPluginProvides> => {
               }
             },
           },
-        },
-      },
-      translations,
-      echo: {
-        system: [StackViewType],
-      },
-      surface: {
-        component: ({ data, role }) => {
-          switch (data.component) {
-            case `${STACK_PLUGIN}/AddSectionDialog`:
-              return dataHasAddSectionDialogProps(data) ? <AddSectionDialog {...data.subject} /> : null;
-          }
-
-          const primary = data.active ?? data.object;
-          // This allows the id to be overridden by the surface for situations where the id of the collection
-          // is not the same as the id of what is being represented (e.g., a space with a root collection).
-          const id = typeof data.id === 'string' ? data.id : undefined;
-          switch (role) {
-            case 'main':
-              return primary instanceof CollectionType ? (
-                <Main.Content bounce classNames={[baseSurface, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>
-                  <StackMain id={id ?? fullyQualifiedId(primary)} collection={primary} />
-                </Main.Content>
-              ) : null;
-            case 'article':
-              return primary instanceof CollectionType ? (
+        }),
+      ],
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () => contributes(ClientCapabilities.SystemSchema, [StackViewType]),
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupSurfaces,
+      activate: () =>
+        contributes(
+          Capabilities.ReactSurface,
+          createSurface({
+            id: `${STACK_PLUGIN}/article`,
+            role: 'article',
+            filter: (data): data is { id?: string; subject: CollectionType } => data.subject instanceof CollectionType,
+            component: ({ data }) => {
+              // This allows the id to be overridden by the surface for situations where the id of the collection
+              // is not the same as the id of what is being represented (e.g., a space with a root collection).
+              const id = typeof data.id === 'string' ? data.id : undefined;
+              return (
                 <div role='none' className='overflow-auto' style={{ contain: 'layout' }}>
-                  <StackMain id={id ?? fullyQualifiedId(primary)} collection={primary} />
+                  <StackMain id={id ?? fullyQualifiedId(data.subject)} collection={data.subject} />
                 </div>
-              ) : null;
-            case 'settings': {
-              return data.plugin === meta.id ? <StackSettings settings={settings.values} /> : null;
-            }
-            default:
-              return null;
-          }
-        },
-      },
-      stack: stackState,
-    },
-  };
-};
+              );
+            },
+          }),
+        ),
+    }),
+  ]);

package/src/components/StackMain.tsx

@@ -3,25 +3,24 @@
 //
 
 import { Plus } from '@phosphor-icons/react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
+  Capabilities,
+  createIntent,
   LayoutAction,
-  NavigationAction,
-  parseMetadataResolverPlugin,
+  useAppGraph,
+  useCapabilities,
   useIntentDispatcher,
-  useResolvePlugin,
 } from '@dxos/app-framework';
-import { create, getType, fullyQualifiedId } from '@dxos/client/echo';
-import { useGraph } from '@dxos/plugin-graph';
-import { SpaceAction } from '@dxos/plugin-space';
+import { create, getType, fullyQualifiedId, isReactiveObject, makeRef } from '@dxos/client/echo';
+import { SpaceAction } from '@dxos/plugin-space/types';
 import { type CollectionType } from '@dxos/plugin-space/types';
 import { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { AttentionProvider } from '@dxos/react-ui-attention';
 import { Stack } from '@dxos/react-ui-stack';
 import { nonNullable } from '@dxos/util';
 
-import { AddSection } from './AddSection';
 import { StackContext } from './StackContext';
 import { StackSection } from './StackSection';
 import { STACK_PLUGIN } from '../meta';
@@ -40,17 +39,17 @@ type StackMainProps = {
 };
 
 const StackMain = ({ id, collection }: StackMainProps) => {
-  const dispatch = useIntentDispatcher();
-  const { graph } = useGraph();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { graph } = useAppGraph();
   const { t } = useTranslation(STACK_PLUGIN);
-  const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);
+  const allMetadata = useCapabilities(Capabilities.Metadata);
   const defaultStack = useMemo(() => create(StackViewType, { sections: {} }), [collection]);
-  const stack = (collection.views[StackViewType.typename] as StackViewType) ?? defaultStack;
+  const stack = (collection.views[StackViewType.typename]?.target as StackViewType | undefined) ?? defaultStack;
   const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
 
   useEffect(() => {
     if (!collection.views[StackViewType.typename]) {
-      collection.views[StackViewType.typename] = stack;
+      collection.views[StackViewType.typename] = makeRef(stack);
     }
   }, [collection, stack]);
 
@@ -58,11 +57,11 @@ const StackMain = ({ id, collection }: StackMainProps) => {
     collection.objects
       // TODO(wittjosiah): Should the database handle this differently?
       // TODO(wittjosiah): Render placeholders for missing objects so they can be removed from the stack?
+      .map((object) => object.target)
       .filter(nonNullable)
       .map((object) => {
-        const metadata = metadataPlugin?.provides.metadata.resolver(
-          getType(object)?.objectId ?? 'never',
-        ) as StackSectionMetadata;
+        const metadata = allMetadata.find((m) => m.id === (getType(object)?.objectId ?? 'never'))
+          ?.metadata as StackSectionMetadata;
         const view = {
           ...stack.sections[object.id],
           collapsed: collapsedSections[fullyQualifiedId(object)],
@@ -72,46 +71,60 @@ const StackMain = ({ id, collection }: StackMainProps) => {
         return { id: fullyQualifiedId(object), object, metadata, view } satisfies StackSectionItem;
       }) ?? [];
 
-  const handleDelete = async (id: string) => {
-    const index = collection.objects.filter(nonNullable).findIndex((section) => fullyQualifiedId(section) === id);
-    if (index >= 0) {
-      await dispatch({
-        action: SpaceAction.REMOVE_OBJECTS,
-        data: { objects: [collection.objects[index]], collection },
-      });
+  const handleDelete = useCallback(
+    async (id: string) => {
+      const index = collection.objects
+        .map((object) => object.target)
+        .filter(nonNullable)
+        .findIndex((section) => fullyQualifiedId(section) === id);
+      const object = collection.objects[index].target;
+      if (isReactiveObject(object)) {
+        await dispatch(createIntent(SpaceAction.RemoveObjects, { objects: [object], target: collection }));
 
-      // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
-      // delete stack.sections[Path.last(path)];
-    }
-  };
-
-  const handleAdd = (id: string, position: AddSectionPosition) => {
-    void dispatch?.({
-      action: LayoutAction.SET_LAYOUT,
-      data: {
-        element: 'dialog',
-        component: `${STACK_PLUGIN}/AddSectionDialog`,
-        subject: { path: id, position, collection },
-      },
-    });
-  };
-
-  const handleNavigate = async (id: string) => {
-    await dispatch([
-      {
-        action: NavigationAction.OPEN,
-        data: { activeParts: { main: [id] } },
-      },
-      {
-        action: LayoutAction.SCROLL_INTO_VIEW,
-        data: { id },
-      },
-    ]);
-  };
-
-  const handleCollapse = (id: string, collapsed: boolean) => {
-    setCollapsedSections((prev) => ({ ...prev, [id]: collapsed }));
-  };
+        // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
+        // delete stack.sections[Path.last(path)];
+      }
+    },
+    [collection, dispatch],
+  );
+
+  const handleAdd = useCallback(
+    async (id: string, position: AddSectionPosition) => {
+      await dispatch?.(
+        // TODO(wittjosiah): Use object creation dialog.
+        createIntent(LayoutAction.UpdateDialog, {
+          part: 'dialog',
+          subject: `${STACK_PLUGIN}/AddSectionDialog`,
+          options: {
+            blockAlign: 'start',
+            props: {
+              path: id,
+              position,
+              collection,
+            },
+          },
+        }),
+      );
+    },
+    [collection, dispatch],
+  );
+
+  const handleNavigate = useCallback(
+    async (id: string) => {
+      await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [id] }));
+    },
+    [dispatch],
+  );
+
+  const handleCollapse = useCallback(
+    (id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),
+    [],
+  );
+
+  const handleAddSection = useCallback(
+    () => dispatch?.(createIntent(SpaceAction.OpenCreateObject, { target: collection, navigable: false })),
+    [collection, dispatch],
+  );
 
   return (
     <AttentionProvider id={id}>
@@ -123,35 +136,18 @@ const StackMain = ({ id, collection }: StackMainProps) => {
           onAdd: handleAdd,
         }}
       >
-        <Stack orientation='vertical' size='intrinsic' separators={false} id={id} data-testid='main.stack'>
+        <Stack orientation='vertical' size='intrinsic' id={id} data-testid='main.stack'>
           {items.map((item) => (
             <StackSection key={item.id} {...item} />
           ))}
         </Stack>
 
-        {items.length === 0 ? (
-          <AddSection collection={collection} />
-        ) : (
-          <div role='none' className='flex mlb-2 pli-2 justify-center'>
-            <Button
-              data-testid='stack.createSection'
-              classNames='gap-2'
-              onClick={() =>
-                dispatch?.({
-                  action: LayoutAction.SET_LAYOUT,
-                  data: {
-                    element: 'dialog',
-                    component: 'dxos.org/plugin/stack/AddSectionDialog',
-                    subject: { position: 'afterAll', collection },
-                  },
-                })
-              }
-            >
-              <Plus />
-              <span className='sr-only'>{t('add section label')}</span>
-            </Button>
-          </div>
-        )}
+        <div role='none' className='flex mlb-2 pli-2 justify-center'>
+          <Button data-testid='stack.createSection' classNames='gap-2' onClick={handleAddSection}>
+            <Plus />
+            <span className='sr-only'>{t('add section label')}</span>
+          </Button>
+        </div>
       </StackContext.Provider>
     </AttentionProvider>
   );

package/src/components/StackSection.tsx

@@ -47,7 +47,7 @@ export const StackSection = ({
                 </StackItem.SigilButton>
               </DropdownMenu.Trigger>
               <DropdownMenu.Portal>
-                <DropdownMenu.Content style={{ zIndex: 70 }}>
+                <DropdownMenu.Content>
                   <DropdownMenu.Viewport>
                     {view.collapsed ? (
                       <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>
@@ -83,7 +83,6 @@ export const StackSection = ({
               <CollapsiblePrimitive.Trigger asChild>
                 <IconButton
                   iconOnly
-                  tooltipZIndex='70'
                   variant='ghost'
                   label={t('expand label')}
                   icon='ph--caret-up-down--regular'
@@ -93,7 +92,6 @@ export const StackSection = ({
             ) : (
               <IconButton
                 iconOnly
-                tooltipZIndex='70'
                 variant='ghost'
                 onClick={() => onNavigate(id)}
                 label={t('navigate to section label')}
@@ -105,11 +103,11 @@ export const StackSection = ({
           </div>
         </StackItem.Heading>
         <CollapsiblePrimitive.Content>
-          <Surface role='section' data={{ object }} limit={1} placeholder={<></>} />
+          <Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
         </CollapsiblePrimitive.Content>
         {view.collapsed && (
           <StackItem.Content toolbar={false} classNames='attention-surface'>
-            <h2 className={mx('flex items-center p-4 font-medium is-full', textBlockWidth)}>{view.title}</h2>
+            <h2 className={mx('flex items-center p-4 font-medium', textBlockWidth)}>{view.title}</h2>
           </StackItem.Content>
         )}
       </StackItem.Root>

package/src/components/StackSettings.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 { STACK_PLUGIN } from '../meta';
 import { type StackSettingsProps } from '../types';
@@ -14,10 +14,10 @@ export const StackSettings = ({ settings }: { settings: StackSettingsProps }) =>
   const { t } = useTranslation(STACK_PLUGIN);
 
   return (
-    <>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('settings separation label')}>
         <Input.Switch checked={settings.separation} onCheckedChange={(checked) => (settings.separation = !!checked)} />
       </DeprecatedFormInput>
-    </>
+    </DeprecatedFormContainer>
   );
 };

package/src/components/index.ts

@@ -7,4 +7,3 @@ import { lazy } from 'react';
 export const StackMain = lazy(() => import('./StackMain'));
 
 export * from './StackSettings';
-export * from './AddSectionDialog';

package/src/index.ts

@@ -2,10 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { StackPlugin } from './StackPlugin';
-
-export default StackPlugin;
-
-export * from './types';
-
+export * from './meta';
 export * from './StackPlugin';

package/src/meta.ts

@@ -7,7 +7,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 export const STACK_PLUGIN = 'dxos.org/plugin/stack';
 export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
 
-export default {
+export const meta = {
   id: STACK_PLUGIN,
   // TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
   //   Conside renaming this to the collection plugin and trying to factor more collections logic from the space plugin.