@dxos/shell 0.7.5-labs.e27f9b9 → 0.7.5-labs.f400bbc

package/dist/lib/node/react.cjs

@@ -173,6 +173,7 @@ var import_react27 = __toESM(require("react"));
 var import_react_ui14 = require("@dxos/react-ui");
 var import_react28 = require("@phosphor-icons/react");
 var import_react29 = __toESM(require("react"));
+var import_async = require("@dxos/async");
 var import_display_name3 = require("@dxos/display-name");
 var import_log = require("@dxos/log");
 var import_react_client2 = require("@dxos/react-client");
@@ -298,7 +299,7 @@ var import_react61 = __toESM(require("react"));
 var import_react_ui33 = require("@dxos/react-ui");
 var import_react62 = __toESM(require("react"));
 var import_react_ui34 = require("@dxos/react-ui");
-var import_async = require("@dxos/async");
+var import_async2 = require("@dxos/async");
 var import_client_protocol2 = require("@dxos/client-protocol");
 var import_invariant3 = require("@dxos/invariant");
 var import_iframe = require("@dxos/protocols/proto/dxos/iframe");
@@ -307,7 +308,7 @@ var import_react63 = __toESM(require("react"));
 var import_react_client14 = require("@dxos/react-client");
 var import_halo5 = require("@dxos/react-client/halo");
 var import_react_ui_theme29 = require("@dxos/react-ui-theme");
-var import_async2 = require("@dxos/async");
+var import_async3 = require("@dxos/async");
 var import_react_client15 = require("@dxos/react-client");
 var AgentConfig = ({ agentStatus, validationMessage, onAgentDestroy, onAgentCreate, onAgentRefresh }) => {
   const { t } = (0, import_react_ui.useTranslation)("os");
@@ -1621,15 +1622,23 @@ var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/I
 var viewStyles = "pbs-1 pbe-3 pli-3";
 var getHueValue = (identity) => identity?.profile?.data?.hue || (0, import_util5.hexToHue)(identity?.identityKey.toHex() ?? "0");
 var getEmojiValue = (identity) => identity?.profile?.data?.emoji || (0, import_util5.hexToEmoji)(identity?.identityKey.toHex() ?? "0");
-var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState }) => {
+var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState, onManageCredentials }) => {
   const fallbackValue = (0, import_util5.keyToFallback)(identity.identityKey);
   const { t } = (0, import_react_ui15.useTranslation)("os");
-  const [displayName, setDisplayName] = (0, import_react29.useState)(identity.profile?.displayName ?? "");
+  const [displayName, setDisplayNameDirectly] = (0, import_react29.useState)(identity.profile?.displayName ?? "");
   const [emoji, setEmojiDirectly] = (0, import_react29.useState)(getEmojiValue(identity));
   const [hue, setHueDirectly] = (0, import_react29.useState)(getHueValue(identity));
-  const { textValue, setTextValue } = (0, import_react_ui15.useClipboard)();
-  const identityHex = identity.identityKey.toHex();
-  const publicKeyCopied = textValue === identityHex;
+  const updateDisplayName = (0, import_react29.useMemo)(() => (0, import_async.debounce)((nextDisplayName) => onUpdateProfile?.({
+    ...identity.profile,
+    displayName: nextDisplayName
+  }), 3e3), [
+    onUpdateProfile,
+    identity.profile
+  ]);
+  const setDisplayName = (nextDisplayName) => {
+    setDisplayNameDirectly(nextDisplayName);
+    updateDisplayName(nextDisplayName);
+  };
   const setEmoji = (nextEmoji) => {
     setEmojiDirectly(nextEmoji);
     void onUpdateProfile?.({
@@ -1679,39 +1688,40 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
     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
-    })
+    onChange: ({ target: { value } }) => setDisplayName(value)
   })), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Toolbar.Root, {
     classNames: "flex justify-center items-center gap-1 pt-3"
   }, /* @__PURE__ */ import_react29.default.createElement(import_react_ui_pickers.EmojiPickerToolbarButton, {
     emoji,
     onChangeEmoji: setEmoji,
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ import_react29.default.createElement(import_react_ui_pickers.HuePickerToolbarButton, {
-    hue,
-    onChangeHue: setHue,
+  }), /* @__PURE__ */ import_react29.default.createElement(import_react_ui_pickers.HuePicker, {
+    value: hue,
+    onChange: setHue,
+    onReset: () => setHue(void 0),
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Root, null, /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Trigger, {
+  }), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Clipboard.IconButton, {
+    classNames: "bs-[--rail-action]",
+    "data-testid": "update-profile-form-copy-key",
+    label: t("copy self did label"),
+    value: identity.did
+  }), onManageCredentials && /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Root, null, /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Toolbar.Button, {
     classNames: "bs-[--rail-action]",
-    "data-testid": "update-profile-form-copy-key",
-    onClick: () => setTextValue(identityHex)
+    onClick: onManageCredentials
   }, /* @__PURE__ */ import_react29.default.createElement("span", {
     className: "sr-only"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ import_react29.default.createElement(import_react28.Key, {
+  }, t("manage credentials label")), /* @__PURE__ */ import_react29.default.createElement(import_react28.IdentificationCard, {
     className: (0, import_react_ui_theme19.getSize)(5)
   }))), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Portal, null, /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Content, {
     side: "bottom"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Arrow, null)))), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Root, null, /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Trigger, {
+  }, t("manage credentials label"), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Arrow, null)))), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Root, null, /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Toolbar.Button, {
     classNames: [
       "bs-[--rail-action]",
-      !isConnected && "text-error-500"
+      !isConnected && import_react_ui_theme19.errorText
     ],
     onClick: () => onChangeConnectionState?.(isConnected ? import_mesh2.ConnectionState.OFFLINE : import_mesh2.ConnectionState.ONLINE)
   }, /* @__PURE__ */ import_react29.default.createElement("span", {
@@ -1725,7 +1735,7 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
   }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ import_react29.default.createElement(import_react_ui15.Tooltip.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 { identity, titleId, activeView, onUpdateProfile, onResetStorage, onRecover, onJoinNewIdentity, IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser, InvitationManager: InvitationManagerComponent = InvitationManager, connectionState, onChangeConnectionState, onDone, onManageCredentials, ...rest } = props;
   const { t } = (0, import_react_ui15.useTranslation)("os");
   const title = (0, import_react29.useMemo)(() => {
     switch (activeView) {
@@ -1748,7 +1758,8 @@ var IdentityPanelImpl = (props) => {
     onDone,
     onUpdateProfile,
     connectionState,
-    onChangeConnectionState
+    onChangeConnectionState,
+    onManageCredentials
   }), /* @__PURE__ */ import_react29.default.createElement(Viewport.Root, {
     activeView
   }, /* @__PURE__ */ import_react29.default.createElement(Viewport.Views, null, /* @__PURE__ */ import_react29.default.createElement(Viewport.View, {
@@ -1814,7 +1825,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   if (!identity) {
     import_log.log.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file6,
-      L: 256,
+      L: 272,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1831,7 +1842,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       (0, import_log.log)("[state]", state, {
         F: __dxlog_file6,
-        L: 269,
+        L: 285,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3861,8 +3872,8 @@ var __dxlog_file15 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composi
 var ShellRuntimeImpl = class {
   constructor(_port) {
     this._port = _port;
-    this.layoutUpdate = new import_async.Event();
-    this.invitationUrlUpdate = new import_async.Event();
+    this.layoutUpdate = new import_async2.Event();
+    this.invitationUrlUpdate = new import_async2.Event();
     this._layout = import_iframe.ShellLayout.DEFAULT;
     this._invitationUrl = typeof window !== "undefined" ? window.location.origin : void 0;
     this._deviceInvitationParam = "deviceInvitationCode";
@@ -3964,8 +3975,9 @@ var os = {
   "sidebar label": "DXOS sidebar",
   "copy invitation code label": "Copy URL",
   "copy success label": "Copied",
-  "copy self public key label": "Copy public key",
+  "copy self did label": "Copy DID",
   "open share panel label": "View QR code",
+  "manage credentials label": "Manage credentials",
   "joining space heading": "Joining space",
   "join space heading": "Enter space invitation",
   "halo heading": "Initialize device identity",
@@ -4072,6 +4084,7 @@ var os = {
   "select emoji label": "Avatar emoji",
   "select hue label": "Avatar background color",
   "resetting message": "One moment while the device is reset\u2026",
+  // TODO(burdon): Factor out.
   "red label": "Red",
   "orange label": "Orange",
   "amber label": "Amber",
@@ -4089,11 +4102,14 @@ var os = {
   "fuchsia label": "Fuchsia",
   "pink label": "Pink",
   "rose label": "Rose",
+  "select a hue label": "Select color",
+  "hue label": "Hue",
+  "icon label": "Icon",
   "current device tag label": "This device",
   "device name placeholder": "{{platform}} on {{os}}",
   "more options label": "More options",
-  "disconnect label": "Go offline.",
-  "connect label": "Go online.",
+  "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>.',
@@ -4163,9 +4179,9 @@ var Fallback = ({ onClose }) => {
 };
 var MemoryShellRuntime = class {
   constructor({ layout, invitationCode, spaceKey, invitationUrl, deviceInvitationParam, spaceInvitationParam } = {}) {
-    this.layoutUpdate = new import_async2.Event();
-    this.invitationUrlUpdate = new import_async2.Event();
-    this.contextUpdate = new import_async2.Event();
+    this.layoutUpdate = new import_async3.Event();
+    this.invitationUrlUpdate = new import_async3.Event();
+    this.contextUpdate = new import_async3.Event();
     this._layout = layout ?? import_react_client15.ShellLayout.DEFAULT;
     this._invitationCode = invitationCode;
     this._spaceKey = spaceKey;