@dxos/plugin-space 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f

package/dist/lib/browser/{chunk-4CTAR2NQ.mjs → chunk-JZXWPMLA.mjs}

@@ -1,127 +1,34 @@
 import {
   SpaceCapabilities
-} from "./chunk-O7LODPTY.mjs";
+} from "./chunk-KVRYWFZU.mjs";
 import {
-  COMPOSER_SPACE_LOCK,
   getSpaceDisplayName
-} from "./chunk-3UOTYBKX.mjs";
+} from "./chunk-LO5UL6RU.mjs";
 import {
+  CollectionType,
   SpaceAction,
   SpaceForm
-} from "./chunk-HSC56GUH.mjs";
+} from "./chunk-AYW4IDRT.mjs";
 import {
-  SPACE_PLUGIN
+  SPACE_PLUGIN,
+  meta
 } from "./chunk-PTKYMZWO.mjs";
 
-// packages/plugins/plugin-space/src/components/AdvancedObjectSettings/AdvancedObjectSettings.tsx
-import React2, { useCallback as useCallback2, useState } from "react";
-import { ForeignKeySchema } from "@dxos/echo-schema";
-import { getMeta } from "@dxos/react-client/echo";
-import { IconButton as IconButton2, useTranslation as useTranslation2, Separator } from "@dxos/react-ui";
-import { Form } from "@dxos/react-ui-form";
-
-// packages/plugins/plugin-space/src/components/AdvancedObjectSettings/ForeignKeys.tsx
-import React, { useCallback } from "react";
-import { IconButton, List, ListItem, useTranslation } from "@dxos/react-ui";
-var ForeignKeys = ({ keys, onDelete }) => {
-  return /* @__PURE__ */ React.createElement(List, {
-    classNames: "flex flex-col gap-2"
-  }, keys.map((key) => /* @__PURE__ */ React.createElement(KeyItem, {
-    key: key.id,
-    forignKey: key,
-    onDelete
-  })));
-};
-var KeyItem = ({ forignKey, onDelete }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const handleDelete = useCallback(() => {
-    onDelete?.(forignKey);
-  }, [
-    forignKey,
-    onDelete
-  ]);
-  return /* @__PURE__ */ React.createElement(ListItem.Root, {
-    classNames: "px-2"
-  }, /* @__PURE__ */ React.createElement(ListItem.Heading, {
-    classNames: "flex flex-col grow truncate"
-  }, /* @__PURE__ */ React.createElement("div", null, forignKey.source), /* @__PURE__ */ React.createElement("div", {
-    className: "text-description text-sm truncate"
-  }, forignKey.id)), /* @__PURE__ */ React.createElement(ListItem.Endcap, null, /* @__PURE__ */ React.createElement(IconButton, {
-    iconOnly: true,
-    icon: "ph--x--regular",
-    variant: "ghost",
-    label: t("delete key"),
-    onClick: handleDelete
-  })));
-};
-
-// packages/plugins/plugin-space/src/components/AdvancedObjectSettings/AdvancedObjectSettings.tsx
-var initialValues = {
-  source: "",
-  id: ""
-};
-var AdvancedObjectSettings = ({ object }) => {
-  const { t } = useTranslation2(SPACE_PLUGIN);
-  const [adding, setAdding] = useState(false);
-  const keys = getMeta(object).keys;
-  const handleNew = useCallback2(() => setAdding(true), []);
-  const handleCancel = useCallback2(() => setAdding(false), []);
-  const handleSave = useCallback2((key) => {
-    const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-    if (index === -1) {
-      keys.push(key);
-    }
-    setAdding(false);
-  }, [
-    keys
-  ]);
-  const handleDelete = useCallback2((key) => {
-    const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-    if (index !== -1) {
-      keys.splice(index, 1);
-    }
-  }, [
-    keys
-  ]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Separator, null), /* @__PURE__ */ React2.createElement("div", {
-    className: "p-2 flex flex-col gap-4"
-  }, /* @__PURE__ */ React2.createElement("h2", null, t("advanced settings label")), /* @__PURE__ */ React2.createElement("div", {
-    className: "flex items-center"
-  }, /* @__PURE__ */ React2.createElement("h3", {
-    className: "text-sm font-semibold"
-  }, t("foreign keys")), /* @__PURE__ */ React2.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React2.createElement(IconButton2, {
-    classNames: adding && "invisible",
-    icon: "ph--plus--regular",
-    label: t("add key"),
-    onClick: handleNew
-  })), !adding && /* @__PURE__ */ React2.createElement(ForeignKeys, {
-    keys,
-    onDelete: handleDelete
-  })), adding && /* @__PURE__ */ React2.createElement(Form, {
-    schema: ForeignKeySchema,
-    values: initialValues,
-    onSave: handleSave,
-    onCancel: handleCancel
-  }));
-};
-
 // packages/plugins/plugin-space/src/components/AwaitingObject.tsx
 import { CheckCircle, CircleDashed, CircleNotch } from "@phosphor-icons/react";
-import React3, { useCallback as useCallback3, useEffect, useState as useState2 } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { createIntent, LayoutAction, useIntentDispatcher, useLayout } from "@dxos/app-framework";
 import { useClient } from "@dxos/react-client";
 import { Filter, fullyQualifiedId, useQuery } from "@dxos/react-client/echo";
-import { Button, Toast, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { Button, Toast, useTranslation } from "@dxos/react-ui";
 import { getSize, mx } from "@dxos/react-ui-theme";
 var WAIT_FOR_OBJECT_TIMEOUT = 18e4;
 var TOAST_TIMEOUT = 24e4;
 var AwaitingObject = ({ id }) => {
-  const [open, setOpen] = useState2(true);
-  const [waiting, setWaiting] = useState2(true);
-  const [found, setFound] = useState2(false);
-  const { t } = useTranslation3(SPACE_PLUGIN);
+  const [open, setOpen] = useState(true);
+  const [waiting, setWaiting] = useState(true);
+  const [found, setFound] = useState(false);
+  const { t } = useTranslation(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useLayout();
   const client = useClient();
@@ -149,12 +56,12 @@ var AwaitingObject = ({ id }) => {
     objects,
     layout
   ]);
-  const handleClose = useCallback3(async () => dispatch(createIntent(SpaceAction.WaitForObject, {
+  const handleClose = useCallback(async () => dispatch(createIntent(SpaceAction.WaitForObject, {
     id: void 0
   })), [
     dispatch
   ]);
-  const handleNavigate = useCallback3(() => {
+  const handleNavigate = useCallback(() => {
     void dispatch(createIntent(LayoutAction.Open, {
       part: "main",
       subject: [
@@ -167,86 +74,62 @@ var AwaitingObject = ({ id }) => {
     handleClose,
     dispatch
   ]);
-  return /* @__PURE__ */ React3.createElement(Toast.Root, {
+  return /* @__PURE__ */ React.createElement(Toast.Root, {
     open,
     duration: TOAST_TIMEOUT,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ React3.createElement(Toast.Body, null, /* @__PURE__ */ React3.createElement(Toast.Title, {
+  }, /* @__PURE__ */ React.createElement(Toast.Body, null, /* @__PURE__ */ React.createElement(Toast.Title, {
     classNames: "flex items-center gap-2"
-  }, found ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CheckCircle, {
+  }, found ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CheckCircle, {
     className: getSize(5)
-  }), /* @__PURE__ */ React3.createElement("span", null, t("found object label"))) : waiting ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CircleNotch, {
+  }), /* @__PURE__ */ React.createElement("span", null, t("found object label"))) : waiting ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CircleNotch, {
     className: mx(getSize(5), "animate-spin")
-  }), /* @__PURE__ */ React3.createElement("span", null, t("waiting for object label"))) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CircleDashed, {
+  }), /* @__PURE__ */ React.createElement("span", null, t("waiting for object label"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CircleDashed, {
     className: getSize(5)
-  }), /* @__PURE__ */ React3.createElement("span", null, t("object not found label")))), /* @__PURE__ */ React3.createElement(Toast.Description, null, t(found ? "found object description" : waiting ? "waiting for object description" : "object not found description"))), /* @__PURE__ */ React3.createElement(Toast.Actions, null, found ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Toast.Action, {
+  }), /* @__PURE__ */ React.createElement("span", null, t("object not found label")))), /* @__PURE__ */ React.createElement(Toast.Description, null, t(found ? "found object description" : waiting ? "waiting for object description" : "object not found description"))), /* @__PURE__ */ React.createElement(Toast.Actions, null, found ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Toast.Action, {
     altText: t("go to object alt"),
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     variant: "primary",
     onClick: handleNavigate
-  }, t("go to object label"))), /* @__PURE__ */ React3.createElement(Toast.Close, {
+  }, t("go to object label"))), /* @__PURE__ */ React.createElement(Toast.Close, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     onClick: handleClose
   }, t("close label", {
     ns: "appkit"
-  })))) : /* @__PURE__ */ React3.createElement(Toast.Close, {
+  })))) : /* @__PURE__ */ React.createElement(Toast.Close, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     onClick: handleClose
   }, t(waiting ? "close label" : "confirm label", {
     ns: "appkit"
   })))));
 };
 
-// packages/plugins/plugin-space/src/components/BaseObjectSettings.tsx
-import React4 from "react";
-import { Input, useTranslation as useTranslation4 } from "@dxos/react-ui";
-var BaseObjectSettings = ({ object }) => {
-  const { t } = useTranslation4(SPACE_PLUGIN);
-  const inputRef = React4.useRef(null);
-  return /* @__PURE__ */ React4.createElement("div", {
-    role: "form",
-    className: "flex flex-col w-full p-2 gap-1"
-  }, /* @__PURE__ */ React4.createElement(Input.Root, null, /* @__PURE__ */ React4.createElement(Input.Label, null, t("name label")), /* @__PURE__ */ React4.createElement(Input.TextInput, {
-    ref: inputRef,
-    placeholder: t("name placeholder"),
-    value: object.name ?? "",
-    onChange: (event) => {
-      object.name = event.target.value;
-    },
-    onKeyDown: (event) => {
-      if (event.key === "Enter") {
-        inputRef.current?.blur();
-      }
-    }
-  })));
-};
-
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx
 import { pipe } from "effect";
-import React6, { useCallback as useCallback5, useRef } from "react";
+import React3, { useCallback as useCallback3, useRef } from "react";
 import { Capabilities, chain, createIntent as createIntent2, LayoutAction as LayoutAction2, useCapabilities, useIntentDispatcher as useIntentDispatcher2, usePluginManager as usePluginManager2 } from "@dxos/app-framework";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { useClient as useClient2 } from "@dxos/react-client";
 import { getSpace, isReactiveObject, isSpace, useSpaces } from "@dxos/react-client/echo";
-import { Button as Button2, Dialog, Icon as Icon2, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Button as Button2, Dialog, Icon as Icon2, useTranslation as useTranslation3 } from "@dxos/react-ui";
 
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectPanel.tsx
-import React5, { useCallback as useCallback4, useState as useState3 } from "react";
+import React2, { useCallback as useCallback2, useState as useState2 } from "react";
 import { Surface, isSurfaceAvailable, usePluginManager } from "@dxos/app-framework";
-import { getObjectAnnotation } from "@dxos/echo-schema";
+import { getTypeAnnotation } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { Icon, toLocalizedString, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Form as Form2 } from "@dxos/react-ui-form";
+import { Icon, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
 import { SearchList } from "@dxos/react-ui-searchlist";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 import { isNonNullable } from "@dxos/util";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectPanel.tsx";
 var useInputSurfaceLookup = (baseData) => {
   const pluginManager = usePluginManager();
-  return useCallback4(({ prop, schema, inputProps }) => {
+  return useCallback2(({ prop, schema, inputProps }) => {
     const composedData = {
       prop,
       schema,
@@ -258,7 +141,7 @@ var useInputSurfaceLookup = (baseData) => {
     })) {
       return void 0;
     }
-    return /* @__PURE__ */ React5.createElement(Surface, {
+    return /* @__PURE__ */ React2.createElement(Surface, {
       role: "form-input",
       data: composedData,
       ...inputProps
@@ -269,11 +152,11 @@ var useInputSurfaceLookup = (baseData) => {
   ]);
 };
 var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename, target: initialTarget, name: initialName, defaultSpaceId, resolve, onCreateObject }) => {
-  const { t } = useTranslation5(SPACE_PLUGIN);
-  const [typename, setTypename] = useState3(initialTypename);
-  const [target, setTarget] = useState3(initialTarget);
-  const form = forms.find((form2) => getObjectAnnotation(form2.objectSchema)?.typename === typename);
-  const options = forms.map((form2) => getObjectAnnotation(form2.objectSchema)).filter(isNonNullable).sort((a, b) => {
+  const { t } = useTranslation2(SPACE_PLUGIN);
+  const [typename, setTypename] = useState2(initialTypename);
+  const [target, setTarget] = useState2(initialTarget);
+  const form = forms.find((form2) => getTypeAnnotation(form2.objectSchema)?.typename === typename);
+  const options = forms.map((form2) => getTypeAnnotation(form2.objectSchema)).filter(isNonNullable).sort((a, b) => {
     const nameA = t("typename label", {
       ns: a.typename,
       defaultValue: a.typename
@@ -284,7 +167,7 @@ var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename,
     });
     return nameA.localeCompare(nameB);
   });
-  const handleCreateObject = useCallback4(async (props) => {
+  const handleCreateObject = useCallback2(async (props) => {
     if (!form || !target) {
       return;
     }
@@ -298,7 +181,7 @@ var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename,
     form,
     target
   ]);
-  const handleSetTypename = useCallback4(async (typename2) => {
+  const handleSetTypename = useCallback2(async (typename2) => {
     invariant(target, "target is required", {
       F: __dxlog_file,
       L: 94,
@@ -308,7 +191,7 @@ var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename,
         "'target is required'"
       ]
     });
-    const form2 = forms.find((form3) => getObjectAnnotation(form3.objectSchema)?.typename === typename2);
+    const form2 = forms.find((form3) => getTypeAnnotation(form3.objectSchema)?.typename === typename2);
     if (form2 && !form2.formSchema) {
       await onCreateObject?.({
         form: form2,
@@ -325,18 +208,18 @@ var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename,
   const inputSurfaceLookup = useInputSurfaceLookup({
     target
   });
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     role: "form",
     className: mx2("flex flex-col gap-2", classNames)
-  }, !form ? /* @__PURE__ */ React5.createElement(SelectSchema, {
+  }, !form ? /* @__PURE__ */ React2.createElement(SelectSchema, {
     options,
     resolve,
     onChange: handleSetTypename
-  }) : !target ? /* @__PURE__ */ React5.createElement(SelectSpace, {
+  }) : !target ? /* @__PURE__ */ React2.createElement(SelectSpace, {
     spaces,
     defaultSpaceId,
     onChange: setTarget
-  }) : form.formSchema ? /* @__PURE__ */ React5.createElement(Form2, {
+  }) : form.formSchema ? /* @__PURE__ */ React2.createElement(Form, {
     classNames: "!p-0",
     autoFocus: true,
     values: {
@@ -349,16 +232,16 @@ var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename,
   }) : void 0);
 };
 var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
-  const { t } = useTranslation5(SPACE_PLUGIN);
-  return /* @__PURE__ */ React5.createElement(SearchList.Root, {
+  const { t } = useTranslation2(SPACE_PLUGIN);
+  return /* @__PURE__ */ React2.createElement(SearchList.Root, {
     label: t("space input label"),
     classNames: "flex flex-col grow overflow-hidden"
-  }, /* @__PURE__ */ React5.createElement(SearchList.Input, {
+  }, /* @__PURE__ */ React2.createElement(SearchList.Input, {
     autoFocus: true,
     "data-testid": "create-object-form.space-input",
     placeholder: t("space input placeholder"),
     classNames: "px-1 my-2"
-  }), /* @__PURE__ */ React5.createElement(SearchList.Content, {
+  }), /* @__PURE__ */ React2.createElement(SearchList.Content, {
     classNames: "max-bs-[24rem] overflow-auto"
   }, spaces.sort((a, b) => {
     const aName = toLocalizedString(getSpaceDisplayName(a, {
@@ -368,32 +251,32 @@ var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
       personal: b.id === defaultSpaceId
     }), t);
     return aName.localeCompare(bName);
-  }).map((space) => /* @__PURE__ */ React5.createElement(SearchList.Item, {
+  }).map((space) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
     key: space.id,
     value: toLocalizedString(getSpaceDisplayName(space, {
       personal: space.id === defaultSpaceId
     }), t),
     onSelect: () => onChange(space),
     classNames: "flex items-center gap-2"
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: "grow truncate"
   }, toLocalizedString(getSpaceDisplayName(space, {
     personal: space.id === defaultSpaceId
   }), t))))));
 };
 var SelectSchema = ({ options, resolve, onChange }) => {
-  const { t } = useTranslation5(SPACE_PLUGIN);
-  return /* @__PURE__ */ React5.createElement(SearchList.Root, {
+  const { t } = useTranslation2(SPACE_PLUGIN);
+  return /* @__PURE__ */ React2.createElement(SearchList.Root, {
     label: t("schema input label"),
     classNames: "flex flex-col grow overflow-hidden"
-  }, /* @__PURE__ */ React5.createElement(SearchList.Input, {
+  }, /* @__PURE__ */ React2.createElement(SearchList.Input, {
     autoFocus: true,
     "data-testid": "create-object-form.schema-input",
     placeholder: t("schema input placeholder"),
     classNames: "px-1 my-2"
-  }), /* @__PURE__ */ React5.createElement(SearchList.Content, {
+  }), /* @__PURE__ */ React2.createElement(SearchList.Content, {
     classNames: "max-bs-[24rem] overflow-auto"
-  }, options.map((option) => /* @__PURE__ */ React5.createElement(SearchList.Item, {
+  }, options.map((option) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
     key: option.typename,
     value: t("typename label", {
       ns: option.typename,
@@ -401,9 +284,9 @@ var SelectSchema = ({ options, resolve, onChange }) => {
     }),
     onSelect: () => onChange(option.typename),
     classNames: "flex items-center gap-2"
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: "flex gap-2 items-center grow truncate"
-  }, /* @__PURE__ */ React5.createElement(Icon, {
+  }, /* @__PURE__ */ React2.createElement(Icon, {
     icon: resolve?.(option.typename).icon ?? "ph--placeholder--regular",
     size: 5
   }), t("typename label", {
@@ -414,17 +297,17 @@ var SelectSchema = ({ options, resolve, onChange }) => {
 
 // packages/plugins/plugin-space/src/capabilities/index.ts
 import { lazy } from "@dxos/app-framework";
-var AppGraphBuilder = lazy(() => import("./app-graph-builder-VHO33TWC.mjs"));
-var AppGraphSerializer = lazy(() => import("./app-graph-serializer-F3ASSBHI.mjs"));
-var IdentityCreated = lazy(() => import("./identity-created-YSJQAFUZ.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-OQ243G6B.mjs"));
-var ReactRoot = lazy(() => import("./react-root-5CIQKAFC.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-SEBYKQD5.mjs"));
-var Schema = lazy(() => import("./schema-UOCBWGA4.mjs"));
-var Tools = lazy(() => import("./schema-tools-6J5ZEDBC.mjs"));
-var SpaceSettings = lazy(() => import("./settings-C4ZEZTJF.mjs"));
-var SpaceState = lazy(() => import("./state-BUM7SQUV.mjs"));
-var SpacesReady = lazy(() => import("./spaces-ready-EWHXCOBW.mjs"));
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-GMFCSOLG.mjs"));
+var AppGraphSerializer = lazy(() => import("./app-graph-serializer-DSF2U3A5.mjs"));
+var IdentityCreated = lazy(() => import("./identity-created-JR7BNXFH.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-RKYILWWQ.mjs"));
+var ReactRoot = lazy(() => import("./react-root-6H7NX2M2.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-7AGLOVMK.mjs"));
+var Schema = lazy(() => import("./schema-FHTA26SW.mjs"));
+var Tools = lazy(() => import("./schema-tools-YAXPRIXP.mjs"));
+var SpaceSettings = lazy(() => import("./settings-PJPTJUPE.mjs"));
+var SpaceState = lazy(() => import("./state-X7VLCC6E.mjs"));
+var SpacesReady = lazy(() => import("./spaces-ready-BSSP7HHG.mjs"));
 
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx";
@@ -432,15 +315,15 @@ var CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavigate }) => {
   const closeRef = useRef(null);
   const manager = usePluginManager2();
-  const { t } = useTranslation6(SPACE_PLUGIN);
+  const { t } = useTranslation3(SPACE_PLUGIN);
   const client = useClient2();
   const spaces = useSpaces();
   const { dispatchPromise: dispatch } = useIntentDispatcher2();
   const forms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const resolve = useCallback5((typename2) => manager.context.requestCapabilities(Capabilities.Metadata).find(({ id }) => id === typename2)?.metadata ?? {}, [
+  const resolve = useCallback3((typename2) => manager.context.requestCapabilities(Capabilities.Metadata).find(({ id }) => id === typename2)?.metadata ?? {}, [
     manager
   ]);
-  const handleCreateObject = useCallback5(async ({ form, target: target2, data = {} }) => {
+  const handleCreateObject = useCallback3(async ({ form, target: target2, data = {} }) => {
     if (!target2) {
       return;
     }
@@ -481,22 +364,22 @@ var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavig
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
-    /* @__PURE__ */ React6.createElement(Dialog.Content, {
+    /* @__PURE__ */ React3.createElement(Dialog.Content, {
       classNames: "p-0 bs-content max-bs-full md:max-is-[40rem] overflow-hidden"
-    }, /* @__PURE__ */ React6.createElement("div", {
+    }, /* @__PURE__ */ React3.createElement("div", {
       role: "none",
       className: "flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4"
-    }, /* @__PURE__ */ React6.createElement(Dialog.Title, null, t("create object dialog title")), /* @__PURE__ */ React6.createElement(Dialog.Close, {
+    }, /* @__PURE__ */ React3.createElement(Dialog.Title, null, t("create object dialog title")), /* @__PURE__ */ React3.createElement(Dialog.Close, {
       asChild: true
-    }, /* @__PURE__ */ React6.createElement(Button2, {
+    }, /* @__PURE__ */ React3.createElement(Button2, {
       ref: closeRef,
       density: "fine",
       variant: "ghost",
       autoFocus: true
-    }, /* @__PURE__ */ React6.createElement(Icon2, {
+    }, /* @__PURE__ */ React3.createElement(Icon2, {
       icon: "ph--x--regular",
       size: 4
-    })))), /* @__PURE__ */ React6.createElement(CreateObjectPanel, {
+    })))), /* @__PURE__ */ React3.createElement(CreateObjectPanel, {
       classNames: "p-4",
       forms,
       spaces,
@@ -512,19 +395,19 @@ var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavig
 
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateSpaceDialog.tsx
 import { Effect } from "effect";
-import React7, { useCallback as useCallback6, useRef as useRef2 } from "react";
+import React4, { useCallback as useCallback4, useRef as useRef2 } from "react";
 import { createIntent as createIntent3, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
-import { Button as Button3, Dialog as Dialog2, Icon as Icon3, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { Form as Form3 } from "@dxos/react-ui-form";
+import { Button as Button3, Dialog as Dialog2, Icon as Icon3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Form as Form2 } from "@dxos/react-ui-form";
 var CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
-var initialValues2 = {
+var initialValues = {
   edgeReplication: true
 };
 var CreateSpaceDialog = () => {
   const closeRef = useRef2(null);
-  const { t } = useTranslation7(SPACE_PLUGIN);
+  const { t } = useTranslation4(SPACE_PLUGIN);
   const { dispatch } = useIntentDispatcher3();
-  const handleCreateSpace = useCallback6(async (data) => {
+  const handleCreateSpace = useCallback4(async (data) => {
     const program = Effect.gen(function* () {
       const { space } = yield* dispatch(createIntent3(SpaceAction.Create, data));
       yield* dispatch(createIntent3(LayoutAction3.SwitchWorkspace, {
@@ -542,28 +425,28 @@ var CreateSpaceDialog = () => {
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
-    /* @__PURE__ */ React7.createElement(Dialog2.Content, {
+    /* @__PURE__ */ React4.createElement(Dialog2.Content, {
       classNames: "p-0 bs-content min-bs-[16rem] max-bs-full md:max-is-[32rem] overflow-hidden"
-    }, /* @__PURE__ */ React7.createElement("div", {
+    }, /* @__PURE__ */ React4.createElement("div", {
       role: "none",
       className: "flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4"
-    }, /* @__PURE__ */ React7.createElement(Dialog2.Title, null, t("create space dialog title")), /* @__PURE__ */ React7.createElement(Dialog2.Close, {
+    }, /* @__PURE__ */ React4.createElement(Dialog2.Title, null, t("create space dialog title")), /* @__PURE__ */ React4.createElement(Dialog2.Close, {
       asChild: true
-    }, /* @__PURE__ */ React7.createElement(Button3, {
+    }, /* @__PURE__ */ React4.createElement(Button3, {
       ref: closeRef,
       density: "fine",
       variant: "ghost",
       autoFocus: true
-    }, /* @__PURE__ */ React7.createElement(Icon3, {
+    }, /* @__PURE__ */ React4.createElement(Icon3, {
       icon: "ph--x--regular",
       size: 4
-    })))), /* @__PURE__ */ React7.createElement("div", {
+    })))), /* @__PURE__ */ React4.createElement("div", {
       className: "p-4"
-    }, /* @__PURE__ */ React7.createElement(Form3, {
+    }, /* @__PURE__ */ React4.createElement(Form2, {
       testId: "create-space-form",
       classNames: "!p-0",
       autoFocus: true,
-      values: initialValues2,
+      values: initialValues,
       schema: SpaceForm,
       onSave: handleCreateSpace
     })))
@@ -571,87 +454,89 @@ var CreateSpaceDialog = () => {
 };
 
 // packages/plugins/plugin-space/src/components/CollectionMain.tsx
-import React8 from "react";
-import { useTranslation as useTranslation8 } from "@dxos/react-ui";
+import React5 from "react";
+import { useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { baseSurface, descriptionText, mx as mx3 } from "@dxos/react-ui-theme";
 var CollectionMain = ({ collection }) => {
-  const { t } = useTranslation8(SPACE_PLUGIN);
-  return /* @__PURE__ */ React8.createElement("div", {
+  const { t } = useTranslation5(SPACE_PLUGIN);
+  return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: mx3(baseSurface, "min-bs-screen is-full flex items-center justify-center p-8"),
     "data-testid": "composer.firstRunMessage"
-  }, /* @__PURE__ */ React8.createElement("p", {
+  }, /* @__PURE__ */ React5.createElement("p", {
     role: "alert",
     className: mx3(descriptionText, "border border-dashed border-neutral-400/50 rounded-lg p-8 font-normal text-lg max-is-[24rem] break-words")
   }, collection.name ?? t("unnamed collection label")));
 };
 
 // packages/plugins/plugin-space/src/components/CollectionSection.tsx
-import React9 from "react";
-import { useTranslation as useTranslation9 } from "@dxos/react-ui";
+import React6 from "react";
+import { useTranslation as useTranslation6 } from "@dxos/react-ui";
 var CollectionSection = ({ collection }) => {
-  const { t } = useTranslation9(SPACE_PLUGIN);
-  return /* @__PURE__ */ React9.createElement("div", {
+  const { t } = useTranslation6(SPACE_PLUGIN);
+  return /* @__PURE__ */ React6.createElement("div", {
     className: "min-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center"
-  }, /* @__PURE__ */ React9.createElement("span", {
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "truncate"
   }, collection.name ?? t("unnamed collection label")));
 };
 
 // packages/plugins/plugin-space/src/components/JoinDialog.tsx
-import React10, { useCallback as useCallback7 } from "react";
+import React7, { useCallback as useCallback5 } from "react";
 import { createIntent as createIntent4, LayoutAction as LayoutAction4, useAppGraph, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
-import { log } from "@dxos/log";
+import { Trigger } from "@dxos/async";
 import { ObservabilityAction } from "@dxos/plugin-observability/types";
 import { useClient as useClient3 } from "@dxos/react-client";
-import { Dialog as Dialog3, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { Dialog as Dialog3, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { JoinPanel } from "@dxos/shell/react";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/JoinDialog.tsx";
 var JOIN_DIALOG = `${SPACE_PLUGIN}/JoinDialog`;
 var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher4();
   const client = useClient3();
   const { graph } = useAppGraph();
-  const { t } = useTranslation10(SPACE_PLUGIN);
-  const handleDone = useCallback7(async (result) => {
-    if (result?.spaceKey) {
-      await Promise.all([
-        dispatch(createIntent4(LayoutAction4.AddToast, {
-          part: "toast",
-          subject: {
-            id: `${SPACE_PLUGIN}/join-success`,
-            duration: 5e3,
-            title: [
-              "join success label",
-              {
-                ns: SPACE_PLUGIN
-              }
-            ],
-            closeLabel: [
-              "dismiss label",
-              {
-                ns: SPACE_PLUGIN
-              }
-            ]
-          }
-        })),
-        dispatch(createIntent4(LayoutAction4.UpdateDialog, {
-          part: "dialog",
-          options: {
-            state: false
-          }
-        }))
-      ]);
+  const { t } = useTranslation7(SPACE_PLUGIN);
+  const handleDone = useCallback5(async (result) => {
+    const spaceKey = result?.spaceKey;
+    if (!spaceKey) {
+      return;
     }
-    const space = result?.spaceKey ? client.spaces.get(result.spaceKey) : void 0;
+    await Promise.all([
+      dispatch(createIntent4(LayoutAction4.AddToast, {
+        part: "toast",
+        subject: {
+          id: `${SPACE_PLUGIN}/join-success`,
+          duration: 5e3,
+          title: [
+            "join success label",
+            {
+              ns: SPACE_PLUGIN
+            }
+          ],
+          closeLabel: [
+            "dismiss label",
+            {
+              ns: SPACE_PLUGIN
+            }
+          ]
+        }
+      })),
+      dispatch(createIntent4(LayoutAction4.UpdateDialog, {
+        part: "dialog",
+        options: {
+          state: false
+        }
+      }))
+    ]);
+    let space = client.spaces.get(spaceKey);
     if (!space) {
-      log.warn("Space not found", result?.spaceKey, {
-        F: __dxlog_file3,
-        L: 57,
-        S: void 0,
-        C: (f, a) => f(...a)
+      const trigger = new Trigger();
+      client.spaces.subscribe(() => {
+        const space2 = client.spaces.get(spaceKey);
+        if (space2) {
+          trigger.wake(space2);
+        }
       });
-      return;
+      space = await trigger.wait();
     }
     await dispatch(createIntent4(LayoutAction4.SwitchWorkspace, {
       part: "workspace",
@@ -690,52 +575,422 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
     client,
     graph
   ]);
-  return /* @__PURE__ */ React10.createElement(Dialog3.Content, null, /* @__PURE__ */ React10.createElement(Dialog3.Title, {
+  return /* @__PURE__ */ React7.createElement(Dialog3.Content, null, /* @__PURE__ */ React7.createElement(Dialog3.Title, {
     classNames: "sr-only"
   }, t("join space label", {
     ns: "os"
-  })), /* @__PURE__ */ React10.createElement(JoinPanel, {
+  })), /* @__PURE__ */ React7.createElement(JoinPanel, {
     ...props,
-    exitActionParent: /* @__PURE__ */ React10.createElement(Dialog3.Close, {
+    exitActionParent: /* @__PURE__ */ React7.createElement(Dialog3.Close, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React10.createElement(Dialog3.Close, {
+    doneActionParent: /* @__PURE__ */ React7.createElement(Dialog3.Close, {
       asChild: true
     }),
     onDone: handleDone
   }));
 };
 
+// packages/plugins/plugin-space/src/components/MembersContainer.tsx
+import { Check, X } from "@phosphor-icons/react";
+import React8, { useMemo, useState as useState3 } from "react";
+import { QR } from "react-qr-rounded";
+import { log } from "@dxos/log";
+import { useConfig } from "@dxos/react-client";
+import { fullyQualifiedId as fullyQualifiedId2, useSpaceInvitations } from "@dxos/react-client/echo";
+import { Invitation, InvitationEncoder } from "@dxos/react-client/invitations";
+import { Button as Button4, Clipboard, Icon as Icon4, useId, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { ControlSection, ControlFrame, ControlFrameItem } from "@dxos/react-ui-form";
+import { StackItem } from "@dxos/react-ui-stack";
+import { getSize as getSize2, mx as mx4 } from "@dxos/react-ui-theme";
+import { AuthCode, BifurcatedAction, Centered, Emoji, InvitationList, SpaceMemberList, Viewport } from "@dxos/shell/react";
+import { hexToEmoji } from "@dxos/util";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/MembersContainer.tsx";
+var activeActionKey = "dxos:react-shell/space-manager/active-action";
+var handleInvitationEvent = (invitation, subscription) => {
+  const invitationCode = InvitationEncoder.encode(invitation);
+  if (invitation.state === Invitation.State.CONNECTING) {
+    log.info(JSON.stringify({
+      invitationCode,
+      authCode: invitation.authCode
+    }), void 0, {
+      F: __dxlog_file3,
+      L: 38,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    subscription.unsubscribe();
+  }
+};
+var MembersContainer = ({ space, createInvitationUrl }) => {
+  const { t } = useTranslation8("os");
+  const config = useConfig();
+  const invitations = useSpaceInvitations(space.key);
+  const visibleInvitations = invitations?.filter((invitation) => ![
+    Invitation.State.CANCELLED
+  ].includes(invitation.get().state));
+  const [activeAction, setInternalActiveAction] = useState3(localStorage.getItem(activeActionKey) ?? "inviteMany");
+  const setActiveAction = (nextAction) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+  const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
+  const inviteActions = useMemo(() => ({
+    inviteOne: {
+      label: t("invite one label"),
+      description: t("invite one description"),
+      icon: () => /* @__PURE__ */ React8.createElement(Icon4, {
+        icon: "ph--user-plus--regular",
+        size: 5
+      }),
+      testId: "membersContainer.inviteOne",
+      onClick: () => {
+        const invitation = space.share?.({
+          type: Invitation.Type.INTERACTIVE,
+          authMethod: Invitation.AuthMethod.SHARED_SECRET,
+          multiUse: false,
+          target: target && fullyQualifiedId2(target)
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }
+    },
+    inviteMany: {
+      label: t("invite many label"),
+      description: t("invite many description"),
+      icon: () => /* @__PURE__ */ React8.createElement(Icon4, {
+        icon: "ph--users-three--regular",
+        size: 5
+      }),
+      testId: "membersContainer.inviteMany",
+      onClick: () => {
+        const invitation = space.share?.({
+          type: Invitation.Type.DELEGATED,
+          authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
+          multiUse: true,
+          target: target && fullyQualifiedId2(target)
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }
+    }
+  }), [
+    t,
+    space,
+    target
+  ]);
+  const [selectedInvitation, setSelectedInvitation] = useState3(null);
+  const handleSend = (event) => {
+    setSelectedInvitation(event.invitation);
+  };
+  const handleBack = () => {
+    setSelectedInvitation(null);
+  };
+  return /* @__PURE__ */ React8.createElement(Clipboard.Provider, null, /* @__PURE__ */ React8.createElement(StackItem.Content, {
+    classNames: "p-2 block overflow-y-auto"
+  }, /* @__PURE__ */ React8.createElement(ControlSection, {
+    title: t("members verbose label", {
+      ns: SPACE_PLUGIN
+    }),
+    description: t("members description", {
+      ns: SPACE_PLUGIN
+    })
+  }, /* @__PURE__ */ React8.createElement(ControlFrame, null, /* @__PURE__ */ React8.createElement(ControlFrameItem, {
+    title: t("members label", {
+      ns: SPACE_PLUGIN
+    })
+  }, /* @__PURE__ */ React8.createElement(SpaceMemberList, {
+    spaceKey: space.key,
+    includeSelf: true
+  })), /* @__PURE__ */ React8.createElement(ControlFrameItem, {
+    title: t("invitations label", {
+      ns: SPACE_PLUGIN
+    })
+  }, selectedInvitation && /* @__PURE__ */ React8.createElement(InvitationSection, {
+    ...selectedInvitation,
+    onBack: handleBack
+  }), !selectedInvitation && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("p", {
+    className: "text-description mbe-2"
+  }, t("space invitation description", {
+    ns: SPACE_PLUGIN
+  })), /* @__PURE__ */ React8.createElement(InvitationList, {
+    className: "mb-2",
+    send: handleSend,
+    invitations: visibleInvitations ?? [],
+    onClickRemove: (invitation) => invitation.cancel(),
+    createInvitationUrl
+  }), /* @__PURE__ */ React8.createElement(BifurcatedAction, {
+    actions: inviteActions,
+    activeAction,
+    onChangeActiveAction: setActiveAction,
+    "data-testid": "membersContainer.createInvitation"
+  })))))));
+};
+var InvitationSection = ({ state = Invitation.State.INIT, authCode, invitationId = "never", url = "never", onBack }) => {
+  const activeView = state < 0 ? "init" : state >= Invitation.State.CANCELLED ? "complete" : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode ? "auth-code" : "qr-code";
+  return /* @__PURE__ */ React8.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React8.createElement(Viewport.Views, null, /* @__PURE__ */ React8.createElement(Viewport.View, {
+    id: "init"
+  }), /* @__PURE__ */ React8.createElement(Viewport.View, {
+    id: "complete"
+  }, /* @__PURE__ */ React8.createElement(InvitationComplete, {
+    statusValue: state
+  })), /* @__PURE__ */ React8.createElement(Viewport.View, {
+    id: "auth-code"
+  }, /* @__PURE__ */ React8.createElement(InvitationAuthCode, {
+    id: invitationId,
+    code: authCode ?? "never",
+    onCancel: onBack
+  })), /* @__PURE__ */ React8.createElement(Viewport.View, {
+    id: "qr-code"
+  }, /* @__PURE__ */ React8.createElement(InvitationQR, {
+    id: invitationId,
+    url,
+    onCancel: onBack
+  }))));
+};
+var InvitationQR = ({ id, url, onCancel }) => {
+  const { t } = useTranslation8("os");
+  const qrLabel = useId("members-container__qr-code");
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("p", {
+    className: "text-description"
+  }, t("qr code description", {
+    ns: SPACE_PLUGIN
+  })), /* @__PURE__ */ React8.createElement("div", {
+    role: "group",
+    className: "grid grid-cols-[1fr_min-content] mlb-2 gap-2"
+  }, /* @__PURE__ */ React8.createElement("div", {
+    role: "none",
+    className: "is-full aspect-square relative text-description"
+  }, /* @__PURE__ */ React8.createElement(QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    "aria-labelledby": qrLabel,
+    errorCorrectionLevel: "Q",
+    cutout: true
+  }, url ?? "never"), /* @__PURE__ */ React8.createElement(Centered, null, /* @__PURE__ */ React8.createElement(Emoji, {
+    text: emoji
+  }))), /* @__PURE__ */ React8.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr label")), /* @__PURE__ */ React8.createElement(Clipboard.Button, {
+    value: url ?? "never"
+  })), /* @__PURE__ */ React8.createElement(Button4, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")));
+};
+var InvitationAuthCode = ({ id, code, onCancel }) => {
+  const { t } = useTranslation8("os");
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("p", {
+    className: "text-description"
+  }, t("auth other device emoji message")), emoji && /* @__PURE__ */ React8.createElement(Emoji, {
+    text: emoji,
+    className: "mli-auto mlb-2 text-center"
+  }), /* @__PURE__ */ React8.createElement("p", {
+    className: "text-description"
+  }, t("auth code message")), /* @__PURE__ */ React8.createElement(AuthCode, {
+    code,
+    large: true,
+    classNames: "mli-auto mlb-2 text-center grow"
+  }), /* @__PURE__ */ React8.createElement(Button4, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")));
+};
+var InvitationComplete = ({ statusValue }) => {
+  return statusValue > 0 ? /* @__PURE__ */ React8.createElement(Check, {
+    className: mx4("m-1.5", getSize2(6))
+  }) : /* @__PURE__ */ React8.createElement(X, {
+    className: mx4("m-1.5", getSize2(6))
+  });
+};
+
 // packages/plugins/plugin-space/src/components/MenuFooter.tsx
 import { Planet } from "@phosphor-icons/react";
-import React11 from "react";
+import React9 from "react";
 import { getSpace as getSpace2 } from "@dxos/client/echo";
 import { useClient as useClient4 } from "@dxos/react-client";
-import { DropdownMenu, toLocalizedString as toLocalizedString2, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { DropdownMenu, toLocalizedString as toLocalizedString2, useTranslation as useTranslation9 } from "@dxos/react-ui";
 var MenuFooter = ({ object }) => {
-  const { t } = useTranslation11(SPACE_PLUGIN);
+  const { t } = useTranslation9(SPACE_PLUGIN);
   const client = useClient4();
   const space = getSpace2(object);
   const spaceName = space ? getSpaceDisplayName(space, {
     personal: client.spaces.default === space
   }) : "";
-  return space ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React11.createElement(DropdownMenu.GroupLabel, null, t("menu footer label")), /* @__PURE__ */ React11.createElement("dl", {
+  return space ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React9.createElement(DropdownMenu.GroupLabel, null, t("menu footer label")), /* @__PURE__ */ React9.createElement("dl", {
     className: "pis-2 mbe-2 text-xs grid grid-cols-[max-content_1fr] gap-2"
-  }, /* @__PURE__ */ React11.createElement("dt", {
+  }, /* @__PURE__ */ React9.createElement("dt", {
     className: "uppercase text-[.75em] tracking-wide font-medium mbs-px self-start"
-  }, t("location label")), /* @__PURE__ */ React11.createElement("dd", {
+  }, t("location label")), /* @__PURE__ */ React9.createElement("dd", {
     className: "line-clamp-3"
-  }, /* @__PURE__ */ React11.createElement(Planet, {
+  }, /* @__PURE__ */ React9.createElement(Planet, {
     className: "inline-block mie-1"
   }), toLocalizedString2(spaceName, t)))) : null;
 };
 
+// packages/plugins/plugin-space/src/components/ObjectSettingsContainer/ObjectSettingsContainer.tsx
+import React13, { useMemo as useMemo2 } from "react";
+import { Surface as Surface2 } from "@dxos/app-framework";
+import { Clipboard as Clipboard2 } from "@dxos/react-ui";
+import { StackItem as StackItem2 } from "@dxos/react-ui-stack";
+
+// packages/plugins/plugin-space/src/components/ObjectSettingsContainer/AdvancedObjectSettings.tsx
+import React11, { useCallback as useCallback7, useState as useState4 } from "react";
+import { ForeignKeySchema } from "@dxos/echo-schema";
+import { getMeta } from "@dxos/react-client/echo";
+import { IconButton as IconButton2, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { Form as Form3 } from "@dxos/react-ui-form";
+
+// packages/plugins/plugin-space/src/components/ObjectSettingsContainer/ForeignKeys.tsx
+import React10, { useCallback as useCallback6 } from "react";
+import { IconButton, List, ListItem, useTranslation as useTranslation10 } from "@dxos/react-ui";
+var ForeignKeys = ({ keys, onDelete }) => {
+  return /* @__PURE__ */ React10.createElement(List, {
+    classNames: "flex flex-col gap-2"
+  }, keys.map((key) => /* @__PURE__ */ React10.createElement(KeyItem, {
+    key: key.id,
+    forignKey: key,
+    onDelete
+  })));
+};
+var KeyItem = ({ forignKey, onDelete }) => {
+  const { t } = useTranslation10(SPACE_PLUGIN);
+  const handleDelete = useCallback6(() => {
+    onDelete?.(forignKey);
+  }, [
+    forignKey,
+    onDelete
+  ]);
+  return /* @__PURE__ */ React10.createElement(ListItem.Root, {
+    classNames: "px-2"
+  }, /* @__PURE__ */ React10.createElement(ListItem.Heading, {
+    classNames: "flex flex-col grow truncate"
+  }, /* @__PURE__ */ React10.createElement("div", null, forignKey.source), /* @__PURE__ */ React10.createElement("div", {
+    className: "text-description text-sm truncate"
+  }, forignKey.id)), /* @__PURE__ */ React10.createElement(ListItem.Endcap, null, /* @__PURE__ */ React10.createElement(IconButton, {
+    iconOnly: true,
+    icon: "ph--x--regular",
+    variant: "ghost",
+    label: t("delete key"),
+    onClick: handleDelete
+  })));
+};
+
+// packages/plugins/plugin-space/src/components/ObjectSettingsContainer/AdvancedObjectSettings.tsx
+var initialValues2 = {
+  source: "",
+  id: ""
+};
+var AdvancedObjectSettings = ({ object }) => {
+  const { t } = useTranslation11(SPACE_PLUGIN);
+  const [adding, setAdding] = useState4(false);
+  const keys = getMeta(object).keys;
+  const handleNew = useCallback7(() => setAdding(true), []);
+  const handleCancel = useCallback7(() => setAdding(false), []);
+  const handleSave = useCallback7((key) => {
+    const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
+    if (index === -1) {
+      keys.push(key);
+    }
+    setAdding(false);
+  }, [
+    keys
+  ]);
+  const handleDelete = useCallback7((key) => {
+    const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
+    if (index !== -1) {
+      keys.splice(index, 1);
+    }
+  }, [
+    keys
+  ]);
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("div", {
+    className: "p-2 flex flex-col gap-4"
+  }, /* @__PURE__ */ React11.createElement("h2", null, t("advanced settings label")), /* @__PURE__ */ React11.createElement("div", {
+    className: "flex items-center"
+  }, /* @__PURE__ */ React11.createElement("h3", {
+    className: "text-sm font-semibold"
+  }, t("foreign keys")), /* @__PURE__ */ React11.createElement("div", {
+    className: "grow"
+  }), /* @__PURE__ */ React11.createElement(IconButton2, {
+    classNames: adding && "invisible",
+    icon: "ph--plus--regular",
+    label: t("add key"),
+    onClick: handleNew
+  })), !adding && /* @__PURE__ */ React11.createElement(ForeignKeys, {
+    keys,
+    onDelete: handleDelete
+  })), adding && /* @__PURE__ */ React11.createElement(Form3, {
+    schema: ForeignKeySchema,
+    values: initialValues2,
+    onSave: handleSave,
+    onCancel: handleCancel
+  }));
+};
+
+// packages/plugins/plugin-space/src/components/ObjectSettingsContainer/BaseObjectSettings.tsx
+import React12, { useRef as useRef3 } from "react";
+import { Input, useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
+var BaseObjectSettings = ({ classNames, children, object }) => {
+  const { t } = useTranslation12(meta.id);
+  const inputRef = useRef3(null);
+  return /* @__PURE__ */ React12.createElement("form", {
+    className: mx5("flex flex-col p-2 gap-2", classNames)
+  }, /* @__PURE__ */ React12.createElement(Input.Root, null, /* @__PURE__ */ React12.createElement(Input.Label, null, t("name label")), /* @__PURE__ */ React12.createElement(Input.TextInput, {
+    ref: inputRef,
+    placeholder: t("name placeholder"),
+    value: object.name ?? "",
+    onChange: (event) => {
+      object.name = event.target.value;
+    },
+    onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        inputRef.current?.blur();
+      }
+    }
+  })), children);
+};
+
+// packages/plugins/plugin-space/src/components/ObjectSettingsContainer/ObjectSettingsContainer.tsx
+var ObjectSettingsContainer = ({ object, role }) => {
+  const data = useMemo2(() => ({
+    subject: object
+  }), [
+    object
+  ]);
+  return /* @__PURE__ */ React13.createElement(Clipboard2.Provider, null, /* @__PURE__ */ React13.createElement(StackItem2.Content, {
+    toolbar: false,
+    role
+  }, /* @__PURE__ */ React13.createElement("div", {
+    className: "flex flex-col overflow-y-auto divide-y divide-separator"
+  }, /* @__PURE__ */ React13.createElement(BaseObjectSettings, {
+    object
+  }, /* @__PURE__ */ React13.createElement(Surface2, {
+    role: "base-object-settings",
+    data
+  })), /* @__PURE__ */ React13.createElement(Surface2, {
+    role: "object-settings",
+    data
+  }), /* @__PURE__ */ React13.createElement(AdvancedObjectSettings, {
+    object
+  }))));
+};
+
 // packages/plugins/plugin-space/src/components/PersistenceStatus.tsx
 import { ArrowsCounterClockwise, CheckCircle as CheckCircle2, Warning } from "@phosphor-icons/react";
-import React12, { useEffect as useEffect2, useState as useState4 } from "react";
+import React14, { useEffect as useEffect2, useState as useState5 } from "react";
 import { debounce } from "@dxos/async";
-import { Tooltip, useTranslation as useTranslation12 } from "@dxos/react-ui";
-import { getSize as getSize2, mx as mx4, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
+import { Tooltip, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { getSize as getSize3, mx as mx6, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
 var Status;
 (function(Status2) {
   Status2[Status2["PERSISTED_LOCALLY"] = 0] = "PERSISTED_LOCALLY";
@@ -743,10 +998,10 @@ var Status;
   Status2[Status2["ERROR"] = 2] = "ERROR";
 })(Status || (Status = {}));
 var PersistenceStatus = ({ db }) => {
-  const { t } = useTranslation12(SPACE_PLUGIN);
-  const [displayMessage, setDisplayMessage] = useState4(false);
-  const [status, naturalSetStatus] = useState4(0);
-  const [prevStatus, setPrevStatus] = useState4(0);
+  const { t } = useTranslation13(SPACE_PLUGIN);
+  const [displayMessage, setDisplayMessage] = useState5(false);
+  const [status, naturalSetStatus] = useState5(0);
+  const [prevStatus, setPrevStatus] = useState5(0);
   const _setStatus = debounce(naturalSetStatus, 500);
   useEffect2(() => {
     setPrevStatus(status);
@@ -760,48 +1015,48 @@ var PersistenceStatus = ({ db }) => {
   ]);
   switch (status) {
     case 2:
-      return /* @__PURE__ */ React12.createElement("div", {
+      return /* @__PURE__ */ React14.createElement("div", {
         className: "flex items-center"
-      }, /* @__PURE__ */ React12.createElement(Warning, {
-        className: mx4(getSize2(4), "me-1")
-      }), /* @__PURE__ */ React12.createElement("span", {
-        className: mx4("text-sm", warningText)
+      }, /* @__PURE__ */ React14.createElement(Warning, {
+        className: mx6(getSize3(4), "me-1")
+      }), /* @__PURE__ */ React14.createElement("span", {
+        className: mx6("text-sm", warningText)
       }, t("persistence error label")));
     case 1:
-      return /* @__PURE__ */ React12.createElement("div", {
+      return /* @__PURE__ */ React14.createElement("div", {
         className: "flex items-center"
-      }, /* @__PURE__ */ React12.createElement(ArrowsCounterClockwise, {
-        className: mx4(getSize2(4), "me-1")
-      }), /* @__PURE__ */ React12.createElement("span", {
-        className: mx4("text-sm", staticPlaceholderText)
+      }, /* @__PURE__ */ React14.createElement(ArrowsCounterClockwise, {
+        className: mx6(getSize3(4), "me-1")
+      }), /* @__PURE__ */ React14.createElement("span", {
+        className: mx6("text-sm", staticPlaceholderText)
       }, t("persistence pending label")));
     case 0:
     default:
-      return /* @__PURE__ */ React12.createElement(Tooltip.Root, {
+      return /* @__PURE__ */ React14.createElement(Tooltip.Root, {
         delayDuration: 400
-      }, /* @__PURE__ */ React12.createElement(Tooltip.Trigger, {
+      }, /* @__PURE__ */ React14.createElement(Tooltip.Trigger, {
         role: "status",
         className: "flex items-center"
-      }, /* @__PURE__ */ React12.createElement(CheckCircle2, {
-        className: mx4(getSize2(4), "me-1")
-      }), displayMessage && /* @__PURE__ */ React12.createElement("span", {
-        className: mx4("text-sm", staticPlaceholderText)
-      }, t("persisted locally label"))), /* @__PURE__ */ React12.createElement(Tooltip.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip.Content, null, t("persisted locally message"), /* @__PURE__ */ React12.createElement(Tooltip.Arrow, null))));
+      }, /* @__PURE__ */ React14.createElement(CheckCircle2, {
+        className: mx6(getSize3(4), "me-1")
+      }), displayMessage && /* @__PURE__ */ React14.createElement("span", {
+        className: mx6("text-sm", staticPlaceholderText)
+      }, t("persisted locally label"))), /* @__PURE__ */ React14.createElement(Tooltip.Portal, null, /* @__PURE__ */ React14.createElement(Tooltip.Content, null, t("persisted locally message"), /* @__PURE__ */ React14.createElement(Tooltip.Arrow, null))));
   }
 };
 
 // packages/plugins/plugin-space/src/components/PopoverAddSpace.tsx
-import React13 from "react";
+import React15 from "react";
 import { createIntent as createIntent5, LayoutAction as LayoutAction5, useIntentDispatcher as useIntentDispatcher5 } from "@dxos/app-framework";
-import { IconButton as IconButton3, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { IconButton as IconButton3, useTranslation as useTranslation14 } from "@dxos/react-ui";
 var POPOVER_ADD_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
 var PopoverAddSpace = () => {
-  const { t } = useTranslation13(SPACE_PLUGIN);
+  const { t } = useTranslation14(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher5();
-  return /* @__PURE__ */ React13.createElement("div", {
+  return /* @__PURE__ */ React15.createElement("div", {
     role: "none",
     className: "grid grid-cols-1 gap-1 [&>button]:justify-start"
-  }, /* @__PURE__ */ React13.createElement(IconButton3, {
+  }, /* @__PURE__ */ React15.createElement(IconButton3, {
     variant: "ghost",
     label: t("create space label"),
     icon: "ph--plus--regular",
@@ -816,7 +1071,7 @@ var PopoverAddSpace = () => {
       }));
     },
     "data-testid": "spacePlugin.createSpace"
-  }), /* @__PURE__ */ React13.createElement(IconButton3, {
+  }), /* @__PURE__ */ React15.createElement(IconButton3, {
     variant: "ghost",
     label: t("join space label"),
     icon: "ph--sign-in--regular",
@@ -835,16 +1090,16 @@ var PopoverAddSpace = () => {
 };
 
 // packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx
-import React14, { useCallback as useCallback8, useRef as useRef3, useState as useState5 } from "react";
+import React16, { useCallback as useCallback8, useRef as useRef4, useState as useState6 } from "react";
 import { log as log2 } from "@dxos/log";
-import { Button as Button4, Input as Input2, Popover, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import { Button as Button5, Input as Input2, Popover, useTranslation as useTranslation15 } from "@dxos/react-ui";
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx";
 var POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
 var PopoverRenameObject = ({ object: obj }) => {
-  const { t } = useTranslation14(SPACE_PLUGIN);
-  const doneButton = useRef3(null);
+  const { t } = useTranslation15(SPACE_PLUGIN);
+  const doneButton = useRef4(null);
   const object = obj;
-  const [name, setName] = useState5(object.name || object.title || "");
+  const [name, setName] = useState6(object.name || object.title || "");
   const handleDone = useCallback8(() => {
     try {
       object.name = name;
@@ -866,23 +1121,23 @@ var PopoverRenameObject = ({ object: obj }) => {
     object,
     name
   ]);
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     role: "none",
     className: "p-1 flex gap-2"
-  }, /* @__PURE__ */ React14.createElement("div", {
+  }, /* @__PURE__ */ React16.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React14.createElement(Input2.Root, null, /* @__PURE__ */ React14.createElement(Input2.Label, {
+  }, /* @__PURE__ */ React16.createElement(Input2.Root, null, /* @__PURE__ */ React16.createElement(Input2.Label, {
     srOnly: true
-  }, t("object name label")), /* @__PURE__ */ React14.createElement(Input2.TextInput, {
+  }, t("object name label")), /* @__PURE__ */ React16.createElement(Input2.TextInput, {
     placeholder: t("object placeholder"),
     value: name,
     "data-testid": "spacePlugin.renameObject.input",
     onChange: ({ target: { value } }) => setName(value),
     onKeyDown: ({ key }) => key === "Enter" && doneButton.current?.click()
-  }))), /* @__PURE__ */ React14.createElement(Popover.Close, {
+  }))), /* @__PURE__ */ React16.createElement(Popover.Close, {
     asChild: true
-  }, /* @__PURE__ */ React14.createElement(Button4, {
+  }, /* @__PURE__ */ React16.createElement(Button5, {
     ref: doneButton,
     classNames: "self-stretch",
     onClick: handleDone
@@ -892,37 +1147,37 @@ var PopoverRenameObject = ({ object: obj }) => {
 };
 
 // packages/plugins/plugin-space/src/components/PopoverRenameSpace.tsx
-import React15, { useCallback as useCallback9, useRef as useRef4, useState as useState6 } from "react";
-import { Button as Button5, Input as Input3, Popover as Popover2, useTranslation as useTranslation15 } from "@dxos/react-ui";
+import React17, { useCallback as useCallback9, useRef as useRef5, useState as useState7 } from "react";
+import { Button as Button6, Input as Input3, Popover as Popover2, useTranslation as useTranslation16 } from "@dxos/react-ui";
 var POPOVER_RENAME_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
 var PopoverRenameSpace = ({ space }) => {
-  const { t } = useTranslation15(SPACE_PLUGIN);
-  const doneButton = useRef4(null);
-  const [name, setName] = useState6(space.properties.name ?? "");
+  const { t } = useTranslation16(SPACE_PLUGIN);
+  const doneButton = useRef5(null);
+  const [name, setName] = useState7(space.properties.name ?? "");
   const handleDone = useCallback9(() => {
     space.properties.name = name;
   }, [
     space,
     name
   ]);
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     role: "none",
     className: "p-1 flex gap-2"
-  }, /* @__PURE__ */ React15.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React15.createElement(Input3.Root, null, /* @__PURE__ */ React15.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React17.createElement(Input3.Root, null, /* @__PURE__ */ React17.createElement(Input3.Label, {
     srOnly: true
-  }, t("space name label")), /* @__PURE__ */ React15.createElement(Input3.TextInput, {
+  }, t("space name label")), /* @__PURE__ */ React17.createElement(Input3.TextInput, {
     defaultValue: space.properties.name ?? "",
     placeholder: t("unnamed space label"),
     onChange: ({ target: { value } }) => setName(value),
     // TODO(wittjosiah): Ideally this should access the popover context to close the popover.
     //   Currently this is not possible because Radix does not expose the popover context.
     onKeyDown: ({ key }) => key === "Enter" && doneButton.current?.click()
-  }))), /* @__PURE__ */ React15.createElement(Popover2.Close, {
+  }))), /* @__PURE__ */ React17.createElement(Popover2.Close, {
     asChild: true
-  }, /* @__PURE__ */ React15.createElement(Button5, {
+  }, /* @__PURE__ */ React17.createElement(Button6, {
     ref: doneButton,
     classNames: "self-stretch",
     onClick: handleDone
@@ -932,20 +1187,20 @@ var PopoverRenameSpace = ({ space }) => {
 };
 
 // packages/plugins/plugin-space/src/components/ShareSpaceButton.tsx
-import React16 from "react";
+import React18 from "react";
 import { createIntent as createIntent6, useIntentDispatcher as useIntentDispatcher6 } from "@dxos/app-framework";
-import { IconButton as IconButton4, useTranslation as useTranslation16 } from "@dxos/react-ui";
+import { IconButton as IconButton4, useTranslation as useTranslation17 } from "@dxos/react-ui";
 var ShareSpaceButton = ({ space }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher6();
-  return /* @__PURE__ */ React16.createElement(ShareSpaceButtonImpl, {
+  return /* @__PURE__ */ React18.createElement(ShareSpaceButtonImpl, {
     onClick: () => dispatch(createIntent6(SpaceAction.Share, {
       space
     }))
   });
 };
 var ShareSpaceButtonImpl = ({ onClick }) => {
-  const { t } = useTranslation16(SPACE_PLUGIN);
-  return /* @__PURE__ */ React16.createElement(IconButton4, {
+  const { t } = useTranslation17(SPACE_PLUGIN);
+  return /* @__PURE__ */ React18.createElement(IconButton4, {
     "data-testid": "spacePlugin.shareSpaceButton",
     icon: "ph--users--regular",
     label: t("share space label"),
@@ -954,20 +1209,20 @@ var ShareSpaceButtonImpl = ({ onClick }) => {
 };
 
 // packages/plugins/plugin-space/src/components/SpacePresence.tsx
-import React17, { useCallback as useCallback10, useEffect as useEffect4, useState as useState8 } from "react";
+import React19, { useCallback as useCallback10, useEffect as useEffect4, useState as useState9 } from "react";
 import { useAppGraph as useAppGraph2, useCapability } from "@dxos/app-framework";
 import { generateName } from "@dxos/display-name";
 import { PublicKey, useClient as useClient5 } from "@dxos/react-client";
-import { getSpace as getSpace3, useMembers, fullyQualifiedId as fullyQualifiedId2 } 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 useTranslation17, List as List2, ListItem as ListItem2, useDefaultValue } from "@dxos/react-ui";
+import { Avatar, Tooltip as Tooltip2, useTranslation as useTranslation18, List as List2, ListItem as ListItem2, useDefaultValue } from "@dxos/react-ui";
 import { AttentionGlyph, useAttended, useAttention } from "@dxos/react-ui-attention";
 import { ComplexMap, keyToFallback } from "@dxos/util";
 
 // packages/plugins/plugin-space/src/hooks/usePath.ts
-import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useEffect as useEffect3, useState as useState8 } from "react";
 var usePath = (graph, id, timeout) => {
-  const [pathState, setPathState] = useState7(id ? graph.getPath({
+  const [pathState, setPathState] = useState8(id ? graph.getPath({
     target: id
   }) : void 0);
   useEffect3(() => {
@@ -1011,7 +1266,7 @@ var SpacePresence = ({ object, spaceKey }) => {
   const identity = useIdentity();
   const space = spaceKey ? client.spaces.get(spaceKey) : getSpace3(object);
   const spaceMembers = useMembers(space?.key);
-  const [_moment, setMoment] = useState8(Date.now());
+  const [_moment, setMoment] = useState9(Date.now());
   useEffect4(() => {
     const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
     return () => clearInterval(interval);
@@ -1023,7 +1278,7 @@ var SpacePresence = ({ object, spaceKey }) => {
   if (!identity || !spaceState || !space) {
     return null;
   }
-  const currentObjectViewers = spaceState.viewersByObject[fullyQualifiedId2(object)] ?? noViewers;
+  const currentObjectViewers = spaceState.viewersByObject[fullyQualifiedId3(object)] ?? noViewers;
   const membersForObject = spaceMembers.filter((member) => memberOnline(member) && memberIsNotSelf(member)).filter((member) => currentObjectViewers.has(member.identity.identityKey)).map((member) => {
     const objectView = currentObjectViewers.get(member.identity.identityKey);
     const lastSeen = objectView?.lastSeen ?? -Infinity;
@@ -1034,7 +1289,7 @@ var SpacePresence = ({ object, spaceKey }) => {
       lastSeen
     };
   }).toSorted((a, b) => a.lastSeen - b.lastSeen);
-  return /* @__PURE__ */ React17.createElement(FullPresence, {
+  return /* @__PURE__ */ React19.createElement(FullPresence, {
     members: membersForObject
   });
 };
@@ -1044,63 +1299,60 @@ var FullPresence = (props) => {
   if (members.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React17.createElement(AvatarGroup.Root, {
-    size,
-    classNames: "mbs-2 mie-4",
+  return /* @__PURE__ */ React19.createElement("div", {
+    className: "dx-avatar-group",
     "data-testid": "spacePlugin.presence"
-  }, members.slice(0, 3).map((member, i) => /* @__PURE__ */ React17.createElement(Tooltip2.Root, {
+  }, members.slice(0, 3).map((member, i) => /* @__PURE__ */ React19.createElement(Tooltip2.Root, {
     key: member.identity.identityKey.toHex()
-  }, /* @__PURE__ */ React17.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React17.createElement(PrensenceAvatar, {
+  }, /* @__PURE__ */ React19.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React19.createElement(PrensenceAvatar, {
     identity: member.identity,
-    group: true,
     match: member.currentlyAttended,
     index: members.length - i,
-    onClick: () => onMemberClick?.(member)
-  })), /* @__PURE__ */ React17.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React17.createElement(Tooltip2.Content, {
+    onClick: () => onMemberClick?.(member),
+    size
+  })), /* @__PURE__ */ React19.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React19.createElement(Tooltip2.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ React17.createElement("span", null, getName(member.identity)), /* @__PURE__ */ React17.createElement(Tooltip2.Arrow, null))))), members.length > 3 && /* @__PURE__ */ React17.createElement(Tooltip2.Root, null, /* @__PURE__ */ React17.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React17.createElement(AvatarGroupItem.Root, {
-    status: "inactive"
-  }, /* @__PURE__ */ React17.createElement(Avatar.Frame, {
+  }, /* @__PURE__ */ React19.createElement("span", null, getName(member.identity)), /* @__PURE__ */ React19.createElement(Tooltip2.Arrow, null))))), members.length > 3 && /* @__PURE__ */ React19.createElement(Tooltip2.Root, null, /* @__PURE__ */ React19.createElement(Tooltip2.Trigger, null, /* @__PURE__ */ React19.createElement(Avatar.Root, null, /* @__PURE__ */ React19.createElement(Avatar.Content, {
+    status: "inactive",
     style: {
       zIndex: members.length - 4
-    }
-  }, /* @__PURE__ */ React17.createElement(Avatar.Fallback, {
-    text: `+${members.length - 3}`
-  })))), /* @__PURE__ */ React17.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React17.createElement(Tooltip2.Content, {
+    },
+    fallback: `+${members.length - 3}`
+  }))), /* @__PURE__ */ React19.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React19.createElement(Tooltip2.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ React17.createElement(Tooltip2.Arrow, null), /* @__PURE__ */ React17.createElement(List2, {
+  }, /* @__PURE__ */ React19.createElement(Tooltip2.Arrow, null), /* @__PURE__ */ React19.createElement(List2, {
     classNames: "max-h-56 overflow-y-auto"
-  }, members.map((member) => /* @__PURE__ */ React17.createElement(ListItem2.Root, {
+  }, members.map((member) => /* @__PURE__ */ React19.createElement(ListItem2.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__ */ React17.createElement(PrensenceAvatar, {
+  }, /* @__PURE__ */ React19.createElement(PrensenceAvatar, {
     identity: member.identity,
+    size,
     showName: true,
     match: member.currentlyAttended
   }))))))));
 };
-var PrensenceAvatar = ({ identity, showName, match, group, index, onClick }) => {
-  const Root = group ? AvatarGroupItem.Root : Avatar.Root;
+var PrensenceAvatar = ({ identity, showName, match, index, onClick, size }) => {
   const status = match ? "current" : "active";
   const fallbackValue = keyToFallback(identity.identityKey);
-  return /* @__PURE__ */ React17.createElement(Root, {
+  return /* @__PURE__ */ React19.createElement(Avatar.Root, null, /* @__PURE__ */ React19.createElement(Avatar.Content, {
     status,
-    hue: identity.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React17.createElement(Avatar.Frame, {
+    hue: identity.profile?.data?.hue || fallbackValue.hue,
     "data-testid": "spacePlugin.presence.member",
     "data-status": status,
+    size,
+    classNames: "mbs-2 mie-4",
     ...index ? {
       style: {
         zIndex: index
       }
     } : {},
-    onClick: () => onClick?.()
-  }, /* @__PURE__ */ React17.createElement(Avatar.Fallback, {
-    text: identity.profile?.data?.emoji || fallbackValue.emoji
-  })), showName && /* @__PURE__ */ React17.createElement(Avatar.Label, {
-    classNames: "text-sm truncate pli-2"
+    onClick: () => onClick?.(),
+    fallback: identity.profile?.data?.emoji || fallbackValue.emoji
+  }), /* @__PURE__ */ React19.createElement(Avatar.Label, {
+    classNames: showName ? "text-sm truncate pli-2" : "sr-only"
   }, getName(identity)));
 };
 var SmallPresenceLive = ({ id, open, viewers }) => {
@@ -1115,7 +1367,7 @@ var SmallPresenceLive = ({ id, open, viewers }) => {
     const moment = Date.now();
     return Array.from(viewers2.values()).filter((viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION);
   };
-  const [activeViewers, setActiveViewers] = useState8(viewers ? getActiveViewers(viewers) : []);
+  const [activeViewers, setActiveViewers] = useState9(viewers ? getActiveViewers(viewers) : []);
   useEffect4(() => {
     if (viewers) {
       setActiveViewers(getActiveViewers(viewers));
@@ -1127,62 +1379,59 @@ var SmallPresenceLive = ({ id, open, viewers }) => {
   }, [
     viewers
   ]);
-  return /* @__PURE__ */ React17.createElement(SmallPresence, {
+  return /* @__PURE__ */ React19.createElement(SmallPresence, {
     count: activeViewers.length,
     attended: isAttended,
     containsAttended
   });
 };
 var SmallPresence = ({ count = 0, attended, containsAttended }) => {
-  const { t } = useTranslation17(SPACE_PLUGIN);
-  return /* @__PURE__ */ React17.createElement(Tooltip2.Root, null, /* @__PURE__ */ React17.createElement(Tooltip2.Trigger, {
+  const { t } = useTranslation18(SPACE_PLUGIN);
+  return /* @__PURE__ */ React19.createElement(Tooltip2.Root, null, /* @__PURE__ */ React19.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(AttentionGlyph, {
+  }, /* @__PURE__ */ React19.createElement(AttentionGlyph, {
     attended,
     containsAttended,
     presence: count > 1 ? "many" : count === 1 ? "one" : "none",
     classNames: "self-center mie-1"
-  })), /* @__PURE__ */ React17.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React17.createElement(Tooltip2.Content, {
+  })), /* @__PURE__ */ React19.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React19.createElement(Tooltip2.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ React17.createElement("span", null, t("presence label", {
+  }, /* @__PURE__ */ React19.createElement("span", null, t("presence label", {
     count
-  })), /* @__PURE__ */ React17.createElement(Tooltip2.Arrow, null))));
+  })), /* @__PURE__ */ React19.createElement(Tooltip2.Arrow, null))));
 };
 
 // packages/plugins/plugin-space/src/components/SpacePluginSettings.tsx
-import React18 from "react";
-import { Input as Input4, useTranslation as useTranslation18 } from "@dxos/react-ui";
+import React20 from "react";
+import { Input as Input4, useTranslation as useTranslation19 } from "@dxos/react-ui";
 import { DeprecatedFormContainer, DeprecatedFormInput } from "@dxos/react-ui-form";
 var SpacePluginSettings = ({ settings }) => {
-  const { t } = useTranslation18(SPACE_PLUGIN);
-  return /* @__PURE__ */ React18.createElement(DeprecatedFormContainer, null, /* @__PURE__ */ React18.createElement(DeprecatedFormInput, {
+  const { t } = useTranslation19(SPACE_PLUGIN);
+  return /* @__PURE__ */ React20.createElement(DeprecatedFormContainer, null, /* @__PURE__ */ React20.createElement(DeprecatedFormInput, {
     label: t("show hidden spaces label")
-  }, /* @__PURE__ */ React18.createElement(Input4.Switch, {
+  }, /* @__PURE__ */ React20.createElement(Input4.Switch, {
     checked: settings.showHidden,
     onCheckedChange: (checked) => settings.showHidden = !!checked
   })));
 };
 
-// packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsPanel.tsx
-import React19, { useCallback as useCallback11, useState as useState9 } from "react";
+// packages/plugins/plugin-space/src/components/SpaceSettings/SpacePropertiesForm.tsx
+import React21, { useCallback as useCallback11, useMemo as useMemo3, useState as useState10 } from "react";
 import { log as log3 } from "@dxos/log";
 import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
-import { useClient as useClient6 } from "@dxos/react-client";
-import { Input as Input5, Toolbar, useTranslation as useTranslation19 } from "@dxos/react-ui";
-import { DeprecatedFormContainer as DeprecatedFormContainer2, DeprecatedFormInput as DeprecatedFormInput2 } from "@dxos/react-ui-form";
+import { Input as Input5, useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { Form as Form4, ControlItem, ControlItemInput } from "@dxos/react-ui-form";
 import { HuePicker, IconPicker } from "@dxos/react-ui-pickers";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsPanel.tsx";
-var SpaceSettingsPanel = ({ space }) => {
-  const { t } = useTranslation19(SPACE_PLUGIN);
-  const client = useClient6();
-  const edgeEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.echoReplicator);
-  const [edgeReplication, setEdgeReplication] = useState9(space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED);
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpacePropertiesForm.tsx";
+var SpacePropertiesForm = ({ space }) => {
+  const { t } = useTranslation20(SPACE_PLUGIN);
+  const [edgeReplication, setEdgeReplication] = useState10(space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED);
   const toggleEdgeReplication = useCallback11(async (next) => {
     setEdgeReplication(next);
     await space?.internal.setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED).catch((err) => {
       log3.catch(err, void 0, {
         F: __dxlog_file5,
-        L: 36,
+        L: 34,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1191,155 +1440,172 @@ var SpaceSettingsPanel = ({ space }) => {
   }, [
     space
   ]);
-  return /* @__PURE__ */ React19.createElement(DeprecatedFormContainer2, null, /* @__PURE__ */ React19.createElement(DeprecatedFormInput2, {
-    label: t("name label")
-  }, /* @__PURE__ */ React19.createElement(Input5.TextInput, {
-    placeholder: t("unnamed space label"),
-    value: space.properties.name ?? "",
-    onChange: (event) => {
-      space.properties.name = event.target.value;
+  const handleSave = useCallback11((properties) => {
+    void toggleEdgeReplication(properties.edgeReplication);
+    if (properties.name !== space.properties.name) {
+      space.properties.name = properties.name;
     }
-  })), /* @__PURE__ */ React19.createElement(DeprecatedFormInput2, {
-    label: t("icon label")
-  }, /* @__PURE__ */ React19.createElement(Toolbar.Root, null, /* @__PURE__ */ React19.createElement(IconPicker, {
-    value: space.properties.icon,
-    onChange: (nextIcon) => space.properties.icon = nextIcon,
-    onReset: () => {
-      space.properties.icon = void 0;
+    if (properties.icon !== space.properties.icon) {
+      space.properties.icon = properties.icon;
     }
-  }))), /* @__PURE__ */ React19.createElement(DeprecatedFormInput2, {
-    label: t("hue label")
-  }, /* @__PURE__ */ React19.createElement(Toolbar.Root, null, /* @__PURE__ */ React19.createElement(HuePicker, {
-    value: space.properties.hue,
-    onChange: (nextHue) => space.properties.hue = nextHue,
-    onReset: () => {
-      space.properties.hue = void 0;
+    if (properties.hue !== space.properties.hue) {
+      space.properties.hue = properties.hue;
     }
-  }))), edgeEnabled && /* @__PURE__ */ React19.createElement(DeprecatedFormInput2, {
-    label: t("edge replication label")
-  }, /* @__PURE__ */ React19.createElement(Input5.Switch, {
-    checked: edgeReplication,
-    onCheckedChange: toggleEdgeReplication
-  })));
+  }, [
+    space,
+    toggleEdgeReplication
+  ]);
+  const values = useMemo3(() => ({
+    name: space.properties.name,
+    icon: space.properties.icon,
+    hue: space.properties.hue,
+    edgeReplication
+  }), [
+    space.properties.name,
+    space.properties.icon,
+    space.properties.hue,
+    edgeReplication
+  ]);
+  const customElements = useMemo3(() => ({
+    name: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback11(({ target: { value } }) => onValueChange(type, value), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React21.createElement(ControlItemInput, {
+        title: label,
+        description: t("display name description")
+      }, /* @__PURE__ */ React21.createElement(Input5.TextInput, {
+        value: getValue(),
+        onChange: handleChange,
+        placeholder: t("display name input placeholder"),
+        classNames: "min-is-64"
+      }));
+    },
+    icon: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback11((nextEmoji) => onValueChange(type, nextEmoji), [
+        onValueChange,
+        type
+      ]);
+      const handleEmojiReset = useCallback11(() => onValueChange(type, void 0), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React21.createElement(ControlItem, {
+        title: label,
+        description: t("icon description")
+      }, /* @__PURE__ */ React21.createElement(IconPicker, {
+        value: getValue(),
+        onChange: handleChange,
+        onReset: handleEmojiReset,
+        classNames: "justify-self-end",
+        iconSize: 5
+      }));
+    },
+    hue: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback11((nextHue) => onValueChange(type, nextHue), [
+        onValueChange,
+        type
+      ]);
+      const handleHueReset = useCallback11(() => onValueChange(type, void 0), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React21.createElement(ControlItem, {
+        title: label,
+        description: t("hue description")
+      }, /* @__PURE__ */ React21.createElement(HuePicker, {
+        value: getValue(),
+        onChange: handleChange,
+        onReset: handleHueReset,
+        classNames: "[--hue-preview-size:1.25rem] justify-self-end"
+      }));
+    },
+    edgeReplication: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback11((checked) => onValueChange(type, checked), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React21.createElement(ControlItemInput, {
+        title: label,
+        description: t("edge replication description")
+      }, /* @__PURE__ */ React21.createElement(Input5.Switch, {
+        checked: getValue(),
+        onCheckedChange: handleChange,
+        classNames: "justify-self-end"
+      }));
+    }
+  }), [
+    t
+  ]);
+  return /* @__PURE__ */ React21.createElement(Form4, {
+    schema: SpaceForm,
+    values,
+    autoSave: true,
+    onSave: handleSave,
+    Custom: customElements,
+    classNames: 'p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+  });
 };
 
-// packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsDialog.tsx
-import React20, { useMemo, useState as useState10 } from "react";
-import { Surface as Surface2, useCapabilities as useCapabilities2 } from "@dxos/app-framework";
-import { useClient as useClient7 } from "@dxos/react-client";
-import { Button as Button6, Clipboard, Dialog as Dialog4, Icon as Icon4, toLocalizedString as toLocalizedString3, useTranslation as useTranslation20 } from "@dxos/react-ui";
-import { Tabs } from "@dxos/react-ui-tabs";
-import { SpacePanel } from "@dxos/shell/react";
+// packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsContainer.tsx
+import React22, { useCallback as useCallback12, useMemo as useMemo4 } from "react";
+import { Surface as Surface3, useCapabilities as useCapabilities2, useCapability as useCapability2 } from "@dxos/app-framework";
+import { toLocalizedString as toLocalizedString3, useTranslation as useTranslation21 } from "@dxos/react-ui";
+import { ControlSectionHeading } from "@dxos/react-ui-form";
+import { Accordion } from "@dxos/react-ui-list";
+import { StackItem as StackItem3 } from "@dxos/react-ui-stack";
+import { byPosition } from "@dxos/util";
 var SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
-var SpaceSettingsDialog = ({ space, target, createInvitationUrl, initialTab = "members", namesCache }) => {
-  const { t } = useTranslation20(SPACE_PLUGIN);
-  const client = useClient7();
-  const [tabsActivePart, setTabsActivePart] = useState10("list");
-  const [selected, setSelected] = useState10(initialTab);
-  const locked = space.properties[COMPOSER_SPACE_LOCK];
-  const name = getSpaceDisplayName(space, {
-    personal: client.spaces.default === space,
-    namesCache
-  });
-  const panels = useCapabilities2(SpaceCapabilities.SettingsPanel);
-  const data = useMemo(() => ({
+var SpaceSettingsContainer = ({ space }) => {
+  const { t } = useTranslation21(SPACE_PLUGIN);
+  const state = useCapability2(SpaceCapabilities.MutableState);
+  const items = useCapabilities2(SpaceCapabilities.SettingsSection).toSorted(byPosition);
+  const data = useMemo4(() => ({
     subject: space
   }), [
     space
   ]);
-  return (
-    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
-    //  Consider factoring it out to the tabs package.
-    /* @__PURE__ */ React20.createElement(Dialog4.Content, {
-      classNames: "p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
-    }, /* @__PURE__ */ React20.createElement("div", {
-      role: "none",
-      className: "flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4"
-    }, /* @__PURE__ */ React20.createElement(Dialog4.Title, {
-      onClick: () => setTabsActivePart("list"),
-      "aria-description": t("click to return to tablist description"),
-      classNames: "flex cursor-pointer items-center group/title"
-    }, /* @__PURE__ */ React20.createElement(Icon4, {
-      icon: "ph--caret-left--regular",
-      size: 4,
-      classNames: [
-        "@md:hidden",
-        tabsActivePart === "list" && "invisible"
-      ]
-    }), /* @__PURE__ */ React20.createElement("span", {
-      className: tabsActivePart !== "list" ? "group-hover/title:underline @md:group-hover/title:no-underline underline-offset-4 decoration-1" : ""
-    }, toLocalizedString3(name, t))), /* @__PURE__ */ React20.createElement(Dialog4.Close, {
-      asChild: true
-    }, /* @__PURE__ */ React20.createElement(Button6, {
-      density: "fine",
-      variant: "ghost",
-      autoFocus: true
-    }, /* @__PURE__ */ React20.createElement(Icon4, {
-      icon: "ph--x--regular",
-      size: 4
-    })))), /* @__PURE__ */ React20.createElement(Tabs.Root, {
-      orientation: "vertical",
-      value: selected,
-      onValueChange: setSelected,
-      activePart: tabsActivePart,
-      onActivePartChange: setTabsActivePart,
-      classNames: "flex flex-col flex-1 mbs-2"
-    }, /* @__PURE__ */ React20.createElement(Tabs.Viewport, {
-      classNames: "flex-1 min-bs-0"
-    }, /* @__PURE__ */ React20.createElement("div", {
-      role: "none",
-      className: "overflow-y-auto pli-3 @md:pis-2 @md:pie-0 mbe-4 border-r border-separator"
-    }, /* @__PURE__ */ React20.createElement(Tabs.Tablist, {
-      classNames: "flex flex-col max-bs-none min-is-[200px] gap-4 overflow-y-auto"
-    }, /* @__PURE__ */ React20.createElement("div", {
-      role: "none",
-      className: "flex flex-col ml-1"
-    }, /* @__PURE__ */ React20.createElement(Tabs.Tab, {
-      value: "settings"
-    }, t("settings tab label")), /* @__PURE__ */ React20.createElement(Tabs.Tab, {
-      value: "members",
-      disabled: locked
-    }, t("members tab label")), panels.map((panel) => /* @__PURE__ */ React20.createElement(Tabs.Tab, {
-      key: panel.id,
-      value: panel.id
-    }, toLocalizedString3(panel.label, t)))))), /* @__PURE__ */ React20.createElement(Tabs.Tabpanel, {
-      value: "settings",
-      classNames: "pli-3 @md:pli-5 max-bs-dvh overflow-y-auto"
-    }, /* @__PURE__ */ React20.createElement(SpaceSettingsPanel, {
-      space
-    })), /* @__PURE__ */ React20.createElement(Tabs.Tabpanel, {
-      value: "members",
-      classNames: "pli-3 @md:pli-5 max-bs-dvh overflow-y-auto"
-    }, /* @__PURE__ */ React20.createElement(Clipboard.Provider, null, /* @__PURE__ */ React20.createElement(SpacePanel, {
-      space,
-      hideHeading: true,
-      target,
-      createInvitationUrl
-    }))), panels.map((panel) => /* @__PURE__ */ React20.createElement(Tabs.Tabpanel, {
-      key: panel.id,
-      value: panel.id,
-      classNames: "pli-3 @md:pli-5 max-bs-dvh overflow-y-auto"
-    }, /* @__PURE__ */ React20.createElement(Surface2, {
-      role: `space-settings--${panel.id}`,
-      data
-    }))))))
-  );
+  const handleOpenSectionChange = useCallback12((sections) => {
+    state.spaceSettingsOpenSections.splice(0, state.spaceSettingsOpenSections.length, ...sections);
+  }, [
+    state
+  ]);
+  return /* @__PURE__ */ React22.createElement(StackItem3.Content, {
+    classNames: "p-2 block overflow-y-auto"
+  }, /* @__PURE__ */ React22.createElement(Accordion.Root, {
+    items,
+    value: state.spaceSettingsOpenSections,
+    onValueChange: handleOpenSectionChange
+  }, ({ items: items2 }) => /* @__PURE__ */ React22.createElement(React22.Fragment, null, items2.map((item) => /* @__PURE__ */ React22.createElement(Accordion.Item, {
+    key: item.id,
+    item,
+    classNames: "container-max-width"
+  }, /* @__PURE__ */ React22.createElement(Accordion.ItemHeader, {
+    classNames: "pie-6",
+    asChild: true
+  }, /* @__PURE__ */ React22.createElement(ControlSectionHeading, {
+    title: toLocalizedString3(item.label, t)
+  })), /* @__PURE__ */ React22.createElement(Accordion.ItemBody, null, /* @__PURE__ */ React22.createElement(Surface3, {
+    role: `space-settings--${item.id}`,
+    data
+  })))))));
 };
 
 // packages/plugins/plugin-space/src/components/SyncStatus/InlineSyncStatus.tsx
-import React21, { useEffect as useEffect6, useState as useState12 } from "react";
+import React23, { useEffect as useEffect6, useState as useState12 } from "react";
 import { useAppGraph as useAppGraph3 } from "@dxos/app-framework";
 import { QueryEdgeStatusResponse } from "@dxos/protocols/proto/dxos/client/services";
 import { EdgeReplicationSetting as EdgeReplicationSetting2 } from "@dxos/protocols/proto/dxos/echo/metadata";
-import { useClient as useClient9 } from "@dxos/react-client";
-import { Tooltip as Tooltip3, useTranslation as useTranslation21 } from "@dxos/react-ui";
+import { useClient as useClient7 } from "@dxos/react-client";
+import { Tooltip as Tooltip3, useTranslation as useTranslation22 } from "@dxos/react-ui";
 import { AttentionGlyph as AttentionGlyph2, useAttended as useAttended2, useAttention as useAttention2 } from "@dxos/react-ui-attention";
 
 // packages/plugins/plugin-space/src/components/SyncStatus/sync-state.ts
 import { useEffect as useEffect5, useState as useState11 } from "react";
 import { Context } from "@dxos/context";
 import { EdgeService } from "@dxos/protocols";
-import { useClient as useClient8 } from "@dxos/react-client";
+import { useClient as useClient6 } from "@dxos/react-client";
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/sync-state.ts";
 var createEmptyEdgeSyncState = () => ({
   missingOnLocal: 0,
@@ -1360,7 +1626,7 @@ var getSyncSummary = (syncMap) => {
 };
 var isEdgePeerId = (peerId, spaceId) => peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
 var useSyncState = () => {
-  const client = useClient8();
+  const client = useClient6();
   const [spaceState, setSpaceState] = useState11({});
   useEffect5(() => {
     const ctx = new Context(void 0, {
@@ -1420,7 +1686,7 @@ var useSpaceSyncState = (space) => {
 // packages/plugins/plugin-space/src/components/SyncStatus/InlineSyncStatus.tsx
 var useEdgeStatus = () => {
   const [status, setStatus] = useState12(QueryEdgeStatusResponse.EdgeStatus.NOT_CONNECTED);
-  const client = useClient9();
+  const client = useClient7();
   useEffect6(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status: status2 }) => {
       setStatus(status2);
@@ -1431,7 +1697,7 @@ var useEdgeStatus = () => {
   return status;
 };
 var InlineSyncStatus = ({ space, open }) => {
-  const { t } = useTranslation21(SPACE_PLUGIN);
+  const { t } = useTranslation22(SPACE_PLUGIN);
   const id = space.id;
   const { hasAttention, isAncestor, isRelated } = useAttention2(id);
   const isAttended = hasAttention || isAncestor || isRelated;
@@ -1444,33 +1710,33 @@ var InlineSyncStatus = ({ space, open }) => {
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting2.ENABLED;
   const syncState = useSpaceSyncState(space);
   const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
-  return /* @__PURE__ */ React21.createElement(Tooltip3.Root, null, /* @__PURE__ */ React21.createElement(Tooltip3.Trigger, {
+  return /* @__PURE__ */ React23.createElement(Tooltip3.Root, null, /* @__PURE__ */ React23.createElement(Tooltip3.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React21.createElement(AttentionGlyph2, {
+  }, /* @__PURE__ */ React23.createElement(AttentionGlyph2, {
     syncing,
     attended: isAttended,
     containsAttended,
     classNames: "self-center mie-1"
-  })), /* @__PURE__ */ React21.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React21.createElement(Tooltip3.Content, {
+  })), /* @__PURE__ */ React23.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React23.createElement(Tooltip3.Content, {
     side: "bottom",
     classNames: "z-[70]"
-  }, /* @__PURE__ */ React21.createElement("span", null, t("syncing label")), /* @__PURE__ */ React21.createElement(Tooltip3.Arrow, null))));
+  }, /* @__PURE__ */ React23.createElement("span", null, t("syncing label")), /* @__PURE__ */ React23.createElement(Tooltip3.Arrow, null))));
 };
 
 // packages/plugins/plugin-space/src/components/SyncStatus/SyncStatus.tsx
-import React23, { useCallback as useCallback12, useEffect as useEffect8, useState as useState14 } from "react";
+import React25, { useCallback as useCallback13, useEffect as useEffect8, useState as useState14 } from "react";
 import { StatusBar } from "@dxos/plugin-status-bar";
-import { useClient as useClient11 } from "@dxos/react-client";
-import { Icon as Icon6, Input as Input6, Popover as Popover3, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import { useClient as useClient9 } from "@dxos/react-client";
+import { Icon as Icon6, Input as Input6, Popover as Popover3, useTranslation as useTranslation24 } from "@dxos/react-ui";
 import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx8 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-space/src/components/SyncStatus/Space.tsx
-import React22, { useEffect as useEffect7, useState as useState13 } from "react";
-import { useClient as useClient10 } from "@dxos/react-client";
+import React24, { useEffect as useEffect7, useState as useState13 } from "react";
+import { useClient as useClient8 } from "@dxos/react-client";
 import { useSpace } from "@dxos/react-client/echo";
-import { Icon as Icon5, toLocalizedString as toLocalizedString4, useTranslation as useTranslation22 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { Icon as Icon5, toLocalizedString as toLocalizedString4, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 var SYNC_STALLED_TIMEOUT = 5e3;
 var styles = {
   barBg: "bg-neutral-50 dark:bg-green-900 text-black",
@@ -1501,8 +1767,8 @@ var useActive = (count) => {
   return active;
 };
 var SpaceRowContainer = ({ spaceId, state }) => {
-  const { t } = useTranslation22(SPACE_PLUGIN);
-  const client = useClient10();
+  const { t } = useTranslation23(SPACE_PLUGIN);
+  const client = useClient8();
   const space = useSpace(spaceId);
   if (!space) {
     return null;
@@ -1510,7 +1776,7 @@ var SpaceRowContainer = ({ spaceId, state }) => {
   const spaceName = toLocalizedString4(getSpaceDisplayName(space, {
     personal: space === client.spaces.default
   }), t);
-  return /* @__PURE__ */ React22.createElement(SpaceRow, {
+  return /* @__PURE__ */ React24.createElement(SpaceRow, {
     spaceId,
     spaceName,
     state
@@ -1519,19 +1785,19 @@ var SpaceRowContainer = ({ spaceId, state }) => {
 var SpaceRow = ({ spaceId, spaceName, state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote } }) => {
   const downActive = useActive(localDocumentCount);
   const upActive = useActive(remoteDocumentCount);
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     className: "flex items-center mx-0.5 gap-0.5 cursor-pointer",
     title: spaceId,
     onClick: () => {
       void navigator.clipboard.writeText(spaceId);
     }
-  }, /* @__PURE__ */ React22.createElement("span", {
+  }, /* @__PURE__ */ React24.createElement("span", {
     className: "is-1/2 truncate"
-  }, spaceName), /* @__PURE__ */ React22.createElement(Icon5, {
+  }, spaceName), /* @__PURE__ */ React24.createElement(Icon5, {
     icon: "ph--arrow-fat-line-left--regular",
     size: 3,
-    classNames: mx5(downActive && "animate-[pulse_1s_infinite]")
-  }), /* @__PURE__ */ React22.createElement(Candle, {
+    classNames: mx7(downActive && "animate-[pulse_1s_infinite]")
+  }), /* @__PURE__ */ React24.createElement(Candle, {
     up: {
       count: remoteDocumentCount,
       total: remoteDocumentCount + missingOnRemote
@@ -1541,37 +1807,37 @@ var SpaceRow = ({ spaceId, spaceName, state: { localDocumentCount, remoteDocumen
       total: localDocumentCount + missingOnLocal
     },
     title: spaceId
-  }), /* @__PURE__ */ React22.createElement(Icon5, {
+  }), /* @__PURE__ */ React24.createElement(Icon5, {
     icon: "ph--arrow-fat-line-right--regular",
     size: 3,
-    classNames: mx5(upActive && "animate-[pulse_1s_step-start_infinite]")
+    classNames: mx7(upActive && "animate-[pulse_1s_step-start_infinite]")
   }));
 };
 var Candle = ({ classNames, up, down }) => {
-  return /* @__PURE__ */ React22.createElement("div", {
-    className: mx5("grid grid-cols-[1fr_2rem_1fr] w-full h-3", classNames)
-  }, /* @__PURE__ */ React22.createElement(Bar, {
+  return /* @__PURE__ */ React24.createElement("div", {
+    className: mx7("grid grid-cols-[1fr_2rem_1fr] w-full h-3", classNames)
+  }, /* @__PURE__ */ React24.createElement(Bar, {
     classNames: "justify-end",
     ...up
-  }), /* @__PURE__ */ React22.createElement("div", {
+  }), /* @__PURE__ */ React24.createElement("div", {
     className: "relative"
-  }, /* @__PURE__ */ React22.createElement("div", {
-    className: mx5("absolute inset-0 flex items-center justify-center text-xs", styles.barBg)
-  }, up.total)), /* @__PURE__ */ React22.createElement(Bar, down));
+  }, /* @__PURE__ */ React24.createElement("div", {
+    className: mx7("absolute inset-0 flex items-center justify-center text-xs", styles.barBg)
+  }, up.total)), /* @__PURE__ */ React24.createElement(Bar, down));
 };
 var Bar = ({ classNames, count, total }) => {
   let p = count / total * 100;
   if (count < total) {
     p = Math.min(p, 95);
   }
-  return /* @__PURE__ */ React22.createElement("div", {
-    className: mx5("relative flex w-full", styles.barBg, classNames)
-  }, /* @__PURE__ */ React22.createElement("div", {
-    className: mx5("shrink-0", styles.barFg),
+  return /* @__PURE__ */ React24.createElement("div", {
+    className: mx7("relative flex w-full", styles.barBg, classNames)
+  }, /* @__PURE__ */ React24.createElement("div", {
+    className: mx7("shrink-0", styles.barFg),
     style: {
       width: `${p}%`
     }
-  }), count !== total && /* @__PURE__ */ React22.createElement("div", {
+  }), count !== total && /* @__PURE__ */ React24.createElement("div", {
     className: "absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs"
   }, count));
 };
@@ -1580,7 +1846,7 @@ var Bar = ({ classNames, count, total }) => {
 import { Context as Context2 } from "@dxos/context";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts";
 var createClientSaveTracker = (client, cb) => {
-  const unsubscribeCallbacks = {};
+  const CleanupFns = {};
   const state = {};
   const install = (spaces) => {
     for (const space of spaces) {
@@ -1588,7 +1854,7 @@ var createClientSaveTracker = (client, cb) => {
         continue;
       }
       state[space.id] = "saved";
-      unsubscribeCallbacks[space.id] = createSpaceSaveTracker(space, (s) => {
+      CleanupFns[space.id] = createSpaceSaveTracker(space, (s) => {
         state[space.id] = s;
         cb(Object.values(state).some((s2) => s2 === "saving") ? "saving" : "saved");
       });
@@ -1599,7 +1865,7 @@ var createClientSaveTracker = (client, cb) => {
   });
   install(client.spaces.get());
   return () => {
-    for (const unsubscribe of Object.values(unsubscribeCallbacks)) {
+    for (const unsubscribe of Object.values(CleanupFns)) {
       unsubscribe();
     }
   };
@@ -1669,7 +1935,7 @@ var getIcon = (status) => {
 
 // packages/plugins/plugin-space/src/components/SyncStatus/SyncStatus.tsx
 var SyncStatus = () => {
-  const client = useClient11();
+  const client = useClient9();
   const state = useSyncState();
   const [saved, setSaved] = useState14(true);
   useEffect8(() => {
@@ -1677,13 +1943,13 @@ var SyncStatus = () => {
       setSaved(state2 === "saved");
     });
   }, []);
-  return /* @__PURE__ */ React23.createElement(SyncStatusIndicator, {
+  return /* @__PURE__ */ React25.createElement(SyncStatusIndicator, {
     state,
     saved
   });
 };
 var SyncStatusIndicator = ({ state, saved }) => {
-  const { t } = useTranslation23(SPACE_PLUGIN);
+  const { t } = useTranslation24(SPACE_PLUGIN);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
@@ -1710,66 +1976,64 @@ var SyncStatusIndicator = ({ state, saved }) => {
     needsToDownload
   ]);
   const title = t(`${status} label`);
-  const icon = /* @__PURE__ */ React23.createElement(Icon6, {
+  const icon = /* @__PURE__ */ React25.createElement(Icon6, {
     icon: getIcon(status),
     size: 4,
     classNames
   });
   if (offline) {
-    return /* @__PURE__ */ React23.createElement(StatusBar.Item, {
+    return /* @__PURE__ */ React25.createElement(StatusBar.Item, {
       title
     }, icon);
   } else {
-    return /* @__PURE__ */ React23.createElement(Popover3.Root, null, /* @__PURE__ */ React23.createElement(Popover3.Trigger, {
+    return /* @__PURE__ */ React25.createElement(Popover3.Root, null, /* @__PURE__ */ React25.createElement(Popover3.Trigger, {
       asChild: true
-    }, /* @__PURE__ */ React23.createElement(StatusBar.Button, {
+    }, /* @__PURE__ */ React25.createElement(StatusBar.Button, {
       title
-    }, icon)), /* @__PURE__ */ React23.createElement(Popover3.Portal, null, /* @__PURE__ */ React23.createElement(Popover3.Content, null, /* @__PURE__ */ React23.createElement(SyncStatusDetail, {
+    }, icon)), /* @__PURE__ */ React25.createElement(Popover3.Portal, null, /* @__PURE__ */ React25.createElement(Popover3.Content, null, /* @__PURE__ */ React25.createElement(SyncStatusDetail, {
       state,
       summary,
       debug: false
-    }), /* @__PURE__ */ React23.createElement(Popover3.Arrow, null))));
+    }), /* @__PURE__ */ React25.createElement(Popover3.Arrow, null))));
   }
 };
 var SyncStatusDetail = ({ classNames, state, summary, debug }) => {
   const [showAll, setShowAll] = useState14(false);
-  const { t } = useTranslation23(SPACE_PLUGIN);
+  const { t } = useTranslation24(SPACE_PLUGIN);
   const entries = Object.entries(state).filter(([_, value]) => showAll || value.missingOnLocal + value.missingOnRemote > 0).toSorted(([a], [b]) => a < b ? -1 : a > b ? 1 : 0);
-  const handleCheckedChange = useCallback12((state2) => setShowAll(state2), [
+  const handleCheckedChange = useCallback13((state2) => setShowAll(state2), [
     setShowAll
   ]);
-  return /* @__PURE__ */ React23.createElement("div", {
-    className: mx6("flex flex-col gap-3 p-2 text-xs min-w-96", classNames)
-  }, /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React25.createElement("div", {
+    className: mx8("flex flex-col gap-3 p-2 text-xs min-w-[400px]", classNames)
+  }, /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: "flex items-center"
-  }, /* @__PURE__ */ React23.createElement("h1", {
+  }, /* @__PURE__ */ React25.createElement("h1", {
     className: "flex-1"
-  }, t("sync status title")), /* @__PURE__ */ React23.createElement("div", {
+  }, t("sync status title")), /* @__PURE__ */ React25.createElement("div", {
     className: "flex items-center gap-2"
-  }, /* @__PURE__ */ React23.createElement(Input6.Root, null, /* @__PURE__ */ React23.createElement(Input6.Label, {
+  }, /* @__PURE__ */ React25.createElement(Input6.Root, null, /* @__PURE__ */ React25.createElement(Input6.Label, {
     classNames: "text-xs"
-  }, t("show all label")), /* @__PURE__ */ React23.createElement(Input6.Checkbox, {
+  }, t("show all label")), /* @__PURE__ */ React25.createElement(Input6.Checkbox, {
     checked: showAll,
     onCheckedChange: handleCheckedChange
-  })))), /* @__PURE__ */ React23.createElement("div", {
+  })))), /* @__PURE__ */ React25.createElement("div", {
     className: "flex flex-col gap-2"
-  }, entries.length === 0 && /* @__PURE__ */ React23.createElement("div", {
+  }, entries.length === 0 && /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: "flex justify-center"
-  }, t("no sync status label")), entries.map(([spaceId, state2]) => /* @__PURE__ */ React23.createElement(SpaceRowContainer, {
+  }, t("no sync status label")), entries.map(([spaceId, state2]) => /* @__PURE__ */ React25.createElement(SpaceRowContainer, {
     key: spaceId,
     spaceId,
     state: state2
-  }))), debug && /* @__PURE__ */ React23.createElement(SyntaxHighlighter, {
+  }))), debug && /* @__PURE__ */ React25.createElement(SyntaxHighlighter, {
     language: "json"
   }, JSON.stringify(summary, null, 2)));
 };
 
 export {
-  AdvancedObjectSettings,
   AwaitingObject,
-  BaseObjectSettings,
   CREATE_OBJECT_DIALOG,
   CreateObjectDialog,
   CREATE_SPACE_DIALOG,
@@ -1778,7 +2042,9 @@ export {
   CollectionSection,
   JOIN_DIALOG,
   JoinDialog,
+  MembersContainer,
   MenuFooter,
+  ObjectSettingsContainer,
   PersistenceStatus,
   POPOVER_ADD_SPACE,
   PopoverAddSpace,
@@ -1793,9 +2059,9 @@ export {
   SmallPresenceLive,
   SmallPresence,
   SpacePluginSettings,
-  SpaceSettingsPanel,
+  SpacePropertiesForm,
   SPACE_SETTINGS_DIALOG,
-  SpaceSettingsDialog,
+  SpaceSettingsContainer,
   InlineSyncStatus,
   SyncStatus,
   SyncStatusIndicator,
@@ -1812,4 +2078,4 @@ export {
   SpaceState,
   SpacesReady
 };
-//# sourceMappingURL=chunk-4CTAR2NQ.mjs.map
+//# sourceMappingURL=chunk-JZXWPMLA.mjs.map