@dxos/plugin-space 0.7.5-main.9d26e3a → 0.7.5-main.9d2a38b

package/src/capabilities/spaces-ready.ts

@@ -0,0 +1,231 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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';
+import { create } from '@dxos/live-object';
+import { log } from '@dxos/log';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { ClientCapabilities } from '@dxos/plugin-client';
+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';
+import { ComplexMap, reduceGroupBy } from '@dxos/util';
+
+import { SpaceCapabilities } from './capabilities';
+import { SpaceAction } from '../types';
+import { COMPOSER_SPACE_LOCK, SHARED } from '../util';
+
+const ACTIVE_NODE_BROADCAST_INTERVAL = 30_000;
+const WAIT_FOR_OBJECT_TIMEOUT = 1000;
+
+export default async (context: PluginsContext) => {
+  const subscriptions = new EventSubscriptions();
+  const spaceSubscriptions = new EventSubscriptions();
+
+  const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+  const { graph } = context.requestCapability(Capabilities.AppGraph);
+  const layout = context.requestCapability(Capabilities.Layout);
+  const location = context.requestCapability(Capabilities.Location);
+  const attention = context.requestCapability(AttentionCapabilities.Attention);
+  const state = context.requestCapability(SpaceCapabilities.MutableState);
+  const client = context.requestCapability(ClientCapabilities.Client);
+
+  const defaultSpace = client.spaces.default;
+  await defaultSpace.waitUntilReady();
+
+  // Initialize space sharing lock in default space.
+  if (typeof defaultSpace.properties[COMPOSER_SPACE_LOCK] !== 'boolean') {
+    defaultSpace.properties[COMPOSER_SPACE_LOCK] = true;
+  }
+
+  const {
+    objects: [spacesOrder],
+  } = await defaultSpace.db.query(Filter.schema(Expando, { key: SHARED })).run();
+  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(create({ key: SHARED, order: [] }));
+  }
+
+  // Await missing objects.
+  subscriptions.add(
+    scheduledEffect(
+      () => ({
+        layoutMode: layout.layoutMode,
+        soloPart: location.active.solo?.[0],
+      }),
+      ({ layoutMode, soloPart }) => {
+        if (layoutMode !== 'solo' || !soloPart) {
+          return;
+        }
+
+        const node = graph.findNode(soloPart.id);
+        if (!node && soloPart.id.length === FQ_ID_LENGTH) {
+          const timeout = setTimeout(async () => {
+            const node = graph.findNode(soloPart.id);
+            if (!node) {
+              await dispatch(createIntent(SpaceAction.WaitForObject, { id: soloPart.id }));
+            }
+          }, WAIT_FOR_OBJECT_TIMEOUT);
+
+          return () => clearTimeout(timeout);
+        }
+      },
+    ),
+  );
+
+  // Cache space names.
+  subscriptions.add(
+    client.spaces.subscribe(async (spaces) => {
+      // TODO(wittjosiah): Remove. This is a hack to be able to migrate the default space properties.
+      if (defaultSpace.state.get() === SpaceState.SPACE_REQUIRES_MIGRATION) {
+        await defaultSpace.internal.migrate();
+      }
+
+      spaces
+        .filter((space) => space.state.get() === SpaceState.SPACE_READY)
+        .forEach((space) => {
+          subscriptions.add(
+            scheduledEffect(
+              () => ({ name: space.properties.name }),
+              ({ name }) => (state.spaceNames[space.id] = name),
+            ),
+          );
+        });
+    }).unsubscribe,
+  );
+
+  // Broadcast active node to other peers in the space.
+  subscriptions.add(
+    scheduledEffect(
+      () => ({
+        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 && location.active) {
+            // Group parts by space for efficient messaging.
+            const idsBySpace = reduceGroupBy(open, (id) => {
+              try {
+                const [spaceId] = parseFullyQualifiedId(id);
+                return spaceId;
+              } catch {
+                return null;
+              }
+            });
+
+            const removedBySpace = reduceGroupBy(closed, (id) => {
+              try {
+                const [spaceId] = parseFullyQualifiedId(id);
+                return spaceId;
+              } catch {
+                return null;
+              }
+            });
+
+            // NOTE: Ensure all spaces are included so that we send the correct `removed` object arrays.
+            for (const space of spaces) {
+              if (!idsBySpace.has(space.id)) {
+                idsBySpace.set(space.id, []);
+              }
+            }
+
+            for (const [spaceId, added] of idsBySpace) {
+              const removed = removedBySpace.get(spaceId) ?? [];
+              const space = spaces.find((space) => space.id === spaceId);
+              if (!space) {
+                continue;
+              }
+
+              void space
+                .postMessage('viewing', {
+                  identityKey: identity.identityKey.toHex(),
+                  attended: attention.current ? [...attention.current] : [],
+                  added,
+                  removed,
+                })
+                // TODO(burdon): This seems defensive; why would this fail? Backoff interval.
+                .catch((err) => {
+                  log.warn('Failed to broadcast active node for presence.', { err: err.message });
+                });
+            }
+          }
+        };
+
+        send();
+        // Send at interval to allow peers to expire entries if they become disconnected.
+        const interval = setInterval(() => send(), ACTIVE_NODE_BROADCAST_INTERVAL);
+        return () => clearInterval(interval);
+      },
+    ),
+  );
+
+  // Listen for active nodes from other peers in the space.
+  subscriptions.add(
+    client.spaces.subscribe((spaces) => {
+      spaceSubscriptions.clear();
+      spaces.forEach((space) => {
+        spaceSubscriptions.add(
+          space.listen('viewing', (message) => {
+            const { added, removed, attended } = message.payload;
+
+            const identityKey = PublicKey.safeFrom(message.payload.identityKey);
+            const currentIdentity = client.halo.identity.get();
+            if (
+              identityKey &&
+              !currentIdentity?.identityKey.equals(identityKey) &&
+              Array.isArray(added) &&
+              Array.isArray(removed)
+            ) {
+              added.forEach((id) => {
+                if (typeof id === 'string') {
+                  if (!(id in state.viewersByObject)) {
+                    state.viewersByObject[id] = new ComplexMap(PublicKey.hash);
+                  }
+                  state.viewersByObject[id]!.set(identityKey, {
+                    lastSeen: Date.now(),
+                    currentlyAttended: new Set(attended).has(id),
+                  });
+                  if (!state.viewersByIdentity.has(identityKey)) {
+                    state.viewersByIdentity.set(identityKey, new Set());
+                  }
+                  state.viewersByIdentity.get(identityKey)!.add(id);
+                }
+              });
+
+              removed.forEach((id) => {
+                if (typeof id === 'string') {
+                  state.viewersByObject[id]?.delete(identityKey);
+                  state.viewersByIdentity.get(identityKey)?.delete(id);
+                  // It’s okay for these to be empty sets/maps, reduces churn.
+                }
+              });
+            }
+          }),
+        );
+      });
+    }).unsubscribe,
+  );
+
+  // Enable edge replication for all spaces.
+  try {
+    await Promise.all(
+      client.spaces.get().map((space) => space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED)),
+    );
+    state.enabledEdgeReplication = true;
+  } catch (err) {
+    log.catch(err);
+  }
+
+  return contributes(Capabilities.Null, null, () => {
+    spaceSubscriptions.clear();
+    subscriptions.clear();
+  });
+};

package/src/capabilities/state.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { PublicKey } from '@dxos/keys';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { ComplexMap } from '@dxos/util';
+
+import { SpaceCapabilities } from './capabilities';
+import { SPACE_PLUGIN } from '../meta';
+import { type PluginState } from '../types';
+
+export default (context: PluginsContext) => {
+  const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
+    awaiting: undefined,
+    spaceNames: {},
+    viewersByObject: {},
+    // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
+    viewersByIdentity: new ComplexMap(PublicKey.hash),
+    sdkMigrationRunning: {},
+    navigableCollections: false,
+    enabledEdgeReplication: false,
+  });
+
+  state
+    .prop({ key: 'spaceNames', type: LocalStorageStore.json<Record<string, string>>() })
+    .prop({ key: 'enabledEdgeReplication', type: LocalStorageStore.bool() });
+
+  const manager = context.requestCapability(Capabilities.PluginManager);
+  const unsubscribe = effect(() => {
+    // TODO(wittjosiah): Find a way to make this capability-based.
+    const enabled = manager.enabled.includes('dxos.org/plugin/stack');
+    if (enabled !== state.values.navigableCollections) {
+      state.values.navigableCollections = enabled;
+    }
+  });
+
+  return contributes(SpaceCapabilities.State, state.values, () => {
+    unsubscribe();
+    state.close();
+  });
+};

package/src/components/AdvancedObjectSettings/AdvancedObjectSettings.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { type ForeignKey, ForeignKeySchema } from '@dxos/echo-schema';
+import { getMeta, type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { IconButton, useTranslation, Separator } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { ForeignKeys } from './ForeignKeys';
+import { SPACE_PLUGIN } from '../../meta';
+
+const initialValues = {
+  source: '',
+  id: '',
+};
+
+export type AdvancedObjectSettingsProps = {
+  object: ReactiveEchoObject<any>;
+};
+
+export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const [adding, setAdding] = useState(false);
+  const keys = getMeta(object).keys;
+
+  const handleNew = useCallback(() => setAdding(true), []);
+  const handleCancel = useCallback(() => setAdding(false), []);
+  const handleSave = useCallback(
+    (key: ForeignKey) => {
+      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
+      if (index === -1) {
+        keys.push(key);
+      }
+      setAdding(false);
+    },
+    [keys],
+  );
+  const handleDelete = useCallback(
+    (key: ForeignKey) => {
+      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
+      if (index !== -1) {
+        keys.splice(index, 1);
+      }
+    },
+    [keys],
+  );
+
+  // TODO(wittjosiah): This should be wrapped in an "Advanced" accordion.
+  return (
+    <>
+      <Separator />
+      <div className='p-2 flex flex-col gap-4'>
+        <h2>{t('advanced settings label')}</h2>
+        <div className='flex items-center'>
+          <h3 className='text-sm font-semibold'>{t('foreign keys')}</h3>
+          <div className='grow' />
+          <IconButton
+            classNames={adding && 'invisible'}
+            icon='ph--plus--regular'
+            label={t('add key')}
+            onClick={handleNew}
+          />
+        </div>
+        {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
+      </div>
+      {adding && <Form schema={ForeignKeySchema} values={initialValues} onSave={handleSave} onCancel={handleCancel} />}
+    </>
+  );
+};

package/src/components/AdvancedObjectSettings/ForeignKeys.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type ForeignKey } from '@dxos/echo-schema';
+import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../../meta';
+
+export type ForeignKeysProps = {
+  keys: ForeignKey[];
+  onDelete?: (key: ForeignKey) => void;
+};
+
+// TODO(wittjosiah): This is a clone of `TokenManager`. Consider a form variant for arrays of read-only objects.
+export const ForeignKeys = ({ keys, onDelete }: ForeignKeysProps) => {
+  return (
+    <List classNames='flex flex-col gap-2'>
+      {keys.map((key) => (
+        <KeyItem key={key.id} forignKey={key} onDelete={onDelete} />
+      ))}
+    </List>
+  );
+};
+
+type KeyItemProps = {
+  forignKey: ForeignKey;
+  onDelete?: (key: ForeignKey) => void;
+};
+
+const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  const handleDelete = useCallback(() => {
+    onDelete?.(forignKey);
+  }, [forignKey, onDelete]);
+
+  return (
+    <ListItem.Root classNames='px-2'>
+      <ListItem.Heading classNames='flex flex-col grow truncate'>
+        <div>{forignKey.source}</div>
+        <div className='text-description text-sm truncate'>{forignKey.id}</div>
+      </ListItem.Heading>
+      <ListItem.Endcap>
+        <IconButton iconOnly icon='ph--x--regular' variant='ghost' label={t('delete key')} onClick={handleDelete} />
+      </ListItem.Endcap>
+    </ListItem.Root>
+  );
+};

package/src/components/AdvancedObjectSettings/index.ts

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

package/src/components/AwaitingObject.tsx

@@ -5,13 +5,7 @@
 import { CheckCircle, CircleDashed, CircleNotch } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import {
-  useResolvePlugin,
-  parseNavigationPlugin,
-  NavigationAction,
-  useIntentDispatcher,
-  createIntent,
-} 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';
@@ -29,7 +23,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   const [found, setFound] = useState(false);
   const { t } = useTranslation(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+  const location = useCapability(Capabilities.Location);
 
   const client = useClient();
   const objects = useQuery(client.spaces, Filter.all());
@@ -50,11 +44,11 @@ export const AwaitingObject = ({ id }: { id: string }) => {
     if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
       setFound(true);
 
-      if (navigationPlugin?.provides.location.active.solo?.[0].id === id) {
+      if (location.active.solo?.[0].id === id) {
         setOpen(false);
       }
     }
-  }, [id, objects, navigationPlugin]);
+  }, [id, objects, location]);
 
   const handleClose = useCallback(
     async () => dispatch(createIntent(SpaceAction.WaitForObject, { id: undefined })),

package/src/components/{DefaultObjectSettings.tsx → BaseObjectSettings.tsx}

@@ -9,11 +9,11 @@ import { Input, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
-export type DefaultObjectSettingsProps = {
+export type BaseObjectSettingsProps = {
   object: ReactiveEchoObject<any>;
 };
 
-export const DefaultObjectSettings = ({ object }: DefaultObjectSettingsProps) => {
+export const BaseObjectSettings = ({ object }: BaseObjectSettingsProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   // TODO(burdon): Standardize forms.
   return (

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -5,7 +5,7 @@
 import { pipe } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { chain, createIntent, type MetadataResolver, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { chain, createIntent, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import {
   getSpace,
@@ -24,7 +24,7 @@ import { CollectionType, SpaceAction } from '../../types';
 export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
 export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'schemas' | 'target' | 'typename' | 'name'> & {
-  resolve?: MetadataResolver;
+  resolve?: (typename: string) => Record<string, any>;
   shouldNavigate?: (object: ReactiveObject<any>) => boolean;
 };
 
@@ -46,11 +46,11 @@ export const CreateObjectDialog = ({
     async ({
       schema,
       target: _target,
-      name,
+      data,
     }: {
       schema: TypedObject;
       target: CreateObjectPanelProps['target'];
-      name?: string;
+      data?: Record<string, any>;
     }) => {
       const target = isSpace(_target)
         ? (_target.properties[CollectionType.typename]?.target as CollectionType | undefined)
@@ -65,7 +65,7 @@ export const CreateObjectDialog = ({
       closeRef.current?.click();
 
       const space = isSpace(target) ? target : getSpace(target);
-      const result = await dispatch(createObjectIntent({ name, space }));
+      const result = await dispatch(createObjectIntent(data, { space }));
       const object = result.data?.object;
       if (isReactiveObject(object)) {
         const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object });

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { type MetadataResolver } from '@dxos/app-framework';
+import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
 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 } from '@dxos/react-ui-form';
+import { Form, InputHeader, type InputProps } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { nonNullable, type MaybePromise } from '@dxos/util';
 
@@ -23,14 +23,37 @@ export type CreateObjectPanelProps = {
   target?: Space | CollectionType;
   name?: string;
   defaultSpaceId?: SpaceId;
-  resolve?: MetadataResolver;
+  resolve?: (typename: string) => Record<string, any>;
   onCreateObject?: (params: {
     schema: TypedObject;
     target: Space | CollectionType;
-    name?: string;
+    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.
+ * @param baseData Additional data that will be merged with form data and passed to the surface.
+ * This allows providing more context to the surface than what's available from the form itself.
+ */
+const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
+  const pluginManager = usePluginManager();
+
+  return useCallback(
+    ({ 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 })) {
+        return undefined;
+      }
+
+      return <Surface role='form-input' data={composedData} {...inputProps} />;
+    },
+    [pluginManager, baseData],
+  );
+};
+
 export const CreateObjectPanel = ({
   schemas,
   spaces,
@@ -51,16 +74,22 @@ export const CreateObjectPanel = ({
   const handleClearTarget = useCallback(() => setTarget(undefined), []);
 
   const handleCreateObject = useCallback(
-    async ({ name }: { name?: string }) => {
+    async (props: Record<string, any>) => {
       if (!schema || !target) {
         return;
       }
-
-      await onCreateObject?.({ schema, target, name });
+      await onCreateObject?.({ schema, target, data: props });
     },
     [onCreateObject, schema, target],
   );
 
+  const metadata = useMemo(() => {
+    if (!typename) {
+      return;
+    }
+    return resolve?.(typename);
+  }, [resolve, typename]);
+
   // 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'>
@@ -113,15 +142,23 @@ export const CreateObjectPanel = ({
     </SearchList.Root>
   );
 
-  const form = (
-    <Form
-      autoFocus
-      values={{ name: initialName }}
-      schema={S.Struct({ name: S.optional(S.String) })}
-      testId='create-object-form'
-      onSave={handleCreateObject}
-    />
-  );
+  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'>

package/src/components/SpacePluginSettings.tsx

@@ -4,24 +4,19 @@
 
 import React from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../meta';
-import { SpaceAction, type SpaceSettingsProps } from '../types';
+import { type SpaceSettingsProps } from '../types';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   return (
     <>
       <DeprecatedFormInput label={t('show hidden spaces label')}>
-        <Input.Switch
-          checked={settings.showHidden}
-          onCheckedChange={(checked) => dispatch(createIntent(SpaceAction.ToggleHidden, { state: !!checked }))}
-        />
+        <Input.Switch checked={settings.showHidden} onCheckedChange={(checked) => (settings.showHidden = !!checked)} />
       </DeprecatedFormInput>
     </>
   );