@dxos/plugin-space 0.6.11 → 0.6.12-main.568932b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-space",
-  "version": "0.6.11",
+  "version": "0.6.12-main.568932b",
   "description": "DXOS Surface plugin for DXOS ECHO Spaces",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,21 +10,24 @@
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
       "node": {
-        "default": "./dist/lib/node/index.cjs"
+        "require": "./dist/lib/node/index.cjs",
+        "default": "./dist/lib/node-esm/index.mjs"
       },
       "types": "./dist/types/src/index.d.ts"
     },
     "./meta": {
       "browser": "./dist/lib/browser/meta.mjs",
       "node": {
-        "default": "./dist/lib/node/meta.cjs"
+        "require": "./dist/lib/node/meta.cjs",
+        "default": "./dist/lib/node-esm/meta.mjs"
       },
       "types": "./dist/types/src/meta.d.ts"
     },
     "./types": {
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": {
-        "default": "./dist/lib/node/types/index.cjs"
+        "require": "./dist/lib/node/types/index.cjs",
+        "default": "./dist/lib/node-esm/types/index.mjs"
       },
       "types": "./dist/types/src/types/index.d.ts"
     }
@@ -45,34 +48,39 @@
     "src"
   ],
   "dependencies": {
+    "@effect/schema": "^0.75.1",
     "@preact/signals-core": "^1.6.0",
     "jszip": "^3.10.1",
     "localforage": "^1.10.0",
     "lodash.get": "^4.4.2",
     "react-drag-drop-files": "^2.3.8",
     "react-is": "~18.2.0",
-    "@dxos/app-framework": "0.6.11",
-    "@dxos/async": "0.6.11",
-    "@dxos/automerge": "0.6.11",
-    "@dxos/display-name": "0.6.11",
-    "@dxos/client": "0.6.11",
-    "@dxos/echo-schema": "0.6.11",
-    "@dxos/invariant": "0.6.11",
-    "@dxos/local-storage": "0.6.11",
-    "@dxos/keys": "0.6.11",
-    "@dxos/log": "0.6.11",
-    "@dxos/migrations": "0.6.11",
-    "@dxos/plugin-client": "0.6.11",
-    "@dxos/plugin-graph": "0.6.11",
-    "@dxos/plugin-attention": "0.6.11",
-    "@dxos/plugin-metadata": "0.6.11",
-    "@dxos/plugin-observability": "0.6.11",
-    "@dxos/plugin-settings": "0.6.11",
-    "@dxos/react-client": "0.6.11",
-    "@dxos/react-ui-attention": "0.6.11",
-    "@dxos/shell": "0.6.11",
-    "@dxos/react-ui-editor": "0.6.11",
-    "@dxos/util": "0.6.11"
+    "@dxos/app-framework": "0.6.12-main.568932b",
+    "@dxos/async": "0.6.12-main.568932b",
+    "@dxos/automerge": "0.6.12-main.568932b",
+    "@dxos/client": "0.6.12-main.568932b",
+    "@dxos/display-name": "0.6.12-main.568932b",
+    "@dxos/context": "0.6.12-main.568932b",
+    "@dxos/invariant": "0.6.12-main.568932b",
+    "@dxos/echo-schema": "0.6.12-main.568932b",
+    "@dxos/local-storage": "0.6.12-main.568932b",
+    "@dxos/keys": "0.6.12-main.568932b",
+    "@dxos/migrations": "0.6.12-main.568932b",
+    "@dxos/plugin-attention": "0.6.12-main.568932b",
+    "@dxos/log": "0.6.12-main.568932b",
+    "@dxos/plugin-client": "0.6.12-main.568932b",
+    "@dxos/plugin-metadata": "0.6.12-main.568932b",
+    "@dxos/plugin-observability": "0.6.12-main.568932b",
+    "@dxos/plugin-graph": "0.6.12-main.568932b",
+    "@dxos/plugin-settings": "0.6.12-main.568932b",
+    "@dxos/plugin-status-bar": "0.6.12-main.568932b",
+    "@dxos/protocols": "0.6.12-main.568932b",
+    "@dxos/react-client": "0.6.12-main.568932b",
+    "@dxos/react-ui-attention": "0.6.12-main.568932b",
+    "@dxos/react-ui-editor": "0.6.12-main.568932b",
+    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.568932b",
+    "@dxos/shell": "0.6.12-main.568932b",
+    "@dxos/util": "0.6.12-main.568932b"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -82,18 +90,17 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/react-ui": "0.6.11",
-    "@dxos/react-ui-theme": "0.6.11",
-    "@dxos/storybook-utils": "0.6.11"
+    "vite": "5.4.7",
+    "@dxos/react-ui": "0.6.12-main.568932b",
+    "@dxos/react-ui-theme": "0.6.12-main.568932b",
+    "@dxos/storybook-utils": "0.6.12-main.568932b"
   },
-  "optionalDependencies": {
-    "@babel/core": "^7.18.13",
+  "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.11",
-    "@dxos/react-ui-theme": "0.6.11"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.12-main.568932b",
+    "@dxos/react-ui-theme": "0.6.12-main.568932b"
   },
   "publishConfig": {
     "access": "public"

package/src/SpacePlugin.tsx

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type IconProps, Plus, SignIn, CardsThree, Warning } from '@phosphor-icons/react';
 import { effect, signal } from '@preact/signals-core';
 import React from 'react';
 
@@ -10,45 +9,45 @@ import {
   type IntentDispatcher,
   type IntentPluginProvides,
   LayoutAction,
-  Surface,
   type LocationProvides,
   NavigationAction,
   type Plugin,
   type PluginDefinition,
-  openIds,
+  Surface,
   firstIdInPart,
+  openIds,
+  parseGraphPlugin,
   parseIntentPlugin,
-  parseNavigationPlugin,
   parseMetadataResolverPlugin,
+  parseNavigationPlugin,
   resolvePlugin,
-  parseGraphPlugin,
 } from '@dxos/app-framework';
 import { EventSubscriptions, type Trigger, type UnsubscribeCallback } from '@dxos/async';
-import { type Identifiable, isReactiveObject, type EchoReactiveObject } from '@dxos/echo-schema';
+import { type EchoReactiveObject, type Identifiable, isReactiveObject } from '@dxos/echo-schema';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { Migrations } from '@dxos/migrations';
 import { type AttentionPluginProvides, parseAttentionPlugin } from '@dxos/plugin-attention';
 import { type ClientPluginProvides, parseClientPlugin } from '@dxos/plugin-client';
-import { createExtension, isGraphNode, memoize, type Node, toSignal } from '@dxos/plugin-graph';
+import { type Node, createExtension, isGraphNode, memoize, toSignal } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { type Client, PublicKey } from '@dxos/react-client';
 import {
+  Expando,
+  Filter,
   type PropertiesTypeProps,
   type Space,
+  SpaceState,
   create,
-  Expando,
-  Filter,
   fullyQualifiedId,
   getSpace,
   getTypename,
   isEchoObject,
   isSpace,
   loadObjectReferences,
-  SpaceState,
 } from '@dxos/react-client/echo';
 import { Dialog } from '@dxos/react-ui';
-import { InvitationManager, type InvitationManagerProps, osTranslations, ClipboardProvider } from '@dxos/shell/react';
+import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
 import { ComplexMap, nonNullable, reduceGroupBy } from '@dxos/util';
 
 import {
@@ -61,15 +60,17 @@ import {
   MissingObject,
   PopoverRenameObject,
   PopoverRenameSpace,
+  SaveStatus,
   ShareSpaceButton,
   SmallPresence,
   SmallPresenceLive,
   SpacePresence,
   SpaceSettings,
+  SyncStatus,
 } from './components';
 import meta, { SPACE_PLUGIN, SpaceAction } from './meta';
 import translations from './translations';
-import { CollectionType, type SpacePluginProvides, type SpaceSettingsProps, type PluginState } from './types';
+import { CollectionType, type PluginState, type SpacePluginProvides, type SpaceSettingsProps } from './types';
 import {
   COMPOSER_SPACE_LOCK,
   SHARED,
@@ -118,7 +119,9 @@ export const SpacePlugin = ({
   firstRun,
   onFirstRun,
 }: SpacePluginOptions = {}): PluginDefinition<SpacePluginProvides> => {
-  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN);
+  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN, {
+    onSpaceCreate: 'dxos.org/plugin/markdown/action/create',
+  });
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,
     spaceNames: {},
@@ -340,8 +343,7 @@ export const SpacePlugin = ({
         records: {
           [CollectionType.typename]: {
             placeholder: ['unnamed collection label', { ns: SPACE_PLUGIN }],
-            icon: (props: IconProps) => <CardsThree {...props} />,
-            iconSymbol: 'ph--cards-three--regular',
+            icon: 'ph--cards-three--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (collection: CollectionType) =>
               loadObjectReferences(collection, (collection) => [
@@ -362,7 +364,11 @@ export const SpacePlugin = ({
             case 'main':
               // TODO(wittjosiah): Need to avoid shotgun parsing space state everywhere.
               return isSpace(primary) && primary.state.get() === SpaceState.SPACE_READY ? (
-                <Surface data={{ active: primary.properties[CollectionType.typename] }} role={role} {...rest} />
+                <Surface
+                  data={{ active: primary.properties[CollectionType.typename], id: primary.id }}
+                  role={role}
+                  {...rest}
+                />
               ) : primary instanceof CollectionType ? (
                 { node: <CollectionMain collection={primary} />, disposition: 'fallback' }
               ) : typeof primary === 'string' && primary.length === OBJECT_ID_LENGTH ? (
@@ -441,6 +447,14 @@ export const SpacePlugin = ({
               } else {
                 return <MenuFooter object={data.object} />;
               }
+            case 'status': {
+              return (
+                <>
+                  <SyncStatus />
+                  <SaveStatus />
+                </>
+              );
+            }
             default:
               return null;
           }
@@ -540,8 +554,7 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
-                    icon: (props: IconProps) => <Plus {...props} />,
-                    iconSymbol: 'ph--plus--regular',
+                    icon: 'ph--plus--regular',
                     disposition: 'toolbar',
                     testId: 'spacePlugin.createSpace',
                   },
@@ -561,8 +574,7 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['join space label', { ns: SPACE_PLUGIN }],
-                    icon: (props: IconProps) => <SignIn {...props} />,
-                    iconSymbol: 'ph--sign-in--regular',
+                    icon: 'ph--sign-in--regular',
                     testId: 'spacePlugin.joinSpace',
                   },
                 },
@@ -805,6 +817,15 @@ export const SpacePlugin = ({
                 data: { space, id: space.id, activeParts: { main: [space.id] } },
 
                 intents: [
+                  ...(settings.values.onSpaceCreate
+                    ? [
+                        [
+                          { action: settings.values.onSpaceCreate, data: { space } },
+                          { action: SpaceAction.ADD_OBJECT, data: { target: space } },
+                          { action: NavigationAction.EXPOSE },
+                        ],
+                      ]
+                    : []),
                   [
                     {
                       action: ObservabilityAction.SEND_EVENT,
@@ -1020,8 +1041,7 @@ export const SpacePlugin = ({
                             title: translations[0]['en-US'][SPACE_PLUGIN]['space limit label'],
                             description: translations[0]['en-US'][SPACE_PLUGIN]['space limit description'],
                             duration: 5_000,
-                            icon: (props: IconProps) => <Warning {...props} />,
-                            iconSymbol: 'ph--warning--regular',
+                            icon: 'ph--warning--regular',
                             actionLabel: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects label'],
                             actionAlt: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects alt'],
                             // TODO(wittjosiah): Use OS namespace.
@@ -1060,7 +1080,7 @@ export const SpacePlugin = ({
               }
 
               return {
-                data: { id: object.id, object, activeParts: { main: [fullyQualifiedId(object)] } },
+                data: { id: fullyQualifiedId(object), object, activeParts: { main: [fullyQualifiedId(object)] } },
                 intents: [
                   [
                     {
@@ -1115,7 +1135,6 @@ export const SpacePlugin = ({
                       activeParts: {
                         main: deletionData.wasActive,
                         sidebar: deletionData.wasActive,
-                        complementary: deletionData.wasActive,
                       },
                     },
                   });

package/src/components/MenuFooter.tsx

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 

package/src/components/SaveStatus.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { type UnsubscribeCallback } from '@dxos/async';
+import { type Client } from '@dxos/client';
+import { type Space, type SpaceId } from '@dxos/client/echo';
+import { Context } from '@dxos/context';
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { useClient } from '@dxos/react-client';
+import { Icon, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const SaveStatus = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const [state, setState] = useState<'saved' | 'saving'>('saved');
+  useEffect(() => {
+    return createClientSaveTracker(client, (state) => {
+      setState(state);
+    });
+  }, []);
+
+  return (
+    <StatusBar.Item title={state === 'saving' ? t('saving label') : t('saved label')}>
+      <Icon icon={state === 'saving' ? 'ph--arrows-clockwise--regular' : 'ph--check-circle--regular'} size={4} />
+    </StatusBar.Item>
+  );
+};
+
+const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
+  const unsubscribeCallbacks: Record<SpaceId, UnsubscribeCallback> = {};
+  const state: Record<SpaceId, 'saved' | 'saving'> = {};
+
+  const install = (spaces: Space[]) => {
+    for (const space of spaces) {
+      if (state[space.id]) {
+        continue;
+      }
+
+      state[space.id] = 'saved';
+      unsubscribeCallbacks[space.id] = createSpaceSaveTracker(space, (s) => {
+        state[space.id] = s;
+        cb(Object.values(state).some((s) => s === 'saving') ? 'saving' : 'saved');
+      });
+    }
+  };
+  client.spaces.subscribe((spaces) => {
+    install(spaces);
+  });
+  install(client.spaces.get());
+
+  return () => {
+    for (const unsubscribe of Object.values(unsubscribeCallbacks)) {
+      unsubscribe();
+    }
+  };
+};
+
+const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') => void): UnsubscribeCallback => {
+  const ctx = new Context();
+
+  void space.waitUntilReady().then(() => {
+    if (ctx.disposed) {
+      return;
+    }
+
+    let hasUnsavedChanges = false;
+    let lastFlushPromise: Promise<void> | undefined;
+    space.crud.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+      hasUnsavedChanges = unsavedDocuments.length > 0;
+    });
+    space.crud.saveStateChanged.debounce(500).on(ctx, () => {
+      if (hasUnsavedChanges) {
+        lastFlushPromise = undefined;
+        cb('saving');
+      } else {
+        const flushPromise = space.crud.flush();
+        lastFlushPromise = flushPromise;
+        void flushPromise.then(() => {
+          if (lastFlushPromise === flushPromise) {
+            cb('saved');
+          }
+        });
+      }
+    });
+  });
+
+  return () => {
+    void ctx.dispose();
+  };
+};

package/src/components/SpaceMain/SpaceMain.tsx

@@ -6,35 +6,14 @@ import { Command } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type Action } from '@dxos/plugin-graph';
 import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Button, Main, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Main, useTranslation } from '@dxos/react-ui';
 import { getSize, mx, topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { ClipboardProvider } from '@dxos/shell/react';
 
 import { SpaceMembersSection } from './SpaceMembersSection';
 import { SPACE_PLUGIN } from '../../meta';
 
-const _InFlowSpaceActions = ({ actionsMap }: { actionsMap: Record<string, Action> }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  return (
-    <section className='mbe-4 col-start-2 col-end-4 md:col-end-7 grid gap-2 auto-rows-min grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]'>
-      {Object.entries(actionsMap)
-        .filter(([_, { properties }]) => properties?.mainAreaDisposition === 'in-flow')
-        .map(([actionId, { data: invoke, properties }]) => {
-          const Icon = properties?.icon;
-          const label = properties?.label;
-          return (
-            <Button key={actionId} classNames='block text-center plb-2 font-normal'>
-              {Icon && <Icon size={5} className='mli-auto' />}
-              <p>{toLocalizedString(label, t)}</p>
-            </Button>
-          );
-        })}
-    </section>
-  );
-};
-
 const KeyShortcuts = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   return (

package/src/components/SpacePresence.tsx

@@ -110,7 +110,7 @@ export type MemberPresenceProps = ThemedClassName<{
 
 export const FullPresence = (props: MemberPresenceProps) => {
   const { size = 9, onMemberClick } = props;
-  const members = useDefaultValue(props.members, []);
+  const members = useDefaultValue(props.members, () => []);
 
   if (members.length === 0) {
     return null;

package/src/components/SpaceSettings.tsx

@@ -4,16 +4,17 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
 import { SettingsValue } from '@dxos/plugin-settings';
-import { Input, useTranslation } from '@dxos/react-ui';
+import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
-import { type SpaceSettingsProps } from '../types';
+import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
 
 export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
+  const plugins = useResolvePlugins(parseSpaceInitPlugin);
 
   return (
     <>
@@ -29,6 +30,34 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
           }
         />
       </SettingsValue>
+
+      <SettingsValue label={t('default on space create label')}>
+        <Select.Root
+          value={settings.onSpaceCreate}
+          onValueChange={(value) => {
+            settings.onSpaceCreate = value;
+          }}
+        >
+          <Select.TriggerButton />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {plugins.map(
+                  ({
+                    provides: {
+                      space: { onSpaceCreate },
+                    },
+                  }) => (
+                    <Select.Option key={onSpaceCreate.action} value={onSpaceCreate.action}>
+                      {toLocalizedString(onSpaceCreate.label, t)}
+                    </Select.Option>
+                  ),
+                )}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </SettingsValue>
     </>
   );
 };

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

@@ -0,0 +1,62 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { SpaceId } from '@dxos/keys';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SyncStatusDetail, SyncStatusIndicator } from './SyncStatus';
+import { getSyncSummary, type SpaceSyncStateMap } from './types';
+import translations from '../../translations';
+
+const Story = (props: any) => {
+  return (
+    <div className='flex flex-col-reverse p-4 '>
+      <SyncStatusIndicator {...props} />
+    </div>
+  );
+};
+
+export default {
+  title: 'plugin-space/SyncStatusIndicator',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  component: SyncStatusIndicator,
+  parameters: { translations },
+  render: Story,
+};
+
+const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
+
+const state: SpaceSyncStateMap = Array.from({ length: 5 }).reduce<SpaceSyncStateMap>((map) => {
+  const total = random({ min: 10, max: 500 });
+  const haveLocal = random({ min: 0, max: total });
+  const haveRemote = random({ min: 0, max: total });
+  map[SpaceId.random()] = {
+    localDocumentCount: haveLocal,
+    remoteDocumentCount: haveRemote,
+    missingOnLocal: total - haveLocal,
+    missingOnRemote: total - haveRemote,
+    differentDocuments: 0,
+  };
+
+  return map;
+}, {});
+
+export const Default = {
+  args: {
+    state,
+  },
+};
+
+export const Detail = {
+  render: SyncStatusDetail,
+  args: {
+    state,
+    summary: getSyncSummary(state),
+    classNames: 'm-2 w-[200px] border border-separator rounded-md',
+  },
+};