@dxos/react-ui 0.1.23 → 0.1.24-next.6b1f434

package/dist/lib/browser/index.mjs

@@ -4,21 +4,487 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
-import React4 from "react";
-import { Avatar as Avatar2, mx as mx3 } from "@dxos/react-components";
+// packages/apps/patterns/react-ui/src/components/IdentityList/DeviceList.tsx
+import React2 from "react";
 
-// packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
+// packages/apps/patterns/react-ui/src/components/IdentityList/IdentityListItem.tsx
 import React from "react";
-import { mx, Popover } from "@dxos/react-components";
+import { SpaceMember } from "@dxos/client";
+import { Avatar, mx, useTranslation } from "@dxos/react-components";
+function _extends() {
+  _extends = 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 _extends.apply(this, arguments);
+}
+var IdentityListItem = ({ identity, presence, onClick }) => {
+  var _a;
+  const { t } = useTranslation("os");
+  return /* @__PURE__ */ React.createElement("li", {
+    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()),
+    ...presence === SpaceMember.PresenceState.OFFLINE && {
+      status: "inactive",
+      description: /* @__PURE__ */ React.createElement("p", {
+        className: "font-system-normal text-xs text-neutral-700 dark:text-neutral-300"
+      }, t("identity offline description"))
+    },
+    ...presence === SpaceMember.PresenceState.ONLINE && {
+      status: "active"
+    },
+    slots: {
+      labels: {
+        className: "block shrink overflow-hidden"
+      },
+      root: {
+        className: "shrink-0"
+      }
+    }
+  })));
+};
+
+// 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"
+  }, devices.map((device) => {
+    const identity = {
+      identityKey: device.publicKey,
+      displayName: device.displayName
+    };
+    return /* @__PURE__ */ React2.createElement(IdentityListItem, {
+      key: device.publicKey.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.profile).map((member) => {
+    return /* @__PURE__ */ React3.createElement(IdentityListItem, {
+      key: member.identityKey.toHex(),
+      identity: member.profile,
+      presence: member.presence,
+      onClick: onSelect && (() => onSelect(member))
+    });
+  }));
+};
+
+// packages/apps/patterns/react-ui/src/components/IdentityList/SpaceMemberListContainer.tsx
+import React4, { useMemo } from "react";
+import { useClient, useMembers } from "@dxos/react-client";
+var SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }) => {
+  const client = useClient();
+  const allUnsortedMembers = useMembers(spaceKey);
+  const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((a) => a.identityKey.equals(client.halo.profile.identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identityKey.equals(client.halo.profile.identityKey)), [
+    allUnsortedMembers
+  ]);
+  return /* @__PURE__ */ React4.createElement(SpaceMemberList, {
+    members,
+    onSelect
+  });
+};
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
+import React5 from "react";
+import { Invitation as Invitation3 } from "@dxos/client";
+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 defaultPanel = "p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]";
+var defaultSurface = "bg-neutral-50/[.72] dark:bg-neutral-950/[.72]";
+var subduedSurface = "bg-neutral-100/[.66] dark:bg-neutral-900/[.66]";
 var defaultArrow = "text-neutral-50/[.66] dark:text-neutral-950/[.66]";
 
+// packages/apps/patterns/react-ui/src/styles/invitationStatusStyles.ts
+import { Invitation } from "@dxos/client";
+var inactiveBgColor = "bg-neutral-100 dark:bg-neutral-600";
+var activeBgColor = "bg-primary-500 dark:bg-primary-400";
+var successBgColor = "bg-success-500 dark:bg-success-400";
+var errorBgColor = "bg-error-500 dark:bg-error-400";
+var cancelledBgColor = "bg-warning-500 dark:bg-warning-400";
+var inactiveTextColor = "text-neutral-100 dark:text-neutral-600";
+var activeTextColor = "text-primary-400 dark:text-primary-500";
+var successTextColor = "text-success-400 dark:text-success-500";
+var errorTextColor = "text-error-400 dark:text-error-500";
+var cancelledTextColor = "text-warning-400 dark:text-warning-500";
+var inactiveStrokeColor = "stroke-neutral-100 dark:stroke-neutral-700";
+var activeStrokeColor = "stroke-primary-500 dark:stroke-primary-150";
+var successStrokeColor = "stroke-success-400 dark:stroke-primary-400";
+var errorStrokeColor = "stroke-error-400 dark:stroke-error-500";
+var cancelledStrokeColor = "stroke-warning-400 dark:stroke-warning-500";
+var resolvedStrokeColor = (status) => status === Invitation.State.ERROR ? errorStrokeColor : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
+var resolvedBgColor = (status) => status === Invitation.State.ERROR ? errorBgColor : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT ? cancelledBgColor : successBgColor;
+var resolvedTextColor = (status) => status === Invitation.State.ERROR ? errorTextColor : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT ? cancelledTextColor : successTextColor;
+
+// packages/apps/patterns/react-ui/src/util/invitationStatusValue.ts
+import { Invitation as Invitation2 } from "@dxos/client";
+var invitationStatusValue = /* @__PURE__ */ new Map([
+  [
+    Invitation2.State.ERROR,
+    -3
+  ],
+  [
+    Invitation2.State.TIMEOUT,
+    -2
+  ],
+  [
+    Invitation2.State.CANCELLED,
+    -1
+  ],
+  [
+    Invitation2.State.INIT,
+    0
+  ],
+  [
+    Invitation2.State.CONNECTING,
+    1
+  ],
+  [
+    Invitation2.State.CONNECTED,
+    2
+  ],
+  [
+    Invitation2.State.AUTHENTICATING,
+    3
+  ],
+  [
+    Invitation2.State.SUCCESS,
+    4
+  ]
+]);
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
+function _extends2() {
+  _extends2 = 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 _extends2.apply(this, arguments);
+}
+var svgSize = 32;
+var strokeWidth = 5;
+var radius = (svgSize - strokeWidth) / 2;
+var circumference = Math.PI * 2 * radius;
+var gap = circumference / 12;
+var nSegments = 3;
+var segment = circumference / nSegments;
+var baseOffset = 2 * circumference / 3 - (segment - gap) / 2;
+var circleProps = {
+  fill: "none",
+  strokeLinecap: "round",
+  cx: svgSize / 2,
+  cy: svgSize / 2,
+  r: radius,
+  strokeWidth,
+  strokeDasharray: `${segment - gap} ${2 * segment + gap}`
+};
+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__ */ React5.createElement("svg", _extends2({}, slots.svg, {
+    viewBox: `0 0 ${svgSize} ${svgSize}`,
+    className: mx2(getSize(size), (_a = slots.svg) == null ? void 0 : _a.className)
+  }), [
+    ...Array(nSegments)
+  ].map((_, index) => /* @__PURE__ */ React5.createElement("circle", _extends2({
+    key: index
+  }, circleProps, {
+    strokeDashoffset: index * segment + baseOffset,
+    className: index === 0 ? cursor === 1 ? halted ? resolvedColor : activeStrokeColor : cursor > 1 ? resolvedColor : inactiveStrokeColor : index === 1 ? cursor === 3 ? halted ? resolvedColor : activeStrokeColor : cursor > 3 ? resolvedColor : inactiveStrokeColor : cursor > 3 ? resolvedColor : inactiveStrokeColor
+  }))));
+};
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationListItem.tsx
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Copy, ProhibitInset, QrCode, X } from "phosphor-react";
+import { QRCodeSVG } from "qrcode.react";
+import React6, { useCallback } from "react";
+import { useInvitationStatus } from "@dxos/react-client";
+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++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends3.apply(this, arguments);
+}
+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 showAuthCode = statusValue === 3;
+  const handleClickRemove = useCallback(() => onClickRemove(invitation), [
+    invitation,
+    onClickRemove
+  ]);
+  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
+  const handleClickCopy = useCallback(() => {
+    if (invitationUrl) {
+      void navigator.clipboard.writeText(invitationUrl);
+    }
+  }, [
+    invitationUrl
+  ]);
+  return /* @__PURE__ */ React6.createElement(AccordionPrimitive.Item, {
+    value
+  }, /* @__PURE__ */ React6.createElement(AccordionPrimitive.Header, {
+    className: "flex gap-2 items-center"
+  }, /* @__PURE__ */ React6.createElement(InvitationStatusAvatar, _extends3({}, {
+    status,
+    haltedAt,
+    size: 8
+  })), showShare && invitationUrl ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(AccordionPrimitive.Trigger, {
+    asChild: true
+  }, /* @__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"
+  }))) : showAuthCode ? /* @__PURE__ */ React6.createElement("p", {
+    className: "grow text-xl text-center text-success-500 dark:text-success-300 font-mono"
+  }, authenticationCode) : /* @__PURE__ */ React6.createElement("span", {
+    role: "none",
+    className: "grow"
+  }), isCancellable ? /* @__PURE__ */ React6.createElement(Button, {
+    variant: "ghost",
+    compact: true,
+    className: "flex gap-1",
+    onClick: cancel,
+    "data-testid": "cancel-invitation"
+  }, /* @__PURE__ */ React6.createElement("span", {
+    className: "sr-only"
+  }, t("cancel invitation label")), /* @__PURE__ */ React6.createElement(ProhibitInset, {
+    className: getSize2(4),
+    weight: "bold"
+  })) : /* @__PURE__ */ React6.createElement(Button, {
+    variant: "ghost",
+    compact: true,
+    className: "flex gap-1",
+    onClick: handleClickRemove,
+    "data-testid": "remove-invitation"
+  }, /* @__PURE__ */ React6.createElement("span", {
+    className: "sr-only"
+  }, t("remove invitation label")), /* @__PURE__ */ React6.createElement(X, {
+    className: getSize2(4),
+    weight: "bold"
+  }))), 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: 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 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 React7 from "react";
+import { defaultDescription, 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++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends4.apply(this, arguments);
+}
+var InvitationList = ({ invitations, ...invitationProps }) => {
+  const { t } = useTranslation3("os");
+  return invitations.length ? /* @__PURE__ */ React7.createElement(AccordionRoot, {
+    type: "single",
+    collapsible: true,
+    className: "flex flex-col gap-1"
+  }, invitations.map((invitation, index) => {
+    var _a, _b;
+    const value = (_b = (_a = invitation.invitation) == null ? void 0 : _a.invitationId) != null ? _b : `inv_${index}`;
+    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
+function _extends5() {
+  _extends5 = 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 _extends5.apply(this, arguments);
+}
+var InvitationListContainer = ({ spaceKey, createInvitationUrl }) => {
+  const space = useSpace(spaceKey);
+  const invitations = useSpaceInvitations(spaceKey);
+  const onClickRemove = useCallback2(({ invitation }) => {
+    (invitation == null ? void 0 : invitation.invitationId) && (space == null ? void 0 : space.removeInvitation(invitation.invitationId));
+  }, [
+    space
+  ]);
+  return /* @__PURE__ */ React8.createElement(InvitationList, _extends5({
+    invitations
+  }, {
+    onClickRemove,
+    createInvitationUrl
+  }));
+};
+
+// packages/apps/patterns/react-ui/src/components/PanelSeparator/PanelSeparator.tsx
+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++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends6.apply(this, arguments);
+}
+var PanelSeparator = ({ className, ...props }) => {
+  return /* @__PURE__ */ React9.createElement("span", _extends6({
+    role: "none"
+  }, props, {
+    className: mx5("block bs-px mlb-1 bg-neutral-800/10 dark:bg-neutral-200/10", className)
+  }));
+};
+
+// 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++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  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
-function _extends() {
-  _extends = Object.assign || function(target) {
+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) {
@@ -29,25 +495,25 @@ function _extends() {
     }
     return target;
   };
-  return _extends.apply(this, arguments);
+  return _extends8.apply(this, arguments);
 }
 var PanelPopover = ({ slots, children, ...popoverProps }) => {
   var _a, _b, _c;
-  return /* @__PURE__ */ React.createElement(Popover, _extends({
+  return /* @__PURE__ */ React11.createElement(Popover, _extends8({
     slots: {
       arrow: {
         ...slots == null ? void 0 : slots.arrow,
-        className: mx(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: mx(defaultPanel, (_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: mx("", (_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
     }
@@ -56,10 +522,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 React2, { createContext, useCallback, useContext, useState } from "react";
-import { defaultOverlay, mx as mx2, useMediaQuery, useTranslation } from "@dxos/react-components";
-function _extends2() {
-  _extends2 = 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) {
@@ -70,7 +536,7 @@ function _extends2() {
     }
     return target;
   };
-  return _extends2.apply(this, arguments);
+  return _extends9.apply(this, arguments);
 }
 var PanelSidebarContext = /* @__PURE__ */ createContext({
   displayState: "hide",
@@ -79,16 +545,18 @@ var PanelSidebarContext = /* @__PURE__ */ createContext({
 });
 var useTogglePanelSidebar = () => {
   const { displayState, setDisplayState } = useContext(PanelSidebarContext);
-  return useCallback(() => {
+  return useCallback3(() => {
     setDisplayState(displayState === "hide" ? "show" : "hide");
   }, [
     displayState
   ]);
 };
-var PanelSidebarProvider = ({ children, inlineStart, slots }) => {
-  var _a, _b, _c, _d;
-  const { t } = useTranslation("os");
-  const [isLg] = useMediaQuery("lg");
+var PanelSidebarProvider = ({ children, slots }) => {
+  var _a, _b, _c;
+  const { t } = useTranslation4("os");
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
   const [displayState, setInternalDisplayState] = useState(isLg ? "show" : "hide");
   const isOpen = displayState === "show";
   const [transitionShow, setTransitionShow] = useState(isOpen);
@@ -108,65 +576,223 @@ var PanelSidebarProvider = ({ children, inlineStart, slots }) => {
     }, 0);
   };
   const setDisplayState = (displayState2) => displayState2 === "show" ? internalShow() : internalHide();
-  return /* @__PURE__ */ React2.createElement(PanelSidebarContext.Provider, {
+  return /* @__PURE__ */ React12.createElement(PanelSidebarContext.Provider, {
     value: {
       setDisplayState,
       displayState
     }
-  }, /* @__PURE__ */ React2.createElement(DialogPrimitive.Root, {
+  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Root, {
     open: domShow,
     modal: !isLg
-  }, /* @__PURE__ */ React2.createElement(DialogPrimitive.Content, _extends2({}, slots == null ? void 0 : slots.content, {
-    className: mx2("fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out overflow-x-hidden overflow-y-auto", transitionShow ? "inline-start-0" : "inline-start-[-272px]", (_a = slots == null ? void 0 : slots.content) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React2.createElement(DialogPrimitive.Title, {
+  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Content, _extends9({
+    onOpenAutoFocus: (event) => isLg && event.preventDefault(),
+    onCloseAutoFocus: (event) => isLg && event.preventDefault()
+  }, slots == null ? void 0 : slots.content, {
+    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), (slots == null ? void 0 : slots.fixedBlockStart) && /* @__PURE__ */ React2.createElement("div", _extends2({
-    role: "none"
-  }, slots == null ? void 0 : slots.fixedBlockStart, {
-    className: mx2("fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-[272px]" : "inline-start-0", (_c = slots == null ? void 0 : slots.fixedBlockStart) == null ? void 0 : _c.className)
-  }), (_d = slots == null ? void 0 : slots.fixedBlockStart) == null ? void 0 : _d.children), !isLg && /* @__PURE__ */ React2.createElement(DialogPrimitive.Overlay, {
-    className: mx2(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__ */ React2.createElement("div", {
+  }), /* @__PURE__ */ React12.createElement("div", _extends9({
+    role: "none"
+  }, slots == null ? void 0 : slots.main, {
+    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 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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends10.apply(this, arguments);
+}
+var PanelAlertDialog = ({ titleId, slots = {}, children }) => {
+  var _a, _b;
+  return /* @__PURE__ */ React13.createElement(AlertDialog.Root, _extends10({
+    defaultOpen: true
+  }, 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: mx9(defaultDialogContent, (_b = slots.content) == null ? void 0 : _b.className)
+  }), children)));
+};
+
+// 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({}, 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, 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 }) => {
+  const { t } = useTranslation5("os");
+  const client = useClient2();
+  const identity = useIdentity();
+  const devices = useDevices();
+  const invitations = useHaloInvitations();
+  const displayName = identity == null ? void 0 : identity.displayName;
+  if (!identity) {
+    return null;
+  }
+  const doneButton = /* @__PURE__ */ React15.createElement(Button2, {
+    compact: true,
+    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: mx2("bs-full transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-[272px]" : "pis-0")
-  }, children)));
+    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",
+    compact: true,
+    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(React15.Fragment, null, panelState.activeView === "device list" ? /* @__PURE__ */ React15.createElement(DeviceListView, _extends12({}, props)) : null);
 };
 
 // packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx
-import React3 from "react";
-import { useClient } from "@dxos/react-client";
-import { Avatar, Button, ThemeContext, useTranslation as useTranslation2 } from "@dxos/react-components";
+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;
-  const { t } = useTranslation2("os");
-  const client = useClient();
+  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__ */ React3.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React16.createElement(ThemeContext.Provider, {
     value: {
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React16.createElement("div", {
     className: "flex flex-col gap-2 justify-center items-center"
-  }, /* @__PURE__ */ React3.createElement(Avatar, {
+  }, /* @__PURE__ */ React16.createElement(Avatar3, {
     size: 16,
     variant: "circle",
     fallbackValue: identity.identityKey.toHex(),
     label: (_a = identity.displayName) != null ? _a : ""
-  }), /* @__PURE__ */ React3.createElement(Button, {
+  }), /* @__PURE__ */ React16.createElement(Button3, {
     compact: true,
     onClick: onClickManageProfile != null ? onClickManageProfile : defaultManageProfile,
     className: "is-full"
   }, t("manage profile label"))));
 };
 
-// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
-function _extends3() {
-  _extends3 = Object.assign || function(target) {
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
+import React27, { useEffect, useReducer as useReducer2 } from "react";
+import { InvitationEncoder as InvitationEncoder2 } from "@dxos/client";
+import { log } from "@dxos/log";
+import { useClient as useClient6, useIdentity as useIdentity2 } from "@dxos/react-client";
+import { 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 React17, { cloneElement as cloneElement2, forwardRef as forwardRef2 } from "react";
+import { useSpace as useSpace2 } 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) {
@@ -177,29 +803,1668 @@ function _extends3() {
     }
     return target;
   };
-  return _extends3.apply(this, arguments);
+  return _extends13.apply(this, arguments);
 }
-var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true, onClickManageProfile, ...popoverProps }) => {
-  var _a, _b;
-  return /* @__PURE__ */ React4.createElement(PanelPopover, _extends3({}, popoverProps, {
-    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React4.createElement(Avatar2, {
-      size: 10,
-      variant: "circle",
-      fallbackValue: identity.identityKey.toHex(),
-      label: (_a = identity.displayName) != null ? _a : ""
-    }),
-    slots: {
-      ...slots,
-      trigger: {
-        ...slots == null ? void 0 : slots.trigger,
-        className: mx3("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)
-      }
+var JoinHeading = /* @__PURE__ */ forwardRef2(({ 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 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({
+    compact: true,
+    variant: "ghost"
+  }, onExit && {
+    onClick: onExit
+  }, {
+    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__ */ React17.createElement("div", {
+    role: "none",
+    className: mx12(subduedSurface, "p-2 rounded-bs-md"),
+    ref
+  }, /* @__PURE__ */ React17.createElement("div", {
+    role: "group",
+    className: "flex items-center gap-2"
+  }, invitationKey ? /* @__PURE__ */ React17.createElement(Avatar4, {
+    fallbackValue: invitationKey,
+    labelId: nameId
+  }) : /* @__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
+  }, invitation ? /* @__PURE__ */ React17.createElement(Trans, _extends13({}, {
+    defaults: t("joining heading"),
+    components: {
+      small: /* @__PURE__ */ React17.createElement("span", {
+        className: "block leading-none mbe-1 font-system-medium text-sm"
+      }),
+      large: /* @__PURE__ */ React17.createElement("span", {
+        className: "block leading-none",
+        id: nameId
+      })
     },
-    triggerIsInToolbar
-  }), /* @__PURE__ */ React4.createElement(IdentityPanel, _extends3({}, {
-    identity,
-    onClickManageProfile
-  })));
+    values: {
+      name
+    }
+  })) : /* @__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 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 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 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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends14.apply(this, arguments);
+}
+var stripe = mx13("rounded-full grow", getSize5(3));
+var ViewStateHeading = ({ children, className, ...props }) => {
+  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 = useId3("invitationState");
+  return /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    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__ */ React18.createElement("div", {
+    role: "none",
+    className: mx13(stripe, !halted && cursor === 1 && strongShimmer, cursor === 2 ? halted ? resolvedColor : activeBgColor : cursor > 1 ? resolvedColor : inactiveBgColor)
+  }), /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    className: mx13(stripe, !halted && cursor === 3 && strongShimmer, cursor === 3 ? halted ? resolvedColor : activeBgColor : cursor > 3 ? resolvedColor : inactiveBgColor)
+  }), /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    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 } = 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);
+  const resolvedColor = resolvedBgColor(status);
+  const statusLabelMap = useMemo2(() => /* @__PURE__ */ new Map([
+    [
+      Invitation4.State.ERROR,
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(X3, {
+        weight: "bold",
+        className: mx13(getSize5(4), "text-error-600 dark:text-error-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("error status label")))
+    ],
+    [
+      Invitation4.State.TIMEOUT,
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(HourglassSimple, {
+        weight: "fill",
+        className: mx13(getSize5(4), "text-warning-600 dark:text-warning-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("timeout status label")))
+    ],
+    [
+      Invitation4.State.CANCELLED,
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(X3, {
+        weight: "bold",
+        className: mx13(getSize5(4), "text-warning-600 dark:text-warning-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("cancelled status label")))
+    ],
+    [
+      Invitation4.State.INIT,
+      t("init status label")
+    ],
+    [
+      Invitation4.State.CONNECTING,
+      t("connecting status label")
+    ],
+    [
+      Invitation4.State.CONNECTED,
+      t("connected status label")
+    ],
+    [
+      Invitation4.State.AUTHENTICATING,
+      t("authenticating status label")
+    ],
+    [
+      Invitation4.State.SUCCESS,
+      /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(CheckCircle, {
+        weight: "fill",
+        className: mx13(getSize5(4), "text-success-600 dark:text-success-400")
+      }), /* @__PURE__ */ React18.createElement("span", null, t("success status label")))
+    ]
+  ]), [
+    t
+  ]);
+  return /* @__PURE__ */ React18.createElement(PureViewStateInvitation, _extends14({}, {
+    label: statusLabelMap.get(status),
+    resolvedColor,
+    cursor,
+    halted
+  }));
+};
+var ViewState = ({ active, children, className, dispatch, selectedIdentity, activeInvitation, ...props }) => {
+  var _a;
+  const { t } = useTranslation8("os");
+  const identityLabel = useId3("selectedIdentityLabel");
+  return /* @__PURE__ */ React18.createElement("div", _extends14({
+    role: "none"
+  }, props, !active && {
+    "aria-hidden": true
+  }, {
+    className: mx13("is-[50%] flex flex-col", active ? "order-2" : "order-4", className)
+  }), selectedIdentity && /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    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__ */ React18.createElement(Avatar5, {
+        size: 4,
+        fallbackValue: selectedIdentity === true ? "" : selectedIdentity.identityKey.toHex(),
+        labelId: identityLabel
+      }),
+      label: /* @__PURE__ */ React18.createElement("span", {
+        id: identityLabel
+      }),
+      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()
+    }
+  }))), activeInvitation && (activeInvitation === true ? /* @__PURE__ */ React18.createElement(PureViewStateInvitation, _extends14({}, {
+    halted: false,
+    status: Invitation4.State.INIT,
+    label: t("invitation input label"),
+    cursor: 0,
+    resolvedColor: inactiveBgColor
+  })) : /* @__PURE__ */ React18.createElement(ViewStateInvitationStatus, _extends14({}, {
+    activeInvitation
+  }))), /* @__PURE__ */ React18.createElement("div", {
+    role: "region",
+    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 _extends15() {
+  _extends15 = 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 _extends15.apply(this, arguments);
+}
+var AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation9("os");
+  const sharedButtonProps = {
+    disabled,
+    after: /* @__PURE__ */ React19.createElement(CaretRight, {
+      className: getSize6(4),
+      weight: "bold"
+    }),
+    slots: {
+      label: {
+        className: "text-sm"
+      }
+    }
+  };
+  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__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
+    description: t("create identity description"),
+    before: /* @__PURE__ */ React19.createElement(Plus, {
+      className: getSize6(6)
+    }),
+    onClick: () => dispatch({
+      type: "select addition method",
+      method: "create identity"
+    }),
+    "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__ */ React19.createElement(QrCode2, {
+      className: getSize6(6)
+    }),
+    onClick: () => dispatch({
+      type: "select addition method",
+      method: "accept device invitation"
+    }),
+    "data-testid": "join-identity"
+  }), t("join identity label")), /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
+    description: t("recover identity description"),
+    before: /* @__PURE__ */ React19.createElement(Textbox, {
+      className: getSize6(6)
+    }),
+    onClick: () => dispatch({
+      type: "select addition method",
+      method: "recover identity"
+    }),
+    "data-testid": "recover-identity"
+  }), t("recover identity label"))), /* @__PURE__ */ React19.createElement(Button5, {
+    disabled: disabled || availableIdentities.length < 1,
+    onClick: () => dispatch({
+      type: "deselect identity"
+    }),
+    "data-testid": "deselect-identity"
+  }, /* @__PURE__ */ React19.createElement(CaretLeft, {
+    className: getSize6(4),
+    weight: "bold"
+  }), /* @__PURE__ */ React19.createElement("span", {
+    className: "grow"
+  }, 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, 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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends16.apply(this, arguments);
+}
+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;
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  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__ */ React20.createElement(Avatar6, {
+    size: 20,
+    fallbackValue: (_a = addedIdentity == null ? void 0 : addedIdentity.identityKey.toHex()) != null ? _a : "",
+    label: /* @__PURE__ */ React20.createElement("p", {
+      className: mx15("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"),
+    variant: "circle",
+    status: "active"
+  })), mode === "halo-only" ? /* @__PURE__ */ React20.createElement(Done, _extends16({
+    onDone,
+    doneActionParent
+  }, viewStateProps)) : /* @__PURE__ */ React20.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React20.createElement(Button6, {
+    disabled: disabled || !addedIdentity,
+    className: "grow flex items-center gap-2 pli-2 order-2",
+    onClick: () => addedIdentity && dispatch({
+      type: "select identity",
+      identity: addedIdentity
+    }),
+    "data-autofocus": "identity added"
+  }, /* @__PURE__ */ React20.createElement(CaretLeft2, {
+    weight: "bold",
+    className: mx15(getSize7(2), "invisible")
+  }), /* @__PURE__ */ React20.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React20.createElement(CaretRight2, {
+    weight: "bold",
+    className: getSize7(4)
+  })), /* @__PURE__ */ React20.createElement(Button6, {
+    disabled,
+    onClick: () => dispatch({
+      type: "deselect identity"
+    }),
+    className: "flex items-center gap-2 pis-2 pie-4"
+  }, /* @__PURE__ */ React20.createElement(CaretLeft2, {
+    weight: "bold",
+    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 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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends17.apply(this, arguments);
+}
+var IdentitySelector = ({ availableIdentities, ...viewStateProps }) => {
+  const { dispatch } = viewStateProps;
+  const disabled = !viewStateProps.active;
+  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__ */ 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;
+    const hex = identityKey.toHex();
+    const inputId = `identitySelector__item--${hex}`;
+    const labelId = `identitySelector__itemLabel--${hex}`;
+    return /* @__PURE__ */ React21.createElement("label", {
+      htmlFor: inputId,
+      key: hex,
+      className: "flex items-center mbe-2 gap-2 cursor-pointer"
+    }, /* @__PURE__ */ React21.createElement(RadioGroup.Item, {
+      id: inputId,
+      "aria-labelledby": labelId,
+      value: hex,
+      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__ */ React21.createElement("div", {
+      className: "w-1.5 h-1.5 rounded-full bg-white"
+    }))), /* @__PURE__ */ React21.createElement(Avatar7, {
+      fallbackValue: hex,
+      labelId,
+      variant: "circle"
+    }), /* @__PURE__ */ React21.createElement("span", {
+      id: labelId,
+      className: mx16(!displayName && "font-mono")
+    }, (_a = displayName != null ? displayName : identityKey.truncate()) != null ? _a : ""));
+  })), /* @__PURE__ */ React21.createElement(Button7, {
+    disabled,
+    compact: true,
+    onClick: () => dispatch({
+      type: "add identity"
+    }),
+    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: 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
+    }),
+    "data-testid": "select-identity"
+  }, /* @__PURE__ */ React21.createElement(CaretLeft3, {
+    weight: "bold",
+    className: mx16(getSize8(4), "invisible")
+  }), /* @__PURE__ */ React21.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React21.createElement(CaretRight3, {
+    weight: "bold",
+    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 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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends18.apply(this, arguments);
+}
+var IdentityInput = ({ method, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation12("os");
+  const [inputValue, setInputValue] = useState3("");
+  const client = useClient4();
+  const [validationMessage, setValidationMessage] = useState3("");
+  const isRecover = method === "recover identity";
+  const handleNext = () => {
+    void client.halo.createProfile({
+      [isRecover ? "seedphrase" : "displayName"]: inputValue
+    }).then((identity) => {
+      dispatch({
+        type: "added identity",
+        identity
+      });
+    }, (_error) => {
+      setValidationMessage(t(isRecover ? "failed to recover identity message" : "failed to create identity message"));
+    });
+  };
+  return /* @__PURE__ */ React22.createElement(ViewState, _extends18({}, viewStateProps), /* @__PURE__ */ React22.createElement(Input, _extends18({
+    disabled,
+    label: /* @__PURE__ */ React22.createElement(ViewStateHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    onChange: ({ target: { value } }) => setInputValue(value),
+    slots: {
+      root: {
+        className: "m-0"
+      },
+      input: {
+        "data-autofocus": isRecover ? "identity input; recover identity" : "identity input; create identity",
+        onKeyUp: ({ key }) => key === "Enter" && handleNext()
+      }
+    }
+  }, validationMessage.length && {
+    validationValence: "error",
+    validationMessage
+  }, {
+    "data-testid": "identity-input"
+  })), /* @__PURE__ */ React22.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), /* @__PURE__ */ React22.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React22.createElement(Button8, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2 order-2",
+    onClick: handleNext,
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-continue`
+  }, /* @__PURE__ */ React22.createElement(CaretLeft4, {
+    weight: "bold",
+    className: mx17(getSize9(2), "invisible")
+  }), /* @__PURE__ */ React22.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React22.createElement(CaretRight4, {
+    weight: "bold",
+    className: getSize9(4)
+  })), /* @__PURE__ */ React22.createElement(Button8, {
+    disabled,
+    onClick: () => dispatch({
+      type: "add identity"
+    }),
+    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: 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 as Check2 } from "phosphor-react";
+import React23, { cloneElement as cloneElement4 } from "react";
+import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client";
+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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends19.apply(this, arguments);
+}
+var PureInvitationAcceptedContent = ({ onDone, result, invitationType, doneActionParent, active }) => {
+  const disabled = !active;
+  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`,
+    "data-testid": `${invitationType}-invitation-accepted-done`
+  }), /* @__PURE__ */ React23.createElement(CaretLeft5, {
+    weight: "bold",
+    className: mx18(getSize10(2), "invisible")
+  }), /* @__PURE__ */ React23.createElement("span", {
+    className: "grow"
+  }, t("done label")), /* @__PURE__ */ React23.createElement(Check2, {
+    weight: "bold",
+    className: getSize10(4)
+  }));
+  return doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, doneButton) : doneButton;
+};
+var InvitationAcceptedContent = (props) => {
+  const { result } = useInvitationStatus3(props.activeInvitation);
+  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__ */ React23.createElement(ViewState, _extends19({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React23.createElement(PureInvitationAcceptedContent, _extends19({}, props, {
+    result: null
+  })) : /* @__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 React24, { useState as useState4 } from "react";
+import { InvitationEncoder } from "@dxos/client";
+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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends20.apply(this, arguments);
+}
+var InvitationInput = ({ invitationType, ...viewStateProps }) => {
+  const client = useClient5();
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  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__ */ React24.createElement(ViewState, _extends20({}, viewStateProps), /* @__PURE__ */ React24.createElement(Input2, {
+    disabled,
+    label: /* @__PURE__ */ React24.createElement(ViewStateHeading, null, t("invitation input label")),
+    onChange: ({ target: { value } }) => setInputValue(value),
+    slots: {
+      root: {
+        className: "m-0"
+      },
+      label: {
+        className: "sr-only"
+      },
+      input: {
+        "data-autofocus": `${invitationType} invitation acceptor; invitation input`,
+        onKeyUp: ({ key }) => key === "Enter" && handleNext()
+      }
+    },
+    "data-testid": "invitation-input"
+  }), /* @__PURE__ */ React24.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), /* @__PURE__ */ React24.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React24.createElement(Button10, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2 order-2",
+    onClick: handleNext,
+    "data-testid": `${invitationType}-invitation-input-continue`
+  }, /* @__PURE__ */ React24.createElement(CaretLeft6, {
+    weight: "bold",
+    className: mx19(getSize11(2), "invisible")
+  }), /* @__PURE__ */ React24.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React24.createElement(CaretRight5, {
+    weight: "bold",
+    className: getSize11(4)
+  })), /* @__PURE__ */ React24.createElement(Button10, {
+    disabled,
+    onClick: () => dispatch({
+      type: "add identity"
+    }),
+    className: "flex items-center gap-2 pis-2 pie-4",
+    "data-testid": `${invitationType}-invitation-input-back`
+  }, /* @__PURE__ */ React24.createElement(CaretLeft6, {
+    weight: "bold",
+    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 React25 from "react";
+import { Invitation as Invitation5 } from "@dxos/client";
+import { useInvitationStatus as useInvitationStatus4 } from "@dxos/react-client";
+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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends21.apply(this, arguments);
+}
+var InvitationActions = ({ activeInvitation, disabled, dispatch, invitationType }) => {
+  const { status, cancel } = useInvitationStatus4(activeInvitation);
+  const { t } = useTranslation15("os");
+  switch (status) {
+    case Invitation5.State.CONNECTING:
+      return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("div", {
+        role: "none",
+        className: "grow"
+      }), /* @__PURE__ */ React25.createElement("div", {
+        className: "flex gap-2"
+      }, /* @__PURE__ */ React25.createElement(Button11, {
+        disabled: true,
+        className: "grow flex items-center gap-2 pli-2 order-2",
+        "data-testid": "next"
+      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
+        weight: "bold",
+        className: mx20(getSize12(2), "invisible")
+      }), /* @__PURE__ */ React25.createElement("span", {
+        className: "grow"
+      }, t("next label")), /* @__PURE__ */ React25.createElement(CaretRight6, {
+        weight: "bold",
+        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`,
+        "data-testid": "invitation-rescuer-cancel"
+      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
+        weight: "bold",
+        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__ */ 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`,
+        "data-testid": "invitation-rescuer-reset"
+      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
+        weight: "bold",
+        className: mx20(getSize12(5), "invisible")
+      }), /* @__PURE__ */ React25.createElement("span", {
+        className: "grow"
+      }, t("reset label")), /* @__PURE__ */ React25.createElement(ArrowsClockwise, {
+        weight: "bold",
+        className: getSize12(5)
+      }));
+  }
+};
+var InvitationRescuer = ({ invitationType, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch, activeInvitation } = viewStateProps;
+  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",
+    "data-testid": "invitation-rescuer-connect"
+  }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
+    weight: "bold",
+    className: mx20(getSize12(5), "invisible")
+  }), /* @__PURE__ */ React25.createElement("span", {
+    className: "grow"
+  }, t("connect label")), /* @__PURE__ */ React25.createElement(ArrowsClockwise, {
+    weight: "bold",
+    className: getSize12(5)
+  })) : /* @__PURE__ */ React25.createElement(InvitationActions, _extends21({}, {
+    activeInvitation,
+    disabled,
+    dispatch,
+    invitationType
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx
+import { CaretLeft as CaretLeft8, CaretRight as CaretRight7 } from "phosphor-react";
+import React26, { useCallback as useCallback5, useState as useState5 } from "react";
+import { useInvitationStatus as useInvitationStatus5 } from "@dxos/react-client";
+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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends22.apply(this, arguments);
+}
+var pinLength = 6;
+var PureInvitationAuthenticatorContent = ({ disabled, failed, dispatch, invitationType, onChange, onAuthenticate }) => {
+  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,
+    disabled,
+    slots: {
+      root: {
+        className: "m-0"
+      },
+      label: {
+        className: "sr-only"
+      },
+      description: {
+        className: "text-center"
+      },
+      input: {
+        disabled,
+        inputMode: "numeric",
+        pattern: "\\d*",
+        "data-autofocus": `${invitationType} invitation acceptor; invitation authenticator`
+      }
+    }
+  }, failed && {
+    validationValence: "error",
+    validationMessage: t("failed to authenticate message")
+  }, {
+    "data-testid": "auth-code-input"
+  })), /* @__PURE__ */ React26.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), /* @__PURE__ */ React26.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React26.createElement(Button12, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2 order-2",
+    onClick: onAuthenticate,
+    "data-autofocus-pinlength": invitationType,
+    "data-testid": `${invitationType}-invitation-authenticator-next`
+  }, /* @__PURE__ */ React26.createElement(CaretLeft8, {
+    weight: "bold",
+    className: mx21(getSize13(2), "invisible")
+  }), /* @__PURE__ */ React26.createElement("span", {
+    className: "grow"
+  }, t("next label")), /* @__PURE__ */ React26.createElement(CaretRight7, {
+    weight: "bold",
+    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
+    }),
+    "data-testid": `${invitationType}-invitation-authenticator-cancel`
+  }, /* @__PURE__ */ React26.createElement(CaretLeft8, {
+    weight: "bold",
+    className: getSize13(4)
+  }), /* @__PURE__ */ React26.createElement("span", null, t("cancel label")))));
+};
+var InvitationAuthenticatorContent = ({ disabled, invitation, dispatch, invitationType, failed }) => {
+  const [pinValue, setPinValue] = useState5("");
+  const { authenticate } = useInvitationStatus5(invitation);
+  const onAuthenticate = useCallback5(() => {
+    dispatch({
+      type: "authenticating invitation",
+      from: invitationType
+    });
+    void authenticate(pinValue);
+  }, [
+    dispatch,
+    invitationType,
+    authenticate,
+    pinValue
+  ]);
+  const onChange = useCallback5(({ target: { value } }) => {
+    var _a;
+    setPinValue(value);
+    if (value.length === pinLength) {
+      (_a = document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`)) == null ? void 0 : _a.focus();
+    }
+  }, [
+    authenticate,
+    pinValue
+  ]);
+  return /* @__PURE__ */ React26.createElement(PureInvitationAuthenticatorContent, _extends22({}, {
+    disabled,
+    failed,
+    dispatch,
+    invitationType,
+    onChange,
+    onAuthenticate
+  }));
+};
+var InvitationAuthenticator = ({ invitationType, failed, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { activeInvitation, dispatch } = viewStateProps;
+  return /* @__PURE__ */ React26.createElement(ViewState, _extends22({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React26.createElement(PureInvitationAuthenticatorContent, _extends22({}, {
+    disabled,
+    failed,
+    dispatch,
+    invitationType,
+    onChange: () => {
+    },
+    onAuthenticate: () => {
+    }
+  })) : /* @__PURE__ */ React26.createElement(InvitationAuthenticatorContent, _extends22({}, {
+    disabled,
+    failed,
+    invitation: activeInvitation,
+    dispatch,
+    invitationType
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
+function _extends23() {
+  _extends23 = 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 _extends23.apply(this, arguments);
+}
+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 = useIdentity2();
+  const availableIdentities = identity ? [
+    identity
+  ] : [];
+  const reducer = (state, action) => {
+    var _a, _b, _c, _d;
+    const nextState = {
+      ...state
+    };
+    switch (action.type) {
+      case "added identity":
+        nextState.activeView = "identity added";
+        nextState.selectedIdentity = action.identity;
+        break;
+      case "add identity":
+        nextState.activeView = "addition method selector";
+        break;
+      case "select addition method":
+        if (action.method === "accept device invitation") {
+          nextState.activeView = "halo invitation acceptor";
+          if (state.unredeemedHaloInvitationCode) {
+            nextState.haloInvitation = client.halo.acceptInvitation(InvitationEncoder2.decode(state.unredeemedHaloInvitationCode));
+            nextState.unredeemedHaloInvitationCode = void 0;
+            nextState.haloViewState = "invitation authenticator";
+          } else {
+            nextState.haloViewState = "invitation input";
+          }
+        } else {
+          nextState.activeView = "identity input";
+          nextState.additionMethod = action.method;
+        }
+        break;
+      case "select identity":
+        nextState.selectedIdentity = action.identity;
+        nextState.activeView = "space invitation acceptor";
+        if (state.unredeemedSpaceInvitationCode) {
+          nextState.spaceInvitation = client.echo.acceptInvitation(InvitationEncoder2.decode(state.unredeemedSpaceInvitationCode));
+          nextState.unredeemedSpaceInvitationCode = void 0;
+          nextState.spaceViewState = "invitation authenticator";
+        } else {
+          nextState.spaceViewState = "invitation input";
+        }
+        break;
+      case "deselect identity":
+        nextState.selectedIdentity = void 0;
+        nextState.activeView = "identity selector";
+        break;
+      case "cancel invitation":
+        if (action.from === "space" && ((_a = state.spaceInvitation) == null ? void 0 : _a.invitation)) {
+          void ((_b = state.spaceInvitation) == null ? void 0 : _b.cancel());
+        }
+        if (action.from === "halo" && ((_c = state.haloInvitation) == null ? void 0 : _c.invitation)) {
+          void ((_d = state.haloInvitation) == null ? void 0 : _d.cancel());
+        }
+        break;
+      case "authenticating invitation":
+        nextState[action.from === "halo" ? "haloInvitationAnnotation" : "spaceInvitationAnnotation"] = "authenticating";
+        break;
+      case "connecting invitation":
+        nextState[action.from === "halo" ? "haloInvitation" : "spaceInvitation"] = action.invitation;
+      case "cancelled invitation":
+      case "fail invitation":
+      case "timeout invitation":
+        nextState[action.from === "halo" ? "haloViewState" : "spaceViewState"] = "invitation rescuer";
+        break;
+      case "connect invitation":
+      case "authenticate invitation":
+        if (action.from === "halo" && state.haloInvitationAnnotation === "authenticating") {
+          nextState.haloInvitationAnnotation = "authentication failed";
+        }
+        if (action.from === "space" && state.spaceInvitationAnnotation === "authenticating") {
+          nextState.spaceInvitationAnnotation = "authentication failed";
+        }
+        nextState[action.from === "halo" ? "haloViewState" : "spaceViewState"] = "invitation authenticator";
+        break;
+      case "accepted invitation":
+        nextState[action.from === "halo" ? "haloViewState" : "spaceViewState"] = "invitation accepted";
+        break;
+      case "reset invitation":
+        nextState[action.from === "halo" ? "haloInvitation" : "spaceInvitation"] = void 0;
+        nextState[action.from === "halo" ? "haloInvitationAnnotation" : "spaceInvitationAnnotation"] = void 0;
+        nextState[action.from === "halo" ? "unredeemedHaloInvitationCode" : "unredeemedSpaceInvitationCode"] = void 0;
+        nextState[action.from === "halo" ? "haloViewState" : "spaceViewState"] = "invitation input";
+        break;
+    }
+    log("[join panel reducer]", {
+      action,
+      nextState
+    }, {
+      file: "JoinPanel.tsx",
+      line: 125,
+      scope: void 0,
+      callSite: (f, a) => f(...a)
+    });
+    return nextState;
+  };
+  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",
+    selectedIdentity: void 0,
+    additionMethod: void 0,
+    spaceViewState: "invitation input",
+    haloViewState: "invitation input"
+  });
+  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("[autofocus value]", {
+      attrValue
+    }, {
+      file: "JoinPanel.tsx",
+      line: 158,
+      scope: void 0,
+      callSite: (f, a) => f(...a)
+    });
+    const $nextAutofocus = document.querySelector(`[data-autofocus="${attrValue}"]`);
+    if ($nextAutofocus) {
+      $nextAutofocus.focus();
+    }
+  }, [
+    joinState.activeView,
+    joinState.spaceViewState,
+    joinState.haloViewState
+  ]);
+  useEffect(() => {
+    var _a;
+    return (_a = joinState.spaceInvitation) == null ? void 0 : _a.subscribe({
+      onAuthenticating: () => dispatch({
+        type: "authenticate invitation",
+        from: "space"
+      }),
+      onCancelled: () => dispatch({
+        type: "cancelled invitation",
+        from: "space"
+      }),
+      onConnected: () => dispatch({
+        type: "connect invitation",
+        from: "space"
+      }),
+      onError: () => dispatch({
+        type: "fail invitation",
+        from: "space"
+      }),
+      onSuccess: () => dispatch({
+        type: "accepted invitation",
+        from: "space"
+      }),
+      onTimeout: () => dispatch({
+        type: "timeout invitation",
+        from: "space"
+      })
+    });
+  }, [
+    joinState.spaceInvitation
+  ]);
+  useEffect(() => {
+    var _a;
+    return (_a = joinState.haloInvitation) == null ? void 0 : _a.subscribe({
+      onAuthenticating: () => dispatch({
+        type: "authenticate invitation",
+        from: "halo"
+      }),
+      onCancelled: () => dispatch({
+        type: "cancelled invitation",
+        from: "halo"
+      }),
+      onConnected: () => dispatch({
+        type: "connect invitation",
+        from: "halo"
+      }),
+      onError: () => dispatch({
+        type: "fail invitation",
+        from: "halo"
+      }),
+      onSuccess: () => dispatch({
+        type: "accepted invitation",
+        from: "halo"
+      }),
+      onTimeout: () => dispatch({
+        type: "timeout invitation",
+        from: "halo"
+      })
+    });
+  }, [
+    joinState.haloInvitation
+  ]);
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(JoinHeading, _extends23({}, {
+    mode,
+    titleId,
+    invitation: joinState.spaceInvitation,
+    onExit,
+    exitActionParent,
+    preventExit
+  })), /* @__PURE__ */ React27.createElement("div", {
+    role: "none",
+    className: "is-full overflow-hidden"
+  }, /* @__PURE__ */ React27.createElement("div", {
+    role: "none",
+    className: "flex is-[1300%]",
+    "aria-live": "polite"
+  }, /* @__PURE__ */ React27.createElement(IdentitySelector, _extends23({}, {
+    dispatch,
+    availableIdentities,
+    active: joinState.activeView === "identity selector"
+  })), /* @__PURE__ */ React27.createElement(AdditionMethodSelector, _extends23({}, {
+    dispatch,
+    availableIdentities,
+    active: joinState.activeView === "addition method selector"
+  })), /* @__PURE__ */ React27.createElement(IdentityInput, _extends23({}, {
+    dispatch,
+    active: joinState.activeView === "identity input" && joinState.additionMethod === "create identity",
+    method: "create identity"
+  })), /* @__PURE__ */ React27.createElement(IdentityInput, _extends23({}, {
+    dispatch,
+    active: joinState.activeView === "identity input" && joinState.additionMethod === "recover identity",
+    method: "recover identity"
+  })), /* @__PURE__ */ React27.createElement(InvitationInput, _extends23({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation input",
+    invitationType: "halo"
+  })), /* @__PURE__ */ React27.createElement(InvitationRescuer, _extends23({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation rescuer",
+    invitationType: "halo"
+  })), /* @__PURE__ */ React27.createElement(InvitationAuthenticator, _extends23({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation authenticator",
+    invitationType: "halo",
+    ...joinState.spaceInvitationAnnotation === "authentication failed" && {
+      failed: true
+    }
+  })), /* @__PURE__ */ React27.createElement(InvitationAccepted, _extends23({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation accepted",
+    invitationType: "halo",
+    doneActionParent,
+    onDone
+  })), /* @__PURE__ */ React27.createElement(IdentityAdded, _extends23({}, {
+    mode,
+    dispatch,
+    addedIdentity: joinState.selectedIdentity,
+    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__ */ 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__ */ React27.createElement(InvitationAuthenticator, _extends23({}, {
+    dispatch,
+    activeInvitation: joinState.spaceInvitation || true,
+    selectedIdentity: joinState.selectedIdentity,
+    active: joinState.activeView === "space invitation acceptor" && joinState.spaceViewState === "invitation authenticator",
+    invitationType: "space",
+    ...joinState.spaceInvitationAnnotation === "authentication failed" && {
+      failed: true
+    }
+  })), /* @__PURE__ */ React27.createElement(InvitationAccepted, _extends23({}, {
+    dispatch,
+    activeInvitation: joinState.spaceInvitation || true,
+    selectedIdentity: joinState.selectedIdentity,
+    active: joinState.activeView === "space invitation acceptor" && joinState.spaceViewState === "invitation accepted",
+    invitationType: "space",
+    doneActionParent,
+    onDone
+  })))));
+};
+
+// packages/apps/patterns/react-ui/src/panels/SpacePanel/SpacePanel.tsx
+import { CaretLeft as CaretLeft9, CaretRight as CaretRight8, Intersect, PlusCircle, UserPlus as UserPlus3 } from "phosphor-react";
+import React28, { cloneElement as cloneElement5, useReducer as useReducer3 } from "react";
+import { useClient as useClient7, useSpaceInvitations as useSpaceInvitations2, useSpaces } from "@dxos/react-client";
+import { Button as Button13, getSize as getSize14, mx as mx22, Tooltip as Tooltip2, 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, onClickMember, onShowAll, 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(Tooltip2, {
+    content: t("show all spaces label"),
+    zIndex: "z-50"
+  }, /* @__PURE__ */ React28.createElement(Button13, {
+    compact: true,
+    variant: "ghost",
+    onClick: onShowAll,
+    "data-testid": "show-all-spaces"
+  }, /* @__PURE__ */ React28.createElement(CaretLeft9, {
+    className: getSize14(4),
+    weight: "bold"
+  }))), /* @__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",
+    compact: true,
+    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,
+    onSelect: onClickMember
+  })));
+};
+var SpaceListView = ({ doneActionParent, onDone, onClickJoinSpace, onShowCurrent, titleId }) => {
+  const { t } = useTranslation17("os");
+  const client = useClient7();
+  const spaces = useSpaces();
+  const handleCreateSpace = async () => {
+    const space = await client.echo.createSpace();
+    onDone == null ? void 0 : onDone(space);
+  };
+  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: "grow font-system-medium"
+  }, t("all spaces label")), /* @__PURE__ */ React28.createElement(Tooltip2, {
+    content: t("show current space label"),
+    zIndex: "z-50"
+  }, /* @__PURE__ */ React28.createElement(Button13, {
+    compact: true,
+    variant: "ghost",
+    onClick: onShowCurrent,
+    "data-testid": "show-current-space"
+  }, /* @__PURE__ */ React28.createElement(CaretRight8, {
+    className: getSize14(4),
+    weight: "bold"
+  })))), /* @__PURE__ */ React28.createElement("div", {
+    role: "region",
+    className: mx22(defaultSurface, "rounded-be-md p-2")
+  }, /* @__PURE__ */ React28.createElement("ul", {
+    className: "flex flex-col gap-2"
+  }, spaces.map((space) => {
+    const key = space.key.toHex();
+    const listItem = /* @__PURE__ */ React28.createElement(SpaceListItem, {
+      key,
+      space,
+      onClick: () => onDone == null ? void 0 : onDone(space)
+    });
+    return doneActionParent ? /* @__PURE__ */ cloneElement5(doneActionParent, {
+      key
+    }, listItem) : listItem;
+  })), /* @__PURE__ */ React28.createElement(Button13, {
+    className: "is-full flex gap-2 mbs-2",
+    compact: true,
+    onClick: handleCreateSpace,
+    "data-testid": "create-space"
+  }, /* @__PURE__ */ React28.createElement("span", null, t("create space label")), /* @__PURE__ */ React28.createElement(PlusCircle, {
+    className: getSize14(4),
+    weight: "bold"
+  })), onClickJoinSpace && /* @__PURE__ */ React28.createElement(Button13, {
+    className: "is-full flex gap-2 mbs-2",
+    compact: true,
+    onClick: () => onClickJoinSpace == null ? void 0 : onClickJoinSpace(),
+    "data-testid": "join-space"
+  }, /* @__PURE__ */ React28.createElement("span", null, t("join space label")), /* @__PURE__ */ React28.createElement(Intersect, {
+    className: getSize14(4),
+    weight: "bold"
+  }))));
+};
+var SpacePanel = (props) => {
+  var _a;
+  const reducer = (state, action) => {
+    const nextState = {
+      ...state
+    };
+    switch (action.type) {
+      case "deselect space":
+        nextState.activeView = "space list";
+        break;
+      case "select space":
+        nextState.activeView = "current space";
+        break;
+    }
+    return nextState;
+  };
+  const [panelState, dispatch] = useReducer3(reducer, {
+    activeView: (_a = props.initialState) != null ? _a : "current space"
+  });
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, panelState.activeView === "current space" ? /* @__PURE__ */ React28.createElement(CurrentSpaceView, _extends24({}, props, {
+    onShowAll: () => dispatch({
+      type: "deselect space"
+    })
+  })) : /* @__PURE__ */ React28.createElement(SpaceListView, _extends24({}, props, {
+    onShowCurrent: () => dispatch({
+      type: "select space"
+    })
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
+function _extends25() {
+  _extends25 = 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 _extends25.apply(this, arguments);
+}
+var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true, onClickManageProfile, ...popoverProps }) => {
+  var _a, _b;
+  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 : ""
+    }),
+    slots: {
+      ...slots,
+      trigger: {
+        ...slots == null ? void 0 : slots.trigger,
+        className: mx23("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)
+      }
+    },
+    triggerIsInToolbar
+  }), /* @__PURE__ */ React29.createElement(IdentityPanel, _extends25({}, {
+    identity,
+    onClickManageProfile
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/composites/JoinDialog/JoinDialog.tsx
+import { Action, Cancel } from "@radix-ui/react-alert-dialog";
+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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends26.apply(this, arguments);
+}
+var JoinDialog = ({ slots, ...joinPanelProps }) => {
+  const titleId = useId5("joinDialog__title");
+  return /* @__PURE__ */ React30.createElement(PanelAlertDialog, _extends26({}, {
+    slots,
+    titleId
+  }), /* @__PURE__ */ React30.createElement(ThemeContext2.Provider, {
+    value: {
+      themeVariant: "os"
+    }
+  }, /* @__PURE__ */ React30.createElement(JoinPanel, _extends26({}, {
+    ...joinPanelProps,
+    titleId,
+    exitActionParent: /* @__PURE__ */ React30.createElement(Cancel, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React30.createElement(Action, {
+      asChild: true
+    })
+  }))));
+};
+
+// packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
+import React33, { useEffect as useEffect2, useState as useState6 } from "react";
+import { ShellDisplay, ShellLayout } from "@dxos/protocols/proto/dxos/iframe";
+import { useClient as useClient8, useSpace as useSpace3, useSpaces as useSpaces2 } 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, null));
+        },
+        ...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 client = useClient8();
+  const spaces = useSpaces2();
+  const [{ layout, invitationCode, spaceKey }, setLayout] = useState6({
+    layout: runtime.layout,
+    invitationCode: runtime.invitationCode,
+    spaceKey: runtime.spaceKey
+  });
+  const space = useSpace3(spaceKey);
+  useEffect2(() => {
+    return runtime.layoutUpdate.on((request) => setLayout(request));
+  }, []);
+  switch (layout) {
+    case ShellLayout.AUTH:
+      return /* @__PURE__ */ React33.createElement(JoinDialog, {
+        mode: "halo-only",
+        initialInvitationCode: invitationCode,
+        onDone: async () => {
+          var _a;
+          const space2 = (_a = spaces[0]) != null ? _a : await client.echo.createSpace();
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            spaceKey: space2.key
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        }
+      });
+    case ShellLayout.CURRENT_SPACE:
+    case ShellLayout.SPACE_LIST:
+      return /* @__PURE__ */ React33.createElement(SpaceDialog, {
+        space,
+        initialState: layout === ShellLayout.SPACE_LIST ? "space list" : "current space",
+        createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
+        onClickJoinSpace: () => runtime.setLayout(ShellLayout.JOIN_SPACE, {
+          spaceKey: space == null ? void 0 : space.key
+        }),
+        onClickMember: () => runtime.setLayout(ShellLayout.DEVICES_LIST, {
+          spaceKey: space == null ? void 0 : space.key
+        }),
+        onDone: async (space2) => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            spaceKey: space2 ? space2.key : spaceKey
+          });
+          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,
+            spaceKey: runtime.spaceKey
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        }
+      });
+    case ShellLayout.DEVICES_LIST:
+      return /* @__PURE__ */ React33.createElement(DevicesDialog, {
+        createInvitationUrl: (invitationCode2) => `${origin}?haloInvitationCode=${invitationCode2}`,
+        onDone: async () => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            spaceKey: runtime.spaceKey
+          });
+          runtime.setLayout(ShellLayout.DEFAULT);
+        }
+      });
+    default:
+      return null;
+  }
 };
 
 // packages/apps/patterns/react-ui/src/translations/locales/en-US.ts
@@ -210,7 +2475,59 @@ __export(en_US_exports, {
 var os = {
   "manage profile label": "Manage identity",
   "identity offline description": "Offline",
-  "sidebar label": "DXOS sidebar"
+  "sidebar label": "DXOS sidebar",
+  "copy invitation code label": "Copy",
+  "open share panel label": "Share",
+  "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",
+  "add identity label": "Add",
+  "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.",
+  "recover identity label": "Use a seed phrase",
+  "recover identity description": "Enter your seed phrase to log in manually.",
+  "join identity label": "Use an authed device",
+  "join identity description": "Add this device to an identity you\u2019re already logged into on another device.",
+  "deselect identity label": "Back to identities",
+  "addition method selector title": "Add an identity to this device",
+  "new identity input label": "Add a display name",
+  "recover identity input label": "Type or paste your seed phrase",
+  "failed to create identity message": "Failed to create an identity.",
+  "failed to recover identity message": "Failed to recover an identity from the provided seed phrase.",
+  "failed to authenticate message": "Incorrect PIN.",
+  "identity added label": "Created identity & added to this device:",
+  "join space as identity heading": "<part>as </part><part><icon/><label>{{labelValue}}</label></part>",
+  "error status label": "Failed",
+  "timeout status label": "Timed out",
+  "cancelled status label": "Cancelled",
+  "init status label": "Ready to connect",
+  "connecting status label": "Connecting\u2026",
+  "connected status label": "Enter confirmation PIN",
+  "authenticating status label": "Enter confirmation PIN",
+  "success status label": "Success",
+  "connect label": "Connect",
+  "reconnect label": "Reconnect",
+  "cancel label": "Cancel",
+  "done label": "Done",
+  "reset label": "Start over",
+  "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
@@ -218,14 +2535,53 @@ var osTranslations = {
   "en-US": en_US_exports
 };
 export {
+  DeviceList,
+  DevicesPanel,
+  IdentityListItem,
   IdentityPanel,
   IdentityPopover,
+  InvitationList,
+  InvitationListContainer,
+  InvitationListItem,
+  InvitationStatusAvatar,
+  JoinDialog,
+  JoinPanel,
+  PanelAlertDialog,
+  PanelDialog,
   PanelPopover,
+  PanelSeparator,
   PanelSidebarContext,
   PanelSidebarProvider,
+  Shell,
+  SpaceDialog,
+  SpaceListItem,
+  SpaceMemberList,
+  SpaceMemberListContainer,
+  SpacePanel,
+  activeBgColor,
+  activeStrokeColor,
+  activeTextColor,
+  cancelledBgColor,
+  cancelledStrokeColor,
+  cancelledTextColor,
   defaultArrow,
-  defaultPanel,
+  defaultDialogContent,
+  defaultOverlay,
+  defaultSurface,
+  errorBgColor,
+  errorStrokeColor,
+  errorTextColor,
+  inactiveBgColor,
+  inactiveStrokeColor,
+  inactiveTextColor,
   osTranslations,
+  resolvedBgColor,
+  resolvedStrokeColor,
+  resolvedTextColor,
+  subduedSurface,
+  successBgColor,
+  successStrokeColor,
+  successTextColor,
   useTogglePanelSidebar
 };
 //# sourceMappingURL=index.mjs.map