@dxos/plugin-space 0.8.4-main.3a94e84 → 0.8.4-main.3eb6e50203

package/src/cli/plugin.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Tag } from '@dxos/echo';
+import { ClientEvents } from '@dxos/plugin-client/types';
+import { Collection, DataTypes } from '@dxos/schema';
+import {
+  AnchoredTo,
+  Employer,
+  Event,
+  HasConnection,
+  HasRelationship,
+  HasSubject,
+  Organization,
+  Person,
+  Pipeline,
+  Task,
+} from '@dxos/types';
+
+import { IdentityCreated } from '../capabilities/identity-created';
+import { OperationResolver } from '../capabilities/operation-resolver';
+import { meta } from '../meta';
+import { SpaceEvents } from '../types';
+import { type CreateObject, type SpacePluginOptions } from '../types';
+
+import { database, queue, space } from './commands';
+
+export const SpacePlugin = Plugin.define<SpacePluginOptions>(meta).pipe(
+  // TODO(wittjosiah): Could some of these commands make use of operations?
+  AppPlugin.addCommandModule({
+    commands: [database, queue, space],
+  }),
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Collection.Collection.typename,
+      metadata: {
+        createObject: ((props) => Effect.sync(() => Collection.make(props))) satisfies CreateObject,
+        addToCollectionOnCreate: true,
+      },
+    },
+  }),
+  AppPlugin.addSchemaModule({
+    schema: [
+      ...DataTypes,
+      AnchoredTo.AnchoredTo,
+      Employer.Employer,
+      Event.Event,
+      HasConnection.HasConnection,
+      HasRelationship.HasRelationship,
+      HasSubject.HasSubject,
+      Organization.Organization,
+      Person.Person,
+      Pipeline.Pipeline,
+      Tag.Tag,
+      Task.Task,
+    ],
+  }),
+  Plugin.addModule(
+    ({
+      shareableLinkOrigin = 'http://localhost:5173',
+      invitationPath = '/',
+      invitationProp = 'spaceInvitationCode',
+    }) => {
+      const createInvitationUrl = (invitationCode: string) => {
+        const baseUrl = new URL(invitationPath || '/', shareableLinkOrigin);
+        baseUrl.searchParams.set(invitationProp, invitationCode);
+        return baseUrl.toString();
+      };
+
+      return {
+        id: Capability.getModuleTag(OperationResolver),
+        activatesOn: ActivationEvents.SetupOperationResolver,
+        activate: () => OperationResolver({ createInvitationUrl, observability: false }),
+      };
+    },
+  ),
+  Plugin.addModule({
+    activatesOn: ClientEvents.IdentityCreated,
+    activatesAfter: [SpaceEvents.DefaultSpaceReady],
+    activate: IdentityCreated,
+  }),
+  Plugin.make,
+);

package/src/components/AwaitingObject.tsx

@@ -4,23 +4,27 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher, useLayout } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
+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 { SPACE_PLUGIN } from '../meta';
-import { SpaceAction } from '../types';
+import { meta } from '../meta';
+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(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useLayout();
 
   const client = useClient();
@@ -31,17 +35,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 +49,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(LayoutOperation.Open, { subject: [id] });
     void handleClose();
-  }, [id, handleClose, dispatch]);
+  }, [id, handleClose, invokePromise]);
 
   return (
     <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>
@@ -98,12 +98,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,156 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Filter, Obj } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, 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(AppCapabilities.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>
+            <ScrollArea.Root orientation='vertical'>
+              <ScrollArea.Viewport classNames='p-2'>
+                <Mosaic.Stack items={items} getId={(item) => item.id} Tile={ObjectTile} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </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(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-toolkit/ui';
 import { useTranslation } from '@dxos/react-ui';
-import { type DataType } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
+
+export const CollectionSection = ({ role, subject }: SurfaceComponentProps<Collection.Collection>) => {
+  const { t } = useTranslation(meta.id);
 
-export const CollectionSection = ({ collection }: { collection: DataType.Collection }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
   // 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

@@ -2,83 +2,90 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
-import { Filter, Obj, Type } from '@dxos/echo';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+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 { DataType } from '@dxos/schema';
+import { withTheme } from '@dxos/react-ui/testing';
+import { Collection } from '@dxos/schema';
 import { translations as shellTranslations } from '@dxos/shell/react';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
 import { translations } from '../../translations';
 
-const Story = (args: CreateObjectDialogProps) => {
+import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
+
+const DefaultStory = (props: CreateObjectDialogProps) => {
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>
-        <CreateObjectDialog {...args} />
+        <CreateObjectDialog {...props} />
       </Dialog.Overlay>
     </Dialog.Root>
   );
 };
 
 // TODO(wittjosiah): Story should be for CreateObjectPanel.
-const meta: Meta<typeof CreateObjectDialog> = {
+const meta = {
   title: 'plugins/plugin-space/CreateObjectDialog',
   component: CreateObjectDialog,
-  render: Story,
+  render: DefaultStory,
   decorators: [
-    withClientProvider({ createIdentity: true, createSpace: true, types: [DataType.Collection] }),
-    withTheme,
-    withLayout(),
+    withTheme(), // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({
+      plugins: [RuntimePlugin(), OperationPlugin()],
+    }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Collection.Collection],
+    }),
   ],
   parameters: {
     translations: [...translations, ...shellTranslations],
   },
   args: {},
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default: StoryObj<typeof CreateObjectDialog> = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
-export const Typename: StoryObj<typeof CreateObjectDialog> = {
-  args: { typename: Type.getTypename(DataType.Collection) },
+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} />;
   },
 };