Full Code of tetherto/pearpass-app-desktop for AI

Repository: tetherto/pearpass-app-desktop
Branch: main
Commit: d3974b085799
Files: 917
Total size: 4.1 MB

Directory structure:
gitextract_j12gn_f4/

├── .claude/
│   └── skills/
│       └── use-ui-kit/
│           └── SKILL.md
├── .cursor/
│   └── rules/
│       └── use-ui-kit.mdc
├── .github/
│   ├── actions/
│   │   └── authorize-pr/
│   │       └── action.yml
│   ├── pull_request_template.md
│   └── workflows/
│       ├── ci-pr.yml
│       ├── ci-push.yml
│       └── ci-reusable.yml
├── .gitignore
├── .husky/
│   └── pre-commit
├── .npmrc
├── .nvmrc
├── AGENTS.md
├── CLAUDE.md
├── CONTRIBUTING.md
├── LICENSE.md
├── NOTICE.md
├── README.md
├── SECURITY.md
├── app.electron.tsx
├── appling/
│   ├── README.md
│   ├── app.cjs
│   ├── app.dev.cjs
│   ├── app.staging.cjs
│   ├── entitlements.plist
│   ├── lib/
│   │   ├── install.cjs
│   │   ├── preflight.cjs
│   │   ├── progress.cjs
│   │   ├── utils.cjs
│   │   ├── view.html.cjs
│   │   └── worker.cjs
│   └── package.json
├── assets/
│   ├── animations/
│   │   ├── category.riv
│   │   ├── form_credit_card.riv
│   │   ├── pearpass_password.riv
│   │   └── sync_without_the_cloud_animation.riv
│   ├── fonts/
│   │   └── humbleNostalgia/
│   │       └── HumbleNostalgia.otf
│   ├── rive/
│   │   └── rive_webgl2.wasm
│   └── video/
│       ├── onboarding_lock_loop.webm
│       └── onboarding_lock_start.webm
├── babel.config.cjs
├── babel.strict-dom.cjs
├── build-assets/
│   └── win/
│       └── AppxManifest.xml
├── docs/
│   └── Electron-Packaging-And-Runtime.md
├── e2e/
│   ├── .gitignore
│   ├── components/
│   │   ├── CreateOrEditPage.js
│   │   ├── DetailsPage.js
│   │   ├── LoginPage.js
│   │   ├── MainPage.js
│   │   ├── SettingsPage.js
│   │   ├── SideMenuPage.js
│   │   ├── Utilities.js
│   │   └── index.js
│   ├── fixtures/
│   │   ├── app.runner.js
│   │   └── test-data.js
│   ├── package.json
│   ├── playwright.config.js
│   ├── scripts/
│   │   └── explore.js
│   └── specs/
│       ├── 01-Login/
│       │   ├── creatingLoginItem.test.js
│       │   ├── creatingLoginItemPassword.test.js
│       │   └── editingDeletingLoginItem.test.js
│       ├── 02-CreditCard/
│       │   ├── creatingCreditCardItem.test.js
│       │   └── editingDeleteCreditCardItem.test.js
│       ├── 03-WiFi/
│       │   ├── creatingWiFiItem.test.js
│       │   └── editingDeletingWiFiItem.test.js
│       ├── 04-Identity/
│       │   ├── creatingIdentityItem.test.js
│       │   └── editingDeletingIdentityItem.test.js
│       ├── 05-PassPhrase/
│       │   ├── creatingPassPhraseItem.test.js
│       │   └── editingDeletingPassPhraseItem.test.js
│       ├── 06-Note/
│       │   ├── creatingNoteItem.test.js
│       │   └── editingDeleteNoteItem.test.js
│       ├── 07-CustomField/
│       │   ├── creatingCustomFieldItem.test.js
│       │   └── editingDeleteCustomFieldItem.test.js
│       ├── 08-MultipleSelection/
│       │   └── multipleSelection.test.js
│       ├── 09-SortingAndFiltering/
│       │   └── sorting.test.js
│       └── 10-Settings/
│           └── settings.test.js
├── electron/
│   ├── clipboardCleanup.cjs
│   ├── clipboardCleanup.test.js
│   ├── clipboardCleanup.windows.ps1
│   ├── clipboardCleanupHelper.cjs
│   ├── clipboardCleanupHelper.test.js
│   ├── flatpak-paths.cjs
│   ├── flatpak-paths.test.js
│   ├── linuxWaylandClipboard.cjs
│   ├── linuxWaylandClipboardFallback.cjs
│   ├── linuxX11Clipboard.cjs
│   ├── linuxX11ClipboardFallback.cjs
│   ├── main.cjs
│   ├── preload.cjs
│   ├── preload.test.js
│   └── runtime-config.cjs
├── electron-builder.linux.json
├── electron-builder.mac.json
├── eslint.config.js
├── flatpak/
│   ├── appimage/
│   │   └── .gitkeep
│   ├── com.pears.pass.desktop
│   ├── com.pears.pass.metainfo.xml
│   └── com.pears.pass.yaml
├── forge.config.cjs
├── index.html
├── index.js
├── jest.config.js
├── lingui.config.js
├── package.json
├── resources/
│   └── bin/
│       ├── wl-copy-arm64
│       ├── wl-copy-x86_64
│       ├── wl-paste-arm64
│       ├── wl-paste-x86_64
│       ├── xsel-arm64
│       └── xsel-x86_64
├── scripts/
│   ├── afterPack.cjs
│   ├── apply-flavor.mjs
│   ├── build-flatpak.sh
│   ├── build-snap.sh
│   ├── build.worklet.mjs
│   ├── bundle-bridge.mjs
│   ├── bundle-renderer.mjs
│   ├── create-linux-tarball.sh
│   ├── notarize.cjs
│   └── patch-electron-dock-name.mjs
├── snap/
│   └── snapcraft.yaml
├── src/
│   ├── app/
│   │   ├── App/
│   │   │   ├── appConfig.js
│   │   │   ├── hooks/
│   │   │   │   ├── useInactivity.js
│   │   │   │   ├── useInactivity.test.js
│   │   │   │   ├── useOnExtension.test.js
│   │   │   │   ├── useOnExtensionExit.js
│   │   │   │   ├── useOnExtensionLockOut.js
│   │   │   │   ├── useOnExtensionLockOut.test.js
│   │   │   │   ├── useRedirect.js
│   │   │   │   └── useRedirect.test.js
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   └── Routes/
│   │       └── index.js
│   ├── components/
│   │   ├── AlertBox/
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── AppHeaderV2/
│   │   │   ├── AppHeaderV2.styles.ts
│   │   │   ├── AppHeaderV2.test.js
│   │   │   ├── AppHeaderV2.tsx
│   │   │   └── index.ts
│   │   ├── BackgroundWithGradient.tsx
│   │   ├── BadgeTextItem/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── BannerBox/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── ButtonPlusCreateNew/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── CardSingleSetting/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── CopyButton/
│   │   │   └── index.tsx
│   │   ├── CreateCustomField/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── CreateNewCategoryPopupContent/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── DropdownSwapVault/
│   │   │   ├── index.test.js
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── EditFolderPopupContent/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── EmptyCollectionView/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── FileDropArea/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── FileUploadContent/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── FolderDropdown/
│   │   │   ├── FolderDropdownV2.tsx
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── FormGroup/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── FormModalHeaderWrapper/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── FormWrapper/
│   │   │   ├── index.js
│   │   │   └── index.test.js
│   │   ├── ImportDataOption/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── InitialPageWrapper/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── InputFieldNote/
│   │   │   ├── index.js
│   │   │   └── index.test.js
│   │   ├── InputPearpassPassword/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── InputSearch/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── ListItem/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── LoadingOverlay/
│   │   │   ├── index.js
│   │   │   └── index.test.js
│   │   ├── MenuDropdown/
│   │   │   ├── MenuDropdownItem/
│   │   │   │   ├── index.js
│   │   │   │   └── index.test.js
│   │   │   ├── MenuDropdownLabel/
│   │   │   │   ├── index.js
│   │   │   │   └── index.test.js
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── NoticeContainer/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── OnboardingShell/
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── OtpCodeField/
│   │   │   ├── index.test.js
│   │   │   ├── index.ts
│   │   │   └── utils.ts
│   │   ├── OtpCodeFieldV2/
│   │   │   ├── index.test.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── Overlay/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── PasswordFieldStrengthIndicator/
│   │   │   ├── index.test.tsx
│   │   │   └── index.tsx
│   │   ├── PopupMenu/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   ├── styles.js
│   │   │   └── utils/
│   │   │       ├── getHorizontal.js
│   │   │       ├── getHorizontal.test.js
│   │   │       ├── getVertical.js
│   │   │       └── getVertical.test.js
│   │   ├── RadioSelect/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── Record/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── RecordActionsPopupContent/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── RecordAvatar/
│   │   │   ├── index.test.js
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── RecordItemIcon/
│   │   │   ├── RecordItemIcon.styles.ts
│   │   │   ├── RecordItemIcon.tsx
│   │   │   └── index.ts
│   │   ├── RecordSortActionsPopupContent/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── RecordTypeMenu/
│   │   │   ├── index.js
│   │   │   └── index.test.js
│   │   ├── Select/
│   │   │   ├── SelectItem/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── SelectLabel/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── SidebarCategory/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── SidebarFolder/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── SidebarSearch/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── SwitchWithLabel/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   ├── TimerBar/
│   │   │   ├── index.test.js
│   │   │   ├── index.ts
│   │   │   └── styles.ts
│   │   ├── TimerCircle/
│   │   │   ├── index.test.js
│   │   │   ├── index.ts
│   │   │   └── styles.ts
│   │   ├── TitleBar/
│   │   │   └── index.js
│   │   ├── Toasts/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.js
│   │   └── WebsiteButton/
│   │       └── index.tsx
│   ├── constants/
│   │   ├── appConstants.js
│   │   ├── feedback.js
│   │   ├── formFields.js
│   │   ├── layout.ts
│   │   ├── localStorage.js
│   │   ├── meta.js
│   │   ├── navigation.js
│   │   ├── pairing.js
│   │   ├── password.ts
│   │   ├── pearpassLinks.js
│   │   ├── recordActions.js
│   │   ├── recordColorByType.js
│   │   ├── recordIconByType.js
│   │   ├── securityErrors.js
│   │   ├── services.js
│   │   ├── sortOptions.ts
│   │   ├── timeConstants.js
│   │   └── transitions.js
│   ├── containers/
│   │   ├── AppHeaderContainer/
│   │   │   ├── AppHeaderContainer.test.js
│   │   │   ├── AppHeaderContainer.tsx
│   │   │   └── index.ts
│   │   ├── AttachmentField/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── AuthenticationCard/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── BaseInitialPage/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── CustomFields/
│   │   │   └── index.tsx
│   │   ├── EmptyCollectionViewV2/
│   │   │   ├── EmptyCollectionViewV2.styles.ts
│   │   │   ├── EmptyCollectionViewV2.tsx
│   │   │   └── index.ts
│   │   ├── EmptyResultsViewV2/
│   │   │   ├── EmptyResultsViewV2.styles.ts
│   │   │   ├── EmptyResultsViewV2.tsx
│   │   │   └── index.ts
│   │   ├── ImagesField/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── LayoutWithSidebar/
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── MainViewHeader/
│   │   │   ├── MainViewHeader.styles.ts
│   │   │   ├── MainViewHeader.test.tsx
│   │   │   └── MainViewHeader.tsx
│   │   ├── Modal/
│   │   │   ├── AddDeviceModalContent/
│   │   │   │   ├── ScanQRExpireTimer.tsx
│   │   │   │   ├── index.ts
│   │   │   │   └── styles.ts
│   │   │   ├── AddDeviceModalContentV2/
│   │   │   │   ├── AddDeviceModalContentV2.styles.ts
│   │   │   │   └── AddDeviceModalContentV2.tsx
│   │   │   ├── AuthenticationModalContentV2/
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── BlindPeersModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── BrowserExtensionDialogV2/
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── ConfirmationModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── CreateFileEncryptionPassword/
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── CreateFolderModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── CreateFolderModalContentV2/
│   │   │   │   ├── CreateFolderModalContentV2.styles.ts
│   │   │   │   └── CreateFolderModalContentV2.tsx
│   │   │   ├── CreateOrEditCategoryWrapper/
│   │   │   │   ├── CreateOrEditAuthenticatorModalContent/
│   │   │   │   │   ├── CreateOrEditAuthenticatorModalContent.styles.ts
│   │   │   │   │   └── CreateOrEditAuthenticatorModalContent.tsx
│   │   │   │   ├── CreateOrEditCreditCardModalContent/
│   │   │   │   │   └── index.js
│   │   │   │   ├── CreateOrEditCreditCardModalContentV2/
│   │   │   │   │   ├── CreateOrEditCreditCardModalContentV2.styles.ts
│   │   │   │   │   └── CreateOrEditCreditCardModalContentV2.tsx
│   │   │   │   ├── CreateOrEditCustomModalContent/
│   │   │   │   │   └── index.js
│   │   │   │   ├── CreateOrEditCustomModalContentV2/
│   │   │   │   │   ├── CreateOrEditCustomModalContentV2.styles.ts
│   │   │   │   │   └── CreateOrEditCustomModalContentV2.tsx
│   │   │   │   ├── CreateOrEditIdentityModalContent/
│   │   │   │   │   └── index.js
│   │   │   │   ├── CreateOrEditIdentityModalContentV2/
│   │   │   │   │   ├── CreateOrEditIdentityModalContentV2.styles.ts
│   │   │   │   │   └── CreateOrEditIdentityModalContentV2.tsx
│   │   │   │   ├── CreateOrEditLoginModalContent/
│   │   │   │   │   └── index.js
│   │   │   │   ├── CreateOrEditLoginModalContentV2/
│   │   │   │   │   ├── CreateOrEditLoginModalContentV2.styles.ts
│   │   │   │   │   └── CreateOrEditLoginModalContentV2.tsx
│   │   │   │   ├── CreateOrEditNoteModalContent/
│   │   │   │   │   └── index.js
│   │   │   │   ├── CreateOrEditNoteModalContentV2/
│   │   │   │   │   ├── CreateOrEditNoteModalContentV2.styles.ts
│   │   │   │   │   └── CreateOrEditNoteModalContentV2.tsx
│   │   │   │   ├── CreateOrEditPassPhraseModalContent/
│   │   │   │   │   └── index.js
│   │   │   │   ├── CreateOrEditPassPhraseModalContentV2/
│   │   │   │   │   ├── CreateOrEditPassPhraseModalContentV2.styles.ts
│   │   │   │   │   └── CreateOrEditPassPhraseModalContentV2.tsx
│   │   │   │   ├── CreateOrEditWifiModalContent/
│   │   │   │   │   └── index.js
│   │   │   │   ├── CreateOrEditWifiModalContentV2/
│   │   │   │   │   ├── CreateOrEditWifiModalContentV2.styles.ts
│   │   │   │   │   └── CreateOrEditWifiModalContentV2.tsx
│   │   │   │   └── index.js
│   │   │   ├── CreateOrEditVaultModalContentV2/
│   │   │   │   ├── CreateOrEditVaultModalContentV2.styles.ts
│   │   │   │   └── CreateOrEditVaultModalContentV2.tsx
│   │   │   ├── CreateVaultModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── DecryptFilePassword/
│   │   │   │   └── index.tsx
│   │   │   ├── DeleteFolderModalContentV2/
│   │   │   │   ├── DeleteFolderModalContentV2.styles.ts
│   │   │   │   └── DeleteFolderModalContentV2.tsx
│   │   │   ├── DeleteRecordsModalContentV2/
│   │   │   │   ├── DeleteRecordsModalContentV2.styles.ts
│   │   │   │   ├── DeleteRecordsModalContentV2.tsx
│   │   │   │   └── index.ts
│   │   │   ├── DeleteVaultModalContent/
│   │   │   │   ├── DeviceList.tsx
│   │   │   │   ├── __tests__/
│   │   │   │   │   ├── DeleteVaultModalContent.test.tsx
│   │   │   │   │   └── DeviceList.test.tsx
│   │   │   │   ├── index.tsx
│   │   │   │   ├── styles.ts
│   │   │   │   └── types.ts
│   │   │   ├── DisplayPictureModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── DisplayPictureModalContentV2/
│   │   │   │   ├── DisplayPictureModalContentV2.styles.ts
│   │   │   │   └── DisplayPictureModalContentV2.tsx
│   │   │   ├── ExtensionPairingModalContent/
│   │   │   │   ├── ExtensionPairingModalContentV2.styles.ts
│   │   │   │   ├── ExtensionPairingModalContentV2.tsx
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── GeneratePasswordModalContentV2/
│   │   │   │   ├── GeneratePasswordModalContentV2.styles.ts
│   │   │   │   └── GeneratePasswordModalContentV2.tsx
│   │   │   ├── GeneratePasswordSideDrawerContent/
│   │   │   │   ├── PassphraseChecker/
│   │   │   │   │   └── index.js
│   │   │   │   ├── PassphraseGenerator/
│   │   │   │   │   └── index..js
│   │   │   │   ├── PasswordChecker/
│   │   │   │   │   └── index.js
│   │   │   │   ├── PasswordGenerator/
│   │   │   │   │   └── index.js
│   │   │   │   ├── RuleSelector/
│   │   │   │   │   └── index.js
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── ImportItemOrVaultModalContentV2/
│   │   │   │   ├── ImportItemOrVaultModalContentV2.styles.ts
│   │   │   │   └── index.tsx
│   │   │   ├── ImportVaultPreviewModalContent/
│   │   │   │   ├── ImportVaultPreviewModalContent.styles.ts
│   │   │   │   └── index.tsx
│   │   │   ├── ModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── ModalHeader/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── ModifyMasterVaultModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── ModifyVaultModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── MoveFolderModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── MoveFolderModalContentV2/
│   │   │   │   ├── MoveFolderModalContentV2.styles.ts
│   │   │   │   └── MoveFolderModalContentV2.tsx
│   │   │   ├── PairedDevicesModalContent/
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── SideDrawer/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── UnsavedChangesModalContent/
│   │   │   │   ├── UnsavedChangesModalContent.tsx
│   │   │   │   └── index.ts
│   │   │   ├── UpdateRequiredModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── UpdateRequiredModalContentV2/
│   │   │   │   ├── UpdateRequiredModalContentV2.styles.ts
│   │   │   │   └── UpdateRequiredModalContentV2.tsx
│   │   │   ├── UploadFilesModalContentV2/
│   │   │   │   ├── UploadFilesModalContentV2.styles.ts
│   │   │   │   ├── UploadFilesModalContentV2.tsx
│   │   │   │   └── index.ts
│   │   │   ├── UploadImageModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── VaultPasswordFormModalContent/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── MultiSelectActionsBar/
│   │   │   ├── MultiSelectActionsBar.styles.ts
│   │   │   ├── MultiSelectActionsBar.test.tsx
│   │   │   ├── MultiSelectActionsBar.tsx
│   │   │   └── index.ts
│   │   ├── PassPhrase/
│   │   │   ├── PassPhraseSettings.js
│   │   │   ├── PassPhraseV2.styles.ts
│   │   │   ├── PassPhraseV2.tsx
│   │   │   ├── __tests__/
│   │   │   │   ├── PassPhrase.test.js
│   │   │   │   └── PassPhraseSettings.test.js
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── RecordDetails/
│   │   │   ├── CreditCardDetailsForm/
│   │   │   │   ├── CreditCardDetailsFormV2.styles.ts
│   │   │   │   ├── CreditCardDetailsFormV2.tsx
│   │   │   │   ├── index.js
│   │   │   │   └── utils.ts
│   │   │   ├── CustomDetailsForm/
│   │   │   │   ├── CustomDetailsFormV2.styles.ts
│   │   │   │   ├── CustomDetailsFormV2.tsx
│   │   │   │   └── index.js
│   │   │   ├── IdentityDetailsForm/
│   │   │   │   ├── IdentityDetailsFormV2.styles.ts
│   │   │   │   ├── IdentityDetailsFormV2.tsx
│   │   │   │   ├── index.js
│   │   │   │   └── utils.ts
│   │   │   ├── LoginRecordDetailsForm/
│   │   │   │   ├── LoginRecordDetailsFormV2.styles.ts
│   │   │   │   ├── LoginRecordDetailsFormV2.tsx
│   │   │   │   ├── index.js
│   │   │   │   └── utils.ts
│   │   │   ├── NoteDetailsForm/
│   │   │   │   ├── NoteDetailsFormV2.styles.ts
│   │   │   │   ├── NoteDetailsFormV2.tsx
│   │   │   │   ├── index.js
│   │   │   │   └── utils.ts
│   │   │   ├── PassPhraseDetailsForm/
│   │   │   │   ├── PassPhraseDetailsFormV2.styles.ts
│   │   │   │   ├── PassPhraseDetailsFormV2.tsx
│   │   │   │   ├── index.js
│   │   │   │   └── utils.ts
│   │   │   ├── RecordDetailsContent/
│   │   │   │   └── index.js
│   │   │   ├── RecordDetailsV2.styles.ts
│   │   │   ├── RecordDetailsV2.tsx
│   │   │   ├── WifiDetailsForm/
│   │   │   │   ├── WifiDetailsFormV2.styles.ts
│   │   │   │   ├── WifiDetailsFormV2.tsx
│   │   │   │   ├── index.js
│   │   │   │   └── utils.ts
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── RecordListView/
│   │   │   ├── RecordListViewV2.styles.ts
│   │   │   ├── RecordListViewV2.test.tsx
│   │   │   ├── RecordListViewV2.tsx
│   │   │   ├── RecordRowContextMenuV2.styles.ts
│   │   │   ├── RecordRowContextMenuV2.tsx
│   │   │   ├── index.tsx
│   │   │   ├── styles.js
│   │   │   └── utils.js
│   │   ├── Sidebar/
│   │   │   ├── SidebarCategories/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── SidebarV2.styles.ts
│   │   │   ├── SidebarV2.test.tsx
│   │   │   ├── SidebarV2.tsx
│   │   │   ├── VaultSelector/
│   │   │   │   ├── VaultSelector.styles.ts
│   │   │   │   └── VaultSelector.tsx
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   └── WifiPasswordQRCode/
│   │       ├── WifiPasswordQRCodeV2.tsx
│   │       ├── index.js
│   │       └── styles.js
│   ├── context/
│   │   ├── AppHeaderContext.test.js
│   │   ├── AppHeaderContext.tsx
│   │   ├── BannerContext.js
│   │   ├── LoadingContext.js
│   │   ├── LoadingContext.test.js
│   │   ├── ModalContext.js
│   │   ├── ModalContext.test.js
│   │   ├── RouterContext.d.ts
│   │   ├── RouterContext.js
│   │   ├── RouterContext.test.js
│   │   ├── ToastContext.js
│   │   ├── ToastContext.test.js
│   │   └── UnsavedChangesContext.tsx
│   ├── electron/
│   │   ├── index.js
│   │   ├── vaultClientProxy.js
│   │   └── vaultClientProxy.test.js
│   ├── hooks/
│   │   ├── __tests__/
│   │   │   └── useTranslation.test.js
│   │   ├── useAnimatedVisibility.js
│   │   ├── useAnimatedVisibility.test.js
│   │   ├── useAutoLockPreferences.test.js
│   │   ├── useAutoLockPreferences.ts
│   │   ├── useConnectExtension.js
│   │   ├── useConnectExtension.test.js
│   │   ├── useCopyToClipboard.electron.js
│   │   ├── useCopyToClipboard.electron.test.js
│   │   ├── useCreateOrEditRecord.d.ts
│   │   ├── useCreateOrEditRecord.js
│   │   ├── useCreateOrEditRecord.test.js
│   │   ├── useCustomFields.js
│   │   ├── useCustomFields.test.js
│   │   ├── useGetMultipleFiles.js
│   │   ├── useGetMultipleFiles.test.js
│   │   ├── useLanguageOptions.js
│   │   ├── useLanguageOptions.test.js
│   │   ├── useOutsideClick.js
│   │   ├── useOutsideClick.test.js
│   │   ├── usePasteFromClipboard.js
│   │   ├── usePasteFromClipboard.test.js
│   │   ├── usePearUpdate.js
│   │   ├── usePearUpdate.test.js
│   │   ├── useRecordActionItems.d.ts
│   │   ├── useRecordActionItems.js
│   │   ├── useRecordActionItems.test.js
│   │   ├── useRecordMenuItems.js
│   │   ├── useRecordMenuItems.test.js
│   │   ├── useRecordMenuItemsV2.test.ts
│   │   ├── useRecordMenuItemsV2.ts
│   │   ├── useRiveWithRetry.ts
│   │   ├── useScrollOverflow.test.js
│   │   ├── useScrollOverflow.ts
│   │   ├── useSimulatedLoading.js
│   │   ├── useSimulatedLoading.test.js
│   │   ├── useTranslation.ts
│   │   ├── useVaultSwitch.test.tsx
│   │   ├── useVaultSwitch.tsx
│   │   ├── useWindowResize.js
│   │   └── useWindowResize.test.js
│   ├── lib-react-components/
│   │   ├── components/
│   │   │   ├── ButtonCreate/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonFilter/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonFolder/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonLittle/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonPrimary/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonRadio/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonRoundIcon/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonSecondary/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonSingleInput/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── ButtonThin/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── CompoundField/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── HighlightString/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── InputField/
│   │   │   │   ├── index.test.js
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── NoticeText/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── PasswordField/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── PearPassInputField/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── PearPassPasswordField/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── PearPassPasswordFieldV2/
│   │   │   │   ├── index.test.ts
│   │   │   │   ├── index.tsx
│   │   │   │   ├── styles.ts
│   │   │   │   └── types.ts
│   │   │   ├── Slider/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── Switch/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── TextArea/
│   │   │   │   ├── index.test.js
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.ts
│   │   │   └── TooltipWrapper/
│   │   │       ├── index.js
│   │   │       └── styles.js
│   │   ├── icons/
│   │   │   ├── AboutIcon/
│   │   │   │   └── index.js
│   │   │   ├── AppearanceIcon/
│   │   │   │   └── index.js
│   │   │   ├── ArrowDownIcon/
│   │   │   │   └── index.js
│   │   │   ├── ArrowLeftIcon/
│   │   │   │   └── index.js
│   │   │   ├── ArrowRightIcon/
│   │   │   │   └── index.js
│   │   │   ├── ArrowUpAndDown/
│   │   │   │   └── index.js
│   │   │   ├── ArrowUpIcon/
│   │   │   │   └── index.js
│   │   │   ├── AutoFillIcon/
│   │   │   │   └── index.js
│   │   │   ├── BackIcon/
│   │   │   │   └── index.js
│   │   │   ├── BrushIcon/
│   │   │   │   └── index.js
│   │   │   ├── CalendarIcon/
│   │   │   │   └── index.js
│   │   │   ├── CheckIcon/
│   │   │   │   └── index.js
│   │   │   ├── CollapseIcon/
│   │   │   │   └── index.js
│   │   │   ├── CommonFileIcon/
│   │   │   │   └── index.js
│   │   │   ├── ComputerIcon/
│   │   │   │   └── index.js
│   │   │   ├── CopyIcon/
│   │   │   │   └── index.js
│   │   │   ├── CreditCardIcon/
│   │   │   │   └── index.js
│   │   │   ├── CubeIcon/
│   │   │   │   └── index.js
│   │   │   ├── DeleteIcon/
│   │   │   │   └── index.js
│   │   │   ├── EmailIcon/
│   │   │   │   └── index.js
│   │   │   ├── ErrorIcon/
│   │   │   │   └── index.js
│   │   │   ├── ExitIcon/
│   │   │   │   └── index.js
│   │   │   ├── EyeClosedIcon/
│   │   │   │   └── index.js
│   │   │   ├── EyeIcon/
│   │   │   │   └── index.js
│   │   │   ├── FolderIcon/
│   │   │   │   └── index.js
│   │   │   ├── FullBodyIcon/
│   │   │   │   └── index.js
│   │   │   ├── GenderIcon/
│   │   │   │   └── index.js
│   │   │   ├── GroupIcon/
│   │   │   │   └── index.js
│   │   │   ├── ImageIcon/
│   │   │   │   └── index.js
│   │   │   ├── InfoIcon/
│   │   │   │   └── index.js
│   │   │   ├── KebabMenuIcon/
│   │   │   │   └── index.js
│   │   │   ├── KeyIcon/
│   │   │   │   └── index.js
│   │   │   ├── LockCircleIcon/
│   │   │   │   └── index.js
│   │   │   ├── LockIcon/
│   │   │   │   └── index.js
│   │   │   ├── MoveToIcon/
│   │   │   │   └── index.js
│   │   │   ├── MultiSelectionIcon/
│   │   │   │   └── index.js
│   │   │   ├── NationalityIcon/
│   │   │   │   └── index.js
│   │   │   ├── NewFolderIcon/
│   │   │   │   └── index.js
│   │   │   ├── NineDotsIcon/
│   │   │   │   └── index.js
│   │   │   ├── NoteIcon/
│   │   │   │   └── index.js
│   │   │   ├── OkayIcon/
│   │   │   │   └── index.js
│   │   │   ├── OutsideLinkIcon/
│   │   │   │   └── index.js
│   │   │   ├── PassPhraseIcon/
│   │   │   │   └── index.js
│   │   │   ├── PasswordIcon/
│   │   │   │   └── index.js
│   │   │   ├── PasteIcon/
│   │   │   │   └── index.js
│   │   │   ├── PhoneIcon/
│   │   │   │   └── index.js
│   │   │   ├── PinIcon/
│   │   │   │   └── index.js
│   │   │   ├── PlusIcon/
│   │   │   │   └── index.js
│   │   │   ├── SaveIcon/
│   │   │   │   └── index.js
│   │   │   ├── SearchIcon/
│   │   │   │   └── index.js
│   │   │   ├── SecurityIcon/
│   │   │   │   └── index.js
│   │   │   ├── SettingsIcon/
│   │   │   │   └── index.js
│   │   │   ├── ShareIcon/
│   │   │   │   └── index.js
│   │   │   ├── SmallArrowIcon/
│   │   │   │   └── index.js
│   │   │   ├── StarIcon/
│   │   │   │   └── index.js
│   │   │   ├── SyncingIcon/
│   │   │   │   └── index.js
│   │   │   ├── TimeIcon/
│   │   │   │   └── index.js
│   │   │   ├── UserIcon/
│   │   │   │   └── index.js
│   │   │   ├── UserSecurityIcon/
│   │   │   │   └── index.js
│   │   │   ├── VaultIcon/
│   │   │   │   └── index.js
│   │   │   ├── WifiIcon/
│   │   │   │   └── index.js
│   │   │   ├── WorldIcon/
│   │   │   │   └── index.js
│   │   │   ├── XIcon/
│   │   │   │   └── index.js
│   │   │   ├── YellowErrorIcon/
│   │   │   │   └── index.js
│   │   │   └── icons.test.js
│   │   ├── illustrations/
│   │   │   └── AuthenticatorIllustration/
│   │   │       └── index.js
│   │   ├── index.js
│   │   └── utils/
│   │       ├── getIconProps.js
│   │       └── getIconProps.test.js
│   ├── pages/
│   │   ├── AuthenticatorView/
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   └── styles.ts
│   │   ├── InitialPage/
│   │   │   └── index.js
│   │   ├── Intro/
│   │   │   ├── CategoryAnimation/
│   │   │   │   └── index.tsx
│   │   │   ├── CreditCardAnimation/
│   │   │   │   └── index.tsx
│   │   │   ├── GradientContainer/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── IntroV2.tsx
│   │   │   ├── IntroV2Styles.ts
│   │   │   ├── OnboardingLockVideo/
│   │   │   │   └── index.tsx
│   │   │   ├── PasswordFillAnimation/
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.js
│   │   │   ├── SyncWithoutCloudAnimation/
│   │   │   │   └── index.tsx
│   │   │   ├── TutorialContainer/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── WelcomeToPearpass/
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── LoadingPage/
│   │   │   ├── LoadingPageV2.tsx
│   │   │   ├── LoadingPageV2Styles.ts
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── MainView/
│   │   │   ├── MainViewV2.styles.ts
│   │   │   ├── MainViewV2.tsx
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── SettingsView/
│   │   │   ├── AboutContent/
│   │   │   │   ├── index.js
│   │   │   │   └── index.test.js
│   │   │   ├── AppearanceContent/
│   │   │   │   └── index.js
│   │   │   ├── ExportTab/
│   │   │   │   ├── index.js
│   │   │   │   ├── styles.js
│   │   │   │   └── utils/
│   │   │   │       ├── downloadFile.js
│   │   │   │       ├── downloadFile.test.js
│   │   │   │       ├── downloadZip.js
│   │   │   │       ├── downloadZip.test.js
│   │   │   │       ├── exportCsvPerVault.js
│   │   │   │       └── exportJsonPerVault.js
│   │   │   ├── ImportTab/
│   │   │   │   ├── index.js
│   │   │   │   ├── styles.js
│   │   │   │   └── utils/
│   │   │   │       ├── readFileContent.js
│   │   │   │       └── readFileContent.test.js
│   │   │   ├── SecurityContent/
│   │   │   │   └── index.js
│   │   │   ├── SettingsAdvancedTab/
│   │   │   │   ├── SettingsAutoLockConfiguration/
│   │   │   │   │   ├── index.tsx
│   │   │   │   │   └── styles.ts
│   │   │   │   ├── SettingsBlindPeersSection/
│   │   │   │   │   ├── index.js
│   │   │   │   │   ├── index.test.js
│   │   │   │   │   └── styles.js
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── SettingsTab/
│   │   │   │   ├── SettingsDevicesSection/
│   │   │   │   │   ├── index.js
│   │   │   │   │   ├── index.test.js
│   │   │   │   │   └── styles.js
│   │   │   │   ├── SettingsLanguageSection/
│   │   │   │   │   ├── index.js
│   │   │   │   │   ├── index.test.js
│   │   │   │   │   └── styles.js
│   │   │   │   ├── SettingsPasswordsSection/
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── styles.js
│   │   │   │   ├── SettingsReportSection/
│   │   │   │   │   ├── index.js
│   │   │   │   │   ├── index.test.js
│   │   │   │   │   └── styles.js
│   │   │   │   ├── index.js
│   │   │   │   └── styles.js
│   │   │   ├── SettingsVaultsTab/
│   │   │   │   ├── index.js
│   │   │   │   ├── index.test.js
│   │   │   │   └── styles.js
│   │   │   ├── SyncingContent/
│   │   │   │   └── index.js
│   │   │   ├── VaultContent/
│   │   │   │   └── index.js
│   │   │   ├── index.js
│   │   │   └── styles.js
│   │   ├── SettingsViewV2/
│   │   │   ├── SettingsViewV2.styles.ts
│   │   │   ├── SettingsViewV2.tsx
│   │   │   └── content/
│   │   │       ├── AppPreferencesContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── AppVersionContent/
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── BlindPeersContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── DiagnosticsContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── ExportItemsContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── ImportCodesContent/
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── ImportItemsContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── LanguageContent/
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── MasterPasswordContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── ReportAProblemContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── YourDevicesContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       ├── YourVaultsContent/
│   │   │       │   ├── index.test.tsx
│   │   │       │   ├── index.tsx
│   │   │       │   └── styles.ts
│   │   │       └── index.ts
│   │   └── WelcomePage/
│   │       ├── CardCreateMasterPassword/
│   │       │   ├── index.js
│   │       │   └── styles.js
│   │       ├── CardCreateMasterPasswordV2/
│   │       │   ├── index.tsx
│   │       │   └── styles.ts
│   │       ├── CardLoadVault/
│   │       │   ├── index.js
│   │       │   └── styles.js
│   │       ├── CardNewVaultCredentials/
│   │       │   ├── index.js
│   │       │   └── styles.js
│   │       ├── CardUnlockPearPass/
│   │       │   └── index.tsx
│   │       ├── CardUnlockPearPassV2/
│   │       │   ├── index.tsx
│   │       │   └── styles.ts
│   │       ├── CardUnlockVault/
│   │       │   ├── index.js
│   │       │   └── styles.js
│   │       ├── CardUploadBackupFile/
│   │       │   ├── index.js
│   │       │   └── styles.js
│   │       ├── CardVaultSelect/
│   │       │   ├── index.js
│   │       │   └── styles.js
│   │       ├── LockedScreen/
│   │       │   ├── Timer.js
│   │       │   ├── index.js
│   │       │   └── styles.js
│   │       ├── LockedScreenV2/
│   │       │   ├── LockedScreenV2.styles.ts
│   │       │   ├── LockedScreenV2.test.tsx
│   │       │   └── LockedScreenV2.tsx
│   │       ├── index.js
│   │       └── styles.js
│   ├── services/
│   │   ├── createOrGetPearpassClient.js
│   │   ├── createOrGetPearpassClient.test.js
│   │   ├── createOrGetPipe.js
│   │   ├── createOrGetPipe.test.js
│   │   ├── handlers/
│   │   │   ├── EncryptionHandlers.js
│   │   │   ├── EncryptionHandlers.test.js
│   │   │   ├── SecureRequestHandler.js
│   │   │   ├── SecureRequestHandler.test.js
│   │   │   ├── SecurityHandlers.js
│   │   │   ├── SecurityHandlers.test.js
│   │   │   └── VaultHandlers.js
│   │   ├── ipc/
│   │   │   ├── MethodRegistry.js
│   │   │   ├── MethodRegistry.test.js
│   │   │   ├── SocketManager.js
│   │   │   └── SocketManager.test.js
│   │   ├── nativeMessagingIPCServer.js
│   │   ├── nativeMessagingIPCServer.test.js
│   │   ├── nativeMessagingPreferences.js
│   │   ├── nativeMessagingPreferences.test.js
│   │   └── security/
│   │       ├── appIdentity.js
│   │       ├── appIdentity.test.js
│   │       ├── protocolConstants.js
│   │       ├── sessionManager.js
│   │       ├── sessionManager.test.js
│   │       └── sessionStore.js
│   ├── shared/
│   │   ├── commandDefinitions.js
│   │   └── types.ts
│   ├── strict.css
│   ├── svgs/
│   │   ├── ItemCardIllustration/
│   │   │   ├── ItemCardIllustration.tsx
│   │   │   └── index.ts
│   │   ├── LogoLock/
│   │   │   ├── index.js
│   │   │   └── index.test.js
│   │   ├── OnboardingLock/
│   │   │   └── index.js
│   │   ├── PearLogo/
│   │   │   └── index.js
│   │   ├── PearpassLogo/
│   │   │   └── index.js
│   │   ├── ProtonPass/
│   │   │   └── index.js
│   │   ├── SpotlightLeft/
│   │   │   ├── index.js
│   │   │   └── index.test.js
│   │   ├── SpotlightMiddle/
│   │   │   ├── index.js
│   │   │   └── index.test.js
│   │   └── SpotlightRight/
│   │       ├── index.js
│   │       └── index.test.js
│   ├── types/
│   │   ├── css.d.ts
│   │   ├── electron.d.ts
│   │   ├── jest-globals.d.ts
│   │   ├── modules.d.ts
│   │   └── styled.d.ts
│   └── utils/
│       ├── addHttps.js
│       ├── addHttps.test.js
│       ├── applyGlobalStyles.js
│       ├── applyGlobalStyles.test.js
│       ├── autoLock.js
│       ├── autoLock.test.js
│       ├── breakpoints.js
│       ├── breakpoints.test.js
│       ├── createErrorWithCode.js
│       ├── createErrorWithCode.test.js
│       ├── designVersion.js
│       ├── devicePreferences.cjs
│       ├── devicePreferences.test.js
│       ├── envGetter.js
│       ├── envGetter.test.js
│       ├── extractDomainName.js
│       ├── extractDomainName.test.js
│       ├── formatPasskeyDate.js
│       ├── getDeviceName.js
│       ├── getDeviceName.test.js
│       ├── getFilteredAttachmentsById.js
│       ├── getFilteredAttachmentsById.test.js
│       ├── getPasswordStrengthInfo.test.ts
│       ├── getPasswordStrengthInfo.ts
│       ├── getRecordSubtitle.test.ts
│       ├── getRecordSubtitle.ts
│       ├── groupRecordsByTimePeriod.test.ts
│       ├── groupRecordsByTimePeriod.ts
│       ├── handleFileSelect.js
│       ├── handleFileSelect.test.js
│       ├── isFavorite.js
│       ├── isFavorite.test.js
│       ├── isOnline.js
│       ├── isPasswordChangeReminderDisabled.js
│       ├── isPasswordChangeReminderDisabled.test.js
│       ├── logHelper.cjs
│       ├── logHelper.test.js
│       ├── logger.js
│       ├── logger.test.js
│       ├── nativeMessagingSetup.js
│       ├── nativeMessagingSetup.test.js
│       ├── sortByName.js
│       ├── sortByName.test.js
│       ├── toSentenceCase.js
│       ├── toSentenceCase.test.js
│       ├── vaultCreated.js
│       ├── vaultCreated.test.js
│       ├── withAlpha.test.js
│       └── withAlpha.ts
├── styles.js
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .claude/skills/use-ui-kit/SKILL.md
================================================
---
name: use-ui-kit
description: Use whenever creating or editing UI in this repo — React components, modals, dialogs, forms, buttons, inputs, typography, styling, icons, or any .tsx/.jsx work. The repo uses `@tetherto/pearpass-lib-ui-kit` as the single source for UI primitives; do not roll custom ones. Load this before suggesting any UI change, especially for v2 files (V2 suffix) or when touching src/components, src/containers/Modal, or src/pages.
---

<!-- Mirror of AGENTS.md at repo root — keep in sync. AGENTS.md is the canonical copy; this file exists so Claude Code's skill-trigger mechanism can lazy-load the same content on UI work. -->

# UI conventions for pearpass-app-desktop-tether

This is the Electron desktop app for PearPass. It's written in React + TypeScript. UI is built on the shared component library `@tetherto/pearpass-lib-ui-kit`.

This document is for **anyone contributing UI** to the repo — new hires, current engineers, and AI coding assistants (Claude Code, Cursor, Codex, etc.). It captures the component catalog, styling conventions, file-naming rules, and patterns we use when building UI in this app. Read it once before your first UI change; keep it open when you're in doubt.

## Design-system state — `DESKTOP_DESIGN_VERSION === 2`

Which design renders at runtime is controlled by the `DESKTOP_DESIGN_VERSION` flag from `@tetherto/pearpass-lib-constants` (resolved in [electron/runtime-config.cjs](../../../electron/runtime-config.cjs) and exposed via `isV2()` in [src/utils/designVersion.js](../../../src/utils/designVersion.js)).

**Currently `DESKTOP_DESIGN_VERSION === 2`**, so kit components are the right choice for all new UI work. Legacy v1 components still live under [src/lib-react-components/](../../../src/lib-react-components/) and are rendered whenever `isV2()` returns `false` — do not delete them as part of v2 work.

## File naming: when to use the `V2` suffix

The `V2` suffix is a **coexistence marker**, not a design marker. Use it only when a v1 sibling already exists:

- **A v1 file already exists** for this component/screen → create a new file with the `V2` suffix next to it (e.g. v1 `CreateVaultModalContent.jsx` → new `CreateVaultModalContentV2.tsx`). Both live in the tree during migration; the branching happens at the call site via `isV2()`.
- **No v1 equivalent exists** (net-new feature, net-new component) → create the file with its natural name, **no `V2` suffix**. The codebase is already v2 by default, so the suffix would just be noise.

Before creating a file, glob the directory for the base name without the suffix. If nothing comes up, skip the suffix.

## Golden rules

1. **Check the catalog below before creating any component.** If it exists in the kit, use it — never wrap or reimplement.
2. **All new UI goes through the kit.** Any new `.tsx`/`.jsx` file — suffixed or not — must import from `@tetherto/pearpass-lib-ui-kit`, not from [src/lib-react-components/](../../../src/lib-react-components/).
3. **Never add variants under [src/lib-react-components/components/](../../../src/lib-react-components/components/)** (`ButtonThin`, `ButtonPrimary`, `ButtonRoundIcon`, `PearPassInputField`, etc.). That tree is legacy; the kit's `Button` takes variants.
4. **Style with tokens.** Use `useTheme()` + `rawTokens`. No hardcoded hex colors or px spacing.
5. **Icons come from the kit.** `@tetherto/pearpass-lib-ui-kit/icons` has 530 icons. Do not add new SVGs under `src/`.
6. **If the kit lacks something you need, stop and ask the user.** Don't silently roll a custom component.

## Component catalog (31 components)

Import pattern: `import { ComponentName } from '@tetherto/pearpass-lib-ui-kit'`

### Actions
- `Button` — all CTAs. Takes variants; use instead of `ButtonThin`, `ButtonPrimary`, `ButtonSecondary`, `ButtonRoundIcon`, `ButtonLittle`, `ButtonFilter`, `ButtonFolder`, `ButtonRadio`, `ButtonSingleInput`, `ButtonCreate`.
- `Pressable` — low-level pressable wrapper for custom interactive elements.
- `Link` — text links.

### Forms
- `Form` — form wrapper with validation.
- `InputField` — text input. Use instead of `PearPassInputField`.
- `PasswordField` — password input with strength indicator. Use instead of `PearPassPasswordField` / `PearPassPasswordFieldV2`.
- `SearchField` — search input.
- `SelectField` — dropdown select.
- `Dropdown` — low-level dropdown primitive.
- `TextArea` — multiline text input.
- `Checkbox`
- `Radio`
- `ToggleSwitch`
- `Slider`
- `DateField`
- `AttachmentField`
- `UploadField`
- `MultiSlotInput` — split inputs for OTP / recovery codes. Use instead of custom `OtpCodeField`.
- `FieldError` — inline field validation error.

### Typography
- `Title` — headings.
- `Text` — body text.

### Layout / surfaces
- `Dialog` — modals. Use instead of custom `ModalContent` wrappers.
- `NativeBottomSheet` — bottom sheets.
- `PageHeader` — top-of-page header.
- `ItemScreenHeader` — item-detail header.
- `Breadcrumb`
- `ListItem`
- `NavbarListItem`
- `ContextMenu`

### Feedback
- `AlertMessage` — inline alerts. Reference: [src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx](../../../src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx).
- `Snackbar` — toast-style notifications.
- `PasswordIndicator` — standalone password strength meter.

### Type exports
- `ThemeColors`, `Theme`, `ThemeType`, `RawTokens`
- `PasswordIndicatorVariant` — `'vulnerable' | 'decent' | 'strong'`

Import types with `import type { ... } from '@tetherto/pearpass-lib-ui-kit'`.

## Component props (15 most-used)

Required props have no `?`. **Always include a test ID on interactive components** — see the "Test IDs" section below for which prop to use per component.

- **Button** — `variant: 'primary' | 'secondary' | 'tertiary' | 'destructive'`, `size: 'small' | 'medium'`, `onClick`, `children`, `type?: 'button' | 'submit'`, `disabled?`, `isLoading?`, `iconBefore?`, `iconAfter?`, `data-testid?`. Icon-only buttons need `aria-label`.
- **Dialog** — `title` (ReactNode), `onClose?`, `open?`, `footer?`, `children?`, `closeOnOutsideClick?`, `hideCloseButton?`, `trapFocus?`, `initialFocusRef?`, `testID?`, `closeButtonTestID?`. Put action buttons in `footer`.
- **InputField** — `label`, `value`, `onChange?: (e) => void`, `placeholder?`, `error?: string`, `inputType?: 'text' | 'password'`, `disabled?`, `readOnly?`, `copyable?`, `onCopy?`, `leftSlot?`, `rightSlot?`, `testID?`.
- **PasswordField** — `label`, `value`, `onChange?`, `placeholder?`, `error?`, `passwordIndicator?: 'vulnerable' | 'decent' | 'strong' | 'match'`, `infoBox?: string`, `copyable?`, `testID?`.
- **SearchField** — `value`, `onChangeText` (yes, this one is still current), `placeholderText?`, `size?: 'small' | 'medium'`, `testID?`.
- **Form** — `children`, `onSubmit?`, `noValidate?`, `testID?`. Wrap fields here; pair with `useForm` from `@tetherto/pear-apps-lib-ui-react-hooks`.
- **Text** — `children`, `as?: 'p' | 'span'`, `variant?: 'label' | 'labelEmphasized' | 'body' | 'bodyEmphasized' | 'caption'`, `color?`, `numberOfLines?`, `data-testid?`.
- **Title** — `children`, `as?: 'h1' | 'h2' | ... | 'h6'`, `data-testid?`.
- **AlertMessage** — `variant: 'info' | 'warning' | 'error'`, `size: 'small' | 'medium' | 'big'`, `title`, `description`, `actionText?`, `onAction?`, `testID?`, `actionTestId?`.
- **ToggleSwitch** — `checked?`, `onChange?: (b: boolean) => void`, `label?`, `description?`, `disabled?`, `data-testid?`.
- **Checkbox** — same shape as `ToggleSwitch` (uses `data-testid`).
- **Radio** — `options: Array<{value, label?, description?, disabled?}>`, `value?`, `onChange?: (v: string) => void`, `testID?`.
- **SelectField** — `label`, `value?`, `placeholder?`, `onClick?` (opens dropdown), `error?`, `disabled?`, `leftSlot?`, `rightSlot?`, `testID?`.
- **TextArea** — `value`, `onChange?`, `label?`, `placeholder?`, `error?`, `disabled?`, `testID?`.
- **Link** — `children`, `href?`, `isExternal?`, `onClick?`, `data-testid?` (and standard `<a>` attributes).

For components not listed, open `node_modules/@tetherto/pearpass-lib-ui-kit/dist/components/<Name>/types.d.ts`.

### Test IDs — `testID` vs `data-testid`

Always include a test ID on anything a user interacts with (buttons, fields, toggles, dialogs). Which prop depends on the component:

- **`testID`** — components that declare it explicitly: `Dialog` (+ `closeButtonTestID`), `Form`, `InputField`, `PasswordField`, `SearchField`, `SelectField`, `TextArea`, `Radio`, `AlertMessage` (+ `actionTestId`).
- **`data-testid`** — components that extend native HTML and don't redeclare it: `Button`, `ToggleSwitch`, `Checkbox`, `Link`, `Pressable`, `Text`, `Title`.

Rule of thumb: try `testID` first; if TypeScript rejects it, use `data-testid`. When editing an existing file, follow the naming pattern already there (e.g. `createvault-name-v2`, `createvault-discard-v2`).

### Prop naming — modern vs. deprecated (important)

The kit recently renamed several field props. **Use the modern names:**

| Use | Not (deprecated) |
| --- | --- |
| `onChange` (receives `ChangeEvent`) | `onChangeText` (receives string) |
| `placeholder` | `placeholderText` |
| `error` (string) | `errorMessage` + `variant` |

⚠️ **Existing v2 files in this repo (e.g. `CreateVaultModalContentV2`, `CardCreateMasterPasswordV2`) still use the deprecated props.** Don't copy their prop names blindly — use the modern ones in new code. The deprecated props still work for now but will be removed.

**Exception:** `SearchField` still uses `onChangeText` + `placeholderText` — those aren't deprecated there. `testID` is current everywhere.

## Theming

The codebase does **not** use styled-components. The convention is a `createStyles(colors)` factory that returns plain inline-style objects, consumed via `style={styles.foo}`.

**In the component** (reference: `src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx`):

```tsx
import { useTheme } from '@tetherto/pearpass-lib-ui-kit'
import { createStyles } from './styles'

const Component = () => {
  const { theme } = useTheme()
  const styles = createStyles(theme.colors)
  return <div style={styles.card}>…</div>
}
```

**In the companion `styles.ts`** (reference: `src/pages/WelcomePage/CardCreateMasterPasswordV2/styles.ts`):

```ts
import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'
import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'

export const createStyles = (colors: ThemeColors) => ({
  card: {
    background: colors.colorSurfacePrimary,
    border: `1px solid ${colors.colorBorderPrimary}`,
    borderRadius: `${rawTokens.radius8}px`,
    padding: `${rawTokens.spacing24}px`,
    gap: `${rawTokens.spacing12}px`,
  },
})
```

### `rawTokens` — flat, numeric-suffixed keys (not nested)

- Spacing: `spacing2`, `spacing4`, `spacing6`, `spacing8`, `spacing10`, `spacing12`, `spacing16`, `spacing20`, `spacing24`, `spacing32`, `spacing40`, `spacing48` (all `number`, multiply with `${n}px`)
- Radius: `radius8`, `radius16`, `radius20`, `radius26`
- Font size: `fontSize12`, `fontSize14`, `fontSize16`, `fontSize24`, `fontSize28`
- Font family: `fontPrimary` (`"Inter"`), `fontDisplay` (`"Humble Nostalgia"`)
- Weight: `weightRegular` (`"400"`), `weightMedium` (`"500"`)

### `theme.colors` — common keys seen in this repo

`colorSurfacePrimary`, `colorSurfaceHover`, `colorBorderPrimary`, `colorBorderSecondary`, `colorTextPrimary`, `colorTextSecondary`, `colorTextTertiary`, `colorLinkText`. If you need one you haven't seen, inspect the `ThemeColors` type from `@tetherto/pearpass-lib-ui-kit`.

### When hardcoded values are OK

Tokens cover the design-system primitives. Feature-specific layout values (a card's `maxWidth: '500px'`, a one-off `padding: '55px 0'`) are fine as literals — these aren't design tokens. **Rule of thumb:** if the value corresponds to a semantic design decision (spacing step, brand color, radius), it must come from a token.

## Icons

```tsx
import { Add, Download, Folder, OpenInNew } from '@tetherto/pearpass-lib-ui-kit/icons'
```

530 icons, mostly Material Design, with style variants as suffixes: `Filled`, `Outlined`, `Round`, `Sharp`, `Tone` (e.g. `LockFilled`, `InfoOutlined`, `KeyboardArrowRightRound`). If a name has no suffix, it exists as a single variant.

**Commonly used in this repo** (check these first before browsing):

- **Actions:** `Add`, `Download`, `ContentCopy`, `Share`, `Send`, `Swap`, `UploadFileFilled`
- **Folder / organization:** `Folder`, `FolderOpen`, `FolderCopy`, `CreateNewFolder`, `Layers`
- **Navigation / arrows:** `KeyboardArrowRightFilled`, `KeyboardArrowRightRound`, `KeyboardArrowLeftFilled`, `ExpandMore`
- **Status / feedback:** `InfoOutlined`, `ReportProblemRound`, `ErrorFilled`, `Check`, `DoneAll`, `CheckBox`
- **Security:** `LockFilled`, `Key`, `SecurityFilled`, `Fingerprint`, `TwoFactorAuthenticationFilled`
- **External / misc:** `ImportOutlined`, `OpenInNew`

**Discovering others:** `ls node_modules/@tetherto/pearpass-lib-ui-kit/dist/icons/components/ | grep -i <keyword>` — names are PascalCase, grep is case-insensitive friendly.

## Anti-patterns to avoid

When editing a v2 file or creating new UI, do **not**:

- Add a new file under `src/lib-react-components/components/` for a Button/Input/Modal variant.
- Import `PearPassInputField`, `PearPassPasswordField`, or any `Button*` variant from `src/lib-react-components/` into any new file — swap to the kit equivalents.
- Add a `V2` suffix to a net-new file that has no v1 sibling. Suffix is only for migration coexistence.
- Use native `<button>`, `<input>`, or `<dialog>` in production code (tests are fine).
- Hardcode hex colors, brand radii, or design-system spacing — use `rawTokens` and `theme.colors`. (Feature-specific layout literals like `maxWidth: '500px'` are fine.)
- Add new SVG files under `src/` when the kit's icons subpath covers them.
- Introduce `styled-components` — the convention is `createStyles(colors)` returning plain style objects.

When editing a v1 file and you spot these patterns, mention them to the user but **don't do drive-by rewrites** unless asked — v1 migration is scoped work.

## When the kit truly lacks something

1. Confirm by grepping `node_modules/@tetherto/pearpass-lib-ui-kit/dist/components/` for the concept.
2. Check if a composition of existing kit primitives covers it (e.g. `Pressable` + `Text` + tokens).
3. If still missing, surface it to the user: "The kit doesn't export X — options are (a) compose from Y + Z, (b) request X be added upstream, (c) temporary local component. Which?" Do not silently create (c).


================================================
FILE: .cursor/rules/use-ui-kit.mdc
================================================
---
description: Rules for building and editing UI in this repo. The repo uses @tetherto/pearpass-lib-ui-kit as the single source for UI primitives — do not roll custom buttons, inputs, modals, typography, or icons. Covers component catalog, props (modern vs deprecated), theming conventions, a cookbook of common patterns, and anti-patterns to avoid. Mirror of .claude/skills/use-ui-kit/SKILL.md — keep in sync.
globs: src/**/*.tsx, src/**/*.jsx, src/**/*.ts
alwaysApply: false
---

# Using `@tetherto/pearpass-lib-ui-kit`

This is the design system for the pearpass desktop app. All UI primitives come from here.

## When these rules apply — `DESKTOP_DESIGN_VERSION === 2`

The active design is controlled by the `DESKTOP_DESIGN_VERSION` flag from `@tetherto/pearpass-lib-constants` (read in `electron/runtime-config.cjs` and exposed via `isV2()` in `src/utils/designVersion.js`).

**Currently `DESKTOP_DESIGN_VERSION === 2`**, so kit components are the right choice for all new UI work today. The app is mid-migration from v1 (custom components in `src/lib-react-components/`) to v2 (kit-based). If the flag is ever flipped back to `1`, v1 components remain in place and continue to work — do not delete them.

## File naming: when to use the `V2` suffix

The `V2` suffix is a **coexistence marker**, not a design marker. Use it only when a v1 sibling already exists:

- **A v1 file already exists** for this component/screen → create a new file with the `V2` suffix next to it (e.g. v1 `CreateVaultModalContent.jsx` → new `CreateVaultModalContentV2.tsx`). Both live in the tree during migration; the branching happens at the call site via `isV2()`.
- **No v1 equivalent exists** (net-new feature, net-new component) → create the file with its natural name, **no `V2` suffix**. The codebase is already v2 by default, so the suffix would just be noise.

Before creating a file, glob the directory for the base name without the suffix. If nothing comes up, skip the suffix.

## Golden rules

1. **Check the catalog below before creating any component.** If it exists in the kit, use it — never wrap or reimplement.
2. **All new UI goes through the kit.** Any new `.tsx`/`.jsx` file — suffixed or not — must import from `@tetherto/pearpass-lib-ui-kit`, not from `src/lib-react-components/`.
3. **Never add variants under `src/lib-react-components/components/`** (`ButtonThin`, `ButtonPrimary`, `ButtonRoundIcon`, `PearPassInputField`, etc.). That tree is legacy; the kit's `Button` takes variants.
4. **Style with tokens.** Use `useTheme()` + `rawTokens`. No hardcoded hex colors or px spacing.
5. **Icons come from the kit.** `@tetherto/pearpass-lib-ui-kit/icons` has 530 icons. Do not add new SVGs under `src/`.
6. **If the kit lacks something you need, stop and ask the user.** Don't silently roll a custom component.

## Component catalog (31 components)

Import pattern: `import { ComponentName } from '@tetherto/pearpass-lib-ui-kit'`

### Actions
- `Button` — all CTAs. Takes variants; use instead of `ButtonThin`, `ButtonPrimary`, `ButtonSecondary`, `ButtonRoundIcon`, `ButtonLittle`, `ButtonFilter`, `ButtonFolder`, `ButtonRadio`, `ButtonSingleInput`, `ButtonCreate`.
- `Pressable` — low-level pressable wrapper for custom interactive elements.
- `Link` — text links.

### Forms
- `Form` — form wrapper with validation.
- `InputField` — text input. Use instead of `PearPassInputField`.
- `PasswordField` — password input with strength indicator. Use instead of `PearPassPasswordField` / `PearPassPasswordFieldV2`.
- `SearchField` — search input.
- `SelectField` — dropdown select.
- `Dropdown` — low-level dropdown primitive.
- `TextArea` — multiline text input.
- `Checkbox`
- `Radio`
- `ToggleSwitch`
- `Slider`
- `DateField`
- `AttachmentField`
- `UploadField`
- `MultiSlotInput` — split inputs for OTP / recovery codes. Use instead of custom `OtpCodeField`.
- `FieldError` — inline field validation error.

### Typography
- `Title` — headings.
- `Text` — body text.

### Layout / surfaces
- `Dialog` — modals. Use instead of custom `ModalContent` wrappers.
- `NativeBottomSheet` — bottom sheets.
- `PageHeader` — top-of-page header.
- `ItemScreenHeader` — item-detail header.
- `Breadcrumb`
- `ListItem`
- `NavbarListItem`
- `ContextMenu`

### Feedback
- `AlertMessage` — inline alerts. Reference: `src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx`.
- `Snackbar` — toast-style notifications.
- `PasswordIndicator` — standalone password strength meter.

### Type exports
- `ThemeColors`, `Theme`, `ThemeType`, `RawTokens`
- `PasswordIndicatorVariant` — `'vulnerable' | 'decent' | 'strong'`

Import types with `import type { ... } from '@tetherto/pearpass-lib-ui-kit'`.

## Component props (15 most-used)

Required props have no `?`. **Always include a test ID on interactive components** — see the "Test IDs" section below for which prop to use per component.

- **Button** — `variant: 'primary' | 'secondary' | 'tertiary' | 'destructive'`, `size: 'small' | 'medium'`, `onClick`, `children`, `type?: 'button' | 'submit'`, `disabled?`, `isLoading?`, `iconBefore?`, `iconAfter?`, `data-testid?`. Icon-only buttons need `aria-label`.
- **Dialog** — `title` (ReactNode), `onClose?`, `open?`, `footer?`, `children?`, `closeOnOutsideClick?`, `hideCloseButton?`, `trapFocus?`, `initialFocusRef?`, `testID?`, `closeButtonTestID?`. Put action buttons in `footer`.
- **InputField** — `label`, `value`, `onChange?: (e) => void`, `placeholder?`, `error?: string`, `inputType?: 'text' | 'password'`, `disabled?`, `readOnly?`, `copyable?`, `onCopy?`, `leftSlot?`, `rightSlot?`, `testID?`.
- **PasswordField** — `label`, `value`, `onChange?`, `placeholder?`, `error?`, `passwordIndicator?: 'vulnerable' | 'decent' | 'strong' | 'match'`, `infoBox?: string`, `copyable?`, `testID?`.
- **SearchField** — `value`, `onChangeText` (yes, this one is still current), `placeholderText?`, `size?: 'small' | 'medium'`, `testID?`.
- **Form** — `children`, `onSubmit?`, `noValidate?`, `testID?`. Wrap fields here; pair with `useForm` from `@tetherto/pear-apps-lib-ui-react-hooks`.
- **Text** — `children`, `as?: 'p' | 'span'`, `variant?: 'label' | 'labelEmphasized' | 'body' | 'bodyEmphasized' | 'caption'`, `color?`, `numberOfLines?`, `data-testid?`.
- **Title** — `children`, `as?: 'h1' | 'h2' | ... | 'h6'`, `data-testid?`.
- **AlertMessage** — `variant: 'info' | 'warning' | 'error'`, `size: 'small' | 'medium' | 'big'`, `title`, `description`, `actionText?`, `onAction?`, `testID?`, `actionTestId?`.
- **ToggleSwitch** — `checked?`, `onChange?: (b: boolean) => void`, `label?`, `description?`, `disabled?`, `data-testid?`.
- **Checkbox** — same shape as `ToggleSwitch` (uses `data-testid`).
- **Radio** — `options: Array<{value, label?, description?, disabled?}>`, `value?`, `onChange?: (v: string) => void`, `testID?`.
- **SelectField** — `label`, `value?`, `placeholder?`, `onClick?` (opens dropdown), `error?`, `disabled?`, `leftSlot?`, `rightSlot?`, `testID?`.
- **TextArea** — `value`, `onChange?`, `label?`, `placeholder?`, `error?`, `disabled?`, `testID?`.
- **Link** — `children`, `href?`, `isExternal?`, `onClick?`, `data-testid?` (and standard `<a>` attributes).

For components not listed, open `node_modules/@tetherto/pearpass-lib-ui-kit/dist/components/<Name>/types.d.ts`.

### Test IDs — `testID` vs `data-testid`

Always include a test ID on anything a user interacts with (buttons, fields, toggles, dialogs). Which prop depends on the component:

- **`testID`** — components that declare it explicitly: `Dialog` (+ `closeButtonTestID`), `Form`, `InputField`, `PasswordField`, `SearchField`, `SelectField`, `TextArea`, `Radio`, `AlertMessage` (+ `actionTestId`).
- **`data-testid`** — components that extend native HTML and don't redeclare it: `Button`, `ToggleSwitch`, `Checkbox`, `Link`, `Pressable`, `Text`, `Title`.

Rule of thumb: try `testID` first; if TypeScript rejects it, use `data-testid`. When editing an existing file, follow the naming pattern already there (e.g. `createvault-name-v2`, `createvault-discard-v2`).

### Prop naming — modern vs. deprecated (important)

The kit recently renamed several field props. **Use the modern names:**

| Use | Not (deprecated) |
| --- | --- |
| `onChange` (receives `ChangeEvent`) | `onChangeText` (receives string) |
| `placeholder` | `placeholderText` |
| `error` (string) | `errorMessage` + `variant` |

⚠️ **Existing v2 files in this repo (e.g. `CreateVaultModalContentV2`, `CardCreateMasterPasswordV2`) still use the deprecated props.** Don't copy their prop names blindly — use the modern ones in new code. The deprecated props still work for now but will be removed.

**Exception:** `SearchField` still uses `onChangeText` + `placeholderText` — those aren't deprecated there. `testID` is current everywhere.

## Theming

The codebase does **not** use styled-components. The convention is a `createStyles(colors)` factory that returns plain inline-style objects, consumed via `style={styles.foo}`.

**In the component** (reference: `src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx`):

```tsx
import { useTheme } from '@tetherto/pearpass-lib-ui-kit'
import { createStyles } from './styles'

const Component = () => {
  const { theme } = useTheme()
  const styles = createStyles(theme.colors)
  return <div style={styles.card}>…</div>
}
```

**In the companion `styles.ts`** (reference: `src/pages/WelcomePage/CardCreateMasterPasswordV2/styles.ts`):

```ts
import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'
import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'

export const createStyles = (colors: ThemeColors) => ({
  card: {
    background: colors.colorSurfacePrimary,
    border: `1px solid ${colors.colorBorderPrimary}`,
    borderRadius: `${rawTokens.radius8}px`,
    padding: `${rawTokens.spacing24}px`,
    gap: `${rawTokens.spacing12}px`,
  },
})
```

### `rawTokens` — flat, numeric-suffixed keys (not nested)

- Spacing: `spacing2`, `spacing4`, `spacing6`, `spacing8`, `spacing10`, `spacing12`, `spacing16`, `spacing20`, `spacing24`, `spacing32`, `spacing40`, `spacing48` (all `number`, multiply with `${n}px`)
- Radius: `radius8`, `radius16`, `radius20`, `radius26`
- Font size: `fontSize12`, `fontSize14`, `fontSize16`, `fontSize24`, `fontSize28`
- Font family: `fontPrimary` (`"Inter"`), `fontDisplay` (`"Humble Nostalgia"`)
- Weight: `weightRegular` (`"400"`), `weightMedium` (`"500"`)

### `theme.colors` — common keys seen in this repo

`colorSurfacePrimary`, `colorSurfaceHover`, `colorBorderPrimary`, `colorBorderSecondary`, `colorTextPrimary`, `colorTextSecondary`, `colorTextTertiary`, `colorLinkText`. If you need one you haven't seen, inspect the `ThemeColors` type from `@tetherto/pearpass-lib-ui-kit`.

### When hardcoded values are OK

Tokens cover the design-system primitives. Feature-specific layout values (a card's `maxWidth: '500px'`, a one-off `padding: '55px 0'`) are fine as literals — these aren't design tokens. **Rule of thumb:** if the value corresponds to a semantic design decision (spacing step, brand color, radius), it must come from a token.

## Icons

```tsx
import { Add, Download, Folder, OpenInNew } from '@tetherto/pearpass-lib-ui-kit/icons'
```

530 icons, mostly Material Design, with style variants as suffixes: `Filled`, `Outlined`, `Round`, `Sharp`, `Tone` (e.g. `LockFilled`, `InfoOutlined`, `KeyboardArrowRightRound`). If a name has no suffix, it exists as a single variant.

**Commonly used in this repo** (check these first before browsing):

- **Actions:** `Add`, `Download`, `ContentCopy`, `Share`, `Send`, `Swap`, `UploadFileFilled`
- **Folder / organization:** `Folder`, `FolderOpen`, `FolderCopy`, `CreateNewFolder`, `Layers`
- **Navigation / arrows:** `KeyboardArrowRightFilled`, `KeyboardArrowRightRound`, `KeyboardArrowLeftFilled`, `ExpandMore`
- **Status / feedback:** `InfoOutlined`, `ReportProblemRound`, `ErrorFilled`, `Check`, `DoneAll`, `CheckBox`
- **Security:** `LockFilled`, `Key`, `SecurityFilled`, `Fingerprint`, `TwoFactorAuthenticationFilled`
- **External / misc:** `ImportOutlined`, `OpenInNew`

**Discovering others:** `ls node_modules/@tetherto/pearpass-lib-ui-kit/dist/icons/components/ | grep -i <keyword>` — names are PascalCase, grep is case-insensitive friendly.

## Anti-patterns to avoid

When editing a v2 file or creating new UI, do **not**:

- Add a new file under `src/lib-react-components/components/` for a Button/Input/Modal variant.
- Import `PearPassInputField`, `PearPassPasswordField`, or any `Button*` variant from `src/lib-react-components/` into any new file — swap to the kit equivalents.
- Add a `V2` suffix to a net-new file that has no v1 sibling. Suffix is only for migration coexistence.
- Use native `<button>`, `<input>`, or `<dialog>` in production code (tests are fine).
- Hardcode hex colors, brand radii, or design-system spacing — use `rawTokens` and `theme.colors`. (Feature-specific layout literals like `maxWidth: '500px'` are fine.)
- Add new SVG files under `src/` when the kit's icons subpath covers them.
- Introduce `styled-components` — the convention is `createStyles(colors)` returning plain style objects.

When editing a v1 file and you spot these patterns, mention them to the user but **don't do drive-by rewrites** unless asked — v1 migration is scoped work.

## When the kit truly lacks something

1. Confirm by grepping `node_modules/@tetherto/pearpass-lib-ui-kit/dist/components/` for the concept.
2. Check if a composition of existing kit primitives covers it (e.g. `Pressable` + `Text` + tokens).
3. If still missing, surface it to the user: "The kit doesn't export X — options are (a) compose from Y + Z, (b) request X be added upstream, (c) temporary local component. Which?" Do not silently create (c).


================================================
FILE: .github/actions/authorize-pr/action.yml
================================================
name: Authorize PR
description: >
  Security gate for pull_request_target workflows only. Checks actor
  write permission, author association, and label presence for external
  fork PRs. Strips the gate label on synchronize events from non-writers
  to force re-review after new commits.

inputs:
  label:
    description: "Label name required for external fork PRs (default: verify)"
    required: false
    default: "verify"
  github-token:
    description: "GitHub token for permission check and label API calls"
    required: true

outputs:
  allowed:
    description: "true when the workflow is authorized to proceed"
    value: ${{ steps.check.outputs.allowed }}

runs:
  using: composite
  steps:
    # -----------------------------------------------------------------
    # 1. Resolve actor permission level
    # -----------------------------------------------------------------
    - name: Check actor write permission
      id: perm
      uses: scherermichael-oss/action-has-permission@136e061bfe093832d87f090dd768e14e27a740d3 # 1.0.6
      with:
        required-permission: write
      env:
        GITHUB_TOKEN: ${{ inputs.github-token }}

    # -----------------------------------------------------------------
    # 2. Decide whether the run is authorized
    # -----------------------------------------------------------------
    - name: Check authorization
      id: check
      shell: bash
      env:
        EVENT: ${{ github.event_name }}
        ACTION: ${{ github.event.action }}
        HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
        BASE_REPO: ${{ github.repository }}
        AUTHOR_ASSOC: ${{ github.event.pull_request.author_association }}
        HAS_WRITE: ${{ steps.perm.outputs.has-permission }}
        LABEL_NAME: ${{ inputs.label }}
        LABELS_JSON: ${{ toJSON(github.event.pull_request.labels.*.name) }}
      run: |
        # Non-PR events (push, workflow_dispatch, workflow_call) are always trusted
        if [ "$EVENT" != "pull_request_target" ]; then
          echo "::notice::Non-PR event ($EVENT) — authorized"
          echo "allowed=true" >> "$GITHUB_OUTPUT"
          exit 0
        fi

        # Same-repo PRs are always trusted
        if [ "$HEAD_REPO" = "$BASE_REPO" ]; then
          echo "::notice::Same-repo PR — authorized"
          echo "allowed=true" >> "$GITHUB_OUTPUT"
          exit 0
        fi

        echo "::notice::Actor '$GITHUB_ACTOR' write-or-higher: $HAS_WRITE"

        # Actor with write (or higher) is trusted even from a fork
        if [ "$HAS_WRITE" = "1" ]; then
          echo "::notice::Actor has write-or-higher permission — authorized"
          echo "allowed=true" >> "$GITHUB_OUTPUT"
          exit 0
        fi

        # Org members / collaborators are trusted even from forks
        if [[ "$AUTHOR_ASSOC" =~ ^(MEMBER|OWNER|COLLABORATOR)$ ]]; then
          echo "::notice::Trusted author ($AUTHOR_ASSOC) — authorized"
          echo "allowed=true" >> "$GITHUB_OUTPUT"
          exit 0
        fi

        # External fork: require the gate label
        HAS_LABEL=$(echo "$LABELS_JSON" | jq -r --arg l "$LABEL_NAME" \
          'if . == null then "false" elif any(. == $l) then "true" else "false" end')

        # On synchronize from a non-writer, reject even if the label is still
        # present. The label was granted for the previous commit; new unreviewed
        # code must not run with secrets. The strip step below removes the label
        # so that a re-review + re-label is required for the next run.
        if [ "$ACTION" = "synchronize" ]; then
          echo "::warning::External fork synchronize from non-writer — blocking until re-review"
          echo "allowed=false" >> "$GITHUB_OUTPUT"
          exit 0
        fi

        if [ "$HAS_LABEL" = "true" ]; then
          echo "::notice::Fork PR with '$LABEL_NAME' label — authorized"
          echo "allowed=true" >> "$GITHUB_OUTPUT"
        else
          echo "::warning::External fork PR without '$LABEL_NAME' label — skipping"
          echo "::warning::A team member must review the code and apply the '$LABEL_NAME' label"
          echo "allowed=false" >> "$GITHUB_OUTPUT"
        fi

    # -----------------------------------------------------------------
    # 3. Strip the gate label on synchronize from non-writers
    #    This forces a maintainer to re-review before the NEXT run.
    # -----------------------------------------------------------------
    - name: Strip label on new pushes from non-writers
      if: |
        steps.perm.outputs.has-permission != '1' &&
        github.event.action == 'synchronize' &&
        github.event.pull_request.head.repo.full_name != github.repository
      shell: bash
      env:
        GH_TOKEN: ${{ inputs.github-token }}
        PR_NUMBER: ${{ github.event.pull_request.number }}
        LABEL: ${{ inputs.label }}
      run: |
        gh api -X DELETE \
          "repos/${{ github.repository }}/issues/${PR_NUMBER}/labels/${LABEL}" \
          2>/dev/null || true
        echo "::warning::Removed '${LABEL}' label — new commits from non-writer. Re-review required."


================================================
FILE: .github/pull_request_template.md
================================================
### Requirements
<!-- List the requirements for this PR -->

### Changes
<!-- Summarize the changes introduced in this PR -->

### Testing Notes
<!-- How did you test it? -->

### Things reviewers should pay attention to
<!-- Highlight anything specific you want reviewers to focus on -->

### Screenshots/Recordings
<!-- Add screenshots or screen recordings if applicable -->

### dependencies
<!-- List any dependent work items or PRs -->


================================================
FILE: .github/workflows/ci-pr.yml
================================================
name: PR CI

on:
  pull_request_target:
    types: [opened, reopened, synchronize, labeled]
    branches: [main]

permissions:
  contents: read

concurrency:
  group: pr-ci-${{ github.event.pull_request.number }}
  cancel-in-progress: true

jobs:
  authorize:
    if: github.event.action != 'labeled' || github.event.label.name == 'verify'
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      issues: write
    outputs:
      allowed: ${{ steps.auth.outputs.allowed }}

    steps:
      - name: Checkout workflow code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1

      - name: Authorize PR execution
        id: auth
        uses: ./.github/actions/authorize-pr
        with:
          github-token: ${{ github.token }}

      - name: Summarize skipped run
        if: steps.auth.outputs.allowed != 'true'
        run: |
          echo "PR CI is limited to members, collaborators, or external PRs labeled 'verify' (re-review required after each push)." >> "$GITHUB_STEP_SUMMARY"

  ci:
    needs: authorize
    if: needs.authorize.outputs.allowed == 'true'
    uses: ./.github/workflows/ci-reusable.yml
    with:
      checkout_ref: ${{ github.event.pull_request.head.sha }}
      checkout_repository: ${{ github.event.pull_request.head.repo.full_name }}


================================================
FILE: .github/workflows/ci-push.yml
================================================
name: Push CI

on:
  push:
    branches: [main]

permissions:
  contents: read

concurrency:
  group: push-ci-${{ github.ref }}
  cancel-in-progress: true

jobs:
  ci:
    uses: ./.github/workflows/ci-reusable.yml
    with:
      checkout_ref: ${{ github.sha }}
      checkout_repository: ${{ github.repository }}


================================================
FILE: .github/workflows/ci-reusable.yml
================================================
name: Reusable CI

on:
  workflow_call:
    inputs:
      checkout_ref:
        description: Git ref or SHA to validate
        required: true
        type: string
      checkout_repository:
        description: Repository that contains the ref to validate
        required: true
        type: string

permissions:
  contents: read

jobs:
  quality:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
          ref: ${{ inputs.checkout_ref }}
          repository: ${{ inputs.checkout_repository }}
          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version-file: .nvmrc
          cache: npm

      - name: Install dependencies
        run: npm ci --legacy-peer-deps

      - name: Compile locale files
        run: |
          npm run lingui:extract
          npm run lingui:compile

      - name: Run ESLint
        run: npm run lint

      - name: Run TypeScript typecheck
        run: npx tsc --noEmit

      - name: Run tests
        run: npm test


================================================
FILE: .gitignore
================================================
node_modules

src/locales

.yalc
yalc.lock
pass

#ignore IntelliJ or other Jetbrains files
.idea

# Generated log files
logs/

.env

.DS_Store
assets/.DS_Store

dist

# Build output
build/
*.AppImage
*.flatpak
*.snap

# Snapcraft build artifacts
.snapcraft.yaml.swp

# Flatpak build artifacts
flatpak/.flatpak-builder/
flatpak/build-dir/
flatpak/repo/
flatpak/icons/

# Editor swap files
*.swp
*.swo
*~

# VSCode
.vscode/

# Test coverage
coverage/

# TypeScript build info
*.tsbuildinfo

# bin.tar.gz generated by bare-build
*.bin.tar.gz
# Snapcraft
.snapcraft.yaml.swp

# Flatpak
flatpak/*.flatpak
flatpak/*.tar.gz
flatpak/build-dir/
flatpak/repo/
flatpak/.flatpak-builder/
.flatpak-builder/

# Appling (AppImage builds)
appling/*.AppImage
appling/node_modules/

# test files
test-results

out/

src/PearPass

================================================
FILE: .husky/pre-commit
================================================
npm run lint
npm run build:app


================================================
FILE: .npmrc
================================================
foreground-scripts=true
legacy-peer-deps=true


================================================
FILE: .nvmrc
================================================
22.12.0

================================================
FILE: AGENTS.md
================================================
# UI conventions for pearpass-app-desktop-tether

This is the Electron desktop app for PearPass. It's written in React + TypeScript. UI is built on the shared component library `@tetherto/pearpass-lib-ui-kit`.

This document is for **anyone contributing UI** to the repo — new hires, current engineers, and AI coding assistants (Claude Code, Cursor, Codex, etc.). It captures the component catalog, styling conventions, file-naming rules, and patterns we use when building UI in this app. Read it once before your first UI change; keep it open when you're in doubt.

## Design-system state — `DESKTOP_DESIGN_VERSION === 2`

Which design renders at runtime is controlled by the `DESKTOP_DESIGN_VERSION` flag from `@tetherto/pearpass-lib-constants` (resolved in [electron/runtime-config.cjs](electron/runtime-config.cjs) and exposed via `isV2()` in [src/utils/designVersion.js](src/utils/designVersion.js)).

**Currently `DESKTOP_DESIGN_VERSION === 2`**, so kit components are the right choice for all new UI work. Legacy v1 components still live under [src/lib-react-components/](src/lib-react-components/) and are rendered whenever `isV2()` returns `false` — do not delete them as part of v2 work.

## File naming: when to use the `V2` suffix

The `V2` suffix is a **coexistence marker**, not a design marker. Use it only when a v1 sibling already exists:

- **A v1 file already exists** for this component/screen → create a new file with the `V2` suffix next to it (e.g. v1 `CreateVaultModalContent.jsx` → new `CreateVaultModalContentV2.tsx`). Both live in the tree during migration; the branching happens at the call site via `isV2()`.
- **No v1 equivalent exists** (net-new feature, net-new component) → create the file with its natural name, **no `V2` suffix**. The codebase is already v2 by default, so the suffix would just be noise.

Before creating a file, glob the directory for the base name without the suffix. If nothing comes up, skip the suffix.

## Golden rules

1. **Check the catalog below before creating any component.** If it exists in the kit, use it — never wrap or reimplement.
2. **All new UI goes through the kit.** Any new `.tsx`/`.jsx` file — suffixed or not — must import from `@tetherto/pearpass-lib-ui-kit`, not from [src/lib-react-components/](src/lib-react-components/).
3. **Never add variants under [src/lib-react-components/components/](src/lib-react-components/components/)** (`ButtonThin`, `ButtonPrimary`, `ButtonRoundIcon`, `PearPassInputField`, etc.). That tree is legacy; the kit's `Button` takes variants.
4. **Style with tokens.** Use `useTheme()` + `rawTokens`. No hardcoded hex colors or px spacing.
5. **Icons come from the kit.** `@tetherto/pearpass-lib-ui-kit/icons` has 530 icons. Do not add new SVGs under `src/`.
6. **If the kit lacks something you need, stop and ask the user.** Don't silently roll a custom component.

## Component catalog (31 components)

Import pattern: `import { ComponentName } from '@tetherto/pearpass-lib-ui-kit'`

### Actions
- `Button` — all CTAs. Takes variants; use instead of `ButtonThin`, `ButtonPrimary`, `ButtonSecondary`, `ButtonRoundIcon`, `ButtonLittle`, `ButtonFilter`, `ButtonFolder`, `ButtonRadio`, `ButtonSingleInput`, `ButtonCreate`.
- `Pressable` — low-level pressable wrapper for custom interactive elements.
- `Link` — text links.

### Forms
- `Form` — form wrapper with validation.
- `InputField` — text input. Use instead of `PearPassInputField`.
- `PasswordField` — password input with strength indicator. Use instead of `PearPassPasswordField` / `PearPassPasswordFieldV2`.
- `SearchField` — search input.
- `SelectField` — dropdown select.
- `Dropdown` — low-level dropdown primitive.
- `TextArea` — multiline text input.
- `Checkbox`
- `Radio`
- `ToggleSwitch`
- `Slider`
- `DateField`
- `AttachmentField`
- `UploadField`
- `MultiSlotInput` — split inputs for OTP / recovery codes. Use instead of custom `OtpCodeField`.
- `FieldError` — inline field validation error.

### Typography
- `Title` — headings.
- `Text` — body text.

### Layout / surfaces
- `Dialog` — modals. Use instead of custom `ModalContent` wrappers.
- `NativeBottomSheet` — bottom sheets.
- `PageHeader` — top-of-page header.
- `ItemScreenHeader` — item-detail header.
- `Breadcrumb`
- `ListItem`
- `NavbarListItem`
- `ContextMenu`

### Feedback
- `AlertMessage` — inline alerts. Reference: [src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx](src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx).
- `Snackbar` — toast-style notifications.
- `PasswordIndicator` — standalone password strength meter.

### Type exports
- `ThemeColors`, `Theme`, `ThemeType`, `RawTokens`
- `PasswordIndicatorVariant` — `'vulnerable' | 'decent' | 'strong'`

Import types with `import type { ... } from '@tetherto/pearpass-lib-ui-kit'`.

## Component props (15 most-used)

Required props have no `?`. **Always include a test ID on interactive components** — see the "Test IDs" section below for which prop to use per component.

- **Button** — `variant: 'primary' | 'secondary' | 'tertiary' | 'destructive'`, `size: 'small' | 'medium'`, `onClick`, `children`, `type?: 'button' | 'submit'`, `disabled?`, `isLoading?`, `iconBefore?`, `iconAfter?`, `data-testid?`. Icon-only buttons need `aria-label`.
- **Dialog** — `title` (ReactNode), `onClose?`, `open?`, `footer?`, `children?`, `closeOnOutsideClick?`, `hideCloseButton?`, `trapFocus?`, `initialFocusRef?`, `testID?`, `closeButtonTestID?`. Put action buttons in `footer`.
- **InputField** — `label`, `value`, `onChange?: (e) => void`, `placeholder?`, `error?: string`, `inputType?: 'text' | 'password'`, `disabled?`, `readOnly?`, `copyable?`, `onCopy?`, `leftSlot?`, `rightSlot?`, `testID?`.
- **PasswordField** — `label`, `value`, `onChange?`, `placeholder?`, `error?`, `passwordIndicator?: 'vulnerable' | 'decent' | 'strong' | 'match'`, `infoBox?: string`, `copyable?`, `testID?`.
- **SearchField** — `value`, `onChangeText` (yes, this one is still current), `placeholderText?`, `size?: 'small' | 'medium'`, `testID?`.
- **Form** — `children`, `onSubmit?`, `noValidate?`, `testID?`. Wrap fields here; pair with `useForm` from `@tetherto/pear-apps-lib-ui-react-hooks`.
- **Text** — `children`, `as?: 'p' | 'span'`, `variant?: 'label' | 'labelEmphasized' | 'body' | 'bodyEmphasized' | 'caption'`, `color?`, `numberOfLines?`, `data-testid?`.
- **Title** — `children`, `as?: 'h1' | 'h2' | ... | 'h6'`, `data-testid?`.
- **AlertMessage** — `variant: 'info' | 'warning' | 'error'`, `size: 'small' | 'medium' | 'big'`, `title`, `description`, `actionText?`, `onAction?`, `testID?`, `actionTestId?`.
- **ToggleSwitch** — `checked?`, `onChange?: (b: boolean) => void`, `label?`, `description?`, `disabled?`, `data-testid?`.
- **Checkbox** — same shape as `ToggleSwitch` (uses `data-testid`).
- **Radio** — `options: Array<{value, label?, description?, disabled?}>`, `value?`, `onChange?: (v: string) => void`, `testID?`.
- **SelectField** — `label`, `value?`, `placeholder?`, `onClick?` (opens dropdown), `error?`, `disabled?`, `leftSlot?`, `rightSlot?`, `testID?`.
- **TextArea** — `value`, `onChange?`, `label?`, `placeholder?`, `error?`, `disabled?`, `testID?`.
- **Link** — `children`, `href?`, `isExternal?`, `onClick?`, `data-testid?` (and standard `<a>` attributes).

For components not listed, open `node_modules/@tetherto/pearpass-lib-ui-kit/dist/components/<Name>/types.d.ts`.

### Test IDs — `testID` vs `data-testid`

Always include a test ID on anything a user interacts with (buttons, fields, toggles, dialogs). Which prop depends on the component:

- **`testID`** — components that declare it explicitly: `Dialog` (+ `closeButtonTestID`), `Form`, `InputField`, `PasswordField`, `SearchField`, `SelectField`, `TextArea`, `Radio`, `AlertMessage` (+ `actionTestId`).
- **`data-testid`** — components that extend native HTML and don't redeclare it: `Button`, `ToggleSwitch`, `Checkbox`, `Link`, `Pressable`, `Text`, `Title`.

Rule of thumb: try `testID` first; if TypeScript rejects it, use `data-testid`. When editing an existing file, follow the naming pattern already there (e.g. `createvault-name-v2`, `createvault-discard-v2`).

### Prop naming — modern vs. deprecated (important)

The kit recently renamed several field props. **Use the modern names:**

| Use | Not (deprecated) |
| --- | --- |
| `onChange` (receives `ChangeEvent`) | `onChangeText` (receives string) |
| `placeholder` | `placeholderText` |
| `error` (string) | `errorMessage` + `variant` |

⚠️ **Existing v2 files in this repo (e.g. `CreateVaultModalContentV2`, `CardCreateMasterPasswordV2`) still use the deprecated props.** Don't copy their prop names blindly — use the modern ones in new code. The deprecated props still work for now but will be removed.

**Exception:** `SearchField` still uses `onChangeText` + `placeholderText` — those aren't deprecated there. `testID` is current everywhere.

## Theming

The codebase does **not** use styled-components. The convention is a `createStyles(colors)` factory that returns plain inline-style objects, consumed via `style={styles.foo}`.

**In the component** ([reference](src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx)):

```tsx
import { useTheme } from '@tetherto/pearpass-lib-ui-kit'
import { createStyles } from './styles'

const Component = () => {
  const { theme } = useTheme()
  const styles = createStyles(theme.colors)
  return <div style={styles.card}>…</div>
}
```

**In the companion `styles.ts`** ([reference](src/pages/WelcomePage/CardCreateMasterPasswordV2/styles.ts)):

```ts
import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'
import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'

export const createStyles = (colors: ThemeColors) => ({
  card: {
    background: colors.colorSurfacePrimary,
    border: `1px solid ${colors.colorBorderPrimary}`,
    borderRadius: `${rawTokens.radius8}px`,
    padding: `${rawTokens.spacing24}px`,
    gap: `${rawTokens.spacing12}px`,
  },
})
```

### `rawTokens` — flat, numeric-suffixed keys (not nested)

- Spacing: `spacing2`, `spacing4`, `spacing6`, `spacing8`, `spacing10`, `spacing12`, `spacing16`, `spacing20`, `spacing24`, `spacing32`, `spacing40`, `spacing48` (all `number`, multiply with `${n}px`)
- Radius: `radius8`, `radius16`, `radius20`, `radius26`
- Font size: `fontSize12`, `fontSize14`, `fontSize16`, `fontSize24`, `fontSize28`
- Font family: `fontPrimary` (`"Inter"`), `fontDisplay` (`"Humble Nostalgia"`)
- Weight: `weightRegular` (`"400"`), `weightMedium` (`"500"`)

### `theme.colors` — common keys seen in this repo

`colorSurfacePrimary`, `colorSurfaceHover`, `colorBorderPrimary`, `colorBorderSecondary`, `colorTextPrimary`, `colorTextSecondary`, `colorTextTertiary`, `colorLinkText`. If you need one you haven't seen, inspect the `ThemeColors` type from `@tetherto/pearpass-lib-ui-kit`.

### When hardcoded values are OK

Tokens cover the design-system primitives. Feature-specific layout values (a card's `maxWidth: '500px'`, a one-off `padding: '55px 0'`) are fine as literals — these aren't design tokens. **Rule of thumb:** if the value corresponds to a semantic design decision (spacing step, brand color, radius), it must come from a token.

## Icons

```tsx
import { Add, Download, Folder, OpenInNew } from '@tetherto/pearpass-lib-ui-kit/icons'
```

530 icons, mostly Material Design, with style variants as suffixes: `Filled`, `Outlined`, `Round`, `Sharp`, `Tone` (e.g. `LockFilled`, `InfoOutlined`, `KeyboardArrowRightRound`). If a name has no suffix, it exists as a single variant.

**Commonly used in this repo** (check these first before browsing):

- **Actions:** `Add`, `Download`, `ContentCopy`, `Share`, `Send`, `Swap`, `UploadFileFilled`
- **Folder / organization:** `Folder`, `FolderOpen`, `FolderCopy`, `CreateNewFolder`, `Layers`
- **Navigation / arrows:** `KeyboardArrowRightFilled`, `KeyboardArrowRightRound`, `KeyboardArrowLeftFilled`, `ExpandMore`
- **Status / feedback:** `InfoOutlined`, `ReportProblemRound`, `ErrorFilled`, `Check`, `DoneAll`, `CheckBox`
- **Security:** `LockFilled`, `Key`, `SecurityFilled`, `Fingerprint`, `TwoFactorAuthenticationFilled`
- **External / misc:** `ImportOutlined`, `OpenInNew`

**Discovering others:** `ls node_modules/@tetherto/pearpass-lib-ui-kit/dist/icons/components/ | grep -i <keyword>` — names are PascalCase, grep is case-insensitive friendly.

## Anti-patterns to avoid

When editing a v2 file or creating new UI, do **not**:

- Add a new file under [src/lib-react-components/components/](src/lib-react-components/components/) for a Button/Input/Modal variant.
- Import `PearPassInputField`, `PearPassPasswordField`, or any `Button*` variant from `src/lib-react-components/` into any new file — swap to the kit equivalents.
- Add a `V2` suffix to a net-new file that has no v1 sibling. Suffix is only for migration coexistence.
- Use native `<button>`, `<input>`, or `<dialog>` in production code (tests are fine).
- Hardcode hex colors, brand radii, or design-system spacing — use `rawTokens` and `theme.colors`. (Feature-specific layout literals like `maxWidth: '500px'` are fine.)
- Add new SVG files under `src/` when the kit's icons subpath covers them.
- Introduce `styled-components` — the convention is `createStyles(colors)` returning plain style objects.

When editing a v1 file and you spot these patterns, mention them to the user but **don't do drive-by rewrites** unless asked — v1 migration is scoped work.

## When the kit truly lacks something

1. Confirm by grepping `node_modules/@tetherto/pearpass-lib-ui-kit/dist/components/` for the concept.
2. Check if a composition of existing kit primitives covers it (e.g. `Pressable` + `Text` + tokens).
3. If still missing, surface it to the user: "The kit doesn't export X — options are (a) compose from Y + Z, (b) request X be added upstream, (c) temporary local component. Which?" Do not silently create (c).


================================================
FILE: CLAUDE.md
================================================
# pearpass-app-desktop-tether

## UI: always use `@tetherto/pearpass-lib-ui-kit`

UI is built on `@tetherto/pearpass-lib-ui-kit`. All new UI — v2 redesigns of existing screens and net-new features — **must** use components from this kit. Do not roll custom buttons, inputs, modals, typography, or icons.

**Full guide:** the component catalog, props, styling conventions, and reference files live in [AGENTS.md](AGENTS.md) (canonical contributor doc, also loaded by Codex/Cursor). Claude Code's skill trigger loads the same content via [.claude/skills/use-ui-kit/SKILL.md](.claude/skills/use-ui-kit/SKILL.md) whenever you're editing `.tsx`/`.jsx` files.

**Hard rules:**
- If a component exists in the kit, use it. If it does not, raise it with the team before creating a local alternative.
- Do **not** add new files under [src/lib-react-components/components/](src/lib-react-components/components/) — that tree is legacy (v1) and should not grow.
- Style with `useTheme()` + `rawTokens` from the kit. No hardcoded hex colors or design-system spacing.
- Import icons from `@tetherto/pearpass-lib-ui-kit/icons` (530 available). Do not add new SVGs under `src/`.

**When the kit applies:** the active design is controlled by the `DESKTOP_DESIGN_VERSION` flag from `@tetherto/pearpass-lib-constants`. Currently `DESKTOP_DESIGN_VERSION === 2`, so kit components are the default for all new UI.

**`V2` suffix is for coexistence only.** If a v1 file already exists for the component you're creating, add the `V2` suffix (e.g. `CardCreateMasterPasswordV2` alongside legacy `CardCreateMasterPassword`). If the component is net-new with no v1 sibling, use its natural name — **no suffix**.

## React: `useEffect` dependency safety

Before adding a function to a `useEffect` dependency array, verify it is stable (memoized with `useCallback`, a `useRef`-held ref, or a module-level constant). Un-memoized functions are recreated on every render and will cause the effect to fire on every render, producing an infinite loop. If the function is not memoized: wrap it in `useCallback` if it lives in this repository, or omit it from the dependency array if it comes from an external package/repository (where you cannot control memoization).


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to PearPass

The source is open to use as per the [LICENSE](./LICENSE).
 
Be aware that **any pull-request or issue may be closed without explanation**.

## Issues

- Feature requests are welcome. 
- For bug reports, please provide a failing test case or steps to reproduce. 

## Pull Request

Newer contributors are encouraged to start small and simple. Tests - both failing and passing - are very helpful.

- Keep pull requests focused on a single feature or bug fix
- Provide a clear description of changes
- Ensure code passes linting: `npm run lint`
- Ensure tests are passing: `npm test`
  - except, of course, any added failing tests


## License

By contributing, you agree that your contributions will be licensed under the project [LICENSE](./LICENSE).


================================================
FILE: LICENSE.md
================================================
# License

This project is licensed under the Apache License, Version 2.0.
See below for the full license text.

## Apache License

_Version 2.0, January 2004_  
_&lt;<http://www.apache.org/licenses/>&gt;_

### Terms and Conditions for use, reproduction, and distribution

#### 1. Definitions

“License” shall mean the terms and conditions for use, reproduction, and
distribution as defined by Sections 1 through 9 of this document.

“Licensor” shall mean the copyright owner or entity authorized by the copyright
owner that is granting the License.

“Legal Entity” shall mean the union of the acting entity and all other entities
that control, are controlled by, or are under common control with that entity.
For the purposes of this definition, “control” means **(i)** the power, direct or
indirect, to cause the direction or management of such entity, whether by
contract or otherwise, or **(ii)** ownership of fifty percent (50%) or more of the
outstanding shares, or **(iii)** beneficial ownership of such entity.

“You” (or “Your”) shall mean an individual or Legal Entity exercising
permissions granted by this License.

“Source” form shall mean the preferred form for making modifications, including
but not limited to software source code, documentation source, and configuration
files.

“Object” form shall mean any form resulting from mechanical transformation or
translation of a Source form, including but not limited to compiled object code,
generated documentation, and conversions to other media types.

“Work” shall mean the work of authorship, whether in Source or Object form, made
available under the License, as indicated by a copyright notice that is included
in or attached to the work (an example is provided in the Appendix below).

“Derivative Works” shall mean any work, whether in Source or Object form, that
is based on (or derived from) the Work and for which the editorial revisions,
annotations, elaborations, or other modifications represent, as a whole, an
original work of authorship. For the purposes of this License, Derivative Works
shall not include works that remain separable from, or merely link (or bind by
name) to the interfaces of, the Work and Derivative Works thereof.

“Contribution” shall mean any work of authorship, including the original version
of the Work and any modifications or additions to that Work or Derivative Works
thereof, that is intentionally submitted to Licensor for inclusion in the Work
by the copyright owner or by an individual or Legal Entity authorized to submit
on behalf of the copyright owner. For the purposes of this definition,
“submitted” means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems, and
issue tracking systems that are managed by, or on behalf of, the Licensor for
the purpose of discussing and improving the Work, but excluding communication
that is conspicuously marked or otherwise designated in writing by the copyright
owner as “Not a Contribution.”

“Contributor” shall mean Licensor and any individual or Legal Entity on behalf
of whom a Contribution has been received by Licensor and subsequently
incorporated within the Work.

#### 2. Grant of Copyright License

Subject to the terms and conditions of this License, each Contributor hereby
grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
irrevocable copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the Work and such
Derivative Works in Source or Object form.

#### 3. Grant of Patent License

Subject to the terms and conditions of this License, each Contributor hereby
grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
irrevocable (except as stated in this section) patent license to make, have
made, use, offer to sell, sell, import, and otherwise transfer the Work, where
such license applies only to those patent claims licensable by such Contributor
that are necessarily infringed by their Contribution(s) alone or by combination
of their Contribution(s) with the Work to which such Contribution(s) was
submitted. If You institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work or a
Contribution incorporated within the Work constitutes direct or contributory
patent infringement, then any patent licenses granted to You under this License
for that Work shall terminate as of the date such litigation is filed.

#### 4. Redistribution

You may reproduce and distribute copies of the Work or Derivative Works thereof
in any medium, with or without modifications, and in Source or Object form,
provided that You meet the following conditions:

* **(a)** You must give any other recipients of the Work or Derivative Works a copy of
this License; and
* **(b)** You must cause any modified files to carry prominent notices stating that You
changed the files; and
* **(c)** You must retain, in the Source form of any Derivative Works that You distribute,
all copyright, patent, trademark, and attribution notices from the Source form
of the Work, excluding those notices that do not pertain to any part of the
Derivative Works; and
* **(d)** If the Work includes a “NOTICE” text file as part of its distribution, then any
Derivative Works that You distribute must include a readable copy of the
attribution notices contained within such NOTICE file, excluding those notices
that do not pertain to any part of the Derivative Works, in at least one of the
following places: within a NOTICE text file distributed as part of the
Derivative Works; within the Source form or documentation, if provided along
with the Derivative Works; or, within a display generated by the Derivative
Works, if and wherever such third-party notices normally appear. The contents of
the NOTICE file are for informational purposes only and do not modify the
License. You may add Your own attribution notices within Derivative Works that
You distribute, alongside or as an addendum to the NOTICE text from the Work,
provided that such additional attribution notices cannot be construed as
modifying the License.

You may add Your own copyright statement to Your modifications and may provide
additional or different license terms and conditions for use, reproduction, or
distribution of Your modifications, or for any such Derivative Works as a whole,
provided Your use, reproduction, and distribution of the Work otherwise complies
with the conditions stated in this License.

#### 5. Submission of Contributions

Unless You explicitly state otherwise, any Contribution intentionally submitted
for inclusion in the Work by You to the Licensor shall be under the terms and
conditions of this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify the terms of
any separate license agreement you may have executed with Licensor regarding
such Contributions.

#### 6. Trademarks

This License does not grant permission to use the trade names, trademarks,
service marks, or product names of the Licensor, except as required for
reasonable and customary use in describing the origin of the Work and
reproducing the content of the NOTICE file.

#### 7. Disclaimer of Warranty

Unless required by applicable law or agreed to in writing, Licensor provides the
Work (and each Contributor provides its Contributions) on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied,
including, without limitation, any warranties or conditions of TITLE,
NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are
solely responsible for determining the appropriateness of using or
redistributing the Work and assume any risks associated with Your exercise of
permissions under this License.

#### 8. Limitation of Liability

In no event and under no legal theory, whether in tort (including negligence),
contract, or otherwise, unless required by applicable law (such as deliberate
and grossly negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special, incidental,
or consequential damages of any character arising as a result of this License or
out of the use or inability to use the Work (including but not limited to
damages for loss of goodwill, work stoppage, computer failure or malfunction, or
any and all other commercial damages or losses), even if such Contributor has
been advised of the possibility of such damages.

#### 9. Accepting Warranty or Additional Liability

While redistributing the Work or Derivative Works thereof, You may choose to
offer, and charge a fee for, acceptance of support, warranty, indemnity, or
other liability obligations and/or rights consistent with this License. However,
in accepting such obligations, You may act only on Your own behalf and on Your
sole responsibility, not on behalf of any other Contributor, and only if You
agree to indemnify, defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason of your
accepting any such warranty or additional liability.

_END OF TERMS AND CONDITIONS_

### APPENDIX: How to apply the Apache License to your work

To apply the Apache License to your work, attach the following boilerplate
notice, with the fields enclosed by brackets `[]` replaced with your own
identifying information. (Don't include the brackets!) The text should be
enclosed in the appropriate comment syntax for the file format. We also
recommend that a file or class name and description of purpose be included on
the same “printed page” as the copyright notice for easier identification within
third-party archives.

Copyright 2026 Tether Inc

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

================================================
FILE: NOTICE.md
================================================
Copyright 2026 Tether Inc

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

================================================
FILE: README.md
================================================
<p align="center">
  <img src="assets/images/logo.png" alt="Pearpass logo" width="264"/>
</p>

# PearPass Desktop

> The desktop app for PearPass, an open-source, end-to-end encrypted password and identity manager built on Pear Runtime.

---

## Table of Contents

- [Introduction](#introduction)
- [Features](#features)
- [Installation](#installation)
- [Usage Examples](#usage-examples)
- [Logging](#logging)
- [Testing](#testing)
- [Staging to Dev](#staging-to-dev)
- [Workspace Dependencies](#workspace-dependencies)
- [Dependencies](#dependencies)
- [Related Projects](#related-projects)
- [Contributing](#contributing)
- [License](#license)

---

## Introduction

PearPass is an open-source, privacy-first password and identity manager that gives you full control over your sensitive information. It makes storing and managing your credentials simple, secure, and private. PearPass encrypts and stores all data locally on your device.

Unlike traditional password managers that rely on centralized servers, PearPass is built on [Pear Runtime](https://pears.com/) and uses peer-to-peer technology to sync your credentials directly between your devices, ensuring they remain private, secure, and always under your control.

---

## Features

- **Encrypted-at-rest storage** — PearPass encrypts passwords, credit cards, secure notes, and custom fields before writing them to disk.
- **Cross-device sync** — PearPass syncs credentials directly between your devices using Pear Runtime, with no central server.
- **Offline access** — Access your vault anytime, even without a network connection.
- **Password health** — Analyse password strength and identify weak passwords.
- **Random password generator** — Generate strong, unique passwords.
- **Multi-platform** — Runs on macOS, Linux, and Windows. PearPass is also available on [mobile](https://github.com/tetherto/pearpass-app-mobile) and as a [browser extension](https://github.com/tetherto/pearpass-app-browser-extension).

---

## Installation

### Prerequisites

- **Node.js** — check the required version in `.nvmrc` and verify with:

```bash
node --version
```

- **Pear Runtime** — [Installation guide](https://docs.pears.com/guide/getting-started.html).

### Steps

```bash
# 1. Clone the repository
git clone git@github.com:tetherto/pearpass-app-desktop.git

# 2. Go to the cloned directory
cd pearpass-app-desktop

# 3. Install dependencies
npm install

# 4. Generate translation keys
npm run build

# 5. Start the development app
npm run dev
```

---

## Usage Examples

Visit the official PearPass documentation for step-by-step guides on setup, vault management, syncing across devices, browser extension usage, and all other PearPass features:

**[docs.pass.pears.com](https://docs.pass.pears.com)**

> ⚠️ Intel Mac Support: Intel-based Mac builds are deprecated and provided without official support or active testing. We're keeping them available for now, but use them at your own risk. If you run into issues, feel free to open a ticket. While we can't guarantee a fix, we'd like to know if these builds are still being used!

---

## Logging

Off by default. When enabled, logs are written under `<userData>/logs/` — `main.log` from the host process and `core.log` from the vault worker. The worker's sink redacts known sensitive fields (passwords, keys, tokens, etc.) before writing to `core.log`. The host process logger does not redact, so treat anything passed to `logger.*` in `main.cjs` as on-disk-visible in `main.log`.

Three ways to enable:

- **In-app toggle** (Settings → Diagnostics → **Enable logs**). Persists across launches; toggling on/off resets existing log files for a clean session.
- **Launch flag:** pass `--enable-logging` at startup. Forces logging on regardless of the toggle.
- **Nightly builds** (`PearPass-nightly`): logging is on automatically and the in-app toggle is locked.

When logging is on, **Open logs folder** in the same screen reveals the directory.

---

## Testing

### Unit Testing

Run unit tests with Jest:

```bash
npm test
```


---

## Staging to Dev

Ensure the app runs correctly using `npm run dev`.

If successful, stage it, for example: `pear stage dev`.

Then run the app: `pear run pear://GENERATED_URL`.

Pear serves files from the `dist/` folder:

```html
<!-- index.html -->
<script type="module" src="./dist/app.js"></script>
```

The `src/` folder is for development and it's ignored in `package.json`:

```json
"ignore": [".github", "appling", ".git", ".gitignore", "packages", "src"]
```

---

## Workspace Dependencies

The following sibling modules must be present in the workspace (they are not declared as npm dependencies):

- [`@tetherto/tether-dev-docs`](../tether-dev-docs)
- [`@tetherto/pear-apps-lib-feedback`](../pear-apps-lib-feedback)
- [`@tetherto/pear-apps-lib-ui-react-hooks`](../pear-apps-lib-ui-react-hooks)
- [`@tetherto/pear-apps-utils-avatar-initials`](../pear-apps-utils-avatar-initials)
- [`@tetherto/pear-apps-utils-date`](../pear-apps-utils-date)
- [`@tetherto/pear-apps-utils-generate-unique-id`](../pear-apps-utils-generate-unique-id)
- [`@tetherto/pear-apps-utils-pattern-search`](../pear-apps-utils-pattern-search)
- [`@tetherto/pear-apps-utils-qr`](../pear-apps-utils-qr)
- [`@tetherto/pear-apps-utils-validator`](../pear-apps-utils-validator)
- [`@tetherto/pearpass-lib-constants`](../pearpass-lib-constants)
- [`@tetherto/pearpass-lib-data-export`](../pearpass-lib-data-export)
- [`@tetherto/pearpass-lib-data-import`](../pearpass-lib-data-import)
- [`@tetherto/pearpass-lib-ui-theme-provider`](../pearpass-lib-ui-theme-provider)
- [`@tetherto/pearpass-lib-vault`](../pearpass-lib-vault)
- [`@tetherto/pearpass-lib-vault-core`](../pearpass-lib-vault-core)
- [`@tetherto/pearpass-utils-password-check`](../pearpass-utils-password-check)
- [`@tetherto/pearpass-utils-password-generator`](../pearpass-utils-password-generator)

---

## Dependencies

- [Pear Runtime](https://pears.com/)
- [React](https://reactjs.org/)
- [Styled Components](https://styled-components.com/)
- [Lingui](https://lingui.dev/)
- [Redux](https://redux.js.org/)

---

## Related Projects

| Project                                                                                                          | Description                                |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| [`pearpass-app-mobile`](https://github.com/tetherto/pearpass-app-mobile)                                         | Mobile app for PearPass                    |
| [`pearpass-app-browser-extension`](https://github.com/tetherto/pearpass-app-browser-extension)                   | Browser extension for PearPass             |
| [`pearpass-lib-vault`](https://github.com/tetherto/pearpass-lib-vault)                                           | Vault management library                   |
| [`pearpass-lib-vault-core`](https://github.com/tetherto/pearpass-lib-vault-core)                                 | Bare worker and client for PearPass vaults |
| [`pearpass-lib-ui-react-components`](https://github.com/tetherto/pearpass-lib-ui-react-components)               | React UI component library                 |
| [`pearpass-lib-ui-react-native-components`](https://github.com/tetherto/pearpass-lib-ui-react-native-components) | React Native UI component library          |
| [`tether-dev-docs`](https://github.com/tetherto/tether-dev-docs)                                                 | Developer documentation and guides         |

---

## Contributing

We welcome contributions. See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for the development workflow and coding conventions.

---

## License

This project is licensed under the Apache License, Version 2.0. See the [LICENSE](./LICENSE) file for details.


================================================
FILE: SECURITY.md
================================================
# Report a security issue

To report a security issue, please email [security-oss@tether.io](mailto:security-oss@tether.io).

We will respond within 5 working days of your report. Coordination and disclosure
will be handled here on GitHub (including using GitHub Security Advisory).

================================================
FILE: app.electron.tsx
================================================
/**
 * Electron-only entry for the renderer bundle (nodeIntegration: true).
 */
import { i18n } from '@lingui/core'
import { compileMessage } from '@lingui/message-utils/compileMessage'
import { I18nProvider } from '@lingui/react'
import { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'
import {
  setPearpassVaultClient,
  VaultProvider
} from '@tetherto/pearpass-lib-vault'
import { createRoot } from 'react-dom/client'
import { ThemeProvider as UIKitProvider } from '@tetherto/pearpass-lib-ui-kit'

import './src/strict.css'
import { App } from './src/app/App'
import { LoadingProvider } from './src/context/LoadingContext'
import { ModalProvider } from './src/context/ModalContext'
import { RouterProvider } from './src/context/RouterContext'
import { AppHeaderContextProvider } from './src/context/AppHeaderContext'
import { ToastProvider } from './src/context/ToastContext'
import { messages } from './src/locales/en/messages.mjs'
import { getElectronConfig, getElectronVaultClient } from './src/electron'
import { createOrGetPearpassClient } from './src/services/createOrGetPearpassClient'
import { getNativeMessagingEnabled } from './src/services/nativeMessagingPreferences'
import { startNativeMessagingIPC } from './src/services/nativeMessagingIPCServer'
import { logger } from './src/utils/logger'
import { setFontsAndResetCSS } from './styles'
import { AutoLockProvider } from './src/hooks/useAutoLockPreferences'
import { DEBUG_MODE } from './src/constants/appConstants'

setFontsAndResetCSS()
i18n.setMessagesCompiler(compileMessage)
i18n.load('en', messages)
i18n.activate('en')

function renderApp() {
  const container = document.querySelector('#root')
  if (!container) throw new Error('Failed to find the root element')
  const root = createRoot(container)
  root.render(
    <UIKitProvider>
      <LoadingProvider>
        <ThemeProvider>
          <VaultProvider>
            <I18nProvider i18n={i18n}>
              <ToastProvider>
                <RouterProvider>
                  <AppHeaderContextProvider>
                    <AutoLockProvider>
                      <ModalProvider>
                        <App />
                      </ModalProvider>
                    </AutoLockProvider>
                  </AppHeaderContextProvider>
                </RouterProvider>
              </ToastProvider>
            </I18nProvider>
          </VaultProvider>
        </ThemeProvider>
      </LoadingProvider>
    </UIKitProvider>
  )
}

async function init() {
  const config = await getElectronConfig()
  const client = await getElectronVaultClient()
  if (!config || !client)
    throw new Error('Electron config or vault client missing')

  const api = window.electronAPI!
  ;(window as unknown as { Pear: object }).Pear = {
    config: {
      storage: config.storage,
      key: config.key,
      applink: config.applink || ''
    },
    updated: () => api.checkUpdated(),
    updates: (cb: (update?: unknown) => void) => {
      const unsub1 = api.onRuntimeUpdating(() => cb({}))
      const unsub2 = api.onRuntimeUpdated(() => cb({}))
      return () => {
        unsub1()
        unsub2()
      }
    },
    reload: () => window.location.reload(),
    restart: () => api.restart(),
    teardown: () => {}
  }

  // Seed shared PearPass client singleton so code that calls
  // createOrGetPearpassClient() without arguments (e.g. extension pairing)
  // can reuse this Electron vault client instance and storage path.
  createOrGetPearpassClient(client as any, config.storage, {
    debugMode: DEBUG_MODE
  })

  setPearpassVaultClient(client)
  if (getNativeMessagingEnabled()) {
    startNativeMessagingIPC(client as any).catch((err: unknown) => {
      logger.error('INDEX', 'Failed to start IPC server:', err)
    })
  }

  renderApp()
}

init()


================================================
FILE: appling/README.md
================================================
# PearPass Appling

Pear Appling installer for PearPass Desktop application.

## Overview

This is a self-contained installer (Appling) that bootstraps the Pear platform and installs PearPass Desktop. The installer:

1. Checks if the Pear platform is already installed
2. If not, downloads and installs the Pear platform via P2P bootstrap
3. Pre-loads the PearPass application
4. Launches PearPass once installation is complete

### Architecture

```
app.cjs                 # Entry point - calls install with app ID
lib/
├── install.cjs         # Main orchestration - UI and worker coordination
├── preflight.cjs       # Pre-installation checks and platform resolution
├── worker.cjs          # Background worker for heavy I/O operations
├── progress.cjs        # Multi-stage progress tracking
├── utils.cjs           # JSON encoding/decoding and formatting utilities
├── view.html.cjs       # HTML/CSS/JS for installer UI
└── icons/              # Platform-specific application icons
```

## Prerequisites

- Node.js 22.0.0 or later (required for `using` keyword support)
- `bare-build` (installed globally)

## Development Setup

```sh
# Install bare-build globally
npm install --global bare-build

# Install dependencies
npm install
```

## Building

### macOS (Apple Silicon)

```sh
bare-build --host=darwin-arm64 --icon lib/icons/darwin/icon.png app.cjs
```

### macOS (Intel)

```sh
bare-build --host=darwin-x64 --icon lib/icons/darwin/icon.png app.cjs
```

### Linux

```sh
bare-build --host=linux-x64 --icon lib/icons/linux/icon.png --package app.cjs
```

### Signed macOS Build

See the CI workflow (`.github/workflows/build-appling.yaml`) for full signing, notarization, and DMG creation instructions.

## Security Considerations

The macOS build requires specific entitlements (`entitlements.plist`) to function with Hardened Runtime. These entitlements are documented in the plist file itself. Key points:

- **Library validation is disabled** - Required for native Node.js addons
- **DYLD environment variables are allowed** - Required for Bare runtime

See `entitlements.plist` for detailed security documentation.

## License

Apache-2.0


================================================
FILE: appling/app.cjs
================================================
const { install } = require('./lib/install')

// When we have pear://pearpass, use this
// install("pearpass");

install('tywsat7gz8m65ejx4zjn3773pbdc4j8m66tukis8dgzekraymtzo')


================================================
FILE: appling/app.dev.cjs
================================================
const { install } = require('./lib/install')

// NOTE: Change the key when dev key changes

install('8ue4k8ooakpmwukzutkno5ca9wy3yono6mp4q69bph8tt11pfthy')


================================================
FILE: appling/app.staging.cjs
================================================
const { install } = require('./lib/install')

// NOTE: Change the key when staging key changes

install('8k5z91c8u7nycsjow5m9ppmw75jznm66oe13mwt94cbohuyksdeo')


================================================
FILE: appling/entitlements.plist
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<!--
  PearPass Appling - macOS Code Signing Entitlements

  SECURITY NOTICE:
  These entitlements are required for the Bare runtime and native Node.js addons to function
  correctly with macOS Hardened Runtime. They weaken the default security model and should
  be understood before deployment.

  Required Dependencies:
  - sodium-native: Cryptographic operations require loading native libraries
  - rocksdb-native: Database operations require loading native libraries
  - udx-native, simdle-native, quickbit-native: P2P networking components

  com.apple.security.cs.disable-library-validation:
    Allows the app to load dynamic libraries that are not signed by the same team ID.
    Required because native Node.js addons are compiled during npm install and are not
    code-signed with the application's signing identity.

  com.apple.security.cs.allow-dyld-environment-variables:
    Allows DYLD_* environment variables to affect the process.
    Required for the Bare runtime to properly load and resolve native modules.

  RISK ASSESSMENT:
  - These entitlements could allow library injection attacks if an attacker gains write
    access to the application bundle or user's library paths.
  - Mitigated by: macOS notarization, Gatekeeper, and the app's limited file system access.
  - The Pear platform's P2P code is loaded through its own verified channels, not through
    these library loading mechanisms.

  ALTERNATIVES CONSIDERED:
  - Bundling pre-signed native modules: Would break cross-platform build consistency
  - Removing native dependencies: Would remove core functionality (encryption, database, P2P)
-->
<plist version="1.0">
<dict>
    <!-- Required for native Node.js addons (sodium-native, rocksdb-native, etc.) -->
    <key>com.apple.security.cs.disable-library-validation</key>
    <true/>
    <!-- Required for Bare runtime module resolution -->
    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
    <true/>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
</dict>
</plist>


================================================
FILE: appling/lib/install.cjs
================================================
const Thread = require("bare-thread");
const { App, Screen, Window, WebView } = require("fx-native");
const appling = require("appling-native");
const { encode, decode } = require("./utils");
const { preflight } = require("./preflight");
const html = require("./view.html");

const WINDOW_HEIGHT = 548;
const WINDOW_WIDTH = 500;

async function install(id, opts = {}) {
  const { platform = "pzcjqmpoo6szkoc4bpkw65ib9ctnrq7b6mneeinbhbheihaq6p6o" } =
    opts;

  // Preflight check - determines if installation is needed
  const preflightResult = await preflight(id);

  // If app was already installed and launched, exit immediately
  if (preflightResult.launched) {
    Bare.exit();
    return;
  }

  // Use the lock with explicit resource management
  using lock = preflightResult.lock;

  const config = {
    dir: lock.dir,
    platform,
    link: `pear://${id}`,
  };

  const app = App.shared();

  let window;
  let view;

  function onViewMessage(message) {
    const msg = message.toString();
    switch (msg) {
      case "quit":
        window.close();
        break;
      case "install":
        app.broadcast(encode({ type: "install" }));
        break;
      case "launch": {
        lock.unlock();
        const appInstance = new appling.App(id);
        appInstance.open();
        window.close();
        Bare.exit();
        break;
      }
    }
  }

  function onWorkerMessage(message) {
    const msg = decode(message);
    if (!msg) return;

    switch (msg.type) {
      case "ready":
        app.broadcast(encode({ type: "config", data: config }));
        break;
      case "download":
        view.postMessage({ type: "progress", data: msg.data });
        break;
      case "complete":
        view.postMessage({ type: "state", state: "complete" });
        break;
      case "error":
        console.error("[install] Worker error:", msg.error);
        view.postMessage({ type: "state", state: "error" });
        break;
    }
  }

  // Track worker thread for cleanup
  let workerThread;

  app
    .on("launch", () => {
      workerThread = new Thread(require.resolve("./worker"));

      const { width, height } = Screen.main().getBounds();

      window = new Window(
        (width - WINDOW_WIDTH) / 2,
        (height - WINDOW_HEIGHT) / 2,
        WINDOW_WIDTH,
        WINDOW_HEIGHT,
        { frame: false },
      );

      view = new WebView(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
      view.on("message", onViewMessage).loadHTML(html);

      window.appendChild(view);
      window.show();
    })
    .on("terminate", () => {
      // Terminate worker thread if it exists
      if (workerThread) {
        try {
          workerThread.terminate();
        } catch (err) {
          // Ignore termination errors
        }
      }
      if (window) {
        window.destroy();
      }
    })
    .on("message", onWorkerMessage)
    .run();
}

module.exports = { install };


================================================
FILE: appling/lib/preflight.cjs
================================================
const appling = require('appling-native')

/**
 * Performs pre-installation checks to determine if the app is already installed.
 *
 * @param {string} id - The Pear application ID (z32 encoded public key)
 * @returns {Promise<{lock: object, needsInstall: boolean, launched: boolean}>}
 *   - lock: The installation lock (null if app was launched)
 *   - needsInstall: true if installation is required
 *   - launched: true if the app was already installed and has been launched
 */
async function preflight(id) {
  // Acquire lock without specifying dir - appling-native uses default location
  const lock = await appling.lock()

  let platform
  try {
    platform = await appling.resolve() //lock.dir if infinite loop
  } catch {
    // Platform not found - installation required
    return { lock, needsInstall: true, launched: false }
  }

  const ready = platform.ready(`pear://${id}`)

  if (ready === false) {
    return { lock, needsInstall: true, launched: false }
  }

  // App is already installed and ready - launch it directly
  await lock.unlock()
  platform.launch(id)

  // Return sentinel value indicating app was launched
  // Caller should exit the process after receiving this
  return { lock: null, needsInstall: false, launched: true }
}

module.exports = { preflight }


================================================
FILE: appling/lib/progress.cjs
================================================
const prettyBytes = require('prettier-bytes')

const { encode } = require('./utils')

/**
 * Multi-stage progress tracker with weighted percentages.
 * Broadcasts progress updates via the app's IPC mechanism.
 */
// NOTE: Assumes updates come from a trusted worker.
// Do not expose Progress.update() to untrusted input.
class Progress {
  /**
   * Creates a new Progress tracker.
   * @param {object} app - The fx-native App instance for broadcasting
   * @param {number[]} stages - Array of stage weights (should sum to 1.0)
   * @example new Progress(app, [0.3, 0.7]) // 30% for stage 0, 70% for stage 1
   */
  constructor(app, stages = [1]) {
    this.app = app
    this.stages = stages
    this.values = Array(stages.length).fill(0)
    this.speed = ''
    this.peers = 0
    this.total = 0
    this.currentStage = 0
    this.stageBytes = Array(stages.length).fill(0)

    // Validate that stage weights sum to approximately 1.0
    const sum = stages.reduce((a, b) => a + b, 0)
    if (Math.abs(sum - 1) > 0.001) {
      console.warn(
        `[Progress] Stage weights sum to ${sum.toFixed(3)}, expected 1.0. ` +
          `Progress percentage may not reach 100%.`
      )
    }
  }

  _broadcast() {
    const bytes = this.stageBytes.reduce((sum, b) => sum + b, 0)
    this.app.broadcast(
      encode({
        type: 'download',
        data: {
          speed: this.speed,
          peers: this.peers,
          progress: this.total,
          stage: this.currentStage,
          bytes: prettyBytes(bytes)
        }
      })
    )
  }

  _compute() {
    const v = this.stages.reduce((sum, per, i) => sum + per * this.values[i], 0)
    this.total = Math.round(v * 100)
  }

  update(u, stage = 0) {
    if (u.speed !== undefined) this.speed = u.speed
    if (u.peers !== undefined) this.peers = u.peers
    if (u.bytes !== undefined) this.stageBytes[stage] = u.bytes
    if (u.progress !== undefined) this.stage(stage, u.progress)
  }

  stage(stage, value) {
    if (stage < 0 || stage >= this.values.length) return
    this.currentStage = stage
    this.values[stage] = Math.min(1, Math.max(0, value))
    this._compute()
    this._broadcast()
  }

  complete() {
    this.values = this.values.map(() => 1)
    this._compute()
    this._broadcast()
  }
}

module.exports = { Progress }


================================================
FILE: appling/lib/utils.cjs
================================================
const prettyBytes = require('prettier-bytes')

/**
 * Encodes an object to JSON string for IPC messaging.
 * @param {object} msg - The message object to encode
 * @returns {string} JSON string representation
 */
function encode(msg) {
  return JSON.stringify(msg)
}

/**
 * Decodes a JSON string from IPC messaging.
 * @param {string|Buffer} msg - The message to decode
 * @returns {object|null} Parsed object, or null if parsing fails
 */
function decode(msg) {
  try {
    return JSON.parse(msg.toString())
  } catch (err) {
    console.error('[decode] Failed to parse JSON:', err.message)
    return null
  }
}

/**
 * Formats download progress data for display.
 * Handles two different progress object formats from the Pear ecosystem.
 * @param {object} u - Progress update object
 * @returns {object} Formatted progress data with speed, progress, peers, bytes
 */
function format(u) {
  // Guard against null/undefined input
  if (!u) {
    return {
      speed: undefined,
      progress: undefined,
      peers: undefined,
      bytes: undefined
    }
  }

  // Format for Hyperswarm updater (has drive.core property)
  if (u.drive?.core) {
    return {
      speed: prettyBytes(u.downloadSpeed()) + '/s',
      progress: u.downloadProgress,
      peers: u.drive.core.peers.length,
      bytes: u.downloadedBytes
    }
  }

  // Format for Bootstrap updater (has direct properties)
  return {
    speed:
      u.downloadSpeed === 0 ? undefined : prettyBytes(u.downloadSpeed) + '/s',
    progress: u.downloadProgress === 0 ? undefined : u.downloadProgress,
    peers: u.peers === 0 ? undefined : u.peers,
    bytes: u.downloadedBytes
  }
}

module.exports = { encode, decode, format }


================================================
FILE: appling/lib/view.html.cjs
================================================
const AUTO_LAUNCH = true
const SLOW_TIMEOUT = 180000 // 3 minutes

// Simple inline SVG for splash - can be replaced with actual PearPass logo
const splashSvg = require('./images/logo.svg', { with: { type: 'text' } })

// Pear logo SVG
const pearSvg = require('./images/pear.svg', { with: { type: 'text' } })

const html = String.raw

module.exports = html`
  <style>
    :root {
      --color-white: #ffffff;
      --color-green-400: #33f59a;
      --color-grey-100: #ced3dc;
      --color-grey-500: #30333f;
      --color-grey-800: #151823;
      --color-grey-950: #00020a;
      --color-blue-400: #26d2e8;
      --color-blue-500: #0cb6ce;
      --color-blue-600: #0d91ad;
      --color-blue-950: #0a3342;
      --color-red-300: #ff6c72;
      --color-red-400: #ff1831;
      --color-gradient-background: linear-gradient(
        180deg,
        #687c26 0%,
        #1e2211 100%
      );
    }

    html {
      font-size: 16px;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: #121212;
    }

    body {
      margin: 0;
      background: #121212;
      color: var(--color-white);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Oxygen, Ubuntu, Cantarell, sans-serif;
      position: relative;
      overflow: hidden;
    }

    /* Blurred ellipse background effect */
    body::before {
      content: '';
      position: absolute;
      top: -34vh;
      left: 3.2%;
      width: 93.6vw;
      height: 52.6vh;
      background: #b0d944;
      border-radius: 50%;
      filter: blur(150px);
      opacity: 0.3;
      z-index: 0;
      pointer-events: none;
    }

    img {
      flex: 1;
      padding: 0 100px;
    }

    h1 {
      font-weight: 600;
      font-size: 1.25rem;
      margin: 0;
    }

    p {
      margin: 0;
      font-weight: 400;
      font-size: 0.875rem;
    }

    span {
      font-weight: 400;
      font-size: 0.75rem;
      color: var(--color-grey-100);
    }

    main {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      padding: 0 3.8rem;
      height: 100vh;
      position: relative;
      z-index: 1;
    }

    header {
      display: flex;
      align-items: center;
      flex-direction: column;
      text-align: center;
      margin-bottom: 5.377rem;
    }

    header svg {
      width: 215px;
      height: 45.2px;
    }

    article {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.5rem;
      width: 100%;
    }

    footer {
      gap: 0.5rem;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    footer svg {
      width: 35px;
      height: 47.175px;
      aspect-ratio: 35 / 47.17;
    }

    button {
      background-color: #9fc131;
      color: var(--color-grey-950);
      font-size: 0.938rem;
      font-weight: 600;
      height: 2.75rem;
      padding: 0 2.5rem;
      border-radius: 3.125rem;
      border: none;
      letter-spacing: -0.02em;
      margin-top: 1.125rem;
      margin-bottom: 3.125rem;
      transition: background-color 0.2s ease;
      white-space: nowrap;
      cursor: pointer;
    }

    button:hover {
      background-color: #b1cb58;
    }

    button:active {
      background-color: #b1cb58;
    }

    /* Accessibility: provide visible focus indicator for keyboard navigation */
    button:focus {
      outline: 2px solid var(--color-blue-400);
      outline-offset: 2px;
    }

    button:focus:not(:focus-visible) {
      outline: none;
    }

    button:focus-visible {
      outline: 2px solid var(--color-blue-400);
      outline-offset: 2px;
    }

    button.secondary {
      color: var(--color-blue-400);
      border: 1px solid var(--color-blue-400);
      background-color: transparent;
    }

    button.secondary:hover {
      color: var(--color-blue-400);
      border-color: var(--color-blue-500);
      background-color: transparent;
    }

    .hidden {
      display: none !important;
    }

    .button-group {
      display: flex;
      gap: 1rem;
      margin-top: 1.125rem;
      margin-bottom: 0;
      width: 100%;
    }

    .button-group button {
      flex: 1;
      min-width: 0;
      margin: 0;
      padding: 0 1rem;
    }

    .message {
      font-size: 0.8rem;
      width: 100%;
      text-align: left;
    }

    .message.error {
      color: var(--color-red-400);
    }

    .status-line {
      display: flex;
      justify-content: space-between;
      align-items: start;
      width: 100%;
      gap: 0.3rem;
      min-height: 1.5rem;
    }

    .status-line .message {
      margin: 0;
      flex: 1;
      text-align: left;
    }

    .stats {
      font-variant-numeric: tabular-nums;
      font-size: 0.8rem;
      display: flex;
      justify-content: flex-end;
      gap: 0.3rem;
      white-space: nowrap;
      margin: 0;
      margin-left: auto;
    }

    .status {
      width: 100%;
      height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
    }

    @keyframes indeterminate {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(400%);
      }
    }

    .progress {
      width: 100%;
      height: 6px;
      background-color: var(--color-grey-500);
      border-radius: 4px;
      overflow: hidden;
    }

    .progress > div {
      height: 100%;
      width: 0%;
      border-radius: 4px;
      background-color: var(--color-blue-400);
      animation: none;
    }

    .progress.indeterminate > div {
      width: 25%;
      animation: indeterminate 1.5s ease-in-out infinite;
    }

    .progress.red > div {
      background-color: var(--color-red-400);
    }

    .progress.green > div {
      background-color: var(--color-green-400);
    }

    .progress.complete > div {
      width: 100%;
      animation: none;
      background-color: var(--color-green-400);
    }

    .progress.determinate > div {
      animation: none;
      width: 0%;
    }

    .progress.determinate.transitioning > div {
      transition: width 0.3s ease;
    }
  </style>

  <main>
    <header>${splashSvg}</header>
    <article>
      <h1 id="title">Welcome to PearPass</h1>
      <p id="message">
        Ready to start the installation. This will only take a moment.
      </p>

      <button id="installBtn">Install PearPass</button>

      <div id="status" class="status hidden">
        <div
          id="progress"
          class="progress"
          role="progressbar"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-label="Installation progress"
        >
          <div></div>
        </div>
        <div id="statusLine" class="status-line">
          <p id="warning" class="message" role="status" aria-live="polite"></p>
          <p id="stats" class="stats" aria-label="Download statistics"></p>
        </div>
        <div id="buttonGroup" class="button-group hidden">
          <button id="quitBtn" class="secondary" aria-label="Quit installation">
            Quit
          </button>
          <button id="retryBtn" aria-label="Retry installation">
            Retry installation
          </button>
        </div>
        <button
          id="launchBtn"
          class="hidden"
          style="margin-top: 1.125rem; margin-bottom: 0;"
        >
          Launch PearPass
        </button>
      </div>
    </article>
    <footer>
      ${pearSvg}
      <span>Powered by Pear</span>
    </footer>
  </main>
  <script>
    const SLOW_TIMEOUT = ${SLOW_TIMEOUT}
    const AUTO_LAUNCH = ${AUTO_LAUNCH}

    const elements = {
      title: document.getElementById('title'),
      message: document.getElementById('message'),
      status: document.getElementById('status'),
      progress: document.getElementById('progress'),
      stats: document.getElementById('stats'),
      warning: document.getElementById('warning'),
      buttonGroup: document.getElementById('buttonGroup'),
      installBtn: document.getElementById('installBtn'),
      quitBtn: document.getElementById('quitBtn'),
      retryBtn: document.getElementById('retryBtn'),
      launchBtn: document.getElementById('launchBtn')
    }

    let timer = null

    function startTimer() {
      timer = setTimeout(() => setState('slow'), SLOW_TIMEOUT)
    }

    function onMessage(element, fn) {
      element.addEventListener('message', fn)
    }

    function onClick(element, fn) {
      element.addEventListener('click', fn)
    }

    function resetElements(e) {
      e.installBtn.classList.add('hidden')
      e.status.classList.remove('hidden')
      e.progress.classList.remove('red', 'green', 'complete')
      e.warning.textContent = ''
      e.warning.classList.add('hidden')
      e.warning.classList.remove('error')
      e.buttonGroup.classList.add('hidden')
      e.launchBtn.classList.add('hidden')
    }

    function setProgress({ speed, peers, progress, stage, bytes }) {
      // Update stats
      if (bytes || speed || peers !== undefined) {
        const parts = [
          bytes && '<span class="bytes">' + bytes + '</span>',
          speed && '<span class="speed">' + speed + '</span>',
          peers !== undefined &&
            '<span class="peers">' +
              peers +
              ' ' +
              (peers === 1 ? 'peer' : 'peers') +
              '</span>'
        ].filter(Boolean)
        elements.stats.innerHTML = parts.join('<span>•</span>')
      }

      // Update progress
      if (progress !== undefined) {
        elements.progress.classList.remove('indeterminate')
        elements.progress.classList.add('determinate')
        const progressBar = elements.progress.querySelector('div')

        // Update ARIA attributes for accessibility
        elements.progress.setAttribute('aria-valuenow', Math.round(progress))

        // Enable transitions after first frame
        if (progress > 0) {
          elements.progress.classList.add('transitioning')
        }

        if (progress === 0) {
          elements.warning.textContent = 'Starting platform installation'
          elements.warning.classList.remove('hidden', 'error')
        }

        progressBar.style.width = progress + '%'
      }

      if (progress !== 0) {
        if (stage === 0) {
          elements.warning.textContent = 'Installing platform...'
          elements.warning.classList.remove('hidden', 'error')
        } else if (stage === 1) {
          elements.warning.textContent = 'Platform ready, installing app...'
          elements.warning.classList.remove('hidden', 'error')
        }
      }
    }

    function setState(state) {
      const {
        title,
        message,
        installBtn,
        progress,
        warning,
        buttonGroup,
        launchBtn
      } = elements

      resetElements(elements)
      clearTimeout(timer)
      timer = null

      switch (state) {
        case 'installing':
          title.textContent = 'Welcome to PearPass'
          message.textContent = 'It will launch once it is done.'
          break
        case 'slow':
          title.textContent = 'Welcome to PearPass'
          message.textContent = 'It will launch once it is done.'
          warning.textContent =
            "It's taking a bit of time, please check your connection."
          warning.classList.remove('hidden')
          break
        case 'error':
          title.textContent = 'Welcome to PearPass'
          message.textContent = 'It will launch once it is done.'
          progress.classList.add('red')
          warning.textContent = "Installation didn't complete."
          warning.classList.remove('hidden')
          warning.classList.add('error')
          buttonGroup.classList.remove('hidden')
          break
        case 'complete':
          title.textContent = 'Installation complete!'
          progress.classList.add('complete')
          if (AUTO_LAUNCH) {
            message.textContent = 'PearPass will launch shortly'
            setTimeout(() => bridge.postMessage('launch'), 500)
          } else {
            message.textContent = 'PearPass is ready to launch.'
            launchBtn.classList.remove('hidden')
          }
          break
      }
    }

    onMessage(bridge, (event) => {
      const { type, state, data } = event.data || {}
      switch (type) {
        case 'state':
          setState(state)
          break
        case 'progress':
          setProgress(data)
          break
      }
    })

    onClick(elements.installBtn, () => {
      setState('installing')
      bridge.postMessage('install')
      startTimer()
    })

    onClick(elements.retryBtn, () => {
      setState('installing')
      bridge.postMessage('install')
      startTimer()
    })

    onClick(elements.quitBtn, () => {
      bridge.postMessage('quit')
    })

    onClick(elements.launchBtn, () => {
      bridge.postMessage('launch')
    })
  </script>
`


================================================
FILE: appling/lib/worker.cjs
================================================
const appling = require('appling-native')
const { App } = require('fx-native')
const bootstrap = require('pear-updater-bootstrap')

const { Progress } = require('./progress')
const { encode, decode, format } = require('./utils')

const app = App.shared()

let config
let platform
let installing = false // Guard against concurrent installation

function setup(data) {
  config = data
}

/**
 * Validates that config has all required fields.
 * @returns {string|null} Error message if invalid, null if valid
 */
function validateConfig() {
  if (!config) {
    return 'Configuration not received - setup() was not called'
  }
  if (!config.dir) {
    return "Configuration missing required 'dir' field"
  }
  if (!config.platform) {
    return "Configuration missing required 'platform' field"
  }
  if (!config.link) {
    return "Configuration missing required 'link' field"
  }
  return null
}

async function install() {
  // Prevent concurrent installation attempts
  if (installing) {
    return
  }

  // Validate configuration before proceeding
  const configError = validateConfig()
  if (configError) {
    console.error('[worker] Configuration error:', configError)
    app.broadcast(encode({ type: 'error', error: configError }))
    return
  }

  installing = true
  const progress = new Progress(app, [0.3, 0.7])
  let platformFound = false
  let bootstrapInterval = null

  try {
    try {
      platform = await appling.resolve(config.dir)
      platformFound = true
    } catch {
      // Platform not found - bootstrap it
      await bootstrap(config.platform, config.dir, {
        lock: false,
        onupdater: (u) => {
          bootstrapInterval = setInterval(() => {
            progress.update(format(u))
            if (u.downloadProgress === 1) {
              clearInterval(bootstrapInterval)
            }
          }, 250)
        }
      })
      platform = await appling.resolve(config.dir)
    }

    if (platformFound) {
      progress.stage(0, 1)
    }

    progress.update({ progress: 0, speed: '', peers: 0, bytes: 0 }, 1)

    await platform.preflight(config.link, (u) => {
      progress.update(format(u), 1)
    })

    progress.complete()
    app.broadcast(encode({ type: 'complete' }))
  } catch (e) {
    console.error('[worker] Installation error:', e.message)
    app.broadcast(encode({ type: 'error', error: e.message }))
  } finally {
    // Always reset installing flag to allow retry
    installing = false
    if (bootstrapInterval) {
      clearInterval(bootstrapInterval)
    }
  }
}

app.on('message', async (message) => {
  const msg = decode(message)

  // Handle decode failure (malformed JSON)
  if (!msg) {
    return
  }

  switch (msg.type) {
    case 'config':
      setup(msg.data)
      break
    case 'install':
      await install()
      break
  }
})

app.broadcast(encode({ type: 'ready' }))


================================================
FILE: appling/package.json
================================================
{
  "private": true,
  "name": "PearPass",
  "version": "1.0.0",
  "description": "Pear Appling for PearPass",
  "engines": {
    "node": ">=22.0.0"
  },
  "exports": {
    "./package": "./package.json"
  },
  "files": [
    "app.cjs",
    "lib"
  ],
  "scripts": {
    "test": "npm run lint",
    "lint": "prettier . --check"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tetherto/pearpass-app-desktop.git"
  },
  "author": "Tether Data S.A. de C.V.",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/tetherto/pearpass-app-desktop/issues"
  },
  "homepage": "https://github.com/tetherto/pearpass-app-desktop#readme",
  "dependencies": {
    "appling-native": "^1.4.0",
    "bare-thread": "^1.1.3",
    "fx-native": "^1.1.3",
    "pear-updater-bootstrap": "^2.3.0",
    "prettier-bytes": "^1.0.4"
  },
  "devDependencies": {
    "prettier": "^3.6.2",
    "prettier-config-holepunch": "^2.0.0"
  }
}


================================================
FILE: babel.config.cjs
================================================
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: { node: 'current' },
        modules: 'commonjs'
      }
    ],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  env: {
    test: {
      // Compile `css.create(...)` / `html.*` calls from react-strict-dom and
      // @tetherto/pearpass-lib-ui-kit the same way the production bundler does
      // (see `scripts/bundle-renderer.mjs`). Without this, evaluating those
      // modules in Jest throws "Styles must be compiled by '@stylexjs/babel-plugin'".
      presets: [
        [
          'react-strict-dom/babel-preset',
          {
            debug: false,
            dev: false,
            rootDir: process.cwd(),
            platform: 'web'
          }
        ]
      ]
    }
  }
}


================================================
FILE: babel.strict-dom.cjs
================================================
const dev = process.env.NODE_ENV !== 'production'

module.exports = {
  babelrc: false,
  configFile: false,
  parserOpts: {
    plugins: ['typescript', 'jsx']
  },
  presets: [
    [
      'react-strict-dom/babel-preset',
      {
        debug: dev,
        dev,
        rootDir: process.cwd(),
        platform: 'web'
      }
    ]
  ]
}


================================================
FILE: build-assets/win/AppxManifest.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<Package
  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
  xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3"
  xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10"
  xmlns:desktop6="http://schemas.microsoft.com/appx/manifest/desktop/windows10/6"
  IgnorableNamespaces="rescap desktop6"
>
  <Identity 
  Name="PearPass" 
  Version="1.6.0.0" 
  Publisher="CN=&quot;Tether Operations, SA de CV&quot;, O=&quot;Tether Operations, SA de CV&quot;, L=San Salvador, C=SV, SERIALNUMBER=2025120324, OID.2.5.4.15=Private Organization, OID.1.3.6.1.4.1.311.60.2.1.3=SV" 
  ProcessorArchitecture="x64" 
  />
  <Properties>
    <DisplayName>PearPass</DisplayName>
    <PublisherDisplayName>PearPass</PublisherDisplayName>
    <Description>PearPass password manager</Description>
    <!-- Icon lives under the MSIX assets/ folder -->
    <Logo>assets\PearPass.png</Logo>
    <desktop6:FileSystemWriteVirtualization>disabled</desktop6:FileSystemWriteVirtualization>
    <desktop6:RegistryWriteVirtualization>disabled</desktop6:RegistryWriteVirtualization>
  </Properties>
  <Resources>
    <Resource Language="en-US" />
  </Resources>
  <Dependencies>
    <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.19045.0" MaxVersionTested="10.0.19045.0" />
  </Dependencies>
  <Capabilities>
    <rescap:Capability Name="runFullTrust" />
    <!-- Required when disabling virtualization flags on desktop -->
    <rescap:Capability Name="unvirtualizedResources" />
  </Capabilities>
  <Applications>
    <Application Id="App" Executable="app\PearPass.exe" EntryPoint="Windows.FullTrustApplication">
      <uap:VisualElements
        DisplayName="PearPass"
        Description="PearPass password manager"
        Square150x150Logo="assets\PearPass.png"
        Square44x44Logo="assets\PearPass.png"
        BackgroundColor="transparent" />
      <Extensions>
        <uap3:Extension Category="windows.appExecutionAlias" Executable="app\PearPass.exe" EntryPoint="Windows.FullTrustApplication">
          <uap3:AppExecutionAlias>
            <desktop:ExecutionAlias Alias="PearPass.exe" />
          </uap3:AppExecutionAlias>
        </uap3:Extension>
      </Extensions>
    </Application>
  </Applications>
</Package>



================================================
FILE: docs/Electron-Packaging-And-Runtime.md
================================================
# Electron packaging and runtime

This document describes how the PearPass desktop app is built, packaged, and how the main process, worklet (vault), and renderer communicate.

---

## 1. Architecture overview

```
┌─────────────────────────────────────────────────────────────────┐
│  Renderer (React)                                               │
│  - Uses window.electronAPI (from preload) for vault & runtime   │
└────────────────────────────┬────────────────────────────────────┘
                             │ IPC (vault:invoke, runtime:*, get-app-path)
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│  Main process (electron/main.cjs)                               │
│  - Creates window, preload, BrowserWindow                       │
│  - Starts worklet via pear-runtime or bare-sidecar              │
│  - Registers IPC handlers; forwards vault calls to vaultClient  │
└────────────────────────────┬────────────────────────────────────┘
                             │ stdio / IPC pipe
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│  Worklet (Bare sidecar)                                         │
│  - Runs vault logic (pearpass-lib-vault-core worklet)           │
│  - Dev: app.js (ESM). Packaged: app.cjs (CJS bundle)            │
└─────────────────────────────────────────────────────────────────┘
```

- **Renderer** never talks to the worklet directly. It calls `window.electronAPI.vaultInvoke(method, args)` (and runtime helpers). The **main process** receives those and forwards them to **PearpassVaultClient**, which speaks to the worklet over a pipe.
- The **worklet** runs in a separate process (Bare runtime). It uses `bare-*` modules and native addons; the main process only spawns it and connects IPC.

---

## 2. Main process (electron/main.cjs)

- **Entry:** `main` in package.json points to `electron/main.cjs`.
- **On ready:** Sets log path, registers IPC, then starts the runtime via `startRuntime()` and finally creates the main window.
- **Runtime start:**
  - If `runtime-config.cjs.upgrade` is set: uses **pear-runtime** (P2P OTA), configures storage based on `pear-runtime-legacy-storage`, and calls `PearRuntime.run(workletPath)` to launch the vault worklet as a sidecar.
  - If no upgrade link is set: uses **bare-sidecar** only (`startWorkletOnly()`), spawns the worklet with `new Sidecar(workletPath)` and runs without P2P updates.
- **Storage layout:** Tries to reuse existing Pear platform storage via `pear-runtime-legacy-storage`. If none is found, it falls back to `app.getPath('userData')/app-storage/by-dkey/<upgrade-key>`.
- **Flatpak compatibility:** `electron/flatpak-paths.cjs` wraps both `app.getPath('userData')` and any legacy Pear storage path with `getSandboxSafePath()`. Inside Flatpak, host-mapped XDG paths under `~/.var/app/...` are remapped into `~/.config/...` compatibility paths so the vault worklet accepts them.
- **Packaged app:** With `asar: false` all code and `node_modules` live under `Contents/Resources/app/` on macOS, so the worklet and renderer resolve modules from the real filesystem (no `app.asar` indirection).
- **IPC:** Handles `get-app-path`, `runtime:getConfig`, `runtime:applyUpdate`, `runtime:restart`, `runtime:checkUpdated`, and `vault:invoke`. Vault methods are forwarded to `vaultClient`; Buffers are serialized as `{ __base64 }`. It also listens for `pearRuntime.updater` events and forwards `runtime:updating` / `runtime:updated` to the renderer to drive the OTA UI.

---

## 3. Worklet: dev vs packaged

The vault worklet lives in `@tetherto/pearpass-lib-vault-core` (Git dependency) under `src/worklet/`. It is loaded in two different ways so it works in both dev and packaged app.

### 3.1 Dev

- **Path:** `getWorkletPath()` returns  
  `app.getAppPath()/node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.js`.
- **Format:** ESM (`app.js`). The Bare loader in dev can run ESM and resolve Node built-ins to its own shims.
- **No bundle:** Dependencies are required from the real `node_modules` tree.

### 3.2 Packaged

- **Path:** `getWorkletPath()` returns  
  `process.resourcesPath/app/node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.cjs`.
- **Format:** CommonJS bundle (`app.cjs`). The Bare runtime used in the packaged app loads the entry as CJS; giving it ESM `app.js` would throw “Cannot use import statement outside a module”.
- **Bundle:** Produced by `scripts/build.worklet.mjs` (see below). Only the worklet **source** (relative imports) is bundled; all `node_modules` are external so Bare resolves them at runtime and native addons work.

---

## 4. Worklet build (scripts/build.worklet.mjs)

- **Runs as part of `npm run build`** (before `tsc` and the renderer bundle).
- **Input:** `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.js` (ESM).
- **Output:** `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.cjs` (single CJS file).
- **Behaviour (current esbuild config):**
  - `entryPoints`: the ESM worklet entry; `bundle: true`, `platform: 'node'`, `format: 'cjs'`, `target: 'node18'`.
  - **Externalize Node built-ins and native-heavy modules:** `fs`, `path`, `os`, `net`, `crypto`, `child_process`, `fs/promises`, `require-addon`, `fs-native-extensions`, `sodium-native` are marked as `external` so they resolve at runtime from `node_modules`.
- **Result:** A CJS bundle that contains only the worklet code; at runtime Bare loads its dependencies from `node_modules` in the packaged app.

---

## 5. Packaging (no asar; mac = electron-builder, win = electron-forge)

- **asar:** Disabled (`"asar": false` in `build`). All app code and `node_modules` are real files on disk (no `app.asar`), so the worklet and renderer always resolve modules from the filesystem.
- **Why no asar:** Electron patches the Node `fs` module so any access to `*.asar` is routed through its ASAR reader. During OTA on macOS, `pear-runtime-updater` mirrors a partially written `app.asar` into the `next` directory; Electron’s patched `fs` then tries to treat that in‑progress file as a valid ASAR and throws `Error: Invalid package ...app.asar`. Turning asar off avoids this class of error and lets the updater see only plain files.

### 5.1 macOS (electron-builder)

- **Tooling:** `electron-builder@23.6.0`.
- **Build commands:** `npm run dist:mac` (local) and `npm run dist:mac:ci` (CI).
- **Pipeline:**
  - `npm run build` → worklet bundle + `tsc` + renderer bundle (`dist/renderer.bundle.js`).
  - `npx electron-builder --mac` → `dist/mac-arm64/PearPass.app` + DMG.
  - CI uses `scripts/notarize.cjs` as an `afterSign` hook (`@electron/notarize` + `notarytool`) to sign and notarize the app.
  - After that, `PearPass.app` is copied into `out/darwin-arm64/` and `pear:build:darwin` produces the Pear drive layout (`by-arch/darwin-arm64/app/PearPass.app/...`).

### 5.2 Windows (electron-forge, MSIX)

- **Tooling:** **Electron Forge** for Windows packaging (electron-builder does not support MSIX).
- **Build:** Forge produces an MSIX package for the Windows desktop app; CI then stages that MSIX into the Pear drive for the `win32-x64` arch so `PearRuntime` on Windows can install it via `MSIXManager`.
- **Pear layout:** The staged drive contains `by-arch/win32-x64/app/<name>.msix`, where `<name>` matches the `name` passed to `PearRuntime` in `electron/main.cjs`.

---

## 6. Preload (electron/preload.cjs)

- **Attached to the renderer** via `webPreferences.preload` (with `nodeIntegration: true`, `contextIsolation: false`).
- **Responsibilities:**
  1. **App path for fs-native-extensions:** Sends `get-app-path` sync, then sets `global.__dirname` and `global.__filename` to the `fs-native-extensions` path so code that uses it (e.g. via pear-ipc) in the renderer does not break.
  2. **Renderer API:** Exposes `window.electronAPI` with:
     - Runtime: `getConfig`, `applyUpdate`, `restart`, `checkUpdated`, `onRuntimeUpdating`, `onRuntimeUpdated`
     - Vault: `vaultInvoke(method, args)`, `vaultOnUpdate(cb)`
- The renderer must use this preload; without it there is no `window.electronAPI` and no correct `__dirname`/`__filename` for fs-native-extensions.

---

## 7. Renderer → main → worklet flow

1. Renderer calls e.g. `window.electronAPI.vaultInvoke('someMethod', [arg1, arg2])`.
2. Preload forwards to `ipcRenderer.invoke('vault:invoke', { method, args })`.
3. Main process `ipcMain.handle('vault:invoke', …)` receives it, gets `vaultClient[method]`, deserializes args (e.g. `__base64` → Buffer), calls the method on `vaultClient`.
4. `PearpassVaultClient` sends the call over the pipe to the worklet; worklet runs the vault logic and replies.
5. Main process serializes the result (e.g. Buffer → `__base64`) and returns to the renderer.

---

## 8. Key files reference

| Role                           | File                                                                             |
| ------------------------------ | -------------------------------------------------------------------------------- |
| Main process                   | `electron/main.cjs`                                                              |
| Preload                        | `electron/preload.cjs`                                                           |
| Flatpak path helper            | `electron/flatpak-paths.cjs`                                                     |
| Worklet entry (ESM)            | `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.js`              |
| Worklet bundle (CJS, packaged) | `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.cjs` (generated) |
| Worklet build script           | `scripts/build.worklet.mjs`                                                      |
| Renderer bundle                | `scripts/bundle-renderer.mjs` → `dist/renderer.bundle.js`                        |
| Build pipeline                 | `package.json` scripts: `build`, `dist:*`, `pear:build:*`                        |

---

## 9. Troubleshooting

- **“Cannot use import statement outside a module” in packaged app**  
  Packaged app must run the CJS worklet (`app.cjs`). Ensure `npm run build` runs the worklet build and `getWorkletPath()` returns `.../app.cjs` when `app.isPackaged` is true.

- **“MODULE_NOT_FOUND” for a package when running from DMG /Applications**  
  With `asar: false` this usually means the package was not included in `build.files` or was only a devDependency. Ensure it is a runtime dependency and matched by `build.files`.

- **“ADDON_NOT_FOUND” for a native addon**  
  The worklet bundle must not inline that package. Ensure the module is in the `external` list in `scripts/build.worklet.mjs` (so it is loaded from `node_modules` at runtime) and that the native binary is present in the packaged app.

- **Flatpak build starts but vault/worklet storage init fails**  
  Ensure `electron/main.cjs` still routes both `app.getPath('userData')` and `pear-runtime-legacy-storage` results through `getSandboxSafePath()` from `electron/flatpak-paths.cjs`. Flatpak commonly exposes XDG directories under `~/.var/app/...`, which the worklet rejects unless they are remapped to the approved `~/.config/...` compatibility location.

- **OTA update appears stuck on Windows**  
  Confirm that the Pear drive for `by-arch/win32-x64/app/...` contains a valid `.msix` (if `PearRuntime` is using `MSIXManager.addPackage`) and that the filename matches the `name` passed to `PearRuntime` in `electron/main.cjs`.


================================================
FILE: e2e/.gitignore
================================================
test-artifacts/
node_modules/
playwright-report/
.DS_Store
.env


================================================
FILE: e2e/components/CreateOrEditPage.js
================================================
import { test, expect } from '../fixtures/app.runner.js'

class CreateOrEditPage {
  constructor(root) {
    this.root = root
  }

  // --- Input fields ---

  getCreateOrEditInputField(field) {
    const overrides = {
      website: 'createoredit-input-website-v2-0',
      attachment: 'createoredit-attachment-upload-v2',
    }
    const dashIndex = field.indexOf('-')
    const testId = overrides[field] ??
      (dashIndex !== -1
        ? `createoredit-${field.slice(0, dashIndex)}-input-${field.slice(dashIndex + 1)}-v2`
        : `createoredit-input-${field}-v2`)
    return this.root.getByTestId(testId).locator('input').first()
  }

  getCreateOrEditTextareaField(field) {
    return this.root.getByTestId(`createoredit-textarea-${field}`)
  }

  async fillCreateOrEditInput(field, value) {
    const input = this.getCreateOrEditInputField(field)
    await input.waitFor({ state: 'visible' })
    await input.fill('')
    await input.fill(value)
  }

  async verifyPasswordToNotHaveValue(password) {
    const passwordInput = this.getCreateOrEditInputField('password')
    await expect(passwordInput).toBeVisible()
    await expect(passwordInput).not.toHaveValue(password)
  }

  // --- Form buttons ---

  getCreateOrEditButton(name) {
    const dashIndex = name.indexOf('-')
    const testId = dashIndex !== -1
      ? `createoredit-${name.slice(0, dashIndex)}-button-${name.slice(dashIndex + 1)}-v2`
      : `createoredit-button-${name}-v2`
    return this.root.getByTestId(testId)
  }

  async clickOnCreateOrEditButton(button) {
    const input = this.getCreateOrEditButton(button)
    await input.waitFor({ state: 'visible' })
    await input.click()
  }

  get saveButton() {
    return this.root.getByTestId('createoredit-button-save')
  }

  get elementItemCloseButton() {
    return this.root.getByTestId(/-close-v2$/).first()
  }

  async clickElementItemCloseButton() {
    await expect(this.elementItemCloseButton).toBeVisible()
    await this.elementItemCloseButton.click()
  }

  // --- Multi-slot website / comment ---

  get detailsWebsite() {
    return this.root.getByTestId('website-multi-slot-input-slot-0')
  }

  async verifyDetailsWebsiteCount(expectedCount) {
    await expect(this.detailsWebsite).toHaveCount(expectedCount)
  }

  get detailsComment() {
    return this.root.getByTestId('comments-multi-slot-input-slot-0')
  }

  async verifyDetailsCommentCount(expectedCount) {
    await expect(this.detailsComment).toHaveCount(expectedCount)
  }

  // --- Password generation ---

  get passwordMenu() {
    return this.root.getByTestId('createoredit-button-generatepassword-v2')
  }

  async openPasswordMenu() {
    await expect(this.passwordMenu).toBeVisible()
    await this.passwordMenu.click()
  }

  get insertPasswordButton() {
    return this.root
      .getByTestId('generatepassword-button-primary-v2')
      .first()
  }

  async clickInsertPasswordButton() {
    await expect(this.insertPasswordButton).toBeVisible()
    await this.insertPasswordButton.click()
  }

  // --- Password field ---

  get elementItemPassword() {
    return this.root.getByPlaceholder('Password')
  }

  get passwordInput() {
    return this.root.getByTestId('createoredit-input-password')
  }

  get elementItemPasswordShowHideFirst() {
    return this.root
      .getByTestId('password-field-eye-button')
      .first()
  }

  get elementItemPasswordShowHideLast() {
    return this.root.getByTestId('password-field-eye-button').last()
  }

  async clickShowHidePasswordButtonFirst() {
    await expect(this.elementItemPasswordShowHideFirst).toBeVisible()
    await this.elementItemPasswordShowHideFirst.click()
  }

  async clickShowHidePasswordButtonLast() {
    await expect(this.elementItemPasswordShowHideLast).toBeVisible()
    await this.elementItemPasswordShowHideLast.click()
  }

  async verifyPasswordType(password_type) {
    const itemDetail = this.root.getByPlaceholder('Password')
    await expect(itemDetail).toBeVisible()
    await expect(itemDetail).toHaveAttribute('type', password_type)
  }

  // --- Attachment upload ---

  getCreateOrEditUploadAttachment() {
    return this.root.getByTestId(/-attachment-upload-v2$/).first()
  }

  async clickOnAttachment() {
    const input = this.getCreateOrEditUploadAttachment()
    await input.waitFor({ state: 'visible' })
    await input.click()
  }

  get deleteAttachmentButton() {
    return this.root.getByTestId(/-button-deleteattachment-v2-0$/).first()
  }

  async clickOnDeleteAttachmentButton() {
    const deleteButton = this.deleteAttachmentButton
    await expect(deleteButton).toBeVisible()
    await deleteButton.click()
  }

  get loadFile() {
    return this.root.getByTestId('createoredit-button-loadfile')
  }

  get fileInput() {
    return this.root.locator('input[type="file"]').first()
  }

  async uploadFile() {
    await this.fileInput.setInputFiles('test-files/TestPhoto.png')
  }

  get uploadedFileLink() {
    return this.root
      .getByTestId('uploadfiles-field-v2')
      .getByText('TestPhoto.png', { exact: true })
  }

  get uploadedFile() {
    return this.root.getByTestId('uploadfiles-button-additem-v2')
  }

  get uploadedImage() {
    return this.root.getByAltText('TestPhoto.png')
  }

  async clickOnUploadedFile() {
    await expect(this.uploadedFile).toBeVisible()
    await this.uploadedFile.click()
  }

  async verifyUploadedFileIsVisible() {
    await expect(this.uploadedFileLink).toBeVisible()
    await expect(this.uploadedFileLink).toHaveText('TestPhoto.png')
  }

  async verifyUploadedImageIsVisible() {
    await expect(this.uploadedImage).toBeVisible()
  }

  // --- Custom note fields ---

  get createCustomNote() {
    return this.root.getByTestId('createcustomfield-option-note')
  }

  get customNoteInput() {
    return this.root.getByTestId('createoredit-custom-input-customfield-v2-0').locator('input').first()
  }

  get customNoteInput_first() {
    return this.root.getByTestId(/^createoredit-custom-input-customfield-v2-/)
  }

  async fillCustomNoteInput() {
    const input = this.customNoteInput
    await input.waitFor({ state: 'visible' })
    await input.fill('')
    await input.fill('Custom Note')
  }

  async fillCustomNoteInput_first() {
    const input = this.customNoteInput_first
    await input.waitFor({ state: 'visible' })
    await input.fill('')
    await input.fill('Custom Note')
  }

  async deleteCustomNote() {
    const input = this.customNoteInput
    await input.waitFor({ state: 'visible' })
    await input.fill('')
  }

  // --- Folder dropdown ---

  get dropdownFolderMenu() {
    return this.root.getByTestId('createoredit-select-folder-v2')
  }

  async openDropdownMenu() {
    await this.dropdownFolderMenu.waitFor({ state: 'attached' })
    await this.dropdownFolderMenu.click()
  }

  async selectFromDropdownMenu(foldername) {
    const folder = this.root.getByTestId(`createoredit-folder-option-v2-${foldername}`)
    await expect(folder).toBeVisible()
    await folder.click()
  }

  // --- Identity sections ---

  getSection(sectionname) {
    return this.root.getByTestId(`createoredit-section-${sectionname}`)
  }

  get identitySection() {
    return this.root.getByTestId(`createoredit-section-personalinfo`)
  }

  async clickOnIdentitySection(sectionname) {
    const section = this.getSection(sectionname)
    await section.waitFor({ state: 'visible' })
    await section.click()
  }

  // --- PassPhrase ---

  get passPhrasePasteButton() {
    return this.root.getByRole('button', { name: 'Paste recovery phrase' }).first()
  }

  async clickOnPasteFromClipboard() {
    const pasteButton = this.passPhrasePasteButton
    await expect(pasteButton).toBeVisible()
    await pasteButton.click()
  }

  // --- Item details (shared verifications) ---

  async verifyItemDetailsValue(labelOrPlaceholder, expectedValue) {
    const itemDetail = this.getElementItemDetails(labelOrPlaceholder)
    await expect(itemDetail).toHaveValue(expectedValue)
  }

  async verifyItemDetailsValueIsNotVisible(labelOrPlaceholder) {
    const itemDetail = this.getElementItemDetails(labelOrPlaceholder)
    await expect(itemDetail).not.toBeVisible()
  }

}

module.exports = { CreateOrEditPage }


================================================
FILE: e2e/components/DetailsPage.js
================================================
import { test, expect } from '../fixtures/app.runner.js'

class DetailsPage {
  constructor(root) {
    this.root = root
  }

  // --- General / counter ---

  get itemDetailsCounter() {
    return this.root
    .getByTestId('details-header-v2')
    .locator('input[placeholder]')
  }

  async verifyDetailsNoItems() {
    await expect(this.itemDetailsCounter).toHaveCount(0)
  }

  // --- Title ---

  get getItemDetailsTitle() {
    return this.root.locator('[data-testid^="details-title"], [data-testid="details-header-v2"]')
  }

  async verifyTitle(expectedTitle) {
    await expect(this.getItemDetailsTitle).toContainText(expectedTitle)
  }

  // --- Item details / multi-slot ---

  getElementItemDetails(labelOrPlaceholder) {
    const v2LabelMap = {
      'Email or username': 'credentials-multi-slot-input-slot-0',
      'Password': 'credentials-multi-slot-input-slot-1',
      'https://': 'website-multi-slot-input-slot-0',
      'Name on card': 'card-details-multi-slot-input-slot-0',
      'Number on card': 'card-details-multi-slot-input-slot-1',
      'Date of expire': 'card-details-multi-slot-input-slot-2',
      'Security code': 'card-details-multi-slot-input-slot-3',
      'Pin code': 'card-details-multi-slot-input-slot-4',
      'Comment': 'comments-multi-slot-input-slot-0',
      'Wi-Fi Password': 'credentials-multi-slot-input-slot-0',
      'Add comment': 'comments-multi-slot-input-slot-0',
      'Other Field': 'custom-fields-multi-slot-input-slot-0',
    }
    const v2TestId = v2LabelMap[labelOrPlaceholder]
    if (v2TestId) {
      return this.root.getByTestId(v2TestId).locator('input').first()
    }

    return this.root
      .locator('input', {
        has: this.root.locator('[data-testid="details-header"]', {
          hasText: labelOrPlaceholder
        })
      })
      .or(this.root.locator(`input[placeholder="${labelOrPlaceholder}"]`))
  }

  async verifyItemDetailsValue(labelOrPlaceholder, expectedValue) {
    const itemDetail = this.getElementItemDetails(labelOrPlaceholder)
    await expect(itemDetail).toHaveValue(expectedValue)
  }

  async verifyItemDetailsValueIsNotVisible(labelOrPlaceholder) {
    const itemDetail = this.getElementItemDetails(labelOrPlaceholder)
    await expect(itemDetail).not.toBeVisible()
  }

  // --- Comment / note ---

  get getItemDetailsCommentInput() {
    return this.root.getByTestId('comments-multi-slot-input-slot-0').locator('input')
  }

  async verifyCustomNoteText(expectedText) {
    await expect(this.getItemDetailsCommentInput).toBeVisible()
    await expect(this.getItemDetailsCommentInput).toHaveValue(expectedText)
  }

  getElementItemDetailsNew() {
    return this.root.getByTestId('note-multi-slot-input-slot-0').locator('input').first()
  }

  async verifyNoteText(note_text) {
    const noteTextDetail = this.getElementItemDetailsNew()
    await expect(noteTextDetail).toBeVisible()
    await expect(noteTextDetail).toHaveValue(note_text)
  }

  // --- Identity ---

  getIdentityDetails(name) {
    const v2SlotMap = {
      fullname:               'personal-information-multi-slot-input-slot-0',
      email:                  'personal-information-multi-slot-input-slot-1',
      phone:                  'personal-information-multi-slot-input-slot-2',
      address:                'address-multi-slot-input-slot-0',
      zip:                    'address-multi-slot-input-slot-1',
      city:                   'address-multi-slot-input-slot-2',
      region:                 'address-multi-slot-input-slot-3',
      country:                'address-multi-slot-input-slot-4',
      passportfullname:       'passport-multi-slot-input-slot-0',
      passportnumber:         'passport-multi-slot-input-slot-1',
      passportissuingcountry: 'passport-multi-slot-input-slot-2',
      passportdateofissue:    'passport-multi-slot-input-slot-3',
      passportexpirydate:     'passport-multi-slot-input-slot-4',
      passportnationality:    'passport-multi-slot-input-slot-5',
      passportdob:            'passport-multi-slot-input-slot-6',
      passportgender:         'passport-multi-slot-input-slot-7',
      idcardnumber:           'identity-card-multi-slot-input-slot-0',
      idcarddateofissue:      'identity-card-multi-slot-input-slot-1',
      idcardexpirydate:       'identity-card-multi-slot-input-slot-2',
      idcardissuingcountry:   'identity-card-multi-slot-input-slot-3',
      comment:                'comments-multi-slot-input-slot-0',
      note:                   'comments-multi-slot-input-slot-0',
    }
    const v2TestId = v2SlotMap[name]
    if (v2TestId) {
      return this.root.getByTestId(v2TestId).locator('input').first()
    }
    return this.root.getByTestId(`identitydetails-field-${name}`)
  }

  async verifyIdentityDetails(name) {
    const identityDetail = this.getIdentityDetails(name)
    await expect(identityDetail).toBeVisible()
  }

  async verifyIdentityDetailsValue(name, expectedValue) {
    const identityDetail = this.getIdentityDetails(name)
    await expect(identityDetail).toHaveValue(expectedValue)
  }

  // --- Recovery phrase ---

  get recoveryPhraseDetails() {
    return this.root.getByTestId(/passphrase-word-input-\d+/)
  }

  async verifyAllRecoveryPhraseWords(expectedWords) {
    const slots = this.recoveryPhraseDetails
    const count = await slots.count()
    for (let i = 0; i < count; i++) {
      const input = slots.nth(i).locator('input').first()
      await expect(input).toHaveValue(expectedWords[i])
    }
  }

  // --- Attachment / file ---

  get elementItemFileLink() {
    return this.root
      .getByTestId('attachment-field-0')
      .getByText('TestPhoto.png', { exact: true })
  }

  get uploadedImage() {
    return this.root.getByAltText('TestPhoto.png')
  }

  async clickOnUploadedFile() {
    await expect(this.elementItemFileLink).toBeVisible()
    await this.elementItemFileLink.click()
  }

  async verifyUploadedFileIsVisible() {
    await expect(this.elementItemFileLink).toBeVisible()
  }

  async verifyUploadedImageIsVisible() {
    await expect(this.uploadedImage).toBeVisible()
  }

  // --- Actions bar ---

  get detailsBarActionsButton() {
    return this.root.getByTestId('details-button-actions-v2')
  }

  get detailsBarEditButton() {
    return this.root.getByTestId('details-actions-item-edit-v2')
  }

  get detailsBarFavoriteButton() {
    return this.root.getByTestId('details-actions-item-favorite-v2')
  }

  get detailsBarThreeDots() {
    return this.root.getByTestId('button-round-icon').first()
  }

  async openItemBarThreeDotsDropdownMenu() {
    await expect(this.detailsBarActionsButton).toBeVisible()
    await this.detailsBarActionsButton.click()
  }

  async editElement() {
    await expect(this.detailsBarActionsButton).toBeVisible()
    await this.detailsBarActionsButton.click()
    await expect(this.detailsBarEditButton).toBeVisible()
    await this.detailsBarEditButton.click()
  }

  get markAsFavoriteButton() {
    return this.root.locator('[data-testid="details-actions-item-favorite-v2"]').getByText('Add to Favorites', { exact: true })
  }

  get removeFromFavoritesButton() {
    return this.root.locator('[data-testid="details-actions-item-favorite-v2"]').getByText('Remove from Favorites', { exact: true })
  }

  async clickMarkAsFavoriteButton() {
    await expect(this.detailsBarFavoriteButton).toBeVisible()
    await this.detailsBarFavoriteButton.click()
  }

  async clickRemoveFromFavoritesButton() {
    await expect(this.removeFromFavoritesButton).toBeVisible()
    await this.removeFromFavoritesButton.click()
  }

  async clickFavoriteButton() {
    await expect(this.detailsBarActionsButton).toBeVisible()
    await this.detailsBarActionsButton.click()
    await expect(this.detailsBarFavoriteButton).toBeVisible()
    await this.detailsBarFavoriteButton.click()
  }

  // --- Close button ---

  get elementItemCloseButton() {
    return this.root.getByTestId(/-close-v2$/).first()
  }

  async clickElementItemCloseButton() {
    await expect(this.elementItemCloseButton).toBeVisible()
    await this.elementItemCloseButton.click()
  }

  // --- Folder management ---

  getCreateNewFolderTitleInput() {
    return this.root.locator(
      'input[placeholder="Enter Name"]'
    )
  }

  get createFolderButton() {
    return this.root.getByRole('button', { name: 'Create New Folder' });
  }

  async fillCreateNewFolderTitleInput(value) {
    await this.getCreateNewFolderTitleInput().fill(value)
  }

  async clickCreateFolderButton() {
    const saveBtn = this.root.getByTestId('createfolder-save-v2')
    await expect(saveBtn).toBeVisible()
    await saveBtn.click()
  }

  getItemDetailsFolderName(foldername) {
    return this.root.getByTestId(`sidebar-folder-${foldername}`)
  }

  async verifyItemDetailsFolderName(foldername) {
    const itemDetailsFolder = this.getItemDetailsFolderName(foldername)
    await expect(itemDetailsFolder).toBeVisible()
  }

  // --- Record list / favorites ---

  get recordListContainer() {
    return this.root.getByTestId('recordList-record-container')
  }

  // --- Password visibility ---

  async clickShowHidePasswordButton() {
    await expect(this.elementItemPasswordShowHide).toBeVisible()
    await this.elementItemPasswordShowHide.click()
  }

  async clickPasswordToggle(slotTestId) {
    const toggle = this.root.getByTestId(slotTestId).getByTestId('password-field-eye-button')
    await expect(toggle).toBeVisible()
    await toggle.click()
  }

  async verifyPasswordFieldType(slotTestId, expectedType) {
    const input = this.root.getByTestId(slotTestId).locator('input').first()
    await expect(input).toBeVisible()
    await expect(input).toHaveAttribute('type', expectedType)
  }

}

module.exports = { DetailsPage }


================================================
FILE: e2e/components/LoginPage.js
================================================
import { test, expect } from '../fixtures/app.runner.js'

class LoginPage {
  constructor(root) {
    this.root = root
  }

  // --- Title / ready state ---

  get title() {
    return this.root.locator('h1', { hasText: 'Enter Your Master Password' })
  }

  async waitForReady(timeout = 30000) {
    await expect(this.title).toBeVisible({ timeout })
  }

  // --- Password ---

  get passwordInput() {
    return this.root.getByTestId('login-password-input-v2').locator('input')
  }

  async enterPassword(password) {
    await expect(this.passwordInput).toBeVisible()
    await this.passwordInput.fill(password)
  }

  // --- Continue button ---

  get continueButton() {
    return this.root.getByTestId('login-continue-button-v2')
  }

  async clickContinue() {
    await this.continueButton.click()
  }

  async loginToApplication(password) {
    await this.waitForReady()
    await this.enterPassword(password)
    await this.clickContinue()
  }
}

module.exports = { LoginPage }


================================================
FILE: e2e/components/MainPage.js
================================================
import { test, expect } from '../fixtures/app.runner.js'

class MainPage {
  constructor(root) {
    this.root = root
  }

  // --- Element list / records ---

  get element() {
    return this.root.locator('[data-record-id]').first()
  }

  getElementByPosition(position) {
    return this.root
      .locator('[data-record-id]')
      .nth(position)
      .locator('span')
      .last()
  }

  async clickOnFirstElement() {
    await expect(this.element).toBeVisible()
    await this.element.click()
  }

  async openElementDetails() {
    await expect(this.element).toBeVisible()
    await this.element.click()
  }

  async verifyElementTitle(title) {
    const row = this.root.locator('[data-record-id]').filter({ hasText: title })
    await expect(row).toBeVisible()
  }

  async verifyElementIsNotVisible() {
    await expect(this.element).not.toBeVisible()
  }

  async verifyElementByPosition(position, element_name) {
    await expect(this.getElementByPosition(position)).toHaveText(element_name)
  }

  async clickElementByPosition(position, element_name) {
    const element = this.getElementByPosition(position)
    await expect(element).toContainText(element_name)
    await element.click()
  }

  async elementCheckBox(expectedState) {
    const checkbox = this.element
      .locator('button[aria-checked]')

    await expect(checkbox)
      .toHaveAttribute('aria-checked', String(expectedState))
  }

  // --- Favorites ---

  get mainViewFavoriteIcon() {
    return this.root.getByTestId('multi-select-favorite')
  }

  async clickOnMainViewFavoriteIcon() {
    await expect(this.mainViewFavoriteIcon).toBeVisible()
    await this.mainViewFavoriteIcon.click()
  }

  async favoriteIconDisabled() {
    const favorite1 = this.mainViewFavoriteIcon
    await expect(favorite1).toHaveAttribute('aria-label', 'Add to Favorites')
  }

  async favoriteIconEnabled() {
    const favorite2 = this.mainViewFavoriteIcon
    await expect(favorite2).toHaveAttribute('aria-label', 'Remove from Favorites')
  }

  // --- Multi-select ---

  get mainViewHeaderSelect() {
    return this.root.getByTestId('main-view-header-select')
  }

  get multipleSelectionButon() {
    return this.root.getByTestId('main-view-header-select')
  }

  get multipleSelectDeleteButon() {
    return this.root.getByTestId('multi-select-delete')
  }

  get multipleSelectMoveButon() {
    return this.root.getByTestId('multi-select-move')
  }

  get multipleSelectCancelButon() {
    return this.root.getByTestId('multi-select-cancel-button')
  }

  get multipleSelectCheckerByPosition() {
    return this.root
      .getByTestId('recordList-record-container')
      .nth(`${position}`)
      .getByTestId('undefined-selected')
  }

  async clickMainViewHeaderSelect() {
    await expect(this.mainViewHeaderSelect).toBeVisible()
    await this.mainViewHeaderSelect.click()
  }

  async clickMultipleSelectiontButton() {
    await expect(this.multipleSelectionButon).toBeVisible()
    await this.multipleSelectionButon.click()
  }

  async clickMultipleSelectDeletetButton() {
    await expect(this.multipleSelectDeleteButon).toBeVisible()
    await this.multipleSelectDeleteButon.click()
  }

  async clickMultipleSelectMoveButon() {
    await expect(this.multipleSelectMoveButon).toBeVisible()
    await this.multipleSelectMoveButon.click()
  }

  async verifyMultipleSelectDeleteButtonIsEnabled() {
    await expect(this.multipleSelectDeleteButon).toBeVisible()
    await expect(this.multipleSelectDeleteButon).toBeEnabled()
  }

  // --- Add item / plus button ---

  get mainPlusButon() {
    return this.root.getByTestId('main-plus-button')
  }

  async clickAddItem(type) {
    await expect(this.mainPlusButon).toBeVisible()
    await this.mainPlusButon.click()

    const menuItem = this.root.getByTestId(`add-item-${type}`)
    await expect(menuItem).toBeVisible()
    await menuItem.click()
  }

  // --- Sort ---

  get sortButon() {
    return this.root.getByTestId('main-view-header-sort-menu')
  }

  getSortOption(option) {
    return this.root.getByTestId(`main-view-header-sort-${option}`)
  }

  async clickSortButton() {
    await expect(this.sortButon).toBeVisible()
    await this.sortButon.click()
  }

  async selectSortOption(option) {
    const sortOption = this.getSortOption(option)
    await sortOption.click()
  }

  // --- Folder management ---

  get createNewFolderinputFolderName() {
    return this.root.getByTestId('input-field')
  }

  get createFolderModalButton() {
    return this.root.getByRole('button', { name: 'Create folder' })
  }

  getCollectionButton(button_name) {
    return this.root.getByTestId(`emptycollection-button-create-${button_name}`)
  }

  async verifyElementFolderName(elementfoldername) {
    const folderBtn = this.root.getByTestId(`sidebar-folder-${elementfoldername}`)
    await expect(folderBtn).toBeVisible()
    await folderBtn.click()
    await expect(this.root.locator('[data-record-id]').first()).toBeVisible()
  }

  // --- Move folder ---

  async clickMoveFolderChip(folderName) {
    const chip = this.root.getByTestId(`movefolder-chip-${folderName}`)
    await expect(chip).toBeVisible()
    await chip.click()
  }

  async clickMoveFolderSubmit() {
    const submitBtn = this.root.getByTestId('movefolder-submit-v2')
    await expect(submitBtn).toBeVisible()
    await expect(submitBtn).toBeEnabled()
    await submitBtn.click()
  }

  // --- Empty collection ---

  get emptyCollectionView() {
    return this.root.getByTestId('empty-collection-v2')
  }

  async verifyEmptyCollection() {
    await expect(this.emptyCollectionView).toBeVisible()
  }

  // --- Details close ---

  get detailsCloseButton() {
    return this.root.getByTestId('details-button-collapse')
  }

  async clickDetailsCloseButton() {
    const collapseBtn = this.root.getByTestId('details-button-collapse')
    const modalCloseBtn = this.root
      .getByTestId('modalheader-button-close')
      .last()
    const closeBtn = collapseBtn.or(modalCloseBtn)
    await closeBtn.click({ timeout: 5000 }).catch(() => { })
  }

  // --- Confirm / delete ---

  async clickYesButton() {
    await this.root.getByTestId('delete-records-submit-v2').click()
  }

}

module.exports = { MainPage }


================================================
FILE: e2e/components/SettingsPage.js
================================================
import { test, expect } from '../fixtures/app.runner.js'

class SettingsPage {
  constructor(root) {
    this.root = root
  }

  // --- Navigation ---

  getSettingsDropdownSection(section_name) {
    return this.root.getByTestId(`section-${section_name}`)
  }

  async verifySettingsDropdownSectionIsVisible(section_name) {
    const section_dropdown = this.getSettingsDropdownSection(section_name)
    await expect(section_dropdown).toBeVisible()
  }

  getSettingsDropdownNavigation(section_navigation_name) {
    return this.root.getByTestId(`settings-nav-${section_navigation_name}`)
  }

  async verifySettingsDropdownNavigationIsVisible(section_navigation_name) {
    const section_navigation = this.getSettingsDropdownNavigation(section_navigation_name)
    await expect(section_navigation).toBeVisible()
  }

  get backSettingsButton() {
    return this.root.getByRole('button', { name: 'Go back' });
  }

  async clickBackSettingsButton() {
    await this.backSettingsButton.waitFor({ state: 'visible' });
    await this.backSettingsButton.click();
  }

  // --- Dropdowns ---

  getPearPassFunctionDropdown(pearpass_dropdown_id) {
    return this.root.getByTestId(`settings-${pearpass_dropdown_id}`)
  }

  async clickPearPassFunctionDropdown(dropdown_id) {
    const function_dropdown = this.getPearPassFunctionDropdown(dropdown_id)
    await expect(function_dropdown).toBeVisible()
    await function_dropdown.click()
  }

  getPearPassFunctionDropdownOption(dropdown_option) {
    return this.root.getByTestId(`settings-auto-lock-option-${dropdown_option}`)
  }

  async verifyPearPassFunctionDropdownOptionIsVisible(dropdown_id) {
    const function_dropdown =
      this.getPearPassFunctionDropdownOption(dropdown_id)
    await expect(function_dropdown).toBeVisible()
  }
}

module.exports = { SettingsPage }


================================================
FILE: e2e/components/SideMenuPage.js
================================================
import { test, expect } from '../fixtures/app.runner.js'

class SideMenuPage {
  constructor(root) {
    this.root = root
  }

  // --- Exit / lock ---

  get sidebarExitButton() {
    return this.root.getByTestId('sidebar-lock-app')
  }

  async clickSidebarExitButton() {
    await expect(this.sidebarExitButton).toBeVisible()
    await this.sidebarExitButton.click()
  }

  // --- Settings ---

  get sidebarSettingsButton() {
    return this.root.getByTestId('sidebar-settings-button')
  }

  async clickSidebarSettingsButton() {
    await expect(this.sidebarSettingsButton).toBeVisible()
    await this.sidebarSettingsButton.click()
  }

  // --- Categories ---

  getSidebarCategory(categoryname) {
    return this.root.getByTestId(`sidebar-category-${categoryname}`)
  }

  async selectSideBarCategory(name) {
    const category = this.getSidebarCategory(name)
    await expect(category).toBeVisible()
    await expect(category).toBeEnabled()
    await category.click()
  }

  // --- Favorites folder ---

  get favoritesFolder() {
    return this.root.getByTestId('sidebar-folder-favorites').locator('span').last()
  }

  async verifySideBarFavoritesFolder(items) {
    await expect(this.favoritesFolder).toBeVisible()
    await expect(this.favoritesFolder).toHaveAttribute('aria-label', items)
  }

  // --- Folders ---

  getSideMenuFolder(folderName) {
    return this.root.getByRole('button', { name: folderName })
      .and(this.root.locator('[data-testid^="sidebar-"]'))
  }

  get sidebarAddButton() {
    return this.root.getByTestId('sidebar-folder-add')
  }

  get confirmButton() {
    return this.root.getByTestId('button-primary')
  }

  get deleteFolderButton() {
    return this.root.getByTestId('deletefolder-submit-v2')
  }

  async clickSidebarAddButton() {
    await expect(this.sidebarAddButton).toBeVisible()
    await this.sidebarAddButton.click()
  }

  async createFolder(name) {
    await this.clickSidebarAddButton()
    const nameInput = this.root.getByTestId('createfolder-name-v2').locator('input')
    await expect(nameInput).toBeVisible()
    await nameInput.fill(name)
    const saveBtn = this.root.getByTestId('createfolder-save-v2')
    await expect(saveBtn).toBeVisible()
    await saveBtn.click()
    await expect(saveBtn).toBeHidden()
  }

  async openSideBarFolder(foldername) {
    await expect(this.getSideMenuFolder(foldername)).toBeVisible()
    await this.getSideMenuFolder(foldername).click()
  }

  async deleteMultipleItemsFolder(foldername) {
    const folder = this.getSideMenuFolder(foldername)
    await expect(folder).toBeVisible()
    await folder.click({ button: 'right' })
    const deleteButton = this.root.getByText('Delete Folder', { exact: true })
    await expect(deleteButton).toBeVisible()
    await deleteButton.click()
  }

  async deleteFolder(foldername) {
    const folder = this.getSideMenuFolder(foldername)
    await expect(folder).toBeVisible()
    await folder.click({ button: 'right' })
    const deleteButton = this.root.getByText('Delete Folder', { exact: true })
    await expect(deleteButton).toBeVisible()
    await deleteButton.click()
    await expect(deleteButton).toBeHidden()
  }

  async clickDeleteFolderButton() {
    await expect(this.deleteFolderButton).toBeVisible()
    await this.deleteFolderButton.click()
  }

  async verifySidebarFolderName(foldername) {
    const folder = this.getSideMenuFolder(foldername)
    await expect(folder).toBeVisible()
  }
}

module.exports = { SideMenuPage }


================================================
FILE: e2e/components/Utilities.js
================================================
import { test, expect } from '../fixtures/app.runner.js'

class Utilities {
  constructor(root) {
    this.root = root
  }

  // --- Bulk delete ---

  async deleteAllElements() {
    const emptyState = this.root.getByTestId('empty-collection-v2')

    while (true) {
      const emptyVisible = await emptyState.isVisible().catch(() => false)
      if (emptyVisible) break

      const firstRow = this.root.locator('[data-record-id]').first()
      const rowVisible = await firstRow
        .isVisible({ timeout: 3000 })
        .catch(() => false)
      if (!rowVisible) break

      const recordId = await firstRow.getAttribute('data-record-id')
      if (!recordId) break

      await firstRow.click({ button: 'right' })

      const deleteButton = this.root.getByTestId(
        `record-row-menu-delete-${recordId}`
      )
      await expect(deleteButton).toBeVisible({ timeout: 5000 })
      await deleteButton.click()

      const confirmButton = this.root.getByTestId('delete-records-submit-v2')
      await expect(confirmButton).toBeVisible({ timeout: 5000 })
      await confirmButton.click()

      await confirmButton
        .waitFor({ state: 'hidden', timeout: 5000 })
        .catch(() => { })
    }
  }

  // --- Clipboard ---

  async pasteFromClipboard(locator, text) {
    await this.root.page().evaluate(async (t) => {
      await navigator.clipboard.writeText(t)
    }, text)

    await locator.click()
    const modifier = process.platform === 'darwin' ? 'Meta' : 'Control'
    await this.root.page().keyboard.press(`${modifier}+v`)
  }
}

module.exports = { Utilities }


================================================
FILE: e2e/components/index.js
================================================
export { LoginPage } from './LoginPage.js'
export { CreateOrEditPage } from './CreateOrEditPage.js'
export { DetailsPage } from './DetailsPage.js'
export { MainPage } from './MainPage.js'
export { SideMenuPage } from './SideMenuPage.js'
export { Utilities } from './Utilities.js'
export { SettingsPage } from './SettingsPage.js'


================================================
FILE: e2e/fixtures/app.runner.js
================================================
import { spawn } from 'node:child_process'
import { createRequire } from 'node:module'
import os from 'node:os'
import path from 'node:path'

import { test as base, expect, chromium } from '@playwright/test'

const isWindows = os.platform() === 'win32'

/** Real Electron binary path (avoids Windows spawn EINVAL from .cmd without shell). */
function resolveElectronBinary(appDir) {
  const require = createRequire(path.join(appDir, 'package.json'))
  return require('electron')
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

async function connectWithRetries(wsEndpoint, maxRetries) {
  // Windows needs more retries with shorter delays
  // Mac works better with exponential backoff
  const retries = maxRetries ?? (isWindows ? 15 : 10)

  for (let attempt = 0; attempt <= retries; attempt++) {
    try {
      // Sleep AFTER first attempt fails, not before
      if (attempt > 0) {
        const delay = isWindows ? 1000 : 2 ** attempt * 1000
        await sleep(delay)
      }

      console.log(
        `[CDP] Attempting connection to ${wsEndpoint} (attempt ${attempt + 1}/${retries + 1})`
      )
      return await chromium.connectOverCDP(wsEndpoint)
    } catch (err) {
      console.log(`[CDP] Connection failed: ${err.message}`)
      if (attempt === retries) throw err
    }
  }
}

async function waitForPage(browser, maxRetries = 60) {
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    const contexts = browser.contexts()
    for (const context of contexts) {
      const pages = context.pages()
      // Debug: log all page URLs
      if (attempt % 5 === 0) {
        console.log(
          `[Attempt ${attempt}] Available pages:`,
          pages.map((p) => p.url())
        )
      }

      // Electron loads index.html via file:// on all platforms
      const page = pages.find((p) => p.url().includes('index.html'))

      if (page) {
        console.log('[Found] App page:', page.url())
        return page
      }
    }
    await sleep(1000)
  }

  // Last resort: return any page that's not blank
  const contexts = browser.contexts()
  for (const context of contexts) {
    const page = context.pages().find((p) => !p.url().startsWith('about:'))
    if (page) {
      console.log('[Fallback] Using page:', page.url())
      return page
    }
  }

  return null
}

async function launchApp(appDir) {
  const port = Math.floor(Math.random() * (65535 - 10000 + 1)) + 10000

  console.log(
    `[Launch] Starting app on port ${port}, platform: ${os.platform()}`
  )

  const electronBin = resolveElectronBinary(appDir)

  // ELECTRON_RUN_AS_NODE=1 makes Electron behave as plain Node.js, which
  // prevents require('electron') from returning the built-in API (app, BrowserWindow, etc.)
  const env = { ...process.env }
  delete env.ELECTRON_RUN_AS_NODE

  let proc
  if (isWindows) {
    proc = spawn(
      electronBin,
      ['.', `--remote-debugging-port=${port}`, '--no-sandbox'],
      {
        cwd: appDir,
        stdio: 'inherit',
        windowsHide: false,
        env
      }
    )
  } else {
    // Mac/Linux: use detached process so we can kill the process group on teardown
    proc = spawn(
      electronBin,
      ['.', `--remote-debugging-port=${port}`, '--no-sandbox'],
      {
        cwd: appDir,
        stdio: 'inherit',
        detached: true,
        env
      }
    )
    proc.unref()
  }

  // Give the app time to start before trying to connect
  // Electron needs time for startRuntime() (P2P + worklet) before the window is created
  const initialDelay = isWindows ? 5000 : 5000
  console.log(`[Launch] Waiting ${initialDelay}ms for app to initialize...`)
  await sleep(initialDelay)

  const browser = await connectWithRetries(`http://localhost:${port}`)

  // Listen for new pages on all contexts
  for (const context of browser.contexts()) {
    context.on('page', (p) => console.log('[Event] New page created:', p.url()))
  }

  const page = await waitForPage(browser)

  if (!page) {
    // Final debug output
    const allPages = browser
      .contexts()
      .flatMap((c) => c.pages().map((p) => p.url()))
    console.error('[Debug] All available page URLs:', allPages)
    throw new Error('Could not find app page')
  }

  // Wait for page to be fully loaded on all platforms
  console.log('[Launch] Waiting for page to be ready...')
  await page.waitForLoadState('domcontentloaded')

  // Windows needs additional settling time
  if (isWindows) {
    await sleep(2000)
  }

  const app = { proc, browser, page, isWindows }

  /**
   * Returns the current app page. If the page was closed (e.g. app restarted),
   * tries to find the new page from the browser. Use this in beforeEach to
   * avoid "Target page, context or browser has been closed" errors.
   */
  app.getPage = async function getPage() {
    if (this.page && !this.page.isClosed()) {
      return this.page
    }
    const newPage = await waitForPage(this.browser, 10)
    if (newPage) {
      this.page = newPage
      await this.page.waitForLoadState('domcontentloaded')
      if (isWindows) await sleep(500)
      return this.page
    }
    throw new Error('App page was closed and no new page could be found')
  }

  return app
}

import { spawnSync } from 'node:child_process'

export async function teardown({ proc, browser, isWindows }) {
  try {
    if (proc?.pid) {
      console.log(`[Teardown] Killing Electron process PID=${proc.pid} ...`)
      if (isWindows) {
        // Windows: koristi taskkill
        spawnSync('taskkill', ['/PID', String(proc.pid), '/T', '/F'], {
          stdio: 'inherit'
        })
      } else {
        // Mac/Linux: ubij proces grupu (-pid)
        process.kill(-proc.pid, 'SIGKILL')
      }
    }
  } catch (e) {
    console.warn(
      'Electron process already terminated or could not be killed',
      e.message
    )
  }

  // Mali delay da OS oslobodi port i prozore
  await new Promise((r) => setTimeout(r, 500))

  // Close CDP browser connection
  try {
    if (browser) {
      console.log('[Teardown] Closing CDP browser connection...')
      await browser.close()
    }
  } catch (e) {
    console.warn('Browser already closed', e.message)
  }
}

exports.test = base.extend({
  app: [
    async ({}, use) => {
      const appDir = path.resolve(__dirname, '..', '..')
      const app = await launchApp(appDir)
      await use(app)
      await teardown(app)
    },
    { scope: 'worker' }
  ]
})

exports.expect = expect


================================================
FILE: e2e/fixtures/test-data.js
================================================
'use strict'

/**
 * Centralized test data for reuse across test suites
 */
module.exports = {
  // User credentials
  credentials: {
    validPassword: 'Test123!',
    invalidPassword: 'WrongPassword123!'
  },

  // Vault data
  vault: {
    name: 'Test'
  },

  // Timeouts
  timeouts: {
    navigation: 3000,
    action: 3000
  },

  // PassPhrase
  passphrase: {
    text12:
      'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12',
    text24:
      'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24'
  }
}


================================================
FILE: e2e/package.json
================================================
{
  "name": "pearpass-e2e",
  "version": "1.0.0",
  "scripts": {
    "test": "npx playwright test",
    "test:headed": "npx playwright test --headed",
    "test:debug": "npx playwright test --debug",
    "report": "npx playwright show-report test-artifacts/report"
  },
  "dependencies": {
    "@playwright/test": "^1.52.0",
    "dotenv": "^17.3.1"
  },
  "devDependencies": {
    "clipboardy": "^5.1.0",
    "playwright-qase-reporter": "^2.2.2"
  }
}


================================================
FILE: e2e/playwright.config.js
================================================
import { defineConfig } from '@playwright/test'
import dotenv from 'dotenv'

dotenv.config()

export default defineConfig({
  timeout: 5 * 60 * 1000,
  testDir: './specs',

  workers: 1,
  forbidOnly: !!process.env.CI,
  maxFailures: process.env.CI ? 5 : undefined,
  fullyParallel: false,

  retries: 0,

  use: {
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
    actionTimeout: 30000,
    navigationTimeout: 60000
  },

  reporter: [
    ['list'],
    ['html', { outputFolder: 'test-artifacts/report', open: 'never' }],
    [
      'playwright-qase-reporter',
      {
        mode: 'testops',
        debug: false,
        testops: {
          api: {
            token: process.env.API_TOKEN
          },
          project: 'PAS',
          uploadAttachments: true,
          run: {
            title: 'Automated Playwright Run',
            description: 'Nightly regression tests',
            complete: true
          },
          batch: {
            size: 100
          }
        },
        framework: {
          browser: {
            addAsParameter: true,
            parameterName: 'Browser'
          },
          markAsFlaky: true
        }
      }
    ]
  ],

  outputDir: 'test-artifacts/results'
})


================================================
FILE: e2e/scripts/explore.js
================================================
'use strict'
const { chromium } = require('@playwright/test')

async function explore() {
  const browser = await chromium.connectOverCDP('http://localhost:9222')
  const page = browser
    .contexts()[0]
    .pages()
    .find((p) => p.url().includes('index.html'))

  console.log('Connected to:', page.url())
  await page.waitForTimeout(2000)

  console.log('\n=== VISIBLE TEXT ===')
  console.log(await page.locator('body').innerText())

  console.log('\n=== BUTTONS ===')
  const buttons = await page.locator('button').all()
  for (const btn of buttons) {
    if (await btn.isVisible()) {
      console.log('-', await btn.textContent())
    }
  }

  console.log('\n=== INPUTS ===')
  const inputs = await page.locator('input').all()
  for (const input of inputs) {
    if (await input.isVisible()) {
      const type = await input.getAttribute('type')
      const placeholder = await input.getAttribute('placeholder')
      console.log(`- type="${type}" placeholder="${placeholder}"`)
    }
  }
}

explore().catch(console.error)


================================================
FILE: e2e/specs/01-Login/creatingLoginItem.test.js
================================================
import { qase } from 'playwright-qase-reporter'

import {
  LoginPage,
  MainPage,
  SideMenuPage,
  CreateOrEditPage,
  Utilities,
  DetailsPage
} from '../../components/index.js'
import { test, expect } from '../../fixtures/app.runner.js'
import testData from '../../fixtures/test-data.js'

test.describe('Creating Login Item', () => {
  test.describe.configure({ mode: 'serial' })

  let loginPage,
    createOrEditPage,
    sideMenuPage,
    mainPage,
    utilities,
    detailsPage,
    page

  test.beforeAll(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')

    loginPage = new LoginPage(root)
    sideMenuPage = new SideMenuPage(root)
    utilities = new Utilities(root)
    mainPage = new MainPage(root)

    await loginPage.loginToApplication(testData.credentials.validPassword)

    await sideMenuPage.selectSideBarCategory('login')
    await utilities.deleteAllElements()
    try {
      await sideMenuPage.deleteFolder('Test Folder')
    } catch (e) {
      // folder may not exist from a previous run
    }
    await mainPage.clickAddItem('login')

    await page.waitForTimeout(testData.timeouts.action)
  })

  test.beforeEach(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')
    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)
  })

  test.afterAll(async () => {
    await utilities.deleteAllElements()
    try {
      await sideMenuPage.deleteFolder('Test Folder')
    } catch (e) {
    }
    await sideMenuPage.clickSidebarExitButton()
  })

  test('Creating the "Login" item', async () => {
    qase.id(1928)
    await createOrEditPage.fillCreateOrEditInput('title', 'Login Title')
    await createOrEditPage.fillCreateOrEditInput('username', 'Test User')
    await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass')
    await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website.co')
    await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note')
    await createOrEditPage.clickOnCreateOrEditButton('save')
    await page.waitForTimeout(testData.timeouts.action)
  })

  test('Viewing created item. Verify item details', async () => {
    qase.id(1929)
    await mainPage.verifyElementTitle('Login Title')
    await mainPage.openElementDetails()
    await detailsPage.verifyItemDetailsValue('Email or username', 'Test User')
    await detailsPage.verifyItemDetailsValue('Password', 'Test Pass')
    await detailsPage.verifyItemDetailsValue('https://', 'https://www.website.co')
    await detailsPage.verifyCustomNoteText('Test Note')
  })

  test('Password visibility icon displays/hides value', async () => {
    qase.id(1930)
    await mainPage.verifyElementTitle('Login Title')
    await mainPage.openElementDetails()
    await detailsPage.verifyPasswordFieldType('credentials-multi-slot-input-slot-1', 'password')
    await detailsPage.clickPasswordToggle('credentials-multi-slot-input-slot-1')
    await detailsPage.verifyPasswordFieldType('credentials-multi-slot-input-slot-1', 'text')
  })

  test('Dropdown moves to selected item edit screen', async () => {
    qase.id(1931)
    await mainPage.verifyElementTitle('Login Title')
    await sideMenuPage.clickSidebarAddButton()
    await detailsPage.fillCreateNewFolderTitleInput('Test Folder')
    await detailsPage.clickCreateFolderButton()
    await detailsPage.editElement()
    await createOrEditPage.openDropdownMenu()
    await createOrEditPage.selectFromDropdownMenu('Test Folder')
    await createOrEditPage.clickOnCreateOrEditButton('save')
    await expect(detailsPage.getItemDetailsFolderName('Test Folder')).toBeVisible()
    await mainPage.verifyElementFolderName('Test Folder')
  })

  test('Item moved to folder (and cleanup)', async ({ page }) => {
    qase.id(1932)
    await sideMenuPage.verifySidebarFolderName('Test Folder')
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await createOrEditPage.openDropdownMenu()
    await createOrEditPage.selectFromDropdownMenu('Test Folder')
    await createOrEditPage.clickOnCreateOrEditButton('save')

    await sideMenuPage.deleteFolder('Test Folder')
  })

  test('Add via Favorite icon', async ({ page }) => {
    qase.id(1933)
    await sideMenuPage.selectSideBarCategory('all')
    await mainPage.clickMainViewHeaderSelect()
    await mainPage.elementCheckBox(false)
    await mainPage.clickOnFirstElement()
    await mainPage.elementCheckBox(true)
    await mainPage.clickOnMainViewFavoriteIcon()
    await sideMenuPage.verifySideBarFavoritesFolder('1 items')
  })

  test('Remove via Favorite icon', async ({ page }) => {
    qase.id(1934)
    await mainPage.clickMainViewHeaderSelect()
    await mainPage.clickOnFirstElement()
    await mainPage.clickOnMainViewFavoriteIcon()
    await sideMenuPage.verifySideBarFavoritesFolder('0 items')
  })

  test('Add via More options', async ({ page }) => {
    qase.id(1935)
    await mainPage.openElementDetails()
    await detailsPage.openItemBarThreeDotsDropdownMenu()
    await detailsPage.clickMarkAsFavoriteButton()
    await sideMenuPage.verifySideBarFavoritesFolder('1 items')
  })

  test('Remove via More options', async ({ page }) => {
    qase.id(1936)
    await detailsPage.openItemBarThreeDotsDropdownMenu()
    await detailsPage.clickRemoveFromFavoritesButton()
    await sideMenuPage.verifySideBarFavoritesFolder('0 items')
  })

  // test('Add Custom Note', async ({ page }) => {
  //   qase.id(1937)
  //   await mainPage.verifyElementTitle('Login Title')
  //   await mainPage.openElementDetails()
  //   await detailsPage.editElement()
  //   await createOrEditPage.clickCreateCustomItem()
  //   await createOrEditPage.clickCustomItemOptionNote()
  //   await expect(createOrEditPage.customNoteInput).toHaveCount(1)
  //   await createOrEditPage.fillCustomNoteInput()
  //   await createOrEditPage.clickOnCreateOrEditButton('save')
  //   await page.waitForTimeout(testData.timeouts.action)
  //   await mainPage.clickDetailsCloseButton()
  // })

  // test('Delete Note field', async ({ page }) => {
  //   qase.id(1938)
  //   await mainPage.verifyElementTitle('Login Title')
  //   await mainPage.openElementDetails()
  //   await detailsPage.editElement()
  //   await expect(createOrEditPage.customNoteInput_first).toHaveCount(2)
  //   await createOrEditPage.deleteCustomNote()
  //   await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)
  //   await createOrEditPage.clickOnCreateOrEditButton('save')
  //   await page.waitForTimeout(testData.timeouts.action)
  //   await mainPage.clickDetailsCloseButton()
  // })

  test('Close via Cross icon', async ({ page }) => {
    qase.id(1939)
    await mainPage.verifyElementTitle('Login Title')
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await detailsPage.clickElementItemCloseButton()
    await mainPage.verifyElementTitle('Login Title')
  })

  test('View uploaded file in Edit mode', async ({ page }) => {
    qase.id(1940)
    await detailsPage.editElement()
    await createOrEditPage.clickOnAttachment()
    await createOrEditPage.uploadFile()
    await createOrEditPage.verifyUploadedFileIsVisible()
    await createOrEditPage.clickOnUploadedFile()

    await createOrEditPage.clickOnCreateOrEditButton('save')
    await page.waitForTimeout(testData.timeouts.action)

    await detailsPage.verifyUploadedFileIsVisible()

    await detailsPage.clickOnUploadedFile()
    await detailsPage.verifyUploadedImageIsVisible()

    await createOrEditPage.clickElementItemCloseButton()
  })

  test('Empty fields not displayed in view mode', async ({ page }) => {
    qase.id(1942)
    await mainPage.verifyElementTitle('Login Title')
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await createOrEditPage.fillCreateOrEditInput('username', '')
    await createOrEditPage.fillCreateOrEditInput('password', '')
    await createOrEditPage.fillCreateOrEditInput('website', '')
    await createOrEditPage.fillCreateOrEditInput('comment', '')
    await createOrEditPage.clickOnDeleteAttachmentButton()

    await createOrEditPage.clickOnCreateOrEditButton('save')
    await mainPage.openElementDetails()

    await detailsPage.verifyDetailsNoItems()

    await test.step('CLOSE DETAILS', async () => {
      await mainPage.clickDetailsCloseButton()
    })
  })
})


================================================
FILE: e2e/specs/01-Login/creatingLoginItemPassword.test.js
================================================
import { qase } from 'playwright-qase-reporter'

import {
  LoginPage,
  MainPage,
  SideMenuPage,
  CreateOrEditPage,
  Utilities,
  DetailsPage
} from '../../components/index.js'
import { test, expect } from '../../fixtures/app.runner.js'
import testData from '../../fixtures/test-data.js'

test.describe('Password', () => {
  test.describe.configure({ mode: 'serial' })

  let loginPage,
    createOrEditPage,
    sideMenuPage,
    mainPage,
    utilities,
    detailsPage,
    page

  test.beforeAll(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')

    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)

    await loginPage.loginToApplication(testData.credentials.validPassword)

    await sideMenuPage.selectSideBarCategory('login')
    await utilities.deleteAllElements()
    await mainPage.clickAddItem('login')

    await createOrEditPage.fillCreateOrEditInput('title', 'Login Title')
    await createOrEditPage.fillCreateOrEditInput('username', 'Test User')
    await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass')
    await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website.co')
    await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note')
    await createOrEditPage.clickOnCreateOrEditButton('save')
    await page.waitForTimeout(testData.timeouts.action)
  })

  test.beforeEach(async () => {
    const root = page.locator('body')
    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)
  })

  test.afterAll(async () => {
    await utilities.deleteAllElements()
    await sideMenuPage.clickSidebarExitButton()
  })

  test('Verify that the password was changed to a generic password, with "Safe" strength as the default option.', async () => {
    qase.id(2000)
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await createOrEditPage.openPasswordMenu()
    await createOrEditPage.clickInsertPasswordButton()
    await createOrEditPage.clickShowHidePasswordButtonLast()
    await createOrEditPage.verifyPasswordToNotHaveValue('Test Pass')
    await createOrEditPage.clickOnCreateOrEditButton('save')
    await page.waitForTimeout(testData.timeouts.action)
    await mainPage.clickDetailsCloseButton()
  })

  test('Verify that password strength updates when the "special characters" switch is toggled', async () => {
    qase.id(2001)
    const root = page.locator('body')
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await createOrEditPage.openPasswordMenu()

    await expect(root.getByRole('radio', { name: /Random Characters/i })).toBeChecked()
    await expect(root.getByText('8 chars')).toBeVisible()
    await expect(root.getByText('Special character')).toBeVisible()
    const toggle = root.locator('[role="switch"]')
    await expect(toggle).toHaveAttribute('aria-checked', 'true')
    await expect(root.getByText('Strong')).toBeVisible()

    await toggle.click()
    await expect(toggle).toHaveAttribute('aria-checked', 'false')
    await expect(root.getByText('Strong')).not.toBeVisible()

    await toggle.click()
    await expect(toggle).toHaveAttribute('aria-checked', 'true')
    await expect(root.getByText('Strong')).toBeVisible()

    await root.getByTestId('generatepassword-button-discard-v2').click()
    await createOrEditPage.clickOnCreateOrEditButton('discard')
    await mainPage.clickDetailsCloseButton()
  })
})


================================================
FILE: e2e/specs/01-Login/editingDeletingLoginItem.test.js
================================================
import { qase } from 'playwright-qase-reporter'

import {
  LoginPage,
  MainPage,
  SideMenuPage,
  CreateOrEditPage,
  Utilities,
  DetailsPage
} from '../../components/index.js'
import { test, expect } from '../../fixtures/app.runner.js'
import testData from '../../fixtures/test-data.js'

test.describe('Editing/Deleting Login Item', () => {
  test.describe.configure({ mode: 'serial' })

  let loginPage,
    createOrEditPage,
    sideMenuPage,
    mainPage,
    utilities,
    detailsPage,
    page

  test.beforeAll(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')

    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)

    await loginPage.loginToApplication(testData.credentials.validPassword)

    await sideMenuPage.selectSideBarCategory('login')
    await utilities.deleteAllElements()
    await mainPage.clickAddItem('login')

    await createOrEditPage.fillCreateOrEditInput('title', 'Login Title')
    await createOrEditPage.fillCreateOrEditInput('username', 'Test User')
    await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass')
    await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website.co')
    await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note')
    await createOrEditPage.clickOnCreateOrEditButton('save')
    await page.waitForTimeout(testData.timeouts.action)

    await page.waitForTimeout(testData.timeouts.action)
  })

  test.beforeEach(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')
    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)
  })

  test.afterAll(async () => {
    await utilities.deleteAllElements()
    await sideMenuPage.clickSidebarExitButton()
  })

  test('Verify that edited "Login" item fields are saved correctly', async () => {
    qase.id(2034)
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await createOrEditPage.fillCreateOrEditInput('title', 'Login Title EDITED')
    await createOrEditPage.fillCreateOrEditInput('username', 'Test User EDITED')
    await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass EDITED')
    await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website1.co')
    await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note EDITED')
    await createOrEditPage.clickOnCreateOrEditButton('save')
    await page.waitForTimeout(testData.timeouts.action)

    await mainPage.verifyElementTitle('Login Title EDITED')
    await mainPage.openElementDetails()
    await detailsPage.verifyItemDetailsValue('Email or username', 'Test User EDITED')
    await detailsPage.verifyItemDetailsValue('Password', 'Test Pass EDITED')
    await detailsPage.verifyItemDetailsValue('https://', 'https://www.website1.co')
    await detailsPage.verifyCustomNoteText('Test Note EDITED')
  })

  test('Verify that deleted "Website" and custom "Note" fields are not saved in the edited "Login" item', async () => {
    qase.id(2035)
    await detailsPage.editElement()
    await createOrEditPage.fillCreateOrEditInput('website', '')
    await createOrEditPage.fillCreateOrEditInput('comment', '')

    await createOrEditPage.clickOnCreateOrEditButton('save')

    await detailsPage.verifyItemDetailsValue('Email or username', 'Test User EDITED')
    await detailsPage.verifyItemDetailsValue('Password', 'Test Pass EDITED')

    await createOrEditPage.verifyDetailsWebsiteCount(0)
    await createOrEditPage.verifyDetailsCommentCount(0)
  })

  test('Empty fields are not displayed in view mode', async () => {
    qase.id(2036)
    await detailsPage.editElement()
    await createOrEditPage.fillCreateOrEditInput('username', '')
    await createOrEditPage.fillCreateOrEditInput('password', '')

    await createOrEditPage.clickOnCreateOrEditButton('save')
    await mainPage.openElementDetails()

    await detailsPage.verifyDetailsNoItems()
  })

  test('Verify that the "Login" item is removed after deletion', async () => {
    qase.id(2037)
    await utilities.deleteAllElements()
    await mainPage.verifyElementIsNotVisible()
  })

  test('Verify that the empty collection view is displayed on the Home screen after deleting the last item', async () => {
    qase.id(2037)
    await sideMenuPage.selectSideBarCategory('all')
    await expect(mainPage.emptyCollectionView).toBeVisible()
  })
})


================================================
FILE: e2e/specs/02-CreditCard/creatingCreditCardItem.test.js
================================================
import { qase } from 'playwright-qase-reporter'

import {
  LoginPage,
  MainPage,
  SideMenuPage,
  CreateOrEditPage,
  Utilities,
  DetailsPage
} from '../../components/index.js'
import { test, expect } from '../../fixtures/app.runner.js'
import testData from '../../fixtures/test-data.js'

test.describe('Creating Credit Card Item', async () => {
  test.describe.configure({ mode: 'serial' })

  let loginPage,
    createOrEditPage,
    sideMenuPage,
    mainPage,
    utilities,
    detailsPage,
    page

  test.beforeAll(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')
    loginPage = new LoginPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    mainPage = new MainPage(root)
    detailsPage = new DetailsPage(root)

    await loginPage.loginToApplication(testData.credentials.validPassword)

    await sideMenuPage.selectSideBarCategory('all')
    await utilities.deleteAllElements()
    await sideMenuPage.selectSideBarCategory('creditCard')
    await mainPage.clickAddItem('creditCard')

    await page.waitForTimeout(testData.timeouts.action)
  })

  test.beforeEach(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')
    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)
  })

  test.afterAll(async ({ app }) => {
    await utilities.deleteAllElements()
    await sideMenuPage.clickSidebarExitButton()
  })

  test('Creating the "Credit Card" item', async ({ page }) => {
    qase.id(2115)
    await createOrEditPage.fillCreateOrEditInput('creditcard-title', 'Credit Card Title')
    await createOrEditPage.fillCreateOrEditInput('creditcard-name', 'John')
    await createOrEditPage.fillCreateOrEditInput('creditcard-number', '1231 2312')
    await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '12 12')
    await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '111')
    await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '5555')
    await createOrEditPage.fillCreateOrEditInput('creditcard-comment', 'Credit Card Note')
    await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')
  })

  test('Viewing created item. Verify item details', async ({ page }) => {
    qase.id(2116)
    await mainPage.verifyElementTitle('Credit Card Title')
    await mainPage.openElementDetails()

    await detailsPage.verifyItemDetailsValue('Name on card', 'John')
    await detailsPage.verifyItemDetailsValue('Number on card', '1231 2312')
    await detailsPage.verifyItemDetailsValue('Date of expire', '12 12')
    await detailsPage.verifyItemDetailsValue('Security code', '111')
    await detailsPage.verifyItemDetailsValue('Pin code', '5555')
    await detailsPage.verifyItemDetailsValue('Comment', 'Credit Card Note')
  })

  test('Password visibility icon displays/hides value', async ({ page }) => {
    qase.id(2117)
    await mainPage.verifyElementTitle('Credit Card Title')
    await mainPage.openElementDetails()
    await detailsPage.verifyPasswordFieldType('card-details-multi-slot-input-slot-3', 'password')
    await detailsPage.clickPasswordToggle('card-details-multi-slot-input-slot-3')
    await detailsPage.verifyPasswordFieldType('card-details-multi-slot-input-slot-3', 'text')
  })

  test('Add via Favorite icon', async ({ page }) => {
    qase.id(2120)
    await sideMenuPage.selectSideBarCategory('all')
    await mainPage.clickMainViewHeaderSelect()
    await mainPage.elementCheckBox(false)
    await mainPage.clickOnFirstElement()
    await mainPage.elementCheckBox(true)
    await mainPage.clickOnMainViewFavoriteIcon()
    await sideMenuPage.verifySideBarFavoritesFolder('1 items')
  })

  test('Remove via Favorite icon', async ({ page }) => {
    qase.id(2121)
    await mainPage.clickMainViewHeaderSelect()
    await mainPage.clickOnFirstElement()
    await mainPage.clickOnMainViewFavoriteIcon()
    await sideMenuPage.verifySideBarFavoritesFolder('0 items')
  })

  test('Add via More options', async ({ page }) => {
    qase.id(2122)
    await mainPage.openElementDetails()
    await detailsPage.openItemBarThreeDotsDropdownMenu()
    await detailsPage.clickMarkAsFavoriteButton()
    await sideMenuPage.verifySideBarFavoritesFolder('1 items')
  })

  test('Remove via More options', async ({ page }) => {
    qase.id(2123)
    await detailsPage.openItemBarThreeDotsDropdownMenu()
    await detailsPage.clickRemoveFromFavoritesButton()
    await sideMenuPage.verifySideBarFavoritesFolder('0 items')
  })

  // test('Add Custom Note', async ({ page }) => {
  //   qase.id(2124)
  //   await mainPage.verifyElementTitle('Credit Card Title')
  //   await mainPage.openElementDetails()
  //   await detailsPage.editElement()
  //   await createOrEditPage.clickCreateCustomItem()
  //   await createOrEditPage.clickCustomItemOptionNote()
  //   await expect(createOrEditPage.customNoteInput).toHaveCount(1)
  //   await createOrEditPage.fillCustomNoteInput()

  //   await createOrEditPage.clickOnCreateOrEditButton('save')
  //   await page.waitForTimeout(testData.timeouts.action)
  //   await mainPage.clickDetailsCloseButton()
  // })

  // test('Delete Note field', async ({ page }) => {
  //   qase.id(2125)
  //   await mainPage.verifyElementTitle('Credit Card Title')
  //   await mainPage.openElementDetails()
  //   await detailsPage.editElement()
  //   await expect(createOrEditPage.customNoteInput_first).toHaveCount(2)
  //   await createOrEditPage.deleteCustomNote()
  //   await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)
  //   await createOrEditPage.clickOnCreateOrEditButton('save')
  //   await page.waitForTimeout(testData.timeouts.action)
  //   await mainPage.clickDetailsCloseButton()
  // })

  test('Close via Cross icon', async ({ page }) => {
    qase.id(2126)
    await mainPage.verifyElementTitle('Credit Card Title')
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await detailsPage.clickElementItemCloseButton()
    await mainPage.verifyElementTitle('Credit Card Title')
  })

  test('View uploaded file in Edit mode', async ({ page }) => {
    qase.id(2127)
    await detailsPage.editElement()
    await createOrEditPage.clickOnAttachment()
    await createOrEditPage.uploadFile()
    await createOrEditPage.verifyUploadedFileIsVisible()
    await createOrEditPage.clickOnUploadedFile()

    await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')
    await page.waitForTimeout(testData.timeouts.action)


    await detailsPage.verifyUploadedFileIsVisible()

    await detailsPage.clickOnUploadedFile()
    await detailsPage.verifyUploadedImageIsVisible()

    await createOrEditPage.clickElementItemCloseButton()
  })

  test('Empty fields not displayed in view mode', async ({ page }) => {
    qase.id(2129)
    await mainPage.verifyElementTitle('Credit Card Title')
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await createOrEditPage.fillCreateOrEditInput('creditcard-name', '')
    await createOrEditPage.fillCreateOrEditInput('creditcard-number', '')
    await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '')
    await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '')
    await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '')
    await createOrEditPage.fillCreateOrEditInput('creditcard-comment', '')
    await createOrEditPage.clickOnDeleteAttachmentButton()

    await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')
    await mainPage.openElementDetails()

    await detailsPage.verifyDetailsNoItems()

    await test.step('CLOSE DETAILS', async () => {
      await mainPage.clickDetailsCloseButton()
    })
  })
})


================================================
FILE: e2e/specs/02-CreditCard/editingDeleteCreditCardItem.test.js
================================================
import { qase } from 'playwright-qase-reporter'

import {
  LoginPage,
  MainPage,
  SideMenuPage,
  CreateOrEditPage,
  Utilities,
  DetailsPage
} from '../../components/index.js'
import { test, expect } from '../../fixtures/app.runner.js'
import testData from '../../fixtures/test-data.js'

test.describe('Editing/Deleting Credit Card Item', () => {
  test.describe.configure({ mode: 'serial' })

  let loginPage,
    createOrEditPage,
    sideMenuPage,
    mainPage,
    utilities,
    detailsPage,
    page

  test.beforeAll(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')

    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)

    await loginPage.loginToApplication(testData.credentials.validPassword)

    await sideMenuPage.selectSideBarCategory('all')
    await utilities.deleteAllElements()
    await sideMenuPage.selectSideBarCategory('creditCard')
    await mainPage.clickAddItem('creditCard')

    await createOrEditPage.fillCreateOrEditInput('creditcard-title', 'Credit Card Title')
    await createOrEditPage.fillCreateOrEditInput('creditcard-name', 'John')
    await createOrEditPage.fillCreateOrEditInput('creditcard-number', '12312312')
    await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '1212')
    await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '111')
    await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '111')
    await createOrEditPage.fillCreateOrEditInput('creditcard-comment', 'Credit Card Note')
    await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')
    await page.waitForTimeout(testData.timeouts.action)
    await mainPage.verifyElementTitle('Credit Card Title')

    await page.waitForTimeout(testData.timeouts.action)
  })

  test.beforeEach(async ({ app }) => {
    page = await app.getPage()
    const root = page.locator('body')
    loginPage = new LoginPage(root)
    mainPage = new MainPage(root)
    sideMenuPage = new SideMenuPage(root)
    createOrEditPage = new CreateOrEditPage(root)
    utilities = new Utilities(root)
    detailsPage = new DetailsPage(root)
  })

  test.afterAll(async ({ app }) => {
    await utilities.deleteAllElements()
    await sideMenuPage.clickSidebarExitButton()
  })

  test('Verify that edited "Credit Card" item fields are saved correctly', async () => {
    qase.id(2130)
    await mainPage.openElementDetails()
    await detailsPage.editElement()
    await createOrEditPage.fillCreateOrEditInput('creditcard-name', 'John EDITED')
    await createOrEditPage.fillCreateOrEditInput('creditcard-number', '99999999')
    await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '0101')
    await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '222')
    await createOrEditPage.fillCreateOrEditInput('creditcard-pinco