@dxos/plugin-space 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

package/src/components/AwaitingObject.tsx

@@ -4,22 +4,23 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { useLayout, useOperationInvoker } from '@dxos/app-framework/react';
 import { Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
 import { Filter, useQuery } from '@dxos/react-client/echo';
 import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
-import { SpaceAction } from '../types';
+import { SpaceOperation } from '../types';
 
 const WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1_000;
 const TOAST_TIMEOUT = 4 * 60 * 1_000;
 
 export const AwaitingObject = ({ id }: { id: string }) => {
   const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const [open, setOpen] = useState(true);
   const [waiting, setWaiting] = useState(true);
   const [found, setFound] = useState(false);
@@ -47,14 +48,14 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   }, [id, objects, layout]);
 
   const handleClose = useCallback(
-    async () => dispatch(createIntent(SpaceAction.WaitForObject, { id: undefined })),
-    [dispatch],
+    async () => invokePromise(SpaceOperation.WaitForObject, { id: undefined }),
+    [invokePromise],
   );
 
   const handleNavigate = useCallback(() => {
-    void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [id] }));
+    void invokePromise(Common.LayoutOperation.Open, { subject: [id] });
     void handleClose();
-  }, [id, handleClose, dispatch]);
+  }, [id, handleClose, invokePromise]);
 
   return (
     <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>
@@ -96,12 +97,14 @@ export const AwaitingObject = ({ id }: { id: string }) => {
               </Button>
             </Toast.Action>
             <Toast.Close asChild>
-              <Button onClick={handleClose}>{t('close label', { ns: 'appkit' })}</Button>
+              <Button onClick={handleClose}>{t('close label', { ns: osTranslations })}</Button>
             </Toast.Close>
           </>
         ) : (
           <Toast.Close asChild>
-            <Button onClick={handleClose}>{t(waiting ? 'close label' : 'confirm label', { ns: 'appkit' })}</Button>
+            <Button onClick={handleClose}>
+              {t(waiting ? 'close label' : 'confirm label', { ns: osTranslations })}
+            </Button>
           </Toast.Close>
         )}
       </Toast.Actions>

package/src/components/CollectionArticle.tsx

@@ -1,33 +1,158 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { useTranslation } from '@dxos/react-ui';
-import { baseSurface, descriptionMessage, mx } from '@dxos/react-ui-theme';
-import { type Collection } from '@dxos/schema';
+import { Common } from '@dxos/app-framework';
+import { type SurfaceComponentProps, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { Filter, Obj } from '@dxos/echo';
+import { Graph, Node, useActionRunner, useConnections } from '@dxos/plugin-graph';
+import { useClient } from '@dxos/react-client';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Layout, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { Collection } from '@dxos/schema';
 
 import { meta } from '../meta';
 
-export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.Collection>) => {
+/**
+ *
+ */
+export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.Collection | Collection.Managed>) => {
   const { t } = useTranslation(meta.id);
+  const { items, handleSearch } = useCollectionItems(subject);
 
   return (
-    <div
-      role='none'
-      className={mx(baseSurface, 'min-bs-screen is-full flex items-center justify-center p-8')}
-      data-testid='composer.firstRunMessage'
-    >
-      <p
-        role='alert'
-        className={mx(descriptionMessage, 'rounded-md p-8 font-normal text-lg max-is-[24rem] break-words')}
-      >
-        {subject.name ?? t('unnamed collection label')}
-      </p>
-    </div>
+    <Layout.Main toolbar>
+      <SearchList.Root onSearch={handleSearch}>
+        <Toolbar.Root>
+          <SearchList.Input placeholder={t('search placeholder')} />
+        </Toolbar.Root>
+        <SearchList.Content>
+          <Mosaic.Container asChild>
+            <Mosaic.Viewport padding>
+              <Mosaic.Stack items={items} getId={(node) => node.id} Tile={NodeTile} />
+            </Mosaic.Viewport>
+          </Mosaic.Container>
+        </SearchList.Content>
+      </SearchList.Root>
+    </Layout.Main>
+  );
+};
+
+const NodeTile: StackTileComponent<Node.Node> = ({ data: node }) => {
+  const { t } = useTranslation(meta.id);
+  const { graph } = useAppGraph();
+  const { invokeSync } = useOperationInvoker();
+  const runAction = useActionRunner();
+
+  const label = toLocalizedString(node.properties.label, t);
+  const icon = node.properties.icon ?? 'ph--placeholder--regular';
+
+  const handleClick = () => {
+    if (Node.isAction(node)) {
+      // Run action if this is an action node.
+      const [parent] = Graph.getConnections(graph, node.id, 'inbound');
+      if (parent) {
+        void runAction(node, { parent });
+      }
+    } else {
+      // Navigate to the node.
+      invokeSync(Common.LayoutOperation.Open, { subject: [node.id] });
+    }
+  };
+
+  return (
+    <Card.Root fullWidth>
+      <Card.Toolbar>
+        <Card.ToolbarIconButton variant='ghost' label={label} icon={icon} />
+        <Card.Title onClick={handleClick}>{label}</Card.Title>
+        <Card.Menu />
+      </Card.Toolbar>
+    </Card.Root>
   );
 };
 
 export default CollectionArticle;
+
+/**
+ * Hook to get items from a regular collection using graph connections.
+ */
+const useRegularCollectionItems = (collection: Collection.Collection) => {
+  const { graph } = useAppGraph();
+  const collectionId = Obj.getDXN(collection).toString();
+  const children = useConnections(graph, collectionId, 'outbound');
+
+  // Filter children to those which are objects or actions with disposition 'item'.
+  return useMemo(
+    () =>
+      children.filter((node) => {
+        // Include regular objects.
+        if (Obj.isObject(node.data)) {
+          return true;
+        }
+        // Include actions with disposition 'item'.
+        return Node.isAction(node) && node.properties.disposition === 'item';
+      }),
+    [children],
+  );
+};
+
+/**
+ * Hook to get items from a managed collection by querying the space.
+ */
+const useManagedCollectionItems = (collection: Collection.Managed) => {
+  const client = useClient();
+  const space = getSpace(collection);
+
+  const schema = useMemo(
+    () => client.graph.schemaRegistry.query({ typename: collection.key, location: ['runtime'] }).runSync()[0],
+    [client, collection],
+  );
+
+  const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
+
+  // Convert objects to node-like items for consistent rendering.
+  return useMemo(
+    () =>
+      objects.map(
+        (obj) =>
+          ({
+            id: Obj.getDXN(obj).toString(),
+            type: 'managed-object',
+            data: obj,
+            properties: {
+              label: Obj.getLabel(obj) ?? obj.id,
+              icon: 'ph--placeholder--regular',
+            },
+          }) as Node.Node,
+      ),
+    [objects],
+  );
+};
+
+/**
+ * Combined hook to get collection items with search/filter support.
+ */
+const useCollectionItems = (collection: Collection.Collection | Collection.Managed) => {
+  const isManaged = Obj.instanceOf(Collection.Managed, collection);
+
+  // Call both hooks unconditionally to satisfy React's rules of hooks.
+  const regularItems = useRegularCollectionItems(collection as Collection.Collection);
+  const managedItems = useManagedCollectionItems(collection as Collection.Managed);
+
+  const items = isManaged ? managedItems : regularItems;
+
+  // Use searchlist results for filtering.
+  const { results, handleSearch } = useSearchListResults({
+    items,
+    extract: (node) => {
+      const label = node.properties.label;
+      return typeof label === 'string' ? label : (label?.en ?? node.id);
+    },
+  });
+
+  return { items: results, handleSearch };
+};

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -5,10 +5,10 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Filter, Obj } from '@dxos/echo';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { useDatabase, useQuery } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
@@ -19,7 +19,7 @@ import { translations } from '../../translations';
 
 import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
 
-const Story = (props: CreateObjectDialogProps) => {
+const DefaultStory = (props: CreateObjectDialogProps) => {
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>
@@ -33,53 +33,59 @@ const Story = (props: CreateObjectDialogProps) => {
 const meta = {
   title: 'plugins/plugin-space/CreateObjectDialog',
   component: CreateObjectDialog,
-  render: Story,
+  render: DefaultStory,
   decorators: [
     withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withClientProvider({ createIdentity: true, createSpace: true, types: [Collection.Collection] }),
+    withPluginManager({
+      plugins: [RuntimePlugin(), OperationPlugin()],
+    }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Collection.Collection],
+    }),
   ],
   parameters: {
     translations: [...translations, ...shellTranslations],
   },
   args: {},
-} satisfies Meta<typeof CreateObjectDialog>;
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default: StoryObj<typeof CreateObjectDialog> = {};
+type Story = StoryObj<typeof meta>;
 
-export const Typename: StoryObj<typeof CreateObjectDialog> = {
+export const Default: Story = {};
+
+export const Typename: Story = {
   args: { typename: Collection.Collection.typename },
 };
 
-export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
+export const TargetSpace: Story = {
   render: (args) => {
-    const space = useSpace();
+    const db = useDatabase();
 
-    if (!space) {
+    if (!db) {
       return <></>;
     }
 
-    return <Story {...args} target={space} />;
+    return <DefaultStory {...args} target={db} />;
   },
 };
 
-export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
+export const TargetCollection: Story = {
   render: (args) => {
-    const space = useSpace();
-    const [collection] = useQuery(space, Filter.type(Collection.Collection));
+    const db = useDatabase();
+    const [collection] = useQuery(db, Filter.type(Collection.Collection));
 
     useEffect(() => {
-      if (space) {
-        space.db.add(Obj.make(Collection.Collection, { name: 'My Collection', objects: [] }));
-      }
-    }, [space]);
+      db?.add(Obj.make(Collection.Collection, { name: 'My Collection', objects: [] }));
+    }, [db]);
 
     if (!collection) {
       return <></>;
     }
 
-    return <Story {...args} target={collection} />;
+    return <DefaultStory {...args} target={collection} />;
   },
 };

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -3,23 +3,22 @@
 //
 
 import * as Effect from 'effect/Effect';
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Capabilities, LayoutAction, chain, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher, usePluginManager } from '@dxos/app-framework/react';
-import { Obj, Type } from '@dxos/echo';
-import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { Capability, Common } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/react';
+import { Database, Obj, Type } from '@dxos/echo';
+import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
+import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
 import { useClient } from '@dxos/react-client';
-import { type Space, getSpace, isLiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
-import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
-import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Dialog, useTranslation } from '@dxos/react-ui';
 import { type Collection } from '@dxos/schema';
 
 import { meta } from '../../meta';
-import { SpaceAction } from '../../types';
+import { SpaceOperation } from '../../types';
 
 import { CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from './CreateObjectPanel';
 
@@ -29,8 +28,8 @@ export type CreateObjectDialogProps = Pick<
   CreateObjectPanelProps,
   'target' | 'views' | 'typename' | 'initialFormValues'
 > & {
-  onCreateObject?: (object: Obj.Any) => void;
-  shouldNavigate?: (object: Obj.Any) => boolean;
+  onCreateObject?: (object: Obj.Unknown) => void;
+  shouldNavigate?: (object: Obj.Unknown) => boolean;
 };
 
 export const CreateObjectDialog = ({
@@ -43,8 +42,8 @@ export const CreateObjectDialog = ({
 }: CreateObjectDialogProps) => {
   const manager = usePluginManager();
   const { t } = useTranslation(meta.id);
-  const { dispatch } = useIntentDispatcher();
-  const [target, setTarget] = useState<Space | Collection.Collection | undefined>(initialTarget);
+  const operationInvoker = useOperationInvoker();
+  const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const client = useClient();
   const spaces = useSpaces();
@@ -52,23 +51,22 @@ export const CreateObjectDialog = ({
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
     (typename) => {
-      const metadata = manager.context
-        .getCapabilities(Capabilities.Metadata)
+      const metadata = manager.capabilities
+        .getAll(Common.Capability.Metadata)
         .find(({ id }) => id === typename)?.metadata;
-      return metadata?.createObjectIntent ? (metadata as Metadata) : undefined;
+      return metadata?.createObject ? (metadata as Metadata) : undefined;
     },
     [manager],
   );
 
-  const space = isSpace(target) ? target : getSpace(target);
+  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
   // TODO(wittjosiah): Support database schemas.
-  const schemas = space?.db.schemaRegistry.query({ location: ['runtime'] }).runSync();
+  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
   const userSchemas = useMemo(
     () =>
       schemas
         ?.filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
-        .filter((schema) => !!resolve(Type.getTypename(schema)))
-        .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false))) ?? [],
+        .filter((schema) => !!resolve(Type.getTypename(schema))) ?? [],
     [schemas],
   );
 
@@ -83,35 +81,39 @@ export const CreateObjectDialog = ({
         // NOTE: Must close before navigating or attention won't follow object.
         closeRef.current?.click();
 
-        const space = isSpace(target) ? target : getSpace(target);
-        invariant(space, 'Missing space');
-        const { object } = yield* dispatch(metadata.createObjectIntent(data, { space }));
-        if (isLiveObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
+        const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+        invariant(db, 'Missing database');
+        const object = yield* metadata.createObject(data, { db });
+        if (Obj.isObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
           // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
           const hidden = !metadata.addToCollectionOnCreate;
-          const addObjectIntent = createIntent(SpaceAction.AddObject, {
+          yield* operationInvoker.invoke(SpaceOperation.AddObject, {
             target,
             object,
             hidden,
           });
           const shouldNavigate = _shouldNavigate ?? (() => true);
           if (shouldNavigate(object)) {
-            yield* dispatch(Function.pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
-          } else {
-            yield* dispatch(addObjectIntent);
+            yield* Effect.promise(() =>
+              operationInvoker.invokePromise(Common.LayoutOperation.Open, {
+                subject: [Obj.getDXN(object).toString()],
+              }),
+            );
           }
 
           onCreateObject?.(object);
         }
-      }).pipe(Effect.runPromise),
-    [dispatch, target, resolve, _shouldNavigate],
+      }).pipe(
+        Effect.provideService(Capability.Service, manager.capabilities),
+        Effect.provideService(Operation.Service, operationInvoker),
+        runAndForwardErrors,
+      ),
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker],
   );
 
   return (
-    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
-    //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames={cardDialogContent}>
-      <div role='none' className={cardDialogHeader}>
+    <Dialog.Content>
+      <Dialog.Header>
         <Dialog.Title>
           {t('create object dialog title', {
             object: t('typename label', {
@@ -121,19 +123,9 @@ export const CreateObjectDialog = ({
           })}
         </Dialog.Title>
         <Dialog.Close asChild>
-          <IconButton
-            ref={closeRef}
-            icon='ph--x--regular'
-            size={4}
-            label='Close'
-            iconOnly
-            density='fine'
-            variant='ghost'
-            autoFocus
-          />
+          <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
-      </div>
-
+      </Dialog.Header>
       <CreateObjectPanel
         schemas={userSchemas}
         spaces={spaces}