fix(i18n): wrap hard-coded English strings in t() across UI (#6566)

## Summary
Audit + bulk fix of hard-coded English UI strings - `aria-label`,
`title`, `placeholder`, `label`, and raw JSX literals that bypassed i18n
entirely. Each literal now goes through `t("key", "English Default")`
from `react-i18next`, and every new key has a corresponding entry in
`en-GB/translation.toml` so translators can pick it up.

## What this fixes
Strings were rendered untranslated in every non-EN locale because they
never went through `t()` at all (not just "value not translated yet").
Affects screen-reader labels, tooltips, form placeholders, empty/loading
states, plan card content, and the entire workflow ParticipantView.

## Coverage (~143 keys / 50 files)
- **Viewer chrome** - search bar (close, clear, prev/next, "of N"
results), link/signature/redaction actions, viewer error state, zoom
labels
- **Page editor** - undo/redo/rotate/delete toolbar tooltips, empty
state, bulk selection operator chip tooltips
- **Shared primitives** - Tooltip close, InfoBanner dismiss, TextInput
clear, Toast dismiss/toggle, UpdateModal close, EditableSecretField
edit, DropdownListWithFooter search, FileCard/FileDropdownMenu actions,
EmptyFilesState + AddFileCard upload
- **Tools** - Image upload + hint, ColorControl eyedropper, sign Use
Signature, CompressSettings, OCR loading, PageLayout
margin/border/row/col placeholders, FormFill switch + save + re-scan
- **Proprietary admin** - OverviewHeader signed-in line + logout,
AdminPremiumSection moved-features list (via `<Trans>`),
AdminPlanSection no-data alert, AdminAdvancedSection temp-dir
placeholders, AdminEndpointsSection multiselect placeholders,
AdminMailSection + AdminDatabaseSection password placeholders
- **Onboarding** - MFASetupSlide QR loading + auth code label,
SecurityCheckSlide role select + options
- **ParticipantView** - entire sign-document UI (~30 strings: loading,
error, badges, headings, cert-type Select, all input labels and
placeholders, action buttons, completion + expired alerts) - file
previously imported `useTranslation` but only used `t()` for cert
validation
- **planConstants.ts refactor** - replaced `PLAN_FEATURES` /
`PLAN_HIGHLIGHTS` const exports with `usePlanFeatures()` /
`usePlanHighlights()` hooks. Service layer (`licenseService.getPlans`)
updated to accept feature/highlight maps so it stays hook-free. Callers
(`usePlans`, `CheckoutContext`) resolve the hooks at the React boundary
- **Previously catalogued offenders** - `FileSidebarFileItem`
open/close-viewer aria-labels, `quickAccessBar/ActiveToolButton` "Back
to all tools" tooltip + aria, `AppConfigModal` close button

## Notes
- One small refactor in `usePageSelectionTips.ts` was needed to resolve
a TOML key-shape conflict: the existing scalar keys
`bulkSelection.operators.{and,not,comma}` needed to become tables to
hold the new `.title` subkeys for OperatorsSection's chip tooltips. The
existing descriptions moved to `[bulkSelection.operators.descriptions]`
and the three i18n key paths in usePageSelectionTips were updated to
match.
- Viewer sidebar close buttons
(Bookmark/Layer/Thumbnail/Attachment/Comments) were on the audit list
but are NOT on main - they're added by the unmerged PR #6552
(feat/viewer-sidebar-ux). Those particular strings will need wrapping
when that PR lands.
- TOML hook (`toml-sort-fix`) ran and re-sorted the translation file.

## Test plan
- [ ] `task frontend:typecheck` passes (core + proprietary + desktop
variants)
- [ ] `task frontend:lint` passes
- [ ] Switching language to Deutsch / Русский: previously-English
`aria-label`s + tooltips + placeholders + plan card bullets now render
translated (when the locale has values) or fall back to the English
default (when it doesn't)
- [ ] Plan page bullet points in EN render unchanged
- [ ] Sign-document flow (ParticipantView) renders unchanged in EN

frontend/editor/public/locales/en-GB/translation.toml

@@ -12,7 +12,6 @@ cancel = "Cancel"
 changedCredsMessage = "Credentials changed!"
 chooseFile = "Choose File"
 close = "Close"
-color = "Colour"
 comingSoon = "Coming soon"
 confirm = "Confirm"
 confirmClose = "Confirm Close"
@@ -199,6 +198,10 @@ ssoDescription = "Two-factor authentication is managed by your identity provider
 ssoManaged = "Configure MFA through your identity provider."
 title = "Two-factor authentication"
 
+[account.overview]
+logOut = "Log out"
+signedInAs = "Signed in as: {{email}}"
+
 [add-page-numbers]
 tags = "paginate,label,organize,index"
 
@@ -226,6 +229,9 @@ title = "What it does"
 [AddAttachmentsRequest.tooltip.header]
 title = "About Add Attachments"
 
+[addFileCard]
+upload = "Upload"
+
 [addImage]
 applySignatures = "Apply Images"
 header = "Add images to PDFs"
@@ -606,6 +612,7 @@ label = "Temp File Management"
 [admin.settings.advanced.tempFileManagement.baseTmpDir]
 description = "Base directory for temporary files (leave empty for default: java.io.tmpdir/stirling-pdf)"
 label = "Base Temp Directory"
+placeholder = "Default: java.io.tmpdir/stirling-pdf"
 
 [admin.settings.advanced.tempFileManagement.cleanupIntervalMinutes]
 description = "How often to run cleanup (in minutes)"
@@ -618,6 +625,7 @@ label = "Cleanup System Temp"
 [admin.settings.advanced.tempFileManagement.libreofficeDir]
 description = "Directory for LibreOffice temp files (leave empty for default: baseTmpDir/libreoffice)"
 label = "LibreOffice Temp Directory"
+placeholder = "Default: baseTmpDir/libreoffice"
 
 [admin.settings.advanced.tempFileManagement.maxAgeHours]
 description = "Maximum age in hours before temp files are cleaned up"
@@ -634,6 +642,7 @@ label = "Startup Cleanup"
 [admin.settings.advanced.tempFileManagement.systemTempDir]
 description = "System temp directory to clean (only used if cleanupSystemTemp is enabled)"
 label = "System Temp Directory"
+placeholder = "System temp directory path"
 
 [admin.settings.advanced.tessdataDir]
 description = "Path to the tessdata directory for OCR language files"
@@ -839,6 +848,7 @@ label = "Database Name"
 [admin.settings.database.password]
 description = "Database authentication password"
 label = "Password"
+placeholder = "Enter database password"
 
 [admin.settings.database.port]
 description = "Database server port (not used if custom URL is provided)"
@@ -870,10 +880,12 @@ label = "Hide unavailable tools by default"
 [admin.settings.endpoints.groupsToRemove]
 description = "Select endpoint groups to disable"
 label = "Disabled Endpoint Groups"
+placeholder = "Select groups to disable"
 
 [admin.settings.endpoints.toRemove]
 description = "Select individual endpoints to disable"
 label = "Disabled Endpoints"
+placeholder = "Select endpoints to disable"
 
 [admin.settings.enterpriseRequired]
 message = "An Enterprise license is required to access {{featureName}}. You are viewing demo data for reference."
@@ -1088,6 +1100,7 @@ label = "SMTP Host"
 [admin.settings.mail.password]
 description = "Password for SMTP authentication"
 label = "SMTP Password"
+placeholder = "Enter SMTP password"
 
 [admin.settings.mail.port]
 description = "The port number for SMTP connection (typically 25, 465, or 587)"
@@ -1097,6 +1110,10 @@ label = "SMTP Port"
 description = "Username for SMTP authentication"
 label = "SMTP Username"
 
+[admin.settings.plan.noData]
+message = "Plans data is not available at the moment."
+title = "No data available"
+
 [admin.settings.premium]
 description = "Configure your premium or enterprise license key."
 license = "License Configuration"
@@ -1143,6 +1160,9 @@ info = "If you have a license key or certificate file from a direct purchase, yo
 toggle = "Got a license key or certificate file?"
 
 [admin.settings.premium.movedFeatures]
+auditLogging = "<0>Audit Logging</0> (ENTERPRISE) - Security"
+customMetadata = "<0>Custom Metadata</0> (PRO) - General"
+databaseConfiguration = "<0>Database Configuration</0> (ENTERPRISE) - Database"
 message = "Premium and Enterprise features are now organized in their respective sections:"
 title = "Premium Features Distributed"
 
@@ -1526,10 +1546,10 @@ section_title = "Agents"
 show_less = "Show less"
 start_chat = "Start chatting"
 stirling_description = "Your general-purpose PDF assistant"
-stirling_running = "Running..."
 stirling_full_name = "Stirling General Agent"
 stirling_long_description = "General purpose PDF assistant that can run tools, create PDFs and extract insights from your documents."
 stirling_name = "Stirling"
+stirling_running = "Running..."
 stirling_tooltip = "Stirling agent"
 view_all = "View all agents"
 
@@ -2126,11 +2146,31 @@ placeholder = "Number of pages"
 title = "Last N Pages"
 
 [bulkSelection.operators]
+text = "AND has higher precedence than comma. NOT applies within the document range."
+title = "Operators"
+
+[bulkSelection.operators.and]
+title = "Combine selections (both conditions must be true)"
+
+[bulkSelection.operators.descriptions]
 and = "AND: & or \"and\" - require both conditions (e.g., 1-50 & even)"
 comma = "Comma: , or | - combine selections (e.g., 1-10, 20)"
 not = "NOT: ! or \"not\" - exclude pages (e.g., 3n & not 30)"
-text = "AND has higher precedence than comma. NOT applies within the document range."
-title = "Operators"
+
+[bulkSelection.operators.even]
+title = "Select all even-numbered pages (2, 4, 6, 8...)"
+
+[bulkSelection.operators.not]
+title = "Exclude from selection"
+
+[bulkSelection.operators.odd]
+title = "Select all odd-numbered pages (1, 3, 5, 7...)"
+
+[bulkSelection.operators.or]
+title = "Add to selection (either condition can be true)"
+
+[bulkSelection.pageSelection]
+title = "Page Selection"
 
 [bulkSelection.range]
 fromPlaceholder = "From"
@@ -2782,6 +2822,9 @@ unknownTool = "Unknown tool"
 [cloudBadge]
 tooltip = "This operation will use your cloud credits"
 
+[color.eyeDropper]
+tooltip = "Pick colour from screen"
+
 [colorPicker]
 title = "Choose colour"
 
@@ -3006,6 +3049,10 @@ title = "Compression Method"
 1 = "1-3 PDF compression,</br> 4-6 lite image compression,</br> 7-9 intense image compression Will dramatically reduce image quality"
 _value = "Compression Settings"
 
+[compress.settings]
+desiredSize = "Desired File Size"
+desiredSizePlaceholder = "Enter size"
+
 [compress.tooltip.description]
 text = "Compression is an easy way to reduce your file size. Pick File Size to enter a target size and have us adjust quality for you. Pick Quality to set compression strength manually."
 title = "Description"
@@ -3496,6 +3543,13 @@ docsLink = "View installation documentation"
 message = "Stirling-PDF does not have permission to update itself on this machine."
 title = "Administrator permissions required"
 
+[dropdownList]
+searchPlaceholder = "Search..."
+
+[editableSecretField]
+edit = "Edit"
+editSecretValue = "Edit secret value"
+
 [editTableOfContents]
 submit = "Apply table of contents"
 
@@ -3583,6 +3637,9 @@ tabTitle = "Outline workspace"
 description = "Select the Edit Table of Contents tool to load its workspace."
 title = "Open the tool to start editing"
 
+[emptyFilesState]
+upload = "Upload"
+
 [encryptedPdfUnlock]
 description = "This PDF is password protected. Enter the password so you can continue working with it."
 emptyResponse = "Password removal did not produce a file."
@@ -3697,6 +3754,10 @@ title = "Settings"
 [extractPages.tooltip]
 description = "Extracts the selected pages into a new PDF, preserving order."
 
+[fileCard]
+openInFileEditor = "Open in File Editor"
+viewInViewer = "View in Viewer"
+
 [fileChooser]
 click = "Click"
 dragAndDrop = "Drag & Drop"
@@ -3706,6 +3767,9 @@ extractPDF = "Extracting..."
 hoveredDragAndDrop = "Drag & Drop file(s) here"
 or = "or"
 
+[fileDropdownMenu]
+closeFile = "Close file"
+
 [fileEditor]
 addFiles = "Add Files"
 pageCount = "{{count}} pages"
@@ -3872,6 +3936,10 @@ openSettings = "Open settings"
 search = "Search"
 searchPlaceholder = "Search files..."
 
+[fileSidebar.fileItem]
+closeViewer = "Close viewer"
+openInViewer = "Open in viewer"
+
 [filesPage]
 addToWorkspace = "Add to workspace"
 addToWorkspaceCount = "Add {{count}} to workspace"
@@ -4178,6 +4246,15 @@ title = "About Flattening PDFs"
 discord = "Discord"
 issues = "GitHub"
 
+[formFill]
+flattenAfterFilling = "Flatten after filling"
+rescanFields = "Re-scan fields"
+rescanFormFields = "Re-scan form fields"
+save = "Save"
+
+[formFill.sidebar]
+close = "Close sidebar"
+
 [getPdfInfo]
 downloadJson = "Download JSON"
 downloads = "Downloads"
@@ -4737,6 +4814,11 @@ tags = "markup,web-content,transformation,convert"
 title = "HTML To PDF"
 zoom = "Zoom level for displaying the website."
 
+[image.upload]
+hint = "Upload a PNG, JPG, SVG, or other image file to place on the PDF. SVG files will be converted to PNG for compatibility."
+label = "Upload Image"
+placeholder = "Select image file"
+
 [imageToPdf]
 tags = "conversion,img,jpg,picture,photo"
 
@@ -4755,6 +4837,9 @@ title = "Image to PDF"
 4 = "Merge into single PDF"
 5 = "Convert to separate PDFs"
 
+[infoBanner]
+dismiss = "Dismiss"
+
 [invite]
 acceptError = "Failed to create account"
 accountFor = "Creating account for"
@@ -5090,6 +5175,7 @@ failed = "OCR operation failed"
 
 [ocr.languagePicker]
 additionalLanguages = "Looking for additional languages?"
+loading = "Loading available languages..."
 viewSetupGuide = "View setup guide →"
 
 [ocr.operation]
@@ -5226,6 +5312,10 @@ daysRemainingSingular = "{{days}} day remaining"
 title = "Your 30-Day Pro Trial"
 trialEnds = "Trial ends {{date}}"
 
+[onboarding.mfa]
+authenticationCode = "Authentication code"
+qrCodeLoading = "Generating your QR code…"
+
 [onboarding.planOverview]
 adminBodyLoginDisabled = "Once you enable login mode, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge."
 adminBodyLoginEnabled = "As an admin, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge."
@@ -5235,6 +5325,9 @@ userTitle = "Plan Overview"
 
 [onboarding.securityCheck]
 message = "The application has undergone significant changes recently. Your server admin's attention may be required. Please confirm your role to continue."
+roleAdmin = "Admin"
+rolePlaceholder = "Confirm your role"
+roleUser = "User"
 
 [onboarding.serverLicense]
 freeBody = "Our <strong>Open-Core</strong> licensing permits up to <strong>{{freeTierLimit}}</strong> users for free per server. To scale uninterrupted, we recommend the Stirling Server plan - <strong>unlimited seats</strong> and <strong>SSO support</strong> for $99/server/mo."
@@ -5360,6 +5453,17 @@ title = "Page Editor"
 zoomIn = "Zoom In"
 zoomOut = "Zoom Out"
 
+[pageEditor.emptyState]
+body = "Add files to start editing pages"
+title = "No PDF files loaded"
+
+[pageEditor.toolbar]
+delete = "Delete Selected"
+redo = "Redo"
+rotateLeft = "Rotate Selected Left"
+rotateRight = "Rotate Selected Right"
+undo = "Undo"
+
 [pageExtracter]
 header = "Extract Pages"
 placeholder = "(e.g. 1,2,8 or 4,7,12-16 or 2n-1)"
@@ -5371,12 +5475,14 @@ addBorder = "Add Borders"
 borderWidth = "Border Thickness"
 bottom = "Bottom Margin"
 cols = "Columns"
+colsPlaceholder = "Enter columns"
 header = "Multi Page Layout"
 innerMargin = "Inner Margin"
 left = "Left Margin"
 pagesPerSheet = "Pages per sheet:"
 right = "Right Margin"
 rows = "Rows"
+rowsPlaceholder = "Enter rows"
 submit = "Submit"
 tags = "merge,composite,single-view,organize"
 title = "Multi Page Layout"
@@ -5418,6 +5524,14 @@ innerMarginTooLarge = "Inner margin is too large for the selected layout."
 outerHorizontalMarginsTooLarge = "Left/Right margins are too large for this page size."
 outerVerticalMarginsTooLarge = "Top/Bottom margins are too large for this page size."
 
+[pageLayout.margins]
+borderThicknessPlaceholder = "Enter border thickness"
+bottomPlaceholder = "Enter bottom margin"
+innerPlaceholder = "Enter inner margin"
+leftPlaceholder = "Enter left margin"
+rightPlaceholder = "Enter right margin"
+topPlaceholder = "Enter top margin"
+
 [pageLayout.marginsBorders.tooltip.borders]
 text = "Enable borders to draw lines around each placed page. This can help visual separation or trimming."
 title = "Add Borders"
@@ -6071,6 +6185,26 @@ pdfTools = "Basic PDF Tools"
 priority = "Priority Support"
 title = "Feature"
 
+[plan.features]
+allPdfOperations = "All PDF operations"
+auditing = "Auditing"
+communitySupport = "Community support"
+customPdfMetadata = "Custom PDF metadata"
+editingTextInPdfs = "Editing text in pdfs"
+externalDatabase = "External Database"
+googleDriveIntegration = "Google drive integration"
+prometheusSupport = "Prometheus Support"
+regularUpdates = "Regular updates"
+saml = "SAML"
+secureLoginSupport = "Secure Login Support"
+selfHostedDeployment = "Self-hosted deployment"
+sso = "SSO"
+unlimitedUsers = "Unlimited users"
+upToFiveUsers = "Up to 5 users"
+upToFiveUsersLowercase = "up to 5 users"
+usageTracking = "Usage tracking"
+usersLimitedToSeats = "Users limited to seats"
+
 [plan.free]
 forever = "Forever free"
 highlight1 = "Limited Tool Usage Per week"
@@ -6079,6 +6213,22 @@ highlight3 = "Community support"
 included = "Included"
 name = "Free"
 
+[plan.highlights]
+advancedIntegrations = "Advanced integrations"
+allBasicFeatures = "All basic features"
+cancelAnytime = "Cancel anytime"
+customPdfMetadata = "Custom PDF metadata"
+editingTextInPdfsCaps = "Editing text in PDFs"
+enterpriseFeatures = "Enterprise features (SAML, Auditing)"
+perSeatLicensing = "Per-seat licensing"
+saveWithAnnualBilling = "Save with annual billing"
+selfHosted = "Self-hosted"
+selfHostedOnInfrastructure = "Self-hosted on your infrastructure"
+ssoOAuth = "SSO (OAuth2/OIDC)"
+unlimitedUsers = "Unlimited users"
+upToFiveUsers = "Up to 5 users"
+usageTrackingPrometheus = "Usage tracking & Prometheus"
+
 [plan.licenseWarning]
 body = "You have {{total}} users but the free tier only supports {{limit}} per server. Upgrade to keep Stirling PDF running smoothly."
 cta = "See plans"
@@ -6389,6 +6539,7 @@ allSessions = "All Sessions"
 allTools = "Tools"
 automate = "Automate"
 back = "Back"
+backToAllTools = "Back to all tools"
 certSign = "Certificate Sign"
 completedSessions = "Completed Sessions"
 completedTab = "Completed"
@@ -7060,6 +7211,9 @@ bullet3 = "Critical for approval workflows and legal chains of custody"
 description = "The order you specify when creating the session determines who signs first."
 title = "Signature Order"
 
+[settings]
+close = "Close"
+
 [settings.configuration]
 advanced = "Advanced"
 database = "Database"
@@ -7542,6 +7696,7 @@ sharedDescription = "All users can see and use these signatures."
 sharedHeading = "Shared Signatures"
 tempStorageDescription = "Signatures are stored in your browser only. They will be lost if you clear browser data or switch browsers."
 tempStorageTitle = "Temporary browser storage"
+use = "Use signature"
 
 [sign.saved.status]
 saved = "Saved"
@@ -8122,9 +8277,18 @@ center = "Center"
 left = "Left"
 right = "Right"
 
+[textInput]
+clear = "Clear input"
+
 [theme]
 toggle = "Toggle Theme"
 
+[time.relative]
+daysAgo = "{{count}}d ago"
+hoursAgo = "{{count}}h ago"
+justNow = "just now"
+minutesAgo = "{{count}}m ago"
+
 [timestampPdf]
 completed = "PDF timestamped successfully"
 desc = "Add an RFC 3161 document timestamp to your PDF using a trusted Time Stamp Authority (TSA) server."
@@ -8151,11 +8315,9 @@ label = "Select a TSA server"
 [timestampPdf.steps]
 settings = "Settings"
 
-[time.relative]
-daysAgo = "{{count}}d ago"
-hoursAgo = "{{count}}h ago"
-justNow = "just now"
-minutesAgo = "{{count}}m ago"
+[toast]
+dismiss = "Dismiss"
+toggleDetails = "Toggle details"
 
 [tool]
 endpointUnavailable = "This tool is unavailable on your server."
@@ -8243,6 +8405,9 @@ verification = "Verification"
 noSearchResults = "No tools found"
 noTools = "No tools available"
 
+[tooltip]
+close = "Close tooltip"
+
 [unlockPDFForms]
 description = "This tool will remove read-only restrictions from PDF form fields, making them editable and fillable."
 filenamePrefix = "unlocked_forms"
@@ -8269,6 +8434,7 @@ breakingChangesDefault = "This version contains breaking changes."
 breakingChangesDetected = "Breaking Changes Detected"
 breakingChangesMessage = "Some versions contain breaking changes. Please review the migration guides below before updating."
 close = "Close"
+closeModal = "Close update modal"
 current = "Current Version"
 defaultRecommendation = "This update contains important fixes and improvements."
 downloadLatest = "Download Latest"
@@ -8520,6 +8686,9 @@ typeInsertText = "Insert Text"
 typeReplaceText = "Replace Text"
 viewComment = "View comment"
 
+[viewer.error]
+noFileProvided = "Error: No file provided to viewer"
+
 [viewer.formBar]
 apply = "Apply Changes"
 dismiss = "Dismiss"
@@ -8529,6 +8698,9 @@ title = "Form Fields"
 unsavedBadge = "Unsaved"
 unsavedDesc = "You have unsaved changes"
 
+[viewer.link]
+delete = "Delete link"
+
 [viewer.nonPdf]
 columnDefault = "Column {{index}}"
 convertToPdf = "Convert to PDF"
@@ -8544,6 +8716,19 @@ renderMarkdown = "Render markdown"
 sortedBy = "Sorted by: {{column}}"
 textStats = "{{lines}} lines · {{size}}"
 
+[viewer.redaction]
+removeMark = "Remove this mark"
+
+[viewer.search]
+clear = "Clear search"
+close = "Close search"
+next = "Next result"
+previous = "Previous result"
+resultsOf = "of {{total}}"
+
+[viewer.signature]
+delete = "Delete signature"
+
 [viewPdf]
 header = "View PDF"
 tags = "view,read,annotate,text,image,highlight,edit"
@@ -8792,6 +8977,37 @@ toggleSidebar = "Toggle Sidebar"
 toggleTheme = "Toggle Theme"
 viewer = "Viewer"
 
+[workflow.participant]
+accessExpired = "Your access to this document has expired."
+certificateFile = "Certificate File"
+certificateFilePlaceholder = "Select certificate file"
+certificatePassword = "Certificate Password"
+certificateType = "Certificate Type"
+certTypeJks = "JKS Keystore"
+certTypeP12 = "P12/PKCS12 Certificate"
+certTypeServer = "Server Certificate (if available)"
+completedDeclined = "You have declined this document."
+completedSigned = "You have signed this document."
+decline = "Decline"
+downloadDocument = "Download Document"
+dueDate = "Due Date: {{date}}"
+errorTitle = "Error"
+from = "From: {{name}}"
+loadingSession = "Loading session..."
+location = "Location"
+locationPlaceholder = "e.g., San Francisco, CA"
+pageNumber = "Page Number (optional)"
+reason = "Reason"
+reasonPlaceholder = "e.g., Document approval"
+sessionNotFound = "Session not found or access denied."
+signDocument = "Sign Document"
+statusDeclined = "Declined"
+statusNotified = "Notified"
+statusPending = "Pending"
+statusSigned = "Signed"
+statusViewed = "Viewed"
+submitSignature = "Submit Signature"
+
 [workspace]
 title = "Workspace"
 

frontend/editor/src/core/components/annotation/shared/ColorControl.tsx

@@ -8,6 +8,7 @@ import {
   Group,
 } from "@mantine/core";
 import { useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import ColorizeIcon from "@mui/icons-material/Colorize";
 
 // safari and firefox do not support the eye dropper API, only edge, chrome and opera do.
@@ -33,6 +34,7 @@ export function ColorControl({
   label,
   disabled = false,
 }: ColorControlProps) {
+  const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
   // Buffer the colour locally so the picker stays responsive during drag.
   // Only propagate to the parent (which triggers expensive annotation updates)
@@ -111,7 +113,9 @@ export function ColorControl({
           />
           {supportsEyeDropper && (
             <Group justify="flex-end">
-              <Tooltip label="Pick colour from screen">
+              <Tooltip
+                label={t("color.eyeDropper.tooltip", "Pick colour from screen")}
+              >
                 <ActionIcon
                   variant="subtle"
                   color="gray"

frontend/editor/src/core/components/annotation/tools/ImageTool.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import { BaseAnnotationTool } from "@app/components/annotation/shared/BaseAnnotationTool";
 import { ImageUploader } from "@app/components/annotation/shared/ImageUploader";
 
@@ -12,6 +13,7 @@ export const ImageTool: React.FC<ImageToolProps> = ({
   onImageChange,
   disabled = false,
 }) => {
+  const { t } = useTranslation();
   const [, setImageData] = useState<string | null>(null);
 
   const handleImageUpload = async (file: File | null) => {
@@ -57,9 +59,12 @@ export const ImageTool: React.FC<ImageToolProps> = ({
         <ImageUploader
           onImageChange={handleImageUpload}
           disabled={disabled}
-          label="Upload Image"
-          placeholder="Select image file"
-          hint="Upload a PNG, JPG, SVG, or other image file to place on the PDF. SVG files will be converted to PNG for compatibility."
+          label={t("image.upload.label", "Upload Image")}
+          placeholder={t("image.upload.placeholder", "Select image file")}
+          hint={t(
+            "image.upload.hint",
+            "Upload a PNG, JPG, SVG, or other image file to place on the PDF. SVG files will be converted to PNG for compatibility.",
+          )}
         />
       </Stack>
     </BaseAnnotationTool>

frontend/editor/src/core/components/fileEditor/AddFileCard.tsx

@@ -134,7 +134,7 @@ const AddFileCard = ({
               )}
             </Button>
             <Button
-              aria-label="Upload"
+              aria-label={t("addFileCard.upload", "Upload")}
               style={{
                 backgroundColor: "var(--landing-button-bg)",
                 color: "var(--landing-button-color)",

frontend/editor/src/core/components/fileManager/EmptyFilesState.tsx

@@ -77,7 +77,7 @@ const EmptyFilesState: React.FC = () => {
           onMouseLeave={() => setIsUploadHover(false)}
         >
           <Button
-            aria-label="Upload"
+            aria-label={t("emptyFilesState.upload", "Upload")}
             style={{
               backgroundColor: "var(--bg-file-manager)",
               color: "var(--landing-button-color)",

frontend/editor/src/core/components/onboarding/slides/MFASetupSlide.tsx

@@ -16,6 +16,7 @@ import {
   TextInput,
 } from "@mantine/core";
 import { QRCodeSVG } from "qrcode.react";
+import { useTranslation } from "react-i18next";
 import { SlideConfig } from "@app/types/types";
 import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
 import { accountService } from "@app/services/accountService";
@@ -31,6 +32,7 @@ interface MFASetupSlideProps {
 }
 
 function MFASetupContent({ onMfaSetupComplete }: MFASetupSlideProps) {
+  const { t } = useTranslation();
   const [mfaSetupData, setMfaSetupData] = useState<MfaSetupResponse | null>(
     null,
   );
@@ -179,7 +181,9 @@ function MFASetupContent({ onMfaSetupComplete }: MFASetupSlideProps) {
           {mfaLoading && !isReady && (
             <Group gap="sm">
               <Loader size="sm" />
-              <Text size="sm">Generating your QR code…</Text>
+              <Text size="sm">
+                {t("onboarding.mfa.qrCodeLoading", "Generating your QR code…")}
+              </Text>
             </Group>
           )}
 
@@ -189,7 +193,10 @@ function MFASetupContent({ onMfaSetupComplete }: MFASetupSlideProps) {
             <Stack gap="sm">
               <TextInput
                 id="mfa-setup-code"
-                label="Authentication code"
+                label={t(
+                  "onboarding.mfa.authenticationCode",
+                  "Authentication code",
+                )}
                 placeholder="123456"
                 value={mfaSetupCode}
                 onChange={(event) =>

frontend/editor/src/core/components/onboarding/slides/SecurityCheckSlide.tsx

@@ -37,11 +37,20 @@ export default function SecurityCheckSlide({
           </div>
 
           <Select
-            placeholder="Confirm your role"
+            placeholder={i18n.t(
+              "onboarding.securityCheck.rolePlaceholder",
+              "Confirm your role",
+            )}
             value={selectedRole}
             data={[
-              { value: "admin", label: "Admin" },
-              { value: "user", label: "User" },
+              {
+                value: "admin",
+                label: i18n.t("onboarding.securityCheck.roleAdmin", "Admin"),
+              },
+              {
+                value: "user",
+                label: i18n.t("onboarding.securityCheck.roleUser", "User"),
+              },
             ]}
             onChange={(value) =>
               onRoleSelect((value as "admin" | "user") ?? null)

frontend/editor/src/core/components/pageEditor/PageEditor.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Text, Center, Box, LoadingOverlay, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import { useFileState, useFileActions } from "@app/contexts/FileContext";
 import {
   useNavigationGuard,
@@ -33,6 +34,7 @@ export interface PageEditorProps {
 }
 
 const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
+  const { t } = useTranslation();
   // Use split contexts to prevent re-renders
   const { state, selectors } = useFileState();
   const { actions } = useFileActions();
@@ -688,9 +690,14 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
             <Text size="lg" c="dimmed">
               📄
             </Text>
-            <Text c="dimmed">No PDF files loaded</Text>
+            <Text c="dimmed">
+              {t("pageEditor.emptyState.title", "No PDF files loaded")}
+            </Text>
             <Text size="sm" c="dimmed">
-              Add files to start editing pages
+              {t(
+                "pageEditor.emptyState.body",
+                "Add files to start editing pages",
+              )}
             </Text>
           </Stack>
         </Center>

frontend/editor/src/core/components/pageEditor/PageEditorControls.tsx

@@ -6,6 +6,7 @@ import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import DeleteIcon from "@mui/icons-material/Delete";
 import InsertPageBreakIcon from "@mui/icons-material/InsertPageBreak";
+import { useTranslation } from "react-i18next";
 
 interface PageEditorControlsProps {
   // Close/Reset functions
@@ -51,6 +52,7 @@ const PageEditorControls = ({
   displayDocument,
   splitPositions,
 }: PageEditorControlsProps) => {
+  const { t } = useTranslation();
   // Calculate split tooltip text using smart toggle logic
   const getSplitTooltip = () => {
     if (!splitPositions || !displayDocument || selectedPageIds.length === 0) {
@@ -131,7 +133,7 @@ const PageEditorControls = ({
         }}
       >
         {/* Undo/Redo */}
-        <Tooltip label="Undo">
+        <Tooltip label={t("pageEditor.toolbar.undo", "Undo")}>
           <ActionIcon
             onClick={onUndo}
             disabled={!canUndo}
@@ -145,7 +147,7 @@ const PageEditorControls = ({
             <UndoIcon />
           </ActionIcon>
         </Tooltip>
-        <Tooltip label="Redo">
+        <Tooltip label={t("pageEditor.toolbar.redo", "Redo")}>
           <ActionIcon
             onClick={onRedo}
             disabled={!canRedo}
@@ -170,7 +172,9 @@ const PageEditorControls = ({
         />
 
         {/* Page Operations */}
-        <Tooltip label="Rotate Selected Left">
+        <Tooltip
+          label={t("pageEditor.toolbar.rotateLeft", "Rotate Selected Left")}
+        >
           <ActionIcon
             onClick={() => onRotate("left")}
             disabled={selectedPageIds.length === 0}
@@ -187,7 +191,9 @@ const PageEditorControls = ({
             <RotateLeftIcon />
           </ActionIcon>
         </Tooltip>
-        <Tooltip label="Rotate Selected Right">
+        <Tooltip
+          label={t("pageEditor.toolbar.rotateRight", "Rotate Selected Right")}
+        >
           <ActionIcon
             onClick={() => onRotate("right")}
             disabled={selectedPageIds.length === 0}
@@ -204,7 +210,7 @@ const PageEditorControls = ({
             <RotateRightIcon />
           </ActionIcon>
         </Tooltip>
-        <Tooltip label="Delete Selected">
+        <Tooltip label={t("pageEditor.toolbar.delete", "Delete Selected")}>
           <ActionIcon
             onClick={onDelete}
             disabled={selectedPageIds.length === 0}

frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx

@@ -26,7 +26,10 @@ const OperatorsSection = ({
           className={classes.operatorChip}
           onClick={() => onInsertOperator("and")}
           disabled={!csvInput.trim()}
-          title="Combine selections (both conditions must be true)"
+          title={t(
+            "bulkSelection.operators.and.title",
+            "Combine selections (both conditions must be true)",
+          )}
         >
           <Text size="xs" fw={500}>
             and
@@ -38,7 +41,10 @@ const OperatorsSection = ({
           className={classes.operatorChip}
           onClick={() => onInsertOperator("or")}
           disabled={!csvInput.trim()}
-          title="Add to selection (either condition can be true)"
+          title={t(
+            "bulkSelection.operators.or.title",
+            "Add to selection (either condition can be true)",
+          )}
         >
           <Text size="xs" fw={500}>
             or
@@ -50,7 +56,10 @@ const OperatorsSection = ({
           className={classes.operatorChip}
           onClick={() => onInsertOperator("not")}
           disabled={!csvInput.trim()}
-          title="Exclude from selection"
+          title={t(
+            "bulkSelection.operators.not.title",
+            "Exclude from selection",
+          )}
         >
           <Text size="xs" fw={500}>
             not
@@ -64,7 +73,10 @@ const OperatorsSection = ({
           variant="outline"
           className={classes.operatorChip}
           onClick={() => onInsertOperator("even")}
-          title="Select all even-numbered pages (2, 4, 6, 8...)"
+          title={t(
+            "bulkSelection.operators.even.title",
+            "Select all even-numbered pages (2, 4, 6, 8...)",
+          )}
         >
           <Text size="xs" fw={500}>
             even
@@ -75,7 +87,10 @@ const OperatorsSection = ({
           variant="outline"
           className={classes.operatorChip}
           onClick={() => onInsertOperator("odd")}
-          title="Select all odd-numbered pages (1, 3, 5, 7...)"
+          title={t(
+            "bulkSelection.operators.odd.title",
+            "Select all odd-numbered pages (1, 3, 5, 7...)",
+          )}
         >
           <Text size="xs" fw={500}>
             odd

frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/PageSelectionInput.tsx

@@ -45,7 +45,9 @@ const PageSelectionInput = ({
               height="1rem"
               style={{ color: "var(--text-instruction)" }}
             />
-            <Text>Page Selection</Text>
+            <Text>
+              {t("bulkSelection.pageSelection.title", "Page Selection")}
+            </Text>
           </Flex>
         </Tooltip>
         {typeof advancedOpened === "boolean" && (

frontend/editor/src/core/components/shared/AppConfigModal.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { Badge, Modal, Text, ActionIcon, Tooltip, Group } from "@mantine/core";
 import { useNavigate, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { useConfigNavSections } from "@app/components/shared/config/configNavSections";
 import { NavKey, VALID_NAV_KEYS } from "@app/components/shared/config/types";
@@ -33,6 +34,7 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
   opened,
   onClose,
 }) => {
+  const { t } = useTranslation();
   const [active, setActive] = useState<NavKey>("general");
   const isMobile = useIsMobile();
   const navigate = useNavigate();
@@ -332,7 +334,7 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
                   ref={closeButtonRef}
                   variant="subtle"
                   onClick={handleClose}
-                  aria-label="Close"
+                  aria-label={t("settings.close", "Close")}
                   data-autofocus
                 >
                   <LocalIcon icon="close-rounded" width={18} height={18} />

frontend/editor/src/core/components/shared/DropdownListWithFooter.tsx

@@ -8,6 +8,7 @@ import {
   Group,
   TextInput,
 } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 import SearchIcon from "@mui/icons-material/Search";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
@@ -71,6 +72,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
   withinPortal = true,
   zIndex = Z_INDEX_AUTOMATE_DROPDOWN,
 }) => {
+  const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState("");
 
   const isMultiValue = Array.isArray(value);
@@ -184,7 +186,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
                 }}
               >
                 <TextInput
-                  placeholder="Search..."
+                  placeholder={t("dropdownList.searchPlaceholder", "Search...")}
                   value={searchTerm}
                   onChange={handleSearchChange}
                   leftSection={<SearchIcon style={{ fontSize: "1rem" }} />}

frontend/editor/src/core/components/shared/EditableSecretField.tsx

@@ -98,8 +98,11 @@ export default function EditableSecretField({
               variant="light"
               onClick={handleEdit}
               disabled={disabled}
-              title="Edit"
-              aria-label="Edit secret value"
+              title={t("editableSecretField.edit", "Edit")}
+              aria-label={t(
+                "editableSecretField.editSecretValue",
+                "Edit secret value",
+              )}
             >
               <LocalIcon icon="edit" width="1rem" height="1rem" />
             </ActionIcon>

frontend/editor/src/core/components/shared/FileCard.tsx

@@ -111,7 +111,7 @@ const FileCard = ({
               onClick={(e) => e.stopPropagation()}
             >
               {onView && (
-                <Tooltip label="View in Viewer">
+                <Tooltip label={t("fileCard.viewInViewer", "View in Viewer")}>
                   <ActionIcon
                     size="sm"
                     variant="subtle"
@@ -126,7 +126,9 @@ const FileCard = ({
                 </Tooltip>
               )}
               {onEdit && (
-                <Tooltip label="Open in File Editor">
+                <Tooltip
+                  label={t("fileCard.openInFileEditor", "Open in File Editor")}
+                >
                   <ActionIcon
                     size="sm"
                     variant="subtle"

frontend/editor/src/core/components/shared/FileDropdownMenu.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Menu, Loader, Group, Text, ActionIcon, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import CloseIcon from "@mui/icons-material/Close";
@@ -28,6 +29,7 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
   switchingTo,
   viewOptionStyle,
 }) => {
+  const { t } = useTranslation();
   return (
     <Menu trigger="click" position="bottom" width="30rem">
       <Menu.Target>
@@ -95,7 +97,10 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
                     </Text>
                   )}
                   {onFileRemove && (
-                    <Tooltip label="Close file" withArrow>
+                    <Tooltip
+                      label={t("fileDropdownMenu.closeFile", "Close file")}
+                      withArrow
+                    >
                       <ActionIcon
                         component="div"
                         size="xs"

frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
 import type { FileId } from "@app/types/file";
@@ -141,6 +142,7 @@ export function FileItem({
   onClick,
   onEyeClick,
 }: FileItemProps) {
+  const { t } = useTranslation();
   const ext = getFileExtension(name);
   const dateLabel = lastModified ? formatFileDate(lastModified) : "";
   const typeLabel = ext ? ext.toUpperCase() : "File";
@@ -215,7 +217,11 @@ export function FileItem({
           }}
           tabIndex={-1}
           type="button"
-          aria-label={isViewedInViewer ? "Close viewer" : "Open in viewer"}
+          aria-label={
+            isViewedInViewer
+              ? t("fileSidebar.fileItem.closeViewer", "Close viewer")
+              : t("fileSidebar.fileItem.openInViewer", "Open in viewer")
+          }
         >
           <VisibilityOutlinedIcon
             className="file-sidebar-eye-open"

frontend/editor/src/core/components/shared/InfoBanner.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { Paper, Group, Text, Button, ActionIcon, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import LocalIcon from "@app/components/shared/LocalIcon";
 
 type InfoBannerTone = "info" | "warning";
@@ -85,6 +86,7 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
   closeIconColor,
   compact = false,
 }) => {
+  const { t } = useTranslation();
   if (!show) {
     return null;
   }
@@ -192,7 +194,7 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
               color={closeIconColor ? undefined : "gray"}
               size="sm"
               onClick={handleDismiss}
-              aria-label="Dismiss"
+              aria-label={t("infoBanner.dismiss", "Dismiss")}
               style={closeIconColor ? { color: closeIconColor } : undefined}
             >
               <LocalIcon

frontend/editor/src/core/components/shared/TextInput.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import styles from "@app/components/shared/textInput/TextInput.module.css";
 
@@ -63,6 +64,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     },
     ref,
   ) => {
+    const { t } = useTranslation();
     const handleClear = () => {
       if (onClear) {
         onClear();
@@ -112,7 +114,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             type="button"
             className={styles.clearButton}
             onClick={handleClear}
-            aria-label="Clear input"
+            aria-label={t("textInput.clear", "Clear input")}
           >
             <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
           </button>

frontend/editor/src/core/components/shared/Tooltip.tsx

@@ -6,6 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { addEventListenerWithCleanup } from "@app/utils/genericUtils";
 import { useTooltipPosition } from "@app/hooks/useTooltipPosition";
@@ -68,6 +69,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   manualCloseOnly = false,
   showCloseButton = false,
 }) => {
+  const { t } = useTranslation();
   const [internalOpen, setInternalOpen] = useState(false);
   const [isPinned, setIsPinned] = useState(false);
   const { tooltipLogo } = useLogoAssets();
@@ -401,8 +403,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
             setIsPinned(false);
             setOpen(false);
           }}
-          title="Close tooltip"
-          aria-label="Close tooltip"
+          title={t("tooltip.close", "Close tooltip")}
+          aria-label={t("tooltip.close", "Close tooltip")}
         >
           <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
         </button>

frontend/editor/src/core/components/shared/UpdateModal.tsx

@@ -259,7 +259,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
               onClick={onClose}
               size="lg"
               variant="subtle"
-              aria-label="Close update modal"
+              aria-label={t("update.closeModal", "Close update modal")}
             />
           )}
         </Group>

frontend/editor/src/core/components/shared/ViewerInlineControls.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { ActionIcon, Slider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import { useViewer } from "@app/contexts/ViewerContext";
 import { useNavigationState } from "@app/contexts/NavigationContext";
 import ZoomInIcon from "@mui/icons-material/ZoomIn";
@@ -9,6 +10,7 @@ import ZoomOutIcon from "@mui/icons-material/ZoomOut";
  * Compact zoom controls rendered inline in the WorkbenchBar when the current workbench is "viewer".
  */
 export function ViewerInlineControls() {
+  const { t } = useTranslation();
   const { workbench } = useNavigationState();
   const viewer = useViewer();
 
@@ -39,7 +41,7 @@ export function ViewerInlineControls() {
         radius="md"
         className="workbench-bar-action-icon"
         onClick={() => viewer.zoomActions.zoomOut()}
-        aria-label="Zoom out"
+        aria-label={t("viewer.zoomOut", "Zoom out")}
       >
         <ZoomOutIcon sx={{ fontSize: "1rem" }} />
       </ActionIcon>
@@ -68,7 +70,7 @@ export function ViewerInlineControls() {
         radius="md"
         className="workbench-bar-action-icon"
         onClick={() => viewer.zoomActions.zoomIn()}
-        aria-label="Zoom in"
+        aria-label={t("viewer.zoomIn", "Zoom in")}
       >
         <ZoomInIcon sx={{ fontSize: "1rem" }} />
       </ActionIcon>

frontend/editor/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx

@@ -15,6 +15,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { ActionIcon, Divider } from "@mantine/core";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import { useTranslation } from "react-i18next";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 import {
   useNavigationState,
@@ -37,6 +38,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({
   setActiveButton,
   tooltipPosition = "right",
 }) => {
+  const { t } = useTranslation();
   const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } =
     useToolWorkflow();
   const { hasUnsavedChanges } = useNavigationState();
@@ -158,7 +160,11 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({
           <div className="current-tool-content">
             <div className="flex flex-col items-center gap-1">
               <Tooltip
-                content={isBackHover ? "Back to all tools" : indicatorTool.name}
+                content={
+                  isBackHover
+                    ? t("quickAccess.backToAllTools", "Back to all tools")
+                    : indicatorTool.name
+                }
                 position={tooltipPosition}
                 arrow
                 maxWidth={140}
@@ -183,7 +189,9 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({
                   onMouseEnter={() => setIsBackHover(true)}
                   onMouseLeave={() => setIsBackHover(false)}
                   aria-label={
-                    isBackHover ? "Back to all tools" : indicatorTool.name
+                    isBackHover
+                      ? t("quickAccess.backToAllTools", "Back to all tools")
+                      : indicatorTool.name
                   }
                   style={{
                     backgroundColor: isBackHover

frontend/editor/src/core/components/toast/ToastRenderer.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useToast } from "@app/components/toast/ToastContext";
 import { ToastInstance, ToastLocation } from "@app/components/toast/types";
 import { LocalIcon } from "@app/components/shared/LocalIcon";
@@ -38,6 +39,7 @@ function getDefaultIconName(t: ToastInstance): string {
 }
 
 export default function ToastRenderer() {
+  const { t: translate } = useTranslation();
   const { toasts, dismiss } = useToast();
 
   const grouped = toasts.reduce<Record<ToastLocation, ToastInstance[]>>(
@@ -88,7 +90,10 @@ export default function ToastRenderer() {
                   <div className="toast-controls">
                     {t.expandable && (
                       <button
-                        aria-label="Toggle details"
+                        aria-label={translate(
+                          "toast.toggleDetails",
+                          "Toggle details",
+                        )}
                         onClick={() => {
                           const evt = new CustomEvent("toast:toggle", {
                             detail: { id: t.id },
@@ -101,7 +106,7 @@ export default function ToastRenderer() {
                       </button>
                     )}
                     <button
-                      aria-label="Dismiss"
+                      aria-label={translate("toast.dismiss", "Dismiss")}
                       onClick={() => dismiss(t.id)}
                       className="toast-button"
                     >

frontend/editor/src/core/components/tools/compress/CompressSettings.tsx

@@ -99,11 +99,14 @@ const CompressSettings = ({
       {parameters.compressionMethod === "filesize" && (
         <Stack gap="sm">
           <Text size="sm" fw={500}>
-            Desired File Size
+            {t("compress.settings.desiredSize", "Desired File Size")}
           </Text>
           <div style={{ display: "flex", gap: "8px", alignItems: "flex-end" }}>
             <NumberInput
-              placeholder="Enter size"
+              placeholder={t(
+                "compress.settings.desiredSizePlaceholder",
+                "Enter size",
+              )}
               value={parameters.fileSizeValue}
               onChange={(value) =>
                 onParameterChange("fileSizeValue", value?.toString() || "")

frontend/editor/src/core/components/tools/ocr/LanguagePicker.tsx

@@ -139,7 +139,9 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
     return (
       <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
         <Loader size="xs" />
-        <Text size="sm">Loading available languages...</Text>
+        <Text size="sm">
+          {t("ocr.languagePicker.loading", "Loading available languages...")}
+        </Text>
       </div>
     );
   }

frontend/editor/src/core/components/tools/pageLayout/PageLayoutMarginsBordersSettings.tsx

@@ -75,7 +75,7 @@ export default function PageLayoutMarginsBordersSettings({
     <Stack gap="sm">
       <NumberInput
         label={t("pageLayout.top", "Top Margin")}
-        placeholder="Enter top margin"
+        placeholder={t("pageLayout.margins.topPlaceholder", "Enter top margin")}
         value={parameters.topMargin}
         onChange={(v) => onParameterChange("topMargin", Number(v))}
         min={0}
@@ -85,7 +85,10 @@ export default function PageLayoutMarginsBordersSettings({
       />
       <NumberInput
         label={t("pageLayout.bottom", "Bottom Margin")}
-        placeholder="Enter bottom margin"
+        placeholder={t(
+          "pageLayout.margins.bottomPlaceholder",
+          "Enter bottom margin",
+        )}
         value={parameters.bottomMargin}
         onChange={(v) => onParameterChange("bottomMargin", Number(v))}
         min={0}
@@ -95,7 +98,10 @@ export default function PageLayoutMarginsBordersSettings({
       />
       <NumberInput
         label={t("pageLayout.left", "Left Margin")}
-        placeholder="Enter left margin"
+        placeholder={t(
+          "pageLayout.margins.leftPlaceholder",
+          "Enter left margin",
+        )}
         value={parameters.leftMargin}
         onChange={(v) => onParameterChange("leftMargin", Number(v))}
         min={0}
@@ -104,7 +110,10 @@ export default function PageLayoutMarginsBordersSettings({
       />
       <NumberInput
         label={t("pageLayout.right", "Right Margin")}
-        placeholder="Enter right margin"
+        placeholder={t(
+          "pageLayout.margins.rightPlaceholder",
+          "Enter right margin",
+        )}
         value={parameters.rightMargin}
         onChange={(v) => onParameterChange("rightMargin", Number(v))}
         min={0}
@@ -114,7 +123,10 @@ export default function PageLayoutMarginsBordersSettings({
       />
       <NumberInput
         label={t("pageLayout.innerMargin", "Inner Margin")}
-        placeholder="Enter inner margin"
+        placeholder={t(
+          "pageLayout.margins.innerPlaceholder",
+          "Enter inner margin",
+        )}
         value={parameters.innerMargin}
         onChange={(v) => onParameterChange("innerMargin", Number(v))}
         min={0}
@@ -137,7 +149,10 @@ export default function PageLayoutMarginsBordersSettings({
       {parameters.addBorder && (
         <NumberInput
           label={t("pageLayout.borderWidth", "Border Thickness")}
-          placeholder="Enter border thickness"
+          placeholder={t(
+            "pageLayout.margins.borderThicknessPlaceholder",
+            "Enter border thickness",
+          )}
           value={parameters.borderWidth}
           onChange={(v) => onParameterChange("borderWidth", Number(v))}
           min={1}

frontend/editor/src/core/components/tools/pageLayout/PageLayoutSettings.tsx

@@ -80,7 +80,7 @@ export default function PageLayoutSettings({
         <>
           <NumberInput
             label={t("pageLayout.rows", "Rows")}
-            placeholder="Enter rows"
+            placeholder={t("pageLayout.rowsPlaceholder", "Enter rows")}
             value={parameters.rows}
             onChange={(v) => onParameterChange("rows", Number(v))}
             min={1}
@@ -90,7 +90,7 @@ export default function PageLayoutSettings({
 
           <NumberInput
             label={t("pageLayout.cols", "Columns")}
-            placeholder="Enter columns"
+            placeholder={t("pageLayout.colsPlaceholder", "Enter columns")}
             value={parameters.cols}
             onChange={(v) => onParameterChange("cols", Number(v))}
             min={1}

frontend/editor/src/core/components/tools/sign/SavedSignaturesSection.tsx

@@ -353,7 +353,7 @@ export const SavedSignaturesSection = ({
                       <ActionIcon
                         variant="subtle"
                         color="blue"
-                        aria-label="Use signature"
+                        aria-label={t("sign.saved.use", "Use signature")}
                         onClick={() => onUseSignature(activePersonalSignature)}
                         disabled={disabled}
                       >
@@ -480,7 +480,7 @@ export const SavedSignaturesSection = ({
                       <ActionIcon
                         variant="subtle"
                         color="blue"
-                        aria-label="Use signature"
+                        aria-label={t("sign.saved.use", "Use signature")}
                         onClick={() => onUseSignature(activeSharedSignature)}
                         disabled={disabled}
                       >
@@ -618,7 +618,7 @@ export const SavedSignaturesSection = ({
                         <ActionIcon
                           variant="subtle"
                           color="blue"
-                          aria-label="Use signature"
+                          aria-label={t("sign.saved.use", "Use signature")}
                           onClick={() =>
                             onUseSignature(activeLocalStorageSignature)
                           }

frontend/editor/src/core/components/tooltips/usePageSelectionTips.ts

@@ -32,16 +32,16 @@ export const usePageSelectionTips = (): TooltipContent => {
         ),
         bullets: [
           t(
-            "bulkSelection.operators.and",
-            'AND: & or "and" — require both conditions (e.g., 1-50 & even)',
+            "bulkSelection.operators.descriptions.and",
+            'AND: & or "and" - require both conditions (e.g., 1-50 & even)',
           ),
           t(
-            "bulkSelection.operators.comma",
-            "Comma: , or | — combine selections (e.g., 1-10, 20)",
+            "bulkSelection.operators.descriptions.comma",
+            "Comma: , or | - combine selections (e.g., 1-10, 20)",
           ),
           t(
-            "bulkSelection.operators.not",
-            'NOT: ! or "not" — exclude pages (e.g., 3n & not 30)',
+            "bulkSelection.operators.descriptions.not",
+            'NOT: ! or "not" - exclude pages (e.g., 3n & not 30)',
           ),
         ],
       },

frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx

@@ -1176,7 +1176,12 @@ const EmbedPdfViewerContent = ({
 
       {!effectiveFile ? (
         <Center style={{ flex: 1 }}>
-          <Text c="red">Error: No file provided to viewer</Text>
+          <Text c="red">
+            {t(
+              "viewer.error.noFileProvided",
+              "Error: No file provided to viewer",
+            )}
+          </Text>
         </Center>
       ) : isCurrentFileEncrypted ? (
         <Center style={{ flex: 1 }}>

frontend/editor/src/core/components/viewer/LinkLayer.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { useDocumentState } from "@embedpdf/core/react";
 import { useScroll } from "@embedpdf/plugin-scroll/react";
 import { useAnnotation } from "@embedpdf/plugin-annotation/react";
@@ -143,6 +144,7 @@ const LinkToolbar: React.FC<LinkToolbarProps> = React.memo(
     onMouseEnter,
     onMouseLeave,
   }) => {
+    const { t } = useTranslation();
     const centerX =
       (annotationLink.rect.origin.x + annotationLink.rect.size.width / 2) *
       scale;
@@ -170,8 +172,8 @@ const LinkToolbar: React.FC<LinkToolbarProps> = React.memo(
             e.stopPropagation();
             onDelete(annotationLink);
           }}
-          aria-label="Delete link"
-          title="Delete link"
+          aria-label={t("viewer.link.delete", "Delete link")}
+          title={t("viewer.link.delete", "Delete link")}
         >
           <TrashIcon />
         </button>

frontend/editor/src/core/components/viewer/LocalEmbedPDFWithAnnotations.tsx

@@ -6,6 +6,7 @@ import {
   forwardRef,
   useRef,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { createPluginRegistration } from "@embedpdf/core";
 import type { PluginRegistry } from "@embedpdf/core";
 import { EmbedPDF } from "@embedpdf/core/react";
@@ -157,6 +158,7 @@ export const LocalEmbedPDFWithAnnotations = forwardRef<
     },
     ref,
   ) => {
+    const { t } = useTranslation();
     const [pdfUrl, setPdfUrl] = useState<string | null>(null);
     const annotationApiRef = useRef<any>(null);
     const zoomApiRef = useRef<any>(null);
@@ -653,7 +655,10 @@ export const LocalEmbedPDFWithAnnotations = forwardRef<
                                               ),
                                             );
                                           }}
-                                          aria-label="Delete signature"
+                                          aria-label={t(
+                                            "viewer.signature.delete",
+                                            "Delete signature",
+                                          )}
                                         >
                                           <CloseIcon
                                             style={{ fontSize: "0.8rem" }}

frontend/editor/src/core/components/viewer/RedactionSelectionMenu.tsx

@@ -139,7 +139,7 @@ function RedactionSelectionMenuInner({
       }}
     >
       <Group gap="sm" wrap="nowrap" justify="center">
-        <Tooltip label="Remove this mark">
+        <Tooltip label={t("viewer.redaction.removeMark", "Remove this mark")}>
           <ActionIcon
             variant="subtle"
             color="gray"

frontend/editor/src/core/components/viewer/SearchInterface.tsx

@@ -203,7 +203,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
           variant="subtle"
           size="sm"
           onClick={handleCloseClick}
-          aria-label="Close search"
+          aria-label={t("viewer.search.close", "Close search")}
         >
           <LocalIcon icon="close" width="1rem" height="1rem" />
         </ActionIcon>
@@ -227,7 +227,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
               <ActionIcon
                 variant="subtle"
                 onClick={handleClearSearch}
-                aria-label="Clear search"
+                aria-label={t("viewer.search.clear", "Clear search")}
               >
                 <LocalIcon icon="close" width="0.875rem" height="0.875rem" />
               </ActionIcon>
@@ -267,7 +267,9 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
             disabled={!resultInfo || resultInfo.totalResults === 0}
           />
           <Text size="sm" c="dimmed">
-            of {resultInfo?.totalResults || 0}
+            {t("viewer.search.resultsOf", "of {{total}}", {
+              total: resultInfo?.totalResults || 0,
+            })}
           </Text>
         </Group>
 
@@ -277,7 +279,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
             size="sm"
             onClick={handlePrevious}
             disabled={!resultInfo || resultInfo.currentIndex <= 1}
-            aria-label="Previous result"
+            aria-label={t("viewer.search.previous", "Previous result")}
           >
             <LocalIcon icon="keyboard-arrow-up" width="1rem" height="1rem" />
           </ActionIcon>
@@ -288,7 +290,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
             disabled={
               !resultInfo || resultInfo.currentIndex >= resultInfo.totalResults
             }
-            aria-label="Next result"
+            aria-label={t("viewer.search.next", "Next result")}
           >
             <LocalIcon icon="keyboard-arrow-down" width="1rem" height="1rem" />
           </ActionIcon>

frontend/editor/src/core/tools/formFill/FormFieldSidebar.tsx

@@ -34,7 +34,7 @@ interface FormFieldSidebarProps {
 }
 
 export function FormFieldSidebar({ visible, onToggle }: FormFieldSidebarProps) {
-  useTranslation();
+  const { t } = useTranslation();
   const { state, setValue, setActiveField } = useFormFill();
   const { fields, activeFieldName, loading } = state;
   const activeFieldRef = useRef<HTMLDivElement>(null);
@@ -119,7 +119,7 @@ export function FormFieldSidebar({ visible, onToggle }: FormFieldSidebarProps) {
           variant="subtle"
           size="sm"
           onClick={onToggle}
-          aria-label="Close sidebar"
+          aria-label={t("formFill.sidebar.close", "Close sidebar")}
         >
           <CloseIcon sx={{ fontSize: 16 }} />
         </ActionIcon>

frontend/editor/src/core/tools/formFill/FormFill.tsx

@@ -27,6 +27,7 @@ import {
   Tooltip,
   ActionIcon,
 } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import {
   useFormFill,
   useAllFormValues,
@@ -120,6 +121,7 @@ const _MODE_TABS: ModeTabDef[] = [
 // ---------------------------------------------------------------------------
 
 const FormFill = (_props: BaseToolProps) => {
+  const { t } = useTranslation();
   const { selectedTool } = useNavigation();
   const { selectors, state: fileState } = useFileState();
 
@@ -488,7 +490,10 @@ const FormFill = (_props: BaseToolProps) => {
 
                 {/* Flatten toggle */}
                 <Switch
-                  label="Flatten after filling"
+                  label={t(
+                    "formFill.flattenAfterFilling",
+                    "Flatten after filling",
+                  )}
                   checked={flatten}
                   onChange={(e) => setFlatten(e.currentTarget.checked)}
                   size="xs"
@@ -507,15 +512,22 @@ const FormFill = (_props: BaseToolProps) => {
                       loading={saving}
                       disabled={!formState.isDirty && !flattenChanged}
                     >
-                      Save
+                      {t("formFill.save", "Save")}
                     </Button>
 
-                    <Tooltip label="Re-scan fields" withArrow position="bottom">
+                    <Tooltip
+                      label={t("formFill.rescanFields", "Re-scan fields")}
+                      withArrow
+                      position="bottom"
+                    >
                       <ActionIcon
                         variant="light"
                         size="md"
                         onClick={handleRefresh}
-                        aria-label="Re-scan form fields"
+                        aria-label={t(
+                          "formFill.rescanFormFields",
+                          "Re-scan form fields",
+                        )}
                       >
                         <RefreshIcon sx={{ fontSize: 16 }} />
                       </ActionIcon>

frontend/editor/src/proprietary/components/shared/config/OverviewHeader.tsx

@@ -39,13 +39,15 @@ export function OverviewHeader() {
           </Text>
           {user?.email && (
             <Text size="xs" c="dimmed" mt="0.25rem">
-              Signed in as: {user.email}
+              {t("account.overview.signedInAs", "Signed in as: {{email}}", {
+                email: user.email,
+              })}
             </Text>
           )}
         </div>
         {user && (
           <Button color="red" variant="filled" onClick={handleLogout}>
-            Log out
+            {t("account.overview.logOut", "Log out")}
           </Button>
         )}
       </div>

frontend/editor/src/proprietary/components/shared/config/configSections/AdminAdvancedSection.tsx

@@ -809,7 +809,10 @@ export default function AdminAdvancedSection() {
                     },
                   })
                 }
-                placeholder="Default: java.io.tmpdir/stirling-pdf"
+                placeholder={t(
+                  "admin.settings.advanced.tempFileManagement.baseTmpDir.placeholder",
+                  "Default: java.io.tmpdir/stirling-pdf",
+                )}
                 disabled={!loginEnabled}
               />
             </div>
@@ -834,7 +837,10 @@ export default function AdminAdvancedSection() {
                     },
                   })
                 }
-                placeholder="Default: baseTmpDir/libreoffice"
+                placeholder={t(
+                  "admin.settings.advanced.tempFileManagement.libreofficeDir.placeholder",
+                  "Default: baseTmpDir/libreoffice",
+                )}
                 disabled={!loginEnabled}
               />
             </div>
@@ -859,7 +865,10 @@ export default function AdminAdvancedSection() {
                     },
                   })
                 }
-                placeholder="System temp directory path"
+                placeholder={t(
+                  "admin.settings.advanced.tempFileManagement.systemTempDir.placeholder",
+                  "System temp directory path",
+                )}
                 disabled={!loginEnabled}
               />
             </div>

frontend/editor/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx

@@ -698,7 +698,10 @@ export default function AdminDatabaseSection() {
                     onChange={(value) =>
                       setSettings({ ...settings, password: value })
                     }
-                    placeholder="Enter database password"
+                    placeholder={t(
+                      "admin.settings.database.password.placeholder",
+                      "Enter database password",
+                    )}
                     disabled={!loginEnabled}
                   />
                 </div>

frontend/editor/src/proprietary/components/shared/config/configSections/AdminEndpointsSection.tsx

@@ -296,7 +296,10 @@ export default function AdminEndpointsSection() {
                 }))}
                 searchable
                 clearable
-                placeholder="Select endpoints to disable"
+                placeholder={t(
+                  "admin.settings.endpoints.toRemove.placeholder",
+                  "Select endpoints to disable",
+                )}
                 comboboxProps={{ zIndex: 1400 }}
                 disabled={!loginEnabled}
               />
@@ -330,7 +333,10 @@ export default function AdminEndpointsSection() {
                 }))}
                 searchable
                 clearable
-                placeholder="Select groups to disable"
+                placeholder={t(
+                  "admin.settings.endpoints.groupsToRemove.placeholder",
+                  "Select groups to disable",
+                )}
                 comboboxProps={{ zIndex: 1400 }}
                 disabled={!loginEnabled}
               />

frontend/editor/src/proprietary/components/shared/config/configSections/AdminMailSection.tsx

@@ -286,7 +286,10 @@ export default function AdminMailSection() {
                 onChange={(value) =>
                   setSettings({ ...settings, password: value })
                 }
-                placeholder="Enter SMTP password"
+                placeholder={t(
+                  "admin.settings.mail.password.placeholder",
+                  "Enter SMTP password",
+                )}
               />
             </div>
 

frontend/editor/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx

@@ -183,8 +183,14 @@ const AdminPlanSection: React.FC = () => {
 
   if (!plans || plans.length === 0) {
     return (
-      <Alert color="yellow" title="No data available">
-        Plans data is not available at the moment.
+      <Alert
+        color="yellow"
+        title={t("admin.settings.plan.noData.title", "No data available")}
+      >
+        {t(
+          "admin.settings.plan.noData.message",
+          "Plans data is not available at the moment.",
+        )}
       </Alert>
     );
   }

frontend/editor/src/proprietary/components/shared/config/configSections/AdminPremiumSection.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import {
   TextInput,
   Switch,
@@ -132,17 +132,29 @@ export default function AdminPremiumSection() {
             </List.Item>
             <List.Item>
               <Text size="sm" component="span">
-                <strong>Custom Metadata</strong> (PRO) - General
+                <Trans
+                  i18nKey="admin.settings.premium.movedFeatures.customMetadata"
+                  defaults="<0>Custom Metadata</0> (PRO) - General"
+                  components={[<strong />]}
+                />
               </Text>
             </List.Item>
             <List.Item>
               <Text size="sm" component="span">
-                <strong>Audit Logging</strong> (ENTERPRISE) - Security
+                <Trans
+                  i18nKey="admin.settings.premium.movedFeatures.auditLogging"
+                  defaults="<0>Audit Logging</0> (ENTERPRISE) - Security"
+                  components={[<strong />]}
+                />
               </Text>
             </List.Item>
             <List.Item>
               <Text size="sm" component="span">
-                <strong>Database Configuration</strong> (ENTERPRISE) - Database
+                <Trans
+                  i18nKey="admin.settings.premium.movedFeatures.databaseConfiguration"
+                  defaults="<0>Database Configuration</0> (ENTERPRISE) - Database"
+                  components={[<strong />]}
+                />
               </Text>
             </List.Item>
           </List>

frontend/editor/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx

@@ -11,7 +11,10 @@ import {
 import { useTranslation } from "react-i18next";
 import { alert } from "@app/components/toast";
 import { LicenseInfo, mapLicenseToTier } from "@app/services/licenseService";
-import { PLAN_FEATURES, PLAN_HIGHLIGHTS } from "@app/constants/planConstants";
+import {
+  usePlanFeatures,
+  usePlanHighlights,
+} from "@app/constants/planConstants";
 import FeatureComparisonTable from "@app/components/shared/config/configSections/plan/FeatureComparisonTable";
 import StaticCheckoutModal from "@app/components/shared/config/configSections/plan/StaticCheckoutModal";
 import LicenseKeySection from "@app/components/shared/config/configSections/plan/LicenseKeySection";
@@ -32,6 +35,8 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({
   currentLicenseInfo,
 }) => {
   const { t } = useTranslation();
+  const planFeatures = usePlanFeatures();
+  const planHighlights = usePlanHighlights();
   const [showComparison, setShowComparison] = useState(false);
 
   // Static checkout modal state
@@ -88,8 +93,8 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({
       price: 0,
       currency: "£",
       period: "",
-      highlights: PLAN_HIGHLIGHTS.FREE,
-      features: PLAN_FEATURES.FREE,
+      highlights: planHighlights.FREE,
+      features: planFeatures.FREE,
       maxUsers: 5,
     },
     {
@@ -99,8 +104,8 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({
       currency: "",
       period: "",
       popular: false,
-      highlights: PLAN_HIGHLIGHTS.SERVER_MONTHLY,
-      features: PLAN_FEATURES.SERVER,
+      highlights: planHighlights.SERVER_MONTHLY,
+      features: planFeatures.SERVER,
       maxUsers: "Unlimited users",
     },
     {
@@ -109,8 +114,8 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({
       price: 0,
       currency: "",
       period: "",
-      highlights: PLAN_HIGHLIGHTS.ENTERPRISE_MONTHLY,
-      features: PLAN_FEATURES.ENTERPRISE,
+      highlights: planHighlights.ENTERPRISE_MONTHLY,
+      features: planFeatures.ENTERPRISE,
       maxUsers: "Custom",
     },
   ];

frontend/editor/src/proprietary/components/workflow/ParticipantView.tsx

@@ -185,14 +185,20 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
     return (
       <Stack align="center" justify="center" p="xl">
         <Loader size="lg" />
-        <Text c="dimmed">Loading session...</Text>
+        <Text c="dimmed">
+          {t("workflow.participant.loadingSession", "Loading session...")}
+        </Text>
       </Stack>
     );
   }
 
   if (error) {
     return (
-      <Alert icon={<InfoIcon fontSize="small" />} color="red" title="Error">
+      <Alert
+        icon={<InfoIcon fontSize="small" />}
+        color="red"
+        title={t("workflow.participant.errorTitle", "Error")}
+      >
         {error}
       </Alert>
     );
@@ -201,7 +207,10 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
   if (!session || !participant) {
     return (
       <Alert icon={<InfoIcon fontSize="small" />} color="orange">
-        Session not found or access denied.
+        {t(
+          "workflow.participant.sessionNotFound",
+          "Session not found or access denied.",
+        )}
       </Alert>
     );
   }
@@ -209,15 +218,35 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
   const getStatusBadge = (status: string) => {
     switch (status) {
       case "SIGNED":
-        return <Badge color="green">Signed</Badge>;
+        return (
+          <Badge color="green">
+            {t("workflow.participant.statusSigned", "Signed")}
+          </Badge>
+        );
       case "DECLINED":
-        return <Badge color="red">Declined</Badge>;
+        return (
+          <Badge color="red">
+            {t("workflow.participant.statusDeclined", "Declined")}
+          </Badge>
+        );
       case "VIEWED":
-        return <Badge color="blue">Viewed</Badge>;
+        return (
+          <Badge color="blue">
+            {t("workflow.participant.statusViewed", "Viewed")}
+          </Badge>
+        );
       case "NOTIFIED":
-        return <Badge color="yellow">Notified</Badge>;
+        return (
+          <Badge color="yellow">
+            {t("workflow.participant.statusNotified", "Notified")}
+          </Badge>
+        );
       case "PENDING":
-        return <Badge color="gray">Pending</Badge>;
+        return (
+          <Badge color="gray">
+            {t("workflow.participant.statusPending", "Pending")}
+          </Badge>
+        );
       default:
         return <Badge>{status}</Badge>;
     }
@@ -254,7 +283,9 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
                 {session.documentName}
               </Text>
               <Text size="sm" c="dimmed">
-                From: {session.ownerUsername}
+                {t("workflow.participant.from", "From: {{name}}", {
+                  name: session.ownerUsername,
+                })}
               </Text>
             </div>
             {getStatusBadge(participant.status)}
@@ -272,7 +303,9 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
 
           {session.dueDate && (
             <Text size="sm" c="dimmed">
-              Due Date: {session.dueDate}
+              {t("workflow.participant.dueDate", "Due Date: {{date}}", {
+                date: session.dueDate,
+              })}
             </Text>
           )}
 
@@ -283,7 +316,7 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
               onClick={() => downloadDocument(token)}
               variant="light"
             >
-              Download Document
+              {t("workflow.participant.downloadDocument", "Download Document")}
             </Button>
           </Group>
         </Stack>
@@ -293,17 +326,35 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
         <Card shadow="sm" padding="md" radius="md" withBorder>
           <Stack gap="md">
             <Text fw={500} size="lg">
-              Sign Document
+              {t("workflow.participant.signDocument", "Sign Document")}
             </Text>
 
             <Select
-              label="Certificate Type"
+              label={t(
+                "workflow.participant.certificateType",
+                "Certificate Type",
+              )}
               value={certType}
               onChange={(value) => setCertType(value || "P12")}
               data={[
-                { value: "P12", label: "P12/PKCS12 Certificate" },
-                { value: "JKS", label: "JKS Keystore" },
-                { value: "SERVER", label: "Server Certificate (if available)" },
+                {
+                  value: "P12",
+                  label: t(
+                    "workflow.participant.certTypeP12",
+                    "P12/PKCS12 Certificate",
+                  ),
+                },
+                {
+                  value: "JKS",
+                  label: t("workflow.participant.certTypeJks", "JKS Keystore"),
+                },
+                {
+                  value: "SERVER",
+                  label: t(
+                    "workflow.participant.certTypeServer",
+                    "Server Certificate (if available)",
+                  ),
+                },
               ]}
               size="sm"
               data-testid="cert-type-select"
@@ -312,8 +363,14 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
             {certType !== "SERVER" && (
               <>
                 <FileInput
-                  label="Certificate File"
-                  placeholder="Select certificate file"
+                  label={t(
+                    "workflow.participant.certificateFile",
+                    "Certificate File",
+                  )}
+                  placeholder={t(
+                    "workflow.participant.certificateFilePlaceholder",
+                    "Select certificate file",
+                  )}
                   value={certFile}
                   onChange={setCertFile}
                   accept=".p12,.pfx,.jks"
@@ -322,7 +379,10 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
                 />
 
                 <TextInput
-                  label="Certificate Password"
+                  label={t(
+                    "workflow.participant.certificatePassword",
+                    "Certificate Password",
+                  )}
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.currentTarget.value)}
@@ -386,23 +446,32 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
             )}
 
             <TextInput
-              label="Location"
-              placeholder="e.g., San Francisco, CA"
+              label={t("workflow.participant.location", "Location")}
+              placeholder={t(
+                "workflow.participant.locationPlaceholder",
+                "e.g., San Francisco, CA",
+              )}
               value={location}
               onChange={(e) => setLocation(e.currentTarget.value)}
               size="sm"
             />
 
             <TextInput
-              label="Reason"
-              placeholder="e.g., Document approval"
+              label={t("workflow.participant.reason", "Reason")}
+              placeholder={t(
+                "workflow.participant.reasonPlaceholder",
+                "e.g., Document approval",
+              )}
               value={reason}
               onChange={(e) => setReason(e.currentTarget.value)}
               size="sm"
             />
 
             <TextInput
-              label="Page Number (optional)"
+              label={t(
+                "workflow.participant.pageNumber",
+                "Page Number (optional)",
+              )}
               type="number"
               value={pageNumber}
               onChange={(e) =>
@@ -423,7 +492,7 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
                 color="green"
                 data-testid="submit-signature-button"
               >
-                Submit Signature
+                {t("workflow.participant.submitSignature", "Submit Signature")}
               </Button>
 
               <Button
@@ -433,7 +502,7 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
                 variant="light"
                 data-testid="decline-button"
               >
-                Decline
+                {t("workflow.participant.decline", "Decline")}
               </Button>
             </Group>
           </Stack>
@@ -442,14 +511,24 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
 
       {participant.hasCompleted && (
         <Alert icon={<CheckCircleIcon fontSize="small" />} color="green">
-          You have {participant.status === "SIGNED" ? "signed" : "declined"}{" "}
-          this document.
+          {participant.status === "SIGNED"
+            ? t(
+                "workflow.participant.completedSigned",
+                "You have signed this document.",
+              )
+            : t(
+                "workflow.participant.completedDeclined",
+                "You have declined this document.",
+              )}
         </Alert>
       )}
 
       {participant.isExpired && (
         <Alert icon={<InfoIcon fontSize="small" />} color="orange">
-          Your access to this document has expired.
+          {t(
+            "workflow.participant.accessExpired",
+            "Your access to this document has expired.",
+          )}
         </Alert>
       )}
     </Stack>

frontend/editor/src/proprietary/constants/planConstants.ts

@@ -1,100 +1,219 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import type { PlanFeature } from "@app/types/license";
 
 /**
  * Shared plan feature definitions for Stirling PDF Self-Hosted
- * Used by both dynamic (Stripe) and static (fallback) plan displays
+ * Used by both dynamic (Stripe) and static (fallback) plan displays.
+ *
+ * These are exposed as hooks so that every feature/highlight string can be
+ * localized via `t()` while preserving the original shape.
  */
 
-export const PLAN_FEATURES = {
-  FREE: [
-    { name: "Self-hosted deployment", included: true },
-    { name: "All PDF operations", included: true },
-    { name: "Secure Login Support", included: true },
-    { name: "Community support", included: true },
-    { name: "Regular updates", included: true },
-    { name: "up to 5 users", included: true },
-    { name: "Unlimited users", included: false },
-    { name: "Google drive integration", included: false },
-    { name: "External Database", included: false },
-    { name: "Editing text in pdfs", included: false },
-    { name: "Users limited to seats", included: false },
-    { name: "SSO", included: false },
-    { name: "SAML", included: false },
-    { name: "Auditing", included: false },
-    { name: "Usage tracking", included: false },
-    { name: "Prometheus Support", included: false },
-    { name: "Custom PDF metadata", included: false },
-  ] as PlanFeature[],
+export interface PlanFeaturesMap {
+  FREE: PlanFeature[];
+  SERVER: PlanFeature[];
+  ENTERPRISE: PlanFeature[];
+}
 
-  SERVER: [
-    { name: "Self-hosted deployment", included: true },
-    { name: "All PDF operations", included: true },
-    { name: "Secure Login Support", included: true },
-    { name: "Community support", included: true },
-    { name: "Regular updates", included: true },
-    { name: "Up to 5 users", included: false },
-    { name: "Unlimited users", included: true },
-    { name: "Google drive integration", included: true },
-    { name: "External Database", included: true },
-    { name: "Editing text in pdfs", included: true },
-    { name: "Users limited to seats", included: false },
-    { name: "SSO", included: true },
-    { name: "SAML", included: false },
-    { name: "Auditing", included: false },
-    { name: "Usage tracking", included: false },
-    { name: "Prometheus Support", included: false },
-    { name: "Custom PDF metadata", included: false },
-  ] as PlanFeature[],
+export interface PlanHighlightsMap {
+  FREE: string[];
+  SERVER_MONTHLY: string[];
+  SERVER_YEARLY: string[];
+  ENTERPRISE_MONTHLY: string[];
+  ENTERPRISE_YEARLY: string[];
+}
 
-  ENTERPRISE: [
-    { name: "Self-hosted deployment", included: true },
-    { name: "All PDF operations", included: true },
-    { name: "Secure Login Support", included: true },
-    { name: "Community support", included: true },
-    { name: "Regular updates", included: true },
-    { name: "up to 5 users", included: false },
-    { name: "Unlimited users", included: false },
-    { name: "Google drive integration", included: true },
-    { name: "External Database", included: true },
-    { name: "Editing text in pdfs", included: true },
-    { name: "Users limited to seats", included: true },
-    { name: "SSO", included: true },
-    { name: "SAML", included: true },
-    { name: "Auditing", included: true },
-    { name: "Usage tracking", included: true },
-    { name: "Prometheus Support", included: true },
-    { name: "Custom PDF metadata", included: true },
-  ] as PlanFeature[],
-} as const;
+export const usePlanFeatures = (): PlanFeaturesMap => {
+  const { t } = useTranslation();
 
-export const PLAN_HIGHLIGHTS = {
-  FREE: ["Up to 5 users", "Self-hosted", "All basic features"],
-  SERVER_MONTHLY: [
-    "Self-hosted on your infrastructure",
-    "Unlimited users",
-    "Advanced integrations",
-    "SSO (OAuth2/OIDC)",
-    "Editing text in PDFs",
-    "Cancel anytime",
-  ],
-  SERVER_YEARLY: [
-    "Self-hosted on your infrastructure",
-    "Unlimited users",
-    "Advanced integrations",
-    "SSO (OAuth2/OIDC)",
-    "Editing text in PDFs",
-    "Save with annual billing",
-  ],
-  ENTERPRISE_MONTHLY: [
-    "Enterprise features (SAML, Auditing)",
-    "Usage tracking & Prometheus",
-    "Custom PDF metadata",
-    "Per-seat licensing",
-  ],
-  ENTERPRISE_YEARLY: [
-    "Enterprise features (SAML, Auditing)",
-    "Usage tracking & Prometheus",
-    "Custom PDF metadata",
-    "Save with annual billing",
-  ],
-} as const;
+  return useMemo(() => {
+    const selfHostedDeployment = t(
+      "plan.features.selfHostedDeployment",
+      "Self-hosted deployment",
+    );
+    const allPdfOperations = t(
+      "plan.features.allPdfOperations",
+      "All PDF operations",
+    );
+    const secureLoginSupport = t(
+      "plan.features.secureLoginSupport",
+      "Secure Login Support",
+    );
+    const communitySupport = t(
+      "plan.features.communitySupport",
+      "Community support",
+    );
+    const regularUpdates = t("plan.features.regularUpdates", "Regular updates");
+    const upToFiveUsersLowercase = t(
+      "plan.features.upToFiveUsersLowercase",
+      "up to 5 users",
+    );
+    const upToFiveUsers = t("plan.features.upToFiveUsers", "Up to 5 users");
+    const unlimitedUsers = t("plan.features.unlimitedUsers", "Unlimited users");
+    const googleDriveIntegration = t(
+      "plan.features.googleDriveIntegration",
+      "Google drive integration",
+    );
+    const externalDatabase = t(
+      "plan.features.externalDatabase",
+      "External Database",
+    );
+    const editingTextInPdfs = t(
+      "plan.features.editingTextInPdfs",
+      "Editing text in pdfs",
+    );
+    const usersLimitedToSeats = t(
+      "plan.features.usersLimitedToSeats",
+      "Users limited to seats",
+    );
+    const sso = t("plan.features.sso", "SSO");
+    const saml = t("plan.features.saml", "SAML");
+    const auditing = t("plan.features.auditing", "Auditing");
+    const usageTracking = t("plan.features.usageTracking", "Usage tracking");
+    const prometheusSupport = t(
+      "plan.features.prometheusSupport",
+      "Prometheus Support",
+    );
+    const customPdfMetadata = t(
+      "plan.features.customPdfMetadata",
+      "Custom PDF metadata",
+    );
+
+    return {
+      FREE: [
+        { name: selfHostedDeployment, included: true },
+        { name: allPdfOperations, included: true },
+        { name: secureLoginSupport, included: true },
+        { name: communitySupport, included: true },
+        { name: regularUpdates, included: true },
+        { name: upToFiveUsersLowercase, included: true },
+        { name: unlimitedUsers, included: false },
+        { name: googleDriveIntegration, included: false },
+        { name: externalDatabase, included: false },
+        { name: editingTextInPdfs, included: false },
+        { name: usersLimitedToSeats, included: false },
+        { name: sso, included: false },
+        { name: saml, included: false },
+        { name: auditing, included: false },
+        { name: usageTracking, included: false },
+        { name: prometheusSupport, included: false },
+        { name: customPdfMetadata, included: false },
+      ],
+      SERVER: [
+        { name: selfHostedDeployment, included: true },
+        { name: allPdfOperations, included: true },
+        { name: secureLoginSupport, included: true },
+        { name: communitySupport, included: true },
+        { name: regularUpdates, included: true },
+        { name: upToFiveUsers, included: false },
+        { name: unlimitedUsers, included: true },
+        { name: googleDriveIntegration, included: true },
+        { name: externalDatabase, included: true },
+        { name: editingTextInPdfs, included: true },
+        { name: usersLimitedToSeats, included: false },
+        { name: sso, included: true },
+        { name: saml, included: false },
+        { name: auditing, included: false },
+        { name: usageTracking, included: false },
+        { name: prometheusSupport, included: false },
+        { name: customPdfMetadata, included: false },
+      ],
+      ENTERPRISE: [
+        { name: selfHostedDeployment, included: true },
+        { name: allPdfOperations, included: true },
+        { name: secureLoginSupport, included: true },
+        { name: communitySupport, included: true },
+        { name: regularUpdates, included: true },
+        { name: upToFiveUsersLowercase, included: false },
+        { name: unlimitedUsers, included: false },
+        { name: googleDriveIntegration, included: true },
+        { name: externalDatabase, included: true },
+        { name: editingTextInPdfs, included: true },
+        { name: usersLimitedToSeats, included: true },
+        { name: sso, included: true },
+        { name: saml, included: true },
+        { name: auditing, included: true },
+        { name: usageTracking, included: true },
+        { name: prometheusSupport, included: true },
+        { name: customPdfMetadata, included: true },
+      ],
+    };
+  }, [t]);
+};
+
+export const usePlanHighlights = (): PlanHighlightsMap => {
+  const { t } = useTranslation();
+
+  return useMemo(() => {
+    const selfHostedOnInfrastructure = t(
+      "plan.highlights.selfHostedOnInfrastructure",
+      "Self-hosted on your infrastructure",
+    );
+    const unlimitedUsers = t(
+      "plan.highlights.unlimitedUsers",
+      "Unlimited users",
+    );
+    const advancedIntegrations = t(
+      "plan.highlights.advancedIntegrations",
+      "Advanced integrations",
+    );
+    const ssoOAuth = t("plan.highlights.ssoOAuth", "SSO (OAuth2/OIDC)");
+    const editingTextInPdfsCaps = t(
+      "plan.highlights.editingTextInPdfsCaps",
+      "Editing text in PDFs",
+    );
+    const enterpriseFeatures = t(
+      "plan.highlights.enterpriseFeatures",
+      "Enterprise features (SAML, Auditing)",
+    );
+    const usageTrackingPrometheus = t(
+      "plan.highlights.usageTrackingPrometheus",
+      "Usage tracking & Prometheus",
+    );
+    const customPdfMetadata = t(
+      "plan.highlights.customPdfMetadata",
+      "Custom PDF metadata",
+    );
+    const saveWithAnnualBilling = t(
+      "plan.highlights.saveWithAnnualBilling",
+      "Save with annual billing",
+    );
+
+    return {
+      FREE: [
+        t("plan.highlights.upToFiveUsers", "Up to 5 users"),
+        t("plan.highlights.selfHosted", "Self-hosted"),
+        t("plan.highlights.allBasicFeatures", "All basic features"),
+      ],
+      SERVER_MONTHLY: [
+        selfHostedOnInfrastructure,
+        unlimitedUsers,
+        advancedIntegrations,
+        ssoOAuth,
+        editingTextInPdfsCaps,
+        t("plan.highlights.cancelAnytime", "Cancel anytime"),
+      ],
+      SERVER_YEARLY: [
+        selfHostedOnInfrastructure,
+        unlimitedUsers,
+        advancedIntegrations,
+        ssoOAuth,
+        editingTextInPdfsCaps,
+        saveWithAnnualBilling,
+      ],
+      ENTERPRISE_MONTHLY: [
+        enterpriseFeatures,
+        usageTrackingPrometheus,
+        customPdfMetadata,
+        t("plan.highlights.perSeatLicensing", "Per-seat licensing"),
+      ],
+      ENTERPRISE_YEARLY: [
+        enterpriseFeatures,
+        usageTrackingPrometheus,
+        customPdfMetadata,
+        saveWithAnnualBilling,
+      ],
+    };
+  }, [t]);
+};

frontend/editor/src/proprietary/contexts/CheckoutContext.tsx

@@ -24,6 +24,10 @@ import {
 import { useLicense } from "@app/contexts/LicenseContext";
 import { isSupabaseConfigured } from "@app/services/supabaseClient";
 import { getPreferredCurrency } from "@app/utils/currencyDetection";
+import {
+  usePlanFeatures,
+  usePlanHighlights,
+} from "@app/constants/planConstants";
 
 export interface CheckoutOptions {
   minimumSeats?: number; // Override calculated seats for enterprise
@@ -57,6 +61,8 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
 }) => {
   const { t, i18n } = useTranslation();
   const { refetchLicense } = useLicense();
+  const planFeatures = usePlanFeatures();
+  const planHighlights = usePlanHighlights();
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [selectedPlanGroup, setSelectedPlanGroup] =
@@ -85,7 +91,11 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
 
       try {
         setPlansLoading(true);
-        const response = await licenseService.getPlans(currency);
+        const response = await licenseService.getPlans(
+          planFeatures,
+          planHighlights,
+          currency,
+        );
         setPlans(response.plans);
         setPlansLoaded(true);
       } catch (error) {
@@ -95,7 +105,7 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
         setPlansLoading(false);
       }
     },
-    [plansLoading],
+    [plansLoading, planFeatures, planHighlights],
   );
 
   const refetchPlans = useCallback(() => {

frontend/editor/src/proprietary/hooks/usePlans.ts

@@ -1,8 +1,12 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import licenseService, {
   PlanTier,
   PlansResponse,
 } from "@app/services/licenseService";
+import {
+  usePlanFeatures,
+  usePlanHighlights,
+} from "@app/constants/planConstants";
 
 export interface UsePlansReturn {
   plans: PlanTier[];
@@ -12,16 +16,22 @@ export interface UsePlansReturn {
 }
 
 export const usePlans = (currency: string = "gbp"): UsePlansReturn => {
+  const planFeatures = usePlanFeatures();
+  const planHighlights = usePlanHighlights();
   const [plans, setPlans] = useState<PlanTier[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const fetchPlans = async () => {
+  const fetchPlans = useCallback(async () => {
     try {
       setLoading(true);
       setError(null);
 
-      const data: PlansResponse = await licenseService.getPlans(currency);
+      const data: PlansResponse = await licenseService.getPlans(
+        planFeatures,
+        planHighlights,
+        currency,
+      );
       setPlans(data.plans);
     } catch (err) {
       console.error("Error fetching plans:", err);
@@ -29,11 +39,11 @@ export const usePlans = (currency: string = "gbp"): UsePlansReturn => {
     } finally {
       setLoading(false);
     }
-  };
+  }, [currency, planFeatures, planHighlights]);
 
   useEffect(() => {
     fetchPlans();
-  }, [currency]);
+  }, [fetchPlans]);
 
   return {
     plans,

frontend/editor/src/proprietary/services/licenseService.ts

@@ -1,7 +1,10 @@
 import apiClient from "@app/services/apiClient";
 import { supabase, isSupabaseConfigured } from "@app/services/supabaseClient";
 import { getCheckoutMode } from "@app/utils/protocolDetection";
-import { PLAN_FEATURES, PLAN_HIGHLIGHTS } from "@app/constants/planConstants";
+import type {
+  PlanFeaturesMap,
+  PlanHighlightsMap,
+} from "@app/constants/planConstants";
 import type { LicenseInfo, PlanFeature } from "@app/types/license";
 
 export interface PlanTier {
@@ -102,9 +105,18 @@ const SELF_HOSTED_LOOKUP_KEYS = [
 
 const licenseService = {
   /**
-   * Get available plans with pricing for the specified currency
+   * Get available plans with pricing for the specified currency.
+   *
+   * Feature and highlight labels are passed in by the caller (a React hook /
+   * context that resolves them via `usePlanFeatures` / `usePlanHighlights`),
+   * which keeps this service free of React/i18n dependencies while still
+   * returning fully localized plan content.
    */
-  async getPlans(currency: string = "usd"): Promise<PlansResponse> {
+  async getPlans(
+    planFeatures: PlanFeaturesMap,
+    planHighlights: PlanHighlightsMap,
+    currency: string = "usd",
+  ): Promise<PlansResponse> {
     try {
       // Check if Supabase is configured
       if (!isSupabaseConfigured || !supabase) {
@@ -179,8 +191,8 @@ const licenseService = {
           currency: currencySymbol,
           period: "/month",
           popular: false,
-          features: PLAN_FEATURES.SERVER,
-          highlights: PLAN_HIGHLIGHTS.SERVER_MONTHLY,
+          features: planFeatures.SERVER,
+          highlights: planHighlights.SERVER_MONTHLY,
         },
         {
           id: "selfhosted:server:yearly",
@@ -190,8 +202,8 @@ const licenseService = {
           currency: currencySymbol,
           period: "/year",
           popular: true,
-          features: PLAN_FEATURES.SERVER,
-          highlights: PLAN_HIGHLIGHTS.SERVER_YEARLY,
+          features: planFeatures.SERVER,
+          highlights: planHighlights.SERVER_YEARLY,
         },
         {
           id: "selfhosted:enterprise:monthly",
@@ -203,8 +215,8 @@ const licenseService = {
           period: "/month",
           popular: false,
           requiresSeats: true,
-          features: PLAN_FEATURES.ENTERPRISE,
-          highlights: PLAN_HIGHLIGHTS.ENTERPRISE_MONTHLY,
+          features: planFeatures.ENTERPRISE,
+          highlights: planHighlights.ENTERPRISE_MONTHLY,
         },
         {
           id: "selfhosted:enterprise:yearly",
@@ -216,8 +228,8 @@ const licenseService = {
           period: "/year",
           popular: false,
           requiresSeats: true,
-          features: PLAN_FEATURES.ENTERPRISE,
-          highlights: PLAN_HIGHLIGHTS.ENTERPRISE_YEARLY,
+          features: planFeatures.ENTERPRISE,
+          highlights: planHighlights.ENTERPRISE_YEARLY,
         },
       ];
 
@@ -240,8 +252,8 @@ const licenseService = {
         currency: currencySymbol,
         period: "",
         popular: false,
-        features: PLAN_FEATURES.FREE,
-        highlights: PLAN_HIGHLIGHTS.FREE,
+        features: planFeatures.FREE,
+        highlights: planHighlights.FREE,
       };
 
       const allPlans = [freePlan, ...validPlans];