@dxos/plugin-space 0.8.3-main.7f5a14c → 0.8.3-staging.0fa589b

package/src/capabilities/react-surface.tsx

@@ -3,16 +3,27 @@
 //
 
 import { type Schema } from 'effect';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface, Surface, useCapability, useLayout } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
+import {
+  Capabilities,
+  contributes,
+  createSurface,
+  Surface,
+  useCapabilities,
+  useCapability,
+  useLayout,
+} from '@dxos/app-framework';
+import { Obj, Type } from '@dxos/echo';
 import { findAnnotation } from '@dxos/effect';
 import { SettingsStore } from '@dxos/local-storage';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { useClient } from '@dxos/react-client';
 import { getSpace, isLiveObject, isSpace, parseId, SpaceState, useSpace, type Space } from '@dxos/react-client/echo';
-import { Input } from '@dxos/react-ui';
-import { type InputProps } from '@dxos/react-ui-form';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { type InputProps, SelectInput } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+import { DataType, type TypenameAnnotation, TypenameAnnotationId } from '@dxos/schema';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { SpaceCapabilities } from './capabilities';
@@ -42,12 +53,14 @@ import {
   type CreateObjectDialogProps,
 } from '../components';
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType, HueAnnotationId, IconAnnotationId, type SpaceSettingsProps } from '../types';
+import { HueAnnotationId, IconAnnotationId, type SpaceSettingsProps } from '../types';
 
 type ReactSurfaceOptions = {
   createInvitationUrl: (invitationCode: string) => string;
 };
 
+const OMIT = [Type.getTypename(DataType.Collection), Type.getTypename(DataType.QueryCollection)];
+
 export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
@@ -58,7 +71,10 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         isSpace(data.subject) && data.subject.state.get() === SpaceState.SPACE_READY,
       component: ({ data, role, ...rest }) => (
         <Surface
-          data={{ id: data.subject.id, subject: data.subject.properties[CollectionType.typename]?.target }}
+          data={{
+            id: data.subject.id,
+            subject: data.subject.properties[Type.getTypename(DataType.Collection)]?.target,
+          }}
           role={role}
           {...rest}
         />
@@ -68,7 +84,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       id: `${SPACE_PLUGIN}/collection-fallback`,
       role: 'article',
       position: 'fallback',
-      filter: (data): data is { subject: CollectionType } => Obj.instanceOf(CollectionType, data.subject),
+      filter: (data): data is { subject: DataType.Collection } => Obj.instanceOf(DataType.Collection, data.subject),
       component: ({ data }) => <CollectionMain collection={data.subject} />,
     }),
     createSurface({
@@ -186,6 +202,78 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         );
       },
     }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/typename-form-input`,
+      role: 'form-input',
+      filter: (
+        data,
+      ): data is { prop: string; schema: Schema.Schema<any>; target: Space | DataType.Collection | undefined } => {
+        if (data.prop !== 'typename') {
+          return false;
+        }
+
+        const annotation = findAnnotation((data.schema as Schema.Schema.All).ast, TypenameAnnotationId);
+        return !!annotation;
+      },
+      component: ({ data: { schema, target }, ...inputProps }) => {
+        const { t } = useTranslation();
+        const client = useClient();
+        const props = inputProps as any as InputProps;
+        const space = isSpace(target) ? target : getSpace(target);
+        if (!space) {
+          return null;
+        }
+
+        const annotation = findAnnotation<TypenameAnnotation[]>(schema.ast, TypenameAnnotationId)!;
+
+        const schemaWhitelists = useCapabilities(ClientCapabilities.SchemaWhiteList);
+        const whitelistedTypenames = useMemo(
+          () => new Set(schemaWhitelists.flatMap((typeArray) => typeArray.map((type) => type.typename))),
+          [schemaWhitelists],
+        );
+
+        const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
+        const objectFormTypenames = useMemo(
+          () =>
+            new Set(
+              objectForms
+                .map((form) => Type.getTypename(form.objectSchema))
+                // TODO(wittjosiah): Remove.
+                .filter((typename) => !OMIT.includes(typename)),
+            ),
+          [objectForms],
+        );
+
+        const fixed = client.graph.schemaRegistry.schemas.filter((schema) => {
+          const limitedStatic =
+            annotation.includes('limited-static') && whitelistedTypenames.has(Type.getTypename(schema));
+          const objectForm = annotation.includes('object-form') && objectFormTypenames.has(Type.getTypename(schema));
+          return annotation.includes('static') || limitedStatic || objectForm;
+        });
+        const dynamic = space?.db.schemaRegistry.query().runSync();
+        const typenames = Array.from(
+          new Set<string>([
+            ...(annotation.includes('limited-static') ||
+            annotation.includes('static') ||
+            annotation.includes('object-form')
+              ? fixed.map((schema) => Type.getTypename(schema))
+              : []),
+            ...(annotation.includes('dynamic') ? dynamic.map((schema) => schema.typename) : []),
+          ]),
+        ).sort();
+
+        const options = useMemo(
+          () =>
+            typenames.map((typename) => ({
+              value: typename,
+              label: t('typename label', { ns: typename, defaultValue: typename }),
+            })),
+          [t, typenames],
+        );
+
+        return <SelectInput {...props} options={options} />;
+      },
+    }),
     createSurface({
       id: POPOVER_RENAME_SPACE,
       role: 'popover',
@@ -240,7 +328,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         const space = isSpace(data.subject) ? data.subject : getSpace(data.subject);
         const object = isSpace(data.subject)
           ? data.subject.state.get() === SpaceState.SPACE_READY
-            ? (space?.properties[CollectionType.typename]?.target as CollectionType)
+            ? (space?.properties[Type.getTypename(DataType.Collection)]?.target as DataType.Collection)
             : undefined
           : data.subject;
 
@@ -250,7 +338,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: `${SPACE_PLUGIN}/collection-section`,
       role: 'section',
-      filter: (data): data is { subject: CollectionType } => Obj.instanceOf(CollectionType, data.subject),
+      filter: (data): data is { subject: DataType.Collection } => Obj.instanceOf(DataType.Collection, data.subject),
       component: ({ data }) => <CollectionSection collection={data.subject} />,
     }),
     createSurface({

package/src/capabilities/spaces-ready.ts

@@ -31,7 +31,7 @@ export default async (context: PluginContext) => {
   const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
   const { graph } = context.getCapability(Capabilities.AppGraph);
   const layout = context.getCapability(Capabilities.Layout);
-  const deck = context.getCapability(DeckCapabilities.DeckState);
+  const deck = context.getCapabilities(DeckCapabilities.DeckState)[0];
   const attention = context.getCapability(AttentionCapabilities.Attention);
   const state = context.getCapability(SpaceCapabilities.MutableState);
   const client = context.getCapability(ClientCapabilities.Client);
@@ -39,7 +39,7 @@ export default async (context: PluginContext) => {
   const defaultSpace = client.spaces.default;
   await defaultSpace.waitUntilReady();
 
-  if (deck.activeDeck === 'default') {
+  if (deck?.activeDeck === 'default') {
     await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: defaultSpace.id }));
   }
 
@@ -54,7 +54,7 @@ export default async (context: PluginContext) => {
   if (!spacesOrder) {
     // TODO(wittjosiah): Cannot be a Folder because Spaces are not TypedObjects so can't be saved in the database.
     //  Instead, we store order as an array of space ids.
-    defaultSpace.db.add(Obj.make({ key: SHARED, order: [] }));
+    defaultSpace.db.add(Obj.make(Type.Expando, { key: SHARED, order: [] }));
   }
 
   // Await missing objects.

package/src/components/CollectionMain.tsx

@@ -6,11 +6,11 @@ import React from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
 import { baseSurface, descriptionMessage, mx } from '@dxos/react-ui-theme';
+import { type DataType } from '@dxos/schema';
 
 import { SPACE_PLUGIN } from '../meta';
-import type { CollectionType } from '../types';
 
-export const CollectionMain = ({ collection }: { collection: CollectionType }) => {
+export const CollectionMain = ({ collection }: { collection: DataType.Collection }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
@@ -21,7 +21,7 @@ export const CollectionMain = ({ collection }: { collection: CollectionType }) =
     >
       <p
         role='alert'
-        className={mx(descriptionMessage, 'rounded-lg p-8 font-normal text-lg max-is-[24rem] break-words')}
+        className={mx(descriptionMessage, 'rounded-md p-8 font-normal text-lg max-is-[24rem] break-words')}
       >
         {collection.name ?? t('unnamed collection label')}
       </p>

package/src/components/CollectionSection.tsx

@@ -5,11 +5,11 @@
 import React from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
+import { type DataType } from '@dxos/schema';
 
 import { SPACE_PLUGIN } from '../meta';
-import type { CollectionType } from '../types';
 
-export const CollectionSection = ({ collection }: { collection: CollectionType }) => {
+export const CollectionSection = ({ collection }: { collection: DataType.Collection }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   // TODO(wittjosiah): Better placeholder.
   return (

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -7,16 +7,16 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect } from 'react';
 
-import { Filter, Obj } from '@dxos/echo';
+import { Filter, Obj, Type } from '@dxos/echo';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
+import { DataType } from '@dxos/schema';
 import { osTranslations } from '@dxos/shell/react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
 import translations from '../../translations';
-import { CollectionType } from '../../types';
 
 const Story = (args: CreateObjectDialogProps) => {
   return (
@@ -34,7 +34,7 @@ const meta: Meta<typeof CreateObjectDialog> = {
   component: CreateObjectDialog,
   render: Story,
   decorators: [
-    withClientProvider({ createIdentity: true, createSpace: true, types: [CollectionType] }),
+    withClientProvider({ createIdentity: true, createSpace: true, types: [DataType.Collection] }),
     withTheme,
     withLayout(),
   ],
@@ -49,7 +49,7 @@ export default meta;
 export const Default: StoryObj<typeof CreateObjectDialog> = {};
 
 export const Typename: StoryObj<typeof CreateObjectDialog> = {
-  args: { typename: CollectionType.typename },
+  args: { typename: Type.getTypename(DataType.Collection) },
 };
 
 export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
@@ -67,11 +67,11 @@ export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
 export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
   render: (args) => {
     const space = useSpace();
-    const [collection] = useQuery(space, Filter.type(CollectionType));
+    const [collection] = useQuery(space, Filter.type(DataType.Collection));
 
     useEffect(() => {
       if (space) {
-        space.db.add(Obj.make(CollectionType, { name: 'My Collection', objects: [], views: {} }));
+        space.db.add(Obj.make(DataType.Collection, { name: 'My Collection', objects: [] }));
       }
     }, [space]);
 

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -3,7 +3,7 @@
 //
 
 import { pipe } from 'effect';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import {
   Capabilities,
@@ -14,11 +14,14 @@ import {
   useIntentDispatcher,
   usePluginManager,
 } from '@dxos/app-framework';
-import { type Obj } from '@dxos/echo';
+import { Query, Type, type Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { getSpace, isLiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
+import { getSpace, isLiveObject, isSpace, type Space, useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
+import { DataType } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
 
 import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
 import { SpaceCapabilities } from '../../capabilities';
@@ -32,8 +35,8 @@ export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 't
 };
 
 export const CreateObjectDialog = ({
-  target,
-  typename,
+  target: initialTarget,
+  typename: initialTypename,
   name,
   shouldNavigate: _shouldNavigate,
 }: CreateObjectDialogProps) => {
@@ -44,6 +47,11 @@ export const CreateObjectDialog = ({
   const spaces = useSpaces();
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const forms = useCapabilities(SpaceCapabilities.ObjectForm);
+  const [target, setTarget] = useState<Space | DataType.Collection | undefined>(initialTarget);
+  const [typename, setTypename] = useState<string | undefined>(initialTypename);
+  const space = isSpace(target) ? target : getSpace(target);
+  const queryCollections = useQuery(space, Query.type(DataType.QueryCollection));
+  const hiddenTypenames = queryCollections.map((collection) => collection.query.typename).filter(isNonNullable);
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
     (typename) =>
@@ -52,7 +60,7 @@ export const CreateObjectDialog = ({
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    async ({ form, target, data = {} }) => {
+    async ({ form, data = {} }) => {
       if (!target) {
         // TODO(wittjosiah): UI feedback.
         return;
@@ -66,7 +74,9 @@ export const CreateObjectDialog = ({
       const result = await dispatch(form.getIntent(data, { space }));
       const object = result.data?.object;
       if (isLiveObject(object)) {
-        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden: form.hidden });
+        // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
+        const hidden = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
+        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
         const shouldNavigate = _shouldNavigate ?? (() => true);
         if (shouldNavigate(object)) {
           await dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
@@ -75,15 +85,17 @@ export const CreateObjectDialog = ({
         }
       }
     },
-    [dispatch, resolve],
+    [dispatch, target, resolve, hiddenTypenames, _shouldNavigate],
   );
 
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames='p-0 bs-content max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
-        <Dialog.Title>{t('create object dialog title')}</Dialog.Title>
+    <Dialog.Content classNames={cardDialogContent}>
+      <div role='none' className={cardDialogHeader}>
+        <Dialog.Title>
+          {t('create object dialog title', { object: t('typename label', { ns: typename, defaultValue: 'Item' }) })}
+        </Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
             <Icon icon='ph--x--regular' size={4} />
@@ -92,7 +104,6 @@ export const CreateObjectDialog = ({
       </div>
 
       <CreateObjectPanel
-        classNames='p-4'
         forms={forms}
         spaces={spaces}
         target={target}
@@ -100,6 +111,8 @@ export const CreateObjectDialog = ({
         name={name}
         defaultSpaceId={client.spaces.default.id}
         resolve={resolve}
+        onTargetChange={setTarget}
+        onTypenameChange={setTypename}
         onCreateObject={handleCreateObject}
       />
     </Dialog.Content>

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,52 +2,49 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 
 import { Type } from '@dxos/echo';
 import { getTypeAnnotation, type TypeAnnotation } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
 import { type SpaceId, type Space } from '@dxos/react-client/echo';
-import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
-import { mx } from '@dxos/react-ui-theme';
+import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
+import { type DataType } from '@dxos/schema';
 import { isNonNullable, type MaybePromise } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
-import { type ObjectForm, type CollectionType } from '../../types';
+import { type ObjectForm } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
-export type CreateObjectPanelProps = ThemedClassName<{
+export type CreateObjectPanelProps = {
   forms: ObjectForm[];
   spaces: Space[];
   typename?: string;
-  target?: Space | CollectionType;
+  target?: Space | DataType.Collection;
   name?: string;
   defaultSpaceId?: SpaceId;
   resolve?: (typename: string) => Record<string, any>;
-  onCreateObject?: (params: {
-    form: ObjectForm;
-    target: Space | CollectionType;
-    data?: Record<string, any>;
-  }) => MaybePromise<void>;
-}>;
+  onTargetChange?: (target: Space) => void;
+  onTypenameChange?: (typename: string) => void;
+  onCreateObject?: (params: { form: ObjectForm; data?: Record<string, any> }) => MaybePromise<void>;
+};
 
 export const CreateObjectPanel = ({
-  classNames,
   forms,
   spaces,
-  typename: initialTypename,
-  target: initialTarget,
+  typename,
+  target,
   name: initialName,
   defaultSpaceId,
   resolve,
+  onTargetChange,
+  onTypenameChange,
   onCreateObject,
 }: CreateObjectPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const [typename, setTypename] = useState<string | undefined>(initialTypename);
-  const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
   const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
   const options: TypeAnnotation[] = forms
     .map((form) => getTypeAnnotation(form.objectSchema))
@@ -60,67 +57,63 @@ export const CreateObjectPanel = ({
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
-      if (!form || !target) {
+      if (!form) {
         return;
       }
-      await onCreateObject?.({ form, target, data: props });
+      await onCreateObject?.({ form, data: props });
     },
-    [onCreateObject, form, target],
+    [onCreateObject, form],
   );
 
   const handleSetTypename = useCallback(
     async (typename: string) => {
-      invariant(target, 'target is required');
       const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
       if (form && !form.formSchema) {
-        await onCreateObject?.({ form, target });
+        await onCreateObject?.({ form });
       } else {
-        setTypename(typename);
+        onTypenameChange?.(typename);
       }
     },
-    [forms, onCreateObject, target],
+    [forms, onCreateObject],
   );
 
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
   // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  return (
-    <div role='form' className={mx('flex flex-col gap-2', classNames)}>
-      {!form ? (
-        <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
-      ) : !target ? (
-        <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={setTarget} />
-      ) : form.formSchema ? (
-        <Form
-          flush
-          autoFocus
-          values={{ name: initialName }}
-          schema={form.formSchema}
-          testId='create-object-form'
-          onSave={handleCreateObject}
-          lookupComponent={inputSurfaceLookup}
-        />
-      ) : undefined}
+  return !form ? (
+    <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
+  ) : !target ? (
+    <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
+  ) : form.formSchema ? (
+    <div role='none' className={cardDialogOverflow}>
+      <Form
+        autoFocus
+        values={{ name: initialName }}
+        schema={form.formSchema}
+        testId='create-object-form'
+        onSave={handleCreateObject}
+        lookupComponent={inputSurfaceLookup}
+        outerSpacing='blockStart-0'
+      />
     </div>
-  );
+  ) : null;
 };
 
 const SelectSpace = ({
   spaces,
   defaultSpaceId,
   onChange,
-}: { onChange: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+}: { onChange?: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden'>
+    <SearchList.Root label={t('space input label')} classNames={cardDialogSearchListRoot}>
       <SearchList.Input
         autoFocus
         data-testid='create-object-form.space-input'
         placeholder={t('space input placeholder')}
-        classNames='px-1 my-2'
       />
-      <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+      <SearchList.Content classNames={[cardDialogOverflow, 'plb-cardSpacingBlock']}>
         {spaces
           .sort((a, b) => {
             const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
@@ -131,7 +124,7 @@ const SelectSpace = ({
             <SearchList.Item
               key={space.id}
               value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              onSelect={() => onChange(space)}
+              onSelect={() => onChange?.(space)}
               classNames='flex items-center gap-2'
             >
               <span className='grow truncate'>
@@ -155,14 +148,13 @@ const SelectSchema = ({
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
+    <SearchList.Root label={t('schema input label')} classNames={cardDialogSearchListRoot}>
       <SearchList.Input
         autoFocus
         data-testid='create-object-form.schema-input'
         placeholder={t('schema input placeholder')}
-        classNames='px-1 my-2'
       />
-      <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+      <SearchList.Content classNames={cardDialogPaddedOverflow}>
         {options.map((option) => (
           <SearchList.Item
             key={option.typename}

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -8,6 +8,7 @@ import React, { useCallback, useRef } from 'react';
 import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, Dialog, Icon, 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 { SPACE_PLUGIN } from '../../meta';
@@ -30,7 +31,7 @@ export const CreateSpaceDialog = () => {
       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(SpaceAction.OpenCreateObject, { target: space }));
+        yield* dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
       });
       await Effect.runPromise(program);
     },
@@ -40,8 +41,8 @@ export const CreateSpaceDialog = () => {
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames='p-0 bs-content min-bs-[16rem] max-bs-full md:max-is-[32rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
+    <Dialog.Content classNames={cardDialogContent}>
+      <div role='none' className={cardDialogHeader}>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
@@ -49,15 +50,15 @@ export const CreateSpaceDialog = () => {
           </Button>
         </Dialog.Close>
       </div>
-      <div className='p-4'>
+      <div role='none' className='contents'>
         <Form
           testId='create-space-form'
-          flush
           autoFocus
           values={initialValues}
           schema={SpaceForm}
           lookupComponent={inputSurfaceLookup}
           onSave={handleCreateSpace}
+          outerSpacing='scroll-fields'
         />
       </div>
     </Dialog.Content>

package/src/components/MembersContainer.tsx

@@ -7,6 +7,7 @@ import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useSta
 import { QR } from 'react-qr-rounded';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Type } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
@@ -15,6 +16,7 @@ import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/rea
 import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 import { getSize, mx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
 import {
   type ActionMenuItem,
   AuthCode,
@@ -28,7 +30,7 @@ import {
 import { hexToEmoji } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType, SpaceAction } from '../types';
+import { SpaceAction } from '../types';
 import { COMPOSER_SPACE_LOCK } from '../util';
 
 // TODO(wittjosiah): Copied from Shell.
@@ -65,7 +67,7 @@ export const MembersContainer = ({
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
+  const target = space.properties[Type.getTypename(DataType.Collection)]?.target?.objects[0]?.target;
 
   const locked = space.properties[COMPOSER_SPACE_LOCK];
   const handleChangeLocked = useCallback(() => {