@dxos/shell 0.6.14-main.f49f251 → 0.6.14-staging.9e90729

package/dist/lib/node-esm/react.mjs

@@ -0,0 +1,4809 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  __export
+} from "./chunk-HSLMI22Q.mjs";
+
+// packages/sdk/shell/src/components/AgentConfig.tsx
+import { ArrowsClockwise, Database, Plus, Power } from "@phosphor-icons/react";
+import React from "react";
+import { Avatar, Button, Link, Tooltip, Trans, useTranslation } from "@dxos/react-ui";
+import { descriptionText, getSize, mx, valenceColorText } from "@dxos/react-ui-theme";
+var AgentConfig = ({ agentStatus, validationMessage, onAgentDestroy, onAgentCreate, onAgentRefresh }) => {
+  const { t } = useTranslation("os");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
+    className: mx(descriptionText, "text-center mbs-4")
+  }, t("agent heading")), validationMessage && /* @__PURE__ */ React.createElement("p", {
+    role: "alert",
+    className: mx(valenceColorText("error"), "mlb-2")
+  }, validationMessage), agentStatus === "created" || agentStatus === "creating" || agentStatus === "getting" || agentStatus === "destroying" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "mlb-2 flex gap-2 items-center",
+    "aria-describedby": "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ React.createElement(Avatar.Root, {
+    status: agentStatus === "created" ? "warning" : "inactive",
+    variant: "square"
+  }, /* @__PURE__ */ React.createElement(Avatar.Frame, {
+    classNames: "place-self-center"
+  }, /* @__PURE__ */ React.createElement(Database, {
+    weight: "duotone",
+    width: 24,
+    height: 24,
+    x: 8,
+    y: 8,
+    ...agentStatus !== "created" && {
+      className: "opacity-50"
+    }
+  })), /* @__PURE__ */ React.createElement(Avatar.Label, {
+    classNames: "flex-1 text-sm truncate"
+  }, t(agentStatus === "created" ? "agent requested label" : agentStatus === "creating" ? "creating agent label" : agentStatus === "destroying" ? "destroying agent label" : "getting agent label"))), agentStatus === "created" && /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": "agent.destroy",
+    onClick: onAgentDestroy
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("destroy agent label")), /* @__PURE__ */ React.createElement(Power, {
+    className: getSize(5)
+  }))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("destroy agent label"))))), agentStatus === "created" && /* @__PURE__ */ React.createElement("p", {
+    id: "devices-panel.create-agent.description",
+    className: mx(descriptionText, "mlb-2")
+  }, t("agent requested description"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    classNames: "mlb-2 is-full justify-start gap-2 !pis-0 !pie-3",
+    "data-testid": agentStatus === "creatable" ? "devices-panel.create-agent" : "devices-panel.agent-error",
+    onClick: agentStatus === "creatable" ? onAgentCreate : onAgentRefresh,
+    "aria-describedby": "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "img",
+    className: mx(getSize(8), "m-1 rounded-sm bg-input grid place-items-center")
+  }, agentStatus === "creatable" ? /* @__PURE__ */ React.createElement(Plus, {
+    weight: "light",
+    className: getSize(6)
+  }) : /* @__PURE__ */ React.createElement(ArrowsClockwise, {
+    weight: "light",
+    className: getSize(6)
+  })), /* @__PURE__ */ React.createElement("span", {
+    className: "grow font-medium text-start"
+  }, t(agentStatus === "creatable" ? "create agent label" : ""))), agentStatus === "creatable" && /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "space-y-2",
+    id: "devices-panel.create-agent.description"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: descriptionText
+  }, /* @__PURE__ */ React.createElement(Trans, {
+    t,
+    i18nKey: "create agent clickwrap",
+    components: {
+      tosLink: /* @__PURE__ */ React.createElement(Link, {
+        target: "_blank",
+        rel: "noreferrer"
+      })
+    }
+  })), /* @__PURE__ */ React.createElement("p", {
+    className: descriptionText
+  }, 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 { useId, useThemeContext, useElevationContext } from "@dxos/react-ui";
+import { descriptionText as descriptionText2, descriptionTextPrimary, mx as mx3 } 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");
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const styleProps = {
+    ...buttonProps,
+    variant,
+    elevation,
+    textWrap: true
+  };
+  const buttonClassName = tx("button.root", "button button--compound", styleProps, "flex items-center gap-4 plb-2.5", slots.root?.className);
+  return /* @__PURE__ */ React4.createElement("button", {
+    ...buttonProps,
+    ...slots.root,
+    className: buttonClassName,
+    "aria-labelledby": labelId,
+    ...description && {
+      "aria-describedby": descriptionId
+    }
+  }, before && /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: "grow-0"
+  }, before), /* @__PURE__ */ React4.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", {
+    ...slots.label,
+    id: labelId,
+    className: mx3(slots.label?.className)
+  }, children), description && /* @__PURE__ */ React4.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", {
+    role: "none",
+    className: "grow-0"
+  }, after));
+};
+
+// packages/sdk/shell/src/components/EmojiPicker.tsx
+import emojiData from "@emoji-mart/data";
+import EmojiMart from "@emoji-mart/react";
+import { ArrowCounterClockwise, CaretDown, UserCircle } from "@phosphor-icons/react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import 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";
+var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
+  const { t } = useTranslation3("os");
+  const { themeMode } = useThemeContext2();
+  const [_emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState3(false);
+  const suppressNextTooltip = useRef(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState3(false);
+  return /* @__PURE__ */ React5.createElement(Tooltip3.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React5.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: (nextOpen) => {
+      setEmojiPickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Toolbar.Button, {
+    classNames: [
+      "gap-2 text-2xl plb-1",
+      classNames
+    ],
+    disabled
+  }, /* @__PURE__ */ React5.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, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("select emoji label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null))), /* @__PURE__ */ React5.createElement(Popover.Content, {
+    side: "bottom",
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+        suppressNextTooltip.current = true;
+      }
+    }
+  }, /* @__PURE__ */ React5.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true,
+    theme: themeMode
+  }), /* @__PURE__ */ React5.createElement(Popover.Arrow, null))));
+};
+var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
+  const { t } = useTranslation3("os");
+  const [isMd] = useMediaQuery("md", {
+    ssr: false
+  });
+  const [emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState3(false);
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: setEmojiPickerOpen
+  }, /* @__PURE__ */ React5.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Button3, {
+    variant: "ghost",
+    classNames: "gap-2 text-2xl plb-1",
+    disabled
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, t("select emoji label")), /* @__PURE__ */ React5.createElement("span", {
+    className: "grow pis-14"
+  }, emojiValue), /* @__PURE__ */ React5.createElement(CaretDown, {
+    className: getSize3(4)
+  }))), /* @__PURE__ */ React5.createElement(Popover.Content, {
+    side: "right",
+    sideOffset: isMd ? 0 : -310,
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+      }
+    }
+  }, /* @__PURE__ */ React5.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true
+  }), /* @__PURE__ */ React5.createElement(Popover.Arrow, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Root, null, /* @__PURE__ */ React5.createElement(Tooltip3.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Button3, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ React5.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React5.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip3.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ React5.createElement(Tooltip3.Arrow, null)))));
+};
+
+// packages/sdk/shell/src/components/HuePicker.tsx
+import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check as Check2, 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";
+var HuePreview = ({ hue }) => {
+  const { tx } = useThemeContext3();
+  const size = 20;
+  return /* @__PURE__ */ React6.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`
+  }, /* @__PURE__ */ React6.createElement("rect", {
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    className: tx("hue.fill", "select--hue__preview", {
+      hue
+    })
+  }));
+};
+var hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
+var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
+  const { t } = useTranslation4("os");
+  const [hueValue, setHueValue] = useControllableState2({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  const [huePickerOpen, setHuePickerOpen] = useState4(false);
+  const suppressNextTooltip = useRef2(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
+  return /* @__PURE__ */ React6.createElement(Tooltip4.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: huePickerOpen,
+    onOpenChange: (nextOpen) => {
+      setHuePickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ React6.createElement(Tooltip4.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(Toolbar2.Button, {
+    classNames: mx4("gap-2 plb-1", classNames),
+    disabled
+  }, /* @__PURE__ */ React6.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, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("select hue label"), /* @__PURE__ */ React6.createElement(Tooltip4.Arrow, null))), /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
+    side: "bottom",
+    classNames: "!w-40"
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, {
+    classNames: "grid grid-cols-4"
+  }, hueTokens.map((hue2) => {
+    return /* @__PURE__ */ React6.createElement(DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2),
+      classNames: "px-0 py-2 items-center justify-center"
+    }, /* @__PURE__ */ React6.createElement(HuePreview, {
+      hue: hue2
+    }));
+  })))));
+};
+var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
+  const { t } = useTranslation4("os");
+  const [hueValue, setHueValue] = useControllableState2({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+    modal: false
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(Button4, {
+    variant: "ghost",
+    classNames: "gap-2 plb-1",
+    disabled
+  }, /* @__PURE__ */ React6.createElement("span", {
+    className: "sr-only"
+  }, t("select hue label")), /* @__PURE__ */ React6.createElement("div", {
+    role: "none",
+    className: "pis-14 grow flex items-center justify-center gap-2"
+  }, /* @__PURE__ */ React6.createElement(HuePreview, {
+    hue: hueValue
+  }), /* @__PURE__ */ React6.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React6.createElement(CaretDown2, {
+    className: getSize4(4)
+  }))), /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
+    side: "right"
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
+    return /* @__PURE__ */ React6.createElement(DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2)
+    }, /* @__PURE__ */ React6.createElement(HuePreview, {
+      hue: hue2
+    }), /* @__PURE__ */ React6.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, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(Button4, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ React6.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ React6.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React6.createElement(Tooltip4.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip4.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ React6.createElement(Tooltip4.Arrow, null)))));
+};
+
+// packages/sdk/shell/src/components/IdentityList/IdentityListItem.tsx
+import React7, { 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 { 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, {
+    ...props,
+    classNames: mx5("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, {
+    status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
+    labelId,
+    hue: identity.profile?.data?.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React7.createElement(Avatar2.Frame, {
+    classNames: "place-self-center"
+  }, /* @__PURE__ */ React7.createElement(Avatar2.Fallback, {
+    text: identity.profile?.data?.emoji || fallbackValue.emoji
+  })), /* @__PURE__ */ React7.createElement(Avatar2.Label, {
+    classNames: "text-sm truncate pli-2"
+  }, displayName)));
+});
+
+// packages/sdk/shell/src/components/IdentityList/SpaceMemberList.tsx
+import React8, { 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";
+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, {
+    members,
+    onSelect
+  });
+};
+var SpaceMemberListImpl = ({ members, onSelect }) => {
+  const { t } = useTranslation5("os");
+  const visibleMembers = members.filter((member) => member.identity);
+  return visibleMembers.length > 0 ? /* @__PURE__ */ React8.createElement(List, {
+    classNames: "flex flex-col gap-2",
+    "data-testid": "space-members-list"
+  }, visibleMembers.map((member) => {
+    return /* @__PURE__ */ React8.createElement(IdentityListItem, {
+      key: member.identity.identityKey.toHex(),
+      identity: member.identity,
+      presence: member.presence,
+      onClick: onSelect && (() => onSelect(member))
+    });
+  })) : /* @__PURE__ */ React8.createElement("div", {
+    role: "none",
+    className: "grow flex items-center p-2"
+  }, /* @__PURE__ */ React8.createElement("p", {
+    className: mx6(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";
+
+// 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 { 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, Tooltip as Tooltip5 } from "@dxos/react-ui";
+import { getSize as getSize5 } from "@dxos/react-ui-theme";
+import { keyToFallback as keyToFallback2 } from "@dxos/util";
+var iconProps = {
+  weight: "duotone",
+  width: 24,
+  height: 24,
+  x: 8,
+  y: 8
+};
+var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, classNames, connectionState, onAgentDestroy, ...props }, forwardedRef) => {
+  const { t } = useTranslation6("os");
+  const fallbackValue = keyToFallback2(device.deviceKey);
+  const labelId = useId3("identityListItem__label");
+  const displayName = device.profile ? t("device name placeholder", {
+    os: device.profile.os,
+    platform: device.profile.platform
+  }) : generateName2(device.deviceKey.toHex());
+  const isCurrent = device.kind === DeviceKind.CURRENT;
+  return /* @__PURE__ */ React9.createElement(ListItem2.Root, {
+    ...props,
+    classNames: [
+      "flex gap-2 items-center mlb-2",
+      classNames
+    ],
+    "data-testid": `device-list-item${isCurrent ? "-current" : ""}`,
+    labelId,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React9.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, {
+    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) : [
+    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, {
+    text: fallbackValue.emoji
+  })), /* @__PURE__ */ React9.createElement(Avatar3.Label, {
+    classNames: "flex-1 text-sm truncate"
+  }, displayName), isCurrent && /* @__PURE__ */ React9.createElement(Tag, {
+    color: "primary"
+  }, t("current device tag label")), device.profile?.type === DeviceType.AGENT_MANAGED ? /* @__PURE__ */ React9.createElement(Tooltip5.Root, null, /* @__PURE__ */ React9.createElement(Tooltip5.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(Button5, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": "agent.destroy",
+    onClick: onAgentDestroy
+  }, /* @__PURE__ */ React9.createElement("span", {
+    className: "sr-only"
+  }, t("destroy agent label")), /* @__PURE__ */ React9.createElement(Power2, {
+    className: getSize5(5)
+  }))), /* @__PURE__ */ React9.createElement(Tooltip5.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip5.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("destroy agent label")))) : device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React9.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(Button5, {
+    variant: "ghost",
+    classNames: "pli-0 is-[--rail-action] bs-[--rail-action]",
+    "data-testid": `device-list-item${isCurrent ? "-current" : ""}.options`
+  }, /* @__PURE__ */ React9.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, {
+    "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, {
+    "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, {
+    "data-testid": "device-list-item-current.reset",
+    onClick: onClickReset
+  }, /* @__PURE__ */ React9.createElement(Power2, {
+    className: getSize5(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(React10.Fragment, null, /* @__PURE__ */ React10.createElement("h2", {
+    className: mx7(descriptionText4, "text-center mbs-4")
+  }, t("devices heading")), devices.length > 0 && /* @__PURE__ */ React10.createElement(List2, null, devices.map((device) => {
+    return /* @__PURE__ */ React10.createElement(DeviceListItem, {
+      key: device.deviceKey.toHex(),
+      device,
+      onClickEdit: () => onClickEdit?.(device),
+      onClickReset,
+      onClickRecover,
+      onClickJoinExisting,
+      connectionState,
+      onAgentDestroy
+    });
+  })), /* @__PURE__ */ React10.createElement(Button6, {
+    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", {
+    role: "img",
+    className: mx7(getSize6(8), "m-1 rounded-sm bg-input grid place-items-center")
+  }, /* @__PURE__ */ React10.createElement(Plus2, {
+    weight: "light",
+    className: getSize6(6)
+  })), /* @__PURE__ */ React10.createElement("span", {
+    className: "grow font-medium text-start"
+  }, t("choose add device label")), /* @__PURE__ */ React10.createElement(CaretRight, {
+    weight: "bold",
+    className: getSize6(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 { 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 Tooltip6 } from "@dxos/react-ui";
+import { focusRing, getSize as getSize7, mx as mx9 } 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";
+var AuthCode = (props) => {
+  const { code, large, classNames } = props;
+  const l = code?.length ?? 0;
+  const left = code?.slice(0, l / 2);
+  const right = code?.slice(l / 2);
+  const codeRef = useRef3(null);
+  const handleClick = () => {
+    if (codeRef.current) {
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      const range = document.createRange();
+      range.selectNodeContents(codeRef.current);
+      selection?.addRange(range);
+    }
+    void navigator.clipboard.writeText(code ?? "");
+  };
+  return /* @__PURE__ */ React11.createElement("span", {
+    className: mx8(large ? "text-6xl" : "text-2xl", "font-mono pli-2.5 rounded cursor-pointer", classNames),
+    onClick: handleClick,
+    ref: codeRef
+  }, /* @__PURE__ */ React11.createElement("span", {
+    className: "mie-[0.4em]"
+  }, left), /* @__PURE__ */ React11.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, {
+    ...props,
+    invitationStatus
+  });
+};
+var avatarProps = {
+  size: 10,
+  variant: "circle"
+};
+var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
+  const { tx } = useThemeContext4();
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.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", {
+    role: "none",
+    className: tx("avatar.ring", "avatar__ring", {
+      ...avatarProps,
+      status,
+      animation
+    }),
+    style: {
+      animationDelay: "400ms"
+    }
+  })), /* @__PURE__ */ React12.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", {
+    role: "none",
+    className: tx("avatar.ring", "avatar__ring", {
+      ...avatarProps,
+      status,
+      animation
+    }),
+    style: {
+      animationDelay: "200ms"
+    }
+  })));
+};
+var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
+  const { t } = useTranslation8("os");
+  const { cancel, status: invitationStatus, invitationCode, authCode, multiUse, shareable } = propsInvitationStatus;
+  const isCancellable = !([
+    Invitation.State.ERROR,
+    Invitation.State.TIMEOUT,
+    Invitation.State.CANCELLED
+  ].indexOf(invitationStatus) >= 0);
+  const showShare = shareable && (multiUse || [
+    Invitation.State.INIT,
+    Invitation.State.CONNECTING,
+    Invitation.State.CONNECTED
+  ].indexOf(invitationStatus) >= 0);
+  const showAuthCode = invitationStatus === Invitation.State.READY_FOR_AUTHENTICATION;
+  const handleClickRemove = useCallback2(() => onClickRemove?.(invitation), [
+    invitation,
+    onClickRemove
+  ]);
+  const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
+  const invitationId = invitation?.get().invitationId;
+  const invitationHasLifetime = invitation?.get().lifetime;
+  const invitationTimeLeft = invitation?.expiry ? formatDistanceToNow(invitation?.expiry, {
+    addSuffix: true
+  }) : void 0;
+  const avatarAnimation = [
+    Invitation.State.INIT,
+    Invitation.State.CONNECTING,
+    Invitation.State.CONNECTED,
+    Invitation.State.READY_FOR_AUTHENTICATION,
+    Invitation.State.AUTHENTICATING
+  ].includes(invitationStatus) ? "pulse" : "none";
+  const avatarError = [
+    Invitation.State.ERROR,
+    Invitation.State.TIMEOUT,
+    Invitation.State.CANCELLED
+  ].includes(invitationStatus);
+  const avatarGreen = [
+    Invitation.State.CONNECTED,
+    Invitation.State.READY_FOR_AUTHENTICATION,
+    Invitation.State.AUTHENTICATING,
+    Invitation.State.SUCCESS
+  ].includes(invitationStatus);
+  const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
+  return /* @__PURE__ */ React12.createElement(ListItem3.Root, {
+    id: invitationCode,
+    ...props,
+    classNames: [
+      "flex gap-2 pis-3 pie-1 items-center relative",
+      props.classNames
+    ]
+  }, /* @__PURE__ */ React12.createElement(ListItem3.Heading, {
+    classNames: "sr-only"
+  }, t(multiUse ? "invite many list item label" : "invite one list item label")), multiUse && /* @__PURE__ */ React12.createElement(AvatarStackEffect, {
+    status: avatarStatus,
+    animation: avatarAnimation,
+    reverseEffects
+  }), /* @__PURE__ */ React12.createElement(Tooltip6.Root, null, /* @__PURE__ */ React12.createElement(Avatar4.Root, {
+    ...avatarProps,
+    animation: avatarAnimation,
+    status: avatarStatus
+  }, /* @__PURE__ */ React12.createElement(Tooltip6.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React12.createElement(Avatar4.Frame, {
+    tabIndex: 0,
+    classNames: [
+      focusRing,
+      "relative rounded-full place-self-center"
+    ]
+  }, /* @__PURE__ */ React12.createElement(Avatar4.Fallback, {
+    text: hexToEmoji(invitationId)
+  })))), /* @__PURE__ */ React12.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip6.Content, {
+    side: "left",
+    classNames: "z-[70]"
+  }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React12.createElement(Tooltip6.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React12.createElement(Tooltip6.Root, null, /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Tooltip6.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React12.createElement(Button7, {
+    variant: "ghost",
+    classNames: "grow justify-start font-medium",
+    onClick: () => send({
+      type: "selectInvitation",
+      invitation
+    }),
+    "data-testid": "show-qrcode"
+  }, /* @__PURE__ */ React12.createElement("span", null, t("open share panel label")))), /* @__PURE__ */ React12.createElement(CopyButtonIconOnly, {
+    variant: "ghost",
+    value: invitationUrl
+  })), /* @__PURE__ */ React12.createElement(Tooltip6.Portal, null, /* @__PURE__ */ React12.createElement(Tooltip6.Content, {
+    side: "left",
+    classNames: "z-[70]"
+  }, invitationHasLifetime && /* @__PURE__ */ React12.createElement("span", null, "Expires ", invitationTimeLeft)))) : showAuthCode ? /* @__PURE__ */ React12.createElement(AuthCode, {
+    code: authCode,
+    classNames: "grow"
+  }) : invitationStatus === Invitation.State.CONNECTING ? /* @__PURE__ */ React12.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Connecting...") : invitationStatus === Invitation.State.AUTHENTICATING ? /* @__PURE__ */ React12.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Authenticating...") : invitationStatus === Invitation.State.ERROR || invitationStatus === Invitation.State.TIMEOUT ? /* @__PURE__ */ React12.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Failed") : invitationStatus === Invitation.State.CANCELLED ? /* @__PURE__ */ React12.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Cancelled") : invitationStatus === Invitation.State.SUCCESS ? /* @__PURE__ */ React12.createElement("span", {
+    className: "pli-2 grow truncate"
+  }, "User joined") : !shareable ? /* @__PURE__ */ React12.createElement("span", {
+    className: "pli-2 grow text-neutral-500"
+  }, "Pending Invitation") : /* @__PURE__ */ React12.createElement("span", {
+    className: "grow"
+  }, " "), isCancellable ? /* @__PURE__ */ React12.createElement(Button7, {
+    variant: "ghost",
+    classNames: "flex gap-1 pli-0",
+    onClick: cancel,
+    "data-testid": "cancel-invitation"
+  }, /* @__PURE__ */ React12.createElement("span", {
+    className: "sr-only"
+  }, t("cancel invitation label")), /* @__PURE__ */ React12.createElement(X, {
+    className: getSize7(4)
+  })) : /* @__PURE__ */ React12.createElement(Button7, {
+    variant: "ghost",
+    classNames: "flex gap-1 pli-0",
+    onClick: handleClickRemove,
+    "data-testid": "remove-invitation"
+  }, /* @__PURE__ */ React12.createElement("span", {
+    className: "sr-only"
+  }, t("remove invitation label")), /* @__PURE__ */ React12.createElement(X, {
+    className: getSize7(4)
+  })));
+};
+
+// packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
+import React14, { useCallback as useCallback3 } from "react";
+import { useSpace, useSpaceInvitations } from "@dxos/react-client/echo";
+
+// packages/sdk/shell/src/components/InvitationList/InvitationList.tsx
+import React13 from "react";
+import { List as List3 } from "@dxos/react-ui";
+import { mx as mx10 } 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)
+  }, invitations.map((invitation) => {
+    const value = invitation.get().invitationId;
+    return /* @__PURE__ */ React13.createElement(Item, {
+      key: value,
+      send,
+      invitation,
+      ...invitationProps
+    });
+  }));
+};
+
+// packages/sdk/shell/src/components/InvitationList/InvitationListContainer.tsx
+var InvitationListContainer = ({ spaceKey, createInvitationUrl, send }) => {
+  const space = useSpace(spaceKey);
+  const invitations = useSpaceInvitations(spaceKey);
+  const handleClickRemove = useCallback3((invitation) => {
+    void invitation.cancel();
+  }, [
+    space
+  ]);
+  return /* @__PURE__ */ React14.createElement(InvitationList, {
+    invitations,
+    onClickRemove: handleClickRemove,
+    createInvitationUrl,
+    send
+  });
+};
+
+// packages/sdk/shell/src/components/Panel/Action.tsx
+import { CaretDown as CaretDown3, Check as Check3, 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";
+var defaultActions = {
+  noopAction: {
+    label: "No-op",
+    description: "",
+    icon: Placeholder,
+    onClick: () => {
+    }
+  }
+};
+var BifurcatedAction = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  const { classNames, variant, isFull = true, actions = defaultActions, activeAction: propsActiveAction, onChangeActiveAction, defaultActiveAction, ...rest } = props;
+  const [activeActionKey2 = Object.keys(actions)[0], setActiveAction] = useControllableState3({
+    prop: propsActiveAction,
+    onChange: onChangeActiveAction,
+    defaultProp: defaultActiveAction
+  });
+  const activeAction = actions[activeActionKey2] ?? {};
+  const { t } = useTranslation9("os");
+  return /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: mx11("mbs-2 flex gap-px items-center", isFull && "is-full")
+  }, /* @__PURE__ */ React15.createElement(Button8, {
+    ...rest,
+    classNames: [
+      "bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none",
+      classNames
+    ],
+    ref: forwardedRef,
+    variant,
+    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, {
+    asChild: true
+  }, /* @__PURE__ */ React15.createElement(Button8, {
+    classNames: [
+      "bs-11 flex-none rounded-is-none",
+      classNames
+    ]
+  }, /* @__PURE__ */ React15.createElement("span", {
+    className: "sr-only"
+  }, t("invite options label")), /* @__PURE__ */ React15.createElement(CaretDown3, {
+    className: getSize8(4)
+  }))), /* @__PURE__ */ React15.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React15.createElement(DropdownMenu3.Viewport, null, Object.entries(actions).map(([id, action]) => {
+    return /* @__PURE__ */ React15.createElement(DropdownMenu3.CheckboxItem, {
+      key: id,
+      "aria-labelledby": `${id}__label`,
+      "aria-describedby": `${id}__description`,
+      checked: activeActionKey2 === id,
+      onCheckedChange: (checked) => checked && setActiveAction(id),
+      classNames: "gap-2"
+    }, action.icon && /* @__PURE__ */ React15.createElement(action.icon, {
+      className: getSize8(5)
+    }), /* @__PURE__ */ React15.createElement("div", {
+      role: "none",
+      className: "flex-1 min-is-0 space-b-1"
+    }, /* @__PURE__ */ React15.createElement("p", {
+      id: `${id}__label`
+    }, action.label), action.description && /* @__PURE__ */ React15.createElement("p", {
+      id: `${id}__description`,
+      className: descriptionText5
+    }, action.description)), /* @__PURE__ */ React15.createElement(DropdownMenu3.ItemIndicator, {
+      asChild: true
+    }, /* @__PURE__ */ React15.createElement(Check3, {
+      weight: "bold",
+      className: getSize8(4)
+    })));
+  })), /* @__PURE__ */ React15.createElement(DropdownMenu3.Arrow, null))));
+});
+var Action = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  const { children, classNames, variant, isFull = true, ...rest } = props;
+  return /* @__PURE__ */ React15.createElement(Button8, {
+    ...rest,
+    classNames: [
+      isFull && "is-full",
+      "bs-11 flex gap-2 mbs-2",
+      classNames
+    ],
+    ref: forwardedRef,
+    variant
+  }, children);
+});
+
+// packages/sdk/shell/src/components/Panel/Actions.tsx
+import React16, { forwardRef as forwardRef4 } from "react";
+import { mx as mx12 } from "@dxos/react-ui-theme";
+var Actions = /* @__PURE__ */ forwardRef4(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React16.createElement("div", {
+    ...props,
+    className: mx12("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";
+var CloseButton = ({ onDone, ...props }) => {
+  const { t } = useTranslation10("os");
+  return /* @__PURE__ */ React17.createElement(Button9, {
+    variant: "ghost",
+    classNames: mx13("plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    onClick: () => onDone?.(),
+    ...props
+  }, /* @__PURE__ */ React17.createElement(X2, {
+    weight: "bold",
+    className: getSize9(4)
+  }), /* @__PURE__ */ React17.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";
+var Emoji = ({ text, className }) => {
+  const size = 14;
+  return /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    className: mx14(getSize10(size), "rounded relative pointer-events-none", className)
+  }, /* @__PURE__ */ React18.createElement("svg", {
+    viewBox: `0 0 ${size * 4} ${size * 4}`,
+    width: size * 4,
+    height: size * 4
+  }, /* @__PURE__ */ React18.createElement("text", {
+    x: "50%",
+    y: "50%",
+    textAnchor: "middle",
+    dominantBaseline: "middle",
+    baselineShift: "-0.25rem",
+    fontSize: "2.25rem"
+  }, text)));
+};
+var Centered = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ React18.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";
+var Heading = /* @__PURE__ */ forwardRef5(({ titleId, title, titleSrOnly, children, corner }, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    className: "pbe-2 relative",
+    ref: forwardedRef
+  }, corner, /* @__PURE__ */ React19.createElement("h1", {
+    ...!titleSrOnly && {
+      id: titleId
+    },
+    className: mx15(descriptionText6, "text-center mlb-2", titleSrOnly && "invisible")
+  }, title), titleSrOnly && /* @__PURE__ */ React19.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";
+var Label = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ React20.createElement("span", {
+    className: mx16(descriptionText7, "text-center mli-6 whitespace-normal")
+  }, children);
+};
+
+// packages/sdk/shell/src/components/Panel/Input.tsx
+import React21 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, {
+    ...props,
+    classNames: "plb-3 mbs-2 text-center"
+  }), /* @__PURE__ */ React21.createElement(UiInput.DescriptionAndValidation, null, validationMessage && /* @__PURE__ */ React21.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";
+var StepHeading = /* @__PURE__ */ forwardRef6(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React22.createElement("h2", {
+    ...props,
+    className: mx17("font-normal text-sm mbe-4 mli-1 text-center", className),
+    ref: forwardedRef
+  }, children);
+});
+
+// packages/sdk/shell/src/components/Viewport/Viewport.tsx
+import { useFocusFinders } from "@fluentui/react-tabster";
+import { createContextScope } from "@radix-ui/react-context";
+import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
+import React23, { forwardRef as forwardRef7, useEffect } from "react";
+import { useForwardedRef } from "@dxos/react-ui";
+import { mx as mx18 } from "@dxos/react-ui-theme";
+var VIEWPORT_NAME = "Viewport";
+var VIEWS_NAME = "ViewportViews";
+var VIEW_NAME = "ViewportView";
+var [createViewportContext, createViewportScope] = createContextScope(VIEWPORT_NAME, []);
+var [ViewportProvider, useViewportContext] = createViewportContext(VIEWPORT_NAME);
+var ViewportRoot = ({ __viewportScope, classNames, children, defaultActiveView, activeView: propsActiveView, focusManaged = false, onActiveViewChange, ...props }) => {
+  const [activeView = "never", setActiveView] = useControllableState4({
+    prop: propsActiveView,
+    defaultProp: defaultActiveView,
+    onChange: onActiveViewChange
+  });
+  return /* @__PURE__ */ React23.createElement(ViewportProvider, {
+    focusManaged,
+    activeView,
+    setActiveView,
+    scope: __viewportScope
+  }, /* @__PURE__ */ React23.createElement("div", {
+    role: "region",
+    "aria-live": "polite",
+    ...props,
+    className: mx18("is-full overflow-hidden", classNames)
+  }, children));
+};
+ViewportRoot.displayName = VIEWPORT_NAME;
+var ViewportViews = ({ classNames, children, ...props }) => {
+  const size = {
+    inlineSize: `${Math.ceil(children.length) * 100}%`
+  };
+  return /* @__PURE__ */ React23.createElement("div", {
+    role: "none",
+    style: size,
+    ...props,
+    className: mx18("flex", classNames)
+  }, children);
+};
+ViewportViews.displayName = VIEWS_NAME;
+var ViewportView = /* @__PURE__ */ forwardRef7(({ __viewportScope, classNames, children, id, ...props }, forwardedRef) => {
+  const { activeView, focusManaged } = useViewportContext(VIEW_NAME, __viewportScope);
+  const isActive = id === activeView;
+  const ref = useForwardedRef(forwardedRef);
+  const { findFirstFocusable } = useFocusFinders();
+  useEffect(() => {
+    if (!focusManaged && isActive && document.body.hasAttribute("data-is-keyboard") && ref.current) {
+      findFirstFocusable(ref.current)?.focus();
+    }
+  }, [
+    focusManaged,
+    ref.current,
+    isActive
+  ]);
+  return /* @__PURE__ */ React23.createElement("section", {
+    ...props,
+    ...!isActive && {
+      "aria-hidden": true
+    },
+    className: mx18("min-is-0 flex-1 flex flex-col", isActive ? "order-2" : "order-4 invisible", classNames),
+    ref
+  }, children);
+});
+ViewportView.displayName = VIEW_NAME;
+var Viewport = {
+  Root: ViewportRoot,
+  Views: ViewportViews,
+  View: ViewportView
+};
+
+// packages/sdk/shell/src/components/SpaceListItem.tsx
+import React24, { 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 { 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"),
+    onClick: () => onClick?.(),
+    ref,
+    "data-testid": "space-list-item"
+  }, /* @__PURE__ */ React24.createElement(Avatar5.Root, {
+    labelId
+  }, /* @__PURE__ */ React24.createElement(Avatar5.Frame, null, /* @__PURE__ */ React24.createElement(Avatar5.Fallback, {
+    text: fallbackValue
+  })), /* @__PURE__ */ React24.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";
+
+// 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 { generateName as generateName3 } from "@dxos/display-name";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { log as log6 } 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 Tooltip7, useId as useId6, useTranslation as useTranslation14 } from "@dxos/react-ui";
+import { getSize as getSize13 } 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
+import { useMachine } from "@xstate/react";
+import { assign, createMachine } from "xstate";
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/identityMachine.ts";
+var identityMachine = createMachine({
+  id: "identity",
+  predictableActionArguments: true,
+  context: {
+    identity: null,
+    identitySubscribable: null
+  },
+  initial: "choosingAction",
+  invoke: {
+    src: (context) => context.identitySubscribable
+  },
+  states: {
+    unknown: {
+      always: [
+        {
+          cond: "initiallyManagingDeviceInvitation",
+          target: "managingDeviceInvitation",
+          actions: "log"
+        },
+        {
+          target: "choosingAction",
+          actions: "log"
+        }
+      ]
+    },
+    choosingAction: {},
+    managingDeviceInvitation: {},
+    confirmingResetStorage: {},
+    confirmingRecover: {},
+    confirmingJoinNewIdentity: {}
+  },
+  on: {
+    unchooseAction: {
+      target: ".choosingAction",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    deselectInvitation: {
+      target: ".choosingAction",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    selectInvitation: {
+      target: ".managingDeviceInvitation",
+      actions: [
+        "setInvitation",
+        "log"
+      ]
+    },
+    chooseJoinNewIdentity: {
+      target: ".confirmingJoinNewIdentity",
+      actions: "log"
+    },
+    chooseRecoverIdentity: {
+      target: ".confirmingRecover",
+      actions: "log"
+    },
+    chooseResetStorage: {
+      target: ".confirmingResetStorage",
+      actions: "log"
+    }
+  }
+}, {
+  guards: {
+    initiallyManagingDeviceInvitation: ({ initialDisposition }, _event) => initialDisposition === "manage-device-invitation"
+  },
+  actions: {
+    setIdentity: assign({
+      identity: (context, event) => event?.identity ?? null
+    }),
+    setInvitation: assign({
+      invitation: (context, event) => event?.invitation ?? null
+    }),
+    unsetInvitation: assign({
+      invitation: () => void 0
+    }),
+    log: (context, event) => {
+      log("[transition]", {
+        event,
+        context
+      }, {
+        F: __dxlog_file,
+        L: 98,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var useIdentityMachine = (client, options) => {
+  return useMachine(identityMachine, {
+    ...options,
+    context: {
+      ...options?.context,
+      identity: client.halo.identity.get(),
+      identitySubscribable: client.halo.identity.map((identity) => ({
+        type: "setIdentity",
+        identity
+      }))
+    }
+  });
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
+import React25 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";
+import { Invitation as Invitation2, InvitationEncoder } from "@dxos/react-client/invitations";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx";
+var IdentityActionChooser = (props) => {
+  const { send } = props;
+  const client = useClient2();
+  const invitations = useHaloInvitations();
+  const createInvitation = () => {
+    invitations.forEach((invitation2) => invitation2.cancel());
+    const invitation = client.halo.share();
+    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+      const subscription = invitation.subscribe((invitation2) => {
+        const invitationCode = InvitationEncoder.encode(invitation2);
+        if (invitation2.state === Invitation2.State.CONNECTING) {
+          log2.info(JSON.stringify({
+            invitationCode,
+            authCode: invitation2.authCode
+          }), void 0, {
+            F: __dxlog_file2,
+            L: 29,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          subscription.unsubscribe();
+        }
+      });
+    }
+    send?.({
+      type: "selectInvitation",
+      invitation
+    });
+  };
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production";
+  return /* @__PURE__ */ React25.createElement(IdentityActionChooserImpl, {
+    ...props,
+    onClickAdd: createInvitation,
+    onClickJoinExisting: () => send?.({
+      type: "chooseJoinNewIdentity"
+    }),
+    onClickRecover: isProduction ? void 0 : () => send?.({
+      type: "chooseRecoverIdentity"
+    }),
+    onClickReset: () => send?.({
+      type: "chooseResetStorage"
+    })
+  });
+};
+var IdentityActionChooserImpl = ({ devices, connectionState, agentHostingEnabled, onClickAdd, onClickJoinExisting, onClickRecover, onClickReset, ...agentProps }) => {
+  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType2.AGENT_MANAGED);
+  return /* @__PURE__ */ React25.createElement("div", {
+    role: "none",
+    className: "bs-40 grow overflow-y-auto overflow-x-hidden"
+  }, /* @__PURE__ */ React25.createElement(DeviceList, {
+    devices,
+    connectionState,
+    onClickAdd,
+    onClickJoinExisting,
+    onClickRecover,
+    onClickReset,
+    onAgentDestroy: agentProps.onAgentDestroy
+  }), !managedDeviceAvailable && agentHostingEnabled && /* @__PURE__ */ React25.createElement(AgentConfig, agentProps));
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/steps/ProfileForm.tsx
+import React26, { useState as useState5 } from "react";
+import { log as log3 } from "@dxos/log";
+import { useTranslation as useTranslation11 } 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 { invariant } from "@dxos/invariant";
+import { QueryAgentStatusResponse } from "@dxos/protocols/proto/dxos/client/services";
+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 client = useClient3();
+  const agentHostingEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
+  const handleStatus = (status) => {
+    switch (status) {
+      case QueryAgentStatusResponse.AgentStatus.ACTIVE:
+      case QueryAgentStatusResponse.AgentStatus.INACTIVE:
+        setAgentStatus("created");
+        break;
+      case QueryAgentStatusResponse.AgentStatus.NOT_FOUND:
+        setAgentStatus("creatable");
+        break;
+      case QueryAgentStatusResponse.AgentStatus.UNKNOWN:
+        setAgentStatus("getting");
+        break;
+    }
+  };
+  useEffect2(() => {
+    const stream = client.services.services.EdgeAgentService?.queryAgentStatus();
+    stream?.subscribe(({ status }) => {
+      setLastReceivedStatus(status);
+      handleStatus(status);
+    });
+    return () => {
+      void stream?.close().catch(() => {
+      });
+    };
+  }, []);
+  const onAgentCreate = async () => {
+    invariant(identity, "Identity not found", {
+      F: __dxlog_file3,
+      L: 56,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    const service = client.services.services.EdgeAgentService;
+    if (!service) {
+      setAgentStatus("error");
+      setValidationMessage("Agent service not initialized.");
+      return;
+    }
+    if (!agentHostingEnabled) {
+      setAgentStatus("error");
+      setValidationMessage("Edge agents are disabled in config.");
+      return;
+    }
+    setAgentStatus("creating");
+    setValidationMessage("");
+    try {
+      await service.createAgent();
+      setAgentStatus("created");
+    } catch (err) {
+      setAgentStatus("error");
+      setValidationMessage(`Error creating an agent: ${err.message}`);
+    }
+  };
+  const onAgentDestroy = async () => {
+    setValidationMessage("Agents are non-destructible.");
+  };
+  const onAgentRefresh = async () => {
+    setValidationMessage("");
+    handleStatus(lastReceivedStatus);
+  };
+  return {
+    onAgentCreate,
+    onAgentDestroy,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled
+  };
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/useKubeAgentHandlers.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useState as useState7 } from "react";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { log as log4 } 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 agentHostingProviderClient = useAgentHostingClient();
+  const client = useClient4();
+  const updateAgentStatus = async () => {
+    if (agentHostingProviderClient) {
+      setAgentStatus("getting");
+      try {
+        const agentId = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? "never");
+        if (agentId) {
+          setAgentStatus("created");
+        } else {
+          setAgentStatus("creatable");
+        }
+      } catch (err) {
+        setAgentStatus("error");
+        setValidationMessage(`Couldn\u2019t check agent status: ${err.message}`);
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  const createAgent = async (invitationCode) => {
+    invariant2(identity, "Identity not found", {
+      F: __dxlog_file4,
+      L: 50,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    if (agentHostingProviderClient) {
+      setAgentStatus("creating");
+      setValidationMessage("");
+      try {
+        const agentId = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
+        if (agentId) {
+          setAgentStatus("created");
+        } else {
+          setAgentStatus("creatable");
+          setValidationMessage("Error creating agent.");
+        }
+      } catch (err) {
+        setValidationMessage(`Error creating agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  const destroyAgent = async () => {
+    invariant2(identity, "Identity not found", {
+      F: __dxlog_file4,
+      L: 73,
+      S: void 0,
+      A: [
+        "identity",
+        "'Identity not found'"
+      ]
+    });
+    if (agentHostingProviderClient) {
+      setAgentStatus("destroying");
+      setValidationMessage("");
+      try {
+        await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
+        setAgentStatus("creatable");
+      } catch (err) {
+        setValidationMessage(`Error destroying agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus("error");
+      setValidationMessage("No agent provider configured.");
+    }
+  };
+  useEffect3(() => {
+    void updateAgentStatus();
+  }, []);
+  const handleAgentCreate = useCallback4(async (invitation) => {
+    const invitationCode = InvitationEncoder2.encode(invitation);
+    if (invitation.state === Invitation3.State.CONNECTING) {
+      log4.info(JSON.stringify({
+        invitationCode,
+        authCode: invitation.authCode
+      }), void 0, {
+        F: __dxlog_file4,
+        L: 97,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return createAgent(invitationCode);
+    }
+  }, []);
+  const onAgentCreate = async () => {
+    invitations.forEach((invitation2) => invitation2.cancel());
+    const invitation = client.halo.share({
+      type: Invitation3.Type.INTERACTIVE,
+      authMethod: Invitation3.AuthMethod.NONE,
+      multiUse: true
+    });
+    invitation.subscribe(handleAgentCreate);
+  };
+  const onAgentRefresh = async () => {
+    setValidationMessage("");
+    await updateAgentStatus();
+  };
+  return {
+    onAgentCreate,
+    onAgentDestroy: destroyAgent,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled: !!agentHostingProviderClient
+  };
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts
+var useAgentHandlers = (params) => {
+  const client = useClient5();
+  if (client.config.values?.runtime?.client?.edgeFeatures?.agents) {
+    return useEdgeAgentHandlers(params);
+  } else {
+    return useKubeAgentHandlers(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 { 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 { hexToEmoji as hexToEmoji3 } from "@dxos/util";
+
+// packages/sdk/shell/src/util/invitationStatusValue.ts
+import { Invitation as Invitation4 } from "@dxos/react-client/invitations";
+var invitationStatusValue = /* @__PURE__ */ new Map([
+  [
+    Invitation4.State.ERROR,
+    -3
+  ],
+  [
+    Invitation4.State.TIMEOUT,
+    -2
+  ],
+  [
+    Invitation4.State.CANCELLED,
+    -1
+  ],
+  [
+    Invitation4.State.INIT,
+    0
+  ],
+  [
+    Invitation4.State.CONNECTING,
+    1
+  ],
+  [
+    Invitation4.State.CONNECTED,
+    2
+  ],
+  [
+    Invitation4.State.READY_FOR_AUTHENTICATION,
+    3
+  ],
+  [
+    Invitation4.State.AUTHENTICATING,
+    4
+  ],
+  [
+    Invitation4.State.SUCCESS,
+    5
+  ]
+]);
+
+// packages/sdk/shell/src/steps/InvitationManager.tsx
+var InvitationManagerView = ({ children, ...props }) => {
+  return /* @__PURE__ */ React27.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 qrLabel = useId5("invitation-manager__qr-code");
+  const statusValue = multiUse ? 0 : invitationStatusValue.get(status) ?? 0;
+  const showAuthCode = statusValue === 3;
+  const emoji = hexToEmoji3(id);
+  const activeView = useMemo2(() => {
+    if (multiUse) {
+      return "showing qr";
+    }
+    switch (true) {
+      case statusValue === 5:
+      case statusValue < 0:
+        return "showing final";
+      case statusValue === 3:
+        return "showing auth code";
+      default:
+        return "showing qr";
+    }
+  }, [
+    statusValue
+  ]);
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Viewport.Root, {
+    activeView,
+    classNames: "grow plb-1"
+  }, /* @__PURE__ */ React27.createElement(Viewport.Views, null, /* @__PURE__ */ React27.createElement(InvitationManagerView, {
+    id: "showing qr",
+    emoji
+  }, /* @__PURE__ */ React27.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", {
+    role: "none",
+    className: mx20(descriptionText8, "is-full max-is-[14rem] relative")
+  }, /* @__PURE__ */ React27.createElement(QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    className: mx20("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, {
+    text: emoji
+  }))), /* @__PURE__ */ React27.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr label")), /* @__PURE__ */ React27.createElement(CopyButton, {
+    variant: "ghost",
+    value: invitationUrl ?? "never"
+  })), /* @__PURE__ */ React27.createElement(InvitationManagerView, {
+    id: "showing auth code"
+  }, /* @__PURE__ */ React27.createElement(Label, null, t("auth code message")), /* @__PURE__ */ React27.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, {
+    text: emoji
+  })), /* @__PURE__ */ React27.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, {
+    classNames: "mbs-4"
+  }, /* @__PURE__ */ React27.createElement(Action, {
+    disabled: !active,
+    onClick: () => send?.({
+      type: "deselectInvitation"
+    })
+  }, t("back label"))));
+};
+
+// packages/sdk/shell/src/steps/ConfirmReset.tsx
+import { Warning } from "@phosphor-icons/react";
+import React28, { useState as useState8 } from "react";
+import { log as log5 } from "@dxos/log";
+import { Message, useTranslation as useTranslation13 } from "@dxos/react-ui";
+import { getSize as getSize12, mx as mx21 } 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 processReset = async () => {
+    setPending(true);
+    return onConfirm?.().then(() => setPending(false), (error) => {
+      log5.catch(error, void 0, {
+        F: __dxlog_file5,
+        L: 38,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setValidationMessage(t("failed to reset identity message"));
+      setPending(false);
+    });
+  };
+  return /* @__PURE__ */ React28.createElement(ConfirmResetImpl, {
+    disabled: !active,
+    pending,
+    validationMessage,
+    onConfirm: processReset,
+    onCancel,
+    mode
+  });
+};
+var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCancel, mode }) => {
+  const { t } = useTranslation13("os");
+  const confirmationValue = t("confirmation value");
+  const [inputValue, setInputValue] = useState8("");
+  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", {
+    role: "none",
+    className: "grow flex flex-col gap-2 justify-center"
+  }, /* @__PURE__ */ React28.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, {
+    validationMessage,
+    label: /* @__PURE__ */ React28.createElement(StepHeading, {
+      className: "text-start mlb-2"
+    }, t(mode === "join new identity" ? "join new identity input label" : mode === "recover" ? "recover reset input label" : "reset storage input label", {
+      confirmationValue
+    })),
+    disabled,
+    "data-testid": `${testIdAffix}.reset-identity-input`,
+    placeholder: t("confirmation placeholder", {
+      confirmationValue
+    }),
+    onChange: ({ target: { value } }) => setInputValue(value)
+  })), /* @__PURE__ */ React28.createElement(Actions, null, onCancel && /* @__PURE__ */ React28.createElement(Action, {
+    disabled,
+    onClick: onCancel,
+    "data-testid": `${testIdAffix}.reset-identity-cancel`
+  }, t("cancel label")), onConfirm && /* @__PURE__ */ React28.createElement(Action, {
+    variant: "destructive",
+    disabled: disabled || pending || inputValue !== confirmationValue,
+    onClick: onConfirm,
+    "data-testid": `${testIdAffix}.reset-identity-confirm`
+  }, pending ? t("reset in progress label") : t("reset device label"))));
+};
+
+// packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx";
+var viewStyles = "pbs-1 pbe-3 pli-3";
+var getHueValue = (identity) => identity?.profile?.data?.hue || hexToHue2(identity?.identityKey.toHex() ?? "0");
+var getEmojiValue = (identity) => identity?.profile?.data?.emoji || hexToEmoji4(identity?.identityKey.toHex() ?? "0");
+var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState }) => {
+  const client = useClient6();
+  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 identityHex = identity.identityKey.toHex();
+  const publicKeyCopied = textValue === identityHex;
+  const setEmoji = (nextEmoji) => {
+    setEmojiDirectly(nextEmoji);
+    void onUpdateProfile?.({
+      ...identity.profile,
+      data: {
+        ...identity.profile?.data,
+        emoji: nextEmoji
+      }
+    });
+  };
+  const setHue = (nextHue) => {
+    setHueDirectly(nextHue);
+    void onUpdateProfile?.({
+      ...identity.profile,
+      data: {
+        ...identity.profile?.data,
+        hue: nextHue
+      }
+    });
+  };
+  const handleRecoveryCode = async () => {
+    invariant3(client.services.services.IdentityService, "IdentityService not available", {
+      F: __dxlog_file6,
+      L: 76,
+      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;
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production";
+  return /* @__PURE__ */ React29.createElement(Heading, {
+    titleId,
+    title,
+    corner: /* @__PURE__ */ React29.createElement(CloseButton, {
+      onDone
+    })
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Root, {
+    size: 16,
+    variant: "circle",
+    status: isConnected ? "active" : "error",
+    hue: hue || fallbackValue.hue
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Root, {
+    classNames: "flex justify-center"
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Frame, {
+    classNames: "relative z-[2] -mli-4 chromatic-ignore"
+  }, /* @__PURE__ */ React29.createElement(Avatar6.Fallback, {
+    text: emoji || fallbackValue.emoji
+  }))), /* @__PURE__ */ React29.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, {
+    srOnly: true
+  }, t("display name input label")), /* @__PURE__ */ React29.createElement(Input2.TextInput, {
+    variant: "subdued",
+    "data-testid": "display-name-input",
+    placeholder: t("display name input placeholder"),
+    classNames: "mbs-2 text-center font-light text-xl",
+    value: displayName,
+    onChange: ({ target: { value } }) => setDisplayName(value),
+    onBlur: ({ target: { value } }) => onUpdateProfile?.({
+      ...identity.profile,
+      displayName: value
+    })
+  })), /* @__PURE__ */ React29.createElement(Toolbar3.Root, {
+    classNames: "flex justify-center items-center gap-1 pt-3"
+  }, /* @__PURE__ */ React29.createElement(EmojiPickerToolbarButton, {
+    emoji,
+    onChangeEmoji: setEmoji,
+    classNames: "bs-[--rail-action]"
+  }), /* @__PURE__ */ React29.createElement(HuePickerToolbarButton, {
+    hue,
+    onChangeHue: setHue,
+    classNames: "bs-[--rail-action]"
+  }), /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+    classNames: "bs-[--rail-action]",
+    "data-testid": "update-profile-form-copy-key",
+    onClick: () => setTextValue(identityHex)
+  }, /* @__PURE__ */ React29.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(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t(publicKeyCopied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React29.createElement(Tooltip7.Arrow, null)))), !isProduction && /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+    classNames: "bs-[--rail-action]",
+    onClick: handleRecoveryCode
+  }, /* @__PURE__ */ React29.createElement(FirstAidKit2, {
+    className: getSize13(5)
+  }))), /* @__PURE__ */ React29.createElement(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t("create recovery code label"), /* @__PURE__ */ React29.createElement(Tooltip7.Arrow, null)))), /* @__PURE__ */ React29.createElement(Tooltip7.Root, null, /* @__PURE__ */ React29.createElement(Tooltip7.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React29.createElement(Toolbar3.Button, {
+    classNames: [
+      "bs-[--rail-action]",
+      !isConnected && "text-error-500"
+    ],
+    onClick: () => onChangeConnectionState?.(isConnected ? ConnectionState2.OFFLINE : ConnectionState2.ONLINE)
+  }, /* @__PURE__ */ React29.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(Tooltip7.Portal, null, /* @__PURE__ */ React29.createElement(Tooltip7.Content, {
+    side: "bottom",
+    classNames: "z-50"
+  }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React29.createElement(Tooltip7.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 title = useMemo3(() => {
+    switch (activeView) {
+      case "device invitation manager":
+        return t("choose add device label");
+      default:
+        return t("identity heading");
+    }
+  }, [
+    activeView,
+    t
+  ]);
+  const onCancelReset = () => rest.send?.("unchooseAction");
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(IdentityHeading, {
+    identity,
+    titleId,
+    title,
+    onDone,
+    onUpdateProfile,
+    connectionState,
+    onChangeConnectionState
+  }), /* @__PURE__ */ React29.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React29.createElement(Viewport.Views, null, /* @__PURE__ */ React29.createElement(Viewport.View, {
+    id: "identity action chooser",
+    classNames: viewStyles
+  }, /* @__PURE__ */ React29.createElement(IdentityActionChooserComponent, {
+    active: activeView === "identity action chooser",
+    ...rest,
+    connectionState
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+    id: "device invitation manager",
+    classNames: viewStyles
+  }, /* @__PURE__ */ React29.createElement(InvitationManagerComponent, {
+    active: activeView === "device invitation manager",
+    ...rest,
+    invitationUrl: rest.createInvitationUrl(rest.invitationCode)
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "confirm join new identity"
+  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
+    active: activeView === "confirm join new identity",
+    ...rest,
+    mode: "join new identity",
+    onConfirm: onJoinNewIdentity,
+    onCancel: onCancelReset
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "confirm recover"
+  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
+    active: activeView === "confirm recover",
+    ...rest,
+    mode: "recover",
+    onConfirm: onRecover,
+    onCancel: onCancelReset
+  })), /* @__PURE__ */ React29.createElement(Viewport.View, {
+    classNames: viewStyles,
+    id: "confirm reset storage"
+  }, /* @__PURE__ */ React29.createElement(ConfirmReset, {
+    active: activeView === "confirm reset storage",
+    ...rest,
+    mode: "reset storage",
+    onConfirm: onResetStorage,
+    onCancel: onCancelReset
+  })))));
+};
+var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
+  const invitationStatus = useInvitationStatus2(invitation);
+  return /* @__PURE__ */ React29.createElement(IdentityPanelImpl, {
+    ...props,
+    ...invitationStatus
+  });
+};
+var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, initialDisposition = "default", ...props }) => {
+  const titleId = useId6("identityPanel__heading", propsTitleId);
+  const client = useClient6();
+  const devices = useDevices();
+  const identity = useIdentity();
+  const invitations = useHaloInvitations2();
+  const agentProps = useAgentHandlers({
+    identity,
+    invitations
+  });
+  if (!identity) {
+    log6.error("IdentityPanel rendered with no active identity.", void 0, {
+      F: __dxlog_file6,
+      L: 278,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return null;
+  }
+  const [identityState, identitySend, identityService] = useIdentityMachine(client, {
+    context: {
+      initialDisposition
+    }
+  });
+  const { swarm: connectionState } = useNetworkStatus();
+  const handleChangeConnectionState = async (nextState) => client?.mesh.updateConfig(nextState);
+  useEffect4(() => {
+    const subscription = identityService.subscribe((state) => {
+      log6("[state]", state, {
+        F: __dxlog_file6,
+        L: 291,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    identityService
+  ]);
+  const activeView = useMemo3(() => {
+    switch (true) {
+      case identityState.matches("choosingAction"):
+        return "identity action chooser";
+      case identityState.matches("managingDeviceInvitation"):
+        return "device invitation manager";
+      case identityState.matches("confirmingResetStorage"):
+        return "confirm reset storage";
+      case identityState.matches("confirmingRecover"):
+        return "confirm recover";
+      case identityState.matches("confirmingJoinNewIdentity"):
+        return "confirm join new identity";
+      default:
+        return "identity action chooser";
+    }
+  }, [
+    identityState
+  ]);
+  const onUpdateProfile = async (profile) => {
+    identitySend({
+      type: "updateProfile"
+    });
+    await client.halo.updateProfile(profile);
+  };
+  const implProps = {
+    ...props,
+    identity,
+    devices,
+    activeView,
+    send: identitySend,
+    titleId,
+    createInvitationUrl,
+    onUpdateProfile,
+    connectionState,
+    onChangeConnectionState: handleChangeConnectionState,
+    ...agentProps
+  };
+  return identityState.context.invitation ? /* @__PURE__ */ React29.createElement(IdentityPanelWithInvitationImpl, {
+    ...implProps,
+    invitation: identityState.context.invitation
+  }) : /* @__PURE__ */ React29.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 { log as log10 } from "@dxos/log";
+import { useClient as useClient8, useMulticastObservable } from "@dxos/react-client";
+import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
+import { useId as useId8, useThemeContext as useThemeContext5 } from "@dxos/react-ui";
+
+// 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";
+var JoinHeading = /* @__PURE__ */ forwardRef9(({ mode, titleId, exitActionParent, onExit }, forwardedRef) => {
+  const { t } = useTranslation15("os");
+  const exitButton = /* @__PURE__ */ React30.createElement(Button10, {
+    variant: "ghost",
+    ...onExit && {
+      onClick: onExit
+    },
+    classNames: mx22(descriptionText9, "plb-0 pli-2 absolute block-start-0 inline-end-0 z-[1]"),
+    "data-testid": "join-exit"
+  }, /* @__PURE__ */ React30.createElement(X4, {
+    weight: "bold",
+    className: getSize14(4)
+  }), /* @__PURE__ */ React30.createElement("span", {
+    className: "sr-only"
+  }, t("exit label")));
+  return /* @__PURE__ */ React30.createElement(Heading, {
+    ref: forwardedRef,
+    titleId,
+    title: t(mode === "halo-only" ? "selecting identity heading" : "joining space heading"),
+    ...mode === "halo-only" ? {
+      titleSrOnly: true
+    } : {
+      corner: exitActionParent ? /* @__PURE__ */ cloneElement(exitActionParent, {}, exitButton) : exitButton
+    },
+    titleSrOnly: mode === "halo-only"
+  });
+});
+
+// packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts
+import { useMachine as useMachine2 } from "@xstate/react";
+import { useCallback as useCallback5 } from "react";
+import { assign as assign2, createMachine as createMachine2 } from "xstate";
+import { log as log7 } from "@dxos/log";
+import { AlreadyJoinedError } from "@dxos/react-client";
+import { Invitation as Invitation5, InvitationEncoder as InvitationEncoder3 } from "@dxos/react-client/invitations";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/joinMachine.ts";
+var getInvitationSubscribable = (Kind, invitation) => {
+  log7("[subscribing to invitation]", invitation, {
+    F: __dxlog_file7,
+    L: 90,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  return {
+    subscribe: (next, onError, complete) => invitation.subscribe((invitation2) => {
+      switch (invitation2.state) {
+        case Invitation5.State.CONNECTING: {
+          log7("[invitation connecting]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 101,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `connecting${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.CONNECTED: {
+          log7("[invitation connected]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 106,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `connected${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.READY_FOR_AUTHENTICATION: {
+          log7("[invitation ready for authentication]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 111,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `readyForAuthentication${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.AUTHENTICATING: {
+          log7("[invitation authenticating]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 116,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `authenticating${Kind}Invitation`,
+            invitation: invitation2
+          });
+        }
+        case Invitation5.State.SUCCESS: {
+          log7("[invitation success]", {
+            Kind,
+            invitation: invitation2
+          }, {
+            F: __dxlog_file7,
+            L: 121,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          next({
+            type: `success${Kind}Invitation`,
+            invitation: invitation2
+          });
+          return complete?.();
+        }
+        case Invitation5.State.CANCELLED: {
+          log7.warn("[invitation cancelled]", {
+            Kind
+          }, {
+            F: __dxlog_file7,
+            L: 127,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Kind}Invitation`,
+            reason: "cancelled"
+          });
+        }
+        case Invitation5.State.TIMEOUT: {
+          log7.error("[invitation timeout]", {
+            Kind
+          }, {
+            F: __dxlog_file7,
+            L: 132,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return next({
+            type: `fail${Kind}Invitation`,
+            reason: "timeout"
+          });
+        }
+      }
+    }, (error) => {
+      if (error instanceof AlreadyJoinedError) {
+        log7("[already joined]", {
+          Kind,
+          error
+        }, {
+          F: __dxlog_file7,
+          L: 139,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        next({
+          type: `success${Kind}Invitation`,
+          invitation: invitation.get()
+        });
+        return complete?.();
+      }
+      log7.error("[invitation errored]", {
+        Kind,
+        error
+      }, {
+        F: __dxlog_file7,
+        L: 144,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      next({
+        type: `fail${Kind}Invitation`,
+        reason: "error"
+      });
+      return onError?.(error);
+    })
+  };
+};
+var acceptingInvitationTemplate = (Kind, successTarget) => {
+  const config = {
+    initial: `unknown${Kind}`,
+    states: {
+      [`unknown${Kind}`]: {
+        always: [
+          {
+            cond: ({ mode }) => mode === "halo-only" && Kind === "Space",
+            target: "#join.finishingJoiningHalo"
+          },
+          {
+            cond: (context) => !!context[Kind.toLowerCase()].unredeemedCode,
+            target: `acceptingRedeemed${Kind}Invitation`,
+            actions: [
+              `redeem${Kind}InvitationCode`,
+              `invalidate${Kind}InvitationCode`,
+              "log"
+            ]
+          },
+          {
+            target: `inputting${Kind}InvitationCode`,
+            actions: "log"
+          }
+        ]
+      },
+      [`inputting${Kind}InvitationCode`]: {},
+      [`acceptingRedeemed${Kind}Invitation`]: {
+        invoke: {
+          src: (context) => context[Kind.toLowerCase()].invitationSubscribable
+        },
+        initial: `unknown${Kind}Invitation`,
+        states: {
+          [`unknown${Kind}Invitation`]: {
+            always: [
+              {
+                cond: (context) => {
+                  if (Kind !== "Space") {
+                    return false;
+                  } else {
+                    const spaceKey = context.space.invitation?.spaceKey?.toHex();
+                    const succeededKeys = context.space.succeededKeys;
+                    return spaceKey ? !!succeededKeys?.has(spaceKey) : false;
+                  }
+                },
+                target: successTarget,
+                actions: "log"
+              },
+              {
+                cond: (context) => {
+                  const invitation = context[Kind.toLowerCase()].invitation;
+                  return !invitation || invitation?.state === Invitation5.State.CONNECTING;
+                },
+                target: `connecting${Kind}Invitation`,
+                actions: "log"
+              },
+              {
+                target: `inputting${Kind}VerificationCode`,
+                actions: "log"
+              }
+            ]
+          },
+          [`connecting${Kind}Invitation`]: {},
+          [`inputting${Kind}VerificationCode`]: {},
+          [`authenticating${Kind}VerificationCode`]: {
+            on: {
+              [`readyForAuthentication${Kind}Invitation`]: {
+                target: `authenticationFailing${Kind}VerificationCode`,
+                actions: [
+                  "setInvitation",
+                  "log"
+                ]
+              }
+            }
+          },
+          [`authenticationFailing${Kind}VerificationCode`]: {},
+          [`failing${Kind}Invitation`]: {},
+          [`success${Kind}Invitation`]: {}
+        },
+        on: {
+          [`reset${Kind}Invitation`]: {
+            target: `#join${Kind === "Halo" ? ".choosingIdentity" : ""}.accepting${Kind}Invitation.unknown${Kind}`,
+            actions: [
+              "resetInvitation",
+              "log"
+            ]
+          },
+          [`connecting${Kind}Invitation`]: {
+            target: `.connecting${Kind}Invitation`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`connected${Kind}Invitation`]: {
+            target: `.connecting${Kind}Invitation`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`readyForAuthentication${Kind}Invitation`]: {
+            target: `.inputting${Kind}VerificationCode`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`authenticating${Kind}Invitation`]: {
+            target: `.authenticating${Kind}VerificationCode`,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`success${Kind}Invitation`]: {
+            target: successTarget,
+            actions: [
+              "setInvitation",
+              "log"
+            ]
+          },
+          [`fail${Kind}Invitation`]: {
+            target: `.failing${Kind}Invitation`,
+            actions: [
+              assign2({
+                [Kind.toLowerCase()]: (context, event) => ({
+                  ...context[Kind.toLowerCase()],
+                  failReason: event.reason
+                })
+              }),
+              "log"
+            ]
+          }
+        }
+      }
+    },
+    on: {
+      [`set${Kind}InvitationCode`]: {
+        target: `.acceptingRedeemed${Kind}Invitation`,
+        actions: [
+          assign2({
+            [Kind.toLowerCase()]: (context, event) => ({
+              ...context[Kind.toLowerCase()],
+              unredeemedCode: event.code,
+              succeededKeys: event.succeededKeys
+            })
+          }),
+          `redeem${Kind}InvitationCode`,
+          `invalidate${Kind}InvitationCode`,
+          "log"
+        ]
+      }
+    }
+  };
+  return config;
+};
+var joinMachine = createMachine2({
+  id: "join",
+  predictableActionArguments: true,
+  context: {
+    initialDisposition: "default",
+    mode: "default",
+    identity: null,
+    halo: {},
+    space: {}
+  },
+  initial: "unknown",
+  states: {
+    unknown: {
+      always: [
+        {
+          cond: "existingIdentity",
+          target: "resettingIdentity",
+          actions: "log"
+        },
+        {
+          cond: "initiallyAcceptingHaloInvitation",
+          target: "#join.choosingIdentity.acceptingHaloInvitation",
+          actions: "log"
+        },
+        {
+          cond: "initiallyRecoveringIdentity",
+          target: "#join.choosingIdentity.recoveringIdentity",
+          actions: "log"
+        },
+        {
+          cond: "noSelectedIdentity",
+          target: "choosingIdentity",
+          actions: "log"
+        },
+        {
+          target: "acceptingSpaceInvitation",
+          actions: "log"
+        }
+      ]
+    },
+    // TODO(wittjosiah): Remove.
+    choosingIdentity: {
+      initial: "unknownAuthMethod",
+      states: {
+        unknownAuthMethod: {
+          always: [
+            {
+              cond: "hasHaloUnredeemedCode",
+              target: "acceptingHaloInvitation",
+              actions: "log"
+            },
+            {
+              target: "choosingAuthMethod",
+              actions: "log"
+            }
+          ]
+        },
+        choosingAuthMethod: {},
+        recoveringIdentity: {},
+        creatingIdentity: {},
+        acceptingHaloInvitation: acceptingInvitationTemplate("Halo", "#join.acceptingSpaceInvitation"),
+        confirmingAddedIdentity: {}
+      },
+      on: {
+        recoverIdentity: {
+          target: ".recoveringIdentity",
+          actions: "log"
+        },
+        createIdentity: {
+          target: ".creatingIdentity",
+          actions: "log"
+        },
+        acceptHaloInvitation: {
+          target: ".acceptingHaloInvitation",
+          actions: "log"
+        },
+        addIdentity: {
+          target: ".confirmingAddedIdentity",
+          actions: "log"
+        },
+        selectIdentity: {
+          target: "acceptingSpaceInvitation",
+          actions: [
+            "setIdentity",
+            "log"
+          ]
+        },
+        deselectAuthMethod: {
+          target: ".choosingAuthMethod",
+          actions: "log"
+        }
+      }
+    },
+    // TODO(wittjosiah): Factor out to a machine handling recovery and device invitations.
+    resettingIdentity: {},
+    acceptingSpaceInvitation: acceptingInvitationTemplate("Space", "#join.finishingJoiningSpace"),
+    finishingJoiningSpace: {
+      type: "final"
+    },
+    finishingJoiningHalo: {
+      type: "final"
+    }
+  },
+  on: {
+    resetIdentity: {
+      target: "choosingIdentity",
+      actions: "unsetIdentity"
+    }
+  }
+}, {
+  guards: {
+    existingIdentity: ({ identity, mode }, _event) => mode === "halo-only" && !!identity,
+    noSelectedIdentity: ({ identity }, _event) => !identity,
+    initiallyAcceptingHaloInvitation: ({ identity, initialDisposition }, _event) => !identity && initialDisposition === "accept-halo-invitation",
+    initiallyRecoveringIdentity: ({ identity, initialDisposition }, _event) => !identity && initialDisposition === "recover-identity",
+    hasHaloUnredeemedCode: ({ halo }, _event) => !!halo.unredeemedCode,
+    noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode
+  },
+  actions: {
+    setIdentity: assign2({
+      identity: (context, event) => event.identity
+    }),
+    unsetIdentity: assign2({
+      identity: () => null
+    }),
+    resetInvitation: assign2({
+      halo: (context, event) => {
+        if (event.type !== "resetHaloInvitation") {
+          return context.halo;
+        }
+        if (context.halo.invitationObservable) {
+          void context.halo.invitationObservable.cancel();
+        }
+        return {
+          ...context.halo,
+          invitation: void 0,
+          invitationObservable: void 0,
+          invitationSubscribable: void 0
+        };
+      },
+      space: (context, event) => {
+        if (event.type !== "resetSpaceInvitation") {
+          return context.space;
+        }
+        if (context.space.invitationObservable) {
+          void context.space.invitationObservable.cancel();
+        }
+        return {
+          ...context.space,
+          invitation: void 0,
+          invitationObservable: void 0,
+          invitationSubscribable: void 0
+        };
+      }
+    }),
+    setInvitation: assign2({
+      halo: (context, event) => event.type.includes("Halo") ? {
+        ...context.halo,
+        invitation: event.invitation
+      } : context.halo,
+      space: (context, event) => event.type.includes("Space") ? {
+        ...context.space,
+        invitation: event.invitation
+      } : context.space
+    }),
+    log: (context, event) => {
+      log7("[transition]", {
+        event,
+        haloInvitation: context.halo.invitation,
+        spaceInvitation: context.space.invitation
+      }, {
+        F: __dxlog_file7,
+        L: 425,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var defaultCodeFromUrl = (invitationType, text) => {
+  try {
+    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
+    return searchParams.get(`${invitationType}InvitationCode`) ?? searchParams.get(`${invitationType}Invitation`) ?? searchParams.get("invitationCode") ?? searchParams.get("invitation") ?? text;
+  } catch (err) {
+    log7.catch(err, void 0, {
+      F: __dxlog_file7,
+      L: 452,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return text;
+  }
+};
+var useJoinMachine = (client, options) => {
+  const redeemHaloInvitationCode = useCallback5(({ halo }) => {
+    if (halo.unredeemedCode) {
+      try {
+        const invitation = InvitationEncoder3.decode(defaultCodeFromUrl("halo", halo.unredeemedCode));
+        const invitationObservable = client.halo.join(invitation);
+        return {
+          ...halo,
+          invitationObservable,
+          invitationSubscribable: getInvitationSubscribable("Halo", invitationObservable)
+        };
+      } catch (err) {
+        log7.error("Could not redeem device invitation code", err, {
+          F: __dxlog_file7,
+          L: 473,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return halo;
+      }
+    } else {
+      return halo;
+    }
+  }, [
+    client
+  ]);
+  const redeemSpaceInvitationCode = useCallback5(({ space }) => {
+    if (space.unredeemedCode) {
+      try {
+        const invitation = InvitationEncoder3.decode(defaultCodeFromUrl("space", space.unredeemedCode));
+        const invitationObservable = client.spaces.join(invitation);
+        return {
+          ...space,
+          invitationObservable,
+          invitationSubscribable: getInvitationSubscribable("Space", invitationObservable)
+        };
+      } catch (err) {
+        log7.error("Could not redeem space invitation code", err, {
+          F: __dxlog_file7,
+          L: 495,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        return space;
+      }
+    } else {
+      return space;
+    }
+  }, [
+    client
+  ]);
+  const invalidateHaloInvitationCode = useCallback5(({ halo }) => {
+    if (halo.unredeemedCode) {
+      options?.onInvalidateInvitationCode?.(halo.unredeemedCode);
+      return {
+        ...halo,
+        unredeemedCode: void 0
+      };
+    } else {
+      return halo;
+    }
+  }, [
+    options?.onInvalidateInvitationCode
+  ]);
+  const invalidateSpaceInvitationCode = useCallback5(({ space }) => {
+    if (space.unredeemedCode) {
+      options?.onInvalidateInvitationCode?.(space.unredeemedCode);
+      return {
+        ...space,
+        unredeemedCode: void 0
+      };
+    } else {
+      return space;
+    }
+  }, [
+    options?.onInvalidateInvitationCode
+  ]);
+  return useMachine2(joinMachine, {
+    ...options,
+    actions: {
+      ...options?.actions,
+      redeemHaloInvitationCode: assign2({
+        halo: redeemHaloInvitationCode
+      }),
+      redeemSpaceInvitationCode: assign2({
+        space: redeemSpaceInvitationCode
+      }),
+      invalidateHaloInvitationCode: assign2({
+        halo: invalidateHaloInvitationCode
+      }),
+      invalidateSpaceInvitationCode: assign2({
+        space: invalidateSpaceInvitationCode
+      })
+    }
+  });
+};
+
+// 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";
+var AdditionMethodChooser = (viewStateProps) => {
+  const disabled = !viewStateProps.active;
+  const { send } = viewStateProps;
+  const { t } = useTranslation16("os");
+  const sharedButtonProps = {
+    disabled,
+    after: /* @__PURE__ */ React31.createElement(CaretRight2, {
+      className: getSize15(4),
+      weight: "bold"
+    }),
+    slots: {
+      label: {
+        className: "text-sm"
+      }
+    }
+  };
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(StepHeading, null, t("addition method chooser title")), /* @__PURE__ */ React31.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1 grow"
+  }, /* @__PURE__ */ React31.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("create identity description"),
+    before: /* @__PURE__ */ React31.createElement(Plus3, {
+      className: getSize15(6)
+    }),
+    onClick: () => send({
+      type: "createIdentity"
+    }),
+    "data-autofocus": "choosingAuthMethod",
+    "data-testid": "identity-chooser.create-identity"
+  }, t("create identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("join identity description"),
+    before: /* @__PURE__ */ React31.createElement(QrCode, {
+      className: getSize15(6)
+    }),
+    onClick: () => send({
+      type: "acceptHaloInvitation"
+    }),
+    "data-testid": "identity-chooser.join-identity"
+  }, t("join identity label")), /* @__PURE__ */ React31.createElement(CompoundButton, {
+    ...sharedButtonProps,
+    description: t("recover identity description"),
+    before: /* @__PURE__ */ React31.createElement(Textbox, {
+      className: getSize15(6)
+    }),
+    onClick: () => send({
+      type: "recoverIdentity"
+    }),
+    "data-testid": "identity-chooser.recover-identity"
+  }, t("recover identity label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/IdentityAdded.tsx
+import React32, { 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 { hexToFallback } from "@dxos/util";
+var IdentityAdded = (props) => {
+  const { mode, addedIdentity, active, send, onDone, doneActionParent } = props;
+  const disabled = !active;
+  const { t } = useTranslation17("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, {
+    ...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", {
+    role: "none",
+    className: "grow flex flex-col items-center justify-center text-center gap-2"
+  }, /* @__PURE__ */ React32.createElement(Avatar7.Root, {
+    status: "active",
+    labelId,
+    hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React32.createElement(Avatar7.Frame, null, /* @__PURE__ */ React32.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, {
+    variant: "primary",
+    disabled: disabled || !addedIdentity,
+    onClick: () => addedIdentity && send({
+      type: "selectIdentity",
+      identity: addedIdentity
+    }),
+    "data-autofocus": "confirmingAddedIdentity"
+  }, t("continue label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
+import React33, { useState as useState10 } from "react";
+import { log as log8 } from "@dxos/log";
+import { useClient as useClient7 } from "@dxos/react-client";
+import { useTranslation as useTranslation18 } 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) => {
+    if (isRecover) {
+      void client.halo.recoverIdentity({
+        seedphrase: value
+      }).then((identity) => {
+        send?.({
+          type: "selectIdentity",
+          identity
+        });
+      }, (error) => {
+        log8.catch(error, void 0, {
+          F: __dxlog_file8,
+          L: 38,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setValidationMessage(t("failed to recover identity message"));
+      });
+    } else {
+      void client.halo.createIdentity({
+        displayName: value
+      }).then((identity) => {
+        send?.({
+          type: "selectIdentity",
+          identity
+        });
+      }, (error) => {
+        log8.catch(error, void 0, {
+          F: __dxlog_file8,
+          L: 48,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setValidationMessage(t("failed to create identity message"));
+      });
+    }
+  };
+  return /* @__PURE__ */ React33.createElement(IdentityInputImpl, {
+    ...props,
+    onDisplayNameConfirm: createIdentity,
+    validationMessage
+  });
+};
+var IdentityInputImpl = (props) => {
+  const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
+  const disabled = !active;
+  const { t } = useTranslation18("os");
+  const [inputValue, setInputValue] = useState10("");
+  const isRecover = method === "recover identity";
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React33.createElement(Input, {
+    validationMessage,
+    label: /* @__PURE__ */ React33.createElement(StepHeading, null, t(isRecover ? "recover identity input label" : "new identity input label")),
+    disabled,
+    "data-testid": "identity-input",
+    placeholder: isRecover ? "Type your recovery phrase" : "Type a display name",
+    onChange: ({ target: { value } }) => setInputValue(value)
+  })), /* @__PURE__ */ 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, {
+    variant: "primary",
+    disabled,
+    onClick: () => onDisplayNameConfirm?.(inputValue),
+    "data-testid": `${method === "recover identity" ? "recover" : "create"}-identity-input-continue`
+  }, t("continue 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";
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationInput.tsx
+import React35, { useState as useState11, useEffect as useEffect5, cloneElement as cloneElement4 } from "react";
+import { log as log9 } from "@dxos/log";
+import { useTranslation as useTranslation20 } 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 {
+    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf("?")));
+    const invitation = searchParams.get("spaceInvitationCode") ?? searchParams.get("deviceInvitationCode");
+    return invitation ?? text;
+  } catch (err) {
+    log9.catch(err, void 0, {
+      F: __dxlog_file9,
+      L: 25,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return text;
+  }
+};
+var InvitationInput = (props) => {
+  const { Kind, active, send, unredeemedCode, onExit, exitActionParent, onDone, doneActionParent, succeededKeys } = props;
+  const disabled = !active;
+  const { t } = useTranslation20("os");
+  const [inputValue, setInputValue] = useState11(unredeemedCode ?? "");
+  useEffect5(() => {
+    unredeemedCode && setInputValue(unredeemedCode ?? "");
+  }, [
+    unredeemedCode
+  ]);
+  const handleNext = () => {
+    if (inputValue.trim().length === 0) {
+      return;
+    }
+    send({
+      type: `set${Kind}InvitationCode`,
+      code: invitationCodeFromUrl(inputValue),
+      ...Kind === "Space" && {
+        succeededKeys
+      }
+    });
+  };
+  const exitAction = /* @__PURE__ */ React35.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    ...onExit ? {
+      onClick: () => onExit()
+    } : {
+      onClick: () => onDone?.(null)
+    },
+    "data-testid": "join-exit"
+  }, t("cancel label"));
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.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",
+    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, {
+    variant: "primary",
+    disabled: disabled || inputValue.trim().length === 0,
+    onClick: handleNext,
+    "data-testid": `${Kind.toLowerCase()}-invitation-input-continue`
+  }, t("continue label"))));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationRescuer.tsx
+import React36 from "react";
+import { useTranslation as useTranslation21 } 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
+  // for the UI in particular.
+  invitationState,
+  onInvitationCancel,
+  active,
+  send,
+  Kind,
+  failReason
+}) => {
+  const { t } = useTranslation21("os");
+  if (failReason) {
+    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
+      className: descriptionText10
+    }, t(failReason === "timeout" ? "timeout status label" : failReason === "cancelled" ? "cancelled status label" : "error status label")), /* @__PURE__ */ React36.createElement("div", {
+      role: "none",
+      className: "grow"
+    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
+      disabled: !active,
+      onClick: () => send({
+        type: `reset${Kind}Invitation`
+      }),
+      "data-testid": "invitation-rescuer-reset"
+    }, t("reset label"))));
+  } else {
+    return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(StepHeading, {
+      className: descriptionText10
+    }, t("connecting status label")), /* @__PURE__ */ React36.createElement("div", {
+      role: "none",
+      className: "grow"
+    }), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
+      disabled: true,
+      classNames: "order-2",
+      "data-testid": "next"
+    }, t("next label")), /* @__PURE__ */ React36.createElement(Action, {
+      disabled: !active,
+      onClick: onInvitationCancel,
+      "data-testid": "invitation-rescuer-cancel"
+    }, t("cancel label"))));
+  }
+};
+var InvitationRescuer = (props) => {
+  const { Kind, invitationState, active, send } = props;
+  const { t } = useTranslation21("os");
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, typeof invitationState === "undefined" ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", {
+    role: "none",
+    className: "grow flex flex-col justify-center"
+  }, /* @__PURE__ */ React36.createElement(StepHeading, {
+    className: descriptionText10
+  }, "There was a problem joining the space")), /* @__PURE__ */ React36.createElement(Actions, null, /* @__PURE__ */ React36.createElement(Action, {
+    disabled: !active,
+    "data-testid": "invitation-rescuer-blank-reset",
+    onClick: () => send({
+      type: `reset${Kind}Invitation`
+    })
+  }, t("reset label")))) : /* @__PURE__ */ React36.createElement(InvitationActions, props));
+};
+
+// packages/sdk/shell/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx
+import React37, { useState as useState12 } from "react";
+import { Invitation as Invitation6 } from "@dxos/react-client/invitations";
+import { Input as Input3, useTranslation as useTranslation22 } 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 invitationType = Kind.toLowerCase();
+  const [authCode, setAuthCode] = useState12("");
+  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", {
+    role: "none",
+    className: "grow flex flex-col justify-center gap-4"
+  }, /* @__PURE__ */ React37.createElement(Input3.Root, failed && {
+    validationValence: "error"
+  }, /* @__PURE__ */ React37.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, {
+    className: descriptionText11
+  }, t("authenticating label")), /* @__PURE__ */ React37.createElement("div", {
+    role: "none",
+    className: "grow"
+  }))), authMethod === Invitation6.AuthMethod.SHARED_SECRET && /* @__PURE__ */ React37.createElement(Input3.PinInput, {
+    disabled,
+    length: pinLength,
+    onChange,
+    inputMode: "numeric",
+    autoComplete: "off",
+    pattern: "\\d*",
+    "data-autofocus": `connecting${Kind}Invitation inputting${Kind}VerificationCode authenticationFailing${Kind}VerificationCode authenticating${Kind}VerificationCode`,
+    "data-prevent-ios-autofocus": true,
+    "data-testid": `${invitationType}-auth-code-input`,
+    "data-1p-ignore": true
+  }), failed && /* @__PURE__ */ React37.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", {
+    className: "flex justify-center"
+  }, /* @__PURE__ */ React37.createElement(Emoji, {
+    text: hexToEmoji5(invitationId)
+  })))), /* @__PURE__ */ React37.createElement(Actions, null, /* @__PURE__ */ React37.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => onInvitationCancel?.(),
+    "data-testid": `${invitationType}-invitation-authenticator-cancel`
+  }, t("cancel label")), /* @__PURE__ */ React37.createElement(Action, {
+    variant: "primary",
+    disabled,
+    onClick: () => onInvitationAuthenticate?.(authCode),
+    "data-autofocus-pinlength": invitationType,
+    "data-testid": `${invitationType}-invitation-authenticator-next`
+  }, t("next label"))));
+};
+
+// packages/sdk/shell/src/styles/panelStyles.ts
+var stepStyles = "pbs-1 pbe-3 pli-3";
+
+// packages/sdk/shell/src/styles/invitationStatusStyles.ts
+import { Invitation as Invitation7 } from "@dxos/react-client/invitations";
+var inactiveBgColor = "bg-neutral-100 dark:bg-neutral-600";
+var activeBgColor = "bg-primary-500 dark:bg-primary-400";
+var successBgColor = "bg-success-500 dark:bg-success-400";
+var errorBgColor = "bg-error-500 dark:bg-error-400";
+var cancelledBgColor = "bg-warning-500 dark:bg-warning-400";
+var inactiveTextColor = "text-neutral-100 dark:text-neutral-600";
+var activeTextColor = "text-primary-400 dark:text-primary-500";
+var successTextColor = "text-success-400 dark:text-success-500";
+var errorTextColor = "text-error-400 dark:text-error-500";
+var cancelledTextColor = "text-warning-400 dark:text-warning-500";
+var inactiveStrokeColor = "stroke-neutral-100 dark:stroke-neutral-700";
+var activeStrokeColor = "stroke-primary-400 dark:stroke-primary-150";
+var successStrokeColor = "stroke-success-300 dark:stroke-primary-400";
+var errorStrokeColor = "stroke-error-300 dark:stroke-error-500";
+var cancelledStrokeColor = "stroke-warning-300 dark:stroke-warning-500";
+var resolvedStrokeColor = (status) => status === Invitation7.State.ERROR ? errorStrokeColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledStrokeColor : successStrokeColor;
+var resolvedBgColor = (status) => status === Invitation7.State.ERROR ? errorBgColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledBgColor : successBgColor;
+var resolvedTextColor = (status) => status === Invitation7.State.ERROR ? errorTextColor : status === Invitation7.State.CANCELLED || status === Invitation7.State.TIMEOUT ? cancelledTextColor : successTextColor;
+
+// packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx";
+var JoinPanelImpl = (props) => {
+  const {
+    titleId,
+    send,
+    activeView,
+    failed,
+    mode,
+    unredeemedCodes,
+    invitationIds,
+    invitationStates,
+    invitationAuthMethods,
+    succeededKeys,
+    failReasons,
+    onExit,
+    onHaloDone,
+    // onSpaceDone,
+    exitActionParent,
+    doneActionParent,
+    onHaloInvitationCancel,
+    onSpaceInvitationCancel,
+    onHaloInvitationAuthenticate,
+    onSpaceInvitationAuthenticate,
+    onCancelResetStorage,
+    onConfirmResetStorage,
+    IdentityInput: IdentityInputComponent = IdentityInput,
+    ConfirmReset: ConfirmResetComponent = ConfirmReset
+  } = props;
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, mode !== "halo-only" && /* @__PURE__ */ React38.createElement(JoinHeading, {
+    titleId,
+    mode,
+    onExit,
+    exitActionParent
+  }), /* @__PURE__ */ React38.createElement(Viewport.Root, {
+    focusManaged: true,
+    activeView
+  }, /* @__PURE__ */ React38.createElement(Viewport.Views, null, /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "addition method chooser"
+  }, /* @__PURE__ */ React38.createElement(AdditionMethodChooser, {
+    send,
+    active: activeView === "addition method chooser"
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "reset storage confirmation"
+  }, /* @__PURE__ */ React38.createElement(ConfirmResetComponent, {
+    send,
+    active: activeView === "reset storage confirmation",
+    onCancel: onCancelResetStorage,
+    onConfirm: onConfirmResetStorage
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "create identity input"
+  }, /* @__PURE__ */ React38.createElement(IdentityInputComponent, {
+    send,
+    method: "create identity",
+    active: activeView === "create identity input"
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "recover identity input"
+  }, /* @__PURE__ */ React38.createElement(IdentityInputComponent, {
+    send,
+    method: "recover identity",
+    active: activeView === "recover identity input"
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation input"
+  }, /* @__PURE__ */ React38.createElement(InvitationInput, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation input",
+    ...unredeemedCodes?.Halo && {
+      unredeemedCode: unredeemedCodes.Halo
+    },
+    ...succeededKeys?.Halo && {
+      succeededKeys: succeededKeys.Halo
+    }
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation rescuer"
+  }, /* @__PURE__ */ React38.createElement(InvitationRescuer, {
+    send,
+    Kind: "Halo",
+    active: activeView === "halo invitation rescuer",
+    invitationState: invitationStates?.Halo,
+    onInvitationCancel: onHaloInvitationCancel,
+    failReason: failReasons?.Halo
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "halo invitation authenticator"
+  }, /* @__PURE__ */ React38.createElement(InvitationAuthenticator, {
+    send,
+    Kind: "Halo",
+    invitationId: invitationIds?.Halo,
+    authMethod: invitationAuthMethods?.Halo,
+    active: activeView === "halo invitation authenticator",
+    onInvitationCancel: onHaloInvitationCancel,
+    onInvitationAuthenticate: onHaloInvitationAuthenticate,
+    ...failed.has("Halo") && {
+      failed: true
+    }
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "identity added"
+  }, /* @__PURE__ */ React38.createElement(IdentityAdded, {
+    send,
+    mode,
+    active: activeView === "identity added",
+    doneActionParent,
+    onDone: onHaloDone
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation input"
+  }, /* @__PURE__ */ React38.createElement(InvitationInput, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation input",
+    ...unredeemedCodes?.Space && {
+      unredeemedCode: unredeemedCodes.Space
+    },
+    ...succeededKeys?.Space && {
+      succeededKeys: succeededKeys.Space
+    },
+    onExit,
+    exitActionParent
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation rescuer"
+  }, /* @__PURE__ */ React38.createElement(InvitationRescuer, {
+    send,
+    Kind: "Space",
+    active: activeView === "space invitation rescuer",
+    invitationState: invitationStates?.Space,
+    onInvitationCancel: onSpaceInvitationCancel,
+    failReason: failReasons?.Space
+  })), /* @__PURE__ */ React38.createElement(Viewport.View, {
+    classNames: stepStyles,
+    id: "space invitation authenticator"
+  }, /* @__PURE__ */ React38.createElement(InvitationAuthenticator, {
+    send,
+    Kind: "Space",
+    invitationId: invitationIds?.Space,
+    authMethod: invitationAuthMethods?.Space,
+    active: activeView === "space invitation authenticator",
+    onInvitationCancel: onSpaceInvitationCancel,
+    onInvitationAuthenticate: onSpaceInvitationAuthenticate,
+    ...failed.has("Space") && {
+      failed: true
+    }
+  })))));
+};
+var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone: propsOnDone, onCancelResetStorage }) => {
+  const client = useClient8();
+  const identity = useIdentity2();
+  const { hasIosKeyboard } = useThemeContext5();
+  const titleId = useId8("joinPanel__heading", propsTitleId);
+  const [joinState, joinSend, joinService] = useJoinMachine(client, {
+    context: {
+      mode,
+      initialDisposition,
+      identity,
+      ...initialInvitationCode && {
+        [mode === "halo-only" ? "halo" : "space"]: {
+          unredeemedCode: initialInvitationCode
+        }
+      }
+    }
+  });
+  useEffect6(() => {
+    const subscription = joinService.subscribe((state) => {
+      log10("[state]", state, {
+        F: __dxlog_file10,
+        L: 210,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    joinService
+  ]);
+  useEffect6(() => {
+    const stateStack = joinState.configuration[0].id.split(".");
+    const innermostState = stateStack[stateStack.length - 1];
+    const autoFocusValue = innermostState === "finishingJoining" ? "successSpaceInvitation" : innermostState;
+    const $nextAutofocus = document.querySelector(`[data-autofocus~="${autoFocusValue}"]`);
+    if ($nextAutofocus && !(hasIosKeyboard && $nextAutofocus.hasAttribute("data-prevent-ios-autofocus"))) {
+      $nextAutofocus.focus();
+    }
+  }, [
+    joinState.value,
+    hasIosKeyboard
+  ]);
+  const activeView = useMemo4(() => {
+    switch (true) {
+      case joinState.matches({
+        choosingIdentity: "choosingAuthMethod"
+      }):
+        return "addition method chooser";
+      case joinState.matches("resettingIdentity"):
+        return "reset storage confirmation";
+      case joinState.matches({
+        choosingIdentity: "creatingIdentity"
+      }):
+        return "create identity input";
+      case joinState.matches({
+        choosingIdentity: "recoveringIdentity"
+      }):
+        return "recover identity input";
+      case joinState.matches({
+        choosingIdentity: {
+          acceptingHaloInvitation: "inputtingHaloInvitationCode"
+        }
+      }):
+        return "halo invitation input";
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "connectingHaloInvitation"
+            }
+          }
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "failingHaloInvitation"
+            }
+          }
+        }
+      ].some(joinState.matches):
+        return "halo invitation rescuer";
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "inputtingHaloVerificationCode"
+            }
+          }
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "authenticatingHaloVerificationCode"
+            }
+          }
+        },
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "authenticationFailingHaloVerificationCode"
+            }
+          }
+        }
+      ].some(joinState.matches):
+        return "halo invitation authenticator";
+      case [
+        {
+          choosingIdentity: {
+            acceptingHaloInvitation: {
+              acceptingRedeemedHaloInvitation: "successHaloInvitation"
+            }
+          }
+        },
+        "finishingJoiningHalo"
+      ].some(joinState.matches):
+        return "halo invitation accepted";
+      case joinState.matches({
+        choosingIdentity: "confirmingAddedIdentity"
+      }):
+        return "identity added";
+      case joinState.matches({
+        acceptingSpaceInvitation: "inputtingSpaceInvitationCode"
+      }):
+        return "space invitation input";
+      case [
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "connectingSpaceInvitation"
+          }
+        },
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "failingSpaceInvitation"
+          }
+        }
+      ].some(joinState.matches):
+        return "space invitation rescuer";
+      case [
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "inputtingSpaceVerificationCode"
+          }
+        },
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "authenticatingSpaceVerificationCode"
+          }
+        },
+        {
+          acceptingSpaceInvitation: {
+            acceptingRedeemedSpaceInvitation: "authenticationFailingSpaceVerificationCode"
+          }
+        }
+      ].some(joinState.matches):
+        return "space invitation authenticator";
+      case joinState.matches("finishingJoiningSpace"):
+        return "space invitation accepted";
+      default:
+        return "never";
+    }
+  }, [
+    joinState
+  ]);
+  useEffect6(() => {
+    switch (activeView) {
+      case "halo invitation accepted":
+        onHaloDone();
+        break;
+      case "space invitation accepted":
+        onSpaceDone();
+        break;
+    }
+  }, [
+    activeView
+  ]);
+  const failed = useMemo4(() => {
+    const result = /* @__PURE__ */ new Set();
+    switch (true) {
+      case joinState.matches({
+        choosingIdentity: {
+          acceptingHaloInvitation: {
+            acceptingRedeemedHaloInvitation: "authenticationFailingHaloVerificationCode"
+          }
+        }
+      }):
+        result.add("Halo");
+        break;
+      case joinState.matches({
+        acceptingSpaceInvitation: {
+          acceptingRedeemedSpaceInvitation: "authenticationFailingSpaceVerificationCode"
+        }
+      }):
+        result.add("Space");
+        break;
+    }
+    return result;
+  }, [
+    joinState
+  ]);
+  const unredeemedCodes = useMemo4(() => ({
+    Halo: joinState.context.halo.unredeemedCode,
+    Space: joinState.context.space.unredeemedCode
+  }), [
+    joinState
+  ]);
+  const spaces = useMulticastObservable(client.spaces);
+  const succeededKeys = useMemo4(() => ({
+    Space: spaces ? new Set(spaces.map(({ key }) => key.toHex())) : void 0
+  }), [
+    spaces
+  ]);
+  const invitationStates = useMemo4(() => ({
+    Halo: joinState.context.halo.invitationObservable?.get().state,
+    Space: joinState.context.space.invitationObservable?.get().state
+  }), [
+    joinState
+  ]);
+  const invitationAuthMethods = useMemo4(() => ({
+    Halo: joinState.context.halo.invitationObservable?.get().authMethod,
+    Space: joinState.context.space.invitationObservable?.get().authMethod
+  }), [
+    joinState
+  ]);
+  const invitationIds = useMemo4(() => ({
+    Halo: joinState.context.halo.invitationObservable?.get().invitationId,
+    Space: joinState.context.space.invitationObservable?.get().invitationId
+  }), [
+    joinState
+  ]);
+  const failReasons = useMemo4(() => ({
+    Halo: joinState.context.halo.failReason,
+    Space: joinState.context.space.failReason
+  }), [
+    joinState
+  ]);
+  const onHaloDone = useCallback6(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.halo.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.halo.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.halo.invitation?.spaceKey ?? null,
+      target: joinState.context.halo.invitation?.target ?? null
+    });
+  }, [
+    joinState,
+    propsOnDone
+  ]);
+  const onSpaceDone = useCallback6(() => {
+    propsOnDone?.({
+      identityKey: joinState.context.space.invitation?.identityKey ?? null,
+      swarmKey: joinState.context.space.invitation?.swarmKey ?? null,
+      spaceKey: joinState.context.space.invitation?.spaceKey ?? null,
+      target: joinState.context.space.invitation?.target ?? null
+    });
+  }, [
+    joinState,
+    propsOnDone
+  ]);
+  const onConfirmResetStorage = useCallback6(() => client.reset().then(() => {
+    joinSend({
+      type: "resetIdentity"
+    });
+  }), [
+    client,
+    joinSend
+  ]);
+  return /* @__PURE__ */ React38.createElement(JoinPanelImpl, {
+    titleId,
+    mode,
+    send: joinSend,
+    activeView,
+    failed,
+    failReasons,
+    pending: [
+      "connecting",
+      "authenticating"
+    ].some((str) => joinState?.configuration[0].id.includes(str)),
+    unredeemedCodes,
+    invitationIds,
+    invitationStates,
+    invitationAuthMethods,
+    succeededKeys,
+    identity,
+    onExit,
+    exitActionParent,
+    doneActionParent,
+    onHaloDone,
+    onSpaceDone,
+    onHaloInvitationCancel: () => joinState.context.halo.invitationObservable?.cancel(),
+    onSpaceInvitationCancel: () => joinState.context.space.invitationObservable?.cancel(),
+    onHaloInvitationAuthenticate: (authCode) => {
+      joinSend({
+        type: "authenticateHaloVerificationCode"
+      });
+      return joinState.context.halo.invitationObservable?.authenticate(authCode);
+    },
+    onSpaceInvitationAuthenticate: (authCode) => {
+      joinSend({
+        type: "authenticateSpaceVerificationCode"
+      });
+      return joinState.context.space.invitationObservable?.authenticate(authCode);
+    },
+    onConfirmResetStorage,
+    onCancelResetStorage
+  });
+};
+
+// 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 { log as log13 } from "@dxos/log";
+import { useInvitationStatus as useInvitationStatus3 } from "@dxos/react-client/invitations";
+import { useId as useId9, useTranslation as useTranslation24 } from "@dxos/react-ui";
+
+// packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts
+import { useMachine as useMachine3 } from "@xstate/react";
+import { assign as assign3, createMachine as createMachine3 } from "xstate";
+import { log as log11 } from "@dxos/log";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/spaceMachine.ts";
+var spaceMachine = createMachine3({
+  id: "space",
+  predictableActionArguments: true,
+  context: {
+    space: null
+  },
+  initial: "managingSpace",
+  states: {
+    managingSpace: {},
+    managingSpaceInvitation: {}
+  },
+  on: {
+    deselectInvitation: {
+      target: ".managingSpace",
+      actions: [
+        "unsetInvitation",
+        "log"
+      ]
+    },
+    selectInvitation: {
+      target: ".managingSpaceInvitation",
+      actions: [
+        "setInvitation",
+        "log"
+      ]
+    }
+  }
+}, {
+  actions: {
+    setInvitation: assign3({
+      invitation: (context, event) => event?.invitation ?? null
+    }),
+    unsetInvitation: assign3({
+      invitation: () => void 0
+    }),
+    log: (context, event) => {
+      log11("[transition]", {
+        event,
+        context
+      }, {
+        F: __dxlog_file11,
+        L: 53,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+});
+var useSpaceMachine = (options) => {
+  return useMachine3(spaceMachine, {
+    ...options,
+    context: {
+      ...options?.context
+    }
+  });
+};
+
+// 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 { log as log12 } 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";
+var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/SpacePanel/steps/SpaceManager.tsx";
+var activeActionKey = "dxos:react-shell/space-manager/active-action";
+var handleInvitationEvent = (invitation, subscription) => {
+  const invitationCode = InvitationEncoder4.encode(invitation);
+  if (invitation.state === Invitation8.State.CONNECTING) {
+    log12.info(JSON.stringify({
+      invitationCode,
+      authCode: invitation.authCode
+    }), void 0, {
+      F: __dxlog_file12,
+      L: 40,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    subscription.unsubscribe();
+  }
+};
+var SpaceManager = (props) => {
+  const { space, target } = props;
+  const { t } = useTranslation23("os");
+  const config = useConfig();
+  const invitations = useSpaceInvitations2(space?.key);
+  const inviteActions = {
+    inviteOne: {
+      label: t("invite one label"),
+      description: t("invite one description"),
+      icon: UserPlus,
+      onClick: useCallback7(() => {
+        const invitation = space.share?.({
+          type: Invitation8.Type.INTERACTIVE,
+          authMethod: Invitation8.AuthMethod.SHARED_SECRET,
+          multiUse: false,
+          target
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }, [
+        space
+      ])
+    },
+    inviteMany: {
+      label: t("invite many label"),
+      description: t("invite many description"),
+      icon: UsersThree,
+      onClick: useCallback7(() => {
+        const invitation = space.share?.({
+          type: Invitation8.Type.DELEGATED,
+          authMethod: Invitation8.AuthMethod.KNOWN_PUBLIC_KEY,
+          multiUse: true,
+          target
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }, [
+        space
+      ])
+    }
+  };
+  return /* @__PURE__ */ React39.createElement(SpaceManagerImpl, {
+    ...props,
+    invitations,
+    inviteActions
+  });
+};
+var headingFragment = "pis-3 pie-1 plb-1 mbe-1 font-medium";
+var SpaceManagerImpl = (props) => {
+  const { active, space, createInvitationUrl, send, inviteActions: propsInviteActions, invitations, showInactiveInvitations, SpaceMemberList: SpaceMemberListComponent = SpaceMemberList, InvitationList: InvitationListComponent = InvitationList } = props;
+  const { t } = useTranslation23("os");
+  const inviteActions = propsInviteActions ?? {
+    noopInvite: {
+      label: t("create space invitation label"),
+      description: "",
+      icon: Placeholder2,
+      onClick: () => {
+      }
+    }
+  };
+  const [activeAction, setInternalActiveAction] = useState13(localStorage.getItem(activeActionKey) ?? "inviteOne");
+  const setActiveAction = (nextAction) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+  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, {
+    classNames: "grow shrink basis-28 -mli-2"
+  }, /* @__PURE__ */ React39.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, {
+    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, {
+    spaceKey: space.key,
+    includeSelf: true
+  })), /* @__PURE__ */ React39.createElement(ScrollArea.Scrollbar, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React39.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React39.createElement(Actions, null, /* @__PURE__ */ React39.createElement(BifurcatedAction, {
+    disabled: !active,
+    actions: inviteActions,
+    activeAction,
+    onChangeActiveAction: setActiveAction,
+    "data-testid": "spaces-panel.create-invitation"
+  })));
+};
+
+// 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 name = space.properties.name;
+  return /* @__PURE__ */ React40.createElement(Heading, {
+    titleId,
+    title: t("space panel heading"),
+    corner: /* @__PURE__ */ React40.createElement(CloseButton, {
+      "data-testid": "identity-panel-done",
+      onDone
+    })
+  }, /* @__PURE__ */ React40.createElement("div", {
+    role: "none",
+    className: "flex gap-4 items-center justify-center mlb-4"
+  }, /* @__PURE__ */ React40.createElement(Planet, {
+    size: 32,
+    weight: "light"
+  }), /* @__PURE__ */ React40.createElement("div", {
+    className: "block text-start font-light text-xl"
+  }, name ?? space.key.truncate())));
+};
+var SpacePanelImpl = (props) => {
+  const { titleId, activeView, space, target, SpaceManager: SpaceManagerComponent = SpaceManager, InvitationManager: InvitationManagerComponent = InvitationManager, ...rest } = props;
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(SpacePanelHeading, {
+    ...rest,
+    titleId,
+    space
+  }), /* @__PURE__ */ React40.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React40.createElement(Viewport.Views, null, /* @__PURE__ */ React40.createElement(Viewport.View, {
+    id: "space manager",
+    classNames: stepStyles
+  }, /* @__PURE__ */ React40.createElement(SpaceManagerComponent, {
+    active: activeView === "space manager",
+    space,
+    target,
+    ...rest
+  })), /* @__PURE__ */ React40.createElement(Viewport.View, {
+    id: "space invitation manager",
+    classNames: stepStyles
+  }, /* @__PURE__ */ React40.createElement(InvitationManagerComponent, {
+    active: activeView === "space invitation manager",
+    ...rest,
+    invitationUrl: props.invitationUrl
+  })))));
+};
+var SpacePanelWithInvitationImpl = ({ invitation, ...props }) => {
+  const invitationStatus = useInvitationStatus3(invitation);
+  return /* @__PURE__ */ React40.createElement(SpacePanelImpl, {
+    ...props,
+    ...invitationStatus,
+    invitationUrl: props.createInvitationUrl(invitationStatus.invitationCode)
+  });
+};
+var SpacePanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, ...props }) => {
+  const titleId = useId9("spacePanel__heading", propsTitleId);
+  const [spaceState, spaceSend, spaceService] = useSpaceMachine({
+    context: {
+      space: props.space
+    }
+  });
+  useEffect7(() => {
+    const subscription = spaceService.subscribe((state) => {
+      log13("[state]", state, {
+        F: __dxlog_file13,
+        L: 94,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    });
+    return subscription.unsubscribe;
+  }, [
+    spaceService
+  ]);
+  const activeView = useMemo5(() => {
+    switch (true) {
+      case spaceState.matches("managingSpace"):
+        return "space manager";
+      case spaceState.matches("managingSpaceInvitation"):
+        return "space invitation manager";
+      default:
+        return "never";
+    }
+  }, [
+    spaceState
+  ]);
+  const implProps = {
+    ...props,
+    activeView,
+    send: spaceSend,
+    titleId,
+    createInvitationUrl
+  };
+  return spaceState.context.invitation ? (
+    // TODO(wittjosiah): Unused? Remove?
+    /* @__PURE__ */ React40.createElement(SpacePanelWithInvitationImpl, {
+      ...implProps,
+      invitation: spaceState.context.invitation
+    })
+  ) : /* @__PURE__ */ React40.createElement(SpacePanelImpl, implProps);
+};
+
+// packages/sdk/shell/src/panels/StatusPanel/StatusPanel.tsx
+import React41 from "react";
+import { Status, useTranslation as useTranslation25 } from "@dxos/react-ui";
+var StatusPanel = ({ titleId }) => {
+  const { t } = useTranslation25("os");
+  return /* @__PURE__ */ React41.createElement("div", {
+    className: "grid place-items-center p-2 gap-2"
+  }, /* @__PURE__ */ React41.createElement("p", {
+    id: titleId,
+    className: "font-medium text-center"
+  }, t("resetting message")), /* @__PURE__ */ React41.createElement(Status, {
+    indeterminate: true
+  }, t("resetting message")));
+};
+
+// packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
+var IdentityDialog = (props) => {
+  const titleId = useId10("identityDialog__title", props.title);
+  return /* @__PURE__ */ React42.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, {
+    "aria-labelledby": titleId,
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }, /* @__PURE__ */ React42.createElement(ClipboardProvider, null, /* @__PURE__ */ React42.createElement(IdentityPanel, {
+    ...props,
+    titleId,
+    doneActionParent: /* @__PURE__ */ React42.createElement(Dialog.Close, {
+      asChild: true
+    })
+  }))))));
+};
+
+// packages/sdk/shell/src/composites/JoinDialog/JoinDialog.tsx
+import React43 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, {
+    defaultOpen: true,
+    onOpenChange: (open) => open || (joinPanelProps.onExit ? joinPanelProps.onExit() : joinPanelProps.onDone?.(null))
+  }, /* @__PURE__ */ React43.createElement(AlertDialog.Portal, null, /* @__PURE__ */ React43.createElement(AlertDialog.Overlay, {
+    classNames: "backdrop-blur",
+    ...height && {
+      style: {
+        blockSize: `${height}px`
+      }
+    }
+  }, /* @__PURE__ */ React43.createElement(AlertDialog.Content, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ React43.createElement(JoinPanel, {
+    ...joinPanelProps,
+    titleId,
+    exitActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Cancel, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React43.createElement(AlertDialog.Action, {
+      asChild: true
+    })
+  })))));
+};
+
+// packages/sdk/shell/src/composites/Shell/run-shell.tsx
+import React47, { 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 Tooltip8, useTranslation as useTranslation26 } 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 { log as log14 } 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";
+var SpaceDialog = (spacePanelProps) => {
+  const titleId = useId12("spaceDialog__title");
+  return /* @__PURE__ */ React44.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, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ React44.createElement(ClipboardProvider, null, /* @__PURE__ */ React44.createElement(SpacePanel, {
+    ...spacePanelProps,
+    titleId,
+    doneActionParent: /* @__PURE__ */ React44.createElement(Dialog2.Close, {
+      asChild: true
+    })
+  }))))));
+};
+
+// packages/sdk/shell/src/composites/StatusDialog/StatusDialog.tsx
+import React45 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, {
+    open: true
+  }, /* @__PURE__ */ React45.createElement(AlertDialog2.Portal, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Overlay, null, /* @__PURE__ */ React45.createElement(AlertDialog2.Content, {
+    "aria-labelledby": titleId
+  }, /* @__PURE__ */ React45.createElement(StatusPanel, {
+    titleId
+  })))));
+};
+
+// packages/sdk/shell/src/composites/Shell/Shell.tsx
+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({
+    layout: runtime.layout,
+    invitationCode: runtime.invitationCode,
+    spaceKey: runtime.spaceKey,
+    spaceId: runtime.spaceId,
+    target: runtime.target
+  });
+  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState14({
+    invitationUrl: runtime.invitationUrl,
+    deviceInvitationParam: runtime.deviceInvitationParam,
+    spaceInvitationParam: runtime.spaceInvitationParam
+  });
+  const client = useClient9();
+  const space = useSpace2(spaceId ?? spaceKey);
+  const createDeviceInvitationUrl = (invitationCode2) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(deviceInvitationParam, invitationCode2);
+    return baseUrl.toString();
+  };
+  const createSpaceInvitationUrl = (invitationCode2) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(spaceInvitationParam, invitationCode2);
+    return baseUrl.toString();
+  };
+  useEffect8(() => {
+    const unsubscribeLayout = runtime.layoutUpdate.on((request) => setLayout(request));
+    const unsubscribeInvitationUrl = runtime.invitationUrlUpdate.on((request) => setInvitationUrl(request));
+    return () => {
+      unsubscribeLayout();
+      unsubscribeInvitationUrl();
+    };
+  }, [
+    runtime
+  ]);
+  useEffect8(() => {
+    if (layout === ShellLayout.SPACE && !space) {
+      log14.warn("No space found for shell space invitations.", void 0, {
+        F: __dxlog_file14,
+        L: 67,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      const timeout = setTimeout(async () => {
+        await runtime.setAppContext({
+          display: ShellDisplay.NONE
+        });
+        runtime.setLayout({
+          layout: ShellLayout.DEFAULT
+        });
+      });
+      return () => clearTimeout(timeout);
+    }
+  }, [
+    runtime,
+    layout,
+    space
+  ]);
+  switch (layout) {
+    case ShellLayout.STATUS:
+      return /* @__PURE__ */ React46.createElement(StatusDialog, null);
+    case ShellLayout.INITIALIZE_IDENTITY:
+    case ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION:
+    case ShellLayout.INITIALIZE_IDENTITY_FROM_RECOVERY:
+      return /* @__PURE__ */ React46.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,
+        onCancelResetStorage: () => runtime.setLayout({
+          layout: ShellLayout.IDENTITY
+        }),
+        onDone: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        }
+      });
+    case ShellLayout.IDENTITY:
+    case ShellLayout.SHARE_IDENTITY:
+    case ShellLayout.EDIT_PROFILE:
+      return /* @__PURE__ */ React46.createElement(IdentityDialog, {
+        createInvitationUrl: createDeviceInvitationUrl,
+        onResetStorage: async () => {
+          runtime.setLayout({
+            layout: ShellLayout.STATUS
+          });
+          await client.reset();
+          return runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            reset: true
+          });
+        },
+        onRecover: async () => {
+          runtime.setLayout({
+            layout: ShellLayout.STATUS
+          });
+          await client.reset();
+          return runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            reset: true,
+            target: "recoverIdentity"
+          });
+        },
+        onJoinNewIdentity: async () => {
+          runtime.setLayout({
+            layout: ShellLayout.STATUS
+          });
+          await client.reset();
+          return runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            reset: true,
+            target: "deviceInvitation"
+          });
+        },
+        onDone: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        },
+        initialDisposition: layout === ShellLayout.SHARE_IDENTITY ? "manage-device-invitation" : "default"
+      });
+    case ShellLayout.SPACE:
+      return space ? /* @__PURE__ */ React46.createElement(SpaceDialog, {
+        space,
+        target,
+        createInvitationUrl: createSpaceInvitationUrl,
+        onDone: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        }
+      }) : null;
+    case ShellLayout.JOIN_SPACE:
+      return /* @__PURE__ */ React46.createElement(JoinDialog, {
+        initialInvitationCode: invitationCode,
+        onDone: async (result) => {
+          blurActiveElement();
+          const target2 = result?.target ?? void 0;
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE,
+            spaceKey: result?.spaceKey ?? void 0,
+            target: target2
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        },
+        onExit: async () => {
+          blurActiveElement();
+          await runtime.setAppContext({
+            display: ShellDisplay.NONE
+          });
+          runtime.setLayout({
+            layout: ShellLayout.DEFAULT
+          });
+        }
+      });
+    default:
+      return null;
+  }
+};
+
+// 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 { 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";
+var ShellRuntimeImpl = class {
+  constructor(_port) {
+    this._port = _port;
+    this.layoutUpdate = new Event();
+    this.invitationUrlUpdate = new Event();
+    this._layout = ShellLayout2.DEFAULT;
+    this._invitationUrl = typeof window !== "undefined" ? window.location.origin : void 0;
+    this._deviceInvitationParam = "deviceInvitationCode";
+    this._spaceInvitationParam = "spaceInvitationCode";
+  }
+  get layout() {
+    return this._layout;
+  }
+  get invitationCode() {
+    return this._invitationCode;
+  }
+  /** @deprecated Use spaceId. */
+  get spaceKey() {
+    return this._spaceKey;
+  }
+  get spaceId() {
+    return this._spaceId;
+  }
+  get invitationUrl() {
+    return this._invitationUrl;
+  }
+  get deviceInvitationParam() {
+    return this._deviceInvitationParam;
+  }
+  get spaceInvitationParam() {
+    return this._spaceInvitationParam;
+  }
+  setLayout({ layout, invitationCode, spaceKey, spaceId }) {
+    this._layout = layout;
+    this._invitationCode = invitationCode;
+    this._spaceKey = spaceKey;
+    this._spaceId = spaceId;
+    this.layoutUpdate.emit({
+      layout,
+      invitationCode,
+      spaceKey,
+      spaceId
+    });
+  }
+  setInvitationUrl({ invitationUrl, deviceInvitationParam, spaceInvitationParam }) {
+    this._invitationUrl = invitationUrl;
+    this._deviceInvitationParam = deviceInvitationParam;
+    this._spaceInvitationParam = spaceInvitationParam;
+    this.invitationUrlUpdate.emit({
+      invitationUrl,
+      deviceInvitationParam,
+      spaceInvitationParam
+    });
+  }
+  async setAppContext(context) {
+    invariant4(this._appRpc, "runtime not open", {
+      F: __dxlog_file15,
+      L: 83,
+      S: this,
+      A: [
+        "this._appRpc",
+        "'runtime not open'"
+      ]
+    });
+    await this._appRpc.rpc.AppService.setContext(context);
+  }
+  async open() {
+    this._appRpc = createProtoRpcPeer({
+      requested: appServiceBundle,
+      exposed: shellServiceBundle,
+      handlers: {
+        ShellService: {
+          setLayout: async (request) => {
+            this._layout = request.layout;
+            this._invitationCode = request.invitationCode;
+            this._spaceKey = request.spaceKey;
+            this._spaceId = request.spaceId;
+            this.layoutUpdate.emit(request);
+          },
+          setInvitationUrl: async (request) => {
+            this._invitationUrl = request.invitationUrl;
+            this._deviceInvitationParam = request.deviceInvitationParam;
+            this._spaceInvitationParam = request.spaceInvitationParam;
+            this.invitationUrlUpdate.emit(request);
+          }
+        }
+      },
+      port: this._port
+    });
+    await this._appRpc.open();
+  }
+  async close() {
+    await this._appRpc?.close();
+    this._appRpc = void 0;
+  }
+};
+
+// packages/sdk/shell/src/translations/locales/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  os: () => os
+});
+var os = {
+  "manage profile label": "Manage identity",
+  "identity offline description": "Offline",
+  "sidebar label": "DXOS sidebar",
+  "copy invitation code label": "Copy URL",
+  "copy success label": "Copied",
+  "copy self public key label": "Copy public key",
+  "open share panel label": "View QR code",
+  "joining space heading": "Joining space",
+  "join space heading": "Enter space invitation",
+  "halo heading": "Initialize device identity",
+  "exit label": "Exit",
+  "identity selector title": "Join as",
+  "identity radio group title": "Select an identity you\u2019ve associated with this device already",
+  "add identity label": "Add",
+  "continue label": "Continue",
+  "back label": "Back",
+  "next label": "Next",
+  "close label": "Close",
+  "auth choices label": "Choose an identity",
+  "create identity label": "Create an identity",
+  "create identity description": "Create a new identity.",
+  "recover identity label": "Use a seed phrase",
+  "recover identity description": "Enter your seed phrase to log in manually.",
+  "join identity label": "Use another device",
+  "join identity description": "Add this device to an identity you\u2019re already logged into on another device.",
+  "deselect identity label": "Back to identities",
+  "addition method chooser title": "An identity is required to continue",
+  "new identity input label": "Set display name",
+  "recover identity input label": "Type or paste your seed phrase",
+  "failed to create identity message": "Failed to create an identity.",
+  "failed to recover identity message": "Failed to recover an identity from the provided seed phrase.",
+  "failed to authenticate message": "Incorrect code.",
+  "identity added label": "Created identity & added to this device:",
+  "join space as identity heading": "<part>as </part><part><icon/><label>{{labelValue}}</label></part>",
+  "error status label": "Failed",
+  "timeout status label": "Timed out",
+  "cancelled status label": "Cancelled",
+  "init status label": "Ready to connect",
+  "connecting status label": "Connecting\u2026",
+  "connected status label": "Enter authentication code",
+  "authenticating status label": "Enter authentication code",
+  "success status label": "Success",
+  "cancel label": "Cancel",
+  "done label": "Done",
+  "reset label": "Start over",
+  "auth code input label": "Enter the verification code",
+  "invitation input label": "Paste an invitation code or URL",
+  "create device invitation label": "Add device",
+  "create space invitation label": "Invite",
+  "qr label": "Scan to accept invitation",
+  "empty invitations message": "No pending invitations",
+  "empty device list message": "No devices authenticated other than this device.",
+  "show all spaces label": "All spaces",
+  "all spaces label": "All spaces",
+  "create space label": "Create a new space",
+  "join space label": "Join a space",
+  "show current space label": "Current space",
+  "view space invitations label": "View space invitations",
+  "toggle sidebar label": "Open/close sidebar",
+  "open sidebar label": "Open sidebar",
+  "close sidebar label": "Close sidebar",
+  "welcome message": "Welcome",
+  "selecting identity heading": "Selecting identity",
+  "devices heading": "Devices",
+  "identity heading": "Profile settings",
+  "choose add device label": "Add device",
+  "choose devices label": "Manage devices",
+  "choose profile label": "Edit profile",
+  "choose sign out label": "Reset storage",
+  "choose join new identity label": "Join existing device",
+  "empty space members message": "There is nobody in this space yet.",
+  "back to all invitations label": "Back to all invitations",
+  "invitation heading": "Invitation",
+  "invitation list heading": "Invitations",
+  "device invitation list heading": "Pending device invitations",
+  "space invitation list heading": "Pending invitations",
+  "device list heading": "Devices",
+  "space member list heading": "Members",
+  "space panel heading": "Space membership",
+  "auth code message": "Enter the following auth code on the joining device.",
+  "auth other device emoji message": "Be sure the other device shows the following symbol:",
+  "display name input label": "Display name",
+  "display name input placeholder": "Enter a display name",
+  "invite one label": "Single-use invitation",
+  "invite one description": "Only one user may join.",
+  "invite one qr label": "Single-use invitation",
+  "invite one list item label": "Active single-use invitation",
+  "invite many label": "Multi-use invitation",
+  "invite many description": "Anyone with the link can join.",
+  "invite many qr label": "Multi-use invitation",
+  "invite many list item label": "Active multi-use invitation",
+  "invite options label": "Change the active invite option.",
+  "reset in progress label": "Resetting...",
+  "confirm label": "Confirm",
+  "reset storage input label": "WARNING: This will delete all data on this device. Type {{confirmationValue}} to continue.",
+  "join new identity input label": "WARNING: To join an existing device all data on this device will be deleted. Type {{confirmationValue}} to continue.",
+  "failed to reset identity message": "Failed to reset identity.",
+  "confirmation value": "RESET",
+  "confirmation placeholder": "Enter {{confirmationValue}} to continue.",
+  "sign out chooser title": "Danger zone",
+  "sign out chooser message": "Proceeding with the action below will erase all data on this device.",
+  "join new identity label": "Join a new identity",
+  "reset device label": "Reset storage",
+  "reset device confirm message": "Are you sure you want to reset your device? All data will be lost.",
+  "emoji and color label": "Emoji and color",
+  "clear label": "Use default",
+  "select emoji label": "Avatar emoji",
+  "select hue label": "Avatar background color",
+  "resetting message": "One moment while the device is reset\u2026",
+  "red label": "Red",
+  "orange label": "Orange",
+  "amber label": "Amber",
+  "yellow label": "Yellow",
+  "lime label": "Lime",
+  "green label": "Green",
+  "emerald label": "Emerald",
+  "teal label": "Teal",
+  "cyan label": "Cyan",
+  "sky label": "Sky",
+  "blue label": "Blue",
+  "indigo label": "Indigo",
+  "violet label": "Violet",
+  "purple label": "Purple",
+  "fuchsia label": "Fuchsia",
+  "pink label": "Pink",
+  "rose label": "Rose",
+  "current device tag label": "This device",
+  "device name placeholder": "{{platform}} on {{os}}",
+  "more options label": "More options",
+  "disconnect label": "Go offline.",
+  "connect label": "Go online.",
+  "edit device label": "Edit device name & avatar",
+  "agent heading": "Agent",
+  "create agent clickwrap": 'By creating an agent, you agree to our <tosLink href="https://dxos.org/tos">Terms of\xA0Service</tosLink>.',
+  "create agent description": "Creating an agent helps keep your devices and peers in-sync. An agent is like any other device, but since it\u2019s always online your changes will sync even when all your physical devices are\xA0asleep.",
+  "create agent label": "Start an agent",
+  "destroy agent label": "Shut down agent",
+  "agent device label": "Your agent",
+  "shell fallback title": "Shell failed to connect",
+  "creating agent label": "Starting agent\u2026",
+  "destroying agent label": "Stopping agent\u2026",
+  "getting agent label": "Checking agent status\u2026",
+  "agent requested label": "Agent requested",
+  "agent requested description": "The agent service is creating an agent for you. Once the agent connects, it will display in the devices list.",
+  "authenticating label": "Authenticating\u2026",
+  "create recovery code label": "Create recovery code",
+  "choose recover identity label": "Recover identity"
+};
+
+// packages/sdk/shell/src/translations/index.ts
+var osTranslations = {
+  "en-US": en_US_exports
+};
+
+// packages/sdk/shell/src/composites/Shell/run-shell.tsx
+var runShell = async (config = new Config()) => {
+  const runtime = new ShellRuntimeImpl(createIFramePort({
+    channel: DEFAULT_SHELL_CHANNEL
+  }));
+  await runtime.open();
+  try {
+    const services = new ClientServicesProxy(createIFramePort({
+      channel: DEFAULT_CLIENT_CHANNEL
+    }));
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
+      tx: defaultTx,
+      resourceExtensions: [
+        osTranslations
+      ]
+    }, /* @__PURE__ */ React47.createElement(ClientProvider, {
+      config,
+      services,
+      noBanner: true
+    }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip8.Provider, null, /* @__PURE__ */ React47.createElement(AgentHostingProvider, null, /* @__PURE__ */ React47.createElement(Shell, {
+      runtime
+    }))))))));
+  } catch {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
+      tx: defaultTx,
+      resourceExtensions: [
+        osTranslations
+      ]
+    }, /* @__PURE__ */ React47.createElement(Fallback, {
+      onClose: () => runtime.setAppContext({
+        display: ShellDisplay2.NONE
+      })
+    }))));
+  }
+};
+var Fallback = ({ onClose }) => {
+  const { t } = useTranslation26("os");
+  return /* @__PURE__ */ React47.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, {
+    asChild: true,
+    onClick: () => onClose?.()
+  }, /* @__PURE__ */ React47.createElement(Button11, {
+    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 { 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";
+
+// packages/sdk/shell/src/composites/Shell/memory-shell-runtime.ts
+import { Event as Event2 } from "@dxos/async";
+import { ShellLayout as ShellLayout3 } from "@dxos/react-client";
+var MemoryShellRuntime = class {
+  constructor({ layout, invitationCode, spaceKey, invitationUrl, deviceInvitationParam, spaceInvitationParam } = {}) {
+    this.layoutUpdate = new Event2();
+    this.invitationUrlUpdate = new Event2();
+    this.contextUpdate = new Event2();
+    this._layout = layout ?? ShellLayout3.DEFAULT;
+    this._invitationCode = invitationCode;
+    this._spaceKey = spaceKey;
+    this._invitationUrl = invitationUrl ?? window.location.origin;
+    this._deviceInvitationParam = deviceInvitationParam ?? "deviceInvitationCode";
+    this._spaceInvitationParam = spaceInvitationParam ?? "spaceInvitationCode";
+  }
+  get layout() {
+    return this._layout;
+  }
+  get invitationCode() {
+    return this._invitationCode;
+  }
+  get spaceKey() {
+    return this._spaceKey;
+  }
+  get invitationUrl() {
+    return this._invitationUrl;
+  }
+  get deviceInvitationParam() {
+    return this._deviceInvitationParam;
+  }
+  get spaceInvitationParam() {
+    return this._spaceInvitationParam;
+  }
+  setLayout(request) {
+    this._layout = request.layout;
+    this._invitationCode = request.invitationCode;
+    this._spaceKey = request.spaceKey;
+    this.layoutUpdate.emit(request);
+  }
+  setInvitationUrl(request) {
+    this._invitationUrl = request.invitationUrl;
+    this._deviceInvitationParam = request.deviceInvitationParam;
+    this._spaceInvitationParam = request.spaceInvitationParam;
+    this.invitationUrlUpdate.emit(request);
+  }
+  async setAppContext(context) {
+    this.contextUpdate.emit(context);
+  }
+};
+
+// packages/sdk/shell/src/composites/Shell/ShellContext.tsx
+var ShellContext = /* @__PURE__ */ createContext2({});
+var useShell = () => {
+  const client = useClient10();
+  const { runtime, setDisplay } = useContext2(ShellContext);
+  const setLayout = async (layout, options) => {
+    if (runtime) {
+      if (layout === ShellLayout4.DEFAULT) {
+        setDisplay?.(ShellDisplay3.NONE);
+      } else {
+        setDisplay?.(ShellDisplay3.FULLSCREEN);
+      }
+      runtime.setLayout({
+        layout,
+        ...options
+      });
+    }
+    await client.shell.open(layout, options);
+  };
+  return {
+    setLayout
+  };
+};
+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 shellRuntime = useMemo6(() => {
+    if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
+      return;
+    }
+    if (spaceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout4.JOIN_SPACE,
+        invitationCode: spaceInvitationCode
+      });
+    }
+    if (deviceInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout4.INITIALIZE_IDENTITY,
+        invitationCode: deviceInvitationCode
+      });
+    }
+    return new MemoryShellRuntime({
+      layout: identity ? ShellLayout4.DEFAULT : ShellLayout4.INITIALIZE_IDENTITY
+    });
+  }, [
+    client,
+    identity,
+    spaceInvitationCode,
+    deviceInvitationCode
+  ]);
+  const handleKeyDown = useCallback8((event) => {
+    if (!space || !shellRuntime) {
+      return;
+    }
+    const modifier = event.ctrlKey || event.metaKey;
+    if (event.key === ">" && event.shiftKey && modifier) {
+      shellRuntime.setLayout({
+        layout: ShellLayout4.SHARE_IDENTITY
+      });
+      setDisplay(ShellDisplay3.FULLSCREEN);
+    } else if (event.key === "." && modifier) {
+      shellRuntime.setLayout({
+        layout: ShellLayout4.SPACE,
+        spaceKey: space.key
+      });
+      setDisplay(ShellDisplay3.FULLSCREEN);
+    }
+  }, [
+    space,
+    shellRuntime
+  ]);
+  useEffect9(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    shellRuntime,
+    handleKeyDown
+  ]);
+  useEffect9(() => {
+    if (!shellRuntime) {
+      return;
+    }
+    return shellRuntime.contextUpdate.on(({ display: display2, spaceKey }) => {
+      if (display2) {
+        setDisplay(display2);
+      }
+      onJoinedSpace?.(spaceKey);
+    });
+  }, [
+    shellRuntime
+  ]);
+  return /* @__PURE__ */ React48.createElement(React48.Fragment, null, shellRuntime && /* @__PURE__ */ React48.createElement("div", {
+    className: mx25(display === ShellDisplay3.NONE ? "hidden" : "")
+  }, /* @__PURE__ */ React48.createElement(Shell, {
+    runtime: shellRuntime
+  })), /* @__PURE__ */ React48.createElement(ShellContext.Provider, {
+    value: {
+      runtime: shellRuntime,
+      setDisplay
+    }
+  }, children));
+};
+export {
+  Action,
+  Actions,
+  AgentConfig,
+  AuthCode,
+  BifurcatedAction,
+  Centered,
+  ClipboardContext,
+  ClipboardProvider,
+  CloseButton,
+  CompoundButton,
+  ConfirmReset,
+  ConfirmResetImpl,
+  CopyButton,
+  CopyButtonIconOnly,
+  DeviceList,
+  Emoji,
+  EmojiPickerBlock,
+  EmojiPickerToolbarButton,
+  Heading,
+  HuePickerBlock,
+  HuePickerToolbarButton,
+  IdentityDialog,
+  IdentityListItem,
+  IdentityPanel,
+  IdentityPanelImpl,
+  Input,
+  InvitationList,
+  InvitationListContainer,
+  InvitationListItem,
+  InvitationListItemImpl,
+  InvitationManager,
+  JoinDialog,
+  JoinPanel,
+  JoinPanelImpl,
+  Label,
+  Shell,
+  ShellContext,
+  ShellProvider,
+  SpaceDialog,
+  SpaceListItem,
+  SpaceMemberList,
+  SpaceMemberListImpl,
+  SpacePanel,
+  SpacePanelImpl,
+  StatusPanel,
+  StepHeading,
+  Viewport,
+  activeBgColor,
+  activeStrokeColor,
+  activeTextColor,
+  cancelledBgColor,
+  cancelledStrokeColor,
+  cancelledTextColor,
+  createViewportScope,
+  errorBgColor,
+  errorStrokeColor,
+  errorTextColor,
+  inactiveBgColor,
+  inactiveStrokeColor,
+  inactiveTextColor,
+  osTranslations,
+  resolvedBgColor,
+  resolvedStrokeColor,
+  resolvedTextColor,
+  runShell,
+  stepStyles,
+  successBgColor,
+  successStrokeColor,
+  successTextColor,
+  useClipboardContext,
+  useShell,
+  useViewportContext
+};
+//# sourceMappingURL=react.mjs.map