@dxos/plugin-space 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -4,173 +4,104 @@
 
 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 { Feed, Filter, Obj } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
-import { useClient } from '@dxos/react-client';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Collection, Obj } from '@dxos/echo';
+import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Toolbar } from '@dxos/react-ui';
 import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
-import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
-import { ManagedCollection } from '@dxos/schema';
+import { SearchPanel, useSearchListResults } from '@dxos/react-ui-search';
 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]);
-};
+import { meta } from '#meta';
 
 /**
  * Article view for collections.
  */
-export const CollectionArticle = ({
-  subject,
-}: SurfaceComponentProps<Collection.Collection | ManagedCollection.ManagedCollection>) => {
+export const CollectionArticle = ({ subject, attendableId }: AppSurface.ObjectArticleProps<Collection.Collection>) => {
   const { t } = useTranslation(meta.id);
-  const resolveMetadata = useMetadataResolver();
-  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata);
+  const { items, handleSearch } = useCollectionItems(subject, attendableId);
 
   return (
-    <SearchList.Root onSearch={handleSearch}>
-      <Panel.Root className='dx-article'>
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>
-            <SearchList.Input placeholder={t('search placeholder')} />
-          </Toolbar.Root>
-        </Panel.Toolbar>
-        <Panel.Content asChild>
-          <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>
-        </Panel.Content>
-      </Panel.Root>
-    </SearchList.Root>
+    <SearchPanel onSearch={handleSearch}>
+      <Mosaic.Container asChild>
+        <ScrollArea.Root centered padding thin>
+          <ScrollArea.Viewport>
+            <Mosaic.Stack
+              classNames='gap-1'
+              draggable={false}
+              items={items}
+              getId={(item) => item.id}
+              Tile={ObjectTile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </SearchPanel>
   );
 };
 
 type ObjectItem = {
   id: string;
   object: Obj.Unknown;
+  targetPath: string;
   icon: string;
   iconHue?: string;
 };
 
-const ObjectTile: MosaicStackTileComponent<ObjectItem> = (props) => {
-  const item = props.data;
+const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
   const { t } = useTranslation(meta.id);
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
 
   const typename = Obj.getTypename(item.object) ?? '';
   const label =
     Obj.getLabel(item.object) ??
-    toLocalizedString(['object name placeholder', { ns: typename, defaultValue: item.id }], t);
+    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] });
-  };
+  const handleClick = useCallback(
+    () => void invokePromise(LayoutOperation.Open, { subject: [item.targetPath] }),
+    [invokePromise, item.targetPath],
+  );
 
   return (
-    <Card.Root fullWidth>
-      <Card.Toolbar>
-        <Card.ToolbarIconButton
-          variant='ghost'
-          label={label}
-          icon={item.icon}
-          iconOnly
-          iconClassNames={styles?.surfaceText}
-        />
-        <Card.Title onClick={handleClick}>{label}</Card.Title>
+    <Card.Root fullWidth role='button' classNames='cursor-pointer' onClick={handleClick}>
+      <Card.Header>
+        <Toolbar.IconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.fg} />
+        <Card.Title>{label}</Card.Title>
         <Card.Menu />
-      </Card.Toolbar>
+      </Card.Header>
     </Card.Root>
   );
 };
 
 /**
- * Hook to get items from a regular collection.
+ * Combined hook to get collection items with search/filter support.
  */
-const useRegularCollectionItems = (collection: Collection.Collection): Obj.Unknown[] => {
-  return useMemo(
+const useCollectionItems = (collection: Collection.Collection, attendableId?: string) => {
+  const objects = 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: ManagedCollection.ManagedCollection): Obj.Unknown[] => {
-  const client = useClient();
-  const space = getSpace(collection);
-  const [typename, feedKind] = collection.key.split('~');
-
-  const schema = useMemo(
-    () => client.graph.schemaRegistry.query({ typename, location: ['runtime'] }).runSync()[0],
-    [client, typename],
-  );
-
-  const filter = useMemo(
-    () =>
-      typename === Feed.Feed.typename
-        ? Filter.type(Feed.Feed, { kind: feedKind })
-        : schema
-          ? Filter.type(schema)
-          : Filter.nothing(),
-    [typename, schema, feedKind],
-  );
-
-  return useQuery(space?.db, filter);
-};
-
-type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
-
-/**
- * Combined hook to get collection items with search/filter support.
- */
-const useCollectionItems = (
-  collection: Collection.Collection | ManagedCollection.ManagedCollection,
-  resolveMetadata: MetadataResolver,
-) => {
-  const isManaged = Obj.instanceOf(ManagedCollection.ManagedCollection, collection);
-
-  // Call both hooks unconditionally to satisfy React's rules of hooks.
-  const regularObjects = useRegularCollectionItems(collection as Collection.Collection);
-  const managedObjects = useManagedCollectionItems(collection as ManagedCollection.ManagedCollection);
-
-  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) : {};
+        const iconAnnotation = Obj.getIcon(obj);
+        const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
+
         return {
-          id: Obj.getDXN(obj).toString(),
+          id: Obj.getURI(obj),
           object: obj,
-          icon: metadata.icon ?? 'ph--placeholder--regular',
-          iconHue: metadata.iconHue,
+          targetPath,
+          icon: iconAnnotation?.icon ?? 'ph--circle-dashed--regular',
+          iconHue: iconAnnotation?.hue,
         } satisfies ObjectItem;
       }),
-    [objects, resolveMetadata],
+    [objects, attendableId],
   );
 
-  // Use searchlist results for filtering.
   const { results, handleSearch } = useSearchListResults({
     items,
     extract: (item) => Obj.getLabel(item.object) ?? item.id,

package/src/containers/CollectionArticle/index.ts

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

package/src/containers/CollectionSection/CollectionSection.tsx

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

package/src/containers/CollectionSection/index.ts

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

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

@@ -2,38 +2,35 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 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 } from '@dxos/app-toolkit';
-import { Database, Obj, Type } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
+import { getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { PluginRegistryButton, 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`;
+export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
 
 export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'initialFormValues'> & {
   views?: boolean;
   onCreateObject?: (object: Obj.Unknown) => void;
   shouldNavigate?: (object: Obj.Unknown) => boolean;
+  targetNodeId?: string;
 };
 
 export const CreateObjectDialog = ({
@@ -43,34 +40,58 @@ export const CreateObjectDialog = ({
   initialFormValues,
   onCreateObject,
   shouldNavigate: _shouldNavigate,
+  targetNodeId,
 }: CreateObjectDialogProps) => {
-  const manager = usePluginManager();
   const { t } = useTranslation(meta.id);
+  const manager = usePluginManager();
   const operationInvoker = useOperationInvoker();
+  const { invoke } = operationInvoker;
   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 db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+  // TODO(wittjosiah): Support database schemas.
+  const schemas = db
+    ? db.graph.registry
+        .list()
+        .filter(Type.isType)
+        .filter((t) => !Type.isTypeKind(t))
+    : undefined;
+
+  const entriesByModule = useAtomValue(manager.capabilities.atomByModule(SpaceCapabilities.CreateObjectEntry));
+
+  const { createObjectEntries, pluginNameByEntryId } = useMemo(() => {
+    const entries: SpaceCapabilities.CreateObjectEntry[] = [];
+    const pluginByEntryId = new Map<string, string>();
+    const plugins = manager.getPlugins();
+    for (const [moduleId, contributions] of Object.entries(entriesByModule)) {
+      const owningPlugin = plugins.find((plugin) => plugin.modules.some((module) => module.id === moduleId));
+      for (const entry of contributions) {
+        entries.push(entry);
+        if (owningPlugin) {
+          pluginByEntryId.set(entry.id, owningPlugin.meta.name);
+        }
+      }
+    }
+    return { createObjectEntries: entries, pluginNameByEntryId: pluginByEntryId };
+  }, [entriesByModule, manager]);
+
   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],
+    (id) => createObjectEntries.find((entry) => entry.id === id),
+    [createObjectEntries],
   );
 
-  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();
+  // The type selector is shown while no type has been resolved; the registry button is only relevant then.
+  const showTypeSelector = !(typename && resolve(typename));
 
   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));
       }
     }
@@ -79,16 +100,21 @@ export const CreateObjectDialog = ({
 
   const options = useMemo<CreateObjectOption[]>(
     () =>
-      manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .filter((entry) => entry.metadata?.createObject)
-        .filter((entry) => (views === true ? viewTypenames.has(entry.id) : !viewTypenames.has(entry.id)))
-        .map((entry) => ({
-          id: entry.id,
-          label: t('typename label', { ns: entry.id, defaultValue: entry.id }),
-          icon: entry.metadata?.icon,
-        })),
-    [manager, views, viewTypenames, t],
+      createObjectEntries
+        .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
+        .map((entry) => {
+          const type = schemas?.find((s) => Type.getTypename(s) === entry.id);
+          const schema = type && Type.getSchema(type);
+          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,
+            iconHue: iconAnnotation?.hue,
+            plugin: pluginNameByEntryId.get(entry.id),
+          };
+        }),
+    [createObjectEntries, views, viewTypenames, schemas, t, pluginNameByEntryId],
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
@@ -104,45 +130,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)) {
-          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
-          const hidden = !metadata.addToCollectionOnCreate;
-          yield* operationInvoker.invoke(SpaceOperation.AddObject, {
-            target,
-            object,
-            hidden,
-          });
-          const shouldNavigate = _shouldNavigate ?? (() => true);
-          if (shouldNavigate(object)) {
-            yield* operationInvoker.invoke(LayoutOperation.Open, {
-              subject: [Obj.getDXN(object).toString()],
+        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* invoke(LayoutOperation.Set, {
+              subject: [...result.subject],
+            });
+            yield* invoke(LayoutOperation.Expose, {
+              subject: result.subject[0],
+            });
+          } else {
+            yield* invoke(LayoutOperation.Open, {
+              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, invoke, 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>
-          <Dialog.CloseIconButton ref={closeRef} />
+          <Dialog.ActionIconButton action='close' ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
       <Dialog.Body>
@@ -152,13 +176,20 @@ 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>
+      {showTypeSelector && (
+        <Dialog.ActionBar>
+          <Dialog.Close asChild>
+            <PluginRegistryButton />
+          </Dialog.Close>
+        </Dialog.ActionBar>
+      )}
     </Dialog.Content>
   );
 };

package/src/containers/CreateObjectDialog/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CreateObjectDialog } from './CreateObjectDialog';
-
-export default CreateObjectDialog;
+export { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
+export { CreateObjectDialog as default } from './CreateObjectDialog';

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 = {};