@dxos/shell 0.7.3-main.2dd075e → 0.7.3-staging.0905f03

package/dist/lib/browser/react.mjs

@@ -91,102 +91,10 @@ var AgentConfig = ({ agentStatus, validationMessage, onAgentDestroy, onAgentCrea
   }, t("create agent description")))));
 };
 
-// packages/sdk/shell/src/components/Clipboard/CopyButton.tsx
-import { Check, Copy } from "@phosphor-icons/react";
-import React3, { useState as useState2 } from "react";
-import { Button as Button2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
-
-// packages/sdk/shell/src/components/Clipboard/ClipboardProvider.tsx
-import React2, { createContext, useCallback, useContext, useState } from "react";
-var ClipboardContext = /* @__PURE__ */ createContext({
-  textValue: "",
-  setTextValue: async (_) => {
-  }
-});
-var useClipboardContext = () => useContext(ClipboardContext);
-var ClipboardProvider = ({ children }) => {
-  const [textValue, setInternalTextValue] = useState("");
-  const setTextValue = useCallback(async (nextValue) => {
-    await navigator.clipboard.writeText(nextValue);
-    return setInternalTextValue(nextValue);
-  }, []);
-  return /* @__PURE__ */ React2.createElement(ClipboardContext.Provider, {
-    value: {
-      textValue,
-      setTextValue
-    }
-  }, children);
-};
-
-// packages/sdk/shell/src/components/Clipboard/CopyButton.tsx
-var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
-var CopyButton = ({ value, classNames, iconProps: iconProps2, ...props }) => {
-  const { t } = useTranslation2("os");
-  const { textValue, setTextValue } = useClipboardContext();
-  const isCopied = textValue === value;
-  return /* @__PURE__ */ React3.createElement(Button2, {
-    ...props,
-    classNames: [
-      "inline-flex flex-col justify-center",
-      classNames
-    ],
-    onClick: () => setTextValue(value),
-    "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: mx2("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "pli-1"
-  }, t("copy invitation code label")), /* @__PURE__ */ React3.createElement(Copy, {
-    className: getSize2(5),
-    ...iconProps2
-  })), /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: mx2("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "pli-1"
-  }, t("copy success label")), /* @__PURE__ */ React3.createElement(Check, {
-    className: getSize2(5),
-    ...iconProps2
-  })));
-};
-var CopyButtonIconOnly = ({ value, classNames, iconProps: iconProps2, variant, ...props }) => {
-  const { t } = useTranslation2("os");
-  const { textValue, setTextValue } = useClipboardContext();
-  const isCopied = textValue === value;
-  const label = isCopied ? t("copy success label") : t("copy invitation code label");
-  const [open, setOpen] = useState2(false);
-  return /* @__PURE__ */ React3.createElement(Tooltip2.Root, {
-    delayDuration: 1500,
-    open,
-    onOpenChange: setOpen
-  }, /* @__PURE__ */ React3.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip2.Content, {
-    side: "bottom",
-    sideOffset: 12,
-    classNames: "z-30"
-  }, /* @__PURE__ */ React3.createElement("span", null, label), /* @__PURE__ */ React3.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React3.createElement(Tooltip2.Trigger, {
-    "aria-label": label,
-    ...props,
-    onClick: () => setTextValue(value).then(() => setOpen(true)),
-    "data-testid": "copy-invitation",
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
-    variant,
-    classNames: [
-      "inline-flex flex-col justify-center",
-      classNames
-    ]
-  }, /* @__PURE__ */ React3.createElement(Copy, {
-    className: getSize2(5),
-    ...iconProps2
-  }))));
-};
-
 // packages/sdk/shell/src/components/CompoundButton/CompoundButton.tsx
-import React4 from "react";
+import React2 from "react";
 import { useId, useThemeContext, useElevationContext } from "@dxos/react-ui";
-import { descriptionText as descriptionText2, descriptionTextPrimary, mx as mx3 } from "@dxos/react-ui-theme";
+import { descriptionText as descriptionText2, descriptionTextPrimary, mx as mx2 } from "@dxos/react-ui-theme";
 var CompoundButton = ({ children, description, before, after, variant = "default", elevation: propsElevation, slots = {}, ...buttonProps }) => {
   const labelId = useId("compoundButton-label");
   const descriptionId = useId("compoundButton-description");
@@ -199,7 +107,7 @@ var CompoundButton = ({ children, description, before, after, variant = "default
     textWrap: true
   };
   const buttonClassName = tx("button.root", "button button--compound", styleProps, "flex items-center gap-4 plb-2.5", slots.root?.className);
-  return /* @__PURE__ */ React4.createElement("button", {
+  return /* @__PURE__ */ React2.createElement("button", {
     ...buttonProps,
     ...slots.root,
     className: buttonClassName,
@@ -207,22 +115,22 @@ var CompoundButton = ({ children, description, before, after, variant = "default
     ...description && {
       "aria-describedby": descriptionId
     }
-  }, before && /* @__PURE__ */ React4.createElement("div", {
+  }, before && /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: "grow-0"
-  }, before), /* @__PURE__ */ React4.createElement("div", {
+  }, before), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     ...slots.middle,
-    className: mx3("grow whitespace-normal flex flex-col gap-1 text-left", slots.middle?.className)
-  }, /* @__PURE__ */ React4.createElement("p", {
+    className: mx2("grow whitespace-normal flex flex-col gap-1 text-left", slots.middle?.className)
+  }, /* @__PURE__ */ React2.createElement("p", {
     ...slots.label,
     id: labelId,
-    className: mx3(slots.label?.className)
-  }, children), description && /* @__PURE__ */ React4.createElement("p", {
+    className: mx2(slots.label?.className)
+  }, children), description && /* @__PURE__ */ React2.createElement("p", {
     id: descriptionId,
     ...slots.description,
-    className: mx3("text-xs mbe-1 font-normal", variant === "primary" ? descriptionTextPrimary : descriptionText2, slots.description?.className)
-  }, description)), after && /* @__PURE__ */ React4.createElement("div", {
+    className: mx2("text-xs mbe-1 font-normal", variant === "primary" ? descriptionTextPrimary : descriptionText2, slots.description?.className)
+  }, description)), after && /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: "grow-0"
   }, after));
@@ -233,21 +141,21 @@ 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 React5, { useRef, useState as useState3 } from "react";
-import { Button as Button3, Popover, Toolbar, Tooltip as Tooltip3, useMediaQuery, useThemeContext as useThemeContext2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { getSize as getSize3 } from "@dxos/react-ui-theme";
+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 } = useTranslation3("os");
+  const { t } = useTranslation2("os");
   const { themeMode } = useThemeContext2();
   const [_emojiValue, setEmojiValue] = useControllableState({
     prop: emoji,
     onChange: onChangeEmoji,
     defaultProp: defaultEmoji
   });
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState3(false);
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
   const suppressNextTooltip = useRef(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState3(false);
-  return /* @__PURE__ */ React5.createElement(Tooltip3.Root, {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+  return /* @__PURE__ */ React3.createElement(Tooltip2.Root, {
     open: triggerTooltipOpen,
     onOpenChange: (nextOpen) => {
       if (suppressNextTooltip.current) {
@@ -257,30 +165,30 @@ var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
         setTriggerTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React5.createElement(Popover.Root, {
+  }, /* @__PURE__ */ React3.createElement(Popover.Root, {
     open: emojiPickerOpen,
     onOpenChange: (nextOpen) => {
       setEmojiPickerOpen(nextOpen);
       suppressNextTooltip.current = true;
     }
-  }, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Popover.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Toolbar.Button, {
+  }, /* @__PURE__ */ React3.createElement(Toolbar.Button, {
     classNames: [
       "gap-2 text-2xl plb-1",
       classNames
     ],
     disabled
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, t("select emoji label")), /* @__PURE__ */ React5.createElement(UserCircle, {
-    className: getSize3(5)
-  })))), /* @__PURE__ */ React5.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip3.Content, {
+  }, t("select emoji label")), /* @__PURE__ */ React3.createElement(UserCircle, {
+    className: getSize2(5)
+  })))), /* @__PURE__ */ React3.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip2.Content, {
     side: "bottom",
     classNames: "z-50"
-  }, t("select emoji label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null))), /* @__PURE__ */ React5.createElement(Popover.Content, {
+  }, t("select emoji label"), /* @__PURE__ */ React3.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React3.createElement(Popover.Content, {
     side: "bottom",
     onKeyDownCapture: (event) => {
       if (event.key === "Escape") {
@@ -289,7 +197,7 @@ var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
         suppressNextTooltip.current = true;
       }
     }
-  }, /* @__PURE__ */ React5.createElement(EmojiMart, {
+  }, /* @__PURE__ */ React3.createElement(EmojiMart, {
     data: emojiData,
     onEmojiSelect: ({ native }) => {
       if (native) {
@@ -301,10 +209,10 @@ var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji,
     maxFrequentRows: 0,
     noCountryFlags: true,
     theme: themeMode
-  }), /* @__PURE__ */ React5.createElement(Popover.Arrow, null))));
+  }), /* @__PURE__ */ React3.createElement(Popover.Arrow, null))));
 };
 var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
-  const { t } = useTranslation3("os");
+  const { t } = useTranslation2("os");
   const [isMd] = useMediaQuery("md", {
     ssr: false
   });
@@ -313,23 +221,23 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
     onChange: onChangeEmoji,
     defaultProp: defaultEmoji
   });
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState3(false);
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Popover.Root, {
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Popover.Root, {
     open: emojiPickerOpen,
     onOpenChange: setEmojiPickerOpen
-  }, /* @__PURE__ */ React5.createElement(Popover.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button3, {
+  }, /* @__PURE__ */ React3.createElement(Button2, {
     variant: "ghost",
     classNames: "gap-2 text-2xl plb-1",
     disabled
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, t("select emoji label")), /* @__PURE__ */ React5.createElement("span", {
+  }, t("select emoji label")), /* @__PURE__ */ React3.createElement("span", {
     className: "grow pis-14"
-  }, emojiValue), /* @__PURE__ */ React5.createElement(CaretDown, {
-    className: getSize3(4)
-  }))), /* @__PURE__ */ React5.createElement(Popover.Content, {
+  }, emojiValue), /* @__PURE__ */ React3.createElement(CaretDown, {
+    className: getSize2(4)
+  }))), /* @__PURE__ */ React3.createElement(Popover.Content, {
     side: "right",
     sideOffset: isMd ? 0 : -310,
     onKeyDownCapture: (event) => {
@@ -338,7 +246,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
         setEmojiPickerOpen(false);
       }
     }
-  }, /* @__PURE__ */ React5.createElement(EmojiMart, {
+  }, /* @__PURE__ */ React3.createElement(EmojiMart, {
     data: emojiData,
     onEmojiSelect: ({ native }) => {
       if (native) {
@@ -349,36 +257,36 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
     autoFocus: true,
     maxFrequentRows: 0,
     noCountryFlags: true
-  }), /* @__PURE__ */ React5.createElement(Popover.Arrow, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Root, null, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
+  }), /* @__PURE__ */ React3.createElement(Popover.Arrow, null))), /* @__PURE__ */ React3.createElement(Tooltip2.Root, null, /* @__PURE__ */ React3.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button3, {
+  }, /* @__PURE__ */ React3.createElement(Button2, {
     variant: "ghost",
     onClick: onClickClear,
     disabled
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React5.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip3.Content, {
+  }, t("clear label")), /* @__PURE__ */ React3.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React3.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip2.Content, {
     style: {
       zIndex: 70
     },
     side: "right"
-  }, t("clear label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null)))));
+  }, t("clear label"), /* @__PURE__ */ React3.createElement(Tooltip2.Arrow, null)))));
 };
 
 // packages/sdk/shell/src/components/HuePicker.tsx
-import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check as Check2, Palette } from "@phosphor-icons/react";
+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 React6, { useRef as useRef2, useState as useState4 } from "react";
-import { Button as Button4, DropdownMenu, Toolbar as Toolbar2, Tooltip as Tooltip4, useThemeContext as useThemeContext3, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { getSize as getSize4, hueTokenThemes, mx as mx4 } from "@dxos/react-ui-theme";
+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__ */ React6.createElement("svg", {
+  return /* @__PURE__ */ React4.createElement("svg", {
     width: size,
     height: size,
     viewBox: `0 0 ${size} ${size}`
-  }, /* @__PURE__ */ React6.createElement("rect", {
+  }, /* @__PURE__ */ React4.createElement("rect", {
     x: 0,
     y: 0,
     width: size,
@@ -390,16 +298,16 @@ var HuePreview = ({ hue }) => {
 };
 var hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
 var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
-  const { t } = useTranslation4("os");
+  const { t } = useTranslation3("os");
   const [hueValue, setHueValue] = useControllableState2({
     prop: hue,
     onChange: onChangeHue,
     defaultProp: defaultHue
   });
-  const [huePickerOpen, setHuePickerOpen] = useState4(false);
+  const [huePickerOpen, setHuePickerOpen] = useState2(false);
   const suppressNextTooltip = useRef2(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
-  return /* @__PURE__ */ React6.createElement(Tooltip4.Root, {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
+  return /* @__PURE__ */ React4.createElement(Tooltip3.Root, {
     open: triggerTooltipOpen,
     onOpenChange: (nextOpen) => {
       if (suppressNextTooltip.current) {
@@ -409,178 +317,178 @@ var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultH
         setTriggerTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
     modal: false,
     open: huePickerOpen,
     onOpenChange: (nextOpen) => {
       setHuePickerOpen(nextOpen);
       suppressNextTooltip.current = true;
     }
-  }, /* @__PURE__ */ React6.createElement(Tooltip4.Trigger, {
+  }, /* @__PURE__ */ React4.createElement(Tooltip3.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React6.createElement(Toolbar2.Button, {
-    classNames: mx4("gap-2 plb-1", classNames),
+  }, /* @__PURE__ */ React4.createElement(Toolbar2.Button, {
+    classNames: mx3("gap-2 plb-1", classNames),
     disabled
-  }, /* @__PURE__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "sr-only"
-  }, t("select hue label")), /* @__PURE__ */ React6.createElement(Palette, {
-    className: getSize4(5)
-  })))), /* @__PURE__ */ React6.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip4.Content, {
+  }, t("select hue label")), /* @__PURE__ */ React4.createElement(Palette, {
+    className: getSize3(5)
+  })))), /* @__PURE__ */ React4.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip3.Content, {
     side: "bottom",
     classNames: "z-50"
-  }, t("select hue label"), /* @__PURE__ */ React6.createElement(Tooltip4.Arrow, null))), /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
+  }, t("select hue label"), /* @__PURE__ */ React4.createElement(Tooltip3.Arrow, null))), /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
     side: "bottom",
     classNames: "!w-40"
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, {
     classNames: "grid grid-cols-4"
   }, hueTokens.map((hue2) => {
-    return /* @__PURE__ */ React6.createElement(DropdownMenu.CheckboxItem, {
+    return /* @__PURE__ */ React4.createElement(DropdownMenu.CheckboxItem, {
       key: hue2,
       checked: hue2 === hueValue,
       onCheckedChange: () => setHueValue(hue2),
       classNames: "px-0 py-2 items-center justify-center"
-    }, /* @__PURE__ */ React6.createElement(HuePreview, {
+    }, /* @__PURE__ */ React4.createElement(HuePreview, {
       hue: hue2
     }));
   })))));
 };
 var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
-  const { t } = useTranslation4("os");
+  const { t } = useTranslation3("os");
   const [hueValue, setHueValue] = useControllableState2({
     prop: hue,
     onChange: onChangeHue,
     defaultProp: defaultHue
   });
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
     modal: false
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React6.createElement(Button4, {
+  }, /* @__PURE__ */ React4.createElement(Button3, {
     variant: "ghost",
     classNames: "gap-2 plb-1",
     disabled
-  }, /* @__PURE__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "sr-only"
-  }, t("select hue label")), /* @__PURE__ */ React6.createElement("div", {
+  }, t("select hue label")), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "pis-14 grow flex items-center justify-center gap-2"
-  }, /* @__PURE__ */ React6.createElement(HuePreview, {
+  }, /* @__PURE__ */ React4.createElement(HuePreview, {
     hue: hueValue
-  }), /* @__PURE__ */ React6.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React6.createElement(CaretDown2, {
-    className: getSize4(4)
-  }))), /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
+  }), /* @__PURE__ */ React4.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React4.createElement(CaretDown2, {
+    className: getSize3(4)
+  }))), /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
     side: "right"
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
-    return /* @__PURE__ */ React6.createElement(DropdownMenu.CheckboxItem, {
+  }, /* @__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__ */ React6.createElement(HuePreview, {
+    }, /* @__PURE__ */ React4.createElement(HuePreview, {
       hue: hue2
-    }), /* @__PURE__ */ React6.createElement("span", {
+    }), /* @__PURE__ */ React4.createElement("span", {
       className: "grow"
-    }, t(`${hue2} label`)), /* @__PURE__ */ React6.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React6.createElement(Check2, null)));
-  })), /* @__PURE__ */ React6.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React6.createElement(Tooltip4.Root, null, /* @__PURE__ */ React6.createElement(Tooltip4.Trigger, {
+    }, 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__ */ React6.createElement(Button4, {
+  }, /* @__PURE__ */ React4.createElement(Button3, {
     variant: "ghost",
     onClick: onClickClear,
     disabled
-  }, /* @__PURE__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React6.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React6.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip4.Content, {
+  }, t("clear label")), /* @__PURE__ */ React4.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React4.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip3.Content, {
     style: {
       zIndex: 70
     },
     side: "right"
-  }, t("clear label"), /* @__PURE__ */ React6.createElement(Tooltip4.Arrow, null)))));
+  }, t("clear label"), /* @__PURE__ */ React4.createElement(Tooltip3.Arrow, null)))));
 };
 
 // packages/sdk/shell/src/components/IdentityList/IdentityListItem.tsx
-import React7, { forwardRef } from "react";
+import React5, { 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 mx5 } from "@dxos/react-ui-theme";
+import { mx as mx4 } 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__ */ React7.createElement(ListItem.Root, {
+  return /* @__PURE__ */ React5.createElement(ListItem.Root, {
     ...props,
-    classNames: mx5("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
+    classNames: mx4("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
     onClick: () => onClick?.(),
     "data-testid": "identity-list-item",
     labelId,
     ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(Avatar2.Root, {
+  }, /* @__PURE__ */ React5.createElement(Avatar2.Root, {
     status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
     labelId,
     hue: identity.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React7.createElement(Avatar2.Frame, {
+  }, /* @__PURE__ */ React5.createElement(Avatar2.Frame, {
     classNames: "place-self-center"
-  }, /* @__PURE__ */ React7.createElement(Avatar2.Fallback, {
+  }, /* @__PURE__ */ React5.createElement(Avatar2.Fallback, {
     text: identity.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React7.createElement(Avatar2.Label, {
+  })), /* @__PURE__ */ React5.createElement(Avatar2.Label, {
     classNames: "text-sm truncate pli-2"
   }, displayName)));
 });
 
 // packages/sdk/shell/src/components/IdentityList/SpaceMemberList.tsx
-import React8, { useMemo } from "react";
+import React6, { useMemo } from "react";
 import { useClient } from "@dxos/react-client";
 import { useMembers } from "@dxos/react-client/echo";
-import { useTranslation as useTranslation5, List } from "@dxos/react-ui";
-import { descriptionText as descriptionText3, mx as mx6 } from "@dxos/react-ui-theme";
+import { useTranslation as useTranslation4, List } from "@dxos/react-ui";
+import { descriptionText as descriptionText3, mx as mx5 } from "@dxos/react-ui-theme";
 var SpaceMemberList = ({ spaceKey, includeSelf, onSelect }) => {
   const client = useClient();
   const allUnsortedMembers = useMembers(spaceKey);
   const members = useMemo(() => includeSelf ? allUnsortedMembers.sort((member) => member.identity.identityKey.equals(client.halo.identity.get().identityKey) ? -1 : 1) : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity.get().identityKey)), [
     allUnsortedMembers
   ]);
-  return /* @__PURE__ */ React8.createElement(SpaceMemberListImpl, {
+  return /* @__PURE__ */ React6.createElement(SpaceMemberListImpl, {
     members,
     onSelect
   });
 };
 var SpaceMemberListImpl = ({ members, onSelect }) => {
-  const { t } = useTranslation5("os");
+  const { t } = useTranslation4("os");
   const visibleMembers = members.filter((member) => member.identity);
-  return visibleMembers.length > 0 ? /* @__PURE__ */ React8.createElement(List, {
+  return visibleMembers.length > 0 ? /* @__PURE__ */ React6.createElement(List, {
     classNames: "flex flex-col gap-2",
     "data-testid": "space-members-list"
   }, visibleMembers.map((member) => {
-    return /* @__PURE__ */ React8.createElement(IdentityListItem, {
+    return /* @__PURE__ */ React6.createElement(IdentityListItem, {
       key: member.identity.identityKey.toHex(),
       identity: member.identity,
       presence: member.presence,
       onClick: onSelect && (() => onSelect(member))
     });
-  })) : /* @__PURE__ */ React8.createElement("div", {
+  })) : /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "grow flex items-center p-2"
-  }, /* @__PURE__ */ React8.createElement("p", {
-    className: mx6(descriptionText3, "text-center is-full mlb-2")
+  }, /* @__PURE__ */ React6.createElement("p", {
+    className: mx5(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 React10 from "react";
-import { Button as Button6, List as List2, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { descriptionText as descriptionText4, getSize as getSize6, mx as mx7 } from "@dxos/react-ui-theme";
+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";
 
 // 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 React9, { forwardRef as forwardRef2 } from "react";
+import React7, { 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 useTranslation6, DropdownMenu as DropdownMenu2, Button as Button5 } from "@dxos/react-ui";
-import { getSize as getSize5 } from "@dxos/react-ui-theme";
+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 { keyToFallback as keyToFallback2 } from "@dxos/util";
 var iconProps = {
   weight: "duotone",
@@ -590,7 +498,7 @@ var iconProps = {
   y: 8
 };
 var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, classNames, connectionState, onAgentDestroy: _, ...props }, forwardedRef) => {
-  const { t } = useTranslation6("os");
+  const { t } = useTranslation5("os");
   const fallbackValue = keyToFallback2(device.deviceKey);
   const labelId = useId3("identityListItem__label");
   const displayName = device.profile ? t("device name placeholder", {
@@ -598,7 +506,7 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     platform: device.profile.platform
   }) : generateName2(device.deviceKey.toHex());
   const isCurrent = device.kind === DeviceKind.CURRENT;
-  return /* @__PURE__ */ React9.createElement(ListItem2.Root, {
+  return /* @__PURE__ */ React7.createElement(ListItem2.Root, {
     ...props,
     classNames: [
       "flex gap-2 items-center mlb-2",
@@ -607,60 +515,60 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     "data-testid": `device-list-item${isCurrent ? "-current" : ""}`,
     labelId,
     ref: forwardedRef
-  }, /* @__PURE__ */ React9.createElement(Avatar3.Root, {
+  }, /* @__PURE__ */ React7.createElement(Avatar3.Root, {
     status: isCurrent && connectionState === ConnectionState.OFFLINE ? "error" : device.presence === Device.PresenceState.ONLINE ? "active" : "inactive",
     labelId,
     hue: fallbackValue.hue,
     variant: "square"
-  }, /* @__PURE__ */ React9.createElement(Avatar3.Frame, {
+  }, /* @__PURE__ */ React7.createElement(Avatar3.Frame, {
     classNames: "place-self-center"
-  }, device.profile?.type ? device.profile.type === DeviceType.AGENT_MANAGED ? /* @__PURE__ */ React9.createElement(Database2, iconProps) : device.profile.type === DeviceType.BROWSER ? /* @__PURE__ */ React9.createElement(Compass, iconProps) : device.profile.type === DeviceType.NATIVE ? /* @__PURE__ */ React9.createElement(Desktop, iconProps) : [
+  }, 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) : [
     DeviceType.AGENT,
     DeviceType.AGENT_MANAGED
-  ].includes(device.profile.type) ? /* @__PURE__ */ React9.createElement(Robot, iconProps) : device.profile.type === DeviceType.MOBILE ? /* @__PURE__ */ React9.createElement(DeviceMobile, iconProps) : /* @__PURE__ */ React9.createElement(Devices, iconProps) : /* @__PURE__ */ React9.createElement(Avatar3.Fallback, {
+  ].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, {
     text: fallbackValue.emoji
-  })), /* @__PURE__ */ React9.createElement(Avatar3.Label, {
+  })), /* @__PURE__ */ React7.createElement(Avatar3.Label, {
     classNames: "flex-1 text-sm truncate"
-  }, displayName), isCurrent && /* @__PURE__ */ React9.createElement(Tag, {
+  }, displayName), isCurrent && /* @__PURE__ */ React7.createElement(Tag, {
     color: "primary"
-  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React9.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Trigger, {
+  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React9.createElement(Button5, {
+  }, /* @__PURE__ */ React7.createElement(Button4, {
     variant: "ghost",
     classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
     "data-testid": `device-list-item${isCurrent ? "-current" : ""}.options`
-  }, /* @__PURE__ */ React9.createElement("span", {
+  }, /* @__PURE__ */ React7.createElement("span", {
     className: "sr-only"
-  }, t("more options label")), /* @__PURE__ */ React9.createElement(DotsThree, {
-    className: getSize5(5)
-  }))), /* @__PURE__ */ React9.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Viewport, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
+  }, 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, {
     "data-testid": "device-list-item-current.join-existing",
     onClick: onClickJoinExisting
-  }, /* @__PURE__ */ React9.createElement(ShareFat, {
-    className: getSize5(5)
-  }), t("choose join new identity label")), onClickRecover && /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
+  }, /* @__PURE__ */ React7.createElement(ShareFat, {
+    className: getSize4(5)
+  }), t("choose join new identity label")), onClickRecover && /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
     "data-testid": "device-list-item-current.recover",
     onClick: onClickRecover
-  }, /* @__PURE__ */ React9.createElement(FirstAidKit, {
-    className: getSize5(5)
-  }), t("choose recover identity label")), /* @__PURE__ */ React9.createElement(DropdownMenu2.Item, {
+  }, /* @__PURE__ */ React7.createElement(FirstAidKit, {
+    className: getSize4(5)
+  }), t("choose recover identity label")), /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
     "data-testid": "device-list-item-current.reset",
     onClick: onClickReset
-  }, /* @__PURE__ */ React9.createElement(Power2, {
-    className: getSize5(5)
+  }, /* @__PURE__ */ React7.createElement(Power2, {
+    className: getSize4(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 } = useTranslation7("os");
-  return /* @__PURE__ */ React10.createElement("div", {
+  const { t } = useTranslation6("os");
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "p-1"
-  }, /* @__PURE__ */ React10.createElement("h2", {
-    className: mx7(descriptionText4, "text-center mbs-2")
-  }, t("devices heading")), devices.length > 0 && /* @__PURE__ */ React10.createElement(List2, null, devices.map((device) => {
-    return /* @__PURE__ */ React10.createElement(DeviceListItem, {
+  }, /* @__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, {
       key: device.deviceKey.toHex(),
       device,
       onClickEdit: () => onClickEdit?.(device),
@@ -670,37 +578,37 @@ var DeviceList = ({ devices, connectionState, onClickAdd, onClickEdit, onClickRe
       connectionState,
       onAgentDestroy
     });
-  })), /* @__PURE__ */ React10.createElement(Button6, {
+  })), /* @__PURE__ */ React8.createElement(Button5, {
     variant: "ghost",
     classNames: "justify-start gap-2 !pis-0 !pie-3 is-full",
     "data-testid": "devices-panel.create-invitation",
     onClick: onClickAdd
-  }, /* @__PURE__ */ React10.createElement("div", {
+  }, /* @__PURE__ */ React8.createElement("div", {
     role: "img",
-    className: mx7(getSize6(8), "m-1 rounded-sm bg-input grid place-items-center")
-  }, /* @__PURE__ */ React10.createElement(Plus2, {
+    className: mx6(getSize5(8), "m-1 rounded-sm bg-input grid place-items-center")
+  }, /* @__PURE__ */ React8.createElement(Plus2, {
     weight: "light",
-    className: getSize6(6)
-  })), /* @__PURE__ */ React10.createElement("span", {
+    className: getSize5(6)
+  })), /* @__PURE__ */ React8.createElement("span", {
     className: "grow font-medium text-start"
-  }, t("choose add device label")), /* @__PURE__ */ React10.createElement(CaretRight, {
+  }, t("choose add device label")), /* @__PURE__ */ React8.createElement(CaretRight, {
     weight: "bold",
-    className: getSize6(4)
+    className: getSize5(4)
   })));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 import { X } from "@phosphor-icons/react";
 import { formatDistanceToNow } from "date-fns";
-import React12, { useCallback as useCallback2 } from "react";
+import React10, { useCallback } from "react";
 import { Invitation, useInvitationStatus } from "@dxos/react-client/invitations";
-import { Button as Button7, ListItem as ListItem3, useTranslation as useTranslation8, Avatar as Avatar4, useThemeContext as useThemeContext4, Tooltip as Tooltip5 } from "@dxos/react-ui";
-import { focusRing, getSize as getSize7, mx as mx9 } from "@dxos/react-ui-theme";
+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 { hexToEmoji } from "@dxos/util";
 
 // packages/sdk/shell/src/components/AuthCode.tsx
-import React11, { useRef as useRef3 } from "react";
-import { mx as mx8 } from "@dxos/react-ui-theme";
+import React9, { useRef as useRef3 } from "react";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 var AuthCode = (props) => {
   const { code, large, classNames } = props;
   const l = code?.length ?? 0;
@@ -717,20 +625,20 @@ var AuthCode = (props) => {
     }
     void navigator.clipboard.writeText(code ?? "");
   };
-  return /* @__PURE__ */ React11.createElement("span", {
-    className: mx8(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 rounded cursor-pointer", classNames),
+  return /* @__PURE__ */ React9.createElement("span", {
+    className: mx7(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 rounded cursor-pointer", classNames),
     onClick: handleClick,
     ref: codeRef
-  }, /* @__PURE__ */ React11.createElement("span", {
+  }, /* @__PURE__ */ React9.createElement("span", {
     className: "mie-[0.4em]"
-  }, left), /* @__PURE__ */ React11.createElement("span", null, right));
+  }, left), /* @__PURE__ */ React9.createElement("span", null, right));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListItem.tsx
 var InvitationListItem = (props) => {
   const { invitation } = props;
   const invitationStatus = useInvitationStatus(invitation);
-  return /* @__PURE__ */ React12.createElement(InvitationListItemImpl, {
+  return /* @__PURE__ */ React10.createElement(InvitationListItemImpl, {
     ...props,
     invitationStatus
   });
@@ -741,10 +649,10 @@ var avatarProps = {
 };
 var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   const { tx } = useThemeContext4();
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("span", {
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", {
     role: "none",
-    className: mx9("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize7(avatarProps.size))
-  }, /* @__PURE__ */ React12.createElement("span", {
+    className: mx8("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize6(avatarProps.size))
+  }, /* @__PURE__ */ React10.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -754,10 +662,10 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
     style: {
       animationDelay: "400ms"
     }
-  })), /* @__PURE__ */ React12.createElement("span", {
+  })), /* @__PURE__ */ React10.createElement("span", {
     role: "none",
-    className: mx9("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize7(avatarProps.size))
-  }, /* @__PURE__ */ React12.createElement("span", {
+    className: mx8("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize6(avatarProps.size))
+  }, /* @__PURE__ */ React10.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       ...avatarProps,
@@ -770,7 +678,7 @@ var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   })));
 };
 var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
-  const { t } = useTranslation8("os");
+  const { t } = useTranslation7("os");
   const { cancel, status: invitationStatus, invitationCode, authCode, multiUse, shareable } = propsInvitationStatus;
   const isCancellable = !([
     Invitation.State.ERROR,
@@ -783,7 +691,7 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     Invitation.State.CONNECTED
   ].indexOf(invitationStatus) >= 0);
   const showAuthCode = invitationStatus === Invitation.State.READY_FOR_AUTHENTICATION;
-  const handleClickRemove = useCallback2(() => onClickRemove?.(invitation), [
+  const handleClickRemove = useCallback(() => onClickRemove?.(invitation), [
     invitation,
     onClickRemove
   ]);
@@ -812,39 +720,39 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     Invitation.State.SUCCESS
   ].includes(invitationStatus);
   const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
-  return /* @__PURE__ */ React12.createElement(ListItem3.Root, {
+  return /* @__PURE__ */ React10.createElement(ListItem3.Root, {
     id: invitationCode,
     ...props,
     classNames: [
       "flex gap-2 pis-3 pie-1 items-center relative",
       props.classNames
     ]
-  }, /* @__PURE__ */ React12.createElement(ListItem3.Heading, {
+  }, /* @__PURE__ */ React10.createElement(ListItem3.Heading, {
     classNames: "sr-only"
-  }, t(multiUse ? "invite many list item label" : "invite one list item label")), multiUse && /* @__PURE__ */ React12.createElement(AvatarStackEffect, {
+  }, t(multiUse ? "invite many list item label" : "invite one list item label")), multiUse && /* @__PURE__ */ React10.createElement(AvatarStackEffect, {
     status: avatarStatus,
     animation: avatarAnimation,
     reverseEffects
-  }), /* @__PURE__ */ React12.createElement(Tooltip5.Root, null, /* @__PURE__ */ React12.createElement(Avatar4.Root, {
+  }), /* @__PURE__ */ React10.createElement(Tooltip4.Root, null, /* @__PURE__ */ React10.createElement(Avatar4.Root, {
     ...avatarProps,
     animation: avatarAnimation,
     status: avatarStatus
-  }, /* @__PURE__ */ React12.createElement(Tooltip5.Trigger, {
+  }, /* @__PURE__ */ React10.createElement(Tooltip4.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(Avatar4.Frame, {
+  }, /* @__PURE__ */ React10.createElement(Avatar4.Frame, {
     tabIndex: 0,
     classNames: [
       focusRing,
       "relative rounded-full place-self-center"
     ]
-  }, /* @__PURE__ */ React12.createElement(Avatar4.Fallback, {
+  }, /* @__PURE__ */ React10.createElement(Avatar4.Fallback, {
     text: hexToEmoji(invitationId)
-  })))), /* @__PURE__ */ React12.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip5.Content, {
+  })))), /* @__PURE__ */ React10.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip4.Content, {
     side: "left",
     classNames: "z-[70]"
-  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React12.createElement(Tooltip5.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React12.createElement(Tooltip5.Root, null, /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Tooltip5.Trigger, {
+  }, 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, {
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(Button7, {
+  }, /* @__PURE__ */ React10.createElement(Button6, {
     variant: "ghost",
     classNames: "grow justify-start font-medium",
     onClick: () => send({
@@ -852,65 +760,65 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
       invitation
     }),
     "data-testid": "show-qrcode"
-  }, /* @__PURE__ */ React12.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React12.createElement(CopyButtonIconOnly, {
+  }, /* @__PURE__ */ React10.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React10.createElement(Clipboard.IconButton, {
     variant: "ghost",
     value: invitationUrl
-  })), /* @__PURE__ */ React12.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip5.Content, {
+  })), /* @__PURE__ */ React10.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip4.Content, {
     side: "left",
     classNames: "z-[70]"
-  }, invitationHasLifetime && /* @__PURE__ */ React12.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React12.createElement(AuthCode, {
+  }, invitationHasLifetime && /* @__PURE__ */ React10.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React10.createElement(AuthCode, {
     code: authCode,
     classNames: "grow"
-  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React12.createElement("span", {
+  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React12.createElement("span", {
+  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React12.createElement("span", {
+  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React12.createElement("span", {
+  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React12.createElement("span", {
+  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow truncate"
-  }, "User joined") : !shareable ? /* @__PURE__ */ React12.createElement("span", {
+  }, "User joined") : !shareable ? /* @__PURE__ */ React10.createElement("span", {
     className: "pli-2 grow text-neutral-500"
-  }, "Pending Invitation") : /* @__PURE__ */ React12.createElement("span", {
+  }, "Pending Invitation") : /* @__PURE__ */ React10.createElement("span", {
     className: "grow"
-  }, " "), isCancellable ? /* @__PURE__ */ React12.createElement(Button7, {
+  }, " "), isCancellable ? /* @__PURE__ */ React10.createElement(Button6, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: cancel,
     "data-testid": "cancel-invitation"
-  }, /* @__PURE__ */ React12.createElement("span", {
+  }, /* @__PURE__ */ React10.createElement("span", {
     className: "sr-only"
-  }, t("cancel invitation label")), /* @__PURE__ */ React12.createElement(X, {
-    className: getSize7(4)
-  })) : /* @__PURE__ */ React12.createElement(Button7, {
+  }, t("cancel invitation label")), /* @__PURE__ */ React10.createElement(X, {
+    className: getSize6(4)
+  })) : /* @__PURE__ */ React10.createElement(Button6, {
     variant: "ghost",
     classNames: "flex gap-1 pli-0",
     onClick: handleClickRemove,
     "data-testid": "remove-invitation"
-  }, /* @__PURE__ */ React12.createElement("span", {
+  }, /* @__PURE__ */ React10.createElement("span", {
     className: "sr-only"
-  }, t("remove invitation label")), /* @__PURE__ */ React12.createElement(X, {
-    className: getSize7(4)
+  }, t("remove invitation label")), /* @__PURE__ */ React10.createElement(X, {
+    className: getSize6(4)
   })));
 };
 
 // packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
-import React14, { useCallback as useCallback3 } from "react";
+import React12, { useCallback as useCallback2 } from "react";
 import { useSpace, useSpaceInvitations } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/components/InvitationList/InvitationList.tsx
-import React13 from "react";
+import React11 from "react";
 import { List as List3 } from "@dxos/react-ui";
-import { mx as mx10 } from "@dxos/react-ui-theme";
+import { mx as mx9 } from "@dxos/react-ui-theme";
 var InvitationList = ({ invitations, send, ...invitationProps }) => {
   const { className, InvitationListItem: Item = InvitationListItem } = invitationProps;
-  return /* @__PURE__ */ React13.createElement(List3, {
-    classNames: mx10("flex flex-col gap-2", className)
+  return /* @__PURE__ */ React11.createElement(List3, {
+    classNames: mx9("flex flex-col gap-2", className)
   }, invitations.map((invitation) => {
     const value = invitation.get().invitationId;
-    return /* @__PURE__ */ React13.createElement(Item, {
+    return /* @__PURE__ */ React11.createElement(Item, {
       key: value,
       send,
       invitation,
@@ -923,12 +831,12 @@ var InvitationList = ({ invitations, send, ...invitationProps }) => {
 var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
   const space = useSpace(spaceKey);
   const invitations = useSpaceInvitations(spaceKey);
-  const handleClickRemove = useCallback3((invitation) => {
+  const handleClickRemove = useCallback2((invitation) => {
     void invitation.cancel();
   }, [
     space
   ]);
-  return /* @__PURE__ */ React14.createElement(InvitationList, {
+  return /* @__PURE__ */ React12.createElement(InvitationList, {
     invitations,
     onClickRemove: handleClickRemove,
     createInvitationUrl,
@@ -937,11 +845,11 @@ var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
 };
 
 // packages/sdk/shell/src/components/Panel/Action.tsx
-import { CaretDown as CaretDown3, Check as Check3, Placeholder } from "@phosphor-icons/react";
+import { CaretDown as CaretDown3, Check as Check2, Placeholder } from "@phosphor-icons/react";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React15, { forwardRef as forwardRef3 } from "react";
-import { Button as Button8, DropdownMenu as DropdownMenu3, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { descriptionText as descriptionText5, getSize as getSize8, mx as mx11 } from "@dxos/react-ui-theme";
+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";
 var defaultActions = {
   noopAction: {
     label: "No-op",
@@ -960,11 +868,11 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
     defaultProp: defaultActiveAction
   });
   const activeAction = actions[activeActionKey2] ?? {};
-  const { t } = useTranslation9("os");
-  return /* @__PURE__ */ React15.createElement("div", {
+  const { t } = useTranslation8("os");
+  return /* @__PURE__ */ React13.createElement("div", {
     role: "none",
-    className: mx11("mbs-2 flex gap-px items-center", isFull && "is-full")
-  }, /* @__PURE__ */ React15.createElement(Button8, {
+    className: mx10("mbs-2 flex gap-px items-center", isFull && "is-full")
+  }, /* @__PURE__ */ React13.createElement(Button7, {
     ...rest,
     classNames: [
       "bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none",
@@ -974,22 +882,22 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
     variant,
     "data-testid": testId,
     onClick: activeAction.onClick
-  }, activeAction.icon && /* @__PURE__ */ React15.createElement(activeAction.icon, {
-    className: getSize8(5)
-  }), /* @__PURE__ */ React15.createElement("span", null, activeAction.label)), /* @__PURE__ */ React15.createElement(DropdownMenu3.Root, null, /* @__PURE__ */ React15.createElement(DropdownMenu3.Trigger, {
+  }, 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, {
     asChild: true
-  }, /* @__PURE__ */ React15.createElement(Button8, {
+  }, /* @__PURE__ */ React13.createElement(Button7, {
     classNames: [
       "bs-11 flex-none rounded-is-none",
       classNames
     ],
     "data-testid": dropdownTestId
-  }, /* @__PURE__ */ React15.createElement("span", {
+  }, /* @__PURE__ */ React13.createElement("span", {
     className: "sr-only"
-  }, t("invite options label")), /* @__PURE__ */ React15.createElement(CaretDown3, {
-    className: getSize8(4)
-  }))), /* @__PURE__ */ React15.createElement(DropdownMenu3.Portal, null, /* @__PURE__ */ React15.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React15.createElement(DropdownMenu3.Viewport, null, Object.entries(actions).map(([id, action]) => {
-    return /* @__PURE__ */ React15.createElement(DropdownMenu3.CheckboxItem, {
+  }, 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, {
       key: id,
       "aria-labelledby": `${id}__label`,
       "aria-describedby": `${id}__description`,
@@ -997,27 +905,27 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
       onCheckedChange: (checked) => checked && setActiveAction(id),
       classNames: "gap-2",
       "data-testid": action.testId
-    }, action.icon && /* @__PURE__ */ React15.createElement(action.icon, {
-      className: getSize8(5)
-    }), /* @__PURE__ */ React15.createElement("div", {
+    }, action.icon && /* @__PURE__ */ React13.createElement(action.icon, {
+      className: getSize7(5)
+    }), /* @__PURE__ */ React13.createElement("div", {
       role: "none",
       className: "flex-1 min-is-0 space-b-1"
-    }, /* @__PURE__ */ React15.createElement("p", {
+    }, /* @__PURE__ */ React13.createElement("p", {
       id: `${id}__label`
-    }, action.label), action.description && /* @__PURE__ */ React15.createElement("p", {
+    }, action.label), action.description && /* @__PURE__ */ React13.createElement("p", {
       id: `${id}__description`,
       className: descriptionText5
-    }, action.description)), /* @__PURE__ */ React15.createElement(DropdownMenu3.ItemIndicator, {
+    }, action.description)), /* @__PURE__ */ React13.createElement(DropdownMenu3.ItemIndicator, {
       asChild: true
-    }, /* @__PURE__ */ React15.createElement(Check3, {
+    }, /* @__PURE__ */ React13.createElement(Check2, {
       weight: "bold",
-      className: getSize8(4)
+      className: getSize7(4)
     })));
-  })), /* @__PURE__ */ React15.createElement(DropdownMenu3.Arrow, null)))));
+  })), /* @__PURE__ */ React13.createElement(DropdownMenu3.Arrow, null)))));
 });
 var Action = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
   const { children, classNames, variant, isFull = true, ...rest } = props;
-  return /* @__PURE__ */ React15.createElement(Button8, {
+  return /* @__PURE__ */ React13.createElement(Button7, {
     ...rest,
     classNames: [
       isFull && "is-full",
@@ -1030,49 +938,49 @@ var Action = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
 });
 
 // packages/sdk/shell/src/components/Panel/Actions.tsx
-import React16, { forwardRef as forwardRef4 } from "react";
-import { mx as mx12 } from "@dxos/react-ui-theme";
+import React14, { forwardRef as forwardRef4 } from "react";
+import { mx as mx11 } from "@dxos/react-ui-theme";
 var Actions = /* @__PURE__ */ forwardRef4(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React14.createElement("div", {
     ...props,
-    className: mx12("flex flex-col gap-2 mbs-2", Array.isArray(children) && children.length > 1 ? "justify-between" : "justify-center", classNames),
+    className: mx11("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 React17 from "react";
-import { Button as Button9, useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { getSize as getSize9, mx as mx13 } from "@dxos/react-ui-theme";
+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";
 var CloseButton = ({ onDone, ...props }) => {
-  const { t } = useTranslation10("os");
-  return /* @__PURE__ */ React17.createElement(Button9, {
+  const { t } = useTranslation9("os");
+  return /* @__PURE__ */ React15.createElement(Button8, {
     variant: "ghost",
-    classNames: mx13("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    classNames: mx12("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     onClick: () => onDone?.(),
     ...props
-  }, /* @__PURE__ */ React17.createElement(X2, {
+  }, /* @__PURE__ */ React15.createElement(X2, {
     weight: "bold",
-    className: getSize9(4)
-  }), /* @__PURE__ */ React17.createElement("span", {
+    className: getSize8(4)
+  }), /* @__PURE__ */ React15.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
 };
 
 // packages/sdk/shell/src/components/Panel/Emoji.tsx
-import React18 from "react";
-import { mx as mx14, getSize as getSize10 } from "@dxos/react-ui-theme";
+import React16 from "react";
+import { mx as mx13, getSize as getSize9 } from "@dxos/react-ui-theme";
 var Emoji = ({ text, className }) => {
   const size = 14;
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     role: "none",
-    className: mx14(getSize10(size), "rounded relative pointer-events-none", className)
-  }, /* @__PURE__ */ React18.createElement("svg", {
+    className: mx13(getSize9(size), "rounded relative pointer-events-none", className)
+  }, /* @__PURE__ */ React16.createElement("svg", {
     viewBox: `0 0 ${size * 4} ${size * 4}`,
     width: size * 4,
     height: size * 4
-  }, /* @__PURE__ */ React18.createElement("text", {
+  }, /* @__PURE__ */ React16.createElement("text", {
     x: "50%",
     y: "50%",
     textAnchor: "middle",
@@ -1083,57 +991,57 @@ var Emoji = ({ text, className }) => {
 };
 var Centered = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     role: "none",
     className: "absolute inset-0 flex items-center justify-center"
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Heading.tsx
-import React19, { forwardRef as forwardRef5 } from "react";
-import { descriptionText as descriptionText6, mx as mx15 } from "@dxos/react-ui-theme";
+import React17, { forwardRef as forwardRef5 } from "react";
+import { descriptionText as descriptionText6, mx as mx14 } from "@dxos/react-ui-theme";
 var Heading = /* @__PURE__ */ forwardRef5(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     role: "none",
     className: "pbe-2 relative",
     ref: forwardedRef
-  }, corner, /* @__PURE__ */ React19.createElement("h1", {
+  }, corner, /* @__PURE__ */ React17.createElement("h1", {
     ...!titleSrOnly && {
       id: titleId
     },
-    className: mx15(descriptionText6, "text-center mlb-2", titleSrOnly && "invisible")
-  }, title), titleSrOnly && /* @__PURE__ */ React19.createElement("span", {
+    className: mx14(descriptionText6, "text-center mlb-2", titleSrOnly && "invisible")
+  }, title), titleSrOnly && /* @__PURE__ */ React17.createElement("span", {
     id: titleId
   }, title), children);
 });
 
 // packages/sdk/shell/src/components/Panel/Label.tsx
-import React20 from "react";
-import { descriptionText as descriptionText7, mx as mx16 } from "@dxos/react-ui-theme";
+import React18 from "react";
+import { descriptionText as descriptionText7, mx as mx15 } from "@dxos/react-ui-theme";
 var Label = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React20.createElement("span", {
-    className: mx16(descriptionText7, "text-center mli-6 whitespace-normal")
+  return /* @__PURE__ */ React18.createElement("span", {
+    className: mx15(descriptionText7, "text-center mli-6 whitespace-normal")
   }, children);
 };
 
 // packages/sdk/shell/src/components/Panel/Input.tsx
-import React21 from "react";
+import React19 from "react";
 import { Input as UiInput } from "@dxos/react-ui";
 var Input = ({ validationMessage, label, ...props }) => {
-  return /* @__PURE__ */ React21.createElement(UiInput.Root, null, /* @__PURE__ */ React21.createElement(UiInput.Label, null, label), /* @__PURE__ */ React21.createElement(UiInput.TextInput, {
+  return /* @__PURE__ */ React19.createElement(UiInput.Root, null, /* @__PURE__ */ React19.createElement(UiInput.Label, null, label), /* @__PURE__ */ React19.createElement(UiInput.TextInput, {
     ...props,
     classNames: "plb-3 mbs-2 text-center"
-  }), /* @__PURE__ */ React21.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React21.createElement(UiInput.Validation, null, validationMessage)));
+  }), /* @__PURE__ */ React19.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React19.createElement(UiInput.Validation, null, validationMessage)));
 };
 
 // packages/sdk/shell/src/components/Panel/StepHeading.tsx
-import React22, { forwardRef as forwardRef6 } from "react";
-import { mx as mx17 } from "@dxos/react-ui-theme";
+import React20, { forwardRef as forwardRef6 } from "react";
+import { mx as mx16 } from "@dxos/react-ui-theme";
 var StepHeading = /* @__PURE__ */ forwardRef6(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React22.createElement("h2", {
+  return /* @__PURE__ */ React20.createElement("h2", {
     ...props,
-    className: mx17("font-normal text-sm mbe-4 mli-1 text-center", className),
+    className: mx16("font-normal text-sm mbe-4 mli-1 text-center", className),
     ref: forwardedRef
   }, children);
 });
@@ -1142,9 +1050,9 @@ var StepHeading = /* @__PURE__ */ forwardRef6(({ children, className, ...props }
 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 React23, { forwardRef as forwardRef7, useEffect } from "react";
+import React21, { forwardRef as forwardRef7, useEffect } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
-import { mx as mx18 } from "@dxos/react-ui-theme";
+import { mx as mx17 } from "@dxos/react-ui-theme";
 var VIEWPORT_NAME = "Viewport";
 var VIEWS_NAME = "ViewportViews";
 var VIEW_NAME = "ViewportView";
@@ -1156,16 +1064,16 @@ var ViewportRoot = ({ __viewportScope, classNames, children, defaultActiveView,
     defaultProp: defaultActiveView,
     onChange: onActiveViewChange
   });
-  return /* @__PURE__ */ React23.createElement(ViewportProvider, {
+  return /* @__PURE__ */ React21.createElement(ViewportProvider, {
     focusManaged,
     activeView,
     setActiveView,
     scope: __viewportScope
-  }, /* @__PURE__ */ React23.createElement("div", {
+  }, /* @__PURE__ */ React21.createElement("div", {
     role: "region",
     "aria-live": "polite",
     ...props,
-    className: mx18("is-full overflow-hidden", classNames)
+    className: mx17("is-full overflow-hidden", classNames)
   }, children));
 };
 ViewportRoot.displayName = VIEWPORT_NAME;
@@ -1173,11 +1081,11 @@ var ViewportViews = ({ classNames, children, ...props }) => {
   const size = {
     inlineSize: `${Math.ceil(children.length) * 100}%`
   };
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     role: "none",
     style: size,
     ...props,
-    className: mx18("flex", classNames)
+    className: mx17("flex", classNames)
   }, children);
 };
 ViewportViews.displayName = VIEWS_NAME;
@@ -1195,12 +1103,12 @@ var ViewportView = /* @__PURE__ */ forwardRef7(({ __viewportScope, classNames, c
     ref.current,
     isActive
   ]);
-  return /* @__PURE__ */ React23.createElement("section", {
+  return /* @__PURE__ */ React21.createElement("section", {
     ...props,
     ...!isActive && {
       "aria-hidden": true
     },
-    className: mx18("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
+    className: mx17("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
     ref
   }, children);
 });
@@ -1212,44 +1120,43 @@ var Viewport = {
 };
 
 // packages/sdk/shell/src/components/SpaceListItem.tsx
-import React24, { forwardRef as forwardRef8 } from "react";
+import React22, { forwardRef as forwardRef8 } from "react";
 import { Avatar as Avatar5, useId as useId4 } from "@dxos/react-ui";
-import { mx as mx19 } from "@dxos/react-ui-theme";
+import { mx as mx18 } 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__ */ React24.createElement("li", {
-    className: mx19("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
+  return /* @__PURE__ */ React22.createElement("li", {
+    className: mx18("flex gap-2 items-center mbe-2", onClick && "cursor-pointer"),
     onClick: () => onClick?.(),
     ref,
     "data-testid": "space-list-item"
-  }, /* @__PURE__ */ React24.createElement(Avatar5.Root, {
+  }, /* @__PURE__ */ React22.createElement(Avatar5.Root, {
     labelId
-  }, /* @__PURE__ */ React24.createElement(Avatar5.Frame, null, /* @__PURE__ */ React24.createElement(Avatar5.Fallback, {
+  }, /* @__PURE__ */ React22.createElement(Avatar5.Frame, null, /* @__PURE__ */ React22.createElement(Avatar5.Fallback, {
     text: fallbackValue
-  })), /* @__PURE__ */ React24.createElement(Avatar5.Label, {
+  })), /* @__PURE__ */ React22.createElement(Avatar5.Label, {
     classNames: "text-sm truncate"
   }, displayName)));
 });
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
-import React42 from "react";
-import { Dialog, useId as useId10 } from "@dxos/react-ui";
+import React40 from "react";
+import { Clipboard as Clipboard3, Dialog, useId as useId10 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-import { FirstAidKit as FirstAidKit2, Key, Plugs, PlugsConnected } from "@phosphor-icons/react";
-import React29, { useEffect as useEffect4, useMemo as useMemo3, useState as useState9 } from "react";
+import { Key, Plugs, PlugsConnected } from "@phosphor-icons/react";
+import React27, { useEffect as useEffect4, useMemo as useMemo3, useState as useState7 } from "react";
 import { generateName as generateName3 } from "@dxos/display-name";
-import { invariant as invariant3 } from "@dxos/invariant";
 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 Tooltip6, useId as useId6, useTranslation as useTranslation14 } from "@dxos/react-ui";
-import { getSize as getSize13 } from "@dxos/react-ui-theme";
+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 { hexToEmoji as hexToEmoji4, hexToHue as hexToHue2, keyToFallback as keyToFallback3 } from "@dxos/util";
 
 // packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts
@@ -1365,7 +1272,7 @@ var useIdentityMachine = (client, options) => {
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
-import React25 from "react";
+import React23 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";
@@ -1401,7 +1308,7 @@ var IdentityActionChooser = (props) => {
     });
   };
   const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production";
-  return /* @__PURE__ */ React25.createElement(IdentityActionChooserImpl, {
+  return /* @__PURE__ */ React23.createElement(IdentityActionChooserImpl, {
     ...props,
     onClickAdd: createInvitation,
     onClickJoinExisting: () => send?.({
@@ -1417,10 +1324,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__ */ React25.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     className: "bs-40 grow overflow-y-auto"
-  }, /* @__PURE__ */ React25.createElement(DeviceList, {
+  }, /* @__PURE__ */ React23.createElement(DeviceList, {
     devices,
     connectionState,
     onClickAdd,
@@ -1428,20 +1335,20 @@ var IdentityActionChooserImpl = ({ devices, connectionState, agentHostingEnabled
     onClickRecover: agentProps.agentStatus === "created" ? onClickRecover : void 0,
     onClickReset,
     onAgentDestroy: agentProps.onAgentDestroy
-  }), !edgeDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ React25.createElement(AgentConfig, agentProps));
+  }), !edgeDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ React23.createElement(AgentConfig, agentProps));
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
-import React26, { useState as useState5 } from "react";
+import React24, { useState as useState3 } from "react";
 import { log as log3 } from "@dxos/log";
-import { useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { useClipboard, useTranslation as useTranslation10 } from "@dxos/react-ui";
 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 useState6 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 import { invariant } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
 import { QueryAgentStatusResponse } from "@dxos/protocols/proto/dxos/client/services";
@@ -1449,9 +1356,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] = useState6("");
-  const [lastReceivedStatus, setLastReceivedStatus] = useState6(QueryAgentStatusResponse.AgentStatus.UNKNOWN);
-  const [agentStatus, setAgentStatus] = useState6("getting");
+  const [validationMessage, setValidationMessage] = useState4("");
+  const [lastReceivedStatus, setLastReceivedStatus] = useState4(QueryAgentStatusResponse.AgentStatus.UNKNOWN);
+  const [agentStatus, setAgentStatus] = useState4("getting");
   const client = useClient3();
   const agentHostingEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
   const handleStatus = (status) => {
@@ -1537,15 +1444,15 @@ var useEdgeAgentHandlers = ({ identity }) => {
 };
 
 // packages/sdk/shell/src/panels/IdentityPanel/useKubeAgentHandlers.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState5 } 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] = useState7("");
-  const [agentStatus, setAgentStatus] = useState7("getting");
+  const [validationMessage, setValidationMessage] = useState5("");
+  const [agentStatus, setAgentStatus] = useState5("getting");
   const agentHostingProviderClient = useAgentHostingClient();
   const client = useClient4();
   const updateAgentStatus = async () => {
@@ -1625,7 +1532,7 @@ var useKubeAgentHandlers = ({ invitations, identity }) => {
   useEffect3(() => {
     void updateAgentStatus();
   }, []);
-  const handleAgentCreate = useCallback4(async (invitation) => {
+  const handleAgentCreate = useCallback3(async (invitation) => {
     const invitationCode = InvitationEncoder2.encode(invitation);
     if (invitation.state === Invitation3.State.CONNECTING) {
       log5.info(JSON.stringify({
@@ -1674,11 +1581,11 @@ var useAgentHandlers = (params) => {
 };
 
 // packages/sdk/shell/src/steps/InvitationManager.tsx
-import { Check as Check4, X as X3 } from "@phosphor-icons/react";
-import React27, { useMemo as useMemo2 } from "react";
+import { Check as Check3, X as X3 } from "@phosphor-icons/react";
+import React25, { useMemo as useMemo2 } from "react";
 import { QR } from "react-qr-rounded";
-import { useId as useId5, useTranslation as useTranslation12 } from "@dxos/react-ui";
-import { descriptionText as descriptionText8, getSize as getSize11, mx as mx20 } from "@dxos/react-ui-theme";
+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 { hexToEmoji as hexToEmoji3 } from "@dxos/util";
 
 // packages/sdk/shell/src/util/invitationStatusValue.ts
@@ -1724,13 +1631,13 @@ var invitationStatusValue = /* @__PURE__ */ new Map([
 
 // packages/sdk/shell/src/steps/InvitationManager.tsx
 var InvitationManagerView = ({ children, ...props }) => {
-  return /* @__PURE__ */ React27.createElement(Viewport.View, {
+  return /* @__PURE__ */ React25.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 } = useTranslation12("os");
+  const { t } = useTranslation11("os");
   const qrLabel = useId5("invitation-manager__qr-code");
   const statusValue = multiUse ? 0 : invitationStatusValue.get(status) ?? 0;
   const showAuthCode = statusValue === 3;
@@ -1751,50 +1658,50 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
   }, [
     statusValue
   ]);
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Viewport.Root, {
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Viewport.Root, {
     activeView,
     classNames: "grow plb-1"
-  }, /* @__PURE__ */ React27.createElement(Viewport.Views, null, /* @__PURE__ */ React27.createElement(InvitationManagerView, {
+  }, /* @__PURE__ */ React25.createElement(Viewport.Views, null, /* @__PURE__ */ React25.createElement(InvitationManagerView, {
     id: "showing qr",
     emoji
-  }, /* @__PURE__ */ React27.createElement("p", {
+  }, /* @__PURE__ */ React25.createElement("p", {
     className: "text-sm mlb-1 font-normal text-center"
-  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React27.createElement("div", {
+  }, t(multiUse ? "invite many qr label" : "invite one qr label")), /* @__PURE__ */ React25.createElement("div", {
     role: "none",
-    className: mx20(descriptionText8, "is-full max-is-[14rem] relative")
-  }, /* @__PURE__ */ React27.createElement(QR, {
+    className: mx19(descriptionText8, "is-full max-is-[14rem] relative")
+  }, /* @__PURE__ */ React25.createElement(QR, {
     rounding: 100,
     backgroundColor: "transparent",
     color: "currentColor",
-    className: mx20("is-full bs-full p-2", showAuthCode && "invisible"),
+    className: mx19("is-full bs-full p-2", showAuthCode && "invisible"),
     "aria-labelledby": qrLabel,
     errorCorrectionLevel: "Q",
     cutout: true
-  }, invitationUrl ?? "never"), /* @__PURE__ */ React27.createElement(Centered, null, /* @__PURE__ */ React27.createElement(Emoji, {
+  }, invitationUrl ?? "never"), /* @__PURE__ */ React25.createElement(Centered, null, /* @__PURE__ */ React25.createElement(Emoji, {
     text: emoji
-  }))), /* @__PURE__ */ React27.createElement("span", {
+  }))), /* @__PURE__ */ React25.createElement("span", {
     id: qrLabel,
     className: "sr-only"
-  }, t("qr label")), /* @__PURE__ */ React27.createElement(CopyButton, {
+  }, t("qr label")), /* @__PURE__ */ React25.createElement(Clipboard2.Button, {
     variant: "ghost",
     value: invitationUrl ?? "never"
-  })), /* @__PURE__ */ React27.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React25.createElement(InvitationManagerView, {
     id: "showing auth code"
-  }, /* @__PURE__ */ React27.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React27.createElement(AuthCode, {
+  }, /* @__PURE__ */ React25.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React25.createElement(AuthCode, {
     code: authCode,
     large: true,
     classNames: "text-black dark:text-white"
-  }), /* @__PURE__ */ React27.createElement(Label, null, t("auth other device emoji message")), emoji && /* @__PURE__ */ React27.createElement(Emoji, {
+  }), /* @__PURE__ */ React25.createElement(Label, null, t("auth other device emoji message")), emoji && /* @__PURE__ */ React25.createElement(Emoji, {
     text: emoji
-  })), /* @__PURE__ */ React27.createElement(InvitationManagerView, {
+  })), /* @__PURE__ */ React25.createElement(InvitationManagerView, {
     id: "showing final"
-  }, statusValue > 0 ? /* @__PURE__ */ React27.createElement(Check4, {
-    className: mx20("m-1.5", getSize11(6))
-  }) : /* @__PURE__ */ React27.createElement(X3, {
-    className: mx20("m-1.5", getSize11(6))
-  })))), /* @__PURE__ */ React27.createElement(Actions, {
+  }, 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, {
     classNames: "mbs-4"
-  }, /* @__PURE__ */ React27.createElement(Action, {
+  }, /* @__PURE__ */ React25.createElement(Action, {
     disabled: !active,
     onClick: () => send?.({
       type: "deselectInvitation"
@@ -1804,15 +1711,15 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
 
 // packages/sdk/shell/src/steps/ConfirmReset.tsx
 import { Warning } from "@phosphor-icons/react";
-import React28, { useState as useState8 } from "react";
+import React26, { useState as useState6 } from "react";
 import { log as log6 } from "@dxos/log";
-import { Message, useTranslation as useTranslation13 } from "@dxos/react-ui";
-import { getSize as getSize12, mx as mx21 } from "@dxos/react-ui-theme";
+import { Message, useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { getSize as getSize11, mx as mx20 } 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 } = useTranslation13("os");
-  const [validationMessage, setValidationMessage] = useState8("");
-  const [pending, setPending] = useState8(false);
+  const { t } = useTranslation12("os");
+  const [validationMessage, setValidationMessage] = useState6("");
+  const [pending, setPending] = useState6(false);
   const processReset = async () => {
     setPending(true);
     return onConfirm?.().then(() => setPending(false), (error) => {
@@ -1826,7 +1733,7 @@ var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
       setPending(false);
     });
   };
-  return /* @__PURE__ */ React28.createElement(ConfirmResetImpl, {
+  return /* @__PURE__ */ React26.createElement(ConfirmResetImpl, {
     disabled: !active,
     pending,
     validationMessage,
@@ -1836,20 +1743,20 @@ var ConfirmReset = ({ active, onCancel, onConfirm, mode }) => {
   });
 };
 var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCancel, mode }) => {
-  const { t } = useTranslation13("os");
+  const { t } = useTranslation12("os");
   const confirmationValue = t("confirmation value");
-  const [inputValue, setInputValue] = useState8("");
+  const [inputValue, setInputValue] = useState6("");
   const testIdAffix = mode === "join new identity" ? "join-new-identity" : mode === "recover" ? "recover" : "reset-storage";
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", {
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "grow flex flex-col gap-2 justify-center"
-  }, /* @__PURE__ */ React28.createElement(Message.Root, {
+  }, /* @__PURE__ */ React26.createElement(Message.Root, {
     valence: "error"
-  }, /* @__PURE__ */ React28.createElement(Message.Title, null, /* @__PURE__ */ React28.createElement(Warning, {
-    className: mx21(getSize12(6), "inline mie-2")
-  }), t("sign out chooser title")), /* @__PURE__ */ React28.createElement(Message.Body, null, t("sign out chooser message"))), /* @__PURE__ */ React28.createElement(Input, {
+  }, /* @__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, {
     validationMessage,
-    label: /* @__PURE__ */ React28.createElement(StepHeading, {
+    label: /* @__PURE__ */ React26.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
@@ -1860,11 +1767,11 @@ var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCan
       confirmationValue
     }),
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React28.createElement(Actions, null, onCancel && /* @__PURE__ */ React28.createElement(Action, {
+  })), /* @__PURE__ */ React26.createElement(Actions, null, onCancel && /* @__PURE__ */ React26.createElement(Action, {
     disabled,
     onClick: onCancel,
     "data-testid": `${testIdAffix}.reset-identity-cancel`
-  }, t("cancel label")), onConfirm && /* @__PURE__ */ React28.createElement(Action, {
+  }, t("cancel label")), onConfirm && /* @__PURE__ */ React26.createElement(Action, {
     variant: "destructive",
     disabled: disabled || pending || inputValue !== confirmationValue,
     onClick: onConfirm,
@@ -1877,14 +1784,13 @@ 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, hideRecover, onDone, onUpdateProfile, connectionState, onChangeConnectionState }) => {
-  const client = useClient6();
+var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState }) => {
   const fallbackValue = keyToFallback3(identity.identityKey);
-  const { t } = useTranslation14("os");
-  const [displayName, setDisplayName] = useState9(identity.profile?.displayName ?? "");
-  const [emoji, setEmojiDirectly] = useState9(getEmojiValue(identity));
-  const [hue, setHueDirectly] = useState9(getHueValue(identity));
-  const { textValue, setTextValue } = useClipboardContext();
+  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 setEmoji = (nextEmoji) => {
@@ -1907,43 +1813,30 @@ var IdentityHeading = ({ titleId, title, identity, hideRecover, onDone, onUpdate
       }
     });
   };
-  const handleRecoveryCode = async () => {
-    invariant3(client.services.services.IdentityService, "IdentityService not available", {
-      F: __dxlog_file6,
-      L: 77,
-      S: void 0,
-      A: [
-        "client.services.services.IdentityService",
-        "'IdentityService not available'"
-      ]
-    });
-    const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
-    void setTextValue(seedphrase);
-  };
   const isConnected = connectionState === ConnectionState2.ONLINE;
-  return /* @__PURE__ */ React29.createElement(Heading, {
+  return /* @__PURE__ */ React27.createElement(Heading, {
     titleId,
     title,
-    corner: /* @__PURE__ */ React29.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React27.createElement(CloseButton, {
       onDone
     })
-  }, /* @__PURE__ */ React29.createElement(Avatar6.Root, {
+  }, /* @__PURE__ */ React27.createElement(Avatar6.Root, {
     size: 16,
     variant: "circle",
     status: isConnected ? "active" : "error",
     hue: hue || fallbackValue.hue
-  }, /* @__PURE__ */ React29.createElement(Toolbar3.Root, {
+  }, /* @__PURE__ */ React27.createElement(Toolbar3.Root, {
     classNames: "flex justify-center"
-  }, /* @__PURE__ */ React29.createElement(Avatar6.Frame, {
+  }, /* @__PURE__ */ React27.createElement(Avatar6.Frame, {
     classNames: "relative z-[2] -mli-4 chromatic-ignore"
-  }, /* @__PURE__ */ React29.createElement(Avatar6.Fallback, {
+  }, /* @__PURE__ */ React27.createElement(Avatar6.Fallback, {
     text: emoji || fallbackValue.emoji
-  }))), /* @__PURE__ */ React29.createElement(Avatar6.Label, {
+  }))), /* @__PURE__ */ React27.createElement(Avatar6.Label, {
     classNames: "sr-only",
     "data-testid": "identityHeading.displayName"
-  }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex())), /* @__PURE__ */ React29.createElement(Input2.Root, null, /* @__PURE__ */ React29.createElement(Input2.Label, {
+  }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex())), /* @__PURE__ */ React27.createElement(Input2.Root, null, /* @__PURE__ */ React27.createElement(Input2.Label, {
     srOnly: true
-  }, t("display name input label")), /* @__PURE__ */ React29.createElement(Input2.TextInput, {
+  }, t("display name input label")), /* @__PURE__ */ React27.createElement(Input2.TextInput, {
     variant: "subdued",
     "data-testid": "display-name-input",
     placeholder: t("display name input placeholder"),
@@ -1954,61 +1847,51 @@ var IdentityHeading = ({ titleId, title, identity, hideRecover, onDone, onUpdate
       ...identity.profile,
       displayName: value
     })
-  })), /* @__PURE__ */ React29.createElement(Toolbar3.Root, {
+  })), /* @__PURE__ */ React27.createElement(Toolbar3.Root, {
     classNames: "flex justify-center items-center gap-1 pt-3"
-  }, /* @__PURE__ */ React29.createElement(EmojiPickerToolbarButton, {
+  }, /* @__PURE__ */ React27.createElement(EmojiPickerToolbarButton, {
     emoji,
     onChangeEmoji: setEmoji,
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ React29.createElement(HuePickerToolbarButton, {
+  }), /* @__PURE__ */ React27.createElement(HuePickerToolbarButton, {
     hue,
     onChangeHue: setHue,
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ React29.createElement(Tooltip6.Root, null, /* @__PURE__ */ React29.createElement(Tooltip6.Trigger, {
+  }), /* @__PURE__ */ React27.createElement(Tooltip5.Root, null, /* @__PURE__ */ React27.createElement(Tooltip5.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+  }, /* @__PURE__ */ React27.createElement(Toolbar3.Button, {
     classNames: "bs-[--rail-action]",
     "data-testid": "update-profile-form-copy-key",
     onClick: () => setTextValue(identityHex)
-  }, /* @__PURE__ */ React29.createElement("span", {
+  }, /* @__PURE__ */ React27.createElement("span", {
     className: "sr-only"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React29.createElement(Key, {
-    className: getSize13(5)
-  }))), /* @__PURE__ */ React29.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip6.Content, {
+  }, 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, {
     side: "bottom",
     classNames: "z-50"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React29.createElement(Tooltip6.Arrow, null)))), !hideRecover && /* @__PURE__ */ React29.createElement(Tooltip6.Root, null, /* @__PURE__ */ React29.createElement(Tooltip6.Trigger, {
+  }, 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, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
-    classNames: "bs-[--rail-action]",
-    onClick: handleRecoveryCode
-  }, /* @__PURE__ */ React29.createElement(FirstAidKit2, {
-    className: getSize13(5)
-  }))), /* @__PURE__ */ React29.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip6.Content, {
-    side: "bottom",
-    classNames: "z-50"
-  }, t("create recovery code label"), /* @__PURE__ */ React29.createElement(Tooltip6.Arrow, null)))), /* @__PURE__ */ React29.createElement(Tooltip6.Root, null, /* @__PURE__ */ React29.createElement(Tooltip6.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+  }, /* @__PURE__ */ React27.createElement(Toolbar3.Button, {
     classNames: [
       "bs-[--rail-action]",
       !isConnected && "text-error-500"
     ],
     onClick: () => onChangeConnectionState?.(isConnected ? ConnectionState2.OFFLINE : ConnectionState2.ONLINE)
-  }, /* @__PURE__ */ React29.createElement("span", {
+  }, /* @__PURE__ */ React27.createElement("span", {
     className: "sr-only"
-  }, t(isConnected ? "disconnect label" : "connect label")), isConnected ? /* @__PURE__ */ React29.createElement(PlugsConnected, {
-    className: getSize13(5)
-  }) : /* @__PURE__ */ React29.createElement(Plugs, {
-    className: getSize13(5)
-  }))), /* @__PURE__ */ React29.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip6.Content, {
+  }, 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, {
     side: "bottom",
     classNames: "z-50"
-  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React29.createElement(Tooltip6.Arrow, null)))))));
+  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React27.createElement(Tooltip5.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 } = useTranslation14("os");
+  const { t } = useTranslation13("os");
   const title = useMemo3(() => {
     switch (activeView) {
       case "device invitation manager":
@@ -2022,7 +1905,7 @@ var IdentityPanelImpl = (props) => {
   ]);
   const onCancelReset = () => rest.send?.("unchooseAction");
   const hideRecover = rest.agentStatus !== "created";
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(IdentityHeading, {
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(IdentityHeading, {
     identity,
     titleId,
     title,
@@ -2031,44 +1914,44 @@ var IdentityPanelImpl = (props) => {
     onUpdateProfile,
     connectionState,
     onChangeConnectionState
-  }), /* @__PURE__ */ React29.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React27.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React29.createElement(Viewport.Views, null, /* @__PURE__ */ React29.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React27.createElement(Viewport.Views, null, /* @__PURE__ */ React27.createElement(Viewport.View, {
     id: "identity action chooser",
     classNames: viewStyles
-  }, /* @__PURE__ */ React29.createElement(IdentityActionChooserComponent, {
+  }, /* @__PURE__ */ React27.createElement(IdentityActionChooserComponent, {
     active: activeView === "identity action chooser",
     ...rest,
     connectionState
-  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
     id: "device invitation manager",
     classNames: viewStyles
-  }, /* @__PURE__ */ React29.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React27.createElement(InvitationManagerComponent, {
     active: activeView === "device invitation manager",
     ...rest,
     invitationUrl: rest.createInvitationUrl(rest.invitationCode)
-  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm join new identity"
-  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React27.createElement(ConfirmReset, {
     active: activeView === "confirm join new identity",
     ...rest,
     mode: "join new identity",
     onConfirm: onJoinNewIdentity,
     onCancel: onCancelReset
-  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm recover"
-  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React27.createElement(ConfirmReset, {
     active: activeView === "confirm recover",
     ...rest,
     mode: "recover",
     onConfirm: onRecover,
     onCancel: onCancelReset
-  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React27.createElement(Viewport.View, {
     classNames: viewStyles,
     id: "confirm reset storage"
-  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
+  }, /* @__PURE__ */ React27.createElement(ConfirmReset, {
     active: activeView === "confirm reset storage",
     ...rest,
     mode: "reset storage",
@@ -2078,7 +1961,7 @@ var IdentityPanelImpl = (props) => {
 };
 var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus2(invitation);
-  return /* @__PURE__ */ React29.createElement(IdentityPanelImpl, {
+  return /* @__PURE__ */ React27.createElement(IdentityPanelImpl, {
     ...props,
     ...invitationStatus
   });
@@ -2096,7 +1979,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   if (!identity) {
     log7.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file6,
-      L: 288,
+      L: 255,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -2113,7 +1996,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       log7("[state]", state, {
         F: __dxlog_file6,
-        L: 301,
+        L: 268,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2159,14 +2042,14 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     onChangeConnectionState: handleChangeConnectionState,
     ...agentProps
   };
-  return identityState.context.invitation ? /* @__PURE__ */ React29.createElement(IdentityPanelWithInvitationImpl, {
+  return identityState.context.invitation ? /* @__PURE__ */ React27.createElement(IdentityPanelWithInvitationImpl, {
     ...implProps,
     invitation: identityState.context.invitation
-  }) : /* @__PURE__ */ React29.createElement(IdentityPanelImpl, implProps);
+  }) : /* @__PURE__ */ React27.createElement(IdentityPanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
-import React38, { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo4 } from "react";
+import React36, { 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";
@@ -2174,25 +2057,25 @@ import { useId as useId8, useThemeContext as useThemeContext5 } from "@dxos/reac
 
 // packages/sdk/shell/src/panels/JoinPanel/JoinHeading.tsx
 import { X as X4 } from "@phosphor-icons/react";
-import React30, { cloneElement, forwardRef as forwardRef9 } from "react";
-import { Button as Button10, useTranslation as useTranslation15 } from "@dxos/react-ui";
-import { descriptionText as descriptionText9, getSize as getSize14, mx as mx22 } from "@dxos/react-ui-theme";
+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";
 var JoinHeading = /* @__PURE__ */ forwardRef9(({ mode, titleId, exitActionParent, onExit }, forwardedRef) => {
-  const { t } = useTranslation15("os");
-  const exitButton = /* @__PURE__ */ React30.createElement(Button10, {
+  const { t } = useTranslation14("os");
+  const exitButton = /* @__PURE__ */ React28.createElement(Button9, {
     variant: "ghost",
     ...onExit && {
       onClick: onExit
     },
-    classNames: mx22(descriptionText9, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    classNames: mx21(descriptionText9, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
     "data-testid": "join-exit"
-  }, /* @__PURE__ */ React30.createElement(X4, {
+  }, /* @__PURE__ */ React28.createElement(X4, {
     weight: "bold",
-    className: getSize14(4)
-  }), /* @__PURE__ */ React30.createElement("span", {
+    className: getSize13(4)
+  }), /* @__PURE__ */ React28.createElement("span", {
     className: "sr-only"
   }, t("exit label")));
-  return /* @__PURE__ */ React30.createElement(Heading, {
+  return /* @__PURE__ */ React28.createElement(Heading, {
     ref: forwardedRef,
     titleId,
     title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
@@ -2207,7 +2090,7 @@ var JoinHeading = /* @__PURE__ */ forwardRef9(({ mode, titleId, exitActionParent
 
 // packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts
 import { useMachine as useMachine2 } from "@xstate/react";
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback4 } from "react";
 import { assign as assign2, createMachine as createMachine2 } from "xstate";
 import { log as log8 } from "@dxos/log";
 import { AlreadyJoinedError } from "@dxos/react-client";
@@ -2712,7 +2595,7 @@ var defaultCodeFromUrl = (invitationType, text) => {
   }
 };
 var useJoinMachine = (client, options) => {
-  const redeemHaloInvitationCode = useCallback5(({ halo }) => {
+  const redeemHaloInvitationCode = useCallback4(({ halo }) => {
     if (halo.unredeemedCode) {
       try {
         const invitation = InvitationEncoder3.decode(defaultCodeFromUrl("halo", halo.unredeemedCode));
@@ -2737,7 +2620,7 @@ var useJoinMachine = (client, options) => {
   }, [
     client
   ]);
-  const redeemSpaceInvitationCode = useCallback5(({ space }) => {
+  const redeemSpaceInvitationCode = useCallback4(({ space }) => {
     if (space.unredeemedCode) {
       try {
         const invitation = InvitationEncoder3.decode(defaultCodeFromUrl("space", space.unredeemedCode));
@@ -2762,7 +2645,7 @@ var useJoinMachine = (client, options) => {
   }, [
     client
   ]);
-  const invalidateHaloInvitationCode = useCallback5(({ halo }) => {
+  const invalidateHaloInvitationCode = useCallback4(({ halo }) => {
     if (halo.unredeemedCode) {
       options?.onInvalidateInvitationCode?.(halo.unredeemedCode);
       return {
@@ -2775,7 +2658,7 @@ var useJoinMachine = (client, options) => {
   }, [
     options?.onInvalidateInvitationCode
   ]);
-  const invalidateSpaceInvitationCode = useCallback5(({ space }) => {
+  const invalidateSpaceInvitationCode = useCallback4(({ space }) => {
     if (space.unredeemedCode) {
       options?.onInvalidateInvitationCode?.(space.unredeemedCode);
       return {
@@ -2810,17 +2693,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 React31 from "react";
-import { useTranslation as useTranslation16 } from "@dxos/react-ui";
-import { getSize as getSize15 } from "@dxos/react-ui-theme";
+import React29 from "react";
+import { useTranslation as useTranslation15 } from "@dxos/react-ui";
+import { getSize as getSize14 } from "@dxos/react-ui-theme";
 var AdditionMethodChooser = (viewStateProps) => {
   const disabled = !viewStateProps.active;
   const { send } = viewStateProps;
-  const { t } = useTranslation16("os");
+  const { t } = useTranslation15("os");
   const sharedButtonProps = {
     disabled,
-    after: /* @__PURE__ */ React31.createElement(CaretRight2, {
-      className: getSize15(4),
+    after: /* @__PURE__ */ React29.createElement(CaretRight2, {
+      className: getSize14(4),
       weight: "bold"
     }),
     slots: {
@@ -2829,35 +2712,35 @@ var AdditionMethodChooser = (viewStateProps) => {
       }
     }
   };
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React31.createElement("div", {
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React29.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1 grow"
-  }, /* @__PURE__ */ React31.createElement(CompoundButton, {
+  }, /* @__PURE__ */ React29.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("create identity description"),
-    before: /* @__PURE__ */ React31.createElement(Plus3, {
-      className: getSize15(6)
+    before: /* @__PURE__ */ React29.createElement(Plus3, {
+      className: getSize14(6)
     }),
     onClick: () => send({
       type: "createIdentity"
     }),
     "data-autofocus": "choosingAuthMethod",
     "data-testid": "identity-chooser.create-identity"
-  }, t("create identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
+  }, t("create identity label")), /* @__PURE__ */ React29.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("join identity description"),
-    before: /* @__PURE__ */ React31.createElement(QrCode, {
-      className: getSize15(6)
+    before: /* @__PURE__ */ React29.createElement(QrCode, {
+      className: getSize14(6)
     }),
     onClick: () => send({
       type: "acceptHaloInvitation"
     }),
     "data-testid": "identity-chooser.join-identity"
-  }, t("join identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
+  }, t("join identity label")), /* @__PURE__ */ React29.createElement(CompoundButton, {
     ...sharedButtonProps,
     description: t("recover identity description"),
-    before: /* @__PURE__ */ React31.createElement(Textbox, {
-      className: getSize15(6)
+    before: /* @__PURE__ */ React29.createElement(Textbox, {
+      className: getSize14(6)
     }),
     onClick: () => send({
       type: "recoverIdentity"
@@ -2867,39 +2750,39 @@ var AdditionMethodChooser = (viewStateProps) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
-import React32, { cloneElement as cloneElement2 } from "react";
+import React30, { cloneElement as cloneElement2 } from "react";
 import { generateName as generateName4 } from "@dxos/display-name";
-import { Avatar as Avatar7, useId as useId7, useTranslation as useTranslation17 } from "@dxos/react-ui";
-import { mx as mx23 } from "@dxos/react-ui-theme";
+import { Avatar as Avatar7, useId as useId7, useTranslation as useTranslation16 } from "@dxos/react-ui";
+import { mx as mx22 } 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 } = useTranslation17("os");
+  const { t } = useTranslation16("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__ */ React32.createElement(Action, {
+  const doneAction = /* @__PURE__ */ React30.createElement(Action, {
     ...onDone && {
       onClick: () => onDone(null)
     },
     disabled,
     "data-autofocus": "confirmingAddedIdentity",
     "data-testid": "identity-added-done"
-  }, /* @__PURE__ */ React32.createElement("span", null, t("done label")));
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(StepHeading, null, t("identity added label")), /* @__PURE__ */ React32.createElement("div", {
+  }, /* @__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", {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
-  }, /* @__PURE__ */ React32.createElement(Avatar7.Root, {
+  }, /* @__PURE__ */ React30.createElement(Avatar7.Root, {
     status: "active",
     labelId,
     hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React32.createElement(Avatar7.Frame, null, /* @__PURE__ */ React32.createElement(Avatar7.Fallback, {
+  }, /* @__PURE__ */ React30.createElement(Avatar7.Frame, null, /* @__PURE__ */ React30.createElement(Avatar7.Fallback, {
     text: addedIdentity?.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React32.createElement(Avatar7.Label, {
-    classNames: mx23("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
-  }, displayName))), /* @__PURE__ */ React32.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React32.createElement(Action, {
+  })), /* @__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, {
     variant: "primary",
     disabled: disabled || !addedIdentity,
     onClick: () => addedIdentity && send({
@@ -2911,20 +2794,20 @@ var IdentityAdded = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
-import React33, { useState as useState10 } from "react";
+import React31, { useCallback as useCallback5, useState as useState8 } from "react";
 import { log as log9 } from "@dxos/log";
 import { useClient as useClient7 } from "@dxos/react-client";
-import { useTranslation as useTranslation18 } from "@dxos/react-ui";
+import { useTranslation as useTranslation17 } 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 } = useTranslation18("os");
-  const [validationMessage, setValidationMessage] = useState10("");
-  const createIdentity = (value) => {
+  const { t } = useTranslation17("os");
+  const [validationMessage, setValidationMessage] = useState8("");
+  const handleConfirm = async (value) => {
     if (isRecover) {
-      void client.halo.recoverIdentity({
+      await client.halo.recoverIdentity({
         seedphrase: value
       }).then((identity) => {
         send?.({
@@ -2934,14 +2817,14 @@ var IdentityInput = (props) => {
       }, (error) => {
         log9.catch(error, void 0, {
           F: __dxlog_file8,
-          L: 38,
+          L: 39,
           S: void 0,
           C: (f, a) => f(...a)
         });
         setValidationMessage(t("failed to recover identity message"));
       });
     } else {
-      void client.halo.createIdentity({
+      await client.halo.createIdentity({
         displayName: value
       }).then((identity) => {
         send?.({
@@ -2951,7 +2834,7 @@ var IdentityInput = (props) => {
       }, (error) => {
         log9.catch(error, void 0, {
           F: __dxlog_file8,
-          L: 48,
+          L: 49,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -2959,51 +2842,53 @@ var IdentityInput = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ React33.createElement(IdentityInputImpl, {
+  return /* @__PURE__ */ React31.createElement(IdentityInputImpl, {
     ...props,
-    onDisplayNameConfirm: createIdentity,
+    onConfirm: handleConfirm,
     validationMessage
   });
 };
 var IdentityInputImpl = (props) => {
-  const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
-  const disabled = !active;
-  const { t } = useTranslation18("os");
-  const [inputValue, setInputValue] = useState10("");
+  const { method, active, onConfirm, validationMessage } = props;
+  const { t } = useTranslation17("os");
+  const [inputValue, setInputValue] = useState8("");
+  const [pending, setPending] = useState8(false);
+  const disabled = !active || pending;
   const isRecover = method === "recover identity";
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
+  const handleConfirm = useCallback5(async () => {
+    setPending(true);
+    await onConfirm?.(inputValue);
+    setPending(false);
+  }, [
+    onConfirm,
+    inputValue
+  ]);
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React33.createElement(Input, {
+  }, /* @__PURE__ */ React31.createElement(Input, {
     validationMessage,
-    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    label: /* @__PURE__ */ React31.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
     disabled,
     "data-testid": "identity-input",
-    placeholder: isRecover ? "Type your recovery phrase" : "Type a display name",
+    placeholder: isRecover ? t("recovery code placeholder") : t("display name placeholder"),
     onChange: ({ target: { value } }) => setInputValue(value)
-  })), /* @__PURE__ */ React33.createElement(Actions, null, /* @__PURE__ */ React33.createElement(Action, {
-    variant: "ghost",
-    disabled,
-    onClick: () => send?.({
-      type: "deselectAuthMethod"
-    }),
-    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-back`
-  }, t("back label")), /* @__PURE__ */ React33.createElement(Action, {
+  })), /* @__PURE__ */ React31.createElement(Actions, null, /* @__PURE__ */ React31.createElement(Action, {
     variant: "primary",
-    disabled,
-    onClick: () => onDisplayNameConfirm?.(inputValue),
+    disabled: disabled || inputValue.trim().length === 0,
+    onClick: handleConfirm,
     "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-continue`
-  }, t("continue label"))));
+  }, pending ? t("continue label") : t("pending label"))));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAccepted.tsx
-import React34, { cloneElement as cloneElement3 } from "react";
-import { useTranslation as useTranslation19 } from "@dxos/react-ui";
+import React32, { cloneElement as cloneElement3 } from "react";
+import { useTranslation as useTranslation18 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
-import React35, { useState as useState11, useEffect as useEffect5, cloneElement as cloneElement4 } from "react";
+import React33, { useState as useState9, useEffect as useEffect5, cloneElement as cloneElement4 } from "react";
 import { log as log10 } from "@dxos/log";
-import { useTranslation as useTranslation20 } from "@dxos/react-ui";
+import { useTranslation as useTranslation19 } 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 {
@@ -3023,8 +2908,8 @@ var invitationCodeFromUrl = (text) => {
 var InvitationInput = (props) => {
   const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } = props;
   const disabled = !active;
-  const { t } = useTranslation20("os");
-  const [inputValue, setInputValue] = useState11(unredeemedCode ?? "");
+  const { t } = useTranslation19("os");
+  const [inputValue, setInputValue] = useState9(unredeemedCode ?? "");
   useEffect5(() => {
     unredeemedCode && setInputValue(unredeemedCode ?? "");
   }, [
@@ -3042,7 +2927,7 @@ var InvitationInput = (props) => {
       }
     });
   };
-  const exitAction = /* @__PURE__ */ React35.createElement(Action, {
+  const exitAction = /* @__PURE__ */ React33.createElement(Action, {
     variant: "ghost",
     disabled,
     ...onExit ? {
@@ -3052,20 +2937,19 @@ var InvitationInput = (props) => {
     },
     "data-testid": "join-exit"
   }, t("cancel label"));
-  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"
-  }, /* @__PURE__ */ React35.createElement(Input, {
-    label: /* @__PURE__ */ React35.createElement(StepHeading, null, t("invitation input label")),
-    // TODO(burdon): Translation.
-    placeholder: "Type an invitation code",
+  }, /* @__PURE__ */ React33.createElement(Input, {
+    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t("invitation input label")),
+    placeholder: t("invitation input placeholder"),
     disabled,
     value: inputValue,
     onChange: ({ target: { value } }) => setInputValue(value),
     "data-autofocus": `inputting${Kind}InvitationCode`,
     "data-testid": `${Kind.toLowerCase()}-invitation-input`,
     onKeyUp: ({ key }) => key === "Enter" && handleNext()
-  })), /* @__PURE__ */ React35.createElement(Actions, null, Kind === "Halo" ? null : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React35.createElement(Action, {
+  })), /* @__PURE__ */ React33.createElement(Actions, null, Kind === "Halo" ? null : exitActionParent ? /* @__PURE__ */ cloneElement4(exitActionParent, {}, exitAction) : doneActionParent ? /* @__PURE__ */ cloneElement4(doneActionParent, {}, exitAction) : exitAction, /* @__PURE__ */ React33.createElement(Action, {
     variant: "primary",
     disabled: disabled || inputValue.trim().length === 0,
     onClick: handleNext,
@@ -3074,8 +2958,8 @@ var InvitationInput = (props) => {
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationRescuer.tsx
-import React36 from "react";
-import { useTranslation as useTranslation21 } from "@dxos/react-ui";
+import React34 from "react";
+import { useTranslation as useTranslation20 } 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
@@ -3087,14 +2971,14 @@ var InvitationActions = ({
   Kind,
   failReason
 }) => {
-  const { t } = useTranslation21("os");
+  const { t } = useTranslation20("os");
   if (failReason) {
-    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
+    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StepHeading, {
       className: descriptionText10
-    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React36.createElement("div", {
+    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React34.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
+    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
       disabled: !active,
       onClick: () => send({
         type: `reset${Kind}Invitation`
@@ -3102,16 +2986,16 @@ var InvitationActions = ({
       "data-testid": "invitation-rescuer-reset"
     }, t("reset label"))));
   } else {
-    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
+    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StepHeading, {
       className: descriptionText10
-    }, t("connecting status label")), /* @__PURE__ */ React36.createElement("div", {
+    }, t("connecting status label")), /* @__PURE__ */ React34.createElement("div", {
       role: "none",
       className: "grow"
-    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
+    }), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
       disabled: true,
       classNames: "order-2",
       "data-testid": "next"
-    }, t("next label")), /* @__PURE__ */ React36.createElement(Action, {
+    }, t("next label")), /* @__PURE__ */ React34.createElement(Action, {
       disabled: !active,
       onClick: onInvitationCancel,
       "data-testid": "invitation-rescuer-cancel"
@@ -3120,52 +3004,52 @@ var InvitationActions = ({
 };
 var InvitationRescuer = (props) => {
   const { Kind, invitationState, active, send } = props;
-  const { t } = useTranslation21("os");
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", {
+  const { t } = useTranslation20("os");
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
-  }, /* @__PURE__ */ React36.createElement(StepHeading, {
+  }, /* @__PURE__ */ React34.createElement(StepHeading, {
     className: descriptionText10
-  }, "There was a problem joining the space")), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
+  }, "There was a problem joining the space")), /* @__PURE__ */ React34.createElement(Actions, null, /* @__PURE__ */ React34.createElement(Action, {
     disabled: !active,
     "data-testid": "invitation-rescuer-blank-reset",
     onClick: () => send({
       type: `reset${Kind}Invitation`
     })
-  }, t("reset label")))) : /* @__PURE__ */ React36.createElement(InvitationActions, props));
+  }, t("reset label")))) : /* @__PURE__ */ React34.createElement(InvitationActions, props));
 };
 
 // packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
-import React37, { useState as useState12 } from "react";
+import React35, { useState as useState10 } from "react";
 import { Invitation as Invitation6 } from "@dxos/react-client/invitations";
-import { Input as Input3, useTranslation as useTranslation22 } from "@dxos/react-ui";
+import { Input as Input3, useTranslation as useTranslation21 } 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 } = useTranslation22("os");
+  const { t } = useTranslation21("os");
   const invitationType = Kind.toLowerCase();
-  const [authCode, setAuthCode] = useState12("");
+  const [authCode, setAuthCode] = useState10("");
   const onChange = ({ target: { value } }) => {
     setAuthCode(value);
     if (value.length === pinLength) {
       document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`)?.focus();
     }
   };
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("div", {
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center gap-4"
-  }, /* @__PURE__ */ React37.createElement(Input3.Root, failed && {
+  }, /* @__PURE__ */ React35.createElement(Input3.Root, failed && {
     validationValence: "error"
-  }, /* @__PURE__ */ React37.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React35.createElement(Input3.Label, {
     asChild: true
-  }, authMethod === Invitation6.AuthMethod.SHARED_SECRET ? /* @__PURE__ */ React37.createElement(StepHeading, null, t("auth code input label")) : /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(StepHeading, {
+  }, 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, {
     className: descriptionText11
-  }, t("authenticating label")), /* @__PURE__ */ React37.createElement("div", {
+  }, t("authenticating label")), /* @__PURE__ */ React35.createElement("div", {
     role: "none",
     className: "grow"
-  }))), authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React37.createElement(Input3.PinInput, {
+  }))), authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React35.createElement(Input3.PinInput, {
     disabled,
     length: pinLength,
     onChange,
@@ -3176,18 +3060,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__ */ React37.createElement(Input3.DescriptionAndValidation, {
+  }), failed && /* @__PURE__ */ React35.createElement(Input3.DescriptionAndValidation, {
     classNames: "text-center"
-  }, /* @__PURE__ */ React37.createElement(Input3.Validation, null, t("failed to authenticate message")))), invitationId && authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Label, null, t("auth other device emoji message")), /* @__PURE__ */ React37.createElement("div", {
+  }, /* @__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", {
     className: "flex justify-center"
-  }, /* @__PURE__ */ React37.createElement(Emoji, {
+  }, /* @__PURE__ */ React35.createElement(Emoji, {
     text: hexToEmoji5(invitationId)
-  })))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(Action, {
+  })))), /* @__PURE__ */ React35.createElement(Actions, null, /* @__PURE__ */ React35.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => onInvitationCancel?.(),
     "data-testid": `${invitationType}-invitation-authenticator-cancel`
-  }, t("cancel label")), /* @__PURE__ */ React37.createElement(Action, {
+  }, t("cancel label")), /* @__PURE__ */ React35.createElement(Action, {
     variant: "primary",
     disabled,
     onClick: () => onInvitationAuthenticate?.(authCode),
@@ -3249,46 +3133,46 @@ var JoinPanelImpl = (props) => {
     IdentityInput: IdentityInputComponent = IdentityInput,
     ConfirmReset: ConfirmResetComponent = ConfirmReset
   } = props;
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ React38.createElement(JoinHeading, {
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ React36.createElement(JoinHeading, {
     titleId,
     mode,
     onExit,
     exitActionParent
-  }), /* @__PURE__ */ React38.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React36.createElement(Viewport.Root, {
     focusManaged: true,
     activeView
-  }, /* @__PURE__ */ React38.createElement(Viewport.Views, null, /* @__PURE__ */ React38.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React36.createElement(Viewport.Views, null, /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "addition method chooser"
-  }, /* @__PURE__ */ React38.createElement(AdditionMethodChooser, {
+  }, /* @__PURE__ */ React36.createElement(AdditionMethodChooser, {
     send,
     active: activeView === "addition method chooser"
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "reset storage confirmation"
-  }, /* @__PURE__ */ React38.createElement(ConfirmResetComponent, {
+  }, /* @__PURE__ */ React36.createElement(ConfirmResetComponent, {
     send,
     active: activeView === "reset storage confirmation",
     onCancel: onCancelResetStorage,
     onConfirm: onConfirmResetStorage
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "create identity input"
-  }, /* @__PURE__ */ React38.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
     send,
     method: "create identity",
     active: activeView === "create identity input"
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "recover identity input"
-  }, /* @__PURE__ */ React38.createElement(IdentityInputComponent, {
+  }, /* @__PURE__ */ React36.createElement(IdentityInputComponent, {
     send,
     method: "recover identity",
     active: activeView === "recover identity input"
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation input"
-  }, /* @__PURE__ */ React38.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation input",
@@ -3298,20 +3182,20 @@ var JoinPanelImpl = (props) => {
     ...succeededKeys?.Halo && {
       succeededKeys: succeededKeys.Halo
     }
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation rescuer"
-  }, /* @__PURE__ */ React38.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
     send,
     Kind: "Halo",
     active: activeView === "halo invitation rescuer",
     invitationState: invitationStates?.Halo,
     onInvitationCancel: onHaloInvitationCancel,
     failReason: failReasons?.Halo
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "halo invitation authenticator"
-  }, /* @__PURE__ */ React38.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
     send,
     Kind: "Halo",
     invitationId: invitationIds?.Halo,
@@ -3322,19 +3206,19 @@ var JoinPanelImpl = (props) => {
     ...failed.has("Halo") && {
       failed: true
     }
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "identity added"
-  }, /* @__PURE__ */ React38.createElement(IdentityAdded, {
+  }, /* @__PURE__ */ React36.createElement(IdentityAdded, {
     send,
     mode,
     active: activeView === "identity added",
     doneActionParent,
     onDone: onHaloDone
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation input"
-  }, /* @__PURE__ */ React38.createElement(InvitationInput, {
+  }, /* @__PURE__ */ React36.createElement(InvitationInput, {
     send,
     Kind: "Space",
     active: activeView === "space invitation input",
@@ -3346,20 +3230,20 @@ var JoinPanelImpl = (props) => {
     },
     onExit,
     exitActionParent
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation rescuer"
-  }, /* @__PURE__ */ React38.createElement(InvitationRescuer, {
+  }, /* @__PURE__ */ React36.createElement(InvitationRescuer, {
     send,
     Kind: "Space",
     active: activeView === "space invitation rescuer",
     invitationState: invitationStates?.Space,
     onInvitationCancel: onSpaceInvitationCancel,
     failReason: failReasons?.Space
-  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React36.createElement(Viewport.View, {
     classNames: stepStyles,
     id: "space invitation authenticator"
-  }, /* @__PURE__ */ React38.createElement(InvitationAuthenticator, {
+  }, /* @__PURE__ */ React36.createElement(InvitationAuthenticator, {
     send,
     Kind: "Space",
     invitationId: invitationIds?.Space,
@@ -3609,9 +3493,9 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
   ]);
   const onHaloDone = useCallback6(() => {
     propsOnDone?.({
-      identityKey: joinState.context.halo.invitation?.identityKey ?? null,
+      identityKey: joinState.context.identity?.identityKey ?? joinState.context.halo.invitation?.identityKey ?? null,
       swarmKey: joinState.context.halo.invitation?.swarmKey ?? null,
-      spaceKey: joinState.context.halo.invitation?.spaceKey ?? null,
+      spaceKey: joinState.context.identity?.spaceKey ?? joinState.context.halo.invitation?.spaceKey ?? null,
       target: joinState.context.halo.invitation?.target ?? null
     });
   }, [
@@ -3637,7 +3521,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
     client,
     joinSend
   ]);
-  return /* @__PURE__ */ React38.createElement(JoinPanelImpl, {
+  return /* @__PURE__ */ React36.createElement(JoinPanelImpl, {
     titleId,
     mode,
     send: joinSend,
@@ -3680,10 +3564,10 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
 
 // packages/sdk/shell/src/panels/SpacePanel/SpacePanel.tsx
 import { Planet } from "@phosphor-icons/react";
-import React40, { useEffect as useEffect7, useMemo as useMemo5 } from "react";
+import React38, { 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 useTranslation24 } from "@dxos/react-ui";
+import { useId as useId9, useTranslation as useTranslation23 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts
 import { useMachine as useMachine3 } from "@xstate/react";
@@ -3749,13 +3633,13 @@ var useSpaceMachine = (options) => {
 
 // packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx
 import { Placeholder as Placeholder2, UserPlus, UsersThree } from "@phosphor-icons/react";
-import React39, { useCallback as useCallback7, useState as useState13 } from "react";
+import React37, { useCallback as useCallback7, useState as useState11 } 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 useTranslation23 } from "@dxos/react-ui";
-import { descriptionText as descriptionText12, mx as mx24 } from "@dxos/react-ui-theme";
+import { ScrollArea, useTranslation as useTranslation22 } from "@dxos/react-ui";
+import { descriptionText as descriptionText12, mx as mx23 } 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) => {
@@ -3775,7 +3659,7 @@ var handleInvitationEvent = (invitation, subscription) => {
 };
 var SpaceManager = (props) => {
   const { space, target } = props;
-  const { t } = useTranslation23("os");
+  const { t } = useTranslation22("os");
   const config = useConfig();
   const invitations = useSpaceInvitations2(space?.key);
   const inviteActions = {
@@ -3820,7 +3704,7 @@ var SpaceManager = (props) => {
       ])
     }
   };
-  return /* @__PURE__ */ React39.createElement(SpaceManagerImpl, {
+  return /* @__PURE__ */ React37.createElement(SpaceManagerImpl, {
     ...props,
     invitations,
     inviteActions
@@ -3829,7 +3713,7 @@ var SpaceManager = (props) => {
 var headingFragment = "pis-3 pie-1 plb-1 mbe-1 font-medium";
 var SpaceManagerImpl = (props) => {
   const { active, space, createInvitationUrl, send, inviteActions: propsInviteActions, invitations, showInactiveInvitations, SpaceMemberList: SpaceMemberListComponent = SpaceMemberList, InvitationList: InvitationListComponent = InvitationList } = props;
-  const { t } = useTranslation23("os");
+  const { t } = useTranslation22("os");
   const inviteActions = propsInviteActions ?? {
     noopInvite: {
       label: t("create space invitation label"),
@@ -3839,7 +3723,7 @@ var SpaceManagerImpl = (props) => {
       }
     }
   };
-  const [activeAction, setInternalActiveAction] = useState13(localStorage.getItem(activeActionKey) ?? "inviteMany");
+  const [activeAction, setInternalActiveAction] = useState11(localStorage.getItem(activeActionKey) ?? "inviteMany");
   const setActiveAction = (nextAction) => {
     setInternalActiveAction(nextAction);
     localStorage.setItem(activeActionKey, nextAction);
@@ -3847,26 +3731,26 @@ var SpaceManagerImpl = (props) => {
   const visibleInvitations = showInactiveInvitations ? invitations : invitations?.filter((invitation) => ![
     Invitation8.State.CANCELLED
   ].includes(invitation.get().state));
-  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
     classNames: "grow shrink basis-28 -mli-2"
-  }, /* @__PURE__ */ React39.createElement(ScrollArea.Viewport, {
+  }, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
     classNames: "is-full pie-2"
-  }, !!visibleInvitations?.length && /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement("h3", {
-    className: mx24(headingFragment, descriptionText12)
-  }, t("invitation list heading")), /* @__PURE__ */ React39.createElement(InvitationListComponent, {
+  }, !!visibleInvitations?.length && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("h3", {
+    className: mx23(headingFragment, descriptionText12)
+  }, t("invitation list heading")), /* @__PURE__ */ React37.createElement(InvitationListComponent, {
     className: "mb-2",
     send,
     invitations: visibleInvitations ?? [],
     onClickRemove: (invitation) => invitation.cancel(),
     createInvitationUrl
-  }), /* @__PURE__ */ React39.createElement("h3", {
-    className: mx24(headingFragment, descriptionText12, "mbs-2")
-  }, t("space member list heading"))), /* @__PURE__ */ React39.createElement(SpaceMemberListComponent, {
+  }), /* @__PURE__ */ React37.createElement("h3", {
+    className: mx23(headingFragment, descriptionText12, "mbs-2")
+  }, t("space member list heading"))), /* @__PURE__ */ React37.createElement(SpaceMemberListComponent, {
     spaceKey: space.key,
     includeSelf: true
-  })), /* @__PURE__ */ React39.createElement(ScrollArea.Scrollbar, {
+  })), /* @__PURE__ */ React37.createElement(ScrollArea.Scrollbar, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React39.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React39.createElement(Actions, null, /* @__PURE__ */ React39.createElement(BifurcatedAction, {
+  }, /* @__PURE__ */ React37.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(BifurcatedAction, {
     disabled: !active,
     actions: inviteActions,
     activeAction,
@@ -3878,45 +3762,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 } = useTranslation24("os");
+  const { t } = useTranslation23("os");
   const name = space.properties.name;
-  return /* @__PURE__ */ React40.createElement(Heading, {
+  return /* @__PURE__ */ React38.createElement(Heading, {
     titleId,
     title: t("space panel heading"),
-    corner: /* @__PURE__ */ React40.createElement(CloseButton, {
+    corner: /* @__PURE__ */ React38.createElement(CloseButton, {
       "data-testid": "identity-panel-done",
       onDone
     })
-  }, /* @__PURE__ */ React40.createElement("div", {
+  }, /* @__PURE__ */ React38.createElement("div", {
     role: "none",
     className: "flex gap-4 items-center justify-center mlb-4"
-  }, /* @__PURE__ */ React40.createElement(Planet, {
+  }, /* @__PURE__ */ React38.createElement(Planet, {
     size: 32,
     weight: "light"
-  }), /* @__PURE__ */ React40.createElement("div", {
+  }), /* @__PURE__ */ React38.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__ */ React40.createElement(React40.Fragment, null, !hideHeading && /* @__PURE__ */ React40.createElement(SpacePanelHeading, {
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, !hideHeading && /* @__PURE__ */ React38.createElement(SpacePanelHeading, {
     ...rest,
     titleId,
     space
-  }), /* @__PURE__ */ React40.createElement(Viewport.Root, {
+  }), /* @__PURE__ */ React38.createElement(Viewport.Root, {
     activeView
-  }, /* @__PURE__ */ React40.createElement(Viewport.Views, null, /* @__PURE__ */ React40.createElement(Viewport.View, {
+  }, /* @__PURE__ */ React38.createElement(Viewport.Views, null, /* @__PURE__ */ React38.createElement(Viewport.View, {
     id: "space manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React40.createElement(SpaceManagerComponent, {
+  }, /* @__PURE__ */ React38.createElement(SpaceManagerComponent, {
     active: activeView === "space manager",
     space,
     target,
     ...rest
-  })), /* @__PURE__ */ React40.createElement(Viewport.View, {
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
     id: "space invitation manager",
     classNames: stepStyles
-  }, /* @__PURE__ */ React40.createElement(InvitationManagerComponent, {
+  }, /* @__PURE__ */ React38.createElement(InvitationManagerComponent, {
     active: activeView === "space invitation manager",
     ...rest,
     invitationUrl: props.invitationUrl
@@ -3924,7 +3808,7 @@ var SpacePanelImpl = (props) => {
 };
 var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
   const invitationStatus = useInvitationStatus3(invitation);
-  return /* @__PURE__ */ React40.createElement(SpacePanelImpl, {
+  return /* @__PURE__ */ React38.createElement(SpacePanelImpl, {
     ...props,
     ...invitationStatus,
     invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
@@ -3971,24 +3855,24 @@ var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code,
   };
   return spaceState.context.invitation ? (
     // TODO(wittjosiah): Unused? Remove?
-    /* @__PURE__ */ React40.createElement(SpacePanelWithInvitationImpl, {
+    /* @__PURE__ */ React38.createElement(SpacePanelWithInvitationImpl, {
       ...implProps,
       invitation: spaceState.context.invitation
     })
-  ) : /* @__PURE__ */ React40.createElement(SpacePanelImpl, implProps);
+  ) : /* @__PURE__ */ React38.createElement(SpacePanelImpl, implProps);
 };
 
 // packages/sdk/shell/src/panels/StatusPanel/StatusPanel.tsx
-import React41 from "react";
-import { Status, useTranslation as useTranslation25 } from "@dxos/react-ui";
+import React39 from "react";
+import { Status, useTranslation as useTranslation24 } from "@dxos/react-ui";
 var StatusPanel = ({ titleId }) => {
-  const { t } = useTranslation25("os");
-  return /* @__PURE__ */ React41.createElement("div", {
+  const { t } = useTranslation24("os");
+  return /* @__PURE__ */ React39.createElement("div", {
     className: "grid place-items-center p-2 gap-2"
-  }, /* @__PURE__ */ React41.createElement("p", {
+  }, /* @__PURE__ */ React39.createElement("p", {
     id: titleId,
     className: "font-medium text-center"
-  }, t("resetting message")), /* @__PURE__ */ React41.createElement(Status, {
+  }, t("resetting message")), /* @__PURE__ */ React39.createElement(Status, {
     indeterminate: true
   }, t("resetting message")));
 };
@@ -3996,96 +3880,96 @@ var StatusPanel = ({ titleId }) => {
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 var IdentityDialog = (props) => {
   const titleId = useId10("identityDialog__title", props.title);
-  return /* @__PURE__ */ React42.createElement(Dialog.Root, {
+  return /* @__PURE__ */ React40.createElement(Dialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || props.onDone?.()
-  }, /* @__PURE__ */ React42.createElement(Dialog.Portal, null, /* @__PURE__ */ React42.createElement(Dialog.Overlay, null, /* @__PURE__ */ React42.createElement(Dialog.Content, {
+  }, /* @__PURE__ */ React40.createElement(Dialog.Portal, null, /* @__PURE__ */ React40.createElement(Dialog.Overlay, null, /* @__PURE__ */ React40.createElement(Dialog.Content, {
     "aria-labelledby": titleId,
     onOpenAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React42.createElement(ClipboardProvider, null, /* @__PURE__ */ React42.createElement(IdentityPanel, {
+  }, /* @__PURE__ */ React40.createElement(Clipboard3.Provider, null, /* @__PURE__ */ React40.createElement(IdentityPanel, {
     ...props,
     titleId,
-    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog.Close, {
+    doneActionParent: /* @__PURE__ */ React40.createElement(Dialog.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
-import React43 from "react";
+import React41 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__ */ React43.createElement(AlertDialog.Root, {
+  return /* @__PURE__ */ React41.createElement(AlertDialog.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))
-  }, /* @__PURE__ */ React43.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React43.createElement(AlertDialog.Overlay, {
+  }, /* @__PURE__ */ React41.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React41.createElement(AlertDialog.Overlay, {
     classNames: "backdrop-blur",
     ...height && {
       style: {
         blockSize: `${height}px`
       }
     }
-  }, /* @__PURE__ */ React43.createElement(AlertDialog.Content, {
+  }, /* @__PURE__ */ React41.createElement(AlertDialog.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React43.createElement(JoinPanel, {
+  }, /* @__PURE__ */ React41.createElement(JoinPanel, {
     ...joinPanelProps,
     titleId,
-    exitActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Cancel, {
+    exitActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Cancel, {
       asChild: true
     }),
-    doneActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Action, {
+    doneActionParent: /* @__PURE__ */ React41.createElement(AlertDialog.Action, {
       asChild: true
     })
   })))));
 };
 
 // packages/sdk/shell/src/composites/Shell/run-shell.tsx
-import React47, { StrictMode } from "react";
+import React45, { 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 Button11, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip7, useTranslation as useTranslation26 } from "@dxos/react-ui";
+import { Button as Button10, Clipboard as Clipboard5, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip6, useTranslation as useTranslation25 } 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 React46, { useEffect as useEffect8, useState as useState14 } from "react";
+import React44, { useEffect as useEffect8, useState as useState12 } 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 React44 from "react";
-import { Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
+import React42 from "react";
+import { Clipboard as Clipboard4, Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
 var SpaceDialog = (spacePanelProps) => {
   const titleId = useId12("spaceDialog__title");
-  return /* @__PURE__ */ React44.createElement(Dialog2.Root, {
+  return /* @__PURE__ */ React42.createElement(Dialog2.Root, {
     defaultOpen: true,
     onOpenChange: (open) => open || spacePanelProps.onDone?.()
-  }, /* @__PURE__ */ React44.createElement(Dialog2.Portal, null, /* @__PURE__ */ React44.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React44.createElement(Dialog2.Content, {
+  }, /* @__PURE__ */ React42.createElement(Dialog2.Portal, null, /* @__PURE__ */ React42.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React42.createElement(Dialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React44.createElement(ClipboardProvider, null, /* @__PURE__ */ React44.createElement(SpacePanel, {
+  }, /* @__PURE__ */ React42.createElement(Clipboard4.Provider, null, /* @__PURE__ */ React42.createElement(SpacePanel, {
     ...spacePanelProps,
     titleId,
-    doneActionParent: /* @__PURE__ */ React44.createElement(Dialog2.Close, {
+    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog2.Close, {
       asChild: true
     })
   }))))));
 };
 
 // packages/sdk/shell/src/composites/StatusDialog/StatusDialog.tsx
-import React45 from "react";
+import React43 from "react";
 import { AlertDialog as AlertDialog2, useId as useId13 } from "@dxos/react-ui";
 var StatusDialog = () => {
   const titleId = useId13("statusDialog__title");
-  return /* @__PURE__ */ React45.createElement(AlertDialog2.Root, {
+  return /* @__PURE__ */ React43.createElement(AlertDialog2.Root, {
     open: true
-  }, /* @__PURE__ */ React45.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Content, {
+  }, /* @__PURE__ */ React43.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React43.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React43.createElement(AlertDialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React45.createElement(StatusPanel, {
+  }, /* @__PURE__ */ React43.createElement(StatusPanel, {
     titleId
   })))));
 };
@@ -4094,14 +3978,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] = useState14({
+  const [{ layout, invitationCode, spaceKey, spaceId, target }, setLayout] = useState12({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey,
     spaceId: runtime.spaceId,
     target: runtime.target
   });
-  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState14({
+  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState12({
     invitationUrl: runtime.invitationUrl,
     deviceInvitationParam: runtime.deviceInvitationParam,
     spaceInvitationParam: runtime.spaceInvitationParam
@@ -4153,11 +4037,11 @@ var Shell = ({ runtime }) => {
   ]);
   switch (layout) {
     case ShellLayout.STATUS:
-      return /* @__PURE__ */ React46.createElement(StatusDialog, null);
+      return /* @__PURE__ */ React44.createElement(StatusDialog, null);
     case ShellLayout.INITIALIZE_IDENTITY:
     case ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION:
     case ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY:
-      return /* @__PURE__ */ React46.createElement(JoinDialog, {
+      return /* @__PURE__ */ React44.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,
@@ -4177,7 +4061,7 @@ var Shell = ({ runtime }) => {
     case ShellLayout.IDENTITY:
     case ShellLayout.SHARE_IDENTITY:
     case ShellLayout.EDIT_PROFILE:
-      return /* @__PURE__ */ React46.createElement(IdentityDialog, {
+      return /* @__PURE__ */ React44.createElement(IdentityDialog, {
         createInvitationUrl: createDeviceInvitationUrl,
         onResetStorage: async () => {
           runtime.setLayout({
@@ -4223,7 +4107,7 @@ var Shell = ({ runtime }) => {
         initialDisposition: layout === ShellLayout.SHARE_IDENTITY ? "manage-device-invitation" : "default"
       });
     case ShellLayout.SPACE:
-      return space ? /* @__PURE__ */ React46.createElement(SpaceDialog, {
+      return space ? /* @__PURE__ */ React44.createElement(SpaceDialog, {
         space,
         target,
         createInvitationUrl: createSpaceInvitationUrl,
@@ -4238,7 +4122,7 @@ var Shell = ({ runtime }) => {
         }
       }) : null;
     case ShellLayout.JOIN_SPACE:
-      return /* @__PURE__ */ React46.createElement(JoinDialog, {
+      return /* @__PURE__ */ React44.createElement(JoinDialog, {
         initialInvitationCode: invitationCode,
         onDone: async (result) => {
           blurActiveElement();
@@ -4270,7 +4154,7 @@ var Shell = ({ runtime }) => {
 // packages/sdk/shell/src/composites/Shell/shell-runtime.ts
 import { Event } from "@dxos/async";
 import { appServiceBundle, shellServiceBundle } from "@dxos/client-protocol";
-import { invariant as invariant4 } from "@dxos/invariant";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { ShellLayout as ShellLayout2 } from "@dxos/protocols/proto/dxos/iframe";
 import { createProtoRpcPeer } from "@dxos/rpc";
 var __dxlog_file15 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/shell-runtime.ts";
@@ -4329,7 +4213,7 @@ var ShellRuntimeImpl = class {
     });
   }
   async setAppContext(context) {
-    invariant4(this._appRpc, "runtime not open", {
+    invariant3(this._appRpc, "runtime not open", {
       F: __dxlog_file15,
       L: 83,
       S: this,
@@ -4392,22 +4276,26 @@ var os = {
   "identity radio group title": "Select an identity you\u2019ve associated with this device already",
   "add identity label": "Add",
   "continue label": "Continue",
+  "pending label": "Pending",
   "back label": "Back",
   "next label": "Next",
   "close label": "Close",
   "auth choices label": "Choose an identity",
   "create identity label": "Create an identity",
   "create identity description": "Create a new identity.",
-  "recover identity label": "Use a seed phrase",
-  "recover identity description": "Enter your seed phrase to log in manually.",
+  "recover identity label": "Use a recovery code",
+  "recover identity description": "Enter your recovery code to log in manually.",
+  "invitation input placeholder": "Invitation code",
+  "recovery code placeholder": "Recovery code",
+  "display name placeholder": "Display name",
   "join identity label": "Use another device",
   "join identity description": "Add this device to an identity you\u2019re already logged into on another device.",
   "deselect identity label": "Back to identities",
   "addition method chooser title": "An identity is required to continue",
   "new identity input label": "Set display name",
-  "recover identity input label": "Type or paste your seed phrase",
+  "recover identity input label": "Type or paste your recovery code",
   "failed to create identity message": "Failed to create an identity.",
-  "failed to recover identity message": "Failed to recover an identity from the provided seed phrase.",
+  "failed to recover identity message": "Failed to recover an identity from the provided recovery code.",
   "failed to authenticate message": "Incorrect code.",
   "identity added label": "Created identity & added to this device:",
   "join space as identity heading": "<part>as </part><part><icon/><label>{{labelValue}}</label></part>",
@@ -4541,25 +4429,25 @@ var runShell = async (config = new Config()) => {
     const services = new ClientServicesProxy(createIFramePort({
       channel: DEFAULT_CLIENT_CHANNEL
     }));
-    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React45.createElement(StrictMode, null, /* @__PURE__ */ React45.createElement(ThemeProvider, {
       tx: defaultTx,
       resourceExtensions: [
         osTranslations
       ]
-    }, /* @__PURE__ */ React47.createElement(ClientProvider, {
+    }, /* @__PURE__ */ React45.createElement(ClientProvider, {
       config,
       services,
       noBanner: true
-    }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip7.Provider, null, /* @__PURE__ */ React47.createElement(AgentHostingProvider, null, /* @__PURE__ */ React47.createElement(Shell, {
+    }, /* @__PURE__ */ React45.createElement(Clipboard5.Provider, null, /* @__PURE__ */ React45.createElement(Tooltip6.Provider, null, /* @__PURE__ */ React45.createElement(AgentHostingProvider, null, /* @__PURE__ */ React45.createElement(Shell, {
       runtime
     }))))))));
   } catch {
-    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React45.createElement(StrictMode, null, /* @__PURE__ */ React45.createElement(ThemeProvider, {
       tx: defaultTx,
       resourceExtensions: [
         osTranslations
       ]
-    }, /* @__PURE__ */ React47.createElement(Fallback, {
+    }, /* @__PURE__ */ React45.createElement(Fallback, {
       onClose: () => runtime.setAppContext({
         display: ShellDisplay2.NONE
       })
@@ -4567,24 +4455,24 @@ var runShell = async (config = new Config()) => {
   }
 };
 var Fallback = ({ onClose }) => {
-  const { t } = useTranslation26("os");
-  return /* @__PURE__ */ React47.createElement(Dialog3.Root, {
+  const { t } = useTranslation25("os");
+  return /* @__PURE__ */ React45.createElement(Dialog3.Root, {
     modal: true,
     open: true,
     onOpenChange: () => onClose?.()
-  }, /* @__PURE__ */ React47.createElement(Dialog3.Overlay, null, /* @__PURE__ */ React47.createElement(Dialog3.Content, null, /* @__PURE__ */ React47.createElement(Dialog3.Title, null, t("shell fallback title")), /* @__PURE__ */ React47.createElement(Dialog3.Close, {
+  }, /* @__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, {
     asChild: true,
     onClick: () => onClose?.()
-  }, /* @__PURE__ */ React47.createElement(Button11, {
+  }, /* @__PURE__ */ React45.createElement(Button10, {
     variant: "primary"
   }, t("close label"))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
-import React48, { createContext as createContext2, useCallback as useCallback8, useContext as useContext2, useEffect as useEffect9, useMemo as useMemo6, useState as useState15 } from "react";
+import React46, { createContext, useCallback as useCallback8, useContext, useEffect as useEffect9, useMemo as useMemo6, useState as useState13 } 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 mx25 } from "@dxos/react-ui-theme";
+import { mx as mx24 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/composites/Shell/memory-shell-runtime.ts
 import { Event as Event2 } from "@dxos/async";
@@ -4637,10 +4525,10 @@ var MemoryShellRuntime = class {
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
-var ShellContext = /* @__PURE__ */ createContext2({});
+var ShellContext = /* @__PURE__ */ createContext({});
 var useShell = () => {
   const client = useClient10();
-  const { runtime, setDisplay } = useContext2(ShellContext);
+  const { runtime, setDisplay } = useContext(ShellContext);
   const setLayout = async (layout, options) => {
     if (runtime) {
       if (layout === ShellLayout4.DEFAULT) {
@@ -4662,7 +4550,7 @@ var useShell = () => {
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
   const client = useClient10();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState15(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay3.FULLSCREEN : ShellDisplay3.NONE);
+  const [display, setDisplay] = useState13(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay3.FULLSCREEN : ShellDisplay3.NONE);
   const shellRuntime = useMemo6(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
       return;
@@ -4732,11 +4620,11 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
   }, [
     shellRuntime
   ]);
-  return /* @__PURE__ */ React48.createElement(React48.Fragment, null, shellRuntime && /* @__PURE__ */ React48.createElement("div", {
-    className: mx25(display === ShellDisplay3.NONE ? "hidden" : "")
-  }, /* @__PURE__ */ React48.createElement(Shell, {
+  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, shellRuntime && /* @__PURE__ */ React46.createElement("div", {
+    className: mx24(display === ShellDisplay3.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ React46.createElement(Shell, {
     runtime: shellRuntime
-  })), /* @__PURE__ */ React48.createElement(ShellContext.Provider, {
+  })), /* @__PURE__ */ React46.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,
       setDisplay
@@ -4750,14 +4638,10 @@ export {
   AuthCode,
   BifurcatedAction,
   Centered,
-  ClipboardContext,
-  ClipboardProvider,
   CloseButton,
   CompoundButton,
   ConfirmReset,
   ConfirmResetImpl,
-  CopyButton,
-  CopyButtonIconOnly,
   DeviceList,
   Emoji,
   EmojiPickerBlock,
@@ -4813,7 +4697,6 @@ export {
   successBgColor,
   successStrokeColor,
   successTextColor,
-  useClipboardContext,
   useShell,
   useViewportContext
 };