@dxos/plugin-space 0.7.5-labs.a279d8c → 0.7.5-labs.d453967

package/dist/lib/browser/{chunk-PDJ4MLA4.mjs → chunk-DIBLC24B.mjs}

@@ -1,18 +1,18 @@
 import {
   SpaceCapabilities
-} from "./chunk-UH5P4UL3.mjs";
+} from "./chunk-RLZQJD47.mjs";
 import {
   COMPOSER_SPACE_LOCK,
   getSpaceDisplayName
-} from "./chunk-ZBKFJNHH.mjs";
+} from "./chunk-ZL5ZFGBK.mjs";
 import {
   CollectionType,
   SpaceAction,
   SpaceForm
-} from "./chunk-HCXWKGTE.mjs";
+} from "./chunk-XPZ6IIXF.mjs";
 import {
   SPACE_PLUGIN
-} from "./chunk-SOXNANA6.mjs";
+} from "./chunk-PQXZCNAU.mjs";
 
 // packages/plugins/plugin-space/src/components/AdvancedObjectSettings/AdvancedObjectSettings.tsx
 import React2, { useCallback as useCallback2, useState } from "react";
@@ -111,7 +111,7 @@ var AdvancedObjectSettings = ({ object }) => {
 // 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 { NavigationAction, useIntentDispatcher, createIntent, useCapability, Capabilities } from "@dxos/app-framework";
+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";
@@ -124,7 +124,7 @@ var AwaitingObject = ({ id }) => {
   const [found, setFound] = useState2(false);
   const { t } = useTranslation3(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const location = useCapability(Capabilities.Location);
+  const layout = useLayout();
   const client = useClient();
   const objects = useQuery(client.spaces, Filter.all());
   useEffect(() => {
@@ -141,14 +141,14 @@ var AwaitingObject = ({ id }) => {
   useEffect(() => {
     if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
       setFound(true);
-      if (location.active.solo?.[0].id === id) {
+      if (layout.active.includes(id)) {
         setOpen(false);
       }
     }
   }, [
     id,
     objects,
-    location
+    layout
   ]);
   const handleClose = useCallback3(async () => dispatch(createIntent(SpaceAction.WaitForObject, {
     id: void 0
@@ -156,12 +156,11 @@ var AwaitingObject = ({ id }) => {
     dispatch
   ]);
   const handleNavigate = useCallback3(() => {
-    void dispatch(createIntent(NavigationAction.Open, {
-      activeParts: {
-        main: [
-          id
-        ]
-      }
+    void dispatch(createIntent(LayoutAction.Open, {
+      part: "main",
+      subject: [
+        id
+      ]
     }));
     void handleClose();
   }, [
@@ -207,14 +206,21 @@ 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();
+      }
     }
   })));
 };
@@ -222,20 +228,20 @@ var BaseObjectSettings = ({ object }) => {
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx
 import { pipe } from "effect";
 import React6, { useCallback as useCallback5, useRef } from "react";
-import { chain, createIntent as createIntent2, NavigationAction as NavigationAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { chain, createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { useClient as useClient2 } from "@dxos/react-client";
-import { getSpace, isReactiveObject, isSpace as isSpace2, useSpaces } from "@dxos/react-client/echo";
+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";
 
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectPanel.tsx
 import React5, { useCallback as useCallback4, useMemo, useState as useState3 } from "react";
 import { Surface, isSurfaceAvailable, usePluginManager } from "@dxos/app-framework";
 import { getObjectAnnotation, S } from "@dxos/echo-schema";
-import { isSpace } from "@dxos/react-client/echo";
-import { Icon, IconButton as IconButton3, Input as Input2, toLocalizedString, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Form as Form2, InputHeader } from "@dxos/react-ui-form";
+import { Icon, toLocalizedString, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Form as Form2 } from "@dxos/react-ui-form";
 import { SearchList } from "@dxos/react-ui-searchlist";
-import { nonNullable } from "@dxos/util";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+import { isNonNullable } from "@dxos/util";
 var useInputSurfaceLookup = (baseData) => {
   const pluginManager = usePluginManager();
   return useCallback4(({ prop, schema, inputProps }) => {
@@ -260,14 +266,22 @@ var useInputSurfaceLookup = (baseData) => {
     baseData
   ]);
 };
-var CreateObjectPanel = ({ schemas, spaces, typename: initialTypename, target: initialTarget, name: initialName, defaultSpaceId, resolve, onCreateObject }) => {
+var CreateObjectPanel = ({ classNames, schemas, 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 schema = schemas.find((schema2) => getObjectAnnotation(schema2)?.typename === typename);
-  const options = schemas.map(getObjectAnnotation).filter(nonNullable);
-  const handleClearSchema = useCallback4(() => setTypename(void 0), []);
-  const handleClearTarget = useCallback4(() => setTarget(void 0), []);
+  const options = schemas.map(getObjectAnnotation).filter(isNonNullable).sort((a, b) => {
+    const nameA = t("typename label", {
+      ns: a.typename,
+      defaultValue: a.typename
+    });
+    const nameB = t("typename label", {
+      ns: b.typename,
+      defaultValue: b.typename
+    });
+    return nameA.localeCompare(nameB);
+  });
   const handleCreateObject = useCallback4(async (props) => {
     if (!schema || !target) {
       return;
@@ -291,55 +305,6 @@ var CreateObjectPanel = ({ schemas, spaces, typename: initialTypename, target: i
     resolve,
     typename
   ]);
-  const schemaInput = /* @__PURE__ */ React5.createElement(SearchList.Root, {
-    label: t("schema input label"),
-    classNames: "flex flex-col grow overflow-hidden"
-  }, /* @__PURE__ */ React5.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, {
-    classNames: "max-bs-[24rem] overflow-auto"
-  }, options.map((option) => /* @__PURE__ */ React5.createElement(SearchList.Item, {
-    key: option.typename,
-    value: t("typename label", {
-      ns: option.typename,
-      defaultValue: option.typename
-    }),
-    onSelect: () => setTypename(option.typename),
-    classNames: "flex items-center gap-2"
-  }, /* @__PURE__ */ React5.createElement("span", {
-    className: "flex gap-2 items-center grow truncate"
-  }, /* @__PURE__ */ React5.createElement(Icon, {
-    icon: resolve?.(option.typename).icon ?? "ph--placeholder--regular",
-    size: 5
-  }), t("typename label", {
-    ns: option.typename,
-    defaultValue: option.typename
-  }))))));
-  const spaceInput = /* @__PURE__ */ React5.createElement(SearchList.Root, {
-    label: t("space input label"),
-    classNames: "flex flex-col grow overflow-hidden"
-  }, /* @__PURE__ */ React5.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, {
-    classNames: "max-bs-[24rem] overflow-auto"
-  }, spaces.map((space) => /* @__PURE__ */ React5.createElement(SearchList.Item, {
-    key: space.id,
-    value: toLocalizedString(getSpaceDisplayName(space, {
-      personal: space.id === defaultSpaceId
-    }), t),
-    onSelect: () => setTarget(space),
-    classNames: "flex items-center gap-2"
-  }, /* @__PURE__ */ React5.createElement("span", {
-    className: "grow truncate"
-  }, toLocalizedString(getSpaceDisplayName(space, {
-    personal: space.id === defaultSpaceId
-  }), t))))));
   const inputSurfaceLookup = useInputSurfaceLookup({
     target
   });
@@ -348,6 +313,7 @@ var CreateObjectPanel = ({ schemas, spaces, typename: initialTypename, target: i
       name: S.optional(S.String)
     });
     return /* @__PURE__ */ React5.createElement(Form2, {
+      classNames: "!p-0",
       autoFocus: true,
       values: {
         name: initialName
@@ -364,39 +330,79 @@ var CreateObjectPanel = ({ schemas, spaces, typename: initialTypename, target: i
   ]);
   return /* @__PURE__ */ React5.createElement("div", {
     role: "form",
-    className: "flex flex-col gap-2"
-  }, target && /* @__PURE__ */ React5.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ React5.createElement(Input2.Root, null, /* @__PURE__ */ React5.createElement(InputHeader, null, /* @__PURE__ */ React5.createElement(Input2.Label, null, t(isSpace(target) ? "creating in space label" : "creating in collection label"))), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "flex gap-2"
-  }, /* @__PURE__ */ React5.createElement(Input2.TextInput, {
-    disabled: true,
-    value: isSpace(target) ? toLocalizedString(getSpaceDisplayName(target, {
-      personal: target.id === defaultSpaceId
-    }), t) : target.name || t("unnamed collection label")
-  }), /* @__PURE__ */ React5.createElement(IconButton3, {
-    iconOnly: true,
-    icon: "ph--x--regular",
-    label: t("clear input label"),
-    onClick: handleClearTarget
-  })))), schema && /* @__PURE__ */ React5.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ React5.createElement(Input2.Root, null, /* @__PURE__ */ React5.createElement(InputHeader, null, /* @__PURE__ */ React5.createElement(Input2.Label, null, t("creating object type label"))), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "flex gap-2"
-  }, /* @__PURE__ */ React5.createElement(Input2.TextInput, {
-    disabled: true,
+    className: mx2("flex flex-col gap-2", classNames)
+  }, !schema ? /* @__PURE__ */ React5.createElement(SelectSchema, {
+    options,
+    resolve,
+    onChange: setTypename
+  }) : !target ? /* @__PURE__ */ React5.createElement(SelectSpace, {
+    spaces,
+    defaultSpaceId,
+    onChange: setTarget
+  }) : form);
+};
+var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
+  const { t } = useTranslation5(SPACE_PLUGIN);
+  return /* @__PURE__ */ React5.createElement(SearchList.Root, {
+    label: t("space input label"),
+    classNames: "flex flex-col grow overflow-hidden"
+  }, /* @__PURE__ */ React5.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, {
+    classNames: "max-bs-[24rem] overflow-auto"
+  }, spaces.sort((a, b) => {
+    const aName = toLocalizedString(getSpaceDisplayName(a, {
+      personal: a.id === defaultSpaceId
+    }), t);
+    const bName = toLocalizedString(getSpaceDisplayName(b, {
+      personal: b.id === defaultSpaceId
+    }), t);
+    return aName.localeCompare(bName);
+  }).map((space) => /* @__PURE__ */ React5.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", {
+    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, {
+    label: t("schema input label"),
+    classNames: "flex flex-col grow overflow-hidden"
+  }, /* @__PURE__ */ React5.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, {
+    classNames: "max-bs-[24rem] overflow-auto"
+  }, options.map((option) => /* @__PURE__ */ React5.createElement(SearchList.Item, {
+    key: option.typename,
     value: t("typename label", {
-      ns: schema.typename,
-      defaultValue: schema.typename
-    })
-  }), /* @__PURE__ */ React5.createElement(IconButton3, {
-    iconOnly: true,
-    icon: "ph--x--regular",
-    label: t("clear input label"),
-    onClick: handleClearSchema
-  })))), !schema ? schemaInput : !target ? spaceInput : form);
+      ns: option.typename,
+      defaultValue: option.typename
+    }),
+    onSelect: () => onChange(option.typename),
+    classNames: "flex items-center gap-2"
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "flex gap-2 items-center grow truncate"
+  }, /* @__PURE__ */ React5.createElement(Icon, {
+    icon: resolve?.(option.typename).icon ?? "ph--placeholder--regular",
+    size: 5
+  }), t("typename label", {
+    ns: option.typename,
+    defaultValue: option.typename
+  }))))));
 };
 
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx
@@ -408,13 +414,13 @@ var CreateObjectDialog = ({ schemas, target, typename, name, shouldNavigate: _sh
   const spaces = useSpaces();
   const { dispatchPromise: dispatch } = useIntentDispatcher2();
   const handleCreateObject = useCallback5(async ({ schema, target: _target, data }) => {
-    const target2 = isSpace2(_target) ? _target.properties[CollectionType.typename]?.target : _target;
+    const target2 = isSpace(_target) ? _target.properties[CollectionType.typename]?.target : _target;
     const createObjectIntent = resolve?.(schema.typename)?.createObject;
     if (!createObjectIntent || !target2) {
       return;
     }
     closeRef.current?.click();
-    const space = isSpace2(target2) ? target2 : getSpace(target2);
+    const space = isSpace(target2) ? target2 : getSpace(target2);
     const result = await dispatch(createObjectIntent(data, {
       space
     }));
@@ -426,7 +432,9 @@ var CreateObjectDialog = ({ schemas, target, typename, name, shouldNavigate: _sh
       });
       const shouldNavigate = _shouldNavigate ?? (() => true);
       if (shouldNavigate(object)) {
-        await dispatch(pipe(addObjectIntent, chain(NavigationAction2.Open, {})));
+        await dispatch(pipe(addObjectIntent, chain(LayoutAction2.Open, {
+          part: "main"
+        })));
       } else {
         await dispatch(addObjectIntent);
       }
@@ -439,7 +447,7 @@ var CreateObjectDialog = ({ schemas, target, typename, name, shouldNavigate: _sh
     // 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, {
-      classNames: "p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
+      classNames: "p-0 bs-content max-bs-full md:max-is-[40rem] overflow-hidden"
     }, /* @__PURE__ */ React6.createElement("div", {
       role: "none",
       className: "flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4"
@@ -453,9 +461,8 @@ var CreateObjectDialog = ({ schemas, target, typename, name, shouldNavigate: _sh
     }, /* @__PURE__ */ React6.createElement(Icon2, {
       icon: "ph--x--regular",
       size: 4
-    })))), /* @__PURE__ */ React6.createElement("div", {
-      className: "p-4"
-    }, /* @__PURE__ */ React6.createElement(CreateObjectPanel, {
+    })))), /* @__PURE__ */ React6.createElement(CreateObjectPanel, {
+      classNames: "p-4",
       schemas,
       spaces,
       target,
@@ -464,13 +471,14 @@ var CreateObjectDialog = ({ schemas, target, typename, name, shouldNavigate: _sh
       defaultSpaceId: client.spaces.default.id,
       resolve,
       onCreateObject: handleCreateObject
-    })))
+    }))
   );
 };
 
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateSpaceDialog.tsx
+import { Effect } from "effect";
 import React7, { useCallback as useCallback6, useRef as useRef2 } from "react";
-import { createIntent as createIntent3, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+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";
 var CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
@@ -480,15 +488,19 @@ var initialValues2 = {
 var CreateSpaceDialog = () => {
   const closeRef = useRef2(null);
   const { t } = useTranslation7(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher3();
+  const { dispatch } = useIntentDispatcher3();
   const handleCreateSpace = useCallback6(async (data) => {
-    const result = await dispatch(createIntent3(SpaceAction.Create, data));
-    const target = result.data?.space;
-    if (target) {
-      await dispatch(createIntent3(SpaceAction.OpenCreateObject, {
-        target
+    const program = Effect.gen(function* () {
+      const { space } = yield* dispatch(createIntent3(SpaceAction.Create, data));
+      yield* dispatch(createIntent3(LayoutAction3.SwitchWorkspace, {
+        part: "workspace",
+        subject: space.id
       }));
-    }
+      yield* dispatch(createIntent3(SpaceAction.OpenCreateObject, {
+        target: space
+      }));
+    });
+    await Effect.runPromise(program);
   }, [
     dispatch
   ]);
@@ -496,7 +508,7 @@ var CreateSpaceDialog = () => {
     // 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, {
-      classNames: "p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
+      classNames: "p-0 bs-content min-bs-[16rem] max-bs-full md:max-is-[32rem] overflow-hidden"
     }, /* @__PURE__ */ React7.createElement("div", {
       role: "none",
       className: "flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4"
@@ -514,6 +526,8 @@ var CreateSpaceDialog = () => {
       className: "p-4"
     }, /* @__PURE__ */ React7.createElement(Form3, {
       testId: "create-space-form",
+      classNames: "!p-0",
+      autoFocus: true,
       values: initialValues2,
       schema: SpaceForm,
       onSave: handleCreateSpace
@@ -524,16 +538,16 @@ var CreateSpaceDialog = () => {
 // packages/plugins/plugin-space/src/components/CollectionMain.tsx
 import React8 from "react";
 import { useTranslation as useTranslation8 } from "@dxos/react-ui";
-import { baseSurface, descriptionText, mx as mx2 } from "@dxos/react-ui-theme";
+import { baseSurface, descriptionText, mx as mx3 } from "@dxos/react-ui-theme";
 var CollectionMain = ({ collection }) => {
   const { t } = useTranslation8(SPACE_PLUGIN);
   return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
-    className: mx2(baseSurface, "min-bs-screen is-full flex items-center justify-center p-8"),
+    className: mx3(baseSurface, "min-bs-screen is-full flex items-center justify-center p-8"),
     "data-testid": "composer.firstRunMessage"
   }, /* @__PURE__ */ React8.createElement("p", {
     role: "alert",
-    className: mx2(descriptionText, "border border-dashed border-neutral-400/50 rounded-lg p-8 font-normal text-lg max-is-[24rem] break-words")
+    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")));
 };
 
@@ -551,37 +565,62 @@ var CollectionSection = ({ collection }) => {
 
 // packages/plugins/plugin-space/src/components/JoinDialog.tsx
 import React10, { useCallback as useCallback7 } from "react";
-import { createIntent as createIntent4, LayoutAction, NavigationAction as NavigationAction3, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
-import { useGraph } from "@dxos/plugin-graph";
+import { createIntent as createIntent4, LayoutAction as LayoutAction4, useAppGraph, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
+import { log } from "@dxos/log";
 import { ObservabilityAction } from "@dxos/plugin-observability/types";
-import { useSpaces as useSpaces2 } from "@dxos/react-client/echo";
-import { Dialog as Dialog3, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { useClient as useClient3 } from "@dxos/react-client";
+import { Dialog as Dialog3 } from "@dxos/react-ui";
 import { JoinPanel } from "@dxos/shell/react";
+var __dxlog_file = "/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 { t } = useTranslation10(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher4();
-  const spaces = useSpaces2();
-  const { graph } = useGraph();
+  const client = useClient3();
+  const { graph } = useAppGraph();
   const handleDone = useCallback7(async (result) => {
     if (result?.spaceKey) {
       await Promise.all([
-        dispatch(createIntent4(LayoutAction.SetLayout, {
-          element: "toast",
+        dispatch(createIntent4(LayoutAction4.AddToast, {
+          part: "toast",
           subject: {
             id: `${SPACE_PLUGIN}/join-success`,
             duration: 5e3,
-            title: t("join success label"),
-            closeLabel: t("dismiss label")
+            title: [
+              "join success label",
+              {
+                ns: SPACE_PLUGIN
+              }
+            ],
+            closeLabel: [
+              "dismiss label",
+              {
+                ns: SPACE_PLUGIN
+              }
+            ]
           }
         })),
-        dispatch(createIntent4(LayoutAction.SetLayout, {
-          element: "dialog",
-          state: false
+        dispatch(createIntent4(LayoutAction4.UpdateDialog, {
+          part: "dialog",
+          options: {
+            state: false
+          }
         }))
       ]);
     }
-    const space = spaces.find(({ key }) => result?.spaceKey?.equals(key));
+    const space = result?.spaceKey ? client.spaces.get(result.spaceKey) : void 0;
+    if (!space) {
+      log.warn("Space not found", result?.spaceKey, {
+        F: __dxlog_file,
+        L: 56,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return;
+    }
+    await dispatch(createIntent4(LayoutAction4.SwitchWorkspace, {
+      part: "workspace",
+      subject: space.id
+    }));
     const target = result?.target || (navigableCollections ? space?.id : void 0);
     if (target) {
       await graph.waitForPath({
@@ -589,15 +628,15 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
       }).catch(() => {
       });
       await Promise.all([
-        dispatch(createIntent4(NavigationAction3.Open, {
-          activeParts: {
-            main: [
-              target
-            ]
-          }
+        dispatch(createIntent4(LayoutAction4.Open, {
+          part: "main",
+          subject: [
+            target
+          ]
         })),
-        dispatch(createIntent4(NavigationAction3.Expose, {
-          id: target
+        dispatch(createIntent4(LayoutAction4.Expose, {
+          part: "navigation",
+          subject: target
         }))
       ]);
     }
@@ -612,7 +651,8 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
     }
   }, [
     dispatch,
-    spaces
+    client,
+    graph
   ]);
   return /* @__PURE__ */ React10.createElement(Dialog3.Content, null, /* @__PURE__ */ React10.createElement(JoinPanel, {
     ...props,
@@ -630,11 +670,11 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
 import { Planet } from "@phosphor-icons/react";
 import React11 from "react";
 import { getSpace as getSpace2 } from "@dxos/client/echo";
-import { useClient as useClient3 } from "@dxos/react-client";
-import { DropdownMenu, toLocalizedString as toLocalizedString2, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { DropdownMenu, toLocalizedString as toLocalizedString2, useTranslation as useTranslation10 } from "@dxos/react-ui";
 var MenuFooter = ({ object }) => {
-  const { t } = useTranslation11(SPACE_PLUGIN);
-  const client = useClient3();
+  const { t } = useTranslation10(SPACE_PLUGIN);
+  const client = useClient4();
   const space = getSpace2(object);
   const spaceName = space ? getSpaceDisplayName(space, {
     personal: client.spaces.default === space
@@ -654,8 +694,8 @@ var MenuFooter = ({ object }) => {
 import { ArrowsCounterClockwise, CheckCircle as CheckCircle2, Warning } from "@phosphor-icons/react";
 import React12, { useEffect as useEffect2, useState as useState4 } from "react";
 import { debounce } from "@dxos/async";
-import { Tooltip, useTranslation as useTranslation12 } from "@dxos/react-ui";
-import { getSize as getSize2, mx as mx3, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
+import { Tooltip, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { getSize as getSize2, mx as mx4, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
 var Status;
 (function(Status2) {
   Status2[Status2["PERSISTED_LOCALLY"] = 0] = "PERSISTED_LOCALLY";
@@ -663,7 +703,7 @@ var Status;
   Status2[Status2["ERROR"] = 2] = "ERROR";
 })(Status || (Status = {}));
 var PersistenceStatus = ({ db }) => {
-  const { t } = useTranslation12(SPACE_PLUGIN);
+  const { t } = useTranslation11(SPACE_PLUGIN);
   const [displayMessage, setDisplayMessage] = useState4(false);
   const [status, naturalSetStatus] = useState4(0);
   const [prevStatus, setPrevStatus] = useState4(0);
@@ -683,17 +723,17 @@ var PersistenceStatus = ({ db }) => {
       return /* @__PURE__ */ React12.createElement("div", {
         className: "flex items-center"
       }, /* @__PURE__ */ React12.createElement(Warning, {
-        className: mx3(getSize2(4), "me-1")
+        className: mx4(getSize2(4), "me-1")
       }), /* @__PURE__ */ React12.createElement("span", {
-        className: mx3("text-sm", warningText)
+        className: mx4("text-sm", warningText)
       }, t("persistence error label")));
     case 1:
       return /* @__PURE__ */ React12.createElement("div", {
         className: "flex items-center"
       }, /* @__PURE__ */ React12.createElement(ArrowsCounterClockwise, {
-        className: mx3(getSize2(4), "me-1")
+        className: mx4(getSize2(4), "me-1")
       }), /* @__PURE__ */ React12.createElement("span", {
-        className: mx3("text-sm", staticPlaceholderText)
+        className: mx4("text-sm", staticPlaceholderText)
       }, t("persistence pending label")));
     case 0:
     default:
@@ -703,21 +743,21 @@ var PersistenceStatus = ({ db }) => {
         role: "status",
         className: "flex items-center"
       }, /* @__PURE__ */ React12.createElement(CheckCircle2, {
-        className: mx3(getSize2(4), "me-1")
+        className: mx4(getSize2(4), "me-1")
       }), displayMessage && /* @__PURE__ */ React12.createElement("span", {
-        className: mx3("text-sm", staticPlaceholderText)
+        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))));
   }
 };
 
 // packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx
 import React13, { useCallback as useCallback8, useRef as useRef3, useState as useState5 } from "react";
-import { log } from "@dxos/log";
-import { Button as Button4, Input as Input3, Popover, useTranslation as useTranslation13 } from "@dxos/react-ui";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx";
+import { log as log2 } from "@dxos/log";
+import { Button as Button4, Input as Input2, Popover, useTranslation as useTranslation12 } from "@dxos/react-ui";
+var __dxlog_file2 = "/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 } = useTranslation13(SPACE_PLUGIN);
+  const { t } = useTranslation12(SPACE_PLUGIN);
   const doneButton = useRef3(null);
   const object = obj;
   const [name, setName] = useState5(object.name || object.title || "");
@@ -728,10 +768,10 @@ var PopoverRenameObject = ({ object: obj }) => {
       try {
         object.title = name;
       } catch (err) {
-        log.error("Failed to rename object", {
+        log2.error("Failed to rename object", {
           err
         }, {
-          F: __dxlog_file,
+          F: __dxlog_file2,
           L: 30,
           S: void 0,
           C: (f, a) => f(...a)
@@ -748,9 +788,9 @@ var PopoverRenameObject = ({ object: obj }) => {
   }, /* @__PURE__ */ React13.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React13.createElement(Input3.Root, null, /* @__PURE__ */ React13.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React13.createElement(Input2.Root, null, /* @__PURE__ */ React13.createElement(Input2.Label, {
     srOnly: true
-  }, t("object name label")), /* @__PURE__ */ React13.createElement(Input3.TextInput, {
+  }, t("object name label")), /* @__PURE__ */ React13.createElement(Input2.TextInput, {
     placeholder: t("object title placeholder"),
     value: name,
     "data-testid": "spacePlugin.renameObject.input",
@@ -769,10 +809,10 @@ var PopoverRenameObject = ({ object: obj }) => {
 
 // packages/plugins/plugin-space/src/components/PopoverRenameSpace.tsx
 import React14, { useCallback as useCallback9, useRef as useRef4, useState as useState6 } from "react";
-import { Button as Button5, Input as Input4, Popover as Popover2, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import { Button as Button5, Input as Input3, Popover as Popover2, useTranslation as useTranslation13 } from "@dxos/react-ui";
 var POPOVER_RENAME_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
 var PopoverRenameSpace = ({ space }) => {
-  const { t } = useTranslation14(SPACE_PLUGIN);
+  const { t } = useTranslation13(SPACE_PLUGIN);
   const doneButton = useRef4(null);
   const [name, setName] = useState6(space.properties.name ?? "");
   const handleDone = useCallback9(() => {
@@ -787,9 +827,9 @@ var PopoverRenameSpace = ({ space }) => {
   }, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React14.createElement(Input4.Root, null, /* @__PURE__ */ React14.createElement(Input4.Label, {
+  }, /* @__PURE__ */ React14.createElement(Input3.Root, null, /* @__PURE__ */ React14.createElement(Input3.Label, {
     srOnly: true
-  }, t("space name label")), /* @__PURE__ */ React14.createElement(Input4.TextInput, {
+  }, t("space name label")), /* @__PURE__ */ React14.createElement(Input3.TextInput, {
     defaultValue: space.properties.name ?? "",
     placeholder: t("unnamed space label"),
     onChange: ({ target: { value } }) => setName(value),
@@ -810,7 +850,7 @@ var PopoverRenameSpace = ({ space }) => {
 // packages/plugins/plugin-space/src/components/ShareSpaceButton.tsx
 import React15 from "react";
 import { createIntent as createIntent5, useIntentDispatcher as useIntentDispatcher5 } from "@dxos/app-framework";
-import { IconButton as IconButton4, useTranslation as useTranslation15 } from "@dxos/react-ui";
+import { IconButton as IconButton3, useTranslation as useTranslation14 } from "@dxos/react-ui";
 var ShareSpaceButton = ({ space }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher5();
   return /* @__PURE__ */ React15.createElement(ShareSpaceButtonImpl, {
@@ -820,8 +860,8 @@ var ShareSpaceButton = ({ space }) => {
   });
 };
 var ShareSpaceButtonImpl = ({ onClick }) => {
-  const { t } = useTranslation15(SPACE_PLUGIN);
-  return /* @__PURE__ */ React15.createElement(IconButton4, {
+  const { t } = useTranslation14(SPACE_PLUGIN);
+  return /* @__PURE__ */ React15.createElement(IconButton3, {
     "data-testid": "spacePlugin.shareSpaceButton",
     icon: "ph--users--regular",
     label: t("share space label"),
@@ -831,27 +871,26 @@ var ShareSpaceButtonImpl = ({ onClick }) => {
 
 // packages/plugins/plugin-space/src/components/SpacePresence.tsx
 import React16, { useCallback as useCallback10, useEffect as useEffect4, useState as useState8 } from "react";
-import { useCapability as useCapability2 } from "@dxos/app-framework";
+import { useAppGraph as useAppGraph2, useCapability } from "@dxos/app-framework";
 import { generateName } from "@dxos/display-name";
-import { useGraph as useGraph2 } from "@dxos/plugin-graph";
-import { PublicKey, useClient as useClient4 } from "@dxos/react-client";
+import { PublicKey, useClient as useClient5 } from "@dxos/react-client";
 import { getSpace as getSpace3, useMembers, fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
 import { useIdentity } from "@dxos/react-client/halo";
-import { Avatar, AvatarGroup, AvatarGroupItem, Tooltip as Tooltip2, useTranslation as useTranslation16, List as List2, ListItem as ListItem2, useDefaultValue } from "@dxos/react-ui";
+import { Avatar, AvatarGroup, AvatarGroupItem, Tooltip as Tooltip2, useTranslation as useTranslation15, 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/capabilities/index.ts
 import { lazy } from "@dxos/app-framework";
-var AppGraphBuilder = lazy(() => import("./app-graph-builder-5D2QB43K.mjs"));
-var AppGraphSerializer = lazy(() => import("./app-graph-serializer-VNWPLPDF.mjs"));
-var IdentityCreated = lazy(() => import("./identity-created-EC5FOCX2.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-Y6AZTVRL.mjs"));
-var ReactRoot = lazy(() => import("./react-root-4QQST3T2.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-JTNUNOJG.mjs"));
-var SpaceSettings = lazy(() => import("./settings-ASFF5BZL.mjs"));
-var SpaceState = lazy(() => import("./state-MS4KYJWI.mjs"));
-var SpacesReady = lazy(() => import("./spaces-ready-4SFNS5JQ.mjs"));
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-GSS3V7IN.mjs"));
+var AppGraphSerializer = lazy(() => import("./app-graph-serializer-QDXM5M6K.mjs"));
+var IdentityCreated = lazy(() => import("./identity-created-25TK5XNO.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-LNTCXZ57.mjs"));
+var ReactRoot = lazy(() => import("./react-root-Q7JJDCPB.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-BDMYLARO.mjs"));
+var SpaceSettings = lazy(() => import("./settings-K4JPYYEM.mjs"));
+var SpaceState = lazy(() => import("./state-6DCY5YJP.mjs"));
+var SpacesReady = lazy(() => import("./spaces-ready-THYJEJYZ.mjs"));
 
 // packages/plugins/plugin-space/src/hooks/usePath.ts
 import { useEffect as useEffect3, useState as useState7 } from "react";
@@ -895,8 +934,8 @@ var ACTIVITY_DURATION = 3e4;
 var noViewers = new ComplexMap(PublicKey.hash);
 var getName = (identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
 var SpacePresence = ({ object, spaceKey }) => {
-  const spaceState = useCapability2(SpaceCapabilities.MutableState);
-  const client = useClient4();
+  const spaceState = useCapability(SpaceCapabilities.MutableState);
+  const client = useClient5();
   const identity = useIdentity();
   const space = spaceKey ? client.spaces.get(spaceKey) : getSpace3(object);
   const spaceMembers = useMembers(space?.key);
@@ -995,7 +1034,7 @@ var PrensenceAvatar = ({ identity, showName, match, group, index, onClick }) =>
 var SmallPresenceLive = ({ id, open, viewers }) => {
   const { hasAttention, isAncestor, isRelated } = useAttention(id);
   const isAttended = hasAttention || isAncestor || isRelated;
-  const { graph } = useGraph2();
+  const { graph } = useAppGraph2();
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);
@@ -1023,7 +1062,7 @@ var SmallPresenceLive = ({ id, open, viewers }) => {
   });
 };
 var SmallPresence = ({ count = 0, attended, containsAttended }) => {
-  const { t } = useTranslation16(SPACE_PLUGIN);
+  const { t } = useTranslation15(SPACE_PLUGIN);
   return /* @__PURE__ */ React16.createElement(Tooltip2.Root, null, /* @__PURE__ */ React16.createElement(Tooltip2.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React16.createElement(AttentionGlyph, {
@@ -1040,13 +1079,13 @@ var SmallPresence = ({ count = 0, attended, containsAttended }) => {
 
 // packages/plugins/plugin-space/src/components/SpacePluginSettings.tsx
 import React17 from "react";
-import { Input as Input5, useTranslation as useTranslation17 } from "@dxos/react-ui";
-import { DeprecatedFormInput } from "@dxos/react-ui-form";
+import { Input as Input4, useTranslation as useTranslation16 } from "@dxos/react-ui";
+import { DeprecatedFormContainer, DeprecatedFormInput } from "@dxos/react-ui-form";
 var SpacePluginSettings = ({ settings }) => {
-  const { t } = useTranslation17(SPACE_PLUGIN);
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(DeprecatedFormInput, {
+  const { t } = useTranslation16(SPACE_PLUGIN);
+  return /* @__PURE__ */ React17.createElement(DeprecatedFormContainer, null, /* @__PURE__ */ React17.createElement(DeprecatedFormInput, {
     label: t("show hidden spaces label")
-  }, /* @__PURE__ */ React17.createElement(Input5.Switch, {
+  }, /* @__PURE__ */ React17.createElement(Input4.Switch, {
     checked: settings.showHidden,
     onCheckedChange: (checked) => settings.showHidden = !!checked
   })));
@@ -1054,23 +1093,23 @@ var SpacePluginSettings = ({ settings }) => {
 
 // packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsPanel.tsx
 import React18, { useCallback as useCallback11, useState as useState9 } from "react";
-import { log as log2 } from "@dxos/log";
+import { log as log3 } from "@dxos/log";
 import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
-import { useClient as useClient5 } from "@dxos/react-client";
-import { Input as Input6, useTranslation as useTranslation18 } from "@dxos/react-ui";
-import { DeprecatedFormInput as DeprecatedFormInput2 } from "@dxos/react-ui-form";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsPanel.tsx";
-var SpaceSettingsPanel = ({ classNames, space }) => {
-  const { t } = useTranslation18(SPACE_PLUGIN);
-  const client = useClient5();
+import { useClient as useClient6 } from "@dxos/react-client";
+import { Input as Input5, useTranslation as useTranslation17 } from "@dxos/react-ui";
+import { DeprecatedFormContainer as DeprecatedFormContainer2, DeprecatedFormInput as DeprecatedFormInput2 } from "@dxos/react-ui-form";
+import { HuePickerBlock } from "@dxos/react-ui-pickers";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsPanel.tsx";
+var SpaceSettingsPanel = ({ space }) => {
+  const { t } = useTranslation17(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);
   const toggleEdgeReplication = useCallback11(async (next) => {
     setEdgeReplication(next);
     await space?.internal.setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED).catch((err) => {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
+      log3.catch(err, void 0, {
+        F: __dxlog_file3,
         L: 36,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1080,35 +1119,39 @@ var SpaceSettingsPanel = ({ classNames, space }) => {
   }, [
     space
   ]);
-  return /* @__PURE__ */ React18.createElement("div", {
-    role: "form",
-    className: mx4("flex flex-col", classNames)
-  }, /* @__PURE__ */ React18.createElement(DeprecatedFormInput2, {
+  return /* @__PURE__ */ React18.createElement(DeprecatedFormContainer2, null, /* @__PURE__ */ React18.createElement(DeprecatedFormInput2, {
     label: t("name label")
-  }, /* @__PURE__ */ React18.createElement(Input6.TextInput, {
+  }, /* @__PURE__ */ React18.createElement(Input5.TextInput, {
     placeholder: t("unnamed space label"),
     value: space.properties.name ?? "",
     onChange: (event) => {
       space.properties.name = event.target.value;
     }
+  })), /* @__PURE__ */ React18.createElement(DeprecatedFormInput2, {
+    label: t("hue label")
+  }, /* @__PURE__ */ React18.createElement(HuePickerBlock, {
+    hue: space.properties.hue,
+    onChangeHue: (nextHue) => space.properties.hue = nextHue,
+    onClickClear: () => space.properties.hue = void 0
   })), edgeEnabled && /* @__PURE__ */ React18.createElement(DeprecatedFormInput2, {
     label: t("edge replication label")
-  }, /* @__PURE__ */ React18.createElement(Input6.Switch, {
+  }, /* @__PURE__ */ React18.createElement(Input5.Switch, {
     checked: edgeReplication,
     onCheckedChange: toggleEdgeReplication
   })));
 };
 
 // packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsDialog.tsx
-import React19, { useState as useState10 } from "react";
-import { useClient as useClient6 } from "@dxos/react-client";
-import { Button as Button6, Clipboard, Dialog as Dialog4, Icon as Icon4, toLocalizedString as toLocalizedString3, useTranslation as useTranslation19 } from "@dxos/react-ui";
+import React19, { useMemo as useMemo2, useState as useState10 } from "react";
+import { Surface as Surface2, useCapabilities } 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 useTranslation18 } from "@dxos/react-ui";
 import { Tabs } from "@dxos/react-ui-tabs";
 import { SpacePanel } from "@dxos/shell/react";
 var SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
 var SpaceSettingsDialog = ({ space, target, createInvitationUrl, initialTab = "members", namesCache }) => {
-  const { t } = useTranslation19(SPACE_PLUGIN);
-  const client = useClient6();
+  const { t } = useTranslation18(SPACE_PLUGIN);
+  const client = useClient7();
   const [tabsActivePart, setTabsActivePart] = useState10("list");
   const [selected, setSelected] = useState10(initialTab);
   const locked = space.properties[COMPOSER_SPACE_LOCK];
@@ -1116,6 +1159,12 @@ var SpaceSettingsDialog = ({ space, target, createInvitationUrl, initialTab = "m
     personal: client.spaces.default === space,
     namesCache
   });
+  const panels = useCapabilities(SpaceCapabilities.SettingsPanel);
+  const data = useMemo2(() => ({
+    subject: space
+  }), [
+    space
+  ]);
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
@@ -1168,7 +1217,10 @@ var SpaceSettingsDialog = ({ space, target, createInvitationUrl, initialTab = "m
     }, t("settings tab label")), /* @__PURE__ */ React19.createElement(Tabs.Tab, {
       value: "members",
       disabled: locked
-    }, t("members tab label"))))), /* @__PURE__ */ React19.createElement(Tabs.Tabpanel, {
+    }, t("members tab label")), panels.map((panel) => /* @__PURE__ */ React19.createElement(Tabs.Tab, {
+      key: panel.id,
+      value: panel.id
+    }, toLocalizedString3(panel.label, t)))))), /* @__PURE__ */ React19.createElement(Tabs.Tabpanel, {
       value: "settings",
       classNames: "pli-3 @md:pli-5 max-bs-dvh overflow-y-auto"
     }, /* @__PURE__ */ React19.createElement(SpaceSettingsPanel, {
@@ -1181,25 +1233,32 @@ var SpaceSettingsDialog = ({ space, target, createInvitationUrl, initialTab = "m
       hideHeading: true,
       target,
       createInvitationUrl
+    }))), panels.map((panel) => /* @__PURE__ */ React19.createElement(Tabs.Tabpanel, {
+      key: panel.id,
+      value: panel.id,
+      classNames: "pli-3 @md:pli-5 max-bs-dvh overflow-y-auto"
+    }, /* @__PURE__ */ React19.createElement(Surface2, {
+      role: `space-settings--${panel.id}`,
+      data
     }))))))
   );
 };
 
 // packages/plugins/plugin-space/src/components/SyncStatus/InlineSyncStatus.tsx
 import React20, { useEffect as useEffect6, useState as useState12 } from "react";
-import { useGraph as useGraph3 } from "@dxos/plugin-graph";
+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 useClient8 } from "@dxos/react-client";
-import { Tooltip as Tooltip3, useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { useClient as useClient9 } from "@dxos/react-client";
+import { Tooltip as Tooltip3, useTranslation as useTranslation19 } 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 useClient7 } from "@dxos/react-client";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/sync-state.ts";
+import { useClient as useClient8 } from "@dxos/react-client";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/sync-state.ts";
 var createEmptyEdgeSyncState = () => ({
   missingOnLocal: 0,
   missingOnRemote: 0,
@@ -1219,11 +1278,11 @@ var getSyncSummary = (syncMap) => {
 };
 var isEdgePeerId = (peerId, spaceId) => peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
 var useSyncState = () => {
-  const client = useClient7();
+  const client = useClient8();
   const [spaceState, setSpaceState] = useState11({});
   useEffect5(() => {
     const ctx = new Context(void 0, {
-      F: __dxlog_file3,
+      F: __dxlog_file4,
       L: 48
     });
     const createSubscriptions = (spaces) => {
@@ -1258,7 +1317,7 @@ var useSpaceSyncState = (space) => {
   const [spaceState, setSpaceState] = useState11();
   useEffect5(() => {
     const ctx = new Context(void 0, {
-      F: __dxlog_file3,
+      F: __dxlog_file4,
       L: 87
     });
     space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
@@ -1279,7 +1338,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 = useClient8();
+  const client = useClient9();
   useEffect6(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status: status2 }) => {
       setStatus(status2);
@@ -1290,11 +1349,11 @@ var useEdgeStatus = () => {
   return status;
 };
 var InlineSyncStatus = ({ space, open }) => {
-  const { t } = useTranslation20(SPACE_PLUGIN);
+  const { t } = useTranslation19(SPACE_PLUGIN);
   const id = space.id;
   const { hasAttention, isAncestor, isRelated } = useAttention2(id);
   const isAttended = hasAttention || isAncestor || isRelated;
-  const { graph } = useGraph3();
+  const { graph } = useAppGraph3();
   const attended = useAttended2();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);
@@ -1319,16 +1378,16 @@ var InlineSyncStatus = ({ space, open }) => {
 // packages/plugins/plugin-space/src/components/SyncStatus/SyncStatus.tsx
 import React22, { useCallback as useCallback12, useEffect as useEffect8, useState as useState14 } from "react";
 import { StatusBar } from "@dxos/plugin-status-bar";
-import { useClient as useClient10 } from "@dxos/react-client";
-import { Icon as Icon6, Input as Input7, Popover as Popover3, useTranslation as useTranslation22 } from "@dxos/react-ui";
+import { useClient as useClient11 } from "@dxos/react-client";
+import { Icon as Icon6, Input as Input6, Popover as Popover3, useTranslation as useTranslation21 } from "@dxos/react-ui";
 import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
 import { mx as mx6 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-space/src/components/SyncStatus/Space.tsx
 import React21, { useEffect as useEffect7, useState as useState13 } from "react";
-import { useClient as useClient9 } from "@dxos/react-client";
+import { useClient as useClient10 } from "@dxos/react-client";
 import { useSpace } from "@dxos/react-client/echo";
-import { Icon as Icon5, toLocalizedString as toLocalizedString4, useTranslation as useTranslation21 } from "@dxos/react-ui";
+import { Icon as Icon5, toLocalizedString as toLocalizedString4, useTranslation as useTranslation20 } from "@dxos/react-ui";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 var SYNC_STALLED_TIMEOUT = 5e3;
 var styles = {
@@ -1360,8 +1419,8 @@ var useActive = (count) => {
   return active;
 };
 var SpaceRowContainer = ({ spaceId, state }) => {
-  const { t } = useTranslation21(SPACE_PLUGIN);
-  const client = useClient9();
+  const { t } = useTranslation20(SPACE_PLUGIN);
+  const client = useClient10();
   const space = useSpace(spaceId);
   if (!space) {
     return null;
@@ -1437,7 +1496,7 @@ var Bar = ({ classNames, count, total }) => {
 
 // packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts
 import { Context as Context2 } from "@dxos/context";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts";
 var createClientSaveTracker = (client, cb) => {
   const unsubscribeCallbacks = {};
   const state = {};
@@ -1465,7 +1524,7 @@ var createClientSaveTracker = (client, cb) => {
 };
 var createSpaceSaveTracker = (space, cb) => {
   const ctx = new Context2(void 0, {
-    F: __dxlog_file4,
+    F: __dxlog_file5,
     L: 40
   });
   void space.waitUntilReady().then(() => {
@@ -1528,7 +1587,7 @@ var getIcon = (status) => {
 
 // packages/plugins/plugin-space/src/components/SyncStatus/SyncStatus.tsx
 var SyncStatus = () => {
-  const client = useClient10();
+  const client = useClient11();
   const state = useSyncState();
   const [saved, setSaved] = useState14(true);
   useEffect8(() => {
@@ -1542,7 +1601,7 @@ var SyncStatus = () => {
   });
 };
 var SyncStatusIndicator = ({ state, saved }) => {
-  const { t } = useTranslation22(SPACE_PLUGIN);
+  const { t } = useTranslation21(SPACE_PLUGIN);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
@@ -1583,18 +1642,16 @@ var SyncStatusIndicator = ({ state, saved }) => {
       asChild: true
     }, /* @__PURE__ */ React22.createElement(StatusBar.Button, {
       title
-    }, icon)), /* @__PURE__ */ React22.createElement(Popover3.Portal, null, /* @__PURE__ */ React22.createElement(Popover3.Content, {
-      sideOffset: 16
-    }, /* @__PURE__ */ React22.createElement(SyncStatusDetail, {
+    }, icon)), /* @__PURE__ */ React22.createElement(Popover3.Portal, null, /* @__PURE__ */ React22.createElement(Popover3.Content, null, /* @__PURE__ */ React22.createElement(SyncStatusDetail, {
       state,
       summary,
       debug: false
-    }))));
+    }), /* @__PURE__ */ React22.createElement(Popover3.Arrow, null))));
   }
 };
 var SyncStatusDetail = ({ classNames, state, summary, debug }) => {
   const [showAll, setShowAll] = useState14(false);
-  const { t } = useTranslation22(SPACE_PLUGIN);
+  const { t } = useTranslation21(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), [
     setShowAll
@@ -1608,9 +1665,9 @@ var SyncStatusDetail = ({ classNames, state, summary, debug }) => {
     className: "flex-1"
   }, t("sync status title")), /* @__PURE__ */ React22.createElement("div", {
     className: "flex items-center gap-2"
-  }, /* @__PURE__ */ React22.createElement(Input7.Root, null, /* @__PURE__ */ React22.createElement(Input7.Label, {
+  }, /* @__PURE__ */ React22.createElement(Input6.Root, null, /* @__PURE__ */ React22.createElement(Input6.Label, {
     classNames: "text-xs"
-  }, t("show all label")), /* @__PURE__ */ React22.createElement(Input7.Checkbox, {
+  }, t("show all label")), /* @__PURE__ */ React22.createElement(Input6.Checkbox, {
     checked: showAll,
     onCheckedChange: handleCheckedChange
   })))), /* @__PURE__ */ React22.createElement("div", {
@@ -1669,4 +1726,4 @@ export {
   SpaceState,
   SpacesReady
 };
-//# sourceMappingURL=chunk-PDJ4MLA4.mjs.map
+//# sourceMappingURL=chunk-DIBLC24B.mjs.map