@dxos/shell 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

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");
@@ -1624,9 +1625,20 @@ var getEmojiValue = (identity) => identity?.profile?.data?.emoji || (0, import_u
 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 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?.({
@@ -1676,20 +1688,17 @@ 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.Clipboard.IconButton, {
     classNames: "bs-[--rail-action]",
@@ -1712,7 +1721,7 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
   }, /* @__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", {
@@ -1816,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: 258,
+      L: 272,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1833,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: 271,
+        L: 285,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3863,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";
@@ -3968,6 +3977,7 @@ var os = {
   "copy success label": "Copied",
   "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",
@@ -4074,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",
@@ -4091,13 +4102,14 @@ var os = {
   "fuchsia label": "Fuchsia",
   "pink label": "Pink",
   "rose label": "Rose",
-  "select a hue label": "Select a hue",
+  "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>.',
@@ -4167,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;