@dxos/plugin-space 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/src/components/MenuFooter.tsx

@@ -5,14 +5,14 @@
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 
-import { type ReactiveEchoObject, getSpace } from '@dxos/client/echo';
+import { type AnyLiveObject, getSpace } from '@dxos/client/echo';
 import { useClient } from '@dxos/react-client';
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { getSpaceDisplayName } from '../util';
 
-export const MenuFooter = ({ object }: { object: ReactiveEchoObject<any> }) => {
+export const MenuFooter = ({ object }: { object: AnyLiveObject<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const space = getSpace(object);

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { type ForeignKey, ForeignKeySchema } from '@dxos/echo-schema';
-import { getMeta, type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { ForeignKey } from '@dxos/echo-schema';
+import { getMeta, type AnyLiveObject } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -18,7 +18,7 @@ const initialValues = {
 };
 
 export type AdvancedObjectSettingsProps = {
-  object: ReactiveEchoObject<any>;
+  object: AnyLiveObject<any>;
 };
 
 export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {
@@ -66,7 +66,7 @@ export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps)
         {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
       </div>
 
-      {adding && <Form schema={ForeignKeySchema} values={initialValues} onSave={handleSave} onCancel={handleCancel} />}
+      {adding && <Form schema={ForeignKey} values={initialValues} onSave={handleSave} onCancel={handleCancel} />}
     </>
   );
 };

package/src/components/ObjectSettings/BaseObjectSettings.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, useRef } from 'react';
 
-import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { type AnyLiveObject } from '@dxos/react-client/echo';
 import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -12,7 +12,7 @@ import { meta } from '../../meta';
 
 export type BaseObjectSettingsProps = ThemedClassName<
   PropsWithChildren<{
-    object: ReactiveEchoObject<any>;
+    object: AnyLiveObject<any>;
   }>
 >;
 

package/src/components/ObjectSettings/ObjectSettingsContainer.tsx

@@ -5,15 +5,14 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { type AnyLiveObject } from '@dxos/react-client/echo';
 import { Clipboard } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { AdvancedObjectSettings } from './AdvancedObjectSettings';
 import { BaseObjectSettings } from './BaseObjectSettings';
 
 export type ObjectSettingsContainerProps = {
-  object: ReactiveEchoObject<any>;
+  object: AnyLiveObject<any>;
   role: string;
 };
 
@@ -28,7 +27,8 @@ export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContaine
             <Surface role='base-object-settings' data={data} />
           </BaseObjectSettings>
           <Surface role='object-settings' data={data} />
-          <AdvancedObjectSettings object={object} />
+          {/* TODO(wittjosiah): Remove? */}
+          {/* <AdvancedObjectSettings object={object} /> */}
         </div>
       </StackItem.Content>
     </Clipboard.Provider>

package/src/components/PersistenceStatus.tsx

@@ -68,20 +68,17 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
     case Status.PERSISTED_LOCALLY:
     default:
       return (
-        <Tooltip.Root delayDuration={400}>
-          <Tooltip.Trigger role='status' className='flex items-center'>
-            <CheckCircle className={mx(getSize(4), 'me-1')} />
-            {displayMessage && (
-              <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
-            )}
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content>
-              {t('persisted locally message')}
-              <Tooltip.Arrow />
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+        <Tooltip.Trigger
+          delayDuration={400}
+          role='status'
+          content={t('persisted locally message')}
+          className='flex items-center'
+        >
+          <CheckCircle className={mx(getSize(4), 'me-1')} />
+          {displayMessage && (
+            <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
+          )}
+        </Tooltip.Trigger>
       );
   }
 };

package/src/components/PopoverRenameObject.tsx

@@ -41,7 +41,7 @@ export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
   }, [object, name]);
 
   return (
-    <div role='none' className='p-1 flex gap-2'>
+    <div role='none' className='p-2 flex gap-2'>
       <div role='none' className='flex-1'>
         <Input.Root>
           <Input.Label srOnly>{t('object name label')}</Input.Label>

package/src/components/PopoverRenameSpace.tsx

@@ -30,7 +30,7 @@ export const PopoverRenameSpace = ({ space }: { space: Space }) => {
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?
   return (
-    <div role='none' className='p-1 flex gap-2'>
+    <div role='none' className='p-2 flex gap-2'>
       <div role='none' className='flex-1'>
         <Input.Root>
           <Input.Label srOnly>{t('space name label')}</Input.Label>

package/src/components/SpacePresence.stories.tsx

@@ -100,7 +100,7 @@ export const Small = () => {
 
 const meta: Meta = {
   title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   parameters: { translations },
 };
 

package/src/components/SpacePresence.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Option } from 'effect';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
@@ -16,6 +17,7 @@ import {
   type Size,
   type ThemedClassName,
   Tooltip,
+  Popover,
   useTranslation,
   List,
   ListItem,
@@ -115,28 +117,25 @@ export const FullPresence = (props: MemberPresenceProps) => {
   return (
     <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
       {members.slice(0, 3).map((member, i) => (
-        <Tooltip.Root key={member.identity.identityKey.toHex()}>
-          <Tooltip.Trigger className='grid focus:outline-none'>
-            <PresenceAvatar
-              identity={member.identity}
-              match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
-              index={members.length - i}
-              onClick={() => onMemberClick?.(member)}
-              size={size}
-            />
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content side='bottom'>
-              <span>{getName(member.identity)}</span>
-              <Tooltip.Arrow />
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+        <Tooltip.Trigger
+          key={member.identity.identityKey.toHex()}
+          side='bottom'
+          content={getName(member.identity)}
+          className='grid focus:outline-none'
+        >
+          <PresenceAvatar
+            identity={member.identity}
+            match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
+            index={members.length - i}
+            onClick={() => onMemberClick?.(member)}
+            size={size}
+          />
+        </Tooltip.Trigger>
       ))}
 
       {members.length > 3 && (
-        <Tooltip.Root>
-          <Tooltip.Trigger className='grid focus:outline-none'>
+        <Popover.Root>
+          <Popover.Trigger className='grid focus:outline-none'>
             <Avatar.Root>
               {/* TODO(wittjosiah): Make text fit. */}
               <Avatar.Content
@@ -146,10 +145,10 @@ export const FullPresence = (props: MemberPresenceProps) => {
                 size={size}
               />
             </Avatar.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content side='bottom'>
-              <Tooltip.Arrow />
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content side='bottom'>
+              <Popover.Arrow />
               <List classNames='max-h-56 overflow-y-auto'>
                 {members.map((member) => (
                   <ListItem.Root
@@ -163,9 +162,9 @@ export const FullPresence = (props: MemberPresenceProps) => {
                   </ListItem.Root>
                 ))}
               </List>
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       )}
     </div>
   );
@@ -219,7 +218,7 @@ export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps)
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
@@ -251,21 +250,13 @@ export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPr
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <AttentionGlyph
-          attended={attended}
-          containsAttended={containsAttended}
-          presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
-          classNames='self-center mie-1'
-        />
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom'>
-          <span>{t('presence label', { count })}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>
+      <AttentionGlyph
+        attended={attended}
+        containsAttended={containsAttended}
+        presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
+        classNames='self-center mie-1'
+      />
+    </Tooltip.Trigger>
   );
 };

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema as S } from 'effect';
+import { pipe, Schema } from 'effect';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
@@ -25,7 +25,9 @@ import { StackItem } from '@dxos/react-ui-stack';
 import { SPACE_PLUGIN } from '../../meta';
 import { SpaceAction, SpaceForm } from '../../types';
 
-const FormSchema = SpaceForm.pipe(S.extend(S.Struct({ archived: S.Boolean.annotations({ title: 'Archive space' }) })));
+const FormSchema = SpaceForm.pipe(
+  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
+);
 
 export type SpaceSettingsContainerProps = {
   space: Space;
@@ -54,7 +56,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
   );
 
   const handleSave = useCallback(
-    (properties: S.Schema.Type<typeof FormSchema>) => {
+    (properties: Schema.Schema.Type<typeof FormSchema>) => {
       void toggleEdgeReplication(properties.edgeReplication);
       if (properties.name !== space.properties.name) {
         space.properties.name = properties.name;

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Option } from 'effect';
 import React, { useEffect, useState } from 'react';
 
 import { useAppGraph } from '@dxos/app-framework';
@@ -40,7 +41,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
   const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
@@ -49,21 +50,13 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
 
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <AttentionGlyph
-          syncing={syncing}
-          attended={isAttended}
-          containsAttended={containsAttended}
-          classNames='self-center mie-1'
-        />
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
-          <span>{t('syncing label')}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={t('syncing label')} side='bottom'>
+      <AttentionGlyph
+        syncing={syncing}
+        attended={isAttended}
+        containsAttended={containsAttended}
+        classNames='self-center mie-1'
+      />
+    </Tooltip.Trigger>
   );
 };

package/src/components/index.ts

@@ -11,7 +11,6 @@ export * from './MembersContainer';
 export * from './MenuFooter';
 export * from './ObjectSettings';
 export * from './PersistenceStatus';
-export * from './PopoverAddSpace';
 export * from './PopoverRenameObject';
 export * from './PopoverRenameSpace';
 export * from './SchemaContainer';

package/src/hooks/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './useActiveSpace';
 export * from './useInputSurfaceLookup';
 export * from './usePath';

package/src/hooks/useActiveSpace.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, useLayout, type PluginContext } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { parseId, useSpace } from '@dxos/react-client/echo';
+
+export const getActiveSpace = (context: PluginContext) => {
+  const layout = context.getCapability(Capabilities.Layout);
+  const client = context.getCapability(ClientCapabilities.Client);
+  const { spaceId } = parseId(layout.workspace);
+  return spaceId ? client.spaces.get(spaceId) : undefined;
+};
+
+export const useActiveSpace = () => {
+  const layout = useLayout();
+  const { spaceId } = parseId(layout.workspace);
+  return useSpace(spaceId);
+};

package/src/hooks/useInputSurfaceLookup.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema as S } from 'effect';
+import { type Schema } from 'effect';
 import React, { useCallback } from 'react';
 
 import { usePluginManager, isSurfaceAvailable, Surface } from '@dxos/app-framework';
@@ -18,7 +18,7 @@ export const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
   const pluginManager = usePluginManager();
 
   return useCallback(
-    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps }) => {
+    ({ prop, schema, inputProps }: { prop: string; schema: Schema.Schema<any>; inputProps: InputProps }) => {
       const composedData = { prop, schema, ...baseData };
       if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
         return undefined;

package/src/hooks/usePath.ts

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Option } from 'effect';
 import { useEffect, useState } from 'react';
 
-import { type Graph } from '@dxos/plugin-graph';
+import { type ReadableGraph } from '@dxos/plugin-graph';
 
 /**
  * React hook to get a path from the graph.
@@ -15,15 +16,17 @@ import { type Graph } from '@dxos/plugin-graph';
  * @returns Path if found, undefined otherwise.
  */
 // TODO(wittjosiah): Factor out.
-export const usePath = (graph: Graph, id?: string, timeout?: number): string[] | undefined => {
-  const [pathState, setPathState] = useState<string[] | undefined>(id ? graph.getPath({ target: id }) : undefined);
+export const usePath = (graph: ReadableGraph, id?: string, timeout?: number): Option.Option<string[]> => {
+  const [pathState, setPathState] = useState<Option.Option<string[]>>(
+    id ? graph.getPath({ target: id }) : Option.none(),
+  );
 
   useEffect(() => {
     if (!id && pathState) {
-      setPathState(undefined);
+      setPathState(Option.none());
     }
 
-    if (pathState?.at(-1) === id || !id) {
+    if ((Option.isSome(pathState) && pathState.value.at(-1) === id) || !id) {
       return;
     }
 
@@ -32,7 +35,7 @@ export const usePath = (graph: Graph, id?: string, timeout?: number): string[] |
       try {
         const path = await graph.waitForPath({ target: id }, { timeout });
         if (path) {
-          setPathState(path);
+          setPathState(Option.some(path));
         }
       } catch {}
     });

package/src/index.ts

@@ -2,10 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-export { SpaceCapabilities, ThreadCapabilities } from './capabilities';
-export { SpaceEvents, ThreadEvents } from './events';
+export { SpaceCapabilities } from './capabilities';
+export { SpaceEvents } from './events';
 
 export * from './components';
+export * from './hooks';
 export * from './meta';
 export * from './SpacePlugin';
 export * from './util';

package/src/translations.ts

@@ -15,7 +15,6 @@ export default [
       [SPACE_PLUGIN]: {
         'plugin name': 'Spaces',
         'first run message': 'Nothing selected.',
-        'add space label': 'Create or join a space',
         'create space label': 'Create space',
         'join space label': 'Join space',
         'empty space message': 'No documents',
@@ -95,7 +94,7 @@ export default [
         'join success label': 'Successfully joined space',
         'name label': 'Name',
         'name placeholder': 'Name',
-        'object settings label': 'Settings',
+        'object settings label': 'Details',
         'edge replication label': 'Enable EDGE Replication',
         'saving locally label': 'Writing to disk',
         'downloading label': 'Replicating from peers',

package/src/types/collection.ts

@@ -2,15 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
+import { Expando, Ref, TypedObject } from '@dxos/echo-schema';
 
 export class CollectionType extends TypedObject({ typename: 'dxos.org/type/Collection', version: '0.1.0' })({
-  name: S.optional(S.String),
-  objects: S.mutable(S.Array(Ref(Expando))),
+  name: Schema.optional(Schema.String),
+  objects: Schema.mutable(Schema.Array(Ref(Expando))),
   // Key is schema typename and value is reference to a view object of the associated schema.
   // Having collection reference the views rather than vice versa ensures that the state converges to a single view per key (i.e. type).
   // This also leaves open a future where this key could be changed to allow for multiple stack views per section.
   // TODO(wittjosiah): Any way to make this more type safe?
   // TODO(wittjosiah): Should the views be separate objects or just be schemas for view data in this record?
-  views: S.mutable(S.Record({ key: S.String, value: Ref(Expando) })),
+  views: Schema.mutable(Schema.Record({ key: Schema.String, value: Ref(Expando) })),
 }) {}

package/src/types/index.ts

@@ -3,5 +3,4 @@
 //
 
 export * from './collection';
-export * from './thread';
 export * from './types';