@dxos/plugin-space 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/capabilities/react-surface.tsx

@@ -13,7 +13,6 @@ import {
   useCapabilities,
   usePluginManager,
 } from '@dxos/app-framework';
-import { SettingsStore } from '@dxos/local-storage';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import {
   getSpace,
@@ -44,6 +43,7 @@ import {
   POPOVER_RENAME_SPACE,
   PopoverRenameObject,
   PopoverRenameSpace,
+  ShareSpaceButton,
   SmallPresenceLive,
   SPACE_SETTINGS_DIALOG,
   SpacePluginSettings,
@@ -56,6 +56,7 @@ import {
 } from '../components';
 import { SPACE_PLUGIN } from '../meta';
 import { CollectionType, type SpaceSettingsProps } from '../types';
+import { COMPOSER_SPACE_LOCK } from '../util';
 
 type ReactSurfaceOptions = {
   createInvitationUrl: (invitationCode: string) => string;
@@ -80,7 +81,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: `${SPACE_PLUGIN}/collection-fallback`,
       role: 'article',
-      position: 'fallback',
+      disposition: 'fallback',
       filter: (data): data is { subject: CollectionType } => data.subject instanceof CollectionType,
       component: ({ data }) => <CollectionMain collection={data.subject} />,
     }),
@@ -94,28 +95,28 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: `${SPACE_PLUGIN}/object-settings-base-panel`,
       role: 'complementary--settings',
-      position: 'hoist',
+      disposition: 'hoist',
       filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
       component: ({ data }) => <BaseObjectSettings object={data.subject} />,
     }),
     createSurface({
       id: `${SPACE_PLUGIN}/object-settings-advanced-panel`,
       role: 'complementary--settings',
-      position: 'fallback',
+      disposition: 'fallback',
       filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
       component: ({ data }) => <AdvancedObjectSettings object={data.subject} />,
     }),
     createSurface({
       id: SPACE_SETTINGS_DIALOG,
       role: 'dialog',
-      filter: (data): data is { props: SpaceSettingsDialogProps } => data.component === SPACE_SETTINGS_DIALOG,
-      component: ({ data }) => <SpaceSettingsDialog {...data.props} createInvitationUrl={createInvitationUrl} />,
+      filter: (data): data is { subject: SpaceSettingsDialogProps } => data.component === SPACE_SETTINGS_DIALOG,
+      component: ({ data }) => <SpaceSettingsDialog {...data.subject} createInvitationUrl={createInvitationUrl} />,
     }),
     createSurface({
       id: JOIN_DIALOG,
       role: 'dialog',
-      filter: (data): data is { props: JoinPanelProps } => data.component === JOIN_DIALOG,
-      component: ({ data }) => <JoinDialog {...data.props} />,
+      filter: (data): data is { subject: JoinPanelProps } => data.component === JOIN_DIALOG,
+      component: ({ data }) => <JoinDialog {...data.subject} />,
     }),
     createSurface({
       id: CREATE_SPACE_DIALOG,
@@ -126,7 +127,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: CREATE_OBJECT_DIALOG,
       role: 'dialog',
-      filter: (data): data is { props: Partial<CreateObjectDialogProps> } => data.component === CREATE_OBJECT_DIALOG,
+      filter: (data): data is { subject: Partial<CreateObjectDialogProps> } => data.component === CREATE_OBJECT_DIALOG,
       component: ({ data }) => {
         const schemas = useCapabilities(ClientCapabilities.Schema).flat();
         const manager = usePluginManager();
@@ -141,21 +142,21 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
           [manager],
         );
 
-        return <CreateObjectDialog schemas={schemas} resolve={resolve} {...data.props} />;
+        return <CreateObjectDialog schemas={schemas} resolve={resolve} {...data.subject} />;
       },
     }),
     createSurface({
       id: POPOVER_RENAME_SPACE,
       role: 'popover',
-      filter: (data): data is { props: Space } => data.component === POPOVER_RENAME_SPACE && isSpace(data.props),
-      component: ({ data }) => <PopoverRenameSpace space={data.props} />,
+      filter: (data): data is { subject: Space } => data.component === POPOVER_RENAME_SPACE && isSpace(data.subject),
+      component: ({ data }) => <PopoverRenameSpace space={data.subject} />,
     }),
     createSurface({
       id: POPOVER_RENAME_OBJECT,
       role: 'popover',
-      filter: (data): data is { props: ReactiveEchoObject<any> } =>
-        data.component === POPOVER_RENAME_OBJECT && isReactiveObject(data.props),
-      component: ({ data }) => <PopoverRenameObject object={data.props} />,
+      filter: (data): data is { subject: ReactiveEchoObject<any> } =>
+        data.component === POPOVER_RENAME_OBJECT && isReactiveObject(data.subject),
+      component: ({ data }) => <PopoverRenameObject object={data.subject} />,
     }),
     createSurface({
       id: `${SPACE_PLUGIN}/navtree-presence`,
@@ -172,7 +173,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       // TODO(wittjosiah): Attention glyph for non-echo items should be handled elsewhere.
       id: `${SPACE_PLUGIN}/navtree-presence-fallback`,
       role: 'navtree-item-end',
-      position: 'fallback',
+      disposition: 'fallback',
       filter: (data): data is { id: string; open?: boolean } => typeof data.id === 'string',
       component: ({ data }) => <SmallPresenceLive id={data.id} open={data.open} />,
     }),
@@ -185,7 +186,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: `${SPACE_PLUGIN}/navbar-presence`,
       role: 'navbar-end',
-      position: 'hoist',
+      disposition: 'hoist',
       filter: (data): data is { subject: Space | ReactiveEchoObject<any> } =>
         isSpace(data.subject) || isEchoObject(data.subject),
       component: ({ data }) => {
@@ -196,7 +197,12 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
             : undefined
           : data.subject;
 
-        return object ? <SpacePresence object={object} /> : null;
+        return space && object ? (
+          <>
+            <SpacePresence object={object} />
+            {space.properties[COMPOSER_SPACE_LOCK] ? null : <ShareSpaceButton space={space} />}
+          </>
+        ) : null;
       },
     }),
     createSurface({
@@ -207,10 +213,12 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     }),
     createSurface({
       id: `${SPACE_PLUGIN}/settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<SpaceSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === SPACE_PLUGIN,
-      component: ({ data: { subject } }) => <SpacePluginSettings settings={subject.value} />,
+      role: 'settings',
+      filter: (data): data is any => data.subject === SPACE_PLUGIN,
+      component: () => {
+        const settings = useCapability(Capabilities.SettingsStore).getStore<SpaceSettingsProps>(SPACE_PLUGIN)!.value;
+        return <SpacePluginSettings settings={settings} />;
+      },
     }),
     createSurface({
       id: `${SPACE_PLUGIN}/menu-footer`,

package/src/capabilities/spaces-ready.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, createIntent, type PluginsContext, Capabilities, LayoutAction } from '@dxos/app-framework';
+import { contributes, createIntent, openIds, type PluginsContext, Capabilities } from '@dxos/app-framework';
 import { EventSubscriptions } from '@dxos/async';
 import { Expando } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
@@ -10,7 +10,6 @@ import { create } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { ClientCapabilities } from '@dxos/plugin-client';
-import { DeckCapabilities } from '@dxos/plugin-deck';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { PublicKey } from '@dxos/react-client';
 import { Filter, FQ_ID_LENGTH, parseFullyQualifiedId, SpaceState } from '@dxos/react-client/echo';
@@ -30,7 +29,7 @@ export default async (context: PluginsContext) => {
   const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
   const { graph } = context.requestCapability(Capabilities.AppGraph);
   const layout = context.requestCapability(Capabilities.Layout);
-  const deck = context.requestCapability(DeckCapabilities.DeckState);
+  const location = context.requestCapability(Capabilities.Location);
   const attention = context.requestCapability(AttentionCapabilities.Attention);
   const state = context.requestCapability(SpaceCapabilities.MutableState);
   const client = context.requestCapability(ClientCapabilities.Client);
@@ -38,10 +37,6 @@ export default async (context: PluginsContext) => {
   const defaultSpace = client.spaces.default;
   await defaultSpace.waitUntilReady();
 
-  if (deck.activeDeck === 'default') {
-    await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: defaultSpace.id }));
-  }
-
   // Initialize space sharing lock in default space.
   if (typeof defaultSpace.properties[COMPOSER_SPACE_LOCK] !== 'boolean') {
     defaultSpace.properties[COMPOSER_SPACE_LOCK] = true;
@@ -59,18 +54,21 @@ export default async (context: PluginsContext) => {
   // Await missing objects.
   subscriptions.add(
     scheduledEffect(
-      () => ({ active: layout.active }),
-      ({ active }) => {
-        if (active.length !== 1) {
+      () => ({
+        layoutMode: layout.layoutMode,
+        soloPart: location.active.solo?.[0],
+      }),
+      ({ layoutMode, soloPart }) => {
+        if (layoutMode !== 'solo' || !soloPart) {
           return;
         }
 
-        const node = graph.findNode(active[0]);
-        if (!node && active[0].length === FQ_ID_LENGTH) {
+        const node = graph.findNode(soloPart.id);
+        if (!node && soloPart.id.length === FQ_ID_LENGTH) {
           const timeout = setTimeout(async () => {
-            const node = graph.findNode(active[0]);
+            const node = graph.findNode(soloPart.id);
             if (!node) {
-              await dispatch(createIntent(SpaceAction.WaitForObject, { id: active[0] }));
+              await dispatch(createIntent(SpaceAction.WaitForObject, { id: soloPart.id }));
             }
           }, WAIT_FOR_OBJECT_TIMEOUT);
 
@@ -104,14 +102,17 @@ export default async (context: PluginsContext) => {
   // Broadcast active node to other peers in the space.
   subscriptions.add(
     scheduledEffect(
-      () => ({ current: attention.current, active: layout.active, inactive: layout.inactive }),
-      ({ current, active, inactive }) => {
+      () => ({
+        open: openIds(location.active, layout.layoutMode === 'solo' ? ['solo'] : ['main']),
+        closed: [...location.closed],
+      }),
+      ({ open, closed }) => {
         const send = () => {
           const spaces = client.spaces.get();
           const identity = client.halo.identity.get();
-          if (identity) {
+          if (identity && location.active) {
             // Group parts by space for efficient messaging.
-            const idsBySpace = reduceGroupBy(active, (id) => {
+            const idsBySpace = reduceGroupBy(open, (id) => {
               try {
                 const [spaceId] = parseFullyQualifiedId(id);
                 return spaceId;
@@ -120,7 +121,7 @@ export default async (context: PluginsContext) => {
               }
             });
 
-            const removedBySpace = reduceGroupBy(inactive, (id) => {
+            const removedBySpace = reduceGroupBy(closed, (id) => {
               try {
                 const [spaceId] = parseFullyQualifiedId(id);
                 return spaceId;
@@ -146,7 +147,7 @@ export default async (context: PluginsContext) => {
               void space
                 .postMessage('viewing', {
                   identityKey: identity.identityKey.toHex(),
-                  attended: current,
+                  attended: attention.current ? [...attention.current] : [],
                   added,
                   removed,
                 })

package/src/components/AwaitingObject.tsx

@@ -5,7 +5,7 @@
 import { CheckCircle, CircleDashed, CircleNotch } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher, useLayout } from '@dxos/app-framework';
+import { NavigationAction, useIntentDispatcher, createIntent, useCapability, Capabilities } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Filter, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
 import { Button, Toast, useTranslation } from '@dxos/react-ui';
@@ -23,7 +23,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   const [found, setFound] = useState(false);
   const { t } = useTranslation(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const layout = useLayout();
+  const location = useCapability(Capabilities.Location);
 
   const client = useClient();
   const objects = useQuery(client.spaces, Filter.all());
@@ -44,11 +44,11 @@ export const AwaitingObject = ({ id }: { id: string }) => {
     if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
       setFound(true);
 
-      if (layout.active.includes(id)) {
+      if (location.active.solo?.[0].id === id) {
         setOpen(false);
       }
     }
-  }, [id, objects, layout]);
+  }, [id, objects, location]);
 
   const handleClose = useCallback(
     async () => dispatch(createIntent(SpaceAction.WaitForObject, { id: undefined })),
@@ -56,7 +56,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   );
 
   const handleNavigate = useCallback(() => {
-    void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [id] }));
+    void dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [id] } }));
     void handleClose();
   }, [id, handleClose, dispatch]);
 

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -5,7 +5,7 @@
 import { pipe } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { chain, createIntent, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import {
   getSpace,
@@ -71,7 +71,7 @@ export const CreateObjectDialog = ({
         const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object });
         const shouldNavigate = _shouldNavigate ?? (() => true);
         if (shouldNavigate(object)) {
-          await dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
+          await dispatch(pipe(addObjectIntent, chain(NavigationAction.Open, {})));
         } else {
           await dispatch(addObjectIntent);
         }
@@ -83,7 +83,7 @@ export const CreateObjectDialog = ({
   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'>
+    <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] 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.Close asChild>
@@ -92,18 +92,18 @@ export const CreateObjectDialog = ({
           </Button>
         </Dialog.Close>
       </div>
-
-      <CreateObjectPanel
-        classNames='p-4'
-        schemas={schemas}
-        spaces={spaces}
-        target={target}
-        typename={typename}
-        name={name}
-        defaultSpaceId={client.spaces.default.id}
-        resolve={resolve}
-        onCreateObject={handleCreateObject}
-      />
+      <div className='p-4'>
+        <CreateObjectPanel
+          schemas={schemas}
+          spaces={spaces}
+          target={target}
+          typename={typename}
+          name={name}
+          defaultSpaceId={client.spaces.default.id}
+          resolve={resolve}
+          onCreateObject={handleCreateObject}
+        />
+      </div>
     </Dialog.Content>
   );
 };

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -5,18 +5,32 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
-import { type TypedObject, getObjectAnnotation, type ObjectAnnotation, S } from '@dxos/echo-schema';
-import { type SpaceId, type Space } from '@dxos/react-client/echo';
-import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Form, type InputProps } from '@dxos/react-ui-form';
+import { type TypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
+import { type SpaceId, type Space, isSpace } from '@dxos/react-client/echo';
+import { Icon, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form, InputHeader, type InputProps } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
-import { mx } from '@dxos/react-ui-theme';
 import { nonNullable, type MaybePromise } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../../meta';
 import { type CollectionType } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
+export type CreateObjectPanelProps = {
+  schemas: TypedObject[];
+  spaces: Space[];
+  typename?: string;
+  target?: Space | CollectionType;
+  name?: string;
+  defaultSpaceId?: SpaceId;
+  resolve?: (typename: string) => Record<string, any>;
+  onCreateObject?: (params: {
+    schema: TypedObject;
+    target: Space | CollectionType;
+    data: Record<string, any>;
+  }) => MaybePromise<void>;
+};
+
 // TODO(ZaymonFC): Move this if you find yourself needing it elsewhere.
 /**
  * Creates a surface input component based on plugin context.
@@ -27,7 +41,7 @@ const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
   const pluginManager = usePluginManager();
 
   return useCallback(
-    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps }) => {
+    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps<any> }) => {
       const composedData = { prop, schema, ...baseData };
 
       if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
@@ -40,23 +54,7 @@ const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
   );
 };
 
-export type CreateObjectPanelProps = ThemedClassName<{
-  schemas: TypedObject[];
-  spaces: Space[];
-  typename?: string;
-  target?: Space | CollectionType;
-  name?: string;
-  defaultSpaceId?: SpaceId;
-  resolve?: (typename: string) => Record<string, any>;
-  onCreateObject?: (params: {
-    schema: TypedObject;
-    target: Space | CollectionType;
-    data: Record<string, any>;
-  }) => MaybePromise<void>;
-}>;
-
 export const CreateObjectPanel = ({
-  classNames,
   schemas,
   spaces,
   typename: initialTypename,
@@ -70,14 +68,10 @@ export const CreateObjectPanel = ({
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
   const schema = schemas.find((schema) => getObjectAnnotation(schema)?.typename === typename);
-  const options: ObjectAnnotation[] = schemas
-    .map(getObjectAnnotation)
-    .filter(nonNullable)
-    .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 options = schemas.map(getObjectAnnotation).filter(nonNullable);
+
+  const handleClearSchema = useCallback(() => setTypename(undefined), []);
+  const handleClearTarget = useCallback(() => setTarget(undefined), []);
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
@@ -96,89 +90,8 @@ export const CreateObjectPanel = ({
     return resolve?.(typename);
   }, [resolve, typename]);
 
-  const inputSurfaceLookup = useInputSurfaceLookup({ target });
-
-  const form = useMemo(() => {
-    // TODO(ZaymonFC): Move this default object creation schema somewhere?
-    const schema = (metadata?.creationSchema ?? S.Struct({ name: S.optional(S.String) })) as S.Schema<any>;
-
-    return (
-      <Form
-        classNames='!p-0'
-        autoFocus
-        values={{ name: initialName }}
-        schema={schema}
-        testId='create-object-form'
-        onSave={handleCreateObject}
-        lookupComponent={inputSurfaceLookup}
-      />
-    );
-  }, [initialName, handleCreateObject, metadata]);
-
-  // 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)}>
-      {!schema ? (
-        <SelectSchema options={options} resolve={resolve} onChange={setTypename} />
-      ) : !target ? (
-        <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={setTarget} />
-      ) : (
-        form
-      )}
-    </div>
-  );
-};
-
-const SelectSpace = ({
-  spaces,
-  defaultSpaceId,
-  onChange,
-}: { 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.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'>
-        {spaces
-          .sort((a, b) => {
-            const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
-            const bName = toLocalizedString(getSpaceDisplayName(b, { personal: b.id === defaultSpaceId }), t);
-            return aName.localeCompare(bName);
-          })
-          .map((space) => (
-            <SearchList.Item
-              key={space.id}
-              value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              onSelect={() => onChange(space)}
-              classNames='flex items-center gap-2'
-            >
-              <span className='grow truncate'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              </span>
-            </SearchList.Item>
-          ))}
-      </SearchList.Content>
-    </SearchList.Root>
-  );
-};
-
-const SelectSchema = ({
-  options,
-  resolve,
-  onChange,
-}: {
-  options: ObjectAnnotation[];
-  onChange: (type: string) => void;
-} & Pick<CreateObjectPanelProps, 'resolve'>) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-
-  return (
+  // TODO(wittjosiah): All of these inputs should be rolled into a `Form` once it supports the necessary variants.
+  const schemaInput = (
     <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
@@ -191,7 +104,7 @@ const SelectSchema = ({
           <SearchList.Item
             key={option.typename}
             value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            onSelect={() => onChange(option.typename)}
+            onSelect={() => setTypename(option.typename)}
             classNames='flex items-center gap-2'
           >
             <span className='flex gap-2 items-center grow truncate'>
@@ -203,4 +116,91 @@ const SelectSchema = ({
       </SearchList.Content>
     </SearchList.Root>
   );
+
+  const spaceInput = (
+    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden'>
+      <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'>
+        {spaces.map((space) => (
+          <SearchList.Item
+            key={space.id}
+            value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            onSelect={() => setTarget(space)}
+            classNames='flex items-center gap-2'
+          >
+            <span className='grow truncate'>
+              {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            </span>
+          </SearchList.Item>
+        ))}
+      </SearchList.Content>
+    </SearchList.Root>
+  );
+
+  const inputSurfaceLookup = useInputSurfaceLookup({ target });
+
+  const form = useMemo(() => {
+    // TODO(ZaymonFC): Move this default object creation schema somewhere?
+    const schema = (metadata?.creationSchema ?? S.Struct({ name: S.optional(S.String) })) as S.Schema<any>;
+
+    return (
+      <Form
+        autoFocus
+        values={{ name: initialName }}
+        schema={schema}
+        testId='create-object-form'
+        onSave={handleCreateObject}
+        lookupComponent={inputSurfaceLookup}
+      />
+    );
+  }, [initialName, handleCreateObject, metadata]);
+
+  return (
+    <div role='form' className='flex flex-col gap-2'>
+      {target && (
+        <div role='none'>
+          <Input.Root>
+            <InputHeader>
+              <Input.Label>
+                {t(isSpace(target) ? 'creating in space label' : 'creating in collection label')}
+              </Input.Label>
+            </InputHeader>
+            <div role='none' className='flex gap-2'>
+              <Input.TextInput
+                disabled
+                value={
+                  isSpace(target)
+                    ? toLocalizedString(getSpaceDisplayName(target, { personal: target.id === defaultSpaceId }), t)
+                    : target.name || t('unnamed collection label')
+                }
+              />
+              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearTarget} />
+            </div>
+          </Input.Root>
+        </div>
+      )}
+      {schema && (
+        <div role='none'>
+          <Input.Root>
+            <InputHeader>
+              <Input.Label>{t('creating object type label')}</Input.Label>
+            </InputHeader>
+            <div role='none' className='flex gap-2'>
+              <Input.TextInput
+                disabled
+                value={t('typename label', { ns: schema.typename, defaultValue: schema.typename })}
+              />
+              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearSchema} />
+            </div>
+          </Input.Root>
+        </div>
+      )}
+      {!schema ? schemaInput : !target ? spaceInput : form}
+    </div>
+  );
 };