@dxos/shell 0.7.5-main.9d2a38b → 0.7.5-main.b19bfc8

package/dist/lib/browser/react.mjs

@@ -55,7 +55,7 @@ var AgentConfig = ({ agentStatus, validationMessage, onAgentDestroy, onAgentCrea
     className: mx(descriptionText, "mlb-2")
   }, t("agent requested description"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
-    classNames: "mlb-2 is-full justify-start gap-2 !pis-0 !pie-3",
+    classNames: "mlb-2 is-full justify-start gap-2 pis-0 pie-3",
     "data-testid": agentStatus === "creatable" ? "devices-panel.create-agent" : "devices-panel.agent-error",
     onClick: agentStatus === "creatable" ? onAgentCreate : onAgentRefresh,
     "aria-describedby": "devices-panel.create-agent.description"
@@ -135,351 +135,89 @@ var CompoundButton = ({ children, description, before, after, variant = "default
   }, after));
 };
 
-// packages/sdk/shell/src/components/EmojiPicker.tsx
-import emojiData from "@emoji-mart/data";
-import EmojiMart from "@emoji-mart/react";
-import { ArrowCounterClockwise, CaretDown, UserCircle } from "@phosphor-icons/react";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React3, { useRef, useState } from "react";
-import { Button as Button2, Popover, Toolbar, Tooltip as Tooltip2, useMediaQuery, useThemeContext as useThemeContext2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { getSize as getSize2 } from "@dxos/react-ui-theme";
-var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
-  const { t } = useTranslation2("os");
-  const { themeMode } = useThemeContext2();
-  const [_emojiValue, setEmojiValue] = useControllableState({
-    prop: emoji,
-    onChange: onChangeEmoji,
-    defaultProp: defaultEmoji
-  });
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-  const suppressNextTooltip = useRef(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
-  return /* @__PURE__ */ React3.createElement(Tooltip2.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React3.createElement(Popover.Root, {
-    open: emojiPickerOpen,
-    onOpenChange: (nextOpen) => {
-      setEmojiPickerOpen(nextOpen);
-      suppressNextTooltip.current = true;
-    }
-  }, /* @__PURE__ */ React3.createElement(Tooltip2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Popover.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Toolbar.Button, {
-    classNames: [
-      "gap-2 text-2xl plb-1",
-      classNames
-    ],
-    disabled
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, t("select emoji label")), /* @__PURE__ */ React3.createElement(UserCircle, {
-    className: getSize2(5)
-  })))), /* @__PURE__ */ React3.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip2.Content, {
-    side: "bottom"
-  }, t("select emoji label"), /* @__PURE__ */ React3.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React3.createElement(Popover.Content, {
-    side: "bottom",
-    onKeyDownCapture: (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setEmojiPickerOpen(false);
-        suppressNextTooltip.current = true;
-      }
-    }
-  }, /* @__PURE__ */ React3.createElement(EmojiMart, {
-    data: emojiData,
-    onEmojiSelect: ({ native }) => {
-      if (native) {
-        setEmojiValue(native);
-        setEmojiPickerOpen(false);
-      }
-    },
-    autoFocus: true,
-    maxFrequentRows: 0,
-    noCountryFlags: true,
-    theme: themeMode
-  }), /* @__PURE__ */ React3.createElement(Popover.Arrow, null))));
-};
-var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
-  const { t } = useTranslation2("os");
-  const [isMd] = useMediaQuery("md", {
-    ssr: false
-  });
-  const [emojiValue, setEmojiValue] = useControllableState({
-    prop: emoji,
-    onChange: onChangeEmoji,
-    defaultProp: defaultEmoji
-  });
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Popover.Root, {
-    open: emojiPickerOpen,
-    onOpenChange: setEmojiPickerOpen
-  }, /* @__PURE__ */ React3.createElement(Popover.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
-    variant: "ghost",
-    classNames: "gap-2 text-2xl plb-1",
-    disabled
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, t("select emoji label")), /* @__PURE__ */ React3.createElement("span", {
-    className: "grow pis-14"
-  }, emojiValue), /* @__PURE__ */ React3.createElement(CaretDown, {
-    className: getSize2(4)
-  }))), /* @__PURE__ */ React3.createElement(Popover.Content, {
-    side: "right",
-    sideOffset: isMd ? 0 : -310,
-    onKeyDownCapture: (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setEmojiPickerOpen(false);
-      }
-    }
-  }, /* @__PURE__ */ React3.createElement(EmojiMart, {
-    data: emojiData,
-    onEmojiSelect: ({ native }) => {
-      if (native) {
-        setEmojiValue(native);
-        setEmojiPickerOpen(false);
-      }
-    },
-    autoFocus: true,
-    maxFrequentRows: 0,
-    noCountryFlags: true
-  }), /* @__PURE__ */ React3.createElement(Popover.Arrow, null))), /* @__PURE__ */ React3.createElement(Tooltip2.Root, null, /* @__PURE__ */ React3.createElement(Tooltip2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
-    variant: "ghost",
-    onClick: onClickClear,
-    disabled
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React3.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React3.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip2.Content, {
-    side: "right"
-  }, t("clear label"), /* @__PURE__ */ React3.createElement(Tooltip2.Arrow, null)))));
-};
-
-// packages/sdk/shell/src/components/HuePicker.tsx
-import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check, Palette } from "@phosphor-icons/react";
-import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React4, { useRef as useRef2, useState as useState2 } from "react";
-import { Button as Button3, DropdownMenu, Toolbar as Toolbar2, Tooltip as Tooltip3, useThemeContext as useThemeContext3, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { getSize as getSize3, hueTokenThemes, mx as mx3 } from "@dxos/react-ui-theme";
-var HuePreview = ({ hue }) => {
-  const { tx } = useThemeContext3();
-  const size = 20;
-  return /* @__PURE__ */ React4.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: `0 0 ${size} ${size}`
-  }, /* @__PURE__ */ React4.createElement("rect", {
-    x: 0,
-    y: 0,
-    width: size,
-    height: size,
-    className: tx("hue.fill", "select--hue__preview", {
-      hue
-    })
-  }));
-};
-var hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
-var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
-  const { t } = useTranslation3("os");
-  const [hueValue, setHueValue] = useControllableState2({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue
-  });
-  const [huePickerOpen, setHuePickerOpen] = useState2(false);
-  const suppressNextTooltip = useRef2(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
-  return /* @__PURE__ */ React4.createElement(Tooltip3.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-    modal: false,
-    open: huePickerOpen,
-    onOpenChange: (nextOpen) => {
-      setHuePickerOpen(nextOpen);
-      suppressNextTooltip.current = true;
-    }
-  }, /* @__PURE__ */ React4.createElement(Tooltip3.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Toolbar2.Button, {
-    classNames: mx3("gap-2 plb-1", classNames),
-    disabled
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "sr-only"
-  }, t("select hue label")), /* @__PURE__ */ React4.createElement(Palette, {
-    className: getSize3(5)
-  })))), /* @__PURE__ */ React4.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip3.Content, {
-    side: "bottom"
-  }, t("select hue label"), /* @__PURE__ */ React4.createElement(Tooltip3.Arrow, null))), /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
-    side: "bottom",
-    classNames: "!w-40"
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, {
-    classNames: "grid grid-cols-4"
-  }, hueTokens.map((hue2) => {
-    return /* @__PURE__ */ React4.createElement(DropdownMenu.CheckboxItem, {
-      key: hue2,
-      checked: hue2 === hueValue,
-      onCheckedChange: () => setHueValue(hue2),
-      classNames: "px-0 py-2 items-center justify-center"
-    }, /* @__PURE__ */ React4.createElement(HuePreview, {
-      hue: hue2
-    }));
-  })))));
-};
-var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
-  const { t } = useTranslation3("os");
-  const [hueValue, setHueValue] = useControllableState2({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue
-  });
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-    modal: false
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button3, {
-    variant: "ghost",
-    classNames: "gap-2 plb-1",
-    disabled
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "sr-only"
-  }, t("select hue label")), /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: "pis-14 grow flex items-center justify-center gap-2"
-  }, /* @__PURE__ */ React4.createElement(HuePreview, {
-    hue: hueValue
-  }), /* @__PURE__ */ React4.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React4.createElement(CaretDown2, {
-    className: getSize3(4)
-  }))), /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
-    side: "right"
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
-    return /* @__PURE__ */ React4.createElement(DropdownMenu.CheckboxItem, {
-      key: hue2,
-      checked: hue2 === hueValue,
-      onCheckedChange: () => setHueValue(hue2)
-    }, /* @__PURE__ */ React4.createElement(HuePreview, {
-      hue: hue2
-    }), /* @__PURE__ */ React4.createElement("span", {
-      className: "grow"
-    }, t(`${hue2} label`)), /* @__PURE__ */ React4.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React4.createElement(Check, null)));
-  })), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React4.createElement(Tooltip3.Root, null, /* @__PURE__ */ React4.createElement(Tooltip3.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button3, {
-    variant: "ghost",
-    onClick: onClickClear,
-    disabled
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React4.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React4.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip3.Content, {
-    side: "right"
-  }, t("clear label"), /* @__PURE__ */ React4.createElement(Tooltip3.Arrow, null)))));
-};
-
 // packages/sdk/shell/src/components/IdentityList/IdentityListItem.tsx
-import React5, { forwardRef } from "react";
+import React3, { forwardRef } from "react";
 import { generateName } from "@dxos/display-name";
 import { SpaceMember } from "@dxos/react-client/echo";
 import { ListItem, Avatar as Avatar2, useId as useId2 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+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 = keyToFallback(identity.identityKey);
   const labelId = useId2("identityListItem__label");
   const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
-  return /* @__PURE__ */ React5.createElement(ListItem.Root, {
+  return /* @__PURE__ */ React3.createElement(ListItem.Root, {
     ...props,
-    classNames: mx4("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
+    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__ */ React5.createElement(Avatar2.Root, {
+  }, /* @__PURE__ */ React3.createElement(Avatar2.Root, {
     status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
     labelId,
     hue: identity.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React5.createElement(Avatar2.Frame, {
+  }, /* @__PURE__ */ React3.createElement(Avatar2.Frame, {
     classNames: "place-self-center"
-  }, /* @__PURE__ */ React5.createElement(Avatar2.Fallback, {
+  }, /* @__PURE__ */ React3.createElement(Avatar2.Fallback, {
     text: identity.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React5.createElement(Avatar2.Label, {
+  })), /* @__PURE__ */ React3.createElement(Avatar2.Label, {
     classNames: "text-sm truncate pli-2"
   }, displayName)));
 });
 
 // packages/sdk/shell/src/components/IdentityList/SpaceMemberList.tsx
-import React6, { useMemo } from "react";
+import React4, { useMemo } from "react";
 import { useClient } from "@dxos/react-client";
 import { useMembers } from "@dxos/react-client/echo";
-import { useTranslation as useTranslation4, List } from "@dxos/react-ui";
-import { descriptionText as descriptionText3, mx as mx5 } from "@dxos/react-ui-theme";
+import { useTranslation as useTranslation2, List } from "@dxos/react-ui";
+import { descriptionText as descriptionText3, mx as mx4 } from "@dxos/react-ui-theme";
 var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
   const client = useClient();
   const allUnsortedMembers = useMembers(spaceKey);
   const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((member) => member.identity.identityKey.equals(client.halo.identity.get().identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity.get().identityKey)), [
     allUnsortedMembers
   ]);
-  return /* @__PURE__ */ React6.createElement(SpaceMemberListImpl, {
+  return /* @__PURE__ */ React4.createElement(SpaceMemberListImpl, {
     members,
     onSelect
   });
 };
 var SpaceMemberListImpl = ({ members, onSelect }) => {
-  const { t } = useTranslation4("os");
+  const { t } = useTranslation2("os");
   const visibleMembers = members.filter((member) => member.identity);
-  return visibleMembers.length > 0 ? /* @__PURE__ */ React6.createElement(List, {
+  return visibleMembers.length > 0 ? /* @__PURE__ */ React4.createElement(List, {
     classNames: "flex flex-col gap-2",
     "data-testid": "space-members-list"
   }, visibleMembers.map((member) => {
-    return /* @__PURE__ */ React6.createElement(IdentityListItem, {
+    return /* @__PURE__ */ React4.createElement(IdentityListItem, {
       key: member.identity.identityKey.toHex(),
       identity: member.identity,
       presence: member.presence,
       onClick: onSelect && (() => onSelect(member))
     });
-  })) : /* @__PURE__ */ React6.createElement("div", {
+  })) : /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "grow flex items-center p-2"
-  }, /* @__PURE__ */ React6.createElement("p", {
-    className: mx5(descriptionText3, "text-center is-full mlb-2")
+  }, /* @__PURE__ */ React4.createElement("p", {
+    className: mx4(descriptionText3, "text-center is-full mlb-2")
   }, t("empty space members message")));
 };
 
 // packages/sdk/shell/src/components/DeviceList/DeviceList.tsx
 import { CaretRight, Plus as Plus2 } from "@phosphor-icons/react";
-import React8 from "react";
-import { Button as Button5, List as List2, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { descriptionText as descriptionText4, getSize as getSize5, mx as mx6 } from "@dxos/react-ui-theme";
+import React6 from "react";
+import { Button as Button3, List as List2, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { descriptionText as descriptionText4, getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/components/DeviceList/DeviceListItem.tsx
 import { Compass, Desktop, DeviceMobile, Devices, DotsThree, ShareFat, Power as Power2, Robot, Database as Database2, FirstAidKit } from "@phosphor-icons/react";
-import React7, { forwardRef as forwardRef2 } from "react";
+import React5, { forwardRef as forwardRef2 } from "react";
 import { generateName as generateName2 } from "@dxos/display-name";
 import { Device, DeviceType, DeviceKind } from "@dxos/react-client/halo";
 import { ConnectionState } from "@dxos/react-client/mesh";
-import { ListItem as ListItem2, Avatar as Avatar3, useId as useId3, Tag, useTranslation as useTranslation5, DropdownMenu as DropdownMenu2, Button as Button4 } from "@dxos/react-ui";
-import { getSize as getSize4 } from "@dxos/react-ui-theme";
+import { ListItem as ListItem2, Avatar as Avatar3, useId as useId3, Tag, useTranslation as useTranslation3, DropdownMenu, Button as Button2 } from "@dxos/react-ui";
+import { getSize as getSize2 } from "@dxos/react-ui-theme";
 import { keyToFallback as keyToFallback2 } from "@dxos/util";
 var iconProps = {
   weight: "duotone",
@@ -489,7 +227,7 @@ var iconProps = {
   y: 8
 };
 var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, classNames, connectionState, onAgentDestroy: _, ...props }, forwardedRef) => {
-  const { t } = useTranslation5("os");
+  const { t } = useTranslation3("os");
   const fallbackValue = keyToFallback2(device.deviceKey);
   const labelId = useId3("identityListItem__label");
   const displayName = device.profile ? t("device name placeholder", {
@@ -497,7 +235,7 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     platform: device.profile.platform
   }) : generateName2(device.deviceKey.toHex());
   const isCurrent = device.kind === DeviceKind.CURRENT;
-  return /* @__PURE__ */ React7.createElement(ListItem2.Root, {
+  return /* @__PURE__ */ React5.createElement(ListItem2.Root, {
     ...props,
     classNames: [
       "flex gap-2 items-center mlb-2",
@@ -506,60 +244,60 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     "data-testid": `device-list-item${isCurrent ? "-current" : ""}`,
     labelId,
     ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(Avatar3.Root, {
+  }, /* @__PURE__ */ React5.createElement(Avatar3.Root, {
     status: isCurrent && connectionState === ConnectionState.OFFLINE ? "error" : device.presence === Device.PresenceState.ONLINE ? "active" : "inactive",
     labelId,
     hue: fallbackValue.hue,
     variant: "square"
-  }, /* @__PURE__ */ React7.createElement(Avatar3.Frame, {
+  }, /* @__PURE__ */ React5.createElement(Avatar3.Frame, {
     classNames: "place-self-center"
-  }, device.profile?.type ? device.profile.type === DeviceType.AGENT_MANAGED ? /* @__PURE__ */ React7.createElement(Database2, iconProps) : device.profile.type === DeviceType.BROWSER ? /* @__PURE__ */ React7.createElement(Compass, iconProps) : device.profile.type === DeviceType.NATIVE ? /* @__PURE__ */ React7.createElement(Desktop, iconProps) : [
+  }, device.profile?.type ? device.profile.type === DeviceType.AGENT_MANAGED ? /* @__PURE__ */ React5.createElement(Database2, iconProps) : device.profile.type === DeviceType.BROWSER ? /* @__PURE__ */ React5.createElement(Compass, iconProps) : device.profile.type === DeviceType.NATIVE ? /* @__PURE__ */ React5.createElement(Desktop, iconProps) : [
     DeviceType.AGENT,
     DeviceType.AGENT_MANAGED
-  ].includes(device.profile.type) ? /* @__PURE__ */ React7.createElement(Robot, iconProps) : device.profile.type === DeviceType.MOBILE ? /* @__PURE__ */ React7.createElement(DeviceMobile, iconProps) : /* @__PURE__ */ React7.createElement(Devices, iconProps) : /* @__PURE__ */ React7.createElement(Avatar3.Fallback, {
+  ].includes(device.profile.type) ? /* @__PURE__ */ React5.createElement(Robot, iconProps) : device.profile.type === DeviceType.MOBILE ? /* @__PURE__ */ React5.createElement(DeviceMobile, iconProps) : /* @__PURE__ */ React5.createElement(Devices, iconProps) : /* @__PURE__ */ React5.createElement(Avatar3.Fallback, {
     text: fallbackValue.emoji
-  })), /* @__PURE__ */ React7.createElement(Avatar3.Label, {
+  })), /* @__PURE__ */ React5.createElement(Avatar3.Label, {
     classNames: "flex-1 text-sm truncate"
-  }, displayName), isCurrent && /* @__PURE__ */ React7.createElement(Tag, {
+  }, displayName), isCurrent && /* @__PURE__ */ React5.createElement(Tag, {
     color: "primary"
-  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Trigger, {
+  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React5.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React7.createElement(Button4, {
+  }, /* @__PURE__ */ React5.createElement(Button2, {
     variant: "ghost",
     classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
     "data-testid": `device-list-item${isCurrent ? "-current" : ""}.options`
-  }, /* @__PURE__ */ React7.createElement("span", {
+  }, /* @__PURE__ */ React5.createElement("span", {
     className: "sr-only"
-  }, t("more options label")), /* @__PURE__ */ React7.createElement(DotsThree, {
-    className: getSize4(5)
-  }))), /* @__PURE__ */ React7.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Viewport, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+  }, t("more options label")), /* @__PURE__ */ React5.createElement(DotsThree, {
+    className: getSize2(5)
+  }))), /* @__PURE__ */ React5.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
     "data-testid": "device-list-item-current.join-existing",
     onClick: onClickJoinExisting
-  }, /* @__PURE__ */ React7.createElement(ShareFat, {
-    className: getSize4(5)
-  }), t("choose join new identity label")), onClickRecover && /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+  }, /* @__PURE__ */ React5.createElement(ShareFat, {
+    className: getSize2(5)
+  }), t("choose join new identity label")), onClickRecover && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
     "data-testid": "device-list-item-current.recover",
     onClick: onClickRecover
-  }, /* @__PURE__ */ React7.createElement(FirstAidKit, {
-    className: getSize4(5)
-  }), t("choose recover identity label")), /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+  }, /* @__PURE__ */ React5.createElement(FirstAidKit, {
+    className: getSize2(5)
+  }), t("choose recover identity label")), /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
     "data-testid": "device-list-item-current.reset",
     onClick: onClickReset
-  }, /* @__PURE__ */ React7.createElement(Power2, {
-    className: getSize4(5)
+  }, /* @__PURE__ */ React5.createElement(Power2, {
+    className: getSize2(5)
   }), t("reset device label")))))));
 });
 
 // packages/sdk/shell/src/components/DeviceList/DeviceList.tsx
 var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, onAgentDestroy }) => {
-  const { t } = useTranslation6("os");
-  return /* @__PURE__ */ React8.createElement("div", {
+  const { t } = useTranslation4("os");
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "p-1"
-  }, /* @__PURE__ */ React8.createElement("h2", {
-    className: mx6(descriptionText4, "text-center mbs-2")
-  }, t("devices heading")), devices.length > 0 && /* @__PURE__ */ React8.createElement(List2, null, devices.map((device) => {
-    return /* @__PURE__ */ React8.createElement(DeviceListItem, {
+  }, /* @__PURE__ */ React6.createElement("h2", {
+    className: mx5(descriptionText4, "text-center mbs-2")
+  }, t("devices heading")), devices.length > 0 && /* @__PURE__ */ React6.createElement(List2, null, devices.map((device) => {
+    return /* @__PURE__ */ React6.createElement(DeviceListItem, {
       key: device.deviceKey.toHex(),
       device,
       onClickEdit: () => onClickEdit?.(device),
@@ -569,43 +307,43 @@ var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickRe
       connectionState,
       onAgentDestroy
     });
-  })), /* @__PURE__ */ React8.createElement(Button5, {
+  })), /* @__PURE__ */ React6.createElement(Button3, {
     variant: "ghost",
-    classNames: "justify-start gap-2 !pis-0 !pie-3 is-full",
+    classNames: "justify-start gap-2 pis-0 pie-3 is-full",
     "data-testid": "devices-panel.create-invitation",
     onClick: onClickAdd
-  }, /* @__PURE__ */ React8.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "img",
-    className: mx6(getSize5(8), "m-1 rounded-sm bg-input grid place-items-center")
-  }, /* @__PURE__ */ React8.createElement(Plus2, {
+    className: mx5(getSize3(8), "m-1 rounded-sm bg-input grid place-items-center")
+  }, /* @__PURE__ */ React6.createElement(Plus2, {
     weight: "light",
-    className: getSize5(6)
-  })), /* @__PURE__ */ React8.createElement("span", {
+    className: getSize3(6)
+  })), /* @__PURE__ */ React6.createElement("span", {
     className: "grow font-medium text-start"
-  }, t("choose add device label")), /* @__PURE__ */ React8.createElement(CaretRight, {
+  }, t("choose add device label")), /* @__PURE__ */ React6.createElement(CaretRight, {
     weight: "bold",
-    className: getSize5(4)
+    className: getSize3(4)
   })));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 import { X } from "@phosphor-icons/react";
 import { formatDistanceToNow } from "date-fns";
-import React10, { useCallback } from "react";
+import React8, { useCallback } from "react";
 import { Invitation, useInvitationStatus } from "@dxos/react-client/invitations";
-import { Button as Button6, Clipboard, ListItem as ListItem3, useTranslation as useTranslation7, Avatar as Avatar4, useThemeContext as useThemeContext4, Tooltip as Tooltip4 } from "@dxos/react-ui";
-import { focusRing, getSize as getSize6, mx as mx8 } from "@dxos/react-ui-theme";
+import { Button as Button4, Clipboard, ListItem as ListItem3, useTranslation as useTranslation5, Avatar as Avatar4, useThemeContext as useThemeContext2, Tooltip as Tooltip2 } 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 React9, { useRef as useRef3 } from "react";
-import { mx as mx7 } from "@dxos/react-ui-theme";
+import React7, { useRef } from "react";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 var AuthCode = (props) => {
   const { code, large, classNames } = props;
   const l = code?.length ?? 0;
   const left = code?.slice(0, l / 2);
   const right = code?.slice(l / 2);
-  const codeRef = useRef3(null);
+  const codeRef = useRef(null);
   const handleClick = () => {
     if (codeRef.current) {
       const selection = window.getSelection();
@@ -616,20 +354,20 @@ var AuthCode = (props) => {
     }
     void navigator.clipboard.writeText(code ?? "");
   };
-  return /* @__PURE__ */ React9.createElement("span", {
-    className: mx7(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 rounded cursor-pointer", classNames),
+  return /* @__PURE__ */ React7.createElement("span", {
+    className: mx6(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 rounded cursor-pointer", classNames),
     onClick: handleClick,
     ref: codeRef
-  }, /* @__PURE__ */ React9.createElement("span", {
+  }, /* @__PURE__ */ React7.createElement("span", {
     className: "mie-[0.4em]"
-  }, left), /* @__PURE__ */ React9.createElement("span", null, right));
+  }, left), /* @__PURE__ */ React7.createElement("span", null, right));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 var InvitationListItem = (props) => {
   const { invitation } = props;
   const invitationStatus = useInvitationStatus(invitation);
-  return /* @__PURE__ */ React10.createElement(InvitationListItemImpl, {
+  return /* @__PURE__ */ React8.createElement(InvitationListItemImpl, {
     ...props,
     invitationStatus
   });
@@ -639,11 +377,11 @@ var avatarProps = {
   variant: "circle"
 };
 var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
-  const { tx } = useThemeContext4();
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", {
+  const { tx } = useThemeContext2();
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
-    className: mx8("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize6(avatarProps.size))
-  }, /* @__PURE__ */ React10.createElement("span", {
+    className: mx7("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize4(avatarProps.size))
+  }, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -653,10 +391,10 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
     style: {
       animationDelay: "400ms"
     }
-  })), /* @__PURE__ */ React10.createElement("span", {
+  })), /* @__PURE__ */ React8.createElement("span", {
     role: "none",
-    className: mx8("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize6(avatarProps.size))
-  }, /* @__PURE__ */ React10.createElement("span", {
+    className: mx7("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize4(avatarProps.size))
+  }, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -669,7 +407,7 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   })));
 };
 var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
-  const { t } = useTranslation7("os");
+  const { t } = useTranslation5("os");
   const { cancel, status: invitationStatus, invitationCode, authCode, multiUse, shareable } = propsInvitationStatus;
   const isCancellable = !([
     Invitation.State.ERROR,
@@ -711,38 +449,38 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     Invitation.State.SUCCESS
   ].includes(invitationStatus);
   const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
-  return /* @__PURE__ */ React10.createElement(ListItem3.Root, {
+  return /* @__PURE__ */ React8.createElement(ListItem3.Root, {
     id: invitationCode,
     ...props,
     classNames: [
       "flex gap-2 pis-3 pie-1 items-center relative",
       props.classNames
     ]
-  }, /* @__PURE__ */ React10.createElement(ListItem3.Heading, {
+  }, /* @__PURE__ */ React8.createElement(ListItem3.Heading, {
     classNames: "sr-only"
-  }, t(multiUse ? "invite many list item label" : "invite one list item label")), multiUse && /* @__PURE__ */ React10.createElement(AvatarStackEffect, {
+  }, t(multiUse ? "invite many list item label" : "invite one list item label")), multiUse && /* @__PURE__ */ React8.createElement(AvatarStackEffect, {
     status: avatarStatus,
     animation: avatarAnimation,
     reverseEffects
-  }), /* @__PURE__ */ React10.createElement(Tooltip4.Root, null, /* @__PURE__ */ React10.createElement(Avatar4.Root, {
+  }), /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Avatar4.Root, {
     ...avatarProps,
     animation: avatarAnimation,
     status: avatarStatus
-  }, /* @__PURE__ */ React10.createElement(Tooltip4.Trigger, {
+  }, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React10.createElement(Avatar4.Frame, {
+  }, /* @__PURE__ */ React8.createElement(Avatar4.Frame, {
     tabIndex: 0,
     classNames: [
       focusRing,
       "relative rounded-full place-self-center"
     ]
-  }, /* @__PURE__ */ React10.createElement(Avatar4.Fallback, {
+  }, /* @__PURE__ */ React8.createElement(Avatar4.Fallback, {
     text: hexToEmoji(invitationId)
-  })))), /* @__PURE__ */ React10.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip4.Content, {
+  })))), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
     side: "left"
-  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React10.createElement(Tooltip4.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React10.createElement(Tooltip4.Root, null, /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Tooltip4.Trigger, {
+  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React8.createElement(Tooltip2.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React10.createElement(Button6, {
+  }, /* @__PURE__ */ React8.createElement(Button4, {
     variant: "ghost",
     classNames: "grow justify-start font-medium",
     onClick: () => send({
@@ -750,64 +488,64 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
       invitation
     }),
     "data-testid": "show-qrcode"
-  }, /* @__PURE__ */ React10.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React10.createElement(Clipboard.IconButton, {
+  }, /* @__PURE__ */ React8.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React8.createElement(Clipboard.IconButton, {
     variant: "ghost",
     value: invitationUrl
-  })), /* @__PURE__ */ React10.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip4.Content, {
+  })), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
     side: "left"
-  }, invitationHasLifetime && /* @__PURE__ */ React10.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React10.createElement(AuthCode, {
+  }, invitationHasLifetime && /* @__PURE__ */ React8.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React8.createElement(AuthCode, {
     code: authCode,
     classNames: "grow"
-  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React10.createElement("span", {
+  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React8.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React8.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React8.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React8.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React10.createElement("span", {
+  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React8.createElement("span", {
     className: "pli-2 grow truncate"
-  }, "User joined") : !shareable ? /* @__PURE__ */ React10.createElement("span", {
+  }, "User joined") : !shareable ? /* @__PURE__ */ React8.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Pending Invitation") : /* @__PURE__ */ React10.createElement("span", {
+  }, "Pending Invitation") : /* @__PURE__ */ React8.createElement("span", {
     className: "grow"
-  }, " "), isCancellable ? /* @__PURE__ */ React10.createElement(Button6, {
+  }, " "), isCancellable ? /* @__PURE__ */ React8.createElement(Button4, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: cancel,
     "data-testid": "cancel-invitation"
-  }, /* @__PURE__ */ React10.createElement("span", {
+  }, /* @__PURE__ */ React8.createElement("span", {
     className: "sr-only"
-  }, t("cancel invitation label")), /* @__PURE__ */ React10.createElement(X, {
-    className: getSize6(4)
-  })) : /* @__PURE__ */ React10.createElement(Button6, {
+  }, t("cancel invitation label")), /* @__PURE__ */ React8.createElement(X, {
+    className: getSize4(4)
+  })) : /* @__PURE__ */ React8.createElement(Button4, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: handleClickRemove,
     "data-testid": "remove-invitation"
-  }, /* @__PURE__ */ React10.createElement("span", {
+  }, /* @__PURE__ */ React8.createElement("span", {
     className: "sr-only"
-  }, t("remove invitation label")), /* @__PURE__ */ React10.createElement(X, {
-    className: getSize6(4)
+  }, t("remove invitation label")), /* @__PURE__ */ React8.createElement(X, {
+    className: getSize4(4)
   })));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
-import React12, { useCallback as useCallback2 } from "react";
+import React10, { useCallback as useCallback2 } from "react";
 import { useSpace, useSpaceInvitations } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/components/InvitationList/InvitationList.tsx
-import React11 from "react";
+import React9 from "react";
 import { List as List3 } from "@dxos/react-ui";
-import { mx as mx9 } from "@dxos/react-ui-theme";
+import { mx as mx8 } from "@dxos/react-ui-theme";
 var InvitationList = ({ invitations, send, ...invitationProps }) => {
   const { className, InvitationListItem: Item = InvitationListItem } = invitationProps;
-  return /* @__PURE__ */ React11.createElement(List3, {
-    classNames: mx9("flex flex-col gap-2", className)
+  return /* @__PURE__ */ React9.createElement(List3, {
+    classNames: mx8("flex flex-col gap-2", className)
   }, invitations.map((invitation) => {
     const value = invitation.get().invitationId;
-    return /* @__PURE__ */ React11.createElement(Item, {
+    return /* @__PURE__ */ React9.createElement(Item, {
       key: value,
       send,
       invitation,
@@ -825,7 +563,7 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
   }, [
     space
   ]);
-  return /* @__PURE__ */ React12.createElement(InvitationList, {
+  return /* @__PURE__ */ React10.createElement(InvitationList, {
     invitations,
     onClickRemove: handleClickRemove,
     createInvitationUrl,
@@ -834,11 +572,11 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
 };
 
 // packages/sdk/shell/src/components/Panel/Action.tsx
-import { CaretDown as CaretDown3, Check as Check2, Placeholder } from "@phosphor-icons/react";
-import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React13, { forwardRef as forwardRef3 } from "react";
-import { Button as Button7, DropdownMenu as DropdownMenu3, useTranslation as useTranslation8 } from "@dxos/react-ui";
-import { descriptionText as descriptionText5, getSize as getSize7, mx as mx10 } from "@dxos/react-ui-theme";
+import { CaretDown, Check, Placeholder } from "@phosphor-icons/react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React11, { forwardRef as forwardRef3 } from "react";
+import { Button as Button5, DropdownMenu as DropdownMenu2, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { descriptionText as descriptionText5, getSize as getSize5, mx as mx9 } from "@dxos/react-ui-theme";
 var defaultActions = {
   noopAction: {
     label: "No-op",
@@ -851,17 +589,17 @@ var defaultActions = {
 var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
   const { classNames, variant, isFull = true, actions = defaultActions, activeAction: propsActiveAction, onChangeActiveAction, defaultActiveAction, "data-testid": testId, ...rest } = props;
   const dropdownTestId = testId && `${testId}.more`;
-  const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = useControllableState3({
+  const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = useControllableState({
     prop: propsActiveAction,
     onChange: onChangeActiveAction,
     defaultProp: defaultActiveAction
   });
   const activeAction = actions[activeActionKey2] ?? {};
-  const { t } = useTranslation8("os");
-  return /* @__PURE__ */ React13.createElement("div", {
+  const { t } = useTranslation6("os");
+  return /* @__PURE__ */ React11.createElement("div", {
     role: "none",
-    className: mx10("mbs-2 flex gap-px items-center", isFull && "is-full")
-  }, /* @__PURE__ */ React13.createElement(Button7, {
+    className: mx9("mbs-2 flex gap-px items-center", isFull && "is-full")
+  }, /* @__PURE__ */ React11.createElement(Button5, {
     ...rest,
     classNames: [
       "bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none",
@@ -871,22 +609,22 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
     variant,
     "data-testid": testId,
     onClick: activeAction.onClick
-  }, activeAction.icon && /* @__PURE__ */ React13.createElement(activeAction.icon, {
-    className: getSize7(5)
-  }), /* @__PURE__ */ React13.createElement("span", null, activeAction.label)), /* @__PURE__ */ React13.createElement(DropdownMenu3.Root, null, /* @__PURE__ */ React13.createElement(DropdownMenu3.Trigger, {
+  }, activeAction.icon && /* @__PURE__ */ React11.createElement(activeAction.icon, {
+    className: getSize5(5)
+  }), /* @__PURE__ */ React11.createElement("span", null, activeAction.label)), /* @__PURE__ */ React11.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React13.createElement(Button7, {
+  }, /* @__PURE__ */ React11.createElement(Button5, {
     classNames: [
       "bs-11 flex-none rounded-is-none",
       classNames
     ],
     "data-testid": dropdownTestId
-  }, /* @__PURE__ */ React13.createElement("span", {
+  }, /* @__PURE__ */ React11.createElement("span", {
     className: "sr-only"
-  }, t("invite options label")), /* @__PURE__ */ React13.createElement(CaretDown3, {
-    className: getSize7(4)
-  }))), /* @__PURE__ */ React13.createElement(DropdownMenu3.Portal, null, /* @__PURE__ */ React13.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React13.createElement(DropdownMenu3.Viewport, null, Object.entries(actions).map(([id, action]) => {
-    return /* @__PURE__ */ React13.createElement(DropdownMenu3.CheckboxItem, {
+  }, t("invite options label")), /* @__PURE__ */ React11.createElement(CaretDown, {
+    className: getSize5(4)
+  }))), /* @__PURE__ */ React11.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React11.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu2.Viewport, null, Object.entries(actions).map(([id, action]) => {
+    return /* @__PURE__ */ React11.createElement(DropdownMenu2.CheckboxItem, {
       key: id,
       "aria-labelledby": `${id}__label`,
       "aria-describedby": `${id}__description`,
@@ -894,27 +632,27 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
       onCheckedChange: (checked) => checked && setActiveAction(id),
       classNames: "gap-2",
       "data-testid": action.testId
-    }, action.icon && /* @__PURE__ */ React13.createElement(action.icon, {
-      className: getSize7(5)
-    }), /* @__PURE__ */ React13.createElement("div", {
+    }, action.icon && /* @__PURE__ */ React11.createElement(action.icon, {
+      className: getSize5(5)
+    }), /* @__PURE__ */ React11.createElement("div", {
       role: "none",
       className: "flex-1 min-is-0 space-b-1"
-    }, /* @__PURE__ */ React13.createElement("p", {
+    }, /* @__PURE__ */ React11.createElement("p", {
       id: `${id}__label`
-    }, action.label), action.description && /* @__PURE__ */ React13.createElement("p", {
+    }, action.label), action.description && /* @__PURE__ */ React11.createElement("p", {
       id: `${id}__description`,
       className: descriptionText5
-    }, action.description)), /* @__PURE__ */ React13.createElement(DropdownMenu3.ItemIndicator, {
+    }, action.description)), /* @__PURE__ */ React11.createElement(DropdownMenu2.ItemIndicator, {
       asChild: true
-    }, /* @__PURE__ */ React13.createElement(Check2, {
+    }, /* @__PURE__ */ React11.createElement(Check, {
       weight: "bold",
-      className: getSize7(4)
+      className: getSize5(4)
     })));
-  })), /* @__PURE__ */ React13.createElement(DropdownMenu3.Arrow, null)))));
+  })), /* @__PURE__ */ React11.createElement(DropdownMenu2.Arrow, null)))));
 });
 var Action = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
   const { children, classNames, variant, isFull = true, ...rest } = props;
-  return /* @__PURE__ */ React13.createElement(Button7, {
+  return /* @__PURE__ */ React11.createElement(Button5, {
     ...rest,
     classNames: [
       isFull && "is-full",
@@ -927,49 +665,49 @@ var Action = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
 });
 
 // packages/sdk/shell/src/components/Panel/Actions.tsx
-import React14, { forwardRef as forwardRef4 } from "react";
-import { mx as mx11 } from "@dxos/react-ui-theme";
+import React12, { forwardRef as forwardRef4 } from "react";
+import { mx as mx10 } from "@dxos/react-ui-theme";
 var Actions = /* @__PURE__ */ forwardRef4(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
-    className: mx11("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
+    className: mx10("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
     ref: forwardedRef
   }, children);
 });
 
 // packages/sdk/shell/src/components/Panel/CloseButton.tsx
 import { X as X2 } from "@phosphor-icons/react";
-import React15 from "react";
-import { Button as Button8, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { getSize as getSize8, mx as mx12 } from "@dxos/react-ui-theme";
+import React13 from "react";
+import { Button as Button6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { getSize as getSize6, mx as mx11 } from "@dxos/react-ui-theme";
 var CloseButton = ({ onDone, ...props }) => {
-  const { t } = useTranslation9("os");
-  return /* @__PURE__ */ React15.createElement(Button8, {
+  const { t } = useTranslation7("os");
+  return /* @__PURE__ */ React13.createElement(Button6, {
     variant: "ghost",
-    classNames: mx12("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    classNames: mx11("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     onClick: () => onDone?.(),
     ...props
-  }, /* @__PURE__ */ React15.createElement(X2, {
+  }, /* @__PURE__ */ React13.createElement(X2, {
     weight: "bold",
-    className: getSize8(4)
-  }), /* @__PURE__ */ React15.createElement("span", {
+    className: getSize6(4)
+  }), /* @__PURE__ */ React13.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
 };
 
 // packages/sdk/shell/src/components/Panel/Emoji.tsx
-import React16 from "react";
-import { mx as mx13, getSize as getSize9 } from "@dxos/react-ui-theme";
+import React14 from "react";
+import { mx as mx12, getSize as getSize7 } from "@dxos/react-ui-theme";
 var Emoji = ({ text, className }) => {
   const size = 14;
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React14.createElement("div", {
     role: "none",
-    className: mx13(getSize9(size), "rounded relative pointer-events-none", className)
-  }, /* @__PURE__ */ React16.createElement("svg", {
+    className: mx12(getSize7(size), "rounded relative pointer-events-none", className)
+  }, /* @__PURE__ */ React14.createElement("svg", {
     viewBox: `0 0 ${size * 4} ${size * 4}`,
     width: size * 4,
     height: size * 4
-  }, /* @__PURE__ */ React16.createElement("text", {
+  }, /* @__PURE__ */ React14.createElement("text", {
     x: "50%",
     y: "50%",
     textAnchor: "middle",
@@ -980,57 +718,57 @@ var Emoji = ({ text, className }) => {
 };
 var Centered = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "absolute inset-0 flex items-center justify-center"
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Heading.tsx
-import React17, { forwardRef as forwardRef5 } from "react";
-import { descriptionText as descriptionText6, mx as mx14 } from "@dxos/react-ui-theme";
+import React15, { forwardRef as forwardRef5 } from "react";
+import { descriptionText as descriptionText6, mx as mx13 } from "@dxos/react-ui-theme";
 var Heading = /* @__PURE__ */ forwardRef5(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React15.createElement("div", {
     role: "none",
     className: "pbe-2 relative",
     ref: forwardedRef
-  }, corner, /* @__PURE__ */ React17.createElement("h1", {
+  }, corner, /* @__PURE__ */ React15.createElement("h1", {
     ...!titleSrOnly && {
       id: titleId
     },
-    className: mx14(descriptionText6, "text-center mlb-2", titleSrOnly && "invisible")
-  }, title), titleSrOnly && /* @__PURE__ */ React17.createElement("span", {
+    className: mx13(descriptionText6, "text-center mlb-2", titleSrOnly && "invisible")
+  }, title), titleSrOnly && /* @__PURE__ */ React15.createElement("span", {
     id: titleId
   }, title), children);
 });
 
 // packages/sdk/shell/src/components/Panel/Label.tsx
-import React18 from "react";
-import { descriptionText as descriptionText7, mx as mx15 } from "@dxos/react-ui-theme";
+import React16 from "react";
+import { descriptionText as descriptionText7, mx as mx14 } from "@dxos/react-ui-theme";
 var Label = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React18.createElement("span", {
-    className: mx15(descriptionText7, "text-center mli-6 whitespace-normal")
+  return /* @__PURE__ */ React16.createElement("span", {
+    className: mx14(descriptionText7, "text-center mli-6 whitespace-normal")
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Input.tsx
-import React19 from "react";
+import React17 from "react";
 import { Input as UiInput } from "@dxos/react-ui";
 var Input = ({ validationMessage, label, ...props }) => {
-  return /* @__PURE__ */ React19.createElement(UiInput.Root, null, /* @__PURE__ */ React19.createElement(UiInput.Label, null, label), /* @__PURE__ */ React19.createElement(UiInput.TextInput, {
+  return /* @__PURE__ */ React17.createElement(UiInput.Root, null, /* @__PURE__ */ React17.createElement(UiInput.Label, null, label), /* @__PURE__ */ React17.createElement(UiInput.TextInput, {
     ...props,
     classNames: "plb-3 mbs-2 text-center"
-  }), /* @__PURE__ */ React19.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React19.createElement(UiInput.Validation, null, validationMessage)));
+  }), /* @__PURE__ */ React17.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React17.createElement(UiInput.Validation, null, validationMessage)));
 };
 
 // packages/sdk/shell/src/components/Panel/StepHeading.tsx
-import React20, { forwardRef as forwardRef6 } from "react";
-import { mx as mx16 } from "@dxos/react-ui-theme";
+import React18, { forwardRef as forwardRef6 } from "react";
+import { mx as mx15 } from "@dxos/react-ui-theme";
 var StepHeading = /* @__PURE__ */ forwardRef6(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React20.createElement("h2", {
+  return /* @__PURE__ */ React18.createElement("h2", {
     ...props,
-    className: mx16("font-normal text-sm mbe-4 mli-1 text-center", className),
+    className: mx15("font-normal text-sm mbe-4 mli-1 text-center", className),
     ref: forwardedRef
   }, children);
 });
@@ -1038,31 +776,31 @@ var StepHeading = /* @__PURE__ */ forwardRef6(({ 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 useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React21, { forwardRef as forwardRef7, useEffect } from "react";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React19, { forwardRef as forwardRef7, useEffect } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
-import { mx as mx17 } from "@dxos/react-ui-theme";
+import { mx as mx16 } from "@dxos/react-ui-theme";
 var VIEWPORT_NAME = "Viewport";
 var VIEWS_NAME = "ViewportViews";
 var VIEW_NAME = "ViewportView";
 var [createViewportContext, createViewportScope] = createContextScope(VIEWPORT_NAME, []);
 var [ViewportProvider, useViewportContext] = createViewportContext(VIEWPORT_NAME);
 var ViewportRoot = ({ __viewportScope, classNames, children, defaultActiveView, activeView: propsActiveView, focusManaged = false, onActiveViewChange, ...props }) => {
-  const [activeView = "never", setActiveView] = useControllableState4({
+  const [activeView = "never", setActiveView] = useControllableState2({
     prop: propsActiveView,
     defaultProp: defaultActiveView,
     onChange: onActiveViewChange
   });
-  return /* @__PURE__ */ React21.createElement(ViewportProvider, {
+  return /* @__PURE__ */ React19.createElement(ViewportProvider, {
     focusManaged,
     activeView,
     setActiveView,
     scope: __viewportScope
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React19.createElement("div", {
     role: "region",
     "aria-live": "polite",
     ...props,
-    className: mx17("is-full overflow-hidden", classNames)
+    className: mx16("is-full overflow-hidden", classNames)
   }, children));
 };
 ViewportRoot.displayName = VIEWPORT_NAME;
@@ -1070,11 +808,11 @@ var ViewportViews = ({ classNames, children, ...props }) => {
   const size = {
     inlineSize: `${Math.ceil(children.length) * 100}%`
   };
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     role: "none",
     style: size,
     ...props,
-    className: mx17("flex", classNames)
+    className: mx16("flex", classNames)
   }, children);
 };
 ViewportViews.displayName = VIEWS_NAME;
@@ -1092,12 +830,12 @@ var ViewportView = /* @__PURE__ */ forwardRef7(({ __viewportScope, classNames, c
     ref.current,
     isActive
   ]);
-  return /* @__PURE__ */ React21.createElement("section", {
+  return /* @__PURE__ */ React19.createElement("section", {
     ...props,
     ...!isActive && {
       "aria-hidden": true
     },
-    className: mx17("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
+    className: mx16("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
     ref
   }, children);
 });
@@ -1109,43 +847,45 @@ var Viewport = {
 };
 
 // packages/sdk/shell/src/components/SpaceListItem.tsx
-import React22, { forwardRef as forwardRef8 } from "react";
+import React20, { forwardRef as forwardRef8 } from "react";
 import { Avatar as Avatar5, useId as useId4 } from "@dxos/react-ui";
-import { mx as mx18 } from "@dxos/react-ui-theme";
+import { mx as mx17 } from "@dxos/react-ui-theme";
 import { humanize, keyToEmoji } from "@dxos/util";
 var SpaceListItem = /* @__PURE__ */ forwardRef8(({ space, onClick }, ref) => {
   const fallbackValue = keyToEmoji(space.key);
   const labelId = useId4("identityListItem__label");
   const displayName = space.properties.name ?? humanize(space.key.toHex());
-  return /* @__PURE__ */ React22.createElement("li", {
-    className: mx18("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
+  return /* @__PURE__ */ React20.createElement("li", {
+    className: mx17("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
     onClick: () => onClick?.(),
     ref,
     "data-testid": "space-list-item"
-  }, /* @__PURE__ */ React22.createElement(Avatar5.Root, {
+  }, /* @__PURE__ */ React20.createElement(Avatar5.Root, {
     labelId
-  }, /* @__PURE__ */ React22.createElement(Avatar5.Frame, null, /* @__PURE__ */ React22.createElement(Avatar5.Fallback, {
+  }, /* @__PURE__ */ React20.createElement(Avatar5.Frame, null, /* @__PURE__ */ React20.createElement(Avatar5.Fallback, {
     text: fallbackValue
-  })), /* @__PURE__ */ React22.createElement(Avatar5.Label, {
+  })), /* @__PURE__ */ React20.createElement(Avatar5.Label, {
     classNames: "text-sm truncate"
   }, displayName)));
 });
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
-import React40 from "react";
-import { Clipboard as Clipboard3, Dialog, useId as useId10 } from "@dxos/react-ui";
+import React38 from "react";
+import { Clipboard as Clipboard4, Dialog, useId as useId10 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-import { Key, Plugs, PlugsConnected } from "@phosphor-icons/react";
-import React27, { useEffect as useEffect4, useMemo as useMemo3, useState as useState7 } from "react";
+import { IdentificationCard, Plugs, PlugsConnected } from "@phosphor-icons/react";
+import React25, { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
+import { debounce } from "@dxos/async";
 import { generateName as generateName3 } from "@dxos/display-name";
 import { log as log7 } from "@dxos/log";
 import { useClient as useClient6 } 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 { useNetworkStatus, ConnectionState as ConnectionState2 } from "@dxos/react-client/mesh";
-import { Avatar as Avatar6, Input as Input2, Toolbar as Toolbar3, Tooltip as Tooltip5, useClipboard as useClipboard2, useId as useId6, useTranslation as useTranslation13 } from "@dxos/react-ui";
-import { getSize as getSize12 } from "@dxos/react-ui-theme";
+import { Avatar as Avatar6, Clipboard as Clipboard3, Input as Input2, Toolbar, Tooltip as Tooltip3, useId as useId6, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { EmojiPickerToolbarButton, HuePicker as HuePicker2 } from "@dxos/react-ui-pickers";
+import { errorText, getSize as getSize10 } from "@dxos/react-ui-theme";
 import { hexToEmoji as hexToEmoji4, hexToHue as hexToHue2, keyToFallback as keyToFallback3 } from "@dxos/util";
 
 // packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts
@@ -1261,7 +1001,7 @@ var useIdentityMachine = (client, options) => {
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
-import React23 from "react";
+import React21 from "react";
 import { log as log2 } from "@dxos/log";
 import { useClient as useClient2 } from "@dxos/react-client";
 import { useHaloInvitations, DeviceType as DeviceType2 } from "@dxos/react-client/halo";
@@ -1297,7 +1037,7 @@ var IdentityActionChooser = (props) => {
     });
   };
   const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production";
-  return /* @__PURE__ */ React23.createElement(IdentityActionChooserImpl, {
+  return /* @__PURE__ */ React21.createElement(IdentityActionChooserImpl, {
     ...props,
     onClickAdd: createInvitation,
     onClickJoinExisting: () => send?.({
@@ -1313,10 +1053,10 @@ var IdentityActionChooser = (props) => {
 };
 var IdentityActionChooserImpl = ({ devices, connectionState, agentHostingEnabled, onClickAdd, onClickJoinExisting, onClickRecover, onClickReset, ...agentProps }) => {
   const edgeDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType2.AGENT_MANAGED && device.profile?.os?.toUpperCase() === "EDGE");
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     role: "none",
     className: "bs-40 grow overflow-y-auto"
-  }, /* @__PURE__ */ React23.createElement(DeviceList, {
+  }, /* @__PURE__ */ React21.createElement(DeviceList, {
     devices,
     connectionState,
     onClickAdd,
@@ -1324,20 +1064,21 @@ var IdentityActionChooserImpl = ({ devices, connectionState, agentHostingEnabled
     onClickRecover: agentProps.agentStatus === "created" ? onClickRecover : void 0,
     onClickReset,
     onAgentDestroy: agentProps.onAgentDestroy
-  }), !edgeDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ React23.createElement(AgentConfig, agentProps));
+  }), !edgeDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ React21.createElement(AgentConfig, agentProps));
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
-import React24, { useState as useState3 } from "react";
+import React22, { useState } from "react";
 import { log as log3 } from "@dxos/log";
-import { useClipboard, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { useClipboard, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { EmojiPickerBlock, HuePicker } from "@dxos/react-ui-pickers";
 import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
 
 // packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts
 import { useClient as useClient5 } from "@dxos/react-client";
 
 // packages/sdk/shell/src/panels/IdentityPanel/useEdgeAgentsHandlers.ts
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { invariant } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
 import { QueryAgentStatusResponse } from "@dxos/protocols/proto/dxos/client/services";
@@ -1345,9 +1086,9 @@ import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata
 import { useClient as useClient3 } from "@dxos/react-client";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useEdgeAgentsHandlers.ts";
 var useEdgeAgentHandlers = ({ identity }) => {
-  const [validationMessage, setValidationMessage] = useState4("");
-  const [lastReceivedStatus, setLastReceivedStatus] = useState4(QueryAgentStatusResponse.AgentStatus.UNKNOWN);
-  const [agentStatus, setAgentStatus] = useState4("getting");
+  const [validationMessage, setValidationMessage] = useState2("");
+  const [lastReceivedStatus, setLastReceivedStatus] = useState2(QueryAgentStatusResponse.AgentStatus.UNKNOWN);
+  const [agentStatus, setAgentStatus] = useState2("getting");
   const client = useClient3();
   const agentHostingEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
   const handleStatus = (status) => {
@@ -1433,15 +1174,15 @@ var useEdgeAgentHandlers = ({ identity }) => {
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/useKubeAgentHandlers.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { log as log5 } from "@dxos/log";
 import { useClient as useClient4, useAgentHostingClient } from "@dxos/react-client";
 import { Invitation as Invitation3, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useKubeAgentHandlers.ts";
 var useKubeAgentHandlers = ({ invitations, identity }) => {
-  const [validationMessage, setValidationMessage] = useState5("");
-  const [agentStatus, setAgentStatus] = useState5("getting");
+  const [validationMessage, setValidationMessage] = useState3("");
+  const [agentStatus, setAgentStatus] = useState3("getting");
   const agentHostingProviderClient = useAgentHostingClient();
   const client = useClient4();
   const updateAgentStatus = async () => {
@@ -1570,11 +1311,11 @@ var useAgentHandlers = (params) => {
 };
 
 // packages/sdk/shell/src/steps/InvitationManager.tsx
-import { Check as Check3, X as X3 } from "@phosphor-icons/react";
-import React25, { useMemo as useMemo2 } from "react";
+import { Check as Check2, X as X3 } from "@phosphor-icons/react";
+import React23, { useMemo as useMemo2 } from "react";
 import { QR } from "react-qr-rounded";
-import { Clipboard as Clipboard2, useId as useId5, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { descriptionText as descriptionText8, getSize as getSize10, mx as mx19 } from "@dxos/react-ui-theme";
+import { Clipboard as Clipboard2, useId as useId5, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { descriptionText as descriptionText8, getSize as getSize8, mx as mx18 } from "@dxos/react-ui-theme";
 import { hexToEmoji as hexToEmoji3 } from "@dxos/util";
 
 // packages/sdk/shell/src/util/invitationStatusValue.ts
@@ -1620,13 +1361,13 @@ var invitationStatusValue = /* @__PURE__ */ new Map([
 
 // packages/sdk/shell/src/steps/InvitationManager.tsx
 var InvitationManagerView = ({ children, ...props }) => {
-  return /* @__PURE__ */ React25.createElement(Viewport.View, {
+  return /* @__PURE__ */ React23.createElement(Viewport.View, {
     ...props,
     classNames: "grow flex flex-col justify-around items-center"
   }, children);
 };
 var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCode, id = "0" }) => {
-  const { t } = useTranslation11("os");
+  const { t } = useTranslation9("os");
   const qrLabel = useId5("invitation-manager__qr-code");
   const statusValue = multiUse ? 0 : invitationStatusValue.get(status) ?? 0;
   const showAuthCode = statusValue === 3;
@@ -1647,50 +1388,50 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
   }, [
     statusValue
   ]);
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Viewport.Root, {
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Viewport.Root, {
     activeView,
     classNames: "grow plb-1"
-  }, /* @__PURE__ */ React25.createElement(Viewport.Views, null, /* @__PURE__ */ React25.createElement(InvitationManagerView, {
+  }, /* @__PURE__ */ React23.createElement(Viewport.Views, null, /* @__PURE__ */ React23.createElement(InvitationManagerView, {
     id: "showing qr",
     emoji
-  }, /* @__PURE__ */ React25.createElement("p", {
+  }, /* @__PURE__ */ React23.createElement("p", {
     className: "text-sm mlb-1 font-normal text-center"
-  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React25.createElement("div", {
+  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React23.createElement("div", {
     role: "none",
-    className: mx19(descriptionText8, "is-full max-is-[14rem] relative")
-  }, /* @__PURE__ */ React25.createElement(QR, {
+    className: mx18(descriptionText8, "is-full max-is-[14rem] relative")
+  }, /* @__PURE__ */ React23.createElement(QR, {
     rounding: 100,
     backgroundColor: "transparent",
     color: "currentColor",
-    className: mx19("is-full bs-full p-2", showAuthCode && "invisible"),
+    className: mx18("is-full bs-full p-2", showAuthCode && "invisible"),
     "aria-labelledby": qrLabel,
     errorCorrectionLevel: "Q",
     cutout: true
-  }, invitationUrl ?? "never"), /* @__PURE__ */ React25.createElement(Centered, null, /* @__PURE__ */ React25.createElement(Emoji, {
+  }, invitationUrl ?? "never"), /* @__PURE__ */ React23.createElement(Centered, null, /* @__PURE__ */ React23.createElement(Emoji, {
     text: emoji
-  }))), /* @__PURE__ */ React25.createElement("span", {
+  }))), /* @__PURE__ */ React23.createElement("span", {
     id: qrLabel,
     className: "sr-only"
-  }, t("qr label")), /* @__PURE__ */ React25.createElement(Clipboard2.Button, {
+  }, t("qr label")), /* @__PURE__ */ React23.createElement(Clipboard2.Button, {
     variant: "ghost",
     value: invitationUrl ?? "never"
-  })), /* @__PURE__ */ React25.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React23.createElement(InvitationManagerView, {
     id: "showing auth code"
-  }, /* @__PURE__ */ React25.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React25.createElement(AuthCode, {
+  }, /* @__PURE__ */ React23.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React23.createElement(AuthCode, {
     code: authCode,
     large: true,
     classNames: "text-black dark:text-white"
-  }), /* @__PURE__ */ React25.createElement(Label, null, t("auth other device emoji message")), emoji && /* @__PURE__ */ React25.createElement(Emoji, {
+  }), /* @__PURE__ */ React23.createElement(Label, null, t("auth other device emoji message")), emoji && /* @__PURE__ */ React23.createElement(Emoji, {
     text: emoji
-  })), /* @__PURE__ */ React25.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React23.createElement(InvitationManagerView, {
     id: "showing final"
-  }, statusValue > 0 ? /* @__PURE__ */ React25.createElement(Check3, {
-    className: mx19("m-1.5", getSize10(6))
-  }) : /* @__PURE__ */ React25.createElement(X3, {
-    className: mx19("m-1.5", getSize10(6))
-  })))), /* @__PURE__ */ React25.createElement(Actions, {
+  }, statusValue > 0 ? /* @__PURE__ */ React23.createElement(Check2, {
+    className: mx18("m-1.5", getSize8(6))
+  }) : /* @__PURE__ */ React23.createElement(X3, {
+    className: mx18("m-1.5", getSize8(6))
+  })))), /* @__PURE__ */ React23.createElement(Actions, {
     classNames: "mbs-4"
-  }, /* @__PURE__ */ React25.createElement(Action, {
+  }, /* @__PURE__ */ React23.createElement(Action, {
     disabled: !active,
     onClick: () => send?.({
       type: "deselectInvitation"
@@ -1700,15 +1441,15 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
 
 // packages/sdk/shell/src/steps/ConfirmReset.tsx
 import { Warning } from "@phosphor-icons/react";
-import React26, { useState as useState6 } from "react";
+import React24, { useState as useState4 } from "react";
 import { log as log6 } from "@dxos/log";
-import { Message, useTranslation as useTranslation12 } from "@dxos/react-ui";
-import { getSize as getSize11, mx as mx20 } from "@dxos/react-ui-theme";
+import { Message, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { getSize as getSize9, mx as mx19 } from "@dxos/react-ui-theme";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/steps/ConfirmReset.tsx";
 var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
-  const { t } = useTranslation12("os");
-  const [validationMessage, setValidationMessage] = useState6("");
-  const [pending, setPending] = useState6(false);
+  const { t } = useTranslation10("os");
+  const [validationMessage, setValidationMessage] = useState4("");
+  const [pending, setPending] = useState4(false);
   const processReset = async () => {
     setPending(true);
     return onConfirm?.().then(() => setPending(false), (error) => {
@@ -1722,7 +1463,7 @@ var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
       setPending(false);
     });
   };
-  return /* @__PURE__ */ React26.createElement(ConfirmResetImpl, {
+  return /* @__PURE__ */ React24.createElement(ConfirmResetImpl, {
     disabled: !active,
     pending,
     validationMessage,
@@ -1732,20 +1473,20 @@ var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
   });
 };
 var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCancel, mode }) => {
-  const { t } = useTranslation12("os");
+  const { t } = useTranslation10("os");
   const confirmationValue = t("confirmation value");
-  const [inputValue, setInputValue] = useState6("");
+  const [inputValue, setInputValue] = useState4("");
   const testIdAffix = mode === "join new identity" ? "join-new-identity" : mode === "recover" ? "recover" : "reset-storage";
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("div", {
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: "grow flex flex-col gap-2 justify-center"
-  }, /* @__PURE__ */ React26.createElement(Message.Root, {
+  }, /* @__PURE__ */ React24.createElement(Message.Root, {
     valence: "error"
-  }, /* @__PURE__ */ React26.createElement(Message.Title, null, /* @__PURE__ */ React26.createElement(Warning, {
-    className: mx20(getSize11(6), "inline mie-2")
-  }), t("sign out chooser title")), /* @__PURE__ */ React26.createElement(Message.Body, null, t("sign out chooser message"))), /* @__PURE__ */ React26.createElement(Input, {
+  }, /* @__PURE__ */ React24.createElement(Message.Title, null, /* @__PURE__ */ React24.createElement(Warning, {
+    className: mx19(getSize9(6), "inline mie-2")
+  }), t("sign out chooser title")), /* @__PURE__ */ React24.createElement(Message.Body, null, t("sign out chooser message"))), /* @__PURE__ */ React24.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React26.createElement(StepHeading, {
+    label: /* @__PURE__ */ React24.createElement(StepHeading, {
       className: "text-start mlb-2"
     }, t(mode === "join new identity" ? "join new identity input label" : mode === "recover" ? "recover reset input label" : "reset storage input label", {
       confirmationValue
@@ -1756,11 +1497,11 @@ var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCan
       confirmationValue
     }),
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React26.createElement(Actions, null, onCancel && /* @__PURE__ */ React26.createElement(Action, {
+  })), /* @__PURE__ */ React24.createElement(Actions, null, onCancel && /* @__PURE__ */ React24.createElement(Action, {
     disabled,
     onClick: onCancel,
     "data-testid": `${testIdAffix}.reset-identity-cancel`
-  }, t("cancel label")), onConfirm && /* @__PURE__ */ React26.createElement(Action, {
+  }, t("cancel label")), onConfirm && /* @__PURE__ */ React24.createElement(Action, {
     variant: "destructive",
     disabled: disabled || pending || inputValue !== confirmationValue,
     onClick: onConfirm,
@@ -1773,15 +1514,23 @@ var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/I
 var viewStyles = "pbs-1 pbe-3 pli-3";
 var getHueValue = (identity) => identity?.profile?.data?.hue || hexToHue2(identity?.identityKey.toHex() ?? "0");
 var getEmojiValue = (identity) => identity?.profile?.data?.emoji || hexToEmoji4(identity?.identityKey.toHex() ?? "0");
-var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState }) => {
+var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState, onManageCredentials }) => {
   const fallbackValue = keyToFallback3(identity.identityKey);
-  const { t } = useTranslation13("os");
-  const [displayName, setDisplayName] = useState7(identity.profile?.displayName ?? "");
-  const [emoji, setEmojiDirectly] = useState7(getEmojiValue(identity));
-  const [hue, setHueDirectly] = useState7(getHueValue(identity));
-  const { textValue, setTextValue } = useClipboard2();
-  const identityHex = identity.identityKey.toHex();
-  const publicKeyCopied = textValue === identityHex;
+  const { t } = useTranslation11("os");
+  const [displayName, setDisplayNameDirectly] = useState5(identity.profile?.displayName ?? "");
+  const [emoji, setEmojiDirectly] = useState5(getEmojiValue(identity));
+  const [hue, setHueDirectly] = useState5(getHueValue(identity));
+  const updateDisplayName = useMemo3(() => debounce((nextDisplayName) => onUpdateProfile?.({
+    ...identity.profile,
+    displayName: nextDisplayName
+  }), 3e3), [
+    onUpdateProfile,
+    identity.profile
+  ]);
+  const setDisplayName = (nextDisplayName) => {
+    setDisplayNameDirectly(nextDisplayName);
+    updateDisplayName(nextDisplayName);
+  };
   const setEmoji = (nextEmoji) => {
     setEmojiDirectly(nextEmoji);
     void onUpdateProfile?.({
@@ -1803,82 +1552,82 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
     });
   };
   const isConnected = connectionState === ConnectionState2.ONLINE;
-  return /* @__PURE__ */ React27.createElement(Heading, {
+  return /* @__PURE__ */ React25.createElement(Heading, {
     titleId,
     title,
-    corner: /* @__PURE__ */ React27.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React25.createElement(CloseButton, {
       onDone
     })
-  }, /* @__PURE__ */ React27.createElement(Avatar6.Root, {
+  }, /* @__PURE__ */ React25.createElement(Avatar6.Root, {
     size: 16,
     variant: "circle",
     status: isConnected ? "active" : "error",
     hue: hue || fallbackValue.hue
-  }, /* @__PURE__ */ React27.createElement(Toolbar3.Root, {
+  }, /* @__PURE__ */ React25.createElement(Toolbar.Root, {
     classNames: "flex justify-center"
-  }, /* @__PURE__ */ React27.createElement(Avatar6.Frame, {
+  }, /* @__PURE__ */ React25.createElement(Avatar6.Frame, {
     classNames: "relative z-[2] -mli-4 chromatic-ignore"
-  }, /* @__PURE__ */ React27.createElement(Avatar6.Fallback, {
+  }, /* @__PURE__ */ React25.createElement(Avatar6.Fallback, {
     text: emoji || fallbackValue.emoji
-  }))), /* @__PURE__ */ React27.createElement(Avatar6.Label, {
+  }))), /* @__PURE__ */ React25.createElement(Avatar6.Label, {
     classNames: "sr-only",
     "data-testid": "identityHeading.displayName"
-  }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex())), /* @__PURE__ */ React27.createElement(Input2.Root, null, /* @__PURE__ */ React27.createElement(Input2.Label, {
+  }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex())), /* @__PURE__ */ React25.createElement(Input2.Root, null, /* @__PURE__ */ React25.createElement(Input2.Label, {
     srOnly: true
-  }, t("display name input label")), /* @__PURE__ */ React27.createElement(Input2.TextInput, {
+  }, t("display name input label")), /* @__PURE__ */ React25.createElement(Input2.TextInput, {
     variant: "subdued",
     "data-testid": "display-name-input",
     placeholder: t("display name input placeholder"),
     classNames: "mbs-2 text-center font-light text-xl",
     value: displayName,
-    onChange: ({ target: { value } }) => setDisplayName(value),
-    onBlur: ({ target: { value } }) => onUpdateProfile?.({
-      ...identity.profile,
-      displayName: value
-    })
-  })), /* @__PURE__ */ React27.createElement(Toolbar3.Root, {
+    onChange: ({ target: { value } }) => setDisplayName(value)
+  })), /* @__PURE__ */ React25.createElement(Toolbar.Root, {
     classNames: "flex justify-center items-center gap-1 pt-3"
-  }, /* @__PURE__ */ React27.createElement(EmojiPickerToolbarButton, {
+  }, /* @__PURE__ */ React25.createElement(EmojiPickerToolbarButton, {
     emoji,
     onChangeEmoji: setEmoji,
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ React27.createElement(HuePickerToolbarButton, {
-    hue,
-    onChangeHue: setHue,
+  }), /* @__PURE__ */ React25.createElement(HuePicker2, {
+    value: hue,
+    onChange: setHue,
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ React27.createElement(Tooltip5.Root, null, /* @__PURE__ */ React27.createElement(Tooltip5.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React27.createElement(Toolbar3.Button, {
+  }), /* @__PURE__ */ React25.createElement(Clipboard3.IconButton, {
     classNames: "bs-[--rail-action]",
     "data-testid": "update-profile-form-copy-key",
-    onClick: () => setTextValue(identityHex)
-  }, /* @__PURE__ */ React27.createElement("span", {
+    label: t("copy self did label"),
+    value: identity.did
+  }), onManageCredentials && /* @__PURE__ */ React25.createElement(Tooltip3.Root, null, /* @__PURE__ */ React25.createElement(Tooltip3.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React25.createElement(Toolbar.Button, {
+    classNames: "bs-[--rail-action]",
+    onClick: onManageCredentials
+  }, /* @__PURE__ */ React25.createElement("span", {
     className: "sr-only"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React27.createElement(Key, {
-    className: getSize12(5)
-  }))), /* @__PURE__ */ React27.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React27.createElement(Tooltip5.Content, {
+  }, t("manage credentials label")), /* @__PURE__ */ React25.createElement(IdentificationCard, {
+    className: getSize10(5)
+  }))), /* @__PURE__ */ React25.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React25.createElement(Tooltip3.Content, {
     side: "bottom"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React27.createElement(Tooltip5.Arrow, null)))), /* @__PURE__ */ React27.createElement(Tooltip5.Root, null, /* @__PURE__ */ React27.createElement(Tooltip5.Trigger, {
+  }, t("manage credentials label"), /* @__PURE__ */ React25.createElement(Tooltip3.Arrow, null)))), /* @__PURE__ */ React25.createElement(Tooltip3.Root, null, /* @__PURE__ */ React25.createElement(Tooltip3.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React27.createElement(Toolbar3.Button, {
+  }, /* @__PURE__ */ React25.createElement(Toolbar.Button, {
     classNames: [
       "bs-[--rail-action]",
-      !isConnected && "text-error-500"
+      !isConnected && errorText
     ],
     onClick: () => onChangeConnectionState?.(isConnected ? ConnectionState2.OFFLINE : ConnectionState2.ONLINE)
-  }, /* @__PURE__ */ React27.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement("span", {
     className: "sr-only"
-  }, t(isConnected ? "disconnect label" : "connect label")), isConnected ? /* @__PURE__ */ React27.createElement(PlugsConnected, {
-    className: getSize12(5)
-  }) : /* @__PURE__ */ React27.createElement(Plugs, {
-    className: getSize12(5)
-  }))), /* @__PURE__ */ React27.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React27.createElement(Tooltip5.Content, {
+  }, t(isConnected ? "disconnect label" : "connect label")), isConnected ? /* @__PURE__ */ React25.createElement(PlugsConnected, {
+    className: getSize10(5)
+  }) : /* @__PURE__ */ React25.createElement(Plugs, {
+    className: getSize10(5)
+  }))), /* @__PURE__ */ React25.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React25.createElement(Tooltip3.Content, {
     side: "bottom"
-  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React27.createElement(Tooltip5.Arrow, null)))))));
+  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React25.createElement(Tooltip3.Arrow, null)))))));
 };
 var IdentityPanelImpl = (props) => {
-  const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onRecover, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, ...rest } = props;
-  const { t } = useTranslation13("os");
+  const { identity, titleId, activeView, onUpdateProfile, onResetStorage, onRecover, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, onManageCredentials, ...rest } = props;
+  const { t } = useTranslation11("os");
   const title = useMemo3(() => {
     switch (activeView) {
       case "device invitation manager":
@@ -1892,7 +1641,7 @@ var IdentityPanelImpl = (props) => {
   ]);
   const onCancelReset = () => rest.send?.("unchooseAction");
   const hideRecover = rest.agentStatus !== "created";
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(IdentityHeading, {
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(IdentityHeading, {
     identity,
     titleId,
     title,
@@ -1900,45 +1649,46 @@ var IdentityPanelImpl = (props) => {
     onDone,
     onUpdateProfile,
     connectionState,
-    onChangeConnectionState
-  }), /* @__PURE__ */ React27.createElement(Viewport.Root, {
+    onChangeConnectionState,
+    onManageCredentials
+  }), /* @__PURE__ */ React25.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React27.createElement(Viewport.Views, null, /* @__PURE__ */ React27.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React25.createElement(Viewport.Views, null, /* @__PURE__ */ React25.createElement(Viewport.View, {
     id: "identity action chooser",
     classNames: viewStyles
-  }, /* @__PURE__ */ React27.createElement(IdentityActionChooserComponent, {
+  }, /* @__PURE__ */ React25.createElement(IdentityActionChooserComponent, {
     active: activeView === "identity action chooser",
     ...rest,
     connectionState
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React25.createElement(Viewport.View, {
     id: "device invitation manager",
     classNames: viewStyles
-  }, /* @__PURE__ */ React27.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React25.createElement(InvitationManagerComponent, {
     active: activeView === "device invitation manager",
     ...rest,
     invitationUrl: rest.createInvitationUrl(rest.invitationCode)
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React25.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm join new identity"
-  }, /* @__PURE__ */ React27.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React25.createElement(ConfirmReset, {
     active: activeView === "confirm join new identity",
     ...rest,
     mode: "join new identity",
     onConfirm: onJoinNewIdentity,
     onCancel: onCancelReset
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React25.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm recover"
-  }, /* @__PURE__ */ React27.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React25.createElement(ConfirmReset, {
     active: activeView === "confirm recover",
     ...rest,
     mode: "recover",
     onConfirm: onRecover,
     onCancel: onCancelReset
-  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React25.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm reset storage"
-  }, /* @__PURE__ */ React27.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React25.createElement(ConfirmReset, {
     active: activeView === "confirm reset storage",
     ...rest,
     mode: "reset storage",
@@ -1948,7 +1698,7 @@ var IdentityPanelImpl = (props) => {
 };
 var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus2(invitation);
-  return /* @__PURE__ */ React27.createElement(IdentityPanelImpl, {
+  return /* @__PURE__ */ React25.createElement(IdentityPanelImpl, {
     ...props,
     ...invitationStatus
   });
@@ -1966,7 +1716,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   if (!identity) {
     log7.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file6,
-      L: 255,
+      L: 272,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1983,7 +1733,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       log7("[state]", state, {
         F: __dxlog_file6,
-        L: 268,
+        L: 285,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2029,40 +1779,40 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     onChangeConnectionState: handleChangeConnectionState,
     ...agentProps
   };
-  return identityState.context.invitation ? /* @__PURE__ */ React27.createElement(IdentityPanelWithInvitationImpl, {
+  return identityState.context.invitation ? /* @__PURE__ */ React25.createElement(IdentityPanelWithInvitationImpl, {
     ...implProps,
     invitation: identityState.context.invitation
-  }) : /* @__PURE__ */ React27.createElement(IdentityPanelImpl, implProps);
+  }) : /* @__PURE__ */ React25.createElement(IdentityPanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
-import React36, { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo4 } from "react";
+import React34, { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo4 } from "react";
 import { log as log11 } from "@dxos/log";
 import { useClient as useClient8, useMulticastObservable } from "@dxos/react-client";
 import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
-import { useId as useId8, useThemeContext as useThemeContext5 } from "@dxos/react-ui";
+import { useId as useId8, useThemeContext as useThemeContext3 } 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 forwardRef9 } from "react";
-import { Button as Button9, useTranslation as useTranslation14 } from "@dxos/react-ui";
-import { descriptionText as descriptionText9, getSize as getSize13, mx as mx21 } from "@dxos/react-ui-theme";
+import React26, { cloneElement, forwardRef as forwardRef9 } from "react";
+import { Button as Button7, useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { descriptionText as descriptionText9, getSize as getSize11, mx as mx20 } from "@dxos/react-ui-theme";
 var JoinHeading = /* @__PURE__ */ forwardRef9(({ mode, titleId, exitActionParent, onExit }, forwardedRef) => {
-  const { t } = useTranslation14("os");
-  const exitButton = /* @__PURE__ */ React28.createElement(Button9, {
+  const { t } = useTranslation12("os");
+  const exitButton = /* @__PURE__ */ React26.createElement(Button7, {
     variant: "ghost",
     ...onExit && {
       onClick: onExit
     },
-    classNames: mx21(descriptionText9, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    classNames: mx20(descriptionText9, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     "data-testid": "join-exit"
-  }, /* @__PURE__ */ React28.createElement(X4, {
+  }, /* @__PURE__ */ React26.createElement(X4, {
     weight: "bold",
-    className: getSize13(4)
-  }), /* @__PURE__ */ React28.createElement("span", {
+    className: getSize11(4)
+  }), /* @__PURE__ */ React26.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
-  return /* @__PURE__ */ React28.createElement(Heading, {
+  return /* @__PURE__ */ React26.createElement(Heading, {
     ref: forwardedRef,
     titleId,
     title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
@@ -2680,17 +2430,17 @@ var useJoinMachine = (client, options) => {
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx
 import { CaretRight as CaretRight2, Plus as Plus3, QrCode, Textbox } from "@phosphor-icons/react";
-import React29 from "react";
-import { useTranslation as useTranslation15 } from "@dxos/react-ui";
-import { getSize as getSize14 } from "@dxos/react-ui-theme";
+import React27 from "react";
+import { useTranslation as useTranslation13 } 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 } = useTranslation13("os");
   const sharedButtonProps = {
     disabled,
-    after: /* @__PURE__ */ React29.createElement(CaretRight2, {
-      className: getSize14(4),
+    after: /* @__PURE__ */ React27.createElement(CaretRight2, {
+      className: getSize12(4),
       weight: "bold"
     }),
     slots: {
@@ -2699,35 +2449,35 @@ 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__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1 grow"
-  }, /* @__PURE__ */ React29.createElement(CompoundButton, {
+  }, /* @__PURE__ */ React27.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("create identity description"),
-    before: /* @__PURE__ */ React29.createElement(Plus3, {
-      className: getSize14(6)
+    before: /* @__PURE__ */ React27.createElement(Plus3, {
+      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__ */ React27.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("join identity description"),
-    before: /* @__PURE__ */ React29.createElement(QrCode, {
-      className: getSize14(6)
+    before: /* @__PURE__ */ React27.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__ */ React27.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("recover identity description"),
-    before: /* @__PURE__ */ React29.createElement(Textbox, {
-      className: getSize14(6)
+    before: /* @__PURE__ */ React27.createElement(Textbox, {
+      className: getSize12(6)
     }),
     onClick: () => send({
       type: "recoverIdentity"
@@ -2737,39 +2487,39 @@ var AdditionMethodChooser = (viewStateProps) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
-import React30, { cloneElement as cloneElement2 } from "react";
+import React28, { cloneElement as cloneElement2 } from "react";
 import { generateName as generateName4 } from "@dxos/display-name";
-import { Avatar as Avatar7, useId as useId7, useTranslation as useTranslation16 } from "@dxos/react-ui";
-import { mx as mx22 } from "@dxos/react-ui-theme";
+import { Avatar as Avatar7, useId as useId7, useTranslation as useTranslation14 } 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 { t } = useTranslation14("os");
   const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? "0";
   const fallbackValue = hexToFallback(addedIdentityHex);
   const labelId = useId7("identityListItem__label");
   const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName4(addedIdentityHex));
-  const doneAction = /* @__PURE__ */ React30.createElement(Action, {
+  const doneAction = /* @__PURE__ */ React28.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__ */ React28.createElement("span", null, t("done label")));
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React28.createElement("div", {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
-  }, /* @__PURE__ */ React30.createElement(Avatar7.Root, {
+  }, /* @__PURE__ */ React28.createElement(Avatar7.Root, {
     status: "active",
     labelId,
     hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React30.createElement(Avatar7.Frame, null, /* @__PURE__ */ React30.createElement(Avatar7.Fallback, {
+  }, /* @__PURE__ */ React28.createElement(Avatar7.Frame, null, /* @__PURE__ */ React28.createElement(Avatar7.Fallback, {
     text: addedIdentity?.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React30.createElement(Avatar7.Label, {
-    classNames: mx22("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, {
+  })), /* @__PURE__ */ React28.createElement(Avatar7.Label, {
+    classNames: mx21("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
+  }, displayName))), /* @__PURE__ */ React28.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React28.createElement(Action, {
     variant: "primary",
     disabled: disabled || !addedIdentity,
     onClick: () => addedIdentity && send({
@@ -2781,21 +2531,21 @@ var IdentityAdded = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
-import React31, { useCallback as useCallback5, useState as useState8 } from "react";
+import React29, { useCallback as useCallback5, useState as useState6 } from "react";
 import { log as log9 } from "@dxos/log";
 import { useClient as useClient7 } from "@dxos/react-client";
-import { useTranslation as useTranslation17 } from "@dxos/react-ui";
+import { useTranslation as useTranslation15 } from "@dxos/react-ui";
 var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
 var IdentityInput = (props) => {
   const { send, method } = props;
   const isRecover = method === "recover identity";
   const client = useClient7();
-  const { t } = useTranslation17("os");
-  const [validationMessage, setValidationMessage] = useState8("");
+  const { t } = useTranslation15("os");
+  const [validationMessage, setValidationMessage] = useState6("");
   const handleConfirm = async (value) => {
     if (isRecover) {
       await client.halo.recoverIdentity({
-        seedphrase: value
+        recoveryCode: value
       }).then((identity) => {
         send?.({
           type: "selectIdentity",
@@ -2829,7 +2579,7 @@ var IdentityInput = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ React31.createElement(IdentityInputImpl, {
+  return /* @__PURE__ */ React29.createElement(IdentityInputImpl, {
     ...props,
     onConfirm: handleConfirm,
     validationMessage
@@ -2837,9 +2587,9 @@ var IdentityInput = (props) => {
 };
 var IdentityInputImpl = (props) => {
   const { method, active, onConfirm, validationMessage } = props;
-  const { t } = useTranslation17("os");
-  const [inputValue, setInputValue] = useState8("");
-  const [pending, setPending] = useState8(false);
+  const { t } = useTranslation15("os");
+  const [inputValue, setInputValue] = useState6("");
+  const [pending, setPending] = useState6(false);
   const disabled = !active || pending;
   const isRecover = method === "recover identity";
   const handleConfirm = useCallback5(async () => {
@@ -2850,17 +2600,17 @@ var IdentityInputImpl = (props) => {
     onConfirm,
     inputValue
   ]);
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("div", {
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React31.createElement(Input, {
+  }, /* @__PURE__ */ React29.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React31.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React29.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
     disabled,
     "data-testid": "identity-input",
     placeholder: isRecover ? t("recovery code placeholder") : t("display name placeholder"),
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
+  })), /* @__PURE__ */ React29.createElement(Actions, null, /* @__PURE__ */ React29.createElement(Action, {
     variant: "primary",
     disabled: disabled || inputValue.trim().length === 0,
     onClick: handleConfirm,
@@ -2869,13 +2619,13 @@ 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 React30, { cloneElement as cloneElement3 } from "react";
+import { useTranslation as useTranslation16 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
-import React33, { useState as useState9, useEffect as useEffect5, cloneElement as cloneElement4 } from "react";
+import React31, { useState as useState7, useEffect as useEffect5, cloneElement as cloneElement4 } from "react";
 import { log as log10 } from "@dxos/log";
-import { useTranslation as useTranslation19 } from "@dxos/react-ui";
+import { useTranslation as useTranslation17 } from "@dxos/react-ui";
 var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx";
 var invitationCodeFromUrl = (text) => {
   try {
@@ -2895,8 +2645,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] = useState9(unredeemedCode ?? "");
+  const { t } = useTranslation17("os");
+  const [inputValue, setInputValue] = useState7(unredeemedCode ?? "");
   useEffect5(() => {
     unredeemedCode && setInputValue(unredeemedCode ?? "");
   }, [
@@ -2914,7 +2664,7 @@ var InvitationInput = (props) => {
       }
     });
   };
-  const exitAction = /* @__PURE__ */ React33.createElement(Action, {
+  const exitAction = /* @__PURE__ */ React31.createElement(Action, {
     variant: "ghost",
     disabled,
     ...onExit ? {
@@ -2924,11 +2674,11 @@ var InvitationInput = (props) => {
     },
     "data-testid": "join-exit"
   }, t("cancel label"));
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.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__ */ React31.createElement(Input, {
+    label: /* @__PURE__ */ React31.createElement(StepHeading, null, t("invitation input label")),
     placeholder: t("invitation input placeholder"),
     disabled,
     value: inputValue,
@@ -2936,7 +2686,7 @@ 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" ? null : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React33.createElement(Action, {
+  })), /* @__PURE__ */ React31.createElement(Actions, null, Kind === "Halo" ? null : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React31.createElement(Action, {
     variant: "primary",
     disabled: disabled || inputValue.trim().length === 0,
     onClick: handleNext,
@@ -2945,8 +2695,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 React32 from "react";
+import { useTranslation as useTranslation18 } from "@dxos/react-ui";
 import { descriptionText as descriptionText10 } from "@dxos/react-ui-theme";
 var InvitationActions = ({
   // `invitationState` does report correct state, but here we evaluate whether `failReason` is a better source of truth
@@ -2958,14 +2708,14 @@ var InvitationActions = ({
   Kind,
   failReason
 }) => {
-  const { t } = useTranslation20("os");
+  const { t } = useTranslation18("os");
   if (failReason) {
-    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StepHeading, {
+    return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(StepHeading, {
       className: descriptionText10
-    }, 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__ */ React32.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+    }), /* @__PURE__ */ React32.createElement(Actions, null, /* @__PURE__ */ React32.createElement(Action, {
       disabled: !active,
       onClick: () => send({
         type: `reset${Kind}Invitation`
@@ -2973,16 +2723,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__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(StepHeading, {
       className: descriptionText10
-    }, t("connecting status label")), /* @__PURE__ */ React34.createElement("div", {
+    }, t("connecting status label")), /* @__PURE__ */ React32.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+    }), /* @__PURE__ */ React32.createElement(Actions, null, /* @__PURE__ */ React32.createElement(Action, {
       disabled: true,
       classNames: "order-2",
       "data-testid": "next"
-    }, t("next label")), /* @__PURE__ */ React34.createElement(Action, {
+    }, t("next label")), /* @__PURE__ */ React32.createElement(Action, {
       disabled: !active,
       onClick: onInvitationCancel,
       "data-testid": "invitation-rescuer-cancel"
@@ -2991,52 +2741,52 @@ 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 } = useTranslation18("os");
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React34.createElement(StepHeading, {
+  }, /* @__PURE__ */ React32.createElement(StepHeading, {
     className: descriptionText10
-  }, "There was a problem joining the space")), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
+  }, "There was a problem joining the space")), /* @__PURE__ */ React32.createElement(Actions, null, /* @__PURE__ */ React32.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__ */ React32.createElement(InvitationActions, props));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
-import React35, { useState as useState10 } from "react";
+import React33, { useState as useState8 } from "react";
 import { Invitation as Invitation6 } from "@dxos/react-client/invitations";
-import { Input as Input3, useTranslation as useTranslation21 } from "@dxos/react-ui";
+import { Input as Input3, useTranslation as useTranslation19 } from "@dxos/react-ui";
 import { descriptionText as descriptionText11 } from "@dxos/react-ui-theme";
 import { hexToEmoji as hexToEmoji5 } from "@dxos/util";
 var pinLength = 6;
 var InvitationAuthenticator = ({ failed, Kind, authMethod, active, pending, invitationId, onInvitationAuthenticate, onInvitationCancel }) => {
   const disabled = !active || pending;
-  const { t } = useTranslation21("os");
+  const { t } = useTranslation19("os");
   const invitationType = Kind.toLowerCase();
-  const [authCode, setAuthCode] = useState10("");
+  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__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center gap-4"
-  }, /* @__PURE__ */ React35.createElement(Input3.Root, failed && {
+  }, /* @__PURE__ */ React33.createElement(Input3.Root, failed && {
     validationValence: "error"
-  }, /* @__PURE__ */ React35.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React33.createElement(Input3.Label, {
     asChild: true
-  }, authMethod === Invitation6.AuthMethod.SHARED_SECRET ? /* @__PURE__ */ React35.createElement(StepHeading, null, t("auth code input label")) : /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(StepHeading, {
+  }, authMethod === Invitation6.AuthMethod.SHARED_SECRET ? /* @__PURE__ */ React33.createElement(StepHeading, null, t("auth code input label")) : /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(StepHeading, {
     className: descriptionText11
-  }, t("authenticating label")), /* @__PURE__ */ React35.createElement("div", {
+  }, t("authenticating label")), /* @__PURE__ */ React33.createElement("div", {
     role: "none",
     className: "grow"
-  }))), authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React35.createElement(Input3.PinInput, {
+  }))), authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React33.createElement(Input3.PinInput, {
     disabled,
     length: pinLength,
     onChange,
@@ -3047,18 +2797,18 @@ var InvitationAuthenticator = ({ failed, Kind, authMethod, active, pending, invi
     "data-prevent-ios-autofocus": true,
     "data-testid": `${invitationType}-auth-code-input`,
     "data-1p-ignore": true
-  }), failed && /* @__PURE__ */ React35.createElement(Input3.DescriptionAndValidation, {
+  }), failed && /* @__PURE__ */ React33.createElement(Input3.DescriptionAndValidation, {
     classNames: "text-center"
-  }, /* @__PURE__ */ React35.createElement(Input3.Validation, null, t("failed to authenticate message")))), invitationId && authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Label, null, t("auth other device emoji message")), /* @__PURE__ */ React35.createElement("div", {
+  }, /* @__PURE__ */ React33.createElement(Input3.Validation, null, t("failed to authenticate message")))), invitationId && authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Label, null, t("auth other device emoji message")), /* @__PURE__ */ React33.createElement("div", {
     className: "flex justify-center"
-  }, /* @__PURE__ */ React35.createElement(Emoji, {
+  }, /* @__PURE__ */ React33.createElement(Emoji, {
     text: hexToEmoji5(invitationId)
-  })))), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(Action, {
+  })))), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => onInvitationCancel?.(),
     "data-testid": `${invitationType}-invitation-authenticator-cancel`
-  }, t("cancel label")), /* @__PURE__ */ React35.createElement(Action, {
+  }, t("cancel label")), /* @__PURE__ */ React33.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onInvitationAuthenticate?.(authCode),
@@ -3120,46 +2870,46 @@ var JoinPanelImpl = (props) => {
     IdentityInput: IdentityInputComponent = IdentityInput,
     ConfirmReset: ConfirmResetComponent = ConfirmReset
   } = props;
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ React36.createElement(JoinHeading, {
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ React34.createElement(JoinHeading, {
     titleId,
     mode,
     onExit,
     exitActionParent
-  }), /* @__PURE__ */ React36.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React34.createElement(Viewport.Root, {
     focusManaged: true,
     activeView
-  }, /* @__PURE__ */ React36.createElement(Viewport.Views, null, /* @__PURE__ */ React36.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React34.createElement(Viewport.Views, null, /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "addition method chooser"
-  }, /* @__PURE__ */ React36.createElement(AdditionMethodChooser, {
+  }, /* @__PURE__ */ React34.createElement(AdditionMethodChooser, {
     send,
     active: activeView === "addition method chooser"
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "reset storage confirmation"
-  }, /* @__PURE__ */ React36.createElement(ConfirmResetComponent, {
+  }, /* @__PURE__ */ React34.createElement(ConfirmResetComponent, {
     send,
     active: activeView === "reset storage confirmation",
     onCancel: onCancelResetStorage,
     onConfirm: onConfirmResetStorage
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "create identity input"
-  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React34.createElement(IdentityInputComponent, {
     send,
     method: "create identity",
     active: activeView === "create identity input"
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "recover identity input"
-  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React34.createElement(IdentityInputComponent, {
     send,
     method: "recover identity",
     active: activeView === "recover identity input"
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation input"
-  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React34.createElement(InvitationInput, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation input",
@@ -3169,20 +2919,20 @@ var JoinPanelImpl = (props) => {
     ...succeededKeys?.Halo && {
       succeededKeys: succeededKeys.Halo
     }
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation rescuer"
-  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React34.createElement(InvitationRescuer, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation rescuer",
     invitationState: invitationStates?.Halo,
     onInvitationCancel: onHaloInvitationCancel,
     failReason: failReasons?.Halo
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation authenticator"
-  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React34.createElement(InvitationAuthenticator, {
     send,
     Kind: "Halo",
     invitationId: invitationIds?.Halo,
@@ -3193,19 +2943,19 @@ var JoinPanelImpl = (props) => {
     ...failed.has("Halo") && {
       failed: true
     }
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "identity added"
-  }, /* @__PURE__ */ React36.createElement(IdentityAdded, {
+  }, /* @__PURE__ */ React34.createElement(IdentityAdded, {
     send,
     mode,
     active: activeView === "identity added",
     doneActionParent,
     onDone: onHaloDone
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation input"
-  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React34.createElement(InvitationInput, {
     send,
     Kind: "Space",
     active: activeView === "space invitation input",
@@ -3217,20 +2967,20 @@ var JoinPanelImpl = (props) => {
     },
     onExit,
     exitActionParent
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation rescuer"
-  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React34.createElement(InvitationRescuer, {
     send,
     Kind: "Space",
     active: activeView === "space invitation rescuer",
     invitationState: invitationStates?.Space,
     onInvitationCancel: onSpaceInvitationCancel,
     failReason: failReasons?.Space
-  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React34.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation authenticator"
-  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React34.createElement(InvitationAuthenticator, {
     send,
     Kind: "Space",
     invitationId: invitationIds?.Space,
@@ -3246,7 +2996,7 @@ var JoinPanelImpl = (props) => {
 var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone: propsOnDone, onCancelResetStorage }) => {
   const client = useClient8();
   const identity = useIdentity2();
-  const { hasIosKeyboard } = useThemeContext5();
+  const { hasIosKeyboard } = useThemeContext3();
   const titleId = useId8("joinPanel__heading", propsTitleId);
   const [joinState, joinSend, joinService] = useJoinMachine(client, {
     context: {
@@ -3508,7 +3258,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
     client,
     joinSend
   ]);
-  return /* @__PURE__ */ React36.createElement(JoinPanelImpl, {
+  return /* @__PURE__ */ React34.createElement(JoinPanelImpl, {
     titleId,
     mode,
     send: joinSend,
@@ -3551,10 +3301,10 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
 
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 import { Planet } from "@phosphor-icons/react";
-import React38, { useEffect as useEffect7, useMemo as useMemo5 } from "react";
+import React36, { useEffect as useEffect7, useMemo as useMemo5 } from "react";
 import { log as log14 } from "@dxos/log";
 import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client/invitations";
-import { useId as useId9, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import { useId as useId9, useTranslation as useTranslation21 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts
 import { useMachine as useMachine3 } from "@xstate/react";
@@ -3620,13 +3370,13 @@ var useSpaceMachine = (options) => {
 
 // packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx
 import { Placeholder as Placeholder2, UserPlus, UsersThree } from "@phosphor-icons/react";
-import React37, { useCallback as useCallback7, useState as useState11 } from "react";
+import React35, { useCallback as useCallback7, useState as useState9 } from "react";
 import { log as log13 } from "@dxos/log";
 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 useTranslation22 } from "@dxos/react-ui";
-import { descriptionText as descriptionText12, mx as mx23 } from "@dxos/react-ui-theme";
+import { ScrollArea, useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { descriptionText as descriptionText12, mx as mx22 } from "@dxos/react-ui-theme";
 var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx";
 var activeActionKey = "dxos:react-shell/space-manager/active-action";
 var handleInvitationEvent = (invitation, subscription) => {
@@ -3646,7 +3396,7 @@ var handleInvitationEvent = (invitation, subscription) => {
 };
 var SpaceManager = (props) => {
   const { space, target } = props;
-  const { t } = useTranslation22("os");
+  const { t } = useTranslation20("os");
   const config = useConfig();
   const invitations = useSpaceInvitations2(space?.key);
   const inviteActions = {
@@ -3691,7 +3441,7 @@ var SpaceManager = (props) => {
       ])
     }
   };
-  return /* @__PURE__ */ React37.createElement(SpaceManagerImpl, {
+  return /* @__PURE__ */ React35.createElement(SpaceManagerImpl, {
     ...props,
     invitations,
     inviteActions
@@ -3700,7 +3450,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 } = useTranslation22("os");
+  const { t } = useTranslation20("os");
   const inviteActions = propsInviteActions ?? {
     noopInvite: {
       label: t("create space invitation label"),
@@ -3710,7 +3460,7 @@ var SpaceManagerImpl = (props) => {
       }
     }
   };
-  const [activeAction, setInternalActiveAction] = useState11(localStorage.getItem(activeActionKey) ?? "inviteMany");
+  const [activeAction, setInternalActiveAction] = useState9(localStorage.getItem(activeActionKey) ?? "inviteMany");
   const setActiveAction = (nextAction) => {
     setInternalActiveAction(nextAction);
     localStorage.setItem(activeActionKey, nextAction);
@@ -3718,26 +3468,26 @@ var SpaceManagerImpl = (props) => {
   const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
     Invitation8.State.CANCELLED
   ].includes(invitation.get().state));
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(ScrollArea.Root, {
     classNames: "grow shrink basis-28 -mli-2"
-  }, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
+  }, /* @__PURE__ */ React35.createElement(ScrollArea.Viewport, {
     classNames: "is-full pie-2"
-  }, !!visibleInvitations?.length && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("h3", {
-    className: mx23(headingFragment, descriptionText12)
-  }, t("invitation list heading")), /* @__PURE__ */ React37.createElement(InvitationListComponent, {
+  }, !!visibleInvitations?.length && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("h3", {
+    className: mx22(headingFragment, descriptionText12)
+  }, t("invitation list heading")), /* @__PURE__ */ React35.createElement(InvitationListComponent, {
     className: "mb-2",
     send,
     invitations: visibleInvitations ?? [],
     onClickRemove: (invitation) => invitation.cancel(),
     createInvitationUrl
-  }), /* @__PURE__ */ React37.createElement("h3", {
-    className: mx23(headingFragment, descriptionText12, "mbs-2")
-  }, t("space member list heading"))), /* @__PURE__ */ React37.createElement(SpaceMemberListComponent, {
+  }), /* @__PURE__ */ React35.createElement("h3", {
+    className: mx22(headingFragment, descriptionText12, "mbs-2")
+  }, t("space member list heading"))), /* @__PURE__ */ React35.createElement(SpaceMemberListComponent, {
     spaceKey: space.key,
     includeSelf: true
-  })), /* @__PURE__ */ React37.createElement(ScrollArea.Scrollbar, {
+  })), /* @__PURE__ */ React35.createElement(ScrollArea.Scrollbar, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React37.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(BifurcatedAction, {
+  }, /* @__PURE__ */ React35.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(BifurcatedAction, {
     disabled: !active,
     actions: inviteActions,
     activeAction,
@@ -3749,45 +3499,45 @@ var SpaceManagerImpl = (props) => {
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx";
 var SpacePanelHeading = ({ titleId, space, onDone }) => {
-  const { t } = useTranslation23("os");
+  const { t } = useTranslation21("os");
   const name = space.properties.name;
-  return /* @__PURE__ */ React38.createElement(Heading, {
+  return /* @__PURE__ */ React36.createElement(Heading, {
     titleId,
     title: t("space panel heading"),
-    corner: /* @__PURE__ */ React38.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React36.createElement(CloseButton, {
       "data-testid": "identity-panel-done",
       onDone
     })
-  }, /* @__PURE__ */ React38.createElement("div", {
+  }, /* @__PURE__ */ React36.createElement("div", {
     role: "none",
     className: "flex gap-4 items-center justify-center mlb-4"
-  }, /* @__PURE__ */ React38.createElement(Planet, {
+  }, /* @__PURE__ */ React36.createElement(Planet, {
     size: 32,
     weight: "light"
-  }), /* @__PURE__ */ React38.createElement("div", {
+  }), /* @__PURE__ */ React36.createElement("div", {
     className: "block text-start font-light text-xl"
   }, name ?? space.key.truncate())));
 };
 var SpacePanelImpl = (props) => {
   const { titleId, activeView, space, hideHeading, target, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, !hideHeading && /* @__PURE__ */ React38.createElement(SpacePanelHeading, {
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, !hideHeading && /* @__PURE__ */ React36.createElement(SpacePanelHeading, {
     ...rest,
     titleId,
     space
-  }), /* @__PURE__ */ React38.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React36.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React38.createElement(Viewport.Views, null, /* @__PURE__ */ React38.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React36.createElement(Viewport.Views, null, /* @__PURE__ */ React36.createElement(Viewport.View, {
     id: "space manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React38.createElement(SpaceManagerComponent, {
+  }, /* @__PURE__ */ React36.createElement(SpaceManagerComponent, {
     active: activeView === "space manager",
     space,
     target,
     ...rest
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     id: "space invitation manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React38.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React36.createElement(InvitationManagerComponent, {
     active: activeView === "space invitation manager",
     ...rest,
     invitationUrl: props.invitationUrl
@@ -3795,7 +3545,7 @@ var SpacePanelImpl = (props) => {
 };
 var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus3(invitation);
-  return /* @__PURE__ */ React38.createElement(SpacePanelImpl, {
+  return /* @__PURE__ */ React36.createElement(SpacePanelImpl, {
     ...props,
     ...invitationStatus,
     invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
@@ -3842,24 +3592,24 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
   };
   return spaceState.context.invitation ? (
     // TODO(wittjosiah): Unused? Remove?
-    /* @__PURE__ */ React38.createElement(SpacePanelWithInvitationImpl, {
+    /* @__PURE__ */ React36.createElement(SpacePanelWithInvitationImpl, {
       ...implProps,
       invitation: spaceState.context.invitation
     })
-  ) : /* @__PURE__ */ React38.createElement(SpacePanelImpl, implProps);
+  ) : /* @__PURE__ */ React36.createElement(SpacePanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/StatusPanel/StatusPanel.tsx
-import React39 from "react";
-import { Status, useTranslation as useTranslation24 } from "@dxos/react-ui";
+import React37 from "react";
+import { Status, useTranslation as useTranslation22 } from "@dxos/react-ui";
 var StatusPanel = ({ titleId }) => {
-  const { t } = useTranslation24("os");
-  return /* @__PURE__ */ React39.createElement("div", {
+  const { t } = useTranslation22("os");
+  return /* @__PURE__ */ React37.createElement("div", {
     className: "grid place-items-center p-2 gap-2"
-  }, /* @__PURE__ */ React39.createElement("p", {
+  }, /* @__PURE__ */ React37.createElement("p", {
     id: titleId,
     className: "font-medium text-center"
-  }, t("resetting message")), /* @__PURE__ */ React39.createElement(Status, {
+  }, t("resetting message")), /* @__PURE__ */ React37.createElement(Status, {
     indeterminate: true
   }, t("resetting message")));
 };
@@ -3867,96 +3617,96 @@ var StatusPanel = ({ titleId }) => {
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 var IdentityDialog = (props) => {
   const titleId = useId10("identityDialog__title", props.title);
-  return /* @__PURE__ */ React40.createElement(Dialog.Root, {
+  return /* @__PURE__ */ React38.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__ */ React38.createElement(Dialog.Portal, null, /* @__PURE__ */ React38.createElement(Dialog.Overlay, null, /* @__PURE__ */ React38.createElement(Dialog.Content, {
     "aria-labelledby": titleId,
     onOpenAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React40.createElement(Clipboard3.Provider, null, /* @__PURE__ */ React40.createElement(IdentityPanel, {
+  }, /* @__PURE__ */ React38.createElement(Clipboard4.Provider, null, /* @__PURE__ */ React38.createElement(IdentityPanel, {
     ...props,
     titleId,
-    doneActionParent: /* @__PURE__ */ React40.createElement(Dialog.Close, {
+    doneActionParent: /* @__PURE__ */ React38.createElement(Dialog.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
-import React41 from "react";
+import React39 from "react";
 import { AlertDialog, useId as useId11, useVisualViewport } from "@dxos/react-ui";
 var JoinDialog = (joinPanelProps) => {
   const titleId = useId11("joinDialog__title");
   const { height } = useVisualViewport();
-  return /* @__PURE__ */ React41.createElement(AlertDialog.Root, {
+  return /* @__PURE__ */ React39.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__ */ React39.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React39.createElement(AlertDialog.Overlay, {
     classNames: "backdrop-blur",
     ...height && {
       style: {
         blockSize: `${height}px`
       }
     }
-  }, /* @__PURE__ */ React41.createElement(AlertDialog.Content, {
+  }, /* @__PURE__ */ React39.createElement(AlertDialog.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React41.createElement(JoinPanel, {
+  }, /* @__PURE__ */ React39.createElement(JoinPanel, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Cancel, {
+    exitActionParent: /* @__PURE__ */ React39.createElement(AlertDialog.Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Action, {
+    doneActionParent: /* @__PURE__ */ React39.createElement(AlertDialog.Action, {
       asChild: true
     })
   })))));
 };
 
 // packages/sdk/shell/src/composites/Shell/run-shell.tsx
-import React45, { StrictMode } from "react";
+import React43, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { AgentHostingProvider, ClientProvider, ClientServicesProxy, Config, ShellDisplay as ShellDisplay2 } from "@dxos/react-client";
-import { Button as Button10, Clipboard as Clipboard5, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip6, useTranslation as useTranslation25 } from "@dxos/react-ui";
+import { Button as Button8, Clipboard as Clipboard6, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip4, useTranslation as useTranslation23 } 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 React44, { useEffect as useEffect8, useState as useState12 } from "react";
+import React42, { useEffect as useEffect8, useState as useState10 } from "react";
 import { log as log15 } from "@dxos/log";
 import { useClient as useClient9 } from "@dxos/react-client";
 import { ShellDisplay, ShellLayout } from "@dxos/react-client";
 import { useSpace as useSpace2 } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/composites/SpaceDialog/SpaceDialog.tsx
-import React42 from "react";
-import { Clipboard as Clipboard4, Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
+import React40 from "react";
+import { Clipboard as Clipboard5, Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
 var SpaceDialog = (spacePanelProps) => {
   const titleId = useId12("spaceDialog__title");
-  return /* @__PURE__ */ React42.createElement(Dialog2.Root, {
+  return /* @__PURE__ */ React40.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__ */ React40.createElement(Dialog2.Portal, null, /* @__PURE__ */ React40.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React40.createElement(Dialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React42.createElement(Clipboard4.Provider, null, /* @__PURE__ */ React42.createElement(SpacePanel, {
+  }, /* @__PURE__ */ React40.createElement(Clipboard5.Provider, null, /* @__PURE__ */ React40.createElement(SpacePanel, {
     ...spacePanelProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog2.Close, {
+    doneActionParent: /* @__PURE__ */ React40.createElement(Dialog2.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/StatusDialog/StatusDialog.tsx
-import React43 from "react";
+import React41 from "react";
 import { AlertDialog as AlertDialog2, useId as useId13 } from "@dxos/react-ui";
 var StatusDialog = () => {
   const titleId = useId13("statusDialog__title");
-  return /* @__PURE__ */ React43.createElement(AlertDialog2.Root, {
+  return /* @__PURE__ */ React41.createElement(AlertDialog2.Root, {
     open: true
-  }, /* @__PURE__ */ React43.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React43.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React43.createElement(AlertDialog2.Content, {
+  }, /* @__PURE__ */ React41.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React41.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React41.createElement(AlertDialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React43.createElement(StatusPanel, {
+  }, /* @__PURE__ */ React41.createElement(StatusPanel, {
     titleId
   })))));
 };
@@ -3965,14 +3715,14 @@ var StatusDialog = () => {
 var __dxlog_file14 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
 var blurActiveElement = () => document.activeElement?.blur?.();
 var Shell = ({ runtime }) => {
-  const [{ layout, invitationCode, spaceKey, spaceId, target }, setLayout] = useState12({
+  const [{ layout, invitationCode, spaceKey, spaceId, target }, setLayout] = useState10({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey,
     spaceId: runtime.spaceId,
     target: runtime.target
   });
-  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState12({
+  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState10({
     invitationUrl: runtime.invitationUrl,
     deviceInvitationParam: runtime.deviceInvitationParam,
     spaceInvitationParam: runtime.spaceInvitationParam
@@ -4024,11 +3774,11 @@ var Shell = ({ runtime }) => {
   ]);
   switch (layout) {
     case ShellLayout.STATUS:
-      return /* @__PURE__ */ React44.createElement(StatusDialog, null);
+      return /* @__PURE__ */ React42.createElement(StatusDialog, null);
     case ShellLayout.INITIALIZE_IDENTITY:
     case ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION:
     case ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY:
-      return /* @__PURE__ */ React44.createElement(JoinDialog, {
+      return /* @__PURE__ */ React42.createElement(JoinDialog, {
         mode: "halo-only",
         initialDisposition: layout === ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY ? "recover-identity" : layout === ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION ? "accept-halo-invitation" : "default",
         initialInvitationCode: invitationCode,
@@ -4048,7 +3798,7 @@ var Shell = ({ runtime }) => {
     case ShellLayout.IDENTITY:
     case ShellLayout.SHARE_IDENTITY:
     case ShellLayout.EDIT_PROFILE:
-      return /* @__PURE__ */ React44.createElement(IdentityDialog, {
+      return /* @__PURE__ */ React42.createElement(IdentityDialog, {
         createInvitationUrl: createDeviceInvitationUrl,
         onResetStorage: async () => {
           runtime.setLayout({
@@ -4094,7 +3844,7 @@ var Shell = ({ runtime }) => {
         initialDisposition: layout === ShellLayout.SHARE_IDENTITY ? "manage-device-invitation" : "default"
       });
     case ShellLayout.SPACE:
-      return space ? /* @__PURE__ */ React44.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React42.createElement(SpaceDialog, {
         space,
         target,
         createInvitationUrl: createSpaceInvitationUrl,
@@ -4109,7 +3859,7 @@ var Shell = ({ runtime }) => {
         }
       }) : null;
     case ShellLayout.JOIN_SPACE:
-      return /* @__PURE__ */ React44.createElement(JoinDialog, {
+      return /* @__PURE__ */ React42.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
         onDone: async (result) => {
           blurActiveElement();
@@ -4253,7 +4003,7 @@ var os = {
   "sidebar label": "DXOS sidebar",
   "copy invitation code label": "Copy URL",
   "copy success label": "Copied",
-  "copy self public key label": "Copy public key",
+  "copy self did label": "Copy DID",
   "open share panel label": "View QR code",
   "joining space heading": "Joining space",
   "join space heading": "Enter space invitation",
@@ -4361,6 +4111,7 @@ var os = {
   "select emoji label": "Avatar emoji",
   "select hue label": "Avatar background color",
   "resetting message": "One moment while the device is reset\u2026",
+  // TODO(burdon): Factor out.
   "red label": "Red",
   "orange label": "Orange",
   "amber label": "Amber",
@@ -4378,6 +4129,9 @@ var os = {
   "fuchsia label": "Fuchsia",
   "pink label": "Pink",
   "rose label": "Rose",
+  "select a hue label": "Select color",
+  "hue label": "Hue",
+  "icon label": "Icon",
   "current device tag label": "This device",
   "device name placeholder": "{{platform}} on {{os}}",
   "more options label": "More options",
@@ -4416,25 +4170,25 @@ var runShell = async (config = new Config()) => {
     const services = new ClientServicesProxy(createIFramePort({
       channel: DEFAULT_CLIENT_CHANNEL
     }));
-    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React45.createElement(StrictMode, null, /* @__PURE__ */ React45.createElement(ThemeProvider, {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React43.createElement(StrictMode, null, /* @__PURE__ */ React43.createElement(ThemeProvider, {
       tx: defaultTx,
       resourceExtensions: [
         osTranslations
       ]
-    }, /* @__PURE__ */ React45.createElement(ClientProvider, {
+    }, /* @__PURE__ */ React43.createElement(ClientProvider, {
       config,
       services,
       noBanner: true
-    }, /* @__PURE__ */ React45.createElement(Clipboard5.Provider, null, /* @__PURE__ */ React45.createElement(Tooltip6.Provider, null, /* @__PURE__ */ React45.createElement(AgentHostingProvider, null, /* @__PURE__ */ React45.createElement(Shell, {
+    }, /* @__PURE__ */ React43.createElement(Clipboard6.Provider, null, /* @__PURE__ */ React43.createElement(Tooltip4.Provider, null, /* @__PURE__ */ React43.createElement(AgentHostingProvider, null, /* @__PURE__ */ React43.createElement(Shell, {
       runtime
     }))))))));
   } catch {
-    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React45.createElement(StrictMode, null, /* @__PURE__ */ React45.createElement(ThemeProvider, {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React43.createElement(StrictMode, null, /* @__PURE__ */ React43.createElement(ThemeProvider, {
       tx: defaultTx,
       resourceExtensions: [
         osTranslations
       ]
-    }, /* @__PURE__ */ React45.createElement(Fallback, {
+    }, /* @__PURE__ */ React43.createElement(Fallback, {
       onClose: () => runtime.setAppContext({
         display: ShellDisplay2.NONE
       })
@@ -4442,24 +4196,24 @@ var runShell = async (config = new Config()) => {
   }
 };
 var Fallback = ({ onClose }) => {
-  const { t } = useTranslation25("os");
-  return /* @__PURE__ */ React45.createElement(Dialog3.Root, {
+  const { t } = useTranslation23("os");
+  return /* @__PURE__ */ React43.createElement(Dialog3.Root, {
     modal: true,
     open: true,
     onOpenChange: () => onClose?.()
-  }, /* @__PURE__ */ React45.createElement(Dialog3.Overlay, null, /* @__PURE__ */ React45.createElement(Dialog3.Content, null, /* @__PURE__ */ React45.createElement(Dialog3.Title, null, t("shell fallback title")), /* @__PURE__ */ React45.createElement(Dialog3.Close, {
+  }, /* @__PURE__ */ React43.createElement(Dialog3.Overlay, null, /* @__PURE__ */ React43.createElement(Dialog3.Content, null, /* @__PURE__ */ React43.createElement(Dialog3.Title, null, t("shell fallback title")), /* @__PURE__ */ React43.createElement(Dialog3.Close, {
     asChild: true,
     onClick: () => onClose?.()
-  }, /* @__PURE__ */ React45.createElement(Button10, {
+  }, /* @__PURE__ */ React43.createElement(Button8, {
     variant: "primary"
   }, t("close label"))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
-import React46, { createContext, useCallback as useCallback8, useContext, useEffect as useEffect9, useMemo as useMemo6, useState as useState13 } from "react";
+import React44, { createContext, useCallback as useCallback8, useContext, useEffect as useEffect9, useMemo as useMemo6, useState as useState11 } from "react";
 import { useClient as useClient10, ShellDisplay as ShellDisplay3, ShellLayout as ShellLayout4 } from "@dxos/react-client";
 import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
-import { mx as mx24 } from "@dxos/react-ui-theme";
+import { mx as mx23 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/composites/Shell/memory-shell-runtime.ts
 import { Event as Event2 } from "@dxos/async";
@@ -4537,7 +4291,7 @@ var useShell = () => {
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
   const client = useClient10();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState13(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay3.FULLSCREEN : ShellDisplay3.NONE);
+  const [display, setDisplay] = useState11(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay3.FULLSCREEN : ShellDisplay3.NONE);
   const shellRuntime = useMemo6(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
       return;
@@ -4607,11 +4361,11 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
   }, [
     shellRuntime
   ]);
-  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, shellRuntime && /* @__PURE__ */ React46.createElement("div", {
-    className: mx24(display === ShellDisplay3.NONE ? "hidden" : "")
-  }, /* @__PURE__ */ React46.createElement(Shell, {
+  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, shellRuntime && /* @__PURE__ */ React44.createElement("div", {
+    className: mx23(display === ShellDisplay3.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ React44.createElement(Shell, {
     runtime: shellRuntime
-  })), /* @__PURE__ */ React46.createElement(ShellContext.Provider, {
+  })), /* @__PURE__ */ React44.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,
       setDisplay
@@ -4631,11 +4385,7 @@ export {
   ConfirmResetImpl,
   DeviceList,
   Emoji,
-  EmojiPickerBlock,
-  EmojiPickerToolbarButton,
   Heading,
-  HuePickerBlock,
-  HuePickerToolbarButton,
   IdentityDialog,
   IdentityListItem,
   IdentityPanel,