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

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@dxos/shell",
-  "version": "0.7.5-labs.c0e040f",
+  "version": "0.7.5-labs.d199c0f",
   "description": "DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
-    ".": "./dist/bundle/shell.mjs",
+    ".": {
+      "default": "./dist/bundle/shell.js",
+      "types": "./dist/types/src/index.d.ts"
+    },
     "./style.css": "./dist/bundle/style.css",
     "./react": {
       "types": "./dist/types/src/react.d.ts",
@@ -53,19 +57,19 @@
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/client-services": "0.7.5-labs.c0e040f",
-    "@dxos/client-protocol": "0.7.5-labs.c0e040f",
-    "@dxos/debug": "0.7.5-labs.c0e040f",
-    "@dxos/display-name": "0.7.5-labs.c0e040f",
-    "@dxos/invariant": "0.7.5-labs.c0e040f",
-    "@dxos/log": "0.7.5-labs.c0e040f",
-    "@dxos/protocols": "0.7.5-labs.c0e040f",
-    "@dxos/async": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-types": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-pickers": "0.7.5-labs.c0e040f",
-    "@dxos/rpc-tunnel": "0.7.5-labs.c0e040f",
-    "@dxos/rpc": "0.7.5-labs.c0e040f",
-    "@dxos/util": "0.7.5-labs.c0e040f"
+    "@dxos/async": "0.7.5-labs.d199c0f",
+    "@dxos/client-services": "0.7.5-labs.d199c0f",
+    "@dxos/display-name": "0.7.5-labs.d199c0f",
+    "@dxos/debug": "0.7.5-labs.d199c0f",
+    "@dxos/log": "0.7.5-labs.d199c0f",
+    "@dxos/client-protocol": "0.7.5-labs.d199c0f",
+    "@dxos/invariant": "0.7.5-labs.d199c0f",
+    "@dxos/protocols": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-types": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-pickers": "0.7.5-labs.d199c0f",
+    "@dxos/rpc": "0.7.5-labs.d199c0f",
+    "@dxos/rpc-tunnel": "0.7.5-labs.d199c0f",
+    "@dxos/util": "0.7.5-labs.d199c0f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -75,25 +79,25 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/config": "0.7.5-labs.c0e040f",
-    "@dxos/protocols": "0.7.5-labs.c0e040f",
-    "@dxos/random": "0.7.5-labs.c0e040f",
-    "@dxos/react-hooks": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-client": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f",
-    "@dxos/test-utils": "0.7.5-labs.c0e040f",
-    "@dxos/storybook-utils": "0.7.5-labs.c0e040f"
+    "@dxos/config": "0.7.5-labs.d199c0f",
+    "@dxos/protocols": "0.7.5-labs.d199c0f",
+    "@dxos/random": "0.7.5-labs.d199c0f",
+    "@dxos/react-client": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui": "0.7.5-labs.d199c0f",
+    "@dxos/react-hooks": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f",
+    "@dxos/test-utils": "0.7.5-labs.d199c0f",
+    "@dxos/storybook-utils": "0.7.5-labs.d199c0f"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.7.5-labs.c0e040f"
+    "@dxos/react-client": "0.7.5-labs.d199c0f"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "@dxos/react-ui": "0.7.5-labs.c0e040f",
-    "@dxos/react-ui-theme": "0.7.5-labs.c0e040f"
+    "@dxos/react-ui-theme": "0.7.5-labs.d199c0f",
+    "@dxos/react-ui": "0.7.5-labs.d199c0f"
   },
   "publishConfig": {
     "access": "public"

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -5,6 +5,7 @@
 import { IdentificationCard, Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { debounce } from '@dxos/async';
 import { generateName } from '@dxos/display-name';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
@@ -13,8 +14,8 @@ import { useInvitationStatus } from '@dxos/react-client/invitations';
 import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
 import { useNetworkStatus, ConnectionState } from '@dxos/react-client/mesh';
 import { Avatar, Clipboard, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
-import { EmojiPickerToolbarButton, HuePickerToolbarButton } from '@dxos/react-ui-pickers';
-import { getSize } from '@dxos/react-ui-theme';
+import { EmojiPickerToolbarButton, HuePicker } from '@dxos/react-ui-pickers';
+import { errorText, getSize } from '@dxos/react-ui-theme';
 import { hexToEmoji, hexToHue, keyToFallback } from '@dxos/util';
 
 import {
@@ -48,16 +49,30 @@ const IdentityHeading = ({
 }: IdentityPanelHeadingProps) => {
   const fallbackValue = keyToFallback(identity.identityKey);
   const { t } = useTranslation('os');
-  const [displayName, setDisplayName] = useState(identity.profile?.displayName ?? '');
+  const [displayName, setDisplayNameDirectly] = useState(identity.profile?.displayName ?? '');
   const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));
-  const [hue, setHueDirectly] = useState<string>(getHueValue(identity));
+  const [hue, setHueDirectly] = useState<string | undefined>(getHueValue(identity));
+
+  const updateDisplayName = useMemo(
+    () =>
+      debounce(
+        (nextDisplayName: string) => onUpdateProfile?.({ ...identity.profile, displayName: nextDisplayName }),
+        3_000,
+      ),
+    [onUpdateProfile, identity.profile],
+  );
+
+  const setDisplayName = (nextDisplayName: string) => {
+    setDisplayNameDirectly(nextDisplayName);
+    updateDisplayName(nextDisplayName);
+  };
 
   const setEmoji = (nextEmoji: string) => {
     setEmojiDirectly(nextEmoji);
     void onUpdateProfile?.({ ...identity.profile, data: { ...identity.profile?.data, emoji: nextEmoji } });
   };
 
-  const setHue = (nextHue: string) => {
+  const setHue = (nextHue: string | undefined) => {
     setHueDirectly(nextHue);
     void onUpdateProfile?.({ ...identity.profile, data: { ...identity.profile?.data, hue: nextHue } });
   };
@@ -86,13 +101,12 @@ const IdentityHeading = ({
             classNames='mbs-2 text-center font-light text-xl'
             value={displayName}
             onChange={({ target: { value } }) => setDisplayName(value)}
-            onBlur={({ target: { value } }) => onUpdateProfile?.({ ...identity.profile, displayName: value })}
           />
         </Input.Root>
 
         <Toolbar.Root classNames='flex justify-center items-center gap-1 pt-3'>
           <EmojiPickerToolbarButton emoji={emoji} onChangeEmoji={setEmoji} classNames='bs-[--rail-action]' />
-          <HuePickerToolbarButton hue={hue} onChangeHue={setHue} classNames='bs-[--rail-action]' />
+          <HuePicker value={hue} onChange={setHue} onReset={() => setHue(undefined)} classNames='bs-[--rail-action]' />
           <Clipboard.IconButton
             classNames='bs-[--rail-action]'
             data-testid='update-profile-form-copy-key'
@@ -118,7 +132,7 @@ const IdentityHeading = ({
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Toolbar.Button
-                classNames={['bs-[--rail-action]', !isConnected && 'text-error-500']}
+                classNames={['bs-[--rail-action]', !isConnected && errorText]}
                 onClick={() =>
                   onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
                 }

package/src/panels/IdentityPanel/steps/ProfileForm.tsx

@@ -8,7 +8,7 @@ import { type Event, type SingleOrArray } from 'xstate';
 import { log } from '@dxos/log';
 import { type Identity } from '@dxos/react-client/halo';
 import { useClipboard, useTranslation } from '@dxos/react-ui';
-import { EmojiPickerBlock, HuePickerBlock } from '@dxos/react-ui-pickers';
+import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
 import { Action, Actions, StepHeading, Input } from '../../../components';
@@ -75,12 +75,7 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
             disabled={disabled}
             onClickClear={() => setEmoji(getEmojiValue(identity))}
           />
-          <HuePickerBlock
-            hue={hue}
-            onChangeHue={setHue}
-            disabled={disabled}
-            onClickClear={() => setHue(getHueValue(identity))}
-          />
+          <HuePicker disabled={disabled} value={hue} onChange={setHue} onReset={() => setHue(getHueValue(identity))} />
         </div>
       </div>
       <Actions>

package/src/translations/locales/en-US.ts

@@ -10,6 +10,7 @@ export const 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',
@@ -118,6 +119,8 @@ export const os = {
   'select emoji label': 'Avatar emoji',
   'select hue label': 'Avatar background color',
   'resetting message': 'One moment while the device is reset…',
+
+  // TODO(burdon): Factor out.
   'red label': 'Red',
   'orange label': 'Orange',
   'amber label': 'Amber',
@@ -135,13 +138,15 @@ export const 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':