@dxos/react-ui 0.1.26 → 0.1.27-next.6f5e1d5

package/dist/lib/browser/index.mjs

@@ -4,10 +4,13 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// packages/apps/patterns/react-ui/src/components/IdentityList/DeviceList.tsx
+import React2 from "react";
+
 // packages/apps/patterns/react-ui/src/components/IdentityList/IdentityListItem.tsx
 import React from "react";
 import { SpaceMember } from "@dxos/client";
-import { Avatar, useTranslation } from "@dxos/react-components";
+import { Avatar, mx, useTranslation } from "@dxos/react-components";
 function _extends() {
   _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -22,18 +25,20 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-var IdentityListItem = ({ identity, presence }) => {
-  var _a;
+var IdentityListItem = ({ identity, presence, onClick }) => {
+  var _a, _b;
   const { t } = useTranslation("os");
   return /* @__PURE__ */ React.createElement("li", {
-    className: "flex gap-2 items-center"
+    className: mx("flex gap-2 items-center", onClick && "cursor-pointer"),
+    onClick: () => onClick == null ? void 0 : onClick(),
+    "data-testid": "identity-list-item"
   }, /* @__PURE__ */ React.createElement(Avatar, _extends({}, {
     variant: "circle",
     size: 9,
     fallbackValue: identity.identityKey.toHex(),
     label: /* @__PURE__ */ React.createElement("p", {
       className: "text-sm truncate"
-    }, (_a = identity.displayName) != null ? _a : identity.identityKey.truncate()),
+    }, (_b = (_a = identity.profile) == null ? void 0 : _a.displayName) != null ? _b : identity.identityKey.truncate()),
     ...presence === SpaceMember.PresenceState.OFFLINE && {
       status: "inactive",
       description: /* @__PURE__ */ React.createElement("p", {
@@ -54,38 +59,64 @@ var IdentityListItem = ({ identity, presence }) => {
   })));
 };
 
-// packages/apps/patterns/react-ui/src/components/IdentityList/SpaceMemberList.tsx
-import React2 from "react";
-var SpaceMemberList = ({ spaceMembers }) => {
+// packages/apps/patterns/react-ui/src/components/IdentityList/DeviceList.tsx
+var DeviceList = ({ devices, onSelect }) => {
   return /* @__PURE__ */ React2.createElement("ul", {
     className: "flex flex-col gap-2"
-  }, spaceMembers.filter((spaceMember) => spaceMember.profile).map((spaceMember) => {
+  }, devices.map((device) => {
+    var _a;
+    const identity = {
+      identityKey: device.deviceKey,
+      profile: {
+        displayName: (_a = device.profile) == null ? void 0 : _a.displayName
+      }
+    };
     return /* @__PURE__ */ React2.createElement(IdentityListItem, {
-      key: spaceMember.identityKey.toHex(),
-      identity: spaceMember.profile,
-      presence: spaceMember.presence
+      key: device.deviceKey.toHex(),
+      identity,
+      onClick: onSelect && (() => onSelect(device))
+    });
+  }));
+};
+
+// packages/apps/patterns/react-ui/src/components/IdentityList/SpaceMemberList.tsx
+import React3 from "react";
+var SpaceMemberList = ({ members, onSelect }) => {
+  return /* @__PURE__ */ React3.createElement("ul", {
+    className: "flex flex-col gap-2"
+  }, members.filter((member) => member.identity).map((member) => {
+    return /* @__PURE__ */ React3.createElement(IdentityListItem, {
+      key: member.identity.identityKey.toHex(),
+      identity: member.identity,
+      presence: member.presence,
+      onClick: onSelect && (() => onSelect(member))
     });
   }));
 };
 
 // packages/apps/patterns/react-ui/src/components/IdentityList/SpaceMemberListContainer.tsx
-import React3, { useMemo } from "react";
+import React4, { useMemo } from "react";
 import { useClient, useMembers } from "@dxos/react-client";
-var SpaceMemberListContainer = ({ spaceKey, includeSelf }) => {
+var SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }) => {
   const client = useClient();
   const allUnsortedMembers = useMembers(spaceKey);
-  const spaceMembers = useMemo(() => includeSelf ? allUnsortedMembers.sort((a) => a.identityKey.equals(client.halo.profile.identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identityKey.equals(client.halo.profile.identityKey)), [
+  const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((a) => a.identity.identityKey.equals(client.halo.identity.identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity.identityKey)), [
     allUnsortedMembers
   ]);
-  return /* @__PURE__ */ React3.createElement(SpaceMemberList, {
-    spaceMembers
+  return /* @__PURE__ */ React4.createElement(SpaceMemberList, {
+    members,
+    onSelect
   });
 };
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
-import React4 from "react";
+import React5 from "react";
 import { Invitation as Invitation3 } from "@dxos/client";
-import { getSize } from "@dxos/react-components";
+import { getSize, mx as mx2 } from "@dxos/react-components";
+
+// packages/apps/patterns/react-ui/src/styles/dialogStyles.ts
+var defaultOverlay = "fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8";
+var defaultDialogContent = "is-full min-is-[260px] max-is-[320px] rounded-md shadow-md backdrop-blur-md";
 
 // packages/apps/patterns/react-ui/src/styles/panelStyles.ts
 var defaultSurface = "bg-neutral-50/[.72] dark:bg-neutral-950/[.72]";
@@ -166,7 +197,7 @@ function _extends2() {
   return _extends2.apply(this, arguments);
 }
 var svgSize = 32;
-var strokeWidth = 4;
+var strokeWidth = 5;
 var radius = (svgSize - strokeWidth) / 2;
 var circumference = Math.PI * 2 * radius;
 var gap = circumference / 12;
@@ -179,19 +210,20 @@ var circleProps = {
   cx: svgSize / 2,
   cy: svgSize / 2,
   r: radius,
-  strokeWidth: 4,
+  strokeWidth,
   strokeDasharray: `${segment - gap} ${2 * segment + gap}`
 };
-var InvitationStatusAvatar = ({ size = 10, status, haltedAt }) => {
+var InvitationStatusAvatar = ({ size = 10, status, haltedAt, slots = {} }) => {
+  var _a;
   const resolvedColor = resolvedStrokeColor(status);
   const halted = status === Invitation3.State.CANCELLED || status === Invitation3.State.TIMEOUT || status === Invitation3.State.ERROR;
   const cursor = invitationStatusValue.get(halted ? haltedAt : status);
-  return /* @__PURE__ */ React4.createElement("svg", {
+  return /* @__PURE__ */ React5.createElement("svg", _extends2({}, slots.svg, {
     viewBox: `0 0 ${svgSize} ${svgSize}`,
-    className: getSize(size)
-  }, [
+    className: mx2(getSize(size), (_a = slots.svg) == null ? void 0 : _a.className)
+  }), [
     ...Array(nSegments)
-  ].map((_, index) => /* @__PURE__ */ React4.createElement("circle", _extends2({
+  ].map((_, index) => /* @__PURE__ */ React5.createElement("circle", _extends2({
     key: index
   }, circleProps, {
     strokeDashoffset: index * segment + baseOffset,
@@ -203,9 +235,9 @@ var InvitationStatusAvatar = ({ size = 10, status, haltedAt }) => {
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { Copy, ProhibitInset, QrCode, X } from "phosphor-react";
 import { QRCodeSVG } from "qrcode.react";
-import React5, { useCallback } from "react";
+import React6, { useCallback } from "react";
 import { useInvitationStatus } from "@dxos/react-client";
-import { Button, getSize as getSize2, mx, useTranslation as useTranslation2 } from "@dxos/react-components";
+import { Button, getSize as getSize2, mx as mx3, useId, useTranslation as useTranslation2 } from "@dxos/react-components";
 function _extends3() {
   _extends3 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -223,85 +255,96 @@ function _extends3() {
 var InvitationListItem = ({ invitation, value, onClickRemove, createInvitationUrl }) => {
   var _a;
   const { t } = useTranslation2("os");
+  const qrLabel = useId("qrLabel");
   const { cancel, status, haltedAt, invitationCode, authenticationCode } = useInvitationStatus(invitation);
   const statusValue = (_a = invitationStatusValue.get(status)) != null ? _a : 0;
   const isCancellable = statusValue < 4 && statusValue >= 0;
   const showShare = statusValue < 3 && statusValue >= 0;
-  const showPin = statusValue === 3;
+  const showAuthCode = statusValue === 3;
   const handleClickRemove = useCallback(() => onClickRemove(invitation), [
     invitation,
     onClickRemove
   ]);
   const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
-  const handleCLickCopy = useCallback(() => {
+  const handleClickCopy = useCallback(() => {
     if (invitationUrl) {
       void navigator.clipboard.writeText(invitationUrl);
     }
   }, [
     invitationUrl
   ]);
-  return /* @__PURE__ */ React5.createElement(AccordionPrimitive.Item, {
+  return /* @__PURE__ */ React6.createElement(AccordionPrimitive.Item, {
     value
-  }, /* @__PURE__ */ React5.createElement(AccordionPrimitive.Header, {
+  }, /* @__PURE__ */ React6.createElement(AccordionPrimitive.Header, {
     className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ React5.createElement(InvitationStatusAvatar, _extends3({}, {
+  }, /* @__PURE__ */ React6.createElement(InvitationStatusAvatar, _extends3({}, {
     status,
-    haltedAt
-  })), showShare && invitationUrl ? /* @__PURE__ */ React5.createElement(AccordionPrimitive.Trigger, {
+    haltedAt,
+    size: 8
+  })), showShare && invitationUrl ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(AccordionPrimitive.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button, {
-    className: "grow flex gap-1"
-  }, /* @__PURE__ */ React5.createElement("span", null, t("open share panel label")), /* @__PURE__ */ React5.createElement(QrCode, {
+  }, /* @__PURE__ */ React6.createElement(Button, {
+    className: "grow flex gap-1",
+    "data-testid": "show-qrcode"
+  }, /* @__PURE__ */ React6.createElement("span", null, t("open share panel label")), /* @__PURE__ */ React6.createElement(QrCode, {
+    className: getSize2(4),
+    weight: "bold"
+  }))), /* @__PURE__ */ React6.createElement(Button, {
+    className: "flex gap-1",
+    onClick: handleClickCopy,
+    "data-testid": "copy-invitation"
+  }, /* @__PURE__ */ React6.createElement("span", {
+    className: "pli-1"
+  }, t("copy invitation code label")), /* @__PURE__ */ React6.createElement(Copy, {
     className: getSize2(4),
     weight: "bold"
-  }))) : showPin ? /* @__PURE__ */ React5.createElement("p", {
+  }))) : showAuthCode ? /* @__PURE__ */ React6.createElement("p", {
     className: "grow text-xl text-center text-success-500 dark:text-success-300 font-mono"
-  }, authenticationCode) : /* @__PURE__ */ React5.createElement("span", {
+  }, authenticationCode) : /* @__PURE__ */ React6.createElement("span", {
     role: "none",
     className: "grow"
-  }), isCancellable ? /* @__PURE__ */ React5.createElement(Button, {
+  }), isCancellable ? /* @__PURE__ */ React6.createElement(Button, {
     variant: "ghost",
-    compact: true,
     className: "flex gap-1",
-    onClick: cancel
-  }, /* @__PURE__ */ React5.createElement("span", {
+    onClick: cancel,
+    "data-testid": "cancel-invitation"
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "sr-only"
-  }, t("cancel invitation label")), /* @__PURE__ */ React5.createElement(ProhibitInset, {
+  }, t("cancel invitation label")), /* @__PURE__ */ React6.createElement(ProhibitInset, {
     className: getSize2(4),
     weight: "bold"
-  })) : /* @__PURE__ */ React5.createElement(Button, {
+  })) : /* @__PURE__ */ React6.createElement(Button, {
     variant: "ghost",
-    compact: true,
     className: "flex gap-1",
-    onClick: handleClickRemove
-  }, /* @__PURE__ */ React5.createElement("span", {
+    onClick: handleClickRemove,
+    "data-testid": "remove-invitation"
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "sr-only"
-  }, t("remove invitation label")), /* @__PURE__ */ React5.createElement(X, {
+  }, t("remove invitation label")), /* @__PURE__ */ React6.createElement(X, {
     className: getSize2(4),
     weight: "bold"
-  }))), showShare && invitationUrl && /* @__PURE__ */ React5.createElement(AccordionPrimitive.Content, null, /* @__PURE__ */ React5.createElement(Button, {
-    className: "flex gap-2 is-full p-2",
-    onClick: handleCLickCopy
-  }, /* @__PURE__ */ React5.createElement(QRCodeSVG, {
+  }))), showShare && invitationUrl && /* @__PURE__ */ React6.createElement(AccordionPrimitive.Content, {
+    className: "flex gap-2 is-full radix-state-open:p-1 items-center"
+  }, /* @__PURE__ */ React6.createElement(QRCodeSVG, {
     bgColor: "transparent",
     fgColor: "currentColor",
     value: invitationUrl,
-    className: mx("grow aspect-square is-24 bs-auto")
-  }), /* @__PURE__ */ React5.createElement("span", {
-    className: "pli-1"
-  }, t("copy invitation code label"), /* @__PURE__ */ React5.createElement(Copy, {
-    className: mx(getSize2(4), "inline mis-1"),
-    weight: "bold"
-  })))));
+    className: mx3("grow-[2] aspect-square is-24 bs-auto"),
+    "aria-labelledby": qrLabel
+  }), /* @__PURE__ */ React6.createElement("span", {
+    className: "pli-1 flex-1 font-system-normal text-sm text-center",
+    id: qrLabel
+  }, t("qr label"))));
 };
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationListContainer.tsx
-import React7, { useCallback as useCallback2 } from "react";
+import React8, { useCallback as useCallback2 } from "react";
 import { useSpace, useSpaceInvitations } from "@dxos/react-client";
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationList.tsx
 import { Root as AccordionRoot } from "@radix-ui/react-accordion";
-import React6 from "react";
+import React7 from "react";
+import { defaultDescription, DensityProvider, mx as mx4, useTranslation as useTranslation3 } from "@dxos/react-components";
 function _extends4() {
   _extends4 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -317,18 +360,24 @@ function _extends4() {
   return _extends4.apply(this, arguments);
 }
 var InvitationList = ({ invitations, ...invitationProps }) => {
-  return /* @__PURE__ */ React6.createElement(AccordionRoot, {
+  const { t } = useTranslation3("os");
+  return invitations.length ? /* @__PURE__ */ React7.createElement(AccordionRoot, {
     type: "single",
-    collapsible: true
+    collapsible: true,
+    className: "flex flex-col gap-1"
+  }, /* @__PURE__ */ React7.createElement(DensityProvider, {
+    density: "fine"
   }, invitations.map((invitation, index) => {
     var _a, _b;
     const value = (_b = (_a = invitation.invitation) == null ? void 0 : _a.invitationId) != null ? _b : `inv_${index}`;
-    return /* @__PURE__ */ React6.createElement(InvitationListItem, _extends4({
+    return /* @__PURE__ */ React7.createElement(InvitationListItem, _extends4({
       key: value,
       value,
       invitation
     }, invitationProps));
-  }));
+  }))) : /* @__PURE__ */ React7.createElement("p", {
+    className: mx4(defaultDescription, "text-center p-2")
+  }, t("empty invitations message"));
 };
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationListContainer.tsx
@@ -354,7 +403,7 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl }) => {
   }, [
     space
   ]);
-  return /* @__PURE__ */ React7.createElement(InvitationList, _extends5({
+  return /* @__PURE__ */ React8.createElement(InvitationList, _extends5({
     invitations
   }, {
     onClickRemove,
@@ -363,8 +412,8 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl }) => {
 };
 
 // packages/apps/patterns/react-ui/src/components/PanelSeparator/PanelSeparator.tsx
-import React8 from "react";
-import { mx as mx2 } from "@dxos/react-components";
+import React9 from "react";
+import { mx as mx5 } from "@dxos/react-components";
 function _extends6() {
   _extends6 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -380,20 +429,17 @@ function _extends6() {
   return _extends6.apply(this, arguments);
 }
 var PanelSeparator = ({ className, ...props }) => {
-  return /* @__PURE__ */ React8.createElement("span", _extends6({
+  return /* @__PURE__ */ React9.createElement("span", _extends6({
     role: "none"
   }, props, {
-    className: mx2("block bs-px mlb-1 bg-neutral-800/10 dark:bg-neutral-200/10", className)
+    className: mx5("block bs-px mlb-1 bg-neutral-800/10 dark:bg-neutral-200/10", className)
   }));
 };
 
-// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
-import React24 from "react";
-import { Avatar as Avatar7, mx as mx16 } from "@dxos/react-components";
-
-// packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
-import React9 from "react";
-import { mx as mx3, Popover } from "@dxos/react-components";
+// packages/apps/patterns/react-ui/src/components/SpaceList/SpaceListItem.tsx
+import React10, { forwardRef } from "react";
+import { Avatar as Avatar2, mx as mx6 } from "@dxos/react-components";
+import { humanize } from "@dxos/util";
 function _extends7() {
   _extends7 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -408,23 +454,69 @@ function _extends7() {
   };
   return _extends7.apply(this, arguments);
 }
+var SpaceListItem = /* @__PURE__ */ forwardRef(({ space, onClick }, ref) => {
+  var _a;
+  return /* @__PURE__ */ React10.createElement("li", {
+    className: mx6("flex gap-2 items-center", onClick && "cursor-pointer"),
+    onClick: () => onClick == null ? void 0 : onClick(),
+    ref,
+    "data-testid": "space-list-item"
+  }, /* @__PURE__ */ React10.createElement(Avatar2, _extends7({}, {
+    variant: "circle",
+    size: 9,
+    fallbackValue: space.key.toHex(),
+    label: /* @__PURE__ */ React10.createElement("p", {
+      className: "text-sm truncate"
+    }, (_a = space.properties.name) != null ? _a : humanize(space.key)),
+    slots: {
+      labels: {
+        className: "block shrink overflow-hidden"
+      },
+      root: {
+        className: "shrink-0"
+      }
+    }
+  })));
+});
+
+// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
+import React29 from "react";
+import { Avatar as Avatar8, mx as mx23 } from "@dxos/react-components";
+
+// packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
+import React11 from "react";
+import { mx as mx7, Popover } from "@dxos/react-components";
+function _extends8() {
+  _extends8 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends8.apply(this, arguments);
+}
 var PanelPopover = ({ slots, children, ...popoverProps }) => {
   var _a, _b, _c;
-  return /* @__PURE__ */ React9.createElement(Popover, _extends7({
+  return /* @__PURE__ */ React11.createElement(Popover, _extends8({
     slots: {
       arrow: {
         ...slots == null ? void 0 : slots.arrow,
-        className: mx3(defaultArrow, (_a = slots == null ? void 0 : slots.arrow) == null ? void 0 : _a.className)
+        className: mx7(defaultArrow, (_a = slots == null ? void 0 : slots.arrow) == null ? void 0 : _a.className)
       },
       content: {
         collisionPadding: 8,
         sideOffset: 4,
         ...slots == null ? void 0 : slots.content,
-        className: mx3(defaultSurface, (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.className)
+        className: mx7(defaultSurface, (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.className)
       },
       trigger: {
         ...slots == null ? void 0 : slots.trigger,
-        className: mx3("", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
+        className: mx7("", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
       },
       ...slots
     }
@@ -433,10 +525,10 @@ var PanelPopover = ({ slots, children, ...popoverProps }) => {
 
 // packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React10, { createContext, useCallback as useCallback3, useContext, useState } from "react";
-import { defaultOverlay, mx as mx4, useMediaQuery, useTranslation as useTranslation3 } from "@dxos/react-components";
-function _extends8() {
-  _extends8 = Object.assign || function(target) {
+import React12, { createContext, useCallback as useCallback3, useContext, useState } from "react";
+import { defaultOverlay as defaultOverlay2, mx as mx8, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-components";
+function _extends9() {
+  _extends9 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -447,7 +539,7 @@ function _extends8() {
     }
     return target;
   };
-  return _extends8.apply(this, arguments);
+  return _extends9.apply(this, arguments);
 }
 var PanelSidebarContext = /* @__PURE__ */ createContext({
   displayState: "hide",
@@ -464,7 +556,7 @@ var useTogglePanelSidebar = () => {
 };
 var PanelSidebarProvider = ({ children, slots }) => {
   var _a, _b, _c;
-  const { t } = useTranslation3("os");
+  const { t } = useTranslation4("os");
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -487,37 +579,37 @@ var PanelSidebarProvider = ({ children, slots }) => {
     }, 0);
   };
   const setDisplayState = (displayState2) => displayState2 === "show" ? internalShow() : internalHide();
-  return /* @__PURE__ */ React10.createElement(PanelSidebarContext.Provider, {
+  return /* @__PURE__ */ React12.createElement(PanelSidebarContext.Provider, {
     value: {
       setDisplayState,
       displayState
     }
-  }, /* @__PURE__ */ React10.createElement(DialogPrimitive.Root, {
+  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Root, {
     open: domShow,
     modal: !isLg
-  }, /* @__PURE__ */ React10.createElement(DialogPrimitive.Content, _extends8({
+  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Content, _extends9({
     onOpenAutoFocus: (event) => isLg && event.preventDefault(),
     onCloseAutoFocus: (event) => isLg && event.preventDefault()
   }, slots == null ? void 0 : slots.content, {
-    className: mx4("fixed block-start-0 block-end-0 is-sidebar z-50 overscroll-contain overflow-x-hidden overflow-y-auto", "transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-0" : "-inline-start-sidebar", (_a = slots == null ? void 0 : slots.content) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React10.createElement(DialogPrimitive.Title, {
+    className: mx8("fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto", "transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-0" : "-inline-start-sidebar", (_a = slots == null ? void 0 : slots.content) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React12.createElement(DialogPrimitive.Title, {
     className: "sr-only"
-  }, t("sidebar label")), (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.children), !isLg && /* @__PURE__ */ React10.createElement(DialogPrimitive.Overlay, {
-    className: mx4(defaultOverlay, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
+  }, t("sidebar label")), (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.children), !isLg && /* @__PURE__ */ React12.createElement(DialogPrimitive.Overlay, {
+    className: mx8(defaultOverlay2, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
     onClick: internalHide
-  }), /* @__PURE__ */ React10.createElement("div", _extends8({
+  }), /* @__PURE__ */ React12.createElement("div", _extends9({
     role: "none"
   }, slots == null ? void 0 : slots.main, {
-    className: mx4("transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-sidebar" : "pis-0", (_c = slots == null ? void 0 : slots.main) == null ? void 0 : _c.className)
+    className: mx8("transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-sidebar" : "pis-0", (_c = slots == null ? void 0 : slots.main) == null ? void 0 : _c.className)
   }), children)));
 };
 
 // packages/apps/patterns/react-ui/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
-import React11 from "react";
-import { mx as mx5 } from "@dxos/react-components";
-function _extends9() {
-  _extends9 = Object.assign || function(target) {
+import React13 from "react";
+import { mx as mx9 } from "@dxos/react-components";
+function _extends10() {
+  _extends10 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -528,67 +620,186 @@ function _extends9() {
     }
     return target;
   };
-  return _extends9.apply(this, arguments);
+  return _extends10.apply(this, arguments);
 }
 var PanelAlertDialog = ({ titleId, slots = {}, children }) => {
   var _a, _b;
-  return /* @__PURE__ */ React11.createElement(AlertDialog.Root, _extends9({
+  return /* @__PURE__ */ React13.createElement(AlertDialog.Root, _extends10({
     defaultOpen: true
-  }, slots.root), slots.trigger && /* @__PURE__ */ React11.createElement(AlertDialog.Trigger, _extends9({}, slots.trigger)), /* @__PURE__ */ React11.createElement(AlertDialog.Overlay, _extends9({}, slots.overlay, {
-    className: mx5("fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8", (_a = slots.overlay) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React11.createElement(AlertDialog.Content, _extends9({
+  }, slots.root), slots.trigger && /* @__PURE__ */ React13.createElement(AlertDialog.Trigger, _extends10({}, slots.trigger)), /* @__PURE__ */ React13.createElement(AlertDialog.Overlay, _extends10({}, slots.overlay, {
+    className: mx9(defaultOverlay, "z-40", (_a = slots.overlay) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React13.createElement(AlertDialog.Content, _extends10({
     onEscapeKeyDown: (event) => event.preventDefault()
   }, slots.content, {
     "aria-labelledby": titleId,
-    className: mx5("is-full min-is-[260px] max-is-[320px] shadow-md backdrop-blur-md", (_b = slots.content) == null ? void 0 : _b.className)
+    className: mx9(defaultDialogContent, (_b = slots.content) == null ? void 0 : _b.className)
   }), children)));
 };
 
-// packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx
-import React12 from "react";
-import { useClient as useClient2 } from "@dxos/react-client";
-import { Avatar as Avatar2, Button as Button2, ThemeContext, useTranslation as useTranslation4 } from "@dxos/react-components";
-var IdentityPanel = ({ identity, onClickManageProfile }) => {
+// packages/apps/patterns/react-ui/src/layouts/PanelDialog/PanelDialog.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import React14 from "react";
+import { mx as mx10 } from "@dxos/react-components";
+function _extends11() {
+  _extends11 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends11.apply(this, arguments);
+}
+var PanelDialog = ({ titleId, slots = {}, children }) => {
+  var _a, _b;
+  return /* @__PURE__ */ React14.createElement(Dialog.Root, _extends11({
+    defaultOpen: true
+  }, slots.root), slots.trigger && /* @__PURE__ */ React14.createElement(Dialog.Trigger, _extends11({}, slots.trigger)), /* @__PURE__ */ React14.createElement(Dialog.Overlay, _extends11({}, slots.overlay, {
+    className: mx10(defaultOverlay, "z-40", (_a = slots.overlay) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React14.createElement(Dialog.Content, _extends11({
+    onOpenAutoFocus: (event) => event.preventDefault(),
+    onCloseAutoFocus: (event) => event.preventDefault()
+  }, slots.content, {
+    "aria-labelledby": titleId,
+    className: mx10(defaultDialogContent, (_b = slots.content) == null ? void 0 : _b.className)
+  }), children)));
+};
+
+// packages/apps/patterns/react-ui/src/panels/DevicesPanel/DevicesPanel.tsx
+import { UserPlus, X as X2 } from "phosphor-react";
+import React15, { cloneElement, useReducer } from "react";
+import { useClient as useClient2, useDevices, useHaloInvitations, useIdentity } from "@dxos/react-client";
+import { Button as Button2, DensityProvider as DensityProvider2, getSize as getSize3, mx as mx11, Tooltip, useTranslation as useTranslation5 } from "@dxos/react-components";
+function _extends12() {
+  _extends12 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends12.apply(this, arguments);
+}
+var DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }) => {
   var _a;
-  const { t } = useTranslation4("os");
+  const { t } = useTranslation5("os");
   const client = useClient2();
+  const identity = useIdentity();
+  const devices = useDevices();
+  const invitations = useHaloInvitations();
+  const displayName = (_a = identity == null ? void 0 : identity.profile) == null ? void 0 : _a.displayName;
+  if (!identity) {
+    return null;
+  }
+  const doneButton = /* @__PURE__ */ React15.createElement(Button2, {
+    variant: "ghost",
+    onClick: () => onDone == null ? void 0 : onDone(),
+    "data-testid": "show-all-spaces"
+  }, /* @__PURE__ */ React15.createElement(X2, {
+    className: getSize3(4),
+    weight: "bold"
+  }));
+  return /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: "flex flex-col"
+  }, /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: mx11(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
+  }, /* @__PURE__ */ React15.createElement("h2", {
+    id: titleId,
+    className: mx11("grow font-system-medium", !displayName && "font-mono")
+  }, displayName != null ? displayName : identity.identityKey.truncate()), /* @__PURE__ */ React15.createElement(Tooltip, {
+    content: t("close label"),
+    zIndex: "z-50"
+  }, doneActionParent ? /* @__PURE__ */ cloneElement(doneActionParent, {}, doneButton) : doneButton)), /* @__PURE__ */ React15.createElement("div", {
+    role: "region",
+    className: mx11(defaultSurface, "rounded-be-md p-2")
+  }, /* @__PURE__ */ React15.createElement(InvitationList, {
+    invitations,
+    onClickRemove: ({ invitation }) => invitation && client.halo.removeInvitation(invitation.invitationId),
+    createInvitationUrl
+  }), /* @__PURE__ */ React15.createElement(Button2, {
+    className: "is-full flex gap-2 mbs-2",
+    onClick: () => client.halo.createInvitation(),
+    "data-testid": "create-space-invitation"
+  }, /* @__PURE__ */ React15.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React15.createElement(UserPlus, {
+    className: getSize3(4),
+    weight: "bold"
+  })), /* @__PURE__ */ React15.createElement(PanelSeparator, null), /* @__PURE__ */ React15.createElement(DeviceList, {
+    devices
+  })));
+};
+var DevicesPanel = (props) => {
+  const reducer = (state, action) => {
+    const nextState = {
+      ...state
+    };
+    switch (action.type) {
+      case null:
+    }
+    return nextState;
+  };
+  const [panelState] = useReducer(reducer, {
+    activeView: "device list"
+  });
+  return /* @__PURE__ */ React15.createElement(DensityProvider2, {
+    density: "fine"
+  }, panelState.activeView === "device list" ? /* @__PURE__ */ React15.createElement(DeviceListView, _extends12({}, props)) : null);
+};
+
+// packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx
+import React16 from "react";
+import { useClient as useClient3 } from "@dxos/react-client";
+import { Avatar as Avatar3, Button as Button3, ThemeContext, useTranslation as useTranslation6 } from "@dxos/react-components";
+var IdentityPanel = ({ identity, onClickManageProfile }) => {
+  var _a, _b;
+  const { t } = useTranslation6("os");
+  const client = useClient3();
   const defaultManageProfile = () => {
     const remoteSource = new URL((client == null ? void 0 : client.config.get("runtime.client.remoteSource")) || "https://halo.dxos.org");
     const tab = window.open(remoteSource.origin, "_blank");
     tab == null ? void 0 : tab.focus();
   };
-  return /* @__PURE__ */ React12.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React16.createElement(ThemeContext.Provider, {
     value: {
-      themeVariant: "os"
+      themeVariant: "os",
+      rootDensity: "fine"
     }
-  }, /* @__PURE__ */ React12.createElement("div", {
+  }, /* @__PURE__ */ React16.createElement("div", {
     className: "flex flex-col gap-2 justify-center items-center"
-  }, /* @__PURE__ */ React12.createElement(Avatar2, {
+  }, /* @__PURE__ */ React16.createElement(Avatar3, {
     size: 16,
     variant: "circle",
     fallbackValue: identity.identityKey.toHex(),
-    label: (_a = identity.displayName) != null ? _a : ""
-  }), /* @__PURE__ */ React12.createElement(Button2, {
-    compact: true,
+    label: (_b = (_a = identity.profile) == null ? void 0 : _a.displayName) != null ? _b : ""
+  }), /* @__PURE__ */ React16.createElement(Button3, {
     onClick: onClickManageProfile != null ? onClickManageProfile : defaultManageProfile,
     className: "is-full"
   }, t("manage profile label"))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
-import React23, { useEffect, useReducer } from "react";
+import React27, { useEffect, useReducer as useReducer2, useState as useState6 } from "react";
 import { InvitationEncoder as InvitationEncoder2 } from "@dxos/client";
 import { log } from "@dxos/log";
-import { useClient as useClient5, useIdentity } from "@dxos/react-client";
-import { useId as useId3 } from "@dxos/react-components";
+import { useClient as useClient6, useIdentity as useIdentity2 } from "@dxos/react-client";
+import { DensityProvider as DensityProvider3, useId as useId4 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinHeading.tsx
 import { ProhibitInset as ProhibitInset2 } from "phosphor-react";
-import React13, { cloneElement, forwardRef } from "react";
-import { useSpace as useSpace2 } from "@dxos/react-client";
-import { Avatar as Avatar3, Button as Button3, getSize as getSize3, Heading, mx as mx6, Trans, useId, useTranslation as useTranslation5 } from "@dxos/react-components";
-function _extends10() {
-  _extends10 = Object.assign || function(target) {
+import React17, { cloneElement as cloneElement2 } from "react";
+import { useSpace as useSpace2, withReactorRef } from "@dxos/react-client";
+import { Avatar as Avatar4, Button as Button4, getSize as getSize4, Heading, mx as mx12, Trans, useId as useId2, useTranslation as useTranslation7 } from "@dxos/react-components";
+function _extends13() {
+  _extends13 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -599,70 +810,76 @@ function _extends10() {
     }
     return target;
   };
-  return _extends10.apply(this, arguments);
+  return _extends13.apply(this, arguments);
 }
-var JoinHeading = /* @__PURE__ */ forwardRef(({ titleId, invitation, onExit, exitActionParent }, ref) => {
-  var _a, _b, _c, _d, _e;
-  const { t } = useTranslation5("os");
+var JoinHeading = withReactorRef(({ mode, titleId, invitation, onExit, exitActionParent, preventExit }, ref) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { t } = useTranslation7("os");
   const space = useSpace2((_a = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _a.spaceKey);
-  const spaceTitle = (_b = space == null ? void 0 : space.properties.name) != null ? _b : "(Space not available)";
-  const nameId = useId("spaceDisplayName");
-  const exitButton = /* @__PURE__ */ React13.createElement(Button3, _extends10({
-    compact: true,
+  const name = mode === "halo-only" ? "(Unknown identity)" : (_b = space == null ? void 0 : space.properties.name) != null ? _b : "(Space name not available)";
+  const nameId = useId2(mode === "halo-only" ? "identityDisplayName" : "spaceDisplayName");
+  const invitationKey = mode === "halo-only" ? (_d = (_c = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _c.identityKey) == null ? void 0 : _d.toHex() : (_f = (_e = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _e.identityKey) == null ? void 0 : _f.toHex();
+  const exitButton = /* @__PURE__ */ React17.createElement(Button4, _extends13({
     variant: "ghost"
   }, onExit && {
     onClick: onExit
   }, {
-    className: "grow-0 shrink-0"
-  }), /* @__PURE__ */ React13.createElement(ProhibitInset2, {
-    className: getSize3(5)
-  }), /* @__PURE__ */ React13.createElement("span", {
+    className: "grow-0 shrink-0",
+    "data-testid": "join-exit"
+  }), /* @__PURE__ */ React17.createElement(ProhibitInset2, {
+    className: getSize4(5)
+  }), /* @__PURE__ */ React17.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
-  return /* @__PURE__ */ React13.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     role: "none",
-    className: mx6(subduedSurface, "p-2 rounded-bs-md"),
+    className: mx12(subduedSurface, "p-2 rounded-bs-md"),
     ref
-  }, /* @__PURE__ */ React13.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     role: "group",
     className: "flex items-center gap-2"
-  }, /* @__PURE__ */ React13.createElement(Avatar3, {
-    fallbackValue: (_e = (_d = (_c = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _c.spaceKey) == null ? void 0 : _d.toHex()) != null ? _e : "",
+  }, invitationKey ? /* @__PURE__ */ React17.createElement(Avatar4, {
+    fallbackValue: invitationKey,
     labelId: nameId
-  }), /* @__PURE__ */ React13.createElement(Heading, {
+  }) : /* @__PURE__ */ React17.createElement("span", {
+    role: "none",
+    className: mx12(getSize4(10), "bg-neutral-300 dark:bg-neutral-700 rounded-full")
+  }), /* @__PURE__ */ React17.createElement(Heading, {
     level: 1,
     className: "font-body font-normal text-base grow",
     id: titleId
-  }, /* @__PURE__ */ React13.createElement(Trans, _extends10({}, {
-    defaults: t("join space heading"),
+  }, invitation ? /* @__PURE__ */ React17.createElement(Trans, _extends13({}, {
+    defaults: t("joining heading"),
     components: {
-      small: /* @__PURE__ */ React13.createElement("span", {
+      small: /* @__PURE__ */ React17.createElement("span", {
         className: "block leading-none mbe-1 font-system-medium text-sm"
       }),
-      large: /* @__PURE__ */ React13.createElement("span", {
+      large: /* @__PURE__ */ React17.createElement("span", {
         className: "block leading-none",
         id: nameId
       })
     },
     values: {
-      spaceTitle
+      name
     }
-  }))), exitActionParent ? /* @__PURE__ */ cloneElement(exitActionParent, {}, exitButton) : exitButton));
+  })) : /* @__PURE__ */ React17.createElement("span", {
+    className: "block leading-none font-system-medium text-sm"
+  }, mode === "halo-only" ? t("halo heading") : t("join space heading"))), !preventExit && mode !== "halo-only" && (exitActionParent ? /* @__PURE__ */ cloneElement2(exitActionParent, {}, exitButton) : exitButton)));
 });
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx
 import { CaretLeft, CaretRight, Plus, QrCode as QrCode2, Textbox } from "phosphor-react";
-import React15 from "react";
-import { Button as Button4, CompoundButton, getSize as getSize5, mx as mx8, useTranslation as useTranslation7 } from "@dxos/react-components";
+import React19 from "react";
+import { Button as Button5, CompoundButton, getSize as getSize6, mx as mx14, useTranslation as useTranslation9 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/ViewState.tsx
-import { CheckCircle, HourglassSimple, X as X2 } from "phosphor-react";
-import React14, { useMemo as useMemo2 } from "react";
+import { CheckCircle, HourglassSimple, X as X3 } from "phosphor-react";
+import React18, { useMemo as useMemo2 } from "react";
 import { Invitation as Invitation4 } from "@dxos/client";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client";
-import { mx as mx7, useTranslation as useTranslation6, Trans as Trans2, Avatar as Avatar4, useId as useId2, getSize as getSize4, strongShimmer } from "@dxos/react-components";
-function _extends11() {
-  _extends11 = Object.assign || function(target) {
+import { mx as mx13, useTranslation as useTranslation8, Trans as Trans2, Avatar as Avatar5, useId as useId3, getSize as getSize5, strongShimmer } from "@dxos/react-components";
+function _extends14() {
+  _extends14 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -673,39 +890,39 @@ function _extends11() {
     }
     return target;
   };
-  return _extends11.apply(this, arguments);
+  return _extends14.apply(this, arguments);
 }
-var stripe = mx7("rounded-full grow", getSize4(3));
+var stripe = mx13("rounded-full grow", getSize5(3));
 var ViewStateHeading = ({ children, className, ...props }) => {
-  return /* @__PURE__ */ React14.createElement("h2", _extends11({}, props, {
-    className: mx7("font-system-medium text-sm md:text-base mbe-1 mli-1 text-center", className)
+  return /* @__PURE__ */ React18.createElement("h2", _extends14({}, props, {
+    className: mx13("font-system-medium text-sm md:text-base mbe-1 mli-1 text-center", className)
   }), children);
 };
 var PureViewStateInvitation = ({ halted, cursor, label, resolvedColor }) => {
-  const labelId = useId2("invitationState");
-  return /* @__PURE__ */ React14.createElement("div", {
+  const labelId = useId3("invitationState");
+  return /* @__PURE__ */ React18.createElement("div", {
     role: "none",
-    className: mx7(defaultSurface, "pli-2 pbs-2")
-  }, /* @__PURE__ */ React14.createElement("div", {
+    className: mx13(defaultSurface, "pli-2 pbs-2")
+  }, /* @__PURE__ */ React18.createElement("div", {
     role: "status",
     "aria-labelledby": labelId,
     className: "flex gap-2 items-center mlb-1"
-  }, /* @__PURE__ */ React14.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     role: "none",
-    className: mx7(stripe, !halted && cursor === 1 && strongShimmer, cursor === 2 ? halted ? resolvedColor : activeBgColor : cursor > 1 ? resolvedColor : inactiveBgColor)
-  }), /* @__PURE__ */ React14.createElement("div", {
+    className: mx13(stripe, !halted && cursor === 1 && strongShimmer, cursor === 2 ? halted ? resolvedColor : activeBgColor : cursor > 1 ? resolvedColor : inactiveBgColor)
+  }), /* @__PURE__ */ React18.createElement("div", {
     role: "none",
-    className: mx7(stripe, !halted && cursor === 3 && strongShimmer, cursor === 3 ? halted ? resolvedColor : activeBgColor : cursor > 3 ? resolvedColor : inactiveBgColor)
-  }), /* @__PURE__ */ React14.createElement("div", {
+    className: mx13(stripe, !halted && cursor === 3 && strongShimmer, cursor === 3 ? halted ? resolvedColor : activeBgColor : cursor > 3 ? resolvedColor : inactiveBgColor)
+  }), /* @__PURE__ */ React18.createElement("div", {
     role: "none",
-    className: mx7(stripe, cursor > 3 ? halted ? resolvedColor : resolvedColor : inactiveBgColor)
-  })), /* @__PURE__ */ React14.createElement(ViewStateHeading, {
+    className: mx13(stripe, cursor > 3 ? halted ? resolvedColor : resolvedColor : inactiveBgColor)
+  })), /* @__PURE__ */ React18.createElement(ViewStateHeading, {
     id: labelId,
     className: "mbs-2 flex justify-center items-center gap-2"
   }, label));
 };
 var ViewStateInvitationStatus = ({ activeInvitation }) => {
-  const { t } = useTranslation6("os");
+  const { t } = useTranslation8("os");
   const { status, haltedAt } = useInvitationStatus2(activeInvitation);
   const halted = status === Invitation4.State.CANCELLED || status === Invitation4.State.TIMEOUT || status === Invitation4.State.ERROR;
   const cursor = invitationStatusValue.get(halted ? haltedAt : status);
@@ -713,24 +930,24 @@ var ViewStateInvitationStatus = ({ activeInvitation }) => {
   const statusLabelMap = useMemo2(() => /* @__PURE__ */ new Map([
     [
       Invitation4.State.ERROR,
-      /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(X2, {
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(X3, {
         weight: "bold",
-        className: mx7(getSize4(4), "text-error-600 dark:text-error-400")
-      }), /* @__PURE__ */ React14.createElement("span", null, t("error status label")))
+        className: mx13(getSize5(4), "text-error-600 dark:text-error-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("error status label")))
     ],
     [
       Invitation4.State.TIMEOUT,
-      /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(HourglassSimple, {
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(HourglassSimple, {
         weight: "fill",
-        className: mx7(getSize4(4), "text-warning-600 dark:text-warning-400")
-      }), /* @__PURE__ */ React14.createElement("span", null, t("timeout status label")))
+        className: mx13(getSize5(4), "text-warning-600 dark:text-warning-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("timeout status label")))
     ],
     [
       Invitation4.State.CANCELLED,
-      /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(X2, {
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(X3, {
         weight: "bold",
-        className: mx7(getSize4(4), "text-warning-600 dark:text-warning-400")
-      }), /* @__PURE__ */ React14.createElement("span", null, t("cancelled status label")))
+        className: mx13(getSize5(4), "text-warning-600 dark:text-warning-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("cancelled status label")))
     ],
     [
       Invitation4.State.INIT,
@@ -750,15 +967,15 @@ var ViewStateInvitationStatus = ({ activeInvitation }) => {
     ],
     [
       Invitation4.State.SUCCESS,
-      /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(CheckCircle, {
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(CheckCircle, {
         weight: "fill",
-        className: mx7(getSize4(4), "text-success-600 dark:text-success-400")
-      }), /* @__PURE__ */ React14.createElement("span", null, t("success status label")))
+        className: mx13(getSize5(4), "text-success-600 dark:text-success-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("success status label")))
     ]
   ]), [
     t
   ]);
-  return /* @__PURE__ */ React14.createElement(PureViewStateInvitation, _extends11({}, {
+  return /* @__PURE__ */ React18.createElement(PureViewStateInvitation, _extends14({}, {
     label: statusLabelMap.get(status),
     resolvedColor,
     cursor,
@@ -766,54 +983,54 @@ var ViewStateInvitationStatus = ({ activeInvitation }) => {
   }));
 };
 var ViewState = ({ active, children, className, dispatch, selectedIdentity, activeInvitation, ...props }) => {
-  var _a;
-  const { t } = useTranslation6("os");
-  const identityLabel = useId2("selectedIdentityLabel");
-  return /* @__PURE__ */ React14.createElement("div", _extends11({
+  var _a, _b;
+  const { t } = useTranslation8("os");
+  const identityLabel = useId3("selectedIdentityLabel");
+  return /* @__PURE__ */ React18.createElement("div", _extends14({
     role: "none"
   }, props, !active && {
     "aria-hidden": true
   }, {
-    className: mx7("is-[50%] flex flex-col", active ? "order-2" : "order-4", className)
-  }), selectedIdentity && /* @__PURE__ */ React14.createElement("div", {
+    className: mx13("is-[50%] flex flex-col", active ? "order-2" : "order-4", className)
+  }), selectedIdentity && /* @__PURE__ */ React18.createElement("div", {
     role: "none",
-    className: mx7(subduedSurface, "flex-none flex items-center gap-1 pli-2 pbe-1.5")
-  }, /* @__PURE__ */ React14.createElement(Trans2, _extends11({}, {
+    className: mx13(subduedSurface, "flex-none flex items-center gap-1 pli-2 pbe-1.5")
+  }, /* @__PURE__ */ React18.createElement(Trans2, _extends14({}, {
     defaults: t("join space as identity heading"),
     components: {
-      icon: /* @__PURE__ */ React14.createElement(Avatar4, {
+      icon: /* @__PURE__ */ React18.createElement(Avatar5, {
         size: 4,
         fallbackValue: selectedIdentity === true ? "" : selectedIdentity.identityKey.toHex(),
         labelId: identityLabel
       }),
-      label: /* @__PURE__ */ React14.createElement("span", {
+      label: /* @__PURE__ */ React18.createElement("span", {
         id: identityLabel
       }),
-      part: /* @__PURE__ */ React14.createElement("span", {
+      part: /* @__PURE__ */ React18.createElement("span", {
         role: "none",
         className: "flex items-center gap-1 leading-none"
       })
     },
     values: {
-      labelValue: selectedIdentity === true ? "\xA0" : (_a = selectedIdentity.displayName) != null ? _a : selectedIdentity.identityKey.truncate()
+      labelValue: selectedIdentity === true ? "\xA0" : (_b = (_a = selectedIdentity.profile) == null ? void 0 : _a.displayName) != null ? _b : selectedIdentity.identityKey.truncate()
     }
-  }))), activeInvitation && (activeInvitation === true ? /* @__PURE__ */ React14.createElement(PureViewStateInvitation, _extends11({}, {
+  }))), activeInvitation && (activeInvitation === true ? /* @__PURE__ */ React18.createElement(PureViewStateInvitation, _extends14({}, {
     halted: false,
     status: Invitation4.State.INIT,
     label: t("invitation input label"),
     cursor: 0,
     resolvedColor: inactiveBgColor
-  })) : /* @__PURE__ */ React14.createElement(ViewStateInvitationStatus, _extends11({}, {
+  })) : /* @__PURE__ */ React18.createElement(ViewStateInvitationStatus, _extends14({}, {
     activeInvitation
-  }))), /* @__PURE__ */ React14.createElement("div", {
+  }))), /* @__PURE__ */ React18.createElement("div", {
     role: "region",
-    className: mx7(defaultSurface, "rounded-be-md grow shrink-0 flex flex-col gap-1 p-2")
+    className: mx13(defaultSurface, "rounded-be-md grow shrink-0 flex flex-col gap-1 p-2")
   }, children));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx
-function _extends12() {
-  _extends12 = Object.assign || function(target) {
+function _extends15() {
+  _extends15 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -824,16 +1041,16 @@ function _extends12() {
     }
     return target;
   };
-  return _extends12.apply(this, arguments);
+  return _extends15.apply(this, arguments);
 }
 var AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }) => {
   const disabled = !viewStateProps.active;
   const { dispatch } = viewStateProps;
-  const { t } = useTranslation7("os");
+  const { t } = useTranslation9("os");
   const sharedButtonProps = {
     disabled,
-    after: /* @__PURE__ */ React15.createElement(CaretRight, {
-      className: getSize5(4),
+    after: /* @__PURE__ */ React19.createElement(CaretRight, {
+      className: getSize6(4),
       weight: "bold"
     }),
     slots: {
@@ -842,59 +1059,65 @@ var AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }) => {
       }
     }
   };
-  return /* @__PURE__ */ React15.createElement(ViewState, _extends12({}, viewStateProps), /* @__PURE__ */ React15.createElement(ViewStateHeading, null, t("addition method selector title")), /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React19.createElement(ViewState, _extends15({}, viewStateProps), /* @__PURE__ */ React19.createElement(ViewStateHeading, null, t("addition method selector title")), /* @__PURE__ */ React19.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1 grow"
-  }, /* @__PURE__ */ React15.createElement(CompoundButton, _extends12({}, sharedButtonProps, {
+  }, /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
     description: t("create identity description"),
-    before: /* @__PURE__ */ React15.createElement(Plus, {
-      className: getSize5(6)
+    before: /* @__PURE__ */ React19.createElement(Plus, {
+      className: getSize6(6)
     }),
     onClick: () => dispatch({
       type: "select addition method",
       method: "create identity"
     }),
-    "data-autofocus": "addition method selector"
-  }), t("create identity label")), /* @__PURE__ */ React15.createElement(CompoundButton, _extends12({}, sharedButtonProps, {
+    "data-autofocus": "addition method selector",
+    "data-testid": "create-identity"
+  }), t("create identity label")), /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
     description: t("join identity description"),
-    before: /* @__PURE__ */ React15.createElement(QrCode2, {
-      className: getSize5(6)
+    before: /* @__PURE__ */ React19.createElement(QrCode2, {
+      className: getSize6(6)
     }),
     onClick: () => dispatch({
       type: "select addition method",
       method: "accept device invitation"
-    })
-  }), t("join identity label")), /* @__PURE__ */ React15.createElement(CompoundButton, _extends12({}, sharedButtonProps, {
+    }),
+    "data-testid": "join-identity"
+  }), t("join identity label")), /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
+    // TODO(mykola): Implement recover.
+    disabled: true,
     description: t("recover identity description"),
-    before: /* @__PURE__ */ React15.createElement(Textbox, {
-      className: getSize5(6)
+    before: /* @__PURE__ */ React19.createElement(Textbox, {
+      className: getSize6(6)
     }),
     onClick: () => dispatch({
       type: "select addition method",
       method: "recover identity"
-    })
-  }), t("recover identity label"))), /* @__PURE__ */ React15.createElement(Button4, {
+    }),
+    "data-testid": "recover-identity"
+  }), t("recover identity label"))), /* @__PURE__ */ React19.createElement(Button5, {
     disabled: disabled || availableIdentities.length < 1,
     onClick: () => dispatch({
       type: "deselect identity"
-    })
-  }, /* @__PURE__ */ React15.createElement(CaretLeft, {
-    className: getSize5(4),
+    }),
+    "data-testid": "deselect-identity"
+  }, /* @__PURE__ */ React19.createElement(CaretLeft, {
+    className: getSize6(4),
     weight: "bold"
-  }), /* @__PURE__ */ React15.createElement("span", {
+  }), /* @__PURE__ */ React19.createElement("span", {
     className: "grow"
-  }, t("deselect identity label")), /* @__PURE__ */ React15.createElement(CaretRight, {
-    className: mx8(getSize5(4), "invisible"),
+  }, t("deselect identity label")), /* @__PURE__ */ React19.createElement(CaretRight, {
+    className: mx14(getSize6(4), "invisible"),
     weight: "bold"
   })));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityAdded.tsx
-import { CaretLeft as CaretLeft2, CaretRight as CaretRight2 } from "phosphor-react";
-import React16 from "react";
-import { Avatar as Avatar5, Button as Button5, getSize as getSize6, mx as mx9, useTranslation as useTranslation8 } from "@dxos/react-components";
-function _extends13() {
-  _extends13 = Object.assign || function(target) {
+import { CaretLeft as CaretLeft2, CaretRight as CaretRight2, Check } from "phosphor-react";
+import React20, { cloneElement as cloneElement3 } from "react";
+import { Avatar as Avatar6, Button as Button6, getSize as getSize7, mx as mx15, useTranslation as useTranslation10 } from "@dxos/react-components";
+function _extends16() {
+  _extends16 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -905,27 +1128,51 @@ function _extends13() {
     }
     return target;
   };
-  return _extends13.apply(this, arguments);
+  return _extends16.apply(this, arguments);
 }
-var IdentityAdded = ({ addedIdentity, ...viewStateProps }) => {
-  var _a, _b, _c;
+var Done = ({ onDone, doneActionParent, active }) => {
+  const disabled = !active;
+  const { t } = useTranslation10("os");
+  const doneButton = /* @__PURE__ */ React20.createElement(Button6, _extends16({}, onDone && {
+    onClick: () => onDone(null)
+  }, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2",
+    "data-autofocus": "identity added",
+    "data-testid": "identity-added-done"
+  }), /* @__PURE__ */ React20.createElement(CaretLeft2, {
+    weight: "bold",
+    className: mx15(getSize7(2), "invisible")
+  }), /* @__PURE__ */ React20.createElement("span", {
+    className: "grow"
+  }, t("done label")), /* @__PURE__ */ React20.createElement(Check, {
+    weight: "bold",
+    className: getSize7(4)
+  }));
+  return doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, doneButton) : doneButton;
+};
+var IdentityAdded = ({ mode, addedIdentity, onDone, doneActionParent, ...viewStateProps }) => {
+  var _a, _b, _c, _d, _e;
   const disabled = !viewStateProps.active;
   const { dispatch } = viewStateProps;
-  const { t } = useTranslation8("os");
-  return /* @__PURE__ */ React16.createElement(ViewState, _extends13({}, viewStateProps), /* @__PURE__ */ React16.createElement(ViewStateHeading, null, t("identity added label")), /* @__PURE__ */ React16.createElement("div", {
+  const { t } = useTranslation10("os");
+  return /* @__PURE__ */ React20.createElement(ViewState, _extends16({}, viewStateProps), /* @__PURE__ */ React20.createElement(ViewStateHeading, null, t("identity added label")), /* @__PURE__ */ React20.createElement("div", {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
-  }, /* @__PURE__ */ React16.createElement(Avatar5, {
+  }, /* @__PURE__ */ React20.createElement(Avatar6, {
     size: 20,
     fallbackValue: (_a = addedIdentity == null ? void 0 : addedIdentity.identityKey.toHex()) != null ? _a : "",
-    label: /* @__PURE__ */ React16.createElement("p", {
-      className: mx9("text-lg", !(addedIdentity == null ? void 0 : addedIdentity.displayName) && "font-mono")
-    }, (_c = (_b = addedIdentity == null ? void 0 : addedIdentity.displayName) != null ? _b : addedIdentity == null ? void 0 : addedIdentity.identityKey.truncate()) != null ? _c : "\xA0"),
+    label: /* @__PURE__ */ React20.createElement("p", {
+      className: mx15("text-lg", !((_b = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _b.displayName) && "font-mono")
+    }, (_e = (_d = (_c = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _c.displayName) != null ? _d : addedIdentity == null ? void 0 : addedIdentity.identityKey.truncate()) != null ? _e : "\xA0"),
     variant: "circle",
     status: "active"
-  })), /* @__PURE__ */ React16.createElement("div", {
+  })), mode === "halo-only" ? /* @__PURE__ */ React20.createElement(Done, _extends16({
+    onDone,
+    doneActionParent
+  }, viewStateProps)) : /* @__PURE__ */ React20.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React16.createElement(Button5, {
+  }, /* @__PURE__ */ React20.createElement(Button6, {
     disabled: disabled || !addedIdentity,
     className: "grow flex items-center gap-2 pli-2 order-2",
     onClick: () => addedIdentity && dispatch({
@@ -933,33 +1180,33 @@ var IdentityAdded = ({ addedIdentity, ...viewStateProps }) => {
       identity: addedIdentity
     }),
     "data-autofocus": "identity added"
-  }, /* @__PURE__ */ React16.createElement(CaretLeft2, {
+  }, /* @__PURE__ */ React20.createElement(CaretLeft2, {
     weight: "bold",
-    className: mx9(getSize6(2), "invisible")
-  }), /* @__PURE__ */ React16.createElement("span", {
+    className: mx15(getSize7(2), "invisible")
+  }), /* @__PURE__ */ React20.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React16.createElement(CaretRight2, {
+  }, t("continue label")), /* @__PURE__ */ React20.createElement(CaretRight2, {
     weight: "bold",
-    className: getSize6(4)
-  })), /* @__PURE__ */ React16.createElement(Button5, {
+    className: getSize7(4)
+  })), /* @__PURE__ */ React20.createElement(Button6, {
     disabled,
     onClick: () => dispatch({
       type: "deselect identity"
     }),
     className: "flex items-center gap-2 pis-2 pie-4"
-  }, /* @__PURE__ */ React16.createElement(CaretLeft2, {
+  }, /* @__PURE__ */ React20.createElement(CaretLeft2, {
     weight: "bold",
-    className: getSize6(4)
-  }), /* @__PURE__ */ React16.createElement("span", null, t("deselect identity label")))));
+    className: getSize7(4)
+  }), /* @__PURE__ */ React20.createElement("span", null, t("deselect identity label")))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentitySelector.tsx
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { CaretLeft as CaretLeft3, CaretRight as CaretRight3, UserPlus } from "phosphor-react";
-import React17, { useCallback as useCallback4, useState as useState2 } from "react";
-import { Avatar as Avatar6, Button as Button6, themeVariantFocus, getSize as getSize7, mx as mx10, useTranslation as useTranslation9 } from "@dxos/react-components";
-function _extends14() {
-  _extends14 = Object.assign || function(target) {
+import { CaretLeft as CaretLeft3, CaretRight as CaretRight3, UserPlus as UserPlus2 } from "phosphor-react";
+import React21, { useCallback as useCallback4, useState as useState2 } from "react";
+import { Avatar as Avatar7, Button as Button7, themeVariantFocus, getSize as getSize8, mx as mx16, useTranslation as useTranslation11 } from "@dxos/react-components";
+function _extends17() {
+  _extends17 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -970,84 +1217,86 @@ function _extends14() {
     }
     return target;
   };
-  return _extends14.apply(this, arguments);
+  return _extends17.apply(this, arguments);
 }
 var IdentitySelector = ({ availableIdentities, ...viewStateProps }) => {
   const { dispatch } = viewStateProps;
   const disabled = !viewStateProps.active;
-  const { t } = useTranslation9("os");
+  const { t } = useTranslation11("os");
   const [activeIdentity, setActiveIdentity] = useState2(availableIdentities[0]);
   const onValueChange = useCallback4((nextHex) => setActiveIdentity(availableIdentities.find((identity) => identity.identityKey.toHex() === nextHex) || activeIdentity), [
     availableIdentities
   ]);
-  return /* @__PURE__ */ React17.createElement(ViewState, _extends14({}, viewStateProps), /* @__PURE__ */ React17.createElement(ViewStateHeading, null, t("identity selector title")), /* @__PURE__ */ React17.createElement(RadioGroup.Root, {
+  return /* @__PURE__ */ React21.createElement(ViewState, _extends17({}, viewStateProps), /* @__PURE__ */ React21.createElement(ViewStateHeading, null, t("identity selector title")), /* @__PURE__ */ React21.createElement(RadioGroup.Root, {
     disabled,
     value: activeIdentity == null ? void 0 : activeIdentity.identityKey.toHex(),
     onValueChange,
     className: "overflow-y-auto grow shrink min-bs-10 pli-1 -mli-1",
     "aria-label": t("identity radio group title"),
     "data-autofocus": "identity selector"
-  }, availableIdentities.map(({ displayName, identityKey }) => {
-    var _a;
+  }, availableIdentities.map(({ profile, identityKey }) => {
+    var _a, _b;
     const hex = identityKey.toHex();
     const inputId = `identitySelector__item--${hex}`;
     const labelId = `identitySelector__itemLabel--${hex}`;
-    return /* @__PURE__ */ React17.createElement("label", {
+    return /* @__PURE__ */ React21.createElement("label", {
       htmlFor: inputId,
       key: hex,
       className: "flex items-center mbe-2 gap-2 cursor-pointer"
-    }, /* @__PURE__ */ React17.createElement(RadioGroup.Item, {
+    }, /* @__PURE__ */ React21.createElement(RadioGroup.Item, {
       id: inputId,
       "aria-labelledby": labelId,
       value: hex,
-      className: mx10("peer relative w-4 h-4 rounded-full", "border border-transparent text-white", "radix-state-checked:bg-primary-600", "radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900", themeVariantFocus("os"))
-    }, /* @__PURE__ */ React17.createElement(RadioGroup.Indicator, {
+      className: mx16("peer relative w-4 h-4 rounded-full", "border border-transparent text-white", "radix-state-checked:bg-primary-600", "radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900", themeVariantFocus("os")),
+      "data-testid": "identity-selector-item"
+    }, /* @__PURE__ */ React21.createElement(RadioGroup.Indicator, {
       className: "absolute inset-0 flex items-center justify-center leading-0"
-    }, /* @__PURE__ */ React17.createElement("div", {
+    }, /* @__PURE__ */ React21.createElement("div", {
       className: "w-1.5 h-1.5 rounded-full bg-white"
-    }))), /* @__PURE__ */ React17.createElement(Avatar6, {
+    }))), /* @__PURE__ */ React21.createElement(Avatar7, {
       fallbackValue: hex,
       labelId,
       variant: "circle"
-    }), /* @__PURE__ */ React17.createElement("span", {
+    }), /* @__PURE__ */ React21.createElement("span", {
       id: labelId,
-      className: mx10(!displayName && "font-mono")
-    }, (_a = displayName != null ? displayName : identityKey.truncate()) != null ? _a : ""));
-  })), /* @__PURE__ */ React17.createElement(Button6, {
+      className: mx16(!(profile == null ? void 0 : profile.displayName) && "font-mono")
+    }, (_b = (_a = profile == null ? void 0 : profile.displayName) != null ? _a : identityKey.truncate()) != null ? _b : ""));
+  })), /* @__PURE__ */ React21.createElement(Button7, {
     disabled,
-    compact: true,
     onClick: () => dispatch({
       type: "add identity"
     }),
-    className: "flex items-center gap-2 pli-2"
-  }, /* @__PURE__ */ React17.createElement("span", null, t("add identity label")), /* @__PURE__ */ React17.createElement(UserPlus, {
+    className: "flex items-center gap-2 pli-2",
+    "data-testid": "add-identity"
+  }, /* @__PURE__ */ React21.createElement("span", null, t("add identity label")), /* @__PURE__ */ React21.createElement(UserPlus2, {
     weight: "bold",
-    className: getSize7(3.5)
-  })), /* @__PURE__ */ React17.createElement(Button6, {
+    className: getSize8(3.5)
+  })), /* @__PURE__ */ React21.createElement(Button7, {
     disabled: disabled || !activeIdentity,
     className: "flex items-center gap-2 pli-2",
     onClick: () => dispatch({
       type: "select identity",
       identity: activeIdentity
-    })
-  }, /* @__PURE__ */ React17.createElement(CaretLeft3, {
+    }),
+    "data-testid": "select-identity"
+  }, /* @__PURE__ */ React21.createElement(CaretLeft3, {
     weight: "bold",
-    className: mx10(getSize7(4), "invisible")
-  }), /* @__PURE__ */ React17.createElement("span", {
+    className: mx16(getSize8(4), "invisible")
+  }), /* @__PURE__ */ React21.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React17.createElement(CaretRight3, {
+  }, t("continue label")), /* @__PURE__ */ React21.createElement(CaretRight3, {
     weight: "bold",
-    className: getSize7(4)
+    className: getSize8(4)
   })));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityInput.tsx
 import { CaretLeft as CaretLeft4, CaretRight as CaretRight4 } from "phosphor-react";
-import React18, { useState as useState3 } from "react";
-import { useClient as useClient3 } from "@dxos/react-client";
-import { Button as Button7, getSize as getSize8, Input, mx as mx11, useTranslation as useTranslation10 } from "@dxos/react-components";
-function _extends15() {
-  _extends15 = Object.assign || function(target) {
+import React22, { useState as useState3 } from "react";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { Button as Button8, getSize as getSize9, Input, mx as mx17, useTranslation as useTranslation12 } from "@dxos/react-components";
+function _extends18() {
+  _extends18 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1058,18 +1307,18 @@ function _extends15() {
     }
     return target;
   };
-  return _extends15.apply(this, arguments);
+  return _extends18.apply(this, arguments);
 }
 var IdentityInput = ({ method, ...viewStateProps }) => {
   const disabled = !viewStateProps.active;
   const { dispatch } = viewStateProps;
-  const { t } = useTranslation10("os");
+  const { t } = useTranslation12("os");
   const [inputValue, setInputValue] = useState3("");
-  const client = useClient3();
+  const client = useClient4();
   const [validationMessage, setValidationMessage] = useState3("");
   const isRecover = method === "recover identity";
   const handleNext = () => {
-    void client.halo.createProfile({
+    void client.halo.createIdentity({
       [isRecover ? "seedphrase" : "displayName"]: inputValue
     }).then((identity) => {
       dispatch({
@@ -1080,9 +1329,9 @@ var IdentityInput = ({ method, ...viewStateProps }) => {
       setValidationMessage(t(isRecover ? "failed to recover identity message" : "failed to create identity message"));
     });
   };
-  return /* @__PURE__ */ React18.createElement(ViewState, _extends15({}, viewStateProps), /* @__PURE__ */ React18.createElement(Input, _extends15({
+  return /* @__PURE__ */ React22.createElement(ViewState, _extends18({}, viewStateProps), /* @__PURE__ */ React22.createElement(Input, _extends18({
     disabled,
-    label: /* @__PURE__ */ React18.createElement(ViewStateHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React22.createElement(ViewStateHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
     onChange: ({ target: { value } }) => setInputValue(value),
     slots: {
       root: {
@@ -1096,42 +1345,46 @@ var IdentityInput = ({ method, ...viewStateProps }) => {
   }, validationMessage.length && {
     validationValence: "error",
     validationMessage
-  })), /* @__PURE__ */ React18.createElement("div", {
+  }, {
+    "data-testid": "identity-input"
+  })), /* @__PURE__ */ React22.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React18.createElement("div", {
+  }), /* @__PURE__ */ React22.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React18.createElement(Button7, {
+  }, /* @__PURE__ */ React22.createElement(Button8, {
     disabled,
     className: "grow flex items-center gap-2 pli-2 order-2",
-    onClick: handleNext
-  }, /* @__PURE__ */ React18.createElement(CaretLeft4, {
+    onClick: handleNext,
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-continue`
+  }, /* @__PURE__ */ React22.createElement(CaretLeft4, {
     weight: "bold",
-    className: mx11(getSize8(2), "invisible")
-  }), /* @__PURE__ */ React18.createElement("span", {
+    className: mx17(getSize9(2), "invisible")
+  }), /* @__PURE__ */ React22.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React18.createElement(CaretRight4, {
+  }, t("continue label")), /* @__PURE__ */ React22.createElement(CaretRight4, {
     weight: "bold",
-    className: getSize8(4)
-  })), /* @__PURE__ */ React18.createElement(Button7, {
+    className: getSize9(4)
+  })), /* @__PURE__ */ React22.createElement(Button8, {
     disabled,
     onClick: () => dispatch({
       type: "add identity"
     }),
-    className: "flex items-center gap-2 pis-2 pie-4"
-  }, /* @__PURE__ */ React18.createElement(CaretLeft4, {
+    className: "flex items-center gap-2 pis-2 pie-4",
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
+  }, /* @__PURE__ */ React22.createElement(CaretLeft4, {
     weight: "bold",
-    className: getSize8(4)
-  }), /* @__PURE__ */ React18.createElement("span", null, t("back label")))));
+    className: getSize9(4)
+  }), /* @__PURE__ */ React22.createElement("span", null, t("back label")))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationAccepted.tsx
-import { CaretLeft as CaretLeft5, Check } from "phosphor-react";
-import React19, { cloneElement as cloneElement2 } from "react";
+import { CaretLeft as CaretLeft5, Check as Check2 } from "phosphor-react";
+import React23, { cloneElement as cloneElement4 } from "react";
 import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client";
-import { Button as Button8, getSize as getSize9, mx as mx12, useTranslation as useTranslation11 } from "@dxos/react-components";
-function _extends16() {
-  _extends16 = Object.assign || function(target) {
+import { Button as Button9, getSize as getSize10, mx as mx18, useTranslation as useTranslation13 } from "@dxos/react-components";
+function _extends19() {
+  _extends19 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1142,50 +1395,51 @@ function _extends16() {
     }
     return target;
   };
-  return _extends16.apply(this, arguments);
+  return _extends19.apply(this, arguments);
 }
 var PureInvitationAcceptedContent = ({ onDone, result, invitationType, doneActionParent, active }) => {
   const disabled = !active;
-  const { t } = useTranslation11("os");
-  const doneButton = /* @__PURE__ */ React19.createElement(Button8, _extends16({}, onDone && {
+  const { t } = useTranslation13("os");
+  const doneButton = /* @__PURE__ */ React23.createElement(Button9, _extends19({}, onDone && {
     onClick: () => onDone(result)
   }, {
     disabled,
     className: "grow flex items-center gap-2 pli-2",
-    "data-autofocus": `${invitationType} invitation acceptor; invitation accepted`
-  }), /* @__PURE__ */ React19.createElement(CaretLeft5, {
+    "data-autofocus": `${invitationType} invitation acceptor; invitation accepted`,
+    "data-testid": `${invitationType}-invitation-accepted-done`
+  }), /* @__PURE__ */ React23.createElement(CaretLeft5, {
     weight: "bold",
-    className: mx12(getSize9(2), "invisible")
-  }), /* @__PURE__ */ React19.createElement("span", {
+    className: mx18(getSize10(2), "invisible")
+  }), /* @__PURE__ */ React23.createElement("span", {
     className: "grow"
-  }, t("done label")), /* @__PURE__ */ React19.createElement(Check, {
+  }, t("done label")), /* @__PURE__ */ React23.createElement(Check2, {
     weight: "bold",
-    className: getSize9(4)
+    className: getSize10(4)
   }));
-  return doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneButton) : doneButton;
+  return doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, doneButton) : doneButton;
 };
 var InvitationAcceptedContent = (props) => {
   const { result } = useInvitationStatus3(props.activeInvitation);
-  return /* @__PURE__ */ React19.createElement(PureInvitationAcceptedContent, _extends16({}, props, {
+  return /* @__PURE__ */ React23.createElement(PureInvitationAcceptedContent, _extends19({}, props, {
     result
   }));
 };
 var InvitationAccepted = (props) => {
   const { invitationType: _invitationType, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
   const { activeInvitation } = viewStateProps;
-  return /* @__PURE__ */ React19.createElement(ViewState, _extends16({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React19.createElement(PureInvitationAcceptedContent, _extends16({}, props, {
+  return /* @__PURE__ */ React23.createElement(ViewState, _extends19({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React23.createElement(PureInvitationAcceptedContent, _extends19({}, props, {
     result: null
-  })) : /* @__PURE__ */ React19.createElement(InvitationAcceptedContent, _extends16({}, props)));
+  })) : /* @__PURE__ */ React23.createElement(InvitationAcceptedContent, _extends19({}, props)));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationInput.tsx
 import { CaretLeft as CaretLeft6, CaretRight as CaretRight5 } from "phosphor-react";
-import React20, { useState as useState4 } from "react";
+import React24, { useState as useState4 } from "react";
 import { InvitationEncoder } from "@dxos/client";
-import { useClient as useClient4 } from "@dxos/react-client";
-import { Button as Button9, getSize as getSize10, Input as Input2, mx as mx13, useTranslation as useTranslation12 } from "@dxos/react-components";
-function _extends17() {
-  _extends17 = Object.assign || function(target) {
+import { useClient as useClient5 } from "@dxos/react-client";
+import { Button as Button10, getSize as getSize11, Input as Input2, mx as mx19, useTranslation as useTranslation14 } from "@dxos/react-components";
+function _extends20() {
+  _extends20 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1196,22 +1450,22 @@ function _extends17() {
     }
     return target;
   };
-  return _extends17.apply(this, arguments);
+  return _extends20.apply(this, arguments);
 }
 var InvitationInput = ({ invitationType, ...viewStateProps }) => {
-  const client = useClient4();
+  const client = useClient5();
   const disabled = !viewStateProps.active;
   const { dispatch } = viewStateProps;
-  const { t } = useTranslation12("os");
+  const { t } = useTranslation14("os");
   const [inputValue, setInputValue] = useState4("");
   const handleNext = () => dispatch({
     type: "connecting invitation",
     from: invitationType,
     invitation: client[invitationType === "halo" ? "halo" : "echo"].acceptInvitation(InvitationEncoder.decode(inputValue))
   });
-  return /* @__PURE__ */ React20.createElement(ViewState, _extends17({}, viewStateProps), /* @__PURE__ */ React20.createElement(Input2, {
+  return /* @__PURE__ */ React24.createElement(ViewState, _extends20({}, viewStateProps), /* @__PURE__ */ React24.createElement(Input2, {
     disabled,
-    label: /* @__PURE__ */ React20.createElement(ViewStateHeading, null, t("invitation input label")),
+    label: /* @__PURE__ */ React24.createElement(ViewStateHeading, null, t("invitation input label")),
     onChange: ({ target: { value } }) => setInputValue(value),
     slots: {
       root: {
@@ -1224,44 +1478,47 @@ var InvitationInput = ({ invitationType, ...viewStateProps }) => {
         "data-autofocus": `${invitationType} invitation acceptor; invitation input`,
         onKeyUp: ({ key }) => key === "Enter" && handleNext()
       }
-    }
-  }), /* @__PURE__ */ React20.createElement("div", {
+    },
+    "data-testid": "invitation-input"
+  }), /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React20.createElement("div", {
+  }), /* @__PURE__ */ React24.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React20.createElement(Button9, {
+  }, /* @__PURE__ */ React24.createElement(Button10, {
     disabled,
     className: "grow flex items-center gap-2 pli-2 order-2",
-    onClick: handleNext
-  }, /* @__PURE__ */ React20.createElement(CaretLeft6, {
+    onClick: handleNext,
+    "data-testid": `${invitationType}-invitation-input-continue`
+  }, /* @__PURE__ */ React24.createElement(CaretLeft6, {
     weight: "bold",
-    className: mx13(getSize10(2), "invisible")
-  }), /* @__PURE__ */ React20.createElement("span", {
+    className: mx19(getSize11(2), "invisible")
+  }), /* @__PURE__ */ React24.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React20.createElement(CaretRight5, {
+  }, t("continue label")), /* @__PURE__ */ React24.createElement(CaretRight5, {
     weight: "bold",
-    className: getSize10(4)
-  })), /* @__PURE__ */ React20.createElement(Button9, {
+    className: getSize11(4)
+  })), /* @__PURE__ */ React24.createElement(Button10, {
     disabled,
     onClick: () => dispatch({
       type: "add identity"
     }),
-    className: "flex items-center gap-2 pis-2 pie-4"
-  }, /* @__PURE__ */ React20.createElement(CaretLeft6, {
+    className: "flex items-center gap-2 pis-2 pie-4",
+    "data-testid": `${invitationType}-invitation-input-back`
+  }, /* @__PURE__ */ React24.createElement(CaretLeft6, {
     weight: "bold",
-    className: getSize10(4)
-  }), /* @__PURE__ */ React20.createElement("span", null, t("back label")))));
+    className: getSize11(4)
+  }), /* @__PURE__ */ React24.createElement("span", null, t("back label")))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationRescuer.tsx
 import { ArrowsClockwise, CaretLeft as CaretLeft7, CaretRight as CaretRight6 } from "phosphor-react";
-import React21 from "react";
+import React25 from "react";
 import { Invitation as Invitation5 } from "@dxos/client";
 import { useInvitationStatus as useInvitationStatus4 } from "@dxos/react-client";
-import { Button as Button10, getSize as getSize11, mx as mx14, useTranslation as useTranslation13 } from "@dxos/react-components";
-function _extends18() {
-  _extends18 = Object.assign || function(target) {
+import { Button as Button11, getSize as getSize12, mx as mx20, useTranslation as useTranslation15 } from "@dxos/react-components";
+function _extends21() {
+  _extends21 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1272,78 +1529,82 @@ function _extends18() {
     }
     return target;
   };
-  return _extends18.apply(this, arguments);
+  return _extends21.apply(this, arguments);
 }
 var InvitationActions = ({ activeInvitation, disabled, dispatch, invitationType }) => {
   const { status, cancel } = useInvitationStatus4(activeInvitation);
-  const { t } = useTranslation13("os");
+  const { t } = useTranslation15("os");
   switch (status) {
     case Invitation5.State.CONNECTING:
-      return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", {
+      return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("div", {
         role: "none",
         className: "grow"
-      }), /* @__PURE__ */ React21.createElement("div", {
+      }), /* @__PURE__ */ React25.createElement("div", {
         className: "flex gap-2"
-      }, /* @__PURE__ */ React21.createElement(Button10, {
+      }, /* @__PURE__ */ React25.createElement(Button11, {
         disabled: true,
-        className: "grow flex items-center gap-2 pli-2 order-2"
-      }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+        className: "grow flex items-center gap-2 pli-2 order-2",
+        "data-testid": "next"
+      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
         weight: "bold",
-        className: mx14(getSize11(2), "invisible")
-      }), /* @__PURE__ */ React21.createElement("span", {
+        className: mx20(getSize12(2), "invisible")
+      }), /* @__PURE__ */ React25.createElement("span", {
         className: "grow"
-      }, t("next label")), /* @__PURE__ */ React21.createElement(CaretRight6, {
+      }, t("next label")), /* @__PURE__ */ React25.createElement(CaretRight6, {
         weight: "bold",
-        className: getSize11(4)
-      })), /* @__PURE__ */ React21.createElement(Button10, {
+        className: getSize12(4)
+      })), /* @__PURE__ */ React25.createElement(Button11, {
         disabled,
         className: "flex items-center gap-2 pis-2 pie-4",
         onClick: cancel,
-        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`
-      }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`,
+        "data-testid": "invitation-rescuer-cancel"
+      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
         weight: "bold",
-        className: getSize11(4)
-      }), /* @__PURE__ */ React21.createElement("span", null, t("cancel label")))));
+        className: getSize12(4)
+      }), /* @__PURE__ */ React25.createElement("span", null, t("cancel label")))));
     case Invitation5.State.TIMEOUT:
     case Invitation5.State.CANCELLED:
     case Invitation5.State.ERROR:
     default:
-      return /* @__PURE__ */ React21.createElement(Button10, {
+      return /* @__PURE__ */ React25.createElement(Button11, {
         disabled,
         className: "grow flex items-center gap-2 pli-2",
         onClick: () => dispatch({
           type: "reset invitation",
           from: invitationType
         }),
-        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`
-      }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`,
+        "data-testid": "invitation-rescuer-reset"
+      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
         weight: "bold",
-        className: mx14(getSize11(5), "invisible")
-      }), /* @__PURE__ */ React21.createElement("span", {
+        className: mx20(getSize12(5), "invisible")
+      }), /* @__PURE__ */ React25.createElement("span", {
         className: "grow"
-      }, t("reset label")), /* @__PURE__ */ React21.createElement(ArrowsClockwise, {
+      }, t("reset label")), /* @__PURE__ */ React25.createElement(ArrowsClockwise, {
         weight: "bold",
-        className: getSize11(5)
+        className: getSize12(5)
       }));
   }
 };
 var InvitationRescuer = ({ invitationType, ...viewStateProps }) => {
   const disabled = !viewStateProps.active;
   const { dispatch, activeInvitation } = viewStateProps;
-  const { t } = useTranslation13("os");
-  return /* @__PURE__ */ React21.createElement(ViewState, _extends18({}, viewStateProps), activeInvitation === true || !activeInvitation ? /* @__PURE__ */ React21.createElement(Button10, {
+  const { t } = useTranslation15("os");
+  return /* @__PURE__ */ React25.createElement(ViewState, _extends21({}, viewStateProps), activeInvitation === true || !activeInvitation ? /* @__PURE__ */ React25.createElement(Button11, {
     disabled,
     className: "grow flex items-center gap-2 pli-2",
-    "data-autofocus": "space invitation acceptor; invitation rescuer"
-  }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+    "data-autofocus": "space invitation acceptor; invitation rescuer",
+    "data-testid": "invitation-rescuer-connect"
+  }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
     weight: "bold",
-    className: mx14(getSize11(5), "invisible")
-  }), /* @__PURE__ */ React21.createElement("span", {
+    className: mx20(getSize12(5), "invisible")
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow"
-  }, t("connect label")), /* @__PURE__ */ React21.createElement(ArrowsClockwise, {
+  }, t("connect label")), /* @__PURE__ */ React25.createElement(ArrowsClockwise, {
     weight: "bold",
-    className: getSize11(5)
-  })) : /* @__PURE__ */ React21.createElement(InvitationActions, _extends18({}, {
+    className: getSize12(5)
+  })) : /* @__PURE__ */ React25.createElement(InvitationActions, _extends21({}, {
     activeInvitation,
     disabled,
     dispatch,
@@ -1353,11 +1614,11 @@ var InvitationRescuer = ({ invitationType, ...viewStateProps }) => {
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx
 import { CaretLeft as CaretLeft8, CaretRight as CaretRight7 } from "phosphor-react";
-import React22, { useCallback as useCallback5, useState as useState5 } from "react";
+import React26, { useCallback as useCallback5, useState as useState5 } from "react";
 import { useInvitationStatus as useInvitationStatus5 } from "@dxos/react-client";
-import { Button as Button11, getSize as getSize12, Input as Input3, mx as mx15, useTranslation as useTranslation14 } from "@dxos/react-components";
-function _extends19() {
-  _extends19 = Object.assign || function(target) {
+import { Button as Button12, getSize as getSize13, Input as Input3, mx as mx21, useTranslation as useTranslation16 } from "@dxos/react-components";
+function _extends22() {
+  _extends22 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1368,13 +1629,13 @@ function _extends19() {
     }
     return target;
   };
-  return _extends19.apply(this, arguments);
+  return _extends22.apply(this, arguments);
 }
 var pinLength = 6;
 var PureInvitationAuthenticatorContent = ({ disabled, failed, dispatch, invitationType, onChange, onAuthenticate }) => {
-  const { t } = useTranslation14("os");
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Input3, _extends19({
-    label: t("pin input label"),
+  const { t } = useTranslation16("os");
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Input3, _extends22({
+    label: t("auth code input label"),
     size: "pin",
     length: pinLength,
     onChange,
@@ -1399,35 +1660,39 @@ var PureInvitationAuthenticatorContent = ({ disabled, failed, dispatch, invitati
   }, failed && {
     validationValence: "error",
     validationMessage: t("failed to authenticate message")
-  })), /* @__PURE__ */ React22.createElement("div", {
+  }, {
+    "data-testid": "auth-code-input"
+  })), /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React22.createElement("div", {
+  }), /* @__PURE__ */ React26.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React22.createElement(Button11, {
+  }, /* @__PURE__ */ React26.createElement(Button12, {
     disabled,
     className: "grow flex items-center gap-2 pli-2 order-2",
     onClick: onAuthenticate,
-    "data-autofocus-pinlength": invitationType
-  }, /* @__PURE__ */ React22.createElement(CaretLeft8, {
+    "data-autofocus-pinlength": invitationType,
+    "data-testid": `${invitationType}-invitation-authenticator-next`
+  }, /* @__PURE__ */ React26.createElement(CaretLeft8, {
     weight: "bold",
-    className: mx15(getSize12(2), "invisible")
-  }), /* @__PURE__ */ React22.createElement("span", {
+    className: mx21(getSize13(2), "invisible")
+  }), /* @__PURE__ */ React26.createElement("span", {
     className: "grow"
-  }, t("next label")), /* @__PURE__ */ React22.createElement(CaretRight7, {
+  }, t("next label")), /* @__PURE__ */ React26.createElement(CaretRight7, {
     weight: "bold",
-    className: getSize12(4)
-  })), /* @__PURE__ */ React22.createElement(Button11, {
+    className: getSize13(4)
+  })), /* @__PURE__ */ React26.createElement(Button12, {
     disabled,
     className: "flex items-center gap-2 pis-2 pie-4",
     onClick: () => dispatch({
       type: "cancel invitation",
       from: invitationType
-    })
-  }, /* @__PURE__ */ React22.createElement(CaretLeft8, {
+    }),
+    "data-testid": `${invitationType}-invitation-authenticator-cancel`
+  }, /* @__PURE__ */ React26.createElement(CaretLeft8, {
     weight: "bold",
-    className: getSize12(4)
-  }), /* @__PURE__ */ React22.createElement("span", null, t("cancel label")))));
+    className: getSize13(4)
+  }), /* @__PURE__ */ React26.createElement("span", null, t("cancel label")))));
 };
 var InvitationAuthenticatorContent = ({ disabled, invitation, dispatch, invitationType, failed }) => {
   const [pinValue, setPinValue] = useState5("");
@@ -1454,7 +1719,7 @@ var InvitationAuthenticatorContent = ({ disabled, invitation, dispatch, invitati
     authenticate,
     pinValue
   ]);
-  return /* @__PURE__ */ React22.createElement(PureInvitationAuthenticatorContent, _extends19({}, {
+  return /* @__PURE__ */ React26.createElement(PureInvitationAuthenticatorContent, _extends22({}, {
     disabled,
     failed,
     dispatch,
@@ -1466,7 +1731,7 @@ var InvitationAuthenticatorContent = ({ disabled, invitation, dispatch, invitati
 var InvitationAuthenticator = ({ invitationType, failed, ...viewStateProps }) => {
   const disabled = !viewStateProps.active;
   const { activeInvitation, dispatch } = viewStateProps;
-  return /* @__PURE__ */ React22.createElement(ViewState, _extends19({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React22.createElement(PureInvitationAuthenticatorContent, _extends19({}, {
+  return /* @__PURE__ */ React26.createElement(ViewState, _extends22({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React26.createElement(PureInvitationAuthenticatorContent, _extends22({}, {
     disabled,
     failed,
     dispatch,
@@ -1475,7 +1740,7 @@ var InvitationAuthenticator = ({ invitationType, failed, ...viewStateProps }) =>
     },
     onAuthenticate: () => {
     }
-  })) : /* @__PURE__ */ React22.createElement(InvitationAuthenticatorContent, _extends19({}, {
+  })) : /* @__PURE__ */ React26.createElement(InvitationAuthenticatorContent, _extends22({}, {
     disabled,
     failed,
     invitation: activeInvitation,
@@ -1485,8 +1750,8 @@ var InvitationAuthenticator = ({ invitationType, failed, ...viewStateProps }) =>
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
-function _extends20() {
-  _extends20 = Object.assign || function(target) {
+function _extends23() {
+  _extends23 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1497,13 +1762,14 @@ function _extends20() {
     }
     return target;
   };
-  return _extends20.apply(this, arguments);
+  return _extends23.apply(this, arguments);
 }
-var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParent, onExit, doneActionParent, onDone }) => {
-  const client = useClient5();
-  const internalTitleId = useId3("joinPanel__title");
+var JoinPanel = ({ mode, initialInvitationCode, titleId: propsTitleId, exitActionParent, onExit, doneActionParent, onDone, preventExit }) => {
+  const client = useClient6();
+  const internalTitleId = useId4("joinPanel__title");
   const titleId = propsTitleId != null ? propsTitleId : internalTitleId;
-  const identity = useIdentity();
+  const identity = useIdentity2();
+  const [prevIdentity, setPrevIdentity] = useState6(identity);
   const availableIdentities = identity ? [
     identity
   ] : [];
@@ -1524,7 +1790,7 @@ var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParen
         if (action.method === "accept device invitation") {
           nextState.activeView = "halo invitation acceptor";
           if (state.unredeemedHaloInvitationCode) {
-            nextState.haloInvitation = client.echo.acceptInvitation(InvitationEncoder2.decode(state.unredeemedHaloInvitationCode));
+            nextState.haloInvitation = client.halo.acceptInvitation(InvitationEncoder2.decode(state.unredeemedHaloInvitationCode));
             nextState.unredeemedHaloInvitationCode = void 0;
             nextState.haloViewState = "invitation authenticator";
           } else {
@@ -1588,20 +1854,21 @@ var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParen
         nextState[action.from === "halo" ? "haloViewState" : "spaceViewState"] = "invitation input";
         break;
     }
-    log.debug("[join panel reducer]", {
+    log("[join panel reducer]", {
       action,
       nextState
     }, {
       file: "JoinPanel.tsx",
-      line: 123,
+      line: 125,
       scope: void 0,
       callSite: (f, a) => f(...a)
     });
     return nextState;
   };
-  const [joinState, dispatch] = useReducer(reducer, {
-    unredeemedHaloInvitationCode: void 0,
-    unredeemedSpaceInvitationCode: initialInvitationCode,
+  const unredeemedHaloInvitationCode = mode === "halo-only" ? initialInvitationCode : void 0;
+  const [joinState, dispatch] = useReducer2(reducer, {
+    unredeemedHaloInvitationCode,
+    unredeemedSpaceInvitationCode: mode === "halo-only" ? void 0 : initialInvitationCode,
     spaceInvitation: void 0,
     haloInvitation: void 0,
     activeView: availableIdentities.length > 0 ? "identity selector" : "addition method selector",
@@ -1610,13 +1877,30 @@ var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParen
     spaceViewState: "invitation input",
     haloViewState: "invitation input"
   });
+  if (identity !== prevIdentity) {
+    setPrevIdentity(identity);
+    identity && !prevIdentity && dispatch({
+      type: "added identity",
+      identity
+    });
+  }
+  useEffect(() => {
+    if (unredeemedHaloInvitationCode) {
+      dispatch({
+        type: "select addition method",
+        method: "accept device invitation"
+      });
+    }
+  }, [
+    unredeemedHaloInvitationCode
+  ]);
   useEffect(() => {
     const attrValue = joinState.activeView === "identity input" ? `${joinState.activeView}; ${joinState.additionMethod}` : joinState.activeView === "space invitation acceptor" ? `${joinState.activeView}; ${joinState.spaceViewState}` : joinState.activeView === "halo invitation acceptor" ? `${joinState.activeView}; ${joinState.haloViewState}` : joinState.activeView;
-    log.debug("[autofocus value]", {
+    log("[autofocus value]", {
       attrValue
     }, {
       file: "JoinPanel.tsx",
-      line: 149,
+      line: 163,
       scope: void 0,
       callSite: (f, a) => f(...a)
     });
@@ -1691,45 +1975,49 @@ var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParen
   }, [
     joinState.haloInvitation
   ]);
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(JoinHeading, _extends20({}, {
+  return /* @__PURE__ */ React27.createElement(DensityProvider3, {
+    density: "fine"
+  }, /* @__PURE__ */ React27.createElement(JoinHeading, _extends23({}, {
+    mode,
     titleId,
     invitation: joinState.spaceInvitation,
     onExit,
-    exitActionParent
-  })), /* @__PURE__ */ React23.createElement("div", {
+    exitActionParent,
+    preventExit
+  })), /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: "is-full overflow-hidden"
-  }, /* @__PURE__ */ React23.createElement("div", {
+  }, /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: "flex is-[1300%]",
     "aria-live": "polite"
-  }, /* @__PURE__ */ React23.createElement(IdentitySelector, _extends20({}, {
+  }, /* @__PURE__ */ React27.createElement(IdentitySelector, _extends23({}, {
     dispatch,
     availableIdentities,
     active: joinState.activeView === "identity selector"
-  })), /* @__PURE__ */ React23.createElement(AdditionMethodSelector, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(AdditionMethodSelector, _extends23({}, {
     dispatch,
     availableIdentities,
     active: joinState.activeView === "addition method selector"
-  })), /* @__PURE__ */ React23.createElement(IdentityInput, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(IdentityInput, _extends23({}, {
     dispatch,
     active: joinState.activeView === "identity input" && joinState.additionMethod === "create identity",
     method: "create identity"
-  })), /* @__PURE__ */ React23.createElement(IdentityInput, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(IdentityInput, _extends23({}, {
     dispatch,
     active: joinState.activeView === "identity input" && joinState.additionMethod === "recover identity",
     method: "recover identity"
-  })), /* @__PURE__ */ React23.createElement(InvitationInput, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(InvitationInput, _extends23({}, {
     dispatch,
     activeInvitation: joinState.haloInvitation || true,
     active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation input",
     invitationType: "halo"
-  })), /* @__PURE__ */ React23.createElement(InvitationRescuer, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(InvitationRescuer, _extends23({}, {
     dispatch,
     activeInvitation: joinState.haloInvitation || true,
     active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation rescuer",
     invitationType: "halo"
-  })), /* @__PURE__ */ React23.createElement(InvitationAuthenticator, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(InvitationAuthenticator, _extends23({}, {
     dispatch,
     activeInvitation: joinState.haloInvitation || true,
     active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation authenticator",
@@ -1737,28 +2025,33 @@ var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParen
     ...joinState.spaceInvitationAnnotation === "authentication failed" && {
       failed: true
     }
-  })), /* @__PURE__ */ React23.createElement(InvitationAccepted, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(InvitationAccepted, _extends23({}, {
     dispatch,
     activeInvitation: joinState.haloInvitation || true,
     active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation accepted",
-    invitationType: "halo"
-  })), /* @__PURE__ */ React23.createElement(IdentityAdded, _extends20({}, {
+    invitationType: "halo",
+    doneActionParent,
+    onDone
+  })), /* @__PURE__ */ React27.createElement(IdentityAdded, _extends23({}, {
+    mode,
     dispatch,
     addedIdentity: joinState.selectedIdentity,
-    active: joinState.activeView === "identity added"
-  })), /* @__PURE__ */ React23.createElement(InvitationInput, _extends20({}, {
+    active: joinState.activeView === "identity added",
+    doneActionParent,
+    onDone
+  })), /* @__PURE__ */ React27.createElement(InvitationInput, _extends23({}, {
     dispatch,
     activeInvitation: joinState.spaceInvitation || true,
     selectedIdentity: joinState.selectedIdentity,
     active: joinState.activeView === "space invitation acceptor" && joinState.spaceViewState === "invitation input",
     invitationType: "space"
-  })), /* @__PURE__ */ React23.createElement(InvitationRescuer, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(InvitationRescuer, _extends23({}, {
     dispatch,
     activeInvitation: joinState.spaceInvitation || true,
     selectedIdentity: joinState.selectedIdentity,
     active: joinState.activeView === "space invitation acceptor" && joinState.spaceViewState === "invitation rescuer",
     invitationType: "space"
-  })), /* @__PURE__ */ React23.createElement(InvitationAuthenticator, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(InvitationAuthenticator, _extends23({}, {
     dispatch,
     activeInvitation: joinState.spaceInvitation || true,
     selectedIdentity: joinState.selectedIdentity,
@@ -1767,7 +2060,7 @@ var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParen
     ...joinState.spaceInvitationAnnotation === "authentication failed" && {
       failed: true
     }
-  })), /* @__PURE__ */ React23.createElement(InvitationAccepted, _extends20({}, {
+  })), /* @__PURE__ */ React27.createElement(InvitationAccepted, _extends23({}, {
     dispatch,
     activeInvitation: joinState.spaceInvitation || true,
     selectedIdentity: joinState.selectedIdentity,
@@ -1778,9 +2071,81 @@ var JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParen
   })))));
 };
 
+// packages/apps/patterns/react-ui/src/panels/SpacePanel/SpacePanel.tsx
+import { UserPlus as UserPlus3 } from "phosphor-react";
+import React28, { useReducer as useReducer3 } from "react";
+import { useSpaceInvitations as useSpaceInvitations2 } from "@dxos/react-client";
+import { Button as Button13, DensityProvider as DensityProvider4, getSize as getSize14, mx as mx22, useTranslation as useTranslation17 } from "@dxos/react-components";
+function _extends24() {
+  _extends24 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends24.apply(this, arguments);
+}
+var CurrentSpaceView = ({ space, createInvitationUrl, titleId }) => {
+  const { t } = useTranslation17("os");
+  const invitations = useSpaceInvitations2(space == null ? void 0 : space.key);
+  const name = space == null ? void 0 : space.properties.name;
+  if (!space) {
+    return null;
+  }
+  return /* @__PURE__ */ React28.createElement("div", {
+    role: "none",
+    className: "flex flex-col"
+  }, /* @__PURE__ */ React28.createElement("div", {
+    role: "none",
+    className: mx22(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
+  }, /* @__PURE__ */ React28.createElement("h2", {
+    id: titleId,
+    className: mx22("grow font-system-medium", !name && "font-mono")
+  }, name != null ? name : space.key.truncate())), /* @__PURE__ */ React28.createElement("div", {
+    role: "region",
+    className: mx22(defaultSurface, "rounded-be-md p-2")
+  }, /* @__PURE__ */ React28.createElement(InvitationList, {
+    invitations,
+    onClickRemove: ({ invitation }) => invitation && (space == null ? void 0 : space.removeInvitation(invitation.invitationId)),
+    createInvitationUrl
+  }), /* @__PURE__ */ React28.createElement(Button13, {
+    className: "is-full flex gap-2 mbs-2",
+    onClick: () => space == null ? void 0 : space.createInvitation(),
+    "data-testid": "create-space-invitation"
+  }, /* @__PURE__ */ React28.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React28.createElement(UserPlus3, {
+    className: getSize14(4),
+    weight: "bold"
+  })), /* @__PURE__ */ React28.createElement(PanelSeparator, null), /* @__PURE__ */ React28.createElement(SpaceMemberListContainer, {
+    spaceKey: space.key,
+    includeSelf: true
+  })));
+};
+var SpacePanel = (props) => {
+  const reducer = (state, action) => {
+    const nextState = {
+      ...state
+    };
+    switch (action.type) {
+      case null:
+    }
+    return nextState;
+  };
+  const [panelState] = useReducer3(reducer, {
+    activeView: "current space"
+  });
+  return /* @__PURE__ */ React28.createElement(DensityProvider4, {
+    density: "fine"
+  }, panelState.activeView === "current space" ? /* @__PURE__ */ React28.createElement(CurrentSpaceView, _extends24({}, props)) : null);
+};
+
 // packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
-function _extends21() {
-  _extends21 = Object.assign || function(target) {
+function _extends25() {
+  _extends25 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1791,26 +2156,26 @@ function _extends21() {
     }
     return target;
   };
-  return _extends21.apply(this, arguments);
+  return _extends25.apply(this, arguments);
 }
 var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true, onClickManageProfile, ...popoverProps }) => {
-  var _a, _b;
-  return /* @__PURE__ */ React24.createElement(PanelPopover, _extends21({}, popoverProps, {
-    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React24.createElement(Avatar7, {
+  var _a, _b, _c;
+  return /* @__PURE__ */ React29.createElement(PanelPopover, _extends25({}, popoverProps, {
+    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React29.createElement(Avatar8, {
       size: 10,
       variant: "circle",
       fallbackValue: identity.identityKey.toHex(),
-      label: (_a = identity.displayName) != null ? _a : ""
+      label: (_b = (_a = identity.profile) == null ? void 0 : _a.displayName) != null ? _b : ""
     }),
     slots: {
       ...slots,
       trigger: {
         ...slots == null ? void 0 : slots.trigger,
-        className: mx16("flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full", (_b = slots == null ? void 0 : slots.trigger) == null ? void 0 : _b.className)
+        className: mx23("flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
       }
     },
     triggerIsInToolbar
-  }), /* @__PURE__ */ React24.createElement(IdentityPanel, _extends21({}, {
+  }), /* @__PURE__ */ React29.createElement(IdentityPanel, _extends25({}, {
     identity,
     onClickManageProfile
   })));
@@ -1818,10 +2183,10 @@ var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true
 
 // packages/apps/patterns/react-ui/src/composites/JoinDialog/JoinDialog.tsx
 import { Action, Cancel } from "@radix-ui/react-alert-dialog";
-import React25 from "react";
-import { ThemeContext as ThemeContext2, useId as useId4 } from "@dxos/react-components";
-function _extends22() {
-  _extends22 = Object.assign || function(target) {
+import React30 from "react";
+import { ThemeContext as ThemeContext2, useId as useId5 } from "@dxos/react-components";
+function _extends26() {
+  _extends26 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1832,29 +2197,196 @@ function _extends22() {
     }
     return target;
   };
-  return _extends22.apply(this, arguments);
+  return _extends26.apply(this, arguments);
 }
 var JoinDialog = ({ slots, ...joinPanelProps }) => {
-  const titleId = useId4("joinDialog__title");
-  return /* @__PURE__ */ React25.createElement(PanelAlertDialog, _extends22({}, {
+  const titleId = useId5("joinDialog__title");
+  return /* @__PURE__ */ React30.createElement(PanelAlertDialog, _extends26({}, {
     slots,
     titleId
-  }), /* @__PURE__ */ React25.createElement(ThemeContext2.Provider, {
+  }), /* @__PURE__ */ React30.createElement(ThemeContext2.Provider, {
     value: {
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React25.createElement(JoinPanel, _extends22({}, {
+  }, /* @__PURE__ */ React30.createElement(JoinPanel, _extends26({}, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React25.createElement(Cancel, {
+    exitActionParent: /* @__PURE__ */ React30.createElement(Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React25.createElement(Action, {
+    doneActionParent: /* @__PURE__ */ React30.createElement(Action, {
       asChild: true
     })
   }))));
 };
 
+// packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
+import React33, { useEffect as useEffect2, useState as useState7 } from "react";
+import { ShellDisplay, ShellLayout } from "@dxos/protocols/proto/dxos/iframe";
+import { useClient as useClient7, useSpace as useSpace3, useSpaces } from "@dxos/react-client";
+
+// packages/apps/patterns/react-ui/src/composites/DevicesDialog/DevicesDialog.tsx
+import { Close } from "@radix-ui/react-dialog";
+import React31 from "react";
+import { ThemeContext as ThemeContext3, useId as useId6 } from "@dxos/react-components";
+function _extends27() {
+  _extends27 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends27.apply(this, arguments);
+}
+var DevicesDialog = ({ slots, ...devicesDialogProps }) => {
+  const titleId = useId6("spaceDialog__title");
+  return /* @__PURE__ */ React31.createElement(PanelDialog, _extends27({}, {
+    slots: {
+      ...slots,
+      root: {
+        onOpenChange: (open) => {
+          var _a;
+          return open || ((_a = devicesDialogProps.onDone) == null ? void 0 : _a.call(devicesDialogProps));
+        },
+        ...slots == null ? void 0 : slots.root
+      }
+    },
+    titleId
+  }), /* @__PURE__ */ React31.createElement(ThemeContext3.Provider, {
+    value: {
+      themeVariant: "os"
+    }
+  }, /* @__PURE__ */ React31.createElement(DevicesPanel, _extends27({}, {
+    ...devicesDialogProps,
+    titleId,
+    doneActionParent: /* @__PURE__ */ React31.createElement(Close, {
+      asChild: true
+    })
+  }))));
+};
+
+// packages/apps/patterns/react-ui/src/composites/SpaceDialog/SpaceDialog.tsx
+import { Close as Close2 } from "@radix-ui/react-dialog";
+import React32 from "react";
+import { ThemeContext as ThemeContext4, useId as useId7 } from "@dxos/react-components";
+function _extends28() {
+  _extends28 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends28.apply(this, arguments);
+}
+var SpaceDialog = ({ slots, ...spacePanelProps }) => {
+  const titleId = useId7("spaceDialog__title");
+  return /* @__PURE__ */ React32.createElement(PanelDialog, _extends28({}, {
+    slots: {
+      ...slots,
+      root: {
+        onOpenChange: (open) => {
+          var _a;
+          return open || ((_a = spacePanelProps.onDone) == null ? void 0 : _a.call(spacePanelProps));
+        },
+        ...slots == null ? void 0 : slots.root
+      }
+    },
+    titleId
+  }), /* @__PURE__ */ React32.createElement(ThemeContext4.Provider, {
+    value: {
+      themeVariant: "os"
+    }
+  }, /* @__PURE__ */ React32.createElement(SpacePanel, _extends28({}, {
+    ...spacePanelProps,
+    titleId,
+    doneActionParent: /* @__PURE__ */ React32.createElement(Close2, {
+      asChild: true
+    })
+  }))));
+};
+
+// packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
+var Shell = ({ runtime, origin }) => {
+  const [{ layout, invitationCode, spaceKey }, setLayout] = useState7({
+    layout: runtime.layout,
+    invitationCode: runtime.invitationCode,
+    spaceKey: runtime.spaceKey
+  });
+  const client = useClient7();
+  const spaces = useSpaces();
+  const space = useSpace3(spaceKey);
+  useEffect2(() => {
+    return runtime.layoutUpdate.on((request) => setLayout(request));
+  }, [
+    runtime
+  ]);
+  switch (layout) {
+    case ShellLayout.INITIALIZE_IDENTITY:
+      return /* @__PURE__ */ React33.createElement(JoinDialog, {
+        mode: "halo-only",
+        initialInvitationCode: invitationCode,
+        onDone: async () => {
+          spaces.length > 0 || await client.echo.createSpace();
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        }
+      });
+    case ShellLayout.DEVICE_INVITATIONS:
+      return /* @__PURE__ */ React33.createElement(DevicesDialog, {
+        createInvitationUrl: (invitationCode2) => `${origin}?haloInvitationCode=${invitationCode2}`,
+        onDone: async () => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        }
+      });
+    case ShellLayout.SPACE_INVITATIONS:
+      return /* @__PURE__ */ React33.createElement(SpaceDialog, {
+        space,
+        createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
+        onDone: async () => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        }
+      });
+    case ShellLayout.JOIN_SPACE:
+      return /* @__PURE__ */ React33.createElement(JoinDialog, {
+        initialInvitationCode: invitationCode,
+        onDone: async (result) => {
+          var _a;
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            spaceKey: (_a = result == null ? void 0 : result.spaceKey) != null ? _a : void 0
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        },
+        onExit: async () => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        }
+      });
+    default:
+      return null;
+  }
+};
+
 // packages/apps/patterns/react-ui/src/translations/locales/en-US.ts
 var en_US_exports = {};
 __export(en_US_exports, {
@@ -1866,7 +2398,9 @@ var os = {
   "sidebar label": "DXOS sidebar",
   "copy invitation code label": "Copy",
   "open share panel label": "Share",
-  "join space heading": "<small>Joining</small><large>{{spaceTitle}}</large>",
+  "joining heading": "<small>Joining</small><large>{{name}}</large>",
+  "join space heading": "Join a space",
+  "halo heading": "Initialize device identity",
   "exit label": "Exit",
   "identity selector title": "Join as",
   "identity radio group title": "Select an identity you\u2019ve associated with this device already",
@@ -1874,6 +2408,7 @@ var os = {
   "continue label": "Continue",
   "back label": "Back",
   "next label": "Next",
+  "close label": "Close",
   "auth choices label": "Choose an identity",
   "create identity label": "Create an identity",
   "create identity description": "Create a new identity.",
@@ -1903,8 +2438,16 @@ var os = {
   "cancel label": "Cancel",
   "done label": "Done",
   "reset label": "Start over",
-  "pin input label": "The PIN provided by the invitation sender",
-  "invitation input label": "Paste an invitation code or URL"
+  "auth code input label": "Auth code provided by the invitation sender",
+  "invitation input label": "Paste an invitation code or URL",
+  "create space invitation label": "Invite",
+  "qr label": "Scan to accept invitation",
+  "empty invitations message": "No pending invitations",
+  "show all spaces label": "All spaces",
+  "all spaces label": "All spaces",
+  "create space label": "Create a new space",
+  "join space label": "Join a space",
+  "show current space label": "Current space"
 };
 
 // packages/apps/patterns/react-ui/src/translations/index.ts
@@ -1912,6 +2455,8 @@ var osTranslations = {
   "en-US": en_US_exports
 };
 export {
+  DeviceList,
+  DevicesPanel,
   IdentityListItem,
   IdentityPanel,
   IdentityPopover,
@@ -1922,12 +2467,17 @@ export {
   JoinDialog,
   JoinPanel,
   PanelAlertDialog,
+  PanelDialog,
   PanelPopover,
   PanelSeparator,
   PanelSidebarContext,
   PanelSidebarProvider,
+  Shell,
+  SpaceDialog,
+  SpaceListItem,
   SpaceMemberList,
   SpaceMemberListContainer,
+  SpacePanel,
   activeBgColor,
   activeStrokeColor,
   activeTextColor,
@@ -1935,6 +2485,8 @@ export {
   cancelledStrokeColor,
   cancelledTextColor,
   defaultArrow,
+  defaultDialogContent,
+  defaultOverlay,
   defaultSurface,
   errorBgColor,
   errorStrokeColor,