@dxos/plugin-space 0.8.3-main.7f5a14c → 0.8.3-staging.0fa589b

package/dist/lib/browser/{chunk-CF4FBDGP.mjs → chunk-NFUKCRGE.mjs}

@@ -4,16 +4,15 @@ import {
 } from "./chunk-7Y4M7GXO.mjs";
 import {
   SpaceCapabilities
-} from "./chunk-3LN4LJN6.mjs";
+} from "./chunk-BXNL6SDI.mjs";
 import {
   COMPOSER_SPACE_LOCK,
   getSpaceDisplayName
-} from "./chunk-RRJIDXPY.mjs";
+} from "./chunk-V24VASAJ.mjs";
 import {
-  CollectionType,
   SpaceAction,
   SpaceForm
-} from "./chunk-LGEIVEYC.mjs";
+} from "./chunk-TW7O2EPP.mjs";
 import {
   SPACE_PLUGIN,
   meta
@@ -121,31 +120,31 @@ var AwaitingObject = ({ id }) => {
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { pipe } from "effect";
-import React3, { useCallback as useCallback3, useRef } from "react";
+import React3, { useCallback as useCallback3, useRef, useState as useState2 } from "react";
 import { Capabilities, LayoutAction as LayoutAction2, chain, createIntent as createIntent2, useCapabilities, useIntentDispatcher as useIntentDispatcher2, usePluginManager } from "@dxos/app-framework";
-import { invariant as invariant2 } from "@dxos/invariant";
+import { Query, Type as Type2 } from "@dxos/echo";
+import { invariant } from "@dxos/invariant";
 import { useClient as useClient2 } from "@dxos/react-client";
-import { getSpace, isLiveObject, isSpace, useSpaces } from "@dxos/react-client/echo";
+import { getSpace, isLiveObject, isSpace, useQuery as useQuery2, useSpaces } from "@dxos/react-client/echo";
 import { Button as Button2, Dialog, Icon as Icon2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { cardDialogContent, cardDialogHeader } from "@dxos/react-ui-stack";
+import { DataType } from "@dxos/schema";
+import { isNonNullable as isNonNullable2 } from "@dxos/util";
 
 // packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectPanel.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { useCallback as useCallback2, useState as useState2 } from "react";
+import React2, { useCallback as useCallback2 } from "react";
 import { Type } from "@dxos/echo";
 import { getTypeAnnotation } from "@dxos/echo-schema";
-import { invariant } from "@dxos/invariant";
 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 { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from "@dxos/react-ui-stack";
 import { isNonNullable } from "@dxos/util";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectPanel.tsx";
-var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename, target: initialTarget, name: initialName, defaultSpaceId, resolve, onCreateObject }) => {
+var CreateObjectPanel = ({ forms, spaces, typename, target, name: initialName, defaultSpaceId, resolve, onTargetChange, onTypenameChange, onCreateObject }) => {
   var _effect = _useSignals2();
   try {
     const { t } = useTranslation2(SPACE_PLUGIN);
-    const [typename, setTypename] = useState2(initialTypename);
-    const [target, setTarget] = useState2(initialTarget);
     const form = forms.find((form2) => Type.getTypename(form2.objectSchema) === typename);
     const options = forms.map((form2) => getTypeAnnotation(form2.objectSchema)).filter(isNonNullable).sort((a, b) => {
       const nameA = t("typename label", {
@@ -159,59 +158,45 @@ var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename,
       return nameA.localeCompare(nameB);
     });
     const handleCreateObject = useCallback2(async (props) => {
-      if (!form || !target) {
+      if (!form) {
         return;
       }
       await onCreateObject?.({
         form,
-        target,
         data: props
       });
     }, [
       onCreateObject,
-      form,
-      target
+      form
     ]);
     const handleSetTypename = useCallback2(async (typename2) => {
-      invariant(target, "target is required", {
-        F: __dxlog_file,
-        L: 73,
-        S: void 0,
-        A: [
-          "target",
-          "'target is required'"
-        ]
-      });
       const form2 = forms.find((form3) => getTypeAnnotation(form3.objectSchema)?.typename === typename2);
       if (form2 && !form2.formSchema) {
         await onCreateObject?.({
-          form: form2,
-          target
+          form: form2
         });
       } else {
-        setTypename(typename2);
+        onTypenameChange?.(typename2);
       }
     }, [
       forms,
-      onCreateObject,
-      target
+      onCreateObject
     ]);
     const inputSurfaceLookup = useInputSurfaceLookup({
       target
     });
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "form",
-      className: mx2("flex flex-col gap-2", classNames)
-    }, !form ? /* @__PURE__ */ React2.createElement(SelectSchema, {
+    return !form ? /* @__PURE__ */ React2.createElement(SelectSchema, {
       options,
       resolve,
       onChange: handleSetTypename
     }) : !target ? /* @__PURE__ */ React2.createElement(SelectSpace, {
       spaces,
       defaultSpaceId,
-      onChange: setTarget
-    }) : form.formSchema ? /* @__PURE__ */ React2.createElement(Form, {
-      flush: true,
+      onChange: onTargetChange
+    }) : form.formSchema ? /* @__PURE__ */ React2.createElement("div", {
+      role: "none",
+      className: cardDialogOverflow
+    }, /* @__PURE__ */ React2.createElement(Form, {
       autoFocus: true,
       values: {
         name: initialName
@@ -219,8 +204,9 @@ var CreateObjectPanel = ({ classNames, forms, spaces, typename: initialTypename,
       schema: form.formSchema,
       testId: "create-object-form",
       onSave: handleCreateObject,
-      lookupComponent: inputSurfaceLookup
-    }) : void 0);
+      lookupComponent: inputSurfaceLookup,
+      outerSpacing: "blockStart-0"
+    })) : null;
   } finally {
     _effect.f();
   }
@@ -231,14 +217,16 @@ var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
     const { t } = useTranslation2(SPACE_PLUGIN);
     return /* @__PURE__ */ React2.createElement(SearchList.Root, {
       label: t("space input label"),
-      classNames: "flex flex-col grow overflow-hidden"
+      classNames: cardDialogSearchListRoot
     }, /* @__PURE__ */ React2.createElement(SearchList.Input, {
       autoFocus: true,
       "data-testid": "create-object-form.space-input",
-      placeholder: t("space input placeholder"),
-      classNames: "px-1 my-2"
+      placeholder: t("space input placeholder")
     }), /* @__PURE__ */ React2.createElement(SearchList.Content, {
-      classNames: "max-bs-[24rem] overflow-auto"
+      classNames: [
+        cardDialogOverflow,
+        "plb-cardSpacingBlock"
+      ]
     }, spaces.sort((a, b) => {
       const aName = toLocalizedString(getSpaceDisplayName(a, {
         personal: a.id === defaultSpaceId
@@ -252,7 +240,7 @@ var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
       value: toLocalizedString(getSpaceDisplayName(space, {
         personal: space.id === defaultSpaceId
       }), t),
-      onSelect: () => onChange(space),
+      onSelect: () => onChange?.(space),
       classNames: "flex items-center gap-2"
     }, /* @__PURE__ */ React2.createElement("span", {
       className: "grow truncate"
@@ -269,14 +257,13 @@ var SelectSchema = ({ options, resolve, onChange }) => {
     const { t } = useTranslation2(SPACE_PLUGIN);
     return /* @__PURE__ */ React2.createElement(SearchList.Root, {
       label: t("schema input label"),
-      classNames: "flex flex-col grow overflow-hidden"
+      classNames: cardDialogSearchListRoot
     }, /* @__PURE__ */ React2.createElement(SearchList.Input, {
       autoFocus: true,
       "data-testid": "create-object-form.schema-input",
-      placeholder: t("schema input placeholder"),
-      classNames: "px-1 my-2"
+      placeholder: t("schema input placeholder")
     }), /* @__PURE__ */ React2.createElement(SearchList.Content, {
-      classNames: "max-bs-[24rem] overflow-auto"
+      classNames: cardDialogPaddedOverflow
     }, options.map((option) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
       key: option.typename,
       value: t("typename label", {
@@ -301,22 +288,22 @@ 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-UNXUTH53.mjs"));
-var AppGraphSerializer = lazy(() => import("./app-graph-serializer-KPKPMC4M.mjs"));
-var IdentityCreated = lazy(() => import("./identity-created-EM6GZDNF.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-K3ULKQ6V.mjs"));
-var ReactRoot = lazy(() => import("./react-root-ECO7G77L.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-Y5AZBYA7.mjs"));
-var SchemaDefs = lazy(() => import("./schema-defs-JMN74RNK.mjs"));
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-M2RH72VL.mjs"));
+var AppGraphSerializer = lazy(() => import("./app-graph-serializer-F7ISRRBV.mjs"));
+var IdentityCreated = lazy(() => import("./identity-created-PI7TKANR.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-RWU6ZE4H.mjs"));
+var ReactRoot = lazy(() => import("./react-root-QIKHSNT2.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-W56UD53I.mjs"));
+var SchemaDefs = lazy(() => import("./schema-defs-WREJNMIC.mjs"));
 var SchemaTools = lazy(() => import("./schema-tools-ILTVSSS3.mjs"));
-var SpaceSettings = lazy(() => import("./settings-MU7O6JDD.mjs"));
-var SpaceState = lazy(() => import("./state-6HOSHLIN.mjs"));
-var SpacesReady = lazy(() => import("./spaces-ready-NXZAWHGI.mjs"));
+var SpaceSettings = lazy(() => import("./settings-K54STC5A.mjs"));
+var SpaceState = lazy(() => import("./state-HRZ4VRXU.mjs"));
+var SpacesReady = lazy(() => import("./spaces-ready-3PDRDHPC.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";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx";
 var CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
-var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavigate }) => {
+var CreateObjectDialog = ({ target: initialTarget, typename: initialTypename, name, shouldNavigate: _shouldNavigate }) => {
   var _effect = _useSignals3();
   try {
     const closeRef = useRef(null);
@@ -326,18 +313,23 @@ var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavig
     const spaces = useSpaces();
     const { dispatchPromise: dispatch } = useIntentDispatcher2();
     const forms = useCapabilities(SpaceCapabilities.ObjectForm);
+    const [target, setTarget] = useState2(initialTarget);
+    const [typename, setTypename] = useState2(initialTypename);
+    const space = isSpace(target) ? target : getSpace(target);
+    const queryCollections = useQuery2(space, Query.type(DataType.QueryCollection));
+    const hiddenTypenames = queryCollections.map((collection) => collection.query.typename).filter(isNonNullable2);
     const resolve = useCallback3((typename2) => manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename2)?.metadata ?? {}, [
       manager
     ]);
-    const handleCreateObject = useCallback3(async ({ form, target: target2, data = {} }) => {
-      if (!target2) {
+    const handleCreateObject = useCallback3(async ({ form, data = {} }) => {
+      if (!target) {
         return;
       }
       closeRef.current?.click();
-      const space = isSpace(target2) ? target2 : getSpace(target2);
-      invariant2(space, "Missing space", {
-        F: __dxlog_file2,
-        L: 65,
+      const space2 = isSpace(target) ? target : getSpace(target);
+      invariant(space2, "Missing space", {
+        F: __dxlog_file,
+        L: 73,
         S: void 0,
         A: [
           "space",
@@ -345,14 +337,15 @@ var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavig
         ]
       });
       const result = await dispatch(form.getIntent(data, {
-        space
+        space: space2
       }));
       const object = result.data?.object;
       if (isLiveObject(object)) {
+        const hidden = form.hidden || hiddenTypenames.includes(Type2.getTypename(form.objectSchema));
         const addObjectIntent = createIntent2(SpaceAction.AddObject, {
-          target: target2,
+          target,
           object,
-          hidden: form.hidden
+          hidden
         });
         const shouldNavigate = _shouldNavigate ?? (() => true);
         if (shouldNavigate(object)) {
@@ -365,17 +358,25 @@ var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavig
       }
     }, [
       dispatch,
-      resolve
+      target,
+      resolve,
+      hiddenTypenames,
+      _shouldNavigate
     ]);
     return (
       // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
       //  Consider factoring it out to the tabs package.
       /* @__PURE__ */ React3.createElement(Dialog.Content, {
-        classNames: "p-0 bs-content max-bs-full md:max-is-[40rem] overflow-hidden"
+        classNames: cardDialogContent
       }, /* @__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__ */ React3.createElement(Dialog.Title, null, t("create object dialog title")), /* @__PURE__ */ React3.createElement(Dialog.Close, {
+        className: cardDialogHeader
+      }, /* @__PURE__ */ React3.createElement(Dialog.Title, null, t("create object dialog title", {
+        object: t("typename label", {
+          ns: typename,
+          defaultValue: "Item"
+        })
+      })), /* @__PURE__ */ React3.createElement(Dialog.Close, {
         asChild: true
       }, /* @__PURE__ */ React3.createElement(Button2, {
         ref: closeRef,
@@ -386,7 +387,6 @@ var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavig
         icon: "ph--x--regular",
         size: 4
       })))), /* @__PURE__ */ React3.createElement(CreateObjectPanel, {
-        classNames: "p-4",
         forms,
         spaces,
         target,
@@ -394,6 +394,8 @@ var CreateObjectDialog = ({ target, typename, name, shouldNavigate: _shouldNavig
         name,
         defaultSpaceId: client.spaces.default.id,
         resolve,
+        onTargetChange: setTarget,
+        onTypenameChange: setTypename,
         onCreateObject: handleCreateObject
       }))
     );
@@ -409,6 +411,7 @@ 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 useTranslation4 } from "@dxos/react-ui";
 import { Form as Form2 } from "@dxos/react-ui-form";
+import { cardDialogContent as cardDialogContent2, cardDialogHeader as cardDialogHeader2 } from "@dxos/react-ui-stack";
 var CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
 var initialValues = {
   edgeReplication: true
@@ -427,8 +430,11 @@ var CreateSpaceDialog = () => {
           part: "workspace",
           subject: space.id
         }));
-        yield* dispatch(createIntent3(SpaceAction.OpenCreateObject, {
-          target: space
+        yield* dispatch(createIntent3(LayoutAction3.UpdateDialog, {
+          part: "dialog",
+          options: {
+            state: false
+          }
         }));
       });
       await Effect.runPromise(program);
@@ -439,10 +445,10 @@ var CreateSpaceDialog = () => {
       // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
       //  Consider factoring it out to the tabs package.
       /* @__PURE__ */ React4.createElement(Dialog2.Content, {
-        classNames: "p-0 bs-content min-bs-[16rem] max-bs-full md:max-is-[32rem] overflow-hidden"
+        classNames: cardDialogContent2
       }, /* @__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"
+        className: cardDialogHeader2
       }, /* @__PURE__ */ React4.createElement(Dialog2.Title, null, t("create space dialog title")), /* @__PURE__ */ React4.createElement(Dialog2.Close, {
         asChild: true
       }, /* @__PURE__ */ React4.createElement(Button3, {
@@ -454,15 +460,16 @@ var CreateSpaceDialog = () => {
         icon: "ph--x--regular",
         size: 4
       })))), /* @__PURE__ */ React4.createElement("div", {
-        className: "p-4"
+        role: "none",
+        className: "contents"
       }, /* @__PURE__ */ React4.createElement(Form2, {
         testId: "create-space-form",
-        flush: true,
         autoFocus: true,
         values: initialValues,
         schema: SpaceForm,
         lookupComponent: inputSurfaceLookup,
-        onSave: handleCreateSpace
+        onSave: handleCreateSpace,
+        outerSpacing: "scroll-fields"
       })))
     );
   } finally {
@@ -474,18 +481,18 @@ var CreateSpaceDialog = () => {
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import React5 from "react";
 import { useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { baseSurface, descriptionMessage, mx as mx3 } from "@dxos/react-ui-theme";
+import { baseSurface, descriptionMessage, mx as mx2 } from "@dxos/react-ui-theme";
 var CollectionMain = ({ collection }) => {
   var _effect = _useSignals5();
   try {
     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"),
+      className: mx2(baseSurface, "min-bs-screen is-full flex items-center justify-center p-8"),
       "data-testid": "composer.firstRunMessage"
     }, /* @__PURE__ */ React5.createElement("p", {
       role: "alert",
-      className: mx3(descriptionMessage, "rounded-lg p-8 font-normal text-lg max-is-[24rem] break-words")
+      className: mx2(descriptionMessage, "rounded-md p-8 font-normal text-lg max-is-[24rem] break-words")
     }, collection.name ?? t("unnamed collection label")));
   } finally {
     _effect.f();
@@ -632,6 +639,7 @@ import { Check, X } from "@phosphor-icons/react";
 import React8, { useCallback as useCallback6, useMemo, useState as useState3 } from "react";
 import { QR } from "react-qr-rounded";
 import { createIntent as createIntent5, useIntentDispatcher as useIntentDispatcher5 } from "@dxos/app-framework";
+import { Type as Type3 } from "@dxos/echo";
 import { log } from "@dxos/log";
 import { useConfig } from "@dxos/react-client";
 import { fullyQualifiedId as fullyQualifiedId2, useSpaceInvitations } from "@dxos/react-client/echo";
@@ -639,10 +647,11 @@ import { Invitation, InvitationEncoder } from "@dxos/react-client/invitations";
 import { Button as Button4, Clipboard, Icon as Icon4, Input, useId, useTranslation as useTranslation8 } from "@dxos/react-ui";
 import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } 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 { getSize as getSize2, mx as mx3 } from "@dxos/react-ui-theme";
+import { DataType as DataType2 } from "@dxos/schema";
 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 __dxlog_file2 = "/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);
@@ -651,8 +660,8 @@ var handleInvitationEvent = (invitation, subscription) => {
       invitationCode,
       authCode: invitation.authCode
     }), void 0, {
-      F: __dxlog_file3,
-      L: 40,
+      F: __dxlog_file2,
+      L: 42,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -674,7 +683,7 @@ var MembersContainer = ({ space, createInvitationUrl }) => {
       setInternalActiveAction(nextAction);
       localStorage.setItem(activeActionKey, nextAction);
     };
-    const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
+    const target = space.properties[Type3.getTypename(DataType2.Collection)]?.target?.objects[0]?.target;
     const locked = space.properties[COMPOSER_SPACE_LOCK];
     const handleChangeLocked = useCallback6(() => {
       space.properties[COMPOSER_SPACE_LOCK] = !locked;
@@ -886,9 +895,9 @@ var InvitationComplete = ({ statusValue }) => {
   var _effect = _useSignals8();
   try {
     return statusValue > 0 ? /* @__PURE__ */ React8.createElement(Check, {
-      className: mx4("m-1.5", getSize2(6))
+      className: mx3("m-1.5", getSize2(6))
     }) : /* @__PURE__ */ React8.createElement(X, {
-      className: mx4("m-1.5", getSize2(6))
+      className: mx3("m-1.5", getSize2(6))
     });
   } finally {
     _effect.f();
@@ -936,15 +945,12 @@ import { StackItem as StackItem2 } from "@dxos/react-ui-stack";
 import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
 import React10, { useRef as useRef3 } from "react";
 import { Input as Input2, useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
 var BaseObjectSettings = ({ classNames, children, object }) => {
   var _effect = _useSignals10();
   try {
     const { t } = useTranslation10(meta.id);
     const inputRef = useRef3(null);
-    return /* @__PURE__ */ React10.createElement("form", {
-      className: mx5("flex flex-col p-2 gap-2", classNames)
-    }, /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Label, null, t("name label")), /* @__PURE__ */ React10.createElement(Input2.TextInput, {
+    return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Label, null, t("name label")), /* @__PURE__ */ React10.createElement(Input2.TextInput, {
       ref: inputRef,
       placeholder: t("name placeholder"),
       // TODO(burdon): Use annotation to get the name field.
@@ -973,9 +979,10 @@ var ObjectSettingsContainer = ({ object, role }) => {
       object
     ]);
     return /* @__PURE__ */ React11.createElement(Clipboard2.Provider, null, /* @__PURE__ */ React11.createElement(StackItem2.Content, {
-      role
+      toolbar: false
     }, /* @__PURE__ */ React11.createElement("div", {
-      className: "flex flex-col overflow-y-auto divide-y divide-separator"
+      role: "none",
+      className: "overflow-y-auto pli-cardSpacingInline plb-cardSpacingBlock"
     }, /* @__PURE__ */ React11.createElement(BaseObjectSettings, {
       object
     }, /* @__PURE__ */ React11.createElement(Surface, {
@@ -996,7 +1003,7 @@ import { ArrowsCounterClockwise, CheckCircle as CheckCircle2, Warning } from "@p
 import React12, { useEffect as useEffect2, useState as useState4 } from "react";
 import { debounce } from "@dxos/async";
 import { Tooltip, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { getSize as getSize3, mx as mx6, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
+import { getSize as getSize3, mx as mx4, staticPlaceholderText, warningText } from "@dxos/react-ui-theme";
 var PersistenceStatus = ({ db }) => {
   var _effect = _useSignals12();
   try {
@@ -1020,17 +1027,17 @@ var PersistenceStatus = ({ db }) => {
         return /* @__PURE__ */ React12.createElement("div", {
           className: "flex items-center"
         }, /* @__PURE__ */ React12.createElement(Warning, {
-          className: mx6(getSize3(4), "me-1")
+          className: mx4(getSize3(4), "me-1")
         }), /* @__PURE__ */ React12.createElement("span", {
-          className: mx6("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: mx6(getSize3(4), "me-1")
+          className: mx4(getSize3(4), "me-1")
         }), /* @__PURE__ */ React12.createElement("span", {
-          className: mx6("text-sm", staticPlaceholderText)
+          className: mx4("text-sm", staticPlaceholderText)
         }, t("persistence pending label")));
       case 0:
       default:
@@ -1040,9 +1047,9 @@ var PersistenceStatus = ({ db }) => {
           content: t("persisted locally message"),
           className: "flex items-center"
         }, /* @__PURE__ */ React12.createElement(CheckCircle2, {
-          className: mx6(getSize3(4), "me-1")
+          className: mx4(getSize3(4), "me-1")
         }), displayMessage && /* @__PURE__ */ React12.createElement("span", {
-          className: mx6("text-sm", staticPlaceholderText)
+          className: mx4("text-sm", staticPlaceholderText)
         }, t("persisted locally label")));
     }
   } finally {
@@ -1056,7 +1063,7 @@ import React13, { useCallback as useCallback7, useRef as useRef4, useState as us
 import { createIntent as createIntent6, LayoutAction as LayoutAction5, useIntentDispatcher as useIntentDispatcher6 } from "@dxos/app-framework";
 import { log as log2 } from "@dxos/log";
 import { Button as Button5, Input as Input3, useTranslation as useTranslation12 } from "@dxos/react-ui";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/PopoverRenameObject.tsx";
 var POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
 var PopoverRenameObject = ({ object: obj }) => {
   var _effect = _useSignals13();
@@ -1076,7 +1083,7 @@ var PopoverRenameObject = ({ object: obj }) => {
           log2.error("Failed to rename object", {
             err
           }, {
-            F: __dxlog_file4,
+            F: __dxlog_file3,
             L: 32,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1411,39 +1418,46 @@ import React17 from "react";
 import { createIntent as createIntent8, useIntentDispatcher as useIntentDispatcher8 } from "@dxos/app-framework";
 import { useClient as useClient6 } from "@dxos/react-client";
 import { useSpaces as useSpaces2 } from "@dxos/react-client/echo";
-import { Input as Input5, toLocalizedString as toLocalizedString3, useTranslation as useTranslation16, List as List2, ListItem as ListItem2, Button as Button7 } from "@dxos/react-ui";
-import { DeprecatedFormContainer, DeprecatedFormInput } from "@dxos/react-ui-form";
+import { Input as Input5, toLocalizedString as toLocalizedString3, useTranslation as useTranslation16, List as List2, ListItem as ListItem2, IconButton } from "@dxos/react-ui";
+import { controlItemClasses as controlItemClasses2, ControlPage as ControlPage3, ControlSection as ControlSection3, DeprecatedFormInput } from "@dxos/react-ui-form";
 var SpacePluginSettings = ({ settings }) => {
   var _effect = _useSignals17();
   try {
     const { t } = useTranslation16(SPACE_PLUGIN);
-    const { dispatchPromise: dispatch } = useIntentDispatcher8();
     const client = useClient6();
     const spaces = useSpaces2({
       all: settings.showHidden
     });
-    return /* @__PURE__ */ React17.createElement(DeprecatedFormContainer, null, /* @__PURE__ */ React17.createElement(DeprecatedFormInput, {
+    const { dispatchPromise: dispatch } = useIntentDispatcher8();
+    return /* @__PURE__ */ React17.createElement(ControlPage3, null, /* @__PURE__ */ React17.createElement(ControlSection3, {
+      title: t("space settings label"),
+      description: t("space settings description")
+    }, /* @__PURE__ */ React17.createElement("div", {
+      className: "pli-trimMd container-max-width"
+    }, /* @__PURE__ */ React17.createElement(DeprecatedFormInput, {
       label: t("show hidden spaces label")
     }, /* @__PURE__ */ React17.createElement(Input5.Switch, {
       checked: settings.showHidden,
       onCheckedChange: (checked) => settings.showHidden = !!checked
-    })), /* @__PURE__ */ React17.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React17.createElement("h2", {
-      className: "text-xl my-4"
-    }, "Space Settings"), /* @__PURE__ */ React17.createElement(List2, {
-      classNames: "max-w-md mx-auto"
+    }))), /* @__PURE__ */ React17.createElement(List2, {
+      classNames: [
+        controlItemClasses2,
+        "flex flex-col gap-trimSm"
+      ]
     }, spaces.map((space) => /* @__PURE__ */ React17.createElement(ListItem2.Root, {
-      key: space.id
+      key: space.id,
+      classNames: "is-full items-center"
     }, /* @__PURE__ */ React17.createElement(ListItem2.Heading, {
-      classNames: "flex flex-col grow truncate mbe-2"
+      classNames: "grow truncate !min-bs-0"
     }, toLocalizedString3(getSpaceDisplayName(space, {
       personal: space === client.spaces.default
-    }), t)), /* @__PURE__ */ React17.createElement(ListItem2.Endcap, null, /* @__PURE__ */ React17.createElement(Button7, {
+    }), t)), /* @__PURE__ */ React17.createElement(IconButton, {
+      icon: "ph--faders--regular",
       onClick: () => dispatch(createIntent8(SpaceAction.OpenSettings, {
         space
-      }))
-    }, t("open space settings label"))))))));
+      })),
+      label: t("open space settings label")
+    }))))));
   } finally {
     _effect.f();
   }
@@ -1458,11 +1472,11 @@ import { log as log3 } from "@dxos/log";
 import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
 import { useClient as useClient7 } from "@dxos/react-client";
 import { SpaceState as SpaceState2 } from "@dxos/react-client/echo";
-import { Button as Button8, Input as Input6, useMulticastObservable, useTranslation as useTranslation17 } from "@dxos/react-ui";
-import { Form as Form3, ControlItem, ControlItemInput as ControlItemInput2, ControlSection as ControlSection3, ControlPage as ControlPage3 } from "@dxos/react-ui-form";
+import { Button as Button7, Input as Input6, useMulticastObservable, useTranslation as useTranslation17 } from "@dxos/react-ui";
+import { Form as Form3, ControlItem, ControlItemInput as ControlItemInput2, ControlSection as ControlSection4, ControlPage as ControlPage4 } from "@dxos/react-ui-form";
 import { HuePicker, IconPicker } from "@dxos/react-ui-pickers";
 import { StackItem as StackItem4 } from "@dxos/react-ui-stack";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsContainer.tsx";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsContainer.tsx";
 var FormSchema = SpaceForm.pipe(Schema.extend(Schema.Struct({
   archived: Schema.Boolean.annotations({
     title: "Archive space"
@@ -1480,7 +1494,7 @@ var SpaceSettingsContainer = ({ space }) => {
       setEdgeReplication(next);
       await space?.internal.setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED).catch((err) => {
         log3.catch(err, void 0, {
-          F: __dxlog_file5,
+          F: __dxlog_file4,
           L: 51,
           S: void 0,
           C: (f, a) => f(...a)
@@ -1609,7 +1623,7 @@ var SpaceSettingsContainer = ({ space }) => {
         return /* @__PURE__ */ React18.createElement(ControlItemInput2, {
           title: label,
           description: t("archive space description")
-        }, /* @__PURE__ */ React18.createElement(Button8, {
+        }, /* @__PURE__ */ React18.createElement(Button7, {
           disabled: space === client.spaces.default,
           onClick: handleChange
         }, getValue() ? t("unarchive space label") : t("archive space label")));
@@ -1620,7 +1634,7 @@ var SpaceSettingsContainer = ({ space }) => {
     ]);
     return /* @__PURE__ */ React18.createElement(StackItem4.Content, {
       classNames: "block overflow-y-auto pli-2"
-    }, /* @__PURE__ */ React18.createElement(ControlPage3, null, /* @__PURE__ */ React18.createElement(ControlSection3, {
+    }, /* @__PURE__ */ React18.createElement(ControlPage4, null, /* @__PURE__ */ React18.createElement(ControlSection4, {
       title: t("space properties settings verbose label", {
         ns: SPACE_PLUGIN
       }),
@@ -1633,8 +1647,8 @@ var SpaceSettingsContainer = ({ space }) => {
       autoSave: true,
       onSave: handleSave,
       Custom: customElements,
-      flush: true,
-      classNames: 'container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+      outerSpacing: false,
+      classNames: "container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4"
     }))));
   } finally {
     _effect.f();
@@ -1705,7 +1719,7 @@ import { Icon as Icon5, useTranslation as useTranslation19 } from "@dxos/react-u
 
 // packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts
 import { Context } from "@dxos/context";
-var __dxlog_file6 = "/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 CleanupFns = {};
   const state = {};
@@ -1733,7 +1747,7 @@ var createClientSaveTracker = (client, cb) => {
 };
 var createSpaceSaveTracker = (space, cb) => {
   const ctx = new Context(void 0, {
-    F: __dxlog_file6,
+    F: __dxlog_file5,
     L: 40
   });
   void space.waitUntilReady().then(() => {
@@ -1899,4 +1913,4 @@ export {
   SpaceState,
   SpacesReady
 };
-//# sourceMappingURL=chunk-CF4FBDGP.mjs.map
+//# sourceMappingURL=chunk-NFUKCRGE.mjs.map