@dxos/plugin-space 0.10.0 → 0.11.1

package/src/components/CreateObjectPanel/CreateObjectPanel.tsx

@@ -8,7 +8,7 @@ import { type Collection, type Database, Obj } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { type SpaceId } from '@dxos/keys';
 import { type Space } from '@dxos/react-client/echo';
-import { Column, Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
+import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
 import { Form, omitId } from '@dxos/react-ui-form';
 import { Picker } from '@dxos/react-ui-list';
 import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
@@ -115,27 +115,23 @@ export const CreateObjectPanel = ({
   }
 
   if (metadata.inputSchema) {
-    // The host (Dialog.Body) already owns the gutter Column. Use Column.Center to place the form in
-    // the same center column as the dialog title — NOT a subgrid wrapper or Form.Viewport's own
-    // Column.Root. Subgrid can't propagate through Form.Root's `display: contents` wrapper (the form
-    // would fall back to a stray track and inset), and a nested Column.Root would double-gutter it.
     return (
-      <Column.Center>
-        <Form.Root
-          autoFocus
-          schema={inputSchema}
-          defaultValues={initialFormValues}
-          fieldProvider={inputSurfaceLookup}
-          db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
-          onSave={handleCreateObject}
-          testId='create-object-form'
-        >
+      <Form.Root
+        autoFocus
+        schema={inputSchema}
+        defaultValues={initialFormValues}
+        fieldProvider={inputSurfaceLookup}
+        db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
+        onSave={handleCreateObject}
+        testId='create-object-form'
+      >
+        <Form.Viewport>
           <Form.Content>
             <Form.FieldSet />
             <Form.Submit />
           </Form.Content>
-        </Form.Root>
-      </Column.Center>
+        </Form.Viewport>
+      </Form.Root>
     );
   }
 
@@ -153,7 +149,9 @@ const SelectType = ({ options, onChange }: SelectTypeProps) => {
 
   const { results, handleSearch } = useSearchListResults({
     items: options,
-    extract: (option) => option.label,
+    // Match the type label as well as the contributing plugin name / description so a plugin
+    // name (e.g. "Blogger") surfaces the types it contributes.
+    extract: (option) => [option.label, option.plugin, option.description].filter(Boolean).join(' '),
   });
 
   return (

package/src/components/SyncStatus/status.test.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { type StatusInput, getStatus } from './status';
+
+describe('getStatus', () => {
+  test('unsaved work takes precedence', () => {
+    expect(getStatus(createInput({ saved: false, offline: true, stalled: true }))).toBe('saving-locally');
+  });
+
+  test('offline with nothing outstanding is persisted', () => {
+    expect(getStatus(createInput({ offline: true }))).toBe('offline-persisted');
+  });
+
+  test('offline with outstanding work is disconnected', () => {
+    expect(getStatus(createInput({ offline: true, needsToUpload: true }))).toBe('disconnected');
+    expect(getStatus(createInput({ offline: true, needsToDownload: true }))).toBe('disconnected');
+  });
+
+  test('stalled outranks the transfer direction', () => {
+    expect(getStatus(createInput({ stalled: true, needsToDownload: true }))).toBe('stalled');
+  });
+
+  test('stalled is never reported while offline', () => {
+    expect(getStatus(createInput({ offline: true, stalled: true, needsToDownload: true }))).toBe('disconnected');
+  });
+
+  test('transfer direction', () => {
+    expect(getStatus(createInput({ needsToDownload: true }))).toBe('downloading');
+    expect(getStatus(createInput({ needsToUpload: true }))).toBe('uploading');
+    expect(getStatus(createInput({ needsToUpload: true, needsToDownload: true }))).toBe('downloading');
+  });
+
+  test('nothing outstanding while online', () => {
+    expect(getStatus(createInput())).toBe('remote-synced');
+  });
+});
+
+const createInput = (props: Partial<StatusInput> = {}): StatusInput => ({
+  offline: false,
+  saved: true,
+  stalled: false,
+  needsToUpload: false,
+  needsToDownload: false,
+  ...props,
+});

package/src/components/SyncStatus/status.ts

@@ -2,27 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-export type Status = 'saving-locally' | 'downloading' | 'uploading' | 'offline-persisted' | 'remote-synced';
+export type Status =
+  | 'saving-locally'
+  | 'downloading'
+  | 'uploading'
+  | 'stalled'
+  | 'disconnected'
+  | 'offline-persisted'
+  | 'remote-synced';
 
-export const getStatus = ({
-  offline,
-  saved,
-  needsToUpload,
-  needsToDownload,
-}: {
+export type StatusInput = {
   offline: boolean;
   saved: boolean;
+  /** Replication is outstanding but making no progress. */
+  stalled: boolean;
   needsToUpload: boolean;
   needsToDownload: boolean;
-}): Status => {
+};
+
+export const getStatus = ({ offline, saved, stalled, needsToUpload, needsToDownload }: StatusInput): Status => {
   if (!saved) {
     return 'saving-locally';
-  } else if (!offline && needsToDownload) {
+  } else if (offline) {
+    // Offline with nothing outstanding is durable; offline with pending work is not.
+    return needsToUpload || needsToDownload ? 'disconnected' : 'offline-persisted';
+  } else if (stalled) {
+    return 'stalled';
+  } else if (needsToDownload) {
     return 'downloading';
-  } else if (!offline && needsToUpload) {
+  } else if (needsToUpload) {
     return 'uploading';
-  } else if (offline && !needsToUpload && !needsToDownload) {
-    return 'offline-persisted';
   } else {
     return 'remote-synced';
   }
@@ -36,6 +45,10 @@ export const getIcon = (status: Status) => {
       return 'ph--cloud-arrow-down--regular';
     case 'uploading':
       return 'ph--cloud-arrow-up--regular';
+    case 'stalled':
+      return 'ph--cloud-warning--regular';
+    case 'disconnected':
+      return 'ph--cloud-slash--regular';
     case 'offline-persisted':
       return 'ph--check-circle--regular';
     case 'remote-synced':

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { GraphPath, LayoutOperation } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Collection, Obj } from '@dxos/echo';
 import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
@@ -92,8 +92,8 @@ const useCollectionItems = (collection: Collection.Collection, attendableId?: st
       objects.map((obj) => {
         const iconAnnotation = Obj.getIcon(obj);
         const targetPath = attendableId
-          ? Paths.getCollectionObjectPath(attendableId, obj.id)
-          : Paths.getObjectPathFromObject(obj);
+          ? GraphPath.getCollectionObjectPath(attendableId, obj.id)
+          : GraphPath.getObjectPathFromObject(obj);
 
         return {
           id: Obj.getURI(obj),
@@ -113,3 +113,5 @@ const useCollectionItems = (collection: Collection.Collection, attendableId?: st
 
   return { items: results, handleSearch };
 };
+
+CollectionArticle.displayName = 'CollectionArticle';

package/src/containers/CollectionSection/CollectionSection.tsx

@@ -22,3 +22,5 @@ export const CollectionSection = ({ role, subject }: CollectionSectionProps) =>
     </div>
   );
 };
+
+CollectionSection.displayName = 'CollectionSection';

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -6,6 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { type Database } from '@dxos/echo';
@@ -17,10 +18,10 @@ import { type CreateObjectOption, CreateObjectPanel, type Metadata } from '#comp
 import { translations } from '#translations';
 
 const mockOptions: CreateObjectOption[] = [
-  { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },
-  { id: 'org.dxos.type.table', label: 'Table', icon: 'ph--table--regular' },
-  { id: 'org.dxos.type.canvas', label: 'Canvas', icon: 'ph--paint-brush--regular' },
-  { id: 'org.dxos.type.thread', label: 'Thread', icon: 'ph--chat-circle-text--regular' },
+  { id: 'org.dxos.type.document', label: 'Document', plugin: 'Markdown', icon: 'ph--file-text--regular' },
+  { id: 'org.dxos.type.table', label: 'Table', plugin: 'Kanban', icon: 'ph--table--regular' },
+  { id: 'org.dxos.type.canvas', label: 'Canvas', plugin: 'Sketch', icon: 'ph--paint-brush--regular' },
+  { id: 'org.dxos.type.thread', label: 'Thread', plugin: 'Threads', icon: 'ph--chat-circle-text--regular' },
 ];
 
 const mockSpaces = [
@@ -79,3 +80,16 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: DefaultStory,
 };
+
+// Verifies the type filter matches the contributing plugin name, not just the type label:
+// typing "Kanban" surfaces "Table" (contributed by the Kanban plugin) even though the label
+// "Table" contains no match for the query — impossible before plugin/description were searchable.
+export const FilterByPlugin: Story = {
+  render: DefaultStory,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByTestId('create-object-form.schema-input', undefined, { timeout: 10_000 });
+    await userEvent.type(input, 'Kanban');
+    void expect(await canvas.findByText('Table', undefined, { timeout: 10_000 })).toBeVisible();
+  },
+};

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -10,13 +10,14 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Capability } from '@dxos/app-framework';
 import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
 import { AppSpace, LayoutOperation, TypeOptions } from '@dxos/app-toolkit';
-import { PluginRegistryButton, useLayout } from '@dxos/app-toolkit/ui';
+import { PluginRegistryButton } from '@dxos/app-toolkit/ui';
 import { Operation } from '@dxos/compute';
 import { Annotation, Collection, Database, Obj, Type } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { EffectEx } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { CollectionItemAnnotation, ViewAnnotation } from '@dxos/schema';
 
@@ -53,7 +54,6 @@ export const CreateObjectDialog = ({
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const client = useClient();
   const spaces = useSpaces();
-  const layout = useLayout();
   const closeRef = useRef<HTMLButtonElement | null>(null);
 
   const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
@@ -200,19 +200,13 @@ export const CreateObjectDialog = ({
         const result = yield* metadata.createObject(data, { db, target, targetNodeId });
         const shouldNavigate = _shouldNavigate ?? (() => true);
         if (result.subject.length > 0 && shouldNavigate(result.object)) {
-          if (layout.mode === 'multi') {
-            yield* invoke(LayoutOperation.Set, {
-              subject: [...result.subject],
-            });
-            yield* invoke(LayoutOperation.Expose, {
-              subject: result.subject[0],
-            });
-          } else {
-            yield* invoke(LayoutOperation.Open, {
-              subject: [...result.subject],
-              navigation: 'immediate',
-            });
-          }
+          yield* invoke(LayoutOperation.Open, {
+            subject: [...result.subject],
+            navigation: 'immediate',
+          });
+          yield* invoke(LayoutOperation.Expose, {
+            subject: result.subject[0],
+          });
         }
 
         onCreateObject?.(result.object);
@@ -221,7 +215,7 @@ export const CreateObjectDialog = ({
         Effect.provideService(Operation.Service, operationInvoker),
         EffectEx.runAndForwardErrors,
       ),
-    [target, _shouldNavigate, onCreateObject, manager.capabilities, invoke, layout.mode],
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, invoke],
   );
 
   return (
@@ -260,3 +254,5 @@ export const CreateObjectDialog = ({
     </Dialog.Content>
   );
 };
+
+CreateObjectDialog.displayName = 'CreateObjectDialog';

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.tsx

@@ -4,11 +4,12 @@
 
 import * as Effect from 'effect/Effect';
 import type * as Schema from 'effect/Schema';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { GraphPath, LayoutOperation } from '@dxos/app-toolkit';
 import { EffectEx } from '@dxos/effect';
+import { log } from '@dxos/log';
 import { Column, Dialog, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -25,28 +26,33 @@ const initialValues: FormValues = { edgeReplication: true };
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(meta.profile.key);
-  const { invokePromise } = useOperationInvoker();
+  const { invoke } = useOperationInvoker();
 
   const inputSurfaceLookup = useInputSurfaceLookup();
+  const [error, setError] = useState<string | undefined>(undefined);
 
   const handleCreateSpace = useCallback(
-    async (data: FormValues) => {
-      const program = Effect.gen(function* () {
-        const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
-        if (result?.space) {
-          yield* Effect.promise(() =>
-            invokePromise(LayoutOperation.Open, {
-              subject: [Paths.getSpaceHomePath(result.space.id)],
-              workspace: Paths.getSpacePath(result.space.id),
-              navigation: 'immediate',
-            }),
-          );
-          yield* Effect.promise(() => invokePromise(LayoutOperation.UpdateDialog, { state: false }));
-        }
-      });
-      await EffectEx.runAndForwardErrors(program);
+    (data: FormValues) => {
+      setError(undefined);
+      return Effect.gen(function* () {
+        const { space } = yield* invoke(SpaceOperation.Create, data);
+        yield* invoke(LayoutOperation.Open, {
+          subject: [GraphPath.getSpaceHomePath(space.id)],
+          workspace: GraphPath.getSpacePath(space.id),
+          navigation: 'immediate',
+        });
+        yield* invoke(LayoutOperation.UpdateDialog, { state: false });
+      }).pipe(
+        Effect.catchAll((failure) =>
+          Effect.sync(() => {
+            log.catch(failure);
+            setError(t('create-space-dialog.error.message'));
+          }),
+        ),
+        EffectEx.runAndForwardErrors,
+      );
     },
-    [invokePromise],
+    [invoke, t],
   );
 
   return (
@@ -71,6 +77,7 @@ export const CreateSpaceDialog = () => {
           <Column.Center>
             <Form.Content>
               <Form.FieldSet />
+              <Form.Error>{error}</Form.Error>
               <Form.Submit />
             </Form.Content>
           </Column.Center>
@@ -79,3 +86,5 @@ export const CreateSpaceDialog = () => {
     </Dialog.Content>
   );
 };
+
+CreateSpaceDialog.displayName = 'CreateSpaceDialog';

package/src/containers/DefaultProperties/DefaultProperties.tsx

@@ -55,9 +55,9 @@ export const DefaultProperties = forwardRef<HTMLDivElement, DefaultPropertiesPro
     return (
       <Panel.Root role={role} ref={forwardedRef}>
         <Panel.Toolbar>
-          <Toolbar.Root className='dx-document' />
+          <Toolbar.Root classNames='dx-document' />
         </Panel.Toolbar>
-        <Panel.Content>
+        <Panel.Content asChild>
           <ObjectProperties object={object} resolveCreateEntry={resolveCreateEntry}>
             {/* TODO(burdon): Ambiguous naming since providers only replace parts; can't update Toolbar, etc. Consider DefaultSettings pattern. */}
             <Surface.Surface type={AppSurface.ObjectProperties} data={data} />
@@ -67,3 +67,5 @@ export const DefaultProperties = forwardRef<HTMLDivElement, DefaultPropertiesPro
     );
   },
 );
+
+DefaultProperties.displayName = 'DefaultProperties';

package/src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx

@@ -6,7 +6,7 @@ import React, { useCallback } from 'react';
 import { FileUploader } from 'react-drag-drop-files';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { GraphPath, LayoutOperation } from '@dxos/app-toolkit';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
@@ -24,7 +24,7 @@ export const ImportSpaceDialog = () => {
       });
       await invokePromise(LayoutOperation.UpdateDialog, { state: false });
       if (result?.space) {
-        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: Paths.getSpacePath(result.space.id) });
+        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: GraphPath.getSpacePath(result.space.id) });
       }
     },
     [invokePromise],
@@ -60,3 +60,5 @@ export const ImportSpaceDialog = () => {
     </Dialog.Content>
   );
 };
+
+ImportSpaceDialog.displayName = 'ImportSpaceDialog';

package/src/containers/InlineSyncStatus/InlineSyncStatus.tsx

@@ -2,37 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import { Paths } from '@dxos/app-toolkit';
+import { GraphPath } from '@dxos/app-toolkit';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { useClient } from '@dxos/react-client';
 import { type Space, useSpaceSyncState } from '@dxos/react-client/echo';
 import { Tooltip, useTranslation } from '@dxos/react-ui';
 import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
 
+import { useEdgeStatus } from '#hooks';
 import { meta } from '#meta';
 
-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.state);
-    });
-  }, [client]);
-
-  return status;
-};
-
 export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
   const { t } = useTranslation(meta.profile.key);
-  const qualifiedId = Paths.getSpacePath(space.id);
+  const qualifiedId = GraphPath.getSpacePath(space.id);
   const { hasAttention, isAncestor, isRelated } = useAttention(qualifiedId);
   const attended = hasAttention || isRelated;
   const containsAttended = isAncestor && !open;
-  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
+  const connectedToEdge = useEdgeStatus().state === EdgeStatus.ConnectionState.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);
@@ -49,3 +37,5 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
     </Tooltip.Trigger>
   );
 };
+
+InlineSyncStatus.displayName = 'InlineSyncStatus';

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { GraphPath, LayoutOperation } from '@dxos/app-toolkit';
 import { Trigger } from '@dxos/async';
 import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { useClient } from '@dxos/react-client';
@@ -61,8 +61,8 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       // TODO(wittjosiah): `result.target` is ignored so acceptance navigates to the space home
       // immediately; revisit how to incorporate the target once immediate navigation is settled.
       await invokePromise(LayoutOperation.Open, {
-        subject: [Paths.getSpaceHomePath(space.id)],
-        workspace: Paths.getSpacePath(space.id),
+        subject: [GraphPath.getSpaceHomePath(space.id)],
+        workspace: GraphPath.getSpacePath(space.id),
         navigation: 'immediate',
       });
 
@@ -95,3 +95,5 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
     </Dialog.Content>
   );
 };
+
+JoinDialog.displayName = 'JoinDialog';

package/src/containers/MembersContainer/MembersContainer.tsx

@@ -267,3 +267,5 @@ const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
     <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />
   );
 };
+
+MembersContainer.displayName = 'MembersContainer';

package/src/containers/MergePreview/MergePreview.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef, useCallback, useState } from 'react';
+
+import { useAtomCapabilityState, useOperationInvoker } from '@dxos/app-framework/ui';
+import { type Type } from '@dxos/echo';
+import { type SpaceId } from '@dxos/keys';
+import { log } from '@dxos/log';
+import { Card, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { ObjectForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+
+import { SpaceOperation } from '../../operations';
+import { SpaceCapabilities } from '../../types';
+
+export type MergePreviewProps = {
+  type: Type.AnyEntity;
+  spaceId: SpaceId;
+  preview: SpaceCapabilities.MergePreview;
+};
+
+/**
+ * Confirmation panel for a proposed merge: a form over the *detached* merged object. Nothing is
+ * written until Confirm, which invokes `MergeDuplicates` with the edited preview as overrides —
+ * so the user's corrections survive the merge rather than being recomputed away.
+ */
+export const MergePreview = forwardRef<HTMLDivElement, MergePreviewProps>(
+  ({ type, spaceId, preview }, forwardedRef) => {
+    const { t } = useTranslation(meta.profile.key);
+    const { invokePromise } = useOperationInvoker();
+    const [, updateEphemeral] = useAtomCapabilityState(SpaceCapabilities.EphemeralState);
+
+    const clear = useCallback(
+      () => updateEphemeral((state) => ({ ...state, mergePreview: undefined })),
+      [updateEphemeral],
+    );
+
+    // The merge removes objects, so a second click would re-run it against ids the first call has
+    // already deleted. Confirm is disabled for the duration.
+    const [merging, setMerging] = useState(false);
+    const handleConfirm = useCallback(() => {
+      setMerging(true);
+      void invokePromise(
+        SpaceOperation.MergeDuplicates,
+        { typename: preview.typename, objectIds: preview.objectIds, overrides: preview.preview },
+        { spaceId },
+      )
+        .then(({ error }) => {
+          if (error) {
+            // Leave the preview up: the merge did not happen, and clearing it would look like it did.
+            log.warn('merge failed', { error });
+            return;
+          }
+          // Bumping the timestamp is what tells the open review to rescan; without it the group the
+          // user just merged stays on screen as a one-member "duplicate".
+          updateEphemeral((state) => ({ ...state, mergePreview: undefined, lastMergeAt: Date.now() }));
+        })
+        .finally(() => setMerging(false));
+    }, [invokePromise, preview, spaceId, updateEphemeral]);
+
+    return (
+      <Panel.Root ref={forwardedRef}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <Toolbar.Button variant='primary' disabled={merging} onClick={handleConfirm}>
+              {t('confirm-merge.label')}
+            </Toolbar.Button>
+            <Toolbar.Button variant='ghost' disabled={merging} onClick={clear}>
+              {t('cancel-merge.label')}
+            </Toolbar.Button>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root orientation='vertical' centered>
+            <ScrollArea.Viewport>
+              <Card.Root fullWidth classNames='pb-form-gap'>
+                <ObjectForm object={preview.preview} type={type} />
+              </Card.Root>
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);
+
+MergePreview.displayName = 'MergePreview';

package/src/containers/MergePreview/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { MergePreview as default } from './MergePreview';