@dxos/shell 0.6.14-main.f49f251 → 0.6.14-staging.0f558a0

package/dist/lib/node/react.cjs

@@ -0,0 +1,4760 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_exports = {};
+__export(react_exports, {
+  Action: () => Action,
+  Actions: () => Actions,
+  AgentConfig: () => AgentConfig,
+  AuthCode: () => AuthCode,
+  BifurcatedAction: () => BifurcatedAction,
+  Centered: () => Centered,
+  ClipboardContext: () => ClipboardContext,
+  ClipboardProvider: () => ClipboardProvider,
+  CloseButton: () => CloseButton,
+  CompoundButton: () => CompoundButton,
+  ConfirmReset: () => ConfirmReset,
+  ConfirmResetImpl: () => ConfirmResetImpl,
+  CopyButton: () => CopyButton,
+  CopyButtonIconOnly: () => CopyButtonIconOnly,
+  DeviceList: () => DeviceList,
+  Emoji: () => Emoji,
+  EmojiPickerBlock: () => EmojiPickerBlock,
+  EmojiPickerToolbarButton: () => EmojiPickerToolbarButton,
+  Heading: () => Heading,
+  HuePickerBlock: () => HuePickerBlock,
+  HuePickerToolbarButton: () => HuePickerToolbarButton,
+  IdentityDialog: () => IdentityDialog,
+  IdentityListItem: () => IdentityListItem,
+  IdentityPanel: () => IdentityPanel,
+  IdentityPanelImpl: () => IdentityPanelImpl,
+  Input: () => Input,
+  InvitationList: () => InvitationList,
+  InvitationListContainer: () => InvitationListContainer,
+  InvitationListItem: () => InvitationListItem,
+  InvitationListItemImpl: () => InvitationListItemImpl,
+  InvitationManager: () => InvitationManager,
+  JoinDialog: () => JoinDialog,
+  JoinPanel: () => JoinPanel,
+  JoinPanelImpl: () => JoinPanelImpl,
+  Label: () => Label,
+  Shell: () => Shell,
+  ShellContext: () => ShellContext,
+  ShellProvider: () => ShellProvider,
+  SpaceDialog: () => SpaceDialog,
+  SpaceListItem: () => SpaceListItem,
+  SpaceMemberList: () => SpaceMemberList,
+  SpaceMemberListImpl: () => SpaceMemberListImpl,
+  SpacePanel: () => SpacePanel,
+  SpacePanelImpl: () => SpacePanelImpl,
+  StatusPanel: () => StatusPanel,
+  StepHeading: () => StepHeading,
+  Viewport: () => Viewport,
+  activeBgColor: () => activeBgColor,
+  activeStrokeColor: () => activeStrokeColor,
+  activeTextColor: () => activeTextColor,
+  cancelledBgColor: () => cancelledBgColor,
+  cancelledStrokeColor: () => cancelledStrokeColor,
+  cancelledTextColor: () => cancelledTextColor,
+  createViewportScope: () => createViewportScope,
+  errorBgColor: () => errorBgColor,
+  errorStrokeColor: () => errorStrokeColor,
+  errorTextColor: () => errorTextColor,
+  inactiveBgColor: () => inactiveBgColor,
+  inactiveStrokeColor: () => inactiveStrokeColor,
+  inactiveTextColor: () => inactiveTextColor,
+  osTranslations: () => osTranslations,
+  resolvedBgColor: () => resolvedBgColor,
+  resolvedStrokeColor: () => resolvedStrokeColor,
+  resolvedTextColor: () => resolvedTextColor,
+  runShell: () => runShell,
+  stepStyles: () => stepStyles,
+  successBgColor: () => successBgColor,
+  successStrokeColor: () => successStrokeColor,
+  successTextColor: () => successTextColor,
+  useClipboardContext: () => useClipboardContext,
+  useShell: () => useShell,
+  useViewportContext: () => useViewportContext
+});
+module.exports = __toCommonJS(react_exports);
+var import_chunk_Q7SFCCGT = require("./chunk-Q7SFCCGT.cjs");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react3 = require("@phosphor-icons/react");
+var import_react4 = __toESM(require("react"));
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_data = __toESM(require("@emoji-mart/data"));
+var import_react7 = __toESM(require("@emoji-mart/react"));
+var import_react8 = require("@phosphor-icons/react");
+var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+var import_react9 = __toESM(require("react"));
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_react10 = require("@phosphor-icons/react");
+var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
+var import_react11 = __toESM(require("react"));
+var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
+var import_react12 = __toESM(require("react"));
+var import_display_name = require("@dxos/display-name");
+var import_echo = require("@dxos/react-client/echo");
+var import_react_ui6 = require("@dxos/react-ui");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_util = require("@dxos/util");
+var import_react13 = __toESM(require("react"));
+var import_react_client = require("@dxos/react-client");
+var import_echo2 = require("@dxos/react-client/echo");
+var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_react14 = require("@phosphor-icons/react");
+var import_react15 = __toESM(require("react"));
+var import_react_ui8 = require("@dxos/react-ui");
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_react16 = require("@phosphor-icons/react");
+var import_react17 = __toESM(require("react"));
+var import_display_name2 = require("@dxos/display-name");
+var import_halo = require("@dxos/react-client/halo");
+var import_mesh = require("@dxos/react-client/mesh");
+var import_react_ui9 = require("@dxos/react-ui");
+var import_react_ui_theme9 = require("@dxos/react-ui-theme");
+var import_util2 = require("@dxos/util");
+var import_react18 = require("@phosphor-icons/react");
+var import_date_fns = require("date-fns");
+var import_react19 = __toESM(require("react"));
+var import_invitations = require("@dxos/react-client/invitations");
+var import_react_ui10 = require("@dxos/react-ui");
+var import_react_ui_theme10 = require("@dxos/react-ui-theme");
+var import_util3 = require("@dxos/util");
+var import_react20 = __toESM(require("react"));
+var import_react_ui_theme11 = require("@dxos/react-ui-theme");
+var import_react21 = __toESM(require("react"));
+var import_echo3 = require("@dxos/react-client/echo");
+var import_react22 = __toESM(require("react"));
+var import_react_ui11 = require("@dxos/react-ui");
+var import_react_ui_theme12 = require("@dxos/react-ui-theme");
+var import_react23 = require("@phosphor-icons/react");
+var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
+var import_react24 = __toESM(require("react"));
+var import_react_ui12 = require("@dxos/react-ui");
+var import_react_ui_theme13 = require("@dxos/react-ui-theme");
+var import_react25 = __toESM(require("react"));
+var import_react_ui_theme14 = require("@dxos/react-ui-theme");
+var import_react26 = require("@phosphor-icons/react");
+var import_react27 = __toESM(require("react"));
+var import_react_ui13 = require("@dxos/react-ui");
+var import_react_ui_theme15 = require("@dxos/react-ui-theme");
+var import_react28 = __toESM(require("react"));
+var import_react_ui_theme16 = require("@dxos/react-ui-theme");
+var import_react29 = __toESM(require("react"));
+var import_react_ui_theme17 = require("@dxos/react-ui-theme");
+var import_react30 = __toESM(require("react"));
+var import_react_ui_theme18 = require("@dxos/react-ui-theme");
+var import_react31 = __toESM(require("react"));
+var import_react_ui14 = require("@dxos/react-ui");
+var import_react32 = __toESM(require("react"));
+var import_react_ui_theme19 = require("@dxos/react-ui-theme");
+var import_react_tabster = require("@fluentui/react-tabster");
+var import_react_context = require("@radix-ui/react-context");
+var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
+var import_react33 = __toESM(require("react"));
+var import_react_ui15 = require("@dxos/react-ui");
+var import_react_ui_theme20 = require("@dxos/react-ui-theme");
+var import_react34 = __toESM(require("react"));
+var import_react_ui16 = require("@dxos/react-ui");
+var import_react_ui_theme21 = require("@dxos/react-ui-theme");
+var import_util4 = require("@dxos/util");
+var import_react35 = __toESM(require("react"));
+var import_react_ui17 = require("@dxos/react-ui");
+var import_react36 = require("@phosphor-icons/react");
+var import_react37 = __toESM(require("react"));
+var import_display_name3 = require("@dxos/display-name");
+var import_invariant = require("@dxos/invariant");
+var import_log = require("@dxos/log");
+var import_react_client2 = require("@dxos/react-client");
+var import_halo2 = require("@dxos/react-client/halo");
+var import_invitations2 = require("@dxos/react-client/invitations");
+var import_mesh2 = require("@dxos/react-client/mesh");
+var import_react_ui18 = require("@dxos/react-ui");
+var import_react_ui_theme22 = require("@dxos/react-ui-theme");
+var import_util5 = require("@dxos/util");
+var import_react38 = require("@xstate/react");
+var import_xstate = require("xstate");
+var import_log2 = require("@dxos/log");
+var import_react39 = __toESM(require("react"));
+var import_log3 = require("@dxos/log");
+var import_react_client3 = require("@dxos/react-client");
+var import_halo3 = require("@dxos/react-client/halo");
+var import_invitations3 = require("@dxos/react-client/invitations");
+var import_react40 = __toESM(require("react"));
+var import_log4 = require("@dxos/log");
+var import_react_ui19 = require("@dxos/react-ui");
+var import_util6 = require("@dxos/util");
+var import_react_client4 = require("@dxos/react-client");
+var import_react41 = require("react");
+var import_invariant2 = require("@dxos/invariant");
+var import_services = require("@dxos/protocols/proto/dxos/client/services");
+var import_metadata = require("@dxos/protocols/proto/dxos/echo/metadata");
+var import_react_client5 = require("@dxos/react-client");
+var import_react42 = require("react");
+var import_invariant3 = require("@dxos/invariant");
+var import_log5 = require("@dxos/log");
+var import_react_client6 = require("@dxos/react-client");
+var import_invitations4 = require("@dxos/react-client/invitations");
+var import_react43 = require("@phosphor-icons/react");
+var import_react44 = __toESM(require("react"));
+var import_react_qr_rounded = require("react-qr-rounded");
+var import_react_ui20 = require("@dxos/react-ui");
+var import_react_ui_theme23 = require("@dxos/react-ui-theme");
+var import_util7 = require("@dxos/util");
+var import_invitations5 = require("@dxos/react-client/invitations");
+var import_react45 = require("@phosphor-icons/react");
+var import_react46 = __toESM(require("react"));
+var import_log6 = require("@dxos/log");
+var import_react_ui21 = require("@dxos/react-ui");
+var import_react_ui_theme24 = require("@dxos/react-ui-theme");
+var import_react47 = __toESM(require("react"));
+var import_log7 = require("@dxos/log");
+var import_react_client7 = require("@dxos/react-client");
+var import_halo4 = require("@dxos/react-client/halo");
+var import_react_ui22 = require("@dxos/react-ui");
+var import_react48 = require("@phosphor-icons/react");
+var import_react49 = __toESM(require("react"));
+var import_react_ui23 = require("@dxos/react-ui");
+var import_react_ui_theme25 = require("@dxos/react-ui-theme");
+var import_react50 = require("@xstate/react");
+var import_react51 = require("react");
+var import_xstate2 = require("xstate");
+var import_log8 = require("@dxos/log");
+var import_react_client8 = require("@dxos/react-client");
+var import_invitations6 = require("@dxos/react-client/invitations");
+var import_react52 = require("@phosphor-icons/react");
+var import_react53 = __toESM(require("react"));
+var import_react_ui24 = require("@dxos/react-ui");
+var import_react_ui_theme26 = require("@dxos/react-ui-theme");
+var import_react54 = __toESM(require("react"));
+var import_display_name4 = require("@dxos/display-name");
+var import_react_ui25 = require("@dxos/react-ui");
+var import_react_ui_theme27 = require("@dxos/react-ui-theme");
+var import_util8 = require("@dxos/util");
+var import_react55 = __toESM(require("react"));
+var import_log9 = require("@dxos/log");
+var import_react_client9 = require("@dxos/react-client");
+var import_react_ui26 = require("@dxos/react-ui");
+var import_react56 = __toESM(require("react"));
+var import_react_ui27 = require("@dxos/react-ui");
+var import_react57 = __toESM(require("react"));
+var import_log10 = require("@dxos/log");
+var import_react_ui28 = require("@dxos/react-ui");
+var import_react58 = __toESM(require("react"));
+var import_react_ui29 = require("@dxos/react-ui");
+var import_react_ui_theme28 = require("@dxos/react-ui-theme");
+var import_react59 = __toESM(require("react"));
+var import_invitations7 = require("@dxos/react-client/invitations");
+var import_react_ui30 = require("@dxos/react-ui");
+var import_react_ui_theme29 = require("@dxos/react-ui-theme");
+var import_util9 = require("@dxos/util");
+var import_invitations8 = require("@dxos/react-client/invitations");
+var import_react60 = require("@phosphor-icons/react");
+var import_react61 = __toESM(require("react"));
+var import_log11 = require("@dxos/log");
+var import_invitations9 = require("@dxos/react-client/invitations");
+var import_react_ui31 = require("@dxos/react-ui");
+var import_react62 = require("@xstate/react");
+var import_xstate3 = require("xstate");
+var import_log12 = require("@dxos/log");
+var import_react63 = require("@phosphor-icons/react");
+var import_react64 = __toESM(require("react"));
+var import_log13 = require("@dxos/log");
+var import_react_client10 = require("@dxos/react-client");
+var import_echo4 = require("@dxos/react-client/echo");
+var import_invitations10 = require("@dxos/react-client/invitations");
+var import_react_ui32 = require("@dxos/react-ui");
+var import_react_ui_theme30 = require("@dxos/react-ui-theme");
+var import_react65 = __toESM(require("react"));
+var import_react_ui33 = require("@dxos/react-ui");
+var import_react66 = __toESM(require("react"));
+var import_react_ui34 = require("@dxos/react-ui");
+var import_react67 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_client_protocol = require("@dxos/client-protocol");
+var import_react_client11 = require("@dxos/react-client");
+var import_react_ui35 = require("@dxos/react-ui");
+var import_react_ui_theme31 = require("@dxos/react-ui-theme");
+var import_rpc_tunnel = require("@dxos/rpc-tunnel");
+var import_react68 = __toESM(require("react"));
+var import_log14 = require("@dxos/log");
+var import_react_client12 = require("@dxos/react-client");
+var import_react_client13 = require("@dxos/react-client");
+var import_echo5 = require("@dxos/react-client/echo");
+var import_react69 = __toESM(require("react"));
+var import_react_ui36 = require("@dxos/react-ui");
+var import_react70 = __toESM(require("react"));
+var import_react_ui37 = require("@dxos/react-ui");
+var import_async = require("@dxos/async");
+var import_client_protocol2 = require("@dxos/client-protocol");
+var import_invariant4 = require("@dxos/invariant");
+var import_iframe = require("@dxos/protocols/proto/dxos/iframe");
+var import_rpc = require("@dxos/rpc");
+var import_react71 = __toESM(require("react"));
+var import_react_client14 = require("@dxos/react-client");
+var import_halo5 = require("@dxos/react-client/halo");
+var import_react_ui_theme32 = require("@dxos/react-ui-theme");
+var import_async2 = require("@dxos/async");
+var import_react_client15 = require("@dxos/react-client");
+var AgentConfig = ({ agentStatus, validationMessage, onAgentDestroy, onAgentCreate, onAgentRefresh }) => {
+  const { t } = (0, import_react_ui.useTranslation)("os");
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    className: (0, import_react_ui_theme.mx)(import_react_ui_theme.descriptionText, "text-center mbs-4")
+  }, t("agent heading")), validationMessage && /* @__PURE__ */ import_react2.default.createElement("p", {
+    role: "alert",
+    className: (0, import_react_ui_theme.mx)((0, import_react_ui_theme.valenceColorText)("error"), "mlb-2")
+  }, validationMessage), agentStatus === "created" || agentStatus === "creating" || agentStatus === "getting" || agentStatus === "destroying" ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "group",
+    className: "mlb-2 flex gap-2 items-center",
+    "aria-describedby": "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Avatar.Root, {
+    status: agentStatus === "created" ? "warning" : "inactive",
+    variant: "square"
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Avatar.Frame, {
+    classNames: "place-self-center"
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react.Database, {
+    weight: "duotone",
+    width: 24,
+    height: 24,
+    x: 8,
+    y: 8,
+    ...agentStatus !== "created" && {
+      className: "opacity-50"
+    }
+  })), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Avatar.Label, {
+    classNames: "flex-1 text-sm truncate"
+  }, t(agentStatus === "created" ? "agent requested label" : agentStatus === "creating" ? "creating agent label" : agentStatus === "destroying" ? "destroying agent label" : "getting agent label"))), agentStatus === "created" && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Root, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": "agent.destroy",
+    onClick: onAgentDestroy
+  }, /* @__PURE__ */ import_react2.default.createElement("span", {
+    className: "sr-only"
+  }, t("destroy agent label")), /* @__PURE__ */ import_react2.default.createElement(import_react.Power, {
+    className: (0, import_react_ui_theme.getSize)(5)
+  }))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("destroy agent label"))))), agentStatus === "created" && /* @__PURE__ */ import_react2.default.createElement("p", {
+    id: "devices-panel.create-agent.description",
+    className: (0, import_react_ui_theme.mx)(import_react_ui_theme.descriptionText, "mlb-2")
+  }, t("agent requested description"))) : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+    variant: "ghost",
+    classNames: "mlb-2 is-full justify-start gap-2 !pis-0 !pie-3",
+    "data-testid": agentStatus === "creatable" ? "devices-panel.create-agent" : "devices-panel.agent-error",
+    onClick: agentStatus === "creatable" ? onAgentCreate : onAgentRefresh,
+    "aria-describedby": "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "img",
+    className: (0, import_react_ui_theme.mx)((0, import_react_ui_theme.getSize)(8), "m-1 rounded-sm bg-input grid place-items-center")
+  }, agentStatus === "creatable" ? /* @__PURE__ */ import_react2.default.createElement(import_react.Plus, {
+    weight: "light",
+    className: (0, import_react_ui_theme.getSize)(6)
+  }) : /* @__PURE__ */ import_react2.default.createElement(import_react.ArrowsClockwise, {
+    weight: "light",
+    className: (0, import_react_ui_theme.getSize)(6)
+  })), /* @__PURE__ */ import_react2.default.createElement("span", {
+    className: "grow font-medium text-start"
+  }, t(agentStatus === "creatable" ? "create agent label" : ""))), agentStatus === "creatable" && /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none",
+    className: "space-y-2",
+    id: "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ import_react2.default.createElement("p", {
+    className: import_react_ui_theme.descriptionText
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Trans, {
+    t,
+    i18nKey: "create agent clickwrap",
+    components: {
+      tosLink: /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Link, {
+        target: "_blank",
+        rel: "noreferrer"
+      })
+    }
+  })), /* @__PURE__ */ import_react2.default.createElement("p", {
+    className: import_react_ui_theme.descriptionText
+  }, t("create agent description")))));
+};
+var ClipboardContext = /* @__PURE__ */ (0, import_react5.createContext)({
+  textValue: "",
+  setTextValue: async (_) => {
+  }
+});
+var useClipboardContext = () => (0, import_react5.useContext)(ClipboardContext);
+var ClipboardProvider = ({ children }) => {
+  const [textValue, setInternalTextValue] = (0, import_react5.useState)("");
+  const setTextValue = (0, import_react5.useCallback)(async (nextValue) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return /* @__PURE__ */ import_react5.default.createElement(ClipboardContext.Provider, {
+    value: {
+      textValue,
+      setTextValue
+    }
+  }, children);
+};
+var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
+var CopyButton = ({ value, classNames, iconProps: iconProps2, ...props }) => {
+  const { t } = (0, import_react_ui2.useTranslation)("os");
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Button, {
+    ...props,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ],
+    onClick: () => setTextValue(value),
+    "data-testid": "copy-invitation"
+  }, /* @__PURE__ */ import_react4.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ import_react4.default.createElement("span", {
+    className: "pli-1"
+  }, t("copy invitation code label")), /* @__PURE__ */ import_react4.default.createElement(import_react3.Copy, {
+    className: (0, import_react_ui_theme2.getSize)(5),
+    ...iconProps2
+  })), /* @__PURE__ */ import_react4.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ import_react4.default.createElement("span", {
+    className: "pli-1"
+  }, t("copy success label")), /* @__PURE__ */ import_react4.default.createElement(import_react3.Check, {
+    className: (0, import_react_ui_theme2.getSize)(5),
+    ...iconProps2
+  })));
+};
+var CopyButtonIconOnly = ({ value, classNames, iconProps: iconProps2, variant, ...props }) => {
+  const { t } = (0, import_react_ui2.useTranslation)("os");
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  const label = isCopied ? t("copy success label") : t("copy invitation code label");
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Tooltip.Root, {
+    delayDuration: 1500,
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Tooltip.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Tooltip.Content, {
+    side: "bottom",
+    sideOffset: 12,
+    classNames: "z-30"
+  }, /* @__PURE__ */ import_react4.default.createElement("span", null, label), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Tooltip.Arrow, null))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Tooltip.Trigger, {
+    "aria-label": label,
+    ...props,
+    onClick: () => setTextValue(value).then(() => setOpen(true)),
+    "data-testid": "copy-invitation",
+    asChild: true
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Button, {
+    variant,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ]
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.Copy, {
+    className: (0, import_react_ui_theme2.getSize)(5),
+    ...iconProps2
+  }))));
+};
+var CompoundButton = ({ children, description, before, after, variant = "default", elevation: propsElevation, slots = {}, ...buttonProps }) => {
+  const labelId = (0, import_react_ui3.useId)("compoundButton-label");
+  const descriptionId = (0, import_react_ui3.useId)("compoundButton-description");
+  const { tx } = (0, import_react_ui3.useThemeContext)();
+  const elevation = (0, import_react_ui3.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__ */ import_react6.default.createElement("button", {
+    ...buttonProps,
+    ...slots.root,
+    className: buttonClassName,
+    "aria-labelledby": labelId,
+    ...description && {
+      "aria-describedby": descriptionId
+    }
+  }, before && /* @__PURE__ */ import_react6.default.createElement("div", {
+    role: "none",
+    className: "grow-0"
+  }, before), /* @__PURE__ */ import_react6.default.createElement("div", {
+    role: "none",
+    ...slots.middle,
+    className: (0, import_react_ui_theme3.mx)("grow whitespace-normal flex flex-col gap-1 text-left", slots.middle?.className)
+  }, /* @__PURE__ */ import_react6.default.createElement("p", {
+    ...slots.label,
+    id: labelId,
+    className: (0, import_react_ui_theme3.mx)(slots.label?.className)
+  }, children), description && /* @__PURE__ */ import_react6.default.createElement("p", {
+    id: descriptionId,
+    ...slots.description,
+    className: (0, import_react_ui_theme3.mx)("text-xs mbe-1 font-normal", variant === "primary" ? import_react_ui_theme3.descriptionTextPrimary : import_react_ui_theme3.descriptionText, slots.description?.className)
+  }, description)), after && /* @__PURE__ */ import_react6.default.createElement("div", {
+    role: "none",
+    className: "grow-0"
+  }, after));
+};
+var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
+  const { t } = (0, import_react_ui4.useTranslation)("os");
+  const { themeMode } = (0, import_react_ui4.useThemeContext)();
+  const [_emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react9.useState)(false);
+  const suppressNextTooltip = (0, import_react9.useRef)(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react9.useState)(false);
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: (nextOpen) => {
+      setEmojiPickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Toolbar.Button, {
+    classNames: [
+      "gap-2 text-2xl plb-1",
+      classNames
+    ],
+    disabled
+  }, /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: "sr-only"
+  }, t("select emoji label")), /* @__PURE__ */ import_react9.default.createElement(import_react8.UserCircle, {
+    className: (0, import_react_ui_theme4.getSize)(5)
+  })))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("select emoji label"), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Arrow, null))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Content, {
+    side: "bottom",
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+        suppressNextTooltip.current = true;
+      }
+    }
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react7.default, {
+    data: import_data.default,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true,
+    theme: themeMode
+  }), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Arrow, null))));
+};
+var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
+  const { t } = (0, import_react_ui4.useTranslation)("os");
+  const [isMd] = (0, import_react_ui4.useMediaQuery)("md", {
+    ssr: false
+  });
+  const [emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react9.useState)(false);
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: setEmojiPickerOpen
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Button, {
+    variant: "ghost",
+    classNames: "gap-2 text-2xl plb-1",
+    disabled
+  }, /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: "sr-only"
+  }, t("select emoji label")), /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: "grow pis-14"
+  }, emojiValue), /* @__PURE__ */ import_react9.default.createElement(import_react8.CaretDown, {
+    className: (0, import_react_ui_theme4.getSize)(4)
+  }))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Content, {
+    side: "right",
+    sideOffset: isMd ? 0 : -310,
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+      }
+    }
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react7.default, {
+    data: import_data.default,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true
+  }), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Popover.Arrow, null))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Button, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ import_react9.default.createElement(import_react8.ArrowCounterClockwise, null))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Arrow, null)))));
+};
+var HuePreview = ({ hue }) => {
+  const { tx } = (0, import_react_ui5.useThemeContext)();
+  const size = 20;
+  return /* @__PURE__ */ import_react11.default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`
+  }, /* @__PURE__ */ import_react11.default.createElement("rect", {
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    className: tx("hue.fill", "select--hue__preview", {
+      hue
+    })
+  }));
+};
+var hueTokens = Object.keys(import_react_ui_theme5.hueTokenThemes).slice(0, 16);
+var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
+  const { t } = (0, import_react_ui5.useTranslation)("os");
+  const [hueValue, setHueValue] = (0, import_react_use_controllable_state2.useControllableState)({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  const [huePickerOpen, setHuePickerOpen] = (0, import_react11.useState)(false);
+  const suppressNextTooltip = (0, import_react11.useRef)(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react11.useState)(false);
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Root, {
+    modal: false,
+    open: huePickerOpen,
+    onOpenChange: (nextOpen) => {
+      setHuePickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Toolbar.Button, {
+    classNames: (0, import_react_ui_theme5.mx)("gap-2 plb-1", classNames),
+    disabled
+  }, /* @__PURE__ */ import_react11.default.createElement("span", {
+    className: "sr-only"
+  }, t("select hue label")), /* @__PURE__ */ import_react11.default.createElement(import_react10.Palette, {
+    className: (0, import_react_ui_theme5.getSize)(5)
+  })))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Portal, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("select hue label"), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Arrow, null))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Content, {
+    side: "bottom",
+    classNames: "!w-40"
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Viewport, {
+    classNames: "grid grid-cols-4"
+  }, hueTokens.map((hue2) => {
+    return /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2),
+      classNames: "px-0 py-2 items-center justify-center"
+    }, /* @__PURE__ */ import_react11.default.createElement(HuePreview, {
+      hue: hue2
+    }));
+  })))));
+};
+var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
+  const { t } = (0, import_react_ui5.useTranslation)("os");
+  const [hueValue, setHueValue] = (0, import_react_use_controllable_state2.useControllableState)({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Root, {
+    modal: false
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Button, {
+    variant: "ghost",
+    classNames: "gap-2 plb-1",
+    disabled
+  }, /* @__PURE__ */ import_react11.default.createElement("span", {
+    className: "sr-only"
+  }, t("select hue label")), /* @__PURE__ */ import_react11.default.createElement("div", {
+    role: "none",
+    className: "pis-14 grow flex items-center justify-center gap-2"
+  }, /* @__PURE__ */ import_react11.default.createElement(HuePreview, {
+    hue: hueValue
+  }), /* @__PURE__ */ import_react11.default.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ import_react11.default.createElement(import_react10.CaretDown, {
+    className: (0, import_react_ui_theme5.getSize)(4)
+  }))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Content, {
+    side: "right"
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Viewport, null, Object.keys(import_react_ui_theme5.hueTokenThemes).map((hue2) => {
+    return /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2)
+    }, /* @__PURE__ */ import_react11.default.createElement(HuePreview, {
+      hue: hue2
+    }), /* @__PURE__ */ import_react11.default.createElement("span", {
+      className: "grow"
+    }, t(`${hue2} label`)), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.ItemIndicator, null, /* @__PURE__ */ import_react11.default.createElement(import_react10.Check, null)));
+  })), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.DropdownMenu.Arrow, null))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Root, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Button, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ import_react11.default.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ import_react11.default.createElement(import_react10.ArrowCounterClockwise, null))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Portal, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ import_react11.default.createElement(import_react_ui5.Tooltip.Arrow, null)))));
+};
+var IdentityListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
+  const fallbackValue = (0, import_util.keyToFallback)(identity.identityKey);
+  const labelId = (0, import_react_ui6.useId)("identityListItem__label");
+  const displayName = identity.profile?.displayName ?? (0, import_display_name.generateName)(identity.identityKey.toHex());
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_ui6.ListItem.Root, {
+    ...props,
+    classNames: (0, import_react_ui_theme6.mx)("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
+    onClick: () => onClick?.(),
+    "data-testid": "identity-list-item",
+    labelId,
+    ref: forwardedRef
+  }, /* @__PURE__ */ import_react12.default.createElement(import_react_ui6.Avatar.Root, {
+    status: presence === import_echo.SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
+    labelId,
+    hue: identity.profile?.data?.hue || fallbackValue.hue
+  }, /* @__PURE__ */ import_react12.default.createElement(import_react_ui6.Avatar.Frame, {
+    classNames: "place-self-center"
+  }, /* @__PURE__ */ import_react12.default.createElement(import_react_ui6.Avatar.Fallback, {
+    text: identity.profile?.data?.emoji || fallbackValue.emoji
+  })), /* @__PURE__ */ import_react12.default.createElement(import_react_ui6.Avatar.Label, {
+    classNames: "text-sm truncate pli-2"
+  }, displayName)));
+});
+var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
+  const client = (0, import_react_client.useClient)();
+  const allUnsortedMembers = (0, import_echo2.useMembers)(spaceKey);
+  const members = (0, import_react13.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__ */ import_react13.default.createElement(SpaceMemberListImpl, {
+    members,
+    onSelect
+  });
+};
+var SpaceMemberListImpl = ({ members, onSelect }) => {
+  const { t } = (0, import_react_ui7.useTranslation)("os");
+  const visibleMembers = members.filter((member) => member.identity);
+  return visibleMembers.length > 0 ? /* @__PURE__ */ import_react13.default.createElement(import_react_ui7.List, {
+    classNames: "flex flex-col gap-2",
+    "data-testid": "space-members-list"
+  }, visibleMembers.map((member) => {
+    return /* @__PURE__ */ import_react13.default.createElement(IdentityListItem, {
+      key: member.identity.identityKey.toHex(),
+      identity: member.identity,
+      presence: member.presence,
+      onClick: onSelect && (() => onSelect(member))
+    });
+  })) : /* @__PURE__ */ import_react13.default.createElement("div", {
+    role: "none",
+    className: "grow flex items-center p-2"
+  }, /* @__PURE__ */ import_react13.default.createElement("p", {
+    className: (0, import_react_ui_theme7.mx)(import_react_ui_theme7.descriptionText, "text-center is-full mlb-2")
+  }, t("empty space members message")));
+};
+var iconProps = {
+  weight: "duotone",
+  width: 24,
+  height: 24,
+  x: 8,
+  y: 8
+};
+var DeviceListItem = /* @__PURE__ */ (0, import_react17.forwardRef)(({ device, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, classNames, connectionState, onAgentDestroy: _, ...props }, forwardedRef) => {
+  const { t } = (0, import_react_ui9.useTranslation)("os");
+  const fallbackValue = (0, import_util2.keyToFallback)(device.deviceKey);
+  const labelId = (0, import_react_ui9.useId)("identityListItem__label");
+  const displayName = device.profile ? t("device name placeholder", {
+    os: device.profile.os,
+    platform: device.profile.platform
+  }) : (0, import_display_name2.generateName)(device.deviceKey.toHex());
+  const isCurrent = device.kind === import_halo.DeviceKind.CURRENT;
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.ListItem.Root, {
+    ...props,
+    classNames: [
+      "flex gap-2 items-center mlb-2",
+      classNames
+    ],
+    "data-testid": `device-list-item${isCurrent ? "-current" : ""}`,
+    labelId,
+    ref: forwardedRef
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.Avatar.Root, {
+    status: isCurrent && connectionState === import_mesh.ConnectionState.OFFLINE ? "error" : device.presence === import_halo.Device.PresenceState.ONLINE ? "active" : "inactive",
+    labelId,
+    hue: fallbackValue.hue,
+    variant: "square"
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.Avatar.Frame, {
+    classNames: "place-self-center"
+  }, device.profile?.type ? device.profile.type === import_halo.DeviceType.AGENT_MANAGED ? /* @__PURE__ */ import_react17.default.createElement(import_react16.Database, iconProps) : device.profile.type === import_halo.DeviceType.BROWSER ? /* @__PURE__ */ import_react17.default.createElement(import_react16.Compass, iconProps) : device.profile.type === import_halo.DeviceType.NATIVE ? /* @__PURE__ */ import_react17.default.createElement(import_react16.Desktop, iconProps) : [
+    import_halo.DeviceType.AGENT,
+    import_halo.DeviceType.AGENT_MANAGED
+  ].includes(device.profile.type) ? /* @__PURE__ */ import_react17.default.createElement(import_react16.Robot, iconProps) : device.profile.type === import_halo.DeviceType.MOBILE ? /* @__PURE__ */ import_react17.default.createElement(import_react16.DeviceMobile, iconProps) : /* @__PURE__ */ import_react17.default.createElement(import_react16.Devices, iconProps) : /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.Avatar.Fallback, {
+    text: fallbackValue.emoji
+  })), /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.Avatar.Label, {
+    classNames: "flex-1 text-sm truncate"
+  }, displayName), isCurrent && /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.Tag, {
+    color: "primary"
+  }, t("current device tag label")), device.kind === import_halo.DeviceKind.CURRENT && /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.DropdownMenu.Root, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.Button, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": `device-list-item${isCurrent ? "-current" : ""}.options`
+  }, /* @__PURE__ */ import_react17.default.createElement("span", {
+    className: "sr-only"
+  }, t("more options label")), /* @__PURE__ */ import_react17.default.createElement(import_react16.DotsThree, {
+    className: (0, import_react_ui_theme9.getSize)(5)
+  }))), /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.DropdownMenu.Content, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.DropdownMenu.Item, {
+    "data-testid": "device-list-item-current.join-existing",
+    onClick: onClickJoinExisting
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react16.ShareFat, {
+    className: (0, import_react_ui_theme9.getSize)(5)
+  }), t("choose join new identity label")), onClickRecover && /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.DropdownMenu.Item, {
+    "data-testid": "device-list-item-current.recover",
+    onClick: onClickRecover
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react16.FirstAidKit, {
+    className: (0, import_react_ui_theme9.getSize)(5)
+  }), t("choose recover identity label")), /* @__PURE__ */ import_react17.default.createElement(import_react_ui9.DropdownMenu.Item, {
+    "data-testid": "device-list-item-current.reset",
+    onClick: onClickReset
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react16.Power, {
+    className: (0, import_react_ui_theme9.getSize)(5)
+  }), t("reset device label")))))));
+});
+var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, onAgentDestroy }) => {
+  const { t } = (0, import_react_ui8.useTranslation)("os");
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("h2", {
+    className: (0, import_react_ui_theme8.mx)(import_react_ui_theme8.descriptionText, "text-center mbs-4")
+  }, t("devices heading")), devices.length > 0 && /* @__PURE__ */ import_react15.default.createElement(import_react_ui8.List, null, devices.map((device) => {
+    return /* @__PURE__ */ import_react15.default.createElement(DeviceListItem, {
+      key: device.deviceKey.toHex(),
+      device,
+      onClickEdit: () => onClickEdit?.(device),
+      onClickReset,
+      onClickRecover,
+      onClickJoinExisting,
+      connectionState,
+      onAgentDestroy
+    });
+  })), /* @__PURE__ */ import_react15.default.createElement(import_react_ui8.Button, {
+    variant: "ghost",
+    classNames: "justify-start gap-2 !pis-0 !pie-3 is-full",
+    "data-testid": "devices-panel.create-invitation",
+    onClick: onClickAdd
+  }, /* @__PURE__ */ import_react15.default.createElement("div", {
+    role: "img",
+    className: (0, import_react_ui_theme8.mx)((0, import_react_ui_theme8.getSize)(8), "m-1 rounded-sm bg-input grid place-items-center")
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react14.Plus, {
+    weight: "light",
+    className: (0, import_react_ui_theme8.getSize)(6)
+  })), /* @__PURE__ */ import_react15.default.createElement("span", {
+    className: "grow font-medium text-start"
+  }, t("choose add device label")), /* @__PURE__ */ import_react15.default.createElement(import_react14.CaretRight, {
+    weight: "bold",
+    className: (0, import_react_ui_theme8.getSize)(4)
+  })));
+};
+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 codeRef = (0, import_react20.useRef)(null);
+  const handleClick = () => {
+    if (codeRef.current) {
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      const range = document.createRange();
+      range.selectNodeContents(codeRef.current);
+      selection?.addRange(range);
+    }
+    void navigator.clipboard.writeText(code ?? "");
+  };
+  return /* @__PURE__ */ import_react20.default.createElement("span", {
+    className: (0, import_react_ui_theme11.mx)(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 rounded cursor-pointer", classNames),
+    onClick: handleClick,
+    ref: codeRef
+  }, /* @__PURE__ */ import_react20.default.createElement("span", {
+    className: "mie-[0.4em]"
+  }, left), /* @__PURE__ */ import_react20.default.createElement("span", null, right));
+};
+var InvitationListItem = (props) => {
+  const { invitation } = props;
+  const invitationStatus = (0, import_invitations.useInvitationStatus)(invitation);
+  return /* @__PURE__ */ import_react19.default.createElement(InvitationListItemImpl, {
+    ...props,
+    invitationStatus
+  });
+};
+var avatarProps = {
+  size: 10,
+  variant: "circle"
+};
+var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
+  const { tx } = (0, import_react_ui10.useThemeContext)();
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("span", {
+    role: "none",
+    className: (0, import_react_ui_theme10.mx)("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", (0, import_react_ui_theme10.getSize)(avatarProps.size))
+  }, /* @__PURE__ */ import_react19.default.createElement("span", {
+    role: "none",
+    className: tx("avatar.ring", "avatar__ring", {
+      ...avatarProps,
+      status,
+      animation
+    }),
+    style: {
+      animationDelay: "400ms"
+    }
+  })), /* @__PURE__ */ import_react19.default.createElement("span", {
+    role: "none",
+    className: (0, import_react_ui_theme10.mx)("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", (0, import_react_ui_theme10.getSize)(avatarProps.size))
+  }, /* @__PURE__ */ import_react19.default.createElement("span", {
+    role: "none",
+    className: tx("avatar.ring", "avatar__ring", {
+      ...avatarProps,
+      status,
+      animation
+    }),
+    style: {
+      animationDelay: "200ms"
+    }
+  })));
+};
+var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
+  const { t } = (0, import_react_ui10.useTranslation)("os");
+  const { cancel, status: invitationStatus, invitationCode, authCode, multiUse, shareable } = propsInvitationStatus;
+  const isCancellable = !([
+    import_invitations.Invitation.State.ERROR,
+    import_invitations.Invitation.State.TIMEOUT,
+    import_invitations.Invitation.State.CANCELLED
+  ].indexOf(invitationStatus) >= 0);
+  const showShare = shareable && (multiUse || [
+    import_invitations.Invitation.State.INIT,
+    import_invitations.Invitation.State.CONNECTING,
+    import_invitations.Invitation.State.CONNECTED
+  ].indexOf(invitationStatus) >= 0);
+  const showAuthCode = invitationStatus === import_invitations.Invitation.State.READY_FOR_AUTHENTICATION;
+  const handleClickRemove = (0, import_react19.useCallback)(() => onClickRemove?.(invitation), [
+    invitation,
+    onClickRemove
+  ]);
+  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
+  const invitationId = invitation?.get().invitationId;
+  const invitationHasLifetime = invitation?.get().lifetime;
+  const invitationTimeLeft = invitation?.expiry ? (0, import_date_fns.formatDistanceToNow)(invitation?.expiry, {
+    addSuffix: true
+  }) : void 0;
+  const avatarAnimation = [
+    import_invitations.Invitation.State.INIT,
+    import_invitations.Invitation.State.CONNECTING,
+    import_invitations.Invitation.State.CONNECTED,
+    import_invitations.Invitation.State.READY_FOR_AUTHENTICATION,
+    import_invitations.Invitation.State.AUTHENTICATING
+  ].includes(invitationStatus) ? "pulse" : "none";
+  const avatarError = [
+    import_invitations.Invitation.State.ERROR,
+    import_invitations.Invitation.State.TIMEOUT,
+    import_invitations.Invitation.State.CANCELLED
+  ].includes(invitationStatus);
+  const avatarGreen = [
+    import_invitations.Invitation.State.CONNECTED,
+    import_invitations.Invitation.State.READY_FOR_AUTHENTICATION,
+    import_invitations.Invitation.State.AUTHENTICATING,
+    import_invitations.Invitation.State.SUCCESS
+  ].includes(invitationStatus);
+  const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.ListItem.Root, {
+    id: invitationCode,
+    ...props,
+    classNames: [
+      "flex gap-2 pis-3 pie-1 items-center relative",
+      props.classNames
+    ]
+  }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.ListItem.Heading, {
+    classNames: "sr-only"
+  }, t(multiUse ? "invite many list item label" : "invite one list item label")), multiUse && /* @__PURE__ */ import_react19.default.createElement(AvatarStackEffect, {
+    status: avatarStatus,
+    animation: avatarAnimation,
+    reverseEffects
+  }), /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Root, null, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Avatar.Root, {
+    ...avatarProps,
+    animation: avatarAnimation,
+    status: avatarStatus
+  }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Avatar.Frame, {
+    tabIndex: 0,
+    classNames: [
+      import_react_ui_theme10.focusRing,
+      "relative rounded-full place-self-center"
+    ]
+  }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Avatar.Fallback, {
+    text: (0, import_util3.hexToEmoji)(invitationId)
+  })))), /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Portal, null, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Content, {
+    side: "left",
+    classNames: "z-[70]"
+  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Root, null, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Button, {
+    variant: "ghost",
+    classNames: "grow justify-start font-medium",
+    onClick: () => send({
+      type: "selectInvitation",
+      invitation
+    }),
+    "data-testid": "show-qrcode"
+  }, /* @__PURE__ */ import_react19.default.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ import_react19.default.createElement(CopyButtonIconOnly, {
+    variant: "ghost",
+    value: invitationUrl
+  })), /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Portal, null, /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Tooltip.Content, {
+    side: "left",
+    classNames: "z-[70]"
+  }, invitationHasLifetime && /* @__PURE__ */ import_react19.default.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ import_react19.default.createElement(AuthCode, {
+    code: authCode,
+    classNames: "grow"
+  }) : invitationStatus === import_invitations.Invitation.State.CONNECTING ? /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Connecting...") : invitationStatus === import_invitations.Invitation.State.AUTHENTICATING ? /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Authenticating...") : invitationStatus === import_invitations.Invitation.State.ERROR || invitationStatus === import_invitations.Invitation.State.TIMEOUT ? /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Failed") : invitationStatus === import_invitations.Invitation.State.CANCELLED ? /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Cancelled") : invitationStatus === import_invitations.Invitation.State.SUCCESS ? /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "pli-2 grow truncate"
+  }, "User joined") : !shareable ? /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Pending Invitation") : /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "grow"
+  }, " "), isCancellable ? /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Button, {
+    variant: "ghost",
+    classNames: "flex gap-1 pli-0",
+    onClick: cancel,
+    "data-testid": "cancel-invitation"
+  }, /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "sr-only"
+  }, t("cancel invitation label")), /* @__PURE__ */ import_react19.default.createElement(import_react18.X, {
+    className: (0, import_react_ui_theme10.getSize)(4)
+  })) : /* @__PURE__ */ import_react19.default.createElement(import_react_ui10.Button, {
+    variant: "ghost",
+    classNames: "flex gap-1 pli-0",
+    onClick: handleClickRemove,
+    "data-testid": "remove-invitation"
+  }, /* @__PURE__ */ import_react19.default.createElement("span", {
+    className: "sr-only"
+  }, t("remove invitation label")), /* @__PURE__ */ import_react19.default.createElement(import_react18.X, {
+    className: (0, import_react_ui_theme10.getSize)(4)
+  })));
+};
+var InvitationList = ({ invitations, send, ...invitationProps }) => {
+  const { className, InvitationListItem: Item = InvitationListItem } = invitationProps;
+  return /* @__PURE__ */ import_react22.default.createElement(import_react_ui11.List, {
+    classNames: (0, import_react_ui_theme12.mx)("flex flex-col gap-2", className)
+  }, invitations.map((invitation) => {
+    const value = invitation.get().invitationId;
+    return /* @__PURE__ */ import_react22.default.createElement(Item, {
+      key: value,
+      send,
+      invitation,
+      ...invitationProps
+    });
+  }));
+};
+var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
+  const space = (0, import_echo3.useSpace)(spaceKey);
+  const invitations = (0, import_echo3.useSpaceInvitations)(spaceKey);
+  const handleClickRemove = (0, import_react21.useCallback)((invitation) => {
+    void invitation.cancel();
+  }, [
+    space
+  ]);
+  return /* @__PURE__ */ import_react21.default.createElement(InvitationList, {
+    invitations,
+    onClickRemove: handleClickRemove,
+    createInvitationUrl,
+    send
+  });
+};
+var defaultActions = {
+  noopAction: {
+    label: "No-op",
+    description: "",
+    icon: import_react23.Placeholder,
+    onClick: () => {
+    }
+  }
+};
+var BifurcatedAction = /* @__PURE__ */ (0, import_react24.forwardRef)((props, forwardedRef) => {
+  const { classNames, variant, isFull = true, actions = defaultActions, activeAction: propsActiveAction, onChangeActiveAction, defaultActiveAction, "data-testid": testId, ...rest } = props;
+  const dropdownTestId = testId && `${testId}.more`;
+  const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = (0, import_react_use_controllable_state3.useControllableState)({
+    prop: propsActiveAction,
+    onChange: onChangeActiveAction,
+    defaultProp: defaultActiveAction
+  });
+  const activeAction = actions[activeActionKey2] ?? {};
+  const { t } = (0, import_react_ui12.useTranslation)("os");
+  return /* @__PURE__ */ import_react24.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme13.mx)("mbs-2 flex gap-px items-center", isFull && "is-full")
+  }, /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.Button, {
+    ...rest,
+    classNames: [
+      "bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none",
+      classNames
+    ],
+    ref: forwardedRef,
+    variant,
+    "data-testid": testId,
+    onClick: activeAction.onClick
+  }, activeAction.icon && /* @__PURE__ */ import_react24.default.createElement(activeAction.icon, {
+    className: (0, import_react_ui_theme13.getSize)(5)
+  }), /* @__PURE__ */ import_react24.default.createElement("span", null, activeAction.label)), /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.Root, null, /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.Button, {
+    classNames: [
+      "bs-11 flex-none rounded-is-none",
+      classNames
+    ],
+    "data-testid": dropdownTestId
+  }, /* @__PURE__ */ import_react24.default.createElement("span", {
+    className: "sr-only"
+  }, t("invite options label")), /* @__PURE__ */ import_react24.default.createElement(import_react23.CaretDown, {
+    className: (0, import_react_ui_theme13.getSize)(4)
+  }))), /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.Portal, null, /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.Content, null, /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.Viewport, null, Object.entries(actions).map(([id, action]) => {
+    return /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.CheckboxItem, {
+      key: id,
+      "aria-labelledby": `${id}__label`,
+      "aria-describedby": `${id}__description`,
+      checked: activeActionKey2 === id,
+      onCheckedChange: (checked) => checked && setActiveAction(id),
+      classNames: "gap-2",
+      "data-testid": action.testId
+    }, action.icon && /* @__PURE__ */ import_react24.default.createElement(action.icon, {
+      className: (0, import_react_ui_theme13.getSize)(5)
+    }), /* @__PURE__ */ import_react24.default.createElement("div", {
+      role: "none",
+      className: "flex-1 min-is-0 space-b-1"
+    }, /* @__PURE__ */ import_react24.default.createElement("p", {
+      id: `${id}__label`
+    }, action.label), action.description && /* @__PURE__ */ import_react24.default.createElement("p", {
+      id: `${id}__description`,
+      className: import_react_ui_theme13.descriptionText
+    }, action.description)), /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.ItemIndicator, {
+      asChild: true
+    }, /* @__PURE__ */ import_react24.default.createElement(import_react23.Check, {
+      weight: "bold",
+      className: (0, import_react_ui_theme13.getSize)(4)
+    })));
+  })), /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.DropdownMenu.Arrow, null)))));
+});
+var Action = /* @__PURE__ */ (0, import_react24.forwardRef)((props, forwardedRef) => {
+  const { children, classNames, variant, isFull = true, ...rest } = props;
+  return /* @__PURE__ */ import_react24.default.createElement(import_react_ui12.Button, {
+    ...rest,
+    classNames: [
+      isFull && "is-full",
+      "bs-11 flex gap-2 mbs-2",
+      classNames
+    ],
+    ref: forwardedRef,
+    variant
+  }, children);
+});
+var Actions = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react25.default.createElement("div", {
+    ...props,
+    className: (0, import_react_ui_theme14.mx)("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
+    ref: forwardedRef
+  }, children);
+});
+var CloseButton = ({ onDone, ...props }) => {
+  const { t } = (0, import_react_ui13.useTranslation)("os");
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_ui13.Button, {
+    variant: "ghost",
+    classNames: (0, import_react_ui_theme15.mx)("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    onClick: () => onDone?.(),
+    ...props
+  }, /* @__PURE__ */ import_react27.default.createElement(import_react26.X, {
+    weight: "bold",
+    className: (0, import_react_ui_theme15.getSize)(4)
+  }), /* @__PURE__ */ import_react27.default.createElement("span", {
+    className: "sr-only"
+  }, t("exit label")));
+};
+var Emoji = ({ text, className }) => {
+  const size = 14;
+  return /* @__PURE__ */ import_react28.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme16.mx)((0, import_react_ui_theme16.getSize)(size), "rounded relative pointer-events-none", className)
+  }, /* @__PURE__ */ import_react28.default.createElement("svg", {
+    viewBox: `0 0 ${size * 4} ${size * 4}`,
+    width: size * 4,
+    height: size * 4
+  }, /* @__PURE__ */ import_react28.default.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__ */ import_react28.default.createElement("div", {
+    role: "none",
+    className: "absolute inset-0 flex items-center justify-center"
+  }, children);
+};
+var Heading = /* @__PURE__ */ (0, import_react29.forwardRef)(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
+  return /* @__PURE__ */ import_react29.default.createElement("div", {
+    role: "none",
+    className: "pbe-2 relative",
+    ref: forwardedRef
+  }, corner, /* @__PURE__ */ import_react29.default.createElement("h1", {
+    ...!titleSrOnly && {
+      id: titleId
+    },
+    className: (0, import_react_ui_theme17.mx)(import_react_ui_theme17.descriptionText, "text-center mlb-2", titleSrOnly && "invisible")
+  }, title), titleSrOnly && /* @__PURE__ */ import_react29.default.createElement("span", {
+    id: titleId
+  }, title), children);
+});
+var Label = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ import_react30.default.createElement("span", {
+    className: (0, import_react_ui_theme18.mx)(import_react_ui_theme18.descriptionText, "text-center mli-6 whitespace-normal")
+  }, children);
+};
+var Input = ({ validationMessage, label, ...props }) => {
+  return /* @__PURE__ */ import_react31.default.createElement(import_react_ui14.Input.Root, null, /* @__PURE__ */ import_react31.default.createElement(import_react_ui14.Input.Label, null, label), /* @__PURE__ */ import_react31.default.createElement(import_react_ui14.Input.TextInput, {
+    ...props,
+    classNames: "plb-3 mbs-2 text-center"
+  }), /* @__PURE__ */ import_react31.default.createElement(import_react_ui14.Input.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ import_react31.default.createElement(import_react_ui14.Input.Validation, null, validationMessage)));
+};
+var StepHeading = /* @__PURE__ */ (0, import_react32.forwardRef)(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react32.default.createElement("h2", {
+    ...props,
+    className: (0, import_react_ui_theme19.mx)("font-normal text-sm mbe-4 mli-1 text-center", className),
+    ref: forwardedRef
+  }, children);
+});
+var VIEWPORT_NAME = "Viewport";
+var VIEWS_NAME = "ViewportViews";
+var VIEW_NAME = "ViewportView";
+var [createViewportContext, createViewportScope] = (0, import_react_context.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] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: propsActiveView,
+    defaultProp: defaultActiveView,
+    onChange: onActiveViewChange
+  });
+  return /* @__PURE__ */ import_react33.default.createElement(ViewportProvider, {
+    focusManaged,
+    activeView,
+    setActiveView,
+    scope: __viewportScope
+  }, /* @__PURE__ */ import_react33.default.createElement("div", {
+    role: "region",
+    "aria-live": "polite",
+    ...props,
+    className: (0, import_react_ui_theme20.mx)("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__ */ import_react33.default.createElement("div", {
+    role: "none",
+    style: size,
+    ...props,
+    className: (0, import_react_ui_theme20.mx)("flex", classNames)
+  }, children);
+};
+ViewportViews.displayName = VIEWS_NAME;
+var ViewportView = /* @__PURE__ */ (0, import_react33.forwardRef)(({ __viewportScope, classNames, children, id, ...props }, forwardedRef) => {
+  const { activeView, focusManaged } = useViewportContext(VIEW_NAME, __viewportScope);
+  const isActive = id === activeView;
+  const ref = (0, import_react_ui15.useForwardedRef)(forwardedRef);
+  const { findFirstFocusable } = (0, import_react_tabster.useFocusFinders)();
+  (0, import_react33.useEffect)(() => {
+    if (!focusManaged && isActive && document.body.hasAttribute("data-is-keyboard") && ref.current) {
+      findFirstFocusable(ref.current)?.focus();
+    }
+  }, [
+    focusManaged,
+    ref.current,
+    isActive
+  ]);
+  return /* @__PURE__ */ import_react33.default.createElement("section", {
+    ...props,
+    ...!isActive && {
+      "aria-hidden": true
+    },
+    className: (0, import_react_ui_theme20.mx)("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
+};
+var SpaceListItem = /* @__PURE__ */ (0, import_react34.forwardRef)(({ space, onClick }, ref) => {
+  const fallbackValue = (0, import_util4.keyToEmoji)(space.key);
+  const labelId = (0, import_react_ui16.useId)("identityListItem__label");
+  const displayName = space.properties.name ?? (0, import_util4.humanize)(space.key.toHex());
+  return /* @__PURE__ */ import_react34.default.createElement("li", {
+    className: (0, import_react_ui_theme21.mx)("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
+    onClick: () => onClick?.(),
+    ref,
+    "data-testid": "space-list-item"
+  }, /* @__PURE__ */ import_react34.default.createElement(import_react_ui16.Avatar.Root, {
+    labelId
+  }, /* @__PURE__ */ import_react34.default.createElement(import_react_ui16.Avatar.Frame, null, /* @__PURE__ */ import_react34.default.createElement(import_react_ui16.Avatar.Fallback, {
+    text: fallbackValue
+  })), /* @__PURE__ */ import_react34.default.createElement(import_react_ui16.Avatar.Label, {
+    classNames: "text-sm truncate"
+  }, displayName)));
+});
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts";
+var identityMachine = (0, import_xstate.createMachine)({
+  id: "identity",
+  predictableActionArguments: true,
+  context: {
+    identity: null,
+    identitySubscribable: null
+  },
+  initial: "choosingAction",
+  invoke: {
+    src: (context) => context.identitySubscribable
+  },
+  states: {
+    unknown: {
+      always: [
+        {
+          cond: "initiallyManagingDeviceInvitation",
+          target: "managingDeviceInvitation",
+          actions: "log"
+        },
+        {
+          target: "choosingAction",
+          actions: "log"
+        }
+      ]
+    },
+    choosingAction: {},
+    managingDeviceInvitation: {},
+    confirmingResetStorage: {},
+    confirmingRecover: {},
+    confirmingJoinNewIdentity: {}
+  },
+  on: {
+    unchooseAction: {
+      target: ".choosingAction",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    deselectInvitation: {
+      target: ".choosingAction",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    selectInvitation: {
+      target: ".managingDeviceInvitation",
+      actions: [
+        "setInvitation",
+        "log"
+      ]
+    },
+    chooseJoinNewIdentity: {
+      target: ".confirmingJoinNewIdentity",
+      actions: "log"
+    },
+    chooseRecoverIdentity: {
+      target: ".confirmingRecover",
+      actions: "log"
+    },
+    chooseResetStorage: {
+      target: ".confirmingResetStorage",
+      actions: "log"
+    }
+  }
+}, {
+  guards: {
+    initiallyManagingDeviceInvitation: ({ initialDisposition }, _event) => initialDisposition === "manage-device-invitation"
+  },
+  actions: {
+    setIdentity: (0, import_xstate.assign)({
+      identity: (context, event) => event?.identity ?? null
+    }),
+    setInvitation: (0, import_xstate.assign)({
+      invitation: (context, event) => event?.invitation ?? null
+    }),
+    unsetInvitation: (0, import_xstate.assign)({
+      invitation: () => void 0
+    }),
+    log: (context, event) => {
+      (0, import_log2.log)("[transition]", {
+        event,
+        context
+      }, {
+        F: __dxlog_file,
+        L: 98,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var useIdentityMachine = (client, options) => {
+  return (0, import_react38.useMachine)(identityMachine, {
+    ...options,
+    context: {
+      ...options?.context,
+      identity: client.halo.identity.get(),
+      identitySubscribable: client.halo.identity.map((identity) => ({
+        type: "setIdentity",
+        identity
+      }))
+    }
+  });
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx";
+var IdentityActionChooser = (props) => {
+  const { send } = props;
+  const client = (0, import_react_client3.useClient)();
+  const invitations = (0, import_halo3.useHaloInvitations)();
+  const createInvitation = () => {
+    invitations.forEach((invitation2) => invitation2.cancel());
+    const invitation = client.halo.share();
+    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+      const subscription = invitation.subscribe((invitation2) => {
+        const invitationCode = import_invitations3.InvitationEncoder.encode(invitation2);
+        if (invitation2.state === import_invitations3.Invitation.State.CONNECTING) {
+          import_log3.log.info(JSON.stringify({
+            invitationCode,
+            authCode: invitation2.authCode
+          }), void 0, {
+            F: __dxlog_file2,
+            L: 29,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          subscription.unsubscribe();
+        }
+      });
+    }
+    send?.({
+      type: "selectInvitation",
+      invitation
+    });
+  };
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production";
+  return /* @__PURE__ */ import_react39.default.createElement(IdentityActionChooserImpl, {
+    ...props,
+    onClickAdd: createInvitation,
+    onClickJoinExisting: () => send?.({
+      type: "chooseJoinNewIdentity"
+    }),
+    onClickRecover: isProduction ? void 0 : () => send?.({
+      type: "chooseRecoverIdentity"
+    }),
+    onClickReset: () => send?.({
+      type: "chooseResetStorage"
+    })
+  });
+};
+var IdentityActionChooserImpl = ({ devices, connectionState, agentHostingEnabled, onClickAdd, onClickJoinExisting, onClickRecover, onClickReset, ...agentProps }) => {
+  const edgeDeviceAvailable = devices.find((device) => device.profile?.type === import_halo3.DeviceType.AGENT_MANAGED && device.profile?.os?.toUpperCase() === "EDGE");
+  return /* @__PURE__ */ import_react39.default.createElement("div", {
+    role: "none",
+    className: "bs-40 grow overflow-y-auto overflow-x-hidden"
+  }, /* @__PURE__ */ import_react39.default.createElement(DeviceList, {
+    devices,
+    connectionState,
+    onClickAdd,
+    onClickJoinExisting,
+    onClickRecover: agentProps.agentStatus === "created" ? onClickRecover : void 0,
+    onClickReset,
+    onAgentDestroy: agentProps.onAgentDestroy
+  }), !edgeDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ import_react39.default.createElement(AgentConfig, agentProps));
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useEdgeAgentsHandlers.ts";
+var useEdgeAgentHandlers = ({ identity }) => {
+  const [validationMessage, setValidationMessage] = (0, import_react41.useState)("");
+  const [lastReceivedStatus, setLastReceivedStatus] = (0, import_react41.useState)(import_services.QueryAgentStatusResponse.AgentStatus.UNKNOWN);
+  const [agentStatus, setAgentStatus] = (0, import_react41.useState)("getting");
+  const client = (0, import_react_client5.useClient)();
+  const agentHostingEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
+  const handleStatus = (status) => {
+    switch (status) {
+      case import_services.QueryAgentStatusResponse.AgentStatus.ACTIVE:
+      case import_services.QueryAgentStatusResponse.AgentStatus.INACTIVE:
+        setAgentStatus("created");
+        break;
+      case import_services.QueryAgentStatusResponse.AgentStatus.NOT_FOUND:
+        setAgentStatus("creatable");
+        break;
+      case import_services.QueryAgentStatusResponse.AgentStatus.UNKNOWN:
+        setAgentStatus("getting");
+        break;
+    }
+  };
+  (0, import_react41.useEffect)(() => {
+    const stream = client.services.services.EdgeAgentService?.queryAgentStatus();
+    stream?.subscribe(({ status }) => {
+      setLastReceivedStatus(status);
+      handleStatus(status);
+    });
+    return () => {
+      void stream?.close().catch(() => {
+      });
+    };
+  }, []);
+  const onAgentCreate = async () => {
+    (0, import_invariant2.invariant)(identity, "Identity not found", {
+      F: __dxlog_file3,
+      L: 58,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    const service = client.services.services.EdgeAgentService;
+    if (!service) {
+      setAgentStatus("error");
+      setValidationMessage("Agent service not initialized.");
+      return;
+    }
+    if (!agentHostingEnabled) {
+      setAgentStatus("error");
+      setValidationMessage("Edge agents are disabled in config.");
+      return;
+    }
+    setAgentStatus("creating");
+    setValidationMessage("");
+    try {
+      await service.createAgent();
+      await Promise.all(client.spaces.get().map((space) => space?.internal.setEdgeReplicationPreference(import_metadata.EdgeReplicationSetting.ENABLED)));
+      setAgentStatus("created");
+    } catch (err) {
+      setAgentStatus("error");
+      setValidationMessage(`Error creating an agent: ${err.message}`);
+    }
+  };
+  const onAgentDestroy = async () => {
+    setValidationMessage("Agents are non-destructible.");
+  };
+  const onAgentRefresh = async () => {
+    setValidationMessage("");
+    handleStatus(lastReceivedStatus);
+  };
+  return {
+    onAgentCreate,
+    onAgentDestroy,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled
+  };
+};
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useKubeAgentHandlers.ts";
+var useKubeAgentHandlers = ({ invitations, identity }) => {
+  const [validationMessage, setValidationMessage] = (0, import_react42.useState)("");
+  const [agentStatus, setAgentStatus] = (0, import_react42.useState)("getting");
+  const agentHostingProviderClient = (0, import_react_client6.useAgentHostingClient)();
+  const client = (0, import_react_client6.useClient)();
+  const updateAgentStatus = async () => {
+    if (agentHostingProviderClient) {
+      setAgentStatus("getting");
+      try {
+        const agentId = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? "never");
+        if (agentId) {
+          setAgentStatus("created");
+        } else {
+          setAgentStatus("creatable");
+        }
+      } catch (err) {
+        setAgentStatus("error");
+        setValidationMessage(`Couldn\u2019t check agent status: ${err.message}`);
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  const createAgent = async (invitationCode) => {
+    (0, import_invariant3.invariant)(identity, "Identity not found", {
+      F: __dxlog_file4,
+      L: 50,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    if (agentHostingProviderClient) {
+      setAgentStatus("creating");
+      setValidationMessage("");
+      try {
+        const agentId = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
+        if (agentId) {
+          setAgentStatus("created");
+        } else {
+          setAgentStatus("creatable");
+          setValidationMessage("Error creating agent.");
+        }
+      } catch (err) {
+        setValidationMessage(`Error creating agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  const destroyAgent = async () => {
+    (0, import_invariant3.invariant)(identity, "Identity not found", {
+      F: __dxlog_file4,
+      L: 73,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    if (agentHostingProviderClient) {
+      setAgentStatus("destroying");
+      setValidationMessage("");
+      try {
+        await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
+        setAgentStatus("creatable");
+      } catch (err) {
+        setValidationMessage(`Error destroying agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  (0, import_react42.useEffect)(() => {
+    void updateAgentStatus();
+  }, []);
+  const handleAgentCreate = (0, import_react42.useCallback)(async (invitation) => {
+    const invitationCode = import_invitations4.InvitationEncoder.encode(invitation);
+    if (invitation.state === import_invitations4.Invitation.State.CONNECTING) {
+      import_log5.log.info(JSON.stringify({
+        invitationCode,
+        authCode: invitation.authCode
+      }), void 0, {
+        F: __dxlog_file4,
+        L: 97,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return createAgent(invitationCode);
+    }
+  }, []);
+  const onAgentCreate = async () => {
+    invitations.forEach((invitation2) => invitation2.cancel());
+    const invitation = client.halo.share({
+      type: import_invitations4.Invitation.Type.INTERACTIVE,
+      authMethod: import_invitations4.Invitation.AuthMethod.NONE,
+      multiUse: true
+    });
+    invitation.subscribe(handleAgentCreate);
+  };
+  const onAgentRefresh = async () => {
+    setValidationMessage("");
+    await updateAgentStatus();
+  };
+  return {
+    onAgentCreate,
+    onAgentDestroy: destroyAgent,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled: !!agentHostingProviderClient
+  };
+};
+var useAgentHandlers = (params) => {
+  const client = (0, import_react_client4.useClient)();
+  if (client.config.values?.runtime?.client?.edgeFeatures?.agents) {
+    return useEdgeAgentHandlers(params);
+  } else {
+    return useKubeAgentHandlers(params);
+  }
+};
+var invitationStatusValue = /* @__PURE__ */ new Map([
+  [
+    import_invitations5.Invitation.State.ERROR,
+    -3
+  ],
+  [
+    import_invitations5.Invitation.State.TIMEOUT,
+    -2
+  ],
+  [
+    import_invitations5.Invitation.State.CANCELLED,
+    -1
+  ],
+  [
+    import_invitations5.Invitation.State.INIT,
+    0
+  ],
+  [
+    import_invitations5.Invitation.State.CONNECTING,
+    1
+  ],
+  [
+    import_invitations5.Invitation.State.CONNECTED,
+    2
+  ],
+  [
+    import_invitations5.Invitation.State.READY_FOR_AUTHENTICATION,
+    3
+  ],
+  [
+    import_invitations5.Invitation.State.AUTHENTICATING,
+    4
+  ],
+  [
+    import_invitations5.Invitation.State.SUCCESS,
+    5
+  ]
+]);
+var InvitationManagerView = ({ children, ...props }) => {
+  return /* @__PURE__ */ import_react44.default.createElement(Viewport.View, {
+    ...props,
+    classNames: "grow flex flex-col justify-around items-center"
+  }, children);
+};
+var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCode, id = "0" }) => {
+  const { t } = (0, import_react_ui20.useTranslation)("os");
+  const qrLabel = (0, import_react_ui20.useId)("invitation-manager__qr-code");
+  const statusValue = multiUse ? 0 : invitationStatusValue.get(status) ?? 0;
+  const showAuthCode = statusValue === 3;
+  const emoji = (0, import_util7.hexToEmoji)(id);
+  const activeView = (0, import_react44.useMemo)(() => {
+    if (multiUse) {
+      return "showing qr";
+    }
+    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__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(Viewport.Root, {
+    activeView,
+    classNames: "grow plb-1"
+  }, /* @__PURE__ */ import_react44.default.createElement(Viewport.Views, null, /* @__PURE__ */ import_react44.default.createElement(InvitationManagerView, {
+    id: "showing qr",
+    emoji
+  }, /* @__PURE__ */ import_react44.default.createElement("p", {
+    className: "text-sm mlb-1 font-normal text-center"
+  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ import_react44.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme23.mx)(import_react_ui_theme23.descriptionText, "is-full max-is-[14rem] relative")
+  }, /* @__PURE__ */ import_react44.default.createElement(import_react_qr_rounded.QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    className: (0, import_react_ui_theme23.mx)("is-full bs-full p-2", showAuthCode && "invisible"),
+    "aria-labelledby": qrLabel,
+    errorCorrectionLevel: "Q",
+    cutout: true
+  }, invitationUrl ?? "never"), /* @__PURE__ */ import_react44.default.createElement(Centered, null, /* @__PURE__ */ import_react44.default.createElement(Emoji, {
+    text: emoji
+  }))), /* @__PURE__ */ import_react44.default.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr label")), /* @__PURE__ */ import_react44.default.createElement(CopyButton, {
+    variant: "ghost",
+    value: invitationUrl ?? "never"
+  })), /* @__PURE__ */ import_react44.default.createElement(InvitationManagerView, {
+    id: "showing auth code"
+  }, /* @__PURE__ */ import_react44.default.createElement(Label, null, t("auth code message")), /* @__PURE__ */ import_react44.default.createElement(AuthCode, {
+    code: authCode,
+    large: true,
+    classNames: "text-black dark:text-white"
+  }), /* @__PURE__ */ import_react44.default.createElement(Label, null, t("auth other device emoji message")), emoji && /* @__PURE__ */ import_react44.default.createElement(Emoji, {
+    text: emoji
+  })), /* @__PURE__ */ import_react44.default.createElement(InvitationManagerView, {
+    id: "showing final"
+  }, statusValue > 0 ? /* @__PURE__ */ import_react44.default.createElement(import_react43.Check, {
+    className: (0, import_react_ui_theme23.mx)("m-1.5", (0, import_react_ui_theme23.getSize)(6))
+  }) : /* @__PURE__ */ import_react44.default.createElement(import_react43.X, {
+    className: (0, import_react_ui_theme23.mx)("m-1.5", (0, import_react_ui_theme23.getSize)(6))
+  })))), /* @__PURE__ */ import_react44.default.createElement(Actions, {
+    classNames: "mbs-4"
+  }, /* @__PURE__ */ import_react44.default.createElement(Action, {
+    disabled: !active,
+    onClick: () => send?.({
+      type: "deselectInvitation"
+    })
+  }, t("back label"))));
+};
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/steps/ConfirmReset.tsx";
+var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
+  const { t } = (0, import_react_ui21.useTranslation)("os");
+  const [validationMessage, setValidationMessage] = (0, import_react46.useState)("");
+  const [pending, setPending] = (0, import_react46.useState)(false);
+  const processReset = async () => {
+    setPending(true);
+    return onConfirm?.().then(() => setPending(false), (error) => {
+      import_log6.log.catch(error, void 0, {
+        F: __dxlog_file5,
+        L: 38,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setValidationMessage(t("failed to reset identity message"));
+      setPending(false);
+    });
+  };
+  return /* @__PURE__ */ import_react46.default.createElement(ConfirmResetImpl, {
+    disabled: !active,
+    pending,
+    validationMessage,
+    onConfirm: processReset,
+    onCancel,
+    mode
+  });
+};
+var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCancel, mode }) => {
+  const { t } = (0, import_react_ui21.useTranslation)("os");
+  const confirmationValue = t("confirmation value");
+  const [inputValue, setInputValue] = (0, import_react46.useState)("");
+  const testIdAffix = mode === "join new identity" ? "join-new-identity" : mode === "recover" ? "recover" : "reset-storage";
+  return /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col gap-2 justify-center"
+  }, /* @__PURE__ */ import_react46.default.createElement(import_react_ui21.Message.Root, {
+    valence: "error"
+  }, /* @__PURE__ */ import_react46.default.createElement(import_react_ui21.Message.Title, null, /* @__PURE__ */ import_react46.default.createElement(import_react45.Warning, {
+    className: (0, import_react_ui_theme24.mx)((0, import_react_ui_theme24.getSize)(6), "inline mie-2")
+  }), t("sign out chooser title")), /* @__PURE__ */ import_react46.default.createElement(import_react_ui21.Message.Body, null, t("sign out chooser message"))), /* @__PURE__ */ import_react46.default.createElement(Input, {
+    validationMessage,
+    label: /* @__PURE__ */ import_react46.default.createElement(StepHeading, {
+      className: "text-start mlb-2"
+    }, t(mode === "join new identity" ? "join new identity input label" : mode === "recover" ? "recover reset input label" : "reset storage input label", {
+      confirmationValue
+    })),
+    disabled,
+    "data-testid": `${testIdAffix}.reset-identity-input`,
+    placeholder: t("confirmation placeholder", {
+      confirmationValue
+    }),
+    onChange: ({ target: { value } }) => setInputValue(value)
+  })), /* @__PURE__ */ import_react46.default.createElement(Actions, null, onCancel && /* @__PURE__ */ import_react46.default.createElement(Action, {
+    disabled,
+    onClick: onCancel,
+    "data-testid": `${testIdAffix}.reset-identity-cancel`
+  }, t("cancel label")), onConfirm && /* @__PURE__ */ import_react46.default.createElement(Action, {
+    variant: "destructive",
+    disabled: disabled || pending || inputValue !== confirmationValue,
+    onClick: onConfirm,
+    "data-testid": `${testIdAffix}.reset-identity-confirm`
+  }, pending ? t("reset in progress label") : t("reset device label"))));
+};
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
+var viewStyles = "pbs-1 pbe-3 pli-3";
+var getHueValue = (identity) => identity?.profile?.data?.hue || (0, import_util5.hexToHue)(identity?.identityKey.toHex() ?? "0");
+var getEmojiValue = (identity) => identity?.profile?.data?.emoji || (0, import_util5.hexToEmoji)(identity?.identityKey.toHex() ?? "0");
+var IdentityHeading = ({ titleId, title, identity, hideRecover, onDone, onUpdateProfile, connectionState, onChangeConnectionState }) => {
+  const client = (0, import_react_client2.useClient)();
+  const fallbackValue = (0, import_util5.keyToFallback)(identity.identityKey);
+  const { t } = (0, import_react_ui18.useTranslation)("os");
+  const [displayName, setDisplayName] = (0, import_react37.useState)(identity.profile?.displayName ?? "");
+  const [emoji, setEmojiDirectly] = (0, import_react37.useState)(getEmojiValue(identity));
+  const [hue, setHueDirectly] = (0, import_react37.useState)(getHueValue(identity));
+  const { textValue, setTextValue } = useClipboardContext();
+  const identityHex = identity.identityKey.toHex();
+  const publicKeyCopied = textValue === identityHex;
+  const setEmoji = (nextEmoji) => {
+    setEmojiDirectly(nextEmoji);
+    void onUpdateProfile?.({
+      ...identity.profile,
+      data: {
+        ...identity.profile?.data,
+        emoji: nextEmoji
+      }
+    });
+  };
+  const setHue = (nextHue) => {
+    setHueDirectly(nextHue);
+    void onUpdateProfile?.({
+      ...identity.profile,
+      data: {
+        ...identity.profile?.data,
+        hue: nextHue
+      }
+    });
+  };
+  const handleRecoveryCode = async () => {
+    (0, import_invariant.invariant)(client.services.services.IdentityService, "IdentityService not available", {
+      F: __dxlog_file6,
+      L: 77,
+      S: void 0,
+      A: [
+        "client.services.services.IdentityService",
+        "'IdentityService not available'"
+      ]
+    });
+    const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
+    void setTextValue(seedphrase);
+  };
+  const isConnected = connectionState === import_mesh2.ConnectionState.ONLINE;
+  return /* @__PURE__ */ import_react37.default.createElement(Heading, {
+    titleId,
+    title,
+    corner: /* @__PURE__ */ import_react37.default.createElement(CloseButton, {
+      onDone
+    })
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Avatar.Root, {
+    size: 16,
+    variant: "circle",
+    status: isConnected ? "active" : "error",
+    hue: hue || fallbackValue.hue
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Toolbar.Root, {
+    classNames: "flex justify-center"
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Avatar.Frame, {
+    classNames: "relative z-[2] -mli-4 chromatic-ignore"
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Avatar.Fallback, {
+    text: emoji || fallbackValue.emoji
+  }))), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Avatar.Label, {
+    classNames: "sr-only",
+    "data-testid": "identityHeading.displayName"
+  }, identity.profile?.displayName ?? (0, import_display_name3.generateName)(identity.identityKey.toHex())), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Input.Root, null, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Input.Label, {
+    srOnly: true
+  }, t("display name input label")), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Input.TextInput, {
+    variant: "subdued",
+    "data-testid": "display-name-input",
+    placeholder: t("display name input placeholder"),
+    classNames: "mbs-2 text-center font-light text-xl",
+    value: displayName,
+    onChange: ({ target: { value } }) => setDisplayName(value),
+    onBlur: ({ target: { value } }) => onUpdateProfile?.({
+      ...identity.profile,
+      displayName: value
+    })
+  })), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Toolbar.Root, {
+    classNames: "flex justify-center items-center gap-1 pt-3"
+  }, /* @__PURE__ */ import_react37.default.createElement(EmojiPickerToolbarButton, {
+    emoji,
+    onChangeEmoji: setEmoji,
+    classNames: "bs-[--rail-action]"
+  }), /* @__PURE__ */ import_react37.default.createElement(HuePickerToolbarButton, {
+    hue,
+    onChangeHue: setHue,
+    classNames: "bs-[--rail-action]"
+  }), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Root, null, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Toolbar.Button, {
+    classNames: "bs-[--rail-action]",
+    "data-testid": "update-profile-form-copy-key",
+    onClick: () => setTextValue(identityHex)
+  }, /* @__PURE__ */ import_react37.default.createElement("span", {
+    className: "sr-only"
+  }, t(publicKeyCopied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ import_react37.default.createElement(import_react36.Key, {
+    className: (0, import_react_ui_theme22.getSize)(5)
+  }))), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Portal, null, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t(publicKeyCopied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Arrow, null)))), !hideRecover && /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Root, null, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Toolbar.Button, {
+    classNames: "bs-[--rail-action]",
+    onClick: handleRecoveryCode
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react36.FirstAidKit, {
+    className: (0, import_react_ui_theme22.getSize)(5)
+  }))), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Portal, null, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("create recovery code label"), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Arrow, null)))), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Root, null, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Toolbar.Button, {
+    classNames: [
+      "bs-[--rail-action]",
+      !isConnected && "text-error-500"
+    ],
+    onClick: () => onChangeConnectionState?.(isConnected ? import_mesh2.ConnectionState.OFFLINE : import_mesh2.ConnectionState.ONLINE)
+  }, /* @__PURE__ */ import_react37.default.createElement("span", {
+    className: "sr-only"
+  }, t(isConnected ? "disconnect label" : "connect label")), isConnected ? /* @__PURE__ */ import_react37.default.createElement(import_react36.PlugsConnected, {
+    className: (0, import_react_ui_theme22.getSize)(5)
+  }) : /* @__PURE__ */ import_react37.default.createElement(import_react36.Plugs, {
+    className: (0, import_react_ui_theme22.getSize)(5)
+  }))), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Portal, null, /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ import_react37.default.createElement(import_react_ui18.Tooltip.Arrow, null)))))));
+};
+var IdentityPanelImpl = (props) => {
+  const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onRecover, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, ...rest } = props;
+  const { t } = (0, import_react_ui18.useTranslation)("os");
+  const title = (0, import_react37.useMemo)(() => {
+    switch (activeView) {
+      case "device invitation manager":
+        return t("choose add device label");
+      default:
+        return t("identity heading");
+    }
+  }, [
+    activeView,
+    t
+  ]);
+  const onCancelReset = () => rest.send?.("unchooseAction");
+  const hideRecover = rest.agentStatus !== "created";
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(IdentityHeading, {
+    identity,
+    titleId,
+    title,
+    hideRecover,
+    onDone,
+    onUpdateProfile,
+    connectionState,
+    onChangeConnectionState
+  }), /* @__PURE__ */ import_react37.default.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ import_react37.default.createElement(Viewport.Views, null, /* @__PURE__ */ import_react37.default.createElement(Viewport.View, {
+    id: "identity action chooser",
+    classNames: viewStyles
+  }, /* @__PURE__ */ import_react37.default.createElement(IdentityActionChooserComponent, {
+    active: activeView === "identity action chooser",
+    ...rest,
+    connectionState
+  })), /* @__PURE__ */ import_react37.default.createElement(Viewport.View, {
+    id: "device invitation manager",
+    classNames: viewStyles
+  }, /* @__PURE__ */ import_react37.default.createElement(InvitationManagerComponent, {
+    active: activeView === "device invitation manager",
+    ...rest,
+    invitationUrl: rest.createInvitationUrl(rest.invitationCode)
+  })), /* @__PURE__ */ import_react37.default.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "confirm join new identity"
+  }, /* @__PURE__ */ import_react37.default.createElement(ConfirmReset, {
+    active: activeView === "confirm join new identity",
+    ...rest,
+    mode: "join new identity",
+    onConfirm: onJoinNewIdentity,
+    onCancel: onCancelReset
+  })), /* @__PURE__ */ import_react37.default.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "confirm recover"
+  }, /* @__PURE__ */ import_react37.default.createElement(ConfirmReset, {
+    active: activeView === "confirm recover",
+    ...rest,
+    mode: "recover",
+    onConfirm: onRecover,
+    onCancel: onCancelReset
+  })), /* @__PURE__ */ import_react37.default.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "confirm reset storage"
+  }, /* @__PURE__ */ import_react37.default.createElement(ConfirmReset, {
+    active: activeView === "confirm reset storage",
+    ...rest,
+    mode: "reset storage",
+    onConfirm: onResetStorage,
+    onCancel: onCancelReset
+  })))));
+};
+var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
+  const invitationStatus = (0, import_invitations2.useInvitationStatus)(invitation);
+  return /* @__PURE__ */ import_react37.default.createElement(IdentityPanelImpl, {
+    ...props,
+    ...invitationStatus
+  });
+};
+var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, initialDisposition = "default", ...props }) => {
+  const titleId = (0, import_react_ui18.useId)("identityPanel__heading", propsTitleId);
+  const client = (0, import_react_client2.useClient)();
+  const devices = (0, import_halo2.useDevices)();
+  const identity = (0, import_halo2.useIdentity)();
+  const invitations = (0, import_halo2.useHaloInvitations)();
+  const agentProps = useAgentHandlers({
+    identity,
+    invitations
+  });
+  if (!identity) {
+    import_log.log.error("IdentityPanel rendered with no active identity.", void 0, {
+      F: __dxlog_file6,
+      L: 288,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return null;
+  }
+  const [identityState, identitySend, identityService] = useIdentityMachine(client, {
+    context: {
+      initialDisposition
+    }
+  });
+  const { swarm: connectionState } = (0, import_mesh2.useNetworkStatus)();
+  const handleChangeConnectionState = async (nextState) => client?.mesh.updateConfig(nextState);
+  (0, import_react37.useEffect)(() => {
+    const subscription = identityService.subscribe((state) => {
+      (0, import_log.log)("[state]", state, {
+        F: __dxlog_file6,
+        L: 301,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    identityService
+  ]);
+  const activeView = (0, import_react37.useMemo)(() => {
+    switch (true) {
+      case identityState.matches("choosingAction"):
+        return "identity action chooser";
+      case identityState.matches("managingDeviceInvitation"):
+        return "device invitation manager";
+      case identityState.matches("confirmingResetStorage"):
+        return "confirm reset storage";
+      case identityState.matches("confirmingRecover"):
+        return "confirm recover";
+      case identityState.matches("confirmingJoinNewIdentity"):
+        return "confirm join new identity";
+      default:
+        return "identity action chooser";
+    }
+  }, [
+    identityState
+  ]);
+  const onUpdateProfile = async (profile) => {
+    identitySend({
+      type: "updateProfile"
+    });
+    await client.halo.updateProfile(profile);
+  };
+  const implProps = {
+    ...props,
+    identity,
+    devices,
+    activeView,
+    send: identitySend,
+    titleId,
+    createInvitationUrl,
+    onUpdateProfile,
+    connectionState,
+    onChangeConnectionState: handleChangeConnectionState,
+    ...agentProps
+  };
+  return identityState.context.invitation ? /* @__PURE__ */ import_react37.default.createElement(IdentityPanelWithInvitationImpl, {
+    ...implProps,
+    invitation: identityState.context.invitation
+  }) : /* @__PURE__ */ import_react37.default.createElement(IdentityPanelImpl, implProps);
+};
+var JoinHeading = /* @__PURE__ */ (0, import_react49.forwardRef)(({ mode, titleId, exitActionParent, onExit }, forwardedRef) => {
+  const { t } = (0, import_react_ui23.useTranslation)("os");
+  const exitButton = /* @__PURE__ */ import_react49.default.createElement(import_react_ui23.Button, {
+    variant: "ghost",
+    ...onExit && {
+      onClick: onExit
+    },
+    classNames: (0, import_react_ui_theme25.mx)(import_react_ui_theme25.descriptionText, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    "data-testid": "join-exit"
+  }, /* @__PURE__ */ import_react49.default.createElement(import_react48.X, {
+    weight: "bold",
+    className: (0, import_react_ui_theme25.getSize)(4)
+  }), /* @__PURE__ */ import_react49.default.createElement("span", {
+    className: "sr-only"
+  }, t("exit label")));
+  return /* @__PURE__ */ import_react49.default.createElement(Heading, {
+    ref: forwardedRef,
+    titleId,
+    title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
+    ...mode === "halo-only" ? {
+      titleSrOnly: true
+    } : {
+      corner: exitActionParent ? /* @__PURE__ */ (0, import_react49.cloneElement)(exitActionParent, {}, exitButton) : exitButton
+    },
+    titleSrOnly: mode === "halo-only"
+  });
+});
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
+var getInvitationSubscribable = (Kind, invitation) => {
+  (0, import_log8.log)("[subscribing to invitation]", invitation, {
+    F: __dxlog_file7,
+    L: 90,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  return {
+    subscribe: (next, onError, complete) => invitation.subscribe((invitation2) => {
+      switch (invitation2.state) {
+        case import_invitations6.Invitation.State.CONNECTING: {
+          (0, import_log8.log)("[invitation connecting]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 101,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `connecting${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case import_invitations6.Invitation.State.CONNECTED: {
+          (0, import_log8.log)("[invitation connected]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 106,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `connected${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case import_invitations6.Invitation.State.READY_FOR_AUTHENTICATION: {
+          (0, import_log8.log)("[invitation ready for authentication]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 111,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `readyForAuthentication${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case import_invitations6.Invitation.State.AUTHENTICATING: {
+          (0, import_log8.log)("[invitation authenticating]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 116,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `authenticating${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case import_invitations6.Invitation.State.SUCCESS: {
+          (0, import_log8.log)("[invitation success]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 121,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          next({
+            type: `success${Kind}Invitation`,
+            invitation: invitation2
+          });
+          return complete?.();
+        }
+        case import_invitations6.Invitation.State.CANCELLED: {
+          import_log8.log.warn("[invitation cancelled]", {
+            Kind
+          }, {
+            F: __dxlog_file7,
+            L: 127,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Kind}Invitation`,
+            reason: "cancelled"
+          });
+        }
+        case import_invitations6.Invitation.State.TIMEOUT: {
+          import_log8.log.error("[invitation timeout]", {
+            Kind
+          }, {
+            F: __dxlog_file7,
+            L: 132,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Kind}Invitation`,
+            reason: "timeout"
+          });
+        }
+      }
+    }, (error) => {
+      if (error instanceof import_react_client8.AlreadyJoinedError) {
+        (0, import_log8.log)("[already joined]", {
+          Kind,
+          error
+        }, {
+          F: __dxlog_file7,
+          L: 139,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        next({
+          type: `success${Kind}Invitation`,
+          invitation: invitation.get()
+        });
+        return complete?.();
+      }
+      import_log8.log.error("[invitation errored]", {
+        Kind,
+        error
+      }, {
+        F: __dxlog_file7,
+        L: 144,
+        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 === import_invitations6.Invitation.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: [
+              (0, import_xstate2.assign)({
+                [Kind.toLowerCase()]: (context, event) => ({
+                  ...context[Kind.toLowerCase()],
+                  failReason: event.reason
+                })
+              }),
+              "log"
+            ]
+          }
+        }
+      }
+    },
+    on: {
+      [`set${Kind}InvitationCode`]: {
+        target: `.acceptingRedeemed${Kind}Invitation`,
+        actions: [
+          (0, import_xstate2.assign)({
+            [Kind.toLowerCase()]: (context, event) => ({
+              ...context[Kind.toLowerCase()],
+              unredeemedCode: event.code,
+              succeededKeys: event.succeededKeys
+            })
+          }),
+          `redeem${Kind}InvitationCode`,
+          `invalidate${Kind}InvitationCode`,
+          "log"
+        ]
+      }
+    }
+  };
+  return config;
+};
+var joinMachine = (0, import_xstate2.createMachine)({
+  id: "join",
+  predictableActionArguments: true,
+  context: {
+    initialDisposition: "default",
+    mode: "default",
+    identity: null,
+    halo: {},
+    space: {}
+  },
+  initial: "unknown",
+  states: {
+    unknown: {
+      always: [
+        {
+          cond: "existingIdentity",
+          target: "resettingIdentity",
+          actions: "log"
+        },
+        {
+          cond: "initiallyAcceptingHaloInvitation",
+          target: "#join.choosingIdentity.acceptingHaloInvitation",
+          actions: "log"
+        },
+        {
+          cond: "initiallyRecoveringIdentity",
+          target: "#join.choosingIdentity.recoveringIdentity",
+          actions: "log"
+        },
+        {
+          cond: "noSelectedIdentity",
+          target: "choosingIdentity",
+          actions: "log"
+        },
+        {
+          target: "acceptingSpaceInvitation",
+          actions: "log"
+        }
+      ]
+    },
+    // TODO(wittjosiah): Remove.
+    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"
+        }
+      }
+    },
+    // TODO(wittjosiah): Factor out to a machine handling recovery and device invitations.
+    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,
+    initiallyAcceptingHaloInvitation: ({ identity, initialDisposition }, _event) => !identity && initialDisposition === "accept-halo-invitation",
+    initiallyRecoveringIdentity: ({ identity, initialDisposition }, _event) => !identity && initialDisposition === "recover-identity",
+    hasHaloUnredeemedCode: ({ halo }, _event) => !!halo.unredeemedCode,
+    noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode
+  },
+  actions: {
+    setIdentity: (0, import_xstate2.assign)({
+      identity: (context, event) => event.identity
+    }),
+    unsetIdentity: (0, import_xstate2.assign)({
+      identity: () => null
+    }),
+    resetInvitation: (0, import_xstate2.assign)({
+      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: (0, import_xstate2.assign)({
+      halo: (context, event) => event.type.includes("Halo") ? {
+        ...context.halo,
+        invitation: event.invitation
+      } : context.halo,
+      space: (context, event) => event.type.includes("Space") ? {
+        ...context.space,
+        invitation: event.invitation
+      } : context.space
+    }),
+    log: (context, event) => {
+      (0, import_log8.log)("[transition]", {
+        event,
+        haloInvitation: context.halo.invitation,
+        spaceInvitation: context.space.invitation
+      }, {
+        F: __dxlog_file7,
+        L: 425,
+        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) {
+    import_log8.log.catch(err, void 0, {
+      F: __dxlog_file7,
+      L: 452,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return text;
+  }
+};
+var useJoinMachine = (client, options) => {
+  const redeemHaloInvitationCode = (0, import_react51.useCallback)(({ halo }) => {
+    if (halo.unredeemedCode) {
+      try {
+        const invitation = import_invitations6.InvitationEncoder.decode(defaultCodeFromUrl("halo", halo.unredeemedCode));
+        const invitationObservable = client.halo.join(invitation);
+        return {
+          ...halo,
+          invitationObservable,
+          invitationSubscribable: getInvitationSubscribable("Halo", invitationObservable)
+        };
+      } catch (err) {
+        import_log8.log.error("Could not redeem device invitation code", err, {
+          F: __dxlog_file7,
+          L: 473,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return halo;
+      }
+    } else {
+      return halo;
+    }
+  }, [
+    client
+  ]);
+  const redeemSpaceInvitationCode = (0, import_react51.useCallback)(({ space }) => {
+    if (space.unredeemedCode) {
+      try {
+        const invitation = import_invitations6.InvitationEncoder.decode(defaultCodeFromUrl("space", space.unredeemedCode));
+        const invitationObservable = client.spaces.join(invitation);
+        return {
+          ...space,
+          invitationObservable,
+          invitationSubscribable: getInvitationSubscribable("Space", invitationObservable)
+        };
+      } catch (err) {
+        import_log8.log.error("Could not redeem space invitation code", err, {
+          F: __dxlog_file7,
+          L: 495,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return space;
+      }
+    } else {
+      return space;
+    }
+  }, [
+    client
+  ]);
+  const invalidateHaloInvitationCode = (0, import_react51.useCallback)(({ halo }) => {
+    if (halo.unredeemedCode) {
+      options?.onInvalidateInvitationCode?.(halo.unredeemedCode);
+      return {
+        ...halo,
+        unredeemedCode: void 0
+      };
+    } else {
+      return halo;
+    }
+  }, [
+    options?.onInvalidateInvitationCode
+  ]);
+  const invalidateSpaceInvitationCode = (0, import_react51.useCallback)(({ space }) => {
+    if (space.unredeemedCode) {
+      options?.onInvalidateInvitationCode?.(space.unredeemedCode);
+      return {
+        ...space,
+        unredeemedCode: void 0
+      };
+    } else {
+      return space;
+    }
+  }, [
+    options?.onInvalidateInvitationCode
+  ]);
+  return (0, import_react50.useMachine)(joinMachine, {
+    ...options,
+    actions: {
+      ...options?.actions,
+      redeemHaloInvitationCode: (0, import_xstate2.assign)({
+        halo: redeemHaloInvitationCode
+      }),
+      redeemSpaceInvitationCode: (0, import_xstate2.assign)({
+        space: redeemSpaceInvitationCode
+      }),
+      invalidateHaloInvitationCode: (0, import_xstate2.assign)({
+        halo: invalidateHaloInvitationCode
+      }),
+      invalidateSpaceInvitationCode: (0, import_xstate2.assign)({
+        space: invalidateSpaceInvitationCode
+      })
+    }
+  });
+};
+var AdditionMethodChooser = (viewStateProps) => {
+  const disabled = !viewStateProps.active;
+  const { send } = viewStateProps;
+  const { t } = (0, import_react_ui24.useTranslation)("os");
+  const sharedButtonProps = {
+    disabled,
+    after: /* @__PURE__ */ import_react53.default.createElement(import_react52.CaretRight, {
+      className: (0, import_react_ui_theme26.getSize)(4),
+      weight: "bold"
+    }),
+    slots: {
+      label: {
+        className: "text-sm"
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ import_react53.default.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1 grow"
+  }, /* @__PURE__ */ import_react53.default.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("create identity description"),
+    before: /* @__PURE__ */ import_react53.default.createElement(import_react52.Plus, {
+      className: (0, import_react_ui_theme26.getSize)(6)
+    }),
+    onClick: () => send({
+      type: "createIdentity"
+    }),
+    "data-autofocus": "choosingAuthMethod",
+    "data-testid": "identity-chooser.create-identity"
+  }, t("create identity label")), /* @__PURE__ */ import_react53.default.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("join identity description"),
+    before: /* @__PURE__ */ import_react53.default.createElement(import_react52.QrCode, {
+      className: (0, import_react_ui_theme26.getSize)(6)
+    }),
+    onClick: () => send({
+      type: "acceptHaloInvitation"
+    }),
+    "data-testid": "identity-chooser.join-identity"
+  }, t("join identity label")), /* @__PURE__ */ import_react53.default.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("recover identity description"),
+    before: /* @__PURE__ */ import_react53.default.createElement(import_react52.Textbox, {
+      className: (0, import_react_ui_theme26.getSize)(6)
+    }),
+    onClick: () => send({
+      type: "recoverIdentity"
+    }),
+    "data-testid": "identity-chooser.recover-identity"
+  }, t("recover identity label"))));
+};
+var IdentityAdded = (props) => {
+  const { mode, addedIdentity, active, send, onDone, doneActionParent } = props;
+  const disabled = !active;
+  const { t } = (0, import_react_ui25.useTranslation)("os");
+  const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? "0";
+  const fallbackValue = (0, import_util8.hexToFallback)(addedIdentityHex);
+  const labelId = (0, import_react_ui25.useId)("identityListItem__label");
+  const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && (0, import_display_name4.generateName)(addedIdentityHex));
+  const doneAction = /* @__PURE__ */ import_react54.default.createElement(Action, {
+    ...onDone && {
+      onClick: () => onDone(null)
+    },
+    disabled,
+    "data-autofocus": "confirmingAddedIdentity",
+    "data-testid": "identity-added-done"
+  }, /* @__PURE__ */ import_react54.default.createElement("span", null, t("done label")));
+  return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ import_react54.default.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col items-center justify-center text-center gap-2"
+  }, /* @__PURE__ */ import_react54.default.createElement(import_react_ui25.Avatar.Root, {
+    status: "active",
+    labelId,
+    hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue
+  }, /* @__PURE__ */ import_react54.default.createElement(import_react_ui25.Avatar.Frame, null, /* @__PURE__ */ import_react54.default.createElement(import_react_ui25.Avatar.Fallback, {
+    text: addedIdentity?.profile?.data?.emoji || fallbackValue.emoji
+  })), /* @__PURE__ */ import_react54.default.createElement(import_react_ui25.Avatar.Label, {
+    classNames: (0, import_react_ui_theme27.mx)("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
+  }, displayName))), /* @__PURE__ */ import_react54.default.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ (0, import_react54.cloneElement)(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ import_react54.default.createElement(Action, {
+    variant: "primary",
+    disabled: disabled || !addedIdentity,
+    onClick: () => addedIdentity && send({
+      type: "selectIdentity",
+      identity: addedIdentity
+    }),
+    "data-autofocus": "confirmingAddedIdentity"
+  }, t("continue label"))));
+};
+var __dxlog_file8 = "/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 = (0, import_react_client9.useClient)();
+  const { t } = (0, import_react_ui26.useTranslation)("os");
+  const [validationMessage, setValidationMessage] = (0, import_react55.useState)("");
+  const createIdentity = (value) => {
+    if (isRecover) {
+      void client.halo.recoverIdentity({
+        seedphrase: value
+      }).then((identity) => {
+        send?.({
+          type: "selectIdentity",
+          identity
+        });
+      }, (error) => {
+        import_log9.log.catch(error, void 0, {
+          F: __dxlog_file8,
+          L: 38,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setValidationMessage(t("failed to recover identity message"));
+      });
+    } else {
+      void client.halo.createIdentity({
+        displayName: value
+      }).then((identity) => {
+        send?.({
+          type: "selectIdentity",
+          identity
+        });
+      }, (error) => {
+        import_log9.log.catch(error, void 0, {
+          F: __dxlog_file8,
+          L: 48,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setValidationMessage(t("failed to create identity message"));
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react55.default.createElement(IdentityInputImpl, {
+    ...props,
+    onDisplayNameConfirm: createIdentity,
+    validationMessage
+  });
+};
+var IdentityInputImpl = (props) => {
+  const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
+  const disabled = !active;
+  const { t } = (0, import_react_ui26.useTranslation)("os");
+  const [inputValue, setInputValue] = (0, import_react55.useState)("");
+  const isRecover = method === "recover identity";
+  return /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ import_react55.default.createElement(Input, {
+    validationMessage,
+    label: /* @__PURE__ */ import_react55.default.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__ */ import_react55.default.createElement(Actions, null, /* @__PURE__ */ import_react55.default.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => send?.({
+      type: "deselectAuthMethod"
+    }),
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
+  }, t("back label")), /* @__PURE__ */ import_react55.default.createElement(Action, {
+    variant: "primary",
+    disabled,
+    onClick: () => onDisplayNameConfirm?.(inputValue),
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-continue`
+  }, t("continue label"))));
+};
+var __dxlog_file9 = "/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) {
+    import_log10.log.catch(err, void 0, {
+      F: __dxlog_file9,
+      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 } = (0, import_react_ui28.useTranslation)("os");
+  const [inputValue, setInputValue] = (0, import_react57.useState)(unredeemedCode ?? "");
+  (0, import_react57.useEffect)(() => {
+    unredeemedCode && setInputValue(unredeemedCode ?? "");
+  }, [
+    unredeemedCode
+  ]);
+  const handleNext = () => {
+    if (inputValue.trim().length === 0) {
+      return;
+    }
+    send({
+      type: `set${Kind}InvitationCode`,
+      code: invitationCodeFromUrl(inputValue),
+      ...Kind === "Space" && {
+        succeededKeys
+      }
+    });
+  };
+  const exitAction = /* @__PURE__ */ import_react57.default.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    ...onExit ? {
+      onClick: () => onExit()
+    } : {
+      onClick: () => onDone?.(null)
+    },
+    "data-testid": "join-exit"
+  }, t("cancel label"));
+  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ import_react57.default.createElement(Input, {
+    label: /* @__PURE__ */ import_react57.default.createElement(StepHeading, null, t("invitation input label")),
+    // TODO(burdon): Translation.
+    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__ */ import_react57.default.createElement(Actions, null, Kind === "Halo" ? null : exitActionParent ? /* @__PURE__ */ (0, import_react57.cloneElement)(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ (0, import_react57.cloneElement)(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ import_react57.default.createElement(Action, {
+    variant: "primary",
+    disabled: disabled || inputValue.trim().length === 0,
+    onClick: handleNext,
+    "data-testid": `${Kind.toLowerCase()}-invitation-input-continue`
+  }, t("continue label"))));
+};
+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 } = (0, import_react_ui29.useTranslation)("os");
+  if (failReason) {
+    return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(StepHeading, {
+      className: import_react_ui_theme28.descriptionText
+    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ import_react58.default.createElement("div", {
+      role: "none",
+      className: "grow"
+    }), /* @__PURE__ */ import_react58.default.createElement(Actions, null, /* @__PURE__ */ import_react58.default.createElement(Action, {
+      disabled: !active,
+      onClick: () => send({
+        type: `reset${Kind}Invitation`
+      }),
+      "data-testid": "invitation-rescuer-reset"
+    }, t("reset label"))));
+  } else {
+    return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(StepHeading, {
+      className: import_react_ui_theme28.descriptionText
+    }, t("connecting status label")), /* @__PURE__ */ import_react58.default.createElement("div", {
+      role: "none",
+      className: "grow"
+    }), /* @__PURE__ */ import_react58.default.createElement(Actions, null, /* @__PURE__ */ import_react58.default.createElement(Action, {
+      disabled: true,
+      classNames: "order-2",
+      "data-testid": "next"
+    }, t("next label")), /* @__PURE__ */ import_react58.default.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 } = (0, import_react_ui29.useTranslation)("os");
+  return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ import_react58.default.createElement(StepHeading, {
+    className: import_react_ui_theme28.descriptionText
+  }, "There was a problem joining the space")), /* @__PURE__ */ import_react58.default.createElement(Actions, null, /* @__PURE__ */ import_react58.default.createElement(Action, {
+    disabled: !active,
+    "data-testid": "invitation-rescuer-blank-reset",
+    onClick: () => send({
+      type: `reset${Kind}Invitation`
+    })
+  }, t("reset label")))) : /* @__PURE__ */ import_react58.default.createElement(InvitationActions, props));
+};
+var pinLength = 6;
+var InvitationAuthenticator = ({ failed, Kind, authMethod, active, pending, invitationId, onInvitationAuthenticate, onInvitationCancel }) => {
+  const disabled = !active || pending;
+  const { t } = (0, import_react_ui30.useTranslation)("os");
+  const invitationType = Kind.toLowerCase();
+  const [authCode, setAuthCode] = (0, import_react59.useState)("");
+  const onChange = ({ target: { value } }) => {
+    setAuthCode(value);
+    if (value.length === pinLength) {
+      document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`)?.focus();
+    }
+  };
+  return /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center gap-4"
+  }, /* @__PURE__ */ import_react59.default.createElement(import_react_ui30.Input.Root, failed && {
+    validationValence: "error"
+  }, /* @__PURE__ */ import_react59.default.createElement(import_react_ui30.Input.Label, {
+    asChild: true
+  }, authMethod === import_invitations7.Invitation.AuthMethod.SHARED_SECRET ? /* @__PURE__ */ import_react59.default.createElement(StepHeading, null, t("auth code input label")) : /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(StepHeading, {
+    className: import_react_ui_theme29.descriptionText
+  }, t("authenticating label")), /* @__PURE__ */ import_react59.default.createElement("div", {
+    role: "none",
+    className: "grow"
+  }))), authMethod === import_invitations7.Invitation.AuthMethod.SHARED_SECRET && /* @__PURE__ */ import_react59.default.createElement(import_react_ui30.Input.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__ */ import_react59.default.createElement(import_react_ui30.Input.DescriptionAndValidation, {
+    classNames: "text-center"
+  }, /* @__PURE__ */ import_react59.default.createElement(import_react_ui30.Input.Validation, null, t("failed to authenticate message")))), invitationId && authMethod === import_invitations7.Invitation.AuthMethod.SHARED_SECRET && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(Label, null, t("auth other device emoji message")), /* @__PURE__ */ import_react59.default.createElement("div", {
+    className: "flex justify-center"
+  }, /* @__PURE__ */ import_react59.default.createElement(Emoji, {
+    text: (0, import_util9.hexToEmoji)(invitationId)
+  })))), /* @__PURE__ */ import_react59.default.createElement(Actions, null, /* @__PURE__ */ import_react59.default.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => onInvitationCancel?.(),
+    "data-testid": `${invitationType}-invitation-authenticator-cancel`
+  }, t("cancel label")), /* @__PURE__ */ import_react59.default.createElement(Action, {
+    variant: "primary",
+    disabled,
+    onClick: () => onInvitationAuthenticate?.(authCode),
+    "data-autofocus-pinlength": invitationType,
+    "data-testid": `${invitationType}-invitation-authenticator-next`
+  }, t("next label"))));
+};
+var stepStyles = "pbs-1 pbe-3 pli-3";
+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 === import_invitations8.Invitation.State.ERROR ? errorStrokeColor : status === import_invitations8.Invitation.State.CANCELLED || status === import_invitations8.Invitation.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
+var resolvedBgColor = (status) => status === import_invitations8.Invitation.State.ERROR ? errorBgColor : status === import_invitations8.Invitation.State.CANCELLED || status === import_invitations8.Invitation.State.TIMEOUT ? cancelledBgColor : successBgColor;
+var resolvedTextColor = (status) => status === import_invitations8.Invitation.State.ERROR ? errorTextColor : status === import_invitations8.Invitation.State.CANCELLED || status === import_invitations8.Invitation.State.TIMEOUT ? cancelledTextColor : successTextColor;
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
+var JoinPanelImpl = (props) => {
+  const {
+    titleId,
+    send,
+    activeView,
+    failed,
+    mode,
+    unredeemedCodes,
+    invitationIds,
+    invitationStates,
+    invitationAuthMethods,
+    succeededKeys,
+    failReasons,
+    onExit,
+    onHaloDone,
+    // onSpaceDone,
+    exitActionParent,
+    doneActionParent,
+    onHaloInvitationCancel,
+    onSpaceInvitationCancel,
+    onHaloInvitationAuthenticate,
+    onSpaceInvitationAuthenticate,
+    onCancelResetStorage,
+    onConfirmResetStorage,
+    IdentityInput: IdentityInputComponent = IdentityInput,
+    ConfirmReset: ConfirmResetComponent = ConfirmReset
+  } = props;
+  return /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ import_react47.default.createElement(JoinHeading, {
+    titleId,
+    mode,
+    onExit,
+    exitActionParent
+  }), /* @__PURE__ */ import_react47.default.createElement(Viewport.Root, {
+    focusManaged: true,
+    activeView
+  }, /* @__PURE__ */ import_react47.default.createElement(Viewport.Views, null, /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "addition method chooser"
+  }, /* @__PURE__ */ import_react47.default.createElement(AdditionMethodChooser, {
+    send,
+    active: activeView === "addition method chooser"
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "reset storage confirmation"
+  }, /* @__PURE__ */ import_react47.default.createElement(ConfirmResetComponent, {
+    send,
+    active: activeView === "reset storage confirmation",
+    onCancel: onCancelResetStorage,
+    onConfirm: onConfirmResetStorage
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "create identity input"
+  }, /* @__PURE__ */ import_react47.default.createElement(IdentityInputComponent, {
+    send,
+    method: "create identity",
+    active: activeView === "create identity input"
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "recover identity input"
+  }, /* @__PURE__ */ import_react47.default.createElement(IdentityInputComponent, {
+    send,
+    method: "recover identity",
+    active: activeView === "recover identity input"
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation input"
+  }, /* @__PURE__ */ import_react47.default.createElement(InvitationInput, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation input",
+    ...unredeemedCodes?.Halo && {
+      unredeemedCode: unredeemedCodes.Halo
+    },
+    ...succeededKeys?.Halo && {
+      succeededKeys: succeededKeys.Halo
+    }
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation rescuer"
+  }, /* @__PURE__ */ import_react47.default.createElement(InvitationRescuer, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation rescuer",
+    invitationState: invitationStates?.Halo,
+    onInvitationCancel: onHaloInvitationCancel,
+    failReason: failReasons?.Halo
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation authenticator"
+  }, /* @__PURE__ */ import_react47.default.createElement(InvitationAuthenticator, {
+    send,
+    Kind: "Halo",
+    invitationId: invitationIds?.Halo,
+    authMethod: invitationAuthMethods?.Halo,
+    active: activeView === "halo invitation authenticator",
+    onInvitationCancel: onHaloInvitationCancel,
+    onInvitationAuthenticate: onHaloInvitationAuthenticate,
+    ...failed.has("Halo") && {
+      failed: true
+    }
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "identity added"
+  }, /* @__PURE__ */ import_react47.default.createElement(IdentityAdded, {
+    send,
+    mode,
+    active: activeView === "identity added",
+    doneActionParent,
+    onDone: onHaloDone
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation input"
+  }, /* @__PURE__ */ import_react47.default.createElement(InvitationInput, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation input",
+    ...unredeemedCodes?.Space && {
+      unredeemedCode: unredeemedCodes.Space
+    },
+    ...succeededKeys?.Space && {
+      succeededKeys: succeededKeys.Space
+    },
+    onExit,
+    exitActionParent
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation rescuer"
+  }, /* @__PURE__ */ import_react47.default.createElement(InvitationRescuer, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation rescuer",
+    invitationState: invitationStates?.Space,
+    onInvitationCancel: onSpaceInvitationCancel,
+    failReason: failReasons?.Space
+  })), /* @__PURE__ */ import_react47.default.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation authenticator"
+  }, /* @__PURE__ */ import_react47.default.createElement(InvitationAuthenticator, {
+    send,
+    Kind: "Space",
+    invitationId: invitationIds?.Space,
+    authMethod: invitationAuthMethods?.Space,
+    active: activeView === "space invitation authenticator",
+    onInvitationCancel: onSpaceInvitationCancel,
+    onInvitationAuthenticate: onSpaceInvitationAuthenticate,
+    ...failed.has("Space") && {
+      failed: true
+    }
+  })))));
+};
+var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone: propsOnDone, onCancelResetStorage }) => {
+  const client = (0, import_react_client7.useClient)();
+  const identity = (0, import_halo4.useIdentity)();
+  const { hasIosKeyboard } = (0, import_react_ui22.useThemeContext)();
+  const titleId = (0, import_react_ui22.useId)("joinPanel__heading", propsTitleId);
+  const [joinState, joinSend, joinService] = useJoinMachine(client, {
+    context: {
+      mode,
+      initialDisposition,
+      identity,
+      ...initialInvitationCode && {
+        [mode === "halo-only" ? "halo" : "space"]: {
+          unredeemedCode: initialInvitationCode
+        }
+      }
+    }
+  });
+  (0, import_react47.useEffect)(() => {
+    const subscription = joinService.subscribe((state) => {
+      (0, import_log7.log)("[state]", state, {
+        F: __dxlog_file10,
+        L: 210,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    joinService
+  ]);
+  (0, import_react47.useEffect)(() => {
+    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 = (0, import_react47.useMemo)(() => {
+    switch (true) {
+      case joinState.matches({
+        choosingIdentity: "choosingAuthMethod"
+      }):
+        return "addition method chooser";
+      case joinState.matches("resettingIdentity"):
+        return "reset storage 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
+  ]);
+  (0, import_react47.useEffect)(() => {
+    switch (activeView) {
+      case "halo invitation accepted":
+        onHaloDone();
+        break;
+      case "space invitation accepted":
+        onSpaceDone();
+        break;
+    }
+  }, [
+    activeView
+  ]);
+  const failed = (0, import_react47.useMemo)(() => {
+    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 = (0, import_react47.useMemo)(() => ({
+    Halo: joinState.context.halo.unredeemedCode,
+    Space: joinState.context.space.unredeemedCode
+  }), [
+    joinState
+  ]);
+  const spaces = (0, import_react_client7.useMulticastObservable)(client.spaces);
+  const succeededKeys = (0, import_react47.useMemo)(() => ({
+    Space: spaces ? new Set(spaces.map(({ key }) => key.toHex())) : void 0
+  }), [
+    spaces
+  ]);
+  const invitationStates = (0, import_react47.useMemo)(() => ({
+    Halo: joinState.context.halo.invitationObservable?.get().state,
+    Space: joinState.context.space.invitationObservable?.get().state
+  }), [
+    joinState
+  ]);
+  const invitationAuthMethods = (0, import_react47.useMemo)(() => ({
+    Halo: joinState.context.halo.invitationObservable?.get().authMethod,
+    Space: joinState.context.space.invitationObservable?.get().authMethod
+  }), [
+    joinState
+  ]);
+  const invitationIds = (0, import_react47.useMemo)(() => ({
+    Halo: joinState.context.halo.invitationObservable?.get().invitationId,
+    Space: joinState.context.space.invitationObservable?.get().invitationId
+  }), [
+    joinState
+  ]);
+  const failReasons = (0, import_react47.useMemo)(() => ({
+    Halo: joinState.context.halo.failReason,
+    Space: joinState.context.space.failReason
+  }), [
+    joinState
+  ]);
+  const onHaloDone = (0, import_react47.useCallback)(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.halo.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.halo.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.halo.invitation?.spaceKey ?? null,
+      target: joinState.context.halo.invitation?.target ?? null
+    });
+  }, [
+    joinState,
+    propsOnDone
+  ]);
+  const onSpaceDone = (0, import_react47.useCallback)(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.space.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.space.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.space.invitation?.spaceKey ?? null,
+      target: joinState.context.space.invitation?.target ?? null
+    });
+  }, [
+    joinState,
+    propsOnDone
+  ]);
+  const onConfirmResetStorage = (0, import_react47.useCallback)(() => client.reset().then(() => {
+    joinSend({
+      type: "resetIdentity"
+    });
+  }), [
+    client,
+    joinSend
+  ]);
+  return /* @__PURE__ */ import_react47.default.createElement(JoinPanelImpl, {
+    titleId,
+    mode,
+    send: joinSend,
+    activeView,
+    failed,
+    failReasons,
+    pending: [
+      "connecting",
+      "authenticating"
+    ].some((str) => joinState?.configuration[0].id.includes(str)),
+    unredeemedCodes,
+    invitationIds,
+    invitationStates,
+    invitationAuthMethods,
+    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);
+    },
+    onConfirmResetStorage,
+    onCancelResetStorage
+  });
+};
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
+var spaceMachine = (0, import_xstate3.createMachine)({
+  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: (0, import_xstate3.assign)({
+      invitation: (context, event) => event?.invitation ?? null
+    }),
+    unsetInvitation: (0, import_xstate3.assign)({
+      invitation: () => void 0
+    }),
+    log: (context, event) => {
+      (0, import_log12.log)("[transition]", {
+        event,
+        context
+      }, {
+        F: __dxlog_file11,
+        L: 53,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var useSpaceMachine = (options) => {
+  return (0, import_react62.useMachine)(spaceMachine, {
+    ...options,
+    context: {
+      ...options?.context
+    }
+  });
+};
+var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx";
+var activeActionKey = "dxos:react-shell/space-manager/active-action";
+var handleInvitationEvent = (invitation, subscription) => {
+  const invitationCode = import_invitations10.InvitationEncoder.encode(invitation);
+  if (invitation.state === import_invitations10.Invitation.State.CONNECTING) {
+    import_log13.log.info(JSON.stringify({
+      invitationCode,
+      authCode: invitation.authCode
+    }), void 0, {
+      F: __dxlog_file12,
+      L: 40,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    subscription.unsubscribe();
+  }
+};
+var SpaceManager = (props) => {
+  const { space, target } = props;
+  const { t } = (0, import_react_ui32.useTranslation)("os");
+  const config = (0, import_react_client10.useConfig)();
+  const invitations = (0, import_echo4.useSpaceInvitations)(space?.key);
+  const inviteActions = {
+    inviteOne: {
+      label: t("invite one label"),
+      description: t("invite one description"),
+      icon: import_react63.UserPlus,
+      testId: "spaces-panel.invite-one",
+      onClick: (0, import_react64.useCallback)(() => {
+        const invitation = space.share?.({
+          type: import_invitations10.Invitation.Type.INTERACTIVE,
+          authMethod: import_invitations10.Invitation.AuthMethod.SHARED_SECRET,
+          multiUse: false,
+          target
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }, [
+        space,
+        target
+      ])
+    },
+    inviteMany: {
+      label: t("invite many label"),
+      description: t("invite many description"),
+      icon: import_react63.UsersThree,
+      testId: "spaces-panel.invite-many",
+      onClick: (0, import_react64.useCallback)(() => {
+        const invitation = space.share?.({
+          type: import_invitations10.Invitation.Type.DELEGATED,
+          authMethod: import_invitations10.Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
+          multiUse: true,
+          target
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }, [
+        space,
+        target
+      ])
+    }
+  };
+  return /* @__PURE__ */ import_react64.default.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 } = (0, import_react_ui32.useTranslation)("os");
+  const inviteActions = propsInviteActions ?? {
+    noopInvite: {
+      label: t("create space invitation label"),
+      description: "",
+      icon: import_react63.Placeholder,
+      onClick: () => {
+      }
+    }
+  };
+  const [activeAction, setInternalActiveAction] = (0, import_react64.useState)(localStorage.getItem(activeActionKey) ?? "inviteMany");
+  const setActiveAction = (nextAction) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+  const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
+    import_invitations10.Invitation.State.CANCELLED
+  ].includes(invitation.get().state));
+  return /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(import_react_ui32.ScrollArea.Root, {
+    classNames: "grow shrink basis-28 -mli-2"
+  }, /* @__PURE__ */ import_react64.default.createElement(import_react_ui32.ScrollArea.Viewport, {
+    classNames: "is-full pie-2"
+  }, !!visibleInvitations?.length && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement("h3", {
+    className: (0, import_react_ui_theme30.mx)(headingFragment, import_react_ui_theme30.descriptionText)
+  }, t("invitation list heading")), /* @__PURE__ */ import_react64.default.createElement(InvitationListComponent, {
+    className: "mb-2",
+    send,
+    invitations: visibleInvitations ?? [],
+    onClickRemove: (invitation) => invitation.cancel(),
+    createInvitationUrl
+  }), /* @__PURE__ */ import_react64.default.createElement("h3", {
+    className: (0, import_react_ui_theme30.mx)(headingFragment, import_react_ui_theme30.descriptionText, "mbs-2")
+  }, t("space member list heading"))), /* @__PURE__ */ import_react64.default.createElement(SpaceMemberListComponent, {
+    spaceKey: space.key,
+    includeSelf: true
+  })), /* @__PURE__ */ import_react64.default.createElement(import_react_ui32.ScrollArea.Scrollbar, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ import_react64.default.createElement(import_react_ui32.ScrollArea.Thumb, null))), /* @__PURE__ */ import_react64.default.createElement(Actions, null, /* @__PURE__ */ import_react64.default.createElement(BifurcatedAction, {
+    disabled: !active,
+    actions: inviteActions,
+    activeAction,
+    onChangeActiveAction: setActiveAction,
+    "data-testid": "spaces-panel.create-invitation"
+  })));
+};
+var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
+var SpacePanelHeading = ({ titleId, space, onDone }) => {
+  const { t } = (0, import_react_ui31.useTranslation)("os");
+  const name = space.properties.name;
+  return /* @__PURE__ */ import_react61.default.createElement(Heading, {
+    titleId,
+    title: t("space panel heading"),
+    corner: /* @__PURE__ */ import_react61.default.createElement(CloseButton, {
+      "data-testid": "identity-panel-done",
+      onDone
+    })
+  }, /* @__PURE__ */ import_react61.default.createElement("div", {
+    role: "none",
+    className: "flex gap-4 items-center justify-center mlb-4"
+  }, /* @__PURE__ */ import_react61.default.createElement(import_react60.Planet, {
+    size: 32,
+    weight: "light"
+  }), /* @__PURE__ */ import_react61.default.createElement("div", {
+    className: "block text-start font-light text-xl"
+  }, name ?? space.key.truncate())));
+};
+var SpacePanelImpl = (props) => {
+  const { titleId, activeView, space, hideHeading, target, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
+  return /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, !hideHeading && /* @__PURE__ */ import_react61.default.createElement(SpacePanelHeading, {
+    ...rest,
+    titleId,
+    space
+  }), /* @__PURE__ */ import_react61.default.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ import_react61.default.createElement(Viewport.Views, null, /* @__PURE__ */ import_react61.default.createElement(Viewport.View, {
+    id: "space manager",
+    classNames: stepStyles
+  }, /* @__PURE__ */ import_react61.default.createElement(SpaceManagerComponent, {
+    active: activeView === "space manager",
+    space,
+    target,
+    ...rest
+  })), /* @__PURE__ */ import_react61.default.createElement(Viewport.View, {
+    id: "space invitation manager",
+    classNames: stepStyles
+  }, /* @__PURE__ */ import_react61.default.createElement(InvitationManagerComponent, {
+    active: activeView === "space invitation manager",
+    ...rest,
+    invitationUrl: props.invitationUrl
+  })))));
+};
+var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
+  const invitationStatus = (0, import_invitations9.useInvitationStatus)(invitation);
+  return /* @__PURE__ */ import_react61.default.createElement(SpacePanelImpl, {
+    ...props,
+    ...invitationStatus,
+    invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
+  });
+};
+var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, ...props }) => {
+  const titleId = (0, import_react_ui31.useId)("spacePanel__heading", propsTitleId);
+  const [spaceState, spaceSend, spaceService] = useSpaceMachine({
+    context: {
+      space: props.space
+    }
+  });
+  (0, import_react61.useEffect)(() => {
+    const subscription = spaceService.subscribe((state) => {
+      (0, import_log11.log)("[state]", state, {
+        F: __dxlog_file13,
+        L: 95,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    spaceService
+  ]);
+  const activeView = (0, import_react61.useMemo)(() => {
+    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 ? (
+    // TODO(wittjosiah): Unused? Remove?
+    /* @__PURE__ */ import_react61.default.createElement(SpacePanelWithInvitationImpl, {
+      ...implProps,
+      invitation: spaceState.context.invitation
+    })
+  ) : /* @__PURE__ */ import_react61.default.createElement(SpacePanelImpl, implProps);
+};
+var StatusPanel = ({ titleId }) => {
+  const { t } = (0, import_react_ui33.useTranslation)("os");
+  return /* @__PURE__ */ import_react65.default.createElement("div", {
+    className: "grid place-items-center p-2 gap-2"
+  }, /* @__PURE__ */ import_react65.default.createElement("p", {
+    id: titleId,
+    className: "font-medium text-center"
+  }, t("resetting message")), /* @__PURE__ */ import_react65.default.createElement(import_react_ui33.Status, {
+    indeterminate: true
+  }, t("resetting message")));
+};
+var IdentityDialog = (props) => {
+  const titleId = (0, import_react_ui17.useId)("identityDialog__title", props.title);
+  return /* @__PURE__ */ import_react35.default.createElement(import_react_ui17.Dialog.Root, {
+    defaultOpen: true,
+    onOpenChange: (open) => open || props.onDone?.()
+  }, /* @__PURE__ */ import_react35.default.createElement(import_react_ui17.Dialog.Portal, null, /* @__PURE__ */ import_react35.default.createElement(import_react_ui17.Dialog.Overlay, null, /* @__PURE__ */ import_react35.default.createElement(import_react_ui17.Dialog.Content, {
+    "aria-labelledby": titleId,
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }, /* @__PURE__ */ import_react35.default.createElement(ClipboardProvider, null, /* @__PURE__ */ import_react35.default.createElement(IdentityPanel, {
+    ...props,
+    titleId,
+    doneActionParent: /* @__PURE__ */ import_react35.default.createElement(import_react_ui17.Dialog.Close, {
+      asChild: true
+    })
+  }))))));
+};
+var JoinDialog = (joinPanelProps) => {
+  const titleId = (0, import_react_ui34.useId)("joinDialog__title");
+  const { height } = (0, import_react_ui34.useVisualViewport)();
+  return /* @__PURE__ */ import_react66.default.createElement(import_react_ui34.AlertDialog.Root, {
+    defaultOpen: true,
+    onOpenChange: (open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))
+  }, /* @__PURE__ */ import_react66.default.createElement(import_react_ui34.AlertDialog.Portal, null, /* @__PURE__ */ import_react66.default.createElement(import_react_ui34.AlertDialog.Overlay, {
+    classNames: "backdrop-blur",
+    ...height && {
+      style: {
+        blockSize: `${height}px`
+      }
+    }
+  }, /* @__PURE__ */ import_react66.default.createElement(import_react_ui34.AlertDialog.Content, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ import_react66.default.createElement(JoinPanel, {
+    ...joinPanelProps,
+    titleId,
+    exitActionParent: /* @__PURE__ */ import_react66.default.createElement(import_react_ui34.AlertDialog.Cancel, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ import_react66.default.createElement(import_react_ui34.AlertDialog.Action, {
+      asChild: true
+    })
+  })))));
+};
+var SpaceDialog = (spacePanelProps) => {
+  const titleId = (0, import_react_ui36.useId)("spaceDialog__title");
+  return /* @__PURE__ */ import_react69.default.createElement(import_react_ui36.Dialog.Root, {
+    defaultOpen: true,
+    onOpenChange: (open) => open || spacePanelProps.onDone?.()
+  }, /* @__PURE__ */ import_react69.default.createElement(import_react_ui36.Dialog.Portal, null, /* @__PURE__ */ import_react69.default.createElement(import_react_ui36.Dialog.Overlay, null, /* @__PURE__ */ import_react69.default.createElement(import_react_ui36.Dialog.Content, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ import_react69.default.createElement(ClipboardProvider, null, /* @__PURE__ */ import_react69.default.createElement(SpacePanel, {
+    ...spacePanelProps,
+    titleId,
+    doneActionParent: /* @__PURE__ */ import_react69.default.createElement(import_react_ui36.Dialog.Close, {
+      asChild: true
+    })
+  }))))));
+};
+var StatusDialog = () => {
+  const titleId = (0, import_react_ui37.useId)("statusDialog__title");
+  return /* @__PURE__ */ import_react70.default.createElement(import_react_ui37.AlertDialog.Root, {
+    open: true
+  }, /* @__PURE__ */ import_react70.default.createElement(import_react_ui37.AlertDialog.Portal, null, /* @__PURE__ */ import_react70.default.createElement(import_react_ui37.AlertDialog.Overlay, null, /* @__PURE__ */ import_react70.default.createElement(import_react_ui37.AlertDialog.Content, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ import_react70.default.createElement(StatusPanel, {
+    titleId
+  })))));
+};
+var __dxlog_file14 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
+var blurActiveElement = () => document.activeElement?.blur?.();
+var Shell = ({ runtime }) => {
+  const [{ layout, invitationCode, spaceKey, spaceId, target }, setLayout] = (0, import_react68.useState)({
+    layout: runtime.layout,
+    invitationCode: runtime.invitationCode,
+    spaceKey: runtime.spaceKey,
+    spaceId: runtime.spaceId,
+    target: runtime.target
+  });
+  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = (0, import_react68.useState)({
+    invitationUrl: runtime.invitationUrl,
+    deviceInvitationParam: runtime.deviceInvitationParam,
+    spaceInvitationParam: runtime.spaceInvitationParam
+  });
+  const client = (0, import_react_client12.useClient)();
+  const space = (0, import_echo5.useSpace)(spaceId ?? spaceKey);
+  const createDeviceInvitationUrl = (invitationCode2) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(deviceInvitationParam, invitationCode2);
+    return baseUrl.toString();
+  };
+  const createSpaceInvitationUrl = (invitationCode2) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(spaceInvitationParam, invitationCode2);
+    return baseUrl.toString();
+  };
+  (0, import_react68.useEffect)(() => {
+    const unsubscribeLayout = runtime.layoutUpdate.on((request) => setLayout(request));
+    const unsubscribeInvitationUrl = runtime.invitationUrlUpdate.on((request) => setInvitationUrl(request));
+    return () => {
+      unsubscribeLayout();
+      unsubscribeInvitationUrl();
+    };
+  }, [
+    runtime
+  ]);
+  (0, import_react68.useEffect)(() => {
+    if (layout === import_react_client13.ShellLayout.SPACE && !space) {
+      import_log14.log.warn("No space found for shell space invitations.", void 0, {
+        F: __dxlog_file14,
+        L: 67,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      const timeout = setTimeout(async () => {
+        await runtime.setAppContext({
+          display: import_react_client13.ShellDisplay.NONE
+        });
+        runtime.setLayout({
+          layout: import_react_client13.ShellLayout.DEFAULT
+        });
+      });
+      return () => clearTimeout(timeout);
+    }
+  }, [
+    runtime,
+    layout,
+    space
+  ]);
+  switch (layout) {
+    case import_react_client13.ShellLayout.STATUS:
+      return /* @__PURE__ */ import_react68.default.createElement(StatusDialog, null);
+    case import_react_client13.ShellLayout.INITIALIZE_IDENTITY:
+    case import_react_client13.ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION:
+    case import_react_client13.ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY:
+      return /* @__PURE__ */ import_react68.default.createElement(JoinDialog, {
+        mode: "halo-only",
+        initialDisposition: layout === import_react_client13.ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY ? "recover-identity" : layout === import_react_client13.ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION ? "accept-halo-invitation" : "default",
+        initialInvitationCode: invitationCode,
+        onCancelResetStorage: () => runtime.setLayout({
+          layout: import_react_client13.ShellLayout.IDENTITY
+        }),
+        onDone: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.DEFAULT
+          });
+        }
+      });
+    case import_react_client13.ShellLayout.IDENTITY:
+    case import_react_client13.ShellLayout.SHARE_IDENTITY:
+    case import_react_client13.ShellLayout.EDIT_PROFILE:
+      return /* @__PURE__ */ import_react68.default.createElement(IdentityDialog, {
+        createInvitationUrl: createDeviceInvitationUrl,
+        onResetStorage: async () => {
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.STATUS
+          });
+          await client.reset();
+          return runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE,
+            reset: true
+          });
+        },
+        onRecover: async () => {
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.STATUS
+          });
+          await client.reset();
+          return runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE,
+            reset: true,
+            target: "recoverIdentity"
+          });
+        },
+        onJoinNewIdentity: async () => {
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.STATUS
+          });
+          await client.reset();
+          return runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE,
+            reset: true,
+            target: "deviceInvitation"
+          });
+        },
+        onDone: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.DEFAULT
+          });
+        },
+        initialDisposition: layout === import_react_client13.ShellLayout.SHARE_IDENTITY ? "manage-device-invitation" : "default"
+      });
+    case import_react_client13.ShellLayout.SPACE:
+      return space ? /* @__PURE__ */ import_react68.default.createElement(SpaceDialog, {
+        space,
+        target,
+        createInvitationUrl: createSpaceInvitationUrl,
+        onDone: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.DEFAULT
+          });
+        }
+      }) : null;
+    case import_react_client13.ShellLayout.JOIN_SPACE:
+      return /* @__PURE__ */ import_react68.default.createElement(JoinDialog, {
+        initialInvitationCode: invitationCode,
+        onDone: async (result) => {
+          blurActiveElement();
+          const target2 = result?.target ?? void 0;
+          await runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE,
+            spaceKey: result?.spaceKey ?? void 0,
+            target: target2
+          });
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.DEFAULT
+          });
+        },
+        onExit: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: import_react_client13.ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: import_react_client13.ShellLayout.DEFAULT
+          });
+        }
+      });
+    default:
+      return null;
+  }
+};
+var __dxlog_file15 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/shell-runtime.ts";
+var ShellRuntimeImpl = class {
+  constructor(_port) {
+    this._port = _port;
+    this.layoutUpdate = new import_async.Event();
+    this.invitationUrlUpdate = new import_async.Event();
+    this._layout = import_iframe.ShellLayout.DEFAULT;
+    this._invitationUrl = typeof window !== "undefined" ? window.location.origin : void 0;
+    this._deviceInvitationParam = "deviceInvitationCode";
+    this._spaceInvitationParam = "spaceInvitationCode";
+  }
+  get layout() {
+    return this._layout;
+  }
+  get invitationCode() {
+    return this._invitationCode;
+  }
+  /** @deprecated Use spaceId. */
+  get spaceKey() {
+    return this._spaceKey;
+  }
+  get spaceId() {
+    return this._spaceId;
+  }
+  get invitationUrl() {
+    return this._invitationUrl;
+  }
+  get deviceInvitationParam() {
+    return this._deviceInvitationParam;
+  }
+  get spaceInvitationParam() {
+    return this._spaceInvitationParam;
+  }
+  setLayout({ layout, invitationCode, spaceKey, spaceId }) {
+    this._layout = layout;
+    this._invitationCode = invitationCode;
+    this._spaceKey = spaceKey;
+    this._spaceId = spaceId;
+    this.layoutUpdate.emit({
+      layout,
+      invitationCode,
+      spaceKey,
+      spaceId
+    });
+  }
+  setInvitationUrl({ invitationUrl, deviceInvitationParam, spaceInvitationParam }) {
+    this._invitationUrl = invitationUrl;
+    this._deviceInvitationParam = deviceInvitationParam;
+    this._spaceInvitationParam = spaceInvitationParam;
+    this.invitationUrlUpdate.emit({
+      invitationUrl,
+      deviceInvitationParam,
+      spaceInvitationParam
+    });
+  }
+  async setAppContext(context) {
+    (0, import_invariant4.invariant)(this._appRpc, "runtime not open", {
+      F: __dxlog_file15,
+      L: 83,
+      S: this,
+      A: [
+        "this._appRpc",
+        "'runtime not open'"
+      ]
+    });
+    await this._appRpc.rpc.AppService.setContext(context);
+  }
+  async open() {
+    this._appRpc = (0, import_rpc.createProtoRpcPeer)({
+      requested: import_client_protocol2.appServiceBundle,
+      exposed: import_client_protocol2.shellServiceBundle,
+      handlers: {
+        ShellService: {
+          setLayout: async (request) => {
+            this._layout = request.layout;
+            this._invitationCode = request.invitationCode;
+            this._spaceKey = request.spaceKey;
+            this._spaceId = request.spaceId;
+            this.layoutUpdate.emit(request);
+          },
+          setInvitationUrl: async (request) => {
+            this._invitationUrl = request.invitationUrl;
+            this._deviceInvitationParam = request.deviceInvitationParam;
+            this._spaceInvitationParam = request.spaceInvitationParam;
+            this.invitationUrlUpdate.emit(request);
+          }
+        }
+      },
+      port: this._port
+    });
+    await this._appRpc.open();
+  }
+  async close() {
+    await this._appRpc?.close();
+    this._appRpc = void 0;
+  }
+};
+var en_US_exports = {};
+(0, import_chunk_Q7SFCCGT.__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 success label": "Copied",
+  "copy self public key label": "Copy public key",
+  "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 code.",
+  "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 authentication code",
+  "authenticating status label": "Enter authentication code",
+  "success status label": "Success",
+  "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 add device label": "Add device",
+  "choose devices label": "Manage devices",
+  "choose profile label": "Edit profile",
+  "choose sign out label": "Reset storage",
+  "choose join new identity label": "Join existing device",
+  "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.",
+  "auth other device emoji message": "Be sure the other device shows the following symbol:",
+  "display name input label": "Display name",
+  "display name input placeholder": "Enter a display name",
+  "invite one label": "Single-use invitation",
+  "invite one description": "Only one user may join.",
+  "invite one qr label": "Single-use invitation",
+  "invite one list item label": "Active single-use invitation",
+  "invite many label": "Multi-use invitation",
+  "invite many description": "Anyone with the link can join.",
+  "invite many qr label": "Multi-use invitation",
+  "invite many list item label": "Active multi-use invitation",
+  "invite options label": "Change the active invite option.",
+  "reset in progress label": "Resetting...",
+  "confirm label": "Confirm",
+  "reset storage input label": "WARNING: This will delete all data on this device. Type {{confirmationValue}} to continue.",
+  "join new identity input label": "WARNING: To join an existing device all data on this device will be deleted. Type {{confirmationValue}} to continue.",
+  "failed to reset identity message": "Failed to reset identity.",
+  "confirmation value": "RESET",
+  "confirmation placeholder": "Enter {{confirmationValue}} to continue.",
+  "sign out chooser title": "Danger zone",
+  "sign out chooser message": "Proceeding with the action below will erase all data on this device.",
+  "join new identity label": "Join a new identity",
+  "reset device label": "Reset storage",
+  "reset device confirm message": "Are you sure you want to reset your device? All data will be lost.",
+  "emoji and color label": "Emoji and color",
+  "clear label": "Use default",
+  "select emoji label": "Avatar emoji",
+  "select hue label": "Avatar background color",
+  "resetting message": "One moment while the device is reset\u2026",
+  "red label": "Red",
+  "orange label": "Orange",
+  "amber label": "Amber",
+  "yellow label": "Yellow",
+  "lime label": "Lime",
+  "green label": "Green",
+  "emerald label": "Emerald",
+  "teal label": "Teal",
+  "cyan label": "Cyan",
+  "sky label": "Sky",
+  "blue label": "Blue",
+  "indigo label": "Indigo",
+  "violet label": "Violet",
+  "purple label": "Purple",
+  "fuchsia label": "Fuchsia",
+  "pink label": "Pink",
+  "rose label": "Rose",
+  "current device tag label": "This device",
+  "device name placeholder": "{{platform}} on {{os}}",
+  "more options label": "More options",
+  "disconnect label": "Go offline.",
+  "connect label": "Go online.",
+  "edit device label": "Edit device name & avatar",
+  "agent heading": "Agent",
+  "create agent clickwrap": 'By creating an agent, you agree to our <tosLink href="https://dxos.org/tos">Terms of\xA0Service</tosLink>.',
+  "create agent description": "Creating an agent helps keep your devices and peers in-sync. An agent is like any other device, but since it\u2019s always online your changes will sync even when all your physical devices are\xA0asleep.",
+  "create agent label": "Start an agent",
+  "destroy agent label": "Shut down agent",
+  "agent device label": "Your agent",
+  "shell fallback title": "Shell failed to connect",
+  "creating agent label": "Starting agent\u2026",
+  "destroying agent label": "Stopping agent\u2026",
+  "getting agent label": "Checking agent status\u2026",
+  "agent requested label": "Agent requested",
+  "agent requested description": "The agent service is creating an agent for you. Once the agent connects, it will display in the devices list.",
+  "authenticating label": "Authenticating\u2026",
+  "create recovery code label": "Create recovery code",
+  "choose recover identity label": "Recover identity"
+};
+var osTranslations = {
+  "en-US": en_US_exports
+};
+var runShell = async (config = new import_react_client11.Config()) => {
+  const runtime = new ShellRuntimeImpl((0, import_rpc_tunnel.createIFramePort)({
+    channel: import_client_protocol.DEFAULT_SHELL_CHANNEL
+  }));
+  await runtime.open();
+  try {
+    const services = new import_react_client11.ClientServicesProxy((0, import_rpc_tunnel.createIFramePort)({
+      channel: import_client_protocol.DEFAULT_CLIENT_CHANNEL
+    }));
+    (0, import_client.createRoot)(document.getElementById("root")).render(/* @__PURE__ */ import_react67.default.createElement(import_react67.StrictMode, null, /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.ThemeProvider, {
+      tx: import_react_ui_theme31.defaultTx,
+      resourceExtensions: [
+        osTranslations
+      ]
+    }, /* @__PURE__ */ import_react67.default.createElement(import_react_client11.ClientProvider, {
+      config,
+      services,
+      noBanner: true
+    }, /* @__PURE__ */ import_react67.default.createElement(ClipboardProvider, null, /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.Tooltip.Provider, null, /* @__PURE__ */ import_react67.default.createElement(import_react_client11.AgentHostingProvider, null, /* @__PURE__ */ import_react67.default.createElement(Shell, {
+      runtime
+    }))))))));
+  } catch {
+    (0, import_client.createRoot)(document.getElementById("root")).render(/* @__PURE__ */ import_react67.default.createElement(import_react67.StrictMode, null, /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.ThemeProvider, {
+      tx: import_react_ui_theme31.defaultTx,
+      resourceExtensions: [
+        osTranslations
+      ]
+    }, /* @__PURE__ */ import_react67.default.createElement(Fallback, {
+      onClose: () => runtime.setAppContext({
+        display: import_react_client11.ShellDisplay.NONE
+      })
+    }))));
+  }
+};
+var Fallback = ({ onClose }) => {
+  const { t } = (0, import_react_ui35.useTranslation)("os");
+  return /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.Dialog.Root, {
+    modal: true,
+    open: true,
+    onOpenChange: () => onClose?.()
+  }, /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.Dialog.Overlay, null, /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.Dialog.Content, null, /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.Dialog.Title, null, t("shell fallback title")), /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.Dialog.Close, {
+    asChild: true,
+    onClick: () => onClose?.()
+  }, /* @__PURE__ */ import_react67.default.createElement(import_react_ui35.Button, {
+    variant: "primary"
+  }, t("close label"))))));
+};
+var MemoryShellRuntime = class {
+  constructor({ layout, invitationCode, spaceKey, invitationUrl, deviceInvitationParam, spaceInvitationParam } = {}) {
+    this.layoutUpdate = new import_async2.Event();
+    this.invitationUrlUpdate = new import_async2.Event();
+    this.contextUpdate = new import_async2.Event();
+    this._layout = layout ?? import_react_client15.ShellLayout.DEFAULT;
+    this._invitationCode = invitationCode;
+    this._spaceKey = spaceKey;
+    this._invitationUrl = invitationUrl ?? window.location.origin;
+    this._deviceInvitationParam = deviceInvitationParam ?? "deviceInvitationCode";
+    this._spaceInvitationParam = spaceInvitationParam ?? "spaceInvitationCode";
+  }
+  get layout() {
+    return this._layout;
+  }
+  get invitationCode() {
+    return this._invitationCode;
+  }
+  get spaceKey() {
+    return this._spaceKey;
+  }
+  get invitationUrl() {
+    return this._invitationUrl;
+  }
+  get deviceInvitationParam() {
+    return this._deviceInvitationParam;
+  }
+  get spaceInvitationParam() {
+    return this._spaceInvitationParam;
+  }
+  setLayout(request) {
+    this._layout = request.layout;
+    this._invitationCode = request.invitationCode;
+    this._spaceKey = request.spaceKey;
+    this.layoutUpdate.emit(request);
+  }
+  setInvitationUrl(request) {
+    this._invitationUrl = request.invitationUrl;
+    this._deviceInvitationParam = request.deviceInvitationParam;
+    this._spaceInvitationParam = request.spaceInvitationParam;
+    this.invitationUrlUpdate.emit(request);
+  }
+  async setAppContext(context) {
+    this.contextUpdate.emit(context);
+  }
+};
+var ShellContext = /* @__PURE__ */ (0, import_react71.createContext)({});
+var useShell = () => {
+  const client = (0, import_react_client14.useClient)();
+  const { runtime, setDisplay } = (0, import_react71.useContext)(ShellContext);
+  const setLayout = async (layout, options) => {
+    if (runtime) {
+      if (layout === import_react_client14.ShellLayout.DEFAULT) {
+        setDisplay?.(import_react_client14.ShellDisplay.NONE);
+      } else {
+        setDisplay?.(import_react_client14.ShellDisplay.FULLSCREEN);
+      }
+      runtime.setLayout({
+        layout,
+        ...options
+      });
+    }
+    await client.shell.open(layout, options);
+  };
+  return {
+    setLayout
+  };
+};
+var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
+  const client = (0, import_react_client14.useClient)();
+  const identity = (0, import_halo5.useIdentity)();
+  const [display, setDisplay] = (0, import_react71.useState)(!identity || spaceInvitationCode || deviceInvitationCode ? import_react_client14.ShellDisplay.FULLSCREEN : import_react_client14.ShellDisplay.NONE);
+  const shellRuntime = (0, import_react71.useMemo)(() => {
+    if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
+      return;
+    }
+    if (spaceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: import_react_client14.ShellLayout.JOIN_SPACE,
+        invitationCode: spaceInvitationCode
+      });
+    }
+    if (deviceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: import_react_client14.ShellLayout.INITIALIZE_IDENTITY,
+        invitationCode: deviceInvitationCode
+      });
+    }
+    return new MemoryShellRuntime({
+      layout: identity ? import_react_client14.ShellLayout.DEFAULT : import_react_client14.ShellLayout.INITIALIZE_IDENTITY
+    });
+  }, [
+    client,
+    identity,
+    spaceInvitationCode,
+    deviceInvitationCode
+  ]);
+  const handleKeyDown = (0, import_react71.useCallback)((event) => {
+    if (!space || !shellRuntime) {
+      return;
+    }
+    const modifier = event.ctrlKey || event.metaKey;
+    if (event.key === ">" && event.shiftKey && modifier) {
+      shellRuntime.setLayout({
+        layout: import_react_client14.ShellLayout.SHARE_IDENTITY
+      });
+      setDisplay(import_react_client14.ShellDisplay.FULLSCREEN);
+    } else if (event.key === "." && modifier) {
+      shellRuntime.setLayout({
+        layout: import_react_client14.ShellLayout.SPACE,
+        spaceKey: space.key
+      });
+      setDisplay(import_react_client14.ShellDisplay.FULLSCREEN);
+    }
+  }, [
+    space,
+    shellRuntime
+  ]);
+  (0, import_react71.useEffect)(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    shellRuntime,
+    handleKeyDown
+  ]);
+  (0, import_react71.useEffect)(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    return shellRuntime.contextUpdate.on(({ display: display2, spaceKey }) => {
+      if (display2) {
+        setDisplay(display2);
+      }
+      onJoinedSpace?.(spaceKey);
+    });
+  }, [
+    shellRuntime
+  ]);
+  return /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, shellRuntime && /* @__PURE__ */ import_react71.default.createElement("div", {
+    className: (0, import_react_ui_theme32.mx)(display === import_react_client14.ShellDisplay.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ import_react71.default.createElement(Shell, {
+    runtime: shellRuntime
+  })), /* @__PURE__ */ import_react71.default.createElement(ShellContext.Provider, {
+    value: {
+      runtime: shellRuntime,
+      setDisplay
+    }
+  }, children));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Action,
+  Actions,
+  AgentConfig,
+  AuthCode,
+  BifurcatedAction,
+  Centered,
+  ClipboardContext,
+  ClipboardProvider,
+  CloseButton,
+  CompoundButton,
+  ConfirmReset,
+  ConfirmResetImpl,
+  CopyButton,
+  CopyButtonIconOnly,
+  DeviceList,
+  Emoji,
+  EmojiPickerBlock,
+  EmojiPickerToolbarButton,
+  Heading,
+  HuePickerBlock,
+  HuePickerToolbarButton,
+  IdentityDialog,
+  IdentityListItem,
+  IdentityPanel,
+  IdentityPanelImpl,
+  Input,
+  InvitationList,
+  InvitationListContainer,
+  InvitationListItem,
+  InvitationListItemImpl,
+  InvitationManager,
+  JoinDialog,
+  JoinPanel,
+  JoinPanelImpl,
+  Label,
+  Shell,
+  ShellContext,
+  ShellProvider,
+  SpaceDialog,
+  SpaceListItem,
+  SpaceMemberList,
+  SpaceMemberListImpl,
+  SpacePanel,
+  SpacePanelImpl,
+  StatusPanel,
+  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.cjs.map