@dxos/plugin-client 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/node/chunk-73HHNJMV.cjs

@@ -0,0 +1,719 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chunk_73HHNJMV_exports = {};
+__export(chunk_73HHNJMV_exports, {
+  DevicesContainer: () => DevicesContainer,
+  JOIN_DIALOG: () => JOIN_DIALOG,
+  JoinDialog: () => JoinDialog,
+  ProfileContainer: () => ProfileContainer,
+  RECOVERY_CODE_DIALOG: () => RECOVERY_CODE_DIALOG,
+  RESET_DIALOG: () => RESET_DIALOG,
+  RecoveryCodeDialog: () => RecoveryCodeDialog,
+  RecoveryCredentialsContainer: () => RecoveryCredentialsContainer,
+  ResetDialog: () => ResetDialog
+});
+module.exports = __toCommonJS(chunk_73HHNJMV_exports);
+var import_chunk_BL6EBWOS = require("./chunk-BL6EBWOS.cjs");
+var import_chunk_DJKWB5L6 = require("./chunk-DJKWB5L6.cjs");
+var import_tracking = require("@preact-signals/safe-react/tracking");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = __toESM(require("react"));
+var import_react_qr_rounded = require("react-qr-rounded");
+var import_app_framework = require("@dxos/app-framework");
+var import_log = require("@dxos/log");
+var import_react_client = require("@dxos/react-client");
+var import_halo = require("@dxos/react-client/halo");
+var import_invitations = require("@dxos/react-client/invitations");
+var import_mesh = require("@dxos/react-client/mesh");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_form = require("@dxos/react-ui-form");
+var import_react_ui_stack = require("@dxos/react-ui-stack");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react3 = require("@dxos/shell/react");
+var import_util = require("@dxos/util");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
+var import_react4 = __toESM(require("react"));
+var import_app_framework2 = require("@dxos/app-framework");
+var import_types = require("@dxos/plugin-observability/types");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react5 = require("@dxos/shell/react");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
+var import_effect = require("effect");
+var import_react6 = __toESM(require("react"));
+var import_async = require("@dxos/async");
+var import_react_client2 = require("@dxos/react-client");
+var import_halo2 = require("@dxos/react-client/halo");
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react_ui_form2 = require("@dxos/react-ui-form");
+var import_react_ui_pickers = require("@dxos/react-ui-pickers");
+var import_react_ui_stack2 = require("@dxos/react-ui-stack");
+var import_util2 = require("@dxos/util");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
+var import_react7 = __toESM(require("react"));
+var import_react_ui4 = require("@dxos/react-ui");
+var import_tracking5 = require("@preact-signals/safe-react/tracking");
+var import_react8 = __toESM(require("react"));
+var import_app_framework3 = require("@dxos/app-framework");
+var import_halo3 = require("@dxos/react-client/halo");
+var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_form3 = require("@dxos/react-ui-form");
+var import_react_ui_stack3 = require("@dxos/react-ui-stack");
+var import_tracking6 = require("@preact-signals/safe-react/tracking");
+var import_react9 = __toESM(require("react"));
+var import_app_framework4 = require("@dxos/app-framework");
+var import_react_client3 = require("@dxos/react-client");
+var import_react_ui6 = require("@dxos/react-ui");
+var import_react10 = require("@dxos/shell/react");
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-client/src/components/DevicesContainer.tsx";
+var DevicesContainer = ({ createInvitationUrl }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { t } = (0, import_react_ui.useTranslation)("os");
+    const { dispatchPromise: dispatch } = (0, import_app_framework.useIntentDispatcher)();
+    const devices = (0, import_halo.useDevices)();
+    const { swarm: connectionState } = (0, import_mesh.useNetworkStatus)();
+    const handleResetStorage = (0, import_react2.useCallback)(() => dispatch((0, import_app_framework.createIntent)(import_chunk_BL6EBWOS.ClientAction.ResetStorage)), [
+      dispatch
+    ]);
+    const handleRecover = (0, import_react2.useCallback)(() => dispatch((0, import_app_framework.createIntent)(import_chunk_BL6EBWOS.ClientAction.ResetStorage, {
+      mode: "recover"
+    })), [
+      dispatch
+    ]);
+    const handleJoinNewIdentity = (0, import_react2.useCallback)(() => dispatch((0, import_app_framework.createIntent)(import_chunk_BL6EBWOS.ClientAction.ResetStorage, {
+      mode: "join new identity"
+    })), [
+      dispatch
+    ]);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Clipboard.Provider, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_stack.StackItem.Content, {
+      classNames: "block overflow-y-auto"
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlPage, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlSection, {
+      title: t("devices verbose label", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      }),
+      description: t("devices description", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      })
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlFrame, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlFrameItem, {
+      title: t("devices label", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      })
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.List, null, devices.map((device) => {
+      return /* @__PURE__ */ import_react2.default.createElement(import_react3.DeviceListItem, {
+        key: device.deviceKey.toHex(),
+        device,
+        connectionState
+      });
+    }))), createInvitationUrl && /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlFrameItem, {
+      title: "Add device"
+    }, /* @__PURE__ */ import_react2.default.createElement(DeviceInvitation, {
+      createInvitationUrl
+    })))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlSection, {
+      title: t("danger zone title", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      }),
+      description: t("danger zone description", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      })
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlGroup, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlItem, {
+      title: t("reset device label"),
+      description: t("reset device description", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      })
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+      variant: "destructive",
+      onClick: handleResetStorage,
+      "data-testid": "devicesContainer.reset"
+    }, t("reset device label"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlItem, {
+      title: t("recover identity label"),
+      description: t("recover identity description", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      })
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+      variant: "destructive",
+      onClick: handleRecover,
+      "data-testid": "devicesContainer.recover"
+    }, t("recover identity label"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_form.ControlItem, {
+      title: t("join new identity label"),
+      description: t("join new identity description", {
+        ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+      })
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+      variant: "destructive",
+      onClick: handleJoinNewIdentity,
+      "data-testid": "devicesContainer.joinExisting"
+    }, t("join new identity label"))))))));
+  } finally {
+    _effect.f();
+  }
+};
+var DeviceInvitation = (props) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const client = (0, import_react_client.useClient)();
+    const [invitation, setInvitation] = (0, import_react2.useState)();
+    const onInvitationCreate = (0, import_react2.useCallback)(() => {
+      const invitation2 = client.halo.share();
+      if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+        const subscription = invitation2.subscribe((invitation3) => {
+          const invitationCode = import_invitations.InvitationEncoder.encode(invitation3);
+          if (invitation3.state === import_invitations.Invitation.State.CONNECTING) {
+            import_log.log.info(JSON.stringify({
+              invitationCode,
+              authCode: invitation3.authCode
+            }), void 0, {
+              F: __dxlog_file,
+              L: 141,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+            subscription.unsubscribe();
+          }
+        });
+      }
+      setInvitation(invitation2);
+    }, [
+      client
+    ]);
+    const onInvitationDone = (0, import_react2.useCallback)(() => {
+      setInvitation(void 0);
+    }, []);
+    if (invitation) {
+      return /* @__PURE__ */ import_react2.default.createElement(DeviceInvitationImpl, {
+        ...props,
+        invitation,
+        onInvitationCreate,
+        onInvitationDone
+      });
+    } else {
+      return /* @__PURE__ */ import_react2.default.createElement(InvitationSection, {
+        ...props,
+        onInvitationCreate,
+        onInvitationDone
+      });
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var DeviceInvitationImpl = ({ invitation: invitationObservable, createInvitationUrl, onInvitationDone, onInvitationCreate }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const invitation = (0, import_react_client.useMulticastObservable)(invitationObservable);
+    const url = createInvitationUrl(import_invitations.InvitationEncoder.encode(invitation));
+    (0, import_react2.useEffect)(() => {
+      if (invitation.state >= import_invitations.Invitation.State.SUCCESS) {
+        onInvitationDone();
+      }
+    }, [
+      invitation.state
+    ]);
+    return /* @__PURE__ */ import_react2.default.createElement(InvitationSection, {
+      ...invitation,
+      url,
+      onInvitationDone,
+      onInvitationCreate
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var InvitationSection = ({ state = -1, authCode, invitationId = "never", url = "never", onInvitationDone = () => {
+}, onInvitationCreate = () => {
+} }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { t } = (0, import_react_ui.useTranslation)(import_chunk_DJKWB5L6.CLIENT_PLUGIN);
+    const activeView = state < 0 ? "init" : state >= import_invitations.Invitation.State.CANCELLED ? "complete" : state >= import_invitations.Invitation.State.READY_FOR_AUTHENTICATION && authCode ? "auth-code" : "qr-code";
+    return activeView === "init" ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("p", {
+      className: "text-description mbe-2"
+    }, t("add device description")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.IconButton, {
+      icon: "ph--plus--regular",
+      label: t("create device invitation label"),
+      disabled: state >= 0,
+      classNames: "is-full",
+      "data-testid": "devicesContainer.createInvitation",
+      onClick: onInvitationCreate
+    })) : /* @__PURE__ */ import_react2.default.createElement(import_react3.Viewport.Root, {
+      activeView
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react3.Viewport.Views, null, /* @__PURE__ */ import_react2.default.createElement(import_react3.Viewport.View, {
+      id: "init"
+    }), /* @__PURE__ */ import_react2.default.createElement(import_react3.Viewport.View, {
+      id: "complete"
+    }, /* @__PURE__ */ import_react2.default.createElement(InvitationComplete, {
+      statusValue: state
+    })), /* @__PURE__ */ import_react2.default.createElement(import_react3.Viewport.View, {
+      id: "auth-code"
+    }, /* @__PURE__ */ import_react2.default.createElement(InvitationAuthCode, {
+      id: invitationId,
+      code: authCode ?? "never",
+      onCancel: onInvitationDone
+    })), /* @__PURE__ */ import_react2.default.createElement(import_react3.Viewport.View, {
+      id: "qr-code"
+    }, /* @__PURE__ */ import_react2.default.createElement(InvitationQR, {
+      id: invitationId,
+      url,
+      onCancel: onInvitationDone
+    }))));
+  } finally {
+    _effect.f();
+  }
+};
+var InvitationQR = ({ id, url, onCancel }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { t } = (0, import_react_ui.useTranslation)("os");
+    const qrLabel = (0, import_react_ui.useId)("devices-container__qr-code");
+    const emoji = (0, import_util.hexToEmoji)(id);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("p", {
+      className: "text-description"
+    }, t("qr code description", {
+      ns: import_chunk_DJKWB5L6.CLIENT_PLUGIN
+    })), /* @__PURE__ */ import_react2.default.createElement("div", {
+      role: "group",
+      className: "grid grid-cols-[1fr_min-content] mlb-2 gap-2"
+    }, /* @__PURE__ */ import_react2.default.createElement("div", {
+      role: "none",
+      className: "is-full aspect-square relative text-description"
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_qr_rounded.QR, {
+      rounding: 100,
+      backgroundColor: "transparent",
+      color: "currentColor",
+      "aria-labelledby": qrLabel,
+      errorCorrectionLevel: "Q",
+      cutout: true
+    }, url ?? "never"), /* @__PURE__ */ import_react2.default.createElement(import_react3.Centered, null, /* @__PURE__ */ import_react2.default.createElement(import_react3.Emoji, {
+      text: emoji
+    }))), /* @__PURE__ */ import_react2.default.createElement("span", {
+      id: qrLabel,
+      className: "sr-only"
+    }, t("qr label"))), /* @__PURE__ */ import_react2.default.createElement("div", {
+      className: "flex justify-center"
+    }, /* @__PURE__ */ import_react2.default.createElement("div", {
+      className: "flex gap-2"
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Clipboard.Button, {
+      value: url ?? "never"
+    }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+      variant: "ghost",
+      onClick: onCancel
+    }, t("cancel label")))));
+  } finally {
+    _effect.f();
+  }
+};
+var InvitationAuthCode = ({ id, code, onCancel }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { t } = (0, import_react_ui.useTranslation)("os");
+    const emoji = (0, import_util.hexToEmoji)(id);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("p", {
+      className: "text-description"
+    }, t("auth other device emoji message")), emoji && /* @__PURE__ */ import_react2.default.createElement(import_react3.Emoji, {
+      text: emoji,
+      className: "mli-auto mlb-2 text-center"
+    }), /* @__PURE__ */ import_react2.default.createElement("p", {
+      className: "text-description"
+    }, t("auth code message")), /* @__PURE__ */ import_react2.default.createElement(import_react3.AuthCode, {
+      code,
+      large: true,
+      classNames: "mli-auto mlb-2 text-center grow"
+    }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+      variant: "ghost",
+      onClick: onCancel
+    }, t("cancel label")));
+  } finally {
+    _effect.f();
+  }
+};
+var InvitationComplete = ({ statusValue }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return statusValue > 0 ? /* @__PURE__ */ import_react2.default.createElement(import_react.Check, {
+      className: (0, import_react_ui_theme.mx)("m-1.5", (0, import_react_ui_theme.getSize)(6))
+    }) : /* @__PURE__ */ import_react2.default.createElement(import_react.X, {
+      className: (0, import_react_ui_theme.mx)("m-1.5", (0, import_react_ui_theme.getSize)(6))
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var JOIN_DIALOG = `${import_chunk_DJKWB5L6.CLIENT_PLUGIN}/JoinDialog`;
+var JoinDialog = (props) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { dispatchPromise: dispatch } = (0, import_app_framework2.useIntentDispatcher)();
+    const { t } = (0, import_react_ui2.useTranslation)(import_chunk_DJKWB5L6.CLIENT_PLUGIN);
+    const handleCancelResetStorage = (0, import_react4.useCallback)(() => dispatch((0, import_app_framework2.createIntent)(import_chunk_BL6EBWOS.ClientAction.ShareIdentity)), [
+      dispatch
+    ]);
+    const handleDone = (0, import_react4.useCallback)(async (result) => {
+      if (result?.identityKey) {
+        await Promise.all([
+          dispatch((0, import_app_framework2.createIntent)(import_app_framework2.LayoutAction.UpdateDialog, {
+            part: "dialog",
+            options: {
+              state: false
+            }
+          })),
+          dispatch((0, import_app_framework2.createIntent)(import_types.ObservabilityAction.SendEvent, {
+            name: props.initialDisposition === "recover-identity" ? "identity.recover" : "identity.join"
+          }))
+        ]);
+      }
+    }, [
+      dispatch
+    ]);
+    return /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Dialog.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Dialog.Title, {
+      classNames: "sr-only"
+    }, t("join space label", {
+      ns: "os"
+    })), /* @__PURE__ */ import_react4.default.createElement(import_react5.JoinPanel, {
+      mode: "halo-only",
+      ...props,
+      exitActionParent: /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Dialog.Close, {
+        asChild: true
+      }),
+      doneActionParent: /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Dialog.Close, {
+        asChild: true
+      }),
+      onCancelResetStorage: handleCancelResetStorage,
+      onDone: handleDone
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var getDefaultHueValue = (identity) => (0, import_util2.hexToHue)(identity?.identityKey.toHex() ?? "0");
+var getDefaultEmojiValue = (identity) => (0, import_util2.hexToEmoji)(identity?.identityKey.toHex() ?? "0");
+var getHueValue = (identity) => identity?.profile?.data?.hue || getDefaultHueValue(identity);
+var getEmojiValue = (identity) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
+var ProfileContainer = () => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { t } = (0, import_react_ui3.useTranslation)(import_chunk_DJKWB5L6.CLIENT_PLUGIN);
+    const client = (0, import_react_client2.useClient)();
+    const identity = (0, import_halo2.useIdentity)();
+    const [displayName, setDisplayNameDirectly] = (0, import_react6.useState)(identity?.profile?.displayName ?? "");
+    const [emoji, setEmojiDirectly] = (0, import_react6.useState)(getEmojiValue(identity));
+    const [hue, setHueDirectly] = (0, import_react6.useState)(getHueValue(identity));
+    const updateProfile = (0, import_react6.useMemo)(() => (0, import_async.debounce)((profile) => client.halo.updateProfile({
+      displayName: profile.displayName,
+      data: {
+        emoji: profile.emoji,
+        hue: profile.hue
+      }
+    }), 2e3), []);
+    const handleSave = (0, import_react6.useCallback)((profile) => {
+      setDisplayNameDirectly(profile.displayName);
+      setEmojiDirectly(profile.emoji);
+      setHueDirectly(profile.hue);
+      updateProfile(profile);
+    }, [
+      identity
+    ]);
+    const values = (0, import_react6.useMemo)(() => ({
+      displayName,
+      emoji,
+      hue,
+      did: identity?.did
+    }), [
+      identity,
+      displayName,
+      emoji,
+      hue
+    ]);
+    const customElements = (0, import_react6.useMemo)(() => ({
+      displayName: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = (0, import_react6.useCallback)(({ target: { value } }) => onValueChange(type, value), [
+          onValueChange,
+          type
+        ]);
+        return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_form2.ControlItemInput, {
+          title: label,
+          description: t("display name description")
+        }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Input.TextInput, {
+          value: getValue(),
+          onChange: handleChange,
+          placeholder: t("display name input placeholder"),
+          classNames: "min-is-64"
+        }));
+      },
+      emoji: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = (0, import_react6.useCallback)((nextEmoji) => onValueChange(type, nextEmoji), [
+          onValueChange,
+          type
+        ]);
+        const handleEmojiReset = (0, import_react6.useCallback)(() => onValueChange(type, getDefaultEmojiValue(identity)), [
+          onValueChange,
+          type
+        ]);
+        return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_form2.ControlItem, {
+          title: label,
+          description: t("icon description")
+        }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_pickers.EmojiPickerBlock, {
+          triggerVariant: "default",
+          emoji: getValue(),
+          onChangeEmoji: handleChange,
+          onClickClear: handleEmojiReset,
+          classNames: "justify-self-end"
+        }));
+      },
+      hue: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = (0, import_react6.useCallback)((nextHue) => onValueChange(type, nextHue), [
+          onValueChange,
+          type
+        ]);
+        const handleHueReset = (0, import_react6.useCallback)(() => onValueChange(type, getDefaultHueValue(identity)), [
+          onValueChange,
+          type
+        ]);
+        return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_form2.ControlItem, {
+          title: label,
+          description: t("hue description")
+        }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_pickers.HuePicker, {
+          value: getValue(),
+          onChange: handleChange,
+          onReset: handleHueReset,
+          classNames: "[--hue-preview-size:1.5rem] justify-self-end"
+        }));
+      },
+      // TODO(wittjosiah): We need text input annotations for disabled and copyable.
+      did: ({ label, getValue }) => {
+        return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_form2.ControlItemInput, {
+          title: label,
+          description: t("did description")
+        }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.ButtonGroup, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Input.TextInput, {
+          value: getValue(),
+          disabled: true,
+          classNames: "min-is-64"
+        }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Clipboard.IconButton, {
+          value: getValue() ?? ""
+        })));
+      }
+    }), [
+      t
+    ]);
+    return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_stack2.StackItem.Content, {
+      classNames: "block overflow-y-auto"
+    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_form2.ControlPage, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Clipboard.Provider, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_form2.ControlSection, {
+      title: t("profile label"),
+      description: t("profile description")
+    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_form2.Form, {
+      schema: ProfileSchema,
+      values,
+      autoSave: true,
+      onSave: handleSave,
+      Custom: customElements,
+      classNames: 'p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+    })))));
+  } finally {
+    _effect.f();
+  }
+};
+var ProfileSchema = import_effect.Schema.Struct({
+  displayName: import_effect.Schema.String.annotations({
+    title: "Display name"
+  }),
+  emoji: import_effect.Schema.String.annotations({
+    title: "Avatar"
+  }),
+  hue: import_effect.Schema.String.annotations({
+    title: "Color"
+  }),
+  did: import_effect.Schema.String.annotations({
+    title: "DID"
+  })
+});
+var RECOVERY_CODE_DIALOG = `${import_chunk_DJKWB5L6.CLIENT_PLUGIN}/RecoveryCodeDialog`;
+var RecoveryCodeDialog = ({ code }) => {
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { t } = (0, import_react_ui4.useTranslation)(import_chunk_DJKWB5L6.CLIENT_PLUGIN);
+    const [confirmation, setConfirmation] = (0, import_react7.useState)(false);
+    const handleConfirmation = (0, import_react7.useCallback)((checked) => setConfirmation(checked), []);
+    return /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.AlertDialog.Content, {
+      classNames: "bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.AlertDialog.Title, null, t("recovery code dialog title")), /* @__PURE__ */ import_react7.default.createElement("p", {
+      className: "py-4"
+    }, t("recovery code dialog description")), /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Clipboard.Provider, null, /* @__PURE__ */ import_react7.default.createElement(Code, {
+      code
+    })), /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "flex flex-col py-4 gap-2"
+    }, /* @__PURE__ */ import_react7.default.createElement("p", null, t("recovery code dialog warning 1")), /* @__PURE__ */ import_react7.default.createElement("p", null, t("recovery code dialog warning 2"))), /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "flex items-center gap-2 pbe-4"
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Input.Root, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Input.Checkbox, {
+      "data-testid": "recoveryCode.confirm",
+      checked: confirmation,
+      onCheckedChange: handleConfirmation
+    }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Input.Label, null, t("recovery code confirmation label")))), /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "flex justify-end"
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.AlertDialog.Action, {
+      asChild: true
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Button, {
+      "data-testid": "recoveryCode.continue",
+      variant: "primary",
+      disabled: !confirmation
+    }, t("continue label")))));
+  } finally {
+    _effect.f();
+  }
+};
+var Code = ({ code }) => {
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const words = code.split(" ");
+    return /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "relative p-2 border border-separator rounded group"
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Clipboard.IconButton, {
+      value: code,
+      classNames: "absolute top-2 right-2 invisible group-hover:visible"
+    }), /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "grid grid-cols-4"
+    }, words.map((word, i) => /* @__PURE__ */ import_react7.default.createElement("div", {
+      key: i,
+      className: "flex items-center p-2 gap-2"
+    }, /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "w-4 text-xs text-center text-subdued"
+    }, i + 1), /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "text-sm"
+    }, word)))));
+  } finally {
+    _effect.f();
+  }
+};
+var MANAGE_CREDENTIALS_DIALOG = `${import_chunk_DJKWB5L6.CLIENT_PLUGIN}/ManageCredentialsDialog`;
+var RecoveryCredentialsContainer = () => {
+  var _effect = (0, import_tracking5.useSignals)();
+  try {
+    const { t } = (0, import_react_ui5.useTranslation)(import_chunk_DJKWB5L6.CLIENT_PLUGIN);
+    const { dispatchPromise: dispatch } = (0, import_app_framework3.useIntentDispatcher)();
+    const credentials = (0, import_halo3.useCredentials)();
+    const recoveryCredentials = credentials.filter((credential) => credential.subject.assertion["@type"] === "dxos.halo.credentials.IdentityRecovery");
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_stack3.StackItem.Content, {
+      classNames: "block overflow-y-auto"
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_form3.ControlPage, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_form3.ControlSection, {
+      title: t("recovery setup dialog title"),
+      description: t("recovery setup dialog description")
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_form3.ControlGroup, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_form3.ControlItem, {
+      title: t("create passkey label"),
+      description: t("create passkey description")
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.IconButton, {
+      label: t("create passkey label"),
+      icon: "ph--key--duotone",
+      variant: "primary",
+      size: 5,
+      onClick: () => dispatch((0, import_app_framework3.createIntent)(import_chunk_BL6EBWOS.ClientAction.CreatePasskey))
+    })), /* @__PURE__ */ import_react8.default.createElement(import_react_ui_form3.ControlItem, {
+      title: t("create recovery code label"),
+      description: t("create recovery code description")
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.IconButton, {
+      label: t("create recovery code label"),
+      icon: "ph--receipt--duotone",
+      variant: "default",
+      size: 5,
+      onClick: () => dispatch((0, import_app_framework3.createIntent)(import_chunk_BL6EBWOS.ClientAction.CreateRecoveryCode))
+    })))), /* @__PURE__ */ import_react8.default.createElement(import_react_ui_form3.ControlSection, {
+      title: t("credentials list label")
+    }, recoveryCredentials.length < 1 ? /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Message.Root, {
+      valence: "error",
+      className: "container-max-width"
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Message.Title, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Icon, {
+      icon: "ph--shield-warning--duotone",
+      size: 5,
+      classNames: "inline-block align-top mbs-px mie-1"
+    }), t("no credentials title")), /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Message.Body, null, t("no credentials message"))) : /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.List, {
+      classNames: "container-max-width pli-2"
+    }, recoveryCredentials.map((credential) => /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.ListItem.Root, {
+      key: credential.id?.toHex()
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.ListItem.Endcap, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Icon, {
+      icon: "ph--key--regular",
+      size: 5
+    })), /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.ListItem.Heading, null, credential.issuanceDate.toLocaleString())))))));
+  } finally {
+    _effect.f();
+  }
+};
+var RESET_DIALOG = `${import_chunk_DJKWB5L6.CLIENT_PLUGIN}/ResetDialog`;
+var ResetDialog = ({ mode, onReset }) => {
+  var _effect = (0, import_tracking6.useSignals)();
+  try {
+    const { t } = (0, import_react_ui6.useTranslation)(import_chunk_DJKWB5L6.CLIENT_PLUGIN);
+    const { dispatchPromise: dispatch } = (0, import_app_framework4.useIntentDispatcher)();
+    const client = (0, import_react_client3.useClient)();
+    const handleReset = (0, import_react9.useCallback)(async () => {
+      await client.reset();
+      const target = mode === "join new identity" ? "deviceInvitation" : mode === "recover" ? "recoverIdentity" : void 0;
+      await onReset?.({
+        target
+      });
+    }, [
+      dispatch,
+      client,
+      mode,
+      onReset
+    ]);
+    const handleCancel = (0, import_react9.useCallback)(() => {
+      void dispatch((0, import_app_framework4.createIntent)(import_app_framework4.LayoutAction.UpdateDialog, {
+        part: "dialog",
+        options: {
+          state: false
+        }
+      }));
+    }, [
+      dispatch
+    ]);
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Dialog.Content, {
+      classNames: "bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
+    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Dialog.Title, {
+      classNames: "sr-only"
+    }, t("reset dialog title")), /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Dialog.Description, {
+      classNames: "sr-only"
+    }, t("reset dialog description")), /* @__PURE__ */ import_react9.default.createElement(import_react10.ConfirmReset, {
+      active: true,
+      mode,
+      onConfirm: handleReset,
+      onCancel: handleCancel
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevicesContainer,
+  JOIN_DIALOG,
+  JoinDialog,
+  ProfileContainer,
+  RECOVERY_CODE_DIALOG,
+  RESET_DIALOG,
+  RecoveryCodeDialog,
+  RecoveryCredentialsContainer,
+  ResetDialog
+});
+//# sourceMappingURL=chunk-73HHNJMV.cjs.map