@dxos/react-ui 0.1.23 → 0.1.24

package/dist/lib/browser/index.mjs

@@ -4,21 +4,398 @@ 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/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, 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 }) => {
+  var _a;
+  const { t } = useTranslation("os");
+  return /* @__PURE__ */ React.createElement("li", {
+    className: "flex gap-2 items-center"
+  }, /* @__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/SpaceMemberList.tsx
+import React2 from "react";
+var SpaceMemberList = ({ spaceMembers }) => {
+  return /* @__PURE__ */ React2.createElement("ul", {
+    className: "flex flex-col gap-2"
+  }, spaceMembers.filter((spaceMember) => spaceMember.profile).map((spaceMember) => {
+    return /* @__PURE__ */ React2.createElement(IdentityListItem, {
+      key: spaceMember.identityKey.toHex(),
+      identity: spaceMember.profile,
+      presence: spaceMember.presence
+    });
+  }));
+};
+
+// packages/apps/patterns/react-ui/src/components/IdentityList/SpaceMemberListContainer.tsx
+import React3, { useMemo } from "react";
+import { useClient, useMembers } from "@dxos/react-client";
+var SpaceMemberListContainer = ({ spaceKey, includeSelf }) => {
+  const client = useClient();
+  const allUnsortedMembers = useMembers(spaceKey);
+  const spaceMembers = useMemo(() => includeSelf ? allUnsortedMembers.sort((a) => a.identityKey.equals(client.halo.profile.identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identityKey.equals(client.halo.profile.identityKey)), [
+    allUnsortedMembers
+  ]);
+  return /* @__PURE__ */ React3.createElement(SpaceMemberList, {
+    spaceMembers
+  });
+};
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
+import React4 from "react";
+import { Invitation as Invitation3 } from "@dxos/client";
+import { getSize } from "@dxos/react-components";
 
 // 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 = 4;
+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: 4,
+  strokeDasharray: `${segment - gap} ${2 * segment + gap}`
+};
+var InvitationStatusAvatar = ({ size = 10, status, haltedAt }) => {
+  const resolvedColor = resolvedStrokeColor(status);
+  const halted = status === Invitation3.State.CANCELLED || status === Invitation3.State.TIMEOUT || status === Invitation3.State.ERROR;
+  const cursor = invitationStatusValue.get(halted ? haltedAt : status);
+  return /* @__PURE__ */ React4.createElement("svg", {
+    viewBox: `0 0 ${svgSize} ${svgSize}`,
+    className: getSize(size)
+  }, [
+    ...Array(nSegments)
+  ].map((_, index) => /* @__PURE__ */ React4.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 React5, { useCallback } from "react";
+import { useInvitationStatus } from "@dxos/react-client";
+import { Button, getSize as getSize2, mx, 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 { cancel, status, haltedAt, invitationCode, authenticationCode } = useInvitationStatus(invitation);
+  const statusValue = (_a = invitationStatusValue.get(status)) != null ? _a : 0;
+  const isCancellable = statusValue < 4 && statusValue >= 0;
+  const showShare = statusValue < 3 && statusValue >= 0;
+  const showPin = statusValue === 3;
+  const handleClickRemove = useCallback(() => onClickRemove(invitation), [
+    invitation,
+    onClickRemove
+  ]);
+  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
+  const handleCLickCopy = useCallback(() => {
+    if (invitationUrl) {
+      void navigator.clipboard.writeText(invitationUrl);
+    }
+  }, [
+    invitationUrl
+  ]);
+  return /* @__PURE__ */ React5.createElement(AccordionPrimitive.Item, {
+    value
+  }, /* @__PURE__ */ React5.createElement(AccordionPrimitive.Header, {
+    className: "flex gap-2 items-center"
+  }, /* @__PURE__ */ React5.createElement(InvitationStatusAvatar, _extends3({}, {
+    status,
+    haltedAt
+  })), showShare && invitationUrl ? /* @__PURE__ */ React5.createElement(AccordionPrimitive.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Button, {
+    className: "grow flex gap-1"
+  }, /* @__PURE__ */ React5.createElement("span", null, t("open share panel label")), /* @__PURE__ */ React5.createElement(QrCode, {
+    className: getSize2(4),
+    weight: "bold"
+  }))) : showPin ? /* @__PURE__ */ React5.createElement("p", {
+    className: "grow text-xl text-center text-success-500 dark:text-success-300 font-mono"
+  }, authenticationCode) : /* @__PURE__ */ React5.createElement("span", {
+    role: "none",
+    className: "grow"
+  }), isCancellable ? /* @__PURE__ */ React5.createElement(Button, {
+    variant: "ghost",
+    compact: true,
+    className: "flex gap-1",
+    onClick: cancel
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, t("cancel invitation label")), /* @__PURE__ */ React5.createElement(ProhibitInset, {
+    className: getSize2(4),
+    weight: "bold"
+  })) : /* @__PURE__ */ React5.createElement(Button, {
+    variant: "ghost",
+    compact: true,
+    className: "flex gap-1",
+    onClick: handleClickRemove
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, t("remove invitation label")), /* @__PURE__ */ React5.createElement(X, {
+    className: getSize2(4),
+    weight: "bold"
+  }))), showShare && invitationUrl && /* @__PURE__ */ React5.createElement(AccordionPrimitive.Content, null, /* @__PURE__ */ React5.createElement(Button, {
+    className: "flex gap-2 is-full p-2",
+    onClick: handleCLickCopy
+  }, /* @__PURE__ */ React5.createElement(QRCodeSVG, {
+    bgColor: "transparent",
+    fgColor: "currentColor",
+    value: invitationUrl,
+    className: mx("grow aspect-square is-24 bs-auto")
+  }), /* @__PURE__ */ React5.createElement("span", {
+    className: "pli-1"
+  }, t("copy invitation code label"), /* @__PURE__ */ React5.createElement(Copy, {
+    className: mx(getSize2(4), "inline mis-1"),
+    weight: "bold"
+  })))));
+};
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationListContainer.tsx
+import React7, { useCallback as useCallback2 } from "react";
+import { useSpace, useSpaceInvitations } from "@dxos/react-client";
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationList.tsx
+import { Root as AccordionRoot } from "@radix-ui/react-accordion";
+import React6 from "react";
+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 }) => {
+  return /* @__PURE__ */ React6.createElement(AccordionRoot, {
+    type: "single",
+    collapsible: true
+  }, invitations.map((invitation, index) => {
+    var _a, _b;
+    const value = (_b = (_a = invitation.invitation) == null ? void 0 : _a.invitationId) != null ? _b : `inv_${index}`;
+    return /* @__PURE__ */ React6.createElement(InvitationListItem, _extends4({
+      key: value,
+      value,
+      invitation
+    }, invitationProps));
+  }));
+};
+
+// 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__ */ React7.createElement(InvitationList, _extends5({
+    invitations
+  }, {
+    onClickRemove,
+    createInvitationUrl
+  }));
+};
+
+// packages/apps/patterns/react-ui/src/components/PanelSeparator/PanelSeparator.tsx
+import React8 from "react";
+import { mx as mx2 } 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__ */ React8.createElement("span", _extends6({
+    role: "none"
+  }, props, {
+    className: mx2("block bs-px mlb-1 bg-neutral-800/10 dark:bg-neutral-200/10", className)
+  }));
+};
+
+// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
+import React24 from "react";
+import { Avatar as Avatar7, mx as mx16 } from "@dxos/react-components";
+
 // packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
-function _extends() {
-  _extends = Object.assign || function(target) {
+import React9 from "react";
+import { mx as mx3, Popover } from "@dxos/react-components";
+function _extends7() {
+  _extends7 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -29,25 +406,25 @@ function _extends() {
     }
     return target;
   };
-  return _extends.apply(this, arguments);
+  return _extends7.apply(this, arguments);
 }
 var PanelPopover = ({ slots, children, ...popoverProps }) => {
   var _a, _b, _c;
-  return /* @__PURE__ */ React.createElement(Popover, _extends({
+  return /* @__PURE__ */ React9.createElement(Popover, _extends7({
     slots: {
       arrow: {
         ...slots == null ? void 0 : slots.arrow,
-        className: mx(defaultArrow, (_a = slots == null ? void 0 : slots.arrow) == null ? void 0 : _a.className)
+        className: mx3(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: mx3(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: mx3("", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
       },
       ...slots
     }
@@ -56,10 +433,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 React10, { createContext, useCallback as useCallback3, useContext, useState } from "react";
+import { defaultOverlay, mx as mx4, useMediaQuery, useTranslation as useTranslation3 } from "@dxos/react-components";
+function _extends8() {
+  _extends8 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -70,7 +447,7 @@ function _extends2() {
     }
     return target;
   };
-  return _extends2.apply(this, arguments);
+  return _extends8.apply(this, arguments);
 }
 var PanelSidebarContext = /* @__PURE__ */ createContext({
   displayState: "hide",
@@ -79,16 +456,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 } = useTranslation3("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 +487,1300 @@ var PanelSidebarProvider = ({ children, inlineStart, slots }) => {
     }, 0);
   };
   const setDisplayState = (displayState2) => displayState2 === "show" ? internalShow() : internalHide();
-  return /* @__PURE__ */ React2.createElement(PanelSidebarContext.Provider, {
+  return /* @__PURE__ */ React10.createElement(PanelSidebarContext.Provider, {
     value: {
       setDisplayState,
       displayState
     }
-  }, /* @__PURE__ */ React2.createElement(DialogPrimitive.Root, {
+  }, /* @__PURE__ */ React10.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__ */ React10.createElement(DialogPrimitive.Content, _extends8({
+    onOpenAutoFocus: (event) => isLg && event.preventDefault(),
+    onCloseAutoFocus: (event) => isLg && event.preventDefault()
+  }, slots == null ? void 0 : slots.content, {
+    className: mx4("fixed block-start-0 block-end-0 is-sidebar z-50 overscroll-contain overflow-x-hidden overflow-y-auto", "transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-0" : "-inline-start-sidebar", (_a = slots == null ? void 0 : slots.content) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React10.createElement(DialogPrimitive.Title, {
     className: "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__ */ React10.createElement(DialogPrimitive.Overlay, {
+    className: mx4(defaultOverlay, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
     onClick: internalHide
-  }), /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx2("bs-full transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-[272px]" : "pis-0")
-  }, children)));
+  }), /* @__PURE__ */ React10.createElement("div", _extends8({
+    role: "none"
+  }, slots == null ? void 0 : slots.main, {
+    className: mx4("transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-sidebar" : "pis-0", (_c = slots == null ? void 0 : slots.main) == null ? void 0 : _c.className)
+  }), children)));
+};
+
+// packages/apps/patterns/react-ui/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import React11 from "react";
+import { mx as mx5 } from "@dxos/react-components";
+function _extends9() {
+  _extends9 = Object.assign || function(target) {
+    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 _extends9.apply(this, arguments);
+}
+var PanelAlertDialog = ({ titleId, slots = {}, children }) => {
+  var _a, _b;
+  return /* @__PURE__ */ React11.createElement(AlertDialog.Root, _extends9({
+    defaultOpen: true
+  }, slots.root), slots.trigger && /* @__PURE__ */ React11.createElement(AlertDialog.Trigger, _extends9({}, slots.trigger)), /* @__PURE__ */ React11.createElement(AlertDialog.Overlay, _extends9({}, slots.overlay, {
+    className: mx5("fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8", (_a = slots.overlay) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React11.createElement(AlertDialog.Content, _extends9({
+    onEscapeKeyDown: (event) => event.preventDefault()
+  }, slots.content, {
+    "aria-labelledby": titleId,
+    className: mx5("is-full min-is-[260px] max-is-[320px] shadow-md backdrop-blur-md", (_b = slots.content) == null ? void 0 : _b.className)
+  }), children)));
 };
 
 // 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 React12 from "react";
+import { useClient as useClient2 } from "@dxos/react-client";
+import { Avatar as Avatar2, Button as Button2, ThemeContext, useTranslation as useTranslation4 } from "@dxos/react-components";
 var IdentityPanel = ({ identity, onClickManageProfile }) => {
   var _a;
-  const { t } = useTranslation2("os");
-  const client = useClient();
+  const { t } = useTranslation4("os");
+  const client = useClient2();
   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__ */ React12.createElement(ThemeContext.Provider, {
     value: {
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React12.createElement("div", {
     className: "flex flex-col gap-2 justify-center items-center"
-  }, /* @__PURE__ */ React3.createElement(Avatar, {
+  }, /* @__PURE__ */ React12.createElement(Avatar2, {
     size: 16,
     variant: "circle",
     fallbackValue: identity.identityKey.toHex(),
     label: (_a = identity.displayName) != null ? _a : ""
-  }), /* @__PURE__ */ React3.createElement(Button, {
+  }), /* @__PURE__ */ React12.createElement(Button2, {
     compact: true,
     onClick: onClickManageProfile != null ? onClickManageProfile : defaultManageProfile,
     className: "is-full"
   }, t("manage profile label"))));
 };
 
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
+import React23, { useEffect, useReducer } from "react";
+import { InvitationEncoder as InvitationEncoder2 } from "@dxos/client";
+import { log } from "@dxos/log";
+import { useClient as useClient5, useIdentity } from "@dxos/react-client";
+import { useId as useId3 } from "@dxos/react-components";
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinHeading.tsx
+import { ProhibitInset as ProhibitInset2 } from "phosphor-react";
+import React13, { cloneElement, forwardRef } from "react";
+import { useSpace as useSpace2 } from "@dxos/react-client";
+import { Avatar as Avatar3, Button as Button3, getSize as getSize3, Heading, mx as mx6, Trans, useId, useTranslation as useTranslation5 } from "@dxos/react-components";
+function _extends10() {
+  _extends10 = Object.assign || function(target) {
+    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 JoinHeading = /* @__PURE__ */ forwardRef(({ titleId, invitation, onExit, exitActionParent }, ref) => {
+  var _a, _b, _c, _d, _e;
+  const { t } = useTranslation5("os");
+  const space = useSpace2((_a = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _a.spaceKey);
+  const spaceTitle = (_b = space == null ? void 0 : space.properties.name) != null ? _b : "(Space not available)";
+  const nameId = useId("spaceDisplayName");
+  const exitButton = /* @__PURE__ */ React13.createElement(Button3, _extends10({
+    compact: true,
+    variant: "ghost"
+  }, onExit && {
+    onClick: onExit
+  }, {
+    className: "grow-0 shrink-0"
+  }), /* @__PURE__ */ React13.createElement(ProhibitInset2, {
+    className: getSize3(5)
+  }), /* @__PURE__ */ React13.createElement("span", {
+    className: "sr-only"
+  }, t("exit label")));
+  return /* @__PURE__ */ React13.createElement("div", {
+    role: "none",
+    className: mx6(subduedSurface, "p-2 rounded-bs-md"),
+    ref
+  }, /* @__PURE__ */ React13.createElement("div", {
+    role: "group",
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */ React13.createElement(Avatar3, {
+    fallbackValue: (_e = (_d = (_c = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _c.spaceKey) == null ? void 0 : _d.toHex()) != null ? _e : "",
+    labelId: nameId
+  }), /* @__PURE__ */ React13.createElement(Heading, {
+    level: 1,
+    className: "font-body font-normal text-base grow",
+    id: titleId
+  }, /* @__PURE__ */ React13.createElement(Trans, _extends10({}, {
+    defaults: t("join space heading"),
+    components: {
+      small: /* @__PURE__ */ React13.createElement("span", {
+        className: "block leading-none mbe-1 font-system-medium text-sm"
+      }),
+      large: /* @__PURE__ */ React13.createElement("span", {
+        className: "block leading-none",
+        id: nameId
+      })
+    },
+    values: {
+      spaceTitle
+    }
+  }))), exitActionParent ? /* @__PURE__ */ cloneElement(exitActionParent, {}, exitButton) : exitButton));
+});
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx
+import { CaretLeft, CaretRight, Plus, QrCode as QrCode2, Textbox } from "phosphor-react";
+import React15 from "react";
+import { Button as Button4, CompoundButton, getSize as getSize5, mx as mx8, useTranslation as useTranslation7 } from "@dxos/react-components";
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/ViewState.tsx
+import { CheckCircle, HourglassSimple, X as X2 } from "phosphor-react";
+import React14, { useMemo as useMemo2 } from "react";
+import { Invitation as Invitation4 } from "@dxos/client";
+import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client";
+import { mx as mx7, useTranslation as useTranslation6, Trans as Trans2, Avatar as Avatar4, useId as useId2, getSize as getSize4, strongShimmer } from "@dxos/react-components";
+function _extends11() {
+  _extends11 = Object.assign || function(target) {
+    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 stripe = mx7("rounded-full grow", getSize4(3));
+var ViewStateHeading = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ React14.createElement("h2", _extends11({}, props, {
+    className: mx7("font-system-medium text-sm md:text-base mbe-1 mli-1 text-center", className)
+  }), children);
+};
+var PureViewStateInvitation = ({ halted, cursor, label, resolvedColor }) => {
+  const labelId = useId2("invitationState");
+  return /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: mx7(defaultSurface, "pli-2 pbs-2")
+  }, /* @__PURE__ */ React14.createElement("div", {
+    role: "status",
+    "aria-labelledby": labelId,
+    className: "flex gap-2 items-center mlb-1"
+  }, /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: mx7(stripe, !halted && cursor === 1 && strongShimmer, cursor === 2 ? halted ? resolvedColor : activeBgColor : cursor > 1 ? resolvedColor : inactiveBgColor)
+  }), /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: mx7(stripe, !halted && cursor === 3 && strongShimmer, cursor === 3 ? halted ? resolvedColor : activeBgColor : cursor > 3 ? resolvedColor : inactiveBgColor)
+  }), /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: mx7(stripe, cursor > 3 ? halted ? resolvedColor : resolvedColor : inactiveBgColor)
+  })), /* @__PURE__ */ React14.createElement(ViewStateHeading, {
+    id: labelId,
+    className: "mbs-2 flex justify-center items-center gap-2"
+  }, label));
+};
+var ViewStateInvitationStatus = ({ activeInvitation }) => {
+  const { t } = useTranslation6("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__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(X2, {
+        weight: "bold",
+        className: mx7(getSize4(4), "text-error-600 dark:text-error-400")
+      }), /* @__PURE__ */ React14.createElement("span", null, t("error status label")))
+    ],
+    [
+      Invitation4.State.TIMEOUT,
+      /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(HourglassSimple, {
+        weight: "fill",
+        className: mx7(getSize4(4), "text-warning-600 dark:text-warning-400")
+      }), /* @__PURE__ */ React14.createElement("span", null, t("timeout status label")))
+    ],
+    [
+      Invitation4.State.CANCELLED,
+      /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(X2, {
+        weight: "bold",
+        className: mx7(getSize4(4), "text-warning-600 dark:text-warning-400")
+      }), /* @__PURE__ */ React14.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__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(CheckCircle, {
+        weight: "fill",
+        className: mx7(getSize4(4), "text-success-600 dark:text-success-400")
+      }), /* @__PURE__ */ React14.createElement("span", null, t("success status label")))
+    ]
+  ]), [
+    t
+  ]);
+  return /* @__PURE__ */ React14.createElement(PureViewStateInvitation, _extends11({}, {
+    label: statusLabelMap.get(status),
+    resolvedColor,
+    cursor,
+    halted
+  }));
+};
+var ViewState = ({ active, children, className, dispatch, selectedIdentity, activeInvitation, ...props }) => {
+  var _a;
+  const { t } = useTranslation6("os");
+  const identityLabel = useId2("selectedIdentityLabel");
+  return /* @__PURE__ */ React14.createElement("div", _extends11({
+    role: "none"
+  }, props, !active && {
+    "aria-hidden": true
+  }, {
+    className: mx7("is-[50%] flex flex-col", active ? "order-2" : "order-4", className)
+  }), selectedIdentity && /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: mx7(subduedSurface, "flex-none flex items-center gap-1 pli-2 pbe-1.5")
+  }, /* @__PURE__ */ React14.createElement(Trans2, _extends11({}, {
+    defaults: t("join space as identity heading"),
+    components: {
+      icon: /* @__PURE__ */ React14.createElement(Avatar4, {
+        size: 4,
+        fallbackValue: selectedIdentity === true ? "" : selectedIdentity.identityKey.toHex(),
+        labelId: identityLabel
+      }),
+      label: /* @__PURE__ */ React14.createElement("span", {
+        id: identityLabel
+      }),
+      part: /* @__PURE__ */ React14.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__ */ React14.createElement(PureViewStateInvitation, _extends11({}, {
+    halted: false,
+    status: Invitation4.State.INIT,
+    label: t("invitation input label"),
+    cursor: 0,
+    resolvedColor: inactiveBgColor
+  })) : /* @__PURE__ */ React14.createElement(ViewStateInvitationStatus, _extends11({}, {
+    activeInvitation
+  }))), /* @__PURE__ */ React14.createElement("div", {
+    role: "region",
+    className: mx7(defaultSurface, "rounded-be-md grow shrink-0 flex flex-col gap-1 p-2")
+  }, children));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx
+function _extends12() {
+  _extends12 = Object.assign || function(target) {
+    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 AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation7("os");
+  const sharedButtonProps = {
+    disabled,
+    after: /* @__PURE__ */ React15.createElement(CaretRight, {
+      className: getSize5(4),
+      weight: "bold"
+    }),
+    slots: {
+      label: {
+        className: "text-sm"
+      }
+    }
+  };
+  return /* @__PURE__ */ React15.createElement(ViewState, _extends12({}, viewStateProps), /* @__PURE__ */ React15.createElement(ViewStateHeading, null, t("addition method selector title")), /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1 grow"
+  }, /* @__PURE__ */ React15.createElement(CompoundButton, _extends12({}, sharedButtonProps, {
+    description: t("create identity description"),
+    before: /* @__PURE__ */ React15.createElement(Plus, {
+      className: getSize5(6)
+    }),
+    onClick: () => dispatch({
+      type: "select addition method",
+      method: "create identity"
+    }),
+    "data-autofocus": "addition method selector"
+  }), t("create identity label")), /* @__PURE__ */ React15.createElement(CompoundButton, _extends12({}, sharedButtonProps, {
+    description: t("join identity description"),
+    before: /* @__PURE__ */ React15.createElement(QrCode2, {
+      className: getSize5(6)
+    }),
+    onClick: () => dispatch({
+      type: "select addition method",
+      method: "accept device invitation"
+    })
+  }), t("join identity label")), /* @__PURE__ */ React15.createElement(CompoundButton, _extends12({}, sharedButtonProps, {
+    description: t("recover identity description"),
+    before: /* @__PURE__ */ React15.createElement(Textbox, {
+      className: getSize5(6)
+    }),
+    onClick: () => dispatch({
+      type: "select addition method",
+      method: "recover identity"
+    })
+  }), t("recover identity label"))), /* @__PURE__ */ React15.createElement(Button4, {
+    disabled: disabled || availableIdentities.length < 1,
+    onClick: () => dispatch({
+      type: "deselect identity"
+    })
+  }, /* @__PURE__ */ React15.createElement(CaretLeft, {
+    className: getSize5(4),
+    weight: "bold"
+  }), /* @__PURE__ */ React15.createElement("span", {
+    className: "grow"
+  }, t("deselect identity label")), /* @__PURE__ */ React15.createElement(CaretRight, {
+    className: mx8(getSize5(4), "invisible"),
+    weight: "bold"
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityAdded.tsx
+import { CaretLeft as CaretLeft2, CaretRight as CaretRight2 } from "phosphor-react";
+import React16 from "react";
+import { Avatar as Avatar5, Button as Button5, getSize as getSize6, mx as mx9, useTranslation as useTranslation8 } from "@dxos/react-components";
+function _extends13() {
+  _extends13 = Object.assign || function(target) {
+    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 _extends13.apply(this, arguments);
+}
+var IdentityAdded = ({ addedIdentity, ...viewStateProps }) => {
+  var _a, _b, _c;
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation8("os");
+  return /* @__PURE__ */ React16.createElement(ViewState, _extends13({}, viewStateProps), /* @__PURE__ */ React16.createElement(ViewStateHeading, null, t("identity added label")), /* @__PURE__ */ React16.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col items-center justify-center text-center gap-2"
+  }, /* @__PURE__ */ React16.createElement(Avatar5, {
+    size: 20,
+    fallbackValue: (_a = addedIdentity == null ? void 0 : addedIdentity.identityKey.toHex()) != null ? _a : "",
+    label: /* @__PURE__ */ React16.createElement("p", {
+      className: mx9("text-lg", !(addedIdentity == null ? void 0 : addedIdentity.displayName) && "font-mono")
+    }, (_c = (_b = addedIdentity == null ? void 0 : addedIdentity.displayName) != null ? _b : addedIdentity == null ? void 0 : addedIdentity.identityKey.truncate()) != null ? _c : "\xA0"),
+    variant: "circle",
+    status: "active"
+  })), /* @__PURE__ */ React16.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React16.createElement(Button5, {
+    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__ */ React16.createElement(CaretLeft2, {
+    weight: "bold",
+    className: mx9(getSize6(2), "invisible")
+  }), /* @__PURE__ */ React16.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React16.createElement(CaretRight2, {
+    weight: "bold",
+    className: getSize6(4)
+  })), /* @__PURE__ */ React16.createElement(Button5, {
+    disabled,
+    onClick: () => dispatch({
+      type: "deselect identity"
+    }),
+    className: "flex items-center gap-2 pis-2 pie-4"
+  }, /* @__PURE__ */ React16.createElement(CaretLeft2, {
+    weight: "bold",
+    className: getSize6(4)
+  }), /* @__PURE__ */ React16.createElement("span", null, t("deselect identity label")))));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentitySelector.tsx
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { CaretLeft as CaretLeft3, CaretRight as CaretRight3, UserPlus } from "phosphor-react";
+import React17, { useCallback as useCallback4, useState as useState2 } from "react";
+import { Avatar as Avatar6, Button as Button6, themeVariantFocus, getSize as getSize7, mx as mx10, useTranslation as useTranslation9 } from "@dxos/react-components";
+function _extends14() {
+  _extends14 = Object.assign || function(target) {
+    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 IdentitySelector = ({ availableIdentities, ...viewStateProps }) => {
+  const { dispatch } = viewStateProps;
+  const disabled = !viewStateProps.active;
+  const { t } = useTranslation9("os");
+  const [activeIdentity, setActiveIdentity] = useState2(availableIdentities[0]);
+  const onValueChange = useCallback4((nextHex) => setActiveIdentity(availableIdentities.find((identity) => identity.identityKey.toHex() === nextHex) || activeIdentity), [
+    availableIdentities
+  ]);
+  return /* @__PURE__ */ React17.createElement(ViewState, _extends14({}, viewStateProps), /* @__PURE__ */ React17.createElement(ViewStateHeading, null, t("identity selector title")), /* @__PURE__ */ React17.createElement(RadioGroup.Root, {
+    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__ */ React17.createElement("label", {
+      htmlFor: inputId,
+      key: hex,
+      className: "flex items-center mbe-2 gap-2 cursor-pointer"
+    }, /* @__PURE__ */ React17.createElement(RadioGroup.Item, {
+      id: inputId,
+      "aria-labelledby": labelId,
+      value: hex,
+      className: mx10("peer relative w-4 h-4 rounded-full", "border border-transparent text-white", "radix-state-checked:bg-primary-600", "radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900", themeVariantFocus("os"))
+    }, /* @__PURE__ */ React17.createElement(RadioGroup.Indicator, {
+      className: "absolute inset-0 flex items-center justify-center leading-0"
+    }, /* @__PURE__ */ React17.createElement("div", {
+      className: "w-1.5 h-1.5 rounded-full bg-white"
+    }))), /* @__PURE__ */ React17.createElement(Avatar6, {
+      fallbackValue: hex,
+      labelId,
+      variant: "circle"
+    }), /* @__PURE__ */ React17.createElement("span", {
+      id: labelId,
+      className: mx10(!displayName && "font-mono")
+    }, (_a = displayName != null ? displayName : identityKey.truncate()) != null ? _a : ""));
+  })), /* @__PURE__ */ React17.createElement(Button6, {
+    disabled,
+    compact: true,
+    onClick: () => dispatch({
+      type: "add identity"
+    }),
+    className: "flex items-center gap-2 pli-2"
+  }, /* @__PURE__ */ React17.createElement("span", null, t("add identity label")), /* @__PURE__ */ React17.createElement(UserPlus, {
+    weight: "bold",
+    className: getSize7(3.5)
+  })), /* @__PURE__ */ React17.createElement(Button6, {
+    disabled: disabled || !activeIdentity,
+    className: "flex items-center gap-2 pli-2",
+    onClick: () => dispatch({
+      type: "select identity",
+      identity: activeIdentity
+    })
+  }, /* @__PURE__ */ React17.createElement(CaretLeft3, {
+    weight: "bold",
+    className: mx10(getSize7(4), "invisible")
+  }), /* @__PURE__ */ React17.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React17.createElement(CaretRight3, {
+    weight: "bold",
+    className: getSize7(4)
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityInput.tsx
+import { CaretLeft as CaretLeft4, CaretRight as CaretRight4 } from "phosphor-react";
+import React18, { useState as useState3 } from "react";
+import { useClient as useClient3 } from "@dxos/react-client";
+import { Button as Button7, getSize as getSize8, Input, mx as mx11, useTranslation as useTranslation10 } from "@dxos/react-components";
+function _extends15() {
+  _extends15 = Object.assign || function(target) {
+    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 IdentityInput = ({ method, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation10("os");
+  const [inputValue, setInputValue] = useState3("");
+  const client = useClient3();
+  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__ */ React18.createElement(ViewState, _extends15({}, viewStateProps), /* @__PURE__ */ React18.createElement(Input, _extends15({
+    disabled,
+    label: /* @__PURE__ */ React18.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
+  })), /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), /* @__PURE__ */ React18.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React18.createElement(Button7, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2 order-2",
+    onClick: handleNext
+  }, /* @__PURE__ */ React18.createElement(CaretLeft4, {
+    weight: "bold",
+    className: mx11(getSize8(2), "invisible")
+  }), /* @__PURE__ */ React18.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React18.createElement(CaretRight4, {
+    weight: "bold",
+    className: getSize8(4)
+  })), /* @__PURE__ */ React18.createElement(Button7, {
+    disabled,
+    onClick: () => dispatch({
+      type: "add identity"
+    }),
+    className: "flex items-center gap-2 pis-2 pie-4"
+  }, /* @__PURE__ */ React18.createElement(CaretLeft4, {
+    weight: "bold",
+    className: getSize8(4)
+  }), /* @__PURE__ */ React18.createElement("span", null, t("back label")))));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationAccepted.tsx
+import { CaretLeft as CaretLeft5, Check } from "phosphor-react";
+import React19, { cloneElement as cloneElement2 } from "react";
+import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client";
+import { Button as Button8, getSize as getSize9, mx as mx12, useTranslation as useTranslation11 } from "@dxos/react-components";
+function _extends16() {
+  _extends16 = Object.assign || function(target) {
+    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 PureInvitationAcceptedContent = ({ onDone, result, invitationType, doneActionParent, active }) => {
+  const disabled = !active;
+  const { t } = useTranslation11("os");
+  const doneButton = /* @__PURE__ */ React19.createElement(Button8, _extends16({}, onDone && {
+    onClick: () => onDone(result)
+  }, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2",
+    "data-autofocus": `${invitationType} invitation acceptor; invitation accepted`
+  }), /* @__PURE__ */ React19.createElement(CaretLeft5, {
+    weight: "bold",
+    className: mx12(getSize9(2), "invisible")
+  }), /* @__PURE__ */ React19.createElement("span", {
+    className: "grow"
+  }, t("done label")), /* @__PURE__ */ React19.createElement(Check, {
+    weight: "bold",
+    className: getSize9(4)
+  }));
+  return doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneButton) : doneButton;
+};
+var InvitationAcceptedContent = (props) => {
+  const { result } = useInvitationStatus3(props.activeInvitation);
+  return /* @__PURE__ */ React19.createElement(PureInvitationAcceptedContent, _extends16({}, props, {
+    result
+  }));
+};
+var InvitationAccepted = (props) => {
+  const { invitationType: _invitationType, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
+  const { activeInvitation } = viewStateProps;
+  return /* @__PURE__ */ React19.createElement(ViewState, _extends16({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React19.createElement(PureInvitationAcceptedContent, _extends16({}, props, {
+    result: null
+  })) : /* @__PURE__ */ React19.createElement(InvitationAcceptedContent, _extends16({}, props)));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationInput.tsx
+import { CaretLeft as CaretLeft6, CaretRight as CaretRight5 } from "phosphor-react";
+import React20, { useState as useState4 } from "react";
+import { InvitationEncoder } from "@dxos/client";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { Button as Button9, getSize as getSize10, Input as Input2, mx as mx13, useTranslation as useTranslation12 } from "@dxos/react-components";
+function _extends17() {
+  _extends17 = Object.assign || function(target) {
+    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 InvitationInput = ({ invitationType, ...viewStateProps }) => {
+  const client = useClient4();
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation12("os");
+  const [inputValue, setInputValue] = useState4("");
+  const handleNext = () => dispatch({
+    type: "connecting invitation",
+    from: invitationType,
+    invitation: client[invitationType === "halo" ? "halo" : "echo"].acceptInvitation(InvitationEncoder.decode(inputValue))
+  });
+  return /* @__PURE__ */ React20.createElement(ViewState, _extends17({}, viewStateProps), /* @__PURE__ */ React20.createElement(Input2, {
+    disabled,
+    label: /* @__PURE__ */ React20.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()
+      }
+    }
+  }), /* @__PURE__ */ React20.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), /* @__PURE__ */ React20.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React20.createElement(Button9, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2 order-2",
+    onClick: handleNext
+  }, /* @__PURE__ */ React20.createElement(CaretLeft6, {
+    weight: "bold",
+    className: mx13(getSize10(2), "invisible")
+  }), /* @__PURE__ */ React20.createElement("span", {
+    className: "grow"
+  }, t("continue label")), /* @__PURE__ */ React20.createElement(CaretRight5, {
+    weight: "bold",
+    className: getSize10(4)
+  })), /* @__PURE__ */ React20.createElement(Button9, {
+    disabled,
+    onClick: () => dispatch({
+      type: "add identity"
+    }),
+    className: "flex items-center gap-2 pis-2 pie-4"
+  }, /* @__PURE__ */ React20.createElement(CaretLeft6, {
+    weight: "bold",
+    className: getSize10(4)
+  }), /* @__PURE__ */ React20.createElement("span", null, t("back label")))));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationRescuer.tsx
+import { ArrowsClockwise, CaretLeft as CaretLeft7, CaretRight as CaretRight6 } from "phosphor-react";
+import React21 from "react";
+import { Invitation as Invitation5 } from "@dxos/client";
+import { useInvitationStatus as useInvitationStatus4 } from "@dxos/react-client";
+import { Button as Button10, getSize as getSize11, mx as mx14, useTranslation as useTranslation13 } from "@dxos/react-components";
+function _extends18() {
+  _extends18 = Object.assign || function(target) {
+    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 InvitationActions = ({ activeInvitation, disabled, dispatch, invitationType }) => {
+  const { status, cancel } = useInvitationStatus4(activeInvitation);
+  const { t } = useTranslation13("os");
+  switch (status) {
+    case Invitation5.State.CONNECTING:
+      return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", {
+        role: "none",
+        className: "grow"
+      }), /* @__PURE__ */ React21.createElement("div", {
+        className: "flex gap-2"
+      }, /* @__PURE__ */ React21.createElement(Button10, {
+        disabled: true,
+        className: "grow flex items-center gap-2 pli-2 order-2"
+      }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+        weight: "bold",
+        className: mx14(getSize11(2), "invisible")
+      }), /* @__PURE__ */ React21.createElement("span", {
+        className: "grow"
+      }, t("next label")), /* @__PURE__ */ React21.createElement(CaretRight6, {
+        weight: "bold",
+        className: getSize11(4)
+      })), /* @__PURE__ */ React21.createElement(Button10, {
+        disabled,
+        className: "flex items-center gap-2 pis-2 pie-4",
+        onClick: cancel,
+        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`
+      }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+        weight: "bold",
+        className: getSize11(4)
+      }), /* @__PURE__ */ React21.createElement("span", null, t("cancel label")))));
+    case Invitation5.State.TIMEOUT:
+    case Invitation5.State.CANCELLED:
+    case Invitation5.State.ERROR:
+    default:
+      return /* @__PURE__ */ React21.createElement(Button10, {
+        disabled,
+        className: "grow flex items-center gap-2 pli-2",
+        onClick: () => dispatch({
+          type: "reset invitation",
+          from: invitationType
+        }),
+        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`
+      }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+        weight: "bold",
+        className: mx14(getSize11(5), "invisible")
+      }), /* @__PURE__ */ React21.createElement("span", {
+        className: "grow"
+      }, t("reset label")), /* @__PURE__ */ React21.createElement(ArrowsClockwise, {
+        weight: "bold",
+        className: getSize11(5)
+      }));
+  }
+};
+var InvitationRescuer = ({ invitationType, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch, activeInvitation } = viewStateProps;
+  const { t } = useTranslation13("os");
+  return /* @__PURE__ */ React21.createElement(ViewState, _extends18({}, viewStateProps), activeInvitation === true || !activeInvitation ? /* @__PURE__ */ React21.createElement(Button10, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2",
+    "data-autofocus": "space invitation acceptor; invitation rescuer"
+  }, /* @__PURE__ */ React21.createElement(CaretLeft7, {
+    weight: "bold",
+    className: mx14(getSize11(5), "invisible")
+  }), /* @__PURE__ */ React21.createElement("span", {
+    className: "grow"
+  }, t("connect label")), /* @__PURE__ */ React21.createElement(ArrowsClockwise, {
+    weight: "bold",
+    className: getSize11(5)
+  })) : /* @__PURE__ */ React21.createElement(InvitationActions, _extends18({}, {
+    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 React22, { useCallback as useCallback5, useState as useState5 } from "react";
+import { useInvitationStatus as useInvitationStatus5 } from "@dxos/react-client";
+import { Button as Button11, getSize as getSize12, Input as Input3, mx as mx15, useTranslation as useTranslation14 } from "@dxos/react-components";
+function _extends19() {
+  _extends19 = Object.assign || function(target) {
+    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 pinLength = 6;
+var PureInvitationAuthenticatorContent = ({ disabled, failed, dispatch, invitationType, onChange, onAuthenticate }) => {
+  const { t } = useTranslation14("os");
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Input3, _extends19({
+    label: t("pin input label"),
+    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")
+  })), /* @__PURE__ */ React22.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), /* @__PURE__ */ React22.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React22.createElement(Button11, {
+    disabled,
+    className: "grow flex items-center gap-2 pli-2 order-2",
+    onClick: onAuthenticate,
+    "data-autofocus-pinlength": invitationType
+  }, /* @__PURE__ */ React22.createElement(CaretLeft8, {
+    weight: "bold",
+    className: mx15(getSize12(2), "invisible")
+  }), /* @__PURE__ */ React22.createElement("span", {
+    className: "grow"
+  }, t("next label")), /* @__PURE__ */ React22.createElement(CaretRight7, {
+    weight: "bold",
+    className: getSize12(4)
+  })), /* @__PURE__ */ React22.createElement(Button11, {
+    disabled,
+    className: "flex items-center gap-2 pis-2 pie-4",
+    onClick: () => dispatch({
+      type: "cancel invitation",
+      from: invitationType
+    })
+  }, /* @__PURE__ */ React22.createElement(CaretLeft8, {
+    weight: "bold",
+    className: getSize12(4)
+  }), /* @__PURE__ */ React22.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__ */ React22.createElement(PureInvitationAuthenticatorContent, _extends19({}, {
+    disabled,
+    failed,
+    dispatch,
+    invitationType,
+    onChange,
+    onAuthenticate
+  }));
+};
+var InvitationAuthenticator = ({ invitationType, failed, ...viewStateProps }) => {
+  const disabled = !viewStateProps.active;
+  const { activeInvitation, dispatch } = viewStateProps;
+  return /* @__PURE__ */ React22.createElement(ViewState, _extends19({}, viewStateProps), !activeInvitation || activeInvitation === true ? /* @__PURE__ */ React22.createElement(PureInvitationAuthenticatorContent, _extends19({}, {
+    disabled,
+    failed,
+    dispatch,
+    invitationType,
+    onChange: () => {
+    },
+    onAuthenticate: () => {
+    }
+  })) : /* @__PURE__ */ React22.createElement(InvitationAuthenticatorContent, _extends19({}, {
+    disabled,
+    failed,
+    invitation: activeInvitation,
+    dispatch,
+    invitationType
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
+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 JoinPanel = ({ initialInvitationCode, titleId: propsTitleId, exitActionParent, onExit, doneActionParent, onDone }) => {
+  const client = useClient5();
+  const internalTitleId = useId3("joinPanel__title");
+  const titleId = propsTitleId != null ? propsTitleId : internalTitleId;
+  const identity = useIdentity();
+  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.echo.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.debug("[join panel reducer]", {
+      action,
+      nextState
+    }, {
+      file: "JoinPanel.tsx",
+      line: 123,
+      scope: void 0,
+      callSite: (f, a) => f(...a)
+    });
+    return nextState;
+  };
+  const [joinState, dispatch] = useReducer(reducer, {
+    unredeemedHaloInvitationCode: void 0,
+    unredeemedSpaceInvitationCode: 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(() => {
+    const attrValue = joinState.activeView === "identity input" ? `${joinState.activeView}; ${joinState.additionMethod}` : joinState.activeView === "space invitation acceptor" ? `${joinState.activeView}; ${joinState.spaceViewState}` : joinState.activeView === "halo invitation acceptor" ? `${joinState.activeView}; ${joinState.haloViewState}` : joinState.activeView;
+    log.debug("[autofocus value]", {
+      attrValue
+    }, {
+      file: "JoinPanel.tsx",
+      line: 149,
+      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__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(JoinHeading, _extends20({}, {
+    titleId,
+    invitation: joinState.spaceInvitation,
+    onExit,
+    exitActionParent
+  })), /* @__PURE__ */ React23.createElement("div", {
+    role: "none",
+    className: "is-full overflow-hidden"
+  }, /* @__PURE__ */ React23.createElement("div", {
+    role: "none",
+    className: "flex is-[1300%]",
+    "aria-live": "polite"
+  }, /* @__PURE__ */ React23.createElement(IdentitySelector, _extends20({}, {
+    dispatch,
+    availableIdentities,
+    active: joinState.activeView === "identity selector"
+  })), /* @__PURE__ */ React23.createElement(AdditionMethodSelector, _extends20({}, {
+    dispatch,
+    availableIdentities,
+    active: joinState.activeView === "addition method selector"
+  })), /* @__PURE__ */ React23.createElement(IdentityInput, _extends20({}, {
+    dispatch,
+    active: joinState.activeView === "identity input" && joinState.additionMethod === "create identity",
+    method: "create identity"
+  })), /* @__PURE__ */ React23.createElement(IdentityInput, _extends20({}, {
+    dispatch,
+    active: joinState.activeView === "identity input" && joinState.additionMethod === "recover identity",
+    method: "recover identity"
+  })), /* @__PURE__ */ React23.createElement(InvitationInput, _extends20({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation input",
+    invitationType: "halo"
+  })), /* @__PURE__ */ React23.createElement(InvitationRescuer, _extends20({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation rescuer",
+    invitationType: "halo"
+  })), /* @__PURE__ */ React23.createElement(InvitationAuthenticator, _extends20({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation authenticator",
+    invitationType: "halo",
+    ...joinState.spaceInvitationAnnotation === "authentication failed" && {
+      failed: true
+    }
+  })), /* @__PURE__ */ React23.createElement(InvitationAccepted, _extends20({}, {
+    dispatch,
+    activeInvitation: joinState.haloInvitation || true,
+    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation accepted",
+    invitationType: "halo"
+  })), /* @__PURE__ */ React23.createElement(IdentityAdded, _extends20({}, {
+    dispatch,
+    addedIdentity: joinState.selectedIdentity,
+    active: joinState.activeView === "identity added"
+  })), /* @__PURE__ */ React23.createElement(InvitationInput, _extends20({}, {
+    dispatch,
+    activeInvitation: joinState.spaceInvitation || true,
+    selectedIdentity: joinState.selectedIdentity,
+    active: joinState.activeView === "space invitation acceptor" && joinState.spaceViewState === "invitation input",
+    invitationType: "space"
+  })), /* @__PURE__ */ React23.createElement(InvitationRescuer, _extends20({}, {
+    dispatch,
+    activeInvitation: joinState.spaceInvitation || true,
+    selectedIdentity: joinState.selectedIdentity,
+    active: joinState.activeView === "space invitation acceptor" && joinState.spaceViewState === "invitation rescuer",
+    invitationType: "space"
+  })), /* @__PURE__ */ React23.createElement(InvitationAuthenticator, _extends20({}, {
+    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__ */ React23.createElement(InvitationAccepted, _extends20({}, {
+    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/composites/IdentityPopover/IdentityPopover.tsx
-function _extends3() {
-  _extends3 = Object.assign || function(target) {
+function _extends21() {
+  _extends21 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -177,12 +1791,12 @@ function _extends3() {
     }
     return target;
   };
-  return _extends3.apply(this, arguments);
+  return _extends21.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, {
+  return /* @__PURE__ */ React24.createElement(PanelPopover, _extends21({}, popoverProps, {
+    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React24.createElement(Avatar7, {
       size: 10,
       variant: "circle",
       fallbackValue: identity.identityKey.toHex(),
@@ -192,16 +1806,55 @@ var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true
       ...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)
+        className: mx16("flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full", (_b = slots == null ? void 0 : slots.trigger) == null ? void 0 : _b.className)
       }
     },
     triggerIsInToolbar
-  }), /* @__PURE__ */ React4.createElement(IdentityPanel, _extends3({}, {
+  }), /* @__PURE__ */ React24.createElement(IdentityPanel, _extends21({}, {
     identity,
     onClickManageProfile
   })));
 };
 
+// packages/apps/patterns/react-ui/src/composites/JoinDialog/JoinDialog.tsx
+import { Action, Cancel } from "@radix-ui/react-alert-dialog";
+import React25 from "react";
+import { ThemeContext as ThemeContext2, useId as useId4 } from "@dxos/react-components";
+function _extends22() {
+  _extends22 = Object.assign || function(target) {
+    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 JoinDialog = ({ slots, ...joinPanelProps }) => {
+  const titleId = useId4("joinDialog__title");
+  return /* @__PURE__ */ React25.createElement(PanelAlertDialog, _extends22({}, {
+    slots,
+    titleId
+  }), /* @__PURE__ */ React25.createElement(ThemeContext2.Provider, {
+    value: {
+      themeVariant: "os"
+    }
+  }, /* @__PURE__ */ React25.createElement(JoinPanel, _extends22({}, {
+    ...joinPanelProps,
+    titleId,
+    exitActionParent: /* @__PURE__ */ React25.createElement(Cancel, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React25.createElement(Action, {
+      asChild: true
+    })
+  }))));
+};
+
 // packages/apps/patterns/react-ui/src/translations/locales/en-US.ts
 var en_US_exports = {};
 __export(en_US_exports, {
@@ -210,7 +1863,48 @@ __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",
+  "join space heading": "<small>Joining</small><large>{{spaceTitle}}</large>",
+  "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",
+  "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",
+  "pin input label": "The PIN provided by the invitation sender",
+  "invitation input label": "Paste an invitation code or URL"
 };
 
 // packages/apps/patterns/react-ui/src/translations/index.ts
@@ -218,14 +1912,44 @@ var osTranslations = {
   "en-US": en_US_exports
 };
 export {
+  IdentityListItem,
   IdentityPanel,
   IdentityPopover,
+  InvitationList,
+  InvitationListContainer,
+  InvitationListItem,
+  InvitationStatusAvatar,
+  JoinDialog,
+  JoinPanel,
+  PanelAlertDialog,
   PanelPopover,
+  PanelSeparator,
   PanelSidebarContext,
   PanelSidebarProvider,
+  SpaceMemberList,
+  SpaceMemberListContainer,
+  activeBgColor,
+  activeStrokeColor,
+  activeTextColor,
+  cancelledBgColor,
+  cancelledStrokeColor,
+  cancelledTextColor,
   defaultArrow,
-  defaultPanel,
+  defaultSurface,
+  errorBgColor,
+  errorStrokeColor,
+  errorTextColor,
+  inactiveBgColor,
+  inactiveStrokeColor,
+  inactiveTextColor,
   osTranslations,
+  resolvedBgColor,
+  resolvedStrokeColor,
+  resolvedTextColor,
+  subduedSurface,
+  successBgColor,
+  successStrokeColor,
+  successTextColor,
   useTogglePanelSidebar
 };
 //# sourceMappingURL=index.mjs.map