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

package/dist/lib/browser/index.mjs

@@ -4,13 +4,69 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// packages/apps/patterns/react-ui/src/components/IdentityList/DeviceList.tsx
+// packages/apps/patterns/react-ui/src/components/Clipboard/CopyButton.tsx
+import { Check, Copy } from "@phosphor-icons/react";
 import React2 from "react";
+import { Button, getSize, mx, useTranslation } from "@dxos/react-components";
+
+// packages/apps/patterns/react-ui/src/components/Clipboard/ClipboardProvider.tsx
+import React, { createContext, useCallback, useContext, useState } from "react";
+var ClipboardContext = /* @__PURE__ */ createContext({
+  textValue: "",
+  setTextValue: async (_) => {
+  }
+});
+var useClipboardContext = () => useContext(ClipboardContext);
+var ClipboardProvider = ({ children }) => {
+  const [textValue, setInternalTextValue] = useState("");
+  const setTextValue = useCallback(async (nextValue) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return /* @__PURE__ */ React.createElement(ClipboardContext.Provider, {
+    value: {
+      textValue,
+      setTextValue
+    }
+  }, children);
+};
+
+// packages/apps/patterns/react-ui/src/components/Clipboard/CopyButton.tsx
+var inactiveLabelStyles = "invisible bs-px -mbe-px";
+var CopyButton = ({ value }) => {
+  const { t } = useTranslation("os");
+  const { textValue, setTextValue } = useClipboardContext();
+  const isCopied = textValue === value;
+  return /* @__PURE__ */ React2.createElement(Button, {
+    className: "inline-flex flex-col justify-center",
+    onClick: () => setTextValue(value),
+    "data-testid": "copy-invitation"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx("flex gap-1", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "pli-1"
+  }, t("copy invitation code label")), /* @__PURE__ */ React2.createElement(Copy, {
+    className: getSize(4),
+    weight: "bold"
+  })), /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx("flex gap-1", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "pli-1"
+  }, t("copy invitation code success label")), /* @__PURE__ */ React2.createElement(Check, {
+    className: getSize(4),
+    weight: "bold"
+  })));
+};
+
+// packages/apps/patterns/react-ui/src/components/IdentityList/DeviceList.tsx
+import React4 from "react";
 
 // packages/apps/patterns/react-ui/src/components/IdentityList/IdentityListItem.tsx
-import React from "react";
+import React3 from "react";
 import { SpaceMember } from "@dxos/client";
-import { Avatar, mx, useTranslation } from "@dxos/react-components";
+import { Avatar, mx as mx2, useTranslation as useTranslation2 } from "@dxos/react-components";
 function _extends() {
   _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -27,21 +83,21 @@ function _extends() {
 }
 var IdentityListItem = ({ identity, presence, onClick }) => {
   var _a, _b;
-  const { t } = useTranslation("os");
-  return /* @__PURE__ */ React.createElement("li", {
-    className: mx("flex gap-2 items-center", onClick && "cursor-pointer"),
+  const { t } = useTranslation2("os");
+  return /* @__PURE__ */ React3.createElement("li", {
+    className: mx2("flex gap-2 items-center", onClick && "cursor-pointer"),
     onClick: () => onClick == null ? void 0 : onClick(),
     "data-testid": "identity-list-item"
-  }, /* @__PURE__ */ React.createElement(Avatar, _extends({}, {
+  }, /* @__PURE__ */ React3.createElement(Avatar, _extends({}, {
     variant: "circle",
     size: 9,
     fallbackValue: identity.identityKey.toHex(),
-    label: /* @__PURE__ */ React.createElement("p", {
+    label: /* @__PURE__ */ React3.createElement("p", {
       className: "text-sm truncate"
     }, (_b = (_a = identity.profile) == null ? void 0 : _a.displayName) != null ? _b : identity.identityKey.truncate()),
     ...presence === SpaceMember.PresenceState.OFFLINE && {
       status: "inactive",
-      description: /* @__PURE__ */ React.createElement("p", {
+      description: /* @__PURE__ */ React3.createElement("p", {
         className: "font-system-normal text-xs text-neutral-700 dark:text-neutral-300"
       }, t("identity offline description"))
     },
@@ -61,7 +117,7 @@ var IdentityListItem = ({ identity, presence, onClick }) => {
 
 // packages/apps/patterns/react-ui/src/components/IdentityList/DeviceList.tsx
 var DeviceList = ({ devices, onSelect }) => {
-  return /* @__PURE__ */ React2.createElement("ul", {
+  return /* @__PURE__ */ React4.createElement("ul", {
     className: "flex flex-col gap-2"
   }, devices.map((device) => {
     var _a;
@@ -71,7 +127,7 @@ var DeviceList = ({ devices, onSelect }) => {
         displayName: (_a = device.profile) == null ? void 0 : _a.displayName
       }
     };
-    return /* @__PURE__ */ React2.createElement(IdentityListItem, {
+    return /* @__PURE__ */ React4.createElement(IdentityListItem, {
       key: device.deviceKey.toHex(),
       identity,
       onClick: onSelect && (() => onSelect(device))
@@ -80,12 +136,12 @@ var DeviceList = ({ devices, onSelect }) => {
 };
 
 // packages/apps/patterns/react-ui/src/components/IdentityList/SpaceMemberList.tsx
-import React3 from "react";
+import React5 from "react";
 var SpaceMemberList = ({ members, onSelect }) => {
-  return /* @__PURE__ */ React3.createElement("ul", {
+  return /* @__PURE__ */ React5.createElement("ul", {
     className: "flex flex-col gap-2"
   }, members.filter((member) => member.identity).map((member) => {
-    return /* @__PURE__ */ React3.createElement(IdentityListItem, {
+    return /* @__PURE__ */ React5.createElement(IdentityListItem, {
       key: member.identity.identityKey.toHex(),
       identity: member.identity,
       presence: member.presence,
@@ -95,7 +151,7 @@ var SpaceMemberList = ({ members, onSelect }) => {
 };
 
 // packages/apps/patterns/react-ui/src/components/IdentityList/SpaceMemberListContainer.tsx
-import React4, { useMemo } from "react";
+import React6, { useMemo } from "react";
 import { useClient, useMembers } from "@dxos/react-client";
 var SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }) => {
   const client = useClient();
@@ -103,80 +159,49 @@ var SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }) => {
   const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((a) => a.identity.identityKey.equals(client.halo.identity.get().identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity.get().identityKey)), [
     allUnsortedMembers
   ]);
-  return /* @__PURE__ */ React4.createElement(SpaceMemberList, {
+  return /* @__PURE__ */ React6.createElement(SpaceMemberList, {
     members,
     onSelect
   });
 };
 
-// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
-import React5 from "react";
-import { Invitation as Invitation3 } from "@dxos/client";
-import { getSize, mx as mx2 } from "@dxos/react-components";
-
-// packages/apps/patterns/react-ui/src/styles/dialogStyles.ts
-var defaultOverlay = "fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8";
-var defaultDialogContent = "is-full min-is-[260px] max-is-[320px] rounded-md shadow-md backdrop-blur-md";
-
-// packages/apps/patterns/react-ui/src/styles/panelStyles.ts
-var defaultSurface = "bg-neutral-50/[.72] dark:bg-neutral-950/[.72]";
-var subduedSurface = "bg-neutral-100/[.66] dark:bg-neutral-900/[.66]";
-var defaultArrow = "text-neutral-50/[.66] dark:text-neutral-950/[.66]";
-
-// packages/apps/patterns/react-ui/src/styles/invitationStatusStyles.ts
-import { Invitation } from "@dxos/client";
-var inactiveBgColor = "bg-neutral-100 dark:bg-neutral-600";
-var activeBgColor = "bg-primary-500 dark:bg-primary-400";
-var successBgColor = "bg-success-500 dark:bg-success-400";
-var errorBgColor = "bg-error-500 dark:bg-error-400";
-var cancelledBgColor = "bg-warning-500 dark:bg-warning-400";
-var inactiveTextColor = "text-neutral-100 dark:text-neutral-600";
-var activeTextColor = "text-primary-400 dark:text-primary-500";
-var successTextColor = "text-success-400 dark:text-success-500";
-var errorTextColor = "text-error-400 dark:text-error-500";
-var cancelledTextColor = "text-warning-400 dark:text-warning-500";
-var inactiveStrokeColor = "stroke-neutral-100 dark:stroke-neutral-700";
-var activeStrokeColor = "stroke-primary-500 dark:stroke-primary-150";
-var successStrokeColor = "stroke-success-400 dark:stroke-primary-400";
-var errorStrokeColor = "stroke-error-400 dark:stroke-error-500";
-var cancelledStrokeColor = "stroke-warning-400 dark:stroke-warning-500";
-var resolvedStrokeColor = (status) => status === Invitation.State.ERROR ? errorStrokeColor : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
-var resolvedBgColor = (status) => status === Invitation.State.ERROR ? errorBgColor : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT ? cancelledBgColor : successBgColor;
-var resolvedTextColor = (status) => status === Invitation.State.ERROR ? errorTextColor : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT ? cancelledTextColor : successTextColor;
+// packages/apps/patterns/react-ui/src/components/InvitationEmoji/InvitationEmoji.tsx
+import React7 from "react";
+import { getSize as getSize2, mx as mx3 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/util/invitationStatusValue.ts
-import { Invitation as Invitation2 } from "@dxos/client";
+import { Invitation } from "@dxos/client";
 var invitationStatusValue = /* @__PURE__ */ new Map([
   [
-    Invitation2.State.ERROR,
+    Invitation.State.ERROR,
     -3
   ],
   [
-    Invitation2.State.TIMEOUT,
+    Invitation.State.TIMEOUT,
     -2
   ],
   [
-    Invitation2.State.CANCELLED,
+    Invitation.State.CANCELLED,
     -1
   ],
   [
-    Invitation2.State.INIT,
+    Invitation.State.INIT,
     0
   ],
   [
-    Invitation2.State.CONNECTING,
+    Invitation.State.CONNECTING,
     1
   ],
   [
-    Invitation2.State.CONNECTED,
+    Invitation.State.CONNECTED,
     2
   ],
   [
-    Invitation2.State.AUTHENTICATING,
+    Invitation.State.AUTHENTICATING,
     3
   ],
   [
-    Invitation2.State.SUCCESS,
+    Invitation.State.SUCCESS,
     4
   ]
 ]);
@@ -199,7 +224,7 @@ var emoji = toArray(
 );
 var toEmoji = (keyAsHex) => emoji[parseInt(keyAsHex, 16) % emoji.length];
 
-// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
+// packages/apps/patterns/react-ui/src/components/InvitationEmoji/InvitationEmoji.tsx
 function _extends2() {
   _extends2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -214,6 +239,67 @@ function _extends2() {
   };
   return _extends2.apply(this, arguments);
 }
+var InvitationEmoji = ({ invitationId, size = "lg", ...rootProps }) => {
+  const invitationEmoji = invitationId && toEmoji(invitationId);
+  return /* @__PURE__ */ React7.createElement("div", _extends2({
+    role: "none"
+  }, rootProps, {
+    className: mx3(getSize2(size === "sm" ? 8 : 12), "inline-flex items-center justify-center leading-none", size === "sm" ? "text-2xl" : "text-5xl bg-neutral-300 dark:bg-neutral-700 rounded-full", rootProps.className)
+  }), /* @__PURE__ */ React7.createElement("span", {
+    role: "none"
+  }, invitationEmoji));
+};
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
+import React8 from "react";
+import { Invitation as Invitation3 } from "@dxos/client";
+import { getSize as getSize3, mx as mx4 } from "@dxos/react-components";
+
+// packages/apps/patterns/react-ui/src/styles/dialogStyles.ts
+var defaultOverlay = "fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8";
+var defaultDialogContent = "is-full min-is-[260px] max-is-[320px] rounded-md shadow-md backdrop-blur-md";
+
+// packages/apps/patterns/react-ui/src/styles/panelStyles.ts
+var defaultSurface = "bg-neutral-50/[.72] dark:bg-neutral-950/[.72]";
+var subduedSurface = "bg-neutral-100/[.66] dark:bg-neutral-900/[.66]";
+var defaultArrow = "text-neutral-50/[.66] dark:text-neutral-950/[.66]";
+
+// packages/apps/patterns/react-ui/src/styles/invitationStatusStyles.ts
+import { Invitation as Invitation2 } from "@dxos/client";
+var inactiveBgColor = "bg-neutral-100 dark:bg-neutral-600";
+var activeBgColor = "bg-primary-500 dark:bg-primary-400";
+var successBgColor = "bg-success-500 dark:bg-success-400";
+var errorBgColor = "bg-error-500 dark:bg-error-400";
+var cancelledBgColor = "bg-warning-500 dark:bg-warning-400";
+var inactiveTextColor = "text-neutral-100 dark:text-neutral-600";
+var activeTextColor = "text-primary-400 dark:text-primary-500";
+var successTextColor = "text-success-400 dark:text-success-500";
+var errorTextColor = "text-error-400 dark:text-error-500";
+var cancelledTextColor = "text-warning-400 dark:text-warning-500";
+var inactiveStrokeColor = "stroke-neutral-100 dark:stroke-neutral-700";
+var activeStrokeColor = "stroke-primary-500 dark:stroke-primary-150";
+var successStrokeColor = "stroke-success-400 dark:stroke-primary-400";
+var errorStrokeColor = "stroke-error-400 dark:stroke-error-500";
+var cancelledStrokeColor = "stroke-warning-400 dark:stroke-warning-500";
+var resolvedStrokeColor = (status) => status === Invitation2.State.ERROR ? errorStrokeColor : status === Invitation2.State.CANCELLED || status === Invitation2.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
+var resolvedBgColor = (status) => status === Invitation2.State.ERROR ? errorBgColor : status === Invitation2.State.CANCELLED || status === Invitation2.State.TIMEOUT ? cancelledBgColor : successBgColor;
+var resolvedTextColor = (status) => status === Invitation2.State.ERROR ? errorTextColor : status === Invitation2.State.CANCELLED || status === Invitation2.State.TIMEOUT ? cancelledTextColor : successTextColor;
+
+// packages/apps/patterns/react-ui/src/components/InvitationList/InvitationStatusAvatar.tsx
+function _extends3() {
+  _extends3 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends3.apply(this, arguments);
+}
 var svgSize = 32;
 var strokeWidth = 5;
 var radius = (svgSize - strokeWidth) / 2;
@@ -231,33 +317,40 @@ var circleProps = {
   strokeWidth,
   strokeDasharray: `${segment - gap} ${2 * segment + gap}`
 };
-var InvitationStatusAvatar = ({ size = 10, status, haltedAt, slots = {} }) => {
+var InvitationStatusAvatar = ({ size = 10, status, haltedAt, slots = {}, invitationId }) => {
   var _a;
   const resolvedColor = resolvedStrokeColor(status);
   const halted = status === Invitation3.State.CANCELLED || status === Invitation3.State.TIMEOUT || status === Invitation3.State.ERROR;
   const cursor = invitationStatusValue.get(halted ? haltedAt : status);
-  return /* @__PURE__ */ React5.createElement("svg", _extends2({}, slots.svg, {
+  return /* @__PURE__ */ React8.createElement("div", {
+    className: "inline-block relative"
+  }, /* @__PURE__ */ React8.createElement(InvitationEmoji, _extends3({}, {
+    invitationId
+  }, {
+    size: "sm",
+    className: "absolute inset-0 text-base"
+  })), /* @__PURE__ */ React8.createElement("svg", _extends3({}, slots.svg, {
     viewBox: `0 0 ${svgSize} ${svgSize}`,
-    className: mx2(getSize(size), (_a = slots.svg) == null ? void 0 : _a.className)
+    className: mx4(getSize3(size), (_a = slots.svg) == null ? void 0 : _a.className)
   }), [
     ...Array(nSegments)
-  ].map((_, index) => /* @__PURE__ */ React5.createElement("circle", _extends2({
+  ].map((_, index) => /* @__PURE__ */ React8.createElement("circle", _extends3({
     key: index
   }, circleProps, {
     strokeDashoffset: index * segment + baseOffset,
     className: index === 0 ? cursor === 1 ? halted ? resolvedColor : activeStrokeColor : cursor > 1 ? resolvedColor : inactiveStrokeColor : index === 1 ? cursor === 3 ? halted ? resolvedColor : activeStrokeColor : cursor > 3 ? resolvedColor : inactiveStrokeColor : cursor > 3 ? resolvedColor : inactiveStrokeColor
-  }))));
+  })))));
 };
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationListItem.tsx
-import { Copy, ProhibitInset, QrCode, X } from "@phosphor-icons/react";
+import { ProhibitInset, QrCode, X } from "@phosphor-icons/react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { QRCodeSVG } from "qrcode.react";
-import React6, { useCallback } from "react";
+import React9, { useCallback as useCallback2 } from "react";
 import { useInvitationStatus } from "@dxos/react-client";
-import { Button, getSize as getSize2, mx as mx3, useId, useTranslation as useTranslation2 } from "@dxos/react-components";
-function _extends3() {
-  _extends3 = Object.assign || function(target) {
+import { Button as Button2, getSize as getSize4, mx as mx5, useId, useTranslation as useTranslation3 } from "@dxos/react-components";
+function _extends4() {
+  _extends4 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -268,103 +361,90 @@ function _extends3() {
     }
     return target;
   };
-  return _extends3.apply(this, arguments);
+  return _extends4.apply(this, arguments);
 }
 var InvitationListItem = ({ invitation, value, onClickRemove, createInvitationUrl }) => {
-  var _a;
-  const { t } = useTranslation2("os");
+  var _a, _b;
+  const { t } = useTranslation3("os");
   const qrLabel = useId("qrLabel");
   const { cancel, status, haltedAt, invitationCode, authenticationCode } = useInvitationStatus(invitation);
   const statusValue = (_a = invitationStatusValue.get(status)) != null ? _a : 0;
   const isCancellable = statusValue < 4 && statusValue >= 0;
   const showShare = statusValue < 3 && statusValue >= 0;
   const showAuthCode = statusValue === 3;
-  const handleClickRemove = useCallback(() => onClickRemove(invitation), [
+  const handleClickRemove = useCallback2(() => onClickRemove(invitation), [
     invitation,
     onClickRemove
   ]);
   const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
-  const handleClickCopy = useCallback(() => {
-    if (invitationUrl) {
-      void navigator.clipboard.writeText(invitationUrl);
-    }
-  }, [
-    invitationUrl
-  ]);
-  return /* @__PURE__ */ React6.createElement(AccordionPrimitive.Item, {
+  return /* @__PURE__ */ React9.createElement(AccordionPrimitive.Item, {
     value
-  }, /* @__PURE__ */ React6.createElement(AccordionPrimitive.Header, {
+  }, /* @__PURE__ */ React9.createElement(AccordionPrimitive.Header, {
     className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ React6.createElement(InvitationStatusAvatar, _extends3({}, {
+  }, /* @__PURE__ */ React9.createElement(InvitationStatusAvatar, _extends4({}, {
     status,
     haltedAt,
-    size: 8
-  })), showShare && invitationUrl ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(AccordionPrimitive.Trigger, {
+    size: 8,
+    invitationId: (_b = invitation == null ? void 0 : invitation.invitation) == null ? void 0 : _b.invitationId
+  })), showShare && invitationUrl ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(AccordionPrimitive.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React6.createElement(Button, {
+  }, /* @__PURE__ */ React9.createElement(Button2, {
     className: "grow flex gap-1",
     "data-testid": "show-qrcode"
-  }, /* @__PURE__ */ React6.createElement("span", null, t("open share panel label")), /* @__PURE__ */ React6.createElement(QrCode, {
-    className: getSize2(4),
-    weight: "bold"
-  }))), /* @__PURE__ */ React6.createElement(Button, {
-    className: "flex gap-1",
-    onClick: handleClickCopy,
-    "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React6.createElement("span", {
-    className: "pli-1"
-  }, t("copy invitation code label")), /* @__PURE__ */ React6.createElement(Copy, {
-    className: getSize2(4),
+  }, /* @__PURE__ */ React9.createElement("span", null, t("open share panel label")), /* @__PURE__ */ React9.createElement(QrCode, {
+    className: getSize4(4),
     weight: "bold"
-  }))) : showAuthCode ? /* @__PURE__ */ React6.createElement("p", {
+  }))), /* @__PURE__ */ React9.createElement(CopyButton, {
+    value: invitationUrl
+  })) : showAuthCode ? /* @__PURE__ */ React9.createElement("p", {
     className: "grow text-xl text-center text-success-500 dark:text-success-300 font-mono"
-  }, authenticationCode) : /* @__PURE__ */ React6.createElement("span", {
+  }, authenticationCode) : /* @__PURE__ */ React9.createElement("span", {
     role: "none",
     className: "grow"
-  }), isCancellable ? /* @__PURE__ */ React6.createElement(Button, {
+  }), isCancellable ? /* @__PURE__ */ React9.createElement(Button2, {
     variant: "ghost",
     className: "flex gap-1",
     onClick: cancel,
     "data-testid": "cancel-invitation"
-  }, /* @__PURE__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React9.createElement("span", {
     className: "sr-only"
-  }, t("cancel invitation label")), /* @__PURE__ */ React6.createElement(ProhibitInset, {
-    className: getSize2(4),
+  }, t("cancel invitation label")), /* @__PURE__ */ React9.createElement(ProhibitInset, {
+    className: getSize4(4),
     weight: "bold"
-  })) : /* @__PURE__ */ React6.createElement(Button, {
+  })) : /* @__PURE__ */ React9.createElement(Button2, {
     variant: "ghost",
     className: "flex gap-1",
     onClick: handleClickRemove,
     "data-testid": "remove-invitation"
-  }, /* @__PURE__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React9.createElement("span", {
     className: "sr-only"
-  }, t("remove invitation label")), /* @__PURE__ */ React6.createElement(X, {
-    className: getSize2(4),
+  }, t("remove invitation label")), /* @__PURE__ */ React9.createElement(X, {
+    className: getSize4(4),
     weight: "bold"
-  }))), showShare && invitationUrl && /* @__PURE__ */ React6.createElement(AccordionPrimitive.Content, {
+  }))), showShare && invitationUrl && /* @__PURE__ */ React9.createElement(AccordionPrimitive.Content, {
     className: "flex gap-2 is-full radix-state-open:p-1 items-center"
-  }, /* @__PURE__ */ React6.createElement(QRCodeSVG, {
+  }, /* @__PURE__ */ React9.createElement(QRCodeSVG, {
     bgColor: "transparent",
     fgColor: "currentColor",
     value: invitationUrl,
-    className: mx3("grow-[2] aspect-square is-24 bs-auto"),
+    className: mx5("grow-[2] aspect-square is-24 bs-auto"),
     "aria-labelledby": qrLabel
-  }), /* @__PURE__ */ React6.createElement("span", {
+  }), /* @__PURE__ */ React9.createElement("span", {
     className: "pli-1 flex-1 font-system-normal text-sm text-center",
     id: qrLabel
   }, t("qr label"))));
 };
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationListContainer.tsx
-import React8, { useCallback as useCallback2 } from "react";
+import React11, { useCallback as useCallback3 } from "react";
 import { useSpace, useSpaceInvitations } from "@dxos/react-client";
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationList.tsx
 import { Root as AccordionRoot } from "@radix-ui/react-accordion";
-import React7 from "react";
-import { defaultDescription, DensityProvider, mx as mx4, useTranslation as useTranslation3 } from "@dxos/react-components";
-function _extends4() {
-  _extends4 = Object.assign || function(target) {
+import React10 from "react";
+import { defaultDescription, DensityProvider, mx as mx6, useTranslation as useTranslation4 } from "@dxos/react-components";
+function _extends5() {
+  _extends5 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -375,32 +455,32 @@ function _extends4() {
     }
     return target;
   };
-  return _extends4.apply(this, arguments);
+  return _extends5.apply(this, arguments);
 }
 var InvitationList = ({ invitations, ...invitationProps }) => {
-  const { t } = useTranslation3("os");
-  return invitations.length ? /* @__PURE__ */ React7.createElement(AccordionRoot, {
+  const { t } = useTranslation4("os");
+  return invitations.length ? /* @__PURE__ */ React10.createElement(AccordionRoot, {
     type: "single",
     collapsible: true,
     className: "flex flex-col gap-1"
-  }, /* @__PURE__ */ React7.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React10.createElement(DensityProvider, {
     density: "fine"
-  }, invitations.map((invitation, index) => {
+  }, /* @__PURE__ */ React10.createElement(ClipboardProvider, null, invitations.map((invitation, index) => {
     var _a, _b;
     const value = (_b = (_a = invitation.invitation) == null ? void 0 : _a.invitationId) != null ? _b : `inv_${index}`;
-    return /* @__PURE__ */ React7.createElement(InvitationListItem, _extends4({
+    return /* @__PURE__ */ React10.createElement(InvitationListItem, _extends5({
       key: value,
       value,
       invitation
     }, invitationProps));
-  }))) : /* @__PURE__ */ React7.createElement("p", {
-    className: mx4(defaultDescription, "text-center p-2")
+  })))) : /* @__PURE__ */ React10.createElement("p", {
+    className: mx6(defaultDescription, "text-center p-2")
   }, t("empty invitations message"));
 };
 
 // packages/apps/patterns/react-ui/src/components/InvitationList/InvitationListContainer.tsx
-function _extends5() {
-  _extends5 = Object.assign || function(target) {
+function _extends6() {
+  _extends6 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -411,17 +491,17 @@ function _extends5() {
     }
     return target;
   };
-  return _extends5.apply(this, arguments);
+  return _extends6.apply(this, arguments);
 }
 var InvitationListContainer = ({ spaceKey, createInvitationUrl }) => {
   const space = useSpace(spaceKey);
   const invitations = useSpaceInvitations(spaceKey);
-  const onClickRemove = useCallback2(({ invitation }) => {
+  const onClickRemove = useCallback3(({ invitation }) => {
     (invitation == null ? void 0 : invitation.invitationId) && (space == null ? void 0 : space.removeInvitation(invitation.invitationId));
   }, [
     space
   ]);
-  return /* @__PURE__ */ React8.createElement(InvitationList, _extends5({
+  return /* @__PURE__ */ React11.createElement(InvitationList, _extends6({
     invitations
   }, {
     onClickRemove,
@@ -430,10 +510,10 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl }) => {
 };
 
 // packages/apps/patterns/react-ui/src/components/PanelSeparator/PanelSeparator.tsx
-import React9 from "react";
-import { mx as mx5 } from "@dxos/react-components";
-function _extends6() {
-  _extends6 = Object.assign || function(target) {
+import React12 from "react";
+import { mx as mx7 } from "@dxos/react-components";
+function _extends7() {
+  _extends7 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -444,22 +524,22 @@ function _extends6() {
     }
     return target;
   };
-  return _extends6.apply(this, arguments);
+  return _extends7.apply(this, arguments);
 }
 var PanelSeparator = ({ className, ...props }) => {
-  return /* @__PURE__ */ React9.createElement("span", _extends6({
+  return /* @__PURE__ */ React12.createElement("span", _extends7({
     role: "none"
   }, props, {
-    className: mx5("block bs-px mlb-1 bg-neutral-800/10 dark:bg-neutral-200/10", className)
+    className: mx7("block bs-px mlb-1 bg-neutral-800/10 dark:bg-neutral-200/10", className)
   }));
 };
 
 // packages/apps/patterns/react-ui/src/components/SpaceList/SpaceListItem.tsx
-import React10, { forwardRef } from "react";
-import { Avatar as Avatar2, mx as mx6 } from "@dxos/react-components";
+import React13, { forwardRef } from "react";
+import { Avatar as Avatar2, mx as mx8 } from "@dxos/react-components";
 import { humanize } from "@dxos/util";
-function _extends7() {
-  _extends7 = Object.assign || function(target) {
+function _extends8() {
+  _extends8 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -470,20 +550,20 @@ function _extends7() {
     }
     return target;
   };
-  return _extends7.apply(this, arguments);
+  return _extends8.apply(this, arguments);
 }
 var SpaceListItem = /* @__PURE__ */ forwardRef(({ space, onClick }, ref) => {
   var _a;
-  return /* @__PURE__ */ React10.createElement("li", {
-    className: mx6("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
+  return /* @__PURE__ */ React13.createElement("li", {
+    className: mx8("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
     onClick: () => onClick == null ? void 0 : onClick(),
     ref,
     "data-testid": "space-list-item"
-  }, /* @__PURE__ */ React10.createElement(Avatar2, _extends7({}, {
+  }, /* @__PURE__ */ React13.createElement(Avatar2, _extends8({}, {
     variant: "circle",
     size: 9,
     fallbackValue: space.key.toHex(),
-    label: /* @__PURE__ */ React10.createElement("p", {
+    label: /* @__PURE__ */ React13.createElement("p", {
       className: "text-sm truncate"
     }, (_a = space.properties.name) != null ? _a : humanize(space.key)),
     slots: {
@@ -498,14 +578,14 @@ var SpaceListItem = /* @__PURE__ */ forwardRef(({ space, onClick }, ref) => {
 });
 
 // packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
-import React28 from "react";
-import { Avatar as Avatar5, mx as mx21 } from "@dxos/react-components";
+import React31 from "react";
+import { Avatar as Avatar5, mx as mx23 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
-import React11 from "react";
-import { mx as mx7, Popover } from "@dxos/react-components";
-function _extends8() {
-  _extends8 = Object.assign || function(target) {
+import React14 from "react";
+import { mx as mx9, Popover } from "@dxos/react-components";
+function _extends9() {
+  _extends9 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -516,25 +596,25 @@ function _extends8() {
     }
     return target;
   };
-  return _extends8.apply(this, arguments);
+  return _extends9.apply(this, arguments);
 }
 var PanelPopover = ({ slots, children, ...popoverProps }) => {
   var _a, _b, _c;
-  return /* @__PURE__ */ React11.createElement(Popover, _extends8({
+  return /* @__PURE__ */ React14.createElement(Popover, _extends9({
     slots: {
       arrow: {
         ...slots == null ? void 0 : slots.arrow,
-        className: mx7(defaultArrow, (_a = slots == null ? void 0 : slots.arrow) == null ? void 0 : _a.className)
+        className: mx9(defaultArrow, (_a = slots == null ? void 0 : slots.arrow) == null ? void 0 : _a.className)
       },
       content: {
         collisionPadding: 8,
         sideOffset: 4,
         ...slots == null ? void 0 : slots.content,
-        className: mx7(defaultSurface, (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.className)
+        className: mx9(defaultSurface, (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.className)
       },
       trigger: {
         ...slots == null ? void 0 : slots.trigger,
-        className: mx7("", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
+        className: mx9("", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
       },
       ...slots
     }
@@ -543,10 +623,10 @@ var PanelPopover = ({ slots, children, ...popoverProps }) => {
 
 // packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React12, { createContext, useCallback as useCallback3, useContext, useState } from "react";
-import { defaultOverlay as defaultOverlay2, mx as mx8, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-components";
-function _extends9() {
-  _extends9 = Object.assign || function(target) {
+import React15, { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useState as useState2 } from "react";
+import { defaultOverlay as defaultOverlay2, mx as mx10, useMediaQuery, useTranslation as useTranslation5 } from "@dxos/react-components";
+function _extends10() {
+  _extends10 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -557,16 +637,16 @@ function _extends9() {
     }
     return target;
   };
-  return _extends9.apply(this, arguments);
+  return _extends10.apply(this, arguments);
 }
-var PanelSidebarContext = /* @__PURE__ */ createContext({
+var PanelSidebarContext = /* @__PURE__ */ createContext2({
   displayState: "hide",
   setDisplayState: () => {
   }
 });
 var useTogglePanelSidebar = () => {
-  const { displayState, setDisplayState } = useContext(PanelSidebarContext);
-  return useCallback3(() => {
+  const { displayState, setDisplayState } = useContext2(PanelSidebarContext);
+  return useCallback4(() => {
     setDisplayState(displayState === "hide" ? "show" : "hide");
   }, [
     displayState
@@ -574,14 +654,14 @@ var useTogglePanelSidebar = () => {
 };
 var PanelSidebarProvider = ({ children, slots }) => {
   var _a, _b, _c;
-  const { t } = useTranslation4("os");
+  const { t } = useTranslation5("os");
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const [displayState, setInternalDisplayState] = useState(isLg ? "show" : "hide");
+  const [displayState, setInternalDisplayState] = useState2(isLg ? "show" : "hide");
   const isOpen = displayState === "show";
-  const [transitionShow, setTransitionShow] = useState(isOpen);
-  const [domShow, setDomShow] = useState(isOpen);
+  const [transitionShow, setTransitionShow] = useState2(isOpen);
+  const [domShow, setDomShow] = useState2(isOpen);
   const internalHide = () => {
     setTransitionShow(false);
     setInternalDisplayState("hide");
@@ -597,37 +677,37 @@ var PanelSidebarProvider = ({ children, slots }) => {
     }, 0);
   };
   const setDisplayState = (displayState2) => displayState2 === "show" ? internalShow() : internalHide();
-  return /* @__PURE__ */ React12.createElement(PanelSidebarContext.Provider, {
+  return /* @__PURE__ */ React15.createElement(PanelSidebarContext.Provider, {
     value: {
       setDisplayState,
       displayState
     }
-  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Root, {
+  }, /* @__PURE__ */ React15.createElement(DialogPrimitive.Root, {
     open: domShow,
     modal: !isLg
-  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Content, _extends9({
+  }, /* @__PURE__ */ React15.createElement(DialogPrimitive.Content, _extends10({
     onOpenAutoFocus: (event) => isLg && event.preventDefault(),
     onCloseAutoFocus: (event) => isLg && event.preventDefault()
   }, slots == null ? void 0 : slots.content, {
-    className: mx8("fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto", "transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-0" : "-inline-start-sidebar", (_a = slots == null ? void 0 : slots.content) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React12.createElement(DialogPrimitive.Title, {
+    className: mx10("fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto", "transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-0" : "-inline-start-sidebar", (_a = slots == null ? void 0 : slots.content) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React15.createElement(DialogPrimitive.Title, {
     className: "sr-only"
-  }, t("sidebar label")), (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.children), !isLg && /* @__PURE__ */ React12.createElement(DialogPrimitive.Overlay, {
-    className: mx8(defaultOverlay2, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
+  }, t("sidebar label")), (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.children), !isLg && /* @__PURE__ */ React15.createElement(DialogPrimitive.Overlay, {
+    className: mx10(defaultOverlay2, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
     onClick: internalHide
-  }), /* @__PURE__ */ React12.createElement("div", _extends9({
+  }), /* @__PURE__ */ React15.createElement("div", _extends10({
     role: "none"
   }, slots == null ? void 0 : slots.main, {
-    className: mx8("transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-sidebar" : "pis-0", (_c = slots == null ? void 0 : slots.main) == null ? void 0 : _c.className)
+    className: mx10("transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-sidebar" : "pis-0", (_c = slots == null ? void 0 : slots.main) == null ? void 0 : _c.className)
   }), children)));
 };
 
 // packages/apps/patterns/react-ui/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
-import React13 from "react";
-import { mx as mx9 } from "@dxos/react-components";
-function _extends10() {
-  _extends10 = Object.assign || function(target) {
+import React16 from "react";
+import { mx as mx11 } from "@dxos/react-components";
+function _extends11() {
+  _extends11 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -638,28 +718,28 @@ function _extends10() {
     }
     return target;
   };
-  return _extends10.apply(this, arguments);
+  return _extends11.apply(this, arguments);
 }
 var PanelAlertDialog = ({ titleId, slots = {}, children }) => {
   var _a, _b;
-  return /* @__PURE__ */ React13.createElement(AlertDialog.Root, _extends10({
+  return /* @__PURE__ */ React16.createElement(AlertDialog.Root, _extends11({
     defaultOpen: true
-  }, slots.root), slots.trigger && /* @__PURE__ */ React13.createElement(AlertDialog.Trigger, _extends10({}, slots.trigger)), /* @__PURE__ */ React13.createElement(AlertDialog.Overlay, _extends10({}, slots.overlay, {
-    className: mx9(defaultOverlay, "z-40", (_a = slots.overlay) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React13.createElement(AlertDialog.Content, _extends10({
+  }, slots.root), slots.trigger && /* @__PURE__ */ React16.createElement(AlertDialog.Trigger, _extends11({}, slots.trigger)), /* @__PURE__ */ React16.createElement(AlertDialog.Overlay, _extends11({}, slots.overlay, {
+    className: mx11(defaultOverlay, "z-40", (_a = slots.overlay) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React16.createElement(AlertDialog.Content, _extends11({
     onEscapeKeyDown: (event) => event.preventDefault()
   }, slots.content, {
     "aria-labelledby": titleId,
-    className: mx9(defaultDialogContent, (_b = slots.content) == null ? void 0 : _b.className)
+    className: mx11(defaultDialogContent, (_b = slots.content) == null ? void 0 : _b.className)
   }), children)));
 };
 
 // packages/apps/patterns/react-ui/src/layouts/PanelDialog/PanelDialog.tsx
 import * as Dialog from "@radix-ui/react-dialog";
-import React14 from "react";
-import { mx as mx10 } from "@dxos/react-components";
-function _extends11() {
-  _extends11 = Object.assign || function(target) {
+import React17 from "react";
+import { mx as mx12 } from "@dxos/react-components";
+function _extends12() {
+  _extends12 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -670,30 +750,30 @@ function _extends11() {
     }
     return target;
   };
-  return _extends11.apply(this, arguments);
+  return _extends12.apply(this, arguments);
 }
 var PanelDialog = ({ titleId, slots = {}, children }) => {
   var _a, _b;
-  return /* @__PURE__ */ React14.createElement(Dialog.Root, _extends11({
+  return /* @__PURE__ */ React17.createElement(Dialog.Root, _extends12({
     defaultOpen: true
-  }, slots.root), slots.trigger && /* @__PURE__ */ React14.createElement(Dialog.Trigger, _extends11({}, slots.trigger)), /* @__PURE__ */ React14.createElement(Dialog.Overlay, _extends11({}, slots.overlay, {
-    className: mx10(defaultOverlay, "z-40", (_a = slots.overlay) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React14.createElement(Dialog.Content, _extends11({
+  }, slots.root), slots.trigger && /* @__PURE__ */ React17.createElement(Dialog.Trigger, _extends12({}, slots.trigger)), /* @__PURE__ */ React17.createElement(Dialog.Overlay, _extends12({}, slots.overlay, {
+    className: mx12(defaultOverlay, "z-40", (_a = slots.overlay) == null ? void 0 : _a.className)
+  }), /* @__PURE__ */ React17.createElement(Dialog.Content, _extends12({
     onOpenAutoFocus: (event) => event.preventDefault(),
     onCloseAutoFocus: (event) => event.preventDefault()
   }, slots.content, {
     "aria-labelledby": titleId,
-    className: mx10(defaultDialogContent, (_b = slots.content) == null ? void 0 : _b.className)
+    className: mx12(defaultDialogContent, (_b = slots.content) == null ? void 0 : _b.className)
   }), children)));
 };
 
 // packages/apps/patterns/react-ui/src/panels/DevicesPanel/DevicesPanel.tsx
 import { UserPlus, X as X2 } from "@phosphor-icons/react";
-import React15, { cloneElement, useReducer } from "react";
+import React18, { cloneElement, useReducer } from "react";
 import { useClient as useClient2, useDevices, useHaloInvitations, useIdentity } from "@dxos/react-client";
-import { Button as Button2, DensityProvider as DensityProvider2, getSize as getSize3, mx as mx11, TooltipContent, TooltipRoot, TooltipTrigger, useTranslation as useTranslation5 } from "@dxos/react-components";
-function _extends12() {
-  _extends12 = Object.assign || function(target) {
+import { Button as Button3, DensityProvider as DensityProvider2, getSize as getSize5, mx as mx13, TooltipContent, TooltipRoot, TooltipTrigger, useTranslation as useTranslation6 } from "@dxos/react-components";
+function _extends13() {
+  _extends13 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -704,11 +784,11 @@ function _extends12() {
     }
     return target;
   };
-  return _extends12.apply(this, arguments);
+  return _extends13.apply(this, arguments);
 }
 var DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }) => {
   var _a;
-  const { t } = useTranslation5("os");
+  const { t } = useTranslation6("os");
   const client = useClient2();
   const identity = useIdentity();
   const devices = useDevices();
@@ -717,42 +797,42 @@ var DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }
   if (!identity) {
     return null;
   }
-  const doneButton = /* @__PURE__ */ React15.createElement(Button2, {
+  const doneButton = /* @__PURE__ */ React18.createElement(Button3, {
     variant: "ghost",
     onClick: () => onDone == null ? void 0 : onDone(),
     "data-testid": "show-all-spaces"
-  }, /* @__PURE__ */ React15.createElement(X2, {
-    className: getSize3(4),
+  }, /* @__PURE__ */ React18.createElement(X2, {
+    className: getSize5(4),
     weight: "bold"
   }));
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     role: "none",
     className: "flex flex-col"
-  }, /* @__PURE__ */ React15.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     role: "none",
-    className: mx11(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
-  }, /* @__PURE__ */ React15.createElement("h2", {
+    className: mx13(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
+  }, /* @__PURE__ */ React18.createElement("h2", {
     id: titleId,
-    className: mx11("grow font-system-medium", !displayName && "font-mono")
-  }, displayName != null ? displayName : identity.identityKey.truncate()), /* @__PURE__ */ React15.createElement(TooltipRoot, null, /* @__PURE__ */ React15.createElement(TooltipContent, {
+    className: mx13("grow font-system-medium", !displayName && "font-mono")
+  }, displayName != null ? displayName : identity.identityKey.truncate()), /* @__PURE__ */ React18.createElement(TooltipRoot, null, /* @__PURE__ */ React18.createElement(TooltipContent, {
     className: "z-50"
-  }, t("close label")), /* @__PURE__ */ React15.createElement(TooltipTrigger, {
+  }, t("close label")), /* @__PURE__ */ React18.createElement(TooltipTrigger, {
     asChild: true
-  }, doneActionParent ? /* @__PURE__ */ cloneElement(doneActionParent, {}, doneButton) : doneButton))), /* @__PURE__ */ React15.createElement("div", {
+  }, doneActionParent ? /* @__PURE__ */ cloneElement(doneActionParent, {}, doneButton) : doneButton))), /* @__PURE__ */ React18.createElement("div", {
     role: "region",
-    className: mx11(defaultSurface, "rounded-be-md p-2")
-  }, /* @__PURE__ */ React15.createElement(InvitationList, {
+    className: mx13(defaultSurface, "rounded-be-md p-2")
+  }, /* @__PURE__ */ React18.createElement(InvitationList, {
     invitations,
     onClickRemove: ({ invitation }) => invitation && client.halo.removeInvitation(invitation.invitationId),
     createInvitationUrl
-  }), /* @__PURE__ */ React15.createElement(Button2, {
+  }), /* @__PURE__ */ React18.createElement(Button3, {
     className: "is-full flex gap-2 mbs-2",
     onClick: () => client.halo.createInvitation(),
     "data-testid": "devices-panel.create-invitation"
-  }, /* @__PURE__ */ React15.createElement("span", null, t("create device invitation label")), /* @__PURE__ */ React15.createElement(UserPlus, {
-    className: getSize3(4),
+  }, /* @__PURE__ */ React18.createElement("span", null, t("create device invitation label")), /* @__PURE__ */ React18.createElement(UserPlus, {
+    className: getSize5(4),
     weight: "bold"
-  })), /* @__PURE__ */ React15.createElement(PanelSeparator, null), /* @__PURE__ */ React15.createElement(DeviceList, {
+  })), /* @__PURE__ */ React18.createElement(PanelSeparator, null), /* @__PURE__ */ React18.createElement(DeviceList, {
     devices
   })));
 };
@@ -769,56 +849,58 @@ var DevicesPanel = (props) => {
   const [panelState] = useReducer(reducer, {
     activeView: "device list"
   });
-  return /* @__PURE__ */ React15.createElement(DensityProvider2, {
+  return /* @__PURE__ */ React18.createElement(DensityProvider2, {
     density: "fine"
-  }, panelState.activeView === "device list" ? /* @__PURE__ */ React15.createElement(DeviceListView, _extends12({}, props)) : null);
+  }, panelState.activeView === "device list" ? /* @__PURE__ */ React18.createElement(DeviceListView, _extends13({}, props)) : null);
 };
 
 // packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx
-import React16 from "react";
+import React19 from "react";
 import { useClient as useClient3 } from "@dxos/react-client";
-import { Avatar as Avatar3, Button as Button3, DensityProvider as DensityProvider3, ThemeContext, useTranslation as useTranslation6 } from "@dxos/react-components";
+import { Avatar as Avatar3, Button as Button4, DensityProvider as DensityProvider3, ThemeContext, useThemeContext, useTranslation as useTranslation7 } from "@dxos/react-components";
 var IdentityPanel = ({ identity, onClickManageProfile }) => {
   var _a, _b;
-  const { t } = useTranslation6("os");
+  const { t } = useTranslation7("os");
   const client = useClient3();
+  const themeContextValue = useThemeContext();
   const defaultManageProfile = () => {
     const remoteSource = new URL((client == null ? void 0 : client.config.get("runtime.client.remoteSource")) || "https://halo.dxos.org");
     const tab = window.open(remoteSource.origin, "_blank");
     tab == null ? void 0 : tab.focus();
   };
-  return /* @__PURE__ */ React16.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React19.createElement(ThemeContext.Provider, {
     value: {
+      ...themeContextValue,
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React16.createElement(DensityProvider3, {
+  }, /* @__PURE__ */ React19.createElement(DensityProvider3, {
     density: "fine"
-  }, /* @__PURE__ */ React16.createElement("div", {
+  }, /* @__PURE__ */ React19.createElement("div", {
     className: "flex flex-col gap-2 justify-center items-center"
-  }, /* @__PURE__ */ React16.createElement(Avatar3, {
+  }, /* @__PURE__ */ React19.createElement(Avatar3, {
     size: 16,
     variant: "circle",
     fallbackValue: identity.identityKey.toHex(),
     label: (_b = (_a = identity.profile) == null ? void 0 : _a.displayName) != null ? _b : ""
-  }), /* @__PURE__ */ React16.createElement(Button3, {
+  }), /* @__PURE__ */ React19.createElement(Button4, {
     onClick: onClickManageProfile != null ? onClickManageProfile : defaultManageProfile,
     className: "is-full"
   }, t("manage profile label")))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
-import React26, { useEffect as useEffect2 } from "react";
+import React29, { useEffect as useEffect2 } from "react";
 import { log as log2 } from "@dxos/log";
 import { useClient as useClient5, useIdentity as useIdentity2 } from "@dxos/react-client";
-import { DensityProvider as DensityProvider4, useId as useId4 } from "@dxos/react-components";
+import { DensityProvider as DensityProvider4, useId as useId4, useThemeContext as useThemeContext2 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinHeading.tsx
 import { X as X3 } from "@phosphor-icons/react";
-import React17, { cloneElement as cloneElement2, forwardRef as forwardRef2 } from "react";
+import React20, { cloneElement as cloneElement2, forwardRef as forwardRef2 } from "react";
 import { useSpace as useSpace2 } from "@dxos/react-client";
-import { Button as Button4, defaultDescription as defaultDescription2, getSize as getSize4, Heading, mx as mx12, useId as useId2, useTranslation as useTranslation7 } from "@dxos/react-components";
-function _extends13() {
-  _extends13 = Object.assign || function(target) {
+import { Button as Button5, defaultDescription as defaultDescription2, getSize as getSize6, Heading, mx as mx14, useId as useId2, useTranslation as useTranslation8 } from "@dxos/react-components";
+function _extends14() {
+  _extends14 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -829,51 +911,49 @@ function _extends13() {
     }
     return target;
   };
-  return _extends13.apply(this, arguments);
+  return _extends14.apply(this, arguments);
 }
 var JoinHeading = /* @__PURE__ */ forwardRef2(({ mode, titleId, joinState, onExit, exitActionParent, preventExit }, ref) => {
   var _a, _b;
-  const { t } = useTranslation7("os");
+  const { t } = useTranslation8("os");
   const space = useSpace2((_a = joinState == null ? void 0 : joinState.context.space.invitation) == null ? void 0 : _a.spaceKey);
   const name = space == null ? void 0 : space.properties.name;
   const nameId = useId2(mode === "halo-only" ? "identityDisplayName" : "spaceDisplayName");
-  const invitationKey = (_b = joinState == null ? void 0 : joinState.context[mode === "halo-only" ? "halo" : "space"].invitation) == null ? void 0 : _b.invitationId;
-  const invitationEmoji = invitationKey && toEmoji(invitationKey);
-  const exitButton = /* @__PURE__ */ React17.createElement(Button4, _extends13({
+  const invitationId = (_b = joinState == null ? void 0 : joinState.context[mode === "halo-only" ? "halo" : "space"].invitation) == null ? void 0 : _b.invitationId;
+  const exitButton = /* @__PURE__ */ React20.createElement(Button5, _extends14({
     variant: "ghost"
   }, onExit && {
     onClick: onExit
   }, {
-    className: mx12(defaultDescription2, "plb-0 pli-2 absolute block-start-1.5 inline-end-2 z-[1]"),
+    className: mx14(defaultDescription2, "plb-0 pli-2 absolute block-start-1.5 inline-end-2 z-[1]"),
     "data-testid": "join-exit"
-  }), /* @__PURE__ */ React17.createElement(X3, {
+  }), /* @__PURE__ */ React20.createElement(X3, {
     weight: "bold",
-    className: getSize4(4)
-  }), /* @__PURE__ */ React17.createElement("span", {
+    className: getSize6(4)
+  }), /* @__PURE__ */ React20.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React20.createElement("div", {
     role: "none",
-    className: mx12(defaultSurface, "pbs-3 pbe-1 rounded-bs-md relative"),
+    className: mx14(defaultSurface, "pbs-3 pbe-1 rounded-bs-md relative"),
     ref
-  }, !preventExit && mode !== "halo-only" && (exitActionParent ? /* @__PURE__ */ cloneElement2(exitActionParent, {}, exitButton) : exitButton), /* @__PURE__ */ React17.createElement(Heading, {
+  }, !preventExit && mode !== "halo-only" && (exitActionParent ? /* @__PURE__ */ cloneElement2(exitActionParent, {}, exitButton) : exitButton), /* @__PURE__ */ React20.createElement(Heading, {
     level: 1,
-    className: mx12(defaultDescription2, "font-body font-system-normal text-center text-sm grow pbe-2", mode === "halo-only" && (preventExit ? "sr-only" : "opacity-0")),
+    className: mx14(defaultDescription2, "font-body font-system-normal text-center text-sm grow pbe-2", mode === "halo-only" && (preventExit ? "sr-only" : "opacity-0")),
     id: titleId
-  }, t(mode === "halo-only" ? "selecting identity heading" : "joining space heading")), /* @__PURE__ */ React17.createElement("div", {
+  }, t(mode === "halo-only" ? "selecting identity heading" : "joining space heading")), /* @__PURE__ */ React20.createElement("div", {
     role: "group",
     className: "flex items-center justify-center gap-2"
-  }, /* @__PURE__ */ React17.createElement("span", {
-    role: "none",
-    className: mx12(getSize4(12), "bg-neutral-300 dark:bg-neutral-700 rounded-full text-center text-4xl leading-[3rem]")
-  }, invitationEmoji), name && /* @__PURE__ */ React17.createElement("p", {
+  }, /* @__PURE__ */ React20.createElement(InvitationEmoji, _extends14({}, {
+    invitationId
+  })), name && /* @__PURE__ */ React20.createElement("p", {
     id: nameId
   }, name)));
 });
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/joinMachine.ts
 import { useMachine } from "@xstate/react";
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 import { assign, createMachine } from "xstate";
 import { Invitation as Invitation4, InvitationEncoder } from "@dxos/client";
 import { log } from "@dxos/log";
@@ -1255,7 +1335,7 @@ var defaultCodeFromUrl = (invitationType, text) => {
   }
 };
 var useJoinMachine = (client, options) => {
-  const redeemHaloInvitationCode = useCallback4(({ halo }) => {
+  const redeemHaloInvitationCode = useCallback5(({ halo }) => {
     if (halo.unredeemedCode) {
       const invitationObservable = client.halo.acceptInvitation(InvitationEncoder.decode(defaultCodeFromUrl("halo", halo.unredeemedCode)));
       return {
@@ -1269,7 +1349,7 @@ var useJoinMachine = (client, options) => {
   }, [
     client
   ]);
-  const redeemSpaceInvitationCode = useCallback4(({ space }) => {
+  const redeemSpaceInvitationCode = useCallback5(({ space }) => {
     if (space.unredeemedCode) {
       const invitationObservable = client.acceptInvitation(InvitationEncoder.decode(defaultCodeFromUrl("space", space.unredeemedCode)));
       return {
@@ -1299,17 +1379,17 @@ var useJoinMachine = (client, options) => {
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx
 import { CaretRight, Plus, QrCode as QrCode2, Textbox } from "@phosphor-icons/react";
-import React19 from "react";
-import { CompoundButton, getSize as getSize6, useTranslation as useTranslation9 } from "@dxos/react-components";
+import React22 from "react";
+import { CompoundButton, getSize as getSize8, useTranslation as useTranslation10 } from "@dxos/react-components";
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/ViewState.tsx
 import { CheckCircle, HourglassSimple, X as X4 } from "@phosphor-icons/react";
-import React18, { useMemo as useMemo2 } from "react";
+import React21, { useMemo as useMemo2 } from "react";
 import { Invitation as Invitation5 } from "@dxos/client";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client";
-import { mx as mx13, useTranslation as useTranslation8, useId as useId3, getSize as getSize5, strongShimmer } from "@dxos/react-components";
-function _extends14() {
-  _extends14 = Object.assign || function(target) {
+import { mx as mx15, useTranslation as useTranslation9, useId as useId3, getSize as getSize7, strongShimmer } from "@dxos/react-components";
+function _extends15() {
+  _extends15 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1320,30 +1400,30 @@ function _extends14() {
     }
     return target;
   };
-  return _extends14.apply(this, arguments);
+  return _extends15.apply(this, arguments);
 }
-var stripe = mx13("rounded-full grow", getSize5(3));
+var stripe = mx15("rounded-full grow", getSize7(3));
 var ViewStateHeading = ({ children, className, ...props }) => {
-  return /* @__PURE__ */ React18.createElement("h2", _extends14({}, props, {
-    className: mx13("font-system-normal text-sm mbe-1 mli-1 text-center", className)
+  return /* @__PURE__ */ React21.createElement("h2", _extends15({}, props, {
+    className: mx15("font-system-normal text-sm mbe-1 mli-1 text-center", className)
   }), children);
 };
 var ViewState = ({ active, children, className, joinSend, joinState, ...props }) => {
-  return /* @__PURE__ */ React18.createElement("div", _extends14({
+  return /* @__PURE__ */ React21.createElement("div", _extends15({
     role: "none"
   }, props, !active && {
     "aria-hidden": true
   }, {
-    className: mx13("is-[50%] flex flex-col", active ? "order-2" : "order-4", className)
-  }), /* @__PURE__ */ React18.createElement("div", {
+    className: mx15("is-[50%] flex flex-col", active ? "order-2" : "order-4", className)
+  }), /* @__PURE__ */ React21.createElement("div", {
     role: "region",
-    className: mx13(defaultSurface, "rounded-be-md grow shrink-0 flex flex-col gap-1 p-4 pbs-1")
+    className: mx15(defaultSurface, "rounded-be-md grow shrink-0 flex flex-col gap-1 p-4 pbs-1")
   }, children));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx
-function _extends15() {
-  _extends15 = Object.assign || function(target) {
+function _extends16() {
+  _extends16 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1354,16 +1434,16 @@ function _extends15() {
     }
     return target;
   };
-  return _extends15.apply(this, arguments);
+  return _extends16.apply(this, arguments);
 }
 var AdditionMethodSelector = (viewStateProps) => {
   const disabled = !viewStateProps.active;
   const { joinSend } = viewStateProps;
-  const { t } = useTranslation9("os");
+  const { t } = useTranslation10("os");
   const sharedButtonProps = {
     disabled,
-    after: /* @__PURE__ */ React19.createElement(CaretRight, {
-      className: getSize6(4),
+    after: /* @__PURE__ */ React22.createElement(CaretRight, {
+      className: getSize8(4),
       weight: "bold"
     }),
     slots: {
@@ -1372,34 +1452,34 @@ var AdditionMethodSelector = (viewStateProps) => {
       }
     }
   };
-  return /* @__PURE__ */ React19.createElement(ViewState, _extends15({}, viewStateProps), /* @__PURE__ */ React19.createElement(ViewStateHeading, null, t("addition method selector title")), /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React22.createElement(ViewState, _extends16({}, viewStateProps), /* @__PURE__ */ React22.createElement(ViewStateHeading, null, t("addition method selector title")), /* @__PURE__ */ React22.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1 grow"
-  }, /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
+  }, /* @__PURE__ */ React22.createElement(CompoundButton, _extends16({}, sharedButtonProps, {
     description: t("create identity description"),
-    before: /* @__PURE__ */ React19.createElement(Plus, {
-      className: getSize6(6)
+    before: /* @__PURE__ */ React22.createElement(Plus, {
+      className: getSize8(6)
     }),
     onClick: () => joinSend({
       type: "createIdentity"
     }),
     "data-autofocus": "choosingAuthMethod",
     "data-testid": "create-identity"
-  }), t("create identity label")), /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
+  }), t("create identity label")), /* @__PURE__ */ React22.createElement(CompoundButton, _extends16({}, sharedButtonProps, {
     description: t("join identity description"),
-    before: /* @__PURE__ */ React19.createElement(QrCode2, {
-      className: getSize6(6)
+    before: /* @__PURE__ */ React22.createElement(QrCode2, {
+      className: getSize8(6)
     }),
     onClick: () => joinSend({
       type: "acceptHaloInvitation"
     }),
     "data-testid": "join-identity"
-  }), t("join identity label")), /* @__PURE__ */ React19.createElement(CompoundButton, _extends15({}, sharedButtonProps, {
+  }), t("join identity label")), /* @__PURE__ */ React22.createElement(CompoundButton, _extends16({}, sharedButtonProps, {
     // TODO(mykola): Implement recover.
     disabled: true,
     description: t("recover identity description"),
-    before: /* @__PURE__ */ React19.createElement(Textbox, {
-      className: getSize6(6)
+    before: /* @__PURE__ */ React22.createElement(Textbox, {
+      className: getSize8(6)
     }),
     onClick: () => joinSend({
       type: "recoverIdentity"
@@ -1409,11 +1489,11 @@ var AdditionMethodSelector = (viewStateProps) => {
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityAdded.tsx
-import { CaretLeft, CaretRight as CaretRight2, Check } from "@phosphor-icons/react";
-import React20, { cloneElement as cloneElement3 } from "react";
-import { Avatar as Avatar4, Button as Button5, getSize as getSize7, mx as mx14, useTranslation as useTranslation10 } from "@dxos/react-components";
-function _extends16() {
-  _extends16 = Object.assign || function(target) {
+import { CaretLeft, CaretRight as CaretRight2, Check as Check2 } from "@phosphor-icons/react";
+import React23, { cloneElement as cloneElement3 } from "react";
+import { Avatar as Avatar4, Button as Button6, getSize as getSize9, mx as mx16, useTranslation as useTranslation11 } from "@dxos/react-components";
+function _extends17() {
+  _extends17 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1424,25 +1504,25 @@ function _extends16() {
     }
     return target;
   };
-  return _extends16.apply(this, arguments);
+  return _extends17.apply(this, arguments);
 }
 var Done = ({ onDone, doneActionParent, active }) => {
   const disabled = !active;
-  const { t } = useTranslation10("os");
-  const doneButton = /* @__PURE__ */ React20.createElement(Button5, _extends16({}, onDone && {
+  const { t } = useTranslation11("os");
+  const doneButton = /* @__PURE__ */ React23.createElement(Button6, _extends17({}, onDone && {
     onClick: () => onDone(null)
   }, {
     disabled,
     className: "grow flex items-center gap-2 pli-2",
     "data-autofocus": "confirmingAddedIdentity",
     "data-testid": "identity-added-done"
-  }), /* @__PURE__ */ React20.createElement(CaretLeft, {
+  }), /* @__PURE__ */ React23.createElement(CaretLeft, {
     weight: "bold",
-    className: mx14(getSize7(2), "invisible")
-  }), /* @__PURE__ */ React20.createElement("span", {
+    className: mx16(getSize9(2), "invisible")
+  }), /* @__PURE__ */ React23.createElement("span", {
     className: "grow"
-  }, t("done label")), /* @__PURE__ */ React20.createElement(Check, {
-    className: getSize7(4)
+  }, t("done label")), /* @__PURE__ */ React23.createElement(Check2, {
+    className: getSize9(4)
   }));
   return doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, doneButton) : doneButton;
 };
@@ -1450,24 +1530,24 @@ var IdentityAdded = ({ mode, addedIdentity, onDone, doneActionParent, ...viewSta
   var _a, _b, _c, _d, _e;
   const disabled = !viewStateProps.active;
   const { joinSend } = viewStateProps;
-  const { t } = useTranslation10("os");
-  return /* @__PURE__ */ React20.createElement(ViewState, _extends16({}, viewStateProps), /* @__PURE__ */ React20.createElement(ViewStateHeading, null, t("identity added label")), /* @__PURE__ */ React20.createElement("div", {
+  const { t } = useTranslation11("os");
+  return /* @__PURE__ */ React23.createElement(ViewState, _extends17({}, viewStateProps), /* @__PURE__ */ React23.createElement(ViewStateHeading, null, t("identity added label")), /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
-  }, /* @__PURE__ */ React20.createElement(Avatar4, {
+  }, /* @__PURE__ */ React23.createElement(Avatar4, {
     size: 20,
     fallbackValue: (_a = addedIdentity == null ? void 0 : addedIdentity.identityKey.toHex()) != null ? _a : "",
-    label: /* @__PURE__ */ React20.createElement("p", {
-      className: mx14("text-lg", !((_b = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _b.displayName) && "font-mono")
+    label: /* @__PURE__ */ React23.createElement("p", {
+      className: mx16("text-lg", !((_b = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _b.displayName) && "font-mono")
     }, (_e = (_d = (_c = addedIdentity == null ? void 0 : addedIdentity.profile) == null ? void 0 : _c.displayName) != null ? _d : addedIdentity == null ? void 0 : addedIdentity.identityKey.truncate()) != null ? _e : "\xA0"),
     variant: "circle",
     status: "active"
-  })), mode === "halo-only" ? /* @__PURE__ */ React20.createElement(Done, _extends16({
+  })), mode === "halo-only" ? /* @__PURE__ */ React23.createElement(Done, _extends17({
     onDone,
     doneActionParent
-  }, viewStateProps)) : /* @__PURE__ */ React20.createElement("div", {
+  }, viewStateProps)) : /* @__PURE__ */ React23.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React20.createElement(Button5, {
+  }, /* @__PURE__ */ React23.createElement(Button6, {
     disabled: disabled || !addedIdentity,
     className: "grow flex items-center gap-2 pli-2 order-2",
     onClick: () => addedIdentity && joinSend({
@@ -1475,33 +1555,33 @@ var IdentityAdded = ({ mode, addedIdentity, onDone, doneActionParent, ...viewSta
       identity: addedIdentity
     }),
     "data-autofocus": "confirmingAddedIdentity"
-  }, /* @__PURE__ */ React20.createElement(CaretLeft, {
+  }, /* @__PURE__ */ React23.createElement(CaretLeft, {
     weight: "bold",
-    className: mx14(getSize7(2), "invisible")
-  }), /* @__PURE__ */ React20.createElement("span", {
+    className: mx16(getSize9(2), "invisible")
+  }), /* @__PURE__ */ React23.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React20.createElement(CaretRight2, {
+  }, t("continue label")), /* @__PURE__ */ React23.createElement(CaretRight2, {
     weight: "bold",
-    className: getSize7(4)
-  })), /* @__PURE__ */ React20.createElement(Button5, {
+    className: getSize9(4)
+  })), /* @__PURE__ */ React23.createElement(Button6, {
     disabled,
     onClick: () => joinSend({
       type: "deselectAuthMethod"
     }),
     className: "flex items-center gap-2 pis-2 pie-4"
-  }, /* @__PURE__ */ React20.createElement(CaretLeft, {
+  }, /* @__PURE__ */ React23.createElement(CaretLeft, {
     weight: "bold",
-    className: getSize7(4)
-  }), /* @__PURE__ */ React20.createElement("span", null, t("deselect identity label")))));
+    className: getSize9(4)
+  }), /* @__PURE__ */ React23.createElement("span", null, t("deselect identity label")))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/IdentityInput.tsx
 import { CaretLeft as CaretLeft2, CaretRight as CaretRight3 } from "@phosphor-icons/react";
-import React21, { useState as useState2 } from "react";
+import React24, { useState as useState3 } from "react";
 import { useClient as useClient4 } from "@dxos/react-client";
-import { Button as Button6, getSize as getSize8, Input, mx as mx15, useTranslation as useTranslation11 } from "@dxos/react-components";
-function _extends17() {
-  _extends17 = Object.assign || function(target) {
+import { Button as Button7, getSize as getSize10, Input, mx as mx17, useTranslation as useTranslation12 } from "@dxos/react-components";
+function _extends18() {
+  _extends18 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1512,15 +1592,15 @@ function _extends17() {
     }
     return target;
   };
-  return _extends17.apply(this, arguments);
+  return _extends18.apply(this, arguments);
 }
 var IdentityInput = ({ method, ...viewStateProps }) => {
   const disabled = !viewStateProps.active;
   const { joinSend } = viewStateProps;
-  const { t } = useTranslation11("os");
-  const [inputValue, setInputValue] = useState2("");
+  const { t } = useTranslation12("os");
+  const [inputValue, setInputValue] = useState3("");
   const client = useClient4();
-  const [validationMessage, setValidationMessage] = useState2("");
+  const [validationMessage, setValidationMessage] = useState3("");
   const isRecover = method === "recover identity";
   const handleNext = () => {
     void client.halo.createIdentity({
@@ -1534,9 +1614,9 @@ var IdentityInput = ({ method, ...viewStateProps }) => {
       setValidationMessage(t(isRecover ? "failed to recover identity message" : "failed to create identity message"));
     });
   };
-  return /* @__PURE__ */ React21.createElement(ViewState, _extends17({}, viewStateProps), /* @__PURE__ */ React21.createElement(Input, _extends17({
+  return /* @__PURE__ */ React24.createElement(ViewState, _extends18({}, viewStateProps), /* @__PURE__ */ React24.createElement(Input, _extends18({
     disabled,
-    label: /* @__PURE__ */ React21.createElement(ViewStateHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React24.createElement(ViewStateHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
     onChange: ({ target: { value } }) => setInputValue(value),
     slots: {
       root: {
@@ -1552,44 +1632,44 @@ var IdentityInput = ({ method, ...viewStateProps }) => {
     validationMessage
   }, {
     "data-testid": "identity-input"
-  })), /* @__PURE__ */ React21.createElement("div", {
+  })), /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React21.createElement("div", {
+  }), /* @__PURE__ */ React24.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React21.createElement(Button6, {
+  }, /* @__PURE__ */ React24.createElement(Button7, {
     disabled,
     className: "grow flex items-center gap-2 pli-2 order-2",
     onClick: handleNext,
     "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-continue`
-  }, /* @__PURE__ */ React21.createElement(CaretLeft2, {
+  }, /* @__PURE__ */ React24.createElement(CaretLeft2, {
     weight: "bold",
-    className: mx15(getSize8(2), "invisible")
-  }), /* @__PURE__ */ React21.createElement("span", {
+    className: mx17(getSize10(2), "invisible")
+  }), /* @__PURE__ */ React24.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React21.createElement(CaretRight3, {
+  }, t("continue label")), /* @__PURE__ */ React24.createElement(CaretRight3, {
     weight: "bold",
-    className: getSize8(4)
-  })), /* @__PURE__ */ React21.createElement(Button6, {
+    className: getSize10(4)
+  })), /* @__PURE__ */ React24.createElement(Button7, {
     disabled,
     onClick: () => joinSend({
       type: "deselectAuthMethod"
     }),
     className: "flex items-center gap-2 pis-2 pie-4",
     "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
-  }, /* @__PURE__ */ React21.createElement(CaretLeft2, {
+  }, /* @__PURE__ */ React24.createElement(CaretLeft2, {
     weight: "bold",
-    className: getSize8(4)
-  }), /* @__PURE__ */ React21.createElement("span", null, t("back label")))));
+    className: getSize10(4)
+  }), /* @__PURE__ */ React24.createElement("span", null, t("back label")))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationAccepted.tsx
-import { CaretLeft as CaretLeft3, Check as Check2 } from "@phosphor-icons/react";
-import React22, { cloneElement as cloneElement4 } from "react";
+import { CaretLeft as CaretLeft3, Check as Check3 } from "@phosphor-icons/react";
+import React25, { cloneElement as cloneElement4 } from "react";
 import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client";
-import { Button as Button7, getSize as getSize9, mx as mx16, useTranslation as useTranslation12 } from "@dxos/react-components";
-function _extends18() {
-  _extends18 = Object.assign || function(target) {
+import { Button as Button8, getSize as getSize11, mx as mx18, useTranslation as useTranslation13 } from "@dxos/react-components";
+function _extends19() {
+  _extends19 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1600,36 +1680,36 @@ function _extends18() {
     }
     return target;
   };
-  return _extends18.apply(this, arguments);
+  return _extends19.apply(this, arguments);
 }
 var PureInvitationAcceptedContent = ({ onDone, result, Domain, doneActionParent, active }) => {
   const disabled = !active;
-  const { t } = useTranslation12("os");
-  const doneButton = /* @__PURE__ */ React22.createElement(Button7, _extends18({}, onDone && {
+  const { t } = useTranslation13("os");
+  const doneButton = /* @__PURE__ */ React25.createElement(Button8, _extends19({}, onDone && {
     onClick: () => onDone(result)
   }, {
     disabled,
     className: "flex items-center gap-2 pli-2",
     "data-autofocus": `success${Domain}Invitation finishingJoining${Domain}`,
     "data-testid": `${Domain.toLowerCase()}-invitation-accepted-done`
-  }), /* @__PURE__ */ React22.createElement(CaretLeft3, {
+  }), /* @__PURE__ */ React25.createElement(CaretLeft3, {
     weight: "bold",
-    className: mx16(getSize9(2), "invisible")
-  }), /* @__PURE__ */ React22.createElement("span", {
+    className: mx18(getSize11(2), "invisible")
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow"
-  }, t("done label")), /* @__PURE__ */ React22.createElement(Check2, {
-    className: getSize9(4)
+  }, t("done label")), /* @__PURE__ */ React25.createElement(Check3, {
+    className: getSize11(4)
   }));
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("p", {
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("p", {
     className: "text-center text-sm font-system-normal"
-  }, t("welcome message")), /* @__PURE__ */ React22.createElement("div", {
+  }, t("welcome message")), /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: "grow"
   }), doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, doneButton) : doneButton);
 };
 var InvitationAcceptedContent = (props) => {
   const { result } = useInvitationStatus3(props.activeInvitation);
-  return /* @__PURE__ */ React22.createElement(PureInvitationAcceptedContent, _extends18({}, props, {
+  return /* @__PURE__ */ React25.createElement(PureInvitationAcceptedContent, _extends19({}, props, {
     result
   }));
 };
@@ -1637,19 +1717,19 @@ var InvitationAccepted = (props) => {
   var _a;
   const { Domain, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
   const activeInvitation = (_a = viewStateProps.joinState) == null ? void 0 : _a.context[Domain.toLowerCase()].invitationObservable;
-  return /* @__PURE__ */ React22.createElement(ViewState, _extends18({}, viewStateProps), !activeInvitation ? /* @__PURE__ */ React22.createElement(PureInvitationAcceptedContent, _extends18({}, props, {
+  return /* @__PURE__ */ React25.createElement(ViewState, _extends19({}, viewStateProps), !activeInvitation ? /* @__PURE__ */ React25.createElement(PureInvitationAcceptedContent, _extends19({}, props, {
     result: null
-  })) : /* @__PURE__ */ React22.createElement(InvitationAcceptedContent, _extends18({}, props, {
+  })) : /* @__PURE__ */ React25.createElement(InvitationAcceptedContent, _extends19({}, props, {
     activeInvitation
   })));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationInput.tsx
 import { CaretLeft as CaretLeft4, CaretRight as CaretRight4 } from "@phosphor-icons/react";
-import React23, { useEffect, useState as useState3 } from "react";
-import { Button as Button8, getSize as getSize10, Input as Input2, mx as mx17, useTranslation as useTranslation13 } from "@dxos/react-components";
-function _extends19() {
-  _extends19 = Object.assign || function(target) {
+import React26, { useEffect, useState as useState4 } from "react";
+import { Button as Button9, getSize as getSize12, Input as Input2, mx as mx19, useTranslation as useTranslation14 } from "@dxos/react-components";
+function _extends20() {
+  _extends20 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1660,14 +1740,14 @@ function _extends19() {
     }
     return target;
   };
-  return _extends19.apply(this, arguments);
+  return _extends20.apply(this, arguments);
 }
 var InvitationInput = ({ Domain, ...viewStateProps }) => {
   const disabled = !viewStateProps.active;
   const { joinSend, joinState } = viewStateProps;
-  const { t } = useTranslation13("os");
+  const { t } = useTranslation14("os");
   const contextUnredeemedCode = joinState == null ? void 0 : joinState.context[Domain.toLowerCase()].unredeemedCode;
-  const [inputValue, setInputValue] = useState3(contextUnredeemedCode != null ? contextUnredeemedCode : "");
+  const [inputValue, setInputValue] = useState4(contextUnredeemedCode != null ? contextUnredeemedCode : "");
   useEffect(() => {
     contextUnredeemedCode && setInputValue(contextUnredeemedCode != null ? contextUnredeemedCode : "");
   }, [
@@ -1677,9 +1757,9 @@ var InvitationInput = ({ Domain, ...viewStateProps }) => {
     type: `set${Domain}InvitationCode`,
     code: inputValue
   });
-  return /* @__PURE__ */ React23.createElement(ViewState, _extends19({}, viewStateProps), /* @__PURE__ */ React23.createElement(Input2, {
+  return /* @__PURE__ */ React26.createElement(ViewState, _extends20({}, viewStateProps), /* @__PURE__ */ React26.createElement(Input2, {
     disabled,
-    label: /* @__PURE__ */ React23.createElement(ViewStateHeading, null, t("invitation input label")),
+    label: /* @__PURE__ */ React26.createElement(ViewStateHeading, null, t("invitation input label")),
     value: inputValue,
     onChange: ({ target: { value } }) => setInputValue(value),
     slots: {
@@ -1692,44 +1772,44 @@ var InvitationInput = ({ Domain, ...viewStateProps }) => {
         onKeyUp: ({ key }) => key === "Enter" && handleNext()
       }
     }
-  }), /* @__PURE__ */ React23.createElement("div", {
+  }), /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React23.createElement("div", {
+  }), /* @__PURE__ */ React26.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React23.createElement(Button8, {
+  }, /* @__PURE__ */ React26.createElement(Button9, {
     disabled,
     className: "grow flex items-center gap-2 pli-2 order-2",
     onClick: handleNext,
     "data-testid": `${Domain.toLowerCase()}-invitation-input-continue`
-  }, /* @__PURE__ */ React23.createElement(CaretLeft4, {
+  }, /* @__PURE__ */ React26.createElement(CaretLeft4, {
     weight: "bold",
-    className: mx17(getSize10(2), "invisible")
-  }), /* @__PURE__ */ React23.createElement("span", {
+    className: mx19(getSize12(2), "invisible")
+  }), /* @__PURE__ */ React26.createElement("span", {
     className: "grow"
-  }, t("continue label")), /* @__PURE__ */ React23.createElement(CaretRight4, {
+  }, t("continue label")), /* @__PURE__ */ React26.createElement(CaretRight4, {
     weight: "bold",
-    className: getSize10(4)
-  })), /* @__PURE__ */ React23.createElement(Button8, {
+    className: getSize12(4)
+  })), /* @__PURE__ */ React26.createElement(Button9, {
     disabled: Domain === "Space",
     onClick: () => joinSend({
       type: "deselectAuthMethod"
     }),
     className: "flex items-center gap-2 pis-2 pie-4",
     "data-testid": `${Domain.toLowerCase()}-invitation-input-back`
-  }, /* @__PURE__ */ React23.createElement(CaretLeft4, {
+  }, /* @__PURE__ */ React26.createElement(CaretLeft4, {
     weight: "bold",
-    className: getSize10(4)
-  }), /* @__PURE__ */ React23.createElement("span", null, t("back label")))));
+    className: getSize12(4)
+  }), /* @__PURE__ */ React26.createElement("span", null, t("back label")))));
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationRescuer.tsx
 import { ArrowsClockwise, CaretLeft as CaretLeft5, CaretRight as CaretRight5 } from "@phosphor-icons/react";
-import React24 from "react";
+import React27 from "react";
 import { Invitation as Invitation6 } from "@dxos/client";
-import { Button as Button9, defaultDescription as defaultDescription3, getSize as getSize11, mx as mx18, useTranslation as useTranslation14 } from "@dxos/react-components";
-function _extends20() {
-  _extends20 = Object.assign || function(target) {
+import { Button as Button10, defaultDescription as defaultDescription3, getSize as getSize13, mx as mx20, useTranslation as useTranslation15 } from "@dxos/react-components";
+function _extends21() {
+  _extends21 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1740,33 +1820,33 @@ function _extends20() {
     }
     return target;
   };
-  return _extends20.apply(this, arguments);
+  return _extends21.apply(this, arguments);
 }
 var InvitationActions = ({ invitationState, disabled, joinSend, joinState, Domain }) => {
-  const { t } = useTranslation14("os");
+  const { t } = useTranslation15("os");
   const invitationType = Domain.toLowerCase();
   switch (invitationState) {
     case Invitation6.State.CONNECTING:
-      return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ViewStateHeading, {
+      return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(ViewStateHeading, {
         className: defaultDescription3
-      }, t("connecting status label")), /* @__PURE__ */ React24.createElement("div", {
+      }, t("connecting status label")), /* @__PURE__ */ React27.createElement("div", {
         role: "none",
         className: "grow"
-      }), /* @__PURE__ */ React24.createElement("div", {
+      }), /* @__PURE__ */ React27.createElement("div", {
         className: "flex gap-2"
-      }, /* @__PURE__ */ React24.createElement(Button9, {
+      }, /* @__PURE__ */ React27.createElement(Button10, {
         disabled: true,
         className: "grow flex items-center gap-2 pli-2 order-2",
         "data-testid": "next"
-      }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
+      }, /* @__PURE__ */ React27.createElement(CaretLeft5, {
         weight: "bold",
-        className: mx18(getSize11(2), "invisible")
-      }), /* @__PURE__ */ React24.createElement("span", {
+        className: mx20(getSize13(2), "invisible")
+      }), /* @__PURE__ */ React27.createElement("span", {
         className: "grow"
-      }, t("next label")), /* @__PURE__ */ React24.createElement(CaretRight5, {
+      }, t("next label")), /* @__PURE__ */ React27.createElement(CaretRight5, {
         weight: "bold",
-        className: getSize11(4)
-      })), /* @__PURE__ */ React24.createElement(Button9, {
+        className: getSize13(4)
+      })), /* @__PURE__ */ React27.createElement(Button10, {
         disabled,
         className: "flex items-center gap-2 pis-2 pie-4",
         onClick: () => {
@@ -1774,33 +1854,33 @@ var InvitationActions = ({ invitationState, disabled, joinSend, joinState, Domai
           return (_a = joinState == null ? void 0 : joinState.context[invitationType].invitationObservable) == null ? void 0 : _a.cancel();
         },
         "data-testid": "invitation-rescuer-cancel"
-      }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
+      }, /* @__PURE__ */ React27.createElement(CaretLeft5, {
         weight: "bold",
-        className: getSize11(4)
-      }), /* @__PURE__ */ React24.createElement("span", null, t("cancel label")))));
+        className: getSize13(4)
+      }), /* @__PURE__ */ React27.createElement("span", null, t("cancel label")))));
     case Invitation6.State.TIMEOUT:
     case Invitation6.State.CANCELLED:
     case Invitation6.State.ERROR:
     default:
-      return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ViewStateHeading, {
+      return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(ViewStateHeading, {
         className: defaultDescription3
-      }, t(invitationState === Invitation6.State.TIMEOUT ? "timeout status label" : invitationState === Invitation6.State.CANCELLED ? "cancelled status label" : "error status label")), /* @__PURE__ */ React24.createElement("div", {
+      }, t(invitationState === Invitation6.State.TIMEOUT ? "timeout status label" : invitationState === Invitation6.State.CANCELLED ? "cancelled status label" : "error status label")), /* @__PURE__ */ React27.createElement("div", {
         role: "none",
         className: "grow"
-      }), /* @__PURE__ */ React24.createElement(Button9, {
+      }), /* @__PURE__ */ React27.createElement(Button10, {
         disabled,
         className: "flex items-center gap-2 pli-2",
         onClick: () => joinSend({
           type: `reset${Domain}Invitation`
         }),
         "data-testid": "invitation-rescuer-reset"
-      }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
+      }, /* @__PURE__ */ React27.createElement(CaretLeft5, {
         weight: "bold",
-        className: mx18(getSize11(5), "invisible")
-      }), /* @__PURE__ */ React24.createElement("span", {
+        className: mx20(getSize13(5), "invisible")
+      }), /* @__PURE__ */ React27.createElement("span", {
         className: "grow"
-      }, t("reset label")), /* @__PURE__ */ React24.createElement(ArrowsClockwise, {
-        className: getSize11(4)
+      }, t("reset label")), /* @__PURE__ */ React27.createElement(ArrowsClockwise, {
+        className: getSize13(4)
       })));
   }
 };
@@ -1809,11 +1889,11 @@ var InvitationRescuer = ({ Domain, ...viewStateProps }) => {
   const disabled = !viewStateProps.active;
   const { joinSend, joinState } = viewStateProps;
   const invitationState = (_a = joinState == null ? void 0 : joinState.context[Domain.toLowerCase()].invitation) == null ? void 0 : _a.state;
-  const { t } = useTranslation14("os");
-  return /* @__PURE__ */ React24.createElement(ViewState, _extends20({}, viewStateProps), typeof invitationState === "undefined" ? /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
+  const { t } = useTranslation15("os");
+  return /* @__PURE__ */ React27.createElement(ViewState, _extends21({}, viewStateProps), typeof invitationState === "undefined" ? /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React24.createElement(Button9, {
+  }), /* @__PURE__ */ React27.createElement(Button10, {
     disabled,
     className: "flex items-center gap-2 pli-2",
     "data-autofocus": `inputting${Domain}InvitationCode`,
@@ -1821,14 +1901,14 @@ var InvitationRescuer = ({ Domain, ...viewStateProps }) => {
     onClick: () => joinSend({
       type: `reset${Domain}Invitation`
     })
-  }, /* @__PURE__ */ React24.createElement(CaretLeft5, {
+  }, /* @__PURE__ */ React27.createElement(CaretLeft5, {
     weight: "bold",
-    className: mx18(getSize11(5), "invisible")
-  }), /* @__PURE__ */ React24.createElement("span", {
+    className: mx20(getSize13(5), "invisible")
+  }), /* @__PURE__ */ React27.createElement("span", {
     className: "grow"
-  }, t("reset label")), /* @__PURE__ */ React24.createElement(ArrowsClockwise, {
-    className: getSize11(5)
-  }))) : /* @__PURE__ */ React24.createElement(InvitationActions, _extends20({}, {
+  }, t("reset label")), /* @__PURE__ */ React27.createElement(ArrowsClockwise, {
+    className: getSize13(5)
+  }))) : /* @__PURE__ */ React27.createElement(InvitationActions, _extends21({}, {
     invitationState,
     disabled,
     joinSend,
@@ -1839,11 +1919,11 @@ var InvitationRescuer = ({ Domain, ...viewStateProps }) => {
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx
 import { CaretLeft as CaretLeft6, CaretRight as CaretRight6 } from "@phosphor-icons/react";
-import React25, { useCallback as useCallback5, useState as useState4 } from "react";
+import React28, { useCallback as useCallback6, useState as useState5 } from "react";
 import { useInvitationStatus as useInvitationStatus4 } from "@dxos/react-client";
-import { Button as Button10, getSize as getSize12, Input as Input3, mx as mx19, useTranslation as useTranslation15 } from "@dxos/react-components";
-function _extends21() {
-  _extends21 = Object.assign || function(target) {
+import { Button as Button11, getSize as getSize14, Input as Input3, mx as mx21, useTranslation as useTranslation16 } from "@dxos/react-components";
+function _extends22() {
+  _extends22 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1854,14 +1934,14 @@ function _extends21() {
     }
     return target;
   };
-  return _extends21.apply(this, arguments);
+  return _extends22.apply(this, arguments);
 }
 var pinLength = 6;
 var PureInvitationAuthenticatorContent = ({ disabled, failed, joinSend, joinState, Domain, onChange, onAuthenticate }) => {
-  const { t } = useTranslation15("os");
+  const { t } = useTranslation16("os");
   const invitationType = Domain.toLowerCase();
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Input3, _extends21({
-    label: /* @__PURE__ */ React25.createElement(ViewStateHeading, null, t("auth code input label")),
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Input3, _extends22({
+    label: /* @__PURE__ */ React28.createElement(ViewStateHeading, null, t("auth code input label")),
     size: "pin",
     length: pinLength,
     onChange,
@@ -1879,6 +1959,7 @@ var PureInvitationAuthenticatorContent = ({ disabled, failed, joinSend, joinStat
         autoComplete: "off",
         pattern: "\\d*",
         "data-autofocus": `connecting${Domain}Invitation inputting${Domain}VerificationCode authenticationFailing${Domain}VerificationCode authenticating${Domain}VerificationCode`,
+        "data-prevent-ios-autofocus": true,
         "data-testid": `${invitationType}-auth-code-input`,
         "data-1p-ignore": true
       }
@@ -1886,26 +1967,26 @@ var PureInvitationAuthenticatorContent = ({ disabled, failed, joinSend, joinStat
   }, failed && {
     validationValence: "error",
     validationMessage: t("failed to authenticate message")
-  })), /* @__PURE__ */ React25.createElement("div", {
+  })), /* @__PURE__ */ React28.createElement("div", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React25.createElement("div", {
+  }), /* @__PURE__ */ React28.createElement("div", {
     className: "flex gap-2"
-  }, /* @__PURE__ */ React25.createElement(Button10, {
+  }, /* @__PURE__ */ React28.createElement(Button11, {
     disabled,
     className: "grow flex items-center gap-2 pli-2 order-2",
     onClick: onAuthenticate,
     "data-autofocus-pinlength": invitationType,
     "data-testid": `${invitationType}-invitation-authenticator-next`
-  }, /* @__PURE__ */ React25.createElement(CaretLeft6, {
+  }, /* @__PURE__ */ React28.createElement(CaretLeft6, {
     weight: "bold",
-    className: mx19(getSize12(2), "invisible")
-  }), /* @__PURE__ */ React25.createElement("span", {
+    className: mx21(getSize14(2), "invisible")
+  }), /* @__PURE__ */ React28.createElement("span", {
     className: "grow"
-  }, t("next label")), /* @__PURE__ */ React25.createElement(CaretRight6, {
+  }, t("next label")), /* @__PURE__ */ React28.createElement(CaretRight6, {
     weight: "bold",
-    className: getSize12(4)
-  })), /* @__PURE__ */ React25.createElement(Button10, {
+    className: getSize14(4)
+  })), /* @__PURE__ */ React28.createElement(Button11, {
     disabled,
     className: "flex items-center gap-2 pis-2 pie-4",
     onClick: () => {
@@ -1913,16 +1994,16 @@ var PureInvitationAuthenticatorContent = ({ disabled, failed, joinSend, joinStat
       return (_a = joinState == null ? void 0 : joinState.context[invitationType].invitationObservable) == null ? void 0 : _a.cancel();
     },
     "data-testid": `${invitationType}-invitation-authenticator-cancel`
-  }, /* @__PURE__ */ React25.createElement(CaretLeft6, {
+  }, /* @__PURE__ */ React28.createElement(CaretLeft6, {
     weight: "bold",
-    className: getSize12(4)
-  }), /* @__PURE__ */ React25.createElement("span", null, t("cancel label")))));
+    className: getSize14(4)
+  }), /* @__PURE__ */ React28.createElement("span", null, t("cancel label")))));
 };
 var InvitationAuthenticatorContent = ({ joinSend, joinState, disabled, invitation, Domain, failed }) => {
   const invitationType = Domain.toLowerCase();
-  const [pinValue, setPinValue] = useState4("");
+  const [pinValue, setPinValue] = useState5("");
   const { authenticate } = useInvitationStatus4(invitation);
-  const onAuthenticate = useCallback5(() => {
+  const onAuthenticate = useCallback6(() => {
     joinSend({
       type: `authenticate${Domain}VerificationCode`
     });
@@ -1932,7 +2013,7 @@ var InvitationAuthenticatorContent = ({ joinSend, joinState, disabled, invitatio
     authenticate,
     pinValue
   ]);
-  const onChange = useCallback5(({ target: { value } }) => {
+  const onChange = useCallback6(({ target: { value } }) => {
     var _a;
     setPinValue(value);
     if (value.length === pinLength) {
@@ -1942,7 +2023,7 @@ var InvitationAuthenticatorContent = ({ joinSend, joinState, disabled, invitatio
     authenticate,
     pinValue
   ]);
-  return /* @__PURE__ */ React25.createElement(PureInvitationAuthenticatorContent, _extends21({}, {
+  return /* @__PURE__ */ React28.createElement(PureInvitationAuthenticatorContent, _extends22({}, {
     disabled,
     failed,
     joinSend,
@@ -1959,7 +2040,7 @@ var InvitationAuthenticator = ({ failed, Domain, ...viewStateProps }) => {
     "authenticating"
   ].some((str) => joinState == null ? void 0 : joinState.configuration[0].id.includes(str));
   const activeInvitation = joinState == null ? void 0 : joinState.context[Domain.toLowerCase()].invitationObservable;
-  return /* @__PURE__ */ React25.createElement(ViewState, _extends21({}, viewStateProps), !activeInvitation ? /* @__PURE__ */ React25.createElement(PureInvitationAuthenticatorContent, _extends21({}, {
+  return /* @__PURE__ */ React28.createElement(ViewState, _extends22({}, viewStateProps), !activeInvitation ? /* @__PURE__ */ React28.createElement(PureInvitationAuthenticatorContent, _extends22({}, {
     disabled,
     failed,
     joinSend,
@@ -1969,7 +2050,7 @@ var InvitationAuthenticator = ({ failed, Domain, ...viewStateProps }) => {
     },
     onAuthenticate: () => {
     }
-  })) : /* @__PURE__ */ React25.createElement(InvitationAuthenticatorContent, _extends21({}, {
+  })) : /* @__PURE__ */ React28.createElement(InvitationAuthenticatorContent, _extends22({}, {
     disabled,
     failed,
     invitation: activeInvitation,
@@ -1980,8 +2061,8 @@ var InvitationAuthenticator = ({ failed, Domain, ...viewStateProps }) => {
 };
 
 // packages/apps/patterns/react-ui/src/panels/JoinPanel/JoinPanel.tsx
-function _extends22() {
-  _extends22 = Object.assign || function(target) {
+function _extends23() {
+  _extends23 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1992,12 +2073,13 @@ function _extends22() {
     }
     return target;
   };
-  return _extends22.apply(this, arguments);
+  return _extends23.apply(this, arguments);
 }
 var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone, preventExit }) => {
   const client = useClient5();
   const identity = useIdentity2();
   const titleId = useId4("joinPanel__title");
+  const { hasIosKeyboard } = useThemeContext2();
   const [joinState, joinSend, joinService] = useJoinMachine(client, {
     context: {
       mode,
@@ -2013,7 +2095,7 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
     const subscription = joinService.subscribe((state) => {
       log2("[state]", state, {
         file: "JoinPanel.tsx",
-        line: 48,
+        line: 49,
         scope: void 0,
         callSite: (f, a) => f(...a)
       });
@@ -2027,49 +2109,50 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
     const innermostState = stateStack[stateStack.length - 1];
     const autoFocusValue = innermostState === "finishingJoining" ? "successSpaceInvitation" : innermostState;
     const $nextAutofocus = document.querySelector(`[data-autofocus~="${autoFocusValue}"]`);
-    if ($nextAutofocus) {
+    if ($nextAutofocus && !(hasIosKeyboard && $nextAutofocus.hasAttribute("data-prevent-ios-autofocus"))) {
       $nextAutofocus.focus();
     }
   }, [
-    joinState.value
+    joinState.value,
+    hasIosKeyboard
   ]);
-  return /* @__PURE__ */ React26.createElement(DensityProvider4, {
+  return /* @__PURE__ */ React29.createElement(DensityProvider4, {
     density: "fine"
-  }, /* @__PURE__ */ React26.createElement(JoinHeading, _extends22({}, {
+  }, /* @__PURE__ */ React29.createElement(JoinHeading, _extends23({}, {
     mode,
     titleId,
     joinState,
     onExit,
     exitActionParent,
     preventExit
-  })), /* @__PURE__ */ React26.createElement("div", {
+  })), /* @__PURE__ */ React29.createElement("div", {
     role: "none",
     className: "is-full overflow-hidden"
-  }, /* @__PURE__ */ React26.createElement("div", {
+  }, /* @__PURE__ */ React29.createElement("div", {
     role: "none",
     className: "flex is-[1200%]",
     "aria-live": "polite"
-  }, /* @__PURE__ */ React26.createElement(AdditionMethodSelector, _extends22({}, {
+  }, /* @__PURE__ */ React29.createElement(AdditionMethodSelector, _extends23({}, {
     joinState,
     joinSend,
     active: joinState.matches({
       choosingIdentity: "choosingAuthMethod"
     })
-  })), /* @__PURE__ */ React26.createElement(IdentityInput, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(IdentityInput, _extends23({}, {
     joinState,
     joinSend,
     active: joinState.matches({
       choosingIdentity: "creatingIdentity"
     }),
     method: "create identity"
-  })), /* @__PURE__ */ React26.createElement(IdentityInput, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(IdentityInput, _extends23({}, {
     joinState,
     joinSend,
     active: joinState.matches({
       choosingIdentity: "recoveringIdentity"
     }),
     method: "recover identity"
-  })), /* @__PURE__ */ React26.createElement(InvitationInput, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationInput, _extends23({}, {
     joinState,
     joinSend,
     active: joinState.matches({
@@ -2078,7 +2161,7 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
       }
     }),
     Domain: "Halo"
-  })), /* @__PURE__ */ React26.createElement(InvitationRescuer, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationRescuer, _extends23({}, {
     joinState,
     joinSend,
     active: [
@@ -2098,7 +2181,7 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
       }
     ].some(joinState.matches),
     Domain: "Halo"
-  })), /* @__PURE__ */ React26.createElement(InvitationAuthenticator, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationAuthenticator, _extends23({}, {
     joinState,
     joinSend,
     active: [
@@ -2132,7 +2215,7 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
     }) && {
       failed: true
     }
-  })), /* @__PURE__ */ React26.createElement(InvitationAccepted, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationAccepted, _extends23({}, {
     joinState,
     joinSend,
     active: [
@@ -2148,7 +2231,7 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
     Domain: "Halo",
     doneActionParent,
     onDone
-  })), /* @__PURE__ */ React26.createElement(IdentityAdded, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(IdentityAdded, _extends23({}, {
     joinState,
     joinSend,
     mode,
@@ -2157,14 +2240,14 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
     }),
     doneActionParent,
     onDone
-  })), /* @__PURE__ */ React26.createElement(InvitationInput, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationInput, _extends23({}, {
     joinState,
     joinSend,
     active: joinState.matches({
       acceptingSpaceInvitation: "inputtingSpaceInvitationCode"
     }),
     Domain: "Space"
-  })), /* @__PURE__ */ React26.createElement(InvitationRescuer, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationRescuer, _extends23({}, {
     joinState,
     joinSend,
     active: [
@@ -2180,7 +2263,7 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
       }
     ].some(joinState.matches),
     Domain: "Space"
-  })), /* @__PURE__ */ React26.createElement(InvitationAuthenticator, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationAuthenticator, _extends23({}, {
     joinState,
     joinSend,
     active: [
@@ -2208,7 +2291,7 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
     }) && {
       failed: true
     }
-  })), /* @__PURE__ */ React26.createElement(InvitationAccepted, _extends22({}, {
+  })), /* @__PURE__ */ React29.createElement(InvitationAccepted, _extends23({}, {
     joinState,
     joinSend,
     active: joinState.matches("finishingJoiningSpace"),
@@ -2220,11 +2303,11 @@ var JoinPanel = ({ mode = "default", initialInvitationCode, exitActionParent, on
 
 // packages/apps/patterns/react-ui/src/panels/SpacePanel/SpacePanel.tsx
 import { UserPlus as UserPlus2 } from "@phosphor-icons/react";
-import React27, { useReducer as useReducer2 } from "react";
+import React30, { useReducer as useReducer2 } from "react";
 import { useSpaceInvitations as useSpaceInvitations2, observer } from "@dxos/react-client";
-import { Button as Button11, DensityProvider as DensityProvider5, getSize as getSize13, mx as mx20, useTranslation as useTranslation16 } from "@dxos/react-components";
-function _extends23() {
-  _extends23 = Object.assign || function(target) {
+import { Button as Button12, DensityProvider as DensityProvider5, getSize as getSize15, mx as mx22, useTranslation as useTranslation17 } from "@dxos/react-components";
+function _extends24() {
+  _extends24 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2235,39 +2318,39 @@ function _extends23() {
     }
     return target;
   };
-  return _extends23.apply(this, arguments);
+  return _extends24.apply(this, arguments);
 }
 var CurrentSpaceView = observer(({ space, createInvitationUrl, titleId }) => {
-  const { t } = useTranslation16("os");
+  const { t } = useTranslation17("os");
   const invitations = useSpaceInvitations2(space == null ? void 0 : space.key);
   const name = space == null ? void 0 : space.properties.name;
   if (!space) {
     return null;
   }
-  return /* @__PURE__ */ React27.createElement("div", {
+  return /* @__PURE__ */ React30.createElement("div", {
     role: "none",
     className: "flex flex-col"
-  }, /* @__PURE__ */ React27.createElement("div", {
+  }, /* @__PURE__ */ React30.createElement("div", {
     role: "none",
-    className: mx20(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
-  }, /* @__PURE__ */ React27.createElement("h2", {
+    className: mx22(subduedSurface, "rounded-bs-md flex items-center p-2 gap-2")
+  }, /* @__PURE__ */ React30.createElement("h2", {
     id: titleId,
-    className: mx20("grow font-system-medium", !name && "font-mono")
-  }, name != null ? name : space.key.truncate())), /* @__PURE__ */ React27.createElement("div", {
+    className: mx22("grow font-system-medium", !name && "font-mono")
+  }, name != null ? name : space.key.truncate())), /* @__PURE__ */ React30.createElement("div", {
     role: "region",
-    className: mx20(defaultSurface, "rounded-be-md p-2")
-  }, /* @__PURE__ */ React27.createElement(InvitationList, {
+    className: mx22(defaultSurface, "rounded-be-md p-2")
+  }, /* @__PURE__ */ React30.createElement(InvitationList, {
     invitations,
     onClickRemove: ({ invitation }) => invitation && (space == null ? void 0 : space.removeInvitation(invitation.invitationId)),
     createInvitationUrl
-  }), /* @__PURE__ */ React27.createElement(Button11, {
+  }), /* @__PURE__ */ React30.createElement(Button12, {
     className: "is-full flex gap-2 mbs-2",
     onClick: () => space == null ? void 0 : space.createInvitation(),
     "data-testid": "spaces-panel.create-invitation"
-  }, /* @__PURE__ */ React27.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React27.createElement(UserPlus2, {
-    className: getSize13(4),
+  }, /* @__PURE__ */ React30.createElement("span", null, t("create space invitation label")), /* @__PURE__ */ React30.createElement(UserPlus2, {
+    className: getSize15(4),
     weight: "bold"
-  })), /* @__PURE__ */ React27.createElement(PanelSeparator, null), /* @__PURE__ */ React27.createElement(SpaceMemberListContainer, {
+  })), /* @__PURE__ */ React30.createElement(PanelSeparator, null), /* @__PURE__ */ React30.createElement(SpaceMemberListContainer, {
     spaceKey: space.key,
     includeSelf: true
   })));
@@ -2285,14 +2368,14 @@ var SpacePanel = (props) => {
   const [panelState] = useReducer2(reducer, {
     activeView: "current space"
   });
-  return /* @__PURE__ */ React27.createElement(DensityProvider5, {
+  return /* @__PURE__ */ React30.createElement(DensityProvider5, {
     density: "fine"
-  }, panelState.activeView === "current space" ? /* @__PURE__ */ React27.createElement(CurrentSpaceView, _extends23({}, props)) : null);
+  }, panelState.activeView === "current space" ? /* @__PURE__ */ React30.createElement(CurrentSpaceView, _extends24({}, props)) : null);
 };
 
 // packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
-function _extends24() {
-  _extends24 = Object.assign || function(target) {
+function _extends25() {
+  _extends25 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2303,12 +2386,12 @@ function _extends24() {
     }
     return target;
   };
-  return _extends24.apply(this, arguments);
+  return _extends25.apply(this, arguments);
 }
 var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true, onClickManageProfile, ...popoverProps }) => {
   var _a, _b, _c;
-  return /* @__PURE__ */ React28.createElement(PanelPopover, _extends24({}, popoverProps, {
-    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React28.createElement(Avatar5, {
+  return /* @__PURE__ */ React31.createElement(PanelPopover, _extends25({}, popoverProps, {
+    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React31.createElement(Avatar5, {
       size: 10,
       variant: "circle",
       fallbackValue: identity.identityKey.toHex(),
@@ -2318,11 +2401,11 @@ var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true
       ...slots,
       trigger: {
         ...slots == null ? void 0 : slots.trigger,
-        className: mx21("flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
+        className: mx23("flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
       }
     },
     triggerIsInToolbar
-  }), /* @__PURE__ */ React28.createElement(IdentityPanel, _extends24({}, {
+  }), /* @__PURE__ */ React31.createElement(IdentityPanel, _extends25({}, {
     identity,
     onClickManageProfile
   })));
@@ -2330,10 +2413,10 @@ var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true
 
 // packages/apps/patterns/react-ui/src/composites/JoinDialog/JoinDialog.tsx
 import { Action, Cancel } from "@radix-ui/react-alert-dialog";
-import React29 from "react";
-import { ThemeContext as ThemeContext2, useId as useId5 } from "@dxos/react-components";
-function _extends25() {
-  _extends25 = Object.assign || function(target) {
+import React32 from "react";
+import { ThemeContext as ThemeContext2, useId as useId5, useThemeContext as useThemeContext3 } from "@dxos/react-components";
+function _extends26() {
+  _extends26 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2344,41 +2427,43 @@ function _extends25() {
     }
     return target;
   };
-  return _extends25.apply(this, arguments);
+  return _extends26.apply(this, arguments);
 }
 var JoinDialog = ({ slots, ...joinPanelProps }) => {
   const titleId = useId5("joinDialog__title");
-  return /* @__PURE__ */ React29.createElement(PanelAlertDialog, _extends25({}, {
+  const themeContextValue = useThemeContext3();
+  return /* @__PURE__ */ React32.createElement(PanelAlertDialog, _extends26({}, {
     slots,
     titleId
-  }), /* @__PURE__ */ React29.createElement(ThemeContext2.Provider, {
+  }), /* @__PURE__ */ React32.createElement(ThemeContext2.Provider, {
     value: {
+      ...themeContextValue,
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React29.createElement(JoinPanel, _extends25({}, {
+  }, /* @__PURE__ */ React32.createElement(JoinPanel, _extends26({}, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React29.createElement(Cancel, {
+    exitActionParent: /* @__PURE__ */ React32.createElement(Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React29.createElement(Action, {
+    doneActionParent: /* @__PURE__ */ React32.createElement(Action, {
       asChild: true
     })
   }))));
 };
 
 // packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
-import React32, { useEffect as useEffect3, useState as useState5 } from "react";
+import React35, { useEffect as useEffect3, useState as useState6 } from "react";
 import { log as log3 } from "@dxos/log";
 import { ShellDisplay, ShellLayout } from "@dxos/protocols/proto/dxos/iframe";
 import { useClient as useClient6, useSpace as useSpace3, useSpaces } from "@dxos/react-client";
 
 // packages/apps/patterns/react-ui/src/composites/DevicesDialog/DevicesDialog.tsx
 import { Close } from "@radix-ui/react-dialog";
-import React30 from "react";
-import { ThemeContext as ThemeContext3, useId as useId6 } from "@dxos/react-components";
-function _extends26() {
-  _extends26 = Object.assign || function(target) {
+import React33 from "react";
+import { ThemeContext as ThemeContext3, useId as useId6, useThemeContext as useThemeContext4 } from "@dxos/react-components";
+function _extends27() {
+  _extends27 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2389,11 +2474,12 @@ function _extends26() {
     }
     return target;
   };
-  return _extends26.apply(this, arguments);
+  return _extends27.apply(this, arguments);
 }
 var DevicesDialog = ({ slots, ...devicesDialogProps }) => {
   const titleId = useId6("spaceDialog__title");
-  return /* @__PURE__ */ React30.createElement(PanelDialog, _extends26({}, {
+  const themeContextValue = useThemeContext4();
+  return /* @__PURE__ */ React33.createElement(PanelDialog, _extends27({}, {
     slots: {
       ...slots,
       root: {
@@ -2405,14 +2491,15 @@ var DevicesDialog = ({ slots, ...devicesDialogProps }) => {
       }
     },
     titleId
-  }), /* @__PURE__ */ React30.createElement(ThemeContext3.Provider, {
+  }), /* @__PURE__ */ React33.createElement(ThemeContext3.Provider, {
     value: {
+      ...themeContextValue,
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React30.createElement(DevicesPanel, _extends26({}, {
+  }, /* @__PURE__ */ React33.createElement(DevicesPanel, _extends27({}, {
     ...devicesDialogProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React30.createElement(Close, {
+    doneActionParent: /* @__PURE__ */ React33.createElement(Close, {
       asChild: true
     })
   }))));
@@ -2420,10 +2507,10 @@ var DevicesDialog = ({ slots, ...devicesDialogProps }) => {
 
 // packages/apps/patterns/react-ui/src/composites/SpaceDialog/SpaceDialog.tsx
 import { Close as Close2 } from "@radix-ui/react-dialog";
-import React31 from "react";
-import { ThemeContext as ThemeContext4, useId as useId7 } from "@dxos/react-components";
-function _extends27() {
-  _extends27 = Object.assign || function(target) {
+import React34 from "react";
+import { ThemeContext as ThemeContext4, useId as useId7, useThemeContext as useThemeContext5 } from "@dxos/react-components";
+function _extends28() {
+  _extends28 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2434,11 +2521,12 @@ function _extends27() {
     }
     return target;
   };
-  return _extends27.apply(this, arguments);
+  return _extends28.apply(this, arguments);
 }
 var SpaceDialog = ({ slots, ...spacePanelProps }) => {
   const titleId = useId7("spaceDialog__title");
-  return /* @__PURE__ */ React31.createElement(PanelDialog, _extends27({}, {
+  const themeContextValue = useThemeContext5();
+  return /* @__PURE__ */ React34.createElement(PanelDialog, _extends28({}, {
     slots: {
       ...slots,
       root: {
@@ -2450,14 +2538,15 @@ var SpaceDialog = ({ slots, ...spacePanelProps }) => {
       }
     },
     titleId
-  }), /* @__PURE__ */ React31.createElement(ThemeContext4.Provider, {
+  }), /* @__PURE__ */ React34.createElement(ThemeContext4.Provider, {
     value: {
+      ...themeContextValue,
       themeVariant: "os"
     }
-  }, /* @__PURE__ */ React31.createElement(SpacePanel, _extends27({}, {
+  }, /* @__PURE__ */ React34.createElement(SpacePanel, _extends28({}, {
     ...spacePanelProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React31.createElement(Close2, {
+    doneActionParent: /* @__PURE__ */ React34.createElement(Close2, {
       asChild: true
     })
   }))));
@@ -2465,7 +2554,7 @@ var SpaceDialog = ({ slots, ...spacePanelProps }) => {
 
 // packages/apps/patterns/react-ui/src/composites/Shell/Shell.tsx
 var Shell = ({ runtime, origin }) => {
-  const [{ layout, invitationCode, spaceKey }, setLayout] = useState5({
+  const [{ layout, invitationCode, spaceKey }, setLayout] = useState6({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey
@@ -2501,7 +2590,7 @@ var Shell = ({ runtime, origin }) => {
   ]);
   switch (layout) {
     case ShellLayout.INITIALIZE_IDENTITY:
-      return /* @__PURE__ */ React32.createElement(JoinDialog, {
+      return /* @__PURE__ */ React35.createElement(JoinDialog, {
         mode: "halo-only",
         initialInvitationCode: invitationCode,
         onDone: async () => {
@@ -2513,7 +2602,7 @@ var Shell = ({ runtime, origin }) => {
         }
       });
     case ShellLayout.DEVICE_INVITATIONS:
-      return /* @__PURE__ */ React32.createElement(DevicesDialog, {
+      return /* @__PURE__ */ React35.createElement(DevicesDialog, {
         createInvitationUrl: (invitationCode2) => `${origin}?haloInvitationCode=${invitationCode2}`,
         onDone: async () => {
           await runtime.setAppContext({
@@ -2523,7 +2612,7 @@ var Shell = ({ runtime, origin }) => {
         }
       });
     case ShellLayout.SPACE_INVITATIONS:
-      return space ? /* @__PURE__ */ React32.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React35.createElement(SpaceDialog, {
         space,
         createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
         onDone: async () => {
@@ -2534,7 +2623,7 @@ var Shell = ({ runtime, origin }) => {
         }
       }) : null;
     case ShellLayout.JOIN_SPACE:
-      return /* @__PURE__ */ React32.createElement(JoinDialog, {
+      return /* @__PURE__ */ React35.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
         onDone: async (result) => {
           var _a;
@@ -2557,15 +2646,15 @@ var Shell = ({ runtime, origin }) => {
 };
 
 // packages/apps/patterns/react-ui/src/composites/Shell/ShellContext.tsx
-import React33, { createContext as createContext2, useCallback as useCallback6, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo3, useState as useState6 } from "react";
+import React36, { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect4, useMemo as useMemo3, useState as useState7 } from "react";
 import { IFrameClientServicesProxy, ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout2 } from "@dxos/client";
 import { MemoryShellRuntime } from "@dxos/client-services";
 import { useClient as useClient7, useIdentity as useIdentity3 } from "@dxos/react-client";
-import { mx as mx22 } from "@dxos/react-components";
-var ShellContext = /* @__PURE__ */ createContext2({});
+import { mx as mx24 } from "@dxos/react-components";
+var ShellContext = /* @__PURE__ */ createContext3({});
 var useShell = () => {
   const client = useClient7();
-  const { runtime, setDisplay } = useContext2(ShellContext);
+  const { runtime, setDisplay } = useContext3(ShellContext);
   const setLayout = async (layout, options) => {
     if (runtime) {
       if (layout === ShellLayout2.DEFAULT) {
@@ -2598,7 +2687,7 @@ var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedS
   ]);
   const client = useClient7();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState6(!identity || spaceInvitationCode || haloInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const [display, setDisplay] = useState7(!identity || spaceInvitationCode || haloInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
   const shellRuntime = useMemo3(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") === "true") {
       return;
@@ -2619,7 +2708,7 @@ var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedS
     spaceInvitationCode,
     haloInvitationCode
   ]);
-  const handleKeyDown = useCallback6((event) => {
+  const handleKeyDown = useCallback7((event) => {
     if (!space || !shellRuntime) {
       return;
     }
@@ -2658,12 +2747,12 @@ var ShellProvider = ({ space, haloInvitationCode, spaceInvitationCode, onJoinedS
   }, [
     shellRuntime
   ]);
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, shellRuntime && /* @__PURE__ */ React33.createElement("div", {
-    className: mx22(display === ShellDisplay2.NONE ? "hidden" : "")
-  }, /* @__PURE__ */ React33.createElement(Shell, {
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, shellRuntime && /* @__PURE__ */ React36.createElement("div", {
+    className: mx24(display === ShellDisplay2.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ React36.createElement(Shell, {
     runtime: shellRuntime,
     origin: window.location.origin
-  })), /* @__PURE__ */ React33.createElement(ShellContext.Provider, {
+  })), /* @__PURE__ */ React36.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,
       setDisplay
@@ -2681,6 +2770,7 @@ var os = {
   "identity offline description": "Offline",
   "sidebar label": "DXOS sidebar",
   "copy invitation code label": "Copy",
+  "copy invitation code success label": "Copied",
   "open share panel label": "Share",
   "joining space heading": "Joining space",
   "join space heading": "Join a space",
@@ -2746,11 +2836,15 @@ var osTranslations = {
   "en-US": en_US_exports
 };
 export {
+  ClipboardContext,
+  ClipboardProvider,
+  CopyButton,
   DeviceList,
   DevicesPanel,
   IdentityListItem,
   IdentityPanel,
   IdentityPopover,
+  InvitationEmoji,
   InvitationList,
   InvitationListContainer,
   InvitationListItem,
@@ -2795,6 +2889,7 @@ export {
   successBgColor,
   successStrokeColor,
   successTextColor,
+  useClipboardContext,
   useShell,
   useTogglePanelSidebar
 };