@dxos/shell 0.7.5-main.9d2a38b → 0.7.5-main.b19bfc8

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@dxos/shell",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.b19bfc8",
   "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",
@@ -42,29 +46,30 @@
   "dependencies": {
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
-    "@fluentui/react-tabster": "^9.19.0",
-    "@radix-ui/react-accordion": "^1.1.1",
-    "@radix-ui/react-context": "^1.0.0",
-    "@radix-ui/react-radio-group": "^1.1.2",
-    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@fluentui/react-tabster": "9.23.3",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.3",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "@xstate/react": "^3.2.1",
     "date-fns": "^3.3.1",
     "emoji-mart": "^5.5.2",
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/async": "0.7.5-main.9d2a38b",
-    "@dxos/client-services": "0.7.5-main.9d2a38b",
-    "@dxos/client-protocol": "0.7.5-main.9d2a38b",
-    "@dxos/display-name": "0.7.5-main.9d2a38b",
-    "@dxos/debug": "0.7.5-main.9d2a38b",
-    "@dxos/invariant": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b",
-    "@dxos/protocols": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-types": "0.7.5-main.9d2a38b",
-    "@dxos/rpc": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b",
-    "@dxos/rpc-tunnel": "0.7.5-main.9d2a38b"
+    "@dxos/client-protocol": "0.7.5-main.b19bfc8",
+    "@dxos/client-services": "0.7.5-main.b19bfc8",
+    "@dxos/debug": "0.7.5-main.b19bfc8",
+    "@dxos/async": "0.7.5-main.b19bfc8",
+    "@dxos/display-name": "0.7.5-main.b19bfc8",
+    "@dxos/invariant": "0.7.5-main.b19bfc8",
+    "@dxos/log": "0.7.5-main.b19bfc8",
+    "@dxos/protocols": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-pickers": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-types": "0.7.5-main.b19bfc8",
+    "@dxos/rpc-tunnel": "0.7.5-main.b19bfc8",
+    "@dxos/util": "0.7.5-main.b19bfc8",
+    "@dxos/rpc": "0.7.5-main.b19bfc8"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -74,25 +79,25 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/config": "0.7.5-main.9d2a38b",
-    "@dxos/protocols": "0.7.5-main.9d2a38b",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/react-client": "0.7.5-main.9d2a38b",
-    "@dxos/react-hooks": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/test-utils": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
-    "@dxos/storybook-utils": "0.7.5-main.9d2a38b"
+    "@dxos/config": "0.7.5-main.b19bfc8",
+    "@dxos/protocols": "0.7.5-main.b19bfc8",
+    "@dxos/random": "0.7.5-main.b19bfc8",
+    "@dxos/react-hooks": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui": "0.7.5-main.b19bfc8",
+    "@dxos/react-client": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
+    "@dxos/storybook-utils": "0.7.5-main.b19bfc8",
+    "@dxos/test-utils": "0.7.5-main.b19bfc8"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.7.5-main.9d2a38b"
+    "@dxos/react-client": "0.7.5-main.b19bfc8"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/react-ui": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AgentConfig.tsx

@@ -88,7 +88,7 @@ export const AgentConfig = ({
         <>
           <Button
             variant='ghost'
-            classNames='mlb-2 is-full justify-start gap-2 !pis-0 !pie-3'
+            classNames='mlb-2 is-full justify-start gap-2 pis-0 pie-3'
             data-testid={agentStatus === 'creatable' ? 'devices-panel.create-agent' : 'devices-panel.agent-error'}
             onClick={agentStatus === 'creatable' ? onAgentCreate : onAgentRefresh}
             aria-describedby='devices-panel.create-agent.description'

package/src/components/DeviceList/DeviceList.tsx

@@ -42,7 +42,7 @@ export const DeviceList = ({
       )}
       <Button
         variant='ghost'
-        classNames='justify-start gap-2 !pis-0 !pie-3 is-full'
+        classNames='justify-start gap-2 pis-0 pie-3 is-full'
         data-testid='devices-panel.create-invitation'
         onClick={onClickAdd}
       >

package/src/components/index.ts

@@ -4,8 +4,6 @@
 
 export * from './AgentConfig';
 export * from './CompoundButton';
-export * from './EmojiPicker';
-export * from './HuePicker';
 export * from './IdentityList';
 export * from './DeviceList';
 export * from './InvitationList';

package/src/panels/IdentityPanel/IdentityPanel.stories.tsx

@@ -6,6 +6,7 @@ import '@dxos-theme';
 
 import React from 'react';
 
+import { IdentityDid } from '@dxos/keys';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
@@ -27,6 +28,7 @@ const noOpProps: IdentityPanelImplProps = {
   activeView: 'identity action chooser',
   createInvitationUrl: (code) => code,
   identity: {
+    did: IdentityDid.random(),
     identityKey: PublicKey.random(),
     profile: {
       displayName: faker.person.firstName(),
@@ -34,6 +36,7 @@ const noOpProps: IdentityPanelImplProps = {
   },
   devices: [],
   connectionState: ConnectionState.ONLINE,
+  onManageCredentials: async () => console.log('manage credentials'),
 };
 
 export default {

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -2,9 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Key, Plugs, PlugsConnected } from '@phosphor-icons/react';
+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';
@@ -12,8 +13,9 @@ import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxo
 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, Input, Toolbar, Tooltip, useClipboard, useId, useTranslation } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
+import { Avatar, Clipboard, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
+import { EmojiPickerToolbarButton, HuePicker } from '@dxos/react-ui-pickers';
+import { errorText, getSize } from '@dxos/react-ui-theme';
 import { hexToEmoji, hexToHue, keyToFallback } from '@dxos/util';
 
 import {
@@ -24,7 +26,7 @@ import {
 import { useIdentityMachine } from './identityMachine';
 import { IdentityActionChooser } from './steps';
 import { useAgentHandlers } from './useAgentHandlers';
-import { Viewport, CloseButton, EmojiPickerToolbarButton, Heading, HuePickerToolbarButton } from '../../components';
+import { Viewport, CloseButton, Heading } from '../../components';
 import { ConfirmReset, InvitationManager } from '../../steps';
 
 const viewStyles = 'pbs-1 pbe-3 pli-3';
@@ -43,15 +45,27 @@ const IdentityHeading = ({
   onUpdateProfile,
   connectionState,
   onChangeConnectionState,
+  onManageCredentials,
 }: 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 { textValue, setTextValue } = useClipboard();
-  const identityHex = identity.identityKey.toHex();
-  const publicKeyCopied = textValue === identityHex;
+
+  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);
@@ -87,37 +101,38 @@ 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]' />
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Toolbar.Button
-                classNames='bs-[--rail-action]'
-                data-testid='update-profile-form-copy-key'
-                onClick={() => setTextValue(identityHex)}
-              >
-                <span className='sr-only'>
-                  {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
-                </span>
-                <Key className={getSize(5)} />
-              </Toolbar.Button>
-            </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Content side='bottom'>
-                {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
-                <Tooltip.Arrow />
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
+          <HuePicker value={hue} onChange={setHue} classNames='bs-[--rail-action]' />
+          <Clipboard.IconButton
+            classNames='bs-[--rail-action]'
+            data-testid='update-profile-form-copy-key'
+            label={t('copy self did label')}
+            value={identity.did}
+          />
+          {onManageCredentials && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Toolbar.Button classNames='bs-[--rail-action]' onClick={onManageCredentials}>
+                  <span className='sr-only'>{t('manage credentials label')}</span>
+                  <IdentificationCard className={getSize(5)} />
+                </Toolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content side='bottom'>
+                  {t('manage credentials label')}
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
           <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)
                 }
@@ -153,6 +168,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     connectionState,
     onChangeConnectionState,
     onDone,
+    onManageCredentials,
     ...rest
   } = props;
   const { t } = useTranslation('os');
@@ -180,6 +196,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
           onUpdateProfile,
           connectionState,
           onChangeConnectionState,
+          onManageCredentials,
         }}
       />
       <Viewport.Root activeView={activeView}>

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -29,6 +29,7 @@ export type IdentityPanelImplProps = {
   connectionState?: ConnectionState;
   onChangeConnectionState?: (nextState: ConnectionState) => Promise<void>;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
+  onManageCredentials?: () => Promise<void>;
   onResetStorage?: () => Promise<void>;
   onRecover?: () => Promise<void>;
   onJoinNewIdentity?: () => Promise<void>;
@@ -46,7 +47,13 @@ export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | '
 
 export type IdentityPanelHeadingProps = Pick<
   IdentityPanelImplProps,
-  'titleId' | 'identity' | 'onDone' | 'onUpdateProfile' | 'connectionState' | 'onChangeConnectionState'
+  | 'titleId'
+  | 'identity'
+  | 'onDone'
+  | 'onUpdateProfile'
+  | 'connectionState'
+  | 'onChangeConnectionState'
+  | 'onManageCredentials'
 > & {
   title: string;
 };

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

@@ -8,9 +8,10 @@ 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, HuePicker } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { Action, Actions, StepHeading, Input, EmojiPickerBlock, HuePickerBlock } from '../../../components';
+import { Action, Actions, StepHeading, Input } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 import { type IdentityEvent } from '../identityMachine';
 
@@ -74,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/panels/JoinPanel/steps/IdentityInput.tsx

@@ -31,7 +31,7 @@ export const IdentityInput = (props: IdentityInputProps) => {
   const [validationMessage, setValidationMessage] = useState('');
   const handleConfirm = async (value: string) => {
     if (isRecover) {
-      await client.halo.recoverIdentity({ seedphrase: value }).then(
+      await client.halo.recoverIdentity({ recoveryCode: value }).then(
         (identity) => {
           send?.({ type: 'selectIdentity' as const, identity });
         },

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { PublicKey } from '@dxos/keys';
+import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { Invitation } from '@dxos/react-client/invitations';
 import { withTheme } from '@dxos/storybook-utils';
@@ -179,6 +179,7 @@ export const SpaceManagerWithMember = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                       },
                     },
@@ -212,6 +213,7 @@ export const SpaceManagerWithMembers = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'John Doe',
@@ -252,6 +254,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.ONLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'John Doe',
@@ -262,6 +265,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.OFFLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'Alice Wong',
@@ -272,6 +276,7 @@ export const SpaceManagerWithMoreMembers = () => {
                       presence: SpaceMember.PresenceState.OFFLINE,
                       role: HaloSpaceMember.Role.ADMIN,
                       identity: {
+                        did: IdentityDid.random(),
                         identityKey: PublicKey.random(),
                         profile: {
                           displayName: 'Steel Nickels',

package/src/testing/fixtures/identities.ts

@@ -2,12 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
+import { IdentityDid } from '@dxos/keys';
 import { PublicKey } from '@dxos/react-client';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 
 export const alice: SpaceMember = {
   role: HaloSpaceMember.Role.ADMIN,
   identity: {
+    did: IdentityDid.random(),
     identityKey: PublicKey.random(),
     profile: {
       displayName: 'Alice',

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

@@ -8,7 +8,7 @@ export const 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',
   'joining space heading': 'Joining space',
   'join space heading': 'Enter space invitation',
@@ -118,6 +118,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,6 +137,10 @@ export const 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',