@dxos/plugin-space 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/{components → containers}/SpacePresence/SpacePresence.tsx

@@ -2,10 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
-import { useAppGraph, useAtomCapability } from '@dxos/app-framework/react';
+import { useAtomCapability } from '@dxos/app-framework/ui';
 import { generateName } from '@dxos/display-name';
 import { type Key, Obj } from '@dxos/echo';
 import { PublicKey } from '@dxos/react-client';
@@ -24,10 +23,9 @@ import {
   useDefaultValue,
   useTranslation,
 } from '@dxos/react-ui';
-import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
+import { AttentionGlyph, type AttentionGlyphProps, useAttention } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
-import { usePath } from '../../hooks';
 import { meta } from '../../meta';
 import { type ObjectViewerProps, SpaceCapabilities } from '../../types';
 
@@ -124,7 +122,7 @@ export const FullPresence = (props: MemberPresenceProps) => {
           key={member.identity.identityKey.toHex()}
           side='bottom'
           content={getName(member.identity)}
-          className='grid focus:outline-none'
+          className='grid focus:outline-hidden'
         >
           <PresenceAvatar
             identity={member.identity}
@@ -138,7 +136,7 @@ export const FullPresence = (props: MemberPresenceProps) => {
 
       {members.length > 3 && (
         <Popover.Root>
-          <Popover.Trigger className='grid focus:outline-none'>
+          <Popover.Trigger className='grid focus:outline-hidden'>
             <Avatar.Root>
               {/* TODO(wittjosiah): Make text fit. */}
               <Avatar.Content
@@ -152,12 +150,12 @@ export const FullPresence = (props: MemberPresenceProps) => {
           <Popover.Portal>
             <Popover.Content side='bottom'>
               <Popover.Arrow />
-              <Popover.Viewport classNames='max-bs-56'>
+              <Popover.Viewport classNames='max-h-56'>
                 <List>
                   {members.map((member) => (
                     <ListItem.Root
                       key={member.identity.identityKey.toHex()}
-                      classNames='flex gap-2 items-center cursor-pointer mbe-2'
+                      classNames='flex gap-2 items-center cursor-pointer mb-2'
                       onClick={() => onMemberClick?.(member)}
                       data-testid='identity-list-item'
                     >
@@ -205,7 +203,7 @@ const PresenceAvatar = forwardRef<DxAvatar, PresenceAvatarProps>(
           fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
           ref={forwardedRef}
         />
-        <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
+        <Avatar.Label classNames={showName ? 'text-sm truncate px-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
       </Avatar.Root>
     );
   },
@@ -219,17 +217,8 @@ export type SmallPresenceLiveProps = {
 
 export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {
   const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const isAttended = hasAttention || isAncestor || isRelated;
-
-  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
-  //   this will result in an empty path until the graph is connected.
-  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useAppGraph();
-  const attended = useAttended();
-  const startOfAttention = attended.at(-1);
-  const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
-
+  const attended = hasAttention || isRelated;
+  const containsAttended = isAncestor && !open;
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
     return Array.from<ObjectViewerProps>(viewers.values()).filter(
@@ -249,7 +238,7 @@ export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps)
     }
   }, [viewers]);
 
-  return <SmallPresence count={activeViewers.length} attended={isAttended} containsAttended={containsAttended} />;
+  return <SmallPresence count={activeViewers.length} attended={attended} containsAttended={containsAttended} />;
 };
 
 export type SmallPresenceProps = {
@@ -265,7 +254,7 @@ export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPr
         attended={attended}
         containsAttended={containsAttended}
         presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
-        classNames='self-center mie-1'
+        classNames='self-center mx-1'
       />
     </Tooltip.Trigger>
   );

package/src/containers/SpacePresence/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { SpacePresence, SmallPresenceLive } from './SpacePresence';
+export { SpacePresence as default } from './SpacePresence';

package/src/{components → containers}/SpaceRenamePopover/SpaceRenamePopover.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { type Space } from '@dxos/client/echo';
 import { Obj } from '@dxos/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
@@ -13,7 +13,7 @@ import { osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
-export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;
+export const SPACE_RENAME_POPOVER = `${meta.id}.SpaceRenamePopover`;
 
 export const SpaceRenamePopover = ({ space }: { space: Space }) => {
   const { t } = useTranslation(meta.id);
@@ -25,7 +25,7 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
     Obj.change(space.properties, (p) => {
       p.name = name;
     });
-    void invokePromise(Common.LayoutOperation.UpdatePopover, { anchorId: '', state: false });
+    void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
   }, [space, name, invokePromise]);
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?

package/src/containers/SpaceRenamePopover/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { SpaceRenamePopover } from './SpaceRenamePopover';
+
+export default SpaceRenamePopover;

package/src/{components/SpaceSettings → containers/SpaceSettingsContainer}/SpaceSettingsContainer.stories.tsx

@@ -17,18 +17,18 @@ import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './Spac
 const Story = (props: Partial<SpaceSettingsContainerProps>) => {
   const { space } = useClientStory();
   return (
-    <div role='none' className='p-2 border border-primary-500 rounded'>
+    <div role='none' className='p-2 border border-primary-500 rounded-sm'>
       <SpaceSettingsContainer {...props} space={space!} />
     </div>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-space/SpaceSettingsContainer',
+  title: 'plugins/plugin-space/containers/SpaceSettingsContainer',
   component: SpaceSettingsContainer,
   render: Story,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({ createIdentity: true, createSpace: true }),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
     withPluginManager({ plugins: [OperationPlugin()] }),

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx

@@ -0,0 +1,202 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } 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 { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+
+import { meta } from '../../meta';
+import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
+
+const SpaceFormSchema = SpaceForm.pipe(
+  Schema.extend(
+    Schema.Struct({
+      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),
+    }),
+  ),
+);
+
+export type SpaceSettingsContainerProps = {
+  space: Space;
+};
+
+// TODO(wittjosiah): Handle space migrations here?
+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 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);
+      }
+
+      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;
+          }
+        });
+      }
+
+      if (changed['archived']) {
+        if (newValues.archived && !archived) {
+          void invokePromise(SpaceOperation.Close, { space });
+          void invokePromise(LayoutOperation.SwitchWorkspace, {
+            subject: getSpacePath(client.spaces.default.id),
+          });
+        } else if (!newValues.archived && archived) {
+          void invokePromise(SpaceOperation.Open, { space });
+        }
+      }
+    },
+    [space, client, archived, invokePromise, toggleEdgeReplication],
+  );
+
+  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 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-w-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],
+  );
+
+  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 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 />
+        </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/containers/SpaceSettingsContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { SpaceSettingsContainer } from './SpaceSettingsContainer';
+
+export default SpaceSettingsContainer;

package/src/{components → containers}/SyncStatus/SyncStatus.stories.tsx

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

package/src/{components → containers}/SyncStatus/SyncStatus.tsx

@@ -14,11 +14,9 @@ import { Icon, Popover, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 import { Unit, type UnitFormat } from '@dxos/util';
 
+import { createClientSaveTracker, getIcon, getStatus } from '../../components';
 import { meta } from '../../meta';
 
-import { createClientSaveTracker } from './save-tracker';
-import { getIcon, getStatus } from './status';
-
 const SYNC_STALLED_TIMEOUT = 5_000;
 
 export const SyncStatus = () => {
@@ -86,12 +84,12 @@ const EdgeConnectionPopover = () => {
   const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
 
   return (
-    <div className='min-is-[240px] p-2'>
+    <div className='min-w-[240px] p-2'>
       {/* Connection Status Header */}
-      <div className='flex items-center gap-2 mbe-2'>
+      <div className='flex items-center gap-2 mb-2'>
         <Icon
           icon={isConnected ? 'ph--check-circle--regular' : 'ph--warning-circle--regular'}
-          classNames={mx(isConnected ? 'text-successText' : 'text-errorText animate-pulse')}
+          classNames={mx(isConnected ? 'text-success-text' : 'text-error-text animate-pulse')}
         />
         <span className='font-medium text-sm'>
           {isConnected ? t('sync edge connected label') : t('sync edge disconnected label')}
@@ -146,7 +144,7 @@ const UnitValue = ({ value: input, format, suffix }: { value: number; format: Un
   return (
     <span className='font-mono'>
       {formattedValue}
-      <span className='mis-1 text-subdued'>
+      <span className='ms-1 text-subdued'>
         {unit.symbol}
         {suffix}
       </span>

package/src/containers/SyncStatus/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { SyncStatus } from './SyncStatus';
+
+export default SyncStatus;

package/src/{components → containers/ViewEditor}/ViewEditor.tsx

@@ -5,18 +5,19 @@
 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 { useOperationInvoker } from '@dxos/app-framework/ui';
+import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type View } 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 { ViewModel } from '@dxos/schema';
 
-import { resolveSchemaWithRegistry } from '../helpers';
-import { useTypeOptions } from '../hooks';
-import { SpaceOperation } from '../types';
+import { resolveSchemaWithRegistry } from '../../helpers';
+import { useTypeOptions } from '../../hooks';
+import { SpaceOperation } from '../../types';
 
 export type ViewEditorProps = { view: View.View };
 
@@ -31,7 +32,6 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
     annotation: {
       location: ['database', 'runtime'],
       kind: ['user'],
-      registered: ['registered'],
     },
   });
 
@@ -53,7 +53,7 @@ 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);
+      const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
       Obj.change(view, (v) => {
         v.query.ast = query.ast as Mutable<typeof query.ast>;
       });
@@ -62,9 +62,9 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
         return;
       }
 
-      const newView = View.make({
+      const newView = ViewModel.make({
         query,
-        jsonSchema: Type.toJsonSchema(newSchema),
+        jsonSchema: JsonSchema.toJsonSchema(newSchema),
       });
       Obj.change(view, (v) => {
         v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
@@ -92,6 +92,7 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
       schema={schema}
       view={view}
       mode='tag'
+      db={space.db}
       tags={tags}
       types={types}
       onQueryChanged={handleQueryChanged}

package/src/containers/ViewEditor/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ViewEditor } from './ViewEditor';
+
+export default ViewEditor;

package/src/containers/index.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export type { CreateObjectDialogProps } from './CreateObjectDialog';
+
+export const CollectionArticle: ComponentType<any> = lazy(() => import('./CollectionArticle'));
+export const CollectionSection: ComponentType<any> = lazy(() => import('./CollectionSection'));
+export const CreateObjectDialog: ComponentType<any> = lazy(() => import('./CreateObjectDialog'));
+export const CreateSpaceDialog: ComponentType<any> = lazy(() => import('./CreateSpaceDialog'));
+export const InlineSyncStatus: ComponentType<any> = lazy(() => import('./InlineSyncStatus'));
+export const JoinDialog: ComponentType<any> = lazy(() => import('./JoinDialog'));
+export const MembersContainer: ComponentType<any> = lazy(() => import('./MembersContainer'));
+export const MenuFooter: ComponentType<any> = lazy(() => import('./MenuFooter'));
+export const ObjectCardStack: ComponentType<any> = lazy(() => import('./ObjectCardStack'));
+export const ObjectDetails: ComponentType<any> = lazy(() => import('./ObjectDetails'));
+export const ObjectRenamePopover: ComponentType<any> = lazy(() => import('./ObjectRenamePopover'));
+export const RecordArticle: ComponentType<any> = lazy(() => import('./RecordArticle'));
+export const SchemaContainer: ComponentType<any> = lazy(() => import('./SchemaContainer'));
+export const SmallPresenceLive: ComponentType<any> = lazy(() => import('./SmallPresenceLive'));
+export const SpacePluginSettings: ComponentType<any> = lazy(() => import('./SpacePluginSettings'));
+export const SpacePresence: ComponentType<any> = lazy(() => import('./SpacePresence'));
+export const SpaceRenamePopover: ComponentType<any> = lazy(() => import('./SpaceRenamePopover'));
+export const SpaceSettingsContainer: ComponentType<any> = lazy(() => import('./SpaceSettingsContainer'));
+export const SyncStatus: ComponentType<any> = lazy(() => import('./SyncStatus'));
+export const ViewEditor: ComponentType<any> = lazy(() => import('./ViewEditor'));

package/src/helpers/query.test.ts

@@ -15,7 +15,7 @@ describe('evalQuery', () => {
           "id": undefined,
           "props": {},
           "type": "object",
-          "typename": "dxn:type:dxos.org/type/Person:0.1.0",
+          "typename": "dxn:type:org.dxos.type.person:0.1.0",
         },
         "type": "select",
       }

package/src/helpers/query.ts

@@ -10,7 +10,7 @@ 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 { DXN, Filter, Key, Query, type QueryAST, type SchemaRegistry } from '@dxos/echo';
 import {
   ReferenceAnnotationId,
   type ReferenceAnnotationValue,
@@ -137,16 +137,29 @@ const typenameFromFilter = (filter: QueryAST.Filter): Option.Option<string> =>
     Match.orElse(() => Option.none()),
   );
 
-// TODO(wittjosiah): Currently assumes options is at the top-level of the ast.
+// TODO(wittjosiah): Currently assumes from scope 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(
+    Match.when({ type: 'from' }, ({ from }) => {
+      if (from._tag !== 'scope') {
+        return space?.db;
+      }
+      const result = Option.fromNullable(from.scope.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),
+        Option.flatMap((queueDxn) => Option.fromNullable(DXN.tryParse(String(queueDxn)))),
+        Option.flatMap((parsed) => {
+          const q = parsed.asQueueDXN();
+          if (!q || !Key.ObjectId.isValid(q.queueId)) return Option.none();
+          return Option.fromNullable(space?.queues.get(parsed));
+        }),
       );
+      // Skip query when a requested queue is not found (structurally invalid DXN or valid DXN
+      // referencing a queue not present in space.queues, e.g. not yet synced) to avoid 400 errors.
+      // TODO(wittjosiah): Can we handle this upstream?
+      if (from.scope.queues?.length && Option.isNone(result)) {
+        return undefined;
+      }
+      return Option.getOrElse(result, () => space?.db);
     }),
     Match.orElse(() => space?.db),
   );

package/src/hooks/useActiveSpace.ts

@@ -2,22 +2,23 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type CapabilityManager, Common } from '@dxos/app-framework';
-import { useLayout } from '@dxos/app-framework/react';
+import { Capabilities, type CapabilityManager } from '@dxos/app-framework';
+import { AppCapabilities, getSpaceIdFromPath } 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';
+import { useSpace } from '@dxos/react-client/echo';
 
 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 registry = capabilities.get(Capabilities.AtomRegistry);
+  const layoutAtom = capabilities.get(AppCapabilities.Layout);
   const layout = registry.get(layoutAtom);
-  const { spaceId } = parseId(layout.workspace);
+  const spaceId = getSpaceIdFromPath(layout.workspace);
   return spaceId ? client.spaces.get(spaceId) : undefined;
 };
 
 export const useActiveSpace = () => {
   const layout = useLayout();
-  const { spaceId } = parseId(layout.workspace);
+  const spaceId = getSpaceIdFromPath(layout.workspace);
   return useSpace(spaceId);
 };

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

@@ -8,5 +8,6 @@ export * from './components';
 export * from './helpers';
 export * from './hooks';
 export * from './meta';
-export * from './SpacePlugin';
 export * from './util';
+
+export * from './SpacePlugin';