@dxos/plugin-stack 0.8.4-main.406dc2a → 0.8.4-main.52d7546f51

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/plugin-stack",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.52d7546f51",
   "description": "DXOS Surface plugin for Stack entities",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
@@ -35,48 +39,48 @@
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-collapsible": "1.1.3",
-    "effect": "3.18.3",
+    "effect": "3.19.16",
     "node-fetch": "^2.6.0",
     "react-is": "~19.2.0",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/app-framework": "0.8.4-main.406dc2a",
-    "@dxos/client": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/local-storage": "0.8.4-main.406dc2a",
-    "@dxos/plugin-client": "0.8.4-main.406dc2a",
-    "@dxos/plugin-graph": "0.8.4-main.406dc2a",
-    "@dxos/plugin-deck": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/plugin-space": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-attention": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-searchlist": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-form": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a"
+    "@dxos/app-framework": "0.8.4-main.52d7546f51",
+    "@dxos/app-toolkit": "0.8.4-main.52d7546f51",
+    "@dxos/echo": "0.8.4-main.52d7546f51",
+    "@dxos/invariant": "0.8.4-main.52d7546f51",
+    "@dxos/client": "0.8.4-main.52d7546f51",
+    "@dxos/operation": "0.8.4-main.52d7546f51",
+    "@dxos/plugin-client": "0.8.4-main.52d7546f51",
+    "@dxos/async": "0.8.4-main.52d7546f51",
+    "@dxos/plugin-graph": "0.8.4-main.52d7546f51",
+    "@dxos/plugin-deck": "0.8.4-main.52d7546f51",
+    "@dxos/plugin-space": "0.8.4-main.52d7546f51",
+    "@dxos/react-client": "0.8.4-main.52d7546f51",
+    "@dxos/react-ui-attention": "0.8.4-main.52d7546f51",
+    "@dxos/react-ui-form": "0.8.4-main.52d7546f51",
+    "@dxos/react-ui-searchlist": "0.8.4-main.52d7546f51",
+    "@dxos/schema": "0.8.4-main.52d7546f51",
+    "@dxos/react-ui-stack": "0.8.4-main.52d7546f51",
+    "@dxos/types": "0.8.4-main.52d7546f51",
+    "@dxos/util": "0.8.4-main.52d7546f51"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.52d7546f51",
+    "@dxos/storybook-utils": "0.8.4-main.52d7546f51",
+    "@dxos/ui-theme": "0.8.4-main.52d7546f51"
   },
   "peerDependencies": {
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.52d7546f51",
+    "@dxos/ui-theme": "0.8.4-main.52d7546f51"
   },
   "publishConfig": {
     "access": "public"

package/src/StackPlugin.ts

@@ -2,50 +2,35 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 import { type Obj } from '@dxos/echo';
-import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
 import { ReactSurface } from './capabilities';
 import { SECTION_IDENTIFIER, meta } from './meta';
 import { translations } from './translations';
 import { StackViewType } from './types';
 
-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: SECTION_IDENTIFIER,
-        metadata: {
-          parse: (section: { object: Obj.Any }, type: string) => {
-            switch (type) {
-              case 'node':
-                return { id: section.object.id, label: (section.object as any).title, data: section.object };
-              case 'object':
-                return section.object;
-              case 'view-object':
-                return section;
-            }
-          },
+export const StackPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: SECTION_IDENTIFIER,
+      metadata: {
+        parse: (section: { object: Obj.Unknown }, type: string) => {
+          switch (type) {
+            case 'node':
+              return { id: section.object.id, label: (section.object as any).title, data: section.object };
+            case 'object':
+              return section.object;
+            case 'view-object':
+              return section;
+          }
         },
-      }),
-    ],
-  }),
-  defineModule({
-    id: `${meta.id}/module/schema`,
-    activatesOn: ClientEvents.SetupSchema,
-    activate: () => contributes(ClientCapabilities.Schema, [StackViewType]),
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface,
+      },
+    },
   }),
-]);
+  AppPlugin.addSchemaModule({ schema: [StackViewType] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.make,
+);

package/src/capabilities/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
-
-export const ReactSurface = lazy(() => import('./react-surface'));
+export * from './react-surface';

package/src/capabilities/react-surface/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { Obj } from '@dxos/echo';
+import { Collection } from '@dxos/schema';
+
+import { StackContainer } from '../../components';
+import { meta } from '../../meta';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(
+      Capabilities.ReactSurface,
+      Surface.create({
+        id: `${meta.id}/article`,
+        role: 'article',
+        filter: (data): data is { id?: string; subject: Collection.Collection } =>
+          Obj.instanceOf(Collection.Collection, data.subject),
+        component: ({ role, 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 <StackContainer id={id ?? Obj.getDXN(data.subject).toString()} role={role} subject={data.subject} />;
+        },
+      }),
+    ),
+  ),
+);

package/src/components/StackContainer.tsx

@@ -5,21 +5,17 @@
 import * as Option from 'effect/Option';
 import React, { useCallback, useState } from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  createIntent,
-  useAppGraph,
-  useCapabilities,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { fullyQualifiedId, isLiveObject } from '@dxos/client/echo';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
-import { SpaceAction } from '@dxos/plugin-space/types';
+import { Graph } from '@dxos/plugin-graph';
+import { SpaceOperation } from '@dxos/plugin-space/types';
 import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { AttentionProvider } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '../meta';
@@ -34,16 +30,15 @@ import {
 import { StackContext } from './StackContext';
 import { StackSection } from './StackSection';
 
-type StackContainerProps = {
+type StackContainerProps = SurfaceComponentProps<Collection.Collection> & {
   id: string;
-  collection: DataType.Collection;
 };
 
-const StackContainer = ({ id, collection }: StackContainerProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
+  const { invokePromise } = useOperationInvoker();
   const { graph } = useAppGraph();
   const { t } = useTranslation(meta.id);
-  const allMetadata = useCapabilities(Capabilities.Metadata);
+  const allMetadata = useCapabilities(AppCapabilities.Metadata);
   const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
 
   // TODO(wittjosiah): Re-implement stack views with relations.
@@ -66,13 +61,16 @@ const StackContainer = ({ id, collection }: StackContainerProps) => {
           ?.metadata as StackSectionMetadata;
         const view = {
           // ...stack.sections[object.id],
-          collapsed: collapsedSections[fullyQualifiedId(object)],
+          collapsed: collapsedSections[Obj.getDXN(object).toString()],
           title:
             (object as any)?.title ??
             // TODO(wittjosiah): `getNode` is not reactive.
-            toLocalizedString(graph.getNode(fullyQualifiedId(object)).pipe(Option.getOrNull)?.properties.label, t),
+            toLocalizedString(
+              Graph.getNode(graph, Obj.getDXN(object).toString()).pipe(Option.getOrNull)?.properties.label,
+              t,
+            ),
         } as StackSectionView;
-        return { id: fullyQualifiedId(object), object, metadata, view } satisfies StackSectionItem;
+        return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
       }) ?? [];
 
   const handleDelete = useCallback(
@@ -80,44 +78,42 @@ const StackContainer = ({ id, collection }: StackContainerProps) => {
       const index = collection.objects
         .map((object) => object.target)
         .filter(isNonNullable)
-        .findIndex((section) => fullyQualifiedId(section) === id);
+        .findIndex((section) => Obj.getDXN(section).toString() === id);
       const object = collection.objects[index].target;
-      if (isLiveObject(object)) {
-        await dispatch(createIntent(SpaceAction.RemoveObjects, { objects: [object], target: collection }));
+      if (Obj.isObject(object)) {
+        await invokePromise(SpaceOperation.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)];
       }
     },
-    [collection, dispatch],
+    [collection, invokePromise],
   );
 
   const handleAdd = useCallback(
     async (id: string, position: AddSectionPosition) => {
-      await dispatch?.(
-        // TODO(wittjosiah): Use object creation dialog.
-        createIntent(LayoutAction.UpdateDialog, {
-          part: 'dialog',
-          subject: `${meta.id}/AddSectionDialog`,
-          options: {
-            blockAlign: 'start',
-            props: {
-              path: id,
-              position,
-              collection,
-            },
-          },
-        }),
-      );
+      // TODO(wittjosiah): Use object creation dialog.
+      await invokePromise(LayoutOperation.UpdateDialog, {
+        subject: `${meta.id}/AddSectionDialog`,
+        blockAlign: 'start',
+        props: {
+          path: id,
+          position,
+          collection,
+        },
+      });
     },
-    [collection, dispatch],
+    [collection, invokePromise],
   );
 
   const handleNavigate = useCallback(
     async (id: string) => {
-      await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [id] }));
+      await invokePromise(LayoutOperation.Open, { subject: [id] });
     },
-    [dispatch],
+    [invokePromise],
   );
 
   const handleCollapse = useCallback(
@@ -126,8 +122,12 @@ const StackContainer = ({ id, collection }: StackContainerProps) => {
   );
 
   const handleAddSection = useCallback(
-    () => dispatch?.(createIntent(SpaceAction.OpenCreateObject, { target: collection, navigable: false })),
-    [collection, dispatch],
+    () =>
+      invokePromise(SpaceOperation.OpenCreateObject, {
+        target: collection,
+        navigable: false,
+      }),
+    [collection, invokePromise],
   );
 
   return (
@@ -136,7 +136,13 @@ const StackContainer = ({ id, collection }: StackContainerProps) => {
       classNames='container-max-width overflow-hidden border-l border-r border-subduedSeparator'
     >
       <Toolbar.Root>
-        <Toolbar.IconButton icon='ph--plus--regular' iconOnly label='Add section' onClick={handleAddSection} />
+        <Toolbar.IconButton
+          icon='ph--plus--regular'
+          iconOnly
+          label='Add section'
+          data-testid='stack.addSection'
+          onClick={handleAddSection}
+        />
       </Toolbar.Root>
       <AttentionProvider id={id}>
         <StackContext.Provider

package/src/components/StackSection.tsx

@@ -5,11 +5,11 @@
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import React, { useMemo, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { DropdownMenu, Icon, IconButton, useTranslation } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { StackItem } from '@dxos/react-ui-stack';
-import { getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { getSize, mx, textBlockWidth } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
 import { type StackSectionItem } from '../types';
@@ -107,7 +107,7 @@ export const StackSection = ({
           </StackItem.HeadingStickyContent>
         </StackItem.Heading>
         <CollapsiblePrimitive.Content>
-          <Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
+          <Surface.Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
         </CollapsiblePrimitive.Content>
         {view.collapsed && (
           <StackItem.Content classNames='attention-surface'>

package/src/components/StackSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 
 import { meta } from '../meta';
 import { type StackSettingsProps } from '../types';
@@ -14,17 +14,17 @@ export const StackSettings = ({ settings }: { settings: StackSettingsProps }) =>
   const { t } = useTranslation(meta.id);
 
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('settings separation label')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('settings separation label')}>
             <Input.Switch
               checked={settings.separation}
               onCheckedChange={(checked) => (settings.separation = !!checked)}
             />
-          </ControlItemInput>
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/meta.ts

@@ -2,16 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
 export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/stack',
   // 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.
   name: 'Collections',
-  description: 'View collections of objects within the deck.',
+  description: trim`
+    Organize and view curated collections of workspace objects in customizable layouts.
+    Group related items together and manage collections with sections and filtering.
+  `,
   icon: 'ph--stack-simple--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack',
 };

package/src/translations.ts

@@ -21,16 +21,16 @@ export const translations = [
         'add section input placeholder': 'Find the type of section to add',
         'upload file label': 'Add file',
         'add section label': 'Add section',
-        'empty stack message': 'Drag items into the stack.',
+        'empty stack message': 'Drag objects into the stack.',
         'remove section label': 'Delete',
-        'navigate to section label': 'Navigate to item',
+        'navigate to section label': 'Navigate to object',
         'untitled section title': 'Untitled section',
         'add section before label': 'Add before',
         'add section after label': 'Add after',
         'expand label': 'Expand',
         'collapse label': 'Collapse',
         'open chat thread label': 'Open chat thread',
-        'drag handle label': 'Press space or enter to begin dragging this item.',
+        'drag handle label': 'Press space or enter to begin dragging this object.',
       },
     },
   },

package/src/types/stack.ts

@@ -4,7 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { TypedObject } from '@dxos/echo/internal';
+import { Type } from '@dxos/echo';
 
 // All section metadata needs to be optional/have defaults.
 // Any objects added to the collection will start with the section defaults.
@@ -19,9 +19,13 @@ export const SectionSchema = Schema.Struct({
 });
 
 // TODO(wittjosiah): This needs a relation to be connected to a stack.
-export class StackViewType extends TypedObject({
-  typename: 'dxos.org/type/StackView',
-  version: '0.1.0',
-})({
-  sections: Schema.mutable(Schema.Record({ key: Schema.String, value: SectionSchema })),
-}) {}
+export const StackViewType = Schema.Struct({
+  sections: Schema.Record({ key: Schema.String, value: SectionSchema }),
+}).pipe(
+  Type.object({
+    typename: 'dxos.org/type/StackView',
+    version: '0.1.0',
+  }),
+);
+
+export interface StackViewType extends Schema.Schema.Type<typeof StackViewType> {}

package/src/types/types.ts

@@ -7,13 +7,13 @@ import { type FC } from 'react';
 import { type Obj } from '@dxos/echo';
 import { type Label } from '@dxos/react-ui';
 import { type StackItemSize } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 
 export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
 
 export type CollapsedSections = Record<string, boolean>;
 
-export type CollectionItem = DataType.Collection['objects'][number];
+export type CollectionItem = Collection.Collection['objects'][number];
 
 export type StackSectionView = {
   title?: string;
@@ -39,7 +39,7 @@ export type StackSectionMetadata = {
 
 export type StackSectionItem = {
   id: string;
-  object: Obj.Any;
+  object: Obj.Unknown;
   view: StackSectionView;
   metadata: StackSectionMetadata;
 };