@dxos/plugin-space 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/src/components/SpacePresence.stories.tsx

@@ -2,20 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../translations';
 
 import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
 
-const nViewers = (n: number, currentlyAttended = true): Member[] =>
+const viewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
     role: HaloSpaceMember.Role.ADMIN,
     identity: { did: IdentityDid.random(), identityKey: PublicKey.random() },
@@ -24,6 +22,16 @@ const nViewers = (n: number, currentlyAttended = true): Member[] =>
     currentlyAttended,
   }));
 
+const meta = {
+  title: 'plugins/plugin-space/SpacePresence',
+  decorators: [withTheme],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof IdentityDid>;
+
+export default meta;
+
 export const Full = (props: MemberPresenceProps) => {
   const p: MemberPresenceProps = {
     ...props,
@@ -32,31 +40,31 @@ export const Full = (props: MemberPresenceProps) => {
   return (
     <div className='p-4'>
       <div className='p-3'>
-        <FullPresence members={nViewers(1)} {...p} />
+        <FullPresence members={viewers(1)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(2)} {...p} />
+        <FullPresence members={viewers(2)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(3)} {...p} />
+        <FullPresence members={viewers(3)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(3, false)} {...p} />
+        <FullPresence members={viewers(3, false)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(4)} {...p} />
+        <FullPresence members={viewers(4)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(5)} {...p} />
+        <FullPresence members={viewers(5)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(5, false)} {...p} />
+        <FullPresence members={viewers(5, false)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(10)} {...p} />
+        <FullPresence members={viewers(10)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(100)} {...p} />
+        <FullPresence members={viewers(100)} {...p} />
       </div>
     </div>
   );
@@ -98,13 +106,3 @@ export const Small = () => {
     </div>
   );
 };
-
-const meta = {
-  title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme, withLayout()],
-  parameters: { translations },
-} satisfies Meta<typeof IdentityDid>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;

package/src/components/SpacePresence.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
@@ -29,7 +29,7 @@ import { ComplexMap, keyToFallback } from '@dxos/util';
 
 import { SpaceCapabilities } from '../capabilities';
 import { usePath } from '../hooks';
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import type { ObjectViewerProps } from '../types';
 
 // TODO(thure): Get/derive these values from protocol
@@ -254,7 +254,7 @@ export type SmallPresenceProps = {
 } & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
 
 export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
     <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>

package/src/components/SpaceSettings/SpaceSettingsContainer.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 
@@ -27,7 +27,12 @@ const meta = {
   title: 'plugins/plugin-space/SpaceSettingsContainer',
   component: SpaceSettingsContainer,
   render: Story,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
+  decorators: [
+    withTheme,
+    withClientProvider({ createIdentity: true, createSpace: true }),
+    // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({ plugins: [IntentPlugin()] }),
+  ],
   parameters: {
     translations,
     layout: 'centered',

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
@@ -22,7 +23,7 @@ import {
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { SPACE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { SpaceAction, SpaceForm } from '../../types';
 
 const FormSchema = SpaceForm.pipe(
@@ -35,7 +36,7 @@ export type SpaceSettingsContainerProps = {
 
 // TODO(wittjosiah): Handle space migrations here?
 export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
@@ -69,7 +70,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       }
       if (properties.archived && !archived) {
         void dispatch(
-          pipe(
+          Function.pipe(
             createIntent(SpaceAction.Close, { space }),
             chain(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: client.spaces.default.id }),
           ),
@@ -111,14 +112,14 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
         );
       },
       icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
-        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        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={handleEmojiReset}
+              onReset={handleReset}
               classNames='justify-self-end'
               iconSize={5}
             />
@@ -127,13 +128,13 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       },
       hue: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
         return (
           <ControlItem title={label} description={t('hue description')}>
             <HuePicker
               value={getValue()}
               onChange={handleChange}
-              onReset={handleHueReset}
+              onReset={handleReset}
               classNames='[--hue-preview-size:1.25rem] justify-self-end'
             />
           </ControlItem>
@@ -162,11 +163,11 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
+    <StackItem.Content scrollable>
       <ControlPage>
         <ControlSection
-          title={t('space properties settings verbose label', { ns: SPACE_PLUGIN })}
-          description={t('space properties settings description', { ns: SPACE_PLUGIN })}
+          title={t('space properties settings verbose label', { ns: meta.id })}
+          description={t('space properties settings description', { ns: meta.id })}
         >
           <Form
             schema={FormSchema}

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,7 +2,7 @@
 // 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';
@@ -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,11 +2,10 @@
 // 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 { translations } from '../../translations';
 
@@ -15,10 +14,10 @@ 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>;
 

package/src/components/SyncStatus/SyncStatus.tsx

@@ -5,11 +5,16 @@
 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 { useStream } from '@dxos/react-client/devtools';
 import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
+import { Icon, Popover, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { Unit } from '@dxos/util';
 
-import { SPACE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
@@ -31,7 +36,7 @@ export const SyncStatus = () => {
 };
 
 export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
@@ -53,7 +58,89 @@ 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 <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
+  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'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--timer--regular' />
+              <span>{t('sync latency label')}</span>
+            </div>
+            <span className='text-sm font-mono'>{status.rtt.toFixed(0)} ms</span>
+          </div>
+
+          {/* Upload Speed */}
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--arrow-up--regular' />
+              <span>{t('sync upload label')}</span>
+            </div>
+            <span className='text-sm font-mono'>{Unit.Kilobyte(status.rateBytesUp, 0)}/s</span>
+          </div>
+
+          {/* Download Speed */}
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--arrow-down--regular' />
+              <span>{t('sync download label')}</span>
+            </div>
+            <span className='text-sm font-mono'>{Unit.Kilobyte(status.rateBytesDown, 0)}/s</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };

package/src/components/ViewEditor.tsx

@@ -5,12 +5,12 @@
 import React, { useCallback } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Filter, Query, Type } from '@dxos/echo';
+import { type QueryAST, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { getSpace, useSchema } from '@dxos/react-client/echo';
 import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
-import { type DataType, typenameFromQuery } from '@dxos/schema';
+import { type DataType, getTypenameFromQuery } from '@dxos/schema';
 
 import { SpaceAction } from '../types';
 
@@ -20,17 +20,16 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const space = getSpace(view);
-  const typename = view.query ? typenameFromQuery(view.query) : undefined;
+  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
   const schema = useSchema(client, space, typename);
 
   const handleUpdateQuery = useCallback(
-    (typename: string) => {
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
 
-      const newQuery = Query.select(Filter.typename(typename));
-      view.query = newQuery.ast;
-      schema.updateTypename(typename);
+      view.query.ast = newQuery;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
     },
     [view, schema],
   );

package/src/components/index.ts

@@ -10,7 +10,6 @@ export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
 export * from './MenuFooter';
-export * from './ObjectSettings';
 export * from './PersistenceStatus';
 export * from './PopoverRenameObject';
 export * from './PopoverRenameSpace';
@@ -23,4 +22,5 @@ export * from './ViewEditor';
 
 export const CollectionMain = lazy(() => import('./CollectionMain'));
 export const ObjectDetailsPanel = lazy(() => import('./ObjectDetailsPanel'));
+export const ObjectSettingsContainer = lazy(() => import('./ObjectSettings'));
 export const RecordMain = lazy(() => import('./RecordMain'));

package/src/events.ts

@@ -4,12 +4,12 @@
 
 import { Events, defineEvent } from '@dxos/app-framework';
 
-import { SPACE_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace SpaceEvents {
-  export const StateReady = Events.createStateEvent(`${SPACE_PLUGIN}/event/state-ready`);
-  export const SetupSettingsPanel = defineEvent(`${SPACE_PLUGIN}/event/setup-settings-panel`);
-  export const DefaultSpaceReady = defineEvent(`${SPACE_PLUGIN}/event/default-space-ready`);
-  export const SpaceCreated = defineEvent(`${SPACE_PLUGIN}/event/space-created`);
-  export const SchemaAdded = defineEvent(`${SPACE_PLUGIN}/event/schema-added`);
+  export const StateReady = Events.createStateEvent(`${meta.id}/event/state-ready`);
+  export const SetupSettingsPanel = defineEvent(`${meta.id}/event/setup-settings-panel`);
+  export const DefaultSpaceReady = defineEvent(`${meta.id}/event/default-space-ready`);
+  export const SpaceCreated = defineEvent(`${meta.id}/event/space-created`);
+  export const SchemaAdded = defineEvent(`${meta.id}/event/schema-added`);
 }

package/src/hooks/index.ts

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

package/src/hooks/useInputSurfaceLookup.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
 import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';

package/src/hooks/usePath.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import { useEffect, useState } from 'react';
 
 import { type ReadableGraph } from '@dxos/plugin-graph';

package/src/hooks/useTypeOptions.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { useCapabilities } from '@dxos/app-framework';
+import { Type } from '@dxos/echo';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { useClient } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { DataType, type TypenameAnnotation, getTypenames } from '@dxos/schema';
+
+import { SpaceCapabilities } from '../capabilities';
+
+const OMIT = [DataType.Collection.typename, Type.getTypename(DataType.QueryCollection)];
+
+export const useTypeOptions = ({ space, annotation }: { space?: Space; annotation: TypenameAnnotation[] }) => {
+  const { t } = useTranslation();
+  const client = useClient();
+
+  const schemaWhitelists = useCapabilities(ClientCapabilities.SchemaWhiteList);
+  const whitelistedTypenames = useMemo(
+    () => new Set(schemaWhitelists.flatMap((typeArray) => typeArray.map((type) => Type.getTypename(type)))),
+    [schemaWhitelists],
+  );
+
+  const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
+  const objectFormTypenames = useMemo(
+    () =>
+      new Set(
+        objectForms
+          .map((form) => Type.getTypename(form.objectSchema))
+          // TODO(wittjosiah): Remove.
+          .filter((typename) => !OMIT.includes(typename) && !typename.endsWith('View')),
+      ),
+    [objectForms],
+  );
+
+  const typenames = getTypenames({
+    annotation,
+    whitelistedTypenames,
+    objectFormTypenames,
+    space,
+    client,
+  });
+
+  return useMemo(
+    () =>
+      typenames
+        .map((typename) => ({
+          value: typename,
+          label: t('typename label', { ns: typename, defaultValue: typename }),
+        }))
+        .toSorted((a, b) => a.label.localeCompare(b.label)),
+    [t, typenames],
+  );
+};

package/src/meta.ts

@@ -4,10 +4,8 @@
 
 import { type PluginMeta } from '@dxos/app-framework';
 
-export const SPACE_PLUGIN = 'dxos.org/plugin/space';
-
 export const meta: PluginMeta = {
-  id: SPACE_PLUGIN,
+  id: 'dxos.org/plugin/space',
   name: 'Spaces',
   icon: 'ph--planet--regular',
 };

package/src/translations.ts

@@ -3,7 +3,7 @@
 //
 
 import { Type } from '@dxos/echo';
-import { StoredSchema } from '@dxos/echo-schema';
+import { StoredSchema } from '@dxos/echo/internal';
 import { type Resource } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
 
@@ -190,10 +190,12 @@ export const translations = [
         'creating in collection label': 'In Collection',
         'clear input label': 'Clear',
         'expose object label': 'Expose in navtree',
+        'add tag label': 'Add tag',
         'advanced settings label': 'Advanced',
         'foreign keys': 'Foreign Keys',
         'add key': 'Add Key',
         'open space settings label': 'Open settings',
+        'related objects label': 'Related',
 
         'row details no selection label': 'No objects selected',
         'companion selected objects label': 'Selected',
@@ -229,6 +231,13 @@ export const translations = [
           'Archiving a space will remove it from the sidebar and stop replicating updates, but will not delete the data. You can unarchive it by enabling archived spaces in the app settings.',
         'archive space label': 'Archive',
         'unarchive space label': 'Unarchive',
+
+        'sync edge connected label': 'Edge connected',
+        'sync edge disconnected label': 'Edge disconnected',
+        'sync no connection label': 'No connection to edge service',
+        'sync latency label': 'Latency',
+        'sync upload label': 'Upload',
+        'sync download label': 'Download',
       },
     },
   },