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

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

@@ -877,6 +877,7 @@ import { Clipboard as Clipboard4, Dialog, useId as useId10 } from "@dxos/react-u
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
 import { IdentificationCard, Plugs, PlugsConnected } from "@phosphor-icons/react";
 import React25, { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
+import { debounce } from "@dxos/async";
 import { generateName as generateName3 } from "@dxos/display-name";
 import { log as log7 } from "@dxos/log";
 import { useClient as useClient6 } from "@dxos/react-client";
@@ -884,8 +885,8 @@ import { useIdentity, useDevices, useHaloInvitations as useHaloInvitations2 } fr
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
 import { useNetworkStatus, ConnectionState as ConnectionState2 } from "@dxos/react-client/mesh";
 import { Avatar as Avatar6, Clipboard as Clipboard3, Input as Input2, Toolbar, Tooltip as Tooltip3, useId as useId6, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { EmojiPickerToolbarButton, HuePickerToolbarButton } from "@dxos/react-ui-pickers";
-import { getSize as getSize10 } from "@dxos/react-ui-theme";
+import { EmojiPickerToolbarButton, HuePicker as HuePicker2 } from "@dxos/react-ui-pickers";
+import { errorText, getSize as getSize10 } 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
@@ -1071,7 +1072,7 @@ var IdentityActionChooserImpl = ({ devices, connectionState, agentHostingEnabled
 import React22, { useState } from "react";
 import { log as log3 } from "@dxos/log";
 import { useClipboard, useTranslation as useTranslation8 } from "@dxos/react-ui";
-import { EmojiPickerBlock, HuePickerBlock } from "@dxos/react-ui-pickers";
+import { EmojiPickerBlock, HuePicker } from "@dxos/react-ui-pickers";
 import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
 
 // packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts
@@ -1517,9 +1518,20 @@ var getEmojiValue = (identity) => identity?.profile?.data?.emoji || hexToEmoji4(
 var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, connectionState, onChangeConnectionState, onManageCredentials }) => {
   const fallbackValue = keyToFallback3(identity.identityKey);
   const { t } = useTranslation11("os");
-  const [displayName, setDisplayName] = useState5(identity.profile?.displayName ?? "");
+  const [displayName, setDisplayNameDirectly] = useState5(identity.profile?.displayName ?? "");
   const [emoji, setEmojiDirectly] = useState5(getEmojiValue(identity));
   const [hue, setHueDirectly] = useState5(getHueValue(identity));
+  const updateDisplayName = useMemo3(() => 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?.({
@@ -1569,20 +1581,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__ */ React25.createElement(Toolbar.Root, {
     classNames: "flex justify-center items-center gap-1 pt-3"
   }, /* @__PURE__ */ React25.createElement(EmojiPickerToolbarButton, {
     emoji,
     onChangeEmoji: setEmoji,
     classNames: "bs-[--rail-action]"
-  }), /* @__PURE__ */ React25.createElement(HuePickerToolbarButton, {
-    hue,
-    onChangeHue: setHue,
+  }), /* @__PURE__ */ React25.createElement(HuePicker2, {
+    value: hue,
+    onChange: setHue,
+    onReset: () => setHue(void 0),
     classNames: "bs-[--rail-action]"
   }), /* @__PURE__ */ React25.createElement(Clipboard3.IconButton, {
     classNames: "bs-[--rail-action]",
@@ -1605,7 +1614,7 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
   }, /* @__PURE__ */ React25.createElement(Toolbar.Button, {
     classNames: [
       "bs-[--rail-action]",
-      !isConnected && "text-error-500"
+      !isConnected && errorText
     ],
     onClick: () => onChangeConnectionState?.(isConnected ? ConnectionState2.OFFLINE : ConnectionState2.ONLINE)
   }, /* @__PURE__ */ React25.createElement("span", {
@@ -1709,7 +1718,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   if (!identity) {
     log7.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file6,
-      L: 258,
+      L: 272,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1726,7 +1735,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       log7("[state]", state, {
         F: __dxlog_file6,
-        L: 271,
+        L: 285,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3998,6 +4007,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",
@@ -4104,6 +4114,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",
@@ -4121,13 +4132,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>.',