@dxos/plugin-client 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

package/dist/lib/browser/react-surface-RSQ74XCT.mjs

@@ -0,0 +1,675 @@
+import {
+  JOIN_DIALOG,
+  RECOVERY_CODE_DIALOG,
+  RESET_DIALOG
+} from "./chunk-G7C3S2BE.mjs";
+import {
+  Account,
+  ClientOperation,
+  meta
+} from "./chunk-4BZGRIFS.mjs";
+
+// src/capabilities/react-surface/react-surface.tsx
+import * as Effect2 from "effect/Effect";
+import React7 from "react";
+import { Capability as Capability2, Common as Common3 } from "@dxos/app-framework";
+
+// src/components/DevicesContainer.tsx
+import React, { useCallback, useEffect, useState } from "react";
+import { QR } from "react-qr-rounded";
+import { useOperationInvoker } from "@dxos/app-framework/react";
+import { log } from "@dxos/log";
+import { useClient, useMulticastObservable } from "@dxos/react-client";
+import { useDevices } from "@dxos/react-client/halo";
+import { Invitation, InvitationEncoder } from "@dxos/react-client/invitations";
+import { useNetworkStatus } from "@dxos/react-client/mesh";
+import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from "@dxos/react-ui";
+import { ControlFrame, ControlFrameItem, ControlGroup, ControlItem, ControlPage, ControlSection } from "@dxos/react-ui-form";
+import { translationKey } from "@dxos/shell/react";
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from "@dxos/shell/react";
+import { osTranslations } from "@dxos/ui-theme";
+import { hexToEmoji } from "@dxos/util";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/components/DevicesContainer.tsx";
+var DevicesContainer = ({ createInvitationUrl }) => {
+  const { t } = useTranslation(translationKey);
+  const { invokePromise } = useOperationInvoker();
+  const devices = useDevices();
+  const { swarm: connectionState } = useNetworkStatus();
+  const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [
+    invokePromise
+  ]);
+  const handleRecover = useCallback(() => invokePromise(ClientOperation.ResetStorage, {
+    mode: "recover"
+  }), [
+    invokePromise
+  ]);
+  const handleJoinNewIdentity = useCallback(() => invokePromise(ClientOperation.ResetStorage, {
+    mode: "join new identity"
+  }), [
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(ControlPage, null, /* @__PURE__ */ React.createElement(ControlSection, {
+    title: t("devices verbose label", {
+      ns: meta.id
+    }),
+    description: t("devices description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(ControlFrame, null, /* @__PURE__ */ React.createElement(ControlFrameItem, {
+    title: t("devices label", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(List, null, devices.map((device) => {
+    return /* @__PURE__ */ React.createElement(DeviceListItem, {
+      key: device.deviceKey.toHex(),
+      device,
+      connectionState
+    });
+  }))), createInvitationUrl && /* @__PURE__ */ React.createElement(ControlFrameItem, {
+    title: "Add device"
+  }, /* @__PURE__ */ React.createElement(DeviceInvitation, {
+    createInvitationUrl
+  })))), /* @__PURE__ */ React.createElement(ControlSection, {
+    title: t("danger zone title", {
+      ns: meta.id
+    }),
+    description: t("danger zone description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(ControlGroup, null, /* @__PURE__ */ React.createElement(ControlItem, {
+    title: t("reset device label"),
+    description: t("reset device description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "destructive",
+    onClick: handleResetStorage,
+    "data-testid": "devicesContainer.reset"
+  }, t("reset device label"))), /* @__PURE__ */ React.createElement(ControlItem, {
+    title: t("recover identity label"),
+    description: t("recover identity description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "destructive",
+    onClick: handleRecover,
+    "data-testid": "devicesContainer.recover"
+  }, t("recover identity label"))), /* @__PURE__ */ React.createElement(ControlItem, {
+    title: t("join new identity label"),
+    description: t("join new identity description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "destructive",
+    onClick: handleJoinNewIdentity,
+    "data-testid": "devicesContainer.joinExisting"
+  }, t("join new identity label")))))));
+};
+var DeviceInvitation = (props) => {
+  const client = useClient();
+  const [invitation, setInvitation] = useState();
+  const onInvitationCreate = useCallback(() => {
+    const invitation2 = client.halo.share();
+    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+      const subscription = invitation2.subscribe((invitation3) => {
+        const invitationCode = InvitationEncoder.encode(invitation3);
+        if (invitation3.state === Invitation.State.CONNECTING) {
+          log.info(JSON.stringify({
+            invitationCode,
+            authCode: invitation3.authCode
+          }), void 0, {
+            F: __dxlog_file,
+            L: 127,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          subscription.unsubscribe();
+        }
+      });
+    }
+    setInvitation(invitation2);
+  }, [
+    client
+  ]);
+  const onInvitationDone = useCallback(() => {
+    setInvitation(void 0);
+  }, []);
+  if (invitation) {
+    return /* @__PURE__ */ React.createElement(DeviceInvitationImpl, {
+      ...props,
+      invitation,
+      onInvitationCreate,
+      onInvitationDone
+    });
+  } else {
+    return /* @__PURE__ */ React.createElement(InvitationSection, {
+      ...props,
+      onInvitationCreate,
+      onInvitationDone
+    });
+  }
+};
+var DeviceInvitationImpl = ({ invitation: invitationObservable, createInvitationUrl, onInvitationDone, onInvitationCreate }) => {
+  const invitation = useMulticastObservable(invitationObservable);
+  const url = createInvitationUrl(InvitationEncoder.encode(invitation));
+  useEffect(() => {
+    if (invitation.state >= Invitation.State.SUCCESS) {
+      onInvitationDone();
+    }
+  }, [
+    invitation.state
+  ]);
+  return /* @__PURE__ */ React.createElement(InvitationSection, {
+    ...invitation,
+    url,
+    onInvitationDone,
+    onInvitationCreate
+  });
+};
+var InvitationSection = ({ state = -1, authCode, invitationId = "never", url = "never", onInvitationDone = () => {
+}, onInvitationCreate = () => {
+} }) => {
+  const { t } = useTranslation(meta.id);
+  const activeView = state < 0 ? "init" : state >= Invitation.State.CANCELLED ? "complete" : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode ? "auth-code" : "qr-code";
+  return activeView === "init" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description mbe-2"
+  }, t("add device description")), /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--plus--regular",
+    label: t("create device invitation label"),
+    disabled: state >= 0,
+    classNames: "is-full",
+    "data-testid": "devicesContainer.createInvitation",
+    onClick: onInvitationCreate
+  })) : /* @__PURE__ */ React.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React.createElement(Viewport.Views, null, /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "init"
+  }), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "complete"
+  }, /* @__PURE__ */ React.createElement(InvitationComplete, {
+    statusValue: state
+  })), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "auth-code"
+  }, /* @__PURE__ */ React.createElement(InvitationAuthCode, {
+    id: invitationId,
+    code: authCode ?? "never",
+    onCancel: onInvitationDone
+  })), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "qr-code"
+  }, /* @__PURE__ */ React.createElement(InvitationQR, {
+    id: invitationId,
+    url,
+    onCancel: onInvitationDone
+  }))));
+};
+var InvitationQR = ({ id, url, onCancel }) => {
+  const { t } = useTranslation(osTranslations);
+  const qrLabel = useId("devices-container__qr-code");
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("qr code description", {
+    ns: meta.id
+  })), /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "grid grid-cols-[1fr_min-content] mlb-2 gap-2"
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "is-full aspect-square relative text-description"
+  }, /* @__PURE__ */ React.createElement(QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    "aria-labelledby": qrLabel,
+    errorCorrectionLevel: "Q",
+    cutout: true
+  }, url ?? "never"), /* @__PURE__ */ React.createElement(Centered, null, /* @__PURE__ */ React.createElement(Emoji, {
+    text: emoji
+  }))), /* @__PURE__ */ React.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr label"))), /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-center"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React.createElement(Clipboard.Button, {
+    value: url ?? "never"
+  }), /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")))));
+};
+var InvitationAuthCode = ({ id, code, onCancel }) => {
+  const { t } = useTranslation(osTranslations);
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("auth other device emoji message")), emoji && /* @__PURE__ */ React.createElement(Emoji, {
+    text: emoji,
+    className: "mli-auto mlb-2 text-center"
+  }), /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("auth code message")), /* @__PURE__ */ React.createElement(AuthCode, {
+    code,
+    large: true,
+    classNames: "mli-auto mlb-2 text-center grow"
+  }), /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")));
+};
+var InvitationComplete = ({ statusValue }) => {
+  return statusValue > 0 ? /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--check--regular",
+    size: 6,
+    classNames: "m-1.5"
+  }) : /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--x--regular",
+    size: 6,
+    classNames: "m-1.5"
+  });
+};
+
+// src/components/JoinDialog.tsx
+import React2, { useCallback as useCallback2 } from "react";
+import { Common } from "@dxos/app-framework";
+import { useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/react";
+import { ObservabilityOperation } from "@dxos/plugin-observability/types";
+import { Dialog, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { JoinPanel } from "@dxos/shell/react";
+import { osTranslations as osTranslations2 } from "@dxos/ui-theme";
+var JoinDialog = (props) => {
+  const { invokePromise } = useOperationInvoker2();
+  const { t } = useTranslation2(meta.id);
+  const handleCancelResetStorage = useCallback2(() => invokePromise(ClientOperation.ShareIdentity), [
+    invokePromise
+  ]);
+  const handleDone = useCallback2(async (result) => {
+    if (result?.identityKey) {
+      await Promise.all([
+        invokePromise(Common.LayoutOperation.UpdateDialog, {
+          state: false
+        }),
+        invokePromise(ObservabilityOperation.SendEvent, {
+          name: props.initialDisposition === "recover-identity" ? "identity.recover" : "identity.join"
+        })
+      ]);
+    }
+  }, [
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React2.createElement(Dialog.Content, null, /* @__PURE__ */ React2.createElement(Dialog.Title, {
+    classNames: "sr-only"
+  }, t("join space label", {
+    ns: osTranslations2
+  })), /* @__PURE__ */ React2.createElement(JoinPanel, {
+    mode: "halo-only",
+    ...props,
+    exitActionParent: /* @__PURE__ */ React2.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React2.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    onCancelResetStorage: handleCancelResetStorage,
+    onDone: handleDone
+  }));
+};
+
+// src/components/ProfileContainer.tsx
+import * as Schema from "effect/Schema";
+import React3, { useCallback as useCallback3, useMemo, useState as useState2 } from "react";
+import { debounce } from "@dxos/async";
+import { useClient as useClient2 } from "@dxos/react-client";
+import { useIdentity } from "@dxos/react-client/halo";
+import { ButtonGroup, Clipboard as Clipboard2, Input, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { ControlItem as ControlItem2, ControlItemInput, ControlPage as ControlPage2, ControlSection as ControlSection2, Form } from "@dxos/react-ui-form";
+import { EmojiPickerBlock, HuePicker } from "@dxos/react-ui-pickers";
+import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
+var UserProfile = Schema.Struct({
+  did: Schema.String.annotations({
+    title: "DID"
+  }),
+  displayName: Schema.String.annotations({
+    title: "Display name"
+  }),
+  emoji: Schema.String.annotations({
+    title: "Avatar"
+  }),
+  hue: Schema.String.annotations({
+    title: "Color"
+  })
+});
+var getDefaultHueValue = (identity) => hexToHue(identity?.identityKey.toHex() ?? "0");
+var getHueValue = (identity) => identity?.profile?.data?.hue || getDefaultHueValue(identity);
+var getDefaultEmojiValue = (identity) => hexToEmoji2(identity?.identityKey.toHex() ?? "0");
+var getEmojiValue = (identity) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
+var ProfileContainer = () => {
+  const { t } = useTranslation3(meta.id);
+  const client = useClient2();
+  const identity = useIdentity();
+  const [displayName, setDisplayNameDirectly] = useState2(identity?.profile?.displayName ?? "");
+  const [emoji, setEmojiDirectly] = useState2(getEmojiValue(identity));
+  const [hue, setHueDirectly] = useState2(getHueValue(identity));
+  const updateProfile = useMemo(() => debounce((profile) => client.halo.updateProfile({
+    displayName: profile.displayName,
+    data: {
+      emoji: profile.emoji,
+      hue: profile.hue
+    }
+  }), 2e3), []);
+  const handleChange = useCallback3((profile, meta2) => {
+    for (const [path, changed] of Object.entries(meta2.changed)) {
+      if (changed) {
+        switch (path) {
+          case "displayName":
+            setDisplayNameDirectly(profile.displayName ?? "");
+            break;
+          case "emoji":
+            setEmojiDirectly(profile.emoji ?? getDefaultEmojiValue(identity));
+            break;
+          case "hue":
+            setHueDirectly(profile.hue ?? getDefaultHueValue(identity));
+            break;
+          default:
+            break;
+        }
+      }
+    }
+    void updateProfile(profile);
+  }, [
+    identity
+  ]);
+  const values = useMemo(() => ({
+    did: identity?.did,
+    displayName,
+    emoji,
+    hue
+  }), [
+    identity,
+    displayName,
+    emoji,
+    hue
+  ]);
+  const fieldMap = useMemo(() => ({
+    displayName: ({ type, label, getValue, onValueChange }) => {
+      const handleChange2 = useCallback3(({ target: { value } }) => onValueChange(type, value), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React3.createElement(ControlItemInput, {
+        title: label,
+        description: t("display name description")
+      }, /* @__PURE__ */ React3.createElement(Input.TextInput, {
+        value: getValue(),
+        onChange: handleChange2,
+        placeholder: t("display name input placeholder"),
+        classNames: "min-is-64"
+      }));
+    },
+    emoji: ({ type, label, getValue, onValueChange }) => {
+      const handleChange2 = useCallback3((nextEmoji) => onValueChange(type, nextEmoji), [
+        onValueChange,
+        type
+      ]);
+      const handleEmojiReset = useCallback3(() => onValueChange(type, getDefaultEmojiValue(identity)), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React3.createElement(ControlItem2, {
+        title: label,
+        description: t("icon description")
+      }, /* @__PURE__ */ React3.createElement(EmojiPickerBlock, {
+        triggerVariant: "default",
+        emoji: getValue(),
+        onChangeEmoji: handleChange2,
+        onClickClear: handleEmojiReset,
+        classNames: "justify-self-end"
+      }));
+    },
+    hue: ({ type, label, getValue, onValueChange }) => {
+      const handleChange2 = useCallback3((nextHue) => onValueChange(type, nextHue), [
+        onValueChange,
+        type
+      ]);
+      const handleHueReset = useCallback3(() => onValueChange(type, getDefaultHueValue(identity)), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React3.createElement(ControlItem2, {
+        title: label,
+        description: t("hue description")
+      }, /* @__PURE__ */ React3.createElement("div", {
+        role: "none",
+        className: "flex justify-self-end"
+      }, /* @__PURE__ */ React3.createElement(HuePicker, {
+        value: getValue(),
+        onChange: handleChange2,
+        onReset: handleHueReset
+      })));
+    },
+    // TODO(wittjosiah): We need text input annotations for disabled and copyable.
+    did: ({ label, getValue }) => {
+      return /* @__PURE__ */ React3.createElement(ControlItemInput, {
+        title: label,
+        description: t("did description")
+      }, /* @__PURE__ */ React3.createElement(ButtonGroup, null, /* @__PURE__ */ React3.createElement(Input.TextInput, {
+        value: getValue(),
+        disabled: true,
+        classNames: "min-is-64"
+      }), /* @__PURE__ */ React3.createElement(Clipboard2.IconButton, {
+        value: getValue() ?? ""
+      })));
+    }
+  }), [
+    t
+  ]);
+  return /* @__PURE__ */ React3.createElement(ControlPage2, null, /* @__PURE__ */ React3.createElement(Clipboard2.Provider, null, /* @__PURE__ */ React3.createElement(ControlSection2, {
+    title: t("profile label"),
+    description: t("profile description")
+  }, /* @__PURE__ */ React3.createElement(Form.Root, {
+    schema: UserProfile,
+    values,
+    fieldMap,
+    onValuesChanged: handleChange
+  }, /* @__PURE__ */ React3.createElement(Form.Content, null, /* @__PURE__ */ React3.createElement(Form.FieldSet, {
+    classNames: "container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]"
+  }))))));
+};
+
+// src/components/RecoveryCodeDialog.tsx
+import React4, { useCallback as useCallback4, useState as useState3 } from "react";
+import { AlertDialog, Button as Button2, Clipboard as Clipboard3, Input as Input2, useTranslation as useTranslation4 } from "@dxos/react-ui";
+var RecoveryCodeDialog = ({ code }) => {
+  const { t } = useTranslation4(meta.id);
+  const [confirmation, setConfirmation] = useState3(false);
+  const handleConfirmation = useCallback4((checked) => setConfirmation(checked), []);
+  return /* @__PURE__ */ React4.createElement(AlertDialog.Content, {
+    classNames: "bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
+  }, /* @__PURE__ */ React4.createElement(AlertDialog.Title, null, t("recovery code dialog title")), /* @__PURE__ */ React4.createElement("p", {
+    className: "plb-4"
+  }, t("recovery code dialog description")), /* @__PURE__ */ React4.createElement(Clipboard3.Provider, null, /* @__PURE__ */ React4.createElement(Code, {
+    code
+  })), /* @__PURE__ */ React4.createElement("div", {
+    className: "flex flex-col plb-4 gap-2"
+  }, /* @__PURE__ */ React4.createElement("p", null, t("recovery code dialog warning 1")), /* @__PURE__ */ React4.createElement("p", null, t("recovery code dialog warning 2"))), /* @__PURE__ */ React4.createElement("div", {
+    className: "flex items-center gap-2 pbe-4"
+  }, /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.Checkbox, {
+    "data-testid": "recoveryCode.confirm",
+    checked: confirmation,
+    onCheckedChange: handleConfirmation
+  }), /* @__PURE__ */ React4.createElement(Input2.Label, null, t("recovery code confirmation label")))), /* @__PURE__ */ React4.createElement("div", {
+    className: "flex justify-end"
+  }, /* @__PURE__ */ React4.createElement(AlertDialog.Action, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Button2, {
+    "data-testid": "recoveryCode.continue",
+    variant: "primary",
+    disabled: !confirmation
+  }, t("continue label")))));
+};
+var Code = ({ code }) => {
+  const words = code.split(" ");
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: "relative p-2 border border-separator rounded group"
+  }, /* @__PURE__ */ React4.createElement(Clipboard3.IconButton, {
+    value: code,
+    classNames: "absolute top-2 right-2 invisible group-hover:visible"
+  }), /* @__PURE__ */ React4.createElement("div", {
+    className: "grid grid-cols-4"
+  }, words.map((word, i) => /* @__PURE__ */ React4.createElement("div", {
+    key: i,
+    className: "flex items-center p-2 gap-2"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "is-4 text-xs text-center text-subdued"
+  }, i + 1), /* @__PURE__ */ React4.createElement("div", {
+    className: "text-sm"
+  }, word)))));
+};
+
+// src/components/RecoveryCredentialsContainer.tsx
+import React5 from "react";
+import { useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/react";
+import { useCredentials } from "@dxos/react-client/halo";
+import { Icon as Icon2, IconButton as IconButton2, List as List2, ListItem, Message, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { ControlGroup as ControlGroup2, ControlItem as ControlItem3, ControlPage as ControlPage3, ControlSection as ControlSection3 } from "@dxos/react-ui-form";
+var MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
+var RecoveryCredentialsContainer = () => {
+  const { t } = useTranslation5(meta.id);
+  const { invokePromise } = useOperationInvoker3();
+  const credentials = useCredentials();
+  const recoveryCredentials = credentials.filter((credential) => credential.subject.assertion["@type"] === "dxos.halo.credentials.IdentityRecovery");
+  return /* @__PURE__ */ React5.createElement(ControlPage3, null, /* @__PURE__ */ React5.createElement(ControlSection3, {
+    title: t("recovery setup dialog title"),
+    description: t("recovery setup dialog description")
+  }, /* @__PURE__ */ React5.createElement(ControlGroup2, null, /* @__PURE__ */ React5.createElement(ControlItem3, {
+    title: t("create passkey label"),
+    description: t("create passkey description")
+  }, /* @__PURE__ */ React5.createElement(IconButton2, {
+    label: t("create passkey label"),
+    icon: "ph--key--duotone",
+    variant: "primary",
+    onClick: () => invokePromise(ClientOperation.CreatePasskey)
+  })), /* @__PURE__ */ React5.createElement(ControlItem3, {
+    title: t("create recovery code label"),
+    description: t("create recovery code description")
+  }, /* @__PURE__ */ React5.createElement(IconButton2, {
+    label: t("create recovery code label"),
+    icon: "ph--receipt--duotone",
+    variant: "default",
+    onClick: () => invokePromise(ClientOperation.CreateRecoveryCode)
+  })))), /* @__PURE__ */ React5.createElement(ControlSection3, {
+    title: t("credentials list label")
+  }, recoveryCredentials.length < 1 ? /* @__PURE__ */ React5.createElement(Message.Root, {
+    valence: "error",
+    classNames: "container-max-width"
+  }, /* @__PURE__ */ React5.createElement(Message.Title, {
+    icon: "ph--shield-warning--duotone"
+  }, t("no credentials title")), /* @__PURE__ */ React5.createElement(Message.Content, null, t("no credentials message"))) : /* @__PURE__ */ React5.createElement(List2, {
+    classNames: "container-max-width pli-2"
+  }, recoveryCredentials.map((credential) => /* @__PURE__ */ React5.createElement(ListItem.Root, {
+    key: credential.id?.toHex()
+  }, /* @__PURE__ */ React5.createElement(ListItem.Endcap, null, /* @__PURE__ */ React5.createElement(Icon2, {
+    icon: "ph--key--regular"
+  })), /* @__PURE__ */ React5.createElement(ListItem.Heading, null, credential.issuanceDate.toLocaleString()))))));
+};
+
+// src/components/ResetDialog.tsx
+import * as Effect from "effect/Effect";
+import React6, { useCallback as useCallback5 } from "react";
+import { Capability, Common as Common2 } from "@dxos/app-framework";
+import { useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/react";
+import { runAndForwardErrors } from "@dxos/effect";
+import { useClient as useClient3 } from "@dxos/react-client";
+import { Dialog as Dialog2, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { ConfirmReset } from "@dxos/shell/react";
+var ResetDialog = ({ mode, onReset, capabilityManager }) => {
+  const { t } = useTranslation6(meta.id);
+  const { invokePromise } = useOperationInvoker4();
+  const client = useClient3();
+  const handleReset = useCallback5(async () => {
+    await client.reset();
+    const target = mode === "join new identity" ? "deviceInvitation" : mode === "recover" ? "recoverIdentity" : void 0;
+    if (onReset) {
+      await runAndForwardErrors(onReset({
+        target
+      }).pipe(Effect.provideService(Capability.Service, capabilityManager)));
+    }
+  }, [
+    client,
+    mode,
+    onReset,
+    capabilityManager
+  ]);
+  const handleCancel = useCallback5(() => {
+    void invokePromise(Common2.LayoutOperation.UpdateDialog, {
+      state: false
+    });
+  }, [
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React6.createElement(Dialog2.Content, null, /* @__PURE__ */ React6.createElement(Dialog2.Title, {
+    classNames: "sr-only"
+  }, t("reset dialog title")), /* @__PURE__ */ React6.createElement(Dialog2.Description, {
+    classNames: "sr-only"
+  }, t("reset dialog description")), /* @__PURE__ */ React6.createElement(ConfirmReset, {
+    active: true,
+    mode,
+    onConfirm: handleReset,
+    onCancel: handleCancel
+  }));
+};
+
+// src/capabilities/react-surface/react-surface.tsx
+var react_surface_default = Capability2.makeModule(Effect2.fnUntraced(function* (props) {
+  const { createInvitationUrl, onReset } = props;
+  const capabilityManager = yield* Capability2.Service;
+  return Capability2.contributes(Common3.Capability.ReactSurface, [
+    Common3.createSurface({
+      id: Account.Profile,
+      role: "article",
+      filter: (data) => data.subject === Account.Profile,
+      component: () => /* @__PURE__ */ React7.createElement(ProfileContainer, null)
+    }),
+    Common3.createSurface({
+      id: Account.Devices,
+      role: "article",
+      filter: (data) => data.subject === Account.Devices,
+      component: () => /* @__PURE__ */ React7.createElement(DevicesContainer, {
+        createInvitationUrl
+      })
+    }),
+    Common3.createSurface({
+      id: Account.Security,
+      role: "article",
+      filter: (data) => data.subject === Account.Security,
+      component: () => /* @__PURE__ */ React7.createElement(RecoveryCredentialsContainer, null)
+    }),
+    Common3.createSurface({
+      id: JOIN_DIALOG,
+      role: "dialog",
+      filter: (data) => data.component === JOIN_DIALOG,
+      component: ({ data }) => /* @__PURE__ */ React7.createElement(JoinDialog, data.props)
+    }),
+    Common3.createSurface({
+      id: RECOVERY_CODE_DIALOG,
+      role: "dialog",
+      filter: (data) => data.component === RECOVERY_CODE_DIALOG,
+      component: ({ data }) => /* @__PURE__ */ React7.createElement(RecoveryCodeDialog, data.props)
+    }),
+    Common3.createSurface({
+      id: RESET_DIALOG,
+      role: "dialog",
+      filter: (data) => data.component === RESET_DIALOG,
+      component: ({ data }) => /* @__PURE__ */ React7.createElement(ResetDialog, {
+        ...data.props,
+        onReset,
+        capabilityManager
+      })
+    })
+  ]);
+}));
+export {
+  react_surface_default as default
+};
+//# sourceMappingURL=react-surface-RSQ74XCT.mjs.map