@dxos/plugin-space 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { type Database } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { Dialog } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '#components';
+import { translations } from '#translations';
+
+const mockOptions: CreateObjectOption[] = [
+  { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },
+  { id: 'org.dxos.type.table', label: 'Table', icon: 'ph--table--regular' },
+  { id: 'org.dxos.type.canvas', label: 'Canvas', icon: 'ph--paint-brush--regular' },
+  { id: 'org.dxos.type.thread', label: 'Thread', icon: 'ph--chat-circle-text--regular' },
+];
+
+const mockSpaces = [
+  { id: 'space-1', db: {} as Database.Database, displayName: 'Personal Space' },
+  { id: 'space-2', db: {} as Database.Database, displayName: 'Team Space' },
+] as unknown as Space[];
+
+const DefaultStory = () => {
+  const [typename, setTypename] = useState<string | undefined>(undefined);
+
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay>
+        <Dialog.Content>
+          <Dialog.Body>
+            <CreateObjectPanel
+              options={mockOptions}
+              spaces={mockSpaces}
+              typename={typename}
+              target={{} as Database.Database}
+              resolve={() => mockMetadata}
+              onTypenameChange={setTypename}
+              onCreateObject={async () => {}}
+            />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const mockInputSchema = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String.annotations({ title: 'Name' }),
+  description: Schema.optional(Schema.String.annotations({ title: 'Description' })),
+});
+
+const mockMetadata: Metadata = {
+  id: 'org.dxos.type.document',
+  createObject: () => Effect.succeed({ id: 'mock-id', subject: [], object: {} as any }),
+  inputSchema: mockInputSchema,
+};
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateObjectDialog',
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withPluginManager()],
+  parameters: {
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DefaultStory,
+};

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -7,25 +7,21 @@ import * as Option from 'effect/Option';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { Capability } from '@dxos/app-framework';
-import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation, getObjectPath } from '@dxos/app-toolkit';
-import { Collection, Database, Obj, Type } from '@dxos/echo';
+import { useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { Operation } from '@dxos/compute';
+import { Annotation, Collection, Database, Obj, Type } from '@dxos/echo';
 import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { ViewAnnotation } from '@dxos/schema';
 
-import {
-  type CreateObjectOption,
-  CreateObjectPanel,
-  type CreateObjectPanelProps,
-  type Metadata,
-} from '../../components';
-import { meta } from '../../meta';
-import { SpaceOperation } from '../../types';
+import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps } from '#components';
+import { meta } from '#meta';
+import { SpaceCapabilities } from '#types';
 
 export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
 
@@ -45,33 +41,31 @@ export const CreateObjectDialog = ({
   shouldNavigate: _shouldNavigate,
   targetNodeId,
 }: CreateObjectDialogProps) => {
-  const manager = usePluginManager();
   const { t } = useTranslation(meta.id);
+  const manager = usePluginManager();
   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 layout = useLayout();
   const closeRef = useRef<HTMLButtonElement | null>(null);
 
-  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (id) => {
-      const metadata = manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .find(({ id: entryId }) => entryId === id)?.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 createObjectEntries = useCapabilities(SpaceCapabilities.CreateObjectEntry);
+
+  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
+    (id) => createObjectEntries.find((entry) => entry.id === id),
+    [createObjectEntries],
+  );
+
   const viewTypenames = useMemo(() => {
     const set = new Set<string>();
     for (const schema of schemas ?? []) {
-      if (ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false))) {
+      if (ViewAnnotation.has(schema)) {
         set.add(Type.getTypename(schema));
       }
     }
@@ -80,16 +74,18 @@ export const CreateObjectDialog = ({
 
   const options = useMemo<CreateObjectOption[]>(
     () =>
-      manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .filter((entry) => entry.metadata?.createObject)
+      createObjectEntries
         .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
-        .map((entry) => ({
-          id: entry.id,
-          label: t('typename label', { ns: entry.id, defaultValue: entry.id }),
-          icon: entry.metadata?.icon,
-        })),
-    [manager, views, viewTypenames, t],
+        .map((entry) => {
+          const schema = schemas?.find((s) => Type.getTypename(s) === entry.id);
+          const iconAnnotation = schema ? Annotation.IconAnnotation.get(schema).pipe(Option.getOrUndefined) : undefined;
+          return {
+            id: entry.id,
+            label: t('typename.label', { ns: entry.id, defaultValue: entry.id }),
+            icon: iconAnnotation?.icon,
+          };
+        }),
+    [createObjectEntries, views, viewTypenames, schemas, t],
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
@@ -105,40 +101,43 @@ export const CreateObjectDialog = ({
 
         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)) {
-          const { subject } = yield* operationInvoker.invoke(SpaceOperation.AddObject, {
-            target,
-            object,
-            hidden: !Obj.instanceOf(Collection.Collection, object),
-            targetNodeId,
-          });
-          const shouldNavigate = _shouldNavigate ?? (() => true);
-          if (shouldNavigate(object)) {
+        const result = yield* metadata.createObject(data, {
+          db,
+          target,
+          targetNodeId,
+        });
+        const shouldNavigate = _shouldNavigate ?? (() => true);
+        if (result.subject.length > 0 && shouldNavigate(result.object)) {
+          if (layout.mode === 'multi') {
+            yield* operationInvoker.invoke(LayoutOperation.Set, {
+              subject: [...result.subject],
+            });
+            yield* operationInvoker.invoke(LayoutOperation.Expose, {
+              subject: result.subject[0],
+            });
+          } else {
             yield* operationInvoker.invoke(LayoutOperation.Open, {
-              subject,
+              subject: [...result.subject],
+              navigation: 'immediate',
             });
           }
-
-          onCreateObject?.(object);
         }
+
+        onCreateObject?.(result.object);
       }).pipe(
         Effect.provideService(Capability.Service, manager.capabilities),
         Effect.provideService(Operation.Service, operationInvoker),
         runAndForwardErrors,
       ),
-    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker],
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker, layout.mode],
   );
 
   return (
     <Dialog.Content>
       <Dialog.Header>
         <Dialog.Title>
-          {t('create object dialog title', {
-            object: t('typename label', {
-              ns: typename,
-              defaultValue: views ? 'View' : 'Object',
-            }),
+          {t('create-object-dialog.title', {
+            object: t('typename.label', { ns: typename, defaultValue: views ? 'View' : 'Object' }),
           })}
         </Dialog.Title>
         <Dialog.Close asChild>
@@ -152,11 +151,11 @@ export const CreateObjectDialog = ({
           target={target}
           typename={typename}
           initialFormValues={initialFormValues}
-          defaultSpaceId={client.spaces.default.id}
+          defaultSpaceId={getPersonalSpace(client)?.id ?? client.spaces.get()[0]?.id}
           resolve={resolve}
+          onCreateObject={handleCreateObject}
           onTargetChange={setTarget}
           onTypenameChange={setTypename}
-          onCreateObject={handleCreateObject}
         />
       </Dialog.Body>
     </Dialog.Content>

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { ProcessManagerPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { Dialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { CreateSpaceDialog } from './CreateSpaceDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <CreateSpaceDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateSpaceDialog',
+  component: CreateSpaceDialog,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [ProcessManagerPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof CreateSpaceDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.tsx

@@ -12,9 +12,10 @@ import { runAndForwardErrors } from '@dxos/effect';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { SpaceForm, SpaceOperation } from '../../types';
+import { useInputSurfaceLookup } from '#hooks';
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+import { SpaceForm } from '#types';
 
 export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
 
@@ -47,26 +48,28 @@ export const CreateSpaceDialog = () => {
   return (
     <Dialog.Content>
       <Dialog.Header>
-        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
+        <Dialog.Title>{t('create-space-dialog.title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
-      <Form.Root
-        testId='create-space-form'
-        autoFocus
-        schema={SpaceForm}
-        defaultValues={initialValues}
-        fieldProvider={inputSurfaceLookup}
-        onSave={handleCreateSpace}
-      >
-        <Form.Viewport>
-          <Form.Content>
-            <Form.FieldSet />
-            <Form.Submit />
-          </Form.Content>
-        </Form.Viewport>
-      </Form.Root>
+      <Dialog.Body>
+        <Form.Root
+          testId='create-space-form'
+          autoFocus
+          schema={SpaceForm}
+          defaultValues={initialValues}
+          fieldProvider={inputSurfaceLookup}
+          onSave={handleCreateSpace}
+        >
+          <Form.Viewport>
+            <Form.Content>
+              <Form.FieldSet />
+              <Form.Submit />
+            </Form.Content>
+          </Form.Viewport>
+        </Form.Root>
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/containers/CreateSpaceDialog/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CreateSpaceDialog } from './CreateSpaceDialog';
-
-export default CreateSpaceDialog;
+export { CreateSpaceDialog as default } from './CreateSpaceDialog';

package/src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+import { FileUploader } from 'react-drag-drop-files';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+
+export const ImportSpaceDialog = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      const contents = new Uint8Array(await file.arrayBuffer());
+      const { data: result } = await invokePromise(SpaceOperation.ImportSpace, {
+        archive: { filename: file.name, contents },
+      });
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      if (result?.space) {
+        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) });
+      }
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('import-space-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <p className='my-4'>{t('import-space-dialog.description')}</p>
+        <FileUploader
+          types={['json', 'tar']}
+          classes='block my-4 p-8 border-2 border-dashed border-neutral-500/50 rounded-sm flex items-center justify-center gap-2 cursor-pointer'
+          dropMessageStyle={{ border: 'none', backgroundColor: '#EEE' }}
+          handleChange={(file: File) => {
+            void handleFile(file);
+          }}
+        >
+          <Icon icon='ph--file-plus--duotone' size={8} />
+          <span>{t('import-space-dialog.upload.label')}</span>
+        </FileUploader>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button variant='primary'>{t('cancel.label')}</Button>
+        </Dialog.Close>
+      </Dialog.ActionBar>
+    </Dialog.Content>
+  );
+};

package/src/containers/ImportSpaceDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { ImportSpaceDialog as default } from './ImportSpaceDialog';

package/src/containers/InlineSyncStatus/InlineSyncStatus.tsx

@@ -12,7 +12,7 @@ import { type Space, useSpaceSyncState } from '@dxos/react-client/echo';
 import { Tooltip, useTranslation } from '@dxos/react-ui';
 import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 const useEdgeStatus = (): EdgeStatus.ConnectionState => {
   const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
@@ -39,7 +39,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
 
   return (
-    <Tooltip.Trigger asChild content={t('syncing label')} side='bottom'>
+    <Tooltip.Trigger asChild content={t('syncing.label')} side='bottom'>
       <AttentionGlyph
         syncing={syncing}
         attended={attended}

package/src/containers/InlineSyncStatus/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { InlineSyncStatus } from './InlineSyncStatus';
-
-export default InlineSyncStatus;
+export { InlineSyncStatus as default } from './InlineSyncStatus';

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Dialog } from '@dxos/react-ui';
+
+import { translations } from '#translations';
+
+import { JoinDialog } from './JoinDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <JoinDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-space/containers/JoinDialog',
+  component: JoinDialog,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [...corePlugins(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof JoinDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -9,7 +9,7 @@ import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Trigger } from '@dxos/async';
 import { Graph } from '@dxos/plugin-graph';
-import { ObservabilityOperation } from '@dxos/plugin-observability/types';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
@@ -17,7 +17,7 @@ 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';
+import { meta } from '#meta';
 
 export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
 
@@ -42,8 +42,8 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         invokePromise(LayoutOperation.AddToast, {
           id: `${meta.id}.join-success`,
           duration: 5_000,
-          title: ['join success label', { ns: meta.id }],
-          closeLabel: ['dismiss label', { ns: meta.id }],
+          title: ['join-success.label', { ns: meta.id }],
+          closeLabel: ['dismiss.label', { ns: meta.id }],
         }),
         invokePromise(LayoutOperation.UpdateDialog, { state: false }),
       ]);
@@ -77,7 +77,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         ]);
       }
 
-      await onDone?.(result);
+      onDone?.(result);
 
       if (space) {
         await invokePromise(ObservabilityOperation.SendEvent, {
@@ -91,15 +91,18 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
     [invokePromise, client, graph, navigableCollections, onDone],
   );
 
+  // TODO(burdon): Move JoinHeading into Dialog.Heading.
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
-      <JoinPanel
-        {...props}
-        exitActionParent={<Dialog.Close asChild />}
-        doneActionParent={<Dialog.Close asChild />}
-        onDone={handleDone}
-      />
+      <Dialog.Title classNames='sr-only'>{t('join-space.label', { ns: osTranslations })}</Dialog.Title>
+      <Dialog.Body>
+        <JoinPanel
+          {...props}
+          exitActionParent={<Dialog.Close asChild />}
+          doneActionParent={<Dialog.Close asChild />}
+          onDone={handleDone}
+        />
+      </Dialog.Body>
     </Dialog.Content>
   );
 };