@dxos/plugin-space 0.8.4-main.66e292d → 0.8.4-main.69d29f4

package/dist/lib/node-esm/chunk-EYS3L2NO.mjs

@@ -0,0 +1,1899 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  useInputSurfaceLookup,
+  usePath,
+  useTypeOptions
+} from "./chunk-JOBIWCBC.mjs";
+import {
+  COMPOSER_SPACE_LOCK,
+  getSpaceDisplayName
+} from "./chunk-7KMYUWSR.mjs";
+import {
+  SpaceCapabilities,
+  SpaceForm,
+  SpaceOperation
+} from "./chunk-MPL6NHQX.mjs";
+import {
+  meta
+} from "./chunk-SL4BJSUG.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 { Obj } from "@dxos/echo";
+import { useClient } from "@dxos/react-client";
+import { Filter, useQuery } from "@dxos/react-client/echo";
+import { Button, Icon, Toast, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
+var WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1e3;
+var TOAST_TIMEOUT = 4 * 60 * 1e3;
+var AwaitingObject = ({ id }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const [open, setOpen] = useState(true);
+  const [waiting, setWaiting] = useState(true);
+  const [found, setFound] = useState(false);
+  const layout = useLayout();
+  const client = useClient();
+  const objects = useQuery(client.spaces, Filter.everything());
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+    const timeout = setTimeout(() => setWaiting(false), WAIT_FOR_OBJECT_TIMEOUT);
+    return () => clearTimeout(timeout);
+  }, [
+    id
+  ]);
+  useEffect(() => {
+    if (objects.findIndex((object) => Obj.getDXN(object).toString() === id) > -1) {
+      setFound(true);
+      if (layout.active.includes(id)) {
+        setOpen(false);
+      }
+    }
+  }, [
+    id,
+    objects,
+    layout
+  ]);
+  const handleClose = useCallback(async () => invokePromise(SpaceOperation.WaitForObject, {
+    id: void 0
+  }), [
+    invokePromise
+  ]);
+  const handleNavigate = useCallback(() => {
+    void invokePromise(Common.LayoutOperation.Open, {
+      subject: [
+        id
+      ]
+    });
+    void handleClose();
+  }, [
+    id,
+    handleClose,
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React.createElement(Toast.Root, {
+    open,
+    duration: TOAST_TIMEOUT,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React.createElement(Toast.Body, null, /* @__PURE__ */ React.createElement(Toast.Title, {
+    classNames: "flex items-center gap-2"
+  }, found ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--check-circle--regular",
+    size: 5
+  }), /* @__PURE__ */ React.createElement("span", null, t("found object label"))) : waiting ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--circle-notch--regular",
+    size: 5,
+    classNames: "animate-spin"
+  }), /* @__PURE__ */ React.createElement("span", null, t("waiting for object label"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--circle-dashed--regular",
+    size: 5
+  }), /* @__PURE__ */ React.createElement("span", null, t("object not found label")))), /* @__PURE__ */ React.createElement(Toast.Description, null, t(found ? "found object description" : waiting ? "waiting for object description" : "object not found description"))), /* @__PURE__ */ React.createElement(Toast.Actions, null, found ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Toast.Action, {
+    altText: t("go to object alt"),
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "primary",
+    onClick: handleNavigate
+  }, t("go to object label"))), /* @__PURE__ */ React.createElement(Toast.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleClose
+  }, t("close label", {
+    ns: osTranslations
+  })))) : /* @__PURE__ */ React.createElement(Toast.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleClose
+  }, t(waiting ? "close label" : "confirm label", {
+    ns: osTranslations
+  })))));
+};
+
+// 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 { Database, Obj as Obj3, Type } from "@dxos/echo";
+import { EntityKind, getTypeAnnotation as getTypeAnnotation2 } from "@dxos/echo/internal";
+import { runAndForwardErrors } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { Operation } from "@dxos/operation";
+import { useClient as useClient2 } from "@dxos/react-client";
+import { useSpaces } from "@dxos/react-client/echo";
+import { Dialog, useTranslation as useTranslation3 } from "@dxos/react-ui";
+
+// src/components/CreateDialog/CreateObjectPanel.tsx
+import * as Option from "effect/Option";
+import React2, { useCallback as useCallback2, useMemo } from "react";
+import { Obj as Obj2 } from "@dxos/echo";
+import { getTypeAnnotation } from "@dxos/echo/internal";
+import { toLocalizedString, useDefaultValue, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Form, omitId } from "@dxos/react-ui-form";
+import { SearchList, useSearchListResults } from "@dxos/react-ui-searchlist";
+import { ViewAnnotation } from "@dxos/schema";
+import { isNonNullable } from "@dxos/util";
+var CreateObjectPanel = ({ schemas, spaces, typename, target, views, initialFormValues: _initialFormValues, defaultSpaceId, resolve, onTargetChange, onTypenameChange, onCreateObject }) => {
+  const { t } = useTranslation2(meta.id);
+  const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
+  const metadata = typename && resolve?.(typename);
+  const options = schemas.filter((schema) => {
+    if (views == null) {
+      return true;
+    } else {
+      return views === ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false));
+    }
+  }).map((schema) => getTypeAnnotation(schema)).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 = useCallback2(async (props) => {
+    if (!metadata) {
+      return;
+    }
+    await onCreateObject?.({
+      metadata,
+      data: props
+    });
+  }, [
+    onCreateObject,
+    metadata
+  ]);
+  const handleSetTypename = useCallback2(async (typename2) => {
+    const metadata2 = resolve?.(typename2);
+    if (metadata2 && !metadata2.inputSchema) {
+      await onCreateObject?.({
+        metadata: metadata2
+      });
+    } else {
+      onTypenameChange?.(typename2);
+    }
+  }, [
+    resolve,
+    onCreateObject
+  ]);
+  const inputSurfaceLookup = useInputSurfaceLookup({
+    target
+  });
+  return !metadata ? /* @__PURE__ */ React2.createElement(SelectSchema, {
+    options,
+    resolve,
+    onChange: handleSetTypename
+  }) : !target ? /* @__PURE__ */ React2.createElement(SelectSpace, {
+    spaces,
+    defaultSpaceId,
+    onChange: onTargetChange
+  }) : metadata.inputSchema ? /* @__PURE__ */ React2.createElement(Form.Root, {
+    testId: "create-object-form",
+    autoFocus: true,
+    schema: omitId(metadata.inputSchema),
+    values: initialFormValues,
+    db: Obj2.isObject(target) ? Obj2.getDatabase(target) : target,
+    fieldProvider: inputSurfaceLookup,
+    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;
+};
+var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
+  const { t } = useTranslation2(meta.id);
+  const sortedSpaces = useMemo(() => [
+    ...spaces
+  ].sort((a, b) => {
+    const labelA = toLocalizedString(getSpaceDisplayName(a, {
+      personal: a.id === defaultSpaceId
+    }), t);
+    const labelB = toLocalizedString(getSpaceDisplayName(b, {
+      personal: b.id === defaultSpaceId
+    }), t);
+    return labelA.localeCompare(labelB);
+  }), [
+    spaces,
+    defaultSpaceId,
+    t
+  ]);
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedSpaces,
+    extract: (space) => toLocalizedString(getSpaceDisplayName(space, {
+      personal: space.id === defaultSpaceId
+    }), t)
+  });
+  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, {
+    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, {
+    key: space.id,
+    value: space.id,
+    label: toLocalizedString(getSpaceDisplayName(space, {
+      personal: space.id === defaultSpaceId
+    }), t),
+    onSelect: () => onChange?.(space.db),
+    classNames: "flex items-center gap-2"
+  }))))));
+};
+var SelectSchema = ({ options, resolve, onChange }) => {
+  const { t } = useTranslation2(meta.id);
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) => t("typename label", {
+      ns: option.typename,
+      defaultValue: option.typename
+    })
+  });
+  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, {
+    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, {
+    key: option.typename,
+    value: option.typename,
+    label: t("typename label", {
+      ns: option.typename,
+      defaultValue: option.typename
+    }),
+    icon: resolve?.(option.typename)?.icon ?? "ph--placeholder--regular",
+    onSelect: () => onChange(option.typename),
+    classNames: "flex items-center gap-2"
+  }))))));
+};
+
+// src/components/CreateDialog/CreateObjectDialog.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/CreateDialog/CreateObjectDialog.tsx";
+var CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
+var CreateObjectDialog = ({ target: initialTarget, typename: initialTypename, views, initialFormValues, onCreateObject, shouldNavigate: _shouldNavigate }) => {
+  const manager = usePluginManager();
+  const { t } = useTranslation3(meta.id);
+  const operationInvoker = useOperationInvoker2();
+  const [target, setTarget] = useState2(initialTarget);
+  const [typename, setTypename] = useState2(initialTypename);
+  const client = useClient2();
+  const spaces = useSpaces();
+  const closeRef = useRef(null);
+  const resolve = useCallback3((typename2) => {
+    const metadata = manager.capabilities.getAll(Common2.Capability.Metadata).find(({ id }) => id === typename2)?.metadata;
+    return metadata?.createObject ? metadata : void 0;
+  }, [
+    manager
+  ]);
+  const db = Database.isDatabase(target) ? target : target && Obj3.getDatabase(target);
+  const schemas = db?.schemaRegistry.query({
+    location: [
+      "runtime"
+    ],
+    includeSystem: false
+  }).runSync();
+  const userSchemas = useMemo2(() => schemas?.filter((schema) => getTypeAnnotation2(schema)?.kind !== EntityKind.Relation).filter((schema) => !!resolve(Type.getTypename(schema))) ?? [], [
+    schemas
+  ]);
+  const handleCreateObject = useCallback3(({ metadata, data = {} }) => Effect.gen(function* () {
+    if (!target) {
+      return;
+    }
+    closeRef.current?.click();
+    const db2 = Database.isDatabase(target) ? target : target && Obj3.getDatabase(target);
+    invariant(db2, "Missing database", {
+      F: __dxlog_file,
+      L: 85,
+      S: this,
+      A: [
+        "db",
+        "'Missing database'"
+      ]
+    });
+    const object = yield* metadata.createObject(data, {
+      db: db2
+    });
+    if (Obj3.isObject(object) && !Obj3.instanceOf(Type.PersistentType, object)) {
+      const hidden = !metadata.addToCollectionOnCreate;
+      yield* operationInvoker.invoke(SpaceOperation.AddObject, {
+        target,
+        object,
+        hidden
+      });
+      const shouldNavigate = _shouldNavigate ?? (() => true);
+      if (shouldNavigate(object)) {
+        yield* Effect.promise(() => operationInvoker.invokePromise(Common2.LayoutOperation.Open, {
+          subject: [
+            Obj3.getDXN(object).toString()
+          ]
+        }));
+      }
+      onCreateObject?.(object);
+    }
+  }).pipe(Effect.provideService(Capability.Service, manager.capabilities), Effect.provideService(Operation.Service, operationInvoker), runAndForwardErrors), [
+    target,
+    _shouldNavigate,
+    onCreateObject,
+    manager.capabilities,
+    operationInvoker
+  ]);
+  return /* @__PURE__ */ React3.createElement(Dialog.Content, null, /* @__PURE__ */ React3.createElement(Dialog.Header, null, /* @__PURE__ */ React3.createElement(Dialog.Title, null, t("create object dialog title", {
+    object: t("typename label", {
+      ns: typename,
+      defaultValue: views ? "View" : "Object"
+    })
+  })), /* @__PURE__ */ React3.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Dialog.CloseIconButton, {
+    ref: closeRef
+  }))), /* @__PURE__ */ React3.createElement(CreateObjectPanel, {
+    schemas: userSchemas,
+    spaces,
+    target,
+    views,
+    typename,
+    initialFormValues,
+    defaultSpaceId: client.spaces.default.id,
+    resolve,
+    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 { 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";
+var CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
+var initialValues = {
+  edgeReplication: true
+};
+var CreateSpaceDialog = () => {
+  const closeRef = useRef2(null);
+  const { t } = useTranslation4(meta.id);
+  const { invokePromise } = useOperationInvoker3();
+  const inputSurfaceLookup = useInputSurfaceLookup();
+  const handleCreateSpace = useCallback4(async (data) => {
+    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, {
+          subject: result.space.id
+        }));
+        yield* Effect2.promise(() => invokePromise(Common3.LayoutOperation.UpdateDialog, {
+          state: false
+        }));
+      }
+    });
+    await runAndForwardErrors2(program);
+  }, [
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React4.createElement(Dialog2.Content, null, /* @__PURE__ */ React4.createElement(Dialog2.Header, null, /* @__PURE__ */ React4.createElement(Dialog2.Title, null, t("create space dialog title")), /* @__PURE__ */ React4.createElement(Dialog2.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Dialog2.CloseIconButton, {
+    ref: closeRef
+  }))), /* @__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)))));
+};
+
+// src/components/CollectionSection.tsx
+import React5 from "react";
+import { useTranslation as useTranslation5 } from "@dxos/react-ui";
+var CollectionSection = ({ role, subject }) => {
+  const { t } = useTranslation5(meta.id);
+  return /* @__PURE__ */ React5.createElement("div", {
+    role,
+    className: "min-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center"
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "truncate"
+  }, subject.name ?? t("unnamed collection label")));
+};
+
+// 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 { Trigger } from "@dxos/async";
+import { Graph } from "@dxos/plugin-graph";
+import { ObservabilityOperation } from "@dxos/plugin-observability/types";
+import { useClient as useClient3 } from "@dxos/react-client";
+import { Dialog as Dialog3, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { JoinPanel } from "@dxos/shell/react";
+import { osTranslations as osTranslations2 } from "@dxos/ui-theme";
+var JOIN_DIALOG = `${meta.id}/JoinDialog`;
+var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
+  const { invokePromise } = useOperationInvoker4();
+  const client = useClient3();
+  const { graph } = useAppGraph();
+  const { t } = useTranslation6(meta.id);
+  const handleDone = useCallback5(async (result) => {
+    const spaceKey = result?.spaceKey;
+    if (!spaceKey) {
+      return;
+    }
+    await Promise.all([
+      invokePromise(Common4.LayoutOperation.AddToast, {
+        id: `${meta.id}/join-success`,
+        duration: 5e3,
+        title: [
+          "join success label",
+          {
+            ns: meta.id
+          }
+        ],
+        closeLabel: [
+          "dismiss label",
+          {
+            ns: meta.id
+          }
+        ]
+      }),
+      invokePromise(Common4.LayoutOperation.UpdateDialog, {
+        state: false
+      })
+    ]);
+    let space = client.spaces.get(spaceKey);
+    if (!space) {
+      const trigger = new Trigger();
+      client.spaces.subscribe(() => {
+        const space2 = client.spaces.get(spaceKey);
+        if (space2) {
+          trigger.wake(space2);
+        }
+      });
+      space = await trigger.wait();
+    }
+    await invokePromise(Common4.LayoutOperation.SwitchWorkspace, {
+      subject: space.id
+    });
+    const target = result?.target || (navigableCollections ? space?.id : void 0);
+    if (target) {
+      await Graph.waitForPath(graph, {
+        target
+      }).catch(() => {
+      });
+      await Promise.all([
+        invokePromise(Common4.LayoutOperation.Open, {
+          subject: [
+            target
+          ]
+        }),
+        invokePromise(Common4.LayoutOperation.Expose, {
+          subject: target
+        })
+      ]);
+    }
+    await onDone?.(result);
+    if (space) {
+      await invokePromise(ObservabilityOperation.SendEvent, {
+        name: "space.join",
+        properties: {
+          spaceId: space.id
+        }
+      });
+    }
+  }, [
+    invokePromise,
+    client,
+    graph,
+    navigableCollections,
+    onDone
+  ]);
+  return /* @__PURE__ */ React6.createElement(Dialog3.Content, null, /* @__PURE__ */ React6.createElement(Dialog3.Title, {
+    classNames: "sr-only"
+  }, t("join space label", {
+    ns: osTranslations2
+  })), /* @__PURE__ */ React6.createElement(JoinPanel, {
+    ...props,
+    exitActionParent: /* @__PURE__ */ React6.createElement(Dialog3.Close, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React6.createElement(Dialog3.Close, {
+      asChild: true
+    }),
+    onDone: handleDone
+  }));
+};
+
+// 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 { 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 { Collection } from "@dxos/schema";
+import { AuthCode, BifurcatedAction, Centered, Emoji, InvitationList, SpaceMemberList, Viewport, translationKey as shellTranslationKey } from "@dxos/shell/react";
+import { hexToEmoji } from "@dxos/util";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/MembersContainer/MembersContainer.tsx";
+var activeActionKey = "dxos:react-shell/space-manager/active-action";
+var handleInvitationEvent = (invitation, subscription) => {
+  const invitationCode = InvitationEncoder.encode(invitation);
+  if (invitation.state === Invitation.State.CONNECTING) {
+    log.info(JSON.stringify({
+      invitationCode,
+      authCode: invitation.authCode
+    }), void 0, {
+      F: __dxlog_file2,
+      L: 41,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    subscription.unsubscribe();
+  }
+};
+var MembersContainer = ({ space, createInvitationUrl }) => {
+  const { t } = useTranslation7(meta.id);
+  const config = useConfig();
+  const { invokePromise } = useOperationInvoker5();
+  const invitations = useSpaceInvitations(space.key);
+  const visibleInvitations = invitations?.filter((invitation) => ![
+    Invitation.State.CANCELLED
+  ].includes(invitation.get().state));
+  const [activeAction, setInternalActiveAction] = useState3(localStorage.getItem(activeActionKey) ?? "inviteMany");
+  const setActiveAction = (nextAction) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+  const target = space.properties[Collection.Collection.typename]?.target?.objects[0]?.target;
+  const locked = space.properties[COMPOSER_SPACE_LOCK];
+  const handleChangeLocked = useCallback6(() => {
+    Obj4.change(space.properties, (p) => {
+      p[COMPOSER_SPACE_LOCK] = !locked;
+    });
+  }, [
+    locked,
+    space
+  ]);
+  const inviteActions = useMemo3(() => ({
+    inviteOne: {
+      label: t("invite one label", {
+        ns: shellTranslationKey
+      }),
+      description: t("invite one description", {
+        ns: shellTranslationKey
+      }),
+      icon: "ph--user-plus--regular",
+      testId: "membersContainer.inviteOne",
+      onClick: async () => {
+        const { data: invitation } = await invokePromise(SpaceOperation.Share, {
+          space,
+          type: Invitation.Type.INTERACTIVE,
+          authMethod: Invitation.AuthMethod.SHARED_SECRET,
+          multiUse: false,
+          target: target && Obj4.getDXN(target).toString()
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }
+    },
+    inviteMany: {
+      label: t("invite many label", {
+        ns: shellTranslationKey
+      }),
+      description: t("invite many description", {
+        ns: shellTranslationKey
+      }),
+      icon: "ph--users-three--regular",
+      testId: "membersContainer.inviteMany",
+      onClick: async () => {
+        const { data: invitation } = await invokePromise(SpaceOperation.Share, {
+          space,
+          type: Invitation.Type.DELEGATED,
+          authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
+          multiUse: true,
+          target: target && Obj4.getDXN(target).toString()
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }
+    }
+  }), [
+    t,
+    space,
+    target,
+    invokePromise
+  ]);
+  const [selectedInvitation, setSelectedInvitation] = useState3(null);
+  const handleSend = (event) => {
+    setSelectedInvitation(event.invitation);
+  };
+  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, {
+    title: t("members verbose label"),
+    description: t("members description")
+  }, /* @__PURE__ */ React7.createElement(ControlFrame, null, /* @__PURE__ */ React7.createElement(ControlFrameItem, {
+    title: t("members label")
+  }, /* @__PURE__ */ React7.createElement(SpaceMemberList, {
+    spaceKey: space.key,
+    includeSelf: true
+  })), locked && /* @__PURE__ */ React7.createElement(ControlFrameItem, {
+    title: t("invitations label")
+  }, /* @__PURE__ */ React7.createElement("p", {
+    className: "text-description mbe-2"
+  }, t("locked space description"))), !locked && /* @__PURE__ */ React7.createElement(ControlFrameItem, {
+    title: t("invitations label")
+  }, selectedInvitation && /* @__PURE__ */ React7.createElement(InvitationSection, {
+    ...selectedInvitation,
+    onBack: handleBack
+  }), !selectedInvitation && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("p", {
+    className: "text-description mbe-2"
+  }, t("space invitation description")), /* @__PURE__ */ React7.createElement(InvitationList, {
+    className: "mb-2",
+    send: handleSend,
+    invitations: visibleInvitations ?? [],
+    onClickRemove: (invitation) => invitation.cancel(),
+    createInvitationUrl
+  }), /* @__PURE__ */ React7.createElement(BifurcatedAction, {
+    actions: inviteActions,
+    activeAction,
+    onChangeActiveAction: setActiveAction,
+    "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, {
+    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";
+  return /* @__PURE__ */ React7.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React7.createElement(Viewport.Views, null, /* @__PURE__ */ React7.createElement(Viewport.View, {
+    id: "init"
+  }), /* @__PURE__ */ React7.createElement(Viewport.View, {
+    id: "complete"
+  }, /* @__PURE__ */ React7.createElement(InvitationComplete, {
+    statusValue: state
+  })), /* @__PURE__ */ React7.createElement(Viewport.View, {
+    id: "auth-code"
+  }, /* @__PURE__ */ React7.createElement(InvitationAuthCode, {
+    id: invitationId,
+    code: authCode ?? "never",
+    onCancel: onBack
+  })), /* @__PURE__ */ React7.createElement(Viewport.View, {
+    id: "qr-code"
+  }, /* @__PURE__ */ React7.createElement(InvitationQR, {
+    id: invitationId,
+    url,
+    onCancel: onBack
+  }))));
+};
+var InvitationQR = ({ id, url, onCancel }) => {
+  const { t } = useTranslation7(shellTranslationKey);
+  const qrLabel = useId("members-container__qr-code");
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("p", {
+    className: "text-description"
+  }, t("qr code description", {
+    ns: meta.id
+  })), /* @__PURE__ */ React7.createElement("div", {
+    role: "group",
+    className: "grid grid-cols-[1fr_min-content] mlb-2 gap-2"
+  }, /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "is-full aspect-square relative text-description"
+  }, /* @__PURE__ */ React7.createElement(QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    "aria-labelledby": qrLabel,
+    errorCorrectionLevel: "Q",
+    cutout: true
+  }, url ?? "never"), /* @__PURE__ */ React7.createElement(Centered, null, /* @__PURE__ */ React7.createElement(Emoji, {
+    text: emoji
+  }))), /* @__PURE__ */ React7.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr label")), /* @__PURE__ */ React7.createElement(Clipboard.Button, {
+    value: url ?? "never"
+  })), /* @__PURE__ */ React7.createElement(Button2, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")));
+};
+var InvitationAuthCode = ({ id, code, onCancel }) => {
+  const { t } = useTranslation7(shellTranslationKey);
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("p", {
+    className: "text-description"
+  }, t("auth other device emoji message")), emoji && /* @__PURE__ */ React7.createElement(Emoji, {
+    text: emoji,
+    className: "mli-auto mlb-2 text-center"
+  }), /* @__PURE__ */ React7.createElement("p", {
+    className: "text-description"
+  }, t("auth code message")), /* @__PURE__ */ React7.createElement(AuthCode, {
+    code,
+    large: true,
+    classNames: "mli-auto mlb-2 text-center grow"
+  }), /* @__PURE__ */ React7.createElement(Button2, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")));
+};
+var InvitationComplete = ({ statusValue }) => {
+  return statusValue > 0 ? /* @__PURE__ */ React7.createElement(Icon2, {
+    icon: "ph--check--regular",
+    size: 6,
+    classNames: "m-1.5"
+  }) : /* @__PURE__ */ React7.createElement(Icon2, {
+    icon: "ph--x--regular",
+    size: 6,
+    classNames: "m-1.5"
+  });
+};
+
+// src/components/MenuFooter.tsx
+import React8 from "react";
+import { getSpace } from "@dxos/client/echo";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { DropdownMenu, Icon as Icon3, toLocalizedString as toLocalizedString2, useTranslation as useTranslation8 } from "@dxos/react-ui";
+var MenuFooter = ({ object }) => {
+  const { t } = useTranslation8(meta.id);
+  const client = useClient4();
+  const space = getSpace(object);
+  const spaceName = space ? getSpaceDisplayName(space, {
+    personal: client.spaces.default === space
+  }) : "";
+  return space ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React8.createElement(DropdownMenu.GroupLabel, null, t("menu footer label")), /* @__PURE__ */ React8.createElement("dl", {
+    className: "pis-2 mbe-2 text-xs grid grid-cols-[max-content_1fr] gap-2"
+  }, /* @__PURE__ */ React8.createElement("dt", {
+    className: "uppercase text-[.75em] tracking-wide font-medium mbs-px self-start"
+  }, t("location label")), /* @__PURE__ */ React8.createElement("dd", {
+    className: "line-clamp-3"
+  }, /* @__PURE__ */ React8.createElement(Icon3, {
+    icon: "ph--planet--regular",
+    classNames: "inline-block mie-1"
+  }), toLocalizedString2(spaceName, t)))) : null;
+};
+
+// 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 { 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";
+import { osTranslations as osTranslations3 } from "@dxos/ui-theme";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/ObjectRenamePopover/ObjectRenamePopover.tsx";
+var OBJECT_RENAME_POPOVER = `${meta.id}/ObjectRenamePopover`;
+var ObjectRenamePopover = ({ object }) => {
+  const { t } = useTranslation9(meta.id);
+  const doneButton = useRef3(null);
+  const [name, setName] = useState4(Obj5.getLabel(object));
+  const { invokePromise } = useOperationInvoker6();
+  const handleDone = useCallback7(() => {
+    try {
+      name && Obj5.change(object, () => Obj5.setLabel(object, name));
+    } catch (err) {
+      log2.error("Failed to rename object", {
+        err
+      }, {
+        F: __dxlog_file3,
+        L: 28,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+    void invokePromise(Common5.LayoutOperation.UpdatePopover, {
+      anchorId: "",
+      state: false
+    });
+  }, [
+    object,
+    name,
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React9.createElement("div", {
+    role: "none",
+    className: "p-2 flex gap-2"
+  }, /* @__PURE__ */ React9.createElement("div", {
+    role: "none",
+    className: "flex-1"
+  }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Label, {
+    srOnly: true
+  }, t("object name label")), /* @__PURE__ */ React9.createElement(Input2.TextInput, {
+    placeholder: t("object placeholder"),
+    value: name,
+    "data-testid": "spacePlugin.renameObject.input",
+    onChange: ({ target: { value: value2 } }) => setName(value2),
+    onKeyDown: ({ key }) => key === "Enter" && doneButton.current?.click()
+  }))), /* @__PURE__ */ React9.createElement(Button3, {
+    ref: doneButton,
+    classNames: "self-stretch",
+    onClick: handleDone
+  }, t("done label", {
+    ns: osTranslations3
+  })));
+};
+
+// 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";
+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, {
+    title: t("schema verbose label"),
+    description: t("schema description")
+  }, /* @__PURE__ */ React10.createElement("div", {
+    role: "none",
+    className: controlItemClasses
+  }, 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))))));
+};
+var useQuerySpaceSchemas = (space) => {
+  const [schemas, setSchemas] = useState5([]);
+  useEffect2(() => {
+    const query = space.db.schemaRegistry.query();
+    const initialResults = query.runSync();
+    setSchemas(initialResults);
+    const unsubscribe = query.subscribe(() => setSchemas(query.results));
+    return () => unsubscribe();
+  }, [
+    space
+  ]);
+  return schemas;
+};
+
+// src/components/SpacePluginSettings.tsx
+import React11 from "react";
+import { useOperationInvoker as useOperationInvoker7 } from "@dxos/app-framework/react";
+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";
+var SpacePluginSettings = ({ settings, onSettingsChange }) => {
+  const { t } = useTranslation11(meta.id);
+  const client = useClient5();
+  const spaces = useSpaces2({
+    all: settings.showHidden
+  });
+  const { invokePromise } = useOperationInvoker7();
+  return /* @__PURE__ */ React11.createElement(ControlPage3, null, /* @__PURE__ */ React11.createElement(ControlSection3, {
+    title: t("space settings label"),
+    description: t("space settings description")
+  }, /* @__PURE__ */ React11.createElement(ControlGroup, null, /* @__PURE__ */ React11.createElement(ControlItemInput2, {
+    title: t("show hidden spaces label")
+  }, /* @__PURE__ */ React11.createElement(Input3.Switch, {
+    checked: settings.showHidden,
+    onCheckedChange: (checked) => onSettingsChange((s) => ({
+      ...s,
+      showHidden: !!checked
+    }))
+  }))), /* @__PURE__ */ React11.createElement(List, {
+    classNames: [
+      controlItemClasses2,
+      "flex flex-col gap-trimSm"
+    ]
+  }, spaces.map((space) => /* @__PURE__ */ React11.createElement(ListItem.Root, {
+    key: space.id,
+    classNames: "is-full items-center"
+  }, /* @__PURE__ */ React11.createElement(ListItem.Heading, {
+    classNames: "grow truncate !min-bs-0"
+  }, toLocalizedString3(getSpaceDisplayName(space, {
+    personal: space === client.spaces.default
+  }), t)), /* @__PURE__ */ React11.createElement(IconButton, {
+    icon: "ph--faders--regular",
+    onClick: () => invokePromise(SpaceOperation.OpenSettings, {
+      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 { generateName } from "@dxos/display-name";
+import { Obj as Obj6 } from "@dxos/echo";
+import { PublicKey } from "@dxos/react-client";
+import { useMembers, useSpace } from "@dxos/react-client/echo";
+import { useIdentity } from "@dxos/react-client/halo";
+import { Avatar, List as List2, ListItem as ListItem2, Popover, Tooltip, useDefaultValue as useDefaultValue2, useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { AttentionGlyph, useAttended, useAttention } from "@dxos/react-ui-attention";
+import { ComplexMap, keyToFallback } from "@dxos/util";
+var REFRESH_INTERVAL = 5e3;
+var ACTIVITY_DURATION = 3e4;
+var noViewers = new ComplexMap(PublicKey.hash);
+var getName = (identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
+var SpacePresence = ({ object, spaceId }) => {
+  const ephemeral = useAtomCapability(SpaceCapabilities.EphemeralState);
+  const identity = useIdentity();
+  const db = Obj6.getDatabase(object);
+  const space = useSpace(spaceId ?? db?.spaceId);
+  const spaceMembers = useMembers(spaceId ?? db?.spaceId);
+  const [_moment, setMoment] = useState6(Date.now());
+  useEffect3(() => {
+    const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+  const memberOnline = useCallback8((member) => member.presence === 1, []);
+  const memberIsNotSelf = useCallback8((member) => !identity?.identityKey.equals(member.identity.identityKey), [
+    identity?.identityKey
+  ]);
+  if (!identity || !ephemeral || !space) {
+    return null;
+  }
+  const currentObjectViewers = ephemeral.viewersByObject[Obj6.getDXN(object).toString()] ?? noViewers;
+  const membersForObject = spaceMembers.filter((member) => memberOnline(member) && memberIsNotSelf(member)).filter((member) => currentObjectViewers.has(member.identity.identityKey)).map((member) => {
+    const objectView = currentObjectViewers.get(member.identity.identityKey);
+    const lastSeen = objectView?.lastSeen ?? -Infinity;
+    const currentlyAttended = objectView?.currentlyAttended ?? false;
+    return {
+      ...member,
+      currentlyAttended,
+      lastSeen
+    };
+  }).toSorted((a, b) => a.lastSeen - b.lastSeen);
+  return /* @__PURE__ */ React12.createElement(FullPresence, {
+    members: membersForObject
+  });
+};
+var FullPresence = (props) => {
+  const { size = 9, onMemberClick } = props;
+  const members = useDefaultValue2(props.members, () => []);
+  if (members.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React12.createElement("div", {
+    className: "dx-avatar-group",
+    "data-testid": "spacePlugin.presence"
+  }, members.slice(0, 3).map((member, i) => /* @__PURE__ */ React12.createElement(Tooltip.Trigger, {
+    key: member.identity.identityKey.toHex(),
+    side: "bottom",
+    content: getName(member.identity),
+    className: "grid focus:outline-none"
+  }, /* @__PURE__ */ React12.createElement(PresenceAvatar, {
+    identity: member.identity,
+    match: member.currentlyAttended,
+    index: members.length - i,
+    onClick: () => onMemberClick?.(member),
+    size
+  }))), members.length > 3 && /* @__PURE__ */ React12.createElement(Popover.Root, null, /* @__PURE__ */ React12.createElement(Popover.Trigger, {
+    className: "grid focus:outline-none"
+  }, /* @__PURE__ */ React12.createElement(Avatar.Root, null, /* @__PURE__ */ React12.createElement(Avatar.Content, {
+    status: "inactive",
+    style: {
+      zIndex: members.length - 4
+    },
+    fallback: `+${members.length - 3}`,
+    size
+  }))), /* @__PURE__ */ React12.createElement(Popover.Portal, null, /* @__PURE__ */ React12.createElement(Popover.Content, {
+    side: "bottom"
+  }, /* @__PURE__ */ React12.createElement(Popover.Arrow, null), /* @__PURE__ */ React12.createElement(Popover.Viewport, {
+    classNames: "max-bs-56"
+  }, /* @__PURE__ */ React12.createElement(List2, null, members.map((member) => /* @__PURE__ */ React12.createElement(ListItem2.Root, {
+    key: member.identity.identityKey.toHex(),
+    classNames: "flex gap-2 items-center cursor-pointer mbe-2",
+    onClick: () => onMemberClick?.(member),
+    "data-testid": "identity-list-item"
+  }, /* @__PURE__ */ React12.createElement(PresenceAvatar, {
+    identity: member.identity,
+    size,
+    showName: true,
+    match: member.currentlyAttended
+  })))))))));
+};
+var PresenceAvatar = /* @__PURE__ */ forwardRef(({ identity, showName, match: match2, index, onClick, size }, forwardedRef) => {
+  const status = match2 ? "current" : "active";
+  const fallbackValue = keyToFallback(identity.identityKey);
+  return /* @__PURE__ */ React12.createElement(Avatar.Root, null, /* @__PURE__ */ React12.createElement(Avatar.Content, {
+    status,
+    hue: identity.profile?.data?.hue || fallbackValue.hue,
+    "data-testid": "spacePlugin.presence.member",
+    "data-status": status,
+    size,
+    ...index ? {
+      style: {
+        zIndex: index
+      }
+    } : {},
+    onClick,
+    fallback: identity.profile?.data?.emoji || fallbackValue.emoji,
+    ref: forwardedRef
+  }), /* @__PURE__ */ React12.createElement(Avatar.Label, {
+    classNames: showName ? "text-sm truncate pli-2" : "sr-only"
+  }, getName(identity)));
+});
+var SmallPresenceLive = ({ id, open, viewers }) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention(id);
+  const isAttended = hasAttention || isAncestor || isRelated;
+  const { graph } = useAppGraph2();
+  const attended = useAttended();
+  const startOfAttention = attended.at(-1);
+  const path = usePath(graph, startOfAttention);
+  const containsAttended = !open && !isAttended && id && Option2.isSome(path) ? path.value.includes(id) : false;
+  const getActiveViewers = (viewers2) => {
+    const moment = Date.now();
+    return Array.from(viewers2.values()).filter((viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION);
+  };
+  const [activeViewers, setActiveViewers] = useState6(viewers ? getActiveViewers(viewers) : []);
+  useEffect3(() => {
+    if (viewers) {
+      setActiveViewers(getActiveViewers(viewers));
+      const interval = setInterval(() => {
+        setActiveViewers(getActiveViewers(viewers));
+      }, REFRESH_INTERVAL);
+      return () => clearInterval(interval);
+    }
+  }, [
+    viewers
+  ]);
+  return /* @__PURE__ */ React12.createElement(SmallPresence, {
+    count: activeViewers.length,
+    attended: isAttended,
+    containsAttended
+  });
+};
+var SmallPresence = ({ count = 0, attended, containsAttended }) => {
+  const { t } = useTranslation12(meta.id);
+  return /* @__PURE__ */ React12.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: t("presence label", {
+      count
+    }),
+    side: "bottom"
+  }, /* @__PURE__ */ React12.createElement(AttentionGlyph, {
+    attended,
+    containsAttended,
+    presence: count > 1 ? "many" : count === 1 ? "one" : "none",
+    classNames: "self-center mie-1"
+  }));
+};
+
+// 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 { 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";
+var SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;
+var SpaceRenamePopover = ({ space }) => {
+  const { t } = useTranslation13(meta.id);
+  const doneButton = useRef4(null);
+  const [name, setName] = useState7(space.properties.name ?? "");
+  const { invokePromise } = useOperationInvoker8();
+  const handleDone = useCallback9(() => {
+    Obj7.change(space.properties, (p) => {
+      p.name = name;
+    });
+    void invokePromise(Common6.LayoutOperation.UpdatePopover, {
+      anchorId: "",
+      state: false
+    });
+  }, [
+    space,
+    name,
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React13.createElement("div", {
+    role: "none",
+    className: "p-2 flex gap-2"
+  }, /* @__PURE__ */ React13.createElement("div", {
+    role: "none",
+    className: "flex-1"
+  }, /* @__PURE__ */ React13.createElement(Input4.Root, null, /* @__PURE__ */ React13.createElement(Input4.Label, {
+    srOnly: true
+  }, t("space name label")), /* @__PURE__ */ React13.createElement(Input4.TextInput, {
+    defaultValue: space.properties.name ?? "",
+    placeholder: t("unnamed space label"),
+    onChange: ({ target: { value: value2 } }) => setName(value2),
+    // TODO(wittjosiah): Ideally this should access the popover context to close the popover.
+    //   Currently this is not possible because Radix does not expose the popover context.
+    onKeyDown: ({ key }) => key === "Enter" && doneButton.current?.click()
+  }))), /* @__PURE__ */ React13.createElement(Popover2.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React13.createElement(Button4, {
+    ref: doneButton,
+    classNames: "self-stretch",
+    onClick: handleDone
+  }, t("done label", {
+    ns: osTranslations4
+  }))));
+};
+
+// 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 { 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 { 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({
+  archived: Schema.Boolean.annotations({
+    title: "Archive Space"
+  })
+})));
+var SpaceSettingsContainer = /* @__PURE__ */ forwardRef2(({ space }, forwardedRef) => {
+  const { t } = useTranslation14(meta.id);
+  const { invokePromise } = useOperationInvoker9();
+  const client = useClient6();
+  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
+  const [edgeReplication, setEdgeReplication] = useState8(space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED);
+  const toggleEdgeReplication = useCallback10(async (next) => {
+    setEdgeReplication(next);
+    await space?.internal.setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED).catch((err) => {
+      log3.catch(err, void 0, {
+        F: __dxlog_file4,
+        L: 58,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setEdgeReplication(!next);
+    });
+  }, [
+    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) {
+      Obj8.change(space.properties, (p) => {
+        if (nameChanged) {
+          p.name = properties.name;
+        }
+        if (iconChanged) {
+          p.icon = properties.icon;
+        }
+        if (hueChanged) {
+          p.hue = properties.hue;
+        }
+      });
+    }
+    if (properties.archived && !archived) {
+      void (async () => {
+        await invokePromise(SpaceOperation.Close, {
+          space
+        });
+        await invokePromise(Common7.LayoutOperation.SwitchWorkspace, {
+          subject: client.spaces.default.id
+        });
+      })();
+    } else if (!properties.archived && archived) {
+      void invokePromise(SpaceOperation.Open, {
+        space
+      });
+    }
+  }, [
+    space,
+    toggleEdgeReplication,
+    archived
+  ]);
+  const values = useMemo4(() => ({
+    name: space.properties.name,
+    icon: space.properties.icon,
+    hue: space.properties.hue,
+    edgeReplication,
+    archived
+  }), [
+    space.properties.name,
+    space.properties.icon,
+    space.properties.hue,
+    edgeReplication,
+    archived
+  ]);
+  const fieldMap = useMemo4(() => ({
+    name: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback10(({ target: { value: value2 } }) => onValueChange(type, value2), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+        title: label,
+        description: t("display name description")
+      }, /* @__PURE__ */ React14.createElement(Input5.TextInput, {
+        value: getValue(),
+        onChange: handleChange,
+        placeholder: t("display name input placeholder"),
+        classNames: "min-is-64"
+      }));
+    },
+    icon: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback10((icon) => onValueChange(type, icon), [
+        onValueChange,
+        type
+      ]);
+      const handleReset = useCallback10(() => onValueChange(type, void 0), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React14.createElement(ControlItem, {
+        title: label,
+        description: t("icon description")
+      }, /* @__PURE__ */ React14.createElement(IconPicker, {
+        value: getValue(),
+        onChange: handleChange,
+        onReset: handleReset,
+        classNames: "justify-self-end"
+      }));
+    },
+    hue: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback10((nextHue) => onValueChange(type, nextHue), [
+        onValueChange,
+        type
+      ]);
+      const handleReset = useCallback10(() => onValueChange(type, void 0), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React14.createElement(ControlItem, {
+        title: label,
+        description: t("hue description")
+      }, /* @__PURE__ */ React14.createElement(HuePicker, {
+        value: getValue(),
+        onChange: handleChange,
+        onReset: handleReset,
+        classNames: "justify-self-end"
+      }));
+    },
+    edgeReplication: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback10((checked) => onValueChange(type, checked), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+        title: label,
+        description: t("edge replication description")
+      }, /* @__PURE__ */ React14.createElement(Input5.Switch, {
+        checked: getValue(),
+        onCheckedChange: handleChange,
+        classNames: "justify-self-end"
+      }));
+    },
+    archived: ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback10(() => onValueChange(type, !getValue()), [
+        onValueChange,
+        type,
+        getValue
+      ]);
+      return /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+        title: label,
+        description: t("archive space description")
+      }, /* @__PURE__ */ React14.createElement(Button5, {
+        disabled: space === client.spaces.default,
+        variant: getValue() ? "default" : "destructive",
+        onClick: handleChange
+      }, getValue() ? t("unarchive space label") : t("archive space label")));
+    }
+  }), [
+    t,
+    space
+  ]);
+  const download = useFileDownload();
+  const handleBackup = useCallback10(async () => {
+    const archive = await space.internal.export();
+    download(new Blob([
+      archive.contents
+    ]), archive.filename);
+  }, [
+    space,
+    download
+  ]);
+  const repairs = useCapabilities(SpaceCapabilities.Repair);
+  const handleRepair = useCallback10(async () => {
+    await Promise.all(repairs.map((repair) => repair({
+      space,
+      isDefault: client.spaces.default === space
+    })));
+  }, [
+    client,
+    space,
+    repairs
+  ]);
+  return /* @__PURE__ */ React14.createElement(Layout3.Container, {
+    scrollable: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React14.createElement(ControlPage4, null, /* @__PURE__ */ React14.createElement(ControlSection4, {
+    title: t("space properties settings verbose label"),
+    description: t("space properties settings description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React14.createElement(Form3.Root, {
+    fieldMap,
+    schema: SpaceFormSchema,
+    values,
+    autoSave: true,
+    onSave: handleSave
+  }, /* @__PURE__ */ React14.createElement(Form3.FieldSet, null))), /* @__PURE__ */ React14.createElement(ControlSection4, {
+    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, {
+    title: t("backup space title"),
+    description: t("backup space description")
+  }, /* @__PURE__ */ React14.createElement(Button5, {
+    onClick: handleBackup
+  }, t("download backup label"))), /* @__PURE__ */ React14.createElement(ControlItemInput3, {
+    title: t("repair space title"),
+    description: t("repair space description")
+  }, /* @__PURE__ */ React14.createElement(Button5, {
+    onClick: handleRepair
+  }, 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 { 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";
+import { useSpaceSyncState } from "@dxos/react-client/echo";
+import { Tooltip as Tooltip2, useTranslation as useTranslation15 } from "@dxos/react-ui";
+import { AttentionGlyph as AttentionGlyph2, useAttended as useAttended2, useAttention as useAttention2 } from "@dxos/react-ui-attention";
+var useEdgeStatus = () => {
+  const [status, setStatus] = useState9(EdgeStatus.ConnectionState.NOT_CONNECTED);
+  const client = useClient7();
+  useEffect4(() => {
+    client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status: status2 }) => {
+      setStatus(status2.state);
+    });
+  }, [
+    client
+  ]);
+  return status;
+};
+var InlineSyncStatus = ({ space, open }) => {
+  const { t } = useTranslation15(meta.id);
+  const id = space.id;
+  const { hasAttention, isAncestor, isRelated } = useAttention2(id);
+  const isAttended = hasAttention || isAncestor || isRelated;
+  const { graph } = useAppGraph3();
+  const attended = useAttended2();
+  const startOfAttention = attended.at(-1);
+  const path = usePath(graph, startOfAttention);
+  const containsAttended = !open && !isAttended && id && Option3.isSome(path) ? path.value.includes(id) : false;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
+  const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting2.ENABLED;
+  const syncState = useSpaceSyncState(space);
+  const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
+  return /* @__PURE__ */ React15.createElement(Tooltip2.Trigger, {
+    asChild: true,
+    content: t("syncing label"),
+    side: "bottom"
+  }, /* @__PURE__ */ React15.createElement(AttentionGlyph2, {
+    syncing,
+    attended: isAttended,
+    containsAttended,
+    classNames: "self-center mie-1"
+  }));
+};
+
+// src/components/SyncStatus/SyncStatus.tsx
+import React16, { useEffect as useEffect5, useState as useState10 } from "react";
+import { StatusBar } from "@dxos/plugin-status-bar";
+import { EdgeStatus as EdgeStatus2 } from "@dxos/protocols/proto/dxos/client/services";
+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 { Unit } from "@dxos/util";
+
+// src/components/SyncStatus/save-tracker.ts
+import { Context } from "@dxos/context";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts";
+var createClientSaveTracker = (client, cb) => {
+  const CleanupFns = {};
+  const state = {};
+  const install = (spaces) => {
+    for (const space of spaces) {
+      if (state[space.id]) {
+        continue;
+      }
+      state[space.id] = "saved";
+      CleanupFns[space.id] = createSpaceSaveTracker(space, (s) => {
+        state[space.id] = s;
+        cb(Object.values(state).some((s2) => s2 === "saving") ? "saving" : "saved");
+      });
+    }
+  };
+  client.spaces.subscribe((spaces) => {
+    install(spaces);
+  });
+  install(client.spaces.get());
+  return () => {
+    for (const unsubscribe of Object.values(CleanupFns)) {
+      unsubscribe();
+    }
+  };
+};
+var createSpaceSaveTracker = (space, cb) => {
+  const ctx = new Context(void 0, {
+    F: __dxlog_file5,
+    L: 40
+  });
+  void space.waitUntilReady().then(() => {
+    if (ctx.disposed) {
+      return;
+    }
+    let hasUnsavedChanges = false;
+    let lastFlushPromise;
+    space.internal.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+      hasUnsavedChanges = unsavedDocuments.length > 0;
+    });
+    space.internal.db.saveStateChanged.debounce(500).on(ctx, () => {
+      if (hasUnsavedChanges) {
+        lastFlushPromise = void 0;
+        cb("saving");
+      } else {
+        const flushPromise = space.db.flush();
+        lastFlushPromise = flushPromise;
+        void flushPromise.then(() => {
+          if (lastFlushPromise === flushPromise) {
+            cb("saved");
+          }
+        });
+      }
+    });
+  });
+  return () => {
+    void ctx.dispose();
+  };
+};
+
+// src/components/SyncStatus/status.ts
+var getStatus = ({ offline, saved, needsToUpload, needsToDownload }) => {
+  if (!saved) {
+    return "saving locally";
+  } else if (!offline && needsToDownload) {
+    return "downloading";
+  } else if (!offline && needsToUpload) {
+    return "uploading";
+  } else if (offline && !needsToUpload && !needsToDownload) {
+    return "offline persisted";
+  } else {
+    return "remote synced";
+  }
+};
+var getIcon = (status) => {
+  switch (status) {
+    case "saving locally":
+      return "ph--download--regular";
+    case "downloading":
+      return "ph--cloud-arrow-down--regular";
+    case "uploading":
+      return "ph--cloud-arrow-up--regular";
+    case "offline persisted":
+      return "ph--check-circle--regular";
+    case "remote synced":
+      return "ph--cloud-check--regular";
+  }
+};
+
+// src/components/SyncStatus/SyncStatus.tsx
+var SYNC_STALLED_TIMEOUT = 5e3;
+var SyncStatus = () => {
+  const client = useClient8();
+  const state = useSyncState();
+  const [saved, setSaved] = useState10(true);
+  useEffect5(() => createClientSaveTracker(client, (state2) => setSaved(state2 === "saved")), []);
+  return /* @__PURE__ */ React16.createElement(SyncStatusIndicator, {
+    state,
+    saved
+  });
+};
+var SyncStatusIndicator = ({ state, saved }) => {
+  const { t } = useTranslation16(meta.id);
+  const summary = getSyncSummary(state);
+  const offline = Object.values(state).length === 0;
+  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
+  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
+  const status = getStatus({
+    offline,
+    saved,
+    needsToUpload,
+    needsToDownload
+  });
+  const [classNames, setClassNames] = useState10();
+  useEffect5(() => {
+    setClassNames(void 0);
+    if (offline || !needsToUpload && !needsToDownload) {
+      return;
+    }
+    const t2 = setTimeout(() => {
+      setClassNames("text-orange-500");
+    }, SYNC_STALLED_TIMEOUT);
+    return () => clearTimeout(t2);
+  }, [
+    offline,
+    needsToUpload,
+    needsToDownload
+  ]);
+  const title = t(`${status} label`);
+  const icon = /* @__PURE__ */ React16.createElement(Icon4, {
+    icon: getIcon(status),
+    classNames
+  });
+  return /* @__PURE__ */ React16.createElement(Popover3.Root, null, /* @__PURE__ */ React16.createElement(Popover3.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React16.createElement(StatusBar.Item, {
+    title
+  }, icon)), /* @__PURE__ */ React16.createElement(Popover3.Portal, null, /* @__PURE__ */ React16.createElement(Popover3.Content, null, /* @__PURE__ */ React16.createElement(EdgeConnectionPopover, null), /* @__PURE__ */ React16.createElement(Popover3.Arrow, null))));
+};
+var useEdgeStatus2 = () => {
+  const client = useClient8();
+  const { status } = useStream(() => client.services.services.EdgeAgentService.queryEdgeStatus(), {});
+  return status;
+};
+var EdgeConnectionPopover = () => {
+  const status = useEdgeStatus2();
+  const { t } = useTranslation16(meta.id);
+  const isConnected = status?.state === EdgeStatus2.ConnectionState.CONNECTED;
+  return /* @__PURE__ */ React16.createElement("div", {
+    className: "min-is-[240px] p-2"
+  }, /* @__PURE__ */ React16.createElement("div", {
+    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")
+  }), /* @__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", {
+    className: "flex items-center gap-2 text-sm text-description"
+  }, /* @__PURE__ */ React16.createElement(Icon4, {
+    icon: "ph--cloud-x--regular"
+  }), /* @__PURE__ */ React16.createElement("span", null, t("sync no connection label"))), status?.state === EdgeStatus2.ConnectionState.CONNECTED && /* @__PURE__ */ React16.createElement("div", {
+    className: "space-y-2"
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center justify-between text-sm"
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center gap-2 text-description"
+  }, /* @__PURE__ */ React16.createElement(Icon4, {
+    icon: "ph--timer--regular"
+  }), /* @__PURE__ */ React16.createElement("span", null, t("sync latency label"))), /* @__PURE__ */ React16.createElement(UnitValue, {
+    value: status.rtt,
+    format: Unit.Millisecond
+  })), /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center justify-between text-sm"
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center gap-2 text-description"
+  }, /* @__PURE__ */ React16.createElement(Icon4, {
+    icon: "ph--arrow-up--regular"
+  }), /* @__PURE__ */ React16.createElement("span", null, t("sync upload label"))), /* @__PURE__ */ React16.createElement(UnitValue, {
+    value: status.rateBytesUp,
+    format: Unit.Kilobyte,
+    suffix: "/s"
+  })), /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center justify-between text-sm"
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center gap-2 text-sm text-description"
+  }, /* @__PURE__ */ React16.createElement(Icon4, {
+    icon: "ph--arrow-down--regular"
+  }), /* @__PURE__ */ React16.createElement("span", null, t("sync download label"))), /* @__PURE__ */ React16.createElement(UnitValue, {
+    value: status.rateBytesDown,
+    format: Unit.Kilobyte,
+    suffix: "/s"
+  }))));
+};
+var UnitValue = ({ value: input, format, suffix }) => {
+  const { formattedValue, unit } = format(input);
+  return /* @__PURE__ */ React16.createElement("span", {
+    className: "font-mono"
+  }, formattedValue, /* @__PURE__ */ React16.createElement("span", {
+    className: "mis-1 text-subdued"
+  }, unit.symbol, suffix));
+};
+
+// src/helpers/query.ts
+import * as Array2 from "effect/Array";
+import * as Effect3 from "effect/Effect";
+import * as EffectFunction from "effect/Function";
+import * as Match from "effect/Match";
+import * as Option4 from "effect/Option";
+import * as SchemaAST from "effect/SchemaAST";
+import { DXN, Filter as Filter2, Query } from "@dxos/echo";
+import { ReferenceAnnotationId, getTypeAnnotation as getTypeAnnotation3, unwrapOptional } from "@dxos/echo/internal";
+import { runAndForwardErrors as runAndForwardErrors3 } from "@dxos/effect";
+import { log as log4 } from "@dxos/log";
+import { Person } from "@dxos/types";
+var __dxlog_file6 = "/__w/dxos/dxos/packages/plugins/plugin-space/src/helpers/query.ts";
+var evalQuery = (queryString) => {
+  const globals = {
+    Query,
+    Filter: Filter2,
+    Person
+  };
+  try {
+    return new Function(...Object.keys(globals), `return ${queryString}`)(...Object.values(globals));
+  } catch (err) {
+    log4.catch(err, void 0, {
+      F: __dxlog_file6,
+      L: 33,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return Query.select(Filter2.nothing());
+  }
+};
+var resolveSchemaWithRegistry = (registry, query) => {
+  const resolve = Effect3.fn(function* (dxn) {
+    const typename = DXN.parse(dxn).asTypeDXN()?.type;
+    if (!typename) {
+      return Option4.none();
+    }
+    const query2 = registry.query({
+      typename,
+      location: [
+        "database",
+        "runtime"
+      ]
+    });
+    const schemas = yield* Effect3.promise(() => query2.run());
+    return Array2.head(schemas);
+  });
+  return resolveSchema(query, resolve).pipe(Effect3.map((schema) => Option4.getOrUndefined(schema)), runAndForwardErrors3);
+};
+var resolveSchema = (query, resolve) => {
+  return Match.value(query).pipe(
+    Match.withReturnType(),
+    // TODO(wittjosiah): Reconcile with filter match?
+    Match.when({
+      type: "select"
+    }, ({ filter }) => typenameFromFilter(filter).pipe(Option4.map((typename) => resolve(typename)), Option4.getOrElse(() => Effect3.succeed(Option4.none())))),
+    Match.when({
+      type: "filter"
+    }, ({ filter }) => typenameFromFilter(filter).pipe(Option4.map((typename) => resolve(typename)), Option4.getOrElse(() => Effect3.succeed(Option4.none())))),
+    Match.when({
+      type: "reference-traversal"
+    }, ({ anchor, property }) => resolveSchema(anchor, resolve).pipe(Effect3.map((base) => base.pipe(Option4.map((schema) => SchemaAST.getPropertySignatures(schema.ast)), Option4.flatMap((properties) => Array2.findFirst(properties, (p) => p.name === property)), Option4.flatMap((property2) => SchemaAST.getAnnotation(ReferenceAnnotationId)(unwrapOptional(property2))), Option4.map((annotation) => annotation.typename))), Effect3.flatMap(Option4.match({
+      onNone: () => Effect3.succeed(Option4.none()),
+      onSome: (typename) => resolve(DXN.fromTypename(typename).toString())
+    })))),
+    Match.when({
+      type: "relation",
+      filter: Match.defined
+    }, ({ filter }) => typenameFromFilter(filter).pipe(Option4.map((typename) => resolve(typename)), Option4.getOrElse(() => Effect3.succeed(Option4.none())))),
+    Match.when({
+      type: "relation-traversal"
+    }, ({ anchor, direction }) => resolveSchema(anchor, resolve).pipe(Effect3.map((base) => base.pipe(Option4.map((schema) => getTypeAnnotation3(schema)), Option4.flatMap((annotation) => Option4.fromNullable(direction === "source" ? annotation?.sourceSchema : annotation?.targetSchema)))), Effect3.flatMap(Option4.match({
+      onNone: () => Effect3.succeed(Option4.none()),
+      onSome: (typename) => resolve(typename)
+    })))),
+    Match.when({
+      type: "options"
+    }, ({ query: query2 }) => resolveSchema(query2, resolve)),
+    Match.orElse((_q) => {
+      return Effect3.succeed(Option4.none());
+    })
+  );
+};
+var typenameFromFilter = (filter) => Match.value(filter).pipe(Match.withReturnType(), Match.when({
+  type: "object"
+}, ({ typename }) => Option4.fromNullable(typename)), Match.when({
+  type: "and"
+}, ({ filters }) => EffectFunction.pipe(filters, Array2.map(typenameFromFilter), Array2.findFirst(Option4.isSome), Option4.flatten)), Match.when({
+  type: "or"
+}, ({ filters }) => EffectFunction.pipe(filters, Array2.map(typenameFromFilter), Array2.findFirst(Option4.isSome), Option4.flatten)), Match.orElse(() => Option4.none()));
+var getQueryTarget = (query, space) => {
+  return Match.value(query).pipe(Match.when({
+    type: "options"
+  }, ({ options }) => {
+    return Option4.fromNullable(options.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.flatMap((queueDxn) => Option4.fromNullable(DXN.tryParse(queueDxn))), Option4.flatMap((queueDxn) => Option4.fromNullable(space?.queues.get(queueDxn))), Option4.getOrElse(() => space?.db));
+  }), Match.orElse(() => space?.db));
+};
+
+// 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 { 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";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { ViewEditor as NaturalViewEditor } from "@dxos/react-ui-form";
+import { View } from "@dxos/schema";
+var ViewEditor = ({ view }) => {
+  const { invokePromise } = useOperationInvoker10();
+  const client = useClient9();
+  const space = getSpace2(view);
+  const [schema, setSchema] = useState11(() => Schema2.Struct({}));
+  const tags = useQuery2(space?.db, Filter3.type(Tag.Tag));
+  const types = useTypeOptions({
+    space,
+    annotation: {
+      location: [
+        "database",
+        "runtime"
+      ],
+      kind: [
+        "user"
+      ],
+      registered: [
+        "registered"
+      ]
+    }
+  });
+  useAsyncEffect(async () => {
+    if (!view?.query || !space) {
+      return;
+    }
+    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
+    if (foundSchema && foundSchema !== schema) {
+      setSchema(() => foundSchema);
+    }
+  }, [
+    client,
+    space,
+    view,
+    schema
+  ]);
+  const handleQueryChanged = useCallback11(async (newQuery, target) => {
+    if (!view || !space) {
+      return;
+    }
+    const queue = target && DXN2.tryParse(target) ? target : void 0;
+    const query = queue ? Query2.fromAst(newQuery).options({
+      queues: [
+        queue
+      ]
+    }) : Query2.fromAst(newQuery);
+    Obj9.change(view, (v) => {
+      v.query.ast = query.ast;
+    });
+    const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
+    if (!newSchema) {
+      return;
+    }
+    const newView = View.make({
+      query,
+      jsonSchema: Type2.toJsonSchema(newSchema)
+    });
+    Obj9.change(view, (v) => {
+      v.projection = Obj9.getSnapshot(newView).projection;
+    });
+    setSchema(() => newSchema);
+  }, [
+    view,
+    schema
+  ]);
+  const handleDelete = useCallback11((fieldId) => {
+    void invokePromise(SpaceOperation.DeleteField, {
+      view,
+      fieldId
+    });
+  }, [
+    invokePromise,
+    view
+  ]);
+  if (!space || !schema) {
+    return null;
+  }
+  return /* @__PURE__ */ React17.createElement(NaturalViewEditor, {
+    registry: space.db.schemaRegistry,
+    schema,
+    view,
+    mode: "tag",
+    tags,
+    types,
+    onQueryChanged: handleQueryChanged,
+    onDelete: Type2.isMutable(schema) ? handleDelete : void 0
+  });
+};
+
+// src/components/index.ts
+import { lazy } from "react";
+var CollectionArticle = lazy(() => import("./CollectionArticle-WGHNZNO2.mjs"));
+var ObjectCardStack = lazy(() => import("./ObjectCardStack-C5ZXRKP7.mjs"));
+var ObjectDetails = lazy(() => import("./ObjectDetails-6ZLDRKCO.mjs"));
+var RecordArticle = lazy(() => import("./RecordArticle-SSV74Z46.mjs"));
+
+export {
+  AwaitingObject,
+  CREATE_OBJECT_DIALOG,
+  CreateObjectDialog,
+  CREATE_SPACE_DIALOG,
+  CreateSpaceDialog,
+  CollectionSection,
+  JOIN_DIALOG,
+  JoinDialog,
+  MembersContainer,
+  MenuFooter,
+  OBJECT_RENAME_POPOVER,
+  ObjectRenamePopover,
+  SchemaContainer,
+  useQuerySpaceSchemas,
+  SpacePluginSettings,
+  SpacePresence,
+  FullPresence,
+  SmallPresenceLive,
+  SmallPresence,
+  SPACE_RENAME_POPOVER,
+  SpaceRenamePopover,
+  SpaceSettingsContainer,
+  InlineSyncStatus,
+  SyncStatus,
+  SyncStatusIndicator,
+  evalQuery,
+  resolveSchemaWithRegistry,
+  getQueryTarget,
+  ViewEditor,
+  CollectionArticle,
+  ObjectCardStack,
+  ObjectDetails,
+  RecordArticle
+};
+//# sourceMappingURL=chunk-EYS3L2NO.mjs.map