@dxos/shell 0.4.7-main.dca306f → 0.4.7-main.ea67fec

package/dist/lib/browser/react.mjs

@@ -139,47 +139,188 @@ var CompoundButton = ({ children, description, before, after, variant = "default
   }, after));
 };
 
-// packages/sdk/shell/src/components/IdentityList/DeviceList.tsx
+// packages/sdk/shell/src/components/EmojiPicker.tsx
+import emojiData from "@emoji-mart/data";
+import EmojiMart from "@emoji-mart/react";
+import { ArrowCounterClockwise, CaretDown } from "@phosphor-icons/react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React4, { useState as useState3 } from "react";
+import { Button as Button2, Popover, useTranslation as useTranslation2, Tooltip as Tooltip2 } from "@dxos/react-ui";
+import { getSize as getSize2 } from "@dxos/react-ui-theme";
+var EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
+  const { t } = useTranslation2("os");
+  const [emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState3(false);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: setEmojiPickerOpen
+  }, /* @__PURE__ */ React4.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Button2, {
+    variant: "ghost",
+    classNames: "gap-2 text-2xl plb-1",
+    disabled
+  }, /* @__PURE__ */ React4.createElement("span", {
+    className: "sr-only"
+  }, t("select emoji label")), /* @__PURE__ */ React4.createElement("span", {
+    className: "grow pis-14"
+  }, emojiValue), /* @__PURE__ */ React4.createElement(CaretDown, {
+    className: getSize2(4)
+  }))), /* @__PURE__ */ React4.createElement(Popover.Content, {
+    side: "right",
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+      }
+    }
+  }, /* @__PURE__ */ React4.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true
+  }), /* @__PURE__ */ React4.createElement(Popover.Arrow, null))), /* @__PURE__ */ React4.createElement(Tooltip2.Root, null, /* @__PURE__ */ React4.createElement(Tooltip2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Button2, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ React4.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ React4.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React4.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip2.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ React4.createElement(Tooltip2.Arrow, null)))));
+};
+
+// packages/sdk/shell/src/components/HuePicker.tsx
+import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check as Check2 } from "@phosphor-icons/react";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
 import React5 from "react";
+import { Button as Button3, useTranslation as useTranslation3, Tooltip as Tooltip3, DropdownMenu, useThemeContext as useThemeContext2 } from "@dxos/react-ui";
+import { getSize as getSize3, hueTokenThemes } from "@dxos/react-ui-theme";
+var HuePreview = ({ hue }) => {
+  const { tx } = useThemeContext2();
+  return /* @__PURE__ */ React5.createElement("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12"
+  }, /* @__PURE__ */ React5.createElement("rect", {
+    x: 0,
+    y: 0,
+    width: 12,
+    height: 12,
+    className: tx("hue.fill", "select--hue__preview", {
+      hue
+    })
+  }));
+};
+var HuePicker = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
+  const { t } = useTranslation3("os");
+  const [hueValue, setHueValue] = useControllableState2({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
+    modal: false
+  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Button3, {
+    variant: "ghost",
+    classNames: "gap-2 plb-1",
+    disabled
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, t("select hue label")), /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "pis-14 grow flex items-center justify-center gap-2"
+  }, /* @__PURE__ */ React5.createElement(HuePreview, {
+    hue: hueValue
+  }), /* @__PURE__ */ React5.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React5.createElement(CaretDown2, {
+    className: getSize3(4)
+  }))), /* @__PURE__ */ React5.createElement(DropdownMenu.Content, {
+    side: "right"
+  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
+    return /* @__PURE__ */ React5.createElement(DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2)
+    }, /* @__PURE__ */ React5.createElement(HuePreview, {
+      hue: hue2
+    }), /* @__PURE__ */ React5.createElement("span", {
+      className: "grow"
+    }, t(`${hue2} label`)), /* @__PURE__ */ React5.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React5.createElement(Check2, null)));
+  })), /* @__PURE__ */ React5.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Root, null, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Button3, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ React5.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip3.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null)))));
+};
+
+// packages/sdk/shell/src/components/IdentityList/DeviceList.tsx
+import React7 from "react";
 import { generateName as generateName2 } from "@dxos/display-name";
 import { DeviceType } from "@dxos/react-client/halo";
-import { List, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { List, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { descriptionText as descriptionText2, mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/components/IdentityList/IdentityListItem.tsx
-import React4, { forwardRef } from "react";
+import React6, { forwardRef } from "react";
 import { generateName } from "@dxos/display-name";
 import { SpaceMember } from "@dxos/react-client/echo";
-import { ListItem, Avatar, useJdenticonHref, useId as useId2 } from "@dxos/react-ui";
+import { ListItem, Avatar, useId as useId2 } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
+import { keyToFallback } from "@dxos/util";
 var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
-  const fallbackValue = identity.identityKey.toHex();
+  const fallbackValue = keyToFallback(identity.identityKey);
   const labelId = useId2("identityListItem__label");
-  const jdenticon = useJdenticonHref(fallbackValue ?? "", 12);
   const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
-  return /* @__PURE__ */ React4.createElement(ListItem.Root, {
+  return /* @__PURE__ */ React6.createElement(ListItem.Root, {
     ...props,
     classNames: mx3("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
     onClick: () => onClick?.(),
     "data-testid": "identity-list-item",
     labelId,
     ref: forwardedRef
-  }, /* @__PURE__ */ React4.createElement(Avatar.Root, {
+  }, /* @__PURE__ */ React6.createElement(Avatar.Root, {
     status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
-    labelId
-  }, /* @__PURE__ */ React4.createElement(Avatar.Frame, {
+    labelId,
+    hue: identity.profile?.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React6.createElement(Avatar.Frame, {
     classNames: "place-self-center"
-  }, /* @__PURE__ */ React4.createElement(Avatar.Fallback, {
-    href: jdenticon
-  })), /* @__PURE__ */ React4.createElement(Avatar.Label, {
+  }, /* @__PURE__ */ React6.createElement(Avatar.Fallback, {
+    text: identity.profile?.emoji || fallbackValue.emoji
+  })), /* @__PURE__ */ React6.createElement(Avatar.Label, {
     classNames: "text-sm truncate pli-2"
   }, displayName)));
 });
 
 // packages/sdk/shell/src/components/IdentityList/DeviceList.tsx
 var DeviceList = ({ devices, onSelect }) => {
-  const { t } = useTranslation2("os");
-  return devices.length > 0 ? /* @__PURE__ */ React5.createElement(List, {
+  const { t } = useTranslation4("os");
+  return devices.length > 0 ? /* @__PURE__ */ React7.createElement(List, {
     classNames: "flex flex-col gap-2"
   }, devices.map((device) => {
     const deviceType = device.profile?.type || DeviceType.UNKNOWN;
@@ -190,25 +331,25 @@ var DeviceList = ({ devices, onSelect }) => {
         displayName
       }
     };
-    return /* @__PURE__ */ React5.createElement(IdentityListItem, {
+    return /* @__PURE__ */ React7.createElement(IdentityListItem, {
       key: device.deviceKey.toHex(),
       identity,
       presence: device.presence,
       onClick: onSelect && (() => onSelect(device))
     });
-  })) : /* @__PURE__ */ React5.createElement("div", {
+  })) : /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "grow flex items-center p-2"
-  }, /* @__PURE__ */ React5.createElement("p", {
+  }, /* @__PURE__ */ React7.createElement("p", {
     className: mx4(descriptionText2, "text-center is-full")
   }, t("empty device list message")));
 };
 
 // packages/sdk/shell/src/components/IdentityList/SpaceMemberList.tsx
-import React6, { useMemo } from "react";
+import React8, { useMemo } from "react";
 import { useClient } from "@dxos/react-client";
 import { useMembers } from "@dxos/react-client/echo";
-import { useTranslation as useTranslation3, List as List2 } from "@dxos/react-ui";
+import { useTranslation as useTranslation5, List as List2 } from "@dxos/react-ui";
 import { descriptionText as descriptionText3, mx as mx5 } from "@dxos/react-ui-theme";
 var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
   const client = useClient();
@@ -216,100 +357,42 @@ var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
   const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((member) => member.identity.identityKey.equals(client.halo.identity.get().identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity.get().identityKey)), [
     allUnsortedMembers
   ]);
-  return /* @__PURE__ */ React6.createElement(SpaceMemberListImpl, {
+  return /* @__PURE__ */ React8.createElement(SpaceMemberListImpl, {
     members,
     onSelect
   });
 };
 var SpaceMemberListImpl = ({ members, onSelect }) => {
-  const { t } = useTranslation3("os");
+  const { t } = useTranslation5("os");
   const visibleMembers = members.filter((member) => member.identity);
-  return visibleMembers.length > 0 ? /* @__PURE__ */ React6.createElement(List2, {
+  return visibleMembers.length > 0 ? /* @__PURE__ */ React8.createElement(List2, {
     classNames: "flex flex-col gap-2",
     "data-testid": "space-members-list"
   }, visibleMembers.map((member) => {
-    return /* @__PURE__ */ React6.createElement(IdentityListItem, {
+    return /* @__PURE__ */ React8.createElement(IdentityListItem, {
       key: member.identity.identityKey.toHex(),
       identity: member.identity,
       presence: member.presence,
       onClick: onSelect && (() => onSelect(member))
     });
-  })) : /* @__PURE__ */ React6.createElement("div", {
+  })) : /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "grow flex items-center p-2"
-  }, /* @__PURE__ */ React6.createElement("p", {
+  }, /* @__PURE__ */ React8.createElement("p", {
     className: mx5(descriptionText3, "text-center is-full mlb-2")
   }, t("empty space members message")));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 import { X } from "@phosphor-icons/react";
-import React8, { useCallback as useCallback2 } from "react";
-import { Invitation as Invitation2, useInvitationStatus } from "@dxos/react-client/invitations";
-import { Button as Button2, ListItem as ListItem2, useTranslation as useTranslation4, Avatar as Avatar2, useThemeContext as useThemeContext2, Tooltip as Tooltip2 } from "@dxos/react-ui";
-import { focusRing, getSize as getSize2, mx as mx7 } from "@dxos/react-ui-theme";
-
-// packages/sdk/shell/src/util/invitationStatusValue.ts
-import { Invitation } from "@dxos/react-client/invitations";
-var invitationStatusValue = /* @__PURE__ */ new Map([
-  [
-    Invitation.State.ERROR,
-    -3
-  ],
-  [
-    Invitation.State.TIMEOUT,
-    -2
-  ],
-  [
-    Invitation.State.CANCELLED,
-    -1
-  ],
-  [
-    Invitation.State.INIT,
-    0
-  ],
-  [
-    Invitation.State.CONNECTING,
-    1
-  ],
-  [
-    Invitation.State.CONNECTED,
-    2
-  ],
-  [
-    Invitation.State.READY_FOR_AUTHENTICATION,
-    3
-  ],
-  [
-    Invitation.State.AUTHENTICATING,
-    4
-  ],
-  [
-    Invitation.State.SUCCESS,
-    5
-  ]
-]);
-
-// packages/sdk/shell/src/util/toEmoji.ts
-import toArray from "lodash.toarray";
-var emoji = toArray(
-  // When changing this set, please check the result in a console or e.g. RunKit (https://runkit.com/thure/642214441dd6ae000855a8de)
-  // Emoji sometimes use a combination of code points, and some code points aren't visible on their own, so by adding or deleting you may unintentionally create non-visible items.
-  // This set was chosen from the characters in Unicode Emoji v15.0 based on the following criteria:
-  // – not people or isolated anthropomorphic faces
-  // – not flags
-  // – more concrete than abstract
-  // – less culturally specific
-  // – less easily confused with another emoji in the set
-  // – requires less special knowledge to identify
-  // – less likely to evoke negative feelings (no meat, no drugs, no weapons, etc)
-  // – less common as a signifier in UX
-  "\u{1F479}\u{1F47B}\u{1F47D}\u{1F916}\u{1F383}\u{1F9BE}\u{1F9BF}\u{1F9B7}\u{1F463}\u{1F441}\uFE0F\u{1F9F6}\u{1F451}\u{1F412}\u{1F986}\u{1F989}\u{1F434}\u{1F984}\u{1F41D}\u{1F98B}\u{1F41E}\u{1FAB2}\u{1F422}\u{1F98E}\u{1F995}\u{1F991}\u{1F980}\u{1F420}\u{1F42C}\u{1F40B}\u{1F9AD}\u{1F405}\u{1F406}\u{1F993}\u{1F98D}\u{1F9A7}\u{1F418}\u{1F42B}\u{1F992}\u{1F998}\u{1F9AC}\u{1F416}\u{1F40F}\u{1F98C}\u{1F415}\u{1F408}\u{1F413}\u{1F99A}\u{1F99C}\u{1F9A2}\u{1F9A9}\u{1F9A6}\u{1F401}\u{1F43F}\uFE0F\u{1F335}\u{1F332}\u{1F333}\u{1FAB5}\u{1F331}\u{1F341}\u{1FABA}\u{1F344}\u{1F41A}\u{1FAB8}\u{1FAA8}\u{1F33E}\u{1F337}\u{1F33B}\u2600\uFE0F\u{1F319}\u{1FA90}\u2B50\uFE0F\u26A1\uFE0F\u2604\uFE0F\u{1F525}\u{1F308}\u2601\uFE0F\u{1F4A7}\u26F1\uFE0F\u{1F30A}\u{1F34E}\u{1F34B}\u{1F349}\u{1F347}\u{1FAD0}\u{1F348}\u{1F352}\u{1F351}\u{1F96D}\u{1F34D}\u{1F965}\u{1F95D}\u{1F951}\u{1F336}\uFE0F\u{1F33D}\u{1F955}\u{1F36C}\u{1F95C}\u{1FAD6}\u2615\uFE0F\u{1F375}\u{1F9CA}\u{1F9C2}\u{1F3D4}\uFE0F\u2693\uFE0F\u{1F6DF}\u{1F3DD}\uFE0F\u{1F6F6}\u{1F680}\u{1F6F0}\uFE0F\u26F2\uFE0F\u{1F3F0}\u{1F6B2}\u26FA\uFE0F\u{1F399}\uFE0F\u{1F9F2}\u2699\uFE0F\u{1F529}\u{1F52E}\u{1F52D}\u{1F52C}\u{1F9EC}\u{1F321}\uFE0F\u{1F9FA}\u{1F6CE}\uFE0F\u{1F511}\u{1FA91}\u{1F9F8}\u{1F388}\u{1F380}\u{1F38A}\u267B\uFE0F\u{1F3B5}"
-);
-var toEmoji = (keyAsHex) => emoji[parseInt(keyAsHex, 16) % emoji.length];
+import React10, { useCallback as useCallback2 } from "react";
+import { Invitation, useInvitationStatus } from "@dxos/react-client/invitations";
+import { Button as Button4, ListItem as ListItem2, useTranslation as useTranslation6, Avatar as Avatar2, useThemeContext as useThemeContext3, Tooltip as Tooltip4 } from "@dxos/react-ui";
+import { focusRing, getSize as getSize4, mx as mx7 } from "@dxos/react-ui-theme";
+import { hexToEmoji } from "@dxos/util";
 
 // packages/sdk/shell/src/components/AuthCode.tsx
-import React7 from "react";
+import React9 from "react";
 import { mx as mx6 } from "@dxos/react-ui-theme";
 var AuthCode = (props) => {
   const { code, large, classNames } = props;
@@ -319,17 +402,17 @@ var AuthCode = (props) => {
   const handleCopy = () => {
     void navigator.clipboard.writeText(code ?? "");
   };
-  return /* @__PURE__ */ React7.createElement("span", {
+  return /* @__PURE__ */ React9.createElement("span", {
     className: mx6(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 flex gap-1.5 rounded cursor-pointer", classNames),
     onClick: handleCopy
-  }, /* @__PURE__ */ React7.createElement("span", null, left), /* @__PURE__ */ React7.createElement("span", null, right));
+  }, /* @__PURE__ */ React9.createElement("span", null, left), /* @__PURE__ */ React9.createElement("span", null, right));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 var InvitationListItem = (props) => {
   const { invitation } = props;
   const invitationStatus = useInvitationStatus(invitation);
-  return /* @__PURE__ */ React8.createElement(InvitationListItemImpl, {
+  return /* @__PURE__ */ React10.createElement(InvitationListItemImpl, {
     ...props,
     invitationStatus
   });
@@ -339,11 +422,11 @@ var avatarProps = {
   variant: "circle"
 };
 var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
-  const { tx } = useThemeContext2();
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", {
+  const { tx } = useThemeContext3();
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize2(avatarProps.size))
-  }, /* @__PURE__ */ React8.createElement("span", {
+    className: mx7("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize4(avatarProps.size))
+  }, /* @__PURE__ */ React10.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -353,10 +436,10 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
     style: {
       animationDelay: "400ms"
     }
-  })), /* @__PURE__ */ React8.createElement("span", {
+  })), /* @__PURE__ */ React10.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize2(avatarProps.size))
-  }, /* @__PURE__ */ React8.createElement("span", {
+    className: mx7("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize4(avatarProps.size))
+  }, /* @__PURE__ */ React10.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -369,19 +452,19 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   })));
 };
 var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
-  const { t } = useTranslation4("os");
+  const { t } = useTranslation6("os");
   const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
   const isCancellable = !([
-    Invitation2.State.ERROR,
-    Invitation2.State.TIMEOUT,
-    Invitation2.State.CANCELLED
+    Invitation.State.ERROR,
+    Invitation.State.TIMEOUT,
+    Invitation.State.CANCELLED
   ].indexOf(invitationStatus) >= 0);
-  const showShare = type === Invitation2.Type.MULTIUSE || [
-    Invitation2.State.INIT,
-    Invitation2.State.CONNECTING,
-    Invitation2.State.CONNECTED
+  const showShare = type === Invitation.Type.MULTIUSE || [
+    Invitation.State.INIT,
+    Invitation.State.CONNECTING,
+    Invitation.State.CONNECTED
   ].indexOf(invitationStatus) >= 0;
-  const showAuthCode = invitationStatus === Invitation2.State.READY_FOR_AUTHENTICATION;
+  const showAuthCode = invitationStatus === Invitation.State.READY_FOR_AUTHENTICATION;
   const handleClickRemove = useCallback2(() => onClickRemove?.(invitation), [
     invitation,
     onClickRemove
@@ -389,55 +472,55 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
   const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
   const invitationId = invitation?.get().invitationId;
   const avatarAnimation = [
-    Invitation2.State.INIT,
-    Invitation2.State.CONNECTING,
-    Invitation2.State.CONNECTED,
-    Invitation2.State.READY_FOR_AUTHENTICATION,
-    Invitation2.State.AUTHENTICATING
+    Invitation.State.INIT,
+    Invitation.State.CONNECTING,
+    Invitation.State.CONNECTED,
+    Invitation.State.READY_FOR_AUTHENTICATION,
+    Invitation.State.AUTHENTICATING
   ].includes(invitationStatus) ? "pulse" : "none";
   const avatarError = [
-    Invitation2.State.ERROR,
-    Invitation2.State.TIMEOUT,
-    Invitation2.State.CANCELLED
+    Invitation.State.ERROR,
+    Invitation.State.TIMEOUT,
+    Invitation.State.CANCELLED
   ].includes(invitationStatus);
   const avatarGreen = [
-    Invitation2.State.CONNECTED,
-    Invitation2.State.READY_FOR_AUTHENTICATION,
-    Invitation2.State.AUTHENTICATING,
-    Invitation2.State.SUCCESS
+    Invitation.State.CONNECTED,
+    Invitation.State.READY_FOR_AUTHENTICATION,
+    Invitation.State.AUTHENTICATING,
+    Invitation.State.SUCCESS
   ].includes(invitationStatus);
   const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
-  return /* @__PURE__ */ React8.createElement(ListItem2.Root, {
+  return /* @__PURE__ */ React10.createElement(ListItem2.Root, {
     id: invitationCode,
     ...props,
     classNames: [
       "flex gap-2 pis-3 pie-1 items-center relative",
       props.classNames
     ]
-  }, /* @__PURE__ */ React8.createElement(ListItem2.Heading, {
+  }, /* @__PURE__ */ React10.createElement(ListItem2.Heading, {
     classNames: "sr-only"
-  }, t(type === Invitation2.Type.MULTIUSE ? "invite many list item label" : "invite one list item label")), type === Invitation2.Type.MULTIUSE && /* @__PURE__ */ React8.createElement(AvatarStackEffect, {
+  }, t(type === Invitation.Type.MULTIUSE ? "invite many list item label" : "invite one list item label")), type === Invitation.Type.MULTIUSE && /* @__PURE__ */ React10.createElement(AvatarStackEffect, {
     status: avatarStatus,
     animation: avatarAnimation,
     reverseEffects
-  }), /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Avatar2.Root, {
+  }), /* @__PURE__ */ React10.createElement(Tooltip4.Root, null, /* @__PURE__ */ React10.createElement(Avatar2.Root, {
     ...avatarProps,
     animation: avatarAnimation,
     status: avatarStatus
-  }, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
+  }, /* @__PURE__ */ React10.createElement(Tooltip4.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React8.createElement(Avatar2.Frame, {
+  }, /* @__PURE__ */ React10.createElement(Avatar2.Frame, {
     tabIndex: 0,
     classNames: [
       focusRing,
       "relative rounded-full place-self-center"
     ]
-  }, /* @__PURE__ */ React8.createElement(Avatar2.Fallback, {
-    text: toEmoji(invitationId)
-  })))), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
+  }, /* @__PURE__ */ React10.createElement(Avatar2.Fallback, {
+    text: hexToEmoji(invitationId)
+  })))), /* @__PURE__ */ React10.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip4.Content, {
     side: "left",
     classNames: "z-[70]"
-  }, t(type === Invitation2.Type.MULTIUSE ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React8.createElement(Tooltip2.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Button2, {
+  }, t(type === Invitation.Type.MULTIUSE ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React10.createElement(Tooltip4.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Button4, {
     variant: "ghost",
     classNames: "grow justify-start font-medium",
     onClick: () => send({
@@ -445,60 +528,60 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
       invitation
     }),
     "data-testid": "show-qrcode"
-  }, /* @__PURE__ */ React8.createElement("span", null, t("open share panel label"))), /* @__PURE__ */ React8.createElement(CopyButtonIconOnly, {
+  }, /* @__PURE__ */ React10.createElement("span", null, t("open share panel label"))), /* @__PURE__ */ React10.createElement(CopyButtonIconOnly, {
     variant: "ghost",
     value: invitationUrl
-  })) : showAuthCode ? /* @__PURE__ */ React8.createElement(AuthCode, {
+  })) : showAuthCode ? /* @__PURE__ */ React10.createElement(AuthCode, {
     code: authCode,
     classNames: "grow"
-  }) : invitationStatus === Invitation2.State.CONNECTING ? /* @__PURE__ */ React8.createElement("span", {
+  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Connecting...") : invitationStatus === Invitation2.State.AUTHENTICATING ? /* @__PURE__ */ React8.createElement("span", {
+  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Authenticating...") : invitationStatus === Invitation2.State.ERROR || invitationStatus === Invitation2.State.TIMEOUT ? /* @__PURE__ */ React8.createElement("span", {
+  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Failed") : invitationStatus === Invitation2.State.CANCELLED ? /* @__PURE__ */ React8.createElement("span", {
+  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Cancelled") : invitationStatus === Invitation2.State.SUCCESS ? /* @__PURE__ */ React8.createElement("span", {
+  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow truncate"
-  }, "User joined") : /* @__PURE__ */ React8.createElement("span", {
+  }, "User joined") : /* @__PURE__ */ React10.createElement("span", {
     className: "grow"
-  }, " "), isCancellable ? /* @__PURE__ */ React8.createElement(Button2, {
+  }, " "), isCancellable ? /* @__PURE__ */ React10.createElement(Button4, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: cancel,
     "data-testid": "cancel-invitation"
-  }, /* @__PURE__ */ React8.createElement("span", {
+  }, /* @__PURE__ */ React10.createElement("span", {
     className: "sr-only"
-  }, t("cancel invitation label")), /* @__PURE__ */ React8.createElement(X, {
-    className: getSize2(4)
-  })) : /* @__PURE__ */ React8.createElement(Button2, {
+  }, t("cancel invitation label")), /* @__PURE__ */ React10.createElement(X, {
+    className: getSize4(4)
+  })) : /* @__PURE__ */ React10.createElement(Button4, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: handleClickRemove,
     "data-testid": "remove-invitation"
-  }, /* @__PURE__ */ React8.createElement("span", {
+  }, /* @__PURE__ */ React10.createElement("span", {
     className: "sr-only"
-  }, t("remove invitation label")), /* @__PURE__ */ React8.createElement(X, {
-    className: getSize2(4)
+  }, t("remove invitation label")), /* @__PURE__ */ React10.createElement(X, {
+    className: getSize4(4)
   })));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
-import React10, { useCallback as useCallback3 } from "react";
+import React12, { useCallback as useCallback3 } from "react";
 import { useSpace, useSpaceInvitations } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/components/InvitationList/InvitationList.tsx
-import React9 from "react";
+import React11 from "react";
 import { List as List3 } from "@dxos/react-ui";
 import { mx as mx8 } from "@dxos/react-ui-theme";
 var InvitationList = ({ invitations, send, ...invitationProps }) => {
   const { className, InvitationListItem: Item = InvitationListItem } = invitationProps;
-  return /* @__PURE__ */ React9.createElement(List3, {
+  return /* @__PURE__ */ React11.createElement(List3, {
     classNames: mx8("flex flex-col gap-2", className)
   }, invitations.map((invitation) => {
     const value = invitation.get().invitationId;
-    return /* @__PURE__ */ React9.createElement(Item, {
+    return /* @__PURE__ */ React11.createElement(Item, {
       key: value,
       send,
       invitation,
@@ -516,7 +599,7 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
   }, [
     space
   ]);
-  return /* @__PURE__ */ React10.createElement(InvitationList, {
+  return /* @__PURE__ */ React12.createElement(InvitationList, {
     invitations,
     onClickRemove,
     createInvitationUrl,
@@ -525,11 +608,11 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
 };
 
 // packages/sdk/shell/src/components/Panel/Action.tsx
-import { CaretDown, Check as Check2, Placeholder } from "@phosphor-icons/react";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React11, { forwardRef as forwardRef2 } from "react";
-import { Button as Button3, DropdownMenu, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { descriptionText as descriptionText4, getSize as getSize3, mx as mx9 } from "@dxos/react-ui-theme";
+import { CaretDown as CaretDown3, Check as Check3, Placeholder } from "@phosphor-icons/react";
+import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
+import React13, { forwardRef as forwardRef2 } from "react";
+import { Button as Button5, DropdownMenu as DropdownMenu2, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { descriptionText as descriptionText4, getSize as getSize5, mx as mx9 } from "@dxos/react-ui-theme";
 var defaultActions = {
   noopAction: {
     label: "No-op",
@@ -541,17 +624,17 @@ var defaultActions = {
 };
 var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
   const { classNames, variant, isFull = true, actions = defaultActions, activeAction: propsActiveAction, onChangeActiveAction, defaultActiveAction, ...rest } = props;
-  const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = useControllableState({
+  const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = useControllableState3({
     prop: propsActiveAction,
     onChange: onChangeActiveAction,
     defaultProp: defaultActiveAction
   });
   const activeAction = actions[activeActionKey2] ?? {};
-  const { t } = useTranslation5("os");
-  return /* @__PURE__ */ React11.createElement("div", {
+  const { t } = useTranslation7("os");
+  return /* @__PURE__ */ React13.createElement("div", {
     role: "none",
     className: mx9("mbs-2 flex gap-px items-center", isFull && "is-full")
-  }, /* @__PURE__ */ React11.createElement(Button3, {
+  }, /* @__PURE__ */ React13.createElement(Button5, {
     ...rest,
     classNames: [
       "bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none",
@@ -560,48 +643,48 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
     ref: forwardedRef,
     variant,
     onClick: activeAction.onClick
-  }, activeAction.icon && /* @__PURE__ */ React11.createElement(activeAction.icon, {
-    className: getSize3(5)
-  }), /* @__PURE__ */ React11.createElement("span", null, activeAction.label)), /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
+  }, activeAction.icon && /* @__PURE__ */ React13.createElement(activeAction.icon, {
+    className: getSize5(5)
+  }), /* @__PURE__ */ React13.createElement("span", null, activeAction.label)), /* @__PURE__ */ React13.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React13.createElement(DropdownMenu2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React11.createElement(Button3, {
+  }, /* @__PURE__ */ React13.createElement(Button5, {
     classNames: [
       "bs-11 flex-none rounded-is-none",
       classNames
     ]
-  }, /* @__PURE__ */ React11.createElement("span", {
+  }, /* @__PURE__ */ React13.createElement("span", {
     className: "sr-only"
-  }, t("invite options label")), /* @__PURE__ */ React11.createElement(CaretDown, {
-    className: getSize3(4)
-  }))), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, Object.entries(actions).map(([id, action]) => {
-    return /* @__PURE__ */ React11.createElement(DropdownMenu.CheckboxItem, {
+  }, t("invite options label")), /* @__PURE__ */ React13.createElement(CaretDown3, {
+    className: getSize5(4)
+  }))), /* @__PURE__ */ React13.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React13.createElement(DropdownMenu2.Viewport, null, Object.entries(actions).map(([id, action]) => {
+    return /* @__PURE__ */ React13.createElement(DropdownMenu2.CheckboxItem, {
       key: id,
       "aria-labelledby": `${id}__label`,
       "aria-describedby": `${id}__description`,
       checked: activeActionKey2 === id,
       onCheckedChange: (checked) => checked && setActiveAction(id),
       classNames: "gap-2"
-    }, action.icon && /* @__PURE__ */ React11.createElement(action.icon, {
-      className: getSize3(5)
-    }), /* @__PURE__ */ React11.createElement("div", {
+    }, action.icon && /* @__PURE__ */ React13.createElement(action.icon, {
+      className: getSize5(5)
+    }), /* @__PURE__ */ React13.createElement("div", {
       role: "none",
       className: "flex-1 min-is-0 space-b-1"
-    }, /* @__PURE__ */ React11.createElement("p", {
+    }, /* @__PURE__ */ React13.createElement("p", {
       id: `${id}__label`
-    }, action.label), action.description && /* @__PURE__ */ React11.createElement("p", {
+    }, action.label), action.description && /* @__PURE__ */ React13.createElement("p", {
       id: `${id}__description`,
       className: descriptionText4
-    }, action.description)), /* @__PURE__ */ React11.createElement(DropdownMenu.ItemIndicator, {
+    }, action.description)), /* @__PURE__ */ React13.createElement(DropdownMenu2.ItemIndicator, {
       asChild: true
-    }, /* @__PURE__ */ React11.createElement(Check2, {
+    }, /* @__PURE__ */ React13.createElement(Check3, {
       weight: "bold",
-      className: getSize3(4)
+      className: getSize5(4)
     })));
-  })), /* @__PURE__ */ React11.createElement(DropdownMenu.Arrow, null))));
+  })), /* @__PURE__ */ React13.createElement(DropdownMenu2.Arrow, null))));
 });
 var Action = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
   const { children, classNames, variant, isFull = true, ...rest } = props;
-  return /* @__PURE__ */ React11.createElement(Button3, {
+  return /* @__PURE__ */ React13.createElement(Button5, {
     ...rest,
     classNames: [
       isFull && "is-full",
@@ -614,10 +697,10 @@ var Action = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
 });
 
 // packages/sdk/shell/src/components/Panel/Actions.tsx
-import React12, { forwardRef as forwardRef3 } from "react";
+import React14, { forwardRef as forwardRef3 } from "react";
 import { mx as mx10 } from "@dxos/react-ui-theme";
 var Actions = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React12.createElement("div", {
+  return /* @__PURE__ */ React14.createElement("div", {
     ...props,
     className: mx10("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
     ref: forwardedRef
@@ -626,37 +709,37 @@ var Actions = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props }, f
 
 // packages/sdk/shell/src/components/Panel/CloseButton.tsx
 import { X as X2 } from "@phosphor-icons/react";
-import React13 from "react";
-import { Button as Button4, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { getSize as getSize4, mx as mx11 } from "@dxos/react-ui-theme";
+import React15 from "react";
+import { Button as Button6, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { getSize as getSize6, mx as mx11 } from "@dxos/react-ui-theme";
 var CloseButton = ({ onDone, ...props }) => {
-  const { t } = useTranslation6("os");
-  return /* @__PURE__ */ React13.createElement(Button4, {
+  const { t } = useTranslation8("os");
+  return /* @__PURE__ */ React15.createElement(Button6, {
     variant: "ghost",
     classNames: mx11("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     onClick: () => onDone?.(),
     ...props
-  }, /* @__PURE__ */ React13.createElement(X2, {
+  }, /* @__PURE__ */ React15.createElement(X2, {
     weight: "bold",
-    className: getSize4(4)
-  }), /* @__PURE__ */ React13.createElement("span", {
+    className: getSize6(4)
+  }), /* @__PURE__ */ React15.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
 };
 
 // packages/sdk/shell/src/components/Panel/Emoji.tsx
-import React14 from "react";
-import { mx as mx12, getSize as getSize5 } from "@dxos/react-ui-theme";
+import React16 from "react";
+import { mx as mx12, getSize as getSize7 } from "@dxos/react-ui-theme";
 var Emoji = ({ text, className }) => {
   const size = 14;
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     role: "none",
-    className: mx12(getSize5(size), "rounded relative pointer-events-none", className)
-  }, /* @__PURE__ */ React14.createElement("svg", {
+    className: mx12(getSize7(size), "rounded relative pointer-events-none", className)
+  }, /* @__PURE__ */ React16.createElement("svg", {
     viewBox: `0 0 ${size * 4} ${size * 4}`,
     width: size * 4,
     height: size * 4
-  }, /* @__PURE__ */ React14.createElement("text", {
+  }, /* @__PURE__ */ React16.createElement("text", {
     x: "50%",
     y: "50%",
     textAnchor: "middle",
@@ -667,55 +750,55 @@ var Emoji = ({ text, className }) => {
 };
 var Centered = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     role: "none",
     className: "absolute inset-0 flex items-center justify-center"
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Heading.tsx
-import React15, { forwardRef as forwardRef4 } from "react";
+import React17, { forwardRef as forwardRef4 } from "react";
 import { descriptionText as descriptionText5, mx as mx13 } from "@dxos/react-ui-theme";
 var Heading = /* @__PURE__ */ forwardRef4(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     role: "none",
     className: "pbe-2 relative",
     ref: forwardedRef
-  }, corner, /* @__PURE__ */ React15.createElement("h1", {
+  }, corner, /* @__PURE__ */ React17.createElement("h1", {
     ...!titleSrOnly && {
       id: titleId
     },
     className: mx13(descriptionText5, "text-center mlb-2", titleSrOnly && "invisible")
-  }, title), titleSrOnly && /* @__PURE__ */ React15.createElement("span", {
+  }, title), titleSrOnly && /* @__PURE__ */ React17.createElement("span", {
     id: titleId
   }, title), children);
 });
 
 // packages/sdk/shell/src/components/Panel/Label.tsx
-import React16 from "react";
+import React18 from "react";
 import { descriptionText as descriptionText6, mx as mx14 } from "@dxos/react-ui-theme";
 var Label = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React16.createElement("span", {
+  return /* @__PURE__ */ React18.createElement("span", {
     className: mx14(descriptionText6, "text-center mli-6 whitespace-normal")
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Input.tsx
-import React17 from "react";
+import React19 from "react";
 import { Input as UiInput } from "@dxos/react-ui";
 var Input = ({ validationMessage, label, ...props }) => {
-  return /* @__PURE__ */ React17.createElement(UiInput.Root, null, /* @__PURE__ */ React17.createElement(UiInput.Label, null, label), /* @__PURE__ */ React17.createElement(UiInput.TextInput, {
+  return /* @__PURE__ */ React19.createElement(UiInput.Root, null, /* @__PURE__ */ React19.createElement(UiInput.Label, null, label), /* @__PURE__ */ React19.createElement(UiInput.TextInput, {
     ...props,
     classNames: "plb-3 mbs-2 text-center"
-  }), /* @__PURE__ */ React17.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React17.createElement(UiInput.Validation, null, validationMessage)));
+  }), /* @__PURE__ */ React19.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React19.createElement(UiInput.Validation, null, validationMessage)));
 };
 
 // packages/sdk/shell/src/components/Panel/StepHeading.tsx
-import React18, { forwardRef as forwardRef5 } from "react";
+import React20, { forwardRef as forwardRef5 } from "react";
 import { mx as mx15 } from "@dxos/react-ui-theme";
 var StepHeading = /* @__PURE__ */ forwardRef5(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React18.createElement("h2", {
+  return /* @__PURE__ */ React20.createElement("h2", {
     ...props,
     className: mx15("font-normal text-sm mbe-4 mli-1 text-center", className),
     ref: forwardedRef
@@ -725,8 +808,8 @@ var StepHeading = /* @__PURE__ */ forwardRef5(({ children, className, ...props }
 // packages/sdk/shell/src/components/Viewport/Viewport.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
 import { createContextScope } from "@radix-ui/react-context";
-import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React19, { forwardRef as forwardRef6, useEffect } from "react";
+import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
+import React21, { forwardRef as forwardRef6, useEffect } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
 import { mx as mx16 } from "@dxos/react-ui-theme";
 var VIEWPORT_NAME = "Viewport";
@@ -735,17 +818,17 @@ var VIEW_NAME = "ViewportView";
 var [createViewportContext, createViewportScope] = createContextScope(VIEWPORT_NAME, []);
 var [ViewportProvider, useViewportContext] = createViewportContext(VIEWPORT_NAME);
 var ViewportRoot = ({ __viewportScope, classNames, children, defaultActiveView, activeView: propsActiveView, focusManaged = false, onActiveViewChange, ...props }) => {
-  const [activeView = "never", setActiveView] = useControllableState2({
+  const [activeView = "never", setActiveView] = useControllableState4({
     prop: propsActiveView,
     defaultProp: defaultActiveView,
     onChange: onActiveViewChange
   });
-  return /* @__PURE__ */ React19.createElement(ViewportProvider, {
+  return /* @__PURE__ */ React21.createElement(ViewportProvider, {
     focusManaged,
     activeView,
     setActiveView,
     scope: __viewportScope
-  }, /* @__PURE__ */ React19.createElement("div", {
+  }, /* @__PURE__ */ React21.createElement("div", {
     role: "region",
     "aria-live": "polite",
     ...props,
@@ -757,7 +840,7 @@ var ViewportViews = ({ classNames, children, ...props }) => {
   const size = {
     inlineSize: `${Math.ceil(children.length) * 100}%`
   };
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     role: "none",
     style: size,
     ...props,
@@ -779,7 +862,7 @@ var ViewportView = /* @__PURE__ */ forwardRef6(({ __viewportScope, classNames, c
     ref.current,
     isActive
   ]);
-  return /* @__PURE__ */ React19.createElement("section", {
+  return /* @__PURE__ */ React21.createElement("section", {
     ...props,
     ...!isActive && {
       "aria-hidden": true
@@ -796,41 +879,41 @@ var Viewport = {
 };
 
 // packages/sdk/shell/src/components/SpaceListItem.tsx
-import React20, { forwardRef as forwardRef7 } from "react";
-import { Avatar as Avatar3, useId as useId3, useJdenticonHref as useJdenticonHref2 } from "@dxos/react-ui";
+import React22, { forwardRef as forwardRef7 } from "react";
+import { Avatar as Avatar3, useId as useId3 } from "@dxos/react-ui";
 import { mx as mx17 } from "@dxos/react-ui-theme";
-import { humanize } from "@dxos/util";
+import { humanize, keyToEmoji } from "@dxos/util";
 var SpaceListItem = /* @__PURE__ */ forwardRef7(({ space, onClick }, ref) => {
-  const fallbackValue = space.key.toHex();
+  const fallbackValue = keyToEmoji(space.key);
   const labelId = useId3("identityListItem__label");
-  const jdenticon = useJdenticonHref2(fallbackValue ?? "", 12);
   const displayName = space.properties.name ?? humanize(space.key.toHex());
-  return /* @__PURE__ */ React20.createElement("li", {
+  return /* @__PURE__ */ React22.createElement("li", {
     className: mx17("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
     onClick: () => onClick?.(),
     ref,
     "data-testid": "space-list-item"
-  }, /* @__PURE__ */ React20.createElement(Avatar3.Root, {
+  }, /* @__PURE__ */ React22.createElement(Avatar3.Root, {
     labelId
-  }, /* @__PURE__ */ React20.createElement(Avatar3.Frame, null, /* @__PURE__ */ React20.createElement(Avatar3.Fallback, {
-    href: jdenticon
-  })), /* @__PURE__ */ React20.createElement(Avatar3.Label, {
+  }, /* @__PURE__ */ React22.createElement(Avatar3.Frame, null, /* @__PURE__ */ React22.createElement(Avatar3.Fallback, {
+    text: fallbackValue
+  })), /* @__PURE__ */ React22.createElement(Avatar3.Label, {
     classNames: "text-sm truncate"
   }, displayName)));
 });
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
-import React40 from "react";
+import React42 from "react";
 import { Dialog, useId as useId9 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-import React27, { useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import React29, { useEffect as useEffect3, useMemo as useMemo3 } from "react";
 import { generateName as generateName3 } from "@dxos/display-name";
 import { log as log3 } from "@dxos/log";
 import { useClient as useClient3 } from "@dxos/react-client";
 import { useIdentity, useDevices, useHaloInvitations as useHaloInvitations2 } from "@dxos/react-client/halo";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
-import { Avatar as Avatar4, DensityProvider as DensityProvider2, useId as useId5, useJdenticonHref as useJdenticonHref3, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { Avatar as Avatar4, DensityProvider as DensityProvider2, useId as useId5, useTranslation as useTranslation15 } from "@dxos/react-ui";
+import { keyToFallback as keyToFallback2 } from "@dxos/util";
 
 // packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts
 import { useMachine } from "@xstate/react";
@@ -959,30 +1042,30 @@ var useIdentityMachine = (client, options) => {
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/AgentForm.tsx
-import React21 from "react";
-import { useTranslation as useTranslation7 } from "@dxos/react-ui";
+import React23 from "react";
+import { useTranslation as useTranslation9 } from "@dxos/react-ui";
 var AgentForm = (props) => {
   const { active, onAgentCreate, onAgentDestroy, send, validationMessage, agentStatus, agentActive, agentProviderDisabled } = props;
   const disabled = !active;
-  const { t } = useTranslation7("os");
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", {
+  const { t } = useTranslation9("os");
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React21.createElement(Input, {
+  }, /* @__PURE__ */ React23.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React21.createElement(StepHeading, null, "Agent Status"),
+    label: /* @__PURE__ */ React23.createElement(StepHeading, null, "Agent Status"),
     disabled,
     "data-testid": "agent-status",
     value: agentStatus
-  })), /* @__PURE__ */ React21.createElement(Actions, null, /* @__PURE__ */ React21.createElement(Action, {
+  })), /* @__PURE__ */ React23.createElement(Actions, null, /* @__PURE__ */ React23.createElement(Action, {
     disabled: agentActive || agentProviderDisabled,
     onClick: () => onAgentCreate?.(),
     "data-testid": "create-agent"
-  }, "Create Agent"), /* @__PURE__ */ React21.createElement(Action, {
+  }, "Create Agent"), /* @__PURE__ */ React23.createElement(Action, {
     disabled: !agentActive || agentProviderDisabled,
     onClick: () => onAgentDestroy?.(),
     "data-testid": "destroy-agent"
-  }, "Destroy Agent"), /* @__PURE__ */ React21.createElement(Action, {
+  }, "Destroy Agent"), /* @__PURE__ */ React23.createElement(Action, {
     disabled,
     onClick: () => send?.({
       type: "unchooseAction"
@@ -992,17 +1075,17 @@ var AgentForm = (props) => {
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/DeviceManager.tsx
-import React22 from "react";
-import { useTranslation as useTranslation8 } from "@dxos/react-ui";
+import React24 from "react";
+import { useTranslation as useTranslation10 } from "@dxos/react-ui";
 var DeviceManager = ({ devices, active, send }) => {
-  const { t } = useTranslation8("os");
+  const { t } = useTranslation10("os");
   const disabled = !active;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: "grow"
-  }, /* @__PURE__ */ React22.createElement(DeviceList, {
+  }, /* @__PURE__ */ React24.createElement(DeviceList, {
     devices
-  })), /* @__PURE__ */ React22.createElement(Actions, null, /* @__PURE__ */ React22.createElement(Action, {
+  })), /* @__PURE__ */ React24.createElement(Actions, null, /* @__PURE__ */ React24.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send?.({
@@ -1014,12 +1097,12 @@ var DeviceManager = ({ devices, active, send }) => {
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
 import { CaretRight, Devices, Plus, Power, UserGear, HardDrive } from "@phosphor-icons/react";
-import React23, { useCallback as useCallback4 } from "react";
+import React25, { useCallback as useCallback4 } from "react";
 import { useAgentHostingProviderClient, useClient as useClient2 } from "@dxos/react-client";
 import { useHaloInvitations } from "@dxos/react-client/halo";
-import { Invitation as Invitation3, InvitationEncoder } from "@dxos/react-client/invitations";
-import { DensityProvider, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { getSize as getSize6 } from "@dxos/react-ui-theme";
+import { Invitation as Invitation2, InvitationEncoder } from "@dxos/react-client/invitations";
+import { DensityProvider, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { getSize as getSize8 } from "@dxos/react-ui-theme";
 var IdentityActionChooser = (props) => {
   const { send } = props;
   const client = useClient2();
@@ -1027,7 +1110,7 @@ var IdentityActionChooser = (props) => {
   const agentHostingProviderClient = useAgentHostingProviderClient(client.config);
   const onInvitationEvent = useCallback4((invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
-    if (invitation.state === Invitation3.State.CONNECTING) {
+    if (invitation.state === Invitation2.State.CONNECTING) {
       console.log(JSON.stringify({
         invitationCode,
         authCode: invitation.authCode
@@ -1038,8 +1121,8 @@ var IdentityActionChooser = (props) => {
     const testing = e.altKey && e.shiftKey;
     invitations.forEach((invitation2) => invitation2.cancel());
     const invitation = client.halo.share(testing ? {
-      type: Invitation3.Type.MULTIUSE,
-      authMethod: Invitation3.AuthMethod.NONE
+      type: Invitation2.Type.MULTIUSE,
+      authMethod: Invitation2.AuthMethod.NONE
     } : void 0);
     if (true) {
       invitation.subscribe(onInvitationEvent);
@@ -1049,138 +1132,157 @@ var IdentityActionChooser = (props) => {
       invitation
     });
   };
-  return /* @__PURE__ */ React23.createElement(IdentityActionChooserImpl, {
+  return /* @__PURE__ */ React25.createElement(IdentityActionChooserImpl, {
     ...props,
     onCreateInvitationClick: (e) => createInvitation(e),
     agentHostingEnabled: !!agentHostingProviderClient
   });
 };
 var IdentityActionChooserImpl = ({ onCreateInvitationClick, active, send, onDone, doneActionParent, agentHostingEnabled }) => {
-  const { t } = useTranslation9("os");
-  return /* @__PURE__ */ React23.createElement("div", {
+  const { t } = useTranslation11("os");
+  return /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: "grow flex flex-col gap-1"
-  }, /* @__PURE__ */ React23.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React25.createElement(DensityProvider, {
     density: "coarse"
-  }, /* @__PURE__ */ React23.createElement("div", {
+  }, /* @__PURE__ */ React25.createElement("div", {
     className: "grow justify-center flex flex-col gap-1"
-  }, agentHostingEnabled && /* @__PURE__ */ React23.createElement(Action, {
+  }, agentHostingEnabled && /* @__PURE__ */ React25.createElement(Action, {
     "data-testid": "manage-agent",
     onClick: () => send?.({
       type: "chooseAgent"
     }),
     classNames: "plb-4"
-  }, /* @__PURE__ */ React23.createElement(HardDrive, {
-    className: getSize6(6)
-  }), /* @__PURE__ */ React23.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement(HardDrive, {
+    className: getSize8(6)
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow mli-3"
-  }, "Manage Agent"), /* @__PURE__ */ React23.createElement(CaretRight, {
+  }, "Manage Agent"), /* @__PURE__ */ React25.createElement(CaretRight, {
     weight: "bold",
-    className: getSize6(4)
-  })), /* @__PURE__ */ React23.createElement(Action, {
+    className: getSize8(4)
+  })), /* @__PURE__ */ React25.createElement(Action, {
     disabled: !active,
     "data-testid": "devices-panel.create-invitation",
     onClick: onCreateInvitationClick,
     classNames: "plb-4"
-  }, /* @__PURE__ */ React23.createElement(Plus, {
-    className: getSize6(6)
-  }), /* @__PURE__ */ React23.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement(Plus, {
+    className: getSize8(6)
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow mli-3"
-  }, t("choose add device label")), /* @__PURE__ */ React23.createElement(CaretRight, {
+  }, t("choose add device label")), /* @__PURE__ */ React25.createElement(CaretRight, {
     weight: "bold",
-    className: getSize6(4)
-  })), /* @__PURE__ */ React23.createElement(Action, {
+    className: getSize8(4)
+  })), /* @__PURE__ */ React25.createElement(Action, {
     "data-testid": "manage-devices",
     onClick: () => send?.({
       type: "chooseDevices"
     }),
     classNames: "plb-4"
-  }, /* @__PURE__ */ React23.createElement(Devices, {
-    className: getSize6(6)
-  }), /* @__PURE__ */ React23.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement(Devices, {
+    className: getSize8(6)
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow mli-3"
-  }, t("choose devices label")), /* @__PURE__ */ React23.createElement(CaretRight, {
+  }, t("choose devices label")), /* @__PURE__ */ React25.createElement(CaretRight, {
     weight: "bold",
-    className: getSize6(4)
-  })), /* @__PURE__ */ React23.createElement(Action, {
+    className: getSize8(4)
+  })), /* @__PURE__ */ React25.createElement(Action, {
     "data-testid": "manage-profile",
     onClick: () => send?.({
       type: "chooseProfile"
     }),
     classNames: "plb-4"
-  }, /* @__PURE__ */ React23.createElement(UserGear, {
-    className: getSize6(6)
-  }), /* @__PURE__ */ React23.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement(UserGear, {
+    className: getSize8(6)
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow mli-3"
-  }, t("choose profile label")), /* @__PURE__ */ React23.createElement(CaretRight, {
+  }, t("choose profile label")), /* @__PURE__ */ React25.createElement(CaretRight, {
     weight: "bold",
-    className: getSize6(4)
-  })), /* @__PURE__ */ React23.createElement(Action, {
+    className: getSize8(4)
+  })), /* @__PURE__ */ React25.createElement(Action, {
     "data-testid": "devices-panel.sign-out",
     onClick: () => send?.({
       type: "chooseSignOut"
     }),
     classNames: "plb-4"
-  }, /* @__PURE__ */ React23.createElement(Power, {
-    className: getSize6(6)
-  }), /* @__PURE__ */ React23.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement(Power, {
+    className: getSize8(6)
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: "grow mli-3"
-  }, t("choose sign out label")), /* @__PURE__ */ React23.createElement(CaretRight, {
+  }, t("choose sign out label")), /* @__PURE__ */ React25.createElement(CaretRight, {
     weight: "bold",
-    className: getSize6(4)
+    className: getSize8(4)
   })))));
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
-import React24, { useState as useState3 } from "react";
+import React26, { useState as useState4 } from "react";
 import { log as log2 } from "@dxos/log";
-import { useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx";
 var ProfileForm = (props) => {
   const { onUpdateProfile } = props;
-  const { t } = useTranslation10("os");
-  const [validationMessage, setValidationMessage] = useState3("");
+  const { t } = useTranslation12("os");
+  const [validationMessage, setValidationMessage] = useState4("");
   const handleUpdateProfile = async (profile) => {
     await onUpdateProfile?.(profile).catch((error) => {
       log2.catch(error, void 0, {
         F: __dxlog_file2,
-        L: 32,
+        L: 33,
         S: void 0,
         C: (f, a) => f(...a)
       });
       setValidationMessage(t("failed to update profile message"));
     });
   };
-  return /* @__PURE__ */ React24.createElement(ProfileFormImpl, {
+  return /* @__PURE__ */ React26.createElement(ProfileFormImpl, {
     ...props,
     onUpdateProfile: handleUpdateProfile,
     validationMessage
   });
 };
+var getHueValue = (identity) => identity?.profile?.hue || hexToHue(identity?.identityKey.toHex() ?? "0");
+var getEmojiValue = (identity) => identity?.profile?.emoji || hexToEmoji2(identity?.identityKey.toHex() ?? "0");
 var ProfileFormImpl = (props) => {
   const { active, identity, send, onUpdateProfile, validationMessage } = props;
   const profile = identity?.profile;
   const disabled = !active;
-  const { t } = useTranslation10("os");
-  const [inputValue, setInputValue] = useState3(profile?.displayName ?? "");
+  const { t } = useTranslation12("os");
+  const [displayName, setDisplayName] = useState4(profile?.displayName ?? "");
+  const [hue, setHue] = useState4(getHueValue(identity));
+  const [emoji, setEmoji] = useState4(getEmojiValue(identity));
   const { textValue, setTextValue } = useClipboardContext();
   const identityHex = identity?.identityKey.toHex();
   const copied = textValue === identityHex;
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React24.createElement(Input, {
+  }, /* @__PURE__ */ React26.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React24.createElement(StepHeading, null, t("display name input label")),
+    label: /* @__PURE__ */ React26.createElement(StepHeading, {
+      className: "m-0"
+    }, t("display name input label")),
     disabled,
     "data-testid": "display-name-input",
     placeholder: t("display name input placeholder"),
-    value: inputValue,
-    onChange: ({ target: { value } }) => setInputValue(value),
-    onKeyDown: ({ key }) => key === "Enter" && onUpdateProfile?.({
-      displayName: inputValue
-    })
-  })), /* @__PURE__ */ React24.createElement(Actions, null, /* @__PURE__ */ React24.createElement(Action, {
+    value: displayName,
+    onChange: ({ target: { value } }) => setDisplayName(value)
+  }), /* @__PURE__ */ React26.createElement(StepHeading, {
+    className: "mbe-2"
+  }, t("emoji and color label")), /* @__PURE__ */ React26.createElement("div", {
+    role: "none",
+    className: "grid grid-cols-[1fr_min-content] gap-y-2"
+  }, /* @__PURE__ */ React26.createElement(EmojiPicker, {
+    emoji,
+    onChangeEmoji: setEmoji,
+    disabled,
+    onClickClear: () => setEmoji(getEmojiValue(identity))
+  }), /* @__PURE__ */ React26.createElement(HuePicker, {
+    hue,
+    onChangeHue: setHue,
+    disabled,
+    onClickClear: () => setHue(getHueValue(identity))
+  }))), /* @__PURE__ */ React26.createElement(Actions, null, /* @__PURE__ */ React26.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => {
@@ -1189,18 +1291,20 @@ var ProfileFormImpl = (props) => {
       }
     },
     "data-testid": "update-profile-form-copy-key"
-  }, t(copied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React24.createElement(Action, {
+  }, t(copied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React26.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send?.({
       type: "unchooseAction"
     }),
     "data-testid": "update-profile-form-back"
-  }, t("back label")), /* @__PURE__ */ React24.createElement(Action, {
+  }, t("back label")), /* @__PURE__ */ React26.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onUpdateProfile?.({
-      displayName: inputValue
+      displayName,
+      emoji,
+      hue
     }),
     "data-testid": "update-profile-form-continue"
   }, t("done label"))));
@@ -1208,17 +1312,17 @@ var ProfileFormImpl = (props) => {
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/SignOutChooser.tsx
 import { Warning } from "@phosphor-icons/react";
-import React25 from "react";
-import { Message, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { getSize as getSize7, mx as mx18 } from "@dxos/react-ui-theme";
+import React27 from "react";
+import { Message, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { getSize as getSize9, mx as mx18 } from "@dxos/react-ui-theme";
 var SignOutChooser = (props) => {
-  const { t } = useTranslation11("os");
+  const { t } = useTranslation13("os");
   const onResetDevice = () => {
     if (window.confirm(t("reset device confirm message"))) {
       void props.onResetDevice?.();
     }
   };
-  return /* @__PURE__ */ React25.createElement(SignOutChooserImpl, {
+  return /* @__PURE__ */ React27.createElement(SignOutChooserImpl, {
     disabled: !props.active,
     onBack: () => props.send?.({
       type: "unchooseAction"
@@ -1228,24 +1332,24 @@ var SignOutChooser = (props) => {
   });
 };
 var SignOutChooserImpl = ({ disabled, onResetDevice, onJoinNewIdentity, onBack }) => {
-  const { t } = useTranslation11("os");
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("div", {
+  const { t } = useTranslation13("os");
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React25.createElement(Message.Root, {
+  }, /* @__PURE__ */ React27.createElement(Message.Root, {
     valence: "error"
-  }, /* @__PURE__ */ React25.createElement(Message.Title, null, /* @__PURE__ */ React25.createElement(Warning, {
-    className: mx18(getSize7(6), "inline mie-2")
-  }), t("sign out chooser title")), /* @__PURE__ */ React25.createElement(Message.Body, null, t("sign out chooser message")))), /* @__PURE__ */ React25.createElement(Actions, null, /* @__PURE__ */ React25.createElement(Action, {
+  }, /* @__PURE__ */ React27.createElement(Message.Title, null, /* @__PURE__ */ React27.createElement(Warning, {
+    className: mx18(getSize9(6), "inline mie-2")
+  }), t("sign out chooser title")), /* @__PURE__ */ React27.createElement(Message.Body, null, t("sign out chooser message")))), /* @__PURE__ */ React27.createElement(Actions, null, /* @__PURE__ */ React27.createElement(Action, {
     disabled,
     onClick: onBack
-  }, t("back label")), /* @__PURE__ */ React25.createElement(Action, {
+  }, t("back label")), /* @__PURE__ */ React27.createElement(Action, {
     variant: "primary",
     "data-testid": "sign-out.join-new-identity",
     classNames: "!bg-error-500 hover:!bg-error-550",
     disabled,
     onClick: onJoinNewIdentity
-  }, t("join new identity label")), /* @__PURE__ */ React25.createElement(Action, {
+  }, t("join new identity label")), /* @__PURE__ */ React27.createElement(Action, {
     variant: "primary",
     "data-testid": "sign-out.reset-device",
     classNames: "!bg-error-500 hover:!bg-error-550",
@@ -1255,15 +1359,15 @@ var SignOutChooserImpl = ({ disabled, onResetDevice, onJoinNewIdentity, onBack }
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts
-import { useCallback as useCallback5, useEffect as useEffect2, useState as useState4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useState as useState5 } from "react";
 import { invariant } from "@dxos/invariant";
 import { useAgentHostingProviderClient as useAgentHostingProviderClient2 } from "@dxos/react-client";
-import { Invitation as Invitation4, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
+import { Invitation as Invitation3, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts";
 var useAgentHandlers = ({ client, invitations, identity }) => {
-  const [validationMessage, setValidationMessage] = useState4("");
-  const [agentStatus, setAgentStatus] = useState4("");
-  const [agentActive, setAgentActive] = useState4(false);
+  const [validationMessage, setValidationMessage] = useState5("");
+  const [agentStatus, setAgentStatus] = useState5("");
+  const [agentActive, setAgentActive] = useState5(false);
   const agentHostingProviderClient = useAgentHostingProviderClient2(client.config);
   useEffect2(() => {
     const fetchAgentStatus = async () => {
@@ -1284,7 +1388,7 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
   }, []);
   const handleAgentCreate = useCallback5(async (invitation) => {
     const invitationCode = InvitationEncoder2.encode(invitation);
-    if (invitation.state === Invitation4.State.CONNECTING) {
+    if (invitation.state === Invitation3.State.CONNECTING) {
       console.log(JSON.stringify({
         invitationCode,
         authCode: invitation.authCode
@@ -1313,8 +1417,8 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
   const onAgentCreate = async () => {
     invitations.forEach((invitation2) => invitation2.cancel());
     const invitation = client.halo.share({
-      type: Invitation4.Type.MULTIUSE,
-      authMethod: Invitation4.AuthMethod.NONE
+      type: Invitation3.Type.MULTIUSE,
+      authMethod: Invitation3.AuthMethod.NONE
     });
     invitation.subscribe(handleAgentCreate);
   };
@@ -1348,24 +1452,68 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
 };
 
 // packages/sdk/shell/src/steps/InvitationManager.tsx
-import { Check as Check3, X as X3 } from "@phosphor-icons/react";
-import React26, { useMemo as useMemo2 } from "react";
+import { Check as Check4, X as X3 } from "@phosphor-icons/react";
+import React28, { useMemo as useMemo2 } from "react";
 import { QR } from "react-qr-rounded";
 import { Invitation as Invitation5 } from "@dxos/react-client/invitations";
-import { useId as useId4, useTranslation as useTranslation12 } from "@dxos/react-ui";
-import { descriptionText as descriptionText7, getSize as getSize8, mx as mx19 } from "@dxos/react-ui-theme";
+import { useId as useId4, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import { descriptionText as descriptionText7, getSize as getSize10, mx as mx19 } from "@dxos/react-ui-theme";
+import { hexToEmoji as hexToEmoji3 } from "@dxos/util";
+
+// packages/sdk/shell/src/util/invitationStatusValue.ts
+import { Invitation as Invitation4 } from "@dxos/react-client/invitations";
+var invitationStatusValue = /* @__PURE__ */ new Map([
+  [
+    Invitation4.State.ERROR,
+    -3
+  ],
+  [
+    Invitation4.State.TIMEOUT,
+    -2
+  ],
+  [
+    Invitation4.State.CANCELLED,
+    -1
+  ],
+  [
+    Invitation4.State.INIT,
+    0
+  ],
+  [
+    Invitation4.State.CONNECTING,
+    1
+  ],
+  [
+    Invitation4.State.CONNECTED,
+    2
+  ],
+  [
+    Invitation4.State.READY_FOR_AUTHENTICATION,
+    3
+  ],
+  [
+    Invitation4.State.AUTHENTICATING,
+    4
+  ],
+  [
+    Invitation4.State.SUCCESS,
+    5
+  ]
+]);
+
+// packages/sdk/shell/src/steps/InvitationManager.tsx
 var InvitationManagerView = ({ children, ...props }) => {
-  return /* @__PURE__ */ React26.createElement(Viewport.View, {
+  return /* @__PURE__ */ React28.createElement(Viewport.View, {
     ...props,
     classNames: "grow flex flex-col justify-around items-center"
   }, children);
 };
-var InvitationManager = ({ invitationUrl, active, send, status, type, authCode, id }) => {
-  const { t } = useTranslation12("os");
+var InvitationManager = ({ invitationUrl, active, send, status, type, authCode, id = "0" }) => {
+  const { t } = useTranslation14("os");
   const qrLabel = useId4("invitation-manager__qr-code");
   const statusValue = type === Invitation5.Type.MULTIUSE ? 0 : invitationStatusValue.get(status) ?? 0;
   const showAuthCode = statusValue === 3;
-  const emoji2 = toEmoji(id ?? "");
+  const emoji = hexToEmoji3(id);
   const activeView = useMemo2(() => {
     switch (true) {
       case statusValue === 5:
@@ -1379,18 +1527,18 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
   }, [
     statusValue
   ]);
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Viewport.Root, {
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Viewport.Root, {
     activeView,
     classNames: "grow plb-1"
-  }, /* @__PURE__ */ React26.createElement(Viewport.Views, null, /* @__PURE__ */ React26.createElement(InvitationManagerView, {
+  }, /* @__PURE__ */ React28.createElement(Viewport.Views, null, /* @__PURE__ */ React28.createElement(InvitationManagerView, {
     id: "showing qr",
-    emoji: emoji2
-  }, /* @__PURE__ */ React26.createElement("p", {
+    emoji
+  }, /* @__PURE__ */ React28.createElement("p", {
     className: "text-sm mlb-1 font-normal text-center"
-  }, t(type === Invitation5.Type.MULTIUSE ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React26.createElement("div", {
+  }, t(type === Invitation5.Type.MULTIUSE ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React28.createElement("div", {
     role: "none",
     className: mx19(descriptionText7, "is-full max-is-[14rem] relative")
-  }, /* @__PURE__ */ React26.createElement(QR, {
+  }, /* @__PURE__ */ React28.createElement(QR, {
     rounding: 100,
     backgroundColor: "transparent",
     color: "currentColor",
@@ -1398,31 +1546,31 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
     "aria-labelledby": qrLabel,
     errorCorrectionLevel: "Q",
     cutout: true
-  }, invitationUrl ?? "never"), /* @__PURE__ */ React26.createElement(Centered, null, /* @__PURE__ */ React26.createElement(Emoji, {
-    text: emoji2
-  }))), /* @__PURE__ */ React26.createElement("span", {
+  }, invitationUrl ?? "never"), /* @__PURE__ */ React28.createElement(Centered, null, /* @__PURE__ */ React28.createElement(Emoji, {
+    text: emoji
+  }))), /* @__PURE__ */ React28.createElement("span", {
     id: qrLabel,
     className: "sr-only"
-  }, t("qr label")), /* @__PURE__ */ React26.createElement(CopyButton, {
+  }, t("qr label")), /* @__PURE__ */ React28.createElement(CopyButton, {
     variant: "ghost",
     value: invitationUrl ?? "never"
-  })), /* @__PURE__ */ React26.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React28.createElement(InvitationManagerView, {
     id: "showing auth code"
-  }, /* @__PURE__ */ React26.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React26.createElement(AuthCode, {
+  }, /* @__PURE__ */ React28.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React28.createElement(AuthCode, {
     code: authCode,
     large: true,
     classNames: "text-black dark:text-white"
-  }), /* @__PURE__ */ React26.createElement(Label, null, "Be sure the other device is showing this symbol:"), emoji2 && /* @__PURE__ */ React26.createElement(Emoji, {
-    text: emoji2
-  })), /* @__PURE__ */ React26.createElement(InvitationManagerView, {
+  }), /* @__PURE__ */ React28.createElement(Label, null, "Be sure the other device is showing this symbol:"), emoji && /* @__PURE__ */ React28.createElement(Emoji, {
+    text: emoji
+  })), /* @__PURE__ */ React28.createElement(InvitationManagerView, {
     id: "showing final"
-  }, statusValue > 0 ? /* @__PURE__ */ React26.createElement(Check3, {
-    className: mx19("m-1.5", getSize8(6))
-  }) : /* @__PURE__ */ React26.createElement(X3, {
-    className: mx19("m-1.5", getSize8(6))
-  })))), /* @__PURE__ */ React26.createElement(Actions, {
+  }, statusValue > 0 ? /* @__PURE__ */ React28.createElement(Check4, {
+    className: mx19("m-1.5", getSize10(6))
+  }) : /* @__PURE__ */ React28.createElement(X3, {
+    className: mx19("m-1.5", getSize10(6))
+  })))), /* @__PURE__ */ React28.createElement(Actions, {
     classNames: "mbs-4"
-  }, /* @__PURE__ */ React26.createElement(Action, {
+  }, /* @__PURE__ */ React28.createElement(Action, {
     disabled: !active,
     onClick: () => send?.({
       type: "deselectInvitation"
@@ -1434,29 +1582,30 @@ var InvitationManager = ({ invitationUrl, active, send, status, type, authCode,
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
 var viewStyles = "pbs-1 pbe-3 pli-3";
 var IdentityHeading = ({ titleId, title, identity, onDone }) => {
-  const fallbackHref = useJdenticonHref3(identity.identityKey.toHex(), 12);
-  return /* @__PURE__ */ React27.createElement(Heading, {
+  const fallbackValue = keyToFallback2(identity.identityKey);
+  return /* @__PURE__ */ React29.createElement(Heading, {
     titleId,
     title,
-    corner: /* @__PURE__ */ React27.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React29.createElement(CloseButton, {
       onDone
     })
-  }, /* @__PURE__ */ React27.createElement(Avatar4.Root, {
+  }, /* @__PURE__ */ React29.createElement(Avatar4.Root, {
     size: 12,
     variant: "circle",
-    status: "active"
-  }, /* @__PURE__ */ React27.createElement(Avatar4.Frame, {
+    status: "active",
+    hue: identity.profile?.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React29.createElement(Avatar4.Frame, {
     classNames: "block mbs-4 mbe-2 mli-auto chromatic-ignore"
-  }, /* @__PURE__ */ React27.createElement(Avatar4.Fallback, {
-    href: fallbackHref
-  })), /* @__PURE__ */ React27.createElement(Avatar4.Label, {
+  }, /* @__PURE__ */ React29.createElement(Avatar4.Fallback, {
+    text: identity.profile?.emoji || fallbackValue.emoji
+  })), /* @__PURE__ */ React29.createElement(Avatar4.Label, {
     classNames: "block text-center font-light text-xl",
     "data-testid": "identityHeading.displayName"
   }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex()))));
 };
 var IdentityPanelImpl = (props) => {
   const { identity, titleId, activeView, onUpdateProfile, onResetDevice, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, onDone, ...rest } = props;
-  const { t } = useTranslation13("os");
+  const { t } = useTranslation15("os");
   const title = useMemo3(() => {
     switch (activeView) {
       case "agent manager":
@@ -1470,54 +1619,54 @@ var IdentityPanelImpl = (props) => {
     activeView,
     t
   ]);
-  return /* @__PURE__ */ React27.createElement(DensityProvider2, {
+  return /* @__PURE__ */ React29.createElement(DensityProvider2, {
     density: "fine"
-  }, /* @__PURE__ */ React27.createElement(IdentityHeading, {
+  }, /* @__PURE__ */ React29.createElement(IdentityHeading, {
     identity,
     titleId,
     title,
     onDone
-  }), /* @__PURE__ */ React27.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React29.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React27.createElement(Viewport.Views, null, /* @__PURE__ */ React27.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React29.createElement(Viewport.Views, null, /* @__PURE__ */ React29.createElement(Viewport.View, {
     id: "identity action chooser",
     classNames: viewStyles
-  }, /* @__PURE__ */ React27.createElement(IdentityActionChooserComponent, {
+  }, /* @__PURE__ */ React29.createElement(IdentityActionChooserComponent, {
     active: activeView === "identity action chooser",
     ...rest
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     id: "device invitation manager",
     classNames: viewStyles
-  }, /* @__PURE__ */ React27.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React29.createElement(InvitationManagerComponent, {
     active: activeView === "device invitation manager",
     ...rest,
     invitationUrl: rest.createInvitationUrl(rest.invitationCode)
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     id: "device manager",
     classNames: viewStyles
-  }, /* @__PURE__ */ React27.createElement(DeviceManager, {
+  }, /* @__PURE__ */ React29.createElement(DeviceManager, {
     active: activeView === "device manager",
     ...rest
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "update profile form"
-  }, /* @__PURE__ */ React27.createElement(ProfileForm, {
+  }, /* @__PURE__ */ React29.createElement(ProfileForm, {
     send: rest.send,
     active: activeView === "update profile form",
     identity,
     onUpdateProfile
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "signing out"
-  }, /* @__PURE__ */ React27.createElement(SignOutChooser, {
+  }, /* @__PURE__ */ React29.createElement(SignOutChooser, {
     send: rest.send,
     active: activeView === "signing out",
     onResetDevice,
     onJoinNewIdentity
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "agent manager"
-  }, /* @__PURE__ */ React27.createElement(AgentForm, {
+  }, /* @__PURE__ */ React29.createElement(AgentForm, {
     send: rest.send,
     active: activeView === "agent manager",
     ...rest
@@ -1525,7 +1674,7 @@ var IdentityPanelImpl = (props) => {
 };
 var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus2(invitation);
-  return /* @__PURE__ */ React27.createElement(IdentityPanelImpl, {
+  return /* @__PURE__ */ React29.createElement(IdentityPanelImpl, {
     ...props,
     ...invitationStatus
   });
@@ -1550,7 +1699,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       log3("[state]", state, {
         F: __dxlog_file4,
-        L: 138,
+        L: 139,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1610,40 +1759,40 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     onUpdateProfile,
     ...agentProps
   };
-  return identityState.context.invitation ? /* @__PURE__ */ React27.createElement(IdentityPanelWithInvitationImpl, {
+  return identityState.context.invitation ? /* @__PURE__ */ React29.createElement(IdentityPanelWithInvitationImpl, {
     ...implProps,
     invitation: identityState.context.invitation
-  }) : /* @__PURE__ */ React27.createElement(IdentityPanelImpl, implProps);
+  }) : /* @__PURE__ */ React29.createElement(IdentityPanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
-import React37, { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo4 } from "react";
+import React39, { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo4 } from "react";
 import { log as log8 } from "@dxos/log";
 import { useClient as useClient6, useMulticastObservable } from "@dxos/react-client";
 import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
-import { DensityProvider as DensityProvider3, useId as useId7, useThemeContext as useThemeContext3 } from "@dxos/react-ui";
+import { DensityProvider as DensityProvider3, useId as useId7, useThemeContext as useThemeContext4 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinHeading.tsx
 import { X as X4 } from "@phosphor-icons/react";
-import React28, { cloneElement, forwardRef as forwardRef8 } from "react";
-import { Button as Button5, useTranslation as useTranslation14 } from "@dxos/react-ui";
-import { descriptionText as descriptionText8, getSize as getSize9, mx as mx20 } from "@dxos/react-ui-theme";
+import React30, { cloneElement, forwardRef as forwardRef8 } from "react";
+import { Button as Button7, useTranslation as useTranslation16 } from "@dxos/react-ui";
+import { descriptionText as descriptionText8, getSize as getSize11, mx as mx20 } from "@dxos/react-ui-theme";
 var JoinHeading = /* @__PURE__ */ forwardRef8(({ mode, titleId, onExit, exitActionParent }, forwardedRef) => {
-  const { t } = useTranslation14("os");
-  const exitButton = /* @__PURE__ */ React28.createElement(Button5, {
+  const { t } = useTranslation16("os");
+  const exitButton = /* @__PURE__ */ React30.createElement(Button7, {
     variant: "ghost",
     ...onExit && {
       onClick: onExit
     },
     classNames: mx20(descriptionText8, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     "data-testid": "join-exit"
-  }, /* @__PURE__ */ React28.createElement(X4, {
+  }, /* @__PURE__ */ React30.createElement(X4, {
     weight: "bold",
-    className: getSize9(4)
-  }), /* @__PURE__ */ React28.createElement("span", {
+    className: getSize11(4)
+  }), /* @__PURE__ */ React30.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
-  return /* @__PURE__ */ React28.createElement(Heading, {
+  return /* @__PURE__ */ React30.createElement(Heading, {
     ref: forwardedRef,
     titleId,
     title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
@@ -2246,17 +2395,17 @@ var useJoinMachine = (client, options) => {
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx
 import { CaretRight as CaretRight2, Plus as Plus2, QrCode, Textbox } from "@phosphor-icons/react";
-import React29 from "react";
-import { useTranslation as useTranslation15 } from "@dxos/react-ui";
-import { getSize as getSize10 } from "@dxos/react-ui-theme";
+import React31 from "react";
+import { useTranslation as useTranslation17 } from "@dxos/react-ui";
+import { getSize as getSize12 } from "@dxos/react-ui-theme";
 var AdditionMethodChooser = (viewStateProps) => {
   const disabled = !viewStateProps.active;
   const { send } = viewStateProps;
-  const { t } = useTranslation15("os");
+  const { t } = useTranslation17("os");
   const sharedButtonProps = {
     disabled,
-    after: /* @__PURE__ */ React29.createElement(CaretRight2, {
-      className: getSize10(4),
+    after: /* @__PURE__ */ React31.createElement(CaretRight2, {
+      className: getSize12(4),
       weight: "bold"
     }),
     slots: {
@@ -2265,37 +2414,37 @@ var AdditionMethodChooser = (viewStateProps) => {
       }
     }
   };
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React29.createElement("div", {
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React31.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1 grow"
-  }, /* @__PURE__ */ React29.createElement(CompoundButton, {
+  }, /* @__PURE__ */ React31.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("create identity description"),
-    before: /* @__PURE__ */ React29.createElement(Plus2, {
-      className: getSize10(6)
+    before: /* @__PURE__ */ React31.createElement(Plus2, {
+      className: getSize12(6)
     }),
     onClick: () => send({
       type: "createIdentity"
     }),
     "data-autofocus": "choosingAuthMethod",
     "data-testid": "identity-chooser.create-identity"
-  }, t("create identity label")), /* @__PURE__ */ React29.createElement(CompoundButton, {
+  }, t("create identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("join identity description"),
-    before: /* @__PURE__ */ React29.createElement(QrCode, {
-      className: getSize10(6)
+    before: /* @__PURE__ */ React31.createElement(QrCode, {
+      className: getSize12(6)
     }),
     onClick: () => send({
       type: "acceptHaloInvitation"
     }),
     "data-testid": "identity-chooser.join-identity"
-  }, t("join identity label")), /* @__PURE__ */ React29.createElement(CompoundButton, {
+  }, t("join identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
     ...sharedButtonProps,
     // TODO(mykola): Implement recover.
     disabled: true,
     description: t("recover identity description"),
-    before: /* @__PURE__ */ React29.createElement(Textbox, {
-      className: getSize10(6)
+    before: /* @__PURE__ */ React31.createElement(Textbox, {
+      className: getSize12(6)
     }),
     onClick: () => send({
       type: "recoverIdentity"
@@ -2305,37 +2454,39 @@ var AdditionMethodChooser = (viewStateProps) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
-import React30, { cloneElement as cloneElement2 } from "react";
+import React32, { cloneElement as cloneElement2 } from "react";
 import { generateName as generateName4 } from "@dxos/display-name";
-import { Avatar as Avatar5, useId as useId6, useJdenticonHref as useJdenticonHref4, useTranslation as useTranslation16 } from "@dxos/react-ui";
+import { Avatar as Avatar5, useId as useId6, useTranslation as useTranslation18 } from "@dxos/react-ui";
 import { mx as mx21 } from "@dxos/react-ui-theme";
+import { hexToFallback } from "@dxos/util";
 var IdentityAdded = (props) => {
   const { mode, addedIdentity, active, send, onDone, doneActionParent } = props;
   const disabled = !active;
-  const { t } = useTranslation16("os");
-  const fallbackValue = addedIdentity?.identityKey.toHex();
+  const { t } = useTranslation18("os");
+  const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? "0";
+  const fallbackValue = hexToFallback(addedIdentityHex);
   const labelId = useId6("identityListItem__label");
-  const jdenticon = useJdenticonHref4(fallbackValue ?? "", 12);
-  const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName4(addedIdentity?.identityKey.toHex()));
-  const doneAction = /* @__PURE__ */ React30.createElement(Action, {
+  const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName4(addedIdentityHex));
+  const doneAction = /* @__PURE__ */ React32.createElement(Action, {
     ...onDone && {
       onClick: () => onDone(null)
     },
     disabled,
     "data-autofocus": "confirmingAddedIdentity",
     "data-testid": "identity-added-done"
-  }, /* @__PURE__ */ React30.createElement("span", null, t("done label")));
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React30.createElement("div", {
+  }, /* @__PURE__ */ React32.createElement("span", null, t("done label")));
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React32.createElement("div", {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
-  }, /* @__PURE__ */ React30.createElement(Avatar5.Root, {
+  }, /* @__PURE__ */ React32.createElement(Avatar5.Root, {
     status: "active",
-    labelId
-  }, /* @__PURE__ */ React30.createElement(Avatar5.Frame, null, /* @__PURE__ */ React30.createElement(Avatar5.Fallback, {
-    href: jdenticon
-  })), /* @__PURE__ */ React30.createElement(Avatar5.Label, {
+    labelId,
+    hue: addedIdentity?.profile?.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React32.createElement(Avatar5.Frame, null, /* @__PURE__ */ React32.createElement(Avatar5.Fallback, {
+    text: addedIdentity?.profile?.emoji || fallbackValue.emoji
+  })), /* @__PURE__ */ React32.createElement(Avatar5.Label, {
     classNames: mx21("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
-  }, displayName))), /* @__PURE__ */ React30.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React30.createElement(Action, {
+  }, displayName))), /* @__PURE__ */ React32.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React32.createElement(Action, {
     variant: "primary",
     disabled: disabled || !addedIdentity,
     onClick: () => addedIdentity && send({
@@ -2347,17 +2498,17 @@ var IdentityAdded = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
-import React31, { useState as useState5 } from "react";
+import React33, { useState as useState6 } from "react";
 import { log as log5 } from "@dxos/log";
 import { useClient as useClient4 } from "@dxos/react-client";
-import { useTranslation as useTranslation17 } from "@dxos/react-ui";
+import { useTranslation as useTranslation19 } from "@dxos/react-ui";
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
 var IdentityInput = (props) => {
   const { send, method } = props;
   const isRecover = method === "recover identity";
   const client = useClient4();
-  const { t } = useTranslation17("os");
-  const [validationMessage, setValidationMessage] = useState5("");
+  const { t } = useTranslation19("os");
+  const [validationMessage, setValidationMessage] = useState6("");
   const createIdentity = (displayName) => {
     void client.halo.createIdentity({
       [isRecover ? "seedphrase" : "displayName"]: displayName
@@ -2376,7 +2527,7 @@ var IdentityInput = (props) => {
       setValidationMessage(t(isRecover ? "failed to recover identity message" : "failed to create identity message"));
     });
   };
-  return /* @__PURE__ */ React31.createElement(IdentityInputImpl, {
+  return /* @__PURE__ */ React33.createElement(IdentityInputImpl, {
     ...props,
     onDisplayNameConfirm: createIdentity,
     validationMessage
@@ -2385,27 +2536,27 @@ var IdentityInput = (props) => {
 var IdentityInputImpl = (props) => {
   const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
   const disabled = !active;
-  const { t } = useTranslation17("os");
-  const [inputValue, setInputValue] = useState5("");
+  const { t } = useTranslation19("os");
+  const [inputValue, setInputValue] = useState6("");
   const isRecover = method === "recover identity";
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("div", {
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React31.createElement(Input, {
+  }, /* @__PURE__ */ React33.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React31.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
     disabled,
     "data-testid": "identity-input",
     placeholder: isRecover ? "Type your recovery phrase" : "Type a display name",
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+  })), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send?.({
       type: "deselectAuthMethod"
     }),
     "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
-  }, t("back label")), /* @__PURE__ */ React31.createElement(Action, {
+  }, t("back label")), /* @__PURE__ */ React33.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onDisplayNameConfirm?.(inputValue),
@@ -2414,31 +2565,31 @@ var IdentityInputImpl = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAccepted.tsx
-import React32, { cloneElement as cloneElement3 } from "react";
-import { useTranslation as useTranslation18 } from "@dxos/react-ui";
+import React34, { cloneElement as cloneElement3 } from "react";
+import { useTranslation as useTranslation20 } from "@dxos/react-ui";
 var InvitationAccepted = (props) => {
   const { active, Kind, doneActionParent, onDone } = props;
   const disabled = !active;
-  const { t } = useTranslation18("os");
-  const doneAction = /* @__PURE__ */ React32.createElement(Action, {
+  const { t } = useTranslation20("os");
+  const doneAction = /* @__PURE__ */ React34.createElement(Action, {
     variant: "primary",
     onClick: onDone,
     disabled,
     "data-autofocus": `success${Kind}Invitation finishingJoining${Kind}`,
     "data-testid": `${Kind.toLowerCase()}-invitation-accepted-done`
   }, t("done label"));
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", {
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React32.createElement("p", {
+  }, /* @__PURE__ */ React34.createElement("p", {
     className: "text-center text-sm font-normal"
-  }, t("welcome message"))), /* @__PURE__ */ React32.createElement(Actions, null, doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, doneAction) : doneAction));
+  }, t("welcome message"))), /* @__PURE__ */ React34.createElement(Actions, null, doneActionParent ? /* @__PURE__ */ cloneElement3(doneActionParent, {}, doneAction) : doneAction));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
-import React33, { useState as useState6, useEffect as useEffect4, cloneElement as cloneElement4 } from "react";
+import React35, { useState as useState7, useEffect as useEffect4, cloneElement as cloneElement4 } from "react";
 import { log as log6 } from "@dxos/log";
-import { useTranslation as useTranslation19 } from "@dxos/react-ui";
+import { useTranslation as useTranslation21 } from "@dxos/react-ui";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
 var invitationCodeFromUrl = (text) => {
   try {
@@ -2458,8 +2609,8 @@ var invitationCodeFromUrl = (text) => {
 var InvitationInput = (props) => {
   const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } = props;
   const disabled = !active;
-  const { t } = useTranslation19("os");
-  const [inputValue, setInputValue] = useState6(unredeemedCode ?? "");
+  const { t } = useTranslation21("os");
+  const [inputValue, setInputValue] = useState7(unredeemedCode ?? "");
   useEffect4(() => {
     unredeemedCode && setInputValue(unredeemedCode ?? "");
   }, [
@@ -2477,7 +2628,7 @@ var InvitationInput = (props) => {
       }
     });
   };
-  const exitAction = /* @__PURE__ */ React33.createElement(Action, {
+  const exitAction = /* @__PURE__ */ React35.createElement(Action, {
     variant: "ghost",
     disabled,
     ...onExit ? {
@@ -2487,11 +2638,11 @@ var InvitationInput = (props) => {
     },
     "data-testid": "join-exit"
   }, t("cancel label"));
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React33.createElement(Input, {
-    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t("invitation input label")),
+  }, /* @__PURE__ */ React35.createElement(Input, {
+    label: /* @__PURE__ */ React35.createElement(StepHeading, null, t("invitation input label")),
     // TODO(burdon): Translation.
     placeholder: "Type an invitation code",
     disabled,
@@ -2500,14 +2651,14 @@ var InvitationInput = (props) => {
     "data-autofocus": `inputting${Kind}InvitationCode`,
     "data-testid": `${Kind.toLowerCase()}-invitation-input`,
     onKeyUp: ({ key }) => key === "Enter" && handleNext()
-  })), /* @__PURE__ */ React33.createElement(Actions, null, Kind === "Halo" ? /* @__PURE__ */ React33.createElement(Action, {
+  })), /* @__PURE__ */ React35.createElement(Actions, null, Kind === "Halo" ? /* @__PURE__ */ React35.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send({
       type: "deselectAuthMethod"
     }),
     "data-testid": `${Kind.toLowerCase()}-invitation-input-back`
-  }, t("back label")) : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React33.createElement(Action, {
+  }, t("back label")) : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React35.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: handleNext,
@@ -2516,8 +2667,8 @@ var InvitationInput = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationRescuer.tsx
-import React34 from "react";
-import { useTranslation as useTranslation20 } from "@dxos/react-ui";
+import React36 from "react";
+import { useTranslation as useTranslation22 } from "@dxos/react-ui";
 import { descriptionText as descriptionText9 } from "@dxos/react-ui-theme";
 var InvitationActions = ({
   // `invitationState` does report correct state, but here we evaluate whether `failReason` is a better source of truth
@@ -2529,14 +2680,14 @@ var InvitationActions = ({
   Kind,
   failReason
 }) => {
-  const { t } = useTranslation20("os");
+  const { t } = useTranslation22("os");
   if (failReason) {
-    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StepHeading, {
+    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
       className: descriptionText9
-    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React34.createElement("div", {
+    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React36.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
       disabled: !active,
       onClick: () => send({
         type: `reset${Kind}Invitation`
@@ -2544,16 +2695,16 @@ var InvitationActions = ({
       "data-testid": "invitation-rescuer-reset"
     }, t("reset label"))));
   } else {
-    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StepHeading, {
+    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
       className: descriptionText9
-    }, t("connecting status label")), /* @__PURE__ */ React34.createElement("div", {
+    }, t("connecting status label")), /* @__PURE__ */ React36.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
       disabled: true,
       classNames: "order-2",
       "data-testid": "next"
-    }, t("next label")), /* @__PURE__ */ React34.createElement(Action, {
+    }, t("next label")), /* @__PURE__ */ React36.createElement(Action, {
       disabled: !active,
       onClick: onInvitationCancel,
       "data-testid": "invitation-rescuer-cancel"
@@ -2562,46 +2713,47 @@ var InvitationActions = ({
 };
 var InvitationRescuer = (props) => {
   const { Kind, invitationState, active, send } = props;
-  const { t } = useTranslation20("os");
-  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", {
+  const { t } = useTranslation22("os");
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React34.createElement(StepHeading, {
+  }, /* @__PURE__ */ React36.createElement(StepHeading, {
     className: descriptionText9
-  }, "There was a problem joining the space")), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+  }, "There was a problem joining the space")), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
     disabled: !active,
     "data-testid": "invitation-rescuer-blank-reset",
     onClick: () => send({
       type: `reset${Kind}Invitation`
     })
-  }, t("reset label")))) : /* @__PURE__ */ React34.createElement(InvitationActions, props));
+  }, t("reset label")))) : /* @__PURE__ */ React36.createElement(InvitationActions, props));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
-import React35, { useState as useState7 } from "react";
-import { Input as Input2, useTranslation as useTranslation21 } from "@dxos/react-ui";
+import React37, { useState as useState8 } from "react";
+import { Input as Input2, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import { hexToEmoji as hexToEmoji4 } from "@dxos/util";
 var pinLength = 6;
 var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, onInvitationAuthenticate, onInvitationCancel }) => {
   const disabled = !active || pending;
-  const { t } = useTranslation21("os");
+  const { t } = useTranslation23("os");
   const invitationType = Kind.toLowerCase();
-  const [authCode, setAuthCode] = useState7("");
+  const [authCode, setAuthCode] = useState8("");
   const onChange = ({ target: { value } }) => {
     setAuthCode(value);
     if (value.length === pinLength) {
       document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`)?.focus();
     }
   };
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", {
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, invitationId && /* @__PURE__ */ React35.createElement(Emoji, {
-    text: toEmoji(invitationId)
-  }), /* @__PURE__ */ React35.createElement(Input2.Root, failed && {
+  }, invitationId && /* @__PURE__ */ React37.createElement(Emoji, {
+    text: hexToEmoji4(invitationId)
+  }), /* @__PURE__ */ React37.createElement(Input2.Root, failed && {
     validationValence: "error"
-  }, /* @__PURE__ */ React35.createElement(Input2.Label, {
+  }, /* @__PURE__ */ React37.createElement(Input2.Label, {
     asChild: true
-  }, /* @__PURE__ */ React35.createElement(StepHeading, null, t("auth code input label"))), /* @__PURE__ */ React35.createElement(Input2.PinInput, {
+  }, /* @__PURE__ */ React37.createElement(StepHeading, null, t("auth code input label"))), /* @__PURE__ */ React37.createElement(Input2.PinInput, {
     disabled,
     length: pinLength,
     onChange,
@@ -2612,14 +2764,14 @@ var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, on
     "data-prevent-ios-autofocus": true,
     "data-testid": `${invitationType}-auth-code-input`,
     "data-1p-ignore": true
-  }), failed && /* @__PURE__ */ React35.createElement(Input2.DescriptionAndValidation, {
+  }), failed && /* @__PURE__ */ React37.createElement(Input2.DescriptionAndValidation, {
     classNames: "text-center"
-  }, /* @__PURE__ */ React35.createElement(Input2.Validation, null, t("failed to authenticate message"))))), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(Action, {
+  }, /* @__PURE__ */ React37.createElement(Input2.Validation, null, t("failed to authenticate message"))))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => onInvitationCancel?.(),
     "data-testid": `${invitationType}-invitation-authenticator-cancel`
-  }, t("cancel label")), /* @__PURE__ */ React35.createElement(Action, {
+  }, t("cancel label")), /* @__PURE__ */ React37.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onInvitationAuthenticate?.(authCode),
@@ -2629,16 +2781,16 @@ var InvitationAuthenticator = ({ failed, Kind, active, pending, invitationId, on
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/ResetIdentity.tsx
-import React36, { useState as useState8 } from "react";
+import React38, { useState as useState9 } from "react";
 import { log as log7 } from "@dxos/log";
 import { useClient as useClient5 } from "@dxos/react-client";
-import { useTranslation as useTranslation22 } from "@dxos/react-ui";
+import { useTranslation as useTranslation24 } from "@dxos/react-ui";
 var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/ResetIdentity.tsx";
 var ResetIdentity = ({ send, active }) => {
   const client = useClient5();
-  const { t } = useTranslation22("os");
-  const [validationMessage, setValidationMessage] = useState8("");
-  const [pending, setPending] = useState8(false);
+  const { t } = useTranslation24("os");
+  const [validationMessage, setValidationMessage] = useState9("");
+  const [pending, setPending] = useState9(false);
   const resetIdentity = () => {
     setPending(true);
     void client.reset().then(() => send?.({
@@ -2654,7 +2806,7 @@ var ResetIdentity = ({ send, active }) => {
       setPending(false);
     });
   };
-  return /* @__PURE__ */ React36.createElement(ResetIdentityImpl, {
+  return /* @__PURE__ */ React38.createElement(ResetIdentityImpl, {
     disabled: !active,
     pending,
     validationMessage,
@@ -2662,22 +2814,22 @@ var ResetIdentity = ({ send, active }) => {
   });
 };
 var ResetIdentityImpl = ({ disabled, pending, validationMessage, onConfirm }) => {
-  const { t } = useTranslation22("os");
+  const { t } = useTranslation24("os");
   const confirmationValue = t("confirmation value");
-  const [inputValue, setInputValue] = useState8("");
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", {
+  const [inputValue, setInputValue] = useState9("");
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React36.createElement(Input, {
+  }, /* @__PURE__ */ React38.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React36.createElement(StepHeading, null, t("reset identity input label", {
+    label: /* @__PURE__ */ React38.createElement(StepHeading, null, t("reset identity input label", {
       confirmationValue
     })),
     disabled,
     "data-testid": "reset-identity-input",
     placeholder: confirmationValue,
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
+  })), /* @__PURE__ */ React38.createElement(Actions, null, /* @__PURE__ */ React38.createElement(Action, {
     // TODO(wittjosiah): Probably make this red?
     variant: "primary",
     disabled: disabled || pending || inputValue !== confirmationValue,
@@ -2714,47 +2866,47 @@ var resolvedTextColor = (status) => status === Invitation7.State.ERROR ? errorTe
 var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
 var JoinPanelImpl = (props) => {
   const { titleId, send, activeView, failed, mode, unredeemedCodes, invitationStates, succeededKeys, failReasons, onExit, onHaloDone, onSpaceDone, exitActionParent, doneActionParent, onHaloInvitationCancel, onSpaceInvitationCancel, onHaloInvitationAuthenticate, onSpaceInvitationAuthenticate, IdentityInput: IdentityInputComponent = IdentityInput, ResetIdentity: ResetIdentityComponent = ResetIdentity } = props;
-  return /* @__PURE__ */ React37.createElement(DensityProvider3, {
+  return /* @__PURE__ */ React39.createElement(DensityProvider3, {
     density: "fine"
-  }, mode !== "halo-only" && /* @__PURE__ */ React37.createElement(JoinHeading, {
+  }, mode !== "halo-only" && /* @__PURE__ */ React39.createElement(JoinHeading, {
     titleId,
     mode,
     onExit,
     exitActionParent
-  }), /* @__PURE__ */ React37.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React39.createElement(Viewport.Root, {
     focusManaged: true,
     activeView
-  }, /* @__PURE__ */ React37.createElement(Viewport.Views, null, /* @__PURE__ */ React37.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React39.createElement(Viewport.Views, null, /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "addition method chooser"
-  }, /* @__PURE__ */ React37.createElement(AdditionMethodChooser, {
+  }, /* @__PURE__ */ React39.createElement(AdditionMethodChooser, {
     send,
     active: activeView === "addition method chooser"
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "reset identity confirmation"
-  }, /* @__PURE__ */ React37.createElement(ResetIdentityComponent, {
+  }, /* @__PURE__ */ React39.createElement(ResetIdentityComponent, {
     send,
     method: "reset identity",
     active: activeView === "reset identity confirmation"
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "create identity input"
-  }, /* @__PURE__ */ React37.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React39.createElement(IdentityInputComponent, {
     send,
     method: "create identity",
     active: activeView === "create identity input"
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "recover identity input"
-  }, /* @__PURE__ */ React37.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React39.createElement(IdentityInputComponent, {
     send,
     method: "recover identity",
     active: activeView === "recover identity input"
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation input"
-  }, /* @__PURE__ */ React37.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React39.createElement(InvitationInput, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation input",
@@ -2764,20 +2916,20 @@ var JoinPanelImpl = (props) => {
     ...succeededKeys?.Halo && {
       succeededKeys: succeededKeys.Halo
     }
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation rescuer"
-  }, /* @__PURE__ */ React37.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React39.createElement(InvitationRescuer, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation rescuer",
     invitationState: invitationStates?.Halo,
     onInvitationCancel: onHaloInvitationCancel,
     failReason: failReasons?.Halo
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation authenticator"
-  }, /* @__PURE__ */ React37.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React39.createElement(InvitationAuthenticator, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation authenticator",
@@ -2786,28 +2938,28 @@ var JoinPanelImpl = (props) => {
     ...failed.has("Halo") && {
       failed: true
     }
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation accepted"
-  }, /* @__PURE__ */ React37.createElement(InvitationAccepted, {
+  }, /* @__PURE__ */ React39.createElement(InvitationAccepted, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation accepted",
     doneActionParent,
     onDone: onHaloDone
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "identity added"
-  }, /* @__PURE__ */ React37.createElement(IdentityAdded, {
+  }, /* @__PURE__ */ React39.createElement(IdentityAdded, {
     send,
     mode,
     active: activeView === "identity added",
     doneActionParent,
     onDone: onHaloDone
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation input"
-  }, /* @__PURE__ */ React37.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React39.createElement(InvitationInput, {
     send,
     Kind: "Space",
     active: activeView === "space invitation input",
@@ -2819,20 +2971,20 @@ var JoinPanelImpl = (props) => {
     },
     onExit,
     exitActionParent
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation rescuer"
-  }, /* @__PURE__ */ React37.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React39.createElement(InvitationRescuer, {
     send,
     Kind: "Space",
     active: activeView === "space invitation rescuer",
     invitationState: invitationStates?.Space,
     onInvitationCancel: onSpaceInvitationCancel,
     failReason: failReasons?.Space
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation authenticator"
-  }, /* @__PURE__ */ React37.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React39.createElement(InvitationAuthenticator, {
     send,
     Kind: "Space",
     active: activeView === "space invitation authenticator",
@@ -2841,10 +2993,10 @@ var JoinPanelImpl = (props) => {
     ...failed.has("Space") && {
       failed: true
     }
-  })), /* @__PURE__ */ React37.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation accepted"
-  }, /* @__PURE__ */ React37.createElement(InvitationAccepted, {
+  }, /* @__PURE__ */ React39.createElement(InvitationAccepted, {
     send,
     Kind: "Space",
     active: activeView === "space invitation accepted",
@@ -2855,7 +3007,7 @@ var JoinPanelImpl = (props) => {
 var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone: propsOnDone }) => {
   const client = useClient6();
   const identity = useIdentity2();
-  const { hasIosKeyboard } = useThemeContext3();
+  const { hasIosKeyboard } = useThemeContext4();
   const titleId = useId7("joinPanel__heading", propsTitleId);
   const [joinState, joinSend, joinService] = useJoinMachine(client, {
     context: {
@@ -3084,7 +3236,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCod
     joinState,
     propsOnDone
   ]);
-  return /* @__PURE__ */ React37.createElement(JoinPanelImpl, {
+  return /* @__PURE__ */ React39.createElement(JoinPanelImpl, {
     titleId,
     mode,
     send: joinSend,
@@ -3123,10 +3275,10 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialInvitationCod
 
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 import { Planet } from "@phosphor-icons/react";
-import React39, { useEffect as useEffect6, useMemo as useMemo5 } from "react";
+import React41, { useEffect as useEffect6, useMemo as useMemo5 } from "react";
 import { log as log10 } from "@dxos/log";
 import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client/invitations";
-import { DensityProvider as DensityProvider4, useId as useId8, useTranslation as useTranslation24 } from "@dxos/react-ui";
+import { DensityProvider as DensityProvider4, useId as useId8, useTranslation as useTranslation26 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts
 import { useMachine as useMachine3 } from "@xstate/react";
@@ -3192,16 +3344,16 @@ var useSpaceMachine = (options) => {
 
 // packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx
 import { Placeholder as Placeholder2, UserPlus, UsersThree } from "@phosphor-icons/react";
-import React38, { useCallback as useCallback8, useState as useState9 } from "react";
+import React40, { useCallback as useCallback8, useState as useState10 } from "react";
 import { useConfig } from "@dxos/react-client";
 import { useSpaceInvitations as useSpaceInvitations2 } from "@dxos/react-client/echo";
 import { Invitation as Invitation8, InvitationEncoder as InvitationEncoder4 } from "@dxos/react-client/invitations";
-import { ScrollArea, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import { ScrollArea, useTranslation as useTranslation25 } from "@dxos/react-ui";
 import { descriptionText as descriptionText10, mx as mx22 } from "@dxos/react-ui-theme";
 var activeActionKey = "dxos:react-shell/space-manager/active-action";
 var SpaceManager = (props) => {
   const { space, target } = props;
-  const { t } = useTranslation23("os");
+  const { t } = useTranslation25("os");
   const config = useConfig();
   const invitations = useSpaceInvitations2(space?.key);
   const onInvitationEvent = useCallback8((invitation) => {
@@ -3249,7 +3401,7 @@ var SpaceManager = (props) => {
       ])
     }
   };
-  return /* @__PURE__ */ React38.createElement(SpaceManagerImpl, {
+  return /* @__PURE__ */ React40.createElement(SpaceManagerImpl, {
     ...props,
     invitations,
     inviteActions
@@ -3258,7 +3410,7 @@ var SpaceManager = (props) => {
 var headingFragment = "pis-3 pie-1 plb-1 mbe-1 font-medium";
 var SpaceManagerImpl = (props) => {
   const { active, space, createInvitationUrl, send, inviteActions: propsInviteActions, invitations, showInactiveInvitations, SpaceMemberList: SpaceMemberListComponent = SpaceMemberList, InvitationList: InvitationListComponent = InvitationList } = props;
-  const { t } = useTranslation23("os");
+  const { t } = useTranslation25("os");
   const inviteActions = propsInviteActions ?? {
     noopInvite: {
       label: t("create space invitation label"),
@@ -3268,7 +3420,7 @@ var SpaceManagerImpl = (props) => {
       }
     }
   };
-  const [activeAction, setInternalActiveAction] = useState9(localStorage.getItem(activeActionKey) ?? "inviteOne");
+  const [activeAction, setInternalActiveAction] = useState10(localStorage.getItem(activeActionKey) ?? "inviteOne");
   const setActiveAction = (nextAction) => {
     setInternalActiveAction(nextAction);
     localStorage.setItem(activeActionKey, nextAction);
@@ -3276,26 +3428,26 @@ var SpaceManagerImpl = (props) => {
   const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
     Invitation8.State.CANCELLED
   ].includes(invitation.get().state));
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(ScrollArea.Root, {
     classNames: "grow shrink basis-28 -mli-2"
-  }, /* @__PURE__ */ React38.createElement(ScrollArea.Viewport, {
+  }, /* @__PURE__ */ React40.createElement(ScrollArea.Viewport, {
     classNames: "is-full pie-2"
-  }, !!visibleInvitations?.length && /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement("h3", {
+  }, !!visibleInvitations?.length && /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement("h3", {
     className: mx22(headingFragment, descriptionText10)
-  }, t("invitation list heading")), /* @__PURE__ */ React38.createElement(InvitationListComponent, {
+  }, t("invitation list heading")), /* @__PURE__ */ React40.createElement(InvitationListComponent, {
     className: "mb-2",
     send,
     invitations: visibleInvitations ?? [],
     onClickRemove: (invitation) => invitation.cancel(),
     createInvitationUrl
-  }), /* @__PURE__ */ React38.createElement("h3", {
+  }), /* @__PURE__ */ React40.createElement("h3", {
     className: mx22(headingFragment, descriptionText10, "mbs-2")
-  }, t("space member list heading"))), /* @__PURE__ */ React38.createElement(SpaceMemberListComponent, {
+  }, t("space member list heading"))), /* @__PURE__ */ React40.createElement(SpaceMemberListComponent, {
     spaceKey: space.key,
     includeSelf: true
-  })), /* @__PURE__ */ React38.createElement(ScrollArea.Scrollbar, {
+  })), /* @__PURE__ */ React40.createElement(ScrollArea.Scrollbar, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React38.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React38.createElement(Actions, null, /* @__PURE__ */ React38.createElement(BifurcatedAction, {
+  }, /* @__PURE__ */ React40.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React40.createElement(Actions, null, /* @__PURE__ */ React40.createElement(BifurcatedAction, {
     disabled: !active,
     actions: inviteActions,
     activeAction,
@@ -3307,47 +3459,47 @@ var SpaceManagerImpl = (props) => {
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
 var SpacePanelHeading = ({ titleId, space, onDone }) => {
-  const { t } = useTranslation24("os");
+  const { t } = useTranslation26("os");
   const name = space.properties.name;
-  return /* @__PURE__ */ React39.createElement(Heading, {
+  return /* @__PURE__ */ React41.createElement(Heading, {
     titleId,
     title: t("space panel heading"),
-    corner: /* @__PURE__ */ React39.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React41.createElement(CloseButton, {
       "data-testid": "identity-panel-done",
       onDone
     })
-  }, /* @__PURE__ */ React39.createElement("div", {
+  }, /* @__PURE__ */ React41.createElement("div", {
     role: "none",
     className: "flex gap-4 items-center justify-center mlb-4"
-  }, /* @__PURE__ */ React39.createElement(Planet, {
+  }, /* @__PURE__ */ React41.createElement(Planet, {
     size: 32,
     weight: "light"
-  }), /* @__PURE__ */ React39.createElement("div", {
+  }), /* @__PURE__ */ React41.createElement("div", {
     className: "block text-start font-light text-xl"
   }, name ?? space.key.truncate())));
 };
 var SpacePanelImpl = (props) => {
   const { titleId, activeView, space, target, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
-  return /* @__PURE__ */ React39.createElement(DensityProvider4, {
+  return /* @__PURE__ */ React41.createElement(DensityProvider4, {
     density: "fine"
-  }, /* @__PURE__ */ React39.createElement(SpacePanelHeading, {
+  }, /* @__PURE__ */ React41.createElement(SpacePanelHeading, {
     ...rest,
     titleId,
     space
-  }), /* @__PURE__ */ React39.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React41.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React39.createElement(Viewport.Views, null, /* @__PURE__ */ React39.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React41.createElement(Viewport.Views, null, /* @__PURE__ */ React41.createElement(Viewport.View, {
     id: "space manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React39.createElement(SpaceManagerComponent, {
+  }, /* @__PURE__ */ React41.createElement(SpaceManagerComponent, {
     active: activeView === "space manager",
     space,
     target,
     ...rest
-  })), /* @__PURE__ */ React39.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React41.createElement(Viewport.View, {
     id: "space invitation manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React39.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React41.createElement(InvitationManagerComponent, {
     active: activeView === "space invitation manager",
     ...rest,
     invitationUrl: props.invitationUrl
@@ -3355,7 +3507,7 @@ var SpacePanelImpl = (props) => {
 };
 var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus3(invitation);
-  return /* @__PURE__ */ React39.createElement(SpacePanelImpl, {
+  return /* @__PURE__ */ React41.createElement(SpacePanelImpl, {
     ...props,
     ...invitationStatus,
     invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
@@ -3402,91 +3554,91 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
   };
   return spaceState.context.invitation ? (
     // TODO(wittjosiah): Unused? Remove?
-    /* @__PURE__ */ React39.createElement(SpacePanelWithInvitationImpl, {
+    /* @__PURE__ */ React41.createElement(SpacePanelWithInvitationImpl, {
       ...implProps,
       invitation: spaceState.context.invitation
     })
-  ) : /* @__PURE__ */ React39.createElement(SpacePanelImpl, implProps);
+  ) : /* @__PURE__ */ React41.createElement(SpacePanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 var IdentityDialog = (props) => {
   const titleId = useId9("spaceDialog__title");
-  return /* @__PURE__ */ React40.createElement(Dialog.Root, {
+  return /* @__PURE__ */ React42.createElement(Dialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || props.onDone?.()
-  }, /* @__PURE__ */ React40.createElement(Dialog.Portal, null, /* @__PURE__ */ React40.createElement(Dialog.Overlay, null, /* @__PURE__ */ React40.createElement(Dialog.Content, {
+  }, /* @__PURE__ */ React42.createElement(Dialog.Portal, null, /* @__PURE__ */ React42.createElement(Dialog.Overlay, null, /* @__PURE__ */ React42.createElement(Dialog.Content, {
     "aria-labelledby": titleId,
     onOpenAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React40.createElement(ClipboardProvider, null, /* @__PURE__ */ React40.createElement(IdentityPanel, {
+  }, /* @__PURE__ */ React42.createElement(ClipboardProvider, null, /* @__PURE__ */ React42.createElement(IdentityPanel, {
     ...props,
     titleId,
-    doneActionParent: /* @__PURE__ */ React40.createElement(Dialog.Close, {
+    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
-import React41 from "react";
+import React43 from "react";
 import { AlertDialog, useId as useId10, useVisualViewport } from "@dxos/react-ui";
 var JoinDialog = (joinPanelProps) => {
   const titleId = useId10("joinDialog__title");
   const { height } = useVisualViewport();
-  return /* @__PURE__ */ React41.createElement(AlertDialog.Root, {
+  return /* @__PURE__ */ React43.createElement(AlertDialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))
-  }, /* @__PURE__ */ React41.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React41.createElement(AlertDialog.Overlay, {
+  }, /* @__PURE__ */ React43.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React43.createElement(AlertDialog.Overlay, {
     classNames: "backdrop-blur",
     ...height && {
       style: {
         blockSize: `${height}px`
       }
     }
-  }, /* @__PURE__ */ React41.createElement(AlertDialog.Content, {
+  }, /* @__PURE__ */ React43.createElement(AlertDialog.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React41.createElement(JoinPanel, {
+  }, /* @__PURE__ */ React43.createElement(JoinPanel, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Cancel, {
+    exitActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Action, {
+    doneActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Action, {
       asChild: true
     })
   })))));
 };
 
 // packages/sdk/shell/src/composites/Shell/run-shell.tsx
-import React44, { StrictMode } from "react";
+import React46, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { ShellRuntimeImpl } from "@dxos/client-services";
 import { Client, ClientContext, ClientServicesProxy, Config, SystemStatus } from "@dxos/react-client";
-import { ThemeProvider, Tooltip as Tooltip3 } from "@dxos/react-ui";
+import { ThemeProvider, Tooltip as Tooltip5 } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
 import { createIFramePort } from "@dxos/rpc-tunnel";
 
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
-import React43, { useEffect as useEffect7, useState as useState10 } from "react";
+import React45, { useEffect as useEffect7, useState as useState11 } from "react";
 import { log as log11 } from "@dxos/log";
 import { ShellDisplay, ShellLayout, useClient as useClient7 } from "@dxos/react-client";
 import { useSpace as useSpace2 } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/composites/SpaceDialog/SpaceDialog.tsx
-import React42 from "react";
+import React44 from "react";
 import { Dialog as Dialog2, useId as useId11 } from "@dxos/react-ui";
 var SpaceDialog = (spacePanelProps) => {
   const titleId = useId11("spaceDialog__title");
-  return /* @__PURE__ */ React42.createElement(Dialog2.Root, {
+  return /* @__PURE__ */ React44.createElement(Dialog2.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || spacePanelProps.onDone?.()
-  }, /* @__PURE__ */ React42.createElement(Dialog2.Portal, null, /* @__PURE__ */ React42.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React42.createElement(Dialog2.Content, {
+  }, /* @__PURE__ */ React44.createElement(Dialog2.Portal, null, /* @__PURE__ */ React44.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React44.createElement(Dialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React42.createElement(ClipboardProvider, null, /* @__PURE__ */ React42.createElement(SpacePanel, {
+  }, /* @__PURE__ */ React44.createElement(ClipboardProvider, null, /* @__PURE__ */ React44.createElement(SpacePanel, {
     ...spacePanelProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog2.Close, {
+    doneActionParent: /* @__PURE__ */ React44.createElement(Dialog2.Close, {
       asChild: true
     })
   }))))));
@@ -3495,7 +3647,7 @@ var SpaceDialog = (spacePanelProps) => {
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
 var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
 var Shell = ({ runtime, origin }) => {
-  const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState10({
+  const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState11({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey,
@@ -3533,7 +3685,7 @@ var Shell = ({ runtime, origin }) => {
   ]);
   switch (layout) {
     case ShellLayout.INITIALIZE_IDENTITY:
-      return /* @__PURE__ */ React43.createElement(JoinDialog, {
+      return /* @__PURE__ */ React45.createElement(JoinDialog, {
         mode: "halo-only",
         initialInvitationCode: invitationCode,
         onDone: () => {
@@ -3548,7 +3700,7 @@ var Shell = ({ runtime, origin }) => {
     case ShellLayout.IDENTITY:
     case ShellLayout.SHARE_IDENTITY:
     case ShellLayout.EDIT_PROFILE:
-      return /* @__PURE__ */ React43.createElement(IdentityDialog, {
+      return /* @__PURE__ */ React45.createElement(IdentityDialog, {
         createInvitationUrl: (invitationCode2) => `${origin}?deviceInvitationCode=${invitationCode2}`,
         onResetDevice: async () => {
           await client.reset();
@@ -3570,7 +3722,7 @@ var Shell = ({ runtime, origin }) => {
         }
       });
     case ShellLayout.SPACE:
-      return space ? /* @__PURE__ */ React43.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React45.createElement(SpaceDialog, {
         space,
         target,
         createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
@@ -3584,7 +3736,7 @@ var Shell = ({ runtime, origin }) => {
         }
       }) : null;
     case ShellLayout.JOIN_SPACE:
-      return /* @__PURE__ */ React43.createElement(JoinDialog, {
+      return /* @__PURE__ */ React45.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
         onDone: async (result) => {
           const target2 = result?.target ?? void 0;
@@ -3718,7 +3870,28 @@ var os = {
   "sign out chooser message": "Proceeding with either action below will erase all data on this device.",
   "join new identity label": "Join a new identity",
   "reset device label": "Reset device",
-  "reset device confirm message": "Are you sure you want to reset your device? All data will be lost."
+  "reset device confirm message": "Are you sure you want to reset your device? All data will be lost.",
+  "emoji and color label": "Emoji and color",
+  "clear label": "Use default",
+  "select emoji label": "Choose an emoji to use in your avatar",
+  "select hue label": "Choose a hue to use in your avatar",
+  "red label": "Red",
+  "orange label": "Orange",
+  "amber label": "Amber",
+  "yellow label": "Yellow",
+  "lime label": "Lime",
+  "green label": "Green",
+  "emerald label": "Emerald",
+  "teal label": "Teal",
+  "cyan label": "Cyan",
+  "sky label": "Sky",
+  "blue label": "Blue",
+  "indigo label": "Indigo",
+  "violet label": "Violet",
+  "purple label": "Purple",
+  "fuchsia label": "Fuchsia",
+  "pink label": "Pink",
+  "rose label": "Rose"
 };
 
 // packages/sdk/shell/src/translations/index.ts
@@ -3742,24 +3915,24 @@ var runShell = async (config = new Config()) => {
     runtime.open(),
     client.initialize()
   ]);
-  createRoot(document.getElementById("root")).render(/* @__PURE__ */ React44.createElement(StrictMode, null, /* @__PURE__ */ React44.createElement(ThemeProvider, {
+  createRoot(document.getElementById("root")).render(/* @__PURE__ */ React46.createElement(StrictMode, null, /* @__PURE__ */ React46.createElement(ThemeProvider, {
     tx: defaultTx,
     resourceExtensions: [
       osTranslations
     ]
-  }, /* @__PURE__ */ React44.createElement(ClientContext.Provider, {
+  }, /* @__PURE__ */ React46.createElement(ClientContext.Provider, {
     value: {
       client,
       status: SystemStatus.ACTIVE
     }
-  }, /* @__PURE__ */ React44.createElement(ClipboardProvider, null, /* @__PURE__ */ React44.createElement(Tooltip3.Provider, null, /* @__PURE__ */ React44.createElement(Shell, {
+  }, /* @__PURE__ */ React46.createElement(ClipboardProvider, null, /* @__PURE__ */ React46.createElement(Tooltip5.Provider, null, /* @__PURE__ */ React46.createElement(Shell, {
     runtime,
     origin: location.origin
   })))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
-import React45, { createContext as createContext2, useCallback as useCallback9, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo6, useState as useState11 } from "react";
+import React47, { createContext as createContext2, useCallback as useCallback9, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo6, useState as useState12 } from "react";
 import { ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout3, useClient as useClient8 } from "@dxos/react-client";
 import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
 import { mx as mx23 } from "@dxos/react-ui-theme";
@@ -3821,7 +3994,7 @@ var useShell = () => {
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
   const client = useClient8();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState11(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const [display, setDisplay] = useState12(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
   const shellRuntime = useMemo6(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
       return;
@@ -3891,12 +4064,12 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
   }, [
     shellRuntime
   ]);
-  return /* @__PURE__ */ React45.createElement(React45.Fragment, null, shellRuntime && /* @__PURE__ */ React45.createElement("div", {
+  return /* @__PURE__ */ React47.createElement(React47.Fragment, null, shellRuntime && /* @__PURE__ */ React47.createElement("div", {
     className: mx23(display === ShellDisplay2.NONE ? "hidden" : "")
-  }, /* @__PURE__ */ React45.createElement(Shell, {
+  }, /* @__PURE__ */ React47.createElement(Shell, {
     runtime: shellRuntime,
     origin: window.location.origin
-  })), /* @__PURE__ */ React45.createElement(ShellContext.Provider, {
+  })), /* @__PURE__ */ React47.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,
       setDisplay
@@ -3917,7 +4090,9 @@ export {
   CopyButtonIconOnly,
   DeviceList,
   Emoji,
+  EmojiPicker,
   Heading,
+  HuePicker,
   IdentityDialog,
   IdentityListItem,
   IdentityPanel,