@dxos/plugin-space 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,31 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Function from 'effect/Function';
 import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
-import { LayoutAction, chain, createIntent } from '@dxos/app-framework';
-import { useCapabilities, useIntentDispatcher } from '@dxos/app-framework/react';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space, SpaceState } from '@dxos/react-client/echo';
 import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
-import {
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  Form,
-  type FormFieldMap,
-} from '@dxos/react-ui-form';
+import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { SpaceCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
+import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
 
 const SpaceFormSchema = SpaceForm.pipe(
   Schema.extend(
@@ -41,179 +32,171 @@ export type SpaceSettingsContainerProps = {
 };
 
 // TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = forwardRef<HTMLDivElement, SpaceSettingsContainerProps>(
-  ({ space }, forwardedRef) => {
-    const { t } = useTranslation(meta.id);
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
-    const client = useClient();
-    const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
-    const [edgeReplication, setEdgeReplication] = useState(
-      space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
-    );
-    const toggleEdgeReplication = useCallback(
-      async (next: boolean) => {
-        setEdgeReplication(next);
-        await space?.internal
-          .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
-          .catch((err: unknown) => {
-            log.catch(err);
-            setEdgeReplication(!next);
-          });
-      },
-      [space],
-    );
+export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
+  const [edgeReplication, setEdgeReplication] = useState(
+    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
+  );
+  const toggleEdgeReplication = useCallback(
+    async (next: boolean) => {
+      setEdgeReplication(next);
+      await space?.internal
+        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
+        .catch((err: unknown) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
 
-    const handleSave = useCallback(
-      (properties: Schema.Schema.Type<typeof SpaceFormSchema>) => {
-        void toggleEdgeReplication(properties.edgeReplication ?? false);
-        if (properties.name !== space.properties.name) {
-          space.properties.name = properties.name;
-        }
-        if (properties.icon !== space.properties.icon) {
-          space.properties.icon = properties.icon;
-        }
-        if (properties.hue !== space.properties.hue) {
-          space.properties.hue = properties.hue;
-        }
-        if (properties.archived && !archived) {
-          void dispatch(
-            Function.pipe(
-              createIntent(SpaceAction.Close, { space }),
-              chain(LayoutAction.SwitchWorkspace, {
-                part: 'workspace',
-                subject: client.spaces.default.id,
-              }),
-            ),
-          );
-        } else if (!properties.archived && archived) {
-          void dispatch(createIntent(SpaceAction.Open, { space }));
-        }
-      },
-      [space, toggleEdgeReplication, archived],
-    );
+  const handleValuesChanged = useCallback(
+    (newValues: Partial<Schema.Schema.Type<typeof SpaceFormSchema>>, meta: { changed?: Record<string, boolean> }) => {
+      const changed = meta.changed ?? {};
+      if (changed['edgeReplication']) {
+        void toggleEdgeReplication(newValues.edgeReplication ?? false);
+      }
 
-    const values = useMemo(
-      () => ({
-        name: space.properties.name,
-        icon: space.properties.icon,
-        hue: space.properties.hue,
-        edgeReplication,
-        archived,
-      }),
-      [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
-    );
+      if (changed['name'] || changed['icon'] || changed['hue']) {
+        Obj.change(space.properties, (p) => {
+          if (changed['name'] && newValues.name !== undefined) {
+            p.name = newValues.name;
+          }
+          if (changed['icon']) {
+            p.icon = newValues.icon;
+          }
+          if (changed['hue']) {
+            p.hue = newValues.hue;
+          }
+        });
+      }
 
-    const fieldMap = useMemo<FormFieldMap>(
-      () => ({
-        name: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback(
-            ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-            [onValueChange, type],
-          );
-          return (
-            <ControlItemInput title={label} description={t('display name description')}>
-              <Input.TextInput
-                value={getValue()}
-                onChange={handleChange}
-                placeholder={t('display name input placeholder')}
-                classNames='min-is-64'
-              />
-            </ControlItemInput>
-          );
-        },
-        icon: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
-          const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-          return (
-            <ControlItem title={label} description={t('icon description')}>
-              <IconPicker
-                value={getValue()}
-                onChange={handleChange}
-                onReset={handleReset}
-                classNames='justify-self-end'
-              />
-            </ControlItem>
-          );
-        },
-        hue: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-          const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-          return (
-            <ControlItem title={label} description={t('hue description')}>
-              <HuePicker
-                value={getValue()}
-                onChange={handleChange}
-                onReset={handleReset}
-                classNames='justify-self-end'
-              />
-            </ControlItem>
-          );
-        },
-        edgeReplication: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
-          return (
-            <ControlItemInput title={label} description={t('edge replication description')}>
-              <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-            </ControlItemInput>
-          );
-        },
-        archived: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-          return (
-            <ControlItemInput title={label} description={t('archive space description')}>
-              <Button
-                disabled={space === client.spaces.default}
-                variant={getValue() ? 'default' : 'destructive'}
-                onClick={handleChange}
-              >
-                {getValue() ? t('unarchive space label') : t('archive space label')}
-              </Button>
-            </ControlItemInput>
-          );
-        },
-      }),
-      [t, space],
-    );
+      if (changed['archived']) {
+        if (newValues.archived && !archived) {
+          void invokePromise(SpaceOperation.Close, { space });
+          void invokePromise(LayoutOperation.SwitchWorkspace, {
+            subject: client.spaces.default.id,
+          });
+        } else if (!newValues.archived && archived) {
+          void invokePromise(SpaceOperation.Open, { space });
+        }
+      }
+    },
+    [space, client, archived, invokePromise, toggleEdgeReplication],
+  );
 
-    const download = useFileDownload();
-    const handleBackup = useCallback(async () => {
-      const archive = await space.internal.export();
-      download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
-    }, [space, download]);
+  const values = useMemo(
+    () => ({
+      name: space.properties.name,
+      icon: space.properties.icon,
+      hue: space.properties.hue,
+      edgeReplication,
+      archived,
+    }),
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
+  );
 
-    const repairs = useCapabilities(SpaceCapabilities.Repair);
-    const handleRepair = useCallback(async () => {
-      await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
-    }, [client, space, repairs]);
+  const fieldMap = useMemo<FormFieldMap>(
+    () => ({
+      name: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(
+          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+          [onValueChange, type],
+        );
+        return (
+          <Settings.ItemInput title={label} description={t('display name description')}>
+            <Input.TextInput
+              value={getValue()}
+              onChange={handleChange}
+              placeholder={t('display name input placeholder')}
+              classNames='min-is-64'
+            />
+          </Settings.ItemInput>
+        );
+      },
+      icon: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <Settings.Item title={label} description={t('icon description')}>
+            <IconPicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleReset}
+              classNames='justify-self-end'
+            />
+          </Settings.Item>
+        );
+      },
+      hue: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <Settings.Item title={label} description={t('hue description')}>
+            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
+          </Settings.Item>
+        );
+      },
+      edgeReplication: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
+        return (
+          <Settings.ItemInput title={label} description={t('edge replication description')}>
+            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+          </Settings.ItemInput>
+        );
+      },
+      archived: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
+        return (
+          <Settings.ItemInput title={label} description={t('archive space description')}>
+            <Button
+              disabled={space === client.spaces.default}
+              variant={getValue() ? 'default' : 'destructive'}
+              onClick={handleChange}
+            >
+              {getValue() ? t('unarchive space label') : t('archive space label')}
+            </Button>
+          </Settings.ItemInput>
+        );
+      },
+    }),
+    [t, space, client],
+  );
 
-    return (
-      <StackItem.Content scrollable ref={forwardedRef}>
-        <ControlPage>
-          <ControlSection
-            title={t('space properties settings verbose label')}
-            description={t('space properties settings description', {
-              ns: meta.id,
-            })}
-          >
-            <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} autoSave onSave={handleSave}>
-              <Form.FieldSet />
-            </Form.Root>
-          </ControlSection>
+  const download = useFileDownload();
+  const handleBackup = useCallback(async () => {
+    const archive = await space.internal.export();
+    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
+  }, [space, download]);
 
-          <ControlSection title={t('space controls title')} description={t('space controls description')}>
-            <div role='none' className='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
-              <ControlItemInput title={t('backup space title')} description={t('backup space description')}>
-                <Button onClick={handleBackup}>{t('download backup label')}</Button>
-              </ControlItemInput>
-              <ControlItemInput title={t('repair space title')} description={t('repair space description')}>
-                <Button onClick={handleRepair}>{t('repair space label')}</Button>
-              </ControlItemInput>
-            </div>
-          </ControlSection>
-        </ControlPage>
-      </StackItem.Content>
-    );
-  },
-);
+  const repairs = useCapabilities(SpaceCapabilities.Repair);
+  const handleRepair = useCallback(async () => {
+    await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
+  }, [client, space, repairs]);
+
+  return (
+    <Settings.Root>
+      <Settings.Section
+        title={t('space properties settings verbose label')}
+        description={t('space properties settings description', { ns: meta.id })}
+      >
+        <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} onValuesChanged={handleValuesChanged}>
+          <Form.FieldSet classNames='space-y-trimMd' />
+        </Form.Root>
+      </Settings.Section>
+      <Settings.Section title={t('space controls title')} description={t('space controls description')}>
+        <Settings.ItemInput title={t('backup space title')} description={t('backup space description')}>
+          <Button onClick={handleBackup}>{t('download backup label')}</Button>
+        </Settings.ItemInput>
+        <Settings.ItemInput title={t('repair space title')} description={t('repair space description')}>
+          <Button onClick={handleRepair}>{t('repair space label')}</Button>
+        </Settings.ItemInput>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};
 
 SpaceSettingsContainer.displayName = 'SpaceSettingsContainer';

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -5,7 +5,7 @@
 import * as Option from 'effect/Option';
 import React, { useEffect, useState } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';

package/src/components/SyncStatus/SyncStatus.stories.tsx

@@ -14,7 +14,7 @@ import { SyncStatusIndicator } from './SyncStatus';
 const meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'centered',
     translations,

package/src/components/SyncStatus/SyncStatus.tsx

@@ -11,7 +11,7 @@ import { useClient } from '@dxos/react-client';
 import { useStream } from '@dxos/react-client/devtools';
 import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
 import { Icon, Popover, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { Unit, type UnitFormat } from '@dxos/util';
 
 import { meta } from '../../meta';

package/src/components/SyncStatus/save-tracker.ts

@@ -46,10 +46,10 @@ const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') =>
 
     let hasUnsavedChanges = false;
     let lastFlushPromise: Promise<void> | undefined;
-    space.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+    space.internal.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
       hasUnsavedChanges = unsavedDocuments.length > 0;
     });
-    space.db.saveStateChanged.debounce(500).on(ctx, () => {
+    space.internal.db.saveStateChanged.debounce(500).on(ctx, () => {
       if (hasUnsavedChanges) {
         lastFlushPromise = undefined;
         cb('saving');

package/src/components/ViewEditor.tsx

@@ -5,27 +5,27 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/internal';
 import { useClient } from '@dxos/react-client';
 import { getSpace, useQuery } from '@dxos/react-client/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
 import { View } from '@dxos/schema';
 
-import { resolveSchemaWithClientAndSpace } from '../helpers';
+import { resolveSchemaWithRegistry } from '../helpers';
 import { useTypeOptions } from '../hooks';
-import { SpaceAction } from '../types';
+import { SpaceOperation } from '../types';
 
 export type ViewEditorProps = { view: View.View };
 
 export const ViewEditor = ({ view }: ViewEditorProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const space = getSpace(view);
   const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
-  const tags = useQuery(space, Filter.type(Tag.Tag));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
   const types = useTypeOptions({
     space,
     annotation: {
@@ -40,7 +40,7 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
       return;
     }
 
-    const foundSchema = await resolveSchemaWithClientAndSpace(space, view.query.ast);
+    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
     if (foundSchema && foundSchema !== schema) {
       setSchema(() => foundSchema);
     }
@@ -54,8 +54,10 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
 
       const queue = target && DXN.tryParse(target) ? target : undefined;
       const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-      view.query.ast = query.ast;
-      const newSchema = await resolveSchemaWithClientAndSpace(space, query.ast);
+      Obj.change(view, (v) => {
+        v.query.ast = query.ast as Mutable<typeof query.ast>;
+      });
+      const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
       if (!newSchema) {
         return;
       }
@@ -64,7 +66,9 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
         query,
         jsonSchema: Type.toJsonSchema(newSchema),
       });
-      view.projection = Obj.getSnapshot(newView).projection;
+      Obj.change(view, (v) => {
+        v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+      });
 
       setSchema(() => newSchema);
     },
@@ -73,9 +77,9 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
 
   const handleDelete = useCallback(
     (fieldId: string) => {
-      void dispatch(createIntent(SpaceAction.DeleteField, { view, fieldId }));
+      void invokePromise(SpaceOperation.DeleteField, { view, fieldId });
     },
-    [dispatch, view],
+    [invokePromise, view],
   );
 
   if (!space || !schema) {

package/src/constants.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
+export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
+export const OBJECT_RENAME_POPOVER = `${meta.id}/ObjectRenamePopover`;
+export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;

package/src/helpers/query.ts

@@ -10,13 +10,14 @@ import * as Option from 'effect/Option';
 import type * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 
-import { DXN, Filter, Query, type QueryAST } from '@dxos/echo';
+import { DXN, Filter, Query, type QueryAST, type SchemaRegistry } from '@dxos/echo';
 import {
   ReferenceAnnotationId,
   type ReferenceAnnotationValue,
   getTypeAnnotation,
   unwrapOptional,
 } from '@dxos/echo/internal';
+import { runAndForwardErrors } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 import { Person } from '@dxos/types';
@@ -34,21 +35,21 @@ export const evalQuery = (queryString: string): Query.Any => {
   }
 };
 
-export const resolveSchemaWithClientAndSpace = (space: Space, query: QueryAST.Query) => {
+export const resolveSchemaWithRegistry = (registry: SchemaRegistry.SchemaRegistry, query: QueryAST.Query) => {
   const resolve = Effect.fn(function* (dxn: string) {
     const typename = DXN.parse(dxn).asTypeDXN()?.type;
     if (!typename) {
       return Option.none();
     }
 
-    const query = space.db.schemaRegistry.query({ typename, location: ['database', 'runtime'] });
+    const query = registry.query({ typename, location: ['database', 'runtime'] });
     const schemas = yield* Effect.promise(() => query.run());
     return Array.head(schemas);
   });
 
   return resolveSchema(query, resolve).pipe(
     Effect.map((schema) => Option.getOrUndefined(schema)),
-    Effect.runPromise,
+    runAndForwardErrors,
   );
 };
 
@@ -144,9 +145,9 @@ export const getQueryTarget = (query: QueryAST.Query, space?: Space) => {
         Option.flatMap((queues) => Array.head(queues)),
         Option.flatMap((queueDxn) => Option.fromNullable(DXN.tryParse(queueDxn))),
         Option.flatMap((queueDxn) => Option.fromNullable(space?.queues.get(queueDxn))),
-        Option.getOrElse(() => space),
+        Option.getOrElse(() => space?.db),
       );
     }),
-    Match.orElse(() => space),
+    Match.orElse(() => space?.db),
   );
 };

package/src/hooks/useActiveSpace.ts

@@ -2,14 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, type PluginContext } from '@dxos/app-framework';
-import { useLayout } from '@dxos/app-framework/react';
+import { Capabilities, type CapabilityManager } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { parseId, useSpace } from '@dxos/react-client/echo';
 
-export const getActiveSpace = (context: PluginContext) => {
-  const client = context.getCapability(ClientCapabilities.Client);
-  const layout = context.getCapability(Capabilities.Layout);
+export const getActiveSpace = (capabilities: CapabilityManager.CapabilityManager) => {
+  const client = capabilities.get(ClientCapabilities.Client);
+  const registry = capabilities.get(Capabilities.AtomRegistry);
+  const layoutAtom = capabilities.get(AppCapabilities.Layout);
+  const layout = registry.get(layoutAtom);
   const { spaceId } = parseId(layout.workspace);
   return spaceId ? client.spaces.get(spaceId) : undefined;
 };

package/src/hooks/useInputSurfaceLookup.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework/react';
+import { Surface, usePluginManager } from '@dxos/app-framework/ui';
 import { type FormFieldProvider } from '@dxos/react-ui-form';
 
 /**
@@ -18,8 +18,8 @@ export const useInputSurfaceLookup = (baseData?: Record<string, any>): FormField
   return useCallback<FormFieldProvider>(
     ({ schema, prop, fieldProps }) => {
       const data = { prop, schema, ...baseData };
-      if (isSurfaceAvailable(pluginManager.context, { role: 'form-input', data })) {
-        return <Surface role='form-input' data={data} {...fieldProps} />;
+      if (Surface.isAvailable(pluginManager.capabilities, { role: 'form-input', data })) {
+        return <Surface.Surface role='form-input' data={data} {...fieldProps} />;
       }
     },
     [pluginManager, baseData],

package/src/hooks/usePath.ts

@@ -5,7 +5,7 @@
 import * as Option from 'effect/Option';
 import { useEffect, useState } from 'react';
 
-import { type ReadableGraph } from '@dxos/plugin-graph';
+import { Graph } from '@dxos/plugin-graph';
 
 /**
  * React hook to get a path from the graph.
@@ -16,9 +16,9 @@ import { type ReadableGraph } from '@dxos/plugin-graph';
  * @returns Path if found, undefined otherwise.
  */
 // TODO(wittjosiah): Factor out.
-export const usePath = (graph: ReadableGraph, id?: string, timeout?: number): Option.Option<string[]> => {
+export const usePath = (graph: Graph.ReadableGraph, id?: string, timeout?: number): Option.Option<string[]> => {
   const [pathState, setPathState] = useState<Option.Option<string[]>>(
-    id ? graph.getPath({ target: id }) : Option.none(),
+    id ? Graph.getPath(graph, { target: id }) : Option.none(),
   );
 
   useEffect(() => {
@@ -33,7 +33,7 @@ export const usePath = (graph: ReadableGraph, id?: string, timeout?: number): Op
     // Set timeout did not seem to effectively not block the UI thread.
     const frame = requestAnimationFrame(async () => {
       try {
-        const path = await graph.waitForPath({ target: id }, { timeout });
+        const path = await Graph.waitForPath(graph, { target: id }, { timeout });
         if (path) {
           setPathState(Option.some(path));
         }

package/src/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { SpaceCapabilities } from './capabilities';
-export { SpaceEvents } from './events';
+export { SpaceCapabilities, SpaceEvents } from './types';
 
 export * from './components';
 export * from './helpers';