@dxos/react-ui 0.1.25-next.3c6b542 → 0.1.26

package/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx

@@ -7,8 +7,6 @@ import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
 
 import { mx } from '@dxos/react-components';
 
-import { defaultDialogContent, defaultOverlay } from '../../styles';
-
 export interface PanelAlertDialogSlots {
   root: ComponentPropsWithoutRef<typeof AlertDialog.Root>;
   overlay: ComponentPropsWithoutRef<typeof AlertDialog.Overlay>;
@@ -25,12 +23,18 @@ export const PanelAlertDialog = ({ titleId, slots = {}, children }: PanelAlertDi
   return (
     <AlertDialog.Root defaultOpen {...slots.root}>
       {slots.trigger && <AlertDialog.Trigger {...slots.trigger} />}
-      <AlertDialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
+      <AlertDialog.Overlay
+        {...slots.overlay}
+        className={mx(
+          'fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8',
+          slots.overlay?.className
+        )}
+      >
         <AlertDialog.Content
           onEscapeKeyDown={(event) => event.preventDefault()}
           {...slots.content}
           aria-labelledby={titleId}
-          className={mx(defaultDialogContent, slots.content?.className)}
+          className={mx('is-full min-is-[260px] max-is-[320px] shadow-md backdrop-blur-md', slots.content?.className)}
         >
           {children}
         </AlertDialog.Content>

package/src/layouts/PanelSidebar/PanelSidebar.tsx

@@ -82,7 +82,7 @@ export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<Pane
           onCloseAutoFocus={(event) => isLg && event.preventDefault()}
           {...slots?.content}
           className={mx(
-            'fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto',
+            'fixed block-start-0 block-end-0 is-sidebar z-50 overscroll-contain overflow-x-hidden overflow-y-auto',
             'transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
             transitionShow ? 'inline-start-0' : '-inline-start-sidebar',
             slots?.content?.className

package/src/layouts/index.ts

@@ -5,4 +5,3 @@
 export * from './PanelPopover';
 export * from './PanelSidebar';
 export * from './PanelAlertDialog';
-export * from './PanelDialog';

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -9,41 +9,25 @@ import { useSpace } from '@dxos/react-client';
 import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
 
 import { subduedSurface } from '../../styles';
-import { JoinPanelMode } from './JoinPanelProps';
 
 export interface JoinSpaceHeadingProps {
-  mode?: JoinPanelMode;
   titleId: string;
   invitation?: AuthenticatingInvitationObservable;
   onExit?: () => void;
   exitActionParent?: Parameters<typeof cloneElement>[0];
-  preventExit?: boolean;
 }
 
 export const JoinHeading = forwardRef(
-  (
-    { mode, titleId, invitation, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
+  ({ titleId, invitation, onExit, exitActionParent }: JoinSpaceHeadingProps, ref: ForwardedRef<HTMLDivElement>) => {
     const { t } = useTranslation('os');
 
     const space = useSpace(invitation?.invitation?.spaceKey);
-    const name = mode === 'halo-only' ? '(Unknown identity)' : space?.properties.name ?? '(Space name not available)';
-    const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
+    const spaceTitle = space?.properties.name ?? '(Space not available)';
 
-    const invitationKey =
-      mode === 'halo-only'
-        ? invitation?.invitation?.identityKey?.toHex()
-        : invitation?.invitation?.identityKey?.toHex();
+    const nameId = useId('spaceDisplayName');
 
     const exitButton = (
-      <Button
-        compact
-        variant='ghost'
-        {...(onExit && { onClick: onExit })}
-        className='grow-0 shrink-0'
-        data-testid='join-exit'
-      >
+      <Button compact variant='ghost' {...(onExit && { onClick: onExit })} className='grow-0 shrink-0'>
         <ProhibitInset className={getSize(5)} />
         <span className='sr-only'>{t('exit label')}</span>
       </Button>
@@ -52,32 +36,20 @@ export const JoinHeading = forwardRef(
     return (
       <div role='none' className={mx(subduedSurface, 'p-2 rounded-bs-md')} ref={ref}>
         <div role='group' className='flex items-center gap-2'>
-          {invitationKey ? (
-            <Avatar fallbackValue={invitationKey} labelId={nameId} />
-          ) : (
-            <span role='none' className={mx(getSize(10), 'bg-neutral-300 dark:bg-neutral-700 rounded-full')} />
-          )}
+          <Avatar fallbackValue={invitation?.invitation?.spaceKey?.toHex() ?? ''} labelId={nameId} />
           <Heading level={1} className='font-body font-normal text-base grow' id={titleId}>
-            {invitation ? (
-              <Trans
-                {...{
-                  defaults: t('joining heading'),
-                  components: {
-                    small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
-                    large: <span className='block leading-none' id={nameId} />
-                  },
-                  values: { name }
-                }}
-              />
-            ) : (
-              <span className='block leading-none font-system-medium text-sm'>
-                {mode === 'halo-only' ? t('halo heading') : t('join space heading')}
-              </span>
-            )}
+            <Trans
+              {...{
+                defaults: t('join space heading'),
+                components: {
+                  small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
+                  large: <span className='block leading-none' id={nameId} />
+                },
+                values: { spaceTitle }
+              }}
+            />
           </Heading>
-          {!preventExit &&
-            mode !== 'halo-only' &&
-            (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
+          {exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton}
         </div>
       </div>
     );

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -1,7 +1,7 @@
 //
 // Copyright 2023 DXOS.org
 //
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { useEffect, useReducer } from 'react';
 
 import { InvitationEncoder } from '@dxos/client';
 import { log } from '@dxos/log';
@@ -22,20 +22,18 @@ import {
 } from './view-states';
 
 export const JoinPanel = ({
-  mode,
   initialInvitationCode,
   titleId: propsTitleId,
   exitActionParent,
   onExit,
   doneActionParent,
-  onDone,
-  preventExit
+  onDone
 }: JoinPanelProps) => {
   const client = useClient();
   const internalTitleId = useId('joinPanel__title');
   const titleId = propsTitleId ?? internalTitleId;
   const identity = useIdentity();
-  const [prevIdentity, setPrevIdentity] = useState(identity);
+
   const availableIdentities = identity ? [identity] : [];
 
   const reducer = (state: JoinState, action: JoinAction) => {
@@ -52,7 +50,7 @@ export const JoinPanel = ({
         if (action.method === 'accept device invitation') {
           nextState.activeView = 'halo invitation acceptor';
           if (state.unredeemedHaloInvitationCode) {
-            nextState.haloInvitation = client.halo.acceptInvitation(
+            nextState.haloInvitation = client.echo.acceptInvitation(
               InvitationEncoder.decode(state.unredeemedHaloInvitationCode)
             );
             nextState.unredeemedHaloInvitationCode = undefined;
@@ -122,14 +120,13 @@ export const JoinPanel = ({
         nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation input';
         break;
     }
-    log('[join panel reducer]', { action, nextState });
+    log.debug('[join panel reducer]', { action, nextState });
     return nextState;
   };
 
-  const unredeemedHaloInvitationCode = mode === 'halo-only' ? initialInvitationCode : undefined;
   const [joinState, dispatch] = useReducer(reducer, {
-    unredeemedHaloInvitationCode,
-    unredeemedSpaceInvitationCode: mode === 'halo-only' ? undefined : initialInvitationCode,
+    unredeemedHaloInvitationCode: undefined,
+    unredeemedSpaceInvitationCode: initialInvitationCode,
     spaceInvitation: undefined,
     haloInvitation: undefined,
     activeView: availableIdentities.length > 0 ? 'identity selector' : 'addition method selector',
@@ -139,17 +136,6 @@ export const JoinPanel = ({
     haloViewState: 'invitation input'
   });
 
-  if (identity !== prevIdentity) {
-    setPrevIdentity(identity);
-    identity && !prevIdentity && dispatch({ type: 'added identity', identity });
-  }
-
-  useEffect(() => {
-    if (unredeemedHaloInvitationCode) {
-      dispatch({ type: 'select addition method', method: 'accept device invitation' });
-    }
-  }, [unredeemedHaloInvitationCode]);
-
   useEffect(() => {
     // TODO (thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
     const attrValue =
@@ -160,7 +146,7 @@ export const JoinPanel = ({
         : joinState.activeView === 'halo invitation acceptor'
         ? `${joinState.activeView}; ${joinState.haloViewState}`
         : joinState.activeView;
-    log('[autofocus value]', { attrValue });
+    log.debug('[autofocus value]', { attrValue });
     const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus="${attrValue}"]`);
     if ($nextAutofocus) {
       $nextAutofocus.focus();
@@ -191,9 +177,7 @@ export const JoinPanel = ({
 
   return (
     <>
-      <JoinHeading
-        {...{ mode, titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent, preventExit }}
-      />
+      <JoinHeading {...{ titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent }} />
       <div role='none' className='is-full overflow-hidden'>
         <div role='none' className='flex is-[1300%]' aria-live='polite'>
           <IdentitySelector
@@ -256,19 +240,14 @@ export const JoinPanel = ({
               active:
                 joinState.activeView === 'halo invitation acceptor' &&
                 joinState.haloViewState === 'invitation accepted',
-              invitationType: 'halo',
-              doneActionParent,
-              onDone
+              invitationType: 'halo'
             }}
           />
           <IdentityAdded
             {...{
-              mode,
               dispatch,
               addedIdentity: joinState.selectedIdentity,
-              active: joinState.activeView === 'identity added',
-              doneActionParent,
-              onDone
+              active: joinState.activeView === 'identity added'
             }}
           />
           <InvitationInput

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -4,18 +4,22 @@
 
 import { cloneElement, Dispatch } from 'react';
 
-import type { AuthenticatingInvitationObservable, Profile } from '@dxos/client';
+import type {
+  AuthenticatingInvitationObservable,
+  Profile as NaturalProfile,
+  Space as NaturalSpace
+} from '@dxos/client';
 import { InvitationResult } from '@dxos/react-client';
 
-export type JoinPanelMode = 'default' | 'halo-only';
+export type Space = Pick<NaturalSpace, 'properties'>;
+
+export type Profile = Pick<NaturalProfile, 'displayName' | 'identityKey'>;
 
 export interface JoinPanelProps {
-  mode?: JoinPanelMode;
   initialInvitationCode?: string;
   titleId?: string;
   exitActionParent?: Parameters<typeof cloneElement>[0];
   onExit?: () => void;
-  preventExit?: boolean;
   doneActionParent?: Parameters<typeof cloneElement>[0];
   onDone?: (result: InvitationResult | null) => void;
   parseInvitationCodeInput?: (invitationCodeInput: string) => string;

package/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx

@@ -5,9 +5,9 @@
 import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from 'phosphor-react';
 import React from 'react';
 
-import type { Profile } from '@dxos/client';
 import { Button, CompoundButton, getSize, mx, useTranslation } from '@dxos/react-components';
 
+import { Profile } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface AdditionMethodSelectorProps extends ViewStateProps {
@@ -36,7 +36,6 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           before={<Plus className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'create identity' })}
           data-autofocus='addition method selector'
-          data-testid='create-identity'
         >
           {t('create identity label')}
         </CompoundButton>
@@ -45,7 +44,6 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           description={t('join identity description')}
           before={<QrCode className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'accept device invitation' })}
-          data-testid='join-identity'
         >
           {t('join identity label')}
         </CompoundButton>
@@ -54,7 +52,6 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           description={t('recover identity description')}
           before={<Textbox className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'recover identity' })}
-          data-testid='recover-identity'
         >
           {t('recover identity label')}
         </CompoundButton>
@@ -62,7 +59,6 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
       <Button
         disabled={disabled || availableIdentities.length < 1}
         onClick={() => dispatch({ type: 'deselect identity' })}
-        data-testid='deselect-identity'
       >
         <CaretLeft className={getSize(4)} weight='bold' />
         <span className='grow'>{t('deselect identity label')}</span>

package/src/panels/JoinPanel/view-states/IdentityAdded.tsx

@@ -2,54 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight, Check } from 'phosphor-react';
-import React, { cloneElement } from 'react';
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React from 'react';
 
 import type { Profile } from '@dxos/client';
-import { InvitationResult } from '@dxos/react-client';
 import { Avatar, Button, getSize, mx, useTranslation } from '@dxos/react-components';
 
-import { JoinPanelMode } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
-export interface IdentityAddedProps extends ViewStateProps, DoneProps {
-  mode?: JoinPanelMode;
+export interface IdentityAddedProps extends ViewStateProps {
   addedIdentity?: Profile;
 }
 
-export interface DoneProps extends ViewStateProps {
-  doneActionParent?: Parameters<typeof cloneElement>[0];
-  onDone?: (result: InvitationResult | null) => void;
-}
-
-const Done = ({ onDone, doneActionParent, active }: DoneProps) => {
-  const disabled = !active;
-  const { t } = useTranslation('os');
-
-  const doneButton = (
-    <Button
-      {...(onDone && { onClick: () => onDone(null) })}
-      disabled={disabled}
-      className='grow flex items-center gap-2 pli-2'
-      data-autofocus='identity added'
-      data-testid='identity-added-done'
-    >
-      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-      <span className='grow'>{t('done label')}</span>
-      <Check weight='bold' className={getSize(4)} />
-    </Button>
-  );
-
-  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
-};
-
-export const IdentityAdded = ({
-  mode,
-  addedIdentity,
-  onDone,
-  doneActionParent,
-  ...viewStateProps
-}: IdentityAddedProps) => {
+export const IdentityAdded = ({ addedIdentity, ...viewStateProps }: IdentityAddedProps) => {
   const disabled = !viewStateProps.active;
   const { dispatch } = viewStateProps;
   const { t } = useTranslation('os');
@@ -70,30 +35,26 @@ export const IdentityAdded = ({
           status='active'
         />
       </div>
-      {mode === 'halo-only' ? (
-        <Done onDone={onDone} doneActionParent={doneActionParent} {...viewStateProps} />
-      ) : (
-        <div className='flex gap-2'>
-          <Button
-            disabled={disabled || !addedIdentity}
-            className='grow flex items-center gap-2 pli-2 order-2'
-            onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
-            data-autofocus='identity added'
-          >
-            <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-            <span className='grow'>{t('continue label')}</span>
-            <CaretRight weight='bold' className={getSize(4)} />
-          </Button>
-          <Button
-            disabled={disabled}
-            onClick={() => dispatch({ type: 'deselect identity' })}
-            className='flex items-center gap-2 pis-2 pie-4'
-          >
-            <CaretLeft weight='bold' className={getSize(4)} />
-            <span>{t('deselect identity label')}</span>
-          </Button>
-        </div>
-      )}
+      <div className='flex gap-2'>
+        <Button
+          disabled={disabled || !addedIdentity}
+          className='grow flex items-center gap-2 pli-2 order-2'
+          onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
+          data-autofocus='identity added'
+        >
+          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+          <span className='grow'>{t('continue label')}</span>
+          <CaretRight weight='bold' className={getSize(4)} />
+        </Button>
+        <Button
+          disabled={disabled}
+          onClick={() => dispatch({ type: 'deselect identity' })}
+          className='flex items-center gap-2 pis-2 pie-4'
+        >
+          <CaretLeft weight='bold' className={getSize(4)} />
+          <span>{t('deselect identity label')}</span>
+        </Button>
+      </div>
     </ViewState>
   );
 };

package/src/panels/JoinPanel/view-states/IdentityInput.tsx

@@ -50,16 +50,10 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
           } as ComponentPropsWithoutRef<'input'>
         }}
         {...(validationMessage.length && { validationValence: 'error', validationMessage })}
-        data-testid='identity-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>
-        <Button
-          disabled={disabled}
-          className='grow flex items-center gap-2 pli-2 order-2'
-          onClick={handleNext}
-          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-continue`}
-        >
+        <Button disabled={disabled} className='grow flex items-center gap-2 pli-2 order-2' onClick={handleNext}>
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('continue label')}</span>
           <CaretRight weight='bold' className={getSize(4)} />
@@ -68,7 +62,6 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
           disabled={disabled}
           onClick={() => dispatch({ type: 'add identity' })}
           className='flex items-center gap-2 pis-2 pie-4'
-          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-back`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('back label')}</span>

package/src/panels/JoinPanel/view-states/IdentitySelector.tsx

@@ -6,9 +6,9 @@ import * as RadioGroup from '@radix-ui/react-radio-group';
 import { CaretLeft, CaretRight, UserPlus } from 'phosphor-react';
 import React, { useCallback, useState } from 'react';
 
-import type { Profile } from '@dxos/client';
 import { Avatar, Button, themeVariantFocus, getSize, mx, useTranslation } from '@dxos/react-components';
 
+import { Profile } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface IdentitySelectorProps extends ViewStateProps {
@@ -57,7 +57,6 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
                   'radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900',
                   themeVariantFocus('os')
                 )}
-                data-testid='identity-selector-item'
               >
                 <RadioGroup.Indicator className='absolute inset-0 flex items-center justify-center leading-0'>
                   <div className='w-1.5 h-1.5 rounded-full bg-white' />
@@ -76,7 +75,6 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
         compact
         onClick={() => dispatch({ type: 'add identity' })}
         className='flex items-center gap-2 pli-2'
-        data-testid='add-identity'
       >
         <span>{t('add identity label')}</span>
         <UserPlus weight='bold' className={getSize(3.5)} />
@@ -90,7 +88,6 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
             identity: activeIdentity
           })
         }
-        data-testid='select-identity'
       >
         <CaretLeft weight='bold' className={mx(getSize(4), 'invisible')} />
         <span className='grow'>{t('continue label')}</span>

package/src/panels/JoinPanel/view-states/InvitationAccepted.tsx

@@ -33,7 +33,6 @@ const PureInvitationAcceptedContent = ({
       disabled={disabled}
       className='grow flex items-center gap-2 pli-2'
       data-autofocus={`${invitationType} invitation acceptor; invitation accepted`}
-      data-testid={`${invitationType}-invitation-accepted-done`}
     >
       <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
       <span className='grow'>{t('done label')}</span>

package/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx

@@ -37,7 +37,7 @@ const PureInvitationAuthenticatorContent = ({
   return (
     <>
       <Input
-        label={t('auth code input label')}
+        label={t('pin input label')}
         size='pin'
         length={pinLength}
         onChange={onChange}
@@ -57,7 +57,6 @@ const PureInvitationAuthenticatorContent = ({
           validationValence: 'error',
           validationMessage: t('failed to authenticate message')
         })}
-        data-testid='auth-code-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>
@@ -66,7 +65,6 @@ const PureInvitationAuthenticatorContent = ({
           className='grow flex items-center gap-2 pli-2 order-2'
           onClick={onAuthenticate}
           data-autofocus-pinlength={invitationType}
-          data-testid={`${invitationType}-invitation-authenticator-next`}
         >
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('next label')}</span>
@@ -76,7 +74,6 @@ const PureInvitationAuthenticatorContent = ({
           disabled={disabled}
           className='flex items-center gap-2 pis-2 pie-4'
           onClick={() => dispatch({ type: 'cancel invitation', from: invitationType })}
-          data-testid={`${invitationType}-invitation-authenticator-cancel`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('cancel label')}</span>

package/src/panels/JoinPanel/view-states/InvitationInput.tsx

@@ -46,16 +46,10 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
             onKeyUp: ({ key }) => key === 'Enter' && handleNext()
           } as ComponentPropsWithoutRef<'input'>
         }}
-        data-testid='invitation-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>
-        <Button
-          disabled={disabled}
-          className='grow flex items-center gap-2 pli-2 order-2'
-          onClick={handleNext}
-          data-testid={`${invitationType}-invitation-input-continue`}
-        >
+        <Button disabled={disabled} className='grow flex items-center gap-2 pli-2 order-2' onClick={handleNext}>
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('continue label')}</span>
           <CaretRight weight='bold' className={getSize(4)} />
@@ -64,7 +58,6 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
           disabled={disabled}
           onClick={() => dispatch({ type: 'add identity' })}
           className='flex items-center gap-2 pis-2 pie-4'
-          data-testid={`${invitationType}-invitation-input-back`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('back label')}</span>

package/src/panels/JoinPanel/view-states/InvitationRescuer.tsx

@@ -35,7 +35,7 @@ const InvitationActions = ({
         <>
           <div role='none' className='grow' />
           <div className='flex gap-2'>
-            <Button disabled className='grow flex items-center gap-2 pli-2 order-2' data-testid='next'>
+            <Button disabled className='grow flex items-center gap-2 pli-2 order-2'>
               <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
               <span className='grow'>{t('next label')}</span>
               <CaretRight weight='bold' className={getSize(4)} />
@@ -45,7 +45,6 @@ const InvitationActions = ({
               className='flex items-center gap-2 pis-2 pie-4'
               onClick={cancel}
               data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
-              data-testid='invitation-rescuer-cancel'
             >
               <CaretLeft weight='bold' className={getSize(4)} />
               <span>{t('cancel label')}</span>
@@ -63,7 +62,6 @@ const InvitationActions = ({
           className='grow flex items-center gap-2 pli-2'
           onClick={() => dispatch({ type: 'reset invitation', from: invitationType })}
           data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
-          data-testid='invitation-rescuer-reset'
         >
           <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
           <span className='grow'>{t('reset label')}</span>
@@ -84,7 +82,6 @@ export const InvitationRescuer = ({ invitationType, ...viewStateProps }: Invitat
           disabled={disabled}
           className='grow flex items-center gap-2 pli-2'
           data-autofocus='space invitation acceptor; invitation rescuer'
-          data-testid='invitation-rescuer-connect'
         >
           <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
           <span className='grow'>{t('connect label')}</span>

package/src/panels/index.ts

@@ -2,7 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './DevicesPanel';
 export * from './IdentityPanel';
 export * from './JoinPanel';
-export * from './SpacePanel';

package/src/styles/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './dialogStyles';
 export * from './panelStyles';
 export * from './invitationStatusStyles';

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

@@ -8,9 +8,7 @@ export const os = {
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy',
   'open share panel label': 'Share',
-  'joining heading': '<small>Joining</small><large>{{name}}</large>',
-  'join space heading': 'Join a space',
-  'halo heading': 'Initialize device identity',
+  'join space heading': '<small>Joining</small><large>{{spaceTitle}}</large>',
   'exit label': 'Exit',
   'identity selector title': 'Join as',
   'identity radio group title': 'Select an identity you’ve associated with this device already',
@@ -18,7 +16,6 @@ export const os = {
   'continue label': 'Continue',
   'back label': 'Back',
   'next label': 'Next',
-  'close label': 'Close',
   'auth choices label': 'Choose an identity',
   'create identity label': 'Create an identity',
   'create identity description': 'Create a new identity.',
@@ -48,14 +45,6 @@ export const os = {
   'cancel label': 'Cancel',
   'done label': 'Done',
   'reset label': 'Start over',
-  'auth code input label': 'Auth code provided by the invitation sender',
-  'invitation input label': 'Paste an invitation code or URL',
-  'create space invitation label': 'Invite',
-  'qr label': 'Scan to accept invitation',
-  'empty invitations message': 'No pending invitations',
-  'show all spaces label': 'All spaces',
-  'all spaces label': 'All spaces',
-  'create space label': 'Create a new space',
-  'join space label': 'Join a space',
-  'show current space label': 'Current space'
+  'pin input label': 'The PIN provided by the invitation sender',
+  'invitation input label': 'Paste an invitation code or URL'
 };