@dxos/shell 0.4.7-main.7b31910 → 0.4.7-main.83fe62c

package/src/components/EmojiPicker.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2024 DXOS.org
+//
+import emojiData from '@emoji-mart/data';
+import EmojiMart from '@emoji-mart/react';
+import { ArrowCounterClockwise, CaretDown } from '@phosphor-icons/react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type Dispatch, type SetStateAction, useState } from 'react';
+
+import { Button, Popover, useTranslation, Tooltip, type ButtonProps } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+export type EmojiPickerProps = {
+  disabled?: boolean;
+  defaultEmoji?: string;
+  emoji?: string;
+  onChangeEmoji?: Dispatch<SetStateAction<string>>;
+  onClickClear?: ButtonProps['onClick'];
+};
+
+export const EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {
+  const { t } = useTranslation('os');
+
+  const [emojiValue, setEmojiValue] = useControllableState<string>({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji,
+  });
+
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>
+        <Popover.Trigger asChild>
+          <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>
+            <span className='sr-only'>{t('select emoji label')}</span>
+            <span className='grow pis-14'>{emojiValue}</span>
+            <CaretDown className={getSize(4)} />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          side='right'
+          onKeyDownCapture={(event) => {
+            if (event.key === 'Escape') {
+              event.stopPropagation();
+              setEmojiPickerOpen(false);
+            }
+          }}
+        >
+          <EmojiMart
+            data={emojiData}
+            onEmojiSelect={({ native }: { native?: string }) => {
+              if (native) {
+                setEmojiValue(native);
+                setEmojiPickerOpen(false);
+              }
+            }}
+            autoFocus={true}
+            maxFrequentRows={0}
+            noCountryFlags={true}
+          />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button variant='ghost' onClick={onClickClear} disabled={disabled}>
+            <span className='sr-only'>{t('clear label')}</span>
+            <ArrowCounterClockwise />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content style={{ zIndex: 70 }} side='right'>
+            {t('clear label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </>
+  );
+};

package/src/components/HuePicker.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { ArrowCounterClockwise, CaretDown, Check } from '@phosphor-icons/react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type Dispatch, type SetStateAction } from 'react';
+
+import { Button, useTranslation, Tooltip, DropdownMenu, useThemeContext, type ButtonProps } from '@dxos/react-ui';
+import { getSize, hueTokenThemes } from '@dxos/react-ui-theme';
+
+const HuePreview = ({ hue }: { hue: string }) => {
+  const { tx } = useThemeContext();
+  return (
+    <svg width={12} height={12} viewBox='0 0 12 12'>
+      <rect x={0} y={0} width={12} height={12} className={tx('hue.fill', 'select--hue__preview', { hue })} />
+    </svg>
+  );
+};
+
+export type HuePickerProps = {
+  disabled?: boolean;
+  defaultHue?: string;
+  hue?: string;
+  onChangeHue?: Dispatch<SetStateAction<string>>;
+  onClickClear?: ButtonProps['onClick'];
+};
+
+export const HuePicker = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
+  const { t } = useTranslation('os');
+
+  const [hueValue, setHueValue] = useControllableState<string>({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue,
+  });
+
+  return (
+    <>
+      <DropdownMenu.Root modal={false}>
+        <DropdownMenu.Trigger asChild>
+          <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>
+            <span className='sr-only'>{t('select hue label')}</span>
+            <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>
+              <HuePreview hue={hueValue!} />
+              <span>{t(`${hueValue} label`)}</span>
+            </div>
+            <CaretDown className={getSize(4)} />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content side='right'>
+          <DropdownMenu.Viewport>
+            {Object.keys(hueTokenThemes).map((hue) => {
+              return (
+                <DropdownMenu.CheckboxItem
+                  key={hue}
+                  checked={hue === hueValue}
+                  onCheckedChange={() => setHueValue(hue)}
+                >
+                  <HuePreview hue={hue} />
+                  <span className='grow'>{t(`${hue} label`)}</span>
+                  <DropdownMenu.ItemIndicator>
+                    <Check />
+                  </DropdownMenu.ItemIndicator>
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button variant='ghost' onClick={onClickClear} disabled={disabled}>
+            <span className='sr-only'>{t('clear label')}</span>
+            <ArrowCounterClockwise />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content style={{ zIndex: 70 }} side='right'>
+            {t('clear label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </>
+  );
+};

package/src/components/IdentityList/IdentityListItem.tsx

@@ -7,8 +7,9 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { generateName } from '@dxos/display-name';
 import { SpaceMember } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
-import { ListItem, Avatar, useJdenticonHref, useId, type ThemedClassName } from '@dxos/react-ui';
+import { ListItem, Avatar, useId, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
+import { keyToFallback } from '@dxos/util';
 
 type IdentityListItemProps = {
   identity: Identity;
@@ -20,9 +21,8 @@ export const IdentityListItem = forwardRef<
   HTMLLIElement,
   ThemedClassName<ComponentPropsWithoutRef<'li'>> & IdentityListItemProps
 >(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
-  const fallbackValue = identity.identityKey.toHex();
+  const fallbackValue = keyToFallback(identity.identityKey);
   const labelId = useId('identityListItem__label');
-  const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
   const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
   return (
     <ListItem.Root
@@ -33,9 +33,13 @@ export const IdentityListItem = forwardRef<
       labelId={labelId}
       ref={forwardedRef}
     >
-      <Avatar.Root status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'} labelId={labelId}>
+      <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 href={jdenticon} />
+          <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
         </Avatar.Frame>
         <Avatar.Label classNames='text-sm truncate pli-2'>{displayName}</Avatar.Label>
       </Avatar.Root>

package/src/components/InvitationList/InvitationListItem.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 import { X } from '@phosphor-icons/react';
+import { formatDistanceToNow } from 'date-fns';
 import React, { type ComponentPropsWithoutRef, useCallback } from 'react';
 
 import {
@@ -21,9 +22,9 @@ import {
   type ThemedClassName,
 } from '@dxos/react-ui';
 import { focusRing, getSize, mx } from '@dxos/react-ui-theme';
+import { hexToEmoji } from '@dxos/util';
 
 import { type SharedInvitationListProps } from './InvitationListProps';
-import { toEmoji } from '../../util';
 import { AuthCode } from '../AuthCode';
 import { CopyButtonIconOnly } from '../Clipboard';
 
@@ -111,6 +112,10 @@ export const InvitationListItemImpl = ({
 
   const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
   const invitationId = invitation?.get().invitationId;
+  const invitationHasLifetime = invitation?.get().lifetime;
+  const invitationTimeLeft = invitation?.expiry
+    ? formatDistanceToNow(invitation?.expiry, { addSuffix: true })
+    : undefined;
 
   const avatarAnimation = [
     Invitation.State.INIT,
@@ -151,7 +156,7 @@ export const InvitationListItemImpl = ({
         <Avatar.Root {...avatarProps} animation={avatarAnimation} status={avatarStatus}>
           <Tooltip.Trigger asChild>
             <Avatar.Frame tabIndex={0} classNames={[focusRing, 'relative rounded-full place-self-center']}>
-              <Avatar.Fallback text={toEmoji(invitationId)} />
+              <Avatar.Fallback text={hexToEmoji(invitationId)} />
             </Avatar.Frame>
           </Tooltip.Trigger>
         </Avatar.Root>
@@ -163,17 +168,26 @@ export const InvitationListItemImpl = ({
         </Tooltip.Portal>
       </Tooltip.Root>
       {showShare && invitationUrl ? (
-        <>
-          <Button
-            variant='ghost'
-            classNames='grow justify-start font-medium'
-            onClick={() => send({ type: 'selectInvitation', invitation })}
-            data-testid='show-qrcode'
-          >
-            <span>{t('open share panel label')}</span>
-          </Button>
-          <CopyButtonIconOnly variant='ghost' value={invitationUrl} />
-        </>
+        <Tooltip.Root>
+          <>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                classNames='grow justify-start font-medium'
+                onClick={() => send({ type: 'selectInvitation', invitation })}
+                data-testid='show-qrcode'
+              >
+                <span>{t('open share panel label')}</span>
+              </Button>
+            </Tooltip.Trigger>
+            <CopyButtonIconOnly variant='ghost' value={invitationUrl} />
+          </>
+          <Tooltip.Portal>
+            <Tooltip.Content side='left' classNames='z-[70]'>
+              {invitationHasLifetime && <span>Expires {invitationTimeLeft}</span>}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
       ) : showAuthCode ? (
         <AuthCode code={authCode} classNames='grow' />
       ) : invitationStatus === Invitation.State.CONNECTING ? (

package/src/components/SpaceListItem.tsx

@@ -5,15 +5,14 @@
 import React, { type ForwardedRef, forwardRef } from 'react';
 
 import type { Space } from '@dxos/react-client/echo';
-import { Avatar, useId, useJdenticonHref } from '@dxos/react-ui';
+import { Avatar, useId } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { humanize } from '@dxos/util';
+import { humanize, keyToEmoji } from '@dxos/util';
 
 export const SpaceListItem = forwardRef(
   ({ space, onClick }: { space: Space; onClick?: () => void }, ref: ForwardedRef<HTMLLIElement>) => {
-    const fallbackValue = space.key.toHex();
+    const fallbackValue = keyToEmoji(space.key);
     const labelId = useId('identityListItem__label');
-    const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
     const displayName = space.properties.name ?? humanize(space.key.toHex());
 
     return (
@@ -25,7 +24,7 @@ export const SpaceListItem = forwardRef(
       >
         <Avatar.Root labelId={labelId}>
           <Avatar.Frame>
-            <Avatar.Fallback href={jdenticon} />
+            <Avatar.Fallback text={fallbackValue} />
           </Avatar.Frame>
           <Avatar.Label classNames='text-sm truncate'>{displayName}</Avatar.Label>
         </Avatar.Root>

package/src/components/index.ts

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

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -9,7 +9,8 @@ import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxos/react-client/halo';
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
-import { Avatar, DensityProvider, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
+import { Avatar, DensityProvider, useId, useTranslation } from '@dxos/react-ui';
+import { keyToFallback } from '@dxos/util';
 
 import {
   type IdentityPanelHeadingProps,
@@ -25,12 +26,12 @@ import { InvitationManager } from '../../steps';
 const viewStyles = 'pbs-1 pbe-3 pli-3';
 
 const IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHeadingProps) => {
-  const fallbackHref = useJdenticonHref(identity.identityKey.toHex(), 12);
+  const fallbackValue = keyToFallback(identity.identityKey);
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
-      <Avatar.Root size={12} variant='circle' status='active'>
+      <Avatar.Root size={12} variant='circle' status='active' hue={identity.profile?.data?.hue || fallbackValue.hue}>
         <Avatar.Frame classNames='block mbs-4 mbe-2 mli-auto chromatic-ignore'>
-          <Avatar.Fallback href={fallbackHref} />
+          <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
         </Avatar.Frame>
         <Avatar.Label classNames='block text-center font-light text-xl' data-testid='identityHeading.displayName'>
           {identity.profile?.displayName ?? generateName(identity.identityKey.toHex())}
@@ -128,7 +129,7 @@ export const IdentityPanel = ({
   const invitations = useHaloInvitations();
   const agentProps = useAgentHandlers({ client, identity, invitations });
   if (!identity) {
-    console.error('IdentityPanel rendered with no active identity.');
+    log.error('IdentityPanel rendered with no active identity.');
     return null;
   }
   const [identityState, identitySend, identityService] = useIdentityMachine(client);

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

@@ -5,6 +5,7 @@
 import { CaretRight, Devices, Plus, Power, UserGear, HardDrive } from '@phosphor-icons/react';
 import React, { useCallback } from 'react';
 
+import { log } from '@dxos/log';
 import { useAgentHostingProviderClient, useClient } from '@dxos/react-client';
 import { useHaloInvitations } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
@@ -24,12 +25,13 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
   const onInvitationEvent = useCallback((invitation: Invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
     if (invitation.state === Invitation.State.CONNECTING) {
-      console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+      log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
     }
   }, []);
   const createInvitation = (e: React.MouseEvent) => {
     const testing = e.altKey && e.shiftKey;
     invitations.forEach((invitation) => invitation.cancel());
+    // TODO(nf): allow user to make invitations non-persistent?
     const invitation = client.halo.share(
       testing ? { type: Invitation.Type.MULTIUSE, authMethod: Invitation.AuthMethod.NONE } : undefined,
     );

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

@@ -8,8 +8,9 @@ import { type Event, type SingleOrArray } from 'xstate';
 import { log } from '@dxos/log';
 import { type Identity } from '@dxos/react-client/halo';
 import { useTranslation } from '@dxos/react-ui';
+import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { Action, Actions, StepHeading, Input, useClipboardContext } from '../../../components';
+import { Action, Actions, StepHeading, Input, useClipboardContext, EmojiPicker, HuePicker } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 import { type IdentityEvent } from '../identityMachine';
 
@@ -36,13 +37,20 @@ export const ProfileForm = (props: ProfileFormProps) => {
   return <ProfileFormImpl {...props} onUpdateProfile={handleUpdateProfile} validationMessage={validationMessage} />;
 };
 
+const getHueValue = (identity?: Identity) =>
+  identity?.profile?.data?.hue || hexToHue(identity?.identityKey.toHex() ?? '0');
+const getEmojiValue = (identity?: Identity) =>
+  identity?.profile?.data?.emoji || hexToEmoji(identity?.identityKey.toHex() ?? '0');
+
 // TODO(zhenyasav): impl shouldn't need send()
 const ProfileFormImpl = (props: ProfileFormImplProps) => {
   const { active, identity, send, onUpdateProfile, validationMessage } = props;
   const profile = identity?.profile;
   const disabled = !active;
   const { t } = useTranslation('os');
-  const [inputValue, setInputValue] = useState(profile?.displayName ?? '');
+  const [displayName, setDisplayName] = useState(profile?.displayName ?? '');
+  const [hue, setHue] = useState<string>(getHueValue(identity));
+  const [emoji, setEmoji] = useState<string>(getEmojiValue(identity));
   const { textValue, setTextValue } = useClipboardContext();
   const identityHex = identity?.identityKey.toHex();
   const copied = textValue === identityHex;
@@ -51,14 +59,28 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
       <div role='none' className='grow flex flex-col justify-center'>
         <Input
           {...{ validationMessage }}
-          label={<StepHeading>{t('display name input label')}</StepHeading>}
+          label={<StepHeading className='m-0'>{t('display name input label')}</StepHeading>}
           disabled={disabled}
           data-testid='display-name-input'
           placeholder={t('display name input placeholder')}
-          value={inputValue}
-          onChange={({ target: { value } }) => setInputValue(value)}
-          onKeyDown={({ key }) => key === 'Enter' && onUpdateProfile?.({ displayName: inputValue })}
+          value={displayName}
+          onChange={({ target: { value } }) => setDisplayName(value)}
         />
+        <StepHeading className='mbe-2'>{t('emoji and color label')}</StepHeading>
+        <div role='none' className='grid grid-cols-[1fr_min-content] gap-y-2'>
+          <EmojiPicker
+            emoji={emoji}
+            onChangeEmoji={setEmoji}
+            disabled={disabled}
+            onClickClear={() => setEmoji(getEmojiValue(identity))}
+          />
+          <HuePicker
+            hue={hue}
+            onChangeHue={setHue}
+            disabled={disabled}
+            onClickClear={() => setHue(getHueValue(identity))}
+          />
+        </div>
       </div>
       <Actions>
         <Action
@@ -84,7 +106,7 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
         <Action
           variant='primary'
           disabled={disabled}
-          onClick={() => onUpdateProfile?.({ displayName: inputValue })}
+          onClick={() => onUpdateProfile?.({ displayName, data: { emoji, hue } })}
           data-testid='update-profile-form-continue'
         >
           {t('done label')}

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { type CancellableInvitation } from '@dxos/client-protocol';
 import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
 import { useAgentHostingProviderClient, type Client } from '@dxos/react-client';
 import { type Identity } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
@@ -46,7 +47,7 @@ export const useAgentHandlers = ({
   const handleAgentCreate = useCallback(async (invitation: Invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
     if (invitation.state === Invitation.State.CONNECTING) {
-      console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+      log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
       invariant(identity, 'Identity not found');
       if (agentHostingProviderClient) {
         try {

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

@@ -6,8 +6,9 @@ import React, { cloneElement } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import type { Identity } from '@dxos/react-client/halo';
-import { Avatar, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
+import { Avatar, useId, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
+import { hexToFallback } from '@dxos/util';
 
 import { Action, Actions, StepHeading } from '../../../components';
 import { type JoinPanelMode, type JoinStepProps } from '../JoinPanelProps';
@@ -22,11 +23,10 @@ export const IdentityAdded = (props: IdentityAddedProps) => {
   const disabled = !active;
   const { t } = useTranslation('os');
 
-  const fallbackValue = addedIdentity?.identityKey.toHex();
+  const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? '0';
+  const fallbackValue = hexToFallback(addedIdentityHex);
   const labelId = useId('identityListItem__label');
-  const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
-  const displayName =
-    addedIdentity?.profile?.displayName ?? (addedIdentity && generateName(addedIdentity?.identityKey.toHex()));
+  const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName(addedIdentityHex));
 
   const doneAction = (
     <Action
@@ -43,9 +43,9 @@ 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}>
+        <Avatar.Root status='active' labelId={labelId} hue={addedIdentity?.profile?.data?.hue || fallbackValue.hue}>
           <Avatar.Frame>
-            <Avatar.Fallback href={jdenticon} />
+            <Avatar.Fallback text={addedIdentity?.profile?.data?.emoji || fallbackValue.emoji} />
           </Avatar.Frame>
           <Avatar.Label classNames={mx('text-lg truncate', !addedIdentity?.profile?.displayName && 'font-mono')}>
             {displayName}

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

@@ -5,9 +5,9 @@
 import React, { type ChangeEvent, useState } from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
+import { hexToEmoji } from '@dxos/util';
 
 import { Actions, Action, Emoji, StepHeading } from '../../../components';
-import { toEmoji } from '../../../util';
 import { type JoinStepProps } from '../JoinPanelProps';
 
 const pinLength = 6;
@@ -45,7 +45,7 @@ export const InvitationAuthenticator = ({
   return (
     <>
       <div role='none' className='grow flex flex-col justify-center'>
-        {invitationId && <Emoji text={toEmoji(invitationId)} />}
+        {invitationId && <Emoji text={hexToEmoji(invitationId)} />}
         <Input.Root
           {...(failed && {
             validationValence: 'error',

package/src/panels/Panels.stories.tsx

@@ -16,9 +16,7 @@ const getComponentNames = (module: any): string[] =>
   Object.getOwnPropertyNames(module).filter((name) => !(name === 'default' || name.startsWith('__')));
 
 const getComponents = (module: any): React.FC[] => {
-  const components = getComponentNames(module).map((name) => module[name]);
-  console.log(module);
-  return components;
+  return getComponentNames(module).map((name) => module[name]);
 };
 
 const camelCaseToSpacedName = (camelCase: string) => {

package/src/panels/SpacePanel/steps/SpaceManager.tsx

@@ -5,6 +5,7 @@
 import { Placeholder, UserPlus, UsersThree } from '@phosphor-icons/react';
 import React, { type Dispatch, type SetStateAction, useCallback, useState } from 'react';
 
+import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { useSpaceInvitations } from '@dxos/react-client/echo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
@@ -45,7 +46,7 @@ export const SpaceManager = (props: SpaceManagerProps) => {
   const onInvitationEvent = useCallback((invitation: Invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
     if (invitation.state === Invitation.State.CONNECTING) {
-      console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+      log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
     }
   }, []);
 
@@ -80,6 +81,22 @@ export const SpaceManager = (props: SpaceManagerProps) => {
         }
       }, [space]),
     },
+    // inviteNonPersistent: {
+    //   label: 'Invite one (nonpersistent)',
+    //   description: 'Only one user may join. Invitation does not resume if client is restarted.',
+    //   icon: UserPlus,
+    //   onClick: useCallback(() => {
+    //     const invitation = space.share?.({
+    //       type: Invitation.Type.INTERACTIVE,
+    //       authMethod: Invitation.AuthMethod.SHARED_SECRET,
+    //       persistent: false,
+    //       target,
+    //     });
+    //     if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+    //       invitation.subscribe(onInvitationEvent);
+    //     }
+    //   }, [space]),
+    // },
   };
 
   return <SpaceManagerImpl {...props} invitations={invitations} inviteActions={inviteActions} />;

package/src/steps/InvitationManager.tsx

@@ -9,6 +9,7 @@ import { QR } from 'react-qr-rounded';
 import { type InvitationStatus, Invitation } from '@dxos/react-client/invitations';
 import { useId, useTranslation } from '@dxos/react-ui';
 import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+import { hexToEmoji } from '@dxos/util';
 
 import { type StepProps } from './StepProps';
 import {
@@ -22,7 +23,7 @@ import {
   CopyButton,
   Centered,
 } from '../components';
-import { invitationStatusValue, toEmoji } from '../util';
+import { invitationStatusValue } from '../util';
 
 export type InvitationManagerProps = StepProps &
   Partial<InvitationStatus> & {
@@ -44,13 +45,13 @@ export const InvitationManager = ({
   status,
   type,
   authCode,
-  id,
+  id = '0',
 }: InvitationManagerProps) => {
   const { t } = useTranslation('os');
   const qrLabel = useId('invitation-manager__qr-code');
   const statusValue = type === Invitation.Type.MULTIUSE ? 0 : invitationStatusValue.get(status!) ?? 0;
   const showAuthCode = statusValue === 3;
-  const emoji = toEmoji(id ?? '');
+  const emoji = hexToEmoji(id);
   const activeView = useMemo(() => {
     switch (true) {
       case statusValue === 5:

package/src/stories/Invitations.e2e-stories.tsx

@@ -7,6 +7,7 @@ import '@dxosTheme';
 import { Laptop, Planet, Plus, PlusCircle, SignIn, QrCode, WifiHigh, WifiSlash } from '@phosphor-icons/react';
 import React, { useMemo, useState } from 'react';
 
+import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type Space, type SpaceMember, SpaceProxy, useSpaces } from '@dxos/react-client/echo';
@@ -42,7 +43,7 @@ const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPane
         invitation.subscribe((invitation) => {
           const invitationCode = InvitationEncoder.encode(invitation);
           if (invitation.state === Invitation.State.CONNECTING) {
-            console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+            log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
           }
         });
       };
@@ -126,7 +127,7 @@ const Invitations = (args: { id: number; count: number }) => {
       invitation.subscribe((invitation) => {
         const invitationCode = InvitationEncoder.encode(invitation);
         if (invitation.state === Invitation.State.CONNECTING) {
-          console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+          log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
         }
       });
     };