@dxos/plugin-space 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -3,25 +3,17 @@
 //
 
 import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space, SpaceState } from '@dxos/react-client/echo';
 import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
-import {
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  Form,
-  type FormFieldMap,
-} from '@dxos/react-ui-form';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 
 import { meta } from '../../meta';
@@ -40,181 +32,171 @@ export type SpaceSettingsContainerProps = {
 };
 
 // TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = forwardRef<HTMLDivElement, SpaceSettingsContainerProps>(
-  ({ space }, forwardedRef) => {
-    const { t } = useTranslation(meta.id);
-    const { invokePromise } = useOperationInvoker();
-    const client = useClient();
-    const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
-    const [edgeReplication, setEdgeReplication] = useState(
-      space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
-    );
-    const toggleEdgeReplication = useCallback(
-      async (next: boolean) => {
-        setEdgeReplication(next);
-        await space?.internal
-          .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
-          .catch((err: unknown) => {
-            log.catch(err);
-            setEdgeReplication(!next);
-          });
-      },
-      [space],
-    );
+export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
+  const [edgeReplication, setEdgeReplication] = useState(
+    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
+  );
+  const toggleEdgeReplication = useCallback(
+    async (next: boolean) => {
+      setEdgeReplication(next);
+      await space?.internal
+        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
+        .catch((err: unknown) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
+
+  const handleValuesChanged = useCallback(
+    (newValues: Partial<Schema.Schema.Type<typeof SpaceFormSchema>>, meta: { changed?: Record<string, boolean> }) => {
+      const changed = meta.changed ?? {};
+      if (changed['edgeReplication']) {
+        void toggleEdgeReplication(newValues.edgeReplication ?? false);
+      }
+
+      if (changed['name'] || changed['icon'] || changed['hue']) {
+        Obj.change(space.properties, (p) => {
+          if (changed['name'] && newValues.name !== undefined) {
+            p.name = newValues.name;
+          }
+          if (changed['icon']) {
+            p.icon = newValues.icon;
+          }
+          if (changed['hue']) {
+            p.hue = newValues.hue;
+          }
+        });
+      }
 
-    const handleSave = useCallback(
-      (properties: Schema.Schema.Type<typeof SpaceFormSchema>) => {
-        void toggleEdgeReplication(properties.edgeReplication ?? false);
-        const nameChanged = properties.name !== space.properties.name;
-        const iconChanged = properties.icon !== space.properties.icon;
-        const hueChanged = properties.hue !== space.properties.hue;
-        if (nameChanged || iconChanged || hueChanged) {
-          Obj.change(space.properties, (p) => {
-            if (nameChanged) {
-              p.name = properties.name;
-            }
-            if (iconChanged) {
-              p.icon = properties.icon;
-            }
-            if (hueChanged) {
-              p.hue = properties.hue;
-            }
+      if (changed['archived']) {
+        if (newValues.archived && !archived) {
+          void invokePromise(SpaceOperation.Close, { space });
+          void invokePromise(LayoutOperation.SwitchWorkspace, {
+            subject: client.spaces.default.id,
           });
-        }
-        if (properties.archived && !archived) {
-          void (async () => {
-            await invokePromise(SpaceOperation.Close, { space });
-            await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: client.spaces.default.id });
-          })();
-        } else if (!properties.archived && archived) {
+        } else if (!newValues.archived && archived) {
           void invokePromise(SpaceOperation.Open, { space });
         }
-      },
-      [space, toggleEdgeReplication, archived],
-    );
+      }
+    },
+    [space, client, archived, invokePromise, toggleEdgeReplication],
+  );
 
-    const values = useMemo(
-      () => ({
-        name: space.properties.name,
-        icon: space.properties.icon,
-        hue: space.properties.hue,
-        edgeReplication,
-        archived,
-      }),
-      [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
-    );
-
-    const fieldMap = useMemo<FormFieldMap>(
-      () => ({
-        name: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback(
-            ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-            [onValueChange, type],
-          );
-          return (
-            <ControlItemInput title={label} description={t('display name description')}>
-              <Input.TextInput
-                value={getValue()}
-                onChange={handleChange}
-                placeholder={t('display name input placeholder')}
-                classNames='min-is-64'
-              />
-            </ControlItemInput>
-          );
-        },
-        icon: ({ type, label, getValue, onValueChange }) => {
-          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={handleReset}
-                classNames='justify-self-end'
-              />
-            </ControlItem>
-          );
-        },
-        hue: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-          const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-          return (
-            <ControlItem title={label} description={t('hue description')}>
-              <HuePicker
-                value={getValue()}
-                onChange={handleChange}
-                onReset={handleReset}
-                classNames='justify-self-end'
-              />
-            </ControlItem>
-          );
-        },
-        edgeReplication: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
-          return (
-            <ControlItemInput title={label} description={t('edge replication description')}>
-              <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-            </ControlItemInput>
-          );
-        },
-        archived: ({ type, label, getValue, onValueChange }) => {
-          const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-          return (
-            <ControlItemInput title={label} description={t('archive space description')}>
-              <Button
-                disabled={space === client.spaces.default}
-                variant={getValue() ? 'default' : 'destructive'}
-                onClick={handleChange}
-              >
-                {getValue() ? t('unarchive space label') : t('archive space label')}
-              </Button>
-            </ControlItemInput>
-          );
-        },
-      }),
-      [t, space],
-    );
+  const values = useMemo(
+    () => ({
+      name: space.properties.name,
+      icon: space.properties.icon,
+      hue: space.properties.hue,
+      edgeReplication,
+      archived,
+    }),
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
+  );
 
-    const download = useFileDownload();
-    const handleBackup = useCallback(async () => {
-      const archive = await space.internal.export();
-      download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
-    }, [space, download]);
+  const fieldMap = useMemo<FormFieldMap>(
+    () => ({
+      name: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(
+          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+          [onValueChange, type],
+        );
+        return (
+          <Settings.ItemInput title={label} description={t('display name description')}>
+            <Input.TextInput
+              value={getValue()}
+              onChange={handleChange}
+              placeholder={t('display name input placeholder')}
+              classNames='min-is-64'
+            />
+          </Settings.ItemInput>
+        );
+      },
+      icon: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <Settings.Item title={label} description={t('icon description')}>
+            <IconPicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleReset}
+              classNames='justify-self-end'
+            />
+          </Settings.Item>
+        );
+      },
+      hue: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <Settings.Item title={label} description={t('hue description')}>
+            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
+          </Settings.Item>
+        );
+      },
+      edgeReplication: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
+        return (
+          <Settings.ItemInput title={label} description={t('edge replication description')}>
+            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+          </Settings.ItemInput>
+        );
+      },
+      archived: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
+        return (
+          <Settings.ItemInput title={label} description={t('archive space description')}>
+            <Button
+              disabled={space === client.spaces.default}
+              variant={getValue() ? 'default' : 'destructive'}
+              onClick={handleChange}
+            >
+              {getValue() ? t('unarchive space label') : t('archive space label')}
+            </Button>
+          </Settings.ItemInput>
+        );
+      },
+    }),
+    [t, space, client],
+  );
 
-    const repairs = useCapabilities(SpaceCapabilities.Repair);
-    const handleRepair = useCallback(async () => {
-      await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
-    }, [client, space, repairs]);
+  const download = useFileDownload();
+  const handleBackup = useCallback(async () => {
+    const archive = await space.internal.export();
+    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
+  }, [space, download]);
 
-    return (
-      <Layout.Container scrollable ref={forwardedRef}>
-        <ControlPage>
-          <ControlSection
-            title={t('space properties settings verbose label')}
-            description={t('space properties settings description', {
-              ns: meta.id,
-            })}
-          >
-            <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} autoSave onSave={handleSave}>
-              <Form.FieldSet />
-            </Form.Root>
-          </ControlSection>
+  const repairs = useCapabilities(SpaceCapabilities.Repair);
+  const handleRepair = useCallback(async () => {
+    await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
+  }, [client, space, repairs]);
 
-          <ControlSection title={t('space controls title')} description={t('space controls description')}>
-            <div role='none' className='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
-              <ControlItemInput title={t('backup space title')} description={t('backup space description')}>
-                <Button onClick={handleBackup}>{t('download backup label')}</Button>
-              </ControlItemInput>
-              <ControlItemInput title={t('repair space title')} description={t('repair space description')}>
-                <Button onClick={handleRepair}>{t('repair space label')}</Button>
-              </ControlItemInput>
-            </div>
-          </ControlSection>
-        </ControlPage>
-      </Layout.Container>
-    );
-  },
-);
+  return (
+    <Settings.Root>
+      <Settings.Section
+        title={t('space properties settings verbose label')}
+        description={t('space properties settings description', { ns: meta.id })}
+      >
+        <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} onValuesChanged={handleValuesChanged}>
+          <Form.FieldSet classNames='space-y-trimMd' />
+        </Form.Root>
+      </Settings.Section>
+      <Settings.Section title={t('space controls title')} description={t('space controls description')}>
+        <Settings.ItemInput title={t('backup space title')} description={t('backup space description')}>
+          <Button onClick={handleBackup}>{t('download backup label')}</Button>
+        </Settings.ItemInput>
+        <Settings.ItemInput title={t('repair space title')} description={t('repair space description')}>
+          <Button onClick={handleRepair}>{t('repair space label')}</Button>
+        </Settings.ItemInput>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};
 
 SpaceSettingsContainer.displayName = 'SpaceSettingsContainer';

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -5,7 +5,7 @@
 import * as Option from 'effect/Option';
 import React, { useEffect, useState } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';

package/src/components/SyncStatus/SyncStatus.stories.tsx

@@ -14,7 +14,7 @@ import { SyncStatusIndicator } from './SyncStatus';
 const meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'centered',
     translations,

package/src/components/ViewEditor.tsx

@@ -5,7 +5,7 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
 import { type Mutable } from '@dxos/echo/internal';
 import { useClient } from '@dxos/react-client';

package/src/hooks/useActiveSpace.ts

@@ -2,15 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type CapabilityManager, Common } from '@dxos/app-framework';
-import { useLayout } from '@dxos/app-framework/react';
+import { Capabilities, type CapabilityManager } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { parseId, useSpace } from '@dxos/react-client/echo';
 
 export const getActiveSpace = (capabilities: CapabilityManager.CapabilityManager) => {
   const client = capabilities.get(ClientCapabilities.Client);
-  const registry = capabilities.get(Common.Capability.AtomRegistry);
-  const layoutAtom = capabilities.get(Common.Capability.Layout);
+  const registry = capabilities.get(Capabilities.AtomRegistry);
+  const layoutAtom = capabilities.get(AppCapabilities.Layout);
   const layout = registry.get(layoutAtom);
   const { spaceId } = parseId(layout.workspace);
   return spaceId ? client.spaces.get(spaceId) : undefined;

package/src/hooks/useInputSurfaceLookup.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework/react';
+import { Surface, usePluginManager } from '@dxos/app-framework/ui';
 import { type FormFieldProvider } from '@dxos/react-ui-form';
 
 /**
@@ -18,8 +18,8 @@ export const useInputSurfaceLookup = (baseData?: Record<string, any>): FormField
   return useCallback<FormFieldProvider>(
     ({ schema, prop, fieldProps }) => {
       const data = { prop, schema, ...baseData };
-      if (isSurfaceAvailable(pluginManager.capabilities, { role: 'form-input', data })) {
-        return <Surface role='form-input' data={data} {...fieldProps} />;
+      if (Surface.isAvailable(pluginManager.capabilities, { role: 'form-input', data })) {
+        return <Surface.Surface role='form-input' data={data} {...fieldProps} />;
       }
     },
     [pluginManager, baseData],

package/src/translations.ts

@@ -5,7 +5,7 @@
 import { Type } from '@dxos/echo';
 import { type Resource } from '@dxos/react-ui';
 import { Collection } from '@dxos/schema';
-import { Event, Message, Organization, Person, Project, Task } from '@dxos/types';
+import { Event, Message, Organization, Person, Pipeline, Task } from '@dxos/types';
 
 import { meta } from './meta';
 
@@ -61,7 +61,7 @@ export const translations = [
         'typename label_other': 'People',
         'object name placeholder': 'New person',
       },
-      [Project.Project.typename]: {
+      [Pipeline.Pipeline.typename]: {
         'typename label': 'Project',
         'typename label_zero': 'Projects',
         'typename label_one': 'Project',

package/src/types/events.ts

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ActivationEvent, Common } from '@dxos/app-framework';
+import { ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 
 import { meta } from '../meta';
 
 export namespace SpaceEvents {
-  export const StateReady = Common.ActivationEvent.createStateEvent(`${meta.id}/event/state-ready`);
+  export const StateReady = AppActivationEvents.createStateEvent(`${meta.id}/event/state-ready`);
   export const SetupSettingsPanel = ActivationEvent.make(`${meta.id}/event/setup-settings-panel`);
   export const DefaultSpaceReady = ActivationEvent.make(`${meta.id}/event/default-space-ready`);
   export const SpaceCreated = ActivationEvent.make(`${meta.id}/event/space-created`);

package/src/types/types.ts

@@ -25,12 +25,19 @@ export const SPACE_TYPE = 'dxos.org/type/Space';
 
 export type SpacePluginOptions = {
   /**
-   * Base URL for the invitation link.
+   * Origin used for shareable links (object copy-link and invitation base).
+   * Defaults to window.location.origin.
    */
-  invitationUrl?: string;
+  shareableLinkOrigin?: string;
 
   /**
-   * Query parameter for the invitation code.
+   * Path appended to shareableLinkOrigin to form the invitation base URL.
+   * Defaults to '/'.
+   */
+  invitationPath?: string;
+
+  /**
+   * Query parameter name for the invitation code.
    */
   invitationProp?: string;
 

package/src/util.tsx

@@ -5,7 +5,8 @@
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import * as Effect from 'effect/Effect';
 
-import { type CapabilityManager, Common } from '@dxos/app-framework';
+import { type CapabilityManager } from '@dxos/app-framework';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { type Space, SpaceState, isSpace } from '@dxos/client/echo';
 import { type Database, Filter, Obj, Query, Ref, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
@@ -308,7 +309,7 @@ export const constructSpaceActions = ({
         properties: {
           label: ['create object in space label', { ns: meta.id }],
           icon: 'ph--plus--regular',
-          disposition: 'item',
+          disposition: 'list-item-primary',
           testId: 'spacePlugin.createObject',
         },
       },
@@ -532,11 +533,13 @@ export const constructObjectActions = ({
   capabilities,
   deletable = true,
   navigable = false,
+  shareableLinkOrigin,
 }: {
   object: Obj.Unknown;
   graph: Graph.ReadableGraph;
   resolve: (typename: string) => Record<string, any>;
   capabilities: CapabilityManager.CapabilityManager;
+  shareableLinkOrigin: string;
   deletable?: boolean;
   navigable?: boolean;
 }) => {
@@ -631,7 +634,7 @@ export const constructObjectActions = ({
                   object: createdObject,
                 });
                 if (addResult.id) {
-                  yield* Operation.invoke(Common.LayoutOperation.Open, { subject: [addResult.id] });
+                  yield* Operation.invoke(LayoutOperation.Open, { subject: [addResult.id] });
                 }
               }
             }),
@@ -694,7 +697,7 @@ export const constructObjectActions = ({
             type: Node.ActionType,
             data: () =>
               Effect.promise(async () => {
-                const url = `${window.location.origin}/${db.spaceId}/${Obj.getDXN(object).toString()}`;
+                const url = `${shareableLinkOrigin}/${db.spaceId}/${Obj.getDXN(object).toString()}`;
                 await navigator.clipboard.writeText(url);
               }),
             properties: {
@@ -708,9 +711,9 @@ export const constructObjectActions = ({
       : []),
     // TODO(wittjosiah): Factor out and apply to all nodes.
     {
-      id: getId(Common.LayoutOperation.Expose.meta.key),
+      id: getId(LayoutOperation.Expose.meta.key),
       type: Node.ActionType,
-      data: () => Operation.invoke(Common.LayoutOperation.Expose, { subject: Obj.getDXN(object).toString() }),
+      data: () => Operation.invoke(LayoutOperation.Expose, { subject: Obj.getDXN(object).toString() }),
       properties: {
         label: ['expose object label', { ns: meta.id }],
         icon: 'ph--eye--regular',