@dxos/plugin-space 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -4,31 +4,24 @@
 
 import * as Effect from 'effect/Effect';
 import * as Function from 'effect/Function';
-import React, { useCallback, useRef, useState } from 'react';
+import * as Option from 'effect/Option';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  chain,
-  createIntent,
-  useCapabilities,
-  useIntentDispatcher,
-  usePluginManager,
-} from '@dxos/app-framework';
-import { Obj, Query, Type } from '@dxos/echo';
+import { Capabilities, LayoutAction, chain, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher, usePluginManager } from '@dxos/app-framework/react';
+import { Obj, Type } from '@dxos/echo';
+import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { type Space, getSpace, isLiveObject, isSpace, useQuery, useSpaces } from '@dxos/react-client/echo';
-import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+import { type Space, getSpace, isLiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
+import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
 import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
-import { DataType, getTypenameFromQuery } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
+import { type Collection } from '@dxos/schema';
 
-import { SpaceCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
 import { SpaceAction } from '../../types';
 
-import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
+import { CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from './CreateObjectPanel';
 
 export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
 
@@ -48,29 +41,39 @@ export const CreateObjectDialog = ({
   onCreateObject,
   shouldNavigate: _shouldNavigate,
 }: CreateObjectDialogProps) => {
-  const closeRef = useRef<HTMLButtonElement | null>(null);
   const manager = usePluginManager();
   const { t } = useTranslation(meta.id);
-  const client = useClient();
-  const spaces = useSpaces();
   const { dispatch } = useIntentDispatcher();
-  const forms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const [target, setTarget] = useState<Space | DataType.Collection | undefined>(initialTarget);
+  const [target, setTarget] = useState<Space | Collection.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) => getTypenameFromQuery(collection.query))
-    .filter(isNonNullable);
+  const client = useClient();
+  const spaces = useSpaces();
+  const closeRef = useRef<HTMLButtonElement | null>(null);
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (typename) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+    (typename) => {
+      const metadata = manager.context
+        .getCapabilities(Capabilities.Metadata)
+        .find(({ id }) => id === typename)?.metadata;
+      return metadata?.createObjectIntent ? (metadata as Metadata) : undefined;
+    },
     [manager],
   );
 
+  const space = isSpace(target) ? target : getSpace(target);
+  // TODO(wittjosiah): Support database schemas.
+  const schemas = space?.db.schemaRegistry.query({ location: ['runtime'] }).runSync();
+  const userSchemas = useMemo(
+    () =>
+      schemas
+        ?.filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
+        .filter((schema) => !!resolve(Type.getTypename(schema)))
+        .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false))) ?? [],
+    [schemas],
+  );
+
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    ({ form, data = {} }) =>
+    ({ metadata, data = {} }) =>
       Effect.gen(function* () {
         if (!target) {
           // TODO(wittjosiah): UI feedback.
@@ -82,11 +85,15 @@ export const CreateObjectDialog = ({
 
         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)) {
+        const { object } = yield* dispatch(metadata.createObjectIntent(data, { space }));
+        if (isLiveObject(object) && !Obj.instanceOf(Type.PersistentType, 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 hidden = !metadata.addToCollectionOnCreate;
+          const addObjectIntent = createIntent(SpaceAction.AddObject, {
+            target,
+            object,
+            hidden,
+          });
           const shouldNavigate = _shouldNavigate ?? (() => true);
           if (shouldNavigate(object)) {
             yield* dispatch(Function.pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
@@ -97,7 +104,7 @@ export const CreateObjectDialog = ({
           onCreateObject?.(object);
         }
       }).pipe(Effect.runPromise),
-    [dispatch, target, resolve, hiddenTypenames, _shouldNavigate],
+    [dispatch, target, resolve, _shouldNavigate],
   );
 
   return (
@@ -107,18 +114,28 @@ export const CreateObjectDialog = ({
       <div role='none' className={cardDialogHeader}>
         <Dialog.Title>
           {t('create object dialog title', {
-            object: t('typename label', { ns: typename, defaultValue: views ? 'View' : 'Item' }),
+            object: t('typename label', {
+              ns: typename,
+              defaultValue: views ? 'View' : 'Object',
+            }),
           })}
         </Dialog.Title>
         <Dialog.Close asChild>
-          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={4} />
-          </Button>
+          <IconButton
+            ref={closeRef}
+            icon='ph--x--regular'
+            size={4}
+            label='Close'
+            iconOnly
+            density='fine'
+            variant='ghost'
+            autoFocus
+          />
         </Dialog.Close>
       </div>
 
       <CreateObjectPanel
-        forms={forms}
+        schemas={userSchemas}
         spaces={spaces}
         target={target}
         views={views}

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -3,39 +3,46 @@
 //
 
 import * as Option from 'effect/Option';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Type } from '@dxos/echo';
-import { type BaseObject, type TypeAnnotation, ViewAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { type AnyProperties, type TypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
 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 { type Collection, ViewAnnotation } from '@dxos/schema';
 import { type MaybePromise, isNonNullable } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { meta } from '../../meta';
-import { type ObjectForm } from '../../types';
+import { type CreateObjectIntent } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
+export type Metadata = {
+  createObjectIntent: CreateObjectIntent;
+  inputSchema?: Schema.Schema.AnyNoContext;
+  addToCollectionOnCreate?: boolean;
+  icon?: string;
+};
+
 export type CreateObjectPanelProps = {
-  forms: ObjectForm[];
+  schemas: Schema.Schema.AnyNoContext[];
   spaces: Space[];
   typename?: string;
-  target?: Space | DataType.Collection;
+  target?: Space | Collection.Collection;
   views?: boolean;
-  initialFormValues?: Partial<BaseObject>;
+  initialFormValues?: Partial<AnyProperties>;
   defaultSpaceId?: SpaceId;
-  resolve?: (typename: string) => Record<string, any>;
+  resolve?: (typename: string) => Metadata | undefined;
   onTargetChange?: (target: Space) => void;
   onTypenameChange?: (typename: string) => void;
-  onCreateObject?: (params: { form: ObjectForm; data?: Record<string, any> }) => MaybePromise<void>;
+  onCreateObject?: (params: { metadata: Metadata; data?: Record<string, any> }) => MaybePromise<void>;
 };
 
 export const CreateObjectPanel = ({
-  forms,
+  schemas,
   spaces,
   typename,
   target,
@@ -49,16 +56,16 @@ export const CreateObjectPanel = ({
 }: CreateObjectPanelProps) => {
   const { t } = useTranslation(meta.id);
   const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
-  const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
-  const options: TypeAnnotation[] = forms
-    .filter((form) => {
+  const metadata = typename && resolve?.(typename);
+  const options: TypeAnnotation[] = schemas
+    .filter((schema) => {
       if (views == null) {
         return true;
       } else {
-        return views === ViewAnnotation.get(form.objectSchema).pipe(Option.getOrElse(() => false));
+        return views === ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false));
       }
     })
-    .map((form) => getTypeAnnotation(form.objectSchema))
+    .map((schema) => getTypeAnnotation(schema))
     .filter(isNonNullable)
     .sort((a, b) => {
       const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
@@ -68,39 +75,39 @@ export const CreateObjectPanel = ({
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
-      if (!form) {
+      if (!metadata) {
         return;
       }
-      await onCreateObject?.({ form, data: props });
+      await onCreateObject?.({ metadata, data: props });
     },
-    [onCreateObject, form],
+    [onCreateObject, metadata],
   );
 
   const handleSetTypename = useCallback(
     async (typename: string) => {
-      const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
-      if (form && !form.formSchema) {
-        await onCreateObject?.({ form });
+      const metadata = resolve?.(typename);
+      if (metadata && !metadata.inputSchema) {
+        await onCreateObject?.({ metadata });
       } else {
         onTypenameChange?.(typename);
       }
     },
-    [forms, onCreateObject],
+    [resolve, onCreateObject],
   );
 
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
   // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  return !form ? (
+  return !metadata ? (
     <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
   ) : !target ? (
     <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
-  ) : form.formSchema ? (
+  ) : metadata.inputSchema ? (
     <div role='none' className={cardDialogOverflow}>
       <Form
         autoFocus
         values={initialFormValues}
-        schema={form.formSchema}
+        schema={metadata.inputSchema}
         testId='create-object-form'
         onSave={handleCreateObject}
         lookupComponent={inputSurfaceLookup}
@@ -174,7 +181,7 @@ const SelectSchema = ({
             classNames='flex items-center gap-2'
           >
             <span className='flex gap-2 items-center grow truncate'>
-              <Icon icon={resolve?.(option.typename).icon ?? 'ph--placeholder--regular'} size={5} />
+              <Icon icon={resolve?.(option.typename)?.icon ?? 'ph--placeholder--regular'} size={5} />
               {t('typename label', { ns: option.typename, defaultValue: option.typename })}
             </span>
           </SearchList.Item>

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -6,8 +6,9 @@ import * as Effect from 'effect/Effect';
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
 
@@ -31,8 +32,18 @@ export const CreateSpaceDialog = () => {
     async (data: FormValues) => {
       const program = Effect.gen(function* () {
         const { space } = yield* dispatch(createIntent(SpaceAction.Create, data));
-        yield* dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
-        yield* dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
+        yield* dispatch(
+          createIntent(LayoutAction.SwitchWorkspace, {
+            part: 'workspace',
+            subject: space.id,
+          }),
+        );
+        yield* dispatch(
+          createIntent(LayoutAction.UpdateDialog, {
+            part: 'dialog',
+            options: { state: false },
+          }),
+        );
       });
       await Effect.runPromise(program);
     },
@@ -46,9 +57,16 @@ export const CreateSpaceDialog = () => {
       <div role='none' className={cardDialogHeader}>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
-          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={4} />
-          </Button>
+          <IconButton
+            ref={closeRef}
+            icon='ph--x--regular'
+            size={4}
+            label='Close'
+            iconOnly
+            density='fine'
+            variant='ghost'
+            autoFocus
+          />
         </Dialog.Close>
       </div>
       <div role='none' className='contents'>

package/src/components/{JoinDialog.tsx → JoinDialog/JoinDialog.tsx}

@@ -4,7 +4,8 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useAppGraph, useIntentDispatcher } from '@dxos/app-framework/react';
 import { Trigger } from '@dxos/async';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';
@@ -13,7 +14,7 @@ import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
 
 export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
 
@@ -69,7 +70,12 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         space = await trigger.wait();
       }
 
-      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+      await dispatch(
+        createIntent(LayoutAction.SwitchWorkspace, {
+          part: 'workspace',
+          subject: space.id,
+        }),
+      );
 
       // TODO(wittjosiah): If navigableCollections is false and there's no target,
       //   should try to navigate to the first object of the space replicates.
@@ -80,8 +86,18 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         // If the target has not yet replicated, this will trigger a loading toast.
         await graph.waitForPath({ target }).catch(() => {});
         await Promise.all([
-          dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [target] })),
-          dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: target })),
+          dispatch(
+            createIntent(LayoutAction.Open, {
+              part: 'main',
+              subject: [target],
+            }),
+          ),
+          dispatch(
+            createIntent(LayoutAction.Expose, {
+              part: 'navigation',
+              subject: target,
+            }),
+          ),
         ]);
       }
 

package/src/components/JoinDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './JoinDialog';

package/src/components/{MembersContainer.stories.tsx → MembersContainer/MembersContainer.stories.tsx}

@@ -13,7 +13,7 @@ import { withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
 import { render } from '@dxos/storybook-utils';
 
-import { translations } from '../translations';
+import { translations } from '../../translations';
 
 import { MembersContainer } from './MembersContainer';
 

package/src/components/{MembersContainer.tsx → MembersContainer/MembersContainer.tsx}

@@ -5,15 +5,17 @@
 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 { createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
-import { type Space, fullyQualifiedId, useSpaceInvitations } from '@dxos/react-client/echo';
+import { type Space, 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 { ControlFrame, ControlFrameItem, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { Collection } from '@dxos/schema';
 import {
   type ActionMenuItem,
   AuthCode,
@@ -26,9 +28,9 @@ import {
 } from '@dxos/shell/react';
 import { hexToEmoji } from '@dxos/util';
 
-import { meta } from '../meta';
-import { SpaceAction } from '../types';
-import { COMPOSER_SPACE_LOCK } from '../util';
+import { meta } from '../../meta';
+import { SpaceAction } from '../../types';
+import { COMPOSER_SPACE_LOCK } from '../../util';
 
 // TODO(wittjosiah): Copied from Shell.
 const activeActionKey = 'dxos:react-shell/space-manager/active-action';
@@ -63,7 +65,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[DataType.Collection.typename]?.target?.objects[0]?.target;
+  const target = space.properties[Collection.Collection.typename]?.target?.objects[0]?.target;
 
   const locked = space.properties[COMPOSER_SPACE_LOCK];
   const handleChangeLocked = useCallback(() => {
@@ -84,7 +86,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
               type: Invitation.Type.INTERACTIVE,
               authMethod: Invitation.AuthMethod.SHARED_SECRET,
               multiUse: false,
-              target: target && fullyQualifiedId(target),
+              target: target && Obj.getDXN(target).toString(),
             }),
           );
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
@@ -106,7 +108,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
               type: Invitation.Type.DELEGATED,
               authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
               multiUse: true,
-              target: target && fullyQualifiedId(target),
+              target: target && Obj.getDXN(target).toString(),
             }),
           );
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {

package/src/components/MembersContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MembersContainer';

package/src/components/{ObjectDetailsPanel.tsx → ObjectDetailsPanel/ObjectDetailsPanel.tsx}

@@ -2,24 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { type JsonPath, setValue } from '@dxos/echo/internal';
-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 { getTypenameFromQuery } from '@dxos/schema';
+import { type View, getTypenameFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
 
-type RowDetailsPanelProps = { objectId: string; view: DataType.View };
+import { ObjectForm } from './ObjectForm';
 
-const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
+type RowDetailsPanelProps = { objectId: string; view: View.View };
+
+export const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
   const space = getSpace(view);
@@ -30,24 +28,6 @@ const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
   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'>
@@ -63,17 +43,9 @@ const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
       {schema &&
         selectedObjects.map((object) => (
           <div key={object.id} className='border border-separator rounded'>
-            <Form
-              autoSave
-              schema={schema}
-              values={object}
-              onSave={handleSave}
-              onQueryRefOptions={handleRefQueryLookup}
-            />
+            <ObjectForm object={object} schema={schema} />
           </div>
         ))}
     </div>
   );
 };
-
-export default ObjectDetailsPanel;

package/src/components/ObjectDetailsPanel/ObjectForm.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { DXN, Obj, type Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, setValue } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+import { isNonNullable } from '@dxos/util';
+
+import { meta as pluginMeta } from '../../meta';
+
+const TagSchema = Tag.Tag.pipe(Schema.omit('id'));
+
+type ObjectFormProps = { object: Obj.Any; schema: Schema.Schema.AnyNoContext };
+
+export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
+  const space = getSpace(object);
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const formSchema = useMemo(
+    () => Schema.Struct({ tags: Schema.Array(Type.Ref(Tag.Tag)).pipe(Schema.optional) }).pipe(Schema.extend(schema)),
+    [schema],
+  );
+
+  const meta = Obj.getMeta(object);
+  const tags = (meta.tags ?? []).map((tag) => space?.db.makeRef(DXN.parse(tag))).filter(isNonNullable);
+  const values = useMemo(() => ({ tags, ...object }), [object, tags]);
+
+  const handleCreateTag = useCallback((values: Schema.Schema.Type<typeof TagSchema>) => {
+    invariant(space);
+    const tag = space.db.add(Tag.make(values));
+    const meta = Obj.getMeta(object);
+    meta.tags = [...(meta.tags ?? []), Obj.getDXN(tag).toString()];
+  }, []);
+
+  const handleSave = useCallback(
+    ({ tags, ...values }: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+      for (const path of changedPaths) {
+        if (path === 'tags') {
+          const meta = Obj.getMeta(object);
+          meta.tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+          continue;
+        }
+
+        const value = values[path];
+        setValue(object, path, value);
+      }
+    },
+    [object],
+  );
+
+  return (
+    <Form
+      autoSave
+      schema={formSchema}
+      values={values}
+      createSchema={TagSchema}
+      createOptionIcon='ph--plus--regular'
+      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
+      createInitialValuePath='label'
+      onCreate={handleCreateTag}
+      onSave={handleSave}
+      onQueryRefOptions={handleRefQueryLookup}
+    />
+  );
+};

package/src/components/ObjectDetailsPanel/index.ts

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