@dxos/plugin-space 0.8.4-main.3f58842 → 0.8.4-main.406dc2a

package/src/components/SpacePresence.stories.tsx

@@ -2,19 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 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 { FullPresence, type MemberPresenceProps, SmallPresence, type Member } from './SpacePresence';
 import { translations } from '../translations';
 
-const nViewers = (n: number, currentlyAttended = true): Member[] =>
+import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
+
+const viewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
     role: HaloSpaceMember.Role.ADMIN,
     identity: { did: IdentityDid.random(), identityKey: PublicKey.random() },
@@ -23,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,
@@ -31,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>
   );
@@ -97,11 +106,3 @@ export const Small = () => {
     </div>
   );
 };
-
-const meta: Meta = {
-  title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme, withLayout()],
-  parameters: { translations },
-};
-
-export default meta;

package/src/components/SpacePresence.tsx

@@ -2,34 +2,34 @@
 // 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';
 import { generateName } from '@dxos/display-name';
 import { type Type } from '@dxos/echo';
 import { PublicKey, useClient } from '@dxos/react-client';
-import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/react-client/echo';
+import { type SpaceMember, fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import {
   Avatar,
   type AvatarContentProps,
+  type DxAvatar,
+  List,
+  ListItem,
+  Popover,
   type Size,
   type ThemedClassName,
   Tooltip,
-  Popover,
-  useTranslation,
-  List,
-  ListItem,
   useDefaultValue,
-  type DxAvatar,
+  useTranslation,
 } from '@dxos/react-ui';
-import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
+import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
 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,37 +2,45 @@
 // 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 { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
 import { translations } from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
+import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+
+const Story = (props: Partial<SpaceSettingsContainerProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...args} space={space!} />
+      <SpaceSettingsContainer {...props} space={space!} />
     </div>
   );
 };
 
-const meta: Meta = {
+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',
   },
-};
+} satisfies Meta<typeof SpaceSettingsContainer>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default: StoryObj<typeof SpaceSettingsContainer> = {};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,27 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema } from 'effect';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { SpaceState, type Space } from '@dxos/react-client/echo';
+import { type Space, SpaceState } from '@dxos/react-client/echo';
 import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
 import {
-  Form,
-  type InputComponent,
   ControlItem,
   ControlItemInput,
-  ControlSection,
   ControlPage,
+  ControlSection,
+  Form,
+  type InputComponent,
 } from '@dxos/react-ui-form';
 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 pli-2'>
+    <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}
@@ -175,7 +176,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
             onSave={handleSave}
             Custom={customElements}
             outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
+            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
           />
         </ControlSection>
       </ControlPage>

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,16 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/storybook-utils';
+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],
@@ -19,11 +18,11 @@ const meta: Meta = {
     translations,
     layout: 'centered',
   },
-};
+} 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,18 @@
 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 { Unit } 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;
 
@@ -30,7 +35,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;
@@ -54,5 +59,88 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   const title = t(`${status} label`);
   const icon = <Icon icon={getIcon(status)} size={4} 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='p-3 min-w-[240px]'>
+      {/* Connection Status Header */}
+      <div className='flex items-center gap-2 mb-3 pb-2 border-b border-neutral-100 dark:border-neutral-800'>
+        <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-success-500 animate-pulse' : 'bg-error-500'}`} />
+        <span className='font-medium text-sm text-neutral-900 dark:text-neutral-100'>
+          {isConnected ? t('Edge connected') : t('Edge disconnected')}
+        </span>
+      </div>
+
+      {/* Connection Details */}
+      {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (
+        <div className='flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400'>
+          <Icon icon='ph--cloud-x--regular' size={4} />
+          <span>{t('No connection to edge service')}</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-neutral-600 dark:text-neutral-400'>
+              <Icon icon='ph--timer--regular' size={4} />
+              <span>{t('Latency')}</span>
+            </div>
+            <span className='text-sm font-mono text-neutral-900 dark:text-neutral-100'>{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-neutral-600 dark:text-neutral-400'>
+              <Icon icon='ph--arrow-up--regular' size={4} />
+              <span>{t('Upload')}</span>
+            </div>
+            <span className='text-sm font-mono text-neutral-900 dark:text-neutral-100'>
+              {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-neutral-600 dark:text-neutral-400'>
+              <Icon icon='ph--arrow-down--regular' size={4} />
+              <span>{t('Download')}</span>
+            </div>
+            <span className='text-sm font-mono text-neutral-900 dark:text-neutral-100'>
+              {Unit.Kilobyte(status.rateBytesDown, 0)}/s
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };

package/src/components/ViewEditor.tsx

@@ -2,15 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
+import { type QueryAST, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
-import { ViewEditor as NativeViewEditor } from '@dxos/react-ui-form';
-import { DataType } from '@dxos/schema';
+import { getSpace, useSchema } from '@dxos/react-client/echo';
+import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
+import { type DataType, getTypenameFromQuery } from '@dxos/schema';
 
 import { SpaceAction } from '../types';
 
@@ -20,24 +20,18 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const space = getSpace(view);
-  const schema = useSchema(client, space, view.query.typename);
+  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const schema = useSchema(client, space, typename);
 
-  const views = useQuery(space, Filter.type(DataType.View));
-  const currentTypename = useMemo(() => view.query?.typename, [view.query?.typename]);
-
-  const handleUpdateTypename = useCallback(
-    (typename: string) => {
+  const handleUpdateQuery = useCallback(
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
 
-      const matchingViews = views.filter((view) => view.query.typename === currentTypename);
-      for (const view of matchingViews) {
-        view.query.typename = typename;
-      }
-
-      schema.updateTypename(typename);
+      view.query.ast = newQuery;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
     },
-    [views, schema],
+    [view, schema],
   );
 
   const handleDelete = useCallback(
@@ -52,11 +46,11 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
   }
 
   return (
-    <NativeViewEditor
+    <NaturalViewEditor
       registry={space.db.schemaRegistry}
       schema={schema}
       view={view}
-      onTypenameChanged={Type.isMutable(schema) ? handleUpdateTypename : undefined}
+      onQueryChanged={Type.isMutable(schema) ? handleUpdateQuery : undefined}
       onDelete={Type.isMutable(schema) ? handleDelete : undefined}
       outerSpacing={false}
     />

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,3 +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

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { defineEvent, Events } from '@dxos/app-framework';
+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/useActiveSpace.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, useLayout, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, useLayout } from '@dxos/app-framework';
 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);
+  const layout = context.getCapability(Capabilities.Layout);
   const { spaceId } = parseId(layout.workspace);
   return spaceId ? client.spaces.get(spaceId) : undefined;
 };

package/src/hooks/useInputSurfaceLookup.tsx

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { usePluginManager, isSurfaceAvailable, Surface } from '@dxos/app-framework';
+import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
 import { type InputProps } from '@dxos/react-ui-form';
 
 // TODO(ZaymonFC): Move this if you find yourself needing it elsewhere.