@dxos/plugin-space 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/AwaitingObject.tsx

@@ -4,23 +4,26 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { LayoutAction, createIntent, useIntentDispatcher, useLayout } from '@dxos/app-framework';
+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, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
+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 = 180e3; // 3 minutes
-const TOAST_TIMEOUT = 240e3; // 4 minutes
+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 { invokePromise } = useOperationInvoker();
   const [open, setOpen] = useState(true);
   const [waiting, setWaiting] = useState(true);
   const [found, setFound] = useState(false);
-  const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useLayout();
 
   const client = useClient();
@@ -31,17 +34,13 @@ export const AwaitingObject = ({ id }: { id: string }) => {
       return;
     }
 
-    const timeout = setTimeout(() => {
-      setWaiting(false);
-    }, WAIT_FOR_OBJECT_TIMEOUT);
-
-    () => clearTimeout(timeout);
+    const timeout = setTimeout(() => setWaiting(false), WAIT_FOR_OBJECT_TIMEOUT);
+    return () => clearTimeout(timeout);
   }, [id]);
 
   useEffect(() => {
-    if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
+    if (objects.findIndex((object) => Obj.getDXN(object).toString() === id) > -1) {
       setFound(true);
-
       if (layout.active.includes(id)) {
         setOpen(false);
       }
@@ -49,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}>
@@ -98,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

@@ -0,0 +1,153 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Common } from '@dxos/app-framework';
+import { type SurfaceComponentProps, useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
+import { Filter, Obj } from '@dxos/echo';
+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 { getStyles } from '@dxos/ui-theme';
+
+import { meta } from '../meta';
+
+/**
+ * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
+ */
+const useMetadataResolver = () => {
+  const allMetadata = useCapabilities(Common.Capability.Metadata);
+  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
+};
+
+/**
+ * Article view for collections.
+ */
+export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.Collection | Collection.Managed>) => {
+  const { t } = useTranslation(meta.id);
+  const resolveMetadata = useMetadataResolver();
+  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata);
+
+  return (
+    <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={(item) => item.id} Tile={ObjectTile} />
+            </Mosaic.Viewport>
+          </Mosaic.Container>
+        </SearchList.Content>
+      </SearchList.Root>
+    </Layout.Main>
+  );
+};
+
+type ObjectItem = {
+  id: string;
+  object: Obj.Unknown;
+  icon: string;
+  iconHue?: string;
+};
+
+const ObjectTile: StackTileComponent<ObjectItem> = ({ data: item }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokeSync } = useOperationInvoker();
+
+  const typename = Obj.getTypename(item.object) ?? '';
+  const label =
+    Obj.getLabel(item.object) ??
+    toLocalizedString(['object name placeholder', { ns: typename, defaultValue: item.id }], t);
+  const styles = item.iconHue ? getStyles(item.iconHue) : undefined;
+
+  const handleClick = () => {
+    invokeSync(Common.LayoutOperation.Open, { subject: [item.id] });
+  };
+
+  return (
+    <Card.Root fullWidth>
+      <Card.Toolbar>
+        <Card.ToolbarIconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.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.
+ */
+const useRegularCollectionItems = (collection: Collection.Collection): Obj.Unknown[] => {
+  return useMemo(
+    () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
+    [collection.objects],
+  );
+};
+
+/**
+ * Hook to get items from a managed collection by querying the space.
+ */
+const useManagedCollectionItems = (collection: Collection.Managed): Obj.Unknown[] => {
+  const client = useClient();
+  const space = getSpace(collection);
+
+  const schema = useMemo(
+    () => client.graph.schemaRegistry.query({ typename: collection.key, location: ['runtime'] }).runSync()[0],
+    [client, collection],
+  );
+
+  return useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
+};
+
+type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
+
+/**
+ * Combined hook to get collection items with search/filter support.
+ */
+const useCollectionItems = (
+  collection: Collection.Collection | Collection.Managed,
+  resolveMetadata: MetadataResolver,
+) => {
+  const isManaged = Obj.instanceOf(Collection.Managed, collection);
+
+  // Call both hooks unconditionally to satisfy React's rules of hooks.
+  const regularObjects = useRegularCollectionItems(collection as Collection.Collection);
+  const managedObjects = useManagedCollectionItems(collection as Collection.Managed);
+
+  const objects = isManaged ? managedObjects : regularObjects;
+
+  // Convert objects to items with resolved metadata.
+  const items = useMemo(
+    () =>
+      objects.map((obj) => {
+        const typename = Obj.getTypename(obj);
+        const metadata = typename ? resolveMetadata(typename) : {};
+        return {
+          id: Obj.getDXN(obj).toString(),
+          object: obj,
+          icon: metadata.icon ?? 'ph--placeholder--regular',
+          iconHue: metadata.iconHue,
+        } satisfies ObjectItem;
+      }),
+    [objects, resolveMetadata],
+  );
+
+  // Use searchlist results for filtering.
+  const { results, handleSearch } = useSearchListResults({
+    items,
+    extract: (item) => Obj.getLabel(item.object) ?? item.id,
+  });
+
+  return { items: results, handleSearch };
+};

package/src/components/CollectionSection.tsx

@@ -4,17 +4,19 @@
 
 import React from 'react';
 
+import { type SurfaceComponentProps } from '@dxos/app-framework/react';
 import { useTranslation } from '@dxos/react-ui';
-import { type DataType } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 
 import { meta } from '../meta';
 
-export const CollectionSection = ({ collection }: { collection: DataType.Collection }) => {
+export const CollectionSection = ({ role, subject }: SurfaceComponentProps<Collection.Collection>) => {
   const { t } = useTranslation(meta.id);
+
   // TODO(wittjosiah): Better placeholder.
   return (
-    <div className='min-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
-      <span className='truncate'>{collection.name ?? t('unnamed collection label')}</span>
+    <div role={role} className='min-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
+      <span className='truncate'>{subject.name ?? t('unnamed collection label')}</span>
     </div>
   );
 };

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

@@ -5,21 +5,21 @@
 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, Type } from '@dxos/echo';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { Filter, Obj } from '@dxos/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';
-import { DataType } from '@dxos/schema';
+import { Collection } from '@dxos/schema';
 import { translations as shellTranslations } from '@dxos/shell/react';
 
 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: [DataType.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> = {
-  args: { typename: Type.getTypename(DataType.Collection) },
+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(DataType.Collection));
+    const db = useDatabase();
+    const [collection] = useQuery(db, Filter.type(Collection.Collection));
 
     useEffect(() => {
-      if (space) {
-        space.db.add(Obj.make(DataType.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,32 +3,24 @@
 //
 
 import * as Effect from 'effect/Effect';
-import * as Function from 'effect/Function';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  chain,
-  createIntent,
-  useCapabilities,
-  useIntentDispatcher,
-  usePluginManager,
-} from '@dxos/app-framework';
-import { Obj, Query, Type } from '@dxos/echo';
+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, useQuery, useSpaces } from '@dxos/react-client/echo';
-import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
-import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
-import { DataType, getTypenameFromQuery } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { type Collection } from '@dxos/schema';
 
-import { SpaceCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
-import { SpaceAction } from '../../types';
+import { SpaceOperation } from '../../types';
 
-import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
+import { CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from './CreateObjectPanel';
 
 export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
 
@@ -36,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 = ({
@@ -48,29 +40,38 @@ export const CreateObjectDialog = ({
   onCreateObject,
   shouldNavigate: _shouldNavigate,
 }: CreateObjectDialogProps) => {
-  const closeRef = useRef<HTMLButtonElement | null>(null);
   const manager = usePluginManager();
   const { t } = useTranslation(meta.id);
+  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();
-  const { dispatch } = useIntentDispatcher();
-  const forms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const [target, setTarget] = useState<Space | DataType.Collection | undefined>(initialTarget);
-  const [typename, setTypename] = useState<string | undefined>(initialTypename);
-  const space = isSpace(target) ? target : getSpace(target);
-  const queryCollections = useQuery(space, Query.type(DataType.QueryCollection));
-  const hiddenTypenames = queryCollections
-    .map((collection) => getTypenameFromQuery(collection.query))
-    .filter(isNonNullable);
+  const closeRef = useRef<HTMLButtonElement | null>(null);
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (typename) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+    (typename) => {
+      const metadata = manager.capabilities
+        .getAll(Common.Capability.Metadata)
+        .find(({ id }) => id === typename)?.metadata;
+      return metadata?.createObject ? (metadata as Metadata) : undefined;
+    },
     [manager],
   );
 
+  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+  // TODO(wittjosiah): Support database schemas.
+  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))) ?? [],
+    [schemas],
+  );
+
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    ({ form, data = {} }) =>
+    ({ metadata, data = {} }) =>
       Effect.gen(function* () {
         if (!target) {
           // TODO(wittjosiah): UI feedback.
@@ -80,45 +81,53 @@ 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(form.getIntent(data, { space }));
-        if (isLiveObject(object) && !Obj.instanceOf(DataType.StoredSchema, 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 = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
-          const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
+          const hidden = !metadata.addToCollectionOnCreate;
+          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, hiddenTypenames, _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', { ns: typename, defaultValue: views ? 'View' : 'Item' }),
+            object: t('typename label', {
+              ns: typename,
+              defaultValue: views ? 'View' : 'Object',
+            }),
           })}
         </Dialog.Title>
         <Dialog.Close asChild>
-          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={4} />
-          </Button>
+          <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
-      </div>
-
+      </Dialog.Header>
       <CreateObjectPanel
-        forms={forms}
+        schemas={userSchemas}
         spaces={spaces}
         target={target}
         views={views}