@dxos/plugin-space 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,32 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Function from 'effect/Function';
 import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+import React, { type ChangeEvent, forwardRef, useCallback, useMemo, useState } from 'react';
 
-import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
+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, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
 import {
   ControlItem,
   ControlItemInput,
   ControlPage,
   ControlSection,
   Form,
-  type InputComponent,
+  type FormFieldMap,
 } from '@dxos/react-ui-form';
+import { Layout } from '@dxos/react-ui-mosaic';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
 
 import { meta } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
+import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
 
-const FormSchema = SpaceForm.pipe(
-  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
+const SpaceFormSchema = SpaceForm.pipe(
+  Schema.extend(
+    Schema.Struct({
+      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),
+    }),
+  ),
 );
 
 export type SpaceSettingsContainerProps = {
@@ -35,151 +40,181 @@ export type SpaceSettingsContainerProps = {
 };
 
 // TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  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 = 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],
+    );
 
-  const handleSave = useCallback(
-    (properties: Schema.Schema.Type<typeof FormSchema>) => {
-      void toggleEdgeReplication(properties.edgeReplication);
-      if (properties.name !== space.properties.name) {
-        space.properties.name = properties.name;
-      }
-      if (properties.icon !== space.properties.icon) {
-        space.properties.icon = properties.icon;
-      }
-      if (properties.hue !== space.properties.hue) {
-        space.properties.hue = properties.hue;
-      }
-      if (properties.archived && !archived) {
-        void dispatch(
-          Function.pipe(
-            createIntent(SpaceAction.Close, { space }),
-            chain(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: client.spaces.default.id }),
-          ),
-        );
-      } else if (!properties.archived && archived) {
-        void dispatch(createIntent(SpaceAction.Open, { space }));
-      }
-    },
-    [space, toggleEdgeReplication, archived],
-  );
+    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 (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) {
+          void invokePromise(SpaceOperation.Open, { space });
+        }
+      },
+      [space, toggleEdgeReplication, archived],
+    );
 
-  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 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 customElements: Partial<Record<string, InputComponent>> = useMemo(
-    () => ({
-      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'
-              iconSize={5}
-            />
-          </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='[--hue-preview-size:1.25rem] 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} onClick={handleChange}>
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </ControlItemInput>
-        );
-      },
-    }),
-    [t, space],
-  );
+    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],
+    );
 
-  return (
-    <StackItem.Content scrollable>
-      <ControlPage>
-        <ControlSection
-          title={t('space properties settings verbose label', { ns: meta.id })}
-          description={t('space properties settings description', { ns: meta.id })}
-        >
-          <Form
-            schema={FormSchema}
-            values={values}
-            autoSave
-            onSave={handleSave}
-            Custom={customElements}
-            outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
-          />
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
-  );
-};
+    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 repairs = useCapabilities(SpaceCapabilities.Repair);
+    const handleRepair = useCallback(async () => {
+      await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
+    }, [client, space, repairs]);
+
+    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>
+
+          <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>
+    );
+  },
+);
+
+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';
+import { useAppGraph } from '@dxos/app-framework/react';
 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.tsx

@@ -6,13 +6,13 @@ import React, { useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
-import type { QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
+import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { useClient } from '@dxos/react-client';
 import { useStream } from '@dxos/react-client/devtools';
 import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
 import { Icon, Popover, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { Unit } from '@dxos/util';
+import { mx } from '@dxos/ui-theme';
+import { Unit, type UnitFormat } from '@dxos/util';
 
 import { meta } from '../../meta';
 
@@ -25,12 +25,7 @@ export const SyncStatus = () => {
   const client = useClient();
   const state = useSyncState();
   const [saved, setSaved] = useState(true);
-
-  useEffect(() => {
-    return createClientSaveTracker(client, (state) => {
-      setSaved(state === 'saved');
-    });
-  }, []);
+  useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);
 
   return <SyncStatusIndicator state={state} saved={saved} />;
 };
@@ -114,36 +109,47 @@ const EdgeConnectionPopover = () => {
       {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
         <div className='space-y-2'>
           {/* Latency */}
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2 text-sm text-description'>
+          <div className='flex items-center justify-between text-sm'>
+            <div className='flex items-center gap-2 text-description'>
               <Icon icon='ph--timer--regular' />
               <span>{t('sync latency label')}</span>
             </div>
-            <span className='text-sm font-mono text-subdued'>
-              {status.rtt.toFixed(0)}
-              ms
-            </span>
+            <UnitValue value={status.rtt} format={Unit.Millisecond} />
           </div>
 
           {/* Upload Speed */}
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2 text-sm text-description'>
+          <div className='flex items-center justify-between text-sm'>
+            <div className='flex items-center gap-2 text-description'>
               <Icon icon='ph--arrow-up--regular' />
               <span>{t('sync upload label')}</span>
             </div>
-            <span className='text-sm font-mono text-subdued'>{Unit.Kilobyte(status.rateBytesUp, 0)}/s</span>
+            <UnitValue value={status.rateBytesUp} format={Unit.Kilobyte} suffix='/s' />
           </div>
 
           {/* Download Speed */}
-          <div className='flex items-center justify-between'>
+          <div className='flex items-center justify-between text-sm'>
             <div className='flex items-center gap-2 text-sm text-description'>
               <Icon icon='ph--arrow-down--regular' />
               <span>{t('sync download label')}</span>
             </div>
-            <span className='text-sm font-mono text-subdued'>{Unit.Kilobyte(status.rateBytesDown, 0)}/s</span>
+            <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />
           </div>
         </div>
       )}
     </div>
   );
 };
+
+// TODO(burdon): Factor out.
+const UnitValue = ({ value: input, format, suffix }: { value: number; format: UnitFormat; suffix?: string }) => {
+  const { formattedValue, unit } = format(input);
+  return (
+    <span className='font-mono'>
+      {formattedValue}
+      <span className='mis-1 text-subdued'>
+        {unit.symbol}
+        {suffix}
+      </span>
+    </span>
+  );
+};

package/src/components/SyncStatus/save-tracker.ts

@@ -46,10 +46,10 @@ const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') =>
 
     let hasUnsavedChanges = false;
     let lastFlushPromise: Promise<void> | undefined;
-    space.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+    space.internal.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
       hasUnsavedChanges = unsavedDocuments.length > 0;
     });
-    space.db.saveStateChanged.debounce(500).on(ctx, () => {
+    space.internal.db.saveStateChanged.debounce(500).on(ctx, () => {
       if (hasUnsavedChanges) {
         lastFlushPromise = undefined;
         cb('saving');

package/src/components/ViewEditor.tsx

@@ -2,43 +2,84 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useState } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { type QueryAST, Type } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
+import { useOperationInvoker } from '@dxos/app-framework/react';
+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';
-import { getSpace, useSchema } from '@dxos/react-client/echo';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
 import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
-import { type DataType, getTypenameFromQuery } from '@dxos/schema';
+import { View } from '@dxos/schema';
 
-import { SpaceAction } from '../types';
+import { resolveSchemaWithRegistry } from '../helpers';
+import { useTypeOptions } from '../hooks';
+import { SpaceOperation } from '../types';
 
-type ViewEditorProps = { view: DataType.View };
+export type ViewEditorProps = { view: View.View };
 
 export const ViewEditor = ({ view }: ViewEditorProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const space = getSpace(view);
-  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
-  const schema = useSchema(client, space, typename);
+  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    space,
+    annotation: {
+      location: ['database', 'runtime'],
+      kind: ['user'],
+      registered: ['registered'],
+    },
+  });
+
+  useAsyncEffect(async () => {
+    if (!view?.query || !space) {
+      return;
+    }
+
+    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
+    if (foundSchema && foundSchema !== schema) {
+      setSchema(() => foundSchema);
+    }
+  }, [client, space, view, schema]);
+
+  const handleQueryChanged = useCallback(
+    async (newQuery: QueryAST.Query, target?: string) => {
+      if (!view || !space) {
+        return;
+      }
+
+      const queue = target && DXN.tryParse(target) ? target : undefined;
+      const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
+      Obj.change(view, (v) => {
+        v.query.ast = query.ast as Mutable<typeof query.ast>;
+      });
+      const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
+      if (!newSchema) {
+        return;
+      }
 
-  const handleUpdateQuery = useCallback(
-    (newQuery: QueryAST.Query) => {
-      invariant(schema);
-      invariant(Type.isMutable(schema));
+      const newView = View.make({
+        query,
+        jsonSchema: Type.toJsonSchema(newSchema),
+      });
+      Obj.change(view, (v) => {
+        v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+      });
 
-      view.query.ast = newQuery;
-      schema.updateTypename(getTypenameFromQuery(newQuery));
+      setSchema(() => newSchema);
     },
     [view, schema],
   );
 
   const handleDelete = useCallback(
     (fieldId: string) => {
-      void dispatch(createIntent(SpaceAction.DeleteField, { view, fieldId }));
+      void invokePromise(SpaceOperation.DeleteField, { view, fieldId });
     },
-    [dispatch, view],
+    [invokePromise, view],
   );
 
   if (!space || !schema) {
@@ -50,9 +91,11 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
       registry={space.db.schemaRegistry}
       schema={schema}
       view={view}
-      onQueryChanged={Type.isMutable(schema) ? handleUpdateQuery : undefined}
+      mode='tag'
+      tags={tags}
+      types={types}
+      onQueryChanged={handleQueryChanged}
       onDelete={Type.isMutable(schema) ? handleDelete : undefined}
-      outerSpacing={false}
     />
   );
 };

package/src/components/index.ts

@@ -10,17 +10,16 @@ export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
 export * from './MenuFooter';
-export * from './PersistenceStatus';
-export * from './PopoverRenameObject';
-export * from './PopoverRenameSpace';
+export * from './ObjectRenamePopover';
 export * from './SchemaContainer';
-export * from './SpacePresence';
 export * from './SpacePluginSettings';
+export * from './SpacePresence';
+export * from './SpaceRenamePopover';
 export * from './SpaceSettings';
 export * from './SyncStatus';
 export * from './ViewEditor';
 
-export const CollectionMain = lazy(() => import('./CollectionMain'));
-export const ObjectDetailsPanel = lazy(() => import('./ObjectDetailsPanel'));
-export const ObjectSettingsContainer = lazy(() => import('./ObjectSettings'));
-export const RecordMain = lazy(() => import('./RecordMain'));
+export const CollectionArticle = lazy(() => import('./CollectionArticle'));
+export const ObjectCardStack = lazy(() => import('./ObjectCardStack'));
+export const ObjectDetails = lazy(() => import('./ObjectDetails'));
+export const RecordArticle = lazy(() => import('./RecordArticle'));

package/src/constants.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
+export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
+export const OBJECT_RENAME_POPOVER = `${meta.id}/ObjectRenamePopover`;
+export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;