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

package/dist/lib/browser/react.mjs

@@ -871,20 +871,21 @@ var SpaceListItem = /* @__PURE__ */ forwardRef8(({ space, onClick }, ref) => {
 
 // packages/sdk/shell/src/composites/IdentityDialog/IdentityDialog.tsx
 import React38 from "react";
-import { Clipboard as Clipboard3, Dialog, useId as useId10 } from "@dxos/react-ui";
+import { Clipboard as Clipboard4, Dialog, useId as useId10 } from "@dxos/react-ui";
 
 // packages/sdk/shell/src/panels/IdentityPanel/IdentityPanel.tsx
-import { Key, Plugs, PlugsConnected } from "@phosphor-icons/react";
+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";
 import { useIdentity, useDevices, useHaloInvitations as useHaloInvitations2 } from "@dxos/react-client/halo";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
 import { useNetworkStatus, ConnectionState as ConnectionState2 } from "@dxos/react-client/mesh";
-import { Avatar as Avatar6, Input as Input2, Toolbar, Tooltip as Tooltip3, useClipboard as useClipboard2, 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 { 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, 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
@@ -1070,7 +1071,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
@@ -1513,15 +1514,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 || hexToHue2(identity?.identityKey.toHex() ?? "0");
 var getEmojiValue = (identity) => identity?.profile?.data?.emoji || hexToEmoji4(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 = 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 { textValue, setTextValue } = useClipboard2();
-  const identityHex = identity.identityKey.toHex();
-  const publicKeyCopied = textValue === identityHex;
+  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?.({
@@ -1571,39 +1580,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__ */ 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(Tooltip3.Root, null, /* @__PURE__ */ React25.createElement(Tooltip3.Trigger, {
+  }), /* @__PURE__ */ React25.createElement(Clipboard3.IconButton, {
+    classNames: "bs-[--rail-action]",
+    "data-testid": "update-profile-form-copy-key",
+    label: t("copy self did label"),
+    value: identity.did
+  }), onManageCredentials && /* @__PURE__ */ React25.createElement(Tooltip3.Root, null, /* @__PURE__ */ React25.createElement(Tooltip3.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React25.createElement(Toolbar.Button, {
     classNames: "bs-[--rail-action]",
-    "data-testid": "update-profile-form-copy-key",
-    onClick: () => setTextValue(identityHex)
+    onClick: onManageCredentials
   }, /* @__PURE__ */ React25.createElement("span", {
     className: "sr-only"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React25.createElement(Key, {
+  }, t("manage credentials label")), /* @__PURE__ */ React25.createElement(IdentificationCard, {
     className: getSize10(5)
   }))), /* @__PURE__ */ React25.createElement(Tooltip3.Portal, null, /* @__PURE__ */ React25.createElement(Tooltip3.Content, {
     side: "bottom"
-  }, t(publicKeyCopied ? "copy success label" : "copy self public key label"), /* @__PURE__ */ React25.createElement(Tooltip3.Arrow, null)))), /* @__PURE__ */ React25.createElement(Tooltip3.Root, null, /* @__PURE__ */ React25.createElement(Tooltip3.Trigger, {
+  }, t("manage credentials label"), /* @__PURE__ */ React25.createElement(Tooltip3.Arrow, null)))), /* @__PURE__ */ React25.createElement(Tooltip3.Root, null, /* @__PURE__ */ React25.createElement(Tooltip3.Trigger, {
     asChild: true
   }, /* @__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", {
@@ -1617,7 +1627,7 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
   }, t(isConnected ? "disconnect label" : "connect label"), /* @__PURE__ */ React25.createElement(Tooltip3.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 } = useTranslation11("os");
   const title = useMemo3(() => {
     switch (activeView) {
@@ -1640,7 +1650,8 @@ var IdentityPanelImpl = (props) => {
     onDone,
     onUpdateProfile,
     connectionState,
-    onChangeConnectionState
+    onChangeConnectionState,
+    onManageCredentials
   }), /* @__PURE__ */ React25.createElement(Viewport.Root, {
     activeView
   }, /* @__PURE__ */ React25.createElement(Viewport.Views, null, /* @__PURE__ */ React25.createElement(Viewport.View, {
@@ -1706,7 +1717,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   if (!identity) {
     log7.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file6,
-      L: 256,
+      L: 272,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1723,7 +1734,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       log7("[state]", state, {
         F: __dxlog_file6,
-        L: 269,
+        L: 285,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3613,7 +3624,7 @@ var IdentityDialog = (props) => {
   }, /* @__PURE__ */ React38.createElement(Dialog.Portal, null, /* @__PURE__ */ React38.createElement(Dialog.Overlay, null, /* @__PURE__ */ React38.createElement(Dialog.Content, {
     "aria-labelledby": titleId,
     onOpenAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React38.createElement(Clipboard3.Provider, null, /* @__PURE__ */ React38.createElement(IdentityPanel, {
+  }, /* @__PURE__ */ React38.createElement(Clipboard4.Provider, null, /* @__PURE__ */ React38.createElement(IdentityPanel, {
     ...props,
     titleId,
     doneActionParent: /* @__PURE__ */ React38.createElement(Dialog.Close, {
@@ -3657,7 +3668,7 @@ import React43, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { AgentHostingProvider, ClientProvider, ClientServicesProxy, Config, ShellDisplay as ShellDisplay2 } from "@dxos/react-client";
-import { Button as Button8, Clipboard as Clipboard5, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip4, useTranslation as useTranslation23 } from "@dxos/react-ui";
+import { Button as Button8, Clipboard as Clipboard6, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip4, useTranslation as useTranslation23 } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
 import { createIFramePort } from "@dxos/rpc-tunnel";
 
@@ -3670,7 +3681,7 @@ import { useSpace as useSpace2 } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/composites/SpaceDialog/SpaceDialog.tsx
 import React40 from "react";
-import { Clipboard as Clipboard4, Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
+import { Clipboard as Clipboard5, Dialog as Dialog2, useId as useId12 } from "@dxos/react-ui";
 var SpaceDialog = (spacePanelProps) => {
   const titleId = useId12("spaceDialog__title");
   return /* @__PURE__ */ React40.createElement(Dialog2.Root, {
@@ -3678,7 +3689,7 @@ var SpaceDialog = (spacePanelProps) => {
     onOpenChange: (open) => open || spacePanelProps.onDone?.()
   }, /* @__PURE__ */ React40.createElement(Dialog2.Portal, null, /* @__PURE__ */ React40.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React40.createElement(Dialog2.Content, {
     "aria-labelledby": titleId
-  }, /* @__PURE__ */ React40.createElement(Clipboard4.Provider, null, /* @__PURE__ */ React40.createElement(SpacePanel, {
+  }, /* @__PURE__ */ React40.createElement(Clipboard5.Provider, null, /* @__PURE__ */ React40.createElement(SpacePanel, {
     ...spacePanelProps,
     titleId,
     doneActionParent: /* @__PURE__ */ React40.createElement(Dialog2.Close, {
@@ -3993,8 +4004,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",
@@ -4101,6 +4113,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",
@@ -4118,11 +4131,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>.',
@@ -4165,7 +4181,7 @@ var runShell = async (config = new Config()) => {
       config,
       services,
       noBanner: true
-    }, /* @__PURE__ */ React43.createElement(Clipboard5.Provider, null, /* @__PURE__ */ React43.createElement(Tooltip4.Provider, null, /* @__PURE__ */ React43.createElement(AgentHostingProvider, null, /* @__PURE__ */ React43.createElement(Shell, {
+    }, /* @__PURE__ */ React43.createElement(Clipboard6.Provider, null, /* @__PURE__ */ React43.createElement(Tooltip4.Provider, null, /* @__PURE__ */ React43.createElement(AgentHostingProvider, null, /* @__PURE__ */ React43.createElement(Shell, {
       runtime
     }))))))));
   } catch {