@dxos/plugin-space 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/dist/lib/browser/{chunk-3X2EA2OA.mjs → chunk-XRTOZE23.mjs}

@@ -2,24 +2,25 @@ import {
   useInputSurfaceLookup,
   usePath,
   useTypeOptions
-} from "./chunk-4WZUGLQQ.mjs";
+} from "./chunk-A7ZCVQGZ.mjs";
 import {
   COMPOSER_SPACE_LOCK,
   getSpaceDisplayName
-} from "./chunk-SUI34XSA.mjs";
+} from "./chunk-WAOJLA2S.mjs";
 import {
   SpaceCapabilities,
   SpaceForm,
   SpaceOperation
-} from "./chunk-CCRSHECL.mjs";
+} from "./chunk-KGLWYGIF.mjs";
 import {
   meta
 } from "./chunk-HSMQFM57.mjs";
 
 // src/components/AwaitingObject.tsx
 import React, { useCallback, useEffect, useState } from "react";
-import { Common } from "@dxos/app-framework";
-import { useLayout, useOperationInvoker } from "@dxos/app-framework/react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { useLayout } from "@dxos/app-toolkit/ui";
 import { Obj } from "@dxos/echo";
 import { useClient } from "@dxos/react-client";
 import { Filter, useQuery } from "@dxos/react-client/echo";
@@ -63,7 +64,7 @@ var AwaitingObject = ({ id }) => {
     invokePromise
   ]);
   const handleNavigate = useCallback(() => {
-    void invokePromise(Common.LayoutOperation.Open, {
+    void invokePromise(LayoutOperation.Open, {
       subject: [
         id
       ]
@@ -114,8 +115,9 @@ var AwaitingObject = ({ id }) => {
 // src/components/CreateDialog/CreateObjectDialog.tsx
 import * as Effect from "effect/Effect";
 import React3, { useCallback as useCallback3, useMemo as useMemo2, useRef, useState as useState2 } from "react";
-import { Capability, Common as Common2 } from "@dxos/app-framework";
-import { useOperationInvoker as useOperationInvoker2, usePluginManager } from "@dxos/app-framework/react";
+import { Capability } from "@dxos/app-framework";
+import { useOperationInvoker as useOperationInvoker2, usePluginManager } from "@dxos/app-framework/ui";
+import { AppCapabilities, LayoutOperation as LayoutOperation2 } from "@dxos/app-toolkit";
 import { Database, Obj as Obj3, Type } from "@dxos/echo";
 import { EntityKind, getTypeAnnotation as getTypeAnnotation2 } from "@dxos/echo/internal";
 import { runAndForwardErrors } from "@dxos/effect";
@@ -202,6 +204,7 @@ var CreateObjectPanel = ({ schemas, spaces, typename, target, views, initialForm
     onSave: handleCreateObject
   }, /* @__PURE__ */ React2.createElement(Form.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Content, null, /* @__PURE__ */ React2.createElement(Form.FieldSet, null), /* @__PURE__ */ React2.createElement(Form.Submit, null)))) : null;
 };
+CreateObjectPanel.displayName = "CreateObjectPanel";
 var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
   const { t } = useTranslation2(meta.id);
   const sortedSpaces = useMemo(() => [
@@ -227,15 +230,11 @@ var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
   });
   return /* @__PURE__ */ React2.createElement(SearchList.Root, {
     onSearch: handleSearch
-  }, /* @__PURE__ */ React2.createElement("div", {
-    "aria-label": t("space input label"),
-    role: "combobox",
-    "aria-expanded": "true"
-  }, /* @__PURE__ */ React2.createElement(SearchList.Input, {
+  }, /* @__PURE__ */ React2.createElement(SearchList.Content, null, /* @__PURE__ */ React2.createElement(SearchList.Input, {
     autoFocus: true,
     "data-testid": "create-object-form.space-input",
     placeholder: t("space input placeholder")
-  }), /* @__PURE__ */ React2.createElement(SearchList.Content, null, /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.map((space) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
+  }), /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.map((space) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
     key: space.id,
     value: space.id,
     label: toLocalizedString(getSpaceDisplayName(space, {
@@ -243,7 +242,7 @@ var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
     }), t),
     onSelect: () => onChange?.(space.db),
     classNames: "flex items-center gap-2"
-  }))))));
+  })))));
 };
 var SelectSchema = ({ options, resolve, onChange }) => {
   const { t } = useTranslation2(meta.id);
@@ -256,15 +255,11 @@ var SelectSchema = ({ options, resolve, onChange }) => {
   });
   return /* @__PURE__ */ React2.createElement(SearchList.Root, {
     onSearch: handleSearch
-  }, /* @__PURE__ */ React2.createElement("div", {
-    "aria-label": t("schema input label"),
-    role: "combobox",
-    "aria-expanded": "true"
-  }, /* @__PURE__ */ React2.createElement(SearchList.Input, {
+  }, /* @__PURE__ */ React2.createElement(SearchList.Content, null, /* @__PURE__ */ React2.createElement(SearchList.Input, {
     autoFocus: true,
     "data-testid": "create-object-form.schema-input",
     placeholder: t("schema input placeholder")
-  }), /* @__PURE__ */ React2.createElement(SearchList.Content, null, /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.map((option) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
+  }), /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.map((option) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
     key: option.typename,
     value: option.typename,
     label: t("typename label", {
@@ -274,7 +269,7 @@ var SelectSchema = ({ options, resolve, onChange }) => {
     icon: resolve?.(option.typename)?.icon ?? "ph--placeholder--regular",
     onSelect: () => onChange(option.typename),
     classNames: "flex items-center gap-2"
-  }))))));
+  })))));
 };
 
 // src/components/CreateDialog/CreateObjectDialog.tsx
@@ -290,7 +285,7 @@ var CreateObjectDialog = ({ target: initialTarget, typename: initialTypename, vi
   const spaces = useSpaces();
   const closeRef = useRef(null);
   const resolve = useCallback3((typename2) => {
-    const metadata = manager.capabilities.getAll(Common2.Capability.Metadata).find(({ id }) => id === typename2)?.metadata;
+    const metadata = manager.capabilities.getAll(AppCapabilities.Metadata).find(({ id }) => id === typename2)?.metadata;
     return metadata?.createObject ? metadata : void 0;
   }, [
     manager
@@ -313,7 +308,7 @@ var CreateObjectDialog = ({ target: initialTarget, typename: initialTypename, vi
     const db2 = Database.isDatabase(target) ? target : target && Obj3.getDatabase(target);
     invariant(db2, "Missing database", {
       F: __dxlog_file,
-      L: 85,
+      L: 86,
       S: this,
       A: [
         "db",
@@ -332,7 +327,7 @@ var CreateObjectDialog = ({ target: initialTarget, typename: initialTypename, vi
       });
       const shouldNavigate = _shouldNavigate ?? (() => true);
       if (shouldNavigate(object)) {
-        yield* Effect.promise(() => operationInvoker.invokePromise(Common2.LayoutOperation.Open, {
+        yield* Effect.promise(() => operationInvoker.invokePromise(LayoutOperation2.Open, {
           subject: [
             Obj3.getDXN(object).toString()
           ]
@@ -356,7 +351,7 @@ var CreateObjectDialog = ({ target: initialTarget, typename: initialTypename, vi
     asChild: true
   }, /* @__PURE__ */ React3.createElement(Dialog.CloseIconButton, {
     ref: closeRef
-  }))), /* @__PURE__ */ React3.createElement(CreateObjectPanel, {
+  }))), /* @__PURE__ */ React3.createElement(Dialog.Body, null, /* @__PURE__ */ React3.createElement(CreateObjectPanel, {
     schemas: userSchemas,
     spaces,
     target,
@@ -368,14 +363,14 @@ var CreateObjectDialog = ({ target: initialTarget, typename: initialTypename, vi
     onTargetChange: setTarget,
     onTypenameChange: setTypename,
     onCreateObject: handleCreateObject
-  }));
+  })));
 };
 
 // src/components/CreateDialog/CreateSpaceDialog.tsx
 import * as Effect2 from "effect/Effect";
 import React4, { useCallback as useCallback4, useRef as useRef2 } from "react";
-import { Common as Common3 } from "@dxos/app-framework";
-import { useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation3 } from "@dxos/app-toolkit";
 import { runAndForwardErrors as runAndForwardErrors2 } from "@dxos/effect";
 import { Dialog as Dialog2, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { Form as Form2 } from "@dxos/react-ui-form";
@@ -392,10 +387,10 @@ var CreateSpaceDialog = () => {
     const program = Effect2.gen(function* () {
       const { data: result } = yield* Effect2.promise(() => invokePromise(SpaceOperation.Create, data));
       if (result?.space) {
-        yield* Effect2.promise(() => invokePromise(Common3.LayoutOperation.SwitchWorkspace, {
+        yield* Effect2.promise(() => invokePromise(LayoutOperation3.SwitchWorkspace, {
           subject: result.space.id
         }));
-        yield* Effect2.promise(() => invokePromise(Common3.LayoutOperation.UpdateDialog, {
+        yield* Effect2.promise(() => invokePromise(LayoutOperation3.UpdateDialog, {
           state: false
         }));
       }
@@ -408,14 +403,14 @@ var CreateSpaceDialog = () => {
     asChild: true
   }, /* @__PURE__ */ React4.createElement(Dialog2.CloseIconButton, {
     ref: closeRef
-  }))), /* @__PURE__ */ React4.createElement(Form2.Root, {
+  }))), /* @__PURE__ */ React4.createElement(Dialog2.Body, null, /* @__PURE__ */ React4.createElement(Form2.Root, {
     testId: "create-space-form",
     autoFocus: true,
     schema: SpaceForm,
     values: initialValues,
     fieldProvider: inputSurfaceLookup,
     onSave: handleCreateSpace
-  }, /* @__PURE__ */ React4.createElement(Form2.Viewport, null, /* @__PURE__ */ React4.createElement(Form2.Content, null, /* @__PURE__ */ React4.createElement(Form2.FieldSet, null), /* @__PURE__ */ React4.createElement(Form2.Submit, null)))));
+  }, /* @__PURE__ */ React4.createElement(Form2.Viewport, null, /* @__PURE__ */ React4.createElement(Form2.Content, null, /* @__PURE__ */ React4.createElement(Form2.FieldSet, null), /* @__PURE__ */ React4.createElement(Form2.Submit, null))))));
 };
 
 // src/components/CollectionSection.tsx
@@ -433,8 +428,9 @@ var CollectionSection = ({ role, subject }) => {
 
 // src/components/JoinDialog/JoinDialog.tsx
 import React6, { useCallback as useCallback5 } from "react";
-import { Common as Common4 } from "@dxos/app-framework";
-import { useAppGraph, useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation4 } from "@dxos/app-toolkit";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
 import { Trigger } from "@dxos/async";
 import { Graph } from "@dxos/plugin-graph";
 import { ObservabilityOperation } from "@dxos/plugin-observability/types";
@@ -454,7 +450,7 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
       return;
     }
     await Promise.all([
-      invokePromise(Common4.LayoutOperation.AddToast, {
+      invokePromise(LayoutOperation4.AddToast, {
         id: `${meta.id}/join-success`,
         duration: 5e3,
         title: [
@@ -470,7 +466,7 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
           }
         ]
       }),
-      invokePromise(Common4.LayoutOperation.UpdateDialog, {
+      invokePromise(LayoutOperation4.UpdateDialog, {
         state: false
       })
     ]);
@@ -485,7 +481,7 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
       });
       space = await trigger.wait();
     }
-    await invokePromise(Common4.LayoutOperation.SwitchWorkspace, {
+    await invokePromise(LayoutOperation4.SwitchWorkspace, {
       subject: space.id
     });
     const target = result?.target || (navigableCollections ? space?.id : void 0);
@@ -495,12 +491,12 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
       }).catch(() => {
       });
       await Promise.all([
-        invokePromise(Common4.LayoutOperation.Open, {
+        invokePromise(LayoutOperation4.Open, {
           subject: [
             target
           ]
         }),
-        invokePromise(Common4.LayoutOperation.Expose, {
+        invokePromise(LayoutOperation4.Expose, {
           subject: target
         })
       ]);
@@ -540,15 +536,14 @@ var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
 // src/components/MembersContainer/MembersContainer.tsx
 import React7, { useCallback as useCallback6, useMemo as useMemo3, useState as useState3 } from "react";
 import { QR } from "react-qr-rounded";
-import { useOperationInvoker as useOperationInvoker5 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker5 } from "@dxos/app-framework/ui";
 import { Obj as Obj4 } from "@dxos/echo";
 import { log } from "@dxos/log";
 import { useConfig } from "@dxos/react-client";
 import { useSpaceInvitations } from "@dxos/react-client/echo";
 import { Invitation, InvitationEncoder } from "@dxos/react-client/invitations";
 import { Button as Button2, Clipboard, Icon as Icon2, Input, useId, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { ControlFrame, ControlFrameItem, ControlItemInput, ControlPage, ControlSection } from "@dxos/react-ui-form";
-import { Layout } from "@dxos/react-ui-mosaic";
+import { Settings } from "@dxos/react-ui-form";
 import { Collection } from "@dxos/schema";
 import { AuthCode, BifurcatedAction, Centered, Emoji, InvitationList, SpaceMemberList, Viewport, translationKey as shellTranslationKey } from "@dxos/shell/react";
 import { hexToEmoji } from "@dxos/util";
@@ -562,7 +557,7 @@ var handleInvitationEvent = (invitation, subscription) => {
       authCode: invitation.authCode
     }), void 0, {
       F: __dxlog_file2,
-      L: 41,
+      L: 40,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -650,21 +645,19 @@ var MembersContainer = ({ space, createInvitationUrl }) => {
   const handleBack = () => {
     setSelectedInvitation(null);
   };
-  return /* @__PURE__ */ React7.createElement(Clipboard.Provider, null, /* @__PURE__ */ React7.createElement(Layout.Container, {
-    scrollable: true
-  }, /* @__PURE__ */ React7.createElement(ControlPage, null, /* @__PURE__ */ React7.createElement(ControlSection, {
+  return /* @__PURE__ */ React7.createElement(Clipboard.Provider, null, /* @__PURE__ */ React7.createElement(Settings.Root, null, /* @__PURE__ */ React7.createElement(Settings.Section, {
     title: t("members verbose label"),
     description: t("members description")
-  }, /* @__PURE__ */ React7.createElement(ControlFrame, null, /* @__PURE__ */ React7.createElement(ControlFrameItem, {
+  }, /* @__PURE__ */ React7.createElement(Settings.Frame, null, /* @__PURE__ */ React7.createElement(Settings.FrameItem, {
     title: t("members label")
   }, /* @__PURE__ */ React7.createElement(SpaceMemberList, {
     spaceKey: space.key,
     includeSelf: true
-  })), locked && /* @__PURE__ */ React7.createElement(ControlFrameItem, {
+  })), locked && /* @__PURE__ */ React7.createElement(Settings.FrameItem, {
     title: t("invitations label")
   }, /* @__PURE__ */ React7.createElement("p", {
     className: "text-description mbe-2"
-  }, t("locked space description"))), !locked && /* @__PURE__ */ React7.createElement(ControlFrameItem, {
+  }, t("locked space description"))), !locked && /* @__PURE__ */ React7.createElement(Settings.FrameItem, {
     title: t("invitations label")
   }, selectedInvitation && /* @__PURE__ */ React7.createElement(InvitationSection, {
     ...selectedInvitation,
@@ -684,14 +677,14 @@ var MembersContainer = ({ space, createInvitationUrl }) => {
     "data-testid": "membersContainer.createInvitation"
   })))), /* @__PURE__ */ React7.createElement("div", {
     className: "justify-center p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]"
-  }, /* @__PURE__ */ React7.createElement(ControlItemInput, {
+  }, /* @__PURE__ */ React7.createElement(Settings.ItemInput, {
     title: t("space locked label"),
     description: t("space locked description")
   }, /* @__PURE__ */ React7.createElement(Input.Switch, {
     checked: locked,
     onCheckedChange: handleChangeLocked,
     classNames: "justify-self-end"
-  })))))));
+  }))))));
 };
 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";
@@ -807,8 +800,8 @@ var MenuFooter = ({ object }) => {
 
 // src/components/ObjectRenamePopover/ObjectRenamePopover.tsx
 import React9, { useCallback as useCallback7, useRef as useRef3, useState as useState4 } from "react";
-import { Common as Common5 } from "@dxos/app-framework";
-import { useOperationInvoker as useOperationInvoker6 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker6 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation5 } from "@dxos/app-toolkit";
 import { Obj as Obj5 } from "@dxos/echo";
 import { log as log2 } from "@dxos/log";
 import { Button as Button3, Input as Input2, useTranslation as useTranslation9 } from "@dxos/react-ui";
@@ -833,7 +826,7 @@ var ObjectRenamePopover = ({ object }) => {
         C: (f, a) => f(...a)
       });
     }
-    void invokePromise(Common5.LayoutOperation.UpdatePopover, {
+    void invokePromise(LayoutOperation5.UpdatePopover, {
       anchorId: "",
       state: false
     });
@@ -868,25 +861,28 @@ var ObjectRenamePopover = ({ object }) => {
 // src/components/SchemaContainer.tsx
 import React10, { useEffect as useEffect2, useState as useState5 } from "react";
 import { useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { ControlPage as ControlPage2, ControlSection as ControlSection2, controlItemClasses } from "@dxos/react-ui-form";
-import { Layout as Layout2 } from "@dxos/react-ui-mosaic";
+import { Settings as Settings2 } from "@dxos/react-ui-form";
+import { mx } from "@dxos/ui-theme";
+var itemClasses = mx([
+  "container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center",
+  "*:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd",
+  "border border-separator rounded-md"
+]);
 var SchemaContainer = ({ space }) => {
   const { t } = useTranslation10(meta.id);
   const schemas = useQuerySpaceSchemas(space);
-  return /* @__PURE__ */ React10.createElement(Layout2.Container, {
-    scrollable: true
-  }, /* @__PURE__ */ React10.createElement(ControlPage2, null, /* @__PURE__ */ React10.createElement(ControlSection2, {
+  return /* @__PURE__ */ React10.createElement(Settings2.Root, null, /* @__PURE__ */ React10.createElement(Settings2.Section, {
     title: t("schema verbose label"),
     description: t("schema description")
   }, /* @__PURE__ */ React10.createElement("div", {
     role: "none",
-    className: controlItemClasses
+    className: itemClasses
   }, schemas.length === 0 && /* @__PURE__ */ React10.createElement("div", {
     className: "text-center plb-4"
   }, t("no schemas found message")), schemas.map((schema) => /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     key: schema.id
-  }, schema.typename))))));
+  }, schema.typename)))));
 };
 var useQuerySpaceSchemas = (space) => {
   const [schemas, setSchemas] = useState5([]);
@@ -904,11 +900,11 @@ var useQuerySpaceSchemas = (space) => {
 
 // src/components/SpacePluginSettings.tsx
 import React11 from "react";
-import { useOperationInvoker as useOperationInvoker7 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker7 } from "@dxos/app-framework/ui";
 import { useClient as useClient5 } from "@dxos/react-client";
 import { useSpaces as useSpaces2 } from "@dxos/react-client/echo";
 import { IconButton, Input as Input3, List, ListItem, toLocalizedString as toLocalizedString3, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { ControlGroup, ControlItemInput as ControlItemInput2, ControlPage as ControlPage3, ControlSection as ControlSection3, controlItemClasses as controlItemClasses2 } from "@dxos/react-ui-form";
+import { Settings as Settings3 } from "@dxos/react-ui-form";
 var SpacePluginSettings = ({ settings, onSettingsChange }) => {
   const { t } = useTranslation11(meta.id);
   const client = useClient5();
@@ -916,22 +912,19 @@ var SpacePluginSettings = ({ settings, onSettingsChange }) => {
     all: settings.showHidden
   });
   const { invokePromise } = useOperationInvoker7();
-  return /* @__PURE__ */ React11.createElement(ControlPage3, null, /* @__PURE__ */ React11.createElement(ControlSection3, {
+  return /* @__PURE__ */ React11.createElement(Settings3.Root, null, /* @__PURE__ */ React11.createElement(Settings3.Section, {
     title: t("space settings label"),
     description: t("space settings description")
-  }, /* @__PURE__ */ React11.createElement(ControlGroup, null, /* @__PURE__ */ React11.createElement(ControlItemInput2, {
+  }, /* @__PURE__ */ React11.createElement(Settings3.Group, null, /* @__PURE__ */ React11.createElement(Settings3.ItemInput, {
     title: t("show hidden spaces label")
   }, /* @__PURE__ */ React11.createElement(Input3.Switch, {
     checked: settings.showHidden,
-    onCheckedChange: (checked) => onSettingsChange((s) => ({
-      ...s,
+    onCheckedChange: (checked) => onSettingsChange((state) => ({
+      ...state,
       showHidden: !!checked
     }))
-  }))), /* @__PURE__ */ React11.createElement(List, {
-    classNames: [
-      controlItemClasses2,
-      "flex flex-col gap-trimSm"
-    ]
+  }))), /* @__PURE__ */ React11.createElement(Settings3.Container, null, /* @__PURE__ */ React11.createElement(List, {
+    classNames: "flex flex-col gap-trimSm"
   }, spaces.map((space) => /* @__PURE__ */ React11.createElement(ListItem.Root, {
     key: space.id,
     classNames: "is-full items-center"
@@ -945,13 +938,14 @@ var SpacePluginSettings = ({ settings, onSettingsChange }) => {
       space
     }),
     label: t("open space settings label")
-  }))))));
+  })))))));
 };
 
 // src/components/SpacePresence/SpacePresence.tsx
 import * as Option2 from "effect/Option";
 import React12, { forwardRef, useCallback as useCallback8, useEffect as useEffect3, useState as useState6 } from "react";
-import { useAppGraph as useAppGraph2, useAtomCapability } from "@dxos/app-framework/react";
+import { useAtomCapability } from "@dxos/app-framework/ui";
+import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
 import { generateName } from "@dxos/display-name";
 import { Obj as Obj6 } from "@dxos/echo";
 import { PublicKey } from "@dxos/react-client";
@@ -1111,8 +1105,8 @@ var SmallPresence = ({ count = 0, attended, containsAttended }) => {
 
 // src/components/SpaceRenamePopover/SpaceRenamePopover.tsx
 import React13, { useCallback as useCallback9, useRef as useRef4, useState as useState7 } from "react";
-import { Common as Common6 } from "@dxos/app-framework";
-import { useOperationInvoker as useOperationInvoker8 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker8 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation6 } from "@dxos/app-toolkit";
 import { Obj as Obj7 } from "@dxos/echo";
 import { Button as Button4, Input as Input4, Popover as Popover2, useTranslation as useTranslation13 } from "@dxos/react-ui";
 import { osTranslations as osTranslations4 } from "@dxos/ui-theme";
@@ -1126,7 +1120,7 @@ var SpaceRenamePopover = ({ space }) => {
     Obj7.change(space.properties, (p) => {
       p.name = name;
     });
-    void invokePromise(Common6.LayoutOperation.UpdatePopover, {
+    void invokePromise(LayoutOperation6.UpdatePopover, {
       anchorId: "",
       state: false
     });
@@ -1163,17 +1157,16 @@ var SpaceRenamePopover = ({ space }) => {
 
 // src/components/SpaceSettings/SpaceSettingsContainer.tsx
 import * as Schema from "effect/Schema";
-import React14, { forwardRef as forwardRef2, useCallback as useCallback10, useMemo as useMemo4, useState as useState8 } from "react";
-import { Common as Common7 } from "@dxos/app-framework";
-import { useCapabilities, useOperationInvoker as useOperationInvoker9 } from "@dxos/app-framework/react";
+import React14, { useCallback as useCallback10, useMemo as useMemo4, useState as useState8 } from "react";
+import { useCapabilities, useOperationInvoker as useOperationInvoker9 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation7 } from "@dxos/app-toolkit";
 import { Obj as Obj8 } from "@dxos/echo";
 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 { SpaceState } from "@dxos/react-client/echo";
 import { Button as Button5, Input as Input5, useFileDownload, useMulticastObservable, useTranslation as useTranslation14 } from "@dxos/react-ui";
-import { ControlItem, ControlItemInput as ControlItemInput3, ControlPage as ControlPage4, ControlSection as ControlSection4, Form as Form3 } from "@dxos/react-ui-form";
-import { Layout as Layout3 } from "@dxos/react-ui-mosaic";
+import { Form as Form3, Settings as Settings4 } from "@dxos/react-ui-form";
 import { HuePicker, IconPicker } from "@dxos/react-ui-pickers";
 var __dxlog_file4 = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/SpaceSettings/SpaceSettingsContainer.tsx";
 var SpaceFormSchema = SpaceForm.pipe(Schema.extend(Schema.Struct({
@@ -1181,7 +1174,7 @@ var SpaceFormSchema = SpaceForm.pipe(Schema.extend(Schema.Struct({
     title: "Archive Space"
   })
 })));
-var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRef) => {
+var SpaceSettingsContainer = ({ space }) => {
   const { t } = useTranslation14(meta.id);
   const { invokePromise } = useOperationInvoker9();
   const client = useClient6();
@@ -1192,7 +1185,7 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
     await space?.internal.setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED).catch((err) => {
       log3.catch(err, void 0, {
         F: __dxlog_file4,
-        L: 58,
+        L: 49,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1201,42 +1194,44 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
   }, [
     space
   ]);
-  const handleSave = useCallback10((properties) => {
-    void toggleEdgeReplication(properties.edgeReplication ?? false);
-    const nameChanged = properties.name !== space.properties.name;
-    const iconChanged = properties.icon !== space.properties.icon;
-    const hueChanged = properties.hue !== space.properties.hue;
-    if (nameChanged || iconChanged || hueChanged) {
+  const handleValuesChanged = useCallback10((newValues, meta2) => {
+    const changed = meta2.changed ?? {};
+    if (changed["edgeReplication"]) {
+      void toggleEdgeReplication(newValues.edgeReplication ?? false);
+    }
+    if (changed["name"] || changed["icon"] || changed["hue"]) {
       Obj8.change(space.properties, (p) => {
-        if (nameChanged) {
-          p.name = properties.name;
+        if (changed["name"] && newValues.name !== void 0) {
+          p.name = newValues.name;
         }
-        if (iconChanged) {
-          p.icon = properties.icon;
+        if (changed["icon"]) {
+          p.icon = newValues.icon;
         }
-        if (hueChanged) {
-          p.hue = properties.hue;
+        if (changed["hue"]) {
+          p.hue = newValues.hue;
         }
       });
     }
-    if (properties.archived && !archived) {
-      void (async () => {
-        await invokePromise(SpaceOperation.Close, {
+    if (changed["archived"]) {
+      if (newValues.archived && !archived) {
+        void invokePromise(SpaceOperation.Close, {
           space
         });
-        await invokePromise(Common7.LayoutOperation.SwitchWorkspace, {
+        void invokePromise(LayoutOperation7.SwitchWorkspace, {
           subject: client.spaces.default.id
         });
-      })();
-    } else if (!properties.archived && archived) {
-      void invokePromise(SpaceOperation.Open, {
-        space
-      });
+      } else if (!newValues.archived && archived) {
+        void invokePromise(SpaceOperation.Open, {
+          space
+        });
+      }
     }
   }, [
     space,
-    toggleEdgeReplication,
-    archived
+    client,
+    archived,
+    invokePromise,
+    toggleEdgeReplication
   ]);
   const values = useMemo4(() => ({
     name: space.properties.name,
@@ -1257,7 +1252,7 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
         onValueChange,
         type
       ]);
-      return /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+      return /* @__PURE__ */ React14.createElement(Settings4.ItemInput, {
         title: label,
         description: t("display name description")
       }, /* @__PURE__ */ React14.createElement(Input5.TextInput, {
@@ -1276,7 +1271,7 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
         onValueChange,
         type
       ]);
-      return /* @__PURE__ */ React14.createElement(ControlItem, {
+      return /* @__PURE__ */ React14.createElement(Settings4.Item, {
         title: label,
         description: t("icon description")
       }, /* @__PURE__ */ React14.createElement(IconPicker, {
@@ -1295,7 +1290,7 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
         onValueChange,
         type
       ]);
-      return /* @__PURE__ */ React14.createElement(ControlItem, {
+      return /* @__PURE__ */ React14.createElement(Settings4.Item, {
         title: label,
         description: t("hue description")
       }, /* @__PURE__ */ React14.createElement(HuePicker, {
@@ -1310,7 +1305,7 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
         onValueChange,
         type
       ]);
-      return /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+      return /* @__PURE__ */ React14.createElement(Settings4.ItemInput, {
         title: label,
         description: t("edge replication description")
       }, /* @__PURE__ */ React14.createElement(Input5.Switch, {
@@ -1325,7 +1320,7 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
         type,
         getValue
       ]);
-      return /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+      return /* @__PURE__ */ React14.createElement(Settings4.ItemInput, {
         title: label,
         description: t("archive space description")
       }, /* @__PURE__ */ React14.createElement(Button5, {
@@ -1336,7 +1331,8 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
     }
   }), [
     t,
-    space
+    space,
+    client
   ]);
   const download = useFileDownload();
   const handleBackup = useCallback10(async () => {
@@ -1359,10 +1355,7 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
     space,
     repairs
   ]);
-  return /* @__PURE__ */ React14.createElement(Layout3.Container, {
-    scrollable: true,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(ControlPage4, null, /* @__PURE__ */ React14.createElement(ControlSection4, {
+  return /* @__PURE__ */ React14.createElement(Settings4.Root, null, /* @__PURE__ */ React14.createElement(Settings4.Section, {
     title: t("space properties settings verbose label"),
     description: t("space properties settings description", {
       ns: meta.id
@@ -1371,32 +1364,30 @@ var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRe
     fieldMap,
     schema: SpaceFormSchema,
     values,
-    autoSave: true,
-    onSave: handleSave
-  }, /* @__PURE__ */ React14.createElement(Form3.FieldSet, null))), /* @__PURE__ */ React14.createElement(ControlSection4, {
+    onValuesChanged: handleValuesChanged
+  }, /* @__PURE__ */ React14.createElement(Form3.FieldSet, {
+    classNames: "space-y-trimMd"
+  }))), /* @__PURE__ */ React14.createElement(Settings4.Section, {
     title: t("space controls title"),
     description: t("space controls description")
-  }, /* @__PURE__ */ React14.createElement("div", {
-    role: "none",
-    className: "container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]"
-  }, /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+  }, /* @__PURE__ */ React14.createElement(Settings4.ItemInput, {
     title: t("backup space title"),
     description: t("backup space description")
   }, /* @__PURE__ */ React14.createElement(Button5, {
     onClick: handleBackup
-  }, t("download backup label"))), /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+  }, t("download backup label"))), /* @__PURE__ */ React14.createElement(Settings4.ItemInput, {
     title: t("repair space title"),
     description: t("repair space description")
   }, /* @__PURE__ */ React14.createElement(Button5, {
     onClick: handleRepair
-  }, t("repair space label")))))));
-});
+  }, t("repair space label")))));
+};
 SpaceSettingsContainer.displayName = "SpaceSettingsContainer";
 
 // src/components/SyncStatus/InlineSyncStatus.tsx
 import * as Option3 from "effect/Option";
 import React15, { useEffect as useEffect4, useState as useState9 } from "react";
-import { useAppGraph as useAppGraph3 } from "@dxos/app-framework/react";
+import { useAppGraph as useAppGraph3 } from "@dxos/app-toolkit/ui";
 import { EdgeStatus } from "@dxos/protocols/proto/dxos/client/services";
 import { EdgeReplicationSetting as EdgeReplicationSetting2 } from "@dxos/protocols/proto/dxos/echo/metadata";
 import { useClient as useClient7 } from "@dxos/react-client";
@@ -1449,7 +1440,7 @@ import { useClient as useClient8 } from "@dxos/react-client";
 import { useStream } from "@dxos/react-client/devtools";
 import { getSyncSummary, useSyncState } from "@dxos/react-client/echo";
 import { Icon as Icon4, Popover as Popover3, useTranslation as useTranslation16 } from "@dxos/react-ui";
-import { mx } from "@dxos/ui-theme";
+import { mx as mx2 } from "@dxos/ui-theme";
 import { Unit } from "@dxos/util";
 
 // src/components/SyncStatus/save-tracker.ts
@@ -1608,7 +1599,7 @@ var EdgeConnectionPopover = () => {
     className: "flex items-center gap-2 mbe-2"
   }, /* @__PURE__ */ React16.createElement(Icon4, {
     icon: isConnected ? "ph--check-circle--regular" : "ph--warning-circle--regular",
-    classNames: mx(isConnected ? "text-successText" : "text-errorText animate-pulse")
+    classNames: mx2(isConnected ? "text-successText" : "text-errorText animate-pulse")
   }), /* @__PURE__ */ React16.createElement("span", {
     className: "font-medium text-sm"
   }, isConnected ? t("sync edge connected label") : t("sync edge disconnected label"))), status?.state === EdgeStatus2.ConnectionState.NOT_CONNECTED && /* @__PURE__ */ React16.createElement("div", {
@@ -1758,7 +1749,7 @@ var getQueryTarget = (query, space) => {
 // src/components/ViewEditor.tsx
 import * as Schema2 from "effect/Schema";
 import React17, { useCallback as useCallback11, useState as useState11 } from "react";
-import { useOperationInvoker as useOperationInvoker10 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker10 } from "@dxos/app-framework/ui";
 import { DXN as DXN2, Filter as Filter3, Obj as Obj9, Query as Query2, Tag, Type as Type2 } from "@dxos/echo";
 import { useClient as useClient9 } from "@dxos/react-client";
 import { getSpace as getSpace2, useQuery as useQuery2 } from "@dxos/react-client/echo";
@@ -1855,10 +1846,10 @@ var ViewEditor = ({ view }) => {
 
 // src/components/index.ts
 import { lazy } from "react";
-var CollectionArticle = lazy(() => import("./CollectionArticle-XPNA6EHZ.mjs"));
-var ObjectCardStack = lazy(() => import("./ObjectCardStack-TWHN6C2Y.mjs"));
-var ObjectDetails = lazy(() => import("./ObjectDetails-GEDIISKK.mjs"));
-var RecordArticle = lazy(() => import("./RecordArticle-W57QE7QV.mjs"));
+var CollectionArticle = lazy(() => import("./CollectionArticle-LKTAABXP.mjs"));
+var ObjectCardStack = lazy(() => import("./ObjectCardStack-CXNBCSMR.mjs"));
+var ObjectDetails = lazy(() => import("./ObjectDetails-HXV4IQEM.mjs"));
+var RecordArticle = lazy(() => import("./RecordArticle-36LDKFWF.mjs"));
 
 export {
   AwaitingObject,
@@ -1895,4 +1886,4 @@ export {
   ObjectDetails,
   RecordArticle
 };
-//# sourceMappingURL=chunk-3X2EA2OA.mjs.map
+//# sourceMappingURL=chunk-XRTOZE23.mjs.map