@dxos/react-ui 0.1.31 → 0.1.32-next.86f5578

package/dist/lib/browser/index.mjs

@@ -100,7 +100,7 @@ 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.identity.identityKey.equals(client.halo.identity.identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity.identityKey)), [
+  const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((a) => a.identity.identityKey.equals(client.halo.identity.get().identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity.get().identityKey)), [
     allUnsortedMembers
   ]);
   return /* @__PURE__ */ React4.createElement(SpaceMemberList, {
@@ -181,6 +181,24 @@ var invitationStatusValue = /* @__PURE__ */ new Map([
   ]
 ]);
 
+// packages/apps/patterns/react-ui/src/util/toEmoji.ts
+import toArray from "lodash.toarray";
+var emoji = toArray(
+  // When changing this set, please check the result in a console or e.g. RunKit (https://runkit.com/thure/642214441dd6ae000855a8de)
+  // Emoji sometimes use a combination of code points, and some code points aren't visible on their own, so by adding or deleting you may unintentionally create non-visible items.
+  // This set was chosen from the characters in Unicode Emoji v15.0 based on the following criteria:
+  // – not people or isolated anthropomorphic faces
+  // – not flags
+  // – more concrete than abstract
+  // – less culturally specific
+  // – less easily confused with another emoji in the set
+  // – requires less special knowledge to identify
+  // – less likely to evoke negative feelings (no meat, no drugs, no weapons, etc)
+  // – less common as a signifier in UX
+  "\u{1F479}\u{1F47B}\u{1F47D}\u{1F916}\u{1F383}\u{1F9BE}\u{1F9BF}\u{1F9B7}\u{1F463}\u{1F441}\uFE0F\u{1F9F6}\u{1F451}\u{1F412}\u{1F986}\u{1F989}\u{1F434}\u{1F984}\u{1F41D}\u{1F98B}\u{1F41E}\u{1FAB2}\u{1F422}\u{1F98E}\u{1F995}\u{1F991}\u{1F980}\u{1F420}\u{1F42C}\u{1F40B}\u{1F9AD}\u{1F405}\u{1F406}\u{1F993}\u{1F98D}\u{1F9A7}\u{1F418}\u{1F42B}\u{1F992}\u{1F998}\u{1F9AC}\u{1F416}\u{1F40F}\u{1F98C}\u{1F415}\u{1F408}\u{1F413}\u{1F99A}\u{1F99C}\u{1F9A2}\u{1F9A9}\u{1F9A6}\u{1F401}\u{1F43F}\uFE0F\u{1F335}\u{1F332}\u{1F333}\u{1FAB5}\u{1F331}\u{1F341}\u{1FABA}\u{1F344}\u{1F41A}\u{1FAB8}\u{1FAA8}\u{1F33E}\u{1F337}\u{1F33B}\u2600\uFE0F\u{1F319}\u{1FA90}\u2B50\uFE0F\u26A1\uFE0F\u2604\uFE0F\u{1F525}\u{1F308}\u2601\uFE0F\u{1F4A7}\u26F1\uFE0F\u{1F30A}\u{1F34E}\u{1F34B}\u{1F349}\u{1F347}\u{1FAD0}\u{1F348}\u{1F352}\u{1F351}\u{1F96D}\u{1F34D}\u{1F965}\u{1F95D}\u{1F951}\u{1F336}\uFE0F\u{1F33D}\u{1F955}\u{1F36C}\u{1F95C}\u{1FAD6}\u2615\uFE0F\u{1F375}\u{1F9CA}\u{1F9C2}\u{1F3D4}\uFE0F\u2693\uFE0F\u{1F6DF}\u{1F3DD}\uFE0F\u{1F6F6}\u{1F680}\u{1F6F0}\uFE0F\u26F2\uFE0F\u{1F3F0}\u{1F6B2}\u26FA\uFE0F\u{1F399}\uFE0F\u{1F9F2}\u2699\uFE0F\u{1F529}\u{1F52E}\u{1F52D}\u{1F52C}\u{1F9EC}\u{1F321}\uFE0F\u{1F9FA}\u{1F6CE}\uFE0F\u{1F511}\u{1FA91}\u{1F9F8}\u{1F388}\u{1F380}\u{1F38A}\u267B\uFE0F\u{1F3B5}"
+);
+var toEmoji = (keyAsHex) => emoji[parseInt(keyAsHex, 16) % emoji.length];
+
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
 function _extends2() {
   _extends2 = Object.assign || function(target) {
@@ -480,8 +498,8 @@ var SpaceListItem = /* @__PURE__ */ forwardRef(({ space, onClick }, ref) => {
 });
 
 // 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";
+import React28 from "react";
+import { Avatar as Avatar5, mx as mx21 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
 import React11 from "react";
@@ -789,17 +807,16 @@ var IdentityPanel = ({ identity, onClickManageProfile }) => {
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
-import React27, { useEffect, useReducer as useReducer2, useState as useState6 } from "react";
-import { InvitationEncoder as InvitationEncoder2 } from "@dxos/client";
-import { log } from "@dxos/log";
-import { useClient as useClient6, useIdentity as useIdentity2 } from "@dxos/react-client";
+import React26, { useEffect as useEffect2 } from "react";
+import { log as log2 } from "@dxos/log";
+import { useClient as useClient5, useIdentity as useIdentity2 } from "@dxos/react-client";
 import { DensityProvider as DensityProvider4, useId as useId4 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinHeading.tsx
-import { ProhibitInset as ProhibitInset2 } from "@phosphor-icons/react";
+import { X as X3 } from "@phosphor-icons/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";
+import { Button as Button4, defaultDescription as defaultDescription2, getSize as getSize4, Heading, mx as mx12, 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++) {
@@ -814,72 +831,483 @@ function _extends13() {
   };
   return _extends13.apply(this, arguments);
 }
-var JoinHeading = /* @__PURE__ */ forwardRef2(({ mode, titleId, invitation, onExit, exitActionParent, preventExit }, ref) => {
-  var _a, _b, _c, _d, _e, _f;
+var JoinHeading = /* @__PURE__ */ forwardRef2(({ mode, titleId, joinState, onExit, exitActionParent, preventExit }, ref) => {
+  var _a, _b;
   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 space = useSpace2((_a = joinState == null ? void 0 : joinState.context.space.invitation) == null ? void 0 : _a.spaceKey);
+  const name = space == null ? void 0 : space.properties.name;
   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 invitationKey = (_b = joinState == null ? void 0 : joinState.context[mode === "halo-only" ? "halo" : "space"].invitation) == null ? void 0 : _b.invitationId;
+  const invitationEmoji = invitationKey && toEmoji(invitationKey);
   const exitButton = /* @__PURE__ */ React17.createElement(Button4, _extends13({
     variant: "ghost"
   }, onExit && {
     onClick: onExit
   }, {
-    className: "grow-0 shrink-0",
+    className: mx12(defaultDescription2, "plb-0 pli-2 absolute block-start-1.5 inline-end-2 z-[1]"),
     "data-testid": "join-exit"
-  }), /* @__PURE__ */ React17.createElement(ProhibitInset2, {
-    className: getSize4(5)
+  }), /* @__PURE__ */ React17.createElement(X3, {
+    weight: "bold",
+    className: getSize4(4)
   }), /* @__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"),
+    className: mx12(defaultSurface, "pbs-3 pbe-1 rounded-bs-md relative"),
     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, {
+  }, !preventExit && mode !== "halo-only" && (exitActionParent ? /* @__PURE__ */ cloneElement2(exitActionParent, {}, exitButton) : exitButton), /* @__PURE__ */ React17.createElement(Heading, {
     level: 1,
-    className: "font-body font-normal text-base grow",
+    className: mx12(defaultDescription2, "font-body font-system-normal text-center text-sm grow pbe-2", mode === "halo-only" && (preventExit ? "sr-only" : "opacity-0")),
     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
-      })
+  }, t(mode === "halo-only" ? "selecting identity heading" : "joining space heading")), /* @__PURE__ */ React17.createElement("div", {
+    role: "group",
+    className: "flex items-center justify-center gap-2"
+  }, /* @__PURE__ */ React17.createElement("span", {
+    role: "none",
+    className: mx12(getSize4(12), "bg-neutral-300 dark:bg-neutral-700 rounded-full text-center text-4xl leading-[3rem]")
+  }, invitationEmoji), name && /* @__PURE__ */ React17.createElement("p", {
+    id: nameId
+  }, name)));
+});
+
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/joinMachine.ts
+import { useMachine } from "@xstate/react";
+import { useCallback as useCallback4 } from "react";
+import { assign, createMachine } from "xstate";
+import { Invitation as Invitation4, InvitationEncoder } from "@dxos/client";
+import { log } from "@dxos/log";
+var getInvitationSubscribable = (Domain, invitation) => {
+  log("[subscribing to invitation]", invitation, {
+    file: "joinMachine.ts",
+    line: 75,
+    scope: void 0,
+    callSite: (f, a) => f(...a)
+  });
+  return {
+    subscribe: (next, onError, complete) => {
+      const unsubscribe = invitation.subscribe({
+        onAuthenticating: (invitation2) => {
+          log("[invitation authenticating]", {
+            Domain,
+            invitation: invitation2
+          }, {
+            file: "joinMachine.ts",
+            line: 84,
+            scope: void 0,
+            callSite: (f, a) => f(...a)
+          });
+          return next({
+            type: `authenticate${Domain}Invitation`,
+            invitation: invitation2
+          });
+        },
+        onCancelled: () => {
+          log.warn("[invitation cancelled]", {
+            Domain
+          }, {
+            file: "joinMachine.ts",
+            line: 88,
+            scope: void 0,
+            callSite: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Domain}Invitation`,
+            reason: "cancelled"
+          });
+        },
+        onTimeout: () => {
+          log.error("[invitation timeout]", {
+            Domain
+          }, {
+            file: "joinMachine.ts",
+            line: 92,
+            scope: void 0,
+            callSite: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Domain}Invitation`,
+            reason: "timeout"
+          });
+        },
+        onConnecting: (invitation2) => {
+          log("[invitation connecting]", {
+            Domain,
+            invitation: invitation2
+          }, {
+            file: "joinMachine.ts",
+            line: 96,
+            scope: void 0,
+            callSite: (f, a) => f(...a)
+          });
+          return next({
+            type: `connect${Domain}Invitation`,
+            invitation: invitation2
+          });
+        },
+        onConnected: (invitation2) => {
+          log("[invitation connected]", {
+            Domain,
+            invitation: invitation2
+          }, {
+            file: "joinMachine.ts",
+            line: 100,
+            scope: void 0,
+            callSite: (f, a) => f(...a)
+          });
+          return next({
+            type: `connectionSuccess${Domain}Invitation`,
+            invitation: invitation2
+          });
+        },
+        onSuccess: () => {
+          log("[invitation success]", {
+            Domain
+          }, {
+            file: "joinMachine.ts",
+            line: 104,
+            scope: void 0,
+            callSite: (f, a) => f(...a)
+          });
+          next({
+            type: `succeed${Domain}Invitation`
+          });
+          return complete == null ? void 0 : complete();
+        },
+        onError: (error) => {
+          log.error("[invitation errored]", {
+            Domain,
+            error
+          }, {
+            file: "joinMachine.ts",
+            line: 109,
+            scope: void 0,
+            callSite: (f, a) => f(...a)
+          });
+          next({
+            type: `fail${Domain}Invitation`,
+            reason: "error"
+          });
+          return onError == null ? void 0 : onError(error);
+        }
+      });
+      return {
+        unsubscribe
+      };
+    }
+  };
+};
+var acceptingInvitationTemplate = (Domain, successTarget) => {
+  const config = {
+    initial: `unknown${Domain}`,
+    states: {
+      [`unknown${Domain}`]: {
+        always: [
+          {
+            cond: ({ mode }) => mode === "halo-only" && Domain === "Space",
+            target: "#join.finishingJoiningHalo"
+          },
+          {
+            // cond: `no${Domain}Invitation`,
+            target: `inputting${Domain}InvitationCode`,
+            actions: "log"
+          }
+        ]
+      },
+      [`inputting${Domain}InvitationCode`]: {},
+      [`acceptingRedeemed${Domain}Invitation`]: {
+        invoke: {
+          src: (context) => context[Domain.toLowerCase()].invitationSubscribable
+        },
+        initial: `unknown${Domain}Invitation`,
+        states: {
+          [`unknown${Domain}Invitation`]: {
+            always: [
+              {
+                cond: (context) => {
+                  const invitation = context[Domain.toLowerCase()].invitation;
+                  return !invitation || (invitation == null ? void 0 : invitation.state) === Invitation4.State.CONNECTING;
+                },
+                target: `connecting${Domain}Invitation`,
+                actions: "log"
+              },
+              {
+                target: `inputting${Domain}VerificationCode`,
+                actions: "log"
+              }
+            ]
+          },
+          [`connecting${Domain}Invitation`]: {},
+          [`inputting${Domain}VerificationCode`]: {
+            on: {
+              [`authenticate${Domain}VerificationCode`]: {
+                target: `authenticating${Domain}VerificationCode`,
+                actions: "log"
+              }
+            }
+          },
+          [`authenticating${Domain}VerificationCode`]: {
+            on: {
+              [`authenticate${Domain}Invitation`]: {
+                target: `authenticationFailing${Domain}VerificationCode`,
+                actions: "log"
+              }
+            }
+          },
+          [`authenticationFailing${Domain}VerificationCode`]: {},
+          [`failing${Domain}Invitation`]: {},
+          [`success${Domain}Invitation`]: {}
+        },
+        on: {
+          [`reset${Domain}Invitation`]: {
+            target: `#join${Domain === "Halo" ? ".choosingIdentity" : ""}.accepting${Domain}Invitation.unknown${Domain}`,
+            actions: [
+              "resetInvitation",
+              "log"
+            ]
+          },
+          [`connect${Domain}Invitation`]: {
+            target: `.connecting${Domain}Invitation`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`connectionSuccess${Domain}Invitation`]: {
+            target: `.inputting${Domain}VerificationCode`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`succeed${Domain}Invitation`]: {
+            target: successTarget,
+            actions: "log"
+          },
+          [`fail${Domain}Invitation`]: {
+            target: `.failing${Domain}Invitation`,
+            actions: [
+              assign({
+                [Domain.toLowerCase()]: (context, event) => ({
+                  ...context[Domain.toLowerCase()],
+                  failReason: event.reason
+                })
+              }),
+              "log"
+            ]
+          }
+        }
+      }
     },
-    values: {
-      name
+    on: {
+      [`set${Domain}InvitationCode`]: {
+        target: `.acceptingRedeemed${Domain}Invitation`,
+        actions: [
+          assign({
+            [Domain.toLowerCase()]: (context, event) => ({
+              ...context[Domain.toLowerCase()],
+              unredeemedCode: event.code
+            })
+          }),
+          `redeem${Domain}InvitationCode`,
+          "log"
+        ]
+      }
     }
-  })) : /* @__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)));
+  };
+  return config;
+};
+var joinMachine = createMachine({
+  id: "join",
+  predictableActionArguments: true,
+  context: {
+    mode: "default",
+    identity: null,
+    halo: {},
+    space: {}
+  },
+  initial: "unknown",
+  states: {
+    unknown: {
+      always: [
+        {
+          cond: "noSelectedIdentity",
+          target: "choosingIdentity",
+          actions: "log"
+        },
+        {
+          target: "acceptingSpaceInvitation",
+          actions: "log"
+        }
+      ]
+    },
+    choosingIdentity: {
+      initial: "choosingAuthMethod",
+      states: {
+        choosingAuthMethod: {},
+        recoveringIdentity: {},
+        creatingIdentity: {},
+        acceptingHaloInvitation: acceptingInvitationTemplate("Halo", "#join.acceptingSpaceInvitation"),
+        confirmingAddedIdentity: {}
+      },
+      on: {
+        recoverIdentity: {
+          target: ".recoveringIdentity",
+          actions: "log"
+        },
+        createIdentity: {
+          target: ".creatingIdentity",
+          actions: "log"
+        },
+        acceptHaloInvitation: {
+          target: ".acceptingHaloInvitation",
+          actions: "log"
+        },
+        addIdentity: {
+          target: ".confirmingAddedIdentity",
+          actions: "log"
+        },
+        selectIdentity: {
+          target: "acceptingSpaceInvitation",
+          actions: [
+            "setIdentity",
+            "log"
+          ]
+        },
+        deselectAuthMethod: {
+          target: ".choosingAuthMethod",
+          actions: "log"
+        }
+      }
+    },
+    acceptingSpaceInvitation: acceptingInvitationTemplate("Space", "#join.finishingJoiningSpace"),
+    finishingJoiningSpace: {
+      type: "final"
+    },
+    finishingJoiningHalo: {
+      type: "final"
+    }
+  }
+}, {
+  guards: {
+    noSelectedIdentity: ({ identity }, _event) => !identity,
+    noHaloInvitation: ({ halo }, _event) => !halo.invitation && !halo.unredeemedCode,
+    noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode
+  },
+  actions: {
+    setIdentity: assign({
+      identity: (context, event) => event.identity
+    }),
+    unsetIdentity: assign({
+      identity: () => null
+    }),
+    resetInvitation: assign({
+      halo: (context, event) => event.type === "resetHaloInvitation" ? {
+        ...context.halo,
+        invitation: void 0,
+        invitationObservable: void 0,
+        invitationSubscribable: void 0
+      } : context.halo,
+      space: (context, event) => event.type === "resetSpaceInvitation" ? {
+        ...context.space,
+        invitation: void 0,
+        invitationObservable: void 0,
+        invitationSubscribable: void 0
+      } : context.space
+    }),
+    setInvitation: assign({
+      halo: (context, event) => event.type.includes("Halo") ? {
+        ...context.halo,
+        invitation: event.invitation
+      } : context.halo,
+      space: (context, event) => event.type.includes("Space") ? {
+        ...context.space,
+        invitation: event.invitation
+      } : context.space
+    }),
+    log: (context, event) => {
+      log("[transition]", {
+        event,
+        haloInvitation: context.halo.invitation,
+        spaceInvitation: context.space.invitation
+      }, {
+        file: "joinMachine.ts",
+        line: 341,
+        scope: void 0,
+        callSite: (f, a) => f(...a)
+      });
+    }
+  }
 });
+var defaultCodeFromUrl = (invitationType, text) => {
+  var _a, _b, _c, _d;
+  try {
+    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
+    return (_d = (_c = (_b = (_a = searchParams.get(`${invitationType}InvitationCode`)) != null ? _a : searchParams.get(`${invitationType}Invitation`)) != null ? _b : searchParams.get("invitationCode")) != null ? _c : searchParams.get("invitation")) != null ? _d : text;
+  } catch (err) {
+    log.catch(err, {}, {
+      file: "joinMachine.ts",
+      line: 367,
+      scope: void 0,
+      callSite: (f, a) => f(...a)
+    });
+    return text;
+  }
+};
+var useJoinMachine = (client, options) => {
+  const redeemHaloInvitationCode = useCallback4(({ halo }) => {
+    if (halo.unredeemedCode) {
+      const invitationObservable = client.halo.acceptInvitation(InvitationEncoder.decode(defaultCodeFromUrl("halo", halo.unredeemedCode)));
+      return {
+        ...halo,
+        invitationObservable,
+        invitationSubscribable: getInvitationSubscribable("Halo", invitationObservable)
+      };
+    } else {
+      return halo;
+    }
+  }, [
+    client
+  ]);
+  const redeemSpaceInvitationCode = useCallback4(({ space }) => {
+    if (space.unredeemedCode) {
+      const invitationObservable = client.acceptInvitation(InvitationEncoder.decode(defaultCodeFromUrl("space", space.unredeemedCode)));
+      return {
+        ...space,
+        invitationObservable,
+        invitationSubscribable: getInvitationSubscribable("Space", invitationObservable)
+      };
+    } else {
+      return space;
+    }
+  }, [
+    client
+  ]);
+  return useMachine(joinMachine, {
+    ...options,
+    actions: {
+      ...options == null ? void 0 : options.actions,
+      redeemHaloInvitationCode: assign({
+        halo: redeemHaloInvitationCode
+      }),
+      redeemSpaceInvitationCode: assign({
+        space: redeemSpaceInvitationCode
+      })
+    }
+  });
+};
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx
-import { CaretLeft, CaretRight, Plus, QrCode as QrCode2, Textbox } from "@phosphor-icons/react";
+import { CaretRight, Plus, QrCode as QrCode2, Textbox } from "@phosphor-icons/react";
 import React19 from "react";
-import { Button as Button5, CompoundButton, getSize as getSize6, mx as mx14, useTranslation as useTranslation9 } from "@dxos/react-components";
+import { CompoundButton, getSize as getSize6, 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-icons/react";
+import { CheckCircle, HourglassSimple, X as X4 } from "@phosphor-icons/react";
 import React18, { useMemo as useMemo2 } from "react";
-import { Invitation as Invitation4 } from "@dxos/client";
+import { Invitation as Invitation5 } 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";
+import { mx as mx13, useTranslation as useTranslation8, 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++) {
@@ -897,136 +1325,19 @@ function _extends14() {
 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)
+    className: mx13("font-system-normal text-sm 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, _b;
-  const { t } = useTranslation8("os");
-  const identityLabel = useId3("selectedIdentityLabel");
+var ViewState = ({ active, children, className, joinSend, joinState, ...props }) => {
   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" : (_b = (_a = selectedIdentity.profile) == null ? void 0 : _a.displayName) != null ? _b : 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", {
+  }), /* @__PURE__ */ React18.createElement("div", {
     role: "region",
-    className: mx13(defaultSurface, "rounded-be-md grow shrink-0 flex flex-col gap-1 p-2")
+    className: mx13(defaultSurface, "rounded-be-md grow shrink-0 flex flex-col gap-1 p-4 pbs-1")
   }, children));
 };
 
@@ -1045,9 +1356,9 @@ function _extends15() {
   };
   return _extends15.apply(this, arguments);
 }
-var AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }) => {
+var AdditionMethodSelector = (viewStateProps) => {
   const disabled = !viewStateProps.active;
-  const { dispatch } = viewStateProps;
+  const { joinSend } = viewStateProps;
   const { t } = useTranslation9("os");
   const sharedButtonProps = {
     disabled,
@@ -1069,20 +1380,18 @@ var AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }) => {
     before: /* @__PURE__ */ React19.createElement(Plus, {
       className: getSize6(6)
     }),
-    onClick: () => dispatch({
-      type: "select addition method",
-      method: "create identity"
+    onClick: () => joinSend({
+      type: "createIdentity"
     }),
-    "data-autofocus": "addition method selector",
+    "data-autofocus": "choosingAuthMethod",
     "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"
+    onClick: () => joinSend({
+      type: "acceptHaloInvitation"
     }),
     "data-testid": "join-identity"
   }), t("join identity label")), /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
@@ -1092,32 +1401,17 @@ var AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }) => {
     before: /* @__PURE__ */ React19.createElement(Textbox, {
       className: getSize6(6)
     }),
-    onClick: () => dispatch({
-      type: "select addition method",
-      method: "recover identity"
+    onClick: () => joinSend({
+      type: "recoverIdentity"
     }),
     "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"
-  })));
+  }), t("recover identity label"))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityAdded.tsx
-import { CaretLeft as CaretLeft2, CaretRight as CaretRight2, Check } from "@phosphor-icons/react";
+import { CaretLeft, CaretRight as CaretRight2, Check } from "@phosphor-icons/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";
+import { Avatar as Avatar4, Button as Button5, getSize as getSize7, mx as mx14, useTranslation as useTranslation10 } from "@dxos/react-components";
 function _extends16() {
   _extends16 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1135,20 +1429,19 @@ function _extends16() {
 var Done = ({ onDone, doneActionParent, active }) => {
   const disabled = !active;
   const { t } = useTranslation10("os");
-  const doneButton = /* @__PURE__ */ React20.createElement(Button6, _extends16({}, onDone && {
+  const doneButton = /* @__PURE__ */ React20.createElement(Button5, _extends16({}, onDone && {
     onClick: () => onDone(null)
   }, {
     disabled,
     className: "grow flex items-center gap-2 pli-2",
-    "data-autofocus": "identity added",
+    "data-autofocus": "confirmingAddedIdentity",
     "data-testid": "identity-added-done"
-  }), /* @__PURE__ */ React20.createElement(CaretLeft2, {
+  }), /* @__PURE__ */ React20.createElement(CaretLeft, {
     weight: "bold",
-    className: mx15(getSize7(2), "invisible")
+    className: mx14(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;
@@ -1156,16 +1449,16 @@ var Done = ({ onDone, doneActionParent, active }) => {
 var IdentityAdded = ({ mode, addedIdentity, onDone, doneActionParent, ...viewStateProps }) => {
   var _a, _b, _c, _d, _e;
   const disabled = !viewStateProps.active;
-  const { dispatch } = viewStateProps;
+  const { joinSend } = 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, {
+  }, /* @__PURE__ */ React20.createElement(Avatar4, {
     size: 20,
     fallbackValue: (_a = addedIdentity == null ? void 0 : addedIdentity.identityKey.toHex()) != null ? _a : "",
     label: /* @__PURE__ */ React20.createElement("p", {
-      className: mx15("text-lg", !((_b = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _b.displayName) && "font-mono")
+      className: mx14("text-lg", !((_b = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _b.displayName) && "font-mono")
     }, (_e = (_d = (_c = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _c.displayName) != null ? _d : addedIdentity == null ? void 0 : addedIdentity.identityKey.truncate()) != null ? _e : "\xA0"),
     variant: "circle",
     status: "active"
@@ -1174,39 +1467,39 @@ var IdentityAdded = ({ mode, addedIdentity, onDone, doneActionParent, ...viewSta
     doneActionParent
   }, viewStateProps)) : /* @__PURE__ */ React20.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React20.createElement(Button6, {
+  }, /* @__PURE__ */ React20.createElement(Button5, {
     disabled: disabled || !addedIdentity,
     className: "grow flex items-center gap-2 pli-2 order-2",
-    onClick: () => addedIdentity && dispatch({
-      type: "select identity",
+    onClick: () => addedIdentity && joinSend({
+      type: "selectIdentity",
       identity: addedIdentity
     }),
-    "data-autofocus": "identity added"
-  }, /* @__PURE__ */ React20.createElement(CaretLeft2, {
+    "data-autofocus": "confirmingAddedIdentity"
+  }, /* @__PURE__ */ React20.createElement(CaretLeft, {
     weight: "bold",
-    className: mx15(getSize7(2), "invisible")
+    className: mx14(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, {
+  })), /* @__PURE__ */ React20.createElement(Button5, {
     disabled,
-    onClick: () => dispatch({
-      type: "deselect identity"
+    onClick: () => joinSend({
+      type: "deselectAuthMethod"
     }),
     className: "flex items-center gap-2 pis-2 pie-4"
-  }, /* @__PURE__ */ React20.createElement(CaretLeft2, {
+  }, /* @__PURE__ */ React20.createElement(CaretLeft, {
     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 { CaretLeft as CaretLeft3, CaretRight as CaretRight3, UserPlus as UserPlus2 } from "@phosphor-icons/react";
-import * as RadioGroup from "@radix-ui/react-radio-group";
-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";
+// packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityInput.tsx
+import { CaretLeft as CaretLeft2, CaretRight as CaretRight3 } from "@phosphor-icons/react";
+import React21, { useState as useState2 } from "react";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { Button as Button6, getSize as getSize8, Input, mx as mx15, useTranslation as useTranslation11 } from "@dxos/react-components";
 function _extends17() {
   _extends17 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1221,126 +1514,36 @@ function _extends17() {
   };
   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(({ profile, identityKey }) => {
-    var _a, _b;
-    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(!(profile == null ? void 0 : profile.displayName) && "font-mono")
-    }, (_b = (_a = profile == null ? void 0 : profile.displayName) != null ? _a : identityKey.truncate()) != null ? _b : ""));
-  })), /* @__PURE__ */ React21.createElement(Button7, {
-    disabled,
-    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-icons/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 { joinSend } = viewStateProps;
+  const { t } = useTranslation11("os");
+  const [inputValue, setInputValue] = useState2("");
   const client = useClient4();
-  const [validationMessage, setValidationMessage] = useState3("");
+  const [validationMessage, setValidationMessage] = useState2("");
   const isRecover = method === "recover identity";
   const handleNext = () => {
     void client.halo.createIdentity({
       [isRecover ? "seedphrase" : "displayName"]: inputValue
     }).then((identity) => {
-      dispatch({
-        type: "added identity",
+      joinSend({
+        type: "selectIdentity",
         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({
+  return /* @__PURE__ */ React21.createElement(ViewState, _extends17({}, viewStateProps), /* @__PURE__ */ React21.createElement(Input, _extends17({
     disabled,
-    label: /* @__PURE__ */ React22.createElement(ViewStateHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React21.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",
+        "data-autofocus": isRecover ? "recoveringIdentity" : "creatingIdentity",
         onKeyUp: ({ key }) => key === "Enter" && handleNext()
       }
     }
@@ -1349,44 +1552,44 @@ var IdentityInput = ({ method, ...viewStateProps }) => {
     validationMessage
   }, {
     "data-testid": "identity-input"
-  })), /* @__PURE__ */ React22.createElement("div", {
+  })), /* @__PURE__ */ React21.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React22.createElement("div", {
+  }), /* @__PURE__ */ React21.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React22.createElement(Button8, {
+  }, /* @__PURE__ */ React21.createElement(Button6, {
     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, {
+  }, /* @__PURE__ */ React21.createElement(CaretLeft2, {
     weight: "bold",
-    className: mx17(getSize9(2), "invisible")
-  }), /* @__PURE__ */ React22.createElement("span", {
+    className: mx15(getSize8(2), "invisible")
+  }), /* @__PURE__ */ React21.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React22.createElement(CaretRight4, {
+  }, t("continue label")), /* @__PURE__ */ React21.createElement(CaretRight3, {
     weight: "bold",
-    className: getSize9(4)
-  })), /* @__PURE__ */ React22.createElement(Button8, {
+    className: getSize8(4)
+  })), /* @__PURE__ */ React21.createElement(Button6, {
     disabled,
-    onClick: () => dispatch({
-      type: "add identity"
+    onClick: () => joinSend({
+      type: "deselectAuthMethod"
     }),
     className: "flex items-center gap-2 pis-2 pie-4",
     "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
-  }, /* @__PURE__ */ React22.createElement(CaretLeft4, {
+  }, /* @__PURE__ */ React21.createElement(CaretLeft2, {
     weight: "bold",
-    className: getSize9(4)
-  }), /* @__PURE__ */ React22.createElement("span", null, t("back label")))));
+    className: getSize8(4)
+  }), /* @__PURE__ */ React21.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-icons/react";
-import React23, { cloneElement as cloneElement4 } from "react";
+import { CaretLeft as CaretLeft3, Check as Check2 } from "@phosphor-icons/react";
+import React22, { 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) {
+import { Button as Button7, getSize as getSize9, mx as mx16, 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) {
@@ -1397,51 +1600,56 @@ function _extends19() {
     }
     return target;
   };
-  return _extends19.apply(this, arguments);
+  return _extends18.apply(this, arguments);
 }
-var PureInvitationAcceptedContent = ({ onDone, result, invitationType, doneActionParent, active }) => {
+var PureInvitationAcceptedContent = ({ onDone, result, Domain, doneActionParent, active }) => {
   const disabled = !active;
-  const { t } = useTranslation13("os");
-  const doneButton = /* @__PURE__ */ React23.createElement(Button9, _extends19({}, onDone && {
+  const { t } = useTranslation12("os");
+  const doneButton = /* @__PURE__ */ React22.createElement(Button7, _extends18({}, 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, {
+    className: "flex items-center gap-2 pli-2",
+    "data-autofocus": `success${Domain}Invitation finishingJoining${Domain}`,
+    "data-testid": `${Domain.toLowerCase()}-invitation-accepted-done`
+  }), /* @__PURE__ */ React22.createElement(CaretLeft3, {
     weight: "bold",
-    className: mx18(getSize10(2), "invisible")
-  }), /* @__PURE__ */ React23.createElement("span", {
+    className: mx16(getSize9(2), "invisible")
+  }), /* @__PURE__ */ React22.createElement("span", {
     className: "grow"
-  }, t("done label")), /* @__PURE__ */ React23.createElement(Check2, {
-    weight: "bold",
-    className: getSize10(4)
+  }, t("done label")), /* @__PURE__ */ React22.createElement(Check2, {
+    className: getSize9(4)
   }));
-  return doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, doneButton) : doneButton;
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("p", {
+    className: "text-center text-sm font-system-normal"
+  }, t("welcome message")), /* @__PURE__ */ React22.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, doneButton) : doneButton);
 };
 var InvitationAcceptedContent = (props) => {
   const { result } = useInvitationStatus3(props.activeInvitation);
-  return /* @__PURE__ */ React23.createElement(PureInvitationAcceptedContent, _extends19({}, props, {
+  return /* @__PURE__ */ React22.createElement(PureInvitationAcceptedContent, _extends18({}, 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, {
+  var _a;
+  const { Domain, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
+  const activeInvitation = (_a = viewStateProps.joinState) == null ? void 0 : _a.context[Domain.toLowerCase()].invitationObservable;
+  return /* @__PURE__ */ React22.createElement(ViewState, _extends18({}, viewStateProps), !activeInvitation ? /* @__PURE__ */ React22.createElement(PureInvitationAcceptedContent, _extends18({}, props, {
     result: null
-  })) : /* @__PURE__ */ React23.createElement(InvitationAcceptedContent, _extends19({}, props)));
+  })) : /* @__PURE__ */ React22.createElement(InvitationAcceptedContent, _extends18({}, props, {
+    activeInvitation
+  })));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationInput.tsx
-import { CaretLeft as CaretLeft6, CaretRight as CaretRight5 } from "@phosphor-icons/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) {
+import { CaretLeft as CaretLeft4, CaretRight as CaretRight4 } from "@phosphor-icons/react";
+import React23, { useEffect, useState as useState3 } from "react";
+import { Button as Button8, getSize as getSize10, Input as Input2, mx as mx17, 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) {
@@ -1452,75 +1660,76 @@ function _extends20() {
     }
     return target;
   };
-  return _extends20.apply(this, arguments);
+  return _extends19.apply(this, arguments);
 }
-var InvitationInput = ({ invitationType, ...viewStateProps }) => {
-  const client = useClient5();
+var InvitationInput = ({ Domain, ...viewStateProps }) => {
   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))
+  const { joinSend, joinState } = viewStateProps;
+  const { t } = useTranslation13("os");
+  const contextUnredeemedCode = joinState == null ? void 0 : joinState.context[Domain.toLowerCase()].unredeemedCode;
+  const [inputValue, setInputValue] = useState3(contextUnredeemedCode != null ? contextUnredeemedCode : "");
+  useEffect(() => {
+    contextUnredeemedCode && setInputValue(contextUnredeemedCode != null ? contextUnredeemedCode : "");
+  }, [
+    contextUnredeemedCode
+  ]);
+  const handleNext = () => joinSend({
+    type: `set${Domain}InvitationCode`,
+    code: inputValue
   });
-  return /* @__PURE__ */ React24.createElement(ViewState, _extends20({}, viewStateProps), /* @__PURE__ */ React24.createElement(Input2, {
+  return /* @__PURE__ */ React23.createElement(ViewState, _extends19({}, viewStateProps), /* @__PURE__ */ React23.createElement(Input2, {
     disabled,
-    label: /* @__PURE__ */ React24.createElement(ViewStateHeading, null, t("invitation input label")),
+    label: /* @__PURE__ */ React23.createElement(ViewStateHeading, null, t("invitation input label")),
+    value: inputValue,
     onChange: ({ target: { value } }) => setInputValue(value),
     slots: {
       root: {
         className: "m-0"
       },
-      label: {
-        className: "sr-only"
-      },
       input: {
-        "data-autofocus": `${invitationType} invitation acceptor; invitation input`,
-        "data-testid": `${invitationType}-invitation-input`,
+        "data-autofocus": `inputting${Domain}InvitationCode`,
+        "data-testid": `${Domain.toLowerCase()}-invitation-input`,
         onKeyUp: ({ key }) => key === "Enter" && handleNext()
       }
     }
-  }), /* @__PURE__ */ React24.createElement("div", {
+  }), /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React24.createElement("div", {
+  }), /* @__PURE__ */ React23.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React24.createElement(Button10, {
+  }, /* @__PURE__ */ React23.createElement(Button8, {
     disabled,
     className: "grow flex items-center gap-2 pli-2 order-2",
     onClick: handleNext,
-    "data-testid": `${invitationType}-invitation-input-continue`
-  }, /* @__PURE__ */ React24.createElement(CaretLeft6, {
+    "data-testid": `${Domain.toLowerCase()}-invitation-input-continue`
+  }, /* @__PURE__ */ React23.createElement(CaretLeft4, {
     weight: "bold",
-    className: mx19(getSize11(2), "invisible")
-  }), /* @__PURE__ */ React24.createElement("span", {
+    className: mx17(getSize10(2), "invisible")
+  }), /* @__PURE__ */ React23.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React24.createElement(CaretRight5, {
+  }, t("continue label")), /* @__PURE__ */ React23.createElement(CaretRight4, {
     weight: "bold",
-    className: getSize11(4)
-  })), /* @__PURE__ */ React24.createElement(Button10, {
-    disabled,
-    onClick: () => dispatch({
-      type: "add identity"
+    className: getSize10(4)
+  })), /* @__PURE__ */ React23.createElement(Button8, {
+    disabled: Domain === "Space",
+    onClick: () => joinSend({
+      type: "deselectAuthMethod"
     }),
     className: "flex items-center gap-2 pis-2 pie-4",
-    "data-testid": `${invitationType}-invitation-input-back`
-  }, /* @__PURE__ */ React24.createElement(CaretLeft6, {
+    "data-testid": `${Domain.toLowerCase()}-invitation-input-back`
+  }, /* @__PURE__ */ React23.createElement(CaretLeft4, {
     weight: "bold",
-    className: getSize11(4)
-  }), /* @__PURE__ */ React24.createElement("span", null, t("back label")))));
+    className: getSize10(4)
+  }), /* @__PURE__ */ React23.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-icons/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) {
+import { ArrowsClockwise, CaretLeft as CaretLeft5, CaretRight as CaretRight5 } from "@phosphor-icons/react";
+import React24 from "react";
+import { Invitation as Invitation6 } from "@dxos/client";
+import { Button as Button9, defaultDescription as defaultDescription3, getSize as getSize11, mx as mx18, 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) {
@@ -1531,96 +1740,110 @@ function _extends21() {
     }
     return target;
   };
-  return _extends21.apply(this, arguments);
+  return _extends20.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", {
+var InvitationActions = ({ invitationState, disabled, joinSend, joinState, Domain }) => {
+  const { t } = useTranslation14("os");
+  const invitationType = Domain.toLowerCase();
+  switch (invitationState) {
+    case Invitation6.State.CONNECTING:
+      return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ViewStateHeading, {
+        className: defaultDescription3
+      }, t("connecting status label")), /* @__PURE__ */ React24.createElement("div", {
         role: "none",
         className: "grow"
-      }), /* @__PURE__ */ React25.createElement("div", {
+      }), /* @__PURE__ */ React24.createElement("div", {
         className: "flex gap-2"
-      }, /* @__PURE__ */ React25.createElement(Button11, {
+      }, /* @__PURE__ */ React24.createElement(Button9, {
         disabled: true,
         className: "grow flex items-center gap-2 pli-2 order-2",
         "data-testid": "next"
-      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
+      }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
         weight: "bold",
-        className: mx20(getSize12(2), "invisible")
-      }), /* @__PURE__ */ React25.createElement("span", {
+        className: mx18(getSize11(2), "invisible")
+      }), /* @__PURE__ */ React24.createElement("span", {
         className: "grow"
-      }, t("next label")), /* @__PURE__ */ React25.createElement(CaretRight6, {
+      }, t("next label")), /* @__PURE__ */ React24.createElement(CaretRight5, {
         weight: "bold",
-        className: getSize12(4)
-      })), /* @__PURE__ */ React25.createElement(Button11, {
+        className: getSize11(4)
+      })), /* @__PURE__ */ React24.createElement(Button9, {
         disabled,
         className: "flex items-center gap-2 pis-2 pie-4",
-        onClick: cancel,
-        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`,
+        onClick: () => {
+          var _a;
+          return (_a = joinState == null ? void 0 : joinState.context[invitationType].invitationObservable) == null ? void 0 : _a.cancel();
+        },
         "data-testid": "invitation-rescuer-cancel"
-      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
+      }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
         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:
+        className: getSize11(4)
+      }), /* @__PURE__ */ React24.createElement("span", null, t("cancel label")))));
+    case Invitation6.State.TIMEOUT:
+    case Invitation6.State.CANCELLED:
+    case Invitation6.State.ERROR:
     default:
-      return /* @__PURE__ */ React25.createElement(Button11, {
+      return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ViewStateHeading, {
+        className: defaultDescription3
+      }, t(invitationState === Invitation6.State.TIMEOUT ? "timeout status label" : invitationState === Invitation6.State.CANCELLED ? "cancelled status label" : "error status label")), /* @__PURE__ */ React24.createElement("div", {
+        role: "none",
+        className: "grow"
+      }), /* @__PURE__ */ React24.createElement(Button9, {
         disabled,
-        className: "grow flex items-center gap-2 pli-2",
-        onClick: () => dispatch({
-          type: "reset invitation",
-          from: invitationType
+        className: "flex items-center gap-2 pli-2",
+        onClick: () => joinSend({
+          type: `reset${Domain}Invitation`
         }),
-        "data-autofocus": `${invitationType} invitation acceptor; invitation rescuer`,
         "data-testid": "invitation-rescuer-reset"
-      }, /* @__PURE__ */ React25.createElement(CaretLeft7, {
+      }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
         weight: "bold",
-        className: mx20(getSize12(5), "invisible")
-      }), /* @__PURE__ */ React25.createElement("span", {
+        className: mx18(getSize11(5), "invisible")
+      }), /* @__PURE__ */ React24.createElement("span", {
         className: "grow"
-      }, t("reset label")), /* @__PURE__ */ React25.createElement(ArrowsClockwise, {
-        weight: "bold",
-        className: getSize12(5)
-      }));
+      }, t("reset label")), /* @__PURE__ */ React24.createElement(ArrowsClockwise, {
+        className: getSize11(4)
+      })));
   }
 };
-var InvitationRescuer = ({ invitationType, ...viewStateProps }) => {
+var InvitationRescuer = ({ Domain, ...viewStateProps }) => {
+  var _a;
   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, {
+  const { joinSend, joinState } = viewStateProps;
+  const invitationState = (_a = joinState == null ? void 0 : joinState.context[Domain.toLowerCase()].invitation) == null ? void 0 : _a.state;
+  const { t } = useTranslation14("os");
+  return /* @__PURE__ */ React24.createElement(ViewState, _extends20({}, viewStateProps), typeof invitationState === "undefined" ? /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
+    role: "none",
+    className: "grow"
+  }), /* @__PURE__ */ React24.createElement(Button9, {
     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, {
+    className: "flex items-center gap-2 pli-2",
+    "data-autofocus": `inputting${Domain}InvitationCode`,
+    "data-testid": "invitation-rescuer-blank-reset",
+    onClick: () => joinSend({
+      type: `reset${Domain}Invitation`
+    })
+  }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
     weight: "bold",
-    className: mx20(getSize12(5), "invisible")
-  }), /* @__PURE__ */ React25.createElement("span", {
+    className: mx18(getSize11(5), "invisible")
+  }), /* @__PURE__ */ React24.createElement("span", {
     className: "grow"
-  }, t("connect label")), /* @__PURE__ */ React25.createElement(ArrowsClockwise, {
-    weight: "bold",
-    className: getSize12(5)
-  })) : /* @__PURE__ */ React25.createElement(InvitationActions, _extends21({}, {
-    activeInvitation,
+  }, t("reset label")), /* @__PURE__ */ React24.createElement(ArrowsClockwise, {
+    className: getSize11(5)
+  }))) : /* @__PURE__ */ React24.createElement(InvitationActions, _extends20({}, {
+    invitationState,
     disabled,
-    dispatch,
-    invitationType
+    joinSend,
+    joinState,
+    Domain
   })));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx
-import { CaretLeft as CaretLeft8, CaretRight as CaretRight7 } from "@phosphor-icons/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) {
+import { CaretLeft as CaretLeft6, CaretRight as CaretRight6 } from "@phosphor-icons/react";
+import React25, { useCallback as useCallback5, useState as useState4 } from "react";
+import { useInvitationStatus as useInvitationStatus4 } from "@dxos/react-client";
+import { Button as Button10, getSize as getSize12, Input as Input3, mx as mx19, 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) {
@@ -1631,13 +1854,14 @@ function _extends22() {
     }
     return target;
   };
-  return _extends22.apply(this, arguments);
+  return _extends21.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"),
+var PureInvitationAuthenticatorContent = ({ disabled, failed, joinSend, joinState, Domain, onChange, onAuthenticate }) => {
+  const { t } = useTranslation15("os");
+  const invitationType = Domain.toLowerCase();
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Input3, _extends21({
+    label: /* @__PURE__ */ React25.createElement(ViewStateHeading, null, t("auth code input label")),
     size: "pin",
     length: pinLength,
     onChange,
@@ -1646,67 +1870,65 @@ var PureInvitationAuthenticatorContent = ({ disabled, failed, dispatch, invitati
       root: {
         className: "m-0"
       },
-      label: {
-        className: "sr-only"
-      },
       description: {
         className: "text-center"
       },
       input: {
         disabled,
         inputMode: "numeric",
+        autoComplete: "off",
         pattern: "\\d*",
-        "data-autofocus": `${invitationType} invitation acceptor; invitation authenticator`,
-        "data-testid": `${invitationType}-auth-code-input`
+        "data-autofocus": `connecting${Domain}Invitation inputting${Domain}VerificationCode authenticationFailing${Domain}VerificationCode authenticating${Domain}VerificationCode`,
+        "data-testid": `${invitationType}-auth-code-input`,
+        "data-1p-ignore": true
       }
     }
   }, failed && {
     validationValence: "error",
     validationMessage: t("failed to authenticate message")
-  })), /* @__PURE__ */ React26.createElement("div", {
+  })), /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React26.createElement("div", {
+  }), /* @__PURE__ */ React25.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React26.createElement(Button12, {
+  }, /* @__PURE__ */ React25.createElement(Button10, {
     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, {
+  }, /* @__PURE__ */ React25.createElement(CaretLeft6, {
     weight: "bold",
-    className: mx21(getSize13(2), "invisible")
-  }), /* @__PURE__ */ React26.createElement("span", {
+    className: mx19(getSize12(2), "invisible")
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow"
-  }, t("next label")), /* @__PURE__ */ React26.createElement(CaretRight7, {
+  }, t("next label")), /* @__PURE__ */ React25.createElement(CaretRight6, {
     weight: "bold",
-    className: getSize13(4)
-  })), /* @__PURE__ */ React26.createElement(Button12, {
+    className: getSize12(4)
+  })), /* @__PURE__ */ React25.createElement(Button10, {
     disabled,
     className: "flex items-center gap-2 pis-2 pie-4",
-    onClick: () => dispatch({
-      type: "cancel invitation",
-      from: invitationType
-    }),
+    onClick: () => {
+      var _a;
+      return (_a = joinState == null ? void 0 : joinState.context[invitationType].invitationObservable) == null ? void 0 : _a.cancel();
+    },
     "data-testid": `${invitationType}-invitation-authenticator-cancel`
-  }, /* @__PURE__ */ React26.createElement(CaretLeft8, {
+  }, /* @__PURE__ */ React25.createElement(CaretLeft6, {
     weight: "bold",
-    className: getSize13(4)
-  }), /* @__PURE__ */ React26.createElement("span", null, t("cancel label")))));
+    className: getSize12(4)
+  }), /* @__PURE__ */ React25.createElement("span", null, t("cancel label")))));
 };
-var InvitationAuthenticatorContent = ({ disabled, invitation, dispatch, invitationType, failed }) => {
-  const [pinValue, setPinValue] = useState5("");
-  const { authenticate } = useInvitationStatus5(invitation);
+var InvitationAuthenticatorContent = ({ joinSend, joinState, disabled, invitation, Domain, failed }) => {
+  const invitationType = Domain.toLowerCase();
+  const [pinValue, setPinValue] = useState4("");
+  const { authenticate } = useInvitationStatus4(invitation);
   const onAuthenticate = useCallback5(() => {
-    dispatch({
-      type: "authenticating invitation",
-      from: invitationType
+    joinSend({
+      type: `authenticate${Domain}VerificationCode`
     });
     void authenticate(pinValue);
   }, [
-    dispatch,
-    invitationType,
+    joinSend,
     authenticate,
     pinValue
   ]);
@@ -1720,39 +1942,46 @@ var InvitationAuthenticatorContent = ({ disabled, invitation, dispatch, invitati
     authenticate,
     pinValue
   ]);
-  return /* @__PURE__ */ React26.createElement(PureInvitationAuthenticatorContent, _extends22({}, {
+  return /* @__PURE__ */ React25.createElement(PureInvitationAuthenticatorContent, _extends21({}, {
     disabled,
     failed,
-    dispatch,
-    invitationType,
+    joinSend,
+    joinState,
+    Domain,
     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({}, {
+var InvitationAuthenticator = ({ failed, Domain, ...viewStateProps }) => {
+  const { joinSend, joinState } = viewStateProps;
+  const disabled = !viewStateProps.active || [
+    "connecting",
+    "authenticating"
+  ].some((str) => joinState == null ? void 0 : joinState.configuration[0].id.includes(str));
+  const activeInvitation = joinState == null ? void 0 : joinState.context[Domain.toLowerCase()].invitationObservable;
+  return /* @__PURE__ */ React25.createElement(ViewState, _extends21({}, viewStateProps), !activeInvitation ? /* @__PURE__ */ React25.createElement(PureInvitationAuthenticatorContent, _extends21({}, {
     disabled,
     failed,
-    dispatch,
-    invitationType,
+    joinSend,
+    joinState,
+    Domain,
     onChange: () => {
     },
     onAuthenticate: () => {
     }
-  })) : /* @__PURE__ */ React26.createElement(InvitationAuthenticatorContent, _extends22({}, {
+  })) : /* @__PURE__ */ React25.createElement(InvitationAuthenticatorContent, _extends21({}, {
     disabled,
     failed,
     invitation: activeInvitation,
-    dispatch,
-    invitationType
+    joinSend,
+    joinState,
+    Domain
   })));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
-function _extends23() {
-  _extends23 = Object.assign || function(target) {
+function _extends22() {
+  _extends22 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1763,322 +1992,239 @@ function _extends23() {
     }
     return target;
   };
-  return _extends23.apply(this, arguments);
+  return _extends22.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;
+var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone, preventExit }) => {
+  const client = useClient5();
   const identity = useIdentity2();
-  const [prevIdentity, setPrevIdentity] = useState6(identity);
-  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";
+  const titleId = useId4("joinPanel__title");
+  const [joinState, joinSend, joinService] = useJoinMachine(client, {
+    context: {
+      mode,
+      identity,
+      ...initialInvitationCode && {
+        [mode === "halo-only" ? "halo" : "space"]: {
+          unredeemedCode: initialInvitationCode
         }
-        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"
+      }
+    }
   });
-  if (identity !== prevIdentity) {
-    setPrevIdentity(identity);
-    identity && !prevIdentity && dispatch({
-      type: "added identity",
-      identity
-    });
-  }
-  useEffect(() => {
-    if (unredeemedHaloInvitationCode) {
-      dispatch({
-        type: "select addition method",
-        method: "accept device invitation"
+  useEffect2(() => {
+    const subscription = joinService.subscribe((state) => {
+      log2("[state]", state, {
+        file: "JoinPanel.tsx",
+        line: 48,
+        scope: void 0,
+        callSite: (f, a) => f(...a)
       });
-    }
+    });
+    return subscription.unsubscribe;
   }, [
-    unredeemedHaloInvitationCode
+    joinService
   ]);
-  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: 163,
-      scope: void 0,
-      callSite: (f, a) => f(...a)
-    });
-    const $nextAutofocus = document.querySelector(`[data-autofocus="${attrValue}"]`);
+  useEffect2(() => {
+    const stateStack = joinState.configuration[0].id.split(".");
+    const innermostState = stateStack[stateStack.length - 1];
+    const autoFocusValue = innermostState === "finishingJoining" ? "successSpaceInvitation" : innermostState;
+    const $nextAutofocus = document.querySelector(`[data-autofocus~="${autoFocusValue}"]`);
     if ($nextAutofocus) {
       $nextAutofocus.focus();
     }
   }, [
-    joinState.activeView,
-    joinState.spaceViewState,
-    joinState.haloViewState
+    joinState.value
   ]);
-  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(DensityProvider4, {
+  return /* @__PURE__ */ React26.createElement(DensityProvider4, {
     density: "fine"
-  }, /* @__PURE__ */ React27.createElement(JoinHeading, _extends23({}, {
+  }, /* @__PURE__ */ React26.createElement(JoinHeading, _extends22({}, {
     mode,
     titleId,
-    invitation: joinState.spaceInvitation,
+    joinState,
     onExit,
     exitActionParent,
     preventExit
-  })), /* @__PURE__ */ React27.createElement("div", {
+  })), /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "is-full overflow-hidden"
-  }, /* @__PURE__ */ React27.createElement("div", {
+  }, /* @__PURE__ */ React26.createElement("div", {
     role: "none",
-    className: "flex is-[1300%]",
+    className: "flex is-[1200%]",
     "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",
+  }, /* @__PURE__ */ React26.createElement(AdditionMethodSelector, _extends22({}, {
+    joinState,
+    joinSend,
+    active: joinState.matches({
+      choosingIdentity: "choosingAuthMethod"
+    })
+  })), /* @__PURE__ */ React26.createElement(IdentityInput, _extends22({}, {
+    joinState,
+    joinSend,
+    active: joinState.matches({
+      choosingIdentity: "creatingIdentity"
+    }),
     method: "create identity"
-  })), /* @__PURE__ */ React27.createElement(IdentityInput, _extends23({}, {
-    dispatch,
-    active: joinState.activeView === "identity input" && joinState.additionMethod === "recover identity",
+  })), /* @__PURE__ */ React26.createElement(IdentityInput, _extends22({}, {
+    joinState,
+    joinSend,
+    active: joinState.matches({
+      choosingIdentity: "recoveringIdentity"
+    }),
     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" && {
+  })), /* @__PURE__ */ React26.createElement(InvitationInput, _extends22({}, {
+    joinState,
+    joinSend,
+    active: joinState.matches({
+      choosingIdentity: {
+        acceptingHaloInvitation: "inputtingHaloInvitationCode"
+      }
+    }),
+    Domain: "Halo"
+  })), /* @__PURE__ */ React26.createElement(InvitationRescuer, _extends22({}, {
+    joinState,
+    joinSend,
+    active: [
+      {
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "connectingHaloInvitation"
+          }
+        }
+      },
+      {
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "failingHaloInvitation"
+          }
+        }
+      }
+    ].some(joinState.matches),
+    Domain: "Halo"
+  })), /* @__PURE__ */ React26.createElement(InvitationAuthenticator, _extends22({}, {
+    joinState,
+    joinSend,
+    active: [
+      {
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "inputtingHaloVerificationCode"
+          }
+        }
+      },
+      {
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "authenticatingHaloVerificationCode"
+          }
+        }
+      },
+      {
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "authenticationFailingHaloVerificationCode"
+          }
+        }
+      }
+    ].some(joinState.matches),
+    Domain: "Halo",
+    ...joinState.matches({
+      acceptingHaloInvitation: {
+        acceptingRedeemedHaloInvitation: "authenticationFailingHaloVerificationCode"
+      }
+    }) && {
       failed: true
     }
-  })), /* @__PURE__ */ React27.createElement(InvitationAccepted, _extends23({}, {
-    dispatch,
-    activeInvitation: joinState.haloInvitation || true,
-    active: joinState.activeView === "halo invitation acceptor" && joinState.haloViewState === "invitation accepted",
-    invitationType: "halo",
+  })), /* @__PURE__ */ React26.createElement(InvitationAccepted, _extends22({}, {
+    joinState,
+    joinSend,
+    active: [
+      {
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "successHaloInvitation"
+          }
+        }
+      },
+      "finishingJoiningHalo"
+    ].some(joinState.matches),
+    Domain: "Halo",
     doneActionParent,
     onDone
-  })), /* @__PURE__ */ React27.createElement(IdentityAdded, _extends23({}, {
+  })), /* @__PURE__ */ React26.createElement(IdentityAdded, _extends22({}, {
+    joinState,
+    joinSend,
     mode,
-    dispatch,
-    addedIdentity: joinState.selectedIdentity,
-    active: joinState.activeView === "identity added",
+    active: joinState.matches({
+      choosingIdentity: "confirmingAddedIdentity"
+    }),
     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" && {
+  })), /* @__PURE__ */ React26.createElement(InvitationInput, _extends22({}, {
+    joinState,
+    joinSend,
+    active: joinState.matches({
+      acceptingSpaceInvitation: "inputtingSpaceInvitationCode"
+    }),
+    Domain: "Space"
+  })), /* @__PURE__ */ React26.createElement(InvitationRescuer, _extends22({}, {
+    joinState,
+    joinSend,
+    active: [
+      {
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: "connectingSpaceInvitation"
+        }
+      },
+      {
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: "failingSpaceInvitation"
+        }
+      }
+    ].some(joinState.matches),
+    Domain: "Space"
+  })), /* @__PURE__ */ React26.createElement(InvitationAuthenticator, _extends22({}, {
+    joinState,
+    joinSend,
+    active: [
+      {
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: "inputtingSpaceVerificationCode"
+        }
+      },
+      {
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: "authenticatingSpaceVerificationCode"
+        }
+      },
+      {
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: "authenticationFailingSpaceVerificationCode"
+        }
+      }
+    ].some(joinState.matches),
+    Domain: "Space",
+    ...joinState.matches({
+      acceptingSpaceInvitation: {
+        acceptingRedeemedSpaceInvitation: "authenticationFailingSpaceVerificationCode"
+      }
+    }) && {
       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",
+  })), /* @__PURE__ */ React26.createElement(InvitationAccepted, _extends22({}, {
+    joinState,
+    joinSend,
+    active: joinState.matches("finishingJoiningSpace"),
+    Domain: "Space",
     doneActionParent,
     onDone
   })))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/SpacePanel/SpacePanel.tsx
-import { UserPlus as UserPlus3 } from "@phosphor-icons/react";
-import React28, { useReducer as useReducer3 } from "react";
+import { UserPlus as UserPlus2 } from "@phosphor-icons/react";
+import React27, { useReducer as useReducer2 } from "react";
 import { useSpaceInvitations as useSpaceInvitations2, observer } from "@dxos/react-client";
-import { Button as Button13, DensityProvider as DensityProvider5, getSize as getSize14, mx as mx22, useTranslation as useTranslation17 } from "@dxos/react-components";
-function _extends24() {
-  _extends24 = Object.assign || function(target) {
+import { Button as Button11, DensityProvider as DensityProvider5, getSize as getSize13, mx as mx20, useTranslation as useTranslation16 } from "@dxos/react-components";
+function _extends23() {
+  _extends23 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2089,39 +2235,39 @@ function _extends24() {
     }
     return target;
   };
-  return _extends24.apply(this, arguments);
+  return _extends23.apply(this, arguments);
 }
 var CurrentSpaceView = observer(({ space, createInvitationUrl, titleId }) => {
-  const { t } = useTranslation17("os");
+  const { t } = useTranslation16("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", {
+  return /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: "flex flex-col"
-  }, /* @__PURE__ */ React28.createElement("div", {
+  }, /* @__PURE__ */ React27.createElement("div", {
     role: "none",
-    className: mx22(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
-  }, /* @__PURE__ */ React28.createElement("h2", {
+    className: mx20(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
+  }, /* @__PURE__ */ React27.createElement("h2", {
     id: titleId,
-    className: mx22("grow font-system-medium", !name && "font-mono")
-  }, name != null ? name : space.key.truncate())), /* @__PURE__ */ React28.createElement("div", {
+    className: mx20("grow font-system-medium", !name && "font-mono")
+  }, name != null ? name : space.key.truncate())), /* @__PURE__ */ React27.createElement("div", {
     role: "region",
-    className: mx22(defaultSurface, "rounded-be-md p-2")
-  }, /* @__PURE__ */ React28.createElement(InvitationList, {
+    className: mx20(defaultSurface, "rounded-be-md p-2")
+  }, /* @__PURE__ */ React27.createElement(InvitationList, {
     invitations,
     onClickRemove: ({ invitation }) => invitation && (space == null ? void 0 : space.removeInvitation(invitation.invitationId)),
     createInvitationUrl
-  }), /* @__PURE__ */ React28.createElement(Button13, {
+  }), /* @__PURE__ */ React27.createElement(Button11, {
     className: "is-full flex gap-2 mbs-2",
     onClick: () => space == null ? void 0 : space.createInvitation(),
     "data-testid": "spaces-panel.create-invitation"
-  }, /* @__PURE__ */ React28.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React28.createElement(UserPlus3, {
-    className: getSize14(4),
+  }, /* @__PURE__ */ React27.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React27.createElement(UserPlus2, {
+    className: getSize13(4),
     weight: "bold"
-  })), /* @__PURE__ */ React28.createElement(PanelSeparator, null), /* @__PURE__ */ React28.createElement(SpaceMemberListContainer, {
+  })), /* @__PURE__ */ React27.createElement(PanelSeparator, null), /* @__PURE__ */ React27.createElement(SpaceMemberListContainer, {
     spaceKey: space.key,
     includeSelf: true
   })));
@@ -2136,17 +2282,17 @@ var SpacePanel = (props) => {
     }
     return nextState;
   };
-  const [panelState] = useReducer3(reducer, {
+  const [panelState] = useReducer2(reducer, {
     activeView: "current space"
   });
-  return /* @__PURE__ */ React28.createElement(DensityProvider5, {
+  return /* @__PURE__ */ React27.createElement(DensityProvider5, {
     density: "fine"
-  }, panelState.activeView === "current space" ? /* @__PURE__ */ React28.createElement(CurrentSpaceView, _extends24({}, props)) : null);
+  }, panelState.activeView === "current space" ? /* @__PURE__ */ React27.createElement(CurrentSpaceView, _extends23({}, props)) : null);
 };
 
 // packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
-function _extends25() {
-  _extends25 = Object.assign || function(target) {
+function _extends24() {
+  _extends24 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2157,12 +2303,12 @@ function _extends25() {
     }
     return target;
   };
-  return _extends25.apply(this, arguments);
+  return _extends24.apply(this, arguments);
 }
 var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true, onClickManageProfile, ...popoverProps }) => {
   var _a, _b, _c;
-  return /* @__PURE__ */ React29.createElement(PanelPopover, _extends25({}, popoverProps, {
-    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React29.createElement(Avatar8, {
+  return /* @__PURE__ */ React28.createElement(PanelPopover, _extends24({}, popoverProps, {
+    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React28.createElement(Avatar5, {
       size: 10,
       variant: "circle",
       fallbackValue: identity.identityKey.toHex(),
@@ -2172,11 +2318,11 @@ var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true
       ...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", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
+        className: mx21("flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
       }
     },
     triggerIsInToolbar
-  }), /* @__PURE__ */ React29.createElement(IdentityPanel, _extends25({}, {
+  }), /* @__PURE__ */ React28.createElement(IdentityPanel, _extends24({}, {
     identity,
     onClickManageProfile
   })));
@@ -2184,10 +2330,10 @@ var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true
 
 // packages/apps/patterns/react-ui/src/composites/JoinDialog/JoinDialog.tsx
 import { Action, Cancel } from "@radix-ui/react-alert-dialog";
-import React30 from "react";
+import React29 from "react";
 import { ThemeContext as ThemeContext2, useId as useId5 } from "@dxos/react-components";
-function _extends26() {
-  _extends26 = Object.assign || function(target) {
+function _extends25() {
+  _extends25 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2198,41 +2344,41 @@ function _extends26() {
     }
     return target;
   };
-  return _extends26.apply(this, arguments);
+  return _extends25.apply(this, arguments);
 }
 var JoinDialog = ({ slots, ...joinPanelProps }) => {
   const titleId = useId5("joinDialog__title");
-  return /* @__PURE__ */ React30.createElement(PanelAlertDialog, _extends26({}, {
+  return /* @__PURE__ */ React29.createElement(PanelAlertDialog, _extends25({}, {
     slots,
     titleId
-  }), /* @__PURE__ */ React30.createElement(ThemeContext2.Provider, {
+  }), /* @__PURE__ */ React29.createElement(ThemeContext2.Provider, {
     value: {
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React30.createElement(JoinPanel, _extends26({}, {
+  }, /* @__PURE__ */ React29.createElement(JoinPanel, _extends25({}, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React30.createElement(Cancel, {
+    exitActionParent: /* @__PURE__ */ React29.createElement(Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React30.createElement(Action, {
+    doneActionParent: /* @__PURE__ */ React29.createElement(Action, {
       asChild: true
     })
   }))));
 };
 
 // packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
-import React33, { useEffect as useEffect2, useState as useState7 } from "react";
-import { log as log2 } from "@dxos/log";
+import React32, { useEffect as useEffect3, useState as useState5 } from "react";
+import { log as log3 } from "@dxos/log";
 import { ShellDisplay, ShellLayout } from "@dxos/protocols/proto/dxos/iframe";
-import { useClient as useClient7, useSpace as useSpace3, useSpaces } from "@dxos/react-client";
+import { useClient as useClient6, useSpace as useSpace3, useSpaces } from "@dxos/react-client";
 
 // packages/apps/patterns/react-ui/src/composites/DevicesDialog/DevicesDialog.tsx
 import { Close } from "@radix-ui/react-dialog";
-import React31 from "react";
+import React30 from "react";
 import { ThemeContext as ThemeContext3, useId as useId6 } from "@dxos/react-components";
-function _extends27() {
-  _extends27 = Object.assign || function(target) {
+function _extends26() {
+  _extends26 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2243,11 +2389,11 @@ function _extends27() {
     }
     return target;
   };
-  return _extends27.apply(this, arguments);
+  return _extends26.apply(this, arguments);
 }
 var DevicesDialog = ({ slots, ...devicesDialogProps }) => {
   const titleId = useId6("spaceDialog__title");
-  return /* @__PURE__ */ React31.createElement(PanelDialog, _extends27({}, {
+  return /* @__PURE__ */ React30.createElement(PanelDialog, _extends26({}, {
     slots: {
       ...slots,
       root: {
@@ -2259,14 +2405,14 @@ var DevicesDialog = ({ slots, ...devicesDialogProps }) => {
       }
     },
     titleId
-  }), /* @__PURE__ */ React31.createElement(ThemeContext3.Provider, {
+  }), /* @__PURE__ */ React30.createElement(ThemeContext3.Provider, {
     value: {
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React31.createElement(DevicesPanel, _extends27({}, {
+  }, /* @__PURE__ */ React30.createElement(DevicesPanel, _extends26({}, {
     ...devicesDialogProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React31.createElement(Close, {
+    doneActionParent: /* @__PURE__ */ React30.createElement(Close, {
       asChild: true
     })
   }))));
@@ -2274,10 +2420,10 @@ var DevicesDialog = ({ slots, ...devicesDialogProps }) => {
 
 // packages/apps/patterns/react-ui/src/composites/SpaceDialog/SpaceDialog.tsx
 import { Close as Close2 } from "@radix-ui/react-dialog";
-import React32 from "react";
+import React31 from "react";
 import { ThemeContext as ThemeContext4, useId as useId7 } from "@dxos/react-components";
-function _extends28() {
-  _extends28 = Object.assign || function(target) {
+function _extends27() {
+  _extends27 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2288,11 +2434,11 @@ function _extends28() {
     }
     return target;
   };
-  return _extends28.apply(this, arguments);
+  return _extends27.apply(this, arguments);
 }
 var SpaceDialog = ({ slots, ...spacePanelProps }) => {
   const titleId = useId7("spaceDialog__title");
-  return /* @__PURE__ */ React32.createElement(PanelDialog, _extends28({}, {
+  return /* @__PURE__ */ React31.createElement(PanelDialog, _extends27({}, {
     slots: {
       ...slots,
       root: {
@@ -2304,14 +2450,14 @@ var SpaceDialog = ({ slots, ...spacePanelProps }) => {
       }
     },
     titleId
-  }), /* @__PURE__ */ React32.createElement(ThemeContext4.Provider, {
+  }), /* @__PURE__ */ React31.createElement(ThemeContext4.Provider, {
     value: {
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React32.createElement(SpacePanel, _extends28({}, {
+  }, /* @__PURE__ */ React31.createElement(SpacePanel, _extends27({}, {
     ...spacePanelProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React32.createElement(Close2, {
+    doneActionParent: /* @__PURE__ */ React31.createElement(Close2, {
       asChild: true
     })
   }))));
@@ -2319,22 +2465,22 @@ var SpaceDialog = ({ slots, ...spacePanelProps }) => {
 
 // packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
 var Shell = ({ runtime, origin }) => {
-  const [{ layout, invitationCode, spaceKey }, setLayout] = useState7({
+  const [{ layout, invitationCode, spaceKey }, setLayout] = useState5({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey
   });
-  const client = useClient7();
+  const client = useClient6();
   const spaces = useSpaces();
   const space = useSpace3(spaceKey);
-  useEffect2(() => {
+  useEffect3(() => {
     return runtime.layoutUpdate.on((request) => setLayout(request));
   }, [
     runtime
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (layout === ShellLayout.SPACE_INVITATIONS && !space) {
-      log2.warn("No space found for shell space invitations.", {}, {
+      log3.warn("No space found for shell space invitations.", {}, {
         file: "Shell.tsx",
         line: 33,
         scope: void 0,
@@ -2355,11 +2501,11 @@ var Shell = ({ runtime, origin }) => {
   ]);
   switch (layout) {
     case ShellLayout.INITIALIZE_IDENTITY:
-      return /* @__PURE__ */ React33.createElement(JoinDialog, {
+      return /* @__PURE__ */ React32.createElement(JoinDialog, {
         mode: "halo-only",
         initialInvitationCode: invitationCode,
         onDone: async () => {
-          spaces.length > 0 || await client.echo.createSpace();
+          spaces.length > 0 || await client.createSpace();
           await runtime.setAppContext({
             display: ShellDisplay.NONE
           });
@@ -2367,7 +2513,7 @@ var Shell = ({ runtime, origin }) => {
         }
       });
     case ShellLayout.DEVICE_INVITATIONS:
-      return /* @__PURE__ */ React33.createElement(DevicesDialog, {
+      return /* @__PURE__ */ React32.createElement(DevicesDialog, {
         createInvitationUrl: (invitationCode2) => `${origin}?haloInvitationCode=${invitationCode2}`,
         onDone: async () => {
           await runtime.setAppContext({
@@ -2377,7 +2523,7 @@ var Shell = ({ runtime, origin }) => {
         }
       });
     case ShellLayout.SPACE_INVITATIONS:
-      return space ? /* @__PURE__ */ React33.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React32.createElement(SpaceDialog, {
         space,
         createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
         onDone: async () => {
@@ -2388,7 +2534,7 @@ var Shell = ({ runtime, origin }) => {
         }
       }) : null;
     case ShellLayout.JOIN_SPACE:
-      return /* @__PURE__ */ React33.createElement(JoinDialog, {
+      return /* @__PURE__ */ React32.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
         onDone: async (result) => {
           var _a;
@@ -2411,14 +2557,14 @@ var Shell = ({ runtime, origin }) => {
 };
 
 // packages/apps/patterns/react-ui/src/composites/Shell/ShellContext.tsx
-import React34, { createContext as createContext2, useCallback as useCallback6, useContext as useContext2, useEffect as useEffect3, useMemo as useMemo3, useState as useState8 } from "react";
+import React33, { createContext as createContext2, useCallback as useCallback6, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo3, useState as useState6 } from "react";
 import { IFrameClientServicesProxy, ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout2 } from "@dxos/client";
 import { MemoryShellRuntime } from "@dxos/client-services";
-import { useClient as useClient8, useIdentity as useIdentity3 } from "@dxos/react-client";
-import { mx as mx24 } from "@dxos/react-components";
+import { useClient as useClient7, useIdentity as useIdentity3 } from "@dxos/react-client";
+import { mx as mx22 } from "@dxos/react-components";
 var ShellContext = /* @__PURE__ */ createContext2({});
 var useShell = () => {
-  const client = useClient8();
+  const client = useClient7();
   const { runtime, setDisplay } = useContext2(ShellContext);
   const setLayout = async (layout, options) => {
     if (runtime) {
@@ -2438,21 +2584,21 @@ var useShell = () => {
   };
 };
 var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
-  useEffect3(() => {
+  useEffect4(() => {
     if (client.services instanceof IFrameClientServicesProxy && onJoinedSpace) {
       return client.services.joinedSpace.on(onJoinedSpace);
     }
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (client.services instanceof IFrameClientServicesProxy) {
       client.services.setSpaceProvider(() => space == null ? void 0 : space.key);
     }
   }, [
     space
   ]);
-  const client = useClient8();
+  const client = useClient7();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState8(!identity || spaceInvitationCode || haloInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const [display, setDisplay] = useState6(!identity || spaceInvitationCode || haloInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
   const shellRuntime = useMemo3(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") === "true") {
       return;
@@ -2491,7 +2637,7 @@ var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedS
     space,
     shellRuntime
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!shellRuntime) {
       return;
     }
@@ -2501,7 +2647,7 @@ var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedS
     shellRuntime,
     handleKeyDown
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!shellRuntime) {
       return;
     }
@@ -2512,12 +2658,12 @@ var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedS
   }, [
     shellRuntime
   ]);
-  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, shellRuntime && /* @__PURE__ */ React34.createElement("div", {
-    className: mx24(display === ShellDisplay2.NONE ? "hidden" : "")
-  }, /* @__PURE__ */ React34.createElement(Shell, {
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, shellRuntime && /* @__PURE__ */ React33.createElement("div", {
+    className: mx22(display === ShellDisplay2.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ React33.createElement(Shell, {
     runtime: shellRuntime,
     origin: window.location.origin
-  })), /* @__PURE__ */ React34.createElement(ShellContext.Provider, {
+  })), /* @__PURE__ */ React33.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,
       setDisplay
@@ -2536,7 +2682,7 @@ var os = {
   "sidebar label": "DXOS sidebar",
   "copy invitation code label": "Copy",
   "open share panel label": "Share",
-  "joining heading": "<small>Joining</small><large>{{name}}</large>",
+  "joining space heading": "Joining space",
   "join space heading": "Join a space",
   "halo heading": "Initialize device identity",
   "exit label": "Exit",
@@ -2555,7 +2701,7 @@ var os = {
   "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",
+  "addition method selector title": "An identity is required to continue",
   "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.",
@@ -2576,7 +2722,7 @@ var os = {
   "cancel label": "Cancel",
   "done label": "Done",
   "reset label": "Start over",
-  "auth code input label": "Auth code provided by the invitation sender",
+  "auth code input label": "Enter the verification code",
   "invitation input label": "Paste an invitation code or URL",
   "create device invitation label": "Invite",
   "create space invitation label": "Invite",
@@ -2590,7 +2736,9 @@ var os = {
   "view space invitations label": "View space invitations",
   "toggle sidebar label": "Open/close sidebar",
   "open sidebar label": "Open sidebar",
-  "close sidebar label": "Close sidebar"
+  "close sidebar label": "Close sidebar",
+  "welcome message": "Welcome",
+  "selecting identity heading": "Selecting identity"
 };
 
 // packages/apps/patterns/react-ui/src/translations/index.ts