@dxos/plugin-space 0.6.14-main.8b352a0 → 0.6.14-staging.3e2eaca

package/dist/lib/browser/index.mjs

@@ -3,7 +3,7 @@ import {
   SPACE_PLUGIN_SHORT_ID,
   SpaceAction,
   meta_default
-} from "./chunk-AVLRQF6L.mjs";
+} from "./chunk-DJE2HYFV.mjs";
 import {
   ActorSchema,
   ChannelType,
@@ -15,26 +15,26 @@ import {
   ThreadStatus,
   ThreadType,
   parseSpaceInitPlugin
-} from "./chunk-FOI7DAUV.mjs";
+} from "./chunk-OWZKSWMX.mjs";
 
 // packages/plugins/plugin-space/src/SpacePlugin.tsx
 import { signal } from "@preact/signals-core";
-import React18 from "react";
-import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction3, Surface as Surface2, firstIdInPart, openIds, parseGraphPlugin, parseIntentPlugin as parseIntentPlugin3, parseMetadataResolverPlugin, parseNavigationPlugin as parseNavigationPlugin2, resolvePlugin } from "@dxos/app-framework";
+import React17 from "react";
+import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction4, Surface, findPlugin, firstIdInPart, openIds, parseGraphPlugin, parseIntentPlugin as parseIntentPlugin2, parseLayoutPlugin, parseMetadataResolverPlugin, parseNavigationPlugin as parseNavigationPlugin2, resolvePlugin } from "@dxos/app-framework";
 import { EventSubscriptions } from "@dxos/async";
 import { isReactiveObject as isReactiveObject2 } from "@dxos/echo-schema";
 import { scheduledEffect } from "@dxos/echo-signals/core";
+import { invariant as invariant2 } from "@dxos/invariant";
 import { LocalStorageStore } from "@dxos/local-storage";
 import { log as log3 } from "@dxos/log";
 import { Migrations as Migrations2 } from "@dxos/migrations";
 import { parseAttentionPlugin } from "@dxos/plugin-attention";
 import { parseClientPlugin } from "@dxos/plugin-client";
 import { createExtension, memoize as memoize2, toSignal } from "@dxos/plugin-graph";
-import { ObservabilityAction } from "@dxos/plugin-observability/meta";
+import { ObservabilityAction as ObservabilityAction2 } from "@dxos/plugin-observability/meta";
 import { PublicKey as PublicKey2 } from "@dxos/react-client";
-import { Expando, Filter, SpaceState as SpaceState3, create as create2, fullyQualifiedId as fullyQualifiedId4, getSpace as getSpace4, getTypename as getTypename2, isEchoObject as isEchoObject2, isSpace as isSpace2, loadObjectReferences, parseId } from "@dxos/react-client/echo";
-import { Dialog } from "@dxos/react-ui";
-import { ClipboardProvider as ClipboardProvider2, InvitationManager, osTranslations } from "@dxos/shell/react";
+import { Expando, Filter, SpaceState as SpaceState2, create as create2, fullyQualifiedId as fullyQualifiedId4, getSpace as getSpace4, getTypename as getTypename2, isEchoObject as isEchoObject2, isSpace as isSpace2, loadObjectReferences, parseId, FQ_ID_LENGTH } from "@dxos/react-client/echo";
+import { osTranslations } from "@dxos/shell/react";
 import { ComplexMap as ComplexMap2, nonNullable, reduceGroupBy } from "@dxos/util";
 
 // packages/plugins/plugin-space/src/components/AwaitingObject.tsx
@@ -70,7 +70,7 @@ var AwaitingObject = ({ id }) => {
   useEffect(() => {
     if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
       setFound(true);
-      if (navigationPlugin?.provides.location.active === id) {
+      if (navigationPlugin?.provides.location.active.solo?.[0].id === id) {
         setOpen(false);
       }
     }
@@ -177,15 +177,105 @@ var DefaultObjectSettings = ({ object }) => {
   })));
 };
 
+// packages/plugins/plugin-space/src/components/JoinDialog.tsx
+import React5, { useCallback } from "react";
+import { LayoutAction, NavigationAction as NavigationAction2, useIntentDispatcher } from "@dxos/app-framework";
+import { useGraph } from "@dxos/plugin-graph";
+import { ObservabilityAction } from "@dxos/plugin-observability/meta";
+import { useSpaces } from "@dxos/react-client/echo";
+import { Dialog, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { JoinPanel } from "@dxos/shell/react";
+var JoinDialog = ({ navigableCollections, ...props }) => {
+  const { t } = useTranslation5(SPACE_PLUGIN);
+  const dispatch = useIntentDispatcher();
+  const spaces = useSpaces();
+  const { graph } = useGraph();
+  const handleDone = useCallback(async (result) => {
+    if (result?.spaceKey) {
+      await Promise.all([
+        dispatch({
+          action: LayoutAction.SET_LAYOUT,
+          data: {
+            element: "toast",
+            subject: {
+              id: `${SPACE_PLUGIN}/join-success`,
+              duration: 5e3,
+              title: t("join success label"),
+              closeLabel: t("dismiss label")
+            }
+          }
+        }),
+        dispatch({
+          action: LayoutAction.SET_LAYOUT,
+          data: {
+            element: "dialog",
+            state: false
+          }
+        })
+      ]);
+    }
+    const space = spaces.find(({ key }) => result?.spaceKey?.equals(key));
+    const target = result?.target || (navigableCollections ? space?.id : void 0);
+    if (target) {
+      await graph.waitForPath({
+        target
+      }).catch(() => {
+      });
+      await Promise.all([
+        dispatch({
+          action: NavigationAction2.OPEN,
+          data: {
+            activeParts: {
+              main: [
+                target
+              ]
+            }
+          }
+        }),
+        dispatch({
+          action: NavigationAction2.EXPOSE,
+          data: {
+            id: target
+          }
+        })
+      ]);
+    }
+    if (space) {
+      await dispatch({
+        action: ObservabilityAction.SEND_EVENT,
+        data: {
+          name: "space.join",
+          properties: {
+            spaceId: space.id
+          }
+        }
+      });
+    }
+  }, [
+    dispatch,
+    spaces
+  ]);
+  return /* @__PURE__ */ React5.createElement(Dialog.Content, null, /* @__PURE__ */ React5.createElement(JoinPanel, {
+    ...props,
+    exitActionParent: /* @__PURE__ */ React5.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React5.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    onDone: handleDone
+  }));
+};
+
 // packages/plugins/plugin-space/src/components/MenuFooter.tsx
 import { Planet } from "@phosphor-icons/react";
-import React5 from "react";
+import React6 from "react";
 import { getSpace as getSpace2 } from "@dxos/client/echo";
 import { useClient as useClient2 } from "@dxos/react-client";
-import { DropdownMenu, toLocalizedString, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { DropdownMenu, toLocalizedString, useTranslation as useTranslation6 } from "@dxos/react-ui";
 
 // packages/plugins/plugin-space/src/util.tsx
-import { NavigationAction as NavigationAction2 } from "@dxos/app-framework";
+import { NavigationAction as NavigationAction3 } from "@dxos/app-framework";
 import { create, isReactiveObject, getTypename, getSchema, getObjectAnnotation, EXPANDO_TYPENAME } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
 import { Migrations } from "@dxos/migrations";
@@ -217,8 +307,9 @@ var getSpaceDisplayName = (space, { personal, namesCache = {} } = {}) => {
     }
   ];
 };
-var getCollectionGraphNodePartials = ({ collection, space, resolve }) => {
+var getCollectionGraphNodePartials = ({ navigable, collection, space, resolve }) => {
   return {
+    disabled: !navigable,
     acceptPersistenceClass: /* @__PURE__ */ new Set([
       "echo"
     ]),
@@ -258,13 +349,14 @@ var getCollectionGraphNodePartials = ({ collection, space, resolve }) => {
 var checkPendingMigration = (space) => {
   return space.state.get() === SpaceState.SPACE_REQUIRES_MIGRATION || space.state.get() === SpaceState.SPACE_READY && !!Migrations.versionProperty && space.properties[Migrations.versionProperty] !== Migrations.targetVersion;
 };
-var constructSpaceNode = ({ space, personal, namesCache, resolve }) => {
+var constructSpaceNode = ({ space, navigable = false, personal, namesCache, resolve }) => {
   const hasPendingMigration = checkPendingMigration(space);
   const collection = space.state.get() === SpaceState.SPACE_READY && space.properties[CollectionType.typename];
   const partials = space.state.get() === SpaceState.SPACE_READY && collection instanceof CollectionType ? getCollectionGraphNodePartials({
     collection,
     space,
-    resolve
+    resolve,
+    navigable
   }) : {};
   return {
     id: space.id,
@@ -278,12 +370,12 @@ var constructSpaceNode = ({ space, personal, namesCache, resolve }) => {
       }),
       description: space.state.get() === SpaceState.SPACE_READY && space.properties.description,
       icon: "ph--planet--regular",
-      disabled: space.state.get() !== SpaceState.SPACE_READY || hasPendingMigration,
+      disabled: !navigable || space.state.get() !== SpaceState.SPACE_READY || hasPendingMigration,
       testId: "spacePlugin.space"
     }
   };
 };
-var constructSpaceActionGroups = ({ space, dispatch }) => {
+var constructSpaceActionGroups = ({ space, navigable, dispatch }) => {
   const state = space.state.get();
   const hasPendingMigration = checkPendingMigration(space);
   const getId = (id) => `${id}/${space.id}`;
@@ -305,8 +397,6 @@ var constructSpaceActionGroups = ({ space, dispatch }) => {
         ],
         icon: "ph--plus--regular",
         disposition: "toolbar",
-        // TODO(wittjosiah): This is currently a navtree feature. Address this with cmd+k integration.
-        // mainAreaDisposition: 'in-flow',
         menuType: "searchList",
         testId: "spacePlugin.createObject"
       },
@@ -326,9 +416,11 @@ var constructSpaceActionGroups = ({ space, dispatch }) => {
                 })
               }
             },
-            {
-              action: NavigationAction2.OPEN
-            }
+            ...navigable ? [
+              {
+                action: NavigationAction3.OPEN
+              }
+            ] : []
           ]),
           properties: {
             label: [
@@ -373,7 +465,6 @@ var constructSpaceActions = ({ space, dispatch, personal, migrating }) => {
         ],
         icon: "ph--database--regular",
         disposition: "toolbar",
-        mainAreaDisposition: "in-flow",
         disabled: migrating || Migrations.running(space)
       }
     });
@@ -391,7 +482,7 @@ var constructSpaceActions = ({ space, dispatch, personal, migrating }) => {
           plugin: SPACE_PLUGIN,
           action: SpaceAction.SHARE,
           data: {
-            spaceId: space.id
+            space
           }
         });
       },
@@ -407,8 +498,7 @@ var constructSpaceActions = ({ space, dispatch, personal, migrating }) => {
         keyBinding: {
           macos: "meta+.",
           windows: "alt+."
-        },
-        mainAreaDisposition: "absent"
+        }
       }
     }, {
       id: locked ? getId(SpaceAction.UNLOCK) : getId(SpaceAction.LOCK),
@@ -455,8 +545,28 @@ var constructSpaceActions = ({ space, dispatch, personal, migrating }) => {
         keyBinding: {
           macos: "shift+F6",
           windows: "shift+F6"
-        },
-        mainAreaDisposition: "absent"
+        }
+      }
+    }, {
+      id: getId(SpaceAction.OPEN_SETTINGS),
+      type: ACTION_TYPE,
+      data: async () => {
+        await dispatch({
+          plugin: SPACE_PLUGIN,
+          action: SpaceAction.OPEN_SETTINGS,
+          data: {
+            space
+          }
+        });
+      },
+      properties: {
+        label: [
+          "open space settings label",
+          {
+            ns: SPACE_PLUGIN
+          }
+        ],
+        icon: "ph--gear--regular"
       }
     });
   }
@@ -481,7 +591,6 @@ var constructSpaceActions = ({ space, dispatch, personal, migrating }) => {
           }
         ],
         icon: "ph--x--regular",
-        mainAreaDisposition: "menu",
         disabled: personal
       }
     });
@@ -507,14 +616,13 @@ var constructSpaceActions = ({ space, dispatch, personal, migrating }) => {
           }
         ],
         icon: "ph--clock-counter-clockwise--regular",
-        disposition: "toolbar",
-        mainAreaDisposition: "in-flow"
+        disposition: "toolbar"
       }
     });
   }
   return actions;
 };
-var createObjectNode = ({ object, space, resolve }) => {
+var createObjectNode = ({ object, space, navigable = false, resolve }) => {
   const type = getTypename(object);
   if (!type) {
     return void 0;
@@ -526,7 +634,8 @@ var createObjectNode = ({ object, space, resolve }) => {
   const partials = object instanceof CollectionType ? getCollectionGraphNodePartials({
     collection: object,
     space,
-    resolve
+    resolve,
+    navigable
   }) : metadata.graphProps;
   return {
     id: fullyQualifiedId2(object),
@@ -547,7 +656,7 @@ var createObjectNode = ({ object, space, resolve }) => {
     }
   };
 };
-var constructObjectActionGroups = ({ object, dispatch }) => {
+var constructObjectActionGroups = ({ object, navigable, dispatch }) => {
   if (!(object instanceof CollectionType)) {
     return [];
   }
@@ -567,8 +676,6 @@ var constructObjectActionGroups = ({ object, dispatch }) => {
         ],
         icon: "ph--plus--regular",
         disposition: "toolbar",
-        // TODO(wittjosiah): This is currently a navtree feature. Address this with cmd+k integration.
-        // mainAreaDisposition: 'in-flow',
         menuType: "searchList",
         testId: "spacePlugin.createObject"
       },
@@ -588,9 +695,11 @@ var constructObjectActionGroups = ({ object, dispatch }) => {
                 })
               }
             },
-            {
-              action: NavigationAction2.OPEN
-            }
+            ...navigable ? [
+              {
+                action: NavigationAction3.OPEN
+              }
+            ] : []
           ]),
           properties: {
             label: [
@@ -638,7 +747,7 @@ var constructObjectActions = ({ node, dispatch }) => {
       }
     },
     {
-      id: getId(SpaceAction.REMOVE_OBJECT),
+      id: getId(SpaceAction.REMOVE_OBJECTS),
       type: ACTION_TYPE,
       data: async () => {
         const graph = getGraph(node);
@@ -647,9 +756,11 @@ var constructObjectActions = ({ node, dispatch }) => {
         }).find(({ data }) => data instanceof CollectionType)?.data;
         await dispatch([
           {
-            action: SpaceAction.REMOVE_OBJECT,
+            action: SpaceAction.REMOVE_OBJECTS,
             data: {
-              object,
+              objects: [
+                object
+              ],
               collection
             }
           }
@@ -722,7 +833,7 @@ var cloneObject = async (object, resolve, newSpace) => {
   const serializer = metadata.serializer;
   invariant(serializer, `No serializer for type: ${typename}`, {
     F: __dxlog_file,
-    L: 604,
+    L: 632,
     S: void 0,
     A: [
       "serializer",
@@ -741,83 +852,42 @@ var cloneObject = async (object, resolve, newSpace) => {
 
 // packages/plugins/plugin-space/src/components/MenuFooter.tsx
 var MenuFooter = ({ object }) => {
-  const { t } = useTranslation5(SPACE_PLUGIN);
+  const { t } = useTranslation6(SPACE_PLUGIN);
   const client = useClient2();
   const space = getSpace2(object);
   const spaceName = space ? getSpaceDisplayName(space, {
     personal: client.spaces.default === space
   }) : "";
-  return space ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React5.createElement(DropdownMenu.GroupLabel, null, t("menu footer label")), /* @__PURE__ */ React5.createElement("dl", {
+  return space ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React6.createElement(DropdownMenu.GroupLabel, null, t("menu footer label")), /* @__PURE__ */ React6.createElement("dl", {
     className: "pis-2 mbe-2 text-xs grid grid-cols-[max-content_1fr] gap-2"
-  }, /* @__PURE__ */ React5.createElement("dt", {
+  }, /* @__PURE__ */ React6.createElement("dt", {
     className: "uppercase text-[.75em] tracking-wide font-medium mbs-px self-start"
-  }, t("location label")), /* @__PURE__ */ React5.createElement("dd", {
+  }, t("location label")), /* @__PURE__ */ React6.createElement("dd", {
     className: "line-clamp-3"
-  }, /* @__PURE__ */ React5.createElement(Planet, {
+  }, /* @__PURE__ */ React6.createElement(Planet, {
     className: "inline-block mie-1"
   }), toLocalizedString(spaceName, t)))) : null;
 };
 
-// packages/plugins/plugin-space/src/components/MissingObject.tsx
-import React6, { useEffect as useEffect2, useState as useState2 } from "react";
-import { parseIntentPlugin as parseIntentPlugin2, useResolvePlugin as useResolvePlugin2 } from "@dxos/app-framework";
-import { Status, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { baseSurface as baseSurface2, descriptionText as descriptionText2, mx as mx3 } from "@dxos/react-ui-theme";
-var WAIT_FOR_OBJECT_TIMEOUT2 = 1e3;
-var MissingObject = ({ id }) => {
-  const { t } = useTranslation6(SPACE_PLUGIN);
-  const [waiting, setWaiting] = useState2(false);
-  const intentPlugin = useResolvePlugin2(parseIntentPlugin2);
-  useEffect2(() => {
-    if (!intentPlugin) {
-      return;
-    }
-    const timeout = setTimeout(async () => {
-      setWaiting(true);
-      await intentPlugin.provides.intent.dispatch({
-        plugin: SPACE_PLUGIN,
-        action: SpaceAction.WAIT_FOR_OBJECT,
-        data: {
-          id
-        }
-      });
-    }, WAIT_FOR_OBJECT_TIMEOUT2);
-    return () => clearTimeout(timeout);
-  }, [
-    intentPlugin,
-    id
-  ]);
-  return /* @__PURE__ */ React6.createElement("div", {
-    role: "none",
-    className: mx3(baseSurface2, "min-bs-screen is-full flex items-center justify-center p-8")
-  }, waiting ? /* @__PURE__ */ React6.createElement("p", {
-    role: "alert",
-    className: mx3(descriptionText2, "border border-dashed border-neutral-400/50 rounded-lg flex items-center justify-center p-8 font-normal text-lg")
-  }, t("missing object message")) : /* @__PURE__ */ React6.createElement(Status, {
-    indeterminate: true,
-    "aria-label": "Initializing"
-  }));
-};
-
 // packages/plugins/plugin-space/src/components/PersistenceStatus.tsx
 import { ArrowsCounterClockwise, CheckCircle as CheckCircle2, Warning } from "@phosphor-icons/react";
-import React7, { useEffect as useEffect3, useState as useState3 } from "react";
+import React7, { useEffect as useEffect2, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
 import { Tooltip, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { getSize as getSize2, mx as mx4, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
-var Status2;
-(function(Status3) {
-  Status3[Status3["PERSISTED_LOCALLY"] = 0] = "PERSISTED_LOCALLY";
-  Status3[Status3["PENDING"] = 1] = "PENDING";
-  Status3[Status3["ERROR"] = 2] = "ERROR";
-})(Status2 || (Status2 = {}));
+import { getSize as getSize2, mx as mx3, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
+var Status;
+(function(Status2) {
+  Status2[Status2["PERSISTED_LOCALLY"] = 0] = "PERSISTED_LOCALLY";
+  Status2[Status2["PENDING"] = 1] = "PENDING";
+  Status2[Status2["ERROR"] = 2] = "ERROR";
+})(Status || (Status = {}));
 var PersistenceStatus = ({ db }) => {
   const { t } = useTranslation7(SPACE_PLUGIN);
-  const [displayMessage, setDisplayMessage] = useState3(false);
-  const [status, naturalSetStatus] = useState3(0);
-  const [prevStatus, setPrevStatus] = useState3(0);
+  const [displayMessage, setDisplayMessage] = useState2(false);
+  const [status, naturalSetStatus] = useState2(0);
+  const [prevStatus, setPrevStatus] = useState2(0);
   const _setStatus = debounce(naturalSetStatus, 500);
-  useEffect3(() => {
+  useEffect2(() => {
     setPrevStatus(status);
     if (prevStatus !== status && status === 0) {
       setDisplayMessage(true);
@@ -832,17 +902,17 @@ var PersistenceStatus = ({ db }) => {
       return /* @__PURE__ */ React7.createElement("div", {
         className: "flex items-center"
       }, /* @__PURE__ */ React7.createElement(Warning, {
-        className: mx4(getSize2(4), "me-1")
+        className: mx3(getSize2(4), "me-1")
       }), /* @__PURE__ */ React7.createElement("span", {
-        className: mx4("text-sm", warningText)
+        className: mx3("text-sm", warningText)
       }, t("persistence error label")));
     case 1:
       return /* @__PURE__ */ React7.createElement("div", {
         className: "flex items-center"
       }, /* @__PURE__ */ React7.createElement(ArrowsCounterClockwise, {
-        className: mx4(getSize2(4), "me-1")
+        className: mx3(getSize2(4), "me-1")
       }), /* @__PURE__ */ React7.createElement("span", {
-        className: mx4("text-sm", staticPlaceholderText)
+        className: mx3("text-sm", staticPlaceholderText)
       }, t("persistence pending label")));
     case 0:
     default:
@@ -852,9 +922,9 @@ var PersistenceStatus = ({ db }) => {
         role: "status",
         className: "flex items-center"
       }, /* @__PURE__ */ React7.createElement(CheckCircle2, {
-        className: mx4(getSize2(4), "me-1")
+        className: mx3(getSize2(4), "me-1")
       }), displayMessage && /* @__PURE__ */ React7.createElement("span", {
-        className: mx4("text-sm", staticPlaceholderText)
+        className: mx3("text-sm", staticPlaceholderText)
       }, t("persisted locally label"))), /* @__PURE__ */ React7.createElement(Tooltip.Portal, null, /* @__PURE__ */ React7.createElement(Tooltip.Content, {
         classNames: "z-10"
       }, t("persisted locally message"), /* @__PURE__ */ React7.createElement(Tooltip.Arrow, null))));
@@ -862,7 +932,7 @@ var PersistenceStatus = ({ db }) => {
 };
 
 // packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx
-import React8, { useCallback, useRef, useState as useState4 } from "react";
+import React8, { useCallback as useCallback2, useRef, useState as useState3 } from "react";
 import { log } from "@dxos/log";
 import { Button as Button2, Input as Input2, Popover, useTranslation as useTranslation8 } from "@dxos/react-ui";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx";
@@ -870,8 +940,8 @@ var PopoverRenameObject = ({ object: obj }) => {
   const { t } = useTranslation8(SPACE_PLUGIN);
   const doneButton = useRef(null);
   const object = obj;
-  const [name, setName] = useState4(object.name || object.title || "");
-  const handleDone = useCallback(() => {
+  const [name, setName] = useState3(object.name || object.title || "");
+  const handleDone = useCallback2(() => {
     try {
       object.name = name;
     } catch {
@@ -918,13 +988,13 @@ var PopoverRenameObject = ({ object: obj }) => {
 };
 
 // packages/plugins/plugin-space/src/components/PopoverRenameSpace.tsx
-import React9, { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
+import React9, { useCallback as useCallback3, useRef as useRef2, useState as useState4 } from "react";
 import { Button as Button3, Input as Input3, Popover as Popover2, useTranslation as useTranslation9 } from "@dxos/react-ui";
 var PopoverRenameSpace = ({ space }) => {
   const { t } = useTranslation9(SPACE_PLUGIN);
   const doneButton = useRef2(null);
-  const [name, setName] = useState5(space.properties.name ?? "");
-  const handleDone = useCallback2(() => {
+  const [name, setName] = useState4(space.properties.name ?? "");
+  const handleDone = useCallback3(() => {
     space.properties.name = name;
   }, [
     space,
@@ -958,270 +1028,37 @@ var PopoverRenameSpace = ({ space }) => {
 
 // packages/plugins/plugin-space/src/components/ShareSpaceButton.tsx
 import React10 from "react";
-import { useIntentDispatcher } from "@dxos/app-framework";
-import { Button as Button4, useTranslation as useTranslation10 } from "@dxos/react-ui";
-var ShareSpaceButton = ({ spaceId }) => {
-  const dispatch = useIntentDispatcher();
+import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { IconButton, useTranslation as useTranslation10 } from "@dxos/react-ui";
+var ShareSpaceButton = ({ space }) => {
+  const dispatch = useIntentDispatcher2();
   return /* @__PURE__ */ React10.createElement(ShareSpaceButtonImpl, {
     onClick: () => dispatch({
       action: SpaceAction.SHARE,
       data: {
-        spaceId
+        space
       }
     })
   });
 };
 var ShareSpaceButtonImpl = ({ onClick }) => {
   const { t } = useTranslation10(SPACE_PLUGIN);
-  return /* @__PURE__ */ React10.createElement(Button4, {
+  return /* @__PURE__ */ React10.createElement(IconButton, {
     "data-testid": "spacePlugin.shareSpaceButton",
-    onClick,
-    classNames: "mli-1"
-  }, t("share space label"));
-};
-
-// packages/plugins/plugin-space/src/components/SpaceMain/SpaceMain.tsx
-import { Command } from "@phosphor-icons/react";
-import React12 from "react";
-import { Surface } from "@dxos/app-framework";
-import { SpaceState as SpaceState2 } from "@dxos/react-client/echo";
-import { Main, useTranslation as useTranslation12 } from "@dxos/react-ui";
-import { getSize as getSize4, mx as mx6, topbarBlockPaddingStart } from "@dxos/react-ui-theme";
-import { ClipboardProvider } from "@dxos/shell/react";
-
-// packages/plugins/plugin-space/src/components/SpaceMain/SpaceMembersSection.tsx
-import { CaretDown, Check, UserPlus, UsersThree } from "@phosphor-icons/react";
-import React11, { useCallback as useCallback3, useState as useState6 } from "react";
-import { LayoutAction, useIntent } from "@dxos/app-framework";
-import { useMembers, SpaceMember, useSpaceInvitations } from "@dxos/react-client/echo";
-import { InvitationEncoder } from "@dxos/react-client/invitations";
-import { Invitation } from "@dxos/react-client/invitations";
-import { Button as Button5, ButtonGroup, DropdownMenu as DropdownMenu2, List, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { descriptionText as descriptionText3, getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
-import { InvitationListItem, IdentityListItem } from "@dxos/shell/react";
-var activeActionKeyStorageKey = "dxos:react-shell/space-manager/active-action";
-var Presence = SpaceMember.PresenceState;
-var handleCreateInvitationUrl = (invitationCode) => `${origin}?spaceInvitationCode=${invitationCode}`;
-var SpaceMemberList = ({ members }) => {
-  return members.length > 0 ? /* @__PURE__ */ React11.createElement(List, {
-    classNames: "col-start-2 col-end-5 gap-y-1 grid grid-cols-subgrid items-center"
-  }, members.map((member) => /* @__PURE__ */ React11.createElement(IdentityListItem, {
-    classNames: "contents",
-    key: member.identity.identityKey.toHex(),
-    identity: member.identity,
-    presence: member.presence
-  }))) : null;
-};
-var SpaceMembersSection = ({ space }) => {
-  const { t } = useTranslation11(SPACE_PLUGIN);
-  const invitations = useSpaceInvitations(space.key);
-  const { dispatch } = useIntent();
-  const handleCloseDialog = () => dispatch({
-    action: LayoutAction.SET_LAYOUT,
-    data: {
-      element: "dialog",
-      state: false
-    }
+    icon: "ph--users--regular",
+    label: t("share space label"),
+    onClick
   });
-  const handleInvitationSelect = ({ invitation: invitationObservable }) => {
-    const invitation = invitationObservable.get();
-    void dispatch({
-      action: LayoutAction.SET_LAYOUT,
-      data: {
-        element: "dialog",
-        component: "dxos.org/plugin/space/InvitationManagerDialog",
-        subject: {
-          invitationUrl: handleCreateInvitationUrl(InvitationEncoder.encode(invitation)),
-          send: handleCloseDialog,
-          status: invitation.state,
-          type: invitation.type,
-          authCode: invitation.authCode,
-          id: invitation.invitationId
-        }
-      }
-    });
-  };
-  const inviteActions = {
-    inviteOne: {
-      label: t("invite one label", {
-        ns: "os"
-      }),
-      description: t("invite one description", {
-        ns: "os"
-      }),
-      icon: UserPlus,
-      onClick: useCallback3(() => {
-        space.share?.({
-          type: Invitation.Type.INTERACTIVE,
-          authMethod: Invitation.AuthMethod.SHARED_SECRET
-        });
-      }, [
-        space
-      ])
-    },
-    inviteMany: {
-      label: t("invite many label", {
-        ns: "os"
-      }),
-      description: t("invite many description", {
-        ns: "os"
-      }),
-      icon: UsersThree,
-      onClick: useCallback3(() => {
-        space.share?.({
-          type: Invitation.Type.INTERACTIVE,
-          authMethod: Invitation.AuthMethod.NONE,
-          multiUse: true
-        });
-      }, [
-        space
-      ])
-    }
-  };
-  const [activeActionKey, setInternalActiveActionKey] = useState6(localStorage.getItem(activeActionKeyStorageKey) ?? "inviteOne");
-  const setActiveActionKey = (nextKey) => {
-    setInternalActiveActionKey(nextKey);
-    localStorage.setItem(activeActionKeyStorageKey, nextKey);
-  };
-  const activeAction = inviteActions[activeActionKey] ?? {};
-  const members = useMembers(space.key).reduce((acc, member) => {
-    acc[member.presence].push(member);
-    return acc;
-  }, {
-    [Presence.ONLINE]: [],
-    [Presence.OFFLINE]: []
-  });
-  return /* @__PURE__ */ React11.createElement("section", {
-    className: "mbe-4 col-span-3 grid gap-y-2 grid-cols-subgrid auto-rows-min"
-  }, /* @__PURE__ */ React11.createElement("h2", {
-    className: "contents"
-  }, /* @__PURE__ */ React11.createElement(UsersThree, {
-    weight: "duotone",
-    className: mx5(getSize3(5), "place-self-center")
-  }), /* @__PURE__ */ React11.createElement("span", {
-    className: "text-lg col-span-2"
-  }, t("space members label"))), /* @__PURE__ */ React11.createElement("h3", {
-    className: "col-start-2 col-span-3 text-sm italic text-description"
-  }, t("invitations heading")), invitations.length > 0 && /* @__PURE__ */ React11.createElement(List, {
-    classNames: "col-start-2 col-span-2 gap-y-2 grid grid-cols-[var(--rail-size)_1fr_var(--rail-action)_var(--rail-action)]"
-  }, invitations.map((invitation) => /* @__PURE__ */ React11.createElement(InvitationListItem, {
-    reverseEffects: true,
-    classNames: "pis-0 pie-0 gap-0 col-span-4 grid grid-cols-subgrid",
-    key: invitation.get().invitationId,
-    invitation,
-    send: handleInvitationSelect,
-    createInvitationUrl: handleCreateInvitationUrl
-  }))), /* @__PURE__ */ React11.createElement(ButtonGroup, {
-    classNames: "col-start-2 col-end-4 grid grid-cols-[1fr_var(--rail-action)] place-self-grow gap-px"
-  }, /* @__PURE__ */ React11.createElement(Button5, {
-    classNames: "gap-2",
-    onClick: activeAction.onClick
-  }, /* @__PURE__ */ React11.createElement(activeAction.icon, {
-    className: getSize3(5)
-  }), /* @__PURE__ */ React11.createElement("span", null, t(activeAction.label, {
-    ns: "os"
-  }))), /* @__PURE__ */ React11.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React11.createElement(Button5, {
-    classNames: "pli-0"
-  }, /* @__PURE__ */ React11.createElement(CaretDown, {
-    className: getSize3(4)
-  }))), /* @__PURE__ */ React11.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu2.Viewport, null, Object.entries(inviteActions).map(([id, action]) => {
-    return /* @__PURE__ */ React11.createElement(DropdownMenu2.CheckboxItem, {
-      key: id,
-      "aria-labelledby": `${id}__label`,
-      "aria-describedby": `${id}__description`,
-      checked: activeActionKey === id,
-      onCheckedChange: (checked) => checked && setActiveActionKey(id),
-      classNames: "gap-2"
-    }, action.icon && /* @__PURE__ */ React11.createElement(action.icon, {
-      className: getSize3(5)
-    }), /* @__PURE__ */ React11.createElement("div", {
-      role: "none",
-      className: "flex-1 min-is-0 space-b-1"
-    }, /* @__PURE__ */ React11.createElement("p", {
-      id: `${id}__label`
-    }, t(action.label, {
-      ns: "os"
-    })), action.description && /* @__PURE__ */ React11.createElement("p", {
-      id: `${id}__description`,
-      className: descriptionText3
-    }, t(action.description, {
-      ns: "os"
-    }))), /* @__PURE__ */ React11.createElement(DropdownMenu2.ItemIndicator, {
-      asChild: true
-    }, /* @__PURE__ */ React11.createElement(Check, {
-      className: getSize3(4)
-    })));
-  })), /* @__PURE__ */ React11.createElement(DropdownMenu2.Arrow, null)))), members[Presence.ONLINE].length + members[Presence.OFFLINE].length < 1 ? /* @__PURE__ */ React11.createElement("p", {
-    className: mx5(descriptionText3, "text-center is-full mlb-2")
-  }, t("empty space members message", {
-    ns: "os"
-  })) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("h3", {
-    className: "col-start-2 col-end-5 text-sm italic text-description"
-  }, t("active space members heading", {
-    count: members[Presence.ONLINE].length
-  })), /* @__PURE__ */ React11.createElement(SpaceMemberList, {
-    members: members[Presence.ONLINE]
-  }), /* @__PURE__ */ React11.createElement("h3", {
-    className: "col-start-2 col-end-5 text-sm italic text-description"
-  }, t("inactive space members heading", {
-    count: members[Presence.OFFLINE].length
-  })), /* @__PURE__ */ React11.createElement(SpaceMemberList, {
-    members: members[Presence.OFFLINE]
-  })));
-};
-
-// packages/plugins/plugin-space/src/components/SpaceMain/SpaceMain.tsx
-var KeyShortcuts = () => {
-  const { t } = useTranslation12(SPACE_PLUGIN);
-  return /* @__PURE__ */ React12.createElement("section", {
-    className: "mbe-4 col-span-4 md:col-start-5 md:col-end-7 grid grid-cols-subgrid gap-y-2 auto-rows-min"
-  }, /* @__PURE__ */ React12.createElement("h2", {
-    className: "contents"
-  }, /* @__PURE__ */ React12.createElement(Command, {
-    weight: "duotone",
-    className: mx6(getSize4(5), "place-self-center")
-  }), /* @__PURE__ */ React12.createElement("span", {
-    className: "text-lg col-span-2 md:col-span-1"
-  }, t("keyshortcuts label"))), /* @__PURE__ */ React12.createElement("div", {
-    role: "none",
-    className: "col-start-2 col-end-4 md:col-end-5 pie-2"
-  }, /* @__PURE__ */ React12.createElement(Surface, {
-    role: "keyshortcuts"
-  })));
-};
-var spaceMainLayout = "grid gap-y-2 auto-rows-min before:bs-2 before:col-span-5 grid-cols-[var(--rail-size)_var(--rail-size)_1fr_var(--rail-size)] md:grid-cols-[var(--rail-size)_var(--rail-size)_minmax(max-content,1fr)_var(--rail-size)_var(--rail-size)_minmax(max-content,2fr)_var(--rail-size)]";
-var SpaceMain = ({ space, role }) => {
-  const state = space.state.get();
-  const ready = state === SpaceState2.SPACE_READY;
-  const Root = role === "main" ? Main.Content : "div";
-  return /* @__PURE__ */ React12.createElement(ClipboardProvider, null, /* @__PURE__ */ React12.createElement(Root, {
-    ...role === "main" ? {
-      classNames: [
-        topbarBlockPaddingStart,
-        "min-bs-dvh",
-        spaceMainLayout
-      ]
-    } : {
-      role: "none",
-      className: mx6(topbarBlockPaddingStart, "row-span-2", spaceMainLayout)
-    },
-    "data-testid": `spacePlugin.${role}`,
-    "data-isready": ready ? "true" : "false"
-  }, ready && /* @__PURE__ */ React12.createElement(SpaceMembersSection, {
-    space
-  }), /* @__PURE__ */ React12.createElement(KeyShortcuts, null)));
 };
 
 // packages/plugins/plugin-space/src/components/SpacePresence.tsx
-import React13, { useCallback as useCallback4, useEffect as useEffect4, useState as useState7 } from "react";
+import React11, { useCallback as useCallback4, useEffect as useEffect3, useState as useState5 } from "react";
 import { usePlugin } from "@dxos/app-framework";
 import { generateName } from "@dxos/display-name";
 import { PublicKey, useClient as useClient3 } from "@dxos/react-client";
-import { getSpace as getSpace3, useMembers as useMembers2, fullyQualifiedId as fullyQualifiedId3 } from "@dxos/react-client/echo";
+import { getSpace as getSpace3, useMembers, fullyQualifiedId as fullyQualifiedId3 } from "@dxos/react-client/echo";
 import { useIdentity } from "@dxos/react-client/halo";
-import { Avatar, AvatarGroup, AvatarGroupItem, Tooltip as Tooltip2, useTranslation as useTranslation13, List as List2, ListItem, useDefaultValue } from "@dxos/react-ui";
+import { Avatar, AvatarGroup, AvatarGroupItem, Tooltip as Tooltip2, useTranslation as useTranslation11, List, ListItem, useDefaultValue } from "@dxos/react-ui";
 import { AttentionGlyph, useAttention } from "@dxos/react-ui-attention";
 import { ComplexMap, keyToFallback } from "@dxos/util";
 var REFRESH_INTERVAL = 5e3;
@@ -1233,9 +1070,9 @@ var SpacePresence = ({ object, spaceKey }) => {
   const client = useClient3();
   const identity = useIdentity();
   const space = spaceKey ? client.spaces.get(spaceKey) : getSpace3(object);
-  const spaceMembers = useMembers2(space?.key);
-  const [_moment, setMoment] = useState7(Date.now());
-  useEffect4(() => {
+  const spaceMembers = useMembers(space?.key);
+  const [_moment, setMoment] = useState5(Date.now());
+  useEffect3(() => {
     const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
     return () => clearInterval(interval);
   }, []);
@@ -1258,7 +1095,7 @@ var SpacePresence = ({ object, spaceKey }) => {
       lastSeen
     };
   }).toSorted((a, b) => a.lastSeen - b.lastSeen);
-  return /* @__PURE__ */ React13.createElement(FullPresence, {
+  return /* @__PURE__ */ React11.createElement(FullPresence, {
     members: membersForObject
   });
 };
@@ -1268,38 +1105,38 @@ var FullPresence = (props) => {
   if (members.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React13.createElement(AvatarGroup.Root, {
+  return /* @__PURE__ */ React11.createElement(AvatarGroup.Root, {
     size,
     classNames: "mbs-2 mie-4",
     "data-testid": "spacePlugin.presence"
-  }, members.slice(0, 3).map((member, i) => /* @__PURE__ */ React13.createElement(Tooltip2.Root, {
+  }, members.slice(0, 3).map((member, i) => /* @__PURE__ */ React11.createElement(Tooltip2.Root, {
     key: member.identity.identityKey.toHex()
-  }, /* @__PURE__ */ React13.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React13.createElement(PrensenceAvatar, {
+  }, /* @__PURE__ */ React11.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React11.createElement(PrensenceAvatar, {
     identity: member.identity,
     group: true,
     match: member.currentlyAttended,
     index: members.length - i,
     onClick: () => onMemberClick?.(member)
-  })), /* @__PURE__ */ React13.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React13.createElement(Tooltip2.Content, {
+  })), /* @__PURE__ */ React11.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React11.createElement(Tooltip2.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ React13.createElement("span", null, getName(member.identity)), /* @__PURE__ */ React13.createElement(Tooltip2.Arrow, null))))), members.length > 3 && /* @__PURE__ */ React13.createElement(Tooltip2.Root, null, /* @__PURE__ */ React13.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React13.createElement(AvatarGroupItem.Root, {
+  }, /* @__PURE__ */ React11.createElement("span", null, getName(member.identity)), /* @__PURE__ */ React11.createElement(Tooltip2.Arrow, null))))), members.length > 3 && /* @__PURE__ */ React11.createElement(Tooltip2.Root, null, /* @__PURE__ */ React11.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React11.createElement(AvatarGroupItem.Root, {
     status: "inactive"
-  }, /* @__PURE__ */ React13.createElement(Avatar.Frame, {
+  }, /* @__PURE__ */ React11.createElement(Avatar.Frame, {
     style: {
       zIndex: members.length - 4
     }
-  }, /* @__PURE__ */ React13.createElement(Avatar.Fallback, {
+  }, /* @__PURE__ */ React11.createElement(Avatar.Fallback, {
     text: `+${members.length - 3}`
-  })))), /* @__PURE__ */ React13.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React13.createElement(Tooltip2.Content, {
+  })))), /* @__PURE__ */ React11.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React11.createElement(Tooltip2.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ React13.createElement(Tooltip2.Arrow, null), /* @__PURE__ */ React13.createElement(List2, {
+  }, /* @__PURE__ */ React11.createElement(Tooltip2.Arrow, null), /* @__PURE__ */ React11.createElement(List, {
     classNames: "max-h-56 overflow-y-auto"
-  }, members.map((member) => /* @__PURE__ */ React13.createElement(ListItem.Root, {
+  }, members.map((member) => /* @__PURE__ */ React11.createElement(ListItem.Root, {
     key: member.identity.identityKey.toHex(),
     classNames: "flex gap-2 items-center cursor-pointer mbe-2",
     onClick: () => onMemberClick?.(member),
     "data-testid": "identity-list-item"
-  }, /* @__PURE__ */ React13.createElement(PrensenceAvatar, {
+  }, /* @__PURE__ */ React11.createElement(PrensenceAvatar, {
     identity: member.identity,
     showName: true,
     match: member.currentlyAttended
@@ -1309,10 +1146,10 @@ var PrensenceAvatar = ({ identity, showName, match, group, index, onClick }) =>
   const Root = group ? AvatarGroupItem.Root : Avatar.Root;
   const status = match ? "current" : "active";
   const fallbackValue = keyToFallback(identity.identityKey);
-  return /* @__PURE__ */ React13.createElement(Root, {
+  return /* @__PURE__ */ React11.createElement(Root, {
     status,
     hue: identity.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React13.createElement(Avatar.Frame, {
+  }, /* @__PURE__ */ React11.createElement(Avatar.Frame, {
     "data-testid": "spacePlugin.presence.member",
     "data-status": status,
     ...index ? {
@@ -1321,9 +1158,9 @@ var PrensenceAvatar = ({ identity, showName, match, group, index, onClick }) =>
       }
     } : {},
     onClick: () => onClick?.()
-  }, /* @__PURE__ */ React13.createElement(Avatar.Fallback, {
+  }, /* @__PURE__ */ React11.createElement(Avatar.Fallback, {
     text: identity.profile?.data?.emoji || fallbackValue.emoji
-  })), showName && /* @__PURE__ */ React13.createElement(Avatar.Label, {
+  })), showName && /* @__PURE__ */ React11.createElement(Avatar.Label, {
     classNames: "text-sm truncate pli-2"
   }, getName(identity)));
 };
@@ -1332,8 +1169,8 @@ var SmallPresenceLive = ({ id, viewers }) => {
     const moment = Date.now();
     return Array.from(viewers2.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION);
   };
-  const [activeViewers, setActiveViewers] = useState7(viewers ? getActiveViewers(viewers) : []);
-  useEffect4(() => {
+  const [activeViewers, setActiveViewers] = useState5(viewers ? getActiveViewers(viewers) : []);
+  useEffect3(() => {
     if (viewers) {
       setActiveViewers(getActiveViewers(viewers));
       const interval = setInterval(() => {
@@ -1344,44 +1181,44 @@ var SmallPresenceLive = ({ id, viewers }) => {
   }, [
     viewers
   ]);
-  return /* @__PURE__ */ React13.createElement(SmallPresence, {
+  return /* @__PURE__ */ React11.createElement(SmallPresence, {
     id,
     count: activeViewers.length
   });
 };
 var SmallPresence = ({ id, count }) => {
-  const { t } = useTranslation13(SPACE_PLUGIN);
+  const { t } = useTranslation11(SPACE_PLUGIN);
   const { hasAttention, isAncestor, isRelated } = useAttention(id);
   const attention = hasAttention || isAncestor || isRelated;
-  return /* @__PURE__ */ React13.createElement(Tooltip2.Root, null, /* @__PURE__ */ React13.createElement(Tooltip2.Trigger, {
+  return /* @__PURE__ */ React11.createElement(Tooltip2.Root, null, /* @__PURE__ */ React11.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React13.createElement("div", {
+  }, /* @__PURE__ */ React11.createElement("div", {
     role: "none",
     className: "flex",
     "data-attention": attention
-  }, /* @__PURE__ */ React13.createElement(AttentionGlyph, {
+  }, /* @__PURE__ */ React11.createElement(AttentionGlyph, {
     presence: count > 1 ? "many" : count === 1 ? "one" : "none",
     classNames: "self-center mie-1"
-  }))), /* @__PURE__ */ React13.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React13.createElement(Tooltip2.Content, {
+  }))), /* @__PURE__ */ React11.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React11.createElement(Tooltip2.Content, {
     side: "bottom",
     classNames: "z-[70]"
-  }, /* @__PURE__ */ React13.createElement("span", null, t("presence label", {
+  }, /* @__PURE__ */ React11.createElement("span", null, t("presence label", {
     count
-  })), /* @__PURE__ */ React13.createElement(Tooltip2.Arrow, null))));
+  })), /* @__PURE__ */ React11.createElement(Tooltip2.Arrow, null))));
 };
 
-// packages/plugins/plugin-space/src/components/SpaceSettings.tsx
-import React14 from "react";
-import { useIntentDispatcher as useIntentDispatcher2, useResolvePlugins } from "@dxos/app-framework";
-import { Input as Input4, Select, toLocalizedString as toLocalizedString2, useTranslation as useTranslation14 } from "@dxos/react-ui";
-import { FormInput } from "@dxos/react-ui-data";
-var SpaceSettings = ({ settings }) => {
-  const { t } = useTranslation14(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher2();
+// packages/plugins/plugin-space/src/components/SpacePluginSettings.tsx
+import React12 from "react";
+import { useIntentDispatcher as useIntentDispatcher3, useResolvePlugins } from "@dxos/app-framework";
+import { Input as Input4, Select, toLocalizedString as toLocalizedString2, useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { DeprecatedFormInput } from "@dxos/react-ui-data";
+var SpacePluginSettings = ({ settings }) => {
+  const { t } = useTranslation12(SPACE_PLUGIN);
+  const dispatch = useIntentDispatcher3();
   const plugins = useResolvePlugins(parseSpaceInitPlugin);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(FormInput, {
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DeprecatedFormInput, {
     label: t("show hidden spaces label")
-  }, /* @__PURE__ */ React14.createElement(Input4.Switch, {
+  }, /* @__PURE__ */ React12.createElement(Input4.Switch, {
     checked: settings.showHidden,
     onCheckedChange: (checked) => dispatch({
       plugin: SPACE_PLUGIN,
@@ -1390,34 +1227,49 @@ var SpaceSettings = ({ settings }) => {
         state: !!checked
       }
     })
-  })), /* @__PURE__ */ React14.createElement(FormInput, {
+  })), /* @__PURE__ */ React12.createElement(DeprecatedFormInput, {
     label: t("default on space create label")
-  }, /* @__PURE__ */ React14.createElement(Select.Root, {
+  }, /* @__PURE__ */ React12.createElement(Select.Root, {
     value: settings.onSpaceCreate,
     onValueChange: (value) => {
       settings.onSpaceCreate = value;
     }
-  }, /* @__PURE__ */ React14.createElement(Select.TriggerButton, null), /* @__PURE__ */ React14.createElement(Select.Portal, null, /* @__PURE__ */ React14.createElement(Select.Content, null, /* @__PURE__ */ React14.createElement(Select.Viewport, null, plugins.map(({ provides: { space: { onSpaceCreate } } }) => /* @__PURE__ */ React14.createElement(Select.Option, {
+  }, /* @__PURE__ */ React12.createElement(Select.TriggerButton, null), /* @__PURE__ */ React12.createElement(Select.Portal, null, /* @__PURE__ */ React12.createElement(Select.Content, null, /* @__PURE__ */ React12.createElement(Select.Viewport, null, plugins.map(({ provides: { space: { onSpaceCreate } } }) => /* @__PURE__ */ React12.createElement(Select.Option, {
     key: onSpaceCreate.action,
     value: onSpaceCreate.action
   }, toLocalizedString2(onSpaceCreate.label, t)))))))));
 };
 
-// packages/plugins/plugin-space/src/components/SpaceSettingsPanel.tsx
-import React15, { useCallback as useCallback5, useState as useState8 } from "react";
+// packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsDialog.tsx
+import React14, { useState as useState7 } from "react";
+import { useClient as useClient5 } from "@dxos/react-client";
+import { Button as Button4, Dialog as Dialog2, Icon, toLocalizedString as toLocalizedString3, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import { Tabs } from "@dxos/react-ui-tabs";
+import { ClipboardProvider, SpacePanel } from "@dxos/shell/react";
+
+// packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsPanel.tsx
+import React13, { useCallback as useCallback5, useState as useState6 } from "react";
 import { log as log2 } from "@dxos/log";
 import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
-import { Input as Input5, useTranslation as useTranslation15 } from "@dxos/react-ui";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettingsPanel.tsx";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { DeviceType, useDevices } from "@dxos/react-client/halo";
+import { Input as Input5, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { DeprecatedFormInput as DeprecatedFormInput2 } from "@dxos/react-ui-data";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsPanel.tsx";
 var SpaceSettingsPanel = ({ space }) => {
-  const { t } = useTranslation15(SPACE_PLUGIN);
-  const [edgeReplication, setEdgeReplication] = useState8(space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED);
+  const { t } = useTranslation13(SPACE_PLUGIN);
+  const client = useClient4();
+  const devices = useDevices();
+  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
+  const edgeAgents = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
+  const edgeReplicationAvailable = edgeAgents && managedDeviceAvailable;
+  const [edgeReplication, setEdgeReplication] = useState6(space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED);
   const toggleEdgeReplication = useCallback5(async (next) => {
     setEdgeReplication(next);
     await space?.internal.setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED).catch((err) => {
       log2.catch(err, void 0, {
         F: __dxlog_file3,
-        L: 30,
+        L: 39,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1426,50 +1278,207 @@ var SpaceSettingsPanel = ({ space }) => {
   }, [
     space
   ]);
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React13.createElement("div", {
     role: "form",
-    className: "flex flex-col w-full p-2 gap-4"
-  }, /* @__PURE__ */ React15.createElement(Input5.Root, null, /* @__PURE__ */ React15.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-1"
-  }, /* @__PURE__ */ React15.createElement(Input5.Label, null, t("name label")), /* @__PURE__ */ React15.createElement(Input5.TextInput, {
-    placeholder: t("name placeholder"),
-    value: space.properties.name,
+    className: "flex flex-col"
+  }, /* @__PURE__ */ React13.createElement(DeprecatedFormInput2, {
+    label: t("name label")
+  }, /* @__PURE__ */ React13.createElement(Input5.TextInput, {
+    placeholder: t("unnamed space label"),
+    value: space.properties.name ?? "",
     onChange: (event) => {
       space.properties.name = event.target.value;
     }
-  }))), /* @__PURE__ */ React15.createElement(Input5.Root, null, /* @__PURE__ */ React15.createElement("div", {
-    role: "none",
-    className: "flex justify-between"
-  }, /* @__PURE__ */ React15.createElement(Input5.Label, null, t("edge replication label")), /* @__PURE__ */ React15.createElement(Input5.Switch, {
+  })), edgeReplicationAvailable && /* @__PURE__ */ React13.createElement(DeprecatedFormInput2, {
+    label: t("edge replication label")
+  }, /* @__PURE__ */ React13.createElement(Input5.Switch, {
     checked: edgeReplication,
     onCheckedChange: toggleEdgeReplication
-  }))));
+  })));
 };
 
-// packages/plugins/plugin-space/src/components/SaveStatus.tsx
-import React16, { useEffect as useEffect5, useState as useState9 } from "react";
-import { Context } from "@dxos/context";
+// packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsDialog.tsx
+var SpaceSettingsDialog = ({ space, target, createInvitationUrl, initialTab = "members", namesCache }) => {
+  const { t } = useTranslation14(SPACE_PLUGIN);
+  const client = useClient5();
+  const [tabsActivePart, setTabsActivePart] = useState7("list");
+  const [selected, setSelected] = useState7(initialTab);
+  const locked = space.properties[COMPOSER_SPACE_LOCK];
+  const name = getSpaceDisplayName(space, {
+    personal: client.spaces.default === space,
+    namesCache
+  });
+  return (
+    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
+    //  Consider factoring it out to the tabs package.
+    /* @__PURE__ */ React14.createElement(Dialog2.Content, {
+      classNames: "p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
+    }, /* @__PURE__ */ React14.createElement("div", {
+      role: "none",
+      className: "flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5"
+    }, /* @__PURE__ */ React14.createElement(Dialog2.Title, {
+      onClick: () => setTabsActivePart("list"),
+      "aria-description": t("click to return to tablist description"),
+      classNames: "flex cursor-pointer items-center group/title"
+    }, /* @__PURE__ */ React14.createElement(Icon, {
+      icon: "ph--caret-left--regular",
+      size: 4,
+      classNames: [
+        "@md:hidden",
+        tabsActivePart === "list" && "invisible"
+      ]
+    }), /* @__PURE__ */ React14.createElement("span", {
+      className: tabsActivePart !== "list" ? "group-hover/title:underline @md:group-hover/title:no-underline underline-offset-4 decoration-1" : ""
+    }, toLocalizedString3(name, t))), /* @__PURE__ */ React14.createElement(Dialog2.Close, {
+      asChild: true
+    }, /* @__PURE__ */ React14.createElement(Button4, {
+      density: "fine",
+      variant: "ghost",
+      autoFocus: true
+    }, /* @__PURE__ */ React14.createElement(Icon, {
+      icon: "ph--x--regular",
+      size: 3
+    })))), /* @__PURE__ */ React14.createElement(Tabs.Root, {
+      orientation: "vertical",
+      value: selected,
+      onValueChange: setSelected,
+      activePart: tabsActivePart,
+      onActivePartChange: setTabsActivePart,
+      classNames: "flex flex-col flex-1 mbs-2"
+    }, /* @__PURE__ */ React14.createElement(Tabs.Viewport, {
+      classNames: "flex-1 min-bs-0"
+    }, /* @__PURE__ */ React14.createElement("div", {
+      role: "none",
+      className: "overflow-y-auto pli-3 @md:pis-2 @md:pie-0 mbe-4 border-r border-separator"
+    }, /* @__PURE__ */ React14.createElement(Tabs.Tablist, {
+      classNames: "flex flex-col max-bs-none min-is-[200px] gap-4 overflow-y-auto"
+    }, /* @__PURE__ */ React14.createElement("div", {
+      role: "none",
+      className: "flex flex-col ml-1"
+    }, /* @__PURE__ */ React14.createElement(Tabs.Tab, {
+      value: "settings"
+    }, t("settings tab label")), /* @__PURE__ */ React14.createElement(Tabs.Tab, {
+      value: "members",
+      disabled: locked
+    }, t("members tab label"))))), /* @__PURE__ */ React14.createElement(Tabs.Tabpanel, {
+      value: "settings",
+      classNames: "pli-3 @md:pli-5 max-bs-dvh overflow-y-auto"
+    }, /* @__PURE__ */ React14.createElement(SpaceSettingsPanel, {
+      space
+    })), /* @__PURE__ */ React14.createElement(Tabs.Tabpanel, {
+      value: "members",
+      classNames: "pli-3 @md:pli-5 max-bs-dvh overflow-y-auto"
+    }, /* @__PURE__ */ React14.createElement(ClipboardProvider, null, /* @__PURE__ */ React14.createElement(SpacePanel, {
+      space,
+      hideHeading: true,
+      target,
+      createInvitationUrl
+    }))))))
+  );
+};
+
+// packages/plugins/plugin-space/src/components/SyncStatus/SyncStatus.tsx
+import React16, { useEffect as useEffect6, useState as useState10 } from "react";
 import { StatusBar } from "@dxos/plugin-status-bar";
-import { useClient as useClient4 } from "@dxos/react-client";
-import { Icon, useTranslation as useTranslation16 } from "@dxos/react-ui";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SaveStatus.tsx";
-var SaveStatus = () => {
-  const { t } = useTranslation16(SPACE_PLUGIN);
-  const client = useClient4();
-  const [state, setState] = useState9("saved");
-  useEffect5(() => {
-    return createClientSaveTracker(client, (state2) => {
-      setState(state2);
-    });
-  }, []);
-  return /* @__PURE__ */ React16.createElement(StatusBar.Item, {
-    title: state === "saving" ? t("saving label") : t("saved label")
-  }, /* @__PURE__ */ React16.createElement(Icon, {
-    icon: state === "saving" ? "ph--arrows-clockwise--regular" : "ph--check-circle--regular",
-    size: 4
+import { useClient as useClient7 } from "@dxos/react-client";
+import { Icon as Icon3, Popover as Popover3, useTranslation as useTranslation15 } from "@dxos/react-ui";
+import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { mx as mx5 } from "@dxos/react-ui-theme";
+
+// packages/plugins/plugin-space/src/components/SyncStatus/Space.tsx
+import React15, { useEffect as useEffect4, useState as useState8 } from "react";
+import { Icon as Icon2 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/react-ui-theme";
+var SYNC_STALLED_TIMEOUT = 5e3;
+var styles = {
+  barBg: "bg-neutral-50 dark:bg-green-900 text-black",
+  barFg: "bg-neutral-100 bg-green-500",
+  barHover: "dark:hover:bg-green-500"
+};
+var useActive = (count) => {
+  const [current, setCurrent] = useState8(count);
+  const [active, setActive] = useState8(false);
+  useEffect4(() => {
+    let t;
+    if (count !== current) {
+      setActive(true);
+      setCurrent(count);
+      t && clearTimeout(t);
+      t = setTimeout(() => {
+        setActive(false);
+      }, SYNC_STALLED_TIMEOUT);
+    }
+    return () => {
+      setActive(false);
+      clearTimeout(t);
+    };
+  }, [
+    count,
+    current
+  ]);
+  return active;
+};
+var SpaceRow = ({ spaceId, state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote } }) => {
+  const downActive = useActive(localDocumentCount);
+  const upActive = useActive(remoteDocumentCount);
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: mx4("flex items-center mx-[2px] gap-[2px] cursor-pointer", styles.barHover),
+    title: spaceId,
+    onClick: () => {
+      void navigator.clipboard.writeText(spaceId);
+    }
+  }, /* @__PURE__ */ React15.createElement(Icon2, {
+    icon: "ph--arrow-fat-line-left--regular",
+    size: 3,
+    classNames: mx4(downActive && "animate-[pulse_1s_infinite]")
+  }), /* @__PURE__ */ React15.createElement(Candle, {
+    up: {
+      count: remoteDocumentCount,
+      total: remoteDocumentCount + missingOnRemote
+    },
+    down: {
+      count: localDocumentCount,
+      total: localDocumentCount + missingOnLocal
+    },
+    title: spaceId
+  }), /* @__PURE__ */ React15.createElement(Icon2, {
+    icon: "ph--arrow-fat-line-right--regular",
+    size: 3,
+    classNames: mx4(upActive && "animate-[pulse_1s_step-start_infinite]")
   }));
 };
+var Candle = ({ classNames, up, down }) => {
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: mx4("grid grid-cols-[1fr_2rem_1fr] w-full h-3", classNames)
+  }, /* @__PURE__ */ React15.createElement(Bar, {
+    classNames: "justify-end",
+    ...up
+  }), /* @__PURE__ */ React15.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ React15.createElement("div", {
+    className: mx4("absolute inset-0 flex items-center justify-center text-xs", styles.barBg)
+  }, up.total)), /* @__PURE__ */ React15.createElement(Bar, down));
+};
+var Bar = ({ classNames, count, total }) => {
+  let p = count / total * 100;
+  if (count < total) {
+    p = Math.min(p, 95);
+  }
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: mx4("relative flex w-full", styles.barBg, classNames)
+  }, /* @__PURE__ */ React15.createElement("div", {
+    className: mx4("shrink-0", styles.barFg),
+    style: {
+      width: `${p}%`
+    }
+  }), count !== total && /* @__PURE__ */ React15.createElement("div", {
+    className: "absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs"
+  }, count));
+};
+
+// packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts
+import { Context } from "@dxos/context";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts";
 var createClientSaveTracker = (client, cb) => {
   const unsubscribeCallbacks = {};
   const state = {};
@@ -1498,7 +1507,7 @@ var createClientSaveTracker = (client, cb) => {
 var createSpaceSaveTracker = (space, cb) => {
   const ctx = new Context(void 0, {
     F: __dxlog_file4,
-    L: 64
+    L: 40
   });
   void space.waitUntilReady().then(() => {
     if (ctx.disposed) {
@@ -1529,19 +1538,41 @@ var createSpaceSaveTracker = (space, cb) => {
   };
 };
 
-// packages/plugins/plugin-space/src/components/SyncStatus/SyncStatus.tsx
-import React17, { useEffect as useEffect7, useState as useState11 } from "react";
-import { StatusBar as StatusBar2 } from "@dxos/plugin-status-bar";
-import { Icon as Icon2, Popover as Popover3, useTranslation as useTranslation17 } from "@dxos/react-ui";
-import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
-import { mx as mx7 } from "@dxos/react-ui-theme";
+// packages/plugins/plugin-space/src/components/SyncStatus/status.ts
+var getStatus = ({ offline, saved, needsToUpload, needsToDownload }) => {
+  if (!saved) {
+    return "saving locally";
+  } else if (!offline && needsToDownload) {
+    return "downloading";
+  } else if (!offline && needsToUpload) {
+    return "uploading";
+  } else if (offline && !needsToUpload && !needsToDownload) {
+    return "offline persisted";
+  } else {
+    return "remote synced";
+  }
+};
+var getIcon = (status) => {
+  switch (status) {
+    case "saving locally":
+      return "ph--download--regular";
+    case "downloading":
+      return "ph--cloud-arrow-down--regular";
+    case "uploading":
+      return "ph--cloud-arrow-up--regular";
+    case "offline persisted":
+      return "ph--check-circle--regular";
+    case "remote synced":
+      return "ph--cloud-check--regular";
+  }
+};
 
-// packages/plugins/plugin-space/src/components/SyncStatus/types.ts
-import { useEffect as useEffect6, useState as useState10 } from "react";
+// packages/plugins/plugin-space/src/components/SyncStatus/sync-state.ts
+import { useEffect as useEffect5, useState as useState9 } from "react";
 import { Context as Context2 } from "@dxos/context";
 import { EdgeService } from "@dxos/protocols";
-import { useClient as useClient5 } from "@dxos/react-client";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/types.ts";
+import { useClient as useClient6 } from "@dxos/react-client";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/sync-state.ts";
 var createEmptyEdgeSyncState = () => ({
   missingOnLocal: 0,
   missingOnRemote: 0,
@@ -1561,9 +1592,9 @@ var getSyncSummary = (syncMap) => {
 };
 var isEdgePeerId = (peerId, spaceId) => peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
 var useSyncState = () => {
-  const client = useClient5();
-  const [spaceState, setSpaceState] = useState10({});
-  useEffect6(() => {
+  const client = useClient6();
+  const [spaceState, setSpaceState] = useState9({});
+  useEffect5(() => {
     const ctx = new Context2(void 0, {
       F: __dxlog_file5,
       L: 48
@@ -1598,146 +1629,86 @@ var useSyncState = () => {
 };
 
 // packages/plugins/plugin-space/src/components/SyncStatus/SyncStatus.tsx
-var SYNC_STALLED_TIMEOUT = 5e3;
-var styles = {
-  barBg: "bg-neutral-50 dark:bg-green-900 text-black",
-  barFg: "bg-neutral-100 bg-green-500",
-  barHover: "dark:hover:bg-green-500"
-};
 var SyncStatus = () => {
+  const client = useClient7();
   const state = useSyncState();
-  return /* @__PURE__ */ React17.createElement(SyncStatusIndicator, {
-    state
+  const [saved, setSaved] = useState10(true);
+  useEffect6(() => {
+    return createClientSaveTracker(client, (state2) => {
+      setSaved(state2 === "saved");
+    });
+  }, []);
+  return /* @__PURE__ */ React16.createElement(SyncStatusIndicator, {
+    state,
+    saved
   });
 };
-var SyncStatusIndicator = ({ state }) => {
+var SyncStatusIndicator = ({ state, saved }) => {
+  const { t } = useTranslation15(SPACE_PLUGIN);
   const summary = getSyncSummary(state);
-  const offline = false;
+  const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
   const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
-  const [classNames, setClassNames] = useState11();
-  useEffect7(() => {
+  const status = getStatus({
+    offline,
+    saved,
+    needsToUpload,
+    needsToDownload
+  });
+  const [classNames, setClassNames] = useState10();
+  useEffect6(() => {
     setClassNames(void 0);
-    if (!needsToUpload && !needsToDownload) {
+    if (offline || !needsToUpload && !needsToDownload) {
       return;
     }
-    const t = setTimeout(() => {
+    const t2 = setTimeout(() => {
       setClassNames("text-orange-500");
     }, SYNC_STALLED_TIMEOUT);
-    return () => clearTimeout(t);
+    return () => clearTimeout(t2);
   }, [
+    offline,
     needsToUpload,
     needsToDownload
   ]);
-  return /* @__PURE__ */ React17.createElement(StatusBar2.Item, null, /* @__PURE__ */ React17.createElement(Popover3.Root, null, /* @__PURE__ */ React17.createElement(Popover3.Trigger, null, /* @__PURE__ */ React17.createElement(Icon2, {
-    icon: offline ? "ph--cloud-x--regular" : needsToUpload ? "ph--cloud-arrow-up--regular" : needsToDownload ? "ph--cloud-arrow-down--regular" : "ph--cloud-check--regular",
+  const title = t(`${status} label`);
+  const icon = /* @__PURE__ */ React16.createElement(Icon3, {
+    icon: getIcon(status),
     size: 4,
     classNames
-  })), /* @__PURE__ */ React17.createElement(Popover3.Content, {
-    sideOffset: 16
-  }, /* @__PURE__ */ React17.createElement(SyncStatusDetail, {
-    state,
-    summary,
-    debug: false
-  }))));
+  });
+  if (offline) {
+    return /* @__PURE__ */ React16.createElement(StatusBar.Item, {
+      title
+    }, icon);
+  } else {
+    return /* @__PURE__ */ React16.createElement(Popover3.Root, null, /* @__PURE__ */ React16.createElement(Popover3.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React16.createElement(StatusBar.Button, {
+      title
+    }, icon)), /* @__PURE__ */ React16.createElement(Popover3.Portal, null, /* @__PURE__ */ React16.createElement(Popover3.Content, {
+      sideOffset: 16
+    }, /* @__PURE__ */ React16.createElement(SyncStatusDetail, {
+      state,
+      summary,
+      debug: false
+    }))));
+  }
 };
 var SyncStatusDetail = ({ classNames, state, summary, debug }) => {
-  const { t } = useTranslation17(SPACE_PLUGIN);
+  const { t } = useTranslation15(SPACE_PLUGIN);
   const entries = Object.entries(state).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0);
-  return /* @__PURE__ */ React17.createElement("div", {
-    className: mx7("flex flex-col text-xs min-w-[16rem]", classNames)
-  }, /* @__PURE__ */ React17.createElement("h1", {
-    className: "p-2"
-  }, t("sync status title")), /* @__PURE__ */ React17.createElement("div", {
-    className: "flex flex-col gap-[2px] my-[2px]"
-  }, entries.map(([spaceId, state2]) => /* @__PURE__ */ React17.createElement(SpaceRow, {
+  return /* @__PURE__ */ React16.createElement("div", {
+    className: mx5("flex flex-col gap-3 p-2 text-xs min-w-[16rem]", classNames)
+  }, /* @__PURE__ */ React16.createElement("h1", null, t("sync status title")), /* @__PURE__ */ React16.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, entries.map(([spaceId, state2]) => /* @__PURE__ */ React16.createElement(SpaceRow, {
     key: spaceId,
     spaceId,
     state: state2
-  }))), debug && /* @__PURE__ */ React17.createElement(SyntaxHighlighter, {
+  }))), debug && /* @__PURE__ */ React16.createElement(SyntaxHighlighter, {
     language: "json"
   }, JSON.stringify(summary, null, 2)));
 };
-var useActive = (count) => {
-  const [current, setCurrent] = useState11(count);
-  const [active, setActive] = useState11(false);
-  useEffect7(() => {
-    let t;
-    if (count !== current) {
-      setActive(true);
-      setCurrent(count);
-      t && clearTimeout(t);
-      t = setTimeout(() => {
-        setActive(false);
-      }, SYNC_STALLED_TIMEOUT);
-    }
-    return () => {
-      setActive(false);
-      clearTimeout(t);
-    };
-  }, [
-    count,
-    current
-  ]);
-  return active;
-};
-var SpaceRow = ({ spaceId, state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote } }) => {
-  const downActive = useActive(localDocumentCount);
-  const upActive = useActive(remoteDocumentCount);
-  return /* @__PURE__ */ React17.createElement("div", {
-    className: mx7("flex items-center mx-[2px] gap-[2px] cursor-pointer", styles.barHover),
-    title: spaceId,
-    onClick: () => {
-      void navigator.clipboard.writeText(spaceId);
-    }
-  }, /* @__PURE__ */ React17.createElement(Icon2, {
-    icon: "ph--arrow-fat-line-left--regular",
-    size: 3,
-    classNames: mx7(downActive && "animate-[pulse_1s_infinite]")
-  }), /* @__PURE__ */ React17.createElement(Candle, {
-    up: {
-      count: remoteDocumentCount,
-      total: remoteDocumentCount + missingOnRemote
-    },
-    down: {
-      count: localDocumentCount,
-      total: localDocumentCount + missingOnLocal
-    },
-    title: spaceId
-  }), /* @__PURE__ */ React17.createElement(Icon2, {
-    icon: "ph--arrow-fat-line-right--regular",
-    size: 3,
-    classNames: mx7(upActive && "animate-[pulse_1s_step-start_infinite]")
-  }));
-};
-var Candle = ({ classNames, up, down }) => {
-  return /* @__PURE__ */ React17.createElement("div", {
-    className: mx7("grid grid-cols-[1fr_2rem_1fr] w-full h-3", classNames)
-  }, /* @__PURE__ */ React17.createElement(Bar, {
-    classNames: "justify-end",
-    ...up
-  }), /* @__PURE__ */ React17.createElement("div", {
-    className: "relative"
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: mx7("absolute inset-0 flex items-center justify-center text-xs", styles.barBg)
-  }, up.total)), /* @__PURE__ */ React17.createElement(Bar, down));
-};
-var Bar = ({ classNames, count, total }) => {
-  let p = count / total * 100;
-  if (count < total) {
-    p = Math.min(p, 95);
-  }
-  return /* @__PURE__ */ React17.createElement("div", {
-    className: mx7("relative flex w-full", styles.barBg, classNames)
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: mx7("shrink-0", styles.barFg),
-    style: {
-      width: `${p}%`
-    }
-  }), count !== total && /* @__PURE__ */ React17.createElement("div", {
-    className: "absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs"
-  }, count));
-};
 
 // packages/plugins/plugin-space/src/translations.ts
 var translations_default = [
@@ -1783,6 +1754,7 @@ var translations_default = [
         "delete object label": "Delete item",
         "collection deleted label": "Collection deleted",
         "object deleted label": "Item deleted",
+        "objects deleted label": "Items deleted",
         "go to object label": "Open item",
         "found object label": "Ready.",
         "found object description": "The requested object is now available.",
@@ -1826,7 +1798,16 @@ var translations_default = [
         "name label": "Name",
         "name placeholder": "Name",
         "unnamed object settings label": "Settings",
-        "edge replication label": "Enable EDGE Replication"
+        "edge replication label": "Enable EDGE Replication",
+        "saving locally label": "Writing to disk",
+        "downloading label": "Replicating from peers",
+        "uploading label": "Replicating to peers",
+        "offline persisted label": "Saved to disk (offline)",
+        "remote synced label": "Synced with peers",
+        "open settings panel label": "Show Settings",
+        "open space settings label": "Space Settings",
+        "members tab label": "Members",
+        "settings tab label": "Settings"
       }
     }
   }
@@ -1835,11 +1816,11 @@ var translations_default = [
 // packages/plugins/plugin-space/src/SpacePlugin.tsx
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/SpacePlugin.tsx";
 var ACTIVE_NODE_BROADCAST_INTERVAL = 3e4;
-var OBJECT_ID_LENGTH = 60;
+var WAIT_FOR_OBJECT_TIMEOUT2 = 1e3;
 var SPACE_MAX_OBJECTS = 500;
 var DIRECTORY_TYPE = "text/directory";
 var parseSpacePlugin = (plugin) => Array.isArray(plugin?.provides.space?.enabled) ? plugin : void 0;
-var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
+var SpacePlugin = ({ invitationUrl = window.location.origin, invitationParam = "spaceInvitationCode", firstRun, onFirstRun } = {}) => {
   const settings = new LocalStorageStore(SPACE_PLUGIN, {
     onSpaceCreate: "dxos.org/plugin/markdown/action/create"
   });
@@ -1849,21 +1830,32 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
     viewersByObject: {},
     // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
     viewersByIdentity: new ComplexMap2(PublicKey2.hash),
-    sdkMigrationRunning: {}
+    sdkMigrationRunning: {},
+    navigableCollections: false
   });
   const subscriptions = new EventSubscriptions();
   const spaceSubscriptions = new EventSubscriptions();
   const graphSubscriptions = /* @__PURE__ */ new Map();
   let clientPlugin;
+  let graphPlugin;
   let intentPlugin;
+  let layoutPlugin;
   let navigationPlugin;
   let attentionPlugin;
+  const createSpaceInvitationUrl = (invitationCode) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(invitationParam, invitationCode);
+    return baseUrl.toString();
+  };
   const onSpaceReady = async () => {
-    if (!clientPlugin || !navigationPlugin || !attentionPlugin) {
+    if (!clientPlugin || !intentPlugin || !graphPlugin || !navigationPlugin || !layoutPlugin || !attentionPlugin) {
       return;
     }
     const client = clientPlugin.provides.client;
+    const dispatch = intentPlugin.provides.intent.dispatch;
+    const graph = graphPlugin.provides.graph;
     const location = navigationPlugin.provides.location;
+    const layout = layoutPlugin.provides.layout;
     const attention = attentionPlugin.provides.attention;
     const defaultSpace = client.spaces.default;
     if (typeof defaultSpace.properties[COMPOSER_SPACE_LOCK] !== "boolean") {
@@ -1878,11 +1870,35 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
         order: []
       }));
     }
+    subscriptions.add(scheduledEffect(() => ({
+      layoutMode: layout.layoutMode,
+      soloPart: location.active.solo?.[0]
+    }), ({ layoutMode, soloPart }) => {
+      if (layoutMode !== "solo" || !soloPart) {
+        return;
+      }
+      const node = graph.findNode(soloPart.id);
+      if (!node && soloPart.id.length === FQ_ID_LENGTH) {
+        const timeout = setTimeout(async () => {
+          const node2 = graph.findNode(soloPart.id);
+          if (!node2) {
+            await dispatch({
+              plugin: SPACE_PLUGIN,
+              action: SpaceAction.WAIT_FOR_OBJECT,
+              data: {
+                id: soloPart.id
+              }
+            });
+          }
+        }, WAIT_FOR_OBJECT_TIMEOUT2);
+        return () => clearTimeout(timeout);
+      }
+    }));
     subscriptions.add(client.spaces.subscribe(async (spaces) => {
-      if (defaultSpace.state.get() === SpaceState3.SPACE_REQUIRES_MIGRATION) {
+      if (defaultSpace.state.get() === SpaceState2.SPACE_REQUIRES_MIGRATION) {
         await defaultSpace.internal.migrate();
       }
-      spaces.filter((space) => space.state.get() === SpaceState3.SPACE_READY).forEach((space) => {
+      spaces.filter((space) => space.state.get() === SpaceState2.SPACE_READY).forEach((space) => {
         subscriptions.add(scheduledEffect(() => ({
           name: space.properties.name
         }), ({ name }) => state.values.spaceNames[space.id] = name));
@@ -1925,7 +1941,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 err: err.message
               }, {
                 F: __dxlog_file6,
-                L: 231,
+                L: 292,
                 S: void 0,
                 C: (f, a) => f(...a)
               });
@@ -1983,10 +1999,15 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
         key: "spaceNames",
         type: LocalStorageStore.json()
       });
+      if (findPlugin(plugins, "dxos.org/plugin/stack")) {
+        state.values.navigableCollections = true;
+      }
+      graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+      layoutPlugin = resolvePlugin(plugins, parseLayoutPlugin);
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin2);
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       clientPlugin = resolvePlugin(plugins, parseClientPlugin);
-      intentPlugin = resolvePlugin(plugins, parseIntentPlugin3);
+      intentPlugin = resolvePlugin(plugins, parseIntentPlugin2);
       if (!clientPlugin || !intentPlugin) {
         return;
       }
@@ -2006,7 +2027,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
           dispatch
         });
       };
-      client.spaces.isReady.subscribe(async (ready) => {
+      subscriptions.add(client.spaces.isReady.subscribe(async (ready) => {
         if (ready) {
           await clientPlugin?.provides.client.spaces.default.waitUntilReady();
           if (firstRun) {
@@ -2016,7 +2037,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
           }
           await onSpaceReady();
         }
-      });
+      }).unsubscribe);
     },
     unload: async () => {
       settings.close();
@@ -2032,7 +2053,21 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
         ...translations_default,
         osTranslations
       ],
-      root: () => state.values.awaiting ? /* @__PURE__ */ React18.createElement(AwaitingObject, {
+      complementary: {
+        panels: [
+          {
+            id: "settings",
+            label: [
+              "open settings panel label",
+              {
+                ns: SPACE_PLUGIN
+              }
+            ],
+            icon: "ph--gear--regular"
+          }
+        ]
+      },
+      root: () => state.values.awaiting ? /* @__PURE__ */ React17.createElement(AwaitingObject, {
         id: state.values.awaiting
       }) : null,
       metadata: {
@@ -2060,50 +2095,48 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
       },
       surface: {
         component: ({ data, role, ...rest }) => {
-          const primary = data.active ?? data.object;
           switch (role) {
             case "article":
-            case "main":
-              return isSpace2(primary) && primary.state.get() === SpaceState3.SPACE_READY ? /* @__PURE__ */ React18.createElement(Surface2, {
+              return isSpace2(data.object) && data.object.state.get() === SpaceState2.SPACE_READY ? /* @__PURE__ */ React17.createElement(Surface, {
                 data: {
-                  active: primary.properties[CollectionType.typename],
-                  id: primary.id
+                  object: data.object.properties[CollectionType.typename],
+                  id: data.object.id
                 },
                 role,
                 ...rest
-              }) : primary instanceof CollectionType ? {
-                node: /* @__PURE__ */ React18.createElement(CollectionMain, {
-                  collection: primary
+              }) : data.object instanceof CollectionType ? {
+                node: /* @__PURE__ */ React17.createElement(CollectionMain, {
+                  collection: data.object
                 }),
                 disposition: "fallback"
-              } : typeof primary === "string" && primary.length === OBJECT_ID_LENGTH ? /* @__PURE__ */ React18.createElement(MissingObject, {
-                id: primary
-              }) : null;
+              } : null;
             case "complementary--settings":
-              return isSpace2(data.subject) ? /* @__PURE__ */ React18.createElement(SpaceSettingsPanel, {
+              return isSpace2(data.subject) ? /* @__PURE__ */ React17.createElement(SpaceSettingsPanel, {
                 space: data.subject
               }) : isEchoObject2(data.subject) ? {
-                node: /* @__PURE__ */ React18.createElement(DefaultObjectSettings, {
+                node: /* @__PURE__ */ React17.createElement(DefaultObjectSettings, {
                   object: data.subject
                 }),
                 disposition: "fallback"
               } : null;
             case "dialog":
-              if (data.component === "dxos.org/plugin/space/InvitationManagerDialog") {
-                return /* @__PURE__ */ React18.createElement(Dialog.Content, null, /* @__PURE__ */ React18.createElement(ClipboardProvider2, null, /* @__PURE__ */ React18.createElement(InvitationManager, {
-                  active: true,
-                  ...data.subject
-                })));
+              if (data.component === "dxos.org/plugin/space/SpaceSettingsDialog") {
+                return /* @__PURE__ */ React17.createElement(SpaceSettingsDialog, {
+                  ...data.subject,
+                  createInvitationUrl: createSpaceInvitationUrl
+                });
+              } else if (data.component === "dxos.org/plugin/space/JoinDialog") {
+                return /* @__PURE__ */ React17.createElement(JoinDialog, data.subject);
               }
               return null;
             case "popover": {
               if (data.component === "dxos.org/plugin/space/RenameSpacePopover" && isSpace2(data.subject)) {
-                return /* @__PURE__ */ React18.createElement(PopoverRenameSpace, {
+                return /* @__PURE__ */ React17.createElement(PopoverRenameSpace, {
                   space: data.subject
                 });
               }
               if (data.component === "dxos.org/plugin/space/RenameObjectPopover" && isReactiveObject2(data.subject)) {
-                return /* @__PURE__ */ React18.createElement(PopoverRenameObject, {
+                return /* @__PURE__ */ React17.createElement(PopoverRenameObject, {
                   object: data.subject
                 });
               }
@@ -2111,10 +2144,10 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
             }
             // TODO(burdon): Add role name syntax to minimal plugin docs.
             case "presence--glyph": {
-              return isReactiveObject2(data.object) ? /* @__PURE__ */ React18.createElement(SmallPresenceLive, {
+              return isReactiveObject2(data.object) ? /* @__PURE__ */ React17.createElement(SmallPresenceLive, {
                 id: data.id,
                 viewers: state.values.viewersByObject[fullyQualifiedId4(data.object)]
-              }) : /* @__PURE__ */ React18.createElement(SmallPresence, {
+              }) : /* @__PURE__ */ React17.createElement(SmallPresence, {
                 id: data.id,
                 count: 0
               });
@@ -2127,34 +2160,34 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 return null;
               }
               const space = isSpace2(data.object) ? data.object : getSpace4(data.object);
-              const object = isSpace2(data.object) ? data.object.state.get() === SpaceState3.SPACE_READY ? space?.properties[CollectionType.typename] : void 0 : data.object;
+              const object = isSpace2(data.object) ? data.object.state.get() === SpaceState2.SPACE_READY ? space?.properties[CollectionType.typename] : void 0 : data.object;
               return space && object ? {
-                node: /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SpacePresence, {
+                node: /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(SpacePresence, {
                   object
-                }), space.properties[COMPOSER_SPACE_LOCK] ? null : /* @__PURE__ */ React18.createElement(ShareSpaceButton, {
-                  spaceId: space.id
+                }), space.properties[COMPOSER_SPACE_LOCK] ? null : /* @__PURE__ */ React17.createElement(ShareSpaceButton, {
+                  space
                 })),
                 disposition: "hoist"
               } : null;
             }
             case "section":
-              return data.object instanceof CollectionType ? /* @__PURE__ */ React18.createElement(CollectionSection, {
+              return data.object instanceof CollectionType ? /* @__PURE__ */ React17.createElement(CollectionSection, {
                 collection: data.object
               }) : null;
             case "settings":
-              return data.plugin === meta_default.id ? /* @__PURE__ */ React18.createElement(SpaceSettings, {
+              return data.plugin === meta_default.id ? /* @__PURE__ */ React17.createElement(SpacePluginSettings, {
                 settings: settings.values
               }) : null;
             case "menu-footer":
               if (isEchoObject2(data.object)) {
-                return /* @__PURE__ */ React18.createElement(MenuFooter, {
+                return /* @__PURE__ */ React17.createElement(MenuFooter, {
                   object: data.object
                 });
               } else {
                 return null;
               }
             case "status": {
-              return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SyncStatus, null), /* @__PURE__ */ React18.createElement(SaveStatus, null));
+              return /* @__PURE__ */ React17.createElement(SyncStatus, null);
             }
             default:
               return null;
@@ -2165,11 +2198,11 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
         builder: (plugins) => {
           const clientPlugin2 = resolvePlugin(plugins, parseClientPlugin);
           const metadataPlugin = resolvePlugin(plugins, parseMetadataResolverPlugin);
-          const graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+          const graphPlugin2 = resolvePlugin(plugins, parseGraphPlugin);
           const client = clientPlugin2?.provides.client;
           const dispatch = intentPlugin?.provides.intent.dispatch;
           const resolve = metadataPlugin?.provides.metadata.resolver;
-          const graph = graphPlugin?.provides.graph;
+          const graph = graphPlugin2?.provides.graph;
           if (!client || !dispatch || !resolve || !graph) {
             return [];
           }
@@ -2187,7 +2220,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                     }
                   });
                   return () => defaultSpaceUnsubscribe?.();
-                }, () => client.spaces.isReady.get() && client.spaces.default.state.get() === SpaceState3.SPACE_READY);
+                }, () => client.spaces.isReady.get() && client.spaces.default.state.get() === SpaceState2.SPACE_READY);
                 if (!isReady) {
                   return [];
                 }
@@ -2204,6 +2237,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                       ],
                       testId: "spacePlugin.spaces",
                       role: "branch",
+                      disabled: true,
                       childrenPersistenceClass: "echo",
                       onRearrangeChildren: async (nextOrder) => {
                         graph._sortEdges(SPACES, "outbound", nextOrder.map(({ id }) => id));
@@ -2215,7 +2249,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                         } else {
                           log3.warn("spaces order object not found", void 0, {
                             F: __dxlog_file6,
-                            L: 528,
+                            L: 596,
                             S: void 0,
                             C: (f, a) => f(...a)
                           });
@@ -2234,15 +2268,10 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 {
                   id: SpaceAction.CREATE,
                   data: async () => {
-                    await dispatch([
-                      {
-                        plugin: SPACE_PLUGIN,
-                        action: SpaceAction.CREATE
-                      },
-                      {
-                        action: NavigationAction3.OPEN
-                      }
-                    ]);
+                    await dispatch({
+                      plugin: SPACE_PLUGIN,
+                      action: SpaceAction.CREATE
+                    });
                   },
                   properties: {
                     label: [
@@ -2254,21 +2283,16 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                     icon: "ph--plus--regular",
                     disposition: "item",
                     testId: "spacePlugin.createSpace",
-                    className: "pbs-4"
+                    className: "border-t border-separator"
                   }
                 },
                 {
                   id: SpaceAction.JOIN,
                   data: async () => {
-                    await dispatch([
-                      {
-                        plugin: SPACE_PLUGIN,
-                        action: SpaceAction.JOIN
-                      },
-                      {
-                        action: NavigationAction3.OPEN
-                      }
-                    ]);
+                    await dispatch({
+                      plugin: SPACE_PLUGIN,
+                      action: SpaceAction.JOIN
+                    });
                   },
                   properties: {
                     label: [
@@ -2279,8 +2303,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                     ],
                     icon: "ph--sign-in--regular",
                     disposition: "item",
-                    testId: "spacePlugin.joinSpace",
-                    className: "pbe-4"
+                    testId: "spacePlugin.joinSpace"
                   }
                 }
               ],
@@ -2290,23 +2313,27 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 if (!spaces || !isReady) {
                   return;
                 }
-                const [spacesOrder] = memoizeQuery(client.spaces.default, Filter.schema(Expando, {
-                  key: SHARED
-                }));
-                const order = spacesOrder?.order ?? [];
-                const orderMap = new Map(order.map((id, index) => [
-                  id,
-                  index
-                ]));
-                return [
-                  ...spaces.filter((space) => orderMap.has(space.id)).sort((a, b) => orderMap.get(a.id) - orderMap.get(b.id)),
-                  ...spaces.filter((space) => !orderMap.has(space.id))
-                ].filter((space) => settings.values.showHidden ? true : space.state.get() !== SpaceState3.SPACE_INACTIVE).map((space) => constructSpaceNode({
-                  space,
-                  personal: space === client.spaces.default,
-                  namesCache: state.values.spaceNames,
-                  resolve
-                }));
+                try {
+                  const [spacesOrder] = memoizeQuery(client.spaces.default, Filter.schema(Expando, {
+                    key: SHARED
+                  }));
+                  const order = spacesOrder?.order ?? [];
+                  const orderMap = new Map(order.map((id, index) => [
+                    id,
+                    index
+                  ]));
+                  return [
+                    ...spaces.filter((space) => orderMap.has(space.id)).sort((a, b) => orderMap.get(a.id) - orderMap.get(b.id)),
+                    ...spaces.filter((space) => !orderMap.has(space.id))
+                  ].filter((space) => settings.values.showHidden ? true : space.state.get() !== SpaceState2.SPACE_INACTIVE).map((space) => constructSpaceNode({
+                    space,
+                    navigable: state.values.navigableCollections,
+                    personal: space === client.spaces.default,
+                    namesCache: state.values.spaceNames,
+                    resolve
+                  }));
+                } catch {
+                }
               }
             }),
             // Find an object by its fully qualified id.
@@ -2318,8 +2345,8 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 if (!space) {
                   return;
                 }
-                const state2 = toSignal((onChange) => space.state.subscribe(() => onChange()).unsubscribe, () => space.state.get(), space.id);
-                if (state2 !== SpaceState3.SPACE_READY) {
+                const spaceState = toSignal((onChange) => space.state.subscribe(() => onChange()).unsubscribe, () => space.state.get(), space.id);
+                if (spaceState !== SpaceState2.SPACE_READY) {
                   return;
                 }
                 const store = memoize2(() => signal(space.db.getObjectById(objectId)), id);
@@ -2335,7 +2362,8 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 return createObjectNode({
                   object,
                   space,
-                  resolve
+                  resolve,
+                  navigable: state.values.navigableCollections
                 });
               }
             }),
@@ -2345,7 +2373,8 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
               filter: (node) => isSpace2(node.data),
               actionGroups: ({ node }) => constructSpaceActionGroups({
                 space: node.data,
-                dispatch
+                dispatch,
+                navigable: state.values.navigableCollections
               }),
               actions: ({ node }) => {
                 const space = node.data;
@@ -2363,8 +2392,8 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
               filter: (node) => isSpace2(node.data),
               connector: ({ node }) => {
                 const space = node.data;
-                const state2 = toSignal((onChange) => space.state.subscribe(() => onChange()).unsubscribe, () => space.state.get(), space.id);
-                if (state2 !== SpaceState3.SPACE_READY) {
+                const spaceState = toSignal((onChange) => space.state.subscribe(() => onChange()).unsubscribe, () => space.state.get(), space.id);
+                if (spaceState !== SpaceState2.SPACE_READY) {
                   return;
                 }
                 const collection = space.properties[CollectionType.typename];
@@ -2374,7 +2403,8 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 return collection.objects.filter(nonNullable).map((object) => createObjectNode({
                   object,
                   space,
-                  resolve
+                  resolve,
+                  navigable: state.values.navigableCollections
                 })).filter(nonNullable);
               }
             }),
@@ -2384,7 +2414,8 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
               filter: (node) => isEchoObject2(node.data),
               actionGroups: ({ node }) => constructObjectActionGroups({
                 object: node.data,
-                dispatch
+                dispatch,
+                navigable: state.values.navigableCollections
               }),
               actions: ({ node }) => constructObjectActions({
                 node,
@@ -2404,7 +2435,8 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 return collection.objects.filter(nonNullable).map((object) => createObjectNode({
                   object,
                   space,
-                  resolve
+                  resolve,
+                  navigable: state.values.navigableCollections
                 })).filter(nonNullable);
               }
             }),
@@ -2477,7 +2509,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
           ];
         },
         serializer: (plugins) => {
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin3)?.provides.intent.dispatch;
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin2)?.provides.intent.dispatch;
           if (!dispatch) {
             return [];
           }
@@ -2595,13 +2627,16 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                         }
                       },
                       {
-                        action: NavigationAction3.EXPOSE
+                        action: NavigationAction4.OPEN
+                      },
+                      {
+                        action: NavigationAction4.EXPOSE
                       }
                     ]
                   ] : [],
                   [
                     {
-                      action: ObservabilityAction.SEND_EVENT,
+                      action: ObservabilityAction2.SEND_EVENT,
                       data: {
                         name: "space.create",
                         properties: {
@@ -2614,77 +2649,58 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
               };
             }
             case SpaceAction.JOIN: {
-              if (client) {
-                const { space } = await client.shell.joinSpace({
-                  invitationCode: intent.data?.invitationCode
-                });
-                if (space) {
-                  return {
-                    data: {
-                      space,
-                      id: space.id,
-                      activeParts: {
-                        main: [
-                          space.id
-                        ]
-                      }
-                    },
-                    intents: [
-                      [
-                        {
-                          action: LayoutAction2.SET_LAYOUT,
-                          data: {
-                            element: "toast",
-                            subject: {
-                              id: `${SPACE_PLUGIN}/join-success`,
-                              duration: 1e4,
-                              title: translations_default[0]["en-US"][SPACE_PLUGIN]["join success label"],
-                              closeLabel: translations_default[0]["en-US"][SPACE_PLUGIN]["dismiss label"]
-                            }
-                          }
-                        }
-                      ],
-                      [
-                        {
-                          action: ObservabilityAction.SEND_EVENT,
-                          data: {
-                            name: "space.join",
-                            properties: {
-                              spaceId: space.id
-                            }
-                          }
+              return {
+                data: true,
+                intents: [
+                  [
+                    {
+                      action: LayoutAction2.SET_LAYOUT,
+                      data: {
+                        element: "dialog",
+                        component: "dxos.org/plugin/space/JoinDialog",
+                        dialogBlockAlign: "start",
+                        subject: {
+                          initialInvitationCode: intent.data?.invitationCode
                         }
-                      ]
-                    ]
-                  };
-                }
-              }
+                      }
+                    }
+                  ]
+                ]
+              };
               break;
             }
             case SpaceAction.SHARE: {
-              const spaceId = intent.data?.spaceId;
-              if (clientPlugin2 && typeof spaceId === "string") {
-                if (!navigationPlugin?.provides.location.active) {
-                  return;
-                }
-                const target = firstIdInPart(navigationPlugin?.provides.location.active, "main");
-                const result = await clientPlugin2.provides.client.shell.shareSpace({
-                  spaceId,
-                  target
-                });
+              const space = intent.data?.space;
+              if (isSpace2(space) && !space.properties[COMPOSER_SPACE_LOCK]) {
+                const active = navigationPlugin?.provides.location.active;
+                const mode = layoutPlugin?.provides.layout.layoutMode;
+                const target = active ? firstIdInPart(active, mode === "solo" ? "solo" : "main") : void 0;
                 return {
-                  data: result,
+                  data: true,
                   intents: [
                     [
                       {
-                        action: ObservabilityAction.SEND_EVENT,
+                        action: LayoutAction2.SET_LAYOUT,
+                        data: {
+                          element: "dialog",
+                          component: "dxos.org/plugin/space/SpaceSettingsDialog",
+                          dialogBlockAlign: "start",
+                          subject: {
+                            space,
+                            target,
+                            initialTab: "members",
+                            createInvitationUrl: createSpaceInvitationUrl
+                          }
+                        }
+                      }
+                    ],
+                    [
+                      {
+                        action: ObservabilityAction2.SEND_EVENT,
                         data: {
                           name: "space.share",
                           properties: {
-                            spaceId,
-                            members: result.members?.length,
-                            error: result.error?.message,
-                            cancelled: result.cancelled
+                            space: space.id
                           }
                         }
                       }
@@ -2703,7 +2719,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                   intents: [
                     [
                       {
-                        action: ObservabilityAction.SEND_EVENT,
+                        action: ObservabilityAction2.SEND_EVENT,
                         data: {
                           name: "space.lock",
                           properties: {
@@ -2726,7 +2742,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                   intents: [
                     [
                       {
-                        action: ObservabilityAction.SEND_EVENT,
+                        action: ObservabilityAction2.SEND_EVENT,
                         data: {
                           name: "space.unlock",
                           properties: {
@@ -2761,6 +2777,32 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
               }
               break;
             }
+            case SpaceAction.OPEN_SETTINGS: {
+              const space = intent.data?.space;
+              if (isSpace2(space)) {
+                return {
+                  data: true,
+                  intents: [
+                    [
+                      {
+                        action: LayoutAction2.SET_LAYOUT,
+                        data: {
+                          element: "dialog",
+                          component: "dxos.org/plugin/space/SpaceSettingsDialog",
+                          dialogBlockAlign: "start",
+                          subject: {
+                            space,
+                            initialTab: "settings",
+                            createInvitationUrl: createSpaceInvitationUrl
+                          }
+                        }
+                      }
+                    ]
+                  ]
+                };
+              }
+              break;
+            }
             case SpaceAction.OPEN: {
               const space = intent.data?.space;
               if (isSpace2(space)) {
@@ -2784,7 +2826,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
             case SpaceAction.MIGRATE: {
               const space = intent.data?.space;
               if (isSpace2(space)) {
-                if (space.state.get() === SpaceState3.SPACE_REQUIRES_MIGRATION) {
+                if (space.state.get() === SpaceState2.SPACE_REQUIRES_MIGRATION) {
                   state.values.sdkMigrationRunning[space.id] = true;
                   await space.internal.migrate();
                   state.values.sdkMigrationRunning[space.id] = false;
@@ -2795,7 +2837,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                   intents: [
                     [
                       {
-                        action: ObservabilityAction.SEND_EVENT,
+                        action: ObservabilityAction2.SEND_EVENT,
                         data: {
                           name: "space.migrate",
                           properties: {
@@ -2845,7 +2887,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                     ],
                     [
                       {
-                        action: ObservabilityAction.SEND_EVENT,
+                        action: ObservabilityAction2.SEND_EVENT,
                         data: {
                           name: "space.limit",
                           properties: {
@@ -2886,7 +2928,7 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 intents: [
                   [
                     {
-                      action: ObservabilityAction.SEND_EVENT,
+                      action: ObservabilityAction2.SEND_EVENT,
                       data: {
                         name: "space.object.add",
                         properties: {
@@ -2900,10 +2942,19 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                 ]
               };
             }
-            case SpaceAction.REMOVE_OBJECT: {
-              const object = intent.data?.object ?? intent.data?.result;
-              const space = getSpace4(object);
-              if (!(isEchoObject2(object) && space)) {
+            case SpaceAction.REMOVE_OBJECTS: {
+              const objects = intent.data?.objects ?? intent.data?.result;
+              invariant2(Array.isArray(objects), void 0, {
+                F: __dxlog_file6,
+                L: 1291,
+                S: void 0,
+                A: [
+                  "Array.isArray(objects)",
+                  ""
+                ]
+              });
+              const space = getSpace4(objects[0]);
+              if (!space || !objects.every((obj) => isEchoObject2(obj) && getSpace4(obj) === space)) {
                 return;
               }
               const resolve = resolvePlugin(plugins, parseMetadataResolverPlugin)?.provides.metadata.resolver;
@@ -2911,20 +2962,20 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
               const openObjectIds = new Set(openIds(activeParts ?? {}));
               if (!intent.undo && resolve) {
                 const parentCollection = intent.data?.collection ?? space.properties[CollectionType.typename];
-                const nestedObjects = await getNestedObjects(object, resolve);
+                const nestedObjectsList = await Promise.all(objects.map((obj) => getNestedObjects(obj, resolve)));
                 const deletionData = {
-                  object,
+                  objects,
                   parentCollection,
-                  index: parentCollection instanceof CollectionType ? parentCollection.objects.indexOf(object) : -1,
-                  nestedObjects,
-                  wasActive: [
-                    object,
-                    ...nestedObjects
-                  ].map((obj) => fullyQualifiedId4(obj)).filter((id) => openObjectIds.has(id))
+                  indices: objects.map((obj) => parentCollection instanceof CollectionType ? parentCollection.objects.indexOf(obj) : -1),
+                  nestedObjectsList,
+                  wasActive: objects.flatMap((obj, i) => [
+                    obj,
+                    ...nestedObjectsList[i]
+                  ]).map((obj) => fullyQualifiedId4(obj)).filter((id) => openObjectIds.has(id))
                 };
                 if (deletionData.wasActive.length > 0) {
                   await intentPlugin?.provides.intent.dispatch({
-                    action: NavigationAction3.CLOSE,
+                    action: NavigationAction4.CLOSE,
                     data: {
                       activeParts: {
                         main: deletionData.wasActive,
@@ -2933,38 +2984,43 @@ var SpacePlugin = ({ firstRun, onFirstRun } = {}) => {
                     }
                   });
                 }
-                if (parentCollection instanceof CollectionType) {
-                  const index = parentCollection.objects.indexOf(object);
-                  if (index !== -1) {
-                    parentCollection.objects.splice(index, 1);
-                  }
+                if (deletionData.parentCollection instanceof CollectionType) {
+                  [
+                    ...deletionData.indices
+                  ].sort((a, b) => b - a).forEach((index) => {
+                    if (index !== -1) {
+                      deletionData.parentCollection.objects.splice(index, 1);
+                    }
+                  });
                 }
-                deletionData.nestedObjects.forEach((obj) => {
+                deletionData.nestedObjectsList.flat().forEach((obj) => {
                   space.db.remove(obj);
                 });
-                space.db.remove(object);
-                const undoMessageKey = object instanceof CollectionType ? "collection deleted label" : "object deleted label";
+                objects.forEach((obj) => space.db.remove(obj));
+                const undoMessageKey = objects.some((obj) => obj instanceof CollectionType) ? "collection deleted label" : objects.length > 1 ? "objects deleted label" : "object deleted label";
                 return {
                   data: true,
                   undoable: {
-                    // Consider using a translation key here.
+                    // TODO(ZaymonFC): Pluralize if more than one object.
                     message: translations_default[0]["en-US"][SPACE_PLUGIN][undoMessageKey],
                     data: deletionData
                   }
                 };
               } else {
                 const undoData = intent.data;
-                if (undoData && isEchoObject2(undoData.object) && undoData.parentCollection instanceof CollectionType) {
-                  const restoredObject = space.db.add(undoData.object);
-                  undoData.nestedObjects.forEach((obj) => {
+                if (undoData?.objects?.length && undoData.objects.every(isEchoObject2) && undoData.parentCollection instanceof CollectionType) {
+                  const restoredObjects = undoData.objects.map((obj) => space.db.add(obj));
+                  undoData.nestedObjectsList.flat().forEach((obj) => {
                     space.db.add(obj);
                   });
-                  if (undoData.index !== -1) {
-                    undoData.parentCollection.objects.splice(undoData.index, 0, restoredObject);
-                  }
+                  undoData.indices.forEach((index, i) => {
+                    if (index !== -1) {
+                      undoData.parentCollection.objects.splice(index, 0, restoredObjects[i]);
+                    }
+                  });
                   if (undoData.wasActive.length > 0) {
                     await intentPlugin?.provides.intent.dispatch({
-                      action: NavigationAction3.OPEN,
+                      action: NavigationAction4.OPEN,
                       data: {
                         activeParts: {
                           main: undoData.wasActive
@@ -3051,10 +3107,10 @@ export {
   ContactType,
   DefaultObjectSettings,
   FullPresence,
+  JoinDialog,
   MenuFooter,
   MessageState,
   MessageType,
-  MissingObject,
   PersistenceStatus,
   PopoverRenameObject,
   PopoverRenameSpace,
@@ -3064,16 +3120,15 @@ export {
   SPACE_PLUGIN,
   SPACE_PLUGIN_SHORT_ID,
   SPACE_TYPE,
-  SaveStatus,
   ShareSpaceButton,
   ShareSpaceButtonImpl,
   SmallPresence,
   SmallPresenceLive,
   SpaceAction,
-  SpaceMain,
   SpacePlugin,
+  SpacePluginSettings,
   SpacePresence,
-  SpaceSettings,
+  SpaceSettingsDialog,
   SpaceSettingsPanel,
   SyncStatus,
   SyncStatusDetail,