@dxos/shell 0.3.11-main.008b7c6

package/dist/lib/browser/react.mjs

@@ -0,0 +1,3617 @@
+import {
+  __export
+} from "./chunk-ZSTKOCBT.mjs";
+
+// packages/sdk/shell/src/components/Clipboard/CopyButton.tsx
+import { Check, Copy } from "@phosphor-icons/react";
+import React2, { useState as useState2 } from "react";
+import { Button, Tooltip, useTranslation } from "@dxos/react-ui";
+import { getSize, mx } from "@dxos/react-ui-theme";
+
+// packages/sdk/shell/src/components/Clipboard/ClipboardProvider.tsx
+import React, { createContext, useCallback, useContext, useState } from "react";
+var ClipboardContext = /* @__PURE__ */ createContext({
+  textValue: "",
+  setTextValue: async (_) => {
+  }
+});
+var useClipboardContext = () => useContext(ClipboardContext);
+var ClipboardProvider = ({ children }) => {
+  const [textValue, setInternalTextValue] = useState("");
+  const setTextValue = useCallback(async (nextValue) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return /* @__PURE__ */ React.createElement(ClipboardContext.Provider, {
+    value: {
+      textValue,
+      setTextValue
+    }
+  }, children);
+};
+
+// packages/sdk/shell/src/components/Clipboard/CopyButton.tsx
+var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
+var CopyButton = ({ value, classNames, iconProps, ...props }) => {
+  const { t } = useTranslation("os");
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  return /* @__PURE__ */ React2.createElement(Button, {
+    ...props,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ],
+    onClick: () => setTextValue(value),
+    "data-testid": "copy-invitation"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "pli-1"
+  }, t("copy invitation code label")), /* @__PURE__ */ React2.createElement(Copy, {
+    className: getSize(4),
+    weight: "bold",
+    ...iconProps
+  })), /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "pli-1"
+  }, t("copy invitation code success label")), /* @__PURE__ */ React2.createElement(Check, {
+    className: getSize(4),
+    weight: "bold",
+    ...iconProps
+  })));
+};
+var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) => {
+  const { t } = useTranslation("os");
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  const label = isCopied ? t("copy invitation code success label") : t("copy invitation code label");
+  const [open, setOpen] = useState2(false);
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
+    delayDuration: 1500,
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
+    side: "bottom",
+    sideOffset: 12,
+    classNames: "z-30"
+  }, /* @__PURE__ */ React2.createElement("span", null, label), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    "aria-label": label,
+    ...props,
+    onClick: () => setTextValue(value).then(() => setOpen(true)),
+    "data-testid": "copy-invitation",
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button, {
+    variant,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ]
+  }, /* @__PURE__ */ React2.createElement(Copy, {
+    className: getSize(5),
+    weight: "bold",
+    ...iconProps
+  }))));
+};
+
+// packages/sdk/shell/src/components/CompoundButton/CompoundButton.tsx
+import React3 from "react";
+import { useId, useThemeContext, useElevationContext } from "@dxos/react-ui";
+import { descriptionText, descriptionTextPrimary, mx as mx2 } from "@dxos/react-ui-theme";
+var CompoundButton = ({ children, description, before, after, variant = "default", elevation: propsElevation, slots = {}, ...buttonProps }) => {
+  const labelId = useId("compoundButton-label");
+  const descriptionId = useId("compoundButton-description");
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const styleProps = {
+    ...buttonProps,
+    variant,
+    elevation,
+    textWrap: true
+  };
+  const buttonClassName = tx("button.root", "button button--compound", styleProps, "flex items-center gap-4 plb-2.5", slots.root?.className);
+  return /* @__PURE__ */ React3.createElement("button", {
+    ...buttonProps,
+    ...slots.root,
+    className: buttonClassName,
+    "aria-labelledby": labelId,
+    ...description && {
+      "aria-describedby": descriptionId
+    }
+  }, before && /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "grow-0"
+  }, before), /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    ...slots.middle,
+    className: mx2("grow whitespace-normal flex flex-col gap-1 text-left", slots.middle?.className)
+  }, /* @__PURE__ */ React3.createElement("p", {
+    ...slots.label,
+    id: labelId,
+    className: mx2(slots.label?.className)
+  }, children), description && /* @__PURE__ */ React3.createElement("p", {
+    id: descriptionId,
+    ...slots.description,
+    className: mx2("text-xs mbe-1 font-normal", variant === "primary" ? descriptionTextPrimary : descriptionText, slots.description?.className)
+  }, description)), after && /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "grow-0"
+  }, after));
+};
+
+// packages/sdk/shell/src/components/IdentityList/DeviceList.tsx
+import React5 from "react";
+import { List, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { descriptionText as descriptionText2, mx as mx4 } from "@dxos/react-ui-theme";
+
+// packages/sdk/shell/src/components/IdentityList/IdentityListItem.tsx
+import React4, { forwardRef } from "react";
+import { generateName } from "@dxos/display-name";
+import { SpaceMember } from "@dxos/react-client/echo";
+import { ListItem, Avatar, useJdenticonHref, useId as useId2 } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick }, forwardedRef) => {
+  const fallbackValue = identity.identityKey.toHex();
+  const labelId = useId2("identityListItem__label");
+  const jdenticon = useJdenticonHref(fallbackValue ?? "", 12);
+  const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
+  return /* @__PURE__ */ React4.createElement(ListItem.Root, {
+    classNames: mx3("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer"),
+    onClick: () => onClick?.(),
+    "data-testid": "identity-list-item",
+    labelId,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React4.createElement(Avatar.Root, {
+    status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
+    labelId
+  }, /* @__PURE__ */ React4.createElement(Avatar.Frame, null, /* @__PURE__ */ React4.createElement(Avatar.Fallback, {
+    href: jdenticon
+  })), /* @__PURE__ */ React4.createElement(Avatar.Label, {
+    classNames: "text-sm truncate pli-2"
+  }, displayName)));
+});
+
+// packages/sdk/shell/src/components/IdentityList/DeviceList.tsx
+var DeviceList = ({ devices, onSelect }) => {
+  const { t } = useTranslation2("os");
+  return devices.length > 0 ? /* @__PURE__ */ React5.createElement(List, {
+    classNames: "flex flex-col gap-2"
+  }, devices.map((device) => {
+    const identity = {
+      identityKey: device.deviceKey,
+      profile: {
+        displayName: `${device.profile?.platform} (${device.profile?.platformVersion}) on ${device.profile?.os} (${device.profile?.osVersion}) ${device.profile?.architecture ?? "Unknown"}-bit`
+      }
+    };
+    return /* @__PURE__ */ React5.createElement(IdentityListItem, {
+      key: device.deviceKey.toHex(),
+      identity,
+      onClick: onSelect && (() => onSelect(device))
+    });
+  })) : /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "grow flex items-center p-2"
+  }, /* @__PURE__ */ React5.createElement("p", {
+    className: mx4(descriptionText2, "text-center is-full")
+  }, t("empty device list message")));
+};
+
+// packages/sdk/shell/src/components/IdentityList/SpaceMemberList.tsx
+import React6, { useMemo } from "react";
+import { useClient } from "@dxos/react-client";
+import { useMembers } from "@dxos/react-client/echo";
+import { useTranslation as useTranslation3, List as List2 } from "@dxos/react-ui";
+import { descriptionText as descriptionText3, mx as mx5 } from "@dxos/react-ui-theme";
+var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
+  const client = useClient();
+  const allUnsortedMembers = useMembers(spaceKey);
+  const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((member) => member.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__ */ React6.createElement(SpaceMemberListImpl, {
+    members,
+    onSelect
+  });
+};
+var SpaceMemberListImpl = ({ members, onSelect }) => {
+  const { t } = useTranslation3("os");
+  const visibleMembers = members.filter((member) => member.identity);
+  return visibleMembers.length > 0 ? /* @__PURE__ */ React6.createElement(List2, {
+    classNames: "flex flex-col gap-2"
+  }, visibleMembers.map((member) => {
+    return /* @__PURE__ */ React6.createElement(IdentityListItem, {
+      key: member.identity.identityKey.toHex(),
+      identity: member.identity,
+      presence: member.presence,
+      onClick: onSelect && (() => onSelect(member))
+    });
+  })) : /* @__PURE__ */ React6.createElement("div", {
+    role: "none",
+    className: "grow flex items-center p-2"
+  }, /* @__PURE__ */ React6.createElement("p", {
+    className: mx5(descriptionText3, "text-center is-full mlb-2")
+  }, t("empty space members message")));
+};
+
+// packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
+import { X } from "@phosphor-icons/react";
+import React8, { useCallback as useCallback2 } from "react";
+import { Invitation as Invitation2, useInvitationStatus } from "@dxos/react-client/invitations";
+import { Button as Button2, ListItem as ListItem2, useTranslation as useTranslation4, Avatar as Avatar2, useThemeContext as useThemeContext2, Tooltip as Tooltip2 } from "@dxos/react-ui";
+import { focusRing, getSize as getSize2, mx as mx7 } from "@dxos/react-ui-theme";
+
+// packages/sdk/shell/src/util/invitationStatusValue.ts
+import { Invitation } from "@dxos/react-client/invitations";
+var invitationStatusValue = /* @__PURE__ */ new Map([
+  [
+    Invitation.State.ERROR,
+    -3
+  ],
+  [
+    Invitation.State.TIMEOUT,
+    -2
+  ],
+  [
+    Invitation.State.CANCELLED,
+    -1
+  ],
+  [
+    Invitation.State.INIT,
+    0
+  ],
+  [
+    Invitation.State.CONNECTING,
+    1
+  ],
+  [
+    Invitation.State.CONNECTED,
+    2
+  ],
+  [
+    Invitation.State.READY_FOR_AUTHENTICATION,
+    3
+  ],
+  [
+    Invitation.State.AUTHENTICATING,
+    4
+  ],
+  [
+    Invitation.State.SUCCESS,
+    5
+  ]
+]);
+
+// packages/sdk/shell/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/sdk/shell/src/components/AuthCode.tsx
+import React7 from "react";
+import { mx as mx6 } from "@dxos/react-ui-theme";
+var AuthCode = (props) => {
+  const { code, large, classNames } = props;
+  const l = code?.length ?? 0;
+  const left = code?.slice(0, l / 2);
+  const right = code?.slice(l / 2);
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(code ?? "");
+  };
+  return /* @__PURE__ */ React7.createElement("span", {
+    className: mx6(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 flex gap-1.5 rounded cursor-pointer", classNames),
+    onClick: handleCopy
+  }, /* @__PURE__ */ React7.createElement("span", null, left), /* @__PURE__ */ React7.createElement("span", null, right));
+};
+
+// packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
+var InvitationListItem = (props) => {
+  const { invitation } = props;
+  const invitationStatus = useInvitationStatus(invitation);
+  return /* @__PURE__ */ React8.createElement(InvitationListItemImpl, {
+    ...props,
+    invitationStatus
+  });
+};
+var avatarProps = {
+  size: 10,
+  variant: "circle"
+};
+var AvatarStackEffect = ({ animation, status }) => {
+  const { tx } = useThemeContext2();
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", {
+    role: "none",
+    className: mx7("absolute inline-start-1 inline-end-auto opacity-20", getSize2(avatarProps.size))
+  }, /* @__PURE__ */ React8.createElement("span", {
+    role: "none",
+    className: tx("avatar.ring", "avatar__ring", {
+      ...avatarProps,
+      status,
+      animation
+    }),
+    style: {
+      animationDelay: "400ms"
+    }
+  })), /* @__PURE__ */ React8.createElement("span", {
+    role: "none",
+    className: mx7("absolute inline-start-2 inline-end-auto opacity-50", getSize2(avatarProps.size))
+  }, /* @__PURE__ */ React8.createElement("span", {
+    role: "none",
+    className: tx("avatar.ring", "avatar__ring", {
+      ...avatarProps,
+      status,
+      animation
+    }),
+    style: {
+      animationDelay: "200ms"
+    }
+  })));
+};
+var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl }) => {
+  const { t } = useTranslation4("os");
+  const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
+  const isCancellable = !([
+    Invitation2.State.ERROR,
+    Invitation2.State.TIMEOUT,
+    Invitation2.State.CANCELLED
+  ].indexOf(invitationStatus) >= 0);
+  const showShare = type === Invitation2.Type.MULTIUSE || [
+    Invitation2.State.INIT,
+    Invitation2.State.CONNECTING,
+    Invitation2.State.CONNECTED
+  ].indexOf(invitationStatus) >= 0;
+  const showAuthCode = invitationStatus === Invitation2.State.READY_FOR_AUTHENTICATION;
+  const handleClickRemove = useCallback2(() => onClickRemove?.(invitation), [
+    invitation,
+    onClickRemove
+  ]);
+  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
+  const invitationId = invitation?.get().invitationId;
+  const avatarAnimation = [
+    Invitation2.State.INIT,
+    Invitation2.State.CONNECTING,
+    Invitation2.State.CONNECTED,
+    Invitation2.State.READY_FOR_AUTHENTICATION,
+    Invitation2.State.AUTHENTICATING
+  ].includes(invitationStatus) ? "pulse" : "none";
+  const avatarError = [
+    Invitation2.State.ERROR,
+    Invitation2.State.TIMEOUT,
+    Invitation2.State.CANCELLED
+  ].includes(invitationStatus);
+  const avatarGreen = [
+    Invitation2.State.CONNECTED,
+    Invitation2.State.READY_FOR_AUTHENTICATION,
+    Invitation2.State.AUTHENTICATING,
+    Invitation2.State.SUCCESS
+  ].includes(invitationStatus);
+  const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
+  return /* @__PURE__ */ React8.createElement(ListItem2.Root, {
+    id: invitationCode,
+    classNames: "flex gap-2 pis-3 pie-1 items-center relative"
+  }, /* @__PURE__ */ React8.createElement(ListItem2.Heading, {
+    classNames: "sr-only"
+  }, t(type === Invitation2.Type.MULTIUSE ? "invite many list item label" : "invite one list item label")), type === Invitation2.Type.MULTIUSE && /* @__PURE__ */ React8.createElement(AvatarStackEffect, {
+    status: avatarStatus,
+    animation: avatarAnimation
+  }), /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Avatar2.Root, {
+    ...avatarProps,
+    animation: avatarAnimation,
+    status: avatarStatus
+  }, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(Avatar2.Frame, {
+    tabIndex: 0,
+    classNames: [
+      focusRing,
+      "relative rounded-full"
+    ]
+  }, /* @__PURE__ */ React8.createElement(Avatar2.Fallback, {
+    text: toEmoji(invitationId)
+  })))), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
+    side: "left",
+    classNames: "z-[70]"
+  }, t(type === Invitation2.Type.MULTIUSE ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React8.createElement(Tooltip2.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Button2, {
+    variant: "ghost",
+    classNames: "grow justify-start font-medium",
+    onClick: () => send({
+      type: "selectInvitation",
+      invitation
+    }),
+    "data-testid": "show-qrcode"
+  }, /* @__PURE__ */ React8.createElement("span", null, t("open share panel label"))), /* @__PURE__ */ React8.createElement(CopyButtonIconOnly, {
+    variant: "ghost",
+    value: invitationUrl
+  })) : showAuthCode ? /* @__PURE__ */ React8.createElement(AuthCode, {
+    code: authCode,
+    classNames: "grow"
+  }) : invitationStatus === Invitation2.State.CONNECTING ? /* @__PURE__ */ React8.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Connecting...") : invitationStatus === Invitation2.State.AUTHENTICATING ? /* @__PURE__ */ React8.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Authenticating...") : invitationStatus === Invitation2.State.ERROR || invitationStatus === Invitation2.State.TIMEOUT ? /* @__PURE__ */ React8.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Failed") : invitationStatus === Invitation2.State.CANCELLED ? /* @__PURE__ */ React8.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Cancelled") : invitationStatus === Invitation2.State.SUCCESS ? /* @__PURE__ */ React8.createElement("span", {
+    className: "pli-2 grow truncate"
+  }, "User joined") : /* @__PURE__ */ React8.createElement("span", {
+    className: "grow"
+  }, " "), isCancellable ? /* @__PURE__ */ React8.createElement(Button2, {
+    variant: "ghost",
+    classNames: "flex gap-1",
+    onClick: cancel,
+    "data-testid": "cancel-invitation"
+  }, /* @__PURE__ */ React8.createElement("span", {
+    className: "sr-only"
+  }, t("cancel invitation label")), /* @__PURE__ */ React8.createElement(X, {
+    className: getSize2(5),
+    weight: "bold"
+  })) : /* @__PURE__ */ React8.createElement(Button2, {
+    variant: "ghost",
+    classNames: "flex gap-1",
+    onClick: handleClickRemove,
+    "data-testid": "remove-invitation"
+  }, /* @__PURE__ */ React8.createElement("span", {
+    className: "sr-only"
+  }, t("remove invitation label")), /* @__PURE__ */ React8.createElement(X, {
+    className: getSize2(5),
+    weight: "bold"
+  })));
+};
+
+// packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
+import React10, { useCallback as useCallback3 } from "react";
+import { useSpace, useSpaceInvitations } from "@dxos/react-client/echo";
+
+// packages/sdk/shell/src/components/InvitationList/InvitationList.tsx
+import React9 from "react";
+import { List as List3 } from "@dxos/react-ui";
+import { mx as mx8 } from "@dxos/react-ui-theme";
+var InvitationList = ({ invitations, send, ...invitationProps }) => {
+  const { className, InvitationListItem: Item = InvitationListItem } = invitationProps;
+  return /* @__PURE__ */ React9.createElement(List3, {
+    classNames: mx8("flex flex-col gap-2", className)
+  }, invitations.map((invitation) => {
+    const value = invitation.get().invitationId;
+    return /* @__PURE__ */ React9.createElement(Item, {
+      key: value,
+      send,
+      invitation,
+      ...invitationProps
+    });
+  }));
+};
+
+// packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
+var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
+  const space = useSpace(spaceKey);
+  const invitations = useSpaceInvitations(spaceKey);
+  const onClickRemove = useCallback3((invitation) => {
+    void invitation.cancel();
+  }, [
+    space
+  ]);
+  return /* @__PURE__ */ React10.createElement(InvitationList, {
+    invitations,
+    onClickRemove,
+    createInvitationUrl,
+    send
+  });
+};
+
+// packages/sdk/shell/src/components/Panel/Action.tsx
+import { CaretDown, Check as Check2, Placeholder } from "@phosphor-icons/react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React11, { forwardRef as forwardRef2 } from "react";
+import { Button as Button3, DropdownMenu, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { descriptionText as descriptionText4, getSize as getSize3, mx as mx9 } from "@dxos/react-ui-theme";
+var buttonColorFragment = (props) => {
+  const resolvedVariant = props.variant ?? "default";
+  return [
+    !props.disabled ? resolvedVariant === "default" ? "bg-neutral-25 hover:bg-white hover:text-primary-500 active:bg-neutral-25 dark:active:bg-neutral-800" : resolvedVariant === "ghost" ? "active:bg-neutral-125 dark:active:bg-neutral-800" : resolvedVariant === "primary" ? "active:bg-primary-700 dark:active:bg-primary-500" : "" : ""
+  ];
+};
+var defaultActions = {
+  noopAction: {
+    label: "No-op",
+    description: "",
+    icon: Placeholder,
+    onClick: () => {
+    }
+  }
+};
+var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+  const { classNames, variant, isFull = true, actions = defaultActions, activeAction: propsActiveAction, onChangeActiveAction, defaultActiveAction, ...rest } = props;
+  const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = useControllableState({
+    prop: propsActiveAction,
+    onChange: onChangeActiveAction,
+    defaultProp: defaultActiveAction
+  });
+  const activeAction = actions[activeActionKey2] ?? {};
+  const { t } = useTranslation5("os");
+  return /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    className: mx9("mbs-2 flex gap-px items-center", isFull && "is-full")
+  }, /* @__PURE__ */ React11.createElement(Button3, {
+    ...rest,
+    classNames: [
+      "bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none",
+      classNames,
+      ...buttonColorFragment(props)
+    ],
+    ref: forwardedRef,
+    variant,
+    onClick: activeAction.onClick
+  }, activeAction.icon && /* @__PURE__ */ React11.createElement(activeAction.icon, null), /* @__PURE__ */ React11.createElement("span", null, activeAction.label)), /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React11.createElement(Button3, {
+    classNames: [
+      "bs-11 flex-none rounded-is-none",
+      classNames,
+      ...buttonColorFragment(props)
+    ]
+  }, /* @__PURE__ */ React11.createElement("span", {
+    className: "sr-only"
+  }, t("invite options label")), /* @__PURE__ */ React11.createElement(CaretDown, null))), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, Object.entries(actions).map(([id, action]) => {
+    return /* @__PURE__ */ React11.createElement(DropdownMenu.CheckboxItem, {
+      key: id,
+      "aria-labelledby": `${id}__label`,
+      "aria-describedby": `${id}__description`,
+      checked: activeActionKey2 === id,
+      onCheckedChange: (checked) => checked && setActiveAction(id),
+      classNames: "gap-2"
+    }, action.icon && /* @__PURE__ */ React11.createElement(action.icon, {
+      className: getSize3(5)
+    }), /* @__PURE__ */ React11.createElement("div", {
+      role: "none",
+      className: "flex-1 min-is-0 space-b-1"
+    }, /* @__PURE__ */ React11.createElement("p", {
+      id: `${id}__label`
+    }, action.label), action.description && /* @__PURE__ */ React11.createElement("p", {
+      id: `${id}__description`,
+      className: descriptionText4
+    }, action.description)), /* @__PURE__ */ React11.createElement(DropdownMenu.ItemIndicator, {
+      asChild: true
+    }, /* @__PURE__ */ React11.createElement(Check2, null)));
+  })), /* @__PURE__ */ React11.createElement(DropdownMenu.Arrow, null))));
+});
+var Action = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+  const { children, classNames, variant, isFull = true, ...rest } = props;
+  return /* @__PURE__ */ React11.createElement(Button3, {
+    ...rest,
+    classNames: [
+      isFull && "is-full",
+      "bs-11 flex gap-2 mbs-2",
+      classNames,
+      ...buttonColorFragment(props)
+    ],
+    ref: forwardedRef,
+    variant
+  }, children);
+});
+
+// packages/sdk/shell/src/components/Panel/Actions.tsx
+import React12, { forwardRef as forwardRef3 } from "react";
+import { mx as mx10 } from "@dxos/react-ui-theme";
+var Actions = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React12.createElement("div", {
+    ...props,
+    className: mx10("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
+    ref: forwardedRef
+  }, children);
+});
+
+// packages/sdk/shell/src/components/Panel/CloseButton.tsx
+import { X as X2 } from "@phosphor-icons/react";
+import React13 from "react";
+import { Button as Button4, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { getSize as getSize4, mx as mx11 } from "@dxos/react-ui-theme";
+var CloseButton = ({ onDone, ...props }) => {
+  const { t } = useTranslation6("os");
+  return /* @__PURE__ */ React13.createElement(Button4, {
+    variant: "ghost",
+    classNames: mx11("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    onClick: () => onDone?.(),
+    ...props
+  }, /* @__PURE__ */ React13.createElement(X2, {
+    weight: "bold",
+    className: getSize4(4)
+  }), /* @__PURE__ */ React13.createElement("span", {
+    className: "sr-only"
+  }, t("exit label")));
+};
+
+// packages/sdk/shell/src/components/Panel/Emoji.tsx
+import React14 from "react";
+import { mx as mx12, getSize as getSize5 } from "@dxos/react-ui-theme";
+var Emoji = ({ text, className }) => {
+  const size = 14;
+  return /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: mx12(getSize5(size), "rounded relative pointer-events-none", className)
+  }, /* @__PURE__ */ React14.createElement("svg", {
+    viewBox: `0 0 ${size * 4} ${size * 4}`,
+    width: size * 4,
+    height: size * 4
+  }, /* @__PURE__ */ React14.createElement("text", {
+    x: "50%",
+    y: "50%",
+    textAnchor: "middle",
+    dominantBaseline: "middle",
+    baselineShift: "-0.25rem",
+    fontSize: "2.25rem"
+  }, text)));
+};
+var Centered = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: "absolute inset-0 flex items-center justify-center"
+  }, children);
+};
+
+// packages/sdk/shell/src/components/Panel/Heading.tsx
+import React15, { forwardRef as forwardRef4 } from "react";
+import { descriptionText as descriptionText5, mx as mx13 } from "@dxos/react-ui-theme";
+var Heading = /* @__PURE__ */ forwardRef4(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
+  return /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: "pbe-2 relative",
+    ref: forwardedRef
+  }, corner, /* @__PURE__ */ React15.createElement("h1", {
+    ...!titleSrOnly && {
+      id: titleId
+    },
+    className: mx13(descriptionText5, "text-center mlb-2", titleSrOnly && "invisible")
+  }, title), titleSrOnly && /* @__PURE__ */ React15.createElement("span", {
+    id: titleId
+  }, title), children);
+});
+
+// packages/sdk/shell/src/components/Panel/Label.tsx
+import React16 from "react";
+import { descriptionText as descriptionText6, mx as mx14 } from "@dxos/react-ui-theme";
+var Label = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ React16.createElement("span", {
+    className: mx14(descriptionText6, "text-center mli-6 whitespace-normal")
+  }, children);
+};
+
+// packages/sdk/shell/src/components/Panel/Input.tsx
+import React17 from "react";
+import { Input as UiInput } from "@dxos/react-ui";
+var Input = ({ validationMessage, label, ...props }) => {
+  return /* @__PURE__ */ React17.createElement(UiInput.Root, null, /* @__PURE__ */ React17.createElement(UiInput.Label, null, label), /* @__PURE__ */ React17.createElement(UiInput.TextInput, {
+    ...props,
+    classNames: "plb-3 mbs-2 text-center"
+  }), /* @__PURE__ */ React17.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React17.createElement(UiInput.Validation, null, validationMessage)));
+};
+
+// packages/sdk/shell/src/components/Panel/StepHeading.tsx
+import React18, { forwardRef as forwardRef5 } from "react";
+import { mx as mx15 } from "@dxos/react-ui-theme";
+var StepHeading = /* @__PURE__ */ forwardRef5(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement("h2", {
+    ...props,
+    className: mx15("font-normal text-sm mbe-4 mli-1 text-center", className),
+    ref: forwardedRef
+  }, children);
+});
+
+// packages/sdk/shell/src/components/Viewport/Viewport.tsx
+import { useFocusFinders } from "@fluentui/react-tabster";
+import { createContextScope } from "@radix-ui/react-context";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React19, { forwardRef as forwardRef6, useEffect } from "react";
+import { useForwardedRef } from "@dxos/react-ui";
+import { mx as mx16 } from "@dxos/react-ui-theme";
+var VIEWPORT_NAME = "Viewport";
+var VIEWS_NAME = "ViewportViews";
+var VIEW_NAME = "ViewportView";
+var [createViewportContext, createViewportScope] = createContextScope(VIEWPORT_NAME, []);
+var [ViewportProvider, useViewportContext] = createViewportContext(VIEWPORT_NAME);
+var ViewportRoot = ({ __viewportScope, classNames, children, defaultActiveView, activeView: propsActiveView, focusManaged = false, onActiveViewChange, ...props }) => {
+  const [activeView = "never", setActiveView] = useControllableState2({
+    prop: propsActiveView,
+    defaultProp: defaultActiveView,
+    onChange: onActiveViewChange
+  });
+  return /* @__PURE__ */ React19.createElement(ViewportProvider, {
+    focusManaged,
+    activeView,
+    setActiveView,
+    scope: __viewportScope
+  }, /* @__PURE__ */ React19.createElement("div", {
+    role: "region",
+    "aria-live": "polite",
+    ...props,
+    className: mx16("is-full overflow-hidden", classNames)
+  }, children));
+};
+ViewportRoot.displayName = VIEWPORT_NAME;
+var ViewportViews = ({ classNames, children, ...props }) => {
+  const size = {
+    inlineSize: `${Math.ceil(children.length) * 100}%`
+  };
+  return /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    style: size,
+    ...props,
+    className: mx16("flex", classNames)
+  }, children);
+};
+ViewportViews.displayName = VIEWS_NAME;
+var ViewportView = /* @__PURE__ */ forwardRef6(({ __viewportScope, classNames, children, id, ...props }, forwardedRef) => {
+  const { activeView, focusManaged } = useViewportContext(VIEW_NAME, __viewportScope);
+  const isActive = id === activeView;
+  const ref = useForwardedRef(forwardedRef);
+  const { findFirstFocusable } = useFocusFinders();
+  useEffect(() => {
+    if (!focusManaged && isActive && document.body.hasAttribute("data-is-keyboard") && ref.current) {
+      findFirstFocusable(ref.current)?.focus();
+    }
+  }, [
+    focusManaged,
+    ref.current,
+    isActive
+  ]);
+  return /* @__PURE__ */ React19.createElement("section", {
+    ...props,
+    ...!isActive && {
+      "aria-hidden": true
+    },
+    className: mx16("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
+    ref
+  }, children);
+});
+ViewportView.displayName = VIEW_NAME;
+var Viewport = {
+  Root: ViewportRoot,
+  Views: ViewportViews,
+  View: ViewportView
+};
+
+// packages/sdk/shell/src/components/SpaceListItem.tsx
+import React20, { forwardRef as forwardRef7 } from "react";
+import { Avatar as Avatar3, useId as useId3, useJdenticonHref as useJdenticonHref2 } from "@dxos/react-ui";
+import { mx as mx17 } from "@dxos/react-ui-theme";
+import { humanize } from "@dxos/util";
+var SpaceListItem = /* @__PURE__ */ forwardRef7(({ space, onClick }, ref) => {
+  const fallbackValue = space.key.toHex();
+  const labelId = useId3("identityListItem__label");
+  const jdenticon = useJdenticonHref2(fallbackValue ?? "", 12);
+  const displayName = space.properties.name ?? humanize(space.key.toHex());
+  return /* @__PURE__ */ React20.createElement("li", {
+    className: mx17("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
+    onClick: () => onClick?.(),
+    ref,
+    "data-testid": "space-list-item"
+  }, /* @__PURE__ */ React20.createElement(Avatar3.Root, {
+    labelId
+  }, /* @__PURE__ */ React20.createElement(Avatar3.Frame, null, /* @__PURE__ */ React20.createElement(Avatar3.Fallback, {
+    href: jdenticon
+  })), /* @__PURE__ */ React20.createElement(Avatar3.Label, {
+    classNames: "text-sm truncate"
+  }, displayName)));
+});
+
+// packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
+import React37 from "react";
+import { Dialog, useId as useId9 } from "@dxos/react-ui";
+
+// packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
+import React24, { useEffect as useEffect2, useMemo as useMemo3 } from "react";
+import { generateName as generateName2 } from "@dxos/display-name";
+import { log as log3 } from "@dxos/log";
+import { useClient as useClient3 } from "@dxos/react-client";
+import { useIdentity } from "@dxos/react-client/halo";
+import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
+import { Avatar as Avatar4, DensityProvider as DensityProvider2, useId as useId5, useJdenticonHref as useJdenticonHref3, useTranslation as useTranslation10 } from "@dxos/react-ui";
+
+// packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts
+import { useMachine } from "@xstate/react";
+import { assign, createMachine } from "xstate";
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts";
+var identityMachine = createMachine({
+  id: "identity",
+  predictableActionArguments: true,
+  context: {
+    identity: null,
+    identitySubscribable: null
+  },
+  initial: "choosingAction",
+  invoke: {
+    src: (context) => context.identitySubscribable
+  },
+  states: {
+    choosingAction: {},
+    managingDeviceInvitation: {},
+    managingProfile: {
+      initial: "idle",
+      states: {
+        idle: {},
+        pending: {}
+      },
+      on: {
+        setIdentity: {
+          target: "choosingAction",
+          actions: [
+            "setIdentity",
+            "log"
+          ]
+        },
+        updateProfile: {
+          target: ".pending",
+          actions: "log"
+        }
+      }
+    }
+  },
+  on: {
+    unchooseAction: {
+      target: ".choosingAction",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    chooseDevices: {
+      target: ".managingDeviceInvitation",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    deselectInvitation: {
+      target: ".choosingAction",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    selectInvitation: {
+      target: ".managingDeviceInvitation",
+      actions: [
+        "setInvitation",
+        "log"
+      ]
+    },
+    chooseProfile: {
+      target: ".managingProfile",
+      actions: "log"
+    }
+  }
+}, {
+  actions: {
+    setIdentity: assign({
+      identity: (context, event) => event?.identity ?? null
+    }),
+    setInvitation: assign({
+      invitation: (context, event) => event?.invitation ?? null
+    }),
+    unsetInvitation: assign({
+      invitation: () => void 0
+    }),
+    log: (context, event) => {
+      log("[transition]", {
+        event,
+        context
+      }, {
+        F: __dxlog_file,
+        L: 95,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var useIdentityMachine = (client, options) => {
+  return useMachine(identityMachine, {
+    ...options,
+    context: {
+      ...options?.context,
+      identity: client.halo.identity.get(),
+      identitySubscribable: client.halo.identity.map((identity) => ({
+        type: "setIdentity",
+        identity
+      }))
+    }
+  });
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
+import { CaretRight, Plus, Power, UserGear } from "@phosphor-icons/react";
+import React21, { useCallback as useCallback4 } from "react";
+import { useClient as useClient2 } from "@dxos/react-client";
+import { useHaloInvitations } from "@dxos/react-client/halo";
+import { Invitation as Invitation3, InvitationEncoder } from "@dxos/react-client/invitations";
+import { DensityProvider, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { getSize as getSize6 } from "@dxos/react-ui-theme";
+var IdentityActionChooser = (props) => {
+  const { send } = props;
+  const client = useClient2();
+  const invitations = useHaloInvitations();
+  const onInvitationEvent = useCallback4((invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    if (invitation.state === Invitation3.State.CONNECTING) {
+      console.log(JSON.stringify({
+        invitationCode,
+        authCode: invitation.authCode
+      }));
+    }
+  }, []);
+  const createInvitation = (e) => {
+    const testing = e.altKey && e.shiftKey;
+    invitations.forEach((invitation2) => invitation2.cancel());
+    const invitation = client.halo.share(testing ? {
+      type: Invitation3.Type.MULTIUSE,
+      authMethod: Invitation3.AuthMethod.NONE
+    } : void 0);
+    if (true) {
+      invitation.subscribe(onInvitationEvent);
+    }
+    send?.({
+      type: "selectInvitation",
+      invitation
+    });
+  };
+  return /* @__PURE__ */ React21.createElement(IdentityActionChooserImpl, {
+    ...props,
+    onCreateInvitationClick: (e) => createInvitation(e)
+  });
+};
+var IdentityActionChooserImpl = ({ onCreateInvitationClick, active, send, onDone, doneActionParent }) => {
+  const { t } = useTranslation7("os");
+  return /* @__PURE__ */ React21.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col gap-1"
+  }, /* @__PURE__ */ React21.createElement(DensityProvider, {
+    density: "coarse"
+  }, /* @__PURE__ */ React21.createElement("div", {
+    className: "grow justify-center flex flex-col gap-1"
+  }, /* @__PURE__ */ React21.createElement(Action, {
+    disabled: !active,
+    "data-testid": "devices-panel.create-invitation",
+    onClick: onCreateInvitationClick,
+    classNames: "plb-4"
+  }, /* @__PURE__ */ React21.createElement(Plus, {
+    className: getSize6(6)
+  }), /* @__PURE__ */ React21.createElement("span", {
+    className: "grow mli-3"
+  }, t("choose devices label")), /* @__PURE__ */ React21.createElement(CaretRight, {
+    weight: "bold",
+    className: getSize6(4)
+  })), /* @__PURE__ */ React21.createElement(Action, {
+    "data-testid": "manage-profile",
+    onClick: () => send?.({
+      type: "chooseProfile"
+    }),
+    classNames: "plb-4"
+  }, /* @__PURE__ */ React21.createElement(UserGear, {
+    className: getSize6(6)
+  }), /* @__PURE__ */ React21.createElement("span", {
+    className: "grow mli-3"
+  }, t("choose profile label")), /* @__PURE__ */ React21.createElement(CaretRight, {
+    weight: "bold",
+    className: getSize6(4)
+  })), /* @__PURE__ */ React21.createElement(Action, {
+    disabled: true,
+    "data-testid": "sign-out",
+    onClick: () => {
+    },
+    classNames: "plb-4"
+  }, /* @__PURE__ */ React21.createElement(Power, {
+    className: getSize6(6)
+  }), /* @__PURE__ */ React21.createElement("span", {
+    className: "grow mli-3"
+  }, t("choose sign out label")), /* @__PURE__ */ React21.createElement(CaretRight, {
+    weight: "bold",
+    className: getSize6(4)
+  })))));
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
+import React22, { useState as useState3 } from "react";
+import { log as log2 } from "@dxos/log";
+import { useTranslation as useTranslation8 } from "@dxos/react-ui";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx";
+var ProfileForm = (props) => {
+  const { onUpdateProfile } = props;
+  const { t } = useTranslation8("os");
+  const [validationMessage, setValidationMessage] = useState3("");
+  const handleUpdateProfile = async (profile) => {
+    await onUpdateProfile?.(profile).catch((error) => {
+      log2.catch(error, void 0, {
+        F: __dxlog_file2,
+        L: 32,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setValidationMessage(t("failed to update profile message"));
+    });
+  };
+  return /* @__PURE__ */ React22.createElement(ProfileFormImpl, {
+    ...props,
+    onUpdateProfile: handleUpdateProfile,
+    validationMessage
+  });
+};
+var ProfileFormImpl = (props) => {
+  const { active, profile, send, onUpdateProfile, validationMessage } = props;
+  const disabled = !active;
+  const { t } = useTranslation8("os");
+  const [inputValue, setInputValue] = useState3(profile?.displayName ?? "");
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React22.createElement(Input, {
+    validationMessage,
+    label: /* @__PURE__ */ React22.createElement(StepHeading, null, t("display name input label")),
+    disabled,
+    "data-testid": "display-name-input",
+    placeholder: t("display name input placeholder"),
+    value: inputValue,
+    onChange: ({ target: { value } }) => setInputValue(value),
+    onKeyDown: ({ key }) => key === "Enter" && onUpdateProfile?.({
+      displayName: inputValue
+    })
+  })), /* @__PURE__ */ React22.createElement(Actions, null, /* @__PURE__ */ React22.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => send?.({
+      type: "unchooseAction"
+    }),
+    "data-testid": "update-profile-form-back"
+  }, t("back label")), /* @__PURE__ */ React22.createElement(Action, {
+    variant: "primary",
+    disabled,
+    onClick: () => onUpdateProfile?.({
+      displayName: inputValue
+    }),
+    "data-testid": "update-profile-form-continue"
+  }, t("done label"))));
+};
+
+// packages/sdk/shell/src/steps/InvitationManager.tsx
+import { Check as Check3, X as X3 } from "@phosphor-icons/react";
+import React23, { useMemo as useMemo2 } from "react";
+import { QR } from "react-qr-rounded";
+import { Invitation as Invitation4 } from "@dxos/react-client/invitations";
+import { useId as useId4, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { descriptionText as descriptionText7, getSize as getSize7, mx as mx18 } from "@dxos/react-ui-theme";
+var InvitationManagerView = ({ children, ...props }) => {
+  return /* @__PURE__ */ React23.createElement(Viewport.View, {
+    ...props,
+    classNames: "grow flex flex-col justify-around items-center"
+  }, children);
+};
+var InvitationManager = ({ invitationUrl, active, send, status, type, authCode, id }) => {
+  const { t } = useTranslation9("os");
+  const qrLabel = useId4("invitation-manager__qr-code");
+  const statusValue = type === Invitation4.Type.MULTIUSE ? 0 : invitationStatusValue.get(status) ?? 0;
+  const showAuthCode = statusValue === 3;
+  const emoji2 = toEmoji(id ?? "");
+  const activeView = useMemo2(() => {
+    switch (true) {
+      case statusValue === 5:
+      case statusValue < 0:
+        return "showing final";
+      case statusValue === 3:
+        return "showing auth code";
+      default:
+        return "showing qr";
+    }
+  }, [
+    statusValue
+  ]);
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Viewport.Root, {
+    activeView,
+    classNames: "grow plb-1"
+  }, /* @__PURE__ */ React23.createElement(Viewport.Views, null, /* @__PURE__ */ React23.createElement(InvitationManagerView, {
+    id: "showing qr",
+    emoji: emoji2
+  }, /* @__PURE__ */ React23.createElement("p", {
+    className: "text-sm mlb-1 font-normal text-center"
+  }, t(type === Invitation4.Type.MULTIUSE ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React23.createElement("div", {
+    role: "none",
+    className: mx18(descriptionText7, "is-full max-is-[14rem] relative")
+  }, /* @__PURE__ */ React23.createElement(QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    className: mx18("is-full bs-full p-2", showAuthCode && "invisible"),
+    "aria-labelledby": qrLabel,
+    errorCorrectionLevel: "Q",
+    cutout: true
+  }, invitationUrl ?? "never"), /* @__PURE__ */ React23.createElement(Centered, null, /* @__PURE__ */ React23.createElement(Emoji, {
+    text: emoji2
+  }))), /* @__PURE__ */ React23.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr label")), /* @__PURE__ */ React23.createElement(CopyButton, {
+    variant: "ghost",
+    value: invitationUrl ?? "never"
+  })), /* @__PURE__ */ React23.createElement(InvitationManagerView, {
+    id: "showing auth code"
+  }, /* @__PURE__ */ React23.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React23.createElement(AuthCode, {
+    code: authCode,
+    large: true,
+    classNames: "text-black dark:text-white"
+  }), /* @__PURE__ */ React23.createElement(Label, null, "Be sure the other device is showing this symbol:"), emoji2 && /* @__PURE__ */ React23.createElement(Emoji, {
+    text: emoji2
+  })), /* @__PURE__ */ React23.createElement(InvitationManagerView, {
+    id: "showing final"
+  }, statusValue > 0 ? /* @__PURE__ */ React23.createElement(Check3, {
+    className: mx18("m-1.5", getSize7(6))
+  }) : /* @__PURE__ */ React23.createElement(X3, {
+    className: mx18("m-1.5", getSize7(6))
+  })))), /* @__PURE__ */ React23.createElement(Actions, {
+    classNames: "mbs-4"
+  }, /* @__PURE__ */ React23.createElement(Action, {
+    disabled: !active,
+    onClick: () => send?.({
+      type: "deselectInvitation"
+    })
+  }, t("back label"))));
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
+var viewStyles = "pbs-1 pbe-3 pli-3";
+var IdentityHeading = ({ titleId, title, identity, onDone }) => {
+  const fallbackHref = useJdenticonHref3(identity.identityKey.toHex(), 12);
+  return /* @__PURE__ */ React24.createElement(Heading, {
+    titleId,
+    title,
+    corner: /* @__PURE__ */ React24.createElement(CloseButton, {
+      onDone
+    })
+  }, /* @__PURE__ */ React24.createElement(Avatar4.Root, {
+    size: 12,
+    variant: "circle",
+    status: "active"
+  }, /* @__PURE__ */ React24.createElement(Avatar4.Frame, {
+    classNames: "block mbs-4 mbe-2 mli-auto chromatic-ignore"
+  }, /* @__PURE__ */ React24.createElement(Avatar4.Fallback, {
+    href: fallbackHref
+  })), /* @__PURE__ */ React24.createElement(Avatar4.Label, {
+    classNames: "block text-center font-light text-xl"
+  }, identity.profile?.displayName ?? generateName2(identity.identityKey.toHex()))));
+};
+var IdentityPanelImpl = (props) => {
+  const { identity, titleId, activeView, onUpdateProfile, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, onDone, ...rest } = props;
+  const { t } = useTranslation10("os");
+  const title = useMemo3(() => {
+    switch (activeView) {
+      case "device manager":
+      case "device invitation manager":
+        return t("choose devices label");
+      default:
+        return t("identity heading");
+    }
+  }, [
+    activeView,
+    t
+  ]);
+  return /* @__PURE__ */ React24.createElement(DensityProvider2, {
+    density: "fine"
+  }, /* @__PURE__ */ React24.createElement(IdentityHeading, {
+    identity,
+    titleId,
+    title,
+    onDone
+  }), /* @__PURE__ */ React24.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React24.createElement(Viewport.Views, null, /* @__PURE__ */ React24.createElement(Viewport.View, {
+    id: "identity action chooser",
+    classNames: viewStyles
+  }, /* @__PURE__ */ React24.createElement(IdentityActionChooserComponent, {
+    active: activeView === "identity action chooser",
+    ...rest
+  })), /* @__PURE__ */ React24.createElement(Viewport.View, {
+    id: "device invitation manager",
+    classNames: viewStyles
+  }, /* @__PURE__ */ React24.createElement(InvitationManagerComponent, {
+    active: activeView === "device invitation manager",
+    ...rest,
+    invitationUrl: rest.createInvitationUrl(rest.invitationCode)
+  })), /* @__PURE__ */ React24.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "update profile form"
+  }, /* @__PURE__ */ React24.createElement(ProfileForm, {
+    send: rest.send,
+    active: activeView === "update profile form",
+    profile: identity.profile,
+    onUpdateProfile
+  })))));
+};
+var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
+  const invitationStatus = useInvitationStatus2(invitation);
+  return /* @__PURE__ */ React24.createElement(IdentityPanelImpl, {
+    ...props,
+    ...invitationStatus
+  });
+};
+var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, ...props }) => {
+  const titleId = useId5("identityPanel__heading", propsTitleId);
+  const client = useClient3();
+  const identity = useIdentity();
+  if (!identity) {
+    console.error("IdentityPanel rendered with no active identity.");
+    return null;
+  }
+  const [identityState, identitySend, identityService] = useIdentityMachine(client);
+  useEffect2(() => {
+    const subscription = identityService.subscribe((state) => {
+      log3("[state]", state, {
+        F: __dxlog_file3,
+        L: 117,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    identityService
+  ]);
+  const activeView = useMemo3(() => {
+    switch (true) {
+      case identityState.matches("choosingAction"):
+        return "identity action chooser";
+      case identityState.matches("managingDeviceInvitation"):
+        return "device invitation manager";
+      case [
+        {
+          managingProfile: "idle"
+        },
+        {
+          managingProfile: "pending"
+        }
+      ].some(identityState.matches):
+        return "update profile form";
+      default:
+        return "identity action chooser";
+    }
+  }, [
+    identityState
+  ]);
+  const onUpdateProfile = async (profile) => {
+    identitySend({
+      type: "updateProfile"
+    });
+    await client.halo.updateProfile(profile);
+  };
+  const implProps = {
+    ...props,
+    identity,
+    activeView,
+    send: identitySend,
+    titleId,
+    createInvitationUrl,
+    onUpdateProfile
+  };
+  return identityState.context.invitation ? /* @__PURE__ */ React24.createElement(IdentityPanelWithInvitationImpl, {
+    ...implProps,
+    invitation: identityState.context.invitation
+  }) : /* @__PURE__ */ React24.createElement(IdentityPanelImpl, implProps);
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
+import React34, { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo4 } from "react";
+import { log as log8 } from "@dxos/log";
+import { useClient as useClient6, useMulticastObservable } from "@dxos/react-client";
+import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
+import { DensityProvider as DensityProvider3, useId as useId7, useThemeContext as useThemeContext3 } from "@dxos/react-ui";
+
+// packages/sdk/shell/src/panels/JoinPanel/JoinHeading.tsx
+import { X as X4 } from "@phosphor-icons/react";
+import React25, { cloneElement, forwardRef as forwardRef8 } from "react";
+import { Button as Button5, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { descriptionText as descriptionText8, getSize as getSize8, mx as mx19 } from "@dxos/react-ui-theme";
+var JoinHeading = /* @__PURE__ */ forwardRef8(({ mode, titleId, onExit, exitActionParent }, forwardedRef) => {
+  const { t } = useTranslation11("os");
+  const exitButton = /* @__PURE__ */ React25.createElement(Button5, {
+    variant: "ghost",
+    ...onExit && {
+      onClick: onExit
+    },
+    classNames: mx19(descriptionText8, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    "data-testid": "join-exit"
+  }, /* @__PURE__ */ React25.createElement(X4, {
+    weight: "bold",
+    className: getSize8(4)
+  }), /* @__PURE__ */ React25.createElement("span", {
+    className: "sr-only"
+  }, t("exit label")));
+  return /* @__PURE__ */ React25.createElement(Heading, {
+    ref: forwardedRef,
+    titleId,
+    title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
+    ...mode === "halo-only" ? {
+      titleSrOnly: true
+    } : {
+      corner: exitActionParent ? /* @__PURE__ */ cloneElement(exitActionParent, {}, exitButton) : exitButton
+    },
+    titleSrOnly: mode === "halo-only"
+  });
+});
+
+// packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts
+import { useMachine as useMachine2 } from "@xstate/react";
+import { useCallback as useCallback5 } from "react";
+import { assign as assign2, createMachine as createMachine2 } from "xstate";
+import { log as log4 } from "@dxos/log";
+import { Invitation as Invitation5, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
+var getInvitationSubscribable = (Kind, invitation) => {
+  log4("[subscribing to invitation]", invitation, {
+    F: __dxlog_file4,
+    L: 88,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  return {
+    subscribe: (next, onError, complete) => invitation.subscribe((invitation2) => {
+      switch (invitation2.state) {
+        case Invitation5.State.CONNECTING: {
+          log4("[invitation connecting]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file4,
+            L: 99,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `connecting${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.CONNECTED: {
+          log4("[invitation connected]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file4,
+            L: 104,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `connected${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.READY_FOR_AUTHENTICATION: {
+          log4("[invitation ready for authentication]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file4,
+            L: 109,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `readyForAuthentication${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.AUTHENTICATING: {
+          log4("[invitation authenticating]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file4,
+            L: 114,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `authenticating${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.SUCCESS: {
+          log4("[invitation success]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file4,
+            L: 119,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          next({
+            type: `success${Kind}Invitation`,
+            invitation: invitation2
+          });
+          return complete?.();
+        }
+        case Invitation5.State.CANCELLED: {
+          log4.warn("[invitation cancelled]", {
+            Kind
+          }, {
+            F: __dxlog_file4,
+            L: 125,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Kind}Invitation`,
+            reason: "cancelled"
+          });
+        }
+        case Invitation5.State.TIMEOUT: {
+          log4.error("[invitation timeout]", {
+            Kind
+          }, {
+            F: __dxlog_file4,
+            L: 130,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Kind}Invitation`,
+            reason: "timeout"
+          });
+        }
+      }
+    }, (error) => {
+      log4.error("[invitation errored]", {
+        Kind,
+        error
+      }, {
+        F: __dxlog_file4,
+        L: 136,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      next({
+        type: `fail${Kind}Invitation`,
+        reason: "error"
+      });
+      return onError?.(error);
+    })
+  };
+};
+var acceptingInvitationTemplate = (Kind, successTarget) => {
+  const config = {
+    initial: `unknown${Kind}`,
+    states: {
+      [`unknown${Kind}`]: {
+        always: [
+          {
+            cond: ({ mode }) => mode === "halo-only" && Kind === "Space",
+            target: "#join.finishingJoiningHalo"
+          },
+          {
+            cond: (context) => !!context[Kind.toLowerCase()].unredeemedCode,
+            target: `acceptingRedeemed${Kind}Invitation`,
+            actions: [
+              `redeem${Kind}InvitationCode`,
+              `invalidate${Kind}InvitationCode`,
+              "log"
+            ]
+          },
+          {
+            target: `inputting${Kind}InvitationCode`,
+            actions: "log"
+          }
+        ]
+      },
+      [`inputting${Kind}InvitationCode`]: {},
+      [`acceptingRedeemed${Kind}Invitation`]: {
+        invoke: {
+          src: (context) => context[Kind.toLowerCase()].invitationSubscribable
+        },
+        initial: `unknown${Kind}Invitation`,
+        states: {
+          [`unknown${Kind}Invitation`]: {
+            always: [
+              {
+                cond: (context) => {
+                  if (Kind !== "Space") {
+                    return false;
+                  } else {
+                    const spaceKey = context.space.invitation?.spaceKey?.toHex();
+                    const succeededKeys = context.space.succeededKeys;
+                    return spaceKey ? !!succeededKeys?.has(spaceKey) : false;
+                  }
+                },
+                target: successTarget,
+                actions: "log"
+              },
+              {
+                cond: (context) => {
+                  const invitation = context[Kind.toLowerCase()].invitation;
+                  return !invitation || invitation?.state === Invitation5.State.CONNECTING;
+                },
+                target: `connecting${Kind}Invitation`,
+                actions: "log"
+              },
+              {
+                target: `inputting${Kind}VerificationCode`,
+                actions: "log"
+              }
+            ]
+          },
+          [`connecting${Kind}Invitation`]: {},
+          [`inputting${Kind}VerificationCode`]: {},
+          [`authenticating${Kind}VerificationCode`]: {
+            on: {
+              [`readyForAuthentication${Kind}Invitation`]: {
+                target: `authenticationFailing${Kind}VerificationCode`,
+                actions: [
+                  "setInvitation",
+                  "log"
+                ]
+              }
+            }
+          },
+          [`authenticationFailing${Kind}VerificationCode`]: {},
+          [`failing${Kind}Invitation`]: {},
+          [`success${Kind}Invitation`]: {}
+        },
+        on: {
+          [`reset${Kind}Invitation`]: {
+            target: `#join${Kind === "Halo" ? ".choosingIdentity" : ""}.accepting${Kind}Invitation.unknown${Kind}`,
+            actions: [
+              "resetInvitation",
+              "log"
+            ]
+          },
+          [`connecting${Kind}Invitation`]: {
+            target: `.connecting${Kind}Invitation`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`connected${Kind}Invitation`]: {
+            target: `.connecting${Kind}Invitation`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`readyForAuthentication${Kind}Invitation`]: {
+            target: `.inputting${Kind}VerificationCode`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`authenticating${Kind}Invitation`]: {
+            target: `.authenticating${Kind}VerificationCode`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`success${Kind}Invitation`]: {
+            target: successTarget,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`fail${Kind}Invitation`]: {
+            target: `.failing${Kind}Invitation`,
+            actions: [
+              assign2({
+                [Kind.toLowerCase()]: (context, event) => ({
+                  ...context[Kind.toLowerCase()],
+                  failReason: event.reason
+                })
+              }),
+              "log"
+            ]
+          }
+        }
+      }
+    },
+    on: {
+      [`set${Kind}InvitationCode`]: {
+        target: `.acceptingRedeemed${Kind}Invitation`,
+        actions: [
+          assign2({
+            [Kind.toLowerCase()]: (context, event) => ({
+              ...context[Kind.toLowerCase()],
+              unredeemedCode: event.code,
+              succeededKeys: event.succeededKeys
+            })
+          }),
+          `redeem${Kind}InvitationCode`,
+          `invalidate${Kind}InvitationCode`,
+          "log"
+        ]
+      }
+    }
+  };
+  return config;
+};
+var joinMachine = createMachine2({
+  id: "join",
+  predictableActionArguments: true,
+  context: {
+    mode: "default",
+    identity: null,
+    halo: {},
+    space: {}
+  },
+  initial: "unknown",
+  states: {
+    unknown: {
+      always: [
+        {
+          cond: "existingIdentity",
+          target: "resettingIdentity",
+          actions: "log"
+        },
+        {
+          cond: "noSelectedIdentity",
+          target: "choosingIdentity",
+          actions: "log"
+        },
+        {
+          target: "acceptingSpaceInvitation",
+          actions: "log"
+        }
+      ]
+    },
+    choosingIdentity: {
+      initial: "unknownAuthMethod",
+      states: {
+        unknownAuthMethod: {
+          always: [
+            {
+              cond: "hasHaloUnredeemedCode",
+              target: "acceptingHaloInvitation",
+              actions: "log"
+            },
+            {
+              target: "choosingAuthMethod",
+              actions: "log"
+            }
+          ]
+        },
+        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"
+        }
+      }
+    },
+    resettingIdentity: {},
+    acceptingSpaceInvitation: acceptingInvitationTemplate("Space", "#join.finishingJoiningSpace"),
+    finishingJoiningSpace: {
+      type: "final"
+    },
+    finishingJoiningHalo: {
+      type: "final"
+    }
+  },
+  on: {
+    resetIdentity: {
+      target: "choosingIdentity",
+      actions: "unsetIdentity"
+    }
+  }
+}, {
+  guards: {
+    existingIdentity: ({ identity, mode }, _event) => mode === "halo-only" && !!identity,
+    noSelectedIdentity: ({ identity }, _event) => !identity,
+    hasHaloUnredeemedCode: ({ halo }, _event) => !!halo.unredeemedCode,
+    noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode
+  },
+  actions: {
+    setIdentity: assign2({
+      identity: (context, event) => event.identity
+    }),
+    unsetIdentity: assign2({
+      identity: () => null
+    }),
+    resetInvitation: assign2({
+      halo: (context, event) => {
+        if (event.type !== "resetHaloInvitation") {
+          return context.halo;
+        }
+        if (context.halo.invitationObservable) {
+          void context.halo.invitationObservable.cancel();
+        }
+        return {
+          ...context.halo,
+          invitation: void 0,
+          invitationObservable: void 0,
+          invitationSubscribable: void 0
+        };
+      },
+      space: (context, event) => {
+        if (event.type !== "resetSpaceInvitation") {
+          return context.space;
+        }
+        if (context.space.invitationObservable) {
+          void context.space.invitationObservable.cancel();
+        }
+        return {
+          ...context.space,
+          invitation: void 0,
+          invitationObservable: void 0,
+          invitationSubscribable: void 0
+        };
+      }
+    }),
+    setInvitation: assign2({
+      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) => {
+      log4.info("[transition]", {
+        event,
+        haloInvitation: context.halo.invitation,
+        spaceInvitation: context.space.invitation
+      }, {
+        F: __dxlog_file4,
+        L: 400,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var defaultCodeFromUrl = (invitationType, text) => {
+  try {
+    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
+    return searchParams.get(`${invitationType}InvitationCode`) ?? searchParams.get(`${invitationType}Invitation`) ?? searchParams.get("invitationCode") ?? searchParams.get("invitation") ?? text;
+  } catch (err) {
+    log4.catch(err, void 0, {
+      F: __dxlog_file4,
+      L: 427,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return text;
+  }
+};
+var useJoinMachine = (client, options) => {
+  const redeemHaloInvitationCode = useCallback5(({ halo }) => {
+    if (halo.unredeemedCode) {
+      try {
+        const invitationObservable = client.halo.join(InvitationEncoder2.decode(defaultCodeFromUrl("halo", halo.unredeemedCode)));
+        return {
+          ...halo,
+          invitationObservable,
+          invitationSubscribable: getInvitationSubscribable("Halo", invitationObservable)
+        };
+      } catch (err) {
+        log4.error("Could not redeem device invitation code", err, {
+          F: __dxlog_file4,
+          L: 449,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return halo;
+      }
+    } else {
+      return halo;
+    }
+  }, [
+    client
+  ]);
+  const redeemSpaceInvitationCode = useCallback5(({ space }) => {
+    if (space.unredeemedCode) {
+      try {
+        const invitation = InvitationEncoder2.decode(defaultCodeFromUrl("space", space.unredeemedCode));
+        if (space.succeededKeys?.has(invitation.spaceKey?.toHex() ?? "never")) {
+          return {
+            ...space,
+            invitation
+          };
+        } else {
+          const invitationObservable = client.spaces.join(invitation);
+          return {
+            ...space,
+            invitationObservable,
+            invitationSubscribable: getInvitationSubscribable("Space", invitationObservable)
+          };
+        }
+      } catch (err) {
+        log4.error("Could not redeem space invitation code", err, {
+          F: __dxlog_file4,
+          L: 479,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return space;
+      }
+    } else {
+      return space;
+    }
+  }, [
+    client
+  ]);
+  const invalidateHaloInvitationCode = useCallback5(({ halo }) => {
+    if (halo.unredeemedCode) {
+      options?.onInvalidateInvitationCode?.(halo.unredeemedCode);
+      return {
+        ...halo,
+        unredeemedCode: void 0
+      };
+    } else {
+      return halo;
+    }
+  }, [
+    options?.onInvalidateInvitationCode
+  ]);
+  const invalidateSpaceInvitationCode = useCallback5(({ space }) => {
+    if (space.unredeemedCode) {
+      options?.onInvalidateInvitationCode?.(space.unredeemedCode);
+      return {
+        ...space,
+        unredeemedCode: void 0
+      };
+    } else {
+      return space;
+    }
+  }, [
+    options?.onInvalidateInvitationCode
+  ]);
+  return useMachine2(joinMachine, {
+    ...options,
+    actions: {
+      ...options?.actions,
+      redeemHaloInvitationCode: assign2({
+        halo: redeemHaloInvitationCode
+      }),
+      redeemSpaceInvitationCode: assign2({
+        space: redeemSpaceInvitationCode
+      }),
+      invalidateHaloInvitationCode: assign2({
+        halo: invalidateHaloInvitationCode
+      }),
+      invalidateSpaceInvitationCode: assign2({
+        space: invalidateSpaceInvitationCode
+      })
+    }
+  });
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx
+import { CaretRight as CaretRight2, Plus as Plus2, QrCode, Textbox } from "@phosphor-icons/react";
+import React26 from "react";
+import { useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { getSize as getSize9 } from "@dxos/react-ui-theme";
+var AdditionMethodChooser = (viewStateProps) => {
+  const disabled = !viewStateProps.active;
+  const { send } = viewStateProps;
+  const { t } = useTranslation12("os");
+  const sharedButtonProps = {
+    disabled,
+    after: /* @__PURE__ */ React26.createElement(CaretRight2, {
+      className: getSize9(4),
+      weight: "bold"
+    }),
+    slots: {
+      label: {
+        className: "text-sm"
+      }
+    }
+  };
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React26.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1 grow"
+  }, /* @__PURE__ */ React26.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("create identity description"),
+    before: /* @__PURE__ */ React26.createElement(Plus2, {
+      className: getSize9(6)
+    }),
+    onClick: () => send({
+      type: "createIdentity"
+    }),
+    "data-autofocus": "choosingAuthMethod",
+    "data-testid": "create-identity"
+  }, t("create identity label")), /* @__PURE__ */ React26.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("join identity description"),
+    before: /* @__PURE__ */ React26.createElement(QrCode, {
+      className: getSize9(6)
+    }),
+    onClick: () => send({
+      type: "acceptHaloInvitation"
+    }),
+    "data-testid": "join-identity"
+  }, t("join identity label")), /* @__PURE__ */ React26.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    // TODO(mykola): Implement recover.
+    disabled: true,
+    description: t("recover identity description"),
+    before: /* @__PURE__ */ React26.createElement(Textbox, {
+      className: getSize9(6)
+    }),
+    onClick: () => send({
+      type: "recoverIdentity"
+    }),
+    "data-testid": "recover-identity"
+  }, t("recover identity label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
+import React27, { cloneElement as cloneElement2 } from "react";
+import { generateName as generateName3 } from "@dxos/display-name";
+import { Avatar as Avatar5, useId as useId6, useJdenticonHref as useJdenticonHref4, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { mx as mx20 } from "@dxos/react-ui-theme";
+var IdentityAdded = (props) => {
+  const { mode, addedIdentity, active, send, onDone, doneActionParent } = props;
+  const disabled = !active;
+  const { t } = useTranslation13("os");
+  const fallbackValue = addedIdentity?.identityKey.toHex();
+  const labelId = useId6("identityListItem__label");
+  const jdenticon = useJdenticonHref4(fallbackValue ?? "", 12);
+  const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName3(addedIdentity?.identityKey.toHex()));
+  const doneAction = /* @__PURE__ */ React27.createElement(Action, {
+    ...onDone && {
+      onClick: () => onDone(null)
+    },
+    disabled,
+    "data-autofocus": "confirmingAddedIdentity",
+    "data-testid": "identity-added-done"
+  }, /* @__PURE__ */ React27.createElement("span", null, t("done label")));
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React27.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col items-center justify-center text-center gap-2"
+  }, /* @__PURE__ */ React27.createElement(Avatar5.Root, {
+    status: "active",
+    labelId
+  }, /* @__PURE__ */ React27.createElement(Avatar5.Frame, null, /* @__PURE__ */ React27.createElement(Avatar5.Fallback, {
+    href: jdenticon
+  })), /* @__PURE__ */ React27.createElement(Avatar5.Label, {
+    classNames: mx20("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
+  }, displayName))), /* @__PURE__ */ React27.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React27.createElement(Action, {
+    variant: "primary",
+    disabled: disabled || !addedIdentity,
+    onClick: () => addedIdentity && send({
+      type: "selectIdentity",
+      identity: addedIdentity
+    }),
+    "data-autofocus": "confirmingAddedIdentity"
+  }, t("continue label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
+import React28, { useState as useState4 } from "react";
+import { log as log5 } from "@dxos/log";
+import { useClient as useClient4 } from "@dxos/react-client";
+import { useTranslation as useTranslation14 } from "@dxos/react-ui";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
+var IdentityInput = (props) => {
+  const { send, method } = props;
+  const isRecover = method === "recover identity";
+  const client = useClient4();
+  const { t } = useTranslation14("os");
+  const [validationMessage, setValidationMessage] = useState4("");
+  const createIdentity = (displayName) => {
+    void client.halo.createIdentity({
+      [isRecover ? "seedphrase" : "displayName"]: displayName
+    }).then((identity) => {
+      send?.({
+        type: "selectIdentity",
+        identity
+      });
+    }, (error) => {
+      log5.catch(error, void 0, {
+        F: __dxlog_file5,
+        L: 37,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setValidationMessage(t(isRecover ? "failed to recover identity message" : "failed to create identity message"));
+    });
+  };
+  return /* @__PURE__ */ React28.createElement(IdentityInputImpl, {
+    ...props,
+    onDisplayNameConfirm: createIdentity,
+    validationMessage
+  });
+};
+var IdentityInputImpl = (props) => {
+  const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
+  const disabled = !active;
+  const { t } = useTranslation14("os");
+  const [inputValue, setInputValue] = useState4("");
+  const isRecover = method === "recover identity";
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React28.createElement(Input, {
+    validationMessage,
+    label: /* @__PURE__ */ React28.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    disabled,
+    "data-testid": "identity-input",
+    placeholder: isRecover ? "Type your recovery phrase" : "Type a display name",
+    onChange: ({ target: { value } }) => setInputValue(value)
+  })), /* @__PURE__ */ React28.createElement(Actions, null, /* @__PURE__ */ React28.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => send?.({
+      type: "deselectAuthMethod"
+    }),
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
+  }, t("back label")), /* @__PURE__ */ React28.createElement(Action, {
+    variant: "primary",
+    disabled,
+    onClick: () => onDisplayNameConfirm?.(inputValue),
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-continue`
+  }, t("continue label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAccepted.tsx
+import React29, { cloneElement as cloneElement3 } from "react";
+import { useTranslation as useTranslation15 } from "@dxos/react-ui";
+var InvitationAccepted = (props) => {
+  const { active, Kind, doneActionParent, onDone } = props;
+  const disabled = !active;
+  const { t } = useTranslation15("os");
+  const doneAction = /* @__PURE__ */ React29.createElement(Action, {
+    variant: "primary",
+    onClick: onDone,
+    disabled,
+    "data-autofocus": `success${Kind}Invitation finishingJoining${Kind}`,
+    "data-testid": `${Kind.toLowerCase()}-invitation-accepted-done`
+  }, t("done label"));
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React29.createElement("p", {
+    className: "text-center text-sm font-normal"
+  }, t("welcome message"))), /* @__PURE__ */ React29.createElement(Actions, null, doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, doneAction) : doneAction));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
+import React30, { useState as useState5, useEffect as useEffect3, cloneElement as cloneElement4 } from "react";
+import { log as log6 } from "@dxos/log";
+import { useTranslation as useTranslation16 } from "@dxos/react-ui";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
+var invitationCodeFromUrl = (text) => {
+  try {
+    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
+    const invitation = searchParams.get("spaceInvitationCode") ?? searchParams.get("deviceInvitationCode");
+    return invitation ?? text;
+  } catch (err) {
+    log6.catch(err, void 0, {
+      F: __dxlog_file6,
+      L: 25,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return text;
+  }
+};
+var InvitationInput = (props) => {
+  const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } = props;
+  const disabled = !active;
+  const { t } = useTranslation16("os");
+  const [inputValue, setInputValue] = useState5(unredeemedCode ?? "");
+  useEffect3(() => {
+    unredeemedCode && setInputValue(unredeemedCode ?? "");
+  }, [
+    unredeemedCode
+  ]);
+  const handleNext = () => send({
+    type: `set${Kind}InvitationCode`,
+    code: invitationCodeFromUrl(inputValue),
+    ...Kind === "Space" && {
+      succeededKeys
+    }
+  });
+  const exitAction = /* @__PURE__ */ React30.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    ...onExit ? {
+      onClick: () => onExit()
+    } : {
+      onClick: () => onDone?.(null)
+    },
+    "data-testid": "join-exit"
+  }, t("cancel label"));
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React30.createElement(Input, {
+    label: /* @__PURE__ */ React30.createElement(StepHeading, null, t("invitation input label")),
+    placeholder: "Type an invitation code",
+    disabled,
+    value: inputValue,
+    onChange: ({ target: { value } }) => setInputValue(value),
+    "data-autofocus": `inputting${Kind}InvitationCode`,
+    "data-testid": `${Kind.toLowerCase()}-invitation-input`,
+    onKeyUp: ({ key }) => key === "Enter" && handleNext()
+  })), /* @__PURE__ */ React30.createElement(Actions, null, Kind === "Halo" ? /* @__PURE__ */ React30.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => send({
+      type: "deselectAuthMethod"
+    }),
+    "data-testid": `${Kind.toLowerCase()}-invitation-input-back`
+  }, t("back label")) : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React30.createElement(Action, {
+    variant: "primary",
+    disabled,
+    onClick: handleNext,
+    "data-testid": `${Kind.toLowerCase()}-invitation-input-continue`
+  }, t("continue label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationRescuer.tsx
+import React31 from "react";
+import { useTranslation as useTranslation17 } from "@dxos/react-ui";
+import { descriptionText as descriptionText9 } from "@dxos/react-ui-theme";
+var InvitationActions = ({
+  // `invitationState` does report correct state, but here we evaluate whether `failReason` is a better source of truth
+  // for the UI in particular.
+  invitationState,
+  onInvitationCancel,
+  active,
+  send,
+  Kind,
+  failReason
+}) => {
+  const { t } = useTranslation17("os");
+  if (failReason) {
+    return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, {
+      className: descriptionText9
+    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React31.createElement("div", {
+      role: "none",
+      className: "grow"
+    }), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+      disabled: !active,
+      onClick: () => send({
+        type: `reset${Kind}Invitation`
+      }),
+      "data-testid": "invitation-rescuer-reset"
+    }, t("reset label"))));
+  } else {
+    return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, {
+      className: descriptionText9
+    }, t("connecting status label")), /* @__PURE__ */ React31.createElement("div", {
+      role: "none",
+      className: "grow"
+    }), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+      disabled: true,
+      classNames: "order-2",
+      "data-testid": "next"
+    }, t("next label")), /* @__PURE__ */ React31.createElement(Action, {
+      disabled: !active,
+      onClick: onInvitationCancel,
+      "data-testid": "invitation-rescuer-cancel"
+    }, t("cancel label"))));
+  }
+};
+var InvitationRescuer = (props) => {
+  const { Kind, invitationState, active, send } = props;
+  const { t } = useTranslation17("os");
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React31.createElement(StepHeading, {
+    className: descriptionText9
+  }, "There was a problem joining the space")), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+    disabled: !active,
+    "data-testid": "invitation-rescuer-blank-reset",
+    onClick: () => send({
+      type: `reset${Kind}Invitation`
+    })
+  }, t("reset label")))) : /* @__PURE__ */ React31.createElement(InvitationActions, props));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
+import React32, { useState as useState6 } from "react";
+import { Input as Input2, useTranslation as useTranslation18 } from "@dxos/react-ui";
+var pinLength = 6;
+var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, onInvitationAuthenticate, onInvitationCancel }) => {
+  const disabled = !active || pending;
+  const { t } = useTranslation18("os");
+  const invitationType = Kind.toLowerCase();
+  const [authCode, setAuthCode] = useState6("");
+  const onChange = ({ target: { value } }) => {
+    setAuthCode(value);
+    if (value.length === pinLength) {
+      document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`)?.focus();
+    }
+  };
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, invitationId && /* @__PURE__ */ React32.createElement(Emoji, {
+    text: toEmoji(invitationId)
+  }), /* @__PURE__ */ React32.createElement(Input2.Root, failed && {
+    validationValence: "error"
+  }, /* @__PURE__ */ React32.createElement(Input2.Label, {
+    asChild: true
+  }, /* @__PURE__ */ React32.createElement(StepHeading, null, t("auth code input label"))), /* @__PURE__ */ React32.createElement(Input2.PinInput, {
+    disabled,
+    length: pinLength,
+    onChange,
+    inputMode: "numeric",
+    autoComplete: "off",
+    pattern: "\\d*",
+    "data-autofocus": `connecting${Kind}Invitation inputting${Kind}VerificationCode authenticationFailing${Kind}VerificationCode authenticating${Kind}VerificationCode`,
+    "data-prevent-ios-autofocus": true,
+    "data-testid": `${invitationType}-auth-code-input`,
+    "data-1p-ignore": true
+  }), failed && /* @__PURE__ */ React32.createElement(Input2.DescriptionAndValidation, {
+    classNames: "text-center"
+  }, /* @__PURE__ */ React32.createElement(Input2.Validation, null, t("failed to authenticate message"))))), /* @__PURE__ */ React32.createElement(Actions, null, /* @__PURE__ */ React32.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => onInvitationCancel?.(),
+    "data-testid": `${invitationType}-invitation-authenticator-cancel`
+  }, t("cancel label")), /* @__PURE__ */ React32.createElement(Action, {
+    variant: "primary",
+    disabled,
+    onClick: () => onInvitationAuthenticate?.(authCode),
+    "data-autofocus-pinlength": invitationType,
+    "data-testid": `${invitationType}-invitation-authenticator-next`
+  }, t("next label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/ResetIdentity.tsx
+import React33, { useState as useState7 } from "react";
+import { log as log7 } from "@dxos/log";
+import { useClient as useClient5 } from "@dxos/react-client";
+import { useTranslation as useTranslation19 } from "@dxos/react-ui";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/ResetIdentity.tsx";
+var ResetIdentity = ({ send, active }) => {
+  const client = useClient5();
+  const { t } = useTranslation19("os");
+  const [validationMessage, setValidationMessage] = useState7("");
+  const resetIdentity = () => {
+    void client.reset().then(() => send?.({
+      type: "resetIdentity"
+    }), (error) => {
+      log7.catch(error, void 0, {
+        F: __dxlog_file7,
+        L: 32,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setValidationMessage(t("failed to reset identity message"));
+    });
+  };
+  return /* @__PURE__ */ React33.createElement(ResetIdentityImpl, {
+    disabled: !active,
+    validationMessage,
+    onConfirm: () => resetIdentity()
+  });
+};
+var ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }) => {
+  const { t } = useTranslation19("os");
+  const confirmationValue = t("confirmation value");
+  const [inputValue, setInputValue] = useState7("");
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React33.createElement(Input, {
+    validationMessage,
+    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t("reset identity input label", {
+      confirmationValue
+    })),
+    disabled,
+    "data-testid": "identity-input",
+    placeholder: confirmationValue,
+    onChange: ({ target: { value } }) => setInputValue(value)
+  })), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
+    // TODO(wittjosiah): Probably make this red?
+    variant: "primary",
+    disabled: disabled || inputValue !== confirmationValue,
+    onClick: () => onConfirm?.(),
+    "data-testid": "reset-identity-input-confirm"
+  }, t("confirm label"))));
+};
+
+// packages/sdk/shell/src/styles/panelStyles.ts
+var stepStyles = "pbs-1 pbe-3 pli-3";
+
+// packages/sdk/shell/src/styles/invitationStatusStyles.ts
+import { Invitation as Invitation6 } from "@dxos/react-client/invitations";
+var inactiveBgColor = "bg-neutral-100 dark:bg-neutral-600";
+var activeBgColor = "bg-primary-500 dark:bg-primary-400";
+var successBgColor = "bg-success-500 dark:bg-success-400";
+var errorBgColor = "bg-error-500 dark:bg-error-400";
+var cancelledBgColor = "bg-warning-500 dark:bg-warning-400";
+var inactiveTextColor = "text-neutral-100 dark:text-neutral-600";
+var activeTextColor = "text-primary-400 dark:text-primary-500";
+var successTextColor = "text-success-400 dark:text-success-500";
+var errorTextColor = "text-error-400 dark:text-error-500";
+var cancelledTextColor = "text-warning-400 dark:text-warning-500";
+var inactiveStrokeColor = "stroke-neutral-100 dark:stroke-neutral-700";
+var activeStrokeColor = "stroke-primary-400 dark:stroke-primary-150";
+var successStrokeColor = "stroke-success-300 dark:stroke-primary-400";
+var errorStrokeColor = "stroke-error-300 dark:stroke-error-500";
+var cancelledStrokeColor = "stroke-warning-300 dark:stroke-warning-500";
+var resolvedStrokeColor = (status) => status === Invitation6.State.ERROR ? errorStrokeColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
+var resolvedBgColor = (status) => status === Invitation6.State.ERROR ? errorBgColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledBgColor : successBgColor;
+var resolvedTextColor = (status) => status === Invitation6.State.ERROR ? errorTextColor : status === Invitation6.State.CANCELLED || status === Invitation6.State.TIMEOUT ? cancelledTextColor : successTextColor;
+
+// packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
+var JoinPanelImpl = (props) => {
+  const { titleId, send, activeView, failed, mode, unredeemedCodes, invitationStates, succeededKeys, failReasons, onExit, onHaloDone, onSpaceDone, exitActionParent, doneActionParent, onHaloInvitationCancel, onSpaceInvitationCancel, onHaloInvitationAuthenticate, onSpaceInvitationAuthenticate, IdentityInput: IdentityInputComponent = IdentityInput, ResetIdentity: ResetIdentityComponent = ResetIdentity } = props;
+  return /* @__PURE__ */ React34.createElement(DensityProvider3, {
+    density: "fine"
+  }, mode !== "halo-only" && /* @__PURE__ */ React34.createElement(JoinHeading, {
+    titleId,
+    mode,
+    onExit,
+    exitActionParent
+  }), /* @__PURE__ */ React34.createElement(Viewport.Root, {
+    focusManaged: true,
+    activeView
+  }, /* @__PURE__ */ React34.createElement(Viewport.Views, null, /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "addition method chooser"
+  }, /* @__PURE__ */ React34.createElement(AdditionMethodChooser, {
+    send,
+    active: activeView === "addition method chooser"
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "reset identity confirmation"
+  }, /* @__PURE__ */ React34.createElement(ResetIdentityComponent, {
+    send,
+    method: "reset identity",
+    active: activeView === "reset identity confirmation"
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "create identity input"
+  }, /* @__PURE__ */ React34.createElement(IdentityInputComponent, {
+    send,
+    method: "create identity",
+    active: activeView === "create identity input"
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "recover identity input"
+  }, /* @__PURE__ */ React34.createElement(IdentityInputComponent, {
+    send,
+    method: "recover identity",
+    active: activeView === "recover identity input"
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation input"
+  }, /* @__PURE__ */ React34.createElement(InvitationInput, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation input",
+    ...unredeemedCodes?.Halo && {
+      unredeemedCode: unredeemedCodes.Halo
+    },
+    ...succeededKeys?.Halo && {
+      succeededKeys: succeededKeys.Halo
+    }
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation rescuer"
+  }, /* @__PURE__ */ React34.createElement(InvitationRescuer, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation rescuer",
+    invitationState: invitationStates?.Halo,
+    onInvitationCancel: onHaloInvitationCancel,
+    failReason: failReasons?.Halo
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation authenticator"
+  }, /* @__PURE__ */ React34.createElement(InvitationAuthenticator, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation authenticator",
+    onInvitationCancel: onHaloInvitationCancel,
+    onInvitationAuthenticate: onHaloInvitationAuthenticate,
+    ...failed.has("Halo") && {
+      failed: true
+    }
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation accepted"
+  }, /* @__PURE__ */ React34.createElement(InvitationAccepted, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation accepted",
+    doneActionParent,
+    onDone: onHaloDone
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "identity added"
+  }, /* @__PURE__ */ React34.createElement(IdentityAdded, {
+    send,
+    mode,
+    active: activeView === "identity added",
+    doneActionParent,
+    onDone: onHaloDone
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation input"
+  }, /* @__PURE__ */ React34.createElement(InvitationInput, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation input",
+    ...unredeemedCodes?.Space && {
+      unredeemedCode: unredeemedCodes.Space
+    },
+    ...succeededKeys?.Space && {
+      succeededKeys: succeededKeys.Space
+    },
+    onExit,
+    exitActionParent
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation rescuer"
+  }, /* @__PURE__ */ React34.createElement(InvitationRescuer, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation rescuer",
+    invitationState: invitationStates?.Space,
+    onInvitationCancel: onSpaceInvitationCancel,
+    failReason: failReasons?.Space
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation authenticator"
+  }, /* @__PURE__ */ React34.createElement(InvitationAuthenticator, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation authenticator",
+    onInvitationCancel: onSpaceInvitationCancel,
+    onInvitationAuthenticate: onSpaceInvitationAuthenticate,
+    ...failed.has("Space") && {
+      failed: true
+    }
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation accepted"
+  }, /* @__PURE__ */ React34.createElement(InvitationAccepted, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation accepted",
+    doneActionParent,
+    onDone: onSpaceDone
+  })))));
+};
+var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone: propsOnDone }) => {
+  const client = useClient6();
+  const identity = useIdentity2();
+  const { hasIosKeyboard } = useThemeContext3();
+  const titleId = useId7("joinPanel__heading", propsTitleId);
+  const [joinState, joinSend, joinService] = useJoinMachine(client, {
+    context: {
+      mode,
+      identity,
+      ...initialInvitationCode && {
+        [mode === "halo-only" ? "halo" : "space"]: {
+          unredeemedCode: initialInvitationCode
+        }
+      }
+    }
+  });
+  console.log("[joinState]", joinState);
+  useEffect4(() => {
+    const subscription = joinService.subscribe((state) => {
+      log8("[state]", state, {
+        F: __dxlog_file8,
+        L: 200,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    joinService
+  ]);
+  useEffect4(() => {
+    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 && !(hasIosKeyboard && $nextAutofocus.hasAttribute("data-prevent-ios-autofocus"))) {
+      $nextAutofocus.focus();
+    }
+  }, [
+    joinState.value,
+    hasIosKeyboard
+  ]);
+  const activeView = useMemo4(() => {
+    switch (true) {
+      case joinState.matches({
+        choosingIdentity: "choosingAuthMethod"
+      }):
+        return "addition method chooser";
+      case joinState.matches("resettingIdentity"):
+        return "reset identity confirmation";
+      case joinState.matches({
+        choosingIdentity: "creatingIdentity"
+      }):
+        return "create identity input";
+      case joinState.matches({
+        choosingIdentity: "recoveringIdentity"
+      }):
+        return "recover identity input";
+      case joinState.matches({
+        choosingIdentity: {
+          acceptingHaloInvitation: "inputtingHaloInvitationCode"
+        }
+      }):
+        return "halo invitation input";
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "connectingHaloInvitation"
+            }
+          }
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "failingHaloInvitation"
+            }
+          }
+        }
+      ].some(joinState.matches):
+        return "halo invitation rescuer";
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "inputtingHaloVerificationCode"
+            }
+          }
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "authenticatingHaloVerificationCode"
+            }
+          }
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "authenticationFailingHaloVerificationCode"
+            }
+          }
+        }
+      ].some(joinState.matches):
+        return "halo invitation authenticator";
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "successHaloInvitation"
+            }
+          }
+        },
+        "finishingJoiningHalo"
+      ].some(joinState.matches):
+        return "halo invitation accepted";
+      case joinState.matches({
+        choosingIdentity: "confirmingAddedIdentity"
+      }):
+        return "identity added";
+      case joinState.matches({
+        acceptingSpaceInvitation: "inputtingSpaceInvitationCode"
+      }):
+        return "space invitation input";
+      case [
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "connectingSpaceInvitation"
+          }
+        },
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "failingSpaceInvitation"
+          }
+        }
+      ].some(joinState.matches):
+        return "space invitation rescuer";
+      case [
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "inputtingSpaceVerificationCode"
+          }
+        },
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "authenticatingSpaceVerificationCode"
+          }
+        },
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "authenticationFailingSpaceVerificationCode"
+          }
+        }
+      ].some(joinState.matches):
+        return "space invitation authenticator";
+      case joinState.matches("finishingJoiningSpace"):
+        return "space invitation accepted";
+      default:
+        return "never";
+    }
+  }, [
+    joinState
+  ]);
+  const failed = useMemo4(() => {
+    const result = /* @__PURE__ */ new Set();
+    switch (true) {
+      case joinState.matches({
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "authenticationFailingHaloVerificationCode"
+          }
+        }
+      }):
+        result.add("Halo");
+        break;
+      case joinState.matches({
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: "authenticationFailingSpaceVerificationCode"
+        }
+      }):
+        result.add("Space");
+        break;
+    }
+    return result;
+  }, [
+    joinState
+  ]);
+  const unredeemedCodes = useMemo4(() => ({
+    Halo: joinState.context.halo.unredeemedCode,
+    Space: joinState.context.space.unredeemedCode
+  }), [
+    joinState
+  ]);
+  const spaces = useMulticastObservable(client.spaces);
+  const succeededKeys = useMemo4(() => ({
+    Space: spaces ? new Set(spaces.map(({ key }) => key.toHex())) : void 0
+  }), [
+    spaces
+  ]);
+  const invitationStates = useMemo4(() => ({
+    Halo: joinState.context.halo.invitationObservable?.get().state,
+    Space: joinState.context.space.invitationObservable?.get().state
+  }), [
+    joinState
+  ]);
+  const failReasons = useMemo4(() => ({
+    Halo: joinState.context.halo.failReason,
+    Space: joinState.context.space.failReason
+  }), [
+    joinState
+  ]);
+  const onHaloDone = useCallback6(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.halo.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.halo.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.halo.invitation?.spaceKey ?? null
+    });
+  }, [
+    joinState,
+    propsOnDone
+  ]);
+  const onSpaceDone = useCallback6(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.space.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.space.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.space.invitation?.spaceKey ?? null
+    });
+  }, [
+    joinState,
+    propsOnDone
+  ]);
+  return /* @__PURE__ */ React34.createElement(JoinPanelImpl, {
+    titleId,
+    mode,
+    send: joinSend,
+    activeView,
+    failed,
+    failReasons,
+    pending: [
+      "connecting",
+      "authenticating"
+    ].some((str) => joinState?.configuration[0].id.includes(str)),
+    unredeemedCodes,
+    invitationStates,
+    succeededKeys,
+    identity,
+    onExit,
+    exitActionParent,
+    doneActionParent,
+    onHaloDone,
+    onSpaceDone,
+    onHaloInvitationCancel: () => joinState.context.halo.invitationObservable?.cancel(),
+    onSpaceInvitationCancel: () => joinState.context.space.invitationObservable?.cancel(),
+    onHaloInvitationAuthenticate: (authCode) => {
+      joinSend({
+        type: "authenticateHaloVerificationCode"
+      });
+      return joinState.context.halo.invitationObservable?.authenticate(authCode);
+    },
+    onSpaceInvitationAuthenticate: (authCode) => {
+      joinSend({
+        type: "authenticateSpaceVerificationCode"
+      });
+      return joinState.context.space.invitationObservable?.authenticate(authCode);
+    }
+  });
+};
+
+// packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
+import { Planet } from "@phosphor-icons/react";
+import React36, { useEffect as useEffect5, useMemo as useMemo5 } from "react";
+import { log as log10 } from "@dxos/log";
+import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client/invitations";
+import { DensityProvider as DensityProvider4, useId as useId8, useTranslation as useTranslation21 } from "@dxos/react-ui";
+
+// packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts
+import { useMachine as useMachine3 } from "@xstate/react";
+import { assign as assign3, createMachine as createMachine3 } from "xstate";
+import { log as log9 } from "@dxos/log";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
+var spaceMachine = createMachine3({
+  id: "space",
+  predictableActionArguments: true,
+  context: {
+    space: null
+  },
+  initial: "managingSpace",
+  states: {
+    managingSpace: {},
+    managingSpaceInvitation: {}
+  },
+  on: {
+    deselectInvitation: {
+      target: ".managingSpace",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    selectInvitation: {
+      target: ".managingSpaceInvitation",
+      actions: [
+        "setInvitation",
+        "log"
+      ]
+    }
+  }
+}, {
+  actions: {
+    setInvitation: assign3({
+      invitation: (context, event) => event?.invitation ?? null
+    }),
+    unsetInvitation: assign3({
+      invitation: () => void 0
+    }),
+    log: (context, event) => {
+      log9("[transition]", {
+        event,
+        context
+      }, {
+        F: __dxlog_file9,
+        L: 53,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var useSpaceMachine = (options) => {
+  return useMachine3(spaceMachine, {
+    ...options,
+    context: {
+      ...options?.context
+    }
+  });
+};
+
+// packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx
+import { Placeholder as Placeholder2, UserPlus, UsersThree } from "@phosphor-icons/react";
+import React35, { useCallback as useCallback7, useState as useState8 } from "react";
+import { useConfig } from "@dxos/react-client";
+import { useSpaceInvitations as useSpaceInvitations2 } from "@dxos/react-client/echo";
+import { Invitation as Invitation7, InvitationEncoder as InvitationEncoder3 } from "@dxos/react-client/invitations";
+import { ScrollArea, useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { descriptionText as descriptionText10, mx as mx21 } from "@dxos/react-ui-theme";
+var activeActionKey = "dxos:react-shell/space-manager/active-action";
+var SpaceManager = (props) => {
+  const { space } = props;
+  const { t } = useTranslation20("os");
+  const config = useConfig();
+  const invitations = useSpaceInvitations2(space?.key);
+  const onInvitationEvent = useCallback7((invitation) => {
+    const invitationCode = InvitationEncoder3.encode(invitation);
+    if (invitation.state === Invitation7.State.CONNECTING) {
+      console.log(JSON.stringify({
+        invitationCode,
+        authCode: invitation.authCode
+      }));
+    }
+  }, []);
+  const inviteActions = {
+    inviteOne: {
+      label: t("invite one label"),
+      description: t("invite one description"),
+      icon: UserPlus,
+      onClick: useCallback7(() => {
+        const invitation = space.share?.({
+          type: Invitation7.Type.INTERACTIVE,
+          authMethod: Invitation7.AuthMethod.SHARED_SECRET
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          invitation.subscribe(onInvitationEvent);
+        }
+      }, [
+        space
+      ])
+    },
+    inviteMany: {
+      label: t("invite many label"),
+      description: t("invite many description"),
+      icon: UsersThree,
+      onClick: useCallback7(() => {
+        const invitation = space.share?.({
+          type: Invitation7.Type.MULTIUSE,
+          authMethod: Invitation7.AuthMethod.NONE
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          invitation.subscribe(onInvitationEvent);
+        }
+      }, [
+        space
+      ])
+    }
+  };
+  return /* @__PURE__ */ React35.createElement(SpaceManagerImpl, {
+    ...props,
+    invitations,
+    inviteActions
+  });
+};
+var headingFragment = "pis-3 pie-1 plb-1 mbe-1 font-medium";
+var SpaceManagerImpl = (props) => {
+  const { active, space, createInvitationUrl, send, inviteActions: propsInviteActions, invitations, showInactiveInvitations, SpaceMemberList: SpaceMemberListComponent = SpaceMemberList, InvitationList: InvitationListComponent = InvitationList } = props;
+  const { t } = useTranslation20("os");
+  const inviteActions = propsInviteActions ?? {
+    noopInvite: {
+      label: t("create space invitation label"),
+      description: "",
+      icon: Placeholder2,
+      onClick: () => {
+      }
+    }
+  };
+  const [activeAction, setInternalActiveAction] = useState8(localStorage.getItem(activeActionKey) ?? "inviteOne");
+  const setActiveAction = (nextAction) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+  const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
+    Invitation7.State.CANCELLED
+  ].includes(invitation.get().state));
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(ScrollArea.Root, {
+    classNames: "grow shrink basis-28 -mli-2"
+  }, /* @__PURE__ */ React35.createElement(ScrollArea.Viewport, {
+    classNames: "is-full pie-2"
+  }, !!visibleInvitations?.length && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("h3", {
+    className: mx21(headingFragment, descriptionText10)
+  }, t("invitation list heading")), /* @__PURE__ */ React35.createElement(InvitationListComponent, {
+    className: "mb-2",
+    send,
+    invitations: visibleInvitations ?? [],
+    onClickRemove: (invitation) => invitation.cancel(),
+    createInvitationUrl
+  }), /* @__PURE__ */ React35.createElement("h3", {
+    className: mx21(headingFragment, descriptionText10, "mbs-2")
+  }, t("space member list heading"))), /* @__PURE__ */ React35.createElement(SpaceMemberListComponent, {
+    spaceKey: space.key,
+    includeSelf: true
+  })), /* @__PURE__ */ React35.createElement(ScrollArea.Scrollbar, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React35.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(BifurcatedAction, {
+    disabled: !active,
+    actions: inviteActions,
+    activeAction,
+    onChangeActiveAction: setActiveAction,
+    "data-testid": "spaces-panel.create-invitation"
+  })));
+};
+
+// packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
+var SpacePanelHeading = ({ titleId, space, onDone }) => {
+  const { t } = useTranslation21("os");
+  const name = space.properties.name;
+  return /* @__PURE__ */ React36.createElement(Heading, {
+    titleId,
+    title: t("space panel heading"),
+    corner: /* @__PURE__ */ React36.createElement(CloseButton, {
+      "data-testid": "identity-panel-done",
+      onDone
+    })
+  }, /* @__PURE__ */ React36.createElement("div", {
+    role: "none",
+    className: "flex gap-4 items-center justify-center mlb-4"
+  }, /* @__PURE__ */ React36.createElement(Planet, {
+    size: 32
+  }), /* @__PURE__ */ React36.createElement("div", {
+    className: "block text-start font-light text-xl"
+  }, name ?? space.key.truncate())));
+};
+var SpacePanelImpl = (props) => {
+  const { titleId, activeView, space, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
+  return /* @__PURE__ */ React36.createElement(DensityProvider4, {
+    density: "fine"
+  }, /* @__PURE__ */ React36.createElement(SpacePanelHeading, {
+    ...rest,
+    titleId,
+    space
+  }), /* @__PURE__ */ React36.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React36.createElement(Viewport.Views, null, /* @__PURE__ */ React36.createElement(Viewport.View, {
+    id: "space manager",
+    classNames: stepStyles
+  }, /* @__PURE__ */ React36.createElement(SpaceManagerComponent, {
+    active: activeView === "space manager",
+    space,
+    ...rest
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+    id: "space invitation manager",
+    classNames: stepStyles
+  }, /* @__PURE__ */ React36.createElement(InvitationManagerComponent, {
+    active: activeView === "space invitation manager",
+    ...rest,
+    invitationUrl: props.invitationUrl
+  })))));
+};
+var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
+  const invitationStatus = useInvitationStatus3(invitation);
+  return /* @__PURE__ */ React36.createElement(SpacePanelImpl, {
+    ...props,
+    ...invitationStatus,
+    invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
+  });
+};
+var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, ...props }) => {
+  const titleId = useId8("spacePanel__heading", propsTitleId);
+  const [spaceState, spaceSend, spaceService] = useSpaceMachine({
+    context: {
+      space: props.space
+    }
+  });
+  useEffect5(() => {
+    const subscription = spaceService.subscribe((state) => {
+      log10("[state]", state, {
+        F: __dxlog_file10,
+        L: 92,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    spaceService
+  ]);
+  const activeView = useMemo5(() => {
+    switch (true) {
+      case spaceState.matches("managingSpace"):
+        return "space manager";
+      case spaceState.matches("managingSpaceInvitation"):
+        return "space invitation manager";
+      default:
+        return "never";
+    }
+  }, [
+    spaceState
+  ]);
+  const implProps = {
+    ...props,
+    activeView,
+    send: spaceSend,
+    titleId,
+    createInvitationUrl
+  };
+  return spaceState.context.invitation ? /* @__PURE__ */ React36.createElement(SpacePanelWithInvitationImpl, {
+    ...implProps,
+    invitation: spaceState.context.invitation
+  }) : /* @__PURE__ */ React36.createElement(SpacePanelImpl, implProps);
+};
+
+// packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
+var IdentityDialog = (props) => {
+  const titleId = useId9("spaceDialog__title");
+  return /* @__PURE__ */ React37.createElement(Dialog.Root, {
+    defaultOpen: true,
+    onOpenChange: (open) => open || props.onDone?.()
+  }, /* @__PURE__ */ React37.createElement(Dialog.Portal, null, /* @__PURE__ */ React37.createElement(Dialog.Overlay, null, /* @__PURE__ */ React37.createElement(Dialog.Content, {
+    "aria-labelledby": titleId,
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }, /* @__PURE__ */ React37.createElement(ClipboardProvider, null, /* @__PURE__ */ React37.createElement(IdentityPanel, {
+    ...props,
+    titleId,
+    doneActionParent: /* @__PURE__ */ React37.createElement(Dialog.Close, {
+      asChild: true
+    })
+  }))))));
+};
+
+// packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
+import React38 from "react";
+import { AlertDialog, useId as useId10, useVisualViewport } from "@dxos/react-ui";
+var JoinDialog = (joinPanelProps) => {
+  const titleId = useId10("joinDialog__title");
+  const { height } = useVisualViewport();
+  return /* @__PURE__ */ React38.createElement(AlertDialog.Root, {
+    defaultOpen: true,
+    onOpenChange: (open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))
+  }, /* @__PURE__ */ React38.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React38.createElement(AlertDialog.Overlay, {
+    classNames: "backdrop-blur",
+    ...height && {
+      style: {
+        blockSize: `${height}px`
+      }
+    }
+  }, /* @__PURE__ */ React38.createElement(AlertDialog.Content, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ React38.createElement(JoinPanel, {
+    ...joinPanelProps,
+    titleId,
+    exitActionParent: /* @__PURE__ */ React38.createElement(AlertDialog.Cancel, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React38.createElement(AlertDialog.Action, {
+      asChild: true
+    })
+  })))));
+};
+
+// packages/sdk/shell/src/composites/Shell/run-shell.tsx
+import React41, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
+import { ShellRuntimeImpl } from "@dxos/client-services";
+import { Client, ClientContext, ClientServicesProxy, Config, SystemStatus } from "@dxos/react-client";
+import { ThemeProvider, Tooltip as Tooltip3 } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+import { createIFramePort } from "@dxos/rpc-tunnel";
+
+// packages/sdk/shell/src/composites/Shell/Shell.tsx
+import React40, { useEffect as useEffect6, useState as useState9 } from "react";
+import { log as log11 } from "@dxos/log";
+import { ShellDisplay, ShellLayout } from "@dxos/react-client";
+import { useSpace as useSpace2 } from "@dxos/react-client/echo";
+
+// packages/sdk/shell/src/composites/SpaceDialog/SpaceDialog.tsx
+import React39 from "react";
+import { Dialog as Dialog2, useId as useId11 } from "@dxos/react-ui";
+var SpaceDialog = (spacePanelProps) => {
+  const titleId = useId11("spaceDialog__title");
+  return /* @__PURE__ */ React39.createElement(Dialog2.Root, {
+    defaultOpen: true,
+    onOpenChange: (open) => open || spacePanelProps.onDone?.()
+  }, /* @__PURE__ */ React39.createElement(Dialog2.Portal, null, /* @__PURE__ */ React39.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React39.createElement(Dialog2.Content, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ React39.createElement(ClipboardProvider, null, /* @__PURE__ */ React39.createElement(SpacePanel, {
+    ...spacePanelProps,
+    titleId,
+    doneActionParent: /* @__PURE__ */ React39.createElement(Dialog2.Close, {
+      asChild: true
+    })
+  }))))));
+};
+
+// packages/sdk/shell/src/composites/Shell/Shell.tsx
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
+var Shell = ({ runtime, origin }) => {
+  const [{ layout, invitationCode, spaceKey }, setLayout] = useState9({
+    layout: runtime.layout,
+    invitationCode: runtime.invitationCode,
+    spaceKey: runtime.spaceKey
+  });
+  const space = useSpace2(spaceKey);
+  useEffect6(() => {
+    return runtime.layoutUpdate.on((request) => setLayout(request));
+  }, [
+    runtime
+  ]);
+  useEffect6(() => {
+    if (layout === ShellLayout.SPACE && !space) {
+      log11.warn("No space found for shell space invitations.", void 0, {
+        F: __dxlog_file11,
+        L: 30,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      const timeout = setTimeout(async () => {
+        await runtime.setAppContext({
+          display: ShellDisplay.NONE
+        });
+        runtime.setLayout({
+          layout: ShellLayout.DEFAULT
+        });
+      });
+      return () => clearTimeout(timeout);
+    }
+  }, [
+    runtime,
+    layout,
+    space
+  ]);
+  switch (layout) {
+    case ShellLayout.INITIALIZE_IDENTITY:
+      return /* @__PURE__ */ React40.createElement(JoinDialog, {
+        mode: "halo-only",
+        initialInvitationCode: invitationCode,
+        onDone: () => {
+          void runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        }
+      });
+    case ShellLayout.IDENTITY:
+    case ShellLayout.SHARE_IDENTITY:
+    case ShellLayout.EDIT_PROFILE:
+      return /* @__PURE__ */ React40.createElement(IdentityDialog, {
+        createInvitationUrl: (invitationCode2) => `${origin}?deviceInvitationCode=${invitationCode2}`,
+        onDone: async () => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        }
+      });
+    case ShellLayout.SPACE:
+      return space ? /* @__PURE__ */ React40.createElement(SpaceDialog, {
+        space,
+        createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
+        onDone: async () => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        }
+      }) : null;
+    case ShellLayout.JOIN_SPACE:
+      return /* @__PURE__ */ React40.createElement(JoinDialog, {
+        initialInvitationCode: invitationCode,
+        onDone: async (result) => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            spaceKey: result?.spaceKey ?? void 0
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        },
+        onExit: async () => {
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        }
+      });
+    default:
+      return null;
+  }
+};
+
+// packages/sdk/shell/src/translations/locales/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  os: () => os
+});
+var os = {
+  "manage profile label": "Manage identity",
+  "identity offline description": "Offline",
+  "sidebar label": "DXOS sidebar",
+  "copy invitation code label": "Copy URL",
+  "copy invitation code success label": "Copied",
+  "open share panel label": "View QR code",
+  "joining space heading": "Joining space",
+  "join space heading": "Enter space invitation",
+  "halo heading": "Initialize device identity",
+  "exit label": "Exit",
+  "identity selector title": "Join as",
+  "identity radio group title": "Select an identity you\u2019ve associated with this device already",
+  "add identity label": "Add",
+  "continue label": "Continue",
+  "back label": "Back",
+  "next label": "Next",
+  "close label": "Close",
+  "auth choices label": "Choose an identity",
+  "create identity label": "Create an identity",
+  "create identity description": "Create a new identity.",
+  "recover identity label": "Use a seed phrase",
+  "recover identity description": "Enter your seed phrase to log in manually.",
+  "join identity label": "Use another 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 chooser title": "An identity is required to continue",
+  "new identity input label": "Set display name",
+  "recover identity input label": "Type or paste your seed phrase",
+  "failed to create identity message": "Failed to create an identity.",
+  "failed to recover identity message": "Failed to recover an identity from the provided seed phrase.",
+  "failed to authenticate message": "Incorrect PIN.",
+  "identity added label": "Created identity & added to this device:",
+  "join space as identity heading": "<part>as </part><part><icon/><label>{{labelValue}}</label></part>",
+  "error status label": "Failed",
+  "timeout status label": "Timed out",
+  "cancelled status label": "Cancelled",
+  "init status label": "Ready to connect",
+  "connecting status label": "Connecting\u2026",
+  "connected status label": "Enter confirmation PIN",
+  "authenticating status label": "Enter confirmation PIN",
+  "success status label": "Success",
+  "connect label": "Connect",
+  "reconnect label": "Reconnect",
+  "cancel label": "Cancel",
+  "done label": "Done",
+  "reset label": "Start over",
+  "auth code input label": "Enter the verification code",
+  "invitation input label": "Paste an invitation code or URL",
+  "create device invitation label": "Add device",
+  "create space invitation label": "Invite",
+  "qr label": "Scan to accept invitation",
+  "empty invitations message": "No pending invitations",
+  "empty device list message": "No devices authenticated other than this device.",
+  "show all spaces label": "All spaces",
+  "all spaces label": "All spaces",
+  "create space label": "Create a new space",
+  "join space label": "Join a space",
+  "show current space label": "Current space",
+  "view space invitations label": "View space invitations",
+  "toggle sidebar label": "Open/close sidebar",
+  "open sidebar label": "Open sidebar",
+  "close sidebar label": "Close sidebar",
+  "welcome message": "Welcome",
+  "selecting identity heading": "Selecting identity",
+  "devices heading": "Devices",
+  "identity heading": "Profile settings",
+  "choose devices label": "Add device",
+  "choose profile label": "Edit profile",
+  "choose sign out label": "Sign out",
+  "empty space members message": "There is nobody in this space yet.",
+  "back to all invitations label": "Back to all invitations",
+  "invitation heading": "Invitation",
+  "invitation list heading": "Invitations",
+  "device invitation list heading": "Pending device invitations",
+  "space invitation list heading": "Pending invitations",
+  "device list heading": "Devices",
+  "space member list heading": "Members",
+  "space panel heading": "Space membership",
+  "auth code message": "Enter the following auth code on the joining device.",
+  "display name input label": "Display name",
+  "display name input placeholder": "Enter a display name",
+  "invite one label": "Invite one",
+  "invite one description": "Only one user may join.",
+  "invite one qr label": "Single-use",
+  "invite one list item label": "Active single-use invitation",
+  "invite many label": "Invite many",
+  "invite many description": "Anyone with the link can join.",
+  "invite many qr label": "Multiple-use",
+  "invite many list item label": "Active multiple-use invitation",
+  "invite options label": "Change the active invite option.",
+  "confirm label": "Confirm",
+  "reset identity input label": "This will clear this device and all associated data. Type {{confirmationValue}} and confirm to continue.",
+  "failed to reset identity message": "Failed to reset identity.",
+  "confirmation value": "CONFIRM"
+};
+
+// packages/sdk/shell/src/translations/index.ts
+var osTranslations = {
+  "en-US": en_US_exports
+};
+
+// packages/sdk/shell/src/composites/Shell/run-shell.tsx
+var runShell = async (config = new Config()) => {
+  const services = new ClientServicesProxy(createIFramePort({
+    channel: DEFAULT_CLIENT_CHANNEL
+  }));
+  const client = new Client({
+    config,
+    services
+  });
+  const runtime = new ShellRuntimeImpl(createIFramePort({
+    channel: DEFAULT_SHELL_CHANNEL
+  }));
+  await Promise.all([
+    runtime.open(),
+    client.initialize()
+  ]);
+  createRoot(document.getElementById("root")).render(/* @__PURE__ */ React41.createElement(StrictMode, null, /* @__PURE__ */ React41.createElement(ThemeProvider, {
+    tx: defaultTx,
+    resourceExtensions: [
+      osTranslations
+    ]
+  }, /* @__PURE__ */ React41.createElement(ClientContext.Provider, {
+    value: {
+      client,
+      status: SystemStatus.ACTIVE
+    }
+  }, /* @__PURE__ */ React41.createElement(ClipboardProvider, null, /* @__PURE__ */ React41.createElement(Tooltip3.Provider, null, /* @__PURE__ */ React41.createElement(Shell, {
+    runtime,
+    origin: location.origin
+  })))))));
+};
+
+// packages/sdk/shell/src/composites/Shell/ShellContext.tsx
+import React42, { createContext as createContext2, useCallback as useCallback8, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo6, useState as useState10 } from "react";
+import { ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout3, useClient as useClient7 } from "@dxos/react-client";
+import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
+import { mx as mx22 } from "@dxos/react-ui-theme";
+
+// packages/sdk/shell/src/composites/Shell/memory-shell-runtime.ts
+import { Event } from "@dxos/async";
+import { ShellLayout as ShellLayout2 } from "@dxos/react-client";
+var MemoryShellRuntime = class {
+  constructor({ layout, invitationCode, spaceKey } = {}) {
+    this.layoutUpdate = new Event();
+    this.contextUpdate = new Event();
+    this._layout = layout ?? ShellLayout2.DEFAULT;
+    this._invitationCode = invitationCode;
+    this._spaceKey = spaceKey;
+  }
+  get layout() {
+    return this._layout;
+  }
+  get invitationCode() {
+    return this._invitationCode;
+  }
+  get spaceKey() {
+    return this._spaceKey;
+  }
+  setLayout(request) {
+    this._layout = request.layout;
+    this._invitationCode = request.invitationCode;
+    this._spaceKey = request.spaceKey;
+    this.layoutUpdate.emit(request);
+  }
+  async setAppContext(context) {
+    this.contextUpdate.emit(context);
+  }
+};
+
+// packages/sdk/shell/src/composites/Shell/ShellContext.tsx
+var ShellContext = /* @__PURE__ */ createContext2({});
+var useShell = () => {
+  const client = useClient7();
+  const { runtime, setDisplay } = useContext2(ShellContext);
+  const setLayout = async (layout, options) => {
+    if (runtime) {
+      if (layout === ShellLayout3.DEFAULT) {
+        setDisplay?.(ShellDisplay2.NONE);
+      } else {
+        setDisplay?.(ShellDisplay2.FULLSCREEN);
+      }
+      runtime.setLayout({
+        layout,
+        ...options
+      });
+    }
+    await client.shell.open(layout, options);
+  };
+  return {
+    setLayout
+  };
+};
+var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
+  const client = useClient7();
+  const identity = useIdentity3();
+  const [display, setDisplay] = useState10(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const shellRuntime = useMemo6(() => {
+    if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
+      return;
+    }
+    if (spaceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout3.JOIN_SPACE,
+        invitationCode: spaceInvitationCode
+      });
+    }
+    if (deviceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout3.INITIALIZE_IDENTITY,
+        invitationCode: deviceInvitationCode
+      });
+    }
+    return new MemoryShellRuntime({
+      layout: identity ? ShellLayout3.DEFAULT : ShellLayout3.INITIALIZE_IDENTITY
+    });
+  }, [
+    client,
+    identity,
+    spaceInvitationCode,
+    deviceInvitationCode
+  ]);
+  const handleKeyDown = useCallback8((event) => {
+    if (!space || !shellRuntime) {
+      return;
+    }
+    const modifier = event.ctrlKey || event.metaKey;
+    if (event.key === ">" && event.shiftKey && modifier) {
+      shellRuntime.setLayout({
+        layout: ShellLayout3.SHARE_IDENTITY
+      });
+      setDisplay(ShellDisplay2.FULLSCREEN);
+    } else if (event.key === "." && modifier) {
+      shellRuntime.setLayout({
+        layout: ShellLayout3.SPACE,
+        spaceKey: space.key
+      });
+      setDisplay(ShellDisplay2.FULLSCREEN);
+    }
+  }, [
+    space,
+    shellRuntime
+  ]);
+  useEffect7(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    shellRuntime,
+    handleKeyDown
+  ]);
+  useEffect7(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    return shellRuntime.contextUpdate.on(({ display: display2, spaceKey }) => {
+      if (display2) {
+        setDisplay(display2);
+      }
+      onJoinedSpace?.(spaceKey);
+    });
+  }, [
+    shellRuntime
+  ]);
+  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, shellRuntime && /* @__PURE__ */ React42.createElement("div", {
+    className: mx22(display === ShellDisplay2.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ React42.createElement(Shell, {
+    runtime: shellRuntime,
+    origin: window.location.origin
+  })), /* @__PURE__ */ React42.createElement(ShellContext.Provider, {
+    value: {
+      runtime: shellRuntime,
+      setDisplay
+    }
+  }, children));
+};
+export {
+  Action,
+  Actions,
+  AuthCode,
+  BifurcatedAction,
+  Centered,
+  ClipboardContext,
+  ClipboardProvider,
+  CloseButton,
+  CompoundButton,
+  CopyButton,
+  CopyButtonIconOnly,
+  DeviceList,
+  Emoji,
+  Heading,
+  IdentityDialog,
+  IdentityListItem,
+  IdentityPanel,
+  IdentityPanelImpl,
+  Input,
+  InvitationList,
+  InvitationListContainer,
+  InvitationListItem,
+  InvitationListItemImpl,
+  JoinDialog,
+  JoinPanel,
+  JoinPanelImpl,
+  Label,
+  Shell,
+  ShellContext,
+  ShellProvider,
+  SpaceDialog,
+  SpaceListItem,
+  SpaceMemberList,
+  SpaceMemberListImpl,
+  SpacePanel,
+  SpacePanelImpl,
+  StepHeading,
+  Viewport,
+  activeBgColor,
+  activeStrokeColor,
+  activeTextColor,
+  cancelledBgColor,
+  cancelledStrokeColor,
+  cancelledTextColor,
+  createViewportScope,
+  errorBgColor,
+  errorStrokeColor,
+  errorTextColor,
+  inactiveBgColor,
+  inactiveStrokeColor,
+  inactiveTextColor,
+  osTranslations,
+  resolvedBgColor,
+  resolvedStrokeColor,
+  resolvedTextColor,
+  runShell,
+  stepStyles,
+  successBgColor,
+  successStrokeColor,
+  successTextColor,
+  useClipboardContext,
+  useShell,
+  useViewportContext
+};
+//# sourceMappingURL=react.mjs.map