@dxos/plugin-space 0.8.4-main.84f28bd → 0.8.4-main.9735255

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { useEffect, useState } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework';
+import { useAppGraph } from '@dxos/app-framework/react';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
@@ -14,14 +14,14 @@ import { Tooltip, useTranslation } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
 
 import { usePath } from '../../hooks';
-import { SPACE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
-const useEdgeStatus = (): EdgeStatus => {
-  const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
+const useEdgeStatus = (): EdgeStatus.ConnectionState => {
+  const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
   const client = useClient();
   useEffect(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
-      setStatus(status);
+      setStatus(status.state);
     });
   }, [client]);
 
@@ -29,7 +29,7 @@ const useEdgeStatus = (): EdgeStatus => {
 };
 
 export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const id = space.id;
   const { hasAttention, isAncestor, isRelated } = useAttention(id);
   const isAttended = hasAttention || isAncestor || isRelated;
@@ -43,7 +43,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const path = usePath(graph, startOfAttention);
   const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
-  const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);

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

@@ -2,28 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { SyncStatusIndicator } from './SyncStatus';
 import { translations } from '../../translations';
 
-const meta: Meta = {
+import { SyncStatusIndicator } from './SyncStatus';
+
+const meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
-  decorators: [withTheme],
+  decorators: [withTheme, withClientProvider({ createIdentity: true })],
   parameters: {
-    translations,
     layout: 'centered',
+    translations,
   },
-};
+} satisfies Meta<typeof SyncStatusIndicator>;
 
 export default meta;
 
-type Story = StoryObj<typeof SyncStatusIndicator>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/SyncStatus/SyncStatus.tsx

@@ -5,13 +5,19 @@
 import React, { useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
+import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
+import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { useClient } from '@dxos/react-client';
-import { getSyncSummary, type SpaceSyncStateMap, useSyncState } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
+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/ui-theme';
+import { Unit, type UnitFormat } from '@dxos/util';
+
+import { meta } from '../../meta';
 
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
-import { SPACE_PLUGIN } from '../../meta';
 
 const SYNC_STALLED_TIMEOUT = 5_000;
 
@@ -19,18 +25,13 @@ export const SyncStatus = () => {
   const client = useClient();
   const state = useSyncState();
   const [saved, setSaved] = useState(true);
-
-  useEffect(() => {
-    return createClientSaveTracker(client, (state) => {
-      setSaved(state === 'saved');
-    });
-  }, []);
+  useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);
 
   return <SyncStatusIndicator state={state} saved={saved} />;
 };
 
-export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: Boolean }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
+  const { t } = useTranslation(meta.id);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
@@ -52,7 +53,103 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   }, [offline, needsToUpload, needsToDownload]);
 
   const title = t(`${status} label`);
-  const icon = <Icon icon={getIcon(status)} size={4} classNames={classNames} />;
+  const icon = <Icon icon={getIcon(status)} classNames={classNames} />;
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content>
+          <EdgeConnectionPopover />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+const useEdgeStatus = (): EdgeStatus | undefined => {
+  const client = useClient();
+  const { status } = useStream(
+    () => client.services.services.EdgeAgentService!.queryEdgeStatus(),
+    {} as QueryEdgeStatusResponse,
+  );
+  return status;
+};
+
+const EdgeConnectionPopover = () => {
+  const status = useEdgeStatus();
+  const { t } = useTranslation(meta.id);
+
+  const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
+
+  return (
+    <div className='min-is-[240px] p-2'>
+      {/* Connection Status Header */}
+      <div className='flex items-center gap-2 mbe-2'>
+        <Icon
+          icon={isConnected ? 'ph--check-circle--regular' : 'ph--warning-circle--regular'}
+          classNames={mx(isConnected ? 'text-successText' : 'text-errorText animate-pulse')}
+        />
+        <span className='font-medium text-sm'>
+          {isConnected ? t('sync edge connected label') : t('sync edge disconnected label')}
+        </span>
+      </div>
+
+      {/* Connection Details */}
+      {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (
+        <div className='flex items-center gap-2 text-sm text-description'>
+          <Icon icon='ph--cloud-x--regular' />
+          <span>{t('sync no connection label')}</span>
+        </div>
+      )}
+
+      {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
+        <div className='space-y-2'>
+          {/* Latency */}
+          <div className='flex items-center justify-between text-sm'>
+            <div className='flex items-center gap-2 text-description'>
+              <Icon icon='ph--timer--regular' />
+              <span>{t('sync latency label')}</span>
+            </div>
+            <UnitValue value={status.rtt} format={Unit.Millisecond} />
+          </div>
+
+          {/* Upload Speed */}
+          <div className='flex items-center justify-between text-sm'>
+            <div className='flex items-center gap-2 text-description'>
+              <Icon icon='ph--arrow-up--regular' />
+              <span>{t('sync upload label')}</span>
+            </div>
+            <UnitValue value={status.rateBytesUp} format={Unit.Kilobyte} suffix='/s' />
+          </div>
+
+          {/* Download Speed */}
+          <div className='flex items-center justify-between text-sm'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--arrow-down--regular' />
+              <span>{t('sync download label')}</span>
+            </div>
+            <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
 
-  return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
+// TODO(burdon): Factor out.
+const UnitValue = ({ value: input, format, suffix }: { value: number; format: UnitFormat; suffix?: string }) => {
+  const { formattedValue, unit } = format(input);
+  return (
+    <span className='font-mono'>
+      {formattedValue}
+      <span className='mis-1 text-subdued'>
+        {unit.symbol}
+        {suffix}
+      </span>
+    </span>
+  );
 };

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/SyncStatus/status.ts

@@ -10,10 +10,10 @@ export const getStatus = ({
   needsToUpload,
   needsToDownload,
 }: {
-  offline: Boolean;
-  saved: Boolean;
-  needsToUpload: Boolean;
-  needsToDownload: Boolean;
+  offline: boolean;
+  saved: boolean;
+  needsToUpload: boolean;
+  needsToDownload: boolean;
 }): Status => {
   if (!saved) {
     return 'saving locally';

package/src/components/ViewEditor.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/react';
+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 { resolveSchemaWithRegistry } from '../helpers';
+import { useTypeOptions } from '../hooks';
+import { SpaceOperation } from '../types';
+
+export type ViewEditorProps = { view: View.View };
+
+export const ViewEditor = ({ view }: ViewEditorProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const space = getSpace(view);
+  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    space,
+    annotation: {
+      location: ['database', 'runtime'],
+      kind: ['user'],
+      registered: ['registered'],
+    },
+  });
+
+  useAsyncEffect(async () => {
+    if (!view?.query || !space) {
+      return;
+    }
+
+    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
+    if (foundSchema && foundSchema !== schema) {
+      setSchema(() => foundSchema);
+    }
+  }, [client, space, view, schema]);
+
+  const handleQueryChanged = useCallback(
+    async (newQuery: QueryAST.Query, target?: string) => {
+      if (!view || !space) {
+        return;
+      }
+
+      const queue = target && DXN.tryParse(target) ? target : undefined;
+      const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
+      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;
+      }
+
+      const newView = View.make({
+        query,
+        jsonSchema: Type.toJsonSchema(newSchema),
+      });
+      Obj.change(view, (v) => {
+        v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+      });
+
+      setSchema(() => newSchema);
+    },
+    [view, schema],
+  );
+
+  const handleDelete = useCallback(
+    (fieldId: string) => {
+      void invokePromise(SpaceOperation.DeleteField, { view, fieldId });
+    },
+    [invokePromise, view],
+  );
+
+  if (!space || !schema) {
+    return null;
+  }
+
+  return (
+    <NaturalViewEditor
+      registry={space.db.schemaRegistry}
+      schema={schema}
+      view={view}
+      mode='tag'
+      tags={tags}
+      types={types}
+      onQueryChanged={handleQueryChanged}
+      onDelete={Type.isMutable(schema) ? handleDelete : undefined}
+    />
+  );
+};

package/src/components/index.ts

@@ -2,19 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
+import { lazy } from 'react';
+
 export * from './AwaitingObject';
 export * from './CreateDialog';
-export * from './CollectionMain';
 export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
 export * from './MenuFooter';
-export * from './ObjectSettings';
-export * from './PersistenceStatus';
-export * from './PopoverRenameObject';
-export * from './PopoverRenameSpace';
+export * from './ObjectRenamePopover';
 export * from './SchemaContainer';
-export * from './SpacePresence';
 export * from './SpacePluginSettings';
+export * from './SpacePresence';
+export * from './SpaceRenamePopover';
 export * from './SpaceSettings';
 export * from './SyncStatus';
+export * from './ViewEditor';
+
+export const CollectionArticle = lazy(() => import('./CollectionArticle'));
+export const ObjectCardStack = lazy(() => import('./ObjectCardStack'));
+export const ObjectDetails = lazy(() => import('./ObjectDetails'));
+export const RecordArticle = lazy(() => import('./RecordArticle'));

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/index.ts

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

package/src/helpers/query.test.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, expect, it } from 'vitest';
+
+import { evalQuery } from './query';
+
+describe('evalQuery', () => {
+  it('should evaluate a query string', () => {
+    const query = evalQuery('Query.select(Filter.type(Person.Person))');
+    expect(query.ast).toMatchInlineSnapshot(`
+      {
+        "filter": {
+          "id": undefined,
+          "props": {},
+          "type": "object",
+          "typename": "dxn:type:dxos.org/type/Person:0.1.0",
+        },
+        "type": "select",
+      }
+    `);
+  });
+});

package/src/helpers/query.ts

@@ -0,0 +1,153 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Array from 'effect/Array';
+import * as Effect from 'effect/Effect';
+import * as EffectFunction from 'effect/Function';
+import * as Match from 'effect/Match';
+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, 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';
+
+// TODO(wittjosiah): Factor out and add tests.
+// TODO(wittjosiah): Support arbitrary type imports.
+export const evalQuery = (queryString: string): Query.Any => {
+  const globals = { Query, Filter, Person };
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    return new Function(...Object.keys(globals), `return ${queryString}`)(...Object.values(globals));
+  } catch (err) {
+    log.catch(err);
+    return Query.select(Filter.nothing());
+  }
+};
+
+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 = 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)),
+    runAndForwardErrors,
+  );
+};
+
+const resolveSchema = (
+  query: QueryAST.Query,
+  resolve: (dxn: string) => Effect.Effect<Option.Option<Schema.Schema.AnyNoContext>>,
+): Effect.Effect<Option.Option<Schema.Schema.AnyNoContext>> => {
+  return Match.value(query).pipe(
+    Match.withReturnType<Effect.Effect<Option.Option<Schema.Schema.AnyNoContext>>>(),
+    // TODO(wittjosiah): Reconcile with filter match?
+    Match.when({ type: 'select' }, ({ filter }) =>
+      typenameFromFilter(filter).pipe(
+        Option.map((typename) => resolve(typename)),
+        Option.getOrElse(() => Effect.succeed(Option.none<Schema.Schema.AnyNoContext>())),
+      ),
+    ),
+    Match.when({ type: 'filter' }, ({ filter }) =>
+      typenameFromFilter(filter).pipe(
+        Option.map((typename) => resolve(typename)),
+        Option.getOrElse(() => Effect.succeed(Option.none<Schema.Schema.AnyNoContext>())),
+      ),
+    ),
+    Match.when({ type: 'reference-traversal' }, ({ anchor, property }) =>
+      resolveSchema(anchor, resolve).pipe(
+        Effect.map((base) =>
+          base.pipe(
+            Option.map((schema) => SchemaAST.getPropertySignatures(schema.ast)),
+            Option.flatMap((properties) => Array.findFirst(properties, (p) => p.name === property)),
+            Option.flatMap((property) =>
+              SchemaAST.getAnnotation<ReferenceAnnotationValue>(ReferenceAnnotationId)(unwrapOptional(property)),
+            ),
+            Option.map((annotation) => annotation.typename),
+          ),
+        ),
+        Effect.flatMap(
+          Option.match({
+            onNone: () => Effect.succeed(Option.none()),
+            onSome: (typename) => resolve(DXN.fromTypename(typename).toString()),
+          }),
+        ),
+      ),
+    ),
+    Match.when({ type: 'relation', filter: Match.defined }, ({ filter }) =>
+      typenameFromFilter(filter).pipe(
+        Option.map((typename) => resolve(typename)),
+        Option.getOrElse(() => Effect.succeed(Option.none<Schema.Schema.AnyNoContext>())),
+      ),
+    ),
+    Match.when({ type: 'relation-traversal' }, ({ anchor, direction }) =>
+      resolveSchema(anchor, resolve).pipe(
+        Effect.map((base) =>
+          base.pipe(
+            Option.map((schema) => getTypeAnnotation(schema)),
+            Option.flatMap((annotation) =>
+              Option.fromNullable(direction === 'source' ? annotation?.sourceSchema : annotation?.targetSchema),
+            ),
+          ),
+        ),
+        Effect.flatMap(
+          Option.match({
+            onNone: () => Effect.succeed(Option.none()),
+            onSome: (typename) => resolve(typename),
+          }),
+        ),
+      ),
+    ),
+    Match.when({ type: 'options' }, ({ query }) => resolveSchema(query, resolve)),
+    Match.orElse((_q) => {
+      // TODO(wittjosiah): Implement other cases.
+      return Effect.succeed(Option.none());
+    }),
+  );
+};
+
+const typenameFromFilter = (filter: QueryAST.Filter): Option.Option<string> =>
+  Match.value(filter).pipe(
+    Match.withReturnType<Option.Option<string>>(),
+    Match.when({ type: 'object' }, ({ typename }) => Option.fromNullable(typename)),
+    Match.when({ type: 'and' }, ({ filters }) =>
+      EffectFunction.pipe(filters, Array.map(typenameFromFilter), Array.findFirst(Option.isSome), Option.flatten),
+    ),
+    Match.when({ type: 'or' }, ({ filters }) =>
+      EffectFunction.pipe(filters, Array.map(typenameFromFilter), Array.findFirst(Option.isSome), Option.flatten),
+    ),
+    Match.orElse(() => Option.none()),
+  );
+
+// TODO(wittjosiah): Currently assumes options is at the top-level of the ast.
+export const getQueryTarget = (query: QueryAST.Query, space?: Space) => {
+  return Match.value(query).pipe(
+    Match.when({ type: 'options' }, ({ options }) => {
+      return Option.fromNullable(options.queues).pipe(
+        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?.db),
+      );
+    }),
+    Match.orElse(() => space?.db),
+  );
+};

package/src/hooks/index.ts

@@ -5,3 +5,4 @@
 export * from './useActiveSpace';
 export * from './useInputSurfaceLookup';
 export * from './usePath';
+export * from './useTypeOptions';

package/src/hooks/useActiveSpace.ts

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

package/src/hooks/useInputSurfaceLookup.tsx

@@ -2,29 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
 import React, { useCallback } from 'react';
 
-import { usePluginManager, isSurfaceAvailable, Surface } from '@dxos/app-framework';
-import { type InputProps } from '@dxos/react-ui-form';
+import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework/react';
+import { type FormFieldProvider } from '@dxos/react-ui-form';
 
-// 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.
  */
-export const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
+// TODO(burdon): Factor out?
+export const useInputSurfaceLookup = (baseData?: Record<string, any>): FormFieldProvider => {
   const pluginManager = usePluginManager();
-
-  return useCallback(
-    ({ prop, schema, inputProps }: { prop: string; schema: Schema.Schema<any>; inputProps: InputProps }) => {
-      const composedData = { prop, schema, ...baseData };
-      if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
-        return undefined;
+  return useCallback<FormFieldProvider>(
+    ({ schema, prop, fieldProps }) => {
+      const data = { prop, schema, ...baseData };
+      if (isSurfaceAvailable(pluginManager.capabilities, { role: 'form-input', data })) {
+        return <Surface role='form-input' data={data} {...fieldProps} />;
       }
-
-      return <Surface role='form-input' data={composedData} {...inputProps} />;
     },
     [pluginManager, baseData],
   );