@dxos/shell 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/shell",
-  "version": "0.8.1-staging.5be625a",
+  "version": "0.8.1-staging.97aedb1",
   "description": "DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,8 +10,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "default": "./dist/bundle/shell.js",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "default": "./dist/bundle/shell.js"
     },
     "./style.css": "./dist/bundle/style.css",
     "./react": {
@@ -57,19 +57,19 @@
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/debug": "0.8.1-staging.5be625a",
-    "@dxos/client-protocol": "0.8.1-staging.5be625a",
-    "@dxos/client-services": "0.8.1-staging.5be625a",
-    "@dxos/display-name": "0.8.1-staging.5be625a",
-    "@dxos/invariant": "0.8.1-staging.5be625a",
-    "@dxos/async": "0.8.1-staging.5be625a",
-    "@dxos/log": "0.8.1-staging.5be625a",
-    "@dxos/protocols": "0.8.1-staging.5be625a",
-    "@dxos/react-ui-types": "0.8.1-staging.5be625a",
-    "@dxos/react-ui-pickers": "0.8.1-staging.5be625a",
-    "@dxos/rpc": "0.8.1-staging.5be625a",
-    "@dxos/rpc-tunnel": "0.8.1-staging.5be625a",
-    "@dxos/util": "0.8.1-staging.5be625a"
+    "@dxos/async": "0.8.1-staging.97aedb1",
+    "@dxos/client-services": "0.8.1-staging.97aedb1",
+    "@dxos/debug": "0.8.1-staging.97aedb1",
+    "@dxos/display-name": "0.8.1-staging.97aedb1",
+    "@dxos/invariant": "0.8.1-staging.97aedb1",
+    "@dxos/protocols": "0.8.1-staging.97aedb1",
+    "@dxos/log": "0.8.1-staging.97aedb1",
+    "@dxos/client-protocol": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-pickers": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-types": "0.8.1-staging.97aedb1",
+    "@dxos/rpc-tunnel": "0.8.1-staging.97aedb1",
+    "@dxos/util": "0.8.1-staging.97aedb1",
+    "@dxos/rpc": "0.8.1-staging.97aedb1"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -79,25 +79,25 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/config": "0.8.1-staging.5be625a",
-    "@dxos/protocols": "0.8.1-staging.5be625a",
-    "@dxos/random": "0.8.1-staging.5be625a",
-    "@dxos/react-client": "0.8.1-staging.5be625a",
-    "@dxos/react-hooks": "0.8.1-staging.5be625a",
-    "@dxos/react-ui": "0.8.1-staging.5be625a",
-    "@dxos/react-ui-theme": "0.8.1-staging.5be625a",
-    "@dxos/storybook-utils": "0.8.1-staging.5be625a",
-    "@dxos/test-utils": "0.8.1-staging.5be625a"
+    "@dxos/config": "0.8.1-staging.97aedb1",
+    "@dxos/protocols": "0.8.1-staging.97aedb1",
+    "@dxos/react-hooks": "0.8.1-staging.97aedb1",
+    "@dxos/random": "0.8.1-staging.97aedb1",
+    "@dxos/react-client": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-theme": "0.8.1-staging.97aedb1",
+    "@dxos/test-utils": "0.8.1-staging.97aedb1",
+    "@dxos/storybook-utils": "0.8.1-staging.97aedb1"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.1-staging.5be625a"
+    "@dxos/react-client": "0.8.1-staging.97aedb1"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "@dxos/react-ui": "0.8.1-staging.5be625a",
-    "@dxos/react-ui-theme": "0.8.1-staging.5be625a"
+    "@dxos/react-ui": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-theme": "0.8.1-staging.97aedb1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AgentConfig.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ArrowsClockwise, Database, Plus, Power } from '@phosphor-icons/react';
+import { ArrowsClockwise, Plus, Power } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Avatar, Button, Link, Tooltip, Trans, useTranslation } from '@dxos/react-ui';
@@ -36,17 +36,13 @@ export const AgentConfig = ({
             className='mlb-2 flex gap-2 items-center'
             aria-describedby='devices-panel.create-agent.description'
           >
-            <Avatar.Root status={agentStatus === 'created' ? 'warning' : 'inactive'} variant='square'>
-              <Avatar.Frame classNames='place-self-center'>
-                <Database
-                  weight='duotone'
-                  width={24}
-                  height={24}
-                  x={8}
-                  y={8}
-                  {...(agentStatus !== 'created' && { className: 'opacity-50' })}
-                />
-              </Avatar.Frame>
+            <Avatar.Root>
+              <Avatar.Content
+                status={agentStatus === 'created' ? 'warning' : 'inactive'}
+                variant='square'
+                classNames={['place-self-center', agentStatus !== 'created' && 'opactiy-50']}
+                icon='ph--database--duotone'
+              />
               <Avatar.Label classNames='flex-1 text-sm truncate'>
                 {t(
                   agentStatus === 'created'

package/src/components/DeviceList/DeviceList.tsx

@@ -21,7 +21,7 @@ export const DeviceList = ({
   onClickRecover,
   onClickJoinExisting,
   onAgentDestroy,
-}: DeviceListProps & Pick<AgentFormProps, 'onAgentDestroy'>) => {
+}: DeviceListProps & Partial<Pick<AgentFormProps, 'onAgentDestroy'>>) => {
   const { t } = useTranslation('os');
   return (
     <div role='none' className='p-1'>

package/src/components/DeviceList/DeviceListItem.tsx

@@ -2,19 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  type IconProps,
-  Compass,
-  Desktop,
-  DeviceMobile,
-  Devices,
-  DotsThree,
-  ShareFat,
-  Power,
-  Robot,
-  Database,
-  FirstAidKit,
-} from '@phosphor-icons/react';
+import { DotsThree, ShareFat, Power, FirstAidKit } from '@phosphor-icons/react';
 import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { generateName } from '@dxos/display-name';
@@ -35,17 +23,11 @@ import { keyToFallback } from '@dxos/util';
 
 import { type AgentFormProps, type DeviceListItemProps } from './DeviceListProps';
 
-const iconProps: IconProps = {
-  weight: 'duotone',
-  width: 24,
-  height: 24,
-  x: 8,
-  y: 8,
-};
-
 export const DeviceListItem = forwardRef<
   HTMLLIElement,
-  ThemedClassName<ComponentPropsWithoutRef<'li'>> & DeviceListItemProps & Pick<AgentFormProps, 'onAgentDestroy'>
+  ThemedClassName<ComponentPropsWithoutRef<'li'>> &
+    DeviceListItemProps &
+    Partial<Pick<AgentFormProps, 'onAgentDestroy'>>
 >(
   (
     {
@@ -77,37 +59,35 @@ export const DeviceListItem = forwardRef<
         labelId={labelId}
         ref={forwardedRef}
       >
-        <Avatar.Root
-          status={
-            isCurrent && connectionState === ConnectionState.OFFLINE
-              ? 'error'
-              : device.presence === Device.PresenceState.ONLINE
-                ? 'active'
-                : 'inactive'
-          }
-          labelId={labelId}
-          hue={fallbackValue.hue}
-          variant='square'
-        >
-          <Avatar.Frame classNames='place-self-center'>
-            {device.profile?.type ? (
-              device.profile.type === DeviceType.AGENT_MANAGED ? (
-                <Database {...iconProps} />
-              ) : device.profile.type === DeviceType.BROWSER ? (
-                <Compass {...iconProps} />
-              ) : device.profile.type === DeviceType.NATIVE ? (
-                <Desktop {...iconProps} />
-              ) : [DeviceType.AGENT, DeviceType.AGENT_MANAGED].includes(device.profile.type) ? (
-                <Robot {...iconProps} />
-              ) : device.profile.type === DeviceType.MOBILE ? (
-                <DeviceMobile {...iconProps} />
-              ) : (
-                <Devices {...iconProps} />
-              )
-            ) : (
-              <Avatar.Fallback text={fallbackValue.emoji} />
-            )}
-          </Avatar.Frame>
+        <Avatar.Root labelId={labelId}>
+          <Avatar.Content
+            status={
+              isCurrent && connectionState === ConnectionState.OFFLINE
+                ? 'error'
+                : device.presence === Device.PresenceState.ONLINE
+                  ? 'active'
+                  : 'inactive'
+            }
+            hue={fallbackValue.hue}
+            variant='square'
+            classNames='place-self-center'
+            {...(device.profile?.type
+              ? {
+                  icon:
+                    device.profile.type === DeviceType.AGENT_MANAGED
+                      ? 'ph--database--regular'
+                      : device.profile.type === DeviceType.BROWSER
+                        ? 'ph--compass--regular'
+                        : device.profile.type === DeviceType.NATIVE
+                          ? 'ph--desktop--regular'
+                          : [DeviceType.AGENT, DeviceType.AGENT_MANAGED].includes(device.profile.type)
+                            ? 'ph--robot--regular'
+                            : device.profile.type === DeviceType.MOBILE
+                              ? 'ph--device-mobile--regular'
+                              : 'ph--devices--regular',
+                }
+              : { fallback: fallbackValue.emoji })}
+          />
           <Avatar.Label classNames='flex-1 text-sm truncate'>{displayName}</Avatar.Label>
           {isCurrent && <Tag color='primary'>{t('current device tag label')}</Tag>}
           {/* TODO(wittjosiah): EDGE agents cannot current be turned off. */}
@@ -131,7 +111,7 @@ export const DeviceListItem = forwardRef<
               </Tooltip.Portal>
             </Tooltip.Root>
           )} */}
-          {device.kind === DeviceKind.CURRENT && (
+          {device.kind === DeviceKind.CURRENT && (onClickJoinExisting || onClickRecover || onClickReset) && (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
                 <Button
@@ -149,20 +129,27 @@ export const DeviceListItem = forwardRef<
                   {/*  <PencilSimpleLine className={getSize(5)} /> */}
                   {/*  {t('edit device label')} */}
                   {/* </DropdownMenu.Item> */}
-                  <DropdownMenu.Item data-testid='device-list-item-current.join-existing' onClick={onClickJoinExisting}>
-                    <ShareFat className={getSize(5)} />
-                    {t('choose join new identity label')}
-                  </DropdownMenu.Item>
+                  {onClickJoinExisting && (
+                    <DropdownMenu.Item
+                      data-testid='device-list-item-current.join-existing'
+                      onClick={onClickJoinExisting}
+                    >
+                      <ShareFat className={getSize(5)} />
+                      {t('choose join new identity label')}
+                    </DropdownMenu.Item>
+                  )}
                   {onClickRecover && (
                     <DropdownMenu.Item data-testid='device-list-item-current.recover' onClick={onClickRecover}>
                       <FirstAidKit className={getSize(5)} />
                       {t('choose recover identity label')}
                     </DropdownMenu.Item>
                   )}
-                  <DropdownMenu.Item data-testid='device-list-item-current.reset' onClick={onClickReset}>
-                    <Power className={getSize(5)} />
-                    {t('reset device label')}
-                  </DropdownMenu.Item>
+                  {onClickReset && (
+                    <DropdownMenu.Item data-testid='device-list-item-current.reset' onClick={onClickReset}>
+                      <Power className={getSize(5)} />
+                      {t('reset device label')}
+                    </DropdownMenu.Item>
+                  )}
                 </DropdownMenu.Viewport>
               </DropdownMenu.Content>
             </DropdownMenu.Root>

package/src/components/DeviceList/index.ts

@@ -3,4 +3,5 @@
 //
 
 export * from './DeviceList';
+export * from './DeviceListItem';
 export * from './DeviceListProps';

package/src/components/IdentityList/IdentityListItem.tsx

@@ -33,14 +33,13 @@ export const IdentityListItem = forwardRef<
       labelId={labelId}
       ref={forwardedRef}
     >
-      <Avatar.Root
-        status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'}
-        labelId={labelId}
-        hue={identity.profile?.data?.hue || fallbackValue.hue}
-      >
-        <Avatar.Frame classNames='place-self-center'>
-          <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
-        </Avatar.Frame>
+      <Avatar.Root labelId={labelId}>
+        <Avatar.Content
+          status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'}
+          hue={identity.profile?.data?.hue || fallbackValue.hue}
+          fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
+          classNames='place-self-center'
+        />
         <Avatar.Label classNames='text-sm truncate pli-2'>{displayName}</Avatar.Label>
       </Avatar.Root>
     </ListItem.Root>

package/src/components/InvitationList/InvitationListItem.tsx

@@ -18,9 +18,9 @@ import {
   useTranslation,
   Avatar,
   useThemeContext,
-  type AvatarRootProps,
   Tooltip,
   type ThemedClassName,
+  type AvatarContentProps,
 } from '@dxos/react-ui';
 import { focusRing, getSize, mx } from '@dxos/react-ui-theme';
 import { hexToEmoji } from '@dxos/util';
@@ -44,13 +44,13 @@ export const InvitationListItem = (props: InvitationListItemProps) => {
   return <InvitationListItemImpl {...props} invitationStatus={invitationStatus} />;
 };
 
-const avatarProps: Pick<AvatarRootProps, 'size' | 'variant'> = { size: 10, variant: 'circle' };
+const avatarProps: Pick<AvatarContentProps, 'size' | 'variant'> = { size: 10, variant: 'circle' };
 
 const AvatarStackEffect = ({
   animation,
   status,
   reverseEffects,
-}: Pick<AvatarRootProps, 'status' | 'animation'> & Pick<InvitationListItemProps, 'reverseEffects'>) => {
+}: Pick<AvatarContentProps, 'status' | 'animation'> & Pick<InvitationListItemProps, 'reverseEffects'>) => {
   const { tx } = useThemeContext();
   return (
     <>
@@ -154,11 +154,16 @@ export const InvitationListItemImpl = ({
         <AvatarStackEffect status={avatarStatus} animation={avatarAnimation} reverseEffects={reverseEffects} />
       )}
       <Tooltip.Root>
-        <Avatar.Root {...avatarProps} animation={avatarAnimation} status={avatarStatus}>
+        <Avatar.Root>
           <Tooltip.Trigger asChild>
-            <Avatar.Frame tabIndex={0} classNames={[focusRing, 'relative rounded-full place-self-center']}>
-              <Avatar.Fallback text={hexToEmoji(invitationId)} />
-            </Avatar.Frame>
+            <Avatar.Content
+              {...avatarProps}
+              animation={avatarAnimation}
+              status={avatarStatus}
+              fallback={hexToEmoji(invitationId)}
+              tabIndex={0}
+              classNames={[focusRing, 'relative rounded-full place-self-center']}
+            />
           </Tooltip.Trigger>
         </Avatar.Root>
         <Tooltip.Portal>

package/src/components/SpaceListItem.tsx

@@ -23,9 +23,7 @@ export const SpaceListItem = forwardRef(
         data-testid='space-list-item'
       >
         <Avatar.Root labelId={labelId}>
-          <Avatar.Frame>
-            <Avatar.Fallback text={fallbackValue} />
-          </Avatar.Frame>
+          <Avatar.Content fallback={fallbackValue} />
           <Avatar.Label classNames='text-sm truncate'>{displayName}</Avatar.Label>
         </Avatar.Root>
       </li>

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -81,11 +81,16 @@ const IdentityHeading = ({
 
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
-      <Avatar.Root size={16} variant='circle' status={isConnected ? 'active' : 'error'} hue={hue || fallbackValue.hue}>
+      <Avatar.Root>
         <Toolbar.Root classNames='flex justify-center'>
-          <Avatar.Frame classNames='relative z-[2] -mli-4 chromatic-ignore'>
-            <Avatar.Fallback text={emoji || fallbackValue.emoji} />
-          </Avatar.Frame>
+          <Avatar.Content
+            size={16}
+            variant='circle'
+            status={isConnected ? 'active' : 'error'}
+            hue={hue || fallbackValue.hue}
+            fallback={emoji || fallbackValue.emoji}
+            classNames='relative z-[2] -mli-4 chromatic-ignore'
+          />
         </Toolbar.Root>
 
         <Avatar.Label classNames='sr-only' data-testid='identityHeading.displayName'>
@@ -106,7 +111,13 @@ const IdentityHeading = ({
 
         <Toolbar.Root classNames='flex justify-center items-center gap-1 pt-3'>
           <EmojiPickerToolbarButton emoji={emoji} onChangeEmoji={setEmoji} classNames='bs-[--rail-action]' />
-          <HuePicker value={hue} onChange={setHue} onReset={() => setHue(undefined)} classNames='bs-[--rail-action]' />
+          <HuePicker
+            value={hue}
+            onChange={setHue}
+            onReset={() => setHue(undefined)}
+            classNames='bs-[--rail-action]'
+            rootVariant='toolbar-button'
+          />
           <Clipboard.IconButton
             classNames='bs-[--rail-action]'
             data-testid='update-profile-form-copy-key'

package/src/panels/JoinPanel/steps/IdentityAdded.tsx

@@ -43,10 +43,12 @@ export const IdentityAdded = (props: IdentityAddedProps) => {
     <>
       <StepHeading>{t('identity added label')}</StepHeading>
       <div role='none' className='grow flex flex-col items-center justify-center text-center gap-2'>
-        <Avatar.Root status='active' labelId={labelId} hue={addedIdentity?.profile?.data?.hue || fallbackValue.hue}>
-          <Avatar.Frame>
-            <Avatar.Fallback text={addedIdentity?.profile?.data?.emoji || fallbackValue.emoji} />
-          </Avatar.Frame>
+        <Avatar.Root labelId={labelId}>
+          <Avatar.Content
+            status='active'
+            hue={addedIdentity?.profile?.data?.hue || fallbackValue.hue}
+            fallback={addedIdentity?.profile?.data?.emoji || fallbackValue.emoji}
+          />
           <Avatar.Label classNames={mx('text-lg truncate', !addedIdentity?.profile?.displayName && 'font-mono')}>
             {displayName}
           </Avatar.Label>

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

@@ -87,15 +87,15 @@ export const os = {
   'device list heading': 'Devices',
   'space member list heading': 'Members',
   'space panel heading': 'Space membership',
-  'auth code message': 'Enter the following auth code on the joining device.',
-  'auth other device emoji message': 'Be sure the other device shows the following symbol:',
+  'auth code message': 'Enter the following auth code on the joining device. Click the code to copy it.',
+  'auth other device emoji message': 'Be sure the other device shows the following emoji.',
   'display name input label': 'Display name',
   'display name input placeholder': 'Enter a display name',
-  'invite one label': 'Single-use invitation',
+  'invite one label': 'Create single-use invitation',
   'invite one description': 'Only one user may join.',
   'invite one qr label': 'Single-use invitation',
   'invite one list item label': 'Active single-use invitation',
-  'invite many label': 'Multi-use invitation',
+  'invite many label': 'Create multi-use invitation',
   'invite many description': 'Anyone with the link can join.',
   'invite many qr label': 'Multi-use invitation',
   'invite many list item label': 'Active multi-use invitation',
@@ -111,7 +111,7 @@ export const os = {
   'confirmation placeholder': 'Enter {{confirmationValue}} to continue.',
   'sign out chooser title': 'Danger zone',
   'sign out chooser message': 'Proceeding with the action below will erase all data on this device.',
-  'join new identity label': 'Join a new identity',
+  'join new identity label': 'Join an existing identity',
   'reset device label': 'Reset storage',
   'reset device confirm message': 'Are you sure you want to reset your device? All data will be lost.',
   'emoji and color label': 'Emoji and color',