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

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -4,24 +4,24 @@
 
 import * as Option from 'effect/Option';
 import type * as Schema from 'effect/Schema';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
+import { type Database, Obj } from '@dxos/echo';
 import { type AnyProperties, type TypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
 import { type Space, type SpaceId } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
+import { toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
+import { Form, omitId } from '@dxos/react-ui-form';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
 import { type Collection, ViewAnnotation } from '@dxos/schema';
 import { type MaybePromise, isNonNullable } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { meta } from '../../meta';
-import { type CreateObjectIntent } from '../../types';
+import { type CreateObject } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
 export type Metadata = {
-  createObjectIntent: CreateObjectIntent;
+  createObject: CreateObject;
   inputSchema?: Schema.Schema.AnyNoContext;
   addToCollectionOnCreate?: boolean;
   icon?: string;
@@ -31,12 +31,12 @@ export type CreateObjectPanelProps = {
   schemas: Schema.Schema.AnyNoContext[];
   spaces: Space[];
   typename?: string;
-  target?: Space | Collection.Collection;
+  target?: Database.Database | Collection.Collection;
   views?: boolean;
   initialFormValues?: Partial<AnyProperties>;
   defaultSpaceId?: SpaceId;
   resolve?: (typename: string) => Metadata | undefined;
-  onTargetChange?: (target: Space) => void;
+  onTargetChange?: (target: Database.Database) => void;
   onTypenameChange?: (typename: string) => void;
   onCreateObject?: (params: { metadata: Metadata; data?: Record<string, any> }) => MaybePromise<void>;
 };
@@ -68,8 +68,14 @@ export const CreateObjectPanel = ({
     .map((schema) => getTypeAnnotation(schema))
     .filter(isNonNullable)
     .sort((a, b) => {
-      const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
-      const nameB = t('typename label', { ns: b.typename, defaultValue: b.typename });
+      const nameA = t('typename label', {
+        ns: a.typename,
+        defaultValue: a.typename,
+      });
+      const nameB = t('typename label', {
+        ns: b.typename,
+        defaultValue: b.typename,
+      });
       return nameA.localeCompare(nameB);
     });
 
@@ -103,17 +109,22 @@ export const CreateObjectPanel = ({
   ) : !target ? (
     <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
   ) : metadata.inputSchema ? (
-    <div role='none' className={cardDialogOverflow}>
-      <Form
-        autoFocus
-        values={initialFormValues}
-        schema={metadata.inputSchema}
-        testId='create-object-form'
-        onSave={handleCreateObject}
-        lookupComponent={inputSurfaceLookup}
-        outerSpacing='blockStart-0'
-      />
-    </div>
+    <Form.Root
+      testId='create-object-form'
+      autoFocus
+      schema={omitId(metadata.inputSchema)}
+      values={initialFormValues}
+      db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
+      fieldProvider={inputSurfaceLookup}
+      onSave={handleCreateObject}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+          <Form.Submit />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   ) : null;
 };
 
@@ -121,36 +132,67 @@ const SelectSpace = ({
   spaces,
   defaultSpaceId,
   onChange,
-}: { onChange?: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+}: { onChange?: (db: Database.Database) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
   const { t } = useTranslation(meta.id);
 
+  const sortedSpaces = useMemo(
+    () =>
+      [...spaces].sort((a, b) => {
+        const labelA = toLocalizedString(
+          getSpaceDisplayName(a, {
+            personal: a.id === defaultSpaceId,
+          }),
+          t,
+        );
+        const labelB = toLocalizedString(
+          getSpaceDisplayName(b, {
+            personal: b.id === defaultSpaceId,
+          }),
+          t,
+        );
+        return labelA.localeCompare(labelB);
+      }),
+    [spaces, defaultSpaceId, t],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedSpaces,
+    extract: (space) =>
+      toLocalizedString(
+        getSpaceDisplayName(space, {
+          personal: space.id === defaultSpaceId,
+        }),
+        t,
+      ),
+  });
+
   return (
-    <SearchList.Root label={t('space input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.space-input'
-        placeholder={t('space input placeholder')}
-      />
-      <SearchList.Content classNames={[cardDialogOverflow, 'plb-cardSpacingBlock']}>
-        {spaces
-          .sort((a, b) => {
-            const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
-            const bName = toLocalizedString(getSpaceDisplayName(b, { personal: b.id === defaultSpaceId }), t);
-            return aName.localeCompare(bName);
-          })
-          .map((space) => (
-            <SearchList.Item
-              key={space.id}
-              value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              onSelect={() => onChange?.(space)}
-              classNames='flex items-center gap-2'
-            >
-              <span className='grow truncate'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              </span>
-            </SearchList.Item>
-          ))}
-      </SearchList.Content>
+    <SearchList.Root onSearch={handleSearch}>
+      <div aria-label={t('space input label')} role='combobox' aria-expanded='true'>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.space-input'
+          placeholder={t('space input placeholder')}
+        />
+        <SearchList.Content>
+          <SearchList.Viewport>
+            {results.map((space) => (
+              <SearchList.Item
+                key={space.id}
+                value={space.id}
+                label={toLocalizedString(
+                  getSpaceDisplayName(space, {
+                    personal: space.id === defaultSpaceId,
+                  }),
+                  t,
+                )}
+                onSelect={() => onChange?.(space.db)}
+                classNames='flex items-center gap-2'
+              />
+            ))}
+          </SearchList.Viewport>
+        </SearchList.Content>
+      </div>
     </SearchList.Root>
   );
 };
@@ -165,28 +207,41 @@ const SelectSchema = ({
 } & Pick<CreateObjectPanelProps, 'resolve'>) => {
   const { t } = useTranslation(meta.id);
 
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) =>
+      t('typename label', {
+        ns: option.typename,
+        defaultValue: option.typename,
+      }),
+  });
+
   return (
-    <SearchList.Root label={t('schema input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.schema-input'
-        placeholder={t('schema input placeholder')}
-      />
-      <SearchList.Content classNames={cardDialogPaddedOverflow}>
-        {options.map((option) => (
-          <SearchList.Item
-            key={option.typename}
-            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            onSelect={() => onChange(option.typename)}
-            classNames='flex items-center gap-2'
-          >
-            <span className='flex gap-2 items-center grow truncate'>
-              <Icon icon={resolve?.(option.typename)?.icon ?? 'ph--placeholder--regular'} size={5} />
-              {t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            </span>
-          </SearchList.Item>
-        ))}
-      </SearchList.Content>
+    <SearchList.Root onSearch={handleSearch}>
+      <div aria-label={t('schema input label')} role='combobox' aria-expanded='true'>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.schema-input'
+          placeholder={t('schema input placeholder')}
+        />
+        <SearchList.Content>
+          <SearchList.Viewport>
+            {results.map((option) => (
+              <SearchList.Item
+                key={option.typename}
+                value={option.typename}
+                label={t('typename label', {
+                  ns: option.typename,
+                  defaultValue: option.typename,
+                })}
+                icon={resolve?.(option.typename)?.icon ?? 'ph--placeholder--regular'}
+                onSelect={() => onChange(option.typename)}
+                classNames='flex items-center gap-2'
+              />
+            ))}
+          </SearchList.Viewport>
+        </SearchList.Content>
+      </div>
     </SearchList.Root>
   );
 };

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -6,15 +6,15 @@ import * as Effect from 'effect/Effect';
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
+import { runAndForwardErrors } from '@dxos/effect';
+import { Dialog, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
-import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { meta } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
+import { SpaceForm, SpaceOperation } from '../../types';
 
 export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
 
@@ -24,62 +24,49 @@ const initialValues: FormValues = { edgeReplication: true };
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(meta.id);
-  const { dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
 
   const inputSurfaceLookup = useInputSurfaceLookup();
 
   const handleCreateSpace = useCallback(
     async (data: FormValues) => {
       const program = Effect.gen(function* () {
-        const { space } = yield* dispatch(createIntent(SpaceAction.Create, data));
-        yield* dispatch(
-          createIntent(LayoutAction.SwitchWorkspace, {
-            part: 'workspace',
-            subject: space.id,
-          }),
-        );
-        yield* dispatch(
-          createIntent(LayoutAction.UpdateDialog, {
-            part: 'dialog',
-            options: { state: false },
-          }),
-        );
+        const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
+        if (result?.space) {
+          yield* Effect.promise(() =>
+            invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: result.space.id }),
+          );
+          yield* Effect.promise(() => invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }));
+        }
       });
-      await Effect.runPromise(program);
+      await runAndForwardErrors(program);
     },
-    [dispatch],
+    [invokePromise],
   );
 
   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 space dialog title')}</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>
-      <div role='none' className='contents'>
-        <Form
-          testId='create-space-form'
-          autoFocus
-          values={initialValues}
-          schema={SpaceForm}
-          lookupComponent={inputSurfaceLookup}
-          onSave={handleCreateSpace}
-          outerSpacing='scroll-fields'
-        />
-      </div>
+      </Dialog.Header>
+      <Form.Root
+        testId='create-space-form'
+        autoFocus
+        schema={SpaceForm}
+        values={initialValues}
+        fieldProvider={inputSurfaceLookup}
+        onSave={handleCreateSpace}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
     </Dialog.Content>
   );
 };

package/src/components/JoinDialog/JoinDialog.tsx

@@ -4,15 +4,17 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useAppGraph, useIntentDispatcher } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
 import { Trigger } from '@dxos/async';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { Graph } from '@dxos/plugin-graph';
+import { ObservabilityOperation } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
@@ -23,7 +25,7 @@ export type JoinDialogProps = JoinPanelProps & {
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const { graph } = useAppGraph();
   const { t } = useTranslation(meta.id);
@@ -36,25 +38,13 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       }
 
       await Promise.all([
-        dispatch(
-          createIntent(LayoutAction.AddToast, {
-            part: 'toast',
-            subject: {
-              id: `${meta.id}/join-success`,
-              duration: 5_000,
-              title: ['join success label', { ns: meta.id }],
-              closeLabel: ['dismiss label', { ns: meta.id }],
-            },
-          }),
-        ),
-        dispatch(
-          createIntent(LayoutAction.UpdateDialog, {
-            part: 'dialog',
-            options: {
-              state: false,
-            },
-          }),
-        ),
+        invokePromise(Common.LayoutOperation.AddToast, {
+          id: `${meta.id}/join-success`,
+          duration: 5_000,
+          title: ['join success label', { ns: meta.id }],
+          closeLabel: ['dismiss label', { ns: meta.id }],
+        }),
+        invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }),
       ]);
 
       let space = client.spaces.get(spaceKey);
@@ -70,12 +60,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         space = await trigger.wait();
       }
 
-      await dispatch(
-        createIntent(LayoutAction.SwitchWorkspace, {
-          part: 'workspace',
-          subject: space.id,
-        }),
-      );
+      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: space.id });
 
       // TODO(wittjosiah): If navigableCollections is false and there's no target,
       //   should try to navigate to the first object of the space replicates.
@@ -84,42 +69,30 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       if (target) {
         // Wait before navigating to the target node.
         // If the target has not yet replicated, this will trigger a loading toast.
-        await graph.waitForPath({ target }).catch(() => {});
+        await Graph.waitForPath(graph, { target }).catch(() => {});
         await Promise.all([
-          dispatch(
-            createIntent(LayoutAction.Open, {
-              part: 'main',
-              subject: [target],
-            }),
-          ),
-          dispatch(
-            createIntent(LayoutAction.Expose, {
-              part: 'navigation',
-              subject: target,
-            }),
-          ),
+          invokePromise(Common.LayoutOperation.Open, { subject: [target] }),
+          invokePromise(Common.LayoutOperation.Expose, { subject: target }),
         ]);
       }
 
       await onDone?.(result);
 
       if (space) {
-        await dispatch(
-          createIntent(ObservabilityAction.SendEvent, {
-            name: 'space.join',
-            properties: {
-              spaceId: space.id,
-            },
-          }),
-        );
+        await invokePromise(ObservabilityOperation.SendEvent, {
+          name: 'space.join',
+          properties: {
+            spaceId: space.id,
+          },
+        });
       }
     },
-    [dispatch, client, graph],
+    [invokePromise, client, graph, navigableCollections, onDone],
   );
 
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: 'os' })}</Dialog.Title>
+      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
       <JoinPanel
         {...props}
         exitActionParent={<Dialog.Close asChild />}

package/src/components/MembersContainer/MembersContainer.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
@@ -37,7 +37,7 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
+    withPluginManager({ plugins: [OperationPlugin()] }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,