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

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx

@@ -0,0 +1,216 @@
+//
+// 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 { getPersonalSpace, getSpacePath, isPersonalSpace, 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 { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+import { SpaceCapabilities, SpaceForm } 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, (obj) => {
+          if (changed['name'] && newValues.name !== undefined) {
+            obj.name = newValues.name;
+          }
+          if (changed['icon']) {
+            obj.icon = newValues.icon;
+          }
+          if (changed['hue']) {
+            obj.hue = newValues.hue;
+          }
+        });
+      }
+
+      if (changed['archived']) {
+        if (newValues.archived && !archived) {
+          void invokePromise(SpaceOperation.Close, { space });
+          const personalSpace = getPersonalSpace(client);
+          if (personalSpace) {
+            void invokePromise(LayoutOperation.SwitchWorkspace, {
+              subject: getSpacePath(personalSpace.id),
+            });
+          }
+        } else if (!newValues.archived && archived) {
+          void invokePromise(SpaceOperation.Open, { space });
+        }
+      }
+    },
+    [space, client, archived, invokePromise, toggleEdgeReplication],
+  );
+
+  const defaultValues = 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 personal = isPersonalSpace(space);
+
+  const fieldMap = useMemo<FormFieldMap>(
+    () => ({
+      name: personal
+        ? () => null
+        : ({ type, label, getValue, onValueChange }) => {
+            const handleChange = useCallback(
+              ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+              [onValueChange, type],
+            );
+            return (
+              <Settings.Item title={label} description={t('display-name.description')}>
+                <Input.TextInput
+                  value={getValue()}
+                  onChange={handleChange}
+                  placeholder={t('display-name-input.placeholder')}
+                  classNames='min-w-64'
+                />
+              </Settings.Item>
+            );
+          },
+      icon: personal
+        ? () => null
+        : ({ 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.Item title={label} description={t('edge-replication.description')}>
+            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+          </Settings.Item>
+        );
+      },
+      archived: personal
+        ? () => null
+        : ({ type, label, getValue, onValueChange }) => {
+            const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
+            return (
+              <Settings.Item title={label} description={t('archive-space.description')}>
+                <Button variant={getValue() ? 'default' : 'destructive'} onClick={handleChange}>
+                  {getValue() ? t('unarchive-space.label') : t('archive-space.label')}
+                </Button>
+              </Settings.Item>
+            );
+          },
+    }),
+    [t, space, personal],
+  );
+
+  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: isPersonalSpace(space) })));
+  }, [space, repairs]);
+
+  return (
+    <Settings.Viewport>
+      <Settings.Section
+        title={t('space-properties-settings-verbose.label')}
+        description={t('space-properties-settings.description', { ns: meta.id })}
+      >
+        <Form.Root
+          key={space.id}
+          fieldMap={fieldMap}
+          schema={SpaceFormSchema}
+          defaultValues={defaultValues}
+          onValuesChanged={handleValuesChanged}
+        >
+          <Form.FieldSet />
+        </Form.Root>
+      </Settings.Section>
+      <Settings.Section title={t('space-controls.title')} description={t('space-controls.description')}>
+        <Settings.Item title={t('backup-space.title')} description={t('backup-space.description')}>
+          <Button onClick={handleBackup}>{t('download-backup.label')}</Button>
+        </Settings.Item>
+        <Settings.Item title={t('repair-space.title')} description={t('repair-space.description')}>
+          <Button onClick={handleRepair}>{t('repair-space.label')}</Button>
+        </Settings.Item>
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};
+
+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

@@ -10,14 +10,13 @@ import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/
 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/ui-theme';
+import { Icon, IconButton, Popover, useTranslation } from '@dxos/react-ui';
+import { iconSize, 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 { createClientSaveTracker, getIcon, getStatus } from '#components';
+import { meta } from '#meta';
+import { log } from '@dxos/log';
 
 const SYNC_STALLED_TIMEOUT = 5_000;
 
@@ -46,22 +45,21 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
     }
 
     const t = setTimeout(() => {
-      // TODO(wittjosiah): Use semantic color tokens.
-      setClassNames('text-orange-500');
+      log.warn('sync stalled', { state });
+      // setClassNames('text-error-text');
     }, SYNC_STALLED_TIMEOUT);
     return () => clearTimeout(t);
   }, [offline, needsToUpload, needsToDownload]);
 
-  const title = t(`${status} label`);
-  const icon = <Icon icon={getIcon(status)} classNames={classNames} />;
-
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
+        <StatusBar.Item>
+          <IconButton icon={getIcon(status)} iconOnly label={t(`${status}.label`)} classNames={classNames} />
+        </StatusBar.Item>
       </Popover.Trigger>
       <Popover.Portal>
-        <Popover.Content>
+        <Popover.Content side='left' classNames=''>
           <EdgeConnectionPopover />
           <Popover.Arrow />
         </Popover.Content>
@@ -70,68 +68,60 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   );
 };
 
-const useEdgeStatus = (): EdgeStatus | undefined => {
+const EdgeConnectionPopover = () => {
+  const { t } = useTranslation(meta.id);
   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'>
+    <div className='flex flex-col gap-2 w-[240px] p-2' style={iconSize(4)}>
       {/* 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')}
+          {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'>
+        <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2'>
           <Icon icon='ph--cloud-x--regular' />
-          <span>{t('sync no connection label')}</span>
+          <span className='text-description'>{t('sync-no-connection.label')}</span>
         </div>
       )}
 
       {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
-        <div className='space-y-2'>
+        <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2 gap-y-1'>
           {/* 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>
+          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>
+            <Icon icon='ph--timer--regular' />
+            <span className='text-description'>{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>
+          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>
+            <Icon icon='ph--arrow-up--regular' classNames='text-green-500' />
+            <span className='text-description'>{t('sync-upload.label')}</span>
+            <UnitValue value={status.messagesSent} format={Unit.Thousand} />
             <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>
+          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>
+            <Icon icon='ph--arrow-down--regular' classNames='text-orange-500' />
+            <span className='text-description'>{t('sync-download.label')}</span>
+            <UnitValue value={status.messagesReceived} format={Unit.Thousand} />
             <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />
           </div>
         </div>
@@ -146,7 +136,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 { resolveSchemaWithRegistry } from '@dxos/app-toolkit/query';
+import { useTypeOptions } from '@dxos/app-toolkit/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 { SpaceOperation } from '#operations';
 
 export type ViewEditorProps = { view: View.View };
 
@@ -31,7 +32,6 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
     annotation: {
       location: ['database', 'runtime'],
       kind: ['user'],
-      registered: ['registered'],
     },
   });
 
@@ -53,21 +53,21 @@ 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);
-      Obj.change(view, (v) => {
-        v.query.ast = query.ast as Mutable<typeof query.ast>;
+      const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
+      Obj.change(view, (obj) => {
+        obj.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({
+      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>;
+      Obj.change(view, (obj) => {
+        obj.projection = Obj.getSnapshot(newView).projection as Mutable<typeof obj.projection>;
       });
 
       setSchema(() => newSchema);
@@ -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,27 @@
+//
+// 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 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/hooks/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './useActiveSpace';
 export * from './useInputSurfaceLookup';
 export * from './usePath';
-export * from './useTypeOptions';
+export * from './useRelatedObjects';

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/{components/RecordArticle.tsx → hooks/useRelatedObjects.ts}

@@ -2,68 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
 import { type Database, Entity, Filter, Obj, Ref, Relation } from '@dxos/echo';
 import { useQuery } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { Masonry } from '@dxos/react-ui-masonry';
-import { Layout, Card as MosaicCard } from '@dxos/react-ui-mosaic';
-import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../meta';
-
-export const RecordArticle = ({ role, subject }: SurfaceComponentProps) => {
-  const { t } = useTranslation(meta.id);
-  const db = Obj.getDatabase(subject);
-  const data = useMemo(() => ({ subject }), [subject]);
-  const related = useRelatedObjects(db, subject, {
-    references: true,
-    relations: true,
-  });
-  const singleColumn = related.length === 1;
-
-  return (
-    <Layout.Main role={role}>
-      <div role='none' className={mx('flex flex-col gap-4 p-4 is-full overflow-y-auto')}>
-        <div role='none' className={mx('flex is-full card-max-width')}>
-          <Surface role='section' data={data} limit={1} />
-        </div>
-
-        {related.length > 0 && (
-          <div role='none' className={mx('flex flex-col gap-1', singleColumn ? 'card-max-width' : 'is-full')}>
-            <label className='mbs-2 text-sm text-description'>{t('related objects label')}</label>
-            <Masonry.Root<Entity.Unknown>
-              items={related}
-              render={Card}
-              columnCount={singleColumn ? 1 : undefined}
-              intrinsicHeight
-            />
-          </div>
-        )}
-      </div>
-    </Layout.Main>
-  );
-};
-
-const Card = ({ data: subject }: { data: Entity.Unknown }) => {
-  const data = useMemo(() => ({ subject }), [subject]);
-  return (
-    <MosaicCard.Root>
-      <MosaicCard.Toolbar>
-        <span />
-        <MosaicCard.Title>{Entity.getLabel(subject)}</MosaicCard.Title>
-      </MosaicCard.Toolbar>
-      <Surface role='card--content' data={data} limit={1} />
-    </MosaicCard.Root>
-  );
-};
-
+// TODO(burdon): Factor out (make more generally useful -- e.g., in cards).
 // TODO(wittjosiah): This is a hack. ECHO needs to have a back reference index to easily query for related objects.
-const useRelatedObjects = (
+export const useRelatedObjects = (
   db?: Database.Database,
   record?: Obj.Unknown,
   options: { references?: boolean; relations?: boolean } = {},
@@ -115,8 +62,10 @@ const useRelatedObjects = (
       related.push(...targetObjects, ...sourceObjects);
     }
 
-    return related;
-  }, [record, objects]);
+    return (
+      Array.from(new Set(related))
+        // TODO(burdon): Hack to filter out chat objects.
+        .filter((obj) => Entity.getTypename(obj) !== 'org.dxos.type.assistant.chat')
+    );
+  }, [record, objects, options.references, options.relations]);
 };
-
-export default RecordArticle;

package/src/index.ts

@@ -5,8 +5,7 @@
 export { SpaceCapabilities, SpaceEvents } from './types';
 
 export * from './components';
-export * from './helpers';
-export * from './hooks';
 export * from './meta';
-export * from './SpacePlugin';
 export * from './util';
+
+export * from './SpacePlugin';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/space',
+  id: 'org.dxos.plugin.space',
   name: 'Spaces',
   description: trim`
     Core workspace container system for organizing and sharing collaborative environments.