@dxos/plugin-space 0.8.3 → 0.8.4-main.1da679c

package/src/components/AwaitingObject.tsx

@@ -2,14 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CheckCircle, CircleDashed, CircleNotch } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher, useLayout } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher, useLayout } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Filter, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
-import { Button, Toast, useTranslation } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { SpaceAction } from '../types';
@@ -66,17 +64,17 @@ export const AwaitingObject = ({ id }: { id: string }) => {
         <Toast.Title classNames='flex items-center gap-2'>
           {found ? (
             <>
-              <CheckCircle className={getSize(5)} />
+              <Icon icon='ph--check-circle--regular' size={5} />
               <span>{t('found object label')}</span>
             </>
           ) : waiting ? (
             <>
-              <CircleNotch className={mx(getSize(5), 'animate-spin')} />
+              <Icon icon='ph--circle-notch--regular' size={5} classNames='animate-spin' />
               <span>{t('waiting for object label')}</span>
             </>
           ) : (
             <>
-              <CircleDashed className={getSize(5)} />
+              <Icon icon='ph--circle-dashed--regular' size={5} />
               <span>{t('object not found label')}</span>
             </>
           )}

package/src/components/CollectionMain.tsx

@@ -28,3 +28,5 @@ export const CollectionMain = ({ collection }: { collection: DataType.Collection
     </div>
   );
 };
+
+export default CollectionMain;

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
 import { Filter, Obj, Type } from '@dxos/echo';
@@ -12,24 +12,25 @@ import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
-import { osTranslations } from '@dxos/shell/react';
+import { translations as shellTranslations } from '@dxos/shell/react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
+import { translations } from '../../translations';
+
 import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
-import translations from '../../translations';
 
-const Story = (args: CreateObjectDialogProps) => {
+const Story = (props: CreateObjectDialogProps) => {
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>
-        <CreateObjectDialog {...args} />
+        <CreateObjectDialog {...props} />
       </Dialog.Overlay>
     </Dialog.Root>
   );
 };
 
 // TODO(wittjosiah): Story should be for CreateObjectPanel.
-const meta: Meta<typeof CreateObjectDialog> = {
+const meta = {
   title: 'plugins/plugin-space/CreateObjectDialog',
   component: CreateObjectDialog,
   render: Story,
@@ -39,10 +40,10 @@ const meta: Meta<typeof CreateObjectDialog> = {
     withLayout(),
   ],
   parameters: {
-    translations: [...translations, osTranslations],
+    translations: [...translations, ...shellTranslations],
   },
   args: {},
-};
+} satisfies Meta<typeof CreateObjectDialog>;
 
 export default meta;
 

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Effect, pipe } from 'effect';
 import React, { useCallback, useRef, useState } from 'react';
 
 import {
@@ -14,30 +14,37 @@ import {
   useIntentDispatcher,
   usePluginManager,
 } from '@dxos/app-framework';
-import { Query, Type, type Obj } from '@dxos/echo';
+import { Obj, Query, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { getSpace, isLiveObject, isSpace, type Space, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { type Space, getSpace, isLiveObject, isSpace, useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { DataType, typenameFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
 import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
 import { SpaceAction } from '../../types';
 
+import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
+
 export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
-export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'name'> & {
+export type CreateObjectDialogProps = Pick<
+  CreateObjectPanelProps,
+  'target' | 'views' | 'typename' | 'initialFormValues'
+> & {
+  onCreateObject?: (object: Obj.Any) => void;
   shouldNavigate?: (object: Obj.Any) => boolean;
 };
 
 export const CreateObjectDialog = ({
   target: initialTarget,
   typename: initialTypename,
-  name,
+  views,
+  initialFormValues,
+  onCreateObject,
   shouldNavigate: _shouldNavigate,
 }: CreateObjectDialogProps) => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
@@ -45,13 +52,15 @@ export const CreateObjectDialog = ({
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const spaces = useSpaces();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { dispatch } = useIntentDispatcher();
   const forms = useCapabilities(SpaceCapabilities.ObjectForm);
   const [target, setTarget] = useState<Space | DataType.Collection | undefined>(initialTarget);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const space = isSpace(target) ? target : getSpace(target);
   const queryCollections = useQuery(space, Query.type(DataType.QueryCollection));
-  const hiddenTypenames = queryCollections.map((collection) => collection.query.typename).filter(isNonNullable);
+  const hiddenTypenames = queryCollections
+    .map((collection) => typenameFromQuery(collection.query))
+    .filter(isNonNullable);
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
     (typename) =>
@@ -60,31 +69,33 @@ export const CreateObjectDialog = ({
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    async ({ form, data = {} }) => {
-      if (!target) {
-        // TODO(wittjosiah): UI feedback.
-        return;
-      }
+    ({ form, data = {} }) =>
+      Effect.gen(function* () {
+        if (!target) {
+          // TODO(wittjosiah): UI feedback.
+          return;
+        }
+
+        // NOTE: Must close before navigating or attention won't follow object.
+        closeRef.current?.click();
 
-      // NOTE: Must close before navigating or attention won't follow object.
-      closeRef.current?.click();
+        const space = isSpace(target) ? target : getSpace(target);
+        invariant(space, 'Missing space');
+        const { object } = yield* dispatch(form.getIntent(data, { space }));
+        if (isLiveObject(object) && !Obj.instanceOf(DataType.StoredSchema, object)) {
+          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
+          const hidden = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
+          const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
+          const shouldNavigate = _shouldNavigate ?? (() => true);
+          if (shouldNavigate(object)) {
+            yield* dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
+          } else {
+            yield* dispatch(addObjectIntent);
+          }
 
-      const space = isSpace(target) ? target : getSpace(target);
-      invariant(space, 'Missing space');
-      const result = await dispatch(form.getIntent(data, { space }));
-      const object = result.data?.object;
-      if (isLiveObject(object)) {
-        // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
-        const hidden = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
-        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
-        const shouldNavigate = _shouldNavigate ?? (() => true);
-        if (shouldNavigate(object)) {
-          await dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
-        } else {
-          await dispatch(addObjectIntent);
+          onCreateObject?.(object);
         }
-      }
-    },
+      }).pipe(Effect.runPromise),
     [dispatch, target, resolve, hiddenTypenames, _shouldNavigate],
   );
 
@@ -94,7 +105,9 @@ export const CreateObjectDialog = ({
     <Dialog.Content classNames={cardDialogContent}>
       <div role='none' className={cardDialogHeader}>
         <Dialog.Title>
-          {t('create object dialog title', { object: t('typename label', { ns: typename, defaultValue: 'Item' }) })}
+          {t('create object dialog title', {
+            object: t('typename label', { ns: typename, defaultValue: views ? 'View' : 'Item' }),
+          })}
         </Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
@@ -107,8 +120,9 @@ export const CreateObjectDialog = ({
         forms={forms}
         spaces={spaces}
         target={target}
+        views={views}
         typename={typename}
-        name={name}
+        initialFormValues={initialFormValues}
         defaultSpaceId={client.spaces.default.id}
         resolve={resolve}
         onTargetChange={setTarget}

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,17 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Option } from 'effect';
 import React, { useCallback } from 'react';
 
 import { Type } from '@dxos/echo';
-import { getTypeAnnotation, type TypeAnnotation } from '@dxos/echo-schema';
-import { type SpaceId, type Space } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type BaseObject, type TypeAnnotation, ViewAnnotation, getTypeAnnotation } from '@dxos/echo-schema';
+import { type Space, type SpaceId } from '@dxos/react-client/echo';
+import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
 import { type DataType } from '@dxos/schema';
-import { isNonNullable, type MaybePromise } from '@dxos/util';
+import { type MaybePromise, isNonNullable } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
@@ -24,7 +25,8 @@ export type CreateObjectPanelProps = {
   spaces: Space[];
   typename?: string;
   target?: Space | DataType.Collection;
-  name?: string;
+  views?: boolean;
+  initialFormValues?: Partial<BaseObject>;
   defaultSpaceId?: SpaceId;
   resolve?: (typename: string) => Record<string, any>;
   onTargetChange?: (target: Space) => void;
@@ -37,7 +39,8 @@ export const CreateObjectPanel = ({
   spaces,
   typename,
   target,
-  name: initialName,
+  views,
+  initialFormValues: _initialFormValues,
   defaultSpaceId,
   resolve,
   onTargetChange,
@@ -45,8 +48,16 @@ export const CreateObjectPanel = ({
   onCreateObject,
 }: CreateObjectPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
+  const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
   const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
   const options: TypeAnnotation[] = forms
+    .filter((form) => {
+      if (views == null) {
+        return true;
+      } else {
+        return views === ViewAnnotation.get(form.objectSchema).pipe(Option.getOrElse(() => false));
+      }
+    })
     .map((form) => getTypeAnnotation(form.objectSchema))
     .filter(isNonNullable)
     .sort((a, b) => {
@@ -88,7 +99,7 @@ export const CreateObjectPanel = ({
     <div role='none' className={cardDialogOverflow}>
       <Form
         autoFocus
-        values={{ name: initialName }}
+        values={initialFormValues}
         schema={form.formSchema}
         testId='create-object-form'
         onSave={handleCreateObject}

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -5,7 +5,7 @@
 import { Effect, type Schema } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';

package/src/components/JoinDialog.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { Trigger } from '@dxos/async';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';

package/src/components/MembersContainer.stories.tsx

@@ -4,27 +4,52 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { osTranslations } from '@dxos/shell/react';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { translations as shellTranslations } from '@dxos/shell/react';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { translations } from '../translations';
 
 import { MembersContainer } from './MembersContainer';
-import translations from '../translations';
 
-const meta: Meta = {
+const DefaultStory = () => {
+  const space = useSpace();
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <MembersContainer
+      space={space}
+      createInvitationUrl={(invitationCode) => `https://dxos.org/invite/${invitationCode}`}
+    />
+  );
+};
+
+const meta = {
   title: 'plugins/plugin-space/MembersContainer',
-  component: MembersContainer,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
+  component: MembersContainer as any,
+  render: render(DefaultStory),
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+    }),
+    withTheme,
+    withLayout(),
+  ],
   parameters: {
     layout: 'fullscreen',
-    translations: [...translations, osTranslations],
+    translations: [...translations, ...shellTranslations],
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof MembersContainer>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/MembersContainer.tsx

@@ -2,20 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Check, X } from '@phosphor-icons/react';
 import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
-import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
+import { type Space, fullyQualifiedId, useSpaceInvitations } from '@dxos/react-client/echo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/react-ui';
-import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
+import { ControlFrame, ControlFrameItem, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
-import { getSize, mx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
 import {
   type ActionMenuItem,
@@ -44,13 +41,12 @@ const handleInvitationEvent = (invitation: Invitation, subscription: ZenObservab
   }
 };
 
-export const MembersContainer = ({
-  space,
-  createInvitationUrl,
-}: {
+export type MembersContainerProps = {
   space: Space;
   createInvitationUrl: (invitationCode: string) => string;
-}) => {
+};
+
+export const MembersContainer = ({ space, createInvitationUrl }: MembersContainerProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const config = useConfig();
   const { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -67,7 +63,7 @@ export const MembersContainer = ({
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[Type.getTypename(DataType.Collection)]?.target?.objects[0]?.target;
+  const target = space.properties[DataType.Collection.typename]?.target?.objects[0]?.target;
 
   const locked = space.properties[COMPOSER_SPACE_LOCK];
   const handleChangeLocked = useCallback(() => {
@@ -171,7 +167,7 @@ export const MembersContainer = ({
               )}
             </ControlFrame>
             {/* TODO(wittjosiah): Make ControlItemInput & ControlFrame compatible. */}
-            <div className='justify-center gap-4 p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
+            <div className='justify-center p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
               <ControlItemInput title={t('space locked label')} description={t('space locked description')}>
                 <Input.Switch checked={locked} onCheckedChange={handleChangeLocked} classNames='justify-self-end' />
               </ControlItemInput>
@@ -281,5 +277,9 @@ const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string;
 };
 
 const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
-  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+  return statusValue > 0 ? (
+    <Icon icon='ph--check--regular' size={6} classNames='m-1.5' />
+  ) : (
+    <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />
+  );
 };

package/src/components/MenuFooter.tsx

@@ -2,13 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 
 import { getSpace } from '@dxos/client/echo';
 import { type Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
-import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { getSpaceDisplayName } from '../util';
@@ -25,7 +24,7 @@ export const MenuFooter = ({ object }: { object: Obj.Any }) => {
       <dl className='pis-2 mbe-2 text-xs grid grid-cols-[max-content_1fr] gap-2'>
         <dt className='uppercase text-[.75em] tracking-wide font-medium mbs-px self-start'>{t('location label')}</dt>
         <dd className='line-clamp-3'>
-          <Planet className='inline-block mie-1' />
+          <Icon icon='ph--planet--regular' classNames='inline-block mie-1' />
           {toLocalizedString(spaceName, t)}
         </dd>
       </dl>

package/src/components/ObjectDetailsPanel.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type JsonPath, setValue } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { useClient } from '@dxos/react-client';
+import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Callout, useTranslation } from '@dxos/react-ui';
+import { useSelected } from '@dxos/react-ui-attention';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+import { type DataType } from '@dxos/schema';
+import { typenameFromQuery } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
+
+import { SPACE_PLUGIN } from '../meta';
+
+type RowDetailsPanelProps = { objectId: string; view: DataType.View };
+
+const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const space = getSpace(view);
+  const typename = view.query ? typenameFromQuery(view.query) : undefined;
+  const schema = useSchema(client, space, typename);
+
+  const queriedObjects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const selectedRows = useSelected(objectId, 'multi');
+  const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
+
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const handleSave = useCallback(
+    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
+      const id = values.id;
+      invariant(typeof id === 'string');
+      const object = queriedObjects.find((obj) => obj.id === id);
+      invariant(object);
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+      for (const path of changedPaths) {
+        const value = values[path];
+        setValue(object, path, value);
+      }
+    },
+    [queriedObjects],
+  );
+
+  if (selectedObjects.length === 0) {
+    return (
+      <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
+        <Callout.Root classNames='is-full'>
+          <Callout.Title>{t('row details no selection label')}</Callout.Title>
+        </Callout.Root>
+      </div>
+    );
+  }
+
+  return (
+    <div role='none' className='bs-full is-full flex flex-col p-2 gap-1 overflow-y-auto'>
+      {schema &&
+        selectedObjects.map((object) => (
+          <div key={object.id} className='border border-separator rounded'>
+            <Form
+              autoSave
+              schema={schema}
+              values={object}
+              onSave={handleSave}
+              onQueryRefOptions={handleRefQueryLookup}
+            />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default ObjectDetailsPanel;

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -9,9 +9,10 @@ import { ForeignKey } from '@dxos/echo-schema';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { ForeignKeys } from './ForeignKeys';
 import { SPACE_PLUGIN } from '../../meta';
 
+import { ForeignKeys } from './ForeignKeys';
+
 const initialValues = {
   source: '',
   id: '',

package/src/components/ObjectSettings/ObjectSettingsContainer.tsx

@@ -6,7 +6,7 @@ import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework';
 import { type Obj } from '@dxos/echo';
-import { Clipboard } from '@dxos/react-ui';
+import { Clipboard, Toolbar } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { BaseObjectSettings } from './BaseObjectSettings';
@@ -21,7 +21,8 @@ export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContaine
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content toolbar={false}>
+      <StackItem.Content toolbar>
+        <Toolbar.Root></Toolbar.Root>
         <div role='none' className='overflow-y-auto pli-cardSpacingInline plb-cardSpacingBlock'>
           <BaseObjectSettings object={object}>
             <Surface role='base-object-settings' data={data} />

package/src/components/PersistenceStatus.tsx

@@ -2,13 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ArrowsCounterClockwise, CheckCircle, Warning } from '@phosphor-icons/react';
 import React, { useEffect, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import { type EchoDatabase } from '@dxos/react-client/echo';
-import { Tooltip, useTranslation } from '@dxos/react-ui';
-import { getSize, mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
+import { Icon, Tooltip, useTranslation } from '@dxos/react-ui';
+import { mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
 
 import { SPACE_PLUGIN } from '../meta';
 
@@ -54,14 +53,14 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
     case Status.ERROR:
       return (
         <div className='flex items-center'>
-          <Warning className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--warning--regular' size={4} classNames='me-1' />
           <span className={mx('text-sm', warningText)}>{t('persistence error label')}</span>
         </div>
       );
     case Status.PENDING:
       return (
         <div className='flex items-center'>
-          <ArrowsCounterClockwise className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--arrows-counter-clockwise--regular' size={4} classNames='me-1' />
           <span className={mx('text-sm', staticPlaceholderText)}>{t('persistence pending label')}</span>
         </div>
       );
@@ -74,7 +73,7 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
           content={t('persisted locally message')}
           className='flex items-center'
         >
-          <CheckCircle className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--check-circle--regular' size={4} classNames='me-1' />
           {displayMessage && (
             <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
           )}