@dxos/plugin-space 0.8.4-main.422d1c7879 → 0.8.4-main.4668b7de9b

package/src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+import { FileUploader } from 'react-drag-drop-files';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+
+export const ImportSpaceDialog = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      const contents = new Uint8Array(await file.arrayBuffer());
+      const { data: result } = await invokePromise(SpaceOperation.ImportSpace, {
+        archive: { filename: file.name, contents },
+      });
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      if (result?.space) {
+        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) });
+      }
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('import-space-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.ActionIconButton action='close' />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <p className='my-4'>{t('import-space-dialog.description')}</p>
+        <FileUploader
+          types={['json', 'tar']}
+          classes='block my-4 p-8 border-2 border-dashed border-neutral-500/50 rounded-sm flex items-center justify-center gap-2 cursor-pointer'
+          dropMessageStyle={{ border: 'none', backgroundColor: '#EEE' }}
+          handleChange={(file: File) => {
+            void handleFile(file);
+          }}
+        >
+          <Icon icon='ph--file-plus--duotone' size={8} />
+          <span>{t('import-space-dialog.upload.label')}</span>
+        </FileUploader>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button variant='primary'>{t('cancel.label')}</Button>
+        </Dialog.Close>
+      </Dialog.ActionBar>
+    </Dialog.Content>
+  );
+};

package/src/containers/ImportSpaceDialog/index.ts

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

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -6,11 +6,12 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Dialog } from '@dxos/react-ui';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { JoinDialog } from './JoinDialog';
 
 const DefaultStory = () => (

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -9,7 +9,7 @@ import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Trigger } from '@dxos/async';
 import { Graph } from '@dxos/plugin-graph';
-import { ObservabilityOperation } from '@dxos/plugin-observability/operations';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';

package/src/containers/MembersContainer/MembersContainer.tsx

@@ -2,12 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Option from 'effect/Option';
 import React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { RootCollectionAnnotation } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Collection, Obj } from '@dxos/echo';
+import { Annotation, Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { useSpaceInvitations } from '@dxos/react-client/echo';
@@ -62,7 +64,8 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[Collection.Collection.typename]?.target?.objects[0]?.target;
+  const target = Annotation.get(space.properties, RootCollectionAnnotation).pipe(Option.getOrUndefined)?.target
+    ?.objects[0]?.target;
 
   const inviteActions = useMemo(
     (): Record<string, ActionMenuItem> => ({
@@ -77,7 +80,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
             type: Invitation.Type.INTERACTIVE,
             authMethod: Invitation.AuthMethod.SHARED_SECRET,
             multiUse: false,
-            target: target && Obj.getDXN(target).toString(),
+            target: target && Obj.getURI(target),
           });
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
             const subscription: ZenObservable.Subscription = (invitation as CancellableInvitationObservable).subscribe(
@@ -97,7 +100,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
             type: Invitation.Type.DELEGATED,
             authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
             multiUse: true,
-            target: target && Obj.getDXN(target).toString(),
+            target: target && Obj.getURI(target),
           });
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
             const subscription: ZenObservable.Subscription = (invitation as CancellableInvitationObservable).subscribe(
@@ -209,7 +212,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
     <>
       <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content] my-2 gap-2'>
-        <div role='none' className='w-full aspect-square relative text-description'>
+        <div className='w-full aspect-square relative text-description'>
           <QR
             rounding={100}
             backgroundColor='transparent'

package/src/containers/ObjectCardStack/ObjectCardStack.tsx

@@ -4,9 +4,8 @@
 
 import React, { forwardRef, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { type View } from '@dxos/echo';
-import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Filter, Obj, type View } from '@dxos/echo';
+import { useQuery, useType } from '@dxos/react-client/echo';
 import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useSelected } from '@dxos/react-ui-attention';
 import { ObjectForm } from '@dxos/react-ui-form';
@@ -28,15 +27,15 @@ export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(
   const { t } = useTranslation(meta.id);
   const db = Obj.getDatabase(view);
   const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
-  const schema = useSchema(db, typename);
+  const type = useType(db, typename);
 
-  const queriedObjects = useQuery(db, schema ? Filter.type(schema) : Filter.nothing());
+  const queriedObjects = useQuery(db, type ? Filter.type(type) : Filter.nothing());
   const selectedRows = useSelected(objectId, 'multi');
   const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
 
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
 
-  if (!schema) {
+  if (!type) {
     return null;
   }
 
@@ -66,7 +65,7 @@ export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(
                     Tile={({ ...props }) => (
                       <Mosaic.Tile {...props}>
                         <Card.Root>
-                          <ObjectForm object={props.data} schema={schema} />
+                          <ObjectForm object={props.data} type={type} />
                         </Card.Root>
                       </Mosaic.Tile>
                     )}

package/src/containers/RecordArticle/RecordArticle.stories.tsx

@@ -9,16 +9,18 @@ import React from 'react';
 import { Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
+import { Filter } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { RecordArticle } from './RecordArticle';
 
 random.seed(0);

package/src/containers/RecordArticle/RecordArticle.tsx

@@ -2,26 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Annotation, Obj } from '@dxos/echo';
+import { Obj, Type } from '@dxos/echo';
 import { Card, Input, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
 
 export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps) => {
   const { t } = useTranslation(meta.id);
-  const icon = Function.pipe(
-    Obj.getSchema(subject),
-    Option.fromNullable,
-    Option.flatMap(Annotation.IconAnnotation.get),
-    Option.map(({ icon }) => icon),
-    Option.getOrElse(() => 'ph--placeholder--regular'),
-  );
+  // Obj.getType fails for database-registered (dynamic) schemas due to DXN mismatch;
+  // fall back to typename query which matches TypeSchema.typename.
+  const db = Obj.getDatabase(subject);
+  const typename = Obj.getTypename(subject);
+  const schema =
+    Obj.getType(subject) ??
+    (typename && db
+      ? db.graph.registry
+          .list()
+          .filter(Type.isType)
+          .find((t) => Type.getTypename(t) === typename)
+      : undefined);
+  const icon =
+    schema && Type.getDatabase(schema) != null
+      ? 'ph--cube--regular'
+      : (Obj.getIcon(subject)?.icon ?? 'ph--circle-dashed--regular');
 
   return (
     <Panel.Root role={role}>
@@ -32,17 +39,17 @@ export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps)
         <ScrollArea.Root orientation='vertical'>
           <ScrollArea.Viewport classNames='p-4 space-y-4'>
             <Card.Root classNames='dx-card-max-width'>
-              <Card.Toolbar>
+              <Card.Header>
                 <Card.Icon icon={icon} />
-                <Card.Title>{Obj.getLabel(subject)}</Card.Title>
-              </Card.Toolbar>
-              <Card.Content>
+                <Card.Title>{Obj.getLabel(subject, { fallback: 'typename' })}</Card.Title>
+              </Card.Header>
+              <Card.Body>
                 <Surface.Surface type={AppSurface.Card} data={{ subject }} limit={1} />
-              </Card.Content>
+              </Card.Body>
             </Card.Root>
 
             {/* TODO(burdon): Only show label if surface exists? */}
-            <div role='none' className='flex flex-col gap-form-gap'>
+            <div className='flex flex-col gap-form-gap'>
               <Input.Root>
                 <Input.Label>{t('related-actions.label')}</Input.Label>
               </Input.Root>

package/src/containers/RelatedArticle/RelatedArticle.tsx

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
-import { Annotation, Entity, Obj } from '@dxos/echo';
+import { Entity, Obj } from '@dxos/echo';
 import { Card, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
 import { Menu } from '@dxos/react-ui-menu';
@@ -46,13 +44,7 @@ export const RelatedArticle = ({ role, companionTo }: RelatedArticleProps) => {
 const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; classNames?: string }) => {
   const { t } = useTranslation(meta.id);
   const data = useMemo(() => ({ subject }), [subject]);
-  const icon = Function.pipe(
-    Entity.getSchema(subject),
-    Option.fromNullable,
-    Option.flatMap(Annotation.IconAnnotation.get),
-    Option.map(({ icon }) => icon),
-    Option.getOrElse(() => 'ph--placeholder--regular'),
-  );
+  const icon = Entity.getIcon(subject)?.icon ?? 'ph--circle-dashed--regular';
 
   // TODO(burdon): BUG: Includes item itself.
   const menuItems = useObjectMenuItems(subject);
@@ -60,9 +52,9 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
   return (
     <Menu.Root>
       <Card.Root classNames={classNames}>
-        <Card.Toolbar>
+        <Card.Header>
           <Card.Icon icon={icon} />
-          <Card.Title>{Entity.getLabel(subject)}</Card.Title>
+          <Card.Title>{Entity.getLabel(subject, { fallback: 'typename' })}</Card.Title>
           <Menu.Trigger asChild disabled={!menuItems?.length}>
             <Toolbar.IconButton
               iconOnly
@@ -72,10 +64,10 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
             />
           </Menu.Trigger>
           <Menu.Content items={menuItems} />
-        </Card.Toolbar>
-        <Card.Content>
+        </Card.Header>
+        <Card.Body>
           <Surface.Surface type={AppSurface.Card} data={data} limit={1} />
-        </Card.Content>
+        </Card.Body>
       </Card.Root>
     </Menu.Root>
   );

package/src/containers/SchemaContainer/SchemaContainer.tsx

@@ -5,7 +5,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { type Type } from '@dxos/echo';
+import { Type } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
@@ -15,24 +15,21 @@ import { meta } from '#meta';
 
 export const SchemaContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   const { t } = useTranslation(meta.id);
-  const schemas = useQuerySpaceSchemas(space);
+  const types = useQuerySpaceTypes(space);
 
   return (
     <Settings.Viewport>
       <Settings.Section title={t('schema-verbose.label')} description={t('schema.description')}>
         <div
-          role='none'
           className={mx([
             'grid md:col-span-2 grid-cols-subgrid gap-trim-sm items-center',
             '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
             'border border-separator rounded-md',
           ])}
         >
-          {schemas.length === 0 && <div className='text-center py-4'>{t('no-schemas-found.message')}</div>}
-          {schemas.map((schema) => (
-            <div role='none' key={schema.id}>
-              {schema.typename}
-            </div>
+          {types.length === 0 && <div className='text-center py-4'>{t('no-schemas-found.message')}</div>}
+          {types.map((type) => (
+            <div key={type.id}>{Type.getTypename(type)}</div>
           ))}
         </div>
       </Settings.Section>
@@ -41,19 +38,17 @@ export const SchemaContainer = ({ space }: AppSurface.SpaceArticleProps) => {
 };
 
 /**
- * Subscribe to and retrieve all schemas from a space's schema registry.
+ * Subscribe to and retrieve all types from a space's registry.
  */
-export const useQuerySpaceSchemas = (space: Space): Type.RuntimeType[] => {
-  const [schemas, setSchemas] = useState<Type.RuntimeType[]>([]);
+export const useQuerySpaceTypes = (space: Space): Type.AnyEntity[] => {
+  const [types, setTypes] = useState<Type.AnyEntity[]>(() => [...space.db.graph.registry.list().filter(Type.isType)]);
 
   useEffect(() => {
-    const query = space.db.schemaRegistry.query();
-    const initialResults = query.runSync();
-    setSchemas(initialResults);
-
-    const unsubscribe = query.subscribe(() => setSchemas(query.results));
-    return () => unsubscribe();
+    setTypes([...space.db.graph.registry.list().filter(Type.isType)]);
+    return space.db.graph.registry.changed.on(() => {
+      setTypes([...space.db.graph.registry.list().filter(Type.isType)]);
+    });
   }, [space]);
 
-  return schemas;
+  return types;
 };

package/src/containers/SpacePresence/SpacePresence.stories.tsx

@@ -9,7 +9,8 @@ import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
 
 const viewers = (n: number, currentlyAttended = true): Member[] =>

package/src/containers/SpacePresence/SpacePresence.tsx

@@ -71,7 +71,7 @@ export const SpacePresence = ({ object, spaceId }: SpacePresenceProps) => {
     return null;
   }
 
-  const currentObjectViewers = ephemeral.viewersByObject[Obj.getDXN(object).toString()] ?? noViewers;
+  const currentObjectViewers = ephemeral.viewersByObject[Obj.getURI(object)] ?? noViewers;
 
   const membersForObject = spaceMembers
     .filter((member) => memberOnline(member) && memberIsNotSelf(member))

package/src/containers/SpaceRenamePopover/SpaceRenamePopover.tsx

@@ -22,7 +22,7 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
   const { invokePromise } = useOperationInvoker();
 
   const handleDone = useCallback(() => {
-    Obj.change(space.properties, (obj) => {
+    Obj.update(space.properties, (obj) => {
       obj.name = name;
     });
     void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
@@ -30,8 +30,8 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?
   return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
+    <div className='p-2 flex gap-2'>
+      <div className='flex-1'>
         <Input.Root>
           <Input.Label srOnly>{t('space-name.label')}</Input.Label>
           <Input.TextInput

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.stories.tsx

@@ -5,13 +5,14 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { SpaceSettingsContainer } from './SpaceSettingsContainer';
 
 const Story = (props: Partial<AppSurface.SpaceArticleProps>) => {
@@ -32,7 +33,7 @@ const meta = {
     withLayout({ layout: 'fullscreen' }),
     withClientProvider({ createIdentity: true, createSpace: true }),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [OperationPlugin(), RuntimePlugin()] }),
+    withPluginManager({ plugins: [ProcessManagerPlugin()] }),
   ],
   parameters: {
     translations,