@dxos/plugin-space 0.8.4-main.9735255 → 0.8.4-main.9be5663bfe

package/src/cli/plugin.ts

@@ -4,10 +4,13 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 import { Tag } from '@dxos/echo';
+import { Collection } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
 import { ClientEvents } from '@dxos/plugin-client/types';
-import { Collection, DataTypes } from '@dxos/schema';
+import { DataTypes } from '@dxos/schema';
 import {
   AnchoredTo,
   Employer,
@@ -17,24 +20,42 @@ import {
   HasSubject,
   Organization,
   Person,
-  Project,
+  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 { IdentityCreated, OperationHandler, UndoMappings } from '#capabilities';
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+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?
-  Common.Plugin.addCommandModule({
+  AppPlugin.addCommandModule({
     commands: [database, queue, space],
   }),
-  Common.Plugin.addSchemaModule({
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Collection.Collection.typename,
+      metadata: {
+        createObject: ((props, options) =>
+          Effect.gen(function* () {
+            const object = Collection.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          })) satisfies CreateObject,
+      },
+    },
+  }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSchemaModule({
     schema: [
       ...DataTypes,
       AnchoredTo.AnchoredTo,
@@ -45,36 +66,33 @@ export const SpacePlugin = Plugin.define<SpacePluginOptions>(meta).pipe(
       HasSubject.HasSubject,
       Organization.Organization,
       Person.Person,
-      Project.Project,
+      Pipeline.Pipeline,
       Tag.Tag,
       Task.Task,
     ],
   }),
-  Common.Plugin.addMetadataModule({
-    metadata: {
-      id: Collection.Collection.typename,
-      metadata: {
-        createObject: ((props) => Effect.sync(() => Collection.make(props))) satisfies CreateObject,
-        addToCollectionOnCreate: true,
-      },
-    },
-  }),
-  Plugin.addModule(({ invitationUrl = 'http://localhost:5173', invitationProp = 'spaceInvitationCode' }) => {
-    const createInvitationUrl = (invitationCode: string) => {
-      const baseUrl = new URL(invitationUrl);
-      baseUrl.searchParams.set(invitationProp, invitationCode);
-      return baseUrl.toString();
-    };
+  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: Common.ActivationEvent.SetupOperationResolver,
-      activate: () => OperationResolver({ createInvitationUrl, observability: false }),
-    };
-  }),
+      return {
+        id: Capability.getModuleTag(UndoMappings),
+        activatesOn: ActivationEvents.SetupOperationHandler,
+        activate: () => UndoMappings({ createInvitationUrl, observability: false }),
+      };
+    },
+  ),
   Plugin.addModule({
     activatesOn: ClientEvents.IdentityCreated,
-    activatesAfter: [SpaceEvents.DefaultSpaceReady],
+    activatesAfter: [SpaceEvents.PersonalSpaceReady],
     activate: IdentityCreated,
   }),
   Plugin.make,

package/src/components/{AwaitingObject.tsx → AwaitingObject/AwaitingObject.tsx}

@@ -4,16 +4,17 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useLayout, useOperationInvoker } from '@dxos/app-framework/react';
+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, 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 { SpaceOperation } from '../types';
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
 
 const WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1_000;
 const TOAST_TIMEOUT = 4 * 60 * 1_000;
@@ -53,7 +54,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   );
 
   const handleNavigate = useCallback(() => {
-    void invokePromise(Common.LayoutOperation.Open, { subject: [id] });
+    void invokePromise(LayoutOperation.Open, { subject: [id] });
     void handleClose();
   }, [id, handleClose, invokePromise]);
 
@@ -63,47 +64,47 @@ export const AwaitingObject = ({ id }: { id: string }) => {
         <Toast.Title classNames='flex items-center gap-2'>
           {found ? (
             <>
-              <Icon icon='ph--check-circle--regular' size={5} />
-              <span>{t('found object label')}</span>
+              <Icon icon='ph--check-circle--regular' />
+              <span>{t('found-object.label')}</span>
             </>
           ) : waiting ? (
             <>
-              <Icon icon='ph--circle-notch--regular' size={5} classNames='animate-spin' />
-              <span>{t('waiting for object label')}</span>
+              <Icon icon='ph--circle-notch--regular' classNames='animate-spin' />
+              <span>{t('waiting-for-object.label')}</span>
             </>
           ) : (
             <>
-              <Icon icon='ph--circle-dashed--regular' size={5} />
-              <span>{t('object not found label')}</span>
+              <Icon icon='ph--circle-dashed--regular' />
+              <span>{t('object-not-found.label')}</span>
             </>
           )}
         </Toast.Title>
         <Toast.Description>
           {t(
             found
-              ? 'found object description'
+              ? 'found-object.description'
               : waiting
-                ? 'waiting for object description'
-                : 'object not found description',
+                ? 'waiting-for-object.description'
+                : 'object-not-found.description',
           )}
         </Toast.Description>
       </Toast.Body>
       <Toast.Actions>
         {found ? (
           <>
-            <Toast.Action altText={t('go to object alt')} asChild>
+            <Toast.Action altText={t('go-to-object.alt')} asChild>
               <Button variant='primary' onClick={handleNavigate}>
-                {t('go to object label')}
+                {t('go-to-object.label')}
               </Button>
             </Toast.Action>
             <Toast.Close asChild>
-              <Button onClick={handleClose}>{t('close label', { ns: osTranslations })}</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: osTranslations })}
+              {t(waiting ? 'close.label' : 'confirm.label', { ns: osTranslations })}
             </Button>
           </Toast.Close>
         )}

package/src/components/AwaitingObject/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './AwaitingObject';

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,37 +2,42 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Option from 'effect/Option';
 import type * as Schema from 'effect/Schema';
 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 Collection } from '@dxos/echo';
+import { type AnyProperties } from '@dxos/echo/internal';
 import { type Space, type SpaceId } from '@dxos/react-client/echo';
 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 { SearchList, useSearchListResults } from '@dxos/react-ui-search';
+import { type MaybePromise } from '@dxos/util';
+
+import { useInputSurfaceLookup } from '#hooks';
+import { meta } from '#meta';
+import { type CreateObject } from '#types';
 
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { type CreateObject } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
+/** Display-ready option for the create object search list. */
+export type CreateObjectOption = {
+  id: string;
+  label: string;
+  icon?: string;
+};
+
 export type Metadata = {
   createObject: CreateObject;
   inputSchema?: Schema.Schema.AnyNoContext;
-  addToCollectionOnCreate?: boolean;
   icon?: string;
 };
 
 export type CreateObjectPanelProps = {
-  schemas: Schema.Schema.AnyNoContext[];
+  options: CreateObjectOption[];
   spaces: Space[];
   typename?: string;
   target?: Database.Database | Collection.Collection;
-  views?: boolean;
   initialFormValues?: Partial<AnyProperties>;
   defaultSpaceId?: SpaceId;
   resolve?: (typename: string) => Metadata | undefined;
@@ -42,42 +47,21 @@ export type CreateObjectPanelProps = {
 };
 
 export const CreateObjectPanel = ({
-  schemas,
+  options,
   spaces,
   typename,
   target,
-  views,
-  initialFormValues: _initialFormValues,
+  initialFormValues: initialFormValuesProp,
   defaultSpaceId,
   resolve,
   onTargetChange,
   onTypenameChange,
   onCreateObject,
 }: CreateObjectPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
+  const initialFormValues = useDefaultValue(initialFormValuesProp, () => ({}));
   const metadata = typename && resolve?.(typename);
-  const options: TypeAnnotation[] = schemas
-    .filter((schema) => {
-      if (views == null) {
-        return true;
-      } else {
-        return views === ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false));
-      }
-    })
-    .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,
-      });
-      return nameA.localeCompare(nameB);
-    });
+
+  const sortedOptions = useMemo(() => [...options].sort((a, b) => a.label.localeCompare(b.label)), [options]);
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
@@ -89,50 +73,101 @@ export const CreateObjectPanel = ({
     [onCreateObject, metadata],
   );
 
-  const handleSetTypename = useCallback(
-    async (typename: string) => {
-      const metadata = resolve?.(typename);
+  const handleSelectOption = useCallback(
+    async (id: string) => {
+      const metadata = resolve?.(id);
       if (metadata && !metadata.inputSchema) {
         await onCreateObject?.({ metadata });
       } else {
-        onTypenameChange?.(typename);
+        onTypenameChange?.(id);
       }
     },
     [resolve, onCreateObject],
   );
 
+  const inputSchema = useMemo(
+    () => (metadata && typeof metadata === 'object' && metadata.inputSchema ? omitId(metadata.inputSchema) : undefined),
+    [metadata],
+  );
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
   // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  return !metadata ? (
-    <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
-  ) : !target ? (
-    <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
-  ) : metadata.inputSchema ? (
-    <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;
+  if (!metadata) {
+    return <SelectType options={sortedOptions} onChange={handleSelectOption} />;
+  }
+
+  // TODO(burdon): Remove.
+  if (!target) {
+    return <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />;
+  }
+
+  if (metadata.inputSchema) {
+    return (
+      <Form.Root
+        autoFocus
+        schema={inputSchema}
+        defaultValues={initialFormValues}
+        fieldProvider={inputSurfaceLookup}
+        db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
+        onSave={handleCreateObject}
+        testId='create-object-form'
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    );
+  }
+
+  return null;
 };
 
-const SelectSpace = ({
-  spaces,
-  defaultSpaceId,
-  onChange,
-}: { onChange?: (db: Database.Database) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+CreateObjectPanel.displayName = 'CreateObjectPanel';
+
+type SelectTypeProps = Pick<CreateObjectPanelProps, 'options'> & {
+  onChange: (id: string) => void;
+};
+
+const SelectType = ({ options, onChange }: SelectTypeProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) => option.label,
+  });
+
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Content classNames='gap-form-gap'>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.schema-input'
+          placeholder={t('schema-input.placeholder')}
+        />
+        <SearchList.Viewport>
+          {results.map((option) => (
+            <SearchList.Item
+              key={option.id}
+              value={option.id}
+              label={option.label}
+              icon={option.icon ?? 'ph--placeholder--regular'}
+              onSelect={() => onChange(option.id)}
+            />
+          ))}
+        </SearchList.Viewport>
+      </SearchList.Content>
+    </SearchList.Root>
+  );
+};
+
+type SelectSpaceProps = Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'> & {
+  onChange?: (db: Database.Database) => void;
+};
+
+const SelectSpace = ({ spaces, defaultSpaceId, onChange }: SelectSpaceProps) => {
   const { t } = useTranslation(meta.id);
 
   const sortedSpaces = useMemo(
@@ -168,80 +203,25 @@ const SelectSpace = ({
 
   return (
     <SearchList.Root onSearch={handleSearch}>
-      <div aria-label={t('space input label')} role='combobox' aria-expanded='true'>
+      <SearchList.Content>
         <SearchList.Input
           autoFocus
           data-testid='create-object-form.space-input'
-          placeholder={t('space input placeholder')}
+          placeholder={t('space-input.placeholder')}
         />
-        <SearchList.Content>
-          <SearchList.Viewport>
-            {results.map((space) => (
+        <SearchList.Viewport>
+          {results.map((space) => {
+            return (
               <SearchList.Item
                 key={space.id}
                 value={space.id}
-                label={toLocalizedString(
-                  getSpaceDisplayName(space, {
-                    personal: space.id === defaultSpaceId,
-                  }),
-                  t,
-                )}
+                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>
-  );
-};
-
-const SelectSchema = ({
-  options,
-  resolve,
-  onChange,
-}: {
-  options: TypeAnnotation[];
-  onChange: (type: string) => void;
-} & 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 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.Viewport>
+      </SearchList.Content>
     </SearchList.Root>
   );
 };

package/src/components/CreateDialog/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './CreateObjectDialog';
-export * from './CreateSpaceDialog';
+export * from './CreateObjectPanel';

package/src/components/{ObjectDetails → ForeignKeys}/ForeignKeys.tsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import { type Key } from '@dxos/echo';
 import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type ForeignKeysProps = {
   keys: Key.ForeignKey[];
@@ -38,13 +38,19 @@ const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
   }, [forignKey, onDelete]);
 
   return (
-    <ListItem.Root classNames='pli-2'>
+    <ListItem.Root classNames='px-2'>
       <ListItem.Heading classNames='flex flex-col grow truncate'>
         <div>{forignKey.source}</div>
         <div className='text-description text-sm truncate'>{forignKey.id}</div>
       </ListItem.Heading>
       <ListItem.Endcap>
-        <IconButton iconOnly icon='ph--x--regular' variant='ghost' label={t('delete key')} onClick={handleDelete} />
+        <IconButton
+          iconOnly
+          icon='ph--x--regular'
+          variant='ghost'
+          label={t('delete-key.button')}
+          onClick={handleDelete}
+        />
       </ListItem.Endcap>
     </ListItem.Root>
   );

package/src/components/{JoinDialog → ForeignKeys}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './JoinDialog';
+export * from './ForeignKeys';

package/src/components/SpacePluginSettings/SpacePluginSettings.stories.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+import { SpacePluginSettings } from './SpacePluginSettings';
+
+const meta = {
+  title: 'plugins/plugin-space/components/SpacePluginSettings',
+  component: SpacePluginSettings,
+  tags: ['settings'],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SpacePluginSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {
+      showHidden: false,
+    },
+  },
+};